diff --git a/apps/web/src/__generated__/questions/quiz/are-you-familiar-with-styling-svg/en-US.json b/apps/web/src/__generated__/questions/quiz/are-you-familiar-with-styling-svg/en-US.json
index c6f1c0543..bdeb135a7 100644
--- a/apps/web/src/__generated__/questions/quiz/are-you-familiar-with-styling-svg/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/are-you-familiar-with-styling-svg/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/are-you-familiar-with-styling-svg/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},r=(t,e,i,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!f.call(t,s)&&s!==i&&a(t,s,{get:()=>e[s],enumerable:!(l=u(e,s))||l.enumerable});return t};var y=(t,e,i)=>(i=t!=null?h(b(t)):{},r(e||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),S=t=>r(a({},\"__esModule\",{value:!0}),t);var c=m((C,o)=>{o.exports=_jsx_runtime});var j={};g(j,{default:()=>w,frontmatter:()=>x});var n=y(c()),x={title:\"Are you familiar with styling SVG?\"};function d(t){let e=Object.assign({p:\"p\",code:\"code\",pre:\"pre\",em:\"em\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"There are several ways to color shapes (including specifying attributes on the object) using inline CSS, an embedded CSS section, or an external CSS file. Most SVGs you find on the web uses inline CSS, but there are advantages and disadvantages associated with each type.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Basic coloring can be done by setting two attributes on the node: \",(0,n.jsx)(e.code,{children:\"fill\"}),\" and \",(0,n.jsx)(e.code,{children:\"stroke\"}),\". \",(0,n.jsx)(e.code,{children:\"fill\"}),\" sets the color inside the object and \",(0,n.jsx)(e.code,{children:\"stroke\"}),\" sets the color of the line drawn around the object. You can use the same CSS color naming schemes that you use in HTML, whether that's color names (that is \",(0,n.jsx)(e.code,{children:\"red\"}),\"), RGB values (that is \",(0,n.jsx)(e.code,{children:\"rgb(255,0,0)\"}),\"), Hex values, RGBA values, etc.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<rect\n  x=\"10\"\n  y=\"10\"\n  width=\"100\"\n  height=\"100\"\n  stroke=\"blue\"\n  fill=\"purple\"\n  fill-opacity=\"0.5\"\n  stroke-opacity=\"0.8\" />\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The above \",(0,n.jsx)(e.code,{children:'fill=\"purple\"'}),\" is an example of a \",(0,n.jsx)(e.em,{children:\"presentational attribute\"}),\". Interestingly, and unlike inline styles like \",(0,n.jsx)(e.code,{children:'style=\"fill: purple\"'}),\" which also happens to be an attribute, presentational attributes can be \",(0,n.jsx)(e.a,{href:\"https://css-tricks.com/presentation-attributes-vs-inline-styles/\",children:\"overridden by CSS\"}),\" styles defined in a stylesheet. Hence if you did something like \",(0,n.jsx)(e.code,{children:\"svg { fill: blue; }\"}),\" it will override the purple fill that has been defined.\"]})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var w=v;return S(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var i in e)l(t,i,{get:e[i],enumerable:!0})},a=(t,e,i,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of f(e))!b.call(t,s)&&s!==i&&l(t,s,{get:()=>e[s],enumerable:!(r=p(e,s))||r.enumerable});return t};var S=(t,e,i)=>(i=t!=null?u(m(t)):{},a(e||!t||!t.__esModule?l(i,\"default\",{value:t,enumerable:!0}):i,t)),x=t=>a(l({},\"__esModule\",{value:!0}),t);var c=y((k,o)=>{o.exports=_jsx_runtime});var w={};g(w,{default:()=>h,frontmatter:()=>v});var n=S(c()),v={title:\"Are you familiar with styling SVG?\"};function d(t){let e={a:\"a\",code:\"code\",em:\"em\",p:\"p\",pre:\"pre\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"There are several ways to color shapes (including specifying attributes on the object) using inline CSS, an embedded CSS section, or an external CSS file. Most SVGs you find on the web uses inline CSS, but there are advantages and disadvantages associated with each type.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Basic coloring can be done by setting two attributes on the node: \",(0,n.jsx)(e.code,{children:\"fill\"}),\" and \",(0,n.jsx)(e.code,{children:\"stroke\"}),\". \",(0,n.jsx)(e.code,{children:\"fill\"}),\" sets the color inside the object and \",(0,n.jsx)(e.code,{children:\"stroke\"}),\" sets the color of the line drawn around the object. You can use the same CSS color naming schemes that you use in HTML, whether that's color names (that is \",(0,n.jsx)(e.code,{children:\"red\"}),\"), RGB values (that is \",(0,n.jsx)(e.code,{children:\"rgb(255,0,0)\"}),\"), Hex values, RGBA values, etc.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<rect\n  x=\"10\"\n  y=\"10\"\n  width=\"100\"\n  height=\"100\"\n  stroke=\"blue\"\n  fill=\"purple\"\n  fill-opacity=\"0.5\"\n  stroke-opacity=\"0.8\" />\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The above \",(0,n.jsx)(e.code,{children:'fill=\"purple\"'}),\" is an example of a \",(0,n.jsx)(e.em,{children:\"presentational attribute\"}),\". Interestingly, and unlike inline styles like \",(0,n.jsx)(e.code,{children:'style=\"fill: purple\"'}),\" which also happens to be an attribute, presentational attributes can be \",(0,n.jsx)(e.a,{href:\"https://css-tricks.com/presentation-attributes-vs-inline-styles/\",children:\"overridden by CSS\"}),\" styles defined in a stylesheet. Hence if you did something like \",(0,n.jsx)(e.code,{children:\"svg { fill: blue; }\"}),\" it will override the purple fill that has been defined.\"]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return x(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/are-you-familiar-with-styling-svg/pt-BR.json b/apps/web/src/__generated__/questions/quiz/are-you-familiar-with-styling-svg/pt-BR.json
index 56774f6d6..cf9e93ad1 100644
--- a/apps/web/src/__generated__/questions/quiz/are-you-familiar-with-styling-svg/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/are-you-familiar-with-styling-svg/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/are-you-familiar-with-styling-svg/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var r in e)a(o,r,{get:e[r],enumerable:!0})},i=(o,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of p(e))!f.call(o,t)&&t!==r&&a(o,t,{get:()=>e[t],enumerable:!(s=u(e,t))||s.enumerable});return o};var g=(o,e,r)=>(r=o!=null?m(h(o)):{},i(e||!o||!o.__esModule?a(r,\"default\",{value:o,enumerable:!0}):r,o)),v=o=>i(a({},\"__esModule\",{value:!0}),o);var d=b((_,c)=>{c.exports=_jsx_runtime});var y={};x(y,{default:()=>q,frontmatter:()=>S});var n=g(d()),S={title:\"Voc\\xEA conhece o estilo SVG?\"};function l(o){let e=Object.assign({p:\"p\",code:\"code\",pre:\"pre\",em:\"em\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Se voc\\xEA usa alguma ferramenta de an\\xE1lise est\\xE1tica em seu fluxo de trabalho (por exemplo, ESLint, TypeScript Compiler), geralmente ela tamb\\xE9m pode verificar se voc\\xEA est\\xE1 referenciando vari\\xE1veis n\\xE3o declaradas. A maioria dos SVGs que voc\\xEA encontra na web usa CSS inline, mas existem vantagens e desvantagens associadas a cada tipo.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A colora\\xE7\\xE3o b\\xE1sica pode ser feita definindo dois atributos no n\\xF3: \",(0,n.jsx)(e.code,{children:\"fill\"}),\" e \",(0,n.jsx)(e.code,{children:\"stroke\"}),\". \",(0,n.jsx)(e.code,{children:\"fill\"}),\" define a cor dentro do objeto e \",(0,n.jsx)(e.code,{children:\"stroke\"}),\" define a cor da linha desenhada ao redor do objeto. Voc\\xEA pode usar os mesmos esquemas de nomenclatura de cores CSS que voc\\xEA usa em HTML, independentemente de serem nomes de cores (que \\xE9 \",(0,n.jsx)(e.code,{children:\"red\"}),\"), Valores RGB (que s\\xE3o \",(0,n.jsx)(e.code,{children:\"rgb(255,0,0)\"}),\"), valores de Hex, valores RGBA, etc.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<rect\n  x=\"10\"\n  y=\"10\"\n  width=\"100\"\n  height=\"100\"\n  stroke=\"blue\"\n  fill=\"purple\"\n  fill-opacity=\"0.5\"\n  stroke-opacity=\"0.8\" />\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"O \",(0,n.jsx)(e.code,{children:'fill=\"purple\"'}),\" acima \\xE9 um exemplo de um \",(0,n.jsx)(e.em,{children:\"atributo apresentacional\"}),\". Curiosamente, e ao contr\\xE1rio de estilos embutidos como \",(0,n.jsx)(e.code,{children:'style=\"fill: purple\"'}),\" que tamb\\xE9m \\xE9 um atributo, os atributos de apresenta\\xE7\\xE3o podem ser \",(0,n.jsx)(e.a,{href:\"https://css-tricks.com/presentation-attributes-vs-inline-styles/\",children:\"sobrescritos pelo CSS\"}),\" definidos em uma folha de estilos. Da\\xED se voc\\xEA fez algo como \",(0,n.jsx)(e.code,{children:\"svg { fill: blue; }\"}),\" ele ir\\xE1 substituir o preenchimento roxo que foi definido.\"]})]})}function j(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(l,o)})):l(o)}var q=j;return v(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var x=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),v=(o,e)=>{for(var r in e)a(o,r,{get:e[r],enumerable:!0})},i=(o,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of h(e))!b.call(o,t)&&t!==r&&a(o,t,{get:()=>e[t],enumerable:!(s=p(e,t))||s.enumerable});return o};var g=(o,e,r)=>(r=o!=null?u(f(o)):{},i(e||!o||!o.__esModule?a(r,\"default\",{value:o,enumerable:!0}):r,o)),S=o=>i(a({},\"__esModule\",{value:!0}),o);var d=x((C,c)=>{c.exports=_jsx_runtime});var q={};v(q,{default:()=>m,frontmatter:()=>j});var n=g(d()),j={title:\"Voc\\xEA conhece o estilo SVG?\"};function l(o){let e={a:\"a\",code:\"code\",em:\"em\",p:\"p\",pre:\"pre\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Se voc\\xEA usa alguma ferramenta de an\\xE1lise est\\xE1tica em seu fluxo de trabalho (por exemplo, ESLint, TypeScript Compiler), geralmente ela tamb\\xE9m pode verificar se voc\\xEA est\\xE1 referenciando vari\\xE1veis n\\xE3o declaradas. A maioria dos SVGs que voc\\xEA encontra na web usa CSS inline, mas existem vantagens e desvantagens associadas a cada tipo.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A colora\\xE7\\xE3o b\\xE1sica pode ser feita definindo dois atributos no n\\xF3: \",(0,n.jsx)(e.code,{children:\"fill\"}),\" e \",(0,n.jsx)(e.code,{children:\"stroke\"}),\". \",(0,n.jsx)(e.code,{children:\"fill\"}),\" define a cor dentro do objeto e \",(0,n.jsx)(e.code,{children:\"stroke\"}),\" define a cor da linha desenhada ao redor do objeto. Voc\\xEA pode usar os mesmos esquemas de nomenclatura de cores CSS que voc\\xEA usa em HTML, independentemente de serem nomes de cores (que \\xE9 \",(0,n.jsx)(e.code,{children:\"red\"}),\"), Valores RGB (que s\\xE3o \",(0,n.jsx)(e.code,{children:\"rgb(255,0,0)\"}),\"), valores de Hex, valores RGBA, etc.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<rect\n  x=\"10\"\n  y=\"10\"\n  width=\"100\"\n  height=\"100\"\n  stroke=\"blue\"\n  fill=\"purple\"\n  fill-opacity=\"0.5\"\n  stroke-opacity=\"0.8\" />\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"O \",(0,n.jsx)(e.code,{children:'fill=\"purple\"'}),\" acima \\xE9 um exemplo de um \",(0,n.jsx)(e.em,{children:\"atributo apresentacional\"}),\". Curiosamente, e ao contr\\xE1rio de estilos embutidos como \",(0,n.jsx)(e.code,{children:'style=\"fill: purple\"'}),\" que tamb\\xE9m \\xE9 um atributo, os atributos de apresenta\\xE7\\xE3o podem ser \",(0,n.jsx)(e.a,{href:\"https://css-tricks.com/presentation-attributes-vs-inline-styles/\",children:\"sobrescritos pelo CSS\"}),\" definidos em uma folha de estilos. Da\\xED se voc\\xEA fez algo como \",(0,n.jsx)(e.code,{children:\"svg { fill: blue; }\"}),\" ele ir\\xE1 substituir o preenchimento roxo que foi definido.\"]})]})}function m(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(l,{...o})}):l(o)}return S(q);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/are-you-familiar-with-styling-svg/zh-CN.json b/apps/web/src/__generated__/questions/quiz/are-you-familiar-with-styling-svg/zh-CN.json
index b5141d7dd..37880b1ec 100644
--- a/apps/web/src/__generated__/questions/quiz/are-you-familiar-with-styling-svg/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/are-you-familiar-with-styling-svg/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/are-you-familiar-with-styling-svg/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var r in e)l(n,r,{get:e[r],enumerable:!0})},o=(n,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!S.call(n,c)&&c!==r&&l(n,c,{get:()=>e[c],enumerable:!(i=p(e,c))||i.enumerable});return n};var g=(n,e,r)=>(r=n!=null?a(u(n)):{},o(e||!n||!n.__esModule?l(r,\"default\",{value:n,enumerable:!0}):r,n)),C=n=>o(l({},\"__esModule\",{value:!0}),n);var d=f((G,s)=>{s.exports=_jsx_runtime});var y={};x(y,{default:()=>b,frontmatter:()=>j});var t=g(d()),j={title:\"\\u4F60\\u719F\\u6089 SVG \\u7684\\u6837\\u5F0F\\u8BBE\\u7F6E\\u5417\\uFF1F\"};function h(n){let e=Object.assign({p:\"p\",code:\"code\",pre:\"pre\",em:\"em\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.p,{children:\"\\u6709\\u51E0\\u79CD\\u65B9\\u6CD5\\u53EF\\u4EE5\\u4E3A\\u5F62\\u72B6\\u7740\\u8272\\uFF08\\u5305\\u62EC\\u5728\\u5BF9\\u8C61\\u4E0A\\u6307\\u5B9A\\u5C5E\\u6027\\uFF09\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u5185\\u8054 CSS\\u3001\\u5D4C\\u5165\\u5F0F CSS \\u90E8\\u5206\\u6216\\u5916\\u90E8 CSS \\u6587\\u4EF6\\u3002 \\u60A8\\u5728\\u7F51\\u7EDC\\u4E0A\\u627E\\u5230\\u7684\\u5927\\u591A\\u6570 SVG \\u90FD\\u4F7F\\u7528\\u5185\\u8054 CSS\\uFF0C\\u4F46\\u6BCF\\u79CD\\u7C7B\\u578B\\u90FD\\u6709\\u5176\\u4F18\\u70B9\\u548C\\u7F3A\\u70B9\\u3002\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728\\u8282\\u70B9\\u4E0A\\u8BBE\\u7F6E\\u4E24\\u4E2A\\u5C5E\\u6027\\u6765\\u5B8C\\u6210\\u57FA\\u672C\\u7740\\u8272\\uFF1A\",(0,t.jsx)(e.code,{children:\"fill\"}),\" \\u548C \",(0,t.jsx)(e.code,{children:\"stroke\"}),\"\\u3002 \",(0,t.jsx)(e.code,{children:\"fill\"}),\" \\u8BBE\\u7F6E\\u5BF9\\u8C61\\u5185\\u90E8\\u7684\\u989C\\u8272\\uFF0C\",(0,t.jsx)(e.code,{children:\"stroke\"}),\" \\u8BBE\\u7F6E\\u7ED8\\u5236\\u5728\\u5BF9\\u8C61\\u5468\\u56F4\\u7684\\u7EBF\\u6761\\u7684\\u989C\\u8272\\u3002 \\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5728 HTML \\u4E2D\\u4F7F\\u7528\\u7684\\u76F8\\u540C CSS \\u989C\\u8272\\u547D\\u540D\\u65B9\\u6848\\uFF0C\\u65E0\\u8BBA\\u662F\\u989C\\u8272\\u540D\\u79F0\\uFF08\\u5373 \",(0,t.jsx)(e.code,{children:\"red\"}),\"\\uFF09\\u3001RGB \\u503C\\uFF08\\u5373 \",(0,t.jsx)(e.code,{children:\"rgb(255,0,0)\"}),\"\\uFF09\\u3001\\u5341\\u516D\\u8FDB\\u5236\\u503C\\u3001RGBA \\u503C\\u7B49\\u3002\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-html\",children:`<rect\n  x=\"10\"\n  y=\"10\"\n  width=\"100\"\n  height=\"100\"\n  stroke=\"blue\"\n  fill=\"purple\"\n  fill-opacity=\"0.5\"\n  stroke-opacity=\"0.8\" />\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u4E0A\\u9762\\u7684 \",(0,t.jsx)(e.code,{children:'fill=\"purple\"'}),\" \\u662F\",(0,t.jsx)(e.em,{children:\"\\u8868\\u73B0\\u5C5E\\u6027\"}),\"\\u7684\\u4E00\\u4E2A\\u4F8B\\u5B50\\u3002 \\u6709\\u8DA3\\u7684\\u662F\\uFF0C\\u4E0E \",(0,t.jsx)(e.code,{children:'style=\"fill: purple\"'}),\" \\u8FD9\\u6837\\u7684\\u5185\\u8054\\u6837\\u5F0F\\uFF08\\u5B83\\u4E5F\\u6070\\u597D\\u662F\\u4E00\\u4E2A\\u5C5E\\u6027\\uFF09\\u4E0D\\u540C\\uFF0C\\u8868\\u73B0\\u5C5E\\u6027\\u53EF\\u4EE5\\u88AB\\u6837\\u5F0F\\u8868\\u4E2D\\u5B9A\\u4E49\\u7684 \",(0,t.jsx)(e.a,{href:\"https://css-tricks.com/presentation-attributes-vs-inline-styles/\",children:\"CSS \\u6837\\u5F0F\\u8986\\u76D6\"}),\"\\u3002 \\u56E0\\u6B64\\uFF0C\\u5982\\u679C\\u60A8\\u6267\\u884C\\u7C7B\\u4F3C \",(0,t.jsx)(e.code,{children:\"svg { fill: blue; }\"}),\" \\u7684\\u64CD\\u4F5C\\uFF0C\\u5B83\\u5C06\\u8986\\u76D6\\u5DF2\\u5B9A\\u4E49\\u7684\\u7D2B\\u8272\\u586B\\u5145\\u3002\"]})]})}function _(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var b=_;return C(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),C=(n,e)=>{for(var t in e)l(n,t,{get:e[t],enumerable:!0})},o=(n,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of u(e))!f.call(n,c)&&c!==t&&l(n,c,{get:()=>e[c],enumerable:!(i=m(e,c))||i.enumerable});return n};var g=(n,e,t)=>(t=n!=null?p(S(n)):{},o(e||!n||!n.__esModule?l(t,\"default\",{value:n,enumerable:!0}):t,n)),_=n=>o(l({},\"__esModule\",{value:!0}),n);var s=x((b,d)=>{d.exports=_jsx_runtime});var j={};C(j,{default:()=>a,frontmatter:()=>y});var r=g(s()),y={title:\"\\u4F60\\u719F\\u6089 SVG \\u7684\\u6837\\u5F0F\\u8BBE\\u7F6E\\u5417\\uFF1F\"};function h(n){let e={a:\"a\",code:\"code\",em:\"em\",p:\"p\",pre:\"pre\",...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.p,{children:\"\\u6709\\u51E0\\u79CD\\u65B9\\u6CD5\\u53EF\\u4EE5\\u4E3A\\u5F62\\u72B6\\u7740\\u8272\\uFF08\\u5305\\u62EC\\u5728\\u5BF9\\u8C61\\u4E0A\\u6307\\u5B9A\\u5C5E\\u6027\\uFF09\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u5185\\u8054 CSS\\u3001\\u5D4C\\u5165\\u5F0F CSS \\u90E8\\u5206\\u6216\\u5916\\u90E8 CSS \\u6587\\u4EF6\\u3002 \\u60A8\\u5728\\u7F51\\u7EDC\\u4E0A\\u627E\\u5230\\u7684\\u5927\\u591A\\u6570 SVG \\u90FD\\u4F7F\\u7528\\u5185\\u8054 CSS\\uFF0C\\u4F46\\u6BCF\\u79CD\\u7C7B\\u578B\\u90FD\\u6709\\u5176\\u4F18\\u70B9\\u548C\\u7F3A\\u70B9\\u3002\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728\\u8282\\u70B9\\u4E0A\\u8BBE\\u7F6E\\u4E24\\u4E2A\\u5C5E\\u6027\\u6765\\u5B8C\\u6210\\u57FA\\u672C\\u7740\\u8272\\uFF1A\",(0,r.jsx)(e.code,{children:\"fill\"}),\" \\u548C \",(0,r.jsx)(e.code,{children:\"stroke\"}),\"\\u3002 \",(0,r.jsx)(e.code,{children:\"fill\"}),\" \\u8BBE\\u7F6E\\u5BF9\\u8C61\\u5185\\u90E8\\u7684\\u989C\\u8272\\uFF0C\",(0,r.jsx)(e.code,{children:\"stroke\"}),\" \\u8BBE\\u7F6E\\u7ED8\\u5236\\u5728\\u5BF9\\u8C61\\u5468\\u56F4\\u7684\\u7EBF\\u6761\\u7684\\u989C\\u8272\\u3002 \\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5728 HTML \\u4E2D\\u4F7F\\u7528\\u7684\\u76F8\\u540C CSS \\u989C\\u8272\\u547D\\u540D\\u65B9\\u6848\\uFF0C\\u65E0\\u8BBA\\u662F\\u989C\\u8272\\u540D\\u79F0\\uFF08\\u5373 \",(0,r.jsx)(e.code,{children:\"red\"}),\"\\uFF09\\u3001RGB \\u503C\\uFF08\\u5373 \",(0,r.jsx)(e.code,{children:\"rgb(255,0,0)\"}),\"\\uFF09\\u3001\\u5341\\u516D\\u8FDB\\u5236\\u503C\\u3001RGBA \\u503C\\u7B49\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-html\",children:`<rect\n  x=\"10\"\n  y=\"10\"\n  width=\"100\"\n  height=\"100\"\n  stroke=\"blue\"\n  fill=\"purple\"\n  fill-opacity=\"0.5\"\n  stroke-opacity=\"0.8\" />\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u4E0A\\u9762\\u7684 \",(0,r.jsx)(e.code,{children:'fill=\"purple\"'}),\" \\u662F\",(0,r.jsx)(e.em,{children:\"\\u8868\\u73B0\\u5C5E\\u6027\"}),\"\\u7684\\u4E00\\u4E2A\\u4F8B\\u5B50\\u3002 \\u6709\\u8DA3\\u7684\\u662F\\uFF0C\\u4E0E \",(0,r.jsx)(e.code,{children:'style=\"fill: purple\"'}),\" \\u8FD9\\u6837\\u7684\\u5185\\u8054\\u6837\\u5F0F\\uFF08\\u5B83\\u4E5F\\u6070\\u597D\\u662F\\u4E00\\u4E2A\\u5C5E\\u6027\\uFF09\\u4E0D\\u540C\\uFF0C\\u8868\\u73B0\\u5C5E\\u6027\\u53EF\\u4EE5\\u88AB\\u6837\\u5F0F\\u8868\\u4E2D\\u5B9A\\u4E49\\u7684 \",(0,r.jsx)(e.a,{href:\"https://css-tricks.com/presentation-attributes-vs-inline-styles/\",children:\"CSS \\u6837\\u5F0F\\u8986\\u76D6\"}),\"\\u3002 \\u56E0\\u6B64\\uFF0C\\u5982\\u679C\\u60A8\\u6267\\u884C\\u7C7B\\u4F3C \",(0,r.jsx)(e.code,{children:\"svg { fill: blue; }\"}),\" \\u7684\\u64CD\\u4F5C\\uFF0C\\u5B83\\u5C06\\u8986\\u76D6\\u5DF2\\u5B9A\\u4E49\\u7684\\u7D2B\\u8272\\u586B\\u5145\\u3002\"]})]})}function a(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(h,{...n})}):h(n)}return _(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/en-US.json b/apps/web/src/__generated__/questions/quiz/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/en-US.json
index 1b940ab24..0017a0cf5 100644
--- a/apps/web/src/__generated__/questions/quiz/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var t in e)a(n,t,{get:e[t],enumerable:!0})},l=(n,e,t,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!f.call(n,i)&&i!==t&&a(n,i,{get:()=>e[i],enumerable:!(r=h(e,i))||r.enumerable});return n};var v=(n,e,t)=>(t=n!=null?m(u(n)):{},l(e||!n||!n.__esModule?a(t,\"default\",{value:n,enumerable:!0}):t,n)),b=n=>l(a({},\"__esModule\",{value:!0}),n);var c=g((M,o)=>{o.exports=_jsx_runtime});var z={};x(z,{default:()=>j,frontmatter:()=>y});var s=v(c()),y={title:\"Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?\"};function d(n){let e=Object.assign({p:\"p\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\"},n.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.p,{children:\"These two approaches are not mutually exclusive. Making a website responsive means that some elements will respond by adapting its size or other functionality according to the device's screen size, typically the viewport width, through CSS media queries, for example, making the font size smaller on smaller devices.\"}),`\n`,(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:\"language-css\",children:`@media (min-width: 768px) {\n  .my-class {\n    font-size: 24px;\n  }\n}\n\n@media (max-width: 767px) {\n  .my-class {\n    font-size: 12px;\n  }\n}\n`})}),`\n`,(0,s.jsx)(e.p,{children:\"A mobile-first strategy is also responsive, however it agrees we should default and define all the styles for mobile devices, and only add specific responsive rules to other devices later. Following the previous example:\"}),`\n`,(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:\"language-css\",children:`.my-class {\n  font-size: 12px;\n}\n\n@media (min-width: 768px) {\n  .my-class {\n    font-size: 24px;\n  }\n}\n`})}),`\n`,(0,s.jsx)(e.p,{children:\"A mobile-first strategy has the following main advantages:\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsx)(e.li,{children:\"It's more performant on mobile devices, since all the rules applied for them don't have to be validated against any media queries.\"}),`\n`,(0,s.jsx)(e.li,{children:\"Mobile-first designs are more likely to be usable on larger devices (will just appear more stretched, but still usable). However, the reverse is not the case.\"}),`\n`]})]})}function w(n={}){let{wrapper:e}=n.components||{};return e?(0,s.jsx)(e,Object.assign({},n,{children:(0,s.jsx)(d,n)})):d(n)}var j=w;return b(z);})();\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,g=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var t in e)a(n,t,{get:e[t],enumerable:!0})},l=(n,e,t,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!g.call(n,i)&&i!==t&&a(n,i,{get:()=>e[i],enumerable:!(r=p(e,i))||r.enumerable});return n};var y=(n,e,t)=>(t=n!=null?h(f(n)):{},l(e||!n||!n.__esModule?a(t,\"default\",{value:n,enumerable:!0}):t,n)),w=n=>l(a({},\"__esModule\",{value:!0}),n);var c=x((j,o)=>{o.exports=_jsx_runtime});var z={};v(z,{default:()=>m,frontmatter:()=>b});var s=y(c()),b={title:\"Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?\"};function d(n){let e={code:\"code\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.p,{children:\"These two approaches are not mutually exclusive. Making a website responsive means that some elements will respond by adapting its size or other functionality according to the device's screen size, typically the viewport width, through CSS media queries, for example, making the font size smaller on smaller devices.\"}),`\n`,(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:\"language-css\",children:`@media (min-width: 768px) {\n  .my-class {\n    font-size: 24px;\n  }\n}\n\n@media (max-width: 767px) {\n  .my-class {\n    font-size: 12px;\n  }\n}\n`})}),`\n`,(0,s.jsx)(e.p,{children:\"A mobile-first strategy is also responsive, however it agrees we should default and define all the styles for mobile devices, and only add specific responsive rules to other devices later. Following the previous example:\"}),`\n`,(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:\"language-css\",children:`.my-class {\n  font-size: 12px;\n}\n\n@media (min-width: 768px) {\n  .my-class {\n    font-size: 24px;\n  }\n}\n`})}),`\n`,(0,s.jsx)(e.p,{children:\"A mobile-first strategy has the following main advantages:\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsx)(e.li,{children:\"It's more performant on mobile devices, since all the rules applied for them don't have to be validated against any media queries.\"}),`\n`,(0,s.jsx)(e.li,{children:\"Mobile-first designs are more likely to be usable on larger devices (will just appear more stretched, but still usable). However, the reverse is not the case.\"}),`\n`]})]})}function m(n={}){let{wrapper:e}=n.components||{};return e?(0,s.jsx)(e,{...n,children:(0,s.jsx)(d,{...n})}):d(n)}return w(z);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/pt-BR.json b/apps/web/src/__generated__/questions/quiz/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/pt-BR.json
index d68732ec6..2f4a89fd2 100644
--- a/apps/web/src/__generated__/questions/quiz/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(s,e)=>()=>(e||s((e={exports:{}}).exports,e),e.exports),h=(s,e)=>{for(var n in e)o(s,n,{get:e[n],enumerable:!0})},t=(s,e,n,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!g.call(s,i)&&i!==n&&o(s,i,{get:()=>e[i],enumerable:!(r=l(e,i))||r.enumerable});return s};var v=(s,e,n)=>(n=s!=null?p(f(s)):{},t(e||!s||!s.__esModule?o(n,\"default\",{value:s,enumerable:!0}):n,s)),b=s=>t(o({},\"__esModule\",{value:!0}),s);var d=x((q,m)=>{m.exports=_jsx_runtime});var w={};h(w,{default:()=>z,frontmatter:()=>j});var a=v(d()),j={title:\"Voc\\xEA pode explicar a diferen\\xE7a entre codificar um site para ser responsivo e usar uma estrat\\xE9gia mobile-first?\"};function c(s){let e=Object.assign({p:\"p\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\"},s.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.p,{children:\"Estas duas abordagens n\\xE3o se excluem mutuamente. Tornar um site responsivo significa que alguns elementos ir\\xE3o responder adaptando seu tamanho ou outras funcionalidades de acordo com o tamanho da tela do dispositivo, normalmente a largura da viewport, atrav\\xE9s de media queries CSS, por exemplo, tornando o tamanho da fonte menor em dispositivos menores.\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-css\",children:`@media (min-width: 768px) {\n  . y-class {\n    font-size: 24px;\n  }\n}\n\n@media (max-width: 767px) {\n  . y-class {\n    font-size: 12px;\n  }\n}\n`})}),`\n`,(0,a.jsx)(e.p,{children:\"Uma estrat\\xE9gia mobile-first tamb\\xE9m \\xE9 responsiva, no entanto, ela define todos os estilos para dispositivos m\\xF3veis como padr\\xE3o e adiciona regras espec\\xEDficas para dispositivos maiores posteriormente. Seguindo o exemplo anterior:\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-css\",children:`.min-classe {\n  font-size: 12px;\n}\n\n@media (min-width: 768px) {\n  .my-class {\n    font-size: 24px;\n  }\n`})}),`\n`,(0,a.jsx)(e.p,{children:\"Uma estrat\\xE9gia mobile-first tem as seguintes principais vantagens:\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:\"\\xC9 mais perform\\xE1tico em dispositivos m\\xF3veis, j\\xE1 que todas as regras aplicadas para eles n\\xE3o precisam ser validadas em rela\\xE7\\xE3o a nenhuma media query.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Designs mobile-first s\\xE3o mais propensos a ser utiliz\\xE1veis em dispositivos maiores (apenas aparecer\\xE3o mais esticados, mas ainda utiliz\\xE1veis). No entanto, o inverso n\\xE3o \\xE9 verdadeiro.\"}),`\n`]})]})}function _(s={}){let{wrapper:e}=s.components||{};return e?(0,a.jsx)(e,Object.assign({},s,{children:(0,a.jsx)(c,s)})):c(s)}var z=_;return b(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var l=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var h=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),v=(a,e)=>{for(var n in e)o(a,n,{get:e[n],enumerable:!0})},t=(a,e,n,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of f(e))!g.call(a,i)&&i!==n&&o(a,i,{get:()=>e[i],enumerable:!(r=u(e,i))||r.enumerable});return a};var _=(a,e,n)=>(n=a!=null?l(x(a)):{},t(e||!a||!a.__esModule?o(n,\"default\",{value:a,enumerable:!0}):n,a)),b=a=>t(o({},\"__esModule\",{value:!0}),a);var d=h((y,m)=>{m.exports=_jsx_runtime});var z={};v(z,{default:()=>p,frontmatter:()=>j});var s=_(d()),j={title:\"Voc\\xEA pode explicar a diferen\\xE7a entre codificar um site para ser responsivo e usar uma estrat\\xE9gia mobile-first?\"};function c(a){let e={code:\"code\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...a.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.p,{children:\"Estas duas abordagens n\\xE3o se excluem mutuamente. Tornar um site responsivo significa que alguns elementos ir\\xE3o responder adaptando seu tamanho ou outras funcionalidades de acordo com o tamanho da tela do dispositivo, normalmente a largura da viewport, atrav\\xE9s de media queries CSS, por exemplo, tornando o tamanho da fonte menor em dispositivos menores.\"}),`\n`,(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:\"language-css\",children:`@media (min-width: 768px) {\n  . y-class {\n    font-size: 24px;\n  }\n}\n\n@media (max-width: 767px) {\n  . y-class {\n    font-size: 12px;\n  }\n}\n`})}),`\n`,(0,s.jsx)(e.p,{children:\"Uma estrat\\xE9gia mobile-first tamb\\xE9m \\xE9 responsiva, no entanto, ela define todos os estilos para dispositivos m\\xF3veis como padr\\xE3o e adiciona regras espec\\xEDficas para dispositivos maiores posteriormente. Seguindo o exemplo anterior:\"}),`\n`,(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:\"language-css\",children:`.min-classe {\n  font-size: 12px;\n}\n\n@media (min-width: 768px) {\n  .my-class {\n    font-size: 24px;\n  }\n`})}),`\n`,(0,s.jsx)(e.p,{children:\"Uma estrat\\xE9gia mobile-first tem as seguintes principais vantagens:\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsx)(e.li,{children:\"\\xC9 mais perform\\xE1tico em dispositivos m\\xF3veis, j\\xE1 que todas as regras aplicadas para eles n\\xE3o precisam ser validadas em rela\\xE7\\xE3o a nenhuma media query.\"}),`\n`,(0,s.jsx)(e.li,{children:\"Designs mobile-first s\\xE3o mais propensos a ser utiliz\\xE1veis em dispositivos maiores (apenas aparecer\\xE3o mais esticados, mas ainda utiliz\\xE1veis). No entanto, o inverso n\\xE3o \\xE9 verdadeiro.\"}),`\n`]})]})}function p(a={}){let{wrapper:e}=a.components||{};return e?(0,s.jsx)(e,{...a,children:(0,s.jsx)(c,{...a})}):c(a)}return b(z);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/zh-CN.json b/apps/web/src/__generated__/questions/quiz/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/zh-CN.json
index bfae4d01e..bfa331f05 100644
--- a/apps/web/src/__generated__/questions/quiz/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),g=(e,n)=>{for(var t in n)i(e,t,{get:n[t],enumerable:!0})},l=(e,n,t,r)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of x(n))!u.call(e,c)&&c!==t&&i(e,c,{get:()=>n[c],enumerable:!(r=p(n,c))||r.enumerable});return e};var j=(e,n,t)=>(t=e!=null?m(h(e)):{},l(n||!e||!e.__esModule?i(t,\"default\",{value:e,enumerable:!0}):t,e)),_=e=>l(i({},\"__esModule\",{value:!0}),e);var o=f((b,a)=>{a.exports=_jsx_runtime});var C={};g(C,{default:()=>z,frontmatter:()=>y});var s=j(o()),y={title:\"\\u4F60\\u80FD\\u89E3\\u91CA\\u4E00\\u4E0B\\u7F16\\u5199\\u54CD\\u5E94\\u5F0F\\u7F51\\u7AD9\\u4E0E\\u4F7F\\u7528\\u79FB\\u52A8\\u4F18\\u5148\\u7B56\\u7565\\u7684\\u533A\\u522B\\u5417\\uFF1F\"};function d(e){let n=Object.assign({p:\"p\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\"},e.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.p,{children:\"\\u8FD9\\u4E24\\u79CD\\u65B9\\u6CD5\\u5E76\\u975E\\u76F8\\u4E92\\u6392\\u65A5\\u3002\\u4F7F\\u7F51\\u7AD9\\u5177\\u6709\\u54CD\\u5E94\\u6027\\u610F\\u5473\\u7740\\u67D0\\u4E9B\\u5143\\u7D20\\u5C06\\u901A\\u8FC7\\u8C03\\u6574\\u5176\\u5927\\u5C0F\\u6216\\u5176\\u4ED6\\u529F\\u80FD\\u6765\\u54CD\\u5E94\\uFF0C\\u5177\\u4F53\\u53D6\\u51B3\\u4E8E\\u8BBE\\u5907\\u7684\\u5C4F\\u5E55\\u5C3A\\u5BF8\\uFF0C\\u901A\\u5E38\\u662F\\u89C6\\u53E3\\u5BBD\\u5EA6\\uFF0C\\u4F8B\\u5982\\u901A\\u8FC7 CSS \\u5A92\\u4F53\\u67E5\\u8BE2\\uFF0C\\u4F8B\\u5982\\uFF0C\\u5728\\u8F83\\u5C0F\\u7684\\u8BBE\\u5907\\u4E0A\\u51CF\\u5C0F\\u5B57\\u4F53\\u5927\\u5C0F\\u3002\"}),`\n`,(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:\"language-css\",children:`@media (min-width: 768px) {\n  .my-class {\n    font-size: 24px;\n  }\n}\n\n@media (max-width: 767px) {\n  .my-class {\n    font-size: 12px;\n  }\n}\n`})}),`\n`,(0,s.jsx)(n.p,{children:\"\\u79FB\\u52A8\\u4F18\\u5148\\u7B56\\u7565\\u4E5F\\u5177\\u6709\\u54CD\\u5E94\\u6027\\uFF0C\\u4F46\\u662F\\u5B83\\u540C\\u610F\\u6211\\u4EEC\\u5E94\\u8BE5\\u4E3A\\u79FB\\u52A8\\u8BBE\\u5907\\u8BBE\\u7F6E\\u9ED8\\u8BA4\\u503C\\u5E76\\u5B9A\\u4E49\\u6240\\u6709\\u6837\\u5F0F\\uFF0C\\u5E76\\u4E14\\u7A0D\\u540E\\u4EC5\\u4E3A\\u5176\\u4ED6\\u8BBE\\u5907\\u6DFB\\u52A0\\u7279\\u5B9A\\u7684\\u54CD\\u5E94\\u5F0F\\u89C4\\u5219\\u3002 \\u9075\\u5FAA\\u524D\\u9762\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:\"language-css\",children:`.my-class {\n  font-size: 12px;\n}\n\n@media (min-width: 768px) {\n  .my-class {\n    font-size: 24px;\n  }\n}\n`})}),`\n`,(0,s.jsx)(n.p,{children:\"\\u79FB\\u52A8\\u4F18\\u5148\\u7B56\\u7565\\u5177\\u6709\\u4EE5\\u4E0B\\u4E3B\\u8981\\u4F18\\u70B9\\uFF1A\"}),`\n`,(0,s.jsxs)(n.ul,{children:[`\n`,(0,s.jsx)(n.li,{children:\"\\u5B83\\u5728\\u79FB\\u52A8\\u8BBE\\u5907\\u4E0A\\u5177\\u6709\\u66F4\\u9AD8\\u7684\\u6027\\u80FD\\uFF0C\\u56E0\\u4E3A\\u5E94\\u7528\\u4E8E\\u5B83\\u4EEC\\u7684\\u89C4\\u5219\\u4E0D\\u5FC5\\u9488\\u5BF9\\u4EFB\\u4F55\\u5A92\\u4F53\\u67E5\\u8BE2\\u8FDB\\u884C\\u9A8C\\u8BC1\\u3002\"}),`\n`,(0,s.jsx)(n.li,{children:\"\\u79FB\\u52A8\\u4F18\\u5148\\u8BBE\\u8BA1\\u66F4\\u6709\\u53EF\\u80FD\\u5728\\u66F4\\u5927\\u7684\\u8BBE\\u5907\\u4E0A\\u4F7F\\u7528\\uFF08\\u53EA\\u4F1A\\u663E\\u5F97\\u66F4\\u62C9\\u4F38\\uFF0C\\u4F46\\u4ECD\\u7136\\u53EF\\u7528\\uFF09\\u3002 \\u4F46\\u662F\\uFF0C\\u53CD\\u4E4B\\u5219\\u4E0D\\u7136\\u3002\"}),`\n`]})]})}function w(e={}){let{wrapper:n}=e.components||{};return n?(0,s.jsx)(n,Object.assign({},e,{children:(0,s.jsx)(d,e)})):d(e)}var z=w;return _(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var _=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),g=(e,n)=>{for(var s in n)i(e,s,{get:n[s],enumerable:!0})},l=(e,n,s,r)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of h(n))!f.call(e,c)&&c!==s&&i(e,c,{get:()=>n[c],enumerable:!(r=x(n,c))||r.enumerable});return e};var j=(e,n,s)=>(s=e!=null?p(u(e)):{},l(n||!e||!e.__esModule?i(s,\"default\",{value:e,enumerable:!0}):s,e)),y=e=>l(i({},\"__esModule\",{value:!0}),e);var o=_((M,a)=>{a.exports=_jsx_runtime});var z={};g(z,{default:()=>m,frontmatter:()=>w});var t=j(o()),w={title:\"\\u4F60\\u80FD\\u89E3\\u91CA\\u4E00\\u4E0B\\u7F16\\u5199\\u54CD\\u5E94\\u5F0F\\u7F51\\u7AD9\\u4E0E\\u4F7F\\u7528\\u79FB\\u52A8\\u4F18\\u5148\\u7B56\\u7565\\u7684\\u533A\\u522B\\u5417\\uFF1F\"};function d(e){let n={code:\"code\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:\"\\u8FD9\\u4E24\\u79CD\\u65B9\\u6CD5\\u5E76\\u975E\\u76F8\\u4E92\\u6392\\u65A5\\u3002\\u4F7F\\u7F51\\u7AD9\\u5177\\u6709\\u54CD\\u5E94\\u6027\\u610F\\u5473\\u7740\\u67D0\\u4E9B\\u5143\\u7D20\\u5C06\\u901A\\u8FC7\\u8C03\\u6574\\u5176\\u5927\\u5C0F\\u6216\\u5176\\u4ED6\\u529F\\u80FD\\u6765\\u54CD\\u5E94\\uFF0C\\u5177\\u4F53\\u53D6\\u51B3\\u4E8E\\u8BBE\\u5907\\u7684\\u5C4F\\u5E55\\u5C3A\\u5BF8\\uFF0C\\u901A\\u5E38\\u662F\\u89C6\\u53E3\\u5BBD\\u5EA6\\uFF0C\\u4F8B\\u5982\\u901A\\u8FC7 CSS \\u5A92\\u4F53\\u67E5\\u8BE2\\uFF0C\\u4F8B\\u5982\\uFF0C\\u5728\\u8F83\\u5C0F\\u7684\\u8BBE\\u5907\\u4E0A\\u51CF\\u5C0F\\u5B57\\u4F53\\u5927\\u5C0F\\u3002\"}),`\n`,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:\"language-css\",children:`@media (min-width: 768px) {\n  .my-class {\n    font-size: 24px;\n  }\n}\n\n@media (max-width: 767px) {\n  .my-class {\n    font-size: 12px;\n  }\n}\n`})}),`\n`,(0,t.jsx)(n.p,{children:\"\\u79FB\\u52A8\\u4F18\\u5148\\u7B56\\u7565\\u4E5F\\u5177\\u6709\\u54CD\\u5E94\\u6027\\uFF0C\\u4F46\\u662F\\u5B83\\u540C\\u610F\\u6211\\u4EEC\\u5E94\\u8BE5\\u4E3A\\u79FB\\u52A8\\u8BBE\\u5907\\u8BBE\\u7F6E\\u9ED8\\u8BA4\\u503C\\u5E76\\u5B9A\\u4E49\\u6240\\u6709\\u6837\\u5F0F\\uFF0C\\u5E76\\u4E14\\u7A0D\\u540E\\u4EC5\\u4E3A\\u5176\\u4ED6\\u8BBE\\u5907\\u6DFB\\u52A0\\u7279\\u5B9A\\u7684\\u54CD\\u5E94\\u5F0F\\u89C4\\u5219\\u3002 \\u9075\\u5FAA\\u524D\\u9762\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:\"language-css\",children:`.my-class {\n  font-size: 12px;\n}\n\n@media (min-width: 768px) {\n  .my-class {\n    font-size: 24px;\n  }\n}\n`})}),`\n`,(0,t.jsx)(n.p,{children:\"\\u79FB\\u52A8\\u4F18\\u5148\\u7B56\\u7565\\u5177\\u6709\\u4EE5\\u4E0B\\u4E3B\\u8981\\u4F18\\u70B9\\uFF1A\"}),`\n`,(0,t.jsxs)(n.ul,{children:[`\n`,(0,t.jsx)(n.li,{children:\"\\u5B83\\u5728\\u79FB\\u52A8\\u8BBE\\u5907\\u4E0A\\u5177\\u6709\\u66F4\\u9AD8\\u7684\\u6027\\u80FD\\uFF0C\\u56E0\\u4E3A\\u5E94\\u7528\\u4E8E\\u5B83\\u4EEC\\u7684\\u89C4\\u5219\\u4E0D\\u5FC5\\u9488\\u5BF9\\u4EFB\\u4F55\\u5A92\\u4F53\\u67E5\\u8BE2\\u8FDB\\u884C\\u9A8C\\u8BC1\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"\\u79FB\\u52A8\\u4F18\\u5148\\u8BBE\\u8BA1\\u66F4\\u6709\\u53EF\\u80FD\\u5728\\u66F4\\u5927\\u7684\\u8BBE\\u5907\\u4E0A\\u4F7F\\u7528\\uFF08\\u53EA\\u4F1A\\u663E\\u5F97\\u66F4\\u62C9\\u4F38\\uFF0C\\u4F46\\u4ECD\\u7136\\u53EF\\u7528\\uFF09\\u3002 \\u4F46\\u662F\\uFF0C\\u53CD\\u4E4B\\u5219\\u4E0D\\u7136\\u3002\"}),`\n`]})]})}function m(e={}){let{wrapper:n}=e.components||{};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}return y(z);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/can-you-give-an-example-of-an-media-property-other-than-screen/en-US.json b/apps/web/src/__generated__/questions/quiz/can-you-give-an-example-of-an-media-property-other-than-screen/en-US.json
index 764b5234a..3de8b7b40 100644
--- a/apps/web/src/__generated__/questions/quiz/can-you-give-an-example-of-an-media-property-other-than-screen/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/can-you-give-an-example-of-an-media-property-other-than-screen/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var c in e)i(n,c,{get:e[c],enumerable:!0})},l=(n,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of m(e))!f.call(n,t)&&t!==c&&i(n,t,{get:()=>e[t],enumerable:!(o=h(e,t))||o.enumerable});return n};var j=(n,e,c)=>(c=n!=null?p(u(n)):{},l(e||!n||!n.__esModule?i(c,\"default\",{value:n,enumerable:!0}):c,n)),y=n=>l(i({},\"__esModule\",{value:!0}),n);var s=x((D,d)=>{d.exports=_jsx_runtime});var M={};g(M,{default:()=>C,frontmatter:()=>_});var r=j(s()),_={title:\"Can you give an example of an `@media` property other than `screen`?\"};function a(n){let e=Object.assign({p:\"p\",code:\"code\",ul:\"ul\",li:\"li\",pre:\"pre\"},n.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.p,{children:[\"There are four types of \",(0,r.jsx)(e.code,{children:\"@media\"}),\" properties (including \",(0,r.jsx)(e.code,{children:\"screen\"}),\"):\"]}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"all\"}),\": for all media type devices\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"print\"}),\": for printers\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"speech\"}),': for screen readers that \"reads\" the page out loud']}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"screen\"}),\": for computer screens, tablets, smart-phones etc.\"]}),`\n`]}),`\n`,(0,r.jsxs)(e.p,{children:[\"Here is an example of \",(0,r.jsx)(e.code,{children:\"print\"}),\" media type's usage:\"]}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-css\",children:`@media print {\n  body {\n    color: black;\n  }\n}\n`})})]})}function b(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,Object.assign({},n,{children:(0,r.jsx)(a,n)})):a(n)}var C=b;return y(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),y=(n,e)=>{for(var c in e)o(n,c,{get:e[c],enumerable:!0})},l=(n,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of u(e))!x.call(n,t)&&t!==c&&o(n,t,{get:()=>e[t],enumerable:!(i=m(e,t))||i.enumerable});return n};var _=(n,e,c)=>(c=n!=null?h(f(n)):{},l(e||!n||!n.__esModule?o(c,\"default\",{value:n,enumerable:!0}):c,n)),j=n=>l(o({},\"__esModule\",{value:!0}),n);var a=g((v,d)=>{d.exports=_jsx_runtime});var C={};y(C,{default:()=>p,frontmatter:()=>b});var r=_(a()),b={title:\"Can you give an example of an `@media` property other than `screen`?\"};function s(n){let e={code:\"code\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.p,{children:[\"There are four types of \",(0,r.jsx)(e.code,{children:\"@media\"}),\" properties (including \",(0,r.jsx)(e.code,{children:\"screen\"}),\"):\"]}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"all\"}),\": for all media type devices\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"print\"}),\": for printers\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"speech\"}),': for screen readers that \"reads\" the page out loud']}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"screen\"}),\": for computer screens, tablets, smart-phones etc.\"]}),`\n`]}),`\n`,(0,r.jsxs)(e.p,{children:[\"Here is an example of \",(0,r.jsx)(e.code,{children:\"print\"}),\" media type's usage:\"]}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-css\",children:`@media print {\n  body {\n    color: black;\n  }\n}\n`})})]})}function p(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(s,{...n})}):s(n)}return j(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/can-you-give-an-example-of-an-media-property-other-than-screen/pt-BR.json b/apps/web/src/__generated__/questions/quiz/can-you-give-an-example-of-an-media-property-other-than-screen/pt-BR.json
index 911fa1aa1..161862b46 100644
--- a/apps/web/src/__generated__/questions/quiz/can-you-give-an-example-of-an-media-property-other-than-screen/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/can-you-give-an-example-of-an-media-property-other-than-screen/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var r in e)o(n,r,{get:e[r],enumerable:!0})},c=(n,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of h(e))!x.call(n,i)&&i!==r&&o(n,i,{get:()=>e[i],enumerable:!(t=m(e,i))||t.enumerable});return n};var _=(n,e,r)=>(r=n!=null?p(u(n)):{},c(e||!n||!n.__esModule?o(r,\"default\",{value:n,enumerable:!0}):r,n)),f=n=>c(o({},\"__esModule\",{value:!0}),n);var l=g((C,a)=>{a.exports=_jsx_runtime});var v={};j(v,{default:()=>M,frontmatter:()=>b});var d=_(l()),b={title:\"Voc\\xEA pode dar um exemplo de uma propriedade `@media` diferente de `tela`?\"};function s(n){let e=Object.assign({p:\"p\",code:\"code\",ul:\"ul\",li:\"li\",pre:\"pre\"},n.components);return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)(e.p,{children:[\"Existem quatro tipos de propriedades \",(0,d.jsx)(e.code,{children:\"@media\"}),\" (incluindo \",(0,d.jsx)(e.code,{children:\"screen\"}),\"):\"]}),`\n`,(0,d.jsxs)(e.ul,{children:[`\n`,(0,d.jsxs)(e.li,{children:[(0,d.jsx)(e.code,{children:\"all\"}),\": para todos os dispositivos de tipo de m\\xEDdia\"]}),`\n`,(0,d.jsxs)(e.li,{children:[(0,d.jsx)(e.code,{children:\"print\"}),\": para impressoras\"]}),`\n`,(0,d.jsxs)(e.li,{children:[(0,d.jsx)(e.code,{children:\"speech\"}),': para leitores de tela que \"l\\xEAem\" a p\\xE1gina em voz alta']}),`\n`,(0,d.jsxs)(e.li,{children:[(0,d.jsx)(e.code,{children:\"screen\"}),\": para telas de computadores, tablets, smartphones, etc.\"]}),`\n`]}),`\n`,(0,d.jsxs)(e.p,{children:[\"Aqui est\\xE1 um exemplo de uso do tipo de m\\xEDdia \",(0,d.jsx)(e.code,{children:\"print\"}),\":\"]}),`\n`,(0,d.jsx)(e.pre,{children:(0,d.jsx)(e.code,{className:\"language-css\",children:`@media print {\n  body {\n    color: black;\n  }\n}\n`})})]})}function q(n={}){let{wrapper:e}=n.components||{};return e?(0,d.jsx)(e,Object.assign({},n,{children:(0,d.jsx)(s,n)})):s(n)}var M=q;return f(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var r in e)i(n,r,{get:e[r],enumerable:!0})},c=(n,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!_.call(n,o)&&o!==r&&i(n,o,{get:()=>e[o],enumerable:!(t=h(e,o))||t.enumerable});return n};var j=(n,e,r)=>(r=n!=null?m(x(n)):{},c(e||!n||!n.__esModule?i(r,\"default\",{value:n,enumerable:!0}):r,n)),b=n=>c(i({},\"__esModule\",{value:!0}),n);var l=f((y,a)=>{a.exports=_jsx_runtime});var M={};g(M,{default:()=>p,frontmatter:()=>q});var d=j(l()),q={title:\"Voc\\xEA pode dar um exemplo de uma propriedade `@media` diferente de `tela`?\"};function s(n){let e={code:\"code\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)(e.p,{children:[\"Existem quatro tipos de propriedades \",(0,d.jsx)(e.code,{children:\"@media\"}),\" (incluindo \",(0,d.jsx)(e.code,{children:\"screen\"}),\"):\"]}),`\n`,(0,d.jsxs)(e.ul,{children:[`\n`,(0,d.jsxs)(e.li,{children:[(0,d.jsx)(e.code,{children:\"all\"}),\": para todos os dispositivos de tipo de m\\xEDdia\"]}),`\n`,(0,d.jsxs)(e.li,{children:[(0,d.jsx)(e.code,{children:\"print\"}),\": para impressoras\"]}),`\n`,(0,d.jsxs)(e.li,{children:[(0,d.jsx)(e.code,{children:\"speech\"}),': para leitores de tela que \"l\\xEAem\" a p\\xE1gina em voz alta']}),`\n`,(0,d.jsxs)(e.li,{children:[(0,d.jsx)(e.code,{children:\"screen\"}),\": para telas de computadores, tablets, smartphones, etc.\"]}),`\n`]}),`\n`,(0,d.jsxs)(e.p,{children:[\"Aqui est\\xE1 um exemplo de uso do tipo de m\\xEDdia \",(0,d.jsx)(e.code,{children:\"print\"}),\":\"]}),`\n`,(0,d.jsx)(e.pre,{children:(0,d.jsx)(e.code,{className:\"language-css\",children:`@media print {\n  body {\n    color: black;\n  }\n}\n`})})]})}function p(n={}){let{wrapper:e}=n.components||{};return e?(0,d.jsx)(e,{...n,children:(0,d.jsx)(s,{...n})}):s(n)}return b(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/can-you-give-an-example-of-an-media-property-other-than-screen/zh-CN.json b/apps/web/src/__generated__/questions/quiz/can-you-give-an-example-of-an-media-property-other-than-screen/zh-CN.json
index ea68a63ac..2e2a95004 100644
--- a/apps/web/src/__generated__/questions/quiz/can-you-give-an-example-of-an-media-property-other-than-screen/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/can-you-give-an-example-of-an-media-property-other-than-screen/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var j=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),_=(n,e)=>{for(var r in e)l(n,r,{get:e[r],enumerable:!0})},t=(n,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!x.call(n,i)&&i!==r&&l(n,i,{get:()=>e[i],enumerable:!(d=p(e,i))||d.enumerable});return n};var g=(n,e,r)=>(r=n!=null?h(u(n)):{},t(e||!n||!n.__esModule?l(r,\"default\",{value:n,enumerable:!0}):r,n)),f=n=>t(l({},\"__esModule\",{value:!0}),n);var s=j((F,o)=>{o.exports=_jsx_runtime});var C={};_(C,{default:()=>y,frontmatter:()=>b});var c=g(s()),b={title:\"\\u4F60\\u80FD\\u4E3E\\u4E00\\u4E2A\\u9664\\u4E86`screen`\\u4E4B\\u5916\\u7684`@media`\\u5C5E\\u6027\\u7684\\u4F8B\\u5B50\\u5417\\uFF1F\"};function a(n){let e=Object.assign({p:\"p\",code:\"code\",ul:\"ul\",li:\"li\",pre:\"pre\"},n.components);return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(e.p,{children:[\"\\u6709\\u56DB\\u79CD\\u7C7B\\u578B\\u7684\",(0,c.jsx)(e.code,{children:\"@media\"}),\"\\u5C5E\\u6027\\uFF08\\u5305\\u62EC\",(0,c.jsx)(e.code,{children:\"screen\"}),\"\\uFF09\\uFF1A\"]}),`\n`,(0,c.jsxs)(e.ul,{children:[`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"all\"}),\"\\uFF1A\\u9002\\u7528\\u4E8E\\u6240\\u6709\\u5A92\\u4F53\\u7C7B\\u578B\\u8BBE\\u5907\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"print\"}),\"\\uFF1A\\u9002\\u7528\\u4E8E\\u6253\\u5370\\u673A\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"speech\"}),\"\\uFF1A\\u9002\\u7528\\u4E8E\\u201C\\u6717\\u8BFB\\u201D\\u9875\\u9762\\u7684\\u5C4F\\u5E55\\u9605\\u8BFB\\u5668\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"screen\"}),\"\\uFF1A\\u9002\\u7528\\u4E8E\\u7535\\u8111\\u5C4F\\u5E55\\u3001\\u5E73\\u677F\\u7535\\u8111\\u3001\\u667A\\u80FD\\u624B\\u673A\\u7B49\\u3002\"]}),`\n`]}),`\n`,(0,c.jsxs)(e.p,{children:[\"\\u4EE5\\u4E0B\\u662F\",(0,c.jsx)(e.code,{children:\"print\"}),\"\\u5A92\\u4F53\\u7C7B\\u578B\\u7528\\u6CD5\\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,c.jsx)(e.pre,{children:(0,c.jsx)(e.code,{className:\"language-css\",children:`@media print {\n  body {\n    color: black;\n  }\n}\n`})})]})}function M(n={}){let{wrapper:e}=n.components||{};return e?(0,c.jsx)(e,Object.assign({},n,{children:(0,c.jsx)(a,n)})):a(n)}var y=M;return f(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var r in e)l(n,r,{get:e[r],enumerable:!0})},t=(n,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!_.call(n,i)&&i!==r&&l(n,i,{get:()=>e[i],enumerable:!(d=m(e,i))||d.enumerable});return n};var g=(n,e,r)=>(r=n!=null?p(x(n)):{},t(e||!n||!n.__esModule?l(r,\"default\",{value:n,enumerable:!0}):r,n)),M=n=>t(l({},\"__esModule\",{value:!0}),n);var s=f((D,o)=>{o.exports=_jsx_runtime});var y={};j(y,{default:()=>h,frontmatter:()=>b});var c=g(s()),b={title:\"\\u4F60\\u80FD\\u4E3E\\u4E00\\u4E2A\\u9664\\u4E86`screen`\\u4E4B\\u5916\\u7684`@media`\\u5C5E\\u6027\\u7684\\u4F8B\\u5B50\\u5417\\uFF1F\"};function a(n){let e={code:\"code\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(e.p,{children:[\"\\u6709\\u56DB\\u79CD\\u7C7B\\u578B\\u7684\",(0,c.jsx)(e.code,{children:\"@media\"}),\"\\u5C5E\\u6027\\uFF08\\u5305\\u62EC\",(0,c.jsx)(e.code,{children:\"screen\"}),\"\\uFF09\\uFF1A\"]}),`\n`,(0,c.jsxs)(e.ul,{children:[`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"all\"}),\"\\uFF1A\\u9002\\u7528\\u4E8E\\u6240\\u6709\\u5A92\\u4F53\\u7C7B\\u578B\\u8BBE\\u5907\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"print\"}),\"\\uFF1A\\u9002\\u7528\\u4E8E\\u6253\\u5370\\u673A\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"speech\"}),\"\\uFF1A\\u9002\\u7528\\u4E8E\\u201C\\u6717\\u8BFB\\u201D\\u9875\\u9762\\u7684\\u5C4F\\u5E55\\u9605\\u8BFB\\u5668\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"screen\"}),\"\\uFF1A\\u9002\\u7528\\u4E8E\\u7535\\u8111\\u5C4F\\u5E55\\u3001\\u5E73\\u677F\\u7535\\u8111\\u3001\\u667A\\u80FD\\u624B\\u673A\\u7B49\\u3002\"]}),`\n`]}),`\n`,(0,c.jsxs)(e.p,{children:[\"\\u4EE5\\u4E0B\\u662F\",(0,c.jsx)(e.code,{children:\"print\"}),\"\\u5A92\\u4F53\\u7C7B\\u578B\\u7528\\u6CD5\\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,c.jsx)(e.pre,{children:(0,c.jsx)(e.code,{className:\"language-css\",children:`@media print {\n  body {\n    color: black;\n  }\n}\n`})})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,c.jsx)(e,{...n,children:(0,c.jsx)(a,{...n})}):a(n)}return M(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.json b/apps/web/src/__generated__/questions/quiz/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.json
index 2ca43f606..5c6226e30 100644
--- a/apps/web/src/__generated__/questions/quiz/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var b=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),g=(t,n)=>{for(var o in n)r(t,o,{get:n[o],enumerable:!0})},s=(t,n,o,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of f(n))!p.call(t,i)&&i!==o&&r(t,i,{get:()=>n[i],enumerable:!(c=u(n,i))||c.enumerable});return t};var w=(t,n,o)=>(o=t!=null?h(m(t)):{},s(n||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),v=t=>s(r({},\"__esModule\",{value:!0}),t);var d=b((T,a)=>{a.exports=_jsx_runtime});var A={};g(A,{default:()=>j,frontmatter:()=>x});var e=w(d()),x={title:\"Can you offer a use case for the new arrow => function syntax?\",subtitle:\"How does this new syntax differ from other functions?\"};function l(t){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Arrow functions provide a concise syntax for writing functions in JavaScript. They are particularly useful for maintaining the \",(0,e.jsx)(n.code,{children:\"this\"}),\" context within methods and callbacks. For example, in an event handler or array method like \",(0,e.jsx)(n.code,{children:\"map\"}),\", arrow functions can simplify the code and avoid issues with \",(0,e.jsx)(n.code,{children:\"this\"}),\" binding.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const numbers = [1, 2, 3];\nconst doubled = numbers.map((n) => n * 2);\nconsole.log(doubled); // [2, 4, 6]\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Use case for the new arrow => function syntax\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Simplifying syntax\"}),`\n`,(0,e.jsx)(n.p,{children:\"Arrow functions provide a more concise way to write functions. This is especially useful for short functions or callbacks.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Traditional function\nconst add = function (a, b) {\n  return a + b;\n};\n\n// Arrow function\nconst anotherAdd = (a, b) => a + b;\n\nconsole.log(add(2, 3)); // Output: 5\nconsole.log(anotherAdd(2, 3)); // Output: 5\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"Lexical \",(0,e.jsx)(n.code,{children:\"this\"}),\" binding\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"Arrow functions do not have their own \",(0,e.jsx)(n.code,{children:\"this\"}),\" context. Instead, they inherit \",(0,e.jsx)(n.code,{children:\"this\"}),\" from the surrounding scope. This is particularly useful in methods and callbacks where the \",(0,e.jsx)(n.code,{children:\"this\"}),\" context can be tricky.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Timer() {\n  this.seconds = 0;\n  this.increment = () => {\n    this.seconds++; // 'this.seconds' is inherited from the outer scope\n    console.log(this.seconds);\n  };\n}\n\nconst timer = new Timer();\ntimer.increment(); // 1\ntimer.increment(); // 2\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In the example above, using a traditional function inside \",(0,e.jsx)(n.code,{children:\"setInterval\"}),\" would require additional steps to maintain the correct \",(0,e.jsx)(n.code,{children:\"this\"}),\" context.\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Using arrow functions in array methods\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Arrow functions are often used in array methods like \",(0,e.jsx)(n.code,{children:\"map\"}),\", \",(0,e.jsx)(n.code,{children:\"filter\"}),\", and \",(0,e.jsx)(n.code,{children:\"reduce\"}),\" for cleaner and more readable code.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const numbers = [1, 2, 3, 4, 5];\n\n// Traditional function\nconst doubledTraditional = numbers.map(function (n) {\n  return n * 2;\n});\n\n// Arrow function\nconst doubled = numbers.map((n) => n * 2);\n\nconsole.log(doubled); // [2, 4, 6, 8, 10]\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Event handlers\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Arrow functions can be used in event handlers to maintain the \",(0,e.jsx)(n.code,{children:\"this\"}),\" context of the class or object.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Button {\n  constructor() {\n    this.count = 0;\n    this.button = document.createElement('button');\n    this.button.innerText = 'Click me';\n    this.button.addEventListener('click', () => {\n      this.count++;\n      console.log('count:', this.count);\n    });\n    document.body.appendChild(this.button);\n  }\n}\n\nconst myButton = new Button();\nmyButton.button.click(); // count: 1\nmyButton.button.click(); // count: 2\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions\",children:\"MDN Web Docs: Arrow functions\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/arrow-functions\",children:\"JavaScript.info: Arrow functions revisited\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/03_functions.html\",children:\"Eloquent JavaScript: Functions\"})}),`\n`]})]})}function y(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(l,t)})):l(t)}var j=y;return v(A);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var w=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),g=(t,n)=>{for(var o in n)r(t,o,{get:n[o],enumerable:!0})},s=(t,n,o,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of m(n))!b.call(t,i)&&i!==o&&r(t,i,{get:()=>n[i],enumerable:!(c=f(n,i))||c.enumerable});return t};var v=(t,n,o)=>(o=t!=null?u(p(t)):{},s(n||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),x=t=>s(r({},\"__esModule\",{value:!0}),t);var d=w((k,a)=>{a.exports=_jsx_runtime});var j={};g(j,{default:()=>h,frontmatter:()=>y});var e=v(d()),y={title:\"Can you offer a use case for the new arrow => function syntax?\",subtitle:\"How does this new syntax differ from other functions?\"};function l(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Arrow functions provide a concise syntax for writing functions in JavaScript. They are particularly useful for maintaining the \",(0,e.jsx)(n.code,{children:\"this\"}),\" context within methods and callbacks. For example, in an event handler or array method like \",(0,e.jsx)(n.code,{children:\"map\"}),\", arrow functions can simplify the code and avoid issues with \",(0,e.jsx)(n.code,{children:\"this\"}),\" binding.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const numbers = [1, 2, 3];\nconst doubled = numbers.map((n) => n * 2);\nconsole.log(doubled); // [2, 4, 6]\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Use case for the new arrow => function syntax\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Simplifying syntax\"}),`\n`,(0,e.jsx)(n.p,{children:\"Arrow functions provide a more concise way to write functions. This is especially useful for short functions or callbacks.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Traditional function\nconst add = function (a, b) {\n  return a + b;\n};\n\n// Arrow function\nconst anotherAdd = (a, b) => a + b;\n\nconsole.log(add(2, 3)); // Output: 5\nconsole.log(anotherAdd(2, 3)); // Output: 5\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"Lexical \",(0,e.jsx)(n.code,{children:\"this\"}),\" binding\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"Arrow functions do not have their own \",(0,e.jsx)(n.code,{children:\"this\"}),\" context. Instead, they inherit \",(0,e.jsx)(n.code,{children:\"this\"}),\" from the surrounding scope. This is particularly useful in methods and callbacks where the \",(0,e.jsx)(n.code,{children:\"this\"}),\" context can be tricky.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Timer() {\n  this.seconds = 0;\n  this.increment = () => {\n    this.seconds++; // 'this.seconds' is inherited from the outer scope\n    console.log(this.seconds);\n  };\n}\n\nconst timer = new Timer();\ntimer.increment(); // 1\ntimer.increment(); // 2\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In the example above, using a traditional function inside \",(0,e.jsx)(n.code,{children:\"setInterval\"}),\" would require additional steps to maintain the correct \",(0,e.jsx)(n.code,{children:\"this\"}),\" context.\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Using arrow functions in array methods\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Arrow functions are often used in array methods like \",(0,e.jsx)(n.code,{children:\"map\"}),\", \",(0,e.jsx)(n.code,{children:\"filter\"}),\", and \",(0,e.jsx)(n.code,{children:\"reduce\"}),\" for cleaner and more readable code.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const numbers = [1, 2, 3, 4, 5];\n\n// Traditional function\nconst doubledTraditional = numbers.map(function (n) {\n  return n * 2;\n});\n\n// Arrow function\nconst doubled = numbers.map((n) => n * 2);\n\nconsole.log(doubled); // [2, 4, 6, 8, 10]\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Event handlers\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Arrow functions can be used in event handlers to maintain the \",(0,e.jsx)(n.code,{children:\"this\"}),\" context of the class or object.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Button {\n  constructor() {\n    this.count = 0;\n    this.button = document.createElement('button');\n    this.button.innerText = 'Click me';\n    this.button.addEventListener('click', () => {\n      this.count++;\n      console.log('count:', this.count);\n    });\n    document.body.appendChild(this.button);\n  }\n}\n\nconst myButton = new Button();\nmyButton.button.click(); // count: 1\nmyButton.button.click(); // count: 2\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions\",children:\"MDN Web Docs: Arrow functions\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/arrow-functions\",children:\"JavaScript.info: Arrow functions revisited\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/03_functions.html\",children:\"Eloquent JavaScript: Functions\"})}),`\n`]})]})}function h(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(l,{...t})}):l(t)}return x(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/pt-BR.json b/apps/web/src/__generated__/questions/quiz/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/pt-BR.json
index 8af407f8e..055906a21 100644
--- a/apps/web/src/__generated__/questions/quiz/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),v=(o,e)=>{for(var s in e)r(o,s,{get:e[s],enumerable:!0})},i=(o,e,s,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of h(e))!f.call(o,a)&&a!==s&&r(o,a,{get:()=>e[a],enumerable:!(d=m(e,a))||d.enumerable});return o};var b=(o,e,s)=>(s=o!=null?u(p(o)):{},i(e||!o||!o.__esModule?r(s,\"default\",{value:o,enumerable:!0}):s,o)),x=o=>i(r({},\"__esModule\",{value:!0}),o);var t=g((_,c)=>{c.exports=_jsx_runtime});var C={};v(C,{default:()=>S,frontmatter:()=>j});var n=b(t()),j={title:\"Voc\\xEA pode oferecer um caso de uso para a nova sintaxe de arrow function =>?\",subtitle:\"Como essa nova sintaxe difere de outras fun\\xE7\\xF5es?\"};function l(o){let e=Object.assign({p:\"p\",code:\"code\",h2:\"h2\",h3:\"h3\",pre:\"pre\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"A sintaxe de fun\\xE7\\xE3o \",(0,n.jsx)(e.code,{children:\"=>\"}),', tamb\\xE9m conhecida como \"fun\\xE7\\xF5es de seta\", \\xE9 um recurso introduzido no ECMAScript 6 (ES6) para o JavaScript. Ela fornece uma maneira mais concisa de escrever fun\\xE7\\xF5es e tamb\\xE9m apresenta algumas diferen\\xE7as em rela\\xE7\\xE3o ao comportamento do ',(0,n.jsx)(e.code,{children:\"this\"}),\" em compara\\xE7\\xE3o com express\\xF5es de fun\\xE7\\xE3o tradicionais. Aqui est\\xE1 um caso de uso simples para ilustrar sua utilidade:\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Caso de Uso: filtrando um array\"}),`\n`,(0,n.jsx)(e.p,{children:\"Imagine que voc\\xEA tenha um array de n\\xFAmeros e queira filtrar todos os n\\xFAmeros menores que 10. Usando a sintaxe de fun\\xE7\\xE3o tradicional e a nova sintaxe de fun\\xE7\\xE3o de seta, voc\\xEA pode realizar isso das seguintes maneiras:\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Sintaxe de fun\\xE7\\xE3o tradicional\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const numbers = [1, 5, 10, 15, 20];\nconst numbersFiltrados = numbers.filter(function (number) {\n  return number >= 10;\n});\n\nconsole.log(numbersFiltrados); // Sa\\xEDda: [10, 15, 20]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Sintaxe de fun\\xE7\\xE3o de seta\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const numbers = [1, 5, 10, 15, 20];\nconst numbersFiltrados = numbers.filter((number) => number >= 10);\n\nconsole.log(numbersFiltrados); // Sa\\xEDda: [10, 15, 20]\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Vantagens das fun\\xE7\\xF5es de seta\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Concis\\xE3o\"}),\": As fun\\xE7\\xF5es de seta s\\xE3o mais concisas, tornando seu c\\xF3digo mais curto e mais f\\xE1cil de ler.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"Comportamento do \",(0,n.jsx)(e.code,{children:\"this\"})]}),\": As fun\\xE7\\xF5es de seta n\\xE3o possuem seu pr\\xF3prio \",(0,n.jsx)(e.code,{children:\"this\"}),\". Em vez disso, elas herdam o \",(0,n.jsx)(e.code,{children:\"this\"}),\" do escopo pai no momento em que s\\xE3o definidas. Isso \\xE9 particularmente \\xFAtil em cen\\xE1rios em que voc\\xEA est\\xE1 lidando com callbacks e deseja manter o contexto do \",(0,n.jsx)(e.code,{children:\"this\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Retorno Impl\\xEDcito\"}),\": Se o corpo da fun\\xE7\\xE3o consistir em uma \\xFAnica express\\xE3o, as fun\\xE7\\xF5es de seta permitem omitir a palavra-chave \",(0,n.jsx)(e.code,{children:\"return\"}),\" e as chaves.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Quando usar fun\\xE7\\xF5es de seta\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Quando voc\\xEA precisa de uma fun\\xE7\\xE3o r\\xE1pida de uma \\xFAnica linha.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Em fun\\xE7\\xF5es de retorno de chamada (callbacks) onde voc\\xEA deseja preservar o escopo l\\xE9xico do \",(0,n.jsx)(e.code,{children:\"this\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Ao trabalhar com fun\\xE7\\xF5es de ordem superior como \",(0,n.jsx)(e.code,{children:\"map\"}),\", \",(0,n.jsx)(e.code,{children:\"filter\"}),\", \",(0,n.jsx)(e.code,{children:\"reduce\"}),\", etc.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Quando n\\xE3o usar fun\\xE7\\xF5es de seta\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"M\\xE9todos em objetos\"}),\": As fun\\xE7\\xF5es de seta n\\xE3o t\\xEAm seu pr\\xF3prio contexto \",(0,n.jsx)(e.code,{children:\"this\"}),\", o que pode levar a comportamentos inesperados em m\\xE9todos de objetos.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Como construtores\"}),\": As fun\\xE7\\xF5es de seta n\\xE3o podem ser usadas como construtores e gerar\\xE3o um erro se usadas com a palavra-chave \",(0,n.jsx)(e.code,{children:\"new\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Quando voc\\xEA precisa de hoisting de fun\\xE7\\xE3o\"}),\": As fun\\xE7\\xF5es de seta n\\xE3o s\\xE3o i\\xE7adas (hoisted), ao contr\\xE1rio das declara\\xE7\\xF5es de fun\\xE7\\xE3o tradicionais.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"As fun\\xE7\\xF5es de seta s\\xE3o uma adi\\xE7\\xE3o poderosa ao JavaScript, simplificando a sintaxe das fun\\xE7\\xF5es e abordando algumas armadilhas comuns associadas \\xE0 palavra-chave \",(0,n.jsx)(e.code,{children:\"this\"}),\" em fun\\xE7\\xF5es tradicionais. Elas s\\xE3o especialmente \\xFAteis nos padr\\xF5es de desenvolvimento JavaScript modernos.\"]})]})}function A(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(l,o)})):l(o)}var S=A;return x(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var s in e)r(o,s,{get:e[s],enumerable:!0})},i=(o,e,s,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!v.call(o,a)&&a!==s&&r(o,a,{get:()=>e[a],enumerable:!(d=h(e,a))||d.enumerable});return o};var b=(o,e,s)=>(s=o!=null?m(f(o)):{},i(e||!o||!o.__esModule?r(s,\"default\",{value:o,enumerable:!0}):s,o)),j=o=>i(r({},\"__esModule\",{value:!0}),o);var t=g((q,c)=>{c.exports=_jsx_runtime});var S={};x(S,{default:()=>u,frontmatter:()=>A});var n=b(t()),A={title:\"Voc\\xEA pode oferecer um caso de uso para a nova sintaxe de arrow function =>?\",subtitle:\"Como essa nova sintaxe difere de outras fun\\xE7\\xF5es?\"};function l(o){let e={code:\"code\",h2:\"h2\",h3:\"h3\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"A sintaxe de fun\\xE7\\xE3o \",(0,n.jsx)(e.code,{children:\"=>\"}),', tamb\\xE9m conhecida como \"fun\\xE7\\xF5es de seta\", \\xE9 um recurso introduzido no ECMAScript 6 (ES6) para o JavaScript. Ela fornece uma maneira mais concisa de escrever fun\\xE7\\xF5es e tamb\\xE9m apresenta algumas diferen\\xE7as em rela\\xE7\\xE3o ao comportamento do ',(0,n.jsx)(e.code,{children:\"this\"}),\" em compara\\xE7\\xE3o com express\\xF5es de fun\\xE7\\xE3o tradicionais. Aqui est\\xE1 um caso de uso simples para ilustrar sua utilidade:\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Caso de Uso: filtrando um array\"}),`\n`,(0,n.jsx)(e.p,{children:\"Imagine que voc\\xEA tenha um array de n\\xFAmeros e queira filtrar todos os n\\xFAmeros menores que 10. Usando a sintaxe de fun\\xE7\\xE3o tradicional e a nova sintaxe de fun\\xE7\\xE3o de seta, voc\\xEA pode realizar isso das seguintes maneiras:\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Sintaxe de fun\\xE7\\xE3o tradicional\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const numbers = [1, 5, 10, 15, 20];\nconst numbersFiltrados = numbers.filter(function (number) {\n  return number >= 10;\n});\n\nconsole.log(numbersFiltrados); // Sa\\xEDda: [10, 15, 20]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Sintaxe de fun\\xE7\\xE3o de seta\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const numbers = [1, 5, 10, 15, 20];\nconst numbersFiltrados = numbers.filter((number) => number >= 10);\n\nconsole.log(numbersFiltrados); // Sa\\xEDda: [10, 15, 20]\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Vantagens das fun\\xE7\\xF5es de seta\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Concis\\xE3o\"}),\": As fun\\xE7\\xF5es de seta s\\xE3o mais concisas, tornando seu c\\xF3digo mais curto e mais f\\xE1cil de ler.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"Comportamento do \",(0,n.jsx)(e.code,{children:\"this\"})]}),\": As fun\\xE7\\xF5es de seta n\\xE3o possuem seu pr\\xF3prio \",(0,n.jsx)(e.code,{children:\"this\"}),\". Em vez disso, elas herdam o \",(0,n.jsx)(e.code,{children:\"this\"}),\" do escopo pai no momento em que s\\xE3o definidas. Isso \\xE9 particularmente \\xFAtil em cen\\xE1rios em que voc\\xEA est\\xE1 lidando com callbacks e deseja manter o contexto do \",(0,n.jsx)(e.code,{children:\"this\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Retorno Impl\\xEDcito\"}),\": Se o corpo da fun\\xE7\\xE3o consistir em uma \\xFAnica express\\xE3o, as fun\\xE7\\xF5es de seta permitem omitir a palavra-chave \",(0,n.jsx)(e.code,{children:\"return\"}),\" e as chaves.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Quando usar fun\\xE7\\xF5es de seta\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Quando voc\\xEA precisa de uma fun\\xE7\\xE3o r\\xE1pida de uma \\xFAnica linha.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Em fun\\xE7\\xF5es de retorno de chamada (callbacks) onde voc\\xEA deseja preservar o escopo l\\xE9xico do \",(0,n.jsx)(e.code,{children:\"this\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Ao trabalhar com fun\\xE7\\xF5es de ordem superior como \",(0,n.jsx)(e.code,{children:\"map\"}),\", \",(0,n.jsx)(e.code,{children:\"filter\"}),\", \",(0,n.jsx)(e.code,{children:\"reduce\"}),\", etc.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Quando n\\xE3o usar fun\\xE7\\xF5es de seta\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"M\\xE9todos em objetos\"}),\": As fun\\xE7\\xF5es de seta n\\xE3o t\\xEAm seu pr\\xF3prio contexto \",(0,n.jsx)(e.code,{children:\"this\"}),\", o que pode levar a comportamentos inesperados em m\\xE9todos de objetos.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Como construtores\"}),\": As fun\\xE7\\xF5es de seta n\\xE3o podem ser usadas como construtores e gerar\\xE3o um erro se usadas com a palavra-chave \",(0,n.jsx)(e.code,{children:\"new\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Quando voc\\xEA precisa de hoisting de fun\\xE7\\xE3o\"}),\": As fun\\xE7\\xF5es de seta n\\xE3o s\\xE3o i\\xE7adas (hoisted), ao contr\\xE1rio das declara\\xE7\\xF5es de fun\\xE7\\xE3o tradicionais.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"As fun\\xE7\\xF5es de seta s\\xE3o uma adi\\xE7\\xE3o poderosa ao JavaScript, simplificando a sintaxe das fun\\xE7\\xF5es e abordando algumas armadilhas comuns associadas \\xE0 palavra-chave \",(0,n.jsx)(e.code,{children:\"this\"}),\" em fun\\xE7\\xF5es tradicionais. Elas s\\xE3o especialmente \\xFAteis nos padr\\xF5es de desenvolvimento JavaScript modernos.\"]})]})}function u(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(l,{...o})}):l(o)}return j(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/zh-CN.json b/apps/web/src/__generated__/questions/quiz/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/zh-CN.json
index 75e3d3291..390609ed5 100644
--- a/apps/web/src/__generated__/questions/quiz/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),g=(t,n)=>{for(var c in n)o(t,c,{get:n[c],enumerable:!0})},l=(t,n,c,r)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of m(n))!b.call(t,i)&&i!==c&&o(t,i,{get:()=>n[i],enumerable:!(r=a(n,i))||r.enumerable});return t};var v=(t,n,c)=>(c=t!=null?u(p(t)):{},l(n||!t||!t.__esModule?o(c,\"default\",{value:t,enumerable:!0}):c,t)),j=t=>l(o({},\"__esModule\",{value:!0}),t);var s=f((N,d)=>{d.exports=_jsx_runtime});var A={};g(A,{default:()=>_,frontmatter:()=>x});var e=v(s()),x={title:\"\\u7BAD\\u5934 => \\u51FD\\u6570\\u8BED\\u6CD5\\u6709\\u4EC0\\u4E48\\u7528\\u4F8B\\uFF1F\",subtitle:\"\\u8FD9\\u79CD\\u65B0\\u8BED\\u6CD5\\u4E0E\\u5176\\u4ED6\\u51FD\\u6570\\u6709\\u4F55\\u4E0D\\u540C\\uFF1F\"};function h(t){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u4E3A\\u7528 JavaScript \\u7F16\\u5199\\u51FD\\u6570\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u7B80\\u6D01\\u7684\\u8BED\\u6CD5\\u3002\\u5B83\\u4EEC\\u5BF9\\u4E8E\\u5728\\u65B9\\u6CD5\\u548C\\u56DE\\u8C03\\u4E2D\\u7EF4\\u62A4 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u7279\\u522B\\u6709\\u7528\\u3002\\u4F8B\\u5982\\uFF0C\\u5728\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u6216\\u50CF \",(0,e.jsx)(n.code,{children:\"map\"}),\" \\u8FD9\\u6837\\u7684\\u6570\\u7EC4\\u65B9\\u6CD5\\u4E2D\\uFF0C\\u7BAD\\u5934\\u51FD\\u6570\\u53EF\\u4EE5\\u7B80\\u5316\\u4EE3\\u7801\\u5E76\\u907F\\u514D \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7ED1\\u5B9A\\u95EE\\u9898\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const numbers = [1, 2, 3];\nconst doubled = numbers.map((n) => n * 2);\nconsole.log(doubled); // [2, 4, 6]\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u65B0\\u7BAD\\u5934 => \\u51FD\\u6570\\u8BED\\u6CD5\\u7684\\u7528\\u4F8B\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7B80\\u5316\\u8BED\\u6CD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7BAD\\u5934\\u51FD\\u6570\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u7B80\\u6D01\\u7684\\u7F16\\u5199\\u51FD\\u6570\\u7684\\u65B9\\u5F0F\\u3002\\u8FD9\\u5BF9\\u4E8E\\u77ED\\u51FD\\u6570\\u6216\\u56DE\\u8C03\\u7279\\u522B\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Traditional function\nconst add = function (a, b) {\n  return a + b;\n};\n\n// Arrow function\nconst anotherAdd = (a, b) => a + b;\n\nconsole.log(add(2, 3)); // Output: 5\nconsole.log(anotherAdd(2, 3)); // Output: 5\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u8BCD\\u6CD5 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7ED1\\u5B9A\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u6CA1\\u6709\\u81EA\\u5DF1\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u3002\\u76F8\\u53CD\\uFF0C\\u5B83\\u4EEC\\u4ECE\\u5468\\u56F4\\u7684\\u8303\\u56F4\\u7EE7\\u627F \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\u3002\\u8FD9\\u5728 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u53EF\\u80FD\\u5F88\\u68D8\\u624B\\u7684\\u65B9\\u6CD5\\u548C\\u56DE\\u8C03\\u4E2D\\u7279\\u522B\\u6709\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Timer() {\n  this.seconds = 0;\n  this.increment = () => {\n    this.seconds++; // 'this.seconds' is inherited from the outer scope\n    console.log(this.seconds);\n  };\n}\n\nconst timer = new Timer();\ntimer.increment(); // 1\ntimer.increment(); // 2\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u4E0A\\u9762\\u7684\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u5728 \",(0,e.jsx)(n.code,{children:\"setInterval\"}),\" \\u4E2D\\u4F7F\\u7528\\u4F20\\u7EDF\\u51FD\\u6570\\u9700\\u8981\\u989D\\u5916\\u7684\\u6B65\\u9AA4\\u6765\\u7EF4\\u62A4\\u6B63\\u786E\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u6570\\u7EC4\\u65B9\\u6CD5\\u4E2D\\u4F7F\\u7528\\u7BAD\\u5934\\u51FD\\u6570\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u901A\\u5E38\\u7528\\u4E8E \",(0,e.jsx)(n.code,{children:\"map\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"filter\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"reduce\"}),\" \\u7B49\\u6570\\u7EC4\\u65B9\\u6CD5\\u4E2D\\uFF0C\\u4EE5\\u83B7\\u5F97\\u66F4\\u7B80\\u6D01\\u3001\\u66F4\\u6613\\u8BFB\\u7684\\u4EE3\\u7801\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const numbers = [1, 2, 3, 4, 5];\n\n// Traditional function\nconst doubledTraditional = numbers.map(function (n) {\n  return n * 2;\n});\n\n// Arrow function\nconst doubled = numbers.map((n) => n * 2);\n\nconsole.log(doubled); // [2, 4, 6, 8, 10]\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u53EF\\u7528\\u4E8E\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\uFF0C\\u4EE5\\u7EF4\\u62A4\\u7C7B\\u6216\\u5BF9\\u8C61\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Button {\n  constructor() {\n    this.count = 0;\n    this.button = document.createElement('button');\n    this.button.innerText = 'Click me';\n    this.button.addEventListener('click', () => {\n      this.count++;\n      console.log('count:', this.count);\n    });\n    document.body.appendChild(this.button);\n  }\n}\n\nconst myButton = new Button();\nmyButton.button.click(); // count: 1\nmyButton.button.click(); // count: 2\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions\",children:\"MDN Web Docs: Arrow functions\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/arrow-functions\",children:\"JavaScript.info: Arrow functions revisited\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/03_functions.html\",children:\"Eloquent JavaScript: Functions\"})}),`\n`]})]})}function w(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(h,t)})):h(t)}var _=w;return j(A);})();\n;return Component;"
+  "solution": "var Component=(()=>{var a=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),v=(t,n)=>{for(var c in n)r(t,c,{get:n[c],enumerable:!0})},l=(t,n,c,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of p(n))!f.call(t,o)&&o!==c&&r(t,o,{get:()=>n[o],enumerable:!(i=m(n,o))||i.enumerable});return t};var j=(t,n,c)=>(c=t!=null?a(b(t)):{},l(n||!t||!t.__esModule?r(c,\"default\",{value:t,enumerable:!0}):c,t)),x=t=>l(r({},\"__esModule\",{value:!0}),t);var s=g((T,d)=>{d.exports=_jsx_runtime});var _={};v(_,{default:()=>u,frontmatter:()=>w});var e=j(s()),w={title:\"\\u7BAD\\u5934 => \\u51FD\\u6570\\u8BED\\u6CD5\\u6709\\u4EC0\\u4E48\\u7528\\u4F8B\\uFF1F\",subtitle:\"\\u8FD9\\u79CD\\u65B0\\u8BED\\u6CD5\\u4E0E\\u5176\\u4ED6\\u51FD\\u6570\\u6709\\u4F55\\u4E0D\\u540C\\uFF1F\"};function h(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u4E3A\\u7528 JavaScript \\u7F16\\u5199\\u51FD\\u6570\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u7B80\\u6D01\\u7684\\u8BED\\u6CD5\\u3002\\u5B83\\u4EEC\\u5BF9\\u4E8E\\u5728\\u65B9\\u6CD5\\u548C\\u56DE\\u8C03\\u4E2D\\u7EF4\\u62A4 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u7279\\u522B\\u6709\\u7528\\u3002\\u4F8B\\u5982\\uFF0C\\u5728\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u6216\\u50CF \",(0,e.jsx)(n.code,{children:\"map\"}),\" \\u8FD9\\u6837\\u7684\\u6570\\u7EC4\\u65B9\\u6CD5\\u4E2D\\uFF0C\\u7BAD\\u5934\\u51FD\\u6570\\u53EF\\u4EE5\\u7B80\\u5316\\u4EE3\\u7801\\u5E76\\u907F\\u514D \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7ED1\\u5B9A\\u95EE\\u9898\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const numbers = [1, 2, 3];\nconst doubled = numbers.map((n) => n * 2);\nconsole.log(doubled); // [2, 4, 6]\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u65B0\\u7BAD\\u5934 => \\u51FD\\u6570\\u8BED\\u6CD5\\u7684\\u7528\\u4F8B\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7B80\\u5316\\u8BED\\u6CD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7BAD\\u5934\\u51FD\\u6570\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u7B80\\u6D01\\u7684\\u7F16\\u5199\\u51FD\\u6570\\u7684\\u65B9\\u5F0F\\u3002\\u8FD9\\u5BF9\\u4E8E\\u77ED\\u51FD\\u6570\\u6216\\u56DE\\u8C03\\u7279\\u522B\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Traditional function\nconst add = function (a, b) {\n  return a + b;\n};\n\n// Arrow function\nconst anotherAdd = (a, b) => a + b;\n\nconsole.log(add(2, 3)); // Output: 5\nconsole.log(anotherAdd(2, 3)); // Output: 5\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u8BCD\\u6CD5 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7ED1\\u5B9A\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u6CA1\\u6709\\u81EA\\u5DF1\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u3002\\u76F8\\u53CD\\uFF0C\\u5B83\\u4EEC\\u4ECE\\u5468\\u56F4\\u7684\\u8303\\u56F4\\u7EE7\\u627F \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\u3002\\u8FD9\\u5728 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u53EF\\u80FD\\u5F88\\u68D8\\u624B\\u7684\\u65B9\\u6CD5\\u548C\\u56DE\\u8C03\\u4E2D\\u7279\\u522B\\u6709\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Timer() {\n  this.seconds = 0;\n  this.increment = () => {\n    this.seconds++; // 'this.seconds' is inherited from the outer scope\n    console.log(this.seconds);\n  };\n}\n\nconst timer = new Timer();\ntimer.increment(); // 1\ntimer.increment(); // 2\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u4E0A\\u9762\\u7684\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u5728 \",(0,e.jsx)(n.code,{children:\"setInterval\"}),\" \\u4E2D\\u4F7F\\u7528\\u4F20\\u7EDF\\u51FD\\u6570\\u9700\\u8981\\u989D\\u5916\\u7684\\u6B65\\u9AA4\\u6765\\u7EF4\\u62A4\\u6B63\\u786E\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u6570\\u7EC4\\u65B9\\u6CD5\\u4E2D\\u4F7F\\u7528\\u7BAD\\u5934\\u51FD\\u6570\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u901A\\u5E38\\u7528\\u4E8E \",(0,e.jsx)(n.code,{children:\"map\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"filter\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"reduce\"}),\" \\u7B49\\u6570\\u7EC4\\u65B9\\u6CD5\\u4E2D\\uFF0C\\u4EE5\\u83B7\\u5F97\\u66F4\\u7B80\\u6D01\\u3001\\u66F4\\u6613\\u8BFB\\u7684\\u4EE3\\u7801\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const numbers = [1, 2, 3, 4, 5];\n\n// Traditional function\nconst doubledTraditional = numbers.map(function (n) {\n  return n * 2;\n});\n\n// Arrow function\nconst doubled = numbers.map((n) => n * 2);\n\nconsole.log(doubled); // [2, 4, 6, 8, 10]\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u53EF\\u7528\\u4E8E\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\uFF0C\\u4EE5\\u7EF4\\u62A4\\u7C7B\\u6216\\u5BF9\\u8C61\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Button {\n  constructor() {\n    this.count = 0;\n    this.button = document.createElement('button');\n    this.button.innerText = 'Click me';\n    this.button.addEventListener('click', () => {\n      this.count++;\n      console.log('count:', this.count);\n    });\n    document.body.appendChild(this.button);\n  }\n}\n\nconst myButton = new Button();\nmyButton.button.click(); // count: 1\nmyButton.button.click(); // count: 2\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions\",children:\"MDN Web Docs: Arrow functions\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/arrow-functions\",children:\"JavaScript.info: Arrow functions revisited\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/03_functions.html\",children:\"Eloquent JavaScript: Functions\"})}),`\n`]})]})}function u(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(h,{...t})}):h(t)}return x(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/css-link-between-head-and-js-script-just-before-body/en-US.json b/apps/web/src/__generated__/questions/quiz/css-link-between-head-and-js-script-just-before-body/en-US.json
index bfd361fb4..ae13a9e87 100644
--- a/apps/web/src/__generated__/questions/quiz/css-link-between-head-and-js-script-just-before-body/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/css-link-between-head-and-js-script-just-before-body/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),w=(n,e)=>{for(var i in e)r(n,i,{get:e[i],enumerable:!0})},s=(n,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!m.call(n,o)&&o!==i&&r(n,o,{get:()=>e[o],enumerable:!(a=p(e,o))||a.enumerable});return n};var b=(n,e,i)=>(i=n!=null?l(g(n)):{},s(e||!n||!n.__esModule?r(i,\"default\",{value:n,enumerable:!0}):i,n)),y=n=>s(r({},\"__esModule\",{value:!0}),n);var c=f((j,d)=>{d.exports=_jsx_runtime});var M={};w(M,{default:()=>v,frontmatter:()=>k});var t=b(c()),k={title:\"Why is it generally a good idea to position CSS `<link>`s between `<head></head>` and JS `<script>`s just before `</body>`?\",subtitle:\"Do you know any exceptions?\"};function h(n){let e=Object.assign({p:\"p\",code:\"code\",h2:\"h2\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[\"In a nutshell, such a placement of CSS \",(0,t.jsx)(e.code,{children:\"<link>\"}),\"s and JavaScript \",(0,t.jsx)(e.code,{children:\"<script>\"}),\"s allows for faster rendering of the page and better overall performance.\"]}),`\n`,(0,t.jsxs)(e.h2,{children:[\"Placing \",(0,t.jsx)(e.code,{children:\"<link>\"}),\"s in \",(0,t.jsx)(e.code,{children:\"<head>\"})]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Putting \",(0,t.jsx)(e.code,{children:\"<link>\"}),\"s in \",(0,t.jsx)(e.code,{children:\"<head>\"}),' is part of the proper specification in building an optimized website. When a page first loads, HTML and CSS are being parsed simultaneously; HTML creates the DOM (Document Object Model) and CSS creates the CSSOM (CSS Object Model). Both are needed to create the visuals in a website, allowing for a quick \"first meaningful paint\" timing. Placing CSS ',(0,t.jsx)(e.code,{children:\"<link>\"}),\"s in the \",(0,t.jsx)(e.code,{children:\"<head>\"}),\" ensures that the stylesheets are loaded and ready for use when the browser starts rendering the page.\"]}),`\n`,(0,t.jsx)(e.p,{children:\"This progressive rendering is a metric that sites are measured on in their performance scores. Putting stylesheets near the bottom of the document is what prohibits progressive rendering in many browsers. Some browsers block rendering to avoid having to repaint elements of the page if their styles change. The user is then stuck viewing a blank white page. Other times there can be flashes of unstyled content (FOUC), which show a webpage with no styling applied.\"}),`\n`,(0,t.jsxs)(e.h2,{children:[\"Placing \",(0,t.jsx)(e.code,{children:\"<script>\"}),\"s just before \",(0,t.jsx)(e.code,{children:\"</body>\"})]}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"<script>\"}),\" tags block HTML parsing while they are being downloaded and executed which can slow down the display of your page. Placing the \",(0,t.jsx)(e.code,{children:\"<script>\"}),\"s at the bottom will allow the HTML to be parsed and displayed to the user first.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"An exception for positioning of \",(0,t.jsx)(e.code,{children:\"<script>\"}),\"s at the bottom is when your script contains \",(0,t.jsx)(e.code,{children:\"document.write()\"}),\", but these days it's not a good practice to use \",(0,t.jsx)(e.code,{children:\"document.write()\"}),\". Also, placing \",(0,t.jsx)(e.code,{children:\"<script>\"}),\"s at the bottom means that the browser cannot start downloading the scripts until the entire document is parsed. This ensures your code that needs to manipulate DOM elements will not throw an error and halt the entire script. If you need to put \",(0,t.jsx)(e.code,{children:\"<script>\"}),\"s in the \",(0,t.jsx)(e.code,{children:\"<head>\"}),\", use the \",(0,t.jsx)(e.code,{children:\"defer\"}),\" attribute, which will achieve the same effect of running the script only after the HTML is parsed but the browser can kick off the network request earlier to download the script.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Keep in mind that putting scripts just before the closing \",(0,t.jsx)(e.code,{children:\"</body>\"}),\" tag will create the illusion that the page loads faster on an empty cache (since the scripts won't block downloading the rest of the document). However, if you have some code you want to run during page load, it will only start executing after the entire page has loaded. If you put those scripts in the \",(0,t.jsx)(e.code,{children:\"<head>\"}),\" tag, they would start executing before - so on a primed cache the page would actually appear to load faster.\"]}),`\n`,(0,t.jsxs)(e.h2,{children:[(0,t.jsx)(e.code,{children:\"<head>\"}),\" and \",(0,t.jsx)(e.code,{children:\"<body>\"}),\" tags are now optional\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"As per the HTML5 specification, certain HTML tags like \",(0,t.jsx)(e.code,{children:\"<head>\"}),\" and \",(0,t.jsx)(e.code,{children:\"<body>\"}),\" are optional. Google's style guide even recommends removing them to save bytes. However, this practice is still not widely adopted and the performance gain is likely to be minimal and for most sites it's not likely going to matter.\"]})]})}function S(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var v=S;return y(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var i in e)r(n,i,{get:e[i],enumerable:!0})},s=(n,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of g(e))!f.call(n,o)&&o!==i&&r(n,o,{get:()=>e[o],enumerable:!(a=u(e,o))||a.enumerable});return n};var y=(n,e,i)=>(i=n!=null?p(m(n)):{},s(e||!n||!n.__esModule?r(i,\"default\",{value:n,enumerable:!0}):i,n)),k=n=>s(r({},\"__esModule\",{value:!0}),n);var c=w((x,d)=>{d.exports=_jsx_runtime});var v={};b(v,{default:()=>l,frontmatter:()=>S});var t=y(c()),S={title:\"Why is it generally a good idea to position CSS `<link>`s between `<head></head>` and JS `<script>`s just before `</body>`?\",subtitle:\"Do you know any exceptions?\"};function h(n){let e={code:\"code\",h2:\"h2\",p:\"p\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[\"In a nutshell, such a placement of CSS \",(0,t.jsx)(e.code,{children:\"<link>\"}),\"s and JavaScript \",(0,t.jsx)(e.code,{children:\"<script>\"}),\"s allows for faster rendering of the page and better overall performance.\"]}),`\n`,(0,t.jsxs)(e.h2,{children:[\"Placing \",(0,t.jsx)(e.code,{children:\"<link>\"}),\"s in \",(0,t.jsx)(e.code,{children:\"<head>\"})]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Putting \",(0,t.jsx)(e.code,{children:\"<link>\"}),\"s in \",(0,t.jsx)(e.code,{children:\"<head>\"}),' is part of the proper specification in building an optimized website. When a page first loads, HTML and CSS are being parsed simultaneously; HTML creates the DOM (Document Object Model) and CSS creates the CSSOM (CSS Object Model). Both are needed to create the visuals in a website, allowing for a quick \"first meaningful paint\" timing. Placing CSS ',(0,t.jsx)(e.code,{children:\"<link>\"}),\"s in the \",(0,t.jsx)(e.code,{children:\"<head>\"}),\" ensures that the stylesheets are loaded and ready for use when the browser starts rendering the page.\"]}),`\n`,(0,t.jsx)(e.p,{children:\"This progressive rendering is a metric that sites are measured on in their performance scores. Putting stylesheets near the bottom of the document is what prohibits progressive rendering in many browsers. Some browsers block rendering to avoid having to repaint elements of the page if their styles change. The user is then stuck viewing a blank white page. Other times there can be flashes of unstyled content (FOUC), which show a webpage with no styling applied.\"}),`\n`,(0,t.jsxs)(e.h2,{children:[\"Placing \",(0,t.jsx)(e.code,{children:\"<script>\"}),\"s just before \",(0,t.jsx)(e.code,{children:\"</body>\"})]}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"<script>\"}),\" tags block HTML parsing while they are being downloaded and executed which can slow down the display of your page. Placing the \",(0,t.jsx)(e.code,{children:\"<script>\"}),\"s at the bottom will allow the HTML to be parsed and displayed to the user first.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"An exception for positioning of \",(0,t.jsx)(e.code,{children:\"<script>\"}),\"s at the bottom is when your script contains \",(0,t.jsx)(e.code,{children:\"document.write()\"}),\", but these days it's not a good practice to use \",(0,t.jsx)(e.code,{children:\"document.write()\"}),\". Also, placing \",(0,t.jsx)(e.code,{children:\"<script>\"}),\"s at the bottom means that the browser cannot start downloading the scripts until the entire document is parsed. This ensures your code that needs to manipulate DOM elements will not throw an error and halt the entire script. If you need to put \",(0,t.jsx)(e.code,{children:\"<script>\"}),\"s in the \",(0,t.jsx)(e.code,{children:\"<head>\"}),\", use the \",(0,t.jsx)(e.code,{children:\"defer\"}),\" attribute, which will achieve the same effect of running the script only after the HTML is parsed but the browser can kick off the network request earlier to download the script.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Keep in mind that putting scripts just before the closing \",(0,t.jsx)(e.code,{children:\"</body>\"}),\" tag will create the illusion that the page loads faster on an empty cache (since the scripts won't block downloading the rest of the document). However, if you have some code you want to run during page load, it will only start executing after the entire page has loaded. If you put those scripts in the \",(0,t.jsx)(e.code,{children:\"<head>\"}),\" tag, they would start executing before - so on a primed cache the page would actually appear to load faster.\"]}),`\n`,(0,t.jsxs)(e.h2,{children:[(0,t.jsx)(e.code,{children:\"<head>\"}),\" and \",(0,t.jsx)(e.code,{children:\"<body>\"}),\" tags are now optional\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"As per the HTML5 specification, certain HTML tags like \",(0,t.jsx)(e.code,{children:\"<head>\"}),\" and \",(0,t.jsx)(e.code,{children:\"<body>\"}),\" are optional. Google's style guide even recommends removing them to save bytes. However, this practice is still not widely adopted and the performance gain is likely to be minimal and for most sites it's not likely going to matter.\"]})]})}function l(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(h,{...n})}):h(n)}return k(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/css-link-between-head-and-js-script-just-before-body/pt-BR.json b/apps/web/src/__generated__/questions/quiz/css-link-between-head-and-js-script-just-before-body/pt-BR.json
index 906c551e9..f489f7614 100644
--- a/apps/web/src/__generated__/questions/quiz/css-link-between-head-and-js-script-just-before-body/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/css-link-between-head-and-js-script-just-before-body/pt-BR.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),q=(a,e)=>{for(var r in e)n(a,r,{get:e[r],enumerable:!0})},s=(a,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!g.call(a,i)&&i!==r&&n(a,i,{get:()=>e[i],enumerable:!(d=p(e,i))||d.enumerable});return a};var v=(a,e,r)=>(r=a!=null?l(h(a)):{},s(e||!a||!a.__esModule?n(r,\"default\",{value:a,enumerable:!0}):r,a)),f=a=>s(n({},\"__esModule\",{value:!0}),a);var t=b((z,c)=>{c.exports=_jsx_runtime});var j={};q(j,{default:()=>C,frontmatter:()=>x});var o=v(t()),x={title:\"Por que geralmente \\xE9 uma boa ideia posicionar os CSS `<link>` entre `<head></head>` e os JS `<script>` logo antes de `</body>`?\",subtitle:\"Voc\\xEA conhece alguma exce\\xE7\\xE3o?\"};function m(a){let e=Object.assign({p:\"p\",code:\"code\",h2:\"h2\"},a.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Em poucas palavras, posicionamento CSS \",(0,o.jsx)(e.code,{children:\"<link>\"}),\"s and JavaScript \",(0,o.jsx)(e.code,{children:\"<script>\"}),\"s permite uma renderiza\\xE7\\xE3o mais r\\xE1pida da p\\xE1gina e um melhor desempenho geral.\"]}),`\n`,(0,o.jsxs)(e.h2,{children:[\"Colocando \",(0,o.jsx)(e.code,{children:\"<link>\"}),\"s em \",(0,o.jsx)(e.code,{children:\"<head>\"})]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Colocar \",(0,o.jsx)(e.code,{children:\"<link>\"}),\"s em \",(0,o.jsx)(e.code,{children:\"<head>\"}),' faz parte da especifica\\xE7\\xE3o adequada na constru\\xE7\\xE3o de um site otimizado. Quando uma p\\xE1gina \\xE9 carregada pela primeira vez, HTML e CSS s\\xE3o analisados simultaneamente; O HTML cria o DOM (modelo de objeto do documento) e o CSS cria o modelo de objeto CSSOM (CSS Object Model). Ambos s\\xE3o necess\\xE1rios para criar os elementos visuais de um site, permitindo um tempo r\\xE1pido para o \"primeiro desenho significativo\" (first meaningful paint). Colocar o CSS',(0,o.jsx)(e.code,{children:\"<link>\"}),\"s no \",(0,o.jsx)(e.code,{children:\"<head>\"}),\" garante que os estilos s\\xE3o carregados e prontos para uso quando o navegador come\\xE7ar a renderizar a p\\xE1gina.\"]}),`\n`,(0,o.jsx)(e.p,{children:\"Esta renderiza\\xE7\\xE3o progressiva \\xE9 uma m\\xE9trica em que os sites s\\xE3o medidos na sua pontua\\xE7\\xE3o de desempenho. Colocar folhas de estilo perto do final do documento \\xE9 o que impede a renderiza\\xE7\\xE3o progressiva em muitos navegadores. Alguns navegadores bloqueiam a renderiza\\xE7\\xE3o para evitar ter que repintar elementos da p\\xE1gina se seus estilos mudarem. O usu\\xE1rio fica ent\\xE3o preso visualizando uma p\\xE1gina em branco. Outras vezes, podem ocorrer flashes de conte\\xFAdo n\\xE3o estilizado (FOUC), que mostram uma p\\xE1gina da web sem a aplica\\xE7\\xE3o de estilos.\"}),`\n`,(0,o.jsxs)(e.h2,{children:[\"Colocando \",(0,o.jsx)(e.code,{children:\"<script>\"}),\"s logo antes \",(0,o.jsx)(e.code,{children:\"</body>\"})]}),`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"<script>\"}),\" bloqueia a an\\xE1lise HTML enquanto eles est\\xE3o sendo baixados e executados, o que pode diminuir a velocidade da sua p\\xE1gina. Colocar o \",(0,o.jsx)(e.code,{children:\"<script>\"}),\"s na parte inferior permitir\\xE1 que o HTML seja analisado e exibido ao usu\\xE1rio primeiro.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Uma exce\\xE7\\xE3o para posicionamento de \",(0,o.jsx)(e.code,{children:\"<script>\"}),\"s na parte inferior \\xE9 quando o script cont\\xE9m \",(0,o.jsx)(e.code,{children:\"documento.write()\"}),\", mas hoje em dia n\\xE3o \\xE9 uma boa pr\\xE1tica usar \",(0,o.jsx)(e.code,{children:\"document.write()\"}),\". Tamb\\xE9m, colocar \",(0,o.jsx)(e.code,{children:\"<script>\"}),\"s na parte inferior significa que o navegador n\\xE3o pode iniciar o download dos scripts at\\xE9 que o documento inteiro seja analisado. Isso garante que seu c\\xF3digo que precisa manipular elementos DOM n\\xE3o ir\\xE1 lan\\xE7ar um erro e parar todo o script. Se voc\\xEA precisar colocar \",(0,o.jsx)(e.code,{children:\"<script>\"}),\"s no \",(0,o.jsx)(e.code,{children:\"<head>\"}),\", use o atributo \",(0,o.jsx)(e.code,{children:\"defer\"}),\", que alcan\\xE7ar\\xE1 o mesmo efeito de executar o script somente depois que o HTML for analisado, mas o navegador pode expulsar a solicita\\xE7\\xE3o de rede antes de baixar o script.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Tenha em mente que colocar scripts antes da tag de fechamento \",(0,o.jsx)(e.code,{children:\"</body>\"}),\" ir\\xE1 criar a ilus\\xE3o de que a p\\xE1gina carrega mais r\\xE1pido em um cache vazio (j\\xE1 que os scripts n\\xE3o v\\xE3o bloquear o download do resto do documento). No entanto, se voc\\xEA tiver algum c\\xF3digo que deseja executar durante o carregamento da p\\xE1gina, ele s\\xF3 come\\xE7ar\\xE1 a ser executado ap\\xF3s o carregamento completo da p\\xE1gina. Se voc\\xEA colocar esses scripts na tag \",(0,o.jsx)(e.code,{children:\"<head>\"}),\", eles come\\xE7ariam a ser executados antes, ent\\xE3o em um cache carregado a p\\xE1gina parece carregar mais r\\xE1pido.\"]}),`\n`,(0,o.jsxs)(e.h2,{children:[\"As tags \",(0,o.jsx)(e.code,{children:\"<head>\"}),\" e \",(0,o.jsx)(e.code,{children:\"<body>\"}),\" agora s\\xE3o opcionais\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Como na especifica\\xE7\\xE3o HTML5, certas tags HTML como \",(0,o.jsx)(e.code,{children:\"<head>\"}),\" e\",(0,o.jsx)(e.code,{children:\"<body>\"}),\" s\\xE3o opcionais. O guia de estilo do Google recomenda at\\xE9 a sua remo\\xE7\\xE3o para economizar bytes. No entanto esta pr\\xE1tica ainda n\\xE3o \\xE9 amplamente adotada e o ganho de desempenho \\xE9 provavelmente m\\xEDnimo e para a maioria dos sites isso n\\xE3o vai importar.\"]})]})}function S(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,Object.assign({},a,{children:(0,o.jsx)(m,a)})):m(a)}var C=S;return f(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var v=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),b=(a,e)=>{for(var r in e)n(a,r,{get:e[r],enumerable:!0})},s=(a,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of h(e))!q.call(a,i)&&i!==r&&n(a,i,{get:()=>e[i],enumerable:!(d=u(e,i))||d.enumerable});return a};var f=(a,e,r)=>(r=a!=null?p(g(a)):{},s(e||!a||!a.__esModule?n(r,\"default\",{value:a,enumerable:!0}):r,a)),x=a=>s(n({},\"__esModule\",{value:!0}),a);var t=v((j,c)=>{c.exports=_jsx_runtime});var C={};b(C,{default:()=>l,frontmatter:()=>S});var o=f(t()),S={title:\"Por que geralmente \\xE9 uma boa ideia posicionar os CSS `<link>` entre `<head></head>` e os JS `<script>` logo antes de `</body>`?\",subtitle:\"Voc\\xEA conhece alguma exce\\xE7\\xE3o?\"};function m(a){let e={code:\"code\",h2:\"h2\",p:\"p\",...a.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Em poucas palavras, posicionamento CSS \",(0,o.jsx)(e.code,{children:\"<link>\"}),\"s and JavaScript \",(0,o.jsx)(e.code,{children:\"<script>\"}),\"s permite uma renderiza\\xE7\\xE3o mais r\\xE1pida da p\\xE1gina e um melhor desempenho geral.\"]}),`\n`,(0,o.jsxs)(e.h2,{children:[\"Colocando \",(0,o.jsx)(e.code,{children:\"<link>\"}),\"s em \",(0,o.jsx)(e.code,{children:\"<head>\"})]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Colocar \",(0,o.jsx)(e.code,{children:\"<link>\"}),\"s em \",(0,o.jsx)(e.code,{children:\"<head>\"}),' faz parte da especifica\\xE7\\xE3o adequada na constru\\xE7\\xE3o de um site otimizado. Quando uma p\\xE1gina \\xE9 carregada pela primeira vez, HTML e CSS s\\xE3o analisados simultaneamente; O HTML cria o DOM (modelo de objeto do documento) e o CSS cria o modelo de objeto CSSOM (CSS Object Model). Ambos s\\xE3o necess\\xE1rios para criar os elementos visuais de um site, permitindo um tempo r\\xE1pido para o \"primeiro desenho significativo\" (first meaningful paint). Colocar o CSS',(0,o.jsx)(e.code,{children:\"<link>\"}),\"s no \",(0,o.jsx)(e.code,{children:\"<head>\"}),\" garante que os estilos s\\xE3o carregados e prontos para uso quando o navegador come\\xE7ar a renderizar a p\\xE1gina.\"]}),`\n`,(0,o.jsx)(e.p,{children:\"Esta renderiza\\xE7\\xE3o progressiva \\xE9 uma m\\xE9trica em que os sites s\\xE3o medidos na sua pontua\\xE7\\xE3o de desempenho. Colocar folhas de estilo perto do final do documento \\xE9 o que impede a renderiza\\xE7\\xE3o progressiva em muitos navegadores. Alguns navegadores bloqueiam a renderiza\\xE7\\xE3o para evitar ter que repintar elementos da p\\xE1gina se seus estilos mudarem. O usu\\xE1rio fica ent\\xE3o preso visualizando uma p\\xE1gina em branco. Outras vezes, podem ocorrer flashes de conte\\xFAdo n\\xE3o estilizado (FOUC), que mostram uma p\\xE1gina da web sem a aplica\\xE7\\xE3o de estilos.\"}),`\n`,(0,o.jsxs)(e.h2,{children:[\"Colocando \",(0,o.jsx)(e.code,{children:\"<script>\"}),\"s logo antes \",(0,o.jsx)(e.code,{children:\"</body>\"})]}),`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"<script>\"}),\" bloqueia a an\\xE1lise HTML enquanto eles est\\xE3o sendo baixados e executados, o que pode diminuir a velocidade da sua p\\xE1gina. Colocar o \",(0,o.jsx)(e.code,{children:\"<script>\"}),\"s na parte inferior permitir\\xE1 que o HTML seja analisado e exibido ao usu\\xE1rio primeiro.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Uma exce\\xE7\\xE3o para posicionamento de \",(0,o.jsx)(e.code,{children:\"<script>\"}),\"s na parte inferior \\xE9 quando o script cont\\xE9m \",(0,o.jsx)(e.code,{children:\"documento.write()\"}),\", mas hoje em dia n\\xE3o \\xE9 uma boa pr\\xE1tica usar \",(0,o.jsx)(e.code,{children:\"document.write()\"}),\". Tamb\\xE9m, colocar \",(0,o.jsx)(e.code,{children:\"<script>\"}),\"s na parte inferior significa que o navegador n\\xE3o pode iniciar o download dos scripts at\\xE9 que o documento inteiro seja analisado. Isso garante que seu c\\xF3digo que precisa manipular elementos DOM n\\xE3o ir\\xE1 lan\\xE7ar um erro e parar todo o script. Se voc\\xEA precisar colocar \",(0,o.jsx)(e.code,{children:\"<script>\"}),\"s no \",(0,o.jsx)(e.code,{children:\"<head>\"}),\", use o atributo \",(0,o.jsx)(e.code,{children:\"defer\"}),\", que alcan\\xE7ar\\xE1 o mesmo efeito de executar o script somente depois que o HTML for analisado, mas o navegador pode expulsar a solicita\\xE7\\xE3o de rede antes de baixar o script.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Tenha em mente que colocar scripts antes da tag de fechamento \",(0,o.jsx)(e.code,{children:\"</body>\"}),\" ir\\xE1 criar a ilus\\xE3o de que a p\\xE1gina carrega mais r\\xE1pido em um cache vazio (j\\xE1 que os scripts n\\xE3o v\\xE3o bloquear o download do resto do documento). No entanto, se voc\\xEA tiver algum c\\xF3digo que deseja executar durante o carregamento da p\\xE1gina, ele s\\xF3 come\\xE7ar\\xE1 a ser executado ap\\xF3s o carregamento completo da p\\xE1gina. Se voc\\xEA colocar esses scripts na tag \",(0,o.jsx)(e.code,{children:\"<head>\"}),\", eles come\\xE7ariam a ser executados antes, ent\\xE3o em um cache carregado a p\\xE1gina parece carregar mais r\\xE1pido.\"]}),`\n`,(0,o.jsxs)(e.h2,{children:[\"As tags \",(0,o.jsx)(e.code,{children:\"<head>\"}),\" e \",(0,o.jsx)(e.code,{children:\"<body>\"}),\" agora s\\xE3o opcionais\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Como na especifica\\xE7\\xE3o HTML5, certas tags HTML como \",(0,o.jsx)(e.code,{children:\"<head>\"}),\" e\",(0,o.jsx)(e.code,{children:\"<body>\"}),\" s\\xE3o opcionais. O guia de estilo do Google recomenda at\\xE9 a sua remo\\xE7\\xE3o para economizar bytes. No entanto esta pr\\xE1tica ainda n\\xE3o \\xE9 amplamente adotada e o ganho de desempenho \\xE9 provavelmente m\\xEDnimo e para a maioria dos sites isso n\\xE3o vai importar.\"]})]})}function l(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,{...a,children:(0,o.jsx)(m,{...a})}):m(a)}return x(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/css-link-between-head-and-js-script-just-before-body/zh-CN.json b/apps/web/src/__generated__/questions/quiz/css-link-between-head-and-js-script-just-before-body/zh-CN.json
index 20d0ff41e..96c79c0f7 100644
--- a/apps/web/src/__generated__/questions/quiz/css-link-between-head-and-js-script-just-before-body/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/css-link-between-head-and-js-script-just-before-body/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var u=(d,e)=>()=>(e||d((e={exports:{}}).exports,e),e.exports),C=(d,e)=>{for(var n in e)i(d,n,{get:e[n],enumerable:!0})},o=(d,e,n,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of S(e))!m.call(d,r)&&r!==n&&i(d,r,{get:()=>e[r],enumerable:!(h=p(e,r))||h.enumerable});return d};var x=(d,e,n)=>(n=d!=null?a(M(d)):{},o(e||!d||!d.__esModule?i(n,\"default\",{value:d,enumerable:!0}):n,d)),b=d=>o(i({},\"__esModule\",{value:!0}),d);var l=u((f,t)=>{t.exports=_jsx_runtime});var T={};C(T,{default:()=>H,frontmatter:()=>L});var c=x(l()),L={title:\"\\u4E3A\\u4EC0\\u4E48\\u5C06 CSS `<link>` \\u653E\\u7F6E\\u5728 `<head></head>` \\u4E4B\\u95F4\\uFF0C\\u800C JS `<script>` \\u653E\\u7F6E\\u5728 `</body>` \\u4E4B\\u524D\\u662F\\u4E00\\u4E2A\\u597D\\u4E3B\\u610F\\uFF1F\",subtitle:\"\\u4F60\\u77E5\\u9053\\u4EFB\\u4F55\\u4F8B\\u5916\\u60C5\\u51B5\\u5417\\uFF1F\"};function s(d){let e=Object.assign({p:\"p\",code:\"code\",h2:\"h2\"},d.components);return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(e.p,{children:[\"\\u7B80\\u800C\\u8A00\\u4E4B\\uFF0C\\u8FD9\\u79CD CSS \",(0,c.jsx)(e.code,{children:\"<link>\"}),\" \\u548C JavaScript \",(0,c.jsx)(e.code,{children:\"<script>\"}),\" \\u7684\\u653E\\u7F6E\\u65B9\\u5F0F\\u53EF\\u4EE5\\u66F4\\u5FEB\\u5730\\u6E32\\u67D3\\u9875\\u9762\\u5E76\\u83B7\\u5F97\\u66F4\\u597D\\u7684\\u6574\\u4F53\\u6027\\u80FD\\u3002\"]}),`\n`,(0,c.jsxs)(e.h2,{children:[\"\\u5C06 \",(0,c.jsx)(e.code,{children:\"<link>\"}),\" \\u653E\\u7F6E\\u5728 \",(0,c.jsx)(e.code,{children:\"<head>\"}),\" \\u4E2D\"]}),`\n`,(0,c.jsxs)(e.p,{children:[\"\\u5C06 \",(0,c.jsx)(e.code,{children:\"<link>\"}),\" \\u653E\\u5728 \",(0,c.jsx)(e.code,{children:\"<head>\"}),\" \\u4E2D\\u662F\\u6784\\u5EFA\\u4F18\\u5316\\u7F51\\u7AD9\\u7684\\u6B63\\u786E\\u89C4\\u8303\\u7684\\u4E00\\u90E8\\u5206\\u3002\\u5F53\\u9875\\u9762\\u9996\\u6B21\\u52A0\\u8F7D\\u65F6\\uFF0CHTML \\u548C CSS \\u4F1A\\u540C\\u65F6\\u88AB\\u89E3\\u6790\\uFF1BHTML \\u521B\\u5EFA DOM\\uFF08\\u6587\\u6863\\u5BF9\\u8C61\\u6A21\\u578B\\uFF09\\uFF0CCSS \\u521B\\u5EFA CSSOM\\uFF08CSS \\u5BF9\\u8C61\\u6A21\\u578B\\uFF09\\u3002\\u4E24\\u8005\\u90FD\\u9700\\u8981\\u5728\\u7F51\\u7AD9\\u4E2D\\u521B\\u5EFA\\u89C6\\u89C9\\u6548\\u679C\\uFF0C\\u4ECE\\u800C\\u5B9E\\u73B0\\u5FEB\\u901F\\u7684\\u201C\\u9996\\u6B21\\u6709\\u6548\\u7ED8\\u5236\\u201D\\u8BA1\\u65F6\\u3002\\u5C06 CSS \",(0,c.jsx)(e.code,{children:\"<link>\"}),\" \\u653E\\u7F6E\\u5728 \",(0,c.jsx)(e.code,{children:\"<head>\"}),\" \\u4E2D\\u53EF\\u786E\\u4FDD\\u6837\\u5F0F\\u8868\\u5728\\u6D4F\\u89C8\\u5668\\u5F00\\u59CB\\u6E32\\u67D3\\u9875\\u9762\\u65F6\\u5DF2\\u52A0\\u8F7D\\u5E76\\u53EF\\u4EE5\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,c.jsx)(e.p,{children:\"\\u8FD9\\u79CD\\u6E10\\u8FDB\\u5F0F\\u6E32\\u67D3\\u662F\\u8861\\u91CF\\u7F51\\u7AD9\\u6027\\u80FD\\u5F97\\u5206\\u7684\\u6307\\u6807\\u3002\\u5C06\\u6837\\u5F0F\\u8868\\u653E\\u5728\\u6587\\u6863\\u7684\\u5E95\\u90E8\\u4F1A\\u963B\\u6B62\\u8BB8\\u591A\\u6D4F\\u89C8\\u5668\\u4E2D\\u7684\\u6E10\\u8FDB\\u5F0F\\u6E32\\u67D3\\u3002\\u67D0\\u4E9B\\u6D4F\\u89C8\\u5668\\u4F1A\\u963B\\u6B62\\u6E32\\u67D3\\uFF0C\\u4EE5\\u907F\\u514D\\u5728\\u6837\\u5F0F\\u66F4\\u6539\\u65F6\\u91CD\\u65B0\\u7ED8\\u5236\\u9875\\u9762\\u5143\\u7D20\\u3002\\u7136\\u540E\\uFF0C\\u7528\\u6237\\u4F1A\\u5361\\u5728\\u67E5\\u770B\\u7A7A\\u767D\\u7684\\u767D\\u9875\\u4E0A\\u3002\\u5176\\u4ED6\\u65F6\\u5019\\u53EF\\u80FD\\u4F1A\\u51FA\\u73B0\\u672A\\u8BBE\\u7F6E\\u6837\\u5F0F\\u7684\\u95EA\\u70C1\\u5185\\u5BB9 (FOUC)\\uFF0C\\u8FD9\\u4F1A\\u663E\\u793A\\u672A\\u5E94\\u7528\\u4EFB\\u4F55\\u6837\\u5F0F\\u7684\\u7F51\\u9875\\u3002\"}),`\n`,(0,c.jsxs)(e.h2,{children:[\"\\u5C06 \",(0,c.jsx)(e.code,{children:\"<script>\"}),\" \\u653E\\u7F6E\\u5728 \",(0,c.jsx)(e.code,{children:\"</body>\"}),\" \\u4E4B\\u524D\"]}),`\n`,(0,c.jsxs)(e.p,{children:[(0,c.jsx)(e.code,{children:\"<script>\"}),\" \\u6807\\u7B7E\\u4F1A\\u963B\\u6B62 HTML \\u89E3\\u6790\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u6B63\\u5728\\u88AB\\u4E0B\\u8F7D\\u548C\\u6267\\u884C\\uFF0C\\u8FD9\\u4F1A\\u51CF\\u6162\\u9875\\u9762\\u7684\\u663E\\u793A\\u901F\\u5EA6\\u3002\\u5C06 \",(0,c.jsx)(e.code,{children:\"<script>\"}),\" \\u653E\\u5728\\u5E95\\u90E8\\u5C06\\u5141\\u8BB8\\u9996\\u5148\\u89E3\\u6790 HTML \\u5E76\\u5C06\\u5176\\u663E\\u793A\\u7ED9\\u7528\\u6237\\u3002\"]}),`\n`,(0,c.jsxs)(e.p,{children:[\"\\u5C06 \",(0,c.jsx)(e.code,{children:\"<script>\"}),\" \\u653E\\u7F6E\\u5728\\u5E95\\u90E8\\u7684\\u4F8B\\u5916\\u60C5\\u51B5\\u662F\\uFF0C\\u5F53\\u60A8\\u7684\\u811A\\u672C\\u5305\\u542B \",(0,c.jsx)(e.code,{children:\"document.write()\"}),\" \\u65F6\\uFF0C\\u4F46\\u5982\\u4ECA\\u4F7F\\u7528 \",(0,c.jsx)(e.code,{children:\"document.write()\"}),\" \\u5E76\\u4E0D\\u662F\\u4E00\\u4E2A\\u597D\\u4E60\\u60EF\\u3002\\u6B64\\u5916\\uFF0C\\u5C06 \",(0,c.jsx)(e.code,{children:\"<script>\"}),\" \\u653E\\u7F6E\\u5728\\u5E95\\u90E8\\u610F\\u5473\\u7740\\u6D4F\\u89C8\\u5668\\u5728\\u6574\\u4E2A\\u6587\\u6863\\u88AB\\u89E3\\u6790\\u4E4B\\u524D\\u65E0\\u6CD5\\u5F00\\u59CB\\u4E0B\\u8F7D\\u811A\\u672C\\u3002\\u8FD9\\u786E\\u4FDD\\u4E86\\u9700\\u8981\\u64CD\\u4F5C DOM \\u5143\\u7D20\\u7684\\u4EE3\\u7801\\u4E0D\\u4F1A\\u629B\\u51FA\\u9519\\u8BEF\\u5E76\\u505C\\u6B62\\u6574\\u4E2A\\u811A\\u672C\\u3002\\u5982\\u679C\\u9700\\u8981\\u5728 \",(0,c.jsx)(e.code,{children:\"<head>\"}),\" \\u4E2D\\u653E\\u7F6E \",(0,c.jsx)(e.code,{children:\"<script>\"}),\"\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,c.jsx)(e.code,{children:\"defer\"}),\" \\u5C5E\\u6027\\uFF0C\\u8FD9\\u5C06\\u5B9E\\u73B0\\u4E0E\\u4EC5\\u5728 HTML \\u88AB\\u89E3\\u6790\\u540E\\u8FD0\\u884C\\u811A\\u672C\\u76F8\\u540C\\u7684\\u6548\\u679C\\uFF0C\\u4F46\\u6D4F\\u89C8\\u5668\\u53EF\\u4EE5\\u66F4\\u65E9\\u5730\\u542F\\u52A8\\u7F51\\u7EDC\\u8BF7\\u6C42\\u4EE5\\u4E0B\\u8F7D\\u811A\\u672C\\u3002\"]}),`\n`,(0,c.jsxs)(e.p,{children:[\"\\u8BF7\\u8BB0\\u4F4F\\uFF0C\\u5C06\\u811A\\u672C\\u653E\\u5728\\u7ED3\\u675F \",(0,c.jsx)(e.code,{children:\"</body>\"}),\" \\u6807\\u7B7E\\u4E4B\\u524D\\u4F1A\\u4EA7\\u751F\\u9875\\u9762\\u5728\\u7A7A\\u7F13\\u5B58\\u4E0A\\u52A0\\u8F7D\\u66F4\\u5FEB\\u7684\\u9519\\u89C9\\uFF08\\u56E0\\u4E3A\\u811A\\u672C\\u4E0D\\u4F1A\\u963B\\u6B62\\u4E0B\\u8F7D\\u6587\\u6863\\u7684\\u5176\\u4F59\\u90E8\\u5206\\uFF09\\u3002\\u4F46\\u662F\\uFF0C\\u5982\\u679C\\u60A8\\u6709\\u4E00\\u4E9B\\u4EE3\\u7801\\u8981\\u5728\\u9875\\u9762\\u52A0\\u8F7D\\u671F\\u95F4\\u8FD0\\u884C\\uFF0C\\u5B83\\u5C06\\u4EC5\\u5728\\u6574\\u4E2A\\u9875\\u9762\\u52A0\\u8F7D\\u5B8C\\u6210\\u540E\\u624D\\u5F00\\u59CB\\u6267\\u884C\\u3002\\u5982\\u679C\\u5C06\\u8FD9\\u4E9B\\u811A\\u672C\\u653E\\u5728 \",(0,c.jsx)(e.code,{children:\"<head>\"}),\" \\u6807\\u7B7E\\u4E2D\\uFF0C\\u5B83\\u4EEC\\u5C06\\u5F00\\u59CB\\u66F4\\u65E9\\u5730\\u6267\\u884C - \\u56E0\\u6B64\\u5728\\u5DF2\\u51C6\\u5907\\u597D\\u7684\\u7F13\\u5B58\\u4E0A\\uFF0C\\u9875\\u9762\\u5B9E\\u9645\\u4E0A\\u770B\\u8D77\\u6765\\u4F1A\\u52A0\\u8F7D\\u5F97\\u66F4\\u5FEB\\u3002\"]}),`\n`,(0,c.jsxs)(e.h2,{children:[(0,c.jsx)(e.code,{children:\"<head>\"}),\" \\u548C \",(0,c.jsx)(e.code,{children:\"<body>\"}),\" \\u6807\\u7B7E\\u73B0\\u5728\\u662F\\u53EF\\u9009\\u7684\"]}),`\n`,(0,c.jsxs)(e.p,{children:[\"\\u6839\\u636E HTML5 \\u89C4\\u8303\\uFF0C\\u67D0\\u4E9B HTML \\u6807\\u7B7E\\uFF08\\u5982 \",(0,c.jsx)(e.code,{children:\"<head>\"}),\" \\u548C \",(0,c.jsx)(e.code,{children:\"<body>\"}),\"\\uFF09\\u662F\\u53EF\\u9009\\u7684\\u3002\\u8C37\\u6B4C\\u7684\\u98CE\\u683C\\u6307\\u5357\\u751A\\u81F3\\u5EFA\\u8BAE\\u5220\\u9664\\u5B83\\u4EEC\\u4EE5\\u8282\\u7701\\u5B57\\u8282\\u3002\\u4F46\\u662F\\uFF0C\\u8FD9\\u79CD\\u505A\\u6CD5\\u5C1A\\u672A\\u5F97\\u5230\\u5E7F\\u6CDB\\u91C7\\u7528\\uFF0C\\u6027\\u80FD\\u63D0\\u5347\\u53EF\\u80FD\\u5F88\\u5C0F\\uFF0C\\u5BF9\\u4E8E\\u5927\\u591A\\u6570\\u7F51\\u7AD9\\u6765\\u8BF4\\uFF0C\\u5B83\\u53EF\\u80FD\\u65E0\\u5173\\u7D27\\u8981\\u3002\"]})]})}function j(d={}){let{wrapper:e}=d.components||{};return e?(0,c.jsx)(e,Object.assign({},d,{children:(0,c.jsx)(s,d)})):s(d)}var H=j;return b(T);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var C=(d,e)=>()=>(e||d((e={exports:{}}).exports,e),e.exports),x=(d,e)=>{for(var n in e)i(d,n,{get:e[n],enumerable:!0})},o=(d,e,n,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of M(e))!u.call(d,r)&&r!==n&&i(d,r,{get:()=>e[r],enumerable:!(h=S(e,r))||h.enumerable});return d};var L=(d,e,n)=>(n=d!=null?p(m(d)):{},o(e||!d||!d.__esModule?i(n,\"default\",{value:d,enumerable:!0}):n,d)),H=d=>o(i({},\"__esModule\",{value:!0}),d);var t=C((f,l)=>{l.exports=_jsx_runtime});var _={};x(_,{default:()=>a,frontmatter:()=>T});var c=L(t()),T={title:\"\\u4E3A\\u4EC0\\u4E48\\u5C06 CSS `<link>` \\u653E\\u7F6E\\u5728 `<head></head>` \\u4E4B\\u95F4\\uFF0C\\u800C JS `<script>` \\u653E\\u7F6E\\u5728 `</body>` \\u4E4B\\u524D\\u662F\\u4E00\\u4E2A\\u597D\\u4E3B\\u610F\\uFF1F\",subtitle:\"\\u4F60\\u77E5\\u9053\\u4EFB\\u4F55\\u4F8B\\u5916\\u60C5\\u51B5\\u5417\\uFF1F\"};function s(d){let e={code:\"code\",h2:\"h2\",p:\"p\",...d.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(e.p,{children:[\"\\u7B80\\u800C\\u8A00\\u4E4B\\uFF0C\\u8FD9\\u79CD CSS \",(0,c.jsx)(e.code,{children:\"<link>\"}),\" \\u548C JavaScript \",(0,c.jsx)(e.code,{children:\"<script>\"}),\" \\u7684\\u653E\\u7F6E\\u65B9\\u5F0F\\u53EF\\u4EE5\\u66F4\\u5FEB\\u5730\\u6E32\\u67D3\\u9875\\u9762\\u5E76\\u83B7\\u5F97\\u66F4\\u597D\\u7684\\u6574\\u4F53\\u6027\\u80FD\\u3002\"]}),`\n`,(0,c.jsxs)(e.h2,{children:[\"\\u5C06 \",(0,c.jsx)(e.code,{children:\"<link>\"}),\" \\u653E\\u7F6E\\u5728 \",(0,c.jsx)(e.code,{children:\"<head>\"}),\" \\u4E2D\"]}),`\n`,(0,c.jsxs)(e.p,{children:[\"\\u5C06 \",(0,c.jsx)(e.code,{children:\"<link>\"}),\" \\u653E\\u5728 \",(0,c.jsx)(e.code,{children:\"<head>\"}),\" \\u4E2D\\u662F\\u6784\\u5EFA\\u4F18\\u5316\\u7F51\\u7AD9\\u7684\\u6B63\\u786E\\u89C4\\u8303\\u7684\\u4E00\\u90E8\\u5206\\u3002\\u5F53\\u9875\\u9762\\u9996\\u6B21\\u52A0\\u8F7D\\u65F6\\uFF0CHTML \\u548C CSS \\u4F1A\\u540C\\u65F6\\u88AB\\u89E3\\u6790\\uFF1BHTML \\u521B\\u5EFA DOM\\uFF08\\u6587\\u6863\\u5BF9\\u8C61\\u6A21\\u578B\\uFF09\\uFF0CCSS \\u521B\\u5EFA CSSOM\\uFF08CSS \\u5BF9\\u8C61\\u6A21\\u578B\\uFF09\\u3002\\u4E24\\u8005\\u90FD\\u9700\\u8981\\u5728\\u7F51\\u7AD9\\u4E2D\\u521B\\u5EFA\\u89C6\\u89C9\\u6548\\u679C\\uFF0C\\u4ECE\\u800C\\u5B9E\\u73B0\\u5FEB\\u901F\\u7684\\u201C\\u9996\\u6B21\\u6709\\u6548\\u7ED8\\u5236\\u201D\\u8BA1\\u65F6\\u3002\\u5C06 CSS \",(0,c.jsx)(e.code,{children:\"<link>\"}),\" \\u653E\\u7F6E\\u5728 \",(0,c.jsx)(e.code,{children:\"<head>\"}),\" \\u4E2D\\u53EF\\u786E\\u4FDD\\u6837\\u5F0F\\u8868\\u5728\\u6D4F\\u89C8\\u5668\\u5F00\\u59CB\\u6E32\\u67D3\\u9875\\u9762\\u65F6\\u5DF2\\u52A0\\u8F7D\\u5E76\\u53EF\\u4EE5\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,c.jsx)(e.p,{children:\"\\u8FD9\\u79CD\\u6E10\\u8FDB\\u5F0F\\u6E32\\u67D3\\u662F\\u8861\\u91CF\\u7F51\\u7AD9\\u6027\\u80FD\\u5F97\\u5206\\u7684\\u6307\\u6807\\u3002\\u5C06\\u6837\\u5F0F\\u8868\\u653E\\u5728\\u6587\\u6863\\u7684\\u5E95\\u90E8\\u4F1A\\u963B\\u6B62\\u8BB8\\u591A\\u6D4F\\u89C8\\u5668\\u4E2D\\u7684\\u6E10\\u8FDB\\u5F0F\\u6E32\\u67D3\\u3002\\u67D0\\u4E9B\\u6D4F\\u89C8\\u5668\\u4F1A\\u963B\\u6B62\\u6E32\\u67D3\\uFF0C\\u4EE5\\u907F\\u514D\\u5728\\u6837\\u5F0F\\u66F4\\u6539\\u65F6\\u91CD\\u65B0\\u7ED8\\u5236\\u9875\\u9762\\u5143\\u7D20\\u3002\\u7136\\u540E\\uFF0C\\u7528\\u6237\\u4F1A\\u5361\\u5728\\u67E5\\u770B\\u7A7A\\u767D\\u7684\\u767D\\u9875\\u4E0A\\u3002\\u5176\\u4ED6\\u65F6\\u5019\\u53EF\\u80FD\\u4F1A\\u51FA\\u73B0\\u672A\\u8BBE\\u7F6E\\u6837\\u5F0F\\u7684\\u95EA\\u70C1\\u5185\\u5BB9 (FOUC)\\uFF0C\\u8FD9\\u4F1A\\u663E\\u793A\\u672A\\u5E94\\u7528\\u4EFB\\u4F55\\u6837\\u5F0F\\u7684\\u7F51\\u9875\\u3002\"}),`\n`,(0,c.jsxs)(e.h2,{children:[\"\\u5C06 \",(0,c.jsx)(e.code,{children:\"<script>\"}),\" \\u653E\\u7F6E\\u5728 \",(0,c.jsx)(e.code,{children:\"</body>\"}),\" \\u4E4B\\u524D\"]}),`\n`,(0,c.jsxs)(e.p,{children:[(0,c.jsx)(e.code,{children:\"<script>\"}),\" \\u6807\\u7B7E\\u4F1A\\u963B\\u6B62 HTML \\u89E3\\u6790\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u6B63\\u5728\\u88AB\\u4E0B\\u8F7D\\u548C\\u6267\\u884C\\uFF0C\\u8FD9\\u4F1A\\u51CF\\u6162\\u9875\\u9762\\u7684\\u663E\\u793A\\u901F\\u5EA6\\u3002\\u5C06 \",(0,c.jsx)(e.code,{children:\"<script>\"}),\" \\u653E\\u5728\\u5E95\\u90E8\\u5C06\\u5141\\u8BB8\\u9996\\u5148\\u89E3\\u6790 HTML \\u5E76\\u5C06\\u5176\\u663E\\u793A\\u7ED9\\u7528\\u6237\\u3002\"]}),`\n`,(0,c.jsxs)(e.p,{children:[\"\\u5C06 \",(0,c.jsx)(e.code,{children:\"<script>\"}),\" \\u653E\\u7F6E\\u5728\\u5E95\\u90E8\\u7684\\u4F8B\\u5916\\u60C5\\u51B5\\u662F\\uFF0C\\u5F53\\u60A8\\u7684\\u811A\\u672C\\u5305\\u542B \",(0,c.jsx)(e.code,{children:\"document.write()\"}),\" \\u65F6\\uFF0C\\u4F46\\u5982\\u4ECA\\u4F7F\\u7528 \",(0,c.jsx)(e.code,{children:\"document.write()\"}),\" \\u5E76\\u4E0D\\u662F\\u4E00\\u4E2A\\u597D\\u4E60\\u60EF\\u3002\\u6B64\\u5916\\uFF0C\\u5C06 \",(0,c.jsx)(e.code,{children:\"<script>\"}),\" \\u653E\\u7F6E\\u5728\\u5E95\\u90E8\\u610F\\u5473\\u7740\\u6D4F\\u89C8\\u5668\\u5728\\u6574\\u4E2A\\u6587\\u6863\\u88AB\\u89E3\\u6790\\u4E4B\\u524D\\u65E0\\u6CD5\\u5F00\\u59CB\\u4E0B\\u8F7D\\u811A\\u672C\\u3002\\u8FD9\\u786E\\u4FDD\\u4E86\\u9700\\u8981\\u64CD\\u4F5C DOM \\u5143\\u7D20\\u7684\\u4EE3\\u7801\\u4E0D\\u4F1A\\u629B\\u51FA\\u9519\\u8BEF\\u5E76\\u505C\\u6B62\\u6574\\u4E2A\\u811A\\u672C\\u3002\\u5982\\u679C\\u9700\\u8981\\u5728 \",(0,c.jsx)(e.code,{children:\"<head>\"}),\" \\u4E2D\\u653E\\u7F6E \",(0,c.jsx)(e.code,{children:\"<script>\"}),\"\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,c.jsx)(e.code,{children:\"defer\"}),\" \\u5C5E\\u6027\\uFF0C\\u8FD9\\u5C06\\u5B9E\\u73B0\\u4E0E\\u4EC5\\u5728 HTML \\u88AB\\u89E3\\u6790\\u540E\\u8FD0\\u884C\\u811A\\u672C\\u76F8\\u540C\\u7684\\u6548\\u679C\\uFF0C\\u4F46\\u6D4F\\u89C8\\u5668\\u53EF\\u4EE5\\u66F4\\u65E9\\u5730\\u542F\\u52A8\\u7F51\\u7EDC\\u8BF7\\u6C42\\u4EE5\\u4E0B\\u8F7D\\u811A\\u672C\\u3002\"]}),`\n`,(0,c.jsxs)(e.p,{children:[\"\\u8BF7\\u8BB0\\u4F4F\\uFF0C\\u5C06\\u811A\\u672C\\u653E\\u5728\\u7ED3\\u675F \",(0,c.jsx)(e.code,{children:\"</body>\"}),\" \\u6807\\u7B7E\\u4E4B\\u524D\\u4F1A\\u4EA7\\u751F\\u9875\\u9762\\u5728\\u7A7A\\u7F13\\u5B58\\u4E0A\\u52A0\\u8F7D\\u66F4\\u5FEB\\u7684\\u9519\\u89C9\\uFF08\\u56E0\\u4E3A\\u811A\\u672C\\u4E0D\\u4F1A\\u963B\\u6B62\\u4E0B\\u8F7D\\u6587\\u6863\\u7684\\u5176\\u4F59\\u90E8\\u5206\\uFF09\\u3002\\u4F46\\u662F\\uFF0C\\u5982\\u679C\\u60A8\\u6709\\u4E00\\u4E9B\\u4EE3\\u7801\\u8981\\u5728\\u9875\\u9762\\u52A0\\u8F7D\\u671F\\u95F4\\u8FD0\\u884C\\uFF0C\\u5B83\\u5C06\\u4EC5\\u5728\\u6574\\u4E2A\\u9875\\u9762\\u52A0\\u8F7D\\u5B8C\\u6210\\u540E\\u624D\\u5F00\\u59CB\\u6267\\u884C\\u3002\\u5982\\u679C\\u5C06\\u8FD9\\u4E9B\\u811A\\u672C\\u653E\\u5728 \",(0,c.jsx)(e.code,{children:\"<head>\"}),\" \\u6807\\u7B7E\\u4E2D\\uFF0C\\u5B83\\u4EEC\\u5C06\\u5F00\\u59CB\\u66F4\\u65E9\\u5730\\u6267\\u884C - \\u56E0\\u6B64\\u5728\\u5DF2\\u51C6\\u5907\\u597D\\u7684\\u7F13\\u5B58\\u4E0A\\uFF0C\\u9875\\u9762\\u5B9E\\u9645\\u4E0A\\u770B\\u8D77\\u6765\\u4F1A\\u52A0\\u8F7D\\u5F97\\u66F4\\u5FEB\\u3002\"]}),`\n`,(0,c.jsxs)(e.h2,{children:[(0,c.jsx)(e.code,{children:\"<head>\"}),\" \\u548C \",(0,c.jsx)(e.code,{children:\"<body>\"}),\" \\u6807\\u7B7E\\u73B0\\u5728\\u662F\\u53EF\\u9009\\u7684\"]}),`\n`,(0,c.jsxs)(e.p,{children:[\"\\u6839\\u636E HTML5 \\u89C4\\u8303\\uFF0C\\u67D0\\u4E9B HTML \\u6807\\u7B7E\\uFF08\\u5982 \",(0,c.jsx)(e.code,{children:\"<head>\"}),\" \\u548C \",(0,c.jsx)(e.code,{children:\"<body>\"}),\"\\uFF09\\u662F\\u53EF\\u9009\\u7684\\u3002\\u8C37\\u6B4C\\u7684\\u98CE\\u683C\\u6307\\u5357\\u751A\\u81F3\\u5EFA\\u8BAE\\u5220\\u9664\\u5B83\\u4EEC\\u4EE5\\u8282\\u7701\\u5B57\\u8282\\u3002\\u4F46\\u662F\\uFF0C\\u8FD9\\u79CD\\u505A\\u6CD5\\u5C1A\\u672A\\u5F97\\u5230\\u5E7F\\u6CDB\\u91C7\\u7528\\uFF0C\\u6027\\u80FD\\u63D0\\u5347\\u53EF\\u80FD\\u5F88\\u5C0F\\uFF0C\\u5BF9\\u4E8E\\u5927\\u591A\\u6570\\u7F51\\u7AD9\\u6765\\u8BF4\\uFF0C\\u5B83\\u53EF\\u80FD\\u65E0\\u5173\\u7D27\\u8981\\u3002\"]})]})}function a(d={}){let{wrapper:e}=d.components||{};return e?(0,c.jsx)(e,{...d,children:(0,c.jsx)(s,{...d})}):s(d)}return H(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/describe-block-formatting-context-bfc-and-how-it-works/en-US.json b/apps/web/src/__generated__/questions/quiz/describe-block-formatting-context-bfc-and-how-it-works/en-US.json
index 22271d866..f81fcb8d5 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-block-formatting-context-bfc-and-how-it-works/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-block-formatting-context-bfc-and-how-it-works/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var m=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),u=(o,e)=>{for(var i in e)l(o,i,{get:e[i],enumerable:!0})},a=(o,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of f(e))!p.call(o,t)&&t!==i&&l(o,t,{get:()=>e[t],enumerable:!(c=g(e,t))||c.enumerable});return o};var x=(o,e,i)=>(i=o!=null?h(b(o)):{},a(e||!o||!o.__esModule?l(i,\"default\",{value:o,enumerable:!0}):i,o)),w=o=>a(l({},\"__esModule\",{value:!0}),o);var d=m((B,r)=>{r.exports=_jsx_runtime});var k={};u(k,{default:()=>C,frontmatter:()=>_});var n=x(d()),_={title:\"Describe Block Formatting Context (BFC) and how it works.\"};function s(o){let e=Object.assign({p:\"p\",code:\"code\",a:\"a\",ul:\"ul\",li:\"li\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"A Block Formatting Context (BFC) is part of the visual CSS rendering of a web page in which block boxes are laid out. Floats, absolutely positioned elements, \",(0,n.jsx)(e.code,{children:\"inline-blocks\"}),\", \",(0,n.jsx)(e.code,{children:\"table-cells\"}),\", \",(0,n.jsx)(e.code,{children:\"table-caption\"}),\"s, and elements with \",(0,n.jsx)(e.code,{children:\"overflow\"}),\" other than \",(0,n.jsx)(e.code,{children:\"visible\"}),\" (except when that value has been propagated to the viewport) establish new block formatting contexts.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Knowing how to establish a block formatting context is important, because without doing so, the containing box will not \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height\",children:\"contain floated children\"}),\". This is similar to collapsing margins, but more insidious as you will find entire boxes collapsing in odd ways.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"A BFC is an HTML box that satisfies at least one of the following conditions:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"float\"}),\" is not \",(0,n.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"position\"}),\" is neither \",(0,n.jsx)(e.code,{children:\"static\"}),\" nor \",(0,n.jsx)(e.code,{children:\"relative\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"display\"}),\" is \",(0,n.jsx)(e.code,{children:\"table-cell\"}),\", \",(0,n.jsx)(e.code,{children:\"table-caption\"}),\", \",(0,n.jsx)(e.code,{children:\"inline-block\"}),\", \",(0,n.jsx)(e.code,{children:\"flex\"}),\", or \",(0,n.jsx)(e.code,{children:\"inline-flex\"}),\", \",(0,n.jsx)(e.code,{children:\"grid\"}),\", or \",(0,n.jsx)(e.code,{children:\"inline-grid\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"overflow\"}),\" is not \",(0,n.jsx)(e.code,{children:\"visible\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"In a BFC, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Vertical margins between adjacent block-level boxes within the same BFC can collapse, but a BFC prevents margin collapsing with elements outside of it. Read more on \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\",children:\"collapsing margins\"}),\".\"]})]})}function v(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(s,o)})):s(o)}var C=v;return w(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var g=Object.create;var l=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var u=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var i in e)l(o,i,{get:e[i],enumerable:!0})},r=(o,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of p(e))!m.call(o,t)&&t!==i&&l(o,t,{get:()=>e[t],enumerable:!(c=f(e,t))||c.enumerable});return o};var w=(o,e,i)=>(i=o!=null?g(b(o)):{},r(e||!o||!o.__esModule?l(i,\"default\",{value:o,enumerable:!0}):i,o)),_=o=>r(l({},\"__esModule\",{value:!0}),o);var d=u((F,a)=>{a.exports=_jsx_runtime});var C={};x(C,{default:()=>h,frontmatter:()=>v});var n=w(d()),v={title:\"Describe Block Formatting Context (BFC) and how it works.\"};function s(o){let e={a:\"a\",code:\"code\",li:\"li\",p:\"p\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"A Block Formatting Context (BFC) is part of the visual CSS rendering of a web page in which block boxes are laid out. Floats, absolutely positioned elements, \",(0,n.jsx)(e.code,{children:\"inline-blocks\"}),\", \",(0,n.jsx)(e.code,{children:\"table-cells\"}),\", \",(0,n.jsx)(e.code,{children:\"table-caption\"}),\"s, and elements with \",(0,n.jsx)(e.code,{children:\"overflow\"}),\" other than \",(0,n.jsx)(e.code,{children:\"visible\"}),\" (except when that value has been propagated to the viewport) establish new block formatting contexts.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Knowing how to establish a block formatting context is important, because without doing so, the containing box will not \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height\",children:\"contain floated children\"}),\". This is similar to collapsing margins, but more insidious as you will find entire boxes collapsing in odd ways.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"A BFC is an HTML box that satisfies at least one of the following conditions:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"float\"}),\" is not \",(0,n.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"position\"}),\" is neither \",(0,n.jsx)(e.code,{children:\"static\"}),\" nor \",(0,n.jsx)(e.code,{children:\"relative\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"display\"}),\" is \",(0,n.jsx)(e.code,{children:\"table-cell\"}),\", \",(0,n.jsx)(e.code,{children:\"table-caption\"}),\", \",(0,n.jsx)(e.code,{children:\"inline-block\"}),\", \",(0,n.jsx)(e.code,{children:\"flex\"}),\", or \",(0,n.jsx)(e.code,{children:\"inline-flex\"}),\", \",(0,n.jsx)(e.code,{children:\"grid\"}),\", or \",(0,n.jsx)(e.code,{children:\"inline-grid\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"overflow\"}),\" is not \",(0,n.jsx)(e.code,{children:\"visible\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"In a BFC, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Vertical margins between adjacent block-level boxes within the same BFC can collapse, but a BFC prevents margin collapsing with elements outside of it. Read more on \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\",children:\"collapsing margins\"}),\".\"]})]})}function h(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(s,{...o})}):s(o)}return _(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/describe-block-formatting-context-bfc-and-how-it-works/pt-BR.json b/apps/web/src/__generated__/questions/quiz/describe-block-formatting-context-bfc-and-how-it-works/pt-BR.json
index 7025a65e2..44f519e12 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-block-formatting-context-bfc-and-how-it-works/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-block-formatting-context-bfc-and-how-it-works/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var a in e)d(n,a,{get:e[a],enumerable:!0})},r=(n,e,a,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!b.call(n,c)&&c!==a&&d(n,c,{get:()=>e[c],enumerable:!(i=h(e,c))||i.enumerable});return n};var g=(n,e,a)=>(a=n!=null?m(u(n)):{},r(e||!n||!n.__esModule?d(a,\"default\",{value:n,enumerable:!0}):a,n)),_=n=>r(d({},\"__esModule\",{value:!0}),n);var t=f((F,l)=>{l.exports=_jsx_runtime});var j={};x(j,{default:()=>S,frontmatter:()=>v});var o=g(t()),v={title:\"Descrever o contexto de formata\\xE7\\xE3o de bloco (BFC) e como ele funciona.\"};function s(n){let e=Object.assign({p:\"p\",code:\"code\",a:\"a\",ul:\"ul\",li:\"li\"},n.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Um Contexto de Formata\\xE7\\xE3o de Bloco (BFC) \\xE9 parte da renderiza\\xE7\\xE3o visual do CSS em uma p\\xE1gina da web, no qual os blocos s\\xE3o organizados. Elementos flutuantes, posicionados absolutamente, \",(0,o.jsx)(e.code,{children:\"inline-blocks\"}),\", \",(0,o.jsx)(e.code,{children:\"table-cells\"}),\", \",(0,o.jsx)(e.code,{children:\"table-captions\"}),\" e elementos com \",(0,o.jsx)(e.code,{children:\"overflow\"}),\" diferente de \",(0,o.jsx)(e.code,{children:\"visible\"}),\" (exceto quando esse valor foi propagado para a \\xE1rea vis\\xEDvel) estabelecem novos contextos de formata\\xE7\\xE3o de bloco.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Saber estabelecer um contexto de formata\\xE7\\xE3o de blocos \\xE9 importante, porque sem fazer isso, a caixa de conten\\xE7\\xE3o n\\xE3o \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height\",children:\"conter\\xE1 filhos floated\"}),\". Isso \\xE9 semelhante ao colapso das margens, mas mais insidioso, pois voc\\xEA encontrar\\xE1 caixas inteiras colapsando de maneiras estranhas.\"]}),`\n`,(0,o.jsx)(e.p,{children:\"Um BFC \\xE9 uma caixa HTML que atende pelo menos uma das seguintes condi\\xE7\\xF5es:\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"O valor de \",(0,o.jsx)(e.code,{children:\"float\"}),\" n\\xE3o \\xE9 \",(0,o.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"O valor de \",(0,o.jsx)(e.code,{children:\"posi\\xE7\\xE3o\"}),\" n\\xE3o \\xE9 \",(0,o.jsx)(e.code,{children:\"static\"}),\" nem \",(0,o.jsx)(e.code,{children:\"relative\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"O valor de \",(0,o.jsx)(e.code,{children:\"display\"}),\" \\xE9 \",(0,o.jsx)(e.code,{children:\"table-cell\"}),\", \",(0,o.jsx)(e.code,{children:\"table-caption\"}),\", \",(0,o.jsx)(e.code,{children:\"inline-block\"}),\", \",(0,o.jsx)(e.code,{children:\"flex\"}),\", or \",(0,o.jsx)(e.code,{children:\"inline-flex\"}),\", \",(0,o.jsx)(e.code,{children:\"grid\"}),\", or \",(0,o.jsx)(e.code,{children:\"inline-grid\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"O valor de \",(0,o.jsx)(e.code,{children:\"float\"}),\" n\\xE3o \\xE9 \",(0,o.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`]}),`\n`,(0,o.jsx)(e.p,{children:\"Em um BFC, a borda externa esquerda de cada caixa toca a borda esquerda do bloco cont\\xEAiner (para formata\\xE7\\xE3o da direita para a esquerda, as bordas direitas se tocam).\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"As margens verticais entre caixas adjacentes de n\\xEDvel de bloco em um BFC colapsam. Leia mais em \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\",children:\"margens de recolhimento\"}),\".\"]})]})}function C(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(s,n)})):s(n)}var S=C;return _(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var b=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),_=(n,e)=>{for(var a in e)d(n,a,{get:e[a],enumerable:!0})},i=(n,e,a,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of u(e))!x.call(n,c)&&c!==a&&d(n,c,{get:()=>e[c],enumerable:!(r=p(e,c))||r.enumerable});return n};var g=(n,e,a)=>(a=n!=null?h(f(n)):{},i(e||!n||!n.__esModule?d(a,\"default\",{value:n,enumerable:!0}):a,n)),v=n=>i(d({},\"__esModule\",{value:!0}),n);var t=b((F,l)=>{l.exports=_jsx_runtime});var S={};_(S,{default:()=>m,frontmatter:()=>C});var o=g(t()),C={title:\"Descrever o contexto de formata\\xE7\\xE3o de bloco (BFC) e como ele funciona.\"};function s(n){let e={a:\"a\",code:\"code\",li:\"li\",p:\"p\",ul:\"ul\",...n.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Um Contexto de Formata\\xE7\\xE3o de Bloco (BFC) \\xE9 parte da renderiza\\xE7\\xE3o visual do CSS em uma p\\xE1gina da web, no qual os blocos s\\xE3o organizados. Elementos flutuantes, posicionados absolutamente, \",(0,o.jsx)(e.code,{children:\"inline-blocks\"}),\", \",(0,o.jsx)(e.code,{children:\"table-cells\"}),\", \",(0,o.jsx)(e.code,{children:\"table-captions\"}),\" e elementos com \",(0,o.jsx)(e.code,{children:\"overflow\"}),\" diferente de \",(0,o.jsx)(e.code,{children:\"visible\"}),\" (exceto quando esse valor foi propagado para a \\xE1rea vis\\xEDvel) estabelecem novos contextos de formata\\xE7\\xE3o de bloco.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Saber estabelecer um contexto de formata\\xE7\\xE3o de blocos \\xE9 importante, porque sem fazer isso, a caixa de conten\\xE7\\xE3o n\\xE3o \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height\",children:\"conter\\xE1 filhos floated\"}),\". Isso \\xE9 semelhante ao colapso das margens, mas mais insidioso, pois voc\\xEA encontrar\\xE1 caixas inteiras colapsando de maneiras estranhas.\"]}),`\n`,(0,o.jsx)(e.p,{children:\"Um BFC \\xE9 uma caixa HTML que atende pelo menos uma das seguintes condi\\xE7\\xF5es:\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"O valor de \",(0,o.jsx)(e.code,{children:\"float\"}),\" n\\xE3o \\xE9 \",(0,o.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"O valor de \",(0,o.jsx)(e.code,{children:\"posi\\xE7\\xE3o\"}),\" n\\xE3o \\xE9 \",(0,o.jsx)(e.code,{children:\"static\"}),\" nem \",(0,o.jsx)(e.code,{children:\"relative\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"O valor de \",(0,o.jsx)(e.code,{children:\"display\"}),\" \\xE9 \",(0,o.jsx)(e.code,{children:\"table-cell\"}),\", \",(0,o.jsx)(e.code,{children:\"table-caption\"}),\", \",(0,o.jsx)(e.code,{children:\"inline-block\"}),\", \",(0,o.jsx)(e.code,{children:\"flex\"}),\", or \",(0,o.jsx)(e.code,{children:\"inline-flex\"}),\", \",(0,o.jsx)(e.code,{children:\"grid\"}),\", or \",(0,o.jsx)(e.code,{children:\"inline-grid\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"O valor de \",(0,o.jsx)(e.code,{children:\"float\"}),\" n\\xE3o \\xE9 \",(0,o.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`]}),`\n`,(0,o.jsx)(e.p,{children:\"Em um BFC, a borda externa esquerda de cada caixa toca a borda esquerda do bloco cont\\xEAiner (para formata\\xE7\\xE3o da direita para a esquerda, as bordas direitas se tocam).\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"As margens verticais entre caixas adjacentes de n\\xEDvel de bloco em um BFC colapsam. Leia mais em \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\",children:\"margens de recolhimento\"}),\".\"]})]})}function m(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(s,{...n})}):s(n)}return v(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/describe-block-formatting-context-bfc-and-how-it-works/zh-CN.json b/apps/web/src/__generated__/questions/quiz/describe-block-formatting-context-bfc-and-how-it-works/zh-CN.json
index 86f866186..008a20ed8 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-block-formatting-context-bfc-and-how-it-works/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-block-formatting-context-bfc-and-how-it-works/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var d=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),C=(c,e)=>{for(var l in e)d(c,l,{get:e[l],enumerable:!0})},r=(c,e,l,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!g.call(c,i)&&i!==l&&d(c,i,{get:()=>e[i],enumerable:!(o=_(e,i))||o.enumerable});return c};var x=(c,e,l)=>(l=c!=null?s(f(c)):{},r(e||!c||!c.__esModule?d(l,\"default\",{value:c,enumerable:!0}):l,c)),b=c=>r(d({},\"__esModule\",{value:!0}),c);var h=m((v,t)=>{t.exports=_jsx_runtime});var S={};C(S,{default:()=>F,frontmatter:()=>u});var n=x(h()),u={title:\"\\u63CF\\u8FF0\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587 (BFC) \\u53CA\\u5176\\u5DE5\\u4F5C\\u539F\\u7406\\u3002\"};function a(c){let e=Object.assign({p:\"p\",code:\"code\",a:\"a\",ul:\"ul\",li:\"li\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587 (BFC) \\u662F\\u7F51\\u9875\\u89C6\\u89C9 CSS \\u6E32\\u67D3\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u5176\\u4E2D\\u4F1A\\u5E03\\u5C40\\u5757\\u7EA7\\u76D2\\u5B50\\u3002\\u6D6E\\u52A8\\u3001\\u7EDD\\u5BF9\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\u3001\",(0,n.jsx)(e.code,{children:\"inline-blocks\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"table-cells\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"table-caption\"}),\" \\u4EE5\\u53CA \",(0,n.jsx)(e.code,{children:\"overflow\"}),\" \\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"visible\"}),\" \\u7684\\u5143\\u7D20\\uFF08\\u9664\\u975E\\u8BE5\\u503C\\u5DF2\\u4F20\\u64AD\\u5230\\u89C6\\u53E3\\uFF09\\u4F1A\\u5EFA\\u7ACB\\u65B0\\u7684\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E86\\u89E3\\u5982\\u4F55\\u5EFA\\u7ACB\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587\\u975E\\u5E38\\u91CD\\u8981\\uFF0C\\u56E0\\u4E3A\\u5982\\u679C\\u4E0D\\u8FD9\\u6837\\u505A\\uFF0C\\u5305\\u542B\\u6846\\u5C06\\u65E0\\u6CD5\",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height\",children:\"\\u5305\\u542B\\u6D6E\\u52A8\\u5B50\\u5143\\u7D20\"}),\"\\u3002\\u8FD9\\u7C7B\\u4F3C\\u4E8E\\u6298\\u53E0\\u5916\\u8FB9\\u8DDD\\uFF0C\\u4F46\\u66F4\\u9690\\u853D\\uFF0C\\u56E0\\u4E3A\\u60A8\\u4F1A\\u53D1\\u73B0\\u6574\\u4E2A\\u76D2\\u5B50\\u4EE5\\u5947\\u602A\\u7684\\u65B9\\u5F0F\\u6298\\u53E0\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"BFC \\u662F\\u6EE1\\u8DB3\\u4EE5\\u4E0B\\u81F3\\u5C11\\u4E00\\u4E2A\\u6761\\u4EF6\\u7684 HTML \\u76D2\\u5B50\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"float\"}),\" \\u7684\\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"none\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"position\"}),\" \\u7684\\u503C\\u65E2\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"static\"}),\" \\u4E5F\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"relative\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"display\"}),\" \\u7684\\u503C\\u4E3A \",(0,n.jsx)(e.code,{children:\"table-cell\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"table-caption\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"inline-block\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"flex\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"inline-flex\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"grid\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"inline-grid\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"overflow\"}),\" \\u7684\\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"visible\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 BFC \\u4E2D\\uFF0C\\u6BCF\\u4E2A\\u76D2\\u5B50\\u7684\\u5DE6\\u5916\\u8FB9\\u7F18\\u90FD\\u4E0E\\u5305\\u542B\\u5757\\u7684\\u5DE6\\u8FB9\\u7F18\\u63A5\\u89E6\\uFF08\\u5BF9\\u4E8E\\u4ECE\\u53F3\\u5230\\u5DE6\\u7684\\u683C\\u5F0F\\uFF0C\\u53F3\\u8FB9\\u7F18\\u63A5\\u89E6\\uFF09\\u3002\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u540C\\u4E00\\u4E2A BFC \\u5185\\u7684\\u76F8\\u90BB\\u5757\\u7EA7\\u76D2\\u5B50\\u4E4B\\u95F4\\u7684\\u5782\\u76F4\\u5916\\u8FB9\\u8DDD\\u53EF\\u4EE5\\u6298\\u53E0\\uFF0C\\u4F46\\u662F BFC \\u963B\\u6B62\\u4E86\\u5B83\\u4E0E\\u5916\\u90E8\\u5143\\u7D20\\u7684\\u8FB9\\u8DDD\\u6298\\u53E0\\u3002 \\u8FDB\\u4E00\\u6B65\\u9605\\u8BFB \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\",children:\"\\u5916\\u8FB9\\u8DDD\\u6298\\u53E0\"}),\"\\u3002\"]})]})}function B(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(a,c)})):a(c)}var F=B;return b(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var _=Object.create;var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var x=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),g=(l,e)=>{for(var c in e)d(l,c,{get:e[c],enumerable:!0})},r=(l,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of f(e))!C.call(l,i)&&i!==c&&d(l,i,{get:()=>e[i],enumerable:!(o=p(e,i))||o.enumerable});return l};var u=(l,e,c)=>(c=l!=null?_(m(l)):{},r(e||!l||!l.__esModule?d(c,\"default\",{value:l,enumerable:!0}):c,l)),b=l=>r(d({},\"__esModule\",{value:!0}),l);var h=x((v,t)=>{t.exports=_jsx_runtime});var F={};g(F,{default:()=>s,frontmatter:()=>B});var n=u(h()),B={title:\"\\u63CF\\u8FF0\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587 (BFC) \\u53CA\\u5176\\u5DE5\\u4F5C\\u539F\\u7406\\u3002\"};function a(l){let e={a:\"a\",code:\"code\",li:\"li\",p:\"p\",ul:\"ul\",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587 (BFC) \\u662F\\u7F51\\u9875\\u89C6\\u89C9 CSS \\u6E32\\u67D3\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u5176\\u4E2D\\u4F1A\\u5E03\\u5C40\\u5757\\u7EA7\\u76D2\\u5B50\\u3002\\u6D6E\\u52A8\\u3001\\u7EDD\\u5BF9\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\u3001\",(0,n.jsx)(e.code,{children:\"inline-blocks\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"table-cells\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"table-caption\"}),\" \\u4EE5\\u53CA \",(0,n.jsx)(e.code,{children:\"overflow\"}),\" \\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"visible\"}),\" \\u7684\\u5143\\u7D20\\uFF08\\u9664\\u975E\\u8BE5\\u503C\\u5DF2\\u4F20\\u64AD\\u5230\\u89C6\\u53E3\\uFF09\\u4F1A\\u5EFA\\u7ACB\\u65B0\\u7684\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E86\\u89E3\\u5982\\u4F55\\u5EFA\\u7ACB\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587\\u975E\\u5E38\\u91CD\\u8981\\uFF0C\\u56E0\\u4E3A\\u5982\\u679C\\u4E0D\\u8FD9\\u6837\\u505A\\uFF0C\\u5305\\u542B\\u6846\\u5C06\\u65E0\\u6CD5\",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height\",children:\"\\u5305\\u542B\\u6D6E\\u52A8\\u5B50\\u5143\\u7D20\"}),\"\\u3002\\u8FD9\\u7C7B\\u4F3C\\u4E8E\\u6298\\u53E0\\u5916\\u8FB9\\u8DDD\\uFF0C\\u4F46\\u66F4\\u9690\\u853D\\uFF0C\\u56E0\\u4E3A\\u60A8\\u4F1A\\u53D1\\u73B0\\u6574\\u4E2A\\u76D2\\u5B50\\u4EE5\\u5947\\u602A\\u7684\\u65B9\\u5F0F\\u6298\\u53E0\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"BFC \\u662F\\u6EE1\\u8DB3\\u4EE5\\u4E0B\\u81F3\\u5C11\\u4E00\\u4E2A\\u6761\\u4EF6\\u7684 HTML \\u76D2\\u5B50\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"float\"}),\" \\u7684\\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"none\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"position\"}),\" \\u7684\\u503C\\u65E2\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"static\"}),\" \\u4E5F\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"relative\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"display\"}),\" \\u7684\\u503C\\u4E3A \",(0,n.jsx)(e.code,{children:\"table-cell\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"table-caption\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"inline-block\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"flex\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"inline-flex\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"grid\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"inline-grid\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"overflow\"}),\" \\u7684\\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"visible\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 BFC \\u4E2D\\uFF0C\\u6BCF\\u4E2A\\u76D2\\u5B50\\u7684\\u5DE6\\u5916\\u8FB9\\u7F18\\u90FD\\u4E0E\\u5305\\u542B\\u5757\\u7684\\u5DE6\\u8FB9\\u7F18\\u63A5\\u89E6\\uFF08\\u5BF9\\u4E8E\\u4ECE\\u53F3\\u5230\\u5DE6\\u7684\\u683C\\u5F0F\\uFF0C\\u53F3\\u8FB9\\u7F18\\u63A5\\u89E6\\uFF09\\u3002\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u540C\\u4E00\\u4E2A BFC \\u5185\\u7684\\u76F8\\u90BB\\u5757\\u7EA7\\u76D2\\u5B50\\u4E4B\\u95F4\\u7684\\u5782\\u76F4\\u5916\\u8FB9\\u8DDD\\u53EF\\u4EE5\\u6298\\u53E0\\uFF0C\\u4F46\\u662F BFC \\u963B\\u6B62\\u4E86\\u5B83\\u4E0E\\u5916\\u90E8\\u5143\\u7D20\\u7684\\u8FB9\\u8DDD\\u6298\\u53E0\\u3002 \\u8FDB\\u4E00\\u6B65\\u9605\\u8BFB \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\",children:\"\\u5916\\u8FB9\\u8DDD\\u6298\\u53E0\"}),\"\\u3002\"]})]})}function s(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(a,{...l})}):a(l)}return b(F);})();\n;return Component;"
 }
\ No newline at end of file
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 dcdbb0d33..27decc55a 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-event-bubbling/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var i in e)o(t,i,{get:e[i],enumerable:!0})},r=(t,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of g(e))!m.call(t,l)&&l!==i&&o(t,l,{get:()=>e[l],enumerable:!(c=u(e,l))||c.enumerable});return t};var f=(t,e,i)=>(i=t!=null?s(p(t)):{},r(e||!t||!t.__esModule?o(i,\"default\",{value:t,enumerable:!0}):i,t)),y=t=>r(o({},\"__esModule\",{value:!0}),t);var d=b((D,a)=>{a.exports=_jsx_runtime});var B={};v(B,{default:()=>E,frontmatter:()=>w});var n=f(d()),w={title:\"Describe event bubbling in JavaScript and browsers\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",strong:\"strong\",a:\"a\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",h3:\"h3\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Event bubbling is a DOM event propagation mechanism where an event (e.g. a click), starts at the target element and bubbles up to the root of the document. This allows ancestor elements to also respond to the event.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Event bubbling is essential for event delegation, where a single event handler manages events for multiple child elements, enhancing performance and code simplicity. While convenient, failing to manage event propagation properly can lead to unintended behavior, such as multiple handlers firing for a single event.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is event bubbling?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Event bubbling is a propagation mechanism in the DOM (Document Object Model) where an event, such as a click or a keyboard event, is first triggered on the target element that initiated the event and then propagates upward (bubbles) through the DOM tree to the root of the document.\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note\"}),\": even before the event bubbling phase happens is the \",(0,n.jsx)(e.a,{href:\"/questions/quiz/describe-event-capturing\",children:\"event capturing\"}),\" phase which is the opposite of bubbling where the event goes down from the document root to the target element.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Bubbling phase\"}),`\n`,(0,n.jsx)(e.p,{children:\"During the bubbling phase, the event starts at the target element and bubbles up through its ancestors in the DOM hierarchy. This means that the event handlers attached to the target element and its ancestors can all potentially receive and respond to the event.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here's an example using modern ES6 syntax to demonstrate event bubbling:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"parent\">\n//   <button id=\"child\">Click me!</button>\n// </div>\nconst parentDiv = document.createElement('div');\nparentDiv.id = 'parent';\nconst button = document.createElement('button');\nbutton.id = 'child';\nparentDiv.appendChild(button);\ndocument.body.appendChild(parentDiv);\n\nconst parent = document.getElementById('parent');\nconst child = document.getElementById('child');\n\nparent.addEventListener('click', () => {\n  console.log('Parent element clicked');\n});\n\nchild.addEventListener('click', () => {\n  console.log('Child element clicked');\n});\n\n// Simulate clicking the button:\nchild.click();\n`})}),`\n`,(0,n.jsx)(e.p,{children:'When you click the \"Click me!\" button, both the child and parent event handlers will be triggered due to the event bubbling.'}),`\n`,(0,n.jsx)(e.h2,{children:\"Stopping the bubbling\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Event bubbling can be stopped during the bubbling phase using the \",(0,n.jsx)(e.code,{children:\"stopPropagation()\"}),\" method. If an event handler calls \",(0,n.jsx)(e.code,{children:\"stopPropagation()\"}),\", it prevents the event from further bubbling up the DOM tree, ensuring that only the handlers of the elements up to that point in the hierarchy are executed.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"parent\">\n//   <button id=\"child\">Click me!</button>\n// </div>\nconst parentDiv = document.createElement('div');\nparentDiv.id = 'parent';\nconst button = document.createElement('button');\nbutton.id = 'child';\nparentDiv.appendChild(button);\ndocument.body.appendChild(parentDiv);\n\nconst parent = document.getElementById('parent');\nconst child = document.getElementById('child');\n\nparent.addEventListener('click', () => {\n  console.log('Parent element clicked');\n});\n\nchild.addEventListener('click', (event) => {\n  console.log('Child element clicked');\n  event.stopPropagation(); // Stops propagation to parent\n});\n\n// Simulate clicking the button:\nchild.click();\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Event delegation\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Event bubbling is the basis for a technique called \",(0,n.jsx)(e.a,{href:\"/questions/quiz/explain-event-delegation\",children:\"event delegation\"}),\", where you attach a single event handler to a common ancestor of multiple elements and use event delegation to handle events for those elements efficiently. This is particularly useful when you have a large number of similar elements, like a list of items, and you want to avoid attaching individual event handlers to each item.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`parent.addEventListener('click', (event) => {\n  if (event.target && event.target.id === 'child') {\n    console.log('Child element clicked');\n  }\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Benefits\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Cleaner code:\"}),\" Reduced number of event listeners improves code readability and maintainability.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Efficient event handling:\"}),\" Minimizes performance overhead by attaching fewer listeners.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Flexibility:\"}),\" Allows handling events happening on child elements without directly attaching listeners to them.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Pitfalls\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Accidental event handling:\"}),\" Be mindful that parent elements might unintentionally capture events meant for children. Use \",(0,n.jsx)(e.code,{children:\"event.target\"}),\" to identify the specific element that triggered the event.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Event order:\"}),\" Events bubble up in a specific order. If multiple parents have event listeners, their order of execution depends on the DOM hierarchy.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Over-delegation:\"}),\" While delegating events to a common ancestor is efficient, attaching a listener too high in the DOM tree might capture unintended events.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Use cases\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here are some practical ways to use event bubbling to write better code.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Reducing code with event delegation\"}),`\n`,(0,n.jsx)(e.p,{children:'Imagine you have a product list with numerous items, each with a \"Buy Now\" button. Traditionally, you might attach a separate click event listener to each button:'}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <ul id=\"product-list\">\n//   <li><button id=\"item1-buy\">Buy Now</button></li>\n//   <li><button id=\"item2-buy\">Buy Now</button></li>\n// </ul>\n\nconst item1Buy = document.getElementById('item1-buy');\nconst item2Buy = document.getElementById('item2-buy');\n\nitem1Buy.addEventListener('click', handleBuyClick);\nitem2Buy.addEventListener('click', handleBuyClick);\n\n// ... repeat for each item ...\n\nfunction handleBuyClick(event) {\n  console.log('Buy button clicked for item:', event.target.id);\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"This approach becomes cumbersome as the number of items grows. Here's how event bubbling can simplify things:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <ul id=\"product-list\">\n//   <li><button id=\"item1-buy\">Buy Now</button></li>\n//   <li><button id=\"item2-buy\">Buy Now</button></li>\n// </ul>\n\nconst productList = document.getElementById('product-list');\n\nproductList.addEventListener('click', handleBuyClick);\n\nfunction handleBuyClick(event) {\n  // Check if the clicked element is a button within the list\n  if (event.target.tagName.toLowerCase() === 'button') {\n    console.log('Buy button clicked for item:', event.target.textContent);\n  }\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"By attaching the listener to the parent (\",(0,n.jsx)(e.code,{children:\"productList\"}),\") and checking the clicked element (\",(0,n.jsx)(e.code,{children:\"event.target\"}),\") within the handler, you achieve the same functionality with less code. This approach scales well when the items are dynamic as no new event handlers have to be added or removed when the list of items change.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Dropdown menus\"}),`\n`,(0,n.jsx)(e.p,{children:\"Consider a dropdown menu where clicking anywhere on the menu element (parent) should close it. With event bubbling, you can achieve this with a single listener:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"dropdown\">\n//   <button>Open Menu</button>\n//   <ul>\n//     <li>Item 1</li>\n//     <li>Item 2</li>\n//   </ul>\n// </div>\n\nconst dropdown = document.getElementById('dropdown');\n\ndropdown.addEventListener('click', handleDropdownClick);\n\nfunction handleDropdownClick(event) {\n  // Close the dropdown if clicked outside the button\n  if (event.target !== dropdown.querySelector('button')) {\n    console.log('Dropdown closed');\n    // Your logic to hide the dropdown content\n  }\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here, the click event bubbles up from the clicked element (button or list item) to the \",(0,n.jsx)(e.code,{children:\"dropdown\"}),\" element. The handler checks if the clicked element is not the \",(0,n.jsx)(e.code,{children:\"<button>\"}),\" and closes the menu accordingly.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Accordion menus\"}),`\n`,(0,n.jsx)(e.p,{children:\"Imagine an accordion menu where clicking a section header (parent) expands or collapses the content section (child) below it. Event bubbling makes this straightforward:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <div class=\"accordion\">\n//   <div class=\"header\">Section 1</div>\n//   <div class=\"content\">Content for Section 1</div>\n//   <div class=\"header\">Section 2</div>\n//   <div class=\"content\">Content for Section 2</div>\n// </div>\n\nconst accordion = document.querySelector('.accordion');\n\naccordion.addEventListener('click', handleAccordionClick);\n\nfunction handleAccordionClick(event) {\n  // Check if clicked element is a header\n  if (event.target.classList.contains('header')) {\n    const content = event.target.nextElementSibling;\n    content.classList.toggle('active'); // Toggle display of content\n  }\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"By attaching the listener to the \",(0,n.jsx)(e.code,{children:\"accordion\"}),\" element, clicking on any header triggers the event. The handler checks if the clicked element is a header and toggles the visibility of the corresponding content section.\"]}),`\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/Learn/JavaScript/Building_blocks/Events#event_bubbling\",children:\"MDN Web Docs on Event Bubbling\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/bubbling-and-capturing\",children:\"JavaScript.info - Bubbling and Capturing\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3.org/TR/DOM-Level-3-Events/#event-flow\",children:\"W3C DOM Level 3 Events Specification\"})}),`\n`]})]})}function k(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var E=k;return y(B);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var v=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var i in e)o(t,i,{get:e[i],enumerable:!0})},r=(t,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of g(e))!b.call(t,l)&&l!==i&&o(t,l,{get:()=>e[l],enumerable:!(c=p(e,l))||c.enumerable});return t};var y=(t,e,i)=>(i=t!=null?u(m(t)):{},r(e||!t||!t.__esModule?o(i,\"default\",{value:t,enumerable:!0}):i,t)),w=t=>r(o({},\"__esModule\",{value:!0}),t);var d=v((C,a)=>{a.exports=_jsx_runtime});var E={};f(E,{default:()=>s,frontmatter:()=>k});var n=y(d()),k={title:\"Describe event bubbling in JavaScript and browsers\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Event bubbling is a DOM event propagation mechanism where an event (e.g. a click), starts at the target element and bubbles up to the root of the document. This allows ancestor elements to also respond to the event.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Event bubbling is essential for event delegation, where a single event handler manages events for multiple child elements, enhancing performance and code simplicity. While convenient, failing to manage event propagation properly can lead to unintended behavior, such as multiple handlers firing for a single event.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is event bubbling?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Event bubbling is a propagation mechanism in the DOM (Document Object Model) where an event, such as a click or a keyboard event, is first triggered on the target element that initiated the event and then propagates upward (bubbles) through the DOM tree to the root of the document.\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note\"}),\": even before the event bubbling phase happens is the \",(0,n.jsx)(e.a,{href:\"/questions/quiz/describe-event-capturing\",children:\"event capturing\"}),\" phase which is the opposite of bubbling where the event goes down from the document root to the target element.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Bubbling phase\"}),`\n`,(0,n.jsx)(e.p,{children:\"During the bubbling phase, the event starts at the target element and bubbles up through its ancestors in the DOM hierarchy. This means that the event handlers attached to the target element and its ancestors can all potentially receive and respond to the event.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here's an example using modern ES6 syntax to demonstrate event bubbling:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"parent\">\n//   <button id=\"child\">Click me!</button>\n// </div>\nconst parentDiv = document.createElement('div');\nparentDiv.id = 'parent';\nconst button = document.createElement('button');\nbutton.id = 'child';\nparentDiv.appendChild(button);\ndocument.body.appendChild(parentDiv);\n\nconst parent = document.getElementById('parent');\nconst child = document.getElementById('child');\n\nparent.addEventListener('click', () => {\n  console.log('Parent element clicked');\n});\n\nchild.addEventListener('click', () => {\n  console.log('Child element clicked');\n});\n\n// Simulate clicking the button:\nchild.click();\n`})}),`\n`,(0,n.jsx)(e.p,{children:'When you click the \"Click me!\" button, both the child and parent event handlers will be triggered due to the event bubbling.'}),`\n`,(0,n.jsx)(e.h2,{children:\"Stopping the bubbling\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Event bubbling can be stopped during the bubbling phase using the \",(0,n.jsx)(e.code,{children:\"stopPropagation()\"}),\" method. If an event handler calls \",(0,n.jsx)(e.code,{children:\"stopPropagation()\"}),\", it prevents the event from further bubbling up the DOM tree, ensuring that only the handlers of the elements up to that point in the hierarchy are executed.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"parent\">\n//   <button id=\"child\">Click me!</button>\n// </div>\nconst parentDiv = document.createElement('div');\nparentDiv.id = 'parent';\nconst button = document.createElement('button');\nbutton.id = 'child';\nparentDiv.appendChild(button);\ndocument.body.appendChild(parentDiv);\n\nconst parent = document.getElementById('parent');\nconst child = document.getElementById('child');\n\nparent.addEventListener('click', () => {\n  console.log('Parent element clicked');\n});\n\nchild.addEventListener('click', (event) => {\n  console.log('Child element clicked');\n  event.stopPropagation(); // Stops propagation to parent\n});\n\n// Simulate clicking the button:\nchild.click();\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Event delegation\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Event bubbling is the basis for a technique called \",(0,n.jsx)(e.a,{href:\"/questions/quiz/explain-event-delegation\",children:\"event delegation\"}),\", where you attach a single event handler to a common ancestor of multiple elements and use event delegation to handle events for those elements efficiently. This is particularly useful when you have a large number of similar elements, like a list of items, and you want to avoid attaching individual event handlers to each item.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`parent.addEventListener('click', (event) => {\n  if (event.target && event.target.id === 'child') {\n    console.log('Child element clicked');\n  }\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Benefits\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Cleaner code:\"}),\" Reduced number of event listeners improves code readability and maintainability.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Efficient event handling:\"}),\" Minimizes performance overhead by attaching fewer listeners.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Flexibility:\"}),\" Allows handling events happening on child elements without directly attaching listeners to them.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Pitfalls\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Accidental event handling:\"}),\" Be mindful that parent elements might unintentionally capture events meant for children. Use \",(0,n.jsx)(e.code,{children:\"event.target\"}),\" to identify the specific element that triggered the event.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Event order:\"}),\" Events bubble up in a specific order. If multiple parents have event listeners, their order of execution depends on the DOM hierarchy.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Over-delegation:\"}),\" While delegating events to a common ancestor is efficient, attaching a listener too high in the DOM tree might capture unintended events.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Use cases\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here are some practical ways to use event bubbling to write better code.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Reducing code with event delegation\"}),`\n`,(0,n.jsx)(e.p,{children:'Imagine you have a product list with numerous items, each with a \"Buy Now\" button. Traditionally, you might attach a separate click event listener to each button:'}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <ul id=\"product-list\">\n//   <li><button id=\"item1-buy\">Buy Now</button></li>\n//   <li><button id=\"item2-buy\">Buy Now</button></li>\n// </ul>\n\nconst item1Buy = document.getElementById('item1-buy');\nconst item2Buy = document.getElementById('item2-buy');\n\nitem1Buy.addEventListener('click', handleBuyClick);\nitem2Buy.addEventListener('click', handleBuyClick);\n\n// ... repeat for each item ...\n\nfunction handleBuyClick(event) {\n  console.log('Buy button clicked for item:', event.target.id);\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"This approach becomes cumbersome as the number of items grows. Here's how event bubbling can simplify things:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <ul id=\"product-list\">\n//   <li><button id=\"item1-buy\">Buy Now</button></li>\n//   <li><button id=\"item2-buy\">Buy Now</button></li>\n// </ul>\n\nconst productList = document.getElementById('product-list');\n\nproductList.addEventListener('click', handleBuyClick);\n\nfunction handleBuyClick(event) {\n  // Check if the clicked element is a button within the list\n  if (event.target.tagName.toLowerCase() === 'button') {\n    console.log('Buy button clicked for item:', event.target.id);\n  }\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"By attaching the listener to the parent (\",(0,n.jsx)(e.code,{children:\"productList\"}),\") and checking the clicked element (\",(0,n.jsx)(e.code,{children:\"event.target\"}),\") within the handler, you achieve the same functionality with less code. This approach scales well when the items are dynamic as no new event handlers have to be added or removed when the list of items change.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Dropdown menus\"}),`\n`,(0,n.jsx)(e.p,{children:\"Consider a dropdown menu where clicking anywhere on the menu element (parent) should close it. With event bubbling, you can achieve this with a single listener:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"dropdown\">\n//   <button>Open Menu</button>\n//   <ul>\n//     <li>Item 1</li>\n//     <li>Item 2</li>\n//   </ul>\n// </div>\n\nconst dropdown = document.getElementById('dropdown');\n\ndropdown.addEventListener('click', handleDropdownClick);\n\nfunction handleDropdownClick(event) {\n  // Close the dropdown if clicked outside the button\n  if (event.target !== dropdown.querySelector('button')) {\n    console.log('Dropdown closed');\n    // Your logic to hide the dropdown content\n  }\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here, the click event bubbles up from the clicked element (button or list item) to the \",(0,n.jsx)(e.code,{children:\"dropdown\"}),\" element. The handler checks if the clicked element is not the \",(0,n.jsx)(e.code,{children:\"<button>\"}),\" and closes the menu accordingly.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Accordion menus\"}),`\n`,(0,n.jsx)(e.p,{children:\"Imagine an accordion menu where clicking a section header (parent) expands or collapses the content section (child) below it. Event bubbling makes this straightforward:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <div class=\"accordion\">\n//   <div class=\"header\">Section 1</div>\n//   <div class=\"content\">Content for Section 1</div>\n//   <div class=\"header\">Section 2</div>\n//   <div class=\"content\">Content for Section 2</div>\n// </div>\n\nconst accordion = document.querySelector('.accordion');\n\naccordion.addEventListener('click', handleAccordionClick);\n\nfunction handleAccordionClick(event) {\n  // Check if clicked element is a header\n  if (event.target.classList.contains('header')) {\n    const content = event.target.nextElementSibling;\n    content.classList.toggle('active'); // Toggle display of content\n  }\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"By attaching the listener to the \",(0,n.jsx)(e.code,{children:\"accordion\"}),\" element, clicking on any header triggers the event. The handler checks if the clicked element is a header and toggles the visibility of the corresponding content section.\"]}),`\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/Learn/JavaScript/Building_blocks/Events#event_bubbling\",children:\"MDN Web Docs on Event Bubbling\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/bubbling-and-capturing\",children:\"JavaScript.info - Bubbling and Capturing\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3.org/TR/DOM-Level-3-Events/#event-flow\",children:\"W3C DOM Level 3 Events Specification\"})}),`\n`]})]})}function s(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return w(E);})();\n;return Component;"
 }
\ No newline at end of file
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 823800fdd..12acc4950 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-event-bubbling/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var a in e)i(n,a,{get:e[a],enumerable:!0})},s=(n,e,a,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of u(e))!v.call(n,t)&&t!==a&&i(n,t,{get:()=>e[t],enumerable:!(d=m(e,t))||d.enumerable});return n};var b=(n,e,a)=>(a=n!=null?p(h(n)):{},s(e||!n||!n.__esModule?i(a,\"default\",{value:n,enumerable:!0}):a,n)),q=n=>s(i({},\"__esModule\",{value:!0}),n);var l=g((O,r)=>{r.exports=_jsx_runtime});var M={};f(M,{default:()=>j,frontmatter:()=>D});var o=b(l()),D={title:\"Descreva a propaga\\xE7\\xE3o de eventos\"};function c(n){let e=Object.assign({p:\"p\",h2:\"h2\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.p,{children:\"A propaga\\xE7\\xE3o de eventos \\xE9 um mecanismo na DOM (Modelo de Objetos do Documento) em que um evento, como um clique ou um evento de teclado, \\xE9 primeiro acionado no elemento de destino que iniciou o evento e, em seguida, se propaga para cima (bolhas) pela \\xE1rvore da DOM at\\xE9 a raiz do documento.\"}),`\n`,(0,o.jsx)(e.h2,{children:\"Fase de bolha\"}),`\n`,(0,o.jsx)(e.p,{children:\"Durante a fase de bolha, o evento come\\xE7a no elemento de destino e se propaga pelos seus ancestrais na hierarquia da DOM. Isso significa que os manipuladores de eventos associados ao elemento de destino e aos seus ancestrais podem potencialmente receber e responder ao evento.\"}),`\n`,(0,o.jsx)(e.p,{children:\"Aqui est\\xE1 um exemplo usando a sintaxe moderna do ES6 para demonstrar a propaga\\xE7\\xE3o de eventos:\"}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"pai\">\n//   <button id=\"filho\">Clique em mim!</button>\n// </div>\n\nconst pai = document.getElementById('pai');\nconst filho = document.getElementById('filho');\n\npai.addEventListener('click', () => {\n  console.log('Cliquei no elemento pai');\n});\n\nfilho.addEventListener('click', () => {\n  console.log('Cliquei no elemento filho');\n});\n`})}),`\n`,(0,o.jsx)(e.p,{children:'Quando voc\\xEA clica no bot\\xE3o \"Clique em mim!\", devido \\xE0 propaga\\xE7\\xE3o de eventos, os manipuladores de eventos do filho e do pai ser\\xE3o acionados.'}),`\n`,(0,o.jsx)(e.h2,{children:\"Parando a propaga\\xE7\\xE3o\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"A propaga\\xE7\\xE3o de eventos pode ser interrompida durante a fase de bolha usando o m\\xE9todo \",(0,o.jsx)(e.code,{children:\"stopPropagation()\"}),\". Se um manipulador de eventos chamar \",(0,o.jsx)(e.code,{children:\"stopPropagation()\"}),\", ele impedir\\xE1 que o evento continue a se propagar pela \\xE1rvore da DOM, garantindo que apenas os manipuladores dos elementos at\\xE9 aquele ponto na hierarquia sejam executados.\"]}),`\n`,(0,o.jsx)(e.h2,{children:\"Delega\\xE7\\xE3o de eventos\"}),`\n`,(0,o.jsx)(e.p,{children:'A propaga\\xE7\\xE3o de eventos \\xE9 a base para uma t\\xE9cnica chamada \"delega\\xE7\\xE3o de eventos\", onde voc\\xEA anexa um \\xFAnico manipulador de eventos a um ancestral comum de v\\xE1rios elementos e usa a delega\\xE7\\xE3o de eventos para lidar eficientemente com os eventos desses elementos. Isso \\xE9 particularmente \\xFAtil quando voc\\xEA tem um grande n\\xFAmero de elementos semelhantes, como uma lista de itens, e deseja evitar a adi\\xE7\\xE3o de manipuladores de eventos individuais a cada item.'}),`\n`,(0,o.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/pt-BR/docs/Web/API/Event/stopPropagation\",children:\"MDN Web Docs sobre Propaga\\xE7\\xE3o de Eventos\"})}),`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://javascript.info/bubbling-and-capturing\",children:\"JavaScript.info - Bolhas e Captura\"})}),`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://www.w3.org/TR/DOM-Level-3-Events/#event-flow\",children:\"Especifica\\xE7\\xE3o de Eventos do W3C DOM N\\xEDvel 3\"})}),`\n`]})]})}function x(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(c,n)})):c(n)}var j=x;return q(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var a in e)i(n,a,{get:e[a],enumerable:!0})},s=(n,e,a,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of h(e))!g.call(n,t)&&t!==a&&i(n,t,{get:()=>e[t],enumerable:!(d=u(e,t))||d.enumerable});return n};var q=(n,e,a)=>(a=n!=null?m(v(n)):{},s(e||!n||!n.__esModule?i(a,\"default\",{value:n,enumerable:!0}):a,n)),D=n=>s(i({},\"__esModule\",{value:!0}),n);var l=f((E,r)=>{r.exports=_jsx_runtime});var M={};b(M,{default:()=>p,frontmatter:()=>x});var o=q(l()),x={title:\"Descreva a propaga\\xE7\\xE3o de eventos\"};function c(n){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.p,{children:\"A propaga\\xE7\\xE3o de eventos \\xE9 um mecanismo na DOM (Modelo de Objetos do Documento) em que um evento, como um clique ou um evento de teclado, \\xE9 primeiro acionado no elemento de destino que iniciou o evento e, em seguida, se propaga para cima (bolhas) pela \\xE1rvore da DOM at\\xE9 a raiz do documento.\"}),`\n`,(0,o.jsx)(e.h2,{children:\"Fase de bolha\"}),`\n`,(0,o.jsx)(e.p,{children:\"Durante a fase de bolha, o evento come\\xE7a no elemento de destino e se propaga pelos seus ancestrais na hierarquia da DOM. Isso significa que os manipuladores de eventos associados ao elemento de destino e aos seus ancestrais podem potencialmente receber e responder ao evento.\"}),`\n`,(0,o.jsx)(e.p,{children:\"Aqui est\\xE1 um exemplo usando a sintaxe moderna do ES6 para demonstrar a propaga\\xE7\\xE3o de eventos:\"}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"pai\">\n//   <button id=\"filho\">Clique em mim!</button>\n// </div>\n\nconst pai = document.getElementById('pai');\nconst filho = document.getElementById('filho');\n\npai.addEventListener('click', () => {\n  console.log('Cliquei no elemento pai');\n});\n\nfilho.addEventListener('click', () => {\n  console.log('Cliquei no elemento filho');\n});\n`})}),`\n`,(0,o.jsx)(e.p,{children:'Quando voc\\xEA clica no bot\\xE3o \"Clique em mim!\", devido \\xE0 propaga\\xE7\\xE3o de eventos, os manipuladores de eventos do filho e do pai ser\\xE3o acionados.'}),`\n`,(0,o.jsx)(e.h2,{children:\"Parando a propaga\\xE7\\xE3o\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"A propaga\\xE7\\xE3o de eventos pode ser interrompida durante a fase de bolha usando o m\\xE9todo \",(0,o.jsx)(e.code,{children:\"stopPropagation()\"}),\". Se um manipulador de eventos chamar \",(0,o.jsx)(e.code,{children:\"stopPropagation()\"}),\", ele impedir\\xE1 que o evento continue a se propagar pela \\xE1rvore da DOM, garantindo que apenas os manipuladores dos elementos at\\xE9 aquele ponto na hierarquia sejam executados.\"]}),`\n`,(0,o.jsx)(e.h2,{children:\"Delega\\xE7\\xE3o de eventos\"}),`\n`,(0,o.jsx)(e.p,{children:'A propaga\\xE7\\xE3o de eventos \\xE9 a base para uma t\\xE9cnica chamada \"delega\\xE7\\xE3o de eventos\", onde voc\\xEA anexa um \\xFAnico manipulador de eventos a um ancestral comum de v\\xE1rios elementos e usa a delega\\xE7\\xE3o de eventos para lidar eficientemente com os eventos desses elementos. Isso \\xE9 particularmente \\xFAtil quando voc\\xEA tem um grande n\\xFAmero de elementos semelhantes, como uma lista de itens, e deseja evitar a adi\\xE7\\xE3o de manipuladores de eventos individuais a cada item.'}),`\n`,(0,o.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/pt-BR/docs/Web/API/Event/stopPropagation\",children:\"MDN Web Docs sobre Propaga\\xE7\\xE3o de Eventos\"})}),`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://javascript.info/bubbling-and-capturing\",children:\"JavaScript.info - Bolhas e Captura\"})}),`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://www.w3.org/TR/DOM-Level-3-Events/#event-flow\",children:\"Especifica\\xE7\\xE3o de Eventos do W3C DOM N\\xEDvel 3\"})}),`\n`]})]})}function p(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(c,{...n})}):c(n)}return D(M);})();\n;return Component;"
 }
\ No newline at end of file
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 b2a4e01a4..a00072147 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-event-bubbling/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var m=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),b=(t,n)=>{for(var i in n)l(t,i,{get:n[i],enumerable:!0})},r=(t,n,i,d)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of p(n))!v.call(t,c)&&c!==i&&l(t,c,{get:()=>n[c],enumerable:!(d=u(n,c))||d.enumerable});return t};var k=(t,n,i)=>(i=t!=null?s(g(t)):{},r(n||!t||!t.__esModule?l(i,\"default\",{value:t,enumerable:!0}):i,t)),y=t=>r(l({},\"__esModule\",{value:!0}),t);var a=m((B,o)=>{o.exports=_jsx_runtime});var D={};b(D,{default:()=>C,frontmatter:()=>E});var e=k(a()),E={title:\"\\u63CF\\u8FF0 JavaScript \\u548C\\u6D4F\\u89C8\\u5668\\u7684\\u4E8B\\u4EF6\\u5192\\u6CE1\"};function h(t){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",strong:\"strong\",a:\"a\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",h3:\"h3\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E8B\\u4EF6\\u5192\\u6CE1\\u662F\\u4E00\\u79CD DOM \\u4E8B\\u4EF6\\u4F20\\u64AD\\u673A\\u5236\\uFF0C\\u5176\\u4E2D\\u4E00\\u4E2A\\u4E8B\\u4EF6\\uFF08\\u4F8B\\u5982\\u70B9\\u51FB\\uFF09\\u4ECE\\u76EE\\u6807\\u5143\\u7D20\\u5F00\\u59CB\\uFF0C\\u5192\\u6CE1\\u5230\\u6587\\u6863\\u7684\\u6839\\u3002\\u8FD9\\u5141\\u8BB8\\u7956\\u5148\\u5143\\u7D20\\u4E5F\\u54CD\\u5E94\\u4E8B\\u4EF6\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E8B\\u4EF6\\u5192\\u6CE1\\u5BF9\\u4E8E\\u4E8B\\u4EF6\\u59D4\\u6258\\u81F3\\u5173\\u91CD\\u8981\\uFF0C\\u5176\\u4E2D\\u5355\\u4E2A\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u7BA1\\u7406\\u591A\\u4E2A\\u5B50\\u5143\\u7D20\\u7684\\u4E8B\\u4EF6\\uFF0C\\u4ECE\\u800C\\u63D0\\u9AD8\\u6027\\u80FD\\u548C\\u4EE3\\u7801\\u7B80\\u6D01\\u6027\\u3002\\u867D\\u7136\\u65B9\\u4FBF\\uFF0C\\u4F46\\u672A\\u80FD\\u6B63\\u786E\\u7BA1\\u7406\\u4E8B\\u4EF6\\u4F20\\u64AD\\u53EF\\u80FD\\u5BFC\\u81F4\\u610F\\u5916\\u884C\\u4E3A\\uFF0C\\u4F8B\\u5982\\u591A\\u4E2A\\u5904\\u7406\\u7A0B\\u5E8F\\u4E3A\\u5355\\u4E2A\\u4E8B\\u4EF6\\u89E6\\u53D1\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u4E8B\\u4EF6\\u5192\\u6CE1\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E8B\\u4EF6\\u5192\\u6CE1\\u662F DOM\\uFF08\\u6587\\u6863\\u5BF9\\u8C61\\u6A21\\u578B\\uFF09\\u4E2D\\u7684\\u4E00\\u79CD\\u4F20\\u64AD\\u673A\\u5236\\uFF0C\\u5176\\u4E2D\\u4E00\\u4E2A\\u4E8B\\u4EF6\\uFF08\\u4F8B\\u5982\\u70B9\\u51FB\\u6216\\u952E\\u76D8\\u4E8B\\u4EF6\\uFF09\\u9996\\u5148\\u5728\\u89E6\\u53D1\\u4E8B\\u4EF6\\u7684\\u76EE\\u6807\\u5143\\u7D20\\u4E0A\\u89E6\\u53D1\\uFF0C\\u7136\\u540E\\u5411\\u4E0A\\uFF08\\u5192\\u6CE1\\uFF09\\u901A\\u8FC7 DOM \\u6811\\u4F20\\u64AD\\u5230\\u6587\\u6863\\u7684\\u6839\\u3002\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u6CE8\\u610F\"}),\"\\uFF1A\\u751A\\u81F3\\u5728\\u4E8B\\u4EF6\\u5192\\u6CE1\\u9636\\u6BB5\\u53D1\\u751F\\u4E4B\\u524D\\u662F \",(0,e.jsx)(n.a,{href:\"/questions/quiz/describe-event-capturing\",children:\"\\u4E8B\\u4EF6\\u6355\\u83B7\"}),\" \\u9636\\u6BB5\\uFF0C\\u8BE5\\u9636\\u6BB5\\u4E0E\\u5192\\u6CE1\\u76F8\\u53CD\\uFF0C\\u4E8B\\u4EF6\\u4ECE\\u6587\\u6863\\u6839\\u5411\\u4E0B\\u5230\\u76EE\\u6807\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5192\\u6CE1\\u9636\\u6BB5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u5192\\u6CE1\\u9636\\u6BB5\\uFF0C\\u4E8B\\u4EF6\\u4ECE\\u76EE\\u6807\\u5143\\u7D20\\u5F00\\u59CB\\uFF0C\\u901A\\u8FC7\\u5176\\u5728 DOM \\u5C42\\u6B21\\u7ED3\\u6784\\u4E2D\\u7684\\u7956\\u5148\\u5143\\u7D20\\u5192\\u6CE1\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u9644\\u52A0\\u5230\\u76EE\\u6807\\u5143\\u7D20\\u53CA\\u5176\\u7956\\u5148\\u7684\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u90FD\\u53EF\\u80FD\\u63A5\\u6536\\u5E76\\u54CD\\u5E94\\u4E8B\\u4EF6\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u91CC\\u6709\\u4E00\\u4E2A\\u4F7F\\u7528\\u73B0\\u4EE3 ES6 \\u8BED\\u6CD5\\u7684\\u793A\\u4F8B\\uFF0C\\u7528\\u4E8E\\u6F14\\u793A\\u4E8B\\u4EF6\\u5192\\u6CE1\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"parent\">\n//   <button id=\"child\">Click me!</button>\n// </div>\nconst parentDiv = document.createElement('div');\nparentDiv.id = 'parent';\nconst button = document.createElement('button');\nbutton.id = 'child';\nparentDiv.appendChild(button);\ndocument.body.appendChild(parentDiv);\n\nconst parent = document.getElementById('parent');\nconst child = document.getElementById('child');\n\nparent.addEventListener('click', () => {\n  console.log('Parent element clicked');\n});\n\nchild.addEventListener('click', () => {\n  console.log('Child element clicked');\n});\n\n// Simulate clicking the button:\nchild.click();\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F53\\u60A8\\u70B9\\u51FB\\u201CClick me!\\u201D\\u6309\\u94AE\\u65F6\\uFF0C\\u7531\\u4E8E\\u4E8B\\u4EF6\\u5192\\u6CE1\\uFF0C\\u5B50\\u5143\\u7D20\\u548C\\u7236\\u5143\\u7D20\\u7684\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u90FD\\u5C06\\u88AB\\u89E6\\u53D1\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u505C\\u6B62\\u5192\\u6CE1\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"stopPropagation()\"}),\" \\u65B9\\u6CD5\\u5728\\u5192\\u6CE1\\u9636\\u6BB5\\u505C\\u6B62\\u4E8B\\u4EF6\\u5192\\u6CE1\\u3002\\u5982\\u679C\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"stopPropagation()\"}),\"\\uFF0C\\u5B83\\u4F1A\\u963B\\u6B62\\u4E8B\\u4EF6\\u8FDB\\u4E00\\u6B65\\u5192\\u6CE1\\u5230 DOM \\u6811\\u4E2D\\uFF0C\\u786E\\u4FDD\\u4EC5\\u6267\\u884C\\u5C42\\u6B21\\u7ED3\\u6784\\u4E2D\\u8BE5\\u70B9\\u4E4B\\u524D\\u7684\\u5143\\u7D20\\u7684\\u5904\\u7406\\u7A0B\\u5E8F\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"parent\">\n//   <button id=\"child\">Click me!</button>\n// </div>\nconst parentDiv = document.createElement('div');\nparentDiv.id = 'parent';\nconst button = document.createElement('button');\nbutton.id = 'child';\nparentDiv.appendChild(button);\ndocument.body.appendChild(parentDiv);\n\nconst parent = document.getElementById('parent');\nconst child = document.getElementById('child');\n\nparent.addEventListener('click', () => {\n  console.log('Parent element clicked');\n});\n\nchild.addEventListener('click', (event) => {\n  console.log('Child element clicked');\n  event.stopPropagation(); // Stops propagation to parent\n});\n\n// Simulate clicking the button:\nchild.click();\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4E8B\\u4EF6\\u59D4\\u6258\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E8B\\u4EF6\\u5192\\u6CE1\\u662F\",(0,e.jsx)(n.a,{href:\"/questions/quiz/explain-event-delegation\",children:\"\\u4E8B\\u4EF6\\u59D4\\u6258\"}),\"\\u6280\\u672F\\u7684\\u57FA\\u7840\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728\\u591A\\u4E2A\\u5143\\u7D20\\u7684\\u516C\\u5171\\u7956\\u5148\\u4E0A\\u9644\\u52A0\\u5355\\u4E2A\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\uFF0C\\u5E76\\u4F7F\\u7528\\u4E8B\\u4EF6\\u59D4\\u6258\\u6765\\u6709\\u6548\\u5730\\u5904\\u7406\\u8FD9\\u4E9B\\u5143\\u7D20\\u7684\\u4E8B\\u4EF6\\u3002\\u5F53\\u60A8\\u6709\\u5927\\u91CF\\u76F8\\u4F3C\\u7684\\u5143\\u7D20\\uFF08\\u5982\\u9879\\u76EE\\u5217\\u8868\\uFF09\\u5E76\\u4E14\\u5E0C\\u671B\\u907F\\u514D\\u5C06\\u5355\\u72EC\\u7684\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u9644\\u52A0\\u5230\\u6BCF\\u4E2A\\u9879\\u76EE\\u65F6\\uFF0C\\u8FD9\\u7279\\u522B\\u6709\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`parent.addEventListener('click', (event) => {\n  if (event.target && event.target.id === 'child') {\n    console.log('Child element clicked');\n  }\n});\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u66F4\\u7B80\\u6D01\\u7684\\u4EE3\\u7801\\uFF1A\"}),\" \\u51CF\\u5C11\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u7684\\u6570\\u91CF\\uFF0C\\u63D0\\u9AD8\\u4EE3\\u7801\\u53EF\\u8BFB\\u6027\\u548C\\u53EF\\u7EF4\\u62A4\\u6027\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9AD8\\u6548\\u7684\\u4E8B\\u4EF6\\u5904\\u7406\\uFF1A\"}),\" \\u901A\\u8FC7\\u9644\\u52A0\\u66F4\\u5C11\\u7684\\u76D1\\u542C\\u5668\\uFF0C\\u6700\\u5927\\u9650\\u5EA6\\u5730\\u51CF\\u5C11\\u6027\\u80FD\\u5F00\\u9500\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7075\\u6D3B\\u6027\\uFF1A\"}),\" \\u5141\\u8BB8\\u5904\\u7406\\u5B50\\u5143\\u7D20\\u4E0A\\u53D1\\u751F\\u7684\\u4E8B\\u4EF6\\uFF0C\\u800C\\u65E0\\u9700\\u76F4\\u63A5\\u5C06\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u5B83\\u4EEC\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u9677\\u9631\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u610F\\u5916\\u7684\\u4E8B\\u4EF6\\u5904\\u7406\\uFF1A\"}),\" \\u8BF7\\u6CE8\\u610F\\uFF0C\\u7236\\u5143\\u7D20\\u53EF\\u80FD\\u4F1A\\u65E0\\u610F\\u4E2D\\u6355\\u83B7\\u5B50\\u5143\\u7D20\\u53D1\\u751F\\u7684\\u4E8B\\u4EF6\\u3002\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"event.target\"}),\" \\u6765\\u8BC6\\u522B\\u89E6\\u53D1\\u4E8B\\u4EF6\\u7684\\u7279\\u5B9A\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E8B\\u4EF6\\u987A\\u5E8F\\uFF1A\"}),\" \\u4E8B\\u4EF6\\u4EE5\\u7279\\u5B9A\\u987A\\u5E8F\\u5192\\u6CE1\\u3002\\u5982\\u679C\\u591A\\u4E2A\\u7236\\u5143\\u7D20\\u6709\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\uFF0C\\u5B83\\u4EEC\\u7684\\u6267\\u884C\\u987A\\u5E8F\\u53D6\\u51B3\\u4E8E DOM \\u5C42\\u6B21\\u7ED3\\u6784\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8FC7\\u5EA6\\u59D4\\u6258\\uFF1A\"}),\" \\u867D\\u7136\\u5C06\\u4E8B\\u4EF6\\u59D4\\u6258\\u7ED9\\u516C\\u5171\\u7956\\u5148\\u662F\\u6709\\u6548\\u7684\\uFF0C\\u4F46\\u5728 DOM \\u6811\\u4E2D\\u9644\\u52A0\\u4E00\\u4E2A\\u8FC7\\u9AD8\\u7684\\u76D1\\u542C\\u5668\\u53EF\\u80FD\\u4F1A\\u6355\\u83B7\\u610F\\u5916\\u7684\\u4E8B\\u4EF6\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u4E00\\u4E9B\\u4F7F\\u7528\\u4E8B\\u4EF6\\u5192\\u6CE1\\u7F16\\u5199\\u66F4\\u597D\\u4EE3\\u7801\\u7684\\u5B9E\\u7528\\u65B9\\u6CD5\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528\\u4E8B\\u4EF6\\u59D4\\u6258\\u51CF\\u5C11\\u4EE3\\u7801\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60F3\\u8C61\\u4E00\\u4E0B\\uFF0C\\u60A8\\u6709\\u4E00\\u4E2A\\u4EA7\\u54C1\\u5217\\u8868\\uFF0C\\u5176\\u4E2D\\u5305\\u542B\\u8BB8\\u591A\\u9879\\u76EE\\uFF0C\\u6BCF\\u4E2A\\u9879\\u76EE\\u90FD\\u6709\\u4E00\\u4E2A\\u201C\\u7ACB\\u5373\\u8D2D\\u4E70\\u201D\\u6309\\u94AE\\u3002 \\u4F20\\u7EDF\\u4E0A\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C06\\u5355\\u72EC\\u7684\\u70B9\\u51FB\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u6BCF\\u4E2A\\u6309\\u94AE\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML:\n// <ul id=\"product-list\">\n//   <li><button id=\"item1-buy\">\\u7ACB\\u5373\\u8D2D\\u4E70</button></li>\n//   <li><button id=\"item2-buy\">\\u7ACB\\u5373\\u8D2D\\u4E70</button></li>\n// </ul>\n\nconst item1Buy = document.getElementById('item1-buy');\nconst item2Buy = document.getElementById('item2-buy');\n\nitem1Buy.addEventListener('click', handleBuyClick);\nitem2Buy.addEventListener('click', handleBuyClick);\n\n// ... \\u5BF9\\u6BCF\\u4E2A\\u9879\\u76EE\\u91CD\\u590D ...\n\nfunction handleBuyClick(event) {\n  console.log('\\u70B9\\u51FB\\u4E86\\u9879\\u76EE\\u7684\\u8D2D\\u4E70\\u6309\\u94AE\\uFF1A', event.target.id);\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u968F\\u7740\\u9879\\u76EE\\u6570\\u91CF\\u7684\\u589E\\u52A0\\uFF0C\\u8FD9\\u79CD\\u65B9\\u6CD5\\u53D8\\u5F97\\u5F88\\u9EBB\\u70E6\\u3002 \\u4EE5\\u4E0B\\u662F\\u4E8B\\u4EF6\\u5192\\u6CE1\\u5982\\u4F55\\u7B80\\u5316\\u4E8B\\u60C5\\u7684\\u65B9\\u6CD5\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML:\n// <ul id=\"product-list\">\n//   <li><button id=\"item1-buy\">\\u7ACB\\u5373\\u8D2D\\u4E70</button></li>\n//   <li><button id=\"item2-buy\">\\u7ACB\\u5373\\u8D2D\\u4E70</button></li>\n// </ul>\n\nconst productList = document.getElementById('product-list');\n\nproductList.addEventListener('click', handleBuyClick);\n\nfunction handleBuyClick(event) {\n  // \\u68C0\\u67E5\\u70B9\\u51FB\\u7684\\u5143\\u7D20\\u662F\\u5426\\u662F\\u5217\\u8868\\u4E2D\\u7684\\u4E00\\u4E2A\\u6309\\u94AE\n  if (event.target.tagName.toLowerCase() === 'button') {\n    console.log('\\u70B9\\u51FB\\u4E86\\u9879\\u76EE\\u7684\\u8D2D\\u4E70\\u6309\\u94AE\\uFF1A', event.target.textContent);\n  }\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u901A\\u8FC7\\u5C06\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u7236\\u5143\\u7D20 (\",(0,e.jsx)(n.code,{children:\"productList\"}),\") \\u5E76\\u5728\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D\\u68C0\\u67E5\\u88AB\\u70B9\\u51FB\\u7684\\u5143\\u7D20 (\",(0,e.jsx)(n.code,{children:\"event.target\"}),\")\\uFF0C\\u60A8\\u53EF\\u4EE5\\u7528\\u66F4\\u5C11\\u7684\\u4EE3\\u7801\\u5B9E\\u73B0\\u76F8\\u540C\\u7684\\u529F\\u80FD\\u3002 \\u5F53\\u9879\\u76EE\\u662F\\u52A8\\u6001\\u7684\\u65F6\\uFF0C\\u8FD9\\u79CD\\u65B9\\u6CD5\\u53EF\\u4EE5\\u5F88\\u597D\\u5730\\u6269\\u5C55\\uFF0C\\u56E0\\u4E3A\\u5F53\\u9879\\u76EE\\u5217\\u8868\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0C\\u4E0D\\u9700\\u8981\\u6DFB\\u52A0\\u6216\\u5220\\u9664\\u65B0\\u7684\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E0B\\u62C9\\u83DC\\u5355\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8003\\u8651\\u4E00\\u4E2A\\u4E0B\\u62C9\\u83DC\\u5355\\uFF0C\\u70B9\\u51FB\\u83DC\\u5355\\u5143\\u7D20\\uFF08\\u7236\\u5143\\u7D20\\uFF09\\u7684\\u4EFB\\u4F55\\u5730\\u65B9\\u90FD\\u5E94\\u8BE5\\u5173\\u95ED\\u5B83\\u3002\\u4F7F\\u7528\\u4E8B\\u4EF6\\u5192\\u6CE1\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u4E00\\u4E2A\\u76D1\\u542C\\u5668\\u6765\\u5B9E\\u73B0\\u8FD9\\u4E00\\u70B9\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"dropdown\">\n//   <button>\\u6253\\u5F00\\u83DC\\u5355</button>\n//   <ul>\n//     <li>\\u9879\\u76EE 1</li>\n//     <li>\\u9879\\u76EE 2</li>\n//   </ul>\n// </div>\n\nconst dropdown = document.getElementById('dropdown');\n\ndropdown.addEventListener('click', handleDropdownClick);\n\nfunction handleDropdownClick(event) {\n  // \\u5982\\u679C\\u5728\\u6309\\u94AE\\u5916\\u90E8\\u5355\\u51FB\\uFF0C\\u5219\\u5173\\u95ED\\u4E0B\\u62C9\\u83DC\\u5355\n  if (event.target !== dropdown.querySelector('button')) {\n    console.log('\\u4E0B\\u62C9\\u83DC\\u5355\\u5DF2\\u5173\\u95ED');\n    // \\u9690\\u85CF\\u4E0B\\u62C9\\u83DC\\u5355\\u5185\\u5BB9\\u7684\\u903B\\u8F91\n  }\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u91CC\\uFF0C\\u70B9\\u51FB\\u4E8B\\u4EF6\\u4ECE\\u88AB\\u70B9\\u51FB\\u7684\\u5143\\u7D20\\uFF08\\u6309\\u94AE\\u6216\\u5217\\u8868\\u9879\\uFF09\\u5192\\u6CE1\\u5230 \",(0,e.jsx)(n.code,{children:\"dropdown\"}),\" \\u5143\\u7D20\\u3002 \\u5904\\u7406\\u7A0B\\u5E8F\\u68C0\\u67E5\\u88AB\\u70B9\\u51FB\\u7684\\u5143\\u7D20\\u662F\\u5426\\u4E0D\\u662F \",(0,e.jsx)(n.code,{children:\"<button>\"}),\"\\uFF0C\\u5E76\\u76F8\\u5E94\\u5730\\u5173\\u95ED\\u83DC\\u5355\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u624B\\u98CE\\u7434\\u83DC\\u5355\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60F3\\u8C61\\u4E00\\u4E2A\\u624B\\u98CE\\u7434\\u83DC\\u5355\\uFF0C\\u70B9\\u51FB\\u4E00\\u4E2A\\u90E8\\u5206\\u6807\\u9898\\uFF08\\u7236\\u7EA7\\uFF09\\u4F1A\\u5C55\\u5F00\\u6216\\u6298\\u53E0\\u5176\\u4E0B\\u65B9\\u7684\\u90E8\\u5206\\u5185\\u5BB9\\uFF08\\u5B50\\u7EA7\\uFF09\\u3002 \\u4E8B\\u4EF6\\u5192\\u6CE1\\u4F7F\\u8FD9\\u53D8\\u5F97\\u7B80\\u5355\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML:\n// <div class=\"accordion\">\n//   <div class=\"header\">\\u7B2C 1 \\u8282</div>\n//   <div class=\"content\">\\u7B2C 1 \\u8282\\u7684\\u5185\\u5BB9</div>\n//   <div class=\"header\">\\u7B2C 2 \\u8282</div>\n//   <div class=\"content\">\\u7B2C 2 \\u8282\\u7684\\u5185\\u5BB9</div>\n// </div>\n\nconst accordion = document.querySelector('.accordion');\n\naccordion.addEventListener('click', handleAccordionClick);\n\nfunction handleAccordionClick(event) {\n  // \\u68C0\\u67E5\\u70B9\\u51FB\\u7684\\u5143\\u7D20\\u662F\\u5426\\u662F\\u6807\\u9898\n  if (event.target.classList.contains('header')) {\n    const content = event.target.nextElementSibling;\n    content.classList.toggle('active'); // \\u5207\\u6362\\u5185\\u5BB9\\u7684\\u663E\\u793A\n  }\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u901A\\u8FC7\\u5C06\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230 \",(0,e.jsx)(n.code,{children:\"accordion\"}),\" \\u5143\\u7D20\\uFF0C\\u5355\\u51FB\\u4EFB\\u4F55\\u6807\\u9898\\u90FD\\u4F1A\\u89E6\\u53D1\\u8BE5\\u4E8B\\u4EF6\\u3002 \\u5904\\u7406\\u7A0B\\u5E8F\\u68C0\\u67E5\\u88AB\\u70B9\\u51FB\\u7684\\u5143\\u7D20\\u662F\\u5426\\u662F\\u6807\\u9898\\uFF0C\\u5E76\\u5207\\u6362\\u76F8\\u5E94\\u5185\\u5BB9\\u90E8\\u5206\\u7684\\u53EF\\u89C1\\u6027\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling\",children:\"MDN Web Docs on Event Bubbling\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/bubbling-and-capturing\",children:\"JavaScript.info - Bubbling and Capturing\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.w3.org/TR/DOM-Level-3-Events/#event-flow\",children:\"W3C DOM Level 3 Events Specification\"})}),`\n`]})]})}function L(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(h,t)})):h(t)}var C=L;return y(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var b=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),k=(t,n)=>{for(var i in n)l(t,i,{get:n[i],enumerable:!0})},r=(t,n,i,d)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of g(n))!m.call(t,c)&&c!==i&&l(t,c,{get:()=>n[c],enumerable:!(d=p(n,c))||d.enumerable});return t};var y=(t,n,i)=>(i=t!=null?u(v(t)):{},r(n||!t||!t.__esModule?l(i,\"default\",{value:t,enumerable:!0}):i,t)),E=t=>r(l({},\"__esModule\",{value:!0}),t);var a=b((D,o)=>{o.exports=_jsx_runtime});var C={};k(C,{default:()=>s,frontmatter:()=>L});var e=y(a()),L={title:\"\\u63CF\\u8FF0 JavaScript \\u548C\\u6D4F\\u89C8\\u5668\\u7684\\u4E8B\\u4EF6\\u5192\\u6CE1\"};function h(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E8B\\u4EF6\\u5192\\u6CE1\\u662F\\u4E00\\u79CD DOM \\u4E8B\\u4EF6\\u4F20\\u64AD\\u673A\\u5236\\uFF0C\\u5176\\u4E2D\\u4E00\\u4E2A\\u4E8B\\u4EF6\\uFF08\\u4F8B\\u5982\\u70B9\\u51FB\\uFF09\\u4ECE\\u76EE\\u6807\\u5143\\u7D20\\u5F00\\u59CB\\uFF0C\\u5192\\u6CE1\\u5230\\u6587\\u6863\\u7684\\u6839\\u3002\\u8FD9\\u5141\\u8BB8\\u7956\\u5148\\u5143\\u7D20\\u4E5F\\u54CD\\u5E94\\u4E8B\\u4EF6\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E8B\\u4EF6\\u5192\\u6CE1\\u5BF9\\u4E8E\\u4E8B\\u4EF6\\u59D4\\u6258\\u81F3\\u5173\\u91CD\\u8981\\uFF0C\\u5176\\u4E2D\\u5355\\u4E2A\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u7BA1\\u7406\\u591A\\u4E2A\\u5B50\\u5143\\u7D20\\u7684\\u4E8B\\u4EF6\\uFF0C\\u4ECE\\u800C\\u63D0\\u9AD8\\u6027\\u80FD\\u548C\\u4EE3\\u7801\\u7B80\\u6D01\\u6027\\u3002\\u867D\\u7136\\u65B9\\u4FBF\\uFF0C\\u4F46\\u672A\\u80FD\\u6B63\\u786E\\u7BA1\\u7406\\u4E8B\\u4EF6\\u4F20\\u64AD\\u53EF\\u80FD\\u5BFC\\u81F4\\u610F\\u5916\\u884C\\u4E3A\\uFF0C\\u4F8B\\u5982\\u591A\\u4E2A\\u5904\\u7406\\u7A0B\\u5E8F\\u4E3A\\u5355\\u4E2A\\u4E8B\\u4EF6\\u89E6\\u53D1\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u4E8B\\u4EF6\\u5192\\u6CE1\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E8B\\u4EF6\\u5192\\u6CE1\\u662F DOM\\uFF08\\u6587\\u6863\\u5BF9\\u8C61\\u6A21\\u578B\\uFF09\\u4E2D\\u7684\\u4E00\\u79CD\\u4F20\\u64AD\\u673A\\u5236\\uFF0C\\u5176\\u4E2D\\u4E00\\u4E2A\\u4E8B\\u4EF6\\uFF08\\u4F8B\\u5982\\u70B9\\u51FB\\u6216\\u952E\\u76D8\\u4E8B\\u4EF6\\uFF09\\u9996\\u5148\\u5728\\u89E6\\u53D1\\u4E8B\\u4EF6\\u7684\\u76EE\\u6807\\u5143\\u7D20\\u4E0A\\u89E6\\u53D1\\uFF0C\\u7136\\u540E\\u5411\\u4E0A\\uFF08\\u5192\\u6CE1\\uFF09\\u901A\\u8FC7 DOM \\u6811\\u4F20\\u64AD\\u5230\\u6587\\u6863\\u7684\\u6839\\u3002\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u6CE8\\u610F\"}),\"\\uFF1A\\u751A\\u81F3\\u5728\\u4E8B\\u4EF6\\u5192\\u6CE1\\u9636\\u6BB5\\u53D1\\u751F\\u4E4B\\u524D\\u662F \",(0,e.jsx)(n.a,{href:\"/questions/quiz/describe-event-capturing\",children:\"\\u4E8B\\u4EF6\\u6355\\u83B7\"}),\" \\u9636\\u6BB5\\uFF0C\\u8BE5\\u9636\\u6BB5\\u4E0E\\u5192\\u6CE1\\u76F8\\u53CD\\uFF0C\\u4E8B\\u4EF6\\u4ECE\\u6587\\u6863\\u6839\\u5411\\u4E0B\\u5230\\u76EE\\u6807\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5192\\u6CE1\\u9636\\u6BB5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u5192\\u6CE1\\u9636\\u6BB5\\uFF0C\\u4E8B\\u4EF6\\u4ECE\\u76EE\\u6807\\u5143\\u7D20\\u5F00\\u59CB\\uFF0C\\u901A\\u8FC7\\u5176\\u5728 DOM \\u5C42\\u6B21\\u7ED3\\u6784\\u4E2D\\u7684\\u7956\\u5148\\u5143\\u7D20\\u5192\\u6CE1\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u9644\\u52A0\\u5230\\u76EE\\u6807\\u5143\\u7D20\\u53CA\\u5176\\u7956\\u5148\\u7684\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u90FD\\u53EF\\u80FD\\u63A5\\u6536\\u5E76\\u54CD\\u5E94\\u4E8B\\u4EF6\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u91CC\\u6709\\u4E00\\u4E2A\\u4F7F\\u7528\\u73B0\\u4EE3 ES6 \\u8BED\\u6CD5\\u7684\\u793A\\u4F8B\\uFF0C\\u7528\\u4E8E\\u6F14\\u793A\\u4E8B\\u4EF6\\u5192\\u6CE1\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"parent\">\n//   <button id=\"child\">Click me!</button>\n// </div>\nconst parentDiv = document.createElement('div');\nparentDiv.id = 'parent';\nconst button = document.createElement('button');\nbutton.id = 'child';\nparentDiv.appendChild(button);\ndocument.body.appendChild(parentDiv);\n\nconst parent = document.getElementById('parent');\nconst child = document.getElementById('child');\n\nparent.addEventListener('click', () => {\n  console.log('Parent element clicked');\n});\n\nchild.addEventListener('click', () => {\n  console.log('Child element clicked');\n});\n\n// Simulate clicking the button:\nchild.click();\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F53\\u60A8\\u70B9\\u51FB\\u201CClick me!\\u201D\\u6309\\u94AE\\u65F6\\uFF0C\\u7531\\u4E8E\\u4E8B\\u4EF6\\u5192\\u6CE1\\uFF0C\\u5B50\\u5143\\u7D20\\u548C\\u7236\\u5143\\u7D20\\u7684\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u90FD\\u5C06\\u88AB\\u89E6\\u53D1\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u505C\\u6B62\\u5192\\u6CE1\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"stopPropagation()\"}),\" \\u65B9\\u6CD5\\u5728\\u5192\\u6CE1\\u9636\\u6BB5\\u505C\\u6B62\\u4E8B\\u4EF6\\u5192\\u6CE1\\u3002\\u5982\\u679C\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"stopPropagation()\"}),\"\\uFF0C\\u5B83\\u4F1A\\u963B\\u6B62\\u4E8B\\u4EF6\\u8FDB\\u4E00\\u6B65\\u5192\\u6CE1\\u5230 DOM \\u6811\\u4E2D\\uFF0C\\u786E\\u4FDD\\u4EC5\\u6267\\u884C\\u5C42\\u6B21\\u7ED3\\u6784\\u4E2D\\u8BE5\\u70B9\\u4E4B\\u524D\\u7684\\u5143\\u7D20\\u7684\\u5904\\u7406\\u7A0B\\u5E8F\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"parent\">\n//   <button id=\"child\">Click me!</button>\n// </div>\nconst parentDiv = document.createElement('div');\nparentDiv.id = 'parent';\nconst button = document.createElement('button');\nbutton.id = 'child';\nparentDiv.appendChild(button);\ndocument.body.appendChild(parentDiv);\n\nconst parent = document.getElementById('parent');\nconst child = document.getElementById('child');\n\nparent.addEventListener('click', () => {\n  console.log('Parent element clicked');\n});\n\nchild.addEventListener('click', (event) => {\n  console.log('Child element clicked');\n  event.stopPropagation(); // Stops propagation to parent\n});\n\n// Simulate clicking the button:\nchild.click();\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4E8B\\u4EF6\\u59D4\\u6258\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E8B\\u4EF6\\u5192\\u6CE1\\u662F\",(0,e.jsx)(n.a,{href:\"/questions/quiz/explain-event-delegation\",children:\"\\u4E8B\\u4EF6\\u59D4\\u6258\"}),\"\\u6280\\u672F\\u7684\\u57FA\\u7840\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728\\u591A\\u4E2A\\u5143\\u7D20\\u7684\\u516C\\u5171\\u7956\\u5148\\u4E0A\\u9644\\u52A0\\u5355\\u4E2A\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\uFF0C\\u5E76\\u4F7F\\u7528\\u4E8B\\u4EF6\\u59D4\\u6258\\u6765\\u6709\\u6548\\u5730\\u5904\\u7406\\u8FD9\\u4E9B\\u5143\\u7D20\\u7684\\u4E8B\\u4EF6\\u3002\\u5F53\\u60A8\\u6709\\u5927\\u91CF\\u76F8\\u4F3C\\u7684\\u5143\\u7D20\\uFF08\\u5982\\u9879\\u76EE\\u5217\\u8868\\uFF09\\u5E76\\u4E14\\u5E0C\\u671B\\u907F\\u514D\\u5C06\\u5355\\u72EC\\u7684\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u9644\\u52A0\\u5230\\u6BCF\\u4E2A\\u9879\\u76EE\\u65F6\\uFF0C\\u8FD9\\u7279\\u522B\\u6709\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`parent.addEventListener('click', (event) => {\n  if (event.target && event.target.id === 'child') {\n    console.log('Child element clicked');\n  }\n});\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u66F4\\u7B80\\u6D01\\u7684\\u4EE3\\u7801\\uFF1A\"}),\" \\u51CF\\u5C11\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u7684\\u6570\\u91CF\\uFF0C\\u63D0\\u9AD8\\u4EE3\\u7801\\u53EF\\u8BFB\\u6027\\u548C\\u53EF\\u7EF4\\u62A4\\u6027\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9AD8\\u6548\\u7684\\u4E8B\\u4EF6\\u5904\\u7406\\uFF1A\"}),\" \\u901A\\u8FC7\\u9644\\u52A0\\u66F4\\u5C11\\u7684\\u76D1\\u542C\\u5668\\uFF0C\\u6700\\u5927\\u9650\\u5EA6\\u5730\\u51CF\\u5C11\\u6027\\u80FD\\u5F00\\u9500\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7075\\u6D3B\\u6027\\uFF1A\"}),\" \\u5141\\u8BB8\\u5904\\u7406\\u5B50\\u5143\\u7D20\\u4E0A\\u53D1\\u751F\\u7684\\u4E8B\\u4EF6\\uFF0C\\u800C\\u65E0\\u9700\\u76F4\\u63A5\\u5C06\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u5B83\\u4EEC\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u9677\\u9631\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u610F\\u5916\\u7684\\u4E8B\\u4EF6\\u5904\\u7406\\uFF1A\"}),\" \\u8BF7\\u6CE8\\u610F\\uFF0C\\u7236\\u5143\\u7D20\\u53EF\\u80FD\\u4F1A\\u65E0\\u610F\\u4E2D\\u6355\\u83B7\\u5B50\\u5143\\u7D20\\u53D1\\u751F\\u7684\\u4E8B\\u4EF6\\u3002\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"event.target\"}),\" \\u6765\\u8BC6\\u522B\\u89E6\\u53D1\\u4E8B\\u4EF6\\u7684\\u7279\\u5B9A\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E8B\\u4EF6\\u987A\\u5E8F\\uFF1A\"}),\" \\u4E8B\\u4EF6\\u4EE5\\u7279\\u5B9A\\u987A\\u5E8F\\u5192\\u6CE1\\u3002\\u5982\\u679C\\u591A\\u4E2A\\u7236\\u5143\\u7D20\\u6709\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\uFF0C\\u5B83\\u4EEC\\u7684\\u6267\\u884C\\u987A\\u5E8F\\u53D6\\u51B3\\u4E8E DOM \\u5C42\\u6B21\\u7ED3\\u6784\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8FC7\\u5EA6\\u59D4\\u6258\\uFF1A\"}),\" \\u867D\\u7136\\u5C06\\u4E8B\\u4EF6\\u59D4\\u6258\\u7ED9\\u516C\\u5171\\u7956\\u5148\\u662F\\u6709\\u6548\\u7684\\uFF0C\\u4F46\\u5728 DOM \\u6811\\u4E2D\\u9644\\u52A0\\u4E00\\u4E2A\\u8FC7\\u9AD8\\u7684\\u76D1\\u542C\\u5668\\u53EF\\u80FD\\u4F1A\\u6355\\u83B7\\u610F\\u5916\\u7684\\u4E8B\\u4EF6\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u4E00\\u4E9B\\u4F7F\\u7528\\u4E8B\\u4EF6\\u5192\\u6CE1\\u7F16\\u5199\\u66F4\\u597D\\u4EE3\\u7801\\u7684\\u5B9E\\u7528\\u65B9\\u6CD5\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528\\u4E8B\\u4EF6\\u59D4\\u6258\\u51CF\\u5C11\\u4EE3\\u7801\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60F3\\u8C61\\u4E00\\u4E0B\\uFF0C\\u60A8\\u6709\\u4E00\\u4E2A\\u4EA7\\u54C1\\u5217\\u8868\\uFF0C\\u5176\\u4E2D\\u5305\\u542B\\u8BB8\\u591A\\u9879\\u76EE\\uFF0C\\u6BCF\\u4E2A\\u9879\\u76EE\\u90FD\\u6709\\u4E00\\u4E2A\\u201C\\u7ACB\\u5373\\u8D2D\\u4E70\\u201D\\u6309\\u94AE\\u3002 \\u4F20\\u7EDF\\u4E0A\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C06\\u5355\\u72EC\\u7684\\u70B9\\u51FB\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u6BCF\\u4E2A\\u6309\\u94AE\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML:\n// <ul id=\"product-list\">\n//   <li><button id=\"item1-buy\">\\u7ACB\\u5373\\u8D2D\\u4E70</button></li>\n//   <li><button id=\"item2-buy\">\\u7ACB\\u5373\\u8D2D\\u4E70</button></li>\n// </ul>\n\nconst item1Buy = document.getElementById('item1-buy');\nconst item2Buy = document.getElementById('item2-buy');\n\nitem1Buy.addEventListener('click', handleBuyClick);\nitem2Buy.addEventListener('click', handleBuyClick);\n\n// ... \\u5BF9\\u6BCF\\u4E2A\\u9879\\u76EE\\u91CD\\u590D ...\n\nfunction handleBuyClick(event) {\n  console.log('\\u70B9\\u51FB\\u4E86\\u9879\\u76EE\\u7684\\u8D2D\\u4E70\\u6309\\u94AE\\uFF1A', event.target.id);\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u968F\\u7740\\u9879\\u76EE\\u6570\\u91CF\\u7684\\u589E\\u52A0\\uFF0C\\u8FD9\\u79CD\\u65B9\\u6CD5\\u53D8\\u5F97\\u5F88\\u9EBB\\u70E6\\u3002 \\u4EE5\\u4E0B\\u662F\\u4E8B\\u4EF6\\u5192\\u6CE1\\u5982\\u4F55\\u7B80\\u5316\\u4E8B\\u60C5\\u7684\\u65B9\\u6CD5\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML:\n// <ul id=\"product-list\">\n//   <li><button id=\"item1-buy\">Buy Now</button></li>\n//   <li><button id=\"item2-buy\">Buy Now</button></li>\n// </ul>\n\nconst productList = document.getElementById('product-list');\n\nproductList.addEventListener('click', handleBuyClick);\n\nfunction handleBuyClick(event) {\n  // Check if the clicked element is a button within the list\n  if (event.target.tagName.toLowerCase() === 'button') {\n    console.log('Buy button clicked for item:', event.target.id);\n  }\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u901A\\u8FC7\\u5C06\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u7236\\u5143\\u7D20 (\",(0,e.jsx)(n.code,{children:\"productList\"}),\") \\u5E76\\u5728\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D\\u68C0\\u67E5\\u88AB\\u70B9\\u51FB\\u7684\\u5143\\u7D20 (\",(0,e.jsx)(n.code,{children:\"event.target\"}),\")\\uFF0C\\u60A8\\u53EF\\u4EE5\\u7528\\u66F4\\u5C11\\u7684\\u4EE3\\u7801\\u5B9E\\u73B0\\u76F8\\u540C\\u7684\\u529F\\u80FD\\u3002 \\u5F53\\u9879\\u76EE\\u662F\\u52A8\\u6001\\u7684\\u65F6\\uFF0C\\u8FD9\\u79CD\\u65B9\\u6CD5\\u53EF\\u4EE5\\u5F88\\u597D\\u5730\\u6269\\u5C55\\uFF0C\\u56E0\\u4E3A\\u5F53\\u9879\\u76EE\\u5217\\u8868\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0C\\u4E0D\\u9700\\u8981\\u6DFB\\u52A0\\u6216\\u5220\\u9664\\u65B0\\u7684\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E0B\\u62C9\\u83DC\\u5355\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8003\\u8651\\u4E00\\u4E2A\\u4E0B\\u62C9\\u83DC\\u5355\\uFF0C\\u70B9\\u51FB\\u83DC\\u5355\\u5143\\u7D20\\uFF08\\u7236\\u5143\\u7D20\\uFF09\\u7684\\u4EFB\\u4F55\\u5730\\u65B9\\u90FD\\u5E94\\u8BE5\\u5173\\u95ED\\u5B83\\u3002\\u4F7F\\u7528\\u4E8B\\u4EF6\\u5192\\u6CE1\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u4E00\\u4E2A\\u76D1\\u542C\\u5668\\u6765\\u5B9E\\u73B0\\u8FD9\\u4E00\\u70B9\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"dropdown\">\n//   <button>\\u6253\\u5F00\\u83DC\\u5355</button>\n//   <ul>\n//     <li>\\u9879\\u76EE 1</li>\n//     <li>\\u9879\\u76EE 2</li>\n//   </ul>\n// </div>\n\nconst dropdown = document.getElementById('dropdown');\n\ndropdown.addEventListener('click', handleDropdownClick);\n\nfunction handleDropdownClick(event) {\n  // \\u5982\\u679C\\u5728\\u6309\\u94AE\\u5916\\u90E8\\u5355\\u51FB\\uFF0C\\u5219\\u5173\\u95ED\\u4E0B\\u62C9\\u83DC\\u5355\n  if (event.target !== dropdown.querySelector('button')) {\n    console.log('\\u4E0B\\u62C9\\u83DC\\u5355\\u5DF2\\u5173\\u95ED');\n    // \\u9690\\u85CF\\u4E0B\\u62C9\\u83DC\\u5355\\u5185\\u5BB9\\u7684\\u903B\\u8F91\n  }\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u91CC\\uFF0C\\u70B9\\u51FB\\u4E8B\\u4EF6\\u4ECE\\u88AB\\u70B9\\u51FB\\u7684\\u5143\\u7D20\\uFF08\\u6309\\u94AE\\u6216\\u5217\\u8868\\u9879\\uFF09\\u5192\\u6CE1\\u5230 \",(0,e.jsx)(n.code,{children:\"dropdown\"}),\" \\u5143\\u7D20\\u3002 \\u5904\\u7406\\u7A0B\\u5E8F\\u68C0\\u67E5\\u88AB\\u70B9\\u51FB\\u7684\\u5143\\u7D20\\u662F\\u5426\\u4E0D\\u662F \",(0,e.jsx)(n.code,{children:\"<button>\"}),\"\\uFF0C\\u5E76\\u76F8\\u5E94\\u5730\\u5173\\u95ED\\u83DC\\u5355\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u624B\\u98CE\\u7434\\u83DC\\u5355\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60F3\\u8C61\\u4E00\\u4E2A\\u624B\\u98CE\\u7434\\u83DC\\u5355\\uFF0C\\u70B9\\u51FB\\u4E00\\u4E2A\\u90E8\\u5206\\u6807\\u9898\\uFF08\\u7236\\u7EA7\\uFF09\\u4F1A\\u5C55\\u5F00\\u6216\\u6298\\u53E0\\u5176\\u4E0B\\u65B9\\u7684\\u90E8\\u5206\\u5185\\u5BB9\\uFF08\\u5B50\\u7EA7\\uFF09\\u3002 \\u4E8B\\u4EF6\\u5192\\u6CE1\\u4F7F\\u8FD9\\u53D8\\u5F97\\u7B80\\u5355\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML:\n// <div class=\"accordion\">\n//   <div class=\"header\">\\u7B2C 1 \\u8282</div>\n//   <div class=\"content\">\\u7B2C 1 \\u8282\\u7684\\u5185\\u5BB9</div>\n//   <div class=\"header\">\\u7B2C 2 \\u8282</div>\n//   <div class=\"content\">\\u7B2C 2 \\u8282\\u7684\\u5185\\u5BB9</div>\n// </div>\n\nconst accordion = document.querySelector('.accordion');\n\naccordion.addEventListener('click', handleAccordionClick);\n\nfunction handleAccordionClick(event) {\n  // \\u68C0\\u67E5\\u70B9\\u51FB\\u7684\\u5143\\u7D20\\u662F\\u5426\\u662F\\u6807\\u9898\n  if (event.target.classList.contains('header')) {\n    const content = event.target.nextElementSibling;\n    content.classList.toggle('active'); // \\u5207\\u6362\\u5185\\u5BB9\\u7684\\u663E\\u793A\n  }\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u901A\\u8FC7\\u5C06\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230 \",(0,e.jsx)(n.code,{children:\"accordion\"}),\" \\u5143\\u7D20\\uFF0C\\u5355\\u51FB\\u4EFB\\u4F55\\u6807\\u9898\\u90FD\\u4F1A\\u89E6\\u53D1\\u8BE5\\u4E8B\\u4EF6\\u3002 \\u5904\\u7406\\u7A0B\\u5E8F\\u68C0\\u67E5\\u88AB\\u70B9\\u51FB\\u7684\\u5143\\u7D20\\u662F\\u5426\\u662F\\u6807\\u9898\\uFF0C\\u5E76\\u5207\\u6362\\u76F8\\u5E94\\u5185\\u5BB9\\u90E8\\u5206\\u7684\\u53EF\\u89C1\\u6027\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling\",children:\"MDN Web Docs on Event Bubbling\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/bubbling-and-capturing\",children:\"JavaScript.info - Bubbling and Capturing\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.w3.org/TR/DOM-Level-3-Events/#event-flow\",children:\"W3C DOM Level 3 Events Specification\"})}),`\n`]})]})}function s(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(h,{...t})}):h(t)}return E(C);})();\n;return Component;"
 }
\ No newline at end of file
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 188a3e7fd..2cd6970b3 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-event-capturing/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var v=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),m=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},l=(t,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!b.call(t,r)&&r!==i&&a(t,r,{get:()=>e[r],enumerable:!(o=p(e,r))||o.enumerable});return t};var f=(t,e,i)=>(i=t!=null?s(g(t)):{},l(e||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),w=t=>l(a({},\"__esModule\",{value:!0}),t);var h=v((M,c)=>{c.exports=_jsx_runtime});var C={};m(C,{default:()=>E,frontmatter:()=>y});var n=f(h()),y={title:\"Describe event capturing in JavaScript and browsers\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",a:\"a\",code:\"code\",hr:\"hr\",ul:\"ul\",li:\"li\",strong:\"strong\",pre:\"pre\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Event capturing is a lesser-used counterpart to \",(0,n.jsx)(e.a,{href:\"/questions/quiz/describe-event-bubbling\",children:\"event bubbling\"}),\" in the DOM event propagation mechanism. It follows the opposite order, where an event triggers first on the ancestor element and then travels down to the target element.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Event capturing is rarely used as compared to event bubbling, but it can be used in specific scenarios where you need to intercept events at a higher level before they reach the target element. It is disabled by default but can be enabled through an option on \",(0,n.jsx)(e.code,{children:\"addEventListener()\"}),\".\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is event capturing?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Event capturing is a propagation mechanism in the DOM (Document Object Model) where an event, such as a click or a keyboard event, is first triggered at the root of the document and then flows down through the DOM tree to the target element.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Capturing has a higher priority than bubbling, meaning that capturing event handlers are executed before bubbling event handlers, as shown by the phases of event propagation:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Capturing phase\"}),\": The event moves down towards the target element\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Target phase\"}),\": The event reaches the target element\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Bubbling phase\"}),\": The event bubbles up from the target element\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Note that event capturing is disabled by default. To enable it you have to pass the capture option into \",(0,n.jsx)(e.code,{children:\"addEventListener()\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Capturing phase\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"During the capturing phase, the event starts at the document root and propagates down to the target element. Any event listeners on ancestor elements in this path will be triggered before the target element's handler. But note that event capturing can't happen until the third argument of \",(0,n.jsx)(e.code,{children:\"addEventListener()\"}),\" is set to \",(0,n.jsx)(e.code,{children:\"true\"}),\" as shown below (default value is \",(0,n.jsx)(e.code,{children:\"false\"}),\").\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's an example using modern ES2015 syntax to demonstrate event capturing:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"parent\">\n//   <button id=\"child\">Click me!</button>\n// </div>\n\nconst parent = document.getElementById('parent');\nconst child = document.getElementById('child');\n\nparent.addEventListener(\n  'click',\n  () => {\n    console.log('Parent element clicked (capturing)');\n  },\n  true, // Set third argument to true for capturing\n);\n\nchild.addEventListener('click', () => {\n  console.log('Child element clicked');\n});\n`})}),`\n`,(0,n.jsx)(e.p,{children:`When you click the \"Click me!\" button, it will trigger the parent element's capturing handler first, followed by the child element's handler.`}),`\n`,(0,n.jsx)(e.h2,{children:\"Stopping propagation\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Event propagation can be stopped during the capturing phase using the \",(0,n.jsx)(e.code,{children:\"stopPropagation()\"}),\" method. This prevents the event from traveling further down the DOM tree.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"parent\">\n//   <button id=\"child\">Click me!</button>\n// </div>\n\nconst parent = document.getElementById('parent');\nconst child = document.getElementById('child');\n\nparent.addEventListener(\n  'click',\n  (event) => {\n    console.log('Parent element clicked (capturing)');\n    event.stopPropagation(); // Stop event propagation\n  },\n  true,\n);\n\nchild.addEventListener('click', () => {\n  console.log('Child element clicked');\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"As a result of stopping event propagation, just the \",(0,n.jsx)(e.code,{children:\"parent\"}),' event listener will now be called when you click the \"Click Me!\" button, and the ',(0,n.jsx)(e.code,{children:\"child\"}),\" event listener will never be called because the event propagation has stopped at the \",(0,n.jsx)(e.code,{children:\"parent\"}),\" element.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Uses of event capturing\"}),`\n`,(0,n.jsx)(e.p,{children:\"Event capturing is rarely used as compared to event bubbling, but it can be used in specific scenarios where you need to intercept events at a higher level before they reach the target element.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Stopping event bubbling:\"}),\" Imagine you have a nested element (like a button) inside a container element. Clicking the button might also trigger a click event on the container. By using enabling event capturing on the container's event listener, you can capture the click event there and prevent it from traveling down to the button, potentially causing unintended behavior.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Custom dropdown menus:\"}),\": When building custom dropdown menus, you might want to capture clicks outside the menu element to close the menu. Using \",(0,n.jsx)(e.code,{children:\"capture: true\"}),\" on the \",(0,n.jsx)(e.code,{children:\"document\"}),\" object allows you to listen for clicks anywhere on the page and close the menu if the click happens outside its boundaries.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Efficiency in certain scenarios:\"}),\": In some situations, event capturing can be slightly more efficient than relying on bubbling. This is because the event doesn't need to propagate through all child elements before reaching the handler. However, the performance difference is usually negligible for most web applications.\"]}),`\n`]}),`\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/Learn/JavaScript/Building_blocks/Events#event_capture\",children:\"Event Capturing | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/bubbling-and-capturing\",children:\"Bubbling and Capturing | JavaScript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3.org/TR/DOM-Level-3-Events/#event-flow\",children:\"W3C DOM Level 3 Events Specification\"})}),`\n`]})]})}function k(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var E=k;return w(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},l=(t,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of g(e))!v.call(t,r)&&r!==i&&a(t,r,{get:()=>e[r],enumerable:!(o=u(e,r))||o.enumerable});return t};var w=(t,e,i)=>(i=t!=null?p(b(t)):{},l(e||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),y=t=>l(a({},\"__esModule\",{value:!0}),t);var h=m((L,c)=>{c.exports=_jsx_runtime});var E={};f(E,{default:()=>s,frontmatter:()=>k});var n=w(h()),k={title:\"Describe event capturing in JavaScript and browsers\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Event capturing is a lesser-used counterpart to \",(0,n.jsx)(e.a,{href:\"/questions/quiz/describe-event-bubbling\",children:\"event bubbling\"}),\" in the DOM event propagation mechanism. It follows the opposite order, where an event triggers first on the ancestor element and then travels down to the target element.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Event capturing is rarely used as compared to event bubbling, but it can be used in specific scenarios where you need to intercept events at a higher level before they reach the target element. It is disabled by default but can be enabled through an option on \",(0,n.jsx)(e.code,{children:\"addEventListener()\"}),\".\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is event capturing?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Event capturing is a propagation mechanism in the DOM (Document Object Model) where an event, such as a click or a keyboard event, is first triggered at the root of the document and then flows down through the DOM tree to the target element.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Capturing has a higher priority than bubbling, meaning that capturing event handlers are executed before bubbling event handlers, as shown by the phases of event propagation:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Capturing phase\"}),\": The event moves down towards the target element\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Target phase\"}),\": The event reaches the target element\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Bubbling phase\"}),\": The event bubbles up from the target element\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Note that event capturing is disabled by default. To enable it you have to pass the capture option into \",(0,n.jsx)(e.code,{children:\"addEventListener()\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Capturing phase\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"During the capturing phase, the event starts at the document root and propagates down to the target element. Any event listeners on ancestor elements in this path will be triggered before the target element's handler. But note that event capturing can't happen until the third argument of \",(0,n.jsx)(e.code,{children:\"addEventListener()\"}),\" is set to \",(0,n.jsx)(e.code,{children:\"true\"}),\" as shown below (default value is \",(0,n.jsx)(e.code,{children:\"false\"}),\").\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's an example using modern ES2015 syntax to demonstrate event capturing:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"parent\">\n//   <button id=\"child\">Click me!</button>\n// </div>\n\nconst parent = document.getElementById('parent');\nconst child = document.getElementById('child');\n\nparent.addEventListener(\n  'click',\n  () => {\n    console.log('Parent element clicked (capturing)');\n  },\n  true, // Set third argument to true for capturing\n);\n\nchild.addEventListener('click', () => {\n  console.log('Child element clicked');\n});\n`})}),`\n`,(0,n.jsx)(e.p,{children:`When you click the \"Click me!\" button, it will trigger the parent element's capturing handler first, followed by the child element's handler.`}),`\n`,(0,n.jsx)(e.h2,{children:\"Stopping propagation\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Event propagation can be stopped during the capturing phase using the \",(0,n.jsx)(e.code,{children:\"stopPropagation()\"}),\" method. This prevents the event from traveling further down the DOM tree.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"parent\">\n//   <button id=\"child\">Click me!</button>\n// </div>\n\nconst parent = document.getElementById('parent');\nconst child = document.getElementById('child');\n\nparent.addEventListener(\n  'click',\n  (event) => {\n    console.log('Parent element clicked (capturing)');\n    event.stopPropagation(); // Stop event propagation\n  },\n  true,\n);\n\nchild.addEventListener('click', () => {\n  console.log('Child element clicked');\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"As a result of stopping event propagation, just the \",(0,n.jsx)(e.code,{children:\"parent\"}),' event listener will now be called when you click the \"Click Me!\" button, and the ',(0,n.jsx)(e.code,{children:\"child\"}),\" event listener will never be called because the event propagation has stopped at the \",(0,n.jsx)(e.code,{children:\"parent\"}),\" element.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Uses of event capturing\"}),`\n`,(0,n.jsx)(e.p,{children:\"Event capturing is rarely used as compared to event bubbling, but it can be used in specific scenarios where you need to intercept events at a higher level before they reach the target element.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Stopping event bubbling:\"}),\" Imagine you have a nested element (like a button) inside a container element. Clicking the button might also trigger a click event on the container. By using enabling event capturing on the container's event listener, you can capture the click event there and prevent it from traveling down to the button, potentially causing unintended behavior.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Custom dropdown menus:\"}),\": When building custom dropdown menus, you might want to capture clicks outside the menu element to close the menu. Using \",(0,n.jsx)(e.code,{children:\"capture: true\"}),\" on the \",(0,n.jsx)(e.code,{children:\"document\"}),\" object allows you to listen for clicks anywhere on the page and close the menu if the click happens outside its boundaries.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Efficiency in certain scenarios:\"}),\": In some situations, event capturing can be slightly more efficient than relying on bubbling. This is because the event doesn't need to propagate through all child elements before reaching the handler. However, the performance difference is usually negligible for most web applications.\"]}),`\n`]}),`\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/Learn/JavaScript/Building_blocks/Events#event_capture\",children:\"Event Capturing | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/bubbling-and-capturing\",children:\"Bubbling and Capturing | JavaScript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3.org/TR/DOM-Level-3-Events/#event-flow\",children:\"W3C DOM Level 3 Events Specification\"})}),`\n`]})]})}function s(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return y(E);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/describe-event-capturing/zh-CN.json b/apps/web/src/__generated__/questions/quiz/describe-event-capturing/zh-CN.json
index 20d1d3a36..614f7bc5d 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-event-capturing/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-event-capturing/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-event-capturing/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var v=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),b=(c,n)=>{for(var i in n)t(c,i,{get:n[i],enumerable:!0})},d=(c,n,i,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of u(n))!m.call(c,r)&&r!==i&&t(c,r,{get:()=>n[r],enumerable:!(l=p(n,r))||l.enumerable});return c};var f=(c,n,i)=>(i=c!=null?s(g(c)):{},d(n||!c||!c.__esModule?t(i,\"default\",{value:c,enumerable:!0}):i,c)),E=c=>d(t({},\"__esModule\",{value:!0}),c);var o=v((D,h)=>{h.exports=_jsx_runtime});var j={};b(j,{default:()=>M,frontmatter:()=>L});var e=f(o()),L={title:\"\\u63CF\\u8FF0 JavaScript \\u548C\\u6D4F\\u89C8\\u5668\\u4E2D\\u7684\\u4E8B\\u4EF6\\u6355\\u83B7\"};function a(c){let n=Object.assign({h2:\"h2\",p:\"p\",a:\"a\",code:\"code\",hr:\"hr\",ul:\"ul\",li:\"li\",strong:\"strong\",pre:\"pre\"},c.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E8B\\u4EF6\\u6355\\u83B7\\u662F DOM \\u4E8B\\u4EF6\\u4F20\\u64AD\\u673A\\u5236\\u4E2D\\u8F83\\u5C11\\u4F7F\\u7528\\u7684 \",(0,e.jsx)(n.a,{href:\"/questions/quiz/describe-event-bubbling\",children:\"\\u4E8B\\u4EF6\\u5192\\u6CE1\"}),\" \\u7684\\u5BF9\\u5E94\\u90E8\\u5206\\u3002\\u5B83\\u9075\\u5FAA\\u76F8\\u53CD\\u7684\\u987A\\u5E8F\\uFF0C\\u4E8B\\u4EF6\\u9996\\u5148\\u5728\\u7956\\u5148\\u5143\\u7D20\\u4E0A\\u89E6\\u53D1\\uFF0C\\u7136\\u540E\\u5411\\u4E0B\\u4F20\\u9012\\u5230\\u76EE\\u6807\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E0E\\u4E8B\\u4EF6\\u5192\\u6CE1\\u76F8\\u6BD4\\uFF0C\\u4E8B\\u4EF6\\u6355\\u83B7\\u5F88\\u5C11\\u4F7F\\u7528\\uFF0C\\u4F46\\u5B83\\u53EF\\u7528\\u4E8E\\u7279\\u5B9A\\u573A\\u666F\\uFF0C\\u4F8B\\u5982\\u9700\\u8981\\u5728\\u4E8B\\u4EF6\\u5230\\u8FBE\\u76EE\\u6807\\u5143\\u7D20\\u4E4B\\u524D\\u62E6\\u622A\\u66F4\\u9AD8\\u7EA7\\u522B\\u7684\\u4E8B\\u4EF6\\u3002\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5B83\\u662F\\u7981\\u7528\\u7684\\uFF0C\\u4F46\\u53EF\\u4EE5\\u901A\\u8FC7 \",(0,e.jsx)(n.code,{children:\"addEventListener()\"}),\" \\u4E0A\\u7684\\u4E00\\u4E2A\\u9009\\u9879\\u6765\\u542F\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u4E8B\\u4EF6\\u6355\\u83B7\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E8B\\u4EF6\\u6355\\u83B7\\u662F DOM\\uFF08\\u6587\\u6863\\u5BF9\\u8C61\\u6A21\\u578B\\uFF09\\u4E2D\\u7684\\u4E00\\u79CD\\u4F20\\u64AD\\u673A\\u5236\\uFF0C\\u5176\\u4E2D\\u4E8B\\u4EF6\\uFF08\\u4F8B\\u5982\\u5355\\u51FB\\u6216\\u952E\\u76D8\\u4E8B\\u4EF6\\uFF09\\u9996\\u5148\\u5728\\u6587\\u6863\\u7684\\u6839\\u5904\\u89E6\\u53D1\\uFF0C\\u7136\\u540E\\u901A\\u8FC7 DOM \\u6811\\u5411\\u4E0B\\u6D41\\u5411\\u76EE\\u6807\\u5143\\u7D20\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6355\\u83B7\\u7684\\u4F18\\u5148\\u7EA7\\u9AD8\\u4E8E\\u5192\\u6CE1\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u6355\\u83B7\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u5728\\u5192\\u6CE1\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E4B\\u524D\\u6267\\u884C\\uFF0C\\u5982\\u4E8B\\u4EF6\\u4F20\\u64AD\\u7684\\u5404\\u4E2A\\u9636\\u6BB5\\u6240\\u793A\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6355\\u83B7\\u9636\\u6BB5\"}),\"\\uFF1A\\u4E8B\\u4EF6\\u5411\\u4E0B\\u79FB\\u52A8\\u5230\\u76EE\\u6807\\u5143\\u7D20\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u76EE\\u6807\\u9636\\u6BB5\"}),\"\\uFF1A\\u4E8B\\u4EF6\\u5230\\u8FBE\\u76EE\\u6807\\u5143\\u7D20\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5192\\u6CE1\\u9636\\u6BB5\"}),\"\\uFF1A\\u4E8B\\u4EF6\\u4ECE\\u76EE\\u6807\\u5143\\u7D20\\u5192\\u6CE1\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8BF7\\u6CE8\\u610F\\uFF0C\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\u7981\\u7528\\u4E8B\\u4EF6\\u6355\\u83B7\\u3002\\u8981\\u542F\\u7528\\u5B83\\uFF0C\\u60A8\\u5FC5\\u987B\\u5C06\\u6355\\u83B7\\u9009\\u9879\\u4F20\\u9012\\u5230 \",(0,e.jsx)(n.code,{children:\"addEventListener()\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u6355\\u83B7\\u9636\\u6BB5\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6355\\u83B7\\u9636\\u6BB5\\uFF0C\\u4E8B\\u4EF6\\u4ECE\\u6587\\u6863\\u6839\\u5F00\\u59CB\\u5E76\\u5411\\u4E0B\\u4F20\\u64AD\\u5230\\u76EE\\u6807\\u5143\\u7D20\\u3002\\u6B64\\u8DEF\\u5F84\\u4E0A\\u4EFB\\u4F55\\u7956\\u5148\\u5143\\u7D20\\u4E0A\\u7684\\u4EFB\\u4F55\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u90FD\\u5C06\\u5728\\u76EE\\u6807\\u5143\\u7D20\\u7684\\u5904\\u7406\\u7A0B\\u5E8F\\u4E4B\\u524D\\u89E6\\u53D1\\u3002\\u4F46\\u8BF7\\u6CE8\\u610F\\uFF0C\\u9664\\u975E\\u5C06 \",(0,e.jsx)(n.code,{children:\"addEventListener()\"}),\" \\u7684\\u7B2C\\u4E09\\u4E2A\\u53C2\\u6570\\u8BBE\\u7F6E\\u4E3A \",(0,e.jsx)(n.code,{children:\"true\"}),\"\\uFF0C\\u5426\\u5219\\u4E8B\\u4EF6\\u6355\\u83B7\\u4E0D\\u4F1A\\u53D1\\u751F\\uFF0C\\u5982\\u4E0B\\u6240\\u793A\\uFF08\\u9ED8\\u8BA4\\u503C\\u4E3A \",(0,e.jsx)(n.code,{children:\"false\"}),\"\\uFF09\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u4F7F\\u7528\\u73B0\\u4EE3 ES2015 \\u8BED\\u6CD5\\u7684\\u793A\\u4F8B\\uFF0C\\u7528\\u4E8E\\u6F14\\u793A\\u4E8B\\u4EF6\\u6355\\u83B7\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"parent\">\n//   <button id=\"child\">Click me!</button>\n// </div>\n\nconst parent = document.getElementById('parent');\nconst child = document.getElementById('child');\n\nparent.addEventListener(\n  'click',\n  () => {\n    console.log('Parent element clicked (capturing)');\n  },\n  true, // Set third argument to true for capturing\n);\n\nchild.addEventListener('click', () => {\n  console.log('Child element clicked');\n});\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F53\\u60A8\\u5355\\u51FB\\u201CClick me!\\u201D\\u6309\\u94AE\\u65F6\\uFF0C\\u5B83\\u5C06\\u9996\\u5148\\u89E6\\u53D1\\u7236\\u5143\\u7D20\\u7684\\u6355\\u83B7\\u5904\\u7406\\u7A0B\\u5E8F\\uFF0C\\u7136\\u540E\\u89E6\\u53D1\\u5B50\\u5143\\u7D20\\u7684\\u5904\\u7406\\u7A0B\\u5E8F\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u505C\\u6B62\\u4F20\\u64AD\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"stopPropagation()\"}),\" \\u65B9\\u6CD5\\u5728\\u6355\\u83B7\\u9636\\u6BB5\\u505C\\u6B62\\u4E8B\\u4EF6\\u4F20\\u64AD\\u3002\\u8FD9\\u53EF\\u4EE5\\u9632\\u6B62\\u4E8B\\u4EF6\\u8FDB\\u4E00\\u6B65\\u5411\\u4E0B\\u4F20\\u9012 DOM \\u6811\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"parent\">\n//   <button id=\"child\">Click me!</button>\n// </div>\n\nconst parent = document.getElementById('parent');\nconst child = document.getElementById('child');\n\nparent.addEventListener(\n  'click',\n  (event) => {\n    console.log('Parent element clicked (capturing)');\n    event.stopPropagation(); // Stop event propagation\n  },\n  true,\n);\n\nchild.addEventListener('click', () => {\n  console.log('Child element clicked');\n});\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7531\\u4E8E\\u505C\\u6B62\\u4E86\\u4E8B\\u4EF6\\u4F20\\u64AD\\uFF0C\\u5F53\\u60A8\\u5355\\u51FB\\u201CClick Me!\\u201D\\u6309\\u94AE\\u65F6\\uFF0C\\u73B0\\u5728\\u5C06\\u4EC5\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"parent\"}),\" \\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\uFF0C\\u5E76\\u4E14\\u6C38\\u8FDC\\u4E0D\\u4F1A\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"child\"}),\" \\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\uFF0C\\u56E0\\u4E3A\\u4E8B\\u4EF6\\u4F20\\u64AD\\u5DF2\\u5728 \",(0,e.jsx)(n.code,{children:\"parent\"}),\" \\u5143\\u7D20\\u5904\\u505C\\u6B62\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4E8B\\u4EF6\\u6355\\u83B7\\u7684\\u7528\\u9014\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E0E\\u4E8B\\u4EF6\\u5192\\u6CE1\\u76F8\\u6BD4\\uFF0C\\u4E8B\\u4EF6\\u6355\\u83B7\\u5F88\\u5C11\\u4F7F\\u7528\\uFF0C\\u4F46\\u5B83\\u53EF\\u4EE5\\u5728\\u7279\\u5B9A\\u60C5\\u51B5\\u4E0B\\u4F7F\\u7528\\uFF0C\\u4F8B\\u5982\\u9700\\u8981\\u5728\\u4E8B\\u4EF6\\u5230\\u8FBE\\u76EE\\u6807\\u5143\\u7D20\\u4E4B\\u524D\\u5728\\u9AD8\\u5C42\\u62E6\\u622A\\u4E8B\\u4EF6\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u963B\\u6B62\\u4E8B\\u4EF6\\u5192\\u6CE1\\uFF1A\"}),\" \\u60F3\\u8C61\\u4E00\\u4E0B\\uFF0C\\u60A8\\u6709\\u4E00\\u4E2A\\u5D4C\\u5957\\u5143\\u7D20\\uFF08\\u5982\\u6309\\u94AE\\uFF09\\u4F4D\\u4E8E\\u5BB9\\u5668\\u5143\\u7D20\\u5185\\u3002\\u5355\\u51FB\\u8BE5\\u6309\\u94AE\\u4E5F\\u53EF\\u80FD\\u89E6\\u53D1\\u5BB9\\u5668\\u4E0A\\u7684\\u5355\\u51FB\\u4E8B\\u4EF6\\u3002\\u901A\\u8FC7\\u5728\\u5BB9\\u5668\\u7684\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u4E0A\\u542F\\u7528\\u4E8B\\u4EF6\\u6355\\u83B7\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728\\u90A3\\u91CC\\u6355\\u83B7\\u5355\\u51FB\\u4E8B\\u4EF6\\uFF0C\\u5E76\\u963B\\u6B62\\u5176\\u5411\\u4E0B\\u4F20\\u64AD\\u5230\\u6309\\u94AE\\uFF0C\\u4ECE\\u800C\\u53EF\\u80FD\\u5BFC\\u81F4\\u610F\\u5916\\u884C\\u4E3A\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u81EA\\u5B9A\\u4E49\\u4E0B\\u62C9\\u83DC\\u5355\\uFF1A\"}),\" \\u5728\\u6784\\u5EFA\\u81EA\\u5B9A\\u4E49\\u4E0B\\u62C9\\u83DC\\u5355\\u65F6\\uFF0C\\u60A8\\u53EF\\u80FD\\u5E0C\\u671B\\u6355\\u83B7\\u83DC\\u5355\\u5143\\u7D20\\u4E4B\\u5916\\u7684\\u70B9\\u51FB\\u4EE5\\u5173\\u95ED\\u83DC\\u5355\\u3002\\u5728 \",(0,e.jsx)(n.code,{children:\"document\"}),\" \\u5BF9\\u8C61\\u4E0A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"capture: true\"}),\" \\u5141\\u8BB8\\u60A8\\u4FA6\\u542C\\u9875\\u9762\\u4E0A\\u7684\\u4EFB\\u4F55\\u4F4D\\u7F6E\\u7684\\u70B9\\u51FB\\uFF0C\\u5E76\\u5728\\u70B9\\u51FB\\u53D1\\u751F\\u5728\\u83DC\\u5355\\u8FB9\\u754C\\u4E4B\\u5916\\u65F6\\u5173\\u95ED\\u83DC\\u5355\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5728\\u67D0\\u4E9B\\u60C5\\u51B5\\u4E0B\\u63D0\\u9AD8\\u6548\\u7387\\uFF1A\"}),\" \\u5728\\u67D0\\u4E9B\\u60C5\\u51B5\\u4E0B\\uFF0C\\u4E8B\\u4EF6\\u6355\\u83B7\\u53EF\\u80FD\\u6BD4\\u4F9D\\u8D56\\u5192\\u6CE1\\u66F4\\u6709\\u6548\\u3002\\u8FD9\\u662F\\u56E0\\u4E3A\\u4E8B\\u4EF6\\u4E0D\\u9700\\u8981\\u5728\\u5230\\u8FBE\\u5904\\u7406\\u7A0B\\u5E8F\\u4E4B\\u524D\\u901A\\u8FC7\\u6240\\u6709\\u5B50\\u5143\\u7D20\\u4F20\\u64AD\\u3002\\u4F46\\u662F\\uFF0C\\u5BF9\\u4E8E\\u5927\\u591A\\u6570 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u6765\\u8BF4\\uFF0C\\u6027\\u80FD\\u5DEE\\u5F02\\u901A\\u5E38\\u53EF\\u4EE5\\u5FFD\\u7565\\u4E0D\\u8BA1\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#event_capture\",children:\"\\u4E8B\\u4EF6\\u6355\\u83B7 | MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://zh.javascript.info/bubbling-and-capturing\",children:\"\\u5192\\u6CE1\\u548C\\u6355\\u83B7 | JavaScript.info\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.w3.org/TR/DOM-Level-3-Events/#event-flow\",children:\"W3C DOM Level 3 \\u4E8B\\u4EF6\\u89C4\\u8303\"})}),`\n`]})]})}function k(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,Object.assign({},c,{children:(0,e.jsx)(a,c)})):a(c)}var M=k;return E(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var f=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),E=(c,n)=>{for(var r in n)t(c,r,{get:n[r],enumerable:!0})},d=(c,n,r,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of g(n))!v.call(c,i)&&i!==r&&t(c,i,{get:()=>n[i],enumerable:!(l=u(n,i))||l.enumerable});return c};var L=(c,n,r)=>(r=c!=null?p(m(c)):{},d(n||!c||!c.__esModule?t(r,\"default\",{value:c,enumerable:!0}):r,c)),b=c=>d(t({},\"__esModule\",{value:!0}),c);var o=f((D,h)=>{h.exports=_jsx_runtime});var M={};E(M,{default:()=>s,frontmatter:()=>k});var e=L(o()),k={title:\"\\u63CF\\u8FF0 JavaScript \\u548C\\u6D4F\\u89C8\\u5668\\u4E2D\\u7684\\u4E8B\\u4EF6\\u6355\\u83B7\"};function a(c){let n={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...c.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E8B\\u4EF6\\u6355\\u83B7\\u662F DOM \\u4E8B\\u4EF6\\u4F20\\u64AD\\u673A\\u5236\\u4E2D\\u8F83\\u5C11\\u4F7F\\u7528\\u7684 \",(0,e.jsx)(n.a,{href:\"/questions/quiz/describe-event-bubbling\",children:\"\\u4E8B\\u4EF6\\u5192\\u6CE1\"}),\" \\u7684\\u5BF9\\u5E94\\u90E8\\u5206\\u3002\\u5B83\\u9075\\u5FAA\\u76F8\\u53CD\\u7684\\u987A\\u5E8F\\uFF0C\\u4E8B\\u4EF6\\u9996\\u5148\\u5728\\u7956\\u5148\\u5143\\u7D20\\u4E0A\\u89E6\\u53D1\\uFF0C\\u7136\\u540E\\u5411\\u4E0B\\u4F20\\u9012\\u5230\\u76EE\\u6807\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E0E\\u4E8B\\u4EF6\\u5192\\u6CE1\\u76F8\\u6BD4\\uFF0C\\u4E8B\\u4EF6\\u6355\\u83B7\\u5F88\\u5C11\\u4F7F\\u7528\\uFF0C\\u4F46\\u5B83\\u53EF\\u7528\\u4E8E\\u7279\\u5B9A\\u573A\\u666F\\uFF0C\\u4F8B\\u5982\\u9700\\u8981\\u5728\\u4E8B\\u4EF6\\u5230\\u8FBE\\u76EE\\u6807\\u5143\\u7D20\\u4E4B\\u524D\\u62E6\\u622A\\u66F4\\u9AD8\\u7EA7\\u522B\\u7684\\u4E8B\\u4EF6\\u3002\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5B83\\u662F\\u7981\\u7528\\u7684\\uFF0C\\u4F46\\u53EF\\u4EE5\\u901A\\u8FC7 \",(0,e.jsx)(n.code,{children:\"addEventListener()\"}),\" \\u4E0A\\u7684\\u4E00\\u4E2A\\u9009\\u9879\\u6765\\u542F\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u4E8B\\u4EF6\\u6355\\u83B7\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E8B\\u4EF6\\u6355\\u83B7\\u662F DOM\\uFF08\\u6587\\u6863\\u5BF9\\u8C61\\u6A21\\u578B\\uFF09\\u4E2D\\u7684\\u4E00\\u79CD\\u4F20\\u64AD\\u673A\\u5236\\uFF0C\\u5176\\u4E2D\\u4E8B\\u4EF6\\uFF08\\u4F8B\\u5982\\u5355\\u51FB\\u6216\\u952E\\u76D8\\u4E8B\\u4EF6\\uFF09\\u9996\\u5148\\u5728\\u6587\\u6863\\u7684\\u6839\\u5904\\u89E6\\u53D1\\uFF0C\\u7136\\u540E\\u901A\\u8FC7 DOM \\u6811\\u5411\\u4E0B\\u6D41\\u5411\\u76EE\\u6807\\u5143\\u7D20\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6355\\u83B7\\u7684\\u4F18\\u5148\\u7EA7\\u9AD8\\u4E8E\\u5192\\u6CE1\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u6355\\u83B7\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u5728\\u5192\\u6CE1\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E4B\\u524D\\u6267\\u884C\\uFF0C\\u5982\\u4E8B\\u4EF6\\u4F20\\u64AD\\u7684\\u5404\\u4E2A\\u9636\\u6BB5\\u6240\\u793A\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6355\\u83B7\\u9636\\u6BB5\"}),\"\\uFF1A\\u4E8B\\u4EF6\\u5411\\u4E0B\\u79FB\\u52A8\\u5230\\u76EE\\u6807\\u5143\\u7D20\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u76EE\\u6807\\u9636\\u6BB5\"}),\"\\uFF1A\\u4E8B\\u4EF6\\u5230\\u8FBE\\u76EE\\u6807\\u5143\\u7D20\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5192\\u6CE1\\u9636\\u6BB5\"}),\"\\uFF1A\\u4E8B\\u4EF6\\u4ECE\\u76EE\\u6807\\u5143\\u7D20\\u5192\\u6CE1\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8BF7\\u6CE8\\u610F\\uFF0C\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\u7981\\u7528\\u4E8B\\u4EF6\\u6355\\u83B7\\u3002\\u8981\\u542F\\u7528\\u5B83\\uFF0C\\u60A8\\u5FC5\\u987B\\u5C06\\u6355\\u83B7\\u9009\\u9879\\u4F20\\u9012\\u5230 \",(0,e.jsx)(n.code,{children:\"addEventListener()\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u6355\\u83B7\\u9636\\u6BB5\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6355\\u83B7\\u9636\\u6BB5\\uFF0C\\u4E8B\\u4EF6\\u4ECE\\u6587\\u6863\\u6839\\u5F00\\u59CB\\u5E76\\u5411\\u4E0B\\u4F20\\u64AD\\u5230\\u76EE\\u6807\\u5143\\u7D20\\u3002\\u6B64\\u8DEF\\u5F84\\u4E0A\\u4EFB\\u4F55\\u7956\\u5148\\u5143\\u7D20\\u4E0A\\u7684\\u4EFB\\u4F55\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u90FD\\u5C06\\u5728\\u76EE\\u6807\\u5143\\u7D20\\u7684\\u5904\\u7406\\u7A0B\\u5E8F\\u4E4B\\u524D\\u89E6\\u53D1\\u3002\\u4F46\\u8BF7\\u6CE8\\u610F\\uFF0C\\u9664\\u975E\\u5C06 \",(0,e.jsx)(n.code,{children:\"addEventListener()\"}),\" \\u7684\\u7B2C\\u4E09\\u4E2A\\u53C2\\u6570\\u8BBE\\u7F6E\\u4E3A \",(0,e.jsx)(n.code,{children:\"true\"}),\"\\uFF0C\\u5426\\u5219\\u4E8B\\u4EF6\\u6355\\u83B7\\u4E0D\\u4F1A\\u53D1\\u751F\\uFF0C\\u5982\\u4E0B\\u6240\\u793A\\uFF08\\u9ED8\\u8BA4\\u503C\\u4E3A \",(0,e.jsx)(n.code,{children:\"false\"}),\"\\uFF09\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u4F7F\\u7528\\u73B0\\u4EE3 ES2015 \\u8BED\\u6CD5\\u7684\\u793A\\u4F8B\\uFF0C\\u7528\\u4E8E\\u6F14\\u793A\\u4E8B\\u4EF6\\u6355\\u83B7\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"parent\">\n//   <button id=\"child\">Click me!</button>\n// </div>\n\nconst parent = document.getElementById('parent');\nconst child = document.getElementById('child');\n\nparent.addEventListener(\n  'click',\n  () => {\n    console.log('Parent element clicked (capturing)');\n  },\n  true, // Set third argument to true for capturing\n);\n\nchild.addEventListener('click', () => {\n  console.log('Child element clicked');\n});\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F53\\u60A8\\u5355\\u51FB\\u201CClick me!\\u201D\\u6309\\u94AE\\u65F6\\uFF0C\\u5B83\\u5C06\\u9996\\u5148\\u89E6\\u53D1\\u7236\\u5143\\u7D20\\u7684\\u6355\\u83B7\\u5904\\u7406\\u7A0B\\u5E8F\\uFF0C\\u7136\\u540E\\u89E6\\u53D1\\u5B50\\u5143\\u7D20\\u7684\\u5904\\u7406\\u7A0B\\u5E8F\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u505C\\u6B62\\u4F20\\u64AD\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"stopPropagation()\"}),\" \\u65B9\\u6CD5\\u5728\\u6355\\u83B7\\u9636\\u6BB5\\u505C\\u6B62\\u4E8B\\u4EF6\\u4F20\\u64AD\\u3002\\u8FD9\\u53EF\\u4EE5\\u9632\\u6B62\\u4E8B\\u4EF6\\u8FDB\\u4E00\\u6B65\\u5411\\u4E0B\\u4F20\\u9012 DOM \\u6811\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"parent\">\n//   <button id=\"child\">Click me!</button>\n// </div>\n\nconst parent = document.getElementById('parent');\nconst child = document.getElementById('child');\n\nparent.addEventListener(\n  'click',\n  (event) => {\n    console.log('Parent element clicked (capturing)');\n    event.stopPropagation(); // Stop event propagation\n  },\n  true,\n);\n\nchild.addEventListener('click', () => {\n  console.log('Child element clicked');\n});\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7531\\u4E8E\\u505C\\u6B62\\u4E86\\u4E8B\\u4EF6\\u4F20\\u64AD\\uFF0C\\u5F53\\u60A8\\u5355\\u51FB\\u201CClick Me!\\u201D\\u6309\\u94AE\\u65F6\\uFF0C\\u73B0\\u5728\\u5C06\\u4EC5\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"parent\"}),\" \\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\uFF0C\\u5E76\\u4E14\\u6C38\\u8FDC\\u4E0D\\u4F1A\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"child\"}),\" \\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\uFF0C\\u56E0\\u4E3A\\u4E8B\\u4EF6\\u4F20\\u64AD\\u5DF2\\u5728 \",(0,e.jsx)(n.code,{children:\"parent\"}),\" \\u5143\\u7D20\\u5904\\u505C\\u6B62\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4E8B\\u4EF6\\u6355\\u83B7\\u7684\\u7528\\u9014\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E0E\\u4E8B\\u4EF6\\u5192\\u6CE1\\u76F8\\u6BD4\\uFF0C\\u4E8B\\u4EF6\\u6355\\u83B7\\u5F88\\u5C11\\u4F7F\\u7528\\uFF0C\\u4F46\\u5B83\\u53EF\\u4EE5\\u5728\\u7279\\u5B9A\\u60C5\\u51B5\\u4E0B\\u4F7F\\u7528\\uFF0C\\u4F8B\\u5982\\u9700\\u8981\\u5728\\u4E8B\\u4EF6\\u5230\\u8FBE\\u76EE\\u6807\\u5143\\u7D20\\u4E4B\\u524D\\u5728\\u9AD8\\u5C42\\u62E6\\u622A\\u4E8B\\u4EF6\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u963B\\u6B62\\u4E8B\\u4EF6\\u5192\\u6CE1\\uFF1A\"}),\" \\u60F3\\u8C61\\u4E00\\u4E0B\\uFF0C\\u60A8\\u6709\\u4E00\\u4E2A\\u5D4C\\u5957\\u5143\\u7D20\\uFF08\\u5982\\u6309\\u94AE\\uFF09\\u4F4D\\u4E8E\\u5BB9\\u5668\\u5143\\u7D20\\u5185\\u3002\\u5355\\u51FB\\u8BE5\\u6309\\u94AE\\u4E5F\\u53EF\\u80FD\\u89E6\\u53D1\\u5BB9\\u5668\\u4E0A\\u7684\\u5355\\u51FB\\u4E8B\\u4EF6\\u3002\\u901A\\u8FC7\\u5728\\u5BB9\\u5668\\u7684\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u4E0A\\u542F\\u7528\\u4E8B\\u4EF6\\u6355\\u83B7\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728\\u90A3\\u91CC\\u6355\\u83B7\\u5355\\u51FB\\u4E8B\\u4EF6\\uFF0C\\u5E76\\u963B\\u6B62\\u5176\\u5411\\u4E0B\\u4F20\\u64AD\\u5230\\u6309\\u94AE\\uFF0C\\u4ECE\\u800C\\u53EF\\u80FD\\u5BFC\\u81F4\\u610F\\u5916\\u884C\\u4E3A\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u81EA\\u5B9A\\u4E49\\u4E0B\\u62C9\\u83DC\\u5355\\uFF1A\"}),\" \\u5728\\u6784\\u5EFA\\u81EA\\u5B9A\\u4E49\\u4E0B\\u62C9\\u83DC\\u5355\\u65F6\\uFF0C\\u60A8\\u53EF\\u80FD\\u5E0C\\u671B\\u6355\\u83B7\\u83DC\\u5355\\u5143\\u7D20\\u4E4B\\u5916\\u7684\\u70B9\\u51FB\\u4EE5\\u5173\\u95ED\\u83DC\\u5355\\u3002\\u5728 \",(0,e.jsx)(n.code,{children:\"document\"}),\" \\u5BF9\\u8C61\\u4E0A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"capture: true\"}),\" \\u5141\\u8BB8\\u60A8\\u4FA6\\u542C\\u9875\\u9762\\u4E0A\\u7684\\u4EFB\\u4F55\\u4F4D\\u7F6E\\u7684\\u70B9\\u51FB\\uFF0C\\u5E76\\u5728\\u70B9\\u51FB\\u53D1\\u751F\\u5728\\u83DC\\u5355\\u8FB9\\u754C\\u4E4B\\u5916\\u65F6\\u5173\\u95ED\\u83DC\\u5355\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5728\\u67D0\\u4E9B\\u60C5\\u51B5\\u4E0B\\u63D0\\u9AD8\\u6548\\u7387\\uFF1A\"}),\" \\u5728\\u67D0\\u4E9B\\u60C5\\u51B5\\u4E0B\\uFF0C\\u4E8B\\u4EF6\\u6355\\u83B7\\u53EF\\u80FD\\u6BD4\\u4F9D\\u8D56\\u5192\\u6CE1\\u66F4\\u6709\\u6548\\u3002\\u8FD9\\u662F\\u56E0\\u4E3A\\u4E8B\\u4EF6\\u4E0D\\u9700\\u8981\\u5728\\u5230\\u8FBE\\u5904\\u7406\\u7A0B\\u5E8F\\u4E4B\\u524D\\u901A\\u8FC7\\u6240\\u6709\\u5B50\\u5143\\u7D20\\u4F20\\u64AD\\u3002\\u4F46\\u662F\\uFF0C\\u5BF9\\u4E8E\\u5927\\u591A\\u6570 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u6765\\u8BF4\\uFF0C\\u6027\\u80FD\\u5DEE\\u5F02\\u901A\\u5E38\\u53EF\\u4EE5\\u5FFD\\u7565\\u4E0D\\u8BA1\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#event_capture\",children:\"\\u4E8B\\u4EF6\\u6355\\u83B7 | MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://zh.javascript.info/bubbling-and-capturing\",children:\"\\u5192\\u6CE1\\u548C\\u6355\\u83B7 | JavaScript.info\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.w3.org/TR/DOM-Level-3-Events/#event-flow\",children:\"W3C DOM Level 3 \\u4E8B\\u4EF6\\u89C4\\u8303\"})}),`\n`]})]})}function s(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,{...c,children:(0,e.jsx)(a,{...c})}):a(c)}return b(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/describe-floats-and-how-they-work/en-US.json b/apps/web/src/__generated__/questions/quiz/describe-floats-and-how-they-work/en-US.json
index b84898ed2..9f8ac31cf 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-floats-and-how-they-work/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-floats-and-how-they-work/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-floats-and-how-they-work/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var b=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var o in e)l(n,o,{get:e[o],enumerable:!0})},a=(n,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of f(e))!u.call(n,i)&&i!==o&&l(n,i,{get:()=>e[i],enumerable:!(r=p(e,i))||r.enumerable});return n};var w=(n,e,o)=>(o=n!=null?s(m(n)):{},a(e||!n||!n.__esModule?l(o,\"default\",{value:n,enumerable:!0}):o,n)),x=n=>a(l({},\"__esModule\",{value:!0}),n);var h=b((j,c)=>{c.exports=_jsx_runtime});var C={};g(C,{default:()=>S,frontmatter:()=>y});var t=w(h()),y={title:\"Describe `float`s and how they work.\"};function d(n){let e=Object.assign({p:\"p\",code:\"code\",h2:\"h2\",a:\"a\",pre:\"pre\",ul:\"ul\",li:\"li\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[\"Float is a CSS positioning property. Floated elements remain a part of the flow of the page, and will affect the positioning of other elements (e.g. text will flow around floated elements), unlike \",(0,t.jsx)(e.code,{children:\"position: absolute\"}),\" elements, which are removed from the flow of the page.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"The CSS \",(0,t.jsx)(e.code,{children:\"clear\"}),\" property can be used to be positioned below \",(0,t.jsx)(e.code,{children:\"left\"}),\"/\",(0,t.jsx)(e.code,{children:\"right\"}),\"/\",(0,t.jsx)(e.code,{children:\"both\"}),\" floated elements.\"]}),`\n`,(0,t.jsx)(e.p,{children:\"If a parent element contains nothing but floated elements, its height will be collapsed to nothing. It can be fixed by clearing the float after the floated elements in the container but before the close of the container.\"}),`\n`,(0,t.jsx)(e.h2,{children:\"Clearfix hack\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The \",(0,t.jsx)(e.code,{children:\".clearfix\"}),\" hack uses a clever CSS \",(0,t.jsx)(e.a,{href:\"/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for\",children:\"pseudo-element\"}),\" (\",(0,t.jsx)(e.code,{children:\"::after\"}),\") to clear floats. Rather than setting the overflow on the parent, you apply an additional class \",(0,t.jsx)(e.code,{children:\"clearfix\"}),\" to it. Then apply this CSS:\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-css\",children:`.clearfix::after {\n  content: ' ';\n  visibility: hidden;\n  display: block;\n  height: 0;\n  clear: both;\n}\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"Alternatively, give \",(0,t.jsx)(e.code,{children:\"overflow: auto\"}),\" or \",(0,t.jsx)(e.code,{children:\"overflow: hidden\"}),\" property to the parent element which will establish a new block formatting context inside the children and it will expand to contain its children.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"Trivia\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"In the good old days, CSS frameworks such as Bootstrap 2 used the \",(0,t.jsx)(e.code,{children:\"float\"}),\" property to implement its grid system. However with CSS Flexbox and Grid these days, there is no longer much need to use the \",(0,t.jsx)(e.code,{children:\"float\"}),\" property.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"References\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/\",children:\"Clearfix: A Lesson In Web Development Evolution\"})}),`\n`]})]})}function v(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(d,n)})):d(n)}var S=v;return x(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var b=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var o in e)i(n,o,{get:e[o],enumerable:!0})},a=(n,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of m(e))!w.call(n,l)&&l!==o&&i(n,l,{get:()=>e[l],enumerable:!(r=f(e,l))||r.enumerable});return n};var x=(n,e,o)=>(o=n!=null?p(u(n)):{},a(e||!n||!n.__esModule?i(o,\"default\",{value:n,enumerable:!0}):o,n)),y=n=>a(i({},\"__esModule\",{value:!0}),n);var h=b((k,c)=>{c.exports=_jsx_runtime});var S={};g(S,{default:()=>s,frontmatter:()=>v});var t=x(h()),v={title:\"Describe `float`s and how they work.\"};function d(n){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[\"Float is a CSS positioning property. Floated elements remain a part of the flow of the page, and will affect the positioning of other elements (e.g. text will flow around floated elements), unlike \",(0,t.jsx)(e.code,{children:\"position: absolute\"}),\" elements, which are removed from the flow of the page.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"The CSS \",(0,t.jsx)(e.code,{children:\"clear\"}),\" property can be used to be positioned below \",(0,t.jsx)(e.code,{children:\"left\"}),\"/\",(0,t.jsx)(e.code,{children:\"right\"}),\"/\",(0,t.jsx)(e.code,{children:\"both\"}),\" floated elements.\"]}),`\n`,(0,t.jsx)(e.p,{children:\"If a parent element contains nothing but floated elements, its height will be collapsed to nothing. It can be fixed by clearing the float after the floated elements in the container but before the close of the container.\"}),`\n`,(0,t.jsx)(e.h2,{children:\"Clearfix hack\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The \",(0,t.jsx)(e.code,{children:\".clearfix\"}),\" hack uses a clever CSS \",(0,t.jsx)(e.a,{href:\"/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for\",children:\"pseudo-element\"}),\" (\",(0,t.jsx)(e.code,{children:\"::after\"}),\") to clear floats. Rather than setting the overflow on the parent, you apply an additional class \",(0,t.jsx)(e.code,{children:\"clearfix\"}),\" to it. Then apply this CSS:\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-css\",children:`.clearfix::after {\n  content: ' ';\n  visibility: hidden;\n  display: block;\n  height: 0;\n  clear: both;\n}\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"Alternatively, give \",(0,t.jsx)(e.code,{children:\"overflow: auto\"}),\" or \",(0,t.jsx)(e.code,{children:\"overflow: hidden\"}),\" property to the parent element which will establish a new block formatting context inside the children and it will expand to contain its children.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"Trivia\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"In the good old days, CSS frameworks such as Bootstrap 2 used the \",(0,t.jsx)(e.code,{children:\"float\"}),\" property to implement its grid system. However with CSS Flexbox and Grid these days, there is no longer much need to use the \",(0,t.jsx)(e.code,{children:\"float\"}),\" property.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"References\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/\",children:\"Clearfix: A Lesson In Web Development Evolution\"})}),`\n`]})]})}function s(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(d,{...n})}):d(n)}return y(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/describe-floats-and-how-they-work/pt-BR.json b/apps/web/src/__generated__/questions/quiz/describe-floats-and-how-they-work/pt-BR.json
index c86c44bdb..6155c4381 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-floats-and-how-they-work/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-floats-and-how-they-work/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-floats-and-how-they-work/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var a in e)i(n,a,{get:e[a],enumerable:!0})},d=(n,e,a,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!f.call(n,r)&&r!==a&&i(n,r,{get:()=>e[r],enumerable:!(t=m(e,r))||t.enumerable});return n};var g=(n,e,a)=>(a=n!=null?u(h(n)):{},d(e||!n||!n.__esModule?i(a,\"default\",{value:n,enumerable:!0}):a,n)),v=n=>d(i({},\"__esModule\",{value:!0}),n);var s=x((k,l)=>{l.exports=_jsx_runtime});var _={};b(_,{default:()=>j,frontmatter:()=>S});var o=g(s()),S={title:\"Descreva os 'float' e como funcionam.\"};function c(n){let e=Object.assign({p:\"p\",code:\"code\",h2:\"h2\",a:\"a\",pre:\"pre\",ul:\"ul\",li:\"li\"},n.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Float \\xE9 uma propriedade CSS de posicionamento. Elementos flutuantes permanecem uma parte do fluxo da p\\xE1gina, e afetar\\xE3o o posicionamento de outros elementos (por exemplo, texto ir\\xE1 fluir em torno dos elementos flutuantes), ao contr\\xE1rio de \",(0,o.jsx)(e.code,{children:\"position: absolute\"}),\", que s\\xE3o removidos do fluxo da p\\xE1gina.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"A propriedade CSS \",(0,o.jsx)(e.code,{children:\"clear\"}),\" pode ser usada para ser posicionada abaixo de \",(0,o.jsx)(e.code,{children:\"left\"}),\"/\",(0,o.jsx)(e.code,{children:\"right\"}),\"/\",(0,o.jsx)(e.code,{children:\"both\"}),\" elementos flutuantes.\"]}),`\n`,(0,o.jsx)(e.p,{children:\"Se um elemento pai n\\xE3o conter nada al\\xE9m de elementos flutuantes, sua altura ser\\xE1 desmoronada a nada. Ele pode ser corrigido limpando o float ap\\xF3s os elementos flutuantes no cont\\xEAiner, mas antes do fechamento do container.\"}),`\n`,(0,o.jsx)(e.h2,{children:\"O hack do Clearfix\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"O hack \",(0,o.jsx)(e.code,{children:\".clearfix\"}),\" usa um CSS inteligente \",(0,o.jsx)(e.a,{href:\"/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for\",children:\"pseudo-element\"}),\" (\",(0,o.jsx)(e.code,{children:\"::after\"}),\") para limpar floats. Ao inv\\xE9s de definir o excesso de fluxo no pai, voc\\xEA aplica uma classe adicional \",(0,o.jsx)(e.code,{children:\"clearfix\"}),\" para ele. Em seguida, aplique este CSS:\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-css\",children:`.clearfix::after {\n  content: ' ';\n  visibility: hidden;\n  display: block;\n  height: 0;\n  clear: both;\n}\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"Como alternativa, d\\xEA a propriedade \",(0,o.jsx)(e.code,{children:\"overflow: auto\"}),\" ou \",(0,o.jsx)(e.code,{children:\"overflow: hidden\"}),\" ao elemento pai que estabelecer\\xE1 um novo contexto de formata\\xE7\\xE3o de bloco dentro dos filhos e ele ser\\xE1 expandido para conter seus filhos.\"]}),`\n`,(0,o.jsx)(e.h2,{children:\"Tr\\xEDvia\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Nos bons dias antigos, o CSS frameworks como o Bootstrap 2 usou a propriedade \",(0,o.jsx)(e.code,{children:\"float\"}),\" para implementar seu sistema de grade. No entanto, com CSS Flexbox e Grid atualmente, n\\xE3o h\\xE1 muita necessidade de usar a propriedade \",(0,o.jsx)(e.code,{children:\"float\"}),\".\"]}),`\n`,(0,o.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://css-tricks.com/clearfix-a-lesson-web-development-evolution/\",children:\"Clearfix: Uma Li\\xE7\\xE3o em Desenvolvimento Web Evolu\\xE7\\xE3o\"})}),`\n`]})]})}function C(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(c,n)})):c(n)}var j=C;return v(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var a in e)i(n,a,{get:e[a],enumerable:!0})},d=(n,e,a,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of h(e))!x.call(n,r)&&r!==a&&i(n,r,{get:()=>e[r],enumerable:!(t=p(e,r))||t.enumerable});return n};var g=(n,e,a)=>(a=n!=null?m(f(n)):{},d(e||!n||!n.__esModule?i(a,\"default\",{value:n,enumerable:!0}):a,n)),S=n=>d(i({},\"__esModule\",{value:!0}),n);var s=v((j,l)=>{l.exports=_jsx_runtime});var _={};b(_,{default:()=>u,frontmatter:()=>C});var o=g(s()),C={title:\"Descreva os 'float' e como funcionam.\"};function c(n){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Float \\xE9 uma propriedade CSS de posicionamento. Elementos flutuantes permanecem uma parte do fluxo da p\\xE1gina, e afetar\\xE3o o posicionamento de outros elementos (por exemplo, texto ir\\xE1 fluir em torno dos elementos flutuantes), ao contr\\xE1rio de \",(0,o.jsx)(e.code,{children:\"position: absolute\"}),\", que s\\xE3o removidos do fluxo da p\\xE1gina.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"A propriedade CSS \",(0,o.jsx)(e.code,{children:\"clear\"}),\" pode ser usada para ser posicionada abaixo de \",(0,o.jsx)(e.code,{children:\"left\"}),\"/\",(0,o.jsx)(e.code,{children:\"right\"}),\"/\",(0,o.jsx)(e.code,{children:\"both\"}),\" elementos flutuantes.\"]}),`\n`,(0,o.jsx)(e.p,{children:\"Se um elemento pai n\\xE3o conter nada al\\xE9m de elementos flutuantes, sua altura ser\\xE1 desmoronada a nada. Ele pode ser corrigido limpando o float ap\\xF3s os elementos flutuantes no cont\\xEAiner, mas antes do fechamento do container.\"}),`\n`,(0,o.jsx)(e.h2,{children:\"O hack do Clearfix\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"O hack \",(0,o.jsx)(e.code,{children:\".clearfix\"}),\" usa um CSS inteligente \",(0,o.jsx)(e.a,{href:\"/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for\",children:\"pseudo-element\"}),\" (\",(0,o.jsx)(e.code,{children:\"::after\"}),\") para limpar floats. Ao inv\\xE9s de definir o excesso de fluxo no pai, voc\\xEA aplica uma classe adicional \",(0,o.jsx)(e.code,{children:\"clearfix\"}),\" para ele. Em seguida, aplique este CSS:\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-css\",children:`.clearfix::after {\n  content: ' ';\n  visibility: hidden;\n  display: block;\n  height: 0;\n  clear: both;\n}\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"Como alternativa, d\\xEA a propriedade \",(0,o.jsx)(e.code,{children:\"overflow: auto\"}),\" ou \",(0,o.jsx)(e.code,{children:\"overflow: hidden\"}),\" ao elemento pai que estabelecer\\xE1 um novo contexto de formata\\xE7\\xE3o de bloco dentro dos filhos e ele ser\\xE1 expandido para conter seus filhos.\"]}),`\n`,(0,o.jsx)(e.h2,{children:\"Tr\\xEDvia\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Nos bons dias antigos, o CSS frameworks como o Bootstrap 2 usou a propriedade \",(0,o.jsx)(e.code,{children:\"float\"}),\" para implementar seu sistema de grade. No entanto, com CSS Flexbox e Grid atualmente, n\\xE3o h\\xE1 muita necessidade de usar a propriedade \",(0,o.jsx)(e.code,{children:\"float\"}),\".\"]}),`\n`,(0,o.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://css-tricks.com/clearfix-a-lesson-web-development-evolution/\",children:\"Clearfix: Uma Li\\xE7\\xE3o em Desenvolvimento Web Evolu\\xE7\\xE3o\"})}),`\n`]})]})}function u(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(c,{...n})}):c(n)}return S(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/describe-floats-and-how-they-work/zh-CN.json b/apps/web/src/__generated__/questions/quiz/describe-floats-and-how-they-work/zh-CN.json
index 05e4d4df1..939c5a94d 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-floats-and-how-they-work/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-floats-and-how-they-work/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-floats-and-how-they-work/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var m=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),S=(c,e)=>{for(var r in e)i(c,r,{get:e[r],enumerable:!0})},t=(c,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of p(e))!x.call(c,l)&&l!==r&&i(c,l,{get:()=>e[l],enumerable:!(o=f(e,l))||o.enumerable});return c};var b=(c,e,r)=>(r=c!=null?s(u(c)):{},t(e||!c||!c.__esModule?i(r,\"default\",{value:c,enumerable:!0}):r,c)),C=c=>t(i({},\"__esModule\",{value:!0}),c);var h=m((k,d)=>{d.exports=_jsx_runtime});var _={};S(_,{default:()=>j,frontmatter:()=>g});var n=b(h()),g={title:\"\\u63CF\\u8FF0 `float` \\u53CA\\u5176\\u5DE5\\u4F5C\\u539F\\u7406\\u3002\"};function a(c){let e=Object.assign({p:\"p\",code:\"code\",h2:\"h2\",a:\"a\",pre:\"pre\",ul:\"ul\",li:\"li\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"Float \\u662F\\u4E00\\u4E2A CSS \\u5B9A\\u4F4D\\u5C5E\\u6027\\u3002\\u6D6E\\u52A8\\u5143\\u7D20\\u4ECD\\u7136\\u662F\\u9875\\u9762\\u6D41\\u7A0B\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u5E76\\u5C06\\u5F71\\u54CD\\u5176\\u4ED6\\u5143\\u7D20\\u7684\\u4F4D\\u7F6E\\uFF08\\u4F8B\\u5982\\uFF0C\\u6587\\u672C\\u5C06\\u73AF\\u7ED5\\u6D6E\\u52A8\\u5143\\u7D20\\uFF09\\uFF0C\\u8FD9\\u4E0E \",(0,n.jsx)(e.code,{children:\"position: absolute\"}),\" \\u5143\\u7D20\\u4E0D\\u540C\\uFF0C\\u540E\\u8005\\u5C06\\u4ECE\\u9875\\u9762\\u6D41\\u7A0B\\u4E2D\\u79FB\\u9664\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"CSS \",(0,n.jsx)(e.code,{children:\"clear\"}),\" \\u5C5E\\u6027\\u53EF\\u7528\\u4E8E\\u5B9A\\u4F4D\\u5728 \",(0,n.jsx)(e.code,{children:\"left\"}),\"/\",(0,n.jsx)(e.code,{children:\"right\"}),\"/\",(0,n.jsx)(e.code,{children:\"both\"}),\" \\u6D6E\\u52A8\\u5143\\u7D20\\u4E0B\\u65B9\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5982\\u679C\\u7236\\u5143\\u7D20\\u53EA\\u5305\\u542B\\u6D6E\\u52A8\\u5143\\u7D20\\uFF0C\\u5219\\u5176\\u9AD8\\u5EA6\\u5C06\\u6298\\u53E0\\u4E3A\\u96F6\\u3002\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728\\u5BB9\\u5668\\u4E2D\\u6D6E\\u52A8\\u5143\\u7D20\\u4E4B\\u540E\\u4F46\\u5728\\u5BB9\\u5668\\u5173\\u95ED\\u4E4B\\u524D\\u6E05\\u9664\\u6D6E\\u52A8\\u6765\\u4FEE\\u590D\\u5B83\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Clearfix hack\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\".clearfix\"}),\" hack \\u4F7F\\u7528\\u5DE7\\u5999\\u7684 CSS \",(0,n.jsx)(e.a,{href:\"/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for\",children:\"\\u4F2A\\u5143\\u7D20\"}),\" (\",(0,n.jsx)(e.code,{children:\"::after\"}),\") \\u6765\\u6E05\\u9664\\u6D6E\\u52A8\\u3002\\u4E0E\\u5176\\u5728\\u7236\\u5143\\u7D20\\u4E0A\\u8BBE\\u7F6E overflow\\uFF0C\\u4E0D\\u5982\\u4E3A\\u5176\\u5E94\\u7528\\u4E00\\u4E2A\\u989D\\u5916\\u7684\\u7C7B \",(0,n.jsx)(e.code,{children:\"clearfix\"}),\"\\u3002\\u7136\\u540E\\u5E94\\u7528\\u6B64 CSS\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.clearfix::after {\n  content: ' ';\n  visibility: hidden;\n  display: block;\n  height: 0;\n  clear: both;\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6216\\u8005\\uFF0C\\u7ED9\\u7236\\u5143\\u7D20 \",(0,n.jsx)(e.code,{children:\"overflow: auto\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"overflow: hidden\"}),\" \\u5C5E\\u6027\\uFF0C\\u5B83\\u5C06\\u5728\\u5B50\\u5143\\u7D20\\u5185\\u5EFA\\u7ACB\\u4E00\\u4E2A\\u65B0\\u7684\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587\\uFF0C\\u5B83\\u5C06\\u6269\\u5C55\\u4EE5\\u5305\\u542B\\u5176\\u5B50\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7410\\u4E8B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u8FC7\\u53BB\\u7684\\u65E5\\u5B50\\u91CC\\uFF0CCSS \\u6846\\u67B6\\uFF08\\u5982 Bootstrap 2\\uFF09\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"float\"}),\" \\u5C5E\\u6027\\u6765\\u5B9E\\u73B0\\u5176\\u7F51\\u683C\\u7CFB\\u7EDF\\u3002\\u7136\\u800C\\uFF0C\\u5982\\u4ECA\\u6709\\u4E86 CSS Flexbox \\u548C Grid\\uFF0C\\u4E0D\\u518D\\u9700\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"float\"}),\" \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u53C2\\u8003\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/\",children:\"Clearfix: A Lesson In Web Development Evolution\"})}),`\n`]})]})}function v(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(a,c)})):a(c)}var j=v;return C(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var f=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var S=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),C=(c,e)=>{for(var r in e)o(c,r,{get:e[r],enumerable:!0})},t=(c,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of u(e))!m.call(c,l)&&l!==r&&o(c,l,{get:()=>e[l],enumerable:!(i=p(e,l))||i.enumerable});return c};var b=(c,e,r)=>(r=c!=null?f(x(c)):{},t(e||!c||!c.__esModule?o(r,\"default\",{value:c,enumerable:!0}):r,c)),v=c=>t(o({},\"__esModule\",{value:!0}),c);var h=S((j,d)=>{d.exports=_jsx_runtime});var g={};C(g,{default:()=>s,frontmatter:()=>_});var n=b(h()),_={title:\"\\u63CF\\u8FF0 `float` \\u53CA\\u5176\\u5DE5\\u4F5C\\u539F\\u7406\\u3002\"};function a(c){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"Float \\u662F\\u4E00\\u4E2A CSS \\u5B9A\\u4F4D\\u5C5E\\u6027\\u3002\\u6D6E\\u52A8\\u5143\\u7D20\\u4ECD\\u7136\\u662F\\u9875\\u9762\\u6D41\\u7A0B\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u5E76\\u5C06\\u5F71\\u54CD\\u5176\\u4ED6\\u5143\\u7D20\\u7684\\u4F4D\\u7F6E\\uFF08\\u4F8B\\u5982\\uFF0C\\u6587\\u672C\\u5C06\\u73AF\\u7ED5\\u6D6E\\u52A8\\u5143\\u7D20\\uFF09\\uFF0C\\u8FD9\\u4E0E \",(0,n.jsx)(e.code,{children:\"position: absolute\"}),\" \\u5143\\u7D20\\u4E0D\\u540C\\uFF0C\\u540E\\u8005\\u5C06\\u4ECE\\u9875\\u9762\\u6D41\\u7A0B\\u4E2D\\u79FB\\u9664\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"CSS \",(0,n.jsx)(e.code,{children:\"clear\"}),\" \\u5C5E\\u6027\\u53EF\\u7528\\u4E8E\\u5B9A\\u4F4D\\u5728 \",(0,n.jsx)(e.code,{children:\"left\"}),\"/\",(0,n.jsx)(e.code,{children:\"right\"}),\"/\",(0,n.jsx)(e.code,{children:\"both\"}),\" \\u6D6E\\u52A8\\u5143\\u7D20\\u4E0B\\u65B9\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5982\\u679C\\u7236\\u5143\\u7D20\\u53EA\\u5305\\u542B\\u6D6E\\u52A8\\u5143\\u7D20\\uFF0C\\u5219\\u5176\\u9AD8\\u5EA6\\u5C06\\u6298\\u53E0\\u4E3A\\u96F6\\u3002\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728\\u5BB9\\u5668\\u4E2D\\u6D6E\\u52A8\\u5143\\u7D20\\u4E4B\\u540E\\u4F46\\u5728\\u5BB9\\u5668\\u5173\\u95ED\\u4E4B\\u524D\\u6E05\\u9664\\u6D6E\\u52A8\\u6765\\u4FEE\\u590D\\u5B83\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Clearfix hack\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\".clearfix\"}),\" hack \\u4F7F\\u7528\\u5DE7\\u5999\\u7684 CSS \",(0,n.jsx)(e.a,{href:\"/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for\",children:\"\\u4F2A\\u5143\\u7D20\"}),\" (\",(0,n.jsx)(e.code,{children:\"::after\"}),\") \\u6765\\u6E05\\u9664\\u6D6E\\u52A8\\u3002\\u4E0E\\u5176\\u5728\\u7236\\u5143\\u7D20\\u4E0A\\u8BBE\\u7F6E overflow\\uFF0C\\u4E0D\\u5982\\u4E3A\\u5176\\u5E94\\u7528\\u4E00\\u4E2A\\u989D\\u5916\\u7684\\u7C7B \",(0,n.jsx)(e.code,{children:\"clearfix\"}),\"\\u3002\\u7136\\u540E\\u5E94\\u7528\\u6B64 CSS\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.clearfix::after {\n  content: ' ';\n  visibility: hidden;\n  display: block;\n  height: 0;\n  clear: both;\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6216\\u8005\\uFF0C\\u7ED9\\u7236\\u5143\\u7D20 \",(0,n.jsx)(e.code,{children:\"overflow: auto\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"overflow: hidden\"}),\" \\u5C5E\\u6027\\uFF0C\\u5B83\\u5C06\\u5728\\u5B50\\u5143\\u7D20\\u5185\\u5EFA\\u7ACB\\u4E00\\u4E2A\\u65B0\\u7684\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587\\uFF0C\\u5B83\\u5C06\\u6269\\u5C55\\u4EE5\\u5305\\u542B\\u5176\\u5B50\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7410\\u4E8B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u8FC7\\u53BB\\u7684\\u65E5\\u5B50\\u91CC\\uFF0CCSS \\u6846\\u67B6\\uFF08\\u5982 Bootstrap 2\\uFF09\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"float\"}),\" \\u5C5E\\u6027\\u6765\\u5B9E\\u73B0\\u5176\\u7F51\\u683C\\u7CFB\\u7EDF\\u3002\\u7136\\u800C\\uFF0C\\u5982\\u4ECA\\u6709\\u4E86 CSS Flexbox \\u548C Grid\\uFF0C\\u4E0D\\u518D\\u9700\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"float\"}),\" \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u53C2\\u8003\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/\",children:\"Clearfix: A Lesson In Web Development Evolution\"})}),`\n`]})]})}function s(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(a,{...c})}):a(c)}return v(g);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for/en-US.json b/apps/web/src/__generated__/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for/en-US.json
index 4ea2abc1a..edaa9e6d5 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var s in e)r(t,s,{get:e[s],enumerable:!0})},d=(t,e,s,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!p.call(t,o)&&o!==s&&r(t,o,{get:()=>e[o],enumerable:!(c=u(e,o))||c.enumerable});return t};var S=(t,e,s)=>(s=t!=null?h(f(t)):{},d(e||!t||!t.__esModule?r(s,\"default\",{value:t,enumerable:!0}):s,t)),x=t=>d(r({},\"__esModule\",{value:!0}),t);var i=b((v,l)=>{l.exports=_jsx_runtime});var j={};g(j,{default:()=>C,frontmatter:()=>y});var n=S(i()),y={title:\"Describe pseudo-elements and discuss what they are used for.\"};function a(t){let e=Object.assign({p:\"p\",a:\"a\",code:\"code\",ul:\"ul\",li:\"li\",h2:\"h2\",em:\"em\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"A CSS \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\",children:\"pseudo-element\"}),\" is a keyword added to a selector that lets you style a specific part of the selected element(s). They can be used for decoration (\",(0,n.jsx)(e.code,{children:\"::first-line\"}),\", \",(0,n.jsx)(e.code,{children:\"::first-letter\"}),\") or adding elements to the markup (combined with \",(0,n.jsx)(e.code,{children:\"content: ...\"}),\") without having to modify the markup (\",(0,n.jsx)(e.code,{children:\":before\"}),\", \",(0,n.jsx)(e.code,{children:\":after\"}),\").\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"::first-line\"}),\" and \",(0,n.jsx)(e.code,{children:\"::first-letter\"}),\" can be used to decorate text.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Used in the \",(0,n.jsx)(e.code,{children:\".clearfix\"}),\" hack as shown above to add a zero-space element with \",(0,n.jsx)(e.code,{children:\"clear: both\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Triangular arrows in tooltips use \",(0,n.jsx)(e.code,{children:\"::before\"}),\" and \",(0,n.jsx)(e.code,{children:\"::after\"}),\". Encourages separation of concerns because the triangle is considered part of styling and not really the DOM.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Pseudo-elements are different from \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\",children:\"pseudo-classes\"}),\", which are used to style an element based on its \",(0,n.jsx)(e.em,{children:\"state\"}),\" (such as \",(0,n.jsx)(e.code,{children:\":hover\"}),\", \",(0,n.jsx)(e.code,{children:\":focus\"}),\", etc).\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Double colons should be used instead of single colon to distinguish pseudo-classes from pseudo-elements. Most browsers support both syntaxs since this distinction was not clear in legacy W3C specs.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"References\"}),`\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/Web/CSS/Pseudo-elements\",children:\"Pseudo-elements - CSS | MDN\"})}),`\n`]})]})}function w(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(a,t)})):a(t)}var C=w;return x(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),S=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of f(e))!b.call(t,s)&&s!==o&&r(t,s,{get:()=>e[s],enumerable:!(d=m(e,s))||d.enumerable});return t};var x=(t,e,o)=>(o=t!=null?u(p(t)):{},c(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),y=t=>c(r({},\"__esModule\",{value:!0}),t);var i=g((v,l)=>{l.exports=_jsx_runtime});var C={};S(C,{default:()=>h,frontmatter:()=>w});var n=x(i()),w={title:\"Describe pseudo-elements and discuss what they are used for.\"};function a(t){let e={a:\"a\",code:\"code\",em:\"em\",h2:\"h2\",li:\"li\",p:\"p\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"A CSS \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\",children:\"pseudo-element\"}),\" is a keyword added to a selector that lets you style a specific part of the selected element(s). They can be used for decoration (\",(0,n.jsx)(e.code,{children:\"::first-line\"}),\", \",(0,n.jsx)(e.code,{children:\"::first-letter\"}),\") or adding elements to the markup (combined with \",(0,n.jsx)(e.code,{children:\"content: ...\"}),\") without having to modify the markup (\",(0,n.jsx)(e.code,{children:\":before\"}),\", \",(0,n.jsx)(e.code,{children:\":after\"}),\").\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"::first-line\"}),\" and \",(0,n.jsx)(e.code,{children:\"::first-letter\"}),\" can be used to decorate text.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Used in the \",(0,n.jsx)(e.code,{children:\".clearfix\"}),\" hack as shown above to add a zero-space element with \",(0,n.jsx)(e.code,{children:\"clear: both\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Triangular arrows in tooltips use \",(0,n.jsx)(e.code,{children:\"::before\"}),\" and \",(0,n.jsx)(e.code,{children:\"::after\"}),\". Encourages separation of concerns because the triangle is considered part of styling and not really the DOM.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Pseudo-elements are different from \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\",children:\"pseudo-classes\"}),\", which are used to style an element based on its \",(0,n.jsx)(e.em,{children:\"state\"}),\" (such as \",(0,n.jsx)(e.code,{children:\":hover\"}),\", \",(0,n.jsx)(e.code,{children:\":focus\"}),\", etc).\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Double colons should be used instead of single colon to distinguish pseudo-classes from pseudo-elements. Most browsers support both syntaxs since this distinction was not clear in legacy W3C specs.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"References\"}),`\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/Web/CSS/Pseudo-elements\",children:\"Pseudo-elements - CSS | MDN\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(a,{...t})}):a(t)}return y(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for/pt-BR.json b/apps/web/src/__generated__/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for/pt-BR.json
index 43b97b263..581169462 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var S=(s,e)=>()=>(e||s((e={exports:{}}).exports,e),e.exports),b=(s,e)=>{for(var a in e)r(s,a,{get:e[a],enumerable:!0})},i=(s,e,a,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of h(e))!f.call(s,n)&&n!==a&&r(s,n,{get:()=>e[n],enumerable:!(d=u(e,n))||d.enumerable});return s};var g=(s,e,a)=>(a=s!=null?m(p(s)):{},i(e||!s||!s.__esModule?r(a,\"default\",{value:s,enumerable:!0}):a,s)),v=s=>i(r({},\"__esModule\",{value:!0}),s);var c=S((q,t)=>{t.exports=_jsx_runtime});var j={};b(j,{default:()=>C,frontmatter:()=>x});var o=g(c()),x={title:\"Descreva pseudo-elementos e discuta para que eles s\\xE3o usados.\"};function l(s){let e=Object.assign({p:\"p\",a:\"a\",code:\"code\",ul:\"ul\",li:\"li\",h2:\"h2\",em:\"em\"},s.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Um CSS \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\",children:\"pseudo-element\"}),\" \\xE9 uma palavra-chave adicionada a um seletor que permite estilizar uma parte espec\\xEDfica do(s) elemento(s) selecionado(s). Eles podem ser usados para decora\\xE7\\xE3o (\",(0,o.jsx)(e.code,{children:\"::first-line\"}),\", \",(0,o.jsx)(e.code,{children:\"::first-letter\"}),\") ou adicionando elementos \\xE0 marca\\xE7\\xE3o (combinado com \",(0,o.jsx)(e.code,{children:\"content: ...\"}),\") sem ter que modificar a marca\\xE7\\xE3o (\",(0,o.jsx)(e.code,{children:\":before\"}),\", \",(0,o.jsx)(e.code,{children:\":after\"}),\").\"]}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:\"::first-line\"}),\" e \",(0,o.jsx)(e.code,{children:\"::first-letter\"}),\" podem ser usados para decorar o texto.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Usado no truque \",(0,o.jsx)(e.code,{children:\".clearfix\"}),\" conforme mostrado acima, para adicionar um elemento de espa\\xE7o zero com \",(0,o.jsx)(e.code,{children:\"clear: both\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"As setas triangulares em tooltips utilizam \",(0,o.jsx)(e.code,{children:\"::before\"}),\" e \",(0,o.jsx)(e.code,{children:\"::after\"}),\". Incentiva a separa\\xE7\\xE3o de responsabilidades porque o tri\\xE2ngulo \\xE9 considerado parte do estilo e n\\xE3o realmente do DOM.\"]}),`\n`]}),`\n`,(0,o.jsx)(e.h2,{children:\"Notas\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"Pseudo-elementos s\\xE3o diferentes de \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\",children:\"pseudo-classes\"}),\", que s\\xE3o usados para estilizar um elemento baseado em seu \",(0,o.jsx)(e.em,{children:\"state\"}),\" (como \",(0,o.jsx)(e.code,{children:\":hover\"}),\", \",(0,o.jsx)(e.code,{children:\":focus\"}),\", etc).\"]}),`\n`,(0,o.jsx)(e.li,{children:\"Dois-pontos devem ser usados em vez de dois-pontos para distinguir pseudo-classes de pseudo-elementos. A maioria dos navegadores suporta ambas as sintaxes, pois essa distin\\xE7\\xE3o n\\xE3o estava clara nas especifica\\xE7\\xF5es antigas do W3C.\"}),`\n`]}),`\n`,(0,o.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\",children:\"Pseudo-elements - CSS | MDN\"})}),`\n`]})]})}function z(s={}){let{wrapper:e}=s.components||{};return e?(0,o.jsx)(e,Object.assign({},s,{children:(0,o.jsx)(l,s)})):l(s)}var C=z;return v(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var v=(s,e)=>()=>(e||s((e={exports:{}}).exports,e),e.exports),x=(s,e)=>{for(var a in e)r(s,a,{get:e[a],enumerable:!0})},i=(s,e,a,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of p(e))!S.call(s,n)&&n!==a&&r(s,n,{get:()=>e[n],enumerable:!(d=h(e,n))||d.enumerable});return s};var b=(s,e,a)=>(a=s!=null?u(f(s)):{},i(e||!s||!s.__esModule?r(a,\"default\",{value:s,enumerable:!0}):a,s)),g=s=>i(r({},\"__esModule\",{value:!0}),s);var c=v((q,t)=>{t.exports=_jsx_runtime});var C={};x(C,{default:()=>m,frontmatter:()=>z});var o=b(c()),z={title:\"Descreva pseudo-elementos e discuta para que eles s\\xE3o usados.\"};function l(s){let e={a:\"a\",code:\"code\",em:\"em\",h2:\"h2\",li:\"li\",p:\"p\",ul:\"ul\",...s.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Um CSS \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\",children:\"pseudo-element\"}),\" \\xE9 uma palavra-chave adicionada a um seletor que permite estilizar uma parte espec\\xEDfica do(s) elemento(s) selecionado(s). Eles podem ser usados para decora\\xE7\\xE3o (\",(0,o.jsx)(e.code,{children:\"::first-line\"}),\", \",(0,o.jsx)(e.code,{children:\"::first-letter\"}),\") ou adicionando elementos \\xE0 marca\\xE7\\xE3o (combinado com \",(0,o.jsx)(e.code,{children:\"content: ...\"}),\") sem ter que modificar a marca\\xE7\\xE3o (\",(0,o.jsx)(e.code,{children:\":before\"}),\", \",(0,o.jsx)(e.code,{children:\":after\"}),\").\"]}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:\"::first-line\"}),\" e \",(0,o.jsx)(e.code,{children:\"::first-letter\"}),\" podem ser usados para decorar o texto.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Usado no truque \",(0,o.jsx)(e.code,{children:\".clearfix\"}),\" conforme mostrado acima, para adicionar um elemento de espa\\xE7o zero com \",(0,o.jsx)(e.code,{children:\"clear: both\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"As setas triangulares em tooltips utilizam \",(0,o.jsx)(e.code,{children:\"::before\"}),\" e \",(0,o.jsx)(e.code,{children:\"::after\"}),\". Incentiva a separa\\xE7\\xE3o de responsabilidades porque o tri\\xE2ngulo \\xE9 considerado parte do estilo e n\\xE3o realmente do DOM.\"]}),`\n`]}),`\n`,(0,o.jsx)(e.h2,{children:\"Notas\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"Pseudo-elementos s\\xE3o diferentes de \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\",children:\"pseudo-classes\"}),\", que s\\xE3o usados para estilizar um elemento baseado em seu \",(0,o.jsx)(e.em,{children:\"state\"}),\" (como \",(0,o.jsx)(e.code,{children:\":hover\"}),\", \",(0,o.jsx)(e.code,{children:\":focus\"}),\", etc).\"]}),`\n`,(0,o.jsx)(e.li,{children:\"Dois-pontos devem ser usados em vez de dois-pontos para distinguir pseudo-classes de pseudo-elementos. A maioria dos navegadores suporta ambas as sintaxes, pois essa distin\\xE7\\xE3o n\\xE3o estava clara nas especifica\\xE7\\xF5es antigas do W3C.\"}),`\n`]}),`\n`,(0,o.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\",children:\"Pseudo-elements - CSS | MDN\"})}),`\n`]})]})}function m(s={}){let{wrapper:e}=s.components||{};return e?(0,o.jsx)(e,{...s,children:(0,o.jsx)(l,{...s})}):l(s)}return g(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for/zh-CN.json b/apps/web/src/__generated__/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for/zh-CN.json
index 8cb8fa37d..9f711b3d8 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var d=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var p=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),x=(r,e)=>{for(var c in e)d(r,c,{get:e[c],enumerable:!0})},o=(r,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of m(e))!S.call(r,l)&&l!==c&&d(r,l,{get:()=>e[l],enumerable:!(i=f(e,l))||i.enumerable});return r};var b=(r,e,c)=>(c=r!=null?a(u(r)):{},o(e||!r||!r.__esModule?d(c,\"default\",{value:r,enumerable:!0}):c,r)),C=r=>o(d({},\"__esModule\",{value:!0}),r);var h=p((D,t)=>{t.exports=_jsx_runtime});var M={};x(M,{default:()=>_,frontmatter:()=>g});var n=b(h()),g={title:\"\\u63CF\\u8FF0\\u4F2A\\u5143\\u7D20\\u5E76\\u8BA8\\u8BBA\\u5B83\\u4EEC\\u7684\\u4F7F\\u7528\\u3002\"};function s(r){let e=Object.assign({p:\"p\",a:\"a\",code:\"code\",ul:\"ul\",li:\"li\",h2:\"h2\",em:\"em\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"CSS \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\",children:\"\\u4F2A\\u5143\\u7D20\"}),\" \\u662F\\u6DFB\\u52A0\\u5230\\u9009\\u62E9\\u5668\\u7684\\u5173\\u952E\\u5B57\\uFF0C\\u53EF\\u8BA9\\u60A8\\u8BBE\\u7F6E\\u6240\\u9009\\u5143\\u7D20\\u7279\\u5B9A\\u90E8\\u5206\\u7684\\u6837\\u5F0F\\u3002\\u5B83\\u4EEC\\u53EF\\u7528\\u4E8E\\u88C5\\u9970 (\",(0,n.jsx)(e.code,{children:\"::first-line\"}),\", \",(0,n.jsx)(e.code,{children:\"::first-letter\"}),\") \\u6216\\u5C06\\u5143\\u7D20\\u6DFB\\u52A0\\u5230\\u6807\\u8BB0\\u4E2D\\uFF08\\u4E0E \",(0,n.jsx)(e.code,{children:\"content: ...\"}),\" \\u7ED3\\u5408\\u4F7F\\u7528\\uFF09\\uFF0C\\u800C\\u65E0\\u9700\\u4FEE\\u6539\\u6807\\u8BB0 (\",(0,n.jsx)(e.code,{children:\":before\"}),\", \",(0,n.jsx)(e.code,{children:\":after\"}),\")\\u3002\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"::first-line\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"::first-letter\"}),\" \\u53EF\\u7528\\u4E8E\\u88C5\\u9970\\u6587\\u672C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5728\\u4E0A\\u9762\\u663E\\u793A\\u7684 \",(0,n.jsx)(e.code,{children:\".clearfix\"}),\" hack \\u4E2D\\u4F7F\\u7528\\uFF0C\\u4EE5\\u6DFB\\u52A0\\u4E00\\u4E2A\\u5E26\\u6709 \",(0,n.jsx)(e.code,{children:\"clear: both\"}),\" \\u7684\\u96F6\\u7A7A\\u95F4\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5DE5\\u5177\\u63D0\\u793A\\u4E2D\\u7684\\u4E09\\u89D2\\u5F62\\u7BAD\\u5934\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"::before\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"::after\"}),\"\\u3002 \\u9F13\\u52B1\\u5173\\u6CE8\\u70B9\\u5206\\u79BB\\uFF0C\\u56E0\\u4E3A\\u4E09\\u89D2\\u5F62\\u88AB\\u8BA4\\u4E3A\\u662F\\u6837\\u5F0F\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u800C\\u4E0D\\u662F\\u771F\\u6B63\\u7684 DOM\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7B14\\u8BB0\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4F2A\\u5143\\u7D20\\u4E0E \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\",children:\"\\u4F2A\\u7C7B\"}),\" \\u4E0D\\u540C\\uFF0C\\u4F2A\\u7C7B\\u7528\\u4E8E\\u6839\\u636E\\u5143\\u7D20\\u7684\",(0,n.jsx)(e.em,{children:\"\\u72B6\\u6001\"}),\"\\uFF08\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\":hover\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\":focus\"}),\" \\u7B49\\uFF09\\u8BBE\\u7F6E\\u5143\\u7D20\\u7684\\u6837\\u5F0F\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5E94\\u4F7F\\u7528\\u53CC\\u5192\\u53F7\\u800C\\u4E0D\\u662F\\u5355\\u5192\\u53F7\\u6765\\u533A\\u5206\\u4F2A\\u7C7B\\u548C\\u4F2A\\u5143\\u7D20\\u3002 \\u5927\\u591A\\u6570\\u6D4F\\u89C8\\u5668\\u90FD\\u652F\\u6301\\u8FD9\\u4E24\\u79CD\\u8BED\\u6CD5\\uFF0C\\u56E0\\u4E3A\\u8FD9\\u79CD\\u533A\\u522B\\u5728\\u65E7\\u7248 W3C \\u89C4\\u8303\\u4E2D\\u5E76\\u4E0D\\u660E\\u786E\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u53C2\\u8003\"}),`\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/Web/CSS/Pseudo-elements\",children:\"\\u4F2A\\u5143\\u7D20 - CSS | MDN\"})}),`\n`]})]})}function j(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(s,r)})):s(r)}var _=j;return C(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var f=Object.create;var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var x=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),C=(r,e)=>{for(var c in e)d(r,c,{get:e[c],enumerable:!0})},o=(r,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of u(e))!p.call(r,l)&&l!==c&&d(r,l,{get:()=>e[l],enumerable:!(i=m(e,l))||i.enumerable});return r};var _=(r,e,c)=>(c=r!=null?f(S(r)):{},o(e||!r||!r.__esModule?d(c,\"default\",{value:r,enumerable:!0}):c,r)),b=r=>o(d({},\"__esModule\",{value:!0}),r);var h=x((v,t)=>{t.exports=_jsx_runtime});var j={};C(j,{default:()=>a,frontmatter:()=>g});var n=_(h()),g={title:\"\\u63CF\\u8FF0\\u4F2A\\u5143\\u7D20\\u5E76\\u8BA8\\u8BBA\\u5B83\\u4EEC\\u7684\\u4F7F\\u7528\\u3002\"};function s(r){let e={a:\"a\",code:\"code\",em:\"em\",h2:\"h2\",li:\"li\",p:\"p\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"CSS \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\",children:\"\\u4F2A\\u5143\\u7D20\"}),\" \\u662F\\u6DFB\\u52A0\\u5230\\u9009\\u62E9\\u5668\\u7684\\u5173\\u952E\\u5B57\\uFF0C\\u53EF\\u8BA9\\u60A8\\u8BBE\\u7F6E\\u6240\\u9009\\u5143\\u7D20\\u7279\\u5B9A\\u90E8\\u5206\\u7684\\u6837\\u5F0F\\u3002\\u5B83\\u4EEC\\u53EF\\u7528\\u4E8E\\u88C5\\u9970 (\",(0,n.jsx)(e.code,{children:\"::first-line\"}),\", \",(0,n.jsx)(e.code,{children:\"::first-letter\"}),\") \\u6216\\u5C06\\u5143\\u7D20\\u6DFB\\u52A0\\u5230\\u6807\\u8BB0\\u4E2D\\uFF08\\u4E0E \",(0,n.jsx)(e.code,{children:\"content: ...\"}),\" \\u7ED3\\u5408\\u4F7F\\u7528\\uFF09\\uFF0C\\u800C\\u65E0\\u9700\\u4FEE\\u6539\\u6807\\u8BB0 (\",(0,n.jsx)(e.code,{children:\":before\"}),\", \",(0,n.jsx)(e.code,{children:\":after\"}),\")\\u3002\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"::first-line\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"::first-letter\"}),\" \\u53EF\\u7528\\u4E8E\\u88C5\\u9970\\u6587\\u672C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5728\\u4E0A\\u9762\\u663E\\u793A\\u7684 \",(0,n.jsx)(e.code,{children:\".clearfix\"}),\" hack \\u4E2D\\u4F7F\\u7528\\uFF0C\\u4EE5\\u6DFB\\u52A0\\u4E00\\u4E2A\\u5E26\\u6709 \",(0,n.jsx)(e.code,{children:\"clear: both\"}),\" \\u7684\\u96F6\\u7A7A\\u95F4\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5DE5\\u5177\\u63D0\\u793A\\u4E2D\\u7684\\u4E09\\u89D2\\u5F62\\u7BAD\\u5934\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"::before\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"::after\"}),\"\\u3002 \\u9F13\\u52B1\\u5173\\u6CE8\\u70B9\\u5206\\u79BB\\uFF0C\\u56E0\\u4E3A\\u4E09\\u89D2\\u5F62\\u88AB\\u8BA4\\u4E3A\\u662F\\u6837\\u5F0F\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u800C\\u4E0D\\u662F\\u771F\\u6B63\\u7684 DOM\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7B14\\u8BB0\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4F2A\\u5143\\u7D20\\u4E0E \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\",children:\"\\u4F2A\\u7C7B\"}),\" \\u4E0D\\u540C\\uFF0C\\u4F2A\\u7C7B\\u7528\\u4E8E\\u6839\\u636E\\u5143\\u7D20\\u7684\",(0,n.jsx)(e.em,{children:\"\\u72B6\\u6001\"}),\"\\uFF08\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\":hover\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\":focus\"}),\" \\u7B49\\uFF09\\u8BBE\\u7F6E\\u5143\\u7D20\\u7684\\u6837\\u5F0F\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5E94\\u4F7F\\u7528\\u53CC\\u5192\\u53F7\\u800C\\u4E0D\\u662F\\u5355\\u5192\\u53F7\\u6765\\u533A\\u5206\\u4F2A\\u7C7B\\u548C\\u4F2A\\u5143\\u7D20\\u3002 \\u5927\\u591A\\u6570\\u6D4F\\u89C8\\u5668\\u90FD\\u652F\\u6301\\u8FD9\\u4E24\\u79CD\\u8BED\\u6CD5\\uFF0C\\u56E0\\u4E3A\\u8FD9\\u79CD\\u533A\\u522B\\u5728\\u65E7\\u7248 W3C \\u89C4\\u8303\\u4E2D\\u5E76\\u4E0D\\u660E\\u786E\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u53C2\\u8003\"}),`\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/Web/CSS/Pseudo-elements\",children:\"\\u4F2A\\u5143\\u7D20 - CSS | MDN\"})}),`\n`]})]})}function a(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(s,{...r})}):s(r)}return b(j);})();\n;return Component;"
 }
\ No newline at end of file
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 f0b7222d0..e1bded09e 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
@@ -33,5 +33,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var o in e)r(n,o,{get:e[o],enumerable:!0})},a=(n,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!m.call(n,i)&&i!==o&&r(n,i,{get:()=>e[i],enumerable:!(s=g(e,i))||s.enumerable});return n};var S=(n,e,o)=>(o=n!=null?h(p(n)):{},a(e||!n||!n.__esModule?r(o,\"default\",{value:n,enumerable:!0}):o,n)),y=n=>a(r({},\"__esModule\",{value:!0}),n);var l=f((I,c)=>{c.exports=_jsx_runtime});var T={};b(T,{default:()=>w,frontmatter:()=>k});var t=S(l()),k={title:\"Describe the difference between a cookie, `sessionStorage` and `localStorage` in browsers\"};function d(n){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",a:\"a\",ul:\"ul\",li:\"li\",strong:\"strong\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",hr:\"hr\",h3:\"h3\",pre:\"pre\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"All of the following are mechanisms of storing data on the client, the user's browser in this case. \",(0,t.jsx)(e.code,{children:\"localStorage\"}),\" and \",(0,t.jsx)(e.code,{children:\"sessionStorage\"}),\" both implement the \",(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API\",children:\"Web Storage API interface\"}),\".\"]}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Cookies\"}),\": Suitable for server-client communication, small storage capacity, can be persistent or session-based, domain-specific. Sent to the server on every request.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:(0,t.jsx)(e.code,{children:\"localStorage\"})}),\": Suitable for long-term storage, data persists even after the browser is closed, accessible across all tabs and windows of the same origin, highest storage capacity among the three.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:(0,t.jsx)(e.code,{children:\"sessionStorage\"})}),\": Suitable for temporary data within a single page session, data is cleared when the tab or window is closed, has a higher storage capacity compared to cookies.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.p,{children:\"Here's a table summarizing the 3 client storage mechanisms.\"}),`\n`,(0,t.jsxs)(e.table,{children:[(0,t.jsx)(e.thead,{children:(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.th,{children:\"Property\"}),(0,t.jsx)(e.th,{children:\"Cookie\"}),(0,t.jsx)(e.th,{children:(0,t.jsx)(e.code,{children:\"localStorage\"})}),(0,t.jsx)(e.th,{children:(0,t.jsx)(e.code,{children:\"sessionStorage\"})})]})}),(0,t.jsxs)(e.tbody,{children:[(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Initiator\"}),(0,t.jsxs)(e.td,{children:[\"Client or server. Server can use \",(0,t.jsx)(e.code,{children:\"Set-Cookie\"}),\" header\"]}),(0,t.jsx)(e.td,{children:\"Client\"}),(0,t.jsx)(e.td,{children:\"Client\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Lifespan\"}),(0,t.jsx)(e.td,{children:\"As specified\"}),(0,t.jsx)(e.td,{children:\"Until deleted\"}),(0,t.jsx)(e.td,{children:\"Until tab is closed\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Persistent across browser sessions\"}),(0,t.jsx)(e.td,{children:\"If a future expiry date is set\"}),(0,t.jsx)(e.td,{children:\"Yes\"}),(0,t.jsx)(e.td,{children:\"No\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Sent to server with every HTTP request\"}),(0,t.jsxs)(e.td,{children:[\"Yes, sent via \",(0,t.jsx)(e.code,{children:\"Cookie\"}),\" header\"]}),(0,t.jsx)(e.td,{children:\"No\"}),(0,t.jsx)(e.td,{children:\"No\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Total capacity (per domain)\"}),(0,t.jsx)(e.td,{children:\"4kb\"}),(0,t.jsx)(e.td,{children:\"5MB\"}),(0,t.jsx)(e.td,{children:\"5MB\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Access\"}),(0,t.jsx)(e.td,{children:\"Across windows/tabs\"}),(0,t.jsx)(e.td,{children:\"Across windows/tabs\"}),(0,t.jsx)(e.td,{children:\"Same tab\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Security\"}),(0,t.jsxs)(e.td,{children:[\"JavaScript cannot access \",(0,t.jsx)(e.code,{children:\"HttpOnly\"}),\" cookies\"]}),(0,t.jsx)(e.td,{children:\"None\"}),(0,t.jsx)(e.td,{children:\"None\"})]})]})]}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"Storage on the web\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Cookies, \",(0,t.jsx)(e.code,{children:\"localStorage\"}),\", and \",(0,t.jsx)(e.code,{children:\"sessionStorage\"}),\", are all storage mechanisms on the client (web browser). It is useful to store data on the client for client-only state like access tokens, themes, personalized layouts, so that users can have a consistent experience on a website across tabs and usage sessions.\"]}),`\n`,(0,t.jsx)(e.p,{children:\"These client-side storage mechanisms have the following common properties:\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[\"This means the clients can read and modify the values (except for \",(0,t.jsx)(e.code,{children:\"HttpOnly\"}),\" cookies).\"]}),`\n`,(0,t.jsx)(e.li,{children:\"Key-value based storage.\"}),`\n`,(0,t.jsxs)(e.li,{children:[\"They are only able to store values as strings. Non-strings will have to be serialized into a string (e.g. \",(0,t.jsx)(e.code,{children:\"JSON.stringify()\"}),\") in order to be stored.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Use cases for each storage mechanism\"}),`\n`,(0,t.jsx)(e.p,{children:\"Since cookies have a relatively low maximum size, it is not advisable to store all your client-side data within cookies. The distinguishing properties about cookies are that cookies are sent to the server on every HTTP request so the low maximum size is a feature that prevents your HTTP requests from being too large due to cookies. Automatic expiry of cookies is a useful feature as well.\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"With that in mind, the best kind of data to store within cookies is small pieces of data that needs to be transmitted to the server, such as auth tokens, session IDs, analytics tracking IDs, GDPR cookie consent, language preferences that are important for authentication, authorization, and rendering on the server. These values are sometimes sensitive and can benefit from the \",(0,t.jsx)(e.code,{children:\"HttpOnly\"}),\", \",(0,t.jsx)(e.code,{children:\"Secure\"}),\", and \",(0,t.jsx)(e.code,{children:\"Expires\"}),\"/\",(0,t.jsx)(e.code,{children:\"Max-Age\"}),\" capabilities that cookies provide.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"localStorage\"}),\" and \",(0,t.jsx)(e.code,{children:\"sessionStorage\"}),\" both implement the \",(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API\",children:\"Web Storage API interface\"}),\". Web Storages have a generous total capacity of 5MB, so storage size is usually not a concern. The key difference is that values stored in Web Storage are not automatically sent along HTTP requests.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"While you can manually include values from Web Storage when making AJAX/\",(0,t.jsx)(e.code,{children:\"fetch()\"}),\" requests, the browser does not include them in the initial request / first load of the page. Hence Web Storage should not be used to store data that is relied on by the server for the initial rendering of the page if server-side rendering is being used (typically authentication/authorization-related information). \",(0,t.jsx)(e.code,{children:\"localStorage\"}),\" is most suitable for user preferences data that do not expire, like themes and layouts (if it is not important for the server to render the final layout). \",(0,t.jsx)(e.code,{children:\"sessionStorage\"}),\" is most suitable for temporary data that only needs to be accessible within the current browsing session, such as form data (useful to preserve data during accidental reloads).\"]}),`\n`,(0,t.jsx)(e.p,{children:\"The following sections dive deeper into each client storage mechanism.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Cookies\"}),`\n`,(0,t.jsx)(e.p,{children:\"Cookies are used to store small pieces of data on the client side that can be sent back to the server with every HTTP request.\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Storage capacity\"}),\": Limited to around 4KB for all cookies.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Lifespan\"}),\": Cookies can have a specific expiration date set using the \",(0,t.jsx)(e.code,{children:\"Expires\"}),\" or \",(0,t.jsx)(e.code,{children:\"Max-Age\"}),\" attributes. If no expiration date is set, the cookie is deleted when the browser is closed (session cookie).\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Access\"}),\": Cookies are domain-specific and can be shared across different pages and subdomains within the same domain.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Security\"}),\": Cookies can be marked as \",(0,t.jsx)(e.code,{children:\"HttpOnly\"}),\" to prevent access from JavaScript, reducing the risk of XSS attacks. They can also be secured with the \",(0,t.jsx)(e.code,{children:\"Secure\"}),\" flag to ensure they are sent only when HTTPS is used.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`// Set a cookie for the name/key \\`auth_token\\` with an expiry.\ndocument.cookie =\n  'auth_token=abc123def; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/';\n\n// Read all cookies. There's no way to read specific cookies using \\`document.cookie\\`.\n// You have to parse the string yourself.\nconsole.log(document.cookie); // auth_token=abc123def\n\n// Delete the cookie with the name/key \\`auth_token\\` by setting an\n// expiry date in the past. The value doesn't matter.\ndocument.cookie = 'auth_token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"It is a pain to read/write to cookies. \",(0,t.jsx)(e.code,{children:\"document.cookie\"}),\" returns a single string containing all the key/value pairs delimited by \",(0,t.jsx)(e.code,{children:\";\"}),\" and you have to parse the string yourself. The \",(0,t.jsx)(e.a,{href:\"https://github.com/js-cookie/js-cookie\",children:(0,t.jsx)(e.code,{children:\"js-cookie\"})}),\" npm library provides a simple and lightweight API for reading/writing cookies in JavaScript.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"A modern native way of accessing cookies is via the \",(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API\",children:\"Cookie Store API\"}),\" which is only available on HTTPS pages.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`// Set a cookie. More options are available too.\ncookieStore.set('auth_token', 'abc123def');\n\n// Async method to access a single cookie and do something with it.\ncookieStore.get('auth_token').then(...);\n\n// Async method to get all cookies.\ncookieStore.getAll().then(...);\n\n// Async method to delete a single cookie.\ncookieStore.delete('auth_token').then(() =>\n  console.log('Cookie deleted')\n);\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"The CookieStore API is relatively new and may not be supported in all browsers (supported in latest Chrome and Edge as of June 2024). Refer to \",(0,t.jsx)(e.a,{href:\"https://caniuse.com/mdn-api_cookiestore\",children:\"caniuse.com\"}),\" for the latest compatibility.\"]}),`\n`,(0,t.jsx)(e.h3,{children:(0,t.jsx)(e.code,{children:\"localStorage\"})}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"localStorage\"}),\" is used for storing data that persists even after the browser is closed and reopened. It is designed for long-term storage of data.\"]}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Storage capacity\"}),\": Typically around 5MB per origin (varies by browser).\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Lifespan\"}),\": Data in \",(0,t.jsx)(e.code,{children:\"localStorage\"}),\" persists until explicitly deleted by the user or the application.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Access\"}),\": Data is accessible within all tabs and windows of the same origin.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Security\"}),\": All JavaScript on the page have access to values within \",(0,t.jsx)(e.code,{children:\"localStorage\"}),\".\"]}),`\n`]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`// Set a value in localStorage.\nlocalStorage.setItem('key', 'value');\n\n// Get a value from localStorage.\nconsole.log(localStorage.getItem('key'));\n\n// Remove a value from localStorage.\nlocalStorage.removeItem('key');\n\n// Clear all data in localStorage.\nlocalStorage.clear();\n`})}),`\n`,(0,t.jsx)(e.h3,{children:(0,t.jsx)(e.code,{children:\"sessionStorage\"})}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"sessionStorage\"}),\" is used to store data for the duration of the page session. It is designed for temporary storage of data.\"]}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Storage Capacity\"}),\": Typically around 5MB per origin (varies by browser).\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Lifespan\"}),\": Data in \",(0,t.jsx)(e.code,{children:\"sessionStorage\"}),\" is cleared when the page session ends (i.e., when the browser or tab is closed). Reloading the page does not destroy data within \",(0,t.jsx)(e.code,{children:\"sessionStorage\"}),\".\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Access\"}),\": Data is only accessible within the current tab or window. Different tabs or windows with the same page will have different \",(0,t.jsx)(e.code,{children:\"sessionStorage\"}),\" objects.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Security\"}),\": All JavaScript on the same page have access to values within \",(0,t.jsx)(e.code,{children:\"sessionStorage\"}),\" for that page.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`// Set a value in sessionStorage.\nsessionStorage.setItem('key', 'value');\n\n// Get a value from sessionStorage.\nconsole.log(sessionStorage.getItem('key'));\n\n// Remove a value from sessionStorage.\nsessionStorage.removeItem('key');\n\n// Clear all data in sessionStorage.\nsessionStorage.clear();\n`})}),`\n`,(0,t.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"There are also other client-side storage mechanisms like \",(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API\",children:\"IndexedDB\"}),\" which is more powerful than the above-mentioned technologies but more complicated to use.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"References\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies\",children:\"What is the difference between localStorage, sessionStorage, session and cookies?\"})}),`\n`]})]})}function v(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(d,n)})):d(n)}var w=v;return y(T);})();\n;return Component;"
+  "solution": "var Component=(()=>{var g=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),S=(n,e)=>{for(var o in e)r(n,o,{get:e[o],enumerable:!0})},a=(n,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!f.call(n,i)&&i!==o&&r(n,i,{get:()=>e[i],enumerable:!(s=u(e,i))||s.enumerable});return n};var y=(n,e,o)=>(o=n!=null?g(m(n)):{},a(e||!n||!n.__esModule?r(o,\"default\",{value:n,enumerable:!0}):o,n)),k=n=>a(r({},\"__esModule\",{value:!0}),n);var l=b((A,c)=>{c.exports=_jsx_runtime});var w={};S(w,{default:()=>h,frontmatter:()=>v});var t=y(l()),v={title:\"Describe the difference between a cookie, `sessionStorage` and `localStorage` in browsers\"};function d(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"All of the following are mechanisms of storing data on the client, the user's browser in this case. \",(0,t.jsx)(e.code,{children:\"localStorage\"}),\" and \",(0,t.jsx)(e.code,{children:\"sessionStorage\"}),\" both implement the \",(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API\",children:\"Web Storage API interface\"}),\".\"]}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Cookies\"}),\": Suitable for server-client communication, small storage capacity, can be persistent or session-based, domain-specific. Sent to the server on every request.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:(0,t.jsx)(e.code,{children:\"localStorage\"})}),\": Suitable for long-term storage, data persists even after the browser is closed, accessible across all tabs and windows of the same origin, highest storage capacity among the three.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:(0,t.jsx)(e.code,{children:\"sessionStorage\"})}),\": Suitable for temporary data within a single page session, data is cleared when the tab or window is closed, has a higher storage capacity compared to cookies.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.p,{children:\"Here's a table summarizing the 3 client storage mechanisms.\"}),`\n`,(0,t.jsxs)(e.table,{children:[(0,t.jsx)(e.thead,{children:(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.th,{children:\"Property\"}),(0,t.jsx)(e.th,{children:\"Cookie\"}),(0,t.jsx)(e.th,{children:(0,t.jsx)(e.code,{children:\"localStorage\"})}),(0,t.jsx)(e.th,{children:(0,t.jsx)(e.code,{children:\"sessionStorage\"})})]})}),(0,t.jsxs)(e.tbody,{children:[(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Initiator\"}),(0,t.jsxs)(e.td,{children:[\"Client or server. Server can use \",(0,t.jsx)(e.code,{children:\"Set-Cookie\"}),\" header\"]}),(0,t.jsx)(e.td,{children:\"Client\"}),(0,t.jsx)(e.td,{children:\"Client\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Lifespan\"}),(0,t.jsx)(e.td,{children:\"As specified\"}),(0,t.jsx)(e.td,{children:\"Until deleted\"}),(0,t.jsx)(e.td,{children:\"Until tab is closed\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Persistent across browser sessions\"}),(0,t.jsx)(e.td,{children:\"If a future expiry date is set\"}),(0,t.jsx)(e.td,{children:\"Yes\"}),(0,t.jsx)(e.td,{children:\"No\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Sent to server with every HTTP request\"}),(0,t.jsxs)(e.td,{children:[\"Yes, sent via \",(0,t.jsx)(e.code,{children:\"Cookie\"}),\" header\"]}),(0,t.jsx)(e.td,{children:\"No\"}),(0,t.jsx)(e.td,{children:\"No\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Total capacity (per domain)\"}),(0,t.jsx)(e.td,{children:\"4kb\"}),(0,t.jsx)(e.td,{children:\"5MB\"}),(0,t.jsx)(e.td,{children:\"5MB\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Access\"}),(0,t.jsx)(e.td,{children:\"Across windows/tabs\"}),(0,t.jsx)(e.td,{children:\"Across windows/tabs\"}),(0,t.jsx)(e.td,{children:\"Same tab\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Security\"}),(0,t.jsxs)(e.td,{children:[\"JavaScript cannot access \",(0,t.jsx)(e.code,{children:\"HttpOnly\"}),\" cookies\"]}),(0,t.jsx)(e.td,{children:\"None\"}),(0,t.jsx)(e.td,{children:\"None\"})]})]})]}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"Storage on the web\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Cookies, \",(0,t.jsx)(e.code,{children:\"localStorage\"}),\", and \",(0,t.jsx)(e.code,{children:\"sessionStorage\"}),\", are all storage mechanisms on the client (web browser). It is useful to store data on the client for client-only state like access tokens, themes, personalized layouts, so that users can have a consistent experience on a website across tabs and usage sessions.\"]}),`\n`,(0,t.jsx)(e.p,{children:\"These client-side storage mechanisms have the following common properties:\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[\"This means the clients can read and modify the values (except for \",(0,t.jsx)(e.code,{children:\"HttpOnly\"}),\" cookies).\"]}),`\n`,(0,t.jsx)(e.li,{children:\"Key-value based storage.\"}),`\n`,(0,t.jsxs)(e.li,{children:[\"They are only able to store values as strings. Non-strings will have to be serialized into a string (e.g. \",(0,t.jsx)(e.code,{children:\"JSON.stringify()\"}),\") in order to be stored.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Use cases for each storage mechanism\"}),`\n`,(0,t.jsx)(e.p,{children:\"Since cookies have a relatively low maximum size, it is not advisable to store all your client-side data within cookies. The distinguishing properties about cookies are that cookies are sent to the server on every HTTP request so the low maximum size is a feature that prevents your HTTP requests from being too large due to cookies. Automatic expiry of cookies is a useful feature as well.\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"With that in mind, the best kind of data to store within cookies is small pieces of data that needs to be transmitted to the server, such as auth tokens, session IDs, analytics tracking IDs, GDPR cookie consent, language preferences that are important for authentication, authorization, and rendering on the server. These values are sometimes sensitive and can benefit from the \",(0,t.jsx)(e.code,{children:\"HttpOnly\"}),\", \",(0,t.jsx)(e.code,{children:\"Secure\"}),\", and \",(0,t.jsx)(e.code,{children:\"Expires\"}),\"/\",(0,t.jsx)(e.code,{children:\"Max-Age\"}),\" capabilities that cookies provide.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"localStorage\"}),\" and \",(0,t.jsx)(e.code,{children:\"sessionStorage\"}),\" both implement the \",(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API\",children:\"Web Storage API interface\"}),\". Web Storages have a generous total capacity of 5MB, so storage size is usually not a concern. The key difference is that values stored in Web Storage are not automatically sent along HTTP requests.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"While you can manually include values from Web Storage when making AJAX/\",(0,t.jsx)(e.code,{children:\"fetch()\"}),\" requests, the browser does not include them in the initial request / first load of the page. Hence Web Storage should not be used to store data that is relied on by the server for the initial rendering of the page if server-side rendering is being used (typically authentication/authorization-related information). \",(0,t.jsx)(e.code,{children:\"localStorage\"}),\" is most suitable for user preferences data that do not expire, like themes and layouts (if it is not important for the server to render the final layout). \",(0,t.jsx)(e.code,{children:\"sessionStorage\"}),\" is most suitable for temporary data that only needs to be accessible within the current browsing session, such as form data (useful to preserve data during accidental reloads).\"]}),`\n`,(0,t.jsx)(e.p,{children:\"The following sections dive deeper into each client storage mechanism.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Cookies\"}),`\n`,(0,t.jsx)(e.p,{children:\"Cookies are used to store small pieces of data on the client side that can be sent back to the server with every HTTP request.\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Storage capacity\"}),\": Limited to around 4KB for all cookies.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Lifespan\"}),\": Cookies can have a specific expiration date set using the \",(0,t.jsx)(e.code,{children:\"Expires\"}),\" or \",(0,t.jsx)(e.code,{children:\"Max-Age\"}),\" attributes. If no expiration date is set, the cookie is deleted when the browser is closed (session cookie).\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Access\"}),\": Cookies are domain-specific and can be shared across different pages and subdomains within the same domain.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Security\"}),\": Cookies can be marked as \",(0,t.jsx)(e.code,{children:\"HttpOnly\"}),\" to prevent access from JavaScript, reducing the risk of XSS attacks. They can also be secured with the \",(0,t.jsx)(e.code,{children:\"Secure\"}),\" flag to ensure they are sent only when HTTPS is used.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`// Set a cookie for the name/key \\`auth_token\\` with an expiry.\ndocument.cookie =\n  'auth_token=abc123def; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/';\n\n// Read all cookies. There's no way to read specific cookies using \\`document.cookie\\`.\n// You have to parse the string yourself.\nconsole.log(document.cookie); // auth_token=abc123def\n\n// Delete the cookie with the name/key \\`auth_token\\` by setting an\n// expiry date in the past. The value doesn't matter.\ndocument.cookie = 'auth_token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"It is a pain to read/write to cookies. \",(0,t.jsx)(e.code,{children:\"document.cookie\"}),\" returns a single string containing all the key/value pairs delimited by \",(0,t.jsx)(e.code,{children:\";\"}),\" and you have to parse the string yourself. The \",(0,t.jsx)(e.a,{href:\"https://github.com/js-cookie/js-cookie\",children:(0,t.jsx)(e.code,{children:\"js-cookie\"})}),\" npm library provides a simple and lightweight API for reading/writing cookies in JavaScript.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"A modern native way of accessing cookies is via the \",(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API\",children:\"Cookie Store API\"}),\" which is only available on HTTPS pages.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`// Set a cookie. More options are available too.\ncookieStore.set('auth_token', 'abc123def');\n\n// Async method to access a single cookie and do something with it.\ncookieStore.get('auth_token').then(...);\n\n// Async method to get all cookies.\ncookieStore.getAll().then(...);\n\n// Async method to delete a single cookie.\ncookieStore.delete('auth_token').then(() =>\n  console.log('Cookie deleted')\n);\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"The CookieStore API is relatively new and may not be supported in all browsers (supported in latest Chrome and Edge as of June 2024). Refer to \",(0,t.jsx)(e.a,{href:\"https://caniuse.com/mdn-api_cookiestore\",children:\"caniuse.com\"}),\" for the latest compatibility.\"]}),`\n`,(0,t.jsx)(e.h3,{children:(0,t.jsx)(e.code,{children:\"localStorage\"})}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"localStorage\"}),\" is used for storing data that persists even after the browser is closed and reopened. It is designed for long-term storage of data.\"]}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Storage capacity\"}),\": Typically around 5MB per origin (varies by browser).\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Lifespan\"}),\": Data in \",(0,t.jsx)(e.code,{children:\"localStorage\"}),\" persists until explicitly deleted by the user or the application.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Access\"}),\": Data is accessible within all tabs and windows of the same origin.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Security\"}),\": All JavaScript on the page have access to values within \",(0,t.jsx)(e.code,{children:\"localStorage\"}),\".\"]}),`\n`]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`// Set a value in localStorage.\nlocalStorage.setItem('key', 'value');\n\n// Get a value from localStorage.\nconsole.log(localStorage.getItem('key'));\n\n// Remove a value from localStorage.\nlocalStorage.removeItem('key');\n\n// Clear all data in localStorage.\nlocalStorage.clear();\n`})}),`\n`,(0,t.jsx)(e.h3,{children:(0,t.jsx)(e.code,{children:\"sessionStorage\"})}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"sessionStorage\"}),\" is used to store data for the duration of the page session. It is designed for temporary storage of data.\"]}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Storage Capacity\"}),\": Typically around 5MB per origin (varies by browser).\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Lifespan\"}),\": Data in \",(0,t.jsx)(e.code,{children:\"sessionStorage\"}),\" is cleared when the page session ends (i.e., when the browser or tab is closed). Reloading the page does not destroy data within \",(0,t.jsx)(e.code,{children:\"sessionStorage\"}),\".\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Access\"}),\": Data is only accessible within the current tab or window. Different tabs or windows with the same page will have different \",(0,t.jsx)(e.code,{children:\"sessionStorage\"}),\" objects.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Security\"}),\": All JavaScript on the same page have access to values within \",(0,t.jsx)(e.code,{children:\"sessionStorage\"}),\" for that page.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`// Set a value in sessionStorage.\nsessionStorage.setItem('key', 'value');\n\n// Get a value from sessionStorage.\nconsole.log(sessionStorage.getItem('key'));\n\n// Remove a value from sessionStorage.\nsessionStorage.removeItem('key');\n\n// Clear all data in sessionStorage.\nsessionStorage.clear();\n`})}),`\n`,(0,t.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"There are also other client-side storage mechanisms like \",(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API\",children:\"IndexedDB\"}),\" which is more powerful than the above-mentioned technologies but more complicated to use.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"References\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies\",children:\"What is the difference between localStorage, sessionStorage, session and cookies?\"})}),`\n`]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(d,{...n})}):d(n)}return k(w);})();\n;return Component;"
 }
\ No newline at end of file
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 59cc1db3b..a078e1cea 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
@@ -33,5 +33,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),g=(o,e)=>{for(var r in e)i(o,r,{get:e[r],enumerable:!0})},n=(o,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!b.call(o,a)&&a!==r&&i(o,a,{get:()=>e[a],enumerable:!(d=m(e,a))||d.enumerable});return o};var v=(o,e,r)=>(r=o!=null?h(p(o)):{},n(e||!o||!o.__esModule?i(r,\"default\",{value:o,enumerable:!0}):r,o)),y=o=>n(i({},\"__esModule\",{value:!0}),o);var c=f((z,s)=>{s.exports=_jsx_runtime});var S={};g(S,{default:()=>C,frontmatter:()=>w});var t=v(c()),w={title:\"Descreva a diferen\\xE7a entre cookie, `sessionStorage` e `localStorage`.\"};function l(o){let e=Object.assign({p:\"p\",h2:\"h2\",code:\"code\",ul:\"ul\",li:\"li\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",a:\"a\"},o.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.p,{children:\"Local storage is useful for storing data that the user will need to access later, such as offline data, because it stores the data in the browser and the system. This data will persist even if the user closes and reopens the browser and is accessible by other sites.\"}),`\n`,(0,t.jsx)(e.p,{children:\"Session storage is a great way to improve the performance of your web applications. It stores data locally on the browser but is specific to (and only accessible by) the respective site/browser tab and is only available while the user is on the site/tab. This is a more secure storage method due to the restrictive access and promotes better site performance due to reduced data transfer between server and client.\"}),`\n`,(0,t.jsx)(e.p,{children:\"Cookies are a good choice for storing data that should not be persisted for a long time, such as session IDs. Cookies allow you to set an expiry time at which point it would be deleted. Cookies can only be smaller sized data compared to the other two storage methods.\"}),`\n`,(0,t.jsx)(e.h2,{children:\"Similaridades\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Cookies, \",(0,t.jsx)(e.code,{children:\"localStorage\"}),\", and \",(0,t.jsx)(e.code,{children:\"sessionStorage\"}),\", s\\xE3o todos:\"]}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"Mecanismos de armazenamento no lado do cliente. Isso significa que os clientes podem ler e modificar os valores.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Armazenamento baseado em chave-valor.\"}),`\n`,(0,t.jsxs)(e.li,{children:[\"Eles s\\xF3 s\\xE3o capazes de armazenar valores como strings. Objetos ter\\xE3o que ser serializados em uma string (\",(0,t.jsx)(e.code,{children:\"JSON.stringify()\"}),\") a fim de serem armazenados.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h2,{children:\"Diferen\\xE7as\"}),`\n`,(0,t.jsxs)(e.table,{children:[(0,t.jsx)(e.thead,{children:(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.th,{children:\"Propriedade\"}),(0,t.jsx)(e.th,{children:\"Cookie\"}),(0,t.jsx)(e.th,{children:(0,t.jsx)(e.code,{children:\"localStorage\"})}),(0,t.jsx)(e.th,{children:(0,t.jsx)(e.code,{children:\"sessionStorage\"})})]})}),(0,t.jsxs)(e.tbody,{children:[(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Iniciador\"}),(0,t.jsxs)(e.td,{children:[\"Cliente ou servidor. O servidor pode usar o cabe\\xE7alho \",(0,t.jsx)(e.code,{children:\"Set-Cookie\"})]}),(0,t.jsx)(e.td,{children:\"Cliente\"}),(0,t.jsx)(e.td,{children:\"Cliente\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Vencimento\"}),(0,t.jsx)(e.td,{children:\"Definir manualmente\"}),(0,t.jsx)(e.td,{children:\"Para sempre\"}),(0,t.jsx)(e.td,{children:\"Ao fechar a aba\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Persistente atrav\\xE9s de sess\\xF5es do navegador\"}),(0,t.jsx)(e.td,{children:\"Depende se a expira\\xE7\\xE3o est\\xE1 definida\"}),(0,t.jsx)(e.td,{children:\"Sim\"}),(0,t.jsx)(e.td,{children:\"N\\xE3o\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Enviado para o servidor com cada solicita\\xE7\\xE3o HTTP\"}),(0,t.jsxs)(e.td,{children:[\"Os cookies s\\xE3o automaticamente enviados via cabe\\xE7alho \",(0,t.jsx)(e.code,{children:\"Cookie\"})]}),(0,t.jsx)(e.td,{children:\"N\\xE3o\"}),(0,t.jsx)(e.td,{children:\"N\\xE3o\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Capacidade (por dom\\xEDnio)\"}),(0,t.jsx)(e.td,{children:\"4kb\"}),(0,t.jsx)(e.td,{children:\"5MB\"}),(0,t.jsx)(e.td,{children:\"5MB\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Acesso\"}),(0,t.jsx)(e.td,{children:\"Quqlquer Janela\"}),(0,t.jsx)(e.td,{children:\"Quqlquer Janela\"}),(0,t.jsx)(e.td,{children:\"Mesma Guia\"})]})]})]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Tamb\\xE9m existem outros mecanismos de armazenamento do lado do cliente, como \",(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API\",children:\"IndexedDB\"}),\" que \\xE9 mais poderoso do que as tecnologias acima mencionadas, mas mais complicado de usar.\"]})]})}function x(o={}){let{wrapper:e}=o.components||{};return e?(0,t.jsx)(e,Object.assign({},o,{children:(0,t.jsx)(l,o)})):l(o)}var C=x;return y(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},n=(t,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!f.call(t,a)&&a!==r&&i(t,a,{get:()=>e[a],enumerable:!(d=u(e,a))||d.enumerable});return t};var y=(t,e,r)=>(r=t!=null?m(b(t)):{},n(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),w=t=>n(i({},\"__esModule\",{value:!0}),t);var c=g((k,s)=>{s.exports=_jsx_runtime});var C={};v(C,{default:()=>h,frontmatter:()=>x});var o=y(c()),x={title:\"Descreva a diferen\\xE7a entre cookie, `sessionStorage` e `localStorage`.\"};function l(t){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...t.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.p,{children:\"Local storage is useful for storing data that the user will need to access later, such as offline data, because it stores the data in the browser and the system. This data will persist even if the user closes and reopens the browser and is accessible by other sites.\"}),`\n`,(0,o.jsx)(e.p,{children:\"Session storage is a great way to improve the performance of your web applications. It stores data locally on the browser but is specific to (and only accessible by) the respective site/browser tab and is only available while the user is on the site/tab. This is a more secure storage method due to the restrictive access and promotes better site performance due to reduced data transfer between server and client.\"}),`\n`,(0,o.jsx)(e.p,{children:\"Cookies are a good choice for storing data that should not be persisted for a long time, such as session IDs. Cookies allow you to set an expiry time at which point it would be deleted. Cookies can only be smaller sized data compared to the other two storage methods.\"}),`\n`,(0,o.jsx)(e.h2,{children:\"Similaridades\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Cookies, \",(0,o.jsx)(e.code,{children:\"localStorage\"}),\", and \",(0,o.jsx)(e.code,{children:\"sessionStorage\"}),\", s\\xE3o todos:\"]}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"Mecanismos de armazenamento no lado do cliente. Isso significa que os clientes podem ler e modificar os valores.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Armazenamento baseado em chave-valor.\"}),`\n`,(0,o.jsxs)(e.li,{children:[\"Eles s\\xF3 s\\xE3o capazes de armazenar valores como strings. Objetos ter\\xE3o que ser serializados em uma string (\",(0,o.jsx)(e.code,{children:\"JSON.stringify()\"}),\") a fim de serem armazenados.\"]}),`\n`]}),`\n`,(0,o.jsx)(e.h2,{children:\"Diferen\\xE7as\"}),`\n`,(0,o.jsxs)(e.table,{children:[(0,o.jsx)(e.thead,{children:(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.th,{children:\"Propriedade\"}),(0,o.jsx)(e.th,{children:\"Cookie\"}),(0,o.jsx)(e.th,{children:(0,o.jsx)(e.code,{children:\"localStorage\"})}),(0,o.jsx)(e.th,{children:(0,o.jsx)(e.code,{children:\"sessionStorage\"})})]})}),(0,o.jsxs)(e.tbody,{children:[(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:\"Iniciador\"}),(0,o.jsxs)(e.td,{children:[\"Cliente ou servidor. O servidor pode usar o cabe\\xE7alho \",(0,o.jsx)(e.code,{children:\"Set-Cookie\"})]}),(0,o.jsx)(e.td,{children:\"Cliente\"}),(0,o.jsx)(e.td,{children:\"Cliente\"})]}),(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:\"Vencimento\"}),(0,o.jsx)(e.td,{children:\"Definir manualmente\"}),(0,o.jsx)(e.td,{children:\"Para sempre\"}),(0,o.jsx)(e.td,{children:\"Ao fechar a aba\"})]}),(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:\"Persistente atrav\\xE9s de sess\\xF5es do navegador\"}),(0,o.jsx)(e.td,{children:\"Depende se a expira\\xE7\\xE3o est\\xE1 definida\"}),(0,o.jsx)(e.td,{children:\"Sim\"}),(0,o.jsx)(e.td,{children:\"N\\xE3o\"})]}),(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:\"Enviado para o servidor com cada solicita\\xE7\\xE3o HTTP\"}),(0,o.jsxs)(e.td,{children:[\"Os cookies s\\xE3o automaticamente enviados via cabe\\xE7alho \",(0,o.jsx)(e.code,{children:\"Cookie\"})]}),(0,o.jsx)(e.td,{children:\"N\\xE3o\"}),(0,o.jsx)(e.td,{children:\"N\\xE3o\"})]}),(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:\"Capacidade (por dom\\xEDnio)\"}),(0,o.jsx)(e.td,{children:\"4kb\"}),(0,o.jsx)(e.td,{children:\"5MB\"}),(0,o.jsx)(e.td,{children:\"5MB\"})]}),(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:\"Acesso\"}),(0,o.jsx)(e.td,{children:\"Quqlquer Janela\"}),(0,o.jsx)(e.td,{children:\"Quqlquer Janela\"}),(0,o.jsx)(e.td,{children:\"Mesma Guia\"})]})]})]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Tamb\\xE9m existem outros mecanismos de armazenamento do lado do cliente, como \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API\",children:\"IndexedDB\"}),\" que \\xE9 mais poderoso do que as tecnologias acima mencionadas, mas mais complicado de usar.\"]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(l,{...t})}):l(t)}return w(C);})();\n;return Component;"
 }
\ No newline at end of file
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 e3546115c..6e030d23d 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
@@ -33,5 +33,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var u=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),m=(o,e)=>{for(var c in e)i(o,c,{get:e[c],enumerable:!0})},d=(o,e,c,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of S(e))!p.call(o,r)&&r!==c&&i(o,r,{get:()=>e[r],enumerable:!(l=g(e,r))||l.enumerable});return o};var b=(o,e,c)=>(c=o!=null?s(k(o)):{},d(e||!o||!o.__esModule?i(c,\"default\",{value:o,enumerable:!0}):c,o)),f=o=>d(i({},\"__esModule\",{value:!0}),o);var h=u((C,t)=>{t.exports=_jsx_runtime});var _={};m(_,{default:()=>I,frontmatter:()=>v});var n=b(h()),v={title:\"\\u63CF\\u8FF0\\u6D4F\\u89C8\\u5668\\u4E2D cookie\\u3001`sessionStorage` \\u548C `localStorage` \\u4E4B\\u95F4\\u7684\\u533A\\u522B\"};function a(o){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",a:\"a\",ul:\"ul\",li:\"li\",strong:\"strong\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",hr:\"hr\",h3:\"h3\",pre:\"pre\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4EE5\\u4E0B\\u90FD\\u662F\\u5728\\u5BA2\\u6237\\u7AEF\\uFF08\\u672C\\u4F8B\\u4E2D\\u4E3A\\u7528\\u6237\\u7684\\u6D4F\\u89C8\\u5668\\uFF09\\u4E0A\\u5B58\\u50A8\\u6570\\u636E\\u7684\\u673A\\u5236\\u3002\",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" \\u90FD\\u5B9E\\u73B0\\u4E86 \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API\",children:\"Web Storage API \\u63A5\\u53E3\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Cookies\"}),\"\\uFF1A\\u9002\\u7528\\u4E8E\\u670D\\u52A1\\u5668-\\u5BA2\\u6237\\u7AEF\\u901A\\u4FE1\\uFF0C\\u5B58\\u50A8\\u5BB9\\u91CF\\u5C0F\\uFF0C\\u53EF\\u4EE5\\u662F\\u6301\\u4E45\\u6027\\u7684\\u6216\\u57FA\\u4E8E\\u4F1A\\u8BDD\\u7684\\uFF0C\\u7279\\u5B9A\\u4E8E\\u57DF\\u3002\\u5728\\u6BCF\\u6B21\\u8BF7\\u6C42\\u65F6\\u53D1\\u9001\\u5230\\u670D\\u52A1\\u5668\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"localStorage\"})}),\"\\uFF1A\\u9002\\u7528\\u4E8E\\u957F\\u671F\\u5B58\\u50A8\\uFF0C\\u5373\\u4F7F\\u5728\\u6D4F\\u89C8\\u5668\\u5173\\u95ED\\u540E\\u6570\\u636E\\u4ECD\\u7136\\u5B58\\u5728\\uFF0C\\u53EF\\u5728\\u540C\\u4E00\\u6765\\u6E90\\u7684\\u6240\\u6709\\u9009\\u9879\\u5361\\u548C\\u7A97\\u53E3\\u4E2D\\u8BBF\\u95EE\\uFF0C\\u5728\\u4E09\\u8005\\u4E2D\\u5B58\\u50A8\\u5BB9\\u91CF\\u6700\\u9AD8\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"sessionStorage\"})}),\"\\uFF1A\\u9002\\u7528\\u4E8E\\u5355\\u4E2A\\u9875\\u9762\\u4F1A\\u8BDD\\u4E2D\\u7684\\u4E34\\u65F6\\u6570\\u636E\\uFF0C\\u5F53\\u9009\\u9879\\u5361\\u6216\\u7A97\\u53E3\\u5173\\u95ED\\u65F6\\u6570\\u636E\\u5C06\\u88AB\\u6E05\\u9664\\uFF0C\\u4E0E cookies \\u76F8\\u6BD4\\u5177\\u6709\\u66F4\\u9AD8\\u7684\\u5B58\\u50A8\\u5BB9\\u91CF\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u8868\\u683C\\u603B\\u7ED3\\u4E86 3 \\u79CD\\u5BA2\\u6237\\u7AEF\\u5B58\\u50A8\\u673A\\u5236\\u3002\"}),`\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:\"\\u5C5E\\u6027\"}),(0,n.jsx)(e.th,{children:\"Cookie\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"localStorage\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"sessionStorage\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u53D1\\u8D77\\u8005\"}),(0,n.jsxs)(e.td,{children:[\"\\u5BA2\\u6237\\u7AEF\\u6216\\u670D\\u52A1\\u5668\\u3002\\u670D\\u52A1\\u5668\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Set-Cookie\"}),\" \\u6807\\u5934\"]}),(0,n.jsx)(e.td,{children:\"\\u5BA2\\u6237\\u7AEF\"}),(0,n.jsx)(e.td,{children:\"\\u5BA2\\u6237\\u7AEF\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u5BFF\\u547D\"}),(0,n.jsx)(e.td,{children:\"\\u5982\\u6307\\u5B9A\"}),(0,n.jsx)(e.td,{children:\"\\u76F4\\u5230\\u5220\\u9664\"}),(0,n.jsx)(e.td,{children:\"\\u76F4\\u5230\\u9009\\u9879\\u5361\\u5173\\u95ED\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u662F\\u5426\\u8DE8\\u6D4F\\u89C8\\u5668\\u4F1A\\u8BDD\\u6301\\u4E45\"}),(0,n.jsx)(e.td,{children:\"\\u5982\\u679C\\u8BBE\\u7F6E\\u4E86\\u672A\\u6765\\u7684\\u8FC7\\u671F\\u65E5\\u671F\"}),(0,n.jsx)(e.td,{children:\"\\u662F\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u662F\\u5426\\u968F\\u6BCF\\u4E2A HTTP \\u8BF7\\u6C42\\u53D1\\u9001\\u5230\\u670D\\u52A1\\u5668\"}),(0,n.jsxs)(e.td,{children:[\"\\u662F\\uFF0C\\u901A\\u8FC7 \",(0,n.jsx)(e.code,{children:\"Cookie\"}),\" \\u6807\\u5934\\u53D1\\u9001\"]}),(0,n.jsx)(e.td,{children:\"\\u5426\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u603B\\u5BB9\\u91CF\\uFF08\\u6BCF\\u4E2A\\u57DF\\uFF09\"}),(0,n.jsx)(e.td,{children:\"4kb\"}),(0,n.jsx)(e.td,{children:\"5MB\"}),(0,n.jsx)(e.td,{children:\"5MB\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u8BBF\\u95EE\"}),(0,n.jsx)(e.td,{children:\"\\u8DE8\\u7A97\\u53E3/\\u9009\\u9879\\u5361\"}),(0,n.jsx)(e.td,{children:\"\\u8DE8\\u7A97\\u53E3/\\u9009\\u9879\\u5361\"}),(0,n.jsx)(e.td,{children:\"\\u76F8\\u540C\\u9009\\u9879\\u5361\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u5B89\\u5168\\u6027\"}),(0,n.jsxs)(e.td,{children:[\"JavaScript \\u65E0\\u6CD5\\u8BBF\\u95EE \",(0,n.jsx)(e.code,{children:\"HttpOnly\"}),\" cookies\"]}),(0,n.jsx)(e.td,{children:\"\\u65E0\"}),(0,n.jsx)(e.td,{children:\"\\u65E0\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Web \\u4E0A\\u7684\\u5B58\\u50A8\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Cookies\\u3001\",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" \\u90FD\\u662F\\u5BA2\\u6237\\u7AEF\\uFF08Web \\u6D4F\\u89C8\\u5668\\uFF09\\u4E0A\\u7684\\u5B58\\u50A8\\u673A\\u5236\\u3002\\u5728\\u5BA2\\u6237\\u7AEF\\u5B58\\u50A8\\u6570\\u636E\\u5BF9\\u4E8E\\u4EC5\\u5BA2\\u6237\\u7AEF\\u7684\\u72B6\\u6001\\u5F88\\u6709\\u7528\\uFF0C\\u4F8B\\u5982\\u8BBF\\u95EE\\u4EE4\\u724C\\u3001\\u4E3B\\u9898\\u3001\\u4E2A\\u6027\\u5316\\u5E03\\u5C40\\uFF0C\\u4EE5\\u4FBF\\u7528\\u6237\\u53EF\\u4EE5\\u5728\\u8DE8\\u9009\\u9879\\u5361\\u548C\\u4F7F\\u7528\\u4F1A\\u8BDD\\u7684\\u7F51\\u7AD9\\u4E0A\\u83B7\\u5F97\\u4E00\\u81F4\\u7684\\u4F53\\u9A8C\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD9\\u4E9B\\u5BA2\\u6237\\u7AEF\\u5B58\\u50A8\\u673A\\u5236\\u5177\\u6709\\u4EE5\\u4E0B\\u5E38\\u89C1\\u5C5E\\u6027\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u8FD9\\u610F\\u5473\\u7740\\u5BA2\\u6237\\u7AEF\\u53EF\\u4EE5\\u8BFB\\u53D6\\u548C\\u4FEE\\u6539\\u503C\\uFF08\",(0,n.jsx)(e.code,{children:\"HttpOnly\"}),\" cookies \\u9664\\u5916\\uFF09\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u57FA\\u4E8E\\u952E\\u503C\\u5BF9\\u7684\\u5B58\\u50A8\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5B83\\u4EEC\\u53EA\\u80FD\\u5C06\\u503C\\u5B58\\u50A8\\u4E3A\\u5B57\\u7B26\\u4E32\\u3002\\u975E\\u5B57\\u7B26\\u4E32\\u5FC5\\u987B\\u88AB\\u5E8F\\u5217\\u5316\\u4E3A\\u5B57\\u7B26\\u4E32\\uFF08\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"JSON.stringify()\"}),\"\\uFF09\\u624D\\u80FD\\u88AB\\u5B58\\u50A8\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6BCF\\u79CD\\u5B58\\u50A8\\u673A\\u5236\\u7684\\u7528\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u7531\\u4E8E cookies \\u7684\\u6700\\u5927\\u5927\\u5C0F\\u76F8\\u5BF9\\u8F83\\u5C0F\\uFF0C\\u56E0\\u6B64\\u4E0D\\u5EFA\\u8BAE\\u5C06\\u6240\\u6709\\u5BA2\\u6237\\u7AEF\\u6570\\u636E\\u5B58\\u50A8\\u5728 cookies \\u4E2D\\u3002\\u5173\\u4E8E cookies \\u7684\\u663E\\u8457\\u7279\\u6027\\u662F cookies \\u4F1A\\u5728\\u6BCF\\u4E2A HTTP \\u8BF7\\u6C42\\u4E2D\\u53D1\\u9001\\u5230\\u670D\\u52A1\\u5668\\uFF0C\\u56E0\\u6B64\\u8F83\\u5C0F\\u7684\\u6700\\u5927\\u5927\\u5C0F\\u662F\\u4E00\\u4E2A\\u7279\\u6027\\uFF0C\\u53EF\\u4EE5\\u9632\\u6B62\\u60A8\\u7684 HTTP \\u8BF7\\u6C42\\u7531\\u4E8E cookies \\u800C\\u53D8\\u5F97\\u8FC7\\u5927\\u3002cookies \\u7684\\u81EA\\u52A8\\u8FC7\\u671F\\u4E5F\\u662F\\u4E00\\u4E2A\\u6709\\u7528\\u7684\\u7279\\u6027\\u3002\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8003\\u8651\\u5230\\u8FD9\\u4E00\\u70B9\\uFF0C\\u6700\\u9002\\u5408\\u5B58\\u50A8\\u5728 cookies \\u4E2D\\u7684\\u6570\\u636E\\u662F\\u9700\\u8981\\u4F20\\u8F93\\u5230\\u670D\\u52A1\\u5668\\u7684\\u5C0F\\u5757\\u6570\\u636E\\uFF0C\\u4F8B\\u5982\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u4EE4\\u724C\\u3001\\u4F1A\\u8BDD ID\\u3001\\u5206\\u6790\\u8DDF\\u8E2A ID\\u3001GDPR cookie \\u540C\\u610F\\u3001\\u5BF9\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u3001\\u6388\\u6743\\u548C\\u5728\\u670D\\u52A1\\u5668\\u4E0A\\u5448\\u73B0\\u5F88\\u91CD\\u8981\\u7684\\u8BED\\u8A00\\u504F\\u597D\\u3002\\u8FD9\\u4E9B\\u503C\\u6709\\u65F6\\u5F88\\u654F\\u611F\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u4ECE cookies \\u63D0\\u4F9B\\u7684 \",(0,n.jsx)(e.code,{children:\"HttpOnly\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"Secure\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Expires\"}),\"/\",(0,n.jsx)(e.code,{children:\"Max-Age\"}),\" \\u529F\\u80FD\\u4E2D\\u53D7\\u76CA\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" \\u90FD\\u5B9E\\u73B0\\u4E86 \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API\",children:\"Web Storage API \\u63A5\\u53E3\"}),\"\\u3002Web Storages \\u5177\\u6709 5MB \\u7684\\u603B\\u5BB9\\u91CF\\uFF0C\\u56E0\\u6B64\\u5B58\\u50A8\\u5927\\u5C0F\\u901A\\u5E38\\u4E0D\\u662F\\u95EE\\u9898\\u3002\\u5173\\u952E\\u7684\\u533A\\u522B\\u5728\\u4E8E\\uFF0C\\u5B58\\u50A8\\u5728 Web Storage \\u4E2D\\u7684\\u503C\\u4E0D\\u4F1A\\u81EA\\u52A8\\u968F HTTP \\u8BF7\\u6C42\\u4E00\\u8D77\\u53D1\\u9001\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u867D\\u7136\\u60A8\\u53EF\\u4EE5\\u5728\\u53D1\\u51FA AJAX/\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u8BF7\\u6C42\\u65F6\\u624B\\u52A8\\u5305\\u542B\\u6765\\u81EA Web Storage \\u7684\\u503C\\uFF0C\\u4F46\\u6D4F\\u89C8\\u5668\\u4E0D\\u4F1A\\u5728\\u9875\\u9762\\u7684\\u521D\\u59CB\\u8BF7\\u6C42/\\u9996\\u6B21\\u52A0\\u8F7D\\u4E2D\\u5305\\u542B\\u5B83\\u4EEC\\u3002\\u56E0\\u6B64\\uFF0C\\u5982\\u679C\\u4F7F\\u7528\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\uFF08\\u901A\\u5E38\\u662F\\u4E0E\\u8EAB\\u4EFD\\u9A8C\\u8BC1/\\u6388\\u6743\\u76F8\\u5173\\u7684\\u4FE1\\u606F\\uFF09\\uFF0C\\u5219\\u4E0D\\u5E94\\u4F7F\\u7528 Web Storage \\u6765\\u5B58\\u50A8\\u670D\\u52A1\\u5668\\u7528\\u4E8E\\u9875\\u9762\\u521D\\u59CB\\u6E32\\u67D3\\u6240\\u4F9D\\u8D56\\u7684\\u6570\\u636E\\u3002\",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u6700\\u9002\\u5408\\u4E0D\\u5931\\u6548\\u7684\\u7528\\u6237\\u504F\\u597D\\u6570\\u636E\\uFF0C\\u4F8B\\u5982\\u4E3B\\u9898\\u548C\\u5E03\\u5C40\\uFF08\\u5982\\u679C\\u670D\\u52A1\\u5668\\u6E32\\u67D3\\u6700\\u7EC8\\u5E03\\u5C40\\u5E76\\u4E0D\\u91CD\\u8981\\uFF09\\u3002\",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" \\u6700\\u9002\\u5408\\u53EA\\u9700\\u8981\\u5728\\u5F53\\u524D\\u6D4F\\u89C8\\u4F1A\\u8BDD\\u4E2D\\u8BBF\\u95EE\\u7684\\u4E34\\u65F6\\u6570\\u636E\\uFF0C\\u4F8B\\u5982\\u8868\\u5355\\u6570\\u636E\\uFF08\\u7528\\u4E8E\\u5728\\u610F\\u5916\\u91CD\\u65B0\\u52A0\\u8F7D\\u671F\\u95F4\\u4FDD\\u7559\\u6570\\u636E\\uFF09\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u90E8\\u5206\\u6DF1\\u5165\\u63A2\\u8BA8\\u4E86\\u6BCF\\u79CD\\u5BA2\\u6237\\u7AEF\\u5B58\\u50A8\\u673A\\u5236\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Cookies\"}),`\n`,(0,n.jsx)(e.p,{children:\"Cookies \\u7528\\u4E8E\\u5728\\u5BA2\\u6237\\u7AEF\\u5B58\\u50A8\\u5C0F\\u5757\\u6570\\u636E\\uFF0C\\u8FD9\\u4E9B\\u6570\\u636E\\u53EF\\u4EE5\\u901A\\u8FC7\\u6BCF\\u4E2A HTTP \\u8BF7\\u6C42\\u53D1\\u9001\\u56DE\\u670D\\u52A1\\u5668\\u3002\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5B58\\u50A8\\u5BB9\\u91CF\"}),\"\\uFF1A\\u6240\\u6709 cookies \\u9650\\u5236\\u5728 4KB \\u5DE6\\u53F3\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5BFF\\u547D\"}),\"\\uFF1ACookies \\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Expires\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"Max-Age\"}),\" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u7279\\u5B9A\\u7684\\u8FC7\\u671F\\u65E5\\u671F\\u3002\\u5982\\u679C\\u672A\\u8BBE\\u7F6E\\u8FC7\\u671F\\u65E5\\u671F\\uFF0C\\u5219\\u5728\\u6D4F\\u89C8\\u5668\\u5173\\u95ED\\u65F6\\u5220\\u9664 cookie\\uFF08\\u4F1A\\u8BDD cookie\\uFF09\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8BBF\\u95EE\"}),\"\\uFF1ACookies \\u662F\\u7279\\u5B9A\\u4E8E\\u57DF\\u7684\\uFF0C\\u53EF\\u4EE5\\u5728\\u540C\\u4E00\\u57DF\\u5185\\u7684\\u4E0D\\u540C\\u9875\\u9762\\u548C\\u5B50\\u57DF\\u4E4B\\u95F4\\u5171\\u4EAB\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5B89\\u5168\\u6027\"}),\"\\uFF1ACookies \\u53EF\\u4EE5\\u6807\\u8BB0\\u4E3A \",(0,n.jsx)(e.code,{children:\"HttpOnly\"}),\" \\u4EE5\\u9632\\u6B62\\u4ECE JavaScript \\u8BBF\\u95EE\\uFF0C\\u4ECE\\u800C\\u964D\\u4F4E XSS \\u653B\\u51FB\\u7684\\u98CE\\u9669\\u3002\\u5B83\\u4EEC\\u4E5F\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Secure\"}),\" \\u6807\\u5FD7\\u8FDB\\u884C\\u4FDD\\u62A4\\uFF0C\\u4EE5\\u786E\\u4FDD\\u4EC5\\u5728\\u4F7F\\u7528 HTTPS \\u65F6\\u53D1\\u9001\\u5B83\\u4EEC\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Set a cookie for the name/key \\`auth_token\\` with an expiry.\ndocument.cookie =\n  'auth_token=abc123def; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/';\n\n// Read all cookies. There's no way to read specific cookies using \\`document.cookie\\`.\n// You have to parse the string yourself.\nconsole.log(document.cookie); // auth_token=abc123def\n\n// Delete the cookie with the name/key \\`auth_token\\` by setting an\n// expiry date in the past. The value doesn't matter.\ndocument.cookie = 'auth_token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8BFB\\u53D6/\\u5199\\u5165 Cookie \\u662F\\u4E00\\u4EF6\\u5F88\\u75DB\\u82E6\\u7684\\u4E8B\\u60C5\\u3002\",(0,n.jsx)(e.code,{children:\"document.cookie\"}),\" \\u8FD4\\u56DE\\u4E00\\u4E2A\\u5305\\u542B\\u6240\\u6709\\u7531 \",(0,n.jsx)(e.code,{children:\";\"}),\" \\u5206\\u9694\\u7684\\u952E/\\u503C\\u5BF9\\u7684\\u5B57\\u7B26\\u4E32\\uFF0C\\u60A8\\u5FC5\\u987B\\u81EA\\u5DF1\\u89E3\\u6790\\u8BE5\\u5B57\\u7B26\\u4E32\\u3002\",(0,n.jsx)(e.a,{href:\"https://github.com/js-cookie/js-cookie\",children:(0,n.jsx)(e.code,{children:\"js-cookie\"})}),\" npm \\u5E93\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u7B80\\u5355\\u8F7B\\u91CF\\u7EA7\\u7684 API\\uFF0C\\u7528\\u4E8E\\u5728 JavaScript \\u4E2D\\u8BFB\\u5199 Cookie\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8BBF\\u95EE Cookie \\u7684\\u73B0\\u4EE3\\u539F\\u751F\\u65B9\\u5F0F\\u662F\\u901A\\u8FC7 \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API\",children:\"Cookie Store API\"}),\"\\uFF0C\\u8BE5 API \\u4EC5\\u5728 HTTPS \\u9875\\u9762\\u4E0A\\u53EF\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Set a cookie. More options are available too.\ncookieStore.set('auth_token', 'abc123def');\n\n// Async method to access a single cookie and do something with it.\ncookieStore.get('auth_token').then(...);\n\n// Async method to get all cookies.\ncookieStore.getAll().then(...);\n\n// Async method to delete a single cookie.\ncookieStore.delete('auth_token').then(() =>\n  console.log('Cookie deleted')\n);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"CookieStore API \\u76F8\\u5BF9\\u8F83\\u65B0\\uFF0C\\u53EF\\u80FD\\u5E76\\u975E\\u6240\\u6709\\u6D4F\\u89C8\\u5668\\u90FD\\u652F\\u6301\\uFF08\\u622A\\u81F3 2024 \\u5E74 6 \\u6708\\uFF0C\\u5728\\u6700\\u65B0\\u7684 Chrome \\u548C Edge \\u4E2D\\u53D7\\u652F\\u6301\\uFF09\\u3002\\u8BF7\\u53C2\\u9605 \",(0,n.jsx)(e.a,{href:\"https://caniuse.com/mdn-api_cookiestore\",children:\"caniuse.com\"}),\" \\u4EE5\\u83B7\\u53D6\\u6700\\u65B0\\u7684\\u517C\\u5BB9\\u6027\\u4FE1\\u606F\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"localStorage\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u7528\\u4E8E\\u5B58\\u50A8\\u5373\\u4F7F\\u5728\\u6D4F\\u89C8\\u5668\\u5173\\u95ED\\u5E76\\u91CD\\u65B0\\u6253\\u5F00\\u540E\\u4ECD\\u4FDD\\u7559\\u7684\\u6570\\u636E\\u3002\\u5B83\\u4E13\\u4E3A\\u957F\\u671F\\u5B58\\u50A8\\u6570\\u636E\\u800C\\u8BBE\\u8BA1\\u3002\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5B58\\u50A8\\u5BB9\\u91CF\"}),\"\\uFF1A\\u901A\\u5E38\\u6BCF\\u4E2A\\u6765\\u6E90\\u7EA6 5MB\\uFF08\\u56E0\\u6D4F\\u89C8\\u5668\\u800C\\u5F02\\uFF09\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u751F\\u547D\\u5468\\u671F\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u4E2D\\u7684\\u6570\\u636E\\u4F1A\\u4E00\\u76F4\\u5B58\\u5728\\uFF0C\\u76F4\\u5230\\u7528\\u6237\\u6216\\u5E94\\u7528\\u7A0B\\u5E8F\\u663E\\u5F0F\\u5220\\u9664\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8BBF\\u95EE\"}),\"\\uFF1A\\u6570\\u636E\\u53EF\\u5728\\u540C\\u4E00\\u6765\\u6E90\\u7684\\u6240\\u6709\\u9009\\u9879\\u5361\\u548C\\u7A97\\u53E3\\u4E2D\\u8BBF\\u95EE\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5B89\\u5168\\u6027\"}),\"\\uFF1A\\u9875\\u9762\\u4E0A\\u7684\\u6240\\u6709 JavaScript \\u90FD\\u53EF\\u4EE5\\u8BBF\\u95EE \",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u4E2D\\u7684\\u503C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Set a value in localStorage.\nlocalStorage.setItem('key', 'value');\n\n// Get a value from localStorage.\nconsole.log(localStorage.getItem('key'));\n\n// Remove a value from localStorage.\nlocalStorage.removeItem('key');\n\n// Clear all data in localStorage.\nlocalStorage.clear();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"sessionStorage\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" \\u7528\\u4E8E\\u5B58\\u50A8\\u9875\\u9762\\u4F1A\\u8BDD\\u671F\\u95F4\\u7684\\u6570\\u636E\\u3002\\u5B83\\u4E13\\u4E3A\\u4E34\\u65F6\\u5B58\\u50A8\\u6570\\u636E\\u800C\\u8BBE\\u8BA1\\u3002\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5B58\\u50A8\\u5BB9\\u91CF\"}),\"\\uFF1A\\u901A\\u5E38\\u6BCF\\u4E2A\\u6765\\u6E90\\u7EA6 5MB\\uFF08\\u56E0\\u6D4F\\u89C8\\u5668\\u800C\\u5F02\\uFF09\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u751F\\u547D\\u5468\\u671F\"}),\"\\uFF1A\\u5F53\\u9875\\u9762\\u4F1A\\u8BDD\\u7ED3\\u675F\\u65F6\\uFF08\\u5373\\uFF0C\\u5F53\\u6D4F\\u89C8\\u5668\\u6216\\u9009\\u9879\\u5361\\u5173\\u95ED\\u65F6\\uFF09\\uFF0C\",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" \\u4E2D\\u7684\\u6570\\u636E\\u5C06\\u88AB\\u6E05\\u9664\\u3002\\u91CD\\u65B0\\u52A0\\u8F7D\\u9875\\u9762\\u4E0D\\u4F1A\\u9500\\u6BC1 \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" \\u4E2D\\u7684\\u6570\\u636E\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8BBF\\u95EE\"}),\"\\uFF1A\\u6570\\u636E\\u4EC5\\u5728\\u5F53\\u524D\\u9009\\u9879\\u5361\\u6216\\u7A97\\u53E3\\u4E2D\\u53EF\\u8BBF\\u95EE\\u3002\\u5177\\u6709\\u76F8\\u540C\\u9875\\u9762\\u7684\\u4E0D\\u540C\\u9009\\u9879\\u5361\\u6216\\u7A97\\u53E3\\u5C06\\u5177\\u6709\\u4E0D\\u540C\\u7684 \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" \\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5B89\\u5168\\u6027\"}),\"\\uFF1A\\u540C\\u4E00\\u9875\\u9762\\u4E0A\\u7684\\u6240\\u6709 JavaScript \\u90FD\\u53EF\\u4EE5\\u8BBF\\u95EE\\u8BE5\\u9875\\u9762 \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" \\u4E2D\\u7684\\u503C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Set a value in sessionStorage.\nsessionStorage.setItem('key', 'value');\n\n// Get a value from sessionStorage.\nconsole.log(sessionStorage.getItem('key'));\n\n// Remove a value from sessionStorage.\nsessionStorage.removeItem('key');\n\n// Clear all data in sessionStorage.\nsessionStorage.clear();\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD8\\u6709\\u5176\\u4ED6\\u5BA2\\u6237\\u7AEF\\u5B58\\u50A8\\u673A\\u5236\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API\",children:\"IndexedDB\"}),\"\\uFF0C\\u5B83\\u6BD4\\u4E0A\\u8FF0\\u6280\\u672F\\u66F4\\u5F3A\\u5927\\uFF0C\\u4F46\\u4F7F\\u7528\\u8D77\\u6765\\u66F4\\u590D\\u6742\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u53C2\\u8003\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies\",children:\"localStorage\\u3001sessionStorage\\u3001session \\u548C cookie \\u4E4B\\u95F4\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"})}),`\n`]})]})}function y(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(a,o)})):a(o)}var I=y;return f(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var g=Object.create;var i=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var m=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),b=(o,e)=>{for(var r in e)i(o,r,{get:e[r],enumerable:!0})},d=(o,e,r,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of k(e))!u.call(o,c)&&c!==r&&i(o,c,{get:()=>e[c],enumerable:!(l=S(e,c))||l.enumerable});return o};var f=(o,e,r)=>(r=o!=null?g(p(o)):{},d(e||!o||!o.__esModule?i(r,\"default\",{value:o,enumerable:!0}):r,o)),v=o=>d(i({},\"__esModule\",{value:!0}),o);var h=m((A,t)=>{t.exports=_jsx_runtime});var I={};b(I,{default:()=>s,frontmatter:()=>y});var n=f(h()),y={title:\"\\u63CF\\u8FF0\\u6D4F\\u89C8\\u5668\\u4E2D cookie\\u3001`sessionStorage` \\u548C `localStorage` \\u4E4B\\u95F4\\u7684\\u533A\\u522B\"};function a(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4EE5\\u4E0B\\u90FD\\u662F\\u5728\\u5BA2\\u6237\\u7AEF\\uFF08\\u672C\\u4F8B\\u4E2D\\u4E3A\\u7528\\u6237\\u7684\\u6D4F\\u89C8\\u5668\\uFF09\\u4E0A\\u5B58\\u50A8\\u6570\\u636E\\u7684\\u673A\\u5236\\u3002\",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" \\u90FD\\u5B9E\\u73B0\\u4E86 \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API\",children:\"Web Storage API \\u63A5\\u53E3\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Cookies\"}),\"\\uFF1A\\u9002\\u7528\\u4E8E\\u670D\\u52A1\\u5668-\\u5BA2\\u6237\\u7AEF\\u901A\\u4FE1\\uFF0C\\u5B58\\u50A8\\u5BB9\\u91CF\\u5C0F\\uFF0C\\u53EF\\u4EE5\\u662F\\u6301\\u4E45\\u6027\\u7684\\u6216\\u57FA\\u4E8E\\u4F1A\\u8BDD\\u7684\\uFF0C\\u7279\\u5B9A\\u4E8E\\u57DF\\u3002\\u5728\\u6BCF\\u6B21\\u8BF7\\u6C42\\u65F6\\u53D1\\u9001\\u5230\\u670D\\u52A1\\u5668\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"localStorage\"})}),\"\\uFF1A\\u9002\\u7528\\u4E8E\\u957F\\u671F\\u5B58\\u50A8\\uFF0C\\u5373\\u4F7F\\u5728\\u6D4F\\u89C8\\u5668\\u5173\\u95ED\\u540E\\u6570\\u636E\\u4ECD\\u7136\\u5B58\\u5728\\uFF0C\\u53EF\\u5728\\u540C\\u4E00\\u6765\\u6E90\\u7684\\u6240\\u6709\\u9009\\u9879\\u5361\\u548C\\u7A97\\u53E3\\u4E2D\\u8BBF\\u95EE\\uFF0C\\u5728\\u4E09\\u8005\\u4E2D\\u5B58\\u50A8\\u5BB9\\u91CF\\u6700\\u9AD8\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"sessionStorage\"})}),\"\\uFF1A\\u9002\\u7528\\u4E8E\\u5355\\u4E2A\\u9875\\u9762\\u4F1A\\u8BDD\\u4E2D\\u7684\\u4E34\\u65F6\\u6570\\u636E\\uFF0C\\u5F53\\u9009\\u9879\\u5361\\u6216\\u7A97\\u53E3\\u5173\\u95ED\\u65F6\\u6570\\u636E\\u5C06\\u88AB\\u6E05\\u9664\\uFF0C\\u4E0E cookies \\u76F8\\u6BD4\\u5177\\u6709\\u66F4\\u9AD8\\u7684\\u5B58\\u50A8\\u5BB9\\u91CF\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u8868\\u683C\\u603B\\u7ED3\\u4E86 3 \\u79CD\\u5BA2\\u6237\\u7AEF\\u5B58\\u50A8\\u673A\\u5236\\u3002\"}),`\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:\"\\u5C5E\\u6027\"}),(0,n.jsx)(e.th,{children:\"Cookie\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"localStorage\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"sessionStorage\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u53D1\\u8D77\\u8005\"}),(0,n.jsxs)(e.td,{children:[\"\\u5BA2\\u6237\\u7AEF\\u6216\\u670D\\u52A1\\u5668\\u3002\\u670D\\u52A1\\u5668\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Set-Cookie\"}),\" \\u6807\\u5934\"]}),(0,n.jsx)(e.td,{children:\"\\u5BA2\\u6237\\u7AEF\"}),(0,n.jsx)(e.td,{children:\"\\u5BA2\\u6237\\u7AEF\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u5BFF\\u547D\"}),(0,n.jsx)(e.td,{children:\"\\u5982\\u6307\\u5B9A\"}),(0,n.jsx)(e.td,{children:\"\\u76F4\\u5230\\u5220\\u9664\"}),(0,n.jsx)(e.td,{children:\"\\u76F4\\u5230\\u9009\\u9879\\u5361\\u5173\\u95ED\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u662F\\u5426\\u8DE8\\u6D4F\\u89C8\\u5668\\u4F1A\\u8BDD\\u6301\\u4E45\"}),(0,n.jsx)(e.td,{children:\"\\u5982\\u679C\\u8BBE\\u7F6E\\u4E86\\u672A\\u6765\\u7684\\u8FC7\\u671F\\u65E5\\u671F\"}),(0,n.jsx)(e.td,{children:\"\\u662F\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u662F\\u5426\\u968F\\u6BCF\\u4E2A HTTP \\u8BF7\\u6C42\\u53D1\\u9001\\u5230\\u670D\\u52A1\\u5668\"}),(0,n.jsxs)(e.td,{children:[\"\\u662F\\uFF0C\\u901A\\u8FC7 \",(0,n.jsx)(e.code,{children:\"Cookie\"}),\" \\u6807\\u5934\\u53D1\\u9001\"]}),(0,n.jsx)(e.td,{children:\"\\u5426\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u603B\\u5BB9\\u91CF\\uFF08\\u6BCF\\u4E2A\\u57DF\\uFF09\"}),(0,n.jsx)(e.td,{children:\"4kb\"}),(0,n.jsx)(e.td,{children:\"5MB\"}),(0,n.jsx)(e.td,{children:\"5MB\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u8BBF\\u95EE\"}),(0,n.jsx)(e.td,{children:\"\\u8DE8\\u7A97\\u53E3/\\u9009\\u9879\\u5361\"}),(0,n.jsx)(e.td,{children:\"\\u8DE8\\u7A97\\u53E3/\\u9009\\u9879\\u5361\"}),(0,n.jsx)(e.td,{children:\"\\u76F8\\u540C\\u9009\\u9879\\u5361\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u5B89\\u5168\\u6027\"}),(0,n.jsxs)(e.td,{children:[\"JavaScript \\u65E0\\u6CD5\\u8BBF\\u95EE \",(0,n.jsx)(e.code,{children:\"HttpOnly\"}),\" cookies\"]}),(0,n.jsx)(e.td,{children:\"\\u65E0\"}),(0,n.jsx)(e.td,{children:\"\\u65E0\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Web \\u4E0A\\u7684\\u5B58\\u50A8\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Cookies\\u3001\",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" \\u90FD\\u662F\\u5BA2\\u6237\\u7AEF\\uFF08Web \\u6D4F\\u89C8\\u5668\\uFF09\\u4E0A\\u7684\\u5B58\\u50A8\\u673A\\u5236\\u3002\\u5728\\u5BA2\\u6237\\u7AEF\\u5B58\\u50A8\\u6570\\u636E\\u5BF9\\u4E8E\\u4EC5\\u5BA2\\u6237\\u7AEF\\u7684\\u72B6\\u6001\\u5F88\\u6709\\u7528\\uFF0C\\u4F8B\\u5982\\u8BBF\\u95EE\\u4EE4\\u724C\\u3001\\u4E3B\\u9898\\u3001\\u4E2A\\u6027\\u5316\\u5E03\\u5C40\\uFF0C\\u4EE5\\u4FBF\\u7528\\u6237\\u53EF\\u4EE5\\u5728\\u8DE8\\u9009\\u9879\\u5361\\u548C\\u4F7F\\u7528\\u4F1A\\u8BDD\\u7684\\u7F51\\u7AD9\\u4E0A\\u83B7\\u5F97\\u4E00\\u81F4\\u7684\\u4F53\\u9A8C\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD9\\u4E9B\\u5BA2\\u6237\\u7AEF\\u5B58\\u50A8\\u673A\\u5236\\u5177\\u6709\\u4EE5\\u4E0B\\u5E38\\u89C1\\u5C5E\\u6027\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u8FD9\\u610F\\u5473\\u7740\\u5BA2\\u6237\\u7AEF\\u53EF\\u4EE5\\u8BFB\\u53D6\\u548C\\u4FEE\\u6539\\u503C\\uFF08\",(0,n.jsx)(e.code,{children:\"HttpOnly\"}),\" cookies \\u9664\\u5916\\uFF09\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u57FA\\u4E8E\\u952E\\u503C\\u5BF9\\u7684\\u5B58\\u50A8\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5B83\\u4EEC\\u53EA\\u80FD\\u5C06\\u503C\\u5B58\\u50A8\\u4E3A\\u5B57\\u7B26\\u4E32\\u3002\\u975E\\u5B57\\u7B26\\u4E32\\u5FC5\\u987B\\u88AB\\u5E8F\\u5217\\u5316\\u4E3A\\u5B57\\u7B26\\u4E32\\uFF08\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"JSON.stringify()\"}),\"\\uFF09\\u624D\\u80FD\\u88AB\\u5B58\\u50A8\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6BCF\\u79CD\\u5B58\\u50A8\\u673A\\u5236\\u7684\\u7528\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u7531\\u4E8E cookies \\u7684\\u6700\\u5927\\u5927\\u5C0F\\u76F8\\u5BF9\\u8F83\\u5C0F\\uFF0C\\u56E0\\u6B64\\u4E0D\\u5EFA\\u8BAE\\u5C06\\u6240\\u6709\\u5BA2\\u6237\\u7AEF\\u6570\\u636E\\u5B58\\u50A8\\u5728 cookies \\u4E2D\\u3002\\u5173\\u4E8E cookies \\u7684\\u663E\\u8457\\u7279\\u6027\\u662F cookies \\u4F1A\\u5728\\u6BCF\\u4E2A HTTP \\u8BF7\\u6C42\\u4E2D\\u53D1\\u9001\\u5230\\u670D\\u52A1\\u5668\\uFF0C\\u56E0\\u6B64\\u8F83\\u5C0F\\u7684\\u6700\\u5927\\u5927\\u5C0F\\u662F\\u4E00\\u4E2A\\u7279\\u6027\\uFF0C\\u53EF\\u4EE5\\u9632\\u6B62\\u60A8\\u7684 HTTP \\u8BF7\\u6C42\\u7531\\u4E8E cookies \\u800C\\u53D8\\u5F97\\u8FC7\\u5927\\u3002cookies \\u7684\\u81EA\\u52A8\\u8FC7\\u671F\\u4E5F\\u662F\\u4E00\\u4E2A\\u6709\\u7528\\u7684\\u7279\\u6027\\u3002\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8003\\u8651\\u5230\\u8FD9\\u4E00\\u70B9\\uFF0C\\u6700\\u9002\\u5408\\u5B58\\u50A8\\u5728 cookies \\u4E2D\\u7684\\u6570\\u636E\\u662F\\u9700\\u8981\\u4F20\\u8F93\\u5230\\u670D\\u52A1\\u5668\\u7684\\u5C0F\\u5757\\u6570\\u636E\\uFF0C\\u4F8B\\u5982\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u4EE4\\u724C\\u3001\\u4F1A\\u8BDD ID\\u3001\\u5206\\u6790\\u8DDF\\u8E2A ID\\u3001GDPR cookie \\u540C\\u610F\\u3001\\u5BF9\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u3001\\u6388\\u6743\\u548C\\u5728\\u670D\\u52A1\\u5668\\u4E0A\\u5448\\u73B0\\u5F88\\u91CD\\u8981\\u7684\\u8BED\\u8A00\\u504F\\u597D\\u3002\\u8FD9\\u4E9B\\u503C\\u6709\\u65F6\\u5F88\\u654F\\u611F\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u4ECE cookies \\u63D0\\u4F9B\\u7684 \",(0,n.jsx)(e.code,{children:\"HttpOnly\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"Secure\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Expires\"}),\"/\",(0,n.jsx)(e.code,{children:\"Max-Age\"}),\" \\u529F\\u80FD\\u4E2D\\u53D7\\u76CA\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" \\u90FD\\u5B9E\\u73B0\\u4E86 \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API\",children:\"Web Storage API \\u63A5\\u53E3\"}),\"\\u3002Web Storages \\u5177\\u6709 5MB \\u7684\\u603B\\u5BB9\\u91CF\\uFF0C\\u56E0\\u6B64\\u5B58\\u50A8\\u5927\\u5C0F\\u901A\\u5E38\\u4E0D\\u662F\\u95EE\\u9898\\u3002\\u5173\\u952E\\u7684\\u533A\\u522B\\u5728\\u4E8E\\uFF0C\\u5B58\\u50A8\\u5728 Web Storage \\u4E2D\\u7684\\u503C\\u4E0D\\u4F1A\\u81EA\\u52A8\\u968F HTTP \\u8BF7\\u6C42\\u4E00\\u8D77\\u53D1\\u9001\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u867D\\u7136\\u60A8\\u53EF\\u4EE5\\u5728\\u53D1\\u51FA AJAX/\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u8BF7\\u6C42\\u65F6\\u624B\\u52A8\\u5305\\u542B\\u6765\\u81EA Web Storage \\u7684\\u503C\\uFF0C\\u4F46\\u6D4F\\u89C8\\u5668\\u4E0D\\u4F1A\\u5728\\u9875\\u9762\\u7684\\u521D\\u59CB\\u8BF7\\u6C42/\\u9996\\u6B21\\u52A0\\u8F7D\\u4E2D\\u5305\\u542B\\u5B83\\u4EEC\\u3002\\u56E0\\u6B64\\uFF0C\\u5982\\u679C\\u4F7F\\u7528\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\uFF08\\u901A\\u5E38\\u662F\\u4E0E\\u8EAB\\u4EFD\\u9A8C\\u8BC1/\\u6388\\u6743\\u76F8\\u5173\\u7684\\u4FE1\\u606F\\uFF09\\uFF0C\\u5219\\u4E0D\\u5E94\\u4F7F\\u7528 Web Storage \\u6765\\u5B58\\u50A8\\u670D\\u52A1\\u5668\\u7528\\u4E8E\\u9875\\u9762\\u521D\\u59CB\\u6E32\\u67D3\\u6240\\u4F9D\\u8D56\\u7684\\u6570\\u636E\\u3002\",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u6700\\u9002\\u5408\\u4E0D\\u5931\\u6548\\u7684\\u7528\\u6237\\u504F\\u597D\\u6570\\u636E\\uFF0C\\u4F8B\\u5982\\u4E3B\\u9898\\u548C\\u5E03\\u5C40\\uFF08\\u5982\\u679C\\u670D\\u52A1\\u5668\\u6E32\\u67D3\\u6700\\u7EC8\\u5E03\\u5C40\\u5E76\\u4E0D\\u91CD\\u8981\\uFF09\\u3002\",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" \\u6700\\u9002\\u5408\\u53EA\\u9700\\u8981\\u5728\\u5F53\\u524D\\u6D4F\\u89C8\\u4F1A\\u8BDD\\u4E2D\\u8BBF\\u95EE\\u7684\\u4E34\\u65F6\\u6570\\u636E\\uFF0C\\u4F8B\\u5982\\u8868\\u5355\\u6570\\u636E\\uFF08\\u7528\\u4E8E\\u5728\\u610F\\u5916\\u91CD\\u65B0\\u52A0\\u8F7D\\u671F\\u95F4\\u4FDD\\u7559\\u6570\\u636E\\uFF09\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u90E8\\u5206\\u6DF1\\u5165\\u63A2\\u8BA8\\u4E86\\u6BCF\\u79CD\\u5BA2\\u6237\\u7AEF\\u5B58\\u50A8\\u673A\\u5236\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Cookies\"}),`\n`,(0,n.jsx)(e.p,{children:\"Cookies \\u7528\\u4E8E\\u5728\\u5BA2\\u6237\\u7AEF\\u5B58\\u50A8\\u5C0F\\u5757\\u6570\\u636E\\uFF0C\\u8FD9\\u4E9B\\u6570\\u636E\\u53EF\\u4EE5\\u901A\\u8FC7\\u6BCF\\u4E2A HTTP \\u8BF7\\u6C42\\u53D1\\u9001\\u56DE\\u670D\\u52A1\\u5668\\u3002\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5B58\\u50A8\\u5BB9\\u91CF\"}),\"\\uFF1A\\u6240\\u6709 cookies \\u9650\\u5236\\u5728 4KB \\u5DE6\\u53F3\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5BFF\\u547D\"}),\"\\uFF1ACookies \\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Expires\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"Max-Age\"}),\" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u7279\\u5B9A\\u7684\\u8FC7\\u671F\\u65E5\\u671F\\u3002\\u5982\\u679C\\u672A\\u8BBE\\u7F6E\\u8FC7\\u671F\\u65E5\\u671F\\uFF0C\\u5219\\u5728\\u6D4F\\u89C8\\u5668\\u5173\\u95ED\\u65F6\\u5220\\u9664 cookie\\uFF08\\u4F1A\\u8BDD cookie\\uFF09\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8BBF\\u95EE\"}),\"\\uFF1ACookies \\u662F\\u7279\\u5B9A\\u4E8E\\u57DF\\u7684\\uFF0C\\u53EF\\u4EE5\\u5728\\u540C\\u4E00\\u57DF\\u5185\\u7684\\u4E0D\\u540C\\u9875\\u9762\\u548C\\u5B50\\u57DF\\u4E4B\\u95F4\\u5171\\u4EAB\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5B89\\u5168\\u6027\"}),\"\\uFF1ACookies \\u53EF\\u4EE5\\u6807\\u8BB0\\u4E3A \",(0,n.jsx)(e.code,{children:\"HttpOnly\"}),\" \\u4EE5\\u9632\\u6B62\\u4ECE JavaScript \\u8BBF\\u95EE\\uFF0C\\u4ECE\\u800C\\u964D\\u4F4E XSS \\u653B\\u51FB\\u7684\\u98CE\\u9669\\u3002\\u5B83\\u4EEC\\u4E5F\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Secure\"}),\" \\u6807\\u5FD7\\u8FDB\\u884C\\u4FDD\\u62A4\\uFF0C\\u4EE5\\u786E\\u4FDD\\u4EC5\\u5728\\u4F7F\\u7528 HTTPS \\u65F6\\u53D1\\u9001\\u5B83\\u4EEC\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Set a cookie for the name/key \\`auth_token\\` with an expiry.\ndocument.cookie =\n  'auth_token=abc123def; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/';\n\n// Read all cookies. There's no way to read specific cookies using \\`document.cookie\\`.\n// You have to parse the string yourself.\nconsole.log(document.cookie); // auth_token=abc123def\n\n// Delete the cookie with the name/key \\`auth_token\\` by setting an\n// expiry date in the past. The value doesn't matter.\ndocument.cookie = 'auth_token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8BFB\\u53D6/\\u5199\\u5165 Cookie \\u662F\\u4E00\\u4EF6\\u5F88\\u75DB\\u82E6\\u7684\\u4E8B\\u60C5\\u3002\",(0,n.jsx)(e.code,{children:\"document.cookie\"}),\" \\u8FD4\\u56DE\\u4E00\\u4E2A\\u5305\\u542B\\u6240\\u6709\\u7531 \",(0,n.jsx)(e.code,{children:\";\"}),\" \\u5206\\u9694\\u7684\\u952E/\\u503C\\u5BF9\\u7684\\u5B57\\u7B26\\u4E32\\uFF0C\\u60A8\\u5FC5\\u987B\\u81EA\\u5DF1\\u89E3\\u6790\\u8BE5\\u5B57\\u7B26\\u4E32\\u3002\",(0,n.jsx)(e.a,{href:\"https://github.com/js-cookie/js-cookie\",children:(0,n.jsx)(e.code,{children:\"js-cookie\"})}),\" npm \\u5E93\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u7B80\\u5355\\u8F7B\\u91CF\\u7EA7\\u7684 API\\uFF0C\\u7528\\u4E8E\\u5728 JavaScript \\u4E2D\\u8BFB\\u5199 Cookie\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8BBF\\u95EE Cookie \\u7684\\u73B0\\u4EE3\\u539F\\u751F\\u65B9\\u5F0F\\u662F\\u901A\\u8FC7 \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API\",children:\"Cookie Store API\"}),\"\\uFF0C\\u8BE5 API \\u4EC5\\u5728 HTTPS \\u9875\\u9762\\u4E0A\\u53EF\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Set a cookie. More options are available too.\ncookieStore.set('auth_token', 'abc123def');\n\n// Async method to access a single cookie and do something with it.\ncookieStore.get('auth_token').then(...);\n\n// Async method to get all cookies.\ncookieStore.getAll().then(...);\n\n// Async method to delete a single cookie.\ncookieStore.delete('auth_token').then(() =>\n  console.log('Cookie deleted')\n);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"CookieStore API \\u76F8\\u5BF9\\u8F83\\u65B0\\uFF0C\\u53EF\\u80FD\\u5E76\\u975E\\u6240\\u6709\\u6D4F\\u89C8\\u5668\\u90FD\\u652F\\u6301\\uFF08\\u622A\\u81F3 2024 \\u5E74 6 \\u6708\\uFF0C\\u5728\\u6700\\u65B0\\u7684 Chrome \\u548C Edge \\u4E2D\\u53D7\\u652F\\u6301\\uFF09\\u3002\\u8BF7\\u53C2\\u9605 \",(0,n.jsx)(e.a,{href:\"https://caniuse.com/mdn-api_cookiestore\",children:\"caniuse.com\"}),\" \\u4EE5\\u83B7\\u53D6\\u6700\\u65B0\\u7684\\u517C\\u5BB9\\u6027\\u4FE1\\u606F\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"localStorage\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u7528\\u4E8E\\u5B58\\u50A8\\u5373\\u4F7F\\u5728\\u6D4F\\u89C8\\u5668\\u5173\\u95ED\\u5E76\\u91CD\\u65B0\\u6253\\u5F00\\u540E\\u4ECD\\u4FDD\\u7559\\u7684\\u6570\\u636E\\u3002\\u5B83\\u4E13\\u4E3A\\u957F\\u671F\\u5B58\\u50A8\\u6570\\u636E\\u800C\\u8BBE\\u8BA1\\u3002\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5B58\\u50A8\\u5BB9\\u91CF\"}),\"\\uFF1A\\u901A\\u5E38\\u6BCF\\u4E2A\\u6765\\u6E90\\u7EA6 5MB\\uFF08\\u56E0\\u6D4F\\u89C8\\u5668\\u800C\\u5F02\\uFF09\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u751F\\u547D\\u5468\\u671F\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u4E2D\\u7684\\u6570\\u636E\\u4F1A\\u4E00\\u76F4\\u5B58\\u5728\\uFF0C\\u76F4\\u5230\\u7528\\u6237\\u6216\\u5E94\\u7528\\u7A0B\\u5E8F\\u663E\\u5F0F\\u5220\\u9664\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8BBF\\u95EE\"}),\"\\uFF1A\\u6570\\u636E\\u53EF\\u5728\\u540C\\u4E00\\u6765\\u6E90\\u7684\\u6240\\u6709\\u9009\\u9879\\u5361\\u548C\\u7A97\\u53E3\\u4E2D\\u8BBF\\u95EE\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5B89\\u5168\\u6027\"}),\"\\uFF1A\\u9875\\u9762\\u4E0A\\u7684\\u6240\\u6709 JavaScript \\u90FD\\u53EF\\u4EE5\\u8BBF\\u95EE \",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u4E2D\\u7684\\u503C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Set a value in localStorage.\nlocalStorage.setItem('key', 'value');\n\n// Get a value from localStorage.\nconsole.log(localStorage.getItem('key'));\n\n// Remove a value from localStorage.\nlocalStorage.removeItem('key');\n\n// Clear all data in localStorage.\nlocalStorage.clear();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"sessionStorage\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" \\u7528\\u4E8E\\u5B58\\u50A8\\u9875\\u9762\\u4F1A\\u8BDD\\u671F\\u95F4\\u7684\\u6570\\u636E\\u3002\\u5B83\\u4E13\\u4E3A\\u4E34\\u65F6\\u5B58\\u50A8\\u6570\\u636E\\u800C\\u8BBE\\u8BA1\\u3002\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5B58\\u50A8\\u5BB9\\u91CF\"}),\"\\uFF1A\\u901A\\u5E38\\u6BCF\\u4E2A\\u6765\\u6E90\\u7EA6 5MB\\uFF08\\u56E0\\u6D4F\\u89C8\\u5668\\u800C\\u5F02\\uFF09\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u751F\\u547D\\u5468\\u671F\"}),\"\\uFF1A\\u5F53\\u9875\\u9762\\u4F1A\\u8BDD\\u7ED3\\u675F\\u65F6\\uFF08\\u5373\\uFF0C\\u5F53\\u6D4F\\u89C8\\u5668\\u6216\\u9009\\u9879\\u5361\\u5173\\u95ED\\u65F6\\uFF09\\uFF0C\",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" \\u4E2D\\u7684\\u6570\\u636E\\u5C06\\u88AB\\u6E05\\u9664\\u3002\\u91CD\\u65B0\\u52A0\\u8F7D\\u9875\\u9762\\u4E0D\\u4F1A\\u9500\\u6BC1 \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" \\u4E2D\\u7684\\u6570\\u636E\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8BBF\\u95EE\"}),\"\\uFF1A\\u6570\\u636E\\u4EC5\\u5728\\u5F53\\u524D\\u9009\\u9879\\u5361\\u6216\\u7A97\\u53E3\\u4E2D\\u53EF\\u8BBF\\u95EE\\u3002\\u5177\\u6709\\u76F8\\u540C\\u9875\\u9762\\u7684\\u4E0D\\u540C\\u9009\\u9879\\u5361\\u6216\\u7A97\\u53E3\\u5C06\\u5177\\u6709\\u4E0D\\u540C\\u7684 \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" \\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5B89\\u5168\\u6027\"}),\"\\uFF1A\\u540C\\u4E00\\u9875\\u9762\\u4E0A\\u7684\\u6240\\u6709 JavaScript \\u90FD\\u53EF\\u4EE5\\u8BBF\\u95EE\\u8BE5\\u9875\\u9762 \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" \\u4E2D\\u7684\\u503C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Set a value in sessionStorage.\nsessionStorage.setItem('key', 'value');\n\n// Get a value from sessionStorage.\nconsole.log(sessionStorage.getItem('key'));\n\n// Remove a value from sessionStorage.\nsessionStorage.removeItem('key');\n\n// Clear all data in sessionStorage.\nsessionStorage.clear();\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD8\\u6709\\u5176\\u4ED6\\u5BA2\\u6237\\u7AEF\\u5B58\\u50A8\\u673A\\u5236\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API\",children:\"IndexedDB\"}),\"\\uFF0C\\u5B83\\u6BD4\\u4E0A\\u8FF0\\u6280\\u672F\\u66F4\\u5F3A\\u5927\\uFF0C\\u4F46\\u4F7F\\u7528\\u8D77\\u6765\\u66F4\\u590D\\u6742\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u53C2\\u8003\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies\",children:\"localStorage\\u3001sessionStorage\\u3001session \\u548C cookie \\u4E4B\\u95F4\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"})}),`\n`]})]})}function s(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(a,{...o})}):a(o)}return v(I);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-script-async-and-script-defer/en-US.json b/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-script-async-and-script-defer/en-US.json
index 6d8d46724..a64165cfa 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-script-async-and-script-defer/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-script-async-and-script-defer/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-the-difference-between-script-async-and-script-defer/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var o=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var b=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),g=(r,e)=>{for(var t in e)c(r,t,{get:e[t],enumerable:!0})},h=(r,e,t,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!y.call(r,i)&&i!==t&&c(r,i,{get:()=>e[i],enumerable:!(d=p(e,i))||d.enumerable});return r};var m=(r,e,t)=>(t=r!=null?o(f(r)):{},h(e||!r||!r.__esModule?c(t,\"default\",{value:r,enumerable:!0}):t,r)),w=r=>h(c({},\"__esModule\",{value:!0}),r);var s=b((H,l)=>{l.exports=_jsx_runtime});var L={};g(L,{default:()=>M,frontmatter:()=>x});var n=m(s()),x={title:\"Describe the difference between `<script>`, `<script async>` and `<script defer>`\"};function a(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",ul:\"ul\",li:\"li\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",hr:\"hr\",pre:\"pre\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"All of these ways (\",(0,n.jsx)(e.code,{children:\"<script>\"}),\", \",(0,n.jsx)(e.code,{children:\"<script async>\"}),\", and \",(0,n.jsx)(e.code,{children:\"<script defer>\"}),\") are used to load and execute JavaScript files in an HTML document, but they differ in how the browser handles loading and execution of the script:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"<script>\"}),\" is the default way of including JavaScript. The browser blocks HTML parsing while the script is being downloaded and executed. The browser will not continue rendering the page until the script has finished executing.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"<script async>\"}),\" downloads the script asynchronously, in parallel with parsing the HTML. Executes the script as soon as it is available, potentially interrupting the HTML parsing. \",(0,n.jsx)(e.code,{children:\"<script async>\"}),\" do not wait for each other and execute in no particular order.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"<script defer>\"}),\" downloads the script asynchronously, in parallel with parsing the HTML. However, the execution of the script is deferred until HTML parsing is complete, in the order they appear in the HTML.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here's a table summarizing the 3 ways of loading \",(0,n.jsx)(e.code,{children:\"<script>\"}),\"s in a HTML document.\"]}),`\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:\"Feature\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"<script>\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"<script async>\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"<script defer>\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Parsing behavior\"}),(0,n.jsx)(e.td,{children:\"Blocks HTML parsing\"}),(0,n.jsx)(e.td,{children:\"Runs parallel to parsing\"}),(0,n.jsx)(e.td,{children:\"Runs parallel to parsing\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Execution order\"}),(0,n.jsx)(e.td,{children:\"In order of appearance\"}),(0,n.jsx)(e.td,{children:\"Not guaranteed\"}),(0,n.jsx)(e.td,{children:\"In order of appearance\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"DOM dependency\"}),(0,n.jsx)(e.td,{children:\"No\"}),(0,n.jsx)(e.td,{children:\"No\"}),(0,n.jsx)(e.td,{children:\"Yes (waits for DOM)\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" tags are for\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"<script>\"}),\" tags are used to include JavaScript on a web page. The \",(0,n.jsx)(e.code,{children:\"async\"}),\" and \",(0,n.jsx)(e.code,{children:\"defer\"}),\" attributes are used to change how/when the loading and execution of the script happens.\"]}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"<script>\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"For normal \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" tags without any \",(0,n.jsx)(e.code,{children:\"async\"}),\" or \",(0,n.jsx)(e.code,{children:\"defer\"}),\", when they are encountered, HTML parsing is blocked, the script is fetched and executed immediately. HTML parsing resumes after the script is executed. This can block rendering of the page if the script is large.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" for critical scripts that the page relies on to render properly.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>Regular Script</title>\n  </head>\n  <body>\n    <!-- Content before the script -->\n    <h1>Regular Script Example</h1>\n    <p>This content will be rendered before the script executes.</p>\n\n    <!-- Regular script -->\n    <script src=\"regular.js\"><\\/script>\n\n    <!-- Content after the script -->\n    <p>This content will be rendered after the script executes.</p>\n  </body>\n</html>\n`})}),`\n`,`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"<script async>\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.code,{children:\"<script async>\"}),\", the browser downloads the script file asynchronously (in parallel with HTML parsing) and executes it as soon as it is available (potentially before HTML parsing completes). The execution will not necessarily be executed in the order in which it appears in the HTML document. This can improve perceived performance because the browser doesn't wait for the script to download before continuing to render the page.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"<script async>\"}),\" when the script is independent of any other scripts on the page, for example, analytics and ads scripts.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>Async Script</title>\n  </head>\n  <body>\n    <!-- Content before the script -->\n    <h1>Async Script Example</h1>\n    <p>This content will be rendered before the async script executes.</p>\n\n    <!-- Async script -->\n    <script async src=\"async.js\"><\\/script>\n\n    <!-- Content after the script -->\n    <p>\n      This content may be rendered before or after the async script executes.\n    </p>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"<script defer>\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Similar to \",(0,n.jsx)(e.code,{children:\"<script async>\"}),\", \",(0,n.jsx)(e.code,{children:\"<script defer>\"}),\" also downloads the script in parallel to HTML parsing but the script is only executed when the document has been fully parsed and before firing \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\". If there are multiple of them, each deferred script is executed in the order they appeared in the HTML document.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"If a script relies on a fully-parsed DOM, the \",(0,n.jsx)(e.code,{children:\"defer\"}),\" attribute will be useful in ensuring that the HTML is fully parsed before executing.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>Deferred Script</title>\n  </head>\n  <body>\n    <!-- Content before the script -->\n    <h1>Deferred Script Example</h1>\n    <p>This content will be rendered before the deferred script executes.</p>\n\n    <!-- Deferred script -->\n    <script defer src=\"deferred.js\"><\\/script>\n\n    <!-- Content after the script -->\n    <p>This content will be rendered before the deferred script executes.</p>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"async\"}),\" attribute should be used for scripts that are not critical to the initial rendering of the page and do not depend on each other, while the \",(0,n.jsx)(e.code,{children:\"defer\"}),\" attribute should be used for scripts that depend on / is depended on by another script.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"async\"}),\" and \",(0,n.jsx)(e.code,{children:\"defer\"}),\" attributes are ignored for scripts that have no \",(0,n.jsx)(e.code,{children:\"src\"}),\" attribute.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"<script>\"}),\"s with \",(0,n.jsx)(e.code,{children:\"defer\"}),\" or \",(0,n.jsx)(e.code,{children:\"async\"}),\" that contain \",(0,n.jsx)(e.code,{children:\"document.write()\"}),' will be ignored with a message like \"A call to ',(0,n.jsx)(e.code,{children:\"document.write()\"}),' from an asynchronously-loaded external script was ignored\".']}),`\n`,(0,n.jsxs)(e.li,{children:[\"Even though \",(0,n.jsx)(e.code,{children:\"async\"}),\" and \",(0,n.jsx)(e.code,{children:\"defer\"}),\" help to make script downloading asynchronous, the scripts are still eventually executed on the main thread. If these scripts are computationally intensive, it can result in laggy/frozen UI. \",(0,n.jsx)(e.a,{href:\"https://partytown.builder.io/\",children:\"Partytown\"}),\" is a library that helps relocate script executions into a \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API\",children:\"web worker\"}),\" and off the \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Main_thread\",children:\"main thread\"}),\", which is great for third-party scripts where you do not have control over the code.\"]}),`\n`]}),`\n`,`\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.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer\",children:[(0,n.jsx)(e.code,{children:\"<script>\"}),\": The Script element | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html\",children:\"async vs defer attributes\"})}),`\n`]})]})}function T(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(a,r)})):a(r)}var M=T;return w(L);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),m=(r,e)=>{for(var t in e)c(r,t,{get:e[t],enumerable:!0})},h=(r,e,t,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of f(e))!b.call(r,i)&&i!==t&&c(r,i,{get:()=>e[i],enumerable:!(d=u(e,i))||d.enumerable});return r};var w=(r,e,t)=>(t=r!=null?p(y(r)):{},h(e||!r||!r.__esModule?c(t,\"default\",{value:r,enumerable:!0}):t,r)),x=r=>h(c({},\"__esModule\",{value:!0}),r);var s=g((v,l)=>{l.exports=_jsx_runtime});var M={};m(M,{default:()=>o,frontmatter:()=>T});var n=w(s()),T={title:\"Describe the difference between `<script>`, `<script async>` and `<script defer>`\"};function a(r){let e={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"All of these ways (\",(0,n.jsx)(e.code,{children:\"<script>\"}),\", \",(0,n.jsx)(e.code,{children:\"<script async>\"}),\", and \",(0,n.jsx)(e.code,{children:\"<script defer>\"}),\") are used to load and execute JavaScript files in an HTML document, but they differ in how the browser handles loading and execution of the script:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"<script>\"}),\" is the default way of including JavaScript. The browser blocks HTML parsing while the script is being downloaded and executed. The browser will not continue rendering the page until the script has finished executing.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"<script async>\"}),\" downloads the script asynchronously, in parallel with parsing the HTML. Executes the script as soon as it is available, potentially interrupting the HTML parsing. \",(0,n.jsx)(e.code,{children:\"<script async>\"}),\" do not wait for each other and execute in no particular order.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"<script defer>\"}),\" downloads the script asynchronously, in parallel with parsing the HTML. However, the execution of the script is deferred until HTML parsing is complete, in the order they appear in the HTML.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here's a table summarizing the 3 ways of loading \",(0,n.jsx)(e.code,{children:\"<script>\"}),\"s in a HTML document.\"]}),`\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:\"Feature\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"<script>\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"<script async>\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"<script defer>\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Parsing behavior\"}),(0,n.jsx)(e.td,{children:\"Blocks HTML parsing\"}),(0,n.jsx)(e.td,{children:\"Runs parallel to parsing\"}),(0,n.jsx)(e.td,{children:\"Runs parallel to parsing\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Execution order\"}),(0,n.jsx)(e.td,{children:\"In order of appearance\"}),(0,n.jsx)(e.td,{children:\"Not guaranteed\"}),(0,n.jsx)(e.td,{children:\"In order of appearance\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"DOM dependency\"}),(0,n.jsx)(e.td,{children:\"No\"}),(0,n.jsx)(e.td,{children:\"No\"}),(0,n.jsx)(e.td,{children:\"Yes (waits for DOM)\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" tags are for\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"<script>\"}),\" tags are used to include JavaScript on a web page. The \",(0,n.jsx)(e.code,{children:\"async\"}),\" and \",(0,n.jsx)(e.code,{children:\"defer\"}),\" attributes are used to change how/when the loading and execution of the script happens.\"]}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"<script>\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"For normal \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" tags without any \",(0,n.jsx)(e.code,{children:\"async\"}),\" or \",(0,n.jsx)(e.code,{children:\"defer\"}),\", when they are encountered, HTML parsing is blocked, the script is fetched and executed immediately. HTML parsing resumes after the script is executed. This can block rendering of the page if the script is large.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" for critical scripts that the page relies on to render properly.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>Regular Script</title>\n  </head>\n  <body>\n    <!-- Content before the script -->\n    <h1>Regular Script Example</h1>\n    <p>This content will be rendered before the script executes.</p>\n\n    <!-- Regular script -->\n    <script src=\"regular.js\"><\\/script>\n\n    <!-- Content after the script -->\n    <p>This content will be rendered after the script executes.</p>\n  </body>\n</html>\n`})}),`\n`,`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"<script async>\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.code,{children:\"<script async>\"}),\", the browser downloads the script file asynchronously (in parallel with HTML parsing) and executes it as soon as it is available (potentially before HTML parsing completes). The execution will not necessarily be executed in the order in which it appears in the HTML document. This can improve perceived performance because the browser doesn't wait for the script to download before continuing to render the page.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"<script async>\"}),\" when the script is independent of any other scripts on the page, for example, analytics and ads scripts.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>Async Script</title>\n  </head>\n  <body>\n    <!-- Content before the script -->\n    <h1>Async Script Example</h1>\n    <p>This content will be rendered before the async script executes.</p>\n\n    <!-- Async script -->\n    <script async src=\"async.js\"><\\/script>\n\n    <!-- Content after the script -->\n    <p>\n      This content may be rendered before or after the async script executes.\n    </p>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"<script defer>\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Similar to \",(0,n.jsx)(e.code,{children:\"<script async>\"}),\", \",(0,n.jsx)(e.code,{children:\"<script defer>\"}),\" also downloads the script in parallel to HTML parsing but the script is only executed when the document has been fully parsed and before firing \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\". If there are multiple of them, each deferred script is executed in the order they appeared in the HTML document.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"If a script relies on a fully-parsed DOM, the \",(0,n.jsx)(e.code,{children:\"defer\"}),\" attribute will be useful in ensuring that the HTML is fully parsed before executing.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>Deferred Script</title>\n  </head>\n  <body>\n    <!-- Content before the script -->\n    <h1>Deferred Script Example</h1>\n    <p>This content will be rendered before the deferred script executes.</p>\n\n    <!-- Deferred script -->\n    <script defer src=\"deferred.js\"><\\/script>\n\n    <!-- Content after the script -->\n    <p>This content will be rendered before the deferred script executes.</p>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"async\"}),\" attribute should be used for scripts that are not critical to the initial rendering of the page and do not depend on each other, while the \",(0,n.jsx)(e.code,{children:\"defer\"}),\" attribute should be used for scripts that depend on / is depended on by another script.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"async\"}),\" and \",(0,n.jsx)(e.code,{children:\"defer\"}),\" attributes are ignored for scripts that have no \",(0,n.jsx)(e.code,{children:\"src\"}),\" attribute.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"<script>\"}),\"s with \",(0,n.jsx)(e.code,{children:\"defer\"}),\" or \",(0,n.jsx)(e.code,{children:\"async\"}),\" that contain \",(0,n.jsx)(e.code,{children:\"document.write()\"}),' will be ignored with a message like \"A call to ',(0,n.jsx)(e.code,{children:\"document.write()\"}),' from an asynchronously-loaded external script was ignored\".']}),`\n`,(0,n.jsxs)(e.li,{children:[\"Even though \",(0,n.jsx)(e.code,{children:\"async\"}),\" and \",(0,n.jsx)(e.code,{children:\"defer\"}),\" help to make script downloading asynchronous, the scripts are still eventually executed on the main thread. If these scripts are computationally intensive, it can result in laggy/frozen UI. \",(0,n.jsx)(e.a,{href:\"https://partytown.builder.io/\",children:\"Partytown\"}),\" is a library that helps relocate script executions into a \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API\",children:\"web worker\"}),\" and off the \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Main_thread\",children:\"main thread\"}),\", which is great for third-party scripts where you do not have control over the code.\"]}),`\n`]}),`\n`,`\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.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer\",children:[(0,n.jsx)(e.code,{children:\"<script>\"}),\": The Script element | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html\",children:\"async vs defer attributes\"})}),`\n`]})]})}function o(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(a,{...r})}):a(r)}return x(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-script-async-and-script-defer/pt-BR.json b/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-script-async-and-script-defer/pt-BR.json
index 57d5eaa0b..7dfec797f 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-script-async-and-script-defer/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-script-async-and-script-defer/pt-BR.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-the-difference-between-script-async-and-script-defer/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),x=(r,e)=>{for(var a in e)c(r,a,{get:e[a],enumerable:!0})},i=(r,e,a,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!f.call(r,o)&&o!==a&&c(r,o,{get:()=>e[o],enumerable:!(d=p(e,o))||d.enumerable});return r};var q=(r,e,a)=>(a=r!=null?u(h(r)):{},i(e||!r||!r.__esModule?c(a,\"default\",{value:r,enumerable:!0}):a,r)),b=r=>i(c({},\"__esModule\",{value:!0}),r);var s=g((H,t)=>{t.exports=_jsx_runtime});var L={};x(L,{default:()=>v,frontmatter:()=>M});var n=q(s()),M={title:\"Descreva a diferen\\xE7a entre `<script>`, `<script async>` e `<script defer>`\"};function l(r){let e=Object.assign({p:\"p\",code:\"code\",h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"tags \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" s\\xE3o usadas para incluir JavaScript em uma p\\xE1gina da web. Os atributos \",(0,n.jsx)(e.code,{children:\"async\"}),\" e \",(0,n.jsx)(e.code,{children:\"defer\"}),\" s\\xE3o usados para mudar como/quando o carregamento e a execu\\xE7\\xE3o do script acontecem.\"]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Simples \",(0,n.jsx)(e.code,{children:\"<script>\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Para tags normais \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" sem qualquer \",(0,n.jsx)(e.code,{children:\"async\"}),\" ou \",(0,n.jsx)(e.code,{children:\"defer\"}),\", quando forem encontrados, a an\\xE1lise do HTML \\xE9 bloqueada, o script \\xE9 buscado e executado imediatamente. A an\\xE1lise do HTML \\xE9 retomada ap\\xF3s a execu\\xE7\\xE3o do script.\"]}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"<script async>\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"No \",(0,n.jsx)(e.code,{children:\"<script async>\"}),\", o script ser\\xE1 buscado em paralelo \\xE0 an\\xE1lise do HTML e ser\\xE1 executado assim que estiver dispon\\xEDvel (potencialmente antes da conclus\\xE3o da an\\xE1lise do HTML) e n\\xE3o ser\\xE1 necessariamente executado na ordem em que aparece no documento HTML. Use \",(0,n.jsx)(e.code,{children:\"async\"}),\" quando o script \\xE9 independente de quaisquer outros scripts na p\\xE1gina, por exemplo, analytics.\"]}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"<script defer>\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"No \",(0,n.jsx)(e.code,{children:\"<script defer>\"}),\", o script ser\\xE1 buscado em paralelo \\xE0 an\\xE1lise HTML e executado quando o documento tiver sido totalmente analisado, mas antes de disparar \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\". Se houver m\\xFAltiplos, cada script adiado \\xE9 executado na ordem em que eles apareceram no documento HTML.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Se um script depende de um DOM totalmente analisado, o atributo \",(0,n.jsx)(e.code,{children:\"defer\"}),\" ser\\xE1 \\xFAtil para garantir que o HTML seja totalmente analisado antes de ser executado.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notas\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Geralmente, o atributo \",(0,n.jsx)(e.code,{children:\"async\"}),\" deve ser usado para scripts que n\\xE3o s\\xE3o cr\\xEDticos para a renderiza\\xE7\\xE3o inicial da p\\xE1gina e n\\xE3o dependem um do outro. enquanto o atributo \",(0,n.jsx)(e.code,{children:\"defer\"}),\" deve ser usado para scripts que dependem de / \\xE9 dependente de outro script.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Os atributos \",(0,n.jsx)(e.code,{children:\"async\"}),\" e \",(0,n.jsx)(e.code,{children:\"defer\"}),\" s\\xE3o ignorados para scripts que n\\xE3o t\\xEAm o atributo \",(0,n.jsx)(e.code,{children:\"src\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"<script>\"}),\"s com \",(0,n.jsx)(e.code,{children:\"defer\"}),\" ou \",(0,n.jsx)(e.code,{children:\"async\"}),\" que cont\\xEAm \",(0,n.jsx)(e.code,{children:\"document.write()\"}),' ser\\xE3o ignorados com uma mensagem como \"Uma chamada para o documento.write() de um script externo carregado de forma ass\\xEDncrona foi ignorada\".']}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer\",children:[(0,n.jsx)(e.code,{children:\"<script>\"}),\": O elemento Script | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html\",children:\"async vs defer attributes\"})}),`\n`]})]})}function y(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(l,r)})):l(r)}var v=y;return b(L);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var q=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var a in e)c(n,a,{get:e[a],enumerable:!0})},i=(n,e,a,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of h(e))!x.call(n,o)&&o!==a&&c(n,o,{get:()=>e[o],enumerable:!(d=m(e,o))||d.enumerable});return n};var b=(n,e,a)=>(a=n!=null?p(f(n)):{},i(e||!n||!n.__esModule?c(a,\"default\",{value:n,enumerable:!0}):a,n)),M=n=>i(c({},\"__esModule\",{value:!0}),n);var s=q((w,t)=>{t.exports=_jsx_runtime});var v={};g(v,{default:()=>u,frontmatter:()=>y});var r=b(s()),y={title:\"Descreva a diferen\\xE7a entre `<script>`, `<script async>` e `<script defer>`\"};function l(n){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",ul:\"ul\",...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.p,{children:[\"tags \",(0,r.jsx)(e.code,{children:\"<script>\"}),\" s\\xE3o usadas para incluir JavaScript em uma p\\xE1gina da web. Os atributos \",(0,r.jsx)(e.code,{children:\"async\"}),\" e \",(0,r.jsx)(e.code,{children:\"defer\"}),\" s\\xE3o usados para mudar como/quando o carregamento e a execu\\xE7\\xE3o do script acontecem.\"]}),`\n`,(0,r.jsxs)(e.h2,{children:[\"Simples \",(0,r.jsx)(e.code,{children:\"<script>\"})]}),`\n`,(0,r.jsxs)(e.p,{children:[\"Para tags normais \",(0,r.jsx)(e.code,{children:\"<script>\"}),\" sem qualquer \",(0,r.jsx)(e.code,{children:\"async\"}),\" ou \",(0,r.jsx)(e.code,{children:\"defer\"}),\", quando forem encontrados, a an\\xE1lise do HTML \\xE9 bloqueada, o script \\xE9 buscado e executado imediatamente. A an\\xE1lise do HTML \\xE9 retomada ap\\xF3s a execu\\xE7\\xE3o do script.\"]}),`\n`,(0,r.jsx)(e.h2,{children:(0,r.jsx)(e.code,{children:\"<script async>\"})}),`\n`,(0,r.jsxs)(e.p,{children:[\"No \",(0,r.jsx)(e.code,{children:\"<script async>\"}),\", o script ser\\xE1 buscado em paralelo \\xE0 an\\xE1lise do HTML e ser\\xE1 executado assim que estiver dispon\\xEDvel (potencialmente antes da conclus\\xE3o da an\\xE1lise do HTML) e n\\xE3o ser\\xE1 necessariamente executado na ordem em que aparece no documento HTML. Use \",(0,r.jsx)(e.code,{children:\"async\"}),\" quando o script \\xE9 independente de quaisquer outros scripts na p\\xE1gina, por exemplo, analytics.\"]}),`\n`,(0,r.jsx)(e.h2,{children:(0,r.jsx)(e.code,{children:\"<script defer>\"})}),`\n`,(0,r.jsxs)(e.p,{children:[\"No \",(0,r.jsx)(e.code,{children:\"<script defer>\"}),\", o script ser\\xE1 buscado em paralelo \\xE0 an\\xE1lise HTML e executado quando o documento tiver sido totalmente analisado, mas antes de disparar \",(0,r.jsx)(e.code,{children:\"DOMContentLoaded\"}),\". Se houver m\\xFAltiplos, cada script adiado \\xE9 executado na ordem em que eles apareceram no documento HTML.\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"Se um script depende de um DOM totalmente analisado, o atributo \",(0,r.jsx)(e.code,{children:\"defer\"}),\" ser\\xE1 \\xFAtil para garantir que o HTML seja totalmente analisado antes de ser executado.\"]}),`\n`,(0,r.jsx)(e.h2,{children:\"Notas\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[\"Geralmente, o atributo \",(0,r.jsx)(e.code,{children:\"async\"}),\" deve ser usado para scripts que n\\xE3o s\\xE3o cr\\xEDticos para a renderiza\\xE7\\xE3o inicial da p\\xE1gina e n\\xE3o dependem um do outro. enquanto o atributo \",(0,r.jsx)(e.code,{children:\"defer\"}),\" deve ser usado para scripts que dependem de / \\xE9 dependente de outro script.\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"Os atributos \",(0,r.jsx)(e.code,{children:\"async\"}),\" e \",(0,r.jsx)(e.code,{children:\"defer\"}),\" s\\xE3o ignorados para scripts que n\\xE3o t\\xEAm o atributo \",(0,r.jsx)(e.code,{children:\"src\"}),\".\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"<script>\"}),\"s com \",(0,r.jsx)(e.code,{children:\"defer\"}),\" ou \",(0,r.jsx)(e.code,{children:\"async\"}),\" que cont\\xEAm \",(0,r.jsx)(e.code,{children:\"document.write()\"}),' ser\\xE3o ignorados com uma mensagem como \"Uma chamada para o documento.write() de um script externo carregado de forma ass\\xEDncrona foi ignorada\".']}),`\n`]}),`\n`,(0,r.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer\",children:[(0,r.jsx)(e.code,{children:\"<script>\"}),\": O elemento Script | MDN\"]})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html\",children:\"async vs defer attributes\"})}),`\n`]})]})}function u(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(l,{...n})}):l(n)}return M(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-script-async-and-script-defer/zh-CN.json b/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-script-async-and-script-defer/zh-CN.json
index 8940ef204..ed0721a9d 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-script-async-and-script-defer/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-script-async-and-script-defer/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-the-difference-between-script-async-and-script-defer/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var b=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),u=(r,e)=>{for(var c in e)t(r,c,{get:e[c],enumerable:!0})},h=(r,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of f(e))!m.call(r,d)&&d!==c&&t(r,d,{get:()=>e[d],enumerable:!(i=a(e,d))||i.enumerable});return r};var M=(r,e,c)=>(c=r!=null?p(y(r)):{},h(e||!r||!r.__esModule?t(c,\"default\",{value:r,enumerable:!0}):c,r)),T=r=>h(t({},\"__esModule\",{value:!0}),r);var s=b((S,l)=>{l.exports=_jsx_runtime});var x={};u(x,{default:()=>w,frontmatter:()=>L});var n=M(s()),L={title:\"\\u63CF\\u8FF0 `<script>`\\u3001`<script async>` \\u548C `<script defer>` \\u4E4B\\u95F4\\u7684\\u533A\\u522B\"};function o(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",ul:\"ul\",li:\"li\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",hr:\"hr\",pre:\"pre\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6240\\u6709\\u8FD9\\u4E9B\\u65B9\\u5F0F\\uFF08\",(0,n.jsx)(e.code,{children:\"<script>\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"<script async>\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"<script defer>\"}),\"\\uFF09\\u90FD\\u7528\\u4E8E\\u5728 HTML \\u6587\\u6863\\u4E2D\\u52A0\\u8F7D\\u548C\\u6267\\u884C JavaScript \\u6587\\u4EF6\\uFF0C\\u4F46\\u5B83\\u4EEC\\u5728\\u6D4F\\u89C8\\u5668\\u5904\\u7406\\u811A\\u672C\\u7684\\u52A0\\u8F7D\\u548C\\u6267\\u884C\\u65B9\\u5F0F\\u4E0A\\u6709\\u6240\\u4E0D\\u540C\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"<script>\"}),\" \\u662F\\u5305\\u542B JavaScript \\u7684\\u9ED8\\u8BA4\\u65B9\\u5F0F\\u3002\\u6D4F\\u89C8\\u5668\\u5728\\u4E0B\\u8F7D\\u548C\\u6267\\u884C\\u811A\\u672C\\u65F6\\u4F1A\\u963B\\u6B62 HTML \\u89E3\\u6790\\u3002\\u5728\\u811A\\u672C\\u6267\\u884C\\u5B8C\\u6BD5\\u4E4B\\u524D\\uFF0C\\u6D4F\\u89C8\\u5668\\u4E0D\\u4F1A\\u7EE7\\u7EED\\u6E32\\u67D3\\u9875\\u9762\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"<script async>\"}),\" \\u5F02\\u6B65\\u4E0B\\u8F7D\\u811A\\u672C\\uFF0C\\u4E0E\\u89E3\\u6790 HTML \\u5E76\\u884C\\u3002\\u5728\\u811A\\u672C\\u53EF\\u7528\\u540E\\u7ACB\\u5373\\u6267\\u884C\\u811A\\u672C\\uFF0C\\u53EF\\u80FD\\u4F1A\\u4E2D\\u65AD HTML \\u89E3\\u6790\\u3002\",(0,n.jsx)(e.code,{children:\"<script async>\"}),\" \\u4E4B\\u95F4\\u4E0D\\u4F1A\\u4E92\\u76F8\\u7B49\\u5F85\\uFF0C\\u5E76\\u4E14\\u4EE5\\u4E0D\\u7279\\u5B9A\\u7684\\u987A\\u5E8F\\u6267\\u884C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"<script defer>\"}),\" \\u5F02\\u6B65\\u4E0B\\u8F7D\\u811A\\u672C\\uFF0C\\u4E0E\\u89E3\\u6790 HTML \\u5E76\\u884C\\u3002\\u4F46\\u662F\\uFF0C\\u811A\\u672C\\u7684\\u6267\\u884C\\u88AB\\u63A8\\u8FDF\\u5230 HTML \\u89E3\\u6790\\u5B8C\\u6210\\u540E\\uFF0C\\u6309\\u7167\\u5B83\\u4EEC\\u5728 HTML \\u4E2D\\u51FA\\u73B0\\u7684\\u987A\\u5E8F\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u8868\\u683C\\uFF0C\\u603B\\u7ED3\\u4E86\\u5728 HTML \\u6587\\u6863\\u4E2D\\u52A0\\u8F7D \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" \\u7684 3 \\u79CD\\u65B9\\u5F0F\\u3002\"]}),`\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:\"\\u7279\\u6027\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"<script>\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"<script async>\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"<script defer>\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u89E3\\u6790\\u884C\\u4E3A\"}),(0,n.jsx)(e.td,{children:\"\\u963B\\u6B62 HTML \\u89E3\\u6790\"}),(0,n.jsx)(e.td,{children:\"\\u4E0E\\u89E3\\u6790\\u5E76\\u884C\\u8FD0\\u884C\"}),(0,n.jsx)(e.td,{children:\"\\u4E0E\\u89E3\\u6790\\u5E76\\u884C\\u8FD0\\u884C\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u6267\\u884C\\u987A\\u5E8F\"}),(0,n.jsx)(e.td,{children:\"\\u6309\\u7167\\u51FA\\u73B0\\u987A\\u5E8F\"}),(0,n.jsx)(e.td,{children:\"\\u4E0D\\u4FDD\\u8BC1\"}),(0,n.jsx)(e.td,{children:\"\\u6309\\u7167\\u51FA\\u73B0\\u987A\\u5E8F\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"DOM \\u4F9D\\u8D56\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"}),(0,n.jsx)(e.td,{children:\"\\u662F\\uFF08\\u7B49\\u5F85 DOM\\uFF09\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"<script>\"}),\" \\u6807\\u7B7E\\u7684\\u7528\\u9014\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"<script>\"}),\" \\u6807\\u7B7E\\u7528\\u4E8E\\u5728\\u7F51\\u9875\\u4E2D\\u5305\\u542B JavaScript\\u3002\",(0,n.jsx)(e.code,{children:\"async\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"defer\"}),\" \\u5C5E\\u6027\\u7528\\u4E8E\\u66F4\\u6539\\u811A\\u672C\\u7684\\u52A0\\u8F7D\\u548C\\u6267\\u884C\\u65B9\\u5F0F/\\u65F6\\u95F4\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"<script>\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5BF9\\u4E8E\\u6CA1\\u6709\\u4EFB\\u4F55 \",(0,n.jsx)(e.code,{children:\"async\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"defer\"}),\" \\u7684\\u666E\\u901A \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" \\u6807\\u7B7E\\uFF0C\\u5F53\\u9047\\u5230\\u5B83\\u4EEC\\u65F6\\uFF0CHTML \\u89E3\\u6790\\u4F1A\\u88AB\\u963B\\u6B62\\uFF0C\\u811A\\u672C\\u4F1A\\u88AB\\u7ACB\\u5373\\u83B7\\u53D6\\u548C\\u6267\\u884C\\u3002HTML \\u89E3\\u6790\\u5728\\u811A\\u672C\\u6267\\u884C\\u5B8C\\u6BD5\\u540E\\u6062\\u590D\\u3002\\u5982\\u679C\\u811A\\u672C\\u5F88\\u5927\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u963B\\u6B62\\u9875\\u9762\\u7684\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5C06 \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" \\u7528\\u4E8E\\u9875\\u9762\\u4F9D\\u8D56\\u4E8E\\u6B63\\u786E\\u6E32\\u67D3\\u7684\\u5173\\u952E\\u811A\\u672C\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>Regular Script</title>\n  </head>\n  <body>\n    <!-- Content before the script -->\n    <h1>Regular Script Example</h1>\n    <p>This content will be rendered before the script executes.</p>\n\n    <!-- Regular script -->\n    <script src=\"regular.js\"><\\/script>\n\n    <!-- Content after the script -->\n    <p>This content will be rendered after the script executes.</p>\n  </body>\n</html>\n`})}),`\n`,`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"<script async>\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 \",(0,n.jsx)(e.code,{children:\"<script async>\"}),\" \\u4E2D\\uFF0C\\u6D4F\\u89C8\\u5668\\u5F02\\u6B65\\u4E0B\\u8F7D\\u811A\\u672C\\u6587\\u4EF6\\uFF08\\u4E0E HTML \\u89E3\\u6790\\u5E76\\u884C\\uFF09\\uFF0C\\u5E76\\u5728\\u811A\\u672C\\u53EF\\u7528\\u540E\\u7ACB\\u5373\\u6267\\u884C\\uFF08\\u53EF\\u80FD\\u5728 HTML \\u89E3\\u6790\\u5B8C\\u6210\\u4E4B\\u524D\\uFF09\\u3002\\u6267\\u884C\\u4E0D\\u4E00\\u5B9A\\u6309\\u7167\\u5B83\\u5728 HTML \\u6587\\u6863\\u4E2D\\u51FA\\u73B0\\u7684\\u987A\\u5E8F\\u6267\\u884C\\u3002\\u8FD9\\u53EF\\u4EE5\\u63D0\\u9AD8\\u611F\\u77E5\\u7684\\u6027\\u80FD\\uFF0C\\u56E0\\u4E3A\\u6D4F\\u89C8\\u5668\\u5728\\u7EE7\\u7EED\\u6E32\\u67D3\\u9875\\u9762\\u4E4B\\u524D\\u4E0D\\u5FC5\\u7B49\\u5F85\\u811A\\u672C\\u4E0B\\u8F7D\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u811A\\u672C\\u72EC\\u7ACB\\u4E8E\\u9875\\u9762\\u4E0A\\u7684\\u4EFB\\u4F55\\u5176\\u4ED6\\u811A\\u672C\\u65F6\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"<script async>\"}),\"\\uFF0C\\u4F8B\\u5982\\u5206\\u6790\\u548C\\u5E7F\\u544A\\u811A\\u672C\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>Async Script</title>\n  </head>\n  <body>\n    <!-- Content before the script -->\n    <h1>Async Script Example</h1>\n    <p>This content will be rendered before the async script executes.</p>\n\n    <!-- Async script -->\n    <script async src=\"async.js\"><\\/script>\n\n    <!-- Content after the script -->\n    <p>\n      This content may be rendered before or after the async script executes.\n    </p>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"<script defer>\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E0E \",(0,n.jsx)(e.code,{children:\"<script async>\"}),\" \\u7C7B\\u4F3C\\uFF0C\",(0,n.jsx)(e.code,{children:\"<script defer>\"}),\" \\u4E5F\\u4F1A\\u4E0E HTML \\u89E3\\u6790\\u5E76\\u884C\\u4E0B\\u8F7D\\u811A\\u672C\\uFF0C\\u4F46\\u811A\\u672C\\u4EC5\\u5728\\u6587\\u6863\\u88AB\\u5B8C\\u5168\\u89E3\\u6790\\u5E76\\u4E14\\u5728\\u89E6\\u53D1 \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" \\u4E4B\\u524D\\u6267\\u884C\\u3002\\u5982\\u679C\\u6709\\u591A\\u4E2A\\uFF0C\\u5219\\u6BCF\\u4E2A\\u5EF6\\u8FDF\\u811A\\u672C\\u6309\\u7167\\u5B83\\u4EEC\\u5728 HTML \\u6587\\u6863\\u4E2D\\u51FA\\u73B0\\u7684\\u987A\\u5E8F\\u6267\\u884C\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u811A\\u672C\\u4F9D\\u8D56\\u4E8E\\u5B8C\\u5168\\u89E3\\u6790\\u7684 DOM\\uFF0C\\u5219 \",(0,n.jsx)(e.code,{children:\"defer\"}),\" \\u5C5E\\u6027\\u5C06\\u6709\\u52A9\\u4E8E\\u786E\\u4FDD\\u5728\\u6267\\u884C\\u4E4B\\u524D\\u5B8C\\u5168\\u89E3\\u6790 HTML\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>Deferred Script</title>\n  </head>\n  <body>\n    <!-- Content before the script -->\n    <h1>Deferred Script Example</h1>\n    <p>This content will be rendered before the deferred script executes.</p>\n\n    <!-- Deferred script -->\n    <script defer src=\"deferred.js\"><\\/script>\n\n    <!-- Content after the script -->\n    <p>This content will be rendered before the deferred script executes.</p>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"async\"}),\" \\u5C5E\\u6027\\u5E94\\u7528\\u4E8E\\u5BF9\\u9875\\u9762\\u521D\\u59CB\\u6E32\\u67D3\\u4E0D\\u5173\\u952E\\u4E14\\u5F7C\\u6B64\\u4E0D\\u4F9D\\u8D56\\u7684\\u811A\\u672C\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"defer\"}),\" \\u5C5E\\u6027\\u5E94\\u7528\\u4E8E\\u4F9D\\u8D56\\u4E8E/\\u88AB\\u53E6\\u4E00\\u4E2A\\u811A\\u672C\\u4F9D\\u8D56\\u7684\\u811A\\u672C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5BF9\\u4E8E\\u6CA1\\u6709 \",(0,n.jsx)(e.code,{children:\"src\"}),\" \\u5C5E\\u6027\\u7684\\u811A\\u672C\\uFF0C\\u5C06\\u5FFD\\u7565 \",(0,n.jsx)(e.code,{children:\"async\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"defer\"}),\" \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5305\\u542B \",(0,n.jsx)(e.code,{children:\"document.write()\"}),\" \\u7684\\u5E26\\u6709 \",(0,n.jsx)(e.code,{children:\"defer\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"async\"}),\" \\u7684 \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" \\u5C06\\u88AB\\u5FFD\\u7565\\uFF0C\\u5E76\\u663E\\u793A\\u7C7B\\u4F3C\\u201C\\u4ECE\\u5F02\\u6B65\\u52A0\\u8F7D\\u7684\\u5916\\u90E8\\u811A\\u672C\\u5BF9 \",(0,n.jsx)(e.code,{children:\"document.write()\"}),\" \\u7684\\u8C03\\u7528\\u88AB\\u5FFD\\u7565\\u201D\\u7684\\u6D88\\u606F\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5373\\u4F7F \",(0,n.jsx)(e.code,{children:\"async\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"defer\"}),\" \\u6709\\u52A9\\u4E8E\\u4F7F\\u811A\\u672C\\u4E0B\\u8F7D\\u5F02\\u6B65\\uFF0C\\u4F46\\u811A\\u672C\\u6700\\u7EC8\\u4ECD\\u5728\\u4E3B\\u7EBF\\u7A0B\\u4E0A\\u6267\\u884C\\u3002\\u5982\\u679C\\u8FD9\\u4E9B\\u811A\\u672C\\u662F\\u8BA1\\u7B97\\u5BC6\\u96C6\\u578B\\u7684\\uFF0C\\u5219\\u53EF\\u80FD\\u5BFC\\u81F4 UI \\u6EDE\\u540E/\\u51BB\\u7ED3\\u3002\",(0,n.jsx)(e.a,{href:\"https://partytown.builder.io/\",children:\"Partytown\"}),\" \\u662F\\u4E00\\u4E2A\\u5E93\\uFF0C\\u5B83\\u6709\\u52A9\\u4E8E\\u5C06\\u811A\\u672C\\u6267\\u884C\\u91CD\\u65B0\\u5B9A\\u4F4D\\u5230 \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API\",children:\"web worker\"}),\" \\u5E76\\u4ECE \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Main_thread\",children:\"\\u4E3B\\u7EBF\\u7A0B\"}),\" \\u4E2D\\u79FB\\u51FA\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u60A8\\u65E0\\u6CD5\\u63A7\\u5236\\u4EE3\\u7801\\u7684\\u7B2C\\u4E09\\u65B9\\u811A\\u672C\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`]}),`\n`,`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer\",children:[(0,n.jsx)(e.code,{children:\"<script>\"}),\": The Script element | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html\",children:\"async vs defer attributes\"})}),`\n`]})]})}function g(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(o,r)})):o(r)}var w=g;return T(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var a=Object.create;var t=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var u=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),M=(r,e)=>{for(var c in e)t(r,c,{get:e[c],enumerable:!0})},h=(r,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of y(e))!b.call(r,d)&&d!==c&&t(r,d,{get:()=>e[d],enumerable:!(i=f(e,d))||i.enumerable});return r};var T=(r,e,c)=>(c=r!=null?a(m(r)):{},h(e||!r||!r.__esModule?t(c,\"default\",{value:r,enumerable:!0}):c,r)),L=r=>h(t({},\"__esModule\",{value:!0}),r);var s=u((g,l)=>{l.exports=_jsx_runtime});var x={};M(x,{default:()=>p,frontmatter:()=>w});var n=T(s()),w={title:\"\\u63CF\\u8FF0 `<script>`\\u3001`<script async>` \\u548C `<script defer>` \\u4E4B\\u95F4\\u7684\\u533A\\u522B\"};function o(r){let e={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6240\\u6709\\u8FD9\\u4E9B\\u65B9\\u5F0F\\uFF08\",(0,n.jsx)(e.code,{children:\"<script>\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"<script async>\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"<script defer>\"}),\"\\uFF09\\u90FD\\u7528\\u4E8E\\u5728 HTML \\u6587\\u6863\\u4E2D\\u52A0\\u8F7D\\u548C\\u6267\\u884C JavaScript \\u6587\\u4EF6\\uFF0C\\u4F46\\u5B83\\u4EEC\\u5728\\u6D4F\\u89C8\\u5668\\u5904\\u7406\\u811A\\u672C\\u7684\\u52A0\\u8F7D\\u548C\\u6267\\u884C\\u65B9\\u5F0F\\u4E0A\\u6709\\u6240\\u4E0D\\u540C\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"<script>\"}),\" \\u662F\\u5305\\u542B JavaScript \\u7684\\u9ED8\\u8BA4\\u65B9\\u5F0F\\u3002\\u6D4F\\u89C8\\u5668\\u5728\\u4E0B\\u8F7D\\u548C\\u6267\\u884C\\u811A\\u672C\\u65F6\\u4F1A\\u963B\\u6B62 HTML \\u89E3\\u6790\\u3002\\u5728\\u811A\\u672C\\u6267\\u884C\\u5B8C\\u6BD5\\u4E4B\\u524D\\uFF0C\\u6D4F\\u89C8\\u5668\\u4E0D\\u4F1A\\u7EE7\\u7EED\\u6E32\\u67D3\\u9875\\u9762\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"<script async>\"}),\" \\u5F02\\u6B65\\u4E0B\\u8F7D\\u811A\\u672C\\uFF0C\\u4E0E\\u89E3\\u6790 HTML \\u5E76\\u884C\\u3002\\u5728\\u811A\\u672C\\u53EF\\u7528\\u540E\\u7ACB\\u5373\\u6267\\u884C\\u811A\\u672C\\uFF0C\\u53EF\\u80FD\\u4F1A\\u4E2D\\u65AD HTML \\u89E3\\u6790\\u3002\",(0,n.jsx)(e.code,{children:\"<script async>\"}),\" \\u4E4B\\u95F4\\u4E0D\\u4F1A\\u4E92\\u76F8\\u7B49\\u5F85\\uFF0C\\u5E76\\u4E14\\u4EE5\\u4E0D\\u7279\\u5B9A\\u7684\\u987A\\u5E8F\\u6267\\u884C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"<script defer>\"}),\" \\u5F02\\u6B65\\u4E0B\\u8F7D\\u811A\\u672C\\uFF0C\\u4E0E\\u89E3\\u6790 HTML \\u5E76\\u884C\\u3002\\u4F46\\u662F\\uFF0C\\u811A\\u672C\\u7684\\u6267\\u884C\\u88AB\\u63A8\\u8FDF\\u5230 HTML \\u89E3\\u6790\\u5B8C\\u6210\\u540E\\uFF0C\\u6309\\u7167\\u5B83\\u4EEC\\u5728 HTML \\u4E2D\\u51FA\\u73B0\\u7684\\u987A\\u5E8F\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u8868\\u683C\\uFF0C\\u603B\\u7ED3\\u4E86\\u5728 HTML \\u6587\\u6863\\u4E2D\\u52A0\\u8F7D \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" \\u7684 3 \\u79CD\\u65B9\\u5F0F\\u3002\"]}),`\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:\"\\u7279\\u6027\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"<script>\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"<script async>\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"<script defer>\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u89E3\\u6790\\u884C\\u4E3A\"}),(0,n.jsx)(e.td,{children:\"\\u963B\\u6B62 HTML \\u89E3\\u6790\"}),(0,n.jsx)(e.td,{children:\"\\u4E0E\\u89E3\\u6790\\u5E76\\u884C\\u8FD0\\u884C\"}),(0,n.jsx)(e.td,{children:\"\\u4E0E\\u89E3\\u6790\\u5E76\\u884C\\u8FD0\\u884C\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u6267\\u884C\\u987A\\u5E8F\"}),(0,n.jsx)(e.td,{children:\"\\u6309\\u7167\\u51FA\\u73B0\\u987A\\u5E8F\"}),(0,n.jsx)(e.td,{children:\"\\u4E0D\\u4FDD\\u8BC1\"}),(0,n.jsx)(e.td,{children:\"\\u6309\\u7167\\u51FA\\u73B0\\u987A\\u5E8F\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"DOM \\u4F9D\\u8D56\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"}),(0,n.jsx)(e.td,{children:\"\\u662F\\uFF08\\u7B49\\u5F85 DOM\\uFF09\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"<script>\"}),\" \\u6807\\u7B7E\\u7684\\u7528\\u9014\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"<script>\"}),\" \\u6807\\u7B7E\\u7528\\u4E8E\\u5728\\u7F51\\u9875\\u4E2D\\u5305\\u542B JavaScript\\u3002\",(0,n.jsx)(e.code,{children:\"async\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"defer\"}),\" \\u5C5E\\u6027\\u7528\\u4E8E\\u66F4\\u6539\\u811A\\u672C\\u7684\\u52A0\\u8F7D\\u548C\\u6267\\u884C\\u65B9\\u5F0F/\\u65F6\\u95F4\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"<script>\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5BF9\\u4E8E\\u6CA1\\u6709\\u4EFB\\u4F55 \",(0,n.jsx)(e.code,{children:\"async\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"defer\"}),\" \\u7684\\u666E\\u901A \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" \\u6807\\u7B7E\\uFF0C\\u5F53\\u9047\\u5230\\u5B83\\u4EEC\\u65F6\\uFF0CHTML \\u89E3\\u6790\\u4F1A\\u88AB\\u963B\\u6B62\\uFF0C\\u811A\\u672C\\u4F1A\\u88AB\\u7ACB\\u5373\\u83B7\\u53D6\\u548C\\u6267\\u884C\\u3002HTML \\u89E3\\u6790\\u5728\\u811A\\u672C\\u6267\\u884C\\u5B8C\\u6BD5\\u540E\\u6062\\u590D\\u3002\\u5982\\u679C\\u811A\\u672C\\u5F88\\u5927\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u963B\\u6B62\\u9875\\u9762\\u7684\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5C06 \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" \\u7528\\u4E8E\\u9875\\u9762\\u4F9D\\u8D56\\u4E8E\\u6B63\\u786E\\u6E32\\u67D3\\u7684\\u5173\\u952E\\u811A\\u672C\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>Regular Script</title>\n  </head>\n  <body>\n    <!-- Content before the script -->\n    <h1>Regular Script Example</h1>\n    <p>This content will be rendered before the script executes.</p>\n\n    <!-- Regular script -->\n    <script src=\"regular.js\"><\\/script>\n\n    <!-- Content after the script -->\n    <p>This content will be rendered after the script executes.</p>\n  </body>\n</html>\n`})}),`\n`,`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"<script async>\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 \",(0,n.jsx)(e.code,{children:\"<script async>\"}),\" \\u4E2D\\uFF0C\\u6D4F\\u89C8\\u5668\\u5F02\\u6B65\\u4E0B\\u8F7D\\u811A\\u672C\\u6587\\u4EF6\\uFF08\\u4E0E HTML \\u89E3\\u6790\\u5E76\\u884C\\uFF09\\uFF0C\\u5E76\\u5728\\u811A\\u672C\\u53EF\\u7528\\u540E\\u7ACB\\u5373\\u6267\\u884C\\uFF08\\u53EF\\u80FD\\u5728 HTML \\u89E3\\u6790\\u5B8C\\u6210\\u4E4B\\u524D\\uFF09\\u3002\\u6267\\u884C\\u4E0D\\u4E00\\u5B9A\\u6309\\u7167\\u5B83\\u5728 HTML \\u6587\\u6863\\u4E2D\\u51FA\\u73B0\\u7684\\u987A\\u5E8F\\u6267\\u884C\\u3002\\u8FD9\\u53EF\\u4EE5\\u63D0\\u9AD8\\u611F\\u77E5\\u7684\\u6027\\u80FD\\uFF0C\\u56E0\\u4E3A\\u6D4F\\u89C8\\u5668\\u5728\\u7EE7\\u7EED\\u6E32\\u67D3\\u9875\\u9762\\u4E4B\\u524D\\u4E0D\\u5FC5\\u7B49\\u5F85\\u811A\\u672C\\u4E0B\\u8F7D\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u811A\\u672C\\u72EC\\u7ACB\\u4E8E\\u9875\\u9762\\u4E0A\\u7684\\u4EFB\\u4F55\\u5176\\u4ED6\\u811A\\u672C\\u65F6\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"<script async>\"}),\"\\uFF0C\\u4F8B\\u5982\\u5206\\u6790\\u548C\\u5E7F\\u544A\\u811A\\u672C\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>Async Script</title>\n  </head>\n  <body>\n    <!-- Content before the script -->\n    <h1>Async Script Example</h1>\n    <p>This content will be rendered before the async script executes.</p>\n\n    <!-- Async script -->\n    <script async src=\"async.js\"><\\/script>\n\n    <!-- Content after the script -->\n    <p>\n      This content may be rendered before or after the async script executes.\n    </p>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"<script defer>\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E0E \",(0,n.jsx)(e.code,{children:\"<script async>\"}),\" \\u7C7B\\u4F3C\\uFF0C\",(0,n.jsx)(e.code,{children:\"<script defer>\"}),\" \\u4E5F\\u4F1A\\u4E0E HTML \\u89E3\\u6790\\u5E76\\u884C\\u4E0B\\u8F7D\\u811A\\u672C\\uFF0C\\u4F46\\u811A\\u672C\\u4EC5\\u5728\\u6587\\u6863\\u88AB\\u5B8C\\u5168\\u89E3\\u6790\\u5E76\\u4E14\\u5728\\u89E6\\u53D1 \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" \\u4E4B\\u524D\\u6267\\u884C\\u3002\\u5982\\u679C\\u6709\\u591A\\u4E2A\\uFF0C\\u5219\\u6BCF\\u4E2A\\u5EF6\\u8FDF\\u811A\\u672C\\u6309\\u7167\\u5B83\\u4EEC\\u5728 HTML \\u6587\\u6863\\u4E2D\\u51FA\\u73B0\\u7684\\u987A\\u5E8F\\u6267\\u884C\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u811A\\u672C\\u4F9D\\u8D56\\u4E8E\\u5B8C\\u5168\\u89E3\\u6790\\u7684 DOM\\uFF0C\\u5219 \",(0,n.jsx)(e.code,{children:\"defer\"}),\" \\u5C5E\\u6027\\u5C06\\u6709\\u52A9\\u4E8E\\u786E\\u4FDD\\u5728\\u6267\\u884C\\u4E4B\\u524D\\u5B8C\\u5168\\u89E3\\u6790 HTML\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>Deferred Script</title>\n  </head>\n  <body>\n    <!-- Content before the script -->\n    <h1>Deferred Script Example</h1>\n    <p>This content will be rendered before the deferred script executes.</p>\n\n    <!-- Deferred script -->\n    <script defer src=\"deferred.js\"><\\/script>\n\n    <!-- Content after the script -->\n    <p>This content will be rendered before the deferred script executes.</p>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"async\"}),\" \\u5C5E\\u6027\\u5E94\\u7528\\u4E8E\\u5BF9\\u9875\\u9762\\u521D\\u59CB\\u6E32\\u67D3\\u4E0D\\u5173\\u952E\\u4E14\\u5F7C\\u6B64\\u4E0D\\u4F9D\\u8D56\\u7684\\u811A\\u672C\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"defer\"}),\" \\u5C5E\\u6027\\u5E94\\u7528\\u4E8E\\u4F9D\\u8D56\\u4E8E/\\u88AB\\u53E6\\u4E00\\u4E2A\\u811A\\u672C\\u4F9D\\u8D56\\u7684\\u811A\\u672C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5BF9\\u4E8E\\u6CA1\\u6709 \",(0,n.jsx)(e.code,{children:\"src\"}),\" \\u5C5E\\u6027\\u7684\\u811A\\u672C\\uFF0C\\u5C06\\u5FFD\\u7565 \",(0,n.jsx)(e.code,{children:\"async\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"defer\"}),\" \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5305\\u542B \",(0,n.jsx)(e.code,{children:\"document.write()\"}),\" \\u7684\\u5E26\\u6709 \",(0,n.jsx)(e.code,{children:\"defer\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"async\"}),\" \\u7684 \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" \\u5C06\\u88AB\\u5FFD\\u7565\\uFF0C\\u5E76\\u663E\\u793A\\u7C7B\\u4F3C\\u201C\\u4ECE\\u5F02\\u6B65\\u52A0\\u8F7D\\u7684\\u5916\\u90E8\\u811A\\u672C\\u5BF9 \",(0,n.jsx)(e.code,{children:\"document.write()\"}),\" \\u7684\\u8C03\\u7528\\u88AB\\u5FFD\\u7565\\u201D\\u7684\\u6D88\\u606F\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5373\\u4F7F \",(0,n.jsx)(e.code,{children:\"async\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"defer\"}),\" \\u6709\\u52A9\\u4E8E\\u4F7F\\u811A\\u672C\\u4E0B\\u8F7D\\u5F02\\u6B65\\uFF0C\\u4F46\\u811A\\u672C\\u6700\\u7EC8\\u4ECD\\u5728\\u4E3B\\u7EBF\\u7A0B\\u4E0A\\u6267\\u884C\\u3002\\u5982\\u679C\\u8FD9\\u4E9B\\u811A\\u672C\\u662F\\u8BA1\\u7B97\\u5BC6\\u96C6\\u578B\\u7684\\uFF0C\\u5219\\u53EF\\u80FD\\u5BFC\\u81F4 UI \\u6EDE\\u540E/\\u51BB\\u7ED3\\u3002\",(0,n.jsx)(e.a,{href:\"https://partytown.builder.io/\",children:\"Partytown\"}),\" \\u662F\\u4E00\\u4E2A\\u5E93\\uFF0C\\u5B83\\u6709\\u52A9\\u4E8E\\u5C06\\u811A\\u672C\\u6267\\u884C\\u91CD\\u65B0\\u5B9A\\u4F4D\\u5230 \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API\",children:\"web worker\"}),\" \\u5E76\\u4ECE \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Main_thread\",children:\"\\u4E3B\\u7EBF\\u7A0B\"}),\" \\u4E2D\\u79FB\\u51FA\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u60A8\\u65E0\\u6CD5\\u63A7\\u5236\\u4EE3\\u7801\\u7684\\u7B2C\\u4E09\\u65B9\\u811A\\u672C\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`]}),`\n`,`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer\",children:[(0,n.jsx)(e.code,{children:\"<script>\"}),\": The Script element | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html\",children:\"async vs defer attributes\"})}),`\n`]})]})}function p(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(o,{...r})}):o(r)}return L(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/en-US.json b/apps/web/src/__generated__/questions/quiz/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/en-US.json
index 2eb5b3243..002424b02 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var p=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var s in e)r(n,s,{get:e[s],enumerable:!0})},o=(n,e,s,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of w(e))!m.call(n,t)&&t!==s&&r(n,t,{get:()=>e[t],enumerable:!(a=u(e,t))||a.enumerable});return n};var b=(n,e,s)=>(s=n!=null?l(f(n)):{},o(e||!n||!n.__esModule?r(s,\"default\",{value:n,enumerable:!0}):s,n)),v=n=>o(r({},\"__esModule\",{value:!0}),n);var d=p((k,c)=>{c.exports=_jsx_runtime});var y={};g(y,{default:()=>j,frontmatter:()=>x});var i=b(d()),x={title:\"Describe what you like and dislike about the CSS preprocessors you have used.\"};function h(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\",code:\"code\"},n.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Likes\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Mostly the advantages mentioned in \",(0,i.jsx)(e.a,{href:\"/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors\",children:'\"What are the advantages/disadvantages of using CSS preprocessors?\"'}),\".\"]}),`\n`,(0,i.jsx)(e.li,{children:\"Less is written in JavaScript, which plays well with Node.\"}),`\n`]}),`\n`,(0,i.jsx)(e.h2,{children:\"Dislikes\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Sass relies on \",(0,i.jsx)(e.code,{children:\"node-sass\"}),\", which is a binding for LibSass written in C++. The library has to be recompiled frequently when switching between Node.js versions.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[\"In Less, variable names are prefixed with \",(0,i.jsx)(e.code,{children:\"@\"}),\", which can be confused with native CSS keywords like \",(0,i.jsx)(e.code,{children:\"@media\"}),\", \",(0,i.jsx)(e.code,{children:\"@import\"}),\" and \",(0,i.jsx)(e.code,{children:\"@font-face\"}),\" rule.\"]}),`\n`]})]})}function S(n={}){let{wrapper:e}=n.components||{};return e?(0,i.jsx)(e,Object.assign({},n,{children:(0,i.jsx)(h,n)})):h(n)}var j=S;return v(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var s in e)r(n,s,{get:e[s],enumerable:!0})},o=(n,e,s,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of f(e))!p.call(n,t)&&t!==s&&r(n,t,{get:()=>e[t],enumerable:!(a=w(e,t))||a.enumerable});return n};var x=(n,e,s)=>(s=n!=null?u(m(n)):{},o(e||!n||!n.__esModule?r(s,\"default\",{value:n,enumerable:!0}):s,n)),b=n=>o(r({},\"__esModule\",{value:!0}),n);var d=g((j,c)=>{c.exports=_jsx_runtime});var y={};v(y,{default:()=>l,frontmatter:()=>S});var i=x(d()),S={title:\"Describe what you like and dislike about the CSS preprocessors you have used.\"};function h(n){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",ul:\"ul\",...n.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Likes\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Mostly the advantages mentioned in \",(0,i.jsx)(e.a,{href:\"/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors\",children:'\"What are the advantages/disadvantages of using CSS preprocessors?\"'}),\".\"]}),`\n`,(0,i.jsx)(e.li,{children:\"Less is written in JavaScript, which plays well with Node.\"}),`\n`]}),`\n`,(0,i.jsx)(e.h2,{children:\"Dislikes\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Sass relies on \",(0,i.jsx)(e.code,{children:\"node-sass\"}),\", which is a binding for LibSass written in C++. The library has to be recompiled frequently when switching between Node.js versions.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[\"In Less, variable names are prefixed with \",(0,i.jsx)(e.code,{children:\"@\"}),\", which can be confused with native CSS keywords like \",(0,i.jsx)(e.code,{children:\"@media\"}),\", \",(0,i.jsx)(e.code,{children:\"@import\"}),\" and \",(0,i.jsx)(e.code,{children:\"@font-face\"}),\" rule.\"]}),`\n`]})]})}function l(n={}){let{wrapper:e}=n.components||{};return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(h,{...n})}):h(n)}return b(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/pt-BR.json b/apps/web/src/__generated__/questions/quiz/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/pt-BR.json
index d08d66b82..6b4efc689 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),f=(o,e)=>{for(var n in e)r(o,n,{get:e[n],enumerable:!0})},t=(o,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of h(e))!p.call(o,a)&&a!==n&&r(o,a,{get:()=>e[a],enumerable:!(c=m(e,a))||c.enumerable});return o};var q=(o,e,n)=>(n=o!=null?u(v(o)):{},t(e||!o||!o.__esModule?r(n,\"default\",{value:o,enumerable:!0}):n,o)),x=o=>t(r({},\"__esModule\",{value:!0}),o);var d=g((L,i)=>{i.exports=_jsx_runtime});var b={};f(b,{default:()=>_,frontmatter:()=>S});var s=q(d()),S={title:\"Descreva o que voc\\xEA gosta e n\\xE3o gosta sobre os pr\\xE9-processadores CSS que voc\\xEA usou.\"};function l(o){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\",code:\"code\"},o.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.h2,{children:\"Gostei\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsxs)(e.li,{children:[\"A maioria das vantagens mencionadas em \",(0,s.jsx)(e.a,{href:\"/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors\",children:'\"Quais s\\xE3o as vantagens/desvantagens de usar pr\\xE9-processadores CSS?\"'}),\".\"]}),`\n`,(0,s.jsx)(e.li,{children:\"Less \\xE9 escrito em JavaScript, o que o torna compat\\xEDvel com o Node.\"}),`\n`]}),`\n`,(0,s.jsx)(e.h2,{children:\"N\\xE3o gostei\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsxs)(e.li,{children:[\"Sass depende de \",(0,s.jsx)(e.code,{children:\"node-sass\"}),\", que \\xE9 um v\\xEDnculo para o LibSass escrito em C++. A biblioteca tem que ser recalculada com frequ\\xEAncia quando estiver mudando entre as vers\\xF5es do Node.js.\"]}),`\n`,(0,s.jsxs)(e.li,{children:[\"No Less, os nomes de vari\\xE1veis s\\xE3o prefixados com \",(0,s.jsx)(e.code,{children:\"@\"}),\", o que pode ser confundido com palavras-chave nativas do CSS, como a regra \",(0,s.jsx)(e.code,{children:\"@media\"}),\", \",(0,s.jsx)(e.code,{children:\"@import\"}),\" e \",(0,s.jsx)(e.code,{children:\"@font-face\"}),\".\"]}),`\n`]})]})}function j(o={}){let{wrapper:e}=o.components||{};return e?(0,s.jsx)(e,Object.assign({},o,{children:(0,s.jsx)(l,o)})):l(o)}var _=j;return x(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),q=(o,e)=>{for(var n in e)r(o,n,{get:e[n],enumerable:!0})},t=(o,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of v(e))!f.call(o,a)&&a!==n&&r(o,a,{get:()=>e[a],enumerable:!(c=h(e,a))||c.enumerable});return o};var x=(o,e,n)=>(n=o!=null?m(p(o)):{},t(e||!o||!o.__esModule?r(n,\"default\",{value:o,enumerable:!0}):n,o)),S=o=>t(r({},\"__esModule\",{value:!0}),o);var i=g((b,d)=>{d.exports=_jsx_runtime});var j={};q(j,{default:()=>u,frontmatter:()=>_});var s=x(i()),_={title:\"Descreva o que voc\\xEA gosta e n\\xE3o gosta sobre os pr\\xE9-processadores CSS que voc\\xEA usou.\"};function l(o){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",ul:\"ul\",...o.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.h2,{children:\"Gostei\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsxs)(e.li,{children:[\"A maioria das vantagens mencionadas em \",(0,s.jsx)(e.a,{href:\"/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors\",children:'\"Quais s\\xE3o as vantagens/desvantagens de usar pr\\xE9-processadores CSS?\"'}),\".\"]}),`\n`,(0,s.jsx)(e.li,{children:\"Less \\xE9 escrito em JavaScript, o que o torna compat\\xEDvel com o Node.\"}),`\n`]}),`\n`,(0,s.jsx)(e.h2,{children:\"N\\xE3o gostei\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsxs)(e.li,{children:[\"Sass depende de \",(0,s.jsx)(e.code,{children:\"node-sass\"}),\", que \\xE9 um v\\xEDnculo para o LibSass escrito em C++. A biblioteca tem que ser recalculada com frequ\\xEAncia quando estiver mudando entre as vers\\xF5es do Node.js.\"]}),`\n`,(0,s.jsxs)(e.li,{children:[\"No Less, os nomes de vari\\xE1veis s\\xE3o prefixados com \",(0,s.jsx)(e.code,{children:\"@\"}),\", o que pode ser confundido com palavras-chave nativas do CSS, como a regra \",(0,s.jsx)(e.code,{children:\"@media\"}),\", \",(0,s.jsx)(e.code,{children:\"@import\"}),\" e \",(0,s.jsx)(e.code,{children:\"@font-face\"}),\".\"]}),`\n`]})]})}function u(o={}){let{wrapper:e}=o.components||{};return e?(0,s.jsx)(e,{...o,children:(0,s.jsx)(l,{...o})}):l(o)}return S(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/zh-CN.json b/apps/web/src/__generated__/questions/quiz/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/zh-CN.json
index 6098712d5..5bcc9e187 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var S=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var t in e)i(n,t,{get:e[t],enumerable:!0})},o=(n,e,t,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!x.call(n,c)&&c!==t&&i(n,c,{get:()=>e[c],enumerable:!(r=u(e,c))||r.enumerable});return n};var g=(n,e,t)=>(t=n!=null?h(f(n)):{},o(e||!n||!n.__esModule?i(t,\"default\",{value:n,enumerable:!0}):t,n)),p=n=>o(i({},\"__esModule\",{value:!0}),n);var a=S((M,d)=>{d.exports=_jsx_runtime});var v={};j(v,{default:()=>b,frontmatter:()=>_});var s=g(a()),_={title:\"\\u63CF\\u8FF0\\u4F60\\u559C\\u6B22\\u548C\\u4E0D\\u559C\\u6B22\\u4F60\\u4F7F\\u7528\\u8FC7\\u7684 CSS \\u9884\\u5904\\u7406\\u5668\\u7684\\u5730\\u65B9\\u3002\"};function l(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\",code:\"code\"},n.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.h2,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsxs)(e.li,{children:[\"\\u4E3B\\u8981\\u662F \",(0,s.jsx)(e.a,{href:\"/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors\",children:'\"\\u4F7F\\u7528 CSS \\u9884\\u5904\\u7406\\u5668\\u7684\\u4F18\\u70B9/\\u7F3A\\u70B9\\u662F\\u4EC0\\u4E48\\uFF1F\"'}),\" \\u4E2D\\u63D0\\u5230\\u7684\\u4F18\\u70B9\\u3002\"]}),`\n`,(0,s.jsx)(e.li,{children:\"\\u7F16\\u5199\\u7684 JavaScript \\u8F83\\u5C11\\uFF0C\\u8FD9\\u4E0E Node \\u914D\\u5408\\u5F97\\u5F88\\u597D\\u3002\"}),`\n`]}),`\n`,(0,s.jsx)(e.h2,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsxs)(e.li,{children:[\"Sass \\u4F9D\\u8D56\\u4E8E \",(0,s.jsx)(e.code,{children:\"node-sass\"}),\"\\uFF0C\\u5B83\\u662F\\u7528 C++ \\u7F16\\u5199\\u7684 LibSass \\u7684\\u4E00\\u4E2A\\u7ED1\\u5B9A\\u3002 \\u5728 Node.js \\u7248\\u672C\\u4E4B\\u95F4\\u5207\\u6362\\u65F6\\uFF0C\\u5FC5\\u987B\\u7ECF\\u5E38\\u91CD\\u65B0\\u7F16\\u8BD1\\u8BE5\\u5E93\\u3002\"]}),`\n`,(0,s.jsxs)(e.li,{children:[\"\\u5728 Less \\u4E2D\\uFF0C\\u53D8\\u91CF\\u540D\\u4EE5 \",(0,s.jsx)(e.code,{children:\"@\"}),\" \\u4E3A\\u524D\\u7F00\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u4E0E \",(0,s.jsx)(e.code,{children:\"@media\"}),\"\\u3001\",(0,s.jsx)(e.code,{children:\"@import\"}),\" \\u548C \",(0,s.jsx)(e.code,{children:\"@font-face\"}),\" \\u89C4\\u5219\\u7B49\\u539F\\u751F CSS \\u5173\\u952E\\u5B57\\u6DF7\\u6DC6\\u3002\"]}),`\n`]})]})}function C(n={}){let{wrapper:e}=n.components||{};return e?(0,s.jsx)(e,Object.assign({},n,{children:(0,s.jsx)(l,n)})):l(n)}var b=C;return p(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var p=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),_=(n,e)=>{for(var t in e)i(n,t,{get:e[t],enumerable:!0})},o=(n,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of f(e))!S.call(n,c)&&c!==t&&i(n,c,{get:()=>e[c],enumerable:!(s=m(e,c))||s.enumerable});return n};var j=(n,e,t)=>(t=n!=null?u(x(n)):{},o(e||!n||!n.__esModule?i(t,\"default\",{value:n,enumerable:!0}):t,n)),C=n=>o(i({},\"__esModule\",{value:!0}),n);var a=p((M,d)=>{d.exports=_jsx_runtime});var v={};_(v,{default:()=>h,frontmatter:()=>g});var r=j(a()),g={title:\"\\u63CF\\u8FF0\\u4F60\\u559C\\u6B22\\u548C\\u4E0D\\u559C\\u6B22\\u4F60\\u4F7F\\u7528\\u8FC7\\u7684 CSS \\u9884\\u5904\\u7406\\u5668\\u7684\\u5730\\u65B9\\u3002\"};function l(n){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",ul:\"ul\",...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[\"\\u4E3B\\u8981\\u662F \",(0,r.jsx)(e.a,{href:\"/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors\",children:'\"\\u4F7F\\u7528 CSS \\u9884\\u5904\\u7406\\u5668\\u7684\\u4F18\\u70B9/\\u7F3A\\u70B9\\u662F\\u4EC0\\u4E48\\uFF1F\"'}),\" \\u4E2D\\u63D0\\u5230\\u7684\\u4F18\\u70B9\\u3002\"]}),`\n`,(0,r.jsx)(e.li,{children:\"\\u7F16\\u5199\\u7684 JavaScript \\u8F83\\u5C11\\uFF0C\\u8FD9\\u4E0E Node \\u914D\\u5408\\u5F97\\u5F88\\u597D\\u3002\"}),`\n`]}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[\"Sass \\u4F9D\\u8D56\\u4E8E \",(0,r.jsx)(e.code,{children:\"node-sass\"}),\"\\uFF0C\\u5B83\\u662F\\u7528 C++ \\u7F16\\u5199\\u7684 LibSass \\u7684\\u4E00\\u4E2A\\u7ED1\\u5B9A\\u3002 \\u5728 Node.js \\u7248\\u672C\\u4E4B\\u95F4\\u5207\\u6362\\u65F6\\uFF0C\\u5FC5\\u987B\\u7ECF\\u5E38\\u91CD\\u65B0\\u7F16\\u8BD1\\u8BE5\\u5E93\\u3002\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"\\u5728 Less \\u4E2D\\uFF0C\\u53D8\\u91CF\\u540D\\u4EE5 \",(0,r.jsx)(e.code,{children:\"@\"}),\" \\u4E3A\\u524D\\u7F00\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u4E0E \",(0,r.jsx)(e.code,{children:\"@media\"}),\"\\u3001\",(0,r.jsx)(e.code,{children:\"@import\"}),\" \\u548C \",(0,r.jsx)(e.code,{children:\"@font-face\"}),\" \\u89C4\\u5219\\u7B49\\u539F\\u751F CSS \\u5173\\u952E\\u5B57\\u6DF7\\u6DC6\\u3002\"]}),`\n`]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(l,{...n})}):l(n)}return C(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/describe-z-index-and-how-stacking-context-is-formed/en-US.json b/apps/web/src/__generated__/questions/quiz/describe-z-index-and-how-stacking-context-is-formed/en-US.json
index 946da1114..73e761da7 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-z-index-and-how-stacking-context-is-formed/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-z-index-and-how-stacking-context-is-formed/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),u=(n,e)=>{for(var i in e)a(n,i,{get:e[i],enumerable:!0})},c=(n,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!g.call(n,o)&&o!==i&&a(n,o,{get:()=>e[o],enumerable:!(s=m(e,o))||s.enumerable});return n};var k=(n,e,i)=>(i=n!=null?d(f(n)):{},c(e||!n||!n.__esModule?a(i,\"default\",{value:n,enumerable:!0}):i,n)),w=n=>c(a({},\"__esModule\",{value:!0}),n);var l=x((C,r)=>{r.exports=_jsx_runtime});var S={};u(S,{default:()=>v,frontmatter:()=>_});var t=k(l()),_={title:\"Describe `z-index` and how stacking context is formed.\"};function h(n){let e=Object.assign({p:\"p\",code:\"code\",em:\"em\",strong:\"strong\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[\"The \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" property in CSS controls the vertical stacking order of elements that overlap. \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" only affects positioned elements (elements which have a \",(0,t.jsx)(e.code,{children:\"position\"}),\" value which is not \",(0,t.jsx)(e.code,{children:\"static\"}),\") and its descendants or flex items.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Without any \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning (and their children) will always appear on top of elements with default static positioning, regardless of the HTML hierarchy.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"A stacking context is an element that contains a set of layers. Within a local stacking context, the \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" values of its children are set relative to that element rather than to the document root. Layers outside of that context \\u2014 i.e. sibling elements of a local stacking context \\u2014 can't sit between layers within it. If an element B sits on top of element A, a child element of element A, element C, can never be higher than element B even if element C has a higher \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" than element B.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Each stacking context is self-contained - after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context. A handful of CSS properties trigger a new stacking context, such as \",(0,t.jsx)(e.code,{children:\"opacity\"}),\" less than 1, \",(0,t.jsx)(e.code,{children:\"filter\"}),\" that is not \",(0,t.jsx)(e.code,{children:\"none\"}),\", and \",(0,t.jsx)(e.code,{children:\"transform\"}),\" that is not\",(0,t.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`,(0,t.jsx)(e.p,{children:(0,t.jsxs)(e.em,{children:[(0,t.jsx)(e.strong,{children:\"Note\"}),\": What exactly qualifies an element to create a stacking context is listed in this long set of \",(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context\",children:\"rules\"}),\".\"]})})]})}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 v=y;return w(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var u=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),k=(n,e)=>{for(var i in e)a(n,i,{get:e[i],enumerable:!0})},s=(n,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of f(e))!x.call(n,o)&&o!==i&&a(n,o,{get:()=>e[o],enumerable:!(c=p(e,o))||c.enumerable});return n};var w=(n,e,i)=>(i=n!=null?m(g(n)):{},s(e||!n||!n.__esModule?a(i,\"default\",{value:n,enumerable:!0}):i,n)),_=n=>s(a({},\"__esModule\",{value:!0}),n);var l=u((z,r)=>{r.exports=_jsx_runtime});var v={};k(v,{default:()=>d,frontmatter:()=>y});var t=w(l()),y={title:\"Describe `z-index` and how stacking context is formed.\"};function h(n){let e={a:\"a\",code:\"code\",em:\"em\",p:\"p\",strong:\"strong\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[\"The \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" property in CSS controls the vertical stacking order of elements that overlap. \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" only affects positioned elements (elements which have a \",(0,t.jsx)(e.code,{children:\"position\"}),\" value which is not \",(0,t.jsx)(e.code,{children:\"static\"}),\") and its descendants or flex items.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Without any \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning (and their children) will always appear on top of elements with default static positioning, regardless of the HTML hierarchy.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"A stacking context is an element that contains a set of layers. Within a local stacking context, the \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" values of its children are set relative to that element rather than to the document root. Layers outside of that context \\u2014 i.e. sibling elements of a local stacking context \\u2014 can't sit between layers within it. If an element B sits on top of element A, a child element of element A, element C, can never be higher than element B even if element C has a higher \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" than element B.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Each stacking context is self-contained - after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context. A handful of CSS properties trigger a new stacking context, such as \",(0,t.jsx)(e.code,{children:\"opacity\"}),\" less than 1, \",(0,t.jsx)(e.code,{children:\"filter\"}),\" that is not \",(0,t.jsx)(e.code,{children:\"none\"}),\", and \",(0,t.jsx)(e.code,{children:\"transform\"}),\" that is not\",(0,t.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`,(0,t.jsx)(e.p,{children:(0,t.jsxs)(e.em,{children:[(0,t.jsx)(e.strong,{children:\"Note\"}),\": What exactly qualifies an element to create a stacking context is listed in this long set of \",(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context\",children:\"rules\"}),\".\"]})})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(h,{...n})}):h(n)}return _(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/describe-z-index-and-how-stacking-context-is-formed/pt-BR.json b/apps/web/src/__generated__/questions/quiz/describe-z-index-and-how-stacking-context-is-formed/pt-BR.json
index 144b62041..f2bdfed15 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-z-index-and-how-stacking-context-is-formed/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-z-index-and-how-stacking-context-is-formed/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),q=(n,e)=>{for(var t in e)d(n,t,{get:e[t],enumerable:!0})},i=(n,e,t,m)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!x.call(n,a)&&a!==t&&d(n,a,{get:()=>e[a],enumerable:!(m=p(e,a))||m.enumerable});return n};var g=(n,e,t)=>(t=n!=null?l(h(n)):{},i(e||!n||!n.__esModule?d(t,\"default\",{value:n,enumerable:!0}):t,n)),_=n=>i(d({},\"__esModule\",{value:!0}),n);var c=f((b,s)=>{s.exports=_jsx_runtime});var C={};q(C,{default:()=>v,frontmatter:()=>S});var o=g(c()),S={title:\"Descreva `z-index` e como o contexto de empilhamento \\xE9 formado.\"};function r(n){let e=Object.assign({p:\"p\",code:\"code\",em:\"em\",strong:\"strong\",a:\"a\"},n.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"A propriedade \",(0,o.jsx)(e.code,{children:\"z-index\"}),\" no CSS controla a ordem de empilhamento vertical dos elementos que se sobrep\\xF5em. 'z-index' afeta apenas elementos posicionados (elementos que t\\xEAm um valor de 'posi\\xE7\\xE3o' que n\\xE3o \\xE9 'static') e seus descendentes ou itens flex\\xEDveis.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Sem qualquer valor de \",(0,o.jsx)(e.code,{children:\"z-index\"}),\", pilha de elementos na ordem de exibi\\xE7\\xE3o no DOM (o menor n\\xEDvel abaixo na mesma hierarquia aparece no topo). Elementos com posicionamento n\\xE3o est\\xE1tico (e seus filhos) sempre aparecer\\xE3o no topo dos elementos com posi\\xE7\\xE3o est\\xE1tica padr\\xE3o, independente da hierarquia HTML.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Um contexto de empilhamento \\xE9 um elemento que cont\\xE9m um conjunto de camadas. Dentro de um contexto local de empilhamento, os valores de \",(0,o.jsx)(e.code,{children:\"z-index\"}),\" de seus filhos s\\xE3o definidos em rela\\xE7\\xE3o a esse elemento, ao inv\\xE9s da raiz do documento. Camadas fora desse contexto \\u2014 ou seja, elementos irm\\xE3s de um contexto local de empilhamento \\u2014 n\\xE3o podem ficar entre as camadas dentro dele. Se um elemento B ficar no topo do elemento A, um elemento filho do elemento A, elemento C, nunca pode ser maior que o elemento B, mesmo que o elemento C tenha um \",(0,o.jsx)(e.code,{children:\"z-index\"}),\" maior que o elemento B.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Cada contexto de empilhamento \\xE9 auto-contido - ap\\xF3s o conte\\xFAdo do elemento ser empilhado, todo o elemento \\xE9 considerado na ordem de empilhamento do contexto de empilhamento do pai. Algumas propriedades CSS desencadeiam um novo contexto de empilhamento, como \",(0,o.jsx)(e.code,{children:\"opacity\"}),\" menor que 1, \",(0,o.jsx)(e.code,{children:\"filter\"}),\" que n\\xE3o \\xE9 \",(0,o.jsx)(e.code,{children:\"none\"}),\", e \",(0,o.jsx)(e.code,{children:\"transform\"}),\" que n\\xE3o \\xE9 \",(0,o.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`,(0,o.jsx)(e.p,{children:(0,o.jsxs)(e.em,{children:[(0,o.jsx)(e.strong,{children:\"Nota\"}),\": O que exatamente qualifica-se como um elemento para criar um contexto de empilhamento est\\xE1 listado neste longo conjunto de \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context\",children:\"rules\"}),\".\"]})})]})}function j(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(r,n)})):r(n)}var v=j;return _(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var q=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),_=(n,e)=>{for(var t in e)d(n,t,{get:e[t],enumerable:!0})},i=(n,e,t,m)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of h(e))!f.call(n,a)&&a!==t&&d(n,a,{get:()=>e[a],enumerable:!(m=u(e,a))||m.enumerable});return n};var g=(n,e,t)=>(t=n!=null?p(x(n)):{},i(e||!n||!n.__esModule?d(t,\"default\",{value:n,enumerable:!0}):t,n)),S=n=>i(d({},\"__esModule\",{value:!0}),n);var c=q((j,r)=>{r.exports=_jsx_runtime});var C={};_(C,{default:()=>l,frontmatter:()=>v});var o=g(c()),v={title:\"Descreva `z-index` e como o contexto de empilhamento \\xE9 formado.\"};function s(n){let e={a:\"a\",code:\"code\",em:\"em\",p:\"p\",strong:\"strong\",...n.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"A propriedade \",(0,o.jsx)(e.code,{children:\"z-index\"}),\" no CSS controla a ordem de empilhamento vertical dos elementos que se sobrep\\xF5em. 'z-index' afeta apenas elementos posicionados (elementos que t\\xEAm um valor de 'posi\\xE7\\xE3o' que n\\xE3o \\xE9 'static') e seus descendentes ou itens flex\\xEDveis.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Sem qualquer valor de \",(0,o.jsx)(e.code,{children:\"z-index\"}),\", pilha de elementos na ordem de exibi\\xE7\\xE3o no DOM (o menor n\\xEDvel abaixo na mesma hierarquia aparece no topo). Elementos com posicionamento n\\xE3o est\\xE1tico (e seus filhos) sempre aparecer\\xE3o no topo dos elementos com posi\\xE7\\xE3o est\\xE1tica padr\\xE3o, independente da hierarquia HTML.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Um contexto de empilhamento \\xE9 um elemento que cont\\xE9m um conjunto de camadas. Dentro de um contexto local de empilhamento, os valores de \",(0,o.jsx)(e.code,{children:\"z-index\"}),\" de seus filhos s\\xE3o definidos em rela\\xE7\\xE3o a esse elemento, ao inv\\xE9s da raiz do documento. Camadas fora desse contexto \\u2014 ou seja, elementos irm\\xE3s de um contexto local de empilhamento \\u2014 n\\xE3o podem ficar entre as camadas dentro dele. Se um elemento B ficar no topo do elemento A, um elemento filho do elemento A, elemento C, nunca pode ser maior que o elemento B, mesmo que o elemento C tenha um \",(0,o.jsx)(e.code,{children:\"z-index\"}),\" maior que o elemento B.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Cada contexto de empilhamento \\xE9 auto-contido - ap\\xF3s o conte\\xFAdo do elemento ser empilhado, todo o elemento \\xE9 considerado na ordem de empilhamento do contexto de empilhamento do pai. Algumas propriedades CSS desencadeiam um novo contexto de empilhamento, como \",(0,o.jsx)(e.code,{children:\"opacity\"}),\" menor que 1, \",(0,o.jsx)(e.code,{children:\"filter\"}),\" que n\\xE3o \\xE9 \",(0,o.jsx)(e.code,{children:\"none\"}),\", e \",(0,o.jsx)(e.code,{children:\"transform\"}),\" que n\\xE3o \\xE9 \",(0,o.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`,(0,o.jsx)(e.p,{children:(0,o.jsxs)(e.em,{children:[(0,o.jsx)(e.strong,{children:\"Nota\"}),\": O que exatamente qualifica-se como um elemento para criar um contexto de empilhamento est\\xE1 listado neste longo conjunto de \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context\",children:\"rules\"}),\".\"]})})]})}function l(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(s,{...n})}):s(n)}return S(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/describe-z-index-and-how-stacking-context-is-formed/zh-CN.json b/apps/web/src/__generated__/questions/quiz/describe-z-index-and-how-stacking-context-is-formed/zh-CN.json
index 11cf2f10a..5b05704d1 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-z-index-and-how-stacking-context-is-formed/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-z-index-and-how-stacking-context-is-formed/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var o=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var g=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),f=(c,e)=>{for(var t in e)o(c,t,{get:e[t],enumerable:!0})},r=(c,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of m(e))!_.call(c,d)&&d!==t&&o(c,d,{get:()=>e[d],enumerable:!(i=x(e,d))||i.enumerable});return c};var S=(c,e,t)=>(t=c!=null?a(p(c)):{},r(e||!c||!c.__esModule?o(t,\"default\",{value:c,enumerable:!0}):t,c)),z=c=>r(o({},\"__esModule\",{value:!0}),c);var l=g((B,s)=>{s.exports=_jsx_runtime});var M={};f(M,{default:()=>u,frontmatter:()=>C});var n=S(l()),C={title:\"\\u63CF\\u8FF0 `z-index` \\u4EE5\\u53CA\\u5982\\u4F55\\u5F62\\u6210\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u3002\"};function h(c){let e=Object.assign({p:\"p\",code:\"code\",em:\"em\",strong:\"strong\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"CSS \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u5C5E\\u6027\\u63A7\\u5236\\u91CD\\u53E0\\u5143\\u7D20\\u7684\\u5782\\u76F4\\u5806\\u53E0\\u987A\\u5E8F\\u3002\",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u4EC5\\u5F71\\u54CD\\u5DF2\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\uFF08\\u5177\\u6709 \",(0,n.jsx)(e.code,{children:\"position\"}),\" \\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"static\"}),\" \\u7684\\u5143\\u7D20\\uFF09\\u53CA\\u5176\\u540E\\u4EE3\\u6216 flex \\u9879\\u76EE\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6CA1\\u6709\\u4EFB\\u4F55 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u503C\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5143\\u7D20\\u6309\\u7167\\u5B83\\u4EEC\\u5728 DOM \\u4E2D\\u51FA\\u73B0\\u7684\\u987A\\u5E8F\\u5806\\u53E0\\uFF08\\u5728\\u540C\\u4E00\\u5C42\\u7EA7\\u4E2D\\uFF0C\\u6700\\u4E0B\\u9762\\u7684\\u5143\\u7D20\\u51FA\\u73B0\\u5728\\u6700\\u4E0A\\u9762\\uFF09\\u3002\\u5177\\u6709\\u975E\\u9759\\u6001\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\uFF08\\u53CA\\u5176\\u5B50\\u5143\\u7D20\\uFF09\\u5C06\\u59CB\\u7EC8\\u51FA\\u73B0\\u5728\\u5177\\u6709\\u9ED8\\u8BA4\\u9759\\u6001\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\u4E4B\\u4E0A\\uFF0C\\u800C\\u4E0D\\u7BA1 HTML \\u5C42\\u6B21\\u7ED3\\u6784\\u5982\\u4F55\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u662F\\u5305\\u542B\\u4E00\\u7EC4\\u5C42\\u7684\\u5143\\u7D20\\u3002\\u5728\\u5C40\\u90E8\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u4E2D\\uFF0C\\u5176\\u5B50\\u5143\\u7D20\\u7684 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u503C\\u662F\\u76F8\\u5BF9\\u4E8E\\u8BE5\\u5143\\u7D20\\u8BBE\\u7F6E\\u7684\\uFF0C\\u800C\\u4E0D\\u662F\\u76F8\\u5BF9\\u4E8E\\u6587\\u6863\\u6839\\u5143\\u7D20\\u3002\\u8BE5\\u4E0A\\u4E0B\\u6587\\u4E4B\\u5916\\u7684\\u5C42\\u2014\\u2014\\u5373\\u5C40\\u90E8\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u7684\\u540C\\u7EA7\\u5143\\u7D20\\u2014\\u2014\\u4E0D\\u80FD\\u4F4D\\u4E8E\\u5176\\u5185\\u7684\\u5C42\\u4E4B\\u95F4\\u3002\\u5982\\u679C\\u5143\\u7D20 B \\u4F4D\\u4E8E\\u5143\\u7D20 A \\u7684\\u9876\\u90E8\\uFF0C\\u800C\\u5143\\u7D20 A \\u7684\\u5B50\\u5143\\u7D20 C \\u6C38\\u8FDC\\u4E0D\\u80FD\\u9AD8\\u4E8E\\u5143\\u7D20 B\\uFF0C\\u5373\\u4F7F\\u5143\\u7D20 C \\u7684 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u6BD4\\u5143\\u7D20 B \\u9AD8\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6BCF\\u4E2A\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u90FD\\u662F\\u81EA\\u5305\\u542B\\u7684 - \\u5728\\u5143\\u7D20\\u7684content\\u5806\\u53E0\\u540E\\uFF0C\\u6574\\u4E2A\\u5143\\u7D20\\u88AB\\u8BA4\\u4E3A\\u5728\\u7236\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u7684\\u5806\\u53E0\\u987A\\u5E8F\\u4E2D\\u3002\\u5C11\\u6570 CSS \\u5C5E\\u6027\\u4F1A\\u89E6\\u53D1\\u65B0\\u7684\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"opacity\"}),\" \\u5C0F\\u4E8E 1\\u3001\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"none\"}),\" \\u7684 \",(0,n.jsx)(e.code,{children:\"filter\"}),\" \\u4EE5\\u53CA\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"none\"}),\" \\u7684 \",(0,n.jsx)(e.code,{children:\"transform\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.em,{children:[(0,n.jsx)(e.strong,{children:\"\\u6CE8\\u610F\"}),\"\\uFF1A\\u786E\\u5207\\u5730\\u8BF4\\uFF0C\\u4EC0\\u4E48\\u4F7F\\u4E00\\u4E2A\\u5143\\u7D20\\u80FD\\u591F\\u521B\\u5EFA\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u5217\\u5728\\u8FD9\\u4E2A\\u957F\\u957F\\u7684 \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context\",children:\"\\u89C4\\u5219\"}),\" \\u96C6\\u4E2D\\u3002\"]})})]})}function j(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(h,c)})):h(c)}var u=j;return z(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var x=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),S=(c,e)=>{for(var t in e)o(c,t,{get:e[t],enumerable:!0})},r=(c,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of p(e))!g.call(c,d)&&d!==t&&o(c,d,{get:()=>e[d],enumerable:!(i=m(e,d))||i.enumerable});return c};var z=(c,e,t)=>(t=c!=null?x(_(c)):{},r(e||!c||!c.__esModule?o(t,\"default\",{value:c,enumerable:!0}):t,c)),C=c=>r(o({},\"__esModule\",{value:!0}),c);var h=f((B,l)=>{l.exports=_jsx_runtime});var j={};S(j,{default:()=>a,frontmatter:()=>u});var n=z(h()),u={title:\"\\u63CF\\u8FF0 `z-index` \\u4EE5\\u53CA\\u5982\\u4F55\\u5F62\\u6210\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u3002\"};function s(c){let e={a:\"a\",code:\"code\",em:\"em\",p:\"p\",strong:\"strong\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"CSS \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u5C5E\\u6027\\u63A7\\u5236\\u91CD\\u53E0\\u5143\\u7D20\\u7684\\u5782\\u76F4\\u5806\\u53E0\\u987A\\u5E8F\\u3002\",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u4EC5\\u5F71\\u54CD\\u5DF2\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\uFF08\\u5177\\u6709 \",(0,n.jsx)(e.code,{children:\"position\"}),\" \\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"static\"}),\" \\u7684\\u5143\\u7D20\\uFF09\\u53CA\\u5176\\u540E\\u4EE3\\u6216 flex \\u9879\\u76EE\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6CA1\\u6709\\u4EFB\\u4F55 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u503C\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5143\\u7D20\\u6309\\u7167\\u5B83\\u4EEC\\u5728 DOM \\u4E2D\\u51FA\\u73B0\\u7684\\u987A\\u5E8F\\u5806\\u53E0\\uFF08\\u5728\\u540C\\u4E00\\u5C42\\u7EA7\\u4E2D\\uFF0C\\u6700\\u4E0B\\u9762\\u7684\\u5143\\u7D20\\u51FA\\u73B0\\u5728\\u6700\\u4E0A\\u9762\\uFF09\\u3002\\u5177\\u6709\\u975E\\u9759\\u6001\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\uFF08\\u53CA\\u5176\\u5B50\\u5143\\u7D20\\uFF09\\u5C06\\u59CB\\u7EC8\\u51FA\\u73B0\\u5728\\u5177\\u6709\\u9ED8\\u8BA4\\u9759\\u6001\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\u4E4B\\u4E0A\\uFF0C\\u800C\\u4E0D\\u7BA1 HTML \\u5C42\\u6B21\\u7ED3\\u6784\\u5982\\u4F55\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u662F\\u5305\\u542B\\u4E00\\u7EC4\\u5C42\\u7684\\u5143\\u7D20\\u3002\\u5728\\u5C40\\u90E8\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u4E2D\\uFF0C\\u5176\\u5B50\\u5143\\u7D20\\u7684 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u503C\\u662F\\u76F8\\u5BF9\\u4E8E\\u8BE5\\u5143\\u7D20\\u8BBE\\u7F6E\\u7684\\uFF0C\\u800C\\u4E0D\\u662F\\u76F8\\u5BF9\\u4E8E\\u6587\\u6863\\u6839\\u5143\\u7D20\\u3002\\u8BE5\\u4E0A\\u4E0B\\u6587\\u4E4B\\u5916\\u7684\\u5C42\\u2014\\u2014\\u5373\\u5C40\\u90E8\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u7684\\u540C\\u7EA7\\u5143\\u7D20\\u2014\\u2014\\u4E0D\\u80FD\\u4F4D\\u4E8E\\u5176\\u5185\\u7684\\u5C42\\u4E4B\\u95F4\\u3002\\u5982\\u679C\\u5143\\u7D20 B \\u4F4D\\u4E8E\\u5143\\u7D20 A \\u7684\\u9876\\u90E8\\uFF0C\\u800C\\u5143\\u7D20 A \\u7684\\u5B50\\u5143\\u7D20 C \\u6C38\\u8FDC\\u4E0D\\u80FD\\u9AD8\\u4E8E\\u5143\\u7D20 B\\uFF0C\\u5373\\u4F7F\\u5143\\u7D20 C \\u7684 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u6BD4\\u5143\\u7D20 B \\u9AD8\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6BCF\\u4E2A\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u90FD\\u662F\\u81EA\\u5305\\u542B\\u7684 - \\u5728\\u5143\\u7D20\\u7684content\\u5806\\u53E0\\u540E\\uFF0C\\u6574\\u4E2A\\u5143\\u7D20\\u88AB\\u8BA4\\u4E3A\\u5728\\u7236\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u7684\\u5806\\u53E0\\u987A\\u5E8F\\u4E2D\\u3002\\u5C11\\u6570 CSS \\u5C5E\\u6027\\u4F1A\\u89E6\\u53D1\\u65B0\\u7684\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"opacity\"}),\" \\u5C0F\\u4E8E 1\\u3001\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"none\"}),\" \\u7684 \",(0,n.jsx)(e.code,{children:\"filter\"}),\" \\u4EE5\\u53CA\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"none\"}),\" \\u7684 \",(0,n.jsx)(e.code,{children:\"transform\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.em,{children:[(0,n.jsx)(e.strong,{children:\"\\u6CE8\\u610F\"}),\"\\uFF1A\\u786E\\u5207\\u5730\\u8BF4\\uFF0C\\u4EC0\\u4E48\\u4F7F\\u4E00\\u4E2A\\u5143\\u7D20\\u80FD\\u591F\\u521B\\u5EFA\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u5217\\u5728\\u8FD9\\u4E2A\\u957F\\u957F\\u7684 \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context\",children:\"\\u89C4\\u5219\"}),\" \\u96C6\\u4E2D\\u3002\"]})})]})}function a(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(s,{...c})}):s(c)}return C(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/designing-or-developing-for-multilingual-sites/en-US.json b/apps/web/src/__generated__/questions/quiz/designing-or-developing-for-multilingual-sites/en-US.json
index b191eb91b..898f5e981 100644
--- a/apps/web/src/__generated__/questions/quiz/designing-or-developing-for-multilingual-sites/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/designing-or-developing-for-multilingual-sites/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/designing-or-developing-for-multilingual-sites/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var a in e)o(t,a,{get:e[a],enumerable:!0})},l=(t,e,a,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!p.call(t,i)&&i!==a&&o(t,i,{get:()=>e[i],enumerable:!(r=g(e,i))||r.enumerable});return t};var y=(t,e,a)=>(a=t!=null?d(f(t)):{},l(e||!t||!t.__esModule?o(a,\"default\",{value:t,enumerable:!0}):a,t)),b=t=>l(o({},\"__esModule\",{value:!0}),t);var c=m((E,s)=>{s.exports=_jsx_runtime});var _={};w(_,{default:()=>k,frontmatter:()=>v});var n=y(c()),v={title:\"What kind of things must you be wary of when designing or developing for multilingual sites?\"};function h(t){let e=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Designing and developing for multilingual sites is part of internationalization (i18n).\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Search Engine Optimization\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Use the \",(0,n.jsx)(e.code,{children:\"lang\"}),\" attribute on the \",(0,n.jsx)(e.code,{children:\"<html>\"}),\" tag.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Include the locale in the URL (e.g en_US, zh_CN, etc).\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Webpages should use \",(0,n.jsx)(e.code,{children:'<link rel=\"alternate\" hreflang=\"other_locale\" href=\"url_for_other_locale\">'}),\" to tell search engines that there is another page at the specified \",(0,n.jsx)(e.code,{children:\"href\"}),\" with the same content but for another language/locale.\"]}),`\n`,(0,n.jsxs)(e.li,{children:['Use a fallback page for unmatched languages. Use the \"x-default\" value: ',(0,n.jsx)(e.code,{children:'<link rel=\"alternate\" href=\"url_for_fallback\" hreflang=\"x-default\" />'}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Understanding the difference between locale vs language\"}),`\n`,(0,n.jsx)(e.p,{children:\"Locale settings control how numbers, dates, and times display for your region: which may be a country, or a portion of country or may not even honor country boundaries.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Language can differ between countries\"}),`\n`,(0,n.jsx)(e.p,{children:`Certain languages, especially the widely-spoken languages have different \"flavors\" in different countries (grammar rules, spelling, characters). It's important to differentiate languages for the target country and not assume/force one country's version of a language for all countries which speak the language. Examples:`}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"en\"}),\": \",(0,n.jsx)(e.code,{children:\"en-US\"}),\" (American English), \",(0,n.jsx)(e.code,{children:\"en-GB\"}),\" (British English)\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"zh\"}),\": \",(0,n.jsx)(e.code,{children:\"zh-CN\"}),\" (Chinese (Simplified)), \",(0,n.jsx)(e.code,{children:\"zh-TW\"}),\" (Chinese (Traditional))\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Predict locale but don't restrict\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Servers can determine the locale/language of visitors via a combination of HTTP \",(0,n.jsx)(e.code,{children:\"Accept-Language\"}),\" headers and IPs. With these, servers can automatically select the best locale for the visitor. However, predictions are not foolproof (especially if visitors are using VPNs) and visitors should still be allowed to change their country/language easily without hassle.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Consider differences in the length of text in different languages\"}),`\n`,(0,n.jsx)(e.p,{children:\"Some content can be longer when written in another language. Be wary of layout or overflow issues in the design. It's best to avoid designing where the amount of text would make or break a design. Character counts come into play with things like headlines, labels, and buttons. They are less of an issue with free-flowing text such as body text or comments. For example, some languages, such as German and French, tend to use longer words and sentences than English, which can cause layout issues if you do not take this into account.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Language reading direction\"}),`\n`,(0,n.jsx)(e.p,{children:\"Languages like English and French are written from left-to-right, top-to-bottom. However some languages, such as Hebrew and Arabic, are written from right to left. This can affect the layout of your site and the placement of elements on the page, so you must be careful to design your site in a way that accommodates different text directions.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Do not concatenate translated strings\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Do not do anything like \",(0,n.jsx)(e.code,{children:'\"The date today is \" + date'}),\". It will break in languages with different word order. Use a template string with parameters substitution for each language instead. For example, look at the following two sentences in English and Chinese respectively: \",(0,n.jsx)(e.code,{children:\"I will travel on {% date %}\"}),\" and \",(0,n.jsx)(e.code,{children:\"\\u6211\\u4F1A\\u5728{% date %}\\u51FA\\u53D1\"}),\". Note that the position of the variable is different due to grammar rules of the language.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Formatting dates and currencies\"}),`\n`,(0,n.jsx)(e.p,{children:'Calendar dates are sometimes presented in different ways. Eg. \"May 31, 2012\" in the U.S. vs. \"31 May 2012\" in parts of Europe.'}),`\n`,(0,n.jsx)(e.h2,{children:\"Do not put text in images\"}),`\n`,(0,n.jsx)(e.p,{children:\"Putting text in raster-based images (e.g. png, gif, jpg, etc.), is not a scalable approach. Placing text in an image is still a popular way to get good-looking, non-system fonts to display on any computer. However, to support image text translation other languages, there needs to be a separate image created for each language which is not a scalable workflow for designers.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Be mindful of how colors are perceived\"}),`\n`,(0,n.jsx)(e.p,{children:\"Colors are perceived differently across languages and cultures. The design should use color appropriately.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"References\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://devblogs.microsoft.com/setup/the-differences-between-locales-and-languages\",children:\"The Differences between Locales and Languages\"})}),`\n`]})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var k=x;return b(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var g=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var a in e)o(t,a,{get:e[a],enumerable:!0})},l=(t,e,a,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of f(e))!m.call(t,i)&&i!==a&&o(t,i,{get:()=>e[i],enumerable:!(r=u(e,i))||r.enumerable});return t};var b=(t,e,a)=>(a=t!=null?g(p(t)):{},l(e||!t||!t.__esModule?o(a,\"default\",{value:t,enumerable:!0}):a,t)),v=t=>l(o({},\"__esModule\",{value:!0}),t);var c=w((C,s)=>{s.exports=_jsx_runtime});var k={};y(k,{default:()=>d,frontmatter:()=>x});var n=b(c()),x={title:\"What kind of things must you be wary of when designing or developing for multilingual sites?\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Designing and developing for multilingual sites is part of internationalization (i18n).\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Search Engine Optimization\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Use the \",(0,n.jsx)(e.code,{children:\"lang\"}),\" attribute on the \",(0,n.jsx)(e.code,{children:\"<html>\"}),\" tag.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Include the locale in the URL (e.g en_US, zh_CN, etc).\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Webpages should use \",(0,n.jsx)(e.code,{children:'<link rel=\"alternate\" hreflang=\"other_locale\" href=\"url_for_other_locale\">'}),\" to tell search engines that there is another page at the specified \",(0,n.jsx)(e.code,{children:\"href\"}),\" with the same content but for another language/locale.\"]}),`\n`,(0,n.jsxs)(e.li,{children:['Use a fallback page for unmatched languages. Use the \"x-default\" value: ',(0,n.jsx)(e.code,{children:'<link rel=\"alternate\" href=\"url_for_fallback\" hreflang=\"x-default\" />'}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Understanding the difference between locale vs language\"}),`\n`,(0,n.jsx)(e.p,{children:\"Locale settings control how numbers, dates, and times display for your region: which may be a country, or a portion of country or may not even honor country boundaries.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Language can differ between countries\"}),`\n`,(0,n.jsx)(e.p,{children:`Certain languages, especially the widely-spoken languages have different \"flavors\" in different countries (grammar rules, spelling, characters). It's important to differentiate languages for the target country and not assume/force one country's version of a language for all countries which speak the language. Examples:`}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"en\"}),\": \",(0,n.jsx)(e.code,{children:\"en-US\"}),\" (American English), \",(0,n.jsx)(e.code,{children:\"en-GB\"}),\" (British English)\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"zh\"}),\": \",(0,n.jsx)(e.code,{children:\"zh-CN\"}),\" (Chinese (Simplified)), \",(0,n.jsx)(e.code,{children:\"zh-TW\"}),\" (Chinese (Traditional))\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Predict locale but don't restrict\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Servers can determine the locale/language of visitors via a combination of HTTP \",(0,n.jsx)(e.code,{children:\"Accept-Language\"}),\" headers and IPs. With these, servers can automatically select the best locale for the visitor. However, predictions are not foolproof (especially if visitors are using VPNs) and visitors should still be allowed to change their country/language easily without hassle.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Consider differences in the length of text in different languages\"}),`\n`,(0,n.jsx)(e.p,{children:\"Some content can be longer when written in another language. Be wary of layout or overflow issues in the design. It's best to avoid designing where the amount of text would make or break a design. Character counts come into play with things like headlines, labels, and buttons. They are less of an issue with free-flowing text such as body text or comments. For example, some languages, such as German and French, tend to use longer words and sentences than English, which can cause layout issues if you do not take this into account.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Language reading direction\"}),`\n`,(0,n.jsx)(e.p,{children:\"Languages like English and French are written from left-to-right, top-to-bottom. However some languages, such as Hebrew and Arabic, are written from right to left. This can affect the layout of your site and the placement of elements on the page, so you must be careful to design your site in a way that accommodates different text directions.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Do not concatenate translated strings\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Do not do anything like \",(0,n.jsx)(e.code,{children:'\"The date today is \" + date'}),\". It will break in languages with different word order. Use a template string with parameters substitution for each language instead. For example, look at the following two sentences in English and Chinese respectively: \",(0,n.jsx)(e.code,{children:\"I will travel on {% date %}\"}),\" and \",(0,n.jsx)(e.code,{children:\"\\u6211\\u4F1A\\u5728{% date %}\\u51FA\\u53D1\"}),\". Note that the position of the variable is different due to grammar rules of the language.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Formatting dates and currencies\"}),`\n`,(0,n.jsx)(e.p,{children:'Calendar dates are sometimes presented in different ways. Eg. \"May 31, 2012\" in the U.S. vs. \"31 May 2012\" in parts of Europe.'}),`\n`,(0,n.jsx)(e.h2,{children:\"Do not put text in images\"}),`\n`,(0,n.jsx)(e.p,{children:\"Putting text in raster-based images (e.g. png, gif, jpg, etc.), is not a scalable approach. Placing text in an image is still a popular way to get good-looking, non-system fonts to display on any computer. However, to support image text translation other languages, there needs to be a separate image created for each language which is not a scalable workflow for designers.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Be mindful of how colors are perceived\"}),`\n`,(0,n.jsx)(e.p,{children:\"Colors are perceived differently across languages and cultures. The design should use color appropriately.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"References\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://devblogs.microsoft.com/setup/the-differences-between-locales-and-languages\",children:\"The Differences between Locales and Languages\"})}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return v(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/designing-or-developing-for-multilingual-sites/pt-BR.json b/apps/web/src/__generated__/questions/quiz/designing-or-developing-for-multilingual-sites/pt-BR.json
index 0b434b1cf..882146607 100644
--- a/apps/web/src/__generated__/questions/quiz/designing-or-developing-for-multilingual-sites/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/designing-or-developing-for-multilingual-sites/pt-BR.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/designing-or-developing-for-multilingual-sites/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),v=(o,e)=>{for(var s in e)i(o,s,{get:e[s],enumerable:!0})},d=(o,e,s,n)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!g.call(o,r)&&r!==s&&i(o,r,{get:()=>e[r],enumerable:!(n=p(e,r))||n.enumerable});return o};var b=(o,e,s)=>(s=o!=null?m(h(o)):{},d(e||!o||!o.__esModule?i(s,\"default\",{value:o,enumerable:!0}):s,o)),x=o=>d(i({},\"__esModule\",{value:!0}),o);var c=f((A,t)=>{t.exports=_jsx_runtime});var _={};v(_,{default:()=>z,frontmatter:()=>q});var a=b(c()),q={title:\"Que tipo de coisas voc\\xEA deve estar atento ao projetar ou desenvolver para sites multil\\xEDngues?\"};function l(o){let e=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",a:\"a\"},o.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.p,{children:\"Projetar e desenvolver para sites multil\\xEDngues faz parte da internacionaliza\\xE7\\xE3o (i18n).\"}),`\n`,(0,a.jsx)(e.h2,{children:\"Otimiza\\xE7\\xE3o de Busca (Seo)\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsxs)(e.li,{children:[\"Use o atributo \",(0,a.jsx)(e.code,{children:\"lang\"}),\" na tag \",(0,a.jsx)(e.code,{children:\"<html>\"}),\".\"]}),`\n`,(0,a.jsx)(e.li,{children:\"Incluir a localidade na URL (por exemplo, en_US, zh_CN, etc).\"}),`\n`,(0,a.jsxs)(e.li,{children:[\"P\\xE1ginas web devem usar \",(0,a.jsx)(e.code,{children:'<link rel=\"alternate\" hreflang=\"other_locale\" href=\"url_for_other_locale\">'}),\" para dizer aos motores de pesquisa que h\\xE1 outra p\\xE1gina no \",(0,a.jsx)(e.code,{children:\"href\"}),\" especificado com o mesmo conte\\xFAdo, mas para outro idioma/locale.\"]}),`\n`]}),`\n`,(0,a.jsx)(e.h2,{children:\"Entendendo a diferen\\xE7a entre localidade e idioma\"}),`\n`,(0,a.jsx)(e.p,{children:\"As configura\\xE7\\xF5es regionais controlam como n\\xFAmeros, datas e hor\\xE1rios s\\xE3o exibidos para sua regi\\xE3o: que pode ser um pa\\xEDs, ou uma por\\xE7\\xE3o de pa\\xEDs, ou talvez nem mesmo respeite as fronteiras do pa\\xEDs.\"}),`\n`,(0,a.jsx)(e.h2,{children:\"O idioma pode diferir entre pa\\xEDses\"}),`\n`,(0,a.jsx)(e.p,{children:'Certos idiomas, especialmente os mais falados, t\\xEAm diferentes \"sabores\" em diferentes pa\\xEDses (regras de gram\\xE1tica, ortografia, caracteres). \\xC9 importante diferenciar idiomas para o pa\\xEDs de destino e n\\xE3o assumir/for\\xE7ar a vers\\xE3o de um pa\\xEDs de um idioma para todos os pa\\xEDses que falam o idioma. Exemplos:'}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.code,{children:\"en\"}),\": \",(0,a.jsx)(e.code,{children:\"en-US\"}),\" (Ingl\\xEAs Americano), \",(0,a.jsx)(e.code,{children:\"en-GB\"}),\" (Ingl\\xEAs Brit\\xE2nico)\"]}),`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.code,{children:\"zh\"}),\": \",(0,a.jsx)(e.code,{children:\"zh-CN\"}),\" (Chin\\xEAs (Simplificado)), \",(0,a.jsx)(e.code,{children:\"zh-TW\"}),\" (Chin\\xEAs (Tradicional))\"]}),`\n`]}),`\n`,(0,a.jsx)(e.h2,{children:\"Prever localidade, mas sem restri\\xE7\\xF5es\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"Os servidores podem determinar a localidade/idioma dos visitantes por meio de uma combina\\xE7\\xE3o de cabe\\xE7alhos HTTP \",(0,a.jsx)(e.code,{children:\"Accept-Language\"}),\" e endere\\xE7os IP. Com esses, os visitantes podem selecionar automaticamente a melhor configura\\xE7\\xE3o regional para o visitante. No entanto, as previs\\xF5es n\\xE3o s\\xE3o infal\\xEDveis (especialmente se os visitantes estiverem usando VPNs) e os visitantes ainda devem ser capazes de mudar seu pa\\xEDs/idioma facilmente, sem complica\\xE7\\xF5es.\"]}),`\n`,(0,a.jsx)(e.h2,{children:\"Considere as diferen\\xE7as no comprimento do texto em diferentes idiomas\"}),`\n`,(0,a.jsx)(e.p,{children:\"Algum conte\\xFAdo pode ser mais longo quando escrito em outro idioma. Esteja atento a problemas de layout ou de overflow no design. \\xC9 melhor evitar projetar onde a quantidade de texto pode fazer ou quebrar um design. A contagem de caracteres entra em jogo com coisas como manchetes, r\\xF3tulos e bot\\xF5es. Eles s\\xE3o menos importantes com texto livre, como texto do corpo ou coment\\xE1rios. Por exemplo, alguns idiomas, como alem\\xE3o e franc\\xEAs, tendem a usar palavras e frases mais longas do que o ingl\\xEAs, o que pode causar problemas de layout se voc\\xEA n\\xE3o levar isso em conta.\"}),`\n`,(0,a.jsx)(e.h2,{children:\"Dire\\xE7\\xE3o de leitura do idioma\"}),`\n`,(0,a.jsx)(e.p,{children:\"Idiomas como ingl\\xEAs e franc\\xEAs s\\xE3o escritos da esquerda para a direita, de cima para baixo. No entanto, alguns idiomas, como hebraico e \\xE1rabe, s\\xE3o escritos da direita para a esquerda. Isso pode afetar o layout do seu site e a coloca\\xE7\\xE3o de elementos na p\\xE1gina, ent\\xE3o voc\\xEA deve ter cuidado ao projetar seu site de uma maneira que acomode diferentes dire\\xE7\\xF5es de texto.\"}),`\n`,(0,a.jsx)(e.h2,{children:\"N\\xE3o concatene strings traduzidas\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"N\\xE3o fa\\xE7a nada como \",(0,a.jsx)(e.code,{children:'\"A data de hoje \\xE9 \" + data'}),\". Isso pode causar problemas em idiomas com ordens de palavras diferentes. Use uma string de modelo com substitui\\xE7\\xE3o de par\\xE2metros para cada idioma em vez disso. Por exemplo, observe as duas frases a seguir em ingl\\xEAs e chin\\xEAs, respectivamente: \",(0,a.jsx)(e.code,{children:\"I will travel on {% date %}\"}),\" e \",(0,a.jsx)(e.code,{children:\"{% date %} \\u6211\\u4F1A\\u51FA\\u53D1\"}),\". Observe que a posi\\xE7\\xE3o da vari\\xE1vel \\xE9 diferente devido \\xE0s regras gramaticais do idioma.\"]}),`\n`,(0,a.jsx)(e.h2,{children:\"Formata\\xE7\\xE3o de datas e moedas\"}),`\n`,(0,a.jsx)(e.p,{children:'As datas do calend\\xE1rio s\\xE3o apresentadas de formas diferentes \\xE0s vezes. Ex. \"May 31, 2012\" nos EUA. vs. \"31 May 2012\" em partes da Europa.'}),`\n`,(0,a.jsx)(e.h2,{children:\"N\\xE3o coloque texto em imagens\"}),`\n`,(0,a.jsx)(e.p,{children:\"Colocar texto em imagens baseadas em raster (por exemplo, png, gif, jpg, etc.) n\\xE3o \\xE9 uma abordagem escal\\xE1vel. Colocar texto em uma imagem ainda \\xE9 uma maneira popular de exibir fontes n\\xE3o padronizadas com boa apar\\xEAncia em qualquer computador. No entanto, para dar suporte \\xE0 tradu\\xE7\\xE3o de texto de imagem em outros idiomas, \\xE9 necess\\xE1rio criar uma imagem separada para cada idioma, o que n\\xE3o \\xE9 um fluxo de trabalho escalon\\xE1vel para os designers.\"}),`\n`,(0,a.jsx)(e.h2,{children:\"Esteja ciente de como as cores s\\xE3o percebidas\"}),`\n`,(0,a.jsx)(e.p,{children:\"As cores s\\xE3o percebidas de maneira diferente em diferentes idiomas e culturas. O design deve usar as cores de forma apropriada.\"}),`\n`,(0,a.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:(0,a.jsx)(e.a,{href:\"https://devblogs.microsoft.com/setup/the-differences-between-locales-and-languages\",children:\"As diferen\\xE7as entre localidades e idiomas\"})}),`\n`]})]})}function j(o={}){let{wrapper:e}=o.components||{};return e?(0,a.jsx)(e,Object.assign({},o,{children:(0,a.jsx)(l,o)})):l(o)}var z=j;return x(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var r in e)i(o,r,{get:e[r],enumerable:!0})},d=(o,e,r,n)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of h(e))!g.call(o,s)&&s!==r&&i(o,s,{get:()=>e[s],enumerable:!(n=u(e,s))||n.enumerable});return o};var b=(o,e,r)=>(r=o!=null?p(f(o)):{},d(e||!o||!o.__esModule?i(r,\"default\",{value:o,enumerable:!0}):r,o)),q=o=>d(i({},\"__esModule\",{value:!0}),o);var c=v((C,t)=>{t.exports=_jsx_runtime});var j={};x(j,{default:()=>m,frontmatter:()=>z});var a=b(c()),z={title:\"Que tipo de coisas voc\\xEA deve estar atento ao projetar ou desenvolver para sites multil\\xEDngues?\"};function l(o){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",ul:\"ul\",...o.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.p,{children:\"Projetar e desenvolver para sites multil\\xEDngues faz parte da internacionaliza\\xE7\\xE3o (i18n).\"}),`\n`,(0,a.jsx)(e.h2,{children:\"Otimiza\\xE7\\xE3o de Busca (Seo)\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsxs)(e.li,{children:[\"Use o atributo \",(0,a.jsx)(e.code,{children:\"lang\"}),\" na tag \",(0,a.jsx)(e.code,{children:\"<html>\"}),\".\"]}),`\n`,(0,a.jsx)(e.li,{children:\"Incluir a localidade na URL (por exemplo, en_US, zh_CN, etc).\"}),`\n`,(0,a.jsxs)(e.li,{children:[\"P\\xE1ginas web devem usar \",(0,a.jsx)(e.code,{children:'<link rel=\"alternate\" hreflang=\"other_locale\" href=\"url_for_other_locale\">'}),\" para dizer aos motores de pesquisa que h\\xE1 outra p\\xE1gina no \",(0,a.jsx)(e.code,{children:\"href\"}),\" especificado com o mesmo conte\\xFAdo, mas para outro idioma/locale.\"]}),`\n`]}),`\n`,(0,a.jsx)(e.h2,{children:\"Entendendo a diferen\\xE7a entre localidade e idioma\"}),`\n`,(0,a.jsx)(e.p,{children:\"As configura\\xE7\\xF5es regionais controlam como n\\xFAmeros, datas e hor\\xE1rios s\\xE3o exibidos para sua regi\\xE3o: que pode ser um pa\\xEDs, ou uma por\\xE7\\xE3o de pa\\xEDs, ou talvez nem mesmo respeite as fronteiras do pa\\xEDs.\"}),`\n`,(0,a.jsx)(e.h2,{children:\"O idioma pode diferir entre pa\\xEDses\"}),`\n`,(0,a.jsx)(e.p,{children:'Certos idiomas, especialmente os mais falados, t\\xEAm diferentes \"sabores\" em diferentes pa\\xEDses (regras de gram\\xE1tica, ortografia, caracteres). \\xC9 importante diferenciar idiomas para o pa\\xEDs de destino e n\\xE3o assumir/for\\xE7ar a vers\\xE3o de um pa\\xEDs de um idioma para todos os pa\\xEDses que falam o idioma. Exemplos:'}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.code,{children:\"en\"}),\": \",(0,a.jsx)(e.code,{children:\"en-US\"}),\" (Ingl\\xEAs Americano), \",(0,a.jsx)(e.code,{children:\"en-GB\"}),\" (Ingl\\xEAs Brit\\xE2nico)\"]}),`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.code,{children:\"zh\"}),\": \",(0,a.jsx)(e.code,{children:\"zh-CN\"}),\" (Chin\\xEAs (Simplificado)), \",(0,a.jsx)(e.code,{children:\"zh-TW\"}),\" (Chin\\xEAs (Tradicional))\"]}),`\n`]}),`\n`,(0,a.jsx)(e.h2,{children:\"Prever localidade, mas sem restri\\xE7\\xF5es\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"Os servidores podem determinar a localidade/idioma dos visitantes por meio de uma combina\\xE7\\xE3o de cabe\\xE7alhos HTTP \",(0,a.jsx)(e.code,{children:\"Accept-Language\"}),\" e endere\\xE7os IP. Com esses, os visitantes podem selecionar automaticamente a melhor configura\\xE7\\xE3o regional para o visitante. No entanto, as previs\\xF5es n\\xE3o s\\xE3o infal\\xEDveis (especialmente se os visitantes estiverem usando VPNs) e os visitantes ainda devem ser capazes de mudar seu pa\\xEDs/idioma facilmente, sem complica\\xE7\\xF5es.\"]}),`\n`,(0,a.jsx)(e.h2,{children:\"Considere as diferen\\xE7as no comprimento do texto em diferentes idiomas\"}),`\n`,(0,a.jsx)(e.p,{children:\"Algum conte\\xFAdo pode ser mais longo quando escrito em outro idioma. Esteja atento a problemas de layout ou de overflow no design. \\xC9 melhor evitar projetar onde a quantidade de texto pode fazer ou quebrar um design. A contagem de caracteres entra em jogo com coisas como manchetes, r\\xF3tulos e bot\\xF5es. Eles s\\xE3o menos importantes com texto livre, como texto do corpo ou coment\\xE1rios. Por exemplo, alguns idiomas, como alem\\xE3o e franc\\xEAs, tendem a usar palavras e frases mais longas do que o ingl\\xEAs, o que pode causar problemas de layout se voc\\xEA n\\xE3o levar isso em conta.\"}),`\n`,(0,a.jsx)(e.h2,{children:\"Dire\\xE7\\xE3o de leitura do idioma\"}),`\n`,(0,a.jsx)(e.p,{children:\"Idiomas como ingl\\xEAs e franc\\xEAs s\\xE3o escritos da esquerda para a direita, de cima para baixo. No entanto, alguns idiomas, como hebraico e \\xE1rabe, s\\xE3o escritos da direita para a esquerda. Isso pode afetar o layout do seu site e a coloca\\xE7\\xE3o de elementos na p\\xE1gina, ent\\xE3o voc\\xEA deve ter cuidado ao projetar seu site de uma maneira que acomode diferentes dire\\xE7\\xF5es de texto.\"}),`\n`,(0,a.jsx)(e.h2,{children:\"N\\xE3o concatene strings traduzidas\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"N\\xE3o fa\\xE7a nada como \",(0,a.jsx)(e.code,{children:'\"A data de hoje \\xE9 \" + data'}),\". Isso pode causar problemas em idiomas com ordens de palavras diferentes. Use uma string de modelo com substitui\\xE7\\xE3o de par\\xE2metros para cada idioma em vez disso. Por exemplo, observe as duas frases a seguir em ingl\\xEAs e chin\\xEAs, respectivamente: \",(0,a.jsx)(e.code,{children:\"I will travel on {% date %}\"}),\" e \",(0,a.jsx)(e.code,{children:\"{% date %} \\u6211\\u4F1A\\u51FA\\u53D1\"}),\". Observe que a posi\\xE7\\xE3o da vari\\xE1vel \\xE9 diferente devido \\xE0s regras gramaticais do idioma.\"]}),`\n`,(0,a.jsx)(e.h2,{children:\"Formata\\xE7\\xE3o de datas e moedas\"}),`\n`,(0,a.jsx)(e.p,{children:'As datas do calend\\xE1rio s\\xE3o apresentadas de formas diferentes \\xE0s vezes. Ex. \"May 31, 2012\" nos EUA. vs. \"31 May 2012\" em partes da Europa.'}),`\n`,(0,a.jsx)(e.h2,{children:\"N\\xE3o coloque texto em imagens\"}),`\n`,(0,a.jsx)(e.p,{children:\"Colocar texto em imagens baseadas em raster (por exemplo, png, gif, jpg, etc.) n\\xE3o \\xE9 uma abordagem escal\\xE1vel. Colocar texto em uma imagem ainda \\xE9 uma maneira popular de exibir fontes n\\xE3o padronizadas com boa apar\\xEAncia em qualquer computador. No entanto, para dar suporte \\xE0 tradu\\xE7\\xE3o de texto de imagem em outros idiomas, \\xE9 necess\\xE1rio criar uma imagem separada para cada idioma, o que n\\xE3o \\xE9 um fluxo de trabalho escalon\\xE1vel para os designers.\"}),`\n`,(0,a.jsx)(e.h2,{children:\"Esteja ciente de como as cores s\\xE3o percebidas\"}),`\n`,(0,a.jsx)(e.p,{children:\"As cores s\\xE3o percebidas de maneira diferente em diferentes idiomas e culturas. O design deve usar as cores de forma apropriada.\"}),`\n`,(0,a.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:(0,a.jsx)(e.a,{href:\"https://devblogs.microsoft.com/setup/the-differences-between-locales-and-languages\",children:\"As diferen\\xE7as entre localidades e idiomas\"})}),`\n`]})]})}function m(o={}){let{wrapper:e}=o.components||{};return e?(0,a.jsx)(e,{...o,children:(0,a.jsx)(l,{...o})}):l(o)}return q(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/designing-or-developing-for-multilingual-sites/zh-CN.json b/apps/web/src/__generated__/questions/quiz/designing-or-developing-for-multilingual-sites/zh-CN.json
index 2b08731c0..016a07656 100644
--- a/apps/web/src/__generated__/questions/quiz/designing-or-developing-for-multilingual-sites/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/designing-or-developing-for-multilingual-sites/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/designing-or-developing-for-multilingual-sites/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var h=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var _=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),m=(l,e)=>{for(var c in e)h(l,c,{get:e[c],enumerable:!0})},i=(l,e,c,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!g.call(l,r)&&r!==c&&h(l,r,{get:()=>e[r],enumerable:!(d=f(e,r))||d.enumerable});return l};var x=(l,e,c)=>(c=l!=null?s(u(l)):{},i(e||!l||!l.__esModule?h(c,\"default\",{value:l,enumerable:!0}):c,l)),j=l=>i(h({},\"__esModule\",{value:!0}),l);var o=_((L,t)=>{t.exports=_jsx_runtime});var k={};m(k,{default:()=>C,frontmatter:()=>b});var n=x(o()),b={title:\"\\u8BBE\\u8BA1\\u6216\\u5F00\\u53D1\\u591A\\u8BED\\u8A00\\u7F51\\u7AD9\\u65F6\\uFF0C\\u60A8\\u5FC5\\u987B\\u6CE8\\u610F\\u54EA\\u4E9B\\u4E8B\\u9879\\uFF1F\"};function a(l){let e=Object.assign({p:\"p\",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:\"\\u8BBE\\u8BA1\\u548C\\u5F00\\u53D1\\u591A\\u8BED\\u8A00\\u7F51\\u7AD9\\u662F\\u56FD\\u9645\\u5316 (i18n) \\u7684\\u4E00\\u90E8\\u5206\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u641C\\u7D22\\u5F15\\u64CE\\u4F18\\u5316\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5728 \",(0,n.jsx)(e.code,{children:\"<html>\"}),\" \\u6807\\u7B7E\\u4E0A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"lang\"}),\" \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5728 URL \\u4E2D\\u5305\\u542B\\u8BED\\u8A00\\u533A\\u57DF\\u8BBE\\u7F6E\\uFF08\\u4F8B\\u5982 en_US\\u3001zh_CN \\u7B49\\uFF09\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u7F51\\u9875\\u5E94\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:'<link rel=\"alternate\" hreflang=\"other_locale\" href=\"url_for_other_locale\">'}),\" \\u544A\\u8BC9\\u641C\\u7D22\\u5F15\\u64CE\\u5728\\u6307\\u5B9A\\u7684 \",(0,n.jsx)(e.code,{children:\"href\"}),\" \\u5904\\u6709\\u53E6\\u4E00\\u4E2A\\u9875\\u9762\\uFF0C\\u5176\\u5185\\u5BB9\\u76F8\\u540C\\uFF0C\\u4F46\\u9488\\u5BF9\\u53E6\\u4E00\\u79CD\\u8BED\\u8A00/\\u8BED\\u8A00\\u533A\\u57DF\\u8BBE\\u7F6E\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4E3A\\u4E0D\\u5339\\u914D\\u7684\\u8BED\\u8A00\\u4F7F\\u7528\\u540E\\u5907\\u9875\\u9762\\u3002\\u4F7F\\u7528\\u201Cx-default\\u201D\\u503C\\uFF1A\",(0,n.jsx)(e.code,{children:'<link rel=\"alternate\" href=\"url_for_fallback\" hreflang=\"x-default\" />'}),\"\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4E86\\u89E3\\u8BED\\u8A00\\u533A\\u57DF\\u8BBE\\u7F6E\\u4E0E\\u8BED\\u8A00\\u7684\\u533A\\u522B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8BED\\u8A00\\u533A\\u57DF\\u8BBE\\u7F6E\\u63A7\\u5236\\u6570\\u5B57\\u3001\\u65E5\\u671F\\u548C\\u65F6\\u95F4\\u7684\\u663E\\u793A\\u65B9\\u5F0F\\uFF0C\\u9002\\u7528\\u4E8E\\u60A8\\u7684\\u5730\\u533A\\uFF1A\\u8FD9\\u53EF\\u80FD\\u662F\\u4E00\\u4E2A\\u56FD\\u5BB6/\\u5730\\u533A\\uFF0C\\u6216\\u4E00\\u4E2A\\u56FD\\u5BB6/\\u5730\\u533A\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u751A\\u81F3\\u53EF\\u80FD\\u4E0D\\u9075\\u5B88\\u56FD\\u5BB6/\\u5730\\u533A\\u7684\\u8FB9\\u754C\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u8BED\\u8A00\\u53EF\\u80FD\\u56E0\\u56FD\\u5BB6/\\u5730\\u533A\\u800C\\u5F02\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u67D0\\u4E9B\\u8BED\\u8A00\\uFF0C\\u5C24\\u5176\\u662F\\u4F7F\\u7528\\u5E7F\\u6CDB\\u7684\\u8BED\\u8A00\\uFF0C\\u5728\\u4E0D\\u540C\\u7684\\u56FD\\u5BB6/\\u5730\\u533A\\u6709\\u4E0D\\u540C\\u7684\\u201C\\u98CE\\u683C\\u201D\\uFF08\\u8BED\\u6CD5\\u89C4\\u5219\\u3001\\u62FC\\u5199\\u3001\\u5B57\\u7B26\\uFF09\\u3002\\u533A\\u5206\\u76EE\\u6807\\u56FD\\u5BB6/\\u5730\\u533A\\u7684\\u8BED\\u8A00\\u975E\\u5E38\\u91CD\\u8981\\uFF0C\\u4E0D\\u8981\\u5047\\u8BBE/\\u5F3A\\u5236\\u6240\\u6709\\u4F7F\\u7528\\u8BE5\\u8BED\\u8A00\\u7684\\u56FD\\u5BB6/\\u5730\\u533A\\u90FD\\u4F7F\\u7528\\u8BE5\\u8BED\\u8A00\\u7684\\u4E00\\u4E2A\\u56FD\\u5BB6/\\u5730\\u533A\\u7684\\u7248\\u672C\\u3002\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"en\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"en-US\"}),\"\\uFF08\\u7F8E\\u5F0F\\u82F1\\u8BED\\uFF09\\u3001\",(0,n.jsx)(e.code,{children:\"en-GB\"}),\"\\uFF08\\u82F1\\u5F0F\\u82F1\\u8BED\\uFF09\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"zh\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"zh-CN\"}),\"\\uFF08\\u7B80\\u4F53\\u4E2D\\u6587\\uFF09\\u3001\",(0,n.jsx)(e.code,{children:\"zh-TW\"}),\"\\uFF08\\u7E41\\u4F53\\u4E2D\\u6587\\uFF09\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u9884\\u6D4B\\u8BED\\u8A00\\u533A\\u57DF\\u8BBE\\u7F6E\\uFF0C\\u4F46\\u4E0D\\u8981\\u9650\\u5236\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u670D\\u52A1\\u5668\\u53EF\\u4EE5\\u901A\\u8FC7 HTTP \",(0,n.jsx)(e.code,{children:\"Accept-Language\"}),\" \\u6807\\u5934\\u548C IP \\u5730\\u5740\\u7684\\u7EC4\\u5408\\u6765\\u786E\\u5B9A\\u8BBF\\u95EE\\u8005\\u7684\\u8BED\\u8A00\\u533A\\u57DF\\u8BBE\\u7F6E/\\u8BED\\u8A00\\u3002\\u6709\\u4E86\\u8FD9\\u4E9B\\uFF0C\\u670D\\u52A1\\u5668\\u53EF\\u4EE5\\u81EA\\u52A8\\u4E3A\\u8BBF\\u95EE\\u8005\\u9009\\u62E9\\u6700\\u4F73\\u8BED\\u8A00\\u533A\\u57DF\\u8BBE\\u7F6E\\u3002\\u4F46\\u662F\\uFF0C\\u9884\\u6D4B\\u5E76\\u975E\\u4E07\\u65E0\\u4E00\\u5931\\uFF08\\u5C24\\u5176\\u662F\\u5F53\\u8BBF\\u95EE\\u8005\\u4F7F\\u7528 VPN \\u65F6\\uFF09\\uFF0C\\u5E76\\u4E14\\u5E94\\u5141\\u8BB8\\u8BBF\\u95EE\\u8005\\u8F7B\\u677E\\u66F4\\u6539\\u5176\\u56FD\\u5BB6/\\u5730\\u533A/\\u8BED\\u8A00\\uFF0C\\u800C\\u4E0D\\u4F1A\\u9047\\u5230\\u9EBB\\u70E6\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u8003\\u8651\\u4E0D\\u540C\\u8BED\\u8A00\\u7684\\u6587\\u672C\\u957F\\u5EA6\\u5DEE\\u5F02\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u7528\\u53E6\\u4E00\\u79CD\\u8BED\\u8A00\\u4E66\\u5199\\u65F6\\uFF0C\\u67D0\\u4E9B\\u5185\\u5BB9\\u53EF\\u80FD\\u4F1A\\u66F4\\u957F\\u3002\\u5728\\u8BBE\\u8BA1\\u4E2D\\u8981\\u6CE8\\u610F\\u5E03\\u5C40\\u6216\\u6EA2\\u51FA\\u95EE\\u9898\\u3002\\u6700\\u597D\\u907F\\u514D\\u8BBE\\u8BA1\\u6587\\u672C\\u91CF\\u4F1A\\u7834\\u574F\\u8BBE\\u8BA1\\u7684\\u573A\\u666F\\u3002\\u5B57\\u7B26\\u8BA1\\u6570\\u4F1A\\u5F71\\u54CD\\u6807\\u9898\\u3001\\u6807\\u7B7E\\u548C\\u6309\\u94AE\\u7B49\\u5185\\u5BB9\\u3002\\u5BF9\\u4E8E\\u81EA\\u7531\\u6D41\\u52A8\\u7684\\u6587\\u672C\\uFF08\\u5982\\u6B63\\u6587\\u6216\\u8BC4\\u8BBA\\uFF09\\uFF0C\\u5B83\\u4EEC\\u7684\\u5F71\\u54CD\\u8F83\\u5C0F\\u3002\\u4F8B\\u5982\\uFF0C\\u67D0\\u4E9B\\u8BED\\u8A00\\uFF08\\u5982\\u5FB7\\u8BED\\u548C\\u6CD5\\u8BED\\uFF09\\u5F80\\u5F80\\u6BD4\\u82F1\\u8BED\\u4F7F\\u7528\\u66F4\\u957F\\u7684\\u5355\\u8BCD\\u548C\\u53E5\\u5B50\\uFF0C\\u5982\\u679C\\u4E0D\\u8003\\u8651\\u8FD9\\u4E00\\u70B9\\uFF0C\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u5E03\\u5C40\\u95EE\\u9898\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u8BED\\u8A00\\u9605\\u8BFB\\u65B9\\u5411\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u82F1\\u8BED\\u548C\\u6CD5\\u8BED\\u7B49\\u8BED\\u8A00\\u662F\\u4ECE\\u5DE6\\u5230\\u53F3\\u3001\\u4ECE\\u4E0A\\u5230\\u4E0B\\u4E66\\u5199\\u7684\\u3002\\u4F46\\u662F\\uFF0C\\u5E0C\\u4F2F\\u6765\\u8BED\\u548C\\u963F\\u62C9\\u4F2F\\u8BED\\u7B49\\u67D0\\u4E9B\\u8BED\\u8A00\\u662F\\u4ECE\\u53F3\\u5230\\u5DE6\\u4E66\\u5199\\u7684\\u3002\\u8FD9\\u4F1A\\u5F71\\u54CD\\u60A8\\u7F51\\u7AD9\\u7684\\u5E03\\u5C40\\u548C\\u9875\\u9762\\u4E0A\\u5143\\u7D20\\u7684\\u4F4D\\u7F6E\\uFF0C\\u56E0\\u6B64\\u60A8\\u5FC5\\u987B\\u5C0F\\u5FC3\\u8BBE\\u8BA1\\u60A8\\u7684\\u7F51\\u7AD9\\uFF0C\\u4EE5\\u9002\\u5E94\\u4E0D\\u540C\\u7684\\u6587\\u672C\\u65B9\\u5411\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4E0D\\u8981\\u8FDE\\u63A5\\u7FFB\\u8BD1\\u540E\\u7684\\u5B57\\u7B26\\u4E32\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E0D\\u8981\\u505A\\u7C7B\\u4F3C \",(0,n.jsx)(e.code,{children:'\"\\u4ECA\\u5929\\u7684\\u65E5\\u671F\\u662F \" + date'}),\" \\u7684\\u4E8B\\u60C5\\u3002\\u5B83\\u4F1A\\u5728\\u5355\\u8BCD\\u987A\\u5E8F\\u4E0D\\u540C\\u7684\\u8BED\\u8A00\\u4E2D\\u4E2D\\u65AD\\u3002\\u6539\\u4E3A\\u5BF9\\u6BCF\\u79CD\\u8BED\\u8A00\\u4F7F\\u7528\\u5E26\\u6709\\u53C2\\u6570\\u66FF\\u6362\\u7684\\u6A21\\u677F\\u5B57\\u7B26\\u4E32\\u3002\\u4F8B\\u5982\\uFF0C\\u5206\\u522B\\u67E5\\u770B\\u82F1\\u8BED\\u548C\\u4E2D\\u6587\\u7684\\u4EE5\\u4E0B\\u4E24\\u53E5\\u8BDD\\uFF1A\",(0,n.jsx)(e.code,{children:\"I will travel on {% date %}\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"\\u6211\\u4F1A\\u5728{% date %}\\u51FA\\u53D1\"}),\"\\u3002\\u8BF7\\u6CE8\\u610F\\uFF0C\\u7531\\u4E8E\\u8BE5\\u8BED\\u8A00\\u7684\\u8BED\\u6CD5\\u89C4\\u5219\\uFF0C\\u53D8\\u91CF\\u7684\\u4F4D\\u7F6E\\u4E0D\\u540C\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u683C\\u5F0F\\u5316\\u65E5\\u671F\\u548C\\u8D27\\u5E01\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u65E5\\u5386\\u65E5\\u671F\\u6709\\u65F6\\u4EE5\\u4E0D\\u540C\\u7684\\u65B9\\u5F0F\\u5448\\u73B0\\u3002\\u4F8B\\u5982\\uFF0C\\u7F8E\\u56FD\\u4E3A\\u201C2012 \\u5E74 5 \\u6708 31 \\u65E5\\u201D\\uFF0C\\u800C\\u6B27\\u6D32\\u90E8\\u5206\\u5730\\u533A\\u4E3A\\u201C2012 \\u5E74 5 \\u6708 31 \\u65E5\\u201D\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4E0D\\u8981\\u5C06\\u6587\\u672C\\u653E\\u5728\\u56FE\\u7247\\u4E2D\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5C06\\u6587\\u672C\\u653E\\u5728\\u57FA\\u4E8E\\u6805\\u683C\\u7684\\u56FE\\u50CF\\uFF08\\u4F8B\\u5982 png\\u3001gif\\u3001jpg \\u7B49\\uFF09\\u4E2D\\u4E0D\\u662F\\u4E00\\u79CD\\u53EF\\u6269\\u5C55\\u7684\\u65B9\\u6CD5\\u3002\\u5C06\\u6587\\u672C\\u653E\\u5728\\u56FE\\u50CF\\u4E2D\\u4ECD\\u7136\\u662F\\u4E00\\u79CD\\u5728\\u4EFB\\u4F55\\u8BA1\\u7B97\\u673A\\u4E0A\\u663E\\u793A\\u7F8E\\u89C2\\u7684\\u975E\\u7CFB\\u7EDF\\u5B57\\u4F53\\u7684\\u5E38\\u7528\\u65B9\\u6CD5\\u3002\\u4F46\\u662F\\uFF0C\\u4E3A\\u4E86\\u652F\\u6301\\u56FE\\u50CF\\u6587\\u672C\\u7FFB\\u8BD1\\u6210\\u5176\\u4ED6\\u8BED\\u8A00\\uFF0C\\u9700\\u8981\\u4E3A\\u6BCF\\u79CD\\u8BED\\u8A00\\u521B\\u5EFA\\u5355\\u72EC\\u7684\\u56FE\\u50CF\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u8BBE\\u8BA1\\u5E08\\u6765\\u8BF4\\u4E0D\\u662F\\u4E00\\u4E2A\\u53EF\\u6269\\u5C55\\u7684\\u5DE5\\u4F5C\\u6D41\\u7A0B\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6CE8\\u610F\\u989C\\u8272\\u662F\\u5982\\u4F55\\u88AB\\u611F\\u77E5\\u7684\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u989C\\u8272\\u5728\\u4E0D\\u540C\\u7684\\u8BED\\u8A00\\u548C\\u6587\\u5316\\u4E2D\\u88AB\\u611F\\u77E5\\u7684\\u65B9\\u5F0F\\u4E0D\\u540C\\u3002\\u8BBE\\u8BA1\\u5E94\\u9002\\u5F53\\u4F7F\\u7528\\u989C\\u8272\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u53C2\\u8003\\u8D44\\u6599\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://devblogs.microsoft.com/setup/the-differences-between-locales-and-languages\",children:\"\\u533A\\u57DF\\u8BBE\\u7F6E\\u548C\\u8BED\\u8A00\\u4E4B\\u95F4\\u7684\\u5DEE\\u5F02\"})}),`\n`]})]})}function z(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(a,l)})):a(l)}var C=z;return j(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var f=Object.create;var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),x=(l,e)=>{for(var c in e)h(l,c,{get:e[c],enumerable:!0})},i=(l,e,c,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!g.call(l,r)&&r!==c&&h(l,r,{get:()=>e[r],enumerable:!(d=p(e,r))||d.enumerable});return l};var j=(l,e,c)=>(c=l!=null?f(_(l)):{},i(e||!l||!l.__esModule?h(c,\"default\",{value:l,enumerable:!0}):c,l)),M=l=>i(h({},\"__esModule\",{value:!0}),l);var o=m((k,t)=>{t.exports=_jsx_runtime});var C={};x(C,{default:()=>s,frontmatter:()=>z});var n=j(o()),z={title:\"\\u8BBE\\u8BA1\\u6216\\u5F00\\u53D1\\u591A\\u8BED\\u8A00\\u7F51\\u7AD9\\u65F6\\uFF0C\\u60A8\\u5FC5\\u987B\\u6CE8\\u610F\\u54EA\\u4E9B\\u4E8B\\u9879\\uFF1F\"};function a(l){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",ul:\"ul\",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"\\u8BBE\\u8BA1\\u548C\\u5F00\\u53D1\\u591A\\u8BED\\u8A00\\u7F51\\u7AD9\\u662F\\u56FD\\u9645\\u5316 (i18n) \\u7684\\u4E00\\u90E8\\u5206\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u641C\\u7D22\\u5F15\\u64CE\\u4F18\\u5316\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5728 \",(0,n.jsx)(e.code,{children:\"<html>\"}),\" \\u6807\\u7B7E\\u4E0A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"lang\"}),\" \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5728 URL \\u4E2D\\u5305\\u542B\\u8BED\\u8A00\\u533A\\u57DF\\u8BBE\\u7F6E\\uFF08\\u4F8B\\u5982 en_US\\u3001zh_CN \\u7B49\\uFF09\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u7F51\\u9875\\u5E94\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:'<link rel=\"alternate\" hreflang=\"other_locale\" href=\"url_for_other_locale\">'}),\" \\u544A\\u8BC9\\u641C\\u7D22\\u5F15\\u64CE\\u5728\\u6307\\u5B9A\\u7684 \",(0,n.jsx)(e.code,{children:\"href\"}),\" \\u5904\\u6709\\u53E6\\u4E00\\u4E2A\\u9875\\u9762\\uFF0C\\u5176\\u5185\\u5BB9\\u76F8\\u540C\\uFF0C\\u4F46\\u9488\\u5BF9\\u53E6\\u4E00\\u79CD\\u8BED\\u8A00/\\u8BED\\u8A00\\u533A\\u57DF\\u8BBE\\u7F6E\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4E3A\\u4E0D\\u5339\\u914D\\u7684\\u8BED\\u8A00\\u4F7F\\u7528\\u540E\\u5907\\u9875\\u9762\\u3002\\u4F7F\\u7528\\u201Cx-default\\u201D\\u503C\\uFF1A\",(0,n.jsx)(e.code,{children:'<link rel=\"alternate\" href=\"url_for_fallback\" hreflang=\"x-default\" />'}),\"\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4E86\\u89E3\\u8BED\\u8A00\\u533A\\u57DF\\u8BBE\\u7F6E\\u4E0E\\u8BED\\u8A00\\u7684\\u533A\\u522B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8BED\\u8A00\\u533A\\u57DF\\u8BBE\\u7F6E\\u63A7\\u5236\\u6570\\u5B57\\u3001\\u65E5\\u671F\\u548C\\u65F6\\u95F4\\u7684\\u663E\\u793A\\u65B9\\u5F0F\\uFF0C\\u9002\\u7528\\u4E8E\\u60A8\\u7684\\u5730\\u533A\\uFF1A\\u8FD9\\u53EF\\u80FD\\u662F\\u4E00\\u4E2A\\u56FD\\u5BB6/\\u5730\\u533A\\uFF0C\\u6216\\u4E00\\u4E2A\\u56FD\\u5BB6/\\u5730\\u533A\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u751A\\u81F3\\u53EF\\u80FD\\u4E0D\\u9075\\u5B88\\u56FD\\u5BB6/\\u5730\\u533A\\u7684\\u8FB9\\u754C\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u8BED\\u8A00\\u53EF\\u80FD\\u56E0\\u56FD\\u5BB6/\\u5730\\u533A\\u800C\\u5F02\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u67D0\\u4E9B\\u8BED\\u8A00\\uFF0C\\u5C24\\u5176\\u662F\\u4F7F\\u7528\\u5E7F\\u6CDB\\u7684\\u8BED\\u8A00\\uFF0C\\u5728\\u4E0D\\u540C\\u7684\\u56FD\\u5BB6/\\u5730\\u533A\\u6709\\u4E0D\\u540C\\u7684\\u201C\\u98CE\\u683C\\u201D\\uFF08\\u8BED\\u6CD5\\u89C4\\u5219\\u3001\\u62FC\\u5199\\u3001\\u5B57\\u7B26\\uFF09\\u3002\\u533A\\u5206\\u76EE\\u6807\\u56FD\\u5BB6/\\u5730\\u533A\\u7684\\u8BED\\u8A00\\u975E\\u5E38\\u91CD\\u8981\\uFF0C\\u4E0D\\u8981\\u5047\\u8BBE/\\u5F3A\\u5236\\u6240\\u6709\\u4F7F\\u7528\\u8BE5\\u8BED\\u8A00\\u7684\\u56FD\\u5BB6/\\u5730\\u533A\\u90FD\\u4F7F\\u7528\\u8BE5\\u8BED\\u8A00\\u7684\\u4E00\\u4E2A\\u56FD\\u5BB6/\\u5730\\u533A\\u7684\\u7248\\u672C\\u3002\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"en\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"en-US\"}),\"\\uFF08\\u7F8E\\u5F0F\\u82F1\\u8BED\\uFF09\\u3001\",(0,n.jsx)(e.code,{children:\"en-GB\"}),\"\\uFF08\\u82F1\\u5F0F\\u82F1\\u8BED\\uFF09\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"zh\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"zh-CN\"}),\"\\uFF08\\u7B80\\u4F53\\u4E2D\\u6587\\uFF09\\u3001\",(0,n.jsx)(e.code,{children:\"zh-TW\"}),\"\\uFF08\\u7E41\\u4F53\\u4E2D\\u6587\\uFF09\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u9884\\u6D4B\\u8BED\\u8A00\\u533A\\u57DF\\u8BBE\\u7F6E\\uFF0C\\u4F46\\u4E0D\\u8981\\u9650\\u5236\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u670D\\u52A1\\u5668\\u53EF\\u4EE5\\u901A\\u8FC7 HTTP \",(0,n.jsx)(e.code,{children:\"Accept-Language\"}),\" \\u6807\\u5934\\u548C IP \\u5730\\u5740\\u7684\\u7EC4\\u5408\\u6765\\u786E\\u5B9A\\u8BBF\\u95EE\\u8005\\u7684\\u8BED\\u8A00\\u533A\\u57DF\\u8BBE\\u7F6E/\\u8BED\\u8A00\\u3002\\u6709\\u4E86\\u8FD9\\u4E9B\\uFF0C\\u670D\\u52A1\\u5668\\u53EF\\u4EE5\\u81EA\\u52A8\\u4E3A\\u8BBF\\u95EE\\u8005\\u9009\\u62E9\\u6700\\u4F73\\u8BED\\u8A00\\u533A\\u57DF\\u8BBE\\u7F6E\\u3002\\u4F46\\u662F\\uFF0C\\u9884\\u6D4B\\u5E76\\u975E\\u4E07\\u65E0\\u4E00\\u5931\\uFF08\\u5C24\\u5176\\u662F\\u5F53\\u8BBF\\u95EE\\u8005\\u4F7F\\u7528 VPN \\u65F6\\uFF09\\uFF0C\\u5E76\\u4E14\\u5E94\\u5141\\u8BB8\\u8BBF\\u95EE\\u8005\\u8F7B\\u677E\\u66F4\\u6539\\u5176\\u56FD\\u5BB6/\\u5730\\u533A/\\u8BED\\u8A00\\uFF0C\\u800C\\u4E0D\\u4F1A\\u9047\\u5230\\u9EBB\\u70E6\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u8003\\u8651\\u4E0D\\u540C\\u8BED\\u8A00\\u7684\\u6587\\u672C\\u957F\\u5EA6\\u5DEE\\u5F02\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u7528\\u53E6\\u4E00\\u79CD\\u8BED\\u8A00\\u4E66\\u5199\\u65F6\\uFF0C\\u67D0\\u4E9B\\u5185\\u5BB9\\u53EF\\u80FD\\u4F1A\\u66F4\\u957F\\u3002\\u5728\\u8BBE\\u8BA1\\u4E2D\\u8981\\u6CE8\\u610F\\u5E03\\u5C40\\u6216\\u6EA2\\u51FA\\u95EE\\u9898\\u3002\\u6700\\u597D\\u907F\\u514D\\u8BBE\\u8BA1\\u6587\\u672C\\u91CF\\u4F1A\\u7834\\u574F\\u8BBE\\u8BA1\\u7684\\u573A\\u666F\\u3002\\u5B57\\u7B26\\u8BA1\\u6570\\u4F1A\\u5F71\\u54CD\\u6807\\u9898\\u3001\\u6807\\u7B7E\\u548C\\u6309\\u94AE\\u7B49\\u5185\\u5BB9\\u3002\\u5BF9\\u4E8E\\u81EA\\u7531\\u6D41\\u52A8\\u7684\\u6587\\u672C\\uFF08\\u5982\\u6B63\\u6587\\u6216\\u8BC4\\u8BBA\\uFF09\\uFF0C\\u5B83\\u4EEC\\u7684\\u5F71\\u54CD\\u8F83\\u5C0F\\u3002\\u4F8B\\u5982\\uFF0C\\u67D0\\u4E9B\\u8BED\\u8A00\\uFF08\\u5982\\u5FB7\\u8BED\\u548C\\u6CD5\\u8BED\\uFF09\\u5F80\\u5F80\\u6BD4\\u82F1\\u8BED\\u4F7F\\u7528\\u66F4\\u957F\\u7684\\u5355\\u8BCD\\u548C\\u53E5\\u5B50\\uFF0C\\u5982\\u679C\\u4E0D\\u8003\\u8651\\u8FD9\\u4E00\\u70B9\\uFF0C\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u5E03\\u5C40\\u95EE\\u9898\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u8BED\\u8A00\\u9605\\u8BFB\\u65B9\\u5411\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u82F1\\u8BED\\u548C\\u6CD5\\u8BED\\u7B49\\u8BED\\u8A00\\u662F\\u4ECE\\u5DE6\\u5230\\u53F3\\u3001\\u4ECE\\u4E0A\\u5230\\u4E0B\\u4E66\\u5199\\u7684\\u3002\\u4F46\\u662F\\uFF0C\\u5E0C\\u4F2F\\u6765\\u8BED\\u548C\\u963F\\u62C9\\u4F2F\\u8BED\\u7B49\\u67D0\\u4E9B\\u8BED\\u8A00\\u662F\\u4ECE\\u53F3\\u5230\\u5DE6\\u4E66\\u5199\\u7684\\u3002\\u8FD9\\u4F1A\\u5F71\\u54CD\\u60A8\\u7F51\\u7AD9\\u7684\\u5E03\\u5C40\\u548C\\u9875\\u9762\\u4E0A\\u5143\\u7D20\\u7684\\u4F4D\\u7F6E\\uFF0C\\u56E0\\u6B64\\u60A8\\u5FC5\\u987B\\u5C0F\\u5FC3\\u8BBE\\u8BA1\\u60A8\\u7684\\u7F51\\u7AD9\\uFF0C\\u4EE5\\u9002\\u5E94\\u4E0D\\u540C\\u7684\\u6587\\u672C\\u65B9\\u5411\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4E0D\\u8981\\u8FDE\\u63A5\\u7FFB\\u8BD1\\u540E\\u7684\\u5B57\\u7B26\\u4E32\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E0D\\u8981\\u505A\\u7C7B\\u4F3C \",(0,n.jsx)(e.code,{children:'\"\\u4ECA\\u5929\\u7684\\u65E5\\u671F\\u662F \" + date'}),\" \\u7684\\u4E8B\\u60C5\\u3002\\u5B83\\u4F1A\\u5728\\u5355\\u8BCD\\u987A\\u5E8F\\u4E0D\\u540C\\u7684\\u8BED\\u8A00\\u4E2D\\u4E2D\\u65AD\\u3002\\u6539\\u4E3A\\u5BF9\\u6BCF\\u79CD\\u8BED\\u8A00\\u4F7F\\u7528\\u5E26\\u6709\\u53C2\\u6570\\u66FF\\u6362\\u7684\\u6A21\\u677F\\u5B57\\u7B26\\u4E32\\u3002\\u4F8B\\u5982\\uFF0C\\u5206\\u522B\\u67E5\\u770B\\u82F1\\u8BED\\u548C\\u4E2D\\u6587\\u7684\\u4EE5\\u4E0B\\u4E24\\u53E5\\u8BDD\\uFF1A\",(0,n.jsx)(e.code,{children:\"I will travel on {% date %}\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"\\u6211\\u4F1A\\u5728{% date %}\\u51FA\\u53D1\"}),\"\\u3002\\u8BF7\\u6CE8\\u610F\\uFF0C\\u7531\\u4E8E\\u8BE5\\u8BED\\u8A00\\u7684\\u8BED\\u6CD5\\u89C4\\u5219\\uFF0C\\u53D8\\u91CF\\u7684\\u4F4D\\u7F6E\\u4E0D\\u540C\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u683C\\u5F0F\\u5316\\u65E5\\u671F\\u548C\\u8D27\\u5E01\"}),`\n`,(0,n.jsx)(e.p,{children:'\\u65E5\\u671F\\u683C\\u5F0F\\u6709\\u65F6\\u56E0\\u5730\\u533A\\u800C\\u5F02\\uFF0C\\u4F8B\\u5982\\u7F8E\\u56FD\\u4E60\\u60EF\\u5199\\u4F5C\\u201C\\u6708\\u5728\\u524D\\u201D\\u7684 \"May 31, 2012\"\\uFF0C\\u800C\\u6B27\\u6D32\\u4E00\\u4E9B\\u56FD\\u5BB6\\u5219\\u4E60\\u60EF\\u201C\\u65E5\\u5728\\u524D\\u201D\\u7684 \"31 May 2012\"\\u3002'}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4E0D\\u8981\\u5C06\\u6587\\u672C\\u653E\\u5728\\u56FE\\u7247\\u4E2D\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5C06\\u6587\\u672C\\u653E\\u5728\\u57FA\\u4E8E\\u6805\\u683C\\u7684\\u56FE\\u50CF\\uFF08\\u4F8B\\u5982 png\\u3001gif\\u3001jpg \\u7B49\\uFF09\\u4E2D\\u4E0D\\u662F\\u4E00\\u79CD\\u53EF\\u6269\\u5C55\\u7684\\u65B9\\u6CD5\\u3002\\u5C06\\u6587\\u672C\\u653E\\u5728\\u56FE\\u50CF\\u4E2D\\u4ECD\\u7136\\u662F\\u4E00\\u79CD\\u5728\\u4EFB\\u4F55\\u8BA1\\u7B97\\u673A\\u4E0A\\u663E\\u793A\\u7F8E\\u89C2\\u7684\\u975E\\u7CFB\\u7EDF\\u5B57\\u4F53\\u7684\\u5E38\\u7528\\u65B9\\u6CD5\\u3002\\u4F46\\u662F\\uFF0C\\u4E3A\\u4E86\\u652F\\u6301\\u56FE\\u50CF\\u6587\\u672C\\u7FFB\\u8BD1\\u6210\\u5176\\u4ED6\\u8BED\\u8A00\\uFF0C\\u9700\\u8981\\u4E3A\\u6BCF\\u79CD\\u8BED\\u8A00\\u521B\\u5EFA\\u5355\\u72EC\\u7684\\u56FE\\u50CF\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u8BBE\\u8BA1\\u5E08\\u6765\\u8BF4\\u4E0D\\u662F\\u4E00\\u4E2A\\u53EF\\u6269\\u5C55\\u7684\\u5DE5\\u4F5C\\u6D41\\u7A0B\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6CE8\\u610F\\u989C\\u8272\\u662F\\u5982\\u4F55\\u88AB\\u611F\\u77E5\\u7684\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u989C\\u8272\\u5728\\u4E0D\\u540C\\u7684\\u8BED\\u8A00\\u548C\\u6587\\u5316\\u4E2D\\u88AB\\u611F\\u77E5\\u7684\\u65B9\\u5F0F\\u4E0D\\u540C\\u3002\\u8BBE\\u8BA1\\u5E94\\u9002\\u5F53\\u4F7F\\u7528\\u989C\\u8272\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u53C2\\u8003\\u8D44\\u6599\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://devblogs.microsoft.com/setup/the-differences-between-locales-and-languages\",children:\"\\u533A\\u57DF\\u8BBE\\u7F6E\\u548C\\u8BED\\u8A00\\u4E4B\\u95F4\\u7684\\u5DEE\\u5F02\"})}),`\n`]})]})}function s(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(a,{...l})}):a(l)}return M(C);})();\n;return Component;"
 }
\ No newline at end of file
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 47e286553..7341f77c2 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
@@ -30,5 +30,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/difference-between-document-load-event-and-document-domcontentloaded-event/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var m=(d,e)=>()=>(e||d((e={exports:{}}).exports,e),e.exports),v=(d,e)=>{for(var o in e)a(d,o,{get:e[o],enumerable:!0})},i=(d,e,o,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of f(e))!p.call(d,t)&&t!==o&&a(d,t,{get:()=>e[t],enumerable:!(l=u(e,t))||l.enumerable});return d};var D=(d,e,o)=>(o=d!=null?h(g(d)):{},i(e||!d||!d.__esModule?a(o,\"default\",{value:d,enumerable:!0}):o,d)),M=d=>i(a({},\"__esModule\",{value:!0}),d);var s=m((C,r)=>{r.exports=_jsx_runtime});var O={};v(O,{default:()=>L,frontmatter:()=>w});var n=D(s()),w={title:\"Difference between document `load` event and document `DOMContentLoaded` event?\"};function c(d){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},d.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. The \",(0,n.jsx)(e.code,{children:\"load\"}),\" event, on the other hand, fires when the entire page, including all dependent resources such as stylesheets and images, has finished loading.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`document.addEventListener('DOMContentLoaded', function () {\n  console.log('DOM fully loaded and parsed');\n});\n\nwindow.addEventListener('load', function () {\n  console.log('Page fully loaded');\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Difference between document \",(0,n.jsx)(e.code,{children:\"load\"}),\" event and document \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" event\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" event\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. This event is useful when you want to execute JavaScript code as soon as the DOM is ready, without waiting for all resources to be fully loaded.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`document.addEventListener('DOMContentLoaded', function () {\n  console.log('DOM fully loaded and parsed');\n});\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"load\"}),\" event\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"load\"}),\" event is fired when the entire page, including all dependent resources such as stylesheets, images, and subframes, has finished loading. This event is useful when you need to perform actions that require all resources to be fully loaded, such as initializing a slideshow or performing layout calculations that depend on image sizes.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`window.addEventListener('load', function () {\n  console.log('Page fully loaded');\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Key differences\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Timing\"}),\": \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" fires earlier than \",(0,n.jsx)(e.code,{children:\"load\"}),\". \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" occurs after the HTML is fully parsed, while \",(0,n.jsx)(e.code,{children:\"load\"}),\" waits for all resources to be loaded.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Use cases\"}),\": Use \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" for tasks that only require the DOM to be ready, such as attaching event listeners or manipulating the DOM. Use \",(0,n.jsx)(e.code,{children:\"load\"}),\" for tasks that depend on all resources being fully loaded, such as image-dependent layout calculations.\"]}),`\n`]}),`\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/Web/API/Document/DOMContentLoaded_event\",children:\"MDN Web Docs: DOMContentLoaded\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event\",children:\"MDN Web Docs: load event\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/onload-ondomcontentloaded\",children:\"JavaScript.info: DOMContentLoaded, load, beforeunload, unload\"})}),`\n`]})]})}function y(d={}){let{wrapper:e}=d.components||{};return e?(0,n.jsx)(e,Object.assign({},d,{children:(0,n.jsx)(c,d)})):c(d)}var L=y;return M(O);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var v=(d,e)=>()=>(e||d((e={exports:{}}).exports,e),e.exports),D=(d,e)=>{for(var o in e)a(d,o,{get:e[o],enumerable:!0})},i=(d,e,o,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of g(e))!m.call(d,t)&&t!==o&&a(d,t,{get:()=>e[t],enumerable:!(l=f(e,t))||l.enumerable});return d};var M=(d,e,o)=>(o=d!=null?u(p(d)):{},i(e||!d||!d.__esModule?a(o,\"default\",{value:d,enumerable:!0}):o,d)),w=d=>i(a({},\"__esModule\",{value:!0}),d);var s=v((b,r)=>{r.exports=_jsx_runtime});var L={};D(L,{default:()=>h,frontmatter:()=>y});var n=M(s()),y={title:\"Difference between document `load` event and document `DOMContentLoaded` event?\"};function c(d){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...d.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. The \",(0,n.jsx)(e.code,{children:\"load\"}),\" event, on the other hand, fires when the entire page, including all dependent resources such as stylesheets and images, has finished loading.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`document.addEventListener('DOMContentLoaded', function () {\n  console.log('DOM fully loaded and parsed');\n});\n\nwindow.addEventListener('load', function () {\n  console.log('Page fully loaded');\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Difference between document \",(0,n.jsx)(e.code,{children:\"load\"}),\" event and document \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" event\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" event\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. This event is useful when you want to execute JavaScript code as soon as the DOM is ready, without waiting for all resources to be fully loaded.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`document.addEventListener('DOMContentLoaded', function () {\n  console.log('DOM fully loaded and parsed');\n});\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"load\"}),\" event\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"load\"}),\" event is fired when the entire page, including all dependent resources such as stylesheets, images, and subframes, has finished loading. This event is useful when you need to perform actions that require all resources to be fully loaded, such as initializing a slideshow or performing layout calculations that depend on image sizes.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`window.addEventListener('load', function () {\n  console.log('Page fully loaded');\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Key differences\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Timing\"}),\": \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" fires earlier than \",(0,n.jsx)(e.code,{children:\"load\"}),\". \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" occurs after the HTML is fully parsed, while \",(0,n.jsx)(e.code,{children:\"load\"}),\" waits for all resources to be loaded.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Use cases\"}),\": Use \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" for tasks that only require the DOM to be ready, such as attaching event listeners or manipulating the DOM. Use \",(0,n.jsx)(e.code,{children:\"load\"}),\" for tasks that depend on all resources being fully loaded, such as image-dependent layout calculations.\"]}),`\n`]}),`\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/Web/API/Document/DOMContentLoaded_event\",children:\"MDN Web Docs: DOMContentLoaded\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event\",children:\"MDN Web Docs: load event\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/onload-ondomcontentloaded\",children:\"JavaScript.info: DOMContentLoaded, load, beforeunload, unload\"})}),`\n`]})]})}function h(d={}){let{wrapper:e}=d.components||{};return e?(0,n.jsx)(e,{...d,children:(0,n.jsx)(c,{...d})}):c(d)}return w(L);})();\n;return Component;"
 }
\ No newline at end of file
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 2cc269e0b..b1829e755 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
@@ -30,5 +30,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/difference-between-document-load-event-and-document-domcontentloaded-event/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),h=(o,e)=>{for(var t in e)a(o,t,{get:e[t],enumerable:!0})},s=(o,e,t,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of p(e))!x.call(o,d)&&d!==t&&a(o,d,{get:()=>e[d],enumerable:!(r=u(e,d))||r.enumerable});return o};var j=(o,e,t)=>(t=o!=null?l(f(o)):{},s(e||!o||!o.__esModule?a(t,\"default\",{value:o,enumerable:!0}):t,o)),M=o=>s(a({},\"__esModule\",{value:!0}),o);var i=g((L,c)=>{c.exports=_jsx_runtime});var D={};h(D,{default:()=>v,frontmatter:()=>O});var n=j(i()),O={title:\"Qual a diferen\\xE7a entre o evento `load` do documento e o evento `DOMContentLoaded` do documento?\"};function m(o){let e=Object.assign({p:\"p\",code:\"code\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"O evento \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" \\xE9 disparado quando o documento HTML inicial foi completamente carregado e analisado, sem esperar que folhas de estilo, imagens e subframes terminem de carregar.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"O evento \",(0,n.jsx)(e.code,{children:\"load\"}),\" do \",(0,n.jsx)(e.code,{children:\"window\"}),\" s\\xF3 \\xE9 disparado ap\\xF3s o DOM e todos os recursos e ativos dependentes terem sido carregados.\"]})]})}function _(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(m,o)})):m(o)}var v=_;return M(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var M=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),_=(o,e)=>{for(var t in e)a(o,t,{get:e[t],enumerable:!0})},s=(o,e,t,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of f(e))!h.call(o,d)&&d!==t&&a(o,d,{get:()=>e[d],enumerable:!(r=p(e,d))||r.enumerable});return o};var g=(o,e,t)=>(t=o!=null?u(x(o)):{},s(e||!o||!o.__esModule?a(t,\"default\",{value:o,enumerable:!0}):t,o)),j=o=>s(a({},\"__esModule\",{value:!0}),o);var i=M((C,c)=>{c.exports=_jsx_runtime});var D={};_(D,{default:()=>l,frontmatter:()=>v});var n=g(i()),v={title:\"Qual a diferen\\xE7a entre o evento `load` do documento e o evento `DOMContentLoaded` do documento?\"};function m(o){let e={code:\"code\",p:\"p\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"O evento \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" \\xE9 disparado quando o documento HTML inicial foi completamente carregado e analisado, sem esperar que folhas de estilo, imagens e subframes terminem de carregar.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"O evento \",(0,n.jsx)(e.code,{children:\"load\"}),\" do \",(0,n.jsx)(e.code,{children:\"window\"}),\" s\\xF3 \\xE9 disparado ap\\xF3s o DOM e todos os recursos e ativos dependentes terem sido carregados.\"]})]})}function l(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(m,{...o})}):m(o)}return j(D);})();\n;return Component;"
 }
\ No newline at end of file
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 e54d505d4..fd4395c52 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
@@ -30,5 +30,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/difference-between-document-load-event-and-document-domcontentloaded-event/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var g=(d,n)=>()=>(n||d((n={exports:{}}).exports,n),n.exports),m=(d,n)=>{for(var o in n)c(d,o,{get:n[o],enumerable:!0})},r=(d,n,o,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of p(n))!M.call(d,l)&&l!==o&&c(d,l,{get:()=>n[l],enumerable:!(t=u(n,l))||t.enumerable});return d};var L=(d,n,o)=>(o=d!=null?s(D(d)):{},r(n||!d||!d.__esModule?c(o,\"default\",{value:d,enumerable:!0}):o,d)),O=d=>r(c({},\"__esModule\",{value:!0}),d);var i=g((_,a)=>{a.exports=_jsx_runtime});var j={};m(j,{default:()=>C,frontmatter:()=>f});var e=L(i()),f={title:\"document `load` \\u4E8B\\u4EF6\\u548C document `DOMContentLoaded` \\u4E8B\\u4EF6\\u7684\\u533A\\u522B\\uFF1F\"};function h(d){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},d.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"DOMContentLoaded\"}),\" \\u4E8B\\u4EF6\\u5728\\u521D\\u59CB HTML \\u6587\\u6863\\u5B8C\\u5168\\u52A0\\u8F7D\\u548C\\u89E3\\u6790\\u540E\\u89E6\\u53D1\\uFF0C\\u800C\\u65E0\\u9700\\u7B49\\u5F85\\u6837\\u5F0F\\u8868\\u3001\\u56FE\\u50CF\\u548C\\u5B50\\u6846\\u67B6\\u5B8C\\u6210\\u52A0\\u8F7D\\u3002\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\",(0,e.jsx)(n.code,{children:\"load\"}),\" \\u4E8B\\u4EF6\\u5728\\u6574\\u4E2A\\u9875\\u9762\\uFF08\\u5305\\u62EC\\u6240\\u6709\\u4F9D\\u8D56\\u8D44\\u6E90\\uFF0C\\u5982\\u6837\\u5F0F\\u8868\\u548C\\u56FE\\u50CF\\uFF09\\u5B8C\\u6210\\u52A0\\u8F7D\\u540E\\u89E6\\u53D1\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`document.addEventListener('DOMContentLoaded', function () {\n  console.log('DOM fully loaded and parsed');\n});\n\nwindow.addEventListener('load', function () {\n  console.log('Page fully loaded');\n});\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsxs)(n.h2,{children:[\"document \",(0,e.jsx)(n.code,{children:\"load\"}),\" \\u4E8B\\u4EF6\\u548C document \",(0,e.jsx)(n.code,{children:\"DOMContentLoaded\"}),\" \\u4E8B\\u4EF6\\u7684\\u533A\\u522B\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[(0,e.jsx)(n.code,{children:\"DOMContentLoaded\"}),\" \\u4E8B\\u4EF6\"]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"DOMContentLoaded\"}),\" \\u4E8B\\u4EF6\\u5728\\u521D\\u59CB HTML \\u6587\\u6863\\u5B8C\\u5168\\u52A0\\u8F7D\\u548C\\u89E3\\u6790\\u540E\\u89E6\\u53D1\\uFF0C\\u800C\\u65E0\\u9700\\u7B49\\u5F85\\u6837\\u5F0F\\u8868\\u3001\\u56FE\\u50CF\\u548C\\u5B50\\u6846\\u67B6\\u5B8C\\u6210\\u52A0\\u8F7D\\u3002\\u5F53\\u60A8\\u5E0C\\u671B\\u5728 DOM \\u51C6\\u5907\\u5C31\\u7EEA\\u540E\\u7ACB\\u5373\\u6267\\u884C JavaScript \\u4EE3\\u7801\\uFF0C\\u800C\\u65E0\\u9700\\u7B49\\u5F85\\u6240\\u6709\\u8D44\\u6E90\\u5B8C\\u5168\\u52A0\\u8F7D\\u65F6\\uFF0C\\u6B64\\u4E8B\\u4EF6\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`document.addEventListener('DOMContentLoaded', function () {\n  console.log('DOM fully loaded and parsed');\n});\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[(0,e.jsx)(n.code,{children:\"load\"}),\" \\u4E8B\\u4EF6\"]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"load\"}),\" \\u4E8B\\u4EF6\\u5728\\u6574\\u4E2A\\u9875\\u9762\\uFF08\\u5305\\u62EC\\u6240\\u6709\\u4F9D\\u8D56\\u8D44\\u6E90\\uFF0C\\u5982\\u6837\\u5F0F\\u8868\\u3001\\u56FE\\u50CF\\u548C\\u5B50\\u6846\\u67B6\\uFF09\\u5B8C\\u6210\\u52A0\\u8F7D\\u540E\\u89E6\\u53D1\\u3002\\u5F53\\u60A8\\u9700\\u8981\\u6267\\u884C\\u9700\\u8981\\u6240\\u6709\\u8D44\\u6E90\\u5B8C\\u5168\\u52A0\\u8F7D\\u7684\\u64CD\\u4F5C\\u65F6\\uFF0C\\u6B64\\u4E8B\\u4EF6\\u975E\\u5E38\\u6709\\u7528\\uFF0C\\u4F8B\\u5982\\u521D\\u59CB\\u5316\\u5E7B\\u706F\\u7247\\u6216\\u6267\\u884C\\u4F9D\\u8D56\\u4E8E\\u56FE\\u50CF\\u5927\\u5C0F\\u7684\\u5E03\\u5C40\\u8BA1\\u7B97\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`window.addEventListener('load', function () {\n  console.log('Page fully loaded');\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5173\\u952E\\u533A\\u522B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u65F6\\u5E8F\"}),\"\\uFF1A\",(0,e.jsx)(n.code,{children:\"DOMContentLoaded\"}),\" \\u6BD4 \",(0,e.jsx)(n.code,{children:\"load\"}),\" \\u63D0\\u524D\\u89E6\\u53D1\\u3002\",(0,e.jsx)(n.code,{children:\"DOMContentLoaded\"}),\" \\u5728 HTML \\u5B8C\\u5168\\u89E3\\u6790\\u540E\\u53D1\\u751F\\uFF0C\\u800C \",(0,e.jsx)(n.code,{children:\"load\"}),\" \\u7B49\\u5F85\\u6240\\u6709\\u8D44\\u6E90\\u52A0\\u8F7D\\u5B8C\\u6BD5\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7528\\u4F8B\"}),\"\\uFF1A\\u5C06 \",(0,e.jsx)(n.code,{children:\"DOMContentLoaded\"}),\" \\u7528\\u4E8E\\u4EC5\\u9700\\u8981 DOM \\u5C31\\u7EEA\\u7684\\u4EFB\\u52A1\\uFF0C\\u4F8B\\u5982\\u9644\\u52A0\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u6216\\u64CD\\u4F5C DOM\\u3002\\u5C06 \",(0,e.jsx)(n.code,{children:\"load\"}),\" \\u7528\\u4E8E\\u4F9D\\u8D56\\u6240\\u6709\\u8D44\\u6E90\\u5B8C\\u5168\\u52A0\\u8F7D\\u7684\\u4EFB\\u52A1\\uFF0C\\u4F8B\\u5982\\u4F9D\\u8D56\\u4E8E\\u56FE\\u50CF\\u7684\\u5E03\\u5C40\\u8BA1\\u7B97\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event\",children:\"MDN Web Docs: DOMContentLoaded\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event\",children:\"MDN Web Docs: load event\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/onload-ondomcontentloaded\",children:\"JavaScript.info: DOMContentLoaded, load, beforeunload, unload\"})}),`\n`]})]})}function v(d={}){let{wrapper:n}=d.components||{};return n?(0,e.jsx)(n,Object.assign({},d,{children:(0,e.jsx)(h,d)})):h(d)}var C=v;return O(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var L=(d,n)=>()=>(n||d((n={exports:{}}).exports,n),n.exports),g=(d,n)=>{for(var o in n)c(d,o,{get:n[o],enumerable:!0})},r=(d,n,o,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of D(n))!m.call(d,l)&&l!==o&&c(d,l,{get:()=>n[l],enumerable:!(t=p(n,l))||t.enumerable});return d};var f=(d,n,o)=>(o=d!=null?u(M(d)):{},r(n||!d||!d.__esModule?c(o,\"default\",{value:d,enumerable:!0}):o,d)),O=d=>r(c({},\"__esModule\",{value:!0}),d);var i=L((x,a)=>{a.exports=_jsx_runtime});var C={};g(C,{default:()=>s,frontmatter:()=>v});var e=f(i()),v={title:\"document `load` \\u4E8B\\u4EF6\\u548C document `DOMContentLoaded` \\u4E8B\\u4EF6\\u7684\\u533A\\u522B\\uFF1F\"};function h(d){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...d.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"DOMContentLoaded\"}),\" \\u4E8B\\u4EF6\\u5728\\u521D\\u59CB HTML \\u6587\\u6863\\u5B8C\\u5168\\u52A0\\u8F7D\\u548C\\u89E3\\u6790\\u540E\\u89E6\\u53D1\\uFF0C\\u800C\\u65E0\\u9700\\u7B49\\u5F85\\u6837\\u5F0F\\u8868\\u3001\\u56FE\\u50CF\\u548C\\u5B50\\u6846\\u67B6\\u5B8C\\u6210\\u52A0\\u8F7D\\u3002\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\",(0,e.jsx)(n.code,{children:\"load\"}),\" \\u4E8B\\u4EF6\\u5728\\u6574\\u4E2A\\u9875\\u9762\\uFF08\\u5305\\u62EC\\u6240\\u6709\\u4F9D\\u8D56\\u8D44\\u6E90\\uFF0C\\u5982\\u6837\\u5F0F\\u8868\\u548C\\u56FE\\u50CF\\uFF09\\u5B8C\\u6210\\u52A0\\u8F7D\\u540E\\u89E6\\u53D1\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`document.addEventListener('DOMContentLoaded', function () {\n  console.log('DOM fully loaded and parsed');\n});\n\nwindow.addEventListener('load', function () {\n  console.log('Page fully loaded');\n});\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsxs)(n.h2,{children:[\"document \",(0,e.jsx)(n.code,{children:\"load\"}),\" \\u4E8B\\u4EF6\\u548C document \",(0,e.jsx)(n.code,{children:\"DOMContentLoaded\"}),\" \\u4E8B\\u4EF6\\u7684\\u533A\\u522B\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[(0,e.jsx)(n.code,{children:\"DOMContentLoaded\"}),\" \\u4E8B\\u4EF6\"]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"DOMContentLoaded\"}),\" \\u4E8B\\u4EF6\\u5728\\u521D\\u59CB HTML \\u6587\\u6863\\u5B8C\\u5168\\u52A0\\u8F7D\\u548C\\u89E3\\u6790\\u540E\\u89E6\\u53D1\\uFF0C\\u800C\\u65E0\\u9700\\u7B49\\u5F85\\u6837\\u5F0F\\u8868\\u3001\\u56FE\\u50CF\\u548C\\u5B50\\u6846\\u67B6\\u5B8C\\u6210\\u52A0\\u8F7D\\u3002\\u5F53\\u60A8\\u5E0C\\u671B\\u5728 DOM \\u51C6\\u5907\\u5C31\\u7EEA\\u540E\\u7ACB\\u5373\\u6267\\u884C JavaScript \\u4EE3\\u7801\\uFF0C\\u800C\\u65E0\\u9700\\u7B49\\u5F85\\u6240\\u6709\\u8D44\\u6E90\\u5B8C\\u5168\\u52A0\\u8F7D\\u65F6\\uFF0C\\u6B64\\u4E8B\\u4EF6\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`document.addEventListener('DOMContentLoaded', function () {\n  console.log('DOM fully loaded and parsed');\n});\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[(0,e.jsx)(n.code,{children:\"load\"}),\" \\u4E8B\\u4EF6\"]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"load\"}),\" \\u4E8B\\u4EF6\\u5728\\u6574\\u4E2A\\u9875\\u9762\\uFF08\\u5305\\u62EC\\u6240\\u6709\\u4F9D\\u8D56\\u8D44\\u6E90\\uFF0C\\u5982\\u6837\\u5F0F\\u8868\\u3001\\u56FE\\u50CF\\u548C\\u5B50\\u6846\\u67B6\\uFF09\\u5B8C\\u6210\\u52A0\\u8F7D\\u540E\\u89E6\\u53D1\\u3002\\u5F53\\u60A8\\u9700\\u8981\\u6267\\u884C\\u9700\\u8981\\u6240\\u6709\\u8D44\\u6E90\\u5B8C\\u5168\\u52A0\\u8F7D\\u7684\\u64CD\\u4F5C\\u65F6\\uFF0C\\u6B64\\u4E8B\\u4EF6\\u975E\\u5E38\\u6709\\u7528\\uFF0C\\u4F8B\\u5982\\u521D\\u59CB\\u5316\\u5E7B\\u706F\\u7247\\u6216\\u6267\\u884C\\u4F9D\\u8D56\\u4E8E\\u56FE\\u50CF\\u5927\\u5C0F\\u7684\\u5E03\\u5C40\\u8BA1\\u7B97\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`window.addEventListener('load', function () {\n  console.log('Page fully loaded');\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5173\\u952E\\u533A\\u522B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u65F6\\u5E8F\"}),\"\\uFF1A\",(0,e.jsx)(n.code,{children:\"DOMContentLoaded\"}),\" \\u6BD4 \",(0,e.jsx)(n.code,{children:\"load\"}),\" \\u63D0\\u524D\\u89E6\\u53D1\\u3002\",(0,e.jsx)(n.code,{children:\"DOMContentLoaded\"}),\" \\u5728 HTML \\u5B8C\\u5168\\u89E3\\u6790\\u540E\\u53D1\\u751F\\uFF0C\\u800C \",(0,e.jsx)(n.code,{children:\"load\"}),\" \\u7B49\\u5F85\\u6240\\u6709\\u8D44\\u6E90\\u52A0\\u8F7D\\u5B8C\\u6BD5\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7528\\u4F8B\"}),\"\\uFF1A\\u5C06 \",(0,e.jsx)(n.code,{children:\"DOMContentLoaded\"}),\" \\u7528\\u4E8E\\u4EC5\\u9700\\u8981 DOM \\u5C31\\u7EEA\\u7684\\u4EFB\\u52A1\\uFF0C\\u4F8B\\u5982\\u9644\\u52A0\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u6216\\u64CD\\u4F5C DOM\\u3002\\u5C06 \",(0,e.jsx)(n.code,{children:\"load\"}),\" \\u7528\\u4E8E\\u4F9D\\u8D56\\u6240\\u6709\\u8D44\\u6E90\\u5B8C\\u5168\\u52A0\\u8F7D\\u7684\\u4EFB\\u52A1\\uFF0C\\u4F8B\\u5982\\u4F9D\\u8D56\\u4E8E\\u56FE\\u50CF\\u7684\\u5E03\\u5C40\\u8BA1\\u7B97\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event\",children:\"MDN Web Docs: DOMContentLoaded\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event\",children:\"MDN Web Docs: load event\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/onload-ondomcontentloaded\",children:\"JavaScript.info: DOMContentLoaded, load, beforeunload, unload\"})}),`\n`]})]})}function s(d={}){let{wrapper:n}=d.components||{};return n?(0,e.jsx)(n,{...d,children:(0,e.jsx)(h,{...d})}):h(d)}return O(C);})();\n;return Component;"
 }
\ No newline at end of file
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 dc7a934fe..d6847fdac 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var w=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),b=(o,e)=>{for(var r in e)c(o,r,{get:e[r],enumerable:!0})},s=(o,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of p(e))!m.call(o,t)&&t!==r&&c(o,t,{get:()=>e[t],enumerable:!(i=u(e,t))||i.enumerable});return o};var P=(o,e,r)=>(r=o!=null?l(f(o)):{},s(e||!o||!o.__esModule?c(r,\"default\",{value:o,enumerable:!0}):r,o)),g=o=>s(c({},\"__esModule\",{value:!0}),o);var a=w((C,d)=>{d.exports=_jsx_runtime});var J={};b(J,{default:()=>v,frontmatter:()=>y});var n=P(a()),y={title:\"Difference between: `function Person(){}`, `const person = Person()`, and `const person = new Person()` in JavaScript?\"};function h(o){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",hr:\"hr\",p:\"p\",pre:\"pre\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"function Person(){}\"}),\": A function declaration in JavaScript. It can be used as a regular function or as a constructor.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"const person = Person()\"}),\": Calls \",(0,n.jsx)(e.code,{children:\"Person\"}),\" as a regular function, not a constructor. If \",(0,n.jsx)(e.code,{children:\"Person\"}),\" is intended to be a constructor, this will lead to unexpected behavior.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"const person = new Person()\"}),\": Creates a new instance of \",(0,n.jsx)(e.code,{children:\"Person\"}),\", correctly utilizing the constructor function to initialize the new object.\"]}),`\n`]}),`\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:\"Aspect\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"function Person(){}\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"const person = Person()\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"const person = new Person()\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Type\"}),(0,n.jsx)(e.td,{children:\"Function declaration\"}),(0,n.jsx)(e.td,{children:\"Function call\"}),(0,n.jsx)(e.td,{children:\"Constructor call\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Usage\"}),(0,n.jsx)(e.td,{children:\"Defines a function\"}),(0,n.jsxs)(e.td,{children:[\"Invokes \",(0,n.jsx)(e.code,{children:\"Person\"}),\" as a regular function\"]}),(0,n.jsxs)(e.td,{children:[\"Creates a new instance of \",(0,n.jsx)(e.code,{children:\"Person\"})]})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Instance Creation\"}),(0,n.jsx)(e.td,{children:\"No instance created\"}),(0,n.jsx)(e.td,{children:\"No instance created\"}),(0,n.jsx)(e.td,{children:\"New instance created\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Common Mistake\"}),(0,n.jsx)(e.td,{children:\"N/A\"}),(0,n.jsxs)(e.td,{children:[\"Misusing as constructor leading to \",(0,n.jsx)(e.code,{children:\"undefined\"})]}),(0,n.jsx)(e.td,{children:\"None (when used correctly)\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Function declaration\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"function Person(){}\"}),\" is a standard function declaration in JavaScript. When written in PascalCase, it follows the convention for functions intended to be used as constructors.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"This code defines a function named \",(0,n.jsx)(e.code,{children:\"Person\"}),\" that takes a parameter \",(0,n.jsx)(e.code,{children:\"name\"}),\" and assigns it to the \",(0,n.jsx)(e.code,{children:\"name\"}),\" property of the object created from this constructor function. When the \",(0,n.jsx)(e.code,{children:\"this\"}),\" keyword is used in a constructor, it refers to the newly created object.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Function call\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"const person = Person()\"}),\" simply invoke the function's code. When you invoke \",(0,n.jsx)(e.code,{children:\"Person\"}),\" as a regular function (i.e., without the \",(0,n.jsx)(e.code,{children:\"new\"}),\" keyword), the function does not behave as a constructor. Instead, it executes its code and returns \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" if no return value is specified and that gets assigned to the variable intended as the instance. Invoking as such is a common mistake if the function is intended to be used as a constructor.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst person = Person('John'); // Throws error in strict mode\nconsole.log(person); // undefined\nconsole.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this case, \",(0,n.jsx)(e.code,{children:\"Person('John')\"}),\" does not create a new object. The \",(0,n.jsx)(e.code,{children:\"person\"}),\" variable is assigned \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" because the \",(0,n.jsx)(e.code,{children:\"Person\"}),\" function does not explicitly return a value. Attempting to access \",(0,n.jsx)(e.code,{children:\"person.name\"}),\" throws an error because \",(0,n.jsx)(e.code,{children:\"person\"}),\" is \",(0,n.jsx)(e.code,{children:\"undefined\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Constructor call\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"const person = new Person()\"}),\" creates an instance of the \",(0,n.jsx)(e.code,{children:\"Person\"}),\" object using the new operator, which inherits from \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\". An alternative would be to use \",(0,n.jsx)(e.code,{children:\"Object.create\"}),\", such as: \",(0,n.jsx)(e.code,{children:\"Object.create(Person.prototype)\"}),\" and \",(0,n.jsx)(e.code,{children:\"Person.call(person, 'John')\"}),\" initializes the object.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst person = new Person('John');\nconsole.log(person); // Person { name: 'John' }\nconsole.log(person.name); // 'John'\n\n// Alternative\nconst person1 = Object.create(Person.prototype);\nPerson.call(person1, 'John');\nconsole.log(person1); // Person { name: 'John' }\nconsole.log(person1.name); // 'John'\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this case, \",(0,n.jsx)(e.code,{children:\"new Person('John')\"}),\" creates a new object, and \",(0,n.jsx)(e.code,{children:\"this\"}),\" within \",(0,n.jsx)(e.code,{children:\"Person\"}),\" refers to this new object. The \",(0,n.jsx)(e.code,{children:\"name\"}),\" property is correctly set on the new object. The \",(0,n.jsx)(e.code,{children:\"person\"}),\" variable is assigned the new instance of \",(0,n.jsx)(e.code,{children:\"Person\"}),\" with the name property set to \",(0,n.jsx)(e.code,{children:\"'John'\"}),\". And for the alternative object creation, \",(0,n.jsx)(e.code,{children:\"Object.create(Person.prototype)\"}),\" creates a new object with \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\" as its prototype. \",(0,n.jsx)(e.code,{children:\"Person.call(person, 'John')\"}),\" initializes the object, setting the \",(0,n.jsx)(e.code,{children:\"name\"}),\" property.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Follow-Up Questions\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"What are the differences between function constructors and ES6 class syntax?\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"What are some common use cases for \",(0,n.jsx)(e.code,{children:\"Object.create\"}),\"?\"]}),`\n`]}),`\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/Learn/JavaScript/Objects/Object_prototypes\",children:\"MDN Web Docs: Object prototypes\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.greatfrontend.com/questions/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors?fpr=yangshun\",children:\"Differences between Class and Function Constructors\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://www.greatfrontend.com/questions/quiz/explain-how-this-works-in-javascript?fpr=yangshun\",children:[\"How \",(0,n.jsx)(e.code,{children:\"this\"}),\" keyword works in JavaScript?\"]})}),`\n`]})]})}function j(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(h,o)})):h(o)}var v=j;return g(J);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var b=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),P=(o,e)=>{for(var r in e)c(o,r,{get:e[r],enumerable:!0})},s=(o,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of f(e))!w.call(o,t)&&t!==r&&c(o,t,{get:()=>e[t],enumerable:!(i=p(e,t))||i.enumerable});return o};var g=(o,e,r)=>(r=o!=null?u(m(o)):{},s(e||!o||!o.__esModule?c(r,\"default\",{value:o,enumerable:!0}):r,o)),y=o=>s(c({},\"__esModule\",{value:!0}),o);var a=b((x,d)=>{d.exports=_jsx_runtime});var v={};P(v,{default:()=>l,frontmatter:()=>j});var n=g(a()),j={title:\"Difference between: `function Person(){}`, `const person = Person()`, and `const person = new Person()` in JavaScript?\"};function h(o){let e={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"function Person(){}\"}),\": A function declaration in JavaScript. It can be used as a regular function or as a constructor.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"const person = Person()\"}),\": Calls \",(0,n.jsx)(e.code,{children:\"Person\"}),\" as a regular function, not a constructor. If \",(0,n.jsx)(e.code,{children:\"Person\"}),\" is intended to be a constructor, this will lead to unexpected behavior.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"const person = new Person()\"}),\": Creates a new instance of \",(0,n.jsx)(e.code,{children:\"Person\"}),\", correctly utilizing the constructor function to initialize the new object.\"]}),`\n`]}),`\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:\"Aspect\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"function Person(){}\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"const person = Person()\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"const person = new Person()\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Type\"}),(0,n.jsx)(e.td,{children:\"Function declaration\"}),(0,n.jsx)(e.td,{children:\"Function call\"}),(0,n.jsx)(e.td,{children:\"Constructor call\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Usage\"}),(0,n.jsx)(e.td,{children:\"Defines a function\"}),(0,n.jsxs)(e.td,{children:[\"Invokes \",(0,n.jsx)(e.code,{children:\"Person\"}),\" as a regular function\"]}),(0,n.jsxs)(e.td,{children:[\"Creates a new instance of \",(0,n.jsx)(e.code,{children:\"Person\"})]})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Instance Creation\"}),(0,n.jsx)(e.td,{children:\"No instance created\"}),(0,n.jsx)(e.td,{children:\"No instance created\"}),(0,n.jsx)(e.td,{children:\"New instance created\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Common Mistake\"}),(0,n.jsx)(e.td,{children:\"N/A\"}),(0,n.jsxs)(e.td,{children:[\"Misusing as constructor leading to \",(0,n.jsx)(e.code,{children:\"undefined\"})]}),(0,n.jsx)(e.td,{children:\"None (when used correctly)\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Function declaration\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"function Person(){}\"}),\" is a standard function declaration in JavaScript. When written in PascalCase, it follows the convention for functions intended to be used as constructors.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"This code defines a function named \",(0,n.jsx)(e.code,{children:\"Person\"}),\" that takes a parameter \",(0,n.jsx)(e.code,{children:\"name\"}),\" and assigns it to the \",(0,n.jsx)(e.code,{children:\"name\"}),\" property of the object created from this constructor function. When the \",(0,n.jsx)(e.code,{children:\"this\"}),\" keyword is used in a constructor, it refers to the newly created object.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Function call\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"const person = Person()\"}),\" simply invoke the function's code. When you invoke \",(0,n.jsx)(e.code,{children:\"Person\"}),\" as a regular function (i.e., without the \",(0,n.jsx)(e.code,{children:\"new\"}),\" keyword), the function does not behave as a constructor. Instead, it executes its code and returns \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" if no return value is specified and that gets assigned to the variable intended as the instance. Invoking as such is a common mistake if the function is intended to be used as a constructor.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst person = Person('John'); // Throws error in strict mode\nconsole.log(person); // undefined\nconsole.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this case, \",(0,n.jsx)(e.code,{children:\"Person('John')\"}),\" does not create a new object. The \",(0,n.jsx)(e.code,{children:\"person\"}),\" variable is assigned \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" because the \",(0,n.jsx)(e.code,{children:\"Person\"}),\" function does not explicitly return a value. Attempting to access \",(0,n.jsx)(e.code,{children:\"person.name\"}),\" throws an error because \",(0,n.jsx)(e.code,{children:\"person\"}),\" is \",(0,n.jsx)(e.code,{children:\"undefined\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Constructor call\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"const person = new Person()\"}),\" creates an instance of the \",(0,n.jsx)(e.code,{children:\"Person\"}),\" object using the new operator, which inherits from \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\". An alternative would be to use \",(0,n.jsx)(e.code,{children:\"Object.create\"}),\", such as: \",(0,n.jsx)(e.code,{children:\"Object.create(Person.prototype)\"}),\" and \",(0,n.jsx)(e.code,{children:\"Person.call(person, 'John')\"}),\" initializes the object.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst person = new Person('John');\nconsole.log(person); // Person { name: 'John' }\nconsole.log(person.name); // 'John'\n\n// Alternative\nconst person1 = Object.create(Person.prototype);\nPerson.call(person1, 'John');\nconsole.log(person1); // Person { name: 'John' }\nconsole.log(person1.name); // 'John'\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this case, \",(0,n.jsx)(e.code,{children:\"new Person('John')\"}),\" creates a new object, and \",(0,n.jsx)(e.code,{children:\"this\"}),\" within \",(0,n.jsx)(e.code,{children:\"Person\"}),\" refers to this new object. The \",(0,n.jsx)(e.code,{children:\"name\"}),\" property is correctly set on the new object. The \",(0,n.jsx)(e.code,{children:\"person\"}),\" variable is assigned the new instance of \",(0,n.jsx)(e.code,{children:\"Person\"}),\" with the name property set to \",(0,n.jsx)(e.code,{children:\"'John'\"}),\". And for the alternative object creation, \",(0,n.jsx)(e.code,{children:\"Object.create(Person.prototype)\"}),\" creates a new object with \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\" as its prototype. \",(0,n.jsx)(e.code,{children:\"Person.call(person, 'John')\"}),\" initializes the object, setting the \",(0,n.jsx)(e.code,{children:\"name\"}),\" property.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Follow-Up Questions\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"What are the differences between function constructors and ES6 class syntax?\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"What are some common use cases for \",(0,n.jsx)(e.code,{children:\"Object.create\"}),\"?\"]}),`\n`]}),`\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/Learn/JavaScript/Objects/Object_prototypes\",children:\"MDN Web Docs: Object prototypes\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.greatfrontend.com/questions/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors?fpr=yangshun\",children:\"Differences between Class and Function Constructors\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://www.greatfrontend.com/questions/quiz/explain-how-this-works-in-javascript?fpr=yangshun\",children:[\"How \",(0,n.jsx)(e.code,{children:\"this\"}),\" keyword works in JavaScript?\"]})}),`\n`]})]})}function l(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(h,{...o})}):h(o)}return y(v);})();\n;return Component;"
 }
\ No newline at end of file
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 53e6bb49c..e0eafaf32 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var r in e)s(n,r,{get:e[r],enumerable:!0})},t=(n,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!f.call(n,a)&&a!==r&&s(n,a,{get:()=>e[a],enumerable:!(c=l(e,a))||c.enumerable});return n};var P=(n,e,r)=>(r=n!=null?m(h(n)):{},t(e||!n||!n.__esModule?s(r,\"default\",{value:n,enumerable:!0}):r,n)),j=n=>t(s({},\"__esModule\",{value:!0}),n);var i=v((q,d)=>{d.exports=_jsx_runtime});var w={};g(w,{default:()=>_,frontmatter:()=>x});var o=P(i()),x={title:\"Diferen\\xE7a entre: `function Person(){}`, `var person = Person()`, e `var person = new Person()`?\"};function u(n){let e=Object.assign({p:\"p\",code:\"code\",pre:\"pre\"},n.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Esta pergunta \\xE9 muito vaga. Nossa melhor suposi\\xE7\\xE3o sobre a inten\\xE7\\xE3o dessa pergunta \\xE9 que ela est\\xE1 perguntando sobre construtores em JavaScript. Tecnicamente falando, \",(0,o.jsx)(e.code,{children:\"function Person(){}\"}),\" \\xE9 apenas uma declara\\xE7\\xE3o de fun\\xE7\\xE3o normal. A conven\\xE7\\xE3o \\xE9 usar PascalCase para fun\\xE7\\xF5es que se destinam a ser usadas como construtores.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"var person = Person()\"}),\" invoca o \",(0,o.jsx)(e.code,{children:\"Person\"}),\" como uma fun\\xE7\\xE3o, e n\\xE3o como um construtor. Invocar como tal \\xE9 um erro comum se a fun\\xE7\\xE3o pretende ser usada como um construtor. Normalmente, o construtor n\\xE3o devolve nada. Assim, invocando o construtor como uma fun\\xE7\\xE3o normal retornar\\xE1 \",(0,o.jsx)(e.code,{children:\"undefined\"}),\" e que ser\\xE1 atribu\\xEDdo \\xE0 vari\\xE1vel pretendida como a inst\\xE2ncia.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"var person = new Person()\"}),\" cria uma inst\\xE2ncia do objeto \",(0,o.jsx)(e.code,{children:\"Person\"}),\" usando o operador \",(0,o.jsx)(e.code,{children:\"new\"}),\", que herda de \",(0,o.jsx)(e.code,{children:\"Person.prototype\"}),\". Uma alternativa seria usar \",(0,o.jsx)(e.code,{children:\"Object.create\"}),\", tais como: \",(0,o.jsx)(e.code,{children:\"Object.create(Person.prototype)\"}),\".\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nvar person = Person('John');\nconsole.log(person); // undefined\nconsole.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined\n\nvar person = new Person('John');\nconsole.log(person); // Person { name: \"John\" }\nconsole.log(person.name); // \"john\"\n`})})]})}function b(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(u,n)})):u(n)}var _=b;return j(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var l=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var P=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var r in e)s(n,r,{get:e[r],enumerable:!0})},t=(n,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of h(e))!v.call(n,a)&&a!==r&&s(n,a,{get:()=>e[a],enumerable:!(c=p(e,a))||c.enumerable});return n};var j=(n,e,r)=>(r=n!=null?l(f(n)):{},t(e||!n||!n.__esModule?s(r,\"default\",{value:n,enumerable:!0}):r,n)),x=n=>t(s({},\"__esModule\",{value:!0}),n);var i=P((y,d)=>{d.exports=_jsx_runtime});var b={};g(b,{default:()=>m,frontmatter:()=>_});var o=j(i()),_={title:\"Diferen\\xE7a entre: `function Person(){}`, `var person = Person()`, e `var person = new Person()`?\"};function u(n){let e={code:\"code\",p:\"p\",pre:\"pre\",...n.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Esta pergunta \\xE9 muito vaga. Nossa melhor suposi\\xE7\\xE3o sobre a inten\\xE7\\xE3o dessa pergunta \\xE9 que ela est\\xE1 perguntando sobre construtores em JavaScript. Tecnicamente falando, \",(0,o.jsx)(e.code,{children:\"function Person(){}\"}),\" \\xE9 apenas uma declara\\xE7\\xE3o de fun\\xE7\\xE3o normal. A conven\\xE7\\xE3o \\xE9 usar PascalCase para fun\\xE7\\xF5es que se destinam a ser usadas como construtores.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"var person = Person()\"}),\" invoca o \",(0,o.jsx)(e.code,{children:\"Person\"}),\" como uma fun\\xE7\\xE3o, e n\\xE3o como um construtor. Invocar como tal \\xE9 um erro comum se a fun\\xE7\\xE3o pretende ser usada como um construtor. Normalmente, o construtor n\\xE3o devolve nada. Assim, invocando o construtor como uma fun\\xE7\\xE3o normal retornar\\xE1 \",(0,o.jsx)(e.code,{children:\"undefined\"}),\" e que ser\\xE1 atribu\\xEDdo \\xE0 vari\\xE1vel pretendida como a inst\\xE2ncia.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"var person = new Person()\"}),\" cria uma inst\\xE2ncia do objeto \",(0,o.jsx)(e.code,{children:\"Person\"}),\" usando o operador \",(0,o.jsx)(e.code,{children:\"new\"}),\", que herda de \",(0,o.jsx)(e.code,{children:\"Person.prototype\"}),\". Uma alternativa seria usar \",(0,o.jsx)(e.code,{children:\"Object.create\"}),\", tais como: \",(0,o.jsx)(e.code,{children:\"Object.create(Person.prototype)\"}),\".\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nvar person = Person('John');\nconsole.log(person); // undefined\nconsole.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined\n\nvar person = new Person('John');\nconsole.log(person); // Person { name: \"John\" }\nconsole.log(person.name); // \"john\"\n`})})]})}function m(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(u,{...n})}):u(n)}return x(b);})();\n;return Component;"
 }
\ No newline at end of file
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 f427666cc..a73d83b77 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),w=(r,e)=>{for(var c in e)d(r,c,{get:e[c],enumerable:!0})},l=(r,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!m.call(r,o)&&o!==c&&d(r,o,{get:()=>e[o],enumerable:!(i=p(e,o))||i.enumerable});return r};var g=(r,e,c)=>(c=r!=null?a(P(r)):{},l(e||!r||!r.__esModule?d(c,\"default\",{value:r,enumerable:!0}):c,r)),b=r=>l(d({},\"__esModule\",{value:!0}),r);var t=f((O,h)=>{h.exports=_jsx_runtime});var v={};w(v,{default:()=>y,frontmatter:()=>j});var n=g(t()),j={title:\"JavaScript \\u4E2D\\uFF1A`function Person(){}`\\u3001`const person = Person()` \\u548C `const person = new Person()` \\u7684\\u533A\\u522B\\uFF1F\"};function s(r){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",hr:\"hr\",p:\"p\",pre:\"pre\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"function Person(){}\"}),\"\\uFF1AJavaScript \\u4E2D\\u7684\\u51FD\\u6570\\u58F0\\u660E\\u3002\\u5B83\\u53EF\\u4EE5\\u4F5C\\u4E3A\\u5E38\\u89C4\\u51FD\\u6570\\u6216\\u6784\\u9020\\u51FD\\u6570\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"const person = Person()\"}),\"\\uFF1A\\u5C06 \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u4F5C\\u4E3A\\u5E38\\u89C4\\u51FD\\u6570\\u8C03\\u7528\\uFF0C\\u800C\\u4E0D\\u662F\\u6784\\u9020\\u51FD\\u6570\\u3002\\u5982\\u679C \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u65E8\\u5728\\u7528\\u4F5C\\u6784\\u9020\\u51FD\\u6570\\uFF0C\\u8FD9\\u5C06\\u5BFC\\u81F4\\u610F\\u5916\\u884C\\u4E3A\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"const person = new Person()\"}),\"\\uFF1A\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u7684\\u65B0\\u5B9E\\u4F8B\\uFF0C\\u6B63\\u786E\\u5229\\u7528\\u6784\\u9020\\u51FD\\u6570\\u6765\\u521D\\u59CB\\u5316\\u65B0\\u5BF9\\u8C61\\u3002\"]}),`\n`]}),`\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:\"\\u65B9\\u9762\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"function Person(){}\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"const person = Person()\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"const person = new Person()\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u7C7B\\u578B\"}),(0,n.jsx)(e.td,{children:\"\\u51FD\\u6570\\u58F0\\u660E\"}),(0,n.jsx)(e.td,{children:\"\\u51FD\\u6570\\u8C03\\u7528\"}),(0,n.jsx)(e.td,{children:\"\\u6784\\u9020\\u51FD\\u6570\\u8C03\\u7528\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u7528\\u6CD5\"}),(0,n.jsx)(e.td,{children:\"\\u5B9A\\u4E49\\u4E00\\u4E2A\\u51FD\\u6570\"}),(0,n.jsxs)(e.td,{children:[\"\\u5C06 \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u4F5C\\u4E3A\\u5E38\\u89C4\\u51FD\\u6570\\u8C03\\u7528\"]}),(0,n.jsxs)(e.td,{children:[\"\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u7684\\u65B0\\u5B9E\\u4F8B\"]})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u5B9E\\u4F8B\\u521B\\u5EFA\"}),(0,n.jsx)(e.td,{children:\"\\u672A\\u521B\\u5EFA\\u5B9E\\u4F8B\"}),(0,n.jsx)(e.td,{children:\"\\u672A\\u521B\\u5EFA\\u5B9E\\u4F8B\"}),(0,n.jsx)(e.td,{children:\"\\u521B\\u5EFA\\u65B0\\u5B9E\\u4F8B\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u5E38\\u89C1\\u9519\\u8BEF\"}),(0,n.jsx)(e.td,{children:\"N/A\"}),(0,n.jsxs)(e.td,{children:[\"\\u8BEF\\u7528\\u4F5C\\u6784\\u9020\\u51FD\\u6570\\uFF0C\\u5BFC\\u81F4 \",(0,n.jsx)(e.code,{children:\"undefined\"})]}),(0,n.jsx)(e.td,{children:\"\\u65E0\\uFF08\\u6B63\\u786E\\u4F7F\\u7528\\u65F6\\uFF09\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u51FD\\u6570\\u58F0\\u660E\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"function Person(){}\"}),\" \\u662F JavaScript \\u4E2D\\u7684\\u6807\\u51C6\\u51FD\\u6570\\u58F0\\u660E\\u3002\\u5F53\\u7528 PascalCase \\u7F16\\u5199\\u65F6\\uFF0C\\u5B83\\u9075\\u5FAA\\u65E8\\u5728\\u7528\\u4F5C\\u6784\\u9020\\u51FD\\u6570\\u7684\\u51FD\\u6570\\u7684\\u7EA6\\u5B9A\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6B64\\u4EE3\\u7801\\u5B9A\\u4E49\\u4E86\\u4E00\\u4E2A\\u540D\\u4E3A \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u7684\\u51FD\\u6570\\uFF0C\\u8BE5\\u51FD\\u6570\\u63A5\\u53D7\\u4E00\\u4E2A\\u53C2\\u6570 \",(0,n.jsx)(e.code,{children:\"name\"}),\" \\u5E76\\u5C06\\u5176\\u5206\\u914D\\u7ED9\\u4ECE\\u6B64\\u6784\\u9020\\u51FD\\u6570\\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u7684 \",(0,n.jsx)(e.code,{children:\"name\"}),\" \\u5C5E\\u6027\\u3002\\u5F53\\u5728\\u6784\\u9020\\u51FD\\u6570\\u4E2D\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\\u65F6\\uFF0C\\u5B83\\u6307\\u7684\\u662F\\u65B0\\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u51FD\\u6570\\u8C03\\u7528\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"const person = Person()\"}),\" \\u53EA\\u662F\\u8C03\\u7528\\u8BE5\\u51FD\\u6570\\u7684\\u4EE3\\u7801\\u3002\\u5F53\\u60A8\\u5C06 \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u4F5C\\u4E3A\\u5E38\\u89C4\\u51FD\\u6570\\u8C03\\u7528\\uFF08\\u5373\\uFF0C\\u4E0D\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\uFF09\\u65F6\\uFF0C\\u8BE5\\u51FD\\u6570\\u7684\\u884C\\u4E3A\\u4E0D\\u50CF\\u6784\\u9020\\u51FD\\u6570\\u3002\\u76F8\\u53CD\\uFF0C\\u5B83\\u6267\\u884C\\u5176\\u4EE3\\u7801\\uFF0C\\u5982\\u679C\\u672A\\u6307\\u5B9A\\u8FD4\\u56DE\\u503C\\uFF0C\\u5219\\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\uFF0C\\u5E76\\u5C06\\u5176\\u5206\\u914D\\u7ED9\\u4F5C\\u4E3A\\u5B9E\\u4F8B\\u7684\\u53D8\\u91CF\\u3002\\u5982\\u679C\\u8BE5\\u51FD\\u6570\\u65E8\\u5728\\u7528\\u4F5C\\u6784\\u9020\\u51FD\\u6570\\uFF0C\\u5219\\u8FD9\\u6837\\u8C03\\u7528\\u662F\\u4E00\\u4E2A\\u5E38\\u89C1\\u7684\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst person = Person('John'); // Throws error in strict mode\nconsole.log(person); // undefined\nconsole.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u8FD9\\u79CD\\u60C5\\u51B5\\u4E0B\\uFF0C\",(0,n.jsx)(e.code,{children:\"Person('John')\"}),\" \\u4E0D\\u4F1A\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\u3002\",(0,n.jsx)(e.code,{children:\"person\"}),\" \\u53D8\\u91CF\\u88AB\\u8D4B\\u503C\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\uFF0C\\u56E0\\u4E3A \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u51FD\\u6570\\u6CA1\\u6709\\u663E\\u5F0F\\u8FD4\\u56DE\\u503C\\u3002\\u5C1D\\u8BD5\\u8BBF\\u95EE \",(0,n.jsx)(e.code,{children:\"person.name\"}),\" \\u4F1A\\u629B\\u51FA\\u9519\\u8BEF\\uFF0C\\u56E0\\u4E3A \",(0,n.jsx)(e.code,{children:\"person\"}),\" \\u662F \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6784\\u9020\\u51FD\\u6570\\u8C03\\u7528\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"const person = new Person()\"}),\" \\u4F7F\\u7528 new \\u8FD0\\u7B97\\u7B26\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u5BF9\\u8C61\\u7684\\u5B9E\\u4F8B\\uFF0C\\u8BE5\\u5B9E\\u4F8B\\u7EE7\\u627F\\u81EA \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\"\\u3002\\u53E6\\u4E00\\u79CD\\u65B9\\u6CD5\\u662F\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.create\"}),\"\\uFF0C\\u4F8B\\u5982\\uFF1A\",(0,n.jsx)(e.code,{children:\"Object.create(Person.prototype)\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Person.call(person, 'John')\"}),\" \\u521D\\u59CB\\u5316\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst person = new Person('John');\nconsole.log(person); // Person { name: 'John' }\nconsole.log(person.name); // 'John'\n\n// Alternative\nconst person1 = Object.create(Person.prototype);\nPerson.call(person1, 'John');\nconsole.log(person1); // Person { name: 'John' }\nconsole.log(person1.name); // 'John'\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u8FD9\\u79CD\\u60C5\\u51B5\\u4E0B\\uFF0C\",(0,n.jsx)(e.code,{children:\"new Person('John')\"}),\" \\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5BF9\\u8C61\\uFF0C\",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F\\u8FD9\\u4E2A\\u65B0\\u5BF9\\u8C61\\u3002\",(0,n.jsx)(e.code,{children:\"name\"}),\" \\u5C5E\\u6027\\u5728\\u65B0\\u5BF9\\u8C61\\u4E0A\\u88AB\\u6B63\\u786E\\u8BBE\\u7F6E\\u3002\",(0,n.jsx)(e.code,{children:\"person\"}),\" \\u53D8\\u91CF\\u88AB\\u5206\\u914D\\u4E86 \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u7684\\u65B0\\u5B9E\\u4F8B\\uFF0C\\u5176 name \\u5C5E\\u6027\\u8BBE\\u7F6E\\u4E3A \",(0,n.jsx)(e.code,{children:\"'John'\"}),\"\\u3002\\u5BF9\\u4E8E\\u5907\\u7528\\u5BF9\\u8C61\\u521B\\u5EFA\\uFF0C\",(0,n.jsx)(e.code,{children:\"Object.create(Person.prototype)\"}),\" \\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5BF9\\u8C61\\uFF0C\\u5E76\\u5C06 \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\" \\u4F5C\\u4E3A\\u5176\\u539F\\u578B\\u3002\",(0,n.jsx)(e.code,{children:\"Person.call(person, 'John')\"}),\" \\u521D\\u59CB\\u5316\\u5BF9\\u8C61\\uFF0C\\u8BBE\\u7F6E \",(0,n.jsx)(e.code,{children:\"name\"}),\" \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u540E\\u7EED\\u95EE\\u9898\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\\u548C ES6 \\u7C7B\\u8BED\\u6CD5\\u4E4B\\u95F4\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Object.create\"}),\" \\u7684\\u4E00\\u4E9B\\u5E38\\u89C1\\u7528\\u4F8B\\u662F\\u4EC0\\u4E48\\uFF1F\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Object_prototypes\",children:\"MDN Web Docs: Object prototypes\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.greatfrontend.com/questions/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors?fpr=yangshun\",children:\"Differences between Class and Function Constructors\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://www.greatfrontend.com/questions/quiz/explain-how-this-works-in-javascript?fpr=yangshun\",children:[\"How \",(0,n.jsx)(e.code,{children:\"this\"}),\" keyword works in JavaScript?\"]})}),`\n`]})]})}function J(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(s,r)})):s(r)}var y=J;return b(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var w=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),g=(r,e)=>{for(var c in e)d(r,c,{get:e[c],enumerable:!0})},l=(r,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of P(e))!f.call(r,o)&&o!==c&&d(r,o,{get:()=>e[o],enumerable:!(i=u(e,o))||i.enumerable});return r};var b=(r,e,c)=>(c=r!=null?p(m(r)):{},l(e||!r||!r.__esModule?d(c,\"default\",{value:r,enumerable:!0}):c,r)),j=r=>l(d({},\"__esModule\",{value:!0}),r);var t=w((x,h)=>{h.exports=_jsx_runtime});var y={};g(y,{default:()=>a,frontmatter:()=>J});var n=b(t()),J={title:\"JavaScript \\u4E2D\\uFF1A`function Person(){}`\\u3001`const person = Person()` \\u548C `const person = new Person()` \\u7684\\u533A\\u522B\\uFF1F\"};function s(r){let e={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"function Person(){}\"}),\"\\uFF1AJavaScript \\u4E2D\\u7684\\u51FD\\u6570\\u58F0\\u660E\\u3002\\u5B83\\u53EF\\u4EE5\\u4F5C\\u4E3A\\u5E38\\u89C4\\u51FD\\u6570\\u6216\\u6784\\u9020\\u51FD\\u6570\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"const person = Person()\"}),\"\\uFF1A\\u5C06 \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u4F5C\\u4E3A\\u5E38\\u89C4\\u51FD\\u6570\\u8C03\\u7528\\uFF0C\\u800C\\u4E0D\\u662F\\u6784\\u9020\\u51FD\\u6570\\u3002\\u5982\\u679C \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u65E8\\u5728\\u7528\\u4F5C\\u6784\\u9020\\u51FD\\u6570\\uFF0C\\u8FD9\\u5C06\\u5BFC\\u81F4\\u610F\\u5916\\u884C\\u4E3A\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"const person = new Person()\"}),\"\\uFF1A\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u7684\\u65B0\\u5B9E\\u4F8B\\uFF0C\\u6B63\\u786E\\u5229\\u7528\\u6784\\u9020\\u51FD\\u6570\\u6765\\u521D\\u59CB\\u5316\\u65B0\\u5BF9\\u8C61\\u3002\"]}),`\n`]}),`\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:\"\\u65B9\\u9762\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"function Person(){}\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"const person = Person()\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"const person = new Person()\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u7C7B\\u578B\"}),(0,n.jsx)(e.td,{children:\"\\u51FD\\u6570\\u58F0\\u660E\"}),(0,n.jsx)(e.td,{children:\"\\u51FD\\u6570\\u8C03\\u7528\"}),(0,n.jsx)(e.td,{children:\"\\u6784\\u9020\\u51FD\\u6570\\u8C03\\u7528\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u7528\\u6CD5\"}),(0,n.jsx)(e.td,{children:\"\\u5B9A\\u4E49\\u4E00\\u4E2A\\u51FD\\u6570\"}),(0,n.jsxs)(e.td,{children:[\"\\u5C06 \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u4F5C\\u4E3A\\u5E38\\u89C4\\u51FD\\u6570\\u8C03\\u7528\"]}),(0,n.jsxs)(e.td,{children:[\"\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u7684\\u65B0\\u5B9E\\u4F8B\"]})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u5B9E\\u4F8B\\u521B\\u5EFA\"}),(0,n.jsx)(e.td,{children:\"\\u672A\\u521B\\u5EFA\\u5B9E\\u4F8B\"}),(0,n.jsx)(e.td,{children:\"\\u672A\\u521B\\u5EFA\\u5B9E\\u4F8B\"}),(0,n.jsx)(e.td,{children:\"\\u521B\\u5EFA\\u65B0\\u5B9E\\u4F8B\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u5E38\\u89C1\\u9519\\u8BEF\"}),(0,n.jsx)(e.td,{children:\"N/A\"}),(0,n.jsxs)(e.td,{children:[\"\\u8BEF\\u7528\\u4F5C\\u6784\\u9020\\u51FD\\u6570\\uFF0C\\u5BFC\\u81F4 \",(0,n.jsx)(e.code,{children:\"undefined\"})]}),(0,n.jsx)(e.td,{children:\"\\u65E0\\uFF08\\u6B63\\u786E\\u4F7F\\u7528\\u65F6\\uFF09\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u51FD\\u6570\\u58F0\\u660E\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"function Person(){}\"}),\" \\u662F JavaScript \\u4E2D\\u7684\\u6807\\u51C6\\u51FD\\u6570\\u58F0\\u660E\\u3002\\u5F53\\u7528 PascalCase \\u7F16\\u5199\\u65F6\\uFF0C\\u5B83\\u9075\\u5FAA\\u65E8\\u5728\\u7528\\u4F5C\\u6784\\u9020\\u51FD\\u6570\\u7684\\u51FD\\u6570\\u7684\\u7EA6\\u5B9A\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6B64\\u4EE3\\u7801\\u5B9A\\u4E49\\u4E86\\u4E00\\u4E2A\\u540D\\u4E3A \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u7684\\u51FD\\u6570\\uFF0C\\u8BE5\\u51FD\\u6570\\u63A5\\u53D7\\u4E00\\u4E2A\\u53C2\\u6570 \",(0,n.jsx)(e.code,{children:\"name\"}),\" \\u5E76\\u5C06\\u5176\\u5206\\u914D\\u7ED9\\u4ECE\\u6B64\\u6784\\u9020\\u51FD\\u6570\\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u7684 \",(0,n.jsx)(e.code,{children:\"name\"}),\" \\u5C5E\\u6027\\u3002\\u5F53\\u5728\\u6784\\u9020\\u51FD\\u6570\\u4E2D\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\\u65F6\\uFF0C\\u5B83\\u6307\\u7684\\u662F\\u65B0\\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u51FD\\u6570\\u8C03\\u7528\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"const person = Person()\"}),\" \\u53EA\\u662F\\u8C03\\u7528\\u8BE5\\u51FD\\u6570\\u7684\\u4EE3\\u7801\\u3002\\u5F53\\u60A8\\u5C06 \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u4F5C\\u4E3A\\u5E38\\u89C4\\u51FD\\u6570\\u8C03\\u7528\\uFF08\\u5373\\uFF0C\\u4E0D\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\uFF09\\u65F6\\uFF0C\\u8BE5\\u51FD\\u6570\\u7684\\u884C\\u4E3A\\u4E0D\\u50CF\\u6784\\u9020\\u51FD\\u6570\\u3002\\u76F8\\u53CD\\uFF0C\\u5B83\\u6267\\u884C\\u5176\\u4EE3\\u7801\\uFF0C\\u5982\\u679C\\u672A\\u6307\\u5B9A\\u8FD4\\u56DE\\u503C\\uFF0C\\u5219\\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\uFF0C\\u5E76\\u5C06\\u5176\\u5206\\u914D\\u7ED9\\u4F5C\\u4E3A\\u5B9E\\u4F8B\\u7684\\u53D8\\u91CF\\u3002\\u5982\\u679C\\u8BE5\\u51FD\\u6570\\u65E8\\u5728\\u7528\\u4F5C\\u6784\\u9020\\u51FD\\u6570\\uFF0C\\u5219\\u8FD9\\u6837\\u8C03\\u7528\\u662F\\u4E00\\u4E2A\\u5E38\\u89C1\\u7684\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst person = Person('John'); // Throws error in strict mode\nconsole.log(person); // undefined\nconsole.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u8FD9\\u79CD\\u60C5\\u51B5\\u4E0B\\uFF0C\",(0,n.jsx)(e.code,{children:\"Person('John')\"}),\" \\u4E0D\\u4F1A\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\u3002\",(0,n.jsx)(e.code,{children:\"person\"}),\" \\u53D8\\u91CF\\u88AB\\u8D4B\\u503C\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\uFF0C\\u56E0\\u4E3A \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u51FD\\u6570\\u6CA1\\u6709\\u663E\\u5F0F\\u8FD4\\u56DE\\u503C\\u3002\\u5C1D\\u8BD5\\u8BBF\\u95EE \",(0,n.jsx)(e.code,{children:\"person.name\"}),\" \\u4F1A\\u629B\\u51FA\\u9519\\u8BEF\\uFF0C\\u56E0\\u4E3A \",(0,n.jsx)(e.code,{children:\"person\"}),\" \\u662F \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6784\\u9020\\u51FD\\u6570\\u8C03\\u7528\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"const person = new Person()\"}),\" \\u4F7F\\u7528 new \\u8FD0\\u7B97\\u7B26\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u5BF9\\u8C61\\u7684\\u5B9E\\u4F8B\\uFF0C\\u8BE5\\u5B9E\\u4F8B\\u7EE7\\u627F\\u81EA \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\"\\u3002\\u53E6\\u4E00\\u79CD\\u65B9\\u6CD5\\u662F\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.create\"}),\"\\uFF0C\\u4F8B\\u5982\\uFF1A\",(0,n.jsx)(e.code,{children:\"Object.create(Person.prototype)\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Person.call(person, 'John')\"}),\" \\u521D\\u59CB\\u5316\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst person = new Person('John');\nconsole.log(person); // Person { name: 'John' }\nconsole.log(person.name); // 'John'\n\n// Alternative\nconst person1 = Object.create(Person.prototype);\nPerson.call(person1, 'John');\nconsole.log(person1); // Person { name: 'John' }\nconsole.log(person1.name); // 'John'\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u8FD9\\u79CD\\u60C5\\u51B5\\u4E0B\\uFF0C\",(0,n.jsx)(e.code,{children:\"new Person('John')\"}),\" \\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5BF9\\u8C61\\uFF0C\",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F\\u8FD9\\u4E2A\\u65B0\\u5BF9\\u8C61\\u3002\",(0,n.jsx)(e.code,{children:\"name\"}),\" \\u5C5E\\u6027\\u5728\\u65B0\\u5BF9\\u8C61\\u4E0A\\u88AB\\u6B63\\u786E\\u8BBE\\u7F6E\\u3002\",(0,n.jsx)(e.code,{children:\"person\"}),\" \\u53D8\\u91CF\\u88AB\\u5206\\u914D\\u4E86 \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u7684\\u65B0\\u5B9E\\u4F8B\\uFF0C\\u5176 name \\u5C5E\\u6027\\u8BBE\\u7F6E\\u4E3A \",(0,n.jsx)(e.code,{children:\"'John'\"}),\"\\u3002\\u5BF9\\u4E8E\\u5907\\u7528\\u5BF9\\u8C61\\u521B\\u5EFA\\uFF0C\",(0,n.jsx)(e.code,{children:\"Object.create(Person.prototype)\"}),\" \\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5BF9\\u8C61\\uFF0C\\u5E76\\u5C06 \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\" \\u4F5C\\u4E3A\\u5176\\u539F\\u578B\\u3002\",(0,n.jsx)(e.code,{children:\"Person.call(person, 'John')\"}),\" \\u521D\\u59CB\\u5316\\u5BF9\\u8C61\\uFF0C\\u8BBE\\u7F6E \",(0,n.jsx)(e.code,{children:\"name\"}),\" \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u540E\\u7EED\\u95EE\\u9898\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\\u548C ES6 \\u7C7B\\u8BED\\u6CD5\\u4E4B\\u95F4\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Object.create\"}),\" \\u7684\\u4E00\\u4E9B\\u5E38\\u89C1\\u7528\\u4F8B\\u662F\\u4EC0\\u4E48\\uFF1F\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Object_prototypes\",children:\"MDN Web Docs: Object prototypes\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.greatfrontend.com/questions/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors?fpr=yangshun\",children:\"Differences between Class and Function Constructors\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://www.greatfrontend.com/questions/quiz/explain-how-this-works-in-javascript?fpr=yangshun\",children:[\"How \",(0,n.jsx)(e.code,{children:\"this\"}),\" keyword works in JavaScript?\"]})}),`\n`]})]})}function a(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(s,{...r})}):s(r)}return j(y);})();\n;return Component;"
 }
\ No newline at end of file
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 f9a431089..96d67af1f 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-ajax-in-as-much-detail-as-possible/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var r in e)s(t,r,{get:e[r],enumerable:!0})},i=(t,e,r,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!m.call(t,o)&&o!==r&&s(t,o,{get:()=>e[o],enumerable:!(a=p(e,o))||a.enumerable});return t};var A=(t,e,r)=>(r=t!=null?l(g(t)):{},i(e||!t||!t.__esModule?s(r,\"default\",{value:t,enumerable:!0}):r,t)),b=t=>i(s({},\"__esModule\",{value:!0}),t);var h=f((T,c)=>{c.exports=_jsx_runtime});var X={};w(X,{default:()=>x,frontmatter:()=>y});var n=A(h()),y={title:\"Explain AJAX in as much detail as possible\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",strong:\"strong\",pre:\"pre\",hr:\"hr\",ol:\"ol\",li:\"li\",a:\"a\",ul:\"ul\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"AJAX (Asynchronous JavaScript and XML) facilitates asynchronous communication between the client and server, enabling dynamic updates to web pages without reloading. It uses techniques like \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" or the \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API to send and receive data in the background. In modern web applications, the \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API is more commonly used to implement AJAX.\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"})]})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let xhr = new XMLHttpRequest();\nxhr.onreadystatechange = function () {\n  if (xhr.readyState === XMLHttpRequest.DONE) {\n    if (xhr.status === 200) {\n      console.log(xhr.responseText);\n    } else {\n      console.error('Request failed: ' + xhr.status);\n    }\n  }\n};\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.send();\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"fetch()\"})]})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Fetch error:', error));\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"AJAX (Asynchronous JavaScript and XML)\"}),`\n`,(0,n.jsx)(e.p,{children:\"AJAX (asynchronous JavaScript and XML) is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. Unlike traditional web applications where every user interaction triggers a full page reload, with AJAX, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, AJAX allows for web pages, and by extension web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly use JSON instead of XML, due to the advantages of JSON being native to JavaScript.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Traditionally, AJAX was implemented using the \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" API, but the \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API is more suitable and easier to use for modern web applications.\"]}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" API\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's a basic example of how it can be used:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let xhr = new XMLHttpRequest();\nxhr.onreadystatechange = function () {\n  if (xhr.readyState === XMLHttpRequest.DONE) {\n    if (xhr.status === 200) {\n      console.log(xhr.responseText);\n    } else {\n      console.error('Request failed: ' + xhr.status);\n    }\n  }\n};\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.send();\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Alternatively, the \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API provides a modern, promise-based approach to making AJAX requests. It is more commonly used in modern web applications.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's how you can use it:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Fetch error:', error));\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"How does AJAX work?\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In modern browsers, AJAX is done using the \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API instead of \",(0,n.jsx)(e.code,{children:\"XMLHTTPRequest\"}),\", so we will explain how the \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API works instead:\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Making a request\"}),\": The \",(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\",children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" function\"]}),\" initiates an asynchronous request to fetch a resource from a URL. It takes one mandatory argument \\u2013 the URL of the resource to fetch, and optionally accepts a second argument - an \",(0,n.jsx)(e.code,{children:\"options\"}),\" object that allows configuring the HTTP request with options like the HTTP method, headers, body, etc.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://api.example.com/data', {\n  method: 'GET', // or 'POST', 'PUT', 'DELETE', etc.\n  headers: {\n    'Content-Type': 'application/json',\n  },\n});\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Return a promise\"}),\": The \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" function returns a \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" that resolves to a \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Response\",children:(0,n.jsx)(e.code,{children:\"Response\"})}),\" object representing the response from the server. This \",(0,n.jsx)(e.code,{children:\"Promise needs\"}),\" to be handled using \",(0,n.jsx)(e.code,{children:\".then()\"}),\" or \",(0,n.jsx)(e.code,{children:\"async/await\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Handling the response\"}),\": The \",(0,n.jsx)(e.code,{children:\"Response\"}),\" object provides methods to define how the body content should be handled, such as \",(0,n.jsx)(e.code,{children:\".json()\"}),\" for parsing JSON data, \",(0,n.jsx)(e.code,{children:\".text()\"}),\" for plain text, \",(0,n.jsx)(e.code,{children:\".blob()\"}),\" for binary data, etc.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Asynchronous nature\"}),\" The \",(0,n.jsx)(e.code,{children:\"fetch\"}),\" API is asynchronous, allowing the browser to continue executing other tasks while waiting for the server response. This prevents blocking the main thread and provides a better user experience. The \",(0,n.jsx)(e.code,{children:\"then()\"}),\" and \",(0,n.jsx)(e.code,{children:\"catch()\"}),\" callbacks are put onto the microtask queue when executed as part of the \",(0,n.jsx)(e.a,{href:\"/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue\",children:\"event loop\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Request options\"}),\" The optional second argument to \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" allows configuring various aspects of the request, such as the HTTP method, headers, body, credentials, caching behavior, and more.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Error handling\"}),\" Errors during the request, such as network failures or invalid responses, are caught and propagated through the Promise chain using the \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" method or try/catch blocks with \",(0,n.jsx)(e.code,{children:\"async/await\"}),\".\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API provides a modern, Promise-based approach to making HTTP requests in JavaScript, replacing the older \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" API. It offers a simpler and more flexible way to interact with APIs and fetch resources from servers, while integrating advanced HTTP concepts like CORS and other extensions.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Advantages and disadvantages of AJAX\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"While useful, using AJAX also comes with some considerations. Read more about the \",(0,n.jsx)(e.a,{href:\"/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax\",children:\"advantages and disadvantages of AJAX\"}),\".\"]}),`\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/AJAX\",children:\"AJAX | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\",children:\"Fetch API | MDN \"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest\",children:\"XMLHttpRequest | MDN\"})}),`\n`]})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var x=v;return b(X);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),A=(t,e)=>{for(var r in e)s(t,r,{get:e[r],enumerable:!0})},i=(t,e,r,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of g(e))!f.call(t,o)&&o!==r&&s(t,o,{get:()=>e[o],enumerable:!(a=u(e,o))||a.enumerable});return t};var b=(t,e,r)=>(r=t!=null?p(m(t)):{},i(e||!t||!t.__esModule?s(r,\"default\",{value:t,enumerable:!0}):r,t)),y=t=>i(s({},\"__esModule\",{value:!0}),t);var h=w((P,c)=>{c.exports=_jsx_runtime});var x={};A(x,{default:()=>l,frontmatter:()=>v});var n=b(h()),v={title:\"Explain AJAX in as much detail as possible\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"AJAX (Asynchronous JavaScript and XML) facilitates asynchronous communication between the client and server, enabling dynamic updates to web pages without reloading. It uses techniques like \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" or the \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API to send and receive data in the background. In modern web applications, the \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API is more commonly used to implement AJAX.\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"})]})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let xhr = new XMLHttpRequest();\nxhr.onreadystatechange = function () {\n  if (xhr.readyState === XMLHttpRequest.DONE) {\n    if (xhr.status === 200) {\n      console.log(xhr.responseText);\n    } else {\n      console.error('Request failed: ' + xhr.status);\n    }\n  }\n};\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.send();\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"fetch()\"})]})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Fetch error:', error));\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"AJAX (Asynchronous JavaScript and XML)\"}),`\n`,(0,n.jsx)(e.p,{children:\"AJAX (asynchronous JavaScript and XML) is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. Unlike traditional web applications where every user interaction triggers a full page reload, with AJAX, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, AJAX allows for web pages, and by extension web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly use JSON instead of XML, due to the advantages of JSON being native to JavaScript.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Traditionally, AJAX was implemented using the \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" API, but the \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API is more suitable and easier to use for modern web applications.\"]}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" API\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's a basic example of how it can be used:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let xhr = new XMLHttpRequest();\nxhr.onreadystatechange = function () {\n  if (xhr.readyState === XMLHttpRequest.DONE) {\n    if (xhr.status === 200) {\n      console.log(xhr.responseText);\n    } else {\n      console.error('Request failed: ' + xhr.status);\n    }\n  }\n};\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.send();\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Alternatively, the \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API provides a modern, promise-based approach to making AJAX requests. It is more commonly used in modern web applications.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's how you can use it:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Fetch error:', error));\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"How does AJAX work?\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In modern browsers, AJAX is done using the \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API instead of \",(0,n.jsx)(e.code,{children:\"XMLHTTPRequest\"}),\", so we will explain how the \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API works instead:\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Making a request\"}),\": The \",(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\",children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" function\"]}),\" initiates an asynchronous request to fetch a resource from a URL. It takes one mandatory argument \\u2013 the URL of the resource to fetch, and optionally accepts a second argument - an \",(0,n.jsx)(e.code,{children:\"options\"}),\" object that allows configuring the HTTP request with options like the HTTP method, headers, body, etc.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://api.example.com/data', {\n  method: 'GET', // or 'POST', 'PUT', 'DELETE', etc.\n  headers: {\n    'Content-Type': 'application/json',\n  },\n});\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Return a promise\"}),\": The \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" function returns a \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" that resolves to a \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Response\",children:(0,n.jsx)(e.code,{children:\"Response\"})}),\" object representing the response from the server. This \",(0,n.jsx)(e.code,{children:\"Promise needs\"}),\" to be handled using \",(0,n.jsx)(e.code,{children:\".then()\"}),\" or \",(0,n.jsx)(e.code,{children:\"async/await\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Handling the response\"}),\": The \",(0,n.jsx)(e.code,{children:\"Response\"}),\" object provides methods to define how the body content should be handled, such as \",(0,n.jsx)(e.code,{children:\".json()\"}),\" for parsing JSON data, \",(0,n.jsx)(e.code,{children:\".text()\"}),\" for plain text, \",(0,n.jsx)(e.code,{children:\".blob()\"}),\" for binary data, etc.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Asynchronous nature\"}),\" The \",(0,n.jsx)(e.code,{children:\"fetch\"}),\" API is asynchronous, allowing the browser to continue executing other tasks while waiting for the server response. This prevents blocking the main thread and provides a better user experience. The \",(0,n.jsx)(e.code,{children:\"then()\"}),\" and \",(0,n.jsx)(e.code,{children:\"catch()\"}),\" callbacks are put onto the microtask queue when executed as part of the \",(0,n.jsx)(e.a,{href:\"/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue\",children:\"event loop\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Request options\"}),\" The optional second argument to \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" allows configuring various aspects of the request, such as the HTTP method, headers, body, credentials, caching behavior, and more.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Error handling\"}),\" Errors during the request, such as network failures or invalid responses, are caught and propagated through the Promise chain using the \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" method or try/catch blocks with \",(0,n.jsx)(e.code,{children:\"async/await\"}),\".\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API provides a modern, Promise-based approach to making HTTP requests in JavaScript, replacing the older \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" API. It offers a simpler and more flexible way to interact with APIs and fetch resources from servers, while integrating advanced HTTP concepts like CORS and other extensions.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Advantages and disadvantages of AJAX\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"While useful, using AJAX also comes with some considerations. Read more about the \",(0,n.jsx)(e.a,{href:\"/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax\",children:\"advantages and disadvantages of AJAX\"}),\".\"]}),`\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/AJAX\",children:\"AJAX | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\",children:\"Fetch API | MDN \"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest\",children:\"XMLHttpRequest | MDN\"})}),`\n`]})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return y(x);})();\n;return Component;"
 }
\ No newline at end of file
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 da04cdfd1..c30170ce0 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-ajax-in-as-much-detail-as-possible/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var v=(e,a)=>()=>(a||e((a={exports:{}}).exports,a),a.exports),b=(e,a)=>{for(var o in a)s(e,o,{get:a[o],enumerable:!0})},c=(e,a,o,r)=>{if(a&&typeof a==\"object\"||typeof a==\"function\")for(let t of l(a))!j.call(e,t)&&t!==o&&s(e,t,{get:()=>a[t],enumerable:!(r=u(a,t))||r.enumerable});return e};var g=(e,a,o)=>(o=e!=null?p(x(e)):{},c(a||!e||!e.__esModule?s(o,\"default\",{value:e,enumerable:!0}):o,e)),f=e=>c(s({},\"__esModule\",{value:!0}),e);var d=v((q,i)=>{i.exports=_jsx_runtime});var _={};b(_,{default:()=>w,frontmatter:()=>h});var n=g(d()),h={title:\"Explique o Ajax com o m\\xE1ximo de detalhes poss\\xEDvel.\"};function m(e){let a=Object.assign({p:\"p\",code:\"code\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a.p,{children:\"Ajax (asynchronous JavaScript and XML) \\xE9 um conjunto de t\\xE9cnicas de desenvolvimento web que utilizam diversas tecnologias web no lado do cliente para criar aplica\\xE7\\xF5es web ass\\xEDncronas. Com o Ajax, as aplica\\xE7\\xF5es web podem enviar dados para e receber do servidor de forma ass\\xEDncrona (em segundo plano) sem interferir na exibi\\xE7\\xE3o e comportamento da p\\xE1gina existente. Ao separar a camada de interc\\xE2mbio de dados da camada de apresenta\\xE7\\xE3o, o Ajax permite que p\\xE1ginas web, e por extens\\xE3o, aplica\\xE7\\xF5es web, alterem o conte\\xFAdo dinamicamente sem precisar recarregar toda a p\\xE1gina. Na pr\\xE1tica, implementa\\xE7\\xF5es modernas comumente usam JSON em vez de XML, devido \\xE0s vantagens de o JSON ser nativo ao JavaScript.\"}),`\n`,(0,n.jsxs)(a.p,{children:[\"A API \",(0,n.jsx)(a.code,{children:\"XMLHttpRequest\"}),\" \\xE9 frequentemente usada para a comunica\\xE7\\xE3o ass\\xEDncrona ou hoje em dia, a API fetch.\"]})]})}function A(e={}){let{wrapper:a}=e.components||{};return a?(0,n.jsx)(a,Object.assign({},e,{children:(0,n.jsx)(m,e)})):m(e)}var w=A;return f(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var b=(e,a)=>()=>(a||e((a={exports:{}}).exports,a),a.exports),f=(e,a)=>{for(var n in a)r(e,n,{get:a[n],enumerable:!0})},c=(e,a,n,s)=>{if(a&&typeof a==\"object\"||typeof a==\"function\")for(let t of x(a))!j.call(e,t)&&t!==n&&r(e,t,{get:()=>a[t],enumerable:!(s=l(a,t))||s.enumerable});return e};var g=(e,a,n)=>(n=e!=null?u(v(e)):{},c(a||!e||!e.__esModule?r(n,\"default\",{value:e,enumerable:!0}):n,e)),h=e=>c(r({},\"__esModule\",{value:!0}),e);var d=b((M,i)=>{i.exports=_jsx_runtime});var w={};f(w,{default:()=>p,frontmatter:()=>A});var o=g(d()),A={title:\"Explique o Ajax com o m\\xE1ximo de detalhes poss\\xEDvel.\"};function m(e){let a={code:\"code\",p:\"p\",...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a.p,{children:\"Ajax (asynchronous JavaScript and XML) \\xE9 um conjunto de t\\xE9cnicas de desenvolvimento web que utilizam diversas tecnologias web no lado do cliente para criar aplica\\xE7\\xF5es web ass\\xEDncronas. Com o Ajax, as aplica\\xE7\\xF5es web podem enviar dados para e receber do servidor de forma ass\\xEDncrona (em segundo plano) sem interferir na exibi\\xE7\\xE3o e comportamento da p\\xE1gina existente. Ao separar a camada de interc\\xE2mbio de dados da camada de apresenta\\xE7\\xE3o, o Ajax permite que p\\xE1ginas web, e por extens\\xE3o, aplica\\xE7\\xF5es web, alterem o conte\\xFAdo dinamicamente sem precisar recarregar toda a p\\xE1gina. Na pr\\xE1tica, implementa\\xE7\\xF5es modernas comumente usam JSON em vez de XML, devido \\xE0s vantagens de o JSON ser nativo ao JavaScript.\"}),`\n`,(0,o.jsxs)(a.p,{children:[\"A API \",(0,o.jsx)(a.code,{children:\"XMLHttpRequest\"}),\" \\xE9 frequentemente usada para a comunica\\xE7\\xE3o ass\\xEDncrona ou hoje em dia, a API fetch.\"]})]})}function p(e={}){let{wrapper:a}=e.components||{};return a?(0,o.jsx)(a,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}return h(w);})();\n;return Component;"
 }
\ No newline at end of file
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 165567a65..85e332c2c 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-ajax-in-as-much-detail-as-possible/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),m=(r,e)=>{for(var c in e)t(r,c,{get:e[c],enumerable:!0})},d=(r,e,c,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!f.call(r,o)&&o!==c&&t(r,o,{get:()=>e[o],enumerable:!(h=p(e,o))||h.enumerable});return r};var P=(r,e,c)=>(c=r!=null?a(A(r)):{},d(e||!r||!r.__esModule?t(c,\"default\",{value:r,enumerable:!0}):c,r)),X=r=>d(t({},\"__esModule\",{value:!0}),r);var s=g((L,l)=>{l.exports=_jsx_runtime});var M={};m(M,{default:()=>J,frontmatter:()=>x});var n=P(s()),x={title:\"\\u5C3D\\u53EF\\u80FD\\u8BE6\\u7EC6\\u5730\\u89E3\\u91CA AJAX\"};function i(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",strong:\"strong\",pre:\"pre\",hr:\"hr\",ol:\"ol\",li:\"li\",a:\"a\",ul:\"ul\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"AJAX\\uFF08\\u5F02\\u6B65 JavaScript \\u548C XML\\uFF09\\u4FC3\\u8FDB\\u5BA2\\u6237\\u7AEF\\u548C\\u670D\\u52A1\\u5668\\u4E4B\\u95F4\\u7684\\u5F02\\u6B65\\u901A\\u4FE1\\uFF0C\\u65E0\\u9700\\u91CD\\u65B0\\u52A0\\u8F7D\\u5373\\u53EF\\u5B9E\\u73B0\\u5BF9\\u7F51\\u9875\\u7684\\u52A8\\u6001\\u66F4\\u65B0\\u3002\\u5B83\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API \\u7B49\\u6280\\u672F\\u5728\\u540E\\u53F0\\u53D1\\u9001\\u548C\\u63A5\\u6536\\u6570\\u636E\\u3002\\u5728\\u73B0\\u4EE3 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API \\u66F4\\u5E38\\u7528\\u4E8E\\u5B9E\\u73B0 AJAX\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"})]})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let xhr = new XMLHttpRequest();\nxhr.onreadystatechange = function () {\n  if (xhr.readyState === XMLHttpRequest.DONE) {\n    if (xhr.status === 200) {\n      console.log(xhr.responseText);\n    } else {\n      console.error('Request failed: ' + xhr.status);\n    }\n  }\n};\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.send();\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"fetch()\"})]})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Fetch error:', error));\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"AJAX\\uFF08\\u5F02\\u6B65 JavaScript \\u548C XML\\uFF09\"}),`\n`,(0,n.jsx)(e.p,{children:\"AJAX\\uFF08\\u5F02\\u6B65 JavaScript \\u548C XML\\uFF09\\u662F\\u4E00\\u7EC4 Web \\u5F00\\u53D1\\u6280\\u672F\\uFF0C\\u5728\\u5BA2\\u6237\\u7AEF\\u4F7F\\u7528\\u8BB8\\u591A Web \\u6280\\u672F\\u6765\\u521B\\u5EFA\\u5F02\\u6B65 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\\u4E0E\\u6BCF\\u6B21\\u7528\\u6237\\u4EA4\\u4E92\\u90FD\\u4F1A\\u89E6\\u53D1\\u5B8C\\u5168\\u9875\\u9762\\u91CD\\u65B0\\u52A0\\u8F7D\\u7684\\u4F20\\u7EDF Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E0D\\u540C\\uFF0C\\u4F7F\\u7528 AJAX\\uFF0CWeb \\u5E94\\u7528\\u7A0B\\u5E8F\\u53EF\\u4EE5\\u5F02\\u6B65\\u5730\\uFF08\\u5728\\u540E\\u53F0\\uFF09\\u5411\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u6570\\u636E\\u5E76\\u4ECE\\u670D\\u52A1\\u5668\\u68C0\\u7D22\\u6570\\u636E\\uFF0C\\u800C\\u4E0D\\u4F1A\\u5E72\\u6270\\u73B0\\u6709\\u9875\\u9762\\u7684\\u663E\\u793A\\u548C\\u884C\\u4E3A\\u3002\\u901A\\u8FC7\\u5C06\\u6570\\u636E\\u4EA4\\u6362\\u5C42\\u4E0E\\u8868\\u793A\\u5C42\\u5206\\u79BB\\uFF0CAJAX \\u5141\\u8BB8\\u7F51\\u9875\\uFF08\\u4EE5\\u53CA\\u6269\\u5C55\\u7684 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF09\\u52A8\\u6001\\u66F4\\u6539\\u5185\\u5BB9\\uFF0C\\u800C\\u65E0\\u9700\\u91CD\\u65B0\\u52A0\\u8F7D\\u6574\\u4E2A\\u9875\\u9762\\u3002\\u5B9E\\u9645\\u4E0A\\uFF0C\\u7531\\u4E8E JSON \\u5177\\u6709 JavaScript \\u539F\\u751F\\u7684\\u4F18\\u52BF\\uFF0C\\u73B0\\u4EE3\\u5B9E\\u73B0\\u901A\\u5E38\\u4F7F\\u7528 JSON \\u800C\\u4E0D\\u662F XML\\u3002\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F20\\u7EDF\\u4E0A\\uFF0CAJAX \\u662F\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" API \\u5B9E\\u73B0\\u7684\\uFF0C\\u4F46 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API \\u66F4\\u9002\\u5408\\u73B0\\u4EE3 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u4E5F\\u66F4\\u5BB9\\u6613\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" API\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u5176\\u4F7F\\u7528\\u65B9\\u5F0F\\u7684\\u4E00\\u4E2A\\u57FA\\u672C\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let xhr = new XMLHttpRequest();\nxhr.onreadystatechange = function () {\n  if (xhr.readyState === XMLHttpRequest.DONE) {\n    if (xhr.status === 200) {\n      console.log(xhr.responseText);\n    } else {\n      console.error('Request failed: ' + xhr.status);\n    }\n  }\n};\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.send();\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6216\\u8005\\uFF0C\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u57FA\\u4E8E Promise \\u7684\\u73B0\\u4EE3\\u65B9\\u6CD5\\u6765\\u53D1\\u51FA AJAX \\u8BF7\\u6C42\\u3002\\u5B83\\u5728\\u73B0\\u4EE3 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u66F4\\u5E38\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Fetch error:', error));\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"AJAX \\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u4E2D\\uFF0CAJAX \\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API \\u800C\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"XMLHTTPRequest\"}),\" \\u5B8C\\u6210\\uFF0C\\u56E0\\u6B64\\u6211\\u4EEC\\u5C06\\u89E3\\u91CA \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u53D1\\u51FA\\u8BF7\\u6C42\"}),\"\\uFF1A\",(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\",children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u51FD\\u6570\"]}),\"\\u542F\\u52A8\\u5F02\\u6B65\\u8BF7\\u6C42\\uFF0C\\u4ECE URL \\u83B7\\u53D6\\u8D44\\u6E90\\u3002\\u5B83\\u63A5\\u53D7\\u4E00\\u4E2A\\u5F3A\\u5236\\u6027\\u53C2\\u6570\\u2014\\u2014\\u8981\\u83B7\\u53D6\\u7684\\u8D44\\u6E90\\u7684 URL\\uFF0C\\u5E76\\u53EF\\u4EE5\\u9009\\u62E9\\u63A5\\u53D7\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u2014\\u2014\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"options\"}),\" \\u5BF9\\u8C61\\uFF0C\\u8BE5\\u5BF9\\u8C61\\u5141\\u8BB8\\u4F7F\\u7528 HTTP \\u65B9\\u6CD5\\u3001\\u6807\\u5934\\u3001\\u6B63\\u6587\\u7B49\\u9009\\u9879\\u914D\\u7F6E HTTP \\u8BF7\\u6C42\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://api.example.com/data', {\n  method: 'GET', // or 'POST', 'PUT', 'DELETE', etc.\n  headers: {\n    'Content-Type': 'application/json',\n  },\n});\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u8FD4\\u56DE\\u4E00\\u4E2A promise\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u51FD\\u6570\\u8FD4\\u56DE\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"Promise\"}),\"\\uFF0C\\u8BE5 \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" \\u89E3\\u6790\\u4E3A\\u8868\\u793A\\u6765\\u81EA\\u670D\\u52A1\\u5668\\u7684\\u54CD\\u5E94\\u7684 \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Response\",children:(0,n.jsx)(e.code,{children:\"Response\"})}),\" \\u5BF9\\u8C61\\u3002\\u6B64 \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" \\u9700\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".then()\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"async/await\"}),\" \\u8FDB\\u884C\\u5904\\u7406\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u5904\\u7406\\u54CD\\u5E94\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"Response\"}),\" \\u5BF9\\u8C61\\u63D0\\u4F9B\\u5B9A\\u4E49\\u5982\\u4F55\\u5904\\u7406\\u6B63\\u6587\\u5185\\u5BB9\\u7684\\u65B9\\u6CD5\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\".json()\"}),\" \\u7528\\u4E8E\\u89E3\\u6790 JSON \\u6570\\u636E\\uFF0C\",(0,n.jsx)(e.code,{children:\".text()\"}),\" \\u7528\\u4E8E\\u7EAF\\u6587\\u672C\\uFF0C\",(0,n.jsx)(e.code,{children:\".blob()\"}),\" \\u7528\\u4E8E\\u4E8C\\u8FDB\\u5236\\u6570\\u636E\\u7B49\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u5F02\\u6B65\\u6027\\u8D28\"}),\" \",(0,n.jsx)(e.code,{children:\"fetch\"}),\" API \\u662F\\u5F02\\u6B65\\u7684\\uFF0C\\u5141\\u8BB8\\u6D4F\\u89C8\\u5668\\u5728\\u7B49\\u5F85\\u670D\\u52A1\\u5668\\u54CD\\u5E94\\u65F6\\u7EE7\\u7EED\\u6267\\u884C\\u5176\\u4ED6\\u4EFB\\u52A1\\u3002\\u8FD9\\u53EF\\u4EE5\\u9632\\u6B62\\u963B\\u585E\\u4E3B\\u7EBF\\u7A0B\\u5E76\\u63D0\\u4F9B\\u66F4\\u597D\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\\u5F53\\u4F5C\\u4E3A\",(0,n.jsx)(e.a,{href:\"/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue\",children:\"\\u4E8B\\u4EF6\\u5FAA\\u73AF\"}),\"\\u7684\\u4E00\\u90E8\\u5206\\u6267\\u884C\\u65F6\\uFF0C\",(0,n.jsx)(e.code,{children:\"then()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"catch()\"}),\" \\u56DE\\u8C03\\u88AB\\u653E\\u5165\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u4E2D\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u8BF7\\u6C42\\u9009\\u9879\"}),\" \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u7684\\u53EF\\u9009\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u5141\\u8BB8\\u914D\\u7F6E\\u8BF7\\u6C42\\u7684\\u5404\\u4E2A\\u65B9\\u9762\\uFF0C\\u4F8B\\u5982 HTTP \\u65B9\\u6CD5\\u3001\\u6807\\u5934\\u3001\\u6B63\\u6587\\u3001\\u51ED\\u636E\\u3001\\u7F13\\u5B58\\u884C\\u4E3A\\u7B49\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u9519\\u8BEF\\u5904\\u7406\"}),\" \\u8BF7\\u6C42\\u671F\\u95F4\\u7684\\u9519\\u8BEF\\uFF08\\u4F8B\\u5982\\u7F51\\u7EDC\\u6545\\u969C\\u6216\\u65E0\\u6548\\u54CD\\u5E94\\uFF09\\u901A\\u8FC7\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" \\u65B9\\u6CD5\\u6216\\u5E26\\u6709 \",(0,n.jsx)(e.code,{children:\"async/await\"}),\" \\u7684 try/catch \\u5757\\u5728 Promise \\u94FE\\u4E2D\\u6355\\u83B7\\u5E76\\u4F20\\u64AD\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u57FA\\u4E8E Promise \\u7684\\u73B0\\u4EE3\\u65B9\\u6CD5\\uFF0C\\u7528\\u4E8E\\u5728 JavaScript \\u4E2D\\u53D1\\u51FA HTTP \\u8BF7\\u6C42\\uFF0C\\u53D6\\u4EE3\\u4E86\\u65E7\\u7684 \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" API\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u7B80\\u5355\\u3001\\u66F4\\u7075\\u6D3B\\u7684\\u65B9\\u5F0F\\u6765\\u4E0E API \\u4EA4\\u4E92\\u5E76\\u4ECE\\u670D\\u52A1\\u5668\\u83B7\\u53D6\\u8D44\\u6E90\\uFF0C\\u540C\\u65F6\\u96C6\\u6210\\u4E86 CORS \\u7B49\\u9AD8\\u7EA7 HTTP \\u6982\\u5FF5\\u548C\\u5176\\u4ED6\\u6269\\u5C55\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"AJAX \\u7684\\u4F18\\u7F3A\\u70B9\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u867D\\u7136 AJAX \\u5F88\\u6709\\u7528\\uFF0C\\u4F46\\u4F7F\\u7528\\u5B83\\u4E5F\\u6709\\u4E00\\u4E9B\\u9700\\u8981\\u8003\\u8651\\u7684\\u5730\\u65B9\\u3002\\u9605\\u8BFB\\u66F4\\u591A\\u5173\\u4E8E \",(0,n.jsx)(e.a,{href:\"/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax\",children:\"AJAX \\u7684\\u4F18\\u7F3A\\u70B9\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/AJAX\",children:\"AJAX | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\",children:\"Fetch API | MDN \"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest\",children:\"XMLHttpRequest | MDN\"})}),`\n`]})]})}function j(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(i,r)})):i(r)}var J=j;return X(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),P=(r,e)=>{for(var c in e)t(r,c,{get:e[c],enumerable:!0})},d=(r,e,c,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of A(e))!g.call(r,o)&&o!==c&&t(r,o,{get:()=>e[o],enumerable:!(h=u(e,o))||h.enumerable});return r};var X=(r,e,c)=>(c=r!=null?p(f(r)):{},d(e||!r||!r.__esModule?t(c,\"default\",{value:r,enumerable:!0}):c,r)),x=r=>d(t({},\"__esModule\",{value:!0}),r);var s=m((T,l)=>{l.exports=_jsx_runtime});var j={};P(j,{default:()=>a,frontmatter:()=>J});var n=X(s()),J={title:\"\\u5C3D\\u53EF\\u80FD\\u8BE6\\u7EC6\\u5730\\u89E3\\u91CA AJAX\"};function i(r){let e={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"AJAX\\uFF08\\u5F02\\u6B65 JavaScript \\u548C XML\\uFF09\\u4FC3\\u8FDB\\u5BA2\\u6237\\u7AEF\\u548C\\u670D\\u52A1\\u5668\\u4E4B\\u95F4\\u7684\\u5F02\\u6B65\\u901A\\u4FE1\\uFF0C\\u65E0\\u9700\\u91CD\\u65B0\\u52A0\\u8F7D\\u5373\\u53EF\\u5B9E\\u73B0\\u5BF9\\u7F51\\u9875\\u7684\\u52A8\\u6001\\u66F4\\u65B0\\u3002\\u5B83\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API \\u7B49\\u6280\\u672F\\u5728\\u540E\\u53F0\\u53D1\\u9001\\u548C\\u63A5\\u6536\\u6570\\u636E\\u3002\\u5728\\u73B0\\u4EE3 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API \\u66F4\\u5E38\\u7528\\u4E8E\\u5B9E\\u73B0 AJAX\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"})]})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let xhr = new XMLHttpRequest();\nxhr.onreadystatechange = function () {\n  if (xhr.readyState === XMLHttpRequest.DONE) {\n    if (xhr.status === 200) {\n      console.log(xhr.responseText);\n    } else {\n      console.error('Request failed: ' + xhr.status);\n    }\n  }\n};\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.send();\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"fetch()\"})]})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Fetch error:', error));\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"AJAX\\uFF08\\u5F02\\u6B65 JavaScript \\u548C XML\\uFF09\"}),`\n`,(0,n.jsx)(e.p,{children:\"AJAX\\uFF08\\u5F02\\u6B65 JavaScript \\u548C XML\\uFF09\\u662F\\u4E00\\u7EC4 Web \\u5F00\\u53D1\\u6280\\u672F\\uFF0C\\u5728\\u5BA2\\u6237\\u7AEF\\u4F7F\\u7528\\u8BB8\\u591A Web \\u6280\\u672F\\u6765\\u521B\\u5EFA\\u5F02\\u6B65 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\\u4E0E\\u6BCF\\u6B21\\u7528\\u6237\\u4EA4\\u4E92\\u90FD\\u4F1A\\u89E6\\u53D1\\u5B8C\\u5168\\u9875\\u9762\\u91CD\\u65B0\\u52A0\\u8F7D\\u7684\\u4F20\\u7EDF Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E0D\\u540C\\uFF0C\\u4F7F\\u7528 AJAX\\uFF0CWeb \\u5E94\\u7528\\u7A0B\\u5E8F\\u53EF\\u4EE5\\u5F02\\u6B65\\u5730\\uFF08\\u5728\\u540E\\u53F0\\uFF09\\u5411\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u6570\\u636E\\u5E76\\u4ECE\\u670D\\u52A1\\u5668\\u68C0\\u7D22\\u6570\\u636E\\uFF0C\\u800C\\u4E0D\\u4F1A\\u5E72\\u6270\\u73B0\\u6709\\u9875\\u9762\\u7684\\u663E\\u793A\\u548C\\u884C\\u4E3A\\u3002\\u901A\\u8FC7\\u5C06\\u6570\\u636E\\u4EA4\\u6362\\u5C42\\u4E0E\\u8868\\u793A\\u5C42\\u5206\\u79BB\\uFF0CAJAX \\u5141\\u8BB8\\u7F51\\u9875\\uFF08\\u4EE5\\u53CA\\u6269\\u5C55\\u7684 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF09\\u52A8\\u6001\\u66F4\\u6539\\u5185\\u5BB9\\uFF0C\\u800C\\u65E0\\u9700\\u91CD\\u65B0\\u52A0\\u8F7D\\u6574\\u4E2A\\u9875\\u9762\\u3002\\u5B9E\\u9645\\u4E0A\\uFF0C\\u7531\\u4E8E JSON \\u5177\\u6709 JavaScript \\u539F\\u751F\\u7684\\u4F18\\u52BF\\uFF0C\\u73B0\\u4EE3\\u5B9E\\u73B0\\u901A\\u5E38\\u4F7F\\u7528 JSON \\u800C\\u4E0D\\u662F XML\\u3002\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F20\\u7EDF\\u4E0A\\uFF0CAJAX \\u662F\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" API \\u5B9E\\u73B0\\u7684\\uFF0C\\u4F46 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API \\u66F4\\u9002\\u5408\\u73B0\\u4EE3 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u4E5F\\u66F4\\u5BB9\\u6613\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" API\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u5176\\u4F7F\\u7528\\u65B9\\u5F0F\\u7684\\u4E00\\u4E2A\\u57FA\\u672C\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let xhr = new XMLHttpRequest();\nxhr.onreadystatechange = function () {\n  if (xhr.readyState === XMLHttpRequest.DONE) {\n    if (xhr.status === 200) {\n      console.log(xhr.responseText);\n    } else {\n      console.error('Request failed: ' + xhr.status);\n    }\n  }\n};\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.send();\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6216\\u8005\\uFF0C\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u57FA\\u4E8E Promise \\u7684\\u73B0\\u4EE3\\u65B9\\u6CD5\\u6765\\u53D1\\u51FA AJAX \\u8BF7\\u6C42\\u3002\\u5B83\\u5728\\u73B0\\u4EE3 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u66F4\\u5E38\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Fetch error:', error));\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"AJAX \\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u4E2D\\uFF0CAJAX \\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API \\u800C\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"XMLHTTPRequest\"}),\" \\u5B8C\\u6210\\uFF0C\\u56E0\\u6B64\\u6211\\u4EEC\\u5C06\\u89E3\\u91CA \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u53D1\\u51FA\\u8BF7\\u6C42\"}),\"\\uFF1A\",(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\",children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u51FD\\u6570\"]}),\"\\u542F\\u52A8\\u5F02\\u6B65\\u8BF7\\u6C42\\uFF0C\\u4ECE URL \\u83B7\\u53D6\\u8D44\\u6E90\\u3002\\u5B83\\u63A5\\u53D7\\u4E00\\u4E2A\\u5F3A\\u5236\\u6027\\u53C2\\u6570\\u2014\\u2014\\u8981\\u83B7\\u53D6\\u7684\\u8D44\\u6E90\\u7684 URL\\uFF0C\\u5E76\\u53EF\\u4EE5\\u9009\\u62E9\\u63A5\\u53D7\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u2014\\u2014\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"options\"}),\" \\u5BF9\\u8C61\\uFF0C\\u8BE5\\u5BF9\\u8C61\\u5141\\u8BB8\\u4F7F\\u7528 HTTP \\u65B9\\u6CD5\\u3001\\u6807\\u5934\\u3001\\u6B63\\u6587\\u7B49\\u9009\\u9879\\u914D\\u7F6E HTTP \\u8BF7\\u6C42\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://api.example.com/data', {\n  method: 'GET', // or 'POST', 'PUT', 'DELETE', etc.\n  headers: {\n    'Content-Type': 'application/json',\n  },\n});\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u8FD4\\u56DE\\u4E00\\u4E2A promise\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u51FD\\u6570\\u8FD4\\u56DE\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"Promise\"}),\"\\uFF0C\\u8BE5 \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" \\u89E3\\u6790\\u4E3A\\u8868\\u793A\\u6765\\u81EA\\u670D\\u52A1\\u5668\\u7684\\u54CD\\u5E94\\u7684 \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Response\",children:(0,n.jsx)(e.code,{children:\"Response\"})}),\" \\u5BF9\\u8C61\\u3002\\u6B64 \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" \\u9700\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".then()\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"async/await\"}),\" \\u8FDB\\u884C\\u5904\\u7406\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u5904\\u7406\\u54CD\\u5E94\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"Response\"}),\" \\u5BF9\\u8C61\\u63D0\\u4F9B\\u5B9A\\u4E49\\u5982\\u4F55\\u5904\\u7406\\u6B63\\u6587\\u5185\\u5BB9\\u7684\\u65B9\\u6CD5\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\".json()\"}),\" \\u7528\\u4E8E\\u89E3\\u6790 JSON \\u6570\\u636E\\uFF0C\",(0,n.jsx)(e.code,{children:\".text()\"}),\" \\u7528\\u4E8E\\u7EAF\\u6587\\u672C\\uFF0C\",(0,n.jsx)(e.code,{children:\".blob()\"}),\" \\u7528\\u4E8E\\u4E8C\\u8FDB\\u5236\\u6570\\u636E\\u7B49\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u5F02\\u6B65\\u6027\\u8D28\"}),\" \",(0,n.jsx)(e.code,{children:\"fetch\"}),\" API \\u662F\\u5F02\\u6B65\\u7684\\uFF0C\\u5141\\u8BB8\\u6D4F\\u89C8\\u5668\\u5728\\u7B49\\u5F85\\u670D\\u52A1\\u5668\\u54CD\\u5E94\\u65F6\\u7EE7\\u7EED\\u6267\\u884C\\u5176\\u4ED6\\u4EFB\\u52A1\\u3002\\u8FD9\\u53EF\\u4EE5\\u9632\\u6B62\\u963B\\u585E\\u4E3B\\u7EBF\\u7A0B\\u5E76\\u63D0\\u4F9B\\u66F4\\u597D\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\\u5F53\\u4F5C\\u4E3A\",(0,n.jsx)(e.a,{href:\"/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue\",children:\"\\u4E8B\\u4EF6\\u5FAA\\u73AF\"}),\"\\u7684\\u4E00\\u90E8\\u5206\\u6267\\u884C\\u65F6\\uFF0C\",(0,n.jsx)(e.code,{children:\"then()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"catch()\"}),\" \\u56DE\\u8C03\\u88AB\\u653E\\u5165\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u4E2D\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u8BF7\\u6C42\\u9009\\u9879\"}),\" \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u7684\\u53EF\\u9009\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u5141\\u8BB8\\u914D\\u7F6E\\u8BF7\\u6C42\\u7684\\u5404\\u4E2A\\u65B9\\u9762\\uFF0C\\u4F8B\\u5982 HTTP \\u65B9\\u6CD5\\u3001\\u6807\\u5934\\u3001\\u6B63\\u6587\\u3001\\u51ED\\u636E\\u3001\\u7F13\\u5B58\\u884C\\u4E3A\\u7B49\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u9519\\u8BEF\\u5904\\u7406\"}),\" \\u8BF7\\u6C42\\u671F\\u95F4\\u7684\\u9519\\u8BEF\\uFF08\\u4F8B\\u5982\\u7F51\\u7EDC\\u6545\\u969C\\u6216\\u65E0\\u6548\\u54CD\\u5E94\\uFF09\\u901A\\u8FC7\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" \\u65B9\\u6CD5\\u6216\\u5E26\\u6709 \",(0,n.jsx)(e.code,{children:\"async/await\"}),\" \\u7684 try/catch \\u5757\\u5728 Promise \\u94FE\\u4E2D\\u6355\\u83B7\\u5E76\\u4F20\\u64AD\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u57FA\\u4E8E Promise \\u7684\\u73B0\\u4EE3\\u65B9\\u6CD5\\uFF0C\\u7528\\u4E8E\\u5728 JavaScript \\u4E2D\\u53D1\\u51FA HTTP \\u8BF7\\u6C42\\uFF0C\\u53D6\\u4EE3\\u4E86\\u65E7\\u7684 \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" API\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u7B80\\u5355\\u3001\\u66F4\\u7075\\u6D3B\\u7684\\u65B9\\u5F0F\\u6765\\u4E0E API \\u4EA4\\u4E92\\u5E76\\u4ECE\\u670D\\u52A1\\u5668\\u83B7\\u53D6\\u8D44\\u6E90\\uFF0C\\u540C\\u65F6\\u96C6\\u6210\\u4E86 CORS \\u7B49\\u9AD8\\u7EA7 HTTP \\u6982\\u5FF5\\u548C\\u5176\\u4ED6\\u6269\\u5C55\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"AJAX \\u7684\\u4F18\\u7F3A\\u70B9\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u867D\\u7136 AJAX \\u5F88\\u6709\\u7528\\uFF0C\\u4F46\\u4F7F\\u7528\\u5B83\\u4E5F\\u6709\\u4E00\\u4E9B\\u9700\\u8981\\u8003\\u8651\\u7684\\u5730\\u65B9\\u3002\\u9605\\u8BFB\\u66F4\\u591A\\u5173\\u4E8E \",(0,n.jsx)(e.a,{href:\"/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax\",children:\"AJAX \\u7684\\u4F18\\u7F3A\\u70B9\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/AJAX\",children:\"AJAX | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\",children:\"Fetch API | MDN \"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest\",children:\"XMLHttpRequest | MDN\"})}),`\n`]})]})}function a(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(i,{...r})}):i(r)}return x(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/en-US.json
index 8b16cf12f..6158ba7d0 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var S=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),f=(i,e)=>{for(var o in e)s(i,o,{get:e[o],enumerable:!0})},r=(i,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of g(e))!u.call(i,t)&&t!==o&&s(i,t,{get:()=>e[t],enumerable:!(a=p(e,t))||a.enumerable});return i};var b=(i,e,o)=>(o=i!=null?h(m(i)):{},r(e||!i||!i.__esModule?s(o,\"default\",{value:i,enumerable:!0}):o,i)),w=i=>r(s({},\"__esModule\",{value:!0}),i);var c=S((j,l)=>{l.exports=_jsx_runtime});var _={};f(_,{default:()=>k,frontmatter:()=>x});var n=b(c()),x={title:\"Explain CSS sprites, and how you would implement them on a page or site.\"};function d(i){let e=Object.assign({p:\"p\",code:\"code\",h2:\"h2\",ul:\"ul\",li:\"li\",ol:\"ol\",pre:\"pre\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"CSS sprites combine multiple images into one single larger image file and uses a combination of CSS \",(0,n.jsx)(e.code,{children:\"background-image\"}),\", \",(0,n.jsx)(e.code,{children:\"background-position\"}),\" and \",(0,n.jsx)(e.code,{children:\"background-size\"}),\" to select a specific part of the larger image as the desired image.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"It used to be a commonly-used technique for icons (e.g. Gmail uses sprites for all their images).\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Advantages\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Reduce the number of HTTP requests for multiple images (only one single request is required per spritesheet). But with HTTP2, loading multiple images is no longer much of an issue.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Advance downloading of assets that won't be downloaded until needed, such as images that only appear upon \",(0,n.jsx)(e.code,{children:\":hover\"}),\" pseudo-states. Blinking wouldn't be seen.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"How to implement\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Use a sprite generator that packs multiple images into one and generate the appropriate CSS for it.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Each image would have a corresponding CSS class with \",(0,n.jsx)(e.code,{children:\"background-image\"}),\" and \",(0,n.jsx)(e.code,{children:\"background-position\"}),\" properties defined.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"To use that image, add the corresponding class to your element.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"The generated stylesheet might look something like:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.icon {\n  background-image: url('https://example.com/images/spritesheet.png');\n  width: 24px;\n  height: 24px;\n}\n\n.icon-cart {\n  background-position: 0 0;\n}\n\n.icon-arrow {\n  background-position: -24px 0;\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"And can be used in the HTML as such:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<span class=\"icon icon-cart\"></span>\n\n<span class=\"icon icon-arrow\"></span>\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"References\"}),`\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/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS\",children:\"Implementing image sprites in CSS - CSS: Cascading Style Sheets | MDN\"})}),`\n`]})]})}function C(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(d,i)})):d(i)}var k=C;return w(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var f=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),b=(i,e)=>{for(var o in e)a(i,o,{get:e[o],enumerable:!0})},r=(i,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of m(e))!S.call(i,t)&&t!==o&&a(i,t,{get:()=>e[t],enumerable:!(s=g(e,t))||s.enumerable});return i};var w=(i,e,o)=>(o=i!=null?p(u(i)):{},r(e||!i||!i.__esModule?a(o,\"default\",{value:i,enumerable:!0}):o,i)),x=i=>r(a({},\"__esModule\",{value:!0}),i);var c=f((y,l)=>{l.exports=_jsx_runtime});var k={};b(k,{default:()=>h,frontmatter:()=>C});var n=w(c()),C={title:\"Explain CSS sprites, and how you would implement them on a page or site.\"};function d(i){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"CSS sprites combine multiple images into one single larger image file and uses a combination of CSS \",(0,n.jsx)(e.code,{children:\"background-image\"}),\", \",(0,n.jsx)(e.code,{children:\"background-position\"}),\" and \",(0,n.jsx)(e.code,{children:\"background-size\"}),\" to select a specific part of the larger image as the desired image.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"It used to be a commonly-used technique for icons (e.g. Gmail uses sprites for all their images).\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Advantages\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Reduce the number of HTTP requests for multiple images (only one single request is required per spritesheet). But with HTTP2, loading multiple images is no longer much of an issue.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Advance downloading of assets that won't be downloaded until needed, such as images that only appear upon \",(0,n.jsx)(e.code,{children:\":hover\"}),\" pseudo-states. Blinking wouldn't be seen.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"How to implement\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Use a sprite generator that packs multiple images into one and generate the appropriate CSS for it.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Each image would have a corresponding CSS class with \",(0,n.jsx)(e.code,{children:\"background-image\"}),\" and \",(0,n.jsx)(e.code,{children:\"background-position\"}),\" properties defined.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"To use that image, add the corresponding class to your element.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"The generated stylesheet might look something like:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.icon {\n  background-image: url('https://example.com/images/spritesheet.png');\n  width: 24px;\n  height: 24px;\n}\n\n.icon-cart {\n  background-position: 0 0;\n}\n\n.icon-arrow {\n  background-position: -24px 0;\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"And can be used in the HTML as such:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<span class=\"icon icon-cart\"></span>\n\n<span class=\"icon icon-arrow\"></span>\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"References\"}),`\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/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS\",children:\"Implementing image sprites in CSS - CSS: Cascading Style Sheets | MDN\"})}),`\n`]})]})}function h(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(d,{...i})}):d(i)}return x(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/pt-BR.json b/apps/web/src/__generated__/questions/quiz/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/pt-BR.json
index 0cd5fb05f..2f7ab7fcd 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/pt-BR.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var S=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var o in e)i(n,o,{get:e[o],enumerable:!0})},c=(n,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of u(e))!h.call(n,s)&&s!==o&&i(n,s,{get:()=>e[s],enumerable:!(r=p(e,s))||r.enumerable});return n};var b=(n,e,o)=>(o=n!=null?l(g(n)):{},c(e||!n||!n.__esModule?i(o,\"default\",{value:n,enumerable:!0}):o,n)),C=n=>c(i({},\"__esModule\",{value:!0}),n);var m=S((M,d)=>{d.exports=_jsx_runtime});var j={};x(j,{default:()=>f,frontmatter:()=>v});var a=b(m()),v={title:\"Explique os sprites CSS e como voc\\xEA os implementaria em uma p\\xE1gina ou site.\"};function t(n){let e=Object.assign({p:\"p\",code:\"code\",h2:\"h2\",ul:\"ul\",li:\"li\",ol:\"ol\",pre:\"pre\",a:\"a\"},n.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(e.p,{children:[\"Os sprites CSS combinam v\\xE1rias imagens em um \\xFAnico arquivo de imagem maior e usam uma combina\\xE7\\xE3o de CSS \",(0,a.jsx)(e.code,{children:\"background-image\"}),\", \",(0,a.jsx)(e.code,{children:\"background-position\"}),\" e \",(0,a.jsx)(e.code,{children:\"background-size\"}),\" para selecionar uma parte espec\\xEDfica da imagem maior como a imagem desejada.\"]}),`\n`,(0,a.jsx)(e.p,{children:\"Essa t\\xE9cnica costumava ser comumente usada para \\xEDcones (por exemplo, o Gmail usa sprites para todas as suas imagens).\"}),`\n`,(0,a.jsx)(e.h2,{children:\"Vantagens\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:\"Reduz o n\\xFAmero de solicita\\xE7\\xF5es HTTP para v\\xE1rias imagens (apenas um \\xFAnico pedido \\xE9 necess\\xE1rio por spritesheet). Mas com HTTP2, carregar v\\xE1rias imagens j\\xE1 n\\xE3o \\xE9 muito problema.\"}),`\n`,(0,a.jsxs)(e.li,{children:[\"Download avan\\xE7ado de ativos que n\\xE3o ser\\xE3o baixados at\\xE9 ser necess\\xE1rio, como imagens que aparecem apenas nos pseudo-estados \",(0,a.jsx)(e.code,{children:\":hover\"}),\". O piscar n\\xE3o seria visto.\"]}),`\n`]}),`\n`,(0,a.jsx)(e.h2,{children:\"Como implementar\"}),`\n`,(0,a.jsxs)(e.ol,{children:[`\n`,(0,a.jsx)(e.li,{children:\"Use um gerador de sprites que agrupa v\\xE1rias imagens em uma s\\xF3 e gere o CSS apropriado para isso.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Cada imagem teria uma classe CSS correspondente com as propriedades 'background-image' e 'background-position' definidas.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Para usar essa imagem, adicione a classe correspondente ao seu elemento.\"}),`\n`]}),`\n`,(0,a.jsx)(e.p,{children:\"A folha de estilos gerada pode parecer algo como:\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-css\",children:`.icon {\n  background-image: url('https://example.com/images/spritesheet.png');\n  width: 24px;\n  height: 24px;\n}\n\n.icon-cart {\n  background-position: 0 0;\n}\n\n.icon-arrow {\n  background-position: -24px 0;\n}\n`})}),`\n`,(0,a.jsx)(e.p,{children:\"E pode ser usado no HTML como tal:\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-html\",children:`<span class=\"icon icon-cart\"></span>\n\n<span class=\"icon icon-arrow\"></span>\n`})}),`\n`,(0,a.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:(0,a.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS\",children:\"Implementando sprites de imagem em CSS - CSS: Cascading Style Sheets | MDN\"})}),`\n`]})]})}function _(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,Object.assign({},n,{children:(0,a.jsx)(t,n)})):t(n)}var f=_;return C(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),C=(n,e)=>{for(var o in e)s(n,o,{get:e[o],enumerable:!0})},c=(n,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of g(e))!S.call(n,i)&&i!==o&&s(n,i,{get:()=>e[i],enumerable:!(r=u(e,i))||r.enumerable});return n};var b=(n,e,o)=>(o=n!=null?p(h(n)):{},c(e||!n||!n.__esModule?s(o,\"default\",{value:n,enumerable:!0}):o,n)),v=n=>c(s({},\"__esModule\",{value:!0}),n);var m=x((j,d)=>{d.exports=_jsx_runtime});var f={};C(f,{default:()=>l,frontmatter:()=>_});var a=b(m()),_={title:\"Explique os sprites CSS e como voc\\xEA os implementaria em uma p\\xE1gina ou site.\"};function t(n){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(e.p,{children:[\"Os sprites CSS combinam v\\xE1rias imagens em um \\xFAnico arquivo de imagem maior e usam uma combina\\xE7\\xE3o de CSS \",(0,a.jsx)(e.code,{children:\"background-image\"}),\", \",(0,a.jsx)(e.code,{children:\"background-position\"}),\" e \",(0,a.jsx)(e.code,{children:\"background-size\"}),\" para selecionar uma parte espec\\xEDfica da imagem maior como a imagem desejada.\"]}),`\n`,(0,a.jsx)(e.p,{children:\"Essa t\\xE9cnica costumava ser comumente usada para \\xEDcones (por exemplo, o Gmail usa sprites para todas as suas imagens).\"}),`\n`,(0,a.jsx)(e.h2,{children:\"Vantagens\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:\"Reduz o n\\xFAmero de solicita\\xE7\\xF5es HTTP para v\\xE1rias imagens (apenas um \\xFAnico pedido \\xE9 necess\\xE1rio por spritesheet). Mas com HTTP2, carregar v\\xE1rias imagens j\\xE1 n\\xE3o \\xE9 muito problema.\"}),`\n`,(0,a.jsxs)(e.li,{children:[\"Download avan\\xE7ado de ativos que n\\xE3o ser\\xE3o baixados at\\xE9 ser necess\\xE1rio, como imagens que aparecem apenas nos pseudo-estados \",(0,a.jsx)(e.code,{children:\":hover\"}),\". O piscar n\\xE3o seria visto.\"]}),`\n`]}),`\n`,(0,a.jsx)(e.h2,{children:\"Como implementar\"}),`\n`,(0,a.jsxs)(e.ol,{children:[`\n`,(0,a.jsx)(e.li,{children:\"Use um gerador de sprites que agrupa v\\xE1rias imagens em uma s\\xF3 e gere o CSS apropriado para isso.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Cada imagem teria uma classe CSS correspondente com as propriedades 'background-image' e 'background-position' definidas.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Para usar essa imagem, adicione a classe correspondente ao seu elemento.\"}),`\n`]}),`\n`,(0,a.jsx)(e.p,{children:\"A folha de estilos gerada pode parecer algo como:\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-css\",children:`.icon {\n  background-image: url('https://example.com/images/spritesheet.png');\n  width: 24px;\n  height: 24px;\n}\n\n.icon-cart {\n  background-position: 0 0;\n}\n\n.icon-arrow {\n  background-position: -24px 0;\n}\n`})}),`\n`,(0,a.jsx)(e.p,{children:\"E pode ser usado no HTML como tal:\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-html\",children:`<span class=\"icon icon-cart\"></span>\n\n<span class=\"icon icon-arrow\"></span>\n`})}),`\n`,(0,a.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:(0,a.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS\",children:\"Implementando sprites de imagem em CSS - CSS: Cascading Style Sheets | MDN\"})}),`\n`]})]})}function l(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(t,{...n})}):t(n)}return v(f);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/zh-CN.json
index c4cbf7a13..20eb90ba3 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var S=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),x=(c,n)=>{for(var i in n)o(c,i,{get:n[i],enumerable:!0})},d=(c,n,i,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of g(n))!u.call(c,r)&&r!==i&&o(c,r,{get:()=>n[r],enumerable:!(l=p(n,r))||l.enumerable});return c};var C=(c,n,i)=>(i=c!=null?h(m(c)):{},d(n||!c||!c.__esModule?o(i,\"default\",{value:c,enumerable:!0}):i,c)),_=c=>d(o({},\"__esModule\",{value:!0}),c);var t=S((T,a)=>{a.exports=_jsx_runtime});var f={};x(f,{default:()=>j,frontmatter:()=>b});var e=C(t()),b={title:\"\\u89E3\\u91CA CSS \\u7CBE\\u7075\\uFF0C\\u4EE5\\u53CA\\u5982\\u4F55\\u5728\\u9875\\u9762\\u6216\\u7F51\\u7AD9\\u4E0A\\u5B9E\\u73B0\\u5B83\\u4EEC\\u3002\"};function s(c){let n=Object.assign({p:\"p\",code:\"code\",h2:\"h2\",ul:\"ul\",li:\"li\",ol:\"ol\",pre:\"pre\",a:\"a\"},c.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.p,{children:[\"CSS \\u7CBE\\u7075\\u5C06\\u591A\\u4E2A\\u56FE\\u50CF\\u7EC4\\u5408\\u6210\\u4E00\\u4E2A\\u66F4\\u5927\\u7684\\u56FE\\u50CF\\u6587\\u4EF6\\uFF0C\\u5E76\\u4F7F\\u7528 CSS \",(0,e.jsx)(n.code,{children:\"background-image\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"background-position\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"background-size\"}),\" \\u7684\\u7EC4\\u5408\\u6765\\u9009\\u62E9\\u66F4\\u5927\\u56FE\\u50CF\\u7684\\u7279\\u5B9A\\u90E8\\u5206\\u4F5C\\u4E3A\\u6240\\u9700\\u7684\\u56FE\\u50CF\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5B83\\u66FE\\u7ECF\\u662F\\u4E00\\u79CD\\u5E38\\u7528\\u7684\\u56FE\\u6807\\u6280\\u672F\\uFF08\\u4F8B\\u5982 Gmail \\u5BF9\\u5176\\u6240\\u6709\\u56FE\\u50CF\\u90FD\\u4F7F\\u7528\\u7CBE\\u7075\\u56FE\\uFF09\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u51CF\\u5C11\\u591A\\u4E2A\\u56FE\\u50CF\\u7684 HTTP \\u8BF7\\u6C42\\u6570\\u91CF\\uFF08\\u6BCF\\u4E2A\\u7CBE\\u7075\\u8868\\u53EA\\u9700\\u8981\\u4E00\\u4E2A\\u8BF7\\u6C42\\uFF09\\u3002\\u4F46\\u4F7F\\u7528 HTTP2\\uFF0C\\u52A0\\u8F7D\\u591A\\u4E2A\\u56FE\\u50CF\\u4E0D\\u518D\\u662F\\u4E00\\u4E2A\\u5927\\u95EE\\u9898\\u3002\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u9884\\u5148\\u4E0B\\u8F7D\\u5728\\u9700\\u8981\\u4E4B\\u524D\\u4E0D\\u4F1A\\u4E0B\\u8F7D\\u7684\\u8D44\\u4EA7\\uFF0C\\u4F8B\\u5982\\u4EC5\\u5728 \",(0,e.jsx)(n.code,{children:\":hover\"}),\" \\u4F2A\\u72B6\\u6001\\u4E0B\\u51FA\\u73B0\\u7684\\u56FE\\u50CF\\u3002\\u4E0D\\u4F1A\\u770B\\u5230\\u95EA\\u70C1\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5982\\u4F55\\u5B9E\\u73B0\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u7528\\u7CBE\\u7075\\u56FE\\u751F\\u6210\\u5668\\u5C06\\u591A\\u4E2A\\u56FE\\u50CF\\u6253\\u5305\\u6210\\u4E00\\u4E2A\\uFF0C\\u5E76\\u4E3A\\u5176\\u751F\\u6210\\u76F8\\u5E94\\u7684 CSS\\u3002\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u6BCF\\u4E2A\\u56FE\\u50CF\\u90FD\\u5C06\\u6709\\u4E00\\u4E2A\\u5BF9\\u5E94\\u7684 CSS \\u7C7B\\uFF0C\\u5176\\u4E2D\\u5B9A\\u4E49\\u4E86 \",(0,e.jsx)(n.code,{children:\"background-image\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"background-position\"}),\" \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,e.jsx)(n.li,{children:\"\\u8981\\u4F7F\\u7528\\u8BE5\\u56FE\\u50CF\\uFF0C\\u8BF7\\u5C06\\u76F8\\u5E94\\u7684\\u7C7B\\u6DFB\\u52A0\\u5230\\u60A8\\u7684\\u5143\\u7D20\\u4E2D\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u751F\\u6210\\u7684\\u6837\\u5F0F\\u8868\\u53EF\\u80FD\\u5982\\u4E0B\\u6240\\u793A\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-css\",children:`.icon {\n  background-image: url('https://example.com/images/spritesheet.png');\n  width: 24px;\n  height: 24px;\n}\n\n.icon-cart {\n  background-position: 0 0;\n}\n\n.icon-arrow {\n  background-position: -24px 0;\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5E76\\u4E14\\u53EF\\u4EE5\\u5728 HTML \\u4E2D\\u8FD9\\u6837\\u4F7F\\u7528\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-html\",children:`<span class=\"icon icon-cart\"></span>\n\n<span class=\"icon icon-arrow\"></span>\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u53C2\\u8003\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS\",children:\"\\u5728 CSS \\u4E2D\\u5B9E\\u73B0\\u56FE\\u50CF\\u7CBE\\u7075 - CSS\\uFF1A\\u5C42\\u53E0\\u6837\\u5F0F\\u8868 | MDN\"})}),`\n`]})]})}function k(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,Object.assign({},c,{children:(0,e.jsx)(s,c)})):s(c)}var j=k;return _(f);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var x=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),C=(c,n)=>{for(var i in n)o(c,i,{get:n[i],enumerable:!0})},d=(c,n,i,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of m(n))!S.call(c,r)&&r!==i&&o(c,r,{get:()=>n[r],enumerable:!(l=g(n,r))||l.enumerable});return c};var _=(c,n,i)=>(i=c!=null?p(u(c)):{},d(n||!c||!c.__esModule?o(i,\"default\",{value:c,enumerable:!0}):i,c)),b=c=>d(o({},\"__esModule\",{value:!0}),c);var t=x((M,a)=>{a.exports=_jsx_runtime});var f={};C(f,{default:()=>s,frontmatter:()=>k});var e=_(t()),k={title:\"\\u89E3\\u91CA CSS \\u7CBE\\u7075\\uFF0C\\u4EE5\\u53CA\\u5982\\u4F55\\u5728\\u9875\\u9762\\u6216\\u7F51\\u7AD9\\u4E0A\\u5B9E\\u73B0\\u5B83\\u4EEC\\u3002\"};function h(c){let n={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.p,{children:[\"CSS \\u7CBE\\u7075\\u5C06\\u591A\\u4E2A\\u56FE\\u50CF\\u7EC4\\u5408\\u6210\\u4E00\\u4E2A\\u66F4\\u5927\\u7684\\u56FE\\u50CF\\u6587\\u4EF6\\uFF0C\\u5E76\\u4F7F\\u7528 CSS \",(0,e.jsx)(n.code,{children:\"background-image\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"background-position\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"background-size\"}),\" \\u7684\\u7EC4\\u5408\\u6765\\u9009\\u62E9\\u66F4\\u5927\\u56FE\\u50CF\\u7684\\u7279\\u5B9A\\u90E8\\u5206\\u4F5C\\u4E3A\\u6240\\u9700\\u7684\\u56FE\\u50CF\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5B83\\u66FE\\u7ECF\\u662F\\u4E00\\u79CD\\u5E38\\u7528\\u7684\\u56FE\\u6807\\u6280\\u672F\\uFF08\\u4F8B\\u5982 Gmail \\u5BF9\\u5176\\u6240\\u6709\\u56FE\\u50CF\\u90FD\\u4F7F\\u7528\\u7CBE\\u7075\\u56FE\\uFF09\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u51CF\\u5C11\\u591A\\u4E2A\\u56FE\\u50CF\\u7684 HTTP \\u8BF7\\u6C42\\u6570\\u91CF\\uFF08\\u6BCF\\u4E2A\\u7CBE\\u7075\\u8868\\u53EA\\u9700\\u8981\\u4E00\\u4E2A\\u8BF7\\u6C42\\uFF09\\u3002\\u4F46\\u4F7F\\u7528 HTTP2\\uFF0C\\u52A0\\u8F7D\\u591A\\u4E2A\\u56FE\\u50CF\\u4E0D\\u518D\\u662F\\u4E00\\u4E2A\\u5927\\u95EE\\u9898\\u3002\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u9884\\u5148\\u4E0B\\u8F7D\\u5728\\u9700\\u8981\\u4E4B\\u524D\\u4E0D\\u4F1A\\u4E0B\\u8F7D\\u7684\\u8D44\\u4EA7\\uFF0C\\u4F8B\\u5982\\u4EC5\\u5728 \",(0,e.jsx)(n.code,{children:\":hover\"}),\" \\u4F2A\\u72B6\\u6001\\u4E0B\\u51FA\\u73B0\\u7684\\u56FE\\u50CF\\u3002\\u4E0D\\u4F1A\\u770B\\u5230\\u95EA\\u70C1\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5982\\u4F55\\u5B9E\\u73B0\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u7528\\u7CBE\\u7075\\u56FE\\u751F\\u6210\\u5668\\u5C06\\u591A\\u4E2A\\u56FE\\u50CF\\u6253\\u5305\\u6210\\u4E00\\u4E2A\\uFF0C\\u5E76\\u4E3A\\u5176\\u751F\\u6210\\u76F8\\u5E94\\u7684 CSS\\u3002\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u6BCF\\u4E2A\\u56FE\\u50CF\\u90FD\\u5C06\\u6709\\u4E00\\u4E2A\\u5BF9\\u5E94\\u7684 CSS \\u7C7B\\uFF0C\\u5176\\u4E2D\\u5B9A\\u4E49\\u4E86 \",(0,e.jsx)(n.code,{children:\"background-image\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"background-position\"}),\" \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,e.jsx)(n.li,{children:\"\\u8981\\u4F7F\\u7528\\u8BE5\\u56FE\\u50CF\\uFF0C\\u8BF7\\u5C06\\u76F8\\u5E94\\u7684\\u7C7B\\u6DFB\\u52A0\\u5230\\u60A8\\u7684\\u5143\\u7D20\\u4E2D\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u751F\\u6210\\u7684\\u6837\\u5F0F\\u8868\\u53EF\\u80FD\\u5982\\u4E0B\\u6240\\u793A\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-css\",children:`.icon {\n  background-image: url('https://example.com/images/spritesheet.png');\n  width: 24px;\n  height: 24px;\n}\n\n.icon-cart {\n  background-position: 0 0;\n}\n\n.icon-arrow {\n  background-position: -24px 0;\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5E76\\u4E14\\u53EF\\u4EE5\\u5728 HTML \\u4E2D\\u8FD9\\u6837\\u4F7F\\u7528\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-html\",children:`<span class=\"icon icon-cart\"></span>\n\n<span class=\"icon icon-arrow\"></span>\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u53C2\\u8003\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS\",children:\"\\u5728 CSS \\u4E2D\\u5B9E\\u73B0\\u56FE\\u50CF\\u7CBE\\u7075 - CSS\\uFF1A\\u5C42\\u53E0\\u6837\\u5F0F\\u8868 | MDN\"})}),`\n`]})]})}function s(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,{...c,children:(0,e.jsx)(h,{...c})}):h(c)}return b(f);})();\n;return Component;"
 }
\ No newline at end of file
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 dafe357f3..e5ec447ec 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
@@ -30,5 +30,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-event-delegation/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var p=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},o=(t,e,i,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of u(e))!v.call(t,l)&&l!==i&&a(t,l,{get:()=>e[l],enumerable:!(r=m(e,l))||r.enumerable});return t};var f=(t,e,i)=>(i=t!=null?s(g(t)):{},o(e||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),y=t=>o(a({},\"__esModule\",{value:!0}),t);var d=p((D,c)=>{c.exports=_jsx_runtime});var x={};b(x,{default:()=>k,frontmatter:()=>w});var n=f(d()),w={title:\"Explain event delegation in JavaScript\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\",strong:\"strong\",code:\"code\",hr:\"hr\",ol:\"ol\",pre:\"pre\",h3:\"h3\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Event delegation is a technique in JavaScript where a single event listener is attached to a parent element instead of attaching event listeners to multiple child elements. When an event occurs on a child element, the event bubbles up the DOM tree, and the parent element's event listener handles the event based on the target element.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Event delegation provides the following benefits:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Improved performance\"}),\": Attaching a single event listener is more efficient than attaching multiple event listeners to individual elements, especially for large or dynamic lists. This reduces memory usage and improves overall performance.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Simplified event handling\"}),\": With event delegation, you only need to write the event handling logic once in the parent element's event listener. This makes the code more maintainable and easier to update.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Dynamic element support\"}),\": Event delegation automatically handles events for dynamically added or removed elements within the parent element. There's no need to manually attach or remove event listeners when the DOM structure changes\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"However, do note that:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"It is important to identify the target element that triggered the event.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Not all events can be delegated because they are not bubbled. Non-bubbling events include: \",(0,n.jsx)(e.code,{children:\"focus\"}),\", \",(0,n.jsx)(e.code,{children:\"blur\"}),\", \",(0,n.jsx)(e.code,{children:\"scroll\"}),\", \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\", \",(0,n.jsx)(e.code,{children:\"mouseleave\"}),\", \",(0,n.jsx)(e.code,{children:\"resize\"}),\", etc.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Event delegation\"}),`\n`,(0,n.jsx)(e.p,{children:\"Event delegation is a design pattern in JavaScript used to efficiently manage and handle events on multiple child elements by attaching a single event listener to a common ancestor element. This pattern is particularly valuable in scenarios where you have a large number of similar elements, such as list items, and want to optimize event handling.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"How event delegation works\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Attach a listener to a common ancestor\"}),\": Instead of attaching individual event listeners to each child element, you attach a single event listener to a common ancestor element higher in the DOM hierarchy.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Event bubbling\"}),\": When an event occurs on a child element, it bubbles up through the DOM tree to the common ancestor element. During this propagation, the event listener on the common ancestor can intercept and handle the event.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Determine the target\"}),\": Within the event listener, you can inspect the event object to identify the actual target of the event (the child element that triggered the event). You can use properties like \",(0,n.jsx)(e.code,{children:\"event.target\"}),\" or \",(0,n.jsx)(e.code,{children:\"event.currentTarget\"}),\" to determine which specific child element was interacted with.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Perform action based on target\"}),\": Based on the target element, you can perform the desired action or execute code specific to that element. This allows you to handle events for multiple child elements with a single event listener.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Benefits of event delegation\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Efficiency\"}),\": Event delegation reduces the number of event listeners, improving memory usage and performance, especially when dealing with a large number of elements.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Dynamic elements\"}),\": It works seamlessly with dynamically added or removed child elements, as the common ancestor continues to listen for events on them.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here's a simple example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <ul id=\"item-list\">\n//   <li>Item 1</li>\n//   <li>Item 2</li>\n//   <li>Item 3</li>\n// </ul>\n\nconst itemList = document.getElementById('item-list');\n\nitemList.addEventListener('click', (event) => {\n  if (event.target.tagName === 'LI') {\n    console.log(\\`Clicked on \\${event.target.textContent}\\`);\n  }\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, a single click event listener is attached to the \",(0,n.jsx)(e.code,{children:\"<ul>\"}),\" element. When a click event occurs on an \",(0,n.jsx)(e.code,{children:\"<li>\"}),\" element, the event bubbles up to the \",(0,n.jsx)(e.code,{children:\"<ul>\"}),\" element, where the event listener checks the target's tag name to identify whether a list item was clicked. It's crucial to check the identity of the \",(0,n.jsx)(e.code,{children:\"event.target\"}),\" as there can be other kinds of elements in the DOM tree.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Use cases\"}),`\n`,(0,n.jsx)(e.p,{children:\"Event delegation is commonly used in scenarios like:\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Handling dynamic content in single-page applications\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"button-container\">\n//   <button>Button 1</button>\n//   <button>Button 2</button>\n// </div>\n// <button id=\"add-button\">Add Button</button>\n\nconst buttonContainer = document.getElementById('button-container');\nconst addButton = document.getElementById('add-button');\n\nbuttonContainer.addEventListener('click', (event) => {\n  if (event.target.tagName === 'BUTTON') {\n    console.log(\\`Clicked on \\${event.target.textContent}\\`);\n  }\n});\n\naddButton.addEventListener('click', () => {\n  const newButton = document.createElement('button');\n  newButton.textContent = \\`Button \\${buttonContainer.children.length + 1}\\`;\n  buttonContainer.appendChild(newButton);\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, a \",(0,n.jsx)(e.code,{children:\"click\"}),\" event listener is attached to the \",(0,n.jsx)(e.code,{children:\"<div>\"}),\" container. When a new button is added dynamically and clicked, the event listener on the container handles the click event.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Simplifying code by avoiding the need to attach and remove event listeners for elements that change\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <form id=\"user-form\">\n//   <input type=\"text\" name=\"username\" placeholder=\"Username\">\n//   <input type=\"email\" name=\"email\" placeholder=\"Email\">\n//   <input type=\"password\" name=\"password\" placeholder=\"Password\">\n// </form>\n\nconst userForm = document.getElementById('user-form');\n\nuserForm.addEventListener('input', (event) => {\n  const { name, value } = event.target;\n  console.log(\\`Changed \\${name}: \\${value}\\`);\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, a single input event listener is attached to the form element. It can respond to input changes for all child input elements, simplifying the code by eliminating the need for individual listeners on each \",(0,n.jsx)(e.code,{children:\"<input>\"}),\" element.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Pitfalls\"}),`\n`,(0,n.jsx)(e.p,{children:\"Do note that event delegation come with certain pitfalls:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Incorrect target handling:\"}),\" Ensure correct identification of the event target to avoid unintended actions.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Not all events can be delegated/bubbled\"}),\": Not all events can be delegated because they are not bubbled. Non-bubbling events include: \",(0,n.jsx)(e.code,{children:\"focus\"}),\", \",(0,n.jsx)(e.code,{children:\"blur\"}),\", \",(0,n.jsx)(e.code,{children:\"scroll\"}),\", \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\", \",(0,n.jsx)(e.code,{children:\"mouseleave\"}),\", \",(0,n.jsx)(e.code,{children:\"resize\"}),\", etc.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Event overhead:\"}),\" While event delegation is generally more efficient, there needs to be complex logic written within the root event listener to identify the triggering element and respond appropriately. This can introduce overhead and can be potentially more complex if not managed properly.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Event delegation in JavaScript frameworks\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.a,{href:\"https://react.dev/\",children:\"React\"}),\", event handlers are attached to the React root's DOM container into which the React tree is rendered. Even though \",(0,n.jsx)(e.code,{children:\"onClick\"}),\" is added to child elements, the actual event listeners are attached to the root DOM node, leveraging event delegation to optimize event handling and improve performance.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"When an event occurs, React's event listener captures it and determines which React component rendered the target element based on its internal bookkeeping. React then dispatches the event to the appropriate component's event handler by calling the handler function with a synthetic event object. This synthetic event object wraps the native browser event, providing a consistent interface across different browsers and capturing information about the event.\"}),`\n`,(0,n.jsx)(e.p,{children:\"By using event delegation, React avoids attaching individual event handlers to each component instance, which would create significant overhead, especially for large component trees. Instead, React leverages the browser's native event bubbling mechanism to capture events at the root and distribute them to the appropriate components.\"}),`\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/Learn/JavaScript/Building_blocks/Events#event_delegation\",children:\"MDN Web Docs on Event Delegation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/event-delegation\",children:\"JavaScript.info - Event Delegation\"})}),`\n`]})]})}function E(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var k=E;return y(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},o=(t,e,i,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of g(e))!p.call(t,l)&&l!==i&&a(t,l,{get:()=>e[l],enumerable:!(r=u(e,l))||r.enumerable});return t};var y=(t,e,i)=>(i=t!=null?m(v(t)):{},o(e||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),w=t=>o(a({},\"__esModule\",{value:!0}),t);var d=b((I,c)=>{c.exports=_jsx_runtime});var k={};f(k,{default:()=>s,frontmatter:()=>E});var n=y(d()),E={title:\"Explain event delegation in JavaScript\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Event delegation is a technique in JavaScript where a single event listener is attached to a parent element instead of attaching event listeners to multiple child elements. When an event occurs on a child element, the event bubbles up the DOM tree, and the parent element's event listener handles the event based on the target element.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Event delegation provides the following benefits:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Improved performance\"}),\": Attaching a single event listener is more efficient than attaching multiple event listeners to individual elements, especially for large or dynamic lists. This reduces memory usage and improves overall performance.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Simplified event handling\"}),\": With event delegation, you only need to write the event handling logic once in the parent element's event listener. This makes the code more maintainable and easier to update.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Dynamic element support\"}),\": Event delegation automatically handles events for dynamically added or removed elements within the parent element. There's no need to manually attach or remove event listeners when the DOM structure changes\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"However, do note that:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"It is important to identify the target element that triggered the event.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Not all events can be delegated because they are not bubbled. Non-bubbling events include: \",(0,n.jsx)(e.code,{children:\"focus\"}),\", \",(0,n.jsx)(e.code,{children:\"blur\"}),\", \",(0,n.jsx)(e.code,{children:\"scroll\"}),\", \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\", \",(0,n.jsx)(e.code,{children:\"mouseleave\"}),\", \",(0,n.jsx)(e.code,{children:\"resize\"}),\", etc.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Event delegation\"}),`\n`,(0,n.jsx)(e.p,{children:\"Event delegation is a design pattern in JavaScript used to efficiently manage and handle events on multiple child elements by attaching a single event listener to a common ancestor element. This pattern is particularly valuable in scenarios where you have a large number of similar elements, such as list items, and want to optimize event handling.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"How event delegation works\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Attach a listener to a common ancestor\"}),\": Instead of attaching individual event listeners to each child element, you attach a single event listener to a common ancestor element higher in the DOM hierarchy.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Event bubbling\"}),\": When an event occurs on a child element, it bubbles up through the DOM tree to the common ancestor element. During this propagation, the event listener on the common ancestor can intercept and handle the event.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Determine the target\"}),\": Within the event listener, you can inspect the event object to identify the actual target of the event (the child element that triggered the event). You can use properties like \",(0,n.jsx)(e.code,{children:\"event.target\"}),\" or \",(0,n.jsx)(e.code,{children:\"event.currentTarget\"}),\" to determine which specific child element was interacted with.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Perform action based on target\"}),\": Based on the target element, you can perform the desired action or execute code specific to that element. This allows you to handle events for multiple child elements with a single event listener.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Benefits of event delegation\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Efficiency\"}),\": Event delegation reduces the number of event listeners, improving memory usage and performance, especially when dealing with a large number of elements.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Dynamic elements\"}),\": It works seamlessly with dynamically added or removed child elements, as the common ancestor continues to listen for events on them.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here's a simple example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <ul id=\"item-list\">\n//   <li>Item 1</li>\n//   <li>Item 2</li>\n//   <li>Item 3</li>\n// </ul>\n\nconst itemList = document.getElementById('item-list');\n\nitemList.addEventListener('click', (event) => {\n  if (event.target.tagName === 'LI') {\n    console.log(\\`Clicked on \\${event.target.textContent}\\`);\n  }\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, a single click event listener is attached to the \",(0,n.jsx)(e.code,{children:\"<ul>\"}),\" element. When a click event occurs on an \",(0,n.jsx)(e.code,{children:\"<li>\"}),\" element, the event bubbles up to the \",(0,n.jsx)(e.code,{children:\"<ul>\"}),\" element, where the event listener checks the target's tag name to identify whether a list item was clicked. It's crucial to check the identity of the \",(0,n.jsx)(e.code,{children:\"event.target\"}),\" as there can be other kinds of elements in the DOM tree.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Use cases\"}),`\n`,(0,n.jsx)(e.p,{children:\"Event delegation is commonly used in scenarios like:\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Handling dynamic content in single-page applications\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"button-container\">\n//   <button>Button 1</button>\n//   <button>Button 2</button>\n// </div>\n// <button id=\"add-button\">Add Button</button>\n\nconst buttonContainer = document.getElementById('button-container');\nconst addButton = document.getElementById('add-button');\n\nbuttonContainer.addEventListener('click', (event) => {\n  if (event.target.tagName === 'BUTTON') {\n    console.log(\\`Clicked on \\${event.target.textContent}\\`);\n  }\n});\n\naddButton.addEventListener('click', () => {\n  const newButton = document.createElement('button');\n  newButton.textContent = \\`Button \\${buttonContainer.children.length + 1}\\`;\n  buttonContainer.appendChild(newButton);\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, a \",(0,n.jsx)(e.code,{children:\"click\"}),\" event listener is attached to the \",(0,n.jsx)(e.code,{children:\"<div>\"}),\" container. When a new button is added dynamically and clicked, the event listener on the container handles the click event.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Simplifying code by avoiding the need to attach and remove event listeners for elements that change\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <form id=\"user-form\">\n//   <input type=\"text\" name=\"username\" placeholder=\"Username\">\n//   <input type=\"email\" name=\"email\" placeholder=\"Email\">\n//   <input type=\"password\" name=\"password\" placeholder=\"Password\">\n// </form>\n\nconst userForm = document.getElementById('user-form');\n\nuserForm.addEventListener('input', (event) => {\n  const { name, value } = event.target;\n  console.log(\\`Changed \\${name}: \\${value}\\`);\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, a single input event listener is attached to the form element. It can respond to input changes for all child input elements, simplifying the code by eliminating the need for individual listeners on each \",(0,n.jsx)(e.code,{children:\"<input>\"}),\" element.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Pitfalls\"}),`\n`,(0,n.jsx)(e.p,{children:\"Do note that event delegation come with certain pitfalls:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Incorrect target handling:\"}),\" Ensure correct identification of the event target to avoid unintended actions.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Not all events can be delegated/bubbled\"}),\": Not all events can be delegated because they are not bubbled. Non-bubbling events include: \",(0,n.jsx)(e.code,{children:\"focus\"}),\", \",(0,n.jsx)(e.code,{children:\"blur\"}),\", \",(0,n.jsx)(e.code,{children:\"scroll\"}),\", \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\", \",(0,n.jsx)(e.code,{children:\"mouseleave\"}),\", \",(0,n.jsx)(e.code,{children:\"resize\"}),\", etc.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Event overhead:\"}),\" While event delegation is generally more efficient, there needs to be complex logic written within the root event listener to identify the triggering element and respond appropriately. This can introduce overhead and can be potentially more complex if not managed properly.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Event delegation in JavaScript frameworks\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.a,{href:\"https://react.dev/\",children:\"React\"}),\", event handlers are attached to the React root's DOM container into which the React tree is rendered. Even though \",(0,n.jsx)(e.code,{children:\"onClick\"}),\" is added to child elements, the actual event listeners are attached to the root DOM node, leveraging event delegation to optimize event handling and improve performance.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"When an event occurs, React's event listener captures it and determines which React component rendered the target element based on its internal bookkeeping. React then dispatches the event to the appropriate component's event handler by calling the handler function with a synthetic event object. This synthetic event object wraps the native browser event, providing a consistent interface across different browsers and capturing information about the event.\"}),`\n`,(0,n.jsx)(e.p,{children:\"By using event delegation, React avoids attaching individual event handlers to each component instance, which would create significant overhead, especially for large component trees. Instead, React leverages the browser's native event bubbling mechanism to capture events at the root and distribute them to the appropriate components.\"}),`\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/Learn/JavaScript/Building_blocks/Events#event_delegation\",children:\"MDN Web Docs on Event Delegation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/event-delegation\",children:\"JavaScript.info - Event Delegation\"})}),`\n`]})]})}function s(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return w(k);})();\n;return Component;"
 }
\ No newline at end of file
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 3acc862d5..34e21dd11 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
@@ -30,5 +30,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-event-delegation/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),f=(o,e)=>{for(var i in e)a(o,i,{get:e[i],enumerable:!0})},l=(o,e,i,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of v(e))!p.call(o,t)&&t!==i&&a(o,t,{get:()=>e[t],enumerable:!(d=u(e,t))||d.enumerable});return o};var x=(o,e,i)=>(i=o!=null?m(h(o)):{},l(e||!o||!o.__esModule?a(i,\"default\",{value:o,enumerable:!0}):i,o)),E=o=>l(a({},\"__esModule\",{value:!0}),o);var r=g((M,s)=>{s.exports=_jsx_runtime});var D={};f(D,{default:()=>q,frontmatter:()=>b});var n=x(r()),b={title:\"Explique delega\\xE7\\xE3o do evento\"};function c(o){let e=Object.assign({p:\"p\",h2:\"h2\",ol:\"ol\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",ul:\"ul\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"A delega\\xE7\\xE3o de eventos \\xE9 um conceito fundamental no desenvolvimento web que permite gerenciar e tratar eventos eficientemente em v\\xE1rios elementos filhos, anexando um \\xFAnico ouvinte de eventos a um elemento ancestral comum. Em vez de atribuir ouvintes de eventos a cada elemento filho individualmente, voc\\xEA delega a responsabilidade de lidar com eventos ao elemento pai ou ancestral, que intercepta os eventos \\xE0 medida que eles sobem na \\xE1rvore DOM e identifica o alvo do evento.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Benef\\xEDcios da delega\\xE7\\xE3o de eventos\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Efici\\xEAncia\"}),\": A delega\\xE7\\xE3o de eventos reduz significativamente o n\\xFAmero de ouvintes de eventos em seu c\\xF3digo, tornando-o mais eficiente em termos de mem\\xF3ria e melhorando o desempenho, especialmente ao lidar com um grande n\\xFAmero de elementos semelhantes. Isso resulta em um c\\xF3digo mais limpo e de f\\xE1cil manuten\\xE7\\xE3o.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Elementos Din\\xE2micos\"}),\": A delega\\xE7\\xE3o de eventos funciona perfeitamente com elementos gerados ou removidos dinamicamente no DOM. Voc\\xEA n\\xE3o precisa anexar ou remover ouvintes de eventos toda vez que novos elementos s\\xE3o adicionados ou removidos. O ouvinte de eventos delegado os trata automaticamente.\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Exemplo\"}),`\n`,(0,n.jsx)(e.p,{children:\"Vamos ilustrar a delega\\xE7\\xE3o de eventos com um exemplo moderno usando a sintaxe do ES6:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <ul id=\"item-list\">\n//   <li>Item 1</li>\n//   <li>Item 2</li>\n//   <li>Item 3</li>\n// </ul>\n\nconst itemList = document.getElementById('item-list');\n\nitemList.addEventListener('click', (event) => {\n  if (event.target.tagName === 'LI') {\n    console.log(\\`Clicou em \\${event.target.textContent}\\`);\n  }\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Neste exemplo, um \\xFAnico ouvinte de eventos de clique \\xE9 anexado ao elemento \",(0,n.jsx)(e.code,{children:\"<ul>\"}),\". Quando ocorre um evento de clique em um elemento \",(0,n.jsx)(e.code,{children:\"<li>\"}),\", o evento se propaga at\\xE9 o elemento \",(0,n.jsx)(e.code,{children:\"<ul>\"}),\", onde o ouvinte de eventos verifica o nome da tag do alvo para identificar qual item da lista foi clicado.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Casos de uso\"}),`\n`,(0,n.jsx)(e.p,{children:\"A delega\\xE7\\xE3o de eventos \\xE9 comumente usada em v\\xE1rias situa\\xE7\\xF5es, incluindo:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Gerenciamento de listas, menus ou tabelas com muitos itens ou linhas.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Manipula\\xE7\\xE3o de conte\\xFAdo din\\xE2mico em aplicativos de p\\xE1gina \\xFAnica.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Simplifica\\xE7\\xE3o do c\\xF3digo, evitando a necessidade de anexar e remover ouvintes de eventos para elementos que mudam.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Recursos\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Building_blocks/Events#event_delegation\",children:\"MDN Web Docs sobre Delega\\xE7\\xE3o de Eventos\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/event-delegation\",children:\"JavaScript.info - Delega\\xE7\\xE3o de Eventos\"})}),`\n`]})]})}function j(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(c,o)})):c(o)}var q=j;return E(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var i in e)a(o,i,{get:e[i],enumerable:!0})},l=(o,e,i,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of h(e))!g.call(o,t)&&t!==i&&a(o,t,{get:()=>e[t],enumerable:!(d=v(e,t))||d.enumerable});return o};var E=(o,e,i)=>(i=o!=null?u(p(o)):{},l(e||!o||!o.__esModule?a(i,\"default\",{value:o,enumerable:!0}):i,o)),q=o=>l(a({},\"__esModule\",{value:!0}),o);var r=f((M,s)=>{s.exports=_jsx_runtime});var _={};x(_,{default:()=>m,frontmatter:()=>D});var n=E(r()),D={title:\"Explique delega\\xE7\\xE3o do evento\"};function c(o){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"A delega\\xE7\\xE3o de eventos \\xE9 um conceito fundamental no desenvolvimento web que permite gerenciar e tratar eventos eficientemente em v\\xE1rios elementos filhos, anexando um \\xFAnico ouvinte de eventos a um elemento ancestral comum. Em vez de atribuir ouvintes de eventos a cada elemento filho individualmente, voc\\xEA delega a responsabilidade de lidar com eventos ao elemento pai ou ancestral, que intercepta os eventos \\xE0 medida que eles sobem na \\xE1rvore DOM e identifica o alvo do evento.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Benef\\xEDcios da delega\\xE7\\xE3o de eventos\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Efici\\xEAncia\"}),\": A delega\\xE7\\xE3o de eventos reduz significativamente o n\\xFAmero de ouvintes de eventos em seu c\\xF3digo, tornando-o mais eficiente em termos de mem\\xF3ria e melhorando o desempenho, especialmente ao lidar com um grande n\\xFAmero de elementos semelhantes. Isso resulta em um c\\xF3digo mais limpo e de f\\xE1cil manuten\\xE7\\xE3o.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Elementos Din\\xE2micos\"}),\": A delega\\xE7\\xE3o de eventos funciona perfeitamente com elementos gerados ou removidos dinamicamente no DOM. Voc\\xEA n\\xE3o precisa anexar ou remover ouvintes de eventos toda vez que novos elementos s\\xE3o adicionados ou removidos. O ouvinte de eventos delegado os trata automaticamente.\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Exemplo\"}),`\n`,(0,n.jsx)(e.p,{children:\"Vamos ilustrar a delega\\xE7\\xE3o de eventos com um exemplo moderno usando a sintaxe do ES6:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <ul id=\"item-list\">\n//   <li>Item 1</li>\n//   <li>Item 2</li>\n//   <li>Item 3</li>\n// </ul>\n\nconst itemList = document.getElementById('item-list');\n\nitemList.addEventListener('click', (event) => {\n  if (event.target.tagName === 'LI') {\n    console.log(\\`Clicou em \\${event.target.textContent}\\`);\n  }\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Neste exemplo, um \\xFAnico ouvinte de eventos de clique \\xE9 anexado ao elemento \",(0,n.jsx)(e.code,{children:\"<ul>\"}),\". Quando ocorre um evento de clique em um elemento \",(0,n.jsx)(e.code,{children:\"<li>\"}),\", o evento se propaga at\\xE9 o elemento \",(0,n.jsx)(e.code,{children:\"<ul>\"}),\", onde o ouvinte de eventos verifica o nome da tag do alvo para identificar qual item da lista foi clicado.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Casos de uso\"}),`\n`,(0,n.jsx)(e.p,{children:\"A delega\\xE7\\xE3o de eventos \\xE9 comumente usada em v\\xE1rias situa\\xE7\\xF5es, incluindo:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Gerenciamento de listas, menus ou tabelas com muitos itens ou linhas.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Manipula\\xE7\\xE3o de conte\\xFAdo din\\xE2mico em aplicativos de p\\xE1gina \\xFAnica.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Simplifica\\xE7\\xE3o do c\\xF3digo, evitando a necessidade de anexar e remover ouvintes de eventos para elementos que mudam.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Recursos\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Building_blocks/Events#event_delegation\",children:\"MDN Web Docs sobre Delega\\xE7\\xE3o de Eventos\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/event-delegation\",children:\"JavaScript.info - Delega\\xE7\\xE3o de Eventos\"})}),`\n`]})]})}function m(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(c,{...o})}):c(o)}return q(_);})();\n;return Component;"
 }
\ No newline at end of file
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 2b3477ae0..30acffde2 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
@@ -30,5 +30,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-event-delegation/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var v=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),b=(t,n)=>{for(var c in n)r(t,c,{get:n[c],enumerable:!0})},d=(t,n,c,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of m(n))!p.call(t,l)&&l!==c&&r(t,l,{get:()=>n[l],enumerable:!(i=u(n,l))||i.enumerable});return t};var f=(t,n,c)=>(c=t!=null?s(g(t)):{},d(n||!t||!t.__esModule?r(c,\"default\",{value:t,enumerable:!0}):c,t)),B=t=>d(r({},\"__esModule\",{value:!0}),t);var h=v((L,o)=>{o.exports=_jsx_runtime});var x={};b(x,{default:()=>M,frontmatter:()=>C});var e=f(h()),C={title:\"\\u89E3\\u91CA JavaScript \\u4E2D\\u7684\\u4E8B\\u4EF6\\u59D4\\u6258\"};function a(t){let n=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\",strong:\"strong\",code:\"code\",hr:\"hr\",ol:\"ol\",pre:\"pre\",h3:\"h3\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E8B\\u4EF6\\u59D4\\u6258\\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u5B83\\u5C06\\u5355\\u4E2A\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u7236\\u5143\\u7D20\\uFF0C\\u800C\\u4E0D\\u662F\\u5C06\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u591A\\u4E2A\\u5B50\\u5143\\u7D20\\u3002\\u5F53\\u5B50\\u5143\\u7D20\\u4E0A\\u53D1\\u751F\\u4E8B\\u4EF6\\u65F6\\uFF0C\\u8BE5\\u4E8B\\u4EF6\\u4F1A\\u5192\\u6CE1\\u5230 DOM \\u6811\\u4E2D\\uFF0C\\u7236\\u5143\\u7D20\\u7684\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u4F1A\\u6839\\u636E\\u76EE\\u6807\\u5143\\u7D20\\u5904\\u7406\\u8BE5\\u4E8B\\u4EF6\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E8B\\u4EF6\\u59D4\\u6258\\u5177\\u6709\\u4EE5\\u4E0B\\u4F18\\u70B9\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u63D0\\u9AD8\\u6027\\u80FD\"}),\"\\uFF1A\\u9644\\u52A0\\u5355\\u4E2A\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u6BD4\\u5C06\\u591A\\u4E2A\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u5404\\u4E2A\\u5143\\u7D20\\u66F4\\u6709\\u6548\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u5904\\u7406\\u5927\\u578B\\u6216\\u52A8\\u6001\\u5217\\u8868\\u65F6\\u3002\\u8FD9\\u51CF\\u5C11\\u4E86\\u5185\\u5B58\\u4F7F\\u7528\\u5E76\\u63D0\\u9AD8\\u4E86\\u6574\\u4F53\\u6027\\u80FD\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7B80\\u5316\\u4E8B\\u4EF6\\u5904\\u7406\"}),\"\\uFF1A\\u4F7F\\u7528\\u4E8B\\u4EF6\\u59D4\\u6258\\uFF0C\\u60A8\\u53EA\\u9700\\u8981\\u5728\\u7236\\u5143\\u7D20\\u7684\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u4E2D\\u7F16\\u5199\\u4E00\\u6B21\\u4E8B\\u4EF6\\u5904\\u7406\\u903B\\u8F91\\u3002\\u8FD9\\u4F7F\\u5F97\\u4EE3\\u7801\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u548C\\u66F4\\u65B0\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u52A8\\u6001\\u5143\\u7D20\\u652F\\u6301\"}),\"\\uFF1A\\u4E8B\\u4EF6\\u59D4\\u6258\\u4F1A\\u81EA\\u52A8\\u5904\\u7406\\u7236\\u5143\\u7D20\\u4E2D\\u52A8\\u6001\\u6DFB\\u52A0\\u6216\\u5220\\u9664\\u5143\\u7D20\\u7684\\u4E8B\\u4EF6\\u3002\\u5F53 DOM \\u7ED3\\u6784\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0C\\u65E0\\u9700\\u624B\\u52A8\\u9644\\u52A0\\u6216\\u5220\\u9664\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F46\\u662F\\uFF0C\\u8BF7\\u6CE8\\u610F\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u786E\\u5B9A\\u89E6\\u53D1\\u4E8B\\u4EF6\\u7684\\u76EE\\u6807\\u5143\\u7D20\\u975E\\u5E38\\u91CD\\u8981\\u3002\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5E76\\u975E\\u6240\\u6709\\u4E8B\\u4EF6\\u90FD\\u53EF\\u4EE5\\u88AB\\u59D4\\u6258\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u5192\\u6CE1\\u3002\\u4E0D\\u5192\\u6CE1\\u7684\\u4E8B\\u4EF6\\u5305\\u62EC\\uFF1A\",(0,e.jsx)(n.code,{children:\"focus\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"blur\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"scroll\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"mouseenter\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"mouseleave\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"resize\"}),\" \\u7B49\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4E8B\\u4EF6\\u59D4\\u6258\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E8B\\u4EF6\\u59D4\\u6258\\u662F JavaScript \\u4E2D\\u7528\\u4E8E\\u901A\\u8FC7\\u5C06\\u5355\\u4E2A\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u516C\\u5171\\u7956\\u5148\\u5143\\u7D20\\u6765\\u6709\\u6548\\u7BA1\\u7406\\u548C\\u5904\\u7406\\u591A\\u4E2A\\u5B50\\u5143\\u7D20\\u4E0A\\u7684\\u4E8B\\u4EF6\\u7684\\u8BBE\\u8BA1\\u6A21\\u5F0F\\u3002\\u6B64\\u6A21\\u5F0F\\u5728\\u60A8\\u6709\\u5927\\u91CF\\u76F8\\u4F3C\\u5143\\u7D20\\uFF08\\u4F8B\\u5982\\u5217\\u8868\\u9879\\uFF09\\u5E76\\u5E0C\\u671B\\u4F18\\u5316\\u4E8B\\u4EF6\\u5904\\u7406\\u7684\\u573A\\u666F\\u4E2D\\u7279\\u522B\\u6709\\u4EF7\\u503C\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4E8B\\u4EF6\\u59D4\\u6258\\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C06\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u516C\\u5171\\u7956\\u5148\"}),\"\\uFF1A\\u60A8\\u5C06\\u5355\\u4E2A\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230 DOM \\u5C42\\u6B21\\u7ED3\\u6784\\u4E2D\\u8F83\\u9AD8\\u7684\\u516C\\u5171\\u7956\\u5148\\u5143\\u7D20\\uFF0C\\u800C\\u4E0D\\u662F\\u5C06\\u5404\\u4E2A\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u6BCF\\u4E2A\\u5B50\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E8B\\u4EF6\\u5192\\u6CE1\"}),\"\\uFF1A\\u5F53\\u5B50\\u5143\\u7D20\\u4E0A\\u53D1\\u751F\\u4E8B\\u4EF6\\u65F6\\uFF0C\\u5B83\\u4F1A\\u901A\\u8FC7 DOM \\u6811\\u5192\\u6CE1\\u5230\\u516C\\u5171\\u7956\\u5148\\u5143\\u7D20\\u3002\\u5728\\u6B64\\u4F20\\u64AD\\u8FC7\\u7A0B\\u4E2D\\uFF0C\\u516C\\u5171\\u7956\\u5148\\u4E0A\\u7684\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u53EF\\u4EE5\\u62E6\\u622A\\u548C\\u5904\\u7406\\u8BE5\\u4E8B\\u4EF6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u786E\\u5B9A\\u76EE\\u6807\"}),\"\\uFF1A\\u5728\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u68C0\\u67E5\\u4E8B\\u4EF6\\u5BF9\\u8C61\\u4EE5\\u8BC6\\u522B\\u4E8B\\u4EF6\\u7684\\u5B9E\\u9645\\u76EE\\u6807\\uFF08\\u89E6\\u53D1\\u4E8B\\u4EF6\\u7684\\u5B50\\u5143\\u7D20\\uFF09\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"event.target\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"event.currentTarget\"}),\" \\u7B49\\u5C5E\\u6027\\u6765\\u786E\\u5B9A\\u4E0E\\u54EA\\u4E2A\\u7279\\u5B9A\\u7684\\u5B50\\u5143\\u7D20\\u8FDB\\u884C\\u4E86\\u4EA4\\u4E92\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6839\\u636E\\u76EE\\u6807\\u6267\\u884C\\u64CD\\u4F5C\"}),\"\\uFF1A\\u6839\\u636E\\u76EE\\u6807\\u5143\\u7D20\\uFF0C\\u60A8\\u53EF\\u4EE5\\u6267\\u884C\\u6240\\u9700\\u7684\\u64CD\\u4F5C\\u6216\\u6267\\u884C\\u7279\\u5B9A\\u4E8E\\u8BE5\\u5143\\u7D20\\u7684\\u4EE3\\u7801\\u3002\\u8FD9\\u5141\\u8BB8\\u60A8\\u4F7F\\u7528\\u5355\\u4E2A\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u5904\\u7406\\u591A\\u4E2A\\u5B50\\u5143\\u7D20\\u7684\\u4E8B\\u4EF6\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4E8B\\u4EF6\\u59D4\\u6258\\u7684\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6548\\u7387\"}),\"\\uFF1A\\u4E8B\\u4EF6\\u59D4\\u6258\\u51CF\\u5C11\\u4E86\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u7684\\u6570\\u91CF\\uFF0C\\u4ECE\\u800C\\u63D0\\u9AD8\\u4E86\\u5185\\u5B58\\u4F7F\\u7528\\u7387\\u548C\\u6027\\u80FD\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u5904\\u7406\\u5927\\u91CF\\u5143\\u7D20\\u65F6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u52A8\\u6001\\u5143\\u7D20\"}),\"\\uFF1A\\u5B83\\u53EF\\u4EE5\\u4E0E\\u52A8\\u6001\\u6DFB\\u52A0\\u6216\\u5220\\u9664\\u7684\\u5B50\\u5143\\u7D20\\u65E0\\u7F1D\\u534F\\u4F5C\\uFF0C\\u56E0\\u4E3A\\u516C\\u5171\\u7956\\u5148\\u4F1A\\u7EE7\\u7EED\\u4FA6\\u542C\\u5B83\\u4EEC\\u7684\\u4E8B\\u4EF6\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F8B\\u5B50\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u4F8B\\u5B50\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML:\n// <ul id=\"item-list\">\n//   <li>Item 1</li>\n//   <li>Item 2</li>\n//   <li>Item 3</li>\n// </ul>\n\nconst itemList = document.getElementById('item-list');\n\nitemList.addEventListener('click', (event) => {\n  if (event.target.tagName === 'LI') {\n    console.log(\\`Clicked on \\${event.target.textContent}\\`);\n  }\n});\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u5355\\u4E2A click \\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230 \",(0,e.jsx)(n.code,{children:\"<ul>\"}),\" \\u5143\\u7D20\\u3002\\u5F53 \",(0,e.jsx)(n.code,{children:\"<li>\"}),\" \\u5143\\u7D20\\u4E0A\\u53D1\\u751F click \\u4E8B\\u4EF6\\u65F6\\uFF0C\\u8BE5\\u4E8B\\u4EF6\\u4F1A\\u5192\\u6CE1\\u5230 \",(0,e.jsx)(n.code,{children:\"<ul>\"}),\" \\u5143\\u7D20\\uFF0C\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u4F1A\\u68C0\\u67E5\\u76EE\\u6807\\u5143\\u7D20\\u7684\\u6807\\u7B7E\\u540D\\u79F0\\u4EE5\\u786E\\u5B9A\\u662F\\u5426\\u5355\\u51FB\\u4E86\\u5217\\u8868\\u9879\\u3002\\u68C0\\u67E5 \",(0,e.jsx)(n.code,{children:\"event.target\"}),\" \\u7684\\u8EAB\\u4EFD\\u81F3\\u5173\\u91CD\\u8981\\uFF0C\\u56E0\\u4E3A DOM \\u6811\\u4E2D\\u53EF\\u80FD\\u5B58\\u5728\\u5176\\u4ED6\\u7C7B\\u578B\\u7684\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E8B\\u4EF6\\u59D4\\u6258\\u901A\\u5E38\\u7528\\u4E8E\\u4EE5\\u4E0B\\u573A\\u666F\\uFF1A\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5904\\u7406\\u5355\\u9875\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7684\\u52A8\\u6001\\u5185\\u5BB9\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"button-container\">\n//   <button>Button 1</button>\n//   <button>Button 2</button>\n// </div>\n// <button id=\"add-button\">Add Button</button>\n\nconst buttonContainer = document.getElementById('button-container');\nconst addButton = document.getElementById('add-button');\n\nbuttonContainer.addEventListener('click', (event) => {\n  if (event.target.tagName === 'BUTTON') {\n    console.log(\\`Clicked on \\${event.target.textContent}\\`);\n  }\n});\n\naddButton.addEventListener('click', () => {\n  const newButton = document.createElement('button');\n  newButton.textContent = \\`Button \\${buttonContainer.children.length + 1}\\`;\n  buttonContainer.appendChild(newButton);\n});\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"click\"}),\" \\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u9644\\u52A0\\u5230 \",(0,e.jsx)(n.code,{children:\"<div>\"}),\" \\u5BB9\\u5668\\u3002 \\u5F53\\u52A8\\u6001\\u6DFB\\u52A0\\u5E76\\u5355\\u51FB\\u4E00\\u4E2A\\u65B0\\u6309\\u94AE\\u65F6\\uFF0C\\u5BB9\\u5668\\u4E0A\\u7684\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u4F1A\\u5904\\u7406 click \\u4E8B\\u4EF6\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u901A\\u8FC7\\u907F\\u514D\\u4E3A\\u66F4\\u6539\\u7684\\u5143\\u7D20\\u9644\\u52A0\\u548C\\u5220\\u9664\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u6765\\u7B80\\u5316\\u4EE3\\u7801\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML:\n// <form id=\"user-form\">\n//   <input type=\"text\" name=\"username\" placeholder=\"Username\">\n//   <input type=\"email\" name=\"email\" placeholder=\"Email\">\n//   <input type=\"password\" name=\"password\" placeholder=\"Password\">\n// </form>\n\nconst userForm = document.getElementById('user-form');\n\nuserForm.addEventListener('input', (event) => {\n  const { name, value } = event.target;\n  console.log(\\`Changed \\${name}: \\${value}\\`);\n});\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u5355\\u4E2A\\u8F93\\u5165\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u8868\\u5355\\u5143\\u7D20\\u3002\\u5B83\\u53EF\\u4EE5\\u54CD\\u5E94\\u6240\\u6709\\u5B50\\u8F93\\u5165\\u5143\\u7D20\\u7684\\u8F93\\u5165\\u66F4\\u6539\\uFF0C\\u901A\\u8FC7\\u6D88\\u9664\\u5BF9\\u6BCF\\u4E2A\",(0,e.jsx)(n.code,{children:\"<input>\"}),\"\\u5143\\u7D20\\u4E0A\\u5355\\u72EC\\u76D1\\u542C\\u5668\\u7684\\u9700\\u6C42\\u6765\\u7B80\\u5316\\u4EE3\\u7801\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u9677\\u9631\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8BF7\\u6CE8\\u610F\\uFF0C\\u4E8B\\u4EF6\\u59D4\\u6258\\u4F1A\\u5E26\\u6765\\u67D0\\u4E9B\\u9677\\u9631\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u76EE\\u6807\\u5904\\u7406\\u4E0D\\u6B63\\u786E\\uFF1A\"}),\" \\u786E\\u4FDD\\u6B63\\u786E\\u8BC6\\u522B\\u4E8B\\u4EF6\\u76EE\\u6807\\uFF0C\\u4EE5\\u907F\\u514D\\u610F\\u5916\\u64CD\\u4F5C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5E76\\u975E\\u6240\\u6709\\u4E8B\\u4EF6\\u90FD\\u53EF\\u4EE5\\u59D4\\u6258/\\u5192\\u6CE1\"}),\"\\uFF1A\\u5E76\\u975E\\u6240\\u6709\\u4E8B\\u4EF6\\u90FD\\u53EF\\u4EE5\\u59D4\\u6258\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u5192\\u6CE1\\u3002 \\u4E0D\\u5192\\u6CE1\\u7684\\u4E8B\\u4EF6\\u5305\\u62EC\\uFF1A\",(0,e.jsx)(n.code,{children:\"focus\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"blur\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"scroll\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"mouseenter\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"mouseleave\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"resize\"}),\" \\u7B49\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E8B\\u4EF6\\u5F00\\u9500\\uFF1A\"}),\" \\u867D\\u7136\\u4E8B\\u4EF6\\u59D4\\u6258\\u901A\\u5E38\\u66F4\\u6709\\u6548\\uFF0C\\u4F46\\u9700\\u8981\\u5728\\u6839\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u4E2D\\u7F16\\u5199\\u590D\\u6742\\u7684\\u903B\\u8F91\\u6765\\u8BC6\\u522B\\u89E6\\u53D1\\u5143\\u7D20\\u5E76\\u505A\\u51FA\\u9002\\u5F53\\u7684\\u54CD\\u5E94\\u3002 \\u5982\\u679C\\u7BA1\\u7406\\u4E0D\\u5F53\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u5F15\\u5165\\u5F00\\u9500\\uFF0C\\u5E76\\u4E14\\u53EF\\u80FD\\u66F4\\u590D\\u6742\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"JavaScript \\u6846\\u67B6\\u4E2D\\u7684\\u4E8B\\u4EF6\\u59D4\\u6258\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 \",(0,e.jsx)(n.a,{href:\"https://react.dev/\",children:\"React\"}),\" \\u4E2D\\uFF0C\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u9644\\u52A0\\u5230 React \\u6839\\u7684 DOM \\u5BB9\\u5668\\u4E2D\\uFF0CReact \\u6811\\u88AB\\u6E32\\u67D3\\u5230\\u8BE5\\u5BB9\\u5668\\u4E2D\\u3002 \\u5373\\u4F7F\\u5C06 \",(0,e.jsx)(n.code,{children:\"onClick\"}),\" \\u6DFB\\u52A0\\u5230\\u5B50\\u5143\\u7D20\\uFF0C\\u5B9E\\u9645\\u7684\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u4E5F\\u4F1A\\u9644\\u52A0\\u5230\\u6839 DOM \\u8282\\u70B9\\uFF0C\\u5229\\u7528\\u4E8B\\u4EF6\\u59D4\\u6258\\u6765\\u4F18\\u5316\\u4E8B\\u4EF6\\u5904\\u7406\\u5E76\\u63D0\\u9AD8\\u6027\\u80FD\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F53\\u4E8B\\u4EF6\\u53D1\\u751F\\u65F6\\uFF0CReact \\u7684\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u4F1A\\u6355\\u83B7\\u5B83\\uFF0C\\u5E76\\u6839\\u636E\\u5176\\u5185\\u90E8\\u7C3F\\u8BB0\\u786E\\u5B9A\\u54EA\\u4E2A React \\u7EC4\\u4EF6\\u5448\\u73B0\\u4E86\\u76EE\\u6807\\u5143\\u7D20\\u3002 \\u7136\\u540E\\uFF0CReact \\u901A\\u8FC7\\u4F7F\\u7528\\u5408\\u6210\\u4E8B\\u4EF6\\u5BF9\\u8C61\\u8C03\\u7528\\u5904\\u7406\\u7A0B\\u5E8F\\u51FD\\u6570\\uFF0C\\u5C06\\u4E8B\\u4EF6\\u5206\\u6D3E\\u7ED9\\u76F8\\u5E94\\u7684\\u7EC4\\u4EF6\\u7684\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u3002 \\u6B64\\u5408\\u6210\\u4E8B\\u4EF6\\u5BF9\\u8C61\\u5305\\u88C5\\u4E86\\u672C\\u673A\\u6D4F\\u89C8\\u5668\\u4E8B\\u4EF6\\uFF0C\\u63D0\\u4F9B\\u4E86\\u8DE8\\u4E0D\\u540C\\u6D4F\\u89C8\\u5668\\u7684\\u4E00\\u81F4\\u63A5\\u53E3\\uFF0C\\u5E76\\u6355\\u83B7\\u4E86\\u6709\\u5173\\u4E8B\\u4EF6\\u7684\\u4FE1\\u606F\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u901A\\u8FC7\\u4F7F\\u7528\\u4E8B\\u4EF6\\u59D4\\u6258\\uFF0CReact \\u907F\\u514D\\u5C06\\u5355\\u4E2A\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u9644\\u52A0\\u5230\\u6BCF\\u4E2A\\u7EC4\\u4EF6\\u5B9E\\u4F8B\\uFF0C\\u8FD9\\u5C06\\u4EA7\\u751F\\u5DE8\\u5927\\u7684\\u5F00\\u9500\\uFF0C\\u5C24\\u5176\\u5BF9\\u4E8E\\u5927\\u578B\\u7EC4\\u4EF6\\u6811\\u3002 \\u76F8\\u53CD\\uFF0CReact \\u5229\\u7528\\u6D4F\\u89C8\\u5668\\u7684\\u672C\\u673A\\u4E8B\\u4EF6\\u5192\\u6CE1\\u673A\\u5236\\u6765\\u6355\\u83B7\\u6839\\u5904\\u7684\\u4E8B\\u4EF6\\u5E76\\u5C06\\u5B83\\u4EEC\\u5206\\u53D1\\u5230\\u76F8\\u5E94\\u7684\\u7EC4\\u4EF6\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation\",children:\"MDN Web Docs on Event Delegation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/event-delegation\",children:\"JavaScript.info - Event Delegation\"})}),`\n`]})]})}function D(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(a,t)})):a(t)}var M=D;return B(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var b=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),f=(t,n)=>{for(var c in n)r(t,c,{get:n[c],enumerable:!0})},d=(t,n,c,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of p(n))!v.call(t,l)&&l!==c&&r(t,l,{get:()=>n[l],enumerable:!(i=m(n,l))||i.enumerable});return t};var B=(t,n,c)=>(c=t!=null?u(g(t)):{},d(n||!t||!t.__esModule?r(c,\"default\",{value:t,enumerable:!0}):c,t)),C=t=>d(r({},\"__esModule\",{value:!0}),t);var h=b((E,o)=>{o.exports=_jsx_runtime});var M={};f(M,{default:()=>s,frontmatter:()=>D});var e=B(h()),D={title:\"\\u89E3\\u91CA JavaScript \\u4E2D\\u7684\\u4E8B\\u4EF6\\u59D4\\u6258\"};function a(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E8B\\u4EF6\\u59D4\\u6258\\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u5B83\\u5C06\\u5355\\u4E2A\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u7236\\u5143\\u7D20\\uFF0C\\u800C\\u4E0D\\u662F\\u5C06\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u591A\\u4E2A\\u5B50\\u5143\\u7D20\\u3002\\u5F53\\u5B50\\u5143\\u7D20\\u4E0A\\u53D1\\u751F\\u4E8B\\u4EF6\\u65F6\\uFF0C\\u8BE5\\u4E8B\\u4EF6\\u4F1A\\u5192\\u6CE1\\u5230 DOM \\u6811\\u4E2D\\uFF0C\\u7236\\u5143\\u7D20\\u7684\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u4F1A\\u6839\\u636E\\u76EE\\u6807\\u5143\\u7D20\\u5904\\u7406\\u8BE5\\u4E8B\\u4EF6\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E8B\\u4EF6\\u59D4\\u6258\\u5177\\u6709\\u4EE5\\u4E0B\\u4F18\\u70B9\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u63D0\\u9AD8\\u6027\\u80FD\"}),\"\\uFF1A\\u9644\\u52A0\\u5355\\u4E2A\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u6BD4\\u5C06\\u591A\\u4E2A\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u5404\\u4E2A\\u5143\\u7D20\\u66F4\\u6709\\u6548\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u5904\\u7406\\u5927\\u578B\\u6216\\u52A8\\u6001\\u5217\\u8868\\u65F6\\u3002\\u8FD9\\u51CF\\u5C11\\u4E86\\u5185\\u5B58\\u4F7F\\u7528\\u5E76\\u63D0\\u9AD8\\u4E86\\u6574\\u4F53\\u6027\\u80FD\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7B80\\u5316\\u4E8B\\u4EF6\\u5904\\u7406\"}),\"\\uFF1A\\u4F7F\\u7528\\u4E8B\\u4EF6\\u59D4\\u6258\\uFF0C\\u60A8\\u53EA\\u9700\\u8981\\u5728\\u7236\\u5143\\u7D20\\u7684\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u4E2D\\u7F16\\u5199\\u4E00\\u6B21\\u4E8B\\u4EF6\\u5904\\u7406\\u903B\\u8F91\\u3002\\u8FD9\\u4F7F\\u5F97\\u4EE3\\u7801\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u548C\\u66F4\\u65B0\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u52A8\\u6001\\u5143\\u7D20\\u652F\\u6301\"}),\"\\uFF1A\\u4E8B\\u4EF6\\u59D4\\u6258\\u4F1A\\u81EA\\u52A8\\u5904\\u7406\\u7236\\u5143\\u7D20\\u4E2D\\u52A8\\u6001\\u6DFB\\u52A0\\u6216\\u5220\\u9664\\u5143\\u7D20\\u7684\\u4E8B\\u4EF6\\u3002\\u5F53 DOM \\u7ED3\\u6784\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0C\\u65E0\\u9700\\u624B\\u52A8\\u9644\\u52A0\\u6216\\u5220\\u9664\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F46\\u662F\\uFF0C\\u8BF7\\u6CE8\\u610F\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u786E\\u5B9A\\u89E6\\u53D1\\u4E8B\\u4EF6\\u7684\\u76EE\\u6807\\u5143\\u7D20\\u975E\\u5E38\\u91CD\\u8981\\u3002\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5E76\\u975E\\u6240\\u6709\\u4E8B\\u4EF6\\u90FD\\u53EF\\u4EE5\\u88AB\\u59D4\\u6258\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u5192\\u6CE1\\u3002\\u4E0D\\u5192\\u6CE1\\u7684\\u4E8B\\u4EF6\\u5305\\u62EC\\uFF1A\",(0,e.jsx)(n.code,{children:\"focus\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"blur\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"scroll\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"mouseenter\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"mouseleave\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"resize\"}),\" \\u7B49\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4E8B\\u4EF6\\u59D4\\u6258\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E8B\\u4EF6\\u59D4\\u6258\\u662F JavaScript \\u4E2D\\u7528\\u4E8E\\u901A\\u8FC7\\u5C06\\u5355\\u4E2A\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u516C\\u5171\\u7956\\u5148\\u5143\\u7D20\\u6765\\u6709\\u6548\\u7BA1\\u7406\\u548C\\u5904\\u7406\\u591A\\u4E2A\\u5B50\\u5143\\u7D20\\u4E0A\\u7684\\u4E8B\\u4EF6\\u7684\\u8BBE\\u8BA1\\u6A21\\u5F0F\\u3002\\u6B64\\u6A21\\u5F0F\\u5728\\u60A8\\u6709\\u5927\\u91CF\\u76F8\\u4F3C\\u5143\\u7D20\\uFF08\\u4F8B\\u5982\\u5217\\u8868\\u9879\\uFF09\\u5E76\\u5E0C\\u671B\\u4F18\\u5316\\u4E8B\\u4EF6\\u5904\\u7406\\u7684\\u573A\\u666F\\u4E2D\\u7279\\u522B\\u6709\\u4EF7\\u503C\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4E8B\\u4EF6\\u59D4\\u6258\\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C06\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u516C\\u5171\\u7956\\u5148\"}),\"\\uFF1A\\u60A8\\u5C06\\u5355\\u4E2A\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230 DOM \\u5C42\\u6B21\\u7ED3\\u6784\\u4E2D\\u8F83\\u9AD8\\u7684\\u516C\\u5171\\u7956\\u5148\\u5143\\u7D20\\uFF0C\\u800C\\u4E0D\\u662F\\u5C06\\u5404\\u4E2A\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u6BCF\\u4E2A\\u5B50\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E8B\\u4EF6\\u5192\\u6CE1\"}),\"\\uFF1A\\u5F53\\u5B50\\u5143\\u7D20\\u4E0A\\u53D1\\u751F\\u4E8B\\u4EF6\\u65F6\\uFF0C\\u5B83\\u4F1A\\u901A\\u8FC7 DOM \\u6811\\u5192\\u6CE1\\u5230\\u516C\\u5171\\u7956\\u5148\\u5143\\u7D20\\u3002\\u5728\\u6B64\\u4F20\\u64AD\\u8FC7\\u7A0B\\u4E2D\\uFF0C\\u516C\\u5171\\u7956\\u5148\\u4E0A\\u7684\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u53EF\\u4EE5\\u62E6\\u622A\\u548C\\u5904\\u7406\\u8BE5\\u4E8B\\u4EF6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u786E\\u5B9A\\u76EE\\u6807\"}),\"\\uFF1A\\u5728\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u68C0\\u67E5\\u4E8B\\u4EF6\\u5BF9\\u8C61\\u4EE5\\u8BC6\\u522B\\u4E8B\\u4EF6\\u7684\\u5B9E\\u9645\\u76EE\\u6807\\uFF08\\u89E6\\u53D1\\u4E8B\\u4EF6\\u7684\\u5B50\\u5143\\u7D20\\uFF09\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"event.target\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"event.currentTarget\"}),\" \\u7B49\\u5C5E\\u6027\\u6765\\u786E\\u5B9A\\u4E0E\\u54EA\\u4E2A\\u7279\\u5B9A\\u7684\\u5B50\\u5143\\u7D20\\u8FDB\\u884C\\u4E86\\u4EA4\\u4E92\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6839\\u636E\\u76EE\\u6807\\u6267\\u884C\\u64CD\\u4F5C\"}),\"\\uFF1A\\u6839\\u636E\\u76EE\\u6807\\u5143\\u7D20\\uFF0C\\u60A8\\u53EF\\u4EE5\\u6267\\u884C\\u6240\\u9700\\u7684\\u64CD\\u4F5C\\u6216\\u6267\\u884C\\u7279\\u5B9A\\u4E8E\\u8BE5\\u5143\\u7D20\\u7684\\u4EE3\\u7801\\u3002\\u8FD9\\u5141\\u8BB8\\u60A8\\u4F7F\\u7528\\u5355\\u4E2A\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u5904\\u7406\\u591A\\u4E2A\\u5B50\\u5143\\u7D20\\u7684\\u4E8B\\u4EF6\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4E8B\\u4EF6\\u59D4\\u6258\\u7684\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6548\\u7387\"}),\"\\uFF1A\\u4E8B\\u4EF6\\u59D4\\u6258\\u51CF\\u5C11\\u4E86\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u7684\\u6570\\u91CF\\uFF0C\\u4ECE\\u800C\\u63D0\\u9AD8\\u4E86\\u5185\\u5B58\\u4F7F\\u7528\\u7387\\u548C\\u6027\\u80FD\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u5904\\u7406\\u5927\\u91CF\\u5143\\u7D20\\u65F6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u52A8\\u6001\\u5143\\u7D20\"}),\"\\uFF1A\\u5B83\\u53EF\\u4EE5\\u4E0E\\u52A8\\u6001\\u6DFB\\u52A0\\u6216\\u5220\\u9664\\u7684\\u5B50\\u5143\\u7D20\\u65E0\\u7F1D\\u534F\\u4F5C\\uFF0C\\u56E0\\u4E3A\\u516C\\u5171\\u7956\\u5148\\u4F1A\\u7EE7\\u7EED\\u4FA6\\u542C\\u5B83\\u4EEC\\u7684\\u4E8B\\u4EF6\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F8B\\u5B50\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u4F8B\\u5B50\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML:\n// <ul id=\"item-list\">\n//   <li>Item 1</li>\n//   <li>Item 2</li>\n//   <li>Item 3</li>\n// </ul>\n\nconst itemList = document.getElementById('item-list');\n\nitemList.addEventListener('click', (event) => {\n  if (event.target.tagName === 'LI') {\n    console.log(\\`Clicked on \\${event.target.textContent}\\`);\n  }\n});\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u5355\\u4E2A click \\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230 \",(0,e.jsx)(n.code,{children:\"<ul>\"}),\" \\u5143\\u7D20\\u3002\\u5F53 \",(0,e.jsx)(n.code,{children:\"<li>\"}),\" \\u5143\\u7D20\\u4E0A\\u53D1\\u751F click \\u4E8B\\u4EF6\\u65F6\\uFF0C\\u8BE5\\u4E8B\\u4EF6\\u4F1A\\u5192\\u6CE1\\u5230 \",(0,e.jsx)(n.code,{children:\"<ul>\"}),\" \\u5143\\u7D20\\uFF0C\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u4F1A\\u68C0\\u67E5\\u76EE\\u6807\\u5143\\u7D20\\u7684\\u6807\\u7B7E\\u540D\\u79F0\\u4EE5\\u786E\\u5B9A\\u662F\\u5426\\u5355\\u51FB\\u4E86\\u5217\\u8868\\u9879\\u3002\\u68C0\\u67E5 \",(0,e.jsx)(n.code,{children:\"event.target\"}),\" \\u7684\\u8EAB\\u4EFD\\u81F3\\u5173\\u91CD\\u8981\\uFF0C\\u56E0\\u4E3A DOM \\u6811\\u4E2D\\u53EF\\u80FD\\u5B58\\u5728\\u5176\\u4ED6\\u7C7B\\u578B\\u7684\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E8B\\u4EF6\\u59D4\\u6258\\u901A\\u5E38\\u7528\\u4E8E\\u4EE5\\u4E0B\\u573A\\u666F\\uFF1A\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5904\\u7406\\u5355\\u9875\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7684\\u52A8\\u6001\\u5185\\u5BB9\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"button-container\">\n//   <button>Button 1</button>\n//   <button>Button 2</button>\n// </div>\n// <button id=\"add-button\">Add Button</button>\n\nconst buttonContainer = document.getElementById('button-container');\nconst addButton = document.getElementById('add-button');\n\nbuttonContainer.addEventListener('click', (event) => {\n  if (event.target.tagName === 'BUTTON') {\n    console.log(\\`Clicked on \\${event.target.textContent}\\`);\n  }\n});\n\naddButton.addEventListener('click', () => {\n  const newButton = document.createElement('button');\n  newButton.textContent = \\`Button \\${buttonContainer.children.length + 1}\\`;\n  buttonContainer.appendChild(newButton);\n});\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"click\"}),\" \\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u9644\\u52A0\\u5230 \",(0,e.jsx)(n.code,{children:\"<div>\"}),\" \\u5BB9\\u5668\\u3002 \\u5F53\\u52A8\\u6001\\u6DFB\\u52A0\\u5E76\\u5355\\u51FB\\u4E00\\u4E2A\\u65B0\\u6309\\u94AE\\u65F6\\uFF0C\\u5BB9\\u5668\\u4E0A\\u7684\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u4F1A\\u5904\\u7406 click \\u4E8B\\u4EF6\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u901A\\u8FC7\\u907F\\u514D\\u4E3A\\u66F4\\u6539\\u7684\\u5143\\u7D20\\u9644\\u52A0\\u548C\\u5220\\u9664\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u6765\\u7B80\\u5316\\u4EE3\\u7801\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML:\n// <form id=\"user-form\">\n//   <input type=\"text\" name=\"username\" placeholder=\"Username\">\n//   <input type=\"email\" name=\"email\" placeholder=\"Email\">\n//   <input type=\"password\" name=\"password\" placeholder=\"Password\">\n// </form>\n\nconst userForm = document.getElementById('user-form');\n\nuserForm.addEventListener('input', (event) => {\n  const { name, value } = event.target;\n  console.log(\\`Changed \\${name}: \\${value}\\`);\n});\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u5355\\u4E2A\\u8F93\\u5165\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u8868\\u5355\\u5143\\u7D20\\u3002\\u5B83\\u53EF\\u4EE5\\u54CD\\u5E94\\u6240\\u6709\\u5B50\\u8F93\\u5165\\u5143\\u7D20\\u7684\\u8F93\\u5165\\u66F4\\u6539\\uFF0C\\u901A\\u8FC7\\u6D88\\u9664\\u5BF9\\u6BCF\\u4E2A\",(0,e.jsx)(n.code,{children:\"<input>\"}),\"\\u5143\\u7D20\\u4E0A\\u5355\\u72EC\\u76D1\\u542C\\u5668\\u7684\\u9700\\u6C42\\u6765\\u7B80\\u5316\\u4EE3\\u7801\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u9677\\u9631\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8BF7\\u6CE8\\u610F\\uFF0C\\u4E8B\\u4EF6\\u59D4\\u6258\\u4F1A\\u5E26\\u6765\\u67D0\\u4E9B\\u9677\\u9631\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u76EE\\u6807\\u5904\\u7406\\u4E0D\\u6B63\\u786E\\uFF1A\"}),\" \\u786E\\u4FDD\\u6B63\\u786E\\u8BC6\\u522B\\u4E8B\\u4EF6\\u76EE\\u6807\\uFF0C\\u4EE5\\u907F\\u514D\\u610F\\u5916\\u64CD\\u4F5C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5E76\\u975E\\u6240\\u6709\\u4E8B\\u4EF6\\u90FD\\u53EF\\u4EE5\\u59D4\\u6258/\\u5192\\u6CE1\"}),\"\\uFF1A\\u5E76\\u975E\\u6240\\u6709\\u4E8B\\u4EF6\\u90FD\\u53EF\\u4EE5\\u59D4\\u6258\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u5192\\u6CE1\\u3002 \\u4E0D\\u5192\\u6CE1\\u7684\\u4E8B\\u4EF6\\u5305\\u62EC\\uFF1A\",(0,e.jsx)(n.code,{children:\"focus\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"blur\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"scroll\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"mouseenter\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"mouseleave\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"resize\"}),\" \\u7B49\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E8B\\u4EF6\\u5F00\\u9500\\uFF1A\"}),\" \\u867D\\u7136\\u4E8B\\u4EF6\\u59D4\\u6258\\u901A\\u5E38\\u66F4\\u6709\\u6548\\uFF0C\\u4F46\\u9700\\u8981\\u5728\\u6839\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u4E2D\\u7F16\\u5199\\u590D\\u6742\\u7684\\u903B\\u8F91\\u6765\\u8BC6\\u522B\\u89E6\\u53D1\\u5143\\u7D20\\u5E76\\u505A\\u51FA\\u9002\\u5F53\\u7684\\u54CD\\u5E94\\u3002 \\u5982\\u679C\\u7BA1\\u7406\\u4E0D\\u5F53\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u5F15\\u5165\\u5F00\\u9500\\uFF0C\\u5E76\\u4E14\\u53EF\\u80FD\\u66F4\\u590D\\u6742\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"JavaScript \\u6846\\u67B6\\u4E2D\\u7684\\u4E8B\\u4EF6\\u59D4\\u6258\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 \",(0,e.jsx)(n.a,{href:\"https://react.dev/\",children:\"React\"}),\" \\u4E2D\\uFF0C\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u9644\\u52A0\\u5230 React \\u6839\\u7684 DOM \\u5BB9\\u5668\\u4E2D\\uFF0CReact \\u6811\\u88AB\\u6E32\\u67D3\\u5230\\u8BE5\\u5BB9\\u5668\\u4E2D\\u3002 \\u5373\\u4F7F\\u5C06 \",(0,e.jsx)(n.code,{children:\"onClick\"}),\" \\u6DFB\\u52A0\\u5230\\u5B50\\u5143\\u7D20\\uFF0C\\u5B9E\\u9645\\u7684\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u4E5F\\u4F1A\\u9644\\u52A0\\u5230\\u6839 DOM \\u8282\\u70B9\\uFF0C\\u5229\\u7528\\u4E8B\\u4EF6\\u59D4\\u6258\\u6765\\u4F18\\u5316\\u4E8B\\u4EF6\\u5904\\u7406\\u5E76\\u63D0\\u9AD8\\u6027\\u80FD\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F53\\u4E8B\\u4EF6\\u53D1\\u751F\\u65F6\\uFF0CReact \\u7684\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u4F1A\\u6355\\u83B7\\u5B83\\uFF0C\\u5E76\\u6839\\u636E\\u5176\\u5185\\u90E8\\u7C3F\\u8BB0\\u786E\\u5B9A\\u54EA\\u4E2A React \\u7EC4\\u4EF6\\u5448\\u73B0\\u4E86\\u76EE\\u6807\\u5143\\u7D20\\u3002 \\u7136\\u540E\\uFF0CReact \\u901A\\u8FC7\\u4F7F\\u7528\\u5408\\u6210\\u4E8B\\u4EF6\\u5BF9\\u8C61\\u8C03\\u7528\\u5904\\u7406\\u7A0B\\u5E8F\\u51FD\\u6570\\uFF0C\\u5C06\\u4E8B\\u4EF6\\u5206\\u6D3E\\u7ED9\\u76F8\\u5E94\\u7684\\u7EC4\\u4EF6\\u7684\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u3002 \\u6B64\\u5408\\u6210\\u4E8B\\u4EF6\\u5BF9\\u8C61\\u5305\\u88C5\\u4E86\\u672C\\u673A\\u6D4F\\u89C8\\u5668\\u4E8B\\u4EF6\\uFF0C\\u63D0\\u4F9B\\u4E86\\u8DE8\\u4E0D\\u540C\\u6D4F\\u89C8\\u5668\\u7684\\u4E00\\u81F4\\u63A5\\u53E3\\uFF0C\\u5E76\\u6355\\u83B7\\u4E86\\u6709\\u5173\\u4E8B\\u4EF6\\u7684\\u4FE1\\u606F\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u901A\\u8FC7\\u4F7F\\u7528\\u4E8B\\u4EF6\\u59D4\\u6258\\uFF0CReact \\u907F\\u514D\\u5C06\\u5355\\u4E2A\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u9644\\u52A0\\u5230\\u6BCF\\u4E2A\\u7EC4\\u4EF6\\u5B9E\\u4F8B\\uFF0C\\u8FD9\\u5C06\\u4EA7\\u751F\\u5DE8\\u5927\\u7684\\u5F00\\u9500\\uFF0C\\u5C24\\u5176\\u5BF9\\u4E8E\\u5927\\u578B\\u7EC4\\u4EF6\\u6811\\u3002 \\u76F8\\u53CD\\uFF0CReact \\u5229\\u7528\\u6D4F\\u89C8\\u5668\\u7684\\u672C\\u673A\\u4E8B\\u4EF6\\u5192\\u6CE1\\u673A\\u5236\\u6765\\u6355\\u83B7\\u6839\\u5904\\u7684\\u4E8B\\u4EF6\\u5E76\\u5C06\\u5B83\\u4EEC\\u5206\\u53D1\\u5230\\u76F8\\u5E94\\u7684\\u7EC4\\u4EF6\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation\",children:\"MDN Web Docs on Event Delegation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/event-delegation\",children:\"JavaScript.info - Event Delegation\"})}),`\n`]})]})}function s(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(a,{...t})}):a(t)}return C(M);})();\n;return Component;"
 }
\ No newline at end of file
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 5982bd2cd..02519396d 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
@@ -30,5 +30,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-function-prototype-bind/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var m=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),f=(o,e)=>{for(var t in e)c(o,t,{get:e[t],enumerable:!0})},l=(o,e,t,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!b.call(o,i)&&i!==t&&c(o,i,{get:()=>e[i],enumerable:!(r=u(e,i))||r.enumerable});return o};var y=(o,e,t)=>(t=o!=null?a(g(o)):{},l(e||!o||!o.__esModule?c(t,\"default\",{value:o,enumerable:!0}):t,o)),w=o=>l(c({},\"__esModule\",{value:!0}),o);var s=m((G,d)=>{d.exports=_jsx_runtime});var x={};f(x,{default:()=>A,frontmatter:()=>j});var n=y(s()),j={title:\"Explain `Function.prototype.bind` in JavaScript\"};function h(o){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",ul:\"ul\",li:\"li\",strong:\"strong\",hr:\"hr\",pre:\"pre\",h3:\"h3\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Function.prototype.bind\"}),\" is a method in JavaScript that allows you to create a new function with a specific \",(0,n.jsx)(e.code,{children:\"this\"}),\" value and optional initial arguments. It's primary purpose is to:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"Binding \",(0,n.jsx)(e.code,{children:\"this\"}),\" value to preserve context\"]}),\": The primary purpose of \",(0,n.jsx)(e.code,{children:\"bind\"}),\" is to bind the \",(0,n.jsx)(e.code,{children:\"this\"}),\" value of a function to a specific object. When you call \",(0,n.jsx)(e.code,{children:\"func.bind(thisArg)\"}),\", it creates a new function with the same body as \",(0,n.jsx)(e.code,{children:\"func\"}),\", but with \",(0,n.jsx)(e.code,{children:\"this\"}),\" permanently bound to \",(0,n.jsx)(e.code,{children:\"thisArg\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Partial application of arguments\"}),\": \",(0,n.jsx)(e.code,{children:\"bind\"}),\" also allows you to pre-specify arguments for the new function. Any arguments passed to \",(0,n.jsx)(e.code,{children:\"bind\"}),\" after \",(0,n.jsx)(e.code,{children:\"thisArg\"}),\" will be prepended to the arguments list when the new function is called.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Method borrowing\"}),\": \",(0,n.jsx)(e.code,{children:\"bind\"}),\" allows you to borrow methods from one object and apply them to another object, even if they were not originally designed to work with that object.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"bind\"}),\" method is particularly useful in scenarios where you need to ensure that a function is called with a specific \",(0,n.jsx)(e.code,{children:\"this\"}),\" context, such as in event handlers, callbacks, or method borrowing.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"Function.prototype.bind\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Function.prototype.bind\"}),\" allows you to create a new function with a specific \",(0,n.jsx)(e.code,{children:\"this\"}),\" context and, optionally, preset arguments. \",(0,n.jsx)(e.code,{children:\"bind()\"}),\" is most useful for preserving the value of \",(0,n.jsx)(e.code,{children:\"this\"}),\" in methods of classes that you want to pass into other functions.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"bind\"}),\" was frequently used on legacy React class component methods which were not defined using arrow functions.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const john = {\n  age: 42,\n  getAge: function () {\n    return this.age;\n  },\n};\n\nconsole.log(john.getAge()); // 42\n\nconst unboundGetAge = john.getAge;\nconsole.log(unboundGetAge()); // undefined\n\nconst boundGetAge = john.getAge.bind(john);\nconsole.log(boundGetAge()); // 42\n\nconst mary = { age: 21 };\nconst boundGetAgeMary = john.getAge.bind(mary);\nconsole.log(boundGetAgeMary()); // 21\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In the example above, when the \",(0,n.jsx)(e.code,{children:\"getAge\"}),\" method is called without a calling object (as \",(0,n.jsx)(e.code,{children:\"unboundGetAge\"}),\"), the value is \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" because the value of \",(0,n.jsx)(e.code,{children:\"this\"}),\" within \",(0,n.jsx)(e.code,{children:\"getAge()\"}),\" becomes the global object. \",(0,n.jsx)(e.code,{children:\"boundGetAge()\"}),\" has its \",(0,n.jsx)(e.code,{children:\"this\"}),\" bound to \",(0,n.jsx)(e.code,{children:\"john\"}),\", hence it is able to obtain the \",(0,n.jsx)(e.code,{children:\"age\"}),\" of \",(0,n.jsx)(e.code,{children:\"john\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"We can even use \",(0,n.jsx)(e.code,{children:\"getAge\"}),\" on another object which is not \",(0,n.jsx)(e.code,{children:\"john\"}),\"! \",(0,n.jsx)(e.code,{children:\"boundGetAgeMary\"}),\" returns the \",(0,n.jsx)(e.code,{children:\"age\"}),\" of \",(0,n.jsx)(e.code,{children:\"mary\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here are some common scenarios where \",(0,n.jsx)(e.code,{children:\"bind\"}),\" is frequently used:\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Preserving context and fixing the \",(0,n.jsx)(e.code,{children:\"this\"}),\" value in callbacks\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"When you pass a function as a callback, the \",(0,n.jsx)(e.code,{children:\"this\"}),\" value inside the function can be unpredictable because it is determined by the execution context. Using \",(0,n.jsx)(e.code,{children:\"bind()\"}),\" helps ensure that the correct \",(0,n.jsx)(e.code,{children:\"this\"}),\" value is maintained.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Person {\n  constructor(firstName) {\n    this.firstName = firstName;\n  }\n  greet() {\n    console.log(\\`Hello, my name is \\${this.firstName}\\`);\n  }\n}\n\nconst john = new Person('John');\n\n// Without bind(), \\`this\\` inside the callback will be the global object\nsetTimeout(john.greet, 1000); // Output: \"Hello, my name is undefined\"\n\n// Using bind() to fix the \\`this\\` value\nsetTimeout(john.greet.bind(john), 2000); // Output: \"Hello, my name is John\"\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can also use \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions\",children:\"arrow functions\"}),\" to define class methods for this purpose instead of using \",(0,n.jsx)(e.code,{children:\"bind\"}),\". Arrow functions have the \",(0,n.jsx)(e.code,{children:\"this\"}),\" value bound to its lexical context.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Person {\n  constructor(name) {\n    this.name = name;\n  }\n  greet = () => {\n    console.log(\\`Hello, my name is \\${this.name}\\`);\n  };\n}\n\nconst john = new Person('John Doe');\nsetTimeout(john.greet, 1000); // Output: \"Hello, my name is John Doe\"\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Partial application of functions (currying)\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"bind\"}),\" can be used to create a new function with some arguments pre-set. This is known as partial application or currying.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function multiply(a, b) {\n  return a * b;\n}\n\n// Using bind() to create a new function with some arguments pre-set\nconst multiplyBy5 = multiply.bind(null, 5);\nconsole.log(multiplyBy5(3)); // Output: 15\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Method borrowing\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"bind\"}),\" allows you to borrow methods from one object and apply them to another object, even if they were not originally designed to work with that object. This can be handy when you need to reuse functionality across different objects\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  name: 'John',\n  greet: function () {\n    console.log(\\`Hello, \\${this.name}!\\`);\n  },\n};\n\nconst greetPerson = person.greet.bind({ name: 'Alice' });\ngreetPerson(); // Output: Hello, Alice!\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Practice\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Try \",(0,n.jsxs)(e.a,{href:\"/questions/javascript/function-bind\",children:[\"implementing your own \",(0,n.jsx)(e.code,{children:\"Function.prototype.bind()\"}),\" method\"]}),\" on GreatFrontEnd.\"]}),`\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/docs/Web/JavaScript/Reference/Global_objects/Function/bind\",children:\"Function.prototype.bind() - JavaScript | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/bind\",children:\"Function Binding | javascript.info\"})}),`\n`]})]})}function v(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(h,o)})):h(o)}var A=v;return w(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),y=(o,e)=>{for(var t in e)c(o,t,{get:e[t],enumerable:!0})},l=(o,e,t,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of g(e))!m.call(o,i)&&i!==t&&c(o,i,{get:()=>e[i],enumerable:!(r=p(e,i))||r.enumerable});return o};var w=(o,e,t)=>(t=o!=null?u(b(o)):{},l(e||!o||!o.__esModule?c(t,\"default\",{value:o,enumerable:!0}):t,o)),j=o=>l(c({},\"__esModule\",{value:!0}),o);var h=f((F,d)=>{d.exports=_jsx_runtime});var A={};y(A,{default:()=>a,frontmatter:()=>v});var n=w(h()),v={title:\"Explain `Function.prototype.bind` in JavaScript\"};function s(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Function.prototype.bind\"}),\" is a method in JavaScript that allows you to create a new function with a specific \",(0,n.jsx)(e.code,{children:\"this\"}),\" value and optional initial arguments. It's primary purpose is to:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"Binding \",(0,n.jsx)(e.code,{children:\"this\"}),\" value to preserve context\"]}),\": The primary purpose of \",(0,n.jsx)(e.code,{children:\"bind\"}),\" is to bind the \",(0,n.jsx)(e.code,{children:\"this\"}),\" value of a function to a specific object. When you call \",(0,n.jsx)(e.code,{children:\"func.bind(thisArg)\"}),\", it creates a new function with the same body as \",(0,n.jsx)(e.code,{children:\"func\"}),\", but with \",(0,n.jsx)(e.code,{children:\"this\"}),\" permanently bound to \",(0,n.jsx)(e.code,{children:\"thisArg\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Partial application of arguments\"}),\": \",(0,n.jsx)(e.code,{children:\"bind\"}),\" also allows you to pre-specify arguments for the new function. Any arguments passed to \",(0,n.jsx)(e.code,{children:\"bind\"}),\" after \",(0,n.jsx)(e.code,{children:\"thisArg\"}),\" will be prepended to the arguments list when the new function is called.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Method borrowing\"}),\": \",(0,n.jsx)(e.code,{children:\"bind\"}),\" allows you to borrow methods from one object and apply them to another object, even if they were not originally designed to work with that object.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"bind\"}),\" method is particularly useful in scenarios where you need to ensure that a function is called with a specific \",(0,n.jsx)(e.code,{children:\"this\"}),\" context, such as in event handlers, callbacks, or method borrowing.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"Function.prototype.bind\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Function.prototype.bind\"}),\" allows you to create a new function with a specific \",(0,n.jsx)(e.code,{children:\"this\"}),\" context and, optionally, preset arguments. \",(0,n.jsx)(e.code,{children:\"bind()\"}),\" is most useful for preserving the value of \",(0,n.jsx)(e.code,{children:\"this\"}),\" in methods of classes that you want to pass into other functions.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"bind\"}),\" was frequently used on legacy React class component methods which were not defined using arrow functions.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const john = {\n  age: 42,\n  getAge: function () {\n    return this.age;\n  },\n};\n\nconsole.log(john.getAge()); // 42\n\nconst unboundGetAge = john.getAge;\nconsole.log(unboundGetAge()); // undefined\n\nconst boundGetAge = john.getAge.bind(john);\nconsole.log(boundGetAge()); // 42\n\nconst mary = { age: 21 };\nconst boundGetAgeMary = john.getAge.bind(mary);\nconsole.log(boundGetAgeMary()); // 21\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In the example above, when the \",(0,n.jsx)(e.code,{children:\"getAge\"}),\" method is called without a calling object (as \",(0,n.jsx)(e.code,{children:\"unboundGetAge\"}),\"), the value is \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" because the value of \",(0,n.jsx)(e.code,{children:\"this\"}),\" within \",(0,n.jsx)(e.code,{children:\"getAge()\"}),\" becomes the global object. \",(0,n.jsx)(e.code,{children:\"boundGetAge()\"}),\" has its \",(0,n.jsx)(e.code,{children:\"this\"}),\" bound to \",(0,n.jsx)(e.code,{children:\"john\"}),\", hence it is able to obtain the \",(0,n.jsx)(e.code,{children:\"age\"}),\" of \",(0,n.jsx)(e.code,{children:\"john\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"We can even use \",(0,n.jsx)(e.code,{children:\"getAge\"}),\" on another object which is not \",(0,n.jsx)(e.code,{children:\"john\"}),\"! \",(0,n.jsx)(e.code,{children:\"boundGetAgeMary\"}),\" returns the \",(0,n.jsx)(e.code,{children:\"age\"}),\" of \",(0,n.jsx)(e.code,{children:\"mary\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here are some common scenarios where \",(0,n.jsx)(e.code,{children:\"bind\"}),\" is frequently used:\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Preserving context and fixing the \",(0,n.jsx)(e.code,{children:\"this\"}),\" value in callbacks\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"When you pass a function as a callback, the \",(0,n.jsx)(e.code,{children:\"this\"}),\" value inside the function can be unpredictable because it is determined by the execution context. Using \",(0,n.jsx)(e.code,{children:\"bind()\"}),\" helps ensure that the correct \",(0,n.jsx)(e.code,{children:\"this\"}),\" value is maintained.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Person {\n  constructor(firstName) {\n    this.firstName = firstName;\n  }\n  greet() {\n    console.log(\\`Hello, my name is \\${this.firstName}\\`);\n  }\n}\n\nconst john = new Person('John');\n\n// Without bind(), \\`this\\` inside the callback will be the global object\nsetTimeout(john.greet, 1000); // Output: \"Hello, my name is undefined\"\n\n// Using bind() to fix the \\`this\\` value\nsetTimeout(john.greet.bind(john), 2000); // Output: \"Hello, my name is John\"\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can also use \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions\",children:\"arrow functions\"}),\" to define class methods for this purpose instead of using \",(0,n.jsx)(e.code,{children:\"bind\"}),\". Arrow functions have the \",(0,n.jsx)(e.code,{children:\"this\"}),\" value bound to its lexical context.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Person {\n  constructor(name) {\n    this.name = name;\n  }\n  greet = () => {\n    console.log(\\`Hello, my name is \\${this.name}\\`);\n  };\n}\n\nconst john = new Person('John Doe');\nsetTimeout(john.greet, 1000); // Output: \"Hello, my name is John Doe\"\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Partial application of functions (currying)\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"bind\"}),\" can be used to create a new function with some arguments pre-set. This is known as partial application or currying.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function multiply(a, b) {\n  return a * b;\n}\n\n// Using bind() to create a new function with some arguments pre-set\nconst multiplyBy5 = multiply.bind(null, 5);\nconsole.log(multiplyBy5(3)); // Output: 15\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Method borrowing\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"bind\"}),\" allows you to borrow methods from one object and apply them to another object, even if they were not originally designed to work with that object. This can be handy when you need to reuse functionality across different objects\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  name: 'John',\n  greet: function () {\n    console.log(\\`Hello, \\${this.name}!\\`);\n  },\n};\n\nconst greetPerson = person.greet.bind({ name: 'Alice' });\ngreetPerson(); // Output: Hello, Alice!\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Practice\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Try \",(0,n.jsxs)(e.a,{href:\"/questions/javascript/function-bind\",children:[\"implementing your own \",(0,n.jsx)(e.code,{children:\"Function.prototype.bind()\"}),\" method\"]}),\" on GreatFrontEnd.\"]}),`\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/docs/Web/JavaScript/Reference/Global_objects/Function/bind\",children:\"Function.prototype.bind() - JavaScript | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/bind\",children:\"Function Binding | javascript.info\"})}),`\n`]})]})}function a(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(s,{...o})}):s(o)}return j(A);})();\n;return Component;"
 }
\ No newline at end of file
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 3dc554b06..5b9f17968 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
@@ -30,5 +30,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-function-prototype-bind/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),f=(o,e)=>{for(var d in e)t(o,d,{get:e[d],enumerable:!0})},a=(o,e,d,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!g.call(o,c)&&c!==d&&t(o,c,{get:()=>e[c],enumerable:!(r=h(e,c))||r.enumerable});return o};var j=(o,e,d)=>(d=o!=null?u(p(o)):{},a(e||!o||!o.__esModule?t(d,\"default\",{value:o,enumerable:!0}):d,o)),q=o=>a(t({},\"__esModule\",{value:!0}),o);var l=b((F,i)=>{i.exports=_jsx_runtime});var x={};f(x,{default:()=>G,frontmatter:()=>v});var n=j(l()),v={title:\"Explique `Function.prototype.bind`\"};function s(o){let e=Object.assign({blockquote:\"blockquote\",p:\"p\",code:\"code\",em:\"em\",a:\"a\",pre:\"pre\",h2:\"h2\",ul:\"ul\",li:\"li\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"O m\\xE9todo \",(0,n.jsx)(e.code,{children:\"bind()\"}),\" cria uma nova fun\\xE7\\xE3o que, quando chamada, tem sua palavra-chave \",(0,n.jsx)(e.code,{children:\"this\"}),\" definida para o valor fornecido, com uma determinada sequ\\xEAncia de argumentos precedendo qualquer um fornecido quando a nova fun\\xE7\\xE3o \\xE9 chamada.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.em,{children:[\"Source: \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind\",children:\"Function.prototype.bind() - JavaScript | MDN\"})]})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"bind()\"}),\" \\xE9 mais \\xFAtil para vincular o valor do \",(0,n.jsx)(e.code,{children:\"this\"}),\" em m\\xE9todos de classes que voc\\xEA quer passar para outras fun\\xE7\\xF5es. Isso foi frequentemente feito em m\\xE9todos de classe de componente React que n\\xE3o foram definidos usando arrow functions.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const john = {\n  age: 42,\n  getAge: function () {\n    return this.age;\n  },\n};\n\nconsole.log(john.getAge()); // 42\n\nconst unboundGetAge = john.getAge;\nconsole.log(unboundGetAge()); // undefined\n\nconst boundGetAge = john.getAge.bind(john);\nconsole.log(boundGetAge()); // 42\n\nconst mary = { age: 21 };\nconst boundGetAgeMary = john.getAge.bind(mary);\nconsole.log(boundGetAgeMary()); // 21\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"No exemplo acima, quando o m\\xE9todo \",(0,n.jsx)(e.code,{children:\"getAge\"}),\" \\xE9 chamado sem um objeto chamado (como \",(0,n.jsx)(e.code,{children:\"unboundGetAge\"}),\"), o valor \\xE9 'indefinido' porque o valor 'this' dentro de \",(0,n.jsx)(e.code,{children:\"getAge()\"}),\" se torna o objeto global. \",(0,n.jsx)(e.code,{children:\"boundGetAge()\"}),\" tem seu \",(0,n.jsx)(e.code,{children:\"this\"}),\" ligado a \",(0,n.jsx)(e.code,{children:\"john\"}),\", portanto pode obter o \",(0,n.jsx)(e.code,{children:\"idade\"}),\" de \",(0,n.jsx)(e.code,{children:\"john\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Podemos at\\xE9 usar \",(0,n.jsx)(e.code,{children:\"getAge\"}),\" em outro objeto que n\\xE3o \\xE9 \",(0,n.jsx)(e.code,{children:\"john\"}),\"! \",(0,n.jsx)(e.code,{children:\"boundGetAgeMary\"}),\" retorna o \",(0,n.jsx)(e.code,{children:\"age\"}),\" (idade) de \",(0,n.jsx)(e.code,{children:\"mary\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Pr\\xE1tica\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Tente \",(0,n.jsxs)(e.a,{href:\"/questions/javascript/function-bind\",children:[\"implementar seu pr\\xF3prio m\\xE9todo \",(0,n.jsx)(e.code,{children:\"Function.prototype.bind()\"})]}),\" na Great Front End.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\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/docs/Web/JavaScript/Reference/Global_objects/Function/bind\",children:\"Function.prototype.bind() - JavaScript | MDN\"})}),`\n`]})]})}function A(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(s,o)})):s(o)}var G=A;return q(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),j=(o,e)=>{for(var d in e)t(o,d,{get:e[d],enumerable:!0})},a=(o,e,d,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!b.call(o,c)&&c!==d&&t(o,c,{get:()=>e[c],enumerable:!(r=m(e,c))||r.enumerable});return o};var q=(o,e,d)=>(d=o!=null?h(g(o)):{},a(e||!o||!o.__esModule?t(d,\"default\",{value:o,enumerable:!0}):d,o)),v=o=>a(t({},\"__esModule\",{value:!0}),o);var l=f((y,i)=>{i.exports=_jsx_runtime});var G={};j(G,{default:()=>s,frontmatter:()=>A});var n=q(l()),A={title:\"Explique `Function.prototype.bind`\"};function u(o){let e={a:\"a\",blockquote:\"blockquote\",code:\"code\",em:\"em\",h2:\"h2\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"O m\\xE9todo \",(0,n.jsx)(e.code,{children:\"bind()\"}),\" cria uma nova fun\\xE7\\xE3o que, quando chamada, tem sua palavra-chave \",(0,n.jsx)(e.code,{children:\"this\"}),\" definida para o valor fornecido, com uma determinada sequ\\xEAncia de argumentos precedendo qualquer um fornecido quando a nova fun\\xE7\\xE3o \\xE9 chamada.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.em,{children:[\"Source: \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind\",children:\"Function.prototype.bind() - JavaScript | MDN\"})]})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"bind()\"}),\" \\xE9 mais \\xFAtil para vincular o valor do \",(0,n.jsx)(e.code,{children:\"this\"}),\" em m\\xE9todos de classes que voc\\xEA quer passar para outras fun\\xE7\\xF5es. Isso foi frequentemente feito em m\\xE9todos de classe de componente React que n\\xE3o foram definidos usando arrow functions.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const john = {\n  age: 42,\n  getAge: function () {\n    return this.age;\n  },\n};\n\nconsole.log(john.getAge()); // 42\n\nconst unboundGetAge = john.getAge;\nconsole.log(unboundGetAge()); // undefined\n\nconst boundGetAge = john.getAge.bind(john);\nconsole.log(boundGetAge()); // 42\n\nconst mary = { age: 21 };\nconst boundGetAgeMary = john.getAge.bind(mary);\nconsole.log(boundGetAgeMary()); // 21\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"No exemplo acima, quando o m\\xE9todo \",(0,n.jsx)(e.code,{children:\"getAge\"}),\" \\xE9 chamado sem um objeto chamado (como \",(0,n.jsx)(e.code,{children:\"unboundGetAge\"}),\"), o valor \\xE9 'indefinido' porque o valor 'this' dentro de \",(0,n.jsx)(e.code,{children:\"getAge()\"}),\" se torna o objeto global. \",(0,n.jsx)(e.code,{children:\"boundGetAge()\"}),\" tem seu \",(0,n.jsx)(e.code,{children:\"this\"}),\" ligado a \",(0,n.jsx)(e.code,{children:\"john\"}),\", portanto pode obter o \",(0,n.jsx)(e.code,{children:\"idade\"}),\" de \",(0,n.jsx)(e.code,{children:\"john\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Podemos at\\xE9 usar \",(0,n.jsx)(e.code,{children:\"getAge\"}),\" em outro objeto que n\\xE3o \\xE9 \",(0,n.jsx)(e.code,{children:\"john\"}),\"! \",(0,n.jsx)(e.code,{children:\"boundGetAgeMary\"}),\" retorna o \",(0,n.jsx)(e.code,{children:\"age\"}),\" (idade) de \",(0,n.jsx)(e.code,{children:\"mary\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Pr\\xE1tica\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Tente \",(0,n.jsxs)(e.a,{href:\"/questions/javascript/function-bind\",children:[\"implementar seu pr\\xF3prio m\\xE9todo \",(0,n.jsx)(e.code,{children:\"Function.prototype.bind()\"})]}),\" na Great Front End.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\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/docs/Web/JavaScript/Reference/Global_objects/Function/bind\",children:\"Function.prototype.bind() - JavaScript | MDN\"})}),`\n`]})]})}function s(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(u,{...o})}):u(o)}return v(G);})();\n;return Component;"
 }
\ No newline at end of file
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 522fdfb52..608e77a48 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
@@ -30,5 +30,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-function-prototype-bind/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var m=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),j=(i,n)=>{for(var c in n)d(i,c,{get:n[c],enumerable:!0})},t=(i,n,c,r)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of g(n))!b.call(i,o)&&o!==c&&d(i,o,{get:()=>n[o],enumerable:!(r=u(n,o))||r.enumerable});return i};var f=(i,n,c)=>(c=i!=null?a(p(i)):{},t(n||!i||!i.__esModule?d(c,\"default\",{value:i,enumerable:!0}):c,i)),y=i=>t(d({},\"__esModule\",{value:!0}),i);var h=m((J,l)=>{l.exports=_jsx_runtime});var G={};j(G,{default:()=>F,frontmatter:()=>A});var e=f(h()),A={title:\"\\u89E3\\u91CA JavaScript \\u4E2D\\u7684 `Function.prototype.bind`\"};function s(i){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",ul:\"ul\",li:\"li\",strong:\"strong\",hr:\"hr\",pre:\"pre\",h3:\"h3\",a:\"a\"},i.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"Function.prototype.bind\"}),\" \\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u4E2A\\u65B9\\u6CD5\\uFF0C\\u5B83\\u5141\\u8BB8\\u4F60\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\uFF0C\\u8BE5\\u51FD\\u6570\\u5177\\u6709\\u7279\\u5B9A\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u548C\\u53EF\\u9009\\u7684\\u521D\\u59CB\\u53C2\\u6570\\u3002\\u5B83\\u7684\\u4E3B\\u8981\\u76EE\\u7684\\u662F\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsxs)(n.strong,{children:[\"\\u7ED1\\u5B9A \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u4EE5\\u4FDD\\u7559\\u4E0A\\u4E0B\\u6587\"]}),\"\\uFF1A\",(0,e.jsx)(n.code,{children:\"bind\"}),\" \\u7684\\u4E3B\\u8981\\u76EE\\u7684\\u662F\\u5C06\\u51FD\\u6570\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u7ED1\\u5B9A\\u5230\\u7279\\u5B9A\\u7684\\u5BF9\\u8C61\\u3002\\u5F53\\u4F60\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"func.bind(thisArg)\"}),\" \\u65F6\\uFF0C\\u5B83\\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u4E0E \",(0,e.jsx)(n.code,{children:\"func\"}),\" \\u5177\\u6709\\u76F8\\u540C\\u4E3B\\u4F53\\u7684\\u7684\\u65B0\\u51FD\\u6570\\uFF0C\\u4F46 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6C38\\u4E45\\u7ED1\\u5B9A\\u5230 \",(0,e.jsx)(n.code,{children:\"thisArg\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u90E8\\u5206\\u5E94\\u7528\\u53C2\\u6570\"}),\"\\uFF1A\",(0,e.jsx)(n.code,{children:\"bind\"}),\" \\u8FD8\\u5141\\u8BB8\\u4F60\\u4E3A\\u65B0\\u51FD\\u6570\\u9884\\u5148\\u6307\\u5B9A\\u53C2\\u6570\\u3002\\u4F20\\u9012\\u7ED9 \",(0,e.jsx)(n.code,{children:\"bind\"}),\" \\u7684\\u4EFB\\u4F55\\u53C2\\u6570\\uFF08\\u5728 \",(0,e.jsx)(n.code,{children:\"thisArg\"}),\" \\u4E4B\\u540E\\uFF09\\u90FD\\u5C06\\u5728\\u8C03\\u7528\\u65B0\\u51FD\\u6570\\u65F6\\u6DFB\\u52A0\\u5230\\u53C2\\u6570\\u5217\\u8868\\u7684\\u524D\\u9762\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u65B9\\u6CD5\\u501F\\u7528\"}),\"\\uFF1A\",(0,e.jsx)(n.code,{children:\"bind\"}),\" \\u5141\\u8BB8\\u4F60\\u4ECE\\u4E00\\u4E2A\\u5BF9\\u8C61\\u501F\\u7528\\u65B9\\u6CD5\\u5E76\\u5C06\\u5176\\u5E94\\u7528\\u4E8E\\u53E6\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u5373\\u4F7F\\u5B83\\u4EEC\\u6700\\u521D\\u5E76\\u975E\\u8BBE\\u8BA1\\u4E3A\\u4E0E\\u8BE5\\u5BF9\\u8C61\\u4E00\\u8D77\\u4F7F\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"bind\"}),\" \\u65B9\\u6CD5\\u5728\\u9700\\u8981\\u786E\\u4FDD\\u4F7F\\u7528\\u7279\\u5B9A\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u8C03\\u7528\\u51FD\\u6570\\u7684\\u60C5\\u51B5\\u4E0B\\u7279\\u522B\\u6709\\u7528\\uFF0C\\u4F8B\\u5982\\u5728\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u3001\\u56DE\\u8C03\\u6216\\u65B9\\u6CD5\\u501F\\u7528\\u4E2D\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:(0,e.jsx)(n.code,{children:\"Function.prototype.bind\"})}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"Function.prototype.bind\"}),\" \\u5141\\u8BB8\\u4F60\\u521B\\u5EFA\\u4E00\\u4E2A\\u5177\\u6709\\u7279\\u5B9A \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u7684\\u65B0\\u51FD\\u6570\\uFF0C\\u4EE5\\u53CA\\u53EF\\u9009\\u7684\\u9884\\u8BBE\\u53C2\\u6570\\u3002\",(0,e.jsx)(n.code,{children:\"bind()\"}),\" \\u5BF9\\u4E8E\\u5728\\u8981\\u4F20\\u9012\\u7ED9\\u5176\\u4ED6\\u51FD\\u6570\\u7684\\u7C7B\\u65B9\\u6CD5\\u4E2D\\u4FDD\\u7559 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"bind\"}),\" \\u7ECF\\u5E38\\u7528\\u4E8E\\u65E7\\u7248 React \\u7C7B\\u7EC4\\u4EF6\\u65B9\\u6CD5\\uFF0C\\u8FD9\\u4E9B\\u65B9\\u6CD5\\u4E0D\\u662F\\u4F7F\\u7528\\u7BAD\\u5934\\u51FD\\u6570\\u5B9A\\u4E49\\u7684\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const john = {\n  age: 42,\n  getAge: function () {\n    return this.age;\n  },\n};\n\nconsole.log(john.getAge()); // 42\n\nconst unboundGetAge = john.getAge;\nconsole.log(unboundGetAge()); // undefined\n\nconst boundGetAge = john.getAge.bind(john);\nconsole.log(boundGetAge()); // 42\n\nconst mary = { age: 21 };\nconst boundGetAgeMary = john.getAge.bind(mary);\nconsole.log(boundGetAgeMary()); // 21\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u4E0A\\u9762\\u7684\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u5F53 \",(0,e.jsx)(n.code,{children:\"getAge\"}),\" \\u65B9\\u6CD5\\u5728\\u6CA1\\u6709\\u8C03\\u7528\\u5BF9\\u8C61\\uFF08\\u4F5C\\u4E3A \",(0,e.jsx)(n.code,{children:\"unboundGetAge\"}),\"\\uFF09\\u7684\\u60C5\\u51B5\\u4E0B\\u88AB\\u8C03\\u7528\\u65F6\\uFF0C\\u8BE5\\u503C\\u4E3A \",(0,e.jsx)(n.code,{children:\"undefined\"}),\"\\uFF0C\\u56E0\\u4E3A \",(0,e.jsx)(n.code,{children:\"getAge()\"}),\" \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u53D8\\u4E3A\\u5168\\u5C40\\u5BF9\\u8C61\\u3002\",(0,e.jsx)(n.code,{children:\"boundGetAge()\"}),\" \\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7ED1\\u5B9A\\u5230 \",(0,e.jsx)(n.code,{children:\"john\"}),\"\\uFF0C\\u56E0\\u6B64\\u5B83\\u80FD\\u591F\\u83B7\\u53D6 \",(0,e.jsx)(n.code,{children:\"john\"}),\" \\u7684 \",(0,e.jsx)(n.code,{children:\"age\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u6211\\u4EEC\\u751A\\u81F3\\u53EF\\u4EE5\\u5728\\u53E6\\u4E00\\u4E2A\\u4E0D\\u662F \",(0,e.jsx)(n.code,{children:\"john\"}),\" \\u7684\\u5BF9\\u8C61\\u4E0A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"getAge\"}),\"\\uFF01\",(0,e.jsx)(n.code,{children:\"boundGetAgeMary\"}),\" \\u8FD4\\u56DE \",(0,e.jsx)(n.code,{children:\"mary\"}),\" \\u7684 \",(0,e.jsx)(n.code,{children:\"age\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4EE5\\u4E0B\\u662F\\u7ECF\\u5E38\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"bind\"}),\" \\u7684\\u4E00\\u4E9B\\u5E38\\u89C1\\u573A\\u666F\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u5728\\u56DE\\u8C03\\u4E2D\\u4FDD\\u7559\\u4E0A\\u4E0B\\u6587\\u5E76\\u4FEE\\u590D \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5F53\\u4F60\\u5C06\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A\\u56DE\\u8C03\\u4F20\\u9012\\u65F6\\uFF0C\\u51FD\\u6570\\u5185\\u90E8\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u53EF\\u80FD\\u65E0\\u6CD5\\u9884\\u6D4B\\uFF0C\\u56E0\\u4E3A\\u5B83\\u7531\\u6267\\u884C\\u4E0A\\u4E0B\\u6587\\u51B3\\u5B9A\\u3002\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"bind()\"}),\" \\u6709\\u52A9\\u4E8E\\u786E\\u4FDD\\u7EF4\\u62A4\\u6B63\\u786E\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Person {\n  constructor(firstName) {\n    this.firstName = firstName;\n  }\n  greet() {\n    console.log(\\`Hello, my name is \\${this.firstName}\\`);\n  }\n}\n\nconst john = new Person('John');\n\n// Without bind(), \\`this\\` inside the callback will be the global object\nsetTimeout(john.greet, 1000); // Output: \"Hello, my name is undefined\"\n\n// Using bind() to fix the \\`this\\` value\nsetTimeout(john.greet.bind(john), 2000); // Output: \"Hello, my name is John\"\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F60\\u4E5F\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions\",children:\"\\u7BAD\\u5934\\u51FD\\u6570\"}),\" \\u6765\\u5B9A\\u4E49\\u7C7B\\u65B9\\u6CD5\\uFF0C\\u800C\\u4E0D\\u662F\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"bind\"}),\"\\u3002\\u7BAD\\u5934\\u51FD\\u6570\\u5C06 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u7ED1\\u5B9A\\u5230\\u5176\\u8BCD\\u6CD5\\u4E0A\\u4E0B\\u6587\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Person {\n  constructor(name) {\n    this.name = name;\n  }\n  greet = () => {\n    console.log(\\`Hello, my name is \\${this.name}\\`);\n  };\n}\n\nconst john = new Person('John Doe');\nsetTimeout(john.greet, 1000); // Output: \"Hello, my name is John Doe\"\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u7684\\u90E8\\u5206\\u5E94\\u7528\\uFF08\\u67EF\\u91CC\\u5316\\uFF09\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"bind\"}),\" \\u53EF\\u4EE5\\u7528\\u6765\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\uFF0C\\u5176\\u4E2D\\u9884\\u5148\\u8BBE\\u7F6E\\u4E86\\u4E00\\u4E9B\\u53C2\\u6570\\u3002\\u8FD9\\u88AB\\u79F0\\u4E3A\\u90E8\\u5206\\u5E94\\u7528\\u6216\\u67EF\\u91CC\\u5316\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function multiply(a, b) {\n  return a * b;\n}\n\n// \\u4F7F\\u7528 bind() \\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\uFF0C\\u5176\\u4E2D\\u9884\\u5148\\u8BBE\\u7F6E\\u4E86\\u4E00\\u4E9B\\u53C2\\u6570\nconst multiplyBy5 = multiply.bind(null, 5);\nconsole.log(multiplyBy5(3)); // Output: 15\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u65B9\\u6CD5\\u501F\\u7528\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"bind\"}),\" \\u5141\\u8BB8\\u4F60\\u4ECE\\u4E00\\u4E2A\\u5BF9\\u8C61\\u501F\\u7528\\u65B9\\u6CD5\\u5E76\\u5C06\\u5B83\\u4EEC\\u5E94\\u7528\\u4E8E\\u53E6\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u5373\\u4F7F\\u5B83\\u4EEC\\u6700\\u521D\\u4E0D\\u662F\\u4E3A\\u8BE5\\u5BF9\\u8C61\\u8BBE\\u8BA1\\u7684\\u3002\\u5F53\\u4F60\\u9700\\u8981\\u5728\\u4E0D\\u540C\\u5BF9\\u8C61\\u4E4B\\u95F4\\u91CD\\u7528\\u529F\\u80FD\\u65F6\\uFF0C\\u8FD9\\u4F1A\\u5F88\\u6709\\u7528\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const person = {\n  name: 'John',\n  greet: function () {\n    console.log(\\`Hello, \\${this.name}!\\`);\n  },\n};\n\nconst greetPerson = person.greet.bind({ name: 'Alice' });\ngreetPerson(); // Output: Hello, Alice!\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7EC3\\u4E60\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5C1D\\u8BD5\\u5728 GreatFrontEnd \\u4E0A\",(0,e.jsxs)(n.a,{href:\"/questions/javascript/function-bind\",children:[\"\\u5B9E\\u73B0\\u4F60\\u81EA\\u5DF1\\u7684 \",(0,e.jsx)(n.code,{children:\"Function.prototype.bind()\"}),\" \\u65B9\\u6CD5\"]}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind\",children:\"Function.prototype.bind() - JavaScript | MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/bind\",children:\"Function Binding | javascript.info\"})}),`\n`]})]})}function v(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,Object.assign({},i,{children:(0,e.jsx)(s,i)})):s(i)}var F=v;return y(G);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var d=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var j=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),f=(i,n)=>{for(var c in n)d(i,c,{get:n[c],enumerable:!0})},t=(i,n,c,r)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of p(n))!m.call(i,o)&&o!==c&&d(i,o,{get:()=>n[o],enumerable:!(r=g(n,o))||r.enumerable});return i};var y=(i,n,c)=>(c=i!=null?u(b(i)):{},t(n||!i||!i.__esModule?d(c,\"default\",{value:i,enumerable:!0}):c,i)),A=i=>t(d({},\"__esModule\",{value:!0}),i);var h=j((x,l)=>{l.exports=_jsx_runtime});var F={};f(F,{default:()=>a,frontmatter:()=>v});var e=y(h()),v={title:\"\\u89E3\\u91CA JavaScript \\u4E2D\\u7684 `Function.prototype.bind`\"};function s(i){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"Function.prototype.bind\"}),\" \\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u4E2A\\u65B9\\u6CD5\\uFF0C\\u5B83\\u5141\\u8BB8\\u4F60\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\uFF0C\\u8BE5\\u51FD\\u6570\\u5177\\u6709\\u7279\\u5B9A\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u548C\\u53EF\\u9009\\u7684\\u521D\\u59CB\\u53C2\\u6570\\u3002\\u5B83\\u7684\\u4E3B\\u8981\\u76EE\\u7684\\u662F\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsxs)(n.strong,{children:[\"\\u7ED1\\u5B9A \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u4EE5\\u4FDD\\u7559\\u4E0A\\u4E0B\\u6587\"]}),\"\\uFF1A\",(0,e.jsx)(n.code,{children:\"bind\"}),\" \\u7684\\u4E3B\\u8981\\u76EE\\u7684\\u662F\\u5C06\\u51FD\\u6570\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u7ED1\\u5B9A\\u5230\\u7279\\u5B9A\\u7684\\u5BF9\\u8C61\\u3002\\u5F53\\u4F60\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"func.bind(thisArg)\"}),\" \\u65F6\\uFF0C\\u5B83\\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u4E0E \",(0,e.jsx)(n.code,{children:\"func\"}),\" \\u5177\\u6709\\u76F8\\u540C\\u4E3B\\u4F53\\u7684\\u7684\\u65B0\\u51FD\\u6570\\uFF0C\\u4F46 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6C38\\u4E45\\u7ED1\\u5B9A\\u5230 \",(0,e.jsx)(n.code,{children:\"thisArg\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u90E8\\u5206\\u5E94\\u7528\\u53C2\\u6570\"}),\"\\uFF1A\",(0,e.jsx)(n.code,{children:\"bind\"}),\" \\u8FD8\\u5141\\u8BB8\\u4F60\\u4E3A\\u65B0\\u51FD\\u6570\\u9884\\u5148\\u6307\\u5B9A\\u53C2\\u6570\\u3002\\u4F20\\u9012\\u7ED9 \",(0,e.jsx)(n.code,{children:\"bind\"}),\" \\u7684\\u4EFB\\u4F55\\u53C2\\u6570\\uFF08\\u5728 \",(0,e.jsx)(n.code,{children:\"thisArg\"}),\" \\u4E4B\\u540E\\uFF09\\u90FD\\u5C06\\u5728\\u8C03\\u7528\\u65B0\\u51FD\\u6570\\u65F6\\u6DFB\\u52A0\\u5230\\u53C2\\u6570\\u5217\\u8868\\u7684\\u524D\\u9762\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u65B9\\u6CD5\\u501F\\u7528\"}),\"\\uFF1A\",(0,e.jsx)(n.code,{children:\"bind\"}),\" \\u5141\\u8BB8\\u4F60\\u4ECE\\u4E00\\u4E2A\\u5BF9\\u8C61\\u501F\\u7528\\u65B9\\u6CD5\\u5E76\\u5C06\\u5176\\u5E94\\u7528\\u4E8E\\u53E6\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u5373\\u4F7F\\u5B83\\u4EEC\\u6700\\u521D\\u5E76\\u975E\\u8BBE\\u8BA1\\u4E3A\\u4E0E\\u8BE5\\u5BF9\\u8C61\\u4E00\\u8D77\\u4F7F\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"bind\"}),\" \\u65B9\\u6CD5\\u5728\\u9700\\u8981\\u786E\\u4FDD\\u4F7F\\u7528\\u7279\\u5B9A\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u8C03\\u7528\\u51FD\\u6570\\u7684\\u60C5\\u51B5\\u4E0B\\u7279\\u522B\\u6709\\u7528\\uFF0C\\u4F8B\\u5982\\u5728\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u3001\\u56DE\\u8C03\\u6216\\u65B9\\u6CD5\\u501F\\u7528\\u4E2D\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:(0,e.jsx)(n.code,{children:\"Function.prototype.bind\"})}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"Function.prototype.bind\"}),\" \\u5141\\u8BB8\\u4F60\\u521B\\u5EFA\\u4E00\\u4E2A\\u5177\\u6709\\u7279\\u5B9A \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u7684\\u65B0\\u51FD\\u6570\\uFF0C\\u4EE5\\u53CA\\u53EF\\u9009\\u7684\\u9884\\u8BBE\\u53C2\\u6570\\u3002\",(0,e.jsx)(n.code,{children:\"bind()\"}),\" \\u5BF9\\u4E8E\\u5728\\u8981\\u4F20\\u9012\\u7ED9\\u5176\\u4ED6\\u51FD\\u6570\\u7684\\u7C7B\\u65B9\\u6CD5\\u4E2D\\u4FDD\\u7559 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"bind\"}),\" \\u7ECF\\u5E38\\u7528\\u4E8E\\u65E7\\u7248 React \\u7C7B\\u7EC4\\u4EF6\\u65B9\\u6CD5\\uFF0C\\u8FD9\\u4E9B\\u65B9\\u6CD5\\u4E0D\\u662F\\u4F7F\\u7528\\u7BAD\\u5934\\u51FD\\u6570\\u5B9A\\u4E49\\u7684\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const john = {\n  age: 42,\n  getAge: function () {\n    return this.age;\n  },\n};\n\nconsole.log(john.getAge()); // 42\n\nconst unboundGetAge = john.getAge;\nconsole.log(unboundGetAge()); // undefined\n\nconst boundGetAge = john.getAge.bind(john);\nconsole.log(boundGetAge()); // 42\n\nconst mary = { age: 21 };\nconst boundGetAgeMary = john.getAge.bind(mary);\nconsole.log(boundGetAgeMary()); // 21\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u4E0A\\u9762\\u7684\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u5F53 \",(0,e.jsx)(n.code,{children:\"getAge\"}),\" \\u65B9\\u6CD5\\u5728\\u6CA1\\u6709\\u8C03\\u7528\\u5BF9\\u8C61\\uFF08\\u4F5C\\u4E3A \",(0,e.jsx)(n.code,{children:\"unboundGetAge\"}),\"\\uFF09\\u7684\\u60C5\\u51B5\\u4E0B\\u88AB\\u8C03\\u7528\\u65F6\\uFF0C\\u8BE5\\u503C\\u4E3A \",(0,e.jsx)(n.code,{children:\"undefined\"}),\"\\uFF0C\\u56E0\\u4E3A \",(0,e.jsx)(n.code,{children:\"getAge()\"}),\" \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u53D8\\u4E3A\\u5168\\u5C40\\u5BF9\\u8C61\\u3002\",(0,e.jsx)(n.code,{children:\"boundGetAge()\"}),\" \\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7ED1\\u5B9A\\u5230 \",(0,e.jsx)(n.code,{children:\"john\"}),\"\\uFF0C\\u56E0\\u6B64\\u5B83\\u80FD\\u591F\\u83B7\\u53D6 \",(0,e.jsx)(n.code,{children:\"john\"}),\" \\u7684 \",(0,e.jsx)(n.code,{children:\"age\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u6211\\u4EEC\\u751A\\u81F3\\u53EF\\u4EE5\\u5728\\u53E6\\u4E00\\u4E2A\\u4E0D\\u662F \",(0,e.jsx)(n.code,{children:\"john\"}),\" \\u7684\\u5BF9\\u8C61\\u4E0A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"getAge\"}),\"\\uFF01\",(0,e.jsx)(n.code,{children:\"boundGetAgeMary\"}),\" \\u8FD4\\u56DE \",(0,e.jsx)(n.code,{children:\"mary\"}),\" \\u7684 \",(0,e.jsx)(n.code,{children:\"age\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4EE5\\u4E0B\\u662F\\u7ECF\\u5E38\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"bind\"}),\" \\u7684\\u4E00\\u4E9B\\u5E38\\u89C1\\u573A\\u666F\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u5728\\u56DE\\u8C03\\u4E2D\\u4FDD\\u7559\\u4E0A\\u4E0B\\u6587\\u5E76\\u4FEE\\u590D \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5F53\\u4F60\\u5C06\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A\\u56DE\\u8C03\\u4F20\\u9012\\u65F6\\uFF0C\\u51FD\\u6570\\u5185\\u90E8\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u53EF\\u80FD\\u65E0\\u6CD5\\u9884\\u6D4B\\uFF0C\\u56E0\\u4E3A\\u5B83\\u7531\\u6267\\u884C\\u4E0A\\u4E0B\\u6587\\u51B3\\u5B9A\\u3002\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"bind()\"}),\" \\u6709\\u52A9\\u4E8E\\u786E\\u4FDD\\u7EF4\\u62A4\\u6B63\\u786E\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Person {\n  constructor(firstName) {\n    this.firstName = firstName;\n  }\n  greet() {\n    console.log(\\`Hello, my name is \\${this.firstName}\\`);\n  }\n}\n\nconst john = new Person('John');\n\n// Without bind(), \\`this\\` inside the callback will be the global object\nsetTimeout(john.greet, 1000); // Output: \"Hello, my name is undefined\"\n\n// Using bind() to fix the \\`this\\` value\nsetTimeout(john.greet.bind(john), 2000); // Output: \"Hello, my name is John\"\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F60\\u4E5F\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions\",children:\"\\u7BAD\\u5934\\u51FD\\u6570\"}),\" \\u6765\\u5B9A\\u4E49\\u7C7B\\u65B9\\u6CD5\\uFF0C\\u800C\\u4E0D\\u662F\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"bind\"}),\"\\u3002\\u7BAD\\u5934\\u51FD\\u6570\\u5C06 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u7ED1\\u5B9A\\u5230\\u5176\\u8BCD\\u6CD5\\u4E0A\\u4E0B\\u6587\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Person {\n  constructor(name) {\n    this.name = name;\n  }\n  greet = () => {\n    console.log(\\`Hello, my name is \\${this.name}\\`);\n  };\n}\n\nconst john = new Person('John Doe');\nsetTimeout(john.greet, 1000); // Output: \"Hello, my name is John Doe\"\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u7684\\u90E8\\u5206\\u5E94\\u7528\\uFF08\\u67EF\\u91CC\\u5316\\uFF09\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"bind\"}),\" \\u53EF\\u4EE5\\u7528\\u6765\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\uFF0C\\u5176\\u4E2D\\u9884\\u5148\\u8BBE\\u7F6E\\u4E86\\u4E00\\u4E9B\\u53C2\\u6570\\u3002\\u8FD9\\u88AB\\u79F0\\u4E3A\\u90E8\\u5206\\u5E94\\u7528\\u6216\\u67EF\\u91CC\\u5316\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function multiply(a, b) {\n  return a * b;\n}\n\n// \\u4F7F\\u7528 bind() \\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\uFF0C\\u5176\\u4E2D\\u9884\\u5148\\u8BBE\\u7F6E\\u4E86\\u4E00\\u4E9B\\u53C2\\u6570\nconst multiplyBy5 = multiply.bind(null, 5);\nconsole.log(multiplyBy5(3)); // Output: 15\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u65B9\\u6CD5\\u501F\\u7528\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"bind\"}),\" \\u5141\\u8BB8\\u4F60\\u4ECE\\u4E00\\u4E2A\\u5BF9\\u8C61\\u501F\\u7528\\u65B9\\u6CD5\\u5E76\\u5C06\\u5B83\\u4EEC\\u5E94\\u7528\\u4E8E\\u53E6\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u5373\\u4F7F\\u5B83\\u4EEC\\u6700\\u521D\\u4E0D\\u662F\\u4E3A\\u8BE5\\u5BF9\\u8C61\\u8BBE\\u8BA1\\u7684\\u3002\\u5F53\\u4F60\\u9700\\u8981\\u5728\\u4E0D\\u540C\\u5BF9\\u8C61\\u4E4B\\u95F4\\u91CD\\u7528\\u529F\\u80FD\\u65F6\\uFF0C\\u8FD9\\u4F1A\\u5F88\\u6709\\u7528\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const person = {\n  name: 'John',\n  greet: function () {\n    console.log(\\`Hello, \\${this.name}!\\`);\n  },\n};\n\nconst greetPerson = person.greet.bind({ name: 'Alice' });\ngreetPerson(); // Output: Hello, Alice!\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7EC3\\u4E60\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5C1D\\u8BD5\\u5728 GreatFrontEnd \\u4E0A\",(0,e.jsxs)(n.a,{href:\"/questions/javascript/function-bind\",children:[\"\\u5B9E\\u73B0\\u4F60\\u81EA\\u5DF1\\u7684 \",(0,e.jsx)(n.code,{children:\"Function.prototype.bind()\"}),\" \\u65B9\\u6CD5\"]}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind\",children:\"Function.prototype.bind() - JavaScript | MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/bind\",children:\"Function Binding | javascript.info\"})}),`\n`]})]})}function a(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,{...i,children:(0,e.jsx)(s,{...i})}):s(i)}return A(F);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-hoisting/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-hoisting/en-US.json
index 7ce1a6ac6..c6fb19413 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-hoisting/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-hoisting/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-hoisting/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),v=(i,e)=>{for(var r in e)t(i,r,{get:e[r],enumerable:!0})},a=(i,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of f(e))!g.call(i,o)&&o!==r&&t(i,o,{get:()=>e[o],enumerable:!(c=u(e,o))||c.enumerable});return i};var m=(i,e,r)=>(r=i!=null?h(p(i)):{},a(e||!i||!i.__esModule?t(r,\"default\",{value:i,enumerable:!0}):r,i)),w=i=>a(t({},\"__esModule\",{value:!0}),i);var l=b((j,d)=>{d.exports=_jsx_runtime});var R={};v(R,{default:()=>x,frontmatter:()=>y});var n=m(l()),y={title:'Explain the concept of \"hoisting\" in JavaScript'};function s(i){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\",strong:\"strong\",code:\"code\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",hr:\"hr\",h3:\"h3\",pre:\"pre\",a:\"a\",blockquote:\"blockquote\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:'Hoisting is a JavaScript mechanism where variable and function declarations are moved (\"hoisted\") to the top of their containing scope during the compile phase.'}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"Variable declarations (\",(0,n.jsx)(e.code,{children:\"var\"}),\")\"]}),\": Declarations are hoisted, but not initializations. The value of the variable is \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" if accessed before initialization.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"Variable declarations (\",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\")\"]}),\": Declarations are hoisted, but not initialized. Accessing them results in \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\" until the actual declaration is encountered.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"Function expressions (\",(0,n.jsx)(e.code,{children:\"var\"}),\")\"]}),\": Declarations are hoisted, but not initializations. The value of the variable is \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" if accessed before initialization.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"Function declarations (\",(0,n.jsx)(e.code,{children:\"function\"}),\")\"]}),\": Both declaration and definition are fully hoisted.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"Class declarations (\",(0,n.jsx)(e.code,{children:\"class\"}),\")\"]}),\": Declarations are hoisted, but not initialized. Accessing them results in \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\" until the actual declaration is encountered.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"Import declarations (\",(0,n.jsx)(e.code,{children:\"import\"}),\")\"]}),\": Declarations are hoisted, and side effects of importing the module are executed before the rest of the code.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"The following behavior summarizes the result of accessing the variables before they are declared.\"}),`\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:\"Declaration\"}),(0,n.jsx)(e.th,{children:\"Accessing before declaration\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"var foo\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"undefined\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"let foo\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"ReferenceError\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"const foo\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"ReferenceError\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"class Foo\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"ReferenceError\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"var foo = function() { ... }\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"undefined\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"function foo() { ... }\"})}),(0,n.jsx)(e.td,{children:\"Normal\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"import\"})}),(0,n.jsx)(e.td,{children:\"Normal\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Hoisting\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hoisting is a term used to explain the behavior of variable declarations in JavaScript code.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Variables declared or initialized with the \",(0,n.jsx)(e.code,{children:\"var\"}),' keyword will have their declaration \"moved\" up to the top of their containing scope during compilation, which we refer to as hoisting.']}),`\n`,(0,n.jsx)(e.p,{children:'Only the declaration is hoisted, the initialization/assignment (if there is one), will stay where it is. Note that the declaration is not actually moved \\u2013 the JavaScript engine parses the declarations during compilation and becomes aware of variables and their scopes, but it is easier to understand this behavior by visualizing the declarations as being \"hoisted\" to the top of their scope.'}),`\n`,(0,n.jsx)(e.p,{children:\"Let's explain with a few code samples. Note that the code for these examples should be executed within a module scope instead of being entered line by line into a REPL like the browser console.\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Hoisting of variables declared using \",(0,n.jsx)(e.code,{children:\"var\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Hoisting is seen in action here as even though \",(0,n.jsx)(e.code,{children:\"foo\"}),\" is declared and initialized after the first \",(0,n.jsx)(e.code,{children:\"console.log()\"}),\", the first \",(0,n.jsx)(e.code,{children:\"console.log()\"}),\" prints the value of \",(0,n.jsx)(e.code,{children:\"foo\"}),\" as \",(0,n.jsx)(e.code,{children:\"undefined\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(foo); // undefined\nvar foo = 1;\nconsole.log(foo); // 1\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"You can visualize the code as:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var foo;\nconsole.log(foo); // undefined\nfoo = 1;\nconsole.log(foo); // 1\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Hoisting of variables declared using \",(0,n.jsx)(e.code,{children:\"let\"}),\", \",(0,n.jsx)(e.code,{children:\"const\"}),\", and \",(0,n.jsx)(e.code,{children:\"class\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Variables declared via \",(0,n.jsx)(e.code,{children:\"let\"}),\", \",(0,n.jsx)(e.code,{children:\"const\"}),\", and \",(0,n.jsx)(e.code,{children:\"class\"}),\" are hoisted as well. However, unlike \",(0,n.jsx)(e.code,{children:\"var\"}),\" and \",(0,n.jsx)(e.code,{children:\"function\"}),\", they are not initialized and accessing them before the declaration will result in a \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),' exception. The variable is in a \"temporal dead zone\" from the start of the block until the declaration is processed.']}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`y; // ReferenceError: Cannot access 'y' before initialization\nlet y = 'local';\n`})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`z; // ReferenceError: Cannot access 'z' before initialization\nconst z = 'local';\n`})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`Foo; // ReferenceError: Cannot access 'Foo' before initialization\n\nclass Foo {\n  constructor() {}\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Hoisting of function expressions\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Function expressions are functions written in the form of variable declarations. Since they are also declared using \",(0,n.jsx)(e.code,{children:\"var\"}),\", only the variable declaration is hoisted.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(bar); // undefined\nbar(); // Uncaught TypeError: bar is not a function\n\nvar bar = function () {\n  console.log('BARRRR');\n};\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Hoisting of function declarations\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Function declarations use the \",(0,n.jsx)(e.code,{children:\"function\"}),\" keyword. Unlike function expressions, function declarations have both the declaration and definition hoisted, thus they can be called even before they are declared.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(foo); // [Function: foo]\nfoo(); // 'FOOOOO'\n\nfunction foo() {\n  console.log('FOOOOO');\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The same applies to generators (\",(0,n.jsx)(e.code,{children:\"function*\"}),\"), async functions (\",(0,n.jsx)(e.code,{children:\"async function\"}),\"), and async function generators (\",(0,n.jsx)(e.code,{children:\"async function*\"}),\").\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Hoisting of \",(0,n.jsx)(e.code,{children:\"import\"}),\" statements\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Import declarations are hoisted. The identifiers the imports introduce are available in the entire module scope, and their side effects are produced before the rest of the module's code runs.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`foo.doSomething(); // Works normally.\n\nimport foo from './modules/foo';\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Under the hood\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In reality, JavaScript creates all variables in the current scope before it even tries to execute the code. Variables created using \",(0,n.jsx)(e.code,{children:\"var\"}),\" keyword will have the value of \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" where variables created using \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" keywords will be marked as \",(0,n.jsx)(e.code,{children:\"<value unavailable>\"}),\". Thus, accessing them will cause a \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\" preventing you to access them before initialization.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In ECMAScript specifications \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" declarations are \",(0,n.jsx)(e.a,{href:\"https://tc39.es/ecma262/#sec-let-and-const-declarations\",children:\"explained as below\"}),\":\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"The variables are created when their containing Environment Record is instantiated but may not be accessed in any way until the variable's LexicalBinding is evaluated.\"}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"However, this statement is \",(0,n.jsxs)(e.a,{href:\"https://tc39.es/ecma262/#sec-variable-statement\",children:[\"a little different for the \",(0,n.jsx)(e.code,{children:\"var\"}),\" keyword\"]}),\":\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"Var variables are created when their containing Environment Record is instantiated and are initialized to \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" when created.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Modern practices\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In practice, modern code bases avoid using \",(0,n.jsx)(e.code,{children:\"var\"}),\" and use \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" exclusively. It is recommended to declare and initialize your variables and import statements at the top of the containing scope/module to eliminate the mental overhead of tracking when a variable can be used.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"ESLint is a static code analyzer that can find violations of such cases with the following rules:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://eslint.org/docs/latest/rules/no-use-before-define\",children:(0,n.jsx)(e.code,{children:\"no-use-before-define\"})}),\": This rule will warn when it encounters a reference to an identifier that has not yet been declared.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://eslint.org/docs/latest/rules/no-undef\",children:(0,n.jsx)(e.code,{children:\"no-undef\"})}),\": This rule will warn when it encounters a reference to an identifier that has not yet been declared.\"]}),`\n`]}),`\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/Hoisting\",children:\"Hoisting | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/what-is-hoisting-in-javascript\",children:\"What is Hoisting in JavaScript?\"})}),`\n`]})]})}function z(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(s,i)})):s(i)}var x=z;return w(R);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var v=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),m=(i,e)=>{for(var r in e)t(i,r,{get:e[r],enumerable:!0})},a=(i,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!b.call(i,o)&&o!==r&&t(i,o,{get:()=>e[o],enumerable:!(c=f(e,o))||c.enumerable});return i};var w=(i,e,r)=>(r=i!=null?u(g(i)):{},a(e||!i||!i.__esModule?t(r,\"default\",{value:i,enumerable:!0}):r,i)),y=i=>a(t({},\"__esModule\",{value:!0}),i);var l=v((E,d)=>{d.exports=_jsx_runtime});var x={};m(x,{default:()=>h,frontmatter:()=>z});var n=w(l()),z={title:'Explain the concept of \"hoisting\" in JavaScript'};function s(i){let e={a:\"a\",blockquote:\"blockquote\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:'Hoisting is a JavaScript mechanism where variable and function declarations are moved (\"hoisted\") to the top of their containing scope during the compile phase.'}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"Variable declarations (\",(0,n.jsx)(e.code,{children:\"var\"}),\")\"]}),\": Declarations are hoisted, but not initializations. The value of the variable is \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" if accessed before initialization.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"Variable declarations (\",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\")\"]}),\": Declarations are hoisted, but not initialized. Accessing them results in \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\" until the actual declaration is encountered.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"Function expressions (\",(0,n.jsx)(e.code,{children:\"var\"}),\")\"]}),\": Declarations are hoisted, but not initializations. The value of the variable is \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" if accessed before initialization.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"Function declarations (\",(0,n.jsx)(e.code,{children:\"function\"}),\")\"]}),\": Both declaration and definition are fully hoisted.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"Class declarations (\",(0,n.jsx)(e.code,{children:\"class\"}),\")\"]}),\": Declarations are hoisted, but not initialized. Accessing them results in \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\" until the actual declaration is encountered.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"Import declarations (\",(0,n.jsx)(e.code,{children:\"import\"}),\")\"]}),\": Declarations are hoisted, and side effects of importing the module are executed before the rest of the code.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"The following behavior summarizes the result of accessing the variables before they are declared.\"}),`\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:\"Declaration\"}),(0,n.jsx)(e.th,{children:\"Accessing before declaration\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"var foo\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"undefined\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"let foo\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"ReferenceError\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"const foo\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"ReferenceError\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"class Foo\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"ReferenceError\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"var foo = function() { ... }\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"undefined\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"function foo() { ... }\"})}),(0,n.jsx)(e.td,{children:\"Normal\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"import\"})}),(0,n.jsx)(e.td,{children:\"Normal\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Hoisting\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hoisting is a term used to explain the behavior of variable declarations in JavaScript code.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Variables declared or initialized with the \",(0,n.jsx)(e.code,{children:\"var\"}),' keyword will have their declaration \"moved\" up to the top of their containing scope during compilation, which we refer to as hoisting.']}),`\n`,(0,n.jsx)(e.p,{children:'Only the declaration is hoisted, the initialization/assignment (if there is one), will stay where it is. Note that the declaration is not actually moved \\u2013 the JavaScript engine parses the declarations during compilation and becomes aware of variables and their scopes, but it is easier to understand this behavior by visualizing the declarations as being \"hoisted\" to the top of their scope.'}),`\n`,(0,n.jsx)(e.p,{children:\"Let's explain with a few code samples. Note that the code for these examples should be executed within a module scope instead of being entered line by line into a REPL like the browser console.\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Hoisting of variables declared using \",(0,n.jsx)(e.code,{children:\"var\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Hoisting is seen in action here as even though \",(0,n.jsx)(e.code,{children:\"foo\"}),\" is declared and initialized after the first \",(0,n.jsx)(e.code,{children:\"console.log()\"}),\", the first \",(0,n.jsx)(e.code,{children:\"console.log()\"}),\" prints the value of \",(0,n.jsx)(e.code,{children:\"foo\"}),\" as \",(0,n.jsx)(e.code,{children:\"undefined\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(foo); // undefined\nvar foo = 1;\nconsole.log(foo); // 1\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"You can visualize the code as:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var foo;\nconsole.log(foo); // undefined\nfoo = 1;\nconsole.log(foo); // 1\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Hoisting of variables declared using \",(0,n.jsx)(e.code,{children:\"let\"}),\", \",(0,n.jsx)(e.code,{children:\"const\"}),\", and \",(0,n.jsx)(e.code,{children:\"class\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Variables declared via \",(0,n.jsx)(e.code,{children:\"let\"}),\", \",(0,n.jsx)(e.code,{children:\"const\"}),\", and \",(0,n.jsx)(e.code,{children:\"class\"}),\" are hoisted as well. However, unlike \",(0,n.jsx)(e.code,{children:\"var\"}),\" and \",(0,n.jsx)(e.code,{children:\"function\"}),\", they are not initialized and accessing them before the declaration will result in a \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),' exception. The variable is in a \"temporal dead zone\" from the start of the block until the declaration is processed.']}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`y; // ReferenceError: Cannot access 'y' before initialization\nlet y = 'local';\n`})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`z; // ReferenceError: Cannot access 'z' before initialization\nconst z = 'local';\n`})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`Foo; // ReferenceError: Cannot access 'Foo' before initialization\n\nclass Foo {\n  constructor() {}\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Hoisting of function expressions\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Function expressions are functions written in the form of variable declarations. Since they are also declared using \",(0,n.jsx)(e.code,{children:\"var\"}),\", only the variable declaration is hoisted.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(bar); // undefined\nbar(); // Uncaught TypeError: bar is not a function\n\nvar bar = function () {\n  console.log('BARRRR');\n};\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Hoisting of function declarations\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Function declarations use the \",(0,n.jsx)(e.code,{children:\"function\"}),\" keyword. Unlike function expressions, function declarations have both the declaration and definition hoisted, thus they can be called even before they are declared.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(foo); // [Function: foo]\nfoo(); // 'FOOOOO'\n\nfunction foo() {\n  console.log('FOOOOO');\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The same applies to generators (\",(0,n.jsx)(e.code,{children:\"function*\"}),\"), async functions (\",(0,n.jsx)(e.code,{children:\"async function\"}),\"), and async function generators (\",(0,n.jsx)(e.code,{children:\"async function*\"}),\").\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Hoisting of \",(0,n.jsx)(e.code,{children:\"import\"}),\" statements\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Import declarations are hoisted. The identifiers the imports introduce are available in the entire module scope, and their side effects are produced before the rest of the module's code runs.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`foo.doSomething(); // Works normally.\n\nimport foo from './modules/foo';\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Under the hood\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In reality, JavaScript creates all variables in the current scope before it even tries to execute the code. Variables created using \",(0,n.jsx)(e.code,{children:\"var\"}),\" keyword will have the value of \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" where variables created using \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" keywords will be marked as \",(0,n.jsx)(e.code,{children:\"<value unavailable>\"}),\". Thus, accessing them will cause a \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\" preventing you to access them before initialization.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In ECMAScript specifications \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" declarations are \",(0,n.jsx)(e.a,{href:\"https://tc39.es/ecma262/#sec-let-and-const-declarations\",children:\"explained as below\"}),\":\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"The variables are created when their containing Environment Record is instantiated but may not be accessed in any way until the variable's LexicalBinding is evaluated.\"}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"However, this statement is \",(0,n.jsxs)(e.a,{href:\"https://tc39.es/ecma262/#sec-variable-statement\",children:[\"a little different for the \",(0,n.jsx)(e.code,{children:\"var\"}),\" keyword\"]}),\":\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"Var variables are created when their containing Environment Record is instantiated and are initialized to \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" when created.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Modern practices\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In practice, modern code bases avoid using \",(0,n.jsx)(e.code,{children:\"var\"}),\" and use \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" exclusively. It is recommended to declare and initialize your variables and import statements at the top of the containing scope/module to eliminate the mental overhead of tracking when a variable can be used.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"ESLint is a static code analyzer that can find violations of such cases with the following rules:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://eslint.org/docs/latest/rules/no-use-before-define\",children:(0,n.jsx)(e.code,{children:\"no-use-before-define\"})}),\": This rule will warn when it encounters a reference to an identifier that has not yet been declared.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://eslint.org/docs/latest/rules/no-undef\",children:(0,n.jsx)(e.code,{children:\"no-undef\"})}),\": This rule will warn when it encounters a reference to an identifier that has not yet been declared.\"]}),`\n`]}),`\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/Hoisting\",children:\"Hoisting | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/what-is-hoisting-in-javascript\",children:\"What is Hoisting in JavaScript?\"})}),`\n`]})]})}function h(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(s,{...i})}):s(i)}return y(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-hoisting/pt-BR.json b/apps/web/src/__generated__/questions/quiz/explain-hoisting/pt-BR.json
index 53709e38a..5126351cf 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-hoisting/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-hoisting/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-hoisting/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),v=(o,e)=>{for(var n in e)s(o,n,{get:e[n],enumerable:!0})},i=(o,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!h.call(o,r)&&r!==n&&s(o,r,{get:()=>e[r],enumerable:!(c=u(e,r))||c.enumerable});return o};var x=(o,e,n)=>(n=o!=null?m(f(o)):{},i(e||!o||!o.__esModule?s(n,\"default\",{value:o,enumerable:!0}):n,o)),b=o=>i(s({},\"__esModule\",{value:!0}),o);var t=g((E,d)=>{d.exports=_jsx_runtime});var _={};v(_,{default:()=>F,frontmatter:()=>O});var a=x(t()),O={title:'Explique \"hoisting\"'};function l(o){let e=Object.assign({p:\"p\",code:\"code\",pre:\"pre\"},o.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(e.p,{children:[\"Hoisting \\xE9 um termo usado para explicar o comportamento de declara\\xE7\\xF5es vari\\xE1veis em seu c\\xF3digo. Vari\\xE1veis declaradas ou inicializadas com a palavra-chave \",(0,a.jsx)(e.code,{children:\"var\"}),' ter\\xE3o sua declara\\xE7\\xE3o \"movida\" at\\xE9 o topo do escopo do m\\xF3dulo/fun\\xE7\\xE3o do escopo, a que chamamos de hoisting. No entanto, apenas a declara\\xE7\\xE3o est\\xE1 hoisted, a atribui\\xE7\\xE3o (se houver uma), ficar\\xE1 onde est\\xE1.']}),`\n`,(0,a.jsx)(e.p,{children:\"Observe que a declara\\xE7\\xE3o n\\xE3o \\xE9 realmente movida - o motor de JavaScript analisa as declara\\xE7\\xF5es durante a compila\\xE7\\xE3o e torna-se ciente das declara\\xE7\\xF5es e dos seus \\xE2mbitos. \\xC9 mais f\\xE1cil compreender este comportamento, visualizando as declara\\xE7\\xF5es como sendo hoisted at\\xE9 ao topo do seu escopo. Vamos explicar com alguns exemplos.\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`console.log(foo); // indefinido\nvar foo = 1;\nconsole.log(foo); // 1\n`})}),`\n`,(0,a.jsx)(e.p,{children:\"As declara\\xE7\\xF5es de fun\\xE7\\xE3o t\\xEAm o corpo hoisted enquanto as express\\xF5es da fun\\xE7\\xE3o (escritas na forma de declara\\xE7\\xF5es vari\\xE1veis) s\\xF3 tem a declara\\xE7\\xE3o da vari\\xE1vel hoisted.\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`// Declara\\xE7\\xE3o de fun\\xE7\\xE3o\nconsole.log(foo); // [Function: foo]\nfoo(); // 'FOOOOO'\nfunction foo() {\n  console.log('FOOOOO');\n}\nconsole.log(foo); // [Function: foo]\n\n// Function Expression\nconsole.log(bar); // undefined\nbar(); // Uncaught TypeError: bar is not a function\nvar bar = function () {\n  console.log('BARRRR');\n};\nconsole.log(bar); // [Function: bar]\n`})}),`\n`,(0,a.jsxs)(e.p,{children:[\"Vari\\xE1veis declaradas via \",(0,a.jsx)(e.code,{children:\"let\"}),\" e \",(0,a.jsx)(e.code,{children:\"const\"}),\" tamb\\xE9m sofrem o hoisted. No entanto, ao contr\\xE1rio de \",(0,a.jsx)(e.code,{children:\"var\"}),\" e \",(0,a.jsx)(e.code,{children:\"function\"}),\", eles n\\xE3o s\\xE3o inicializados e acess\\xE1-los antes que a declara\\xE7\\xE3o resulte em uma exce\\xE7\\xE3o \",(0,a.jsx)(e.code,{children:\"ReferenceError\"}),'. A vari\\xE1vel est\\xE1 em uma \"zona tempor\\xE1ria morta\" desde o in\\xEDcio do bloco at\\xE9 que a declara\\xE7\\xE3o seja processada.']}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`x; // undefined; // Erro de refer\\xEAncia: y n\\xE3o est\\xE1 definido\n\nvar x = 'local';\nlet y = 'local';\n`})})]})}function j(o={}){let{wrapper:e}=o.components||{};return e?(0,a.jsx)(e,Object.assign({},o,{children:(0,a.jsx)(l,o)})):l(o)}var F=j;return b(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var n in e)s(o,n,{get:e[n],enumerable:!0})},i=(o,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!v.call(o,r)&&r!==n&&s(o,r,{get:()=>e[r],enumerable:!(c=p(e,r))||c.enumerable});return o};var b=(o,e,n)=>(n=o!=null?u(h(o)):{},i(e||!o||!o.__esModule?s(n,\"default\",{value:o,enumerable:!0}):n,o)),O=o=>i(s({},\"__esModule\",{value:!0}),o);var t=g((q,d)=>{d.exports=_jsx_runtime});var F={};x(F,{default:()=>m,frontmatter:()=>j});var a=b(t()),j={title:'Explique \"hoisting\"'};function l(o){let e={code:\"code\",p:\"p\",pre:\"pre\",...o.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(e.p,{children:[\"Hoisting \\xE9 um termo usado para explicar o comportamento de declara\\xE7\\xF5es vari\\xE1veis em seu c\\xF3digo. Vari\\xE1veis declaradas ou inicializadas com a palavra-chave \",(0,a.jsx)(e.code,{children:\"var\"}),' ter\\xE3o sua declara\\xE7\\xE3o \"movida\" at\\xE9 o topo do escopo do m\\xF3dulo/fun\\xE7\\xE3o do escopo, a que chamamos de hoisting. No entanto, apenas a declara\\xE7\\xE3o est\\xE1 hoisted, a atribui\\xE7\\xE3o (se houver uma), ficar\\xE1 onde est\\xE1.']}),`\n`,(0,a.jsx)(e.p,{children:\"Observe que a declara\\xE7\\xE3o n\\xE3o \\xE9 realmente movida - o motor de JavaScript analisa as declara\\xE7\\xF5es durante a compila\\xE7\\xE3o e torna-se ciente das declara\\xE7\\xF5es e dos seus \\xE2mbitos. \\xC9 mais f\\xE1cil compreender este comportamento, visualizando as declara\\xE7\\xF5es como sendo hoisted at\\xE9 ao topo do seu escopo. Vamos explicar com alguns exemplos.\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`console.log(foo); // indefinido\nvar foo = 1;\nconsole.log(foo); // 1\n`})}),`\n`,(0,a.jsx)(e.p,{children:\"As declara\\xE7\\xF5es de fun\\xE7\\xE3o t\\xEAm o corpo hoisted enquanto as express\\xF5es da fun\\xE7\\xE3o (escritas na forma de declara\\xE7\\xF5es vari\\xE1veis) s\\xF3 tem a declara\\xE7\\xE3o da vari\\xE1vel hoisted.\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`// Declara\\xE7\\xE3o de fun\\xE7\\xE3o\nconsole.log(foo); // [Function: foo]\nfoo(); // 'FOOOOO'\nfunction foo() {\n  console.log('FOOOOO');\n}\nconsole.log(foo); // [Function: foo]\n\n// Function Expression\nconsole.log(bar); // undefined\nbar(); // Uncaught TypeError: bar is not a function\nvar bar = function () {\n  console.log('BARRRR');\n};\nconsole.log(bar); // [Function: bar]\n`})}),`\n`,(0,a.jsxs)(e.p,{children:[\"Vari\\xE1veis declaradas via \",(0,a.jsx)(e.code,{children:\"let\"}),\" e \",(0,a.jsx)(e.code,{children:\"const\"}),\" tamb\\xE9m sofrem o hoisted. No entanto, ao contr\\xE1rio de \",(0,a.jsx)(e.code,{children:\"var\"}),\" e \",(0,a.jsx)(e.code,{children:\"function\"}),\", eles n\\xE3o s\\xE3o inicializados e acess\\xE1-los antes que a declara\\xE7\\xE3o resulte em uma exce\\xE7\\xE3o \",(0,a.jsx)(e.code,{children:\"ReferenceError\"}),'. A vari\\xE1vel est\\xE1 em uma \"zona tempor\\xE1ria morta\" desde o in\\xEDcio do bloco at\\xE9 que a declara\\xE7\\xE3o seja processada.']}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`x; // undefined; // Erro de refer\\xEAncia: y n\\xE3o est\\xE1 definido\n\nvar x = 'local';\nlet y = 'local';\n`})})]})}function m(o={}){let{wrapper:e}=o.components||{};return e?(0,a.jsx)(e,{...o,children:(0,a.jsx)(l,{...o})}):l(o)}return O(F);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-hoisting/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-hoisting/zh-CN.json
index dbd3abd22..3b61c5161 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-hoisting/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-hoisting/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-hoisting/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),v=(c,e)=>{for(var r in e)i(c,r,{get:e[r],enumerable:!0})},l=(c,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of u(e))!g.call(c,d)&&d!==r&&i(c,d,{get:()=>e[d],enumerable:!(o=f(e,d))||o.enumerable});return c};var b=(c,e,r)=>(r=c!=null?s(p(c)):{},l(e||!c||!c.__esModule?i(r,\"default\",{value:c,enumerable:!0}):r,c)),R=c=>l(i({},\"__esModule\",{value:!0}),c);var t=m((S,h)=>{h.exports=_jsx_runtime});var O={};v(O,{default:()=>y,frontmatter:()=>j});var n=b(t()),j={title:\"\\u89E3\\u91CA JavaScript \\u4E2D\\u7684\\u201Choisting\\u201D\\uFF08\\u53D8\\u91CF\\u63D0\\u5347\\uFF09\\u6982\\u5FF5\"};function a(c){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\",strong:\"strong\",code:\"code\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",hr:\"hr\",h3:\"h3\",pre:\"pre\",a:\"a\",blockquote:\"blockquote\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hoisting\\uFF08\\u53D8\\u91CF\\u63D0\\u5347\\uFF09\\u662F\\u4E00\\u79CD JavaScript \\u673A\\u5236\\uFF0C\\u5728\\u7F16\\u8BD1\\u9636\\u6BB5\\uFF0C\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u58F0\\u660E\\u4F1A\\u88AB\\u201C\\u63D0\\u5347\\u201D\\u5230\\u5176\\u5305\\u542B\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\u3002\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"\\u53D8\\u91CF\\u58F0\\u660E (\",(0,n.jsx)(e.code,{children:\"var\"}),\")\"]}),\"\\uFF1A\\u58F0\\u660E\\u88AB\\u63D0\\u5347\\uFF0C\\u4F46\\u672A\\u521D\\u59CB\\u5316\\u3002\\u5982\\u679C\\u5728\\u4F7F\\u7528\\u524D\\u8BBF\\u95EE\\u53D8\\u91CF\\uFF0C\\u5219\\u53D8\\u91CF\\u7684\\u503C\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"\\u53D8\\u91CF\\u58F0\\u660E (\",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\")\"]}),\"\\uFF1A\\u58F0\\u660E\\u88AB\\u63D0\\u5347\\uFF0C\\u4F46\\u672A\\u521D\\u59CB\\u5316\\u3002\\u8BBF\\u95EE\\u5B83\\u4EEC\\u4F1A\\u5BFC\\u81F4 \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\"\\uFF0C\\u76F4\\u5230\\u9047\\u5230\\u5B9E\\u9645\\u7684\\u58F0\\u660E\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F (\",(0,n.jsx)(e.code,{children:\"var\"}),\")\"]}),\"\\uFF1A\\u58F0\\u660E\\u88AB\\u63D0\\u5347\\uFF0C\\u4F46\\u672A\\u521D\\u59CB\\u5316\\u3002\\u5982\\u679C\\u5728\\u4F7F\\u7528\\u524D\\u8BBF\\u95EE\\u53D8\\u91CF\\uFF0C\\u5219\\u53D8\\u91CF\\u7684\\u503C\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"\\u51FD\\u6570\\u58F0\\u660E (\",(0,n.jsx)(e.code,{children:\"function\"}),\")\"]}),\"\\uFF1A\\u58F0\\u660E\\u548C\\u5B9A\\u4E49\\u90FD\\u88AB\\u5B8C\\u5168\\u63D0\\u5347\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"\\u7C7B\\u58F0\\u660E (\",(0,n.jsx)(e.code,{children:\"class\"}),\")\"]}),\"\\uFF1A\\u58F0\\u660E\\u88AB\\u63D0\\u5347\\uFF0C\\u4F46\\u672A\\u521D\\u59CB\\u5316\\u3002\\u8BBF\\u95EE\\u5B83\\u4EEC\\u4F1A\\u5BFC\\u81F4 \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\"\\uFF0C\\u76F4\\u5230\\u9047\\u5230\\u5B9E\\u9645\\u7684\\u58F0\\u660E\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"\\u5BFC\\u5165\\u58F0\\u660E (\",(0,n.jsx)(e.code,{children:\"import\"}),\")\"]}),\"\\uFF1A\\u58F0\\u660E\\u88AB\\u63D0\\u5347\\uFF0C\\u5E76\\u4E14\\u5728\\u6267\\u884C\\u5176\\u4F59\\u4EE3\\u7801\\u4E4B\\u524D\\uFF0C\\u4F1A\\u6267\\u884C\\u5BFC\\u5165\\u6A21\\u5757\\u7684\\u526F\\u4F5C\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u884C\\u4E3A\\u603B\\u7ED3\\u4E86\\u5728\\u58F0\\u660E\\u53D8\\u91CF\\u4E4B\\u524D\\u8BBF\\u95EE\\u53D8\\u91CF\\u7684\\u7ED3\\u679C\\u3002\"}),`\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:\"\\u58F0\\u660E\"}),(0,n.jsx)(e.th,{children:\"\\u5728\\u58F0\\u660E\\u4E4B\\u524D\\u8BBF\\u95EE\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"var foo\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"undefined\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"let foo\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"ReferenceError\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"const foo\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"ReferenceError\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"class Foo\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"ReferenceError\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"var foo = function() { ... }\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"undefined\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"function foo() { ... }\"})}),(0,n.jsx)(e.td,{children:\"\\u6B63\\u5E38\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"import\"})}),(0,n.jsx)(e.td,{children:\"\\u6B63\\u5E38\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Hoisting\\uFF08\\u53D8\\u91CF\\u63D0\\u5347\\uFF09\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hoisting\\uFF08\\u53D8\\u91CF\\u63D0\\u5347\\uFF09\\u662F\\u4E00\\u4E2A\\u672F\\u8BED\\uFF0C\\u7528\\u4E8E\\u89E3\\u91CA JavaScript \\u4EE3\\u7801\\u4E2D\\u53D8\\u91CF\\u58F0\\u660E\\u7684\\u884C\\u4E3A\\u3002\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u5173\\u952E\\u5B57\\u58F0\\u660E\\u6216\\u521D\\u59CB\\u5316\\u7684\\u53D8\\u91CF\\u5C06\\u5728\\u7F16\\u8BD1\\u671F\\u95F4\\u5C06\\u5176\\u58F0\\u660E\\u201C\\u79FB\\u52A8\\u201D\\u5230\\u5176\\u5305\\u542B\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\uFF0C\\u6211\\u4EEC\\u5C06\\u5176\\u79F0\\u4E3A\\u53D8\\u91CF\\u63D0\\u5347\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u53EA\\u6709\\u58F0\\u660E\\u88AB\\u63D0\\u5347\\uFF0C\\u521D\\u59CB\\u5316/\\u8D4B\\u503C\\uFF08\\u5982\\u679C\\u5B58\\u5728\\uFF09\\u5C06\\u4FDD\\u7559\\u5728\\u539F\\u6765\\u7684\\u4F4D\\u7F6E\\u3002\\u8BF7\\u6CE8\\u610F\\uFF0C\\u58F0\\u660E\\u5B9E\\u9645\\u4E0A\\u5E76\\u6CA1\\u6709\\u79FB\\u52A8\\u2014\\u2014JavaScript \\u5F15\\u64CE\\u5728\\u7F16\\u8BD1\\u671F\\u95F4\\u4F1A\\u89E3\\u6790\\u58F0\\u660E\\uFF0C\\u5E76\\u4E86\\u89E3\\u53D8\\u91CF\\u53CA\\u5176\\u4F5C\\u7528\\u57DF\\uFF0C\\u4F46\\u662F\\u901A\\u8FC7\\u5C06\\u58F0\\u660E\\u53EF\\u89C6\\u5316\\u4E3A\\u201C\\u63D0\\u5347\\u201D\\u5230\\u5176\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\uFF0C\\u66F4\\u5BB9\\u6613\\u7406\\u89E3\\u8FD9\\u79CD\\u884C\\u4E3A\\u3002\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8BA9\\u6211\\u4EEC\\u7528\\u51E0\\u4E2A\\u4EE3\\u7801\\u793A\\u4F8B\\u6765\\u89E3\\u91CA\\u3002\\u8BF7\\u6CE8\\u610F\\uFF0C\\u8FD9\\u4E9B\\u793A\\u4F8B\\u7684\\u4EE3\\u7801\\u5E94\\u8BE5\\u5728\\u6A21\\u5757\\u4F5C\\u7528\\u57DF\\u5185\\u6267\\u884C\\uFF0C\\u800C\\u4E0D\\u662F\\u50CF\\u6D4F\\u89C8\\u5668\\u63A7\\u5236\\u53F0\\u90A3\\u6837\\u9010\\u884C\\u8F93\\u5165\\u5230 REPL \\u4E2D\\u3002\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u7684\\u53D8\\u91CF\\u63D0\\u5347\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u8FD9\\u91CC\\u53EF\\u4EE5\\u770B\\u5230\\u53D8\\u91CF\\u63D0\\u5347\\u7684\\u5B9E\\u9645\\u6548\\u679C\\uFF0C\\u5373\\u4F7F\\u5728\\u7B2C\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"console.log()\"}),\" \\u4E4B\\u540E\\u624D\\u58F0\\u660E\\u548C\\u521D\\u59CB\\u5316 \",(0,n.jsx)(e.code,{children:\"foo\"}),\"\\uFF0C\\u7B2C\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"console.log()\"}),\" \\u4E5F\\u4F1A\\u5C06 \",(0,n.jsx)(e.code,{children:\"foo\"}),\" \\u7684\\u503C\\u6253\\u5370\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(foo); // undefined\nvar foo = 1;\nconsole.log(foo); // 1\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u5C06\\u4EE3\\u7801\\u53EF\\u89C6\\u5316\\u4E3A\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var foo;\nconsole.log(foo); // undefined\nfoo = 1;\nconsole.log(foo); // 1\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"let\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"class\"}),\" \\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u7684\\u53D8\\u91CF\\u63D0\\u5347\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u901A\\u8FC7 \",(0,n.jsx)(e.code,{children:\"let\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"class\"}),\" \\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u4E5F\\u4F1A\\u88AB\\u63D0\\u5347\\u3002\\u4F46\\u662F\\uFF0C\\u4E0E \",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"function\"}),\" \\u4E0D\\u540C\\uFF0C\\u5B83\\u4EEC\\u6CA1\\u6709\\u88AB\\u521D\\u59CB\\u5316\\uFF0C\\u5728\\u58F0\\u660E\\u4E4B\\u524D\\u8BBF\\u95EE\\u5B83\\u4EEC\\u5C06\\u5BFC\\u81F4 \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\" \\u5F02\\u5E38\\u3002\\u8BE5\\u53D8\\u91CF\\u5904\\u4E8E\\u4E00\\u4E2A\\u201C\\u6682\\u65F6\\u6027\\u6B7B\\u533A\\u201D\\uFF0C\\u4ECE\\u5757\\u7684\\u5F00\\u59CB\\u5230\\u58F0\\u660E\\u88AB\\u5904\\u7406\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`y; // ReferenceError: Cannot access 'y' before initialization\nlet y = 'local';\n`})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`z; // ReferenceError: Cannot access 'z' before initialization\nconst z = 'local';\n`})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`Foo; // ReferenceError: Cannot access 'Foo' before initialization\n\nclass Foo {\n  constructor() {}\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u7684\\u63D0\\u5347\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u662F\\u4EE5\\u53D8\\u91CF\\u58F0\\u660E\\u7684\\u5F62\\u5F0F\\u7F16\\u5199\\u7684\\u51FD\\u6570\\u3002\\u7531\\u4E8E\\u5B83\\u4EEC\\u4E5F\\u662F\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u58F0\\u660E\\u7684\\uFF0C\\u56E0\\u6B64\\u53EA\\u6709\\u53D8\\u91CF\\u58F0\\u660E\\u88AB\\u63D0\\u5347\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(bar); // undefined\nbar(); // Uncaught TypeError: bar is not a function\n\nvar bar = function () {\n  console.log('BARRRR');\n};\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u51FD\\u6570\\u58F0\\u660E\\u7684\\u63D0\\u5347\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u51FD\\u6570\\u58F0\\u660E\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"function\"}),\" \\u5173\\u952E\\u5B57\\u3002\\u4E0E\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u4E0D\\u540C\\uFF0C\\u51FD\\u6570\\u58F0\\u660E\\u540C\\u65F6\\u63D0\\u5347\\u58F0\\u660E\\u548C\\u5B9A\\u4E49\\uFF0C\\u56E0\\u6B64\\u5373\\u4F7F\\u5728\\u58F0\\u660E\\u4E4B\\u524D\\u4E5F\\u53EF\\u4EE5\\u8C03\\u7528\\u5B83\\u4EEC\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(foo); // [Function: foo]\nfoo(); // 'FOOOOO'\n\nfunction foo() {\n  console.log('FOOOOO');\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u540C\\u6837\\u9002\\u7528\\u4E8E\\u751F\\u6210\\u5668 (\",(0,n.jsx)(e.code,{children:\"function*\"}),\")\\u3001\\u5F02\\u6B65\\u51FD\\u6570 (\",(0,n.jsx)(e.code,{children:\"async function\"}),\") \\u548C\\u5F02\\u6B65\\u51FD\\u6570\\u751F\\u6210\\u5668 (\",(0,n.jsx)(e.code,{children:\"async function*\"}),\")\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"import\"}),\" \\u8BED\\u53E5\\u7684\\u63D0\\u5347\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Import \\u58F0\\u660E\\u88AB\\u63D0\\u5347\\u3002import \\u5F15\\u5165\\u7684\\u6807\\u8BC6\\u7B26\\u5728\\u6574\\u4E2A\\u6A21\\u5757\\u8303\\u56F4\\u5185\\u90FD\\u53EF\\u7528\\uFF0C\\u5E76\\u4E14\\u5B83\\u4EEC\\u4EA7\\u751F\\u7684\\u526F\\u4F5C\\u7528\\u5728\\u6A21\\u5757\\u7684\\u5176\\u4F59\\u4EE3\\u7801\\u8FD0\\u884C\\u4E4B\\u524D\\u4EA7\\u751F\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`foo.doSomething(); // Works normally.\n\nimport foo from './modules/foo';\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5E55\\u540E\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5B9E\\u9645\\u4E0A\\uFF0CJavaScript \\u5728\\u5C1D\\u8BD5\\u6267\\u884C\\u4EE3\\u7801\\u4E4B\\u524D\\uFF0C\\u4F1A\\u5728\\u5F53\\u524D\\u4F5C\\u7528\\u57DF\\u4E2D\\u521B\\u5EFA\\u6240\\u6709\\u53D8\\u91CF\\u3002\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u5173\\u952E\\u5B57\\u521B\\u5EFA\\u7684\\u53D8\\u91CF\\u7684\\u503C\\u5C06\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\uFF0C\\u800C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u5173\\u952E\\u5B57\\u521B\\u5EFA\\u7684\\u53D8\\u91CF\\u5C06\\u88AB\\u6807\\u8BB0\\u4E3A \",(0,n.jsx)(e.code,{children:\"<value unavailable>\"}),\"\\u3002\\u56E0\\u6B64\\uFF0C\\u5728\\u521D\\u59CB\\u5316\\u4E4B\\u524D\\u8BBF\\u95EE\\u5B83\\u4EEC\\u5C06\\u5BFC\\u81F4 \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\"\\uFF0C\\u4ECE\\u800C\\u963B\\u6B62\\u60A8\\u5728\\u521D\\u59CB\\u5316\\u4E4B\\u524D\\u8BBF\\u95EE\\u5B83\\u4EEC\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 ECMAScript \\u89C4\\u8303\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u58F0\\u660E\",(0,n.jsx)(e.a,{href:\"https://tc39.es/ecma262/#sec-let-and-const-declarations\",children:\"\\u89E3\\u91CA\\u5982\\u4E0B\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"\\u5F53\\u5B83\\u4EEC\\u5305\\u542B\\u7684 Environment Record \\u88AB\\u5B9E\\u4F8B\\u5316\\u65F6\\uFF0C\\u53D8\\u91CF\\u88AB\\u521B\\u5EFA\\uFF0C\\u4F46\\u5728\\u53D8\\u91CF\\u7684 LexicalBinding \\u88AB\\u6C42\\u503C\\u4E4B\\u524D\\uFF0C\\u53EF\\u80FD\\u65E0\\u6CD5\\u4EE5\\u4EFB\\u4F55\\u65B9\\u5F0F\\u8BBF\\u95EE\\u5B83\\u4EEC\\u3002\"}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F46\\u662F\\uFF0C\\u5BF9\\u4E8E \",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u5173\\u952E\\u5B57\\uFF0C\\u6B64\\u8BED\\u53E5\",(0,n.jsx)(e.a,{href:\"https://tc39.es/ecma262/#sec-variable-statement\",children:\"\\u7565\\u6709\\u4E0D\\u540C\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u5B83\\u4EEC\\u5305\\u542B\\u7684 Environment Record \\u88AB\\u5B9E\\u4F8B\\u5316\\u65F6\\uFF0CVar \\u53D8\\u91CF\\u88AB\\u521B\\u5EFA\\uFF0C\\u5E76\\u5728\\u521B\\u5EFA\\u65F6\\u88AB\\u521D\\u59CB\\u5316\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u73B0\\u4EE3\\u5B9E\\u8DF5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u5B9E\\u8DF5\\u4E2D\\uFF0C\\u73B0\\u4EE3\\u4EE3\\u7801\\u5E93\\u907F\\u514D\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"var\"}),\"\\uFF0C\\u5E76\\u4E14\\u4EC5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\"\\u3002\\u5EFA\\u8BAE\\u5728\\u5305\\u542B\\u8303\\u56F4/\\u6A21\\u5757\\u7684\\u9876\\u90E8\\u58F0\\u660E\\u548C\\u521D\\u59CB\\u5316\\u53D8\\u91CF\\u548C import \\u8BED\\u53E5\\uFF0C\\u4EE5\\u6D88\\u9664\\u8DDF\\u8E2A\\u4F55\\u65F6\\u53EF\\u4EE5\\u4F7F\\u7528\\u53D8\\u91CF\\u7684\\u5FC3\\u7406\\u8D1F\\u62C5\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"ESLint \\u662F\\u4E00\\u4E2A\\u9759\\u6001\\u4EE3\\u7801\\u5206\\u6790\\u5668\\uFF0C\\u53EF\\u4EE5\\u53D1\\u73B0\\u8FDD\\u53CD\\u6B64\\u7C7B\\u60C5\\u51B5\\uFF0C\\u4F7F\\u7528\\u4EE5\\u4E0B\\u89C4\\u5219\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://eslint.org/docs/latest/rules/no-use-before-define\",children:(0,n.jsx)(e.code,{children:\"no-use-before-define\"})}),\": \\u5F53\\u9047\\u5230\\u5BF9\\u5C1A\\u672A\\u58F0\\u660E\\u7684\\u6807\\u8BC6\\u7B26\\u7684\\u5F15\\u7528\\u65F6\\uFF0C\\u6B64\\u89C4\\u5219\\u5C06\\u53D1\\u51FA\\u8B66\\u544A\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://eslint.org/docs/latest/rules/no-undef\",children:(0,n.jsx)(e.code,{children:\"no-undef\"})}),\": \\u5F53\\u9047\\u5230\\u5BF9\\u5C1A\\u672A\\u58F0\\u660E\\u7684\\u6807\\u8BC6\\u7B26\\u7684\\u5F15\\u7528\\u65F6\\uFF0C\\u6B64\\u89C4\\u5219\\u5C06\\u53D1\\u51FA\\u8B66\\u544A\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Hoisting\",children:\"Hoisting | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/what-is-hoisting-in-javascript\",children:\"What is Hoisting in JavaScript?\"})}),`\n`]})]})}function E(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(a,c)})):a(c)}var y=E;return R(O);})();\n;return Component;"
+  "solution": "var Component=(()=>{var f=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var v=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),b=(c,e)=>{for(var r in e)o(c,r,{get:e[r],enumerable:!0})},l=(c,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of p(e))!m.call(c,d)&&d!==r&&o(c,d,{get:()=>e[d],enumerable:!(i=u(e,d))||i.enumerable});return c};var R=(c,e,r)=>(r=c!=null?f(g(c)):{},l(e||!c||!c.__esModule?o(r,\"default\",{value:c,enumerable:!0}):r,c)),E=c=>l(o({},\"__esModule\",{value:!0}),c);var t=v((O,h)=>{h.exports=_jsx_runtime});var y={};b(y,{default:()=>s,frontmatter:()=>j});var n=R(t()),j={title:\"\\u89E3\\u91CA JavaScript \\u4E2D\\u7684\\u201Choisting\\u201D\\uFF08\\u53D8\\u91CF\\u63D0\\u5347\\uFF09\\u6982\\u5FF5\"};function a(c){let e={a:\"a\",blockquote:\"blockquote\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hoisting\\uFF08\\u53D8\\u91CF\\u63D0\\u5347\\uFF09\\u662F\\u4E00\\u79CD JavaScript \\u673A\\u5236\\uFF0C\\u5728\\u7F16\\u8BD1\\u9636\\u6BB5\\uFF0C\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u58F0\\u660E\\u4F1A\\u88AB\\u201C\\u63D0\\u5347\\u201D\\u5230\\u5176\\u5305\\u542B\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\u3002\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"\\u53D8\\u91CF\\u58F0\\u660E (\",(0,n.jsx)(e.code,{children:\"var\"}),\")\"]}),\"\\uFF1A\\u58F0\\u660E\\u88AB\\u63D0\\u5347\\uFF0C\\u4F46\\u672A\\u521D\\u59CB\\u5316\\u3002\\u5982\\u679C\\u5728\\u4F7F\\u7528\\u524D\\u8BBF\\u95EE\\u53D8\\u91CF\\uFF0C\\u5219\\u53D8\\u91CF\\u7684\\u503C\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"\\u53D8\\u91CF\\u58F0\\u660E (\",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\")\"]}),\"\\uFF1A\\u58F0\\u660E\\u88AB\\u63D0\\u5347\\uFF0C\\u4F46\\u672A\\u521D\\u59CB\\u5316\\u3002\\u8BBF\\u95EE\\u5B83\\u4EEC\\u4F1A\\u5BFC\\u81F4 \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\"\\uFF0C\\u76F4\\u5230\\u9047\\u5230\\u5B9E\\u9645\\u7684\\u58F0\\u660E\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F (\",(0,n.jsx)(e.code,{children:\"var\"}),\")\"]}),\"\\uFF1A\\u58F0\\u660E\\u88AB\\u63D0\\u5347\\uFF0C\\u4F46\\u672A\\u521D\\u59CB\\u5316\\u3002\\u5982\\u679C\\u5728\\u4F7F\\u7528\\u524D\\u8BBF\\u95EE\\u53D8\\u91CF\\uFF0C\\u5219\\u53D8\\u91CF\\u7684\\u503C\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"\\u51FD\\u6570\\u58F0\\u660E (\",(0,n.jsx)(e.code,{children:\"function\"}),\")\"]}),\"\\uFF1A\\u58F0\\u660E\\u548C\\u5B9A\\u4E49\\u90FD\\u88AB\\u5B8C\\u5168\\u63D0\\u5347\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"\\u7C7B\\u58F0\\u660E (\",(0,n.jsx)(e.code,{children:\"class\"}),\")\"]}),\"\\uFF1A\\u58F0\\u660E\\u88AB\\u63D0\\u5347\\uFF0C\\u4F46\\u672A\\u521D\\u59CB\\u5316\\u3002\\u8BBF\\u95EE\\u5B83\\u4EEC\\u4F1A\\u5BFC\\u81F4 \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\"\\uFF0C\\u76F4\\u5230\\u9047\\u5230\\u5B9E\\u9645\\u7684\\u58F0\\u660E\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"\\u5BFC\\u5165\\u58F0\\u660E (\",(0,n.jsx)(e.code,{children:\"import\"}),\")\"]}),\"\\uFF1A\\u58F0\\u660E\\u88AB\\u63D0\\u5347\\uFF0C\\u5E76\\u4E14\\u5728\\u6267\\u884C\\u5176\\u4F59\\u4EE3\\u7801\\u4E4B\\u524D\\uFF0C\\u4F1A\\u6267\\u884C\\u5BFC\\u5165\\u6A21\\u5757\\u7684\\u526F\\u4F5C\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u884C\\u4E3A\\u603B\\u7ED3\\u4E86\\u5728\\u58F0\\u660E\\u53D8\\u91CF\\u4E4B\\u524D\\u8BBF\\u95EE\\u53D8\\u91CF\\u7684\\u7ED3\\u679C\\u3002\"}),`\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:\"\\u58F0\\u660E\"}),(0,n.jsx)(e.th,{children:\"\\u5728\\u58F0\\u660E\\u4E4B\\u524D\\u8BBF\\u95EE\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"var foo\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"undefined\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"let foo\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"ReferenceError\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"const foo\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"ReferenceError\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"class Foo\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"ReferenceError\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"var foo = function() { ... }\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"undefined\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"function foo() { ... }\"})}),(0,n.jsx)(e.td,{children:\"\\u6B63\\u5E38\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"import\"})}),(0,n.jsx)(e.td,{children:\"\\u6B63\\u5E38\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Hoisting\\uFF08\\u53D8\\u91CF\\u63D0\\u5347\\uFF09\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hoisting\\uFF08\\u53D8\\u91CF\\u63D0\\u5347\\uFF09\\u662F\\u4E00\\u4E2A\\u672F\\u8BED\\uFF0C\\u7528\\u4E8E\\u89E3\\u91CA JavaScript \\u4EE3\\u7801\\u4E2D\\u53D8\\u91CF\\u58F0\\u660E\\u7684\\u884C\\u4E3A\\u3002\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u5173\\u952E\\u5B57\\u58F0\\u660E\\u6216\\u521D\\u59CB\\u5316\\u7684\\u53D8\\u91CF\\u5C06\\u5728\\u7F16\\u8BD1\\u671F\\u95F4\\u5C06\\u5176\\u58F0\\u660E\\u201C\\u79FB\\u52A8\\u201D\\u5230\\u5176\\u5305\\u542B\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\uFF0C\\u6211\\u4EEC\\u5C06\\u5176\\u79F0\\u4E3A\\u53D8\\u91CF\\u63D0\\u5347\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u53EA\\u6709\\u58F0\\u660E\\u88AB\\u63D0\\u5347\\uFF0C\\u521D\\u59CB\\u5316/\\u8D4B\\u503C\\uFF08\\u5982\\u679C\\u5B58\\u5728\\uFF09\\u5C06\\u4FDD\\u7559\\u5728\\u539F\\u6765\\u7684\\u4F4D\\u7F6E\\u3002\\u8BF7\\u6CE8\\u610F\\uFF0C\\u58F0\\u660E\\u5B9E\\u9645\\u4E0A\\u5E76\\u6CA1\\u6709\\u79FB\\u52A8\\u2014\\u2014JavaScript \\u5F15\\u64CE\\u5728\\u7F16\\u8BD1\\u671F\\u95F4\\u4F1A\\u89E3\\u6790\\u58F0\\u660E\\uFF0C\\u5E76\\u4E86\\u89E3\\u53D8\\u91CF\\u53CA\\u5176\\u4F5C\\u7528\\u57DF\\uFF0C\\u4F46\\u662F\\u901A\\u8FC7\\u5C06\\u58F0\\u660E\\u53EF\\u89C6\\u5316\\u4E3A\\u201C\\u63D0\\u5347\\u201D\\u5230\\u5176\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\uFF0C\\u66F4\\u5BB9\\u6613\\u7406\\u89E3\\u8FD9\\u79CD\\u884C\\u4E3A\\u3002\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8BA9\\u6211\\u4EEC\\u7528\\u51E0\\u4E2A\\u4EE3\\u7801\\u793A\\u4F8B\\u6765\\u89E3\\u91CA\\u3002\\u8BF7\\u6CE8\\u610F\\uFF0C\\u8FD9\\u4E9B\\u793A\\u4F8B\\u7684\\u4EE3\\u7801\\u5E94\\u8BE5\\u5728\\u6A21\\u5757\\u4F5C\\u7528\\u57DF\\u5185\\u6267\\u884C\\uFF0C\\u800C\\u4E0D\\u662F\\u50CF\\u6D4F\\u89C8\\u5668\\u63A7\\u5236\\u53F0\\u90A3\\u6837\\u9010\\u884C\\u8F93\\u5165\\u5230 REPL \\u4E2D\\u3002\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u7684\\u53D8\\u91CF\\u63D0\\u5347\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u8FD9\\u91CC\\u53EF\\u4EE5\\u770B\\u5230\\u53D8\\u91CF\\u63D0\\u5347\\u7684\\u5B9E\\u9645\\u6548\\u679C\\uFF0C\\u5373\\u4F7F\\u5728\\u7B2C\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"console.log()\"}),\" \\u4E4B\\u540E\\u624D\\u58F0\\u660E\\u548C\\u521D\\u59CB\\u5316 \",(0,n.jsx)(e.code,{children:\"foo\"}),\"\\uFF0C\\u7B2C\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"console.log()\"}),\" \\u4E5F\\u4F1A\\u5C06 \",(0,n.jsx)(e.code,{children:\"foo\"}),\" \\u7684\\u503C\\u6253\\u5370\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(foo); // undefined\nvar foo = 1;\nconsole.log(foo); // 1\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u5C06\\u4EE3\\u7801\\u53EF\\u89C6\\u5316\\u4E3A\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var foo;\nconsole.log(foo); // undefined\nfoo = 1;\nconsole.log(foo); // 1\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"let\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"class\"}),\" \\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u7684\\u53D8\\u91CF\\u63D0\\u5347\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u901A\\u8FC7 \",(0,n.jsx)(e.code,{children:\"let\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"class\"}),\" \\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u4E5F\\u4F1A\\u88AB\\u63D0\\u5347\\u3002\\u4F46\\u662F\\uFF0C\\u4E0E \",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"function\"}),\" \\u4E0D\\u540C\\uFF0C\\u5B83\\u4EEC\\u6CA1\\u6709\\u88AB\\u521D\\u59CB\\u5316\\uFF0C\\u5728\\u58F0\\u660E\\u4E4B\\u524D\\u8BBF\\u95EE\\u5B83\\u4EEC\\u5C06\\u5BFC\\u81F4 \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\" \\u5F02\\u5E38\\u3002\\u8BE5\\u53D8\\u91CF\\u5904\\u4E8E\\u4E00\\u4E2A\\u201C\\u6682\\u65F6\\u6027\\u6B7B\\u533A\\u201D\\uFF0C\\u4ECE\\u5757\\u7684\\u5F00\\u59CB\\u5230\\u58F0\\u660E\\u88AB\\u5904\\u7406\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`y; // ReferenceError: Cannot access 'y' before initialization\nlet y = 'local';\n`})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`z; // ReferenceError: Cannot access 'z' before initialization\nconst z = 'local';\n`})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`Foo; // ReferenceError: Cannot access 'Foo' before initialization\n\nclass Foo {\n  constructor() {}\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u7684\\u63D0\\u5347\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u662F\\u4EE5\\u53D8\\u91CF\\u58F0\\u660E\\u7684\\u5F62\\u5F0F\\u7F16\\u5199\\u7684\\u51FD\\u6570\\u3002\\u7531\\u4E8E\\u5B83\\u4EEC\\u4E5F\\u662F\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u58F0\\u660E\\u7684\\uFF0C\\u56E0\\u6B64\\u53EA\\u6709\\u53D8\\u91CF\\u58F0\\u660E\\u88AB\\u63D0\\u5347\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(bar); // undefined\nbar(); // Uncaught TypeError: bar is not a function\n\nvar bar = function () {\n  console.log('BARRRR');\n};\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u51FD\\u6570\\u58F0\\u660E\\u7684\\u63D0\\u5347\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u51FD\\u6570\\u58F0\\u660E\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"function\"}),\" \\u5173\\u952E\\u5B57\\u3002\\u4E0E\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u4E0D\\u540C\\uFF0C\\u51FD\\u6570\\u58F0\\u660E\\u540C\\u65F6\\u63D0\\u5347\\u58F0\\u660E\\u548C\\u5B9A\\u4E49\\uFF0C\\u56E0\\u6B64\\u5373\\u4F7F\\u5728\\u58F0\\u660E\\u4E4B\\u524D\\u4E5F\\u53EF\\u4EE5\\u8C03\\u7528\\u5B83\\u4EEC\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(foo); // [Function: foo]\nfoo(); // 'FOOOOO'\n\nfunction foo() {\n  console.log('FOOOOO');\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u540C\\u6837\\u9002\\u7528\\u4E8E\\u751F\\u6210\\u5668 (\",(0,n.jsx)(e.code,{children:\"function*\"}),\")\\u3001\\u5F02\\u6B65\\u51FD\\u6570 (\",(0,n.jsx)(e.code,{children:\"async function\"}),\") \\u548C\\u5F02\\u6B65\\u51FD\\u6570\\u751F\\u6210\\u5668 (\",(0,n.jsx)(e.code,{children:\"async function*\"}),\")\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"import\"}),\" \\u8BED\\u53E5\\u7684\\u63D0\\u5347\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Import \\u58F0\\u660E\\u88AB\\u63D0\\u5347\\u3002import \\u5F15\\u5165\\u7684\\u6807\\u8BC6\\u7B26\\u5728\\u6574\\u4E2A\\u6A21\\u5757\\u8303\\u56F4\\u5185\\u90FD\\u53EF\\u7528\\uFF0C\\u5E76\\u4E14\\u5B83\\u4EEC\\u4EA7\\u751F\\u7684\\u526F\\u4F5C\\u7528\\u5728\\u6A21\\u5757\\u7684\\u5176\\u4F59\\u4EE3\\u7801\\u8FD0\\u884C\\u4E4B\\u524D\\u4EA7\\u751F\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`foo.doSomething(); // Works normally.\n\nimport foo from './modules/foo';\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5E55\\u540E\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5B9E\\u9645\\u4E0A\\uFF0CJavaScript \\u5728\\u5C1D\\u8BD5\\u6267\\u884C\\u4EE3\\u7801\\u4E4B\\u524D\\uFF0C\\u4F1A\\u5728\\u5F53\\u524D\\u4F5C\\u7528\\u57DF\\u4E2D\\u521B\\u5EFA\\u6240\\u6709\\u53D8\\u91CF\\u3002\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u5173\\u952E\\u5B57\\u521B\\u5EFA\\u7684\\u53D8\\u91CF\\u7684\\u503C\\u5C06\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\uFF0C\\u800C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u5173\\u952E\\u5B57\\u521B\\u5EFA\\u7684\\u53D8\\u91CF\\u5C06\\u88AB\\u6807\\u8BB0\\u4E3A \",(0,n.jsx)(e.code,{children:\"<value unavailable>\"}),\"\\u3002\\u56E0\\u6B64\\uFF0C\\u5728\\u521D\\u59CB\\u5316\\u4E4B\\u524D\\u8BBF\\u95EE\\u5B83\\u4EEC\\u5C06\\u5BFC\\u81F4 \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\"\\uFF0C\\u4ECE\\u800C\\u963B\\u6B62\\u60A8\\u5728\\u521D\\u59CB\\u5316\\u4E4B\\u524D\\u8BBF\\u95EE\\u5B83\\u4EEC\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 ECMAScript \\u89C4\\u8303\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u58F0\\u660E\",(0,n.jsx)(e.a,{href:\"https://tc39.es/ecma262/#sec-let-and-const-declarations\",children:\"\\u89E3\\u91CA\\u5982\\u4E0B\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"\\u5F53\\u5B83\\u4EEC\\u5305\\u542B\\u7684 Environment Record \\u88AB\\u5B9E\\u4F8B\\u5316\\u65F6\\uFF0C\\u53D8\\u91CF\\u88AB\\u521B\\u5EFA\\uFF0C\\u4F46\\u5728\\u53D8\\u91CF\\u7684 LexicalBinding \\u88AB\\u6C42\\u503C\\u4E4B\\u524D\\uFF0C\\u53EF\\u80FD\\u65E0\\u6CD5\\u4EE5\\u4EFB\\u4F55\\u65B9\\u5F0F\\u8BBF\\u95EE\\u5B83\\u4EEC\\u3002\"}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F46\\u662F\\uFF0C\\u5BF9\\u4E8E \",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u5173\\u952E\\u5B57\\uFF0C\\u6B64\\u8BED\\u53E5\",(0,n.jsx)(e.a,{href:\"https://tc39.es/ecma262/#sec-variable-statement\",children:\"\\u7565\\u6709\\u4E0D\\u540C\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u5B83\\u4EEC\\u5305\\u542B\\u7684 Environment Record \\u88AB\\u5B9E\\u4F8B\\u5316\\u65F6\\uFF0CVar \\u53D8\\u91CF\\u88AB\\u521B\\u5EFA\\uFF0C\\u5E76\\u5728\\u521B\\u5EFA\\u65F6\\u88AB\\u521D\\u59CB\\u5316\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u73B0\\u4EE3\\u5B9E\\u8DF5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u5B9E\\u8DF5\\u4E2D\\uFF0C\\u73B0\\u4EE3\\u4EE3\\u7801\\u5E93\\u907F\\u514D\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"var\"}),\"\\uFF0C\\u5E76\\u4E14\\u4EC5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\"\\u3002\\u5EFA\\u8BAE\\u5728\\u5305\\u542B\\u8303\\u56F4/\\u6A21\\u5757\\u7684\\u9876\\u90E8\\u58F0\\u660E\\u548C\\u521D\\u59CB\\u5316\\u53D8\\u91CF\\u548C import \\u8BED\\u53E5\\uFF0C\\u4EE5\\u6D88\\u9664\\u8DDF\\u8E2A\\u4F55\\u65F6\\u53EF\\u4EE5\\u4F7F\\u7528\\u53D8\\u91CF\\u7684\\u5FC3\\u7406\\u8D1F\\u62C5\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"ESLint \\u662F\\u4E00\\u4E2A\\u9759\\u6001\\u4EE3\\u7801\\u5206\\u6790\\u5668\\uFF0C\\u53EF\\u4EE5\\u53D1\\u73B0\\u8FDD\\u53CD\\u6B64\\u7C7B\\u60C5\\u51B5\\uFF0C\\u4F7F\\u7528\\u4EE5\\u4E0B\\u89C4\\u5219\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://eslint.org/docs/latest/rules/no-use-before-define\",children:(0,n.jsx)(e.code,{children:\"no-use-before-define\"})}),\": \\u5F53\\u9047\\u5230\\u5BF9\\u5C1A\\u672A\\u58F0\\u660E\\u7684\\u6807\\u8BC6\\u7B26\\u7684\\u5F15\\u7528\\u65F6\\uFF0C\\u6B64\\u89C4\\u5219\\u5C06\\u53D1\\u51FA\\u8B66\\u544A\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://eslint.org/docs/latest/rules/no-undef\",children:(0,n.jsx)(e.code,{children:\"no-undef\"})}),\": \\u5F53\\u9047\\u5230\\u5BF9\\u5C1A\\u672A\\u58F0\\u660E\\u7684\\u6807\\u8BC6\\u7B26\\u7684\\u5F15\\u7528\\u65F6\\uFF0C\\u6B64\\u89C4\\u5219\\u5C06\\u53D1\\u51FA\\u8B66\\u544A\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Hoisting\",children:\"Hoisting | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/what-is-hoisting-in-javascript\",children:\"What is Hoisting in JavaScript?\"})}),`\n`]})]})}function s(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(a,{...c})}):a(c)}return E(y);})();\n;return Component;"
 }
\ No newline at end of file
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 adc5b2f3b..dc8451e18 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},i=(t,e,r,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!u.call(t,s)&&s!==r&&o(t,s,{get:()=>e[s],enumerable:!(a=m(e,s))||a.enumerable});return t};var x=(t,e,r)=>(r=t!=null?d(f(t)):{},i(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),j=t=>i(o({},\"__esModule\",{value:!0}),t);var h=w((F,c)=>{c.exports=_jsx_runtime});var q={};g(q,{default:()=>y,frontmatter:()=>_});var n=x(h()),_={title:\"Explain how a browser determines what elements match a CSS selector.\"};function l(t){let e=Object.assign({p:\"p\",a:\"a\",code:\"code\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"This question is related to the question about \",(0,n.jsx)(e.a,{href:\"/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css\",children:\"writing efficient CSS\"}),\". Browsers match selectors from rightmost (key selector) to the left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"For example, with a selector \",(0,n.jsx)(e.code,{children:\"p span\"}),\", browsers firstly find all the \",(0,n.jsx)(e.code,{children:\"<span>\"}),\" elements and traverse up its parent all the way up to the root to find the \",(0,n.jsx)(e.code,{children:\"<p>\"}),\" element. For a particular \",(0,n.jsx)(e.code,{children:\"<span>\"}),\", as soon as it finds a \",(0,n.jsx)(e.code,{children:\"<p>\"}),\", it knows that the \",(0,n.jsx)(e.code,{children:\"<span>\"}),\" matches the selector, and can stop traversing its parents.\"]})]})}function b(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(l,t)})):l(t)}var y=b;return j(q);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},i=(t,e,r,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of f(e))!w.call(t,s)&&s!==r&&o(t,s,{get:()=>e[s],enumerable:!(a=p(e,s))||a.enumerable});return t};var _=(t,e,r)=>(r=t!=null?m(u(t)):{},i(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),j=t=>i(o({},\"__esModule\",{value:!0}),t);var h=x((C,c)=>{c.exports=_jsx_runtime});var b={};g(b,{default:()=>d,frontmatter:()=>y});var n=_(h()),y={title:\"Explain how a browser determines what elements match a CSS selector.\"};function l(t){let e={a:\"a\",code:\"code\",p:\"p\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"This question is related to the question about \",(0,n.jsx)(e.a,{href:\"/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css\",children:\"writing efficient CSS\"}),\". Browsers match selectors from rightmost (key selector) to the left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"For example, with a selector \",(0,n.jsx)(e.code,{children:\"p span\"}),\", browsers firstly find all the \",(0,n.jsx)(e.code,{children:\"<span>\"}),\" elements and traverse up its parent all the way up to the root to find the \",(0,n.jsx)(e.code,{children:\"<p>\"}),\" element. For a particular \",(0,n.jsx)(e.code,{children:\"<span>\"}),\", as soon as it finds a \",(0,n.jsx)(e.code,{children:\"<p>\"}),\", it knows that the \",(0,n.jsx)(e.code,{children:\"<span>\"}),\" matches the selector, and can stop traversing its parents.\"]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}return j(b);})();\n;return Component;"
 }
\ No newline at end of file
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 7dff3163b..3a1163e2f 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var a in e)s(o,a,{get:e[a],enumerable:!0})},c=(o,e,a,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of u(e))!g.call(o,n)&&n!==a&&s(o,n,{get:()=>e[n],enumerable:!(t=l(e,n))||t.enumerable});return o};var v=(o,e,a)=>(a=o!=null?p(h(o)):{},c(e||!o||!o.__esModule?s(a,\"default\",{value:o,enumerable:!0}):a,o)),q=o=>c(s({},\"__esModule\",{value:!0}),o);var i=f((M,d)=>{d.exports=_jsx_runtime});var O={};x(O,{default:()=>b,frontmatter:()=>j});var r=v(i()),j={title:\"Explique como um navegador determina quais elementos correspondem a um seletor CSS.\"};function m(o){let e=Object.assign({p:\"p\",a:\"a\",code:\"code\"},o.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.p,{children:[\"Esta pergunta est\\xE1 relacionada com a pergunta sobre \",(0,r.jsx)(e.a,{href:\"/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css\",children:\"escrever um CSS eficiente\"}),\". Os navegadores combinam seletores da direita (seletor-chave) para a esquerda. Os navegadores filtram elementos no DOM de acordo com o seletor-chave e percorrem seus elementos pais para determinar correspond\\xEAncias. Quanto menor o comprimento da cadeia de seletores, mais r\\xE1pido o navegador pode determinar se aquele elemento corresponde ao seletor.\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"Por exemplo, com um seletor \",(0,r.jsx)(e.code,{children:\"p span\"}),\", os navegadores primeiro encontram todos os elementos \",(0,r.jsx)(e.code,{children:\"<span>\"}),\" e percorrem seus pais at\\xE9 a raiz para encontrar o elemento \",(0,r.jsx)(e.code,{children:\"<p>\"}),\". Para um determinado \",(0,r.jsx)(e.code,{children:\"<span>\"}),\", assim que ele encontrar um \",(0,r.jsx)(e.code,{children:\"<p>\"}),\", ele sabe que o \",(0,r.jsx)(e.code,{children:\"<span>\"}),\" corresponde ao seletor e pode parar de atravessar seus pais.\"]})]})}function _(o={}){let{wrapper:e}=o.components||{};return e?(0,r.jsx)(e,Object.assign({},o,{children:(0,r.jsx)(m,o)})):m(o)}var b=_;return q(O);})();\n;return Component;"
+  "solution": "var Component=(()=>{var l=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),v=(o,e)=>{for(var a in e)s(o,a,{get:e[a],enumerable:!0})},c=(o,e,a,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of h(e))!g.call(o,n)&&n!==a&&s(o,n,{get:()=>e[n],enumerable:!(t=u(e,n))||t.enumerable});return o};var q=(o,e,a)=>(a=o!=null?l(f(o)):{},c(e||!o||!o.__esModule?s(a,\"default\",{value:o,enumerable:!0}):a,o)),_=o=>c(s({},\"__esModule\",{value:!0}),o);var i=x((S,d)=>{d.exports=_jsx_runtime});var C={};v(C,{default:()=>p,frontmatter:()=>j});var r=q(i()),j={title:\"Explique como um navegador determina quais elementos correspondem a um seletor CSS.\"};function m(o){let e={a:\"a\",code:\"code\",p:\"p\",...o.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.p,{children:[\"Esta pergunta est\\xE1 relacionada com a pergunta sobre \",(0,r.jsx)(e.a,{href:\"/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css\",children:\"escrever um CSS eficiente\"}),\". Os navegadores combinam seletores da direita (seletor-chave) para a esquerda. Os navegadores filtram elementos no DOM de acordo com o seletor-chave e percorrem seus elementos pais para determinar correspond\\xEAncias. Quanto menor o comprimento da cadeia de seletores, mais r\\xE1pido o navegador pode determinar se aquele elemento corresponde ao seletor.\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"Por exemplo, com um seletor \",(0,r.jsx)(e.code,{children:\"p span\"}),\", os navegadores primeiro encontram todos os elementos \",(0,r.jsx)(e.code,{children:\"<span>\"}),\" e percorrem seus pais at\\xE9 a raiz para encontrar o elemento \",(0,r.jsx)(e.code,{children:\"<p>\"}),\". Para um determinado \",(0,r.jsx)(e.code,{children:\"<span>\"}),\", assim que ele encontrar um \",(0,r.jsx)(e.code,{children:\"<p>\"}),\", ele sabe que o \",(0,r.jsx)(e.code,{children:\"<span>\"}),\" corresponde ao seletor e pode parar de atravessar seus pais.\"]})]})}function p(o={}){let{wrapper:e}=o.components||{};return e?(0,r.jsx)(e,{...o,children:(0,r.jsx)(m,{...o})}):m(o)}return _(C);})();\n;return Component;"
 }
\ No newline at end of file
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 2b5240893..f0877ce9e 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var c in e)r(n,c,{get:e[c],enumerable:!0})},i=(n,e,c,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of f(e))!u.call(n,o)&&o!==c&&r(n,o,{get:()=>e[o],enumerable:!(s=l(e,o))||s.enumerable});return n};var _=(n,e,c)=>(c=n!=null?p(m(n)):{},i(e||!n||!n.__esModule?r(c,\"default\",{value:n,enumerable:!0}):c,n)),g=n=>i(r({},\"__esModule\",{value:!0}),n);var d=x((O,a)=>{a.exports=_jsx_runtime});var w={};j(w,{default:()=>S,frontmatter:()=>C});var t=_(d()),C={title:\"\\u89E3\\u91CA\\u6D4F\\u89C8\\u5668\\u5982\\u4F55\\u786E\\u5B9A\\u54EA\\u4E9B\\u5143\\u7D20\\u4E0E CSS \\u9009\\u62E9\\u5668\\u5339\\u914D\\u3002\"};function h(n){let e=Object.assign({p:\"p\",a:\"a\",code:\"code\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[\"\\u8FD9\\u4E2A\\u95EE\\u9898\\u4E0E\\u5173\\u4E8E \",(0,t.jsx)(e.a,{href:\"/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css\",children:\"\\u7F16\\u5199\\u9AD8\\u6548 CSS\"}),\" \\u7684\\u95EE\\u9898\\u76F8\\u5173\\u3002\\u6D4F\\u89C8\\u5668\\u4ECE\\u6700\\u53F3\\u4FA7\\uFF08\\u5173\\u952E\\u9009\\u62E9\\u5668\\uFF09\\u5230\\u5DE6\\u4FA7\\u5339\\u914D\\u9009\\u62E9\\u5668\\u3002\\u6D4F\\u89C8\\u5668\\u6839\\u636E\\u5173\\u952E\\u9009\\u62E9\\u5668\\u8FC7\\u6EE4 DOM \\u4E2D\\u7684\\u5143\\u7D20\\uFF0C\\u5E76\\u5411\\u4E0A\\u904D\\u5386\\u5176\\u7236\\u5143\\u7D20\\u4EE5\\u786E\\u5B9A\\u5339\\u914D\\u9879\\u3002\\u9009\\u62E9\\u5668\\u94FE\\u7684\\u957F\\u5EA6\\u8D8A\\u77ED\\uFF0C\\u6D4F\\u89C8\\u5668\\u786E\\u5B9A\\u8BE5\\u5143\\u7D20\\u662F\\u5426\\u4E0E\\u9009\\u62E9\\u5668\\u5339\\u914D\\u7684\\u901F\\u5EA6\\u5C31\\u8D8A\\u5FEB\\u3002\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u4F8B\\u5982\\uFF0C\\u5BF9\\u4E8E\\u9009\\u62E9\\u5668 \",(0,t.jsx)(e.code,{children:\"p span\"}),\"\\uFF0C\\u6D4F\\u89C8\\u5668\\u9996\\u5148\\u627E\\u5230\\u6240\\u6709 \",(0,t.jsx)(e.code,{children:\"<span>\"}),\" \\u5143\\u7D20\\uFF0C\\u5E76\\u5411\\u4E0A\\u904D\\u5386\\u5176\\u7236\\u5143\\u7D20\\uFF0C\\u76F4\\u5230\\u6839\\u5143\\u7D20\\uFF0C\\u4EE5\\u627E\\u5230 \",(0,t.jsx)(e.code,{children:\"<p>\"}),\" \\u5143\\u7D20\\u3002\\u5BF9\\u4E8E\\u7279\\u5B9A\\u7684 \",(0,t.jsx)(e.code,{children:\"<span>\"}),\"\\uFF0C\\u4E00\\u65E6\\u627E\\u5230 \",(0,t.jsx)(e.code,{children:\"<p>\"}),\"\\uFF0C\\u5B83\\u5C31\\u77E5\\u9053 \",(0,t.jsx)(e.code,{children:\"<span>\"}),\" \\u4E0E\\u9009\\u62E9\\u5668\\u5339\\u914D\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u505C\\u6B62\\u904D\\u5386\\u5176\\u7236\\u5143\\u7D20\\u3002\"]})]})}function M(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var S=M;return g(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var _=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var c in e)r(n,c,{get:e[c],enumerable:!0})},i=(n,e,c,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!x.call(n,o)&&o!==c&&r(n,o,{get:()=>e[o],enumerable:!(s=f(e,o))||s.enumerable});return n};var g=(n,e,c)=>(c=n!=null?l(u(n)):{},i(e||!n||!n.__esModule?r(c,\"default\",{value:n,enumerable:!0}):c,n)),C=n=>i(r({},\"__esModule\",{value:!0}),n);var a=_((D,d)=>{d.exports=_jsx_runtime});var S={};j(S,{default:()=>p,frontmatter:()=>M});var t=g(a()),M={title:\"\\u89E3\\u91CA\\u6D4F\\u89C8\\u5668\\u5982\\u4F55\\u786E\\u5B9A\\u54EA\\u4E9B\\u5143\\u7D20\\u4E0E CSS \\u9009\\u62E9\\u5668\\u5339\\u914D\\u3002\"};function h(n){let e={a:\"a\",code:\"code\",p:\"p\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[\"\\u8FD9\\u4E2A\\u95EE\\u9898\\u4E0E\\u5173\\u4E8E \",(0,t.jsx)(e.a,{href:\"/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css\",children:\"\\u7F16\\u5199\\u9AD8\\u6548 CSS\"}),\" \\u7684\\u95EE\\u9898\\u76F8\\u5173\\u3002\\u6D4F\\u89C8\\u5668\\u4ECE\\u6700\\u53F3\\u4FA7\\uFF08\\u5173\\u952E\\u9009\\u62E9\\u5668\\uFF09\\u5230\\u5DE6\\u4FA7\\u5339\\u914D\\u9009\\u62E9\\u5668\\u3002\\u6D4F\\u89C8\\u5668\\u6839\\u636E\\u5173\\u952E\\u9009\\u62E9\\u5668\\u8FC7\\u6EE4 DOM \\u4E2D\\u7684\\u5143\\u7D20\\uFF0C\\u5E76\\u5411\\u4E0A\\u904D\\u5386\\u5176\\u7236\\u5143\\u7D20\\u4EE5\\u786E\\u5B9A\\u5339\\u914D\\u9879\\u3002\\u9009\\u62E9\\u5668\\u94FE\\u7684\\u957F\\u5EA6\\u8D8A\\u77ED\\uFF0C\\u6D4F\\u89C8\\u5668\\u786E\\u5B9A\\u8BE5\\u5143\\u7D20\\u662F\\u5426\\u4E0E\\u9009\\u62E9\\u5668\\u5339\\u914D\\u7684\\u901F\\u5EA6\\u5C31\\u8D8A\\u5FEB\\u3002\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u4F8B\\u5982\\uFF0C\\u5BF9\\u4E8E\\u9009\\u62E9\\u5668 \",(0,t.jsx)(e.code,{children:\"p span\"}),\"\\uFF0C\\u6D4F\\u89C8\\u5668\\u9996\\u5148\\u627E\\u5230\\u6240\\u6709 \",(0,t.jsx)(e.code,{children:\"<span>\"}),\" \\u5143\\u7D20\\uFF0C\\u5E76\\u5411\\u4E0A\\u904D\\u5386\\u5176\\u7236\\u5143\\u7D20\\uFF0C\\u76F4\\u5230\\u6839\\u5143\\u7D20\\uFF0C\\u4EE5\\u627E\\u5230 \",(0,t.jsx)(e.code,{children:\"<p>\"}),\" \\u5143\\u7D20\\u3002\\u5BF9\\u4E8E\\u7279\\u5B9A\\u7684 \",(0,t.jsx)(e.code,{children:\"<span>\"}),\"\\uFF0C\\u4E00\\u65E6\\u627E\\u5230 \",(0,t.jsx)(e.code,{children:\"<p>\"}),\"\\uFF0C\\u5B83\\u5C31\\u77E5\\u9053 \",(0,t.jsx)(e.code,{children:\"<span>\"}),\" \\u4E0E\\u9009\\u62E9\\u5668\\u5339\\u914D\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u505C\\u6B62\\u904D\\u5386\\u5176\\u7236\\u5143\\u7D20\\u3002\"]})]})}function p(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(h,{...n})}):h(n)}return C(S);})();\n;return Component;"
 }
\ No newline at end of file
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 8a0c53f9d..924dd24d9 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
@@ -29,5 +29,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var S=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},c=(t,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!g.call(t,r)&&r!==i&&a(t,r,{get:()=>e[r],enumerable:!(s=p(e,r))||s.enumerable});return t};var f=(t,e,i)=>(i=t!=null?d(u(t)):{},c(e||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),w=t=>c(a({},\"__esModule\",{value:!0}),t);var l=S((J,o)=>{o.exports=_jsx_runtime});var y={};b(y,{default:()=>P,frontmatter:()=>O});var n=f(l()),O={title:\"Explain how JSONP works (and how it's not really Ajax)\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",pre:\"pre\",ul:\"ul\",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:[\"JSONP (JSON with Padding) is a technique used to overcome the same-origin policy in web browsers, allowing you to request data from a server in a different domain. It works by dynamically creating a \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" tag and setting its \",(0,n.jsx)(e.code,{children:\"src\"}),\" attribute to the URL of the data source. The server responds with a script that calls a predefined callback function with the data as its argument. Unlike Ajax, JSONP does not use the XMLHttpRequest object and is limited to GET requests.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How JSONP works (and how it's not really Ajax)\"}),`\n`,(0,n.jsx)(e.h3,{children:\"What is JSONP?\"}),`\n`,(0,n.jsx)(e.p,{children:\"JSONP stands for JSON with Padding. It is a technique used to bypass the same-origin policy in web browsers, which restricts web pages from making requests to a different domain than the one that served the web page.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How JSONP works\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Dynamic script tag creation\"}),\": A \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" tag is dynamically created and its \",(0,n.jsx)(e.code,{children:\"src\"}),\" attribute is set to the URL of the data source, including a callback function name as a query parameter.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Server response\"}),\": The server responds with a script that calls the callback function, passing the data as an argument.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Callback execution\"}),\": The browser executes the script, invoking the callback function with the data.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Here is a simple example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>JSONP Example</title>\n    <script>\n      function handleResponse(data) {\n        console.log(data);\n      }\n\n      function fetchData() {\n        var script = document.createElement('script');\n        script.src = 'https://example.com/data?callback=handleResponse';\n        document.body.appendChild(script);\n      }\n    <\\/script>\n  </head>\n  <body>\n    <button onclick=\"fetchData()\">Fetch Data</button>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, when the button is clicked, a \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" tag is created with the \",(0,n.jsx)(e.code,{children:\"src\"}),\" attribute set to \",(0,n.jsx)(e.code,{children:\"https://example.com/data?callback=handleResponse\"}),\". The server at \",(0,n.jsx)(e.code,{children:\"example.com\"}),\" responds with a script like this:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`handleResponse({\n  name: 'John',\n  age: 30,\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"How JSONP is different from Ajax\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Transport mechanism\"}),\": JSONP uses the \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" tag to fetch data, whereas Ajax uses the XMLHttpRequest object.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Request type\"}),\": JSONP is limited to GET requests, while Ajax can use various HTTP methods like GET, POST, PUT, DELETE, etc.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Same-origin policy\"}),\": JSONP can bypass the same-origin policy, while Ajax requests are subject to it unless CORS (Cross-Origin Resource Sharing) is used.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Error handling\"}),\": JSONP has limited error handling capabilities compared to Ajax.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Limitations of JSONP\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Security risks\"}),\": JSONP can expose your application to cross-site scripting (XSS) attacks if the external server is compromised or malicious.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Limited to GET requests\"}),\": JSONP cannot be used for POST requests or other HTTP methods.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Error handling\"}),\": JSONP lacks robust error handling mechanisms compared to Ajax.\"]}),`\n`]}),`\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/Web/HTTP/Methods/JSONP\",children:\"MDN Web Docs: JSONP\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy\",children:\"Same-origin policy\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS\",children:\"Cross-Origin Resource Sharing (CORS)\"})}),`\n`]})]})}function x(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=x;return w(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},c=(t,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!S.call(t,r)&&r!==i&&a(t,r,{get:()=>e[r],enumerable:!(s=m(e,r))||s.enumerable});return t};var w=(t,e,i)=>(i=t!=null?p(g(t)):{},c(e||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),x=t=>c(a({},\"__esModule\",{value:!0}),t);var l=b((N,o)=>{o.exports=_jsx_runtime});var P={};f(P,{default:()=>d,frontmatter:()=>O});var n=w(l()),O={title:\"Explain how JSONP works (and how it's not really Ajax)\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JSONP (JSON with Padding) is a technique used to overcome the same-origin policy in web browsers, allowing you to request data from a server in a different domain. It works by dynamically creating a \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" tag and setting its \",(0,n.jsx)(e.code,{children:\"src\"}),\" attribute to the URL of the data source. The server responds with a script that calls a predefined callback function with the data as its argument. Unlike Ajax, JSONP does not use the XMLHttpRequest object and is limited to GET requests.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How JSONP works (and how it's not really Ajax)\"}),`\n`,(0,n.jsx)(e.h3,{children:\"What is JSONP?\"}),`\n`,(0,n.jsx)(e.p,{children:\"JSONP stands for JSON with Padding. It is a technique used to bypass the same-origin policy in web browsers, which restricts web pages from making requests to a different domain than the one that served the web page.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How JSONP works\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Dynamic script tag creation\"}),\": A \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" tag is dynamically created and its \",(0,n.jsx)(e.code,{children:\"src\"}),\" attribute is set to the URL of the data source, including a callback function name as a query parameter.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Server response\"}),\": The server responds with a script that calls the callback function, passing the data as an argument.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Callback execution\"}),\": The browser executes the script, invoking the callback function with the data.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Here is a simple example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>JSONP Example</title>\n    <script>\n      function handleResponse(data) {\n        console.log(data);\n      }\n\n      function fetchData() {\n        var script = document.createElement('script');\n        script.src = 'https://example.com/data?callback=handleResponse';\n        document.body.appendChild(script);\n      }\n    <\\/script>\n  </head>\n  <body>\n    <button onclick=\"fetchData()\">Fetch Data</button>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, when the button is clicked, a \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" tag is created with the \",(0,n.jsx)(e.code,{children:\"src\"}),\" attribute set to \",(0,n.jsx)(e.code,{children:\"https://example.com/data?callback=handleResponse\"}),\". The server at \",(0,n.jsx)(e.code,{children:\"example.com\"}),\" responds with a script like this:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`handleResponse({\n  name: 'John',\n  age: 30,\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"How JSONP is different from Ajax\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Transport mechanism\"}),\": JSONP uses the \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" tag to fetch data, whereas Ajax uses the XMLHttpRequest object.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Request type\"}),\": JSONP is limited to GET requests, while Ajax can use various HTTP methods like GET, POST, PUT, DELETE, etc.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Same-origin policy\"}),\": JSONP can bypass the same-origin policy, while Ajax requests are subject to it unless CORS (Cross-Origin Resource Sharing) is used.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Error handling\"}),\": JSONP has limited error handling capabilities compared to Ajax.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Limitations of JSONP\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Security risks\"}),\": JSONP can expose your application to cross-site scripting (XSS) attacks if the external server is compromised or malicious.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Limited to GET requests\"}),\": JSONP cannot be used for POST requests or other HTTP methods.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Error handling\"}),\": JSONP lacks robust error handling mechanisms compared to Ajax.\"]}),`\n`]}),`\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/Web/HTTP/Methods/JSONP\",children:\"MDN Web Docs: JSONP\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy\",children:\"Same-origin policy\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS\",children:\"Cross-Origin Resource Sharing (CORS)\"})}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return x(P);})();\n;return Component;"
 }
\ No newline at end of file
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 0f26aac7c..317fa4a20 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
@@ -29,5 +29,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),x=(a,e)=>{for(var n in e)t(a,n,{get:e[n],enumerable:!0})},i=(a,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!g.call(a,r)&&r!==n&&t(a,r,{get:()=>e[r],enumerable:!(c=p(e,r))||c.enumerable});return a};var O=(a,e,n)=>(n=a!=null?l(h(a)):{},i(e||!a||!a.__esModule?t(n,\"default\",{value:a,enumerable:!0}):n,a)),v=a=>i(t({},\"__esModule\",{value:!0}),a);var s=f((N,d)=>{d.exports=_jsx_runtime});var b={};x(b,{default:()=>S,frontmatter:()=>j});var o=O(s()),j={title:\"Explique como o JSONP funciona (e como ele n\\xE3o \\xE9 Ajax)\"};function m(a){let e=Object.assign({p:\"p\",code:\"code\",pre:\"pre\",a:\"a\"},a.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.p,{children:\"O JSONP (JSON com padding) \\xE9 um m\\xE9todo comumente utilizado para contornar as pol\\xEDticas de dom\\xEDnio cruzado em navegadores web, porque solicita\\xE7\\xF5es Ajax da p\\xE1gina atual para um dom\\xEDnio de origem cruzada n\\xE3o s\\xE3o permitidas.\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"O JSONP funciona fazendo uma solicita\\xE7\\xE3o a um dom\\xEDnio cross-origin atrav\\xE9s de uma tag \",(0,o.jsx)(e.code,{children:\"<script>\"}),\" e geralmente com um par\\xE2metro de consulta \",(0,o.jsx)(e.code,{children:\"callback\"}),\", por exemplo: \",(0,o.jsx)(e.code,{children:\"https://example O?callback=printData\"}),\". O servidor ir\\xE1, ent\\xE3o, encapsular os dados em uma fun\\xE7\\xE3o chamada printData e envi\\xE1-la de volta ao cliente.\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-html\",children:`<!-- https://mydomain.com -->\n<script>\n  function printData(data) {\n    console.log(\\`My name is \\${data.name}!\\`);\n  }\n<\\/script>\n\n<script src=\"https://example.com?callback=printData\"><\\/script>\n`})}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`// Arquivo carregado de https://example.com?callback=printData\nprintData({ name: 'John Doe' });\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"O cliente deve ter a fun\\xE7\\xE3o \",(0,o.jsx)(e.code,{children:\"printData\"}),\" no seu escopo global e a fun\\xE7\\xE3o ser\\xE1 executada pelo cliente quando a resposta do dom\\xEDnio de origem cruzada for recebida.\"]}),`\n`,(0,o.jsx)(e.p,{children:\"O JSONP pode ser inseguro e tem algumas implica\\xE7\\xF5es de seguran\\xE7a. Como o JSONP \\xE9 JavaScript, ele pode fazer tudo o que o JavaScript pode fazer, ent\\xE3o voc\\xEA precisa confiar no provedor dos dados JSONP.\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Hoje em dia, \",(0,o.jsx)(e.a,{href:\"http://en.wikipedia.org/wiki/Cross-origin_resource_sharing\",children:\"CORS\"}),\" \\xE9 a abordagem recomendada, e a JSONP \\xE9 vista como um hack.\"]})]})}function J(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,Object.assign({},a,{children:(0,o.jsx)(m,a)})):m(a)}var S=J;return v(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),O=(a,e)=>{for(var n in e)t(a,n,{get:e[n],enumerable:!0})},i=(a,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of h(e))!f.call(a,r)&&r!==n&&t(a,r,{get:()=>e[r],enumerable:!(c=u(e,r))||c.enumerable});return a};var v=(a,e,n)=>(n=a!=null?p(g(a)):{},i(e||!a||!a.__esModule?t(n,\"default\",{value:a,enumerable:!0}):n,a)),J=a=>i(t({},\"__esModule\",{value:!0}),a);var s=x((j,d)=>{d.exports=_jsx_runtime});var D={};O(D,{default:()=>l,frontmatter:()=>S});var o=v(s()),S={title:\"Explique como o JSONP funciona (e como ele n\\xE3o \\xE9 Ajax)\"};function m(a){let e={a:\"a\",code:\"code\",p:\"p\",pre:\"pre\",...a.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.p,{children:\"O JSONP (JSON com padding) \\xE9 um m\\xE9todo comumente utilizado para contornar as pol\\xEDticas de dom\\xEDnio cruzado em navegadores web, porque solicita\\xE7\\xF5es Ajax da p\\xE1gina atual para um dom\\xEDnio de origem cruzada n\\xE3o s\\xE3o permitidas.\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"O JSONP funciona fazendo uma solicita\\xE7\\xE3o a um dom\\xEDnio cross-origin atrav\\xE9s de uma tag \",(0,o.jsx)(e.code,{children:\"<script>\"}),\" e geralmente com um par\\xE2metro de consulta \",(0,o.jsx)(e.code,{children:\"callback\"}),\", por exemplo: \",(0,o.jsx)(e.code,{children:\"https://example O?callback=printData\"}),\". O servidor ir\\xE1, ent\\xE3o, encapsular os dados em uma fun\\xE7\\xE3o chamada printData e envi\\xE1-la de volta ao cliente.\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-html\",children:`<!-- https://mydomain.com -->\n<script>\n  function printData(data) {\n    console.log(\\`My name is \\${data.name}!\\`);\n  }\n<\\/script>\n\n<script src=\"https://example.com?callback=printData\"><\\/script>\n`})}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`// Arquivo carregado de https://example.com?callback=printData\nprintData({ name: 'John Doe' });\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"O cliente deve ter a fun\\xE7\\xE3o \",(0,o.jsx)(e.code,{children:\"printData\"}),\" no seu escopo global e a fun\\xE7\\xE3o ser\\xE1 executada pelo cliente quando a resposta do dom\\xEDnio de origem cruzada for recebida.\"]}),`\n`,(0,o.jsx)(e.p,{children:\"O JSONP pode ser inseguro e tem algumas implica\\xE7\\xF5es de seguran\\xE7a. Como o JSONP \\xE9 JavaScript, ele pode fazer tudo o que o JavaScript pode fazer, ent\\xE3o voc\\xEA precisa confiar no provedor dos dados JSONP.\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Hoje em dia, \",(0,o.jsx)(e.a,{href:\"http://en.wikipedia.org/wiki/Cross-origin_resource_sharing\",children:\"CORS\"}),\" \\xE9 a abordagem recomendada, e a JSONP \\xE9 vista como um hack.\"]})]})}function l(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,{...a,children:(0,o.jsx)(m,{...a})}):m(a)}return J(D);})();\n;return Component;"
 }
\ No newline at end of file
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 7d6d5be81..6a3f1202a 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
@@ -29,5 +29,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var g=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),P=(c,n)=>{for(var l in n)i(c,l,{get:n[l],enumerable:!0})},d=(c,n,l,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of S(n))!O.call(c,r)&&r!==l&&i(c,r,{get:()=>n[r],enumerable:!(t=p(n,r))||t.enumerable});return c};var N=(c,n,l)=>(l=c!=null?s(m(c)):{},d(n||!c||!c.__esModule?i(l,\"default\",{value:c,enumerable:!0}):l,c)),u=c=>d(i({},\"__esModule\",{value:!0}),c);var o=g((f,h)=>{h.exports=_jsx_runtime});var T={};P(T,{default:()=>j,frontmatter:()=>x});var e=N(o()),x={title:\"\\u89E3\\u91CA JSONP \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\uFF08\\u4EE5\\u53CA\\u5B83\\u5B9E\\u9645\\u4E0A\\u5E76\\u975E Ajax\\uFF09\"};function a(c){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",pre:\"pre\",ul:\"ul\",a:\"a\"},c.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"JSONP\\uFF08\\u5E26\\u586B\\u5145\\u7684 JSON\\uFF09\\u662F\\u4E00\\u79CD\\u7528\\u4E8E\\u514B\\u670D Web \\u6D4F\\u89C8\\u5668\\u4E2D\\u7684\\u540C\\u6E90\\u7B56\\u7565\\u7684\\u6280\\u672F\\uFF0C\\u5141\\u8BB8\\u60A8\\u4ECE\\u4E0D\\u540C\\u57DF\\u7684\\u670D\\u52A1\\u5668\\u8BF7\\u6C42\\u6570\\u636E\\u3002\\u5B83\\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\u662F\\u52A8\\u6001\\u521B\\u5EFA \",(0,e.jsx)(n.code,{children:\"<script>\"}),\" \\u6807\\u7B7E\\uFF0C\\u5E76\\u5C06\\u5176 \",(0,e.jsx)(n.code,{children:\"src\"}),\" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u4E3A\\u6570\\u636E\\u6E90\\u7684 URL\\u3002\\u670D\\u52A1\\u5668\\u4F7F\\u7528\\u4E00\\u4E2A\\u811A\\u672C\\u8FDB\\u884C\\u54CD\\u5E94\\uFF0C\\u8BE5\\u811A\\u672C\\u4F7F\\u7528\\u6570\\u636E\\u4F5C\\u4E3A\\u5176\\u53C2\\u6570\\u8C03\\u7528\\u9884\\u5B9A\\u4E49\\u7684 callback \\u51FD\\u6570\\u3002\\u4E0E Ajax \\u4E0D\\u540C\\uFF0CJSONP \\u4E0D\\u4F7F\\u7528 XMLHttpRequest \\u5BF9\\u8C61\\uFF0C\\u5E76\\u4E14\\u4EC5\\u9650\\u4E8E GET \\u8BF7\\u6C42\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"JSONP \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\uFF08\\u4EE5\\u53CA\\u5B83\\u5B9E\\u9645\\u4E0A\\u5E76\\u975E Ajax\\uFF09\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EC0\\u4E48\\u662F JSONP\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"JSONP \\u4EE3\\u8868\\u5E26\\u586B\\u5145\\u7684 JSON\\u3002\\u5B83\\u662F\\u4E00\\u79CD\\u7528\\u4E8E\\u7ED5\\u8FC7 Web \\u6D4F\\u89C8\\u5668\\u4E2D\\u7684\\u540C\\u6E90\\u7B56\\u7565\\u7684\\u6280\\u672F\\uFF0C\\u8BE5\\u7B56\\u7565\\u9650\\u5236\\u7F51\\u9875\\u5411\\u63D0\\u4F9B\\u8BE5\\u7F51\\u9875\\u7684\\u57DF\\u4EE5\\u5916\\u7684\\u57DF\\u53D1\\u51FA\\u8BF7\\u6C42\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"JSONP \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u52A8\\u6001\\u811A\\u672C\\u6807\\u7B7E\\u521B\\u5EFA\"}),\"\\uFF1A\\u52A8\\u6001\\u521B\\u5EFA \",(0,e.jsx)(n.code,{children:\"<script>\"}),\" \\u6807\\u7B7E\\uFF0C\\u5E76\\u5C06\\u5176 \",(0,e.jsx)(n.code,{children:\"src\"}),\" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u4E3A\\u6570\\u636E\\u6E90\\u7684 URL\\uFF0C\\u5305\\u62EC\\u56DE\\u8C03\\u51FD\\u6570\\u540D\\u79F0\\u4F5C\\u4E3A\\u67E5\\u8BE2\\u53C2\\u6570\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u670D\\u52A1\\u5668\\u54CD\\u5E94\"}),\"\\uFF1A\\u670D\\u52A1\\u5668\\u4F7F\\u7528\\u4E00\\u4E2A\\u811A\\u672C\\u8FDB\\u884C\\u54CD\\u5E94\\uFF0C\\u8BE5\\u811A\\u672C\\u8C03\\u7528\\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u5E76\\u5C06\\u6570\\u636E\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u56DE\\u8C03\\u6267\\u884C\"}),\"\\uFF1A\\u6D4F\\u89C8\\u5668\\u6267\\u884C\\u811A\\u672C\\uFF0C\\u4F7F\\u7528\\u6570\\u636E\\u8C03\\u7528\\u56DE\\u8C03\\u51FD\\u6570\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u4F8B\\u5B50\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>JSONP Example</title>\n    <script>\n      function handleResponse(data) {\n        console.log(data);\n      }\n\n      function fetchData() {\n        var script = document.createElement('script');\n        script.src = 'https://example.com/data?callback=handleResponse';\n        document.body.appendChild(script);\n      }\n    <\\/script>\n  </head>\n  <body>\n    <button onclick=\"fetchData()\">Fetch Data</button>\n  </body>\n</html>\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u5F53\\u5355\\u51FB\\u8BE5\\u6309\\u94AE\\u65F6\\uFF0C\\u5C06\\u521B\\u5EFA\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"<script>\"}),\" \\u6807\\u7B7E\\uFF0C\\u5176 \",(0,e.jsx)(n.code,{children:\"src\"}),\" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u4E3A \",(0,e.jsx)(n.code,{children:\"https://example.com/data?callback=handleResponse\"}),\"\\u3002\",(0,e.jsx)(n.code,{children:\"example.com\"}),\" \\u4E0A\\u7684\\u670D\\u52A1\\u5668\\u5C06\\u4F7F\\u7528\\u5982\\u4E0B\\u811A\\u672C\\u8FDB\\u884C\\u54CD\\u5E94\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`handleResponse({\n  name: 'John',\n  age: 30,\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"JSONP \\u4E0E Ajax \\u7684\\u533A\\u522B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F20\\u8F93\\u673A\\u5236\"}),\"\\uFF1AJSONP \\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"<script>\"}),\" \\u6807\\u7B7E\\u6765\\u83B7\\u53D6\\u6570\\u636E\\uFF0C\\u800C Ajax \\u4F7F\\u7528 XMLHttpRequest \\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8BF7\\u6C42\\u7C7B\\u578B\"}),\"\\uFF1AJSONP \\u4EC5\\u9650\\u4E8E GET \\u8BF7\\u6C42\\uFF0C\\u800C Ajax \\u53EF\\u4EE5\\u4F7F\\u7528\\u5404\\u79CD HTTP \\u65B9\\u6CD5\\uFF0C\\u5982 GET\\u3001POST\\u3001PUT\\u3001DELETE \\u7B49\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u540C\\u6E90\\u7B56\\u7565\"}),\"\\uFF1AJSONP \\u53EF\\u4EE5\\u7ED5\\u8FC7\\u540C\\u6E90\\u7B56\\u7565\\uFF0C\\u800C Ajax \\u8BF7\\u6C42\\u53D7\\u5176\\u7EA6\\u675F\\uFF0C\\u9664\\u975E\\u4F7F\\u7528 CORS\\uFF08\\u8DE8\\u57DF\\u8D44\\u6E90\\u5171\\u4EAB\\uFF09\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9519\\u8BEF\\u5904\\u7406\"}),\"\\uFF1A\\u4E0E Ajax \\u76F8\\u6BD4\\uFF0CJSONP \\u7684\\u9519\\u8BEF\\u5904\\u7406\\u80FD\\u529B\\u6709\\u9650\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"JSONP \\u7684\\u5C40\\u9650\\u6027\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B89\\u5168\\u98CE\\u9669\"}),\"\\uFF1A\\u5982\\u679C\\u5916\\u90E8\\u670D\\u52A1\\u5668\\u53D7\\u5230\\u7834\\u574F\\u6216\\u6076\\u610F\\u653B\\u51FB\\uFF0CJSONP \\u53EF\\u80FD\\u4F1A\\u4F7F\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u9762\\u4E34\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS) \\u653B\\u51FB\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4EC5\\u9650\\u4E8E GET \\u8BF7\\u6C42\"}),\"\\uFF1AJSONP \\u4E0D\\u80FD\\u7528\\u4E8E POST \\u8BF7\\u6C42\\u6216\\u5176\\u4ED6 HTTP \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9519\\u8BEF\\u5904\\u7406\"}),\"\\uFF1A\\u4E0E Ajax \\u76F8\\u6BD4\\uFF0CJSONP \\u7F3A\\u4E4F\\u5F3A\\u5927\\u7684\\u9519\\u8BEF\\u5904\\u7406\\u673A\\u5236\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/JSONP\",children:\"MDN Web \\u6587\\u6863\\uFF1AJSONP\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy\",children:\"\\u540C\\u6E90\\u7B56\\u7565\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS\",children:\"\\u8DE8\\u57DF\\u8D44\\u6E90\\u5171\\u4EAB (CORS)\"})}),`\n`]})]})}function J(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,Object.assign({},c,{children:(0,e.jsx)(a,c)})):a(c)}var j=J;return u(T);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var O=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var g=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),N=(c,n)=>{for(var l in n)i(c,l,{get:n[l],enumerable:!0})},d=(c,n,l,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of m(n))!P.call(c,r)&&r!==l&&i(c,r,{get:()=>n[r],enumerable:!(t=S(n,r))||t.enumerable});return c};var u=(c,n,l)=>(l=c!=null?p(O(c)):{},d(n||!c||!c.__esModule?i(l,\"default\",{value:c,enumerable:!0}):l,c)),x=c=>d(i({},\"__esModule\",{value:!0}),c);var o=g((b,h)=>{h.exports=_jsx_runtime});var T={};N(T,{default:()=>s,frontmatter:()=>J});var e=u(o()),J={title:\"\\u89E3\\u91CA JSONP \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\uFF08\\u4EE5\\u53CA\\u5B83\\u5B9E\\u9645\\u4E0A\\u5E76\\u975E Ajax\\uFF09\"};function a(c){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...c.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"JSONP\\uFF08\\u5E26\\u586B\\u5145\\u7684 JSON\\uFF09\\u662F\\u4E00\\u79CD\\u7528\\u4E8E\\u514B\\u670D Web \\u6D4F\\u89C8\\u5668\\u4E2D\\u7684\\u540C\\u6E90\\u7B56\\u7565\\u7684\\u6280\\u672F\\uFF0C\\u5141\\u8BB8\\u60A8\\u4ECE\\u4E0D\\u540C\\u57DF\\u7684\\u670D\\u52A1\\u5668\\u8BF7\\u6C42\\u6570\\u636E\\u3002\\u5B83\\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\u662F\\u52A8\\u6001\\u521B\\u5EFA \",(0,e.jsx)(n.code,{children:\"<script>\"}),\" \\u6807\\u7B7E\\uFF0C\\u5E76\\u5C06\\u5176 \",(0,e.jsx)(n.code,{children:\"src\"}),\" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u4E3A\\u6570\\u636E\\u6E90\\u7684 URL\\u3002\\u670D\\u52A1\\u5668\\u4F7F\\u7528\\u4E00\\u4E2A\\u811A\\u672C\\u8FDB\\u884C\\u54CD\\u5E94\\uFF0C\\u8BE5\\u811A\\u672C\\u4F7F\\u7528\\u6570\\u636E\\u4F5C\\u4E3A\\u5176\\u53C2\\u6570\\u8C03\\u7528\\u9884\\u5B9A\\u4E49\\u7684 callback \\u51FD\\u6570\\u3002\\u4E0E Ajax \\u4E0D\\u540C\\uFF0CJSONP \\u4E0D\\u4F7F\\u7528 XMLHttpRequest \\u5BF9\\u8C61\\uFF0C\\u5E76\\u4E14\\u4EC5\\u9650\\u4E8E GET \\u8BF7\\u6C42\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"JSONP \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\uFF08\\u4EE5\\u53CA\\u5B83\\u5B9E\\u9645\\u4E0A\\u5E76\\u975E Ajax\\uFF09\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EC0\\u4E48\\u662F JSONP\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"JSONP \\u4EE3\\u8868\\u5E26\\u586B\\u5145\\u7684 JSON\\u3002\\u5B83\\u662F\\u4E00\\u79CD\\u7528\\u4E8E\\u7ED5\\u8FC7 Web \\u6D4F\\u89C8\\u5668\\u4E2D\\u7684\\u540C\\u6E90\\u7B56\\u7565\\u7684\\u6280\\u672F\\uFF0C\\u8BE5\\u7B56\\u7565\\u9650\\u5236\\u7F51\\u9875\\u5411\\u63D0\\u4F9B\\u8BE5\\u7F51\\u9875\\u7684\\u57DF\\u4EE5\\u5916\\u7684\\u57DF\\u53D1\\u51FA\\u8BF7\\u6C42\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"JSONP \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u52A8\\u6001\\u811A\\u672C\\u6807\\u7B7E\\u521B\\u5EFA\"}),\"\\uFF1A\\u52A8\\u6001\\u521B\\u5EFA \",(0,e.jsx)(n.code,{children:\"<script>\"}),\" \\u6807\\u7B7E\\uFF0C\\u5E76\\u5C06\\u5176 \",(0,e.jsx)(n.code,{children:\"src\"}),\" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u4E3A\\u6570\\u636E\\u6E90\\u7684 URL\\uFF0C\\u5305\\u62EC\\u56DE\\u8C03\\u51FD\\u6570\\u540D\\u79F0\\u4F5C\\u4E3A\\u67E5\\u8BE2\\u53C2\\u6570\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u670D\\u52A1\\u5668\\u54CD\\u5E94\"}),\"\\uFF1A\\u670D\\u52A1\\u5668\\u4F7F\\u7528\\u4E00\\u4E2A\\u811A\\u672C\\u8FDB\\u884C\\u54CD\\u5E94\\uFF0C\\u8BE5\\u811A\\u672C\\u8C03\\u7528\\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u5E76\\u5C06\\u6570\\u636E\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u56DE\\u8C03\\u6267\\u884C\"}),\"\\uFF1A\\u6D4F\\u89C8\\u5668\\u6267\\u884C\\u811A\\u672C\\uFF0C\\u4F7F\\u7528\\u6570\\u636E\\u8C03\\u7528\\u56DE\\u8C03\\u51FD\\u6570\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u4F8B\\u5B50\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>JSONP Example</title>\n    <script>\n      function handleResponse(data) {\n        console.log(data);\n      }\n\n      function fetchData() {\n        var script = document.createElement('script');\n        script.src = 'https://example.com/data?callback=handleResponse';\n        document.body.appendChild(script);\n      }\n    <\\/script>\n  </head>\n  <body>\n    <button onclick=\"fetchData()\">Fetch Data</button>\n  </body>\n</html>\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u5F53\\u5355\\u51FB\\u8BE5\\u6309\\u94AE\\u65F6\\uFF0C\\u5C06\\u521B\\u5EFA\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"<script>\"}),\" \\u6807\\u7B7E\\uFF0C\\u5176 \",(0,e.jsx)(n.code,{children:\"src\"}),\" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u4E3A \",(0,e.jsx)(n.code,{children:\"https://example.com/data?callback=handleResponse\"}),\"\\u3002\",(0,e.jsx)(n.code,{children:\"example.com\"}),\" \\u4E0A\\u7684\\u670D\\u52A1\\u5668\\u5C06\\u4F7F\\u7528\\u5982\\u4E0B\\u811A\\u672C\\u8FDB\\u884C\\u54CD\\u5E94\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`handleResponse({\n  name: 'John',\n  age: 30,\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"JSONP \\u4E0E Ajax \\u7684\\u533A\\u522B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F20\\u8F93\\u673A\\u5236\"}),\"\\uFF1AJSONP \\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"<script>\"}),\" \\u6807\\u7B7E\\u6765\\u83B7\\u53D6\\u6570\\u636E\\uFF0C\\u800C Ajax \\u4F7F\\u7528 XMLHttpRequest \\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8BF7\\u6C42\\u7C7B\\u578B\"}),\"\\uFF1AJSONP \\u4EC5\\u9650\\u4E8E GET \\u8BF7\\u6C42\\uFF0C\\u800C Ajax \\u53EF\\u4EE5\\u4F7F\\u7528\\u5404\\u79CD HTTP \\u65B9\\u6CD5\\uFF0C\\u5982 GET\\u3001POST\\u3001PUT\\u3001DELETE \\u7B49\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u540C\\u6E90\\u7B56\\u7565\"}),\"\\uFF1AJSONP \\u53EF\\u4EE5\\u7ED5\\u8FC7\\u540C\\u6E90\\u7B56\\u7565\\uFF0C\\u800C Ajax \\u8BF7\\u6C42\\u53D7\\u5176\\u7EA6\\u675F\\uFF0C\\u9664\\u975E\\u4F7F\\u7528 CORS\\uFF08\\u8DE8\\u57DF\\u8D44\\u6E90\\u5171\\u4EAB\\uFF09\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9519\\u8BEF\\u5904\\u7406\"}),\"\\uFF1A\\u4E0E Ajax \\u76F8\\u6BD4\\uFF0CJSONP \\u7684\\u9519\\u8BEF\\u5904\\u7406\\u80FD\\u529B\\u6709\\u9650\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"JSONP \\u7684\\u5C40\\u9650\\u6027\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B89\\u5168\\u98CE\\u9669\"}),\"\\uFF1A\\u5982\\u679C\\u5916\\u90E8\\u670D\\u52A1\\u5668\\u53D7\\u5230\\u7834\\u574F\\u6216\\u6076\\u610F\\u653B\\u51FB\\uFF0CJSONP \\u53EF\\u80FD\\u4F1A\\u4F7F\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u9762\\u4E34\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS) \\u653B\\u51FB\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4EC5\\u9650\\u4E8E GET \\u8BF7\\u6C42\"}),\"\\uFF1AJSONP \\u4E0D\\u80FD\\u7528\\u4E8E POST \\u8BF7\\u6C42\\u6216\\u5176\\u4ED6 HTTP \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9519\\u8BEF\\u5904\\u7406\"}),\"\\uFF1A\\u4E0E Ajax \\u76F8\\u6BD4\\uFF0CJSONP \\u7F3A\\u4E4F\\u5F3A\\u5927\\u7684\\u9519\\u8BEF\\u5904\\u7406\\u673A\\u5236\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/JSONP\",children:\"MDN Web \\u6587\\u6863\\uFF1AJSONP\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy\",children:\"\\u540C\\u6E90\\u7B56\\u7565\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS\",children:\"\\u8DE8\\u57DF\\u8D44\\u6E90\\u5171\\u4EAB (CORS)\"})}),`\n`]})]})}function s(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,{...c,children:(0,e.jsx)(a,{...c})}):a(c)}return x(T);})();\n;return Component;"
 }
\ No newline at end of file
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 65f78d5a3..64e906b9e 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
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-prototypal-inheritance-works/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var n in e)i(t,n,{get:e[n],enumerable:!0})},a=(t,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of y(e))!u.call(t,r)&&r!==n&&i(t,r,{get:()=>e[r],enumerable:!(c=p(e,r))||c.enumerable});return t};var j=(t,e,n)=>(n=t!=null?d(m(t)):{},a(e||!t||!t.__esModule?i(n,\"default\",{value:t,enumerable:!0}):n,t)),g=t=>a(i({},\"__esModule\",{value:!0}),t);var h=f((D,s)=>{s.exports=_jsx_runtime});var O={};b(O,{default:()=>v,frontmatter:()=>w});var o=j(h()),w={title:\"Explain how prototypal inheritance works in JavaScript\"};function l(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",a:\"a\",pre:\"pre\",ul:\"ul\",li:\"li\",hr:\"hr\",h3:\"h3\",ol:\"ol\",strong:\"strong\"},t.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Prototypical inheritance in JavaScript is a way for objects to inherit properties and methods from other objects. Every JavaScript object has a special hidden property called \",(0,o.jsx)(e.code,{children:\"[[Prototype]]\"}),\" (commonly accessed via \",(0,o.jsx)(e.code,{children:\"__proto__\"}),\" or using \",(0,o.jsx)(e.code,{children:\"Object.getPrototypeOf()\"}),`) that is a reference to another object, which is called the object's \"prototype\".`]}),`\n`,(0,o.jsxs)(e.p,{children:[\"When a property is accessed on an object and if the property is not found on that object, the JavaScript engine looks at the object's \",(0,o.jsx)(e.code,{children:\"__proto__\"}),\", and the \",(0,o.jsx)(e.code,{children:\"__proto__\"}),\"'s \",(0,o.jsx)(e.code,{children:\"__proto__\"}),\" and so on, until it finds the property defined on one of the \",(0,o.jsx)(e.code,{children:\"__proto__\"}),\"s or until it reaches the end of the prototype chain.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"This behavior simulates classical inheritance, but it is really more of \",(0,o.jsx)(e.a,{href:\"https://davidwalsh.name/javascript-objects\",children:\"delegation than inheritance\"}),\".\"]}),`\n`,(0,o.jsx)(e.p,{children:\"Here's an example of prototypal inheritance:\"}),`\n`,(0,o.jsx)(e.pre,{live:!0,children:(0,o.jsx)(e.code,{className:\"language-js\",children:`// Parent object constructor.\nfunction Animal(name) {\n  this.name = name;\n}\n\n// Add a method to the parent object's prototype.\nAnimal.prototype.makeSound = function () {\n  console.log('The ' + this.constructor.name + ' makes a sound.');\n};\n\n// Child object constructor.\nfunction Dog(name) {\n  Animal.call(this, name); // Call the parent constructor.\n}\n\n// Set the child object's prototype to be the parent's prototype.\nObject.setPrototypeOf(Dog.prototype, Animal.prototype);\n\n// Add a method to the child object's prototype.\nDog.prototype.bark = function () {\n  console.log('Woof!');\n};\n\n// Create a new instance of Dog.\nconst bolt = new Dog('Bolt');\n\n// Call methods on the child object.\nconsole.log(bolt.name); // \"Bolt\"\nbolt.makeSound(); // \"The Dog makes a sound.\"\nbolt.bark(); // \"Woof!\"\n`})}),`\n`,(0,o.jsx)(e.p,{children:\"Things to note are:\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:\".makeSound\"}),\" is not defined on \",(0,o.jsx)(e.code,{children:\"Dog\"}),\", so the JavaScript engine goes up the prototype chain and finds \",(0,o.jsx)(e.code,{children:\".makeSound\"}),\" on the inherited \",(0,o.jsx)(e.code,{children:\"Animal\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Using \",(0,o.jsx)(e.code,{children:\"Object.create()\"}),\" to build the inheritance chain is no longer recommended. Use \",(0,o.jsx)(e.code,{children:\"Object.setPrototypeOf()\"}),\" instead.\"]}),`\n`]}),`\n`,(0,o.jsx)(e.hr,{}),`\n`,(0,o.jsx)(e.h2,{children:\"Prototypical Inheritance in Javascript\"}),`\n`,(0,o.jsx)(e.p,{children:\"Prototypical inheritance is a feature in JavaScript used to create objects that inherit properties and methods from other objects. Instead of a class-based inheritance model, JavaScript uses a prototype-based model, where objects can directly inherit from other objects.\"}),`\n`,(0,o.jsx)(e.h3,{children:\"Key Concepts\"}),`\n`,(0,o.jsxs)(e.ol,{children:[`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Prototypes\"}),\" : Every object in Javascript has a prototype, which is another object. When you create an object using an object literal or a constructor function, the new object is linked to the prototype of its constructor function or the \",(0,o.jsx)(e.code,{children:\"Object.prototype\"}),\" if no prototype is specified. This is commonly referenced using \",(0,o.jsx)(e.code,{children:\"__proto__\"}),\" or \",(0,o.jsx)(e.code,{children:\"[[Prototype]]\"}),\". You can also get the prototype by using inbuilt method \",(0,o.jsx)(e.code,{children:\"Object.getPrototypeOf()\"}),\" and you can set the prototype of an object via \",(0,o.jsx)(e.code,{children:\"Object.setPrototypeOf()\"}),\".\"]}),`\n`]}),`\n`,(0,o.jsx)(e.pre,{live:!0,children:(0,o.jsx)(e.code,{className:\"language-js\",children:`// Define a constructor function\nfunction Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\n// Add a method to the prototype\nPerson.prototype.sayHello = function () {\n  console.log(\\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`);\n};\n\n// Create a new object using the constructor function\nlet john = new Person('John', 30);\n\n// The new object has access to the methods defined on the prototype\njohn.sayHello(); // \"Hello, my name is John and I am 30 years old.\"\n\n// The prototype of the new object is the prototype of the constructor function\nconsole.log(john.__proto__ === Person.prototype); // true\n\n// You can also get the prototype using Object.getPrototypeOf()\nconsole.log(Object.getPrototypeOf(john) === Person.prototype); // true\n\n// You can set the prototype of an object using Object.setPrototypeOf()\nlet newProto = {\n  sayGoodbye: function () {\n    console.log(\\`Goodbye, my name is \\${this.name}\\`);\n  },\n};\n\nObject.setPrototypeOf(john, newProto);\n\n// Now john has access to the methods defined on the new prototype\njohn.sayGoodbye(); // \"Goodbye, my name is John\"\n\n// But no longer has access to the methods defined on the old prototype\nconsole.log(john.sayHello); // undefined\n`})}),`\n`,(0,o.jsxs)(e.ol,{start:\"2\",children:[`\n`,(0,o.jsxs)(e.li,{children:[`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.strong,{children:\"Prototype chain\"}),\": When a property or method is accessed on an object, JavaScript first looks for it on the object itself. If it doesn't find it there, it looks at the object's prototype, and then the prototype's prototype, and so on, until it either finds the property or reaches the end of the chain (i.e., \",(0,o.jsx)(e.code,{children:\"null\"}),\").\"]}),`\n`]}),`\n`,(0,o.jsxs)(e.li,{children:[`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.strong,{children:\"Constructor functions\"}),\": JavaScript provides constructor functions to create objects. When a function is used as a constructor with the new keyword, the new object's prototype (\",(0,o.jsx)(e.code,{children:\"[[Prototype]]\"}),\") is set to the constructor's prototype property.\"]}),`\n`]}),`\n`]}),`\n`,(0,o.jsx)(e.pre,{live:!0,children:(0,o.jsx)(e.code,{className:\"language-js\",children:`// Define a constructor function\nfunction Animal(name) {\n  this.name = name;\n}\n\n// Add a method to the prototype\nAnimal.prototype.sayName = function () {\n  console.log(\\`My name is \\${this.name}\\`);\n};\n\n// Define a new constructor function\nfunction Dog(name, breed) {\n  Animal.call(this, name);\n  this.breed = breed;\n}\n\n// Set the prototype of Dog to inherit from Animal's prototype\nObject.setPrototypeOf(Dog.prototype, Animal.prototype);\n\n// Add a method to the Dog prototype\nDog.prototype.bark = function () {\n  console.log('Woof!');\n};\n\n// Create a new object using the Dog constructor function\nlet fido = new Dog('Fido', 'Labrador');\n\n// The new object has access to the methods defined on its own prototype and the Animal prototype\nfido.bark(); // \"Woof!\"\nfido.sayName(); // \"My name is Fido\"\n\n// If we try to access a method that doesn't exist on the Dog prototype or the Animal prototype, JavaScript will return undefined\nconsole.log(fido.fly); // undefined\n`})}),`\n`,(0,o.jsxs)(e.ol,{start:\"4\",children:[`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:(0,o.jsx)(e.code,{children:\"Object.create()\"})}),\": This method creates a new object whose internal \",(0,o.jsx)(e.code,{children:\"[[Prototype]]\"}),\" is directly linked to the specified prototype object. It's the most direct way to create an object that inherits from another specific object, without involving constructor functions. If you create a object via \",(0,o.jsx)(e.code,{children:\"Object.create(null)\"}),\" it will not inherit any properties from \",(0,o.jsx)(e.code,{children:\"Object.prototype\"}),\". This means the object will not have any built-in properties or methods like \",(0,o.jsx)(e.code,{children:\"toString()\"}),\", \",(0,o.jsx)(e.code,{children:\"hasOwnProperty()\"}),\",\"]}),`\n`]}),`\n`,(0,o.jsx)(e.pre,{live:!0,children:(0,o.jsx)(e.code,{className:\"language-js\",children:`// Define a prototype object\nlet proto = {\n  greet: function () {\n    console.log(\\`Hello, my name is \\${this.name}\\`);\n  },\n};\n\n// Use \\`Object.create()\\` to create a new object with the specified prototype\nlet person = Object.create(proto);\nperson.name = 'John';\n\n// The new object has access to the methods defined on the prototype\nperson.greet(); // \"Hello, my name is John\"\n\n// Check if the object has a property\nconsole.log(person.hasOwnProperty('name')); // true\n\n// Create an object that does not inherit from Object.prototype\nlet animal = Object.create(null);\nanimal.name = 'Rocky';\n\n// The new object does not have any built-in properties or methods\nconsole.log(animal.toString); // undefined\nconsole.log(animal.hasOwnProperty); // undefined\n\n// But you can still add and access custom properties\nanimal.describe = function () {\n  console.log(\\`Name of the animal is \\${this.name}\\`);\n};\n\nanimal.describe(); // \"Name of the animal is Rocky\"\n`})}),`\n`,(0,o.jsx)(e.h2,{children:\"Resources\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain\",children:\"Inheritance and the prototype chain | MDN\"})}),`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://dev.to/lydiahallie/javascript-visualized-prototypal-inheritance-47co\",children:\"JavaScript Visualized: Prototypal Inheritance\"})}),`\n`]})]})}function _(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,Object.assign({},t,{children:(0,o.jsx)(l,t)})):l(t)}var v=_;return g(O);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),j=(t,e)=>{for(var n in e)i(t,n,{get:e[n],enumerable:!0})},a=(t,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!f.call(t,r)&&r!==n&&i(t,r,{get:()=>e[r],enumerable:!(c=y(e,r))||c.enumerable});return t};var g=(t,e,n)=>(n=t!=null?p(u(t)):{},a(e||!t||!t.__esModule?i(n,\"default\",{value:t,enumerable:!0}):n,t)),w=t=>a(i({},\"__esModule\",{value:!0}),t);var h=b((P,s)=>{s.exports=_jsx_runtime});var v={};j(v,{default:()=>d,frontmatter:()=>_});var o=g(h()),_={title:\"Explain how prototypal inheritance works in JavaScript\"};function l(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Prototypical inheritance in JavaScript is a way for objects to inherit properties and methods from other objects. Every JavaScript object has a special hidden property called \",(0,o.jsx)(e.code,{children:\"[[Prototype]]\"}),\" (commonly accessed via \",(0,o.jsx)(e.code,{children:\"__proto__\"}),\" or using \",(0,o.jsx)(e.code,{children:\"Object.getPrototypeOf()\"}),`) that is a reference to another object, which is called the object's \"prototype\".`]}),`\n`,(0,o.jsxs)(e.p,{children:[\"When a property is accessed on an object and if the property is not found on that object, the JavaScript engine looks at the object's \",(0,o.jsx)(e.code,{children:\"__proto__\"}),\", and the \",(0,o.jsx)(e.code,{children:\"__proto__\"}),\"'s \",(0,o.jsx)(e.code,{children:\"__proto__\"}),\" and so on, until it finds the property defined on one of the \",(0,o.jsx)(e.code,{children:\"__proto__\"}),\"s or until it reaches the end of the prototype chain.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"This behavior simulates classical inheritance, but it is really more of \",(0,o.jsx)(e.a,{href:\"https://davidwalsh.name/javascript-objects\",children:\"delegation than inheritance\"}),\".\"]}),`\n`,(0,o.jsx)(e.p,{children:\"Here's an example of prototypal inheritance:\"}),`\n`,(0,o.jsx)(e.pre,{live:!0,children:(0,o.jsx)(e.code,{className:\"language-js\",children:`// Parent object constructor.\nfunction Animal(name) {\n  this.name = name;\n}\n\n// Add a method to the parent object's prototype.\nAnimal.prototype.makeSound = function () {\n  console.log('The ' + this.constructor.name + ' makes a sound.');\n};\n\n// Child object constructor.\nfunction Dog(name) {\n  Animal.call(this, name); // Call the parent constructor.\n}\n\n// Set the child object's prototype to be the parent's prototype.\nObject.setPrototypeOf(Dog.prototype, Animal.prototype);\n\n// Add a method to the child object's prototype.\nDog.prototype.bark = function () {\n  console.log('Woof!');\n};\n\n// Create a new instance of Dog.\nconst bolt = new Dog('Bolt');\n\n// Call methods on the child object.\nconsole.log(bolt.name); // \"Bolt\"\nbolt.makeSound(); // \"The Dog makes a sound.\"\nbolt.bark(); // \"Woof!\"\n`})}),`\n`,(0,o.jsx)(e.p,{children:\"Things to note are:\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:\".makeSound\"}),\" is not defined on \",(0,o.jsx)(e.code,{children:\"Dog\"}),\", so the JavaScript engine goes up the prototype chain and finds \",(0,o.jsx)(e.code,{children:\".makeSound\"}),\" on the inherited \",(0,o.jsx)(e.code,{children:\"Animal\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Using \",(0,o.jsx)(e.code,{children:\"Object.create()\"}),\" to build the inheritance chain is no longer recommended. Use \",(0,o.jsx)(e.code,{children:\"Object.setPrototypeOf()\"}),\" instead.\"]}),`\n`]}),`\n`,(0,o.jsx)(e.hr,{}),`\n`,(0,o.jsx)(e.h2,{children:\"Prototypical Inheritance in Javascript\"}),`\n`,(0,o.jsx)(e.p,{children:\"Prototypical inheritance is a feature in JavaScript used to create objects that inherit properties and methods from other objects. Instead of a class-based inheritance model, JavaScript uses a prototype-based model, where objects can directly inherit from other objects.\"}),`\n`,(0,o.jsx)(e.h3,{children:\"Key Concepts\"}),`\n`,(0,o.jsxs)(e.ol,{children:[`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Prototypes\"}),\" : Every object in Javascript has a prototype, which is another object. When you create an object using an object literal or a constructor function, the new object is linked to the prototype of its constructor function or the \",(0,o.jsx)(e.code,{children:\"Object.prototype\"}),\" if no prototype is specified. This is commonly referenced using \",(0,o.jsx)(e.code,{children:\"__proto__\"}),\" or \",(0,o.jsx)(e.code,{children:\"[[Prototype]]\"}),\". You can also get the prototype by using inbuilt method \",(0,o.jsx)(e.code,{children:\"Object.getPrototypeOf()\"}),\" and you can set the prototype of an object via \",(0,o.jsx)(e.code,{children:\"Object.setPrototypeOf()\"}),\".\"]}),`\n`]}),`\n`,(0,o.jsx)(e.pre,{live:!0,children:(0,o.jsx)(e.code,{className:\"language-js\",children:`// Define a constructor function\nfunction Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\n// Add a method to the prototype\nPerson.prototype.sayHello = function () {\n  console.log(\\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`);\n};\n\n// Create a new object using the constructor function\nlet john = new Person('John', 30);\n\n// The new object has access to the methods defined on the prototype\njohn.sayHello(); // \"Hello, my name is John and I am 30 years old.\"\n\n// The prototype of the new object is the prototype of the constructor function\nconsole.log(john.__proto__ === Person.prototype); // true\n\n// You can also get the prototype using Object.getPrototypeOf()\nconsole.log(Object.getPrototypeOf(john) === Person.prototype); // true\n\n// You can set the prototype of an object using Object.setPrototypeOf()\nlet newProto = {\n  sayGoodbye: function () {\n    console.log(\\`Goodbye, my name is \\${this.name}\\`);\n  },\n};\n\nObject.setPrototypeOf(john, newProto);\n\n// Now john has access to the methods defined on the new prototype\njohn.sayGoodbye(); // \"Goodbye, my name is John\"\n\n// But no longer has access to the methods defined on the old prototype\nconsole.log(john.sayHello); // undefined\n`})}),`\n`,(0,o.jsxs)(e.ol,{start:\"2\",children:[`\n`,(0,o.jsxs)(e.li,{children:[`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.strong,{children:\"Prototype chain\"}),\": When a property or method is accessed on an object, JavaScript first looks for it on the object itself. If it doesn't find it there, it looks at the object's prototype, and then the prototype's prototype, and so on, until it either finds the property or reaches the end of the chain (i.e., \",(0,o.jsx)(e.code,{children:\"null\"}),\").\"]}),`\n`]}),`\n`,(0,o.jsxs)(e.li,{children:[`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.strong,{children:\"Constructor functions\"}),\": JavaScript provides constructor functions to create objects. When a function is used as a constructor with the new keyword, the new object's prototype (\",(0,o.jsx)(e.code,{children:\"[[Prototype]]\"}),\") is set to the constructor's prototype property.\"]}),`\n`]}),`\n`]}),`\n`,(0,o.jsx)(e.pre,{live:!0,children:(0,o.jsx)(e.code,{className:\"language-js\",children:`// Define a constructor function\nfunction Animal(name) {\n  this.name = name;\n}\n\n// Add a method to the prototype\nAnimal.prototype.sayName = function () {\n  console.log(\\`My name is \\${this.name}\\`);\n};\n\n// Define a new constructor function\nfunction Dog(name, breed) {\n  Animal.call(this, name);\n  this.breed = breed;\n}\n\n// Set the prototype of Dog to inherit from Animal's prototype\nObject.setPrototypeOf(Dog.prototype, Animal.prototype);\n\n// Add a method to the Dog prototype\nDog.prototype.bark = function () {\n  console.log('Woof!');\n};\n\n// Create a new object using the Dog constructor function\nlet fido = new Dog('Fido', 'Labrador');\n\n// The new object has access to the methods defined on its own prototype and the Animal prototype\nfido.bark(); // \"Woof!\"\nfido.sayName(); // \"My name is Fido\"\n\n// If we try to access a method that doesn't exist on the Dog prototype or the Animal prototype, JavaScript will return undefined\nconsole.log(fido.fly); // undefined\n`})}),`\n`,(0,o.jsxs)(e.ol,{start:\"4\",children:[`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:(0,o.jsx)(e.code,{children:\"Object.create()\"})}),\": This method creates a new object whose internal \",(0,o.jsx)(e.code,{children:\"[[Prototype]]\"}),\" is directly linked to the specified prototype object. It's the most direct way to create an object that inherits from another specific object, without involving constructor functions. If you create a object via \",(0,o.jsx)(e.code,{children:\"Object.create(null)\"}),\" it will not inherit any properties from \",(0,o.jsx)(e.code,{children:\"Object.prototype\"}),\". This means the object will not have any built-in properties or methods like \",(0,o.jsx)(e.code,{children:\"toString()\"}),\", \",(0,o.jsx)(e.code,{children:\"hasOwnProperty()\"}),\",\"]}),`\n`]}),`\n`,(0,o.jsx)(e.pre,{live:!0,children:(0,o.jsx)(e.code,{className:\"language-js\",children:`// Define a prototype object\nlet proto = {\n  greet: function () {\n    console.log(\\`Hello, my name is \\${this.name}\\`);\n  },\n};\n\n// Use \\`Object.create()\\` to create a new object with the specified prototype\nlet person = Object.create(proto);\nperson.name = 'John';\n\n// The new object has access to the methods defined on the prototype\nperson.greet(); // \"Hello, my name is John\"\n\n// Check if the object has a property\nconsole.log(person.hasOwnProperty('name')); // true\n\n// Create an object that does not inherit from Object.prototype\nlet animal = Object.create(null);\nanimal.name = 'Rocky';\n\n// The new object does not have any built-in properties or methods\nconsole.log(animal.toString); // undefined\nconsole.log(animal.hasOwnProperty); // undefined\n\n// But you can still add and access custom properties\nanimal.describe = function () {\n  console.log(\\`Name of the animal is \\${this.name}\\`);\n};\n\nanimal.describe(); // \"Name of the animal is Rocky\"\n`})}),`\n`,(0,o.jsx)(e.h2,{children:\"Resources\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain\",children:\"Inheritance and the prototype chain | MDN\"})}),`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://dev.to/lydiahallie/javascript-visualized-prototypal-inheritance-47co\",children:\"JavaScript Visualized: Prototypal Inheritance\"})}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(l,{...t})}):l(t)}return w(v);})();\n;return Component;"
 }
\ No newline at end of file
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 3c6af2085..8a4832c45 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
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-prototypal-inheritance-works/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var b=(n,o)=>()=>(o||n((o={exports:{}}).exports,o),o.exports),j=(n,o)=>{for(var t in o)r(n,t,{get:o[t],enumerable:!0})},i=(n,o,t,c)=>{if(o&&typeof o==\"object\"||typeof o==\"function\")for(let a of h(o))!_.call(n,a)&&a!==t&&r(n,a,{get:()=>o[a],enumerable:!(c=m(o,a))||c.enumerable});return n};var f=(n,o,t)=>(t=n!=null?p(u(n)):{},i(o||!n||!n.__esModule?r(t,\"default\",{value:n,enumerable:!0}):t,n)),g=n=>i(r({},\"__esModule\",{value:!0}),n);var s=b((O,d)=>{d.exports=_jsx_runtime});var S={};j(S,{default:()=>y,frontmatter:()=>x});var e=f(s()),x={title:\"Explique como funciona a heran\\xE7a de prot\\xF3tipos\"};function l(n){let o=Object.assign({p:\"p\",code:\"code\",a:\"a\",h2:\"h2\",pre:\"pre\",ul:\"ul\",li:\"li\"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(o.p,{children:[\"Essa \\xE9 uma pergunta extremamente comum em entrevistas de JavaScript. Todos os objetos JavaScript t\\xEAm uma propriedade \",(0,e.jsx)(o.code,{children:\"__proto__\"}),\" com exce\\xE7\\xE3o de objetos criados com \",(0,e.jsx)(o.code,{children:\"object.create(null)\"}),', ou seja, uma refer\\xEAncia a outro objeto, que \\xE9 chamado de \"prot\\xF3tipo\" do objeto. Quando uma propriedade \\xE9 acessada em um objeto e se a propriedade n\\xE3o \\xE9 encontrada nesse objeto, o motor de JavaScript olha para o objeto ',(0,e.jsx)(o.code,{children:\"__proto__\"}),\", e o \",(0,e.jsx)(o.code,{children:\"__proto__\"}),\" do \",(0,e.jsx)(o.code,{children:\"__proto__\"}),\" e assim por diante, at\\xE9 que encontre a propriedade definida em um dos \",(0,e.jsx)(o.code,{children:\"__proto__\"}),\"s ou at\\xE9 chegar ao final da cadeia de prot\\xF3tipos. Este comportamento simula a heran\\xE7a cl\\xE1ssica, mas \\xE9 realmente mais de \",(0,e.jsx)(o.a,{href:\"https://davidwalsh.name/javascript-objects\",children:\"delega\\xE7\\xE3o do que heran\\xE7a\"}),\".\"]}),`\n`,(0,e.jsx)(o.h2,{children:\"Exemplo de Heran\\xE7a de Prot\\xF3tipos\"}),`\n`,(0,e.jsx)(o.pre,{children:(0,e.jsx)(o.code,{className:\"language-js\",children:`// Construtor de objeto pai.\nfunction Animal(name) {\n  this.name = name;\n}\n\n// Adiciona um m\\xE9todo ao prot\\xF3tipo do objeto pai.\nAnimal.prototype.makeSound = function () {\n  console.log('O ' + this.constructor.name + ' faz um som.');\n};\n\n// Construtor filho.\nfunction Dog(name) {\n  Animal.call(this, name); // Chama o construtor pai.\n}\n\n// Set the child object's prototype to be the parent's prototype.\nObject.setPrototypeOf(Dog.prototype, Animal.prototype);\n\n// Adiciona um m\\xE9todo ao prot\\xF3tipo do objeto filho.\nDog.prototype.bark = function () {\n  console.log('Woof!');\n};\n\n// Criar uma nova inst\\xE2ncia do Cachorro.\nconst bolt = new Dog('Bolt');\n\n// Chama m\\xE9todos no objeto filho.\nconsole.log(bolt.name); // \"Bolt\"\nbolt.makeSound(); // \"O Dog faz um som.\"\nbolt.bark(); // \"Woof!\"\n`})}),`\n`,(0,e.jsx)(o.p,{children:\"As coisas a observar s\\xE3o:\"}),`\n`,(0,e.jsxs)(o.ul,{children:[`\n`,(0,e.jsxs)(o.li,{children:[(0,e.jsx)(o.code,{children:\".makeSound\"}),\" n\\xE3o est\\xE1 definido em \",(0,e.jsx)(o.code,{children:\"Dog\"}),\", ent\\xE3o o navegador aumenta a cadeia de prot\\xF3tipos e encontra \",(0,e.jsx)(o.code,{children:\".makeSound\"}),\" para fora do \",(0,e.jsx)(o.code,{children:\"Animal\"}),\" herdado.\"]}),`\n`,(0,e.jsxs)(o.li,{children:[\"Using \",(0,e.jsx)(o.code,{children:\"Object.create\"}),\" to build the inheritance chain is no longer recommended. Use \",(0,e.jsx)(o.code,{children:\"Object.setPrototypeOf\"}),\" instead.\"]}),`\n`]}),`\n`,(0,e.jsx)(o.h2,{children:\"Resources\"}),`\n`,(0,e.jsxs)(o.ul,{children:[`\n`,(0,e.jsx)(o.li,{children:(0,e.jsx)(o.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain\",children:\"Inheritance and the prototype chain | MDN\"})}),`\n`]})]})}function v(n={}){let{wrapper:o}=n.components||{};return o?(0,e.jsx)(o,Object.assign({},n,{children:(0,e.jsx)(l,n)})):l(n)}var y=v;return g(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(n,o)=>()=>(o||n((o={exports:{}}).exports,o),o.exports),j=(n,o)=>{for(var t in o)r(n,t,{get:o[t],enumerable:!0})},i=(n,o,t,c)=>{if(o&&typeof o==\"object\"||typeof o==\"function\")for(let a of u(o))!b.call(n,a)&&a!==t&&r(n,a,{get:()=>o[a],enumerable:!(c=h(o,a))||c.enumerable});return n};var g=(n,o,t)=>(t=n!=null?m(_(n)):{},i(o||!n||!n.__esModule?r(t,\"default\",{value:n,enumerable:!0}):t,n)),x=n=>i(r({},\"__esModule\",{value:!0}),n);var s=f((D,d)=>{d.exports=_jsx_runtime});var y={};j(y,{default:()=>p,frontmatter:()=>v});var e=g(s()),v={title:\"Explique como funciona a heran\\xE7a de prot\\xF3tipos\"};function l(n){let o={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(o.p,{children:[\"Essa \\xE9 uma pergunta extremamente comum em entrevistas de JavaScript. Todos os objetos JavaScript t\\xEAm uma propriedade \",(0,e.jsx)(o.code,{children:\"__proto__\"}),\" com exce\\xE7\\xE3o de objetos criados com \",(0,e.jsx)(o.code,{children:\"object.create(null)\"}),', ou seja, uma refer\\xEAncia a outro objeto, que \\xE9 chamado de \"prot\\xF3tipo\" do objeto. Quando uma propriedade \\xE9 acessada em um objeto e se a propriedade n\\xE3o \\xE9 encontrada nesse objeto, o motor de JavaScript olha para o objeto ',(0,e.jsx)(o.code,{children:\"__proto__\"}),\", e o \",(0,e.jsx)(o.code,{children:\"__proto__\"}),\" do \",(0,e.jsx)(o.code,{children:\"__proto__\"}),\" e assim por diante, at\\xE9 que encontre a propriedade definida em um dos \",(0,e.jsx)(o.code,{children:\"__proto__\"}),\"s ou at\\xE9 chegar ao final da cadeia de prot\\xF3tipos. Este comportamento simula a heran\\xE7a cl\\xE1ssica, mas \\xE9 realmente mais de \",(0,e.jsx)(o.a,{href:\"https://davidwalsh.name/javascript-objects\",children:\"delega\\xE7\\xE3o do que heran\\xE7a\"}),\".\"]}),`\n`,(0,e.jsx)(o.h2,{children:\"Exemplo de Heran\\xE7a de Prot\\xF3tipos\"}),`\n`,(0,e.jsx)(o.pre,{children:(0,e.jsx)(o.code,{className:\"language-js\",children:`// Construtor de objeto pai.\nfunction Animal(name) {\n  this.name = name;\n}\n\n// Adiciona um m\\xE9todo ao prot\\xF3tipo do objeto pai.\nAnimal.prototype.makeSound = function () {\n  console.log('O ' + this.constructor.name + ' faz um som.');\n};\n\n// Construtor filho.\nfunction Dog(name) {\n  Animal.call(this, name); // Chama o construtor pai.\n}\n\n// Set the child object's prototype to be the parent's prototype.\nObject.setPrototypeOf(Dog.prototype, Animal.prototype);\n\n// Adiciona um m\\xE9todo ao prot\\xF3tipo do objeto filho.\nDog.prototype.bark = function () {\n  console.log('Woof!');\n};\n\n// Criar uma nova inst\\xE2ncia do Cachorro.\nconst bolt = new Dog('Bolt');\n\n// Chama m\\xE9todos no objeto filho.\nconsole.log(bolt.name); // \"Bolt\"\nbolt.makeSound(); // \"O Dog faz um som.\"\nbolt.bark(); // \"Woof!\"\n`})}),`\n`,(0,e.jsx)(o.p,{children:\"As coisas a observar s\\xE3o:\"}),`\n`,(0,e.jsxs)(o.ul,{children:[`\n`,(0,e.jsxs)(o.li,{children:[(0,e.jsx)(o.code,{children:\".makeSound\"}),\" n\\xE3o est\\xE1 definido em \",(0,e.jsx)(o.code,{children:\"Dog\"}),\", ent\\xE3o o navegador aumenta a cadeia de prot\\xF3tipos e encontra \",(0,e.jsx)(o.code,{children:\".makeSound\"}),\" para fora do \",(0,e.jsx)(o.code,{children:\"Animal\"}),\" herdado.\"]}),`\n`,(0,e.jsxs)(o.li,{children:[\"Using \",(0,e.jsx)(o.code,{children:\"Object.create\"}),\" to build the inheritance chain is no longer recommended. Use \",(0,e.jsx)(o.code,{children:\"Object.setPrototypeOf\"}),\" instead.\"]}),`\n`]}),`\n`,(0,e.jsx)(o.h2,{children:\"Resources\"}),`\n`,(0,e.jsxs)(o.ul,{children:[`\n`,(0,e.jsx)(o.li,{children:(0,e.jsx)(o.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain\",children:\"Inheritance and the prototype chain | MDN\"})}),`\n`]})]})}function p(n={}){let{wrapper:o}=n.components||{};return o?(0,e.jsx)(o,{...n,children:(0,e.jsx)(l,{...n})}):l(n)}return x(y);})();\n;return Component;"
 }
\ No newline at end of file
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 7dad8b74f..b2f506d6d 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
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-prototypal-inheritance-works/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),f=(o,e)=>{for(var t in e)c(o,t,{get:e[t],enumerable:!0})},i=(o,e,t,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!u.call(o,r)&&r!==t&&c(o,r,{get:()=>e[r],enumerable:!(a=p(e,r))||a.enumerable});return o};var b=(o,e,t)=>(t=o!=null?s(y(o)):{},i(e||!o||!o.__esModule?c(t,\"default\",{value:o,enumerable:!0}):t,o)),j=o=>i(c({},\"__esModule\",{value:!0}),o);var d=g((D,l)=>{l.exports=_jsx_runtime});var v={};f(v,{default:()=>P,frontmatter:()=>_});var n=b(d()),_={title:\"\\u89E3\\u91CA JavaScript \\u4E2D\\u539F\\u578B\\u7EE7\\u627F\\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"};function h(o){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",a:\"a\",pre:\"pre\",ul:\"ul\",li:\"li\",hr:\"hr\",h3:\"h3\",ol:\"ol\",strong:\"strong\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684\\u539F\\u578B\\u7EE7\\u627F\\u662F\\u5BF9\\u8C61\\u4ECE\\u5176\\u4ED6\\u5BF9\\u8C61\\u7EE7\\u627F\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u7684\\u4E00\\u79CD\\u65B9\\u5F0F\\u3002\\u6BCF\\u4E2A JavaScript \\u5BF9\\u8C61\\u90FD\\u6709\\u4E00\\u4E2A\\u540D\\u4E3A \",(0,n.jsx)(e.code,{children:\"[[Prototype]]\"}),\" \\u7684\\u7279\\u6B8A\\u9690\\u85CF\\u5C5E\\u6027\\uFF08\\u901A\\u5E38\\u901A\\u8FC7 \",(0,n.jsx)(e.code,{children:\"__proto__\"}),\" \\u6216\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.getPrototypeOf()\"}),\" \\u8BBF\\u95EE\\uFF09\\uFF0C\\u5B83\\u5F15\\u7528\\u53E6\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u8BE5\\u5BF9\\u8C61\\u88AB\\u79F0\\u4E3A\\u5BF9\\u8C61\\u7684\\u201C\\u539F\\u578B\\u201D\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u8BBF\\u95EE\\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\uFF0C\\u5E76\\u4E14\\u5728\\u8BE5\\u5BF9\\u8C61\\u4E0A\\u627E\\u4E0D\\u5230\\u8BE5\\u5C5E\\u6027\\u65F6\\uFF0CJavaScript \\u5F15\\u64CE\\u4F1A\\u67E5\\u770B\\u5BF9\\u8C61\\u7684 \",(0,n.jsx)(e.code,{children:\"__proto__\"}),\"\\uFF0C\\u4EE5\\u53CA \",(0,n.jsx)(e.code,{children:\"__proto__\"}),\" \\u7684 \",(0,n.jsx)(e.code,{children:\"__proto__\"}),\"\\uFF0C\\u4F9D\\u6B64\\u7C7B\\u63A8\\uFF0C\\u76F4\\u5230\\u5B83\\u5728\\u5176\\u4E2D\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"__proto__\"}),\" \\u4E0A\\u627E\\u5230\\u5B9A\\u4E49\\u7684\\u5C5E\\u6027\\uFF0C\\u6216\\u8005\\u76F4\\u5230\\u5B83\\u5230\\u8FBE\\u539F\\u578B\\u94FE\\u7684\\u672B\\u5C3E\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u79CD\\u884C\\u4E3A\\u6A21\\u62DF\\u4E86\\u7ECF\\u5178\\u7EE7\\u627F\\uFF0C\\u4F46\\u5B9E\\u9645\\u4E0A\\u5B83\\u66F4\\u50CF\\u662F\",(0,n.jsx)(e.a,{href:\"https://davidwalsh.name/javascript-objects\",children:\"\\u59D4\\u6258\\u800C\\u4E0D\\u662F\\u7EE7\\u627F\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u539F\\u578B\\u7EE7\\u627F\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Parent object constructor.\nfunction Animal(name) {\n  this.name = name;\n}\n\n// Add a method to the parent object's prototype.\nAnimal.prototype.makeSound = function () {\n  console.log('The ' + this.constructor.name + ' makes a sound.');\n};\n\n// Child object constructor.\nfunction Dog(name) {\n  Animal.call(this, name); // Call the parent constructor.\n}\n\n// Set the child object's prototype to be the parent's prototype.\nObject.setPrototypeOf(Dog.prototype, Animal.prototype);\n\n// Add a method to the child object's prototype.\nDog.prototype.bark = function () {\n  console.log('Woof!');\n};\n\n// Create a new instance of Dog.\nconst bolt = new Dog('Bolt');\n\n// Call methods on the child object.\nconsole.log(bolt.name); // \"Bolt\"\nbolt.makeSound(); // \"The Dog makes a sound.\"\nbolt.bark(); // \"Woof!\"\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u9700\\u8981\\u6CE8\\u610F\\u7684\\u662F\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\".makeSound\"}),\" \\u672A\\u5728 \",(0,n.jsx)(e.code,{children:\"Dog\"}),\" \\u4E0A\\u5B9A\\u4E49\\uFF0C\\u56E0\\u6B64 JavaScript \\u5F15\\u64CE\\u4F1A\\u5411\\u4E0A\\u67E5\\u627E\\u539F\\u578B\\u94FE\\uFF0C\\u5E76\\u5728\\u7EE7\\u627F\\u7684 \",(0,n.jsx)(e.code,{children:\"Animal\"}),\" \\u4E0A\\u627E\\u5230 \",(0,n.jsx)(e.code,{children:\".makeSound\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4E0D\\u518D\\u63A8\\u8350\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.create()\"}),\" \\u6765\\u6784\\u5EFA\\u7EE7\\u627F\\u94FE\\u3002\\u8BF7\\u6539\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.setPrototypeOf()\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Javascript \\u4E2D\\u7684\\u539F\\u578B\\u7EE7\\u627F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u539F\\u578B\\u7EE7\\u627F\\u662F JavaScript \\u4E2D\\u7528\\u4E8E\\u521B\\u5EFA\\u4ECE\\u5176\\u4ED6\\u5BF9\\u8C61\\u7EE7\\u627F\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u5BF9\\u8C61\\u7684\\u7279\\u6027\\u3002JavaScript \\u4F7F\\u7528\\u57FA\\u4E8E\\u539F\\u578B\\u7684\\u6A21\\u578B\\uFF0C\\u800C\\u4E0D\\u662F\\u57FA\\u4E8E\\u7C7B\\u7684\\u7EE7\\u627F\\u6A21\\u578B\\uFF0C\\u5BF9\\u8C61\\u53EF\\u4EE5\\u76F4\\u63A5\\u4ECE\\u5176\\u4ED6\\u5BF9\\u8C61\\u7EE7\\u627F\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5173\\u952E\\u6982\\u5FF5\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u539F\\u578B\"}),\"\\uFF1AJavaScript \\u4E2D\\u7684\\u6BCF\\u4E2A\\u5BF9\\u8C61\\u90FD\\u6709\\u4E00\\u4E2A\\u539F\\u578B\\uFF0C\\u5B83\\u4E5F\\u662F\\u4E00\\u4E2A\\u5BF9\\u8C61\\u3002\\u5F53\\u60A8\\u4F7F\\u7528\\u5BF9\\u8C61\\u5B57\\u9762\\u91CF\\u6216\\u6784\\u9020\\u51FD\\u6570\\u521B\\u5EFA\\u5BF9\\u8C61\\u65F6\\uFF0C\\u65B0\\u5BF9\\u8C61\\u5C06\\u94FE\\u63A5\\u5230\\u5176\\u6784\\u9020\\u51FD\\u6570\\u7684\\u539F\\u578B\\uFF0C\\u5982\\u679C\\u672A\\u6307\\u5B9A\\u539F\\u578B\\uFF0C\\u5219\\u94FE\\u63A5\\u5230 \",(0,n.jsx)(e.code,{children:\"Object.prototype\"}),\"\\u3002\\u8FD9\\u901A\\u5E38\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"__proto__\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"[[Prototype]]\"}),\" \\u5F15\\u7528\\u3002\\u60A8\\u8FD8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5185\\u7F6E\\u65B9\\u6CD5 \",(0,n.jsx)(e.code,{children:\"Object.getPrototypeOf()\"}),\" \\u83B7\\u53D6\\u539F\\u578B\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u901A\\u8FC7 \",(0,n.jsx)(e.code,{children:\"Object.setPrototypeOf()\"}),\" \\u8BBE\\u7F6E\\u5BF9\\u8C61\\u7684\\u539F\\u578B\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Define a constructor function\nfunction Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\n// Add a method to the prototype\nPerson.prototype.sayHello = function () {\n  console.log(\\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`);\n};\n\n// Create a new object using the constructor function\nlet john = new Person('John', 30);\n\n// The new object has access to the methods defined on the prototype\njohn.sayHello(); // \"Hello, my name is John and I am 30 years old.\"\n\n// The prototype of the new object is the prototype of the constructor function\nconsole.log(john.__proto__ === Person.prototype); // true\n\n// You can also get the prototype using Object.getPrototypeOf()\nconsole.log(Object.getPrototypeOf(john) === Person.prototype); // true\n\n// You can set the prototype of an object using Object.setPrototypeOf()\nlet newProto = {\n  sayGoodbye: function () {\n    console.log(\\`Goodbye, my name is \\${this.name}\\`);\n  },\n};\n\nObject.setPrototypeOf(john, newProto);\n\n// Now john has access to the methods defined on the new prototype\njohn.sayGoodbye(); // \"Goodbye, my name is John\"\n\n// But no longer has access to the methods defined on the old prototype\nconsole.log(john.sayHello); // undefined\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"2\",children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u539F\\u578B\\u94FE\"}),\"\\uFF1A\\u5F53\\u8BBF\\u95EE\\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u6216\\u65B9\\u6CD5\\u65F6\\uFF0CJavaScript \\u9996\\u5148\\u5728\\u5BF9\\u8C61\\u672C\\u8EAB\\u4E0A\\u67E5\\u627E\\u5B83\\u3002\\u5982\\u679C\\u627E\\u4E0D\\u5230\\uFF0C\\u5B83\\u4F1A\\u67E5\\u770B\\u5BF9\\u8C61\\u7684\\u539F\\u578B\\uFF0C\\u7136\\u540E\\u662F\\u539F\\u578B\\u7684\\u539F\\u578B\\uFF0C\\u4F9D\\u6B64\\u7C7B\\u63A8\\uFF0C\\u76F4\\u5230\\u627E\\u5230\\u8BE5\\u5C5E\\u6027\\u6216\\u5230\\u8FBE\\u94FE\\u7684\\u672B\\u5C3E\\uFF08\\u5373 \",(0,n.jsx)(e.code,{children:\"null\"}),\"\\uFF09\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u6784\\u9020\\u51FD\\u6570\"}),\"\\uFF1AJavaScript \\u63D0\\u4F9B\\u4E86\\u6784\\u9020\\u51FD\\u6570\\u6765\\u521B\\u5EFA\\u5BF9\\u8C61\\u3002\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u4E0E new \\u5173\\u952E\\u5B57\\u4E00\\u8D77\\u7528\\u4F5C\\u6784\\u9020\\u51FD\\u6570\\u65F6\\uFF0C\\u65B0\\u5BF9\\u8C61\\u7684\\u539F\\u578B (\",(0,n.jsx)(e.code,{children:\"[[Prototype]]\"}),\") \\u5C06\\u8BBE\\u7F6E\\u4E3A\\u6784\\u9020\\u51FD\\u6570 \\u7684\\u539F\\u578B\\u5C5E\\u6027\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u5B9A\\u4E49\\u4E00\\u4E2A\\u6784\\u9020\\u51FD\\u6570\nfunction Animal(name) {\n  this.name = name;\n}\n\n// \\u5C06\\u4E00\\u4E2A\\u65B9\\u6CD5\\u6DFB\\u52A0\\u5230\\u539F\\u578B\\u4E0A\nAnimal.prototype.sayName = function () {\n  console.log(\\`\\u6211\\u7684\\u540D\\u5B57\\u662F \\${this.name}\\`);\n};\n\n// \\u5B9A\\u4E49\\u4E00\\u4E2A\\u65B0\\u7684\\u6784\\u9020\\u51FD\\u6570\nfunction Dog(name, breed) {\n  Animal.call(this, name);\n  this.breed = breed;\n}\n\n// \\u8BBE\\u7F6E Dog \\u7684\\u539F\\u578B\\u4EE5\\u7EE7\\u627F\\u81EA Animal \\u7684\\u539F\\u578B\nObject.setPrototypeOf(Dog.prototype, Animal.prototype);\n\n// \\u5C06\\u4E00\\u4E2A\\u65B9\\u6CD5\\u6DFB\\u52A0\\u5230 Dog \\u7684\\u539F\\u578B\\u4E0A\nDog.prototype.bark = function () {\n  console.log('\\u6C6A\\uFF01');\n};\n\n// \\u4F7F\\u7528 Dog \\u6784\\u9020\\u51FD\\u6570\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5BF9\\u8C61\nlet fido = new Dog('Fido', 'Labrador');\n\n// \\u65B0\\u5BF9\\u8C61\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5728\\u5176\\u81EA\\u8EAB\\u539F\\u578B\\u548C Animal \\u539F\\u578B\\u4E0A\\u5B9A\\u4E49\\u7684\\u65B9\\u6CD5\nfido.bark(); // \"\\u6C6A\\uFF01\"\nfido.sayName(); // \"\\u6211\\u7684\\u540D\\u5B57\\u662F Fido\"\n\n// \\u5982\\u679C\\u6211\\u4EEC\\u5C1D\\u8BD5\\u8BBF\\u95EE Dog \\u539F\\u578B\\u6216 Animal \\u539F\\u578B\\u4E0A\\u4E0D\\u5B58\\u5728\\u7684\\u65B9\\u6CD5\\uFF0CJavaScript \\u5C06\\u8FD4\\u56DE undefined\nconsole.log(fido.fly); // undefined\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"4\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Object.create()\"})}),\": \\u6B64\\u65B9\\u6CD5\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5BF9\\u8C61\\uFF0C\\u5176\\u5185\\u90E8 \",(0,n.jsx)(e.code,{children:\"[[Prototype]]\"}),\" \\u76F4\\u63A5\\u94FE\\u63A5\\u5230\\u6307\\u5B9A\\u7684\\u539F\\u578B\\u5BF9\\u8C61\\u3002\\u8FD9\\u662F\\u521B\\u5EFA\\u4ECE\\u53E6\\u4E00\\u4E2A\\u7279\\u5B9A\\u5BF9\\u8C61\\u7EE7\\u627F\\u7684\\u5BF9\\u8C61\\u7684\\u6700\\u76F4\\u63A5\\u65B9\\u6CD5\\uFF0C\\u65E0\\u9700\\u6D89\\u53CA\\u6784\\u9020\\u51FD\\u6570\\u3002\\u5982\\u679C\\u901A\\u8FC7 \",(0,n.jsx)(e.code,{children:\"Object.create(null)\"}),\" \\u521B\\u5EFA\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u5B83\\u5C06\\u4E0D\\u4F1A\\u4ECE \",(0,n.jsx)(e.code,{children:\"Object.prototype\"}),\" \\u7EE7\\u627F\\u4EFB\\u4F55\\u5C5E\\u6027\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u8BE5\\u5BF9\\u8C61\\u5C06\\u6CA1\\u6709\\u4EFB\\u4F55\\u5185\\u7F6E\\u5C5E\\u6027\\u6216\\u65B9\\u6CD5\\uFF0C\\u5982 \",(0,n.jsx)(e.code,{children:\"toString()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"hasOwnProperty()\"}),\",\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Define a prototype object\nlet proto = {\n  greet: function () {\n    console.log(\\`Hello, my name is \\${this.name}\\`);\n  },\n};\n\n// Use \\`Object.create()\\` to create a new object with the specified prototype\nlet person = Object.create(proto);\nperson.name = 'John';\n\n// The new object has access to the methods defined on the prototype\nperson.greet(); // \"Hello, my name is John\"\n\n// Check if the object has a property\nconsole.log(person.hasOwnProperty('name')); // true\n\n// Create an object that does not inherit from Object.prototype\nlet animal = Object.create(null);\nanimal.name = 'Rocky';\n\n// The new object does not have any built-in properties or methods\nconsole.log(animal.toString); // undefined\nconsole.log(animal.hasOwnProperty); // undefined\n\n// But you can still add and access custom properties\nanimal.describe = function () {\n  console.log(\\`Name of the animal is \\${this.name}\\`);\n};\n\nanimal.describe(); // \"Name of the animal is Rocky\"\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u8D44\\u6E90\"}),`\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/Web/JavaScript/Inheritance_and_the_prototype_chain\",children:\"Inheritance and the prototype chain | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://dev.to/lydiahallie/javascript-visualized-prototypal-inheritance-47co\",children:\"JavaScript Visualized: Prototypal Inheritance\"})}),`\n`]})]})}function O(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(h,o)})):h(o)}var P=O;return j(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),b=(o,e)=>{for(var t in e)c(o,t,{get:e[t],enumerable:!0})},i=(o,e,t,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of y(e))!g.call(o,r)&&r!==t&&c(o,r,{get:()=>e[r],enumerable:!(a=m(e,r))||a.enumerable});return o};var j=(o,e,t)=>(t=o!=null?p(u(o)):{},i(e||!o||!o.__esModule?c(t,\"default\",{value:o,enumerable:!0}):t,o)),_=o=>i(c({},\"__esModule\",{value:!0}),o);var d=f((w,l)=>{l.exports=_jsx_runtime});var P={};b(P,{default:()=>s,frontmatter:()=>O});var n=j(d()),O={title:\"\\u89E3\\u91CA JavaScript \\u4E2D\\u539F\\u578B\\u7EE7\\u627F\\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"};function h(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684\\u539F\\u578B\\u7EE7\\u627F\\u662F\\u5BF9\\u8C61\\u4ECE\\u5176\\u4ED6\\u5BF9\\u8C61\\u7EE7\\u627F\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u7684\\u4E00\\u79CD\\u65B9\\u5F0F\\u3002\\u6BCF\\u4E2A JavaScript \\u5BF9\\u8C61\\u90FD\\u6709\\u4E00\\u4E2A\\u540D\\u4E3A \",(0,n.jsx)(e.code,{children:\"[[Prototype]]\"}),\" \\u7684\\u7279\\u6B8A\\u9690\\u85CF\\u5C5E\\u6027\\uFF08\\u901A\\u5E38\\u901A\\u8FC7 \",(0,n.jsx)(e.code,{children:\"__proto__\"}),\" \\u6216\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.getPrototypeOf()\"}),\" \\u8BBF\\u95EE\\uFF09\\uFF0C\\u5B83\\u5F15\\u7528\\u53E6\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u8BE5\\u5BF9\\u8C61\\u88AB\\u79F0\\u4E3A\\u5BF9\\u8C61\\u7684\\u201C\\u539F\\u578B\\u201D\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u8BBF\\u95EE\\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\uFF0C\\u5E76\\u4E14\\u5728\\u8BE5\\u5BF9\\u8C61\\u4E0A\\u627E\\u4E0D\\u5230\\u8BE5\\u5C5E\\u6027\\u65F6\\uFF0CJavaScript \\u5F15\\u64CE\\u4F1A\\u67E5\\u770B\\u5BF9\\u8C61\\u7684 \",(0,n.jsx)(e.code,{children:\"__proto__\"}),\"\\uFF0C\\u4EE5\\u53CA \",(0,n.jsx)(e.code,{children:\"__proto__\"}),\" \\u7684 \",(0,n.jsx)(e.code,{children:\"__proto__\"}),\"\\uFF0C\\u4F9D\\u6B64\\u7C7B\\u63A8\\uFF0C\\u76F4\\u5230\\u5B83\\u5728\\u5176\\u4E2D\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"__proto__\"}),\" \\u4E0A\\u627E\\u5230\\u5B9A\\u4E49\\u7684\\u5C5E\\u6027\\uFF0C\\u6216\\u8005\\u76F4\\u5230\\u5B83\\u5230\\u8FBE\\u539F\\u578B\\u94FE\\u7684\\u672B\\u5C3E\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u79CD\\u884C\\u4E3A\\u6A21\\u62DF\\u4E86\\u7ECF\\u5178\\u7EE7\\u627F\\uFF0C\\u4F46\\u5B9E\\u9645\\u4E0A\\u5B83\\u66F4\\u50CF\\u662F\",(0,n.jsx)(e.a,{href:\"https://davidwalsh.name/javascript-objects\",children:\"\\u59D4\\u6258\\u800C\\u4E0D\\u662F\\u7EE7\\u627F\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u539F\\u578B\\u7EE7\\u627F\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Parent object constructor.\nfunction Animal(name) {\n  this.name = name;\n}\n\n// Add a method to the parent object's prototype.\nAnimal.prototype.makeSound = function () {\n  console.log('The ' + this.constructor.name + ' makes a sound.');\n};\n\n// Child object constructor.\nfunction Dog(name) {\n  Animal.call(this, name); // Call the parent constructor.\n}\n\n// Set the child object's prototype to be the parent's prototype.\nObject.setPrototypeOf(Dog.prototype, Animal.prototype);\n\n// Add a method to the child object's prototype.\nDog.prototype.bark = function () {\n  console.log('Woof!');\n};\n\n// Create a new instance of Dog.\nconst bolt = new Dog('Bolt');\n\n// Call methods on the child object.\nconsole.log(bolt.name); // \"Bolt\"\nbolt.makeSound(); // \"The Dog makes a sound.\"\nbolt.bark(); // \"Woof!\"\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u9700\\u8981\\u6CE8\\u610F\\u7684\\u662F\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\".makeSound\"}),\" \\u672A\\u5728 \",(0,n.jsx)(e.code,{children:\"Dog\"}),\" \\u4E0A\\u5B9A\\u4E49\\uFF0C\\u56E0\\u6B64 JavaScript \\u5F15\\u64CE\\u4F1A\\u5411\\u4E0A\\u67E5\\u627E\\u539F\\u578B\\u94FE\\uFF0C\\u5E76\\u5728\\u7EE7\\u627F\\u7684 \",(0,n.jsx)(e.code,{children:\"Animal\"}),\" \\u4E0A\\u627E\\u5230 \",(0,n.jsx)(e.code,{children:\".makeSound\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4E0D\\u518D\\u63A8\\u8350\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.create()\"}),\" \\u6765\\u6784\\u5EFA\\u7EE7\\u627F\\u94FE\\u3002\\u8BF7\\u6539\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.setPrototypeOf()\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Javascript \\u4E2D\\u7684\\u539F\\u578B\\u7EE7\\u627F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u539F\\u578B\\u7EE7\\u627F\\u662F JavaScript \\u4E2D\\u7528\\u4E8E\\u521B\\u5EFA\\u4ECE\\u5176\\u4ED6\\u5BF9\\u8C61\\u7EE7\\u627F\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u5BF9\\u8C61\\u7684\\u7279\\u6027\\u3002JavaScript \\u4F7F\\u7528\\u57FA\\u4E8E\\u539F\\u578B\\u7684\\u6A21\\u578B\\uFF0C\\u800C\\u4E0D\\u662F\\u57FA\\u4E8E\\u7C7B\\u7684\\u7EE7\\u627F\\u6A21\\u578B\\uFF0C\\u5BF9\\u8C61\\u53EF\\u4EE5\\u76F4\\u63A5\\u4ECE\\u5176\\u4ED6\\u5BF9\\u8C61\\u7EE7\\u627F\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5173\\u952E\\u6982\\u5FF5\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u539F\\u578B\"}),\"\\uFF1AJavaScript \\u4E2D\\u7684\\u6BCF\\u4E2A\\u5BF9\\u8C61\\u90FD\\u6709\\u4E00\\u4E2A\\u539F\\u578B\\uFF0C\\u5B83\\u4E5F\\u662F\\u4E00\\u4E2A\\u5BF9\\u8C61\\u3002\\u5F53\\u60A8\\u4F7F\\u7528\\u5BF9\\u8C61\\u5B57\\u9762\\u91CF\\u6216\\u6784\\u9020\\u51FD\\u6570\\u521B\\u5EFA\\u5BF9\\u8C61\\u65F6\\uFF0C\\u65B0\\u5BF9\\u8C61\\u5C06\\u94FE\\u63A5\\u5230\\u5176\\u6784\\u9020\\u51FD\\u6570\\u7684\\u539F\\u578B\\uFF0C\\u5982\\u679C\\u672A\\u6307\\u5B9A\\u539F\\u578B\\uFF0C\\u5219\\u94FE\\u63A5\\u5230 \",(0,n.jsx)(e.code,{children:\"Object.prototype\"}),\"\\u3002\\u8FD9\\u901A\\u5E38\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"__proto__\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"[[Prototype]]\"}),\" \\u5F15\\u7528\\u3002\\u60A8\\u8FD8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5185\\u7F6E\\u65B9\\u6CD5 \",(0,n.jsx)(e.code,{children:\"Object.getPrototypeOf()\"}),\" \\u83B7\\u53D6\\u539F\\u578B\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u901A\\u8FC7 \",(0,n.jsx)(e.code,{children:\"Object.setPrototypeOf()\"}),\" \\u8BBE\\u7F6E\\u5BF9\\u8C61\\u7684\\u539F\\u578B\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Define a constructor function\nfunction Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\n// Add a method to the prototype\nPerson.prototype.sayHello = function () {\n  console.log(\\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`);\n};\n\n// Create a new object using the constructor function\nlet john = new Person('John', 30);\n\n// The new object has access to the methods defined on the prototype\njohn.sayHello(); // \"Hello, my name is John and I am 30 years old.\"\n\n// The prototype of the new object is the prototype of the constructor function\nconsole.log(john.__proto__ === Person.prototype); // true\n\n// You can also get the prototype using Object.getPrototypeOf()\nconsole.log(Object.getPrototypeOf(john) === Person.prototype); // true\n\n// You can set the prototype of an object using Object.setPrototypeOf()\nlet newProto = {\n  sayGoodbye: function () {\n    console.log(\\`Goodbye, my name is \\${this.name}\\`);\n  },\n};\n\nObject.setPrototypeOf(john, newProto);\n\n// Now john has access to the methods defined on the new prototype\njohn.sayGoodbye(); // \"Goodbye, my name is John\"\n\n// But no longer has access to the methods defined on the old prototype\nconsole.log(john.sayHello); // undefined\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"2\",children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u539F\\u578B\\u94FE\"}),\"\\uFF1A\\u5F53\\u8BBF\\u95EE\\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u6216\\u65B9\\u6CD5\\u65F6\\uFF0CJavaScript \\u9996\\u5148\\u5728\\u5BF9\\u8C61\\u672C\\u8EAB\\u4E0A\\u67E5\\u627E\\u5B83\\u3002\\u5982\\u679C\\u627E\\u4E0D\\u5230\\uFF0C\\u5B83\\u4F1A\\u67E5\\u770B\\u5BF9\\u8C61\\u7684\\u539F\\u578B\\uFF0C\\u7136\\u540E\\u662F\\u539F\\u578B\\u7684\\u539F\\u578B\\uFF0C\\u4F9D\\u6B64\\u7C7B\\u63A8\\uFF0C\\u76F4\\u5230\\u627E\\u5230\\u8BE5\\u5C5E\\u6027\\u6216\\u5230\\u8FBE\\u94FE\\u7684\\u672B\\u5C3E\\uFF08\\u5373 \",(0,n.jsx)(e.code,{children:\"null\"}),\"\\uFF09\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u6784\\u9020\\u51FD\\u6570\"}),\"\\uFF1AJavaScript \\u63D0\\u4F9B\\u4E86\\u6784\\u9020\\u51FD\\u6570\\u6765\\u521B\\u5EFA\\u5BF9\\u8C61\\u3002\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u4E0E new \\u5173\\u952E\\u5B57\\u4E00\\u8D77\\u7528\\u4F5C\\u6784\\u9020\\u51FD\\u6570\\u65F6\\uFF0C\\u65B0\\u5BF9\\u8C61\\u7684\\u539F\\u578B (\",(0,n.jsx)(e.code,{children:\"[[Prototype]]\"}),\") \\u5C06\\u8BBE\\u7F6E\\u4E3A\\u6784\\u9020\\u51FD\\u6570 \\u7684\\u539F\\u578B\\u5C5E\\u6027\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u5B9A\\u4E49\\u4E00\\u4E2A\\u6784\\u9020\\u51FD\\u6570\nfunction Animal(name) {\n  this.name = name;\n}\n\n// \\u5C06\\u4E00\\u4E2A\\u65B9\\u6CD5\\u6DFB\\u52A0\\u5230\\u539F\\u578B\\u4E0A\nAnimal.prototype.sayName = function () {\n  console.log(\\`\\u6211\\u7684\\u540D\\u5B57\\u662F \\${this.name}\\`);\n};\n\n// \\u5B9A\\u4E49\\u4E00\\u4E2A\\u65B0\\u7684\\u6784\\u9020\\u51FD\\u6570\nfunction Dog(name, breed) {\n  Animal.call(this, name);\n  this.breed = breed;\n}\n\n// \\u8BBE\\u7F6E Dog \\u7684\\u539F\\u578B\\u4EE5\\u7EE7\\u627F\\u81EA Animal \\u7684\\u539F\\u578B\nObject.setPrototypeOf(Dog.prototype, Animal.prototype);\n\n// \\u5C06\\u4E00\\u4E2A\\u65B9\\u6CD5\\u6DFB\\u52A0\\u5230 Dog \\u7684\\u539F\\u578B\\u4E0A\nDog.prototype.bark = function () {\n  console.log('\\u6C6A\\uFF01');\n};\n\n// \\u4F7F\\u7528 Dog \\u6784\\u9020\\u51FD\\u6570\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5BF9\\u8C61\nlet fido = new Dog('Fido', 'Labrador');\n\n// \\u65B0\\u5BF9\\u8C61\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5728\\u5176\\u81EA\\u8EAB\\u539F\\u578B\\u548C Animal \\u539F\\u578B\\u4E0A\\u5B9A\\u4E49\\u7684\\u65B9\\u6CD5\nfido.bark(); // \"\\u6C6A\\uFF01\"\nfido.sayName(); // \"\\u6211\\u7684\\u540D\\u5B57\\u662F Fido\"\n\n// \\u5982\\u679C\\u6211\\u4EEC\\u5C1D\\u8BD5\\u8BBF\\u95EE Dog \\u539F\\u578B\\u6216 Animal \\u539F\\u578B\\u4E0A\\u4E0D\\u5B58\\u5728\\u7684\\u65B9\\u6CD5\\uFF0CJavaScript \\u5C06\\u8FD4\\u56DE undefined\nconsole.log(fido.fly); // undefined\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"4\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Object.create()\"})}),\": \\u6B64\\u65B9\\u6CD5\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5BF9\\u8C61\\uFF0C\\u5176\\u5185\\u90E8 \",(0,n.jsx)(e.code,{children:\"[[Prototype]]\"}),\" \\u76F4\\u63A5\\u94FE\\u63A5\\u5230\\u6307\\u5B9A\\u7684\\u539F\\u578B\\u5BF9\\u8C61\\u3002\\u8FD9\\u662F\\u521B\\u5EFA\\u4ECE\\u53E6\\u4E00\\u4E2A\\u7279\\u5B9A\\u5BF9\\u8C61\\u7EE7\\u627F\\u7684\\u5BF9\\u8C61\\u7684\\u6700\\u76F4\\u63A5\\u65B9\\u6CD5\\uFF0C\\u65E0\\u9700\\u6D89\\u53CA\\u6784\\u9020\\u51FD\\u6570\\u3002\\u5982\\u679C\\u901A\\u8FC7 \",(0,n.jsx)(e.code,{children:\"Object.create(null)\"}),\" \\u521B\\u5EFA\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u5B83\\u5C06\\u4E0D\\u4F1A\\u4ECE \",(0,n.jsx)(e.code,{children:\"Object.prototype\"}),\" \\u7EE7\\u627F\\u4EFB\\u4F55\\u5C5E\\u6027\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u8BE5\\u5BF9\\u8C61\\u5C06\\u6CA1\\u6709\\u4EFB\\u4F55\\u5185\\u7F6E\\u5C5E\\u6027\\u6216\\u65B9\\u6CD5\\uFF0C\\u5982 \",(0,n.jsx)(e.code,{children:\"toString()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"hasOwnProperty()\"}),\",\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Define a prototype object\nlet proto = {\n  greet: function () {\n    console.log(\\`Hello, my name is \\${this.name}\\`);\n  },\n};\n\n// Use \\`Object.create()\\` to create a new object with the specified prototype\nlet person = Object.create(proto);\nperson.name = 'John';\n\n// The new object has access to the methods defined on the prototype\nperson.greet(); // \"Hello, my name is John\"\n\n// Check if the object has a property\nconsole.log(person.hasOwnProperty('name')); // true\n\n// Create an object that does not inherit from Object.prototype\nlet animal = Object.create(null);\nanimal.name = 'Rocky';\n\n// The new object does not have any built-in properties or methods\nconsole.log(animal.toString); // undefined\nconsole.log(animal.hasOwnProperty); // undefined\n\n// But you can still add and access custom properties\nanimal.describe = function () {\n  console.log(\\`Name of the animal is \\${this.name}\\`);\n};\n\nanimal.describe(); // \"Name of the animal is Rocky\"\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u8D44\\u6E90\"}),`\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/Web/JavaScript/Inheritance_and_the_prototype_chain\",children:\"Inheritance and the prototype chain | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://dev.to/lydiahallie/javascript-visualized-prototypal-inheritance-47co\",children:\"JavaScript Visualized: Prototypal Inheritance\"})}),`\n`]})]})}function s(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(h,{...o})}):h(o)}return _(P);})();\n;return Component;"
 }
\ No newline at end of file
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 3094d6907..0ec7c7212 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
@@ -30,5 +30,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-this-works-in-javascript/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var m=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),g=(o,n)=>{for(var i in n)c(o,i,{get:n[i],enumerable:!0})},r=(o,n,i,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of f(n))!b.call(o,t)&&t!==i&&c(o,t,{get:()=>n[t],enumerable:!(h=u(n,t))||h.enumerable});return o};var w=(o,n,i)=>(i=o!=null?a(p(o)):{},r(n||!o||!o.__esModule?c(i,\"default\",{value:o,enumerable:!0}):i,o)),j=o=>r(c({},\"__esModule\",{value:!0}),o);var s=m((J,l)=>{l.exports=_jsx_runtime});var T={};g(T,{default:()=>x,frontmatter:()=>v});var e=w(s()),v={title:\"Explain how `this` works in JavaScript\"};function d(o){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",ol:\"ol\",li:\"li\",a:\"a\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\"},o.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"There's no simple explanation for \",(0,e.jsx)(n.code,{children:\"this\"}),\"; it is one of the most confusing concepts in JavaScript because it's behavior differs from many other programming languages. The one-liner explanation of the \",(0,e.jsx)(n.code,{children:\"this\"}),\" keyword is that it is a dynamic reference to the context in which a function is executed.\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"A longer explanation is that \",(0,e.jsx)(n.code,{children:\"this\"}),\" follows these rules:\"]}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"If the \",(0,e.jsx)(n.code,{children:\"new\"}),\" keyword is used when calling the function, meaning the function was used as a function constructor, the \",(0,e.jsx)(n.code,{children:\"this\"}),\" inside the function is the newly-created object instance.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"If \",(0,e.jsx)(n.code,{children:\"this\"}),\" is used in a \",(0,e.jsx)(n.code,{children:\"class\"}),\" \",(0,e.jsx)(n.code,{children:\"constructor\"}),\", the \",(0,e.jsx)(n.code,{children:\"this\"}),\" inside the \",(0,e.jsx)(n.code,{children:\"constructor\"}),\" is the newly-created object instance.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"If \",(0,e.jsx)(n.code,{children:\"apply()\"}),\", \",(0,e.jsx)(n.code,{children:\"call()\"}),\", or \",(0,e.jsx)(n.code,{children:\"bind()\"}),\" is used to call/create a function, \",(0,e.jsx)(n.code,{children:\"this\"}),\" inside the function is the object that is passed in as the argument.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"If a function is called as a method (e.g. \",(0,e.jsx)(n.code,{children:\"obj.method()\"}),\")\\u200A\\u2014\\u200A\",(0,e.jsx)(n.code,{children:\"this\"}),\" is the object that the function is a property of.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"If a function is invoked as a free function invocation, meaning it was invoked without any of the conditions present above, \",(0,e.jsx)(n.code,{children:\"this\"}),\" is the global object. In the browser, the global object is the \",(0,e.jsx)(n.code,{children:\"window\"}),\" object. If in strict mode (\",(0,e.jsx)(n.code,{children:\"'use strict';\"}),\"), \",(0,e.jsx)(n.code,{children:\"this\"}),\" will be \",(0,e.jsx)(n.code,{children:\"undefined\"}),\" instead of the global object.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"If multiple of the above rules apply, the rule that is higher wins and will set the \",(0,e.jsx)(n.code,{children:\"this\"}),\" value.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"If the function is an ES2015 arrow function, it ignores all the rules above and receives the \",(0,e.jsx)(n.code,{children:\"this\"}),\" value of its surrounding scope at the time it is created.\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[\"For an in-depth explanation, do check out \",(0,e.jsx)(n.a,{href:\"https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3\",children:\"Arnav Aggrawal's article on Medium\"}),\".\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsxs)(n.h2,{children:[(0,e.jsx)(n.code,{children:\"this\"}),\" keyword\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"In JavaScript, \",(0,e.jsx)(n.code,{children:\"this\"}),\" is a keyword that refers to the current execution context of a function or script. It's a fundamental concept in JavaScript, and understanding how \",(0,e.jsx)(n.code,{children:\"this\"}),\" works is crucial for building robust and maintainable applications.\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Used globally\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"In the global scope, \",(0,e.jsx)(n.code,{children:\"this\"}),\" refers to the global object, which is the \",(0,e.jsx)(n.code,{children:\"window\"}),\" object in a web browser or the \",(0,e.jsx)(n.code,{children:\"global\"}),\" object in a Node.js environment.\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`console.log(this); // In a browser, this will log the window object (for non-strict mode).\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Within a regular function call\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"When a function is called in the global context or as a standalone function, \",(0,e.jsx)(n.code,{children:\"this\"}),\" refers to the global object (in non-strict mode) or \",(0,e.jsx)(n.code,{children:\"undefined\"}),\" (in strict mode).\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function showThis() {\n  console.log(this);\n}\n\nshowThis(); // In non-strict mode: Window (global object). In strict mode: undefined.\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Within a method call\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"When a function is called as a method of an object, \",(0,e.jsx)(n.code,{children:\"this\"}),\" refers to the object that the method is called on.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  name: 'John',\n  showThis: function () {\n    console.log(this);\n  },\n};\n\nobj.showThis(); // { name: 'John', showThis: \\u0192 }\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"Note that if you do the following, it is as good as a regular function call and not a method call. \",(0,e.jsx)(n.code,{children:\"this\"}),\" has lost its context and no longer points to \",(0,e.jsx)(n.code,{children:\"obj\"}),\".\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  name: 'John',\n  showThis: function () {\n    console.log(this);\n  },\n};\n\nconst showThisStandalone = obj.showThis;\nshowThisStandalone(); // In non-strict mode: Window (global object). In strict mode: undefined.\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Within a function constructor\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"When a function is used as a constructor (called with the \",(0,e.jsx)(n.code,{children:\"new\"}),\" keyword), \",(0,e.jsx)(n.code,{children:\"this\"}),\" refers to the newly-created instance. In the following example, \",(0,e.jsx)(n.code,{children:\"this\"}),\" refers to the \",(0,e.jsx)(n.code,{children:\"Person\"}),\" object being created, and the \",(0,e.jsx)(n.code,{children:\"name\"}),\" property is set on that object.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst person = new Person('John');\nconsole.log(person.name); // \"John\"\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Within class constructor and methods\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"In ES2015 classes, \",(0,e.jsx)(n.code,{children:\"this\"}),\" behaves as it does in object methods. It refers to the instance of the class.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Person {\n  constructor(name) {\n    this.name = name;\n  }\n\n  showThis() {\n    console.log(this);\n  }\n}\n\nconst person = new Person('John');\nperson.showThis(); // Person\\xA0{name: 'John'}\n\nconst showThisStandalone = person.showThis;\nshowThisStandalone(); // \\`undefined\\` because all parts of a class' body are strict mode.\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"Explicitly binding \",(0,e.jsx)(n.code,{children:\"this\"})]}),`\n`,(0,e.jsxs)(n.p,{children:[\"You can use \",(0,e.jsx)(n.code,{children:\"bind()\"}),\", \",(0,e.jsx)(n.code,{children:\"call()\"}),\", or \",(0,e.jsx)(n.code,{children:\"apply()\"}),\" to explicitly set the value of \",(0,e.jsx)(n.code,{children:\"this\"}),\" for a function.\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"Using the \",(0,e.jsx)(n.code,{children:\"call()\"}),\" and \",(0,e.jsx)(n.code,{children:\"apply()\"}),\" methods allow you to explicitly set the value of \",(0,e.jsx)(n.code,{children:\"this\"}),\" when calling the function.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function showThis() {\n  console.log(this);\n}\nconst obj = { name: 'John' };\n\nshowThis.call(obj); // { name: 'John' }\nshowThis.apply(obj); // { name: 'John' }\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"The \",(0,e.jsx)(n.code,{children:\"bind()\"}),\" method creates a new function with \",(0,e.jsx)(n.code,{children:\"this\"}),\" bound to the specified value.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function showThis() {\n  console.log(this);\n}\nconst obj = { name: 'John' };\n\nconst boundFunc = showThis.bind(obj);\nboundFunc(); // { name: 'John' }\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Within arrow functions\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Arrow functions do not have their own \",(0,e.jsx)(n.code,{children:\"this\"}),\" context. Instead, the \",(0,e.jsx)(n.code,{children:\"this\"}),\" is lexically scoped, which means it inherits the \",(0,e.jsx)(n.code,{children:\"this\"}),\" value from its surrounding scope at the time they are defined.\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"In this example, \",(0,e.jsx)(n.code,{children:\"this\"}),\" refers to the global object (window or global), because the arrow function is not bound to the \",(0,e.jsx)(n.code,{children:\"person\"}),\" object.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const person = {\n  firstName: 'John',\n  sayHello: () => {\n    console.log(\\`Hello, my name is \\${this.firstName}!\\`);\n  },\n};\n\nperson.sayHello(); // \"Hello, my name is undefined!\"\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In the following example, the \",(0,e.jsx)(n.code,{children:\"this\"}),\" in the arrow function will be the \",(0,e.jsx)(n.code,{children:\"this\"}),\" value of its enclosing context, so it depends on how \",(0,e.jsx)(n.code,{children:\"showThis()\"}),\" is called.\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  name: 'John',\n  showThis: function () {\n    const arrowFunc = () => {\n      console.log(this);\n    };\n    arrowFunc();\n  },\n};\n\nobj.showThis(); // { name: 'John', showThis: \\u0192 }\n\nconst showThisStandalone = obj.showThis;\nshowThisStandalone(); // In non-strict mode: Window (global object). In strict mode: undefined.\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"Therefore, the \",(0,e.jsx)(n.code,{children:\"this\"}),\" value in arrow functions cannot be set by \",(0,e.jsx)(n.code,{children:\"bind()\"}),\", \",(0,e.jsx)(n.code,{children:\"apply()\"}),\" or \",(0,e.jsx)(n.code,{children:\"call()\"}),\" methods, nor does it point to the current object in object methods.\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  name: 'Alice',\n  regularFunction: function () {\n    console.log('Regular function:', this.name);\n  },\n  arrowFunction: () => {\n    console.log('Arrow function:', this.name);\n  },\n};\n\nconst anotherObj = {\n  name: 'Bob',\n};\n\n// Using call/apply/bind with a regular function\nobj.regularFunction.call(anotherObj); // Regular function: Bob\nobj.regularFunction.apply(anotherObj); // Regular function: Bob\nconst boundRegularFunction = obj.regularFunction.bind(anotherObj);\nboundRegularFunction(); // Regular function: Bob\n\n// Using call/apply/bind with an arrow function, \\`this\\` refers to the global scope and cannot be modified.\nobj.arrowFunction.call(anotherObj); // Arrow function: window/undefined (depending if strict mode)\nobj.arrowFunction.apply(anotherObj); // Arrow function: window/undefined (depending if strict mode)\nconst boundArrowFunction = obj.arrowFunction.bind(anotherObj);\nboundArrowFunction(); // Arrow function: window/undefined (depending if strict mode)\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Within event handlers\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"When a function is called as a DOM event handler, \",(0,e.jsx)(n.code,{children:\"this\"}),\" refers to the element that triggered the event. In this example, \",(0,e.jsx)(n.code,{children:\"this\"}),\" refers to the \",(0,e.jsx)(n.code,{children:\"<button>\"}),\" element that was clicked.\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-html\",children:`<button id=\"my-button\" onclick=\"console.log(this)\">Click me</button>\n<!-- Logs the button element -->\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"When setting an event handler using JavaScript, this also refers to the element that received the event.\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`document.getElementById('my-button').addEventListener('click', function () {\n  console.log(this); // Logs the button element\n});\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"As mentioned above, ES2015 introduces \",(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions\",children:\"arrow functions\"}),\" which uses the \",(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this\",children:\"enclosing lexical scope\"}),\". This is usually convenient, but does prevent the caller from defining the \",(0,e.jsx)(n.code,{children:\"this\"}),\" context via \",(0,e.jsx)(n.code,{children:\".call\"}),\"/\",(0,e.jsx)(n.code,{children:\".apply\"}),\"/\",(0,e.jsx)(n.code,{children:\".bind\"}),\". One of the consequences is that DOM event handlers will not properly bind \",(0,e.jsx)(n.code,{children:\"this\"}),\" in your event handler functions if you define the callback parameters to \",(0,e.jsx)(n.code,{children:\".addEventListener()\"}),\" using arrow functions.\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`document.getElementById('my-button').addEventListener('click', () => {\n  console.log(this); // Window / undefined (depending on whether strict mode) instead of the button element.\n});\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In summary, \",(0,e.jsx)(n.code,{children:\"this\"}),\" in JavaScript refers to the current execution context of a function or script, and its value can change depending on the context in which it is used. Understanding how \",(0,e.jsx)(n.code,{children:\"this\"}),\" works is essential for building robust and maintainable JavaScript applications.\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this\",children:\"this - JavaScript | MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://medium.com/m/global-identity-2?redirectUrl=https%3A%2F%2Fcodeburst.io%2Fthe-simple-rules-to-this-in-javascript-35d97f31bde3\",children:[\"The Simple Rules to \",(0,e.jsx)(n.code,{children:\"this\"}),\" in Javascript\"]})}),`\n`]})]})}function y(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,Object.assign({},o,{children:(0,e.jsx)(d,o)})):d(o)}var x=y;return j(T);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),w=(o,n)=>{for(var i in n)c(o,i,{get:n[i],enumerable:!0})},r=(o,n,i,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of p(n))!m.call(o,t)&&t!==i&&c(o,t,{get:()=>n[t],enumerable:!(h=f(n,t))||h.enumerable});return o};var j=(o,n,i)=>(i=o!=null?u(b(o)):{},r(n||!o||!o.__esModule?c(i,\"default\",{value:o,enumerable:!0}):i,o)),v=o=>r(c({},\"__esModule\",{value:!0}),o);var s=g((I,l)=>{l.exports=_jsx_runtime});var x={};w(x,{default:()=>a,frontmatter:()=>y});var e=j(s()),y={title:\"Explain how `this` works in JavaScript\"};function d(o){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"There's no simple explanation for \",(0,e.jsx)(n.code,{children:\"this\"}),\"; it is one of the most confusing concepts in JavaScript because it's behavior differs from many other programming languages. The one-liner explanation of the \",(0,e.jsx)(n.code,{children:\"this\"}),\" keyword is that it is a dynamic reference to the context in which a function is executed.\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"A longer explanation is that \",(0,e.jsx)(n.code,{children:\"this\"}),\" follows these rules:\"]}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"If the \",(0,e.jsx)(n.code,{children:\"new\"}),\" keyword is used when calling the function, meaning the function was used as a function constructor, the \",(0,e.jsx)(n.code,{children:\"this\"}),\" inside the function is the newly-created object instance.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"If \",(0,e.jsx)(n.code,{children:\"this\"}),\" is used in a \",(0,e.jsx)(n.code,{children:\"class\"}),\" \",(0,e.jsx)(n.code,{children:\"constructor\"}),\", the \",(0,e.jsx)(n.code,{children:\"this\"}),\" inside the \",(0,e.jsx)(n.code,{children:\"constructor\"}),\" is the newly-created object instance.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"If \",(0,e.jsx)(n.code,{children:\"apply()\"}),\", \",(0,e.jsx)(n.code,{children:\"call()\"}),\", or \",(0,e.jsx)(n.code,{children:\"bind()\"}),\" is used to call/create a function, \",(0,e.jsx)(n.code,{children:\"this\"}),\" inside the function is the object that is passed in as the argument.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"If a function is called as a method (e.g. \",(0,e.jsx)(n.code,{children:\"obj.method()\"}),\")\\u200A\\u2014\\u200A\",(0,e.jsx)(n.code,{children:\"this\"}),\" is the object that the function is a property of.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"If a function is invoked as a free function invocation, meaning it was invoked without any of the conditions present above, \",(0,e.jsx)(n.code,{children:\"this\"}),\" is the global object. In the browser, the global object is the \",(0,e.jsx)(n.code,{children:\"window\"}),\" object. If in strict mode (\",(0,e.jsx)(n.code,{children:\"'use strict';\"}),\"), \",(0,e.jsx)(n.code,{children:\"this\"}),\" will be \",(0,e.jsx)(n.code,{children:\"undefined\"}),\" instead of the global object.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"If multiple of the above rules apply, the rule that is higher wins and will set the \",(0,e.jsx)(n.code,{children:\"this\"}),\" value.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"If the function is an ES2015 arrow function, it ignores all the rules above and receives the \",(0,e.jsx)(n.code,{children:\"this\"}),\" value of its surrounding scope at the time it is created.\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[\"For an in-depth explanation, do check out \",(0,e.jsx)(n.a,{href:\"https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3\",children:\"Arnav Aggrawal's article on Medium\"}),\".\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsxs)(n.h2,{children:[(0,e.jsx)(n.code,{children:\"this\"}),\" keyword\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"In JavaScript, \",(0,e.jsx)(n.code,{children:\"this\"}),\" is a keyword that refers to the current execution context of a function or script. It's a fundamental concept in JavaScript, and understanding how \",(0,e.jsx)(n.code,{children:\"this\"}),\" works is crucial for building robust and maintainable applications.\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Used globally\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"In the global scope, \",(0,e.jsx)(n.code,{children:\"this\"}),\" refers to the global object, which is the \",(0,e.jsx)(n.code,{children:\"window\"}),\" object in a web browser or the \",(0,e.jsx)(n.code,{children:\"global\"}),\" object in a Node.js environment.\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`console.log(this); // In a browser, this will log the window object (for non-strict mode).\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Within a regular function call\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"When a function is called in the global context or as a standalone function, \",(0,e.jsx)(n.code,{children:\"this\"}),\" refers to the global object (in non-strict mode) or \",(0,e.jsx)(n.code,{children:\"undefined\"}),\" (in strict mode).\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function showThis() {\n  console.log(this);\n}\n\nshowThis(); // In non-strict mode: Window (global object). In strict mode: undefined.\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Within a method call\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"When a function is called as a method of an object, \",(0,e.jsx)(n.code,{children:\"this\"}),\" refers to the object that the method is called on.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  name: 'John',\n  showThis: function () {\n    console.log(this);\n  },\n};\n\nobj.showThis(); // { name: 'John', showThis: \\u0192 }\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"Note that if you do the following, it is as good as a regular function call and not a method call. \",(0,e.jsx)(n.code,{children:\"this\"}),\" has lost its context and no longer points to \",(0,e.jsx)(n.code,{children:\"obj\"}),\".\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  name: 'John',\n  showThis: function () {\n    console.log(this);\n  },\n};\n\nconst showThisStandalone = obj.showThis;\nshowThisStandalone(); // In non-strict mode: Window (global object). In strict mode: undefined.\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Within a function constructor\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"When a function is used as a constructor (called with the \",(0,e.jsx)(n.code,{children:\"new\"}),\" keyword), \",(0,e.jsx)(n.code,{children:\"this\"}),\" refers to the newly-created instance. In the following example, \",(0,e.jsx)(n.code,{children:\"this\"}),\" refers to the \",(0,e.jsx)(n.code,{children:\"Person\"}),\" object being created, and the \",(0,e.jsx)(n.code,{children:\"name\"}),\" property is set on that object.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst person = new Person('John');\nconsole.log(person.name); // \"John\"\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Within class constructor and methods\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"In ES2015 classes, \",(0,e.jsx)(n.code,{children:\"this\"}),\" behaves as it does in object methods. It refers to the instance of the class.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Person {\n  constructor(name) {\n    this.name = name;\n  }\n\n  showThis() {\n    console.log(this);\n  }\n}\n\nconst person = new Person('John');\nperson.showThis(); // Person\\xA0{name: 'John'}\n\nconst showThisStandalone = person.showThis;\nshowThisStandalone(); // \\`undefined\\` because all parts of a class' body are strict mode.\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"Explicitly binding \",(0,e.jsx)(n.code,{children:\"this\"})]}),`\n`,(0,e.jsxs)(n.p,{children:[\"You can use \",(0,e.jsx)(n.code,{children:\"bind()\"}),\", \",(0,e.jsx)(n.code,{children:\"call()\"}),\", or \",(0,e.jsx)(n.code,{children:\"apply()\"}),\" to explicitly set the value of \",(0,e.jsx)(n.code,{children:\"this\"}),\" for a function.\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"Using the \",(0,e.jsx)(n.code,{children:\"call()\"}),\" and \",(0,e.jsx)(n.code,{children:\"apply()\"}),\" methods allow you to explicitly set the value of \",(0,e.jsx)(n.code,{children:\"this\"}),\" when calling the function.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function showThis() {\n  console.log(this);\n}\nconst obj = { name: 'John' };\n\nshowThis.call(obj); // { name: 'John' }\nshowThis.apply(obj); // { name: 'John' }\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"The \",(0,e.jsx)(n.code,{children:\"bind()\"}),\" method creates a new function with \",(0,e.jsx)(n.code,{children:\"this\"}),\" bound to the specified value.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function showThis() {\n  console.log(this);\n}\nconst obj = { name: 'John' };\n\nconst boundFunc = showThis.bind(obj);\nboundFunc(); // { name: 'John' }\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Within arrow functions\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Arrow functions do not have their own \",(0,e.jsx)(n.code,{children:\"this\"}),\" context. Instead, the \",(0,e.jsx)(n.code,{children:\"this\"}),\" is lexically scoped, which means it inherits the \",(0,e.jsx)(n.code,{children:\"this\"}),\" value from its surrounding scope at the time they are defined.\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"In this example, \",(0,e.jsx)(n.code,{children:\"this\"}),\" refers to the global object (window or global), because the arrow function is not bound to the \",(0,e.jsx)(n.code,{children:\"person\"}),\" object.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const person = {\n  firstName: 'John',\n  sayHello: () => {\n    console.log(\\`Hello, my name is \\${this.firstName}!\\`);\n  },\n};\n\nperson.sayHello(); // \"Hello, my name is undefined!\"\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In the following example, the \",(0,e.jsx)(n.code,{children:\"this\"}),\" in the arrow function will be the \",(0,e.jsx)(n.code,{children:\"this\"}),\" value of its enclosing context, so it depends on how \",(0,e.jsx)(n.code,{children:\"showThis()\"}),\" is called.\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  name: 'John',\n  showThis: function () {\n    const arrowFunc = () => {\n      console.log(this);\n    };\n    arrowFunc();\n  },\n};\n\nobj.showThis(); // { name: 'John', showThis: \\u0192 }\n\nconst showThisStandalone = obj.showThis;\nshowThisStandalone(); // In non-strict mode: Window (global object). In strict mode: undefined.\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"Therefore, the \",(0,e.jsx)(n.code,{children:\"this\"}),\" value in arrow functions cannot be set by \",(0,e.jsx)(n.code,{children:\"bind()\"}),\", \",(0,e.jsx)(n.code,{children:\"apply()\"}),\" or \",(0,e.jsx)(n.code,{children:\"call()\"}),\" methods, nor does it point to the current object in object methods.\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  name: 'Alice',\n  regularFunction: function () {\n    console.log('Regular function:', this.name);\n  },\n  arrowFunction: () => {\n    console.log('Arrow function:', this.name);\n  },\n};\n\nconst anotherObj = {\n  name: 'Bob',\n};\n\n// Using call/apply/bind with a regular function\nobj.regularFunction.call(anotherObj); // Regular function: Bob\nobj.regularFunction.apply(anotherObj); // Regular function: Bob\nconst boundRegularFunction = obj.regularFunction.bind(anotherObj);\nboundRegularFunction(); // Regular function: Bob\n\n// Using call/apply/bind with an arrow function, \\`this\\` refers to the global scope and cannot be modified.\nobj.arrowFunction.call(anotherObj); // Arrow function: window/undefined (depending if strict mode)\nobj.arrowFunction.apply(anotherObj); // Arrow function: window/undefined (depending if strict mode)\nconst boundArrowFunction = obj.arrowFunction.bind(anotherObj);\nboundArrowFunction(); // Arrow function: window/undefined (depending if strict mode)\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Within event handlers\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"When a function is called as a DOM event handler, \",(0,e.jsx)(n.code,{children:\"this\"}),\" refers to the element that triggered the event. In this example, \",(0,e.jsx)(n.code,{children:\"this\"}),\" refers to the \",(0,e.jsx)(n.code,{children:\"<button>\"}),\" element that was clicked.\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-html\",children:`<button id=\"my-button\" onclick=\"console.log(this)\">Click me</button>\n<!-- Logs the button element -->\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"When setting an event handler using JavaScript, this also refers to the element that received the event.\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`document.getElementById('my-button').addEventListener('click', function () {\n  console.log(this); // Logs the button element\n});\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"As mentioned above, ES2015 introduces \",(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions\",children:\"arrow functions\"}),\" which uses the \",(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this\",children:\"enclosing lexical scope\"}),\". This is usually convenient, but does prevent the caller from defining the \",(0,e.jsx)(n.code,{children:\"this\"}),\" context via \",(0,e.jsx)(n.code,{children:\".call\"}),\"/\",(0,e.jsx)(n.code,{children:\".apply\"}),\"/\",(0,e.jsx)(n.code,{children:\".bind\"}),\". One of the consequences is that DOM event handlers will not properly bind \",(0,e.jsx)(n.code,{children:\"this\"}),\" in your event handler functions if you define the callback parameters to \",(0,e.jsx)(n.code,{children:\".addEventListener()\"}),\" using arrow functions.\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`document.getElementById('my-button').addEventListener('click', () => {\n  console.log(this); // Window / undefined (depending on whether strict mode) instead of the button element.\n});\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In summary, \",(0,e.jsx)(n.code,{children:\"this\"}),\" in JavaScript refers to the current execution context of a function or script, and its value can change depending on the context in which it is used. Understanding how \",(0,e.jsx)(n.code,{children:\"this\"}),\" works is essential for building robust and maintainable JavaScript applications.\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this\",children:\"this - JavaScript | MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://medium.com/m/global-identity-2?redirectUrl=https%3A%2F%2Fcodeburst.io%2Fthe-simple-rules-to-this-in-javascript-35d97f31bde3\",children:[\"The Simple Rules to \",(0,e.jsx)(n.code,{children:\"this\"}),\" in Javascript\"]})}),`\n`]})]})}function a(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,{...o,children:(0,e.jsx)(d,{...o})}):d(o)}return v(x);})();\n;return Component;"
 }
\ No newline at end of file
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 f2ae1d21f..e716fd758 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
@@ -30,5 +30,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-this-works-in-javascript/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),v=(a,e)=>{for(var n in e)i(a,n,{get:e[n],enumerable:!0})},d=(a,e,n,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of u(e))!f.call(a,c)&&c!==n&&i(a,c,{get:()=>e[c],enumerable:!(r=h(e,c))||r.enumerable});return a};var b=(a,e,n)=>(n=a!=null?m(p(a)):{},d(e||!a||!a.__esModule?i(n,\"default\",{value:a,enumerable:!0}):n,a)),x=a=>d(i({},\"__esModule\",{value:!0}),a);var l=g((y,t)=>{t.exports=_jsx_runtime});var w={};v(w,{default:()=>q,frontmatter:()=>j});var o=b(l()),j={title:\"Explique como `this` funciona em JavaScript\"};function s(a){let e=Object.assign({p:\"p\",code:\"code\",a:\"a\",ol:\"ol\",li:\"li\",h4:\"h4\"},a.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"N\\xE3o h\\xE1 uma explica\\xE7\\xE3o simples para \",(0,o.jsx)(e.code,{children:\"this\"}),\"; ela \\xE9 um dos conceitos mais confusos do JavaScript. Uma explica\\xE7\\xE3o superficial \\xE9 que o valor do \",(0,o.jsx)(e.code,{children:\"this\"}),\" depende de como a fun\\xE7\\xE3o \\xE9 chamada. Tendo lido muitas explica\\xE7\\xF5es sobre \",(0,o.jsx)(e.code,{children:\"this\"}),\" online, \",(0,o.jsx)(e.a,{href:\"https://medium.com/@arnav_aggarwal\",children:\"Arnav Aggrawal\"}),\" \\xE9 a explica\\xE7\\xE3o que foi mais clara. As seguintes regras se aplicam:\"]}),`\n`,(0,o.jsxs)(e.ol,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"Se a palavra-chave \",(0,o.jsx)(e.code,{children:\"new\"}),\" \\xE9 usada ao chamar a fun\\xE7\\xE3o, \",(0,o.jsx)(e.code,{children:\"new\"}),\" dentro da fun\\xE7\\xE3o \\xE9 um objeto totalmente novo.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se \",(0,o.jsx)(e.code,{children:\"apply\"}),\", \",(0,o.jsx)(e.code,{children:\"call\"}),\", ou \",(0,o.jsx)(e.code,{children:\"bind\"}),\" forem usados para chamar/criar uma fun\\xE7\\xE3o, \",(0,o.jsx)(e.code,{children:\"this\"}),\" dentro da fun\\xE7\\xE3o \\xE9 o objeto passado como o argumento.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se uma fun\\xE7\\xE3o \\xE9 chamada como um m\\xE9todo, como \",(0,o.jsx)(e.code,{children:\"obj.method()\"}),\" \\u2014 \",(0,o.jsx)(e.code,{children:\"this\"}),\" \\xE9 o objeto do qual a fun\\xE7\\xE3o \\xE9 uma propriedade.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se uma fun\\xE7\\xE3o \\xE9 chamada como uma chamada de fun\\xE7\\xE3o livre, significando que ele foi invocado sem nenhuma das condi\\xE7\\xF5es presentes acima, \",(0,o.jsx)(e.code,{children:\"this\"}),\" \\xE9 o objeto global. Em um navegador, \\xE9 o objeto \",(0,o.jsx)(e.code,{children:\"window\"}),\". Se em modo estrito (\",(0,o.jsx)(e.code,{children:\"'use strict'\"}),\"), \",(0,o.jsx)(e.code,{children:\"this\"}),\" ser\\xE1 \",(0,o.jsx)(e.code,{children:\"undefined\"}),\" em vez do objeto global.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se se aplicarem m\\xFAltiplas das regras acima, a regra que \\xE9 maior ganha e definir\\xE1 o valor \",(0,o.jsx)(e.code,{children:\"this\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se a fun\\xE7\\xE3o \\xE9 uma arrow function ES2015, ela ignora todas as regras acima e recebe o valor \",(0,o.jsx)(e.code,{children:\"this\"}),\" do seu escopo circundante no momento em que ele \\xE9 criado.\"]}),`\n`]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Para uma explica\\xE7\\xE3o aprofundada, confira o \",(0,o.jsx)(e.a,{href:\"https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3\",children:\"artigo na Medium\"}),\".\"]}),`\n`,(0,o.jsx)(e.h4,{children:'Voc\\xEA pode dar um exemplo de uma das maneiras como o trabalho com \"this\" mudou no ES2015?'}),`\n`,(0,o.jsxs)(e.p,{children:[\"ES2015 permite que voc\\xEA use \",(0,o.jsx)(e.a,{href:\"http://2ality.com/2017/12/alternate-this.html#arrow-functions\",children:\"arrow functions\"}),\" que usa o \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this\",children:\"enclosing lexical scope\"}),\". Isso geralmente \\xE9 conveniente, mas impede quem chamou de controlar o contexto atrav\\xE9s de \",(0,o.jsx)(e.code,{children:\".call\"}),\" ou \",(0,o.jsx)(e.code,{children:\".apply\"}),\"\\u2014as consequ\\xEAncias s\\xE3o que uma biblioteca como \",(0,o.jsx)(e.code,{children:\"jQuery\"}),\" n\\xE3o ir\\xE1 vincular corretamente o \",(0,o.jsx)(e.code,{children:\"this\"}),\" em suas fun\\xE7\\xF5es de manipulador de eventos. Portanto, \\xE9 importante ter isso em mente ao refatorar grandes aplica\\xE7\\xF5es legadas.\"]})]})}function S(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,Object.assign({},a,{children:(0,o.jsx)(s,a)})):s(a)}var q=S;return x(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),b=(a,e)=>{for(var n in e)r(a,n,{get:e[n],enumerable:!0})},d=(a,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!g.call(a,c)&&c!==n&&r(a,c,{get:()=>e[c],enumerable:!(i=u(e,c))||i.enumerable});return a};var x=(a,e,n)=>(n=a!=null?h(f(a)):{},d(e||!a||!a.__esModule?r(n,\"default\",{value:a,enumerable:!0}):n,a)),j=a=>d(r({},\"__esModule\",{value:!0}),a);var l=v((_,t)=>{t.exports=_jsx_runtime});var q={};b(q,{default:()=>m,frontmatter:()=>S});var o=x(l()),S={title:\"Explique como `this` funciona em JavaScript\"};function s(a){let e={a:\"a\",code:\"code\",h4:\"h4\",li:\"li\",ol:\"ol\",p:\"p\",...a.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"N\\xE3o h\\xE1 uma explica\\xE7\\xE3o simples para \",(0,o.jsx)(e.code,{children:\"this\"}),\"; ela \\xE9 um dos conceitos mais confusos do JavaScript. Uma explica\\xE7\\xE3o superficial \\xE9 que o valor do \",(0,o.jsx)(e.code,{children:\"this\"}),\" depende de como a fun\\xE7\\xE3o \\xE9 chamada. Tendo lido muitas explica\\xE7\\xF5es sobre \",(0,o.jsx)(e.code,{children:\"this\"}),\" online, \",(0,o.jsx)(e.a,{href:\"https://medium.com/@arnav_aggarwal\",children:\"Arnav Aggrawal\"}),\" \\xE9 a explica\\xE7\\xE3o que foi mais clara. As seguintes regras se aplicam:\"]}),`\n`,(0,o.jsxs)(e.ol,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"Se a palavra-chave \",(0,o.jsx)(e.code,{children:\"new\"}),\" \\xE9 usada ao chamar a fun\\xE7\\xE3o, \",(0,o.jsx)(e.code,{children:\"new\"}),\" dentro da fun\\xE7\\xE3o \\xE9 um objeto totalmente novo.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se \",(0,o.jsx)(e.code,{children:\"apply\"}),\", \",(0,o.jsx)(e.code,{children:\"call\"}),\", ou \",(0,o.jsx)(e.code,{children:\"bind\"}),\" forem usados para chamar/criar uma fun\\xE7\\xE3o, \",(0,o.jsx)(e.code,{children:\"this\"}),\" dentro da fun\\xE7\\xE3o \\xE9 o objeto passado como o argumento.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se uma fun\\xE7\\xE3o \\xE9 chamada como um m\\xE9todo, como \",(0,o.jsx)(e.code,{children:\"obj.method()\"}),\" \\u2014 \",(0,o.jsx)(e.code,{children:\"this\"}),\" \\xE9 o objeto do qual a fun\\xE7\\xE3o \\xE9 uma propriedade.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se uma fun\\xE7\\xE3o \\xE9 chamada como uma chamada de fun\\xE7\\xE3o livre, significando que ele foi invocado sem nenhuma das condi\\xE7\\xF5es presentes acima, \",(0,o.jsx)(e.code,{children:\"this\"}),\" \\xE9 o objeto global. Em um navegador, \\xE9 o objeto \",(0,o.jsx)(e.code,{children:\"window\"}),\". Se em modo estrito (\",(0,o.jsx)(e.code,{children:\"'use strict'\"}),\"), \",(0,o.jsx)(e.code,{children:\"this\"}),\" ser\\xE1 \",(0,o.jsx)(e.code,{children:\"undefined\"}),\" em vez do objeto global.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se se aplicarem m\\xFAltiplas das regras acima, a regra que \\xE9 maior ganha e definir\\xE1 o valor \",(0,o.jsx)(e.code,{children:\"this\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se a fun\\xE7\\xE3o \\xE9 uma arrow function ES2015, ela ignora todas as regras acima e recebe o valor \",(0,o.jsx)(e.code,{children:\"this\"}),\" do seu escopo circundante no momento em que ele \\xE9 criado.\"]}),`\n`]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Para uma explica\\xE7\\xE3o aprofundada, confira o \",(0,o.jsx)(e.a,{href:\"https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3\",children:\"artigo na Medium\"}),\".\"]}),`\n`,(0,o.jsx)(e.h4,{children:'Voc\\xEA pode dar um exemplo de uma das maneiras como o trabalho com \"this\" mudou no ES2015?'}),`\n`,(0,o.jsxs)(e.p,{children:[\"ES2015 permite que voc\\xEA use \",(0,o.jsx)(e.a,{href:\"http://2ality.com/2017/12/alternate-this.html#arrow-functions\",children:\"arrow functions\"}),\" que usa o \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this\",children:\"enclosing lexical scope\"}),\". Isso geralmente \\xE9 conveniente, mas impede quem chamou de controlar o contexto atrav\\xE9s de \",(0,o.jsx)(e.code,{children:\".call\"}),\" ou \",(0,o.jsx)(e.code,{children:\".apply\"}),\"\\u2014as consequ\\xEAncias s\\xE3o que uma biblioteca como \",(0,o.jsx)(e.code,{children:\"jQuery\"}),\" n\\xE3o ir\\xE1 vincular corretamente o \",(0,o.jsx)(e.code,{children:\"this\"}),\" em suas fun\\xE7\\xF5es de manipulador de eventos. Portanto, \\xE9 importante ter isso em mente ao refatorar grandes aplica\\xE7\\xF5es legadas.\"]})]})}function m(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,{...a,children:(0,o.jsx)(s,{...a})}):s(a)}return j(q);})();\n;return Component;"
 }
\ No newline at end of file
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 6b967f560..3bb25dc06 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
@@ -30,5 +30,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-this-works-in-javascript/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),w=(c,n)=>{for(var i in n)d(c,i,{get:n[i],enumerable:!0})},l=(c,n,i,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of p(n))!g.call(c,o)&&o!==i&&d(c,o,{get:()=>n[o],enumerable:!(h=u(n,o))||h.enumerable});return c};var f=(c,n,i)=>(i=c!=null?a(m(c)):{},l(n||!c||!c.__esModule?d(i,\"default\",{value:c,enumerable:!0}):i,c)),j=c=>l(d({},\"__esModule\",{value:!0}),c);var s=b((y,r)=>{r.exports=_jsx_runtime});var S={};w(S,{default:()=>J,frontmatter:()=>T});var e=f(s()),T={title:\"\\u89E3\\u91CA JavaScript \\u4E2D `this` \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"};function t(c){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",ol:\"ol\",li:\"li\",a:\"a\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\"},c.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6CA1\\u6709\\u7B80\\u5355\\u7684\\u89E3\\u91CA\\uFF1B\\u5B83\\u662F JavaScript \\u4E2D\\u6700\\u4EE4\\u4EBA\\u56F0\\u60D1\\u7684\\u6982\\u5FF5\\u4E4B\\u4E00\\uFF0C\\u56E0\\u4E3A\\u5B83\\u7684\\u884C\\u4E3A\\u4E0E\\u5176\\u4ED6\\u8BB8\\u591A\\u7F16\\u7A0B\\u8BED\\u8A00\\u4E0D\\u540C\\u3002\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\\u7684\\u5355\\u884C\\u89E3\\u91CA\\u662F\\uFF0C\\u5B83\\u662F\\u4E00\\u4E2A\\u5BF9\\u51FD\\u6570\\u6267\\u884C\\u4E0A\\u4E0B\\u6587\\u7684\\u52A8\\u6001\\u5F15\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u66F4\\u957F\\u7684\\u89E3\\u91CA\\u662F\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u9075\\u5FAA\\u4EE5\\u4E0B\\u89C4\\u5219\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5982\\u679C\\u5728\\u8C03\\u7528\\u51FD\\u6570\\u65F6\\u4F7F\\u7528\\u4E86 \",(0,e.jsx)(n.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u8BE5\\u51FD\\u6570\\u88AB\\u7528\\u4F5C\\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\\uFF0C\\u5219\\u51FD\\u6570\\u5185\\u90E8\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u662F\\u65B0\\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5982\\u679C\\u5728 \",(0,e.jsx)(n.code,{children:\"class\"}),\" \",(0,e.jsx)(n.code,{children:\"constructor\"}),\" \\u4E2D\\u4F7F\\u7528\\u4E86 \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\uFF0C\\u5219 \",(0,e.jsx)(n.code,{children:\"constructor\"}),\" \\u5185\\u90E8\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u662F\\u65B0\\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5982\\u679C\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"apply()\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"call()\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"bind()\"}),\" \\u8C03\\u7528/\\u521B\\u5EFA\\u51FD\\u6570\\uFF0C\\u5219\\u51FD\\u6570\\u5185\\u90E8\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u662F\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u5165\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5982\\u679C\\u4E00\\u4E2A\\u51FD\\u6570\\u88AB\\u8C03\\u7528\\u4E3A\\u4E00\\u4E2A\\u65B9\\u6CD5\\uFF08\\u4F8B\\u5982 \",(0,e.jsx)(n.code,{children:\"obj.method()\"}),\"\\uFF09\\u2014\\u2014\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u662F\\u8BE5\\u51FD\\u6570\\u6240\\u5C5E\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5982\\u679C\\u4E00\\u4E2A\\u51FD\\u6570\\u88AB\\u8C03\\u7528\\u4E3A\\u81EA\\u7531\\u51FD\\u6570\\u8C03\\u7528\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u662F\\u5728\\u6CA1\\u6709\\u4EFB\\u4F55\\u4E0A\\u8FF0\\u6761\\u4EF6\\u7684\\u60C5\\u51B5\\u4E0B\\u88AB\\u8C03\\u7528\\u7684\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u662F\\u5168\\u5C40\\u5BF9\\u8C61\\u3002\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\uFF0C\\u5168\\u5C40\\u5BF9\\u8C61\\u662F \",(0,e.jsx)(n.code,{children:\"window\"}),\" \\u5BF9\\u8C61\\u3002\\u5982\\u679C\\u5728\\u4E25\\u683C\\u6A21\\u5F0F (\",(0,e.jsx)(n.code,{children:\"'use strict';\"}),\") \\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5C06\\u662F \",(0,e.jsx)(n.code,{children:\"undefined\"}),\" \\u800C\\u4E0D\\u662F\\u5168\\u5C40\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5982\\u679C\\u5E94\\u7528\\u4E86\\u591A\\u4E2A\\u4E0A\\u8FF0\\u89C4\\u5219\\uFF0C\\u5219\\u4F18\\u5148\\u7EA7\\u8F83\\u9AD8\\u7684\\u89C4\\u5219\\u5C06\\u83B7\\u80DC\\u5E76\\u8BBE\\u7F6E \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5982\\u679C\\u8BE5\\u51FD\\u6570\\u662F ES2015 \\u7BAD\\u5934\\u51FD\\u6570\\uFF0C\\u5B83\\u4F1A\\u5FFD\\u7565\\u4E0A\\u8FF0\\u6240\\u6709\\u89C4\\u5219\\uFF0C\\u5E76\\u5728\\u521B\\u5EFA\\u65F6\\u63A5\\u6536\\u5176\\u5468\\u56F4\\u4F5C\\u7528\\u57DF\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u3002\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5982\\u9700\\u6DF1\\u5165\\u89E3\\u91CA\\uFF0C\\u8BF7\\u67E5\\u770B \",(0,e.jsx)(n.a,{href:\"https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3\",children:\"Arnav Aggrawal \\u5728 Medium \\u4E0A\\u7684\\u6587\\u7AE0\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsxs)(n.h2,{children:[(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u662F\\u4E00\\u4E2A\\u5173\\u952E\\u5B57\\uFF0C\\u5B83\\u5F15\\u7528\\u51FD\\u6570\\u6216\\u811A\\u672C\\u7684\\u5F53\\u524D\\u6267\\u884C\\u4E0A\\u4E0B\\u6587\\u3002\\u8FD9\\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u4E2A\\u57FA\\u672C\\u6982\\u5FF5\\uFF0C\\u7406\\u89E3 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\u5BF9\\u4E8E\\u6784\\u5EFA\\u5065\\u58EE\\u4E14\\u53EF\\u7EF4\\u62A4\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u81F3\\u5173\\u91CD\\u8981\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5168\\u5C40\\u4F7F\\u7528\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u5168\\u5C40\\u8303\\u56F4\\u5185\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5F15\\u7528\\u5168\\u5C40\\u5BF9\\u8C61\\uFF0C\\u5728 Web \\u6D4F\\u89C8\\u5668\\u4E2D\\u662F \",(0,e.jsx)(n.code,{children:\"window\"}),\" \\u5BF9\\u8C61\\uFF0C\\u5728 Node.js \\u73AF\\u5883\\u4E2D\\u662F \",(0,e.jsx)(n.code,{children:\"global\"}),\" \\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`console.log(this); // \\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\uFF0C\\u8FD9\\u5C06\\u8BB0\\u5F55 window \\u5BF9\\u8C61\\uFF08\\u5BF9\\u4E8E\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\uFF09\\u3002\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u5E38\\u89C4\\u51FD\\u6570\\u8C03\\u7528\\u4E2D\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u5728\\u5168\\u5C40\\u4E0A\\u4E0B\\u6587\\u4E2D\\u6216\\u4F5C\\u4E3A\\u72EC\\u7ACB\\u51FD\\u6570\\u88AB\\u8C03\\u7528\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5F15\\u7528\\u5168\\u5C40\\u5BF9\\u8C61\\uFF08\\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF09\\u6216 \",(0,e.jsx)(n.code,{children:\"undefined\"}),\"\\uFF08\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF09\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function showThis() {\n  console.log(this);\n}\n\nshowThis(); // \\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF1AWindow\\uFF08\\u5168\\u5C40\\u5BF9\\u8C61\\uFF09\\u3002\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF1Aundefined\\u3002\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u65B9\\u6CD5\\u8C03\\u7528\\u4E2D\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A\\u5BF9\\u8C61\\u7684\\u65B9\\u6CD5\\u88AB\\u8C03\\u7528\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5F15\\u7528\\u8BE5\\u65B9\\u6CD5\\u88AB\\u8C03\\u7528\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  name: 'John',\n  showThis: function () {\n    console.log(this);\n  },\n};\n\nobj.showThis(); // { name: 'John', showThis: \\u0192 }\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8BF7\\u6CE8\\u610F\\uFF0C\\u5982\\u679C\\u4F60\\u8FD9\\u6837\\u505A\\uFF0C\\u5B83\\u5C31\\u548C\\u5E38\\u89C4\\u51FD\\u6570\\u8C03\\u7528\\u4E00\\u6837\\uFF0C\\u800C\\u4E0D\\u662F\\u65B9\\u6CD5\\u8C03\\u7528\\u3002\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5DF2\\u7ECF\\u5931\\u53BB\\u4E86\\u5B83\\u7684\\u4E0A\\u4E0B\\u6587\\uFF0C\\u4E0D\\u518D\\u6307\\u5411 \",(0,e.jsx)(n.code,{children:\"obj\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  name: 'John',\n  showThis: function () {\n    console.log(this);\n  },\n};\n\nconst showThisStandalone = obj.showThis;\nshowThisStandalone(); // \\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF1AWindow\\uFF08\\u5168\\u5C40\\u5BF9\\u8C61\\uFF09\\u3002\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF1Aundefined\\u3002\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u51FD\\u6570\\u6784\\u9020\\u5668\\u4E2D\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u88AB\\u7528\\u4F5C\\u6784\\u9020\\u5668\\uFF08\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u8C03\\u7528\\uFF09\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F\\u65B0\\u521B\\u5EFA\\u7684\\u5B9E\\u4F8B\\u3002\\u5728\\u4E0B\\u9762\\u7684\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F\\u6B63\\u5728\\u521B\\u5EFA\\u7684 \",(0,e.jsx)(n.code,{children:\"Person\"}),\" \\u5BF9\\u8C61\\uFF0C\\u5E76\\u4E14 \",(0,e.jsx)(n.code,{children:\"name\"}),\" \\u5C5E\\u6027\\u662F\\u5728\\u8BE5\\u5BF9\\u8C61\\u4E0A\\u8BBE\\u7F6E\\u7684\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst person = new Person('John');\nconsole.log(person.name); // \"John\"\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u7C7B\\u6784\\u9020\\u51FD\\u6570\\u548C\\u65B9\\u6CD5\\u4E2D\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 ES2015 \\u7C7B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u884C\\u4E3A\\u4E0E\\u5728\\u5BF9\\u8C61\\u65B9\\u6CD5\\u4E2D\\u4E00\\u6837\\u3002\\u5B83\\u6307\\u7684\\u662F\\u7C7B\\u7684\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Person {\n  constructor(name) {\n    this.name = name;\n  }\n\n  showThis() {\n    console.log(this);\n  }\n}\n\nconst person = new Person('John');\nperson.showThis(); // Person\\xA0{name: 'John'}\n\nconst showThisStandalone = person.showThis;\nshowThisStandalone(); // \\`undefined\\` \\u56E0\\u4E3A\\u7C7B\\u7684\\u6240\\u6709\\u90E8\\u5206\\u90FD\\u662F\\u4E25\\u683C\\u6A21\\u5F0F\\u3002\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u663E\\u5F0F\\u7ED1\\u5B9A \",(0,e.jsx)(n.code,{children:\"this\"})]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"bind()\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"call()\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"apply()\"}),\" \\u6765\\u663E\\u5F0F\\u8BBE\\u7F6E\\u51FD\\u6570\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u3002\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"call()\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"apply()\"}),\" \\u65B9\\u6CD5\\u5141\\u8BB8\\u60A8\\u5728\\u8C03\\u7528\\u51FD\\u6570\\u65F6\\u663E\\u5F0F\\u8BBE\\u7F6E \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function showThis() {\n  console.log(this);\n}\nconst obj = { name: 'John' };\n\nshowThis.call(obj); // { name: 'John' }\nshowThis.apply(obj); // { name: 'John' }\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"bind()\"}),\" \\u65B9\\u6CD5\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\uFF0C\\u5E76\\u5C06 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7ED1\\u5B9A\\u5230\\u6307\\u5B9A\\u7684\\u503C\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function showThis() {\n  console.log(this);\n}\nconst obj = { name: 'John' };\n\nconst boundFunc = showThis.bind(obj);\nboundFunc(); // { name: 'John' }\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u7BAD\\u5934\\u51FD\\u6570\\u4E2D\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u6CA1\\u6709\\u81EA\\u5DF1\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u3002\\u76F8\\u53CD\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u662F\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u7684\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u7EE7\\u627F\\u4E86\\u5B9A\\u4E49\\u65F6\\u5468\\u56F4\\u4F5C\\u7528\\u57DF\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u3002\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F\\u5168\\u5C40\\u5BF9\\u8C61\\uFF08window \\u6216 global\\uFF09\\uFF0C\\u56E0\\u4E3A\\u7BAD\\u5934\\u51FD\\u6570\\u6CA1\\u6709\\u7ED1\\u5B9A\\u5230 \",(0,e.jsx)(n.code,{children:\"person\"}),\" \\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const person = {\n  firstName: 'John',\n  sayHello: () => {\n    console.log(\\`Hello, my name is \\${this.firstName}!\\`);\n  },\n};\n\nperson.sayHello(); // \"Hello, my name is undefined!\"\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u4E0B\\u9762\\u7684\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u7BAD\\u5934\\u51FD\\u6570\\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5C06\\u662F\\u5176\\u5C01\\u95ED\\u4E0A\\u4E0B\\u6587\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\uFF0C\\u56E0\\u6B64\\u5B83\\u53D6\\u51B3\\u4E8E \",(0,e.jsx)(n.code,{children:\"showThis()\"}),\" \\u7684\\u8C03\\u7528\\u65B9\\u5F0F\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  name: 'John',\n  showThis: function () {\n    const arrowFunc = () => {\n      console.log(this);\n    };\n    arrowFunc();\n  },\n};\n\nobj.showThis(); // { name: 'John', showThis: \\u0192 }\n\nconst showThisStandalone = obj.showThis;\nshowThisStandalone(); // \\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF1AWindow\\uFF08\\u5168\\u5C40\\u5BF9\\u8C61\\uFF09\\u3002\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF1Aundefined\\u3002\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u56E0\\u6B64\\uFF0C\\u7BAD\\u5934\\u51FD\\u6570\\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u4E0D\\u80FD\\u901A\\u8FC7 \",(0,e.jsx)(n.code,{children:\"bind()\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"apply()\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"call()\"}),\" \\u65B9\\u6CD5\\u8BBE\\u7F6E\\uFF0C\\u5B83\\u4E5F\\u4E0D\\u4F1A\\u6307\\u5411\\u5BF9\\u8C61\\u65B9\\u6CD5\\u4E2D\\u7684\\u5F53\\u524D\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  name: 'Alice',\n  regularFunction: function () {\n    console.log('Regular function:', this.name);\n  },\n  arrowFunction: () => {\n    console.log('Arrow function:', this.name);\n  },\n};\n\nconst anotherObj = {\n  name: 'Bob',\n};\n\n// \\u4F7F\\u7528 call/apply/bind \\u548C\\u5E38\\u89C4\\u51FD\\u6570\nobj.regularFunction.call(anotherObj); // Regular function: Bob\nobj.regularFunction.apply(anotherObj); // Regular function: Bob\nconst boundRegularFunction = obj.regularFunction.bind(anotherObj);\nboundRegularFunction(); // Regular function: Bob\n\n// \\u4F7F\\u7528 call/apply/bind \\u548C\\u7BAD\\u5934\\u51FD\\u6570\\uFF0C\\`this\\` \\u6307\\u7684\\u662F\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\uFF0C\\u5E76\\u4E14\\u4E0D\\u80FD\\u88AB\\u4FEE\\u6539\\u3002\nobj.arrowFunction.call(anotherObj); // Arrow function: window/undefined (depending if strict mode)\nobj.arrowFunction.apply(anotherObj); // Arrow function: window/undefined (depending if strict mode)\nconst boundArrowFunction = obj.arrowFunction.bind(anotherObj);\nboundArrowFunction(); // Arrow function: window/undefined (depending if strict mode)\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u88AB\\u8C03\\u7528\\u4E3A DOM \\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F\\u89E6\\u53D1\\u8BE5\\u4E8B\\u4EF6\\u7684\\u5143\\u7D20\\u3002\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F\\u88AB\\u70B9\\u51FB\\u7684 \",(0,e.jsx)(n.code,{children:\"<button>\"}),\" \\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-html\",children:`<button id=\"my-button\" onclick=\"console.log(this)\">Click me</button>\n<!-- Logs the button element -->\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 JavaScript \\u8BBE\\u7F6E\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E5F\\u6307\\u7684\\u662F\\u63A5\\u6536\\u4E8B\\u4EF6\\u7684\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`document.getElementById('my-button').addEventListener('click', function () {\n  console.log(this); // Logs the button element\n});\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5982\\u4E0A\\u6240\\u8FF0\\uFF0CES2015 \\u5F15\\u5165\\u4E86 \",(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions\",children:\"\\u7BAD\\u5934\\u51FD\\u6570\"}),\"\\uFF0C\\u5B83\\u4F7F\\u7528 \",(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this\",children:\"\\u5C01\\u95ED\\u7684\\u8BCD\\u6CD5\\u8303\\u56F4\"}),\"\\u3002\\u8FD9\\u901A\\u5E38\\u5F88\\u65B9\\u4FBF\\uFF0C\\u4F46\\u786E\\u5B9E\\u963B\\u6B62\\u4E86\\u8C03\\u7528\\u8005\\u901A\\u8FC7 \",(0,e.jsx)(n.code,{children:\".call\"}),\"/\",(0,e.jsx)(n.code,{children:\".apply\"}),\"/\",(0,e.jsx)(n.code,{children:\".bind\"}),\" \\u5B9A\\u4E49 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u3002\\u5176\\u4E2D\\u4E00\\u4E2A\\u540E\\u679C\\u662F\\uFF0C\\u5982\\u679C\\u60A8\\u4F7F\\u7528\\u7BAD\\u5934\\u51FD\\u6570\\u5B9A\\u4E49 \",(0,e.jsx)(n.code,{children:\".addEventListener()\"}),\" \\u7684\\u56DE\\u8C03\\u53C2\\u6570\\uFF0CDOM \\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u5C06\\u65E0\\u6CD5\\u5728\\u60A8\\u7684\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u51FD\\u6570\\u4E2D\\u6B63\\u786E\\u7ED1\\u5B9A \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`document.getElementById('my-button').addEventListener('click', () => {\n  console.log(this); // Window / undefined (depending on whether strict mode) instead of the button element.\n});\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u603B\\u800C\\u8A00\\u4E4B\\uFF0CJavaScript \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F\\u51FD\\u6570\\u6216\\u811A\\u672C\\u7684\\u5F53\\u524D\\u6267\\u884C\\u4E0A\\u4E0B\\u6587\\uFF0C\\u5176\\u503C\\u53EF\\u4EE5\\u6839\\u636E\\u4F7F\\u7528\\u5B83\\u7684\\u4E0A\\u4E0B\\u6587\\u800C\\u6539\\u53D8\\u3002\\u7406\\u89E3 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u5DE5\\u4F5C\\u65B9\\u5F0F\\u5BF9\\u4E8E\\u6784\\u5EFA\\u5065\\u58EE\\u4E14\\u53EF\\u7EF4\\u62A4\\u7684 JavaScript \\u5E94\\u7528\\u7A0B\\u5E8F\\u81F3\\u5173\\u91CD\\u8981\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this\",children:\"this - JavaScript | MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://medium.com/m/global-identity-2?redirectUrl=https%3A%2F%2Fcodeburst.io%2Fthe-simple-rules-to-this-in-javascript-35d97f31bde3\",children:[\"The Simple Rules to \",(0,e.jsx)(n.code,{children:\"this\"}),\" in Javascript\"]})}),`\n`]})]})}function v(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,Object.assign({},c,{children:(0,e.jsx)(t,c)})):t(c)}var J=v;return j(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var w=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),f=(c,n)=>{for(var o in n)d(c,o,{get:n[o],enumerable:!0})},l=(c,n,o,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of m(n))!b.call(c,i)&&i!==o&&d(c,i,{get:()=>n[i],enumerable:!(h=p(n,i))||h.enumerable});return c};var j=(c,n,o)=>(o=c!=null?u(g(c)):{},l(n||!c||!c.__esModule?d(o,\"default\",{value:c,enumerable:!0}):o,c)),T=c=>l(d({},\"__esModule\",{value:!0}),c);var s=w((F,r)=>{r.exports=_jsx_runtime});var J={};f(J,{default:()=>a,frontmatter:()=>v});var e=j(s()),v={title:\"\\u89E3\\u91CA JavaScript \\u4E2D `this` \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"};function t(c){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6CA1\\u6709\\u7B80\\u5355\\u7684\\u89E3\\u91CA\\uFF1B\\u5B83\\u662F JavaScript \\u4E2D\\u6700\\u4EE4\\u4EBA\\u56F0\\u60D1\\u7684\\u6982\\u5FF5\\u4E4B\\u4E00\\uFF0C\\u56E0\\u4E3A\\u5B83\\u7684\\u884C\\u4E3A\\u4E0E\\u5176\\u4ED6\\u8BB8\\u591A\\u7F16\\u7A0B\\u8BED\\u8A00\\u4E0D\\u540C\\u3002\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\\u7684\\u5355\\u884C\\u89E3\\u91CA\\u662F\\uFF0C\\u5B83\\u662F\\u4E00\\u4E2A\\u5BF9\\u51FD\\u6570\\u6267\\u884C\\u4E0A\\u4E0B\\u6587\\u7684\\u52A8\\u6001\\u5F15\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u66F4\\u957F\\u7684\\u89E3\\u91CA\\u662F\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u9075\\u5FAA\\u4EE5\\u4E0B\\u89C4\\u5219\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5982\\u679C\\u5728\\u8C03\\u7528\\u51FD\\u6570\\u65F6\\u4F7F\\u7528\\u4E86 \",(0,e.jsx)(n.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u8BE5\\u51FD\\u6570\\u88AB\\u7528\\u4F5C\\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\\uFF0C\\u5219\\u51FD\\u6570\\u5185\\u90E8\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u662F\\u65B0\\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5982\\u679C\\u5728 \",(0,e.jsx)(n.code,{children:\"class\"}),\" \",(0,e.jsx)(n.code,{children:\"constructor\"}),\" \\u4E2D\\u4F7F\\u7528\\u4E86 \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\uFF0C\\u5219 \",(0,e.jsx)(n.code,{children:\"constructor\"}),\" \\u5185\\u90E8\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u662F\\u65B0\\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5982\\u679C\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"apply()\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"call()\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"bind()\"}),\" \\u8C03\\u7528/\\u521B\\u5EFA\\u51FD\\u6570\\uFF0C\\u5219\\u51FD\\u6570\\u5185\\u90E8\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u662F\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u5165\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5982\\u679C\\u4E00\\u4E2A\\u51FD\\u6570\\u88AB\\u8C03\\u7528\\u4E3A\\u4E00\\u4E2A\\u65B9\\u6CD5\\uFF08\\u4F8B\\u5982 \",(0,e.jsx)(n.code,{children:\"obj.method()\"}),\"\\uFF09\\u2014\\u2014\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u662F\\u8BE5\\u51FD\\u6570\\u6240\\u5C5E\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5982\\u679C\\u4E00\\u4E2A\\u51FD\\u6570\\u88AB\\u8C03\\u7528\\u4E3A\\u81EA\\u7531\\u51FD\\u6570\\u8C03\\u7528\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u662F\\u5728\\u6CA1\\u6709\\u4EFB\\u4F55\\u4E0A\\u8FF0\\u6761\\u4EF6\\u7684\\u60C5\\u51B5\\u4E0B\\u88AB\\u8C03\\u7528\\u7684\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u662F\\u5168\\u5C40\\u5BF9\\u8C61\\u3002\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\uFF0C\\u5168\\u5C40\\u5BF9\\u8C61\\u662F \",(0,e.jsx)(n.code,{children:\"window\"}),\" \\u5BF9\\u8C61\\u3002\\u5982\\u679C\\u5728\\u4E25\\u683C\\u6A21\\u5F0F (\",(0,e.jsx)(n.code,{children:\"'use strict';\"}),\") \\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5C06\\u662F \",(0,e.jsx)(n.code,{children:\"undefined\"}),\" \\u800C\\u4E0D\\u662F\\u5168\\u5C40\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5982\\u679C\\u5E94\\u7528\\u4E86\\u591A\\u4E2A\\u4E0A\\u8FF0\\u89C4\\u5219\\uFF0C\\u5219\\u4F18\\u5148\\u7EA7\\u8F83\\u9AD8\\u7684\\u89C4\\u5219\\u5C06\\u83B7\\u80DC\\u5E76\\u8BBE\\u7F6E \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5982\\u679C\\u8BE5\\u51FD\\u6570\\u662F ES2015 \\u7BAD\\u5934\\u51FD\\u6570\\uFF0C\\u5B83\\u4F1A\\u5FFD\\u7565\\u4E0A\\u8FF0\\u6240\\u6709\\u89C4\\u5219\\uFF0C\\u5E76\\u5728\\u521B\\u5EFA\\u65F6\\u63A5\\u6536\\u5176\\u5468\\u56F4\\u4F5C\\u7528\\u57DF\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u3002\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5982\\u9700\\u6DF1\\u5165\\u89E3\\u91CA\\uFF0C\\u8BF7\\u67E5\\u770B \",(0,e.jsx)(n.a,{href:\"https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3\",children:\"Arnav Aggrawal \\u5728 Medium \\u4E0A\\u7684\\u6587\\u7AE0\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsxs)(n.h2,{children:[(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u662F\\u4E00\\u4E2A\\u5173\\u952E\\u5B57\\uFF0C\\u5B83\\u5F15\\u7528\\u51FD\\u6570\\u6216\\u811A\\u672C\\u7684\\u5F53\\u524D\\u6267\\u884C\\u4E0A\\u4E0B\\u6587\\u3002\\u8FD9\\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u4E2A\\u57FA\\u672C\\u6982\\u5FF5\\uFF0C\\u7406\\u89E3 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\u5BF9\\u4E8E\\u6784\\u5EFA\\u5065\\u58EE\\u4E14\\u53EF\\u7EF4\\u62A4\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u81F3\\u5173\\u91CD\\u8981\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5168\\u5C40\\u4F7F\\u7528\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u5168\\u5C40\\u8303\\u56F4\\u5185\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5F15\\u7528\\u5168\\u5C40\\u5BF9\\u8C61\\uFF0C\\u5728 Web \\u6D4F\\u89C8\\u5668\\u4E2D\\u662F \",(0,e.jsx)(n.code,{children:\"window\"}),\" \\u5BF9\\u8C61\\uFF0C\\u5728 Node.js \\u73AF\\u5883\\u4E2D\\u662F \",(0,e.jsx)(n.code,{children:\"global\"}),\" \\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`console.log(this); // \\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\uFF0C\\u8FD9\\u5C06\\u8BB0\\u5F55 window \\u5BF9\\u8C61\\uFF08\\u5BF9\\u4E8E\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\uFF09\\u3002\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u5E38\\u89C4\\u51FD\\u6570\\u8C03\\u7528\\u4E2D\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u5728\\u5168\\u5C40\\u4E0A\\u4E0B\\u6587\\u4E2D\\u6216\\u4F5C\\u4E3A\\u72EC\\u7ACB\\u51FD\\u6570\\u88AB\\u8C03\\u7528\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5F15\\u7528\\u5168\\u5C40\\u5BF9\\u8C61\\uFF08\\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF09\\u6216 \",(0,e.jsx)(n.code,{children:\"undefined\"}),\"\\uFF08\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF09\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function showThis() {\n  console.log(this);\n}\n\nshowThis(); // \\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF1AWindow\\uFF08\\u5168\\u5C40\\u5BF9\\u8C61\\uFF09\\u3002\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF1Aundefined\\u3002\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u65B9\\u6CD5\\u8C03\\u7528\\u4E2D\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A\\u5BF9\\u8C61\\u7684\\u65B9\\u6CD5\\u88AB\\u8C03\\u7528\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5F15\\u7528\\u8BE5\\u65B9\\u6CD5\\u88AB\\u8C03\\u7528\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  name: 'John',\n  showThis: function () {\n    console.log(this);\n  },\n};\n\nobj.showThis(); // { name: 'John', showThis: \\u0192 }\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8BF7\\u6CE8\\u610F\\uFF0C\\u5982\\u679C\\u4F60\\u8FD9\\u6837\\u505A\\uFF0C\\u5B83\\u5C31\\u548C\\u5E38\\u89C4\\u51FD\\u6570\\u8C03\\u7528\\u4E00\\u6837\\uFF0C\\u800C\\u4E0D\\u662F\\u65B9\\u6CD5\\u8C03\\u7528\\u3002\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5DF2\\u7ECF\\u5931\\u53BB\\u4E86\\u5B83\\u7684\\u4E0A\\u4E0B\\u6587\\uFF0C\\u4E0D\\u518D\\u6307\\u5411 \",(0,e.jsx)(n.code,{children:\"obj\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  name: 'John',\n  showThis: function () {\n    console.log(this);\n  },\n};\n\nconst showThisStandalone = obj.showThis;\nshowThisStandalone(); // \\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF1AWindow\\uFF08\\u5168\\u5C40\\u5BF9\\u8C61\\uFF09\\u3002\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF1Aundefined\\u3002\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u51FD\\u6570\\u6784\\u9020\\u5668\\u4E2D\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u88AB\\u7528\\u4F5C\\u6784\\u9020\\u5668\\uFF08\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u8C03\\u7528\\uFF09\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F\\u65B0\\u521B\\u5EFA\\u7684\\u5B9E\\u4F8B\\u3002\\u5728\\u4E0B\\u9762\\u7684\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F\\u6B63\\u5728\\u521B\\u5EFA\\u7684 \",(0,e.jsx)(n.code,{children:\"Person\"}),\" \\u5BF9\\u8C61\\uFF0C\\u5E76\\u4E14 \",(0,e.jsx)(n.code,{children:\"name\"}),\" \\u5C5E\\u6027\\u662F\\u5728\\u8BE5\\u5BF9\\u8C61\\u4E0A\\u8BBE\\u7F6E\\u7684\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst person = new Person('John');\nconsole.log(person.name); // \"John\"\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u7C7B\\u6784\\u9020\\u51FD\\u6570\\u548C\\u65B9\\u6CD5\\u4E2D\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 ES2015 \\u7C7B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u884C\\u4E3A\\u4E0E\\u5728\\u5BF9\\u8C61\\u65B9\\u6CD5\\u4E2D\\u4E00\\u6837\\u3002\\u5B83\\u6307\\u7684\\u662F\\u7C7B\\u7684\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Person {\n  constructor(name) {\n    this.name = name;\n  }\n\n  showThis() {\n    console.log(this);\n  }\n}\n\nconst person = new Person('John');\nperson.showThis(); // Person\\xA0{name: 'John'}\n\nconst showThisStandalone = person.showThis;\nshowThisStandalone(); // \\`undefined\\` \\u56E0\\u4E3A\\u7C7B\\u7684\\u6240\\u6709\\u90E8\\u5206\\u90FD\\u662F\\u4E25\\u683C\\u6A21\\u5F0F\\u3002\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u663E\\u5F0F\\u7ED1\\u5B9A \",(0,e.jsx)(n.code,{children:\"this\"})]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"bind()\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"call()\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"apply()\"}),\" \\u6765\\u663E\\u5F0F\\u8BBE\\u7F6E\\u51FD\\u6570\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u3002\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"call()\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"apply()\"}),\" \\u65B9\\u6CD5\\u5141\\u8BB8\\u60A8\\u5728\\u8C03\\u7528\\u51FD\\u6570\\u65F6\\u663E\\u5F0F\\u8BBE\\u7F6E \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function showThis() {\n  console.log(this);\n}\nconst obj = { name: 'John' };\n\nshowThis.call(obj); // { name: 'John' }\nshowThis.apply(obj); // { name: 'John' }\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"bind()\"}),\" \\u65B9\\u6CD5\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\uFF0C\\u5E76\\u5C06 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7ED1\\u5B9A\\u5230\\u6307\\u5B9A\\u7684\\u503C\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function showThis() {\n  console.log(this);\n}\nconst obj = { name: 'John' };\n\nconst boundFunc = showThis.bind(obj);\nboundFunc(); // { name: 'John' }\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u7BAD\\u5934\\u51FD\\u6570\\u4E2D\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u6CA1\\u6709\\u81EA\\u5DF1\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u3002\\u76F8\\u53CD\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u662F\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u7684\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u7EE7\\u627F\\u4E86\\u5B9A\\u4E49\\u65F6\\u5468\\u56F4\\u4F5C\\u7528\\u57DF\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u3002\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F\\u5168\\u5C40\\u5BF9\\u8C61\\uFF08window \\u6216 global\\uFF09\\uFF0C\\u56E0\\u4E3A\\u7BAD\\u5934\\u51FD\\u6570\\u6CA1\\u6709\\u7ED1\\u5B9A\\u5230 \",(0,e.jsx)(n.code,{children:\"person\"}),\" \\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const person = {\n  firstName: 'John',\n  sayHello: () => {\n    console.log(\\`Hello, my name is \\${this.firstName}!\\`);\n  },\n};\n\nperson.sayHello(); // \"Hello, my name is undefined!\"\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u4E0B\\u9762\\u7684\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u7BAD\\u5934\\u51FD\\u6570\\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5C06\\u662F\\u5176\\u5C01\\u95ED\\u4E0A\\u4E0B\\u6587\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\uFF0C\\u56E0\\u6B64\\u5B83\\u53D6\\u51B3\\u4E8E \",(0,e.jsx)(n.code,{children:\"showThis()\"}),\" \\u7684\\u8C03\\u7528\\u65B9\\u5F0F\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  name: 'John',\n  showThis: function () {\n    const arrowFunc = () => {\n      console.log(this);\n    };\n    arrowFunc();\n  },\n};\n\nobj.showThis(); // { name: 'John', showThis: \\u0192 }\n\nconst showThisStandalone = obj.showThis;\nshowThisStandalone(); // \\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF1AWindow\\uFF08\\u5168\\u5C40\\u5BF9\\u8C61\\uFF09\\u3002\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF1Aundefined\\u3002\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u56E0\\u6B64\\uFF0C\\u7BAD\\u5934\\u51FD\\u6570\\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u4E0D\\u80FD\\u901A\\u8FC7 \",(0,e.jsx)(n.code,{children:\"bind()\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"apply()\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"call()\"}),\" \\u65B9\\u6CD5\\u8BBE\\u7F6E\\uFF0C\\u5B83\\u4E5F\\u4E0D\\u4F1A\\u6307\\u5411\\u5BF9\\u8C61\\u65B9\\u6CD5\\u4E2D\\u7684\\u5F53\\u524D\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  name: 'Alice',\n  regularFunction: function () {\n    console.log('Regular function:', this.name);\n  },\n  arrowFunction: () => {\n    console.log('Arrow function:', this.name);\n  },\n};\n\nconst anotherObj = {\n  name: 'Bob',\n};\n\n// \\u4F7F\\u7528 call/apply/bind \\u548C\\u5E38\\u89C4\\u51FD\\u6570\nobj.regularFunction.call(anotherObj); // Regular function: Bob\nobj.regularFunction.apply(anotherObj); // Regular function: Bob\nconst boundRegularFunction = obj.regularFunction.bind(anotherObj);\nboundRegularFunction(); // Regular function: Bob\n\n// \\u4F7F\\u7528 call/apply/bind \\u548C\\u7BAD\\u5934\\u51FD\\u6570\\uFF0C\\`this\\` \\u6307\\u7684\\u662F\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\uFF0C\\u5E76\\u4E14\\u4E0D\\u80FD\\u88AB\\u4FEE\\u6539\\u3002\nobj.arrowFunction.call(anotherObj); // Arrow function: window/undefined (depending if strict mode)\nobj.arrowFunction.apply(anotherObj); // Arrow function: window/undefined (depending if strict mode)\nconst boundArrowFunction = obj.arrowFunction.bind(anotherObj);\nboundArrowFunction(); // Arrow function: window/undefined (depending if strict mode)\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u88AB\\u8C03\\u7528\\u4E3A DOM \\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F\\u89E6\\u53D1\\u8BE5\\u4E8B\\u4EF6\\u7684\\u5143\\u7D20\\u3002\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F\\u88AB\\u70B9\\u51FB\\u7684 \",(0,e.jsx)(n.code,{children:\"<button>\"}),\" \\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-html\",children:`<button id=\"my-button\" onclick=\"console.log(this)\">Click me</button>\n<!-- Logs the button element -->\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 JavaScript \\u8BBE\\u7F6E\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E5F\\u6307\\u7684\\u662F\\u63A5\\u6536\\u4E8B\\u4EF6\\u7684\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`document.getElementById('my-button').addEventListener('click', function () {\n  console.log(this); // Logs the button element\n});\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5982\\u4E0A\\u6240\\u8FF0\\uFF0CES2015 \\u5F15\\u5165\\u4E86 \",(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions\",children:\"\\u7BAD\\u5934\\u51FD\\u6570\"}),\"\\uFF0C\\u5B83\\u4F7F\\u7528 \",(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this\",children:\"\\u5C01\\u95ED\\u7684\\u8BCD\\u6CD5\\u8303\\u56F4\"}),\"\\u3002\\u8FD9\\u901A\\u5E38\\u5F88\\u65B9\\u4FBF\\uFF0C\\u4F46\\u786E\\u5B9E\\u963B\\u6B62\\u4E86\\u8C03\\u7528\\u8005\\u901A\\u8FC7 \",(0,e.jsx)(n.code,{children:\".call\"}),\"/\",(0,e.jsx)(n.code,{children:\".apply\"}),\"/\",(0,e.jsx)(n.code,{children:\".bind\"}),\" \\u5B9A\\u4E49 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u3002\\u5176\\u4E2D\\u4E00\\u4E2A\\u540E\\u679C\\u662F\\uFF0C\\u5982\\u679C\\u60A8\\u4F7F\\u7528\\u7BAD\\u5934\\u51FD\\u6570\\u5B9A\\u4E49 \",(0,e.jsx)(n.code,{children:\".addEventListener()\"}),\" \\u7684\\u56DE\\u8C03\\u53C2\\u6570\\uFF0CDOM \\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u5C06\\u65E0\\u6CD5\\u5728\\u60A8\\u7684\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u51FD\\u6570\\u4E2D\\u6B63\\u786E\\u7ED1\\u5B9A \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`document.getElementById('my-button').addEventListener('click', () => {\n  console.log(this); // Window / undefined (depending on whether strict mode) instead of the button element.\n});\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u603B\\u800C\\u8A00\\u4E4B\\uFF0CJavaScript \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F\\u51FD\\u6570\\u6216\\u811A\\u672C\\u7684\\u5F53\\u524D\\u6267\\u884C\\u4E0A\\u4E0B\\u6587\\uFF0C\\u5176\\u503C\\u53EF\\u4EE5\\u6839\\u636E\\u4F7F\\u7528\\u5B83\\u7684\\u4E0A\\u4E0B\\u6587\\u800C\\u6539\\u53D8\\u3002\\u7406\\u89E3 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u5DE5\\u4F5C\\u65B9\\u5F0F\\u5BF9\\u4E8E\\u6784\\u5EFA\\u5065\\u58EE\\u4E14\\u53EF\\u7EF4\\u62A4\\u7684 JavaScript \\u5E94\\u7528\\u7A0B\\u5E8F\\u81F3\\u5173\\u91CD\\u8981\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this\",children:\"this - JavaScript | MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://medium.com/m/global-identity-2?redirectUrl=https%3A%2F%2Fcodeburst.io%2Fthe-simple-rules-to-this-in-javascript-35d97f31bde3\",children:[\"The Simple Rules to \",(0,e.jsx)(n.code,{children:\"this\"}),\" in Javascript\"]})}),`\n`]})]})}function a(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,{...c,children:(0,e.jsx)(t,{...c})}):t(c)}return T(J);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-one-way-data-flow-of-react-and-its-benefits/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-one-way-data-flow-of-react-and-its-benefits/en-US.json
index 05c054a2b..a16d3ce76 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-one-way-data-flow-of-react-and-its-benefits/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-one-way-data-flow-of-react-and-its-benefits/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/explain-one-way-data-flow-of-react-and-its-benefits/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var a in e)i(t,a,{get:e[a],enumerable:!0})},c=(t,e,a,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!u.call(t,o)&&o!==a&&i(t,o,{get:()=>e[o],enumerable:!(r=p(e,o))||r.enumerable});return t};var C=(t,e,a)=>(a=t!=null?s(f(t)):{},c(e||!t||!t.__esModule?i(a,\"default\",{value:t,enumerable:!0}):a,t)),b=t=>c(i({},\"__esModule\",{value:!0}),t);var h=g((D,d)=>{d.exports=_jsx_runtime});var R={};w(R,{default:()=>v,frontmatter:()=>y});var n=C(h()),y={title:\"Explain one-way data flow of React and its benefits\"};function l(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",code:\"code\",pre:\"pre\",h4:\"h4\",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.jsx)(e.p,{children:\"In React, one-way data flow means that data in a React application flows in a single direction, from parent components to child components. This makes the data flow predictable and easier to debug. The main benefits include improved maintainability, easier debugging, and better performance.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"One-way data flow of React and its benefits\"}),`\n`,(0,n.jsx)(e.h3,{children:\"What is one-way data flow?\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In React, one-way data flow refers to the concept where data flows in a single direction, from parent components to child components. This is achieved through the use of \",(0,n.jsx)(e.code,{children:\"props\"}),\". Parent components pass data to child components via \",(0,n.jsx)(e.code,{children:\"props\"}),\", and child components can only read these \",(0,n.jsx)(e.code,{children:\"props\"}),\" but cannot modify them. If a child component needs to communicate back to the parent, it does so by calling a function passed down from the parent as a prop.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here is a simple example to illustrate one-way data flow:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`// ParentComponent.jsx\nimport React, { useState } from 'react';\nimport ChildComponent from './ChildComponent';\n\nconst ParentComponent = () => {\n  const [data, setData] = useState('Hello from Parent');\n\n  const handleChange = (newData) => {\n    setData(newData);\n  };\n\n  return (\n    <div>\n      <h1>{data}</h1>\n      <ChildComponent data={data} onChange={handleChange} />\n    </div>\n  );\n};\n\nexport default ParentComponent;\n\n// ChildComponent.jsx\nimport React from 'react';\n\nconst ChildComponent = ({ data, onChange }) => {\n  return (\n    <div>\n      <p>{data}</p>\n      <button onClick={() => onChange('Hello from Child')}>Change Data</button>\n    </div>\n  );\n};\n\nexport default ChildComponent;\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"ParentComponent\"}),\" passes \",(0,n.jsx)(e.code,{children:\"data\"}),\" and \",(0,n.jsx)(e.code,{children:\"handleChange\"}),\" function to \",(0,n.jsx)(e.code,{children:\"ChildComponent\"}),\" via \",(0,n.jsx)(e.code,{children:\"props\"}),\". The \",(0,n.jsx)(e.code,{children:\"ChildComponent\"}),\" can read the \",(0,n.jsx)(e.code,{children:\"data\"}),\" and call \",(0,n.jsx)(e.code,{children:\"onChange\"}),\" to communicate back to the parent.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits of one-way data flow\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Improved maintainability\"}),`\n`,(0,n.jsx)(e.p,{children:\"One-way data flow makes the application structure more predictable and easier to understand. Since data flows in a single direction, it is easier to track how data changes over time, making the codebase more maintainable.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Easier debugging\"}),`\n`,(0,n.jsx)(e.p,{children:\"With one-way data flow, it is easier to pinpoint where a bug might be occurring. Since data can only flow from parent to child, you can trace the data flow and identify the source of the issue more quickly.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Better performance\"}),`\n`,(0,n.jsx)(e.p,{children:\"One-way data flow can lead to better performance because it reduces the complexity of data management. React's reconciliation algorithm can efficiently update the DOM by comparing the current state with the previous state, minimizing the number of updates required.\"}),`\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://react.dev/learn/passing-props-to-a-component\",children:\"React documentation on components and props\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React documentation on state\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/sharing-state-between-components\",children:\"React documentation on lifting state up\"})}),`\n`]})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(l,t)})):l(t)}var v=x;return b(R);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),C=(t,e)=>{for(var a in e)i(t,a,{get:e[a],enumerable:!0})},c=(t,e,a,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of f(e))!g.call(t,o)&&o!==a&&i(t,o,{get:()=>e[o],enumerable:!(r=m(e,o))||r.enumerable});return t};var b=(t,e,a)=>(a=t!=null?p(u(t)):{},c(e||!t||!t.__esModule?i(a,\"default\",{value:t,enumerable:!0}):a,t)),y=t=>c(i({},\"__esModule\",{value:!0}),t);var h=w((D,d)=>{d.exports=_jsx_runtime});var v={};C(v,{default:()=>s,frontmatter:()=>x});var n=b(h()),x={title:\"Explain one-way data flow of React and its benefits\"};function l(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"In React, one-way data flow means that data in a React application flows in a single direction, from parent components to child components. This makes the data flow predictable and easier to debug. The main benefits include improved maintainability, easier debugging, and better performance.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"One-way data flow of React and its benefits\"}),`\n`,(0,n.jsx)(e.h3,{children:\"What is one-way data flow?\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In React, one-way data flow refers to the concept where data flows in a single direction, from parent components to child components. This is achieved through the use of \",(0,n.jsx)(e.code,{children:\"props\"}),\". Parent components pass data to child components via \",(0,n.jsx)(e.code,{children:\"props\"}),\", and child components can only read these \",(0,n.jsx)(e.code,{children:\"props\"}),\" but cannot modify them. If a child component needs to communicate back to the parent, it does so by calling a function passed down from the parent as a prop.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here is a simple example to illustrate one-way data flow:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`// ParentComponent.jsx\nimport React, { useState } from 'react';\nimport ChildComponent from './ChildComponent';\n\nconst ParentComponent = () => {\n  const [data, setData] = useState('Hello from Parent');\n\n  const handleChange = (newData) => {\n    setData(newData);\n  };\n\n  return (\n    <div>\n      <h1>{data}</h1>\n      <ChildComponent data={data} onChange={handleChange} />\n    </div>\n  );\n};\n\nexport default ParentComponent;\n\n// ChildComponent.jsx\nimport React from 'react';\n\nconst ChildComponent = ({ data, onChange }) => {\n  return (\n    <div>\n      <p>{data}</p>\n      <button onClick={() => onChange('Hello from Child')}>Change Data</button>\n    </div>\n  );\n};\n\nexport default ChildComponent;\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"ParentComponent\"}),\" passes \",(0,n.jsx)(e.code,{children:\"data\"}),\" and \",(0,n.jsx)(e.code,{children:\"handleChange\"}),\" function to \",(0,n.jsx)(e.code,{children:\"ChildComponent\"}),\" via \",(0,n.jsx)(e.code,{children:\"props\"}),\". The \",(0,n.jsx)(e.code,{children:\"ChildComponent\"}),\" can read the \",(0,n.jsx)(e.code,{children:\"data\"}),\" and call \",(0,n.jsx)(e.code,{children:\"onChange\"}),\" to communicate back to the parent.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits of one-way data flow\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Improved maintainability\"}),`\n`,(0,n.jsx)(e.p,{children:\"One-way data flow makes the application structure more predictable and easier to understand. Since data flows in a single direction, it is easier to track how data changes over time, making the codebase more maintainable.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Easier debugging\"}),`\n`,(0,n.jsx)(e.p,{children:\"With one-way data flow, it is easier to pinpoint where a bug might be occurring. Since data can only flow from parent to child, you can trace the data flow and identify the source of the issue more quickly.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Better performance\"}),`\n`,(0,n.jsx)(e.p,{children:\"One-way data flow can lead to better performance because it reduces the complexity of data management. React's reconciliation algorithm can efficiently update the DOM by comparing the current state with the previous state, minimizing the number of updates required.\"}),`\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://react.dev/learn/passing-props-to-a-component\",children:\"React documentation on components and props\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React documentation on state\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/sharing-state-between-components\",children:\"React documentation on lifting state up\"})}),`\n`]})]})}function s(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}return y(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-one-way-data-flow-of-react-and-its-benefits/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-one-way-data-flow-of-react-and-its-benefits/zh-CN.json
index df806fe9f..55c550ec6 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-one-way-data-flow-of-react-and-its-benefits/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-one-way-data-flow-of-react-and-its-benefits/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/explain-one-way-data-flow-of-react-and-its-benefits/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),f=(t,n)=>{for(var r in n)a(t,r,{get:n[r],enumerable:!0})},h=(t,n,r,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of m(n))!u.call(t,o)&&o!==r&&a(t,o,{get:()=>n[o],enumerable:!(c=s(n,o))||c.enumerable});return t};var x=(t,n,r)=>(r=t!=null?p(C(t)):{},h(n||!t||!t.__esModule?a(r,\"default\",{value:t,enumerable:!0}):r,t)),R=t=>h(a({},\"__esModule\",{value:!0}),t);var l=g((b,d)=>{d.exports=_jsx_runtime});var _={};f(_,{default:()=>v,frontmatter:()=>j});var e=x(l()),j={title:\"\\u89E3\\u91CA React \\u7684\\u5355\\u5411\\u6570\\u636E\\u6D41\\u53CA\\u5176\\u4F18\\u52BF\"};function i(t){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",code:\"code\",pre:\"pre\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 React \\u4E2D\\uFF0C\\u5355\\u5411\\u6570\\u636E\\u6D41\\u610F\\u5473\\u7740 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7684\\u6570\\u636E\\u4EE5\\u5355\\u4E2A\\u65B9\\u5411\\u6D41\\u52A8\\uFF0C\\u4ECE\\u7236\\u7EC4\\u4EF6\\u5230\\u5B50\\u7EC4\\u4EF6\\u3002\\u8FD9\\u4F7F\\u5F97\\u6570\\u636E\\u6D41\\u53EF\\u9884\\u6D4B\\u4E14\\u66F4\\u6613\\u4E8E\\u8C03\\u8BD5\\u3002\\u4E3B\\u8981\\u4F18\\u70B9\\u5305\\u62EC\\u63D0\\u9AD8\\u53EF\\u7EF4\\u62A4\\u6027\\u3001\\u66F4\\u6613\\u4E8E\\u8C03\\u8BD5\\u548C\\u66F4\\u597D\\u7684\\u6027\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u7684\\u5355\\u5411\\u6570\\u636E\\u6D41\\u53CA\\u5176\\u4F18\\u52BF\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EC0\\u4E48\\u662F\\u5355\\u5411\\u6570\\u636E\\u6D41\\uFF1F\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 React \\u4E2D\\uFF0C\\u5355\\u5411\\u6570\\u636E\\u6D41\\u662F\\u6307\\u6570\\u636E\\u4EE5\\u5355\\u4E2A\\u65B9\\u5411\\u6D41\\u52A8\\uFF0C\\u4ECE\\u7236\\u7EC4\\u4EF6\\u5230\\u5B50\\u7EC4\\u4EF6\\u7684\\u6982\\u5FF5\\u3002\\u8FD9\\u662F\\u901A\\u8FC7\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"props\"}),\" \\u5B9E\\u73B0\\u7684\\u3002\\u7236\\u7EC4\\u4EF6\\u901A\\u8FC7 \",(0,e.jsx)(n.code,{children:\"props\"}),\" \\u5C06\\u6570\\u636E\\u4F20\\u9012\\u7ED9\\u5B50\\u7EC4\\u4EF6\\uFF0C\\u5B50\\u7EC4\\u4EF6\\u53EA\\u80FD\\u8BFB\\u53D6\\u8FD9\\u4E9B \",(0,e.jsx)(n.code,{children:\"props\"}),\"\\uFF0C\\u4F46\\u4E0D\\u80FD\\u4FEE\\u6539\\u5B83\\u4EEC\\u3002\\u5982\\u679C\\u5B50\\u7EC4\\u4EF6\\u9700\\u8981\\u53CD\\u9988\\u7ED9\\u7236\\u7EC4\\u4EF6\\uFF0C\\u5B83\\u4F1A\\u901A\\u8FC7\\u8C03\\u7528\\u4ECE\\u7236\\u7EC4\\u4EF6\\u4F5C\\u4E3A prop \\u4F20\\u9012\\u4E0B\\u6765\\u7684\\u51FD\\u6570\\u6765\\u5B9E\\u73B0\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u793A\\u4F8B\\uFF0C\\u7528\\u4E8E\\u8BF4\\u660E\\u5355\\u5411\\u6570\\u636E\\u6D41\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`// ParentComponent.jsx\nimport React, { useState } from 'react';\nimport ChildComponent from './ChildComponent';\n\nconst ParentComponent = () => {\n  const [data, setData] = useState('Hello from Parent');\n\n  const handleChange = (newData) => {\n    setData(newData);\n  };\n\n  return (\n    <div>\n      <h1>{data}</h1>\n      <ChildComponent data={data} onChange={handleChange} />\n    </div>\n  );\n};\n\nexport default ParentComponent;\n\n// ChildComponent.jsx\nimport React from 'react';\n\nconst ChildComponent = ({ data, onChange }) => {\n  return (\n    <div>\n      <p>{data}</p>\n      <button onClick={() => onChange('Hello from Child')}>Change Data</button>\n    </div>\n  );\n};\n\nexport default ChildComponent;\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"ParentComponent\"}),\" \\u901A\\u8FC7 \",(0,e.jsx)(n.code,{children:\"props\"}),\" \\u5C06 \",(0,e.jsx)(n.code,{children:\"data\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"handleChange\"}),\" \\u51FD\\u6570\\u4F20\\u9012\\u7ED9 \",(0,e.jsx)(n.code,{children:\"ChildComponent\"}),\"\\u3002\",(0,e.jsx)(n.code,{children:\"ChildComponent\"}),\" \\u53EF\\u4EE5\\u8BFB\\u53D6 \",(0,e.jsx)(n.code,{children:\"data\"}),\" \\u5E76\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"onChange\"}),\" \\u4EE5\\u53CD\\u9988\\u7ED9\\u7236\\u7EC4\\u4EF6\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5355\\u5411\\u6570\\u636E\\u6D41\\u7684\\u4F18\\u52BF\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u63D0\\u9AD8\\u53EF\\u7EF4\\u62A4\\u6027\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5355\\u5411\\u6570\\u636E\\u6D41\\u4F7F\\u5E94\\u7528\\u7A0B\\u5E8F\\u7ED3\\u6784\\u66F4\\u5177\\u53EF\\u9884\\u6D4B\\u6027\\uFF0C\\u66F4\\u6613\\u4E8E\\u7406\\u89E3\\u3002\\u7531\\u4E8E\\u6570\\u636E\\u4EE5\\u5355\\u4E2A\\u65B9\\u5411\\u6D41\\u52A8\\uFF0C\\u56E0\\u6B64\\u66F4\\u5BB9\\u6613\\u8DDF\\u8E2A\\u6570\\u636E\\u968F\\u65F6\\u95F4\\u7684\\u53D8\\u5316\\uFF0C\\u4ECE\\u800C\\u4F7F\\u4EE3\\u7801\\u5E93\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u66F4\\u6613\\u4E8E\\u8C03\\u8BD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528\\u5355\\u5411\\u6570\\u636E\\u6D41\\uFF0C\\u66F4\\u5BB9\\u6613\\u67E5\\u660E\\u53EF\\u80FD\\u53D1\\u751F\\u9519\\u8BEF\\u7684\\u5730\\u70B9\\u3002\\u7531\\u4E8E\\u6570\\u636E\\u53EA\\u80FD\\u4ECE\\u7236\\u7EA7\\u6D41\\u5411\\u5B50\\u7EA7\\uFF0C\\u56E0\\u6B64\\u60A8\\u53EF\\u4EE5\\u8DDF\\u8E2A\\u6570\\u636E\\u6D41\\u5E76\\u66F4\\u5FEB\\u5730\\u786E\\u5B9A\\u95EE\\u9898\\u6765\\u6E90\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u66F4\\u597D\\u7684\\u6027\\u80FD\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5355\\u5411\\u6570\\u636E\\u6D41\\u53EF\\u4EE5\\u5E26\\u6765\\u66F4\\u597D\\u7684\\u6027\\u80FD\\uFF0C\\u56E0\\u4E3A\\u5B83\\u964D\\u4F4E\\u4E86\\u6570\\u636E\\u7BA1\\u7406\\u7684\\u590D\\u6742\\u6027\\u3002React \\u7684\\u534F\\u8C03\\u7B97\\u6CD5\\u53EF\\u4EE5\\u901A\\u8FC7\\u6BD4\\u8F83\\u5F53\\u524D\\u72B6\\u6001\\u548C\\u5148\\u524D\\u72B6\\u6001\\u6765\\u6709\\u6548\\u5730\\u66F4\\u65B0 DOM\\uFF0C\\u4ECE\\u800C\\u6700\\u5927\\u9650\\u5EA6\\u5730\\u51CF\\u5C11\\u6240\\u9700\\u7684\\u66F4\\u65B0\\u6B21\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/passing-props-to-a-component\",children:\"React \\u7EC4\\u4EF6\\u548C Props \\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React \\u72B6\\u6001\\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/sharing-state-between-components\",children:\"React \\u63D0\\u5347\\u72B6\\u6001\\u6587\\u6863\"})}),`\n`]})]})}function D(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(i,t)})):i(t)}var v=D;return R(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),x=(t,n)=>{for(var r in n)a(t,r,{get:n[r],enumerable:!0})},h=(t,n,r,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of C(n))!f.call(t,o)&&o!==r&&a(t,o,{get:()=>n[o],enumerable:!(c=m(n,o))||c.enumerable});return t};var R=(t,n,r)=>(r=t!=null?s(u(t)):{},h(n||!t||!t.__esModule?a(r,\"default\",{value:t,enumerable:!0}):r,t)),D=t=>h(a({},\"__esModule\",{value:!0}),t);var l=g((P,d)=>{d.exports=_jsx_runtime});var v={};x(v,{default:()=>p,frontmatter:()=>j});var e=R(l()),j={title:\"\\u89E3\\u91CA React \\u7684\\u5355\\u5411\\u6570\\u636E\\u6D41\\u53CA\\u5176\\u4F18\\u52BF\"};function i(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 React \\u4E2D\\uFF0C\\u5355\\u5411\\u6570\\u636E\\u6D41\\u610F\\u5473\\u7740 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7684\\u6570\\u636E\\u4EE5\\u5355\\u4E2A\\u65B9\\u5411\\u6D41\\u52A8\\uFF0C\\u4ECE\\u7236\\u7EC4\\u4EF6\\u5230\\u5B50\\u7EC4\\u4EF6\\u3002\\u8FD9\\u4F7F\\u5F97\\u6570\\u636E\\u6D41\\u53EF\\u9884\\u6D4B\\u4E14\\u66F4\\u6613\\u4E8E\\u8C03\\u8BD5\\u3002\\u4E3B\\u8981\\u4F18\\u70B9\\u5305\\u62EC\\u63D0\\u9AD8\\u53EF\\u7EF4\\u62A4\\u6027\\u3001\\u66F4\\u6613\\u4E8E\\u8C03\\u8BD5\\u548C\\u66F4\\u597D\\u7684\\u6027\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u7684\\u5355\\u5411\\u6570\\u636E\\u6D41\\u53CA\\u5176\\u4F18\\u52BF\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EC0\\u4E48\\u662F\\u5355\\u5411\\u6570\\u636E\\u6D41\\uFF1F\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 React \\u4E2D\\uFF0C\\u5355\\u5411\\u6570\\u636E\\u6D41\\u662F\\u6307\\u6570\\u636E\\u4EE5\\u5355\\u4E2A\\u65B9\\u5411\\u6D41\\u52A8\\uFF0C\\u4ECE\\u7236\\u7EC4\\u4EF6\\u5230\\u5B50\\u7EC4\\u4EF6\\u7684\\u6982\\u5FF5\\u3002\\u8FD9\\u662F\\u901A\\u8FC7\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"props\"}),\" \\u5B9E\\u73B0\\u7684\\u3002\\u7236\\u7EC4\\u4EF6\\u901A\\u8FC7 \",(0,e.jsx)(n.code,{children:\"props\"}),\" \\u5C06\\u6570\\u636E\\u4F20\\u9012\\u7ED9\\u5B50\\u7EC4\\u4EF6\\uFF0C\\u5B50\\u7EC4\\u4EF6\\u53EA\\u80FD\\u8BFB\\u53D6\\u8FD9\\u4E9B \",(0,e.jsx)(n.code,{children:\"props\"}),\"\\uFF0C\\u4F46\\u4E0D\\u80FD\\u4FEE\\u6539\\u5B83\\u4EEC\\u3002\\u5982\\u679C\\u5B50\\u7EC4\\u4EF6\\u9700\\u8981\\u53CD\\u9988\\u7ED9\\u7236\\u7EC4\\u4EF6\\uFF0C\\u5B83\\u4F1A\\u901A\\u8FC7\\u8C03\\u7528\\u4ECE\\u7236\\u7EC4\\u4EF6\\u4F5C\\u4E3A prop \\u4F20\\u9012\\u4E0B\\u6765\\u7684\\u51FD\\u6570\\u6765\\u5B9E\\u73B0\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u793A\\u4F8B\\uFF0C\\u7528\\u4E8E\\u8BF4\\u660E\\u5355\\u5411\\u6570\\u636E\\u6D41\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`// ParentComponent.jsx\nimport React, { useState } from 'react';\nimport ChildComponent from './ChildComponent';\n\nconst ParentComponent = () => {\n  const [data, setData] = useState('Hello from Parent');\n\n  const handleChange = (newData) => {\n    setData(newData);\n  };\n\n  return (\n    <div>\n      <h1>{data}</h1>\n      <ChildComponent data={data} onChange={handleChange} />\n    </div>\n  );\n};\n\nexport default ParentComponent;\n\n// ChildComponent.jsx\nimport React from 'react';\n\nconst ChildComponent = ({ data, onChange }) => {\n  return (\n    <div>\n      <p>{data}</p>\n      <button onClick={() => onChange('Hello from Child')}>Change Data</button>\n    </div>\n  );\n};\n\nexport default ChildComponent;\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"ParentComponent\"}),\" \\u901A\\u8FC7 \",(0,e.jsx)(n.code,{children:\"props\"}),\" \\u5C06 \",(0,e.jsx)(n.code,{children:\"data\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"handleChange\"}),\" \\u51FD\\u6570\\u4F20\\u9012\\u7ED9 \",(0,e.jsx)(n.code,{children:\"ChildComponent\"}),\"\\u3002\",(0,e.jsx)(n.code,{children:\"ChildComponent\"}),\" \\u53EF\\u4EE5\\u8BFB\\u53D6 \",(0,e.jsx)(n.code,{children:\"data\"}),\" \\u5E76\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"onChange\"}),\" \\u4EE5\\u53CD\\u9988\\u7ED9\\u7236\\u7EC4\\u4EF6\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5355\\u5411\\u6570\\u636E\\u6D41\\u7684\\u4F18\\u52BF\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u63D0\\u9AD8\\u53EF\\u7EF4\\u62A4\\u6027\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5355\\u5411\\u6570\\u636E\\u6D41\\u4F7F\\u5E94\\u7528\\u7A0B\\u5E8F\\u7ED3\\u6784\\u66F4\\u5177\\u53EF\\u9884\\u6D4B\\u6027\\uFF0C\\u66F4\\u6613\\u4E8E\\u7406\\u89E3\\u3002\\u7531\\u4E8E\\u6570\\u636E\\u4EE5\\u5355\\u4E2A\\u65B9\\u5411\\u6D41\\u52A8\\uFF0C\\u56E0\\u6B64\\u66F4\\u5BB9\\u6613\\u8DDF\\u8E2A\\u6570\\u636E\\u968F\\u65F6\\u95F4\\u7684\\u53D8\\u5316\\uFF0C\\u4ECE\\u800C\\u4F7F\\u4EE3\\u7801\\u5E93\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u66F4\\u6613\\u4E8E\\u8C03\\u8BD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528\\u5355\\u5411\\u6570\\u636E\\u6D41\\uFF0C\\u66F4\\u5BB9\\u6613\\u67E5\\u660E\\u53EF\\u80FD\\u53D1\\u751F\\u9519\\u8BEF\\u7684\\u5730\\u70B9\\u3002\\u7531\\u4E8E\\u6570\\u636E\\u53EA\\u80FD\\u4ECE\\u7236\\u7EA7\\u6D41\\u5411\\u5B50\\u7EA7\\uFF0C\\u56E0\\u6B64\\u60A8\\u53EF\\u4EE5\\u8DDF\\u8E2A\\u6570\\u636E\\u6D41\\u5E76\\u66F4\\u5FEB\\u5730\\u786E\\u5B9A\\u95EE\\u9898\\u6765\\u6E90\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u66F4\\u597D\\u7684\\u6027\\u80FD\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5355\\u5411\\u6570\\u636E\\u6D41\\u53EF\\u4EE5\\u5E26\\u6765\\u66F4\\u597D\\u7684\\u6027\\u80FD\\uFF0C\\u56E0\\u4E3A\\u5B83\\u964D\\u4F4E\\u4E86\\u6570\\u636E\\u7BA1\\u7406\\u7684\\u590D\\u6742\\u6027\\u3002React \\u7684\\u534F\\u8C03\\u7B97\\u6CD5\\u53EF\\u4EE5\\u901A\\u8FC7\\u6BD4\\u8F83\\u5F53\\u524D\\u72B6\\u6001\\u548C\\u5148\\u524D\\u72B6\\u6001\\u6765\\u6709\\u6548\\u5730\\u66F4\\u65B0 DOM\\uFF0C\\u4ECE\\u800C\\u6700\\u5927\\u9650\\u5EA6\\u5730\\u51CF\\u5C11\\u6240\\u9700\\u7684\\u66F4\\u65B0\\u6B21\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/passing-props-to-a-component\",children:\"React \\u7EC4\\u4EF6\\u548C Props \\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React \\u72B6\\u6001\\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/sharing-state-between-components\",children:\"React \\u63D0\\u5347\\u72B6\\u6001\\u6587\\u6863\"})}),`\n`]})]})}function p(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(i,{...t})}):i(t)}return D(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-server-side-rendering-of-react-applications-and-its-benefits/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-server-side-rendering-of-react-applications-and-its-benefits/en-US.json
index 1595c99e9..d9aa9e47f 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-server-side-rendering-of-react-applications-and-its-benefits/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-server-side-rendering-of-react-applications-and-its-benefits/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/explain-server-side-rendering-of-react-applications-and-its-benefits/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),m=(r,e)=>{for(var t in e)s(r,t,{get:e[t],enumerable:!0})},c=(r,e,t,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!v.call(r,i)&&i!==t&&s(r,i,{get:()=>e[i],enumerable:!(a=p(e,i))||a.enumerable});return r};var S=(r,e,t)=>(t=r!=null?l(g(r)):{},c(e||!r||!r.__esModule?s(t,\"default\",{value:r,enumerable:!0}):t,r)),R=r=>c(s({},\"__esModule\",{value:!0}),r);var d=f((H,o)=>{o.exports=_jsx_runtime});var b={};m(b,{default:()=>T,frontmatter:()=>x});var n=S(d()),x={title:\"Explain server-side rendering of React applications and its benefits?\"};function h(r){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",code:\"code\",pre:\"pre\",ul:\"ul\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Server-side rendering (SSR) in React involves rendering React components on the server and sending the fully rendered HTML to the client. This approach improves initial load times and SEO. The server handles the initial rendering, and the client takes over with React's hydration process. Benefits include faster initial page loads, better SEO, and improved performance on slower devices.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is server-side rendering of React applications?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition\"}),`\n`,(0,n.jsx)(e.p,{children:\"Server-side rendering (SSR) is a technique where the server renders the initial HTML of a React application and sends it to the client. This is in contrast to client-side rendering (CSR), where the browser downloads a minimal HTML page and renders the content using JavaScript.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How it works\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Initial request\"}),\": When a user requests a page, the server processes this request.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Rendering on the server\"}),\": The server uses React to render the components into HTML.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Sending HTML to the client\"}),\": The server sends the fully rendered HTML to the client.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Hydration\"}),\": Once the HTML is loaded, React takes over and binds the event handlers, making the page interactive.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Code example\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here's a basic example using \",(0,n.jsx)(e.code,{children:\"Next.js\"}),\", a popular React framework that supports SSR out of the box:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React from 'react';\n\nconst Home = ({ data }) => (\n  <div>\n    <h1>Welcome to my SSR React App</h1>\n    <p>Data from server: {data}</p>\n  </div>\n);\n\nexport async function getServerSideProps() {\n  // Fetch data from an API or database\n  const data = await fetchDataFromAPI();\n  return { props: { data } };\n}\n\nexport default Home;\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Benefits of server-side rendering\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Improved initial load time\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Faster content display\"}),\": Since the server sends fully rendered HTML, users see the content faster compared to CSR, where the browser has to download and execute JavaScript before rendering.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Better SEO\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Search engine indexing\"}),\": Search engines can easily index the fully rendered HTML, improving the SEO of your application. This is particularly important for content-heavy sites.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Performance on slower devices\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reduced client-side processing\"}),\": SSR reduces the amount of JavaScript that needs to be processed on the client side, which is beneficial for users with slower devices or poor network conditions.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Enhanced user experience\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Perceived performance\"}),\": Users perceive the application as faster because they see content sooner, even if the JavaScript is still loading in the background.\"]}),`\n`]}),`\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://nextjs.org/docs\",children:\"Next.js Documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/rsc/server-components\",children:\"React Server Components\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react-dom/server\",children:\"Server-side rendering in React\"})}),`\n`]})]})}function w(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(h,r)})):h(r)}var T=w;return R(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),S=(r,e)=>{for(var t in e)s(r,t,{get:e[t],enumerable:!0})},o=(r,e,t,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of v(e))!f.call(r,i)&&i!==t&&s(r,i,{get:()=>e[i],enumerable:!(a=u(e,i))||a.enumerable});return r};var R=(r,e,t)=>(t=r!=null?p(g(r)):{},o(e||!r||!r.__esModule?s(t,\"default\",{value:r,enumerable:!0}):t,r)),x=r=>o(s({},\"__esModule\",{value:!0}),r);var d=m((H,c)=>{c.exports=_jsx_runtime});var T={};S(T,{default:()=>l,frontmatter:()=>w});var n=R(d()),w={title:\"Explain server-side rendering of React applications and its benefits?\"};function h(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Server-side rendering (SSR) in React involves rendering React components on the server and sending the fully rendered HTML to the client. This approach improves initial load times and SEO. The server handles the initial rendering, and the client takes over with React's hydration process. Benefits include faster initial page loads, better SEO, and improved performance on slower devices.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is server-side rendering of React applications?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition\"}),`\n`,(0,n.jsx)(e.p,{children:\"Server-side rendering (SSR) is a technique where the server renders the initial HTML of a React application and sends it to the client. This is in contrast to client-side rendering (CSR), where the browser downloads a minimal HTML page and renders the content using JavaScript.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How it works\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Initial request\"}),\": When a user requests a page, the server processes this request.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Rendering on the server\"}),\": The server uses React to render the components into HTML.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Sending HTML to the client\"}),\": The server sends the fully rendered HTML to the client.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Hydration\"}),\": Once the HTML is loaded, React takes over and binds the event handlers, making the page interactive.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Code example\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here's a basic example using \",(0,n.jsx)(e.code,{children:\"Next.js\"}),\", a popular React framework that supports SSR out of the box:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React from 'react';\n\nconst Home = ({ data }) => (\n  <div>\n    <h1>Welcome to my SSR React App</h1>\n    <p>Data from server: {data}</p>\n  </div>\n);\n\nexport async function getServerSideProps() {\n  // Fetch data from an API or database\n  const data = await fetchDataFromAPI();\n  return { props: { data } };\n}\n\nexport default Home;\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Benefits of server-side rendering\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Improved initial load time\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Faster content display\"}),\": Since the server sends fully rendered HTML, users see the content faster compared to CSR, where the browser has to download and execute JavaScript before rendering.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Better SEO\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Search engine indexing\"}),\": Search engines can easily index the fully rendered HTML, improving the SEO of your application. This is particularly important for content-heavy sites.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Performance on slower devices\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reduced client-side processing\"}),\": SSR reduces the amount of JavaScript that needs to be processed on the client side, which is beneficial for users with slower devices or poor network conditions.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Enhanced user experience\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Perceived performance\"}),\": Users perceive the application as faster because they see content sooner, even if the JavaScript is still loading in the background.\"]}),`\n`]}),`\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://nextjs.org/docs\",children:\"Next.js Documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/rsc/server-components\",children:\"React Server Components\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react-dom/server\",children:\"Server-side rendering in React\"})}),`\n`]})]})}function l(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return x(T);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-server-side-rendering-of-react-applications-and-its-benefits/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-server-side-rendering-of-react-applications-and-its-benefits/zh-CN.json
index 09986f238..a151724d2 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-server-side-rendering-of-react-applications-and-its-benefits/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-server-side-rendering-of-react-applications-and-its-benefits/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/explain-server-side-rendering-of-react-applications-and-its-benefits/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var u=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),m=(r,n)=>{for(var c in n)i(r,c,{get:n[c],enumerable:!0})},h=(r,n,c,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of S(n))!g.call(r,t)&&t!==c&&i(r,t,{get:()=>n[t],enumerable:!(l=p(n,t))||l.enumerable});return r};var f=(r,n,c)=>(c=r!=null?s(R(r)):{},h(n||!r||!r.__esModule?i(c,\"default\",{value:r,enumerable:!0}):c,r)),x=r=>h(i({},\"__esModule\",{value:!0}),r);var a=u((T,d)=>{d.exports=_jsx_runtime});var H={};m(H,{default:()=>j,frontmatter:()=>v});var e=f(a()),v={title:\"\\u89E3\\u91CA React \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\u53CA\\u5176\\u4F18\\u52BF\\uFF1F\"};function o(r){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",code:\"code\",pre:\"pre\",ul:\"ul\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u4E2D\\u7684\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3 (SSR) \\u6D89\\u53CA\\u5728\\u670D\\u52A1\\u5668\\u4E0A\\u6E32\\u67D3 React \\u7EC4\\u4EF6\\uFF0C\\u5E76\\u5C06\\u5B8C\\u5168\\u6E32\\u67D3\\u7684 HTML \\u53D1\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\\u3002\\u8FD9\\u79CD\\u65B9\\u6CD5\\u53EF\\u4EE5\\u6539\\u5584\\u521D\\u59CB\\u52A0\\u8F7D\\u65F6\\u95F4\\u548C SEO\\u3002\\u670D\\u52A1\\u5668\\u5904\\u7406\\u521D\\u59CB\\u6E32\\u67D3\\uFF0C\\u5BA2\\u6237\\u7AEF\\u901A\\u8FC7 React \\u7684\\u6C34\\u5408\\u8FC7\\u7A0B\\u63A5\\u7BA1\\u3002\\u597D\\u5904\\u5305\\u62EC\\u66F4\\u5FEB\\u7684\\u521D\\u59CB\\u9875\\u9762\\u52A0\\u8F7D\\u3001\\u66F4\\u597D\\u7684 SEO \\u4EE5\\u53CA\\u5728\\u8F83\\u6162\\u8BBE\\u5907\\u4E0A\\u7684\\u6539\\u8FDB\\u6027\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F React \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3 (SSR) \\u662F\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u670D\\u52A1\\u5668\\u6E32\\u67D3 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u521D\\u59CB HTML \\u5E76\\u5C06\\u5176\\u53D1\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\\u3002\\u8FD9\\u4E0E\\u5BA2\\u6237\\u7AEF\\u6E32\\u67D3 (CSR) \\u5F62\\u6210\\u5BF9\\u6BD4\\uFF0C\\u5728\\u5BA2\\u6237\\u7AEF\\u6E32\\u67D3\\u4E2D\\uFF0C\\u6D4F\\u89C8\\u5668\\u4E0B\\u8F7D\\u4E00\\u4E2A\\u6700\\u5C0F\\u7684 HTML \\u9875\\u9762\\uFF0C\\u5E76\\u4F7F\\u7528 JavaScript \\u6E32\\u67D3\\u5185\\u5BB9\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u521D\\u59CB\\u8BF7\\u6C42\"}),\"\\uFF1A\\u5F53\\u7528\\u6237\\u8BF7\\u6C42\\u9875\\u9762\\u65F6\\uFF0C\\u670D\\u52A1\\u5668\\u5904\\u7406\\u6B64\\u8BF7\\u6C42\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5728\\u670D\\u52A1\\u5668\\u4E0A\\u6E32\\u67D3\"}),\"\\uFF1A\\u670D\\u52A1\\u5668\\u4F7F\\u7528 React \\u5C06\\u7EC4\\u4EF6\\u6E32\\u67D3\\u6210 HTML\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C06 HTML \\u53D1\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\"}),\"\\uFF1A\\u670D\\u52A1\\u5668\\u5C06\\u5B8C\\u5168\\u6E32\\u67D3\\u7684 HTML \\u53D1\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6C34\\u5408\"}),\"\\uFF1A\\u52A0\\u8F7D HTML \\u540E\\uFF0CReact \\u63A5\\u7BA1\\u5E76\\u7ED1\\u5B9A\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\uFF0C\\u4F7F\\u9875\\u9762\\u5177\\u6709\\u4EA4\\u4E92\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EE3\\u7801\\u793A\\u4F8B\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"Next.js\"}),\" \\u7684\\u57FA\\u672C\\u793A\\u4F8B\\uFF0C\\u8FD9\\u662F\\u4E00\\u4E2A\\u652F\\u6301\\u5F00\\u7BB1\\u5373\\u7528\\u7684 SSR \\u7684\\u6D41\\u884C React \\u6846\\u67B6\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import React from 'react';\n\nconst Home = ({ data }) => (\n  <div>\n    <h1>\\u6B22\\u8FCE\\u6765\\u5230\\u6211\\u7684 SSR React \\u5E94\\u7528\\u7A0B\\u5E8F</h1>\n    <p>\\u6765\\u81EA\\u670D\\u52A1\\u5668\\u7684\\u6570\\u636E\\uFF1A{data}</p>\n  </div>\n);\n\nexport async function getServerSideProps() {\n  // \\u4ECE API \\u6216\\u6570\\u636E\\u5E93\\u4E2D\\u83B7\\u53D6\\u6570\\u636E\n  const data = await fetchDataFromAPI();\n  return { props: { data } };\n}\n\nexport default Home;\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\u7684\\u4F18\\u52BF\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6539\\u8FDB\\u7684\\u521D\\u59CB\\u52A0\\u8F7D\\u65F6\\u95F4\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u66F4\\u5FEB\\u7684\\u5185\\u5BB9\\u663E\\u793A\"}),\"\\uFF1A\\u7531\\u4E8E\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u5B8C\\u5168\\u6E32\\u67D3\\u7684 HTML\\uFF0C\\u7528\\u6237\\u770B\\u5230\\u5185\\u5BB9\\u7684\\u663E\\u793A\\u901F\\u5EA6\\u6BD4 CSR \\u5FEB\\uFF0C\\u5728 CSR \\u4E2D\\uFF0C\\u6D4F\\u89C8\\u5668\\u5FC5\\u987B\\u5148\\u4E0B\\u8F7D\\u5E76\\u6267\\u884C JavaScript \\u624D\\u80FD\\u6E32\\u67D3\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u66F4\\u597D\\u7684 SEO\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u641C\\u7D22\\u5F15\\u64CE\\u7D22\\u5F15\"}),\"\\uFF1A\\u641C\\u7D22\\u5F15\\u64CE\\u53EF\\u4EE5\\u8F7B\\u677E\\u5730\\u7D22\\u5F15\\u5B8C\\u5168\\u6E32\\u67D3\\u7684 HTML\\uFF0C\\u4ECE\\u800C\\u6539\\u5584\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684 SEO\\u3002\\u8FD9\\u5BF9\\u4E8E\\u5185\\u5BB9\\u4E30\\u5BCC\\u7684\\u7F51\\u7AD9\\u5C24\\u5176\\u91CD\\u8981\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u8F83\\u6162\\u8BBE\\u5907\\u4E0A\\u7684\\u6027\\u80FD\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u51CF\\u5C11\\u5BA2\\u6237\\u7AEF\\u5904\\u7406\"}),\"\\uFF1ASSR \\u51CF\\u5C11\\u4E86\\u9700\\u8981\\u5728\\u5BA2\\u6237\\u7AEF\\u5904\\u7406\\u7684 JavaScript \\u91CF\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u4F7F\\u7528\\u8F83\\u6162\\u8BBE\\u5907\\u6216\\u7F51\\u7EDC\\u72B6\\u51B5\\u4E0D\\u4F73\\u7684\\u7528\\u6237\\u6765\\u8BF4\\u662F\\u6709\\u76CA\\u7684\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u589E\\u5F3A\\u7684\\u7528\\u6237\\u4F53\\u9A8C\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u611F\\u77E5\\u6027\\u80FD\"}),\"\\uFF1A\\u7528\\u6237\\u4F1A\\u89C9\\u5F97\\u5E94\\u7528\\u7A0B\\u5E8F\\u66F4\\u5FEB\\uFF0C\\u56E0\\u4E3A\\u4ED6\\u4EEC\\u53EF\\u4EE5\\u66F4\\u5FEB\\u5730\\u770B\\u5230\\u5185\\u5BB9\\uFF0C\\u5373\\u4F7F JavaScript \\u4ECD\\u5728\\u540E\\u53F0\\u52A0\\u8F7D\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://nextjs.org/docs\",children:\"Next.js \\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/rsc/server-components\",children:\"React \\u670D\\u52A1\\u5668\\u7EC4\\u4EF6\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react-dom/server\",children:\"React \\u4E2D\\u7684\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\"})}),`\n`]})]})}function M(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(o,r)})):o(r)}var j=M;return x(H);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),f=(r,n)=>{for(var c in n)i(r,c,{get:n[c],enumerable:!0})},h=(r,n,c,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of R(n))!m.call(r,t)&&t!==c&&i(r,t,{get:()=>n[t],enumerable:!(l=S(n,t))||l.enumerable});return r};var x=(r,n,c)=>(c=r!=null?p(u(r)):{},h(n||!r||!r.__esModule?i(c,\"default\",{value:r,enumerable:!0}):c,r)),v=r=>h(i({},\"__esModule\",{value:!0}),r);var a=g((j,d)=>{d.exports=_jsx_runtime});var H={};f(H,{default:()=>s,frontmatter:()=>M});var e=x(a()),M={title:\"\\u89E3\\u91CA React \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\u53CA\\u5176\\u4F18\\u52BF\\uFF1F\"};function o(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u4E2D\\u7684\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3 (SSR) \\u6D89\\u53CA\\u5728\\u670D\\u52A1\\u5668\\u4E0A\\u6E32\\u67D3 React \\u7EC4\\u4EF6\\uFF0C\\u5E76\\u5C06\\u5B8C\\u5168\\u6E32\\u67D3\\u7684 HTML \\u53D1\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\\u3002\\u8FD9\\u79CD\\u65B9\\u6CD5\\u53EF\\u4EE5\\u6539\\u5584\\u521D\\u59CB\\u52A0\\u8F7D\\u65F6\\u95F4\\u548C SEO\\u3002\\u670D\\u52A1\\u5668\\u5904\\u7406\\u521D\\u59CB\\u6E32\\u67D3\\uFF0C\\u5BA2\\u6237\\u7AEF\\u901A\\u8FC7 React \\u7684\\u6C34\\u5408\\u8FC7\\u7A0B\\u63A5\\u7BA1\\u3002\\u597D\\u5904\\u5305\\u62EC\\u66F4\\u5FEB\\u7684\\u521D\\u59CB\\u9875\\u9762\\u52A0\\u8F7D\\u3001\\u66F4\\u597D\\u7684 SEO \\u4EE5\\u53CA\\u5728\\u8F83\\u6162\\u8BBE\\u5907\\u4E0A\\u7684\\u6539\\u8FDB\\u6027\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F React \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3 (SSR) \\u662F\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u670D\\u52A1\\u5668\\u6E32\\u67D3 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u521D\\u59CB HTML \\u5E76\\u5C06\\u5176\\u53D1\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\\u3002\\u8FD9\\u4E0E\\u5BA2\\u6237\\u7AEF\\u6E32\\u67D3 (CSR) \\u5F62\\u6210\\u5BF9\\u6BD4\\uFF0C\\u5728\\u5BA2\\u6237\\u7AEF\\u6E32\\u67D3\\u4E2D\\uFF0C\\u6D4F\\u89C8\\u5668\\u4E0B\\u8F7D\\u4E00\\u4E2A\\u6700\\u5C0F\\u7684 HTML \\u9875\\u9762\\uFF0C\\u5E76\\u4F7F\\u7528 JavaScript \\u6E32\\u67D3\\u5185\\u5BB9\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u521D\\u59CB\\u8BF7\\u6C42\"}),\"\\uFF1A\\u5F53\\u7528\\u6237\\u8BF7\\u6C42\\u9875\\u9762\\u65F6\\uFF0C\\u670D\\u52A1\\u5668\\u5904\\u7406\\u6B64\\u8BF7\\u6C42\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5728\\u670D\\u52A1\\u5668\\u4E0A\\u6E32\\u67D3\"}),\"\\uFF1A\\u670D\\u52A1\\u5668\\u4F7F\\u7528 React \\u5C06\\u7EC4\\u4EF6\\u6E32\\u67D3\\u6210 HTML\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C06 HTML \\u53D1\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\"}),\"\\uFF1A\\u670D\\u52A1\\u5668\\u5C06\\u5B8C\\u5168\\u6E32\\u67D3\\u7684 HTML \\u53D1\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6C34\\u5408\"}),\"\\uFF1A\\u52A0\\u8F7D HTML \\u540E\\uFF0CReact \\u63A5\\u7BA1\\u5E76\\u7ED1\\u5B9A\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\uFF0C\\u4F7F\\u9875\\u9762\\u5177\\u6709\\u4EA4\\u4E92\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EE3\\u7801\\u793A\\u4F8B\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"Next.js\"}),\" \\u7684\\u57FA\\u672C\\u793A\\u4F8B\\uFF0C\\u8FD9\\u662F\\u4E00\\u4E2A\\u652F\\u6301\\u5F00\\u7BB1\\u5373\\u7528\\u7684 SSR \\u7684\\u6D41\\u884C React \\u6846\\u67B6\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import React from 'react';\n\nconst Home = ({ data }) => (\n  <div>\n    <h1>\\u6B22\\u8FCE\\u6765\\u5230\\u6211\\u7684 SSR React \\u5E94\\u7528\\u7A0B\\u5E8F</h1>\n    <p>\\u6765\\u81EA\\u670D\\u52A1\\u5668\\u7684\\u6570\\u636E\\uFF1A{data}</p>\n  </div>\n);\n\nexport async function getServerSideProps() {\n  // \\u4ECE API \\u6216\\u6570\\u636E\\u5E93\\u4E2D\\u83B7\\u53D6\\u6570\\u636E\n  const data = await fetchDataFromAPI();\n  return { props: { data } };\n}\n\nexport default Home;\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\u7684\\u4F18\\u52BF\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6539\\u8FDB\\u7684\\u521D\\u59CB\\u52A0\\u8F7D\\u65F6\\u95F4\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u66F4\\u5FEB\\u7684\\u5185\\u5BB9\\u663E\\u793A\"}),\"\\uFF1A\\u7531\\u4E8E\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u5B8C\\u5168\\u6E32\\u67D3\\u7684 HTML\\uFF0C\\u7528\\u6237\\u770B\\u5230\\u5185\\u5BB9\\u7684\\u663E\\u793A\\u901F\\u5EA6\\u6BD4 CSR \\u5FEB\\uFF0C\\u5728 CSR \\u4E2D\\uFF0C\\u6D4F\\u89C8\\u5668\\u5FC5\\u987B\\u5148\\u4E0B\\u8F7D\\u5E76\\u6267\\u884C JavaScript \\u624D\\u80FD\\u6E32\\u67D3\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u66F4\\u597D\\u7684 SEO\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u641C\\u7D22\\u5F15\\u64CE\\u7D22\\u5F15\"}),\"\\uFF1A\\u641C\\u7D22\\u5F15\\u64CE\\u53EF\\u4EE5\\u8F7B\\u677E\\u5730\\u7D22\\u5F15\\u5B8C\\u5168\\u6E32\\u67D3\\u7684 HTML\\uFF0C\\u4ECE\\u800C\\u6539\\u5584\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684 SEO\\u3002\\u8FD9\\u5BF9\\u4E8E\\u5185\\u5BB9\\u4E30\\u5BCC\\u7684\\u7F51\\u7AD9\\u5C24\\u5176\\u91CD\\u8981\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u8F83\\u6162\\u8BBE\\u5907\\u4E0A\\u7684\\u6027\\u80FD\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u51CF\\u5C11\\u5BA2\\u6237\\u7AEF\\u5904\\u7406\"}),\"\\uFF1ASSR \\u51CF\\u5C11\\u4E86\\u9700\\u8981\\u5728\\u5BA2\\u6237\\u7AEF\\u5904\\u7406\\u7684 JavaScript \\u91CF\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u4F7F\\u7528\\u8F83\\u6162\\u8BBE\\u5907\\u6216\\u7F51\\u7EDC\\u72B6\\u51B5\\u4E0D\\u4F73\\u7684\\u7528\\u6237\\u6765\\u8BF4\\u662F\\u6709\\u76CA\\u7684\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u589E\\u5F3A\\u7684\\u7528\\u6237\\u4F53\\u9A8C\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u611F\\u77E5\\u6027\\u80FD\"}),\"\\uFF1A\\u7528\\u6237\\u4F1A\\u89C9\\u5F97\\u5E94\\u7528\\u7A0B\\u5E8F\\u66F4\\u5FEB\\uFF0C\\u56E0\\u4E3A\\u4ED6\\u4EEC\\u53EF\\u4EE5\\u66F4\\u5FEB\\u5730\\u770B\\u5230\\u5185\\u5BB9\\uFF0C\\u5373\\u4F7F JavaScript \\u4ECD\\u5728\\u540E\\u53F0\\u52A0\\u8F7D\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://nextjs.org/docs\",children:\"Next.js \\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/rsc/server-components\",children:\"React \\u670D\\u52A1\\u5668\\u7EC4\\u4EF6\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react-dom/server\",children:\"React \\u4E2D\\u7684\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\"})}),`\n`]})]})}function s(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(o,{...r})}):o(r)}return v(H);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-static-generation-of-react-applications-and-its-benefits/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-static-generation-of-react-applications-and-its-benefits/en-US.json
index a809e4951..e3975ba04 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-static-generation-of-react-applications-and-its-benefits/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-static-generation-of-react-applications-and-its-benefits/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/explain-static-generation-of-react-applications-and-its-benefits/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},c=(t,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!m.call(t,r)&&r!==i&&a(t,r,{get:()=>e[r],enumerable:!(s=g(e,r))||s.enumerable});return t};var b=(t,e,i)=>(i=t!=null?h(u(t)):{},c(e||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),x=t=>c(a({},\"__esModule\",{value:!0}),t);var d=f((H,o)=>{o.exports=_jsx_runtime});var j={};v(j,{default:()=>y,frontmatter:()=>S});var n=b(d()),S={title:\"Explain static generation of React applications and its benefits?\"};function l(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",h4:\"h4\",ul:\"ul\",pre:\"pre\",code:\"code\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Static generation in React applications involves pre-rendering the HTML at build time, rather than on each request. This results in faster load times and better performance since the HTML is already generated and can be served directly from a CDN. It also improves SEO and can reduce server load. Tools like Next.js facilitate static generation by allowing developers to generate static pages easily.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Static generation of React applications and its benefits\"}),`\n`,(0,n.jsx)(e.h3,{children:\"What is static generation?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Static generation is a method of pre-rendering where the HTML of a page is generated at build time. This means that the HTML is created once, during the build process, and then reused for each request. In the context of React applications, this is often achieved using frameworks like Next.js.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How does static generation work?\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Build time rendering\"}),\": During the build process, the framework generates the HTML for each page based on the React components and data.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Static files\"}),\": The generated HTML, CSS, and JavaScript files are then stored as static files.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Serving the files\"}),\": These static files can be served directly from a CDN or a web server, without the need for server-side rendering on each request.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits of static generation\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Improved performance\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Faster load times\"}),\": Since the HTML is pre-generated, it can be served immediately without waiting for server-side rendering.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reduced server load\"}),\": Static files can be served from a CDN, reducing the load on the origin server.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Better SEO\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Search engine indexing\"}),\": Pre-rendered HTML is more easily indexed by search engines, improving SEO.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Consistent content\"}),\": The content is consistent across requests, ensuring that search engines see the same content as users.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Enhanced security\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"No server-side code execution\"}),\": Since there is no server-side rendering, there is less risk of server-side vulnerabilities.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Static files\"}),\": Serving static files reduces the attack surface compared to dynamic content generation.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Scalability\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"CDN distribution\"}),\": Static files can be distributed across multiple CDN nodes, improving scalability and reducing latency.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Efficient caching\"}),\": Static files can be easily cached, further improving performance and reducing server load.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example with Next.js\"}),`\n`,(0,n.jsx)(e.p,{children:\"Next.js is a popular framework for React that supports static generation. Here is a simple example of how to use static generation in Next.js:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// pages/index.js\nimport React from 'react';\n\nconst HomePage = ({ data }) => {\n  return (\n    <div>\n      <h1>Welcome to my static site!</h1>\n      <p>{data.message}</p>\n    </div>\n  );\n};\n\nexport async function getStaticProps() {\n  // Fetch data at build time\n  const data = { message: 'Hello, world!' };\n  return {\n    props: {\n      data,\n    },\n  };\n}\n\nexport default HomePage;\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the \",(0,n.jsx)(e.code,{children:\"getStaticProps\"}),\" function fetches data at build time, and the \",(0,n.jsx)(e.code,{children:\"HomePage\"}),\" component uses this data to render the HTML.\"]}),`\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://nextjs.org/docs/basic-features/pages#static-generation-recommended\",children:\"Next.js documentation on static generation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn\",children:\"React official documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.staticgen.com/\",children:\"Static site generators comparison\"})}),`\n`]})]})}function w(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(l,t)})):l(t)}var y=w;return x(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var g=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},c=(t,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!f.call(t,r)&&r!==i&&a(t,r,{get:()=>e[r],enumerable:!(s=p(e,r))||s.enumerable});return t};var b=(t,e,i)=>(i=t!=null?g(m(t)):{},c(e||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),S=t=>c(a({},\"__esModule\",{value:!0}),t);var d=v((H,o)=>{o.exports=_jsx_runtime});var y={};x(y,{default:()=>h,frontmatter:()=>w});var n=b(d()),w={title:\"Explain static generation of React applications and its benefits?\"};function l(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Static generation in React applications involves pre-rendering the HTML at build time, rather than on each request. This results in faster load times and better performance since the HTML is already generated and can be served directly from a CDN. It also improves SEO and can reduce server load. Tools like Next.js facilitate static generation by allowing developers to generate static pages easily.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Static generation of React applications and its benefits\"}),`\n`,(0,n.jsx)(e.h3,{children:\"What is static generation?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Static generation is a method of pre-rendering where the HTML of a page is generated at build time. This means that the HTML is created once, during the build process, and then reused for each request. In the context of React applications, this is often achieved using frameworks like Next.js.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How does static generation work?\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Build time rendering\"}),\": During the build process, the framework generates the HTML for each page based on the React components and data.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Static files\"}),\": The generated HTML, CSS, and JavaScript files are then stored as static files.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Serving the files\"}),\": These static files can be served directly from a CDN or a web server, without the need for server-side rendering on each request.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits of static generation\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Improved performance\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Faster load times\"}),\": Since the HTML is pre-generated, it can be served immediately without waiting for server-side rendering.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reduced server load\"}),\": Static files can be served from a CDN, reducing the load on the origin server.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Better SEO\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Search engine indexing\"}),\": Pre-rendered HTML is more easily indexed by search engines, improving SEO.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Consistent content\"}),\": The content is consistent across requests, ensuring that search engines see the same content as users.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Enhanced security\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"No server-side code execution\"}),\": Since there is no server-side rendering, there is less risk of server-side vulnerabilities.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Static files\"}),\": Serving static files reduces the attack surface compared to dynamic content generation.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Scalability\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"CDN distribution\"}),\": Static files can be distributed across multiple CDN nodes, improving scalability and reducing latency.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Efficient caching\"}),\": Static files can be easily cached, further improving performance and reducing server load.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example with Next.js\"}),`\n`,(0,n.jsx)(e.p,{children:\"Next.js is a popular framework for React that supports static generation. Here is a simple example of how to use static generation in Next.js:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// pages/index.js\nimport React from 'react';\n\nconst HomePage = ({ data }) => {\n  return (\n    <div>\n      <h1>Welcome to my static site!</h1>\n      <p>{data.message}</p>\n    </div>\n  );\n};\n\nexport async function getStaticProps() {\n  // Fetch data at build time\n  const data = { message: 'Hello, world!' };\n  return {\n    props: {\n      data,\n    },\n  };\n}\n\nexport default HomePage;\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the \",(0,n.jsx)(e.code,{children:\"getStaticProps\"}),\" function fetches data at build time, and the \",(0,n.jsx)(e.code,{children:\"HomePage\"}),\" component uses this data to render the HTML.\"]}),`\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://nextjs.org/docs/basic-features/pages#static-generation-recommended\",children:\"Next.js documentation on static generation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn\",children:\"React official documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.staticgen.com/\",children:\"Static site generators comparison\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}return S(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-static-generation-of-react-applications-and-its-benefits/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-static-generation-of-react-applications-and-its-benefits/zh-CN.json
index 23ed15240..a1e2a9f5c 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-static-generation-of-react-applications-and-its-benefits/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-static-generation-of-react-applications-and-its-benefits/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/explain-static-generation-of-react-applications-and-its-benefits/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var o=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var x=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),j=(r,n)=>{for(var c in n)i(r,c,{get:n[c],enumerable:!0})},h=(r,n,c,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of p(n))!u.call(r,t)&&t!==c&&i(r,t,{get:()=>n[t],enumerable:!(l=g(n,t))||l.enumerable});return r};var f=(r,n,c)=>(c=r!=null?o(m(r)):{},h(n||!r||!r.__esModule?i(c,\"default\",{value:r,enumerable:!0}):c,r)),H=r=>h(i({},\"__esModule\",{value:!0}),r);var s=x((C,d)=>{d.exports=_jsx_runtime});var T={};j(T,{default:()=>L,frontmatter:()=>M});var e=f(s()),M={title:\"\\u89E3\\u91CA React \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u9759\\u6001\\u751F\\u6210\\u53CA\\u5176\\u4F18\\u52BF\\uFF1F\"};function a(r){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",h4:\"h4\",ul:\"ul\",pre:\"pre\",code:\"code\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7684\\u9759\\u6001\\u751F\\u6210\\u6D89\\u53CA\\u5728\\u6784\\u5EFA\\u65F6\\u9884\\u6E32\\u67D3 HTML\\uFF0C\\u800C\\u4E0D\\u662F\\u5728\\u6BCF\\u4E2A\\u8BF7\\u6C42\\u65F6\\u3002\\u8FD9\\u53EF\\u4EE5\\u52A0\\u5FEB\\u52A0\\u8F7D\\u65F6\\u95F4\\u5E76\\u63D0\\u9AD8\\u6027\\u80FD\\uFF0C\\u56E0\\u4E3A HTML \\u5DF2\\u7ECF\\u751F\\u6210\\uFF0C\\u53EF\\u4EE5\\u76F4\\u63A5\\u4ECE CDN \\u63D0\\u4F9B\\u3002\\u5B83\\u8FD8\\u53EF\\u4EE5\\u6539\\u5584 SEO \\u5E76\\u51CF\\u5C11\\u670D\\u52A1\\u5668\\u8D1F\\u8F7D\\u3002\\u50CF Next.js \\u8FD9\\u6837\\u7684\\u5DE5\\u5177\\u901A\\u8FC7\\u5141\\u8BB8\\u5F00\\u53D1\\u4EBA\\u5458\\u8F7B\\u677E\\u751F\\u6210\\u9759\\u6001\\u9875\\u9762\\u6765\\u4FC3\\u8FDB\\u9759\\u6001\\u751F\\u6210\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u9759\\u6001\\u751F\\u6210\\u53CA\\u5176\\u4F18\\u52BF\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EC0\\u4E48\\u662F\\u9759\\u6001\\u751F\\u6210\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9759\\u6001\\u751F\\u6210\\u662F\\u4E00\\u79CD\\u9884\\u6E32\\u67D3\\u65B9\\u6CD5\\uFF0C\\u5176\\u4E2D\\u9875\\u9762\\u7684 HTML \\u5728\\u6784\\u5EFA\\u65F6\\u751F\\u6210\\u3002\\u8FD9\\u610F\\u5473\\u7740 HTML \\u5728\\u6784\\u5EFA\\u8FC7\\u7A0B\\u4E2D\\u521B\\u5EFA\\u4E00\\u6B21\\uFF0C\\u7136\\u540E\\u5728\\u6BCF\\u4E2A\\u8BF7\\u6C42\\u4E2D\\u91CD\\u590D\\u4F7F\\u7528\\u3002\\u5728 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4E0A\\u4E0B\\u6587\\u4E2D\\uFF0C\\u8FD9\\u901A\\u5E38\\u4F7F\\u7528 Next.js \\u7B49\\u6846\\u67B6\\u6765\\u5B9E\\u73B0\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9759\\u6001\\u751F\\u6210\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6784\\u5EFA\\u65F6\\u6E32\\u67D3\"}),\"\\uFF1A\\u5728\\u6784\\u5EFA\\u8FC7\\u7A0B\\u4E2D\\uFF0C\\u6846\\u67B6\\u6839\\u636E React \\u7EC4\\u4EF6\\u548C\\u6570\\u636E\\u4E3A\\u6BCF\\u4E2A\\u9875\\u9762\\u751F\\u6210 HTML\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9759\\u6001\\u6587\\u4EF6\"}),\"\\uFF1A\\u7136\\u540E\\uFF0C\\u751F\\u6210\\u7684 HTML\\u3001CSS \\u548C JavaScript \\u6587\\u4EF6\\u5C06\\u5B58\\u50A8\\u4E3A\\u9759\\u6001\\u6587\\u4EF6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u63D0\\u4F9B\\u6587\\u4EF6\"}),\"\\uFF1A\\u8FD9\\u4E9B\\u9759\\u6001\\u6587\\u4EF6\\u53EF\\u4EE5\\u76F4\\u63A5\\u4ECE CDN \\u6216 Web \\u670D\\u52A1\\u5668\\u63D0\\u4F9B\\uFF0C\\u800C\\u65E0\\u9700\\u5728\\u6BCF\\u4E2A\\u8BF7\\u6C42\\u4E0A\\u8FDB\\u884C\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9759\\u6001\\u751F\\u6210\\u7684\\u4F18\\u52BF\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u63D0\\u9AD8\\u6027\\u80FD\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u66F4\\u5FEB\\u7684\\u52A0\\u8F7D\\u65F6\\u95F4\"}),\"\\uFF1A\\u7531\\u4E8E HTML \\u662F\\u9884\\u751F\\u6210\\u7684\\uFF0C\\u56E0\\u6B64\\u53EF\\u4EE5\\u7ACB\\u5373\\u63D0\\u4F9B\\uFF0C\\u800C\\u65E0\\u9700\\u7B49\\u5F85\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u51CF\\u5C11\\u670D\\u52A1\\u5668\\u8D1F\\u8F7D\"}),\"\\uFF1A\\u9759\\u6001\\u6587\\u4EF6\\u53EF\\u4EE5\\u4ECE CDN \\u63D0\\u4F9B\\uFF0C\\u4ECE\\u800C\\u51CF\\u5C11\\u4E86\\u6E90\\u670D\\u52A1\\u5668\\u7684\\u8D1F\\u8F7D\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u66F4\\u597D\\u7684 SEO\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u641C\\u7D22\\u5F15\\u64CE\\u7D22\\u5F15\"}),\"\\uFF1A\\u9884\\u6E32\\u67D3\\u7684 HTML \\u66F4\\u5BB9\\u6613\\u88AB\\u641C\\u7D22\\u5F15\\u64CE\\u7D22\\u5F15\\uFF0C\\u4ECE\\u800C\\u6539\\u5584 SEO\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E00\\u81F4\\u7684\\u5185\\u5BB9\"}),\"\\uFF1A\\u5185\\u5BB9\\u5728\\u8BF7\\u6C42\\u4E4B\\u95F4\\u4FDD\\u6301\\u4E00\\u81F4\\uFF0C\\u786E\\u4FDD\\u641C\\u7D22\\u5F15\\u64CE\\u770B\\u5230\\u4E0E\\u7528\\u6237\\u76F8\\u540C\\u7684\\u5185\\u5BB9\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u589E\\u5F3A\\u5B89\\u5168\\u6027\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6CA1\\u6709\\u670D\\u52A1\\u5668\\u7AEF\\u4EE3\\u7801\\u6267\\u884C\"}),\"\\uFF1A\\u7531\\u4E8E\\u6CA1\\u6709\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\uFF0C\\u670D\\u52A1\\u5668\\u7AEF\\u6F0F\\u6D1E\\u7684\\u98CE\\u9669\\u8F83\\u5C0F\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9759\\u6001\\u6587\\u4EF6\"}),\"\\uFF1A\\u63D0\\u4F9B\\u9759\\u6001\\u6587\\u4EF6\\u51CF\\u5C11\\u4E86\\u4E0E\\u52A8\\u6001\\u5185\\u5BB9\\u751F\\u6210\\u76F8\\u6BD4\\u7684\\u653B\\u51FB\\u9762\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u53EF\\u6269\\u5C55\\u6027\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"CDN \\u5206\\u53D1\"}),\"\\uFF1A\\u9759\\u6001\\u6587\\u4EF6\\u53EF\\u4EE5\\u5728\\u591A\\u4E2A CDN \\u8282\\u70B9\\u4E4B\\u95F4\\u5206\\u53D1\\uFF0C\\u4ECE\\u800C\\u63D0\\u9AD8\\u53EF\\u6269\\u5C55\\u6027\\u5E76\\u51CF\\u5C11\\u5EF6\\u8FDF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9AD8\\u6548\\u7F13\\u5B58\"}),\"\\uFF1A\\u9759\\u6001\\u6587\\u4EF6\\u53EF\\u4EE5\\u8F7B\\u677E\\u7F13\\u5B58\\uFF0C\\u4ECE\\u800C\\u8FDB\\u4E00\\u6B65\\u63D0\\u9AD8\\u6027\\u80FD\\u5E76\\u51CF\\u5C11\\u670D\\u52A1\\u5668\\u8D1F\\u8F7D\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Next.js \\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"Next.js \\u662F\\u4E00\\u4E2A\\u6D41\\u884C\\u7684 React \\u6846\\u67B6\\uFF0C\\u652F\\u6301\\u9759\\u6001\\u751F\\u6210\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u5728 Next.js \\u4E2D\\u4F7F\\u7528\\u9759\\u6001\\u751F\\u6210\\u7684\\u7B80\\u5355\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// pages/index.js\nimport React from 'react';\n\nconst HomePage = ({ data }) => {\n  return (\n    <div>\n      <h1>\\u6B22\\u8FCE\\u6765\\u5230\\u6211\\u7684\\u9759\\u6001\\u7F51\\u7AD9\\uFF01</h1>\n      <p>{data.message}</p>\n    </div>\n  );\n};\n\nexport async function getStaticProps() {\n  // \\u5728\\u6784\\u5EFA\\u65F6\\u83B7\\u53D6\\u6570\\u636E\n  const data = { message: '\\u4F60\\u597D\\uFF0C\\u4E16\\u754C\\uFF01' };\n  return {\n    props: {\n      data,\n    },\n  };\n}\n\nexport default HomePage;\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"getStaticProps\"}),\" \\u51FD\\u6570\\u5728\\u6784\\u5EFA\\u65F6\\u83B7\\u53D6\\u6570\\u636E\\uFF0C\",(0,e.jsx)(n.code,{children:\"HomePage\"}),\" \\u7EC4\\u4EF6\\u4F7F\\u7528\\u8FD9\\u4E9B\\u6570\\u636E\\u6765\\u6E32\\u67D3 HTML\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://nextjs.org/docs/basic-features/pages#static-generation-recommended\",children:\"Next.js \\u5173\\u4E8E\\u9759\\u6001\\u751F\\u6210\\u7684\\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn\",children:\"React \\u5B98\\u65B9\\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.staticgen.com/\",children:\"\\u9759\\u6001\\u7AD9\\u70B9\\u751F\\u6210\\u5668\\u6BD4\\u8F83\"})}),`\n`]})]})}function N(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(a,r)})):a(r)}var L=N;return H(T);})();\n;return Component;"
+  "solution": "var Component=(()=>{var g=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var j=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),f=(r,n)=>{for(var c in n)i(r,c,{get:n[c],enumerable:!0})},h=(r,n,c,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of m(n))!x.call(r,t)&&t!==c&&i(r,t,{get:()=>n[t],enumerable:!(l=p(n,t))||l.enumerable});return r};var H=(r,n,c)=>(c=r!=null?g(u(r)):{},h(n||!r||!r.__esModule?i(c,\"default\",{value:r,enumerable:!0}):c,r)),M=r=>h(i({},\"__esModule\",{value:!0}),r);var a=j((R,d)=>{d.exports=_jsx_runtime});var L={};f(L,{default:()=>o,frontmatter:()=>N});var e=H(a()),N={title:\"\\u89E3\\u91CA React \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u9759\\u6001\\u751F\\u6210\\u53CA\\u5176\\u4F18\\u52BF\\uFF1F\"};function s(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7684\\u9759\\u6001\\u751F\\u6210\\u6D89\\u53CA\\u5728\\u6784\\u5EFA\\u65F6\\u9884\\u6E32\\u67D3 HTML\\uFF0C\\u800C\\u4E0D\\u662F\\u5728\\u6BCF\\u4E2A\\u8BF7\\u6C42\\u65F6\\u3002\\u8FD9\\u53EF\\u4EE5\\u52A0\\u5FEB\\u52A0\\u8F7D\\u65F6\\u95F4\\u5E76\\u63D0\\u9AD8\\u6027\\u80FD\\uFF0C\\u56E0\\u4E3A HTML \\u5DF2\\u7ECF\\u751F\\u6210\\uFF0C\\u53EF\\u4EE5\\u76F4\\u63A5\\u4ECE CDN \\u63D0\\u4F9B\\u3002\\u5B83\\u8FD8\\u53EF\\u4EE5\\u6539\\u5584 SEO \\u5E76\\u51CF\\u5C11\\u670D\\u52A1\\u5668\\u8D1F\\u8F7D\\u3002\\u50CF Next.js \\u8FD9\\u6837\\u7684\\u5DE5\\u5177\\u901A\\u8FC7\\u5141\\u8BB8\\u5F00\\u53D1\\u4EBA\\u5458\\u8F7B\\u677E\\u751F\\u6210\\u9759\\u6001\\u9875\\u9762\\u6765\\u4FC3\\u8FDB\\u9759\\u6001\\u751F\\u6210\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u9759\\u6001\\u751F\\u6210\\u53CA\\u5176\\u4F18\\u52BF\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EC0\\u4E48\\u662F\\u9759\\u6001\\u751F\\u6210\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9759\\u6001\\u751F\\u6210\\u662F\\u4E00\\u79CD\\u9884\\u6E32\\u67D3\\u65B9\\u6CD5\\uFF0C\\u5176\\u4E2D\\u9875\\u9762\\u7684 HTML \\u5728\\u6784\\u5EFA\\u65F6\\u751F\\u6210\\u3002\\u8FD9\\u610F\\u5473\\u7740 HTML \\u5728\\u6784\\u5EFA\\u8FC7\\u7A0B\\u4E2D\\u521B\\u5EFA\\u4E00\\u6B21\\uFF0C\\u7136\\u540E\\u5728\\u6BCF\\u4E2A\\u8BF7\\u6C42\\u4E2D\\u91CD\\u590D\\u4F7F\\u7528\\u3002\\u5728 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4E0A\\u4E0B\\u6587\\u4E2D\\uFF0C\\u8FD9\\u901A\\u5E38\\u4F7F\\u7528 Next.js \\u7B49\\u6846\\u67B6\\u6765\\u5B9E\\u73B0\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9759\\u6001\\u751F\\u6210\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6784\\u5EFA\\u65F6\\u6E32\\u67D3\"}),\"\\uFF1A\\u5728\\u6784\\u5EFA\\u8FC7\\u7A0B\\u4E2D\\uFF0C\\u6846\\u67B6\\u6839\\u636E React \\u7EC4\\u4EF6\\u548C\\u6570\\u636E\\u4E3A\\u6BCF\\u4E2A\\u9875\\u9762\\u751F\\u6210 HTML\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9759\\u6001\\u6587\\u4EF6\"}),\"\\uFF1A\\u7136\\u540E\\uFF0C\\u751F\\u6210\\u7684 HTML\\u3001CSS \\u548C JavaScript \\u6587\\u4EF6\\u5C06\\u5B58\\u50A8\\u4E3A\\u9759\\u6001\\u6587\\u4EF6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u63D0\\u4F9B\\u6587\\u4EF6\"}),\"\\uFF1A\\u8FD9\\u4E9B\\u9759\\u6001\\u6587\\u4EF6\\u53EF\\u4EE5\\u76F4\\u63A5\\u4ECE CDN \\u6216 Web \\u670D\\u52A1\\u5668\\u63D0\\u4F9B\\uFF0C\\u800C\\u65E0\\u9700\\u5728\\u6BCF\\u4E2A\\u8BF7\\u6C42\\u4E0A\\u8FDB\\u884C\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9759\\u6001\\u751F\\u6210\\u7684\\u4F18\\u52BF\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u63D0\\u9AD8\\u6027\\u80FD\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u66F4\\u5FEB\\u7684\\u52A0\\u8F7D\\u65F6\\u95F4\"}),\"\\uFF1A\\u7531\\u4E8E HTML \\u662F\\u9884\\u751F\\u6210\\u7684\\uFF0C\\u56E0\\u6B64\\u53EF\\u4EE5\\u7ACB\\u5373\\u63D0\\u4F9B\\uFF0C\\u800C\\u65E0\\u9700\\u7B49\\u5F85\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u51CF\\u5C11\\u670D\\u52A1\\u5668\\u8D1F\\u8F7D\"}),\"\\uFF1A\\u9759\\u6001\\u6587\\u4EF6\\u53EF\\u4EE5\\u4ECE CDN \\u63D0\\u4F9B\\uFF0C\\u4ECE\\u800C\\u51CF\\u5C11\\u4E86\\u6E90\\u670D\\u52A1\\u5668\\u7684\\u8D1F\\u8F7D\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u66F4\\u597D\\u7684 SEO\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u641C\\u7D22\\u5F15\\u64CE\\u7D22\\u5F15\"}),\"\\uFF1A\\u9884\\u6E32\\u67D3\\u7684 HTML \\u66F4\\u5BB9\\u6613\\u88AB\\u641C\\u7D22\\u5F15\\u64CE\\u7D22\\u5F15\\uFF0C\\u4ECE\\u800C\\u6539\\u5584 SEO\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E00\\u81F4\\u7684\\u5185\\u5BB9\"}),\"\\uFF1A\\u5185\\u5BB9\\u5728\\u8BF7\\u6C42\\u4E4B\\u95F4\\u4FDD\\u6301\\u4E00\\u81F4\\uFF0C\\u786E\\u4FDD\\u641C\\u7D22\\u5F15\\u64CE\\u770B\\u5230\\u4E0E\\u7528\\u6237\\u76F8\\u540C\\u7684\\u5185\\u5BB9\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u589E\\u5F3A\\u5B89\\u5168\\u6027\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6CA1\\u6709\\u670D\\u52A1\\u5668\\u7AEF\\u4EE3\\u7801\\u6267\\u884C\"}),\"\\uFF1A\\u7531\\u4E8E\\u6CA1\\u6709\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\uFF0C\\u670D\\u52A1\\u5668\\u7AEF\\u6F0F\\u6D1E\\u7684\\u98CE\\u9669\\u8F83\\u5C0F\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9759\\u6001\\u6587\\u4EF6\"}),\"\\uFF1A\\u63D0\\u4F9B\\u9759\\u6001\\u6587\\u4EF6\\u51CF\\u5C11\\u4E86\\u4E0E\\u52A8\\u6001\\u5185\\u5BB9\\u751F\\u6210\\u76F8\\u6BD4\\u7684\\u653B\\u51FB\\u9762\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u53EF\\u6269\\u5C55\\u6027\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"CDN \\u5206\\u53D1\"}),\"\\uFF1A\\u9759\\u6001\\u6587\\u4EF6\\u53EF\\u4EE5\\u5728\\u591A\\u4E2A CDN \\u8282\\u70B9\\u4E4B\\u95F4\\u5206\\u53D1\\uFF0C\\u4ECE\\u800C\\u63D0\\u9AD8\\u53EF\\u6269\\u5C55\\u6027\\u5E76\\u51CF\\u5C11\\u5EF6\\u8FDF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9AD8\\u6548\\u7F13\\u5B58\"}),\"\\uFF1A\\u9759\\u6001\\u6587\\u4EF6\\u53EF\\u4EE5\\u8F7B\\u677E\\u7F13\\u5B58\\uFF0C\\u4ECE\\u800C\\u8FDB\\u4E00\\u6B65\\u63D0\\u9AD8\\u6027\\u80FD\\u5E76\\u51CF\\u5C11\\u670D\\u52A1\\u5668\\u8D1F\\u8F7D\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Next.js \\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"Next.js \\u662F\\u4E00\\u4E2A\\u6D41\\u884C\\u7684 React \\u6846\\u67B6\\uFF0C\\u652F\\u6301\\u9759\\u6001\\u751F\\u6210\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u5728 Next.js \\u4E2D\\u4F7F\\u7528\\u9759\\u6001\\u751F\\u6210\\u7684\\u7B80\\u5355\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// pages/index.js\nimport React from 'react';\n\nconst HomePage = ({ data }) => {\n  return (\n    <div>\n      <h1>\\u6B22\\u8FCE\\u6765\\u5230\\u6211\\u7684\\u9759\\u6001\\u7F51\\u7AD9\\uFF01</h1>\n      <p>{data.message}</p>\n    </div>\n  );\n};\n\nexport async function getStaticProps() {\n  // \\u5728\\u6784\\u5EFA\\u65F6\\u83B7\\u53D6\\u6570\\u636E\n  const data = { message: '\\u4F60\\u597D\\uFF0C\\u4E16\\u754C\\uFF01' };\n  return {\n    props: {\n      data,\n    },\n  };\n}\n\nexport default HomePage;\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"getStaticProps\"}),\" \\u51FD\\u6570\\u5728\\u6784\\u5EFA\\u65F6\\u83B7\\u53D6\\u6570\\u636E\\uFF0C\",(0,e.jsx)(n.code,{children:\"HomePage\"}),\" \\u7EC4\\u4EF6\\u4F7F\\u7528\\u8FD9\\u4E9B\\u6570\\u636E\\u6765\\u6E32\\u67D3 HTML\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://nextjs.org/docs/basic-features/pages#static-generation-recommended\",children:\"Next.js \\u5173\\u4E8E\\u9759\\u6001\\u751F\\u6210\\u7684\\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn\",children:\"React \\u5B98\\u65B9\\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.staticgen.com/\",children:\"\\u9759\\u6001\\u7AD9\\u70B9\\u751F\\u6210\\u5668\\u6BD4\\u8F83\"})}),`\n`]})]})}function o(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(s,{...r})}):s(r)}return M(L);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-composition-pattern-in-react/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-composition-pattern-in-react/en-US.json
index 8fa0ce7b7..29bc9c182 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-composition-pattern-in-react/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-composition-pattern-in-react/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/explain-the-composition-pattern-in-react/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),b=(i,n)=>{for(var o in n)a(i,o,{get:n[o],enumerable:!0})},r=(i,n,o,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of m(n))!g.call(i,t)&&t!==o&&a(i,t,{get:()=>n[t],enumerable:!(s=d(n,t))||s.enumerable});return i};var x=(i,n,o)=>(o=i!=null?h(u(i)):{},r(n||!i||!i.__esModule?a(o,\"default\",{value:i,enumerable:!0}):o,i)),y=i=>r(a({},\"__esModule\",{value:!0}),i);var l=f((C,c)=>{c.exports=_jsx_runtime});var R={};b(R,{default:()=>j,frontmatter:()=>v});var e=x(l()),v={title:\"Explain the composition pattern in React\"};function p(i){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},i.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"The composition pattern in React is a way to build components by combining smaller, reusable components. Instead of using inheritance, React encourages composition to create complex UIs. You can pass components as children or props to other components to achieve this. For example:\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function WelcomeDialog() {\n  return (\n    <Dialog>\n      <h1>Welcome</h1>\n      <p>Thank you for visiting our spacecraft!</p>\n    </Dialog>\n  );\n}\n\nfunction Dialog(props) {\n  return <div className=\"dialog\">{props.children}</div>;\n}\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Composition pattern in React\"}),`\n`,(0,e.jsx)(n.h3,{children:\"What is composition?\"}),`\n`,(0,e.jsx)(n.p,{children:\"Composition is a design principle that involves combining smaller, reusable components to build more complex components. In React, this is preferred over inheritance for creating complex UIs.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"How to use composition in React\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Passing components as children\"}),`\n`,(0,e.jsx)(n.p,{children:\"One common way to use composition is by passing components as children to other components. This allows you to nest components and create a hierarchy.\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function Dialog(props) {\n  return <div className=\"dialog\">{props.children}</div>;\n}\n\nfunction WelcomeDialog() {\n  return (\n    <Dialog>\n      <h1>Welcome</h1>\n      <p>Thank you for visiting our spacecraft!</p>\n    </Dialog>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"Passing components as props\"}),`\n`,(0,e.jsx)(n.p,{children:\"Another way to achieve composition is by passing components as props. This allows for more flexibility and customization.\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function SplitPane(props) {\n  return (\n    <div className=\"split-pane\">\n      <div className=\"split-pane-left\">{props.left}</div>\n      <div className=\"split-pane-right\">{props.right}</div>\n    </div>\n  );\n}\n\nfunction App() {\n  return <SplitPane left={<Contacts />} right={<Chat />} />;\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Benefits of composition\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Reusability\"}),\": Smaller components can be reused across different parts of the application.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Maintainability\"}),\": Easier to manage and update smaller components.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Flexibility\"}),\": Components can be easily combined in different ways to create complex UIs.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"When to use composition\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"When you need to create complex UIs from smaller, reusable components.\"}),`\n`,(0,e.jsx)(n.li,{children:\"When you want to avoid the pitfalls of inheritance, such as tight coupling and difficulty in managing state.\"}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://krasimir.gitbooks.io/react-in-patterns/content/chapter-04/\",children:\"Composition in React\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0\",children:\"Medium article on React composition\"})}),`\n`]})]})}function D(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,Object.assign({},i,{children:(0,e.jsx)(p,i)})):p(i)}var j=D;return y(R);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),b=(i,n)=>{for(var o in n)a(i,o,{get:n[o],enumerable:!0})},s=(i,n,o,r)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of u(n))!f.call(i,t)&&t!==o&&a(i,t,{get:()=>n[t],enumerable:!(r=m(n,t))||r.enumerable});return i};var y=(i,n,o)=>(o=i!=null?d(g(i)):{},s(n||!i||!i.__esModule?a(o,\"default\",{value:i,enumerable:!0}):o,i)),v=i=>s(a({},\"__esModule\",{value:!0}),i);var l=x((j,c)=>{c.exports=_jsx_runtime});var R={};b(R,{default:()=>h,frontmatter:()=>D});var e=y(l()),D={title:\"Explain the composition pattern in React\"};function p(i){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"The composition pattern in React is a way to build components by combining smaller, reusable components. Instead of using inheritance, React encourages composition to create complex UIs. You can pass components as children or props to other components to achieve this. For example:\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function WelcomeDialog() {\n  return (\n    <Dialog>\n      <h1>Welcome</h1>\n      <p>Thank you for visiting our spacecraft!</p>\n    </Dialog>\n  );\n}\n\nfunction Dialog(props) {\n  return <div className=\"dialog\">{props.children}</div>;\n}\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Composition pattern in React\"}),`\n`,(0,e.jsx)(n.h3,{children:\"What is composition?\"}),`\n`,(0,e.jsx)(n.p,{children:\"Composition is a design principle that involves combining smaller, reusable components to build more complex components. In React, this is preferred over inheritance for creating complex UIs.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"How to use composition in React\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Passing components as children\"}),`\n`,(0,e.jsx)(n.p,{children:\"One common way to use composition is by passing components as children to other components. This allows you to nest components and create a hierarchy.\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function Dialog(props) {\n  return <div className=\"dialog\">{props.children}</div>;\n}\n\nfunction WelcomeDialog() {\n  return (\n    <Dialog>\n      <h1>Welcome</h1>\n      <p>Thank you for visiting our spacecraft!</p>\n    </Dialog>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"Passing components as props\"}),`\n`,(0,e.jsx)(n.p,{children:\"Another way to achieve composition is by passing components as props. This allows for more flexibility and customization.\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function SplitPane(props) {\n  return (\n    <div className=\"split-pane\">\n      <div className=\"split-pane-left\">{props.left}</div>\n      <div className=\"split-pane-right\">{props.right}</div>\n    </div>\n  );\n}\n\nfunction App() {\n  return <SplitPane left={<Contacts />} right={<Chat />} />;\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Benefits of composition\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Reusability\"}),\": Smaller components can be reused across different parts of the application.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Maintainability\"}),\": Easier to manage and update smaller components.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Flexibility\"}),\": Components can be easily combined in different ways to create complex UIs.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"When to use composition\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"When you need to create complex UIs from smaller, reusable components.\"}),`\n`,(0,e.jsx)(n.li,{children:\"When you want to avoid the pitfalls of inheritance, such as tight coupling and difficulty in managing state.\"}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://krasimir.gitbooks.io/react-in-patterns/content/chapter-04/\",children:\"Composition in React\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0\",children:\"Medium article on React composition\"})}),`\n`]})]})}function h(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,{...i,children:(0,e.jsx)(p,{...i})}):p(i)}return v(R);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-composition-pattern-in-react/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-composition-pattern-in-react/zh-CN.json
index 988971c75..8db855ea1 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-composition-pattern-in-react/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-composition-pattern-in-react/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/explain-the-composition-pattern-in-react/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),v=(r,n)=>{for(var i in n)l(r,i,{get:n[i],enumerable:!0})},a=(r,n,i,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of u(n))!m.call(r,c)&&c!==i&&l(r,c,{get:()=>n[c],enumerable:!(t=p(n,c))||t.enumerable});return r};var x=(r,n,i)=>(i=r!=null?d(g(r)):{},a(n||!r||!r.__esModule?l(i,\"default\",{value:r,enumerable:!0}):i,r)),D=r=>a(l({},\"__esModule\",{value:!0}),r);var h=f((k,o)=>{o.exports=_jsx_runtime});var _={};v(_,{default:()=>N,frontmatter:()=>j});var e=x(h()),j={title:\"\\u89E3\\u91CA React \\u4E2D\\u7684\\u7EC4\\u5408\\u6A21\\u5F0F\"};function s(r){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u4E2D\\u7684\\u7EC4\\u5408\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u901A\\u8FC7\\u7EC4\\u5408\\u66F4\\u5C0F\\u3001\\u53EF\\u590D\\u7528\\u7684\\u7EC4\\u4EF6\\u6765\\u6784\\u5EFA\\u7EC4\\u4EF6\\u7684\\u65B9\\u5F0F\\u3002React \\u9F13\\u52B1\\u4F7F\\u7528\\u7EC4\\u5408\\u6765\\u521B\\u5EFA\\u590D\\u6742\\u7684 UI\\uFF0C\\u800C\\u4E0D\\u662F\\u4F7F\\u7528\\u7EE7\\u627F\\u3002\\u4F60\\u53EF\\u4EE5\\u5C06\\u7EC4\\u4EF6\\u4F5C\\u4E3A\\u5B50\\u7EC4\\u4EF6\\u6216 props \\u4F20\\u9012\\u7ED9\\u5176\\u4ED6\\u7EC4\\u4EF6\\u6765\\u5B9E\\u73B0\\u8FD9\\u4E00\\u70B9\\u3002\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function WelcomeDialog() {\n  return (\n    <Dialog>\n      <h1>Welcome</h1>\n      <p>Thank you for visiting our spacecraft!</p>\n    </Dialog>\n  );\n}\n\nfunction Dialog(props) {\n  return <div className=\"dialog\">{props.children}</div>;\n}\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u4E2D\\u7684\\u7EC4\\u5408\\u6A21\\u5F0F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EC0\\u4E48\\u662F\\u7EC4\\u5408\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7EC4\\u5408\\u662F\\u4E00\\u79CD\\u8BBE\\u8BA1\\u539F\\u5219\\uFF0C\\u5B83\\u6D89\\u53CA\\u7EC4\\u5408\\u66F4\\u5C0F\\u3001\\u53EF\\u590D\\u7528\\u7684\\u7EC4\\u4EF6\\u6765\\u6784\\u5EFA\\u66F4\\u590D\\u6742\\u7684\\u7EC4\\u4EF6\\u3002\\u5728 React \\u4E2D\\uFF0C\\u8FD9\\u6BD4\\u7EE7\\u627F\\u66F4\\u9002\\u5408\\u521B\\u5EFA\\u590D\\u6742\\u7684 UI\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5982\\u4F55\\u5728 React \\u4E2D\\u4F7F\\u7528\\u7EC4\\u5408\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5C06\\u7EC4\\u4EF6\\u4F5C\\u4E3A\\u5B50\\u7EC4\\u4EF6\\u4F20\\u9012\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528\\u7EC4\\u5408\\u7684\\u4E00\\u79CD\\u5E38\\u89C1\\u65B9\\u6CD5\\u662F\\u5C06\\u7EC4\\u4EF6\\u4F5C\\u4E3A\\u5B50\\u7EC4\\u4EF6\\u4F20\\u9012\\u7ED9\\u5176\\u4ED6\\u7EC4\\u4EF6\\u3002\\u8FD9\\u5141\\u8BB8\\u4F60\\u5D4C\\u5957\\u7EC4\\u4EF6\\u5E76\\u521B\\u5EFA\\u4E00\\u4E2A\\u5C42\\u6B21\\u7ED3\\u6784\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function Dialog(props) {\n  return <div className=\"dialog\">{props.children}</div>;\n}\n\nfunction WelcomeDialog() {\n  return (\n    <Dialog>\n      <h1>Welcome</h1>\n      <p>Thank you for visiting our spacecraft!</p>\n    </Dialog>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5C06\\u7EC4\\u4EF6\\u4F5C\\u4E3A props \\u4F20\\u9012\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5B9E\\u73B0\\u7EC4\\u5408\\u7684\\u53E6\\u4E00\\u79CD\\u65B9\\u6CD5\\u662F\\u5C06\\u7EC4\\u4EF6\\u4F5C\\u4E3A props \\u4F20\\u9012\\u3002\\u8FD9\\u5141\\u8BB8\\u66F4\\u5927\\u7684\\u7075\\u6D3B\\u6027\\u548C\\u81EA\\u5B9A\\u4E49\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function SplitPane(props) {\n  return (\n    <div className=\"split-pane\">\n      <div className=\"split-pane-left\">{props.left}</div>\n      <div className=\"split-pane-right\">{props.right}</div>\n    </div>\n  );\n}\n\nfunction App() {\n  return <SplitPane left={<Contacts />} right={<Chat />} />;\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7EC4\\u5408\\u7684\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u91CD\\u7528\\u6027\"}),\"\\uFF1A\\u8F83\\u5C0F\\u7684\\u7EC4\\u4EF6\\u53EF\\u4EE5\\u5728\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4E0D\\u540C\\u90E8\\u5206\\u91CD\\u590D\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u7EF4\\u62A4\\u6027\"}),\"\\uFF1A\\u66F4\\u5BB9\\u6613\\u7BA1\\u7406\\u548C\\u66F4\\u65B0\\u8F83\\u5C0F\\u7684\\u7EC4\\u4EF6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7075\\u6D3B\\u6027\"}),\"\\uFF1A\\u7EC4\\u4EF6\\u53EF\\u4EE5\\u4EE5\\u4E0D\\u540C\\u7684\\u65B9\\u5F0F\\u8F7B\\u677E\\u7EC4\\u5408\\uFF0C\\u4EE5\\u521B\\u5EFA\\u590D\\u6742\\u7684 UI\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\u7EC4\\u5408\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u4F60\\u9700\\u8981\\u4ECE\\u66F4\\u5C0F\\u3001\\u53EF\\u91CD\\u7528\\u7684\\u7EC4\\u4EF6\\u521B\\u5EFA\\u590D\\u6742\\u7684 UI \\u65F6\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u4F60\\u60F3\\u907F\\u514D\\u7EE7\\u627F\\u7684\\u7F3A\\u9677\\u65F6\\uFF0C\\u4F8B\\u5982\\u7D27\\u5BC6\\u8026\\u5408\\u548C\\u96BE\\u4EE5\\u7BA1\\u7406\\u72B6\\u6001\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://krasimir.gitbooks.io/react-in-patterns/content/chapter-04/\",children:\"React \\u4E2D\\u7684\\u7EC4\\u5408\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0\",children:\"\\u5173\\u4E8E React \\u7EC4\\u5408\\u7684 Medium \\u6587\\u7AE0\"})}),`\n`]})]})}function R(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(s,r)})):s(r)}var N=R;return D(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),x=(r,n)=>{for(var i in n)l(r,i,{get:n[i],enumerable:!0})},a=(r,n,i,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of m(n))!f.call(r,c)&&c!==i&&l(r,c,{get:()=>n[c],enumerable:!(t=u(n,c))||t.enumerable});return r};var D=(r,n,i)=>(i=r!=null?p(g(r)):{},a(n||!r||!r.__esModule?l(i,\"default\",{value:r,enumerable:!0}):i,r)),R=r=>a(l({},\"__esModule\",{value:!0}),r);var h=v((k,o)=>{o.exports=_jsx_runtime});var N={};x(N,{default:()=>s,frontmatter:()=>j});var e=D(h()),j={title:\"\\u89E3\\u91CA React \\u4E2D\\u7684\\u7EC4\\u5408\\u6A21\\u5F0F\"};function d(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u4E2D\\u7684\\u7EC4\\u5408\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u901A\\u8FC7\\u7EC4\\u5408\\u66F4\\u5C0F\\u3001\\u53EF\\u590D\\u7528\\u7684\\u7EC4\\u4EF6\\u6765\\u6784\\u5EFA\\u7EC4\\u4EF6\\u7684\\u65B9\\u5F0F\\u3002React \\u9F13\\u52B1\\u4F7F\\u7528\\u7EC4\\u5408\\u6765\\u521B\\u5EFA\\u590D\\u6742\\u7684 UI\\uFF0C\\u800C\\u4E0D\\u662F\\u4F7F\\u7528\\u7EE7\\u627F\\u3002\\u4F60\\u53EF\\u4EE5\\u5C06\\u7EC4\\u4EF6\\u4F5C\\u4E3A\\u5B50\\u7EC4\\u4EF6\\u6216 props \\u4F20\\u9012\\u7ED9\\u5176\\u4ED6\\u7EC4\\u4EF6\\u6765\\u5B9E\\u73B0\\u8FD9\\u4E00\\u70B9\\u3002\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function WelcomeDialog() {\n  return (\n    <Dialog>\n      <h1>Welcome</h1>\n      <p>Thank you for visiting our spacecraft!</p>\n    </Dialog>\n  );\n}\n\nfunction Dialog(props) {\n  return <div className=\"dialog\">{props.children}</div>;\n}\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u4E2D\\u7684\\u7EC4\\u5408\\u6A21\\u5F0F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EC0\\u4E48\\u662F\\u7EC4\\u5408\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7EC4\\u5408\\u662F\\u4E00\\u79CD\\u8BBE\\u8BA1\\u539F\\u5219\\uFF0C\\u5B83\\u6D89\\u53CA\\u7EC4\\u5408\\u66F4\\u5C0F\\u3001\\u53EF\\u590D\\u7528\\u7684\\u7EC4\\u4EF6\\u6765\\u6784\\u5EFA\\u66F4\\u590D\\u6742\\u7684\\u7EC4\\u4EF6\\u3002\\u5728 React \\u4E2D\\uFF0C\\u8FD9\\u6BD4\\u7EE7\\u627F\\u66F4\\u9002\\u5408\\u521B\\u5EFA\\u590D\\u6742\\u7684 UI\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5982\\u4F55\\u5728 React \\u4E2D\\u4F7F\\u7528\\u7EC4\\u5408\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5C06\\u7EC4\\u4EF6\\u4F5C\\u4E3A\\u5B50\\u7EC4\\u4EF6\\u4F20\\u9012\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528\\u7EC4\\u5408\\u7684\\u4E00\\u79CD\\u5E38\\u89C1\\u65B9\\u6CD5\\u662F\\u5C06\\u7EC4\\u4EF6\\u4F5C\\u4E3A\\u5B50\\u7EC4\\u4EF6\\u4F20\\u9012\\u7ED9\\u5176\\u4ED6\\u7EC4\\u4EF6\\u3002\\u8FD9\\u5141\\u8BB8\\u4F60\\u5D4C\\u5957\\u7EC4\\u4EF6\\u5E76\\u521B\\u5EFA\\u4E00\\u4E2A\\u5C42\\u6B21\\u7ED3\\u6784\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function Dialog(props) {\n  return <div className=\"dialog\">{props.children}</div>;\n}\n\nfunction WelcomeDialog() {\n  return (\n    <Dialog>\n      <h1>Welcome</h1>\n      <p>Thank you for visiting our spacecraft!</p>\n    </Dialog>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5C06\\u7EC4\\u4EF6\\u4F5C\\u4E3A props \\u4F20\\u9012\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5B9E\\u73B0\\u7EC4\\u5408\\u7684\\u53E6\\u4E00\\u79CD\\u65B9\\u6CD5\\u662F\\u5C06\\u7EC4\\u4EF6\\u4F5C\\u4E3A props \\u4F20\\u9012\\u3002\\u8FD9\\u5141\\u8BB8\\u66F4\\u5927\\u7684\\u7075\\u6D3B\\u6027\\u548C\\u81EA\\u5B9A\\u4E49\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function SplitPane(props) {\n  return (\n    <div className=\"split-pane\">\n      <div className=\"split-pane-left\">{props.left}</div>\n      <div className=\"split-pane-right\">{props.right}</div>\n    </div>\n  );\n}\n\nfunction App() {\n  return <SplitPane left={<Contacts />} right={<Chat />} />;\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7EC4\\u5408\\u7684\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u91CD\\u7528\\u6027\"}),\"\\uFF1A\\u8F83\\u5C0F\\u7684\\u7EC4\\u4EF6\\u53EF\\u4EE5\\u5728\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4E0D\\u540C\\u90E8\\u5206\\u91CD\\u590D\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u7EF4\\u62A4\\u6027\"}),\"\\uFF1A\\u66F4\\u5BB9\\u6613\\u7BA1\\u7406\\u548C\\u66F4\\u65B0\\u8F83\\u5C0F\\u7684\\u7EC4\\u4EF6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7075\\u6D3B\\u6027\"}),\"\\uFF1A\\u7EC4\\u4EF6\\u53EF\\u4EE5\\u4EE5\\u4E0D\\u540C\\u7684\\u65B9\\u5F0F\\u8F7B\\u677E\\u7EC4\\u5408\\uFF0C\\u4EE5\\u521B\\u5EFA\\u590D\\u6742\\u7684 UI\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\u7EC4\\u5408\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u4F60\\u9700\\u8981\\u4ECE\\u66F4\\u5C0F\\u3001\\u53EF\\u91CD\\u7528\\u7684\\u7EC4\\u4EF6\\u521B\\u5EFA\\u590D\\u6742\\u7684 UI \\u65F6\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u4F60\\u60F3\\u907F\\u514D\\u7EE7\\u627F\\u7684\\u7F3A\\u9677\\u65F6\\uFF0C\\u4F8B\\u5982\\u7D27\\u5BC6\\u8026\\u5408\\u548C\\u96BE\\u4EE5\\u7BA1\\u7406\\u72B6\\u6001\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://krasimir.gitbooks.io/react-in-patterns/content/chapter-04/\",children:\"React \\u4E2D\\u7684\\u7EC4\\u5408\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0\",children:\"\\u5173\\u4E8E React \\u7EC4\\u5408\\u7684 Medium \\u6587\\u7AE0\"})}),`\n`]})]})}function s(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(d,{...r})}):d(r)}return R(N);})();\n;return Component;"
 }
\ No newline at end of file
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 d36465d5f..765ecd790 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var p=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),k=(a,n)=>{for(var o in n)c(a,o,{get:n[o],enumerable:!0})},l=(a,n,o,r)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of g(n))!m.call(a,t)&&t!==o&&c(a,t,{get:()=>n[t],enumerable:!(r=u(n,t))||r.enumerable});return a};var b=(a,n,o)=>(o=a!=null?d(f(a)):{},l(n||!a||!a.__esModule?c(o,\"default\",{value:a,enumerable:!0}):o,a)),y=a=>l(c({},\"__esModule\",{value:!0}),a);var s=p((A,i)=>{i.exports=_jsx_runtime});var v={};k(v,{default:()=>w,frontmatter:()=>x});var e=b(s()),x={title:\"Explain the concept of a callback function in asynchronous operations\"};function h(a){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},a.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"A callback function is a function passed as an argument to another function, which is then invoked inside the outer function to complete some kind of routine or action. In asynchronous operations, callbacks are used to handle tasks that take time to complete, such as network requests or file I/O, without blocking the execution of the rest of the code. For example:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fetchData(callback) {\n  setTimeout(() => {\n    const data = { name: 'John', age: 30 };\n    callback(data);\n  }, 1000);\n}\n\nfetchData((data) => {\n  console.log(data);\n});\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"What is a callback function?\"}),`\n`,(0,e.jsx)(n.p,{children:\"A callback function is a function that is passed as an argument to another function and is executed after some operation has been completed. This is particularly useful in asynchronous programming, where operations like network requests, file I/O, or timers need to be handled without blocking the main execution thread.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Synchronous vs. asynchronous callbacks\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Synchronous callbacks\"}),\" are executed immediately within the function they are passed to. They are blocking and the code execution waits for them to complete.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Asynchronous callbacks\"}),\" are executed after a certain event or operation has been completed. They are non-blocking and allow the code execution to continue while waiting for the operation to finish.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Example of a synchronous callback\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet(name, callback) {\n  console.log('Hello ' + name);\n  callback();\n}\n\nfunction sayGoodbye() {\n  console.log('Goodbye!');\n}\n\ngreet('Alice', sayGoodbye);\n// Output:\n// Hello Alice\n// Goodbye!\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Example of an asynchronous callback\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fetchData(callback) {\n  setTimeout(() => {\n    const data = { name: 'John', age: 30 };\n    callback(data);\n  }, 1000);\n}\n\nfetchData((data) => {\n  console.log(data);\n});\n// Output after 1 second:\n// { name: 'John', age: 30 }\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Common use cases\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Network requests\"}),\": Fetching data from an API\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"File I/O\"}),\": Reading or writing files\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Timers\"}),\": Delaying execution using \",(0,e.jsx)(n.code,{children:\"setTimeout\"}),\" or \",(0,e.jsx)(n.code,{children:\"setInterval\"})]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Event handling\"}),\": Responding to user actions like clicks or key presses\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Handling errors in callbacks\"}),`\n`,(0,e.jsx)(n.p,{children:\"When dealing with asynchronous operations, it's important to handle errors properly. A common pattern is to use the first argument of the callback function to pass an error object, if any.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fetchData(callback) {\n  // assume asynchronous operation to fetch data\n  const { data, error } = { data: { name: 'John', age: 30 }, error: null };\n  callback(error, data);\n}\n\nfetchData((error, data) => {\n  if (error) {\n    console.error('An error occurred:', error);\n  } else {\n    console.log(data);\n  }\n});\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Callback_function\",children:\"MDN Web Docs: Callback function\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/callbacks\",children:\"JavaScript.info: Callbacks\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://nodejs.org/en/learn/asynchronous-work/javascript-asynchronous-programming-and-callbacks\",children:\"Node.js: Asynchronous programming and callbacks\"})}),`\n`]})]})}function j(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(h,a)})):h(a)}var w=j;return y(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var k=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),b=(a,n)=>{for(var o in n)r(a,o,{get:n[o],enumerable:!0})},l=(a,n,o,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of m(n))!p.call(a,t)&&t!==o&&r(a,t,{get:()=>n[t],enumerable:!(c=f(n,t))||c.enumerable});return a};var y=(a,n,o)=>(o=a!=null?u(g(a)):{},l(n||!a||!a.__esModule?r(o,\"default\",{value:a,enumerable:!0}):o,a)),x=a=>l(r({},\"__esModule\",{value:!0}),a);var s=k((D,i)=>{i.exports=_jsx_runtime});var j={};b(j,{default:()=>d,frontmatter:()=>w});var e=y(s()),w={title:\"Explain the concept of a callback function in asynchronous operations\"};function h(a){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...a.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"A callback function is a function passed as an argument to another function, which is then invoked inside the outer function to complete some kind of routine or action. In asynchronous operations, callbacks are used to handle tasks that take time to complete, such as network requests or file I/O, without blocking the execution of the rest of the code. For example:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fetchData(callback) {\n  setTimeout(() => {\n    const data = { name: 'John', age: 30 };\n    callback(data);\n  }, 1000);\n}\n\nfetchData((data) => {\n  console.log(data);\n});\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"What is a callback function?\"}),`\n`,(0,e.jsx)(n.p,{children:\"A callback function is a function that is passed as an argument to another function and is executed after some operation has been completed. This is particularly useful in asynchronous programming, where operations like network requests, file I/O, or timers need to be handled without blocking the main execution thread.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Synchronous vs. asynchronous callbacks\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Synchronous callbacks\"}),\" are executed immediately within the function they are passed to. They are blocking and the code execution waits for them to complete.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Asynchronous callbacks\"}),\" are executed after a certain event or operation has been completed. They are non-blocking and allow the code execution to continue while waiting for the operation to finish.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Example of a synchronous callback\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet(name, callback) {\n  console.log('Hello ' + name);\n  callback();\n}\n\nfunction sayGoodbye() {\n  console.log('Goodbye!');\n}\n\ngreet('Alice', sayGoodbye);\n// Output:\n// Hello Alice\n// Goodbye!\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Example of an asynchronous callback\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fetchData(callback) {\n  setTimeout(() => {\n    const data = { name: 'John', age: 30 };\n    callback(data);\n  }, 1000);\n}\n\nfetchData((data) => {\n  console.log(data);\n});\n// Output after 1 second:\n// { name: 'John', age: 30 }\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Common use cases\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Network requests\"}),\": Fetching data from an API\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"File I/O\"}),\": Reading or writing files\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Timers\"}),\": Delaying execution using \",(0,e.jsx)(n.code,{children:\"setTimeout\"}),\" or \",(0,e.jsx)(n.code,{children:\"setInterval\"})]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Event handling\"}),\": Responding to user actions like clicks or key presses\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Handling errors in callbacks\"}),`\n`,(0,e.jsx)(n.p,{children:\"When dealing with asynchronous operations, it's important to handle errors properly. A common pattern is to use the first argument of the callback function to pass an error object, if any.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fetchData(callback) {\n  // assume asynchronous operation to fetch data\n  const { data, error } = { data: { name: 'John', age: 30 }, error: null };\n  callback(error, data);\n}\n\nfetchData((error, data) => {\n  if (error) {\n    console.error('An error occurred:', error);\n  } else {\n    console.log(data);\n  }\n});\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Callback_function\",children:\"MDN Web Docs: Callback function\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/callbacks\",children:\"JavaScript.info: Callbacks\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://nodejs.org/en/learn/asynchronous-work/javascript-asynchronous-programming-and-callbacks\",children:\"Node.js: Asynchronous programming and callbacks\"})}),`\n`]})]})}function d(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,{...a,children:(0,e.jsx)(h,{...a})}):h(a)}return x(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-a-callback-function-in-asynchronous-operations/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-a-callback-function-in-asynchronous-operations/zh-CN.json
index ea76ef79a..9d8103e5f 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-a-callback-function-in-asynchronous-operations/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-a-callback-function-in-asynchronous-operations/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var p=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),b=(a,n)=>{for(var r in n)l(a,r,{get:n[r],enumerable:!0})},t=(a,n,r,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of g(n))!f.call(a,c)&&c!==r&&l(a,c,{get:()=>n[c],enumerable:!(o=u(n,c))||o.enumerable});return a};var j=(a,n,r)=>(r=a!=null?s(m(a)):{},t(n||!a||!a.__esModule?l(r,\"default\",{value:a,enumerable:!0}):r,a)),k=a=>t(l({},\"__esModule\",{value:!0}),a);var d=p((O,i)=>{i.exports=_jsx_runtime});var x={};b(x,{default:()=>v,frontmatter:()=>y});var e=j(d()),y={title:\"\\u89E3\\u91CA\\u5F02\\u6B65\\u64CD\\u4F5C\\u4E2D\\u56DE\\u8C03\\u51FD\\u6570\\u7684\\u6982\\u5FF5\"};function h(a){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},a.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u56DE\\u8C03\\u51FD\\u6570\\u662F\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u7684\\u51FD\\u6570\\uFF0C\\u7136\\u540E\\u5728\\u5916\\u90E8\\u51FD\\u6570\\u4E2D\\u8C03\\u7528\\u8BE5\\u51FD\\u6570\\u4EE5\\u5B8C\\u6210\\u67D0\\u79CD\\u4F8B\\u7A0B\\u6216\\u64CD\\u4F5C\\u3002\\u5728\\u5F02\\u6B65\\u64CD\\u4F5C\\u4E2D\\uFF0C\\u56DE\\u8C03\\u7528\\u4E8E\\u5904\\u7406\\u9700\\u8981\\u65F6\\u95F4\\u624D\\u80FD\\u5B8C\\u6210\\u7684\\u4EFB\\u52A1\\uFF0C\\u4F8B\\u5982\\u7F51\\u7EDC\\u8BF7\\u6C42\\u6216\\u6587\\u4EF6 I/O\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u585E\\u5176\\u4F59\\u4EE3\\u7801\\u7684\\u6267\\u884C\\u3002\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fetchData(callback) {\n  setTimeout(() => {\n    const data = { name: 'John', age: 30 };\n    callback(data);\n  }, 1000);\n}\n\nfetchData((data) => {\n  console.log(data);\n});\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u56DE\\u8C03\\u51FD\\u6570\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u56DE\\u8C03\\u51FD\\u6570\\u662F\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u5E76\\u5728\\u5B8C\\u6210\\u67D0\\u4E9B\\u64CD\\u4F5C\\u540E\\u6267\\u884C\\u7684\\u51FD\\u6570\\u3002\\u8FD9\\u5728\\u5F02\\u6B65\\u7F16\\u7A0B\\u4E2D\\u7279\\u522B\\u6709\\u7528\\uFF0C\\u5176\\u4E2D\\u9700\\u8981\\u5904\\u7406\\u7F51\\u7EDC\\u8BF7\\u6C42\\u3001\\u6587\\u4EF6 I/O \\u6216\\u8BA1\\u65F6\\u5668\\u7B49\\u64CD\\u4F5C\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u585E\\u4E3B\\u6267\\u884C\\u7EBF\\u7A0B\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u540C\\u6B65\\u4E0E\\u5F02\\u6B65\\u56DE\\u8C03\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u540C\\u6B65\\u56DE\\u8C03\"}),\" \\u5728\\u4F20\\u9012\\u7ED9\\u5B83\\u4EEC\\u7684\\u51FD\\u6570\\u4E2D\\u7ACB\\u5373\\u6267\\u884C\\u3002\\u5B83\\u4EEC\\u662F\\u963B\\u585E\\u7684\\uFF0C\\u4EE3\\u7801\\u6267\\u884C\\u4F1A\\u7B49\\u5F85\\u5B83\\u4EEC\\u5B8C\\u6210\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5F02\\u6B65\\u56DE\\u8C03\"}),\" \\u5728\\u5B8C\\u6210\\u67D0\\u4E2A\\u4E8B\\u4EF6\\u6216\\u64CD\\u4F5C\\u540E\\u6267\\u884C\\u3002\\u5B83\\u4EEC\\u662F\\u975E\\u963B\\u585E\\u7684\\uFF0C\\u5141\\u8BB8\\u4EE3\\u7801\\u6267\\u884C\\u5728\\u7B49\\u5F85\\u64CD\\u4F5C\\u5B8C\\u6210\\u7684\\u540C\\u65F6\\u7EE7\\u7EED\\u8FDB\\u884C\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u540C\\u6B65\\u56DE\\u8C03\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet(name, callback) {\n  console.log('Hello ' + name);\n  callback();\n}\n\nfunction sayGoodbye() {\n  console.log('Goodbye!');\n}\n\ngreet('Alice', sayGoodbye);\n// Output:\n// Hello Alice\n// Goodbye!\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5F02\\u6B65\\u56DE\\u8C03\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fetchData(callback) {\n  setTimeout(() => {\n    const data = { name: 'John', age: 30 };\n    callback(data);\n  }, 1000);\n}\n\nfetchData((data) => {\n  console.log(data);\n});\n// Output after 1 second:\n// { name: 'John', age: 30 }\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5E38\\u89C1\\u7528\\u4F8B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7F51\\u7EDC\\u8BF7\\u6C42\"}),\"\\uFF1A\\u4ECE API \\u83B7\\u53D6\\u6570\\u636E\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6587\\u4EF6 I/O\"}),\"\\uFF1A\\u8BFB\\u53D6\\u6216\\u5199\\u5165\\u6587\\u4EF6\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8BA1\\u65F6\\u5668\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"setTimeout\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"setInterval\"}),\" \\u5EF6\\u8FDF\\u6267\\u884C\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E8B\\u4EF6\\u5904\\u7406\"}),\"\\uFF1A\\u54CD\\u5E94\\u7528\\u6237\\u64CD\\u4F5C\\uFF0C\\u5982\\u5355\\u51FB\\u6216\\u6309\\u952E\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u56DE\\u8C03\\u4E2D\\u5904\\u7406\\u9519\\u8BEF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5904\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u65F6\\uFF0C\\u6B63\\u786E\\u5904\\u7406\\u9519\\u8BEF\\u975E\\u5E38\\u91CD\\u8981\\u3002\\u4E00\\u4E2A\\u5E38\\u89C1\\u7684\\u6A21\\u5F0F\\u662F\\u4F7F\\u7528\\u56DE\\u8C03\\u51FD\\u6570\\u7684\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u6765\\u4F20\\u9012\\u4E00\\u4E2A\\u9519\\u8BEF\\u5BF9\\u8C61\\uFF08\\u5982\\u679C\\u6709\\uFF09\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fetchData(callback) {\n  // assume asynchronous operation to fetch data\n  const { data, error } = { data: { name: 'John', age: 30 }, error: null };\n  callback(error, data);\n}\n\nfetchData((error, data) => {\n  if (error) {\n    console.error('An error occurred:', error);\n  } else {\n    console.log(data);\n  }\n});\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Callback_function\",children:\"MDN Web Docs: Callback function\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/callbacks\",children:\"JavaScript.info: Callbacks\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://nodejs.org/en/learn/asynchronous-work/javascript-asynchronous-programming-and-callbacks\",children:\"Node.js: Asynchronous programming and callbacks\"})}),`\n`]})]})}function D(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(h,a)})):h(a)}var v=D;return k(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var b=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),k=(a,n)=>{for(var r in n)c(a,r,{get:n[r],enumerable:!0})},t=(a,n,r,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of m(n))!p.call(a,l)&&l!==r&&c(a,l,{get:()=>n[l],enumerable:!(o=g(n,l))||o.enumerable});return a};var j=(a,n,r)=>(r=a!=null?u(f(a)):{},t(n||!a||!a.__esModule?c(r,\"default\",{value:a,enumerable:!0}):r,a)),y=a=>t(c({},\"__esModule\",{value:!0}),a);var d=b((_,i)=>{i.exports=_jsx_runtime});var v={};k(v,{default:()=>s,frontmatter:()=>D});var e=j(d()),D={title:\"\\u89E3\\u91CA\\u5F02\\u6B65\\u64CD\\u4F5C\\u4E2D\\u56DE\\u8C03\\u51FD\\u6570\\u7684\\u6982\\u5FF5\"};function h(a){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...a.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u56DE\\u8C03\\u51FD\\u6570\\u662F\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u7684\\u51FD\\u6570\\uFF0C\\u7136\\u540E\\u5728\\u5916\\u90E8\\u51FD\\u6570\\u4E2D\\u8C03\\u7528\\u8BE5\\u51FD\\u6570\\u4EE5\\u5B8C\\u6210\\u67D0\\u79CD\\u4F8B\\u7A0B\\u6216\\u64CD\\u4F5C\\u3002\\u5728\\u5F02\\u6B65\\u64CD\\u4F5C\\u4E2D\\uFF0C\\u56DE\\u8C03\\u7528\\u4E8E\\u5904\\u7406\\u9700\\u8981\\u65F6\\u95F4\\u624D\\u80FD\\u5B8C\\u6210\\u7684\\u4EFB\\u52A1\\uFF0C\\u4F8B\\u5982\\u7F51\\u7EDC\\u8BF7\\u6C42\\u6216\\u6587\\u4EF6 I/O\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u585E\\u5176\\u4F59\\u4EE3\\u7801\\u7684\\u6267\\u884C\\u3002\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fetchData(callback) {\n  setTimeout(() => {\n    const data = { name: 'John', age: 30 };\n    callback(data);\n  }, 1000);\n}\n\nfetchData((data) => {\n  console.log(data);\n});\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u56DE\\u8C03\\u51FD\\u6570\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u56DE\\u8C03\\u51FD\\u6570\\u662F\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u5E76\\u5728\\u5B8C\\u6210\\u67D0\\u4E9B\\u64CD\\u4F5C\\u540E\\u6267\\u884C\\u7684\\u51FD\\u6570\\u3002\\u8FD9\\u5728\\u5F02\\u6B65\\u7F16\\u7A0B\\u4E2D\\u7279\\u522B\\u6709\\u7528\\uFF0C\\u5176\\u4E2D\\u9700\\u8981\\u5904\\u7406\\u7F51\\u7EDC\\u8BF7\\u6C42\\u3001\\u6587\\u4EF6 I/O \\u6216\\u8BA1\\u65F6\\u5668\\u7B49\\u64CD\\u4F5C\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u585E\\u4E3B\\u6267\\u884C\\u7EBF\\u7A0B\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u540C\\u6B65\\u4E0E\\u5F02\\u6B65\\u56DE\\u8C03\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u540C\\u6B65\\u56DE\\u8C03\"}),\" \\u5728\\u4F20\\u9012\\u7ED9\\u5B83\\u4EEC\\u7684\\u51FD\\u6570\\u4E2D\\u7ACB\\u5373\\u6267\\u884C\\u3002\\u5B83\\u4EEC\\u662F\\u963B\\u585E\\u7684\\uFF0C\\u4EE3\\u7801\\u6267\\u884C\\u4F1A\\u7B49\\u5F85\\u5B83\\u4EEC\\u5B8C\\u6210\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5F02\\u6B65\\u56DE\\u8C03\"}),\" \\u5728\\u5B8C\\u6210\\u67D0\\u4E2A\\u4E8B\\u4EF6\\u6216\\u64CD\\u4F5C\\u540E\\u6267\\u884C\\u3002\\u5B83\\u4EEC\\u662F\\u975E\\u963B\\u585E\\u7684\\uFF0C\\u5141\\u8BB8\\u4EE3\\u7801\\u6267\\u884C\\u5728\\u7B49\\u5F85\\u64CD\\u4F5C\\u5B8C\\u6210\\u7684\\u540C\\u65F6\\u7EE7\\u7EED\\u8FDB\\u884C\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u540C\\u6B65\\u56DE\\u8C03\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet(name, callback) {\n  console.log('Hello ' + name);\n  callback();\n}\n\nfunction sayGoodbye() {\n  console.log('Goodbye!');\n}\n\ngreet('Alice', sayGoodbye);\n// Output:\n// Hello Alice\n// Goodbye!\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5F02\\u6B65\\u56DE\\u8C03\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fetchData(callback) {\n  setTimeout(() => {\n    const data = { name: 'John', age: 30 };\n    callback(data);\n  }, 1000);\n}\n\nfetchData((data) => {\n  console.log(data);\n});\n// Output after 1 second:\n// { name: 'John', age: 30 }\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5E38\\u89C1\\u7528\\u4F8B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7F51\\u7EDC\\u8BF7\\u6C42\"}),\"\\uFF1A\\u4ECE API \\u83B7\\u53D6\\u6570\\u636E\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6587\\u4EF6 I/O\"}),\"\\uFF1A\\u8BFB\\u53D6\\u6216\\u5199\\u5165\\u6587\\u4EF6\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8BA1\\u65F6\\u5668\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"setTimeout\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"setInterval\"}),\" \\u5EF6\\u8FDF\\u6267\\u884C\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E8B\\u4EF6\\u5904\\u7406\"}),\"\\uFF1A\\u54CD\\u5E94\\u7528\\u6237\\u64CD\\u4F5C\\uFF0C\\u5982\\u5355\\u51FB\\u6216\\u6309\\u952E\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u56DE\\u8C03\\u4E2D\\u5904\\u7406\\u9519\\u8BEF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5904\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u65F6\\uFF0C\\u6B63\\u786E\\u5904\\u7406\\u9519\\u8BEF\\u975E\\u5E38\\u91CD\\u8981\\u3002\\u4E00\\u4E2A\\u5E38\\u89C1\\u7684\\u6A21\\u5F0F\\u662F\\u4F7F\\u7528\\u56DE\\u8C03\\u51FD\\u6570\\u7684\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u6765\\u4F20\\u9012\\u4E00\\u4E2A\\u9519\\u8BEF\\u5BF9\\u8C61\\uFF08\\u5982\\u679C\\u6709\\uFF09\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fetchData(callback) {\n  // assume asynchronous operation to fetch data\n  const { data, error } = { data: { name: 'John', age: 30 }, error: null };\n  callback(error, data);\n}\n\nfetchData((error, data) => {\n  if (error) {\n    console.error('An error occurred:', error);\n  } else {\n    console.log(data);\n  }\n});\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Callback_function\",children:\"MDN Web Docs: Callback function\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/callbacks\",children:\"JavaScript.info: Callbacks\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://nodejs.org/en/learn/asynchronous-work/javascript-asynchronous-programming-and-callbacks\",children:\"Node.js: Asynchronous programming and callbacks\"})}),`\n`]})]})}function s(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,{...a,children:(0,e.jsx)(h,{...a})}):h(a)}return y(v);})();\n;return Component;"
 }
\ No newline at end of file
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 5ebb3322f..a241b1192 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-a-microtask-queue/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var r in e)s(n,r,{get:e[r],enumerable:!0})},c=(n,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!k.call(n,o)&&o!==r&&s(n,o,{get:()=>e[o],enumerable:!(i=u(e,o))||i.enumerable});return n};var b=(n,e,r)=>(r=n!=null?d(p(n)):{},c(e||!n||!n.__esModule?s(r,\"default\",{value:n,enumerable:!0}):r,n)),x=n=>c(s({},\"__esModule\",{value:!0}),n);var l=g((S,a)=>{a.exports=_jsx_runtime});var y={};f(y,{default:()=>M,frontmatter:()=>v});var t=b(l()),v={title:\"Explain the concept of a microtask queue\"};function h(n){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",code:\"code\",ol:\"ol\",li:\"li\",strong:\"strong\",pre:\"pre\",ul:\"ul\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:\"The microtask queue is a queue of tasks that need to be executed after the currently executing script and before any other task. Microtasks are typically used for tasks that need to be executed immediately after the current operation, such as promise callbacks. The microtask queue is processed before the macrotask queue, ensuring that microtasks are executed as soon as possible.\"}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"The concept of a microtask queue\"}),`\n`,(0,t.jsx)(e.h3,{children:\"What is a microtask queue?\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The microtask queue is a part of the JavaScript event loop mechanism. It is a queue that holds tasks that need to be executed immediately after the currently executing script and before any other task in the macrotask queue. Microtasks are typically used for operations that need to be executed as soon as possible, such as promise callbacks and \",(0,t.jsx)(e.code,{children:\"MutationObserver\"}),\" callbacks.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"How does the microtask queue work?\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Execution order\"}),\": The microtask queue is processed after the currently executing script and before the macrotask queue. This means that microtasks are given higher priority over macrotasks.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Event loop\"}),\": During each iteration of the event loop, the JavaScript engine first processes all the microtasks in the microtask queue before moving on to the macrotask queue.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Adding microtasks\"}),\": Microtasks can be added to the microtask queue using methods like \",(0,t.jsx)(e.code,{children:\"Promise.resolve().then()\"}),\" and \",(0,t.jsx)(e.code,{children:\"queueMicrotask()\"}),\".\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,t.jsx)(e.p,{children:\"Here is an example to illustrate how the microtask queue works:\"}),`\n`,(0,t.jsx)(e.pre,{live:!0,children:(0,t.jsx)(e.code,{className:\"language-js\",children:`console.log('Script start');\n\nsetTimeout(() => {\n  console.log('setTimeout');\n}, 0);\n\nPromise.resolve()\n  .then(() => {\n    console.log('Promise 1');\n  })\n  .then(() => {\n    console.log('Promise 2');\n  });\n\nconsole.log('Script end');\n`})}),`\n`,(0,t.jsx)(e.p,{children:\"Output:\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{children:`Script start\nScript end\nPromise 1\nPromise 2\nsetTimeout\n`})}),`\n`,(0,t.jsx)(e.p,{children:\"In this example:\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[\"The synchronous code (\",(0,t.jsx)(e.code,{children:\"console.log('Script start')\"}),\" and \",(0,t.jsx)(e.code,{children:\"console.log('Script end')\"}),\") is executed first.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[\"The promise callbacks (\",(0,t.jsx)(e.code,{children:\"Promise 1\"}),\" and \",(0,t.jsx)(e.code,{children:\"Promise 2\"}),\") are added to the microtask queue and executed next.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[\"The \",(0,t.jsx)(e.code,{children:\"setTimeout\"}),\" callback is added to the macrotask queue and executed last.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Promise callbacks\"}),\": Microtasks are commonly used for promise callbacks to ensure they are executed as soon as possible after the current operation.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"MutationObserver\"}),\": The \",(0,t.jsx)(e.code,{children:\"MutationObserver\"}),\" API uses microtasks to notify changes in the DOM.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide\",children:\"MDN Web Docs: Microtask\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop\",children:\"JavaScript Event Loop Explained\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://javascript.info/microtask-queue\",children:\"Understanding the JavaScript Microtask Queue\"})}),`\n`]})]})}function q(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=q;return x(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var r in e)i(n,r,{get:e[r],enumerable:!0})},c=(n,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!g.call(n,o)&&o!==r&&i(n,o,{get:()=>e[o],enumerable:!(s=m(e,o))||s.enumerable});return n};var b=(n,e,r)=>(r=n!=null?u(k(n)):{},c(e||!n||!n.__esModule?i(r,\"default\",{value:n,enumerable:!0}):r,n)),v=n=>c(i({},\"__esModule\",{value:!0}),n);var l=f((T,a)=>{a.exports=_jsx_runtime});var M={};x(M,{default:()=>d,frontmatter:()=>q});var t=b(l()),q={title:\"Explain the concept of a microtask queue\"};function h(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:\"The microtask queue is a queue of tasks that need to be executed after the currently executing script and before any other task. Microtasks are typically used for tasks that need to be executed immediately after the current operation, such as promise callbacks. The microtask queue is processed before the macrotask queue, ensuring that microtasks are executed as soon as possible.\"}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"The concept of a microtask queue\"}),`\n`,(0,t.jsx)(e.h3,{children:\"What is a microtask queue?\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The microtask queue is a part of the JavaScript event loop mechanism. It is a queue that holds tasks that need to be executed immediately after the currently executing script and before any other task in the macrotask queue. Microtasks are typically used for operations that need to be executed as soon as possible, such as promise callbacks and \",(0,t.jsx)(e.code,{children:\"MutationObserver\"}),\" callbacks.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"How does the microtask queue work?\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Execution order\"}),\": The microtask queue is processed after the currently executing script and before the macrotask queue. This means that microtasks are given higher priority over macrotasks.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Event loop\"}),\": During each iteration of the event loop, the JavaScript engine first processes all the microtasks in the microtask queue before moving on to the macrotask queue.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Adding microtasks\"}),\": Microtasks can be added to the microtask queue using methods like \",(0,t.jsx)(e.code,{children:\"Promise.resolve().then()\"}),\" and \",(0,t.jsx)(e.code,{children:\"queueMicrotask()\"}),\".\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,t.jsx)(e.p,{children:\"Here is an example to illustrate how the microtask queue works:\"}),`\n`,(0,t.jsx)(e.pre,{live:!0,children:(0,t.jsx)(e.code,{className:\"language-js\",children:`console.log('Script start');\n\nsetTimeout(() => {\n  console.log('setTimeout');\n}, 0);\n\nPromise.resolve()\n  .then(() => {\n    console.log('Promise 1');\n  })\n  .then(() => {\n    console.log('Promise 2');\n  });\n\nconsole.log('Script end');\n`})}),`\n`,(0,t.jsx)(e.p,{children:\"Output:\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{children:`Script start\nScript end\nPromise 1\nPromise 2\nsetTimeout\n`})}),`\n`,(0,t.jsx)(e.p,{children:\"In this example:\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[\"The synchronous code (\",(0,t.jsx)(e.code,{children:\"console.log('Script start')\"}),\" and \",(0,t.jsx)(e.code,{children:\"console.log('Script end')\"}),\") is executed first.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[\"The promise callbacks (\",(0,t.jsx)(e.code,{children:\"Promise 1\"}),\" and \",(0,t.jsx)(e.code,{children:\"Promise 2\"}),\") are added to the microtask queue and executed next.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[\"The \",(0,t.jsx)(e.code,{children:\"setTimeout\"}),\" callback is added to the macrotask queue and executed last.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Promise callbacks\"}),\": Microtasks are commonly used for promise callbacks to ensure they are executed as soon as possible after the current operation.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"MutationObserver\"}),\": The \",(0,t.jsx)(e.code,{children:\"MutationObserver\"}),\" API uses microtasks to notify changes in the DOM.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide\",children:\"MDN Web Docs: Microtask\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop\",children:\"JavaScript Event Loop Explained\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://javascript.info/microtask-queue\",children:\"Understanding the JavaScript Microtask Queue\"})}),`\n`]})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(h,{...n})}):h(n)}return v(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-a-microtask-queue/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-a-microtask-queue/zh-CN.json
index 7c72be4ed..dc51679cd 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-a-microtask-queue/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-a-microtask-queue/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-a-microtask-queue/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),S=(r,e)=>{for(var i in e)l(r,i,{get:e[i],enumerable:!0})},t=(r,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!g.call(r,c)&&c!==i&&l(r,c,{get:()=>e[c],enumerable:!(o=p(e,c))||o.enumerable});return r};var M=(r,e,i)=>(i=r!=null?a(u(r)):{},t(e||!r||!r.__esModule?l(i,\"default\",{value:r,enumerable:!0}):i,r)),P=r=>t(l({},\"__esModule\",{value:!0}),r);var h=v((O,d)=>{d.exports=_jsx_runtime});var x={};S(x,{default:()=>j,frontmatter:()=>_});var n=M(h()),_={title:\"\\u89E3\\u91CA\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u7684\\u6982\\u5FF5\"};function s(r){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",code:\"code\",ol:\"ol\",li:\"li\",strong:\"strong\",pre:\"pre\",ul:\"ul\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u662F\\u4E00\\u4E2A\\u4EFB\\u52A1\\u961F\\u5217\\uFF0C\\u9700\\u8981\\u5728\\u5F53\\u524D\\u6267\\u884C\\u7684\\u811A\\u672C\\u4E4B\\u540E\\u548C\\u4EFB\\u4F55\\u5176\\u4ED6\\u4EFB\\u52A1\\u4E4B\\u524D\\u6267\\u884C\\u3002\\u5FAE\\u4EFB\\u52A1\\u901A\\u5E38\\u7528\\u4E8E\\u9700\\u8981\\u7D27\\u63A5\\u5728\\u5F53\\u524D\\u64CD\\u4F5C\\u4E4B\\u540E\\u6267\\u884C\\u7684\\u4EFB\\u52A1\\uFF0C\\u4F8B\\u5982 promise \\u56DE\\u8C03\\u3002\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u5728\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u4E4B\\u524D\\u5904\\u7406\\uFF0C\\u786E\\u4FDD\\u5FAE\\u4EFB\\u52A1\\u5C3D\\u5FEB\\u6267\\u884C\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u7684\\u6982\\u5FF5\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EC0\\u4E48\\u662F\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\uFF1F\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u662F JavaScript \\u4E8B\\u4EF6\\u5FAA\\u73AF\\u673A\\u5236\\u7684\\u4E00\\u90E8\\u5206\\u3002\\u5B83\\u662F\\u4E00\\u4E2A\\u961F\\u5217\\uFF0C\\u7528\\u4E8E\\u4FDD\\u5B58\\u9700\\u8981\\u5728\\u5F53\\u524D\\u6267\\u884C\\u7684\\u811A\\u672C\\u4E4B\\u540E\\u548C\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u4E2D\\u7684\\u4EFB\\u4F55\\u5176\\u4ED6\\u4EFB\\u52A1\\u4E4B\\u524D\\u6267\\u884C\\u7684\\u4EFB\\u52A1\\u3002\\u5FAE\\u4EFB\\u52A1\\u901A\\u5E38\\u7528\\u4E8E\\u9700\\u8981\\u5C3D\\u5FEB\\u6267\\u884C\\u7684\\u64CD\\u4F5C\\uFF0C\\u4F8B\\u5982 promise \\u56DE\\u8C03\\u548C \",(0,n.jsx)(e.code,{children:\"MutationObserver\"}),\" \\u56DE\\u8C03\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6267\\u884C\\u987A\\u5E8F\"}),\"\\uFF1A\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u5728\\u5F53\\u524D\\u6267\\u884C\\u7684\\u811A\\u672C\\u4E4B\\u540E\\u548C\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u4E4B\\u524D\\u5904\\u7406\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u5FAE\\u4EFB\\u52A1\\u7684\\u4F18\\u5148\\u7EA7\\u9AD8\\u4E8E\\u5B8F\\u4EFB\\u52A1\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E8B\\u4EF6\\u5FAA\\u73AF\"}),\"\\uFF1A\\u5728\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u7684\\u6BCF\\u6B21\\u8FED\\u4EE3\\u671F\\u95F4\\uFF0CJavaScript \\u5F15\\u64CE\\u9996\\u5148\\u5904\\u7406\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u4E2D\\u7684\\u6240\\u6709\\u5FAE\\u4EFB\\u52A1\\uFF0C\\u7136\\u540E\\u518D\\u8F6C\\u5230\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6DFB\\u52A0\\u5FAE\\u4EFB\\u52A1\"}),\"\\uFF1A\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Promise.resolve().then()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"queueMicrotask()\"}),\" \\u7B49\\u65B9\\u6CD5\\u5C06\\u5FAE\\u4EFB\\u52A1\\u6DFB\\u52A0\\u5230\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u4E2D\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F8B\\u5B50\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD9\\u91CC\\u6709\\u4E00\\u4E2A\\u4F8B\\u5B50\\u6765\\u8BF4\\u660E\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log('Script start');\n\nsetTimeout(() => {\n  console.log('setTimeout');\n}, 0);\n\nPromise.resolve()\n  .then(() => {\n    console.log('Promise 1');\n  })\n  .then(() => {\n    console.log('Promise 2');\n  });\n\nconsole.log('Script end');\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8F93\\u51FA\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{children:`Script start\nScript end\nPromise 1\nPromise 2\nsetTimeout\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u540C\\u6B65\\u4EE3\\u7801\\uFF08\",(0,n.jsx)(e.code,{children:\"console.log('Script start')\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"console.log('Script end')\"}),\"\\uFF09\\u9996\\u5148\\u6267\\u884C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"promise \\u56DE\\u8C03\\uFF08\",(0,n.jsx)(e.code,{children:\"Promise 1\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Promise 2\"}),\"\\uFF09\\u88AB\\u6DFB\\u52A0\\u5230\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u4E2D\\uFF0C\\u7136\\u540E\\u6267\\u884C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"setTimeout\"}),\" \\u56DE\\u8C03\\u88AB\\u6DFB\\u52A0\\u5230\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u4E2D\\uFF0C\\u6700\\u540E\\u6267\\u884C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Promise \\u56DE\\u8C03\"}),\"\\uFF1A\\u5FAE\\u4EFB\\u52A1\\u901A\\u5E38\\u7528\\u4E8E promise \\u56DE\\u8C03\\uFF0C\\u4EE5\\u786E\\u4FDD\\u5B83\\u4EEC\\u5728\\u5F53\\u524D\\u64CD\\u4F5C\\u4E4B\\u540E\\u5C3D\\u5FEB\\u6267\\u884C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"MutationObserver\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"MutationObserver\"}),\" API \\u4F7F\\u7528\\u5FAE\\u4EFB\\u52A1\\u6765\\u901A\\u77E5 DOM \\u4E2D\\u7684\\u66F4\\u6539\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/HTML_DOM_API/Microtask_guide\",children:\"MDN Web \\u6587\\u6863\\uFF1A\\u5FAE\\u4EFB\\u52A1\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop\",children:\"JavaScript \\u4E8B\\u4EF6\\u5FAA\\u73AF\\u89E3\\u91CA\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/microtask-queue\",children:\"\\u7406\\u89E3 JavaScript \\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\"})}),`\n`]})]})}function f(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(s,r)})):s(r)}var j=f;return P(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var S=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),M=(r,e)=>{for(var i in e)o(r,i,{get:e[i],enumerable:!0})},t=(r,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of u(e))!v.call(r,l)&&l!==i&&o(r,l,{get:()=>e[l],enumerable:!(c=m(e,l))||c.enumerable});return r};var P=(r,e,i)=>(i=r!=null?p(g(r)):{},t(e||!r||!r.__esModule?o(i,\"default\",{value:r,enumerable:!0}):i,r)),_=r=>t(o({},\"__esModule\",{value:!0}),r);var h=S((b,d)=>{d.exports=_jsx_runtime});var x={};M(x,{default:()=>a,frontmatter:()=>f});var n=P(h()),f={title:\"\\u89E3\\u91CA\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u7684\\u6982\\u5FF5\"};function s(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u662F\\u4E00\\u4E2A\\u4EFB\\u52A1\\u961F\\u5217\\uFF0C\\u9700\\u8981\\u5728\\u5F53\\u524D\\u6267\\u884C\\u7684\\u811A\\u672C\\u4E4B\\u540E\\u548C\\u4EFB\\u4F55\\u5176\\u4ED6\\u4EFB\\u52A1\\u4E4B\\u524D\\u6267\\u884C\\u3002\\u5FAE\\u4EFB\\u52A1\\u901A\\u5E38\\u7528\\u4E8E\\u9700\\u8981\\u7D27\\u63A5\\u5728\\u5F53\\u524D\\u64CD\\u4F5C\\u4E4B\\u540E\\u6267\\u884C\\u7684\\u4EFB\\u52A1\\uFF0C\\u4F8B\\u5982 promise \\u56DE\\u8C03\\u3002\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u5728\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u4E4B\\u524D\\u5904\\u7406\\uFF0C\\u786E\\u4FDD\\u5FAE\\u4EFB\\u52A1\\u5C3D\\u5FEB\\u6267\\u884C\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u7684\\u6982\\u5FF5\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EC0\\u4E48\\u662F\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\uFF1F\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u662F JavaScript \\u4E8B\\u4EF6\\u5FAA\\u73AF\\u673A\\u5236\\u7684\\u4E00\\u90E8\\u5206\\u3002\\u5B83\\u662F\\u4E00\\u4E2A\\u961F\\u5217\\uFF0C\\u7528\\u4E8E\\u4FDD\\u5B58\\u9700\\u8981\\u5728\\u5F53\\u524D\\u6267\\u884C\\u7684\\u811A\\u672C\\u4E4B\\u540E\\u548C\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u4E2D\\u7684\\u4EFB\\u4F55\\u5176\\u4ED6\\u4EFB\\u52A1\\u4E4B\\u524D\\u6267\\u884C\\u7684\\u4EFB\\u52A1\\u3002\\u5FAE\\u4EFB\\u52A1\\u901A\\u5E38\\u7528\\u4E8E\\u9700\\u8981\\u5C3D\\u5FEB\\u6267\\u884C\\u7684\\u64CD\\u4F5C\\uFF0C\\u4F8B\\u5982 promise \\u56DE\\u8C03\\u548C \",(0,n.jsx)(e.code,{children:\"MutationObserver\"}),\" \\u56DE\\u8C03\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6267\\u884C\\u987A\\u5E8F\"}),\"\\uFF1A\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u5728\\u5F53\\u524D\\u6267\\u884C\\u7684\\u811A\\u672C\\u4E4B\\u540E\\u548C\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u4E4B\\u524D\\u5904\\u7406\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u5FAE\\u4EFB\\u52A1\\u7684\\u4F18\\u5148\\u7EA7\\u9AD8\\u4E8E\\u5B8F\\u4EFB\\u52A1\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E8B\\u4EF6\\u5FAA\\u73AF\"}),\"\\uFF1A\\u5728\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u7684\\u6BCF\\u6B21\\u8FED\\u4EE3\\u671F\\u95F4\\uFF0CJavaScript \\u5F15\\u64CE\\u9996\\u5148\\u5904\\u7406\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u4E2D\\u7684\\u6240\\u6709\\u5FAE\\u4EFB\\u52A1\\uFF0C\\u7136\\u540E\\u518D\\u8F6C\\u5230\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6DFB\\u52A0\\u5FAE\\u4EFB\\u52A1\"}),\"\\uFF1A\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Promise.resolve().then()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"queueMicrotask()\"}),\" \\u7B49\\u65B9\\u6CD5\\u5C06\\u5FAE\\u4EFB\\u52A1\\u6DFB\\u52A0\\u5230\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u4E2D\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F8B\\u5B50\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD9\\u91CC\\u6709\\u4E00\\u4E2A\\u4F8B\\u5B50\\u6765\\u8BF4\\u660E\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log('Script start');\n\nsetTimeout(() => {\n  console.log('setTimeout');\n}, 0);\n\nPromise.resolve()\n  .then(() => {\n    console.log('Promise 1');\n  })\n  .then(() => {\n    console.log('Promise 2');\n  });\n\nconsole.log('Script end');\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8F93\\u51FA\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{children:`Script start\nScript end\nPromise 1\nPromise 2\nsetTimeout\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u540C\\u6B65\\u4EE3\\u7801\\uFF08\",(0,n.jsx)(e.code,{children:\"console.log('Script start')\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"console.log('Script end')\"}),\"\\uFF09\\u9996\\u5148\\u6267\\u884C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"promise \\u56DE\\u8C03\\uFF08\",(0,n.jsx)(e.code,{children:\"Promise 1\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Promise 2\"}),\"\\uFF09\\u88AB\\u6DFB\\u52A0\\u5230\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u4E2D\\uFF0C\\u7136\\u540E\\u6267\\u884C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"setTimeout\"}),\" \\u56DE\\u8C03\\u88AB\\u6DFB\\u52A0\\u5230\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u4E2D\\uFF0C\\u6700\\u540E\\u6267\\u884C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Promise \\u56DE\\u8C03\"}),\"\\uFF1A\\u5FAE\\u4EFB\\u52A1\\u901A\\u5E38\\u7528\\u4E8E promise \\u56DE\\u8C03\\uFF0C\\u4EE5\\u786E\\u4FDD\\u5B83\\u4EEC\\u5728\\u5F53\\u524D\\u64CD\\u4F5C\\u4E4B\\u540E\\u5C3D\\u5FEB\\u6267\\u884C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"MutationObserver\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"MutationObserver\"}),\" API \\u4F7F\\u7528\\u5FAE\\u4EFB\\u52A1\\u6765\\u901A\\u77E5 DOM \\u4E2D\\u7684\\u66F4\\u6539\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/HTML_DOM_API/Microtask_guide\",children:\"MDN Web \\u6587\\u6863\\uFF1A\\u5FAE\\u4EFB\\u52A1\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop\",children:\"JavaScript \\u4E8B\\u4EF6\\u5FAA\\u73AF\\u89E3\\u91CA\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/microtask-queue\",children:\"\\u7406\\u89E3 JavaScript \\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\"})}),`\n`]})]})}function a(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(s,{...r})}):s(r)}return _(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/en-US.json
index 50ad78fc3..7aa453765 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),v=(r,e)=>{for(var c in e)a(r,c,{get:e[c],enumerable:!0})},s=(r,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of m(e))!f.call(r,t)&&t!==c&&a(r,t,{get:()=>e[t],enumerable:!(i=p(e,t))||i.enumerable});return r};var w=(r,e,c)=>(c=r!=null?d(u(r)):{},s(e||!r||!r.__esModule?a(c,\"default\",{value:r,enumerable:!0}):c,r)),T=r=>s(a({},\"__esModule\",{value:!0}),r);var h=g((j,o)=>{o.exports=_jsx_runtime});var y={};v(y,{default:()=>x,frontmatter:()=>b});var n=w(h()),b={title:\"Explain the concept of caching and how it can be used to improve performance\"};function l(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Caching is a technique used to store copies of files or data in a temporary storage location to reduce the time it takes to access them. It improves performance by reducing the need to fetch data from the original source repeatedly. In front end development, caching can be implemented using browser cache, service workers, and HTTP headers like \",(0,n.jsx)(e.code,{children:\"Cache-Control\"}),\".\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"The concept of caching and how it can be used to improve performance\"}),`\n`,(0,n.jsx)(e.h3,{children:\"What is caching?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Caching is a technique used to store copies of files or data in a temporary storage location, known as a cache, to reduce the time it takes to access them. The primary goal of caching is to improve performance by minimizing the need to fetch data from the original source repeatedly.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Types of caching\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Browser cache\"}),`\n`,(0,n.jsx)(e.p,{children:\"The browser cache stores copies of web pages, images, and other resources locally on the user's device. When a user revisits a website, the browser can load these resources from the cache instead of fetching them from the server, resulting in faster load times.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Service workers\"}),`\n`,(0,n.jsx)(e.p,{children:\"Service workers are scripts that run in the background and can intercept network requests. They can cache resources and serve them from the cache, even when the user is offline. This can significantly improve performance and provide a better user experience.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"HTTP caching\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"HTTP caching involves using HTTP headers to control how and when resources are cached. Common headers include \",(0,n.jsx)(e.code,{children:\"Cache-Control\"}),\", \",(0,n.jsx)(e.code,{children:\"Expires\"}),\", and \",(0,n.jsx)(e.code,{children:\"ETag\"}),\".\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"How caching improves performance\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Reduced latency\"}),`\n`,(0,n.jsx)(e.p,{children:\"By storing frequently accessed data closer to the user, caching reduces the time it takes to retrieve that data. This results in faster load times and a smoother user experience.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Reduced server load\"}),`\n`,(0,n.jsx)(e.p,{children:\"Caching reduces the number of requests made to the server, which can help decrease server load and improve overall performance.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Offline access\"}),`\n`,(0,n.jsx)(e.p,{children:\"With service workers, cached resources can be served even when the user is offline, providing a seamless experience.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Implementing caching\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Browser cache example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<head>\n  <link rel=\"stylesheet\" href=\"styles.css\" />\n  <script src=\"app.js\"><\\/script>\n</head>\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Service worker example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`self.addEventListener('install', (event) => {\n  event.waitUntil(\n    caches.open('v1').then((cache) => {\n      return cache.addAll(['/index.html', '/styles.css', '/app.js']);\n    }),\n  );\n});\n\nself.addEventListener('fetch', (event) => {\n  event.respondWith(\n    caches.match(event.request).then((response) => {\n      return response || fetch(event.request);\n    }),\n  );\n});\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"HTTP caching example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Cache-Control: max-age=3600\n`})}),`\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/Web/HTTP/Caching\",children:\"MDN Web Docs: HTTP caching\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook\",children:\"Google Developers: The offline cookbook\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/primers/service-workers\",children:\"Service Workers: an Introduction\"})}),`\n`]})]})}function k(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(l,r)})):l(r)}var x=k;return T(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),w=(r,e)=>{for(var c in e)a(r,c,{get:e[c],enumerable:!0})},o=(r,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of u(e))!g.call(r,t)&&t!==c&&a(r,t,{get:()=>e[t],enumerable:!(i=m(e,t))||i.enumerable});return r};var T=(r,e,c)=>(c=r!=null?p(f(r)):{},o(e||!r||!r.__esModule?a(c,\"default\",{value:r,enumerable:!0}):c,r)),b=r=>o(a({},\"__esModule\",{value:!0}),r);var s=v((C,h)=>{h.exports=_jsx_runtime});var x={};w(x,{default:()=>d,frontmatter:()=>k});var n=T(s()),k={title:\"Explain the concept of caching and how it can be used to improve performance\"};function l(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Caching is a technique used to store copies of files or data in a temporary storage location to reduce the time it takes to access them. It improves performance by reducing the need to fetch data from the original source repeatedly. In front end development, caching can be implemented using browser cache, service workers, and HTTP headers like \",(0,n.jsx)(e.code,{children:\"Cache-Control\"}),\".\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"The concept of caching and how it can be used to improve performance\"}),`\n`,(0,n.jsx)(e.h3,{children:\"What is caching?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Caching is a technique used to store copies of files or data in a temporary storage location, known as a cache, to reduce the time it takes to access them. The primary goal of caching is to improve performance by minimizing the need to fetch data from the original source repeatedly.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Types of caching\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Browser cache\"}),`\n`,(0,n.jsx)(e.p,{children:\"The browser cache stores copies of web pages, images, and other resources locally on the user's device. When a user revisits a website, the browser can load these resources from the cache instead of fetching them from the server, resulting in faster load times.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Service workers\"}),`\n`,(0,n.jsx)(e.p,{children:\"Service workers are scripts that run in the background and can intercept network requests. They can cache resources and serve them from the cache, even when the user is offline. This can significantly improve performance and provide a better user experience.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"HTTP caching\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"HTTP caching involves using HTTP headers to control how and when resources are cached. Common headers include \",(0,n.jsx)(e.code,{children:\"Cache-Control\"}),\", \",(0,n.jsx)(e.code,{children:\"Expires\"}),\", and \",(0,n.jsx)(e.code,{children:\"ETag\"}),\".\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"How caching improves performance\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Reduced latency\"}),`\n`,(0,n.jsx)(e.p,{children:\"By storing frequently accessed data closer to the user, caching reduces the time it takes to retrieve that data. This results in faster load times and a smoother user experience.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Reduced server load\"}),`\n`,(0,n.jsx)(e.p,{children:\"Caching reduces the number of requests made to the server, which can help decrease server load and improve overall performance.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Offline access\"}),`\n`,(0,n.jsx)(e.p,{children:\"With service workers, cached resources can be served even when the user is offline, providing a seamless experience.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Implementing caching\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Browser cache example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<head>\n  <link rel=\"stylesheet\" href=\"styles.css\" />\n  <script src=\"app.js\"><\\/script>\n</head>\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Service worker example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`self.addEventListener('install', (event) => {\n  event.waitUntil(\n    caches.open('v1').then((cache) => {\n      return cache.addAll(['/index.html', '/styles.css', '/app.js']);\n    }),\n  );\n});\n\nself.addEventListener('fetch', (event) => {\n  event.respondWith(\n    caches.match(event.request).then((response) => {\n      return response || fetch(event.request);\n    }),\n  );\n});\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"HTTP caching example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Cache-Control: max-age=3600\n`})}),`\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/Web/HTTP/Caching\",children:\"MDN Web Docs: HTTP caching\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook\",children:\"Google Developers: The offline cookbook\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/primers/service-workers\",children:\"Service Workers: an Introduction\"})}),`\n`]})]})}function d(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(l,{...r})}):l(r)}return b(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/zh-CN.json
index ad61b74cf..ef2321ef8 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var o=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var c in e)l(r,c,{get:e[c],enumerable:!0})},i=(r,e,c,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let h of m(e))!v.call(r,h)&&h!==c&&l(r,h,{get:()=>e[h],enumerable:!(t=p(e,h))||t.enumerable});return r};var x=(r,e,c)=>(c=r!=null?o(u(r)):{},i(e||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),T=r=>i(l({},\"__esModule\",{value:!0}),r);var d=g((H,s)=>{s.exports=_jsx_runtime});var C={};f(C,{default:()=>w,frontmatter:()=>j});var n=x(d()),j={title:\"\\u89E3\\u91CA\\u7F13\\u5B58\\u7684\\u6982\\u5FF5\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u6765\\u63D0\\u9AD8\\u6027\\u80FD\"};function a(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u7F13\\u5B58\\u662F\\u4E00\\u79CD\\u7528\\u4E8E\\u5B58\\u50A8\\u6587\\u4EF6\\u6216\\u6570\\u636E\\u7684\\u526F\\u672C\\u7684\\u4E34\\u65F6\\u5B58\\u50A8\\u6280\\u672F\\uFF0C\\u4EE5\\u51CF\\u5C11\\u8BBF\\u95EE\\u5B83\\u4EEC\\u6240\\u9700\\u7684\\u65F6\\u95F4\\u3002\\u5B83\\u901A\\u8FC7\\u51CF\\u5C11\\u91CD\\u590D\\u4ECE\\u539F\\u59CB\\u6765\\u6E90\\u83B7\\u53D6\\u6570\\u636E\\u7684\\u9700\\u8981\\u6765\\u63D0\\u9AD8\\u6027\\u80FD\\u3002\\u5728\\u524D\\u7AEF\\u5F00\\u53D1\\u4E2D\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u6D4F\\u89C8\\u5668\\u7F13\\u5B58\\u3001service workers \\u548C HTTP \\u6807\\u5934\\uFF08\\u5982 \",(0,n.jsx)(e.code,{children:\"Cache-Control\"}),\"\\uFF09\\u6765\\u5B9E\\u73B0\\u7F13\\u5B58\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7F13\\u5B58\\u7684\\u6982\\u5FF5\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u6765\\u63D0\\u9AD8\\u6027\\u80FD\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EC0\\u4E48\\u662F\\u7F13\\u5B58\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u7F13\\u5B58\\u662F\\u4E00\\u79CD\\u7528\\u4E8E\\u5C06\\u6587\\u4EF6\\u6216\\u6570\\u636E\\u7684\\u526F\\u672C\\u5B58\\u50A8\\u5728\\u4E34\\u65F6\\u5B58\\u50A8\\u4F4D\\u7F6E\\uFF08\\u79F0\\u4E3A\\u7F13\\u5B58\\uFF09\\u4E2D\\u7684\\u6280\\u672F\\uFF0C\\u4EE5\\u51CF\\u5C11\\u8BBF\\u95EE\\u5B83\\u4EEC\\u6240\\u9700\\u7684\\u65F6\\u95F4\\u3002\\u7F13\\u5B58\\u7684\\u4E3B\\u8981\\u76EE\\u6807\\u662F\\u901A\\u8FC7\\u6700\\u5927\\u9650\\u5EA6\\u5730\\u51CF\\u5C11\\u91CD\\u590D\\u4ECE\\u539F\\u59CB\\u6765\\u6E90\\u83B7\\u53D6\\u6570\\u636E\\u7684\\u9700\\u8981\\u6765\\u63D0\\u9AD8\\u6027\\u80FD\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7F13\\u5B58\\u7684\\u7C7B\\u578B\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u6D4F\\u89C8\\u5668\\u7F13\\u5B58\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6D4F\\u89C8\\u5668\\u7F13\\u5B58\\u5C06\\u7F51\\u9875\\u3001\\u56FE\\u50CF\\u548C\\u5176\\u4ED6\\u8D44\\u6E90\\u7684\\u526F\\u672C\\u5B58\\u50A8\\u5728\\u7528\\u6237\\u8BBE\\u5907\\u7684\\u672C\\u5730\\u3002\\u5F53\\u7528\\u6237\\u91CD\\u65B0\\u8BBF\\u95EE\\u7F51\\u7AD9\\u65F6\\uFF0C\\u6D4F\\u89C8\\u5668\\u53EF\\u4EE5\\u4ECE\\u7F13\\u5B58\\u4E2D\\u52A0\\u8F7D\\u8FD9\\u4E9B\\u8D44\\u6E90\\uFF0C\\u800C\\u4E0D\\u662F\\u4ECE\\u670D\\u52A1\\u5668\\u83B7\\u53D6\\u5B83\\u4EEC\\uFF0C\\u4ECE\\u800C\\u52A0\\u5FEB\\u52A0\\u8F7D\\u65F6\\u95F4\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Service workers\"}),`\n`,(0,n.jsx)(e.p,{children:\"Service workers \\u662F\\u5728\\u540E\\u53F0\\u8FD0\\u884C\\u7684\\u811A\\u672C\\uFF0C\\u53EF\\u4EE5\\u62E6\\u622A\\u7F51\\u7EDC\\u8BF7\\u6C42\\u3002\\u5B83\\u4EEC\\u53EF\\u4EE5\\u7F13\\u5B58\\u8D44\\u6E90\\u5E76\\u4ECE\\u7F13\\u5B58\\u4E2D\\u63D0\\u4F9B\\u5B83\\u4EEC\\uFF0C\\u5373\\u4F7F\\u5728\\u7528\\u6237\\u79BB\\u7EBF\\u65F6\\u4E5F\\u662F\\u5982\\u6B64\\u3002\\u8FD9\\u53EF\\u4EE5\\u663E\\u8457\\u63D0\\u9AD8\\u6027\\u80FD\\u5E76\\u63D0\\u4F9B\\u66F4\\u597D\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"HTTP \\u7F13\\u5B58\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"HTTP \\u7F13\\u5B58\\u6D89\\u53CA\\u4F7F\\u7528 HTTP \\u6807\\u5934\\u6765\\u63A7\\u5236\\u5982\\u4F55\\u4EE5\\u53CA\\u4F55\\u65F6\\u7F13\\u5B58\\u8D44\\u6E90\\u3002\\u5E38\\u89C1\\u7684\\u6807\\u5934\\u5305\\u62EC \",(0,n.jsx)(e.code,{children:\"Cache-Control\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"Expires\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"ETag\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7F13\\u5B58\\u5982\\u4F55\\u63D0\\u9AD8\\u6027\\u80FD\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u51CF\\u5C11\\u5EF6\\u8FDF\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u901A\\u8FC7\\u5C06\\u7ECF\\u5E38\\u8BBF\\u95EE\\u7684\\u6570\\u636E\\u5B58\\u50A8\\u5728\\u66F4\\u9760\\u8FD1\\u7528\\u6237\\u7684\\u4F4D\\u7F6E\\uFF0C\\u7F13\\u5B58\\u51CF\\u5C11\\u4E86\\u68C0\\u7D22\\u8BE5\\u6570\\u636E\\u6240\\u9700\\u7684\\u65F6\\u95F4\\u3002\\u8FD9\\u53EF\\u4EE5\\u52A0\\u5FEB\\u52A0\\u8F7D\\u65F6\\u95F4\\u5E76\\u63D0\\u4F9B\\u66F4\\u6D41\\u7545\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u51CF\\u5C11\\u670D\\u52A1\\u5668\\u8D1F\\u8F7D\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u7F13\\u5B58\\u51CF\\u5C11\\u4E86\\u5411\\u670D\\u52A1\\u5668\\u53D1\\u51FA\\u7684\\u8BF7\\u6C42\\u6570\\u91CF\\uFF0C\\u8FD9\\u6709\\u52A9\\u4E8E\\u51CF\\u5C11\\u670D\\u52A1\\u5668\\u8D1F\\u8F7D\\u5E76\\u63D0\\u9AD8\\u6574\\u4F53\\u6027\\u80FD\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u79BB\\u7EBF\\u8BBF\\u95EE\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u901A\\u8FC7 Service Worker\\uFF0C\\u5373\\u4F7F\\u5728\\u7528\\u6237\\u79BB\\u7EBF\\u65F6\\u4E5F\\u53EF\\u4EE5\\u63D0\\u4F9B\\u7F13\\u5B58\\u7684\\u8D44\\u6E90\\uFF0C\\u4ECE\\u800C\\u63D0\\u4F9B\\u65E0\\u7F1D\\u4F53\\u9A8C\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B9E\\u73B0\\u7F13\\u5B58\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u6D4F\\u89C8\\u5668\\u7F13\\u5B58\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<head>\n  <link rel=\"stylesheet\" href=\"styles.css\" />\n  <script src=\"app.js\"><\\/script>\n</head>\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Service worker \\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`self.addEventListener('install', (event) => {\n  event.waitUntil(\n    caches.open('v1').then((cache) => {\n      return cache.addAll(['/index.html', '/styles.css', '/app.js']);\n    }),\n  );\n});\n\nself.addEventListener('fetch', (event) => {\n  event.respondWith(\n    caches.match(event.request).then((response) => {\n      return response || fetch(event.request);\n    }),\n  );\n});\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"HTTP \\u7F13\\u5B58\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Cache-Control: max-age=3600\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/primers/service-workers\",children:\"Service Workers: an Introduction\"})}),`\n`]})]})}function k(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(a,r)})):a(r)}var w=k;return T(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),x=(r,e)=>{for(var c in e)l(r,c,{get:e[c],enumerable:!0})},i=(r,e,c,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let h of u(e))!f.call(r,h)&&h!==c&&l(r,h,{get:()=>e[h],enumerable:!(t=m(e,h))||t.enumerable});return r};var T=(r,e,c)=>(c=r!=null?p(v(r)):{},i(e||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),j=r=>i(l({},\"__esModule\",{value:!0}),r);var s=g((_,d)=>{d.exports=_jsx_runtime});var w={};x(w,{default:()=>a,frontmatter:()=>k});var n=T(s()),k={title:\"\\u89E3\\u91CA\\u7F13\\u5B58\\u7684\\u6982\\u5FF5\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u6765\\u63D0\\u9AD8\\u6027\\u80FD\"};function o(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u7F13\\u5B58\\u662F\\u4E00\\u79CD\\u7528\\u4E8E\\u5B58\\u50A8\\u6587\\u4EF6\\u6216\\u6570\\u636E\\u7684\\u526F\\u672C\\u7684\\u4E34\\u65F6\\u5B58\\u50A8\\u6280\\u672F\\uFF0C\\u4EE5\\u51CF\\u5C11\\u8BBF\\u95EE\\u5B83\\u4EEC\\u6240\\u9700\\u7684\\u65F6\\u95F4\\u3002\\u5B83\\u901A\\u8FC7\\u51CF\\u5C11\\u91CD\\u590D\\u4ECE\\u539F\\u59CB\\u6765\\u6E90\\u83B7\\u53D6\\u6570\\u636E\\u7684\\u9700\\u8981\\u6765\\u63D0\\u9AD8\\u6027\\u80FD\\u3002\\u5728\\u524D\\u7AEF\\u5F00\\u53D1\\u4E2D\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u6D4F\\u89C8\\u5668\\u7F13\\u5B58\\u3001service workers \\u548C HTTP \\u6807\\u5934\\uFF08\\u5982 \",(0,n.jsx)(e.code,{children:\"Cache-Control\"}),\"\\uFF09\\u6765\\u5B9E\\u73B0\\u7F13\\u5B58\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7F13\\u5B58\\u7684\\u6982\\u5FF5\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u6765\\u63D0\\u9AD8\\u6027\\u80FD\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EC0\\u4E48\\u662F\\u7F13\\u5B58\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u7F13\\u5B58\\u662F\\u4E00\\u79CD\\u7528\\u4E8E\\u5C06\\u6587\\u4EF6\\u6216\\u6570\\u636E\\u7684\\u526F\\u672C\\u5B58\\u50A8\\u5728\\u4E34\\u65F6\\u5B58\\u50A8\\u4F4D\\u7F6E\\uFF08\\u79F0\\u4E3A\\u7F13\\u5B58\\uFF09\\u4E2D\\u7684\\u6280\\u672F\\uFF0C\\u4EE5\\u51CF\\u5C11\\u8BBF\\u95EE\\u5B83\\u4EEC\\u6240\\u9700\\u7684\\u65F6\\u95F4\\u3002\\u7F13\\u5B58\\u7684\\u4E3B\\u8981\\u76EE\\u6807\\u662F\\u901A\\u8FC7\\u6700\\u5927\\u9650\\u5EA6\\u5730\\u51CF\\u5C11\\u91CD\\u590D\\u4ECE\\u539F\\u59CB\\u6765\\u6E90\\u83B7\\u53D6\\u6570\\u636E\\u7684\\u9700\\u8981\\u6765\\u63D0\\u9AD8\\u6027\\u80FD\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7F13\\u5B58\\u7684\\u7C7B\\u578B\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u6D4F\\u89C8\\u5668\\u7F13\\u5B58\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6D4F\\u89C8\\u5668\\u7F13\\u5B58\\u5C06\\u7F51\\u9875\\u3001\\u56FE\\u50CF\\u548C\\u5176\\u4ED6\\u8D44\\u6E90\\u7684\\u526F\\u672C\\u5B58\\u50A8\\u5728\\u7528\\u6237\\u8BBE\\u5907\\u7684\\u672C\\u5730\\u3002\\u5F53\\u7528\\u6237\\u91CD\\u65B0\\u8BBF\\u95EE\\u7F51\\u7AD9\\u65F6\\uFF0C\\u6D4F\\u89C8\\u5668\\u53EF\\u4EE5\\u4ECE\\u7F13\\u5B58\\u4E2D\\u52A0\\u8F7D\\u8FD9\\u4E9B\\u8D44\\u6E90\\uFF0C\\u800C\\u4E0D\\u662F\\u4ECE\\u670D\\u52A1\\u5668\\u83B7\\u53D6\\u5B83\\u4EEC\\uFF0C\\u4ECE\\u800C\\u52A0\\u5FEB\\u52A0\\u8F7D\\u65F6\\u95F4\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Service workers\"}),`\n`,(0,n.jsx)(e.p,{children:\"Service workers \\u662F\\u5728\\u540E\\u53F0\\u8FD0\\u884C\\u7684\\u811A\\u672C\\uFF0C\\u53EF\\u4EE5\\u62E6\\u622A\\u7F51\\u7EDC\\u8BF7\\u6C42\\u3002\\u5B83\\u4EEC\\u53EF\\u4EE5\\u7F13\\u5B58\\u8D44\\u6E90\\u5E76\\u4ECE\\u7F13\\u5B58\\u4E2D\\u63D0\\u4F9B\\u5B83\\u4EEC\\uFF0C\\u5373\\u4F7F\\u5728\\u7528\\u6237\\u79BB\\u7EBF\\u65F6\\u4E5F\\u662F\\u5982\\u6B64\\u3002\\u8FD9\\u53EF\\u4EE5\\u663E\\u8457\\u63D0\\u9AD8\\u6027\\u80FD\\u5E76\\u63D0\\u4F9B\\u66F4\\u597D\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"HTTP \\u7F13\\u5B58\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"HTTP \\u7F13\\u5B58\\u6D89\\u53CA\\u4F7F\\u7528 HTTP \\u6807\\u5934\\u6765\\u63A7\\u5236\\u5982\\u4F55\\u4EE5\\u53CA\\u4F55\\u65F6\\u7F13\\u5B58\\u8D44\\u6E90\\u3002\\u5E38\\u89C1\\u7684\\u6807\\u5934\\u5305\\u62EC \",(0,n.jsx)(e.code,{children:\"Cache-Control\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"Expires\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"ETag\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7F13\\u5B58\\u5982\\u4F55\\u63D0\\u9AD8\\u6027\\u80FD\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u51CF\\u5C11\\u5EF6\\u8FDF\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u901A\\u8FC7\\u5C06\\u7ECF\\u5E38\\u8BBF\\u95EE\\u7684\\u6570\\u636E\\u5B58\\u50A8\\u5728\\u66F4\\u9760\\u8FD1\\u7528\\u6237\\u7684\\u4F4D\\u7F6E\\uFF0C\\u7F13\\u5B58\\u51CF\\u5C11\\u4E86\\u68C0\\u7D22\\u8BE5\\u6570\\u636E\\u6240\\u9700\\u7684\\u65F6\\u95F4\\u3002\\u8FD9\\u53EF\\u4EE5\\u52A0\\u5FEB\\u52A0\\u8F7D\\u65F6\\u95F4\\u5E76\\u63D0\\u4F9B\\u66F4\\u6D41\\u7545\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u51CF\\u5C11\\u670D\\u52A1\\u5668\\u8D1F\\u8F7D\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u7F13\\u5B58\\u51CF\\u5C11\\u4E86\\u5411\\u670D\\u52A1\\u5668\\u53D1\\u51FA\\u7684\\u8BF7\\u6C42\\u6570\\u91CF\\uFF0C\\u8FD9\\u6709\\u52A9\\u4E8E\\u51CF\\u5C11\\u670D\\u52A1\\u5668\\u8D1F\\u8F7D\\u5E76\\u63D0\\u9AD8\\u6574\\u4F53\\u6027\\u80FD\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u79BB\\u7EBF\\u8BBF\\u95EE\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u901A\\u8FC7 Service Worker\\uFF0C\\u5373\\u4F7F\\u5728\\u7528\\u6237\\u79BB\\u7EBF\\u65F6\\u4E5F\\u53EF\\u4EE5\\u63D0\\u4F9B\\u7F13\\u5B58\\u7684\\u8D44\\u6E90\\uFF0C\\u4ECE\\u800C\\u63D0\\u4F9B\\u65E0\\u7F1D\\u4F53\\u9A8C\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B9E\\u73B0\\u7F13\\u5B58\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u6D4F\\u89C8\\u5668\\u7F13\\u5B58\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<head>\n  <link rel=\"stylesheet\" href=\"styles.css\" />\n  <script src=\"app.js\"><\\/script>\n</head>\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Service worker \\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`self.addEventListener('install', (event) => {\n  event.waitUntil(\n    caches.open('v1').then((cache) => {\n      return cache.addAll(['/index.html', '/styles.css', '/app.js']);\n    }),\n  );\n});\n\nself.addEventListener('fetch', (event) => {\n  event.respondWith(\n    caches.match(event.request).then((response) => {\n      return response || fetch(event.request);\n    }),\n  );\n});\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"HTTP \\u7F13\\u5B58\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Cache-Control: max-age=3600\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/primers/service-workers\",children:\"Service Workers: an Introduction\"})}),`\n`]})]})}function a(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(o,{...r})}):o(r)}return j(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/en-US.json
index c7b100a5b..5d2e8e081 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var v=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),m=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},c=(t,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of g(e))!p.call(t,s)&&s!==r&&o(t,s,{get:()=>e[s],enumerable:!(i=u(e,s))||i.enumerable});return t};var b=(t,e,r)=>(r=t!=null?d(f(t)):{},c(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),w=t=>c(o({},\"__esModule\",{value:!0}),t);var h=v((M,a)=>{a.exports=_jsx_runtime});var E={};m(E,{default:()=>j,frontmatter:()=>x});var n=b(h()),x={title:\"Explain the concept of code coverage and how it can be used to assess test quality\"};function l(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",code:\"code\",pre:\"pre\",ul:\"ul\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Code coverage is a metric that measures the percentage of code that is executed when the test suite runs. It helps in assessing the quality of tests by identifying untested parts of the codebase. Higher code coverage generally indicates more thorough testing, but it doesn't guarantee the absence of bugs. Tools like Istanbul or Jest can be used to measure code coverage.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is code coverage?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Code coverage is a software testing metric that determines the amount of code that is executed during automated tests. It provides insights into which parts of the codebase are being tested and which are not.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Types of code coverage\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Statement coverage\"}),\": Measures the number of statements in the code that have been executed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Branch coverage\"}),\": Measures whether each branch (e.g., \",(0,n.jsx)(e.code,{children:\"if\"}),\" and \",(0,n.jsx)(e.code,{children:\"else\"}),\" blocks) has been executed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Function coverage\"}),\": Measures whether each function in the code has been called.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Line coverage\"}),\": Measures the number of lines of code that have been executed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Condition coverage\"}),\": Measures whether each boolean sub-expression has been evaluated to both true and false.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Consider the following JavaScript function:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function isEven(num) {\n  if (num % 2 === 0) {\n    return true;\n  } else {\n    return false;\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"A test suite for this function might look like this:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`test('isEven returns true for even numbers', () => {\n  expect(isEven(2)).toBe(true);\n});\n\ntest('isEven returns false for odd numbers', () => {\n  expect(isEven(3)).toBe(false);\n});\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Running code coverage tools on this test suite would show 100% statement, branch, function, and line coverage because all parts of the code are executed.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"How to measure code coverage\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Tools\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Istanbul\"}),\": A popular JavaScript code coverage tool.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Jest\"}),\": A testing framework that includes built-in code coverage reporting.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Karma\"}),\": A test runner that can be configured to use Istanbul for code coverage.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example with Jest\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To measure code coverage with Jest, you can add the \",(0,n.jsx)(e.code,{children:\"--coverage\"}),\" flag when running your tests:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`jest --coverage\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"This will generate a coverage report that shows the percentage of code covered by your tests.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Assessing test quality with code coverage\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Identifies untested code\"}),\": Helps in finding parts of the codebase that are not covered by tests.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Improves test suite\"}),\": Encourages writing more comprehensive tests.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Increases confidence\"}),\": Higher coverage can increase confidence in the stability of the code.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Limitations\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"False sense of security\"}),\": High coverage does not guarantee the absence of bugs.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Quality over quantity\"}),\": 100% coverage does not mean the tests are of high quality. Tests should also check for edge cases and potential errors.\"]}),`\n`]}),`\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://istanbul.js.org/\",children:\"Istanbul documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jestjs.io/docs/en/coverage\",children:\"Jest code coverage\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://karma-runner.github.io/6.3/intro/installation.html\",children:\"Karma coverage\"})}),`\n`]})]})}function y(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(l,t)})):l(t)}var j=y;return w(E);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var r in e)s(t,r,{get:e[r],enumerable:!0})},c=(t,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of f(e))!v.call(t,o)&&o!==r&&s(t,o,{get:()=>e[o],enumerable:!(i=g(e,o))||i.enumerable});return t};var w=(t,e,r)=>(r=t!=null?u(p(t)):{},c(e||!t||!t.__esModule?s(r,\"default\",{value:t,enumerable:!0}):r,t)),x=t=>c(s({},\"__esModule\",{value:!0}),t);var h=m((I,a)=>{a.exports=_jsx_runtime});var j={};b(j,{default:()=>d,frontmatter:()=>y});var n=w(h()),y={title:\"Explain the concept of code coverage and how it can be used to assess test quality\"};function l(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Code coverage is a metric that measures the percentage of code that is executed when the test suite runs. It helps in assessing the quality of tests by identifying untested parts of the codebase. Higher code coverage generally indicates more thorough testing, but it doesn't guarantee the absence of bugs. Tools like Istanbul or Jest can be used to measure code coverage.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is code coverage?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Code coverage is a software testing metric that determines the amount of code that is executed during automated tests. It provides insights into which parts of the codebase are being tested and which are not.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Types of code coverage\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Statement coverage\"}),\": Measures the number of statements in the code that have been executed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Branch coverage\"}),\": Measures whether each branch (e.g., \",(0,n.jsx)(e.code,{children:\"if\"}),\" and \",(0,n.jsx)(e.code,{children:\"else\"}),\" blocks) has been executed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Function coverage\"}),\": Measures whether each function in the code has been called.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Line coverage\"}),\": Measures the number of lines of code that have been executed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Condition coverage\"}),\": Measures whether each boolean sub-expression has been evaluated to both true and false.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Consider the following JavaScript function:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function isEven(num) {\n  if (num % 2 === 0) {\n    return true;\n  } else {\n    return false;\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"A test suite for this function might look like this:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`test('isEven returns true for even numbers', () => {\n  expect(isEven(2)).toBe(true);\n});\n\ntest('isEven returns false for odd numbers', () => {\n  expect(isEven(3)).toBe(false);\n});\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Running code coverage tools on this test suite would show 100% statement, branch, function, and line coverage because all parts of the code are executed.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"How to measure code coverage\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Tools\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Istanbul\"}),\": A popular JavaScript code coverage tool.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Jest\"}),\": A testing framework that includes built-in code coverage reporting.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Karma\"}),\": A test runner that can be configured to use Istanbul for code coverage.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example with Jest\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To measure code coverage with Jest, you can add the \",(0,n.jsx)(e.code,{children:\"--coverage\"}),\" flag when running your tests:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`jest --coverage\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"This will generate a coverage report that shows the percentage of code covered by your tests.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Assessing test quality with code coverage\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Identifies untested code\"}),\": Helps in finding parts of the codebase that are not covered by tests.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Improves test suite\"}),\": Encourages writing more comprehensive tests.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Increases confidence\"}),\": Higher coverage can increase confidence in the stability of the code.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Limitations\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"False sense of security\"}),\": High coverage does not guarantee the absence of bugs.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Quality over quantity\"}),\": 100% coverage does not mean the tests are of high quality. Tests should also check for edge cases and potential errors.\"]}),`\n`]}),`\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://istanbul.js.org/\",children:\"Istanbul documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jestjs.io/docs/en/coverage\",children:\"Jest code coverage\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://karma-runner.github.io/6.3/intro/installation.html\",children:\"Karma coverage\"})}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}return x(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/zh-CN.json
index d2380a798..af19f8c1f 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),j=(r,n)=>{for(var l in n)c(r,l,{get:n[l],enumerable:!0})},t=(r,n,l,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of g(n))!m.call(r,i)&&i!==l&&c(r,i,{get:()=>n[i],enumerable:!(h=u(n,i))||h.enumerable});return r};var v=(r,n,l)=>(l=r!=null?a(p(r)):{},t(n||!r||!r.__esModule?c(l,\"default\",{value:r,enumerable:!0}):l,r)),b=r=>t(c({},\"__esModule\",{value:!0}),r);var s=f((D,d)=>{d.exports=_jsx_runtime});var E={};j(E,{default:()=>_,frontmatter:()=>x});var e=v(s()),x={title:\"\\u89E3\\u91CA\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u7684\\u6982\\u5FF5\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u6765\\u8BC4\\u4F30\\u6D4B\\u8BD5\\u8D28\\u91CF\"};function o(r){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",code:\"code\",pre:\"pre\",ul:\"ul\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u662F\\u4E00\\u4E2A\\u8861\\u91CF\\u6D4B\\u8BD5\\u5957\\u4EF6\\u8FD0\\u884C\\u65F6\\u6267\\u884C\\u4EE3\\u7801\\u767E\\u5206\\u6BD4\\u7684\\u6307\\u6807\\u3002\\u5B83\\u901A\\u8FC7\\u8BC6\\u522B\\u4EE3\\u7801\\u5E93\\u4E2D\\u672A\\u6D4B\\u8BD5\\u7684\\u90E8\\u5206\\u6765\\u5E2E\\u52A9\\u8BC4\\u4F30\\u6D4B\\u8BD5\\u7684\\u8D28\\u91CF\\u3002\\u8F83\\u9AD8\\u7684\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u901A\\u5E38\\u8868\\u660E\\u6D4B\\u8BD5\\u66F4\\u5F7B\\u5E95\\uFF0C\\u4F46\\u5E76\\u4E0D\\u80FD\\u4FDD\\u8BC1\\u6CA1\\u6709\\u9519\\u8BEF\\u3002\\u53EF\\u4EE5\\u4F7F\\u7528 Istanbul \\u6216 Jest \\u7B49\\u5DE5\\u5177\\u6765\\u8861\\u91CF\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u662F\\u4E00\\u4E2A\\u8F6F\\u4EF6\\u6D4B\\u8BD5\\u6307\\u6807\\uFF0C\\u7528\\u4E8E\\u786E\\u5B9A\\u5728\\u81EA\\u52A8\\u5316\\u6D4B\\u8BD5\\u671F\\u95F4\\u6267\\u884C\\u7684\\u4EE3\\u7801\\u91CF\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u5173\\u4E8E\\u4EE3\\u7801\\u5E93\\u7684\\u54EA\\u4E9B\\u90E8\\u5206\\u6B63\\u5728\\u88AB\\u6D4B\\u8BD5\\u4EE5\\u53CA\\u54EA\\u4E9B\\u90E8\\u5206\\u6CA1\\u6709\\u88AB\\u6D4B\\u8BD5\\u7684\\u89C1\\u89E3\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u7684\\u7C7B\\u578B\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8BED\\u53E5\\u8986\\u76D6\\u7387\"}),\"\\uFF1A\\u8861\\u91CF\\u5DF2\\u6267\\u884C\\u7684\\u4EE3\\u7801\\u4E2D\\u7684\\u8BED\\u53E5\\u6570\\u91CF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5206\\u652F\\u8986\\u76D6\\u7387\"}),\"\\uFF1A\\u8861\\u91CF\\u6BCF\\u4E2A\\u5206\\u652F\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,e.jsx)(n.code,{children:\"if\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"else\"}),\" \\u5757\\uFF09\\u662F\\u5426\\u5DF2\\u88AB\\u6267\\u884C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u51FD\\u6570\\u8986\\u76D6\\u7387\"}),\"\\uFF1A\\u8861\\u91CF\\u4EE3\\u7801\\u4E2D\\u6BCF\\u4E2A\\u51FD\\u6570\\u662F\\u5426\\u5DF2\\u88AB\\u8C03\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u884C\\u8986\\u76D6\\u7387\"}),\"\\uFF1A\\u8861\\u91CF\\u5DF2\\u6267\\u884C\\u7684\\u4EE3\\u7801\\u884C\\u6570\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6761\\u4EF6\\u8986\\u76D6\\u7387\"}),\"\\uFF1A\\u8861\\u91CF\\u6BCF\\u4E2A\\u5E03\\u5C14\\u5B50\\u8868\\u8FBE\\u5F0F\\u662F\\u5426\\u5DF2\\u88AB\\u8BC4\\u4F30\\u4E3A\\u771F\\u548C\\u5047\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8003\\u8651\\u4EE5\\u4E0B JavaScript \\u51FD\\u6570\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function isEven(num) {\n  if (num % 2 === 0) {\n    return true;\n  } else {\n    return false;\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6B64\\u51FD\\u6570\\u7684\\u6D4B\\u8BD5\\u5957\\u4EF6\\u53EF\\u80FD\\u5982\\u4E0B\\u6240\\u793A\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`test('isEven returns true for even numbers', () => {\n  expect(isEven(2)).toBe(true);\n});\n\ntest('isEven returns false for odd numbers', () => {\n  expect(isEven(3)).toBe(false);\n});\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u6B64\\u6D4B\\u8BD5\\u5957\\u4EF6\\u4E0A\\u8FD0\\u884C\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u5DE5\\u5177\\u5C06\\u663E\\u793A 100% \\u7684\\u8BED\\u53E5\\u3001\\u5206\\u652F\\u3001\\u51FD\\u6570\\u548C\\u884C\\u8986\\u76D6\\u7387\\uFF0C\\u56E0\\u4E3A\\u4EE3\\u7801\\u7684\\u6240\\u6709\\u90E8\\u5206\\u90FD\\u5DF2\\u6267\\u884C\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5982\\u4F55\\u8861\\u91CF\\u4EE3\\u7801\\u8986\\u76D6\\u7387\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5DE5\\u5177\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Istanbul\"}),\"\\uFF1A\\u4E00\\u4E2A\\u6D41\\u884C\\u7684 JavaScript \\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u5DE5\\u5177\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Jest\"}),\"\\uFF1A\\u4E00\\u4E2A\\u6D4B\\u8BD5\\u6846\\u67B6\\uFF0C\\u5305\\u542B\\u5185\\u7F6E\\u7684\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u62A5\\u544A\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Karma\"}),\"\\uFF1A\\u4E00\\u4E2A\\u6D4B\\u8BD5\\u8FD0\\u884C\\u5668\\uFF0C\\u53EF\\u4EE5\\u914D\\u7F6E\\u4E3A\\u4F7F\\u7528 Istanbul \\u8FDB\\u884C\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528 Jest \\u7684\\u793A\\u4F8B\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8981\\u4F7F\\u7528 Jest \\u8861\\u91CF\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728\\u8FD0\\u884C\\u6D4B\\u8BD5\\u65F6\\u6DFB\\u52A0 \",(0,e.jsx)(n.code,{children:\"--coverage\"}),\" \\u6807\\u5FD7\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-bash\",children:`jest --coverage\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u5C06\\u751F\\u6210\\u4E00\\u4E2A\\u8986\\u76D6\\u7387\\u62A5\\u544A\\uFF0C\\u663E\\u793A\\u6D4B\\u8BD5\\u8986\\u76D6\\u4EE3\\u7801\\u7684\\u767E\\u5206\\u6BD4\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F7F\\u7528\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u8BC4\\u4F30\\u6D4B\\u8BD5\\u8D28\\u91CF\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8BC6\\u522B\\u672A\\u6D4B\\u8BD5\\u7684\\u4EE3\\u7801\"}),\"\\uFF1A\\u5E2E\\u52A9\\u627E\\u5230\\u672A\\u88AB\\u6D4B\\u8BD5\\u8986\\u76D6\\u7684\\u4EE3\\u7801\\u5E93\\u90E8\\u5206\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6539\\u8FDB\\u6D4B\\u8BD5\\u5957\\u4EF6\"}),\"\\uFF1A\\u9F13\\u52B1\\u7F16\\u5199\\u66F4\\u5168\\u9762\\u7684\\u6D4B\\u8BD5\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u589E\\u52A0\\u4FE1\\u5FC3\"}),\"\\uFF1A\\u66F4\\u9AD8\\u7684\\u8986\\u76D6\\u7387\\u53EF\\u4EE5\\u589E\\u52A0\\u5BF9\\u4EE3\\u7801\\u7A33\\u5B9A\\u6027\\u7684\\u4FE1\\u5FC3\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5C40\\u9650\\u6027\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u865A\\u5047\\u7684\\u5B89\\u5168\\u611F\"}),\"\\uFF1A\\u9AD8\\u8986\\u76D6\\u7387\\u5E76\\u4E0D\\u80FD\\u4FDD\\u8BC1\\u6CA1\\u6709\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8D28\\u91CF\\u80DC\\u4E8E\\u6570\\u91CF\"}),\"\\uFF1A100% \\u7684\\u8986\\u76D6\\u7387\\u5E76\\u4E0D\\u610F\\u5473\\u7740\\u6D4B\\u8BD5\\u8D28\\u91CF\\u9AD8\\u3002\\u6D4B\\u8BD5\\u8FD8\\u5E94\\u68C0\\u67E5\\u8FB9\\u7F18\\u60C5\\u51B5\\u548C\\u6F5C\\u5728\\u9519\\u8BEF\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://istanbul.js.org/\",children:\"Istanbul documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://jestjs.io/docs/en/coverage\",children:\"Jest code coverage\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://karma-runner.github.io/6.3/intro/installation.html\",children:\"Karma coverage\"})}),`\n`]})]})}function J(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(o,r)})):o(r)}var _=J;return b(E);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),j=(r,n)=>{for(var l in n)c(r,l,{get:n[l],enumerable:!0})},t=(r,n,l,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of p(n))!f.call(r,i)&&i!==l&&c(r,i,{get:()=>n[i],enumerable:!(h=g(n,i))||h.enumerable});return r};var x=(r,n,l)=>(l=r!=null?u(m(r)):{},t(n||!r||!r.__esModule?c(l,\"default\",{value:r,enumerable:!0}):l,r)),b=r=>t(c({},\"__esModule\",{value:!0}),r);var s=v((I,d)=>{d.exports=_jsx_runtime});var _={};j(_,{default:()=>a,frontmatter:()=>J});var e=x(s()),J={title:\"\\u89E3\\u91CA\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u7684\\u6982\\u5FF5\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u6765\\u8BC4\\u4F30\\u6D4B\\u8BD5\\u8D28\\u91CF\"};function o(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u662F\\u4E00\\u4E2A\\u8861\\u91CF\\u6D4B\\u8BD5\\u5957\\u4EF6\\u8FD0\\u884C\\u65F6\\u6267\\u884C\\u4EE3\\u7801\\u767E\\u5206\\u6BD4\\u7684\\u6307\\u6807\\u3002\\u5B83\\u901A\\u8FC7\\u8BC6\\u522B\\u4EE3\\u7801\\u5E93\\u4E2D\\u672A\\u6D4B\\u8BD5\\u7684\\u90E8\\u5206\\u6765\\u5E2E\\u52A9\\u8BC4\\u4F30\\u6D4B\\u8BD5\\u7684\\u8D28\\u91CF\\u3002\\u8F83\\u9AD8\\u7684\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u901A\\u5E38\\u8868\\u660E\\u6D4B\\u8BD5\\u66F4\\u5F7B\\u5E95\\uFF0C\\u4F46\\u5E76\\u4E0D\\u80FD\\u4FDD\\u8BC1\\u6CA1\\u6709\\u9519\\u8BEF\\u3002\\u53EF\\u4EE5\\u4F7F\\u7528 Istanbul \\u6216 Jest \\u7B49\\u5DE5\\u5177\\u6765\\u8861\\u91CF\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u662F\\u4E00\\u4E2A\\u8F6F\\u4EF6\\u6D4B\\u8BD5\\u6307\\u6807\\uFF0C\\u7528\\u4E8E\\u786E\\u5B9A\\u5728\\u81EA\\u52A8\\u5316\\u6D4B\\u8BD5\\u671F\\u95F4\\u6267\\u884C\\u7684\\u4EE3\\u7801\\u91CF\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u5173\\u4E8E\\u4EE3\\u7801\\u5E93\\u7684\\u54EA\\u4E9B\\u90E8\\u5206\\u6B63\\u5728\\u88AB\\u6D4B\\u8BD5\\u4EE5\\u53CA\\u54EA\\u4E9B\\u90E8\\u5206\\u6CA1\\u6709\\u88AB\\u6D4B\\u8BD5\\u7684\\u89C1\\u89E3\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u7684\\u7C7B\\u578B\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8BED\\u53E5\\u8986\\u76D6\\u7387\"}),\"\\uFF1A\\u8861\\u91CF\\u5DF2\\u6267\\u884C\\u7684\\u4EE3\\u7801\\u4E2D\\u7684\\u8BED\\u53E5\\u6570\\u91CF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5206\\u652F\\u8986\\u76D6\\u7387\"}),\"\\uFF1A\\u8861\\u91CF\\u6BCF\\u4E2A\\u5206\\u652F\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,e.jsx)(n.code,{children:\"if\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"else\"}),\" \\u5757\\uFF09\\u662F\\u5426\\u5DF2\\u88AB\\u6267\\u884C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u51FD\\u6570\\u8986\\u76D6\\u7387\"}),\"\\uFF1A\\u8861\\u91CF\\u4EE3\\u7801\\u4E2D\\u6BCF\\u4E2A\\u51FD\\u6570\\u662F\\u5426\\u5DF2\\u88AB\\u8C03\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u884C\\u8986\\u76D6\\u7387\"}),\"\\uFF1A\\u8861\\u91CF\\u5DF2\\u6267\\u884C\\u7684\\u4EE3\\u7801\\u884C\\u6570\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6761\\u4EF6\\u8986\\u76D6\\u7387\"}),\"\\uFF1A\\u8861\\u91CF\\u6BCF\\u4E2A\\u5E03\\u5C14\\u5B50\\u8868\\u8FBE\\u5F0F\\u662F\\u5426\\u5DF2\\u88AB\\u8BC4\\u4F30\\u4E3A\\u771F\\u548C\\u5047\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8003\\u8651\\u4EE5\\u4E0B JavaScript \\u51FD\\u6570\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function isEven(num) {\n  if (num % 2 === 0) {\n    return true;\n  } else {\n    return false;\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6B64\\u51FD\\u6570\\u7684\\u6D4B\\u8BD5\\u5957\\u4EF6\\u53EF\\u80FD\\u5982\\u4E0B\\u6240\\u793A\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`test('isEven returns true for even numbers', () => {\n  expect(isEven(2)).toBe(true);\n});\n\ntest('isEven returns false for odd numbers', () => {\n  expect(isEven(3)).toBe(false);\n});\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u6B64\\u6D4B\\u8BD5\\u5957\\u4EF6\\u4E0A\\u8FD0\\u884C\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u5DE5\\u5177\\u5C06\\u663E\\u793A 100% \\u7684\\u8BED\\u53E5\\u3001\\u5206\\u652F\\u3001\\u51FD\\u6570\\u548C\\u884C\\u8986\\u76D6\\u7387\\uFF0C\\u56E0\\u4E3A\\u4EE3\\u7801\\u7684\\u6240\\u6709\\u90E8\\u5206\\u90FD\\u5DF2\\u6267\\u884C\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5982\\u4F55\\u8861\\u91CF\\u4EE3\\u7801\\u8986\\u76D6\\u7387\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5DE5\\u5177\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Istanbul\"}),\"\\uFF1A\\u4E00\\u4E2A\\u6D41\\u884C\\u7684 JavaScript \\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u5DE5\\u5177\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Jest\"}),\"\\uFF1A\\u4E00\\u4E2A\\u6D4B\\u8BD5\\u6846\\u67B6\\uFF0C\\u5305\\u542B\\u5185\\u7F6E\\u7684\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u62A5\\u544A\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Karma\"}),\"\\uFF1A\\u4E00\\u4E2A\\u6D4B\\u8BD5\\u8FD0\\u884C\\u5668\\uFF0C\\u53EF\\u4EE5\\u914D\\u7F6E\\u4E3A\\u4F7F\\u7528 Istanbul \\u8FDB\\u884C\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528 Jest \\u7684\\u793A\\u4F8B\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8981\\u4F7F\\u7528 Jest \\u8861\\u91CF\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728\\u8FD0\\u884C\\u6D4B\\u8BD5\\u65F6\\u6DFB\\u52A0 \",(0,e.jsx)(n.code,{children:\"--coverage\"}),\" \\u6807\\u5FD7\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-bash\",children:`jest --coverage\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u5C06\\u751F\\u6210\\u4E00\\u4E2A\\u8986\\u76D6\\u7387\\u62A5\\u544A\\uFF0C\\u663E\\u793A\\u6D4B\\u8BD5\\u8986\\u76D6\\u4EE3\\u7801\\u7684\\u767E\\u5206\\u6BD4\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F7F\\u7528\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u8BC4\\u4F30\\u6D4B\\u8BD5\\u8D28\\u91CF\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8BC6\\u522B\\u672A\\u6D4B\\u8BD5\\u7684\\u4EE3\\u7801\"}),\"\\uFF1A\\u5E2E\\u52A9\\u627E\\u5230\\u672A\\u88AB\\u6D4B\\u8BD5\\u8986\\u76D6\\u7684\\u4EE3\\u7801\\u5E93\\u90E8\\u5206\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6539\\u8FDB\\u6D4B\\u8BD5\\u5957\\u4EF6\"}),\"\\uFF1A\\u9F13\\u52B1\\u7F16\\u5199\\u66F4\\u5168\\u9762\\u7684\\u6D4B\\u8BD5\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u589E\\u52A0\\u4FE1\\u5FC3\"}),\"\\uFF1A\\u66F4\\u9AD8\\u7684\\u8986\\u76D6\\u7387\\u53EF\\u4EE5\\u589E\\u52A0\\u5BF9\\u4EE3\\u7801\\u7A33\\u5B9A\\u6027\\u7684\\u4FE1\\u5FC3\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5C40\\u9650\\u6027\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u865A\\u5047\\u7684\\u5B89\\u5168\\u611F\"}),\"\\uFF1A\\u9AD8\\u8986\\u76D6\\u7387\\u5E76\\u4E0D\\u80FD\\u4FDD\\u8BC1\\u6CA1\\u6709\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8D28\\u91CF\\u80DC\\u4E8E\\u6570\\u91CF\"}),\"\\uFF1A100% \\u7684\\u8986\\u76D6\\u7387\\u5E76\\u4E0D\\u610F\\u5473\\u7740\\u6D4B\\u8BD5\\u8D28\\u91CF\\u9AD8\\u3002\\u6D4B\\u8BD5\\u8FD8\\u5E94\\u68C0\\u67E5\\u8FB9\\u7F18\\u60C5\\u51B5\\u548C\\u6F5C\\u5728\\u9519\\u8BEF\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://istanbul.js.org/\",children:\"Istanbul documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://jestjs.io/docs/en/coverage\",children:\"Jest code coverage\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://karma-runner.github.io/6.3/intro/installation.html\",children:\"Karma coverage\"})}),`\n`]})]})}function a(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(o,{...r})}):o(r)}return b(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/en-US.json
index 6f35640ee..458fa6b9f 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),m=(n,e)=>{for(var r in e)i(n,r,{get:e[r],enumerable:!0})},o=(n,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!y.call(n,c)&&c!==r&&i(n,c,{get:()=>e[c],enumerable:!(s=u(e,c))||s.enumerable});return n};var S=(n,e,r)=>(r=n!=null?d(f(n)):{},o(e||!n||!n.__esModule?i(r,\"default\",{value:n,enumerable:!0}):r,n)),P=n=>o(i({},\"__esModule\",{value:!0}),n);var a=g((k,l)=>{l.exports=_jsx_runtime});var b={};m(b,{default:()=>w,frontmatter:()=>C});var t=S(a()),C={title:\"Explain the concept of Content Security Policy (CSP) and how it enhances security\"};function h(n){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",h4:\"h4\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Content Security Policy (CSP) is a security feature that helps prevent various types of attacks, such as Cross-Site Scripting (XSS) and data injection attacks, by specifying which content sources are trusted. It works by allowing developers to define a whitelist of trusted sources for content like scripts, styles, and images. This is done through HTTP headers or meta tags. For example, you can use the \",(0,t.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" header to specify that only scripts from your own domain should be executed:\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: script-src 'self'\n`})}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"What is Content Security Policy (CSP)?\"}),`\n`,(0,t.jsx)(e.p,{children:\"Content Security Policy (CSP) is a security standard introduced to mitigate a range of attacks, including Cross-Site Scripting (XSS) and data injection attacks. CSP allows web developers to control the resources that a user agent is allowed to load for a given page. By specifying a whitelist of trusted content sources, CSP helps to prevent the execution of malicious content.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"How CSP works\"}),`\n`,(0,t.jsx)(e.p,{children:\"CSP works by allowing developers to define a set of rules that specify which sources of content are considered trustworthy. These rules are delivered to the browser via HTTP headers or meta tags. When the browser loads a page, it checks the CSP rules and blocks any content that does not match the specified sources.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Example of a CSP header\"}),`\n`,(0,t.jsx)(e.p,{children:\"Here is an example of a simple CSP header that only allows scripts from the same origin:\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: script-src 'self'\n`})}),`\n`,(0,t.jsx)(e.p,{children:\"This policy tells the browser to only execute scripts that are loaded from the same origin as the page itself.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Common directives\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"default-src\"}),\": Serves as a fallback for other resource types when they are not explicitly defined.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"script-src\"}),\": Specifies valid sources for JavaScript.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"style-src\"}),\": Specifies valid sources for CSS.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"img-src\"}),\": Specifies valid sources for images.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"connect-src\"}),\": Specifies valid sources for AJAX, WebSocket, and EventSource connections.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"font-src\"}),\": Specifies valid sources for fonts.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"object-src\"}),\": Specifies valid sources for plugins like Flash.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Benefits of using CSP\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Mitigates XSS attacks\"}),\": By restricting the sources from which scripts can be loaded, CSP helps to prevent the execution of malicious scripts.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Prevents data injection attacks\"}),\": CSP can block the loading of malicious resources that could be used to steal data or perform other harmful actions.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Improves security posture\"}),\": Implementing CSP is a proactive measure that enhances the overall security of a web application.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Implementing CSP\"}),`\n`,(0,t.jsx)(e.p,{children:\"CSP can be implemented using HTTP headers or meta tags. The HTTP header approach is generally preferred because it is more secure and cannot be easily overridden by attackers.\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Using HTTP headers\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com\n`})}),`\n`,(0,t.jsx)(e.h4,{children:\"Using meta tags\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-html\",children:`<meta\n  http-equiv=\"Content-Security-Policy\"\n  content=\"default-src 'self'; script-src 'self' https://trusted.cdn.com\" />\n`})}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP\",children:\"MDN Web Docs: Content Security Policy (CSP)\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://owasp.org/www-project-secure-headers/#content-security-policy\",children:\"OWASP: Content Security Policy\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/security/csp\",children:\"Google Developers: CSP: Content Security Policy\"})}),`\n`]})]})}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 w=v;return P(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),S=(n,e)=>{for(var r in e)i(n,r,{get:e[r],enumerable:!0})},o=(n,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of f(e))!g.call(n,c)&&c!==r&&i(n,c,{get:()=>e[c],enumerable:!(s=p(e,c))||s.enumerable});return n};var P=(n,e,r)=>(r=n!=null?u(y(n)):{},o(e||!n||!n.__esModule?i(r,\"default\",{value:n,enumerable:!0}):r,n)),C=n=>o(i({},\"__esModule\",{value:!0}),n);var a=m((x,l)=>{l.exports=_jsx_runtime});var w={};S(w,{default:()=>d,frontmatter:()=>v});var t=P(a()),v={title:\"Explain the concept of Content Security Policy (CSP) and how it enhances security\"};function h(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Content Security Policy (CSP) is a security feature that helps prevent various types of attacks, such as Cross-Site Scripting (XSS) and data injection attacks, by specifying which content sources are trusted. It works by allowing developers to define a whitelist of trusted sources for content like scripts, styles, and images. This is done through HTTP headers or meta tags. For example, you can use the \",(0,t.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" header to specify that only scripts from your own domain should be executed:\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: script-src 'self'\n`})}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"What is Content Security Policy (CSP)?\"}),`\n`,(0,t.jsx)(e.p,{children:\"Content Security Policy (CSP) is a security standard introduced to mitigate a range of attacks, including Cross-Site Scripting (XSS) and data injection attacks. CSP allows web developers to control the resources that a user agent is allowed to load for a given page. By specifying a whitelist of trusted content sources, CSP helps to prevent the execution of malicious content.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"How CSP works\"}),`\n`,(0,t.jsx)(e.p,{children:\"CSP works by allowing developers to define a set of rules that specify which sources of content are considered trustworthy. These rules are delivered to the browser via HTTP headers or meta tags. When the browser loads a page, it checks the CSP rules and blocks any content that does not match the specified sources.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Example of a CSP header\"}),`\n`,(0,t.jsx)(e.p,{children:\"Here is an example of a simple CSP header that only allows scripts from the same origin:\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: script-src 'self'\n`})}),`\n`,(0,t.jsx)(e.p,{children:\"This policy tells the browser to only execute scripts that are loaded from the same origin as the page itself.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Common directives\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"default-src\"}),\": Serves as a fallback for other resource types when they are not explicitly defined.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"script-src\"}),\": Specifies valid sources for JavaScript.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"style-src\"}),\": Specifies valid sources for CSS.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"img-src\"}),\": Specifies valid sources for images.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"connect-src\"}),\": Specifies valid sources for AJAX, WebSocket, and EventSource connections.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"font-src\"}),\": Specifies valid sources for fonts.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"object-src\"}),\": Specifies valid sources for plugins like Flash.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Benefits of using CSP\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Mitigates XSS attacks\"}),\": By restricting the sources from which scripts can be loaded, CSP helps to prevent the execution of malicious scripts.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Prevents data injection attacks\"}),\": CSP can block the loading of malicious resources that could be used to steal data or perform other harmful actions.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Improves security posture\"}),\": Implementing CSP is a proactive measure that enhances the overall security of a web application.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Implementing CSP\"}),`\n`,(0,t.jsx)(e.p,{children:\"CSP can be implemented using HTTP headers or meta tags. The HTTP header approach is generally preferred because it is more secure and cannot be easily overridden by attackers.\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Using HTTP headers\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com\n`})}),`\n`,(0,t.jsx)(e.h4,{children:\"Using meta tags\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-html\",children:`<meta\n  http-equiv=\"Content-Security-Policy\"\n  content=\"default-src 'self'; script-src 'self' https://trusted.cdn.com\" />\n`})}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP\",children:\"MDN Web Docs: Content Security Policy (CSP)\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://owasp.org/www-project-secure-headers/#content-security-policy\",children:\"OWASP: Content Security Policy\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/security/csp\",children:\"Google Developers: CSP: Content Security Policy\"})}),`\n`]})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(h,{...n})}):h(n)}return C(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/zh-CN.json
index effd0f4f4..de36c3077 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var C=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),m=(c,e)=>{for(var t in e)l(c,t,{get:e[t],enumerable:!0})},h=(c,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!S.call(c,r)&&r!==t&&l(c,r,{get:()=>e[r],enumerable:!(i=p(e,r))||i.enumerable});return c};var g=(c,e,t)=>(t=c!=null?a(P(c)):{},h(e||!c||!c.__esModule?l(t,\"default\",{value:c,enumerable:!0}):t,c)),f=c=>h(l({},\"__esModule\",{value:!0}),c);var d=C((b,s)=>{s.exports=_jsx_runtime});var j={};m(j,{default:()=>x,frontmatter:()=>y});var n=g(d()),y={title:\"\\u89E3\\u91CA\\u5185\\u5BB9\\u5B89\\u5168\\u7B56\\u7565 (CSP) \\u7684\\u6982\\u5FF5\\u4EE5\\u53CA\\u5B83\\u5982\\u4F55\\u589E\\u5F3A\\u5B89\\u5168\\u6027\"};function o(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",h4:\"h4\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5185\\u5BB9\\u5B89\\u5168\\u7B56\\u7565 (CSP) \\u662F\\u4E00\\u9879\\u5B89\\u5168\\u529F\\u80FD\\uFF0C\\u901A\\u8FC7\\u6307\\u5B9A\\u53D7\\u4FE1\\u4EFB\\u7684\\u5185\\u5BB9\\u6765\\u6E90\\uFF0C\\u5E2E\\u52A9\\u9632\\u6B62\\u5404\\u79CD\\u7C7B\\u578B\\u7684\\u653B\\u51FB\\uFF0C\\u4F8B\\u5982\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS) \\u548C\\u6570\\u636E\\u6CE8\\u5165\\u653B\\u51FB\\u3002\\u5B83\\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\u662F\\u5141\\u8BB8\\u5F00\\u53D1\\u4EBA\\u5458\\u5B9A\\u4E49\\u4E00\\u4E2A\\u53D7\\u4FE1\\u4EFB\\u7684\\u811A\\u672C\\u3001\\u6837\\u5F0F\\u548C\\u56FE\\u50CF\\u7B49\\u5185\\u5BB9\\u6765\\u6E90\\u7684\\u767D\\u540D\\u5355\\u3002\\u8FD9\\u901A\\u8FC7 HTTP \\u6807\\u5934\\u6216 meta \\u6807\\u7B7E\\u5B8C\\u6210\\u3002\\u4F8B\\u5982\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" \\u6807\\u5934\\u6765\\u6307\\u5B9A\\u4EC5\\u5E94\\u6267\\u884C\\u6765\\u81EA\\u60A8\\u81EA\\u5DF1\\u57DF\\u7684\\u811A\\u672C\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: script-src 'self'\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u5185\\u5BB9\\u5B89\\u5168\\u7B56\\u7565 (CSP)\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5185\\u5BB9\\u5B89\\u5168\\u7B56\\u7565 (CSP) \\u662F\\u4E00\\u9879\\u5B89\\u5168\\u6807\\u51C6\\uFF0C\\u65E8\\u5728\\u7F13\\u89E3\\u4E00\\u7CFB\\u5217\\u653B\\u51FB\\uFF0C\\u5305\\u62EC\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS) \\u548C\\u6570\\u636E\\u6CE8\\u5165\\u653B\\u51FB\\u3002CSP \\u5141\\u8BB8 Web \\u5F00\\u53D1\\u4EBA\\u5458\\u63A7\\u5236\\u7528\\u6237\\u4EE3\\u7406\\u5141\\u8BB8\\u4E3A\\u7ED9\\u5B9A\\u9875\\u9762\\u52A0\\u8F7D\\u7684\\u8D44\\u6E90\\u3002\\u901A\\u8FC7\\u6307\\u5B9A\\u53D7\\u4FE1\\u4EFB\\u5185\\u5BB9\\u6765\\u6E90\\u7684\\u767D\\u540D\\u5355\\uFF0CCSP \\u6709\\u52A9\\u4E8E\\u9632\\u6B62\\u6076\\u610F\\u5185\\u5BB9\\u7684\\u6267\\u884C\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"CSP \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,n.jsx)(e.p,{children:\"CSP \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\u662F\\u5141\\u8BB8\\u5F00\\u53D1\\u4EBA\\u5458\\u5B9A\\u4E49\\u4E00\\u7EC4\\u89C4\\u5219\\uFF0C\\u7528\\u4E8E\\u6307\\u5B9A\\u54EA\\u4E9B\\u5185\\u5BB9\\u6765\\u6E90\\u88AB\\u8BA4\\u4E3A\\u662F\\u53EF\\u4FE1\\u7684\\u3002\\u8FD9\\u4E9B\\u89C4\\u5219\\u901A\\u8FC7 HTTP \\u6807\\u5934\\u6216 meta \\u6807\\u7B7E\\u4F20\\u9012\\u7ED9\\u6D4F\\u89C8\\u5668\\u3002\\u5F53\\u6D4F\\u89C8\\u5668\\u52A0\\u8F7D\\u9875\\u9762\\u65F6\\uFF0C\\u5B83\\u4F1A\\u68C0\\u67E5 CSP \\u89C4\\u5219\\u5E76\\u963B\\u6B62\\u4EFB\\u4F55\\u4E0E\\u6307\\u5B9A\\u6765\\u6E90\\u4E0D\\u5339\\u914D\\u7684\\u5185\\u5BB9\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"CSP \\u6807\\u5934\\u7684\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684 CSP \\u6807\\u5934\\u7684\\u793A\\u4F8B\\uFF0C\\u8BE5\\u6807\\u5934\\u4EC5\\u5141\\u8BB8\\u6765\\u81EA\\u540C\\u4E00\\u6765\\u6E90\\u7684\\u811A\\u672C\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: script-src 'self'\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u7B56\\u7565\\u544A\\u8BC9\\u6D4F\\u89C8\\u5668\\u4EC5\\u6267\\u884C\\u4ECE\\u4E0E\\u9875\\u9762\\u672C\\u8EAB\\u76F8\\u540C\\u7684\\u6765\\u6E90\\u52A0\\u8F7D\\u7684\\u811A\\u672C\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5E38\\u7528\\u6307\\u4EE4\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"object-src\"}),\"\\uFF1A\\u6307\\u5B9A Flash \\u7B49\\u63D2\\u4EF6\\u7684\\u6709\\u6548\\u6765\\u6E90\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 CSP \\u7684\\u597D\\u5904\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u63D0\\u9AD8\\u5B89\\u5168\\u6001\\u52BF\"}),\"\\uFF1A\\u5B9E\\u65BD CSP \\u662F\\u4E00\\u9879\\u79EF\\u6781\\u63AA\\u65BD\\uFF0C\\u53EF\\u589E\\u5F3A Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u6574\\u4F53\\u5B89\\u5168\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B9E\\u65BD CSP\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u53EF\\u4EE5\\u4F7F\\u7528 HTTP \\u6807\\u5934\\u6216 meta \\u6807\\u7B7E\\u6765\\u5B9E\\u73B0 CSP\\u3002\\u901A\\u5E38\\u9996\\u9009 HTTP \\u6807\\u5934\\u65B9\\u6CD5\\uFF0C\\u56E0\\u4E3A\\u5B83\\u66F4\\u5B89\\u5168\\uFF0C\\u5E76\\u4E14\\u4E0D\\u6613\\u88AB\\u653B\\u51FB\\u8005\\u8986\\u76D6\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4F7F\\u7528 HTTP \\u6807\\u5934\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4F7F\\u7528 meta \\u6807\\u7B7E\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<meta\n  http-equiv=\"Content-Security-Policy\"\n  content=\"default-src 'self'; script-src 'self' https://trusted.cdn.com\" />\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/security/csp\",children:\"Google Developers: CSP: Content Security Policy\"})}),`\n`]})]})}function T(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(o,c)})):o(c)}var x=T;return f(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var m=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),g=(c,e)=>{for(var r in e)l(c,r,{get:e[r],enumerable:!0})},i=(c,e,r,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of P(e))!C.call(c,t)&&t!==r&&l(c,t,{get:()=>e[t],enumerable:!(h=u(e,t))||h.enumerable});return c};var f=(c,e,r)=>(r=c!=null?p(S(c)):{},i(e||!c||!c.__esModule?l(r,\"default\",{value:c,enumerable:!0}):r,c)),y=c=>i(l({},\"__esModule\",{value:!0}),c);var s=m((j,d)=>{d.exports=_jsx_runtime});var x={};g(x,{default:()=>a,frontmatter:()=>T});var n=f(s()),T={title:\"\\u89E3\\u91CA\\u5185\\u5BB9\\u5B89\\u5168\\u7B56\\u7565 (CSP) \\u7684\\u6982\\u5FF5\\u4EE5\\u53CA\\u5B83\\u5982\\u4F55\\u589E\\u5F3A\\u5B89\\u5168\\u6027\"};function o(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5185\\u5BB9\\u5B89\\u5168\\u7B56\\u7565 (CSP) \\u662F\\u4E00\\u9879\\u5B89\\u5168\\u529F\\u80FD\\uFF0C\\u901A\\u8FC7\\u6307\\u5B9A\\u53D7\\u4FE1\\u4EFB\\u7684\\u5185\\u5BB9\\u6765\\u6E90\\uFF0C\\u5E2E\\u52A9\\u9632\\u6B62\\u5404\\u79CD\\u7C7B\\u578B\\u7684\\u653B\\u51FB\\uFF0C\\u4F8B\\u5982\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS) \\u548C\\u6570\\u636E\\u6CE8\\u5165\\u653B\\u51FB\\u3002\\u5B83\\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\u662F\\u5141\\u8BB8\\u5F00\\u53D1\\u4EBA\\u5458\\u5B9A\\u4E49\\u4E00\\u4E2A\\u53D7\\u4FE1\\u4EFB\\u7684\\u811A\\u672C\\u3001\\u6837\\u5F0F\\u548C\\u56FE\\u50CF\\u7B49\\u5185\\u5BB9\\u6765\\u6E90\\u7684\\u767D\\u540D\\u5355\\u3002\\u8FD9\\u901A\\u8FC7 HTTP \\u6807\\u5934\\u6216 meta \\u6807\\u7B7E\\u5B8C\\u6210\\u3002\\u4F8B\\u5982\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" \\u6807\\u5934\\u6765\\u6307\\u5B9A\\u4EC5\\u5E94\\u6267\\u884C\\u6765\\u81EA\\u60A8\\u81EA\\u5DF1\\u57DF\\u7684\\u811A\\u672C\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: script-src 'self'\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u5185\\u5BB9\\u5B89\\u5168\\u7B56\\u7565 (CSP)\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5185\\u5BB9\\u5B89\\u5168\\u7B56\\u7565 (CSP) \\u662F\\u4E00\\u9879\\u5B89\\u5168\\u6807\\u51C6\\uFF0C\\u65E8\\u5728\\u7F13\\u89E3\\u4E00\\u7CFB\\u5217\\u653B\\u51FB\\uFF0C\\u5305\\u62EC\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS) \\u548C\\u6570\\u636E\\u6CE8\\u5165\\u653B\\u51FB\\u3002CSP \\u5141\\u8BB8 Web \\u5F00\\u53D1\\u4EBA\\u5458\\u63A7\\u5236\\u7528\\u6237\\u4EE3\\u7406\\u5141\\u8BB8\\u4E3A\\u7ED9\\u5B9A\\u9875\\u9762\\u52A0\\u8F7D\\u7684\\u8D44\\u6E90\\u3002\\u901A\\u8FC7\\u6307\\u5B9A\\u53D7\\u4FE1\\u4EFB\\u5185\\u5BB9\\u6765\\u6E90\\u7684\\u767D\\u540D\\u5355\\uFF0CCSP \\u6709\\u52A9\\u4E8E\\u9632\\u6B62\\u6076\\u610F\\u5185\\u5BB9\\u7684\\u6267\\u884C\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"CSP \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,n.jsx)(e.p,{children:\"CSP \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\u662F\\u5141\\u8BB8\\u5F00\\u53D1\\u4EBA\\u5458\\u5B9A\\u4E49\\u4E00\\u7EC4\\u89C4\\u5219\\uFF0C\\u7528\\u4E8E\\u6307\\u5B9A\\u54EA\\u4E9B\\u5185\\u5BB9\\u6765\\u6E90\\u88AB\\u8BA4\\u4E3A\\u662F\\u53EF\\u4FE1\\u7684\\u3002\\u8FD9\\u4E9B\\u89C4\\u5219\\u901A\\u8FC7 HTTP \\u6807\\u5934\\u6216 meta \\u6807\\u7B7E\\u4F20\\u9012\\u7ED9\\u6D4F\\u89C8\\u5668\\u3002\\u5F53\\u6D4F\\u89C8\\u5668\\u52A0\\u8F7D\\u9875\\u9762\\u65F6\\uFF0C\\u5B83\\u4F1A\\u68C0\\u67E5 CSP \\u89C4\\u5219\\u5E76\\u963B\\u6B62\\u4EFB\\u4F55\\u4E0E\\u6307\\u5B9A\\u6765\\u6E90\\u4E0D\\u5339\\u914D\\u7684\\u5185\\u5BB9\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"CSP \\u6807\\u5934\\u7684\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684 CSP \\u6807\\u5934\\u7684\\u793A\\u4F8B\\uFF0C\\u8BE5\\u6807\\u5934\\u4EC5\\u5141\\u8BB8\\u6765\\u81EA\\u540C\\u4E00\\u6765\\u6E90\\u7684\\u811A\\u672C\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: script-src 'self'\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u7B56\\u7565\\u544A\\u8BC9\\u6D4F\\u89C8\\u5668\\u4EC5\\u6267\\u884C\\u4ECE\\u4E0E\\u9875\\u9762\\u672C\\u8EAB\\u76F8\\u540C\\u7684\\u6765\\u6E90\\u52A0\\u8F7D\\u7684\\u811A\\u672C\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5E38\\u7528\\u6307\\u4EE4\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"object-src\"}),\"\\uFF1A\\u6307\\u5B9A Flash \\u7B49\\u63D2\\u4EF6\\u7684\\u6709\\u6548\\u6765\\u6E90\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 CSP \\u7684\\u597D\\u5904\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u63D0\\u9AD8\\u5B89\\u5168\\u6001\\u52BF\"}),\"\\uFF1A\\u5B9E\\u65BD CSP \\u662F\\u4E00\\u9879\\u79EF\\u6781\\u63AA\\u65BD\\uFF0C\\u53EF\\u589E\\u5F3A Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u6574\\u4F53\\u5B89\\u5168\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B9E\\u65BD CSP\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u53EF\\u4EE5\\u4F7F\\u7528 HTTP \\u6807\\u5934\\u6216 meta \\u6807\\u7B7E\\u6765\\u5B9E\\u73B0 CSP\\u3002\\u901A\\u5E38\\u9996\\u9009 HTTP \\u6807\\u5934\\u65B9\\u6CD5\\uFF0C\\u56E0\\u4E3A\\u5B83\\u66F4\\u5B89\\u5168\\uFF0C\\u5E76\\u4E14\\u4E0D\\u6613\\u88AB\\u653B\\u51FB\\u8005\\u8986\\u76D6\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4F7F\\u7528 HTTP \\u6807\\u5934\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4F7F\\u7528 meta \\u6807\\u7B7E\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<meta\n  http-equiv=\"Content-Security-Policy\"\n  content=\"default-src 'self'; script-src 'self' https://trusted.cdn.com\" />\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/security/csp\",children:\"Google Developers: CSP: Content Security Policy\"})}),`\n`]})]})}function a(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(o,{...c})}):o(c)}return y(x);})();\n;return Component;"
 }
\ No newline at end of file
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 2fdce0a39..2dc64d837 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
@@ -29,5 +29,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var S=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var i in e)s(n,i,{get:e[i],enumerable:!0})},a=(n,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of g(e))!m.call(n,r)&&r!==i&&s(n,r,{get:()=>e[r],enumerable:!(o=u(e,r))||o.enumerable});return n};var C=(n,e,i)=>(i=n!=null?d(p(n)):{},a(e||!n||!n.__esModule?s(i,\"default\",{value:n,enumerable:!0}):i,n)),b=n=>a(s({},\"__esModule\",{value:!0}),n);var h=S((q,c)=>{c.exports=_jsx_runtime});var v={};f(v,{default:()=>R,frontmatter:()=>k});var t=C(h()),k={title:\"Explain the concept of Cross-Site Request Forgery (CSRF) and its mitigation techniques\"};function l(n){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",h4:\"h4\",pre:\"pre\",code:\"code\",ul:\"ul\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:\"Cross-Site Request Forgery (CSRF) is an attack where a malicious website tricks a user's browser into making an unwanted request to another site where the user is authenticated. This can lead to unauthorized actions being performed on behalf of the user. Mitigation techniques include using anti-CSRF tokens, SameSite cookies, and ensuring proper CORS configurations.\"}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"Cross-Site Request Forgery (CSRF) and its mitigation techniques\"}),`\n`,(0,t.jsx)(e.h3,{children:\"What is CSRF?\"}),`\n`,(0,t.jsx)(e.p,{children:\"Cross-Site Request Forgery (CSRF) is a type of attack that occurs when a malicious website causes a user's browser to perform an unwanted action on a different site where the user is authenticated. This can lead to unauthorized actions such as changing account details, making purchases, or other actions that the user did not intend to perform.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"How does CSRF work?\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"User authentication\"}),\": The user logs into a trusted website (e.g., a banking site) and receives an authentication cookie.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Malicious site\"}),\": The user visits a malicious website while still logged into the trusted site.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Unwanted request\"}),\": The malicious site contains code that makes a request to the trusted site, using the user's authentication cookie to perform actions on behalf of the user.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Mitigation techniques\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Anti-CSRF tokens\"}),`\n`,(0,t.jsx)(e.p,{children:\"One of the most effective ways to prevent CSRF attacks is by using anti-CSRF tokens. These tokens are unique and unpredictable values that are generated by the server and included in forms or requests. The server then validates the token to ensure the request is legitimate.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-html\",children:`<form method=\"POST\" action=\"/update-profile\">\n  <input type=\"hidden\" name=\"csrf_token\" value=\"unique_token_value\" />\n  <!-- other form fields -->\n  <button type=\"submit\">Update Profile</button>\n</form>\n`})}),`\n`,(0,t.jsx)(e.p,{children:\"On the server side, the token is validated to ensure it matches the expected value.\"}),`\n`,(0,t.jsx)(e.h4,{children:\"SameSite cookies\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The \",(0,t.jsx)(e.code,{children:\"SameSite\"}),\" attribute on cookies can help mitigate CSRF attacks by restricting how cookies are sent with cross-site requests. The \",(0,t.jsx)(e.code,{children:\"SameSite\"}),\" attribute can be set to \",(0,t.jsx)(e.code,{children:\"Strict\"}),\", \",(0,t.jsx)(e.code,{children:\"Lax\"}),\", or \",(0,t.jsx)(e.code,{children:\"None\"}),\".\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-http\",children:`Set-Cookie: sessionId=abc123; SameSite=Strict\n`})}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"Strict\"}),\": Cookies are only sent in a first-party context and not with requests initiated by third-party websites.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"Lax\"}),\": Cookies are not sent on normal cross-site subrequests (e.g., loading images), but are sent when a user navigates to the URL from an external site (e.g., following a link).\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"None\"}),\": Cookies are sent in all contexts, including cross-origin requests.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h4,{children:\"CORS (Cross-Origin Resource Sharing)\"}),`\n`,(0,t.jsx)(e.p,{children:\"Properly configuring CORS can help prevent CSRF attacks by ensuring that only trusted origins can make requests to your server. This involves setting appropriate headers on the server to specify which origins are allowed to access resources.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-http\",children:`Access-Control-Allow-Origin: https://trustedwebsite.com\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html\",children:\"OWASP CSRF Prevention Cheat Sheet\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite\",children:\"MDN Web Docs: SameSite cookies\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS\",children:\"MDN Web Docs: Cross-Origin Resource Sharing (CORS)\"})}),`\n`]})]})}function w(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(l,n)})):l(n)}var R=w;return b(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),C=(n,e)=>{for(var i in e)s(n,i,{get:e[i],enumerable:!0})},a=(n,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!S.call(n,r)&&r!==i&&s(n,r,{get:()=>e[r],enumerable:!(o=g(e,r))||o.enumerable});return n};var k=(n,e,i)=>(i=n!=null?u(m(n)):{},a(e||!n||!n.__esModule?s(i,\"default\",{value:n,enumerable:!0}):i,n)),b=n=>a(s({},\"__esModule\",{value:!0}),n);var h=f((y,c)=>{c.exports=_jsx_runtime});var R={};C(R,{default:()=>d,frontmatter:()=>w});var t=k(h()),w={title:\"Explain the concept of Cross-Site Request Forgery (CSRF) and its mitigation techniques\"};function l(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:\"Cross-Site Request Forgery (CSRF) is an attack where a malicious website tricks a user's browser into making an unwanted request to another site where the user is authenticated. This can lead to unauthorized actions being performed on behalf of the user. Mitigation techniques include using anti-CSRF tokens, SameSite cookies, and ensuring proper CORS configurations.\"}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"Cross-Site Request Forgery (CSRF) and its mitigation techniques\"}),`\n`,(0,t.jsx)(e.h3,{children:\"What is CSRF?\"}),`\n`,(0,t.jsx)(e.p,{children:\"Cross-Site Request Forgery (CSRF) is a type of attack that occurs when a malicious website causes a user's browser to perform an unwanted action on a different site where the user is authenticated. This can lead to unauthorized actions such as changing account details, making purchases, or other actions that the user did not intend to perform.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"How does CSRF work?\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"User authentication\"}),\": The user logs into a trusted website (e.g., a banking site) and receives an authentication cookie.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Malicious site\"}),\": The user visits a malicious website while still logged into the trusted site.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Unwanted request\"}),\": The malicious site contains code that makes a request to the trusted site, using the user's authentication cookie to perform actions on behalf of the user.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Mitigation techniques\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Anti-CSRF tokens\"}),`\n`,(0,t.jsx)(e.p,{children:\"One of the most effective ways to prevent CSRF attacks is by using anti-CSRF tokens. These tokens are unique and unpredictable values that are generated by the server and included in forms or requests. The server then validates the token to ensure the request is legitimate.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-html\",children:`<form method=\"POST\" action=\"/update-profile\">\n  <input type=\"hidden\" name=\"csrf_token\" value=\"unique_token_value\" />\n  <!-- other form fields -->\n  <button type=\"submit\">Update Profile</button>\n</form>\n`})}),`\n`,(0,t.jsx)(e.p,{children:\"On the server side, the token is validated to ensure it matches the expected value.\"}),`\n`,(0,t.jsx)(e.h4,{children:\"SameSite cookies\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The \",(0,t.jsx)(e.code,{children:\"SameSite\"}),\" attribute on cookies can help mitigate CSRF attacks by restricting how cookies are sent with cross-site requests. The \",(0,t.jsx)(e.code,{children:\"SameSite\"}),\" attribute can be set to \",(0,t.jsx)(e.code,{children:\"Strict\"}),\", \",(0,t.jsx)(e.code,{children:\"Lax\"}),\", or \",(0,t.jsx)(e.code,{children:\"None\"}),\".\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-http\",children:`Set-Cookie: sessionId=abc123; SameSite=Strict\n`})}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"Strict\"}),\": Cookies are only sent in a first-party context and not with requests initiated by third-party websites.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"Lax\"}),\": Cookies are not sent on normal cross-site subrequests (e.g., loading images), but are sent when a user navigates to the URL from an external site (e.g., following a link).\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"None\"}),\": Cookies are sent in all contexts, including cross-origin requests.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h4,{children:\"CORS (Cross-Origin Resource Sharing)\"}),`\n`,(0,t.jsx)(e.p,{children:\"Properly configuring CORS can help prevent CSRF attacks by ensuring that only trusted origins can make requests to your server. This involves setting appropriate headers on the server to specify which origins are allowed to access resources.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-http\",children:`Access-Control-Allow-Origin: https://trustedwebsite.com\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html\",children:\"OWASP CSRF Prevention Cheat Sheet\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite\",children:\"MDN Web Docs: SameSite cookies\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS\",children:\"MDN Web Docs: Cross-Origin Resource Sharing (CORS)\"})}),`\n`]})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(l,{...n})}):l(n)}return b(R);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/zh-CN.json
index e64034772..c46409eb0 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/zh-CN.json
@@ -29,5 +29,5 @@
     ],
     "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/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var o=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var u=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),R=(i,e)=>{for(var r in e)o(i,r,{get:e[r],enumerable:!0})},l=(i,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!C.call(i,c)&&c!==r&&o(i,c,{get:()=>e[c],enumerable:!(t=S(e,c))||t.enumerable});return i};var g=(i,e,r)=>(r=i!=null?a(m(i)):{},l(e||!i||!i.__esModule?o(r,\"default\",{value:i,enumerable:!0}):r,i)),F=i=>l(o({},\"__esModule\",{value:!0}),i);var d=u((O,h)=>{h.exports=_jsx_runtime});var b={};R(b,{default:()=>k,frontmatter:()=>f});var n=g(d()),f={title:\"\\u89E3\\u91CA\\u8DE8\\u7AD9\\u70B9\\u8BF7\\u6C42\\u4F2A\\u9020 (CSRF) \\u7684\\u6982\\u5FF5\\u53CA\\u5176\\u7F13\\u89E3\\u6280\\u672F\"};function s(i){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",h4:\"h4\",pre:\"pre\",code:\"code\",ul:\"ul\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8DE8\\u7AD9\\u70B9\\u8BF7\\u6C42\\u4F2A\\u9020 (CSRF) \\u662F\\u4E00\\u79CD\\u653B\\u51FB\\uFF0C\\u6076\\u610F\\u7F51\\u7AD9\\u4F1A\\u8BF1\\u9A97\\u7528\\u6237\\u7684\\u6D4F\\u89C8\\u5668\\u5411\\u7528\\u6237\\u5DF2\\u901A\\u8FC7\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u7684\\u53E6\\u4E00\\u4E2A\\u7AD9\\u70B9\\u53D1\\u51FA\\u4E0D\\u9700\\u8981\\u7684\\u8BF7\\u6C42\\u3002\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u4EE3\\u8868\\u7528\\u6237\\u6267\\u884C\\u672A\\u7ECF\\u6388\\u6743\\u7684\\u64CD\\u4F5C\\u3002\\u7F13\\u89E3\\u6280\\u672F\\u5305\\u62EC\\u4F7F\\u7528\\u53CD CSRF \\u4EE4\\u724C\\u3001SameSite cookie \\u548C\\u786E\\u4FDD\\u9002\\u5F53\\u7684 CORS \\u914D\\u7F6E\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u8DE8\\u7AD9\\u70B9\\u8BF7\\u6C42\\u4F2A\\u9020 (CSRF) \\u53CA\\u5176\\u7F13\\u89E3\\u6280\\u672F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EC0\\u4E48\\u662F CSRF\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8DE8\\u7AD9\\u70B9\\u8BF7\\u6C42\\u4F2A\\u9020 (CSRF) \\u662F\\u4E00\\u79CD\\u653B\\u51FB\\u7C7B\\u578B\\uFF0C\\u5F53\\u6076\\u610F\\u7F51\\u7AD9\\u5BFC\\u81F4\\u7528\\u6237\\u7684\\u6D4F\\u89C8\\u5668\\u5728\\u7528\\u6237\\u5DF2\\u901A\\u8FC7\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u7684\\u4E0D\\u540C\\u7AD9\\u70B9\\u4E0A\\u6267\\u884C\\u4E0D\\u9700\\u8981\\u7684\\u64CD\\u4F5C\\u65F6\\uFF0C\\u5C31\\u4F1A\\u53D1\\u751F\\u8FD9\\u79CD\\u653B\\u51FB\\u3002\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u672A\\u7ECF\\u6388\\u6743\\u7684\\u64CD\\u4F5C\\uFF0C\\u4F8B\\u5982\\u66F4\\u6539\\u5E10\\u6237\\u8BE6\\u7EC6\\u4FE1\\u606F\\u3001\\u8FDB\\u884C\\u8D2D\\u4E70\\u6216\\u5176\\u4ED6\\u7528\\u6237\\u65E0\\u610F\\u6267\\u884C\\u7684\\u64CD\\u4F5C\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"CSRF \\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u7528\\u6237\\u8EAB\\u4EFD\\u9A8C\\u8BC1\"}),\"\\uFF1A\\u7528\\u6237\\u767B\\u5F55\\u5230\\u53D7\\u4FE1\\u4EFB\\u7684\\u7F51\\u7AD9\\uFF08\\u4F8B\\u5982\\uFF0C\\u94F6\\u884C\\u7F51\\u7AD9\\uFF09\\u5E76\\u6536\\u5230\\u8EAB\\u4EFD\\u9A8C\\u8BC1 cookie\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6076\\u610F\\u7F51\\u7AD9\"}),\"\\uFF1A\\u7528\\u6237\\u5728\\u4ECD\\u767B\\u5F55\\u5230\\u53D7\\u4FE1\\u4EFB\\u7F51\\u7AD9\\u7684\\u60C5\\u51B5\\u4E0B\\u8BBF\\u95EE\\u6076\\u610F\\u7F51\\u7AD9\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u9700\\u8981\\u7684\\u8BF7\\u6C42\"}),\"\\uFF1A\\u6076\\u610F\\u7F51\\u7AD9\\u5305\\u542B\\u5411\\u53D7\\u4FE1\\u4EFB\\u7F51\\u7AD9\\u53D1\\u51FA\\u8BF7\\u6C42\\u7684\\u4EE3\\u7801\\uFF0C\\u4F7F\\u7528\\u7528\\u6237\\u7684\\u8EAB\\u4EFD\\u9A8C\\u8BC1 cookie \\u4EE3\\u8868\\u7528\\u6237\\u6267\\u884C\\u64CD\\u4F5C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7F13\\u89E3\\u6280\\u672F\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u53CD CSRF \\u4EE4\\u724C\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u9632\\u6B62 CSRF \\u653B\\u51FB\\u7684\\u6700\\u6709\\u6548\\u65B9\\u6CD5\\u4E4B\\u4E00\\u662F\\u4F7F\\u7528\\u53CD CSRF \\u4EE4\\u724C\\u3002\\u8FD9\\u4E9B\\u4EE4\\u724C\\u662F\\u670D\\u52A1\\u5668\\u751F\\u6210\\u7684\\u3001\\u5305\\u542B\\u5728\\u8868\\u5355\\u6216\\u8BF7\\u6C42\\u4E2D\\u7684\\u552F\\u4E00\\u4E14\\u4E0D\\u53EF\\u9884\\u6D4B\\u7684\\u503C\\u3002\\u7136\\u540E\\uFF0C\\u670D\\u52A1\\u5668\\u9A8C\\u8BC1\\u8BE5\\u4EE4\\u724C\\u4EE5\\u786E\\u4FDD\\u8BF7\\u6C42\\u662F\\u5408\\u6CD5\\u7684\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<form method=\"POST\" action=\"/update-profile\">\n  <input type=\"hidden\" name=\"csrf_token\" value=\"unique_token_value\" />\n  <!-- other form fields -->\n  <button type=\"submit\">Update Profile</button>\n</form>\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u670D\\u52A1\\u5668\\u7AEF\\uFF0C\\u9A8C\\u8BC1\\u4EE4\\u724C\\u4EE5\\u786E\\u4FDD\\u5B83\\u4E0E\\u9884\\u671F\\u503C\\u5339\\u914D\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"SameSite cookie\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"cookie \\u4E0A\\u7684 \",(0,n.jsx)(e.code,{children:\"SameSite\"}),\" \\u5C5E\\u6027\\u53EF\\u4EE5\\u901A\\u8FC7\\u9650\\u5236 cookie \\u5982\\u4F55\\u4E0E\\u8DE8\\u7AD9\\u70B9\\u8BF7\\u6C42\\u4E00\\u8D77\\u53D1\\u9001\\u6765\\u5E2E\\u52A9\\u7F13\\u89E3 CSRF \\u653B\\u51FB\\u3002\",(0,n.jsx)(e.code,{children:\"SameSite\"}),\" \\u5C5E\\u6027\\u53EF\\u4EE5\\u8BBE\\u7F6E\\u4E3A \",(0,n.jsx)(e.code,{children:\"Strict\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"Lax\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"None\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Set-Cookie: sessionId=abc123; SameSite=Strict\n`})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Strict\"}),\"\\uFF1ACookie \\u4EC5\\u5728\\u7B2C\\u4E00\\u65B9\\u4E0A\\u4E0B\\u6587\\u4E2D\\u53D1\\u9001\\uFF0C\\u800C\\u4E0D\\u662F\\u4E0E\\u7B2C\\u4E09\\u65B9\\u7F51\\u7AD9\\u53D1\\u8D77\\u7684\\u8BF7\\u6C42\\u4E00\\u8D77\\u53D1\\u9001\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Lax\"}),\"\\uFF1ACookie \\u4E0D\\u4F1A\\u901A\\u8FC7\\u6B63\\u5E38\\u7684\\u8DE8\\u7AD9\\u70B9\\u5B50\\u8BF7\\u6C42\\uFF08\\u4F8B\\u5982\\uFF0C\\u52A0\\u8F7D\\u56FE\\u50CF\\uFF09\\u53D1\\u9001\\uFF0C\\u4F46\\u4F1A\\u5728\\u7528\\u6237\\u4ECE\\u5916\\u90E8\\u7AD9\\u70B9\\u5BFC\\u822A\\u5230 URL \\u65F6\\u53D1\\u9001\\uFF08\\u4F8B\\u5982\\uFF0C\\u70B9\\u51FB\\u94FE\\u63A5\\uFF09\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"None\"}),\"\\uFF1ACookie \\u5728\\u6240\\u6709\\u4E0A\\u4E0B\\u6587\\u4E2D\\u53D1\\u9001\\uFF0C\\u5305\\u62EC\\u8DE8\\u6E90\\u8BF7\\u6C42\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"CORS\\uFF08\\u8DE8\\u6E90\\u8D44\\u6E90\\u5171\\u4EAB\\uFF09\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B63\\u786E\\u914D\\u7F6E CORS \\u53EF\\u4EE5\\u901A\\u8FC7\\u786E\\u4FDD\\u53EA\\u6709\\u53D7\\u4FE1\\u4EFB\\u7684\\u6765\\u6E90\\u624D\\u80FD\\u5411\\u60A8\\u7684\\u670D\\u52A1\\u5668\\u53D1\\u51FA\\u8BF7\\u6C42\\u6765\\u5E2E\\u52A9\\u9632\\u6B62 CSRF \\u653B\\u51FB\\u3002\\u8FD9\\u6D89\\u53CA\\u5728\\u670D\\u52A1\\u5668\\u4E0A\\u8BBE\\u7F6E\\u9002\\u5F53\\u7684\\u6807\\u5934\\u4EE5\\u6307\\u5B9A\\u5141\\u8BB8\\u8BBF\\u95EE\\u8D44\\u6E90\\u7684\\u6765\\u6E90\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Access-Control-Allow-Origin: https://trustedwebsite.com\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html\",children:\"OWASP CSRF \\u9884\\u9632\\u5907\\u5FD8\\u5355\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Set-Cookie/SameSite\",children:\"MDN Web \\u6587\\u6863\\uFF1ASameSite cookies\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS\",children:\"MDN Web \\u6587\\u6863\\uFF1A\\u8DE8\\u57DF\\u8D44\\u6E90\\u5171\\u4EAB (CORS)\"})}),`\n`]})]})}function _(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(s,i)})):s(i)}var k=_;return F(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var S=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var R=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),g=(i,e)=>{for(var r in e)o(i,r,{get:e[r],enumerable:!0})},t=(i,e,r,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!u.call(i,c)&&c!==r&&o(i,c,{get:()=>e[c],enumerable:!(l=p(e,c))||l.enumerable});return i};var F=(i,e,r)=>(r=i!=null?S(C(i)):{},t(e||!i||!i.__esModule?o(r,\"default\",{value:i,enumerable:!0}):r,i)),f=i=>t(o({},\"__esModule\",{value:!0}),i);var d=R((b,h)=>{h.exports=_jsx_runtime});var k={};g(k,{default:()=>a,frontmatter:()=>_});var n=F(d()),_={title:\"\\u89E3\\u91CA\\u8DE8\\u7AD9\\u70B9\\u8BF7\\u6C42\\u4F2A\\u9020 (CSRF) \\u7684\\u6982\\u5FF5\\u53CA\\u5176\\u7F13\\u89E3\\u6280\\u672F\"};function s(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8DE8\\u7AD9\\u70B9\\u8BF7\\u6C42\\u4F2A\\u9020 (CSRF) \\u662F\\u4E00\\u79CD\\u653B\\u51FB\\uFF0C\\u6076\\u610F\\u7F51\\u7AD9\\u4F1A\\u8BF1\\u9A97\\u7528\\u6237\\u7684\\u6D4F\\u89C8\\u5668\\u5411\\u7528\\u6237\\u5DF2\\u901A\\u8FC7\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u7684\\u53E6\\u4E00\\u4E2A\\u7AD9\\u70B9\\u53D1\\u51FA\\u4E0D\\u9700\\u8981\\u7684\\u8BF7\\u6C42\\u3002\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u4EE3\\u8868\\u7528\\u6237\\u6267\\u884C\\u672A\\u7ECF\\u6388\\u6743\\u7684\\u64CD\\u4F5C\\u3002\\u7F13\\u89E3\\u6280\\u672F\\u5305\\u62EC\\u4F7F\\u7528\\u53CD CSRF \\u4EE4\\u724C\\u3001SameSite cookie \\u548C\\u786E\\u4FDD\\u9002\\u5F53\\u7684 CORS \\u914D\\u7F6E\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u8DE8\\u7AD9\\u70B9\\u8BF7\\u6C42\\u4F2A\\u9020 (CSRF) \\u53CA\\u5176\\u7F13\\u89E3\\u6280\\u672F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EC0\\u4E48\\u662F CSRF\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8DE8\\u7AD9\\u70B9\\u8BF7\\u6C42\\u4F2A\\u9020 (CSRF) \\u662F\\u4E00\\u79CD\\u653B\\u51FB\\u7C7B\\u578B\\uFF0C\\u5F53\\u6076\\u610F\\u7F51\\u7AD9\\u5BFC\\u81F4\\u7528\\u6237\\u7684\\u6D4F\\u89C8\\u5668\\u5728\\u7528\\u6237\\u5DF2\\u901A\\u8FC7\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u7684\\u4E0D\\u540C\\u7AD9\\u70B9\\u4E0A\\u6267\\u884C\\u4E0D\\u9700\\u8981\\u7684\\u64CD\\u4F5C\\u65F6\\uFF0C\\u5C31\\u4F1A\\u53D1\\u751F\\u8FD9\\u79CD\\u653B\\u51FB\\u3002\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u672A\\u7ECF\\u6388\\u6743\\u7684\\u64CD\\u4F5C\\uFF0C\\u4F8B\\u5982\\u66F4\\u6539\\u5E10\\u6237\\u8BE6\\u7EC6\\u4FE1\\u606F\\u3001\\u8FDB\\u884C\\u8D2D\\u4E70\\u6216\\u5176\\u4ED6\\u7528\\u6237\\u65E0\\u610F\\u6267\\u884C\\u7684\\u64CD\\u4F5C\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"CSRF \\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u7528\\u6237\\u8EAB\\u4EFD\\u9A8C\\u8BC1\"}),\"\\uFF1A\\u7528\\u6237\\u767B\\u5F55\\u5230\\u53D7\\u4FE1\\u4EFB\\u7684\\u7F51\\u7AD9\\uFF08\\u4F8B\\u5982\\uFF0C\\u94F6\\u884C\\u7F51\\u7AD9\\uFF09\\u5E76\\u6536\\u5230\\u8EAB\\u4EFD\\u9A8C\\u8BC1 cookie\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6076\\u610F\\u7F51\\u7AD9\"}),\"\\uFF1A\\u7528\\u6237\\u5728\\u4ECD\\u767B\\u5F55\\u5230\\u53D7\\u4FE1\\u4EFB\\u7F51\\u7AD9\\u7684\\u60C5\\u51B5\\u4E0B\\u8BBF\\u95EE\\u6076\\u610F\\u7F51\\u7AD9\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u9700\\u8981\\u7684\\u8BF7\\u6C42\"}),\"\\uFF1A\\u6076\\u610F\\u7F51\\u7AD9\\u5305\\u542B\\u5411\\u53D7\\u4FE1\\u4EFB\\u7F51\\u7AD9\\u53D1\\u51FA\\u8BF7\\u6C42\\u7684\\u4EE3\\u7801\\uFF0C\\u4F7F\\u7528\\u7528\\u6237\\u7684\\u8EAB\\u4EFD\\u9A8C\\u8BC1 cookie \\u4EE3\\u8868\\u7528\\u6237\\u6267\\u884C\\u64CD\\u4F5C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7F13\\u89E3\\u6280\\u672F\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u53CD CSRF \\u4EE4\\u724C\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u9632\\u6B62 CSRF \\u653B\\u51FB\\u7684\\u6700\\u6709\\u6548\\u65B9\\u6CD5\\u4E4B\\u4E00\\u662F\\u4F7F\\u7528\\u53CD CSRF \\u4EE4\\u724C\\u3002\\u8FD9\\u4E9B\\u4EE4\\u724C\\u662F\\u670D\\u52A1\\u5668\\u751F\\u6210\\u7684\\u3001\\u5305\\u542B\\u5728\\u8868\\u5355\\u6216\\u8BF7\\u6C42\\u4E2D\\u7684\\u552F\\u4E00\\u4E14\\u4E0D\\u53EF\\u9884\\u6D4B\\u7684\\u503C\\u3002\\u7136\\u540E\\uFF0C\\u670D\\u52A1\\u5668\\u9A8C\\u8BC1\\u8BE5\\u4EE4\\u724C\\u4EE5\\u786E\\u4FDD\\u8BF7\\u6C42\\u662F\\u5408\\u6CD5\\u7684\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<form method=\"POST\" action=\"/update-profile\">\n  <input type=\"hidden\" name=\"csrf_token\" value=\"unique_token_value\" />\n  <!-- other form fields -->\n  <button type=\"submit\">Update Profile</button>\n</form>\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u670D\\u52A1\\u5668\\u7AEF\\uFF0C\\u9A8C\\u8BC1\\u4EE4\\u724C\\u4EE5\\u786E\\u4FDD\\u5B83\\u4E0E\\u9884\\u671F\\u503C\\u5339\\u914D\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"SameSite cookie\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"cookie \\u4E0A\\u7684 \",(0,n.jsx)(e.code,{children:\"SameSite\"}),\" \\u5C5E\\u6027\\u53EF\\u4EE5\\u901A\\u8FC7\\u9650\\u5236 cookie \\u5982\\u4F55\\u4E0E\\u8DE8\\u7AD9\\u70B9\\u8BF7\\u6C42\\u4E00\\u8D77\\u53D1\\u9001\\u6765\\u5E2E\\u52A9\\u7F13\\u89E3 CSRF \\u653B\\u51FB\\u3002\",(0,n.jsx)(e.code,{children:\"SameSite\"}),\" \\u5C5E\\u6027\\u53EF\\u4EE5\\u8BBE\\u7F6E\\u4E3A \",(0,n.jsx)(e.code,{children:\"Strict\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"Lax\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"None\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Set-Cookie: sessionId=abc123; SameSite=Strict\n`})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Strict\"}),\"\\uFF1ACookie \\u4EC5\\u5728\\u7B2C\\u4E00\\u65B9\\u4E0A\\u4E0B\\u6587\\u4E2D\\u53D1\\u9001\\uFF0C\\u800C\\u4E0D\\u662F\\u4E0E\\u7B2C\\u4E09\\u65B9\\u7F51\\u7AD9\\u53D1\\u8D77\\u7684\\u8BF7\\u6C42\\u4E00\\u8D77\\u53D1\\u9001\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Lax\"}),\"\\uFF1ACookie \\u4E0D\\u4F1A\\u901A\\u8FC7\\u6B63\\u5E38\\u7684\\u8DE8\\u7AD9\\u70B9\\u5B50\\u8BF7\\u6C42\\uFF08\\u4F8B\\u5982\\uFF0C\\u52A0\\u8F7D\\u56FE\\u50CF\\uFF09\\u53D1\\u9001\\uFF0C\\u4F46\\u4F1A\\u5728\\u7528\\u6237\\u4ECE\\u5916\\u90E8\\u7AD9\\u70B9\\u5BFC\\u822A\\u5230 URL \\u65F6\\u53D1\\u9001\\uFF08\\u4F8B\\u5982\\uFF0C\\u70B9\\u51FB\\u94FE\\u63A5\\uFF09\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"None\"}),\"\\uFF1ACookie \\u5728\\u6240\\u6709\\u4E0A\\u4E0B\\u6587\\u4E2D\\u53D1\\u9001\\uFF0C\\u5305\\u62EC\\u8DE8\\u6E90\\u8BF7\\u6C42\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"CORS\\uFF08\\u8DE8\\u6E90\\u8D44\\u6E90\\u5171\\u4EAB\\uFF09\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B63\\u786E\\u914D\\u7F6E CORS \\u53EF\\u4EE5\\u901A\\u8FC7\\u786E\\u4FDD\\u53EA\\u6709\\u53D7\\u4FE1\\u4EFB\\u7684\\u6765\\u6E90\\u624D\\u80FD\\u5411\\u60A8\\u7684\\u670D\\u52A1\\u5668\\u53D1\\u51FA\\u8BF7\\u6C42\\u6765\\u5E2E\\u52A9\\u9632\\u6B62 CSRF \\u653B\\u51FB\\u3002\\u8FD9\\u6D89\\u53CA\\u5728\\u670D\\u52A1\\u5668\\u4E0A\\u8BBE\\u7F6E\\u9002\\u5F53\\u7684\\u6807\\u5934\\u4EE5\\u6307\\u5B9A\\u5141\\u8BB8\\u8BBF\\u95EE\\u8D44\\u6E90\\u7684\\u6765\\u6E90\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Access-Control-Allow-Origin: https://trustedwebsite.com\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html\",children:\"OWASP CSRF \\u9884\\u9632\\u5907\\u5FD8\\u5355\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Set-Cookie/SameSite\",children:\"MDN Web \\u6587\\u6863\\uFF1ASameSite cookies\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS\",children:\"MDN Web \\u6587\\u6863\\uFF1A\\u8DE8\\u57DF\\u8D44\\u6E90\\u5171\\u4EAB (CORS)\"})}),`\n`]})]})}function a(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(s,{...i})}):s(i)}return f(k);})();\n;return Component;"
 }
\ No newline at end of file
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 080c7f296..3c7c1c6dc 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-debouncing-and-throttling/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},l=(t,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!p.call(t,o)&&o!==i&&a(t,o,{get:()=>e[o],enumerable:!(s=d(e,o))||s.enumerable});return t};var y=(t,e,i)=>(i=t!=null?u(f(t)):{},l(e||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),b=t=>l(a({},\"__esModule\",{value:!0}),t);var c=g((z,r)=>{r.exports=_jsx_runtime});var I={};w(I,{default:()=>x,frontmatter:()=>T});var n=y(c()),T={title:\"Explain the concept of debouncing and throttling\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",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.jsx)(e.p,{children:\"Debouncing and throttling are techniques used to control the rate at which a function is executed. Debouncing ensures that a function is only called after a specified delay has passed since the last time it was invoked. Throttling ensures that a function is called at most once in a specified time interval.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Debouncing delays the execution of a function until a certain amount of time has passed since it was last called. This is useful for scenarios like search input fields where you want to wait until the user has stopped typing before making an API call.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function debounce(func, delay) {\n  let timeoutId;\n  return function (...args) {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() => func.apply(this, args), delay);\n  };\n}\n\nconst debouncedHello = debounce(() => console.log('Hello world!'), 2000);\ndebouncedHello(); // Prints 'Hello world!' after 2 seconds\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Throttling ensures that a function is called at most once in a specified time interval. This is useful for scenarios like window resizing or scrolling where you want to limit the number of times a function is called.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function throttle(func, limit) {\n  let inThrottle;\n  return function (...args) {\n    if (!inThrottle) {\n      func.apply(this, args);\n      inThrottle = true;\n      setTimeout(() => (inThrottle = false), limit);\n    }\n  };\n}\n\nconst handleResize = throttle(() => {\n  // Update element positions\n  console.log('Window resized at', new Date().toLocaleTimeString());\n}, 2000);\n\n// Simulate rapid calls to handleResize every 100ms\nlet intervalId = setInterval(() => {\n  handleResize();\n}, 100);\n// 'Window resized' is outputted only every 2 seconds due to throttling\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Debouncing and throttling\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Debouncing\"}),`\n`,(0,n.jsx)(e.p,{children:\"Debouncing is a technique used to ensure that a function is only executed after a certain amount of time has passed since it was last invoked. This is particularly useful in scenarios where you want to limit the number of times a function is called, such as when handling user input events like keypresses or mouse movements.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example use case\"}),`\n`,(0,n.jsx)(e.p,{children:\"Imagine you have a search input field and you want to make an API call to fetch search results. Without debouncing, an API call would be made every time the user types a character, which could lead to a large number of unnecessary calls. Debouncing ensures that the API call is only made after the user has stopped typing for a specified amount of time.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Code example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function debounce(func, delay) {\n  let timeoutId;\n  return function (...args) {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() => func.apply(this, args), delay);\n  };\n}\n\n// Usage\nconst handleSearch = debounce((query) => {\n  // Make API call\n  console.log('API call with query:', query);\n}, 300);\n\ndocument.getElementById('searchInput').addEventListener('input', (event) => {\n  handleSearch(event.target.value);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Throttling\"}),`\n`,(0,n.jsx)(e.p,{children:\"Throttling is a technique used to ensure that a function is called at most once in a specified time interval. This is useful in scenarios where you want to limit the number of times a function is called, such as when handling events like window resizing or scrolling.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example use case\"}),`\n`,(0,n.jsx)(e.p,{children:\"Imagine you have a function that updates the position of elements on the screen based on the window size. Without throttling, this function could be called many times per second as the user resizes the window, leading to performance issues. Throttling ensures that the function is only called at most once in a specified time interval.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Code example\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function throttle(func, limit) {\n  let inThrottle;\n  return function (...args) {\n    if (!inThrottle) {\n      func.apply(this, args);\n      inThrottle = true;\n      setTimeout(() => (inThrottle = false), limit);\n    }\n  };\n}\n\n// Usage\nconst handleResize = throttle(() => {\n  // Update element positions\n  console.log('Window resized');\n}, 100);\n\nwindow.addEventListener('resize', handleResize);\n`})}),`\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://css-tricks.com/debouncing-throttling-explained-examples/\",children:\"Debouncing and Throttling Explained Through Examples\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/javascript-debounce-example/\",children:\"Understanding the Difference Between Debounce and Throttle\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://lodash.com/docs/4.17.15#debounce\",children:\"Lodash Documentation for Debounce and Throttle\"})}),`\n`]})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var x=v;return b(I);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},s=(t,e,i,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of f(e))!g.call(t,o)&&o!==i&&a(t,o,{get:()=>e[o],enumerable:!(l=m(e,o))||l.enumerable});return t};var b=(t,e,i)=>(i=t!=null?d(p(t)):{},s(e||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),T=t=>s(a({},\"__esModule\",{value:!0}),t);var c=w((D,r)=>{r.exports=_jsx_runtime});var x={};y(x,{default:()=>u,frontmatter:()=>v});var n=b(c()),v={title:\"Explain the concept of debouncing and throttling\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Debouncing and throttling are techniques used to control the rate at which a function is executed. Debouncing ensures that a function is only called after a specified delay has passed since the last time it was invoked. Throttling ensures that a function is called at most once in a specified time interval.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Debouncing delays the execution of a function until a certain amount of time has passed since it was last called. This is useful for scenarios like search input fields where you want to wait until the user has stopped typing before making an API call.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function debounce(func, delay) {\n  let timeoutId;\n  return function (...args) {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() => func.apply(this, args), delay);\n  };\n}\n\nconst debouncedHello = debounce(() => console.log('Hello world!'), 2000);\ndebouncedHello(); // Prints 'Hello world!' after 2 seconds\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Throttling ensures that a function is called at most once in a specified time interval. This is useful for scenarios like window resizing or scrolling where you want to limit the number of times a function is called.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function throttle(func, limit) {\n  let inThrottle;\n  return function (...args) {\n    if (!inThrottle) {\n      func.apply(this, args);\n      inThrottle = true;\n      setTimeout(() => (inThrottle = false), limit);\n    }\n  };\n}\n\nconst handleResize = throttle(() => {\n  // Update element positions\n  console.log('Window resized at', new Date().toLocaleTimeString());\n}, 2000);\n\n// Simulate rapid calls to handleResize every 100ms\nlet intervalId = setInterval(() => {\n  handleResize();\n}, 100);\n// 'Window resized' is outputted only every 2 seconds due to throttling\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Debouncing and throttling\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Debouncing\"}),`\n`,(0,n.jsx)(e.p,{children:\"Debouncing is a technique used to ensure that a function is only executed after a certain amount of time has passed since it was last invoked. This is particularly useful in scenarios where you want to limit the number of times a function is called, such as when handling user input events like keypresses or mouse movements.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example use case\"}),`\n`,(0,n.jsx)(e.p,{children:\"Imagine you have a search input field and you want to make an API call to fetch search results. Without debouncing, an API call would be made every time the user types a character, which could lead to a large number of unnecessary calls. Debouncing ensures that the API call is only made after the user has stopped typing for a specified amount of time.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Code example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function debounce(func, delay) {\n  let timeoutId;\n  return function (...args) {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() => func.apply(this, args), delay);\n  };\n}\n\n// Usage\nconst handleSearch = debounce((query) => {\n  // Make API call\n  console.log('API call with query:', query);\n}, 300);\n\ndocument.getElementById('searchInput').addEventListener('input', (event) => {\n  handleSearch(event.target.value);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Throttling\"}),`\n`,(0,n.jsx)(e.p,{children:\"Throttling is a technique used to ensure that a function is called at most once in a specified time interval. This is useful in scenarios where you want to limit the number of times a function is called, such as when handling events like window resizing or scrolling.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example use case\"}),`\n`,(0,n.jsx)(e.p,{children:\"Imagine you have a function that updates the position of elements on the screen based on the window size. Without throttling, this function could be called many times per second as the user resizes the window, leading to performance issues. Throttling ensures that the function is only called at most once in a specified time interval.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Code example\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function throttle(func, limit) {\n  let inThrottle;\n  return function (...args) {\n    if (!inThrottle) {\n      func.apply(this, args);\n      inThrottle = true;\n      setTimeout(() => (inThrottle = false), limit);\n    }\n  };\n}\n\n// Usage\nconst handleResize = throttle(() => {\n  // Update element positions\n  console.log('Window resized');\n}, 100);\n\nwindow.addEventListener('resize', handleResize);\n`})}),`\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://css-tricks.com/debouncing-throttling-explained-examples/\",children:\"Debouncing and Throttling Explained Through Examples\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/javascript-debounce-example/\",children:\"Understanding the Difference Between Debounce and Throttle\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://lodash.com/docs/4.17.15#debounce\",children:\"Lodash Documentation for Debounce and Throttle\"})}),`\n`]})]})}function u(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return T(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-debouncing-and-throttling/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-debouncing-and-throttling/zh-CN.json
index e8e60a4b3..95ee1af1d 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-debouncing-and-throttling/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-debouncing-and-throttling/zh-CN.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-debouncing-and-throttling/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),y=(t,n)=>{for(var l in n)r(t,l,{get:n[l],enumerable:!0})},c=(t,n,l,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of p(n))!g.call(t,i)&&i!==l&&r(t,i,{get:()=>n[i],enumerable:!(o=u(n,i))||o.enumerable});return t};var I=(t,n,l)=>(l=t!=null?h(m(t)):{},c(n||!t||!t.__esModule?r(l,\"default\",{value:t,enumerable:!0}):l,t)),T=t=>c(r({},\"__esModule\",{value:!0}),t);var s=f((z,d)=>{d.exports=_jsx_runtime});var x={};y(x,{default:()=>j,frontmatter:()=>w});var e=I(s()),w={title:\"\\u89E3\\u91CA\\u9632\\u6296\\u548C\\u8282\\u6D41\\u7684\\u6982\\u5FF5\"};function a(t){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9632\\u6296\\u548C\\u8282\\u6D41\\u662F\\u7528\\u4E8E\\u63A7\\u5236\\u51FD\\u6570\\u6267\\u884C\\u901F\\u7387\\u7684\\u6280\\u672F\\u3002\\u9632\\u6296\\u786E\\u4FDD\\u51FD\\u6570\\u4EC5\\u5728\\u81EA\\u4E0A\\u6B21\\u8C03\\u7528\\u540E\\u7ECF\\u8FC7\\u6307\\u5B9A\\u7684\\u5EF6\\u8FDF\\u540E\\u624D\\u88AB\\u8C03\\u7528\\u3002\\u8282\\u6D41\\u786E\\u4FDD\\u51FD\\u6570\\u5728\\u4E00\\u4E2A\\u6307\\u5B9A\\u7684\\u65F6\\u95F4\\u95F4\\u9694\\u5185\\u6700\\u591A\\u88AB\\u8C03\\u7528\\u4E00\\u6B21\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9632\\u6296\\u4F1A\\u5EF6\\u8FDF\\u51FD\\u6570\\u7684\\u6267\\u884C\\uFF0C\\u76F4\\u5230\\u81EA\\u4E0A\\u6B21\\u8C03\\u7528\\u540E\\u7ECF\\u8FC7\\u4E00\\u5B9A\\u7684\\u65F6\\u95F4\\u3002\\u8FD9\\u5BF9\\u4E8E\\u641C\\u7D22\\u8F93\\u5165\\u6846\\u7B49\\u573A\\u666F\\u975E\\u5E38\\u6709\\u7528\\uFF0C\\u5728\\u8FD9\\u4E9B\\u573A\\u666F\\u4E2D\\uFF0C\\u60A8\\u5E0C\\u671B\\u5728\\u7528\\u6237\\u505C\\u6B62\\u8F93\\u5165\\u540E\\u624D\\u8FDB\\u884C API \\u8C03\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function debounce(func, delay) {\n  let timeoutId;\n  return function (...args) {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() => func.apply(this, args), delay);\n  };\n}\n\nconst debouncedHello = debounce(() => console.log('Hello world!'), 2000);\ndebouncedHello(); // Prints 'Hello world!' after 2 seconds\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8282\\u6D41\\u786E\\u4FDD\\u51FD\\u6570\\u5728\\u4E00\\u4E2A\\u6307\\u5B9A\\u7684\\u65F6\\u95F4\\u95F4\\u9694\\u5185\\u6700\\u591A\\u88AB\\u8C03\\u7528\\u4E00\\u6B21\\u3002\\u8FD9\\u5BF9\\u4E8E\\u7A97\\u53E3\\u8C03\\u6574\\u5927\\u5C0F\\u6216\\u6EDA\\u52A8\\u7B49\\u573A\\u666F\\u975E\\u5E38\\u6709\\u7528\\uFF0C\\u5728\\u8FD9\\u4E9B\\u573A\\u666F\\u4E2D\\uFF0C\\u60A8\\u5E0C\\u671B\\u9650\\u5236\\u51FD\\u6570\\u88AB\\u8C03\\u7528\\u7684\\u6B21\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function throttle(func, limit) {\n  let inThrottle;\n  return function (...args) {\n    if (!inThrottle) {\n      func.apply(this, args);\n      inThrottle = true;\n      setTimeout(() => (inThrottle = false), limit);\n    }\n  };\n}\n\nconst handleResize = throttle(() => {\n  // Update element positions\n  console.log('Window resized at', new Date().toLocaleTimeString());\n}, 2000);\n\n// Simulate rapid calls to handleResize every 100ms\nlet intervalId = setInterval(() => {\n  handleResize();\n}, 100);\n// 'Window resized' is outputted only every 2 seconds due to throttling\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u9632\\u6296\\u548C\\u8282\\u6D41\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9632\\u6296\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9632\\u6296\\u662F\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u7528\\u4E8E\\u786E\\u4FDD\\u51FD\\u6570\\u4EC5\\u5728\\u81EA\\u4E0A\\u6B21\\u8C03\\u7528\\u540E\\u7ECF\\u8FC7\\u4E00\\u5B9A\\u65F6\\u95F4\\u540E\\u624D\\u6267\\u884C\\u3002\\u8FD9\\u5728\\u60A8\\u5E0C\\u671B\\u9650\\u5236\\u51FD\\u6570\\u88AB\\u8C03\\u7528\\u6B21\\u6570\\u7684\\u573A\\u666F\\u4E2D\\u7279\\u522B\\u6709\\u7528\\uFF0C\\u4F8B\\u5982\\u5904\\u7406\\u7528\\u6237\\u8F93\\u5165\\u4E8B\\u4EF6\\uFF08\\u5982\\u6309\\u952E\\u6216\\u9F20\\u6807\\u79FB\\u52A8\\uFF09\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528\\u6848\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60F3\\u8C61\\u4E00\\u4E0B\\uFF0C\\u60A8\\u6709\\u4E00\\u4E2A\\u641C\\u7D22\\u8F93\\u5165\\u6846\\uFF0C\\u5E76\\u4E14\\u60A8\\u60F3\\u8FDB\\u884C API \\u8C03\\u7528\\u6765\\u83B7\\u53D6\\u641C\\u7D22\\u7ED3\\u679C\\u3002\\u5982\\u679C\\u6CA1\\u6709\\u9632\\u6296\\uFF0C\\u6BCF\\u6B21\\u7528\\u6237\\u8F93\\u5165\\u4E00\\u4E2A\\u5B57\\u7B26\\u65F6\\u90FD\\u4F1A\\u8FDB\\u884C API \\u8C03\\u7528\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u5927\\u91CF\\u4E0D\\u5FC5\\u8981\\u7684\\u8C03\\u7528\\u3002\\u9632\\u6296\\u786E\\u4FDD\\u4EC5\\u5728\\u7528\\u6237\\u505C\\u6B62\\u8F93\\u5165\\u6307\\u5B9A\\u65F6\\u95F4\\u540E\\u624D\\u8FDB\\u884C API \\u8C03\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4EE3\\u7801\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function debounce(func, delay) {\n  let timeoutId;\n  return function (...args) {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() => func.apply(this, args), delay);\n  };\n}\n\n// Usage\nconst handleSearch = debounce((query) => {\n  // Make API call\n  console.log('API call with query:', query);\n}, 300);\n\ndocument.getElementById('searchInput').addEventListener('input', (event) => {\n  handleSearch(event.target.value);\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8282\\u6D41\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8282\\u6D41\\u662F\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u7528\\u4E8E\\u786E\\u4FDD\\u51FD\\u6570\\u5728\\u4E00\\u4E2A\\u6307\\u5B9A\\u7684\\u65F6\\u95F4\\u95F4\\u9694\\u5185\\u6700\\u591A\\u88AB\\u8C03\\u7528\\u4E00\\u6B21\\u3002\\u8FD9\\u5728\\u60A8\\u5E0C\\u671B\\u9650\\u5236\\u51FD\\u6570\\u88AB\\u8C03\\u7528\\u6B21\\u6570\\u7684\\u573A\\u666F\\u4E2D\\u5F88\\u6709\\u7528\\uFF0C\\u4F8B\\u5982\\u5904\\u7406\\u7A97\\u53E3\\u8C03\\u6574\\u5927\\u5C0F\\u6216\\u6EDA\\u52A8\\u7B49\\u4E8B\\u4EF6\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528\\u6848\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60F3\\u8C61\\u4E00\\u4E0B\\uFF0C\\u60A8\\u6709\\u4E00\\u4E2A\\u51FD\\u6570\\uFF0C\\u8BE5\\u51FD\\u6570\\u6839\\u636E\\u7A97\\u53E3\\u5927\\u5C0F\\u66F4\\u65B0\\u5C4F\\u5E55\\u4E0A\\u5143\\u7D20\\u7684\\u4F4D\\u7F6E\\u3002\\u5982\\u679C\\u6CA1\\u6709\\u8282\\u6D41\\uFF0C\\u6B64\\u51FD\\u6570\\u53EF\\u80FD\\u4F1A\\u5728\\u7528\\u6237\\u8C03\\u6574\\u7A97\\u53E3\\u5927\\u5C0F\\u65F6\\u6BCF\\u79D2\\u88AB\\u8C03\\u7528\\u591A\\u6B21\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u6027\\u80FD\\u95EE\\u9898\\u3002\\u8282\\u6D41\\u786E\\u4FDD\\u8BE5\\u51FD\\u6570\\u5728\\u4E00\\u4E2A\\u6307\\u5B9A\\u7684\\u65F6\\u95F4\\u95F4\\u9694\\u5185\\u6700\\u591A\\u88AB\\u8C03\\u7528\\u4E00\\u6B21\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4EE3\\u7801\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function throttle(func, limit) {\n  let inThrottle;\n  return function (...args) {\n    if (!inThrottle) {\n      func.apply(this, args);\n      inThrottle = true;\n      setTimeout(() => (inThrottle = false), limit);\n    }\n  };\n}\n\n// Usage\nconst handleResize = throttle(() => {\n  // Update element positions\n  console.log('Window resized');\n}, 100);\n\nwindow.addEventListener('resize', handleResize);\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://css-tricks.com/debouncing-throttling-explained-examples/\",children:\"\\u901A\\u8FC7\\u793A\\u4F8B\\u89E3\\u91CA\\u9632\\u6296\\u548C\\u8282\\u6D41\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/javascript-debounce-example/\",children:\"\\u4E86\\u89E3\\u9632\\u6296\\u548C\\u8282\\u6D41\\u4E4B\\u95F4\\u7684\\u533A\\u522B\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://lodash.com/docs/4.17.15#debounce\",children:\"Lodash \\u9632\\u6296\\u548C\\u8282\\u6D41\\u6587\\u6863\"})}),`\n`]})]})}function v(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(a,t)})):a(t)}var j=v;return T(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),I=(t,n)=>{for(var l in n)i(t,l,{get:n[l],enumerable:!0})},c=(t,n,l,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of m(n))!f.call(t,r)&&r!==l&&i(t,r,{get:()=>n[r],enumerable:!(o=p(n,r))||o.enumerable});return t};var T=(t,n,l)=>(l=t!=null?u(g(t)):{},c(n||!t||!t.__esModule?i(l,\"default\",{value:t,enumerable:!0}):l,t)),w=t=>c(i({},\"__esModule\",{value:!0}),t);var s=y((b,d)=>{d.exports=_jsx_runtime});var x={};I(x,{default:()=>h,frontmatter:()=>v});var e=T(s()),v={title:\"\\u89E3\\u91CA\\u9632\\u6296\\u548C\\u8282\\u6D41\\u7684\\u6982\\u5FF5\"};function a(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9632\\u6296\\u548C\\u8282\\u6D41\\u662F\\u7528\\u4E8E\\u63A7\\u5236\\u51FD\\u6570\\u6267\\u884C\\u901F\\u7387\\u7684\\u6280\\u672F\\u3002\\u9632\\u6296\\u786E\\u4FDD\\u51FD\\u6570\\u4EC5\\u5728\\u81EA\\u4E0A\\u6B21\\u8C03\\u7528\\u540E\\u7ECF\\u8FC7\\u6307\\u5B9A\\u7684\\u5EF6\\u8FDF\\u540E\\u624D\\u88AB\\u8C03\\u7528\\u3002\\u8282\\u6D41\\u786E\\u4FDD\\u51FD\\u6570\\u5728\\u4E00\\u4E2A\\u6307\\u5B9A\\u7684\\u65F6\\u95F4\\u95F4\\u9694\\u5185\\u6700\\u591A\\u88AB\\u8C03\\u7528\\u4E00\\u6B21\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9632\\u6296\\u4F1A\\u5EF6\\u8FDF\\u51FD\\u6570\\u7684\\u6267\\u884C\\uFF0C\\u76F4\\u5230\\u81EA\\u4E0A\\u6B21\\u8C03\\u7528\\u540E\\u7ECF\\u8FC7\\u4E00\\u5B9A\\u7684\\u65F6\\u95F4\\u3002\\u8FD9\\u5BF9\\u4E8E\\u641C\\u7D22\\u8F93\\u5165\\u6846\\u7B49\\u573A\\u666F\\u975E\\u5E38\\u6709\\u7528\\uFF0C\\u5728\\u8FD9\\u4E9B\\u573A\\u666F\\u4E2D\\uFF0C\\u60A8\\u5E0C\\u671B\\u5728\\u7528\\u6237\\u505C\\u6B62\\u8F93\\u5165\\u540E\\u624D\\u8FDB\\u884C API \\u8C03\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function debounce(func, delay) {\n  let timeoutId;\n  return function (...args) {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() => func.apply(this, args), delay);\n  };\n}\n\nconst debouncedHello = debounce(() => console.log('Hello world!'), 2000);\ndebouncedHello(); // Prints 'Hello world!' after 2 seconds\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8282\\u6D41\\u786E\\u4FDD\\u51FD\\u6570\\u5728\\u4E00\\u4E2A\\u6307\\u5B9A\\u7684\\u65F6\\u95F4\\u95F4\\u9694\\u5185\\u6700\\u591A\\u88AB\\u8C03\\u7528\\u4E00\\u6B21\\u3002\\u8FD9\\u5BF9\\u4E8E\\u7A97\\u53E3\\u8C03\\u6574\\u5927\\u5C0F\\u6216\\u6EDA\\u52A8\\u7B49\\u573A\\u666F\\u975E\\u5E38\\u6709\\u7528\\uFF0C\\u5728\\u8FD9\\u4E9B\\u573A\\u666F\\u4E2D\\uFF0C\\u60A8\\u5E0C\\u671B\\u9650\\u5236\\u51FD\\u6570\\u88AB\\u8C03\\u7528\\u7684\\u6B21\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function throttle(func, limit) {\n  let inThrottle;\n  return function (...args) {\n    if (!inThrottle) {\n      func.apply(this, args);\n      inThrottle = true;\n      setTimeout(() => (inThrottle = false), limit);\n    }\n  };\n}\n\nconst handleResize = throttle(() => {\n  // Update element positions\n  console.log('Window resized at', new Date().toLocaleTimeString());\n}, 2000);\n\n// Simulate rapid calls to handleResize every 100ms\nlet intervalId = setInterval(() => {\n  handleResize();\n}, 100);\n// 'Window resized' is outputted only every 2 seconds due to throttling\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u9632\\u6296\\u548C\\u8282\\u6D41\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9632\\u6296\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9632\\u6296\\u662F\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u7528\\u4E8E\\u786E\\u4FDD\\u51FD\\u6570\\u4EC5\\u5728\\u81EA\\u4E0A\\u6B21\\u8C03\\u7528\\u540E\\u7ECF\\u8FC7\\u4E00\\u5B9A\\u65F6\\u95F4\\u540E\\u624D\\u6267\\u884C\\u3002\\u8FD9\\u5728\\u60A8\\u5E0C\\u671B\\u9650\\u5236\\u51FD\\u6570\\u88AB\\u8C03\\u7528\\u6B21\\u6570\\u7684\\u573A\\u666F\\u4E2D\\u7279\\u522B\\u6709\\u7528\\uFF0C\\u4F8B\\u5982\\u5904\\u7406\\u7528\\u6237\\u8F93\\u5165\\u4E8B\\u4EF6\\uFF08\\u5982\\u6309\\u952E\\u6216\\u9F20\\u6807\\u79FB\\u52A8\\uFF09\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528\\u6848\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60F3\\u8C61\\u4E00\\u4E0B\\uFF0C\\u60A8\\u6709\\u4E00\\u4E2A\\u641C\\u7D22\\u8F93\\u5165\\u6846\\uFF0C\\u5E76\\u4E14\\u60A8\\u60F3\\u8FDB\\u884C API \\u8C03\\u7528\\u6765\\u83B7\\u53D6\\u641C\\u7D22\\u7ED3\\u679C\\u3002\\u5982\\u679C\\u6CA1\\u6709\\u9632\\u6296\\uFF0C\\u6BCF\\u6B21\\u7528\\u6237\\u8F93\\u5165\\u4E00\\u4E2A\\u5B57\\u7B26\\u65F6\\u90FD\\u4F1A\\u8FDB\\u884C API \\u8C03\\u7528\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u5927\\u91CF\\u4E0D\\u5FC5\\u8981\\u7684\\u8C03\\u7528\\u3002\\u9632\\u6296\\u786E\\u4FDD\\u4EC5\\u5728\\u7528\\u6237\\u505C\\u6B62\\u8F93\\u5165\\u6307\\u5B9A\\u65F6\\u95F4\\u540E\\u624D\\u8FDB\\u884C API \\u8C03\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4EE3\\u7801\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function debounce(func, delay) {\n  let timeoutId;\n  return function (...args) {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() => func.apply(this, args), delay);\n  };\n}\n\n// Usage\nconst handleSearch = debounce((query) => {\n  // Make API call\n  console.log('API call with query:', query);\n}, 300);\n\ndocument.getElementById('searchInput').addEventListener('input', (event) => {\n  handleSearch(event.target.value);\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8282\\u6D41\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8282\\u6D41\\u662F\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u7528\\u4E8E\\u786E\\u4FDD\\u51FD\\u6570\\u5728\\u4E00\\u4E2A\\u6307\\u5B9A\\u7684\\u65F6\\u95F4\\u95F4\\u9694\\u5185\\u6700\\u591A\\u88AB\\u8C03\\u7528\\u4E00\\u6B21\\u3002\\u8FD9\\u5728\\u60A8\\u5E0C\\u671B\\u9650\\u5236\\u51FD\\u6570\\u88AB\\u8C03\\u7528\\u6B21\\u6570\\u7684\\u573A\\u666F\\u4E2D\\u5F88\\u6709\\u7528\\uFF0C\\u4F8B\\u5982\\u5904\\u7406\\u7A97\\u53E3\\u8C03\\u6574\\u5927\\u5C0F\\u6216\\u6EDA\\u52A8\\u7B49\\u4E8B\\u4EF6\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528\\u6848\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60F3\\u8C61\\u4E00\\u4E0B\\uFF0C\\u60A8\\u6709\\u4E00\\u4E2A\\u51FD\\u6570\\uFF0C\\u8BE5\\u51FD\\u6570\\u6839\\u636E\\u7A97\\u53E3\\u5927\\u5C0F\\u66F4\\u65B0\\u5C4F\\u5E55\\u4E0A\\u5143\\u7D20\\u7684\\u4F4D\\u7F6E\\u3002\\u5982\\u679C\\u6CA1\\u6709\\u8282\\u6D41\\uFF0C\\u6B64\\u51FD\\u6570\\u53EF\\u80FD\\u4F1A\\u5728\\u7528\\u6237\\u8C03\\u6574\\u7A97\\u53E3\\u5927\\u5C0F\\u65F6\\u6BCF\\u79D2\\u88AB\\u8C03\\u7528\\u591A\\u6B21\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u6027\\u80FD\\u95EE\\u9898\\u3002\\u8282\\u6D41\\u786E\\u4FDD\\u8BE5\\u51FD\\u6570\\u5728\\u4E00\\u4E2A\\u6307\\u5B9A\\u7684\\u65F6\\u95F4\\u95F4\\u9694\\u5185\\u6700\\u591A\\u88AB\\u8C03\\u7528\\u4E00\\u6B21\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4EE3\\u7801\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function throttle(func, limit) {\n  let inThrottle;\n  return function (...args) {\n    if (!inThrottle) {\n      func.apply(this, args);\n      inThrottle = true;\n      setTimeout(() => (inThrottle = false), limit);\n    }\n  };\n}\n\n// Usage\nconst handleResize = throttle(() => {\n  // Update element positions\n  console.log('Window resized');\n}, 100);\n\nwindow.addEventListener('resize', handleResize);\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://css-tricks.com/debouncing-throttling-explained-examples/\",children:\"\\u901A\\u8FC7\\u793A\\u4F8B\\u89E3\\u91CA\\u9632\\u6296\\u548C\\u8282\\u6D41\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/javascript-debounce-example/\",children:\"\\u4E86\\u89E3\\u9632\\u6296\\u548C\\u8282\\u6D41\\u4E4B\\u95F4\\u7684\\u533A\\u522B\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://lodash.com/docs/4.17.15#debounce\",children:\"Lodash \\u9632\\u6296\\u548C\\u8282\\u6D41\\u6587\\u6863\"})}),`\n`]})]})}function h(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(a,{...t})}):a(t)}return w(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/en-US.json
index cb90b6ef5..fa57bbcf1 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var o=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var b=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var s in e)o(r,s,{get:e[s],enumerable:!0})},t=(r,e,s,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of g(e))!m.call(r,a)&&a!==s&&o(r,a,{get:()=>e[a],enumerable:!(c=h(e,a))||c.enumerable});return r};var v=(r,e,s)=>(s=r!=null?d(p(r)):{},t(e||!r||!r.__esModule?o(s,\"default\",{value:r,enumerable:!0}):s,r)),j=r=>t(o({},\"__esModule\",{value:!0}),r);var l=b((J,i)=>{i.exports=_jsx_runtime});var D={};f(D,{default:()=>w,frontmatter:()=>y});var n=v(l()),y={title:\"Explain the concept of destructuring assignment for objects and arrays\"};function u(r){let e=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Destructuring assignment is a syntax in JavaScript that allows you to unpack values from arrays or properties from objects into distinct variables. For arrays, you use square brackets, and for objects, you use curly braces. For example:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Array destructuring\nconst [a, b] = [1, 2];\n\n// Object destructuring\nconst { name, age } = { name: 'John', age: 30 };\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Destructuring assignment for objects and arrays\"}),`\n`,(0,n.jsx)(e.p,{children:\"Destructuring assignment is a convenient way to extract values from arrays and objects into separate variables. This can make your code more readable and concise.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Array destructuring\"}),`\n`,(0,n.jsx)(e.p,{children:\"Array destructuring allows you to unpack values from arrays into distinct variables using square brackets.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Basic example\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const numbers = [1, 2, 3];\nconst [first, second, third] = numbers;\n\nconsole.log(first); // 1\nconsole.log(second); // 2\nconsole.log(third); // 3\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Skipping values\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can skip values in the array by leaving an empty space between commas.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const numbers = [1, 2, 3];\nconst [first, , third] = numbers;\n\nconsole.log(first); // 1\nconsole.log(third); // 3\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Default values\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can assign default values in case the array does not have enough elements.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const numbers = [1];\nconst [first, second = 2] = numbers;\n\nconsole.log(first); // 1\nconsole.log(second); // 2\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Object destructuring\"}),`\n`,(0,n.jsx)(e.p,{children:\"Object destructuring allows you to unpack properties from objects into distinct variables using curly braces.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Basic example\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = { name: 'John', age: 30 };\nconst { name, age } = person;\n\nconsole.log(name); // John\nconsole.log(age); // 30\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Renaming variables\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can rename the variables while destructuring.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = { name: 'John', age: 30 };\nconst { name: personName, age: personAge } = person;\n\nconsole.log(personName); // John\nconsole.log(personAge); // 30\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Default values\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can assign default values in case the property does not exist in the object.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = { name: 'John' };\nconst { name, age = 25 } = person;\n\nconsole.log(name); // John\nconsole.log(age); // 25\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Nested objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can destructure nested objects as well.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = { name: 'John', address: { city: 'New York', zip: '10001' } };\nconst {\n  name,\n  address: { city, zip },\n} = person;\n\nconsole.log(name); // John\nconsole.log(city); // New York\nconsole.log(zip); // 10001\n`})}),`\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/Web/JavaScript/Reference/Operators/Destructuring_assignment\",children:\"MDN Web Docs: Destructuring assignment\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/destructuring-assignment\",children:\"JavaScript.info: Destructuring assignment\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/destructuring-assignment-in-es6-30e398f21d10/\",children:\"FreeCodeCamp: Destructuring assignment\"})}),`\n`]})]})}function x(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(u,r)})):u(r)}var w=x;return j(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),v=(r,e)=>{for(var s in e)o(r,s,{get:e[s],enumerable:!0})},t=(r,e,s,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!b.call(r,a)&&a!==s&&o(r,a,{get:()=>e[a],enumerable:!(c=g(e,a))||c.enumerable});return r};var y=(r,e,s)=>(s=r!=null?h(m(r)):{},t(e||!r||!r.__esModule?o(s,\"default\",{value:r,enumerable:!0}):s,r)),j=r=>t(o({},\"__esModule\",{value:!0}),r);var l=f((N,i)=>{i.exports=_jsx_runtime});var w={};v(w,{default:()=>d,frontmatter:()=>x});var n=y(l()),x={title:\"Explain the concept of destructuring assignment for objects and arrays\"};function u(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Destructuring assignment is a syntax in JavaScript that allows you to unpack values from arrays or properties from objects into distinct variables. For arrays, you use square brackets, and for objects, you use curly braces. For example:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Array destructuring\nconst [a, b] = [1, 2];\n\n// Object destructuring\nconst { name, age } = { name: 'John', age: 30 };\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Destructuring assignment for objects and arrays\"}),`\n`,(0,n.jsx)(e.p,{children:\"Destructuring assignment is a convenient way to extract values from arrays and objects into separate variables. This can make your code more readable and concise.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Array destructuring\"}),`\n`,(0,n.jsx)(e.p,{children:\"Array destructuring allows you to unpack values from arrays into distinct variables using square brackets.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Basic example\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const numbers = [1, 2, 3];\nconst [first, second, third] = numbers;\n\nconsole.log(first); // 1\nconsole.log(second); // 2\nconsole.log(third); // 3\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Skipping values\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can skip values in the array by leaving an empty space between commas.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const numbers = [1, 2, 3];\nconst [first, , third] = numbers;\n\nconsole.log(first); // 1\nconsole.log(third); // 3\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Default values\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can assign default values in case the array does not have enough elements.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const numbers = [1];\nconst [first, second = 2] = numbers;\n\nconsole.log(first); // 1\nconsole.log(second); // 2\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Object destructuring\"}),`\n`,(0,n.jsx)(e.p,{children:\"Object destructuring allows you to unpack properties from objects into distinct variables using curly braces.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Basic example\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = { name: 'John', age: 30 };\nconst { name, age } = person;\n\nconsole.log(name); // John\nconsole.log(age); // 30\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Renaming variables\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can rename the variables while destructuring.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = { name: 'John', age: 30 };\nconst { name: personName, age: personAge } = person;\n\nconsole.log(personName); // John\nconsole.log(personAge); // 30\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Default values\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can assign default values in case the property does not exist in the object.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = { name: 'John' };\nconst { name, age = 25 } = person;\n\nconsole.log(name); // John\nconsole.log(age); // 25\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Nested objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can destructure nested objects as well.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = { name: 'John', address: { city: 'New York', zip: '10001' } };\nconst {\n  name,\n  address: { city, zip },\n} = person;\n\nconsole.log(name); // John\nconsole.log(city); // New York\nconsole.log(zip); // 10001\n`})}),`\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/Web/JavaScript/Reference/Operators/Destructuring_assignment\",children:\"MDN Web Docs: Destructuring assignment\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/destructuring-assignment\",children:\"JavaScript.info: Destructuring assignment\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/destructuring-assignment-in-es6-30e398f21d10/\",children:\"FreeCodeCamp: Destructuring assignment\"})}),`\n`]})]})}function d(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(u,{...r})}):u(r)}return j(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/zh-CN.json
index 420936582..c1a2d3b87 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),j=(r,n)=>{for(var s in n)o(r,s,{get:n[s],enumerable:!0})},i=(r,n,s,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of p(n))!u.call(r,c)&&c!==s&&o(r,c,{get:()=>n[c],enumerable:!(l=g(n,c))||l.enumerable});return r};var v=(r,n,s)=>(s=r!=null?d(m(r)):{},i(n||!r||!r.__esModule?o(s,\"default\",{value:r,enumerable:!0}):s,r)),N=r=>i(o({},\"__esModule\",{value:!0}),r);var a=f((w,t)=>{t.exports=_jsx_runtime});var D={};j(D,{default:()=>x,frontmatter:()=>J});var e=v(a()),J={title:\"\\u89E3\\u91CA\\u5BF9\\u8C61\\u548C\\u6570\\u7EC4\\u7684\\u89E3\\u6784\\u8D4B\\u503C\\u6982\\u5FF5\"};function h(r){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u89E3\\u6784\\u8D4B\\u503C\\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u79CD\\u8BED\\u6CD5\\uFF0C\\u5B83\\u5141\\u8BB8\\u60A8\\u5C06\\u6570\\u7EC4\\u4E2D\\u7684\\u503C\\u6216\\u5BF9\\u8C61\\u4E2D\\u7684\\u5C5E\\u6027\\u89E3\\u5305\\u5230\\u4E0D\\u540C\\u7684\\u53D8\\u91CF\\u4E2D\\u3002\\u5BF9\\u4E8E\\u6570\\u7EC4\\uFF0C\\u60A8\\u4F7F\\u7528\\u65B9\\u62EC\\u53F7\\uFF0C\\u5BF9\\u4E8E\\u5BF9\\u8C61\\uFF0C\\u60A8\\u4F7F\\u7528\\u82B1\\u62EC\\u53F7\\u3002\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u6570\\u7EC4\\u89E3\\u6784\nconst [a, b] = [1, 2];\n\n// \\u5BF9\\u8C61\\u89E3\\u6784\nconst { name, age } = { name: 'John', age: 30 };\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5BF9\\u8C61\\u548C\\u6570\\u7EC4\\u7684\\u89E3\\u6784\\u8D4B\\u503C\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u89E3\\u6784\\u8D4B\\u503C\\u662F\\u4E00\\u79CD\\u65B9\\u4FBF\\u7684\\u65B9\\u6CD5\\uFF0C\\u7528\\u4E8E\\u5C06\\u6570\\u7EC4\\u548C\\u5BF9\\u8C61\\u4E2D\\u7684\\u503C\\u63D0\\u53D6\\u5230\\u5355\\u72EC\\u7684\\u53D8\\u91CF\\u4E2D\\u3002\\u8FD9\\u53EF\\u4EE5\\u4F7F\\u60A8\\u7684\\u4EE3\\u7801\\u66F4\\u5177\\u53EF\\u8BFB\\u6027\\u548C\\u7B80\\u6D01\\u6027\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6570\\u7EC4\\u89E3\\u6784\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6570\\u7EC4\\u89E3\\u6784\\u5141\\u8BB8\\u60A8\\u4F7F\\u7528\\u65B9\\u62EC\\u53F7\\u5C06\\u6570\\u7EC4\\u4E2D\\u7684\\u503C\\u89E3\\u5305\\u5230\\u4E0D\\u540C\\u7684\\u53D8\\u91CF\\u4E2D\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u57FA\\u672C\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const numbers = [1, 2, 3];\nconst [first, second, third] = numbers;\n\nconsole.log(first); // 1\nconsole.log(second); // 2\nconsole.log(third); // 3\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u8DF3\\u8FC7\\u503C\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728\\u9017\\u53F7\\u4E4B\\u95F4\\u7559\\u4E00\\u4E2A\\u7A7A\\u683C\\u6765\\u8DF3\\u8FC7\\u6570\\u7EC4\\u4E2D\\u7684\\u503C\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const numbers = [1, 2, 3];\nconst [first, , third] = numbers;\n\nconsole.log(first); // 1\nconsole.log(third); // 3\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u9ED8\\u8BA4\\u503C\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5982\\u679C\\u6570\\u7EC4\\u6CA1\\u6709\\u8DB3\\u591F\\u7684\\u5143\\u7D20\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5206\\u914D\\u9ED8\\u8BA4\\u503C\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const numbers = [1];\nconst [first, second = 2] = numbers;\n\nconsole.log(first); // 1\nconsole.log(second); // 2\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5BF9\\u8C61\\u89E3\\u6784\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5BF9\\u8C61\\u89E3\\u6784\\u5141\\u8BB8\\u60A8\\u4F7F\\u7528\\u82B1\\u62EC\\u53F7\\u5C06\\u5BF9\\u8C61\\u4E2D\\u7684\\u5C5E\\u6027\\u89E3\\u5305\\u5230\\u4E0D\\u540C\\u7684\\u53D8\\u91CF\\u4E2D\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u57FA\\u672C\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const person = { name: 'John', age: 30 };\nconst { name, age } = person;\n\nconsole.log(name); // John\nconsole.log(age); // 30\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u91CD\\u547D\\u540D\\u53D8\\u91CF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u5728\\u89E3\\u6784\\u65F6\\u91CD\\u547D\\u540D\\u53D8\\u91CF\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const person = { name: 'John', age: 30 };\nconst { name: personName, age: personAge } = person;\n\nconsole.log(personName); // John\nconsole.log(personAge); // 30\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u9ED8\\u8BA4\\u503C\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5982\\u679C\\u5C5E\\u6027\\u5728\\u5BF9\\u8C61\\u4E2D\\u4E0D\\u5B58\\u5728\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5206\\u914D\\u9ED8\\u8BA4\\u503C\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const person = { name: 'John' };\nconst { name, age = 25 } = person;\n\nconsole.log(name); // John\nconsole.log(age); // 25\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5D4C\\u5957\\u5BF9\\u8C61\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60A8\\u4E5F\\u53EF\\u4EE5\\u89E3\\u6784\\u5D4C\\u5957\\u5BF9\\u8C61\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const person = { name: 'John', address: { city: 'New York', zip: '10001' } };\nconst {\n  name,\n  address: { city, zip },\n} = person;\n\nconsole.log(name); // John\nconsole.log(city); // New York\nconsole.log(zip); // 10001\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment\",children:\"MDN Web Docs: Destructuring assignment\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/destructuring-assignment\",children:\"JavaScript.info: Destructuring assignment\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/destructuring-assignment-in-es6-30e398f21d10/\",children:\"FreeCodeCamp: Destructuring assignment\"})}),`\n`]})]})}function b(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(h,r)})):h(r)}var x=b;return N(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var g=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var j=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),v=(r,n)=>{for(var o in n)c(r,o,{get:n[o],enumerable:!0})},i=(r,n,o,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let s of m(n))!f.call(r,s)&&s!==o&&c(r,s,{get:()=>n[s],enumerable:!(l=p(n,s))||l.enumerable});return r};var N=(r,n,o)=>(o=r!=null?g(u(r)):{},i(n||!r||!r.__esModule?c(o,\"default\",{value:r,enumerable:!0}):o,r)),J=r=>i(c({},\"__esModule\",{value:!0}),r);var a=j((_,t)=>{t.exports=_jsx_runtime});var x={};v(x,{default:()=>d,frontmatter:()=>b});var e=N(a()),b={title:\"\\u89E3\\u91CA\\u5BF9\\u8C61\\u548C\\u6570\\u7EC4\\u7684\\u89E3\\u6784\\u8D4B\\u503C\\u6982\\u5FF5\"};function h(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u89E3\\u6784\\u8D4B\\u503C\\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u79CD\\u8BED\\u6CD5\\uFF0C\\u5B83\\u5141\\u8BB8\\u60A8\\u5C06\\u6570\\u7EC4\\u4E2D\\u7684\\u503C\\u6216\\u5BF9\\u8C61\\u4E2D\\u7684\\u5C5E\\u6027\\u89E3\\u5305\\u5230\\u4E0D\\u540C\\u7684\\u53D8\\u91CF\\u4E2D\\u3002\\u5BF9\\u4E8E\\u6570\\u7EC4\\uFF0C\\u60A8\\u4F7F\\u7528\\u65B9\\u62EC\\u53F7\\uFF0C\\u5BF9\\u4E8E\\u5BF9\\u8C61\\uFF0C\\u60A8\\u4F7F\\u7528\\u82B1\\u62EC\\u53F7\\u3002\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u6570\\u7EC4\\u89E3\\u6784\nconst [a, b] = [1, 2];\n\n// \\u5BF9\\u8C61\\u89E3\\u6784\nconst { name, age } = { name: 'John', age: 30 };\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5BF9\\u8C61\\u548C\\u6570\\u7EC4\\u7684\\u89E3\\u6784\\u8D4B\\u503C\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u89E3\\u6784\\u8D4B\\u503C\\u662F\\u4E00\\u79CD\\u65B9\\u4FBF\\u7684\\u65B9\\u6CD5\\uFF0C\\u7528\\u4E8E\\u5C06\\u6570\\u7EC4\\u548C\\u5BF9\\u8C61\\u4E2D\\u7684\\u503C\\u63D0\\u53D6\\u5230\\u5355\\u72EC\\u7684\\u53D8\\u91CF\\u4E2D\\u3002\\u8FD9\\u53EF\\u4EE5\\u4F7F\\u60A8\\u7684\\u4EE3\\u7801\\u66F4\\u5177\\u53EF\\u8BFB\\u6027\\u548C\\u7B80\\u6D01\\u6027\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6570\\u7EC4\\u89E3\\u6784\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6570\\u7EC4\\u89E3\\u6784\\u5141\\u8BB8\\u60A8\\u4F7F\\u7528\\u65B9\\u62EC\\u53F7\\u5C06\\u6570\\u7EC4\\u4E2D\\u7684\\u503C\\u89E3\\u5305\\u5230\\u4E0D\\u540C\\u7684\\u53D8\\u91CF\\u4E2D\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u57FA\\u672C\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const numbers = [1, 2, 3];\nconst [first, second, third] = numbers;\n\nconsole.log(first); // 1\nconsole.log(second); // 2\nconsole.log(third); // 3\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u8DF3\\u8FC7\\u503C\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728\\u9017\\u53F7\\u4E4B\\u95F4\\u7559\\u4E00\\u4E2A\\u7A7A\\u683C\\u6765\\u8DF3\\u8FC7\\u6570\\u7EC4\\u4E2D\\u7684\\u503C\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const numbers = [1, 2, 3];\nconst [first, , third] = numbers;\n\nconsole.log(first); // 1\nconsole.log(third); // 3\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u9ED8\\u8BA4\\u503C\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5982\\u679C\\u6570\\u7EC4\\u6CA1\\u6709\\u8DB3\\u591F\\u7684\\u5143\\u7D20\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5206\\u914D\\u9ED8\\u8BA4\\u503C\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const numbers = [1];\nconst [first, second = 2] = numbers;\n\nconsole.log(first); // 1\nconsole.log(second); // 2\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5BF9\\u8C61\\u89E3\\u6784\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5BF9\\u8C61\\u89E3\\u6784\\u5141\\u8BB8\\u60A8\\u4F7F\\u7528\\u82B1\\u62EC\\u53F7\\u5C06\\u5BF9\\u8C61\\u4E2D\\u7684\\u5C5E\\u6027\\u89E3\\u5305\\u5230\\u4E0D\\u540C\\u7684\\u53D8\\u91CF\\u4E2D\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u57FA\\u672C\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const person = { name: 'John', age: 30 };\nconst { name, age } = person;\n\nconsole.log(name); // John\nconsole.log(age); // 30\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u91CD\\u547D\\u540D\\u53D8\\u91CF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u5728\\u89E3\\u6784\\u65F6\\u91CD\\u547D\\u540D\\u53D8\\u91CF\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const person = { name: 'John', age: 30 };\nconst { name: personName, age: personAge } = person;\n\nconsole.log(personName); // John\nconsole.log(personAge); // 30\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u9ED8\\u8BA4\\u503C\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5982\\u679C\\u5C5E\\u6027\\u5728\\u5BF9\\u8C61\\u4E2D\\u4E0D\\u5B58\\u5728\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5206\\u914D\\u9ED8\\u8BA4\\u503C\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const person = { name: 'John' };\nconst { name, age = 25 } = person;\n\nconsole.log(name); // John\nconsole.log(age); // 25\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5D4C\\u5957\\u5BF9\\u8C61\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60A8\\u4E5F\\u53EF\\u4EE5\\u89E3\\u6784\\u5D4C\\u5957\\u5BF9\\u8C61\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const person = { name: 'John', address: { city: 'New York', zip: '10001' } };\nconst {\n  name,\n  address: { city, zip },\n} = person;\n\nconsole.log(name); // John\nconsole.log(city); // New York\nconsole.log(zip); // 10001\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment\",children:\"MDN Web Docs: Destructuring assignment\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/destructuring-assignment\",children:\"JavaScript.info: Destructuring assignment\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/destructuring-assignment-in-es6-30e398f21d10/\",children:\"FreeCodeCamp: Destructuring assignment\"})}),`\n`]})]})}function d(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(h,{...r})}):h(r)}return J(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-error-propagation-in-javascript/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-error-propagation-in-javascript/en-US.json
index 20558b4e6..269bb04f6 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-error-propagation-in-javascript/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-error-propagation-in-javascript/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-error-propagation-in-javascript/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),y=(e,n)=>{for(var c in n)o(e,c,{get:n[c],enumerable:!0})},i=(e,n,c,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of p(n))!f.call(e,t)&&t!==c&&o(e,t,{get:()=>n[t],enumerable:!(a=u(n,t))||a.enumerable});return e};var w=(e,n,c)=>(c=e!=null?d(g(e)):{},i(n||!e||!e.__esModule?o(c,\"default\",{value:e,enumerable:!0}):c,e)),b=e=>i(o({},\"__esModule\",{value:!0}),e);var s=m((E,h)=>{h.exports=_jsx_runtime});var _={};y(_,{default:()=>x,frontmatter:()=>v});var r=w(s()),v={title:\"Explain the concept of error propagation in JavaScript\"};function l(e){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},e.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsxs)(n.p,{children:[\"Error propagation in JavaScript refers to how errors are passed through the call stack. When an error occurs in a function, it can be caught and handled using \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" blocks. If not caught, the error propagates up the call stack until it is either caught or causes the program to terminate. For example:\"]}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`function a() {\n  throw new Error('An error occurred');\n}\n\nfunction b() {\n  a();\n}\n\ntry {\n  b();\n} catch (e) {\n  console.error(e.message); // Outputs: An error occurred\n}\n`})}),`\n`,(0,r.jsx)(n.hr,{}),`\n`,(0,r.jsx)(n.h2,{children:\"Error propagation in JavaScript\"}),`\n`,(0,r.jsx)(n.p,{children:\"Error propagation in JavaScript is a mechanism that allows errors to be passed up the call stack until they are caught and handled. This is crucial for debugging and ensuring that errors do not cause the entire application to crash unexpectedly.\"}),`\n`,(0,r.jsx)(n.h3,{children:\"How errors propagate\"}),`\n`,(0,r.jsx)(n.p,{children:\"When an error occurs in a function, it can either be caught and handled within that function or propagate up the call stack to the calling function. If the calling function does not handle the error, it continues to propagate up the stack until it reaches the global scope, potentially causing the program to terminate.\"}),`\n`,(0,r.jsxs)(n.h3,{children:[\"Using \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" blocks\"]}),`\n`,(0,r.jsxs)(n.p,{children:[\"To handle errors and prevent them from propagating further, you can use \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" blocks. Here is an example:\"]}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`function a() {\n  throw new Error('An error occurred');\n}\n\nfunction b() {\n  a();\n}\n\ntry {\n  b();\n} catch (e) {\n  console.error(e.message); // Outputs: An error occurred\n}\n`})}),`\n`,(0,r.jsxs)(n.p,{children:[\"In this example, the error thrown in function \",(0,r.jsx)(n.code,{children:\"a\"}),\" propagates to function \",(0,r.jsx)(n.code,{children:\"b\"}),\", and then to the \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" block where it is finally caught and handled.\"]}),`\n`,(0,r.jsx)(n.h3,{children:\"Propagation with asynchronous code\"}),`\n`,(0,r.jsxs)(n.p,{children:[\"Error propagation works differently with asynchronous code, such as promises and \",(0,r.jsx)(n.code,{children:\"async/await\"}),\". For promises, you can use \",(0,r.jsx)(n.code,{children:\".catch()\"}),\" to handle errors:\"]}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`function a() {\n  return Promise.reject(new Error('An error occurred'));\n}\n\nfunction b() {\n  return a();\n}\n\nb().catch((e) => {\n  console.error(e.message); // Outputs: An error occurred\n});\n`})}),`\n`,(0,r.jsxs)(n.p,{children:[\"For \",(0,r.jsx)(n.code,{children:\"async/await\"}),\", you can use \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" blocks:\"]}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`async function a() {\n  throw new Error('An error occurred');\n}\n\nasync function b() {\n  await a();\n}\n\n(async () => {\n  try {\n    await b();\n  } catch (e) {\n    console.error(e.message); // Outputs: An error occurred\n  }\n})();\n`})}),`\n`,(0,r.jsx)(n.h3,{children:\"Best practices\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:\"Always handle errors at the appropriate level to prevent them from propagating unnecessarily.\"}),`\n`,(0,r.jsxs)(n.li,{children:[\"Use \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" blocks for synchronous code and \",(0,r.jsx)(n.code,{children:\".catch()\"}),\" or \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" with \",(0,r.jsx)(n.code,{children:\"async/await\"}),\" for asynchronous code.\"]}),`\n`,(0,r.jsx)(n.li,{children:\"Log errors to help with debugging and provide meaningful error messages to users.\"}),`\n`]}),`\n`,(0,r.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#exception_handling_statements\",children:\"MDN Web Docs: Error handling\"})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://javascript.info/try-catch\",children:'JavaScript.info: Error handling, \"try...catch\"'})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://nodejs.dev/learn/error-handling-in-nodejs\",children:\"Node.js Error Handling Best Practices\"})}),`\n`]})]})}function j(e={}){let{wrapper:n}=e.components||{};return n?(0,r.jsx)(n,Object.assign({},e,{children:(0,r.jsx)(l,e)})):l(e)}var x=j;return b(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var y=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),w=(e,n)=>{for(var c in n)o(e,c,{get:n[c],enumerable:!0})},i=(e,n,c,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of g(n))!m.call(e,t)&&t!==c&&o(e,t,{get:()=>n[t],enumerable:!(a=p(n,t))||a.enumerable});return e};var b=(e,n,c)=>(c=e!=null?u(f(e)):{},i(n||!e||!e.__esModule?o(c,\"default\",{value:e,enumerable:!0}):c,e)),v=e=>i(o({},\"__esModule\",{value:!0}),e);var l=y((k,h)=>{h.exports=_jsx_runtime});var j={};w(j,{default:()=>d,frontmatter:()=>x});var r=b(l()),x={title:\"Explain the concept of error propagation in JavaScript\"};function s(e){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsxs)(n.p,{children:[\"Error propagation in JavaScript refers to how errors are passed through the call stack. When an error occurs in a function, it can be caught and handled using \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" blocks. If not caught, the error propagates up the call stack until it is either caught or causes the program to terminate. For example:\"]}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`function a() {\n  throw new Error('An error occurred');\n}\n\nfunction b() {\n  a();\n}\n\ntry {\n  b();\n} catch (e) {\n  console.error(e.message); // Outputs: An error occurred\n}\n`})}),`\n`,(0,r.jsx)(n.hr,{}),`\n`,(0,r.jsx)(n.h2,{children:\"Error propagation in JavaScript\"}),`\n`,(0,r.jsx)(n.p,{children:\"Error propagation in JavaScript is a mechanism that allows errors to be passed up the call stack until they are caught and handled. This is crucial for debugging and ensuring that errors do not cause the entire application to crash unexpectedly.\"}),`\n`,(0,r.jsx)(n.h3,{children:\"How errors propagate\"}),`\n`,(0,r.jsx)(n.p,{children:\"When an error occurs in a function, it can either be caught and handled within that function or propagate up the call stack to the calling function. If the calling function does not handle the error, it continues to propagate up the stack until it reaches the global scope, potentially causing the program to terminate.\"}),`\n`,(0,r.jsxs)(n.h3,{children:[\"Using \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" blocks\"]}),`\n`,(0,r.jsxs)(n.p,{children:[\"To handle errors and prevent them from propagating further, you can use \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" blocks. Here is an example:\"]}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`function a() {\n  throw new Error('An error occurred');\n}\n\nfunction b() {\n  a();\n}\n\ntry {\n  b();\n} catch (e) {\n  console.error(e.message); // Outputs: An error occurred\n}\n`})}),`\n`,(0,r.jsxs)(n.p,{children:[\"In this example, the error thrown in function \",(0,r.jsx)(n.code,{children:\"a\"}),\" propagates to function \",(0,r.jsx)(n.code,{children:\"b\"}),\", and then to the \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" block where it is finally caught and handled.\"]}),`\n`,(0,r.jsx)(n.h3,{children:\"Propagation with asynchronous code\"}),`\n`,(0,r.jsxs)(n.p,{children:[\"Error propagation works differently with asynchronous code, such as promises and \",(0,r.jsx)(n.code,{children:\"async/await\"}),\". For promises, you can use \",(0,r.jsx)(n.code,{children:\".catch()\"}),\" to handle errors:\"]}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`function a() {\n  return Promise.reject(new Error('An error occurred'));\n}\n\nfunction b() {\n  return a();\n}\n\nb().catch((e) => {\n  console.error(e.message); // Outputs: An error occurred\n});\n`})}),`\n`,(0,r.jsxs)(n.p,{children:[\"For \",(0,r.jsx)(n.code,{children:\"async/await\"}),\", you can use \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" blocks:\"]}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`async function a() {\n  throw new Error('An error occurred');\n}\n\nasync function b() {\n  await a();\n}\n\n(async () => {\n  try {\n    await b();\n  } catch (e) {\n    console.error(e.message); // Outputs: An error occurred\n  }\n})();\n`})}),`\n`,(0,r.jsx)(n.h3,{children:\"Best practices\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:\"Always handle errors at the appropriate level to prevent them from propagating unnecessarily.\"}),`\n`,(0,r.jsxs)(n.li,{children:[\"Use \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" blocks for synchronous code and \",(0,r.jsx)(n.code,{children:\".catch()\"}),\" or \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" with \",(0,r.jsx)(n.code,{children:\"async/await\"}),\" for asynchronous code.\"]}),`\n`,(0,r.jsx)(n.li,{children:\"Log errors to help with debugging and provide meaningful error messages to users.\"}),`\n`]}),`\n`,(0,r.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#exception_handling_statements\",children:\"MDN Web Docs: Error handling\"})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://javascript.info/try-catch\",children:'JavaScript.info: Error handling, \"try...catch\"'})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://nodejs.dev/learn/error-handling-in-nodejs\",children:\"Node.js Error Handling Best Practices\"})}),`\n`]})]})}function d(e={}){let{wrapper:n}=e.components||{};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(s,{...e})}):s(e)}return v(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-error-propagation-in-javascript/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-error-propagation-in-javascript/zh-CN.json
index df12ded5c..c080c2005 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-error-propagation-in-javascript/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-error-propagation-in-javascript/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-error-propagation-in-javascript/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),y=(e,n)=>{for(var c in n)i(e,c,{get:n[c],enumerable:!0})},o=(e,n,c,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of p(n))!m.call(e,t)&&t!==c&&i(e,t,{get:()=>n[t],enumerable:!(a=u(n,t))||a.enumerable});return e};var j=(e,n,c)=>(c=e!=null?s(g(e)):{},o(n||!e||!e.__esModule?i(c,\"default\",{value:e,enumerable:!0}):c,e)),w=e=>o(i({},\"__esModule\",{value:!0}),e);var h=f((E,d)=>{d.exports=_jsx_runtime});var x={};y(x,{default:()=>_,frontmatter:()=>b});var r=j(h()),b={title:\"\\u89E3\\u91CA JavaScript \\u4E2D\\u7684\\u9519\\u8BEF\\u4F20\\u64AD\\u6982\\u5FF5\"};function l(e){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},e.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsxs)(n.p,{children:[\"JavaScript \\u4E2D\\u7684\\u9519\\u8BEF\\u4F20\\u64AD\\u6307\\u7684\\u662F\\u9519\\u8BEF\\u5982\\u4F55\\u901A\\u8FC7\\u8C03\\u7528\\u5806\\u6808\\u4F20\\u9012\\u3002\\u5F53\\u51FD\\u6570\\u4E2D\\u53D1\\u751F\\u9519\\u8BEF\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" \\u5757\\u6355\\u83B7\\u548C\\u5904\\u7406\\u5B83\\u3002\\u5982\\u679C\\u672A\\u6355\\u83B7\\uFF0C\\u9519\\u8BEF\\u4F1A\\u6CBF\\u7740\\u8C03\\u7528\\u5806\\u6808\\u5411\\u4E0A\\u5192\\u6CE1\\uFF0C\\u76F4\\u5230\\u5B83\\u88AB\\u6355\\u83B7\\u6216\\u5BFC\\u81F4\\u7A0B\\u5E8F\\u7EC8\\u6B62\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`function a() {\n  throw new Error('An error occurred');\n}\n\nfunction b() {\n  a();\n}\n\ntry {\n  b();\n} catch (e) {\n  console.error(e.message); // Outputs: An error occurred\n}\n`})}),`\n`,(0,r.jsx)(n.hr,{}),`\n`,(0,r.jsx)(n.h2,{children:\"JavaScript \\u4E2D\\u7684\\u9519\\u8BEF\\u4F20\\u64AD\"}),`\n`,(0,r.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684\\u9519\\u8BEF\\u4F20\\u64AD\\u662F\\u4E00\\u79CD\\u673A\\u5236\\uFF0C\\u5B83\\u5141\\u8BB8\\u9519\\u8BEF\\u6CBF\\u7740\\u8C03\\u7528\\u5806\\u6808\\u4F20\\u9012\\uFF0C\\u76F4\\u5230\\u5B83\\u4EEC\\u88AB\\u6355\\u83B7\\u548C\\u5904\\u7406\\u3002\\u8FD9\\u5BF9\\u4E8E\\u8C03\\u8BD5\\u548C\\u786E\\u4FDD\\u9519\\u8BEF\\u4E0D\\u4F1A\\u5BFC\\u81F4\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u610F\\u5916\\u5D29\\u6E83\\u81F3\\u5173\\u91CD\\u8981\\u3002\"}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u9519\\u8BEF\\u5982\\u4F55\\u4F20\\u64AD\"}),`\n`,(0,r.jsx)(n.p,{children:\"\\u5F53\\u51FD\\u6570\\u4E2D\\u53D1\\u751F\\u9519\\u8BEF\\u65F6\\uFF0C\\u5B83\\u53EF\\u4EE5\\u5728\\u8BE5\\u51FD\\u6570\\u5185\\u88AB\\u6355\\u83B7\\u548C\\u5904\\u7406\\uFF0C\\u6216\\u8005\\u6CBF\\u7740\\u8C03\\u7528\\u5806\\u6808\\u4F20\\u9012\\u5230\\u8C03\\u7528\\u51FD\\u6570\\u3002\\u5982\\u679C\\u8C03\\u7528\\u51FD\\u6570\\u4E0D\\u5904\\u7406\\u8BE5\\u9519\\u8BEF\\uFF0C\\u5B83\\u4F1A\\u7EE7\\u7EED\\u5728\\u5806\\u6808\\u4E0A\\u4F20\\u64AD\\uFF0C\\u76F4\\u5230\\u5B83\\u5230\\u8FBE\\u5168\\u5C40\\u8303\\u56F4\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u7A0B\\u5E8F\\u7EC8\\u6B62\\u3002\"}),`\n`,(0,r.jsxs)(n.h3,{children:[\"\\u4F7F\\u7528 \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" \\u5757\"]}),`\n`,(0,r.jsxs)(n.p,{children:[\"\\u4E3A\\u4E86\\u5904\\u7406\\u9519\\u8BEF\\u5E76\\u9632\\u6B62\\u5B83\\u4EEC\\u8FDB\\u4E00\\u6B65\\u4F20\\u64AD\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" \\u5757\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u4F8B\\u5B50\\uFF1A\"]}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`function a() {\n  throw new Error('An error occurred');\n}\n\nfunction b() {\n  a();\n}\n\ntry {\n  b();\n} catch (e) {\n  console.error(e.message); // Outputs: An error occurred\n}\n`})}),`\n`,(0,r.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u51FD\\u6570 \",(0,r.jsx)(n.code,{children:\"a\"}),\" \\u4E2D\\u629B\\u51FA\\u7684\\u9519\\u8BEF\\u4F20\\u64AD\\u5230\\u51FD\\u6570 \",(0,r.jsx)(n.code,{children:\"b\"}),\"\\uFF0C\\u7136\\u540E\\u4F20\\u64AD\\u5230 \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" \\u5757\\uFF0C\\u5728\\u90A3\\u91CC\\u5B83\\u6700\\u7EC8\\u88AB\\u6355\\u83B7\\u548C\\u5904\\u7406\\u3002\"]}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u5F02\\u6B65\\u4EE3\\u7801\\u7684\\u4F20\\u64AD\"}),`\n`,(0,r.jsxs)(n.p,{children:[\"\\u9519\\u8BEF\\u4F20\\u64AD\\u5728\\u5F02\\u6B65\\u4EE3\\u7801\\uFF08\\u5982 promises \\u548C \",(0,r.jsx)(n.code,{children:\"async/await\"}),\"\\uFF09\\u4E2D\\u7684\\u5DE5\\u4F5C\\u65B9\\u5F0F\\u6709\\u6240\\u4E0D\\u540C\\u3002\\u5BF9\\u4E8E promises\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,r.jsx)(n.code,{children:\".catch()\"}),\" \\u6765\\u5904\\u7406\\u9519\\u8BEF\\uFF1A\"]}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`function a() {\n  return Promise.reject(new Error('An error occurred'));\n}\n\nfunction b() {\n  return a();\n}\n\nb().catch((e) => {\n  console.error(e.message); // Outputs: An error occurred\n});\n`})}),`\n`,(0,r.jsxs)(n.p,{children:[\"\\u5BF9\\u4E8E \",(0,r.jsx)(n.code,{children:\"async/await\"}),\"\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" \\u5757\\uFF1A\"]}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`async function a() {\n  throw new Error('An error occurred');\n}\n\nasync function b() {\n  await a();\n}\n\n(async () => {\n  try {\n    await b();\n  } catch (e) {\n    console.error(e.message); // Outputs: An error occurred\n  }\n})();\n`})}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u6700\\u4F73\\u5B9E\\u8DF5\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:\"\\u59CB\\u7EC8\\u5728\\u9002\\u5F53\\u7684\\u7EA7\\u522B\\u5904\\u7406\\u9519\\u8BEF\\uFF0C\\u4EE5\\u9632\\u6B62\\u5B83\\u4EEC\\u4E0D\\u5FC5\\u8981\\u5730\\u4F20\\u64AD\\u3002\"}),`\n`,(0,r.jsxs)(n.li,{children:[\"\\u5BF9\\u540C\\u6B65\\u4EE3\\u7801\\u4F7F\\u7528 \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" \\u5757\\uFF0C\\u5BF9\\u5F02\\u6B65\\u4EE3\\u7801\\u4F7F\\u7528 \",(0,r.jsx)(n.code,{children:\".catch()\"}),\" \\u6216\\u5E26\\u6709 \",(0,r.jsx)(n.code,{children:\"async/await\"}),\" \\u7684 \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\"\\u3002\"]}),`\n`,(0,r.jsx)(n.li,{children:\"\\u8BB0\\u5F55\\u9519\\u8BEF\\u4EE5\\u5E2E\\u52A9\\u8C03\\u8BD5\\uFF0C\\u5E76\\u5411\\u7528\\u6237\\u63D0\\u4F9B\\u6709\\u610F\\u4E49\\u7684\\u9519\\u8BEF\\u6D88\\u606F\\u3002\"}),`\n`]}),`\n`,(0,r.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#exception_handling_statements\",children:\"MDN Web Docs: Error handling\"})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://javascript.info/try-catch\",children:'JavaScript.info: Error handling, \"try...catch\"'})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://nodejs.dev/learn/error-handling-in-nodejs\",children:\"Node.js Error Handling Best Practices\"})}),`\n`]})]})}function v(e={}){let{wrapper:n}=e.components||{};return n?(0,r.jsx)(n,Object.assign({},e,{children:(0,r.jsx)(l,e)})):l(e)}var _=v;return w(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),j=(e,n)=>{for(var c in n)i(e,c,{get:n[c],enumerable:!0})},a=(e,n,c,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of m(n))!f.call(e,t)&&t!==c&&i(e,t,{get:()=>n[t],enumerable:!(o=p(n,t))||o.enumerable});return e};var w=(e,n,c)=>(c=e!=null?u(g(e)):{},a(n||!e||!e.__esModule?i(c,\"default\",{value:e,enumerable:!0}):c,e)),v=e=>a(i({},\"__esModule\",{value:!0}),e);var h=y((A,d)=>{d.exports=_jsx_runtime});var b={};j(b,{default:()=>s,frontmatter:()=>_});var r=w(h()),_={title:\"\\u89E3\\u91CA JavaScript \\u4E2D\\u7684\\u9519\\u8BEF\\u4F20\\u64AD\\u6982\\u5FF5\"};function l(e){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsxs)(n.p,{children:[\"JavaScript \\u4E2D\\u7684\\u9519\\u8BEF\\u4F20\\u64AD\\u6307\\u7684\\u662F\\u9519\\u8BEF\\u5982\\u4F55\\u901A\\u8FC7\\u8C03\\u7528\\u5806\\u6808\\u4F20\\u9012\\u3002\\u5F53\\u51FD\\u6570\\u4E2D\\u53D1\\u751F\\u9519\\u8BEF\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" \\u5757\\u6355\\u83B7\\u548C\\u5904\\u7406\\u5B83\\u3002\\u5982\\u679C\\u672A\\u6355\\u83B7\\uFF0C\\u9519\\u8BEF\\u4F1A\\u6CBF\\u7740\\u8C03\\u7528\\u5806\\u6808\\u5411\\u4E0A\\u5192\\u6CE1\\uFF0C\\u76F4\\u5230\\u5B83\\u88AB\\u6355\\u83B7\\u6216\\u5BFC\\u81F4\\u7A0B\\u5E8F\\u7EC8\\u6B62\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`function a() {\n  throw new Error('An error occurred');\n}\n\nfunction b() {\n  a();\n}\n\ntry {\n  b();\n} catch (e) {\n  console.error(e.message); // Outputs: An error occurred\n}\n`})}),`\n`,(0,r.jsx)(n.hr,{}),`\n`,(0,r.jsx)(n.h2,{children:\"JavaScript \\u4E2D\\u7684\\u9519\\u8BEF\\u4F20\\u64AD\"}),`\n`,(0,r.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684\\u9519\\u8BEF\\u4F20\\u64AD\\u662F\\u4E00\\u79CD\\u673A\\u5236\\uFF0C\\u5B83\\u5141\\u8BB8\\u9519\\u8BEF\\u6CBF\\u7740\\u8C03\\u7528\\u5806\\u6808\\u4F20\\u9012\\uFF0C\\u76F4\\u5230\\u5B83\\u4EEC\\u88AB\\u6355\\u83B7\\u548C\\u5904\\u7406\\u3002\\u8FD9\\u5BF9\\u4E8E\\u8C03\\u8BD5\\u548C\\u786E\\u4FDD\\u9519\\u8BEF\\u4E0D\\u4F1A\\u5BFC\\u81F4\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u610F\\u5916\\u5D29\\u6E83\\u81F3\\u5173\\u91CD\\u8981\\u3002\"}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u9519\\u8BEF\\u5982\\u4F55\\u4F20\\u64AD\"}),`\n`,(0,r.jsx)(n.p,{children:\"\\u5F53\\u51FD\\u6570\\u4E2D\\u53D1\\u751F\\u9519\\u8BEF\\u65F6\\uFF0C\\u5B83\\u53EF\\u4EE5\\u5728\\u8BE5\\u51FD\\u6570\\u5185\\u88AB\\u6355\\u83B7\\u548C\\u5904\\u7406\\uFF0C\\u6216\\u8005\\u6CBF\\u7740\\u8C03\\u7528\\u5806\\u6808\\u4F20\\u9012\\u5230\\u8C03\\u7528\\u51FD\\u6570\\u3002\\u5982\\u679C\\u8C03\\u7528\\u51FD\\u6570\\u4E0D\\u5904\\u7406\\u8BE5\\u9519\\u8BEF\\uFF0C\\u5B83\\u4F1A\\u7EE7\\u7EED\\u5728\\u5806\\u6808\\u4E0A\\u4F20\\u64AD\\uFF0C\\u76F4\\u5230\\u5B83\\u5230\\u8FBE\\u5168\\u5C40\\u8303\\u56F4\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u7A0B\\u5E8F\\u7EC8\\u6B62\\u3002\"}),`\n`,(0,r.jsxs)(n.h3,{children:[\"\\u4F7F\\u7528 \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" \\u5757\"]}),`\n`,(0,r.jsxs)(n.p,{children:[\"\\u4E3A\\u4E86\\u5904\\u7406\\u9519\\u8BEF\\u5E76\\u9632\\u6B62\\u5B83\\u4EEC\\u8FDB\\u4E00\\u6B65\\u4F20\\u64AD\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" \\u5757\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u4F8B\\u5B50\\uFF1A\"]}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`function a() {\n  throw new Error('An error occurred');\n}\n\nfunction b() {\n  a();\n}\n\ntry {\n  b();\n} catch (e) {\n  console.error(e.message); // Outputs: An error occurred\n}\n`})}),`\n`,(0,r.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u51FD\\u6570 \",(0,r.jsx)(n.code,{children:\"a\"}),\" \\u4E2D\\u629B\\u51FA\\u7684\\u9519\\u8BEF\\u4F20\\u64AD\\u5230\\u51FD\\u6570 \",(0,r.jsx)(n.code,{children:\"b\"}),\"\\uFF0C\\u7136\\u540E\\u4F20\\u64AD\\u5230 \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" \\u5757\\uFF0C\\u5728\\u90A3\\u91CC\\u5B83\\u6700\\u7EC8\\u88AB\\u6355\\u83B7\\u548C\\u5904\\u7406\\u3002\"]}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u5F02\\u6B65\\u4EE3\\u7801\\u7684\\u4F20\\u64AD\"}),`\n`,(0,r.jsxs)(n.p,{children:[\"\\u9519\\u8BEF\\u4F20\\u64AD\\u5728\\u5F02\\u6B65\\u4EE3\\u7801\\uFF08\\u5982 promises \\u548C \",(0,r.jsx)(n.code,{children:\"async/await\"}),\"\\uFF09\\u4E2D\\u7684\\u5DE5\\u4F5C\\u65B9\\u5F0F\\u6709\\u6240\\u4E0D\\u540C\\u3002\\u5BF9\\u4E8E promises\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,r.jsx)(n.code,{children:\".catch()\"}),\" \\u6765\\u5904\\u7406\\u9519\\u8BEF\\uFF1A\"]}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`function a() {\n  return Promise.reject(new Error('An error occurred'));\n}\n\nfunction b() {\n  return a();\n}\n\nb().catch((e) => {\n  console.error(e.message); // Outputs: An error occurred\n});\n`})}),`\n`,(0,r.jsxs)(n.p,{children:[\"\\u5BF9\\u4E8E \",(0,r.jsx)(n.code,{children:\"async/await\"}),\"\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" \\u5757\\uFF1A\"]}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`async function a() {\n  throw new Error('An error occurred');\n}\n\nasync function b() {\n  await a();\n}\n\n(async () => {\n  try {\n    await b();\n  } catch (e) {\n    console.error(e.message); // Outputs: An error occurred\n  }\n})();\n`})}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u6700\\u4F73\\u5B9E\\u8DF5\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:\"\\u59CB\\u7EC8\\u5728\\u9002\\u5F53\\u7684\\u7EA7\\u522B\\u5904\\u7406\\u9519\\u8BEF\\uFF0C\\u4EE5\\u9632\\u6B62\\u5B83\\u4EEC\\u4E0D\\u5FC5\\u8981\\u5730\\u4F20\\u64AD\\u3002\"}),`\n`,(0,r.jsxs)(n.li,{children:[\"\\u5BF9\\u540C\\u6B65\\u4EE3\\u7801\\u4F7F\\u7528 \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\" \\u5757\\uFF0C\\u5BF9\\u5F02\\u6B65\\u4EE3\\u7801\\u4F7F\\u7528 \",(0,r.jsx)(n.code,{children:\".catch()\"}),\" \\u6216\\u5E26\\u6709 \",(0,r.jsx)(n.code,{children:\"async/await\"}),\" \\u7684 \",(0,r.jsx)(n.code,{children:\"try...catch\"}),\"\\u3002\"]}),`\n`,(0,r.jsx)(n.li,{children:\"\\u8BB0\\u5F55\\u9519\\u8BEF\\u4EE5\\u5E2E\\u52A9\\u8C03\\u8BD5\\uFF0C\\u5E76\\u5411\\u7528\\u6237\\u63D0\\u4F9B\\u6709\\u610F\\u4E49\\u7684\\u9519\\u8BEF\\u6D88\\u606F\\u3002\"}),`\n`]}),`\n`,(0,r.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#exception_handling_statements\",children:\"MDN Web Docs: Error handling\"})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://javascript.info/try-catch\",children:'JavaScript.info: Error handling, \"try...catch\"'})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://nodejs.dev/learn/error-handling-in-nodejs\",children:\"Node.js Error Handling Best Practices\"})}),`\n`]})]})}function s(e={}){let{wrapper:n}=e.components||{};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}return v(b);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-hoisting-with-regards-to-functions/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-hoisting-with-regards-to-functions/en-US.json
index ee9d2553a..e99764a97 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-hoisting-with-regards-to-functions/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-hoisting-with-regards-to-functions/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-hoisting-with-regards-to-functions/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),v=(o,n)=>{for(var i in n)r(o,i,{get:n[i],enumerable:!0})},c=(o,n,i,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of f(n))!g.call(o,t)&&t!==i&&r(o,t,{get:()=>n[t],enumerable:!(s=u(n,t))||s.enumerable});return o};var F=(o,n,i)=>(i=o!=null?d(p(o)):{},c(n||!o||!o.__esModule?r(i,\"default\",{value:o,enumerable:!0}):i,o)),w=o=>c(r({},\"__esModule\",{value:!0}),o);var h=m((H,a)=>{a.exports=_jsx_runtime});var y={};v(y,{default:()=>T,frontmatter:()=>x});var e=F(h()),x={title:\"Explain the concept of hoisting with regards to functions\"};function l(o){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"Hoisting in JavaScript is a behavior where function declarations are moved to the top of their containing scope during the compile phase. This means you can call a function before it is defined in the code. However, this does not apply to function expressions or arrow functions, which are not hoisted in the same way.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Function declaration\nhoistedFunction(); // Works fine\nfunction hoistedFunction() {\n  console.log('This function is hoisted');\n}\n\n// Function expression\nnonHoistedFunction(); // Throws an error\nvar nonHoistedFunction = function () {\n  console.log('This function is not hoisted');\n};\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"What is hoisting?\"}),`\n`,(0,e.jsx)(n.p,{children:\"Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compile phase. This allows functions to be called before they are defined in the code.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Function declarations\"}),`\n`,(0,e.jsx)(n.p,{children:\"Function declarations are fully hoisted. This means you can call a function before its declaration in the code.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`hoistedFunction(); // Works fine\n\nfunction hoistedFunction() {\n  console.log('This function is hoisted');\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Function expressions\"}),`\n`,(0,e.jsx)(n.p,{children:\"Function expressions, including arrow functions, are not hoisted in the same way. They are treated as variable assignments and are only hoisted as undefined.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`nonHoistedFunction(); // Throws an error: TypeError: nonHoistedFunction is not a function\n\nvar nonHoistedFunction = function () {\n  console.log('This function is not hoisted');\n};\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Arrow functions\"}),`\n`,(0,e.jsx)(n.p,{children:\"Arrow functions behave similarly to function expressions in terms of hoisting.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`arrowFunction(); // Throws an error: TypeError: arrowFunction is not a function\n\nvar arrowFunction = () => {\n  console.log('This arrow function is not hoisted');\n};\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Hoisting\",children:\"MDN Web Docs on Hoisting\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/hoisting\",children:\"JavaScript.info on Hoisting\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\",children:\"MDN Web Docs on Function Declarations\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function\",children:\"MDN Web Docs on Function Expressions\"})}),`\n`]})]})}function b(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,Object.assign({},o,{children:(0,e.jsx)(l,o)})):l(o)}var T=b;return w(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var v=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),F=(o,n)=>{for(var i in n)r(o,i,{get:n[i],enumerable:!0})},c=(o,n,i,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of p(n))!m.call(o,t)&&t!==i&&r(o,t,{get:()=>n[t],enumerable:!(s=f(n,t))||s.enumerable});return o};var w=(o,n,i)=>(i=o!=null?u(g(o)):{},c(n||!o||!o.__esModule?r(i,\"default\",{value:o,enumerable:!0}):i,o)),x=o=>c(r({},\"__esModule\",{value:!0}),o);var h=v((H,a)=>{a.exports=_jsx_runtime});var y={};F(y,{default:()=>d,frontmatter:()=>T});var e=w(h()),T={title:\"Explain the concept of hoisting with regards to functions\"};function l(o){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"Hoisting in JavaScript is a behavior where function declarations are moved to the top of their containing scope during the compile phase. This means you can call a function before it is defined in the code. However, this does not apply to function expressions or arrow functions, which are not hoisted in the same way.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Function declaration\nhoistedFunction(); // Works fine\nfunction hoistedFunction() {\n  console.log('This function is hoisted');\n}\n\n// Function expression\nnonHoistedFunction(); // Throws an error\nvar nonHoistedFunction = function () {\n  console.log('This function is not hoisted');\n};\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"What is hoisting?\"}),`\n`,(0,e.jsx)(n.p,{children:\"Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compile phase. This allows functions to be called before they are defined in the code.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Function declarations\"}),`\n`,(0,e.jsx)(n.p,{children:\"Function declarations are fully hoisted. This means you can call a function before its declaration in the code.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`hoistedFunction(); // Works fine\n\nfunction hoistedFunction() {\n  console.log('This function is hoisted');\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Function expressions\"}),`\n`,(0,e.jsx)(n.p,{children:\"Function expressions, including arrow functions, are not hoisted in the same way. They are treated as variable assignments and are only hoisted as undefined.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`nonHoistedFunction(); // Throws an error: TypeError: nonHoistedFunction is not a function\n\nvar nonHoistedFunction = function () {\n  console.log('This function is not hoisted');\n};\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Arrow functions\"}),`\n`,(0,e.jsx)(n.p,{children:\"Arrow functions behave similarly to function expressions in terms of hoisting.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`arrowFunction(); // Throws an error: TypeError: arrowFunction is not a function\n\nvar arrowFunction = () => {\n  console.log('This arrow function is not hoisted');\n};\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Hoisting\",children:\"MDN Web Docs on Hoisting\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/hoisting\",children:\"JavaScript.info on Hoisting\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\",children:\"MDN Web Docs on Function Declarations\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function\",children:\"MDN Web Docs on Function Expressions\"})}),`\n`]})]})}function d(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,{...o,children:(0,e.jsx)(l,{...o})}):l(o)}return x(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-hoisting-with-regards-to-functions/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-hoisting-with-regards-to-functions/zh-CN.json
index 31dfbfe2d..009d0276b 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-hoisting-with-regards-to-functions/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-hoisting-with-regards-to-functions/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-hoisting-with-regards-to-functions/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var F=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),m=(o,n)=>{for(var i in n)t(o,i,{get:n[i],enumerable:!0})},s=(o,n,i,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of p(n))!g.call(o,r)&&r!==i&&t(o,r,{get:()=>n[r],enumerable:!(c=u(n,r))||c.enumerable});return o};var v=(o,n,i)=>(i=o!=null?d(f(o)):{},s(n||!o||!o.__esModule?t(i,\"default\",{value:o,enumerable:!0}):i,o)),j=o=>s(t({},\"__esModule\",{value:!0}),o);var h=F((H,l)=>{l.exports=_jsx_runtime});var S={};m(S,{default:()=>D,frontmatter:()=>x});var e=v(h()),x={title:\"\\u89E3\\u91CA\\u5173\\u4E8E\\u51FD\\u6570\\u7684\\u63D0\\u5347\\u6982\\u5FF5\"};function a(o){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684\\u63D0\\u5347\\u662F\\u4E00\\u79CD\\u884C\\u4E3A\\uFF0C\\u5728\\u7F16\\u8BD1\\u9636\\u6BB5\\uFF0C\\u51FD\\u6570\\u58F0\\u660E\\u4F1A\\u88AB\\u79FB\\u52A8\\u5230\\u5176\\u5305\\u542B\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u4F60\\u53EF\\u4EE5\\u5728\\u4EE3\\u7801\\u4E2D\\u5B9A\\u4E49\\u51FD\\u6570\\u4E4B\\u524D\\u8C03\\u7528\\u5B83\\u3002\\u4F46\\u662F\\uFF0C\\u8FD9\\u4E0D\\u9002\\u7528\\u4E8E\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u6216\\u7BAD\\u5934\\u51FD\\u6570\\uFF0C\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u4EE5\\u76F8\\u540C\\u7684\\u65B9\\u5F0F\\u88AB\\u63D0\\u5347\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Function declaration\nhoistedFunction(); // Works fine\nfunction hoistedFunction() {\n  console.log('This function is hoisted');\n}\n\n// Function expression\nnonHoistedFunction(); // Throws an error\nvar nonHoistedFunction = function () {\n  console.log('This function is not hoisted');\n};\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u63D0\\u5347\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u63D0\\u5347\\u662F\\u4E00\\u79CD JavaScript \\u673A\\u5236\\uFF0C\\u5728\\u7F16\\u8BD1\\u9636\\u6BB5\\uFF0C\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u58F0\\u660E\\u4F1A\\u88AB\\u79FB\\u52A8\\u5230\\u5176\\u5305\\u542B\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\u3002\\u8FD9\\u5141\\u8BB8\\u5728\\u4EE3\\u7801\\u4E2D\\u5B9A\\u4E49\\u51FD\\u6570\\u4E4B\\u524D\\u8C03\\u7528\\u5B83\\u4EEC\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u58F0\\u660E\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51FD\\u6570\\u58F0\\u660E\\u4F1A\\u88AB\\u5B8C\\u5168\\u63D0\\u5347\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u4F60\\u53EF\\u4EE5\\u5728\\u4EE3\\u7801\\u4E2D\\u58F0\\u660E\\u51FD\\u6570\\u4E4B\\u524D\\u8C03\\u7528\\u5B83\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`hoistedFunction(); // Works fine\n\nfunction hoistedFunction() {\n  console.log('This function is hoisted');\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\uFF08\\u5305\\u62EC\\u7BAD\\u5934\\u51FD\\u6570\\uFF09\\u4E0D\\u4F1A\\u4EE5\\u76F8\\u540C\\u7684\\u65B9\\u5F0F\\u88AB\\u63D0\\u5347\\u3002\\u5B83\\u4EEC\\u88AB\\u89C6\\u4E3A\\u53D8\\u91CF\\u8D4B\\u503C\\uFF0C\\u5E76\\u4E14\\u4EC5\\u88AB\\u63D0\\u5347\\u4E3A undefined\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`nonHoistedFunction(); // Throws an error: TypeError: nonHoistedFunction is not a function\n\nvar nonHoistedFunction = function () {\n  console.log('This function is not hoisted');\n};\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7BAD\\u5934\\u51FD\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5C31\\u63D0\\u5347\\u800C\\u8A00\\uFF0C\\u7BAD\\u5934\\u51FD\\u6570\\u7684\\u884C\\u4E3A\\u7C7B\\u4F3C\\u4E8E\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`arrowFunction(); // Throws an error: TypeError: arrowFunction is not a function\n\nvar arrowFunction = () => {\n  console.log('This arrow function is not hoisted');\n};\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Hoisting\",children:\"MDN Web Docs on Hoisting\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/hoisting\",children:\"JavaScript.info on Hoisting\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\",children:\"MDN Web Docs on Function Declarations\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function\",children:\"MDN Web Docs on Function Expressions\"})}),`\n`]})]})}function T(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,Object.assign({},o,{children:(0,e.jsx)(a,o)})):a(o)}var D=T;return j(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var m=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),v=(o,n)=>{for(var i in n)t(o,i,{get:n[i],enumerable:!0})},s=(o,n,i,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of f(n))!F.call(o,r)&&r!==i&&t(o,r,{get:()=>n[r],enumerable:!(c=p(n,r))||c.enumerable});return o};var x=(o,n,i)=>(i=o!=null?u(g(o)):{},s(n||!o||!o.__esModule?t(i,\"default\",{value:o,enumerable:!0}):i,o)),T=o=>s(t({},\"__esModule\",{value:!0}),o);var h=m((w,l)=>{l.exports=_jsx_runtime});var D={};v(D,{default:()=>d,frontmatter:()=>j});var e=x(h()),j={title:\"\\u89E3\\u91CA\\u5173\\u4E8E\\u51FD\\u6570\\u7684\\u63D0\\u5347\\u6982\\u5FF5\"};function a(o){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684\\u63D0\\u5347\\u662F\\u4E00\\u79CD\\u884C\\u4E3A\\uFF0C\\u5728\\u7F16\\u8BD1\\u9636\\u6BB5\\uFF0C\\u51FD\\u6570\\u58F0\\u660E\\u4F1A\\u88AB\\u79FB\\u52A8\\u5230\\u5176\\u5305\\u542B\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u4F60\\u53EF\\u4EE5\\u5728\\u4EE3\\u7801\\u4E2D\\u5B9A\\u4E49\\u51FD\\u6570\\u4E4B\\u524D\\u8C03\\u7528\\u5B83\\u3002\\u4F46\\u662F\\uFF0C\\u8FD9\\u4E0D\\u9002\\u7528\\u4E8E\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u6216\\u7BAD\\u5934\\u51FD\\u6570\\uFF0C\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u4EE5\\u76F8\\u540C\\u7684\\u65B9\\u5F0F\\u88AB\\u63D0\\u5347\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Function declaration\nhoistedFunction(); // Works fine\nfunction hoistedFunction() {\n  console.log('This function is hoisted');\n}\n\n// Function expression\nnonHoistedFunction(); // Throws an error\nvar nonHoistedFunction = function () {\n  console.log('This function is not hoisted');\n};\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u63D0\\u5347\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u63D0\\u5347\\u662F\\u4E00\\u79CD JavaScript \\u673A\\u5236\\uFF0C\\u5728\\u7F16\\u8BD1\\u9636\\u6BB5\\uFF0C\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u58F0\\u660E\\u4F1A\\u88AB\\u79FB\\u52A8\\u5230\\u5176\\u5305\\u542B\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\u3002\\u8FD9\\u5141\\u8BB8\\u5728\\u4EE3\\u7801\\u4E2D\\u5B9A\\u4E49\\u51FD\\u6570\\u4E4B\\u524D\\u8C03\\u7528\\u5B83\\u4EEC\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u58F0\\u660E\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51FD\\u6570\\u58F0\\u660E\\u4F1A\\u88AB\\u5B8C\\u5168\\u63D0\\u5347\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u4F60\\u53EF\\u4EE5\\u5728\\u4EE3\\u7801\\u4E2D\\u58F0\\u660E\\u51FD\\u6570\\u4E4B\\u524D\\u8C03\\u7528\\u5B83\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`hoistedFunction(); // Works fine\n\nfunction hoistedFunction() {\n  console.log('This function is hoisted');\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\uFF08\\u5305\\u62EC\\u7BAD\\u5934\\u51FD\\u6570\\uFF09\\u4E0D\\u4F1A\\u4EE5\\u76F8\\u540C\\u7684\\u65B9\\u5F0F\\u88AB\\u63D0\\u5347\\u3002\\u5B83\\u4EEC\\u88AB\\u89C6\\u4E3A\\u53D8\\u91CF\\u8D4B\\u503C\\uFF0C\\u5E76\\u4E14\\u4EC5\\u88AB\\u63D0\\u5347\\u4E3A undefined\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`nonHoistedFunction(); // Throws an error: TypeError: nonHoistedFunction is not a function\n\nvar nonHoistedFunction = function () {\n  console.log('This function is not hoisted');\n};\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7BAD\\u5934\\u51FD\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5C31\\u63D0\\u5347\\u800C\\u8A00\\uFF0C\\u7BAD\\u5934\\u51FD\\u6570\\u7684\\u884C\\u4E3A\\u7C7B\\u4F3C\\u4E8E\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`arrowFunction(); // Throws an error: TypeError: arrowFunction is not a function\n\nvar arrowFunction = () => {\n  console.log('This arrow function is not hoisted');\n};\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Hoisting\",children:\"MDN Web Docs on Hoisting\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/hoisting\",children:\"JavaScript.info on Hoisting\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\",children:\"MDN Web Docs on Function Declarations\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function\",children:\"MDN Web Docs on Function Expressions\"})}),`\n`]})]})}function d(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,{...o,children:(0,e.jsx)(a,{...o})}):a(o)}return T(D);})();\n;return Component;"
 }
\ No newline at end of file
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 a031bdbed..13fff1525 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-inheritance-in-es2015-classes/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var k=(s,e)=>()=>(e||s((e={exports:{}}).exports,e),e.exports),x=(s,e)=>{for(var a in e)t(s,a,{get:e[a],enumerable:!0})},o=(s,e,a,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!g.call(s,r)&&r!==a&&t(s,r,{get:()=>e[r],enumerable:!(c=p(e,r))||c.enumerable});return s};var f=(s,e,a)=>(a=s!=null?d(u(s)):{},o(e||!s||!s.__esModule?t(a,\"default\",{value:s,enumerable:!0}):a,s)),b=s=>o(t({},\"__esModule\",{value:!0}),s);var i=k((j,l)=>{l.exports=_jsx_runtime});var D={};x(D,{default:()=>C,frontmatter:()=>y});var n=f(i()),y={title:\"Explain the concept of inheritance in ES2015 classes\"};function h(s){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},s.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Inheritance in ES2015 classes allows one class to extend another, enabling the child class to inherit properties and methods from the parent class. This is done using the \",(0,n.jsx)(e.code,{children:\"extends\"}),\" keyword. The \",(0,n.jsx)(e.code,{children:\"super\"}),\" keyword is used to call the constructor and methods of the parent class. Here's a quick example:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Animal {\n  constructor(name) {\n    this.name = name;\n  }\n\n  speak() {\n    console.log(\\`\\${this.name} makes a noise.\\`);\n  }\n}\n\nclass Dog extends Animal {\n  constructor(name, breed) {\n    super(name);\n    this.breed = breed;\n  }\n\n  speak() {\n    console.log(\\`\\${this.name} barks.\\`);\n  }\n}\n\nconst dog = new Dog('Rex', 'German Shepherd');\ndog.speak(); // Rex barks.\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Inheritance in ES2015 classes\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Basic concept\"}),`\n`,(0,n.jsx)(e.p,{children:\"Inheritance in ES2015 classes allows a class (child class) to inherit properties and methods from another class (parent class). This promotes code reuse and a hierarchical class structure.\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"extends\"}),\" keyword\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"extends\"}),\" keyword is used to create a class that is a child of another class. The child class inherits all the properties and methods of the parent class.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class ParentClass {\n  constructor() {\n    this.parentProperty = 'I am a parent property';\n  }\n\n  parentMethod() {\n    console.log('This is a parent method');\n  }\n}\n\nclass ChildClass extends ParentClass {\n  constructor() {\n    super(); // Calls the parent class constructor\n    this.childProperty = 'I am a child property';\n  }\n\n  childMethod() {\n    console.log('This is a child method');\n  }\n}\n\nconst child = new ChildClass();\nconsole.log(child.parentProperty); // I am a parent property\nchild.parentMethod(); // This is a parent method\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"super\"}),\" keyword\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"super\"}),\" keyword is used to call the constructor of the parent class and to access its methods. This is necessary when you want to initialize the parent class properties in the child class.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Animal {\n  constructor(name) {\n    this.name = name;\n  }\n\n  speak() {\n    console.log(\\`\\${this.name} makes a noise.\\`);\n  }\n}\n\nclass Dog extends Animal {\n  constructor(name, breed) {\n    super(name); // Calls the parent class constructor\n    this.breed = breed;\n  }\n\n  speak() {\n    super.speak(); // Calls the parent class method\n    console.log(\\`\\${this.name} barks.\\`);\n  }\n}\n\nconst dog = new Dog('Rex', 'German Shepherd');\ndog.speak();\n// Rex makes a noise.\n// Rex barks.\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Method overriding\"}),`\n`,(0,n.jsx)(e.p,{children:\"Child classes can override methods from the parent class. This allows the child class to provide a specific implementation of a method that is already defined in the parent class.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Animal {\n  speak() {\n    console.log('Animal makes a noise.');\n  }\n}\n\nclass Dog extends Animal {\n  speak() {\n    console.log('Dog barks.');\n  }\n}\n\nconst dog = new Dog();\ndog.speak(); // Dog barks.\n`})}),`\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/Web/JavaScript/Reference/Classes\",children:\"MDN Web Docs: Classes\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain\",children:\"MDN Web Docs: Inheritance\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/class-inheritance\",children:\"JavaScript.info: Class inheritance\"})}),`\n`]})]})}function w(s={}){let{wrapper:e}=s.components||{};return e?(0,n.jsx)(e,Object.assign({},s,{children:(0,n.jsx)(h,s)})):h(s)}var C=w;return b(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var x=(s,e)=>()=>(e||s((e={exports:{}}).exports,e),e.exports),f=(s,e)=>{for(var a in e)t(s,a,{get:e[a],enumerable:!0})},o=(s,e,a,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!k.call(s,r)&&r!==a&&t(s,r,{get:()=>e[r],enumerable:!(c=m(e,r))||c.enumerable});return s};var b=(s,e,a)=>(a=s!=null?p(g(s)):{},o(e||!s||!s.__esModule?t(a,\"default\",{value:s,enumerable:!0}):a,s)),y=s=>o(t({},\"__esModule\",{value:!0}),s);var i=x((v,l)=>{l.exports=_jsx_runtime});var C={};f(C,{default:()=>d,frontmatter:()=>w});var n=b(i()),w={title:\"Explain the concept of inheritance in ES2015 classes\"};function h(s){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...s.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Inheritance in ES2015 classes allows one class to extend another, enabling the child class to inherit properties and methods from the parent class. This is done using the \",(0,n.jsx)(e.code,{children:\"extends\"}),\" keyword. The \",(0,n.jsx)(e.code,{children:\"super\"}),\" keyword is used to call the constructor and methods of the parent class. Here's a quick example:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Animal {\n  constructor(name) {\n    this.name = name;\n  }\n\n  speak() {\n    console.log(\\`\\${this.name} makes a noise.\\`);\n  }\n}\n\nclass Dog extends Animal {\n  constructor(name, breed) {\n    super(name);\n    this.breed = breed;\n  }\n\n  speak() {\n    console.log(\\`\\${this.name} barks.\\`);\n  }\n}\n\nconst dog = new Dog('Rex', 'German Shepherd');\ndog.speak(); // Rex barks.\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Inheritance in ES2015 classes\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Basic concept\"}),`\n`,(0,n.jsx)(e.p,{children:\"Inheritance in ES2015 classes allows a class (child class) to inherit properties and methods from another class (parent class). This promotes code reuse and a hierarchical class structure.\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"extends\"}),\" keyword\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"extends\"}),\" keyword is used to create a class that is a child of another class. The child class inherits all the properties and methods of the parent class.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class ParentClass {\n  constructor() {\n    this.parentProperty = 'I am a parent property';\n  }\n\n  parentMethod() {\n    console.log('This is a parent method');\n  }\n}\n\nclass ChildClass extends ParentClass {\n  constructor() {\n    super(); // Calls the parent class constructor\n    this.childProperty = 'I am a child property';\n  }\n\n  childMethod() {\n    console.log('This is a child method');\n  }\n}\n\nconst child = new ChildClass();\nconsole.log(child.parentProperty); // I am a parent property\nchild.parentMethod(); // This is a parent method\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"super\"}),\" keyword\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"super\"}),\" keyword is used to call the constructor of the parent class and to access its methods. This is necessary when you want to initialize the parent class properties in the child class.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Animal {\n  constructor(name) {\n    this.name = name;\n  }\n\n  speak() {\n    console.log(\\`\\${this.name} makes a noise.\\`);\n  }\n}\n\nclass Dog extends Animal {\n  constructor(name, breed) {\n    super(name); // Calls the parent class constructor\n    this.breed = breed;\n  }\n\n  speak() {\n    super.speak(); // Calls the parent class method\n    console.log(\\`\\${this.name} barks.\\`);\n  }\n}\n\nconst dog = new Dog('Rex', 'German Shepherd');\ndog.speak();\n// Rex makes a noise.\n// Rex barks.\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Method overriding\"}),`\n`,(0,n.jsx)(e.p,{children:\"Child classes can override methods from the parent class. This allows the child class to provide a specific implementation of a method that is already defined in the parent class.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Animal {\n  speak() {\n    console.log('Animal makes a noise.');\n  }\n}\n\nclass Dog extends Animal {\n  speak() {\n    console.log('Dog barks.');\n  }\n}\n\nconst dog = new Dog();\ndog.speak(); // Dog barks.\n`})}),`\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/Web/JavaScript/Reference/Classes\",children:\"MDN Web Docs: Classes\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain\",children:\"MDN Web Docs: Inheritance\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/class-inheritance\",children:\"JavaScript.info: Class inheritance\"})}),`\n`]})]})}function d(s={}){let{wrapper:e}=s.components||{};return e?(0,n.jsx)(e,{...s,children:(0,n.jsx)(h,{...s})}):h(s)}return y(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-inheritance-in-es2015-classes/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-inheritance-in-es2015-classes/zh-CN.json
index 26e57a1f8..d76bae014 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-inheritance-in-es2015-classes/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-inheritance-in-es2015-classes/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-inheritance-in-es2015-classes/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var x=(s,n)=>()=>(n||s((n={exports:{}}).exports,n),n.exports),k=(s,n)=>{for(var r in n)c(s,r,{get:n[r],enumerable:!0})},o=(s,n,r,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let a of m(n))!u.call(s,a)&&a!==r&&c(s,a,{get:()=>n[a],enumerable:!(l=p(n,a))||l.enumerable});return s};var b=(s,n,r)=>(r=s!=null?d(g(s)):{},o(n||!s||!s.__esModule?c(r,\"default\",{value:s,enumerable:!0}):r,s)),C=s=>o(c({},\"__esModule\",{value:!0}),s);var i=x((S,t)=>{t.exports=_jsx_runtime});var _={};k(_,{default:()=>f,frontmatter:()=>D});var e=b(i()),D={title:\"\\u89E3\\u91CA ES2015 \\u7C7B\\u4E2D\\u7684\\u7EE7\\u627F\\u6982\\u5FF5\"};function h(s){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},s.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"ES2015 \\u7C7B\\u4E2D\\u7684\\u7EE7\\u627F\\u5141\\u8BB8\\u4E00\\u4E2A\\u7C7B\\u6269\\u5C55\\u53E6\\u4E00\\u4E2A\\u7C7B\\uFF0C\\u4F7F\\u5B50\\u7C7B\\u80FD\\u591F\\u4ECE\\u7236\\u7C7B\\u7EE7\\u627F\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\\u8FD9\\u662F\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"extends\"}),\" \\u5173\\u952E\\u5B57\\u5B8C\\u6210\\u7684\\u3002\",(0,e.jsx)(n.code,{children:\"super\"}),\" \\u5173\\u952E\\u5B57\\u7528\\u4E8E\\u8C03\\u7528\\u7236\\u7C7B\\u7684\\u6784\\u9020\\u51FD\\u6570\\u548C\\u65B9\\u6CD5\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u5FEB\\u901F\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Animal {\n  constructor(name) {\n    this.name = name;\n  }\n\n  speak() {\n    console.log(\\`\\${this.name} makes a noise.\\`);\n  }\n}\n\nclass Dog extends Animal {\n  constructor(name, breed) {\n    super(name);\n    this.breed = breed;\n  }\n\n  speak() {\n    console.log(\\`\\${this.name} barks.\\`);\n  }\n}\n\nconst dog = new Dog('Rex', 'German Shepherd');\ndog.speak(); // Rex barks.\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"ES2015 \\u7C7B\\u4E2D\\u7684\\u7EE7\\u627F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u57FA\\u672C\\u6982\\u5FF5\"}),`\n`,(0,e.jsx)(n.p,{children:\"ES2015 \\u7C7B\\u4E2D\\u7684\\u7EE7\\u627F\\u5141\\u8BB8\\u4E00\\u4E2A\\u7C7B\\uFF08\\u5B50\\u7C7B\\uFF09\\u4ECE\\u53E6\\u4E00\\u4E2A\\u7C7B\\uFF08\\u7236\\u7C7B\\uFF09\\u7EE7\\u627F\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\\u8FD9\\u4FC3\\u8FDB\\u4E86\\u4EE3\\u7801\\u91CD\\u7528\\u548C\\u5206\\u5C42\\u7C7B\\u7ED3\\u6784\\u3002\"}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"extends\"}),\" \\u5173\\u952E\\u5B57\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"extends\"}),\" \\u5173\\u952E\\u5B57\\u53EF\\u4EE5\\u521B\\u5EFA\\u4E00\\u4E2A\\u4F5C\\u4E3A\\u53E6\\u4E00\\u4E2A\\u7C7B\\u5B50\\u7C7B\\u7684\\u7C7B\\u3002\\u5B50\\u7C7B\\u7EE7\\u627F\\u7236\\u7C7B\\u7684\\u6240\\u6709\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class ParentClass {\n  constructor() {\n    this.parentProperty = 'I am a parent property';\n  }\n\n  parentMethod() {\n    console.log('This is a parent method');\n  }\n}\n\nclass ChildClass extends ParentClass {\n  constructor() {\n    super(); // Calls the parent class constructor\n    this.childProperty = 'I am a child property';\n  }\n\n  childMethod() {\n    console.log('This is a child method');\n  }\n}\n\nconst child = new ChildClass();\nconsole.log(child.parentProperty); // I am a parent property\nchild.parentMethod(); // This is a parent method\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"super\"}),\" \\u5173\\u952E\\u5B57\"]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"super\"}),\" \\u5173\\u952E\\u5B57\\u7528\\u4E8E\\u8C03\\u7528\\u7236\\u7C7B\\u7684\\u6784\\u9020\\u51FD\\u6570\\u5E76\\u8BBF\\u95EE\\u5176\\u65B9\\u6CD5\\u3002\\u5F53\\u60A8\\u60F3\\u5728\\u5B50\\u7C7B\\u4E2D\\u521D\\u59CB\\u5316\\u7236\\u7C7B\\u5C5E\\u6027\\u65F6\\uFF0C\\u8FD9\\u662F\\u5FC5\\u9700\\u7684\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Animal {\n  constructor(name) {\n    this.name = name;\n  }\n\n  speak() {\n    console.log(\\`\\${this.name} makes a noise.\\`);\n  }\n}\n\nclass Dog extends Animal {\n  constructor(name, breed) {\n    super(name); // Calls the parent class constructor\n    this.breed = breed;\n  }\n\n  speak() {\n    super.speak(); // Calls the parent class method\n    console.log(\\`\\${this.name} barks.\\`);\n  }\n}\n\nconst dog = new Dog('Rex', 'German Shepherd');\ndog.speak();\n// Rex makes a noise.\n// Rex barks.\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u65B9\\u6CD5\\u91CD\\u5199\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5B50\\u7C7B\\u53EF\\u4EE5\\u91CD\\u5199\\u7236\\u7C7B\\u4E2D\\u7684\\u65B9\\u6CD5\\u3002\\u8FD9\\u5141\\u8BB8\\u5B50\\u7C7B\\u63D0\\u4F9B\\u5DF2\\u7ECF\\u5728\\u7236\\u7C7B\\u4E2D\\u5B9A\\u4E49\\u7684\\u65B9\\u6CD5\\u7684\\u7279\\u5B9A\\u5B9E\\u73B0\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Animal {\n  speak() {\n    console.log('Animal makes a noise.');\n  }\n}\n\nclass Dog extends Animal {\n  speak() {\n    console.log('Dog barks.');\n  }\n}\n\nconst dog = new Dog();\ndog.speak(); // Dog barks.\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes\",children:\"MDN Web \\u6587\\u6863\\uFF1A\\u7C7B\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain\",children:\"MDN Web \\u6587\\u6863\\uFF1A\\u7EE7\\u627F\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://zh.javascript.info/class-inheritance\",children:\"JavaScript.info\\uFF1A\\u7C7B\\u7EE7\\u627F\"})}),`\n`]})]})}function j(s={}){let{wrapper:n}=s.components||{};return n?(0,e.jsx)(n,Object.assign({},s,{children:(0,e.jsx)(h,s)})):h(s)}var f=j;return C(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var k=(s,n)=>()=>(n||s((n={exports:{}}).exports,n),n.exports),b=(s,n)=>{for(var r in n)l(s,r,{get:n[r],enumerable:!0})},c=(s,n,r,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let a of g(n))!x.call(s,a)&&a!==r&&l(s,a,{get:()=>n[a],enumerable:!(o=m(n,a))||o.enumerable});return s};var C=(s,n,r)=>(r=s!=null?p(u(s)):{},c(n||!s||!s.__esModule?l(r,\"default\",{value:s,enumerable:!0}):r,s)),D=s=>c(l({},\"__esModule\",{value:!0}),s);var h=k((v,t)=>{t.exports=_jsx_runtime});var _={};b(_,{default:()=>d,frontmatter:()=>f});var e=C(h()),f={title:\"\\u89E3\\u91CA ES2015 \\u7C7B\\u4E2D\\u7684\\u7EE7\\u627F\\u6982\\u5FF5\"};function i(s){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...s.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"ES2015 \\u7C7B\\u4E2D\\u7684\\u7EE7\\u627F\\u5141\\u8BB8\\u4E00\\u4E2A\\u7C7B\\u6269\\u5C55\\u53E6\\u4E00\\u4E2A\\u7C7B\\uFF0C\\u4F7F\\u5B50\\u7C7B\\u80FD\\u591F\\u4ECE\\u7236\\u7C7B\\u7EE7\\u627F\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\\u8FD9\\u662F\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"extends\"}),\" \\u5173\\u952E\\u5B57\\u5B8C\\u6210\\u7684\\u3002\",(0,e.jsx)(n.code,{children:\"super\"}),\" \\u5173\\u952E\\u5B57\\u7528\\u4E8E\\u8C03\\u7528\\u7236\\u7C7B\\u7684\\u6784\\u9020\\u51FD\\u6570\\u548C\\u65B9\\u6CD5\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u5FEB\\u901F\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Animal {\n  constructor(name) {\n    this.name = name;\n  }\n\n  speak() {\n    console.log(\\`\\${this.name} makes a noise.\\`);\n  }\n}\n\nclass Dog extends Animal {\n  constructor(name, breed) {\n    super(name);\n    this.breed = breed;\n  }\n\n  speak() {\n    console.log(\\`\\${this.name} barks.\\`);\n  }\n}\n\nconst dog = new Dog('Rex', 'German Shepherd');\ndog.speak(); // Rex barks.\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"ES2015 \\u7C7B\\u4E2D\\u7684\\u7EE7\\u627F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u57FA\\u672C\\u6982\\u5FF5\"}),`\n`,(0,e.jsx)(n.p,{children:\"ES2015 \\u7C7B\\u4E2D\\u7684\\u7EE7\\u627F\\u5141\\u8BB8\\u4E00\\u4E2A\\u7C7B\\uFF08\\u5B50\\u7C7B\\uFF09\\u4ECE\\u53E6\\u4E00\\u4E2A\\u7C7B\\uFF08\\u7236\\u7C7B\\uFF09\\u7EE7\\u627F\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\\u8FD9\\u4FC3\\u8FDB\\u4E86\\u4EE3\\u7801\\u91CD\\u7528\\u548C\\u5206\\u5C42\\u7C7B\\u7ED3\\u6784\\u3002\"}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"extends\"}),\" \\u5173\\u952E\\u5B57\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"extends\"}),\" \\u5173\\u952E\\u5B57\\u53EF\\u4EE5\\u521B\\u5EFA\\u4E00\\u4E2A\\u4F5C\\u4E3A\\u53E6\\u4E00\\u4E2A\\u7C7B\\u5B50\\u7C7B\\u7684\\u7C7B\\u3002\\u5B50\\u7C7B\\u7EE7\\u627F\\u7236\\u7C7B\\u7684\\u6240\\u6709\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class ParentClass {\n  constructor() {\n    this.parentProperty = 'I am a parent property';\n  }\n\n  parentMethod() {\n    console.log('This is a parent method');\n  }\n}\n\nclass ChildClass extends ParentClass {\n  constructor() {\n    super(); // Calls the parent class constructor\n    this.childProperty = 'I am a child property';\n  }\n\n  childMethod() {\n    console.log('This is a child method');\n  }\n}\n\nconst child = new ChildClass();\nconsole.log(child.parentProperty); // I am a parent property\nchild.parentMethod(); // This is a parent method\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"super\"}),\" \\u5173\\u952E\\u5B57\"]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"super\"}),\" \\u5173\\u952E\\u5B57\\u7528\\u4E8E\\u8C03\\u7528\\u7236\\u7C7B\\u7684\\u6784\\u9020\\u51FD\\u6570\\u5E76\\u8BBF\\u95EE\\u5176\\u65B9\\u6CD5\\u3002\\u5F53\\u60A8\\u60F3\\u5728\\u5B50\\u7C7B\\u4E2D\\u521D\\u59CB\\u5316\\u7236\\u7C7B\\u5C5E\\u6027\\u65F6\\uFF0C\\u8FD9\\u662F\\u5FC5\\u9700\\u7684\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Animal {\n  constructor(name) {\n    this.name = name;\n  }\n\n  speak() {\n    console.log(\\`\\${this.name} makes a noise.\\`);\n  }\n}\n\nclass Dog extends Animal {\n  constructor(name, breed) {\n    super(name); // Calls the parent class constructor\n    this.breed = breed;\n  }\n\n  speak() {\n    super.speak(); // Calls the parent class method\n    console.log(\\`\\${this.name} barks.\\`);\n  }\n}\n\nconst dog = new Dog('Rex', 'German Shepherd');\ndog.speak();\n// Rex makes a noise.\n// Rex barks.\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u65B9\\u6CD5\\u91CD\\u5199\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5B50\\u7C7B\\u53EF\\u4EE5\\u91CD\\u5199\\u7236\\u7C7B\\u4E2D\\u7684\\u65B9\\u6CD5\\u3002\\u8FD9\\u5141\\u8BB8\\u5B50\\u7C7B\\u63D0\\u4F9B\\u5DF2\\u7ECF\\u5728\\u7236\\u7C7B\\u4E2D\\u5B9A\\u4E49\\u7684\\u65B9\\u6CD5\\u7684\\u7279\\u5B9A\\u5B9E\\u73B0\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Animal {\n  speak() {\n    console.log('Animal makes a noise.');\n  }\n}\n\nclass Dog extends Animal {\n  speak() {\n    console.log('Dog barks.');\n  }\n}\n\nconst dog = new Dog();\ndog.speak(); // Dog barks.\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes\",children:\"MDN Web \\u6587\\u6863\\uFF1A\\u7C7B\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain\",children:\"MDN Web \\u6587\\u6863\\uFF1A\\u7EE7\\u627F\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://zh.javascript.info/class-inheritance\",children:\"JavaScript.info\\uFF1A\\u7C7B\\u7EE7\\u627F\"})}),`\n`]})]})}function d(s={}){let{wrapper:n}=s.components||{};return n?(0,e.jsx)(n,{...s,children:(0,e.jsx)(i,{...s})}):i(s)}return D(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-input-validation-and-its-importance-in-security/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-input-validation-and-its-importance-in-security/en-US.json
index a46ca05e5..ad31026fe 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-input-validation-and-its-importance-in-security/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-input-validation-and-its-importance-in-security/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-input-validation-and-its-importance-in-security/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},l=(t,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!g.call(t,r)&&r!==i&&a(t,r,{get:()=>e[r],enumerable:!(s=u(e,r))||s.enumerable});return t};var v=(t,e,i)=>(i=t!=null?h(m(t)):{},l(e||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),b=t=>l(a({},\"__esModule\",{value:!0}),t);var c=f((k,o)=>{o.exports=_jsx_runtime});var S={};y(S,{default:()=>I,frontmatter:()=>w});var n=v(c()),w={title:\"Explain the concept of input validation and its importance in security\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",ol:\"ol\",strong:\"strong\",pre:\"pre\",code:\"code\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Input validation is the process of ensuring that user input is correct, safe, and meets the application's requirements. It is crucial for security because it helps prevent attacks like SQL injection, cross-site scripting (XSS), and other forms of data manipulation. By validating input, you ensure that only properly formatted data enters your system, reducing the risk of malicious data causing harm.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Input validation and its importance in security\"}),`\n`,(0,n.jsx)(e.h3,{children:\"What is input validation?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Input validation is the process of verifying that the data provided by a user or other external sources meets the expected format, type, and constraints before it is processed by the application. This can include checking for:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Correct data type (e.g., string, number)\"}),`\n`,(0,n.jsx)(e.li,{children:\"Proper format (e.g., email addresses, phone numbers)\"}),`\n`,(0,n.jsx)(e.li,{children:\"Acceptable value ranges (e.g., age between 0 and 120)\"}),`\n`,(0,n.jsx)(e.li,{children:\"Required fields being filled\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Types of input validation\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Client-side validation\"}),\": This occurs in the user's browser before the data is sent to the server. It provides immediate feedback to the user and can improve the user experience. However, it should not be solely relied upon for security purposes, as it can be easily bypassed.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<form>\n  <input type=\"text\" id=\"username\" required pattern=\"[A-Za-z0-9]{5,}\" />\n  <input type=\"submit\" />\n</form>\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Server-side validation\"}),\": This occurs on the server after the data has been submitted. It is essential for security because it ensures that all data is validated regardless of the client's behavior.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const express = require('express');\nconst app = express();\n\napp.post('/submit', (req, res) => {\n  const username = req.body.username;\n  if (!/^[A-Za-z0-9]{5,}$/.test(username)) {\n    return res.status(400).send('Invalid username');\n  }\n  // Proceed with processing the valid input\n});\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Importance of input validation in security\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Preventing SQL injection\"}),\": By validating and sanitizing input, you can prevent attackers from injecting malicious SQL code into your database queries.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const username = req.body.username;\nconst query = 'SELECT * FROM users WHERE username = ?';\ndb.query(query, [username], (err, results) => {\n  // Handle results\n});\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Preventing cross-site scripting (XSS)\"}),\": Input validation helps ensure that user input does not contain malicious scripts that could be executed in the browser.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const sanitizeHtml = require('sanitize-html');\nconst userInput = req.body.comment;\nconst sanitizedInput = sanitizeHtml(userInput);\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Preventing buffer overflow attacks\"}),\": By validating the length of input data, you can prevent attackers from sending excessively large inputs that could cause buffer overflows and crash your application.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Ensuring data integrity\"}),\": Input validation helps maintain the integrity of your data by ensuring that only properly formatted and expected data is processed and stored.\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Best practices for input validation\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Always validate input on the server side, even if you also validate on the client side\"}),`\n`,(0,n.jsx)(e.li,{children:\"Use built-in validation functions and libraries where possible\"}),`\n`,(0,n.jsx)(e.li,{children:\"Sanitize input to remove or escape potentially harmful characters\"}),`\n`,(0,n.jsx)(e.li,{children:\"Implement whitelisting (allowing only known good input) rather than blacklisting (blocking known bad input)\"}),`\n`,(0,n.jsx)(e.li,{children:\"Regularly update and review your validation rules to address new security threats\"}),`\n`]}),`\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://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html\",children:\"OWASP Input Validation Cheat Sheet\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation\",children:\"MDN Web Docs: Client-side form validation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.npmjs.com/package/sanitize-html\",children:\"Sanitize-html library\"})}),`\n`]})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var I=x;return b(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},l=(t,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!f.call(t,r)&&r!==i&&a(t,r,{get:()=>e[r],enumerable:!(s=p(e,r))||s.enumerable});return t};var b=(t,e,i)=>(i=t!=null?u(g(t)):{},l(e||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),w=t=>l(a({},\"__esModule\",{value:!0}),t);var c=y((k,o)=>{o.exports=_jsx_runtime});var I={};v(I,{default:()=>h,frontmatter:()=>x});var n=b(c()),x={title:\"Explain the concept of input validation and its importance in security\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Input validation is the process of ensuring that user input is correct, safe, and meets the application's requirements. It is crucial for security because it helps prevent attacks like SQL injection, cross-site scripting (XSS), and other forms of data manipulation. By validating input, you ensure that only properly formatted data enters your system, reducing the risk of malicious data causing harm.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Input validation and its importance in security\"}),`\n`,(0,n.jsx)(e.h3,{children:\"What is input validation?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Input validation is the process of verifying that the data provided by a user or other external sources meets the expected format, type, and constraints before it is processed by the application. This can include checking for:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Correct data type (e.g., string, number)\"}),`\n`,(0,n.jsx)(e.li,{children:\"Proper format (e.g., email addresses, phone numbers)\"}),`\n`,(0,n.jsx)(e.li,{children:\"Acceptable value ranges (e.g., age between 0 and 120)\"}),`\n`,(0,n.jsx)(e.li,{children:\"Required fields being filled\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Types of input validation\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Client-side validation\"}),\": This occurs in the user's browser before the data is sent to the server. It provides immediate feedback to the user and can improve the user experience. However, it should not be solely relied upon for security purposes, as it can be easily bypassed.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<form>\n  <input type=\"text\" id=\"username\" required pattern=\"[A-Za-z0-9]{5,}\" />\n  <input type=\"submit\" />\n</form>\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Server-side validation\"}),\": This occurs on the server after the data has been submitted. It is essential for security because it ensures that all data is validated regardless of the client's behavior.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const express = require('express');\nconst app = express();\n\napp.post('/submit', (req, res) => {\n  const username = req.body.username;\n  if (!/^[A-Za-z0-9]{5,}$/.test(username)) {\n    return res.status(400).send('Invalid username');\n  }\n  // Proceed with processing the valid input\n});\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Importance of input validation in security\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Preventing SQL injection\"}),\": By validating and sanitizing input, you can prevent attackers from injecting malicious SQL code into your database queries.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const username = req.body.username;\nconst query = 'SELECT * FROM users WHERE username = ?';\ndb.query(query, [username], (err, results) => {\n  // Handle results\n});\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Preventing cross-site scripting (XSS)\"}),\": Input validation helps ensure that user input does not contain malicious scripts that could be executed in the browser.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const sanitizeHtml = require('sanitize-html');\nconst userInput = req.body.comment;\nconst sanitizedInput = sanitizeHtml(userInput);\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Preventing buffer overflow attacks\"}),\": By validating the length of input data, you can prevent attackers from sending excessively large inputs that could cause buffer overflows and crash your application.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Ensuring data integrity\"}),\": Input validation helps maintain the integrity of your data by ensuring that only properly formatted and expected data is processed and stored.\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Best practices for input validation\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Always validate input on the server side, even if you also validate on the client side\"}),`\n`,(0,n.jsx)(e.li,{children:\"Use built-in validation functions and libraries where possible\"}),`\n`,(0,n.jsx)(e.li,{children:\"Sanitize input to remove or escape potentially harmful characters\"}),`\n`,(0,n.jsx)(e.li,{children:\"Implement whitelisting (allowing only known good input) rather than blacklisting (blocking known bad input)\"}),`\n`,(0,n.jsx)(e.li,{children:\"Regularly update and review your validation rules to address new security threats\"}),`\n`]}),`\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://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html\",children:\"OWASP Input Validation Cheat Sheet\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation\",children:\"MDN Web Docs: Client-side form validation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.npmjs.com/package/sanitize-html\",children:\"Sanitize-html library\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return w(I);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-input-validation-and-its-importance-in-security/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-input-validation-and-its-importance-in-security/zh-CN.json
index 65df0a924..790e954b5 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-input-validation-and-its-importance-in-security/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-input-validation-and-its-importance-in-security/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-input-validation-and-its-importance-in-security/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var o=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),S=(r,n)=>{for(var i in n)t(r,i,{get:n[i],enumerable:!0})},c=(r,n,i,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of p(n))!g.call(r,l)&&l!==i&&t(r,l,{get:()=>n[l],enumerable:!(s=u(n,l))||s.enumerable});return r};var f=(r,n,i)=>(i=r!=null?o(m(r)):{},c(n||!r||!r.__esModule?t(i,\"default\",{value:r,enumerable:!0}):i,r)),j=r=>c(t({},\"__esModule\",{value:!0}),r);var d=x((L,h)=>{h.exports=_jsx_runtime});var y={};S(y,{default:()=>b,frontmatter:()=>_});var e=f(d()),_={title:\"\\u89E3\\u91CA\\u8F93\\u5165\\u9A8C\\u8BC1\\u7684\\u6982\\u5FF5\\u53CA\\u5176\\u5728\\u5B89\\u5168\\u4E2D\\u7684\\u91CD\\u8981\\u6027\"};function a(r){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",ol:\"ol\",strong:\"strong\",pre:\"pre\",code:\"code\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8F93\\u5165\\u9A8C\\u8BC1\\u662F\\u786E\\u4FDD\\u7528\\u6237\\u8F93\\u5165\\u6B63\\u786E\\u3001\\u5B89\\u5168\\u5E76\\u6EE1\\u8DB3\\u5E94\\u7528\\u7A0B\\u5E8F\\u8981\\u6C42\\u7684\\u8FC7\\u7A0B\\u3002\\u5B83\\u5BF9\\u5B89\\u5168\\u81F3\\u5173\\u91CD\\u8981\\uFF0C\\u56E0\\u4E3A\\u5B83\\u6709\\u52A9\\u4E8E\\u9632\\u6B62 SQL \\u6CE8\\u5165\\u3001\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS) \\u548C\\u5176\\u4ED6\\u5F62\\u5F0F\\u7684\\u6570\\u636E\\u64CD\\u7EB5\\u7B49\\u653B\\u51FB\\u3002\\u901A\\u8FC7\\u9A8C\\u8BC1\\u8F93\\u5165\\uFF0C\\u60A8\\u53EF\\u4EE5\\u786E\\u4FDD\\u53EA\\u6709\\u683C\\u5F0F\\u6B63\\u786E\\u7684\\u6570\\u636E\\u624D\\u80FD\\u8FDB\\u5165\\u60A8\\u7684\\u7CFB\\u7EDF\\uFF0C\\u4ECE\\u800C\\u964D\\u4F4E\\u6076\\u610F\\u6570\\u636E\\u9020\\u6210\\u635F\\u5BB3\\u7684\\u98CE\\u9669\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u8F93\\u5165\\u9A8C\\u8BC1\\u53CA\\u5176\\u5728\\u5B89\\u5168\\u4E2D\\u7684\\u91CD\\u8981\\u6027\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EC0\\u4E48\\u662F\\u8F93\\u5165\\u9A8C\\u8BC1\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8F93\\u5165\\u9A8C\\u8BC1\\u662F\\u9A8C\\u8BC1\\u7528\\u6237\\u6216\\u5176\\u4ED6\\u5916\\u90E8\\u6765\\u6E90\\u63D0\\u4F9B\\u7684\\u6570\\u636E\\u5728\\u5E94\\u7528\\u7A0B\\u5E8F\\u5904\\u7406\\u4E4B\\u524D\\u662F\\u5426\\u6EE1\\u8DB3\\u9884\\u671F\\u683C\\u5F0F\\u3001\\u7C7B\\u578B\\u548C\\u7EA6\\u675F\\u7684\\u8FC7\\u7A0B\\u3002\\u8FD9\\u53EF\\u4EE5\\u5305\\u62EC\\u68C0\\u67E5\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u6B63\\u786E\\u7684\\u6570\\u636E\\u7C7B\\u578B\\uFF08\\u4F8B\\u5982\\uFF0C\\u5B57\\u7B26\\u4E32\\u3001\\u6570\\u5B57\\uFF09\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u9002\\u5F53\\u7684\\u683C\\u5F0F\\uFF08\\u4F8B\\u5982\\uFF0C\\u7535\\u5B50\\u90AE\\u4EF6\\u5730\\u5740\\u3001\\u7535\\u8BDD\\u53F7\\u7801\\uFF09\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u53EF\\u63A5\\u53D7\\u7684\\u6570\\u503C\\u8303\\u56F4\\uFF08\\u4F8B\\u5982\\uFF0C\\u5E74\\u9F84\\u5728 0 \\u5230 120 \\u5C81\\u4E4B\\u95F4\\uFF09\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5FC5\\u586B\\u5B57\\u6BB5\\u5DF2\\u586B\\u5199\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8F93\\u5165\\u9A8C\\u8BC1\\u7684\\u7C7B\\u578B\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u5BA2\\u6237\\u7AEF\\u9A8C\\u8BC1\"}),\"\\uFF1A\\u8FD9\\u53D1\\u751F\\u5728\\u7528\\u6237\\u5C06\\u6570\\u636E\\u53D1\\u9001\\u5230\\u670D\\u52A1\\u5668\\u4E4B\\u524D\\uFF0C\\u5728\\u7528\\u6237\\u7684\\u6D4F\\u89C8\\u5668\\u4E2D\\u8FDB\\u884C\\u3002\\u5B83\\u5411\\u7528\\u6237\\u63D0\\u4F9B\\u5373\\u65F6\\u53CD\\u9988\\uFF0C\\u5E76\\u53EF\\u4EE5\\u6539\\u5584\\u7528\\u6237\\u4F53\\u9A8C\\u3002\\u4F46\\u662F\\uFF0C\\u4E0D\\u5E94\\u4EC5\\u4F9D\\u8D56\\u5B83\\u6765\\u5B9E\\u73B0\\u5B89\\u5168\\u76EE\\u7684\\uFF0C\\u56E0\\u4E3A\\u5B83\\u5F88\\u5BB9\\u6613\\u88AB\\u7ED5\\u8FC7\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-html\",children:`<form>\n  <input type=\"text\" id=\"username\" required pattern=\"[A-Za-z0-9]{5,}\" />\n  <input type=\"submit\" />\n</form>\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u670D\\u52A1\\u5668\\u7AEF\\u9A8C\\u8BC1\"}),\"\\uFF1A\\u8FD9\\u53D1\\u751F\\u5728\\u6570\\u636E\\u63D0\\u4EA4\\u5230\\u670D\\u52A1\\u5668\\u4E4B\\u540E\\u3002\\u5B83\\u5BF9\\u4E8E\\u5B89\\u5168\\u81F3\\u5173\\u91CD\\u8981\\uFF0C\\u56E0\\u4E3A\\u5B83\\u786E\\u4FDD\\u6240\\u6709\\u6570\\u636E\\u90FD\\u7ECF\\u8FC7\\u9A8C\\u8BC1\\uFF0C\\u800C\\u4E0D\\u7BA1\\u5BA2\\u6237\\u7AEF\\u7684\\u884C\\u4E3A\\u5982\\u4F55\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const express = require('express');\nconst app = express();\n\napp.post('/submit', (req, res) => {\n  const username = req.body.username;\n  if (!/^[A-Za-z0-9]{5,}$/.test(username)) {\n    return res.status(400).send('Invalid username');\n  }\n  // Proceed with processing the valid input\n});\n`})}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8F93\\u5165\\u9A8C\\u8BC1\\u5728\\u5B89\\u5168\\u4E2D\\u7684\\u91CD\\u8981\\u6027\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u9632\\u6B62 SQL \\u6CE8\\u5165\"}),\"\\uFF1A\\u901A\\u8FC7\\u9A8C\\u8BC1\\u548C\\u6E05\\u7406\\u8F93\\u5165\\uFF0C\\u60A8\\u53EF\\u4EE5\\u9632\\u6B62\\u653B\\u51FB\\u8005\\u5C06\\u6076\\u610F SQL \\u4EE3\\u7801\\u6CE8\\u5165\\u5230\\u60A8\\u7684\\u6570\\u636E\\u5E93\\u67E5\\u8BE2\\u4E2D\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const username = req.body.username;\nconst query = 'SELECT * FROM users WHERE username = ?';\ndb.query(query, [username], (err, results) => {\n  // Handle results\n});\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u9632\\u6B62\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS)\"}),\"\\uFF1A\\u8F93\\u5165\\u9A8C\\u8BC1\\u6709\\u52A9\\u4E8E\\u786E\\u4FDD\\u7528\\u6237\\u8F93\\u5165\\u4E0D\\u5305\\u542B\\u53EF\\u80FD\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u6267\\u884C\\u7684\\u6076\\u610F\\u811A\\u672C\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const sanitizeHtml = require('sanitize-html');\nconst userInput = req.body.comment;\nconst sanitizedInput = sanitizeHtml(userInput);\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u9632\\u6B62\\u7F13\\u51B2\\u533A\\u6EA2\\u51FA\\u653B\\u51FB\"}),\"\\uFF1A\\u901A\\u8FC7\\u9A8C\\u8BC1\\u8F93\\u5165\\u6570\\u636E\\u7684\\u957F\\u5EA6\\uFF0C\\u60A8\\u53EF\\u4EE5\\u9632\\u6B62\\u653B\\u51FB\\u8005\\u53D1\\u9001\\u8FC7\\u5927\\u7684\\u8F93\\u5165\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u7F13\\u51B2\\u533A\\u6EA2\\u51FA\\u5E76\\u4F7F\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u5D29\\u6E83\\u3002\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u786E\\u4FDD\\u6570\\u636E\\u5B8C\\u6574\\u6027\"}),\"\\uFF1A\\u8F93\\u5165\\u9A8C\\u8BC1\\u901A\\u8FC7\\u786E\\u4FDD\\u4EC5\\u5904\\u7406\\u548C\\u5B58\\u50A8\\u683C\\u5F0F\\u6B63\\u786E\\u4E14\\u9884\\u671F\\u7684\\u6570\\u636E\\u6765\\u5E2E\\u52A9\\u7EF4\\u62A4\\u6570\\u636E\\u7684\\u5B8C\\u6574\\u6027\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8F93\\u5165\\u9A8C\\u8BC1\\u7684\\u6700\\u4F73\\u5B9E\\u8DF5\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u59CB\\u7EC8\\u5728\\u670D\\u52A1\\u5668\\u7AEF\\u9A8C\\u8BC1\\u8F93\\u5165\\uFF0C\\u5373\\u4F7F\\u60A8\\u4E5F\\u5728\\u5BA2\\u6237\\u7AEF\\u8FDB\\u884C\\u9A8C\\u8BC1\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5C3D\\u53EF\\u80FD\\u4F7F\\u7528\\u5185\\u7F6E\\u9A8C\\u8BC1\\u51FD\\u6570\\u548C\\u5E93\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u6E05\\u7406\\u8F93\\u5165\\u4EE5\\u5220\\u9664\\u6216\\u8F6C\\u4E49\\u6F5C\\u5728\\u7684\\u6709\\u5BB3\\u5B57\\u7B26\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B9E\\u65BD\\u767D\\u540D\\u5355\\uFF08\\u4EC5\\u5141\\u8BB8\\u5DF2\\u77E5\\u7684\\u826F\\u597D\\u8F93\\u5165\\uFF09\\u800C\\u4E0D\\u662F\\u9ED1\\u540D\\u5355\\uFF08\\u963B\\u6B62\\u5DF2\\u77E5\\u7684\\u9519\\u8BEF\\u8F93\\u5165\\uFF09\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B9A\\u671F\\u66F4\\u65B0\\u548C\\u5BA1\\u67E5\\u60A8\\u7684\\u9A8C\\u8BC1\\u89C4\\u5219\\u4EE5\\u5E94\\u5BF9\\u65B0\\u7684\\u5B89\\u5168\\u5A01\\u80C1\"}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html\",children:\"OWASP \\u8F93\\u5165\\u9A8C\\u8BC1\\u5907\\u5FD8\\u5355\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation\",children:\"MDN Web \\u6587\\u6863\\uFF1A\\u5BA2\\u6237\\u7AEF\\u8868\\u5355\\u9A8C\\u8BC1\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.npmjs.com/package/sanitize-html\",children:\"Sanitize-html \\u5E93\"})}),`\n`]})]})}function q(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(a,r)})):a(r)}var b=q;return j(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var S=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),f=(r,n)=>{for(var i in n)t(r,i,{get:n[i],enumerable:!0})},s=(r,n,i,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of m(n))!x.call(r,l)&&l!==i&&t(r,l,{get:()=>n[l],enumerable:!(c=p(n,l))||c.enumerable});return r};var _=(r,n,i)=>(i=r!=null?u(g(r)):{},s(n||!r||!r.__esModule?t(i,\"default\",{value:r,enumerable:!0}):i,r)),q=r=>s(t({},\"__esModule\",{value:!0}),r);var d=S((b,h)=>{h.exports=_jsx_runtime});var y={};f(y,{default:()=>o,frontmatter:()=>j});var e=_(d()),j={title:\"\\u89E3\\u91CA\\u8F93\\u5165\\u9A8C\\u8BC1\\u7684\\u6982\\u5FF5\\u53CA\\u5176\\u5728\\u5B89\\u5168\\u4E2D\\u7684\\u91CD\\u8981\\u6027\"};function a(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8F93\\u5165\\u9A8C\\u8BC1\\u662F\\u786E\\u4FDD\\u7528\\u6237\\u8F93\\u5165\\u6B63\\u786E\\u3001\\u5B89\\u5168\\u5E76\\u6EE1\\u8DB3\\u5E94\\u7528\\u7A0B\\u5E8F\\u8981\\u6C42\\u7684\\u8FC7\\u7A0B\\u3002\\u5B83\\u5BF9\\u5B89\\u5168\\u81F3\\u5173\\u91CD\\u8981\\uFF0C\\u56E0\\u4E3A\\u5B83\\u6709\\u52A9\\u4E8E\\u9632\\u6B62 SQL \\u6CE8\\u5165\\u3001\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS) \\u548C\\u5176\\u4ED6\\u5F62\\u5F0F\\u7684\\u6570\\u636E\\u64CD\\u7EB5\\u7B49\\u653B\\u51FB\\u3002\\u901A\\u8FC7\\u9A8C\\u8BC1\\u8F93\\u5165\\uFF0C\\u60A8\\u53EF\\u4EE5\\u786E\\u4FDD\\u53EA\\u6709\\u683C\\u5F0F\\u6B63\\u786E\\u7684\\u6570\\u636E\\u624D\\u80FD\\u8FDB\\u5165\\u60A8\\u7684\\u7CFB\\u7EDF\\uFF0C\\u4ECE\\u800C\\u964D\\u4F4E\\u6076\\u610F\\u6570\\u636E\\u9020\\u6210\\u635F\\u5BB3\\u7684\\u98CE\\u9669\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u8F93\\u5165\\u9A8C\\u8BC1\\u53CA\\u5176\\u5728\\u5B89\\u5168\\u4E2D\\u7684\\u91CD\\u8981\\u6027\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EC0\\u4E48\\u662F\\u8F93\\u5165\\u9A8C\\u8BC1\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8F93\\u5165\\u9A8C\\u8BC1\\u662F\\u9A8C\\u8BC1\\u7528\\u6237\\u6216\\u5176\\u4ED6\\u5916\\u90E8\\u6765\\u6E90\\u63D0\\u4F9B\\u7684\\u6570\\u636E\\u5728\\u5E94\\u7528\\u7A0B\\u5E8F\\u5904\\u7406\\u4E4B\\u524D\\u662F\\u5426\\u6EE1\\u8DB3\\u9884\\u671F\\u683C\\u5F0F\\u3001\\u7C7B\\u578B\\u548C\\u7EA6\\u675F\\u7684\\u8FC7\\u7A0B\\u3002\\u8FD9\\u53EF\\u4EE5\\u5305\\u62EC\\u68C0\\u67E5\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u6B63\\u786E\\u7684\\u6570\\u636E\\u7C7B\\u578B\\uFF08\\u4F8B\\u5982\\uFF0C\\u5B57\\u7B26\\u4E32\\u3001\\u6570\\u5B57\\uFF09\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u9002\\u5F53\\u7684\\u683C\\u5F0F\\uFF08\\u4F8B\\u5982\\uFF0C\\u7535\\u5B50\\u90AE\\u4EF6\\u5730\\u5740\\u3001\\u7535\\u8BDD\\u53F7\\u7801\\uFF09\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u53EF\\u63A5\\u53D7\\u7684\\u6570\\u503C\\u8303\\u56F4\\uFF08\\u4F8B\\u5982\\uFF0C\\u5E74\\u9F84\\u5728 0 \\u5230 120 \\u5C81\\u4E4B\\u95F4\\uFF09\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5FC5\\u586B\\u5B57\\u6BB5\\u5DF2\\u586B\\u5199\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8F93\\u5165\\u9A8C\\u8BC1\\u7684\\u7C7B\\u578B\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u5BA2\\u6237\\u7AEF\\u9A8C\\u8BC1\"}),\"\\uFF1A\\u8FD9\\u53D1\\u751F\\u5728\\u7528\\u6237\\u5C06\\u6570\\u636E\\u53D1\\u9001\\u5230\\u670D\\u52A1\\u5668\\u4E4B\\u524D\\uFF0C\\u5728\\u7528\\u6237\\u7684\\u6D4F\\u89C8\\u5668\\u4E2D\\u8FDB\\u884C\\u3002\\u5B83\\u5411\\u7528\\u6237\\u63D0\\u4F9B\\u5373\\u65F6\\u53CD\\u9988\\uFF0C\\u5E76\\u53EF\\u4EE5\\u6539\\u5584\\u7528\\u6237\\u4F53\\u9A8C\\u3002\\u4F46\\u662F\\uFF0C\\u4E0D\\u5E94\\u4EC5\\u4F9D\\u8D56\\u5B83\\u6765\\u5B9E\\u73B0\\u5B89\\u5168\\u76EE\\u7684\\uFF0C\\u56E0\\u4E3A\\u5B83\\u5F88\\u5BB9\\u6613\\u88AB\\u7ED5\\u8FC7\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-html\",children:`<form>\n  <input type=\"text\" id=\"username\" required pattern=\"[A-Za-z0-9]{5,}\" />\n  <input type=\"submit\" />\n</form>\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u670D\\u52A1\\u5668\\u7AEF\\u9A8C\\u8BC1\"}),\"\\uFF1A\\u8FD9\\u53D1\\u751F\\u5728\\u6570\\u636E\\u63D0\\u4EA4\\u5230\\u670D\\u52A1\\u5668\\u4E4B\\u540E\\u3002\\u5B83\\u5BF9\\u4E8E\\u5B89\\u5168\\u81F3\\u5173\\u91CD\\u8981\\uFF0C\\u56E0\\u4E3A\\u5B83\\u786E\\u4FDD\\u6240\\u6709\\u6570\\u636E\\u90FD\\u7ECF\\u8FC7\\u9A8C\\u8BC1\\uFF0C\\u800C\\u4E0D\\u7BA1\\u5BA2\\u6237\\u7AEF\\u7684\\u884C\\u4E3A\\u5982\\u4F55\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const express = require('express');\nconst app = express();\n\napp.post('/submit', (req, res) => {\n  const username = req.body.username;\n  if (!/^[A-Za-z0-9]{5,}$/.test(username)) {\n    return res.status(400).send('Invalid username');\n  }\n  // Proceed with processing the valid input\n});\n`})}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8F93\\u5165\\u9A8C\\u8BC1\\u5728\\u5B89\\u5168\\u4E2D\\u7684\\u91CD\\u8981\\u6027\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u9632\\u6B62 SQL \\u6CE8\\u5165\"}),\"\\uFF1A\\u901A\\u8FC7\\u9A8C\\u8BC1\\u548C\\u6E05\\u7406\\u8F93\\u5165\\uFF0C\\u60A8\\u53EF\\u4EE5\\u9632\\u6B62\\u653B\\u51FB\\u8005\\u5C06\\u6076\\u610F SQL \\u4EE3\\u7801\\u6CE8\\u5165\\u5230\\u60A8\\u7684\\u6570\\u636E\\u5E93\\u67E5\\u8BE2\\u4E2D\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const username = req.body.username;\nconst query = 'SELECT * FROM users WHERE username = ?';\ndb.query(query, [username], (err, results) => {\n  // Handle results\n});\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u9632\\u6B62\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS)\"}),\"\\uFF1A\\u8F93\\u5165\\u9A8C\\u8BC1\\u6709\\u52A9\\u4E8E\\u786E\\u4FDD\\u7528\\u6237\\u8F93\\u5165\\u4E0D\\u5305\\u542B\\u53EF\\u80FD\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u6267\\u884C\\u7684\\u6076\\u610F\\u811A\\u672C\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const sanitizeHtml = require('sanitize-html');\nconst userInput = req.body.comment;\nconst sanitizedInput = sanitizeHtml(userInput);\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u9632\\u6B62\\u7F13\\u51B2\\u533A\\u6EA2\\u51FA\\u653B\\u51FB\"}),\"\\uFF1A\\u901A\\u8FC7\\u9A8C\\u8BC1\\u8F93\\u5165\\u6570\\u636E\\u7684\\u957F\\u5EA6\\uFF0C\\u60A8\\u53EF\\u4EE5\\u9632\\u6B62\\u653B\\u51FB\\u8005\\u53D1\\u9001\\u8FC7\\u5927\\u7684\\u8F93\\u5165\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u7F13\\u51B2\\u533A\\u6EA2\\u51FA\\u5E76\\u4F7F\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u5D29\\u6E83\\u3002\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u786E\\u4FDD\\u6570\\u636E\\u5B8C\\u6574\\u6027\"}),\"\\uFF1A\\u8F93\\u5165\\u9A8C\\u8BC1\\u901A\\u8FC7\\u786E\\u4FDD\\u4EC5\\u5904\\u7406\\u548C\\u5B58\\u50A8\\u683C\\u5F0F\\u6B63\\u786E\\u4E14\\u9884\\u671F\\u7684\\u6570\\u636E\\u6765\\u5E2E\\u52A9\\u7EF4\\u62A4\\u6570\\u636E\\u7684\\u5B8C\\u6574\\u6027\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8F93\\u5165\\u9A8C\\u8BC1\\u7684\\u6700\\u4F73\\u5B9E\\u8DF5\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u59CB\\u7EC8\\u5728\\u670D\\u52A1\\u5668\\u7AEF\\u9A8C\\u8BC1\\u8F93\\u5165\\uFF0C\\u5373\\u4F7F\\u60A8\\u4E5F\\u5728\\u5BA2\\u6237\\u7AEF\\u8FDB\\u884C\\u9A8C\\u8BC1\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5C3D\\u53EF\\u80FD\\u4F7F\\u7528\\u5185\\u7F6E\\u9A8C\\u8BC1\\u51FD\\u6570\\u548C\\u5E93\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u6E05\\u7406\\u8F93\\u5165\\u4EE5\\u5220\\u9664\\u6216\\u8F6C\\u4E49\\u6F5C\\u5728\\u7684\\u6709\\u5BB3\\u5B57\\u7B26\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B9E\\u65BD\\u767D\\u540D\\u5355\\uFF08\\u4EC5\\u5141\\u8BB8\\u5DF2\\u77E5\\u7684\\u826F\\u597D\\u8F93\\u5165\\uFF09\\u800C\\u4E0D\\u662F\\u9ED1\\u540D\\u5355\\uFF08\\u963B\\u6B62\\u5DF2\\u77E5\\u7684\\u9519\\u8BEF\\u8F93\\u5165\\uFF09\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B9A\\u671F\\u66F4\\u65B0\\u548C\\u5BA1\\u67E5\\u60A8\\u7684\\u9A8C\\u8BC1\\u89C4\\u5219\\u4EE5\\u5E94\\u5BF9\\u65B0\\u7684\\u5B89\\u5168\\u5A01\\u80C1\"}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html\",children:\"OWASP \\u8F93\\u5165\\u9A8C\\u8BC1\\u5907\\u5FD8\\u5355\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation\",children:\"MDN Web \\u6587\\u6863\\uFF1A\\u5BA2\\u6237\\u7AEF\\u8868\\u5355\\u9A8C\\u8BC1\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.npmjs.com/package/sanitize-html\",children:\"Sanitize-html \\u5E93\"})}),`\n`]})]})}function o(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(a,{...r})}):a(r)}return q(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/en-US.json
index 8543544fe..a5a069dbd 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var u=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),b=(i,e)=>{for(var a in e)t(i,a,{get:e[a],enumerable:!0})},l=(i,e,a,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!y.call(i,r)&&r!==a&&t(i,r,{get:()=>e[r],enumerable:!(o=g(e,r))||o.enumerable});return i};var v=(i,e,a)=>(a=i!=null?h(p(i)):{},l(e||!i||!i.__esModule?t(a,\"default\",{value:i,enumerable:!0}):a,i)),f=i=>l(t({},\"__esModule\",{value:!0}),i);var s=u((j,d)=>{d.exports=_jsx_runtime});var x={};b(x,{default:()=>L,frontmatter:()=>z});var n=v(s()),z={title:\"Explain the concept of lazy loading and how it can improve performance\"};function c(i){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",h4:\"h4\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Lazy loading is a design pattern that delays the loading of resources until they are actually needed. This can significantly improve performance by reducing initial load times and conserving bandwidth. For example, images on a webpage can be lazy-loaded so that they only load when they come into the viewport. This can be achieved using the \",(0,n.jsx)(e.code,{children:'loading=\"lazy\"'}),\" attribute in HTML or by using JavaScript libraries.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<img src=\"image.jpg\" loading=\"lazy\" alt=\"Lazy loaded image\" />\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"The concept of lazy loading and how it can improve performance\"}),`\n`,(0,n.jsx)(e.h3,{children:\"What is lazy loading?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Lazy loading is a design pattern used to defer the initialization of an object until the point at which it is needed. This can be applied to various types of resources such as images, videos, scripts, and even data fetched from APIs.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How does lazy loading work?\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Lazy loading works by delaying the loading of resources until they are actually needed. For example, images on a webpage can be lazy-loaded so that they only load when they come into the viewport. This can be achieved using the \",(0,n.jsx)(e.code,{children:'loading=\"lazy\"'}),\" attribute in HTML or by using JavaScript libraries.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits of lazy loading\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Improved performance\"}),\": By loading only the necessary resources initially, the page load time is reduced, leading to a faster and more responsive user experience.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reduced bandwidth usage\"}),\": Lazy loading helps in conserving bandwidth by loading resources only when they are needed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Better user experience\"}),\": Users can start interacting with the content faster as the initial load time is reduced.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Implementing lazy loading\"}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"loading\"}),\" attribute in HTML\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The simplest way to implement lazy loading for images is by using the \",(0,n.jsx)(e.code,{children:\"loading\"}),\" attribute in HTML.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<img src=\"image.jpg\" loading=\"lazy\" alt=\"Lazy loaded image\" />\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Using JavaScript\"}),`\n`,(0,n.jsx)(e.p,{children:\"For more complex scenarios, you can use JavaScript to implement lazy loading. Here is an example using the Intersection Observer API:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.addEventListener('DOMContentLoaded', function () {\n  const lazyImages = document.querySelectorAll('img.lazy');\n\n  const imageObserver = new IntersectionObserver((entries, observer) => {\n    entries.forEach((entry) => {\n      if (entry.isIntersecting) {\n        const img = entry.target;\n        img.src = img.dataset.src;\n        img.classList.remove('lazy');\n        observer.unobserve(img);\n      }\n    });\n  });\n\n  lazyImages.forEach((image) => {\n    imageObserver.observe(image);\n  });\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, images with the class \",(0,n.jsx)(e.code,{children:\"lazy\"}),\" will only load when they come into the viewport.\"]}),`\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/Web/Performance/Lazy_loading\",children:\"MDN Web Docs: Lazy loading\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video\",children:\"Google Developers: Lazy loading images and video\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\",children:\"Intersection Observer API\"})}),`\n`]})]})}function w(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(c,i)})):c(i)}var L=w;return f(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var g=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var b=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),v=(i,e)=>{for(var a in e)t(i,a,{get:e[a],enumerable:!0})},l=(i,e,a,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!u.call(i,r)&&r!==a&&t(i,r,{get:()=>e[r],enumerable:!(o=m(e,r))||o.enumerable});return i};var f=(i,e,a)=>(a=i!=null?g(y(i)):{},l(e||!i||!i.__esModule?t(a,\"default\",{value:i,enumerable:!0}):a,i)),z=i=>l(t({},\"__esModule\",{value:!0}),i);var s=b((I,d)=>{d.exports=_jsx_runtime});var L={};v(L,{default:()=>h,frontmatter:()=>w});var n=f(s()),w={title:\"Explain the concept of lazy loading and how it can improve performance\"};function c(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Lazy loading is a design pattern that delays the loading of resources until they are actually needed. This can significantly improve performance by reducing initial load times and conserving bandwidth. For example, images on a webpage can be lazy-loaded so that they only load when they come into the viewport. This can be achieved using the \",(0,n.jsx)(e.code,{children:'loading=\"lazy\"'}),\" attribute in HTML or by using JavaScript libraries.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<img src=\"image.jpg\" loading=\"lazy\" alt=\"Lazy loaded image\" />\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"The concept of lazy loading and how it can improve performance\"}),`\n`,(0,n.jsx)(e.h3,{children:\"What is lazy loading?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Lazy loading is a design pattern used to defer the initialization of an object until the point at which it is needed. This can be applied to various types of resources such as images, videos, scripts, and even data fetched from APIs.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How does lazy loading work?\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Lazy loading works by delaying the loading of resources until they are actually needed. For example, images on a webpage can be lazy-loaded so that they only load when they come into the viewport. This can be achieved using the \",(0,n.jsx)(e.code,{children:'loading=\"lazy\"'}),\" attribute in HTML or by using JavaScript libraries.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits of lazy loading\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Improved performance\"}),\": By loading only the necessary resources initially, the page load time is reduced, leading to a faster and more responsive user experience.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reduced bandwidth usage\"}),\": Lazy loading helps in conserving bandwidth by loading resources only when they are needed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Better user experience\"}),\": Users can start interacting with the content faster as the initial load time is reduced.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Implementing lazy loading\"}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"loading\"}),\" attribute in HTML\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The simplest way to implement lazy loading for images is by using the \",(0,n.jsx)(e.code,{children:\"loading\"}),\" attribute in HTML.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<img src=\"image.jpg\" loading=\"lazy\" alt=\"Lazy loaded image\" />\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Using JavaScript\"}),`\n`,(0,n.jsx)(e.p,{children:\"For more complex scenarios, you can use JavaScript to implement lazy loading. Here is an example using the Intersection Observer API:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.addEventListener('DOMContentLoaded', function () {\n  const lazyImages = document.querySelectorAll('img.lazy');\n\n  const imageObserver = new IntersectionObserver((entries, observer) => {\n    entries.forEach((entry) => {\n      if (entry.isIntersecting) {\n        const img = entry.target;\n        img.src = img.dataset.src;\n        img.classList.remove('lazy');\n        observer.unobserve(img);\n      }\n    });\n  });\n\n  lazyImages.forEach((image) => {\n    imageObserver.observe(image);\n  });\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, images with the class \",(0,n.jsx)(e.code,{children:\"lazy\"}),\" will only load when they come into the viewport.\"]}),`\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/Web/Performance/Lazy_loading\",children:\"MDN Web Docs: Lazy loading\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video\",children:\"Google Developers: Lazy loading images and video\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\",children:\"Intersection Observer API\"})}),`\n`]})]})}function h(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(c,{...i})}):c(i)}return z(L);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/zh-CN.json
index 911b995c4..2dd4205e3 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var u=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),y=(r,e)=>{for(var i in e)c(r,i,{get:e[i],enumerable:!0})},d=(r,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of m(e))!v.call(r,l)&&l!==i&&c(r,l,{get:()=>e[l],enumerable:!(a=g(e,l))||a.enumerable});return r};var z=(r,e,i)=>(i=r!=null?h(p(r)):{},d(e||!r||!r.__esModule?c(i,\"default\",{value:r,enumerable:!0}):i,r)),b=r=>d(c({},\"__esModule\",{value:!0}),r);var t=u((x,o)=>{o.exports=_jsx_runtime});var j={};y(j,{default:()=>I,frontmatter:()=>f});var n=z(t()),f={title:\"\\u89E3\\u91CA\\u60F0\\u6027\\u52A0\\u8F7D\\u7684\\u6982\\u5FF5\\u4EE5\\u53CA\\u5B83\\u5982\\u4F55\\u63D0\\u9AD8\\u6027\\u80FD\"};function s(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",h4:\"h4\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60F0\\u6027\\u52A0\\u8F7D\\u662F\\u4E00\\u79CD\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5B83\\u5C06\\u8D44\\u6E90\\u7684\\u52A0\\u8F7D\\u5EF6\\u8FDF\\u5230\\u5B9E\\u9645\\u9700\\u8981\\u65F6\\u3002\\u8FD9\\u53EF\\u4EE5\\u901A\\u8FC7\\u51CF\\u5C11\\u521D\\u59CB\\u52A0\\u8F7D\\u65F6\\u95F4\\u548C\\u8282\\u7701\\u5E26\\u5BBD\\u6765\\u663E\\u7740\\u63D0\\u9AD8\\u6027\\u80FD\\u3002\\u4F8B\\u5982\\uFF0C\\u7F51\\u9875\\u4E0A\\u7684\\u56FE\\u50CF\\u53EF\\u4EE5\\u8FDB\\u884C\\u60F0\\u6027\\u52A0\\u8F7D\\uFF0C\\u4EE5\\u4FBF\\u5B83\\u4EEC\\u4EC5\\u5728\\u8FDB\\u5165\\u89C6\\u53E3\\u65F6\\u52A0\\u8F7D\\u3002\\u8FD9\\u53EF\\u4EE5\\u4F7F\\u7528 HTML \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:'loading=\"lazy\"'}),\" \\u5C5E\\u6027\\u6216\\u4F7F\\u7528 JavaScript \\u5E93\\u6765\\u5B9E\\u73B0\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<img src=\"image.jpg\" loading=\"lazy\" alt=\"Lazy loaded image\" />\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u60F0\\u6027\\u52A0\\u8F7D\\u7684\\u6982\\u5FF5\\u4EE5\\u53CA\\u5B83\\u5982\\u4F55\\u63D0\\u9AD8\\u6027\\u80FD\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EC0\\u4E48\\u662F\\u60F0\\u6027\\u52A0\\u8F7D\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60F0\\u6027\\u52A0\\u8F7D\\u662F\\u4E00\\u79CD\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u7528\\u4E8E\\u63A8\\u8FDF\\u5BF9\\u8C61\\u7684\\u521D\\u59CB\\u5316\\uFF0C\\u76F4\\u5230\\u9700\\u8981\\u65F6\\u624D\\u8FDB\\u884C\\u3002\\u8FD9\\u53EF\\u4EE5\\u5E94\\u7528\\u4E8E\\u5404\\u79CD\\u7C7B\\u578B\\u7684\\u8D44\\u6E90\\uFF0C\\u4F8B\\u5982\\u56FE\\u50CF\\u3001\\u89C6\\u9891\\u3001\\u811A\\u672C\\uFF0C\\u751A\\u81F3\\u4ECE API \\u83B7\\u53D6\\u7684\\u6570\\u636E\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u60F0\\u6027\\u52A0\\u8F7D\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60F0\\u6027\\u52A0\\u8F7D\\u901A\\u8FC7\\u5EF6\\u8FDF\\u52A0\\u8F7D\\u8D44\\u6E90\\u76F4\\u5230\\u5B9E\\u9645\\u9700\\u8981\\u65F6\\u624D\\u8FDB\\u884C\\u3002\\u4F8B\\u5982\\uFF0C\\u7F51\\u9875\\u4E0A\\u7684\\u56FE\\u50CF\\u53EF\\u4EE5\\u8FDB\\u884C\\u60F0\\u6027\\u52A0\\u8F7D\\uFF0C\\u4EE5\\u4FBF\\u5B83\\u4EEC\\u4EC5\\u5728\\u8FDB\\u5165\\u89C6\\u53E3\\u65F6\\u52A0\\u8F7D\\u3002\\u8FD9\\u53EF\\u4EE5\\u4F7F\\u7528 HTML \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:'loading=\"lazy\"'}),\" \\u5C5E\\u6027\\u6216\\u4F7F\\u7528 JavaScript \\u5E93\\u6765\\u5B9E\\u73B0\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u60F0\\u6027\\u52A0\\u8F7D\\u7684\\u597D\\u5904\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u63D0\\u9AD8\\u6027\\u80FD\"}),\"\\uFF1A\\u901A\\u8FC7\\u4EC5\\u5728\\u521D\\u59CB\\u52A0\\u8F7D\\u65F6\\u52A0\\u8F7D\\u5FC5\\u8981\\u7684\\u8D44\\u6E90\\uFF0C\\u53EF\\u4EE5\\u7F29\\u77ED\\u9875\\u9762\\u52A0\\u8F7D\\u65F6\\u95F4\\uFF0C\\u4ECE\\u800C\\u5E26\\u6765\\u66F4\\u5FEB\\u3001\\u54CD\\u5E94\\u66F4\\u5FEB\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u51CF\\u5C11\\u5E26\\u5BBD\\u4F7F\\u7528\"}),\"\\uFF1A\\u60F0\\u6027\\u52A0\\u8F7D\\u6709\\u52A9\\u4E8E\\u901A\\u8FC7\\u4EC5\\u5728\\u9700\\u8981\\u65F6\\u52A0\\u8F7D\\u8D44\\u6E90\\u6765\\u8282\\u7701\\u5E26\\u5BBD\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u66F4\\u597D\\u7684\\u7528\\u6237\\u4F53\\u9A8C\"}),\"\\uFF1A\\u7528\\u6237\\u53EF\\u4EE5\\u66F4\\u5FEB\\u5730\\u5F00\\u59CB\\u4E0E\\u5185\\u5BB9\\u4EA4\\u4E92\\uFF0C\\u56E0\\u4E3A\\u521D\\u59CB\\u52A0\\u8F7D\\u65F6\\u95F4\\u7F29\\u77ED\\u4E86\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B9E\\u73B0\\u60F0\\u6027\\u52A0\\u8F7D\"}),`\n`,(0,n.jsxs)(e.h4,{children:[\"\\u4F7F\\u7528 HTML \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"loading\"}),\" \\u5C5E\\u6027\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5B9E\\u73B0\\u56FE\\u50CF\\u60F0\\u6027\\u52A0\\u8F7D\\u7684\\u6700\\u7B80\\u5355\\u65B9\\u6CD5\\u662F\\u4F7F\\u7528 HTML \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"loading\"}),\" \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<img src=\"image.jpg\" loading=\"lazy\" alt=\"Lazy loaded image\" />\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4F7F\\u7528 JavaScript\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5BF9\\u4E8E\\u66F4\\u590D\\u6742\\u7684\\u573A\\u666F\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 JavaScript \\u6765\\u5B9E\\u73B0\\u60F0\\u6027\\u52A0\\u8F7D\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u4F7F\\u7528 Intersection Observer API \\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.addEventListener('DOMContentLoaded', function () {\n  const lazyImages = document.querySelectorAll('img.lazy');\n\n  const imageObserver = new IntersectionObserver((entries, observer) => {\n    entries.forEach((entry) => {\n      if (entry.isIntersecting) {\n        const img = entry.target;\n        img.src = img.dataset.src;\n        img.classList.remove('lazy');\n        observer.unobserve(img);\n      }\n    });\n  });\n\n  lazyImages.forEach((image) => {\n    imageObserver.observe(image);\n  });\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u5E26\\u6709 \",(0,n.jsx)(e.code,{children:\"lazy\"}),\" \\u7C7B\\u7684\\u56FE\\u50CF\\u4EC5\\u5728\\u8FDB\\u5165\\u89C6\\u53E3\\u65F6\\u52A0\\u8F7D\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/Performance/Lazy_loading\",children:\"MDN Web Docs: Lazy loading\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video\",children:\"Google Developers: Lazy loading images and video\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\",children:\"Intersection Observer API\"})}),`\n`]})]})}function L(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(s,r)})):s(r)}var I=L;return b(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var g=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var y=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),z=(r,e)=>{for(var i in e)c(r,i,{get:e[i],enumerable:!0})},d=(r,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of p(e))!u.call(r,l)&&l!==i&&c(r,l,{get:()=>e[l],enumerable:!(a=m(e,l))||a.enumerable});return r};var f=(r,e,i)=>(i=r!=null?g(v(r)):{},d(e||!r||!r.__esModule?c(i,\"default\",{value:r,enumerable:!0}):i,r)),b=r=>d(c({},\"__esModule\",{value:!0}),r);var t=y((x,o)=>{o.exports=_jsx_runtime});var I={};z(I,{default:()=>s,frontmatter:()=>L});var n=f(t()),L={title:\"\\u89E3\\u91CA\\u60F0\\u6027\\u52A0\\u8F7D\\u7684\\u6982\\u5FF5\\u4EE5\\u53CA\\u5B83\\u5982\\u4F55\\u63D0\\u9AD8\\u6027\\u80FD\"};function h(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60F0\\u6027\\u52A0\\u8F7D\\u662F\\u4E00\\u79CD\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5B83\\u5C06\\u8D44\\u6E90\\u7684\\u52A0\\u8F7D\\u5EF6\\u8FDF\\u5230\\u5B9E\\u9645\\u9700\\u8981\\u65F6\\u3002\\u8FD9\\u53EF\\u4EE5\\u901A\\u8FC7\\u51CF\\u5C11\\u521D\\u59CB\\u52A0\\u8F7D\\u65F6\\u95F4\\u548C\\u8282\\u7701\\u5E26\\u5BBD\\u6765\\u663E\\u7740\\u63D0\\u9AD8\\u6027\\u80FD\\u3002\\u4F8B\\u5982\\uFF0C\\u7F51\\u9875\\u4E0A\\u7684\\u56FE\\u50CF\\u53EF\\u4EE5\\u8FDB\\u884C\\u60F0\\u6027\\u52A0\\u8F7D\\uFF0C\\u4EE5\\u4FBF\\u5B83\\u4EEC\\u4EC5\\u5728\\u8FDB\\u5165\\u89C6\\u53E3\\u65F6\\u52A0\\u8F7D\\u3002\\u8FD9\\u53EF\\u4EE5\\u4F7F\\u7528 HTML \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:'loading=\"lazy\"'}),\" \\u5C5E\\u6027\\u6216\\u4F7F\\u7528 JavaScript \\u5E93\\u6765\\u5B9E\\u73B0\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<img src=\"image.jpg\" loading=\"lazy\" alt=\"Lazy loaded image\" />\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u60F0\\u6027\\u52A0\\u8F7D\\u7684\\u6982\\u5FF5\\u4EE5\\u53CA\\u5B83\\u5982\\u4F55\\u63D0\\u9AD8\\u6027\\u80FD\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EC0\\u4E48\\u662F\\u60F0\\u6027\\u52A0\\u8F7D\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60F0\\u6027\\u52A0\\u8F7D\\u662F\\u4E00\\u79CD\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u7528\\u4E8E\\u63A8\\u8FDF\\u5BF9\\u8C61\\u7684\\u521D\\u59CB\\u5316\\uFF0C\\u76F4\\u5230\\u9700\\u8981\\u65F6\\u624D\\u8FDB\\u884C\\u3002\\u8FD9\\u53EF\\u4EE5\\u5E94\\u7528\\u4E8E\\u5404\\u79CD\\u7C7B\\u578B\\u7684\\u8D44\\u6E90\\uFF0C\\u4F8B\\u5982\\u56FE\\u50CF\\u3001\\u89C6\\u9891\\u3001\\u811A\\u672C\\uFF0C\\u751A\\u81F3\\u4ECE API \\u83B7\\u53D6\\u7684\\u6570\\u636E\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u60F0\\u6027\\u52A0\\u8F7D\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60F0\\u6027\\u52A0\\u8F7D\\u901A\\u8FC7\\u5EF6\\u8FDF\\u52A0\\u8F7D\\u8D44\\u6E90\\u76F4\\u5230\\u5B9E\\u9645\\u9700\\u8981\\u65F6\\u624D\\u8FDB\\u884C\\u3002\\u4F8B\\u5982\\uFF0C\\u7F51\\u9875\\u4E0A\\u7684\\u56FE\\u50CF\\u53EF\\u4EE5\\u8FDB\\u884C\\u60F0\\u6027\\u52A0\\u8F7D\\uFF0C\\u4EE5\\u4FBF\\u5B83\\u4EEC\\u4EC5\\u5728\\u8FDB\\u5165\\u89C6\\u53E3\\u65F6\\u52A0\\u8F7D\\u3002\\u8FD9\\u53EF\\u4EE5\\u4F7F\\u7528 HTML \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:'loading=\"lazy\"'}),\" \\u5C5E\\u6027\\u6216\\u4F7F\\u7528 JavaScript \\u5E93\\u6765\\u5B9E\\u73B0\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u60F0\\u6027\\u52A0\\u8F7D\\u7684\\u597D\\u5904\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u63D0\\u9AD8\\u6027\\u80FD\"}),\"\\uFF1A\\u901A\\u8FC7\\u4EC5\\u5728\\u521D\\u59CB\\u52A0\\u8F7D\\u65F6\\u52A0\\u8F7D\\u5FC5\\u8981\\u7684\\u8D44\\u6E90\\uFF0C\\u53EF\\u4EE5\\u7F29\\u77ED\\u9875\\u9762\\u52A0\\u8F7D\\u65F6\\u95F4\\uFF0C\\u4ECE\\u800C\\u5E26\\u6765\\u66F4\\u5FEB\\u3001\\u54CD\\u5E94\\u66F4\\u5FEB\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u51CF\\u5C11\\u5E26\\u5BBD\\u4F7F\\u7528\"}),\"\\uFF1A\\u60F0\\u6027\\u52A0\\u8F7D\\u6709\\u52A9\\u4E8E\\u901A\\u8FC7\\u4EC5\\u5728\\u9700\\u8981\\u65F6\\u52A0\\u8F7D\\u8D44\\u6E90\\u6765\\u8282\\u7701\\u5E26\\u5BBD\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u66F4\\u597D\\u7684\\u7528\\u6237\\u4F53\\u9A8C\"}),\"\\uFF1A\\u7528\\u6237\\u53EF\\u4EE5\\u66F4\\u5FEB\\u5730\\u5F00\\u59CB\\u4E0E\\u5185\\u5BB9\\u4EA4\\u4E92\\uFF0C\\u56E0\\u4E3A\\u521D\\u59CB\\u52A0\\u8F7D\\u65F6\\u95F4\\u7F29\\u77ED\\u4E86\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B9E\\u73B0\\u60F0\\u6027\\u52A0\\u8F7D\"}),`\n`,(0,n.jsxs)(e.h4,{children:[\"\\u4F7F\\u7528 HTML \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"loading\"}),\" \\u5C5E\\u6027\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5B9E\\u73B0\\u56FE\\u50CF\\u60F0\\u6027\\u52A0\\u8F7D\\u7684\\u6700\\u7B80\\u5355\\u65B9\\u6CD5\\u662F\\u4F7F\\u7528 HTML \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"loading\"}),\" \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<img src=\"image.jpg\" loading=\"lazy\" alt=\"Lazy loaded image\" />\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4F7F\\u7528 JavaScript\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5BF9\\u4E8E\\u66F4\\u590D\\u6742\\u7684\\u573A\\u666F\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 JavaScript \\u6765\\u5B9E\\u73B0\\u60F0\\u6027\\u52A0\\u8F7D\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u4F7F\\u7528 Intersection Observer API \\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.addEventListener('DOMContentLoaded', function () {\n  const lazyImages = document.querySelectorAll('img.lazy');\n\n  const imageObserver = new IntersectionObserver((entries, observer) => {\n    entries.forEach((entry) => {\n      if (entry.isIntersecting) {\n        const img = entry.target;\n        img.src = img.dataset.src;\n        img.classList.remove('lazy');\n        observer.unobserve(img);\n      }\n    });\n  });\n\n  lazyImages.forEach((image) => {\n    imageObserver.observe(image);\n  });\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u5E26\\u6709 \",(0,n.jsx)(e.code,{children:\"lazy\"}),\" \\u7C7B\\u7684\\u56FE\\u50CF\\u4EC5\\u5728\\u8FDB\\u5165\\u89C6\\u53E3\\u65F6\\u52A0\\u8F7D\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/Performance/Lazy_loading\",children:\"MDN Web Docs: Lazy loading\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video\",children:\"Google Developers: Lazy loading images and video\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\",children:\"Intersection Observer API\"})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return b(I);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-lexical-scoping/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-lexical-scoping/en-US.json
index e9605de4b..b63e8b7f8 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-lexical-scoping/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-lexical-scoping/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-lexical-scoping/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),x=(i,e)=>{for(var c in e)t(i,c,{get:e[c],enumerable:!0})},l=(i,e,c,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!f.call(i,o)&&o!==c&&t(i,o,{get:()=>e[o],enumerable:!(r=h(e,o))||r.enumerable});return i};var b=(i,e,c)=>(c=i!=null?u(m(i)):{},l(e||!i||!i.__esModule?t(c,\"default\",{value:i,enumerable:!0}):c,i)),F=i=>l(t({},\"__esModule\",{value:!0}),i);var s=g((V,a)=>{a.exports=_jsx_runtime});var w={};x(w,{default:()=>j,frontmatter:()=>v});var n=b(s()),v={title:\"Explain the concept of lexical scoping\"};function d(i){let e=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Lexical scoping means that the scope of a variable is determined by its location within the source code, and nested functions have access to variables declared in their outer scope. For example:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function outerFunction() {\n  let outerVariable = 'I am outside!';\n\n  function innerFunction() {\n    console.log(outerVariable); // 'I am outside!'\n  }\n\n  innerFunction();\n}\n\nouterFunction();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"innerFunction\"}),\" can access \",(0,n.jsx)(e.code,{children:\"outerVariable\"}),\" because of lexical scoping.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Lexical scoping\"}),`\n`,(0,n.jsx)(e.p,{children:\"Lexical scoping is a fundamental concept in JavaScript and many other programming languages. It determines how variable names are resolved in nested functions. The scope of a variable is defined by its position in the source code, and nested functions have access to variables declared in their outer scope.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How lexical scoping works\"}),`\n`,(0,n.jsx)(e.p,{children:\"When a function is defined, it captures the scope in which it was created. This means that the function has access to variables in its own scope as well as variables in any containing (outer) scopes.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Consider the following example:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function outerFunction() {\n  let outerVariable = 'I am outside!';\n\n  function innerFunction() {\n    console.log(outerVariable); // 'I am outside!'\n  }\n\n  innerFunction();\n}\n\nouterFunction();\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"In this example:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"outerFunction\"}),\" declares a variable \",(0,n.jsx)(e.code,{children:\"outerVariable\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"innerFunction\"}),\" is nested inside \",(0,n.jsx)(e.code,{children:\"outerFunction\"}),\" and logs \",(0,n.jsx)(e.code,{children:\"outerVariable\"}),\" to the console.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"When \",(0,n.jsx)(e.code,{children:\"innerFunction\"}),\" is called, it has access to \",(0,n.jsx)(e.code,{children:\"outerVariable\"}),\" because of lexical scoping.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Nested functions and closures\"}),`\n`,(0,n.jsx)(e.p,{children:\"Lexical scoping is closely related to closures. A closure is created when a function retains access to its lexical scope, even when the function is executed outside that scope.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function outerFunction() {\n  let outerVariable = 'I am outside!';\n\n  function innerFunction() {\n    console.log(outerVariable);\n  }\n\n  return innerFunction;\n}\n\nconst myInnerFunction = outerFunction();\nmyInnerFunction(); // 'I am outside!'\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"In this example:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"outerFunction\"}),\" returns \",(0,n.jsx)(e.code,{children:\"innerFunction\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"myInnerFunction\"}),\" is assigned the returned \",(0,n.jsx)(e.code,{children:\"innerFunction\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"When \",(0,n.jsx)(e.code,{children:\"myInnerFunction\"}),\" is called, it still has access to \",(0,n.jsx)(e.code,{children:\"outerVariable\"}),\" because of the closure created by lexical scoping.\"]}),`\n`]}),`\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/Web/JavaScript/Closures\",children:\"MDN Web Docs: Closures\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/closure#lexical-environment\",children:\"JavaScript.info: Lexical environment\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://eloquentjavascript.net/03_functions.html#h_jxlm8r9e2g\",children:\"Eloquent JavaScript: Functions and closures\"})}),`\n`]})]})}function I(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(d,i)})):d(i)}var j=I;return F(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),F=(i,e)=>{for(var c in e)t(i,c,{get:e[c],enumerable:!0})},l=(i,e,c,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!g.call(i,o)&&o!==c&&t(i,o,{get:()=>e[o],enumerable:!(r=p(e,o))||r.enumerable});return i};var b=(i,e,c)=>(c=i!=null?h(f(i)):{},l(e||!i||!i.__esModule?t(c,\"default\",{value:i,enumerable:!0}):c,i)),v=i=>l(t({},\"__esModule\",{value:!0}),i);var s=x((y,a)=>{a.exports=_jsx_runtime});var w={};F(w,{default:()=>u,frontmatter:()=>I});var n=b(s()),I={title:\"Explain the concept of lexical scoping\"};function d(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Lexical scoping means that the scope of a variable is determined by its location within the source code, and nested functions have access to variables declared in their outer scope. For example:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function outerFunction() {\n  let outerVariable = 'I am outside!';\n\n  function innerFunction() {\n    console.log(outerVariable); // 'I am outside!'\n  }\n\n  innerFunction();\n}\n\nouterFunction();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"innerFunction\"}),\" can access \",(0,n.jsx)(e.code,{children:\"outerVariable\"}),\" because of lexical scoping.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Lexical scoping\"}),`\n`,(0,n.jsx)(e.p,{children:\"Lexical scoping is a fundamental concept in JavaScript and many other programming languages. It determines how variable names are resolved in nested functions. The scope of a variable is defined by its position in the source code, and nested functions have access to variables declared in their outer scope.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How lexical scoping works\"}),`\n`,(0,n.jsx)(e.p,{children:\"When a function is defined, it captures the scope in which it was created. This means that the function has access to variables in its own scope as well as variables in any containing (outer) scopes.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Consider the following example:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function outerFunction() {\n  let outerVariable = 'I am outside!';\n\n  function innerFunction() {\n    console.log(outerVariable); // 'I am outside!'\n  }\n\n  innerFunction();\n}\n\nouterFunction();\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"In this example:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"outerFunction\"}),\" declares a variable \",(0,n.jsx)(e.code,{children:\"outerVariable\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"innerFunction\"}),\" is nested inside \",(0,n.jsx)(e.code,{children:\"outerFunction\"}),\" and logs \",(0,n.jsx)(e.code,{children:\"outerVariable\"}),\" to the console.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"When \",(0,n.jsx)(e.code,{children:\"innerFunction\"}),\" is called, it has access to \",(0,n.jsx)(e.code,{children:\"outerVariable\"}),\" because of lexical scoping.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Nested functions and closures\"}),`\n`,(0,n.jsx)(e.p,{children:\"Lexical scoping is closely related to closures. A closure is created when a function retains access to its lexical scope, even when the function is executed outside that scope.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function outerFunction() {\n  let outerVariable = 'I am outside!';\n\n  function innerFunction() {\n    console.log(outerVariable);\n  }\n\n  return innerFunction;\n}\n\nconst myInnerFunction = outerFunction();\nmyInnerFunction(); // 'I am outside!'\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"In this example:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"outerFunction\"}),\" returns \",(0,n.jsx)(e.code,{children:\"innerFunction\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"myInnerFunction\"}),\" is assigned the returned \",(0,n.jsx)(e.code,{children:\"innerFunction\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"When \",(0,n.jsx)(e.code,{children:\"myInnerFunction\"}),\" is called, it still has access to \",(0,n.jsx)(e.code,{children:\"outerVariable\"}),\" because of the closure created by lexical scoping.\"]}),`\n`]}),`\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/Web/JavaScript/Closures\",children:\"MDN Web Docs: Closures\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/closure#lexical-environment\",children:\"JavaScript.info: Lexical environment\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://eloquentjavascript.net/03_functions.html#h_jxlm8r9e2g\",children:\"Eloquent JavaScript: Functions and closures\"})}),`\n`]})]})}function u(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(d,{...i})}):d(i)}return v(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-lexical-scoping/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-lexical-scoping/zh-CN.json
index b17fd7fd1..11161dc0c 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-lexical-scoping/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-lexical-scoping/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-lexical-scoping/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var f=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),b=(i,n)=>{for(var r in n)o(i,r,{get:n[r],enumerable:!0})},l=(i,n,r,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of p(n))!F.call(i,c)&&c!==r&&o(i,c,{get:()=>n[c],enumerable:!(t=s(n,c))||t.enumerable});return i};var g=(i,n,r)=>(r=i!=null?h(m(i)):{},l(n||!i||!i.__esModule?o(r,\"default\",{value:i,enumerable:!0}):r,i)),j=i=>l(o({},\"__esModule\",{value:!0}),i);var u=f((y,d)=>{d.exports=_jsx_runtime});var I={};b(I,{default:()=>V,frontmatter:()=>v});var e=g(u()),v={title:\"\\u89E3\\u91CA\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u7684\\u6982\\u5FF5\"};function a(i){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},i.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u610F\\u5473\\u7740\\u53D8\\u91CF\\u7684\\u4F5C\\u7528\\u57DF\\u7531\\u5176\\u5728\\u6E90\\u4EE3\\u7801\\u4E2D\\u7684\\u4F4D\\u7F6E\\u51B3\\u5B9A\\uFF0C\\u5D4C\\u5957\\u51FD\\u6570\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5728\\u5176\\u5916\\u90E8\\u4F5C\\u7528\\u57DF\\u4E2D\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u3002\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function outerFunction() {\n  let outerVariable = 'I am outside!';\n\n  function innerFunction() {\n    console.log(outerVariable); // 'I am outside!'\n  }\n\n  innerFunction();\n}\n\nouterFunction();\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"innerFunction\"}),\" \\u53EF\\u4EE5\\u8BBF\\u95EE \",(0,e.jsx)(n.code,{children:\"outerVariable\"}),\"\\uFF0C\\u56E0\\u4E3A\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u662F JavaScript \\u548C\\u8BB8\\u591A\\u5176\\u4ED6\\u7F16\\u7A0B\\u8BED\\u8A00\\u4E2D\\u7684\\u4E00\\u4E2A\\u57FA\\u672C\\u6982\\u5FF5\\u3002\\u5B83\\u51B3\\u5B9A\\u4E86\\u5728\\u5D4C\\u5957\\u51FD\\u6570\\u4E2D\\u5982\\u4F55\\u89E3\\u6790\\u53D8\\u91CF\\u540D\\u3002\\u53D8\\u91CF\\u7684\\u4F5C\\u7528\\u57DF\\u7531\\u5176\\u5728\\u6E90\\u4EE3\\u7801\\u4E2D\\u7684\\u4F4D\\u7F6E\\u5B9A\\u4E49\\uFF0C\\u5D4C\\u5957\\u51FD\\u6570\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5728\\u5176\\u5916\\u90E8\\u4F5C\\u7528\\u57DF\\u4E2D\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u88AB\\u5B9A\\u4E49\\u65F6\\uFF0C\\u5B83\\u4F1A\\u6355\\u83B7\\u521B\\u5EFA\\u5B83\\u7684\\u4F5C\\u7528\\u57DF\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u8BE5\\u51FD\\u6570\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5176\\u81EA\\u8EAB\\u4F5C\\u7528\\u57DF\\u4E2D\\u7684\\u53D8\\u91CF\\u4EE5\\u53CA\\u4EFB\\u4F55\\u5305\\u542B\\uFF08\\u5916\\u90E8\\uFF09\\u4F5C\\u7528\\u57DF\\u4E2D\\u7684\\u53D8\\u91CF\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F8B\\u5B50\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8003\\u8651\\u4EE5\\u4E0B\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function outerFunction() {\n  let outerVariable = 'I am outside!';\n\n  function innerFunction() {\n    console.log(outerVariable); // 'I am outside!'\n  }\n\n  innerFunction();\n}\n\nouterFunction();\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"outerFunction\"}),\" \\u58F0\\u660E\\u4E00\\u4E2A\\u53D8\\u91CF \",(0,e.jsx)(n.code,{children:\"outerVariable\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"innerFunction\"}),\" \\u5D4C\\u5957\\u5728 \",(0,e.jsx)(n.code,{children:\"outerFunction\"}),\" \\u5185\\u90E8\\uFF0C\\u5E76\\u5C06 \",(0,e.jsx)(n.code,{children:\"outerVariable\"}),\" \\u8BB0\\u5F55\\u5230\\u63A7\\u5236\\u53F0\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5F53\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"innerFunction\"}),\" \\u65F6\\uFF0C\\u7531\\u4E8E\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\uFF0C\\u5B83\\u53EF\\u4EE5\\u8BBF\\u95EE \",(0,e.jsx)(n.code,{children:\"outerVariable\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5D4C\\u5957\\u51FD\\u6570\\u548C\\u95ED\\u5305\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u4E0E\\u95ED\\u5305\\u5BC6\\u5207\\u76F8\\u5173\\u3002\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u4FDD\\u7559\\u5BF9\\u5176\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u7684\\u8BBF\\u95EE\\u6743\\u9650\\u65F6\\uFF0C\\u5373\\u4F7F\\u8BE5\\u51FD\\u6570\\u5728\\u4F5C\\u7528\\u57DF\\u4E4B\\u5916\\u6267\\u884C\\uFF0C\\u4E5F\\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u95ED\\u5305\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function outerFunction() {\n  let outerVariable = 'I am outside!';\n\n  function innerFunction() {\n    console.log(outerVariable);\n  }\n\n  return innerFunction;\n}\n\nconst myInnerFunction = outerFunction();\nmyInnerFunction(); // 'I am outside!'\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"outerFunction\"}),\" \\u8FD4\\u56DE \",(0,e.jsx)(n.code,{children:\"innerFunction\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"myInnerFunction\"}),\" \\u88AB\\u8D4B\\u503C\\u4E3A\\u8FD4\\u56DE\\u7684 \",(0,e.jsx)(n.code,{children:\"innerFunction\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5F53\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"myInnerFunction\"}),\" \\u65F6\\uFF0C\\u5B83\\u4ECD\\u7136\\u53EF\\u4EE5\\u8BBF\\u95EE \",(0,e.jsx)(n.code,{children:\"outerVariable\"}),\"\\uFF0C\\u56E0\\u4E3A\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u521B\\u5EFA\\u4E86\\u95ED\\u5305\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures\",children:\"MDN Web Docs: Closures\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/closure#lexical-environment\",children:\"JavaScript.info: Lexical environment\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/03_functions.html#h_jxlm8r9e2g\",children:\"Eloquent JavaScript: Functions and closures\"})}),`\n`]})]})}function x(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,Object.assign({},i,{children:(0,e.jsx)(a,i)})):a(i)}var V=x;return j(I);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),g=(i,n)=>{for(var r in n)o(i,r,{get:n[r],enumerable:!0})},t=(i,n,r,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of m(n))!f.call(i,c)&&c!==r&&o(i,c,{get:()=>n[c],enumerable:!(l=p(n,c))||l.enumerable});return i};var v=(i,n,r)=>(r=i!=null?s(F(i)):{},t(n||!i||!i.__esModule?o(r,\"default\",{value:i,enumerable:!0}):r,i)),x=i=>t(o({},\"__esModule\",{value:!0}),i);var u=b((_,d)=>{d.exports=_jsx_runtime});var V={};g(V,{default:()=>a,frontmatter:()=>j});var e=v(u()),j={title:\"\\u89E3\\u91CA\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u7684\\u6982\\u5FF5\"};function h(i){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...i.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u610F\\u5473\\u7740\\u53D8\\u91CF\\u7684\\u4F5C\\u7528\\u57DF\\u7531\\u5176\\u5728\\u6E90\\u4EE3\\u7801\\u4E2D\\u7684\\u4F4D\\u7F6E\\u51B3\\u5B9A\\uFF0C\\u5D4C\\u5957\\u51FD\\u6570\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5728\\u5176\\u5916\\u90E8\\u4F5C\\u7528\\u57DF\\u4E2D\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u3002\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function outerFunction() {\n  let outerVariable = 'I am outside!';\n\n  function innerFunction() {\n    console.log(outerVariable); // 'I am outside!'\n  }\n\n  innerFunction();\n}\n\nouterFunction();\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"innerFunction\"}),\" \\u53EF\\u4EE5\\u8BBF\\u95EE \",(0,e.jsx)(n.code,{children:\"outerVariable\"}),\"\\uFF0C\\u56E0\\u4E3A\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u662F JavaScript \\u548C\\u8BB8\\u591A\\u5176\\u4ED6\\u7F16\\u7A0B\\u8BED\\u8A00\\u4E2D\\u7684\\u4E00\\u4E2A\\u57FA\\u672C\\u6982\\u5FF5\\u3002\\u5B83\\u51B3\\u5B9A\\u4E86\\u5728\\u5D4C\\u5957\\u51FD\\u6570\\u4E2D\\u5982\\u4F55\\u89E3\\u6790\\u53D8\\u91CF\\u540D\\u3002\\u53D8\\u91CF\\u7684\\u4F5C\\u7528\\u57DF\\u7531\\u5176\\u5728\\u6E90\\u4EE3\\u7801\\u4E2D\\u7684\\u4F4D\\u7F6E\\u5B9A\\u4E49\\uFF0C\\u5D4C\\u5957\\u51FD\\u6570\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5728\\u5176\\u5916\\u90E8\\u4F5C\\u7528\\u57DF\\u4E2D\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u88AB\\u5B9A\\u4E49\\u65F6\\uFF0C\\u5B83\\u4F1A\\u6355\\u83B7\\u521B\\u5EFA\\u5B83\\u7684\\u4F5C\\u7528\\u57DF\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u8BE5\\u51FD\\u6570\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5176\\u81EA\\u8EAB\\u4F5C\\u7528\\u57DF\\u4E2D\\u7684\\u53D8\\u91CF\\u4EE5\\u53CA\\u4EFB\\u4F55\\u5305\\u542B\\uFF08\\u5916\\u90E8\\uFF09\\u4F5C\\u7528\\u57DF\\u4E2D\\u7684\\u53D8\\u91CF\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F8B\\u5B50\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8003\\u8651\\u4EE5\\u4E0B\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function outerFunction() {\n  let outerVariable = 'I am outside!';\n\n  function innerFunction() {\n    console.log(outerVariable); // 'I am outside!'\n  }\n\n  innerFunction();\n}\n\nouterFunction();\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"outerFunction\"}),\" \\u58F0\\u660E\\u4E00\\u4E2A\\u53D8\\u91CF \",(0,e.jsx)(n.code,{children:\"outerVariable\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"innerFunction\"}),\" \\u5D4C\\u5957\\u5728 \",(0,e.jsx)(n.code,{children:\"outerFunction\"}),\" \\u5185\\u90E8\\uFF0C\\u5E76\\u5C06 \",(0,e.jsx)(n.code,{children:\"outerVariable\"}),\" \\u8BB0\\u5F55\\u5230\\u63A7\\u5236\\u53F0\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5F53\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"innerFunction\"}),\" \\u65F6\\uFF0C\\u7531\\u4E8E\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\uFF0C\\u5B83\\u53EF\\u4EE5\\u8BBF\\u95EE \",(0,e.jsx)(n.code,{children:\"outerVariable\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5D4C\\u5957\\u51FD\\u6570\\u548C\\u95ED\\u5305\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u4E0E\\u95ED\\u5305\\u5BC6\\u5207\\u76F8\\u5173\\u3002\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u4FDD\\u7559\\u5BF9\\u5176\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u7684\\u8BBF\\u95EE\\u6743\\u9650\\u65F6\\uFF0C\\u5373\\u4F7F\\u8BE5\\u51FD\\u6570\\u5728\\u4F5C\\u7528\\u57DF\\u4E4B\\u5916\\u6267\\u884C\\uFF0C\\u4E5F\\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u95ED\\u5305\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function outerFunction() {\n  let outerVariable = 'I am outside!';\n\n  function innerFunction() {\n    console.log(outerVariable);\n  }\n\n  return innerFunction;\n}\n\nconst myInnerFunction = outerFunction();\nmyInnerFunction(); // 'I am outside!'\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"outerFunction\"}),\" \\u8FD4\\u56DE \",(0,e.jsx)(n.code,{children:\"innerFunction\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"myInnerFunction\"}),\" \\u88AB\\u8D4B\\u503C\\u4E3A\\u8FD4\\u56DE\\u7684 \",(0,e.jsx)(n.code,{children:\"innerFunction\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5F53\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"myInnerFunction\"}),\" \\u65F6\\uFF0C\\u5B83\\u4ECD\\u7136\\u53EF\\u4EE5\\u8BBF\\u95EE \",(0,e.jsx)(n.code,{children:\"outerVariable\"}),\"\\uFF0C\\u56E0\\u4E3A\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u521B\\u5EFA\\u4E86\\u95ED\\u5305\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures\",children:\"MDN Web Docs: Closures\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/closure#lexical-environment\",children:\"JavaScript.info: Lexical environment\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/03_functions.html#h_jxlm8r9e2g\",children:\"Eloquent JavaScript: Functions and closures\"})}),`\n`]})]})}function a(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,{...i,children:(0,e.jsx)(h,{...i})}):h(i)}return x(V);})();\n;return Component;"
 }
\ No newline at end of file
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 8f7ef9cc9..d59e96c02 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-partial-application/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),b=(a,n)=>{for(var i in n)r(a,i,{get:n[i],enumerable:!0})},l=(a,n,i,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of p(n))!m.call(a,t)&&t!==i&&r(a,t,{get:()=>n[t],enumerable:!(o=u(n,t))||o.enumerable});return a};var y=(a,n,i)=>(i=a!=null?h(g(a)):{},l(n||!a||!a.__esModule?r(i,\"default\",{value:a,enumerable:!0}):i,a)),w=a=>l(r({},\"__esModule\",{value:!0}),a);var d=f((F,c)=>{c.exports=_jsx_runtime});var k={};b(k,{default:()=>j,frontmatter:()=>x});var e=y(d()),x={title:\"Explain the concept of partial application\"};function s(a){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},a.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Partial application is a technique in functional programming where a function is applied to some of its arguments, producing a new function that takes the remaining arguments. This allows you to create more specific functions from general ones. For example, if you have a function \",(0,e.jsx)(n.code,{children:\"add(a, b)\"}),\", you can partially apply it to create a new function \",(0,e.jsx)(n.code,{children:\"add5\"}),\" that always adds 5 to its argument.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n\nconst add5 = add.bind(null, 5);\nconsole.log(add5(10)); // Outputs 15\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Partial application\"}),`\n`,(0,e.jsx)(n.p,{children:\"Partial application is a functional programming technique where a function is applied to some of its arguments, producing a new function that takes the remaining arguments. This can be useful for creating more specific functions from general ones, improving code reusability and readability.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Example\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Consider a simple \",(0,e.jsx)(n.code,{children:\"add\"}),\" function that takes two arguments:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"Using partial application, you can create a new function \",(0,e.jsx)(n.code,{children:\"add5\"}),\" that always adds 5 to its argument:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const add5 = add.bind(null, 5);\nconsole.log(add5(10)); // Outputs 15\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"How it works\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"In the example above, \",(0,e.jsx)(n.code,{children:\"add.bind(null, 5)\"}),\" creates a new function where the first argument (\",(0,e.jsx)(n.code,{children:\"a\"}),\") is fixed to 5. The \",(0,e.jsx)(n.code,{children:\"null\"}),\" value is used as the \",(0,e.jsx)(n.code,{children:\"this\"}),\" context, which is not relevant in this case.\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Benefits\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Code reusability\"}),\": You can create more specific functions from general ones, making your code more modular and reusable.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Readability\"}),\": Partially applied functions can make your code easier to read and understand by reducing the number of arguments you need to pass around.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Real-world example\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Partial application is often used in libraries like Lodash. For example, Lodash's \",(0,e.jsx)(n.code,{children:\"_.partial\"}),\" function allows you to create partially applied functions easily:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const _ = require('lodash');\n\nfunction greet(greeting, name) {\n  return \\`\\${greeting}, \\${name}!\\`;\n}\n\nconst sayHelloTo = _.partial(greet, 'Hello');\nconsole.log(sayHelloTo('John')); // Outputs \"Hello, John!\"\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind\",children:\"MDN Web Docs: Function.prototype.bind()\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://lodash.com/docs/4.17.15#partial\",children:\"Lodash Documentation: _.partial\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Partial_application\",children:\"Wikipedia: Partial application\"})}),`\n`]})]})}function _(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(s,a)})):s(a)}var j=_;return w(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),y=(a,n)=>{for(var i in n)r(a,i,{get:n[i],enumerable:!0})},l=(a,n,i,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of m(n))!f.call(a,t)&&t!==i&&r(a,t,{get:()=>n[t],enumerable:!(o=p(n,t))||o.enumerable});return a};var w=(a,n,i)=>(i=a!=null?u(g(a)):{},l(n||!a||!a.__esModule?r(i,\"default\",{value:a,enumerable:!0}):i,a)),x=a=>l(r({},\"__esModule\",{value:!0}),a);var d=b((v,c)=>{c.exports=_jsx_runtime});var j={};y(j,{default:()=>h,frontmatter:()=>_});var e=w(d()),_={title:\"Explain the concept of partial application\"};function s(a){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...a.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Partial application is a technique in functional programming where a function is applied to some of its arguments, producing a new function that takes the remaining arguments. This allows you to create more specific functions from general ones. For example, if you have a function \",(0,e.jsx)(n.code,{children:\"add(a, b)\"}),\", you can partially apply it to create a new function \",(0,e.jsx)(n.code,{children:\"add5\"}),\" that always adds 5 to its argument.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n\nconst add5 = add.bind(null, 5);\nconsole.log(add5(10)); // Outputs 15\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Partial application\"}),`\n`,(0,e.jsx)(n.p,{children:\"Partial application is a functional programming technique where a function is applied to some of its arguments, producing a new function that takes the remaining arguments. This can be useful for creating more specific functions from general ones, improving code reusability and readability.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Example\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Consider a simple \",(0,e.jsx)(n.code,{children:\"add\"}),\" function that takes two arguments:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"Using partial application, you can create a new function \",(0,e.jsx)(n.code,{children:\"add5\"}),\" that always adds 5 to its argument:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const add5 = add.bind(null, 5);\nconsole.log(add5(10)); // Outputs 15\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"How it works\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"In the example above, \",(0,e.jsx)(n.code,{children:\"add.bind(null, 5)\"}),\" creates a new function where the first argument (\",(0,e.jsx)(n.code,{children:\"a\"}),\") is fixed to 5. The \",(0,e.jsx)(n.code,{children:\"null\"}),\" value is used as the \",(0,e.jsx)(n.code,{children:\"this\"}),\" context, which is not relevant in this case.\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Benefits\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Code reusability\"}),\": You can create more specific functions from general ones, making your code more modular and reusable.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Readability\"}),\": Partially applied functions can make your code easier to read and understand by reducing the number of arguments you need to pass around.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Real-world example\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Partial application is often used in libraries like Lodash. For example, Lodash's \",(0,e.jsx)(n.code,{children:\"_.partial\"}),\" function allows you to create partially applied functions easily:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const _ = require('lodash');\n\nfunction greet(greeting, name) {\n  return \\`\\${greeting}, \\${name}!\\`;\n}\n\nconst sayHelloTo = _.partial(greet, 'Hello');\nconsole.log(sayHelloTo('John')); // Outputs \"Hello, John!\"\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind\",children:\"MDN Web Docs: Function.prototype.bind()\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://lodash.com/docs/4.17.15#partial\",children:\"Lodash Documentation: _.partial\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Partial_application\",children:\"Wikipedia: Partial application\"})}),`\n`]})]})}function h(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,{...a,children:(0,e.jsx)(s,{...a})}):s(a)}return x(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-partial-application/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-partial-application/zh-CN.json
index a91f4a2ab..1fa3164fe 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-partial-application/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-partial-application/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-partial-application/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var b=(d,n)=>()=>(n||d((n={exports:{}}).exports,n),n.exports),f=(d,n)=>{for(var l in n)c(d,l,{get:n[l],enumerable:!0})},o=(d,n,l,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of p(n))!m.call(d,r)&&r!==l&&c(d,r,{get:()=>n[r],enumerable:!(i=u(n,r))||i.enumerable});return d};var j=(d,n,l)=>(l=d!=null?s(g(d)):{},o(n||!d||!d.__esModule?c(l,\"default\",{value:d,enumerable:!0}):l,d)),_=d=>o(c({},\"__esModule\",{value:!0}),d);var h=b((F,a)=>{a.exports=_jsx_runtime});var y={};f(y,{default:()=>O,frontmatter:()=>x});var e=j(h()),x={title:\"\\u89E3\\u91CA\\u90E8\\u5206\\u5E94\\u7528\\u7684\\u7406\\u5FF5\"};function t(d){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},d.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u90E8\\u5206\\u5E94\\u7528\\u662F\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\\u4E2D\\u7684\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u5B83\\u5C06\\u4E00\\u4E2A\\u51FD\\u6570\\u5E94\\u7528\\u4E8E\\u5176\\u90E8\\u5206\\u53C2\\u6570\\uFF0C\\u4ECE\\u800C\\u4EA7\\u751F\\u4E00\\u4E2A\\u63A5\\u53D7\\u5269\\u4F59\\u53C2\\u6570\\u7684\\u65B0\\u51FD\\u6570\\u3002\\u8FD9\\u5141\\u8BB8\\u4F60\\u4ECE\\u901A\\u7528\\u51FD\\u6570\\u4E2D\\u521B\\u5EFA\\u66F4\\u5177\\u4F53\\u7684\\u51FD\\u6570\\u3002\\u4F8B\\u5982\\uFF0C\\u5982\\u679C\\u4F60\\u6709\\u4E00\\u4E2A\\u51FD\\u6570 \",(0,e.jsx)(n.code,{children:\"add(a, b)\"}),\"\\uFF0C\\u4F60\\u53EF\\u4EE5\\u90E8\\u5206\\u5E94\\u7528\\u5B83\\u6765\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u51FD\\u6570 \",(0,e.jsx)(n.code,{children:\"add5\"}),\"\\uFF0C\\u5B83\\u603B\\u662F\\u5C06\\u5176\\u53C2\\u6570\\u52A0\\u4E0A 5\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n\nconst add5 = add.bind(null, 5);\nconsole.log(add5(10)); // Outputs 15\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u90E8\\u5206\\u5E94\\u7528\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u90E8\\u5206\\u5E94\\u7528\\u662F\\u4E00\\u79CD\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\\u6280\\u672F\\uFF0C\\u5B83\\u5C06\\u4E00\\u4E2A\\u51FD\\u6570\\u5E94\\u7528\\u4E8E\\u5176\\u90E8\\u5206\\u53C2\\u6570\\uFF0C\\u4ECE\\u800C\\u4EA7\\u751F\\u4E00\\u4E2A\\u63A5\\u53D7\\u5269\\u4F59\\u53C2\\u6570\\u7684\\u65B0\\u51FD\\u6570\\u3002\\u8FD9\\u5BF9\\u4E8E\\u4ECE\\u901A\\u7528\\u51FD\\u6570\\u521B\\u5EFA\\u66F4\\u5177\\u4F53\\u7684\\u51FD\\u6570\\u3001\\u63D0\\u9AD8\\u4EE3\\u7801\\u53EF\\u91CD\\u7528\\u6027\\u548C\\u53EF\\u8BFB\\u6027\\u5F88\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8003\\u8651\\u4E00\\u4E2A\\u63A5\\u53D7\\u4E24\\u4E2A\\u53C2\\u6570\\u7684\\u7B80\\u5355 \",(0,e.jsx)(n.code,{children:\"add\"}),\" \\u51FD\\u6570\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528\\u90E8\\u5206\\u5E94\\u7528\\uFF0C\\u4F60\\u53EF\\u4EE5\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u51FD\\u6570 \",(0,e.jsx)(n.code,{children:\"add5\"}),\"\\uFF0C\\u5B83\\u603B\\u662F\\u5C06\\u5176\\u53C2\\u6570\\u52A0\\u4E0A 5\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const add5 = add.bind(null, 5);\nconsole.log(add5(10)); // Outputs 15\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u4E0A\\u9762\\u7684\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"add.bind(null, 5)\"}),\" \\u521B\\u5EFA\\u4E86\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\uFF0C\\u5176\\u4E2D\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570 (\",(0,e.jsx)(n.code,{children:\"a\"}),\") \\u88AB\\u56FA\\u5B9A\\u4E3A 5\\u3002\",(0,e.jsx)(n.code,{children:\"null\"}),\" \\u503C\\u7528\\u4F5C \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\uFF0C\\u5728\\u8FD9\\u79CD\\u60C5\\u51B5\\u4E0B\\u4E0E\\u6B64\\u65E0\\u5173\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4EE3\\u7801\\u53EF\\u91CD\\u7528\\u6027\"}),\"\\uFF1A\\u4F60\\u53EF\\u4EE5\\u4ECE\\u901A\\u7528\\u51FD\\u6570\\u4E2D\\u521B\\u5EFA\\u66F4\\u5177\\u4F53\\u7684\\u51FD\\u6570\\uFF0C\\u4F7F\\u4F60\\u7684\\u4EE3\\u7801\\u66F4\\u6A21\\u5757\\u5316\\u548C\\u53EF\\u91CD\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u8BFB\\u6027\"}),\"\\uFF1A\\u90E8\\u5206\\u5E94\\u7528\\u7684\\u51FD\\u6570\\u53EF\\u4EE5\\u901A\\u8FC7\\u51CF\\u5C11\\u4F60\\u9700\\u8981\\u4F20\\u9012\\u7684\\u53C2\\u6570\\u6570\\u91CF\\u6765\\u4F7F\\u4F60\\u7684\\u4EE3\\u7801\\u66F4\\u5BB9\\u6613\\u9605\\u8BFB\\u548C\\u7406\\u89E3\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u771F\\u5B9E\\u4E16\\u754C\\u7684\\u4F8B\\u5B50\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u90E8\\u5206\\u5E94\\u7528\\u7ECF\\u5E38\\u7528\\u4E8E Lodash \\u7B49\\u5E93\\u4E2D\\u3002\\u4F8B\\u5982\\uFF0CLodash \\u7684 \",(0,e.jsx)(n.code,{children:\"_.partial\"}),\" \\u51FD\\u6570\\u5141\\u8BB8\\u4F60\\u8F7B\\u677E\\u521B\\u5EFA\\u90E8\\u5206\\u5E94\\u7528\\u7684\\u51FD\\u6570\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const _ = require('lodash');\n\nfunction greet(greeting, name) {\n  return \\`\\${greeting}, \\${name}!\\`;\n}\n\nconst sayHelloTo = _.partial(greet, 'Hello');\nconsole.log(sayHelloTo('John')); // Outputs \"Hello, John!\"\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind\",children:\"MDN Web \\u6587\\u6863\\uFF1AFunction.prototype.bind()\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://lodash.com/docs/4.17.15#partial\",children:\"Lodash \\u6587\\u6863\\uFF1A_.partial\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://zh.wikipedia.org/wiki/%E9%83%A8%E5%88%86%E5%BA%94%E7%94%A8\",children:\"\\u7EF4\\u57FA\\u767E\\u79D1\\uFF1A\\u90E8\\u5206\\u5E94\\u7528\"})}),`\n`]})]})}function N(d={}){let{wrapper:n}=d.components||{};return n?(0,e.jsx)(n,Object.assign({},d,{children:(0,e.jsx)(t,d)})):t(d)}var O=N;return _(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(d,n)=>()=>(n||d((n={exports:{}}).exports,n),n.exports),_=(d,n)=>{for(var l in n)c(d,l,{get:n[l],enumerable:!0})},o=(d,n,l,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of g(n))!b.call(d,r)&&r!==l&&c(d,r,{get:()=>n[r],enumerable:!(i=p(n,r))||i.enumerable});return d};var j=(d,n,l)=>(l=d!=null?u(m(d)):{},o(n||!d||!d.__esModule?c(l,\"default\",{value:d,enumerable:!0}):l,d)),x=d=>o(c({},\"__esModule\",{value:!0}),d);var a=f((F,h)=>{h.exports=_jsx_runtime});var y={};_(y,{default:()=>s,frontmatter:()=>N});var e=j(a()),N={title:\"\\u89E3\\u91CA\\u90E8\\u5206\\u5E94\\u7528\\u7684\\u7406\\u5FF5\"};function t(d){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...d.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u90E8\\u5206\\u5E94\\u7528\\u662F\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\\u4E2D\\u7684\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u5B83\\u5C06\\u4E00\\u4E2A\\u51FD\\u6570\\u5E94\\u7528\\u4E8E\\u5176\\u90E8\\u5206\\u53C2\\u6570\\uFF0C\\u4ECE\\u800C\\u4EA7\\u751F\\u4E00\\u4E2A\\u63A5\\u53D7\\u5269\\u4F59\\u53C2\\u6570\\u7684\\u65B0\\u51FD\\u6570\\u3002\\u8FD9\\u5141\\u8BB8\\u4F60\\u4ECE\\u901A\\u7528\\u51FD\\u6570\\u4E2D\\u521B\\u5EFA\\u66F4\\u5177\\u4F53\\u7684\\u51FD\\u6570\\u3002\\u4F8B\\u5982\\uFF0C\\u5982\\u679C\\u4F60\\u6709\\u4E00\\u4E2A\\u51FD\\u6570 \",(0,e.jsx)(n.code,{children:\"add(a, b)\"}),\"\\uFF0C\\u4F60\\u53EF\\u4EE5\\u90E8\\u5206\\u5E94\\u7528\\u5B83\\u6765\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u51FD\\u6570 \",(0,e.jsx)(n.code,{children:\"add5\"}),\"\\uFF0C\\u5B83\\u603B\\u662F\\u5C06\\u5176\\u53C2\\u6570\\u52A0\\u4E0A 5\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n\nconst add5 = add.bind(null, 5);\nconsole.log(add5(10)); // Outputs 15\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u90E8\\u5206\\u5E94\\u7528\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u90E8\\u5206\\u5E94\\u7528\\u662F\\u4E00\\u79CD\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\\u6280\\u672F\\uFF0C\\u5B83\\u5C06\\u4E00\\u4E2A\\u51FD\\u6570\\u5E94\\u7528\\u4E8E\\u5176\\u90E8\\u5206\\u53C2\\u6570\\uFF0C\\u4ECE\\u800C\\u4EA7\\u751F\\u4E00\\u4E2A\\u63A5\\u53D7\\u5269\\u4F59\\u53C2\\u6570\\u7684\\u65B0\\u51FD\\u6570\\u3002\\u8FD9\\u5BF9\\u4E8E\\u4ECE\\u901A\\u7528\\u51FD\\u6570\\u521B\\u5EFA\\u66F4\\u5177\\u4F53\\u7684\\u51FD\\u6570\\u3001\\u63D0\\u9AD8\\u4EE3\\u7801\\u53EF\\u91CD\\u7528\\u6027\\u548C\\u53EF\\u8BFB\\u6027\\u5F88\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8003\\u8651\\u4E00\\u4E2A\\u63A5\\u53D7\\u4E24\\u4E2A\\u53C2\\u6570\\u7684\\u7B80\\u5355 \",(0,e.jsx)(n.code,{children:\"add\"}),\" \\u51FD\\u6570\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528\\u90E8\\u5206\\u5E94\\u7528\\uFF0C\\u4F60\\u53EF\\u4EE5\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u51FD\\u6570 \",(0,e.jsx)(n.code,{children:\"add5\"}),\"\\uFF0C\\u5B83\\u603B\\u662F\\u5C06\\u5176\\u53C2\\u6570\\u52A0\\u4E0A 5\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const add5 = add.bind(null, 5);\nconsole.log(add5(10)); // Outputs 15\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u4E0A\\u9762\\u7684\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"add.bind(null, 5)\"}),\" \\u521B\\u5EFA\\u4E86\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\uFF0C\\u5176\\u4E2D\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570 (\",(0,e.jsx)(n.code,{children:\"a\"}),\") \\u88AB\\u56FA\\u5B9A\\u4E3A 5\\u3002\",(0,e.jsx)(n.code,{children:\"null\"}),\" \\u503C\\u7528\\u4F5C \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\uFF0C\\u5728\\u8FD9\\u79CD\\u60C5\\u51B5\\u4E0B\\u4E0E\\u6B64\\u65E0\\u5173\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4EE3\\u7801\\u53EF\\u91CD\\u7528\\u6027\"}),\"\\uFF1A\\u4F60\\u53EF\\u4EE5\\u4ECE\\u901A\\u7528\\u51FD\\u6570\\u4E2D\\u521B\\u5EFA\\u66F4\\u5177\\u4F53\\u7684\\u51FD\\u6570\\uFF0C\\u4F7F\\u4F60\\u7684\\u4EE3\\u7801\\u66F4\\u6A21\\u5757\\u5316\\u548C\\u53EF\\u91CD\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u8BFB\\u6027\"}),\"\\uFF1A\\u90E8\\u5206\\u5E94\\u7528\\u7684\\u51FD\\u6570\\u53EF\\u4EE5\\u901A\\u8FC7\\u51CF\\u5C11\\u4F60\\u9700\\u8981\\u4F20\\u9012\\u7684\\u53C2\\u6570\\u6570\\u91CF\\u6765\\u4F7F\\u4F60\\u7684\\u4EE3\\u7801\\u66F4\\u5BB9\\u6613\\u9605\\u8BFB\\u548C\\u7406\\u89E3\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u771F\\u5B9E\\u4E16\\u754C\\u7684\\u4F8B\\u5B50\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u90E8\\u5206\\u5E94\\u7528\\u7ECF\\u5E38\\u7528\\u4E8E Lodash \\u7B49\\u5E93\\u4E2D\\u3002\\u4F8B\\u5982\\uFF0CLodash \\u7684 \",(0,e.jsx)(n.code,{children:\"_.partial\"}),\" \\u51FD\\u6570\\u5141\\u8BB8\\u4F60\\u8F7B\\u677E\\u521B\\u5EFA\\u90E8\\u5206\\u5E94\\u7528\\u7684\\u51FD\\u6570\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const _ = require('lodash');\n\nfunction greet(greeting, name) {\n  return \\`\\${greeting}, \\${name}!\\`;\n}\n\nconst sayHelloTo = _.partial(greet, 'Hello');\nconsole.log(sayHelloTo('John')); // Outputs \"Hello, John!\"\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind\",children:\"MDN Web \\u6587\\u6863\\uFF1AFunction.prototype.bind()\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://lodash.com/docs/4.17.15#partial\",children:\"Lodash \\u6587\\u6863\\uFF1A_.partial\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://zh.wikipedia.org/wiki/%E9%83%A8%E5%88%86%E5%BA%94%E7%94%A8\",children:\"\\u7EF4\\u57FA\\u767E\\u79D1\\uFF1A\\u90E8\\u5206\\u5E94\\u7528\"})}),`\n`]})]})}function s(d={}){let{wrapper:n}=d.components||{};return n?(0,e.jsx)(n,{...d,children:(0,e.jsx)(t,{...d})}):t(d)}return x(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-scope-in-javascript/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-scope-in-javascript/en-US.json
index ca1e15265..b092ff845 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-scope-in-javascript/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-scope-in-javascript/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-scope-in-javascript/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),m=(c,e)=>{for(var o in e)i(c,o,{get:e[o],enumerable:!0})},a=(c,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of b(e))!g.call(c,l)&&l!==o&&i(c,l,{get:()=>e[l],enumerable:!(r=u(e,l))||r.enumerable});return c};var v=(c,e,o)=>(o=c!=null?d(p(c)):{},a(e||!c||!c.__esModule?i(o,\"default\",{value:c,enumerable:!0}):o,c)),V=c=>a(i({},\"__esModule\",{value:!0}),c);var s=f((x,t)=>{t.exports=_jsx_runtime});var j={};m(j,{default:()=>F,frontmatter:()=>y});var n=v(s()),y={title:\"Explain the concept of scope in JavaScript\"};function h(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, scope determines the accessibility of variables and functions at different parts of the code. There are three main types of scope: global scope, function scope, and block scope. Global scope means the variable is accessible everywhere in the code. Function scope means the variable is accessible only within the function it is declared. Block scope, introduced with ES6, means the variable is accessible only within the block (e.g., within curly braces \",(0,n.jsx)(e.code,{children:\"{}\"}),\") it is declared.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var globalVar = 'I am a global var';\n\nfunction myFunction() {\n  var functionVar = 'I am a function-scoped var';\n\n  if (true) {\n    let blockVar = 'I am a block-scoped var';\n\n    console.log('Inside block:');\n    console.log(globalVar); // Accessible\n    console.log(functionVar); // Accessible\n    console.log(blockVar); // Accessible\n  }\n\n  console.log('Inside function:');\n  console.log(globalVar); // Accessible\n  console.log(functionVar); // Accessible\n  // console.log(blockVar); // Uncaught ReferenceError\n}\n\nmyFunction();\n\nconsole.log('In global scope:');\nconsole.log(globalVar); // Accessible\n// console.log(functionVar); // Uncaught ReferenceError\n// console.log(blockVar); // Uncaught ReferenceError\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Scope in JavaScript\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Global scope\"}),`\n`,(0,n.jsx)(e.p,{children:\"Variables declared outside any function or block have global scope. They are accessible from anywhere in the code.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var globalVar = 'I am global';\n\nfunction myFunction() {\n  console.log(globalVar); // Accessible here\n}\n\nmyFunction();\nconsole.log(globalVar); // Accessible here\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Function scope\"}),`\n`,(0,n.jsx)(e.p,{children:\"Variables declared within a function are in function scope. They are accessible only within that function.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function myFunction() {\n  var functionVar = 'I am in a function';\n  console.log(functionVar); // Accessible here\n}\n\nmyFunction();\nconsole.log(functionVar); // Uncaught ReferenceError: functionVar is not defined\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Block scope\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Variables declared with \",(0,n.jsx)(e.code,{children:\"let\"}),\" or \",(0,n.jsx)(e.code,{children:\"const\"}),\" within a block (e.g., within curly braces \",(0,n.jsx)(e.code,{children:\"{}\"}),\") have block scope. They are accessible only within that block.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`if (true) {\n  let blockVar = 'I am in a block';\n  console.log(blockVar); // Accessible here\n}\n\nconsole.log(blockVar); // Uncaught ReferenceError: blockVar is not defined\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Lexical scope\"}),`\n`,(0,n.jsx)(e.p,{children:\"JavaScript uses lexical scoping, meaning that the scope of a variable is determined by its location within the source code. Nested functions have access to variables declared in their outer scope.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function outerFunction() {\n  var outerVar = 'I am outside';\n\n  function innerFunction() {\n    console.log(outerVar); // Accessible here\n  }\n\n  innerFunction();\n}\n\nouterFunction();\n`})}),`\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/Scope\",children:\"MDN Web Docs: Scope\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/var\",children:\"JavaScript.info: Variable scope\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://eloquentjavascript.net/03_functions.html#h_scope\",children:\"Eloquent JavaScript: Functions and Scope\"})}),`\n`]})]})}function k(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(h,c)})):h(c)}var F=k;return V(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),v=(c,e)=>{for(var o in e)i(c,o,{get:e[o],enumerable:!0})},a=(c,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of p(e))!f.call(c,l)&&l!==o&&i(c,l,{get:()=>e[l],enumerable:!(r=b(e,l))||r.enumerable});return c};var V=(c,e,o)=>(o=c!=null?u(g(c)):{},a(e||!c||!c.__esModule?i(o,\"default\",{value:c,enumerable:!0}):o,c)),y=c=>a(i({},\"__esModule\",{value:!0}),c);var s=m((j,t)=>{t.exports=_jsx_runtime});var F={};v(F,{default:()=>d,frontmatter:()=>k});var n=V(s()),k={title:\"Explain the concept of scope in JavaScript\"};function h(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, scope determines the accessibility of variables and functions at different parts of the code. There are three main types of scope: global scope, function scope, and block scope. Global scope means the variable is accessible everywhere in the code. Function scope means the variable is accessible only within the function it is declared. Block scope, introduced with ES6, means the variable is accessible only within the block (e.g., within curly braces \",(0,n.jsx)(e.code,{children:\"{}\"}),\") it is declared.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var globalVar = 'I am a global var';\n\nfunction myFunction() {\n  var functionVar = 'I am a function-scoped var';\n\n  if (true) {\n    let blockVar = 'I am a block-scoped var';\n\n    console.log('Inside block:');\n    console.log(globalVar); // Accessible\n    console.log(functionVar); // Accessible\n    console.log(blockVar); // Accessible\n  }\n\n  console.log('Inside function:');\n  console.log(globalVar); // Accessible\n  console.log(functionVar); // Accessible\n  // console.log(blockVar); // Uncaught ReferenceError\n}\n\nmyFunction();\n\nconsole.log('In global scope:');\nconsole.log(globalVar); // Accessible\n// console.log(functionVar); // Uncaught ReferenceError\n// console.log(blockVar); // Uncaught ReferenceError\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Scope in JavaScript\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Global scope\"}),`\n`,(0,n.jsx)(e.p,{children:\"Variables declared outside any function or block have global scope. They are accessible from anywhere in the code.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var globalVar = 'I am global';\n\nfunction myFunction() {\n  console.log(globalVar); // Accessible here\n}\n\nmyFunction();\nconsole.log(globalVar); // Accessible here\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Function scope\"}),`\n`,(0,n.jsx)(e.p,{children:\"Variables declared within a function are in function scope. They are accessible only within that function.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function myFunction() {\n  var functionVar = 'I am in a function';\n  console.log(functionVar); // Accessible here\n}\n\nmyFunction();\nconsole.log(functionVar); // Uncaught ReferenceError: functionVar is not defined\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Block scope\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Variables declared with \",(0,n.jsx)(e.code,{children:\"let\"}),\" or \",(0,n.jsx)(e.code,{children:\"const\"}),\" within a block (e.g., within curly braces \",(0,n.jsx)(e.code,{children:\"{}\"}),\") have block scope. They are accessible only within that block.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`if (true) {\n  let blockVar = 'I am in a block';\n  console.log(blockVar); // Accessible here\n}\n\nconsole.log(blockVar); // Uncaught ReferenceError: blockVar is not defined\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Lexical scope\"}),`\n`,(0,n.jsx)(e.p,{children:\"JavaScript uses lexical scoping, meaning that the scope of a variable is determined by its location within the source code. Nested functions have access to variables declared in their outer scope.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function outerFunction() {\n  var outerVar = 'I am outside';\n\n  function innerFunction() {\n    console.log(outerVar); // Accessible here\n  }\n\n  innerFunction();\n}\n\nouterFunction();\n`})}),`\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/Scope\",children:\"MDN Web Docs: Scope\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/var\",children:\"JavaScript.info: Variable scope\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://eloquentjavascript.net/03_functions.html#h_scope\",children:\"Eloquent JavaScript: Functions and Scope\"})}),`\n`]})]})}function d(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(h,{...c})}):h(c)}return y(F);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-scope-in-javascript/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-scope-in-javascript/zh-CN.json
index 29a966092..b2af82d28 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-scope-in-javascript/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-scope-in-javascript/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-scope-in-javascript/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),m=(c,n)=>{for(var o in n)r(c,o,{get:n[o],enumerable:!0})},i=(c,n,o,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of g(n))!b.call(c,l)&&l!==o&&r(c,l,{get:()=>n[l],enumerable:!(a=d(n,l))||a.enumerable});return c};var V=(c,n,o)=>(o=c!=null?u(p(c)):{},i(n||!c||!c.__esModule?r(o,\"default\",{value:c,enumerable:!0}):o,c)),v=c=>i(r({},\"__esModule\",{value:!0}),c);var s=f((I,t)=>{t.exports=_jsx_runtime});var A={};m(A,{default:()=>k,frontmatter:()=>j});var e=V(s()),j={title:\"\\u89E3\\u91CA JavaScript \\u4E2D\\u7684\\u4F5C\\u7528\\u57DF\\u6982\\u5FF5\"};function h(c){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},c.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u4F5C\\u7528\\u57DF\\u51B3\\u5B9A\\u4E86\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u5728\\u4EE3\\u7801\\u4E0D\\u540C\\u90E8\\u5206\\u7684\\u53EF\\u8BBF\\u95EE\\u6027\\u3002\\u4E3B\\u8981\\u6709\\u4E09\\u79CD\\u4F5C\\u7528\\u57DF\\uFF1A\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u3001\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\\u548C\\u5757\\u7EA7\\u4F5C\\u7528\\u57DF\\u3002\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u610F\\u5473\\u7740\\u53D8\\u91CF\\u53EF\\u4EE5\\u5728\\u4EE3\\u7801\\u4E2D\\u7684\\u4EFB\\u4F55\\u5730\\u65B9\\u8BBF\\u95EE\\u3002\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\\u610F\\u5473\\u7740\\u53D8\\u91CF\\u53EA\\u80FD\\u5728\\u5176\\u58F0\\u660E\\u7684\\u51FD\\u6570\\u5185\\u90E8\\u8BBF\\u95EE\\u3002\\u5757\\u7EA7\\u4F5C\\u7528\\u57DF\\u662F\\u5728 ES6 \\u4E2D\\u5F15\\u5165\\u7684\\uFF0C\\u610F\\u5473\\u7740\\u53D8\\u91CF\\u53EA\\u80FD\\u5728\\u5176\\u58F0\\u660E\\u7684\\u5757\\uFF08\\u4F8B\\u5982\\uFF0C\\u5728\\u5927\\u62EC\\u53F7 \",(0,e.jsx)(n.code,{children:\"{}\"}),\" \\u5185\\uFF09\\u4E2D\\u8BBF\\u95EE\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`var globalVar = 'I am a global var';\n\nfunction myFunction() {\n  var functionVar = 'I am a function-scoped var';\n\n  if (true) {\n    let blockVar = 'I am a block-scoped var';\n\n    console.log('Inside block:');\n    console.log(globalVar); // Accessible\n    console.log(functionVar); // Accessible\n    console.log(blockVar); // Accessible\n  }\n\n  console.log('Inside function:');\n  console.log(globalVar); // Accessible\n  console.log(functionVar); // Accessible\n  // console.log(blockVar); // Uncaught ReferenceError\n}\n\nmyFunction();\n\nconsole.log('In global scope:');\nconsole.log(globalVar); // Accessible\n// console.log(functionVar); // Uncaught ReferenceError\n// console.log(blockVar); // Uncaught ReferenceError\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"JavaScript \\u4E2D\\u7684\\u4F5C\\u7528\\u57DF\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u4EFB\\u4F55\\u51FD\\u6570\\u6216\\u5757\\u5916\\u90E8\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u5177\\u6709\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u3002\\u5B83\\u4EEC\\u53EF\\u4EE5\\u5728\\u4EE3\\u7801\\u4E2D\\u7684\\u4EFB\\u4F55\\u5730\\u65B9\\u8BBF\\u95EE\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`var globalVar = 'I am global';\n\nfunction myFunction() {\n  console.log(globalVar); // Accessible here\n}\n\nmyFunction();\nconsole.log(globalVar); // Accessible here\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u51FD\\u6570\\u5185\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u5C5E\\u4E8E\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\\u3002\\u5B83\\u4EEC\\u53EA\\u80FD\\u5728\\u8BE5\\u51FD\\u6570\\u5185\\u90E8\\u8BBF\\u95EE\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function myFunction() {\n  var functionVar = 'I am in a function';\n  console.log(functionVar); // Accessible here\n}\n\nmyFunction();\nconsole.log(functionVar); // Uncaught ReferenceError: functionVar is not defined\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5757\\u7EA7\\u4F5C\\u7528\\u57DF\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u5757\\uFF08\\u4F8B\\u5982\\uFF0C\\u5728\\u5927\\u62EC\\u53F7 \",(0,e.jsx)(n.code,{children:\"{}\"}),\" \\u5185\\uFF09\\u4E2D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"let\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"const\"}),\" \\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u5177\\u6709\\u5757\\u7EA7\\u4F5C\\u7528\\u57DF\\u3002\\u5B83\\u4EEC\\u53EA\\u80FD\\u5728\\u8BE5\\u5757\\u5185\\u8BBF\\u95EE\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`if (true) {\n  let blockVar = 'I am in a block';\n  console.log(blockVar); // Accessible here\n}\n\nconsole.log(blockVar); // Uncaught ReferenceError: blockVar is not defined\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\"}),`\n`,(0,e.jsx)(n.p,{children:\"JavaScript \\u4F7F\\u7528\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u53D8\\u91CF\\u7684\\u4F5C\\u7528\\u57DF\\u7531\\u5176\\u5728\\u6E90\\u4EE3\\u7801\\u4E2D\\u7684\\u4F4D\\u7F6E\\u51B3\\u5B9A\\u3002\\u5D4C\\u5957\\u51FD\\u6570\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5728\\u5176\\u5916\\u90E8\\u4F5C\\u7528\\u57DF\\u4E2D\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function outerFunction() {\n  var outerVar = 'I am outside';\n\n  function innerFunction() {\n    console.log(outerVar); // Accessible here\n  }\n\n  innerFunction();\n}\n\nouterFunction();\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Scope\",children:\"MDN Web Docs: Scope\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/var\",children:\"JavaScript.info: Variable scope\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/03_functions.html#h_scope\",children:\"Eloquent JavaScript: Functions and Scope\"})}),`\n`]})]})}function F(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,Object.assign({},c,{children:(0,e.jsx)(h,c)})):h(c)}var k=F;return v(A);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var m=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),V=(c,n)=>{for(var o in n)r(c,o,{get:n[o],enumerable:!0})},i=(c,n,o,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of p(n))!b.call(c,l)&&l!==o&&r(c,l,{get:()=>n[l],enumerable:!(a=g(n,l))||a.enumerable});return c};var v=(c,n,o)=>(o=c!=null?d(f(c)):{},i(n||!c||!c.__esModule?r(o,\"default\",{value:c,enumerable:!0}):o,c)),F=c=>i(r({},\"__esModule\",{value:!0}),c);var s=m((S,t)=>{t.exports=_jsx_runtime});var k={};V(k,{default:()=>u,frontmatter:()=>j});var e=v(s()),j={title:\"\\u89E3\\u91CA JavaScript \\u4E2D\\u7684\\u4F5C\\u7528\\u57DF\\u6982\\u5FF5\"};function h(c){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u4F5C\\u7528\\u57DF\\u51B3\\u5B9A\\u4E86\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u5728\\u4EE3\\u7801\\u4E0D\\u540C\\u90E8\\u5206\\u7684\\u53EF\\u8BBF\\u95EE\\u6027\\u3002\\u4E3B\\u8981\\u6709\\u4E09\\u79CD\\u4F5C\\u7528\\u57DF\\uFF1A\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u3001\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\\u548C\\u5757\\u7EA7\\u4F5C\\u7528\\u57DF\\u3002\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u610F\\u5473\\u7740\\u53D8\\u91CF\\u53EF\\u4EE5\\u5728\\u4EE3\\u7801\\u4E2D\\u7684\\u4EFB\\u4F55\\u5730\\u65B9\\u8BBF\\u95EE\\u3002\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\\u610F\\u5473\\u7740\\u53D8\\u91CF\\u53EA\\u80FD\\u5728\\u5176\\u58F0\\u660E\\u7684\\u51FD\\u6570\\u5185\\u90E8\\u8BBF\\u95EE\\u3002\\u5757\\u7EA7\\u4F5C\\u7528\\u57DF\\u662F\\u5728 ES6 \\u4E2D\\u5F15\\u5165\\u7684\\uFF0C\\u610F\\u5473\\u7740\\u53D8\\u91CF\\u53EA\\u80FD\\u5728\\u5176\\u58F0\\u660E\\u7684\\u5757\\uFF08\\u4F8B\\u5982\\uFF0C\\u5728\\u5927\\u62EC\\u53F7 \",(0,e.jsx)(n.code,{children:\"{}\"}),\" \\u5185\\uFF09\\u4E2D\\u8BBF\\u95EE\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`var globalVar = 'I am a global var';\n\nfunction myFunction() {\n  var functionVar = 'I am a function-scoped var';\n\n  if (true) {\n    let blockVar = 'I am a block-scoped var';\n\n    console.log('Inside block:');\n    console.log(globalVar); // Accessible\n    console.log(functionVar); // Accessible\n    console.log(blockVar); // Accessible\n  }\n\n  console.log('Inside function:');\n  console.log(globalVar); // Accessible\n  console.log(functionVar); // Accessible\n  // console.log(blockVar); // Uncaught ReferenceError\n}\n\nmyFunction();\n\nconsole.log('In global scope:');\nconsole.log(globalVar); // Accessible\n// console.log(functionVar); // Uncaught ReferenceError\n// console.log(blockVar); // Uncaught ReferenceError\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"JavaScript \\u4E2D\\u7684\\u4F5C\\u7528\\u57DF\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u4EFB\\u4F55\\u51FD\\u6570\\u6216\\u5757\\u5916\\u90E8\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u5177\\u6709\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u3002\\u5B83\\u4EEC\\u53EF\\u4EE5\\u5728\\u4EE3\\u7801\\u4E2D\\u7684\\u4EFB\\u4F55\\u5730\\u65B9\\u8BBF\\u95EE\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`var globalVar = 'I am global';\n\nfunction myFunction() {\n  console.log(globalVar); // Accessible here\n}\n\nmyFunction();\nconsole.log(globalVar); // Accessible here\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u51FD\\u6570\\u5185\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u5C5E\\u4E8E\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\\u3002\\u5B83\\u4EEC\\u53EA\\u80FD\\u5728\\u8BE5\\u51FD\\u6570\\u5185\\u90E8\\u8BBF\\u95EE\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function myFunction() {\n  var functionVar = 'I am in a function';\n  console.log(functionVar); // Accessible here\n}\n\nmyFunction();\nconsole.log(functionVar); // Uncaught ReferenceError: functionVar is not defined\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5757\\u7EA7\\u4F5C\\u7528\\u57DF\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u5757\\uFF08\\u4F8B\\u5982\\uFF0C\\u5728\\u5927\\u62EC\\u53F7 \",(0,e.jsx)(n.code,{children:\"{}\"}),\" \\u5185\\uFF09\\u4E2D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"let\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"const\"}),\" \\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u5177\\u6709\\u5757\\u7EA7\\u4F5C\\u7528\\u57DF\\u3002\\u5B83\\u4EEC\\u53EA\\u80FD\\u5728\\u8BE5\\u5757\\u5185\\u8BBF\\u95EE\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`if (true) {\n  let blockVar = 'I am in a block';\n  console.log(blockVar); // Accessible here\n}\n\nconsole.log(blockVar); // Uncaught ReferenceError: blockVar is not defined\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\"}),`\n`,(0,e.jsx)(n.p,{children:\"JavaScript \\u4F7F\\u7528\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u53D8\\u91CF\\u7684\\u4F5C\\u7528\\u57DF\\u7531\\u5176\\u5728\\u6E90\\u4EE3\\u7801\\u4E2D\\u7684\\u4F4D\\u7F6E\\u51B3\\u5B9A\\u3002\\u5D4C\\u5957\\u51FD\\u6570\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5728\\u5176\\u5916\\u90E8\\u4F5C\\u7528\\u57DF\\u4E2D\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function outerFunction() {\n  var outerVar = 'I am outside';\n\n  function innerFunction() {\n    console.log(outerVar); // Accessible here\n  }\n\n  innerFunction();\n}\n\nouterFunction();\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Scope\",children:\"MDN Web Docs: Scope\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/var\",children:\"JavaScript.info: Variable scope\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/03_functions.html#h_scope\",children:\"Eloquent JavaScript: Functions and Scope\"})}),`\n`]})]})}function u(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,{...c,children:(0,e.jsx)(h,{...c})}):h(c)}return F(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-tagged-templates/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-tagged-templates/en-US.json
index ba5cc6028..4b6902864 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-tagged-templates/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-tagged-templates/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-tagged-templates/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var l in e)r(n,l,{get:e[l],enumerable:!0})},i=(n,e,l,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!m.call(n,a)&&a!==l&&r(n,a,{get:()=>e[a],enumerable:!(s=h(e,a))||s.enumerable});return n};var x=(n,e,l)=>(l=n!=null?p(d(n)):{},i(e||!n||!n.__esModule?r(l,\"default\",{value:n,enumerable:!0}):l,n)),w=n=>i(r({},\"__esModule\",{value:!0}),n);var c=f((_,o)=>{o.exports=_jsx_runtime});var y={};v(y,{default:()=>j,frontmatter:()=>T});var t=x(c()),T={title:\"Explain the concept of tagged templates\"};function g(n){let e=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",ul:\"ul\",strong:\"strong\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:\"Tagged templates in JavaScript allow you to parse template literals with a function. The function receives the literal strings and the values as arguments, enabling custom processing of the template. For example:\"}),`\n`,(0,t.jsx)(e.pre,{live:!0,children:(0,t.jsx)(e.code,{className:\"language-js\",children:`function tag(strings, ...values) {\n  return strings[0] + values[0] + strings[1] + values[1] + strings[2];\n}\n\nconst result = tag\\`Hello \\${'world'}! How are \\${'you'}?\\`;\nconsole.log(result); // \"Hello world! How are you?\"\n`})}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"Tagged templates\"}),`\n`,(0,t.jsx)(e.h3,{children:\"What are tagged templates?\"}),`\n`,(0,t.jsx)(e.p,{children:`Tagged templates are a feature in JavaScript that allows you to call a function (the \"tag\") with a template literal. The tag function can then process the template literal's parts (both the literal strings and the interpolated values) in a custom way.`}),`\n`,(0,t.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,t.jsx)(e.p,{children:\"The syntax for tagged templates involves placing a function name before a template literal:\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`function tag(strings, ...values) {\n  // Custom processing\n}\n\ntag\\`template literal with \\${values}\\`;\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"How it works\"}),`\n`,(0,t.jsx)(e.p,{children:\"When a tagged template is invoked, the tag function receives:\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsx)(e.li,{children:\"An array of literal strings (the parts of the template that are not interpolated)\"}),`\n`,(0,t.jsx)(e.li,{children:\"The interpolated values as additional arguments\"}),`\n`]}),`\n`,(0,t.jsx)(e.p,{children:\"For example:\"}),`\n`,(0,t.jsx)(e.pre,{live:!0,children:(0,t.jsx)(e.code,{className:\"language-js\",children:`function tag(strings, ...values) {\n  console.log(strings); // [\"Hello \", \"! How are \", \"?\"]\n  console.log(values); // [\"world\", \"you\"]\n}\n\ntag\\`Hello \\${'world'}! How are \\${'you'}?\\`;\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,t.jsx)(e.p,{children:\"Tagged templates can be used for various purposes, such as:\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"String escaping\"}),\": Preventing XSS attacks by escaping user input\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Localization\"}),\": Translating template literals into different languages\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Custom formatting\"}),\": Applying custom formatting to the interpolated values\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,t.jsx)(e.p,{children:\"Here is a simple example of a tagged template that escapes HTML:\"}),`\n`,(0,t.jsx)(e.pre,{live:!0,children:(0,t.jsx)(e.code,{className:\"language-js\",children:`function escapeHTML(strings, ...values) {\n  return strings.reduce((result, string, i) => {\n    const value = values[i - 1];\n    return (\n      result +\n      (value\n        ? String(value)\n            .replace(/&/g, '&amp;')\n            .replace(/</g, '&lt;')\n            .replace(/>/g, '&gt;')\n        : '') +\n      string\n    );\n  });\n}\n\nconst userInput = '<script>alert(\"XSS\")<\\/script>';\nconst result = escapeHTML\\`User input: \\${userInput}\\`;\nconsole.log(result); // \"User input: &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;\"\n`})}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates\",children:\"MDN Web Docs: Template literals\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://javascript.info/tagged-templates\",children:\"JavaScript.info: Tagged templates\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"http://exploringjs.com/es6/ch_template-literals.html#tagged-templates\",children:\"Exploring JS: Template literals\"})}),`\n`]})]})}function S(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(g,n)})):g(n)}var j=S;return w(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var l in e)r(n,l,{get:e[l],enumerable:!0})},i=(n,e,l,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of d(e))!f.call(n,a)&&a!==l&&r(n,a,{get:()=>e[a],enumerable:!(s=u(e,a))||s.enumerable});return n};var w=(n,e,l)=>(l=n!=null?h(m(n)):{},i(e||!n||!n.__esModule?r(l,\"default\",{value:n,enumerable:!0}):l,n)),T=n=>i(r({},\"__esModule\",{value:!0}),n);var c=v((j,o)=>{o.exports=_jsx_runtime});var y={};x(y,{default:()=>p,frontmatter:()=>S});var t=w(c()),S={title:\"Explain the concept of tagged templates\"};function g(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:\"Tagged templates in JavaScript allow you to parse template literals with a function. The function receives the literal strings and the values as arguments, enabling custom processing of the template. For example:\"}),`\n`,(0,t.jsx)(e.pre,{live:!0,children:(0,t.jsx)(e.code,{className:\"language-js\",children:`function tag(strings, ...values) {\n  return strings[0] + values[0] + strings[1] + values[1] + strings[2];\n}\n\nconst result = tag\\`Hello \\${'world'}! How are \\${'you'}?\\`;\nconsole.log(result); // \"Hello world! How are you?\"\n`})}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"Tagged templates\"}),`\n`,(0,t.jsx)(e.h3,{children:\"What are tagged templates?\"}),`\n`,(0,t.jsx)(e.p,{children:`Tagged templates are a feature in JavaScript that allows you to call a function (the \"tag\") with a template literal. The tag function can then process the template literal's parts (both the literal strings and the interpolated values) in a custom way.`}),`\n`,(0,t.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,t.jsx)(e.p,{children:\"The syntax for tagged templates involves placing a function name before a template literal:\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`function tag(strings, ...values) {\n  // Custom processing\n}\n\ntag\\`template literal with \\${values}\\`;\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"How it works\"}),`\n`,(0,t.jsx)(e.p,{children:\"When a tagged template is invoked, the tag function receives:\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsx)(e.li,{children:\"An array of literal strings (the parts of the template that are not interpolated)\"}),`\n`,(0,t.jsx)(e.li,{children:\"The interpolated values as additional arguments\"}),`\n`]}),`\n`,(0,t.jsx)(e.p,{children:\"For example:\"}),`\n`,(0,t.jsx)(e.pre,{live:!0,children:(0,t.jsx)(e.code,{className:\"language-js\",children:`function tag(strings, ...values) {\n  console.log(strings); // [\"Hello \", \"! How are \", \"?\"]\n  console.log(values); // [\"world\", \"you\"]\n}\n\ntag\\`Hello \\${'world'}! How are \\${'you'}?\\`;\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,t.jsx)(e.p,{children:\"Tagged templates can be used for various purposes, such as:\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"String escaping\"}),\": Preventing XSS attacks by escaping user input\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Localization\"}),\": Translating template literals into different languages\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Custom formatting\"}),\": Applying custom formatting to the interpolated values\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,t.jsx)(e.p,{children:\"Here is a simple example of a tagged template that escapes HTML:\"}),`\n`,(0,t.jsx)(e.pre,{live:!0,children:(0,t.jsx)(e.code,{className:\"language-js\",children:`function escapeHTML(strings, ...values) {\n  return strings.reduce((result, string, i) => {\n    const value = values[i - 1];\n    return (\n      result +\n      (value\n        ? String(value)\n            .replace(/&/g, '&amp;')\n            .replace(/</g, '&lt;')\n            .replace(/>/g, '&gt;')\n        : '') +\n      string\n    );\n  });\n}\n\nconst userInput = '<script>alert(\"XSS\")<\\/script>';\nconst result = escapeHTML\\`User input: \\${userInput}\\`;\nconsole.log(result); // \"User input: &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;\"\n`})}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates\",children:\"MDN Web Docs: Template literals\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://javascript.info/tagged-templates\",children:\"JavaScript.info: Tagged templates\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"http://exploringjs.com/es6/ch_template-literals.html#tagged-templates\",children:\"Exploring JS: Template literals\"})}),`\n`]})]})}function p(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(g,{...n})}):g(n)}return T(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-tagged-templates/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-tagged-templates/zh-CN.json
index 8dc7f66cb..c189c4d8e 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-tagged-templates/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-tagged-templates/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-tagged-templates/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var v=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),f=(l,n)=>{for(var r in n)s(l,r,{get:n[r],enumerable:!0})},c=(l,n,r,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of u(n))!m.call(l,t)&&t!==r&&s(l,t,{get:()=>n[t],enumerable:!(i=g(n,t))||i.enumerable});return l};var j=(l,n,r)=>(r=l!=null?d(p(l)):{},c(n||!l||!l.__esModule?s(r,\"default\",{value:l,enumerable:!0}):r,l)),S=l=>c(s({},\"__esModule\",{value:!0}),l);var o=v((M,a)=>{a.exports=_jsx_runtime});var _={};f(_,{default:()=>w,frontmatter:()=>x});var e=j(o()),x={title:\"\\u89E3\\u91CA\\u5E26\\u6807\\u7B7E\\u7684\\u6A21\\u677F\\u7684\\u6982\\u5FF5\"};function h(l){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",ul:\"ul\",strong:\"strong\",a:\"a\"},l.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684\\u5E26\\u6807\\u7B7E\\u7684\\u6A21\\u677F\\u5141\\u8BB8\\u60A8\\u4F7F\\u7528\\u51FD\\u6570\\u89E3\\u6790\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u3002\\u8BE5\\u51FD\\u6570\\u5C06\\u5B57\\u9762\\u91CF\\u5B57\\u7B26\\u4E32\\u548C\\u503C\\u4F5C\\u4E3A\\u53C2\\u6570\\u63A5\\u6536\\uFF0C\\u4ECE\\u800C\\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49\\u5904\\u7406\\u6A21\\u677F\\u3002\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function tag(strings, ...values) {\n  return strings[0] + values[0] + strings[1] + values[1] + strings[2];\n}\n\nconst result = tag\\`Hello \\${'world'}! How are \\${'you'}?\\`;\nconsole.log(result); // \"Hello world! How are you?\"\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5E26\\u6807\\u7B7E\\u7684\\u6A21\\u677F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EC0\\u4E48\\u662F\\u5E26\\u6807\\u7B7E\\u7684\\u6A21\\u677F\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5E26\\u6807\\u7B7E\\u7684\\u6A21\\u677F\\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u4E2A\\u7279\\u6027\\uFF0C\\u5B83\\u5141\\u8BB8\\u60A8\\u4F7F\\u7528\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u8C03\\u7528\\u4E00\\u4E2A\\u51FD\\u6570\\uFF08\\u201C\\u6807\\u7B7E\\u201D\\uFF09\\u3002\\u7136\\u540E\\uFF0C\\u6807\\u7B7E\\u51FD\\u6570\\u53EF\\u4EE5\\u4EE5\\u81EA\\u5B9A\\u4E49\\u65B9\\u5F0F\\u5904\\u7406\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u7684\\u5404\\u4E2A\\u90E8\\u5206\\uFF08\\u5B57\\u9762\\u91CF\\u5B57\\u7B26\\u4E32\\u548C\\u63D2\\u503C\\uFF09\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5E26\\u6807\\u7B7E\\u7684\\u6A21\\u677F\\u7684\\u8BED\\u6CD5\\u6D89\\u53CA\\u5728\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u4E4B\\u524D\\u653E\\u7F6E\\u4E00\\u4E2A\\u51FD\\u6570\\u540D\\u79F0\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function tag(strings, ...values) {\n  // Custom processing\n}\n\ntag\\`template literal with \\${values}\\`;\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F53\\u8C03\\u7528\\u5E26\\u6807\\u7B7E\\u7684\\u6A21\\u677F\\u65F6\\uFF0C\\u6807\\u7B7E\\u51FD\\u6570\\u4F1A\\u6536\\u5230\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5B57\\u9762\\u91CF\\u5B57\\u7B26\\u4E32\\u7684\\u6570\\u7EC4\\uFF08\\u6A21\\u677F\\u4E2D\\u672A\\u63D2\\u503C\\u7684\\u5404\\u4E2A\\u90E8\\u5206\\uFF09\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4F5C\\u4E3A\\u9644\\u52A0\\u53C2\\u6570\\u7684\\u63D2\\u503C\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function tag(strings, ...values) {\n  console.log(strings); // [\"Hello \", \"! How are \", \"?\"]\n  console.log(values); // [\"world\", \"you\"]\n}\n\ntag\\`Hello \\${'world'}! How are \\${'you'}?\\`;\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5E26\\u6807\\u7B7E\\u7684\\u6A21\\u677F\\u53EF\\u7528\\u4E8E\\u5404\\u79CD\\u76EE\\u7684\\uFF0C\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B57\\u7B26\\u4E32\\u8F6C\\u4E49\"}),\"\\uFF1A\\u901A\\u8FC7\\u8F6C\\u4E49\\u7528\\u6237\\u8F93\\u5165\\u6765\\u9632\\u6B62 XSS \\u653B\\u51FB\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u672C\\u5730\\u5316\"}),\"\\uFF1A\\u5C06\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u7FFB\\u8BD1\\u6210\\u4E0D\\u540C\\u7684\\u8BED\\u8A00\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u81EA\\u5B9A\\u4E49\\u683C\\u5F0F\"}),\"\\uFF1A\\u5C06\\u81EA\\u5B9A\\u4E49\\u683C\\u5F0F\\u5E94\\u7528\\u4E8E\\u63D2\\u503C\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u8F6C\\u4E49 HTML \\u7684\\u5E26\\u6807\\u7B7E\\u6A21\\u677F\\u7684\\u7B80\\u5355\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function escapeHTML(strings, ...values) {\n  return strings.reduce((result, string, i) => {\n    const value = values[i - 1];\n    return (\n      result +\n      (value\n        ? String(value)\n            .replace(/&/g, '&amp;')\n            .replace(/</g, '&lt;')\n            .replace(/>/g, '&gt;')\n        : '') +\n      string\n    );\n  });\n}\n\nconst userInput = '<script>alert(\"XSS\")<\\/script>';\nconst result = escapeHTML\\`User input: \\${userInput}\\`;\nconsole.log(result); // \"User input: &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;\"\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates\",children:\"MDN Web Docs: Template literals\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/tagged-templates\",children:\"JavaScript.info: Tagged templates\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"http://exploringjs.com/es6/ch_template-literals.html#tagged-templates\",children:\"Exploring JS: Template literals\"})}),`\n`]})]})}function H(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,Object.assign({},l,{children:(0,e.jsx)(h,l)})):h(l)}var w=H;return S(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var f=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),S=(l,n)=>{for(var r in n)s(l,r,{get:n[r],enumerable:!0})},c=(l,n,r,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of p(n))!v.call(l,t)&&t!==r&&s(l,t,{get:()=>n[t],enumerable:!(i=g(n,t))||i.enumerable});return l};var j=(l,n,r)=>(r=l!=null?u(m(l)):{},c(n||!l||!l.__esModule?s(r,\"default\",{value:l,enumerable:!0}):r,l)),x=l=>c(s({},\"__esModule\",{value:!0}),l);var o=f((T,a)=>{a.exports=_jsx_runtime});var w={};S(w,{default:()=>d,frontmatter:()=>H});var e=j(o()),H={title:\"\\u89E3\\u91CA\\u5E26\\u6807\\u7B7E\\u7684\\u6A21\\u677F\\u7684\\u6982\\u5FF5\"};function h(l){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...l.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684\\u5E26\\u6807\\u7B7E\\u7684\\u6A21\\u677F\\u5141\\u8BB8\\u60A8\\u4F7F\\u7528\\u51FD\\u6570\\u89E3\\u6790\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u3002\\u8BE5\\u51FD\\u6570\\u5C06\\u5B57\\u9762\\u91CF\\u5B57\\u7B26\\u4E32\\u548C\\u503C\\u4F5C\\u4E3A\\u53C2\\u6570\\u63A5\\u6536\\uFF0C\\u4ECE\\u800C\\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49\\u5904\\u7406\\u6A21\\u677F\\u3002\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function tag(strings, ...values) {\n  return strings[0] + values[0] + strings[1] + values[1] + strings[2];\n}\n\nconst result = tag\\`Hello \\${'world'}! How are \\${'you'}?\\`;\nconsole.log(result); // \"Hello world! How are you?\"\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5E26\\u6807\\u7B7E\\u7684\\u6A21\\u677F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EC0\\u4E48\\u662F\\u5E26\\u6807\\u7B7E\\u7684\\u6A21\\u677F\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5E26\\u6807\\u7B7E\\u7684\\u6A21\\u677F\\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u4E2A\\u7279\\u6027\\uFF0C\\u5B83\\u5141\\u8BB8\\u60A8\\u4F7F\\u7528\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u8C03\\u7528\\u4E00\\u4E2A\\u51FD\\u6570\\uFF08\\u201C\\u6807\\u7B7E\\u201D\\uFF09\\u3002\\u7136\\u540E\\uFF0C\\u6807\\u7B7E\\u51FD\\u6570\\u53EF\\u4EE5\\u4EE5\\u81EA\\u5B9A\\u4E49\\u65B9\\u5F0F\\u5904\\u7406\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u7684\\u5404\\u4E2A\\u90E8\\u5206\\uFF08\\u5B57\\u9762\\u91CF\\u5B57\\u7B26\\u4E32\\u548C\\u63D2\\u503C\\uFF09\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5E26\\u6807\\u7B7E\\u7684\\u6A21\\u677F\\u7684\\u8BED\\u6CD5\\u6D89\\u53CA\\u5728\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u4E4B\\u524D\\u653E\\u7F6E\\u4E00\\u4E2A\\u51FD\\u6570\\u540D\\u79F0\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function tag(strings, ...values) {\n  // Custom processing\n}\n\ntag\\`template literal with \\${values}\\`;\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F53\\u8C03\\u7528\\u5E26\\u6807\\u7B7E\\u7684\\u6A21\\u677F\\u65F6\\uFF0C\\u6807\\u7B7E\\u51FD\\u6570\\u4F1A\\u6536\\u5230\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5B57\\u9762\\u91CF\\u5B57\\u7B26\\u4E32\\u7684\\u6570\\u7EC4\\uFF08\\u6A21\\u677F\\u4E2D\\u672A\\u63D2\\u503C\\u7684\\u5404\\u4E2A\\u90E8\\u5206\\uFF09\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4F5C\\u4E3A\\u9644\\u52A0\\u53C2\\u6570\\u7684\\u63D2\\u503C\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function tag(strings, ...values) {\n  console.log(strings); // [\"Hello \", \"! How are \", \"?\"]\n  console.log(values); // [\"world\", \"you\"]\n}\n\ntag\\`Hello \\${'world'}! How are \\${'you'}?\\`;\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5E26\\u6807\\u7B7E\\u7684\\u6A21\\u677F\\u53EF\\u7528\\u4E8E\\u5404\\u79CD\\u76EE\\u7684\\uFF0C\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B57\\u7B26\\u4E32\\u8F6C\\u4E49\"}),\"\\uFF1A\\u901A\\u8FC7\\u8F6C\\u4E49\\u7528\\u6237\\u8F93\\u5165\\u6765\\u9632\\u6B62 XSS \\u653B\\u51FB\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u672C\\u5730\\u5316\"}),\"\\uFF1A\\u5C06\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u7FFB\\u8BD1\\u6210\\u4E0D\\u540C\\u7684\\u8BED\\u8A00\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u81EA\\u5B9A\\u4E49\\u683C\\u5F0F\"}),\"\\uFF1A\\u5C06\\u81EA\\u5B9A\\u4E49\\u683C\\u5F0F\\u5E94\\u7528\\u4E8E\\u63D2\\u503C\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u8F6C\\u4E49 HTML \\u7684\\u5E26\\u6807\\u7B7E\\u6A21\\u677F\\u7684\\u7B80\\u5355\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function escapeHTML(strings, ...values) {\n  return strings.reduce((result, string, i) => {\n    const value = values[i - 1];\n    return (\n      result +\n      (value\n        ? String(value)\n            .replace(/&/g, '&amp;')\n            .replace(/</g, '&lt;')\n            .replace(/>/g, '&gt;')\n        : '') +\n      string\n    );\n  });\n}\n\nconst userInput = '<script>alert(\"XSS\")<\\/script>';\nconst result = escapeHTML\\`User input: \\${userInput}\\`;\nconsole.log(result); // \"User input: &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;\"\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates\",children:\"MDN Web Docs: Template literals\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/tagged-templates\",children:\"JavaScript.info: Tagged templates\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"http://exploringjs.com/es6/ch_template-literals.html#tagged-templates\",children:\"Exploring JS: Template literals\"})}),`\n`]})]})}function d(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,{...l,children:(0,e.jsx)(h,{...l})}):h(l)}return x(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-test-driven-development-tdd/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-test-driven-development-tdd/en-US.json
index a52b43276..b7accf6f4 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-test-driven-development-tdd/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-test-driven-development-tdd/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-test-driven-development-tdd/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),D=(t,e)=>{for(var i in e)s(t,i,{get:e[i],enumerable:!0})},a=(t,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!f.call(t,r)&&r!==i&&s(t,r,{get:()=>e[r],enumerable:!(o=p(e,r))||o.enumerable});return t};var v=(t,e,i)=>(i=t!=null?d(u(t)):{},a(e||!t||!t.__esModule?s(i,\"default\",{value:t,enumerable:!0}):i,t)),b=t=>a(s({},\"__esModule\",{value:!0}),t);var l=g((R,h)=>{h.exports=_jsx_runtime});var x={};D(x,{default:()=>T,frontmatter:()=>w});var n=v(l()),w={title:\"Explain the concept of test-driven development (TDD)\"};function c(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",pre:\"pre\",code:\"code\",ul:\"ul\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Test-driven development (TDD) is a software development approach where you write tests before writing the actual code. The process involves writing a failing test, writing the minimum code to pass the test, and then refactoring the code while keeping the tests passing. This ensures that the code is always tested and helps in maintaining high code quality.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is test-driven development (TDD)?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Test-driven development (TDD) is a software development methodology that emphasizes writing tests before writing the actual code. The primary goal of TDD is to ensure that the code is thoroughly tested and meets the specified requirements. The TDD process can be broken down into three main steps: Red, Green, and Refactor.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Red: Write a failing test\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Write a test for a new feature or functionality.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Run the test to ensure it fails, confirming that the feature is not yet implemented.\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example using Jest\ntest('adds 1 + 2 to equal 3', () => {\n  expect(add(1, 2)).toBe(3);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Green: Write the minimum code to pass the test\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Write the simplest code possible to make the test pass.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Run the test to ensure it passes.\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Refactor: Improve the code\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Refactor the code to improve its structure and readability without changing its behavior.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Ensure that all tests still pass after refactoring.\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Refactored code (if needed)\nfunction add(a, b) {\n  return a + b; // In this simple example, no refactoring is needed\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Benefits of TDD\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Improved code quality\"}),`\n`,(0,n.jsx)(e.p,{children:\"TDD ensures that the code is thoroughly tested, which helps in identifying and fixing bugs early in the development process.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Better design\"}),`\n`,(0,n.jsx)(e.p,{children:\"Writing tests first forces developers to think about the design and requirements of the code, leading to better-structured and more maintainable code.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Faster debugging\"}),`\n`,(0,n.jsx)(e.p,{children:\"Since tests are written for each piece of functionality, it becomes easier to identify the source of a bug when a test fails.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Documentation\"}),`\n`,(0,n.jsx)(e.p,{children:\"Tests serve as documentation for the code, making it easier for other developers to understand the functionality and purpose of the code.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Challenges of TDD\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Initial learning curve\"}),`\n`,(0,n.jsx)(e.p,{children:\"Developers new to TDD may find it challenging to adopt this methodology initially.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Time-consuming\"}),`\n`,(0,n.jsx)(e.p,{children:\"Writing tests before writing the actual code can be time-consuming, especially for complex features.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Overhead\"}),`\n`,(0,n.jsx)(e.p,{children:\"Maintaining a large number of tests can become an overhead, especially when the codebase changes frequently.\"}),`\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://www.amazon.com/Test-Driven-Development-Kent-Beck/dp/0321146530\",children:\"Test-Driven Development by Example by Kent Beck\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://martinfowler.com/bliki/TestDrivenDevelopment.html\",children:\"TDD on Martin Fowler's website\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jestjs.io/docs/getting-started\",children:\"Jest documentation\"})}),`\n`]})]})}function y(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(c,t)})):c(t)}var T=y;return b(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var D=(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})},a=(t,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!g.call(t,r)&&r!==i&&s(t,r,{get:()=>e[r],enumerable:!(o=m(e,r))||o.enumerable});return t};var b=(t,e,i)=>(i=t!=null?p(f(t)):{},a(e||!t||!t.__esModule?s(i,\"default\",{value:t,enumerable:!0}):i,t)),w=t=>a(s({},\"__esModule\",{value:!0}),t);var l=D((j,h)=>{h.exports=_jsx_runtime});var T={};v(T,{default:()=>c,frontmatter:()=>y});var n=b(l()),y={title:\"Explain the concept of test-driven development (TDD)\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Test-driven development (TDD) is a software development approach where you write tests before writing the actual code. The process involves writing a failing test, writing the minimum code to pass the test, and then refactoring the code while keeping the tests passing. This ensures that the code is always tested and helps in maintaining high code quality.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is test-driven development (TDD)?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Test-driven development (TDD) is a software development methodology that emphasizes writing tests before writing the actual code. The primary goal of TDD is to ensure that the code is thoroughly tested and meets the specified requirements. The TDD process can be broken down into three main steps: Red, Green, and Refactor.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Red: Write a failing test\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Write a test for a new feature or functionality.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Run the test to ensure it fails, confirming that the feature is not yet implemented.\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example using Jest\ntest('adds 1 + 2 to equal 3', () => {\n  expect(add(1, 2)).toBe(3);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Green: Write the minimum code to pass the test\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Write the simplest code possible to make the test pass.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Run the test to ensure it passes.\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Refactor: Improve the code\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Refactor the code to improve its structure and readability without changing its behavior.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Ensure that all tests still pass after refactoring.\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Refactored code (if needed)\nfunction add(a, b) {\n  return a + b; // In this simple example, no refactoring is needed\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Benefits of TDD\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Improved code quality\"}),`\n`,(0,n.jsx)(e.p,{children:\"TDD ensures that the code is thoroughly tested, which helps in identifying and fixing bugs early in the development process.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Better design\"}),`\n`,(0,n.jsx)(e.p,{children:\"Writing tests first forces developers to think about the design and requirements of the code, leading to better-structured and more maintainable code.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Faster debugging\"}),`\n`,(0,n.jsx)(e.p,{children:\"Since tests are written for each piece of functionality, it becomes easier to identify the source of a bug when a test fails.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Documentation\"}),`\n`,(0,n.jsx)(e.p,{children:\"Tests serve as documentation for the code, making it easier for other developers to understand the functionality and purpose of the code.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Challenges of TDD\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Initial learning curve\"}),`\n`,(0,n.jsx)(e.p,{children:\"Developers new to TDD may find it challenging to adopt this methodology initially.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Time-consuming\"}),`\n`,(0,n.jsx)(e.p,{children:\"Writing tests before writing the actual code can be time-consuming, especially for complex features.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Overhead\"}),`\n`,(0,n.jsx)(e.p,{children:\"Maintaining a large number of tests can become an overhead, especially when the codebase changes frequently.\"}),`\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://www.amazon.com/Test-Driven-Development-Kent-Beck/dp/0321146530\",children:\"Test-Driven Development by Example by Kent Beck\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://martinfowler.com/bliki/TestDrivenDevelopment.html\",children:\"TDD on Martin Fowler's website\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jestjs.io/docs/getting-started\",children:\"Jest documentation\"})}),`\n`]})]})}function c(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return w(T);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-test-driven-development-tdd/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-test-driven-development-tdd/zh-CN.json
index 6db0a443b..c93a09cfe 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-test-driven-development-tdd/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-test-driven-development-tdd/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-test-driven-development-tdd/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),g=(r,n)=>{for(var l in n)c(r,l,{get:n[l],enumerable:!0})},d=(r,n,l,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of D(n))!u.call(r,i)&&i!==l&&c(r,i,{get:()=>n[i],enumerable:!(h=p(n,i))||h.enumerable});return r};var T=(r,n,l)=>(l=r!=null?s(m(r)):{},d(n||!r||!r.__esModule?c(l,\"default\",{value:r,enumerable:!0}):l,r)),j=r=>d(c({},\"__esModule\",{value:!0}),r);var a=f((M,t)=>{t.exports=_jsx_runtime});var w={};g(w,{default:()=>_,frontmatter:()=>x});var e=T(a()),x={title:\"\\u89E3\\u91CA\\u6D4B\\u8BD5\\u9A71\\u52A8\\u5F00\\u53D1 (TDD) \\u7684\\u6982\\u5FF5\"};function o(r){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",pre:\"pre\",code:\"code\",ul:\"ul\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6D4B\\u8BD5\\u9A71\\u52A8\\u5F00\\u53D1 (TDD) \\u662F\\u4E00\\u79CD\\u8F6F\\u4EF6\\u5F00\\u53D1\\u65B9\\u6CD5\\uFF0C\\u60A8\\u5728\\u7F16\\u5199\\u5B9E\\u9645\\u4EE3\\u7801\\u4E4B\\u524D\\u7F16\\u5199\\u6D4B\\u8BD5\\u3002\\u8BE5\\u8FC7\\u7A0B\\u5305\\u62EC\\u7F16\\u5199\\u4E00\\u4E2A\\u5931\\u8D25\\u7684\\u6D4B\\u8BD5\\uFF0C\\u7F16\\u5199\\u901A\\u8FC7\\u6D4B\\u8BD5\\u6240\\u9700\\u7684\\u6700\\u5C0F\\u4EE3\\u7801\\uFF0C\\u7136\\u540E\\u5728\\u4FDD\\u6301\\u6D4B\\u8BD5\\u901A\\u8FC7\\u7684\\u540C\\u65F6\\u91CD\\u6784\\u4EE3\\u7801\\u3002\\u8FD9\\u786E\\u4FDD\\u4E86\\u4EE3\\u7801\\u59CB\\u7EC8\\u7ECF\\u8FC7\\u6D4B\\u8BD5\\uFF0C\\u5E76\\u6709\\u52A9\\u4E8E\\u4FDD\\u6301\\u9AD8\\u4EE3\\u7801\\u8D28\\u91CF\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u6D4B\\u8BD5\\u9A71\\u52A8\\u5F00\\u53D1 (TDD)\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6D4B\\u8BD5\\u9A71\\u52A8\\u5F00\\u53D1 (TDD) \\u662F\\u4E00\\u79CD\\u8F6F\\u4EF6\\u5F00\\u53D1\\u65B9\\u6CD5\\uFF0C\\u5B83\\u5F3A\\u8C03\\u5728\\u7F16\\u5199\\u5B9E\\u9645\\u4EE3\\u7801\\u4E4B\\u524D\\u7F16\\u5199\\u6D4B\\u8BD5\\u3002 TDD \\u7684\\u4E3B\\u8981\\u76EE\\u6807\\u662F\\u786E\\u4FDD\\u4EE3\\u7801\\u7ECF\\u8FC7\\u5168\\u9762\\u6D4B\\u8BD5\\u5E76\\u6EE1\\u8DB3\\u6307\\u5B9A\\u7684\\u8981\\u6C42\\u3002 TDD \\u8FC7\\u7A0B\\u53EF\\u4EE5\\u5206\\u4E3A\\u4E09\\u4E2A\\u4E3B\\u8981\\u6B65\\u9AA4\\uFF1A\\u7EA2\\u8272\\u3001\\u7EFF\\u8272\\u548C\\u91CD\\u6784\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7EA2\\u8272\\uFF1A\\u7F16\\u5199\\u4E00\\u4E2A\\u5931\\u8D25\\u7684\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u4E3A\\u65B0\\u529F\\u80FD\\u6216\\u529F\\u80FD\\u7F16\\u5199\\u6D4B\\u8BD5\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u8FD0\\u884C\\u6D4B\\u8BD5\\u4EE5\\u786E\\u4FDD\\u5B83\\u5931\\u8D25\\uFF0C\\u786E\\u8BA4\\u8BE5\\u529F\\u80FD\\u5C1A\\u672A\\u5B9E\\u73B0\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Example using Jest\ntest('adds 1 + 2 to equal 3', () => {\n  expect(add(1, 2)).toBe(3);\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7EFF\\u8272\\uFF1A\\u7F16\\u5199\\u901A\\u8FC7\\u6D4B\\u8BD5\\u6240\\u9700\\u7684\\u6700\\u5C0F\\u4EE3\\u7801\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u7F16\\u5199\\u6700\\u7B80\\u5355\\u7684\\u4EE3\\u7801\\u4EE5\\u4F7F\\u6D4B\\u8BD5\\u901A\\u8FC7\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u8FD0\\u884C\\u6D4B\\u8BD5\\u4EE5\\u786E\\u4FDD\\u5B83\\u901A\\u8FC7\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u91CD\\u6784\\uFF1A\\u6539\\u8FDB\\u4EE3\\u7801\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u91CD\\u6784\\u4EE3\\u7801\\u4EE5\\u6539\\u8FDB\\u5176\\u7ED3\\u6784\\u548C\\u53EF\\u8BFB\\u6027\\uFF0C\\u800C\\u65E0\\u9700\\u66F4\\u6539\\u5176\\u884C\\u4E3A\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u786E\\u4FDD\\u6240\\u6709\\u6D4B\\u8BD5\\u5728\\u91CD\\u6784\\u540E\\u4ECD\\u7136\\u901A\\u8FC7\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Refactored code (if needed)\nfunction add(a, b) {\n  return a + b; // In this simple example, no refactoring is needed\n}\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"TDD \\u7684\\u597D\\u5904\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6539\\u8FDB\\u7684\\u4EE3\\u7801\\u8D28\\u91CF\"}),`\n`,(0,e.jsx)(n.p,{children:\"TDD \\u786E\\u4FDD\\u4EE3\\u7801\\u7ECF\\u8FC7\\u5168\\u9762\\u6D4B\\u8BD5\\uFF0C\\u8FD9\\u6709\\u52A9\\u4E8E\\u5728\\u5F00\\u53D1\\u8FC7\\u7A0B\\u7684\\u65E9\\u671F\\u8BC6\\u522B\\u548C\\u4FEE\\u590D\\u9519\\u8BEF\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u66F4\\u597D\\u7684\\u8BBE\\u8BA1\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9996\\u5148\\u7F16\\u5199\\u6D4B\\u8BD5\\u8FEB\\u4F7F\\u5F00\\u53D1\\u4EBA\\u5458\\u601D\\u8003\\u4EE3\\u7801\\u7684\\u8BBE\\u8BA1\\u548C\\u9700\\u6C42\\uFF0C\\u4ECE\\u800C\\u4EA7\\u751F\\u7ED3\\u6784\\u66F4\\u597D\\u3001\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u7684\\u4EE3\\u7801\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u66F4\\u5FEB\\u7684\\u8C03\\u8BD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7531\\u4E8E\\u4E3A\\u6BCF\\u4E2A\\u529F\\u80FD\\u90FD\\u7F16\\u5199\\u4E86\\u6D4B\\u8BD5\\uFF0C\\u56E0\\u6B64\\u5F53\\u6D4B\\u8BD5\\u5931\\u8D25\\u65F6\\uFF0C\\u66F4\\u5BB9\\u6613\\u786E\\u5B9A\\u9519\\u8BEF\\u7684\\u6765\\u6E90\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6587\\u6863\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6D4B\\u8BD5\\u5145\\u5F53\\u4EE3\\u7801\\u7684\\u6587\\u6863\\uFF0C\\u4F7F\\u5176\\u4ED6\\u5F00\\u53D1\\u4EBA\\u5458\\u66F4\\u5BB9\\u6613\\u7406\\u89E3\\u4EE3\\u7801\\u7684\\u529F\\u80FD\\u548C\\u76EE\\u7684\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"TDD \\u7684\\u6311\\u6218\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u521D\\u59CB\\u5B66\\u4E60\\u66F2\\u7EBF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u521A\\u63A5\\u89E6 TDD \\u7684\\u5F00\\u53D1\\u4EBA\\u5458\\u53EF\\u80FD\\u4F1A\\u53D1\\u73B0\\u6700\\u521D\\u91C7\\u7528\\u8FD9\\u79CD\\u65B9\\u6CD5\\u5177\\u6709\\u6311\\u6218\\u6027\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8017\\u65F6\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u7F16\\u5199\\u5B9E\\u9645\\u4EE3\\u7801\\u4E4B\\u524D\\u7F16\\u5199\\u6D4B\\u8BD5\\u53EF\\u80FD\\u5F88\\u8017\\u65F6\\uFF0C\\u5C24\\u5176\\u5BF9\\u4E8E\\u590D\\u6742\\u7684\\u529F\\u80FD\\u800C\\u8A00\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5F00\\u9500\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7EF4\\u62A4\\u5927\\u91CF\\u6D4B\\u8BD5\\u53EF\\u80FD\\u4F1A\\u6210\\u4E3A\\u4E00\\u79CD\\u5F00\\u9500\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u4EE3\\u7801\\u5E93\\u7ECF\\u5E38\\u66F4\\u6539\\u65F6\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.amazon.com/Test-Driven-Development-Kent-Beck/dp/0321146530\",children:\"Kent Beck \\u8457\\u7684\\u300A\\u6D4B\\u8BD5\\u9A71\\u52A8\\u5F00\\u53D1\\u5B9E\\u4F8B\\u300B\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://martinfowler.com/bliki/TestDrivenDevelopment.html\",children:\"Martin Fowler \\u7F51\\u7AD9\\u4E0A\\u7684 TDD\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://jestjs.io/docs/getting-started\",children:\"Jest \\u6587\\u6863\"})}),`\n`]})]})}function b(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(o,r)})):o(r)}var _=b;return j(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var h=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var T=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),g=(r,n)=>{for(var l in n)h(r,l,{get:n[l],enumerable:!0})},d=(r,n,l,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of m(n))!f.call(r,i)&&i!==l&&h(r,i,{get:()=>n[i],enumerable:!(c=D(n,i))||c.enumerable});return r};var x=(r,n,l)=>(l=r!=null?p(u(r)):{},d(n||!r||!r.__esModule?h(l,\"default\",{value:r,enumerable:!0}):l,r)),j=r=>d(h({},\"__esModule\",{value:!0}),r);var a=T((v,t)=>{t.exports=_jsx_runtime});var w={};g(w,{default:()=>s,frontmatter:()=>_});var e=x(a()),_={title:\"\\u89E3\\u91CA\\u6D4B\\u8BD5\\u9A71\\u52A8\\u5F00\\u53D1 (TDD) \\u7684\\u6982\\u5FF5\"};function o(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6D4B\\u8BD5\\u9A71\\u52A8\\u5F00\\u53D1 (TDD) \\u662F\\u4E00\\u79CD\\u8F6F\\u4EF6\\u5F00\\u53D1\\u65B9\\u6CD5\\uFF0C\\u60A8\\u5728\\u7F16\\u5199\\u5B9E\\u9645\\u4EE3\\u7801\\u4E4B\\u524D\\u7F16\\u5199\\u6D4B\\u8BD5\\u3002\\u8BE5\\u8FC7\\u7A0B\\u5305\\u62EC\\u7F16\\u5199\\u4E00\\u4E2A\\u5931\\u8D25\\u7684\\u6D4B\\u8BD5\\uFF0C\\u7F16\\u5199\\u901A\\u8FC7\\u6D4B\\u8BD5\\u6240\\u9700\\u7684\\u6700\\u5C0F\\u4EE3\\u7801\\uFF0C\\u7136\\u540E\\u5728\\u4FDD\\u6301\\u6D4B\\u8BD5\\u901A\\u8FC7\\u7684\\u540C\\u65F6\\u91CD\\u6784\\u4EE3\\u7801\\u3002\\u8FD9\\u786E\\u4FDD\\u4E86\\u4EE3\\u7801\\u59CB\\u7EC8\\u7ECF\\u8FC7\\u6D4B\\u8BD5\\uFF0C\\u5E76\\u6709\\u52A9\\u4E8E\\u4FDD\\u6301\\u9AD8\\u4EE3\\u7801\\u8D28\\u91CF\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u6D4B\\u8BD5\\u9A71\\u52A8\\u5F00\\u53D1 (TDD)\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6D4B\\u8BD5\\u9A71\\u52A8\\u5F00\\u53D1 (TDD) \\u662F\\u4E00\\u79CD\\u8F6F\\u4EF6\\u5F00\\u53D1\\u65B9\\u6CD5\\uFF0C\\u5B83\\u5F3A\\u8C03\\u5728\\u7F16\\u5199\\u5B9E\\u9645\\u4EE3\\u7801\\u4E4B\\u524D\\u7F16\\u5199\\u6D4B\\u8BD5\\u3002 TDD \\u7684\\u4E3B\\u8981\\u76EE\\u6807\\u662F\\u786E\\u4FDD\\u4EE3\\u7801\\u7ECF\\u8FC7\\u5168\\u9762\\u6D4B\\u8BD5\\u5E76\\u6EE1\\u8DB3\\u6307\\u5B9A\\u7684\\u8981\\u6C42\\u3002 TDD \\u8FC7\\u7A0B\\u53EF\\u4EE5\\u5206\\u4E3A\\u4E09\\u4E2A\\u4E3B\\u8981\\u6B65\\u9AA4\\uFF1A\\u7EA2\\u8272\\u3001\\u7EFF\\u8272\\u548C\\u91CD\\u6784\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7EA2\\u8272\\uFF1A\\u7F16\\u5199\\u4E00\\u4E2A\\u5931\\u8D25\\u7684\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u4E3A\\u65B0\\u529F\\u80FD\\u6216\\u529F\\u80FD\\u7F16\\u5199\\u6D4B\\u8BD5\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u8FD0\\u884C\\u6D4B\\u8BD5\\u4EE5\\u786E\\u4FDD\\u5B83\\u5931\\u8D25\\uFF0C\\u786E\\u8BA4\\u8BE5\\u529F\\u80FD\\u5C1A\\u672A\\u5B9E\\u73B0\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Example using Jest\ntest('adds 1 + 2 to equal 3', () => {\n  expect(add(1, 2)).toBe(3);\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7EFF\\u8272\\uFF1A\\u7F16\\u5199\\u901A\\u8FC7\\u6D4B\\u8BD5\\u6240\\u9700\\u7684\\u6700\\u5C0F\\u4EE3\\u7801\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u7F16\\u5199\\u6700\\u7B80\\u5355\\u7684\\u4EE3\\u7801\\u4EE5\\u4F7F\\u6D4B\\u8BD5\\u901A\\u8FC7\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u8FD0\\u884C\\u6D4B\\u8BD5\\u4EE5\\u786E\\u4FDD\\u5B83\\u901A\\u8FC7\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u91CD\\u6784\\uFF1A\\u6539\\u8FDB\\u4EE3\\u7801\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u91CD\\u6784\\u4EE3\\u7801\\u4EE5\\u6539\\u8FDB\\u5176\\u7ED3\\u6784\\u548C\\u53EF\\u8BFB\\u6027\\uFF0C\\u800C\\u65E0\\u9700\\u66F4\\u6539\\u5176\\u884C\\u4E3A\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u786E\\u4FDD\\u6240\\u6709\\u6D4B\\u8BD5\\u5728\\u91CD\\u6784\\u540E\\u4ECD\\u7136\\u901A\\u8FC7\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Refactored code (if needed)\nfunction add(a, b) {\n  return a + b; // In this simple example, no refactoring is needed\n}\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"TDD \\u7684\\u597D\\u5904\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6539\\u8FDB\\u7684\\u4EE3\\u7801\\u8D28\\u91CF\"}),`\n`,(0,e.jsx)(n.p,{children:\"TDD \\u786E\\u4FDD\\u4EE3\\u7801\\u7ECF\\u8FC7\\u5168\\u9762\\u6D4B\\u8BD5\\uFF0C\\u8FD9\\u6709\\u52A9\\u4E8E\\u5728\\u5F00\\u53D1\\u8FC7\\u7A0B\\u7684\\u65E9\\u671F\\u8BC6\\u522B\\u548C\\u4FEE\\u590D\\u9519\\u8BEF\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u66F4\\u597D\\u7684\\u8BBE\\u8BA1\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9996\\u5148\\u7F16\\u5199\\u6D4B\\u8BD5\\u8FEB\\u4F7F\\u5F00\\u53D1\\u4EBA\\u5458\\u601D\\u8003\\u4EE3\\u7801\\u7684\\u8BBE\\u8BA1\\u548C\\u9700\\u6C42\\uFF0C\\u4ECE\\u800C\\u4EA7\\u751F\\u7ED3\\u6784\\u66F4\\u597D\\u3001\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u7684\\u4EE3\\u7801\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u66F4\\u5FEB\\u7684\\u8C03\\u8BD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7531\\u4E8E\\u4E3A\\u6BCF\\u4E2A\\u529F\\u80FD\\u90FD\\u7F16\\u5199\\u4E86\\u6D4B\\u8BD5\\uFF0C\\u56E0\\u6B64\\u5F53\\u6D4B\\u8BD5\\u5931\\u8D25\\u65F6\\uFF0C\\u66F4\\u5BB9\\u6613\\u786E\\u5B9A\\u9519\\u8BEF\\u7684\\u6765\\u6E90\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6587\\u6863\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6D4B\\u8BD5\\u5145\\u5F53\\u4EE3\\u7801\\u7684\\u6587\\u6863\\uFF0C\\u4F7F\\u5176\\u4ED6\\u5F00\\u53D1\\u4EBA\\u5458\\u66F4\\u5BB9\\u6613\\u7406\\u89E3\\u4EE3\\u7801\\u7684\\u529F\\u80FD\\u548C\\u76EE\\u7684\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"TDD \\u7684\\u6311\\u6218\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u521D\\u59CB\\u5B66\\u4E60\\u66F2\\u7EBF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u521A\\u63A5\\u89E6 TDD \\u7684\\u5F00\\u53D1\\u4EBA\\u5458\\u53EF\\u80FD\\u4F1A\\u53D1\\u73B0\\u6700\\u521D\\u91C7\\u7528\\u8FD9\\u79CD\\u65B9\\u6CD5\\u5177\\u6709\\u6311\\u6218\\u6027\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8017\\u65F6\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u7F16\\u5199\\u5B9E\\u9645\\u4EE3\\u7801\\u4E4B\\u524D\\u7F16\\u5199\\u6D4B\\u8BD5\\u53EF\\u80FD\\u5F88\\u8017\\u65F6\\uFF0C\\u5C24\\u5176\\u5BF9\\u4E8E\\u590D\\u6742\\u7684\\u529F\\u80FD\\u800C\\u8A00\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5F00\\u9500\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7EF4\\u62A4\\u5927\\u91CF\\u6D4B\\u8BD5\\u53EF\\u80FD\\u4F1A\\u6210\\u4E3A\\u4E00\\u79CD\\u5F00\\u9500\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u4EE3\\u7801\\u5E93\\u7ECF\\u5E38\\u66F4\\u6539\\u65F6\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.amazon.com/Test-Driven-Development-Kent-Beck/dp/0321146530\",children:\"Kent Beck \\u8457\\u7684\\u300A\\u6D4B\\u8BD5\\u9A71\\u52A8\\u5F00\\u53D1\\u5B9E\\u4F8B\\u300B\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://martinfowler.com/bliki/TestDrivenDevelopment.html\",children:\"Martin Fowler \\u7F51\\u7AD9\\u4E0A\\u7684 TDD\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://jestjs.io/docs/getting-started\",children:\"Jest \\u6587\\u6863\"})}),`\n`]})]})}function s(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(o,{...r})}):o(r)}return j(w);})();\n;return Component;"
 }
\ No newline at end of file
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 ce2acc6a2..c39adc969 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-the-prototype-pattern/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),j=(t,e)=>{for(var o in e)c(t,o,{get:e[o],enumerable:!0})},s=(t,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!b.call(t,r)&&r!==o&&c(t,r,{get:()=>e[r],enumerable:!(i=d(e,r))||i.enumerable});return t};var m=(t,e,o)=>(o=t!=null?p(g(t)):{},s(e||!t||!t.__esModule?c(o,\"default\",{value:t,enumerable:!0}):o,t)),w=t=>s(c({},\"__esModule\",{value:!0}),t);var l=y((T,a)=>{a.exports=_jsx_runtime});var P={};j(P,{default:()=>x,frontmatter:()=>f});var n=m(l()),f={title:\"Explain the concept of the Prototype pattern\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",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 Prototype pattern is a creational design pattern used to create new objects by copying an existing object, known as the prototype. This pattern is useful when the cost of creating a new object is more expensive than cloning an existing one. In JavaScript, this can be achieved using the \",(0,n.jsx)(e.code,{children:\"Object.create\"}),\" method or by using the \",(0,n.jsx)(e.code,{children:\"prototype\"}),\" property of a constructor function.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const prototypeObject = {\n  greet() {\n    console.log('Hello, world!');\n  },\n};\n\nconst newObject = Object.create(prototypeObject);\nnewObject.greet(); // Outputs: Hello, world!\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"The Prototype pattern\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Prototype pattern is a creational design pattern that allows you to create new objects by copying an existing object, known as the prototype. This pattern is particularly useful when the cost of creating a new object is more expensive than cloning an existing one.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How it works\"}),`\n`,(0,n.jsx)(e.p,{children:\"In the Prototype pattern, an object is used as a blueprint for creating new objects. This blueprint object is called the prototype. New objects are created by copying the prototype, which can be done in various ways depending on the programming language.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Implementation in JavaScript\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, the Prototype pattern can be implemented using the \",(0,n.jsx)(e.code,{children:\"Object.create\"}),\" method or by using the \",(0,n.jsx)(e.code,{children:\"prototype\"}),\" property of a constructor function.\"]}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"Object.create\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Object.create\"}),\" method creates a new object with the specified prototype object and properties.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const prototypeObject = {\n  greet() {\n    console.log('Hello, world!');\n  },\n};\n\nconst newObject = Object.create(prototypeObject);\nnewObject.greet(); // Outputs: Hello, world!\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"newObject\"}),\" is created with \",(0,n.jsx)(e.code,{children:\"prototypeObject\"}),\" as its prototype. This means that \",(0,n.jsx)(e.code,{children:\"newObject\"}),\" inherits the \",(0,n.jsx)(e.code,{children:\"greet\"}),\" method from \",(0,n.jsx)(e.code,{children:\"prototypeObject\"}),\".\"]}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Using constructor functions and the \",(0,n.jsx)(e.code,{children:\"prototype\"}),\" property\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Another way to implement the Prototype pattern in JavaScript is by using constructor functions and the \",(0,n.jsx)(e.code,{children:\"prototype\"}),\" property.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nPerson.prototype.greet = function () {\n  console.log(\\`Hello, my name is \\${this.name}\\`);\n};\n\nconst person1 = new Person('Alice');\nconst person2 = new Person('Bob');\n\nperson1.greet(); // Outputs: Hello, my name is Alice\nperson2.greet(); // Outputs: Hello, my name is Bob\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the \",(0,n.jsx)(e.code,{children:\"Person\"}),\" constructor function is used to create new \",(0,n.jsx)(e.code,{children:\"Person\"}),\" objects. The \",(0,n.jsx)(e.code,{children:\"greet\"}),\" method is added to the \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\", so all instances of \",(0,n.jsx)(e.code,{children:\"Person\"}),\" inherit this method.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Advantages\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Reduces the cost of creating new objects by cloning existing ones\"}),`\n`,(0,n.jsx)(e.li,{children:\"Simplifies the creation of complex objects\"}),`\n`,(0,n.jsx)(e.li,{children:\"Promotes code reuse and reduces redundancy\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Disadvantages\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Cloning objects can be less efficient than creating new ones in some cases\"}),`\n`,(0,n.jsx)(e.li,{children:\"Can lead to issues with deep cloning if the prototype object contains nested objects\"}),`\n`]}),`\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/Web/JavaScript/Reference/Global_Objects/Object/create\",children:\"MDN Web Docs: Object.create\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes\",children:\"MDN Web Docs: Prototypes\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://refactoring.guru/design-patterns/prototype\",children:\"Refactoring Guru: Prototype pattern\"})}),`\n`]})]})}function O(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var x=O;return w(P);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var j=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),m=(t,e)=>{for(var o in e)c(t,o,{get:e[o],enumerable:!0})},s=(t,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of g(e))!y.call(t,r)&&r!==o&&c(t,r,{get:()=>e[r],enumerable:!(i=u(e,r))||i.enumerable});return t};var w=(t,e,o)=>(o=t!=null?d(b(t)):{},s(e||!t||!t.__esModule?c(o,\"default\",{value:t,enumerable:!0}):o,t)),f=t=>s(c({},\"__esModule\",{value:!0}),t);var l=j((v,a)=>{a.exports=_jsx_runtime});var x={};m(x,{default:()=>p,frontmatter:()=>O});var n=w(l()),O={title:\"Explain the concept of the Prototype pattern\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...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 Prototype pattern is a creational design pattern used to create new objects by copying an existing object, known as the prototype. This pattern is useful when the cost of creating a new object is more expensive than cloning an existing one. In JavaScript, this can be achieved using the \",(0,n.jsx)(e.code,{children:\"Object.create\"}),\" method or by using the \",(0,n.jsx)(e.code,{children:\"prototype\"}),\" property of a constructor function.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const prototypeObject = {\n  greet() {\n    console.log('Hello, world!');\n  },\n};\n\nconst newObject = Object.create(prototypeObject);\nnewObject.greet(); // Outputs: Hello, world!\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"The Prototype pattern\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Prototype pattern is a creational design pattern that allows you to create new objects by copying an existing object, known as the prototype. This pattern is particularly useful when the cost of creating a new object is more expensive than cloning an existing one.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How it works\"}),`\n`,(0,n.jsx)(e.p,{children:\"In the Prototype pattern, an object is used as a blueprint for creating new objects. This blueprint object is called the prototype. New objects are created by copying the prototype, which can be done in various ways depending on the programming language.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Implementation in JavaScript\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, the Prototype pattern can be implemented using the \",(0,n.jsx)(e.code,{children:\"Object.create\"}),\" method or by using the \",(0,n.jsx)(e.code,{children:\"prototype\"}),\" property of a constructor function.\"]}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"Object.create\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Object.create\"}),\" method creates a new object with the specified prototype object and properties.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const prototypeObject = {\n  greet() {\n    console.log('Hello, world!');\n  },\n};\n\nconst newObject = Object.create(prototypeObject);\nnewObject.greet(); // Outputs: Hello, world!\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"newObject\"}),\" is created with \",(0,n.jsx)(e.code,{children:\"prototypeObject\"}),\" as its prototype. This means that \",(0,n.jsx)(e.code,{children:\"newObject\"}),\" inherits the \",(0,n.jsx)(e.code,{children:\"greet\"}),\" method from \",(0,n.jsx)(e.code,{children:\"prototypeObject\"}),\".\"]}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Using constructor functions and the \",(0,n.jsx)(e.code,{children:\"prototype\"}),\" property\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Another way to implement the Prototype pattern in JavaScript is by using constructor functions and the \",(0,n.jsx)(e.code,{children:\"prototype\"}),\" property.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nPerson.prototype.greet = function () {\n  console.log(\\`Hello, my name is \\${this.name}\\`);\n};\n\nconst person1 = new Person('Alice');\nconst person2 = new Person('Bob');\n\nperson1.greet(); // Outputs: Hello, my name is Alice\nperson2.greet(); // Outputs: Hello, my name is Bob\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the \",(0,n.jsx)(e.code,{children:\"Person\"}),\" constructor function is used to create new \",(0,n.jsx)(e.code,{children:\"Person\"}),\" objects. The \",(0,n.jsx)(e.code,{children:\"greet\"}),\" method is added to the \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\", so all instances of \",(0,n.jsx)(e.code,{children:\"Person\"}),\" inherit this method.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Advantages\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Reduces the cost of creating new objects by cloning existing ones\"}),`\n`,(0,n.jsx)(e.li,{children:\"Simplifies the creation of complex objects\"}),`\n`,(0,n.jsx)(e.li,{children:\"Promotes code reuse and reduces redundancy\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Disadvantages\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Cloning objects can be less efficient than creating new ones in some cases\"}),`\n`,(0,n.jsx)(e.li,{children:\"Can lead to issues with deep cloning if the prototype object contains nested objects\"}),`\n`]}),`\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/Web/JavaScript/Reference/Global_Objects/Object/create\",children:\"MDN Web Docs: Object.create\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes\",children:\"MDN Web Docs: Prototypes\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://refactoring.guru/design-patterns/prototype\",children:\"Refactoring Guru: Prototype pattern\"})}),`\n`]})]})}function p(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return f(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-prototype-pattern/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-prototype-pattern/zh-CN.json
index 620ffa1d7..a5f91efab 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-prototype-pattern/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-prototype-pattern/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-the-prototype-pattern/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var O=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),g=(r,e)=>{for(var c in e)o(r,c,{get:e[c],enumerable:!0})},i=(r,e,c,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of j(e))!b.call(r,t)&&t!==c&&o(r,t,{get:()=>e[t],enumerable:!(l=a(e,t))||l.enumerable});return r};var m=(r,e,c)=>(c=r!=null?p(u(r)):{},i(e||!r||!r.__esModule?o(c,\"default\",{value:r,enumerable:!0}):c,r)),y=r=>i(o({},\"__esModule\",{value:!0}),r);var h=O((_,d)=>{d.exports=_jsx_runtime});var P={};g(P,{default:()=>v,frontmatter:()=>f});var n=m(h()),f={title:\"\\u89E3\\u91CA\\u539F\\u578B\\u6A21\\u5F0F\\u7684\\u6982\\u5FF5\"};function s(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u539F\\u578B\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u521B\\u5EFA\\u578B\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u7528\\u4E8E\\u901A\\u8FC7\\u590D\\u5236\\u73B0\\u6709\\u5BF9\\u8C61\\uFF08\\u79F0\\u4E3A\\u539F\\u578B\\uFF09\\u6765\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\u3002\\u5F53\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\u7684\\u6210\\u672C\\u9AD8\\u4E8E\\u514B\\u9686\\u73B0\\u6709\\u5BF9\\u8C61\\u65F6\\uFF0C\\u6B64\\u6A21\\u5F0F\\u975E\\u5E38\\u6709\\u7528\\u3002\\u5728 JavaScript \\u4E2D\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.create\"}),\" \\u65B9\\u6CD5\\u6216\\u4F7F\\u7528\\u6784\\u9020\\u51FD\\u6570\\u51FD\\u6570\\u7684 \",(0,n.jsx)(e.code,{children:\"prototype\"}),\" \\u5C5E\\u6027\\u6765\\u5B9E\\u73B0\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const prototypeObject = {\n  greet() {\n    console.log('Hello, world!');\n  },\n};\n\nconst newObject = Object.create(prototypeObject);\nnewObject.greet(); // Outputs: Hello, world!\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u539F\\u578B\\u6A21\\u5F0F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u539F\\u578B\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u521B\\u5EFA\\u578B\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5B83\\u5141\\u8BB8\\u60A8\\u901A\\u8FC7\\u590D\\u5236\\u73B0\\u6709\\u5BF9\\u8C61\\uFF08\\u79F0\\u4E3A\\u539F\\u578B\\uFF09\\u6765\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\u3002\\u5F53\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\u7684\\u6210\\u672C\\u9AD8\\u4E8E\\u514B\\u9686\\u73B0\\u6709\\u5BF9\\u8C61\\u65F6\\uFF0C\\u6B64\\u6A21\\u5F0F\\u7279\\u522B\\u6709\\u7528\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u539F\\u578B\\u6A21\\u5F0F\\u4E2D\\uFF0C\\u4E00\\u4E2A\\u5BF9\\u8C61\\u88AB\\u7528\\u4F5C\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\u7684\\u84DD\\u56FE\\u3002\\u8FD9\\u4E2A\\u84DD\\u56FE\\u5BF9\\u8C61\\u88AB\\u79F0\\u4E3A\\u539F\\u578B\\u3002\\u901A\\u8FC7\\u590D\\u5236\\u539F\\u578B\\u6765\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u901A\\u8FC7\\u591A\\u79CD\\u65B9\\u5F0F\\u5B8C\\u6210\\uFF0C\\u5177\\u4F53\\u53D6\\u51B3\\u4E8E\\u7F16\\u7A0B\\u8BED\\u8A00\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5728 JavaScript \\u4E2D\\u7684\\u5B9E\\u73B0\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u539F\\u578B\\u6A21\\u5F0F\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.create\"}),\" \\u65B9\\u6CD5\\u6216\\u4F7F\\u7528\\u6784\\u9020\\u51FD\\u6570\\u51FD\\u6570\\u7684 \",(0,n.jsx)(e.code,{children:\"prototype\"}),\" \\u5C5E\\u6027\\u6765\\u5B9E\\u73B0\\u3002\"]}),`\n`,(0,n.jsxs)(e.h4,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.create\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.create\"}),\" \\u65B9\\u6CD5\\u4F7F\\u7528\\u6307\\u5B9A\\u539F\\u578B\\u5BF9\\u8C61\\u548C\\u5C5E\\u6027\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const prototypeObject = {\n  greet() {\n    console.log('Hello, world!');\n  },\n};\n\nconst newObject = Object.create(prototypeObject);\nnewObject.greet(); // Outputs: Hello, world!\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"newObject\"}),\" \\u4EE5 \",(0,n.jsx)(e.code,{children:\"prototypeObject\"}),\" \\u4F5C\\u4E3A\\u5176\\u539F\\u578B\\u521B\\u5EFA\\u3002\\u8FD9\\u610F\\u5473\\u7740 \",(0,n.jsx)(e.code,{children:\"newObject\"}),\" \\u4ECE \",(0,n.jsx)(e.code,{children:\"prototypeObject\"}),\" \\u7EE7\\u627F\\u4E86 \",(0,n.jsx)(e.code,{children:\"greet\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsxs)(e.h4,{children:[\"\\u4F7F\\u7528\\u6784\\u9020\\u51FD\\u6570\\u548C \",(0,n.jsx)(e.code,{children:\"prototype\"}),\" \\u5C5E\\u6027\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 JavaScript \\u4E2D\\u5B9E\\u73B0\\u539F\\u578B\\u6A21\\u5F0F\\u7684\\u53E6\\u4E00\\u79CD\\u65B9\\u6CD5\\u662F\\u4F7F\\u7528\\u6784\\u9020\\u51FD\\u6570\\u548C \",(0,n.jsx)(e.code,{children:\"prototype\"}),\" \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nPerson.prototype.greet = function () {\n  console.log(\\`Hello, my name is \\${this.name}\\`);\n};\n\nconst person1 = new Person('Alice');\nconst person2 = new Person('Bob');\n\nperson1.greet(); // Outputs: Hello, my name is Alice\nperson2.greet(); // Outputs: Hello, my name is Bob\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u6784\\u9020\\u51FD\\u6570\\u7528\\u4E8E\\u521B\\u5EFA\\u65B0\\u7684 \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u5BF9\\u8C61\\u3002\",(0,n.jsx)(e.code,{children:\"greet\"}),\" \\u65B9\\u6CD5\\u88AB\\u6DFB\\u52A0\\u5230 \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\"\\uFF0C\\u56E0\\u6B64 \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u7684\\u6240\\u6709\\u5B9E\\u4F8B\\u90FD\\u7EE7\\u627F\\u6B64\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u901A\\u8FC7\\u514B\\u9686\\u73B0\\u6709\\u5BF9\\u8C61\\u6765\\u964D\\u4F4E\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\u7684\\u6210\\u672C\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u7B80\\u5316\\u590D\\u6742\\u5BF9\\u8C61\\u7684\\u521B\\u5EFA\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u4FC3\\u8FDB\\u4EE3\\u7801\\u91CD\\u7528\\u5E76\\u51CF\\u5C11\\u5197\\u4F59\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u5728\\u67D0\\u4E9B\\u60C5\\u51B5\\u4E0B\\uFF0C\\u514B\\u9686\\u5BF9\\u8C61\\u53EF\\u80FD\\u4E0D\\u5982\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\u6709\\u6548\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5982\\u679C\\u539F\\u578B\\u5BF9\\u8C61\\u5305\\u542B\\u5D4C\\u5957\\u5BF9\\u8C61\\uFF0C\\u5219\\u53EF\\u80FD\\u5BFC\\u81F4\\u6DF1\\u5EA6\\u514B\\u9686\\u51FA\\u73B0\\u95EE\\u9898\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Object/create\",children:\"MDN Web Docs: Object.create\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes\",children:\"MDN Web Docs: Prototypes\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://refactoring.guru/design-patterns/prototype\",children:\"Refactoring Guru: Prototype pattern\"})}),`\n`]})]})}function w(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(s,r)})):s(r)}var v=w;return y(P);})();\n;return Component;"
+  "solution": "var Component=(()=>{var a=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),m=(r,e)=>{for(var c in e)o(r,c,{get:e[c],enumerable:!0})},i=(r,e,c,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of j(e))!O.call(r,t)&&t!==c&&o(r,t,{get:()=>e[t],enumerable:!(l=u(e,t))||l.enumerable});return r};var y=(r,e,c)=>(c=r!=null?a(b(r)):{},i(e||!r||!r.__esModule?o(c,\"default\",{value:r,enumerable:!0}):c,r)),f=r=>i(o({},\"__esModule\",{value:!0}),r);var h=g((x,d)=>{d.exports=_jsx_runtime});var v={};m(v,{default:()=>s,frontmatter:()=>w});var n=y(h()),w={title:\"\\u89E3\\u91CA\\u539F\\u578B\\u6A21\\u5F0F\\u7684\\u6982\\u5FF5\"};function p(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u539F\\u578B\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u521B\\u5EFA\\u578B\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u7528\\u4E8E\\u901A\\u8FC7\\u590D\\u5236\\u73B0\\u6709\\u5BF9\\u8C61\\uFF08\\u79F0\\u4E3A\\u539F\\u578B\\uFF09\\u6765\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\u3002\\u5F53\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\u7684\\u6210\\u672C\\u9AD8\\u4E8E\\u514B\\u9686\\u73B0\\u6709\\u5BF9\\u8C61\\u65F6\\uFF0C\\u6B64\\u6A21\\u5F0F\\u975E\\u5E38\\u6709\\u7528\\u3002\\u5728 JavaScript \\u4E2D\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.create\"}),\" \\u65B9\\u6CD5\\u6216\\u4F7F\\u7528\\u6784\\u9020\\u51FD\\u6570\\u51FD\\u6570\\u7684 \",(0,n.jsx)(e.code,{children:\"prototype\"}),\" \\u5C5E\\u6027\\u6765\\u5B9E\\u73B0\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const prototypeObject = {\n  greet() {\n    console.log('Hello, world!');\n  },\n};\n\nconst newObject = Object.create(prototypeObject);\nnewObject.greet(); // Outputs: Hello, world!\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u539F\\u578B\\u6A21\\u5F0F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u539F\\u578B\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u521B\\u5EFA\\u578B\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5B83\\u5141\\u8BB8\\u60A8\\u901A\\u8FC7\\u590D\\u5236\\u73B0\\u6709\\u5BF9\\u8C61\\uFF08\\u79F0\\u4E3A\\u539F\\u578B\\uFF09\\u6765\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\u3002\\u5F53\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\u7684\\u6210\\u672C\\u9AD8\\u4E8E\\u514B\\u9686\\u73B0\\u6709\\u5BF9\\u8C61\\u65F6\\uFF0C\\u6B64\\u6A21\\u5F0F\\u7279\\u522B\\u6709\\u7528\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u539F\\u578B\\u6A21\\u5F0F\\u4E2D\\uFF0C\\u4E00\\u4E2A\\u5BF9\\u8C61\\u88AB\\u7528\\u4F5C\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\u7684\\u84DD\\u56FE\\u3002\\u8FD9\\u4E2A\\u84DD\\u56FE\\u5BF9\\u8C61\\u88AB\\u79F0\\u4E3A\\u539F\\u578B\\u3002\\u901A\\u8FC7\\u590D\\u5236\\u539F\\u578B\\u6765\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u901A\\u8FC7\\u591A\\u79CD\\u65B9\\u5F0F\\u5B8C\\u6210\\uFF0C\\u5177\\u4F53\\u53D6\\u51B3\\u4E8E\\u7F16\\u7A0B\\u8BED\\u8A00\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5728 JavaScript \\u4E2D\\u7684\\u5B9E\\u73B0\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u539F\\u578B\\u6A21\\u5F0F\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.create\"}),\" \\u65B9\\u6CD5\\u6216\\u4F7F\\u7528\\u6784\\u9020\\u51FD\\u6570\\u51FD\\u6570\\u7684 \",(0,n.jsx)(e.code,{children:\"prototype\"}),\" \\u5C5E\\u6027\\u6765\\u5B9E\\u73B0\\u3002\"]}),`\n`,(0,n.jsxs)(e.h4,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.create\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.create\"}),\" \\u65B9\\u6CD5\\u4F7F\\u7528\\u6307\\u5B9A\\u539F\\u578B\\u5BF9\\u8C61\\u548C\\u5C5E\\u6027\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const prototypeObject = {\n  greet() {\n    console.log('Hello, world!');\n  },\n};\n\nconst newObject = Object.create(prototypeObject);\nnewObject.greet(); // Outputs: Hello, world!\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"newObject\"}),\" \\u4EE5 \",(0,n.jsx)(e.code,{children:\"prototypeObject\"}),\" \\u4F5C\\u4E3A\\u5176\\u539F\\u578B\\u521B\\u5EFA\\u3002\\u8FD9\\u610F\\u5473\\u7740 \",(0,n.jsx)(e.code,{children:\"newObject\"}),\" \\u4ECE \",(0,n.jsx)(e.code,{children:\"prototypeObject\"}),\" \\u7EE7\\u627F\\u4E86 \",(0,n.jsx)(e.code,{children:\"greet\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsxs)(e.h4,{children:[\"\\u4F7F\\u7528\\u6784\\u9020\\u51FD\\u6570\\u548C \",(0,n.jsx)(e.code,{children:\"prototype\"}),\" \\u5C5E\\u6027\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 JavaScript \\u4E2D\\u5B9E\\u73B0\\u539F\\u578B\\u6A21\\u5F0F\\u7684\\u53E6\\u4E00\\u79CD\\u65B9\\u6CD5\\u662F\\u4F7F\\u7528\\u6784\\u9020\\u51FD\\u6570\\u548C \",(0,n.jsx)(e.code,{children:\"prototype\"}),\" \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nPerson.prototype.greet = function () {\n  console.log(\\`Hello, my name is \\${this.name}\\`);\n};\n\nconst person1 = new Person('Alice');\nconst person2 = new Person('Bob');\n\nperson1.greet(); // Outputs: Hello, my name is Alice\nperson2.greet(); // Outputs: Hello, my name is Bob\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u6784\\u9020\\u51FD\\u6570\\u7528\\u4E8E\\u521B\\u5EFA\\u65B0\\u7684 \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u5BF9\\u8C61\\u3002\",(0,n.jsx)(e.code,{children:\"greet\"}),\" \\u65B9\\u6CD5\\u88AB\\u6DFB\\u52A0\\u5230 \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\"\\uFF0C\\u56E0\\u6B64 \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u7684\\u6240\\u6709\\u5B9E\\u4F8B\\u90FD\\u7EE7\\u627F\\u6B64\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u901A\\u8FC7\\u514B\\u9686\\u73B0\\u6709\\u5BF9\\u8C61\\u6765\\u964D\\u4F4E\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\u7684\\u6210\\u672C\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u7B80\\u5316\\u590D\\u6742\\u5BF9\\u8C61\\u7684\\u521B\\u5EFA\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u4FC3\\u8FDB\\u4EE3\\u7801\\u91CD\\u7528\\u5E76\\u51CF\\u5C11\\u5197\\u4F59\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u5728\\u67D0\\u4E9B\\u60C5\\u51B5\\u4E0B\\uFF0C\\u514B\\u9686\\u5BF9\\u8C61\\u53EF\\u80FD\\u4E0D\\u5982\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\u6709\\u6548\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5982\\u679C\\u539F\\u578B\\u5BF9\\u8C61\\u5305\\u542B\\u5D4C\\u5957\\u5BF9\\u8C61\\uFF0C\\u5219\\u53EF\\u80FD\\u5BFC\\u81F4\\u6DF1\\u5EA6\\u514B\\u9686\\u51FA\\u73B0\\u95EE\\u9898\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Object/create\",children:\"MDN Web Docs: Object.create\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes\",children:\"MDN Web Docs: Prototypes\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://refactoring.guru/design-patterns/prototype\",children:\"Refactoring Guru: Prototype pattern\"})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(p,{...r})}):p(r)}return f(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-singleton-pattern/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-singleton-pattern/en-US.json
index a4dbd573b..debb59dda 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-singleton-pattern/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-singleton-pattern/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-the-singleton-pattern/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var g=Object.create;var c=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var m=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),f=(t,n)=>{for(var i in n)c(t,i,{get:n[i],enumerable:!0})},o=(t,n,i,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let s of u(n))!S.call(t,s)&&s!==i&&c(t,s,{get:()=>n[s],enumerable:!(a=d(n,s))||a.enumerable});return t};var j=(t,n,i)=>(i=t!=null?g(p(t)):{},o(n||!t||!t.__esModule?c(i,\"default\",{value:t,enumerable:!0}):i,t)),b=t=>o(c({},\"__esModule\",{value:!0}),t);var l=m((_,r)=>{r.exports=_jsx_runtime});var x={};f(x,{default:()=>v,frontmatter:()=>w});var e=j(l()),w={title:\"Explain the concept of the Singleton pattern\"};function h(t){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",h4:\"h4\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"The Singleton pattern ensures that a class has only one instance and provides a global point of access to that instance. This is useful when exactly one object is needed to coordinate actions across the system. In JavaScript, this can be implemented using closures or ES6 classes.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Singleton {\n  constructor() {\n    if (!Singleton.instance) {\n      Singleton.instance = this;\n    }\n    return Singleton.instance;\n  }\n}\n\nconst instance1 = new Singleton();\nconst instance2 = new Singleton();\n\nconsole.log(instance1 === instance2); // true\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Singleton pattern\"}),`\n`,(0,e.jsx)(n.p,{children:\"The Singleton pattern is a design pattern that restricts the instantiation of a class to one single instance. This is particularly useful when exactly one object is needed to coordinate actions across the system.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Key characteristics\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Single instance\"}),\": Ensures that a class has only one instance.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Global access\"}),\": Provides a global point of access to the instance.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Lazy initialization\"}),\": The instance is created only when it is needed.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Implementation in JavaScript\"}),`\n`,(0,e.jsx)(n.p,{children:\"There are several ways to implement the Singleton pattern in JavaScript. Here are two common methods:\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Using closures\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const Singleton = (function () {\n  let instance;\n\n  function createInstance() {\n    const object = new Object('I am the instance');\n    return object;\n  }\n\n  return {\n    getInstance: function () {\n      if (!instance) {\n        instance = createInstance();\n      }\n      return instance;\n    },\n  };\n})();\n\nconst instance1 = Singleton.getInstance();\nconst instance2 = Singleton.getInstance();\n\nconsole.log(instance1 === instance2); // true\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"Using ES6 classes\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Singleton {\n  constructor() {\n    if (!Singleton.instance) {\n      Singleton.instance = this;\n    }\n    return Singleton.instance;\n  }\n}\n\nconst instance1 = new Singleton();\nconst instance2 = new Singleton();\n\nconsole.log(instance1 === instance2); // true\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Use cases\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Configuration objects\"}),\": When you need a single configuration object shared across the application.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Logging\"}),\": A single logging instance to manage log entries.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Database connections\"}),\": Ensuring only one connection is made to the database.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Singleton_pattern\",children:\"Singleton pattern on Wikipedia\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.dofactory.com/javascript/design-patterns/singleton\",children:\"JavaScript Design Patterns: Singleton\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\",children:\"MDN Web Docs: Classes\"})}),`\n`]})]})}function y(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(h,t)})):h(t)}var v=y;return b(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var g=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),j=(t,n)=>{for(var i in n)c(t,i,{get:n[i],enumerable:!0})},o=(t,n,i,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let s of p(n))!m.call(t,s)&&s!==i&&c(t,s,{get:()=>n[s],enumerable:!(a=u(n,s))||a.enumerable});return t};var w=(t,n,i)=>(i=t!=null?g(S(t)):{},o(n||!t||!t.__esModule?c(i,\"default\",{value:t,enumerable:!0}):i,t)),b=t=>o(c({},\"__esModule\",{value:!0}),t);var l=f((I,r)=>{r.exports=_jsx_runtime});var v={};j(v,{default:()=>d,frontmatter:()=>y});var e=w(l()),y={title:\"Explain the concept of the Singleton pattern\"};function h(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"The Singleton pattern ensures that a class has only one instance and provides a global point of access to that instance. This is useful when exactly one object is needed to coordinate actions across the system. In JavaScript, this can be implemented using closures or ES6 classes.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Singleton {\n  constructor() {\n    if (!Singleton.instance) {\n      Singleton.instance = this;\n    }\n    return Singleton.instance;\n  }\n}\n\nconst instance1 = new Singleton();\nconst instance2 = new Singleton();\n\nconsole.log(instance1 === instance2); // true\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Singleton pattern\"}),`\n`,(0,e.jsx)(n.p,{children:\"The Singleton pattern is a design pattern that restricts the instantiation of a class to one single instance. This is particularly useful when exactly one object is needed to coordinate actions across the system.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Key characteristics\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Single instance\"}),\": Ensures that a class has only one instance.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Global access\"}),\": Provides a global point of access to the instance.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Lazy initialization\"}),\": The instance is created only when it is needed.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Implementation in JavaScript\"}),`\n`,(0,e.jsx)(n.p,{children:\"There are several ways to implement the Singleton pattern in JavaScript. Here are two common methods:\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Using closures\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const Singleton = (function () {\n  let instance;\n\n  function createInstance() {\n    const object = new Object('I am the instance');\n    return object;\n  }\n\n  return {\n    getInstance: function () {\n      if (!instance) {\n        instance = createInstance();\n      }\n      return instance;\n    },\n  };\n})();\n\nconst instance1 = Singleton.getInstance();\nconst instance2 = Singleton.getInstance();\n\nconsole.log(instance1 === instance2); // true\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"Using ES6 classes\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Singleton {\n  constructor() {\n    if (!Singleton.instance) {\n      Singleton.instance = this;\n    }\n    return Singleton.instance;\n  }\n}\n\nconst instance1 = new Singleton();\nconst instance2 = new Singleton();\n\nconsole.log(instance1 === instance2); // true\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Use cases\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Configuration objects\"}),\": When you need a single configuration object shared across the application.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Logging\"}),\": A single logging instance to manage log entries.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Database connections\"}),\": Ensuring only one connection is made to the database.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Singleton_pattern\",children:\"Singleton pattern on Wikipedia\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.dofactory.com/javascript/design-patterns/singleton\",children:\"JavaScript Design Patterns: Singleton\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\",children:\"MDN Web Docs: Classes\"})}),`\n`]})]})}function d(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(h,{...t})}):h(t)}return b(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-singleton-pattern/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-singleton-pattern/zh-CN.json
index 391d4fdc4..5c243155d 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-singleton-pattern/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-singleton-pattern/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-the-singleton-pattern/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var f=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),m=(t,n)=>{for(var c in n)r(t,c,{get:n[c],enumerable:!0})},s=(t,n,c,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of u(n))!S.call(t,i)&&i!==c&&r(t,i,{get:()=>n[i],enumerable:!(l=g(n,i))||l.enumerable});return t};var j=(t,n,c)=>(c=t!=null?d(p(t)):{},s(n||!t||!t.__esModule?r(c,\"default\",{value:t,enumerable:!0}):c,t)),w=t=>s(r({},\"__esModule\",{value:!0}),t);var a=f((J,o)=>{o.exports=_jsx_runtime});var b={};m(b,{default:()=>_,frontmatter:()=>v});var e=j(a()),v={title:\"\\u89E3\\u91CA\\u5355\\u4F8B\\u6A21\\u5F0F\\u7684\\u6982\\u5FF5\"};function h(t){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",h4:\"h4\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5355\\u4F8B\\u6A21\\u5F0F\\u786E\\u4FDD\\u4E00\\u4E2A\\u7C7B\\u53EA\\u6709\\u4E00\\u4E2A\\u5B9E\\u4F8B\\uFF0C\\u5E76\\u63D0\\u4F9B\\u5BF9\\u8BE5\\u5B9E\\u4F8B\\u7684\\u5168\\u5C40\\u8BBF\\u95EE\\u70B9\\u3002\\u5F53\\u53EA\\u9700\\u8981\\u4E00\\u4E2A\\u5BF9\\u8C61\\u6765\\u534F\\u8C03\\u6574\\u4E2A\\u7CFB\\u7EDF\\u4E2D\\u7684\\u64CD\\u4F5C\\u65F6\\uFF0C\\u8FD9\\u975E\\u5E38\\u6709\\u7528\\u3002\\u5728 JavaScript \\u4E2D\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u4F7F\\u7528\\u95ED\\u5305\\u6216 ES6 \\u7C7B\\u6765\\u5B9E\\u73B0\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Singleton {\n  constructor() {\n    if (!Singleton.instance) {\n      Singleton.instance = this;\n    }\n    return Singleton.instance;\n  }\n}\n\nconst instance1 = new Singleton();\nconst instance2 = new Singleton();\n\nconsole.log(instance1 === instance2); // true\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5355\\u4F8B\\u6A21\\u5F0F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5355\\u4F8B\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5B83\\u5C06\\u4E00\\u4E2A\\u7C7B\\u7684\\u5B9E\\u4F8B\\u5316\\u9650\\u5236\\u4E3A\\u5355\\u4E2A\\u5B9E\\u4F8B\\u3002\\u5F53\\u53EA\\u9700\\u8981\\u4E00\\u4E2A\\u5BF9\\u8C61\\u6765\\u534F\\u8C03\\u6574\\u4E2A\\u7CFB\\u7EDF\\u4E2D\\u7684\\u64CD\\u4F5C\\u65F6\\uFF0C\\u8FD9\\u7279\\u522B\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5173\\u952E\\u7279\\u5F81\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5355\\u4E2A\\u5B9E\\u4F8B\"}),\"\\uFF1A\\u786E\\u4FDD\\u4E00\\u4E2A\\u7C7B\\u53EA\\u6709\\u4E00\\u4E2A\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5168\\u5C40\\u8BBF\\u95EE\"}),\"\\uFF1A\\u63D0\\u4F9B\\u5BF9\\u8BE5\\u5B9E\\u4F8B\\u7684\\u5168\\u5C40\\u8BBF\\u95EE\\u70B9\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5EF6\\u8FDF\\u521D\\u59CB\\u5316\"}),\"\\uFF1A\\u4EC5\\u5728\\u9700\\u8981\\u65F6\\u624D\\u521B\\u5EFA\\u5B9E\\u4F8B\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728 JavaScript \\u4E2D\\u7684\\u5B9E\\u73B0\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6709\\u51E0\\u79CD\\u65B9\\u6CD5\\u53EF\\u4EE5\\u5728 JavaScript \\u4E2D\\u5B9E\\u73B0\\u5355\\u4F8B\\u6A21\\u5F0F\\u3002\\u4EE5\\u4E0B\\u662F\\u4E24\\u79CD\\u5E38\\u89C1\\u7684\\u65B9\\u6CD5\\uFF1A\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528\\u95ED\\u5305\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const Singleton = (function () {\n  let instance;\n\n  function createInstance() {\n    const object = new Object('I am the instance');\n    return object;\n  }\n\n  return {\n    getInstance: function () {\n      if (!instance) {\n        instance = createInstance();\n      }\n      return instance;\n    },\n  };\n})();\n\nconst instance1 = Singleton.getInstance();\nconst instance2 = Singleton.getInstance();\n\nconsole.log(instance1 === instance2); // true\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528 ES6 \\u7C7B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Singleton {\n  constructor() {\n    if (!Singleton.instance) {\n      Singleton.instance = this;\n    }\n    return Singleton.instance;\n  }\n}\n\nconst instance1 = new Singleton();\nconst instance2 = new Singleton();\n\nconsole.log(instance1 === instance2); // true\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u914D\\u7F6E\\u5BF9\\u8C61\"}),\"\\uFF1A\\u5F53\\u60A8\\u9700\\u8981\\u4E00\\u4E2A\\u5728\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u5171\\u4EAB\\u7684\\u914D\\u7F6E\\u5BF9\\u8C61\\u65F6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u65E5\\u5FD7\\u8BB0\\u5F55\"}),\"\\uFF1A\\u7528\\u4E8E\\u7BA1\\u7406\\u65E5\\u5FD7\\u6761\\u76EE\\u7684\\u5355\\u4E2A\\u65E5\\u5FD7\\u8BB0\\u5F55\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6570\\u636E\\u5E93\\u8FDE\\u63A5\"}),\"\\uFF1A\\u786E\\u4FDD\\u53EA\\u5EFA\\u7ACB\\u4E00\\u4E2A\\u5230\\u6570\\u636E\\u5E93\\u7684\\u8FDE\\u63A5\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Singleton_pattern\",children:\"\\u7EF4\\u57FA\\u767E\\u79D1\\u4E0A\\u7684\\u5355\\u4F8B\\u6A21\\u5F0F\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.dofactory.com/javascript/design-patterns/singleton\",children:\"JavaScript \\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF1A\\u5355\\u4F8B\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\",children:\"MDN Web \\u6587\\u6863\\uFF1A\\u7C7B\"})}),`\n`]})]})}function x(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(h,t)})):h(t)}var _=x;return w(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var g=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),j=(t,n)=>{for(var c in n)r(t,c,{get:n[c],enumerable:!0})},s=(t,n,c,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of p(n))!f.call(t,i)&&i!==c&&r(t,i,{get:()=>n[i],enumerable:!(l=u(n,i))||l.enumerable});return t};var w=(t,n,c)=>(c=t!=null?g(S(t)):{},s(n||!t||!t.__esModule?r(c,\"default\",{value:t,enumerable:!0}):c,t)),v=t=>s(r({},\"__esModule\",{value:!0}),t);var a=m((b,o)=>{o.exports=_jsx_runtime});var _={};j(_,{default:()=>d,frontmatter:()=>x});var e=w(a()),x={title:\"\\u89E3\\u91CA\\u5355\\u4F8B\\u6A21\\u5F0F\\u7684\\u6982\\u5FF5\"};function h(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5355\\u4F8B\\u6A21\\u5F0F\\u786E\\u4FDD\\u4E00\\u4E2A\\u7C7B\\u53EA\\u6709\\u4E00\\u4E2A\\u5B9E\\u4F8B\\uFF0C\\u5E76\\u63D0\\u4F9B\\u5BF9\\u8BE5\\u5B9E\\u4F8B\\u7684\\u5168\\u5C40\\u8BBF\\u95EE\\u70B9\\u3002\\u5F53\\u53EA\\u9700\\u8981\\u4E00\\u4E2A\\u5BF9\\u8C61\\u6765\\u534F\\u8C03\\u6574\\u4E2A\\u7CFB\\u7EDF\\u4E2D\\u7684\\u64CD\\u4F5C\\u65F6\\uFF0C\\u8FD9\\u975E\\u5E38\\u6709\\u7528\\u3002\\u5728 JavaScript \\u4E2D\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u4F7F\\u7528\\u95ED\\u5305\\u6216 ES6 \\u7C7B\\u6765\\u5B9E\\u73B0\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Singleton {\n  constructor() {\n    if (!Singleton.instance) {\n      Singleton.instance = this;\n    }\n    return Singleton.instance;\n  }\n}\n\nconst instance1 = new Singleton();\nconst instance2 = new Singleton();\n\nconsole.log(instance1 === instance2); // true\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5355\\u4F8B\\u6A21\\u5F0F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5355\\u4F8B\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5B83\\u5C06\\u4E00\\u4E2A\\u7C7B\\u7684\\u5B9E\\u4F8B\\u5316\\u9650\\u5236\\u4E3A\\u5355\\u4E2A\\u5B9E\\u4F8B\\u3002\\u5F53\\u53EA\\u9700\\u8981\\u4E00\\u4E2A\\u5BF9\\u8C61\\u6765\\u534F\\u8C03\\u6574\\u4E2A\\u7CFB\\u7EDF\\u4E2D\\u7684\\u64CD\\u4F5C\\u65F6\\uFF0C\\u8FD9\\u7279\\u522B\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5173\\u952E\\u7279\\u5F81\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5355\\u4E2A\\u5B9E\\u4F8B\"}),\"\\uFF1A\\u786E\\u4FDD\\u4E00\\u4E2A\\u7C7B\\u53EA\\u6709\\u4E00\\u4E2A\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5168\\u5C40\\u8BBF\\u95EE\"}),\"\\uFF1A\\u63D0\\u4F9B\\u5BF9\\u8BE5\\u5B9E\\u4F8B\\u7684\\u5168\\u5C40\\u8BBF\\u95EE\\u70B9\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5EF6\\u8FDF\\u521D\\u59CB\\u5316\"}),\"\\uFF1A\\u4EC5\\u5728\\u9700\\u8981\\u65F6\\u624D\\u521B\\u5EFA\\u5B9E\\u4F8B\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728 JavaScript \\u4E2D\\u7684\\u5B9E\\u73B0\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6709\\u51E0\\u79CD\\u65B9\\u6CD5\\u53EF\\u4EE5\\u5728 JavaScript \\u4E2D\\u5B9E\\u73B0\\u5355\\u4F8B\\u6A21\\u5F0F\\u3002\\u4EE5\\u4E0B\\u662F\\u4E24\\u79CD\\u5E38\\u89C1\\u7684\\u65B9\\u6CD5\\uFF1A\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528\\u95ED\\u5305\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const Singleton = (function () {\n  let instance;\n\n  function createInstance() {\n    const object = new Object('I am the instance');\n    return object;\n  }\n\n  return {\n    getInstance: function () {\n      if (!instance) {\n        instance = createInstance();\n      }\n      return instance;\n    },\n  };\n})();\n\nconst instance1 = Singleton.getInstance();\nconst instance2 = Singleton.getInstance();\n\nconsole.log(instance1 === instance2); // true\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528 ES6 \\u7C7B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Singleton {\n  constructor() {\n    if (!Singleton.instance) {\n      Singleton.instance = this;\n    }\n    return Singleton.instance;\n  }\n}\n\nconst instance1 = new Singleton();\nconst instance2 = new Singleton();\n\nconsole.log(instance1 === instance2); // true\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u914D\\u7F6E\\u5BF9\\u8C61\"}),\"\\uFF1A\\u5F53\\u60A8\\u9700\\u8981\\u4E00\\u4E2A\\u5728\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u5171\\u4EAB\\u7684\\u914D\\u7F6E\\u5BF9\\u8C61\\u65F6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u65E5\\u5FD7\\u8BB0\\u5F55\"}),\"\\uFF1A\\u7528\\u4E8E\\u7BA1\\u7406\\u65E5\\u5FD7\\u6761\\u76EE\\u7684\\u5355\\u4E2A\\u65E5\\u5FD7\\u8BB0\\u5F55\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6570\\u636E\\u5E93\\u8FDE\\u63A5\"}),\"\\uFF1A\\u786E\\u4FDD\\u53EA\\u5EFA\\u7ACB\\u4E00\\u4E2A\\u5230\\u6570\\u636E\\u5E93\\u7684\\u8FDE\\u63A5\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Singleton_pattern\",children:\"\\u7EF4\\u57FA\\u767E\\u79D1\\u4E0A\\u7684\\u5355\\u4F8B\\u6A21\\u5F0F\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.dofactory.com/javascript/design-patterns/singleton\",children:\"JavaScript \\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF1A\\u5355\\u4F8B\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\",children:\"MDN Web \\u6587\\u6863\\uFF1A\\u7C7B\"})}),`\n`]})]})}function d(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(h,{...t})}):h(t)}return v(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-spread-operator-and-its-uses/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-spread-operator-and-its-uses/en-US.json
index 132b18124..a20c9d1c5 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-spread-operator-and-its-uses/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-spread-operator-and-its-uses/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-the-spread-operator-and-its-uses/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var b=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),j=(r,e)=>{for(var a in e)t(r,a,{get:e[a],enumerable:!0})},c=(r,e,a,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of h(e))!m.call(r,o)&&o!==a&&t(r,o,{get:()=>e[o],enumerable:!(s=u(e,o))||s.enumerable});return r};var y=(r,e,a)=>(a=r!=null?p(g(r)):{},c(e||!r||!r.__esModule?t(a,\"default\",{value:r,enumerable:!0}):a,r)),f=r=>c(t({},\"__esModule\",{value:!0}),r);var l=b((S,i)=>{i.exports=_jsx_runtime});var w={};j(w,{default:()=>v,frontmatter:()=>x});var n=y(l()),x={title:\"Explain the concept of the spread operator and its uses\"};function d(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The spread operator (\",(0,n.jsx)(e.code,{children:\"...\"}),\") in JavaScript allows you to expand elements of an iterable (like an array or object) into individual elements. It is commonly used for copying arrays or objects, merging arrays or objects, and passing elements of an array as arguments to a function.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Copying an array\nconst arr1 = [1, 2, 3];\nconst arr2 = [...arr1];\nconsole.log(arr2); // Output: [1, 2, 3]\n\n// Merging arrays\nconst arr3 = [4, 5, 6];\nconst mergedArray = [...arr1, ...arr3];\nconsole.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]\n\n// Copying an object\nconst obj1 = { a: 1, b: 2 };\nconst obj2 = { ...obj1 };\nconsole.log(obj2); // Output: { a: 1, b: 2 }\n\n// Merging objects\nconst obj3 = { c: 3, d: 4 };\nconst mergedObject = { ...obj1, ...obj3 };\nconsole.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }\n\n// Passing array elements as function arguments\nconst sum = (x, y, z) => x + y + z;\nconst numbers = [1, 2, 3];\nconsole.log(sum(...numbers)); // Output: 6\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"The spread operator and its uses\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Copying arrays\"}),`\n`,(0,n.jsx)(e.p,{children:\"The spread operator can be used to create a shallow copy of an array. This is useful when you want to duplicate an array without affecting the original array.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr1 = [1, 2, 3];\nconst arr2 = [...arr1];\nconsole.log(arr2); // Output: [1, 2, 3]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Merging arrays\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can use the spread operator to merge multiple arrays into one. This is a concise and readable way to combine arrays.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr1 = [1, 2, 3];\nconst arr3 = [4, 5, 6];\nconst mergedArray = [...arr1, ...arr3];\nconsole.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Copying objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"Similar to arrays, the spread operator can be used to create a shallow copy of an object. This is useful for duplicating objects without affecting the original object.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj1 = { a: 1, b: 2 };\nconst obj2 = { ...obj1 };\nconsole.log(obj2); // Output: { a: 1, b: 2 }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Merging objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"The spread operator can also be used to merge multiple objects into one. This is particularly useful for combining properties from different objects.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj1 = { a: 1, b: 2 };\nconst obj3 = { c: 3, d: 4 };\nconst mergedObject = { ...obj1, ...obj3 };\nconsole.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Passing array elements as function arguments\"}),`\n`,(0,n.jsx)(e.p,{children:\"The spread operator allows you to pass elements of an array as individual arguments to a function. This is useful for functions that accept multiple arguments.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const sum = (x, y, z) => x + y + z;\nconst numbers = [1, 2, 3];\nconsole.log(sum(...numbers)); // Output: 6\n`})}),`\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/Web/JavaScript/Reference/Operators/Spread_syntax\",children:\"MDN Web Docs: Spread syntax\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/rest-parameters-spread-operator#spread-operator\",children:\"JavaScript.info: Spread operator\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/javascript-spread-operator-explained/\",children:\"FreeCodeCamp: JavaScript spread operator explained\"})}),`\n`]})]})}function O(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(d,r)})):d(r)}var v=O;return f(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var j=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),y=(r,e)=>{for(var a in e)t(r,a,{get:e[a],enumerable:!0})},c=(r,e,a,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of g(e))!b.call(r,o)&&o!==a&&t(r,o,{get:()=>e[o],enumerable:!(s=h(e,o))||s.enumerable});return r};var f=(r,e,a)=>(a=r!=null?u(m(r)):{},c(e||!r||!r.__esModule?t(a,\"default\",{value:r,enumerable:!0}):a,r)),x=r=>c(t({},\"__esModule\",{value:!0}),r);var l=j((T,i)=>{i.exports=_jsx_runtime});var O={};y(O,{default:()=>p,frontmatter:()=>v});var n=f(l()),v={title:\"Explain the concept of the spread operator and its uses\"};function d(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The spread operator (\",(0,n.jsx)(e.code,{children:\"...\"}),\") in JavaScript allows you to expand elements of an iterable (like an array or object) into individual elements. It is commonly used for copying arrays or objects, merging arrays or objects, and passing elements of an array as arguments to a function.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Copying an array\nconst arr1 = [1, 2, 3];\nconst arr2 = [...arr1];\nconsole.log(arr2); // Output: [1, 2, 3]\n\n// Merging arrays\nconst arr3 = [4, 5, 6];\nconst mergedArray = [...arr1, ...arr3];\nconsole.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]\n\n// Copying an object\nconst obj1 = { a: 1, b: 2 };\nconst obj2 = { ...obj1 };\nconsole.log(obj2); // Output: { a: 1, b: 2 }\n\n// Merging objects\nconst obj3 = { c: 3, d: 4 };\nconst mergedObject = { ...obj1, ...obj3 };\nconsole.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }\n\n// Passing array elements as function arguments\nconst sum = (x, y, z) => x + y + z;\nconst numbers = [1, 2, 3];\nconsole.log(sum(...numbers)); // Output: 6\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"The spread operator and its uses\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Copying arrays\"}),`\n`,(0,n.jsx)(e.p,{children:\"The spread operator can be used to create a shallow copy of an array. This is useful when you want to duplicate an array without affecting the original array.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr1 = [1, 2, 3];\nconst arr2 = [...arr1];\nconsole.log(arr2); // Output: [1, 2, 3]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Merging arrays\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can use the spread operator to merge multiple arrays into one. This is a concise and readable way to combine arrays.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr1 = [1, 2, 3];\nconst arr3 = [4, 5, 6];\nconst mergedArray = [...arr1, ...arr3];\nconsole.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Copying objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"Similar to arrays, the spread operator can be used to create a shallow copy of an object. This is useful for duplicating objects without affecting the original object.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj1 = { a: 1, b: 2 };\nconst obj2 = { ...obj1 };\nconsole.log(obj2); // Output: { a: 1, b: 2 }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Merging objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"The spread operator can also be used to merge multiple objects into one. This is particularly useful for combining properties from different objects.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj1 = { a: 1, b: 2 };\nconst obj3 = { c: 3, d: 4 };\nconst mergedObject = { ...obj1, ...obj3 };\nconsole.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Passing array elements as function arguments\"}),`\n`,(0,n.jsx)(e.p,{children:\"The spread operator allows you to pass elements of an array as individual arguments to a function. This is useful for functions that accept multiple arguments.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const sum = (x, y, z) => x + y + z;\nconst numbers = [1, 2, 3];\nconsole.log(sum(...numbers)); // Output: 6\n`})}),`\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/Web/JavaScript/Reference/Operators/Spread_syntax\",children:\"MDN Web Docs: Spread syntax\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/rest-parameters-spread-operator#spread-operator\",children:\"JavaScript.info: Spread operator\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/javascript-spread-operator-explained/\",children:\"FreeCodeCamp: JavaScript spread operator explained\"})}),`\n`]})]})}function p(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(d,{...r})}):d(r)}return x(O);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-spread-operator-and-its-uses/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-spread-operator-and-its-uses/zh-CN.json
index b88df0637..aab44f2d4 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-spread-operator-and-its-uses/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-spread-operator-and-its-uses/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-the-spread-operator-and-its-uses/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var b=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),j=(r,n)=>{for(var o in n)a(r,o,{get:n[o],enumerable:!0})},s=(r,n,o,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of u(n))!m.call(r,c)&&c!==o&&a(r,c,{get:()=>n[c],enumerable:!(t=h(n,c))||t.enumerable});return r};var x=(r,n,o)=>(o=r!=null?p(g(r)):{},s(n||!r||!r.__esModule?a(o,\"default\",{value:r,enumerable:!0}):o,r)),O=r=>s(a({},\"__esModule\",{value:!0}),r);var d=b((N,l)=>{l.exports=_jsx_runtime});var S={};j(S,{default:()=>v,frontmatter:()=>y});var e=x(d()),y={title:\"\\u89E3\\u91CA\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u7684\\u6982\\u5FF5\\u53CA\\u5176\\u7528\\u9014\"};function i(r){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"JavaScript \\u4E2D\\u7684\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26 (\",(0,e.jsx)(n.code,{children:\"...\"}),\") \\u5141\\u8BB8\\u4F60\\u5C06\\u53EF\\u8FED\\u4EE3\\u5BF9\\u8C61\\uFF08\\u5982\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\uFF09\\u7684\\u5143\\u7D20\\u5C55\\u5F00\\u4E3A\\u5355\\u4E2A\\u5143\\u7D20\\u3002\\u5B83\\u901A\\u5E38\\u7528\\u4E8E\\u590D\\u5236\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\u3001\\u5408\\u5E76\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\uFF0C\\u4EE5\\u53CA\\u5C06\\u6570\\u7EC4\\u7684\\u5143\\u7D20\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Copying an array\nconst arr1 = [1, 2, 3];\nconst arr2 = [...arr1];\nconsole.log(arr2); // Output: [1, 2, 3]\n\n// Merging arrays\nconst arr3 = [4, 5, 6];\nconst mergedArray = [...arr1, ...arr3];\nconsole.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]\n\n// Copying an object\nconst obj1 = { a: 1, b: 2 };\nconst obj2 = { ...obj1 };\nconsole.log(obj2); // Output: { a: 1, b: 2 }\n\n// Merging objects\nconst obj3 = { c: 3, d: 4 };\nconst mergedObject = { ...obj1, ...obj3 };\nconsole.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }\n\n// Passing array elements as function arguments\nconst sum = (x, y, z) => x + y + z;\nconst numbers = [1, 2, 3];\nconsole.log(sum(...numbers)); // Output: 6\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u53CA\\u5176\\u7528\\u9014\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u590D\\u5236\\u6570\\u7EC4\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u53EF\\u7528\\u4E8E\\u521B\\u5EFA\\u6570\\u7EC4\\u7684\\u6D45\\u62F7\\u8D1D\\u3002\\u5F53\\u4F60\\u60F3\\u8981\\u590D\\u5236\\u4E00\\u4E2A\\u6570\\u7EC4\\u800C\\u4E0D\\u5F71\\u54CD\\u539F\\u59CB\\u6570\\u7EC4\\u65F6\\uFF0C\\u8FD9\\u5F88\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const arr1 = [1, 2, 3];\nconst arr2 = [...arr1];\nconsole.log(arr2); // Output: [1, 2, 3]\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5408\\u5E76\\u6570\\u7EC4\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u5C06\\u591A\\u4E2A\\u6570\\u7EC4\\u5408\\u5E76\\u6210\\u4E00\\u4E2A\\u3002\\u8FD9\\u662F\\u4E00\\u79CD\\u7B80\\u6D01\\u6613\\u8BFB\\u7684\\u7EC4\\u5408\\u6570\\u7EC4\\u7684\\u65B9\\u5F0F\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const arr1 = [1, 2, 3];\nconst arr3 = [4, 5, 6];\nconst mergedArray = [...arr1, ...arr3];\nconsole.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u590D\\u5236\\u5BF9\\u8C61\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E0E\\u6570\\u7EC4\\u7C7B\\u4F3C\\uFF0C\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u53EF\\u7528\\u4E8E\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u6D45\\u62F7\\u8D1D\\u3002\\u8FD9\\u5BF9\\u4E8E\\u590D\\u5236\\u5BF9\\u8C61\\u800C\\u4E0D\\u5F71\\u54CD\\u539F\\u59CB\\u5BF9\\u8C61\\u5F88\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj1 = { a: 1, b: 2 };\nconst obj2 = { ...obj1 };\nconsole.log(obj2); // Output: { a: 1, b: 2 }\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5408\\u5E76\\u5BF9\\u8C61\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u4E5F\\u53EF\\u7528\\u4E8E\\u5C06\\u591A\\u4E2A\\u5BF9\\u8C61\\u5408\\u5E76\\u6210\\u4E00\\u4E2A\\u3002\\u8FD9\\u5BF9\\u4E8E\\u7EC4\\u5408\\u6765\\u81EA\\u4E0D\\u540C\\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u7279\\u522B\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj1 = { a: 1, b: 2 };\nconst obj3 = { c: 3, d: 4 };\nconst mergedObject = { ...obj1, ...obj3 };\nconsole.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5C06\\u6570\\u7EC4\\u5143\\u7D20\\u4F5C\\u4E3A\\u51FD\\u6570\\u53C2\\u6570\\u4F20\\u9012\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u5141\\u8BB8\\u4F60\\u5C06\\u6570\\u7EC4\\u7684\\u5143\\u7D20\\u4F5C\\u4E3A\\u5355\\u4E2A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u51FD\\u6570\\u3002\\u8FD9\\u5BF9\\u4E8E\\u63A5\\u53D7\\u591A\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u5F88\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const sum = (x, y, z) => x + y + z;\nconst numbers = [1, 2, 3];\nconsole.log(sum(...numbers)); // Output: 6\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax\",children:\"MDN Web Docs: Spread syntax\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/rest-parameters-spread-operator#spread-operator\",children:\"JavaScript.info: Spread operator\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/javascript-spread-operator-explained/\",children:\"FreeCodeCamp: JavaScript spread operator explained\"})}),`\n`]})]})}function f(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(i,r)})):i(r)}var v=f;return O(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var j=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),x=(r,n)=>{for(var o in n)a(r,o,{get:n[o],enumerable:!0})},s=(r,n,o,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of g(n))!b.call(r,c)&&c!==o&&a(r,c,{get:()=>n[c],enumerable:!(t=u(n,c))||t.enumerable});return r};var y=(r,n,o)=>(o=r!=null?h(m(r)):{},s(n||!r||!r.__esModule?a(o,\"default\",{value:r,enumerable:!0}):o,r)),O=r=>s(a({},\"__esModule\",{value:!0}),r);var d=j((_,l)=>{l.exports=_jsx_runtime});var v={};x(v,{default:()=>p,frontmatter:()=>f});var e=y(d()),f={title:\"\\u89E3\\u91CA\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u7684\\u6982\\u5FF5\\u53CA\\u5176\\u7528\\u9014\"};function i(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"JavaScript \\u4E2D\\u7684\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26 (\",(0,e.jsx)(n.code,{children:\"...\"}),\") \\u5141\\u8BB8\\u4F60\\u5C06\\u53EF\\u8FED\\u4EE3\\u5BF9\\u8C61\\uFF08\\u5982\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\uFF09\\u7684\\u5143\\u7D20\\u5C55\\u5F00\\u4E3A\\u5355\\u4E2A\\u5143\\u7D20\\u3002\\u5B83\\u901A\\u5E38\\u7528\\u4E8E\\u590D\\u5236\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\u3001\\u5408\\u5E76\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\uFF0C\\u4EE5\\u53CA\\u5C06\\u6570\\u7EC4\\u7684\\u5143\\u7D20\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Copying an array\nconst arr1 = [1, 2, 3];\nconst arr2 = [...arr1];\nconsole.log(arr2); // Output: [1, 2, 3]\n\n// Merging arrays\nconst arr3 = [4, 5, 6];\nconst mergedArray = [...arr1, ...arr3];\nconsole.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]\n\n// Copying an object\nconst obj1 = { a: 1, b: 2 };\nconst obj2 = { ...obj1 };\nconsole.log(obj2); // Output: { a: 1, b: 2 }\n\n// Merging objects\nconst obj3 = { c: 3, d: 4 };\nconst mergedObject = { ...obj1, ...obj3 };\nconsole.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }\n\n// Passing array elements as function arguments\nconst sum = (x, y, z) => x + y + z;\nconst numbers = [1, 2, 3];\nconsole.log(sum(...numbers)); // Output: 6\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u53CA\\u5176\\u7528\\u9014\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u590D\\u5236\\u6570\\u7EC4\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u53EF\\u7528\\u4E8E\\u521B\\u5EFA\\u6570\\u7EC4\\u7684\\u6D45\\u62F7\\u8D1D\\u3002\\u5F53\\u4F60\\u60F3\\u8981\\u590D\\u5236\\u4E00\\u4E2A\\u6570\\u7EC4\\u800C\\u4E0D\\u5F71\\u54CD\\u539F\\u59CB\\u6570\\u7EC4\\u65F6\\uFF0C\\u8FD9\\u5F88\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const arr1 = [1, 2, 3];\nconst arr2 = [...arr1];\nconsole.log(arr2); // Output: [1, 2, 3]\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5408\\u5E76\\u6570\\u7EC4\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u5C06\\u591A\\u4E2A\\u6570\\u7EC4\\u5408\\u5E76\\u6210\\u4E00\\u4E2A\\u3002\\u8FD9\\u662F\\u4E00\\u79CD\\u7B80\\u6D01\\u6613\\u8BFB\\u7684\\u7EC4\\u5408\\u6570\\u7EC4\\u7684\\u65B9\\u5F0F\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const arr1 = [1, 2, 3];\nconst arr3 = [4, 5, 6];\nconst mergedArray = [...arr1, ...arr3];\nconsole.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u590D\\u5236\\u5BF9\\u8C61\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E0E\\u6570\\u7EC4\\u7C7B\\u4F3C\\uFF0C\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u53EF\\u7528\\u4E8E\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u6D45\\u62F7\\u8D1D\\u3002\\u8FD9\\u5BF9\\u4E8E\\u590D\\u5236\\u5BF9\\u8C61\\u800C\\u4E0D\\u5F71\\u54CD\\u539F\\u59CB\\u5BF9\\u8C61\\u5F88\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj1 = { a: 1, b: 2 };\nconst obj2 = { ...obj1 };\nconsole.log(obj2); // Output: { a: 1, b: 2 }\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5408\\u5E76\\u5BF9\\u8C61\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u4E5F\\u53EF\\u7528\\u4E8E\\u5C06\\u591A\\u4E2A\\u5BF9\\u8C61\\u5408\\u5E76\\u6210\\u4E00\\u4E2A\\u3002\\u8FD9\\u5BF9\\u4E8E\\u7EC4\\u5408\\u6765\\u81EA\\u4E0D\\u540C\\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u7279\\u522B\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj1 = { a: 1, b: 2 };\nconst obj3 = { c: 3, d: 4 };\nconst mergedObject = { ...obj1, ...obj3 };\nconsole.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5C06\\u6570\\u7EC4\\u5143\\u7D20\\u4F5C\\u4E3A\\u51FD\\u6570\\u53C2\\u6570\\u4F20\\u9012\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u5141\\u8BB8\\u4F60\\u5C06\\u6570\\u7EC4\\u7684\\u5143\\u7D20\\u4F5C\\u4E3A\\u5355\\u4E2A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u51FD\\u6570\\u3002\\u8FD9\\u5BF9\\u4E8E\\u63A5\\u53D7\\u591A\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u5F88\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const sum = (x, y, z) => x + y + z;\nconst numbers = [1, 2, 3];\nconsole.log(sum(...numbers)); // Output: 6\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax\",children:\"MDN Web Docs: Spread syntax\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/rest-parameters-spread-operator#spread-operator\",children:\"JavaScript.info: Spread operator\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/javascript-spread-operator-explained/\",children:\"FreeCodeCamp: JavaScript spread operator explained\"})}),`\n`]})]})}function p(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(i,{...r})}):i(r)}return O(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-strategy-pattern/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-strategy-pattern/en-US.json
index 97a5ef662..44fbcc1d1 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-strategy-pattern/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-strategy-pattern/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-the-strategy-pattern/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var p=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var a in e)i(n,a,{get:e[a],enumerable:!0})},s=(n,e,a,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!y.call(n,r)&&r!==a&&i(n,r,{get:()=>e[r],enumerable:!(o=g(e,r))||o.enumerable});return n};var x=(n,e,a)=>(a=n!=null?d(u(n)):{},s(e||!n||!n.__esModule?i(a,\"default\",{value:n,enumerable:!0}):a,n)),S=n=>s(i({},\"__esModule\",{value:!0}),n);var l=p((j,c)=>{c.exports=_jsx_runtime});var A={};f(A,{default:()=>b,frontmatter:()=>w});var t=x(l()),w={title:\"Explain the concept of the Strategy pattern\"};function h(n){let e=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:\"The Strategy pattern is a behavioral design pattern that allows you to define a family of algorithms, encapsulate each one as a separate class, and make them interchangeable. This pattern lets the algorithm vary independently from the clients that use it. For example, if you have different sorting algorithms, you can define each one as a strategy and switch between them without changing the client code.\"}),`\n`,(0,t.jsx)(e.pre,{live:!0,children:(0,t.jsx)(e.code,{className:\"language-js\",children:`class Context {\n  constructor(strategy) {\n    this.strategy = strategy;\n  }\n\n  executeStrategy(data) {\n    return this.strategy.doAlgorithm(data);\n  }\n}\n\nclass ConcreteStrategyA {\n  doAlgorithm(data) {\n    // Implementation of algorithm A\n    return 'Algorithm A was run on ' + data;\n  }\n}\n\nclass ConcreteStrategyB {\n  doAlgorithm(data) {\n    // Implementation of algorithm B\n    return 'Algorithm B was run on ' + data;\n  }\n}\n\n// Usage\nconst context = new Context(new ConcreteStrategyA());\ncontext.executeStrategy('someData'); // Output: Algorithm A was run on someData\n`})}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"The Strategy pattern\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Definition\"}),`\n`,(0,t.jsx)(e.p,{children:\"The Strategy pattern is a behavioral design pattern that enables selecting an algorithm's behavior at runtime. It defines a family of algorithms, encapsulates each one, and makes them interchangeable. This pattern allows the algorithm to vary independently from the clients that use it.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Components\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Context\"}),\": Maintains a reference to a \",(0,t.jsx)(e.code,{children:\"Strategy\"}),\" object and is configured with a \",(0,t.jsx)(e.code,{children:\"ConcreteStrategy\"}),\" object.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Strategy\"}),\": An interface common to all supported algorithms. The \",(0,t.jsx)(e.code,{children:\"Context\"}),\" uses this interface to call the algorithm defined by a \",(0,t.jsx)(e.code,{children:\"ConcreteStrategy\"}),\".\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"ConcreteStrategy\"}),\": Implements the \",(0,t.jsx)(e.code,{children:\"Strategy\"}),\" interface to provide a specific algorithm.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,t.jsx)(e.p,{children:\"Consider a scenario where you have different sorting algorithms and you want to switch between them without changing the client code.\"}),`\n`,(0,t.jsx)(e.pre,{live:!0,children:(0,t.jsx)(e.code,{className:\"language-js\",children:`// Strategy interface\nclass Strategy {\n  doAlgorithm(data) {\n    throw new Error('This method should be overridden!');\n  }\n}\n\n// ConcreteStrategyA\nclass ConcreteStrategyA extends Strategy {\n  doAlgorithm(data) {\n    return data.sort((a, b) => a - b); // Example: ascending sort\n  }\n}\n\n// ConcreteStrategyB\nclass ConcreteStrategyB extends Strategy {\n  doAlgorithm(data) {\n    return data.sort((a, b) => b - a); // Example: descending sort\n  }\n}\n\n// Context\nclass Context {\n  constructor(strategy) {\n    this.strategy = strategy;\n  }\n\n  setStrategy(strategy) {\n    this.strategy = strategy;\n  }\n\n  executeStrategy(data) {\n    return this.strategy.doAlgorithm(data);\n  }\n}\n\n// Usage\nconst data = [3, 1, 4, 1, 5, 9];\nconst context = new Context(new ConcreteStrategyA());\nconsole.log(context.executeStrategy([...data])); // Output: [1, 1, 3, 4, 5, 9]\n\ncontext.setStrategy(new ConcreteStrategyB());\nconsole.log(context.executeStrategy([...data])); // Output: [9, 5, 4, 3, 1, 1]\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Benefits\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Flexibility\"}),\": You can change the algorithm at runtime.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Maintainability\"}),\": Adding new strategies does not affect existing code.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Encapsulation\"}),\": Each algorithm is encapsulated in its own class.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Drawbacks\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Overhead\"}),\": Increased number of classes and objects.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Complexity\"}),\": Can make the system more complex if not used judiciously.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://en.wikipedia.org/wiki/Strategy_pattern\",children:\"Strategy pattern on Wikipedia\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://refactoring.guru/design-patterns/strategy\",children:\"Refactoring Guru: Strategy pattern\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\",children:\"MDN Web Docs: JavaScript classes\"})}),`\n`]})]})}function C(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var b=C;return S(A);})();\n;return Component;"
+  "solution": "var Component=(()=>{var g=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var a in e)i(n,a,{get:e[a],enumerable:!0})},s=(n,e,a,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!p.call(n,r)&&r!==a&&i(n,r,{get:()=>e[r],enumerable:!(o=m(e,r))||o.enumerable});return n};var S=(n,e,a)=>(a=n!=null?g(y(n)):{},s(e||!n||!n.__esModule?i(a,\"default\",{value:n,enumerable:!0}):a,n)),w=n=>s(i({},\"__esModule\",{value:!0}),n);var l=f((v,c)=>{c.exports=_jsx_runtime});var b={};x(b,{default:()=>d,frontmatter:()=>C});var t=S(l()),C={title:\"Explain the concept of the Strategy pattern\"};function h(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:\"The Strategy pattern is a behavioral design pattern that allows you to define a family of algorithms, encapsulate each one as a separate class, and make them interchangeable. This pattern lets the algorithm vary independently from the clients that use it. For example, if you have different sorting algorithms, you can define each one as a strategy and switch between them without changing the client code.\"}),`\n`,(0,t.jsx)(e.pre,{live:!0,children:(0,t.jsx)(e.code,{className:\"language-js\",children:`class Context {\n  constructor(strategy) {\n    this.strategy = strategy;\n  }\n\n  executeStrategy(data) {\n    return this.strategy.doAlgorithm(data);\n  }\n}\n\nclass ConcreteStrategyA {\n  doAlgorithm(data) {\n    // Implementation of algorithm A\n    return 'Algorithm A was run on ' + data;\n  }\n}\n\nclass ConcreteStrategyB {\n  doAlgorithm(data) {\n    // Implementation of algorithm B\n    return 'Algorithm B was run on ' + data;\n  }\n}\n\n// Usage\nconst context = new Context(new ConcreteStrategyA());\ncontext.executeStrategy('someData'); // Output: Algorithm A was run on someData\n`})}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"The Strategy pattern\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Definition\"}),`\n`,(0,t.jsx)(e.p,{children:\"The Strategy pattern is a behavioral design pattern that enables selecting an algorithm's behavior at runtime. It defines a family of algorithms, encapsulates each one, and makes them interchangeable. This pattern allows the algorithm to vary independently from the clients that use it.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Components\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Context\"}),\": Maintains a reference to a \",(0,t.jsx)(e.code,{children:\"Strategy\"}),\" object and is configured with a \",(0,t.jsx)(e.code,{children:\"ConcreteStrategy\"}),\" object.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Strategy\"}),\": An interface common to all supported algorithms. The \",(0,t.jsx)(e.code,{children:\"Context\"}),\" uses this interface to call the algorithm defined by a \",(0,t.jsx)(e.code,{children:\"ConcreteStrategy\"}),\".\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"ConcreteStrategy\"}),\": Implements the \",(0,t.jsx)(e.code,{children:\"Strategy\"}),\" interface to provide a specific algorithm.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,t.jsx)(e.p,{children:\"Consider a scenario where you have different sorting algorithms and you want to switch between them without changing the client code.\"}),`\n`,(0,t.jsx)(e.pre,{live:!0,children:(0,t.jsx)(e.code,{className:\"language-js\",children:`// Strategy interface\nclass Strategy {\n  doAlgorithm(data) {\n    throw new Error('This method should be overridden!');\n  }\n}\n\n// ConcreteStrategyA\nclass ConcreteStrategyA extends Strategy {\n  doAlgorithm(data) {\n    return data.sort((a, b) => a - b); // Example: ascending sort\n  }\n}\n\n// ConcreteStrategyB\nclass ConcreteStrategyB extends Strategy {\n  doAlgorithm(data) {\n    return data.sort((a, b) => b - a); // Example: descending sort\n  }\n}\n\n// Context\nclass Context {\n  constructor(strategy) {\n    this.strategy = strategy;\n  }\n\n  setStrategy(strategy) {\n    this.strategy = strategy;\n  }\n\n  executeStrategy(data) {\n    return this.strategy.doAlgorithm(data);\n  }\n}\n\n// Usage\nconst data = [3, 1, 4, 1, 5, 9];\nconst context = new Context(new ConcreteStrategyA());\nconsole.log(context.executeStrategy([...data])); // Output: [1, 1, 3, 4, 5, 9]\n\ncontext.setStrategy(new ConcreteStrategyB());\nconsole.log(context.executeStrategy([...data])); // Output: [9, 5, 4, 3, 1, 1]\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Benefits\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Flexibility\"}),\": You can change the algorithm at runtime.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Maintainability\"}),\": Adding new strategies does not affect existing code.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Encapsulation\"}),\": Each algorithm is encapsulated in its own class.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Drawbacks\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Overhead\"}),\": Increased number of classes and objects.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Complexity\"}),\": Can make the system more complex if not used judiciously.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://en.wikipedia.org/wiki/Strategy_pattern\",children:\"Strategy pattern on Wikipedia\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://refactoring.guru/design-patterns/strategy\",children:\"Refactoring Guru: Strategy pattern\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\",children:\"MDN Web Docs: JavaScript classes\"})}),`\n`]})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(h,{...n})}):h(n)}return w(b);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-strategy-pattern/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-strategy-pattern/zh-CN.json
index 0f1f43004..a5901a77c 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-strategy-pattern/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-strategy-pattern/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-the-strategy-pattern/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var x=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),S=(e,n)=>{for(var r in n)o(e,r,{get:n[r],enumerable:!0})},l=(e,n,r,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let a of u(n))!m.call(e,a)&&a!==r&&o(e,a,{get:()=>n[a],enumerable:!(c=g(n,a))||c.enumerable});return e};var p=(e,n,r)=>(r=e!=null?h(y(e)):{},l(n||!e||!e.__esModule?o(r,\"default\",{value:e,enumerable:!0}):r,e)),C=e=>l(o({},\"__esModule\",{value:!0}),e);var s=x((_,i)=>{i.exports=_jsx_runtime});var b={};S(b,{default:()=>w,frontmatter:()=>A});var t=p(s()),A={title:\"\\u89E3\\u91CA\\u7B56\\u7565\\u6A21\\u5F0F\\u7684\\u6982\\u5FF5\"};function d(e){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",a:\"a\"},e.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(n.p,{children:\"\\u7B56\\u7565\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u884C\\u4E3A\\u578B\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5B83\\u5141\\u8BB8\\u60A8\\u5B9A\\u4E49\\u4E00\\u7CFB\\u5217\\u7B97\\u6CD5\\uFF0C\\u5C06\\u6BCF\\u4E2A\\u7B97\\u6CD5\\u5C01\\u88C5\\u6210\\u4E00\\u4E2A\\u5355\\u72EC\\u7684\\u7C7B\\uFF0C\\u5E76\\u4F7F\\u5B83\\u4EEC\\u53EF\\u4EE5\\u4E92\\u6362\\u3002\\u8FD9\\u79CD\\u6A21\\u5F0F\\u4F7F\\u7B97\\u6CD5\\u53EF\\u4EE5\\u72EC\\u7ACB\\u4E8E\\u4F7F\\u7528\\u5B83\\u7684\\u5BA2\\u6237\\u7AEF\\u800C\\u53D8\\u5316\\u3002\\u4F8B\\u5982\\uFF0C\\u5982\\u679C\\u60A8\\u6709\\u4E0D\\u540C\\u7684\\u6392\\u5E8F\\u7B97\\u6CD5\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C06\\u6BCF\\u4E2A\\u7B97\\u6CD5\\u5B9A\\u4E49\\u4E3A\\u4E00\\u4E2A\\u7B56\\u7565\\uFF0C\\u5E76\\u5728\\u5B83\\u4EEC\\u4E4B\\u95F4\\u5207\\u6362\\uFF0C\\u800C\\u65E0\\u9700\\u66F4\\u6539\\u5BA2\\u6237\\u7AEF\\u4EE3\\u7801\\u3002\"}),`\n`,(0,t.jsx)(n.pre,{live:!0,children:(0,t.jsx)(n.code,{className:\"language-js\",children:`class Context {\n  constructor(strategy) {\n    this.strategy = strategy;\n  }\n\n  executeStrategy(data) {\n    return this.strategy.doAlgorithm(data);\n  }\n}\n\nclass ConcreteStrategyA {\n  doAlgorithm(data) {\n    // Implementation of algorithm A\n    return 'Algorithm A was run on ' + data;\n  }\n}\n\nclass ConcreteStrategyB {\n  doAlgorithm(data) {\n    // Implementation of algorithm B\n    return 'Algorithm B was run on ' + data;\n  }\n}\n\n// Usage\nconst context = new Context(new ConcreteStrategyA());\ncontext.executeStrategy('someData'); // Output: Algorithm A was run on someData\n`})}),`\n`,(0,t.jsx)(n.hr,{}),`\n`,(0,t.jsx)(n.h2,{children:\"\\u7B56\\u7565\\u6A21\\u5F0F\"}),`\n`,(0,t.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,t.jsx)(n.p,{children:\"\\u7B56\\u7565\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u884C\\u4E3A\\u578B\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5B83\\u5141\\u8BB8\\u5728\\u8FD0\\u884C\\u65F6\\u9009\\u62E9\\u7B97\\u6CD5\\u7684\\u884C\\u4E3A\\u3002\\u5B83\\u5B9A\\u4E49\\u4E86\\u4E00\\u7CFB\\u5217\\u7B97\\u6CD5\\uFF0C\\u5C01\\u88C5\\u4E86\\u6BCF\\u4E00\\u4E2A\\u7B97\\u6CD5\\uFF0C\\u5E76\\u4F7F\\u5B83\\u4EEC\\u53EF\\u4EE5\\u4E92\\u6362\\u3002\\u8FD9\\u79CD\\u6A21\\u5F0F\\u5141\\u8BB8\\u7B97\\u6CD5\\u72EC\\u7ACB\\u4E8E\\u4F7F\\u7528\\u5B83\\u7684\\u5BA2\\u6237\\u7AEF\\u800C\\u53D8\\u5316\\u3002\"}),`\n`,(0,t.jsx)(n.h3,{children:\"\\u7EC4\\u4EF6\"}),`\n`,(0,t.jsxs)(n.ol,{children:[`\n`,(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:\"Context\"}),\": \\u7EF4\\u62A4\\u5BF9 \",(0,t.jsx)(n.code,{children:\"Strategy\"}),\" \\u5BF9\\u8C61\\u7684\\u5F15\\u7528\\uFF0C\\u5E76\\u4F7F\\u7528 \",(0,t.jsx)(n.code,{children:\"ConcreteStrategy\"}),\" \\u5BF9\\u8C61\\u8FDB\\u884C\\u914D\\u7F6E\\u3002\"]}),`\n`,(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:\"Strategy\"}),\": \\u6240\\u6709\\u652F\\u6301\\u7684\\u7B97\\u6CD5\\u901A\\u7528\\u7684\\u63A5\\u53E3\\u3002\",(0,t.jsx)(n.code,{children:\"Context\"}),\" \\u4F7F\\u7528\\u6B64\\u63A5\\u53E3\\u6765\\u8C03\\u7528\\u7531 \",(0,t.jsx)(n.code,{children:\"ConcreteStrategy\"}),\" \\u5B9A\\u4E49\\u7684\\u7B97\\u6CD5\\u3002\"]}),`\n`,(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:\"ConcreteStrategy\"}),\": \\u5B9E\\u73B0 \",(0,t.jsx)(n.code,{children:\"Strategy\"}),\" \\u63A5\\u53E3\\u4EE5\\u63D0\\u4F9B\\u7279\\u5B9A\\u7684\\u7B97\\u6CD5\\u3002\"]}),`\n`]}),`\n`,(0,t.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,t.jsx)(n.p,{children:\"\\u8003\\u8651\\u4E00\\u4E2A\\u573A\\u666F\\uFF0C\\u60A8\\u6709\\u4E0D\\u540C\\u7684\\u6392\\u5E8F\\u7B97\\u6CD5\\uFF0C\\u5E76\\u4E14\\u60A8\\u5E0C\\u671B\\u5728\\u5B83\\u4EEC\\u4E4B\\u95F4\\u5207\\u6362\\uFF0C\\u800C\\u65E0\\u9700\\u66F4\\u6539\\u5BA2\\u6237\\u7AEF\\u4EE3\\u7801\\u3002\"}),`\n`,(0,t.jsx)(n.pre,{live:!0,children:(0,t.jsx)(n.code,{className:\"language-js\",children:`// Strategy interface\nclass Strategy {\n  doAlgorithm(data) {\n    throw new Error('This method should be overridden!');\n  }\n}\n\n// ConcreteStrategyA\nclass ConcreteStrategyA extends Strategy {\n  doAlgorithm(data) {\n    return data.sort((a, b) => a - b); // Example: ascending sort\n  }\n}\n\n// ConcreteStrategyB\nclass ConcreteStrategyB extends Strategy {\n  doAlgorithm(data) {\n    return data.sort((a, b) => b - a); // Example: descending sort\n  }\n}\n\n// Context\nclass Context {\n  constructor(strategy) {\n    this.strategy = strategy;\n  }\n\n  setStrategy(strategy) {\n    this.strategy = strategy;\n  }\n\n  executeStrategy(data) {\n    return this.strategy.doAlgorithm(data);\n  }\n}\n\n// Usage\nconst data = [3, 1, 4, 1, 5, 9];\nconst context = new Context(new ConcreteStrategyA());\nconsole.log(context.executeStrategy([...data])); // Output: [1, 1, 3, 4, 5, 9]\n\ncontext.setStrategy(new ConcreteStrategyB());\nconsole.log(context.executeStrategy([...data])); // Output: [9, 5, 4, 3, 1, 1]\n`})}),`\n`,(0,t.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,t.jsxs)(n.ul,{children:[`\n`,(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:\"\\u7075\\u6D3B\\u6027\"}),\"\\uFF1A\\u60A8\\u53EF\\u4EE5\\u5728\\u8FD0\\u884C\\u65F6\\u66F4\\u6539\\u7B97\\u6CD5\\u3002\"]}),`\n`,(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:\"\\u53EF\\u7EF4\\u62A4\\u6027\"}),\"\\uFF1A\\u6DFB\\u52A0\\u65B0\\u7684\\u7B56\\u7565\\u4E0D\\u4F1A\\u5F71\\u54CD\\u73B0\\u6709\\u4EE3\\u7801\\u3002\"]}),`\n`,(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:\"\\u5C01\\u88C5\"}),\"\\uFF1A\\u6BCF\\u4E2A\\u7B97\\u6CD5\\u90FD\\u5C01\\u88C5\\u5728\\u81EA\\u5DF1\\u7684\\u7C7B\\u4E2D\\u3002\"]}),`\n`]}),`\n`,(0,t.jsx)(n.h3,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,t.jsxs)(n.ul,{children:[`\n`,(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:\"\\u5F00\\u9500\"}),\"\\uFF1A\\u589E\\u52A0\\u4E86\\u7C7B\\u548C\\u5BF9\\u8C61\\u7684\\u6570\\u91CF\\u3002\"]}),`\n`,(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:\"\\u590D\\u6742\\u6027\"}),\"\\uFF1A\\u5982\\u679C\\u4F7F\\u7528\\u4E0D\\u5F53\\uFF0C\\u4F1A\\u4F7F\\u7CFB\\u7EDF\\u66F4\\u52A0\\u590D\\u6742\\u3002\"]}),`\n`]}),`\n`,(0,t.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,t.jsxs)(n.ul,{children:[`\n`,(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Strategy_pattern\",children:\"\\u7EF4\\u57FA\\u767E\\u79D1\\u4E0A\\u7684\\u7B56\\u7565\\u6A21\\u5F0F\"})}),`\n`,(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:\"https://refactoring.guru/design-patterns/strategy\",children:\"Refactoring Guru: \\u7B56\\u7565\\u6A21\\u5F0F\"})}),`\n`,(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\",children:\"MDN Web Docs: JavaScript \\u7C7B\"})}),`\n`]})]})}function f(e={}){let{wrapper:n}=e.components||{};return n?(0,t.jsx)(n,Object.assign({},e,{children:(0,t.jsx)(d,e)})):d(e)}var w=f;return C(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var g=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var S=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),p=(e,n)=>{for(var r in n)o(e,r,{get:n[r],enumerable:!0})},l=(e,n,r,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let a of y(n))!x.call(e,a)&&a!==r&&o(e,a,{get:()=>n[a],enumerable:!(c=u(n,a))||c.enumerable});return e};var C=(e,n,r)=>(r=e!=null?g(m(e)):{},l(n||!e||!e.__esModule?o(r,\"default\",{value:e,enumerable:!0}):r,e)),A=e=>l(o({},\"__esModule\",{value:!0}),e);var s=S((b,i)=>{i.exports=_jsx_runtime});var w={};p(w,{default:()=>h,frontmatter:()=>f});var t=C(s()),f={title:\"\\u89E3\\u91CA\\u7B56\\u7565\\u6A21\\u5F0F\\u7684\\u6982\\u5FF5\"};function d(e){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(n.p,{children:\"\\u7B56\\u7565\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u884C\\u4E3A\\u578B\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5B83\\u5141\\u8BB8\\u60A8\\u5B9A\\u4E49\\u4E00\\u7CFB\\u5217\\u7B97\\u6CD5\\uFF0C\\u5C06\\u6BCF\\u4E2A\\u7B97\\u6CD5\\u5C01\\u88C5\\u6210\\u4E00\\u4E2A\\u5355\\u72EC\\u7684\\u7C7B\\uFF0C\\u5E76\\u4F7F\\u5B83\\u4EEC\\u53EF\\u4EE5\\u4E92\\u6362\\u3002\\u8FD9\\u79CD\\u6A21\\u5F0F\\u4F7F\\u7B97\\u6CD5\\u53EF\\u4EE5\\u72EC\\u7ACB\\u4E8E\\u4F7F\\u7528\\u5B83\\u7684\\u5BA2\\u6237\\u7AEF\\u800C\\u53D8\\u5316\\u3002\\u4F8B\\u5982\\uFF0C\\u5982\\u679C\\u60A8\\u6709\\u4E0D\\u540C\\u7684\\u6392\\u5E8F\\u7B97\\u6CD5\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C06\\u6BCF\\u4E2A\\u7B97\\u6CD5\\u5B9A\\u4E49\\u4E3A\\u4E00\\u4E2A\\u7B56\\u7565\\uFF0C\\u5E76\\u5728\\u5B83\\u4EEC\\u4E4B\\u95F4\\u5207\\u6362\\uFF0C\\u800C\\u65E0\\u9700\\u66F4\\u6539\\u5BA2\\u6237\\u7AEF\\u4EE3\\u7801\\u3002\"}),`\n`,(0,t.jsx)(n.pre,{live:!0,children:(0,t.jsx)(n.code,{className:\"language-js\",children:`class Context {\n  constructor(strategy) {\n    this.strategy = strategy;\n  }\n\n  executeStrategy(data) {\n    return this.strategy.doAlgorithm(data);\n  }\n}\n\nclass ConcreteStrategyA {\n  doAlgorithm(data) {\n    // Implementation of algorithm A\n    return 'Algorithm A was run on ' + data;\n  }\n}\n\nclass ConcreteStrategyB {\n  doAlgorithm(data) {\n    // Implementation of algorithm B\n    return 'Algorithm B was run on ' + data;\n  }\n}\n\n// Usage\nconst context = new Context(new ConcreteStrategyA());\ncontext.executeStrategy('someData'); // Output: Algorithm A was run on someData\n`})}),`\n`,(0,t.jsx)(n.hr,{}),`\n`,(0,t.jsx)(n.h2,{children:\"\\u7B56\\u7565\\u6A21\\u5F0F\"}),`\n`,(0,t.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,t.jsx)(n.p,{children:\"\\u7B56\\u7565\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u884C\\u4E3A\\u578B\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5B83\\u5141\\u8BB8\\u5728\\u8FD0\\u884C\\u65F6\\u9009\\u62E9\\u7B97\\u6CD5\\u7684\\u884C\\u4E3A\\u3002\\u5B83\\u5B9A\\u4E49\\u4E86\\u4E00\\u7CFB\\u5217\\u7B97\\u6CD5\\uFF0C\\u5C01\\u88C5\\u4E86\\u6BCF\\u4E00\\u4E2A\\u7B97\\u6CD5\\uFF0C\\u5E76\\u4F7F\\u5B83\\u4EEC\\u53EF\\u4EE5\\u4E92\\u6362\\u3002\\u8FD9\\u79CD\\u6A21\\u5F0F\\u5141\\u8BB8\\u7B97\\u6CD5\\u72EC\\u7ACB\\u4E8E\\u4F7F\\u7528\\u5B83\\u7684\\u5BA2\\u6237\\u7AEF\\u800C\\u53D8\\u5316\\u3002\"}),`\n`,(0,t.jsx)(n.h3,{children:\"\\u7EC4\\u4EF6\"}),`\n`,(0,t.jsxs)(n.ol,{children:[`\n`,(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:\"Context\"}),\": \\u7EF4\\u62A4\\u5BF9 \",(0,t.jsx)(n.code,{children:\"Strategy\"}),\" \\u5BF9\\u8C61\\u7684\\u5F15\\u7528\\uFF0C\\u5E76\\u4F7F\\u7528 \",(0,t.jsx)(n.code,{children:\"ConcreteStrategy\"}),\" \\u5BF9\\u8C61\\u8FDB\\u884C\\u914D\\u7F6E\\u3002\"]}),`\n`,(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:\"Strategy\"}),\": \\u6240\\u6709\\u652F\\u6301\\u7684\\u7B97\\u6CD5\\u901A\\u7528\\u7684\\u63A5\\u53E3\\u3002\",(0,t.jsx)(n.code,{children:\"Context\"}),\" \\u4F7F\\u7528\\u6B64\\u63A5\\u53E3\\u6765\\u8C03\\u7528\\u7531 \",(0,t.jsx)(n.code,{children:\"ConcreteStrategy\"}),\" \\u5B9A\\u4E49\\u7684\\u7B97\\u6CD5\\u3002\"]}),`\n`,(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:\"ConcreteStrategy\"}),\": \\u5B9E\\u73B0 \",(0,t.jsx)(n.code,{children:\"Strategy\"}),\" \\u63A5\\u53E3\\u4EE5\\u63D0\\u4F9B\\u7279\\u5B9A\\u7684\\u7B97\\u6CD5\\u3002\"]}),`\n`]}),`\n`,(0,t.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,t.jsx)(n.p,{children:\"\\u8003\\u8651\\u4E00\\u4E2A\\u573A\\u666F\\uFF0C\\u60A8\\u6709\\u4E0D\\u540C\\u7684\\u6392\\u5E8F\\u7B97\\u6CD5\\uFF0C\\u5E76\\u4E14\\u60A8\\u5E0C\\u671B\\u5728\\u5B83\\u4EEC\\u4E4B\\u95F4\\u5207\\u6362\\uFF0C\\u800C\\u65E0\\u9700\\u66F4\\u6539\\u5BA2\\u6237\\u7AEF\\u4EE3\\u7801\\u3002\"}),`\n`,(0,t.jsx)(n.pre,{live:!0,children:(0,t.jsx)(n.code,{className:\"language-js\",children:`// Strategy interface\nclass Strategy {\n  doAlgorithm(data) {\n    throw new Error('This method should be overridden!');\n  }\n}\n\n// ConcreteStrategyA\nclass ConcreteStrategyA extends Strategy {\n  doAlgorithm(data) {\n    return data.sort((a, b) => a - b); // Example: ascending sort\n  }\n}\n\n// ConcreteStrategyB\nclass ConcreteStrategyB extends Strategy {\n  doAlgorithm(data) {\n    return data.sort((a, b) => b - a); // Example: descending sort\n  }\n}\n\n// Context\nclass Context {\n  constructor(strategy) {\n    this.strategy = strategy;\n  }\n\n  setStrategy(strategy) {\n    this.strategy = strategy;\n  }\n\n  executeStrategy(data) {\n    return this.strategy.doAlgorithm(data);\n  }\n}\n\n// Usage\nconst data = [3, 1, 4, 1, 5, 9];\nconst context = new Context(new ConcreteStrategyA());\nconsole.log(context.executeStrategy([...data])); // Output: [1, 1, 3, 4, 5, 9]\n\ncontext.setStrategy(new ConcreteStrategyB());\nconsole.log(context.executeStrategy([...data])); // Output: [9, 5, 4, 3, 1, 1]\n`})}),`\n`,(0,t.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,t.jsxs)(n.ul,{children:[`\n`,(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:\"\\u7075\\u6D3B\\u6027\"}),\"\\uFF1A\\u60A8\\u53EF\\u4EE5\\u5728\\u8FD0\\u884C\\u65F6\\u66F4\\u6539\\u7B97\\u6CD5\\u3002\"]}),`\n`,(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:\"\\u53EF\\u7EF4\\u62A4\\u6027\"}),\"\\uFF1A\\u6DFB\\u52A0\\u65B0\\u7684\\u7B56\\u7565\\u4E0D\\u4F1A\\u5F71\\u54CD\\u73B0\\u6709\\u4EE3\\u7801\\u3002\"]}),`\n`,(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:\"\\u5C01\\u88C5\"}),\"\\uFF1A\\u6BCF\\u4E2A\\u7B97\\u6CD5\\u90FD\\u5C01\\u88C5\\u5728\\u81EA\\u5DF1\\u7684\\u7C7B\\u4E2D\\u3002\"]}),`\n`]}),`\n`,(0,t.jsx)(n.h3,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,t.jsxs)(n.ul,{children:[`\n`,(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:\"\\u5F00\\u9500\"}),\"\\uFF1A\\u589E\\u52A0\\u4E86\\u7C7B\\u548C\\u5BF9\\u8C61\\u7684\\u6570\\u91CF\\u3002\"]}),`\n`,(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:\"\\u590D\\u6742\\u6027\"}),\"\\uFF1A\\u5982\\u679C\\u4F7F\\u7528\\u4E0D\\u5F53\\uFF0C\\u4F1A\\u4F7F\\u7CFB\\u7EDF\\u66F4\\u52A0\\u590D\\u6742\\u3002\"]}),`\n`]}),`\n`,(0,t.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,t.jsxs)(n.ul,{children:[`\n`,(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Strategy_pattern\",children:\"\\u7EF4\\u57FA\\u767E\\u79D1\\u4E0A\\u7684\\u7B56\\u7565\\u6A21\\u5F0F\"})}),`\n`,(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:\"https://refactoring.guru/design-patterns/strategy\",children:\"Refactoring Guru: \\u7B56\\u7565\\u6A21\\u5F0F\"})}),`\n`,(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\",children:\"MDN Web Docs: JavaScript \\u7C7B\"})}),`\n`]})]})}function h(e={}){let{wrapper:n}=e.components||{};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}return A(w);})();\n;return Component;"
 }
\ No newline at end of file
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 29073d3fc..19e3810fe 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-the-web-socket-api/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var s in e)r(t,s,{get:e[s],enumerable:!0})},c=(t,e,s,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!g.call(t,o)&&o!==s&&r(t,o,{get:()=>e[o],enumerable:!(i=p(e,o))||i.enumerable});return t};var b=(t,e,s)=>(s=t!=null?d(u(t)):{},c(e||!t||!t.__esModule?r(s,\"default\",{value:t,enumerable:!0}):s,t)),f=t=>c(r({},\"__esModule\",{value:!0}),t);var l=v((P,a)=>{a.exports=_jsx_runtime});var x={};w(x,{default:()=>W,frontmatter:()=>k});var n=b(l()),k={title:\"Explain the concept of the Web Socket API\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",ol:\"ol\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"The WebSocket API provides a way to open a persistent connection between a client and a server, allowing for real-time, two-way communication. Unlike HTTP, which is request-response based, WebSocket enables full-duplex communication, meaning both the client and server can send and receive messages independently. This is particularly useful for applications like chat apps, live updates, and online gaming.\"}),`\n`,(0,n.jsx)(e.p,{children:\"The following example uses Postman's WebSocket echo service to demonstrate how web sockets work.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Postman's echo server that will echo back messages you send\nconst socket = new WebSocket('wss://ws.postman-echo.com/raw');\n\n// Event listener for when the connection is open\nsocket.addEventListener('open', function (event) {\n  socket.send('Hello Server!'); // Sends the message to the Postman WebSocket server\n});\n\n// Event listener for when a message is received from the server\nsocket.addEventListener('message', function (event) {\n  console.log('Message from server ', event.data);\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is the WebSocket API?\"}),`\n`,(0,n.jsx)(e.p,{children:\"The WebSocket API is a technology that provides a way to establish a persistent, low-latency, full-duplex communication channel between a client (usually a web browser) and a server. This is different from the traditional HTTP request-response model, which is stateless and requires a new connection for each request.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Key features\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Full-duplex communication\"}),\": Both the client and server can send and receive messages independently.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Low latency\"}),\": The persistent connection reduces the overhead of establishing a new connection for each message.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Real-time updates\"}),\": Ideal for applications that require real-time data, such as chat applications, live sports updates, and online gaming.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"How it works\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Connection establishment\"}),\": The client initiates a WebSocket connection by sending a handshake request to the server.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Handshake response\"}),\": The server responds with a handshake response, and if successful, the connection is established.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Data exchange\"}),\": Both the client and server can now send and receive messages independently over the established connection.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Connection closure\"}),\": Either the client or server can close the connection when it is no longer needed.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example usage\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here is a basic example of how to use the WebSocket API in JavaScript, using Postman's WebSocket Echo Service.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Postman's echo server that will echo back messages you send\nconst socket = new WebSocket('wss://ws.postman-echo.com/raw');\n\n// Event listener for when the connection is open\nsocket.addEventListener('open', function (event) {\n  console.log('Connection opened');\n  socket.send('Hello Server!'); // Sends the message to the Postman WebSocket server\n});\n\n// Event listener for when a message is received from the server\nsocket.addEventListener('message', function (event) {\n  console.log('Message from server ', event.data);\n});\n\n// Event listener for when the connection is closed\nsocket.addEventListener('close', function (event) {\n  console.log('Connection closed');\n});\n\n// Event listener for when an error occurs\nsocket.addEventListener('error', function (event) {\n  console.error('WebSocket error: ', event);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Chat applications\"}),\": Real-time messaging between users.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Live updates\"}),\": Stock prices, sports scores, or news updates.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Online gaming\"}),\": Real-time interaction between players.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Collaborative tools\"}),\": Real-time document editing or whiteboarding.\"]}),`\n`]}),`\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/Web/API/WebSocket\",children:\"MDN WebSocket API documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.websocket.org/\",children:\"WebSocket.org\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications\",children:\"Introduction to WebSockets\"})}),`\n`]})]})}function S(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var W=S;return f(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of u(e))!v.call(t,s)&&s!==o&&r(t,s,{get:()=>e[s],enumerable:!(i=m(e,s))||i.enumerable});return t};var f=(t,e,o)=>(o=t!=null?p(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 l=w((y,a)=>{a.exports=_jsx_runtime});var W={};b(W,{default:()=>d,frontmatter:()=>S});var n=f(l()),S={title:\"Explain the concept of the Web Socket API\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"The WebSocket API provides a way to open a persistent connection between a client and a server, allowing for real-time, two-way communication. Unlike HTTP, which is request-response based, WebSocket enables full-duplex communication, meaning both the client and server can send and receive messages independently. This is particularly useful for applications like chat apps, live updates, and online gaming.\"}),`\n`,(0,n.jsx)(e.p,{children:\"The following example uses Postman's WebSocket echo service to demonstrate how web sockets work.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Postman's echo server that will echo back messages you send\nconst socket = new WebSocket('wss://ws.postman-echo.com/raw');\n\n// Event listener for when the connection is open\nsocket.addEventListener('open', function (event) {\n  socket.send('Hello Server!'); // Sends the message to the Postman WebSocket server\n});\n\n// Event listener for when a message is received from the server\nsocket.addEventListener('message', function (event) {\n  console.log('Message from server ', event.data);\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is the WebSocket API?\"}),`\n`,(0,n.jsx)(e.p,{children:\"The WebSocket API is a technology that provides a way to establish a persistent, low-latency, full-duplex communication channel between a client (usually a web browser) and a server. This is different from the traditional HTTP request-response model, which is stateless and requires a new connection for each request.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Key features\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Full-duplex communication\"}),\": Both the client and server can send and receive messages independently.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Low latency\"}),\": The persistent connection reduces the overhead of establishing a new connection for each message.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Real-time updates\"}),\": Ideal for applications that require real-time data, such as chat applications, live sports updates, and online gaming.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"How it works\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Connection establishment\"}),\": The client initiates a WebSocket connection by sending a handshake request to the server.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Handshake response\"}),\": The server responds with a handshake response, and if successful, the connection is established.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Data exchange\"}),\": Both the client and server can now send and receive messages independently over the established connection.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Connection closure\"}),\": Either the client or server can close the connection when it is no longer needed.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example usage\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here is a basic example of how to use the WebSocket API in JavaScript, using Postman's WebSocket Echo Service.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Postman's echo server that will echo back messages you send\nconst socket = new WebSocket('wss://ws.postman-echo.com/raw');\n\n// Event listener for when the connection is open\nsocket.addEventListener('open', function (event) {\n  console.log('Connection opened');\n  socket.send('Hello Server!'); // Sends the message to the Postman WebSocket server\n});\n\n// Event listener for when a message is received from the server\nsocket.addEventListener('message', function (event) {\n  console.log('Message from server ', event.data);\n});\n\n// Event listener for when the connection is closed\nsocket.addEventListener('close', function (event) {\n  console.log('Connection closed');\n});\n\n// Event listener for when an error occurs\nsocket.addEventListener('error', function (event) {\n  console.error('WebSocket error: ', event);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Chat applications\"}),\": Real-time messaging between users.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Live updates\"}),\": Stock prices, sports scores, or news updates.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Online gaming\"}),\": Real-time interaction between players.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Collaborative tools\"}),\": Real-time document editing or whiteboarding.\"]}),`\n`]}),`\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/Web/API/WebSocket\",children:\"MDN WebSocket API documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.websocket.org/\",children:\"WebSocket.org\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications\",children:\"Introduction to WebSockets\"})}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return k(W);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-web-socket-api/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-web-socket-api/zh-CN.json
index 85acab7e9..5db22bd7a 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-web-socket-api/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-web-socket-api/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-the-web-socket-api/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),S=(t,e)=>{for(var o in e)c(t,o,{get:e[o],enumerable:!0})},i=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of v(e))!k.call(t,r)&&r!==o&&c(t,r,{get:()=>e[r],enumerable:!(s=g(e,r))||s.enumerable});return t};var p=(t,e,o)=>(o=t!=null?a(m(t)):{},i(e||!t||!t.__esModule?c(o,\"default\",{value:t,enumerable:!0}):o,t)),u=t=>i(c({},\"__esModule\",{value:!0}),t);var h=b((_,l)=>{l.exports=_jsx_runtime});var P={};S(P,{default:()=>w,frontmatter:()=>W});var n=p(h()),W={title:\"\\u89E3\\u91CA Web Socket API \\u7684\\u6982\\u5FF5\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",ol:\"ol\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"WebSocket API \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u5728\\u5BA2\\u6237\\u7AEF\\u548C\\u670D\\u52A1\\u5668\\u4E4B\\u95F4\\u6253\\u5F00\\u6301\\u4E45\\u8FDE\\u63A5\\u7684\\u65B9\\u5F0F\\uFF0C\\u5141\\u8BB8\\u8FDB\\u884C\\u5B9E\\u65F6\\u7684\\u53CC\\u5411\\u901A\\u4FE1\\u3002\\u4E0E\\u57FA\\u4E8E\\u8BF7\\u6C42-\\u54CD\\u5E94\\u7684 HTTP \\u4E0D\\u540C\\uFF0CWebSocket \\u5B9E\\u73B0\\u4E86\\u5168\\u53CC\\u5DE5\\u901A\\u4FE1\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5BA2\\u6237\\u7AEF\\u548C\\u670D\\u52A1\\u5668\\u90FD\\u53EF\\u4EE5\\u72EC\\u7ACB\\u5730\\u53D1\\u9001\\u548C\\u63A5\\u6536\\u6D88\\u606F\\u3002\\u8FD9\\u5BF9\\u4E8E\\u804A\\u5929\\u5E94\\u7528\\u7A0B\\u5E8F\\u3001\\u5B9E\\u65F6\\u66F4\\u65B0\\u548C\\u5728\\u7EBF\\u6E38\\u620F\\u7B49\\u5E94\\u7528\\u7A0B\\u5E8F\\u7279\\u522B\\u6709\\u7528\\u3002\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u793A\\u4F8B\\u4F7F\\u7528 Postman \\u7684 WebSocket \\u56DE\\u663E\\u670D\\u52A1\\u6765\\u6F14\\u793A WebSockets \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Postman's echo server that will echo back messages you send\nconst socket = new WebSocket('wss://ws.postman-echo.com/raw');\n\n// Event listener for when the connection is open\nsocket.addEventListener('open', function (event) {\n  socket.send('Hello Server!'); // Sends the message to the Postman WebSocket server\n});\n\n// Event listener for when a message is received from the server\nsocket.addEventListener('message', function (event) {\n  console.log('Message from server ', event.data);\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F WebSocket API\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"WebSocket API \\u662F\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u5728\\u5BA2\\u6237\\u7AEF\\uFF08\\u901A\\u5E38\\u662F Web \\u6D4F\\u89C8\\u5668\\uFF09\\u548C\\u670D\\u52A1\\u5668\\u4E4B\\u95F4\\u5EFA\\u7ACB\\u6301\\u4E45\\u7684\\u3001\\u4F4E\\u5EF6\\u8FDF\\u7684\\u3001\\u5168\\u53CC\\u5DE5\\u901A\\u4FE1\\u901A\\u9053\\u7684\\u65B9\\u5F0F\\u3002\\u8FD9\\u4E0E\\u4F20\\u7EDF\\u7684 HTTP \\u8BF7\\u6C42-\\u54CD\\u5E94\\u6A21\\u578B\\u4E0D\\u540C\\uFF0C\\u540E\\u8005\\u662F\\u65E0\\u72B6\\u6001\\u7684\\uFF0C\\u5E76\\u4E14\\u9700\\u8981\\u4E3A\\u6BCF\\u4E2A\\u8BF7\\u6C42\\u5EFA\\u7ACB\\u65B0\\u7684\\u8FDE\\u63A5\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5173\\u952E\\u7279\\u6027\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5168\\u53CC\\u5DE5\\u901A\\u4FE1\"}),\"\\uFF1A\\u5BA2\\u6237\\u7AEF\\u548C\\u670D\\u52A1\\u5668\\u90FD\\u53EF\\u4EE5\\u72EC\\u7ACB\\u5730\\u53D1\\u9001\\u548C\\u63A5\\u6536\\u6D88\\u606F\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4F4E\\u5EF6\\u8FDF\"}),\"\\uFF1A\\u6301\\u4E45\\u8FDE\\u63A5\\u51CF\\u5C11\\u4E86\\u4E3A\\u6BCF\\u6761\\u6D88\\u606F\\u5EFA\\u7ACB\\u65B0\\u8FDE\\u63A5\\u7684\\u5F00\\u9500\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5B9E\\u65F6\\u66F4\\u65B0\"}),\"\\uFF1A\\u975E\\u5E38\\u9002\\u5408\\u9700\\u8981\\u5B9E\\u65F6\\u6570\\u636E\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u4F8B\\u5982\\u804A\\u5929\\u5E94\\u7528\\u7A0B\\u5E8F\\u3001\\u5B9E\\u65F6\\u4F53\\u80B2\\u66F4\\u65B0\\u548C\\u5728\\u7EBF\\u6E38\\u620F\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B83\\u662F\\u5982\\u4F55\\u5DE5\\u4F5C\\u7684\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8FDE\\u63A5\\u5EFA\\u7ACB\"}),\"\\uFF1A\\u5BA2\\u6237\\u7AEF\\u901A\\u8FC7\\u5411\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u63E1\\u624B\\u8BF7\\u6C42\\u6765\\u542F\\u52A8 WebSocket \\u8FDE\\u63A5\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u63E1\\u624B\\u54CD\\u5E94\"}),\"\\uFF1A\\u670D\\u52A1\\u5668\\u4F7F\\u7528\\u63E1\\u624B\\u54CD\\u5E94\\u8FDB\\u884C\\u54CD\\u5E94\\uFF0C\\u5982\\u679C\\u6210\\u529F\\uFF0C\\u5219\\u5EFA\\u7ACB\\u8FDE\\u63A5\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6570\\u636E\\u4EA4\\u6362\"}),\"\\uFF1A\\u5BA2\\u6237\\u7AEF\\u548C\\u670D\\u52A1\\u5668\\u73B0\\u5728\\u53EF\\u4EE5\\u901A\\u8FC7\\u5DF2\\u5EFA\\u7ACB\\u7684\\u8FDE\\u63A5\\u72EC\\u7ACB\\u5730\\u53D1\\u9001\\u548C\\u63A5\\u6536\\u6D88\\u606F\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8FDE\\u63A5\\u5173\\u95ED\"}),\"\\uFF1A\\u5F53\\u4E0D\\u518D\\u9700\\u8981\\u8FDE\\u63A5\\u65F6\\uFF0C\\u5BA2\\u6237\\u7AEF\\u6216\\u670D\\u52A1\\u5668\\u90FD\\u53EF\\u4EE5\\u5173\\u95ED\\u8FDE\\u63A5\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u5173\\u4E8E\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u4F7F\\u7528 WebSocket API \\u7684\\u57FA\\u672C\\u793A\\u4F8B\\uFF0C\\u4F7F\\u7528 Postman \\u7684 WebSocket Echo Service\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Postman's echo server that will echo back messages you send\nconst socket = new WebSocket('wss://ws.postman-echo.com/raw');\n\n// Event listener for when the connection is open\nsocket.addEventListener('open', function (event) {\n  console.log('Connection opened');\n  socket.send('Hello Server!'); // Sends the message to the Postman WebSocket server\n});\n\n// Event listener for when a message is received from the server\nsocket.addEventListener('message', function (event) {\n  console.log('Message from server ', event.data);\n});\n\n// Event listener for when the connection is closed\nsocket.addEventListener('close', function (event) {\n  console.log('Connection closed');\n});\n\n// Event listener for when an error occurs\nsocket.addEventListener('error', function (event) {\n  console.error('WebSocket error: ', event);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u804A\\u5929\\u5E94\\u7528\\u7A0B\\u5E8F\"}),\"\\uFF1A\\u7528\\u6237\\u4E4B\\u95F4\\u7684\\u5B9E\\u65F6\\u6D88\\u606F\\u4F20\\u9012\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5B9E\\u65F6\\u66F4\\u65B0\"}),\"\\uFF1A\\u80A1\\u7968\\u4EF7\\u683C\\u3001\\u4F53\\u80B2\\u6BD4\\u5206\\u6216\\u65B0\\u95FB\\u66F4\\u65B0\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5728\\u7EBF\\u6E38\\u620F\"}),\"\\uFF1A\\u73A9\\u5BB6\\u4E4B\\u95F4\\u7684\\u5B9E\\u65F6\\u4E92\\u52A8\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u534F\\u4F5C\\u5DE5\\u5177\"}),\"\\uFF1A\\u5B9E\\u65F6\\u6587\\u6863\\u7F16\\u8F91\\u6216\\u767D\\u677F\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/WebSocket\",children:\"MDN WebSocket API \\u6587\\u6863\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.websocket.org/\",children:\"WebSocket.org\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications\",children:\"WebSockets \\u7B80\\u4ECB\"})}),`\n`]})]})}function f(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var w=f;return u(P);})();\n;return Component;"
+  "solution": "var Component=(()=>{var v=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var p=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),b=(o,e)=>{for(var t in e)c(o,t,{get:e[t],enumerable:!0})},l=(o,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!S.call(o,r)&&r!==t&&c(o,r,{get:()=>e[r],enumerable:!(s=g(e,r))||s.enumerable});return o};var u=(o,e,t)=>(t=o!=null?v(k(o)):{},l(e||!o||!o.__esModule?c(t,\"default\",{value:o,enumerable:!0}):t,o)),W=o=>l(c({},\"__esModule\",{value:!0}),o);var h=p((E,i)=>{i.exports=_jsx_runtime});var w={};b(w,{default:()=>a,frontmatter:()=>f});var n=u(h()),f={title:\"\\u89E3\\u91CA Web Socket API \\u7684\\u6982\\u5FF5\"};function d(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"WebSocket API \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u5728\\u5BA2\\u6237\\u7AEF\\u548C\\u670D\\u52A1\\u5668\\u4E4B\\u95F4\\u6253\\u5F00\\u6301\\u4E45\\u8FDE\\u63A5\\u7684\\u65B9\\u5F0F\\uFF0C\\u5141\\u8BB8\\u8FDB\\u884C\\u5B9E\\u65F6\\u7684\\u53CC\\u5411\\u901A\\u4FE1\\u3002\\u4E0E\\u57FA\\u4E8E\\u8BF7\\u6C42-\\u54CD\\u5E94\\u7684 HTTP \\u4E0D\\u540C\\uFF0CWebSocket \\u5B9E\\u73B0\\u4E86\\u5168\\u53CC\\u5DE5\\u901A\\u4FE1\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5BA2\\u6237\\u7AEF\\u548C\\u670D\\u52A1\\u5668\\u90FD\\u53EF\\u4EE5\\u72EC\\u7ACB\\u5730\\u53D1\\u9001\\u548C\\u63A5\\u6536\\u6D88\\u606F\\u3002\\u8FD9\\u5BF9\\u4E8E\\u804A\\u5929\\u5E94\\u7528\\u7A0B\\u5E8F\\u3001\\u5B9E\\u65F6\\u66F4\\u65B0\\u548C\\u5728\\u7EBF\\u6E38\\u620F\\u7B49\\u5E94\\u7528\\u7A0B\\u5E8F\\u7279\\u522B\\u6709\\u7528\\u3002\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u793A\\u4F8B\\u4F7F\\u7528 Postman \\u7684 WebSocket \\u56DE\\u663E\\u670D\\u52A1\\u6765\\u6F14\\u793A WebSockets \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Postman's echo server that will echo back messages you send\nconst socket = new WebSocket('wss://ws.postman-echo.com/raw');\n\n// Event listener for when the connection is open\nsocket.addEventListener('open', function (event) {\n  socket.send('Hello Server!'); // Sends the message to the Postman WebSocket server\n});\n\n// Event listener for when a message is received from the server\nsocket.addEventListener('message', function (event) {\n  console.log('Message from server ', event.data);\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F WebSocket API\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"WebSocket API \\u662F\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u5728\\u5BA2\\u6237\\u7AEF\\uFF08\\u901A\\u5E38\\u662F Web \\u6D4F\\u89C8\\u5668\\uFF09\\u548C\\u670D\\u52A1\\u5668\\u4E4B\\u95F4\\u5EFA\\u7ACB\\u6301\\u4E45\\u7684\\u3001\\u4F4E\\u5EF6\\u8FDF\\u7684\\u3001\\u5168\\u53CC\\u5DE5\\u901A\\u4FE1\\u901A\\u9053\\u7684\\u65B9\\u5F0F\\u3002\\u8FD9\\u4E0E\\u4F20\\u7EDF\\u7684 HTTP \\u8BF7\\u6C42-\\u54CD\\u5E94\\u6A21\\u578B\\u4E0D\\u540C\\uFF0C\\u540E\\u8005\\u662F\\u65E0\\u72B6\\u6001\\u7684\\uFF0C\\u5E76\\u4E14\\u9700\\u8981\\u4E3A\\u6BCF\\u4E2A\\u8BF7\\u6C42\\u5EFA\\u7ACB\\u65B0\\u7684\\u8FDE\\u63A5\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5173\\u952E\\u7279\\u6027\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5168\\u53CC\\u5DE5\\u901A\\u4FE1\"}),\"\\uFF1A\\u5BA2\\u6237\\u7AEF\\u548C\\u670D\\u52A1\\u5668\\u90FD\\u53EF\\u4EE5\\u72EC\\u7ACB\\u5730\\u53D1\\u9001\\u548C\\u63A5\\u6536\\u6D88\\u606F\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4F4E\\u5EF6\\u8FDF\"}),\"\\uFF1A\\u6301\\u4E45\\u8FDE\\u63A5\\u51CF\\u5C11\\u4E86\\u4E3A\\u6BCF\\u6761\\u6D88\\u606F\\u5EFA\\u7ACB\\u65B0\\u8FDE\\u63A5\\u7684\\u5F00\\u9500\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5B9E\\u65F6\\u66F4\\u65B0\"}),\"\\uFF1A\\u975E\\u5E38\\u9002\\u5408\\u9700\\u8981\\u5B9E\\u65F6\\u6570\\u636E\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u4F8B\\u5982\\u804A\\u5929\\u5E94\\u7528\\u7A0B\\u5E8F\\u3001\\u5B9E\\u65F6\\u4F53\\u80B2\\u66F4\\u65B0\\u548C\\u5728\\u7EBF\\u6E38\\u620F\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B83\\u662F\\u5982\\u4F55\\u5DE5\\u4F5C\\u7684\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8FDE\\u63A5\\u5EFA\\u7ACB\"}),\"\\uFF1A\\u5BA2\\u6237\\u7AEF\\u901A\\u8FC7\\u5411\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u63E1\\u624B\\u8BF7\\u6C42\\u6765\\u542F\\u52A8 WebSocket \\u8FDE\\u63A5\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u63E1\\u624B\\u54CD\\u5E94\"}),\"\\uFF1A\\u670D\\u52A1\\u5668\\u4F7F\\u7528\\u63E1\\u624B\\u54CD\\u5E94\\u8FDB\\u884C\\u54CD\\u5E94\\uFF0C\\u5982\\u679C\\u6210\\u529F\\uFF0C\\u5219\\u5EFA\\u7ACB\\u8FDE\\u63A5\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6570\\u636E\\u4EA4\\u6362\"}),\"\\uFF1A\\u5BA2\\u6237\\u7AEF\\u548C\\u670D\\u52A1\\u5668\\u73B0\\u5728\\u53EF\\u4EE5\\u901A\\u8FC7\\u5DF2\\u5EFA\\u7ACB\\u7684\\u8FDE\\u63A5\\u72EC\\u7ACB\\u5730\\u53D1\\u9001\\u548C\\u63A5\\u6536\\u6D88\\u606F\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8FDE\\u63A5\\u5173\\u95ED\"}),\"\\uFF1A\\u5F53\\u4E0D\\u518D\\u9700\\u8981\\u8FDE\\u63A5\\u65F6\\uFF0C\\u5BA2\\u6237\\u7AEF\\u6216\\u670D\\u52A1\\u5668\\u90FD\\u53EF\\u4EE5\\u5173\\u95ED\\u8FDE\\u63A5\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u5173\\u4E8E\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u4F7F\\u7528 WebSocket API \\u7684\\u57FA\\u672C\\u793A\\u4F8B\\uFF0C\\u4F7F\\u7528 Postman \\u7684 WebSocket Echo Service\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Postman's echo server that will echo back messages you send\nconst socket = new WebSocket('wss://ws.postman-echo.com/raw');\n\n// Event listener for when the connection is open\nsocket.addEventListener('open', function (event) {\n  console.log('Connection opened');\n  socket.send('Hello Server!'); // Sends the message to the Postman WebSocket server\n});\n\n// Event listener for when a message is received from the server\nsocket.addEventListener('message', function (event) {\n  console.log('Message from server ', event.data);\n});\n\n// Event listener for when the connection is closed\nsocket.addEventListener('close', function (event) {\n  console.log('Connection closed');\n});\n\n// Event listener for when an error occurs\nsocket.addEventListener('error', function (event) {\n  console.error('WebSocket error: ', event);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u804A\\u5929\\u5E94\\u7528\\u7A0B\\u5E8F\"}),\"\\uFF1A\\u7528\\u6237\\u4E4B\\u95F4\\u7684\\u5B9E\\u65F6\\u6D88\\u606F\\u4F20\\u9012\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5B9E\\u65F6\\u66F4\\u65B0\"}),\"\\uFF1A\\u80A1\\u7968\\u4EF7\\u683C\\u3001\\u4F53\\u80B2\\u6BD4\\u5206\\u6216\\u65B0\\u95FB\\u66F4\\u65B0\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5728\\u7EBF\\u6E38\\u620F\"}),\"\\uFF1A\\u73A9\\u5BB6\\u4E4B\\u95F4\\u7684\\u5B9E\\u65F6\\u4E92\\u52A8\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u534F\\u4F5C\\u5DE5\\u5177\"}),\"\\uFF1A\\u5B9E\\u65F6\\u6587\\u6863\\u7F16\\u8F91\\u6216\\u767D\\u677F\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/WebSocket\",children:\"MDN WebSocket API \\u6587\\u6863\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.websocket.org/\",children:\"WebSocket.org\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications\",children:\"WebSockets \\u7B80\\u4ECB\"})}),`\n`]})]})}function a(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(d,{...o})}):d(o)}return W(w);})();\n;return Component;"
 }
\ No newline at end of file
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 ccc96a79a..59b2c363f 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-this-binding-in-event-handlers/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var o in e)c(t,o,{get:e[o],enumerable:!0})},l=(t,e,o,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of b(e))!p.call(t,i)&&i!==o&&c(t,i,{get:()=>e[i],enumerable:!(d=u(e,i))||d.enumerable});return t};var v=(t,e,o)=>(o=t!=null?a(m(t)):{},l(e||!t||!t.__esModule?c(o,\"default\",{value:t,enumerable:!0}):o,t)),y=t=>l(c({},\"__esModule\",{value:!0}),t);var r=f((D,h)=>{h.exports=_jsx_runtime});var k={};g(k,{default:()=>w,frontmatter:()=>j});var n=v(r()),j={title:\"Explain the concept of `this` binding in event handlers\"};function s(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",h4:\"h4\",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:[\"In JavaScript, the \",(0,n.jsx)(e.code,{children:\"this\"}),\" keyword refers to the object that is currently executing the code. In event handlers, \",(0,n.jsx)(e.code,{children:\"this\"}),\" typically refers to the element that triggered the event. However, the value of \",(0,n.jsx)(e.code,{children:\"this\"}),\" can change depending on how the event handler is defined and called. To ensure \",(0,n.jsx)(e.code,{children:\"this\"}),\" refers to the desired object, you can use methods like \",(0,n.jsx)(e.code,{children:\"bind()\"}),\", arrow functions, or assign the context explicitly.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"The concept of \",(0,n.jsx)(e.code,{children:\"this\"}),\" binding in event handlers\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Understanding \",(0,n.jsx)(e.code,{children:\"this\"}),\" in JavaScript\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, the \",(0,n.jsx)(e.code,{children:\"this\"}),\" keyword is a reference to the object that is currently executing the code. The value of \",(0,n.jsx)(e.code,{children:\"this\"}),\" is determined by how a function is called, not where it is defined. This can lead to different values of \",(0,n.jsx)(e.code,{children:\"this\"}),\" in different contexts.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"this\"}),\" in event handlers\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In the context of event handlers, \",(0,n.jsx)(e.code,{children:\"this\"}),\" usually refers to the DOM element that triggered the event. For example:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a button element and append it to the DOM\nconst button = document.createElement('button');\nbutton.id = 'myButton';\ndocument.body.appendChild(button);\n\ndocument.getElementById('myButton').addEventListener('click', function () {\n  console.log(this); // \\`this\\` refers to the 'myButton' element\n});\n\nbutton.click(); // Logs the button element\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"this\"}),\" inside the event handler refers to the button element that was clicked.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Changing the value of \",(0,n.jsx)(e.code,{children:\"this\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"There are several ways to change the value of \",(0,n.jsx)(e.code,{children:\"this\"}),\" in event handlers:\"]}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"bind()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"bind()\"}),\" method creates a new function that, when called, has its \",(0,n.jsx)(e.code,{children:\"this\"}),\" keyword set to the provided value:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a button element and append it to the DOM\nconst button = document.createElement('button');\nbutton.id = 'myButton';\ndocument.body.appendChild(button);\n\nfunction handleClick() {\n  console.log(this); // Logs the object passed to bind()\n}\n\nconst obj = { name: 'MyObject' };\ndocument\n  .getElementById('myButton')\n  .addEventListener('click', handleClick.bind(obj));\n\nbutton.click(); // Logs obj because handleClick was bound to obj using bind()\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"this\"}),\" inside \",(0,n.jsx)(e.code,{children:\"handleClick\"}),\" refers to \",(0,n.jsx)(e.code,{children:\"obj\"}),\".\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Using arrow functions\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Arrow functions do not have their own \",(0,n.jsx)(e.code,{children:\"this\"}),\" context; they inherit \",(0,n.jsx)(e.code,{children:\"this\"}),\" from the surrounding lexical context:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a button element and append it to the DOM\nconst button = document.createElement('button');\nbutton.id = 'myButton';\ndocument.body.appendChild(button);\n\nconst obj = {\n  name: 'MyObject',\n  handleClick: function () {\n    document.getElementById('myButton').addEventListener('click', () => {\n      console.log(this); // Logs obj\n    });\n  },\n};\n\nobj.handleClick();\nbutton.click(); // This will log obj\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"this\"}),\" inside the arrow function refers to \",(0,n.jsx)(e.code,{children:\"obj\"}),\".\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Assigning the context explicitly\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can also assign the context explicitly by using a variable:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a button element and append it to the DOM\nconst button = document.createElement('button');\nbutton.id = 'myButton';\ndocument.body.appendChild(button);\n\nconst obj = {\n  name: 'MyObject',\n  handleClick: function () {\n    const self = this;\n    document.getElementById('myButton').addEventListener('click', function () {\n      console.log(self); // Logs obj\n    });\n  },\n};\n\nobj.handleClick();\nbutton.click(); // This will log obj\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"self\"}),\" is used to capture the value of \",(0,n.jsx)(e.code,{children:\"this\"}),\" from the outer function.\"]}),`\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.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this\",children:[\"MDN Web Docs: \",(0,n.jsx)(e.code,{children:\"this\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind\",children:[\"MDN Web Docs: \",(0,n.jsx)(e.code,{children:\"bind()\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions\",children:\"MDN Web Docs: Arrow functions\"})}),`\n`]})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(s,t)})):s(t)}var w=x;return y(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var o in e)c(t,o,{get:e[o],enumerable:!0})},l=(t,e,o,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!f.call(t,i)&&i!==o&&c(t,i,{get:()=>e[i],enumerable:!(d=b(e,i))||d.enumerable});return t};var y=(t,e,o)=>(o=t!=null?u(p(t)):{},l(e||!t||!t.__esModule?c(o,\"default\",{value:t,enumerable:!0}):o,t)),j=t=>l(c({},\"__esModule\",{value:!0}),t);var r=g((C,h)=>{h.exports=_jsx_runtime});var w={};v(w,{default:()=>a,frontmatter:()=>x});var n=y(r()),x={title:\"Explain the concept of `this` binding in event handlers\"};function s(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, the \",(0,n.jsx)(e.code,{children:\"this\"}),\" keyword refers to the object that is currently executing the code. In event handlers, \",(0,n.jsx)(e.code,{children:\"this\"}),\" typically refers to the element that triggered the event. However, the value of \",(0,n.jsx)(e.code,{children:\"this\"}),\" can change depending on how the event handler is defined and called. To ensure \",(0,n.jsx)(e.code,{children:\"this\"}),\" refers to the desired object, you can use methods like \",(0,n.jsx)(e.code,{children:\"bind()\"}),\", arrow functions, or assign the context explicitly.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"The concept of \",(0,n.jsx)(e.code,{children:\"this\"}),\" binding in event handlers\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Understanding \",(0,n.jsx)(e.code,{children:\"this\"}),\" in JavaScript\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, the \",(0,n.jsx)(e.code,{children:\"this\"}),\" keyword is a reference to the object that is currently executing the code. The value of \",(0,n.jsx)(e.code,{children:\"this\"}),\" is determined by how a function is called, not where it is defined. This can lead to different values of \",(0,n.jsx)(e.code,{children:\"this\"}),\" in different contexts.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"this\"}),\" in event handlers\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In the context of event handlers, \",(0,n.jsx)(e.code,{children:\"this\"}),\" usually refers to the DOM element that triggered the event. For example:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a button element and append it to the DOM\nconst button = document.createElement('button');\nbutton.id = 'myButton';\ndocument.body.appendChild(button);\n\ndocument.getElementById('myButton').addEventListener('click', function () {\n  console.log(this); // \\`this\\` refers to the 'myButton' element\n});\n\nbutton.click(); // Logs the button element\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"this\"}),\" inside the event handler refers to the button element that was clicked.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Changing the value of \",(0,n.jsx)(e.code,{children:\"this\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"There are several ways to change the value of \",(0,n.jsx)(e.code,{children:\"this\"}),\" in event handlers:\"]}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"bind()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"bind()\"}),\" method creates a new function that, when called, has its \",(0,n.jsx)(e.code,{children:\"this\"}),\" keyword set to the provided value:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a button element and append it to the DOM\nconst button = document.createElement('button');\nbutton.id = 'myButton';\ndocument.body.appendChild(button);\n\nfunction handleClick() {\n  console.log(this); // Logs the object passed to bind()\n}\n\nconst obj = { name: 'MyObject' };\ndocument\n  .getElementById('myButton')\n  .addEventListener('click', handleClick.bind(obj));\n\nbutton.click(); // Logs obj because handleClick was bound to obj using bind()\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"this\"}),\" inside \",(0,n.jsx)(e.code,{children:\"handleClick\"}),\" refers to \",(0,n.jsx)(e.code,{children:\"obj\"}),\".\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Using arrow functions\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Arrow functions do not have their own \",(0,n.jsx)(e.code,{children:\"this\"}),\" context; they inherit \",(0,n.jsx)(e.code,{children:\"this\"}),\" from the surrounding lexical context:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a button element and append it to the DOM\nconst button = document.createElement('button');\nbutton.id = 'myButton';\ndocument.body.appendChild(button);\n\nconst obj = {\n  name: 'MyObject',\n  handleClick: function () {\n    document.getElementById('myButton').addEventListener('click', () => {\n      console.log(this); // Logs obj\n    });\n  },\n};\n\nobj.handleClick();\nbutton.click(); // This will log obj\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"this\"}),\" inside the arrow function refers to \",(0,n.jsx)(e.code,{children:\"obj\"}),\".\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Assigning the context explicitly\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can also assign the context explicitly by using a variable:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a button element and append it to the DOM\nconst button = document.createElement('button');\nbutton.id = 'myButton';\ndocument.body.appendChild(button);\n\nconst obj = {\n  name: 'MyObject',\n  handleClick: function () {\n    const self = this;\n    document.getElementById('myButton').addEventListener('click', function () {\n      console.log(self); // Logs obj\n    });\n  },\n};\n\nobj.handleClick();\nbutton.click(); // This will log obj\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"self\"}),\" is used to capture the value of \",(0,n.jsx)(e.code,{children:\"this\"}),\" from the outer function.\"]}),`\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.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this\",children:[\"MDN Web Docs: \",(0,n.jsx)(e.code,{children:\"this\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind\",children:[\"MDN Web Docs: \",(0,n.jsx)(e.code,{children:\"bind()\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions\",children:\"MDN Web Docs: Arrow functions\"})}),`\n`]})]})}function a(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(s,{...t})}):s(t)}return j(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-this-binding-in-event-handlers/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-this-binding-in-event-handlers/zh-CN.json
index aef8e9347..c48c47cb2 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-this-binding-in-event-handlers/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-this-binding-in-event-handlers/zh-CN.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-this-binding-in-event-handlers/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var j=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),g=(t,n)=>{for(var c in n)d(t,c,{get:n[c],enumerable:!0})},l=(t,n,c,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of b(n))!p.call(t,o)&&o!==c&&d(t,o,{get:()=>n[o],enumerable:!(i=u(n,o))||i.enumerable});return t};var f=(t,n,c)=>(c=t!=null?a(m(t)):{},l(n||!t||!t.__esModule?d(c,\"default\",{value:t,enumerable:!0}):c,t)),y=t=>l(d({},\"__esModule\",{value:!0}),t);var r=j((B,h)=>{h.exports=_jsx_runtime});var D={};g(D,{default:()=>C,frontmatter:()=>v});var e=f(r()),v={title:\"\\u89E3\\u91CA\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D `this` \\u7ED1\\u5B9A\\u7684\\u6982\\u5FF5\"};function s(t){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\\u6307\\u7684\\u662F\\u5F53\\u524D\\u6B63\\u5728\\u6267\\u884C\\u4EE3\\u7801\\u7684\\u5BF9\\u8C61\\u3002\\u5728\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u901A\\u5E38\\u6307\\u7684\\u662F\\u89E6\\u53D1\\u4E8B\\u4EF6\\u7684\\u5143\\u7D20\\u3002\\u4F46\\u662F\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u53EF\\u80FD\\u4F1A\\u6839\\u636E\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u7684\\u5B9A\\u4E49\\u548C\\u8C03\\u7528\\u65B9\\u5F0F\\u800C\\u6539\\u53D8\\u3002\\u4E3A\\u4E86\\u786E\\u4FDD \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F\\u671F\\u671B\\u7684\\u5BF9\\u8C61\\uFF0C\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"bind()\"}),\" \\u65B9\\u6CD5\\u3001\\u7BAD\\u5934\\u51FD\\u6570\\u6216\\u663E\\u5F0F\\u5730\\u5206\\u914D\\u4E0A\\u4E0B\\u6587\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsxs)(n.h2,{children:[\"\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7ED1\\u5B9A\\u7684\\u6982\\u5FF5\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u7406\\u89E3 JavaScript \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"})]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\\u662F\\u5BF9\\u5F53\\u524D\\u6B63\\u5728\\u6267\\u884C\\u4EE3\\u7801\\u7684\\u5BF9\\u8C61\\u7684\\u5F15\\u7528\\u3002\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u7531\\u51FD\\u6570\\u7684\\u8C03\\u7528\\u65B9\\u5F0F\\u51B3\\u5B9A\\uFF0C\\u800C\\u4E0D\\u662F\\u5B9A\\u4E49\\u7684\\u4F4D\\u7F6E\\u3002\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5728\\u4E0D\\u540C\\u7684\\u4E0A\\u4E0B\\u6587\\u4E2D\\u5177\\u6709\\u4E0D\\u540C\\u7684\\u503C\\u3002\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"})]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u7684\\u4E0A\\u4E0B\\u6587\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u901A\\u5E38\\u6307\\u7684\\u662F\\u89E6\\u53D1\\u4E8B\\u4EF6\\u7684 DOM \\u5143\\u7D20\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u521B\\u5EFA\\u4E00\\u4E2A button \\u5143\\u7D20\\u5E76\\u5C06\\u5176\\u9644\\u52A0\\u5230 DOM\nconst button = document.createElement('button');\nbutton.id = 'myButton';\ndocument.body.appendChild(button);\n\ndocument.getElementById('myButton').addEventListener('click', function () {\n  console.log(this); // \\`this\\` \\u6307\\u7684\\u662F 'myButton' \\u5143\\u7D20\n});\n\nbutton.click(); // \\u8BB0\\u5F55 button \\u5143\\u7D20\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F\\u88AB\\u70B9\\u51FB\\u7684 button \\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u6539\\u53D8 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u6709\\u51E0\\u79CD\\u65B9\\u6CD5\\u53EF\\u4EE5\\u6539\\u53D8\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.h4,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"bind()\"})]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"bind()\"}),\" \\u65B9\\u6CD5\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\uFF0C\\u5F53\\u8C03\\u7528\\u8BE5\\u51FD\\u6570\\u65F6\\uFF0C\\u5176 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\\u8BBE\\u7F6E\\u4E3A\\u63D0\\u4F9B\\u7684\\u503C\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u521B\\u5EFA\\u4E00\\u4E2A button \\u5143\\u7D20\\u5E76\\u5C06\\u5176\\u9644\\u52A0\\u5230 DOM\nconst button = document.createElement('button');\nbutton.id = 'myButton';\ndocument.body.appendChild(button);\n\nfunction handleClick() {\n  console.log(this); // \\u8BB0\\u5F55\\u4F20\\u9012\\u7ED9 bind() \\u7684\\u5BF9\\u8C61\n}\n\nconst obj = { name: 'MyObject' };\ndocument\n  .getElementById('myButton')\n  .addEventListener('click', handleClick.bind(obj));\n\nbutton.click(); // \\u8BB0\\u5F55 obj\\uFF0C\\u56E0\\u4E3A handleClick \\u4F7F\\u7528 bind() \\u7ED1\\u5B9A\\u5230 obj\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"handleClick\"}),\" \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F \",(0,e.jsx)(n.code,{children:\"obj\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528\\u7BAD\\u5934\\u51FD\\u6570\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u6CA1\\u6709\\u81EA\\u5DF1\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\uFF1B\\u5B83\\u4EEC\\u4ECE\\u5468\\u56F4\\u7684\\u8BCD\\u6CD5\\u4E0A\\u4E0B\\u6587\\u4E2D\\u7EE7\\u627F \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u521B\\u5EFA\\u4E00\\u4E2A button \\u5143\\u7D20\\u5E76\\u5C06\\u5176\\u9644\\u52A0\\u5230 DOM\nconst button = document.createElement('button');\nbutton.id = 'myButton';\ndocument.body.appendChild(button);\n\nconst obj = {\n  name: 'MyObject',\n  handleClick: function () {\n    document.getElementById('myButton').addEventListener('click', () => {\n      console.log(this); // \\u8BB0\\u5F55 obj\n    });\n  },\n};\n\nobj.handleClick();\nbutton.click(); // \\u8FD9\\u5C06\\u8BB0\\u5F55 obj\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u7BAD\\u5934\\u51FD\\u6570\\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F \",(0,e.jsx)(n.code,{children:\"obj\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u663E\\u5F0F\\u5730\\u5206\\u914D\\u4E0A\\u4E0B\\u6587\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u4F7F\\u7528\\u53D8\\u91CF\\u663E\\u5F0F\\u5730\\u5206\\u914D\\u4E0A\\u4E0B\\u6587\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Create a button element and append it to the DOM\nconst button = document.createElement('button');\nbutton.id = 'myButton';\ndocument.body.appendChild(button);\n\nconst obj = {\n  name: 'MyObject',\n  handleClick: function () {\n    const self = this;\n    document.getElementById('myButton').addEventListener('click', function () {\n      console.log(self); // Logs obj\n    });\n  },\n};\n\nobj.handleClick();\nbutton.click(); // This will log obj\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"self\"}),\" \\u7528\\u4E8E\\u6355\\u83B7\\u5916\\u90E8\\u51FD\\u6570\\u4E2D \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this\",children:[\"MDN Web Docs: \",(0,e.jsx)(n.code,{children:\"this\"})]})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind\",children:[\"MDN Web Docs: \",(0,e.jsx)(n.code,{children:\"bind()\"})]})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions\",children:\"MDN Web Docs: Arrow functions\"})}),`\n`]})]})}function k(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(s,t)})):s(t)}var C=k;return y(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var d=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var g=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),f=(t,n)=>{for(var c in n)d(t,c,{get:n[c],enumerable:!0})},l=(t,n,c,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of m(n))!j.call(t,o)&&o!==c&&d(t,o,{get:()=>n[o],enumerable:!(i=b(n,o))||i.enumerable});return t};var y=(t,n,c)=>(c=t!=null?u(p(t)):{},l(n||!t||!t.__esModule?d(c,\"default\",{value:t,enumerable:!0}):c,t)),v=t=>l(d({},\"__esModule\",{value:!0}),t);var r=g((M,h)=>{h.exports=_jsx_runtime});var C={};f(C,{default:()=>a,frontmatter:()=>k});var e=y(r()),k={title:\"\\u89E3\\u91CA\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D `this` \\u7ED1\\u5B9A\\u7684\\u6982\\u5FF5\"};function s(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\\u6307\\u7684\\u662F\\u5F53\\u524D\\u6B63\\u5728\\u6267\\u884C\\u4EE3\\u7801\\u7684\\u5BF9\\u8C61\\u3002\\u5728\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u901A\\u5E38\\u6307\\u7684\\u662F\\u89E6\\u53D1\\u4E8B\\u4EF6\\u7684\\u5143\\u7D20\\u3002\\u4F46\\u662F\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u53EF\\u80FD\\u4F1A\\u6839\\u636E\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u7684\\u5B9A\\u4E49\\u548C\\u8C03\\u7528\\u65B9\\u5F0F\\u800C\\u6539\\u53D8\\u3002\\u4E3A\\u4E86\\u786E\\u4FDD \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F\\u671F\\u671B\\u7684\\u5BF9\\u8C61\\uFF0C\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"bind()\"}),\" \\u65B9\\u6CD5\\u3001\\u7BAD\\u5934\\u51FD\\u6570\\u6216\\u663E\\u5F0F\\u5730\\u5206\\u914D\\u4E0A\\u4E0B\\u6587\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsxs)(n.h2,{children:[\"\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7ED1\\u5B9A\\u7684\\u6982\\u5FF5\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u7406\\u89E3 JavaScript \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"})]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\\u662F\\u5BF9\\u5F53\\u524D\\u6B63\\u5728\\u6267\\u884C\\u4EE3\\u7801\\u7684\\u5BF9\\u8C61\\u7684\\u5F15\\u7528\\u3002\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u7531\\u51FD\\u6570\\u7684\\u8C03\\u7528\\u65B9\\u5F0F\\u51B3\\u5B9A\\uFF0C\\u800C\\u4E0D\\u662F\\u5B9A\\u4E49\\u7684\\u4F4D\\u7F6E\\u3002\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5728\\u4E0D\\u540C\\u7684\\u4E0A\\u4E0B\\u6587\\u4E2D\\u5177\\u6709\\u4E0D\\u540C\\u7684\\u503C\\u3002\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"})]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u7684\\u4E0A\\u4E0B\\u6587\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u901A\\u5E38\\u6307\\u7684\\u662F\\u89E6\\u53D1\\u4E8B\\u4EF6\\u7684 DOM \\u5143\\u7D20\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u521B\\u5EFA\\u4E00\\u4E2A button \\u5143\\u7D20\\u5E76\\u5C06\\u5176\\u9644\\u52A0\\u5230 DOM\nconst button = document.createElement('button');\nbutton.id = 'myButton';\ndocument.body.appendChild(button);\n\ndocument.getElementById('myButton').addEventListener('click', function () {\n  console.log(this); // \\`this\\` \\u6307\\u7684\\u662F 'myButton' \\u5143\\u7D20\n});\n\nbutton.click(); // \\u8BB0\\u5F55 button \\u5143\\u7D20\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F\\u88AB\\u70B9\\u51FB\\u7684 button \\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u6539\\u53D8 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u6709\\u51E0\\u79CD\\u65B9\\u6CD5\\u53EF\\u4EE5\\u6539\\u53D8\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.h4,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"bind()\"})]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"bind()\"}),\" \\u65B9\\u6CD5\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\uFF0C\\u5F53\\u8C03\\u7528\\u8BE5\\u51FD\\u6570\\u65F6\\uFF0C\\u5176 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\\u8BBE\\u7F6E\\u4E3A\\u63D0\\u4F9B\\u7684\\u503C\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u521B\\u5EFA\\u4E00\\u4E2A button \\u5143\\u7D20\\u5E76\\u5C06\\u5176\\u9644\\u52A0\\u5230 DOM\nconst button = document.createElement('button');\nbutton.id = 'myButton';\ndocument.body.appendChild(button);\n\nfunction handleClick() {\n  console.log(this); // \\u8BB0\\u5F55\\u4F20\\u9012\\u7ED9 bind() \\u7684\\u5BF9\\u8C61\n}\n\nconst obj = { name: 'MyObject' };\ndocument\n  .getElementById('myButton')\n  .addEventListener('click', handleClick.bind(obj));\n\nbutton.click(); // \\u8BB0\\u5F55 obj\\uFF0C\\u56E0\\u4E3A handleClick \\u4F7F\\u7528 bind() \\u7ED1\\u5B9A\\u5230 obj\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"handleClick\"}),\" \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F \",(0,e.jsx)(n.code,{children:\"obj\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528\\u7BAD\\u5934\\u51FD\\u6570\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u6CA1\\u6709\\u81EA\\u5DF1\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\uFF1B\\u5B83\\u4EEC\\u4ECE\\u5468\\u56F4\\u7684\\u8BCD\\u6CD5\\u4E0A\\u4E0B\\u6587\\u4E2D\\u7EE7\\u627F \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u521B\\u5EFA\\u4E00\\u4E2A button \\u5143\\u7D20\\u5E76\\u5C06\\u5176\\u9644\\u52A0\\u5230 DOM\nconst button = document.createElement('button');\nbutton.id = 'myButton';\ndocument.body.appendChild(button);\n\nconst obj = {\n  name: 'MyObject',\n  handleClick: function () {\n    document.getElementById('myButton').addEventListener('click', () => {\n      console.log(this); // \\u8BB0\\u5F55 obj\n    });\n  },\n};\n\nobj.handleClick();\nbutton.click(); // \\u8FD9\\u5C06\\u8BB0\\u5F55 obj\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u7BAD\\u5934\\u51FD\\u6570\\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F \",(0,e.jsx)(n.code,{children:\"obj\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u663E\\u5F0F\\u5730\\u5206\\u914D\\u4E0A\\u4E0B\\u6587\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u4F7F\\u7528\\u53D8\\u91CF\\u663E\\u5F0F\\u5730\\u5206\\u914D\\u4E0A\\u4E0B\\u6587\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Create a button element and append it to the DOM\nconst button = document.createElement('button');\nbutton.id = 'myButton';\ndocument.body.appendChild(button);\n\nconst obj = {\n  name: 'MyObject',\n  handleClick: function () {\n    const self = this;\n    document.getElementById('myButton').addEventListener('click', function () {\n      console.log(self); // Logs obj\n    });\n  },\n};\n\nobj.handleClick();\nbutton.click(); // This will log obj\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"self\"}),\" \\u7528\\u4E8E\\u6355\\u83B7\\u5916\\u90E8\\u51FD\\u6570\\u4E2D \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this\",children:[\"MDN Web Docs: \",(0,e.jsx)(n.code,{children:\"this\"})]})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind\",children:[\"MDN Web Docs: \",(0,e.jsx)(n.code,{children:\"bind()\"})]})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions\",children:\"MDN Web Docs: Arrow functions\"})}),`\n`]})]})}function a(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(s,{...t})}):s(t)}return v(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-tree-shaking-in-module-bundling/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-tree-shaking-in-module-bundling/en-US.json
index 8e72e2914..ed7dc92e4 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-tree-shaking-in-module-bundling/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-tree-shaking-in-module-bundling/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-tree-shaking-in-module-bundling/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),b=(r,e)=>{for(var i in e)o(r,i,{get:e[i],enumerable:!0})},d=(r,e,i,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of p(e))!g.call(r,t)&&t!==i&&o(r,t,{get:()=>e[t],enumerable:!(l=u(e,t))||l.enumerable});return r};var k=(r,e,i)=>(i=r!=null?s(m(r)):{},d(e||!r||!r.__esModule?o(i,\"default\",{value:r,enumerable:!0}):i,r)),x=r=>d(o({},\"__esModule\",{value:!0}),r);var c=f((T,a)=>{a.exports=_jsx_runtime});var S={};b(S,{default:()=>v,frontmatter:()=>y});var n=k(c()),y={title:\"Explain the concept of tree shaking in module bundling\"};function h(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Tree shaking is a technique used in module bundling to eliminate dead code, which is code that is never used or executed. This helps to reduce the final bundle size and improve application performance. It works by analyzing the dependency graph of the code and removing any unused exports. Tools like Webpack and Rollup support tree shaking when using ES6 module syntax (\",(0,n.jsx)(e.code,{children:\"import\"}),\" and \",(0,n.jsx)(e.code,{children:\"export\"}),\").\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"The concept of tree shaking in module bundling\"}),`\n`,(0,n.jsx)(e.p,{children:\"Tree shaking is a term commonly used in the context of JavaScript module bundlers like Webpack and Rollup. It refers to the process of eliminating dead code from the final bundle, which helps in reducing the bundle size and improving the performance of the application.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How tree shaking works\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Tree shaking works by analyzing the dependency graph of the code. It looks at the \",(0,n.jsx)(e.code,{children:\"import\"}),\" and \",(0,n.jsx)(e.code,{children:\"export\"}),\" statements to determine which parts of the code are actually used and which are not. The unused code, also known as dead code, is then removed from the final bundle.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Consider the following example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// utils.js\nexport function add(a, b) {\n  return a + b;\n}\n\nexport function subtract(a, b) {\n  return a - b;\n}\n\n// main.js\nimport { add } from './utils';\n\nconsole.log(add(2, 3));\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the \",(0,n.jsx)(e.code,{children:\"subtract\"}),\" function is never used in \",(0,n.jsx)(e.code,{children:\"main.js\"}),\". A tree-shaking-enabled bundler will recognize this and exclude the \",(0,n.jsx)(e.code,{children:\"subtract\"}),\" function from the final bundle.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Requirements for tree shaking\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"ES6 module syntax\"}),\": Tree shaking relies on the static structure of ES6 module syntax (\",(0,n.jsx)(e.code,{children:\"import\"}),\" and \",(0,n.jsx)(e.code,{children:\"export\"}),\"). CommonJS modules (\",(0,n.jsx)(e.code,{children:\"require\"}),\" and \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\") are not statically analyzable and thus not suitable for tree shaking.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Bundler support\"}),\": The bundler you are using must support tree shaking. Both Webpack and Rollup have built-in support for tree shaking.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Tools that support tree shaking\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Webpack\"}),\": Webpack supports tree shaking out of the box when using ES6 modules. You can enable it by setting the \",(0,n.jsx)(e.code,{children:\"mode\"}),\" to \",(0,n.jsx)(e.code,{children:\"production\"}),\" in your Webpack configuration.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Rollup\"}),\": Rollup is designed with tree shaking in mind and provides excellent support for it.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits of tree shaking\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reduced bundle size\"}),\": By removing unused code, the final bundle size is reduced, leading to faster load times.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Improved performance\"}),\": Smaller bundles mean less code to parse and execute, which can improve the performance of your application.\"]}),`\n`]}),`\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://webpack.js.org/guides/tree-shaking/\",children:\"Webpack Tree Shaking\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://rollupjs.org/guide/en/#tree-shaking\",children:\"Rollup Tree Shaking\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import\",children:\"MDN Web Docs: Import\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export\",children:\"MDN Web Docs: Export\"})}),`\n`]})]})}function w(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(h,r)})):h(r)}var v=w;return x(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),k=(r,e)=>{for(var i in e)o(r,i,{get:e[i],enumerable:!0})},d=(r,e,i,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of m(e))!f.call(r,t)&&t!==i&&o(r,t,{get:()=>e[t],enumerable:!(l=p(e,t))||l.enumerable});return r};var x=(r,e,i)=>(i=r!=null?u(g(r)):{},d(e||!r||!r.__esModule?o(i,\"default\",{value:r,enumerable:!0}):i,r)),y=r=>d(o({},\"__esModule\",{value:!0}),r);var c=b((T,a)=>{a.exports=_jsx_runtime});var v={};k(v,{default:()=>s,frontmatter:()=>w});var n=x(c()),w={title:\"Explain the concept of tree shaking in module bundling\"};function h(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Tree shaking is a technique used in module bundling to eliminate dead code, which is code that is never used or executed. This helps to reduce the final bundle size and improve application performance. It works by analyzing the dependency graph of the code and removing any unused exports. Tools like Webpack and Rollup support tree shaking when using ES6 module syntax (\",(0,n.jsx)(e.code,{children:\"import\"}),\" and \",(0,n.jsx)(e.code,{children:\"export\"}),\").\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"The concept of tree shaking in module bundling\"}),`\n`,(0,n.jsx)(e.p,{children:\"Tree shaking is a term commonly used in the context of JavaScript module bundlers like Webpack and Rollup. It refers to the process of eliminating dead code from the final bundle, which helps in reducing the bundle size and improving the performance of the application.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How tree shaking works\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Tree shaking works by analyzing the dependency graph of the code. It looks at the \",(0,n.jsx)(e.code,{children:\"import\"}),\" and \",(0,n.jsx)(e.code,{children:\"export\"}),\" statements to determine which parts of the code are actually used and which are not. The unused code, also known as dead code, is then removed from the final bundle.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Consider the following example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// utils.js\nexport function add(a, b) {\n  return a + b;\n}\n\nexport function subtract(a, b) {\n  return a - b;\n}\n\n// main.js\nimport { add } from './utils';\n\nconsole.log(add(2, 3));\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the \",(0,n.jsx)(e.code,{children:\"subtract\"}),\" function is never used in \",(0,n.jsx)(e.code,{children:\"main.js\"}),\". A tree-shaking-enabled bundler will recognize this and exclude the \",(0,n.jsx)(e.code,{children:\"subtract\"}),\" function from the final bundle.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Requirements for tree shaking\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"ES6 module syntax\"}),\": Tree shaking relies on the static structure of ES6 module syntax (\",(0,n.jsx)(e.code,{children:\"import\"}),\" and \",(0,n.jsx)(e.code,{children:\"export\"}),\"). CommonJS modules (\",(0,n.jsx)(e.code,{children:\"require\"}),\" and \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\") are not statically analyzable and thus not suitable for tree shaking.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Bundler support\"}),\": The bundler you are using must support tree shaking. Both Webpack and Rollup have built-in support for tree shaking.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Tools that support tree shaking\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Webpack\"}),\": Webpack supports tree shaking out of the box when using ES6 modules. You can enable it by setting the \",(0,n.jsx)(e.code,{children:\"mode\"}),\" to \",(0,n.jsx)(e.code,{children:\"production\"}),\" in your Webpack configuration.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Rollup\"}),\": Rollup is designed with tree shaking in mind and provides excellent support for it.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits of tree shaking\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reduced bundle size\"}),\": By removing unused code, the final bundle size is reduced, leading to faster load times.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Improved performance\"}),\": Smaller bundles mean less code to parse and execute, which can improve the performance of your application.\"]}),`\n`]}),`\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://webpack.js.org/guides/tree-shaking/\",children:\"Webpack Tree Shaking\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://rollupjs.org/guide/en/#tree-shaking\",children:\"Rollup Tree Shaking\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import\",children:\"MDN Web Docs: Import\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export\",children:\"MDN Web Docs: Export\"})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return y(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-tree-shaking-in-module-bundling/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-tree-shaking-in-module-bundling/zh-CN.json
index 63e2ee6f0..eeab7b1bf 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-tree-shaking-in-module-bundling/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-tree-shaking-in-module-bundling/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-tree-shaking-in-module-bundling/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var k=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),m=(r,e)=>{for(var i in e)c(r,i,{get:e[i],enumerable:!0})},d=(r,e,i,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of u(e))!b.call(r,l)&&l!==i&&c(r,l,{get:()=>e[l],enumerable:!(h=p(e,l))||h.enumerable});return r};var T=(r,e,i)=>(i=r!=null?s(g(r)):{},d(e||!r||!r.__esModule?c(i,\"default\",{value:r,enumerable:!0}):i,r)),S=r=>d(c({},\"__esModule\",{value:!0}),r);var t=k((D,o)=>{o.exports=_jsx_runtime});var W={};m(W,{default:()=>j,frontmatter:()=>x});var n=T(t()),x={title:\"\\u89E3\\u91CA\\u6A21\\u5757\\u6253\\u5305\\u4E2D\\u7684 Tree Shaking \\u6982\\u5FF5\"};function a(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Tree shaking \\u662F\\u4E00\\u79CD\\u7528\\u4E8E\\u6A21\\u5757\\u6253\\u5305\\u7684\\u6280\\u672F\\uFF0C\\u7528\\u4E8E\\u6D88\\u9664\\u6B7B\\u4EE3\\u7801\\uFF0C\\u5373\\u4ECE\\u672A\\u88AB\\u4F7F\\u7528\\u6216\\u6267\\u884C\\u7684\\u4EE3\\u7801\\u3002\\u8FD9\\u6709\\u52A9\\u4E8E\\u51CF\\u5C0F\\u6700\\u7EC8\\u7684 bundle \\u5927\\u5C0F\\u5E76\\u63D0\\u9AD8\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u6027\\u80FD\\u3002\\u5B83\\u901A\\u8FC7\\u5206\\u6790\\u4EE3\\u7801\\u7684\\u4F9D\\u8D56\\u5173\\u7CFB\\u56FE\\u5E76\\u5220\\u9664\\u4EFB\\u4F55\\u672A\\u4F7F\\u7528\\u7684\\u5BFC\\u51FA\\u6765\\u5B9E\\u73B0\\u3002Webpack \\u548C Rollup \\u7B49\\u5DE5\\u5177\\u5728\\u4F7F\\u7528 ES6 \\u6A21\\u5757\\u8BED\\u6CD5\\uFF08\",(0,n.jsx)(e.code,{children:\"import\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"export\"}),\"\\uFF09\\u65F6\\u652F\\u6301 Tree shaking\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6A21\\u5757\\u6253\\u5305\\u4E2D\\u7684 Tree Shaking \\u6982\\u5FF5\"}),`\n`,(0,n.jsx)(e.p,{children:\"Tree shaking \\u662F\\u4E00\\u4E2A\\u5E38\\u7528\\u672F\\u8BED\\uFF0C\\u901A\\u5E38\\u7528\\u4E8E JavaScript \\u6A21\\u5757\\u6253\\u5305\\u5668\\uFF0C\\u5982 Webpack \\u548C Rollup\\u3002\\u5B83\\u6307\\u7684\\u662F\\u4ECE\\u6700\\u7EC8\\u7684 bundle \\u4E2D\\u6D88\\u9664\\u6B7B\\u4EE3\\u7801\\u7684\\u8FC7\\u7A0B\\uFF0C\\u8FD9\\u6709\\u52A9\\u4E8E\\u51CF\\u5C0F bundle \\u5927\\u5C0F\\u5E76\\u63D0\\u9AD8\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u6027\\u80FD\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Tree shaking \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Tree shaking \\u901A\\u8FC7\\u5206\\u6790\\u4EE3\\u7801\\u7684\\u4F9D\\u8D56\\u5173\\u7CFB\\u56FE\\u6765\\u5DE5\\u4F5C\\u3002\\u5B83\\u67E5\\u770B \",(0,n.jsx)(e.code,{children:\"import\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"export\"}),\" \\u8BED\\u53E5\\uFF0C\\u4EE5\\u786E\\u5B9A\\u4EE3\\u7801\\u7684\\u54EA\\u4E9B\\u90E8\\u5206\\u5B9E\\u9645\\u88AB\\u4F7F\\u7528\\uFF0C\\u54EA\\u4E9B\\u6CA1\\u6709\\u88AB\\u4F7F\\u7528\\u3002\\u7136\\u540E\\uFF0C\\u5C06\\u672A\\u4F7F\\u7528\\u7684\\u4EE3\\u7801\\uFF08\\u4E5F\\u79F0\\u4E3A\\u6B7B\\u4EE3\\u7801\\uFF09\\u4ECE\\u6700\\u7EC8\\u7684 bundle \\u4E2D\\u5220\\u9664\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8003\\u8651\\u4EE5\\u4E0B\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// utils.js\nexport function add(a, b) {\n  return a + b;\n}\n\nexport function subtract(a, b) {\n  return a - b;\n}\n\n// main.js\nimport { add } from './utils';\n\nconsole.log(add(2, 3));\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"subtract\"}),\" \\u51FD\\u6570\\u5728 \",(0,n.jsx)(e.code,{children:\"main.js\"}),\" \\u4E2D\\u4ECE\\u672A\\u4F7F\\u7528\\u3002\\u652F\\u6301 Tree Shaking \\u7684\\u6253\\u5305\\u5668\\u4F1A\\u8BC6\\u522B\\u8FD9\\u4E00\\u70B9\\uFF0C\\u5E76\\u5C06 \",(0,n.jsx)(e.code,{children:\"subtract\"}),\" \\u51FD\\u6570\\u4ECE\\u6700\\u7EC8\\u7684 bundle \\u4E2D\\u6392\\u9664\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Tree shaking \\u7684\\u8981\\u6C42\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"ES6 \\u6A21\\u5757\\u8BED\\u6CD5\"}),\"\\uFF1ATree shaking \\u4F9D\\u8D56\\u4E8E ES6 \\u6A21\\u5757\\u8BED\\u6CD5\\uFF08\",(0,n.jsx)(e.code,{children:\"import\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"export\"}),\"\\uFF09\\u7684\\u9759\\u6001\\u7ED3\\u6784\\u3002CommonJS \\u6A21\\u5757\\uFF08\",(0,n.jsx)(e.code,{children:\"require\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\"\\uFF09\\u65E0\\u6CD5\\u8FDB\\u884C\\u9759\\u6001\\u5206\\u6790\\uFF0C\\u56E0\\u6B64\\u4E0D\\u9002\\u5408\\u8FDB\\u884C Tree shaking\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Bundler \\u652F\\u6301\"}),\"\\uFF1A\\u60A8\\u4F7F\\u7528\\u7684\\u6253\\u5305\\u5668\\u5FC5\\u987B\\u652F\\u6301 Tree shaking\\u3002Webpack \\u548C Rollup \\u90FD\\u5185\\u7F6E\\u4E86\\u5BF9 Tree shaking \\u7684\\u652F\\u6301\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u652F\\u6301 Tree shaking \\u7684\\u5DE5\\u5177\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Webpack\"}),\": \\u4F7F\\u7528 ES6 \\u6A21\\u5757\\u65F6\\uFF0CWebpack \\u5F00\\u7BB1\\u5373\\u652F\\u6301 Tree Shaking\\u3002\\u60A8\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728 Webpack \\u914D\\u7F6E\\u4E2D\\u5C06 \",(0,n.jsx)(e.code,{children:\"mode\"}),\" \\u8BBE\\u7F6E\\u4E3A \",(0,n.jsx)(e.code,{children:\"production\"}),\" \\u6765\\u542F\\u7528\\u5B83\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Rollup\"}),\": Rollup \\u5728\\u8BBE\\u8BA1\\u65F6\\u5C31\\u8003\\u8651\\u4E86 Tree Shaking\\uFF0C\\u5E76\\u4E3A\\u6B64\\u63D0\\u4F9B\\u4E86\\u51FA\\u8272\\u7684\\u652F\\u6301\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Tree shaking \\u7684\\u597D\\u5904\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u51CF\\u5C0F bundle \\u5927\\u5C0F\"}),\"\\uFF1A\\u901A\\u8FC7\\u5220\\u9664\\u672A\\u4F7F\\u7528\\u7684\\u4EE3\\u7801\\uFF0C\\u6700\\u7EC8\\u7684 bundle \\u5927\\u5C0F\\u51CF\\u5C0F\\uFF0C\\u4ECE\\u800C\\u52A0\\u5FEB\\u52A0\\u8F7D\\u65F6\\u95F4\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u63D0\\u9AD8\\u6027\\u80FD\"}),\"\\uFF1A\\u66F4\\u5C0F\\u7684 bundle \\u610F\\u5473\\u7740\\u66F4\\u5C11\\u7684\\u4EE3\\u7801\\u9700\\u8981\\u89E3\\u6790\\u548C\\u6267\\u884C\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u63D0\\u9AD8\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u6027\\u80FD\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://webpack.js.org/guides/tree-shaking/\",children:\"Webpack Tree Shaking\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://rollupjs.org/guide/en/#tree-shaking\",children:\"Rollup Tree Shaking\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import\",children:\"MDN Web Docs: Import\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export\",children:\"MDN Web Docs: Export\"})}),`\n`]})]})}function f(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(a,r)})):a(r)}var j=f;return S(W);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),T=(r,e)=>{for(var i in e)c(r,i,{get:e[i],enumerable:!0})},d=(r,e,i,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of g(e))!b.call(r,l)&&l!==i&&c(r,l,{get:()=>e[l],enumerable:!(h=u(e,l))||h.enumerable});return r};var S=(r,e,i)=>(i=r!=null?p(k(r)):{},d(e||!r||!r.__esModule?c(i,\"default\",{value:r,enumerable:!0}):i,r)),x=r=>d(c({},\"__esModule\",{value:!0}),r);var t=m((R,o)=>{o.exports=_jsx_runtime});var j={};T(j,{default:()=>s,frontmatter:()=>f});var n=S(t()),f={title:\"\\u89E3\\u91CA\\u6A21\\u5757\\u6253\\u5305\\u4E2D\\u7684 Tree Shaking \\u6982\\u5FF5\"};function a(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Tree shaking \\u662F\\u4E00\\u79CD\\u7528\\u4E8E\\u6A21\\u5757\\u6253\\u5305\\u7684\\u6280\\u672F\\uFF0C\\u7528\\u4E8E\\u6D88\\u9664\\u6B7B\\u4EE3\\u7801\\uFF0C\\u5373\\u4ECE\\u672A\\u88AB\\u4F7F\\u7528\\u6216\\u6267\\u884C\\u7684\\u4EE3\\u7801\\u3002\\u8FD9\\u6709\\u52A9\\u4E8E\\u51CF\\u5C0F\\u6700\\u7EC8\\u7684 bundle \\u5927\\u5C0F\\u5E76\\u63D0\\u9AD8\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u6027\\u80FD\\u3002\\u5B83\\u901A\\u8FC7\\u5206\\u6790\\u4EE3\\u7801\\u7684\\u4F9D\\u8D56\\u5173\\u7CFB\\u56FE\\u5E76\\u5220\\u9664\\u4EFB\\u4F55\\u672A\\u4F7F\\u7528\\u7684\\u5BFC\\u51FA\\u6765\\u5B9E\\u73B0\\u3002Webpack \\u548C Rollup \\u7B49\\u5DE5\\u5177\\u5728\\u4F7F\\u7528 ES6 \\u6A21\\u5757\\u8BED\\u6CD5\\uFF08\",(0,n.jsx)(e.code,{children:\"import\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"export\"}),\"\\uFF09\\u65F6\\u652F\\u6301 Tree shaking\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6A21\\u5757\\u6253\\u5305\\u4E2D\\u7684 Tree Shaking \\u6982\\u5FF5\"}),`\n`,(0,n.jsx)(e.p,{children:\"Tree shaking \\u662F\\u4E00\\u4E2A\\u5E38\\u7528\\u672F\\u8BED\\uFF0C\\u901A\\u5E38\\u7528\\u4E8E JavaScript \\u6A21\\u5757\\u6253\\u5305\\u5668\\uFF0C\\u5982 Webpack \\u548C Rollup\\u3002\\u5B83\\u6307\\u7684\\u662F\\u4ECE\\u6700\\u7EC8\\u7684 bundle \\u4E2D\\u6D88\\u9664\\u6B7B\\u4EE3\\u7801\\u7684\\u8FC7\\u7A0B\\uFF0C\\u8FD9\\u6709\\u52A9\\u4E8E\\u51CF\\u5C0F bundle \\u5927\\u5C0F\\u5E76\\u63D0\\u9AD8\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u6027\\u80FD\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Tree shaking \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Tree shaking \\u901A\\u8FC7\\u5206\\u6790\\u4EE3\\u7801\\u7684\\u4F9D\\u8D56\\u5173\\u7CFB\\u56FE\\u6765\\u5DE5\\u4F5C\\u3002\\u5B83\\u67E5\\u770B \",(0,n.jsx)(e.code,{children:\"import\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"export\"}),\" \\u8BED\\u53E5\\uFF0C\\u4EE5\\u786E\\u5B9A\\u4EE3\\u7801\\u7684\\u54EA\\u4E9B\\u90E8\\u5206\\u5B9E\\u9645\\u88AB\\u4F7F\\u7528\\uFF0C\\u54EA\\u4E9B\\u6CA1\\u6709\\u88AB\\u4F7F\\u7528\\u3002\\u7136\\u540E\\uFF0C\\u5C06\\u672A\\u4F7F\\u7528\\u7684\\u4EE3\\u7801\\uFF08\\u4E5F\\u79F0\\u4E3A\\u6B7B\\u4EE3\\u7801\\uFF09\\u4ECE\\u6700\\u7EC8\\u7684 bundle \\u4E2D\\u5220\\u9664\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8003\\u8651\\u4EE5\\u4E0B\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// utils.js\nexport function add(a, b) {\n  return a + b;\n}\n\nexport function subtract(a, b) {\n  return a - b;\n}\n\n// main.js\nimport { add } from './utils';\n\nconsole.log(add(2, 3));\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"subtract\"}),\" \\u51FD\\u6570\\u5728 \",(0,n.jsx)(e.code,{children:\"main.js\"}),\" \\u4E2D\\u4ECE\\u672A\\u4F7F\\u7528\\u3002\\u652F\\u6301 Tree Shaking \\u7684\\u6253\\u5305\\u5668\\u4F1A\\u8BC6\\u522B\\u8FD9\\u4E00\\u70B9\\uFF0C\\u5E76\\u5C06 \",(0,n.jsx)(e.code,{children:\"subtract\"}),\" \\u51FD\\u6570\\u4ECE\\u6700\\u7EC8\\u7684 bundle \\u4E2D\\u6392\\u9664\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Tree shaking \\u7684\\u8981\\u6C42\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"ES6 \\u6A21\\u5757\\u8BED\\u6CD5\"}),\"\\uFF1ATree shaking \\u4F9D\\u8D56\\u4E8E ES6 \\u6A21\\u5757\\u8BED\\u6CD5\\uFF08\",(0,n.jsx)(e.code,{children:\"import\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"export\"}),\"\\uFF09\\u7684\\u9759\\u6001\\u7ED3\\u6784\\u3002CommonJS \\u6A21\\u5757\\uFF08\",(0,n.jsx)(e.code,{children:\"require\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\"\\uFF09\\u65E0\\u6CD5\\u8FDB\\u884C\\u9759\\u6001\\u5206\\u6790\\uFF0C\\u56E0\\u6B64\\u4E0D\\u9002\\u5408\\u8FDB\\u884C Tree shaking\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Bundler \\u652F\\u6301\"}),\"\\uFF1A\\u60A8\\u4F7F\\u7528\\u7684\\u6253\\u5305\\u5668\\u5FC5\\u987B\\u652F\\u6301 Tree shaking\\u3002Webpack \\u548C Rollup \\u90FD\\u5185\\u7F6E\\u4E86\\u5BF9 Tree shaking \\u7684\\u652F\\u6301\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u652F\\u6301 Tree shaking \\u7684\\u5DE5\\u5177\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Webpack\"}),\": \\u4F7F\\u7528 ES6 \\u6A21\\u5757\\u65F6\\uFF0CWebpack \\u5F00\\u7BB1\\u5373\\u652F\\u6301 Tree Shaking\\u3002\\u60A8\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728 Webpack \\u914D\\u7F6E\\u4E2D\\u5C06 \",(0,n.jsx)(e.code,{children:\"mode\"}),\" \\u8BBE\\u7F6E\\u4E3A \",(0,n.jsx)(e.code,{children:\"production\"}),\" \\u6765\\u542F\\u7528\\u5B83\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Rollup\"}),\": Rollup \\u5728\\u8BBE\\u8BA1\\u65F6\\u5C31\\u8003\\u8651\\u4E86 Tree Shaking\\uFF0C\\u5E76\\u4E3A\\u6B64\\u63D0\\u4F9B\\u4E86\\u51FA\\u8272\\u7684\\u652F\\u6301\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Tree shaking \\u7684\\u597D\\u5904\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u51CF\\u5C0F bundle \\u5927\\u5C0F\"}),\"\\uFF1A\\u901A\\u8FC7\\u5220\\u9664\\u672A\\u4F7F\\u7528\\u7684\\u4EE3\\u7801\\uFF0C\\u6700\\u7EC8\\u7684 bundle \\u5927\\u5C0F\\u51CF\\u5C0F\\uFF0C\\u4ECE\\u800C\\u52A0\\u5FEB\\u52A0\\u8F7D\\u65F6\\u95F4\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u63D0\\u9AD8\\u6027\\u80FD\"}),\"\\uFF1A\\u66F4\\u5C0F\\u7684 bundle \\u610F\\u5473\\u7740\\u66F4\\u5C11\\u7684\\u4EE3\\u7801\\u9700\\u8981\\u89E3\\u6790\\u548C\\u6267\\u884C\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u63D0\\u9AD8\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u6027\\u80FD\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://webpack.js.org/guides/tree-shaking/\",children:\"Webpack Tree Shaking\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://rollupjs.org/guide/en/#tree-shaking\",children:\"Rollup Tree Shaking\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import\",children:\"MDN Web Docs: Import\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export\",children:\"MDN Web Docs: Export\"})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(a,{...r})}):a(r)}return x(j);})();\n;return Component;"
 }
\ No newline at end of file
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 0af916e0d..50fa57756 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var u=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),y=(i,e)=>{for(var t in e)r(i,t,{get:e[t],enumerable:!0})},c=(i,e,t,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!f.call(i,a)&&a!==t&&r(i,a,{get:()=>e[a],enumerable:!(o=p(e,a))||o.enumerable});return i};var b=(i,e,t)=>(t=i!=null?d(g(i)):{},c(e||!i||!i.__esModule?r(t,\"default\",{value:i,enumerable:!0}):t,i)),j=i=>c(r({},\"__esModule\",{value:!0}),i);var l=u((S,s)=>{s.exports=_jsx_runtime});var C={};y(C,{default:()=>w,frontmatter:()=>v});var n=b(l()),v={title:\"Explain the difference between classical inheritance and prototypal inheritance\"};function h(i){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Classical inheritance is a model where classes inherit from other classes, typically seen in languages like Java and C++. Prototypal inheritance, used in JavaScript, involves objects inheriting directly from other objects. In classical inheritance, you define a class and create instances from it. In prototypal inheritance, you create an object and use it as a prototype for other objects.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Difference between classical inheritance and prototypal inheritance\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Classical inheritance\"}),`\n`,(0,n.jsx)(e.p,{children:\"Classical inheritance is a pattern used in many object-oriented programming languages like Java, C++, and Python. It involves creating a class hierarchy where classes inherit properties and methods from other classes.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Class definition\"}),\": You define a class with properties and methods.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Instantiation\"}),\": You create instances (objects) of the class.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Inheritance\"}),\": A class can inherit from another class, forming a parent-child relationship.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example in Java:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-java\",children:`class Animal {\n    void eat() {\n        System.out.println(\"This animal eats food.\");\n    }\n}\n\nclass Dog extends Animal {\n    void bark() {\n        System.out.println(\"The dog barks.\");\n    }\n}\n\npublic class Main {\n    public static void main(String[] args) {\n        Dog dog = new Dog();\n        dog.eat(); // Inherited method\n        dog.bark(); // Own method\n    }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Prototypal inheritance\"}),`\n`,(0,n.jsx)(e.p,{children:\"Prototypal inheritance is a feature of JavaScript where objects inherit directly from other objects. There are no classes; instead, objects serve as prototypes for other objects.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Object creation\"}),\": You create an object directly.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Prototype chain\"}),\": Objects can inherit properties and methods from other objects through the prototype chain.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Flexibility\"}),\": You can dynamically add or modify properties and methods.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example in JavaScript:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const animal = {\n  eat() {\n    console.log('This animal eats food.');\n  },\n};\n\nconst dog = Object.create(animal);\ndog.bark = function () {\n  console.log('The dog barks.');\n};\n\ndog.eat(); // Inherited method (Output: The animal eats food.)\ndog.bark(); // Own method (Output: The dog barks.)\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Key differences\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Class-based vs. prototype-based\"}),\": Classical inheritance uses classes, while prototypal inheritance uses objects.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Inheritance model\"}),\": Classical inheritance forms a class hierarchy, whereas prototypal inheritance forms a prototype chain.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Flexibility\"}),\": Prototypal inheritance is more flexible and dynamic, allowing for changes at runtime.\"]}),`\n`]}),`\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/Web/JavaScript/Inheritance_and_the_prototype_chain\",children:\"MDN Web Docs: Inheritance and the prototype chain\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/prototype-inheritance\",children:\"JavaScript.info: Prototypal inheritance\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\",children:\"MDN Web Docs: Classes\"})}),`\n`]})]})}function x(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(h,i)})):h(i)}var w=x;return j(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var y=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),b=(i,e)=>{for(var t in e)r(i,t,{get:e[t],enumerable:!0})},c=(i,e,t,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of g(e))!u.call(i,a)&&a!==t&&r(i,a,{get:()=>e[a],enumerable:!(o=m(e,a))||o.enumerable});return i};var j=(i,e,t)=>(t=i!=null?p(f(i)):{},c(e||!i||!i.__esModule?r(t,\"default\",{value:i,enumerable:!0}):t,i)),v=i=>c(r({},\"__esModule\",{value:!0}),i);var l=y((D,s)=>{s.exports=_jsx_runtime});var w={};b(w,{default:()=>d,frontmatter:()=>x});var n=j(l()),x={title:\"Explain the difference between classical inheritance and prototypal inheritance\"};function h(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Classical inheritance is a model where classes inherit from other classes, typically seen in languages like Java and C++. Prototypal inheritance, used in JavaScript, involves objects inheriting directly from other objects. In classical inheritance, you define a class and create instances from it. In prototypal inheritance, you create an object and use it as a prototype for other objects.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Difference between classical inheritance and prototypal inheritance\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Classical inheritance\"}),`\n`,(0,n.jsx)(e.p,{children:\"Classical inheritance is a pattern used in many object-oriented programming languages like Java, C++, and Python. It involves creating a class hierarchy where classes inherit properties and methods from other classes.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Class definition\"}),\": You define a class with properties and methods.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Instantiation\"}),\": You create instances (objects) of the class.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Inheritance\"}),\": A class can inherit from another class, forming a parent-child relationship.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example in Java:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-java\",children:`class Animal {\n    void eat() {\n        System.out.println(\"This animal eats food.\");\n    }\n}\n\nclass Dog extends Animal {\n    void bark() {\n        System.out.println(\"The dog barks.\");\n    }\n}\n\npublic class Main {\n    public static void main(String[] args) {\n        Dog dog = new Dog();\n        dog.eat(); // Inherited method\n        dog.bark(); // Own method\n    }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Prototypal inheritance\"}),`\n`,(0,n.jsx)(e.p,{children:\"Prototypal inheritance is a feature of JavaScript where objects inherit directly from other objects. There are no classes; instead, objects serve as prototypes for other objects.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Object creation\"}),\": You create an object directly.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Prototype chain\"}),\": Objects can inherit properties and methods from other objects through the prototype chain.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Flexibility\"}),\": You can dynamically add or modify properties and methods.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example in JavaScript:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const animal = {\n  eat() {\n    console.log('This animal eats food.');\n  },\n};\n\nconst dog = Object.create(animal);\ndog.bark = function () {\n  console.log('The dog barks.');\n};\n\ndog.eat(); // Inherited method (Output: The animal eats food.)\ndog.bark(); // Own method (Output: The dog barks.)\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Key differences\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Class-based vs. prototype-based\"}),\": Classical inheritance uses classes, while prototypal inheritance uses objects.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Inheritance model\"}),\": Classical inheritance forms a class hierarchy, whereas prototypal inheritance forms a prototype chain.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Flexibility\"}),\": Prototypal inheritance is more flexible and dynamic, allowing for changes at runtime.\"]}),`\n`]}),`\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/Web/JavaScript/Inheritance_and_the_prototype_chain\",children:\"MDN Web Docs: Inheritance and the prototype chain\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/prototype-inheritance\",children:\"JavaScript.info: Prototypal inheritance\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\",children:\"MDN Web Docs: Classes\"})}),`\n`]})]})}function d(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(h,{...i})}):h(i)}return v(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/zh-CN.json
index 3f92bfba1..2b1f48240 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var v=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),b=(r,n)=>{for(var i in n)l(r,i,{get:n[i],enumerable:!0})},c=(r,n,i,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of g(n))!u.call(r,t)&&t!==i&&l(r,t,{get:()=>n[t],enumerable:!(a=p(n,t))||a.enumerable});return r};var f=(r,n,i)=>(i=r!=null?s(m(r)):{},c(n||!r||!r.__esModule?l(i,\"default\",{value:r,enumerable:!0}):i,r)),j=r=>c(l({},\"__esModule\",{value:!0}),r);var h=v((y,o)=>{o.exports=_jsx_runtime});var D={};b(D,{default:()=>x,frontmatter:()=>S});var e=f(h()),S={title:\"\\u89E3\\u91CA\\u7ECF\\u5178\\u7EE7\\u627F\\u548C\\u539F\\u578B\\u7EE7\\u627F\\u7684\\u533A\\u522B\"};function d(r){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7ECF\\u5178\\u7EE7\\u627F\\u662F\\u4E00\\u79CD\\u6A21\\u578B\\uFF0C\\u5176\\u4E2D\\u7C7B\\u4ECE\\u5176\\u4ED6\\u7C7B\\u7EE7\\u627F\\uFF0C\\u901A\\u5E38\\u5728 Java \\u548C C++ \\u7B49\\u8BED\\u8A00\\u4E2D\\u53EF\\u89C1\\u3002\\u539F\\u578B\\u7EE7\\u627F\\uFF08\\u5728 JavaScript \\u4E2D\\u4F7F\\u7528\\uFF09\\u6D89\\u53CA\\u5BF9\\u8C61\\u76F4\\u63A5\\u4ECE\\u5176\\u4ED6\\u5BF9\\u8C61\\u7EE7\\u627F\\u3002\\u5728\\u7ECF\\u5178\\u7EE7\\u627F\\u4E2D\\uFF0C\\u60A8\\u5B9A\\u4E49\\u4E00\\u4E2A\\u7C7B\\u5E76\\u4ECE\\u4E2D\\u521B\\u5EFA\\u5B9E\\u4F8B\\u3002\\u5728\\u539F\\u578B\\u7EE7\\u627F\\u4E2D\\uFF0C\\u60A8\\u521B\\u5EFA\\u4E00\\u4E2A\\u5BF9\\u8C61\\u5E76\\u5C06\\u5176\\u7528\\u4F5C\\u5176\\u4ED6\\u5BF9\\u8C61\\u7684\\u539F\\u578B\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7ECF\\u5178\\u7EE7\\u627F\\u548C\\u539F\\u578B\\u7EE7\\u627F\\u7684\\u533A\\u522B\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7ECF\\u5178\\u7EE7\\u627F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7ECF\\u5178\\u7EE7\\u627F\\u662F\\u8BB8\\u591A\\u9762\\u5411\\u5BF9\\u8C61\\u7F16\\u7A0B\\u8BED\\u8A00\\uFF08\\u5982 Java\\u3001C++ \\u548C Python\\uFF09\\u4E2D\\u4F7F\\u7528\\u7684\\u4E00\\u79CD\\u6A21\\u5F0F\\u3002\\u5B83\\u6D89\\u53CA\\u521B\\u5EFA\\u4E00\\u4E2A\\u7C7B\\u5C42\\u6B21\\u7ED3\\u6784\\uFF0C\\u5176\\u4E2D\\u7C7B\\u4ECE\\u5176\\u4ED6\\u7C7B\\u7EE7\\u627F\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7C7B\\u5B9A\\u4E49\"}),\"\\uFF1A\\u60A8\\u5B9A\\u4E49\\u4E00\\u4E2A\\u5177\\u6709\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u7684\\u7C7B\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B9E\\u4F8B\\u5316\"}),\"\\uFF1A\\u60A8\\u521B\\u5EFA\\u7C7B\\u7684\\u5B9E\\u4F8B\\uFF08\\u5BF9\\u8C61\\uFF09\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7EE7\\u627F\"}),\"\\uFF1A\\u4E00\\u4E2A\\u7C7B\\u53EF\\u4EE5\\u4ECE\\u53E6\\u4E00\\u4E2A\\u7C7B\\u7EE7\\u627F\\uFF0C\\u5F62\\u6210\\u7236\\u5B50\\u5173\\u7CFB\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"Java \\u4E2D\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-java\",children:`class Animal {\n    void eat() {\n        System.out.println(\"This animal eats food.\");\n    }\n}\n\nclass Dog extends Animal {\n    void bark() {\n        System.out.println(\"The dog barks.\");\n    }\n}\n\npublic class Main {\n    public static void main(String[] args) {\n        Dog dog = new Dog();\n        dog.eat(); // Inherited method\n        dog.bark(); // Own method\n    }\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u539F\\u578B\\u7EE7\\u627F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u539F\\u578B\\u7EE7\\u627F\\u662F JavaScript \\u7684\\u4E00\\u4E2A\\u7279\\u6027\\uFF0C\\u5176\\u4E2D\\u5BF9\\u8C61\\u76F4\\u63A5\\u4ECE\\u5176\\u4ED6\\u5BF9\\u8C61\\u7EE7\\u627F\\u3002\\u6CA1\\u6709\\u7C7B\\uFF1B\\u76F8\\u53CD\\uFF0C\\u5BF9\\u8C61\\u5145\\u5F53\\u5176\\u4ED6\\u5BF9\\u8C61\\u7684\\u539F\\u578B\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5BF9\\u8C61\\u521B\\u5EFA\"}),\"\\uFF1A\\u60A8\\u76F4\\u63A5\\u521B\\u5EFA\\u4E00\\u4E2A\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u539F\\u578B\\u94FE\"}),\"\\uFF1A\\u5BF9\\u8C61\\u53EF\\u4EE5\\u901A\\u8FC7\\u539F\\u578B\\u94FE\\u4ECE\\u5176\\u4ED6\\u5BF9\\u8C61\\u7EE7\\u627F\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7075\\u6D3B\\u6027\"}),\"\\uFF1A\\u60A8\\u53EF\\u4EE5\\u52A8\\u6001\\u5730\\u6DFB\\u52A0\\u6216\\u4FEE\\u6539\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const animal = {\n  eat() {\n    console.log('This animal eats food.');\n  },\n};\n\nconst dog = Object.create(animal);\ndog.bark = function () {\n  console.log('The dog barks.');\n};\n\ndog.eat(); // Inherited method (Output: The animal eats food.)\ndog.bark(); // Own method (Output: The dog barks.)\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E3B\\u8981\\u533A\\u522B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u57FA\\u4E8E\\u7C7B\\u7684\\u4E0E\\u57FA\\u4E8E\\u539F\\u578B\\u7684\"}),\"\\uFF1A\\u7ECF\\u5178\\u7EE7\\u627F\\u4F7F\\u7528\\u7C7B\\uFF0C\\u800C\\u539F\\u578B\\u7EE7\\u627F\\u4F7F\\u7528\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7EE7\\u627F\\u6A21\\u578B\"}),\"\\uFF1A\\u7ECF\\u5178\\u7EE7\\u627F\\u5F62\\u6210\\u4E00\\u4E2A\\u7C7B\\u5C42\\u6B21\\u7ED3\\u6784\\uFF0C\\u800C\\u539F\\u578B\\u7EE7\\u627F\\u5F62\\u6210\\u4E00\\u4E2A\\u539F\\u578B\\u94FE\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7075\\u6D3B\\u6027\"}),\"\\uFF1A\\u539F\\u578B\\u7EE7\\u627F\\u66F4\\u7075\\u6D3B\\u548C\\u52A8\\u6001\\uFF0C\\u5141\\u8BB8\\u5728\\u8FD0\\u884C\\u65F6\\u8FDB\\u884C\\u66F4\\u6539\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain\",children:\"MDN Web Docs: Inheritance and the prototype chain\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/prototype-inheritance\",children:\"JavaScript.info: Prototypal inheritance\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\",children:\"MDN Web Docs: Classes\"})}),`\n`]})]})}function _(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(d,r)})):d(r)}var x=_;return j(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var f=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),b=(r,n)=>{for(var i in n)l(r,i,{get:n[i],enumerable:!0})},c=(r,n,i,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of m(n))!v.call(r,t)&&t!==i&&l(r,t,{get:()=>n[t],enumerable:!(a=g(n,t))||a.enumerable});return r};var S=(r,n,i)=>(i=r!=null?p(u(r)):{},c(n||!r||!r.__esModule?l(i,\"default\",{value:r,enumerable:!0}):i,r)),_=r=>c(l({},\"__esModule\",{value:!0}),r);var h=f((J,o)=>{o.exports=_jsx_runtime});var D={};b(D,{default:()=>s,frontmatter:()=>x});var e=S(h()),x={title:\"\\u89E3\\u91CA\\u7ECF\\u5178\\u7EE7\\u627F\\u548C\\u539F\\u578B\\u7EE7\\u627F\\u7684\\u533A\\u522B\"};function d(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7ECF\\u5178\\u7EE7\\u627F\\u662F\\u4E00\\u79CD\\u6A21\\u578B\\uFF0C\\u5176\\u4E2D\\u7C7B\\u4ECE\\u5176\\u4ED6\\u7C7B\\u7EE7\\u627F\\uFF0C\\u901A\\u5E38\\u5728 Java \\u548C C++ \\u7B49\\u8BED\\u8A00\\u4E2D\\u53EF\\u89C1\\u3002\\u539F\\u578B\\u7EE7\\u627F\\uFF08\\u5728 JavaScript \\u4E2D\\u4F7F\\u7528\\uFF09\\u6D89\\u53CA\\u5BF9\\u8C61\\u76F4\\u63A5\\u4ECE\\u5176\\u4ED6\\u5BF9\\u8C61\\u7EE7\\u627F\\u3002\\u5728\\u7ECF\\u5178\\u7EE7\\u627F\\u4E2D\\uFF0C\\u60A8\\u5B9A\\u4E49\\u4E00\\u4E2A\\u7C7B\\u5E76\\u4ECE\\u4E2D\\u521B\\u5EFA\\u5B9E\\u4F8B\\u3002\\u5728\\u539F\\u578B\\u7EE7\\u627F\\u4E2D\\uFF0C\\u60A8\\u521B\\u5EFA\\u4E00\\u4E2A\\u5BF9\\u8C61\\u5E76\\u5C06\\u5176\\u7528\\u4F5C\\u5176\\u4ED6\\u5BF9\\u8C61\\u7684\\u539F\\u578B\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7ECF\\u5178\\u7EE7\\u627F\\u548C\\u539F\\u578B\\u7EE7\\u627F\\u7684\\u533A\\u522B\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7ECF\\u5178\\u7EE7\\u627F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7ECF\\u5178\\u7EE7\\u627F\\u662F\\u8BB8\\u591A\\u9762\\u5411\\u5BF9\\u8C61\\u7F16\\u7A0B\\u8BED\\u8A00\\uFF08\\u5982 Java\\u3001C++ \\u548C Python\\uFF09\\u4E2D\\u4F7F\\u7528\\u7684\\u4E00\\u79CD\\u6A21\\u5F0F\\u3002\\u5B83\\u6D89\\u53CA\\u521B\\u5EFA\\u4E00\\u4E2A\\u7C7B\\u5C42\\u6B21\\u7ED3\\u6784\\uFF0C\\u5176\\u4E2D\\u7C7B\\u4ECE\\u5176\\u4ED6\\u7C7B\\u7EE7\\u627F\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7C7B\\u5B9A\\u4E49\"}),\"\\uFF1A\\u60A8\\u5B9A\\u4E49\\u4E00\\u4E2A\\u5177\\u6709\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u7684\\u7C7B\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B9E\\u4F8B\\u5316\"}),\"\\uFF1A\\u60A8\\u521B\\u5EFA\\u7C7B\\u7684\\u5B9E\\u4F8B\\uFF08\\u5BF9\\u8C61\\uFF09\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7EE7\\u627F\"}),\"\\uFF1A\\u4E00\\u4E2A\\u7C7B\\u53EF\\u4EE5\\u4ECE\\u53E6\\u4E00\\u4E2A\\u7C7B\\u7EE7\\u627F\\uFF0C\\u5F62\\u6210\\u7236\\u5B50\\u5173\\u7CFB\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"Java \\u4E2D\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-java\",children:`class Animal {\n    void eat() {\n        System.out.println(\"This animal eats food.\");\n    }\n}\n\nclass Dog extends Animal {\n    void bark() {\n        System.out.println(\"The dog barks.\");\n    }\n}\n\npublic class Main {\n    public static void main(String[] args) {\n        Dog dog = new Dog();\n        dog.eat(); // Inherited method\n        dog.bark(); // Own method\n    }\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u539F\\u578B\\u7EE7\\u627F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u539F\\u578B\\u7EE7\\u627F\\u662F JavaScript \\u7684\\u4E00\\u4E2A\\u7279\\u6027\\uFF0C\\u5176\\u4E2D\\u5BF9\\u8C61\\u76F4\\u63A5\\u4ECE\\u5176\\u4ED6\\u5BF9\\u8C61\\u7EE7\\u627F\\u3002\\u6CA1\\u6709\\u7C7B\\uFF1B\\u76F8\\u53CD\\uFF0C\\u5BF9\\u8C61\\u5145\\u5F53\\u5176\\u4ED6\\u5BF9\\u8C61\\u7684\\u539F\\u578B\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5BF9\\u8C61\\u521B\\u5EFA\"}),\"\\uFF1A\\u60A8\\u76F4\\u63A5\\u521B\\u5EFA\\u4E00\\u4E2A\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u539F\\u578B\\u94FE\"}),\"\\uFF1A\\u5BF9\\u8C61\\u53EF\\u4EE5\\u901A\\u8FC7\\u539F\\u578B\\u94FE\\u4ECE\\u5176\\u4ED6\\u5BF9\\u8C61\\u7EE7\\u627F\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7075\\u6D3B\\u6027\"}),\"\\uFF1A\\u60A8\\u53EF\\u4EE5\\u52A8\\u6001\\u5730\\u6DFB\\u52A0\\u6216\\u4FEE\\u6539\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const animal = {\n  eat() {\n    console.log('This animal eats food.');\n  },\n};\n\nconst dog = Object.create(animal);\ndog.bark = function () {\n  console.log('The dog barks.');\n};\n\ndog.eat(); // Inherited method (Output: The animal eats food.)\ndog.bark(); // Own method (Output: The dog barks.)\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E3B\\u8981\\u533A\\u522B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u57FA\\u4E8E\\u7C7B\\u7684\\u4E0E\\u57FA\\u4E8E\\u539F\\u578B\\u7684\"}),\"\\uFF1A\\u7ECF\\u5178\\u7EE7\\u627F\\u4F7F\\u7528\\u7C7B\\uFF0C\\u800C\\u539F\\u578B\\u7EE7\\u627F\\u4F7F\\u7528\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7EE7\\u627F\\u6A21\\u578B\"}),\"\\uFF1A\\u7ECF\\u5178\\u7EE7\\u627F\\u5F62\\u6210\\u4E00\\u4E2A\\u7C7B\\u5C42\\u6B21\\u7ED3\\u6784\\uFF0C\\u800C\\u539F\\u578B\\u7EE7\\u627F\\u5F62\\u6210\\u4E00\\u4E2A\\u539F\\u578B\\u94FE\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7075\\u6D3B\\u6027\"}),\"\\uFF1A\\u539F\\u578B\\u7EE7\\u627F\\u66F4\\u7075\\u6D3B\\u548C\\u52A8\\u6001\\uFF0C\\u5141\\u8BB8\\u5728\\u8FD0\\u884C\\u65F6\\u8FDB\\u884C\\u66F4\\u6539\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain\",children:\"MDN Web Docs: Inheritance and the prototype chain\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/prototype-inheritance\",children:\"JavaScript.info: Prototypal inheritance\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\",children:\"MDN Web Docs: Classes\"})}),`\n`]})]})}function s(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(d,{...r})}):d(r)}return _(D);})();\n;return Component;"
 }
\ No newline at end of file
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 a6539f46f..d5515e064 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),S=(n,e)=>{for(var c in e)r(n,c,{get:e[c],enumerable:!0})},i=(n,e,c,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of a(e))!g.call(n,l)&&l!==c&&r(n,l,{get:()=>e[l],enumerable:!(d=u(e,l))||d.enumerable});return n};var I=(n,e,c)=>(c=n!=null?m(y(n)):{},i(e||!n||!n.__esModule?r(c,\"default\",{value:n,enumerable:!0}):c,n)),b=n=>i(r({},\"__esModule\",{value:!0}),n);var s=f((w,o)=>{o.exports=_jsx_runtime});var q={};S(q,{default:()=>E,frontmatter:()=>p});var t=I(s()),p={title:\"Explain the difference between `document.querySelector()` and `document.getElementById()`\"};function h(n){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"document.querySelector()\"}),\" and \",(0,t.jsx)(e.code,{children:\"document.getElementById()\"}),\" are both methods used to select elements from the DOM, but they have key differences. \",(0,t.jsx)(e.code,{children:\"document.querySelector()\"}),\" can select any element using a CSS selector and returns the first match, while \",(0,t.jsx)(e.code,{children:\"document.getElementById()\"}),\" selects an element by its ID and returns the element with that specific ID.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`// Using document.querySelector()\nconst element = document.querySelector('.my-class');\n\n// Using document.getElementById()\nconst elementById = document.getElementById('my-id');\n`})}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsxs)(e.h2,{children:[\"Difference between \",(0,t.jsx)(e.code,{children:\"document.querySelector()\"}),\" and \",(0,t.jsx)(e.code,{children:\"document.getElementById()\"})]}),`\n`,(0,t.jsx)(e.h3,{children:(0,t.jsx)(e.code,{children:\"document.querySelector()\"})}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"Can select elements using any valid CSS selector, including class, ID, tag, attribute, and pseudo-classes\"}),`\n`,(0,t.jsx)(e.li,{children:\"Returns the first element that matches the specified selector\"}),`\n`,(0,t.jsx)(e.li,{children:\"More versatile but slightly slower due to the flexibility of CSS selectors\"}),`\n`]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`// Select the first element with the class 'my-class'\nconst element = document.querySelector('.my-class');\n\n// Select the first <div> element\nconst divElement = document.querySelector('div');\n\n// Select the first element with the attribute data-role='button'\nconst buttonElement = document.querySelector('[data-role=\"button\"]');\n`})}),`\n`,(0,t.jsx)(e.h3,{children:(0,t.jsx)(e.code,{children:\"document.getElementById()\"})}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"Selects an element by its ID attribute\"}),`\n`,(0,t.jsx)(e.li,{children:\"Returns the element with the specified ID\"}),`\n`,(0,t.jsx)(e.li,{children:\"Faster and more efficient for selecting elements by ID, but less versatile\"}),`\n`]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`// Select the element with the ID 'my-id'\nconst elementById = document.getElementById('my-id');\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Key differences\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Selector type\"}),\": \",(0,t.jsx)(e.code,{children:\"document.querySelector()\"}),\" uses CSS selectors, while \",(0,t.jsx)(e.code,{children:\"document.getElementById()\"}),\" uses only the ID attribute.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Return value\"}),\": \",(0,t.jsx)(e.code,{children:\"document.querySelector()\"}),\" returns the first matching element, whereas \",(0,t.jsx)(e.code,{children:\"document.getElementById()\"}),\" returns the element with the specified ID.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Performance\"}),\": \",(0,t.jsx)(e.code,{children:\"document.getElementById()\"}),\" is generally faster because it directly accesses the element by ID, while \",(0,t.jsx)(e.code,{children:\"document.querySelector()\"}),\" has to parse the CSS selector.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector\",children:\"MDN Web Docs: document.querySelector()\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById\",children:\"MDN Web Docs: document.getElementById()\"})}),`\n`]})]})}function D(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var E=D;return b(q);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var S=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),I=(n,e)=>{for(var c in e)r(n,c,{get:e[c],enumerable:!0})},i=(n,e,c,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of y(e))!f.call(n,l)&&l!==c&&r(n,l,{get:()=>e[l],enumerable:!(d=a(e,l))||d.enumerable});return n};var b=(n,e,c)=>(c=n!=null?u(g(n)):{},i(e||!n||!n.__esModule?r(c,\"default\",{value:n,enumerable:!0}):c,n)),p=n=>i(r({},\"__esModule\",{value:!0}),n);var s=S((B,o)=>{o.exports=_jsx_runtime});var E={};I(E,{default:()=>m,frontmatter:()=>D});var t=b(s()),D={title:\"Explain the difference between `document.querySelector()` and `document.getElementById()`\"};function h(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"document.querySelector()\"}),\" and \",(0,t.jsx)(e.code,{children:\"document.getElementById()\"}),\" are both methods used to select elements from the DOM, but they have key differences. \",(0,t.jsx)(e.code,{children:\"document.querySelector()\"}),\" can select any element using a CSS selector and returns the first match, while \",(0,t.jsx)(e.code,{children:\"document.getElementById()\"}),\" selects an element by its ID and returns the element with that specific ID.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`// Using document.querySelector()\nconst element = document.querySelector('.my-class');\n\n// Using document.getElementById()\nconst elementById = document.getElementById('my-id');\n`})}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsxs)(e.h2,{children:[\"Difference between \",(0,t.jsx)(e.code,{children:\"document.querySelector()\"}),\" and \",(0,t.jsx)(e.code,{children:\"document.getElementById()\"})]}),`\n`,(0,t.jsx)(e.h3,{children:(0,t.jsx)(e.code,{children:\"document.querySelector()\"})}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"Can select elements using any valid CSS selector, including class, ID, tag, attribute, and pseudo-classes\"}),`\n`,(0,t.jsx)(e.li,{children:\"Returns the first element that matches the specified selector\"}),`\n`,(0,t.jsx)(e.li,{children:\"More versatile but slightly slower due to the flexibility of CSS selectors\"}),`\n`]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`// Select the first element with the class 'my-class'\nconst element = document.querySelector('.my-class');\n\n// Select the first <div> element\nconst divElement = document.querySelector('div');\n\n// Select the first element with the attribute data-role='button'\nconst buttonElement = document.querySelector('[data-role=\"button\"]');\n`})}),`\n`,(0,t.jsx)(e.h3,{children:(0,t.jsx)(e.code,{children:\"document.getElementById()\"})}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"Selects an element by its ID attribute\"}),`\n`,(0,t.jsx)(e.li,{children:\"Returns the element with the specified ID\"}),`\n`,(0,t.jsx)(e.li,{children:\"Faster and more efficient for selecting elements by ID, but less versatile\"}),`\n`]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`// Select the element with the ID 'my-id'\nconst elementById = document.getElementById('my-id');\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Key differences\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Selector type\"}),\": \",(0,t.jsx)(e.code,{children:\"document.querySelector()\"}),\" uses CSS selectors, while \",(0,t.jsx)(e.code,{children:\"document.getElementById()\"}),\" uses only the ID attribute.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Return value\"}),\": \",(0,t.jsx)(e.code,{children:\"document.querySelector()\"}),\" returns the first matching element, whereas \",(0,t.jsx)(e.code,{children:\"document.getElementById()\"}),\" returns the element with the specified ID.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Performance\"}),\": \",(0,t.jsx)(e.code,{children:\"document.getElementById()\"}),\" is generally faster because it directly accesses the element by ID, while \",(0,t.jsx)(e.code,{children:\"document.querySelector()\"}),\" has to parse the CSS selector.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector\",children:\"MDN Web Docs: document.querySelector()\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById\",children:\"MDN Web Docs: document.getElementById()\"})}),`\n`]})]})}function m(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(h,{...n})}):h(n)}return p(E);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/zh-CN.json
index 14f352241..d7f9c9b8a 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/zh-CN.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var I=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),S=(c,e)=>{for(var t in e)l(c,t,{get:e[t],enumerable:!0})},o=(c,e,t,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of a(e))!g.call(c,d)&&d!==t&&l(c,d,{get:()=>e[d],enumerable:!(r=s(e,d))||r.enumerable});return c};var D=(c,e,t)=>(t=c!=null?u(y(c)):{},o(e||!c||!c.__esModule?l(t,\"default\",{value:c,enumerable:!0}):t,c)),p=c=>o(l({},\"__esModule\",{value:!0}),c);var m=I((x,i)=>{i.exports=_jsx_runtime});var j={};S(j,{default:()=>E,frontmatter:()=>q});var n=D(m()),q={title:\"\\u89E3\\u91CA `document.querySelector()` \\u548C `document.getElementById()` \\u4E4B\\u95F4\\u7684\\u533A\\u522B\"};function h(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"document.querySelector()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"document.getElementById()\"}),\" \\u90FD\\u662F\\u7528\\u4E8E\\u4ECE DOM \\u4E2D\\u9009\\u62E9\\u5143\\u7D20\\u7684\\u65B9\\u6CD5\\uFF0C\\u4F46\\u5B83\\u4EEC\\u6709\\u5173\\u952E\\u7684\\u533A\\u522B\\u3002\",(0,n.jsx)(e.code,{children:\"document.querySelector()\"}),\" \\u53EF\\u4EE5\\u4F7F\\u7528 CSS \\u9009\\u62E9\\u5668\\u9009\\u62E9\\u4EFB\\u4F55\\u5143\\u7D20\\u5E76\\u8FD4\\u56DE\\u7B2C\\u4E00\\u4E2A\\u5339\\u914D\\u9879\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"document.getElementById()\"}),\" \\u901A\\u8FC7\\u5176 ID \\u9009\\u62E9\\u4E00\\u4E2A\\u5143\\u7D20\\u5E76\\u8FD4\\u56DE\\u5177\\u6709\\u8BE5\\u7279\\u5B9A ID \\u7684\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u4F7F\\u7528 document.querySelector()\nconst element = document.querySelector('.my-class');\n\n// \\u4F7F\\u7528 document.getElementById()\nconst elementById = document.getElementById('my-id');\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"document.querySelector()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"document.getElementById()\"}),\" \\u4E4B\\u95F4\\u7684\\u533A\\u522B\"]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"document.querySelector()\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u53EF\\u4EE5\\u4F7F\\u7528\\u4EFB\\u4F55\\u6709\\u6548\\u7684 CSS \\u9009\\u62E9\\u5668\\u9009\\u62E9\\u5143\\u7D20\\uFF0C\\u5305\\u62EC\\u7C7B\\u3001ID\\u3001\\u6807\\u7B7E\\u3001\\u5C5E\\u6027\\u548C\\u4F2A\\u7C7B\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u8FD4\\u56DE\\u4E0E\\u6307\\u5B9A\\u9009\\u62E9\\u5668\\u5339\\u914D\\u7684\\u7B2C\\u4E00\\u4E2A\\u5143\\u7D20\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u66F4\\u901A\\u7528\\uFF0C\\u4F46\\u7531\\u4E8E CSS \\u9009\\u62E9\\u5668\\u7684\\u7075\\u6D3B\\u6027\\uFF0C\\u901F\\u5EA6\\u7A0D\\u6162\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u9009\\u62E9\\u5177\\u6709\\u7C7B 'my-class' \\u7684\\u7B2C\\u4E00\\u4E2A\\u5143\\u7D20\nconst element = document.querySelector('.my-class');\n\n// \\u9009\\u62E9\\u7B2C\\u4E00\\u4E2A <div> \\u5143\\u7D20\nconst divElement = document.querySelector('div');\n\n// \\u9009\\u62E9\\u5177\\u6709\\u5C5E\\u6027 data-role='button' \\u7684\\u7B2C\\u4E00\\u4E2A\\u5143\\u7D20\nconst buttonElement = document.querySelector('[data-role=\"button\"]');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"document.getElementById()\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u901A\\u8FC7\\u5176 ID \\u5C5E\\u6027\\u9009\\u62E9\\u4E00\\u4E2A\\u5143\\u7D20\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u8FD4\\u56DE\\u5177\\u6709\\u6307\\u5B9A ID \\u7684\\u5143\\u7D20\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u901A\\u8FC7 ID \\u9009\\u62E9\\u5143\\u7D20\\u66F4\\u5FEB\\u66F4\\u6709\\u6548\\uFF0C\\u4F46\\u901A\\u7528\\u6027\\u8F83\\u5DEE\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u9009\\u62E9\\u5177\\u6709 ID 'my-id' \\u7684\\u5143\\u7D20\nconst elementById = document.getElementById('my-id');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5173\\u952E\\u533A\\u522B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u9009\\u62E9\\u5668\\u7C7B\\u578B\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"document.querySelector()\"}),\" \\u4F7F\\u7528 CSS \\u9009\\u62E9\\u5668\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"document.getElementById()\"}),\" \\u4EC5\\u4F7F\\u7528 ID \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8FD4\\u56DE\\u503C\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"document.querySelector()\"}),\" \\u8FD4\\u56DE\\u7B2C\\u4E00\\u4E2A\\u5339\\u914D\\u7684\\u5143\\u7D20\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"document.getElementById()\"}),\" \\u8FD4\\u56DE\\u5177\\u6709\\u6307\\u5B9A ID \\u7684\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6027\\u80FD\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"document.getElementById()\"}),\" \\u901A\\u5E38\\u66F4\\u5FEB\\uFF0C\\u56E0\\u4E3A\\u5B83\\u76F4\\u63A5\\u901A\\u8FC7 ID \\u8BBF\\u95EE\\u5143\\u7D20\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"document.querySelector()\"}),\" \\u5FC5\\u987B\\u89E3\\u6790 CSS \\u9009\\u62E9\\u5668\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Document/querySelector\",children:\"MDN Web Docs: document.querySelector()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById\",children:\"MDN Web Docs: document.getElementById()\"})}),`\n`]})]})}function B(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(h,c)})):h(c)}var E=B;return p(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var S=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),D=(c,e)=>{for(var t in e)l(c,t,{get:e[t],enumerable:!0})},o=(c,e,t,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of a(e))!I.call(c,d)&&d!==t&&l(c,d,{get:()=>e[d],enumerable:!(r=y(e,d))||r.enumerable});return c};var p=(c,e,t)=>(t=c!=null?s(g(c)):{},o(e||!c||!c.__esModule?l(t,\"default\",{value:c,enumerable:!0}):t,c)),q=c=>o(l({},\"__esModule\",{value:!0}),c);var m=S((j,i)=>{i.exports=_jsx_runtime});var E={};D(E,{default:()=>u,frontmatter:()=>B});var n=p(m()),B={title:\"\\u89E3\\u91CA `document.querySelector()` \\u548C `document.getElementById()` \\u4E4B\\u95F4\\u7684\\u533A\\u522B\"};function h(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"document.querySelector()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"document.getElementById()\"}),\" \\u90FD\\u662F\\u7528\\u4E8E\\u4ECE DOM \\u4E2D\\u9009\\u62E9\\u5143\\u7D20\\u7684\\u65B9\\u6CD5\\uFF0C\\u4F46\\u5B83\\u4EEC\\u6709\\u5173\\u952E\\u7684\\u533A\\u522B\\u3002\",(0,n.jsx)(e.code,{children:\"document.querySelector()\"}),\" \\u53EF\\u4EE5\\u4F7F\\u7528 CSS \\u9009\\u62E9\\u5668\\u9009\\u62E9\\u4EFB\\u4F55\\u5143\\u7D20\\u5E76\\u8FD4\\u56DE\\u7B2C\\u4E00\\u4E2A\\u5339\\u914D\\u9879\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"document.getElementById()\"}),\" \\u901A\\u8FC7\\u5176 ID \\u9009\\u62E9\\u4E00\\u4E2A\\u5143\\u7D20\\u5E76\\u8FD4\\u56DE\\u5177\\u6709\\u8BE5\\u7279\\u5B9A ID \\u7684\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u4F7F\\u7528 document.querySelector()\nconst element = document.querySelector('.my-class');\n\n// \\u4F7F\\u7528 document.getElementById()\nconst elementById = document.getElementById('my-id');\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"document.querySelector()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"document.getElementById()\"}),\" \\u4E4B\\u95F4\\u7684\\u533A\\u522B\"]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"document.querySelector()\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u53EF\\u4EE5\\u4F7F\\u7528\\u4EFB\\u4F55\\u6709\\u6548\\u7684 CSS \\u9009\\u62E9\\u5668\\u9009\\u62E9\\u5143\\u7D20\\uFF0C\\u5305\\u62EC\\u7C7B\\u3001ID\\u3001\\u6807\\u7B7E\\u3001\\u5C5E\\u6027\\u548C\\u4F2A\\u7C7B\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u8FD4\\u56DE\\u4E0E\\u6307\\u5B9A\\u9009\\u62E9\\u5668\\u5339\\u914D\\u7684\\u7B2C\\u4E00\\u4E2A\\u5143\\u7D20\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u66F4\\u901A\\u7528\\uFF0C\\u4F46\\u7531\\u4E8E CSS \\u9009\\u62E9\\u5668\\u7684\\u7075\\u6D3B\\u6027\\uFF0C\\u901F\\u5EA6\\u7A0D\\u6162\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u9009\\u62E9\\u5177\\u6709\\u7C7B 'my-class' \\u7684\\u7B2C\\u4E00\\u4E2A\\u5143\\u7D20\nconst element = document.querySelector('.my-class');\n\n// \\u9009\\u62E9\\u7B2C\\u4E00\\u4E2A <div> \\u5143\\u7D20\nconst divElement = document.querySelector('div');\n\n// \\u9009\\u62E9\\u5177\\u6709\\u5C5E\\u6027 data-role='button' \\u7684\\u7B2C\\u4E00\\u4E2A\\u5143\\u7D20\nconst buttonElement = document.querySelector('[data-role=\"button\"]');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"document.getElementById()\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u901A\\u8FC7\\u5176 ID \\u5C5E\\u6027\\u9009\\u62E9\\u4E00\\u4E2A\\u5143\\u7D20\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u8FD4\\u56DE\\u5177\\u6709\\u6307\\u5B9A ID \\u7684\\u5143\\u7D20\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u901A\\u8FC7 ID \\u9009\\u62E9\\u5143\\u7D20\\u66F4\\u5FEB\\u66F4\\u6709\\u6548\\uFF0C\\u4F46\\u901A\\u7528\\u6027\\u8F83\\u5DEE\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u9009\\u62E9\\u5177\\u6709 ID 'my-id' \\u7684\\u5143\\u7D20\nconst elementById = document.getElementById('my-id');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5173\\u952E\\u533A\\u522B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u9009\\u62E9\\u5668\\u7C7B\\u578B\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"document.querySelector()\"}),\" \\u4F7F\\u7528 CSS \\u9009\\u62E9\\u5668\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"document.getElementById()\"}),\" \\u4EC5\\u4F7F\\u7528 ID \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8FD4\\u56DE\\u503C\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"document.querySelector()\"}),\" \\u8FD4\\u56DE\\u7B2C\\u4E00\\u4E2A\\u5339\\u914D\\u7684\\u5143\\u7D20\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"document.getElementById()\"}),\" \\u8FD4\\u56DE\\u5177\\u6709\\u6307\\u5B9A ID \\u7684\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6027\\u80FD\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"document.getElementById()\"}),\" \\u901A\\u5E38\\u66F4\\u5FEB\\uFF0C\\u56E0\\u4E3A\\u5B83\\u76F4\\u63A5\\u901A\\u8FC7 ID \\u8BBF\\u95EE\\u5143\\u7D20\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"document.querySelector()\"}),\" \\u5FC5\\u987B\\u89E3\\u6790 CSS \\u9009\\u62E9\\u5668\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Document/querySelector\",children:\"MDN Web Docs: document.querySelector()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById\",children:\"MDN Web Docs: document.getElementById()\"})}),`\n`]})]})}function u(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(h,{...c})}):h(c)}return q(E);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/en-US.json
index 65da843eb..35ed35ef7 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),j=(o,e)=>{for(var t in e)r(o,t,{get:e[t],enumerable:!0})},c=(o,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!b.call(o,a)&&a!==t&&r(o,a,{get:()=>e[a],enumerable:!(i=p(e,a))||i.enumerable});return o};var f=(o,e,t)=>(t=o!=null?d(u(o)):{},c(e||!o||!o.__esModule?r(t,\"default\",{value:o,enumerable:!0}):t,o)),v=o=>c(r({},\"__esModule\",{value:!0}),o);var l=g((A,s)=>{s.exports=_jsx_runtime});var D={};j(D,{default:()=>w,frontmatter:()=>y});var n=f(l()),y={title:\"Explain the difference between dot notation and bracket notation for accessing object properties\"};function h(o){let e=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Dot notation and bracket notation are two ways to access properties of an object in JavaScript. Dot notation is more concise and readable but can only be used with valid JavaScript identifiers. Bracket notation is more flexible and can be used with property names that are not valid identifiers, such as those containing spaces or special characters.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { name: 'Alice', 'favorite color': 'blue' };\n\n// Dot notation\nconsole.log(obj.name); // Alice\n\n// Bracket notation\nconsole.log(obj['favorite color']); // blue\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Dot notation vs. bracket notation\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Dot notation\"}),`\n`,(0,n.jsx)(e.p,{children:\"Dot notation is the most common and straightforward way to access object properties. It is concise and easy to read but has some limitations.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Syntax\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`object.property;\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  name: 'Alice',\n  age: 30,\n};\n\nconsole.log(person.name); // Alice\nconsole.log(person.age); // 30\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Limitations\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Property names must be valid JavaScript identifiers (e.g., no spaces, special characters, or starting with a number)\"}),`\n`,(0,n.jsx)(e.li,{children:\"Property names cannot be dynamic (i.e., they must be hardcoded)\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Bracket notation\"}),`\n`,(0,n.jsx)(e.p,{children:\"Bracket notation is more flexible and can be used in situations where dot notation cannot.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Syntax\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`object['property'];\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  name: 'Alice',\n  'favorite color': 'blue',\n  1: 'one',\n};\n\nconsole.log(person['name']); // Alice\nconsole.log(person['favorite color']); // blue\nconsole.log(person[1]); // one\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Advantages\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Can access properties with names that are not valid JavaScript identifiers\"}),`\n`,(0,n.jsx)(e.li,{children:\"Can use variables or expressions to dynamically determine the property name\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example with dynamic property names\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  name: 'Alice',\n  age: 30,\n};\n\nconst property = 'name';\nconsole.log(person[property]); // Alice\n`})}),`\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/Web/JavaScript/Guide/Working_with_Objects\",children:\"MDN Web Docs: Working with objects\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/object\",children:\"JavaScript.info: Objects\"})}),`\n`]})]})}function x(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(h,o)})):h(o)}var w=x;return v(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),j=(o,e)=>{for(var t in e)a(o,t,{get:e[t],enumerable:!0})},c=(o,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!g.call(o,r)&&r!==t&&a(o,r,{get:()=>e[r],enumerable:!(i=m(e,r))||i.enumerable});return o};var v=(o,e,t)=>(t=o!=null?p(b(o)):{},c(e||!o||!o.__esModule?a(t,\"default\",{value:o,enumerable:!0}):t,o)),y=o=>c(a({},\"__esModule\",{value:!0}),o);var s=f((k,l)=>{l.exports=_jsx_runtime});var w={};j(w,{default:()=>d,frontmatter:()=>x});var n=v(s()),x={title:\"Explain the difference between dot notation and bracket notation for accessing object properties\"};function h(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Dot notation and bracket notation are two ways to access properties of an object in JavaScript. Dot notation is more concise and readable but can only be used with valid JavaScript identifiers. Bracket notation is more flexible and can be used with property names that are not valid identifiers, such as those containing spaces or special characters.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { name: 'Alice', 'favorite color': 'blue' };\n\n// Dot notation\nconsole.log(obj.name); // Alice\n\n// Bracket notation\nconsole.log(obj['favorite color']); // blue\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Dot notation vs. bracket notation\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Dot notation\"}),`\n`,(0,n.jsx)(e.p,{children:\"Dot notation is the most common and straightforward way to access object properties. It is concise and easy to read but has some limitations.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Syntax\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`object.property;\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  name: 'Alice',\n  age: 30,\n};\n\nconsole.log(person.name); // Alice\nconsole.log(person.age); // 30\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Limitations\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Property names must be valid JavaScript identifiers (e.g., no spaces, special characters, or starting with a number)\"}),`\n`,(0,n.jsx)(e.li,{children:\"Property names cannot be dynamic (i.e., they must be hardcoded)\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Bracket notation\"}),`\n`,(0,n.jsx)(e.p,{children:\"Bracket notation is more flexible and can be used in situations where dot notation cannot.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Syntax\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`object['property'];\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  name: 'Alice',\n  'favorite color': 'blue',\n  1: 'one',\n};\n\nconsole.log(person['name']); // Alice\nconsole.log(person['favorite color']); // blue\nconsole.log(person[1]); // one\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Advantages\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Can access properties with names that are not valid JavaScript identifiers\"}),`\n`,(0,n.jsx)(e.li,{children:\"Can use variables or expressions to dynamically determine the property name\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example with dynamic property names\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  name: 'Alice',\n  age: 30,\n};\n\nconst property = 'name';\nconsole.log(person[property]); // Alice\n`})}),`\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/Web/JavaScript/Guide/Working_with_Objects\",children:\"MDN Web Docs: Working with objects\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/object\",children:\"JavaScript.info: Objects\"})}),`\n`]})]})}function d(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(h,{...o})}):h(o)}return y(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/zh-CN.json
index 7e8165250..5f0adf5f5 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var j=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),b=(r,n)=>{for(var c in n)o(r,c,{get:n[c],enumerable:!0})},a=(r,n,c,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of g(n))!m.call(r,l)&&l!==c&&o(r,l,{get:()=>n[l],enumerable:!(i=p(n,l))||i.enumerable});return r};var v=(r,n,c)=>(c=r!=null?d(u(r)):{},a(n||!r||!r.__esModule?o(c,\"default\",{value:r,enumerable:!0}):c,r)),f=r=>a(o({},\"__esModule\",{value:!0}),r);var h=j((D,t)=>{t.exports=_jsx_runtime});var N={};b(N,{default:()=>A,frontmatter:()=>x});var e=v(h()),x={title:\"\\u89E3\\u91CA\\u4F7F\\u7528\\u70B9\\u7B26\\u53F7\\u548C\\u65B9\\u62EC\\u53F7\\u7B26\\u53F7\\u8BBF\\u95EE\\u5BF9\\u8C61\\u5C5E\\u6027\\u7684\\u533A\\u522B\"};function s(r){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u70B9\\u7B26\\u53F7\\u548C\\u65B9\\u62EC\\u53F7\\u7B26\\u53F7\\u662F JavaScript \\u4E2D\\u8BBF\\u95EE\\u5BF9\\u8C61\\u5C5E\\u6027\\u7684\\u4E24\\u79CD\\u65B9\\u5F0F\\u3002\\u70B9\\u7B26\\u53F7\\u66F4\\u7B80\\u6D01\\u6613\\u8BFB\\uFF0C\\u4F46\\u53EA\\u80FD\\u7528\\u4E8E\\u6709\\u6548\\u7684 JavaScript \\u6807\\u8BC6\\u7B26\\u3002\\u65B9\\u62EC\\u53F7\\u7B26\\u53F7\\u66F4\\u7075\\u6D3B\\uFF0C\\u53EF\\u4EE5\\u7528\\u4E8E\\u4E0D\\u662F\\u6709\\u6548\\u6807\\u8BC6\\u7B26\\u7684\\u5C5E\\u6027\\u540D\\u79F0\\uFF0C\\u4F8B\\u5982\\u5305\\u542B\\u7A7A\\u683C\\u6216\\u7279\\u6B8A\\u5B57\\u7B26\\u7684\\u5C5E\\u6027\\u540D\\u79F0\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = { name: 'Alice', 'favorite color': 'blue' };\n\n// Dot notation\nconsole.log(obj.name); // Alice\n\n// Bracket notation\nconsole.log(obj['favorite color']); // blue\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u70B9\\u7B26\\u53F7 vs. \\u65B9\\u62EC\\u53F7\\u7B26\\u53F7\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u70B9\\u7B26\\u53F7\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u70B9\\u7B26\\u53F7\\u662F\\u8BBF\\u95EE\\u5BF9\\u8C61\\u5C5E\\u6027\\u6700\\u5E38\\u89C1\\u548C\\u6700\\u76F4\\u63A5\\u7684\\u65B9\\u5F0F\\u3002\\u5B83\\u7B80\\u6D01\\u6613\\u8BFB\\uFF0C\\u4F46\\u4E5F\\u6709\\u4E00\\u4E9B\\u9650\\u5236\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`object.property;\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const person = {\n  name: 'Alice',\n  age: 30,\n};\n\nconsole.log(person.name); // Alice\nconsole.log(person.age); // 30\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u9650\\u5236\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5C5E\\u6027\\u540D\\u79F0\\u5FC5\\u987B\\u662F\\u6709\\u6548\\u7684 JavaScript \\u6807\\u8BC6\\u7B26\\uFF08\\u4F8B\\u5982\\uFF0C\\u6CA1\\u6709\\u7A7A\\u683C\\u3001\\u7279\\u6B8A\\u5B57\\u7B26\\uFF0C\\u6216\\u4E0D\\u4EE5\\u6570\\u5B57\\u5F00\\u5934\\uFF09\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5C5E\\u6027\\u540D\\u79F0\\u4E0D\\u80FD\\u662F\\u52A8\\u6001\\u7684\\uFF08\\u5373\\uFF0C\\u5B83\\u4EEC\\u5FC5\\u987B\\u662F\\u786C\\u7F16\\u7801\\u7684\\uFF09\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u65B9\\u62EC\\u53F7\\u7B26\\u53F7\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u65B9\\u62EC\\u53F7\\u7B26\\u53F7\\u66F4\\u7075\\u6D3B\\uFF0C\\u53EF\\u4EE5\\u5728\\u70B9\\u7B26\\u53F7\\u65E0\\u6CD5\\u4F7F\\u7528\\u7684\\u60C5\\u51B5\\u4E0B\\u4F7F\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`object['property'];\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const person = {\n  name: 'Alice',\n  'favorite color': 'blue',\n  1: 'one',\n};\n\nconsole.log(person['name']); // Alice\nconsole.log(person['favorite color']); // blue\nconsole.log(person[1]); // one\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u53EF\\u4EE5\\u8BBF\\u95EE\\u540D\\u79F0\\u4E0D\\u662F\\u6709\\u6548 JavaScript \\u6807\\u8BC6\\u7B26\\u7684\\u5C5E\\u6027\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u53EF\\u4EE5\\u4F7F\\u7528\\u53D8\\u91CF\\u6216\\u8868\\u8FBE\\u5F0F\\u6765\\u52A8\\u6001\\u786E\\u5B9A\\u5C5E\\u6027\\u540D\\u79F0\"}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u52A8\\u6001\\u5C5E\\u6027\\u540D\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const person = {\n  name: 'Alice',\n  age: 30,\n};\n\nconst property = 'name';\nconsole.log(person[property]); // Alice\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects\",children:\"MDN Web Docs: Working with objects\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/object\",children:\"JavaScript.info: Objects\"})}),`\n`]})]})}function _(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(s,r)})):s(r)}var A=_;return f(N);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var v=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),b=(r,n)=>{for(var l in n)o(r,l,{get:n[l],enumerable:!0})},a=(r,n,l,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of u(n))!j.call(r,c)&&c!==l&&o(r,c,{get:()=>n[c],enumerable:!(i=g(n,c))||i.enumerable});return r};var f=(r,n,l)=>(l=r!=null?p(m(r)):{},a(n||!r||!r.__esModule?o(l,\"default\",{value:r,enumerable:!0}):l,r)),x=r=>a(o({},\"__esModule\",{value:!0}),r);var h=v((S,t)=>{t.exports=_jsx_runtime});var A={};b(A,{default:()=>d,frontmatter:()=>_});var e=f(h()),_={title:\"\\u89E3\\u91CA\\u4F7F\\u7528\\u70B9\\u7B26\\u53F7\\u548C\\u65B9\\u62EC\\u53F7\\u7B26\\u53F7\\u8BBF\\u95EE\\u5BF9\\u8C61\\u5C5E\\u6027\\u7684\\u533A\\u522B\"};function s(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u70B9\\u7B26\\u53F7\\u548C\\u65B9\\u62EC\\u53F7\\u7B26\\u53F7\\u662F JavaScript \\u4E2D\\u8BBF\\u95EE\\u5BF9\\u8C61\\u5C5E\\u6027\\u7684\\u4E24\\u79CD\\u65B9\\u5F0F\\u3002\\u70B9\\u7B26\\u53F7\\u66F4\\u7B80\\u6D01\\u6613\\u8BFB\\uFF0C\\u4F46\\u53EA\\u80FD\\u7528\\u4E8E\\u6709\\u6548\\u7684 JavaScript \\u6807\\u8BC6\\u7B26\\u3002\\u65B9\\u62EC\\u53F7\\u7B26\\u53F7\\u66F4\\u7075\\u6D3B\\uFF0C\\u53EF\\u4EE5\\u7528\\u4E8E\\u4E0D\\u662F\\u6709\\u6548\\u6807\\u8BC6\\u7B26\\u7684\\u5C5E\\u6027\\u540D\\u79F0\\uFF0C\\u4F8B\\u5982\\u5305\\u542B\\u7A7A\\u683C\\u6216\\u7279\\u6B8A\\u5B57\\u7B26\\u7684\\u5C5E\\u6027\\u540D\\u79F0\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = { name: 'Alice', 'favorite color': 'blue' };\n\n// Dot notation\nconsole.log(obj.name); // Alice\n\n// Bracket notation\nconsole.log(obj['favorite color']); // blue\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u70B9\\u7B26\\u53F7 vs. \\u65B9\\u62EC\\u53F7\\u7B26\\u53F7\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u70B9\\u7B26\\u53F7\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u70B9\\u7B26\\u53F7\\u662F\\u8BBF\\u95EE\\u5BF9\\u8C61\\u5C5E\\u6027\\u6700\\u5E38\\u89C1\\u548C\\u6700\\u76F4\\u63A5\\u7684\\u65B9\\u5F0F\\u3002\\u5B83\\u7B80\\u6D01\\u6613\\u8BFB\\uFF0C\\u4F46\\u4E5F\\u6709\\u4E00\\u4E9B\\u9650\\u5236\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`object.property;\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const person = {\n  name: 'Alice',\n  age: 30,\n};\n\nconsole.log(person.name); // Alice\nconsole.log(person.age); // 30\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u9650\\u5236\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5C5E\\u6027\\u540D\\u79F0\\u5FC5\\u987B\\u662F\\u6709\\u6548\\u7684 JavaScript \\u6807\\u8BC6\\u7B26\\uFF08\\u4F8B\\u5982\\uFF0C\\u6CA1\\u6709\\u7A7A\\u683C\\u3001\\u7279\\u6B8A\\u5B57\\u7B26\\uFF0C\\u6216\\u4E0D\\u4EE5\\u6570\\u5B57\\u5F00\\u5934\\uFF09\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5C5E\\u6027\\u540D\\u79F0\\u4E0D\\u80FD\\u662F\\u52A8\\u6001\\u7684\\uFF08\\u5373\\uFF0C\\u5B83\\u4EEC\\u5FC5\\u987B\\u662F\\u786C\\u7F16\\u7801\\u7684\\uFF09\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u65B9\\u62EC\\u53F7\\u7B26\\u53F7\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u65B9\\u62EC\\u53F7\\u7B26\\u53F7\\u66F4\\u7075\\u6D3B\\uFF0C\\u53EF\\u4EE5\\u5728\\u70B9\\u7B26\\u53F7\\u65E0\\u6CD5\\u4F7F\\u7528\\u7684\\u60C5\\u51B5\\u4E0B\\u4F7F\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`object['property'];\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const person = {\n  name: 'Alice',\n  'favorite color': 'blue',\n  1: 'one',\n};\n\nconsole.log(person['name']); // Alice\nconsole.log(person['favorite color']); // blue\nconsole.log(person[1]); // one\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u53EF\\u4EE5\\u8BBF\\u95EE\\u540D\\u79F0\\u4E0D\\u662F\\u6709\\u6548 JavaScript \\u6807\\u8BC6\\u7B26\\u7684\\u5C5E\\u6027\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u53EF\\u4EE5\\u4F7F\\u7528\\u53D8\\u91CF\\u6216\\u8868\\u8FBE\\u5F0F\\u6765\\u52A8\\u6001\\u786E\\u5B9A\\u5C5E\\u6027\\u540D\\u79F0\"}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u52A8\\u6001\\u5C5E\\u6027\\u540D\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const person = {\n  name: 'Alice',\n  age: 30,\n};\n\nconst property = 'name';\nconsole.log(person[property]); // Alice\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects\",children:\"MDN Web Docs: Working with objects\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/object\",children:\"JavaScript.info: Objects\"})}),`\n`]})]})}function d(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(s,{...r})}):s(r)}return x(A);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-global-scope-function-scope-and-block-scope/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-global-scope-function-scope-and-block-scope/en-US.json
index f12176ef2..d8ede6071 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-global-scope-function-scope-and-block-scope/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-global-scope-function-scope-and-block-scope/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-global-scope-function-scope-and-block-scope/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),m=(c,e)=>{for(var o in e)r(c,o,{get:e[o],enumerable:!0})},i=(c,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of u(e))!f.call(c,l)&&l!==o&&r(c,l,{get:()=>e[l],enumerable:!(a=b(e,l))||a.enumerable});return c};var v=(c,e,o)=>(o=c!=null?d(p(c)):{},i(e||!c||!c.__esModule?r(o,\"default\",{value:c,enumerable:!0}):o,c)),V=c=>i(r({},\"__esModule\",{value:!0}),c);var s=g((S,t)=>{t.exports=_jsx_runtime});var j={};m(j,{default:()=>y,frontmatter:()=>k});var n=v(s()),k={title:\"Explain the difference between global scope, function scope, and block scope\"};function h(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Global scope means variables are accessible from anywhere in the code. Function scope means variables are accessible only within the function they are declared in. Block scope means variables are accessible only within the block (e.g., within \",(0,n.jsx)(e.code,{children:\"{}\"}),\") they are declared in.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var globalVar = \"I'm global\"; // Global scope\n\nfunction myFunction() {\n  var functionVar = \"I'm in a function\"; // Function scope\n  if (true) {\n    let blockVar = \"I'm in a block\"; // Block scope\n    console.log(blockVar); // Accessible here\n  }\n  // console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined\n}\n// console.log(functionVar); // Uncaught ReferenceError: functionVar is not defined\nmyFunction();\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Global scope, function scope, and block scope\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Global scope\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Variables declared in the global scope are accessible from anywhere in the code. In a browser environment, these variables become properties of the \",(0,n.jsx)(e.code,{children:\"window\"}),\" object.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var globalVar = \"I'm global\";\n\nfunction checkGlobal() {\n  console.log(globalVar); // Accessible here\n}\n\ncheckGlobal(); // Output: \"I'm global\"\nconsole.log(globalVar); // Output: \"I'm global\"\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Function scope\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Variables declared within a function are only accessible within that function. This is true for variables declared using \",(0,n.jsx)(e.code,{children:\"var\"}),\", \",(0,n.jsx)(e.code,{children:\"let\"}),\", or \",(0,n.jsx)(e.code,{children:\"const\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function myFunction() {\n  var functionVar = \"I'm in a function\";\n  console.log(functionVar); // Accessible here\n}\n\nmyFunction(); // Output: \"I'm in a function\"\nconsole.log(functionVar); // Uncaught ReferenceError: functionVar is not defined\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Block scope\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Variables declared with \",(0,n.jsx)(e.code,{children:\"let\"}),\" or \",(0,n.jsx)(e.code,{children:\"const\"}),\" within a block (e.g., within \",(0,n.jsx)(e.code,{children:\"{}\"}),\") are only accessible within that block. This is not true for \",(0,n.jsx)(e.code,{children:\"var\"}),\", which is function-scoped.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`if (true) {\n  let blockVar = \"I'm in a block\";\n  console.log(blockVar); // Accessible here\n}\n// console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined\n\nif (true) {\n  var blockVarVar = \"I'm in a block but declared with var\";\n  console.log(blockVarVar); // Accessible here\n}\nconsole.log(blockVarVar); // Output: \"I'm in a block but declared with var\"\n`})}),`\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/Scope\",children:\"MDN Web Docs: JavaScript scoping\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var\",children:\"MDN Web Docs: var\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let\",children:\"MDN Web Docs: let\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const\",children:\"MDN Web Docs: const\"})}),`\n`]})]})}function w(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(h,c)})):h(c)}var y=w;return V(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var b=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),v=(c,e)=>{for(var o in e)r(c,o,{get:e[o],enumerable:!0})},i=(c,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of p(e))!g.call(c,l)&&l!==o&&r(c,l,{get:()=>e[l],enumerable:!(a=u(e,l))||a.enumerable});return c};var V=(c,e,o)=>(o=c!=null?b(f(c)):{},i(e||!c||!c.__esModule?r(o,\"default\",{value:c,enumerable:!0}):o,c)),k=c=>i(r({},\"__esModule\",{value:!0}),c);var s=m((S,t)=>{t.exports=_jsx_runtime});var y={};v(y,{default:()=>d,frontmatter:()=>w});var n=V(s()),w={title:\"Explain the difference between global scope, function scope, and block scope\"};function h(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Global scope means variables are accessible from anywhere in the code. Function scope means variables are accessible only within the function they are declared in. Block scope means variables are accessible only within the block (e.g., within \",(0,n.jsx)(e.code,{children:\"{}\"}),\") they are declared in.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var globalVar = \"I'm global\"; // Global scope\n\nfunction myFunction() {\n  var functionVar = \"I'm in a function\"; // Function scope\n  if (true) {\n    let blockVar = \"I'm in a block\"; // Block scope\n    console.log(blockVar); // Accessible here\n  }\n  // console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined\n}\n// console.log(functionVar); // Uncaught ReferenceError: functionVar is not defined\nmyFunction();\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Global scope, function scope, and block scope\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Global scope\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Variables declared in the global scope are accessible from anywhere in the code. In a browser environment, these variables become properties of the \",(0,n.jsx)(e.code,{children:\"window\"}),\" object.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var globalVar = \"I'm global\";\n\nfunction checkGlobal() {\n  console.log(globalVar); // Accessible here\n}\n\ncheckGlobal(); // Output: \"I'm global\"\nconsole.log(globalVar); // Output: \"I'm global\"\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Function scope\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Variables declared within a function are only accessible within that function. This is true for variables declared using \",(0,n.jsx)(e.code,{children:\"var\"}),\", \",(0,n.jsx)(e.code,{children:\"let\"}),\", or \",(0,n.jsx)(e.code,{children:\"const\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function myFunction() {\n  var functionVar = \"I'm in a function\";\n  console.log(functionVar); // Accessible here\n}\n\nmyFunction(); // Output: \"I'm in a function\"\nconsole.log(functionVar); // Uncaught ReferenceError: functionVar is not defined\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Block scope\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Variables declared with \",(0,n.jsx)(e.code,{children:\"let\"}),\" or \",(0,n.jsx)(e.code,{children:\"const\"}),\" within a block (e.g., within \",(0,n.jsx)(e.code,{children:\"{}\"}),\") are only accessible within that block. This is not true for \",(0,n.jsx)(e.code,{children:\"var\"}),\", which is function-scoped.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`if (true) {\n  let blockVar = \"I'm in a block\";\n  console.log(blockVar); // Accessible here\n}\n// console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined\n\nif (true) {\n  var blockVarVar = \"I'm in a block but declared with var\";\n  console.log(blockVarVar); // Accessible here\n}\nconsole.log(blockVarVar); // Output: \"I'm in a block but declared with var\"\n`})}),`\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/Scope\",children:\"MDN Web Docs: JavaScript scoping\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var\",children:\"MDN Web Docs: var\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let\",children:\"MDN Web Docs: let\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const\",children:\"MDN Web Docs: const\"})}),`\n`]})]})}function d(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(h,{...c})}):h(c)}return k(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-global-scope-function-scope-and-block-scope/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-global-scope-function-scope-and-block-scope/zh-CN.json
index e8a16e663..9db85e44c 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-global-scope-function-scope-and-block-scope/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-global-scope-function-scope-and-block-scope/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-global-scope-function-scope-and-block-scope/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),p=(c,n)=>{for(var r in n)l(c,r,{get:n[r],enumerable:!0})},t=(c,n,r,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of g(n))!f.call(c,o)&&o!==r&&l(c,o,{get:()=>n[o],enumerable:!(a=u(n,o))||a.enumerable});return c};var V=(c,n,r)=>(r=c!=null?s(b(c)):{},t(n||!c||!c.__esModule?l(r,\"default\",{value:c,enumerable:!0}):r,c)),v=c=>t(l({},\"__esModule\",{value:!0}),c);var d=m((x,i)=>{i.exports=_jsx_runtime});var D={};p(D,{default:()=>j,frontmatter:()=>k});var e=V(d()),k={title:\"\\u89E3\\u91CA\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u3001\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\\u548C\\u5757\\u7EA7\\u4F5C\\u7528\\u57DF\\u7684\\u533A\\u522B\"};function h(c){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},c.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u610F\\u5473\\u7740\\u53D8\\u91CF\\u53EF\\u4EE5\\u5728\\u4EE3\\u7801\\u4E2D\\u7684\\u4EFB\\u4F55\\u5730\\u65B9\\u8BBF\\u95EE\\u3002\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\\u610F\\u5473\\u7740\\u53D8\\u91CF\\u53EA\\u80FD\\u5728\\u5176\\u58F0\\u660E\\u7684\\u51FD\\u6570\\u5185\\u90E8\\u8BBF\\u95EE\\u3002\\u5757\\u7EA7\\u4F5C\\u7528\\u57DF\\u610F\\u5473\\u7740\\u53D8\\u91CF\\u53EA\\u80FD\\u5728\\u5176\\u58F0\\u660E\\u7684\\u5757\\uFF08\\u4F8B\\u5982\\uFF0C\\u5728 \",(0,e.jsx)(n.code,{children:\"{}\"}),\" \\u5185\\uFF09\\u4E2D\\u8BBF\\u95EE\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`var globalVar = \"I'm global\"; // \\u5168\\u5C40\\u4F5C\\u7528\\u57DF\n\nfunction myFunction() {\n  var functionVar = \"I'm in a function\"; // \\u51FD\\u6570\\u4F5C\\u7528\\u57DF\n  if (true) {\n    let blockVar = \"I'm in a block\"; // \\u5757\\u7EA7\\u4F5C\\u7528\\u57DF\n    console.log(blockVar); // \\u53EF\\u4EE5\\u5728\\u8FD9\\u91CC\\u8BBF\\u95EE\n  }\n  // console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined\n}\n// console.log(functionVar); // Uncaught ReferenceError: functionVar is not defined\nmyFunction();\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u3001\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\\u548C\\u5757\\u7EA7\\u4F5C\\u7528\\u57DF\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u4E2D\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u53EF\\u4EE5\\u5728\\u4EE3\\u7801\\u4E2D\\u7684\\u4EFB\\u4F55\\u5730\\u65B9\\u8BBF\\u95EE\\u3002\\u5728\\u6D4F\\u89C8\\u5668\\u73AF\\u5883\\u4E2D\\uFF0C\\u8FD9\\u4E9B\\u53D8\\u91CF\\u4F1A\\u6210\\u4E3A \",(0,e.jsx)(n.code,{children:\"window\"}),\" \\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`var globalVar = \"I'm global\";\n\nfunction checkGlobal() {\n  console.log(globalVar); // Accessible here\n}\n\ncheckGlobal(); // Output: \"I'm global\"\nconsole.log(globalVar); // Output: \"I'm global\"\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u51FD\\u6570\\u5185\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u53EA\\u80FD\\u5728\\u8BE5\\u51FD\\u6570\\u5185\\u90E8\\u8BBF\\u95EE\\u3002\\u8FD9\\u5BF9\\u4E8E\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"var\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"let\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"const\"}),\" \\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u90FD\\u662F\\u6B63\\u786E\\u7684\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function myFunction() {\n  var functionVar = \"I'm in a function\";\n  console.log(functionVar); // \\u53EF\\u4EE5\\u5728\\u8FD9\\u91CC\\u8BBF\\u95EE\n}\n\nmyFunction(); // Output: \"I'm in a function\"\nconsole.log(functionVar); // Uncaught ReferenceError: functionVar is not defined\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5757\\u7EA7\\u4F5C\\u7528\\u57DF\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"let\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"const\"}),\" \\u5728\\u5757\\uFF08\\u4F8B\\u5982\\uFF0C\\u5728 \",(0,e.jsx)(n.code,{children:\"{}\"}),\" \\u5185\\uFF09\\u4E2D\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u53EA\\u80FD\\u5728\\u8BE5\\u5757\\u5185\\u8BBF\\u95EE\\u3002\\u8FD9\\u5BF9\\u4E8E \",(0,e.jsx)(n.code,{children:\"var\"}),\" \\u6765\\u8BF4\\u662F\\u4E0D\\u6210\\u7ACB\\u7684\\uFF0C\",(0,e.jsx)(n.code,{children:\"var\"}),\" \\u662F\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\\u7684\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`if (true) {\n  let blockVar = \"I'm in a block\";\n  console.log(blockVar); // \\u53EF\\u4EE5\\u5728\\u8FD9\\u91CC\\u8BBF\\u95EE\n}\n// console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined\n\nif (true) {\n  var blockVarVar = \"I'm in a block but declared with var\";\n  console.log(blockVarVar); // \\u53EF\\u4EE5\\u5728\\u8FD9\\u91CC\\u8BBF\\u95EE\n}\nconsole.log(blockVarVar); // Output: \"I'm in a block but declared with var\"\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Scope\",children:\"MDN Web Docs: JavaScript scoping\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var\",children:\"MDN Web Docs: var\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let\",children:\"MDN Web Docs: let\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const\",children:\"MDN Web Docs: const\"})}),`\n`]})]})}function S(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,Object.assign({},c,{children:(0,e.jsx)(h,c)})):h(c)}var j=S;return v(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var p=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),V=(c,n)=>{for(var r in n)l(c,r,{get:n[r],enumerable:!0})},t=(c,n,r,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of f(n))!m.call(c,o)&&o!==r&&l(c,o,{get:()=>n[o],enumerable:!(a=g(n,o))||a.enumerable});return c};var v=(c,n,r)=>(r=c!=null?u(b(c)):{},t(n||!c||!c.__esModule?l(r,\"default\",{value:c,enumerable:!0}):r,c)),k=c=>t(l({},\"__esModule\",{value:!0}),c);var d=p((j,i)=>{i.exports=_jsx_runtime});var D={};V(D,{default:()=>s,frontmatter:()=>S});var e=v(d()),S={title:\"\\u89E3\\u91CA\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u3001\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\\u548C\\u5757\\u7EA7\\u4F5C\\u7528\\u57DF\\u7684\\u533A\\u522B\"};function h(c){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u610F\\u5473\\u7740\\u53D8\\u91CF\\u53EF\\u4EE5\\u5728\\u4EE3\\u7801\\u4E2D\\u7684\\u4EFB\\u4F55\\u5730\\u65B9\\u8BBF\\u95EE\\u3002\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\\u610F\\u5473\\u7740\\u53D8\\u91CF\\u53EA\\u80FD\\u5728\\u5176\\u58F0\\u660E\\u7684\\u51FD\\u6570\\u5185\\u90E8\\u8BBF\\u95EE\\u3002\\u5757\\u7EA7\\u4F5C\\u7528\\u57DF\\u610F\\u5473\\u7740\\u53D8\\u91CF\\u53EA\\u80FD\\u5728\\u5176\\u58F0\\u660E\\u7684\\u5757\\uFF08\\u4F8B\\u5982\\uFF0C\\u5728 \",(0,e.jsx)(n.code,{children:\"{}\"}),\" \\u5185\\uFF09\\u4E2D\\u8BBF\\u95EE\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`var globalVar = \"I'm global\"; // \\u5168\\u5C40\\u4F5C\\u7528\\u57DF\n\nfunction myFunction() {\n  var functionVar = \"I'm in a function\"; // \\u51FD\\u6570\\u4F5C\\u7528\\u57DF\n  if (true) {\n    let blockVar = \"I'm in a block\"; // \\u5757\\u7EA7\\u4F5C\\u7528\\u57DF\n    console.log(blockVar); // \\u53EF\\u4EE5\\u5728\\u8FD9\\u91CC\\u8BBF\\u95EE\n  }\n  // console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined\n}\n// console.log(functionVar); // Uncaught ReferenceError: functionVar is not defined\nmyFunction();\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u3001\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\\u548C\\u5757\\u7EA7\\u4F5C\\u7528\\u57DF\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u4E2D\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u53EF\\u4EE5\\u5728\\u4EE3\\u7801\\u4E2D\\u7684\\u4EFB\\u4F55\\u5730\\u65B9\\u8BBF\\u95EE\\u3002\\u5728\\u6D4F\\u89C8\\u5668\\u73AF\\u5883\\u4E2D\\uFF0C\\u8FD9\\u4E9B\\u53D8\\u91CF\\u4F1A\\u6210\\u4E3A \",(0,e.jsx)(n.code,{children:\"window\"}),\" \\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`var globalVar = \"I'm global\";\n\nfunction checkGlobal() {\n  console.log(globalVar); // Accessible here\n}\n\ncheckGlobal(); // Output: \"I'm global\"\nconsole.log(globalVar); // Output: \"I'm global\"\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u51FD\\u6570\\u5185\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u53EA\\u80FD\\u5728\\u8BE5\\u51FD\\u6570\\u5185\\u90E8\\u8BBF\\u95EE\\u3002\\u8FD9\\u5BF9\\u4E8E\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"var\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"let\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"const\"}),\" \\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u90FD\\u662F\\u6B63\\u786E\\u7684\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function myFunction() {\n  var functionVar = \"I'm in a function\";\n  console.log(functionVar); // \\u53EF\\u4EE5\\u5728\\u8FD9\\u91CC\\u8BBF\\u95EE\n}\n\nmyFunction(); // Output: \"I'm in a function\"\nconsole.log(functionVar); // Uncaught ReferenceError: functionVar is not defined\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5757\\u7EA7\\u4F5C\\u7528\\u57DF\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"let\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"const\"}),\" \\u5728\\u5757\\uFF08\\u4F8B\\u5982\\uFF0C\\u5728 \",(0,e.jsx)(n.code,{children:\"{}\"}),\" \\u5185\\uFF09\\u4E2D\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u53EA\\u80FD\\u5728\\u8BE5\\u5757\\u5185\\u8BBF\\u95EE\\u3002\\u8FD9\\u5BF9\\u4E8E \",(0,e.jsx)(n.code,{children:\"var\"}),\" \\u6765\\u8BF4\\u662F\\u4E0D\\u6210\\u7ACB\\u7684\\uFF0C\",(0,e.jsx)(n.code,{children:\"var\"}),\" \\u662F\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\\u7684\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`if (true) {\n  let blockVar = \"I'm in a block\";\n  console.log(blockVar); // \\u53EF\\u4EE5\\u5728\\u8FD9\\u91CC\\u8BBF\\u95EE\n}\n// console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined\n\nif (true) {\n  var blockVarVar = \"I'm in a block but declared with var\";\n  console.log(blockVarVar); // \\u53EF\\u4EE5\\u5728\\u8FD9\\u91CC\\u8BBF\\u95EE\n}\nconsole.log(blockVarVar); // Output: \"I'm in a block but declared with var\"\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Scope\",children:\"MDN Web Docs: JavaScript scoping\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var\",children:\"MDN Web Docs: var\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let\",children:\"MDN Web Docs: let\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const\",children:\"MDN Web Docs: const\"})}),`\n`]})]})}function s(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,{...c,children:(0,e.jsx)(h,{...c})}):h(c)}return k(D);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-mutable-and-immutable-objects/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-mutable-and-immutable-objects/en-US.json
index c848f16e6..9f9a3e4e3 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-mutable-and-immutable-objects/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-mutable-and-immutable-objects/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-mutable-and-immutable-objects/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),j=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},c=(t,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of b(e))!p.call(t,r)&&r!==i&&a(t,r,{get:()=>e[r],enumerable:!(o=m(e,r))||o.enumerable});return t};var g=(t,e,i)=>(i=t!=null?h(u(t)):{},c(e||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),y=t=>c(a({},\"__esModule\",{value:!0}),t);var l=f((z,s)=>{s.exports=_jsx_runtime});var x={};j(x,{default:()=>w,frontmatter:()=>v});var n=g(l()),v={title:\"Explain the difference between mutable and immutable objects in JavaScript\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",strong:\"strong\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",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:[(0,n.jsx)(e.strong,{children:\"Mutable objects\"}),\" allow for modification of properties and values after creation, which is the default behavior for most objects.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const mutableObject = {\n  name: 'John',\n  age: 30,\n};\n\n// Modify the object\nmutableObject.name = 'Jane';\n\n// The object has been modified\nconsole.log(mutableObject); // Output: { name: 'Jane', age: 30 }\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Immutable objects\"}),\" cannot be directly modified after creation. Its content cannot be changed without creating an entirely new value.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const immutableObject = Object.freeze({\n  name: 'John',\n  age: 30,\n});\n\n// Attempt to modify the object\nimmutableObject.name = 'Jane';\n\n// The object remains unchanged\nconsole.log(immutableObject); // Output: { name: 'John', age: 30 }\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"The key difference between mutable and immutable objects is modifiability. Immutable objects cannot be modified after they are created, while mutable objects can be.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Immutability\"}),`\n`,(0,n.jsx)(e.p,{children:\"Immutability is a core principle in functional programming but it has lots to offer to object-oriented programs as well.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Mutable objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"Mutability refers to the ability of an object to have its properties or elements changed after it's created. A mutable object is an object whose state can be modified after it is created. In JavaScript, objects and arrays are mutable by default. They store references to their data in memory. Changing a property or element modifies the original object. Here is an example of a mutable object:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const mutableObject = {\n  name: 'John',\n  age: 30,\n};\n\n// Modify the object\nmutableObject.name = 'Jane';\n\n// The object has been modified\nconsole.log(mutableObject); // Output: { name: 'Jane', age: 30 }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Immutable objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"An immutable object is an object whose state cannot be modified after it is created. Here is an example of an immutable object:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const immutableObject = Object.freeze({\n  name: 'John',\n  age: 30,\n});\n\n// Attempt to modify the object\nimmutableObject.name = 'Jane';\n\n// The object remains unchanged\nconsole.log(immutableObject); // Output: { name: 'John', age: 30 }\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Primitive data types like numbers, strings, booleans, \",(0,n.jsx)(e.code,{children:\"null\"}),\", and \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" are inherently immutable. Once assigned a value, you cannot directly modify them.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let name = 'Alice';\nname.toUpperCase(); // This won't modify the original name variable\nconsole.log(name); // Still prints \"Alice\"\n\n// To change the value, you need to reassign a new string\nname = name.toUpperCase();\nconsole.log(name); // Now prints \"ALICE\"\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Some built-in immutable JavaScript objects are \",(0,n.jsx)(e.code,{children:\"Math\"}),\", \",(0,n.jsx)(e.code,{children:\"Date\"}),\" but custom objects are generally mutable.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"const\"}),\" vs immutable objects\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"A common confusion / misunderstanding is that declaring a variable using \",(0,n.jsx)(e.code,{children:\"const\"}),\" makes the value immutable, which is not true at all.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"const\"}),\" prevents reassignment of the variable itself, but does not make the value it holds immutable. This means:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"For primitive values (numbers, strings, booleans), \",(0,n.jsx)(e.code,{children:\"const\"}),\" makes the value immutable since primitives are immutable by nature.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"For non-primitive values like objects and arrays, \",(0,n.jsx)(e.code,{children:\"const\"}),\" only prevents reassigning a new object/array to the variable, but the properties/elements of the existing object/array can still be modified.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"On the other hand, an immutable object is an object whose state (properties and values) cannot be modified after it is created. This is achieved by using methods like \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" which makes the object immutable by preventing any changes to its properties.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Using const\nconst person = { name: 'John' };\nperson = { name: 'Jane' }; // Error: Assignment to constant variable\nperson.name = 'Jane'; // Allowed, person.name is now 'Jane'\n\n// Using Object.freeze() to create an immutable object\nconst frozenPerson = Object.freeze({ name: 'John' });\nfrozenPerson.name = 'Jane'; // Fails silently (no error, but no change)\nfrozenPerson = { name: 'Jane' }; // Error: Assignment to constant variable\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In the first example with \",(0,n.jsx)(e.code,{children:\"const\"}),\", reassigning a new object to \",(0,n.jsx)(e.code,{children:\"person\"}),\" is not allowed, but modifying the \",(0,n.jsx)(e.code,{children:\"name\"}),\" property is permitted. In the second example, \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" makes the \",(0,n.jsx)(e.code,{children:\"frozenPerson\"}),\" object immutable, preventing any changes to its properties.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"It's important to note that \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" creates a shallow immutable object. If the object contains nested objects or arrays, those nested data structures are still mutable unless frozen separately.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Therefore, while \",(0,n.jsx)(e.code,{children:\"const\"}),\" provides immutability for primitive values, creating truly immutable objects requires using \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" or other immutability techniques like deep freezing or using immutable data structures from libraries like \",(0,n.jsx)(e.a,{href:\"https://immerjs.github.io/immer/\",children:\"Immer\"}),\" or \",(0,n.jsx)(e.a,{href:\"https://immutable-js.com/\",children:\"Immutable.js\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Various ways to implement immutability in plain JavaScript objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here are a few ways to add/simulate different forms of immutability in plain JavaScript objects.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Immutable object properties\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"By combining \",(0,n.jsx)(e.code,{children:\"writable: false\"}),\" and \",(0,n.jsx)(e.code,{children:\"configurable: false\"}),\", you can essentially create a constant (cannot be changed, redefined or deleted) as an object property, like:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const myObject = {};\nObject.defineProperty(myObject, 'number', {\n  value: 42,\n  writable: false,\n  configurable: false,\n});\nconsole.log(myObject.number); // 42\nmyObject.number = 43;\nconsole.log(myObject.number); // 42\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Preventing extensions on objects\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"If you want to prevent an object from having new properties added to it, but otherwise leave the rest of the object's properties alone, call \",(0,n.jsx)(e.code,{children:\"Object.preventExtensions(...)\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let myObject = {\n  a: 2,\n};\n\nObject.preventExtensions(myObject);\n\nmyObject.b = 3;\nconsole.log(myObject.b); // undefined\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In non-strict mode, the creation of \",(0,n.jsx)(e.code,{children:\"b\"}),\" fails silently. In strict mode, it throws a \",(0,n.jsx)(e.code,{children:\"TypeError\"}),\".\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Sealing an object\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.seal()\"}),' creates a \"sealed\" object, which means it takes an existing object and essentially calls ',(0,n.jsx)(e.code,{children:\"Object.preventExtensions()\"}),\" on it, but also marks all its existing properties as \",(0,n.jsx)(e.code,{children:\"configurable: false\"}),\". Therefore, not only can you not add any more properties, but you also cannot reconfigure or delete any existing properties, though you can still modify their values.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create an object\nconst person = {\n  name: 'John Doe',\n  age: 30,\n};\n\n// Seal the object\nObject.seal(person);\n\n// Try to add a new property (this will fail silently)\nperson.city = 'New York'; // This has no effect\n\n// Try to delete an existing property (this will fail silently)\ndelete person.age; // This has no effect\n\n// Modify an existing property (this will work)\nperson.age = 35;\n\nconsole.log(person); // Output: { name: 'John Doe', age: 35 }\n\n// Try to re-configure an existing property descriptor (this will fail silently)\nObject.defineProperty(person, 'name', { writable: false }); // Fails silently in non strict mode\n\n// Check if the object is sealed\nconsole.log(Object.isSealed(person)); // Output: true\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Freezing an object\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" creates a frozen object, which means it takes an existing object and essentially calls \",(0,n.jsx)(e.code,{children:\"Object.seal()\"}),' on it, but it also marks all \"data accessor\" properties as writable:false, so that their values cannot be changed.']}),`\n`,(0,n.jsx)(e.p,{children:\"This approach is the highest level of immutability that you can attain for an object itself, as it prevents any changes to the object or to any of its direct properties (though, as mentioned above, the contents of any referenced other objects are unaffected).\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let immutableObject = Object.freeze({});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Freezing an object does not allow new properties to be added to an object and prevents users from removing or altering the existing properties. \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" preserves the enumerability, configurability, writability and the \",(0,n.jsx)(e.code,{children:\"prototype\"}),\" of the object. It returns the passed object and does not create a frozen copy.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" makes the object immutable. However, it is not necessarily constant. \",(0,n.jsx)(e.code,{children:\"Object.freeze\"}),\" prevents modifications to the object itself and its direct properties, nested objects within the frozen object can still be modified.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let obj = {\n  user: {},\n};\n\nObject.freeze(obj);\nobj.user.name = 'John';\n\nconsole.log(obj.user.name); //Output: 'John'\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"What are the pros and cons of immutability?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Pros\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Easier change detection\"}),\": Object equality can be determined in a performant and easy manner through referential equality. This is useful for comparing object differences in React and Redux.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Less complicated\"}),\": Programs with immutable objects are less complicated to think about, since you don't need to worry about how an object may evolve over time.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Easy sharing via references: One copy of an object is just as good as another, so you can cache objects or reuse the same object multiple times.\"}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Thread-safe\"}),\": Immutable objects can be safely used between threads in a multi-threaded environment since there is no risk of them being modified in other concurrently running threads. In the most cases, JavaScript runs in a single-threaded environment\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Less memory needed\"}),\": Using libraries like \",(0,n.jsx)(e.a,{href:\"https://immerjs.github.io/immer/\",children:\"Immer\"}),\" and \",(0,n.jsx)(e.a,{href:\"https://immutable-js.com/\",children:\"Immutable.js\"}),\", objects are modified using structural sharing and less memory is needed for having multiple objects with similar structures.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"No need for defensive copying\"}),\": Defensive copies are no longer necessary when immutable objects are returning from or passed to functions, since there is no possibility an immutable object will be modified by it.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Cons\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Complex to create yourself\"}),\": Naive implementations of immutable data structures and its operations can result in extremely poor performance because new objects are created each time. It is recommended to use libraries for efficient immutable data structures and operations that leverage on structural sharing.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Potential negative performance\"}),\": Allocation (and deallocation) of many small objects rather than modifying existing ones can cause a performance impact. The complexity of either the allocator or the garbage collector usually depends on the number of objects on the heap.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Complexity for cyclic data structures\"}),\": Cyclic data structures such as graphs are difficult to implement.\"]}),`\n`]}),`\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/Web/JavaScript/Reference/Global_Objects/Object/defineProperty\",children:\"Object.defineProperty() | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze\",children:\"Object.freeze() | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal\",children:\"Object.seal() | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions\",children:\"Object.preventExtensions() | MDN\"})}),`\n`]})]})}function O(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var w=O;return y(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var j=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},c=(t,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!f.call(t,r)&&r!==i&&a(t,r,{get:()=>e[r],enumerable:!(o=b(e,r))||o.enumerable});return t};var y=(t,e,i)=>(i=t!=null?m(p(t)):{},c(e||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),v=t=>c(a({},\"__esModule\",{value:!0}),t);var s=j((J,l)=>{l.exports=_jsx_runtime});var w={};g(w,{default:()=>h,frontmatter:()=>O});var n=y(s()),O={title:\"Explain the difference between mutable and immutable objects in JavaScript\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Mutable objects\"}),\" allow for modification of properties and values after creation, which is the default behavior for most objects.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const mutableObject = {\n  name: 'John',\n  age: 30,\n};\n\n// Modify the object\nmutableObject.name = 'Jane';\n\n// The object has been modified\nconsole.log(mutableObject); // Output: { name: 'Jane', age: 30 }\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Immutable objects\"}),\" cannot be directly modified after creation. Its content cannot be changed without creating an entirely new value.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const immutableObject = Object.freeze({\n  name: 'John',\n  age: 30,\n});\n\n// Attempt to modify the object\nimmutableObject.name = 'Jane';\n\n// The object remains unchanged\nconsole.log(immutableObject); // Output: { name: 'John', age: 30 }\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"The key difference between mutable and immutable objects is modifiability. Immutable objects cannot be modified after they are created, while mutable objects can be.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Immutability\"}),`\n`,(0,n.jsx)(e.p,{children:\"Immutability is a core principle in functional programming but it has lots to offer to object-oriented programs as well.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Mutable objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"Mutability refers to the ability of an object to have its properties or elements changed after it's created. A mutable object is an object whose state can be modified after it is created. In JavaScript, objects and arrays are mutable by default. They store references to their data in memory. Changing a property or element modifies the original object. Here is an example of a mutable object:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const mutableObject = {\n  name: 'John',\n  age: 30,\n};\n\n// Modify the object\nmutableObject.name = 'Jane';\n\n// The object has been modified\nconsole.log(mutableObject); // Output: { name: 'Jane', age: 30 }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Immutable objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"An immutable object is an object whose state cannot be modified after it is created. Here is an example of an immutable object:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const immutableObject = Object.freeze({\n  name: 'John',\n  age: 30,\n});\n\n// Attempt to modify the object\nimmutableObject.name = 'Jane';\n\n// The object remains unchanged\nconsole.log(immutableObject); // Output: { name: 'John', age: 30 }\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Primitive data types like numbers, strings, booleans, \",(0,n.jsx)(e.code,{children:\"null\"}),\", and \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" are inherently immutable. Once assigned a value, you cannot directly modify them.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let name = 'Alice';\nname.toUpperCase(); // This won't modify the original name variable\nconsole.log(name); // Still prints \"Alice\"\n\n// To change the value, you need to reassign a new string\nname = name.toUpperCase();\nconsole.log(name); // Now prints \"ALICE\"\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Some built-in immutable JavaScript objects are \",(0,n.jsx)(e.code,{children:\"Math\"}),\", \",(0,n.jsx)(e.code,{children:\"Date\"}),\" but custom objects are generally mutable.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"const\"}),\" vs immutable objects\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"A common confusion / misunderstanding is that declaring a variable using \",(0,n.jsx)(e.code,{children:\"const\"}),\" makes the value immutable, which is not true at all.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"const\"}),\" prevents reassignment of the variable itself, but does not make the value it holds immutable. This means:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"For primitive values (numbers, strings, booleans), \",(0,n.jsx)(e.code,{children:\"const\"}),\" makes the value immutable since primitives are immutable by nature.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"For non-primitive values like objects and arrays, \",(0,n.jsx)(e.code,{children:\"const\"}),\" only prevents reassigning a new object/array to the variable, but the properties/elements of the existing object/array can still be modified.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"On the other hand, an immutable object is an object whose state (properties and values) cannot be modified after it is created. This is achieved by using methods like \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" which makes the object immutable by preventing any changes to its properties.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Using const\nconst person = { name: 'John' };\nperson = { name: 'Jane' }; // Error: Assignment to constant variable\nperson.name = 'Jane'; // Allowed, person.name is now 'Jane'\n\n// Using Object.freeze() to create an immutable object\nconst frozenPerson = Object.freeze({ name: 'John' });\nfrozenPerson.name = 'Jane'; // Fails silently (no error, but no change)\nfrozenPerson = { name: 'Jane' }; // Error: Assignment to constant variable\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In the first example with \",(0,n.jsx)(e.code,{children:\"const\"}),\", reassigning a new object to \",(0,n.jsx)(e.code,{children:\"person\"}),\" is not allowed, but modifying the \",(0,n.jsx)(e.code,{children:\"name\"}),\" property is permitted. In the second example, \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" makes the \",(0,n.jsx)(e.code,{children:\"frozenPerson\"}),\" object immutable, preventing any changes to its properties.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"It's important to note that \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" creates a shallow immutable object. If the object contains nested objects or arrays, those nested data structures are still mutable unless frozen separately.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Therefore, while \",(0,n.jsx)(e.code,{children:\"const\"}),\" provides immutability for primitive values, creating truly immutable objects requires using \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" or other immutability techniques like deep freezing or using immutable data structures from libraries like \",(0,n.jsx)(e.a,{href:\"https://immerjs.github.io/immer/\",children:\"Immer\"}),\" or \",(0,n.jsx)(e.a,{href:\"https://immutable-js.com/\",children:\"Immutable.js\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Various ways to implement immutability in plain JavaScript objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here are a few ways to add/simulate different forms of immutability in plain JavaScript objects.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Immutable object properties\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"By combining \",(0,n.jsx)(e.code,{children:\"writable: false\"}),\" and \",(0,n.jsx)(e.code,{children:\"configurable: false\"}),\", you can essentially create a constant (cannot be changed, redefined or deleted) as an object property, like:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const myObject = {};\nObject.defineProperty(myObject, 'number', {\n  value: 42,\n  writable: false,\n  configurable: false,\n});\nconsole.log(myObject.number); // 42\nmyObject.number = 43;\nconsole.log(myObject.number); // 42\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Preventing extensions on objects\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"If you want to prevent an object from having new properties added to it, but otherwise leave the rest of the object's properties alone, call \",(0,n.jsx)(e.code,{children:\"Object.preventExtensions(...)\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let myObject = {\n  a: 2,\n};\n\nObject.preventExtensions(myObject);\n\nmyObject.b = 3;\nconsole.log(myObject.b); // undefined\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In non-strict mode, the creation of \",(0,n.jsx)(e.code,{children:\"b\"}),\" fails silently. In strict mode, it throws a \",(0,n.jsx)(e.code,{children:\"TypeError\"}),\".\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Sealing an object\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.seal()\"}),' creates a \"sealed\" object, which means it takes an existing object and essentially calls ',(0,n.jsx)(e.code,{children:\"Object.preventExtensions()\"}),\" on it, but also marks all its existing properties as \",(0,n.jsx)(e.code,{children:\"configurable: false\"}),\". Therefore, not only can you not add any more properties, but you also cannot reconfigure or delete any existing properties, though you can still modify their values.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create an object\nconst person = {\n  name: 'John Doe',\n  age: 30,\n};\n\n// Seal the object\nObject.seal(person);\n\n// Try to add a new property (this will fail silently)\nperson.city = 'New York'; // This has no effect\n\n// Try to delete an existing property (this will fail silently)\ndelete person.age; // This has no effect\n\n// Modify an existing property (this will work)\nperson.age = 35;\n\nconsole.log(person); // Output: { name: 'John Doe', age: 35 }\n\n// Try to re-configure an existing property descriptor (this will fail silently)\nObject.defineProperty(person, 'name', { writable: false }); // Fails silently in non strict mode\n\n// Check if the object is sealed\nconsole.log(Object.isSealed(person)); // Output: true\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Freezing an object\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" creates a frozen object, which means it takes an existing object and essentially calls \",(0,n.jsx)(e.code,{children:\"Object.seal()\"}),' on it, but it also marks all \"data accessor\" properties as writable:false, so that their values cannot be changed.']}),`\n`,(0,n.jsx)(e.p,{children:\"This approach is the highest level of immutability that you can attain for an object itself, as it prevents any changes to the object or to any of its direct properties (though, as mentioned above, the contents of any referenced other objects are unaffected).\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let immutableObject = Object.freeze({});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Freezing an object does not allow new properties to be added to an object and prevents users from removing or altering the existing properties. \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" preserves the enumerability, configurability, writability and the \",(0,n.jsx)(e.code,{children:\"prototype\"}),\" of the object. It returns the passed object and does not create a frozen copy.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" makes the object immutable. However, it is not necessarily constant. \",(0,n.jsx)(e.code,{children:\"Object.freeze\"}),\" prevents modifications to the object itself and its direct properties, nested objects within the frozen object can still be modified.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let obj = {\n  user: {},\n};\n\nObject.freeze(obj);\nobj.user.name = 'John';\n\nconsole.log(obj.user.name); //Output: 'John'\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"What are the pros and cons of immutability?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Pros\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Easier change detection\"}),\": Object equality can be determined in a performant and easy manner through referential equality. This is useful for comparing object differences in React and Redux.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Less complicated\"}),\": Programs with immutable objects are less complicated to think about, since you don't need to worry about how an object may evolve over time.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Easy sharing via references: One copy of an object is just as good as another, so you can cache objects or reuse the same object multiple times.\"}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Thread-safe\"}),\": Immutable objects can be safely used between threads in a multi-threaded environment since there is no risk of them being modified in other concurrently running threads. In the most cases, JavaScript runs in a single-threaded environment\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Less memory needed\"}),\": Using libraries like \",(0,n.jsx)(e.a,{href:\"https://immerjs.github.io/immer/\",children:\"Immer\"}),\" and \",(0,n.jsx)(e.a,{href:\"https://immutable-js.com/\",children:\"Immutable.js\"}),\", objects are modified using structural sharing and less memory is needed for having multiple objects with similar structures.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"No need for defensive copying\"}),\": Defensive copies are no longer necessary when immutable objects are returning from or passed to functions, since there is no possibility an immutable object will be modified by it.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Cons\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Complex to create yourself\"}),\": Naive implementations of immutable data structures and its operations can result in extremely poor performance because new objects are created each time. It is recommended to use libraries for efficient immutable data structures and operations that leverage on structural sharing.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Potential negative performance\"}),\": Allocation (and deallocation) of many small objects rather than modifying existing ones can cause a performance impact. The complexity of either the allocator or the garbage collector usually depends on the number of objects on the heap.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Complexity for cyclic data structures\"}),\": Cyclic data structures such as graphs are difficult to implement.\"]}),`\n`]}),`\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/Web/JavaScript/Reference/Global_Objects/Object/defineProperty\",children:\"Object.defineProperty() | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze\",children:\"Object.freeze() | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal\",children:\"Object.seal() | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions\",children:\"Object.preventExtensions() | MDN\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return v(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-mutable-and-immutable-objects/pt-BR.json b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-mutable-and-immutable-objects/pt-BR.json
index 7be874d82..ce6857cfe 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-mutable-and-immutable-objects/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-mutable-and-immutable-objects/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-mutable-and-immutable-objects/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var j=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),v=(a,e)=>{for(var s in e)r(a,s,{get:e[s],enumerable:!0})},d=(a,e,s,n)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!h.call(a,i)&&i!==s&&r(a,i,{get:()=>e[i],enumerable:!(n=u(e,i))||n.enumerable});return a};var f=(a,e,s)=>(s=a!=null?l(b(a)):{},d(e||!a||!a.__esModule?r(s,\"default\",{value:a,enumerable:!0}):s,a)),g=a=>d(r({},\"__esModule\",{value:!0}),a);var c=j((E,t)=>{t.exports=_jsx_runtime});var z={};v(z,{default:()=>O,frontmatter:()=>q});var o=f(c()),q={title:\"Explique a diferen\\xE7a entre objetos mut\\xE1veis e imut\\xE1veis\"};function m(a){let e=Object.assign({p:\"p\",h2:\"h2\",code:\"code\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},a.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.p,{children:\"A imutabilidade \\xE9 um princ\\xEDpio central na programa\\xE7\\xE3o funcional e tamb\\xE9m tem muito a oferecer para programas orientados para objetos. Um objeto mut\\xE1vel \\xE9 um objeto cujo estado pode ser modificado depois de criado. Um objeto mut\\xE1vel \\xE9 um objeto cujo estado pode ser modificado depois de criado.\"}),`\n`,(0,o.jsx)(e.h2,{children:\"O que \\xE9 um exemplo de um objeto imut\\xE1vel em JavaScript?\"}),`\n`,(0,o.jsx)(e.p,{children:\"Em JavaScript, alguns tipos internos (n\\xFAmeros, strings) s\\xE3o imut\\xE1veis, mas objetos personalizados geralmente s\\xE3o mut\\xE1veis.\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Alguns objetos JavaScript imut\\xE1veis integrados s\\xE3o \",(0,o.jsx)(e.code,{children:\"Math\"}),\", \",(0,o.jsx)(e.code,{children:\"Date\"}),\".\"]}),`\n`,(0,o.jsx)(e.p,{children:\"Aqui est\\xE3o algumas maneiras de adicionar/simular imutabilidade em objetos JavaScript simples.\"}),`\n`,(0,o.jsx)(e.h3,{children:\"Propriedades Constante de Objeto\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Ao combinar \",(0,o.jsx)(e.code,{children:\"grav\\xE1vel: falso\"}),\" e \",(0,o.jsx)(e.code,{children:\"configur\\xE1vel: falso\"}),\", voc\\xEA pode criar uma constante (n\\xE3o pode ser alterada, redefinida ou apagada) como uma propriedade do objeto, como:\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`let myObject = {};\nObject.defineProperty(myObject, 'number', {\n  value: 42,\n  writable: false,\n  configurable: false,\n});\nconsole.log(myObject.number); // 42\nmyObject.number = 43;\nconsole.log(myObject.number); // 42\n`})}),`\n`,(0,o.jsx)(e.h3,{children:\"Evitar Extens\\xF5es\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Se voc\\xEA quiser evitar que um objeto tenha novas propriedades adicionadas, mas deixando o resto das propriedades do objeto sozinhas, chame \",(0,o.jsx)(e.code,{children:\"Object.preventExtensions(...)\"}),\":\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`let myObject = {\n  a: 2,\n};\n\nObject.preventExtensions(myObject);\n\nmyObject.b = 3;\nmyObject.b; // undefined\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"No modo n\\xE3o restrito, a cria\\xE7\\xE3o de \",(0,o.jsx)(e.code,{children:\"b\"}),\" falha silenciosamente. No modo estrito, ele lan\\xE7a um \",(0,o.jsx)(e.code,{children:\"TypeError\"}),\".\"]}),`\n`,(0,o.jsx)(e.h3,{children:\"Prote\\xE7\\xE3o\"}),`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"Object.seal()\"}),' cria um objeto \"selado\", o que significa que recebe um objeto existente e basicamente chama ',(0,o.jsx)(e.code,{children:\"Object.preventExtensions()\"}),\" nele, mas tamb\\xE9m marca todas as suas propriedades existentes como \",(0,o.jsx)(e.code,{children:\"configurable: false\"}),\".\"]}),`\n`,(0,o.jsx)(e.p,{children:\"Ent\\xE3o, n\\xE3o s\\xF3 voc\\xEA n\\xE3o pode adicionar mais propriedades, mas voc\\xEA tamb\\xE9m n\\xE3o pode reconfigurar ou apagar quaisquer propriedades existentes (embora voc\\xEA ainda possa modificar seus valores).\"}),`\n`,(0,o.jsx)(e.h3,{children:\"Travamento\"}),`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"Object.freeze()\"}),\" cria um objeto congelado, o que significa que \\xE9 preciso um objeto existente e basicamente chama \",(0,o.jsx)(e.code,{children:\"objeto.seal()\"}),' nele, mas tamb\\xE9m marca todas as propriedades do tipo \"acesso a dados\" como writable:false, para que seus valores n\\xE3o possam ser alterados.']}),`\n`,(0,o.jsx)(e.p,{children:\"Essa abordagem \\xE9 o maior n\\xEDvel de imutabilidade que voc\\xEA pode alcan\\xE7ar para um objeto em si, pois impede quaisquer mudan\\xE7as no objeto ou em qualquer uma de suas propriedades diretas (embora, como mencionado acima, o conte\\xFAdo de quaisquer outros objetos referenciados n\\xE3o seja afetado).\"}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`let immutableObject = Object.freeze({});\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"Congelar um objeto n\\xE3o permite que novas propriedades sejam adicionadas a um objeto e impede que os usu\\xE1rios removam ou modifiquem as propriedades existentes. \",(0,o.jsx)(e.code,{children:\"Object.freeze()\"}),\" preserva a enumerabilidade, configurabilidade, gravabilidade e prot\\xF3tipo do objeto. Ele retorna o objeto passado e n\\xE3o cria uma c\\xF3pia congelada.\"]}),`\n`,(0,o.jsx)(e.h2,{children:\"Quais s\\xE3o os pr\\xF3s e os contras da imutabilidade?\"}),`\n`,(0,o.jsx)(e.h3,{children:\"Pr\\xF3s\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"Detec\\xE7\\xE3o de mudan\\xE7as mais f\\xE1cil: A igualdade de objetos pode ser determinada de maneira eficiente e f\\xE1cil por meio da igualdade referencial. Isso \\xE9 \\xFAtil para comparar diferen\\xE7as de objetos no React e Redux.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Menos complicado: Programas com objetos imut\\xE1veis s\\xE3o menos complicados de se pensar, j\\xE1 que voc\\xEA n\\xE3o precisa se preocupar sobre como um objeto pode evoluir ao longo do tempo.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Compartilhamento f\\xE1cil por refer\\xEAncias: Uma c\\xF3pia de um objeto \\xE9 t\\xE3o boa quanto outra, ent\\xE3o voc\\xEA pode armazenar objetos em cache ou reutilizar o mesmo objeto v\\xE1rias vezes.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Seguro para threads: Objetos imut\\xE1veis podem ser usados com seguran\\xE7a entre threads em um ambiente multi-threaded, j\\xE1 que n\\xE3o h\\xE1 risco de serem modificados em outras threads que est\\xE3o sendo executadas simultaneamente.\"}),`\n`,(0,o.jsxs)(e.li,{children:[\"Menos necessidade de mem\\xF3ria: Usando bibliotecas como \",(0,o.jsx)(e.a,{href:\"https://immerjs.github.io/immer/\",children:\"Immer\"}),\" e \",(0,o.jsx)(e.a,{href:\"https://immutable-js.com/\",children:\"Immutable.js\"}),\", objetos s\\xE3o modificados usando compartilhamento estrutural e menos mem\\xF3ria \\xE9 necess\\xE1ria para ter v\\xE1rios objetos com estruturas semelhantes.\"]}),`\n`,(0,o.jsx)(e.li,{children:\"N\\xE3o h\\xE1 necessidade de c\\xF3pias defensivas: c\\xF3pias defensivas n\\xE3o s\\xE3o mais necess\\xE1rias quando objetos imut\\xE1veis s\\xE3o retornados ou passados para fun\\xE7\\xF5es, uma vez que n\\xE3o h\\xE1 possibilidade de um objeto imut\\xE1vel ser modificado por ela.\"}),`\n`]}),`\n`,(0,o.jsx)(e.h3,{children:\"Contras\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"Complexo para criar por si mesmo: Implementa\\xE7\\xF5es ing\\xEAnuas de estruturas de dados imut\\xE1veis e suas opera\\xE7\\xF5es podem resultar em desempenho extremamente pobre porque novos objetos s\\xE3o criados cada vez. \\xC9 recomendado o uso de bibliotecas para estruturas de dados imut\\xE1veis e opera\\xE7\\xF5es eficientes que utilizam compartilhamento estrutural.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Potencial impacto negativo na performance: Aloca\\xE7\\xE3o (e desaloca\\xE7\\xE3o) de muitos objetos pequenos ao inv\\xE9s de modificar objetos existentes pode causar um impacto na performance. A complexidade do alocador ou do coletor de lixo geralmente depende do n\\xFAmero de objetos no heap.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Complexidade para estruturas de dados c\\xEDclicas: estruturas de dados c\\xEDclicas como grafos s\\xE3o dif\\xEDceis de construir. Se voc\\xEA tiver dois objetos que n\\xE3o podem ser modificados ap\\xF3s a inicializa\\xE7\\xE3o, como voc\\xEA pode fazer com que eles apontem um para o outro?\"}),`\n`]})]})}function x(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,Object.assign({},a,{children:(0,o.jsx)(m,a)})):m(a)}var O=x;return g(z);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var v=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),f=(a,e)=>{for(var s in e)r(a,s,{get:e[s],enumerable:!0})},d=(a,e,s,n)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of b(e))!j.call(a,i)&&i!==s&&r(a,i,{get:()=>e[i],enumerable:!(n=p(e,i))||n.enumerable});return a};var g=(a,e,s)=>(s=a!=null?u(h(a)):{},d(e||!a||!a.__esModule?r(s,\"default\",{value:a,enumerable:!0}):s,a)),q=a=>d(r({},\"__esModule\",{value:!0}),a);var c=v((y,t)=>{t.exports=_jsx_runtime});var O={};f(O,{default:()=>l,frontmatter:()=>x});var o=g(c()),x={title:\"Explique a diferen\\xE7a entre objetos mut\\xE1veis e imut\\xE1veis\"};function m(a){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...a.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.p,{children:\"A imutabilidade \\xE9 um princ\\xEDpio central na programa\\xE7\\xE3o funcional e tamb\\xE9m tem muito a oferecer para programas orientados para objetos. Um objeto mut\\xE1vel \\xE9 um objeto cujo estado pode ser modificado depois de criado. Um objeto mut\\xE1vel \\xE9 um objeto cujo estado pode ser modificado depois de criado.\"}),`\n`,(0,o.jsx)(e.h2,{children:\"O que \\xE9 um exemplo de um objeto imut\\xE1vel em JavaScript?\"}),`\n`,(0,o.jsx)(e.p,{children:\"Em JavaScript, alguns tipos internos (n\\xFAmeros, strings) s\\xE3o imut\\xE1veis, mas objetos personalizados geralmente s\\xE3o mut\\xE1veis.\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Alguns objetos JavaScript imut\\xE1veis integrados s\\xE3o \",(0,o.jsx)(e.code,{children:\"Math\"}),\", \",(0,o.jsx)(e.code,{children:\"Date\"}),\".\"]}),`\n`,(0,o.jsx)(e.p,{children:\"Aqui est\\xE3o algumas maneiras de adicionar/simular imutabilidade em objetos JavaScript simples.\"}),`\n`,(0,o.jsx)(e.h3,{children:\"Propriedades Constante de Objeto\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Ao combinar \",(0,o.jsx)(e.code,{children:\"grav\\xE1vel: falso\"}),\" e \",(0,o.jsx)(e.code,{children:\"configur\\xE1vel: falso\"}),\", voc\\xEA pode criar uma constante (n\\xE3o pode ser alterada, redefinida ou apagada) como uma propriedade do objeto, como:\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`let myObject = {};\nObject.defineProperty(myObject, 'number', {\n  value: 42,\n  writable: false,\n  configurable: false,\n});\nconsole.log(myObject.number); // 42\nmyObject.number = 43;\nconsole.log(myObject.number); // 42\n`})}),`\n`,(0,o.jsx)(e.h3,{children:\"Evitar Extens\\xF5es\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Se voc\\xEA quiser evitar que um objeto tenha novas propriedades adicionadas, mas deixando o resto das propriedades do objeto sozinhas, chame \",(0,o.jsx)(e.code,{children:\"Object.preventExtensions(...)\"}),\":\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`let myObject = {\n  a: 2,\n};\n\nObject.preventExtensions(myObject);\n\nmyObject.b = 3;\nmyObject.b; // undefined\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"No modo n\\xE3o restrito, a cria\\xE7\\xE3o de \",(0,o.jsx)(e.code,{children:\"b\"}),\" falha silenciosamente. No modo estrito, ele lan\\xE7a um \",(0,o.jsx)(e.code,{children:\"TypeError\"}),\".\"]}),`\n`,(0,o.jsx)(e.h3,{children:\"Prote\\xE7\\xE3o\"}),`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"Object.seal()\"}),' cria um objeto \"selado\", o que significa que recebe um objeto existente e basicamente chama ',(0,o.jsx)(e.code,{children:\"Object.preventExtensions()\"}),\" nele, mas tamb\\xE9m marca todas as suas propriedades existentes como \",(0,o.jsx)(e.code,{children:\"configurable: false\"}),\".\"]}),`\n`,(0,o.jsx)(e.p,{children:\"Ent\\xE3o, n\\xE3o s\\xF3 voc\\xEA n\\xE3o pode adicionar mais propriedades, mas voc\\xEA tamb\\xE9m n\\xE3o pode reconfigurar ou apagar quaisquer propriedades existentes (embora voc\\xEA ainda possa modificar seus valores).\"}),`\n`,(0,o.jsx)(e.h3,{children:\"Travamento\"}),`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"Object.freeze()\"}),\" cria um objeto congelado, o que significa que \\xE9 preciso um objeto existente e basicamente chama \",(0,o.jsx)(e.code,{children:\"objeto.seal()\"}),' nele, mas tamb\\xE9m marca todas as propriedades do tipo \"acesso a dados\" como writable:false, para que seus valores n\\xE3o possam ser alterados.']}),`\n`,(0,o.jsx)(e.p,{children:\"Essa abordagem \\xE9 o maior n\\xEDvel de imutabilidade que voc\\xEA pode alcan\\xE7ar para um objeto em si, pois impede quaisquer mudan\\xE7as no objeto ou em qualquer uma de suas propriedades diretas (embora, como mencionado acima, o conte\\xFAdo de quaisquer outros objetos referenciados n\\xE3o seja afetado).\"}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`let immutableObject = Object.freeze({});\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"Congelar um objeto n\\xE3o permite que novas propriedades sejam adicionadas a um objeto e impede que os usu\\xE1rios removam ou modifiquem as propriedades existentes. \",(0,o.jsx)(e.code,{children:\"Object.freeze()\"}),\" preserva a enumerabilidade, configurabilidade, gravabilidade e prot\\xF3tipo do objeto. Ele retorna o objeto passado e n\\xE3o cria uma c\\xF3pia congelada.\"]}),`\n`,(0,o.jsx)(e.h2,{children:\"Quais s\\xE3o os pr\\xF3s e os contras da imutabilidade?\"}),`\n`,(0,o.jsx)(e.h3,{children:\"Pr\\xF3s\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"Detec\\xE7\\xE3o de mudan\\xE7as mais f\\xE1cil: A igualdade de objetos pode ser determinada de maneira eficiente e f\\xE1cil por meio da igualdade referencial. Isso \\xE9 \\xFAtil para comparar diferen\\xE7as de objetos no React e Redux.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Menos complicado: Programas com objetos imut\\xE1veis s\\xE3o menos complicados de se pensar, j\\xE1 que voc\\xEA n\\xE3o precisa se preocupar sobre como um objeto pode evoluir ao longo do tempo.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Compartilhamento f\\xE1cil por refer\\xEAncias: Uma c\\xF3pia de um objeto \\xE9 t\\xE3o boa quanto outra, ent\\xE3o voc\\xEA pode armazenar objetos em cache ou reutilizar o mesmo objeto v\\xE1rias vezes.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Seguro para threads: Objetos imut\\xE1veis podem ser usados com seguran\\xE7a entre threads em um ambiente multi-threaded, j\\xE1 que n\\xE3o h\\xE1 risco de serem modificados em outras threads que est\\xE3o sendo executadas simultaneamente.\"}),`\n`,(0,o.jsxs)(e.li,{children:[\"Menos necessidade de mem\\xF3ria: Usando bibliotecas como \",(0,o.jsx)(e.a,{href:\"https://immerjs.github.io/immer/\",children:\"Immer\"}),\" e \",(0,o.jsx)(e.a,{href:\"https://immutable-js.com/\",children:\"Immutable.js\"}),\", objetos s\\xE3o modificados usando compartilhamento estrutural e menos mem\\xF3ria \\xE9 necess\\xE1ria para ter v\\xE1rios objetos com estruturas semelhantes.\"]}),`\n`,(0,o.jsx)(e.li,{children:\"N\\xE3o h\\xE1 necessidade de c\\xF3pias defensivas: c\\xF3pias defensivas n\\xE3o s\\xE3o mais necess\\xE1rias quando objetos imut\\xE1veis s\\xE3o retornados ou passados para fun\\xE7\\xF5es, uma vez que n\\xE3o h\\xE1 possibilidade de um objeto imut\\xE1vel ser modificado por ela.\"}),`\n`]}),`\n`,(0,o.jsx)(e.h3,{children:\"Contras\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"Complexo para criar por si mesmo: Implementa\\xE7\\xF5es ing\\xEAnuas de estruturas de dados imut\\xE1veis e suas opera\\xE7\\xF5es podem resultar em desempenho extremamente pobre porque novos objetos s\\xE3o criados cada vez. \\xC9 recomendado o uso de bibliotecas para estruturas de dados imut\\xE1veis e opera\\xE7\\xF5es eficientes que utilizam compartilhamento estrutural.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Potencial impacto negativo na performance: Aloca\\xE7\\xE3o (e desaloca\\xE7\\xE3o) de muitos objetos pequenos ao inv\\xE9s de modificar objetos existentes pode causar um impacto na performance. A complexidade do alocador ou do coletor de lixo geralmente depende do n\\xFAmero de objetos no heap.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Complexidade para estruturas de dados c\\xEDclicas: estruturas de dados c\\xEDclicas como grafos s\\xE3o dif\\xEDceis de construir. Se voc\\xEA tiver dois objetos que n\\xE3o podem ser modificados ap\\xF3s a inicializa\\xE7\\xE3o, como voc\\xEA pode fazer com que eles apontem um para o outro?\"}),`\n`]})]})}function l(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,{...a,children:(0,o.jsx)(m,{...a})}):m(a)}return q(O);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-mutable-and-immutable-objects/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-mutable-and-immutable-objects/zh-CN.json
index 541eeffaf..b8974835d 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-mutable-and-immutable-objects/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-mutable-and-immutable-objects/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-mutable-and-immutable-objects/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var u=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),g=(c,e)=>{for(var r in e)t(c,r,{get:e[r],enumerable:!0})},o=(c,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of b(e))!j.call(c,l)&&l!==r&&t(c,l,{get:()=>e[l],enumerable:!(i=m(e,l))||i.enumerable});return c};var O=(c,e,r)=>(r=c!=null?s(p(c)):{},o(e||!c||!c.__esModule?t(r,\"default\",{value:c,enumerable:!0}):r,c)),f=c=>o(t({},\"__esModule\",{value:!0}),c);var a=u((S,d)=>{d.exports=_jsx_runtime});var y={};g(y,{default:()=>z,frontmatter:()=>v});var n=O(a()),v={title:\"\\u89E3\\u91CA JavaScript \\u4E2D\\u53EF\\u53D8\\u5BF9\\u8C61\\u548C\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u7684\\u533A\\u522B\"};function h(c){let e=Object.assign({h2:\"h2\",p:\"p\",strong:\"strong\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u53EF\\u53D8\\u5BF9\\u8C61\"}),\" \\u5141\\u8BB8\\u5728\\u521B\\u5EFA\\u540E\\u4FEE\\u6539\\u5C5E\\u6027\\u548C\\u503C\\uFF0C\\u8FD9\\u662F\\u5927\\u591A\\u6570\\u5BF9\\u8C61\\u7684\\u9ED8\\u8BA4\\u884C\\u4E3A\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const mutableObject = {\n  name: 'John',\n  age: 30,\n};\n\n// Modify the object\nmutableObject.name = 'Jane';\n\n// The object has been modified\nconsole.log(mutableObject); // Output: { name: 'Jane', age: 30 }\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\"}),\" \\u5728\\u521B\\u5EFA\\u540E\\u4E0D\\u80FD\\u76F4\\u63A5\\u4FEE\\u6539\\u3002\\u5728\\u4E0D\\u521B\\u5EFA\\u5168\\u65B0\\u503C\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5176\\u5185\\u5BB9\\u65E0\\u6CD5\\u66F4\\u6539\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const immutableObject = Object.freeze({\n  name: 'John',\n  age: 30,\n});\n\n// Attempt to modify the object\nimmutableObject.name = 'Jane';\n\n// The object remains unchanged\nconsole.log(immutableObject); // Output: { name: 'John', age: 30 }\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u53EF\\u53D8\\u5BF9\\u8C61\\u548C\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u4E4B\\u95F4\\u7684\\u4E3B\\u8981\\u533A\\u522B\\u5728\\u4E8E\\u53EF\\u4FEE\\u6539\\u6027\\u3002\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u5728\\u521B\\u5EFA\\u540E\\u65E0\\u6CD5\\u4FEE\\u6539\\uFF0C\\u800C\\u53EF\\u53D8\\u5BF9\\u8C61\\u53EF\\u4EE5\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4E0D\\u53EF\\u53D8\\u6027\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E0D\\u53EF\\u53D8\\u6027\\u662F\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\\u7684\\u6838\\u5FC3\\u539F\\u5219\\uFF0C\\u4F46\\u5B83\\u4E5F\\u4E3A\\u9762\\u5411\\u5BF9\\u8C61\\u7A0B\\u5E8F\\u63D0\\u4F9B\\u4E86\\u5F88\\u591A\\u4E1C\\u897F\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u53EF\\u53D8\\u5BF9\\u8C61\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u53EF\\u53D8\\u6027\\u662F\\u6307\\u5BF9\\u8C61\\u5728\\u521B\\u5EFA\\u540E\\u53EF\\u4EE5\\u66F4\\u6539\\u5176\\u5C5E\\u6027\\u6216\\u5143\\u7D20\\u7684\\u80FD\\u529B\\u3002\\u53EF\\u53D8\\u5BF9\\u8C61\\u662F\\u6307\\u5176\\u72B6\\u6001\\u5728\\u521B\\u5EFA\\u540E\\u53EF\\u4EE5\\u4FEE\\u6539\\u7684\\u5BF9\\u8C61\\u3002\\u5728 JavaScript \\u4E2D\\uFF0C\\u5BF9\\u8C61\\u548C\\u6570\\u7EC4\\u9ED8\\u8BA4\\u662F\\u53EF\\u53D8\\u7684\\u3002\\u5B83\\u4EEC\\u5728\\u5185\\u5B58\\u4E2D\\u5B58\\u50A8\\u5BF9\\u5176\\u6570\\u636E\\u7684\\u5F15\\u7528\\u3002\\u66F4\\u6539\\u5C5E\\u6027\\u6216\\u5143\\u7D20\\u4F1A\\u4FEE\\u6539\\u539F\\u59CB\\u5BF9\\u8C61\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u53EF\\u53D8\\u5BF9\\u8C61\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const mutableObject = {\n  name: 'John',\n  age: 30,\n};\n\n// Modify the object\nmutableObject.name = 'Jane';\n\n// The object has been modified\nconsole.log(mutableObject); // Output: { name: 'Jane', age: 30 }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u662F\\u6307\\u5176\\u72B6\\u6001\\u5728\\u521B\\u5EFA\\u540E\\u65E0\\u6CD5\\u4FEE\\u6539\\u7684\\u5BF9\\u8C61\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const immutableObject = Object.freeze({\n  name: 'John',\n  age: 30,\n});\n\n// Attempt to modify the object\nimmutableObject.name = 'Jane';\n\n// The object remains unchanged\nconsole.log(immutableObject); // Output: { name: 'John', age: 30 }\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u539F\\u59CB\\u6570\\u636E\\u7C7B\\u578B\\uFF08\\u5982\\u6570\\u5B57\\u3001\\u5B57\\u7B26\\u4E32\\u3001\\u5E03\\u5C14\\u503C\\u3001\",(0,n.jsx)(e.code,{children:\"null\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\uFF09\\u672C\\u8D28\\u4E0A\\u662F\\u4E0D\\u53EF\\u53D8\\u7684\\u3002\\u4E00\\u65E6\\u5206\\u914D\\u4E86\\u503C\\uFF0C\\u5C31\\u4E0D\\u80FD\\u76F4\\u63A5\\u4FEE\\u6539\\u5B83\\u4EEC\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let name = 'Alice';\nname.toUpperCase(); // This won't modify the original name variable\nconsole.log(name); // Still prints \"Alice\"\n\n// To change the value, you need to reassign a new string\nname = name.toUpperCase();\nconsole.log(name); // Now prints \"ALICE\"\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E00\\u4E9B\\u5185\\u7F6E\\u7684\\u4E0D\\u53EF\\u53D8 JavaScript \\u5BF9\\u8C61\\u662F \",(0,n.jsx)(e.code,{children:\"Math\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"Date\"}),\"\\uFF0C\\u4F46\\u81EA\\u5B9A\\u4E49\\u5BF9\\u8C61\\u901A\\u5E38\\u662F\\u53EF\\u53D8\\u7684\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"const\"}),\" vs \\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E00\\u4E2A\\u5E38\\u89C1\\u7684\\u6DF7\\u6DC6/\\u8BEF\\u89E3\\u662F\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u58F0\\u660E\\u53D8\\u91CF\\u4F1A\\u4F7F\\u8BE5\\u503C\\u4E0D\\u53EF\\u53D8\\uFF0C\\u8FD9\\u6839\\u672C\\u4E0D\\u662F\\u771F\\u7684\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"const\"}),\" \\u963B\\u6B62\\u91CD\\u65B0\\u5206\\u914D\\u53D8\\u91CF\\u672C\\u8EAB\\uFF0C\\u4F46\\u4E0D\\u4F1A\\u4F7F\\u5176\\u6301\\u6709\\u7684\\u503C\\u4E0D\\u53EF\\u53D8\\u3002\\u8FD9\\u610F\\u5473\\u7740\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5BF9\\u4E8E\\u539F\\u59CB\\u503C\\uFF08\\u6570\\u5B57\\u3001\\u5B57\\u7B26\\u4E32\\u3001\\u5E03\\u5C14\\u503C\\uFF09\\uFF0C\",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u4F7F\\u503C\\u4E0D\\u53EF\\u53D8\\uFF0C\\u56E0\\u4E3A\\u539F\\u59CB\\u503C\\u672C\\u8D28\\u4E0A\\u662F\\u4E0D\\u53EF\\u53D8\\u7684\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5BF9\\u4E8E\\u975E\\u539F\\u59CB\\u503C\\uFF0C\\u5982\\u5BF9\\u8C61\\u548C\\u6570\\u7EC4\\uFF0C\",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u4EC5\\u963B\\u6B62\\u5C06\\u65B0\\u7684\\u5BF9\\u8C61/\\u6570\\u7EC4\\u91CD\\u65B0\\u5206\\u914D\\u7ED9\\u53D8\\u91CF\\uFF0C\\u4F46\\u73B0\\u6709\\u5BF9\\u8C61/\\u6570\\u7EC4\\u7684\\u5C5E\\u6027/\\u5143\\u7D20\\u4ECD\\u7136\\u53EF\\u4EE5\\u88AB\\u4FEE\\u6539\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u662F\\u6307\\u5728\\u521B\\u5EFA\\u540E\\u5176\\u72B6\\u6001\\uFF08\\u5C5E\\u6027\\u548C\\u503C\\uFF09\\u65E0\\u6CD5\\u4FEE\\u6539\\u7684\\u5BF9\\u8C61\\u3002\\u8FD9\\u53EF\\u4EE5\\u901A\\u8FC7\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u7B49\\u65B9\\u6CD5\\u6765\\u5B9E\\u73B0\\uFF0C\\u8BE5\\u65B9\\u6CD5\\u901A\\u8FC7\\u963B\\u6B62\\u5BF9\\u5176\\u5C5E\\u6027\\u7684\\u4EFB\\u4F55\\u66F4\\u6539\\u6765\\u4F7F\\u5BF9\\u8C61\\u4E0D\\u53EF\\u53D8\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u4F7F\\u7528 const\nconst person = { name: 'John' };\nperson = { name: 'Jane' }; // \\u9519\\u8BEF\\uFF1A\\u8D4B\\u503C\\u7ED9\\u5E38\\u91CF\\u53D8\\u91CF\nperson.name = 'Jane'; // \\u5141\\u8BB8\\uFF0Cperson.name \\u73B0\\u5728\\u662F 'Jane'\n\n// \\u4F7F\\u7528 Object.freeze() \\u521B\\u5EFA\\u4E00\\u4E2A\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\nconst frozenPerson = Object.freeze({ name: 'John' });\nfrozenPerson.name = 'Jane'; // \\u9759\\u9ED8\\u5931\\u8D25\\uFF08\\u6CA1\\u6709\\u9519\\u8BEF\\uFF0C\\u4F46\\u6CA1\\u6709\\u53D8\\u5316\\uFF09\nfrozenPerson = { name: 'Jane' }; // \\u9519\\u8BEF\\uFF1A\\u8D4B\\u503C\\u7ED9\\u5E38\\u91CF\\u53D8\\u91CF\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u7B2C\\u4E00\\u4E2A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u7684\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u4E0D\\u5141\\u8BB8\\u5C06\\u65B0\\u5BF9\\u8C61\\u91CD\\u65B0\\u5206\\u914D\\u7ED9 \",(0,n.jsx)(e.code,{children:\"person\"}),\"\\uFF0C\\u4F46\\u5141\\u8BB8\\u4FEE\\u6539 \",(0,n.jsx)(e.code,{children:\"name\"}),\" \\u5C5E\\u6027\\u3002\\u5728\\u7B2C\\u4E8C\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u4F7F \",(0,n.jsx)(e.code,{children:\"frozenPerson\"}),\" \\u5BF9\\u8C61\\u4E0D\\u53EF\\u53D8\\uFF0C\\u4ECE\\u800C\\u963B\\u6B62\\u5BF9\\u5176\\u5C5E\\u6027\\u7684\\u4EFB\\u4F55\\u66F4\\u6539\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u9700\\u8981\\u6CE8\\u610F\\u7684\\u662F\\uFF0C\",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u521B\\u5EFA\\u7684\\u662F\\u4E00\\u4E2A\\u6D45\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u3002\\u5982\\u679C\\u5BF9\\u8C61\\u5305\\u542B\\u5D4C\\u5957\\u5BF9\\u8C61\\u6216\\u6570\\u7EC4\\uFF0C\\u9664\\u975E\\u5355\\u72EC\\u51BB\\u7ED3\\uFF0C\\u5426\\u5219\\u8FD9\\u4E9B\\u5D4C\\u5957\\u6570\\u636E\\u7ED3\\u6784\\u4ECD\\u7136\\u662F\\u53EF\\u53D8\\u7684\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u56E0\\u6B64\\uFF0C\\u867D\\u7136 \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u4E3A\\u539F\\u59CB\\u503C\\u63D0\\u4F9B\\u4E86\\u4E0D\\u53EF\\u53D8\\u6027\\uFF0C\\u4F46\\u521B\\u5EFA\\u771F\\u6B63\\u4E0D\\u53EF\\u53D8\\u7684\\u5BF9\\u8C61\\u9700\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u6216\\u5176\\u4ED6\\u4E0D\\u53EF\\u53D8\\u6027\\u6280\\u672F\\uFF0C\\u5982\\u6DF1\\u5EA6\\u51BB\\u7ED3\\u6216\\u4F7F\\u7528\\u6765\\u81EA \",(0,n.jsx)(e.a,{href:\"https://immerjs.github.io/immer/\",children:\"Immer\"}),\" \\u6216 \",(0,n.jsx)(e.a,{href:\"https://immutable-js.com/\",children:\"Immutable.js\"}),\" \\u7B49\\u5E93\\u7684\\u4E0D\\u53EF\\u53D8\\u6570\\u636E\\u7ED3\\u6784\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5728\\u666E\\u901A JavaScript \\u5BF9\\u8C61\\u4E2D\\u5B9E\\u73B0\\u4E0D\\u53EF\\u53D8\\u7684\\u5404\\u79CD\\u65B9\\u6CD5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u5728\\u666E\\u901A JavaScript \\u5BF9\\u8C61\\u4E2D\\u6DFB\\u52A0/\\u6A21\\u62DF\\u4E0D\\u540C\\u5F62\\u5F0F\\u7684\\u4E0D\\u53EF\\u53D8\\u6027\\u7684\\u51E0\\u79CD\\u65B9\\u6CD5\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u5C5E\\u6027\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u901A\\u8FC7\\u7ED3\\u5408 \",(0,n.jsx)(e.code,{children:\"writable: false\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"configurable: false\"}),\"\\uFF0C\\u60A8\\u672C\\u8D28\\u4E0A\\u53EF\\u4EE5\\u521B\\u5EFA\\u4E00\\u4E2A\\u5E38\\u91CF\\uFF08\\u4E0D\\u80FD\\u66F4\\u6539\\u3001\\u91CD\\u65B0\\u5B9A\\u4E49\\u6216\\u5220\\u9664\\uFF09\\u4F5C\\u4E3A\\u5BF9\\u8C61\\u5C5E\\u6027\\uFF0C\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const myObject = {};\nObject.defineProperty(myObject, 'number', {\n  value: 42,\n  writable: false,\n  configurable: false,\n});\nconsole.log(myObject.number); // 42\nmyObject.number = 43;\nconsole.log(myObject.number); // 42\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u963B\\u6B62\\u5BF9\\u8C61\\u6269\\u5C55\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u60A8\\u60F3\\u963B\\u6B62\\u5411\\u5BF9\\u8C61\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\uFF0C\\u4F46\\u4FDD\\u6301\\u5BF9\\u8C61\\u7684\\u5176\\u4F59\\u5C5E\\u6027\\u4E0D\\u53D8\\uFF0C\\u8BF7\\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.preventExtensions(...)\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let myObject = {\n  a: 2,\n};\n\nObject.preventExtensions(myObject);\n\nmyObject.b = 3;\nconsole.log(myObject.b); // undefined\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF0C\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"b\"}),\" \\u4F1A\\u9759\\u9ED8\\u5931\\u8D25\\u3002\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF0C\\u5B83\\u4F1A\\u629B\\u51FA \",(0,n.jsx)(e.code,{children:\"TypeError\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5BC6\\u5C01\\u4E00\\u4E2A\\u5BF9\\u8C61\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.seal()\"}),\" \\u521B\\u5EFA\\u4E00\\u4E2A\\u201C\\u5BC6\\u5C01\\u201D\\u5BF9\\u8C61\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4F1A\\u83B7\\u53D6\\u4E00\\u4E2A\\u73B0\\u6709\\u5BF9\\u8C61\\uFF0C\\u5E76\\u57FA\\u672C\\u4E0A\\u5728\\u5176\\u4E0A\\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.preventExtensions()\"}),\"\\uFF0C\\u4F46\\u4E5F\\u4F1A\\u5C06\\u6240\\u6709\\u73B0\\u6709\\u5C5E\\u6027\\u6807\\u8BB0\\u4E3A \",(0,n.jsx)(e.code,{children:\"configurable: false\"}),\"\\u3002\\u56E0\\u6B64\\uFF0C\\u60A8\\u4E0D\\u4EC5\\u4E0D\\u80FD\\u6DFB\\u52A0\\u66F4\\u591A\\u5C5E\\u6027\\uFF0C\\u800C\\u4E14\\u4E5F\\u4E0D\\u80FD\\u91CD\\u65B0\\u914D\\u7F6E\\u6216\\u5220\\u9664\\u4EFB\\u4F55\\u73B0\\u6709\\u5C5E\\u6027\\uFF0C\\u5C3D\\u7BA1\\u60A8\\u4ECD\\u7136\\u53EF\\u4EE5\\u4FEE\\u6539\\u5B83\\u4EEC\\u7684\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u521B\\u5EFA\\u4E00\\u4E2A\\u5BF9\\u8C61\nconst person = {\n  name: 'John Doe',\n  age: 30,\n};\n\n// \\u5BC6\\u5C01\\u5BF9\\u8C61\nObject.seal(person);\n\n// \\u5C1D\\u8BD5\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\uFF08\\u8FD9\\u5C06\\u9759\\u9ED8\\u5931\\u8D25\\uFF09\nperson.city = 'New York'; // \\u8FD9\\u6CA1\\u6709\\u6548\\u679C\n\n// \\u5C1D\\u8BD5\\u5220\\u9664\\u73B0\\u6709\\u5C5E\\u6027\\uFF08\\u8FD9\\u5C06\\u9759\\u9ED8\\u5931\\u8D25\\uFF09\ndelete person.age; // \\u8FD9\\u6CA1\\u6709\\u6548\\u679C\n\n// \\u4FEE\\u6539\\u73B0\\u6709\\u5C5E\\u6027\\uFF08\\u8FD9\\u5C06\\u8D77\\u4F5C\\u7528\\uFF09\nperson.age = 35;\n\nconsole.log(person); // \\u8F93\\u51FA\\uFF1A{ name: 'John Doe', age: 35 }\n\n// \\u5C1D\\u8BD5\\u91CD\\u65B0\\u914D\\u7F6E\\u73B0\\u6709\\u5C5E\\u6027\\u63CF\\u8FF0\\u7B26\\uFF08\\u8FD9\\u5C06\\u9759\\u9ED8\\u5931\\u8D25\\uFF09\nObject.defineProperty(person, 'name', { writable: false }); // \\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u9759\\u9ED8\\u5931\\u8D25\n\n// \\u68C0\\u67E5\\u5BF9\\u8C61\\u662F\\u5426\\u88AB\\u5BC6\\u5C01\nconsole.log(Object.isSealed(person)); // \\u8F93\\u51FA\\uFF1Atrue\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u51BB\\u7ED3\\u4E00\\u4E2A\\u5BF9\\u8C61\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u521B\\u5EFA\\u4E00\\u4E2A\\u51BB\\u7ED3\\u5BF9\\u8C61\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4F1A\\u83B7\\u53D6\\u4E00\\u4E2A\\u73B0\\u6709\\u5BF9\\u8C61\\uFF0C\\u5E76\\u57FA\\u672C\\u4E0A\\u5728\\u5176\\u4E0A\\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.seal()\"}),\"\\uFF0C\\u4F46\\u5B83\\u4E5F\\u4F1A\\u5C06\\u6240\\u6709\\u201C\\u6570\\u636E\\u8BBF\\u95EE\\u5668\\u201D\\u5C5E\\u6027\\u6807\\u8BB0\\u4E3A writable:false\\uFF0C\\u4EE5\\u4FBF\\u5B83\\u4EEC\\u7684\\u503C\\u4E0D\\u80FD\\u88AB\\u66F4\\u6539\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD9\\u79CD\\u65B9\\u6CD5\\u662F\\u60A8\\u53EF\\u4EE5\\u4E3A\\u5BF9\\u8C61\\u672C\\u8EAB\\u8FBE\\u5230\\u7684\\u6700\\u9AD8\\u7EA7\\u522B\\u7684\\u4E0D\\u53EF\\u53D8\\u6027\\uFF0C\\u56E0\\u4E3A\\u5B83\\u963B\\u6B62\\u4E86\\u5BF9\\u5BF9\\u8C61\\u6216\\u5176\\u4EFB\\u4F55\\u76F4\\u63A5\\u5C5E\\u6027\\u7684\\u4EFB\\u4F55\\u66F4\\u6539\\uFF08\\u5C3D\\u7BA1\\uFF0C\\u5982\\u4E0A\\u6240\\u8FF0\\uFF0C\\u4EFB\\u4F55\\u5F15\\u7528\\u7684\\u5176\\u4ED6\\u5BF9\\u8C61\\u7684\\u5185\\u5BB9\\u4E0D\\u53D7\\u5F71\\u54CD\\uFF09\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let immutableObject = Object.freeze({});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u51BB\\u7ED3\\u5BF9\\u8C61\\u4E0D\\u5141\\u8BB8\\u5411\\u5BF9\\u8C61\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\uFF0C\\u5E76\\u963B\\u6B62\\u7528\\u6237\\u5220\\u9664\\u6216\\u66F4\\u6539\\u73B0\\u6709\\u5C5E\\u6027\\u3002\",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u4FDD\\u7559\\u4E86\\u5BF9\\u8C61\\u7684\\u679A\\u4E3E\\u6027\\u3001\\u53EF\\u914D\\u7F6E\\u6027\\u3001\\u53EF\\u5199\\u6027\\u548C \",(0,n.jsx)(e.code,{children:\"prototype\"}),\"\\u3002\\u5B83\\u8FD4\\u56DE\\u4F20\\u9012\\u7684\\u5BF9\\u8C61\\uFF0C\\u5E76\\u4E14\\u4E0D\\u4F1A\\u521B\\u5EFA\\u51BB\\u7ED3\\u526F\\u672C\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u4F7F\\u5BF9\\u8C61\\u4E0D\\u53EF\\u53D8\\u3002\\u4F46\\u662F\\uFF0C\\u5B83\\u4E0D\\u4E00\\u5B9A\\u662F\\u5E38\\u91CF\\u3002\",(0,n.jsx)(e.code,{children:\"Object.freeze\"}),\" \\u963B\\u6B62\\u5BF9\\u5BF9\\u8C61\\u672C\\u8EAB\\u53CA\\u5176\\u76F4\\u63A5\\u5C5E\\u6027\\u7684\\u4FEE\\u6539\\uFF0C\\u51BB\\u7ED3\\u5BF9\\u8C61\\u5185\\u7684\\u5D4C\\u5957\\u5BF9\\u8C61\\u4ECD\\u7136\\u53EF\\u4EE5\\u88AB\\u4FEE\\u6539\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let obj = {\n  user: {},\n};\n\nObject.freeze(obj);\nobj.user.name = 'John';\n\nconsole.log(obj.user.name); //Output: 'John'\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4E0D\\u53EF\\u53D8\\u6027\\u7684\\u4F18\\u7F3A\\u70B9\\u662F\\u4EC0\\u4E48\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u66F4\\u5BB9\\u6613\\u8FDB\\u884C\\u66F4\\u6539\\u68C0\\u6D4B\"}),\"\\uFF1A\\u53EF\\u4EE5\\u901A\\u8FC7\\u5F15\\u7528\\u76F8\\u7B49\\u6027\\u4EE5\\u9AD8\\u6027\\u80FD\\u548C\\u7B80\\u5355\\u7684\\u65B9\\u5F0F\\u786E\\u5B9A\\u5BF9\\u8C61\\u76F8\\u7B49\\u6027\\u3002\\u8FD9\\u5BF9\\u4E8E\\u6BD4\\u8F83 React \\u548C Redux \\u4E2D\\u7684\\u5BF9\\u8C61\\u5DEE\\u5F02\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u66F4\\u7B80\\u5355\"}),\"\\uFF1A\\u4F7F\\u7528\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u7684\\u7A0B\\u5E8F\\u66F4\\u6613\\u4E8E\\u601D\\u8003\\uFF0C\\u56E0\\u4E3A\\u60A8\\u65E0\\u9700\\u62C5\\u5FC3\\u5BF9\\u8C61\\u53EF\\u80FD\\u968F\\u65F6\\u95F4\\u6F14\\u53D8\\u7684\\u65B9\\u5F0F\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u901A\\u8FC7\\u5F15\\u7528\\u8F7B\\u677E\\u5171\\u4EAB\\uFF1A\\u4E00\\u4E2A\\u5BF9\\u8C61\\u7684\\u526F\\u672C\\u4E0E\\u53E6\\u4E00\\u4E2A\\u5BF9\\u8C61\\u4E00\\u6837\\u597D\\uFF0C\\u56E0\\u6B64\\u60A8\\u53EF\\u4EE5\\u7F13\\u5B58\\u5BF9\\u8C61\\u6216\\u591A\\u6B21\\u91CD\\u7528\\u540C\\u4E00\\u5BF9\\u8C61\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u7EBF\\u7A0B\\u5B89\\u5168\"}),\"\\uFF1A\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u53EF\\u4EE5\\u5728\\u591A\\u7EBF\\u7A0B\\u73AF\\u5883\\u4E2D\\u7684\\u7EBF\\u7A0B\\u4E4B\\u95F4\\u5B89\\u5168\\u4F7F\\u7528\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u6709\\u5728\\u5176\\u4ED6\\u5E76\\u53D1\\u8FD0\\u884C\\u7684\\u7EBF\\u7A0B\\u4E2D\\u88AB\\u4FEE\\u6539\\u7684\\u98CE\\u9669\\u3002\\u5728\\u5927\\u591A\\u6570\\u60C5\\u51B5\\u4E0B\\uFF0CJavaScript \\u5728\\u5355\\u7EBF\\u7A0B\\u73AF\\u5883\\u4E2D\\u8FD0\\u884C\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u51CF\\u5C11\\u5185\\u5B58\\u9700\\u6C42\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,n.jsx)(e.a,{href:\"https://immerjs.github.io/immer/\",children:\"Immer\"}),\" \\u548C \",(0,n.jsx)(e.a,{href:\"https://immutable-js.com/\",children:\"Immutable.js\"}),\" \\u7B49\\u5E93\\uFF0C\\u4F7F\\u7528\\u7ED3\\u6784\\u5171\\u4EAB\\u4FEE\\u6539\\u5BF9\\u8C61\\uFF0C\\u5E76\\u4E14\\u5BF9\\u4E8E\\u5177\\u6709\\u76F8\\u4F3C\\u7ED3\\u6784\\u7684\\u591A\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u6240\\u9700\\u7684\\u5185\\u5B58\\u66F4\\u5C11\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u65E0\\u9700\\u9632\\u5FA1\\u6027\\u590D\\u5236\"}),\"\\uFF1A\\u5F53\\u4ECE\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u8FD4\\u56DE\\u6216\\u4F20\\u9012\\u7ED9\\u51FD\\u6570\\u65F6\\uFF0C\\u4E0D\\u518D\\u9700\\u8981\\u9632\\u5FA1\\u6027\\u526F\\u672C\\uFF0C\\u56E0\\u4E3A\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u4E0D\\u53EF\\u80FD\\u88AB\\u5B83\\u4FEE\\u6539\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u96BE\\u4EE5\\u81EA\\u884C\\u521B\\u5EFA\"}),\"\\uFF1A\\u4E0D\\u53EF\\u53D8\\u6570\\u636E\\u7ED3\\u6784\\u53CA\\u5176\\u64CD\\u4F5C\\u7684\\u6734\\u7D20\\u5B9E\\u73B0\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u6027\\u80FD\\u6781\\u5DEE\\uFF0C\\u56E0\\u4E3A\\u6BCF\\u6B21\\u90FD\\u4F1A\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\u3002\\u5EFA\\u8BAE\\u4F7F\\u7528\\u5E93\\u6765\\u5B9E\\u73B0\\u9AD8\\u6548\\u7684\\u4E0D\\u53EF\\u53D8\\u6570\\u636E\\u7ED3\\u6784\\u548C\\u5229\\u7528\\u7ED3\\u6784\\u5171\\u4EAB\\u7684\\u64CD\\u4F5C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6F5C\\u5728\\u7684\\u8D1F\\u9762\\u6027\\u80FD\"}),\"\\uFF1A\\u5206\\u914D\\uFF08\\u548C\\u91CA\\u653E\\uFF09\\u8BB8\\u591A\\u5C0F\\u5BF9\\u8C61\\u800C\\u4E0D\\u662F\\u4FEE\\u6539\\u73B0\\u6709\\u5BF9\\u8C61\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u6027\\u80FD\\u5F71\\u54CD\\u3002\\u5206\\u914D\\u5668\\u6216\\u5783\\u573E\\u6536\\u96C6\\u5668\\u7684\\u590D\\u6742\\u6027\\u901A\\u5E38\\u53D6\\u51B3\\u4E8E\\u5806\\u4E0A\\u7684\\u5BF9\\u8C61\\u6570\\u91CF\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5FAA\\u73AF\\u6570\\u636E\\u7ED3\\u6784\\u7684\\u590D\\u6742\\u6027\"}),\"\\uFF1A\\u5FAA\\u73AF\\u6570\\u636E\\u7ED3\\u6784\\uFF08\\u5982\\u56FE\\u5F62\\uFF09\\u96BE\\u4EE5\\u5B9E\\u73B0\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Object/defineProperty\",children:\"Object.defineProperty() | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze\",children:\"Object.freeze() | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal\",children:\"Object.seal() | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions\",children:\"Object.preventExtensions() | MDN\"})}),`\n`]})]})}function J(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(h,c)})):h(c)}var z=J;return f(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var t=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),O=(c,e)=>{for(var r in e)t(c,r,{get:e[r],enumerable:!0})},o=(c,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of p(e))!u.call(c,l)&&l!==r&&t(c,l,{get:()=>e[l],enumerable:!(i=b(e,l))||i.enumerable});return c};var f=(c,e,r)=>(r=c!=null?m(j(c)):{},o(e||!c||!c.__esModule?t(r,\"default\",{value:c,enumerable:!0}):r,c)),v=c=>o(t({},\"__esModule\",{value:!0}),c);var a=g((N,d)=>{d.exports=_jsx_runtime});var z={};O(z,{default:()=>s,frontmatter:()=>J});var n=f(a()),J={title:\"\\u89E3\\u91CA JavaScript \\u4E2D\\u53EF\\u53D8\\u5BF9\\u8C61\\u548C\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u7684\\u533A\\u522B\"};function h(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u53EF\\u53D8\\u5BF9\\u8C61\"}),\" \\u5141\\u8BB8\\u5728\\u521B\\u5EFA\\u540E\\u4FEE\\u6539\\u5C5E\\u6027\\u548C\\u503C\\uFF0C\\u8FD9\\u662F\\u5927\\u591A\\u6570\\u5BF9\\u8C61\\u7684\\u9ED8\\u8BA4\\u884C\\u4E3A\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const mutableObject = {\n  name: 'John',\n  age: 30,\n};\n\n// Modify the object\nmutableObject.name = 'Jane';\n\n// The object has been modified\nconsole.log(mutableObject); // Output: { name: 'Jane', age: 30 }\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\"}),\" \\u5728\\u521B\\u5EFA\\u540E\\u4E0D\\u80FD\\u76F4\\u63A5\\u4FEE\\u6539\\u3002\\u5728\\u4E0D\\u521B\\u5EFA\\u5168\\u65B0\\u503C\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5176\\u5185\\u5BB9\\u65E0\\u6CD5\\u66F4\\u6539\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const immutableObject = Object.freeze({\n  name: 'John',\n  age: 30,\n});\n\n// Attempt to modify the object\nimmutableObject.name = 'Jane';\n\n// The object remains unchanged\nconsole.log(immutableObject); // Output: { name: 'John', age: 30 }\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u53EF\\u53D8\\u5BF9\\u8C61\\u548C\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u4E4B\\u95F4\\u7684\\u4E3B\\u8981\\u533A\\u522B\\u5728\\u4E8E\\u53EF\\u4FEE\\u6539\\u6027\\u3002\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u5728\\u521B\\u5EFA\\u540E\\u65E0\\u6CD5\\u4FEE\\u6539\\uFF0C\\u800C\\u53EF\\u53D8\\u5BF9\\u8C61\\u53EF\\u4EE5\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4E0D\\u53EF\\u53D8\\u6027\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E0D\\u53EF\\u53D8\\u6027\\u662F\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\\u7684\\u6838\\u5FC3\\u539F\\u5219\\uFF0C\\u4F46\\u5B83\\u4E5F\\u4E3A\\u9762\\u5411\\u5BF9\\u8C61\\u7A0B\\u5E8F\\u63D0\\u4F9B\\u4E86\\u5F88\\u591A\\u4E1C\\u897F\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u53EF\\u53D8\\u5BF9\\u8C61\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u53EF\\u53D8\\u6027\\u662F\\u6307\\u5BF9\\u8C61\\u5728\\u521B\\u5EFA\\u540E\\u53EF\\u4EE5\\u66F4\\u6539\\u5176\\u5C5E\\u6027\\u6216\\u5143\\u7D20\\u7684\\u80FD\\u529B\\u3002\\u53EF\\u53D8\\u5BF9\\u8C61\\u662F\\u6307\\u5176\\u72B6\\u6001\\u5728\\u521B\\u5EFA\\u540E\\u53EF\\u4EE5\\u4FEE\\u6539\\u7684\\u5BF9\\u8C61\\u3002\\u5728 JavaScript \\u4E2D\\uFF0C\\u5BF9\\u8C61\\u548C\\u6570\\u7EC4\\u9ED8\\u8BA4\\u662F\\u53EF\\u53D8\\u7684\\u3002\\u5B83\\u4EEC\\u5728\\u5185\\u5B58\\u4E2D\\u5B58\\u50A8\\u5BF9\\u5176\\u6570\\u636E\\u7684\\u5F15\\u7528\\u3002\\u66F4\\u6539\\u5C5E\\u6027\\u6216\\u5143\\u7D20\\u4F1A\\u4FEE\\u6539\\u539F\\u59CB\\u5BF9\\u8C61\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u53EF\\u53D8\\u5BF9\\u8C61\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const mutableObject = {\n  name: 'John',\n  age: 30,\n};\n\n// Modify the object\nmutableObject.name = 'Jane';\n\n// The object has been modified\nconsole.log(mutableObject); // Output: { name: 'Jane', age: 30 }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u662F\\u6307\\u5176\\u72B6\\u6001\\u5728\\u521B\\u5EFA\\u540E\\u65E0\\u6CD5\\u4FEE\\u6539\\u7684\\u5BF9\\u8C61\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const immutableObject = Object.freeze({\n  name: 'John',\n  age: 30,\n});\n\n// Attempt to modify the object\nimmutableObject.name = 'Jane';\n\n// The object remains unchanged\nconsole.log(immutableObject); // Output: { name: 'John', age: 30 }\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u539F\\u59CB\\u6570\\u636E\\u7C7B\\u578B\\uFF08\\u5982\\u6570\\u5B57\\u3001\\u5B57\\u7B26\\u4E32\\u3001\\u5E03\\u5C14\\u503C\\u3001\",(0,n.jsx)(e.code,{children:\"null\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\uFF09\\u672C\\u8D28\\u4E0A\\u662F\\u4E0D\\u53EF\\u53D8\\u7684\\u3002\\u4E00\\u65E6\\u5206\\u914D\\u4E86\\u503C\\uFF0C\\u5C31\\u4E0D\\u80FD\\u76F4\\u63A5\\u4FEE\\u6539\\u5B83\\u4EEC\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let name = 'Alice';\nname.toUpperCase(); // This won't modify the original name variable\nconsole.log(name); // Still prints \"Alice\"\n\n// To change the value, you need to reassign a new string\nname = name.toUpperCase();\nconsole.log(name); // Now prints \"ALICE\"\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E00\\u4E9B\\u5185\\u7F6E\\u7684\\u4E0D\\u53EF\\u53D8 JavaScript \\u5BF9\\u8C61\\u662F \",(0,n.jsx)(e.code,{children:\"Math\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"Date\"}),\"\\uFF0C\\u4F46\\u81EA\\u5B9A\\u4E49\\u5BF9\\u8C61\\u901A\\u5E38\\u662F\\u53EF\\u53D8\\u7684\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"const\"}),\" vs \\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E00\\u4E2A\\u5E38\\u89C1\\u7684\\u6DF7\\u6DC6/\\u8BEF\\u89E3\\u662F\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u58F0\\u660E\\u53D8\\u91CF\\u4F1A\\u4F7F\\u8BE5\\u503C\\u4E0D\\u53EF\\u53D8\\uFF0C\\u8FD9\\u6839\\u672C\\u4E0D\\u662F\\u771F\\u7684\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"const\"}),\" \\u963B\\u6B62\\u91CD\\u65B0\\u5206\\u914D\\u53D8\\u91CF\\u672C\\u8EAB\\uFF0C\\u4F46\\u4E0D\\u4F1A\\u4F7F\\u5176\\u6301\\u6709\\u7684\\u503C\\u4E0D\\u53EF\\u53D8\\u3002\\u8FD9\\u610F\\u5473\\u7740\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5BF9\\u4E8E\\u539F\\u59CB\\u503C\\uFF08\\u6570\\u5B57\\u3001\\u5B57\\u7B26\\u4E32\\u3001\\u5E03\\u5C14\\u503C\\uFF09\\uFF0C\",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u4F7F\\u503C\\u4E0D\\u53EF\\u53D8\\uFF0C\\u56E0\\u4E3A\\u539F\\u59CB\\u503C\\u672C\\u8D28\\u4E0A\\u662F\\u4E0D\\u53EF\\u53D8\\u7684\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5BF9\\u4E8E\\u975E\\u539F\\u59CB\\u503C\\uFF0C\\u5982\\u5BF9\\u8C61\\u548C\\u6570\\u7EC4\\uFF0C\",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u4EC5\\u963B\\u6B62\\u5C06\\u65B0\\u7684\\u5BF9\\u8C61/\\u6570\\u7EC4\\u91CD\\u65B0\\u5206\\u914D\\u7ED9\\u53D8\\u91CF\\uFF0C\\u4F46\\u73B0\\u6709\\u5BF9\\u8C61/\\u6570\\u7EC4\\u7684\\u5C5E\\u6027/\\u5143\\u7D20\\u4ECD\\u7136\\u53EF\\u4EE5\\u88AB\\u4FEE\\u6539\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u662F\\u6307\\u5728\\u521B\\u5EFA\\u540E\\u5176\\u72B6\\u6001\\uFF08\\u5C5E\\u6027\\u548C\\u503C\\uFF09\\u65E0\\u6CD5\\u4FEE\\u6539\\u7684\\u5BF9\\u8C61\\u3002\\u8FD9\\u53EF\\u4EE5\\u901A\\u8FC7\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u7B49\\u65B9\\u6CD5\\u6765\\u5B9E\\u73B0\\uFF0C\\u8BE5\\u65B9\\u6CD5\\u901A\\u8FC7\\u963B\\u6B62\\u5BF9\\u5176\\u5C5E\\u6027\\u7684\\u4EFB\\u4F55\\u66F4\\u6539\\u6765\\u4F7F\\u5BF9\\u8C61\\u4E0D\\u53EF\\u53D8\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u4F7F\\u7528 const\nconst person = { name: 'John' };\nperson = { name: 'Jane' }; // \\u9519\\u8BEF\\uFF1A\\u8D4B\\u503C\\u7ED9\\u5E38\\u91CF\\u53D8\\u91CF\nperson.name = 'Jane'; // \\u5141\\u8BB8\\uFF0Cperson.name \\u73B0\\u5728\\u662F 'Jane'\n\n// \\u4F7F\\u7528 Object.freeze() \\u521B\\u5EFA\\u4E00\\u4E2A\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\nconst frozenPerson = Object.freeze({ name: 'John' });\nfrozenPerson.name = 'Jane'; // \\u9759\\u9ED8\\u5931\\u8D25\\uFF08\\u6CA1\\u6709\\u9519\\u8BEF\\uFF0C\\u4F46\\u6CA1\\u6709\\u53D8\\u5316\\uFF09\nfrozenPerson = { name: 'Jane' }; // \\u9519\\u8BEF\\uFF1A\\u8D4B\\u503C\\u7ED9\\u5E38\\u91CF\\u53D8\\u91CF\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u7B2C\\u4E00\\u4E2A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u7684\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u4E0D\\u5141\\u8BB8\\u5C06\\u65B0\\u5BF9\\u8C61\\u91CD\\u65B0\\u5206\\u914D\\u7ED9 \",(0,n.jsx)(e.code,{children:\"person\"}),\"\\uFF0C\\u4F46\\u5141\\u8BB8\\u4FEE\\u6539 \",(0,n.jsx)(e.code,{children:\"name\"}),\" \\u5C5E\\u6027\\u3002\\u5728\\u7B2C\\u4E8C\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u4F7F \",(0,n.jsx)(e.code,{children:\"frozenPerson\"}),\" \\u5BF9\\u8C61\\u4E0D\\u53EF\\u53D8\\uFF0C\\u4ECE\\u800C\\u963B\\u6B62\\u5BF9\\u5176\\u5C5E\\u6027\\u7684\\u4EFB\\u4F55\\u66F4\\u6539\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u9700\\u8981\\u6CE8\\u610F\\u7684\\u662F\\uFF0C\",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u521B\\u5EFA\\u7684\\u662F\\u4E00\\u4E2A\\u6D45\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u3002\\u5982\\u679C\\u5BF9\\u8C61\\u5305\\u542B\\u5D4C\\u5957\\u5BF9\\u8C61\\u6216\\u6570\\u7EC4\\uFF0C\\u9664\\u975E\\u5355\\u72EC\\u51BB\\u7ED3\\uFF0C\\u5426\\u5219\\u8FD9\\u4E9B\\u5D4C\\u5957\\u6570\\u636E\\u7ED3\\u6784\\u4ECD\\u7136\\u662F\\u53EF\\u53D8\\u7684\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u56E0\\u6B64\\uFF0C\\u867D\\u7136 \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u4E3A\\u539F\\u59CB\\u503C\\u63D0\\u4F9B\\u4E86\\u4E0D\\u53EF\\u53D8\\u6027\\uFF0C\\u4F46\\u521B\\u5EFA\\u771F\\u6B63\\u4E0D\\u53EF\\u53D8\\u7684\\u5BF9\\u8C61\\u9700\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u6216\\u5176\\u4ED6\\u4E0D\\u53EF\\u53D8\\u6027\\u6280\\u672F\\uFF0C\\u5982\\u6DF1\\u5EA6\\u51BB\\u7ED3\\u6216\\u4F7F\\u7528\\u6765\\u81EA \",(0,n.jsx)(e.a,{href:\"https://immerjs.github.io/immer/\",children:\"Immer\"}),\" \\u6216 \",(0,n.jsx)(e.a,{href:\"https://immutable-js.com/\",children:\"Immutable.js\"}),\" \\u7B49\\u5E93\\u7684\\u4E0D\\u53EF\\u53D8\\u6570\\u636E\\u7ED3\\u6784\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5728\\u666E\\u901A JavaScript \\u5BF9\\u8C61\\u4E2D\\u5B9E\\u73B0\\u4E0D\\u53EF\\u53D8\\u7684\\u5404\\u79CD\\u65B9\\u6CD5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u5728\\u666E\\u901A JavaScript \\u5BF9\\u8C61\\u4E2D\\u6DFB\\u52A0/\\u6A21\\u62DF\\u4E0D\\u540C\\u5F62\\u5F0F\\u7684\\u4E0D\\u53EF\\u53D8\\u6027\\u7684\\u51E0\\u79CD\\u65B9\\u6CD5\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u5C5E\\u6027\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u901A\\u8FC7\\u7ED3\\u5408 \",(0,n.jsx)(e.code,{children:\"writable: false\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"configurable: false\"}),\"\\uFF0C\\u60A8\\u672C\\u8D28\\u4E0A\\u53EF\\u4EE5\\u521B\\u5EFA\\u4E00\\u4E2A\\u5E38\\u91CF\\uFF08\\u4E0D\\u80FD\\u66F4\\u6539\\u3001\\u91CD\\u65B0\\u5B9A\\u4E49\\u6216\\u5220\\u9664\\uFF09\\u4F5C\\u4E3A\\u5BF9\\u8C61\\u5C5E\\u6027\\uFF0C\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const myObject = {};\nObject.defineProperty(myObject, 'number', {\n  value: 42,\n  writable: false,\n  configurable: false,\n});\nconsole.log(myObject.number); // 42\nmyObject.number = 43;\nconsole.log(myObject.number); // 42\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u963B\\u6B62\\u5BF9\\u8C61\\u6269\\u5C55\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u60A8\\u60F3\\u963B\\u6B62\\u5411\\u5BF9\\u8C61\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\uFF0C\\u4F46\\u4FDD\\u6301\\u5BF9\\u8C61\\u7684\\u5176\\u4F59\\u5C5E\\u6027\\u4E0D\\u53D8\\uFF0C\\u8BF7\\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.preventExtensions(...)\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let myObject = {\n  a: 2,\n};\n\nObject.preventExtensions(myObject);\n\nmyObject.b = 3;\nconsole.log(myObject.b); // undefined\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF0C\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"b\"}),\" \\u4F1A\\u9759\\u9ED8\\u5931\\u8D25\\u3002\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF0C\\u5B83\\u4F1A\\u629B\\u51FA \",(0,n.jsx)(e.code,{children:\"TypeError\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5BC6\\u5C01\\u4E00\\u4E2A\\u5BF9\\u8C61\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.seal()\"}),\" \\u521B\\u5EFA\\u4E00\\u4E2A\\u201C\\u5BC6\\u5C01\\u201D\\u5BF9\\u8C61\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4F1A\\u83B7\\u53D6\\u4E00\\u4E2A\\u73B0\\u6709\\u5BF9\\u8C61\\uFF0C\\u5E76\\u57FA\\u672C\\u4E0A\\u5728\\u5176\\u4E0A\\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.preventExtensions()\"}),\"\\uFF0C\\u4F46\\u4E5F\\u4F1A\\u5C06\\u6240\\u6709\\u73B0\\u6709\\u5C5E\\u6027\\u6807\\u8BB0\\u4E3A \",(0,n.jsx)(e.code,{children:\"configurable: false\"}),\"\\u3002\\u56E0\\u6B64\\uFF0C\\u60A8\\u4E0D\\u4EC5\\u4E0D\\u80FD\\u6DFB\\u52A0\\u66F4\\u591A\\u5C5E\\u6027\\uFF0C\\u800C\\u4E14\\u4E5F\\u4E0D\\u80FD\\u91CD\\u65B0\\u914D\\u7F6E\\u6216\\u5220\\u9664\\u4EFB\\u4F55\\u73B0\\u6709\\u5C5E\\u6027\\uFF0C\\u5C3D\\u7BA1\\u60A8\\u4ECD\\u7136\\u53EF\\u4EE5\\u4FEE\\u6539\\u5B83\\u4EEC\\u7684\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u521B\\u5EFA\\u4E00\\u4E2A\\u5BF9\\u8C61\nconst person = {\n  name: 'John Doe',\n  age: 30,\n};\n\n// \\u5BC6\\u5C01\\u5BF9\\u8C61\nObject.seal(person);\n\n// \\u5C1D\\u8BD5\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\uFF08\\u8FD9\\u5C06\\u9759\\u9ED8\\u5931\\u8D25\\uFF09\nperson.city = 'New York'; // \\u8FD9\\u6CA1\\u6709\\u6548\\u679C\n\n// \\u5C1D\\u8BD5\\u5220\\u9664\\u73B0\\u6709\\u5C5E\\u6027\\uFF08\\u8FD9\\u5C06\\u9759\\u9ED8\\u5931\\u8D25\\uFF09\ndelete person.age; // \\u8FD9\\u6CA1\\u6709\\u6548\\u679C\n\n// \\u4FEE\\u6539\\u73B0\\u6709\\u5C5E\\u6027\\uFF08\\u8FD9\\u5C06\\u8D77\\u4F5C\\u7528\\uFF09\nperson.age = 35;\n\nconsole.log(person); // \\u8F93\\u51FA\\uFF1A{ name: 'John Doe', age: 35 }\n\n// \\u5C1D\\u8BD5\\u91CD\\u65B0\\u914D\\u7F6E\\u73B0\\u6709\\u5C5E\\u6027\\u63CF\\u8FF0\\u7B26\\uFF08\\u8FD9\\u5C06\\u9759\\u9ED8\\u5931\\u8D25\\uFF09\nObject.defineProperty(person, 'name', { writable: false }); // \\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u9759\\u9ED8\\u5931\\u8D25\n\n// \\u68C0\\u67E5\\u5BF9\\u8C61\\u662F\\u5426\\u88AB\\u5BC6\\u5C01\nconsole.log(Object.isSealed(person)); // \\u8F93\\u51FA\\uFF1Atrue\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u51BB\\u7ED3\\u4E00\\u4E2A\\u5BF9\\u8C61\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u521B\\u5EFA\\u4E00\\u4E2A\\u51BB\\u7ED3\\u5BF9\\u8C61\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4F1A\\u83B7\\u53D6\\u4E00\\u4E2A\\u73B0\\u6709\\u5BF9\\u8C61\\uFF0C\\u5E76\\u57FA\\u672C\\u4E0A\\u5728\\u5176\\u4E0A\\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.seal()\"}),\"\\uFF0C\\u4F46\\u5B83\\u4E5F\\u4F1A\\u5C06\\u6240\\u6709\\u201C\\u6570\\u636E\\u8BBF\\u95EE\\u5668\\u201D\\u5C5E\\u6027\\u6807\\u8BB0\\u4E3A writable:false\\uFF0C\\u4EE5\\u4FBF\\u5B83\\u4EEC\\u7684\\u503C\\u4E0D\\u80FD\\u88AB\\u66F4\\u6539\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD9\\u79CD\\u65B9\\u6CD5\\u662F\\u60A8\\u53EF\\u4EE5\\u4E3A\\u5BF9\\u8C61\\u672C\\u8EAB\\u8FBE\\u5230\\u7684\\u6700\\u9AD8\\u7EA7\\u522B\\u7684\\u4E0D\\u53EF\\u53D8\\u6027\\uFF0C\\u56E0\\u4E3A\\u5B83\\u963B\\u6B62\\u4E86\\u5BF9\\u5BF9\\u8C61\\u6216\\u5176\\u4EFB\\u4F55\\u76F4\\u63A5\\u5C5E\\u6027\\u7684\\u4EFB\\u4F55\\u66F4\\u6539\\uFF08\\u5C3D\\u7BA1\\uFF0C\\u5982\\u4E0A\\u6240\\u8FF0\\uFF0C\\u4EFB\\u4F55\\u5F15\\u7528\\u7684\\u5176\\u4ED6\\u5BF9\\u8C61\\u7684\\u5185\\u5BB9\\u4E0D\\u53D7\\u5F71\\u54CD\\uFF09\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let immutableObject = Object.freeze({});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u51BB\\u7ED3\\u5BF9\\u8C61\\u4E0D\\u5141\\u8BB8\\u5411\\u5BF9\\u8C61\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\uFF0C\\u5E76\\u963B\\u6B62\\u7528\\u6237\\u5220\\u9664\\u6216\\u66F4\\u6539\\u73B0\\u6709\\u5C5E\\u6027\\u3002\",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u4FDD\\u7559\\u4E86\\u5BF9\\u8C61\\u7684\\u679A\\u4E3E\\u6027\\u3001\\u53EF\\u914D\\u7F6E\\u6027\\u3001\\u53EF\\u5199\\u6027\\u548C \",(0,n.jsx)(e.code,{children:\"prototype\"}),\"\\u3002\\u5B83\\u8FD4\\u56DE\\u4F20\\u9012\\u7684\\u5BF9\\u8C61\\uFF0C\\u5E76\\u4E14\\u4E0D\\u4F1A\\u521B\\u5EFA\\u51BB\\u7ED3\\u526F\\u672C\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u4F7F\\u5BF9\\u8C61\\u4E0D\\u53EF\\u53D8\\u3002\\u4F46\\u662F\\uFF0C\\u5B83\\u4E0D\\u4E00\\u5B9A\\u662F\\u5E38\\u91CF\\u3002\",(0,n.jsx)(e.code,{children:\"Object.freeze\"}),\" \\u963B\\u6B62\\u5BF9\\u5BF9\\u8C61\\u672C\\u8EAB\\u53CA\\u5176\\u76F4\\u63A5\\u5C5E\\u6027\\u7684\\u4FEE\\u6539\\uFF0C\\u51BB\\u7ED3\\u5BF9\\u8C61\\u5185\\u7684\\u5D4C\\u5957\\u5BF9\\u8C61\\u4ECD\\u7136\\u53EF\\u4EE5\\u88AB\\u4FEE\\u6539\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let obj = {\n  user: {},\n};\n\nObject.freeze(obj);\nobj.user.name = 'John';\n\nconsole.log(obj.user.name); //Output: 'John'\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4E0D\\u53EF\\u53D8\\u6027\\u7684\\u4F18\\u7F3A\\u70B9\\u662F\\u4EC0\\u4E48\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u66F4\\u5BB9\\u6613\\u8FDB\\u884C\\u66F4\\u6539\\u68C0\\u6D4B\"}),\"\\uFF1A\\u53EF\\u4EE5\\u901A\\u8FC7\\u5F15\\u7528\\u76F8\\u7B49\\u6027\\u4EE5\\u9AD8\\u6027\\u80FD\\u548C\\u7B80\\u5355\\u7684\\u65B9\\u5F0F\\u786E\\u5B9A\\u5BF9\\u8C61\\u76F8\\u7B49\\u6027\\u3002\\u8FD9\\u5BF9\\u4E8E\\u6BD4\\u8F83 React \\u548C Redux \\u4E2D\\u7684\\u5BF9\\u8C61\\u5DEE\\u5F02\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u66F4\\u7B80\\u5355\"}),\"\\uFF1A\\u4F7F\\u7528\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u7684\\u7A0B\\u5E8F\\u66F4\\u6613\\u4E8E\\u601D\\u8003\\uFF0C\\u56E0\\u4E3A\\u60A8\\u65E0\\u9700\\u62C5\\u5FC3\\u5BF9\\u8C61\\u53EF\\u80FD\\u968F\\u65F6\\u95F4\\u6F14\\u53D8\\u7684\\u65B9\\u5F0F\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u901A\\u8FC7\\u5F15\\u7528\\u8F7B\\u677E\\u5171\\u4EAB\\uFF1A\\u4E00\\u4E2A\\u5BF9\\u8C61\\u7684\\u526F\\u672C\\u4E0E\\u53E6\\u4E00\\u4E2A\\u5BF9\\u8C61\\u4E00\\u6837\\u597D\\uFF0C\\u56E0\\u6B64\\u60A8\\u53EF\\u4EE5\\u7F13\\u5B58\\u5BF9\\u8C61\\u6216\\u591A\\u6B21\\u91CD\\u7528\\u540C\\u4E00\\u5BF9\\u8C61\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u7EBF\\u7A0B\\u5B89\\u5168\"}),\"\\uFF1A\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u53EF\\u4EE5\\u5728\\u591A\\u7EBF\\u7A0B\\u73AF\\u5883\\u4E2D\\u7684\\u7EBF\\u7A0B\\u4E4B\\u95F4\\u5B89\\u5168\\u4F7F\\u7528\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u6709\\u5728\\u5176\\u4ED6\\u5E76\\u53D1\\u8FD0\\u884C\\u7684\\u7EBF\\u7A0B\\u4E2D\\u88AB\\u4FEE\\u6539\\u7684\\u98CE\\u9669\\u3002\\u5728\\u5927\\u591A\\u6570\\u60C5\\u51B5\\u4E0B\\uFF0CJavaScript \\u5728\\u5355\\u7EBF\\u7A0B\\u73AF\\u5883\\u4E2D\\u8FD0\\u884C\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u51CF\\u5C11\\u5185\\u5B58\\u9700\\u6C42\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,n.jsx)(e.a,{href:\"https://immerjs.github.io/immer/\",children:\"Immer\"}),\" \\u548C \",(0,n.jsx)(e.a,{href:\"https://immutable-js.com/\",children:\"Immutable.js\"}),\" \\u7B49\\u5E93\\uFF0C\\u4F7F\\u7528\\u7ED3\\u6784\\u5171\\u4EAB\\u4FEE\\u6539\\u5BF9\\u8C61\\uFF0C\\u5E76\\u4E14\\u5BF9\\u4E8E\\u5177\\u6709\\u76F8\\u4F3C\\u7ED3\\u6784\\u7684\\u591A\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u6240\\u9700\\u7684\\u5185\\u5B58\\u66F4\\u5C11\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u65E0\\u9700\\u9632\\u5FA1\\u6027\\u590D\\u5236\"}),\"\\uFF1A\\u5F53\\u4ECE\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u8FD4\\u56DE\\u6216\\u4F20\\u9012\\u7ED9\\u51FD\\u6570\\u65F6\\uFF0C\\u4E0D\\u518D\\u9700\\u8981\\u9632\\u5FA1\\u6027\\u526F\\u672C\\uFF0C\\u56E0\\u4E3A\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u4E0D\\u53EF\\u80FD\\u88AB\\u5B83\\u4FEE\\u6539\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u96BE\\u4EE5\\u81EA\\u884C\\u521B\\u5EFA\"}),\"\\uFF1A\\u4E0D\\u53EF\\u53D8\\u6570\\u636E\\u7ED3\\u6784\\u53CA\\u5176\\u64CD\\u4F5C\\u7684\\u6734\\u7D20\\u5B9E\\u73B0\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u6027\\u80FD\\u6781\\u5DEE\\uFF0C\\u56E0\\u4E3A\\u6BCF\\u6B21\\u90FD\\u4F1A\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\u3002\\u5EFA\\u8BAE\\u4F7F\\u7528\\u5E93\\u6765\\u5B9E\\u73B0\\u9AD8\\u6548\\u7684\\u4E0D\\u53EF\\u53D8\\u6570\\u636E\\u7ED3\\u6784\\u548C\\u5229\\u7528\\u7ED3\\u6784\\u5171\\u4EAB\\u7684\\u64CD\\u4F5C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6F5C\\u5728\\u7684\\u8D1F\\u9762\\u6027\\u80FD\"}),\"\\uFF1A\\u5206\\u914D\\uFF08\\u548C\\u91CA\\u653E\\uFF09\\u8BB8\\u591A\\u5C0F\\u5BF9\\u8C61\\u800C\\u4E0D\\u662F\\u4FEE\\u6539\\u73B0\\u6709\\u5BF9\\u8C61\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u6027\\u80FD\\u5F71\\u54CD\\u3002\\u5206\\u914D\\u5668\\u6216\\u5783\\u573E\\u6536\\u96C6\\u5668\\u7684\\u590D\\u6742\\u6027\\u901A\\u5E38\\u53D6\\u51B3\\u4E8E\\u5806\\u4E0A\\u7684\\u5BF9\\u8C61\\u6570\\u91CF\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5FAA\\u73AF\\u6570\\u636E\\u7ED3\\u6784\\u7684\\u590D\\u6742\\u6027\"}),\"\\uFF1A\\u5FAA\\u73AF\\u6570\\u636E\\u7ED3\\u6784\\uFF08\\u5982\\u56FE\\u5F62\\uFF09\\u96BE\\u4EE5\\u5B9E\\u73B0\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Object/defineProperty\",children:\"Object.defineProperty() | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze\",children:\"Object.freeze() | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal\",children:\"Object.seal() | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions\",children:\"Object.preventExtensions() | MDN\"})}),`\n`]})]})}function s(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(h,{...c})}):h(c)}return v(z);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-shallow-copy-and-deep-copy/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-shallow-copy-and-deep-copy/en-US.json
index a1ff4c9f3..01627176c 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-shallow-copy-and-deep-copy/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-shallow-copy-and-deep-copy/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-shallow-copy-and-deep-copy/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),y=(o,e)=>{for(var c in e)t(o,c,{get:e[c],enumerable:!0})},i=(o,e,c,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of b(e))!u.call(o,l)&&l!==c&&t(o,l,{get:()=>e[l],enumerable:!(r=p(e,l))||r.enumerable});return o};var f=(o,e,c)=>(c=o!=null?h(j(o)):{},i(e||!o||!o.__esModule?t(c,\"default\",{value:o,enumerable:!0}):c,o)),m=o=>i(t({},\"__esModule\",{value:!0}),o);var d=g((D,a)=>{a.exports=_jsx_runtime});var S={};y(S,{default:()=>O,frontmatter:()=>w});var n=f(d()),w={title:\"Explain the difference between shallow copy and deep copy\"};function s(o){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A shallow copy duplicates the top-level properties of an object, but nested objects are still referenced. A deep copy duplicates all levels of an object, creating entirely new instances of nested objects. For example, using \",(0,n.jsx)(e.code,{children:\"Object.assign()\"}),\" creates a shallow copy, while using libraries like \",(0,n.jsx)(e.code,{children:\"Lodash\"}),\" or \",(0,n.jsx)(e.code,{children:\"structuredClone()\"}),\" in modern JavaScript can create deep copies.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Shallow copy example\nlet obj1 = { a: 1, b: { c: 2 } };\nlet shallowCopy = Object.assign({}, obj1);\nshallowCopy.b.c = 3;\nconsole.log(shallowCopy.b.c); // Output: 3\nconsole.log(obj1.b.c); // Output: 3 (original nested object changed too!)\n\n// Deep copy example\nlet obj2 = { a: 1, b: { c: 2 } };\nlet deepCopy = JSON.parse(JSON.stringify(obj2));\ndeepCopy.b.c = 4;\nconsole.log(deepCopy.b.c); // Output: 4\nconsole.log(obj2.b.c); // Output: 2 (original nested object remains unchanged)\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Difference between shallow copy and deep copy\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Shallow copy\"}),`\n`,(0,n.jsx)(e.p,{children:\"A shallow copy creates a new object and copies the values of the original object's top-level properties into the new object. However, if any of these properties are references to other objects, only the reference is copied, not the actual object. This means that changes to nested objects in the copied object will affect the original object.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let obj1 = { a: 1, b: { c: 2 } };\nlet shallowCopy = Object.assign({}, obj1);\nshallowCopy.b.c = 3;\nconsole.log(shallowCopy.b.c); // Output: 3\nconsole.log(obj1.b.c); // Output: 3 (original nested object changed too!)\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"shallowCopy\"}),\" is a shallow copy of \",(0,n.jsx)(e.code,{children:\"obj1\"}),\". Changing \",(0,n.jsx)(e.code,{children:\"shallowCopy.b.c\"}),\" also changes \",(0,n.jsx)(e.code,{children:\"obj1.b.c\"}),\" because \",(0,n.jsx)(e.code,{children:\"b\"}),\" is a reference to the same object in both \",(0,n.jsx)(e.code,{children:\"obj1\"}),\" and \",(0,n.jsx)(e.code,{children:\"shallowCopy\"}),\".\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Deep copy\"}),`\n`,(0,n.jsx)(e.p,{children:\"A deep copy creates a new object and recursively copies all properties and nested objects from the original object. This means that the new object is completely independent of the original object, and changes to nested objects in the copied object do not affect the original object.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let obj1 = { a: 1, b: { c: 2 } };\nlet deepCopy = JSON.parse(JSON.stringify(obj1));\ndeepCopy.b.c = 4;\nconsole.log(deepCopy.b.c); // Output: 4\nconsole.log(obj1.b.c); // Output: 2 (original nested object remains unchanged)\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"deepCopy\"}),\" is a deep copy of \",(0,n.jsx)(e.code,{children:\"obj1\"}),\". Changing \",(0,n.jsx)(e.code,{children:\"deepCopy.b.c\"}),\" does not affect \",(0,n.jsx)(e.code,{children:\"obj1.b.c\"}),\" because \",(0,n.jsx)(e.code,{children:\"b\"}),\" is a completely new object in \",(0,n.jsx)(e.code,{children:\"deepCopy\"}),\".\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Methods to create shallow and deep copies\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Shallow copy methods\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"Object.assign()\"})}),`\n`,(0,n.jsxs)(e.li,{children:[\"Spread operator (\",(0,n.jsx)(e.code,{children:\"...\"}),\")\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Deep copy methods\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"JSON.parse(JSON.stringify())\"})}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"structuredClone()\"}),\" (modern JavaScript)\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Libraries like \",(0,n.jsx)(e.code,{children:\"Lodash\"}),\" (\",(0,n.jsx)(e.code,{children:\"_.cloneDeep\"}),\")\"]}),`\n`]}),`\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/Web/JavaScript/Reference/Global_Objects/Object/assign\",children:\"MDN Web Docs: Object.assign()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse\",children:\"MDN Web Docs: JSON.parse()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/structuredClone\",children:\"MDN Web Docs: structuredClone()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://lodash.com/docs/4.17.15#cloneDeep\",children:\"Lodash Documentation: _.cloneDeep\"})}),`\n`]})]})}function C(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(s,o)})):s(o)}var O=C;return m(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),f=(o,e)=>{for(var c in e)t(o,c,{get:e[c],enumerable:!0})},i=(o,e,c,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of j(e))!g.call(o,l)&&l!==c&&t(o,l,{get:()=>e[l],enumerable:!(r=b(e,l))||r.enumerable});return o};var m=(o,e,c)=>(c=o!=null?p(u(o)):{},i(e||!o||!o.__esModule?t(c,\"default\",{value:o,enumerable:!0}):c,o)),w=o=>i(t({},\"__esModule\",{value:!0}),o);var a=y((x,d)=>{d.exports=_jsx_runtime});var O={};f(O,{default:()=>h,frontmatter:()=>C});var n=m(a()),C={title:\"Explain the difference between shallow copy and deep copy\"};function s(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A shallow copy duplicates the top-level properties of an object, but nested objects are still referenced. A deep copy duplicates all levels of an object, creating entirely new instances of nested objects. For example, using \",(0,n.jsx)(e.code,{children:\"Object.assign()\"}),\" creates a shallow copy, while using libraries like \",(0,n.jsx)(e.code,{children:\"Lodash\"}),\" or \",(0,n.jsx)(e.code,{children:\"structuredClone()\"}),\" in modern JavaScript can create deep copies.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Shallow copy example\nlet obj1 = { a: 1, b: { c: 2 } };\nlet shallowCopy = Object.assign({}, obj1);\nshallowCopy.b.c = 3;\nconsole.log(shallowCopy.b.c); // Output: 3\nconsole.log(obj1.b.c); // Output: 3 (original nested object changed too!)\n\n// Deep copy example\nlet obj2 = { a: 1, b: { c: 2 } };\nlet deepCopy = JSON.parse(JSON.stringify(obj2));\ndeepCopy.b.c = 4;\nconsole.log(deepCopy.b.c); // Output: 4\nconsole.log(obj2.b.c); // Output: 2 (original nested object remains unchanged)\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Difference between shallow copy and deep copy\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Shallow copy\"}),`\n`,(0,n.jsx)(e.p,{children:\"A shallow copy creates a new object and copies the values of the original object's top-level properties into the new object. However, if any of these properties are references to other objects, only the reference is copied, not the actual object. This means that changes to nested objects in the copied object will affect the original object.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let obj1 = { a: 1, b: { c: 2 } };\nlet shallowCopy = Object.assign({}, obj1);\nshallowCopy.b.c = 3;\nconsole.log(shallowCopy.b.c); // Output: 3\nconsole.log(obj1.b.c); // Output: 3 (original nested object changed too!)\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"shallowCopy\"}),\" is a shallow copy of \",(0,n.jsx)(e.code,{children:\"obj1\"}),\". Changing \",(0,n.jsx)(e.code,{children:\"shallowCopy.b.c\"}),\" also changes \",(0,n.jsx)(e.code,{children:\"obj1.b.c\"}),\" because \",(0,n.jsx)(e.code,{children:\"b\"}),\" is a reference to the same object in both \",(0,n.jsx)(e.code,{children:\"obj1\"}),\" and \",(0,n.jsx)(e.code,{children:\"shallowCopy\"}),\".\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Deep copy\"}),`\n`,(0,n.jsx)(e.p,{children:\"A deep copy creates a new object and recursively copies all properties and nested objects from the original object. This means that the new object is completely independent of the original object, and changes to nested objects in the copied object do not affect the original object.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let obj1 = { a: 1, b: { c: 2 } };\nlet deepCopy = JSON.parse(JSON.stringify(obj1));\ndeepCopy.b.c = 4;\nconsole.log(deepCopy.b.c); // Output: 4\nconsole.log(obj1.b.c); // Output: 2 (original nested object remains unchanged)\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"deepCopy\"}),\" is a deep copy of \",(0,n.jsx)(e.code,{children:\"obj1\"}),\". Changing \",(0,n.jsx)(e.code,{children:\"deepCopy.b.c\"}),\" does not affect \",(0,n.jsx)(e.code,{children:\"obj1.b.c\"}),\" because \",(0,n.jsx)(e.code,{children:\"b\"}),\" is a completely new object in \",(0,n.jsx)(e.code,{children:\"deepCopy\"}),\".\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Methods to create shallow and deep copies\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Shallow copy methods\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"Object.assign()\"})}),`\n`,(0,n.jsxs)(e.li,{children:[\"Spread operator (\",(0,n.jsx)(e.code,{children:\"...\"}),\")\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Deep copy methods\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"JSON.parse(JSON.stringify())\"})}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"structuredClone()\"}),\" (modern JavaScript)\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Libraries like \",(0,n.jsx)(e.code,{children:\"Lodash\"}),\" (\",(0,n.jsx)(e.code,{children:\"_.cloneDeep\"}),\")\"]}),`\n`]}),`\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/Web/JavaScript/Reference/Global_Objects/Object/assign\",children:\"MDN Web Docs: Object.assign()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse\",children:\"MDN Web Docs: JSON.parse()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/structuredClone\",children:\"MDN Web Docs: structuredClone()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://lodash.com/docs/4.17.15#cloneDeep\",children:\"Lodash Documentation: _.cloneDeep\"})}),`\n`]})]})}function h(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(s,{...o})}):s(o)}return w(O);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-shallow-copy-and-deep-copy/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-shallow-copy-and-deep-copy/zh-CN.json
index 327346892..b749e51c8 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-shallow-copy-and-deep-copy/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-shallow-copy-and-deep-copy/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-shallow-copy-and-deep-copy/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var g=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),O=(c,e)=>{for(var l in e)r(c,l,{get:e[l],enumerable:!0})},i=(c,e,l,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of b(e))!j.call(c,o)&&o!==l&&r(c,o,{get:()=>e[o],enumerable:!(d=p(e,o))||d.enumerable});return c};var y=(c,e,l)=>(l=c!=null?a(u(c)):{},i(e||!c||!c.__esModule?r(l,\"default\",{value:c,enumerable:!0}):l,c)),C=c=>i(r({},\"__esModule\",{value:!0}),c);var t=g((J,h)=>{h.exports=_jsx_runtime});var D={};O(D,{default:()=>f,frontmatter:()=>m});var n=y(t()),m={title:\"\\u89E3\\u91CA\\u6D45\\u62F7\\u8D1D\\u548C\\u6DF1\\u62F7\\u8D1D\\u7684\\u533A\\u522B\"};function s(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6D45\\u62F7\\u8D1D\\u590D\\u5236\\u5BF9\\u8C61\\u7684\\u9876\\u5C42\\u5C5E\\u6027\\uFF0C\\u4F46\\u5D4C\\u5957\\u5BF9\\u8C61\\u4ECD\\u7136\\u88AB\\u5F15\\u7528\\u3002\\u6DF1\\u62F7\\u8D1D\\u590D\\u5236\\u5BF9\\u8C61\\u7684\\u6240\\u6709\\u5C42\\u7EA7\\uFF0C\\u521B\\u5EFA\\u5D4C\\u5957\\u5BF9\\u8C61\\u7684\\u5168\\u65B0\\u5B9E\\u4F8B\\u3002\\u4F8B\\u5982\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.assign()\"}),\" \\u521B\\u5EFA\\u6D45\\u62F7\\u8D1D\\uFF0C\\u800C\\u4F7F\\u7528\\u50CF \",(0,n.jsx)(e.code,{children:\"Lodash\"}),\" \\u6216\\u73B0\\u4EE3 JavaScript \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"structuredClone()\"}),\" \\u8FD9\\u6837\\u7684\\u5E93\\u53EF\\u4EE5\\u521B\\u5EFA\\u6DF1\\u62F7\\u8D1D\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Shallow copy example\nlet obj1 = { a: 1, b: { c: 2 } };\nlet shallowCopy = Object.assign({}, obj1);\nshallowCopy.b.c = 3;\nconsole.log(shallowCopy.b.c); // Output: 3\nconsole.log(obj1.b.c); // Output: 3 (original nested object changed too!)\n\n// Deep copy example\nlet obj2 = { a: 1, b: { c: 2 } };\nlet deepCopy = JSON.parse(JSON.stringify(obj2));\ndeepCopy.b.c = 4;\nconsole.log(deepCopy.b.c); // Output: 4\nconsole.log(obj2.b.c); // Output: 2 (original nested object remains unchanged)\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6D45\\u62F7\\u8D1D\\u548C\\u6DF1\\u62F7\\u8D1D\\u7684\\u533A\\u522B\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6D45\\u62F7\\u8D1D\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6D45\\u62F7\\u8D1D\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5BF9\\u8C61\\uFF0C\\u5E76\\u5C06\\u539F\\u59CB\\u5BF9\\u8C61\\u7684\\u9876\\u5C42\\u5C5E\\u6027\\u7684\\u503C\\u590D\\u5236\\u5230\\u65B0\\u5BF9\\u8C61\\u4E2D\\u3002\\u4F46\\u662F\\uFF0C\\u5982\\u679C\\u8FD9\\u4E9B\\u5C5E\\u6027\\u4E2D\\u7684\\u4EFB\\u4F55\\u4E00\\u4E2A\\u662F\\u5176\\u4ED6\\u5BF9\\u8C61\\u7684\\u5F15\\u7528\\uFF0C\\u5219\\u4EC5\\u590D\\u5236\\u5F15\\u7528\\uFF0C\\u800C\\u4E0D\\u662F\\u5B9E\\u9645\\u5BF9\\u8C61\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u5BF9\\u590D\\u5236\\u5BF9\\u8C61\\u4E2D\\u5D4C\\u5957\\u5BF9\\u8C61\\u7684\\u66F4\\u6539\\u5C06\\u5F71\\u54CD\\u539F\\u59CB\\u5BF9\\u8C61\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let obj1 = { a: 1, b: { c: 2 } };\nlet shallowCopy = Object.assign({}, obj1);\nshallowCopy.b.c = 3;\nconsole.log(shallowCopy.b.c); // Output: 3\nconsole.log(obj1.b.c); // Output: 3 (original nested object changed too!)\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"shallowCopy\"}),\" \\u662F \",(0,n.jsx)(e.code,{children:\"obj1\"}),\" \\u7684\\u6D45\\u62F7\\u8D1D\\u3002\\u66F4\\u6539 \",(0,n.jsx)(e.code,{children:\"shallowCopy.b.c\"}),\" \\u4E5F\\u4F1A\\u66F4\\u6539 \",(0,n.jsx)(e.code,{children:\"obj1.b.c\"}),\"\\uFF0C\\u56E0\\u4E3A \",(0,n.jsx)(e.code,{children:\"b\"}),\" \\u662F \",(0,n.jsx)(e.code,{children:\"obj1\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"shallowCopy\"}),\" \\u4E2D\\u5BF9\\u540C\\u4E00\\u5BF9\\u8C61\\u7684\\u5F15\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6DF1\\u62F7\\u8D1D\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6DF1\\u62F7\\u8D1D\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5BF9\\u8C61\\uFF0C\\u5E76\\u9012\\u5F52\\u5730\\u590D\\u5236\\u539F\\u59CB\\u5BF9\\u8C61\\u7684\\u6240\\u6709\\u5C5E\\u6027\\u548C\\u5D4C\\u5957\\u5BF9\\u8C61\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u65B0\\u5BF9\\u8C61\\u5B8C\\u5168\\u72EC\\u7ACB\\u4E8E\\u539F\\u59CB\\u5BF9\\u8C61\\uFF0C\\u5E76\\u4E14\\u5BF9\\u590D\\u5236\\u5BF9\\u8C61\\u4E2D\\u5D4C\\u5957\\u5BF9\\u8C61\\u7684\\u66F4\\u6539\\u4E0D\\u4F1A\\u5F71\\u54CD\\u539F\\u59CB\\u5BF9\\u8C61\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let obj1 = { a: 1, b: { c: 2 } };\nlet deepCopy = JSON.parse(JSON.stringify(obj1));\ndeepCopy.b.c = 4;\nconsole.log(deepCopy.b.c); // Output: 4\nconsole.log(obj1.b.c); // Output: 2 (original nested object remains unchanged)\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"deepCopy\"}),\" \\u662F \",(0,n.jsx)(e.code,{children:\"obj1\"}),\" \\u7684\\u6DF1\\u62F7\\u8D1D\\u3002\\u66F4\\u6539 \",(0,n.jsx)(e.code,{children:\"deepCopy.b.c\"}),\" \\u4E0D\\u4F1A\\u5F71\\u54CD \",(0,n.jsx)(e.code,{children:\"obj1.b.c\"}),\"\\uFF0C\\u56E0\\u4E3A \",(0,n.jsx)(e.code,{children:\"b\"}),\" \\u5728 \",(0,n.jsx)(e.code,{children:\"deepCopy\"}),\" \\u4E2D\\u662F\\u4E00\\u4E2A\\u5168\\u65B0\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u521B\\u5EFA\\u6D45\\u62F7\\u8D1D\\u548C\\u6DF1\\u62F7\\u8D1D\\u7684\\u65B9\\u6CD5\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u6D45\\u62F7\\u8D1D\\u65B9\\u6CD5\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"Object.assign()\"})}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26 (\",(0,n.jsx)(e.code,{children:\"...\"}),\")\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u6DF1\\u62F7\\u8D1D\\u65B9\\u6CD5\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"JSON.parse(JSON.stringify())\"})}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"structuredClone()\"}),\" (\\u73B0\\u4EE3 JavaScript)\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u50CF \",(0,n.jsx)(e.code,{children:\"Lodash\"}),\" \\u8FD9\\u6837\\u7684\\u5E93 (\",(0,n.jsx)(e.code,{children:\"_.cloneDeep\"}),\")\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Object/assign\",children:\"MDN Web Docs: Object.assign()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse\",children:\"MDN Web Docs: JSON.parse()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/structuredClone\",children:\"MDN Web Docs: structuredClone()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://lodash.com/docs/4.17.15#cloneDeep\",children:\"Lodash Documentation: _.cloneDeep\"})}),`\n`]})]})}function S(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(s,c)})):s(c)}var f=S;return C(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),C=(c,e)=>{for(var l in e)r(c,l,{get:e[l],enumerable:!0})},i=(c,e,l,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!g.call(c,o)&&o!==l&&r(c,o,{get:()=>e[o],enumerable:!(d=b(e,o))||d.enumerable});return c};var O=(c,e,l)=>(l=c!=null?p(j(c)):{},i(e||!c||!c.__esModule?r(l,\"default\",{value:c,enumerable:!0}):l,c)),m=c=>i(r({},\"__esModule\",{value:!0}),c);var t=y((N,h)=>{h.exports=_jsx_runtime});var f={};C(f,{default:()=>a,frontmatter:()=>S});var n=O(t()),S={title:\"\\u89E3\\u91CA\\u6D45\\u62F7\\u8D1D\\u548C\\u6DF1\\u62F7\\u8D1D\\u7684\\u533A\\u522B\"};function s(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6D45\\u62F7\\u8D1D\\u590D\\u5236\\u5BF9\\u8C61\\u7684\\u9876\\u5C42\\u5C5E\\u6027\\uFF0C\\u4F46\\u5D4C\\u5957\\u5BF9\\u8C61\\u4ECD\\u7136\\u88AB\\u5F15\\u7528\\u3002\\u6DF1\\u62F7\\u8D1D\\u590D\\u5236\\u5BF9\\u8C61\\u7684\\u6240\\u6709\\u5C42\\u7EA7\\uFF0C\\u521B\\u5EFA\\u5D4C\\u5957\\u5BF9\\u8C61\\u7684\\u5168\\u65B0\\u5B9E\\u4F8B\\u3002\\u4F8B\\u5982\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.assign()\"}),\" \\u521B\\u5EFA\\u6D45\\u62F7\\u8D1D\\uFF0C\\u800C\\u4F7F\\u7528\\u50CF \",(0,n.jsx)(e.code,{children:\"Lodash\"}),\" \\u6216\\u73B0\\u4EE3 JavaScript \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"structuredClone()\"}),\" \\u8FD9\\u6837\\u7684\\u5E93\\u53EF\\u4EE5\\u521B\\u5EFA\\u6DF1\\u62F7\\u8D1D\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Shallow copy example\nlet obj1 = { a: 1, b: { c: 2 } };\nlet shallowCopy = Object.assign({}, obj1);\nshallowCopy.b.c = 3;\nconsole.log(shallowCopy.b.c); // Output: 3\nconsole.log(obj1.b.c); // Output: 3 (original nested object changed too!)\n\n// Deep copy example\nlet obj2 = { a: 1, b: { c: 2 } };\nlet deepCopy = JSON.parse(JSON.stringify(obj2));\ndeepCopy.b.c = 4;\nconsole.log(deepCopy.b.c); // Output: 4\nconsole.log(obj2.b.c); // Output: 2 (original nested object remains unchanged)\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6D45\\u62F7\\u8D1D\\u548C\\u6DF1\\u62F7\\u8D1D\\u7684\\u533A\\u522B\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6D45\\u62F7\\u8D1D\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6D45\\u62F7\\u8D1D\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5BF9\\u8C61\\uFF0C\\u5E76\\u5C06\\u539F\\u59CB\\u5BF9\\u8C61\\u7684\\u9876\\u5C42\\u5C5E\\u6027\\u7684\\u503C\\u590D\\u5236\\u5230\\u65B0\\u5BF9\\u8C61\\u4E2D\\u3002\\u4F46\\u662F\\uFF0C\\u5982\\u679C\\u8FD9\\u4E9B\\u5C5E\\u6027\\u4E2D\\u7684\\u4EFB\\u4F55\\u4E00\\u4E2A\\u662F\\u5176\\u4ED6\\u5BF9\\u8C61\\u7684\\u5F15\\u7528\\uFF0C\\u5219\\u4EC5\\u590D\\u5236\\u5F15\\u7528\\uFF0C\\u800C\\u4E0D\\u662F\\u5B9E\\u9645\\u5BF9\\u8C61\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u5BF9\\u590D\\u5236\\u5BF9\\u8C61\\u4E2D\\u5D4C\\u5957\\u5BF9\\u8C61\\u7684\\u66F4\\u6539\\u5C06\\u5F71\\u54CD\\u539F\\u59CB\\u5BF9\\u8C61\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let obj1 = { a: 1, b: { c: 2 } };\nlet shallowCopy = Object.assign({}, obj1);\nshallowCopy.b.c = 3;\nconsole.log(shallowCopy.b.c); // Output: 3\nconsole.log(obj1.b.c); // Output: 3 (original nested object changed too!)\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"shallowCopy\"}),\" \\u662F \",(0,n.jsx)(e.code,{children:\"obj1\"}),\" \\u7684\\u6D45\\u62F7\\u8D1D\\u3002\\u66F4\\u6539 \",(0,n.jsx)(e.code,{children:\"shallowCopy.b.c\"}),\" \\u4E5F\\u4F1A\\u66F4\\u6539 \",(0,n.jsx)(e.code,{children:\"obj1.b.c\"}),\"\\uFF0C\\u56E0\\u4E3A \",(0,n.jsx)(e.code,{children:\"b\"}),\" \\u662F \",(0,n.jsx)(e.code,{children:\"obj1\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"shallowCopy\"}),\" \\u4E2D\\u5BF9\\u540C\\u4E00\\u5BF9\\u8C61\\u7684\\u5F15\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6DF1\\u62F7\\u8D1D\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6DF1\\u62F7\\u8D1D\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5BF9\\u8C61\\uFF0C\\u5E76\\u9012\\u5F52\\u5730\\u590D\\u5236\\u539F\\u59CB\\u5BF9\\u8C61\\u7684\\u6240\\u6709\\u5C5E\\u6027\\u548C\\u5D4C\\u5957\\u5BF9\\u8C61\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u65B0\\u5BF9\\u8C61\\u5B8C\\u5168\\u72EC\\u7ACB\\u4E8E\\u539F\\u59CB\\u5BF9\\u8C61\\uFF0C\\u5E76\\u4E14\\u5BF9\\u590D\\u5236\\u5BF9\\u8C61\\u4E2D\\u5D4C\\u5957\\u5BF9\\u8C61\\u7684\\u66F4\\u6539\\u4E0D\\u4F1A\\u5F71\\u54CD\\u539F\\u59CB\\u5BF9\\u8C61\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let obj1 = { a: 1, b: { c: 2 } };\nlet deepCopy = JSON.parse(JSON.stringify(obj1));\ndeepCopy.b.c = 4;\nconsole.log(deepCopy.b.c); // Output: 4\nconsole.log(obj1.b.c); // Output: 2 (original nested object remains unchanged)\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"deepCopy\"}),\" \\u662F \",(0,n.jsx)(e.code,{children:\"obj1\"}),\" \\u7684\\u6DF1\\u62F7\\u8D1D\\u3002\\u66F4\\u6539 \",(0,n.jsx)(e.code,{children:\"deepCopy.b.c\"}),\" \\u4E0D\\u4F1A\\u5F71\\u54CD \",(0,n.jsx)(e.code,{children:\"obj1.b.c\"}),\"\\uFF0C\\u56E0\\u4E3A \",(0,n.jsx)(e.code,{children:\"b\"}),\" \\u5728 \",(0,n.jsx)(e.code,{children:\"deepCopy\"}),\" \\u4E2D\\u662F\\u4E00\\u4E2A\\u5168\\u65B0\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u521B\\u5EFA\\u6D45\\u62F7\\u8D1D\\u548C\\u6DF1\\u62F7\\u8D1D\\u7684\\u65B9\\u6CD5\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u6D45\\u62F7\\u8D1D\\u65B9\\u6CD5\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"Object.assign()\"})}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26 (\",(0,n.jsx)(e.code,{children:\"...\"}),\")\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u6DF1\\u62F7\\u8D1D\\u65B9\\u6CD5\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"JSON.parse(JSON.stringify())\"})}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"structuredClone()\"}),\" (\\u73B0\\u4EE3 JavaScript)\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u50CF \",(0,n.jsx)(e.code,{children:\"Lodash\"}),\" \\u8FD9\\u6837\\u7684\\u5E93 (\",(0,n.jsx)(e.code,{children:\"_.cloneDeep\"}),\")\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Object/assign\",children:\"MDN Web Docs: Object.assign()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse\",children:\"MDN Web Docs: JSON.parse()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/structuredClone\",children:\"MDN Web Docs: structuredClone()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://lodash.com/docs/4.17.15#cloneDeep\",children:\"Lodash Documentation: _.cloneDeep\"})}),`\n`]})]})}function a(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(s,{...c})}):s(c)}return m(f);})();\n;return Component;"
 }
\ No newline at end of file
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 25c1977e4..b9c057ab5 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),y=(o,e)=>{for(var t in e)s(o,t,{get:e[t],enumerable:!0})},i=(o,e,t,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!g.call(o,r)&&r!==t&&s(o,r,{get:()=>e[r],enumerable:!(a=u(e,r))||a.enumerable});return o};var w=(o,e,t)=>(t=o!=null?d(m(o)):{},i(e||!o||!o.__esModule?s(t,\"default\",{value:o,enumerable:!0}):t,o)),v=o=>i(s({},\"__esModule\",{value:!0}),o);var l=f((A,c)=>{c.exports=_jsx_runtime});var S={};y(S,{default:()=>x,frontmatter:()=>b});var n=w(l()),b={title:\"Explain the difference between synchronous and asynchronous functions in JavaScript\"};function h(o){let e=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",ul:\"ul\",li:\"li\",h3:\"h3\",ol:\"ol\",strong:\"strong\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Synchronous functions are blocking while asynchronous functions are not. In synchronous functions, statements complete before the next statement is run. As a result, programs containing only synchronous code are evaluated exactly in order of the statements. The execution of the program is paused if one of the statements take a very long time.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function sum(a, b) {\n  console.log('Inside sum function');\n  return a + b;\n}\n\nconst result = sum(2, 3); // The program waits for sum() to complete before assigning the result\nconsole.log('Result: ', result); // Output: 5\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Asynchronous functions usually accept a callback as a parameter and execution continue on to the next line immediately after the asynchronous function is invoked. The callback is only invoked when the asynchronous operation is complete and the call stack is empty. Heavy duty operations such as loading data from a web server or querying a database should be done asynchronously so that the main thread can continue executing other operations instead of blocking until that long operation to complete (in the case of browsers, the UI will freeze).\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function fetchData(callback) {\n  setTimeout(() => {\n    const data = { name: 'John', age: 30 };\n    callback(data); // Calling the callback function with data\n  }, 2000); // Simulating a 2-second delay\n}\n\nconsole.log('Fetching data...');\n\nfetchData((data) => {\n  console.log(data); // Output: { name: 'John', age: 30 } (after 2 seconds)\n});\n\nconsole.log('Call made to fetch data'); // This will print before the data is fetched\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Synchronous vs asynchronous functions\"}),`\n`,(0,n.jsx)(e.p,{children:\"In JavaScript, the concepts of synchronous and asynchronous functions are fundamental to understanding how code execution is managed, particularly in the context of handling operations like I/O tasks, API calls, and other time-consuming processes.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Synchronous functions\"}),`\n`,(0,n.jsx)(e.p,{children:\"Synchronous functions execute in a sequential order, one after the other. Each operation must wait for the previous one to complete before moving on to the next.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Synchronous code is blocking, meaning the program execution halts until the current operation finishes.\"}),`\n`,(0,n.jsx)(e.li,{children:\"It follows a strict sequence, executing instructions line by line.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Synchronous functions are easier to understand and debug since the flow is predictable.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Synchronous function examples\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Reading files synchronously\"}),\": When reading a file from the file system using the synchronous readFileSync method from the fs module in Node.js, the program execution is blocked until the entire file is read. This can cause performance issues, especially for large files or when reading multiple files sequentially\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const fs = require('fs');\nconst data = fs.readFileSync('large-file.txt', 'utf8');\nconsole.log(data); // Execution is blocked until the file is read.\nconsole.log('End of the program');\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Looping over large datasets\"}),\": Iterating over a large array or dataset synchronously can freeze the user interface or browser tab until the operation completes, leading to an unresponsive application.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const largeArray = new Array(1_000_000).fill(0);\n// Blocks the main thread until the million operations are completed.\nconst result = largeArray.map((num) => num * 2);\nconsole.log(result);\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Asynchronous functions\"}),`\n`,(0,n.jsx)(e.p,{children:\"Asynchronous functions do not block the execution of the program. They allow other operations to continue while waiting for a response or completion of a time-consuming task.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Asynchronous code is non-blocking, allowing the program to keep running without waiting for a specific operation to finish.\"}),`\n`,(0,n.jsx)(e.li,{children:\"It enables concurrent execution, improving performance and responsiveness.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Asynchronous functions are commonly used for tasks like network requests, file I/O, and timers.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Asynchronous function examples\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Network requests\"}),\": Making network requests, such as fetching data from an API or sending data to a server, is typically done asynchronously. This allows the application to remain responsive while waiting for the response, preventing the user interface from freezing\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log('Start of the program'); // This will be printed first as program starts here\n\nfetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.json())\n  .then((data) => {\n    console.log(data);\n    /** Process the data without blocking the main thread\n     *  and printed at the end if fetch call succeeds\n     */\n  })\n  .catch((error) => console.error(error));\n\nconsole.log('End of program'); // This will be printed before the fetch callback\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"User input and events\"}),\": Handling user input events, such as clicks, key presses, or mouse movements, is inherently asynchronous. The application needs to respond to these events without blocking the main thread, ensuring a smooth user experience.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const button = document.getElementById('myButton');\nbutton.addEventListener('click', () => {\n  // Handle the click event asynchronously\n  console.log('Button clicked');\n});\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Timers and Animations\"}),\": Timers (\",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\", \",(0,n.jsx)(e.code,{children:\"setInterval()\"}),\") and animations (e.g., \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame()\"}),\") are asynchronous operations that allow the application to schedule tasks or update animations without blocking the main thread.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`setTimeout(() => {\n  console.log('This message is delayed by 2 seconds');\n}, 2000);\n\nsetInterval(() => {\n  console.log('Current time:', new Date().toLocaleString());\n}, 2000); // Interval runs every 2 seconds\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"By using asynchronous functions and operations, JavaScript can handle time-consuming tasks without freezing the user interface or blocking the main thread.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"It is important to note that \",(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:\"async\"}),\" functions do not run on a different thread\"]}),\". They still run on the main thread. However, it is possible to achieve parallelism in JavaScript by using \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers\",children:\"Web workers\"})]}),`\n`,(0,n.jsx)(e.h2,{children:\"Achieving parallelism in JavaScript via web workers\"}),`\n`,(0,n.jsx)(e.p,{children:\"Web workers allow you to spawn separate background threads that can perform CPU-intensive tasks in parallel with the main thread. These worker threads can communicate with the main thread via message passing, but they do not have direct access to the DOM or other browser APIs.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// main.js\nconst worker = new Worker('worker.js');\n\nworker.onmessage = function (event) {\n  console.log('Result from worker:', event.data);\n};\n\nworker.postMessage('Start computation');\n`})}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// worker.js\nself.onmessage = function (event) {\n  const result = performHeavyComputation();\n  self.postMessage(result);\n};\n\nfunction performHeavyComputation() {\n  // CPU-intensive computation\n  return 'Computation result';\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the main thread creates a new web worker and sends it a message to start a computation. The worker performs the heavy computation in parallel with the main thread and sends the result back via \",(0,n.jsx)(e.code,{children:\"postMessage()\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Event loop\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The async nature of JavaScript is powered by a JavaScript engine's \",(0,n.jsx)(e.a,{href:\"/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue\",children:\"event loop\"}),\" allowing concurrent operations even though JavaScript is single-threaded. It's an important concept to understand so we highly recommend going through that topic as well.\"]}),`\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/Learn/JavaScript/Asynchronous\",children:\"Asynchronous JavaScript\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.linkedin.com/pulse/basics-synchronous-asynchronous-javascript-abdulkabir-okeowo\",children:\"The Basics: synchronous and asynchronous JavaScript\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://code.pieces.app/blog/synchronous-and-asynchronous-programming-in-javascript\",children:\"Synchronous and asynchronous programming in JavaScript\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API\",children:\"Web Workers API - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://web.dev/learn/performance/web-worker-overview\",children:\"An overview of web workers - Web.dev\"})}),`\n`]})]})}function k(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(h,o)})):h(o)}var x=k;return v(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),w=(o,e)=>{for(var t in e)a(o,t,{get:e[t],enumerable:!0})},i=(o,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!f.call(o,r)&&r!==t&&a(o,r,{get:()=>e[r],enumerable:!(s=p(e,r))||s.enumerable});return o};var v=(o,e,t)=>(t=o!=null?u(g(o)):{},i(e||!o||!o.__esModule?a(t,\"default\",{value:o,enumerable:!0}):t,o)),b=o=>i(a({},\"__esModule\",{value:!0}),o);var l=y((A,c)=>{c.exports=_jsx_runtime});var x={};w(x,{default:()=>d,frontmatter:()=>k});var n=v(l()),k={title:\"Explain the difference between synchronous and asynchronous functions in JavaScript\"};function h(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Synchronous functions are blocking while asynchronous functions are not. In synchronous functions, statements complete before the next statement is run. As a result, programs containing only synchronous code are evaluated exactly in order of the statements. The execution of the program is paused if one of the statements take a very long time.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function sum(a, b) {\n  console.log('Inside sum function');\n  return a + b;\n}\n\nconst result = sum(2, 3); // The program waits for sum() to complete before assigning the result\nconsole.log('Result: ', result); // Output: 5\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Asynchronous functions usually accept a callback as a parameter and execution continue on to the next line immediately after the asynchronous function is invoked. The callback is only invoked when the asynchronous operation is complete and the call stack is empty. Heavy duty operations such as loading data from a web server or querying a database should be done asynchronously so that the main thread can continue executing other operations instead of blocking until that long operation to complete (in the case of browsers, the UI will freeze).\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function fetchData(callback) {\n  setTimeout(() => {\n    const data = { name: 'John', age: 30 };\n    callback(data); // Calling the callback function with data\n  }, 2000); // Simulating a 2-second delay\n}\n\nconsole.log('Fetching data...');\n\nfetchData((data) => {\n  console.log(data); // Output: { name: 'John', age: 30 } (after 2 seconds)\n});\n\nconsole.log('Call made to fetch data'); // This will print before the data is fetched\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Synchronous vs asynchronous functions\"}),`\n`,(0,n.jsx)(e.p,{children:\"In JavaScript, the concepts of synchronous and asynchronous functions are fundamental to understanding how code execution is managed, particularly in the context of handling operations like I/O tasks, API calls, and other time-consuming processes.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Synchronous functions\"}),`\n`,(0,n.jsx)(e.p,{children:\"Synchronous functions execute in a sequential order, one after the other. Each operation must wait for the previous one to complete before moving on to the next.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Synchronous code is blocking, meaning the program execution halts until the current operation finishes.\"}),`\n`,(0,n.jsx)(e.li,{children:\"It follows a strict sequence, executing instructions line by line.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Synchronous functions are easier to understand and debug since the flow is predictable.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Synchronous function examples\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Reading files synchronously\"}),\": When reading a file from the file system using the synchronous readFileSync method from the fs module in Node.js, the program execution is blocked until the entire file is read. This can cause performance issues, especially for large files or when reading multiple files sequentially\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const fs = require('fs');\nconst data = fs.readFileSync('large-file.txt', 'utf8');\nconsole.log(data); // Execution is blocked until the file is read.\nconsole.log('End of the program');\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Looping over large datasets\"}),\": Iterating over a large array or dataset synchronously can freeze the user interface or browser tab until the operation completes, leading to an unresponsive application.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const largeArray = new Array(1_000_000).fill(0);\n// Blocks the main thread until the million operations are completed.\nconst result = largeArray.map((num) => num * 2);\nconsole.log(result);\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Asynchronous functions\"}),`\n`,(0,n.jsx)(e.p,{children:\"Asynchronous functions do not block the execution of the program. They allow other operations to continue while waiting for a response or completion of a time-consuming task.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Asynchronous code is non-blocking, allowing the program to keep running without waiting for a specific operation to finish.\"}),`\n`,(0,n.jsx)(e.li,{children:\"It enables concurrent execution, improving performance and responsiveness.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Asynchronous functions are commonly used for tasks like network requests, file I/O, and timers.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Asynchronous function examples\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Network requests\"}),\": Making network requests, such as fetching data from an API or sending data to a server, is typically done asynchronously. This allows the application to remain responsive while waiting for the response, preventing the user interface from freezing\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log('Start of the program'); // This will be printed first as program starts here\n\nfetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.json())\n  .then((data) => {\n    console.log(data);\n    /** Process the data without blocking the main thread\n     *  and printed at the end if fetch call succeeds\n     */\n  })\n  .catch((error) => console.error(error));\n\nconsole.log('End of program'); // This will be printed before the fetch callback\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"User input and events\"}),\": Handling user input events, such as clicks, key presses, or mouse movements, is inherently asynchronous. The application needs to respond to these events without blocking the main thread, ensuring a smooth user experience.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const button = document.getElementById('myButton');\nbutton.addEventListener('click', () => {\n  // Handle the click event asynchronously\n  console.log('Button clicked');\n});\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Timers and Animations\"}),\": Timers (\",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\", \",(0,n.jsx)(e.code,{children:\"setInterval()\"}),\") and animations (e.g., \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame()\"}),\") are asynchronous operations that allow the application to schedule tasks or update animations without blocking the main thread.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`setTimeout(() => {\n  console.log('This message is delayed by 2 seconds');\n}, 2000);\n\nsetInterval(() => {\n  console.log('Current time:', new Date().toLocaleString());\n}, 2000); // Interval runs every 2 seconds\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"By using asynchronous functions and operations, JavaScript can handle time-consuming tasks without freezing the user interface or blocking the main thread.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"It is important to note that \",(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:\"async\"}),\" functions do not run on a different thread\"]}),\". They still run on the main thread. However, it is possible to achieve parallelism in JavaScript by using \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers\",children:\"Web workers\"})]}),`\n`,(0,n.jsx)(e.h2,{children:\"Achieving parallelism in JavaScript via web workers\"}),`\n`,(0,n.jsx)(e.p,{children:\"Web workers allow you to spawn separate background threads that can perform CPU-intensive tasks in parallel with the main thread. These worker threads can communicate with the main thread via message passing, but they do not have direct access to the DOM or other browser APIs.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// main.js\nconst worker = new Worker('worker.js');\n\nworker.onmessage = function (event) {\n  console.log('Result from worker:', event.data);\n};\n\nworker.postMessage('Start computation');\n`})}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// worker.js\nself.onmessage = function (event) {\n  const result = performHeavyComputation();\n  self.postMessage(result);\n};\n\nfunction performHeavyComputation() {\n  // CPU-intensive computation\n  return 'Computation result';\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the main thread creates a new web worker and sends it a message to start a computation. The worker performs the heavy computation in parallel with the main thread and sends the result back via \",(0,n.jsx)(e.code,{children:\"postMessage()\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Event loop\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The async nature of JavaScript is powered by a JavaScript engine's \",(0,n.jsx)(e.a,{href:\"/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue\",children:\"event loop\"}),\" allowing concurrent operations even though JavaScript is single-threaded. It's an important concept to understand so we highly recommend going through that topic as well.\"]}),`\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/Learn/JavaScript/Asynchronous\",children:\"Asynchronous JavaScript\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.linkedin.com/pulse/basics-synchronous-asynchronous-javascript-abdulkabir-okeowo\",children:\"The Basics: synchronous and asynchronous JavaScript\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://code.pieces.app/blog/synchronous-and-asynchronous-programming-in-javascript\",children:\"Synchronous and asynchronous programming in JavaScript\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API\",children:\"Web Workers API - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://web.dev/learn/performance/web-worker-overview\",children:\"An overview of web workers - Web.dev\"})}),`\n`]})]})}function d(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(h,{...o})}):h(o)}return b(x);})();\n;return Component;"
 }
\ No newline at end of file
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 835291d10..2fefd5638 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),h=(a,e)=>{for(var o in e)r(a,o,{get:e[o],enumerable:!0})},c=(a,e,o,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of l(e))!f.call(a,s)&&s!==o&&r(a,s,{get:()=>e[s],enumerable:!(t=p(e,s))||t.enumerable});return a};var j=(a,e,o)=>(o=a!=null?m(x(a)):{},c(e||!a||!a.__esModule?r(o,\"default\",{value:a,enumerable:!0}):o,a)),q=a=>c(r({},\"__esModule\",{value:!0}),a);var d=g((O,u)=>{u.exports=_jsx_runtime});var F={};h(F,{default:()=>_,frontmatter:()=>v});var n=j(d()),v={title:\"Explique a diferen\\xE7a entre fun\\xE7\\xF5es s\\xEDncronas e ass\\xEDncronas\"};function i(a){let e=Object.assign({p:\"p\"},a.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Fun\\xE7\\xF5es s\\xEDncronas s\\xE3o bloqueadoras enquanto fun\\xE7\\xF5es ass\\xEDncronas n\\xE3o s\\xE3o. Em fun\\xE7\\xF5es s\\xEDncronas, as instru\\xE7\\xF5es s\\xE3o conclu\\xEDdas antes que a pr\\xF3xima instru\\xE7\\xE3o seja executada. Nesse caso, o programa \\xE9 avaliado exatamente na ordem das instru\\xE7\\xF5es, e a execu\\xE7\\xE3o do programa \\xE9 pausada se uma das instru\\xE7\\xF5es demorar muito tempo.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fun\\xE7\\xF5es ass\\xEDncronas geralmente aceitam uma fun\\xE7\\xE3o de retorno de chamada como par\\xE2metro e a execu\\xE7\\xE3o continua na pr\\xF3xima linha imediatamente ap\\xF3s a invoca\\xE7\\xE3o da fun\\xE7\\xE3o ass\\xEDncrona. A callback s\\xF3 \\xE9 invocada quando a opera\\xE7\\xE3o ass\\xEDncrona \\xE9 conclu\\xEDda e a pilha de chamadas est\\xE1 vazia. Opera\\xE7\\xF5es pesadas, como carregar dados de um servidor web ou consultar um banco de dados, devem ser feitas de forma ass\\xEDncrona para que a thread principal possa continuar executando outras opera\\xE7\\xF5es em vez de bloquear at\\xE9 que aquela opera\\xE7\\xE3o longa seja conclu\\xEDda (no caso dos navegadores, a interface do usu\\xE1rio ficar\\xE1 congelada).\"})]})}function b(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(i,a)})):i(a)}var _=b;return q(F);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var h=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),q=(a,e)=>{for(var o in e)r(a,o,{get:e[o],enumerable:!0})},c=(a,e,o,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of x(e))!g.call(a,s)&&s!==o&&r(a,s,{get:()=>e[s],enumerable:!(t=l(e,s))||t.enumerable});return a};var v=(a,e,o)=>(o=a!=null?p(f(a)):{},c(e||!a||!a.__esModule?r(o,\"default\",{value:a,enumerable:!0}):o,a)),j=a=>c(r({},\"__esModule\",{value:!0}),a);var d=h((M,u)=>{u.exports=_jsx_runtime});var b={};q(b,{default:()=>m,frontmatter:()=>_});var n=v(d()),_={title:\"Explique a diferen\\xE7a entre fun\\xE7\\xF5es s\\xEDncronas e ass\\xEDncronas\"};function i(a){let e={p:\"p\",...a.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Fun\\xE7\\xF5es s\\xEDncronas s\\xE3o bloqueadoras enquanto fun\\xE7\\xF5es ass\\xEDncronas n\\xE3o s\\xE3o. Em fun\\xE7\\xF5es s\\xEDncronas, as instru\\xE7\\xF5es s\\xE3o conclu\\xEDdas antes que a pr\\xF3xima instru\\xE7\\xE3o seja executada. Nesse caso, o programa \\xE9 avaliado exatamente na ordem das instru\\xE7\\xF5es, e a execu\\xE7\\xE3o do programa \\xE9 pausada se uma das instru\\xE7\\xF5es demorar muito tempo.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fun\\xE7\\xF5es ass\\xEDncronas geralmente aceitam uma fun\\xE7\\xE3o de retorno de chamada como par\\xE2metro e a execu\\xE7\\xE3o continua na pr\\xF3xima linha imediatamente ap\\xF3s a invoca\\xE7\\xE3o da fun\\xE7\\xE3o ass\\xEDncrona. A callback s\\xF3 \\xE9 invocada quando a opera\\xE7\\xE3o ass\\xEDncrona \\xE9 conclu\\xEDda e a pilha de chamadas est\\xE1 vazia. Opera\\xE7\\xF5es pesadas, como carregar dados de um servidor web ou consultar um banco de dados, devem ser feitas de forma ass\\xEDncrona para que a thread principal possa continuar executando outras opera\\xE7\\xF5es em vez de bloquear at\\xE9 que aquela opera\\xE7\\xE3o longa seja conclu\\xEDda (no caso dos navegadores, a interface do usu\\xE1rio ficar\\xE1 congelada).\"})]})}function m(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(i,{...a})}):i(a)}return j(b);})();\n;return Component;"
 }
\ No newline at end of file
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 f119f7f4f..83e77d652 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),v=(r,n)=>{for(var l in n)c(r,l,{get:n[l],enumerable:!0})},a=(r,n,l,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of p(n))!m.call(r,o)&&o!==l&&c(r,o,{get:()=>n[o],enumerable:!(t=u(n,o))||t.enumerable});return r};var b=(r,n,l)=>(l=r!=null?h(g(r)):{},a(n||!r||!r.__esModule?c(l,\"default\",{value:r,enumerable:!0}):l,r)),w=r=>a(c({},\"__esModule\",{value:!0}),r);var s=f((A,i)=>{i.exports=_jsx_runtime});var S={};v(S,{default:()=>j,frontmatter:()=>k});var e=b(s()),k={title:\"\\u89E3\\u91CA JavaScript \\u4E2D\\u540C\\u6B65\\u548C\\u5F02\\u6B65\\u51FD\\u6570\\u7684\\u533A\\u522B\"};function d(r){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",ul:\"ul\",li:\"li\",h3:\"h3\",ol:\"ol\",strong:\"strong\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u540C\\u6B65\\u51FD\\u6570\\u662F\\u963B\\u585E\\u7684\\uFF0C\\u800C\\u5F02\\u6B65\\u51FD\\u6570\\u5219\\u4E0D\\u662F\\u3002\\u5728\\u540C\\u6B65\\u51FD\\u6570\\u4E2D\\uFF0C\\u8BED\\u53E5\\u5728\\u8FD0\\u884C\\u4E0B\\u4E00\\u6761\\u8BED\\u53E5\\u4E4B\\u524D\\u5B8C\\u6210\\u3002\\u56E0\\u6B64\\uFF0C\\u4EC5\\u5305\\u542B\\u540C\\u6B65\\u4EE3\\u7801\\u7684\\u7A0B\\u5E8F\\u5C06\\u5B8C\\u5168\\u6309\\u7167\\u8BED\\u53E5\\u7684\\u987A\\u5E8F\\u8FDB\\u884C\\u8BC4\\u4F30\\u3002\\u5982\\u679C\\u5176\\u4E2D\\u4E00\\u6761\\u8BED\\u53E5\\u82B1\\u8D39\\u5F88\\u957F\\u65F6\\u95F4\\uFF0C\\u7A0B\\u5E8F\\u7684\\u6267\\u884C\\u5C06\\u6682\\u505C\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function sum(a, b) {\n  console.log('Inside sum function');\n  return a + b;\n}\n\nconst result = sum(2, 3); // The program waits for sum() to complete before assigning the result\nconsole.log('Result: ', result); // Output: 5\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F02\\u6B65\\u51FD\\u6570\\u901A\\u5E38\\u63A5\\u53D7\\u56DE\\u8C03\\u4F5C\\u4E3A\\u53C2\\u6570\\uFF0C\\u5E76\\u4E14\\u5728\\u8C03\\u7528\\u5F02\\u6B65\\u51FD\\u6570\\u540E\\u7ACB\\u5373\\u7EE7\\u7EED\\u6267\\u884C\\u5230\\u4E0B\\u4E00\\u884C\\u3002\\u4EC5\\u5F53\\u5F02\\u6B65\\u64CD\\u4F5C\\u5B8C\\u6210\\u4E14\\u8C03\\u7528\\u5806\\u6808\\u4E3A\\u7A7A\\u65F6\\uFF0C\\u624D\\u4F1A\\u8C03\\u7528\\u56DE\\u8C03\\u3002\\u8BF8\\u5982\\u4ECE Web \\u670D\\u52A1\\u5668\\u52A0\\u8F7D\\u6570\\u636E\\u6216\\u67E5\\u8BE2\\u6570\\u636E\\u5E93\\u4E4B\\u7C7B\\u7684\\u7E41\\u91CD\\u64CD\\u4F5C\\u5E94\\u5F02\\u6B65\\u5B8C\\u6210\\uFF0C\\u4EE5\\u4FBF\\u4E3B\\u7EBF\\u7A0B\\u53EF\\u4EE5\\u7EE7\\u7EED\\u6267\\u884C\\u5176\\u4ED6\\u64CD\\u4F5C\\uFF0C\\u800C\\u4E0D\\u662F\\u963B\\u585E\\u76F4\\u5230\\u8BE5\\u957F\\u65F6\\u95F4\\u64CD\\u4F5C\\u5B8C\\u6210\\uFF08\\u5BF9\\u4E8E\\u6D4F\\u89C8\\u5668\\uFF0CUI \\u5C06\\u51BB\\u7ED3\\uFF09\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fetchData(callback) {\n  setTimeout(() => {\n    const data = { name: 'John', age: 30 };\n    callback(data); // Calling the callback function with data\n  }, 2000); // Simulating a 2-second delay\n}\n\nconsole.log('Fetching data...');\n\nfetchData((data) => {\n  console.log(data); // Output: { name: 'John', age: 30 } (after 2 seconds)\n});\n\nconsole.log('Call made to fetch data'); // This will print before the data is fetched\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u540C\\u6B65\\u51FD\\u6570\\u4E0E\\u5F02\\u6B65\\u51FD\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u540C\\u6B65\\u548C\\u5F02\\u6B65\\u51FD\\u6570\\u7684\\u6982\\u5FF5\\u662F\\u7406\\u89E3\\u4EE3\\u7801\\u6267\\u884C\\u65B9\\u5F0F\\u7684\\u57FA\\u7840\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u5904\\u7406 I/O \\u4EFB\\u52A1\\u3001API \\u8C03\\u7528\\u548C\\u5176\\u4ED6\\u8017\\u65F6\\u8FDB\\u7A0B\\u7684\\u4E0A\\u4E0B\\u6587\\u4E2D\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u540C\\u6B65\\u51FD\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u540C\\u6B65\\u51FD\\u6570\\u6309\\u987A\\u5E8F\\u6267\\u884C\\uFF0C\\u4E00\\u4E2A\\u63A5\\u4E00\\u4E2A\\u3002\\u6BCF\\u4E2A\\u64CD\\u4F5C\\u90FD\\u5FC5\\u987B\\u7B49\\u5F85\\u524D\\u4E00\\u4E2A\\u64CD\\u4F5C\\u5B8C\\u6210\\u624D\\u80FD\\u7EE7\\u7EED\\u8FDB\\u884C\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u540C\\u6B65\\u4EE3\\u7801\\u662F\\u963B\\u585E\\u7684\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u7A0B\\u5E8F\\u6267\\u884C\\u4F1A\\u6682\\u505C\\uFF0C\\u76F4\\u5230\\u5F53\\u524D\\u64CD\\u4F5C\\u5B8C\\u6210\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u9075\\u5FAA\\u4E25\\u683C\\u7684\\u987A\\u5E8F\\uFF0C\\u9010\\u884C\\u6267\\u884C\\u6307\\u4EE4\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u540C\\u6B65\\u51FD\\u6570\\u66F4\\u5BB9\\u6613\\u7406\\u89E3\\u548C\\u8C03\\u8BD5\\uFF0C\\u56E0\\u4E3A\\u6D41\\u7A0B\\u662F\\u53EF\\u9884\\u6D4B\\u7684\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u540C\\u6B65\\u51FD\\u6570\\u793A\\u4F8B\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u540C\\u6B65\\u8BFB\\u53D6\\u6587\\u4EF6\"}),\"\\uFF1A\\u4F7F\\u7528 Node.js \\u4E2D fs \\u6A21\\u5757\\u7684\\u540C\\u6B65 readFileSync \\u65B9\\u6CD5\\u4ECE\\u6587\\u4EF6\\u7CFB\\u7EDF\\u8BFB\\u53D6\\u6587\\u4EF6\\u65F6\\uFF0C\\u7A0B\\u5E8F\\u6267\\u884C\\u5C06\\u88AB\\u963B\\u585E\\uFF0C\\u76F4\\u5230\\u6574\\u4E2A\\u6587\\u4EF6\\u88AB\\u8BFB\\u53D6\\u3002\\u8FD9\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u6027\\u80FD\\u95EE\\u9898\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u5904\\u7406\\u5927\\u6587\\u4EF6\\u6216\\u987A\\u5E8F\\u8BFB\\u53D6\\u591A\\u4E2A\\u6587\\u4EF6\\u65F6\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const fs = require('fs');\nconst data = fs.readFileSync('large-file.txt', 'utf8');\nconsole.log(data); // Execution is blocked until the file is read.\nconsole.log('End of the program');\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u5FAA\\u73AF\\u904D\\u5386\\u5927\\u578B\\u6570\\u636E\\u96C6\"}),\"\\uFF1A\\u540C\\u6B65\\u8FED\\u4EE3\\u5927\\u578B\\u6570\\u7EC4\\u6216\\u6570\\u636E\\u96C6\\u53EF\\u80FD\\u4F1A\\u51BB\\u7ED3\\u7528\\u6237\\u754C\\u9762\\u6216\\u6D4F\\u89C8\\u5668\\u9009\\u9879\\u5361\\uFF0C\\u76F4\\u5230\\u64CD\\u4F5C\\u5B8C\\u6210\\uFF0C\\u5BFC\\u81F4\\u5E94\\u7528\\u7A0B\\u5E8F\\u65E0\\u54CD\\u5E94\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const largeArray = new Array(1_000_000).fill(0);\n// Blocks the main thread until the million operations are completed.\nconst result = largeArray.map((num) => num * 2);\nconsole.log(result);\n`})}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5F02\\u6B65\\u51FD\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F02\\u6B65\\u51FD\\u6570\\u4E0D\\u4F1A\\u963B\\u585E\\u7A0B\\u5E8F\\u7684\\u6267\\u884C\\u3002\\u5B83\\u4EEC\\u5141\\u8BB8\\u5176\\u4ED6\\u64CD\\u4F5C\\u7EE7\\u7EED\\u8FDB\\u884C\\uFF0C\\u540C\\u65F6\\u7B49\\u5F85\\u54CD\\u5E94\\u6216\\u5B8C\\u6210\\u8017\\u65F6\\u7684\\u4EFB\\u52A1\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5F02\\u6B65\\u4EE3\\u7801\\u662F\\u975E\\u963B\\u585E\\u7684\\uFF0C\\u5141\\u8BB8\\u7A0B\\u5E8F\\u7EE7\\u7EED\\u8FD0\\u884C\\uFF0C\\u800C\\u65E0\\u9700\\u7B49\\u5F85\\u7279\\u5B9A\\u64CD\\u4F5C\\u5B8C\\u6210\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u652F\\u6301\\u5E76\\u53D1\\u6267\\u884C\\uFF0C\\u4ECE\\u800C\\u63D0\\u9AD8\\u6027\\u80FD\\u548C\\u54CD\\u5E94\\u80FD\\u529B\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5F02\\u6B65\\u51FD\\u6570\\u901A\\u5E38\\u7528\\u4E8E\\u7F51\\u7EDC\\u8BF7\\u6C42\\u3001\\u6587\\u4EF6 I/O \\u548C\\u8BA1\\u65F6\\u5668\\u7B49\\u4EFB\\u52A1\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5F02\\u6B65\\u51FD\\u6570\\u793A\\u4F8B\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u7F51\\u7EDC\\u8BF7\\u6C42\"}),\"\\uFF1A\\u53D1\\u51FA\\u7F51\\u7EDC\\u8BF7\\u6C42\\uFF08\\u4F8B\\u5982\\u4ECE API \\u83B7\\u53D6\\u6570\\u636E\\u6216\\u5411\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u6570\\u636E\\uFF09\\u901A\\u5E38\\u662F\\u5F02\\u6B65\\u5B8C\\u6210\\u7684\\u3002\\u8FD9\\u4F7F\\u5F97\\u5E94\\u7528\\u7A0B\\u5E8F\\u5728\\u7B49\\u5F85\\u54CD\\u5E94\\u65F6\\u4FDD\\u6301\\u54CD\\u5E94\\uFF0C\\u4ECE\\u800C\\u9632\\u6B62\\u7528\\u6237\\u754C\\u9762\\u51BB\\u7ED3\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`console.log('Start of the program'); // This will be printed first as program starts here\n\nfetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.json())\n  .then((data) => {\n    console.log(data);\n    /** Process the data without blocking the main thread\n     *  and printed at the end if fetch call succeeds\n     */\n  })\n  .catch((error) => console.error(error));\n\nconsole.log('End of program'); // This will be printed before the fetch callback\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u7528\\u6237\\u8F93\\u5165\\u548C\\u4E8B\\u4EF6\"}),\"\\uFF1A\\u5904\\u7406\\u7528\\u6237\\u8F93\\u5165\\u4E8B\\u4EF6\\uFF08\\u4F8B\\u5982\\u5355\\u51FB\\u3001\\u6309\\u952E\\u6216\\u9F20\\u6807\\u79FB\\u52A8\\uFF09\\u672C\\u8D28\\u4E0A\\u662F\\u5F02\\u6B65\\u7684\\u3002\\u5E94\\u7528\\u7A0B\\u5E8F\\u9700\\u8981\\u54CD\\u5E94\\u8FD9\\u4E9B\\u4E8B\\u4EF6\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u585E\\u4E3B\\u7EBF\\u7A0B\\uFF0C\\u4ECE\\u800C\\u786E\\u4FDD\\u6D41\\u7545\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const button = document.getElementById('myButton');\nbutton.addEventListener('click', () => {\n  // Handle the click event asynchronously\n  console.log('Button clicked');\n});\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u8BA1\\u65F6\\u5668\\u548C\\u52A8\\u753B\"}),\"\\uFF1A\\u8BA1\\u65F6\\u5668\\uFF08\",(0,e.jsx)(n.code,{children:\"setTimeout()\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"setInterval()\"}),\"\\uFF09\\u548C\\u52A8\\u753B\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,e.jsx)(n.code,{children:\"requestAnimationFrame()\"}),\"\\uFF09\\u662F\\u5F02\\u6B65\\u64CD\\u4F5C\\uFF0C\\u5141\\u8BB8\\u5E94\\u7528\\u7A0B\\u5E8F\\u8C03\\u5EA6\\u4EFB\\u52A1\\u6216\\u66F4\\u65B0\\u52A8\\u753B\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u585E\\u4E3B\\u7EBF\\u7A0B\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`setTimeout(() => {\n  console.log('This message is delayed by 2 seconds');\n}, 2000);\n\nsetInterval(() => {\n  console.log('Current time:', new Date().toLocaleString());\n}, 2000); // Interval runs every 2 seconds\n`})}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u901A\\u8FC7\\u4F7F\\u7528\\u5F02\\u6B65\\u51FD\\u6570\\u548C\\u64CD\\u4F5C\\uFF0CJavaScript \\u53EF\\u4EE5\\u5904\\u7406\\u8017\\u65F6\\u7684\\u4EFB\\u52A1\\uFF0C\\u800C\\u4E0D\\u4F1A\\u51BB\\u7ED3\\u7528\\u6237\\u754C\\u9762\\u6216\\u963B\\u585E\\u4E3B\\u7EBF\\u7A0B\\u3002\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u91CD\\u8981\\u7684\\u662F\\u8981\\u6CE8\\u610F\\uFF0C\",(0,e.jsxs)(n.strong,{children:[(0,e.jsx)(n.code,{children:\"async\"}),\" \\u51FD\\u6570\\u4E0D\\u4F1A\\u5728\\u4E0D\\u540C\\u7684\\u7EBF\\u7A0B\\u4E0A\\u8FD0\\u884C\"]}),\"\\u3002\\u5B83\\u4EEC\\u4ECD\\u7136\\u5728\\u4E3B\\u7EBF\\u7A0B\\u4E0A\\u8FD0\\u884C\\u3002\\u4F46\\u662F\\uFF0C\\u901A\\u8FC7\\u4F7F\\u7528 \",(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers\",children:\"Web workers\"}),\"\\uFF0C\\u53EF\\u4EE5\\u5728 JavaScript \\u4E2D\\u5B9E\\u73B0\\u5E76\\u884C\\u6027\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u901A\\u8FC7 Web worker \\u5728 JavaScript \\u4E2D\\u5B9E\\u73B0\\u5E76\\u884C\\u6027\"}),`\n`,(0,e.jsx)(n.p,{children:\"Web worker \\u5141\\u8BB8\\u60A8\\u751F\\u6210\\u5355\\u72EC\\u7684\\u540E\\u53F0\\u7EBF\\u7A0B\\uFF0C\\u8FD9\\u4E9B\\u7EBF\\u7A0B\\u53EF\\u4EE5\\u4E0E\\u4E3B\\u7EBF\\u7A0B\\u5E76\\u884C\\u6267\\u884C CPU \\u5BC6\\u96C6\\u578B\\u4EFB\\u52A1\\u3002\\u8FD9\\u4E9B\\u5DE5\\u4F5C\\u7EBF\\u7A0B\\u53EF\\u4EE5\\u901A\\u8FC7\\u6D88\\u606F\\u4F20\\u9012\\u4E0E\\u4E3B\\u7EBF\\u7A0B\\u901A\\u4FE1\\uFF0C\\u4F46\\u5B83\\u4EEC\\u65E0\\u6CD5\\u76F4\\u63A5\\u8BBF\\u95EE DOM \\u6216\\u5176\\u4ED6\\u6D4F\\u89C8\\u5668 API\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// main.js\nconst worker = new Worker('worker.js');\n\nworker.onmessage = function (event) {\n  console.log('Result from worker:', event.data);\n};\n\nworker.postMessage('Start computation');\n`})}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// worker.js\nself.onmessage = function (event) {\n  const result = performHeavyComputation();\n  self.postMessage(result);\n};\n\nfunction performHeavyComputation() {\n  // CPU-intensive computation\n  return 'Computation result';\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u4E3B\\u7EBF\\u7A0B\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684 web worker\\uFF0C\\u5E76\\u5411\\u5176\\u53D1\\u9001\\u4E00\\u6761\\u6D88\\u606F\\u4EE5\\u542F\\u52A8\\u8BA1\\u7B97\\u3002worker \\u4E0E\\u4E3B\\u7EBF\\u7A0B\\u5E76\\u884C\\u6267\\u884C\\u7E41\\u91CD\\u7684\\u8BA1\\u7B97\\uFF0C\\u5E76\\u901A\\u8FC7 \",(0,e.jsx)(n.code,{children:\"postMessage()\"}),\" \\u5C06\\u7ED3\\u679C\\u53D1\\u9001\\u56DE\\u53BB\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4E8B\\u4EF6\\u5FAA\\u73AF\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"JavaScript \\u7684\\u5F02\\u6B65\\u7279\\u6027\\u7531 JavaScript \\u5F15\\u64CE\\u7684 \",(0,e.jsx)(n.a,{href:\"/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue\",children:\"\\u4E8B\\u4EF6\\u5FAA\\u73AF\"}),\" \\u63D0\\u4F9B\\u652F\\u6301\\uFF0C\\u5373\\u4F7F JavaScript \\u662F\\u5355\\u7EBF\\u7A0B\\u7684\\uFF0C\\u5B83\\u4E5F\\u5141\\u8BB8\\u5E76\\u53D1\\u64CD\\u4F5C\\u3002 \\u8FD9\\u662F\\u4E00\\u4E2A\\u91CD\\u8981\\u7684\\u6982\\u5FF5\\uFF0C\\u9700\\u8981\\u7406\\u89E3\\uFF0C\\u56E0\\u6B64\\u6211\\u4EEC\\u5F3A\\u70C8\\u5EFA\\u8BAE\\u60A8\\u4E5F\\u6D4F\\u89C8\\u8BE5\\u4E3B\\u9898\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous\",children:\"Asynchronous JavaScript\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.linkedin.com/pulse/basics-synchronous-asynchronous-javascript-abdulkabir-okeowo\",children:\"The Basics: synchronous and asynchronous JavaScript\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://code.pieces.app/blog/synchronous-and-asynchronous-programming-in-javascript\",children:\"Synchronous and asynchronous programming in JavaScript\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API\",children:\"Web Workers API - MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://web.dev/learn/performance/web-worker-overview\",children:\"An overview of web workers - Web.dev\"})}),`\n`]})]})}function y(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(d,r)})):d(r)}var j=y;return w(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),w=(r,n)=>{for(var l in n)c(r,l,{get:n[l],enumerable:!0})},a=(r,n,l,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of g(n))!f.call(r,o)&&o!==l&&c(r,o,{get:()=>n[o],enumerable:!(t=p(n,o))||t.enumerable});return r};var b=(r,n,l)=>(l=r!=null?u(m(r)):{},a(n||!r||!r.__esModule?c(l,\"default\",{value:r,enumerable:!0}):l,r)),k=r=>a(c({},\"__esModule\",{value:!0}),r);var s=v((I,i)=>{i.exports=_jsx_runtime});var j={};w(j,{default:()=>h,frontmatter:()=>y});var e=b(s()),y={title:\"\\u89E3\\u91CA JavaScript \\u4E2D\\u540C\\u6B65\\u548C\\u5F02\\u6B65\\u51FD\\u6570\\u7684\\u533A\\u522B\"};function d(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u540C\\u6B65\\u51FD\\u6570\\u662F\\u963B\\u585E\\u7684\\uFF0C\\u800C\\u5F02\\u6B65\\u51FD\\u6570\\u5219\\u4E0D\\u662F\\u3002\\u5728\\u540C\\u6B65\\u51FD\\u6570\\u4E2D\\uFF0C\\u8BED\\u53E5\\u5728\\u8FD0\\u884C\\u4E0B\\u4E00\\u6761\\u8BED\\u53E5\\u4E4B\\u524D\\u5B8C\\u6210\\u3002\\u56E0\\u6B64\\uFF0C\\u4EC5\\u5305\\u542B\\u540C\\u6B65\\u4EE3\\u7801\\u7684\\u7A0B\\u5E8F\\u5C06\\u5B8C\\u5168\\u6309\\u7167\\u8BED\\u53E5\\u7684\\u987A\\u5E8F\\u8FDB\\u884C\\u8BC4\\u4F30\\u3002\\u5982\\u679C\\u5176\\u4E2D\\u4E00\\u6761\\u8BED\\u53E5\\u82B1\\u8D39\\u5F88\\u957F\\u65F6\\u95F4\\uFF0C\\u7A0B\\u5E8F\\u7684\\u6267\\u884C\\u5C06\\u6682\\u505C\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function sum(a, b) {\n  console.log('Inside sum function');\n  return a + b;\n}\n\nconst result = sum(2, 3); // The program waits for sum() to complete before assigning the result\nconsole.log('Result: ', result); // Output: 5\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F02\\u6B65\\u51FD\\u6570\\u901A\\u5E38\\u63A5\\u53D7\\u56DE\\u8C03\\u4F5C\\u4E3A\\u53C2\\u6570\\uFF0C\\u5E76\\u4E14\\u5728\\u8C03\\u7528\\u5F02\\u6B65\\u51FD\\u6570\\u540E\\u7ACB\\u5373\\u7EE7\\u7EED\\u6267\\u884C\\u5230\\u4E0B\\u4E00\\u884C\\u3002\\u4EC5\\u5F53\\u5F02\\u6B65\\u64CD\\u4F5C\\u5B8C\\u6210\\u4E14\\u8C03\\u7528\\u5806\\u6808\\u4E3A\\u7A7A\\u65F6\\uFF0C\\u624D\\u4F1A\\u8C03\\u7528\\u56DE\\u8C03\\u3002\\u8BF8\\u5982\\u4ECE Web \\u670D\\u52A1\\u5668\\u52A0\\u8F7D\\u6570\\u636E\\u6216\\u67E5\\u8BE2\\u6570\\u636E\\u5E93\\u4E4B\\u7C7B\\u7684\\u7E41\\u91CD\\u64CD\\u4F5C\\u5E94\\u5F02\\u6B65\\u5B8C\\u6210\\uFF0C\\u4EE5\\u4FBF\\u4E3B\\u7EBF\\u7A0B\\u53EF\\u4EE5\\u7EE7\\u7EED\\u6267\\u884C\\u5176\\u4ED6\\u64CD\\u4F5C\\uFF0C\\u800C\\u4E0D\\u662F\\u963B\\u585E\\u76F4\\u5230\\u8BE5\\u957F\\u65F6\\u95F4\\u64CD\\u4F5C\\u5B8C\\u6210\\uFF08\\u5BF9\\u4E8E\\u6D4F\\u89C8\\u5668\\uFF0CUI \\u5C06\\u51BB\\u7ED3\\uFF09\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fetchData(callback) {\n  setTimeout(() => {\n    const data = { name: 'John', age: 30 };\n    callback(data); // Calling the callback function with data\n  }, 2000); // Simulating a 2-second delay\n}\n\nconsole.log('Fetching data...');\n\nfetchData((data) => {\n  console.log(data); // Output: { name: 'John', age: 30 } (after 2 seconds)\n});\n\nconsole.log('Call made to fetch data'); // This will print before the data is fetched\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u540C\\u6B65\\u51FD\\u6570\\u4E0E\\u5F02\\u6B65\\u51FD\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u540C\\u6B65\\u548C\\u5F02\\u6B65\\u51FD\\u6570\\u7684\\u6982\\u5FF5\\u662F\\u7406\\u89E3\\u4EE3\\u7801\\u6267\\u884C\\u65B9\\u5F0F\\u7684\\u57FA\\u7840\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u5904\\u7406 I/O \\u4EFB\\u52A1\\u3001API \\u8C03\\u7528\\u548C\\u5176\\u4ED6\\u8017\\u65F6\\u8FDB\\u7A0B\\u7684\\u4E0A\\u4E0B\\u6587\\u4E2D\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u540C\\u6B65\\u51FD\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u540C\\u6B65\\u51FD\\u6570\\u6309\\u987A\\u5E8F\\u6267\\u884C\\uFF0C\\u4E00\\u4E2A\\u63A5\\u4E00\\u4E2A\\u3002\\u6BCF\\u4E2A\\u64CD\\u4F5C\\u90FD\\u5FC5\\u987B\\u7B49\\u5F85\\u524D\\u4E00\\u4E2A\\u64CD\\u4F5C\\u5B8C\\u6210\\u624D\\u80FD\\u7EE7\\u7EED\\u8FDB\\u884C\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u540C\\u6B65\\u4EE3\\u7801\\u662F\\u963B\\u585E\\u7684\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u7A0B\\u5E8F\\u6267\\u884C\\u4F1A\\u6682\\u505C\\uFF0C\\u76F4\\u5230\\u5F53\\u524D\\u64CD\\u4F5C\\u5B8C\\u6210\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u9075\\u5FAA\\u4E25\\u683C\\u7684\\u987A\\u5E8F\\uFF0C\\u9010\\u884C\\u6267\\u884C\\u6307\\u4EE4\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u540C\\u6B65\\u51FD\\u6570\\u66F4\\u5BB9\\u6613\\u7406\\u89E3\\u548C\\u8C03\\u8BD5\\uFF0C\\u56E0\\u4E3A\\u6D41\\u7A0B\\u662F\\u53EF\\u9884\\u6D4B\\u7684\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u540C\\u6B65\\u51FD\\u6570\\u793A\\u4F8B\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u540C\\u6B65\\u8BFB\\u53D6\\u6587\\u4EF6\"}),\"\\uFF1A\\u4F7F\\u7528 Node.js \\u4E2D fs \\u6A21\\u5757\\u7684\\u540C\\u6B65 readFileSync \\u65B9\\u6CD5\\u4ECE\\u6587\\u4EF6\\u7CFB\\u7EDF\\u8BFB\\u53D6\\u6587\\u4EF6\\u65F6\\uFF0C\\u7A0B\\u5E8F\\u6267\\u884C\\u5C06\\u88AB\\u963B\\u585E\\uFF0C\\u76F4\\u5230\\u6574\\u4E2A\\u6587\\u4EF6\\u88AB\\u8BFB\\u53D6\\u3002\\u8FD9\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u6027\\u80FD\\u95EE\\u9898\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u5904\\u7406\\u5927\\u6587\\u4EF6\\u6216\\u987A\\u5E8F\\u8BFB\\u53D6\\u591A\\u4E2A\\u6587\\u4EF6\\u65F6\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const fs = require('fs');\nconst data = fs.readFileSync('large-file.txt', 'utf8');\nconsole.log(data); // Execution is blocked until the file is read.\nconsole.log('End of the program');\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u5FAA\\u73AF\\u904D\\u5386\\u5927\\u578B\\u6570\\u636E\\u96C6\"}),\"\\uFF1A\\u540C\\u6B65\\u8FED\\u4EE3\\u5927\\u578B\\u6570\\u7EC4\\u6216\\u6570\\u636E\\u96C6\\u53EF\\u80FD\\u4F1A\\u51BB\\u7ED3\\u7528\\u6237\\u754C\\u9762\\u6216\\u6D4F\\u89C8\\u5668\\u9009\\u9879\\u5361\\uFF0C\\u76F4\\u5230\\u64CD\\u4F5C\\u5B8C\\u6210\\uFF0C\\u5BFC\\u81F4\\u5E94\\u7528\\u7A0B\\u5E8F\\u65E0\\u54CD\\u5E94\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const largeArray = new Array(1_000_000).fill(0);\n// Blocks the main thread until the million operations are completed.\nconst result = largeArray.map((num) => num * 2);\nconsole.log(result);\n`})}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5F02\\u6B65\\u51FD\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F02\\u6B65\\u51FD\\u6570\\u4E0D\\u4F1A\\u963B\\u585E\\u7A0B\\u5E8F\\u7684\\u6267\\u884C\\u3002\\u5B83\\u4EEC\\u5141\\u8BB8\\u5176\\u4ED6\\u64CD\\u4F5C\\u7EE7\\u7EED\\u8FDB\\u884C\\uFF0C\\u540C\\u65F6\\u7B49\\u5F85\\u54CD\\u5E94\\u6216\\u5B8C\\u6210\\u8017\\u65F6\\u7684\\u4EFB\\u52A1\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5F02\\u6B65\\u4EE3\\u7801\\u662F\\u975E\\u963B\\u585E\\u7684\\uFF0C\\u5141\\u8BB8\\u7A0B\\u5E8F\\u7EE7\\u7EED\\u8FD0\\u884C\\uFF0C\\u800C\\u65E0\\u9700\\u7B49\\u5F85\\u7279\\u5B9A\\u64CD\\u4F5C\\u5B8C\\u6210\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u652F\\u6301\\u5E76\\u53D1\\u6267\\u884C\\uFF0C\\u4ECE\\u800C\\u63D0\\u9AD8\\u6027\\u80FD\\u548C\\u54CD\\u5E94\\u80FD\\u529B\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5F02\\u6B65\\u51FD\\u6570\\u901A\\u5E38\\u7528\\u4E8E\\u7F51\\u7EDC\\u8BF7\\u6C42\\u3001\\u6587\\u4EF6 I/O \\u548C\\u8BA1\\u65F6\\u5668\\u7B49\\u4EFB\\u52A1\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5F02\\u6B65\\u51FD\\u6570\\u793A\\u4F8B\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u7F51\\u7EDC\\u8BF7\\u6C42\"}),\"\\uFF1A\\u53D1\\u51FA\\u7F51\\u7EDC\\u8BF7\\u6C42\\uFF08\\u4F8B\\u5982\\u4ECE API \\u83B7\\u53D6\\u6570\\u636E\\u6216\\u5411\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u6570\\u636E\\uFF09\\u901A\\u5E38\\u662F\\u5F02\\u6B65\\u5B8C\\u6210\\u7684\\u3002\\u8FD9\\u4F7F\\u5F97\\u5E94\\u7528\\u7A0B\\u5E8F\\u5728\\u7B49\\u5F85\\u54CD\\u5E94\\u65F6\\u4FDD\\u6301\\u54CD\\u5E94\\uFF0C\\u4ECE\\u800C\\u9632\\u6B62\\u7528\\u6237\\u754C\\u9762\\u51BB\\u7ED3\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`console.log('Start of the program'); // This will be printed first as program starts here\n\nfetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.json())\n  .then((data) => {\n    console.log(data);\n    /** Process the data without blocking the main thread\n     *  and printed at the end if fetch call succeeds\n     */\n  })\n  .catch((error) => console.error(error));\n\nconsole.log('End of program'); // This will be printed before the fetch callback\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u7528\\u6237\\u8F93\\u5165\\u548C\\u4E8B\\u4EF6\"}),\"\\uFF1A\\u5904\\u7406\\u7528\\u6237\\u8F93\\u5165\\u4E8B\\u4EF6\\uFF08\\u4F8B\\u5982\\u5355\\u51FB\\u3001\\u6309\\u952E\\u6216\\u9F20\\u6807\\u79FB\\u52A8\\uFF09\\u672C\\u8D28\\u4E0A\\u662F\\u5F02\\u6B65\\u7684\\u3002\\u5E94\\u7528\\u7A0B\\u5E8F\\u9700\\u8981\\u54CD\\u5E94\\u8FD9\\u4E9B\\u4E8B\\u4EF6\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u585E\\u4E3B\\u7EBF\\u7A0B\\uFF0C\\u4ECE\\u800C\\u786E\\u4FDD\\u6D41\\u7545\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const button = document.getElementById('myButton');\nbutton.addEventListener('click', () => {\n  // Handle the click event asynchronously\n  console.log('Button clicked');\n});\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u8BA1\\u65F6\\u5668\\u548C\\u52A8\\u753B\"}),\"\\uFF1A\\u8BA1\\u65F6\\u5668\\uFF08\",(0,e.jsx)(n.code,{children:\"setTimeout()\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"setInterval()\"}),\"\\uFF09\\u548C\\u52A8\\u753B\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,e.jsx)(n.code,{children:\"requestAnimationFrame()\"}),\"\\uFF09\\u662F\\u5F02\\u6B65\\u64CD\\u4F5C\\uFF0C\\u5141\\u8BB8\\u5E94\\u7528\\u7A0B\\u5E8F\\u8C03\\u5EA6\\u4EFB\\u52A1\\u6216\\u66F4\\u65B0\\u52A8\\u753B\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u585E\\u4E3B\\u7EBF\\u7A0B\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`setTimeout(() => {\n  console.log('This message is delayed by 2 seconds');\n}, 2000);\n\nsetInterval(() => {\n  console.log('Current time:', new Date().toLocaleString());\n}, 2000); // Interval runs every 2 seconds\n`})}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u901A\\u8FC7\\u4F7F\\u7528\\u5F02\\u6B65\\u51FD\\u6570\\u548C\\u64CD\\u4F5C\\uFF0CJavaScript \\u53EF\\u4EE5\\u5904\\u7406\\u8017\\u65F6\\u7684\\u4EFB\\u52A1\\uFF0C\\u800C\\u4E0D\\u4F1A\\u51BB\\u7ED3\\u7528\\u6237\\u754C\\u9762\\u6216\\u963B\\u585E\\u4E3B\\u7EBF\\u7A0B\\u3002\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u91CD\\u8981\\u7684\\u662F\\u8981\\u6CE8\\u610F\\uFF0C\",(0,e.jsxs)(n.strong,{children:[(0,e.jsx)(n.code,{children:\"async\"}),\" \\u51FD\\u6570\\u4E0D\\u4F1A\\u5728\\u4E0D\\u540C\\u7684\\u7EBF\\u7A0B\\u4E0A\\u8FD0\\u884C\"]}),\"\\u3002\\u5B83\\u4EEC\\u4ECD\\u7136\\u5728\\u4E3B\\u7EBF\\u7A0B\\u4E0A\\u8FD0\\u884C\\u3002\\u4F46\\u662F\\uFF0C\\u901A\\u8FC7\\u4F7F\\u7528 \",(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers\",children:\"Web workers\"}),\"\\uFF0C\\u53EF\\u4EE5\\u5728 JavaScript \\u4E2D\\u5B9E\\u73B0\\u5E76\\u884C\\u6027\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u901A\\u8FC7 Web worker \\u5728 JavaScript \\u4E2D\\u5B9E\\u73B0\\u5E76\\u884C\\u6027\"}),`\n`,(0,e.jsx)(n.p,{children:\"Web worker \\u5141\\u8BB8\\u60A8\\u751F\\u6210\\u5355\\u72EC\\u7684\\u540E\\u53F0\\u7EBF\\u7A0B\\uFF0C\\u8FD9\\u4E9B\\u7EBF\\u7A0B\\u53EF\\u4EE5\\u4E0E\\u4E3B\\u7EBF\\u7A0B\\u5E76\\u884C\\u6267\\u884C CPU \\u5BC6\\u96C6\\u578B\\u4EFB\\u52A1\\u3002\\u8FD9\\u4E9B\\u5DE5\\u4F5C\\u7EBF\\u7A0B\\u53EF\\u4EE5\\u901A\\u8FC7\\u6D88\\u606F\\u4F20\\u9012\\u4E0E\\u4E3B\\u7EBF\\u7A0B\\u901A\\u4FE1\\uFF0C\\u4F46\\u5B83\\u4EEC\\u65E0\\u6CD5\\u76F4\\u63A5\\u8BBF\\u95EE DOM \\u6216\\u5176\\u4ED6\\u6D4F\\u89C8\\u5668 API\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// main.js\nconst worker = new Worker('worker.js');\n\nworker.onmessage = function (event) {\n  console.log('Result from worker:', event.data);\n};\n\nworker.postMessage('Start computation');\n`})}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// worker.js\nself.onmessage = function (event) {\n  const result = performHeavyComputation();\n  self.postMessage(result);\n};\n\nfunction performHeavyComputation() {\n  // CPU-intensive computation\n  return 'Computation result';\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u4E3B\\u7EBF\\u7A0B\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684 web worker\\uFF0C\\u5E76\\u5411\\u5176\\u53D1\\u9001\\u4E00\\u6761\\u6D88\\u606F\\u4EE5\\u542F\\u52A8\\u8BA1\\u7B97\\u3002worker \\u4E0E\\u4E3B\\u7EBF\\u7A0B\\u5E76\\u884C\\u6267\\u884C\\u7E41\\u91CD\\u7684\\u8BA1\\u7B97\\uFF0C\\u5E76\\u901A\\u8FC7 \",(0,e.jsx)(n.code,{children:\"postMessage()\"}),\" \\u5C06\\u7ED3\\u679C\\u53D1\\u9001\\u56DE\\u53BB\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4E8B\\u4EF6\\u5FAA\\u73AF\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"JavaScript \\u7684\\u5F02\\u6B65\\u7279\\u6027\\u7531 JavaScript \\u5F15\\u64CE\\u7684 \",(0,e.jsx)(n.a,{href:\"/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue\",children:\"\\u4E8B\\u4EF6\\u5FAA\\u73AF\"}),\" \\u63D0\\u4F9B\\u652F\\u6301\\uFF0C\\u5373\\u4F7F JavaScript \\u662F\\u5355\\u7EBF\\u7A0B\\u7684\\uFF0C\\u5B83\\u4E5F\\u5141\\u8BB8\\u5E76\\u53D1\\u64CD\\u4F5C\\u3002 \\u8FD9\\u662F\\u4E00\\u4E2A\\u91CD\\u8981\\u7684\\u6982\\u5FF5\\uFF0C\\u9700\\u8981\\u7406\\u89E3\\uFF0C\\u56E0\\u6B64\\u6211\\u4EEC\\u5F3A\\u70C8\\u5EFA\\u8BAE\\u60A8\\u4E5F\\u6D4F\\u89C8\\u8BE5\\u4E3B\\u9898\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous\",children:\"Asynchronous JavaScript\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.linkedin.com/pulse/basics-synchronous-asynchronous-javascript-abdulkabir-okeowo\",children:\"The Basics: synchronous and asynchronous JavaScript\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://code.pieces.app/blog/synchronous-and-asynchronous-programming-in-javascript\",children:\"Synchronous and asynchronous programming in JavaScript\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API\",children:\"Web Workers API - MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://web.dev/learn/performance/web-worker-overview\",children:\"An overview of web workers - Web.dev\"})}),`\n`]})]})}function h(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(d,{...r})}):d(r)}return k(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-unit-testing-integration-testing-and-end-to-end-testing/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-unit-testing-integration-testing-and-end-to-end-testing/en-US.json
index 29d01185f..935135fde 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-unit-testing-integration-testing-and-end-to-end-testing/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-unit-testing-integration-testing-and-end-to-end-testing/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-unit-testing-integration-testing-and-end-to-end-testing/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},a=(t,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of g(e))!f.call(t,s)&&s!==i&&r(t,s,{get:()=>e[s],enumerable:!(o=p(e,s))||o.enumerable});return t};var y=(t,e,i)=>(i=t!=null?h(u(t)):{},a(e||!t||!t.__esModule?r(i,\"default\",{value:t,enumerable:!0}):i,t)),x=t=>a(r({},\"__esModule\",{value:!0}),t);var l=m((T,c)=>{c.exports=_jsx_runtime});var j={};w(j,{default:()=>b,frontmatter:()=>k});var n=y(l()),k={title:\"Explain the difference between unit testing, integration testing, and end-to-end testing\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Unit testing focuses on testing individual components or functions in isolation to ensure they work as expected. Integration testing checks how different modules or services work together. End-to-end testing simulates real user scenarios to verify the entire application flow from start to finish.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Difference between unit testing, integration testing, and end-to-end testing\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Unit testing\"}),`\n`,(0,n.jsx)(e.p,{children:\"Unit testing involves testing individual components or functions in isolation. The goal is to ensure that each part of the code works correctly on its own. These tests are usually written by developers and are the first line of defense against bugs.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Scope\"}),\": Single function or component\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Tools\"}),\": Jest, Mocha, Jasmine\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Example\"}),\": Testing a function that adds two numbers\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n\ntest('adds 1 + 2 to equal 3', () => {\n  expect(add(1, 2)).toBe(3);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Integration testing\"}),`\n`,(0,n.jsx)(e.p,{children:\"Integration testing focuses on verifying the interactions between different modules or services. The goal is to ensure that combined parts of the application work together as expected. These tests are usually more complex than unit tests and may involve multiple components.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Scope\"}),\": Multiple components or services\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Tools\"}),\": Jest, Mocha, Jasmine, Postman (for API testing)\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Example\"}),\": Testing a function that fetches data from an API and processes it\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData(apiUrl) {\n  const response = await fetch(apiUrl);\n  const data = await response.json();\n  return processData(data);\n}\n\ntest('fetches and processes data correctly', async () => {\n  const apiUrl = 'https://api.example.com/data';\n  const data = await fetchData(apiUrl);\n  expect(data).toEqual(expectedProcessedData);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"End-to-end testing\"}),`\n`,(0,n.jsx)(e.p,{children:\"End-to-end (E2E) testing simulates real user scenarios to verify the entire application flow from start to finish. The goal is to ensure that the application works as a whole, including the user interface, backend, and any external services.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Scope\"}),\": Entire application\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Tools\"}),\": Cypress, Selenium, Puppeteer\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Example\"}),\": Testing a user login flow\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`describe('User Login Flow', () => {\n  it('should allow a user to log in', () => {\n    cy.visit('https://example.com/login');\n    cy.get('input[name=\"username\"]').type('testuser');\n    cy.get('input[name=\"password\"]').type('password123');\n    cy.get('button[type=\"submit\"]').click();\n    cy.url().should('include', '/dashboard');\n  });\n});\n`})}),`\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://en.wikipedia.org/wiki/Unit_testing\",children:\"Unit testing on Wikipedia\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://en.wikipedia.org/wiki/Integration_testing\",children:\"Integration testing on Wikipedia\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://en.wikipedia.org/wiki/End-to-end_testing\",children:\"End-to-end testing on Wikipedia\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jestjs.io/docs/getting-started\",children:\"Jest documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://docs.cypress.io/guides/overview/why-cypress\",children:\"Cypress documentation\"})}),`\n`]})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var b=v;return x(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},a=(t,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of u(e))!m.call(t,s)&&s!==i&&r(t,s,{get:()=>e[s],enumerable:!(o=g(e,s))||o.enumerable});return t};var x=(t,e,i)=>(i=t!=null?p(f(t)):{},a(e||!t||!t.__esModule?r(i,\"default\",{value:t,enumerable:!0}):i,t)),k=t=>a(r({},\"__esModule\",{value:!0}),t);var l=w((T,c)=>{c.exports=_jsx_runtime});var b={};y(b,{default:()=>h,frontmatter:()=>v});var n=x(l()),v={title:\"Explain the difference between unit testing, integration testing, and end-to-end testing\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Unit testing focuses on testing individual components or functions in isolation to ensure they work as expected. Integration testing checks how different modules or services work together. End-to-end testing simulates real user scenarios to verify the entire application flow from start to finish.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Difference between unit testing, integration testing, and end-to-end testing\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Unit testing\"}),`\n`,(0,n.jsx)(e.p,{children:\"Unit testing involves testing individual components or functions in isolation. The goal is to ensure that each part of the code works correctly on its own. These tests are usually written by developers and are the first line of defense against bugs.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Scope\"}),\": Single function or component\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Tools\"}),\": Jest, Mocha, Jasmine\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Example\"}),\": Testing a function that adds two numbers\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n\ntest('adds 1 + 2 to equal 3', () => {\n  expect(add(1, 2)).toBe(3);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Integration testing\"}),`\n`,(0,n.jsx)(e.p,{children:\"Integration testing focuses on verifying the interactions between different modules or services. The goal is to ensure that combined parts of the application work together as expected. These tests are usually more complex than unit tests and may involve multiple components.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Scope\"}),\": Multiple components or services\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Tools\"}),\": Jest, Mocha, Jasmine, Postman (for API testing)\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Example\"}),\": Testing a function that fetches data from an API and processes it\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData(apiUrl) {\n  const response = await fetch(apiUrl);\n  const data = await response.json();\n  return processData(data);\n}\n\ntest('fetches and processes data correctly', async () => {\n  const apiUrl = 'https://api.example.com/data';\n  const data = await fetchData(apiUrl);\n  expect(data).toEqual(expectedProcessedData);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"End-to-end testing\"}),`\n`,(0,n.jsx)(e.p,{children:\"End-to-end (E2E) testing simulates real user scenarios to verify the entire application flow from start to finish. The goal is to ensure that the application works as a whole, including the user interface, backend, and any external services.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Scope\"}),\": Entire application\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Tools\"}),\": Cypress, Selenium, Puppeteer\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Example\"}),\": Testing a user login flow\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`describe('User Login Flow', () => {\n  it('should allow a user to log in', () => {\n    cy.visit('https://example.com/login');\n    cy.get('input[name=\"username\"]').type('testuser');\n    cy.get('input[name=\"password\"]').type('password123');\n    cy.get('button[type=\"submit\"]').click();\n    cy.url().should('include', '/dashboard');\n  });\n});\n`})}),`\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://en.wikipedia.org/wiki/Unit_testing\",children:\"Unit testing on Wikipedia\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://en.wikipedia.org/wiki/Integration_testing\",children:\"Integration testing on Wikipedia\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://en.wikipedia.org/wiki/End-to-end_testing\",children:\"End-to-end testing on Wikipedia\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jestjs.io/docs/getting-started\",children:\"Jest documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://docs.cypress.io/guides/overview/why-cypress\",children:\"Cypress documentation\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return k(b);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-unit-testing-integration-testing-and-end-to-end-testing/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-unit-testing-integration-testing-and-end-to-end-testing/zh-CN.json
index d8d2539e8..143c838e2 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-unit-testing-integration-testing-and-end-to-end-testing/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-unit-testing-integration-testing-and-end-to-end-testing/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-unit-testing-integration-testing-and-end-to-end-testing/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var o=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var y=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),f=(t,n)=>{for(var i in n)c(t,i,{get:n[i],enumerable:!0})},l=(t,n,i,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of g(n))!m.call(t,r)&&r!==i&&c(t,r,{get:()=>n[r],enumerable:!(s=p(n,r))||s.enumerable});return t};var w=(t,n,i)=>(i=t!=null?o(u(t)):{},l(n||!t||!t.__esModule?c(i,\"default\",{value:t,enumerable:!0}):i,t)),x=t=>l(c({},\"__esModule\",{value:!0}),t);var d=y((U,a)=>{a.exports=_jsx_runtime});var k={};f(k,{default:()=>b,frontmatter:()=>j});var e=w(d()),j={title:\"\\u89E3\\u91CA\\u5355\\u5143\\u6D4B\\u8BD5\\u3001\\u96C6\\u6210\\u6D4B\\u8BD5\\u548C\\u7AEF\\u5230\\u7AEF\\u6D4B\\u8BD5\\u7684\\u533A\\u522B\"};function h(t){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5355\\u5143\\u6D4B\\u8BD5\\u4FA7\\u91CD\\u4E8E\\u9694\\u79BB\\u6D4B\\u8BD5\\u5355\\u4E2A\\u7EC4\\u4EF6\\u6216\\u51FD\\u6570\\uFF0C\\u4EE5\\u786E\\u4FDD\\u5B83\\u4EEC\\u6309\\u9884\\u671F\\u5DE5\\u4F5C\\u3002\\u96C6\\u6210\\u6D4B\\u8BD5\\u68C0\\u67E5\\u4E0D\\u540C\\u6A21\\u5757\\u6216\\u670D\\u52A1\\u5982\\u4F55\\u534F\\u540C\\u5DE5\\u4F5C\\u3002\\u7AEF\\u5230\\u7AEF\\u6D4B\\u8BD5\\u6A21\\u62DF\\u771F\\u5B9E\\u7528\\u6237\\u573A\\u666F\\uFF0C\\u4EE5\\u9A8C\\u8BC1\\u4ECE\\u5F00\\u59CB\\u5230\\u7ED3\\u675F\\u7684\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u6D41\\u7A0B\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5355\\u5143\\u6D4B\\u8BD5\\u3001\\u96C6\\u6210\\u6D4B\\u8BD5\\u548C\\u7AEF\\u5230\\u7AEF\\u6D4B\\u8BD5\\u7684\\u533A\\u522B\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5355\\u5143\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5355\\u5143\\u6D4B\\u8BD5\\u6D89\\u53CA\\u9694\\u79BB\\u6D4B\\u8BD5\\u5355\\u4E2A\\u7EC4\\u4EF6\\u6216\\u51FD\\u6570\\u3002\\u76EE\\u6807\\u662F\\u786E\\u4FDD\\u4EE3\\u7801\\u7684\\u6BCF\\u4E2A\\u90E8\\u5206\\u90FD\\u80FD\\u6B63\\u5E38\\u5DE5\\u4F5C\\u3002\\u8FD9\\u4E9B\\u6D4B\\u8BD5\\u901A\\u5E38\\u7531\\u5F00\\u53D1\\u4EBA\\u5458\\u7F16\\u5199\\uFF0C\\u662F\\u9632\\u6B62\\u9519\\u8BEF\\u7684\\u7684\\u7B2C\\u4E00\\u9053\\u9632\\u7EBF\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8303\\u56F4\"}),\"\\uFF1A\\u5355\\u4E2A\\u51FD\\u6570\\u6216\\u7EC4\\u4EF6\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5DE5\\u5177\"}),\"\\uFF1AJest\\u3001Mocha\\u3001Jasmine\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u793A\\u4F8B\"}),\"\\uFF1A\\u6D4B\\u8BD5\\u4E00\\u4E2A\\u5C06\\u4E24\\u4E2A\\u6570\\u5B57\\u76F8\\u52A0\\u7684\\u51FD\\u6570\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n\ntest('adds 1 + 2 to equal 3', () => {\n  expect(add(1, 2)).toBe(3);\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u96C6\\u6210\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u96C6\\u6210\\u6D4B\\u8BD5\\u4FA7\\u91CD\\u4E8E\\u9A8C\\u8BC1\\u4E0D\\u540C\\u6A21\\u5757\\u6216\\u670D\\u52A1\\u4E4B\\u95F4\\u7684\\u4EA4\\u4E92\\u3002\\u76EE\\u6807\\u662F\\u786E\\u4FDD\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u7EC4\\u5408\\u90E8\\u5206\\u6309\\u9884\\u671F\\u534F\\u540C\\u5DE5\\u4F5C\\u3002\\u8FD9\\u4E9B\\u6D4B\\u8BD5\\u901A\\u5E38\\u6BD4\\u5355\\u5143\\u6D4B\\u8BD5\\u66F4\\u590D\\u6742\\uFF0C\\u53EF\\u80FD\\u6D89\\u53CA\\u591A\\u4E2A\\u7EC4\\u4EF6\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8303\\u56F4\"}),\"\\uFF1A\\u591A\\u4E2A\\u7EC4\\u4EF6\\u6216\\u670D\\u52A1\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5DE5\\u5177\"}),\"\\uFF1AJest\\u3001Mocha\\u3001Jasmine\\u3001Postman\\uFF08\\u7528\\u4E8E API \\u6D4B\\u8BD5\\uFF09\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u793A\\u4F8B\"}),\"\\uFF1A\\u6D4B\\u8BD5\\u4E00\\u4E2A\\u4ECE API \\u83B7\\u53D6\\u6570\\u636E\\u5E76\\u5904\\u7406\\u6570\\u636E\\u7684\\u51FD\\u6570\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`async function fetchData(apiUrl) {\n  const response = await fetch(apiUrl);\n  const data = await response.json();\n  return processData(data);\n}\n\ntest('fetches and processes data correctly', async () => {\n  const apiUrl = 'https://api.example.com/data';\n  const data = await fetchData(apiUrl);\n  expect(data).toEqual(expectedProcessedData);\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7AEF\\u5230\\u7AEF\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7AEF\\u5230\\u7AEF (E2E) \\u6D4B\\u8BD5\\u6A21\\u62DF\\u771F\\u5B9E\\u7528\\u6237\\u573A\\u666F\\uFF0C\\u4EE5\\u9A8C\\u8BC1\\u4ECE\\u5F00\\u59CB\\u5230\\u7ED3\\u675F\\u7684\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u6D41\\u7A0B\\u3002\\u76EE\\u6807\\u662F\\u786E\\u4FDD\\u5E94\\u7528\\u7A0B\\u5E8F\\u4F5C\\u4E3A\\u4E00\\u4E2A\\u6574\\u4F53\\u5DE5\\u4F5C\\uFF0C\\u5305\\u62EC\\u7528\\u6237\\u754C\\u9762\\u3001\\u540E\\u7AEF\\u548C\\u4EFB\\u4F55\\u5916\\u90E8\\u670D\\u52A1\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8303\\u56F4\"}),\"\\uFF1A\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5DE5\\u5177\"}),\"\\uFF1ACypress\\u3001Selenium\\u3001Puppeteer\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u793A\\u4F8B\"}),\"\\uFF1A\\u6D4B\\u8BD5\\u7528\\u6237\\u767B\\u5F55\\u6D41\\u7A0B\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`describe('User Login Flow', () => {\n  it('should allow a user to log in', () => {\n    cy.visit('https://example.com/login');\n    cy.get('input[name=\"username\"]').type('testuser');\n    cy.get('input[name=\"password\"]').type('password123');\n    cy.get('button[type=\"submit\"]').click();\n    cy.url().should('include', '/dashboard');\n  });\n});\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Unit_testing\",children:\"\\u7EF4\\u57FA\\u767E\\u79D1\\u4E0A\\u7684\\u5355\\u5143\\u6D4B\\u8BD5\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Integration_testing\",children:\"\\u7EF4\\u57FA\\u767E\\u79D1\\u4E0A\\u7684\\u96C6\\u6210\\u6D4B\\u8BD5\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/End-to-end_testing\",children:\"\\u7EF4\\u57FA\\u767E\\u79D1\\u4E0A\\u7684\\u7AEF\\u5230\\u7AEF\\u6D4B\\u8BD5\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://jestjs.io/docs/getting-started\",children:\"Jest \\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://docs.cypress.io/guides/overview/why-cypress\",children:\"Cypress \\u6587\\u6863\"})}),`\n`]})]})}function _(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(h,t)})):h(t)}var b=_;return x(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),w=(t,n)=>{for(var r in n)c(t,r,{get:n[r],enumerable:!0})},l=(t,n,r,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of g(n))!y.call(t,i)&&i!==r&&c(t,i,{get:()=>n[i],enumerable:!(s=u(n,i))||s.enumerable});return t};var x=(t,n,r)=>(r=t!=null?p(m(t)):{},l(n||!t||!t.__esModule?c(r,\"default\",{value:t,enumerable:!0}):r,t)),j=t=>l(c({},\"__esModule\",{value:!0}),t);var d=f((b,a)=>{a.exports=_jsx_runtime});var k={};w(k,{default:()=>o,frontmatter:()=>_});var e=x(d()),_={title:\"\\u89E3\\u91CA\\u5355\\u5143\\u6D4B\\u8BD5\\u3001\\u96C6\\u6210\\u6D4B\\u8BD5\\u548C\\u7AEF\\u5230\\u7AEF\\u6D4B\\u8BD5\\u7684\\u533A\\u522B\"};function h(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5355\\u5143\\u6D4B\\u8BD5\\u4FA7\\u91CD\\u4E8E\\u9694\\u79BB\\u6D4B\\u8BD5\\u5355\\u4E2A\\u7EC4\\u4EF6\\u6216\\u51FD\\u6570\\uFF0C\\u4EE5\\u786E\\u4FDD\\u5B83\\u4EEC\\u6309\\u9884\\u671F\\u5DE5\\u4F5C\\u3002\\u96C6\\u6210\\u6D4B\\u8BD5\\u68C0\\u67E5\\u4E0D\\u540C\\u6A21\\u5757\\u6216\\u670D\\u52A1\\u5982\\u4F55\\u534F\\u540C\\u5DE5\\u4F5C\\u3002\\u7AEF\\u5230\\u7AEF\\u6D4B\\u8BD5\\u6A21\\u62DF\\u771F\\u5B9E\\u7528\\u6237\\u573A\\u666F\\uFF0C\\u4EE5\\u9A8C\\u8BC1\\u4ECE\\u5F00\\u59CB\\u5230\\u7ED3\\u675F\\u7684\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u6D41\\u7A0B\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5355\\u5143\\u6D4B\\u8BD5\\u3001\\u96C6\\u6210\\u6D4B\\u8BD5\\u548C\\u7AEF\\u5230\\u7AEF\\u6D4B\\u8BD5\\u7684\\u533A\\u522B\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5355\\u5143\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5355\\u5143\\u6D4B\\u8BD5\\u6D89\\u53CA\\u9694\\u79BB\\u6D4B\\u8BD5\\u5355\\u4E2A\\u7EC4\\u4EF6\\u6216\\u51FD\\u6570\\u3002\\u76EE\\u6807\\u662F\\u786E\\u4FDD\\u4EE3\\u7801\\u7684\\u6BCF\\u4E2A\\u90E8\\u5206\\u90FD\\u80FD\\u6B63\\u5E38\\u5DE5\\u4F5C\\u3002\\u8FD9\\u4E9B\\u6D4B\\u8BD5\\u901A\\u5E38\\u7531\\u5F00\\u53D1\\u4EBA\\u5458\\u7F16\\u5199\\uFF0C\\u662F\\u9632\\u6B62\\u9519\\u8BEF\\u7684\\u7684\\u7B2C\\u4E00\\u9053\\u9632\\u7EBF\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8303\\u56F4\"}),\"\\uFF1A\\u5355\\u4E2A\\u51FD\\u6570\\u6216\\u7EC4\\u4EF6\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5DE5\\u5177\"}),\"\\uFF1AJest\\u3001Mocha\\u3001Jasmine\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u793A\\u4F8B\"}),\"\\uFF1A\\u6D4B\\u8BD5\\u4E00\\u4E2A\\u5C06\\u4E24\\u4E2A\\u6570\\u5B57\\u76F8\\u52A0\\u7684\\u51FD\\u6570\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n\ntest('adds 1 + 2 to equal 3', () => {\n  expect(add(1, 2)).toBe(3);\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u96C6\\u6210\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u96C6\\u6210\\u6D4B\\u8BD5\\u4FA7\\u91CD\\u4E8E\\u9A8C\\u8BC1\\u4E0D\\u540C\\u6A21\\u5757\\u6216\\u670D\\u52A1\\u4E4B\\u95F4\\u7684\\u4EA4\\u4E92\\u3002\\u76EE\\u6807\\u662F\\u786E\\u4FDD\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u7EC4\\u5408\\u90E8\\u5206\\u6309\\u9884\\u671F\\u534F\\u540C\\u5DE5\\u4F5C\\u3002\\u8FD9\\u4E9B\\u6D4B\\u8BD5\\u901A\\u5E38\\u6BD4\\u5355\\u5143\\u6D4B\\u8BD5\\u66F4\\u590D\\u6742\\uFF0C\\u53EF\\u80FD\\u6D89\\u53CA\\u591A\\u4E2A\\u7EC4\\u4EF6\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8303\\u56F4\"}),\"\\uFF1A\\u591A\\u4E2A\\u7EC4\\u4EF6\\u6216\\u670D\\u52A1\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5DE5\\u5177\"}),\"\\uFF1AJest\\u3001Mocha\\u3001Jasmine\\u3001Postman\\uFF08\\u7528\\u4E8E API \\u6D4B\\u8BD5\\uFF09\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u793A\\u4F8B\"}),\"\\uFF1A\\u6D4B\\u8BD5\\u4E00\\u4E2A\\u4ECE API \\u83B7\\u53D6\\u6570\\u636E\\u5E76\\u5904\\u7406\\u6570\\u636E\\u7684\\u51FD\\u6570\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`async function fetchData(apiUrl) {\n  const response = await fetch(apiUrl);\n  const data = await response.json();\n  return processData(data);\n}\n\ntest('fetches and processes data correctly', async () => {\n  const apiUrl = 'https://api.example.com/data';\n  const data = await fetchData(apiUrl);\n  expect(data).toEqual(expectedProcessedData);\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7AEF\\u5230\\u7AEF\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7AEF\\u5230\\u7AEF (E2E) \\u6D4B\\u8BD5\\u6A21\\u62DF\\u771F\\u5B9E\\u7528\\u6237\\u573A\\u666F\\uFF0C\\u4EE5\\u9A8C\\u8BC1\\u4ECE\\u5F00\\u59CB\\u5230\\u7ED3\\u675F\\u7684\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u6D41\\u7A0B\\u3002\\u76EE\\u6807\\u662F\\u786E\\u4FDD\\u5E94\\u7528\\u7A0B\\u5E8F\\u4F5C\\u4E3A\\u4E00\\u4E2A\\u6574\\u4F53\\u5DE5\\u4F5C\\uFF0C\\u5305\\u62EC\\u7528\\u6237\\u754C\\u9762\\u3001\\u540E\\u7AEF\\u548C\\u4EFB\\u4F55\\u5916\\u90E8\\u670D\\u52A1\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8303\\u56F4\"}),\"\\uFF1A\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5DE5\\u5177\"}),\"\\uFF1ACypress\\u3001Selenium\\u3001Puppeteer\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u793A\\u4F8B\"}),\"\\uFF1A\\u6D4B\\u8BD5\\u7528\\u6237\\u767B\\u5F55\\u6D41\\u7A0B\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`describe('User Login Flow', () => {\n  it('should allow a user to log in', () => {\n    cy.visit('https://example.com/login');\n    cy.get('input[name=\"username\"]').type('testuser');\n    cy.get('input[name=\"password\"]').type('password123');\n    cy.get('button[type=\"submit\"]').click();\n    cy.url().should('include', '/dashboard');\n  });\n});\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Unit_testing\",children:\"\\u7EF4\\u57FA\\u767E\\u79D1\\u4E0A\\u7684\\u5355\\u5143\\u6D4B\\u8BD5\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Integration_testing\",children:\"\\u7EF4\\u57FA\\u767E\\u79D1\\u4E0A\\u7684\\u96C6\\u6210\\u6D4B\\u8BD5\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/End-to-end_testing\",children:\"\\u7EF4\\u57FA\\u767E\\u79D1\\u4E0A\\u7684\\u7AEF\\u5230\\u7AEF\\u6D4B\\u8BD5\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://jestjs.io/docs/getting-started\",children:\"Jest \\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://docs.cypress.io/guides/overview/why-cypress\",children:\"Cypress \\u6587\\u6863\"})}),`\n`]})]})}function o(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(h,{...t})}):h(t)}return j(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-difference-in-hoisting-between-var-let-and-const/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-difference-in-hoisting-between-var-let-and-const/en-US.json
index 41fd742a7..3012f2ca3 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-difference-in-hoisting-between-var-let-and-const/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-difference-in-hoisting-between-var-let-and-const/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-in-hoisting-between-var-let-and-const/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var g=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),v=(i,e)=>{for(var t in e)o(i,t,{get:e[t],enumerable:!0})},a=(i,e,t,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!b.call(i,r)&&r!==t&&o(i,r,{get:()=>e[r],enumerable:!(c=u(e,r))||c.enumerable});return i};var m=(i,e,t)=>(t=i!=null?h(p(i)):{},a(e||!i||!i.__esModule?o(t,\"default\",{value:i,enumerable:!0}):t,i)),D=i=>a(o({},\"__esModule\",{value:!0}),i);var d=g((R,l)=>{l.exports=_jsx_runtime});var S={};v(S,{default:()=>x,frontmatter:()=>j});var n=m(d()),j={title:\"Explain the difference in hoisting between `var`, `let`, and `const`\"};function s(i){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\" declarations are hoisted to the top of their scope and initialized with \",(0,n.jsx)(e.code,{children:\"undefined\"}),\", allowing them to be used before their declaration. \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" declarations are also hoisted but are not initialized, resulting in a \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\" if accessed before their declaration. \",(0,n.jsx)(e.code,{children:\"const\"}),\" additionally requires an initial value at the time of declaration.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Hoisting differences between \",(0,n.jsx)(e.code,{children:\"var\"}),\", \",(0,n.jsx)(e.code,{children:\"let\"}),\", and \",(0,n.jsx)(e.code,{children:\"const\"})]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\" hoisting\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\" declarations are hoisted to the top of their containing function or global scope. This means the variable is available throughout the entire function or script, even before the line where it is declared. However, the variable is initialized with \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" until the actual declaration is encountered.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(a); // Output: undefined\nvar a = 10;\nconsole.log(a); // Output: 10\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"let\"}),\" hoisting\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"let\"}),' declarations are also hoisted to the top of their block scope, but they are not initialized. This creates a \"temporal dead zone\" (TDZ) from the start of the block until the declaration is encountered. Accessing the variable in the TDZ results in a ',(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(b); // ReferenceError: Cannot access 'b' before initialization\nlet b = 20;\nconsole.log(b); // Output: 20\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"const\"}),\" hoisting\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"const\"}),\" declarations behave similarly to \",(0,n.jsx)(e.code,{children:\"let\"}),\" in terms of hoisting. They are hoisted to the top of their block scope but are not initialized, resulting in a TDZ. Additionally, \",(0,n.jsx)(e.code,{children:\"const\"}),\" requires an initial value at the time of declaration and cannot be reassigned.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(c); // ReferenceError: Cannot access 'c' before initialization\nconst c = 30;\nconsole.log(c); // Output: 30\n`})}),`\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/Web/JavaScript/Reference/Statements/var\",children:\"MDN Web Docs: var\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let\",children:\"MDN Web Docs: let\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const\",children:\"MDN Web Docs: const\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/closure#var\",children:\"JavaScript.info: Variable scope, closure\"})}),`\n`]})]})}function z(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(s,i)})):s(i)}var x=z;return D(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),m=(i,e)=>{for(var t in e)o(i,t,{get:e[t],enumerable:!0})},l=(i,e,t,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!g.call(i,r)&&r!==t&&o(i,r,{get:()=>e[r],enumerable:!(c=f(e,r))||c.enumerable});return i};var D=(i,e,t)=>(t=i!=null?u(b(i)):{},l(e||!i||!i.__esModule?o(t,\"default\",{value:i,enumerable:!0}):t,i)),z=i=>l(o({},\"__esModule\",{value:!0}),i);var d=v((w,a)=>{a.exports=_jsx_runtime});var S={};m(S,{default:()=>s,frontmatter:()=>x});var n=D(d()),x={title:\"Explain the difference in hoisting between `var`, `let`, and `const`\"};function h(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\" declarations are hoisted to the top of their scope and initialized with \",(0,n.jsx)(e.code,{children:\"undefined\"}),\", allowing them to be used before their declaration. \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" declarations are also hoisted but are not initialized, resulting in a \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\" if accessed before their declaration. \",(0,n.jsx)(e.code,{children:\"const\"}),\" additionally requires an initial value at the time of declaration.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Hoisting differences between \",(0,n.jsx)(e.code,{children:\"var\"}),\", \",(0,n.jsx)(e.code,{children:\"let\"}),\", and \",(0,n.jsx)(e.code,{children:\"const\"})]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\" hoisting\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\" declarations are hoisted to the top of their containing function or global scope. This means the variable is available throughout the entire function or script, even before the line where it is declared. However, the variable is initialized with \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" until the actual declaration is encountered.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(a); // Output: undefined\nvar a = 10;\nconsole.log(a); // Output: 10\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"let\"}),\" hoisting\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"let\"}),' declarations are also hoisted to the top of their block scope, but they are not initialized. This creates a \"temporal dead zone\" (TDZ) from the start of the block until the declaration is encountered. Accessing the variable in the TDZ results in a ',(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(b); // ReferenceError: Cannot access 'b' before initialization\nlet b = 20;\nconsole.log(b); // Output: 20\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"const\"}),\" hoisting\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"const\"}),\" declarations behave similarly to \",(0,n.jsx)(e.code,{children:\"let\"}),\" in terms of hoisting. They are hoisted to the top of their block scope but are not initialized, resulting in a TDZ. Additionally, \",(0,n.jsx)(e.code,{children:\"const\"}),\" requires an initial value at the time of declaration and cannot be reassigned.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(c); // ReferenceError: Cannot access 'c' before initialization\nconst c = 30;\nconsole.log(c); // Output: 30\n`})}),`\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/Web/JavaScript/Reference/Statements/var\",children:\"MDN Web Docs: var\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let\",children:\"MDN Web Docs: let\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const\",children:\"MDN Web Docs: const\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/closure#var\",children:\"JavaScript.info: Variable scope, closure\"})}),`\n`]})]})}function s(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(h,{...i})}):h(i)}return z(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-difference-in-hoisting-between-var-let-and-const/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-difference-in-hoisting-between-var-let-and-const/zh-CN.json
index 926db0941..ae3b0dbe2 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-difference-in-hoisting-between-var-let-and-const/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-difference-in-hoisting-between-var-let-and-const/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-in-hoisting-between-var-let-and-const/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),m=(c,e)=>{for(var r in e)o(c,r,{get:e[r],enumerable:!0})},i=(c,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of u(e))!v.call(c,l)&&l!==r&&o(c,l,{get:()=>e[l],enumerable:!(t=p(e,l))||t.enumerable});return c};var b=(c,e,r)=>(r=c!=null?s(f(c)):{},i(e||!c||!c.__esModule?o(r,\"default\",{value:c,enumerable:!0}):r,c)),j=c=>i(o({},\"__esModule\",{value:!0}),c);var a=g((M,d)=>{d.exports=_jsx_runtime});var R={};m(R,{default:()=>x,frontmatter:()=>D});var n=b(a()),D={title:\"\\u89E3\\u91CA `var`\\u3001`let` \\u548C `const` \\u4E4B\\u95F4\\u7684\\u53D8\\u91CF\\u63D0\\u5347\\u533A\\u522B\"};function h(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\" \\u58F0\\u660E\\u4F1A\\u88AB\\u63D0\\u5347\\u5230\\u5176\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\u5E76\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" \\u521D\\u59CB\\u5316\\uFF0C\\u5141\\u8BB8\\u5B83\\u4EEC\\u5728\\u5176\\u58F0\\u660E\\u4E4B\\u524D\\u88AB\\u4F7F\\u7528\\u3002\",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u58F0\\u660E\\u4E5F\\u4F1A\\u88AB\\u63D0\\u5347\\uFF0C\\u4F46\\u4E0D\\u4F1A\\u88AB\\u521D\\u59CB\\u5316\\uFF0C\\u5982\\u679C\\u5728\\u58F0\\u660E\\u4E4B\\u524D\\u8BBF\\u95EE\\u5B83\\u4EEC\\uFF0C\\u5219\\u4F1A\\u5BFC\\u81F4 \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\"\\u3002\",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u58F0\\u660E\\u5728\\u58F0\\u660E\\u65F6\\u8FD8\\u9700\\u8981\\u4E00\\u4E2A\\u521D\\u59CB\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u4E4B\\u95F4\\u7684\\u53D8\\u91CF\\u63D0\\u5347\\u533A\\u522B\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\" \\u7684\\u53D8\\u91CF\\u63D0\\u5347\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\" \\u58F0\\u660E\\u4F1A\\u88AB\\u63D0\\u5347\\u5230\\u5176\\u5305\\u542B\\u7684\\u51FD\\u6570\\u6216\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u53D8\\u91CF\\u53EF\\u4EE5\\u5728\\u6574\\u4E2A\\u51FD\\u6570\\u6216\\u811A\\u672C\\u4E2D\\u4F7F\\u7528\\uFF0C\\u5373\\u4F7F\\u5728\\u58F0\\u660E\\u5B83\\u7684\\u884C\\u4E4B\\u524D\\u4E5F\\u662F\\u5982\\u6B64\\u3002\\u4F46\\u662F\\uFF0C\\u5728\\u9047\\u5230\\u5B9E\\u9645\\u58F0\\u660E\\u4E4B\\u524D\\uFF0C\\u53D8\\u91CF\\u4F1A\\u88AB\\u521D\\u59CB\\u5316\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(a); // Output: undefined\nvar a = 10;\nconsole.log(a); // Output: 10\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"let\"}),\" \\u7684\\u53D8\\u91CF\\u63D0\\u5347\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"let\"}),\" \\u58F0\\u660E\\u4E5F\\u4F1A\\u88AB\\u63D0\\u5347\\u5230\\u5176\\u5757\\u7EA7\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\uFF0C\\u4F46\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u88AB\\u521D\\u59CB\\u5316\\u3002\\u8FD9\\u4F1A\\u5728\\u5757\\u7684\\u5F00\\u59CB\\u5230\\u58F0\\u660E\\u88AB\\u9047\\u5230\\u4E4B\\u95F4\\u521B\\u5EFA\\u4E00\\u4E2A\\u201C\\u6682\\u65F6\\u6027\\u6B7B\\u533A\\u201D\\uFF08TDZ\\uFF09\\u3002\\u5728 TDZ \\u4E2D\\u8BBF\\u95EE\\u53D8\\u91CF\\u4F1A\\u5BFC\\u81F4 \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(b); // ReferenceError: Cannot access 'b' before initialization\nlet b = 20;\nconsole.log(b); // Output: 20\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"const\"}),\" \\u7684\\u53D8\\u91CF\\u63D0\\u5347\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"const\"}),\" \\u58F0\\u660E\\u5728\\u53D8\\u91CF\\u63D0\\u5347\\u65B9\\u9762\\u4E0E \",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u7C7B\\u4F3C\\u3002\\u5B83\\u4EEC\\u88AB\\u63D0\\u5347\\u5230\\u5176\\u5757\\u7EA7\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\uFF0C\\u4F46\\u672A\\u88AB\\u521D\\u59CB\\u5316\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4 TDZ\\u3002\\u6B64\\u5916\\uFF0C\",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u5728\\u58F0\\u660E\\u65F6\\u9700\\u8981\\u4E00\\u4E2A\\u521D\\u59CB\\u503C\\uFF0C\\u5E76\\u4E14\\u4E0D\\u80FD\\u88AB\\u91CD\\u65B0\\u8D4B\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(c); // ReferenceError: Cannot access 'c' before initialization\nconst c = 30;\nconsole.log(c); // Output: 30\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Statements/var\",children:\"MDN Web Docs: var\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let\",children:\"MDN Web Docs: let\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const\",children:\"MDN Web Docs: const\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/closure#var\",children:\"JavaScript.info: Variable scope, closure\"})}),`\n`]})]})}function S(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(h,c)})):h(c)}var x=S;return j(R);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),b=(c,e)=>{for(var r in e)o(c,r,{get:e[r],enumerable:!0})},d=(c,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of f(e))!m.call(c,l)&&l!==r&&o(c,l,{get:()=>e[l],enumerable:!(t=u(e,l))||t.enumerable});return c};var D=(c,e,r)=>(r=c!=null?p(v(c)):{},d(e||!c||!c.__esModule?o(r,\"default\",{value:c,enumerable:!0}):r,c)),S=c=>d(o({},\"__esModule\",{value:!0}),c);var h=g((_,i)=>{i.exports=_jsx_runtime});var x={};b(x,{default:()=>s,frontmatter:()=>j});var n=D(h()),j={title:\"\\u89E3\\u91CA `var`\\u3001`let` \\u548C `const` \\u4E4B\\u95F4\\u7684\\u53D8\\u91CF\\u63D0\\u5347\\u533A\\u522B\"};function a(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\" \\u58F0\\u660E\\u4F1A\\u88AB\\u63D0\\u5347\\u5230\\u5176\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\u5E76\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" \\u521D\\u59CB\\u5316\\uFF0C\\u5141\\u8BB8\\u5B83\\u4EEC\\u5728\\u5176\\u58F0\\u660E\\u4E4B\\u524D\\u88AB\\u4F7F\\u7528\\u3002\",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u58F0\\u660E\\u4E5F\\u4F1A\\u88AB\\u63D0\\u5347\\uFF0C\\u4F46\\u4E0D\\u4F1A\\u88AB\\u521D\\u59CB\\u5316\\uFF0C\\u5982\\u679C\\u5728\\u58F0\\u660E\\u4E4B\\u524D\\u8BBF\\u95EE\\u5B83\\u4EEC\\uFF0C\\u5219\\u4F1A\\u5BFC\\u81F4 \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\"\\u3002\",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u58F0\\u660E\\u5728\\u58F0\\u660E\\u65F6\\u8FD8\\u9700\\u8981\\u4E00\\u4E2A\\u521D\\u59CB\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u4E4B\\u95F4\\u7684\\u53D8\\u91CF\\u63D0\\u5347\\u533A\\u522B\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\" \\u7684\\u53D8\\u91CF\\u63D0\\u5347\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\" \\u58F0\\u660E\\u4F1A\\u88AB\\u63D0\\u5347\\u5230\\u5176\\u5305\\u542B\\u7684\\u51FD\\u6570\\u6216\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u53D8\\u91CF\\u53EF\\u4EE5\\u5728\\u6574\\u4E2A\\u51FD\\u6570\\u6216\\u811A\\u672C\\u4E2D\\u4F7F\\u7528\\uFF0C\\u5373\\u4F7F\\u5728\\u58F0\\u660E\\u5B83\\u7684\\u884C\\u4E4B\\u524D\\u4E5F\\u662F\\u5982\\u6B64\\u3002\\u4F46\\u662F\\uFF0C\\u5728\\u9047\\u5230\\u5B9E\\u9645\\u58F0\\u660E\\u4E4B\\u524D\\uFF0C\\u53D8\\u91CF\\u4F1A\\u88AB\\u521D\\u59CB\\u5316\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(a); // Output: undefined\nvar a = 10;\nconsole.log(a); // Output: 10\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"let\"}),\" \\u7684\\u53D8\\u91CF\\u63D0\\u5347\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"let\"}),\" \\u58F0\\u660E\\u4E5F\\u4F1A\\u88AB\\u63D0\\u5347\\u5230\\u5176\\u5757\\u7EA7\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\uFF0C\\u4F46\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u88AB\\u521D\\u59CB\\u5316\\u3002\\u8FD9\\u4F1A\\u5728\\u5757\\u7684\\u5F00\\u59CB\\u5230\\u58F0\\u660E\\u88AB\\u9047\\u5230\\u4E4B\\u95F4\\u521B\\u5EFA\\u4E00\\u4E2A\\u201C\\u6682\\u65F6\\u6027\\u6B7B\\u533A\\u201D\\uFF08TDZ\\uFF09\\u3002\\u5728 TDZ \\u4E2D\\u8BBF\\u95EE\\u53D8\\u91CF\\u4F1A\\u5BFC\\u81F4 \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(b); // ReferenceError: Cannot access 'b' before initialization\nlet b = 20;\nconsole.log(b); // Output: 20\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"const\"}),\" \\u7684\\u53D8\\u91CF\\u63D0\\u5347\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"const\"}),\" \\u58F0\\u660E\\u5728\\u53D8\\u91CF\\u63D0\\u5347\\u65B9\\u9762\\u4E0E \",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u7C7B\\u4F3C\\u3002\\u5B83\\u4EEC\\u88AB\\u63D0\\u5347\\u5230\\u5176\\u5757\\u7EA7\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\uFF0C\\u4F46\\u672A\\u88AB\\u521D\\u59CB\\u5316\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4 TDZ\\u3002\\u6B64\\u5916\\uFF0C\",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u5728\\u58F0\\u660E\\u65F6\\u9700\\u8981\\u4E00\\u4E2A\\u521D\\u59CB\\u503C\\uFF0C\\u5E76\\u4E14\\u4E0D\\u80FD\\u88AB\\u91CD\\u65B0\\u8D4B\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(c); // ReferenceError: Cannot access 'c' before initialization\nconst c = 30;\nconsole.log(c); // Output: 30\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Statements/var\",children:\"MDN Web Docs: var\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let\",children:\"MDN Web Docs: let\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const\",children:\"MDN Web Docs: const\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/closure#var\",children:\"JavaScript.info: Variable scope, closure\"})}),`\n`]})]})}function s(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(a,{...c})}):a(c)}return S(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-differences-between-commonjs-modules-and-es-modules/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-differences-between-commonjs-modules-and-es-modules/en-US.json
index 130157c45..cd5f43d53 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-differences-between-commonjs-modules-and-es-modules/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-differences-between-commonjs-modules-and-es-modules/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-differences-between-commonjs-modules-and-es-modules/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),v=(o,e)=>{for(var d in e)i(o,d,{get:e[d],enumerable:!0})},l=(o,e,d,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!y.call(o,r)&&r!==d&&i(o,r,{get:()=>e[r],enumerable:!(t=m(e,r))||t.enumerable});return o};var f=(o,e,d)=>(d=o!=null?h(p(o)):{},l(e||!o||!o.__esModule?i(d,\"default\",{value:o,enumerable:!0}):d,o)),j=o=>l(i({},\"__esModule\",{value:!0}),o);var c=g((E,s)=>{s.exports=_jsx_runtime});var w={};v(w,{default:()=>x,frontmatter:()=>S});var n=f(c()),S={title:\"Explain the differences between CommonJS modules and ES modules in JavaScript\"};function a(o){let e=Object.assign({h2:\"h2\",p:\"p\",strong:\"strong\",code:\"code\",pre:\"pre\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"In JavaScript, modules are reusable pieces of code that encapsulate functionality, making it easier to manage, maintain, and structure your applications. Modules allow you to break down your code into smaller, manageable parts, each with its own scope.\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"CommonJS\"}),\" is an older module system that was initially designed for server-side JavaScript development with Node.js. It uses the \",(0,n.jsx)(e.code,{children:\"require()\"}),\" function to load modules and the \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\" or \",(0,n.jsx)(e.code,{children:\"exports\"}),\" object to define the exports of a module.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// my-module.js\nconst value = 42;\nmodule.exports = { value };\n\n// main.js\nconst myModule = require('./my-module.js');\nconsole.log(myModule.value); // 42\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"ES Modules\"}),\" (ECMAScript Modules) are the standardized module system introduced in ES6 (ECMAScript 2015). They use the \",(0,n.jsx)(e.code,{children:\"import\"}),\" and \",(0,n.jsx)(e.code,{children:\"export\"}),\" statements to handle module dependencies.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// my-module.js\nexport const value = 42;\n\n// main.js\nimport { value } from './my-module.js';\nconsole.log(value); // 42\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"CommonJS vs ES modules\"})}),`\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:\"Feature\"}),(0,n.jsx)(e.th,{children:\"CommonJS\"}),(0,n.jsx)(e.th,{children:\"ES modules\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Module Syntax\"}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"require()\"}),\" for importing \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\" for exporting\"]}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"import\"}),\" for importing \",(0,n.jsx)(e.code,{children:\"export\"}),\" for exporting\"]})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Environment\"}),(0,n.jsx)(e.td,{children:\"Primarily used in Node.js for server-side development\"}),(0,n.jsx)(e.td,{children:\"Designed for both browser and server-side JavaScript (Node.js)\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Loading\"}),(0,n.jsx)(e.td,{children:\"Synchronous loading of modules\"}),(0,n.jsx)(e.td,{children:\"Asynchronous loading of modules\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Structure\"}),(0,n.jsx)(e.td,{children:\"Dynamic imports, can be conditionally called\"}),(0,n.jsx)(e.td,{children:\"Static imports/exports at the top level\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"File extensions\"}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\".js\"}),\" (default)\"]}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\".mjs\"}),\" or \",(0,n.jsx)(e.code,{children:\".js\"}),\" (with \",(0,n.jsx)(e.code,{children:'type: \"module\"'}),\" in \",(0,n.jsx)(e.code,{children:\"package.json\"}),\")\"]})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Browser support\"}),(0,n.jsx)(e.td,{children:\"Not natively supported in browsers\"}),(0,n.jsx)(e.td,{children:\"Natively supported in modern browsers\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Optimization\"}),(0,n.jsx)(e.td,{children:\"Limited optimization due to dynamic nature\"}),(0,n.jsx)(e.td,{children:\"Allows for optimizations like tree-shaking due to static structure\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Compatibility\"}),(0,n.jsx)(e.td,{children:\"Widely used in existing Node.js codebases and libraries\"}),(0,n.jsx)(e.td,{children:\"Newer standard, but gaining adoption in modern projects\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Modules in Javascript\"}),`\n`,(0,n.jsx)(e.p,{children:\"Modules in JavaScript are a way to organize and encapsulate code into reusable and maintainable units. They allow developers to break down their codebase into smaller, self-contained pieces, promoting code reuse, separation of concerns, and better organization. There are two main module systems in JavaScript: CommonJS and ES modules.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"CommonJS\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"CommonJS is an older module system that was initially designed for server-side JavaScript development with Node.js. It uses the require function to load modules and the \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\" or \",(0,n.jsx)(e.code,{children:\"exports\"}),\" object to define the exports of a module.\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Syntax\"}),\": Modules are included using \",(0,n.jsx)(e.code,{children:\"require()\"}),\" and exported using \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Environment\"}),\": Primarily used in \",(0,n.jsx)(e.code,{children:\"Node.js\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Execution\"}),\": Modules are loaded synchronously.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Modules are loaded dynamically at runtime.\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// my-module.js\nconst value = 42;\nmodule.exports = { value };\n\n// main.js\nconst myModule = require('./my-module.js');\nconsole.log(myModule.value); // 42\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"ES Modules\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"ES Modules (ECMAScript Modules) are the standardized module system introduced in ES6 (ECMAScript 2015). They use the \",(0,n.jsx)(e.code,{children:\"import\"}),\" and \",(0,n.jsx)(e.code,{children:\"export\"}),\" statements to handle module dependencies.\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Syntax\"}),\": Modules are imported using \",(0,n.jsx)(e.code,{children:\"import\"}),\" and exported using \",(0,n.jsx)(e.code,{children:\"export\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Environment\"}),\": Can be used in both browser environments and Node.js (with certain configurations).\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Execution\"}),\": Modules are loaded asynchronously.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Support\"}),\": Introduced in ES2015, now widely supported in modern browsers and Node.js.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Modules are loaded statically at compile-time.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Enables better performance due to static analysis and tree-shaking.\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// my-module.js\nexport const value = 42;\n\n// main.js\nimport { value } from './my-module.js';\nconsole.log(value); // 42\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Summary\"}),`\n`,(0,n.jsx)(e.p,{children:\"While CommonJS was the default module system in Node.js initially, ES modules are now the recommended approach for new projects, as they provide better tooling, performance, and ecosystem compatibility. However, CommonJS modules are still widely used in existing code bases and libraries especially for legacy dependencies.\"}),`\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/Web/JavaScript/Guide/Modules\",children:\"JavaScript modules - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nikolasbarwicki.com/articles/commonjs-vs-es-modules-the-shift-from-require-to-import/\",children:\"CommonJS vs ES Modules: the shift from require to import\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/modules-intro\",children:\"Modules, introduction - javascript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://eloquentjavascript.net/10_modules.html\",children:\"Modules - Eloquent Javascript\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://blog.logrocket.com/commonjs-vs-es-modules-node-js/\",children:\"CommonJS vs. ES modules in Node.js\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.syncfusion.com/blogs/post/js-commonjs-vs-es-modules\",children:\"Understanding CommonJS vs. ES Modules in JavaScript\"})}),`\n`]})]})}function b(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(a,o)})):a(o)}var x=b;return j(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),S=(o,e)=>{for(var d in e)i(o,d,{get:e[d],enumerable:!0})},l=(o,e,d,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!g.call(o,r)&&r!==d&&i(o,r,{get:()=>e[r],enumerable:!(t=u(e,r))||t.enumerable});return o};var j=(o,e,d)=>(d=o!=null?m(y(o)):{},l(e||!o||!o.__esModule?i(d,\"default\",{value:o,enumerable:!0}):d,o)),f=o=>l(i({},\"__esModule\",{value:!0}),o);var c=v((M,s)=>{s.exports=_jsx_runtime});var x={};S(x,{default:()=>h,frontmatter:()=>b});var n=j(c()),b={title:\"Explain the differences between CommonJS modules and ES modules in JavaScript\"};function a(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"In JavaScript, modules are reusable pieces of code that encapsulate functionality, making it easier to manage, maintain, and structure your applications. Modules allow you to break down your code into smaller, manageable parts, each with its own scope.\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"CommonJS\"}),\" is an older module system that was initially designed for server-side JavaScript development with Node.js. It uses the \",(0,n.jsx)(e.code,{children:\"require()\"}),\" function to load modules and the \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\" or \",(0,n.jsx)(e.code,{children:\"exports\"}),\" object to define the exports of a module.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// my-module.js\nconst value = 42;\nmodule.exports = { value };\n\n// main.js\nconst myModule = require('./my-module.js');\nconsole.log(myModule.value); // 42\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"ES Modules\"}),\" (ECMAScript Modules) are the standardized module system introduced in ES6 (ECMAScript 2015). They use the \",(0,n.jsx)(e.code,{children:\"import\"}),\" and \",(0,n.jsx)(e.code,{children:\"export\"}),\" statements to handle module dependencies.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// my-module.js\nexport const value = 42;\n\n// main.js\nimport { value } from './my-module.js';\nconsole.log(value); // 42\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"CommonJS vs ES modules\"})}),`\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:\"Feature\"}),(0,n.jsx)(e.th,{children:\"CommonJS\"}),(0,n.jsx)(e.th,{children:\"ES modules\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Module Syntax\"}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"require()\"}),\" for importing \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\" for exporting\"]}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"import\"}),\" for importing \",(0,n.jsx)(e.code,{children:\"export\"}),\" for exporting\"]})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Environment\"}),(0,n.jsx)(e.td,{children:\"Primarily used in Node.js for server-side development\"}),(0,n.jsx)(e.td,{children:\"Designed for both browser and server-side JavaScript (Node.js)\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Loading\"}),(0,n.jsx)(e.td,{children:\"Synchronous loading of modules\"}),(0,n.jsx)(e.td,{children:\"Asynchronous loading of modules\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Structure\"}),(0,n.jsx)(e.td,{children:\"Dynamic imports, can be conditionally called\"}),(0,n.jsx)(e.td,{children:\"Static imports/exports at the top level\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"File extensions\"}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\".js\"}),\" (default)\"]}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\".mjs\"}),\" or \",(0,n.jsx)(e.code,{children:\".js\"}),\" (with \",(0,n.jsx)(e.code,{children:'type: \"module\"'}),\" in \",(0,n.jsx)(e.code,{children:\"package.json\"}),\")\"]})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Browser support\"}),(0,n.jsx)(e.td,{children:\"Not natively supported in browsers\"}),(0,n.jsx)(e.td,{children:\"Natively supported in modern browsers\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Optimization\"}),(0,n.jsx)(e.td,{children:\"Limited optimization due to dynamic nature\"}),(0,n.jsx)(e.td,{children:\"Allows for optimizations like tree-shaking due to static structure\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Compatibility\"}),(0,n.jsx)(e.td,{children:\"Widely used in existing Node.js codebases and libraries\"}),(0,n.jsx)(e.td,{children:\"Newer standard, but gaining adoption in modern projects\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Modules in Javascript\"}),`\n`,(0,n.jsx)(e.p,{children:\"Modules in JavaScript are a way to organize and encapsulate code into reusable and maintainable units. They allow developers to break down their codebase into smaller, self-contained pieces, promoting code reuse, separation of concerns, and better organization. There are two main module systems in JavaScript: CommonJS and ES modules.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"CommonJS\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"CommonJS is an older module system that was initially designed for server-side JavaScript development with Node.js. It uses the require function to load modules and the \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\" or \",(0,n.jsx)(e.code,{children:\"exports\"}),\" object to define the exports of a module.\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Syntax\"}),\": Modules are included using \",(0,n.jsx)(e.code,{children:\"require()\"}),\" and exported using \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Environment\"}),\": Primarily used in \",(0,n.jsx)(e.code,{children:\"Node.js\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Execution\"}),\": Modules are loaded synchronously.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Modules are loaded dynamically at runtime.\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// my-module.js\nconst value = 42;\nmodule.exports = { value };\n\n// main.js\nconst myModule = require('./my-module.js');\nconsole.log(myModule.value); // 42\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"ES Modules\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"ES Modules (ECMAScript Modules) are the standardized module system introduced in ES6 (ECMAScript 2015). They use the \",(0,n.jsx)(e.code,{children:\"import\"}),\" and \",(0,n.jsx)(e.code,{children:\"export\"}),\" statements to handle module dependencies.\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Syntax\"}),\": Modules are imported using \",(0,n.jsx)(e.code,{children:\"import\"}),\" and exported using \",(0,n.jsx)(e.code,{children:\"export\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Environment\"}),\": Can be used in both browser environments and Node.js (with certain configurations).\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Execution\"}),\": Modules are loaded asynchronously.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Support\"}),\": Introduced in ES2015, now widely supported in modern browsers and Node.js.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Modules are loaded statically at compile-time.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Enables better performance due to static analysis and tree-shaking.\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// my-module.js\nexport const value = 42;\n\n// main.js\nimport { value } from './my-module.js';\nconsole.log(value); // 42\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Summary\"}),`\n`,(0,n.jsx)(e.p,{children:\"While CommonJS was the default module system in Node.js initially, ES modules are now the recommended approach for new projects, as they provide better tooling, performance, and ecosystem compatibility. However, CommonJS modules are still widely used in existing code bases and libraries especially for legacy dependencies.\"}),`\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/Web/JavaScript/Guide/Modules\",children:\"JavaScript modules - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/modules-intro\",children:\"Modules, introduction - javascript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://eloquentjavascript.net/10_modules.html\",children:\"Modules - Eloquent Javascript\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://blog.logrocket.com/commonjs-vs-es-modules-node-js/\",children:\"CommonJS vs. ES modules in Node.js\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.syncfusion.com/blogs/post/js-commonjs-vs-es-modules\",children:\"Understanding CommonJS vs. ES Modules in JavaScript\"})}),`\n`]})]})}function h(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(a,{...o})}):a(o)}return f(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-differences-between-commonjs-modules-and-es-modules/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-differences-between-commonjs-modules-and-es-modules/zh-CN.json
index 240b49c90..a56f27f4f 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-differences-between-commonjs-modules-and-es-modules/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-differences-between-commonjs-modules-and-es-modules/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-differences-between-commonjs-modules-and-es-modules/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var S=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),v=(r,e)=>{for(var d in e)c(r,d,{get:e[d],enumerable:!0})},o=(r,e,d,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of p(e))!j.call(r,l)&&l!==d&&c(r,l,{get:()=>e[l],enumerable:!(i=a(e,l))||i.enumerable});return r};var g=(r,e,d)=>(d=r!=null?m(u(r)):{},o(e||!r||!r.__esModule?c(d,\"default\",{value:r,enumerable:!0}):d,r)),J=r=>o(c({},\"__esModule\",{value:!0}),r);var h=S((N,t)=>{t.exports=_jsx_runtime});var y={};v(y,{default:()=>f,frontmatter:()=>x});var n=g(h()),x={title:\"\\u89E3\\u91CA JavaScript \\u4E2D CommonJS \\u6A21\\u5757\\u548C ES \\u6A21\\u5757\\u7684\\u533A\\u522B\"};function s(r){let e=Object.assign({h2:\"h2\",p:\"p\",strong:\"strong\",code:\"code\",pre:\"pre\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u6A21\\u5757\\u662F\\u53EF\\u91CD\\u7528\\u7684\\u4EE3\\u7801\\u7247\\u6BB5\\uFF0C\\u5C01\\u88C5\\u4E86\\u529F\\u80FD\\uFF0C\\u4F7F\\u5176\\u66F4\\u6613\\u4E8E\\u7BA1\\u7406\\u3001\\u7EF4\\u62A4\\u548C\\u6784\\u5EFA\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\\u6A21\\u5757\\u5141\\u8BB8\\u60A8\\u5C06\\u4EE3\\u7801\\u5206\\u89E3\\u4E3A\\u66F4\\u5C0F\\u3001\\u66F4\\u6613\\u4E8E\\u7BA1\\u7406\\u7684\\u90E8\\u5206\\uFF0C\\u6BCF\\u4E2A\\u90E8\\u5206\\u90FD\\u6709\\u81EA\\u5DF1\\u7684\\u4F5C\\u7528\\u57DF\\u3002\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"CommonJS\"}),\" \\u662F\\u4E00\\u4E2A\\u8F83\\u65E7\\u7684\\u6A21\\u5757\\u7CFB\\u7EDF\\uFF0C\\u6700\\u521D\\u662F\\u4E3A\\u4F7F\\u7528 Node.js \\u8FDB\\u884C\\u670D\\u52A1\\u5668\\u7AEF JavaScript \\u5F00\\u53D1\\u800C\\u8BBE\\u8BA1\\u7684\\u3002\\u5B83\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"require()\"}),\" \\u51FD\\u6570\\u6765\\u52A0\\u8F7D\\u6A21\\u5757\\uFF0C\\u5E76\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"exports\"}),\" \\u5BF9\\u8C61\\u6765\\u5B9A\\u4E49\\u6A21\\u5757\\u7684\\u5BFC\\u51FA\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// my-module.js\nconst value = 42;\nmodule.exports = { value };\n\n// main.js\nconst myModule = require('./my-module.js');\nconsole.log(myModule.value); // 42\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"ES \\u6A21\\u5757\"}),\"\\uFF08ECMAScript \\u6A21\\u5757\\uFF09\\u662F ES6\\uFF08ECMAScript 2015\\uFF09\\u4E2D\\u5F15\\u5165\\u7684\\u6807\\u51C6\\u5316\\u6A21\\u5757\\u7CFB\\u7EDF\\u3002\\u5B83\\u4EEC\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"import\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"export\"}),\" \\u8BED\\u53E5\\u6765\\u5904\\u7406\\u6A21\\u5757\\u4F9D\\u8D56\\u5173\\u7CFB\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// my-module.js\nexport const value = 42;\n\n// main.js\nimport { value } from './my-module.js';\nconsole.log(value); // 42\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"CommonJS vs ES \\u6A21\\u5757\"})}),`\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:\"\\u7279\\u6027\"}),(0,n.jsx)(e.th,{children:\"CommonJS\"}),(0,n.jsx)(e.th,{children:\"ES \\u6A21\\u5757\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u6A21\\u5757\\u8BED\\u6CD5\"}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"require()\"}),\" \\u7528\\u4E8E\\u5BFC\\u5165 \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\" \\u7528\\u4E8E\\u5BFC\\u51FA\"]}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"import\"}),\" \\u7528\\u4E8E\\u5BFC\\u5165 \",(0,n.jsx)(e.code,{children:\"export\"}),\" \\u7528\\u4E8E\\u5BFC\\u51FA\"]})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u73AF\\u5883\"}),(0,n.jsx)(e.td,{children:\"\\u4E3B\\u8981\\u7528\\u4E8E Node.js \\u8FDB\\u884C\\u670D\\u52A1\\u5668\\u7AEF\\u5F00\\u53D1\"}),(0,n.jsx)(e.td,{children:\"\\u4E13\\u4E3A\\u6D4F\\u89C8\\u5668\\u548C\\u670D\\u52A1\\u5668\\u7AEF JavaScript (Node.js) \\u8BBE\\u8BA1\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u52A0\\u8F7D\"}),(0,n.jsx)(e.td,{children:\"\\u6A21\\u5757\\u7684\\u540C\\u6B65\\u52A0\\u8F7D\"}),(0,n.jsx)(e.td,{children:\"\\u6A21\\u5757\\u7684\\u5F02\\u6B65\\u52A0\\u8F7D\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u7ED3\\u6784\"}),(0,n.jsx)(e.td,{children:\"\\u52A8\\u6001\\u5BFC\\u5165\\uFF0C\\u53EF\\u4EE5\\u6709\\u6761\\u4EF6\\u5730\\u8C03\\u7528\"}),(0,n.jsx)(e.td,{children:\"\\u9876\\u5C42\\u7684\\u9759\\u6001\\u5BFC\\u5165/\\u5BFC\\u51FA\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u6587\\u4EF6\\u6269\\u5C55\\u540D\"}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\".js\"}),\" (\\u9ED8\\u8BA4)\"]}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\".mjs\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\".js\"}),\" (\\u5728 \",(0,n.jsx)(e.code,{children:\"package.json\"}),\" \\u4E2D\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:'type: \"module\"'}),\")\"]})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u6D4F\\u89C8\\u5668\\u652F\\u6301\"}),(0,n.jsx)(e.td,{children:\"\\u6D4F\\u89C8\\u5668\\u4E2D\\u4E0D\\u539F\\u751F\\u652F\\u6301\"}),(0,n.jsx)(e.td,{children:\"\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u4E2D\\u539F\\u751F\\u652F\\u6301\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u4F18\\u5316\"}),(0,n.jsx)(e.td,{children:\"\\u7531\\u4E8E\\u5176\\u52A8\\u6001\\u7279\\u6027\\uFF0C\\u4F18\\u5316\\u6709\\u9650\"}),(0,n.jsx)(e.td,{children:\"\\u5141\\u8BB8\\u8FDB\\u884C\\u6811\\u6447\\u7B49\\u4F18\\u5316\\uFF0C\\u56E0\\u4E3A\\u5177\\u6709\\u9759\\u6001\\u7ED3\\u6784\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u517C\\u5BB9\\u6027\"}),(0,n.jsx)(e.td,{children:\"\\u5E7F\\u6CDB\\u7528\\u4E8E\\u73B0\\u6709\\u7684 Node.js \\u4EE3\\u7801\\u5E93\\u548C\\u5E93\"}),(0,n.jsx)(e.td,{children:\"\\u8F83\\u65B0\\u7684\\u6807\\u51C6\\uFF0C\\u4F46\\u5728\\u73B0\\u4EE3\\u9879\\u76EE\\u4E2D\\u5F97\\u5230\\u8D8A\\u6765\\u8D8A\\u591A\\u7684\\u91C7\\u7528\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Javascript \\u4E2D\\u7684\\u6A21\\u5757\"}),`\n`,(0,n.jsx)(e.p,{children:\"JavaScript \\u4E2D\\u7684\\u6A21\\u5757\\u662F\\u4E00\\u79CD\\u5C06\\u4EE3\\u7801\\u7EC4\\u7EC7\\u548C\\u5C01\\u88C5\\u6210\\u53EF\\u91CD\\u7528\\u548C\\u53EF\\u7EF4\\u62A4\\u5355\\u5143\\u7684\\u65B9\\u5F0F\\u3002\\u5B83\\u4EEC\\u5141\\u8BB8\\u5F00\\u53D1\\u4EBA\\u5458\\u5C06\\u4ED6\\u4EEC\\u7684\\u4EE3\\u7801\\u5E93\\u5206\\u89E3\\u6210\\u66F4\\u5C0F\\u3001\\u81EA\\u5305\\u542B\\u7684\\u90E8\\u5206\\uFF0C\\u4ECE\\u800C\\u4FC3\\u8FDB\\u4EE3\\u7801\\u91CD\\u7528\\u3001\\u5173\\u6CE8\\u70B9\\u5206\\u79BB\\u548C\\u66F4\\u597D\\u7684\\u7EC4\\u7EC7\\u3002JavaScript \\u4E2D\\u6709\\u4E24\\u4E2A\\u4E3B\\u8981\\u7684\\u6A21\\u5757\\u7CFB\\u7EDF\\uFF1ACommonJS \\u548C ES \\u6A21\\u5757\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"CommonJS\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"CommonJS \\u662F\\u4E00\\u4E2A\\u8F83\\u65E7\\u7684\\u6A21\\u5757\\u7CFB\\u7EDF\\uFF0C\\u6700\\u521D\\u662F\\u4E3A\\u4F7F\\u7528 Node.js \\u8FDB\\u884C\\u670D\\u52A1\\u5668\\u7AEF JavaScript \\u5F00\\u53D1\\u800C\\u8BBE\\u8BA1\\u7684\\u3002\\u5B83\\u4F7F\\u7528 require \\u51FD\\u6570\\u6765\\u52A0\\u8F7D\\u6A21\\u5757\\uFF0C\\u5E76\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"exports\"}),\" \\u5BF9\\u8C61\\u6765\\u5B9A\\u4E49\\u6A21\\u5757\\u7684\\u5BFC\\u51FA\\u3002\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8BED\\u6CD5\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"require()\"}),\" \\u5305\\u542B\\u6A21\\u5757\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\" \\u5BFC\\u51FA\\u6A21\\u5757\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u73AF\\u5883\"}),\"\\uFF1A\\u4E3B\\u8981\\u7528\\u4E8E \",(0,n.jsx)(e.code,{children:\"Node.js\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6267\\u884C\"}),\"\\uFF1A\\u6A21\\u5757\\u662F\\u540C\\u6B65\\u52A0\\u8F7D\\u7684\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u6A21\\u5757\\u5728\\u8FD0\\u884C\\u65F6\\u52A8\\u6001\\u52A0\\u8F7D\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// my-module.js\nconst value = 42;\nmodule.exports = { value };\n\n// main.js\nconst myModule = require('./my-module.js');\nconsole.log(myModule.value); // 42\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"ES \\u6A21\\u5757\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"ES \\u6A21\\u5757\\uFF08ECMAScript \\u6A21\\u5757\\uFF09\\u662F ES6\\uFF08ECMAScript 2015\\uFF09\\u4E2D\\u5F15\\u5165\\u7684\\u6807\\u51C6\\u5316\\u6A21\\u5757\\u7CFB\\u7EDF\\u3002\\u5B83\\u4EEC\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"import\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"export\"}),\" \\u8BED\\u53E5\\u6765\\u5904\\u7406\\u6A21\\u5757\\u4F9D\\u8D56\\u5173\\u7CFB\\u3002\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8BED\\u6CD5\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"import\"}),\" \\u5BFC\\u5165\\u6A21\\u5757\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"export\"}),\" \\u5BFC\\u51FA\\u6A21\\u5757\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u73AF\\u5883\"}),\"\\uFF1A\\u53EF\\u4EE5\\u5728\\u6D4F\\u89C8\\u5668\\u73AF\\u5883\\u548C Node.js \\u4E2D\\u4F7F\\u7528\\uFF08\\u4F7F\\u7528\\u67D0\\u4E9B\\u914D\\u7F6E\\uFF09\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6267\\u884C\"}),\"\\uFF1A\\u6A21\\u5757\\u662F\\u5F02\\u6B65\\u52A0\\u8F7D\\u7684\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u652F\\u6301\"}),\"\\uFF1A\\u5728 ES2015 \\u4E2D\\u5F15\\u5165\\uFF0C\\u73B0\\u5728\\u5728\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u548C Node.js \\u4E2D\\u5F97\\u5230\\u5E7F\\u6CDB\\u652F\\u6301\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u6A21\\u5757\\u5728\\u7F16\\u8BD1\\u65F6\\u9759\\u6001\\u52A0\\u8F7D\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u7531\\u4E8E\\u9759\\u6001\\u5206\\u6790\\u548C\\u6811\\u6447\\uFF0C\\u53EF\\u4EE5\\u5B9E\\u73B0\\u66F4\\u597D\\u7684\\u6027\\u80FD\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// my-module.js\nexport const value = 42;\n\n// main.js\nimport { value } from './my-module.js';\nconsole.log(value); // 42\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u867D\\u7136 CommonJS \\u6700\\u521D\\u662F Node.js \\u4E2D\\u7684\\u9ED8\\u8BA4\\u6A21\\u5757\\u7CFB\\u7EDF\\uFF0C\\u4F46 ES \\u6A21\\u5757\\u73B0\\u5728\\u662F\\u65B0\\u9879\\u76EE\\u7684\\u63A8\\u8350\\u65B9\\u6CD5\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u63D0\\u4F9B\\u4E86\\u66F4\\u597D\\u7684\\u5DE5\\u5177\\u3001\\u6027\\u80FD\\u548C\\u751F\\u6001\\u7CFB\\u7EDF\\u517C\\u5BB9\\u6027\\u3002 \\u7136\\u800C\\uFF0CCommonJS \\u6A21\\u5757\\u4ECD\\u7136\\u5E7F\\u6CDB\\u7528\\u4E8E\\u73B0\\u6709\\u7684\\u4EE3\\u7801\\u5E93\\u548C\\u5E93\\u4E2D\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u9057\\u7559\\u4F9D\\u8D56\\u9879\\u4E2D\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Guide/Modules\",children:\"JavaScript \\u6A21\\u5757 - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nikolasbarwicki.com/articles/commonjs-vs-es-modules-the-shift-from-require-to-import/\",children:\"CommonJS vs ES Modules: \\u4ECE require \\u5230 import \\u7684\\u8F6C\\u53D8\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/modules-intro\",children:\"\\u6A21\\u5757\\uFF0C\\u7B80\\u4ECB - javascript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://eloquentjavascript.net/10_modules.html\",children:\"\\u6A21\\u5757 - Eloquent Javascript\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://blog.logrocket.com/commonjs-vs-es-modules-node-js/\",children:\"Node.js \\u4E2D\\u7684 CommonJS vs. ES \\u6A21\\u5757\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.syncfusion.com/blogs/post/js-commonjs-vs-es-modules\",children:\"\\u7406\\u89E3 JavaScript \\u4E2D\\u7684 CommonJS vs. ES \\u6A21\\u5757\"})}),`\n`]})]})}function E(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(s,r)})):s(r)}var f=E;return J(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var v=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),g=(r,e)=>{for(var d in e)c(r,d,{get:e[d],enumerable:!0})},o=(r,e,d,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of p(e))!S.call(r,l)&&l!==d&&c(r,l,{get:()=>e[l],enumerable:!(i=u(e,l))||i.enumerable});return r};var x=(r,e,d)=>(d=r!=null?m(j(r)):{},o(e||!r||!r.__esModule?c(d,\"default\",{value:r,enumerable:!0}):d,r)),J=r=>o(c({},\"__esModule\",{value:!0}),r);var h=v((M,t)=>{t.exports=_jsx_runtime});var E={};g(E,{default:()=>a,frontmatter:()=>y});var n=x(h()),y={title:\"\\u89E3\\u91CA JavaScript \\u4E2D CommonJS \\u6A21\\u5757\\u548C ES \\u6A21\\u5757\\u7684\\u533A\\u522B\"};function s(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u6A21\\u5757\\u662F\\u53EF\\u91CD\\u7528\\u7684\\u4EE3\\u7801\\u7247\\u6BB5\\uFF0C\\u5C01\\u88C5\\u4E86\\u529F\\u80FD\\uFF0C\\u4F7F\\u5176\\u66F4\\u6613\\u4E8E\\u7BA1\\u7406\\u3001\\u7EF4\\u62A4\\u548C\\u6784\\u5EFA\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\\u6A21\\u5757\\u5141\\u8BB8\\u60A8\\u5C06\\u4EE3\\u7801\\u5206\\u89E3\\u4E3A\\u66F4\\u5C0F\\u3001\\u66F4\\u6613\\u4E8E\\u7BA1\\u7406\\u7684\\u90E8\\u5206\\uFF0C\\u6BCF\\u4E2A\\u90E8\\u5206\\u90FD\\u6709\\u81EA\\u5DF1\\u7684\\u4F5C\\u7528\\u57DF\\u3002\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"CommonJS\"}),\" \\u662F\\u4E00\\u4E2A\\u8F83\\u65E7\\u7684\\u6A21\\u5757\\u7CFB\\u7EDF\\uFF0C\\u6700\\u521D\\u662F\\u4E3A\\u4F7F\\u7528 Node.js \\u8FDB\\u884C\\u670D\\u52A1\\u5668\\u7AEF JavaScript \\u5F00\\u53D1\\u800C\\u8BBE\\u8BA1\\u7684\\u3002\\u5B83\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"require()\"}),\" \\u51FD\\u6570\\u6765\\u52A0\\u8F7D\\u6A21\\u5757\\uFF0C\\u5E76\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"exports\"}),\" \\u5BF9\\u8C61\\u6765\\u5B9A\\u4E49\\u6A21\\u5757\\u7684\\u5BFC\\u51FA\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// my-module.js\nconst value = 42;\nmodule.exports = { value };\n\n// main.js\nconst myModule = require('./my-module.js');\nconsole.log(myModule.value); // 42\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"ES \\u6A21\\u5757\"}),\"\\uFF08ECMAScript \\u6A21\\u5757\\uFF09\\u662F ES6\\uFF08ECMAScript 2015\\uFF09\\u4E2D\\u5F15\\u5165\\u7684\\u6807\\u51C6\\u5316\\u6A21\\u5757\\u7CFB\\u7EDF\\u3002\\u5B83\\u4EEC\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"import\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"export\"}),\" \\u8BED\\u53E5\\u6765\\u5904\\u7406\\u6A21\\u5757\\u4F9D\\u8D56\\u5173\\u7CFB\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// my-module.js\nexport const value = 42;\n\n// main.js\nimport { value } from './my-module.js';\nconsole.log(value); // 42\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"CommonJS vs ES \\u6A21\\u5757\"})}),`\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:\"\\u7279\\u6027\"}),(0,n.jsx)(e.th,{children:\"CommonJS\"}),(0,n.jsx)(e.th,{children:\"ES \\u6A21\\u5757\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u6A21\\u5757\\u8BED\\u6CD5\"}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"require()\"}),\" \\u7528\\u4E8E\\u5BFC\\u5165 \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\" \\u7528\\u4E8E\\u5BFC\\u51FA\"]}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"import\"}),\" \\u7528\\u4E8E\\u5BFC\\u5165 \",(0,n.jsx)(e.code,{children:\"export\"}),\" \\u7528\\u4E8E\\u5BFC\\u51FA\"]})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u73AF\\u5883\"}),(0,n.jsx)(e.td,{children:\"\\u4E3B\\u8981\\u7528\\u4E8E Node.js \\u8FDB\\u884C\\u670D\\u52A1\\u5668\\u7AEF\\u5F00\\u53D1\"}),(0,n.jsx)(e.td,{children:\"\\u4E13\\u4E3A\\u6D4F\\u89C8\\u5668\\u548C\\u670D\\u52A1\\u5668\\u7AEF JavaScript (Node.js) \\u8BBE\\u8BA1\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u52A0\\u8F7D\"}),(0,n.jsx)(e.td,{children:\"\\u6A21\\u5757\\u7684\\u540C\\u6B65\\u52A0\\u8F7D\"}),(0,n.jsx)(e.td,{children:\"\\u6A21\\u5757\\u7684\\u5F02\\u6B65\\u52A0\\u8F7D\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u7ED3\\u6784\"}),(0,n.jsx)(e.td,{children:\"\\u52A8\\u6001\\u5BFC\\u5165\\uFF0C\\u53EF\\u4EE5\\u6709\\u6761\\u4EF6\\u5730\\u8C03\\u7528\"}),(0,n.jsx)(e.td,{children:\"\\u9876\\u5C42\\u7684\\u9759\\u6001\\u5BFC\\u5165/\\u5BFC\\u51FA\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u6587\\u4EF6\\u6269\\u5C55\\u540D\"}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\".js\"}),\" (\\u9ED8\\u8BA4)\"]}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\".mjs\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\".js\"}),\" (\\u5728 \",(0,n.jsx)(e.code,{children:\"package.json\"}),\" \\u4E2D\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:'type: \"module\"'}),\")\"]})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u6D4F\\u89C8\\u5668\\u652F\\u6301\"}),(0,n.jsx)(e.td,{children:\"\\u6D4F\\u89C8\\u5668\\u4E2D\\u4E0D\\u539F\\u751F\\u652F\\u6301\"}),(0,n.jsx)(e.td,{children:\"\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u4E2D\\u539F\\u751F\\u652F\\u6301\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u4F18\\u5316\"}),(0,n.jsx)(e.td,{children:\"\\u7531\\u4E8E\\u5176\\u52A8\\u6001\\u7279\\u6027\\uFF0C\\u4F18\\u5316\\u6709\\u9650\"}),(0,n.jsx)(e.td,{children:\"\\u5141\\u8BB8\\u8FDB\\u884C\\u6811\\u6447\\u7B49\\u4F18\\u5316\\uFF0C\\u56E0\\u4E3A\\u5177\\u6709\\u9759\\u6001\\u7ED3\\u6784\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u517C\\u5BB9\\u6027\"}),(0,n.jsx)(e.td,{children:\"\\u5E7F\\u6CDB\\u7528\\u4E8E\\u73B0\\u6709\\u7684 Node.js \\u4EE3\\u7801\\u5E93\\u548C\\u5E93\"}),(0,n.jsx)(e.td,{children:\"\\u8F83\\u65B0\\u7684\\u6807\\u51C6\\uFF0C\\u4F46\\u5728\\u73B0\\u4EE3\\u9879\\u76EE\\u4E2D\\u5F97\\u5230\\u8D8A\\u6765\\u8D8A\\u591A\\u7684\\u91C7\\u7528\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Javascript \\u4E2D\\u7684\\u6A21\\u5757\"}),`\n`,(0,n.jsx)(e.p,{children:\"JavaScript \\u4E2D\\u7684\\u6A21\\u5757\\u662F\\u4E00\\u79CD\\u5C06\\u4EE3\\u7801\\u7EC4\\u7EC7\\u548C\\u5C01\\u88C5\\u6210\\u53EF\\u91CD\\u7528\\u548C\\u53EF\\u7EF4\\u62A4\\u5355\\u5143\\u7684\\u65B9\\u5F0F\\u3002\\u5B83\\u4EEC\\u5141\\u8BB8\\u5F00\\u53D1\\u4EBA\\u5458\\u5C06\\u4ED6\\u4EEC\\u7684\\u4EE3\\u7801\\u5E93\\u5206\\u89E3\\u6210\\u66F4\\u5C0F\\u3001\\u81EA\\u5305\\u542B\\u7684\\u90E8\\u5206\\uFF0C\\u4ECE\\u800C\\u4FC3\\u8FDB\\u4EE3\\u7801\\u91CD\\u7528\\u3001\\u5173\\u6CE8\\u70B9\\u5206\\u79BB\\u548C\\u66F4\\u597D\\u7684\\u7EC4\\u7EC7\\u3002JavaScript \\u4E2D\\u6709\\u4E24\\u4E2A\\u4E3B\\u8981\\u7684\\u6A21\\u5757\\u7CFB\\u7EDF\\uFF1ACommonJS \\u548C ES \\u6A21\\u5757\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"CommonJS\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"CommonJS \\u662F\\u4E00\\u4E2A\\u8F83\\u65E7\\u7684\\u6A21\\u5757\\u7CFB\\u7EDF\\uFF0C\\u6700\\u521D\\u662F\\u4E3A\\u4F7F\\u7528 Node.js \\u8FDB\\u884C\\u670D\\u52A1\\u5668\\u7AEF JavaScript \\u5F00\\u53D1\\u800C\\u8BBE\\u8BA1\\u7684\\u3002\\u5B83\\u4F7F\\u7528 require \\u51FD\\u6570\\u6765\\u52A0\\u8F7D\\u6A21\\u5757\\uFF0C\\u5E76\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"exports\"}),\" \\u5BF9\\u8C61\\u6765\\u5B9A\\u4E49\\u6A21\\u5757\\u7684\\u5BFC\\u51FA\\u3002\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8BED\\u6CD5\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"require()\"}),\" \\u5305\\u542B\\u6A21\\u5757\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\" \\u5BFC\\u51FA\\u6A21\\u5757\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u73AF\\u5883\"}),\"\\uFF1A\\u4E3B\\u8981\\u7528\\u4E8E \",(0,n.jsx)(e.code,{children:\"Node.js\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6267\\u884C\"}),\"\\uFF1A\\u6A21\\u5757\\u662F\\u540C\\u6B65\\u52A0\\u8F7D\\u7684\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u6A21\\u5757\\u5728\\u8FD0\\u884C\\u65F6\\u52A8\\u6001\\u52A0\\u8F7D\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// my-module.js\nconst value = 42;\nmodule.exports = { value };\n\n// main.js\nconst myModule = require('./my-module.js');\nconsole.log(myModule.value); // 42\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"ES \\u6A21\\u5757\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"ES \\u6A21\\u5757\\uFF08ECMAScript \\u6A21\\u5757\\uFF09\\u662F ES6\\uFF08ECMAScript 2015\\uFF09\\u4E2D\\u5F15\\u5165\\u7684\\u6807\\u51C6\\u5316\\u6A21\\u5757\\u7CFB\\u7EDF\\u3002\\u5B83\\u4EEC\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"import\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"export\"}),\" \\u8BED\\u53E5\\u6765\\u5904\\u7406\\u6A21\\u5757\\u4F9D\\u8D56\\u5173\\u7CFB\\u3002\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8BED\\u6CD5\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"import\"}),\" \\u5BFC\\u5165\\u6A21\\u5757\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"export\"}),\" \\u5BFC\\u51FA\\u6A21\\u5757\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u73AF\\u5883\"}),\"\\uFF1A\\u53EF\\u4EE5\\u5728\\u6D4F\\u89C8\\u5668\\u73AF\\u5883\\u548C Node.js \\u4E2D\\u4F7F\\u7528\\uFF08\\u4F7F\\u7528\\u67D0\\u4E9B\\u914D\\u7F6E\\uFF09\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6267\\u884C\"}),\"\\uFF1A\\u6A21\\u5757\\u662F\\u5F02\\u6B65\\u52A0\\u8F7D\\u7684\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u652F\\u6301\"}),\"\\uFF1A\\u5728 ES2015 \\u4E2D\\u5F15\\u5165\\uFF0C\\u73B0\\u5728\\u5728\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u548C Node.js \\u4E2D\\u5F97\\u5230\\u5E7F\\u6CDB\\u652F\\u6301\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u6A21\\u5757\\u5728\\u7F16\\u8BD1\\u65F6\\u9759\\u6001\\u52A0\\u8F7D\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u7531\\u4E8E\\u9759\\u6001\\u5206\\u6790\\u548C\\u6811\\u6447\\uFF0C\\u53EF\\u4EE5\\u5B9E\\u73B0\\u66F4\\u597D\\u7684\\u6027\\u80FD\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// my-module.js\nexport const value = 42;\n\n// main.js\nimport { value } from './my-module.js';\nconsole.log(value); // 42\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u867D\\u7136 CommonJS \\u6700\\u521D\\u662F Node.js \\u4E2D\\u7684\\u9ED8\\u8BA4\\u6A21\\u5757\\u7CFB\\u7EDF\\uFF0C\\u4F46 ES \\u6A21\\u5757\\u73B0\\u5728\\u662F\\u65B0\\u9879\\u76EE\\u7684\\u63A8\\u8350\\u65B9\\u6CD5\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u63D0\\u4F9B\\u4E86\\u66F4\\u597D\\u7684\\u5DE5\\u5177\\u3001\\u6027\\u80FD\\u548C\\u751F\\u6001\\u7CFB\\u7EDF\\u517C\\u5BB9\\u6027\\u3002 \\u7136\\u800C\\uFF0CCommonJS \\u6A21\\u5757\\u4ECD\\u7136\\u5E7F\\u6CDB\\u7528\\u4E8E\\u73B0\\u6709\\u7684\\u4EE3\\u7801\\u5E93\\u548C\\u5E93\\u4E2D\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u9057\\u7559\\u4F9D\\u8D56\\u9879\\u4E2D\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Guide/Modules\",children:\"JavaScript modules - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/modules-intro\",children:\"Modules, introduction - javascript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://eloquentjavascript.net/10_modules.html\",children:\"Modules - Eloquent Javascript\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://blog.logrocket.com/commonjs-vs-es-modules-node-js/\",children:\"CommonJS vs. ES modules in Node.js\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.syncfusion.com/blogs/post/js-commonjs-vs-es-modules\",children:\"Understanding CommonJS vs. ES Modules in JavaScript\"})}),`\n`]})]})}function a(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(s,{...r})}):s(r)}return J(E);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.json
index 2ee85468b..dcb788415 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),O=(i,e)=>{for(var o in e)t(i,o,{get:e[o],enumerable:!0})},s=(i,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of f(e))!g.call(i,c)&&c!==o&&t(i,c,{get:()=>e[c],enumerable:!(r=u(e,c))||r.enumerable});return i};var y=(i,e,o)=>(o=i!=null?h(p(i)):{},s(e||!i||!i.__esModule?t(o,\"default\",{value:i,enumerable:!0}):o,i)),b=i=>s(t({},\"__esModule\",{value:!0}),i);var l=m((k,a)=>{a.exports=_jsx_runtime});var w={};O(w,{default:()=>x,frontmatter:()=>v});var n=y(l()),v={title:\"Explain the differences on the usage of `foo` between `function foo() {}` and `var foo = function() {}` in JavaScript\"};function d(i){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",strong:\"strong\",hr:\"hr\",h3:\"h3\",a:\"a\",ul:\"ul\",li:\"li\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"function foo() {}\"}),\" a function declaration while the \",(0,n.jsx)(e.code,{children:\"var foo = function() {}\"}),\" is a function expression. The key difference is that function declarations have its body hoisted but the bodies of function expressions are not (they have the same hoisting behavior as \",(0,n.jsx)(e.code,{children:\"var\"}),\"-declared variables).\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"If you try to invoke a function expression before it is declared, you will get an \",(0,n.jsx)(e.code,{children:\"Uncaught TypeError: XXX is not a function\"}),\" error.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Function declarations can be called in the enclosing scope even before they are declared.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`foo(); // 'FOOOOO'\nfunction foo() {\n  console.log('FOOOOO');\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Function expressions if called before they are declared will result in an error.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`foo(); // Uncaught TypeError: foo is not a function\nvar foo = function () {\n  console.log('FOOOOO');\n};\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Another key difference is in the scope of the function name. Function expressions can be named by defining it after the \",(0,n.jsx)(e.code,{children:\"function\"}),\" and before the parenthesis. However when using named function expressions, the function name is only accessible within the function itself. Trying to access it outside will result in an error or \",(0,n.jsx)(e.code,{children:\"undefined\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const myFunc = function namedFunc() {\n  console.log(namedFunc); // Works\n};\n\nmyFunc(); // Runs the function and logs the function reference\nconsole.log(namedFunc); // ReferenceError: namedFunc is not defined\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note\"}),\": The examples uses \",(0,n.jsx)(e.code,{children:\"var\"}),\" due to legacy reasons. Function expressions can be defined using \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" and the key difference is in the hoisting behavior of those keywords.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Function declarations\"}),`\n`,(0,n.jsx)(e.p,{children:\"A function declaration is a statement that defines a function with a name. It is typically used to declare a function that can be called multiple times throughout the enclosing scope.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function foo() {\n  console.log('FOOOOO');\n}\nfoo(); // 'FOOOOO'\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Function expressions\"}),`\n`,(0,n.jsx)(e.p,{children:\"A function expression is an expression that defines a function and assigns it to a variable. It is often used when a function is needed only once or in a specific context.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var foo = function () {\n  console.log('FOOOOO');\n};\nfoo(); // 'FOOOOO'\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note\"}),\": The examples uses \",(0,n.jsx)(e.code,{children:\"var\"}),\" due to legacy reasons. Function expressions can be defined using \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" and the key difference is in the hoisting behavior of those keywords.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Key differences\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Hoisting\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The key difference is that function declarations have its body hoisted but the bodies of function expressions are not (they have the same hoisting behavior as \",(0,n.jsx)(e.code,{children:\"var\"}),\"-declared variables). For more explanation on hoisting, refer to the quiz question on \",(0,n.jsx)(e.a,{href:\"/questions/quiz/explain-hoisting\",children:\"hoisting\"}),\". If you try to invoke a function expression before it is defined, you will get an \",(0,n.jsx)(e.code,{children:\"Uncaught TypeError: XXX is not a function\"}),\" error.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Function declarations:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`foo(); // 'FOOOOO'\nfunction foo() {\n  console.log('FOOOOO');\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Function expressions:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`foo(); // Uncaught TypeError: foo is not a function\nvar foo = function () {\n  console.log('FOOOOO');\n};\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Name scope\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Function expressions can be named by defining it after the \",(0,n.jsx)(e.code,{children:\"function\"}),\" and before the parenthesis. However when using named function expressions, the function name is only accessible within the function itself. Trying to access it outside will result in \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" and calling it will result in an error.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const myFunc = function namedFunc() {\n  console.log(namedFunc); // Works\n};\n\nmyFunc(); // Runs the function and logs the function reference\nconsole.log(namedFunc); // ReferenceError: namedFunc is not defined\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"When to use each\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Function declarations:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"When you want to create a function on the global scope and make it available throughout the enclosing scope.\"}),`\n`,(0,n.jsx)(e.li,{children:\"If a function is reusable and needs to be called multiple times.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Function expressions:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"If a function is only needed once or in a specific context.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Use to limit the function availability to subsequent code and keep the enclosing scope clean.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"In general, it's preferable to use function declarations to avoid the mental overhead of determining if a function can be called. The practical usages of function expressions is quite rare.\"}),`\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/Web/JavaScript/Reference/Statements/function\",children:\"Function declaration | MDN\"})}),`\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:\"Function expression | MDN\"})}),`\n`]})]})}function F(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(d,i)})):d(i)}var x=F;return b(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var O=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),y=(i,e)=>{for(var o in e)t(i,o,{get:e[o],enumerable:!0})},s=(i,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!m.call(i,c)&&c!==o&&t(i,c,{get:()=>e[c],enumerable:!(r=f(e,c))||r.enumerable});return i};var v=(i,e,o)=>(o=i!=null?u(g(i)):{},s(e||!i||!i.__esModule?t(o,\"default\",{value:i,enumerable:!0}):o,i)),b=i=>s(t({},\"__esModule\",{value:!0}),i);var l=O((j,a)=>{a.exports=_jsx_runtime});var x={};y(x,{default:()=>h,frontmatter:()=>F});var n=v(l()),F={title:\"Explain the differences on the usage of `foo` between `function foo() {}` and `var foo = function() {}` in JavaScript\"};function d(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"function foo() {}\"}),\" a function declaration while the \",(0,n.jsx)(e.code,{children:\"var foo = function() {}\"}),\" is a function expression. The key difference is that function declarations have its body hoisted but the bodies of function expressions are not (they have the same hoisting behavior as \",(0,n.jsx)(e.code,{children:\"var\"}),\"-declared variables).\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"If you try to invoke a function expression before it is declared, you will get an \",(0,n.jsx)(e.code,{children:\"Uncaught TypeError: XXX is not a function\"}),\" error.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Function declarations can be called in the enclosing scope even before they are declared.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`foo(); // 'FOOOOO'\nfunction foo() {\n  console.log('FOOOOO');\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Function expressions if called before they are declared will result in an error.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`foo(); // Uncaught TypeError: foo is not a function\nvar foo = function () {\n  console.log('FOOOOO');\n};\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Another key difference is in the scope of the function name. Function expressions can be named by defining it after the \",(0,n.jsx)(e.code,{children:\"function\"}),\" and before the parenthesis. However when using named function expressions, the function name is only accessible within the function itself. Trying to access it outside will result in an error or \",(0,n.jsx)(e.code,{children:\"undefined\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const myFunc = function namedFunc() {\n  console.log(namedFunc); // Works\n};\n\nmyFunc(); // Runs the function and logs the function reference\nconsole.log(namedFunc); // ReferenceError: namedFunc is not defined\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note\"}),\": The examples uses \",(0,n.jsx)(e.code,{children:\"var\"}),\" due to legacy reasons. Function expressions can be defined using \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" and the key difference is in the hoisting behavior of those keywords.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Function declarations\"}),`\n`,(0,n.jsx)(e.p,{children:\"A function declaration is a statement that defines a function with a name. It is typically used to declare a function that can be called multiple times throughout the enclosing scope.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function foo() {\n  console.log('FOOOOO');\n}\nfoo(); // 'FOOOOO'\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Function expressions\"}),`\n`,(0,n.jsx)(e.p,{children:\"A function expression is an expression that defines a function and assigns it to a variable. It is often used when a function is needed only once or in a specific context.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var foo = function () {\n  console.log('FOOOOO');\n};\nfoo(); // 'FOOOOO'\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note\"}),\": The examples uses \",(0,n.jsx)(e.code,{children:\"var\"}),\" due to legacy reasons. Function expressions can be defined using \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" and the key difference is in the hoisting behavior of those keywords.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Key differences\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Hoisting\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The key difference is that function declarations have its body hoisted but the bodies of function expressions are not (they have the same hoisting behavior as \",(0,n.jsx)(e.code,{children:\"var\"}),\"-declared variables). For more explanation on hoisting, refer to the quiz question on \",(0,n.jsx)(e.a,{href:\"/questions/quiz/explain-hoisting\",children:\"hoisting\"}),\". If you try to invoke a function expression before it is defined, you will get an \",(0,n.jsx)(e.code,{children:\"Uncaught TypeError: XXX is not a function\"}),\" error.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Function declarations:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`foo(); // 'FOOOOO'\nfunction foo() {\n  console.log('FOOOOO');\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Function expressions:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`foo(); // Uncaught TypeError: foo is not a function\nvar foo = function () {\n  console.log('FOOOOO');\n};\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Name scope\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Function expressions can be named by defining it after the \",(0,n.jsx)(e.code,{children:\"function\"}),\" and before the parenthesis. However when using named function expressions, the function name is only accessible within the function itself. Trying to access it outside will result in \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" and calling it will result in an error.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const myFunc = function namedFunc() {\n  console.log(namedFunc); // Works\n};\n\nmyFunc(); // Runs the function and logs the function reference\nconsole.log(namedFunc); // ReferenceError: namedFunc is not defined\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"When to use each\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Function declarations:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"When you want to create a function on the global scope and make it available throughout the enclosing scope.\"}),`\n`,(0,n.jsx)(e.li,{children:\"If a function is reusable and needs to be called multiple times.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Function expressions:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"If a function is only needed once or in a specific context.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Use to limit the function availability to subsequent code and keep the enclosing scope clean.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"In general, it's preferable to use function declarations to avoid the mental overhead of determining if a function can be called. The practical usages of function expressions is quite rare.\"}),`\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/Web/JavaScript/Reference/Statements/function\",children:\"Function declaration | MDN\"})}),`\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:\"Function expression | MDN\"})}),`\n`]})]})}function h(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(d,{...i})}):d(i)}return b(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/pt-BR.json b/apps/web/src/__generated__/questions/quiz/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/pt-BR.json
index 0fb4344cd..ca189177c 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),O=(o,e)=>{for(var r in e)a(o,r,{get:e[r],enumerable:!0})},c=(o,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!p.call(o,s)&&s!==r&&a(o,s,{get:()=>e[s],enumerable:!(t=f(e,s))||t.enumerable});return o};var x=(o,e,r)=>(r=o!=null?l(h(o)):{},c(e||!o||!o.__esModule?a(r,\"default\",{value:o,enumerable:!0}):r,o)),j=o=>c(a({},\"__esModule\",{value:!0}),o);var u=g((X,i)=>{i.exports=_jsx_runtime});var b={};O(b,{default:()=>_,frontmatter:()=>v});var n=x(u()),v={title:\"Explique as diferen\\xE7as no uso de `foo` entre `function foo() {}` e `var foo = function() {}`\"};function d(o){let e=Object.assign({p:\"p\",a:\"a\",code:\"code\",h2:\"h2\",pre:\"pre\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"O primeiro \\xE9 uma declara\\xE7\\xE3o de fun\\xE7\\xF5es, enquanto o segundo \\xE9 uma express\\xE3o de fun\\xE7\\xF5es. A diferen\\xE7a chave \\xE9 que as declara\\xE7\\xF5es de fun\\xE7\\xF5es tem seu corpo hoisted, mas os corpos das express\\xF5es de fun\\xE7\\xE3o n\\xE3o s\\xE3o (elas t\\xEAm o mesmo comportamento hoisting que as vari\\xE1veis). Para obter mais explica\\xE7\\xF5es sobre o hoisting, consulte a pergunta sobre \",(0,n.jsx)(e.a,{href:\"/questions/quiz/explain-hoisting\",children:\"hoisting\"}),\". Se voc\\xEA tentar invocar uma express\\xE3o de fun\\xE7\\xE3o antes de ela ser definida, voc\\xEA receber\\xE1 um erro \",(0,n.jsx)(e.code,{children:\"Uncaught TypeError: XXX n\\xE3o \\xE9 um erro de fun\\xE7\\xE3o\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Declara\\xE7\\xE3o de Fun\\xE7\\xE3o\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`foo(); // 'FOOOO'\nfunction foo() {\n  console.log('FOOOOO');\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Express\\xE3o de Fun\\xE7\\xE3o\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`foo(); // Uncaught TypeError: foo n\\xE3o \\xE9 uma fun\\xE7\\xE3o\nvar foo = function () {\n  console.log('FOOOOO');\n};\n`})})]})}function F(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(d,o)})):d(o)}var _=F;return j(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var f=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),O=(o,e)=>{for(var r in e)a(o,r,{get:e[r],enumerable:!0})},c=(o,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of h(e))!g.call(o,s)&&s!==r&&a(o,s,{get:()=>e[s],enumerable:!(t=m(e,s))||t.enumerable});return o};var v=(o,e,r)=>(r=o!=null?f(p(o)):{},c(e||!o||!o.__esModule?a(r,\"default\",{value:o,enumerable:!0}):r,o)),j=o=>c(a({},\"__esModule\",{value:!0}),o);var u=x((X,i)=>{i.exports=_jsx_runtime});var _={};O(_,{default:()=>l,frontmatter:()=>F});var n=v(u()),F={title:\"Explique as diferen\\xE7as no uso de `foo` entre `function foo() {}` e `var foo = function() {}`\"};function d(o){let e={a:\"a\",code:\"code\",h2:\"h2\",p:\"p\",pre:\"pre\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"O primeiro \\xE9 uma declara\\xE7\\xE3o de fun\\xE7\\xF5es, enquanto o segundo \\xE9 uma express\\xE3o de fun\\xE7\\xF5es. A diferen\\xE7a chave \\xE9 que as declara\\xE7\\xF5es de fun\\xE7\\xF5es tem seu corpo hoisted, mas os corpos das express\\xF5es de fun\\xE7\\xE3o n\\xE3o s\\xE3o (elas t\\xEAm o mesmo comportamento hoisting que as vari\\xE1veis). Para obter mais explica\\xE7\\xF5es sobre o hoisting, consulte a pergunta sobre \",(0,n.jsx)(e.a,{href:\"/questions/quiz/explain-hoisting\",children:\"hoisting\"}),\". Se voc\\xEA tentar invocar uma express\\xE3o de fun\\xE7\\xE3o antes de ela ser definida, voc\\xEA receber\\xE1 um erro \",(0,n.jsx)(e.code,{children:\"Uncaught TypeError: XXX n\\xE3o \\xE9 um erro de fun\\xE7\\xE3o\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Declara\\xE7\\xE3o de Fun\\xE7\\xE3o\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`foo(); // 'FOOOO'\nfunction foo() {\n  console.log('FOOOOO');\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Express\\xE3o de Fun\\xE7\\xE3o\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`foo(); // Uncaught TypeError: foo n\\xE3o \\xE9 uma fun\\xE7\\xE3o\nvar foo = function () {\n  console.log('FOOOOO');\n};\n`})})]})}function l(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(d,{...o})}):d(o)}return j(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/zh-CN.json
index 01f1da01e..1d1300132 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var O=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var p=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),m=(c,n)=>{for(var o in n)l(c,o,{get:n[o],enumerable:!0})},d=(c,n,o,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of f(n))!g.call(c,r)&&r!==o&&l(c,r,{get:()=>n[r],enumerable:!(i=u(n,r))||i.enumerable});return c};var F=(c,n,o)=>(o=c!=null?s(O(c)):{},d(n||!c||!c.__esModule?l(o,\"default\",{value:c,enumerable:!0}):o,c)),v=c=>d(l({},\"__esModule\",{value:!0}),c);var t=p((_,h)=>{h.exports=_jsx_runtime});var y={};m(y,{default:()=>N,frontmatter:()=>j});var e=F(t()),j={title:\"\\u89E3\\u91CA JavaScript \\u4E2D `function foo() {}` \\u548C `var foo = function() {}` \\u4E4B\\u95F4 `foo` \\u7684\\u7528\\u6CD5\\u5DEE\\u5F02\"};function a(c){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",strong:\"strong\",hr:\"hr\",h3:\"h3\",a:\"a\",ul:\"ul\",li:\"li\"},c.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"function foo() {}\"}),\" \\u662F\\u4E00\\u4E2A\\u51FD\\u6570\\u58F0\\u660E\\uFF0C\\u800C \",(0,e.jsx)(n.code,{children:\"var foo = function() {}\"}),\" \\u662F\\u4E00\\u4E2A\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u3002 \\u5173\\u952E\\u533A\\u522B\\u5728\\u4E8E\\u51FD\\u6570\\u58F0\\u660E\\u5177\\u6709\\u51FD\\u6570\\u4F53\\u63D0\\u5347\\uFF0C\\u4F46\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u7684\\u51FD\\u6570\\u4F53\\u6CA1\\u6709\\uFF08\\u5B83\\u4EEC\\u5177\\u6709\\u4E0E \",(0,e.jsx)(n.code,{children:\"var\"}),\" \\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u76F8\\u540C\\u7684\\u63D0\\u5347\\u884C\\u4E3A\\uFF09\\u3002\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5982\\u679C\\u5C1D\\u8BD5\\u5728\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u58F0\\u660E\\u4E4B\\u524D\\u8C03\\u7528\\u5B83\\uFF0C\\u5C06\\u4F1A\\u5F97\\u5230\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"Uncaught TypeError: XXX is not a function\"}),\" \\u9519\\u8BEF\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5373\\u4F7F\\u5728\\u51FD\\u6570\\u58F0\\u660E\\u4E4B\\u524D\\uFF0C\\u4E5F\\u53EF\\u4EE5\\u5728\\u5C01\\u95ED\\u8303\\u56F4\\u5185\\u8C03\\u7528\\u51FD\\u6570\\u58F0\\u660E\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`foo(); // 'FOOOOO'\nfunction foo() {\n  console.log('FOOOOO');\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5982\\u679C\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u5728\\u58F0\\u660E\\u4E4B\\u524D\\u88AB\\u8C03\\u7528\\uFF0C\\u5C06\\u4F1A\\u5BFC\\u81F4\\u9519\\u8BEF\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`foo(); // Uncaught TypeError: foo is not a function\nvar foo = function () {\n  console.log('FOOOOO');\n};\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u53E6\\u4E00\\u4E2A\\u5173\\u952E\\u533A\\u522B\\u5728\\u4E8E\\u51FD\\u6570\\u540D\\u79F0\\u7684\\u8303\\u56F4\\u3002 \\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728 \",(0,e.jsx)(n.code,{children:\"function\"}),\" \\u4E4B\\u540E\\u548C\\u62EC\\u53F7\\u4E4B\\u524D\\u5B9A\\u4E49\\u5B83\\u6765\\u547D\\u540D\\u3002 \\u4F46\\u662F\\uFF0C\\u5F53\\u4F7F\\u7528\\u547D\\u540D\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u65F6\\uFF0C\\u51FD\\u6570\\u540D\\u79F0\\u53EA\\u80FD\\u5728\\u51FD\\u6570\\u672C\\u8EAB\\u5185\\u90E8\\u8BBF\\u95EE\\u3002 \\u5C1D\\u8BD5\\u5728\\u5916\\u90E8\\u8BBF\\u95EE\\u5B83\\u5C06\\u5BFC\\u81F4\\u9519\\u8BEF\\u6216 \",(0,e.jsx)(n.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const myFunc = function namedFunc() {\n  console.log(namedFunc); // Works\n};\n\nmyFunc(); // Runs the function and logs the function reference\nconsole.log(namedFunc); // ReferenceError: namedFunc is not defined\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u6CE8\\u610F\"}),\"\\uFF1A\\u7531\\u4E8E\\u5386\\u53F2\\u539F\\u56E0\\uFF0C\\u793A\\u4F8B\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"var\"}),\"\\u3002 \\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"let\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"const\"}),\" \\u5B9A\\u4E49\\uFF0C\\u5173\\u952E\\u533A\\u522B\\u5728\\u4E8E\\u8FD9\\u4E9B\\u5173\\u952E\\u5B57\\u7684\\u63D0\\u5347\\u884C\\u4E3A\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u51FD\\u6570\\u58F0\\u660E\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51FD\\u6570\\u58F0\\u660E\\u662F\\u4E00\\u4E2A\\u4F7F\\u7528\\u540D\\u79F0\\u5B9A\\u4E49\\u51FD\\u6570\\u7684\\u8BED\\u53E5\\u3002 \\u5B83\\u901A\\u5E38\\u7528\\u4E8E\\u58F0\\u660E\\u53EF\\u4EE5\\u5728\\u5C01\\u95ED\\u8303\\u56F4\\u5185\\u591A\\u6B21\\u8C03\\u7528\\u7684\\u51FD\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function foo() {\n  console.log('FOOOOO');\n}\nfoo(); // 'FOOOOO'\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u662F\\u4E00\\u4E2A\\u5B9A\\u4E49\\u51FD\\u6570\\u5E76\\u5C06\\u5176\\u5206\\u914D\\u7ED9\\u53D8\\u91CF\\u7684\\u8868\\u8FBE\\u5F0F\\u3002 \\u5F53\\u53EA\\u9700\\u8981\\u4E00\\u6B21\\u6216\\u5728\\u7279\\u5B9A\\u4E0A\\u4E0B\\u6587\\u4E2D\\u4F7F\\u7528\\u51FD\\u6570\\u65F6\\uFF0C\\u901A\\u5E38\\u4F7F\\u7528\\u5B83\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`var foo = function () {\n  console.log('FOOOOO');\n};\nfoo(); // 'FOOOOO'\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u6CE8\\u610F\"}),\"\\uFF1A\\u7531\\u4E8E\\u5386\\u53F2\\u539F\\u56E0\\uFF0C\\u793A\\u4F8B\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"var\"}),\"\\u3002 \\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"let\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"const\"}),\" \\u5B9A\\u4E49\\uFF0C\\u5173\\u952E\\u533A\\u522B\\u5728\\u4E8E\\u8FD9\\u4E9B\\u5173\\u952E\\u5B57\\u7684\\u63D0\\u5347\\u884C\\u4E3A\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5173\\u952E\\u533A\\u522B\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u63D0\\u5347\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5173\\u952E\\u7684\\u533A\\u522B\\u5728\\u4E8E\\u51FD\\u6570\\u58F0\\u660E\\u6709\\u51FD\\u6570\\u4F53\\u63D0\\u5347\\uFF0C\\u4F46\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u7684\\u51FD\\u6570\\u4F53\\u6CA1\\u6709\\uFF08\\u5B83\\u4EEC\\u5177\\u6709\\u4E0E\",(0,e.jsx)(n.code,{children:\"var\"}),\"\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u76F8\\u540C\\u7684\\u63D0\\u5347\\u884C\\u4E3A\\uFF09\\u3002\\u6709\\u5173\\u63D0\\u5347\\u7684\\u66F4\\u591A\\u8BF4\\u660E\\uFF0C\\u8BF7\\u53C2\\u9605\\u5173\\u4E8E\",(0,e.jsx)(n.a,{href:\"/questions/quiz/explain-hoisting\",children:\"\\u63D0\\u5347\"}),\"\\u7684\\u6D4B\\u9A8C\\u95EE\\u9898\\u3002\\u5982\\u679C\\u5C1D\\u8BD5\\u5728\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u5B9A\\u4E49\\u4E4B\\u524D\\u8C03\\u7528\\u5B83\\uFF0C\\u5C06\\u4F1A\\u5F97\\u5230\\u4E00\\u4E2A\",(0,e.jsx)(n.code,{children:\"Uncaught TypeError: XXX is not a function\"}),\"\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51FD\\u6570\\u58F0\\u660E\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`foo(); // 'FOOOOO'\nfunction foo() {\n  console.log('FOOOOO');\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`foo(); // Uncaught TypeError: foo is not a function\nvar foo = function () {\n  console.log('FOOOOO');\n};\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u547D\\u540D\\u8303\\u56F4\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728\",(0,e.jsx)(n.code,{children:\"function\"}),\"\\u4E4B\\u540E\\u548C\\u62EC\\u53F7\\u4E4B\\u524D\\u5B9A\\u4E49\\u5B83\\u6765\\u547D\\u540D\\u3002\\u4F46\\u662F\\uFF0C\\u5F53\\u4F7F\\u7528\\u547D\\u540D\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u65F6\\uFF0C\\u51FD\\u6570\\u540D\\u79F0\\u53EA\\u80FD\\u5728\\u51FD\\u6570\\u672C\\u8EAB\\u5185\\u90E8\\u8BBF\\u95EE\\u3002\\u5C1D\\u8BD5\\u5728\\u5916\\u90E8\\u8BBF\\u95EE\\u5B83\\u5C06\\u5BFC\\u81F4\",(0,e.jsx)(n.code,{children:\"undefined\"}),\"\\uFF0C\\u8C03\\u7528\\u5B83\\u5C06\\u5BFC\\u81F4\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const myFunc = function namedFunc() {\n  console.log(namedFunc); // Works\n};\n\nmyFunc(); // Runs the function and logs the function reference\nconsole.log(namedFunc); // ReferenceError: namedFunc is not defined\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F55\\u65F6\\u4F7F\\u7528\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"\\u51FD\\u6570\\u58F0\\u660E\\uFF1A\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u60A8\\u60F3\\u5728\\u5168\\u5C40\\u8303\\u56F4\\u5185\\u521B\\u5EFA\\u4E00\\u4E2A\\u51FD\\u6570\\uFF0C\\u5E76\\u5728\\u6574\\u4E2A\\u5C01\\u95ED\\u8303\\u56F4\\u5185\\u4F7F\\u7528\\u5B83\\u65F6\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5982\\u679C\\u4E00\\u4E2A\\u51FD\\u6570\\u662F\\u53EF\\u91CD\\u7528\\u7684\\uFF0C\\u5E76\\u4E14\\u9700\\u8981\\u591A\\u6B21\\u8C03\\u7528\\u3002\"}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\uFF1A\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5982\\u679C\\u4E00\\u4E2A\\u51FD\\u6570\\u53EA\\u9700\\u8981\\u4E00\\u6B21\\u6216\\u5728\\u7279\\u5B9A\\u4E0A\\u4E0B\\u6587\\u4E2D\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u7528\\u4E8E\\u5C06\\u51FD\\u6570\\u53EF\\u7528\\u6027\\u9650\\u5236\\u4E3A\\u540E\\u7EED\\u4EE3\\u7801\\uFF0C\\u5E76\\u4FDD\\u6301\\u5C01\\u95ED\\u8303\\u56F4\\u7684\\u6E05\\u6D01\\u3002\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u603B\\u7684\\u6765\\u8BF4\\uFF0C\\u6700\\u597D\\u4F7F\\u7528\\u51FD\\u6570\\u58F0\\u660E\\u6765\\u907F\\u514D\\u786E\\u5B9A\\u662F\\u5426\\u53EF\\u4EE5\\u8C03\\u7528\\u51FD\\u6570\\u7684\\u7CBE\\u795E\\u8D1F\\u62C5\\u3002\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u7684\\u5B9E\\u9645\\u7528\\u6CD5\\u975E\\u5E38\\u7F55\\u89C1\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\",children:\"\\u51FD\\u6570\\u58F0\\u660E | MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function\",children:\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F | MDN\"})}),`\n`]})]})}function x(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,Object.assign({},c,{children:(0,e.jsx)(a,c)})):a(c)}var N=x;return v(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),F=(c,n)=>{for(var o in n)l(c,o,{get:n[o],enumerable:!0})},d=(c,n,o,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of O(n))!g.call(c,r)&&r!==o&&l(c,r,{get:()=>n[r],enumerable:!(i=f(n,r))||i.enumerable});return c};var v=(c,n,o)=>(o=c!=null?u(p(c)):{},d(n||!c||!c.__esModule?l(o,\"default\",{value:c,enumerable:!0}):o,c)),j=c=>d(l({},\"__esModule\",{value:!0}),c);var t=m((X,h)=>{h.exports=_jsx_runtime});var N={};F(N,{default:()=>s,frontmatter:()=>x});var e=v(t()),x={title:\"\\u89E3\\u91CA JavaScript \\u4E2D `function foo() {}` \\u548C `var foo = function() {}` \\u4E4B\\u95F4 `foo` \\u7684\\u7528\\u6CD5\\u5DEE\\u5F02\"};function a(c){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...c.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"function foo() {}\"}),\" \\u662F\\u4E00\\u4E2A\\u51FD\\u6570\\u58F0\\u660E\\uFF0C\\u800C \",(0,e.jsx)(n.code,{children:\"var foo = function() {}\"}),\" \\u662F\\u4E00\\u4E2A\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u3002 \\u5173\\u952E\\u533A\\u522B\\u5728\\u4E8E\\u51FD\\u6570\\u58F0\\u660E\\u5177\\u6709\\u51FD\\u6570\\u4F53\\u63D0\\u5347\\uFF0C\\u4F46\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u7684\\u51FD\\u6570\\u4F53\\u6CA1\\u6709\\uFF08\\u5B83\\u4EEC\\u5177\\u6709\\u4E0E \",(0,e.jsx)(n.code,{children:\"var\"}),\" \\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u76F8\\u540C\\u7684\\u63D0\\u5347\\u884C\\u4E3A\\uFF09\\u3002\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5982\\u679C\\u5C1D\\u8BD5\\u5728\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u58F0\\u660E\\u4E4B\\u524D\\u8C03\\u7528\\u5B83\\uFF0C\\u5C06\\u4F1A\\u5F97\\u5230\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"Uncaught TypeError: XXX is not a function\"}),\" \\u9519\\u8BEF\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5373\\u4F7F\\u5728\\u51FD\\u6570\\u58F0\\u660E\\u4E4B\\u524D\\uFF0C\\u4E5F\\u53EF\\u4EE5\\u5728\\u5C01\\u95ED\\u8303\\u56F4\\u5185\\u8C03\\u7528\\u51FD\\u6570\\u58F0\\u660E\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`foo(); // 'FOOOOO'\nfunction foo() {\n  console.log('FOOOOO');\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5982\\u679C\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u5728\\u58F0\\u660E\\u4E4B\\u524D\\u88AB\\u8C03\\u7528\\uFF0C\\u5C06\\u4F1A\\u5BFC\\u81F4\\u9519\\u8BEF\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`foo(); // Uncaught TypeError: foo is not a function\nvar foo = function () {\n  console.log('FOOOOO');\n};\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u53E6\\u4E00\\u4E2A\\u5173\\u952E\\u533A\\u522B\\u5728\\u4E8E\\u51FD\\u6570\\u540D\\u79F0\\u7684\\u8303\\u56F4\\u3002 \\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728 \",(0,e.jsx)(n.code,{children:\"function\"}),\" \\u4E4B\\u540E\\u548C\\u62EC\\u53F7\\u4E4B\\u524D\\u5B9A\\u4E49\\u5B83\\u6765\\u547D\\u540D\\u3002 \\u4F46\\u662F\\uFF0C\\u5F53\\u4F7F\\u7528\\u547D\\u540D\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u65F6\\uFF0C\\u51FD\\u6570\\u540D\\u79F0\\u53EA\\u80FD\\u5728\\u51FD\\u6570\\u672C\\u8EAB\\u5185\\u90E8\\u8BBF\\u95EE\\u3002 \\u5C1D\\u8BD5\\u5728\\u5916\\u90E8\\u8BBF\\u95EE\\u5B83\\u5C06\\u5BFC\\u81F4\\u9519\\u8BEF\\u6216 \",(0,e.jsx)(n.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const myFunc = function namedFunc() {\n  console.log(namedFunc); // Works\n};\n\nmyFunc(); // Runs the function and logs the function reference\nconsole.log(namedFunc); // ReferenceError: namedFunc is not defined\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u6CE8\\u610F\"}),\"\\uFF1A\\u7531\\u4E8E\\u5386\\u53F2\\u539F\\u56E0\\uFF0C\\u793A\\u4F8B\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"var\"}),\"\\u3002 \\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"let\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"const\"}),\" \\u5B9A\\u4E49\\uFF0C\\u5173\\u952E\\u533A\\u522B\\u5728\\u4E8E\\u8FD9\\u4E9B\\u5173\\u952E\\u5B57\\u7684\\u63D0\\u5347\\u884C\\u4E3A\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u51FD\\u6570\\u58F0\\u660E\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51FD\\u6570\\u58F0\\u660E\\u662F\\u4E00\\u4E2A\\u4F7F\\u7528\\u540D\\u79F0\\u5B9A\\u4E49\\u51FD\\u6570\\u7684\\u8BED\\u53E5\\u3002 \\u5B83\\u901A\\u5E38\\u7528\\u4E8E\\u58F0\\u660E\\u53EF\\u4EE5\\u5728\\u5C01\\u95ED\\u8303\\u56F4\\u5185\\u591A\\u6B21\\u8C03\\u7528\\u7684\\u51FD\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function foo() {\n  console.log('FOOOOO');\n}\nfoo(); // 'FOOOOO'\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u662F\\u4E00\\u4E2A\\u5B9A\\u4E49\\u51FD\\u6570\\u5E76\\u5C06\\u5176\\u5206\\u914D\\u7ED9\\u53D8\\u91CF\\u7684\\u8868\\u8FBE\\u5F0F\\u3002 \\u5F53\\u53EA\\u9700\\u8981\\u4E00\\u6B21\\u6216\\u5728\\u7279\\u5B9A\\u4E0A\\u4E0B\\u6587\\u4E2D\\u4F7F\\u7528\\u51FD\\u6570\\u65F6\\uFF0C\\u901A\\u5E38\\u4F7F\\u7528\\u5B83\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`var foo = function () {\n  console.log('FOOOOO');\n};\nfoo(); // 'FOOOOO'\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u6CE8\\u610F\"}),\"\\uFF1A\\u7531\\u4E8E\\u5386\\u53F2\\u539F\\u56E0\\uFF0C\\u793A\\u4F8B\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"var\"}),\"\\u3002 \\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"let\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"const\"}),\" \\u5B9A\\u4E49\\uFF0C\\u5173\\u952E\\u533A\\u522B\\u5728\\u4E8E\\u8FD9\\u4E9B\\u5173\\u952E\\u5B57\\u7684\\u63D0\\u5347\\u884C\\u4E3A\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5173\\u952E\\u533A\\u522B\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u63D0\\u5347\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5173\\u952E\\u7684\\u533A\\u522B\\u5728\\u4E8E\\u51FD\\u6570\\u58F0\\u660E\\u6709\\u51FD\\u6570\\u4F53\\u63D0\\u5347\\uFF0C\\u4F46\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u7684\\u51FD\\u6570\\u4F53\\u6CA1\\u6709\\uFF08\\u5B83\\u4EEC\\u5177\\u6709\\u4E0E\",(0,e.jsx)(n.code,{children:\"var\"}),\"\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u76F8\\u540C\\u7684\\u63D0\\u5347\\u884C\\u4E3A\\uFF09\\u3002\\u6709\\u5173\\u63D0\\u5347\\u7684\\u66F4\\u591A\\u8BF4\\u660E\\uFF0C\\u8BF7\\u53C2\\u9605\\u5173\\u4E8E\",(0,e.jsx)(n.a,{href:\"/questions/quiz/explain-hoisting\",children:\"\\u63D0\\u5347\"}),\"\\u7684\\u6D4B\\u9A8C\\u95EE\\u9898\\u3002\\u5982\\u679C\\u5C1D\\u8BD5\\u5728\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u5B9A\\u4E49\\u4E4B\\u524D\\u8C03\\u7528\\u5B83\\uFF0C\\u5C06\\u4F1A\\u5F97\\u5230\\u4E00\\u4E2A\",(0,e.jsx)(n.code,{children:\"Uncaught TypeError: XXX is not a function\"}),\"\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51FD\\u6570\\u58F0\\u660E\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`foo(); // 'FOOOOO'\nfunction foo() {\n  console.log('FOOOOO');\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`foo(); // Uncaught TypeError: foo is not a function\nvar foo = function () {\n  console.log('FOOOOO');\n};\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u547D\\u540D\\u8303\\u56F4\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728\",(0,e.jsx)(n.code,{children:\"function\"}),\"\\u4E4B\\u540E\\u548C\\u62EC\\u53F7\\u4E4B\\u524D\\u5B9A\\u4E49\\u5B83\\u6765\\u547D\\u540D\\u3002\\u4F46\\u662F\\uFF0C\\u5F53\\u4F7F\\u7528\\u547D\\u540D\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u65F6\\uFF0C\\u51FD\\u6570\\u540D\\u79F0\\u53EA\\u80FD\\u5728\\u51FD\\u6570\\u672C\\u8EAB\\u5185\\u90E8\\u8BBF\\u95EE\\u3002\\u5C1D\\u8BD5\\u5728\\u5916\\u90E8\\u8BBF\\u95EE\\u5B83\\u5C06\\u5BFC\\u81F4\",(0,e.jsx)(n.code,{children:\"undefined\"}),\"\\uFF0C\\u8C03\\u7528\\u5B83\\u5C06\\u5BFC\\u81F4\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const myFunc = function namedFunc() {\n  console.log(namedFunc); // Works\n};\n\nmyFunc(); // Runs the function and logs the function reference\nconsole.log(namedFunc); // ReferenceError: namedFunc is not defined\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F55\\u65F6\\u4F7F\\u7528\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"\\u51FD\\u6570\\u58F0\\u660E\\uFF1A\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u60A8\\u60F3\\u5728\\u5168\\u5C40\\u8303\\u56F4\\u5185\\u521B\\u5EFA\\u4E00\\u4E2A\\u51FD\\u6570\\uFF0C\\u5E76\\u5728\\u6574\\u4E2A\\u5C01\\u95ED\\u8303\\u56F4\\u5185\\u4F7F\\u7528\\u5B83\\u65F6\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5982\\u679C\\u4E00\\u4E2A\\u51FD\\u6570\\u662F\\u53EF\\u91CD\\u7528\\u7684\\uFF0C\\u5E76\\u4E14\\u9700\\u8981\\u591A\\u6B21\\u8C03\\u7528\\u3002\"}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\uFF1A\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5982\\u679C\\u4E00\\u4E2A\\u51FD\\u6570\\u53EA\\u9700\\u8981\\u4E00\\u6B21\\u6216\\u5728\\u7279\\u5B9A\\u4E0A\\u4E0B\\u6587\\u4E2D\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u7528\\u4E8E\\u5C06\\u51FD\\u6570\\u53EF\\u7528\\u6027\\u9650\\u5236\\u4E3A\\u540E\\u7EED\\u4EE3\\u7801\\uFF0C\\u5E76\\u4FDD\\u6301\\u5C01\\u95ED\\u8303\\u56F4\\u7684\\u6E05\\u6D01\\u3002\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u603B\\u7684\\u6765\\u8BF4\\uFF0C\\u6700\\u597D\\u4F7F\\u7528\\u51FD\\u6570\\u58F0\\u660E\\u6765\\u907F\\u514D\\u786E\\u5B9A\\u662F\\u5426\\u53EF\\u4EE5\\u8C03\\u7528\\u51FD\\u6570\\u7684\\u7CBE\\u795E\\u8D1F\\u62C5\\u3002\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u7684\\u5B9E\\u9645\\u7528\\u6CD5\\u975E\\u5E38\\u7F55\\u89C1\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\",children:\"\\u51FD\\u6570\\u58F0\\u660E | MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function\",children:\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F | MDN\"})}),`\n`]})]})}function s(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,{...c,children:(0,e.jsx)(a,{...c})}):a(c)}return j(N);})();\n;return Component;"
 }
\ No newline at end of file
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 f389c6330..b2689a9ec 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-different-states-of-a-promise/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var j=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),g=(r,e)=>{for(var i in e)t(r,i,{get:e[i],enumerable:!0})},o=(r,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!u.call(r,s)&&s!==i&&t(r,s,{get:()=>e[s],enumerable:!(c=p(e,s))||c.enumerable});return r};var P=(r,e,i)=>(i=r!=null?a(f(r)):{},o(e||!r||!r.__esModule?t(i,\"default\",{value:r,enumerable:!0}):i,r)),v=r=>o(t({},\"__esModule\",{value:!0}),r);var d=j((S,l)=>{l.exports=_jsx_runtime});var _={};g(_,{default:()=>b,frontmatter:()=>x});var n=P(d()),x={title:\"Explain the different states of a Promise\"};function h(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" in JavaScript can be in one of three states: \",(0,n.jsx)(e.code,{children:\"pending\"}),\", \",(0,n.jsx)(e.code,{children:\"fulfilled\"}),\", or \",(0,n.jsx)(e.code,{children:\"rejected\"}),\". When a \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" is created, it starts in the \",(0,n.jsx)(e.code,{children:\"pending\"}),\" state. If the operation completes successfully, the \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" transitions to the \",(0,n.jsx)(e.code,{children:\"fulfilled\"}),\" state, and if it fails, it transitions to the \",(0,n.jsx)(e.code,{children:\"rejected\"}),\" state. Here's a quick example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  // some asynchronous operation\n  if (success) {\n    resolve('Success!');\n  } else {\n    reject('Error!');\n  }\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Different states of a Promise\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Pending\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When a \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" is first created, it is in the \",(0,n.jsx)(e.code,{children:\"pending\"}),\" state. This means that the asynchronous operation has not yet completed.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  // asynchronous operation\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Fulfilled\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" transitions to the \",(0,n.jsx)(e.code,{children:\"fulfilled\"}),\" state when the asynchronous operation completes successfully. The \",(0,n.jsx)(e.code,{children:\"resolve\"}),\" function is called to indicate this.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  resolve('Success!');\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Rejected\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" transitions to the \",(0,n.jsx)(e.code,{children:\"rejected\"}),\" state when the asynchronous operation fails. The \",(0,n.jsx)(e.code,{children:\"reject\"}),\" function is called to indicate this.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  reject('Error!');\n});\n`})}),`\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/Web/JavaScript/Reference/Global_Objects/Promise\",children:\"MDN Web Docs: Promise\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/promise-basics\",children:\"JavaScript.info: Promises\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://promisesaplus.com/\",children:\"Promise/A+ Specification\"})}),`\n`]})]})}function y(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(h,r)})):h(r)}var b=y;return v(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var P=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),g=(r,e)=>{for(var i in e)c(r,i,{get:e[i],enumerable:!0})},o=(r,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of f(e))!j.call(r,t)&&t!==i&&c(r,t,{get:()=>e[t],enumerable:!(s=m(e,t))||s.enumerable});return r};var v=(r,e,i)=>(i=r!=null?p(u(r)):{},o(e||!r||!r.__esModule?c(i,\"default\",{value:r,enumerable:!0}):i,r)),x=r=>o(c({},\"__esModule\",{value:!0}),r);var d=P((S,l)=>{l.exports=_jsx_runtime});var _={};g(_,{default:()=>a,frontmatter:()=>y});var n=v(d()),y={title:\"Explain the different states of a Promise\"};function h(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" in JavaScript can be in one of three states: \",(0,n.jsx)(e.code,{children:\"pending\"}),\", \",(0,n.jsx)(e.code,{children:\"fulfilled\"}),\", or \",(0,n.jsx)(e.code,{children:\"rejected\"}),\". When a \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" is created, it starts in the \",(0,n.jsx)(e.code,{children:\"pending\"}),\" state. If the operation completes successfully, the \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" transitions to the \",(0,n.jsx)(e.code,{children:\"fulfilled\"}),\" state, and if it fails, it transitions to the \",(0,n.jsx)(e.code,{children:\"rejected\"}),\" state. Here's a quick example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  // some asynchronous operation\n  if (success) {\n    resolve('Success!');\n  } else {\n    reject('Error!');\n  }\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Different states of a Promise\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Pending\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When a \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" is first created, it is in the \",(0,n.jsx)(e.code,{children:\"pending\"}),\" state. This means that the asynchronous operation has not yet completed.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  // asynchronous operation\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Fulfilled\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" transitions to the \",(0,n.jsx)(e.code,{children:\"fulfilled\"}),\" state when the asynchronous operation completes successfully. The \",(0,n.jsx)(e.code,{children:\"resolve\"}),\" function is called to indicate this.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  resolve('Success!');\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Rejected\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" transitions to the \",(0,n.jsx)(e.code,{children:\"rejected\"}),\" state when the asynchronous operation fails. The \",(0,n.jsx)(e.code,{children:\"reject\"}),\" function is called to indicate this.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  reject('Error!');\n});\n`})}),`\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/Web/JavaScript/Reference/Global_Objects/Promise\",children:\"MDN Web Docs: Promise\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/promise-basics\",children:\"JavaScript.info: Promises\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://promisesaplus.com/\",children:\"Promise/A+ Specification\"})}),`\n`]})]})}function a(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return x(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-different-states-of-a-promise/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-different-states-of-a-promise/zh-CN.json
index 4c6327260..3087aa3f8 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-different-states-of-a-promise/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-different-states-of-a-promise/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-different-states-of-a-promise/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),g=(r,e)=>{for(var c in e)o(r,c,{get:e[c],enumerable:!0})},s=(r,e,c,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!u.call(r,i)&&i!==c&&o(r,i,{get:()=>e[i],enumerable:!(l=m(e,i))||l.enumerable});return r};var P=(r,e,c)=>(c=r!=null?a(j(r)):{},s(e||!r||!r.__esModule?o(c,\"default\",{value:r,enumerable:!0}):c,r)),v=r=>s(o({},\"__esModule\",{value:!0}),r);var h=f((N,d)=>{d.exports=_jsx_runtime});var S={};g(S,{default:()=>b,frontmatter:()=>x});var n=P(h()),x={title:\"\\u89E3\\u91CA Promise \\u7684\\u4E0D\\u540C\\u72B6\\u6001\"};function t(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" \\u53EF\\u4EE5\\u5904\\u4E8E\\u4E09\\u79CD\\u72B6\\u6001\\u4E4B\\u4E00\\uFF1A\",(0,n.jsx)(e.code,{children:\"pending\"}),\"\\uFF08\\u5F85\\u5B9A\\uFF09\\u3001\",(0,n.jsx)(e.code,{children:\"fulfilled\"}),\"\\uFF08\\u5DF2\\u5B9E\\u73B0\\uFF09\\u6216 \",(0,n.jsx)(e.code,{children:\"rejected\"}),\"\\uFF08\\u5DF2\\u62D2\\u7EDD\\uFF09\\u3002\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" \\u65F6\\uFF0C\\u5B83\\u9996\\u5148\\u5904\\u4E8E \",(0,n.jsx)(e.code,{children:\"pending\"}),\" \\u72B6\\u6001\\u3002\\u5982\\u679C\\u64CD\\u4F5C\\u6210\\u529F\\u5B8C\\u6210\\uFF0C\",(0,n.jsx)(e.code,{children:\"Promise\"}),\" \\u5C06\\u8F6C\\u6362\\u4E3A \",(0,n.jsx)(e.code,{children:\"fulfilled\"}),\" \\u72B6\\u6001\\uFF0C\\u5982\\u679C\\u5931\\u8D25\\uFF0C\\u5219\\u8F6C\\u6362\\u4E3A \",(0,n.jsx)(e.code,{children:\"rejected\"}),\" \\u72B6\\u6001\\u3002 \\u8FD9\\u662F\\u4E00\\u4E2A\\u5FEB\\u901F\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  // some asynchronous operation\n  if (success) {\n    resolve('Success!');\n  } else {\n    reject('Error!');\n  }\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Promise \\u7684\\u4E0D\\u540C\\u72B6\\u6001\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5F85\\u5B9A\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u9996\\u6B21\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" \\u65F6\\uFF0C\\u5B83\\u5904\\u4E8E \",(0,n.jsx)(e.code,{children:\"pending\"}),\" \\u72B6\\u6001\\u3002 \\u8FD9\\u610F\\u5473\\u7740\\u5F02\\u6B65\\u64CD\\u4F5C\\u5C1A\\u672A\\u5B8C\\u6210\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  // asynchronous operation\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5DF2\\u5B9E\\u73B0\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u5F02\\u6B65\\u64CD\\u4F5C\\u6210\\u529F\\u5B8C\\u6210\\u65F6\\uFF0C\",(0,n.jsx)(e.code,{children:\"Promise\"}),\" \\u8F6C\\u6362\\u4E3A \",(0,n.jsx)(e.code,{children:\"fulfilled\"}),\" \\u72B6\\u6001\\u3002 \\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"resolve\"}),\" \\u51FD\\u6570\\u6765\\u6307\\u793A\\u8FD9\\u4E00\\u70B9\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  resolve('Success!');\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5DF2\\u62D2\\u7EDD\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u5F02\\u6B65\\u64CD\\u4F5C\\u5931\\u8D25\\u65F6\\uFF0C\",(0,n.jsx)(e.code,{children:\"Promise\"}),\" \\u8F6C\\u6362\\u4E3A \",(0,n.jsx)(e.code,{children:\"rejected\"}),\" \\u72B6\\u6001\\u3002 \\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"reject\"}),\" \\u51FD\\u6570\\u6765\\u6307\\u793A\\u8FD9\\u4E00\\u70B9\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  reject('Error!');\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Promise\",children:\"MDN Web Docs: Promise\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/promise-basics\",children:\"JavaScript.info: Promises\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://promisesaplus.com/\",children:\"Promise/A+ Specification\"})}),`\n`]})]})}function _(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(t,r)})):t(r)}var b=_;return v(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var P=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),g=(r,e)=>{for(var c in e)o(r,c,{get:e[c],enumerable:!0})},d=(r,e,c,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!f.call(r,i)&&i!==c&&o(r,i,{get:()=>e[i],enumerable:!(l=p(e,i))||l.enumerable});return r};var v=(r,e,c)=>(c=r!=null?m(j(r)):{},d(e||!r||!r.__esModule?o(c,\"default\",{value:r,enumerable:!0}):c,r)),x=r=>d(o({},\"__esModule\",{value:!0}),r);var h=P((w,s)=>{s.exports=_jsx_runtime});var S={};g(S,{default:()=>a,frontmatter:()=>_});var n=v(h()),_={title:\"\\u89E3\\u91CA Promise \\u7684\\u4E0D\\u540C\\u72B6\\u6001\"};function t(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" \\u53EF\\u4EE5\\u5904\\u4E8E\\u4E09\\u79CD\\u72B6\\u6001\\u4E4B\\u4E00\\uFF1A\",(0,n.jsx)(e.code,{children:\"pending\"}),\"\\uFF08\\u5F85\\u5B9A\\uFF09\\u3001\",(0,n.jsx)(e.code,{children:\"fulfilled\"}),\"\\uFF08\\u5DF2\\u5B9E\\u73B0\\uFF09\\u6216 \",(0,n.jsx)(e.code,{children:\"rejected\"}),\"\\uFF08\\u5DF2\\u62D2\\u7EDD\\uFF09\\u3002\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" \\u65F6\\uFF0C\\u5B83\\u9996\\u5148\\u5904\\u4E8E \",(0,n.jsx)(e.code,{children:\"pending\"}),\" \\u72B6\\u6001\\u3002\\u5982\\u679C\\u64CD\\u4F5C\\u6210\\u529F\\u5B8C\\u6210\\uFF0C\",(0,n.jsx)(e.code,{children:\"Promise\"}),\" \\u5C06\\u8F6C\\u6362\\u4E3A \",(0,n.jsx)(e.code,{children:\"fulfilled\"}),\" \\u72B6\\u6001\\uFF0C\\u5982\\u679C\\u5931\\u8D25\\uFF0C\\u5219\\u8F6C\\u6362\\u4E3A \",(0,n.jsx)(e.code,{children:\"rejected\"}),\" \\u72B6\\u6001\\u3002 \\u8FD9\\u662F\\u4E00\\u4E2A\\u5FEB\\u901F\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  // some asynchronous operation\n  if (success) {\n    resolve('Success!');\n  } else {\n    reject('Error!');\n  }\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Promise \\u7684\\u4E0D\\u540C\\u72B6\\u6001\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5F85\\u5B9A\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u9996\\u6B21\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" \\u65F6\\uFF0C\\u5B83\\u5904\\u4E8E \",(0,n.jsx)(e.code,{children:\"pending\"}),\" \\u72B6\\u6001\\u3002 \\u8FD9\\u610F\\u5473\\u7740\\u5F02\\u6B65\\u64CD\\u4F5C\\u5C1A\\u672A\\u5B8C\\u6210\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  // asynchronous operation\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5DF2\\u5B9E\\u73B0\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u5F02\\u6B65\\u64CD\\u4F5C\\u6210\\u529F\\u5B8C\\u6210\\u65F6\\uFF0C\",(0,n.jsx)(e.code,{children:\"Promise\"}),\" \\u8F6C\\u6362\\u4E3A \",(0,n.jsx)(e.code,{children:\"fulfilled\"}),\" \\u72B6\\u6001\\u3002 \\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"resolve\"}),\" \\u51FD\\u6570\\u6765\\u6307\\u793A\\u8FD9\\u4E00\\u70B9\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  resolve('Success!');\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5DF2\\u62D2\\u7EDD\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u5F02\\u6B65\\u64CD\\u4F5C\\u5931\\u8D25\\u65F6\\uFF0C\",(0,n.jsx)(e.code,{children:\"Promise\"}),\" \\u8F6C\\u6362\\u4E3A \",(0,n.jsx)(e.code,{children:\"rejected\"}),\" \\u72B6\\u6001\\u3002 \\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"reject\"}),\" \\u51FD\\u6570\\u6765\\u6307\\u793A\\u8FD9\\u4E00\\u70B9\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  reject('Error!');\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Promise\",children:\"MDN Web Docs: Promise\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/promise-basics\",children:\"JavaScript.info: Promises\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://promisesaplus.com/\",children:\"Promise/A+ Specification\"})}),`\n`]})]})}function a(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(t,{...r})}):t(r)}return x(S);})();\n;return Component;"
 }
\ No newline at end of file
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 fe17e4000..51a85d05d 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),b=(i,e)=>{for(var c in e)r(i,c,{get:e[c],enumerable:!0})},l=(i,e,c,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of g(e))!f.call(i,o)&&o!==c&&r(i,o,{get:()=>e[o],enumerable:!(t=u(e,o))||t.enumerable});return i};var w=(i,e,c)=>(c=i!=null?a(p(i)):{},l(e||!i||!i.__esModule?r(c,\"default\",{value:i,enumerable:!0}):c,i)),j=i=>l(r({},\"__esModule\",{value:!0}),i);var h=m((I,d)=>{d.exports=_jsx_runtime});var N={};b(N,{default:()=>v,frontmatter:()=>y});var n=w(h()),y={title:\"Explain the different ways the `this` keyword can be bound\"};function s(i){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",ul:\"ul\",li:\"li\",hr:\"hr\",pre:\"pre\",h3:\"h3\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"this\"}),\" keyword in JavaScript can be bound in several ways:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Default binding: In non-strict mode, \",(0,n.jsx)(e.code,{children:\"this\"}),\" refers to the global object (window in browsers). In strict mode, \",(0,n.jsx)(e.code,{children:\"this\"}),\" is \",(0,n.jsx)(e.code,{children:\"undefined\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Implicit binding: When a function is called as a method of an object, \",(0,n.jsx)(e.code,{children:\"this\"}),\" refers to the object.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Explicit binding: Using \",(0,n.jsx)(e.code,{children:\"call\"}),\", \",(0,n.jsx)(e.code,{children:\"apply\"}),\", or \",(0,n.jsx)(e.code,{children:\"bind\"}),\" methods to explicitly set \",(0,n.jsx)(e.code,{children:\"this\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"New binding: When a function is used as a constructor with the \",(0,n.jsx)(e.code,{children:\"new\"}),\" keyword, \",(0,n.jsx)(e.code,{children:\"this\"}),\" refers to the newly created object.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Arrow functions: Arrow functions do not have their own \",(0,n.jsx)(e.code,{children:\"this\"}),\" and inherit \",(0,n.jsx)(e.code,{children:\"this\"}),\" from the surrounding lexical context.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Default binding\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In non-strict mode, if a function is called without any context, \",(0,n.jsx)(e.code,{children:\"this\"}),\" refers to the global object (window in browsers). In strict mode, \",(0,n.jsx)(e.code,{children:\"this\"}),\" is \",(0,n.jsx)(e.code,{children:\"undefined\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function showThis() {\n  console.log(this);\n}\n\nshowThis(); // In non-strict mode: window, in strict mode: undefined\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Implicit binding\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When a function is called as a method of an object, \",(0,n.jsx)(e.code,{children:\"this\"}),\" refers to the object.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  name: 'Alice',\n  greet: function () {\n    console.log(this.name);\n  },\n};\n\nobj.greet(); // 'Alice'\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Explicit binding\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"call\"}),\", \",(0,n.jsx)(e.code,{children:\"apply\"}),\", or \",(0,n.jsx)(e.code,{children:\"bind\"}),\" methods, you can explicitly set \",(0,n.jsx)(e.code,{children:\"this\"}),\".\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"call\"})]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet() {\n  console.log(this.name);\n}\n\nconst person = { name: 'Bob' };\n\ngreet.call(person); // 'Bob'\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"apply\"})]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet(greeting) {\n  console.log(greeting + ', ' + this.name);\n}\n\nconst person = { name: 'Charlie' };\n\ngreet.apply(person, ['Hello']); // 'Hello, Charlie'\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"bind\"})]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet() {\n  console.log(this.name);\n}\n\nconst person = { name: 'Dave' };\n\nconst boundGreet = greet.bind(person);\nboundGreet(); // 'Dave'\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"New binding\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When a function is used as a constructor with the \",(0,n.jsx)(e.code,{children:\"new\"}),\" keyword, \",(0,n.jsx)(e.code,{children:\"this\"}),\" refers to the newly created object.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst person = new Person('Eve');\nconsole.log(person.name); // 'Eve'\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Arrow functions\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Arrow functions do not have their own \",(0,n.jsx)(e.code,{children:\"this\"}),\" and inherit \",(0,n.jsx)(e.code,{children:\"this\"}),\" from the surrounding lexical context.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  firstName: 'Frank',\n  greet: () => {\n    console.log(this.firstName);\n  },\n};\n\nobj.greet(); // undefined, because \\`this\\` is inherited from the global scope\n`})}),`\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/Web/JavaScript/Reference/Operators/this\",children:\"MDN Web Docs: this\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/this\",children:\"JavaScript.info: This\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/this%20%26%20object%20prototypes\",children:\"You Don't Know JS: this & Object Prototypes\"})}),`\n`]})]})}function x(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(s,i)})):s(i)}var v=x;return j(N);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var b=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),w=(i,e)=>{for(var c in e)r(i,c,{get:e[c],enumerable:!0})},l=(i,e,c,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!m.call(i,o)&&o!==c&&r(i,o,{get:()=>e[o],enumerable:!(t=g(e,o))||t.enumerable});return i};var j=(i,e,c)=>(c=i!=null?u(f(i)):{},l(e||!i||!i.__esModule?r(c,\"default\",{value:i,enumerable:!0}):c,i)),y=i=>l(r({},\"__esModule\",{value:!0}),i);var h=b((D,d)=>{d.exports=_jsx_runtime});var v={};w(v,{default:()=>a,frontmatter:()=>x});var n=j(h()),x={title:\"Explain the different ways the `this` keyword can be bound\"};function s(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"this\"}),\" keyword in JavaScript can be bound in several ways:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Default binding: In non-strict mode, \",(0,n.jsx)(e.code,{children:\"this\"}),\" refers to the global object (window in browsers). In strict mode, \",(0,n.jsx)(e.code,{children:\"this\"}),\" is \",(0,n.jsx)(e.code,{children:\"undefined\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Implicit binding: When a function is called as a method of an object, \",(0,n.jsx)(e.code,{children:\"this\"}),\" refers to the object.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Explicit binding: Using \",(0,n.jsx)(e.code,{children:\"call\"}),\", \",(0,n.jsx)(e.code,{children:\"apply\"}),\", or \",(0,n.jsx)(e.code,{children:\"bind\"}),\" methods to explicitly set \",(0,n.jsx)(e.code,{children:\"this\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"New binding: When a function is used as a constructor with the \",(0,n.jsx)(e.code,{children:\"new\"}),\" keyword, \",(0,n.jsx)(e.code,{children:\"this\"}),\" refers to the newly created object.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Arrow functions: Arrow functions do not have their own \",(0,n.jsx)(e.code,{children:\"this\"}),\" and inherit \",(0,n.jsx)(e.code,{children:\"this\"}),\" from the surrounding lexical context.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Default binding\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In non-strict mode, if a function is called without any context, \",(0,n.jsx)(e.code,{children:\"this\"}),\" refers to the global object (window in browsers). In strict mode, \",(0,n.jsx)(e.code,{children:\"this\"}),\" is \",(0,n.jsx)(e.code,{children:\"undefined\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function showThis() {\n  console.log(this);\n}\n\nshowThis(); // In non-strict mode: window, in strict mode: undefined\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Implicit binding\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When a function is called as a method of an object, \",(0,n.jsx)(e.code,{children:\"this\"}),\" refers to the object.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  name: 'Alice',\n  greet: function () {\n    console.log(this.name);\n  },\n};\n\nobj.greet(); // 'Alice'\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Explicit binding\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"call\"}),\", \",(0,n.jsx)(e.code,{children:\"apply\"}),\", or \",(0,n.jsx)(e.code,{children:\"bind\"}),\" methods, you can explicitly set \",(0,n.jsx)(e.code,{children:\"this\"}),\".\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"call\"})]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet() {\n  console.log(this.name);\n}\n\nconst person = { name: 'Bob' };\n\ngreet.call(person); // 'Bob'\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"apply\"})]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet(greeting) {\n  console.log(greeting + ', ' + this.name);\n}\n\nconst person = { name: 'Charlie' };\n\ngreet.apply(person, ['Hello']); // 'Hello, Charlie'\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"bind\"})]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet() {\n  console.log(this.name);\n}\n\nconst person = { name: 'Dave' };\n\nconst boundGreet = greet.bind(person);\nboundGreet(); // 'Dave'\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"New binding\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When a function is used as a constructor with the \",(0,n.jsx)(e.code,{children:\"new\"}),\" keyword, \",(0,n.jsx)(e.code,{children:\"this\"}),\" refers to the newly created object.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst person = new Person('Eve');\nconsole.log(person.name); // 'Eve'\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Arrow functions\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Arrow functions do not have their own \",(0,n.jsx)(e.code,{children:\"this\"}),\" and inherit \",(0,n.jsx)(e.code,{children:\"this\"}),\" from the surrounding lexical context.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  firstName: 'Frank',\n  greet: () => {\n    console.log(this.firstName);\n  },\n};\n\nobj.greet(); // undefined, because \\`this\\` is inherited from the global scope\n`})}),`\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/Web/JavaScript/Reference/Operators/this\",children:\"MDN Web Docs: this\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/this\",children:\"JavaScript.info: This\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/this%20%26%20object%20prototypes\",children:\"You Don't Know JS: this & Object Prototypes\"})}),`\n`]})]})}function a(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(s,{...i})}):s(i)}return y(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-different-ways-the-this-keyword-can-be-bound/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-different-ways-the-this-keyword-can-be-bound/zh-CN.json
index 6b36b1345..9fe2a813e 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-different-ways-the-this-keyword-can-be-bound/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-different-ways-the-this-keyword-can-be-bound/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-different-ways-the-this-keyword-can-be-bound/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),j=(c,n)=>{for(var i in n)r(c,i,{get:n[i],enumerable:!0})},o=(c,n,i,d)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of p(n))!m.call(c,l)&&l!==i&&r(c,l,{get:()=>n[l],enumerable:!(d=g(n,l))||d.enumerable});return c};var b=(c,n,i)=>(i=c!=null?a(u(c)):{},o(n||!c||!c.__esModule?r(i,\"default\",{value:c,enumerable:!0}):i,c)),w=c=>o(r({},\"__esModule\",{value:!0}),c);var t=f((_,h)=>{h.exports=_jsx_runtime});var y={};j(y,{default:()=>x,frontmatter:()=>v});var e=b(t()),v={title:\"\\u89E3\\u91CA `this` \\u5173\\u952E\\u5B57\\u53EF\\u4EE5\\u7ED1\\u5B9A\\u7684\\u4E0D\\u540C\\u65B9\\u5F0F\"};function s(c){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",ul:\"ul\",li:\"li\",hr:\"hr\",pre:\"pre\",h3:\"h3\",a:\"a\"},c.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\\u5728 JavaScript \\u4E2D\\u53EF\\u4EE5\\u901A\\u8FC7\\u51E0\\u79CD\\u65B9\\u5F0F\\u7ED1\\u5B9A:\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"\\u9ED8\\u8BA4\\u7ED1\\u5B9A\\uFF1A\\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u5411\\u5168\\u5C40\\u5BF9\\u8C61\\uFF08\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u662F window\\uFF09\\u3002\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u662F \",(0,e.jsx)(n.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u9690\\u5F0F\\u7ED1\\u5B9A\\uFF1A\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A\\u5BF9\\u8C61\\u7684\\u65B9\\u6CD5\\u88AB\\u8C03\\u7528\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u5411\\u8BE5\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u663E\\u5F0F\\u7ED1\\u5B9A\\uFF1A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"call\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"apply\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"bind\"}),\" \\u65B9\\u6CD5\\u663E\\u5F0F\\u8BBE\\u7F6E \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"new \\u7ED1\\u5B9A\\uFF1A\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u4E0E \",(0,e.jsx)(n.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u4E00\\u8D77\\u7528\\u4F5C\\u6784\\u9020\\u51FD\\u6570\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u5411\\u65B0\\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\uFF1A\\u7BAD\\u5934\\u51FD\\u6570\\u6CA1\\u6709\\u81EA\\u5DF1\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\uFF0C\\u5E76\\u4ECE\\u5468\\u56F4\\u7684\\u8BCD\\u6CD5\\u73AF\\u5883\\u7EE7\\u627F \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u9ED8\\u8BA4\\u7ED1\\u5B9A\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF0C\\u5982\\u679C\\u4E00\\u4E2A\\u51FD\\u6570\\u5728\\u6CA1\\u6709\\u4EFB\\u4F55\\u4E0A\\u4E0B\\u6587\\u7684\\u60C5\\u51B5\\u4E0B\\u88AB\\u8C03\\u7528\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u5411\\u5168\\u5C40\\u5BF9\\u8C61\\uFF08\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u662F window\\uFF09\\u3002\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u662F \",(0,e.jsx)(n.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function showThis() {\n  console.log(this);\n}\n\nshowThis(); // \\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF1Awindow\\uFF0C\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF1Aundefined\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u9690\\u5F0F\\u7ED1\\u5B9A\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A\\u5BF9\\u8C61\\u7684\\u65B9\\u6CD5\\u88AB\\u8C03\\u7528\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u5411\\u8BE5\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  name: 'Alice',\n  greet: function () {\n    console.log(this.name);\n  },\n};\n\nobj.greet(); // 'Alice'\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u663E\\u5F0F\\u7ED1\\u5B9A\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"call\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"apply\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"bind\"}),\" \\u65B9\\u6CD5\\uFF0C\\u4F60\\u53EF\\u4EE5\\u663E\\u5F0F\\u5730\\u8BBE\\u7F6E \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"call\"})]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet() {\n  console.log(this.name);\n}\n\nconst person = { name: 'Bob' };\n\ngreet.call(person); // 'Bob'\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"apply\"})]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet(greeting) {\n  console.log(greeting + ', ' + this.name);\n}\n\nconst person = { name: 'Charlie' };\n\ngreet.apply(person, ['Hello']); // 'Hello, Charlie'\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"bind\"})]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet() {\n  console.log(this.name);\n}\n\nconst person = { name: 'Dave' };\n\nconst boundGreet = greet.bind(person);\nboundGreet(); // 'Dave'\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"New \\u7ED1\\u5B9A\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u4E0E \",(0,e.jsx)(n.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u4E00\\u8D77\\u7528\\u4F5C\\u6784\\u9020\\u51FD\\u6570\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F\\u65B0\\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst person = new Person('Eve');\nconsole.log(person.name); // 'Eve'\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7BAD\\u5934\\u51FD\\u6570\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u6CA1\\u6709\\u81EA\\u5DF1\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\uFF0C\\u5E76\\u4ECE\\u5468\\u56F4\\u7684\\u8BCD\\u6CD5\\u4E0A\\u4E0B\\u6587\\u4E2D\\u7EE7\\u627F \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  firstName: 'Frank',\n  greet: () => {\n    console.log(this.firstName);\n  },\n};\n\nobj.greet(); // undefined, because \\`this\\` is inherited from the global scope\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/this%20%26%20object%20prototypes\",children:\"You Don't Know JS: this & Object Prototypes\"})}),`\n`]})]})}function N(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,Object.assign({},c,{children:(0,e.jsx)(s,c)})):s(c)}var x=N;return w(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var j=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),b=(c,n)=>{for(var i in n)r(c,i,{get:n[i],enumerable:!0})},o=(c,n,i,d)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of u(n))!f.call(c,l)&&l!==i&&r(c,l,{get:()=>n[l],enumerable:!(d=g(n,l))||d.enumerable});return c};var w=(c,n,i)=>(i=c!=null?p(m(c)):{},o(n||!c||!c.__esModule?r(i,\"default\",{value:c,enumerable:!0}):i,c)),v=c=>o(r({},\"__esModule\",{value:!0}),c);var t=j((D,h)=>{h.exports=_jsx_runtime});var x={};b(x,{default:()=>a,frontmatter:()=>N});var e=w(t()),N={title:\"\\u89E3\\u91CA `this` \\u5173\\u952E\\u5B57\\u53EF\\u4EE5\\u7ED1\\u5B9A\\u7684\\u4E0D\\u540C\\u65B9\\u5F0F\"};function s(c){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\\u5728 JavaScript \\u4E2D\\u53EF\\u4EE5\\u901A\\u8FC7\\u51E0\\u79CD\\u65B9\\u5F0F\\u7ED1\\u5B9A:\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"\\u9ED8\\u8BA4\\u7ED1\\u5B9A\\uFF1A\\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u5411\\u5168\\u5C40\\u5BF9\\u8C61\\uFF08\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u662F window\\uFF09\\u3002\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u662F \",(0,e.jsx)(n.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u9690\\u5F0F\\u7ED1\\u5B9A\\uFF1A\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A\\u5BF9\\u8C61\\u7684\\u65B9\\u6CD5\\u88AB\\u8C03\\u7528\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u5411\\u8BE5\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u663E\\u5F0F\\u7ED1\\u5B9A\\uFF1A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"call\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"apply\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"bind\"}),\" \\u65B9\\u6CD5\\u663E\\u5F0F\\u8BBE\\u7F6E \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"new \\u7ED1\\u5B9A\\uFF1A\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u4E0E \",(0,e.jsx)(n.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u4E00\\u8D77\\u7528\\u4F5C\\u6784\\u9020\\u51FD\\u6570\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u5411\\u65B0\\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\uFF1A\\u7BAD\\u5934\\u51FD\\u6570\\u6CA1\\u6709\\u81EA\\u5DF1\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\uFF0C\\u5E76\\u4ECE\\u5468\\u56F4\\u7684\\u8BCD\\u6CD5\\u73AF\\u5883\\u7EE7\\u627F \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u9ED8\\u8BA4\\u7ED1\\u5B9A\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF0C\\u5982\\u679C\\u4E00\\u4E2A\\u51FD\\u6570\\u5728\\u6CA1\\u6709\\u4EFB\\u4F55\\u4E0A\\u4E0B\\u6587\\u7684\\u60C5\\u51B5\\u4E0B\\u88AB\\u8C03\\u7528\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u5411\\u5168\\u5C40\\u5BF9\\u8C61\\uFF08\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u662F window\\uFF09\\u3002\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u662F \",(0,e.jsx)(n.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function showThis() {\n  console.log(this);\n}\n\nshowThis(); // \\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF1Awindow\\uFF0C\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF1Aundefined\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u9690\\u5F0F\\u7ED1\\u5B9A\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A\\u5BF9\\u8C61\\u7684\\u65B9\\u6CD5\\u88AB\\u8C03\\u7528\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u5411\\u8BE5\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  name: 'Alice',\n  greet: function () {\n    console.log(this.name);\n  },\n};\n\nobj.greet(); // 'Alice'\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u663E\\u5F0F\\u7ED1\\u5B9A\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"call\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"apply\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"bind\"}),\" \\u65B9\\u6CD5\\uFF0C\\u4F60\\u53EF\\u4EE5\\u663E\\u5F0F\\u5730\\u8BBE\\u7F6E \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"call\"})]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet() {\n  console.log(this.name);\n}\n\nconst person = { name: 'Bob' };\n\ngreet.call(person); // 'Bob'\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"apply\"})]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet(greeting) {\n  console.log(greeting + ', ' + this.name);\n}\n\nconst person = { name: 'Charlie' };\n\ngreet.apply(person, ['Hello']); // 'Hello, Charlie'\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"bind\"})]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet() {\n  console.log(this.name);\n}\n\nconst person = { name: 'Dave' };\n\nconst boundGreet = greet.bind(person);\nboundGreet(); // 'Dave'\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"New \\u7ED1\\u5B9A\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u4E0E \",(0,e.jsx)(n.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u4E00\\u8D77\\u7528\\u4F5C\\u6784\\u9020\\u51FD\\u6570\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F\\u65B0\\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst person = new Person('Eve');\nconsole.log(person.name); // 'Eve'\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7BAD\\u5934\\u51FD\\u6570\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u6CA1\\u6709\\u81EA\\u5DF1\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\uFF0C\\u5E76\\u4ECE\\u5468\\u56F4\\u7684\\u8BCD\\u6CD5\\u4E0A\\u4E0B\\u6587\\u4E2D\\u7EE7\\u627F \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  firstName: 'Frank',\n  greet: () => {\n    console.log(this.firstName);\n  },\n};\n\nobj.greet(); // undefined, because \\`this\\` is inherited from the global scope\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/this%20%26%20object%20prototypes\",children:\"You Don't Know JS: this & Object Prototypes\"})}),`\n`]})]})}function a(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,{...c,children:(0,e.jsx)(s,{...c})}):s(c)}return v(x);})();\n;return Component;"
 }
\ No newline at end of file
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 4dbbef82a..05b7d2356 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-event-phases-in-a-browser/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var m=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var r in e)i(n,r,{get:e[r],enumerable:!0})},s=(n,e,r,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of g(e))!v.call(n,a)&&a!==r&&i(n,a,{get:()=>e[a],enumerable:!(h=p(e,a))||h.enumerable});return n};var f=(n,e,r)=>(r=n!=null?d(u(n)):{},s(e||!n||!n.__esModule?i(r,\"default\",{value:n,enumerable:!0}):r,n)),w=n=>s(i({},\"__esModule\",{value:!0}),n);var l=m((x,o)=>{o.exports=_jsx_runtime});var _={};b(_,{default:()=>D,frontmatter:()=>E});var t=f(l()),E={title:\"Explain the event phases in a browser\"};function c(n){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"In a browser, events go through three phases: capturing, target, and bubbling. During the capturing phase, the event travels from the root to the target element. In the target phase, the event reaches the target element. Finally, in the bubbling phase, the event travels back up from the target element to the root. You can control event handling using \",(0,t.jsx)(e.code,{children:\"addEventListener\"}),\" with the \",(0,t.jsx)(e.code,{children:\"capture\"}),\" option.\"]}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"Event phases in a browser\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Capturing phase\"}),`\n`,(0,t.jsx)(e.p,{children:\"The capturing phase, also known as the trickling phase, is the first phase of event propagation. During this phase, the event starts from the root of the DOM tree and travels down to the target element. Event listeners registered for this phase will be triggered in the order from the outermost ancestor to the target element.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`element.addEventListener('click', handler, true); // true indicates capturing phase\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Target phase\"}),`\n`,(0,t.jsx)(e.p,{children:\"The target phase is the second phase of event propagation. In this phase, the event has reached the target element itself. Event listeners registered directly on the target element will be triggered during this phase.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`element.addEventListener('click', handler); // default is target phase\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Bubbling phase\"}),`\n`,(0,t.jsx)(e.p,{children:\"The bubbling phase is the final phase of event propagation. During this phase, the event travels back up from the target element to the root of the DOM tree. Event listeners registered for this phase will be triggered in the order from the target element to the outermost ancestor.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`element.addEventListener('click', handler, false); // false indicates bubbling phase\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Controlling event propagation\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"You can control event propagation using methods like \",(0,t.jsx)(e.code,{children:\"stopPropagation\"}),\" and \",(0,t.jsx)(e.code,{children:\"stopImmediatePropagation\"}),\". These methods can be called within an event handler to stop the event from propagating further.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`element.addEventListener('click', function (event) {\n  event.stopPropagation(); // Stops the event from propagating further\n});\n`})}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture\",children:\"MDN Web Docs: Event bubbling and capturing\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://javascript.info/bubbling-and-capturing\",children:\"JavaScript.info: Bubbling and capturing\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://www.w3.org/TR/DOM-Level-3-Events/#event-flow\",children:\"W3C: DOM Level 3 Events Specification\"})}),`\n`]})]})}function j(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(c,n)})):c(n)}var D=j;return w(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var b=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var r in e)i(n,r,{get:e[r],enumerable:!0})},s=(n,e,r,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!m.call(n,a)&&a!==r&&i(n,a,{get:()=>e[a],enumerable:!(h=g(e,a))||h.enumerable});return n};var w=(n,e,r)=>(r=n!=null?p(v(n)):{},s(e||!n||!n.__esModule?i(r,\"default\",{value:n,enumerable:!0}):r,n)),E=n=>s(i({},\"__esModule\",{value:!0}),n);var l=b((k,o)=>{o.exports=_jsx_runtime});var _={};f(_,{default:()=>d,frontmatter:()=>D});var t=w(l()),D={title:\"Explain the event phases in a browser\"};function c(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"In a browser, events go through three phases: capturing, target, and bubbling. During the capturing phase, the event travels from the root to the target element. In the target phase, the event reaches the target element. Finally, in the bubbling phase, the event travels back up from the target element to the root. You can control event handling using \",(0,t.jsx)(e.code,{children:\"addEventListener\"}),\" with the \",(0,t.jsx)(e.code,{children:\"capture\"}),\" option.\"]}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"Event phases in a browser\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Capturing phase\"}),`\n`,(0,t.jsx)(e.p,{children:\"The capturing phase, also known as the trickling phase, is the first phase of event propagation. During this phase, the event starts from the root of the DOM tree and travels down to the target element. Event listeners registered for this phase will be triggered in the order from the outermost ancestor to the target element.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`element.addEventListener('click', handler, true); // true indicates capturing phase\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Target phase\"}),`\n`,(0,t.jsx)(e.p,{children:\"The target phase is the second phase of event propagation. In this phase, the event has reached the target element itself. Event listeners registered directly on the target element will be triggered during this phase.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`element.addEventListener('click', handler); // default is target phase\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Bubbling phase\"}),`\n`,(0,t.jsx)(e.p,{children:\"The bubbling phase is the final phase of event propagation. During this phase, the event travels back up from the target element to the root of the DOM tree. Event listeners registered for this phase will be triggered in the order from the target element to the outermost ancestor.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`element.addEventListener('click', handler, false); // false indicates bubbling phase\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Controlling event propagation\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"You can control event propagation using methods like \",(0,t.jsx)(e.code,{children:\"stopPropagation\"}),\" and \",(0,t.jsx)(e.code,{children:\"stopImmediatePropagation\"}),\". These methods can be called within an event handler to stop the event from propagating further.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`element.addEventListener('click', function (event) {\n  event.stopPropagation(); // Stops the event from propagating further\n});\n`})}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture\",children:\"MDN Web Docs: Event bubbling and capturing\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://javascript.info/bubbling-and-capturing\",children:\"JavaScript.info: Bubbling and capturing\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://www.w3.org/TR/DOM-Level-3-Events/#event-flow\",children:\"W3C: DOM Level 3 Events Specification\"})}),`\n`]})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(c,{...n})}):c(n)}return E(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-event-phases-in-a-browser/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-event-phases-in-a-browser/zh-CN.json
index 4d6a06271..5fa8c7357 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-event-phases-in-a-browser/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-event-phases-in-a-browser/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-event-phases-in-a-browser/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var o=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var v=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),b=(r,e)=>{for(var t in e)c(r,t,{get:e[t],enumerable:!0})},l=(r,e,t,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!m.call(r,i)&&i!==t&&c(r,i,{get:()=>e[i],enumerable:!(a=p(e,i))||a.enumerable});return r};var f=(r,e,t)=>(t=r!=null?o(g(r)):{},l(e||!r||!r.__esModule?c(t,\"default\",{value:r,enumerable:!0}):t,r)),j=r=>l(c({},\"__esModule\",{value:!0}),r);var h=v((M,d)=>{d.exports=_jsx_runtime});var D={};b(D,{default:()=>x,frontmatter:()=>_});var n=f(h()),_={title:\"\\u89E3\\u91CA\\u6D4F\\u89C8\\u5668\\u4E2D\\u7684\\u4E8B\\u4EF6\\u9636\\u6BB5\"};function s(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\uFF0C\\u4E8B\\u4EF6\\u7ECF\\u5386\\u4E09\\u4E2A\\u9636\\u6BB5\\uFF1A\\u6355\\u83B7\\u3001\\u76EE\\u6807\\u548C\\u5192\\u6CE1\\u3002\\u5728\\u6355\\u83B7\\u9636\\u6BB5\\uFF0C\\u4E8B\\u4EF6\\u4ECE\\u6839\\u8282\\u70B9\\u4F20\\u9012\\u5230\\u76EE\\u6807\\u5143\\u7D20\\u3002\\u5728\\u76EE\\u6807\\u9636\\u6BB5\\uFF0C\\u4E8B\\u4EF6\\u5230\\u8FBE\\u76EE\\u6807\\u5143\\u7D20\\u3002\\u6700\\u540E\\uFF0C\\u5728\\u5192\\u6CE1\\u9636\\u6BB5\\uFF0C\\u4E8B\\u4EF6\\u4ECE\\u76EE\\u6807\\u5143\\u7D20\\u4F20\\u9012\\u56DE\\u6839\\u8282\\u70B9\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5E26\\u6709 \",(0,n.jsx)(e.code,{children:\"capture\"}),\" \\u9009\\u9879\\u7684 \",(0,n.jsx)(e.code,{children:\"addEventListener\"}),\" \\u6765\\u63A7\\u5236\\u4E8B\\u4EF6\\u5904\\u7406\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6D4F\\u89C8\\u5668\\u4E2D\\u7684\\u4E8B\\u4EF6\\u9636\\u6BB5\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6355\\u83B7\\u9636\\u6BB5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6355\\u83B7\\u9636\\u6BB5\\uFF0C\\u4E5F\\u79F0\\u4E3A\\u6E17\\u900F\\u9636\\u6BB5\\uFF0C\\u662F\\u4E8B\\u4EF6\\u4F20\\u64AD\\u7684\\u7B2C\\u4E00\\u4E2A\\u9636\\u6BB5\\u3002\\u5728\\u6B64\\u9636\\u6BB5\\uFF0C\\u4E8B\\u4EF6\\u4ECE DOM \\u6811\\u7684\\u6839\\u5F00\\u59CB\\uFF0C\\u5411\\u4E0B\\u4F20\\u9012\\u5230\\u76EE\\u6807\\u5143\\u7D20\\u3002\\u5728\\u6B64\\u9636\\u6BB5\\u6CE8\\u518C\\u7684\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u5C06\\u6309\\u7167\\u4ECE\\u6700\\u5916\\u5C42\\u7956\\u5148\\u5230\\u76EE\\u6807\\u5143\\u7D20\\u7684\\u987A\\u5E8F\\u89E6\\u53D1\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`element.addEventListener('click', handler, true); // true indicates capturing phase\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u76EE\\u6807\\u9636\\u6BB5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u76EE\\u6807\\u9636\\u6BB5\\u662F\\u4E8B\\u4EF6\\u4F20\\u64AD\\u7684\\u7B2C\\u4E8C\\u4E2A\\u9636\\u6BB5\\u3002\\u5728\\u6B64\\u9636\\u6BB5\\uFF0C\\u4E8B\\u4EF6\\u5DF2\\u5230\\u8FBE\\u76EE\\u6807\\u5143\\u7D20\\u672C\\u8EAB\\u3002\\u76F4\\u63A5\\u5728\\u76EE\\u6807\\u5143\\u7D20\\u4E0A\\u6CE8\\u518C\\u7684\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u5C06\\u5728\\u6B64\\u9636\\u6BB5\\u89E6\\u53D1\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`element.addEventListener('click', handler); // default is target phase\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5192\\u6CE1\\u9636\\u6BB5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5192\\u6CE1\\u9636\\u6BB5\\u662F\\u4E8B\\u4EF6\\u4F20\\u64AD\\u7684\\u6700\\u540E\\u4E00\\u4E2A\\u9636\\u6BB5\\u3002\\u5728\\u6B64\\u9636\\u6BB5\\uFF0C\\u4E8B\\u4EF6\\u4ECE\\u76EE\\u6807\\u5143\\u7D20\\u4F20\\u9012\\u56DE DOM \\u6811\\u7684\\u6839\\u3002\\u5728\\u6B64\\u9636\\u6BB5\\u6CE8\\u518C\\u7684\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u5C06\\u6309\\u7167\\u4ECE\\u76EE\\u6807\\u5143\\u7D20\\u5230\\u6700\\u5916\\u5C42\\u7956\\u5148\\u7684\\u987A\\u5E8F\\u89E6\\u53D1\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`element.addEventListener('click', handler, false); // false indicates bubbling phase\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u63A7\\u5236\\u4E8B\\u4EF6\\u4F20\\u64AD\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"stopPropagation\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"stopImmediatePropagation\"}),\" \\u7B49\\u65B9\\u6CD5\\u6765\\u63A7\\u5236\\u4E8B\\u4EF6\\u4F20\\u64AD\\u3002\\u8FD9\\u4E9B\\u65B9\\u6CD5\\u53EF\\u4EE5\\u5728\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D\\u8C03\\u7528\\uFF0C\\u4EE5\\u963B\\u6B62\\u4E8B\\u4EF6\\u8FDB\\u4E00\\u6B65\\u4F20\\u64AD\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`element.addEventListener('click', function (event) {\n  event.stopPropagation(); // Stops the event from propagating further\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture\",children:\"MDN Web Docs: Event bubbling and capturing\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/bubbling-and-capturing\",children:\"JavaScript.info: Bubbling and capturing\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3.org/TR/DOM-Level-3-Events/#event-flow\",children:\"W3C: DOM Level 3 Events Specification\"})}),`\n`]})]})}function L(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(s,r)})):s(r)}var x=L;return j(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),b=(r,e)=>{for(var t in e)c(r,t,{get:e[t],enumerable:!0})},a=(r,e,t,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of g(e))!v.call(r,i)&&i!==t&&c(r,i,{get:()=>e[i],enumerable:!(l=u(e,i))||l.enumerable});return r};var _=(r,e,t)=>(t=r!=null?p(m(r)):{},a(e||!r||!r.__esModule?c(t,\"default\",{value:r,enumerable:!0}):t,r)),j=r=>a(c({},\"__esModule\",{value:!0}),r);var h=f((E,d)=>{d.exports=_jsx_runtime});var x={};b(x,{default:()=>o,frontmatter:()=>L});var n=_(h()),L={title:\"\\u89E3\\u91CA\\u6D4F\\u89C8\\u5668\\u4E2D\\u7684\\u4E8B\\u4EF6\\u9636\\u6BB5\"};function s(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\uFF0C\\u4E8B\\u4EF6\\u7ECF\\u5386\\u4E09\\u4E2A\\u9636\\u6BB5\\uFF1A\\u6355\\u83B7\\u3001\\u76EE\\u6807\\u548C\\u5192\\u6CE1\\u3002\\u5728\\u6355\\u83B7\\u9636\\u6BB5\\uFF0C\\u4E8B\\u4EF6\\u4ECE\\u6839\\u8282\\u70B9\\u4F20\\u9012\\u5230\\u76EE\\u6807\\u5143\\u7D20\\u3002\\u5728\\u76EE\\u6807\\u9636\\u6BB5\\uFF0C\\u4E8B\\u4EF6\\u5230\\u8FBE\\u76EE\\u6807\\u5143\\u7D20\\u3002\\u6700\\u540E\\uFF0C\\u5728\\u5192\\u6CE1\\u9636\\u6BB5\\uFF0C\\u4E8B\\u4EF6\\u4ECE\\u76EE\\u6807\\u5143\\u7D20\\u4F20\\u9012\\u56DE\\u6839\\u8282\\u70B9\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5E26\\u6709 \",(0,n.jsx)(e.code,{children:\"capture\"}),\" \\u9009\\u9879\\u7684 \",(0,n.jsx)(e.code,{children:\"addEventListener\"}),\" \\u6765\\u63A7\\u5236\\u4E8B\\u4EF6\\u5904\\u7406\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6D4F\\u89C8\\u5668\\u4E2D\\u7684\\u4E8B\\u4EF6\\u9636\\u6BB5\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6355\\u83B7\\u9636\\u6BB5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6355\\u83B7\\u9636\\u6BB5\\uFF0C\\u4E5F\\u79F0\\u4E3A\\u6E17\\u900F\\u9636\\u6BB5\\uFF0C\\u662F\\u4E8B\\u4EF6\\u4F20\\u64AD\\u7684\\u7B2C\\u4E00\\u4E2A\\u9636\\u6BB5\\u3002\\u5728\\u6B64\\u9636\\u6BB5\\uFF0C\\u4E8B\\u4EF6\\u4ECE DOM \\u6811\\u7684\\u6839\\u5F00\\u59CB\\uFF0C\\u5411\\u4E0B\\u4F20\\u9012\\u5230\\u76EE\\u6807\\u5143\\u7D20\\u3002\\u5728\\u6B64\\u9636\\u6BB5\\u6CE8\\u518C\\u7684\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u5C06\\u6309\\u7167\\u4ECE\\u6700\\u5916\\u5C42\\u7956\\u5148\\u5230\\u76EE\\u6807\\u5143\\u7D20\\u7684\\u987A\\u5E8F\\u89E6\\u53D1\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`element.addEventListener('click', handler, true); // true indicates capturing phase\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u76EE\\u6807\\u9636\\u6BB5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u76EE\\u6807\\u9636\\u6BB5\\u662F\\u4E8B\\u4EF6\\u4F20\\u64AD\\u7684\\u7B2C\\u4E8C\\u4E2A\\u9636\\u6BB5\\u3002\\u5728\\u6B64\\u9636\\u6BB5\\uFF0C\\u4E8B\\u4EF6\\u5DF2\\u5230\\u8FBE\\u76EE\\u6807\\u5143\\u7D20\\u672C\\u8EAB\\u3002\\u76F4\\u63A5\\u5728\\u76EE\\u6807\\u5143\\u7D20\\u4E0A\\u6CE8\\u518C\\u7684\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u5C06\\u5728\\u6B64\\u9636\\u6BB5\\u89E6\\u53D1\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`element.addEventListener('click', handler); // default is target phase\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5192\\u6CE1\\u9636\\u6BB5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5192\\u6CE1\\u9636\\u6BB5\\u662F\\u4E8B\\u4EF6\\u4F20\\u64AD\\u7684\\u6700\\u540E\\u4E00\\u4E2A\\u9636\\u6BB5\\u3002\\u5728\\u6B64\\u9636\\u6BB5\\uFF0C\\u4E8B\\u4EF6\\u4ECE\\u76EE\\u6807\\u5143\\u7D20\\u4F20\\u9012\\u56DE DOM \\u6811\\u7684\\u6839\\u3002\\u5728\\u6B64\\u9636\\u6BB5\\u6CE8\\u518C\\u7684\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u5C06\\u6309\\u7167\\u4ECE\\u76EE\\u6807\\u5143\\u7D20\\u5230\\u6700\\u5916\\u5C42\\u7956\\u5148\\u7684\\u987A\\u5E8F\\u89E6\\u53D1\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`element.addEventListener('click', handler, false); // false indicates bubbling phase\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u63A7\\u5236\\u4E8B\\u4EF6\\u4F20\\u64AD\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"stopPropagation\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"stopImmediatePropagation\"}),\" \\u7B49\\u65B9\\u6CD5\\u6765\\u63A7\\u5236\\u4E8B\\u4EF6\\u4F20\\u64AD\\u3002\\u8FD9\\u4E9B\\u65B9\\u6CD5\\u53EF\\u4EE5\\u5728\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D\\u8C03\\u7528\\uFF0C\\u4EE5\\u963B\\u6B62\\u4E8B\\u4EF6\\u8FDB\\u4E00\\u6B65\\u4F20\\u64AD\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`element.addEventListener('click', function (event) {\n  event.stopPropagation(); // Stops the event from propagating further\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture\",children:\"MDN Web Docs: Event bubbling and capturing\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/bubbling-and-capturing\",children:\"JavaScript.info: Bubbling and capturing\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3.org/TR/DOM-Level-3-Events/#event-flow\",children:\"W3C: DOM Level 3 Events Specification\"})}),`\n`]})]})}function o(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(s,{...r})}):s(r)}return j(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-observer-pattern-and-its-use-cases/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-observer-pattern-and-its-use-cases/en-US.json
index 1e5c7224d..098ead083 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-observer-pattern-and-its-use-cases/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-observer-pattern-and-its-use-cases/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-observer-pattern-and-its-use-cases/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},o=(t,e,r,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!v.call(t,s)&&s!==r&&i(t,s,{get:()=>e[s],enumerable:!(a=b(e,s))||a.enumerable});return t};var g=(t,e,r)=>(r=t!=null?d(u(t)):{},o(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),j=t=>o(i({},\"__esModule\",{value:!0}),t);var h=m((E,c)=>{c.exports=_jsx_runtime});var x={};f(x,{default:()=>y,frontmatter:()=>O});var n=g(h()),O={title:\"Explain the Observer pattern and its use cases\"};function l(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",ul:\"ul\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Observer pattern is a design pattern where an object, known as the subject, maintains a list of its dependents, called observers, and notifies them of any state changes. This pattern is useful for implementing distributed event-handling systems, such as updating the user interface in response to data changes or implementing event-driven architectures.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is the Observer pattern?\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Observer pattern is a behavioral design pattern that defines a one-to-many dependency between objects. When the state of the subject (the one) changes, all its observers (the many) are notified and updated automatically. This pattern is particularly useful for scenarios where changes in one object need to be reflected in multiple other objects without tightly coupling them.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Key components\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Subject\"}),\": The object that holds the state and sends notifications to observers.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Observer\"}),\": The objects that need to be notified of changes in the subject.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"ConcreteSubject\"}),\": A specific implementation of the subject.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"ConcreteObserver\"}),\": A specific implementation of the observer.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here is a simple example in JavaScript:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Subject {\n  constructor() {\n    this.observers = [];\n  }\n\n  addObserver(observer) {\n    this.observers.push(observer);\n  }\n\n  removeObserver(observer) {\n    this.observers = this.observers.filter((obs) => obs !== observer);\n  }\n\n  notifyObservers() {\n    this.observers.forEach((observer) => observer.update());\n  }\n}\n\nclass Observer {\n  update() {\n    console.log('Observer updated');\n  }\n}\n\n// Usage\nconst subject = new Subject();\nconst observer1 = new Observer();\nconst observer2 = new Observer();\n\nsubject.addObserver(observer1);\nsubject.addObserver(observer2);\n\nsubject.notifyObservers(); // Both observers will be updated\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Use cases\"}),`\n`,(0,n.jsx)(e.h3,{children:\"User interface updates\"}),`\n`,(0,n.jsx)(e.p,{children:\"In front end development, the Observer pattern is commonly used to update the user interface in response to changes in data. For example, in a Model-View-Controller (MVC) architecture, the view can observe the model and update itself whenever the model's state changes.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Event handling\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The Observer pattern is useful for implementing event-driven systems. For instance, in JavaScript, the \",(0,n.jsx)(e.code,{children:\"addEventListener\"}),\" method allows you to register multiple event handlers (observers) for a single event (subject).\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Real-time data feeds\"}),`\n`,(0,n.jsx)(e.p,{children:\"Applications that require real-time updates, such as stock tickers or chat applications, can benefit from the Observer pattern. Observers can subscribe to data feeds and get notified whenever new data is available.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Dependency management\"}),`\n`,(0,n.jsx)(e.p,{children:\"In complex applications, managing dependencies between different modules can be challenging. The Observer pattern helps decouple these modules, making the system more modular and easier to maintain.\"}),`\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://en.wikipedia.org/wiki/Observer_pattern\",children:\"Observer pattern on Wikipedia\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.dofactory.com/javascript/observer-design-pattern\",children:\"Observer pattern in JavaScript\"})}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://www.amazon.com/Design-Patterns-Elements-Reusable-Object-Oriented/dp/0201633612\",children:\"Design Patterns: Elements of Reusable Object-Oriented Software\"}),\" by Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides\"]}),`\n`]})]})}function w(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(l,t)})):l(t)}var y=w;return j(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},o=(t,e,r,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of u(e))!m.call(t,s)&&s!==r&&i(t,s,{get:()=>e[s],enumerable:!(a=b(e,s))||a.enumerable});return t};var j=(t,e,r)=>(r=t!=null?p(v(t)):{},o(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),O=t=>o(i({},\"__esModule\",{value:!0}),t);var h=f((T,c)=>{c.exports=_jsx_runtime});var y={};g(y,{default:()=>d,frontmatter:()=>w});var n=j(h()),w={title:\"Explain the Observer pattern and its use cases\"};function l(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Observer pattern is a design pattern where an object, known as the subject, maintains a list of its dependents, called observers, and notifies them of any state changes. This pattern is useful for implementing distributed event-handling systems, such as updating the user interface in response to data changes or implementing event-driven architectures.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is the Observer pattern?\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Observer pattern is a behavioral design pattern that defines a one-to-many dependency between objects. When the state of the subject (the one) changes, all its observers (the many) are notified and updated automatically. This pattern is particularly useful for scenarios where changes in one object need to be reflected in multiple other objects without tightly coupling them.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Key components\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Subject\"}),\": The object that holds the state and sends notifications to observers.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Observer\"}),\": The objects that need to be notified of changes in the subject.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"ConcreteSubject\"}),\": A specific implementation of the subject.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"ConcreteObserver\"}),\": A specific implementation of the observer.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here is a simple example in JavaScript:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Subject {\n  constructor() {\n    this.observers = [];\n  }\n\n  addObserver(observer) {\n    this.observers.push(observer);\n  }\n\n  removeObserver(observer) {\n    this.observers = this.observers.filter((obs) => obs !== observer);\n  }\n\n  notifyObservers() {\n    this.observers.forEach((observer) => observer.update());\n  }\n}\n\nclass Observer {\n  update() {\n    console.log('Observer updated');\n  }\n}\n\n// Usage\nconst subject = new Subject();\nconst observer1 = new Observer();\nconst observer2 = new Observer();\n\nsubject.addObserver(observer1);\nsubject.addObserver(observer2);\n\nsubject.notifyObservers(); // Both observers will be updated\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Use cases\"}),`\n`,(0,n.jsx)(e.h3,{children:\"User interface updates\"}),`\n`,(0,n.jsx)(e.p,{children:\"In front end development, the Observer pattern is commonly used to update the user interface in response to changes in data. For example, in a Model-View-Controller (MVC) architecture, the view can observe the model and update itself whenever the model's state changes.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Event handling\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The Observer pattern is useful for implementing event-driven systems. For instance, in JavaScript, the \",(0,n.jsx)(e.code,{children:\"addEventListener\"}),\" method allows you to register multiple event handlers (observers) for a single event (subject).\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Real-time data feeds\"}),`\n`,(0,n.jsx)(e.p,{children:\"Applications that require real-time updates, such as stock tickers or chat applications, can benefit from the Observer pattern. Observers can subscribe to data feeds and get notified whenever new data is available.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Dependency management\"}),`\n`,(0,n.jsx)(e.p,{children:\"In complex applications, managing dependencies between different modules can be challenging. The Observer pattern helps decouple these modules, making the system more modular and easier to maintain.\"}),`\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://en.wikipedia.org/wiki/Observer_pattern\",children:\"Observer pattern on Wikipedia\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.dofactory.com/javascript/observer-design-pattern\",children:\"Observer pattern in JavaScript\"})}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://www.amazon.com/Design-Patterns-Elements-Reusable-Object-Oriented/dp/0201633612\",children:\"Design Patterns: Elements of Reusable Object-Oriented Software\"}),\" by Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides\"]}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}return O(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-observer-pattern-and-its-use-cases/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-observer-pattern-and-its-use-cases/zh-CN.json
index 68d3e25c4..3f22889c1 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-observer-pattern-and-its-use-cases/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-observer-pattern-and-its-use-cases/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-observer-pattern-and-its-use-cases/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var i=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),g=(r,e)=>{for(var s in e)i(r,s,{get:e[s],enumerable:!0})},h=(r,e,s,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of v(e))!u.call(r,t)&&t!==s&&i(r,t,{get:()=>e[t],enumerable:!(c=b(e,t))||c.enumerable});return r};var j=(r,e,s)=>(s=r!=null?a(p(r)):{},h(e||!r||!r.__esModule?i(s,\"default\",{value:r,enumerable:!0}):s,r)),O=r=>h(i({},\"__esModule\",{value:!0}),r);var l=m((S,o)=>{o.exports=_jsx_runtime});var _={};g(_,{default:()=>x,frontmatter:()=>f});var n=j(l()),f={title:\"\\u89E3\\u91CA\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\\u53CA\\u5176\\u7528\\u4F8B\"};function d(r){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",ul:\"ul\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5176\\u4E2D\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF08\\u79F0\\u4E3A\\u4E3B\\u9898\\uFF09\\u7EF4\\u62A4\\u5176\\u4F9D\\u8D56\\u9879\\uFF08\\u79F0\\u4E3A\\u89C2\\u5BDF\\u8005\\uFF09\\u7684\\u5217\\u8868\\uFF0C\\u5E76\\u901A\\u77E5\\u5B83\\u4EEC\\u4EFB\\u4F55\\u72B6\\u6001\\u66F4\\u6539\\u3002\\u6B64\\u6A21\\u5F0F\\u5BF9\\u4E8E\\u5B9E\\u73B0\\u5206\\u5E03\\u5F0F\\u4E8B\\u4EF6\\u5904\\u7406\\u7CFB\\u7EDF\\u975E\\u5E38\\u6709\\u7528\\uFF0C\\u4F8B\\u5982\\u54CD\\u5E94\\u6570\\u636E\\u66F4\\u6539\\u66F4\\u65B0\\u7528\\u6237\\u754C\\u9762\\u6216\\u5B9E\\u73B0\\u4E8B\\u4EF6\\u9A71\\u52A8\\u7684\\u67B6\\u6784\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u884C\\u4E3A\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5B83\\u5B9A\\u4E49\\u4E86\\u5BF9\\u8C61\\u4E4B\\u95F4\\u7684\\u4E00\\u5BF9\\u591A\\u4F9D\\u8D56\\u5173\\u7CFB\\u3002\\u5F53\\u4E3B\\u9898\\uFF08\\u4E00\\u4E2A\\uFF09\\u7684\\u72B6\\u6001\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0C\\u5B83\\u7684\\u6240\\u6709\\u89C2\\u5BDF\\u8005\\uFF08\\u591A\\u4E2A\\uFF09\\u90FD\\u4F1A\\u81EA\\u52A8\\u6536\\u5230\\u901A\\u77E5\\u5E76\\u66F4\\u65B0\\u3002\\u6B64\\u6A21\\u5F0F\\u7279\\u522B\\u9002\\u7528\\u4E8E\\u9700\\u8981\\u5728\\u4E0D\\u7D27\\u5BC6\\u8026\\u5408\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5C06\\u4E00\\u4E2A\\u5BF9\\u8C61\\u4E2D\\u7684\\u66F4\\u6539\\u53CD\\u6620\\u5230\\u591A\\u4E2A\\u5176\\u4ED6\\u5BF9\\u8C61\\u4E2D\\u7684\\u573A\\u666F\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5173\\u952E\\u7EC4\\u4EF6\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E3B\\u9898\"}),\"\\uFF1A\\u4FDD\\u5B58\\u72B6\\u6001\\u5E76\\u5411\\u89C2\\u5BDF\\u8005\\u53D1\\u9001\\u901A\\u77E5\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u89C2\\u5BDF\\u8005\"}),\"\\uFF1A\\u9700\\u8981\\u63A5\\u6536\\u4E3B\\u9898\\u66F4\\u6539\\u901A\\u77E5\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5177\\u4F53\\u4E3B\\u9898\"}),\"\\uFF1A\\u4E3B\\u9898\\u7684\\u5177\\u4F53\\u5B9E\\u73B0\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5177\\u4F53\\u89C2\\u5BDF\\u8005\"}),\"\\uFF1A\\u89C2\\u5BDF\\u8005\\u7684\\u5177\\u4F53\\u5B9E\\u73B0\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684 JavaScript \\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Subject {\n  constructor() {\n    this.observers = [];\n  }\n\n  addObserver(observer) {\n    this.observers.push(observer);\n  }\n\n  removeObserver(observer) {\n    this.observers = this.observers.filter((obs) => obs !== observer);\n  }\n\n  notifyObservers() {\n    this.observers.forEach((observer) => observer.update());\n  }\n}\n\nclass Observer {\n  update() {\n    console.log('Observer updated');\n  }\n}\n\n// Usage\nconst subject = new Subject();\nconst observer1 = new Observer();\nconst observer2 = new Observer();\n\nsubject.addObserver(observer1);\nsubject.addObserver(observer2);\n\nsubject.notifyObservers(); // Both observers will be updated\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7528\\u6237\\u754C\\u9762\\u66F4\\u65B0\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u524D\\u7AEF\\u5F00\\u53D1\\u4E2D\\uFF0C\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\\u901A\\u5E38\\u7528\\u4E8E\\u54CD\\u5E94\\u6570\\u636E\\u66F4\\u6539\\u6765\\u66F4\\u65B0\\u7528\\u6237\\u754C\\u9762\\u3002\\u4F8B\\u5982\\uFF0C\\u5728\\u6A21\\u578B-\\u89C6\\u56FE-\\u63A7\\u5236\\u5668 (MVC) \\u67B6\\u6784\\u4E2D\\uFF0C\\u89C6\\u56FE\\u53EF\\u4EE5\\u89C2\\u5BDF\\u6A21\\u578B\\uFF0C\\u5E76\\u5728\\u6A21\\u578B\\u72B6\\u6001\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\u81EA\\u884C\\u66F4\\u65B0\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E8B\\u4EF6\\u5904\\u7406\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\\u5BF9\\u4E8E\\u5B9E\\u73B0\\u4E8B\\u4EF6\\u9A71\\u52A8\\u7CFB\\u7EDF\\u975E\\u5E38\\u6709\\u7528\\u3002\\u4F8B\\u5982\\uFF0C\\u5728 JavaScript \\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"addEventListener\"}),\" \\u65B9\\u6CD5\\u5141\\u8BB8\\u60A8\\u4E3A\\u5355\\u4E2A\\u4E8B\\u4EF6\\uFF08\\u4E3B\\u9898\\uFF09\\u6CE8\\u518C\\u591A\\u4E2A\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\uFF08\\u89C2\\u5BDF\\u8005\\uFF09\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B9E\\u65F6\\u6570\\u636E\\u9988\\u9001\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u9700\\u8981\\u5B9E\\u65F6\\u66F4\\u65B0\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\uFF08\\u4F8B\\u5982\\u80A1\\u7968\\u884C\\u60C5\\u6216\\u804A\\u5929\\u5E94\\u7528\\u7A0B\\u5E8F\\uFF09\\u53EF\\u4EE5\\u4ECE\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\\u4E2D\\u53D7\\u76CA\\u3002\\u89C2\\u5BDF\\u8005\\u53EF\\u4EE5\\u8BA2\\u9605\\u6570\\u636E\\u9988\\u9001\\uFF0C\\u5E76\\u5728\\u6709\\u65B0\\u6570\\u636E\\u53EF\\u7528\\u65F6\\u6536\\u5230\\u901A\\u77E5\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F9D\\u8D56\\u7BA1\\u7406\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u590D\\u6742\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\uFF0C\\u7BA1\\u7406\\u4E0D\\u540C\\u6A21\\u5757\\u4E4B\\u95F4\\u7684\\u4F9D\\u8D56\\u5173\\u7CFB\\u53EF\\u80FD\\u5177\\u6709\\u6311\\u6218\\u6027\\u3002\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\\u6709\\u52A9\\u4E8E\\u89E3\\u8026\\u8FD9\\u4E9B\\u6A21\\u5757\\uFF0C\\u4F7F\\u7CFB\\u7EDF\\u66F4\\u5177\\u6A21\\u5757\\u5316\\uFF0C\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://en.wikipedia.org/wiki/Observer_pattern\",children:\"\\u7EF4\\u57FA\\u767E\\u79D1\\u4E0A\\u7684\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.dofactory.com/javascript/observer-design-pattern\",children:\"JavaScript \\u4E2D\\u7684\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\"})}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://www.amazon.com/Design-Patterns-Elements-Reusable-Object-Oriented/dp/0201633612\",children:\"\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF1A\\u53EF\\u590D\\u7528\\u9762\\u5411\\u5BF9\\u8C61\\u8F6F\\u4EF6\\u8981\\u7D20\"}),\" \\u4F5C\\u8005\\uFF1AErich Gamma\\u3001Richard Helm\\u3001Ralph Johnson \\u548C John Vlissides\"]}),`\n`]})]})}function w(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(d,r)})):d(r)}var x=w;return O(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var b=Object.create;var i=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),j=(r,e)=>{for(var s in e)i(r,s,{get:e[s],enumerable:!0})},h=(r,e,s,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of p(e))!m.call(r,t)&&t!==s&&i(r,t,{get:()=>e[t],enumerable:!(c=v(e,t))||c.enumerable});return r};var f=(r,e,s)=>(s=r!=null?b(u(r)):{},h(e||!r||!r.__esModule?i(s,\"default\",{value:r,enumerable:!0}):s,r)),w=r=>h(i({},\"__esModule\",{value:!0}),r);var l=g((J,o)=>{o.exports=_jsx_runtime});var x={};j(x,{default:()=>a,frontmatter:()=>O});var n=f(l()),O={title:\"\\u89E3\\u91CA\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\\u53CA\\u5176\\u7528\\u4F8B\"};function d(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5176\\u4E2D\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF08\\u79F0\\u4E3A\\u4E3B\\u9898\\uFF09\\u7EF4\\u62A4\\u5176\\u4F9D\\u8D56\\u9879\\uFF08\\u79F0\\u4E3A\\u89C2\\u5BDF\\u8005\\uFF09\\u7684\\u5217\\u8868\\uFF0C\\u5E76\\u901A\\u77E5\\u5B83\\u4EEC\\u4EFB\\u4F55\\u72B6\\u6001\\u66F4\\u6539\\u3002\\u6B64\\u6A21\\u5F0F\\u5BF9\\u4E8E\\u5B9E\\u73B0\\u5206\\u5E03\\u5F0F\\u4E8B\\u4EF6\\u5904\\u7406\\u7CFB\\u7EDF\\u975E\\u5E38\\u6709\\u7528\\uFF0C\\u4F8B\\u5982\\u54CD\\u5E94\\u6570\\u636E\\u66F4\\u6539\\u66F4\\u65B0\\u7528\\u6237\\u754C\\u9762\\u6216\\u5B9E\\u73B0\\u4E8B\\u4EF6\\u9A71\\u52A8\\u7684\\u67B6\\u6784\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u884C\\u4E3A\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5B83\\u5B9A\\u4E49\\u4E86\\u5BF9\\u8C61\\u4E4B\\u95F4\\u7684\\u4E00\\u5BF9\\u591A\\u4F9D\\u8D56\\u5173\\u7CFB\\u3002\\u5F53\\u4E3B\\u9898\\uFF08\\u4E00\\u4E2A\\uFF09\\u7684\\u72B6\\u6001\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0C\\u5B83\\u7684\\u6240\\u6709\\u89C2\\u5BDF\\u8005\\uFF08\\u591A\\u4E2A\\uFF09\\u90FD\\u4F1A\\u81EA\\u52A8\\u6536\\u5230\\u901A\\u77E5\\u5E76\\u66F4\\u65B0\\u3002\\u6B64\\u6A21\\u5F0F\\u7279\\u522B\\u9002\\u7528\\u4E8E\\u9700\\u8981\\u5728\\u4E0D\\u7D27\\u5BC6\\u8026\\u5408\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5C06\\u4E00\\u4E2A\\u5BF9\\u8C61\\u4E2D\\u7684\\u66F4\\u6539\\u53CD\\u6620\\u5230\\u591A\\u4E2A\\u5176\\u4ED6\\u5BF9\\u8C61\\u4E2D\\u7684\\u573A\\u666F\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5173\\u952E\\u7EC4\\u4EF6\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E3B\\u9898\"}),\"\\uFF1A\\u4FDD\\u5B58\\u72B6\\u6001\\u5E76\\u5411\\u89C2\\u5BDF\\u8005\\u53D1\\u9001\\u901A\\u77E5\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u89C2\\u5BDF\\u8005\"}),\"\\uFF1A\\u9700\\u8981\\u63A5\\u6536\\u4E3B\\u9898\\u66F4\\u6539\\u901A\\u77E5\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5177\\u4F53\\u4E3B\\u9898\"}),\"\\uFF1A\\u4E3B\\u9898\\u7684\\u5177\\u4F53\\u5B9E\\u73B0\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5177\\u4F53\\u89C2\\u5BDF\\u8005\"}),\"\\uFF1A\\u89C2\\u5BDF\\u8005\\u7684\\u5177\\u4F53\\u5B9E\\u73B0\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684 JavaScript \\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Subject {\n  constructor() {\n    this.observers = [];\n  }\n\n  addObserver(observer) {\n    this.observers.push(observer);\n  }\n\n  removeObserver(observer) {\n    this.observers = this.observers.filter((obs) => obs !== observer);\n  }\n\n  notifyObservers() {\n    this.observers.forEach((observer) => observer.update());\n  }\n}\n\nclass Observer {\n  update() {\n    console.log('Observer updated');\n  }\n}\n\n// Usage\nconst subject = new Subject();\nconst observer1 = new Observer();\nconst observer2 = new Observer();\n\nsubject.addObserver(observer1);\nsubject.addObserver(observer2);\n\nsubject.notifyObservers(); // Both observers will be updated\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7528\\u6237\\u754C\\u9762\\u66F4\\u65B0\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u524D\\u7AEF\\u5F00\\u53D1\\u4E2D\\uFF0C\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\\u901A\\u5E38\\u7528\\u4E8E\\u54CD\\u5E94\\u6570\\u636E\\u66F4\\u6539\\u6765\\u66F4\\u65B0\\u7528\\u6237\\u754C\\u9762\\u3002\\u4F8B\\u5982\\uFF0C\\u5728\\u6A21\\u578B-\\u89C6\\u56FE-\\u63A7\\u5236\\u5668 (MVC) \\u67B6\\u6784\\u4E2D\\uFF0C\\u89C6\\u56FE\\u53EF\\u4EE5\\u89C2\\u5BDF\\u6A21\\u578B\\uFF0C\\u5E76\\u5728\\u6A21\\u578B\\u72B6\\u6001\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\u81EA\\u884C\\u66F4\\u65B0\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E8B\\u4EF6\\u5904\\u7406\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\\u5BF9\\u4E8E\\u5B9E\\u73B0\\u4E8B\\u4EF6\\u9A71\\u52A8\\u7CFB\\u7EDF\\u975E\\u5E38\\u6709\\u7528\\u3002\\u4F8B\\u5982\\uFF0C\\u5728 JavaScript \\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"addEventListener\"}),\" \\u65B9\\u6CD5\\u5141\\u8BB8\\u60A8\\u4E3A\\u5355\\u4E2A\\u4E8B\\u4EF6\\uFF08\\u4E3B\\u9898\\uFF09\\u6CE8\\u518C\\u591A\\u4E2A\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\uFF08\\u89C2\\u5BDF\\u8005\\uFF09\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B9E\\u65F6\\u6570\\u636E\\u9988\\u9001\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u9700\\u8981\\u5B9E\\u65F6\\u66F4\\u65B0\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\uFF08\\u4F8B\\u5982\\u80A1\\u7968\\u884C\\u60C5\\u6216\\u804A\\u5929\\u5E94\\u7528\\u7A0B\\u5E8F\\uFF09\\u53EF\\u4EE5\\u4ECE\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\\u4E2D\\u53D7\\u76CA\\u3002\\u89C2\\u5BDF\\u8005\\u53EF\\u4EE5\\u8BA2\\u9605\\u6570\\u636E\\u9988\\u9001\\uFF0C\\u5E76\\u5728\\u6709\\u65B0\\u6570\\u636E\\u53EF\\u7528\\u65F6\\u6536\\u5230\\u901A\\u77E5\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F9D\\u8D56\\u7BA1\\u7406\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u590D\\u6742\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\uFF0C\\u7BA1\\u7406\\u4E0D\\u540C\\u6A21\\u5757\\u4E4B\\u95F4\\u7684\\u4F9D\\u8D56\\u5173\\u7CFB\\u53EF\\u80FD\\u5177\\u6709\\u6311\\u6218\\u6027\\u3002\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\\u6709\\u52A9\\u4E8E\\u89E3\\u8026\\u8FD9\\u4E9B\\u6A21\\u5757\\uFF0C\\u4F7F\\u7CFB\\u7EDF\\u66F4\\u5177\\u6A21\\u5757\\u5316\\uFF0C\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://en.wikipedia.org/wiki/Observer_pattern\",children:\"\\u7EF4\\u57FA\\u767E\\u79D1\\u4E0A\\u7684\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.dofactory.com/javascript/observer-design-pattern\",children:\"JavaScript \\u4E2D\\u7684\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\"})}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://www.amazon.com/Design-Patterns-Elements-Reusable-Object-Oriented/dp/0201633612\",children:\"\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF1A\\u53EF\\u590D\\u7528\\u9762\\u5411\\u5BF9\\u8C61\\u8F6F\\u4EF6\\u8981\\u7D20\"}),\" \\u4F5C\\u8005\\uFF1AErich Gamma\\u3001Richard Helm\\u3001Ralph Johnson \\u548C John Vlissides\"]}),`\n`]})]})}function a(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(d,{...r})}):d(r)}return w(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-presentational-vs-container-component-pattern-in-react/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-presentational-vs-container-component-pattern-in-react/en-US.json
index c438d6bba..1d0a436a9 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-presentational-vs-container-component-pattern-in-react/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-presentational-vs-container-component-pattern-in-react/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/explain-the-presentational-vs-container-component-pattern-in-react/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),b=(t,n)=>{for(var a in n)r(t,a,{get:n[a],enumerable:!0})},c=(t,n,a,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of m(n))!g.call(t,o)&&o!==a&&r(t,o,{get:()=>n[o],enumerable:!(i=p(n,o))||i.enumerable});return t};var x=(t,n,a)=>(a=t!=null?d(u(t)):{},c(n||!t||!t.__esModule?r(a,\"default\",{value:t,enumerable:!0}):a,t)),w=t=>c(r({},\"__esModule\",{value:!0}),t);var l=f((D,s)=>{s.exports=_jsx_runtime});var v={};b(v,{default:()=>k,frontmatter:()=>y});var e=x(l()),y={title:\"Explain the presentational vs container component pattern in React\"};function h(t){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",code:\"code\",h4:\"h4\",ul:\"ul\",li:\"li\",pre:\"pre\",strong:\"strong\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"In React, the presentational vs container component pattern is a design approach where presentational components focus on how things look and container components focus on how things work. Presentational components are concerned with rendering HTML and CSS, while container components handle the logic and state management. This separation helps in maintaining a clean and organized codebase.\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Presentational vs container component pattern in React\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Presentational components\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Presentational components are primarily concerned with the UI. They receive data and callbacks exclusively via props and rarely have their own state (except for UI state like \",(0,e.jsx)(n.code,{children:\"hover\"}),\" or \",(0,e.jsx)(n.code,{children:\"active\"}),\"). They are often stateless functional components but can also be class components.\"]}),`\n`,(0,e.jsx)(n.h4,{children:\"Characteristics\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"Focus on how things look\"}),`\n`,(0,e.jsx)(n.li,{children:\"Receive data and callbacks via props\"}),`\n`,(0,e.jsx)(n.li,{children:\"Rarely have their own state\"}),`\n`,(0,e.jsx)(n.li,{children:\"Typically written as functional components\"}),`\n`,(0,e.jsx)(n.li,{children:\"Do not use Redux or other state management libraries directly\"}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`const Button = ({ onClick, label }) => (\n  <button onClick={onClick}>{label}</button>\n);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Container components\"}),`\n`,(0,e.jsx)(n.p,{children:\"Container components are concerned with how things work. They manage state and handle business logic. They often fetch data, handle user interactions, and pass data down to presentational components as props.\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Characteristics\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"Focus on how things work\"}),`\n`,(0,e.jsx)(n.li,{children:\"Manage state and handle business logic\"}),`\n`,(0,e.jsx)(n.li,{children:\"Fetch data and handle user interactions\"}),`\n`,(0,e.jsx)(n.li,{children:\"Pass data and callbacks to presentational components\"}),`\n`,(0,e.jsx)(n.li,{children:\"Often use Redux or other state management libraries\"}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport { fetchData } from './actions';\nimport Button from './Button';\n\nclass ButtonContainer extends Component {\n  componentDidMount() {\n    this.props.fetchData();\n  }\n\n  handleClick = () => {\n    // Handle button click\n  };\n\n  render() {\n    return <Button onClick={this.handleClick} label=\"Click me\" />;\n  }\n}\n\nconst mapDispatchToProps = {\n  fetchData,\n};\n\nexport default connect(null, mapDispatchToProps)(ButtonContainer);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Benefits\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Separation of concerns\"}),\": By separating the UI from the logic, the codebase becomes more modular and easier to maintain.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Reusability\"}),\": Presentational components can be reused across different parts of the application since they are not tied to specific logic.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Testability\"}),\": Presentational components are easier to test because they are stateless and only rely on props.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/passing-props-to-a-component\",children:\"React documentation on components and props\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0\",children:\"Dan Abramov's article on presentational and container components\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://redux.js.org/basics/usage-with-react#presentational-and-container-components\",children:\"Redux documentation on presentational and container components\"})}),`\n`]})]})}function C(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(h,t)})):h(t)}var k=C;return w(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),x=(t,n)=>{for(var a in n)r(t,a,{get:n[a],enumerable:!0})},c=(t,n,a,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of u(n))!f.call(t,o)&&o!==a&&r(t,o,{get:()=>n[o],enumerable:!(i=m(n,o))||i.enumerable});return t};var w=(t,n,a)=>(a=t!=null?p(g(t)):{},c(n||!t||!t.__esModule?r(a,\"default\",{value:t,enumerable:!0}):a,t)),y=t=>c(r({},\"__esModule\",{value:!0}),t);var l=b((R,s)=>{s.exports=_jsx_runtime});var k={};x(k,{default:()=>d,frontmatter:()=>C});var e=w(l()),C={title:\"Explain the presentational vs container component pattern in React\"};function h(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"In React, the presentational vs container component pattern is a design approach where presentational components focus on how things look and container components focus on how things work. Presentational components are concerned with rendering HTML and CSS, while container components handle the logic and state management. This separation helps in maintaining a clean and organized codebase.\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Presentational vs container component pattern in React\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Presentational components\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Presentational components are primarily concerned with the UI. They receive data and callbacks exclusively via props and rarely have their own state (except for UI state like \",(0,e.jsx)(n.code,{children:\"hover\"}),\" or \",(0,e.jsx)(n.code,{children:\"active\"}),\"). They are often stateless functional components but can also be class components.\"]}),`\n`,(0,e.jsx)(n.h4,{children:\"Characteristics\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"Focus on how things look\"}),`\n`,(0,e.jsx)(n.li,{children:\"Receive data and callbacks via props\"}),`\n`,(0,e.jsx)(n.li,{children:\"Rarely have their own state\"}),`\n`,(0,e.jsx)(n.li,{children:\"Typically written as functional components\"}),`\n`,(0,e.jsx)(n.li,{children:\"Do not use Redux or other state management libraries directly\"}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`const Button = ({ onClick, label }) => (\n  <button onClick={onClick}>{label}</button>\n);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Container components\"}),`\n`,(0,e.jsx)(n.p,{children:\"Container components are concerned with how things work. They manage state and handle business logic. They often fetch data, handle user interactions, and pass data down to presentational components as props.\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Characteristics\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"Focus on how things work\"}),`\n`,(0,e.jsx)(n.li,{children:\"Manage state and handle business logic\"}),`\n`,(0,e.jsx)(n.li,{children:\"Fetch data and handle user interactions\"}),`\n`,(0,e.jsx)(n.li,{children:\"Pass data and callbacks to presentational components\"}),`\n`,(0,e.jsx)(n.li,{children:\"Often use Redux or other state management libraries\"}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport { fetchData } from './actions';\nimport Button from './Button';\n\nclass ButtonContainer extends Component {\n  componentDidMount() {\n    this.props.fetchData();\n  }\n\n  handleClick = () => {\n    // Handle button click\n  };\n\n  render() {\n    return <Button onClick={this.handleClick} label=\"Click me\" />;\n  }\n}\n\nconst mapDispatchToProps = {\n  fetchData,\n};\n\nexport default connect(null, mapDispatchToProps)(ButtonContainer);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Benefits\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Separation of concerns\"}),\": By separating the UI from the logic, the codebase becomes more modular and easier to maintain.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Reusability\"}),\": Presentational components can be reused across different parts of the application since they are not tied to specific logic.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Testability\"}),\": Presentational components are easier to test because they are stateless and only rely on props.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/passing-props-to-a-component\",children:\"React documentation on components and props\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0\",children:\"Dan Abramov's article on presentational and container components\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://redux.js.org/basics/usage-with-react#presentational-and-container-components\",children:\"Redux documentation on presentational and container components\"})}),`\n`]})]})}function d(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(h,{...t})}):h(t)}return y(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-presentational-vs-container-component-pattern-in-react/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-presentational-vs-container-component-pattern-in-react/zh-CN.json
index e703aa3a4..ec187362d 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-presentational-vs-container-component-pattern-in-react/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-presentational-vs-container-component-pattern-in-react/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/explain-the-presentational-vs-container-component-pattern-in-react/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var f=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),g=(t,n)=>{for(var r in n)o(t,r,{get:n[r],enumerable:!0})},l=(t,n,r,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of m(n))!x.call(t,c)&&c!==r&&o(t,c,{get:()=>n[c],enumerable:!(i=p(n,c))||i.enumerable});return t};var C=(t,n,r)=>(r=t!=null?s(u(t)):{},l(n||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),b=t=>l(o({},\"__esModule\",{value:!0}),t);var h=f((B,a)=>{a.exports=_jsx_runtime});var k={};g(k,{default:()=>R,frontmatter:()=>j});var e=C(h()),j={title:\"\\u89E3\\u91CA React \\u4E2D\\u7684\\u5C55\\u793A\\u7EC4\\u4EF6\\u4E0E\\u5BB9\\u5668\\u7EC4\\u4EF6\\u6A21\\u5F0F\"};function d(t){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",code:\"code\",h4:\"h4\",ul:\"ul\",li:\"li\",pre:\"pre\",strong:\"strong\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 React \\u4E2D\\uFF0C\\u5C55\\u793A\\u7EC4\\u4EF6\\u4E0E\\u5BB9\\u5668\\u7EC4\\u4EF6\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u8BBE\\u8BA1\\u65B9\\u6CD5\\uFF0C\\u5176\\u4E2D\\u5C55\\u793A\\u7EC4\\u4EF6\\u4FA7\\u91CD\\u4E8E\\u5916\\u89C2\\uFF0C\\u800C\\u5BB9\\u5668\\u7EC4\\u4EF6\\u4FA7\\u91CD\\u4E8E\\u5DE5\\u4F5C\\u65B9\\u5F0F\\u3002\\u5C55\\u793A\\u7EC4\\u4EF6\\u8D1F\\u8D23\\u6E32\\u67D3 HTML \\u548C CSS\\uFF0C\\u800C\\u5BB9\\u5668\\u7EC4\\u4EF6\\u5904\\u7406\\u903B\\u8F91\\u548C\\u72B6\\u6001\\u7BA1\\u7406\\u3002\\u8FD9\\u79CD\\u5206\\u79BB\\u6709\\u52A9\\u4E8E\\u7EF4\\u62A4\\u5E72\\u51C0\\u548C\\u6709\\u7EC4\\u7EC7\\u7684 codebase\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u4E2D\\u7684\\u5C55\\u793A\\u7EC4\\u4EF6\\u4E0E\\u5BB9\\u5668\\u7EC4\\u4EF6\\u6A21\\u5F0F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5C55\\u793A\\u7EC4\\u4EF6\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5C55\\u793A\\u7EC4\\u4EF6\\u4E3B\\u8981\\u5173\\u6CE8 UI\\u3002\\u5B83\\u4EEC\\u4EC5\\u901A\\u8FC7 props \\u63A5\\u6536\\u6570\\u636E\\u548C\\u56DE\\u8C03\\uFF0C\\u5E76\\u4E14\\u5F88\\u5C11\\u6709\\u81EA\\u5DF1\\u7684\\u72B6\\u6001\\uFF08\\u9664\\u4E86 UI \\u72B6\\u6001\\uFF0C\\u5982 \",(0,e.jsx)(n.code,{children:\"hover\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"active\"}),\"\\uFF09\\u3002\\u5B83\\u4EEC\\u901A\\u5E38\\u662F\\u65E0\\u72B6\\u6001\\u51FD\\u6570\\u7EC4\\u4EF6\\uFF0C\\u4F46\\u4E5F\\u53EF\\u4EE5\\u662F\\u7C7B\\u7EC4\\u4EF6\\u3002\"]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u7279\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5173\\u6CE8\\u5916\\u89C2\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u901A\\u8FC7 props \\u63A5\\u6536\\u6570\\u636E\\u548C\\u56DE\\u8C03\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5F88\\u5C11\\u6709\\u81EA\\u5DF1\\u7684\\u72B6\\u6001\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u901A\\u5E38\\u5199\\u6210\\u51FD\\u6570\\u7EC4\\u4EF6\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4E0D\\u76F4\\u63A5\\u4F7F\\u7528 Redux \\u6216\\u5176\\u4ED6\\u72B6\\u6001\\u7BA1\\u7406\\u5E93\"}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F8B\\u5B50\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`const Button = ({ onClick, label }) => (\n  <button onClick={onClick}>{label}</button>\n);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5BB9\\u5668\\u7EC4\\u4EF6\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5BB9\\u5668\\u7EC4\\u4EF6\\u5173\\u6CE8\\u4E8E\\u5DE5\\u4F5C\\u65B9\\u5F0F\\u3002\\u5B83\\u4EEC\\u7BA1\\u7406\\u72B6\\u6001\\u5E76\\u5904\\u7406\\u4E1A\\u52A1\\u903B\\u8F91\\u3002\\u5B83\\u4EEC\\u901A\\u5E38\\u83B7\\u53D6\\u6570\\u636E\\u3001\\u5904\\u7406\\u7528\\u6237\\u4EA4\\u4E92\\uFF0C\\u5E76\\u5C06\\u6570\\u636E\\u4F5C\\u4E3A props \\u4F20\\u9012\\u7ED9\\u5C55\\u793A\\u7EC4\\u4EF6\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u7279\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5173\\u6CE8\\u5DE5\\u4F5C\\u65B9\\u5F0F\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u7BA1\\u7406\\u72B6\\u6001\\u5E76\\u5904\\u7406\\u4E1A\\u52A1\\u903B\\u8F91\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u83B7\\u53D6\\u6570\\u636E\\u5E76\\u5904\\u7406\\u7528\\u6237\\u4EA4\\u4E92\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5C06\\u6570\\u636E\\u548C\\u56DE\\u8C03\\u4F20\\u9012\\u7ED9\\u5C55\\u793A\\u7EC4\\u4EF6\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u7ECF\\u5E38\\u4F7F\\u7528 Redux \\u6216\\u5176\\u4ED6\\u72B6\\u6001\\u7BA1\\u7406\\u5E93\"}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F8B\\u5B50\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport { fetchData } from './actions';\nimport Button from './Button';\n\nclass ButtonContainer extends Component {\n  componentDidMount() {\n    this.props.fetchData();\n  }\n\n  handleClick = () => {\n    // Handle button click\n  };\n\n  render() {\n    return <Button onClick={this.handleClick} label=\"Click me\" />;\n  }\n}\n\nconst mapDispatchToProps = {\n  fetchData,\n};\n\nexport default connect(null, mapDispatchToProps)(ButtonContainer);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5173\\u6CE8\\u70B9\\u5206\\u79BB\"}),\"\\uFF1A\\u901A\\u8FC7\\u5C06 UI \\u4E0E\\u903B\\u8F91\\u5206\\u79BB\\uFF0C\\u4EE3\\u7801\\u5E93\\u53D8\\u5F97\\u66F4\\u52A0\\u6A21\\u5757\\u5316\\uFF0C\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u91CD\\u7528\\u6027\"}),\"\\uFF1A\\u5C55\\u793A\\u7EC4\\u4EF6\\u53EF\\u4EE5\\u5728\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4E0D\\u540C\\u90E8\\u5206\\u91CD\\u590D\\u4F7F\\u7528\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u4E0D\\u4E0E\\u7279\\u5B9A\\u903B\\u8F91\\u76F8\\u5173\\u8054\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u6D4B\\u8BD5\\u6027\"}),\"\\uFF1A\\u5C55\\u793A\\u7EC4\\u4EF6\\u66F4\\u5BB9\\u6613\\u6D4B\\u8BD5\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u662F\\u65E0\\u72B6\\u6001\\u7684\\uFF0C\\u5E76\\u4E14\\u4EC5\\u4F9D\\u8D56\\u4E8E props\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/passing-props-to-a-component\",children:\"React documentation on components and props\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0\",children:\"Dan Abramov's article on presentational and container components\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://redux.js.org/basics/usage-with-react#presentational-and-container-components\",children:\"Redux documentation on presentational and container components\"})}),`\n`]})]})}function D(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(d,t)})):d(t)}var R=D;return b(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),C=(t,n)=>{for(var r in n)o(t,r,{get:n[r],enumerable:!0})},l=(t,n,r,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of u(n))!f.call(t,c)&&c!==r&&o(t,c,{get:()=>n[c],enumerable:!(i=m(n,c))||i.enumerable});return t};var b=(t,n,r)=>(r=t!=null?p(x(t)):{},l(n||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),D=t=>l(o({},\"__esModule\",{value:!0}),t);var h=g((_,a)=>{a.exports=_jsx_runtime});var j={};C(j,{default:()=>s,frontmatter:()=>R});var e=b(h()),R={title:\"\\u89E3\\u91CA React \\u4E2D\\u7684\\u5C55\\u793A\\u7EC4\\u4EF6\\u4E0E\\u5BB9\\u5668\\u7EC4\\u4EF6\\u6A21\\u5F0F\"};function d(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 React \\u4E2D\\uFF0C\\u5C55\\u793A\\u7EC4\\u4EF6\\u4E0E\\u5BB9\\u5668\\u7EC4\\u4EF6\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u8BBE\\u8BA1\\u65B9\\u6CD5\\uFF0C\\u5176\\u4E2D\\u5C55\\u793A\\u7EC4\\u4EF6\\u4FA7\\u91CD\\u4E8E\\u5916\\u89C2\\uFF0C\\u800C\\u5BB9\\u5668\\u7EC4\\u4EF6\\u4FA7\\u91CD\\u4E8E\\u5DE5\\u4F5C\\u65B9\\u5F0F\\u3002\\u5C55\\u793A\\u7EC4\\u4EF6\\u8D1F\\u8D23\\u6E32\\u67D3 HTML \\u548C CSS\\uFF0C\\u800C\\u5BB9\\u5668\\u7EC4\\u4EF6\\u5904\\u7406\\u903B\\u8F91\\u548C\\u72B6\\u6001\\u7BA1\\u7406\\u3002\\u8FD9\\u79CD\\u5206\\u79BB\\u6709\\u52A9\\u4E8E\\u7EF4\\u62A4\\u5E72\\u51C0\\u548C\\u6709\\u7EC4\\u7EC7\\u7684 codebase\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u4E2D\\u7684\\u5C55\\u793A\\u7EC4\\u4EF6\\u4E0E\\u5BB9\\u5668\\u7EC4\\u4EF6\\u6A21\\u5F0F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5C55\\u793A\\u7EC4\\u4EF6\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5C55\\u793A\\u7EC4\\u4EF6\\u4E3B\\u8981\\u5173\\u6CE8 UI\\u3002\\u5B83\\u4EEC\\u4EC5\\u901A\\u8FC7 props \\u63A5\\u6536\\u6570\\u636E\\u548C\\u56DE\\u8C03\\uFF0C\\u5E76\\u4E14\\u5F88\\u5C11\\u6709\\u81EA\\u5DF1\\u7684\\u72B6\\u6001\\uFF08\\u9664\\u4E86 UI \\u72B6\\u6001\\uFF0C\\u5982 \",(0,e.jsx)(n.code,{children:\"hover\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"active\"}),\"\\uFF09\\u3002\\u5B83\\u4EEC\\u901A\\u5E38\\u662F\\u65E0\\u72B6\\u6001\\u51FD\\u6570\\u7EC4\\u4EF6\\uFF0C\\u4F46\\u4E5F\\u53EF\\u4EE5\\u662F\\u7C7B\\u7EC4\\u4EF6\\u3002\"]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u7279\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5173\\u6CE8\\u5916\\u89C2\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u901A\\u8FC7 props \\u63A5\\u6536\\u6570\\u636E\\u548C\\u56DE\\u8C03\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5F88\\u5C11\\u6709\\u81EA\\u5DF1\\u7684\\u72B6\\u6001\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u901A\\u5E38\\u5199\\u6210\\u51FD\\u6570\\u7EC4\\u4EF6\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4E0D\\u76F4\\u63A5\\u4F7F\\u7528 Redux \\u6216\\u5176\\u4ED6\\u72B6\\u6001\\u7BA1\\u7406\\u5E93\"}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F8B\\u5B50\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`const Button = ({ onClick, label }) => (\n  <button onClick={onClick}>{label}</button>\n);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5BB9\\u5668\\u7EC4\\u4EF6\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5BB9\\u5668\\u7EC4\\u4EF6\\u5173\\u6CE8\\u4E8E\\u5DE5\\u4F5C\\u65B9\\u5F0F\\u3002\\u5B83\\u4EEC\\u7BA1\\u7406\\u72B6\\u6001\\u5E76\\u5904\\u7406\\u4E1A\\u52A1\\u903B\\u8F91\\u3002\\u5B83\\u4EEC\\u901A\\u5E38\\u83B7\\u53D6\\u6570\\u636E\\u3001\\u5904\\u7406\\u7528\\u6237\\u4EA4\\u4E92\\uFF0C\\u5E76\\u5C06\\u6570\\u636E\\u4F5C\\u4E3A props \\u4F20\\u9012\\u7ED9\\u5C55\\u793A\\u7EC4\\u4EF6\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u7279\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5173\\u6CE8\\u5DE5\\u4F5C\\u65B9\\u5F0F\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u7BA1\\u7406\\u72B6\\u6001\\u5E76\\u5904\\u7406\\u4E1A\\u52A1\\u903B\\u8F91\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u83B7\\u53D6\\u6570\\u636E\\u5E76\\u5904\\u7406\\u7528\\u6237\\u4EA4\\u4E92\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5C06\\u6570\\u636E\\u548C\\u56DE\\u8C03\\u4F20\\u9012\\u7ED9\\u5C55\\u793A\\u7EC4\\u4EF6\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u7ECF\\u5E38\\u4F7F\\u7528 Redux \\u6216\\u5176\\u4ED6\\u72B6\\u6001\\u7BA1\\u7406\\u5E93\"}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F8B\\u5B50\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport { fetchData } from './actions';\nimport Button from './Button';\n\nclass ButtonContainer extends Component {\n  componentDidMount() {\n    this.props.fetchData();\n  }\n\n  handleClick = () => {\n    // Handle button click\n  };\n\n  render() {\n    return <Button onClick={this.handleClick} label=\"Click me\" />;\n  }\n}\n\nconst mapDispatchToProps = {\n  fetchData,\n};\n\nexport default connect(null, mapDispatchToProps)(ButtonContainer);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5173\\u6CE8\\u70B9\\u5206\\u79BB\"}),\"\\uFF1A\\u901A\\u8FC7\\u5C06 UI \\u4E0E\\u903B\\u8F91\\u5206\\u79BB\\uFF0C\\u4EE3\\u7801\\u5E93\\u53D8\\u5F97\\u66F4\\u52A0\\u6A21\\u5757\\u5316\\uFF0C\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u91CD\\u7528\\u6027\"}),\"\\uFF1A\\u5C55\\u793A\\u7EC4\\u4EF6\\u53EF\\u4EE5\\u5728\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4E0D\\u540C\\u90E8\\u5206\\u91CD\\u590D\\u4F7F\\u7528\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u4E0D\\u4E0E\\u7279\\u5B9A\\u903B\\u8F91\\u76F8\\u5173\\u8054\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u6D4B\\u8BD5\\u6027\"}),\"\\uFF1A\\u5C55\\u793A\\u7EC4\\u4EF6\\u66F4\\u5BB9\\u6613\\u6D4B\\u8BD5\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u662F\\u65E0\\u72B6\\u6001\\u7684\\uFF0C\\u5E76\\u4E14\\u4EC5\\u4F9D\\u8D56\\u4E8E props\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/passing-props-to-a-component\",children:\"React documentation on components and props\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0\",children:\"Dan Abramov's article on presentational and container components\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://redux.js.org/basics/usage-with-react#presentational-and-container-components\",children:\"Redux documentation on presentational and container components\"})}),`\n`]})]})}function s(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(d,{...t})}):d(t)}return D(j);})();\n;return Component;"
 }
\ No newline at end of file
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 c8a5e2635..b373525dc 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-same-origin-policy-with-regards-to-javascript/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),w=(i,e)=>{for(var r in e)t(i,r,{get:e[r],enumerable:!0})},c=(i,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!u.call(i,o)&&o!==r&&t(i,o,{get:()=>e[o],enumerable:!(s=p(e,o))||s.enumerable});return i};var x=(i,e,r)=>(r=i!=null?d(g(i)):{},c(e||!i||!i.__esModule?t(r,\"default\",{value:i,enumerable:!0}):r,i)),S=i=>c(t({},\"__esModule\",{value:!0}),i);var h=f((O,a)=>{a.exports=_jsx_runtime});var R={};w(R,{default:()=>C,frontmatter:()=>b});var n=x(h()),b={title:\"Explain the same-origin policy with regards to JavaScript\"};function l(i){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",pre:\"pre\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The same-origin policy is a security measure implemented in web browsers to prevent malicious scripts on one page from accessing data on another page. It ensures that web pages can only make requests to the same origin, where the origin is defined by the combination of the protocol, domain, and port. For example, a script from \",(0,n.jsx)(e.code,{children:\"http://example.com\"}),\" cannot access data from \",(0,n.jsx)(e.code,{children:\"http://anotherdomain.com\"}),\".\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is the same-origin policy?\"}),`\n`,(0,n.jsx)(e.p,{children:\"The same-origin policy is a critical security concept for web applications. It restricts how documents or scripts loaded from one origin can interact with resources from another origin. This policy helps to prevent malicious activities such as cross-site scripting (XSS) and cross-site request forgery (CSRF).\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition of origin\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"An origin is defined by the scheme (protocol), host (domain), and port of a URL. For example, the origin of \",(0,n.jsx)(e.code,{children:\"http://example.com:80/page\"}),\" is:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Scheme: \",(0,n.jsx)(e.code,{children:\"http\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Host: \",(0,n.jsx)(e.code,{children:\"example.com\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Port: \",(0,n.jsx)(e.code,{children:\"80\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Two URLs have the same origin if and only if all three components (scheme, host, and port) are identical.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How it works\"}),`\n`,(0,n.jsx)(e.p,{children:\"When a web page makes a request to another URL, the browser checks if the request is to the same origin. If the request is to a different origin, the browser blocks the request unless the server explicitly allows it using mechanisms like Cross-Origin Resource Sharing (CORS).\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Consider the following example:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"http://example.com/page1\"}),\" can access \",(0,n.jsx)(e.code,{children:\"http://example.com/page2\"}),\" because they share the same origin.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"http://example.com/page1\"}),\" cannot access \",(0,n.jsx)(e.code,{children:\"http://anotherdomain.com/page\"}),\" because they have different origins.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Exceptions\"}),`\n`,(0,n.jsx)(e.p,{children:\"There are some exceptions to the same-origin policy, such as:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Cross-Origin Resource Sharing (CORS): A mechanism that allows servers to specify who can access their resources.\"}),`\n`,(0,n.jsx)(e.li,{children:\"JSONP: A technique used to request data from a server residing in a different domain.\"}),`\n`,(0,n.jsx)(e.li,{children:\"WebSockets: A protocol that allows for full-duplex communication channels over a single TCP connection.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Code example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here is a simple example demonstrating the same-origin policy:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!-- index.html -->\n<script>\n  // This will work because the request is to the same origin\n  fetch('/api/data')\n    .then((response) => response.json())\n    .then((data) => console.log(data));\n\n  // This will be blocked by the browser because the request is to a different origin\n  fetch('http://anotherdomain.com/api/data')\n    .then((response) => response.json())\n    .then((data) => console.log(data))\n    .catch((error) => console.error('Error:', error));\n<\\/script>\n`})}),`\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/Web/Security/Same-origin_policy\",children:\"MDN Web Docs: Same-origin policy\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS\",children:\"MDN Web Docs: Cross-Origin Resource Sharing (CORS)\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://owasp.org/www-community/attacks/xss/\",children:\"OWASP: Cross-Site Scripting (XSS)\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://owasp.org/www-community/attacks/csrf/\",children:\"OWASP: Cross-Site Request Forgery (CSRF)\"})}),`\n`]})]})}function y(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(l,i)})):l(i)}var C=y;return S(R);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var w=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),x=(i,e)=>{for(var r in e)t(i,r,{get:e[r],enumerable:!0})},c=(i,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of g(e))!f.call(i,o)&&o!==r&&t(i,o,{get:()=>e[o],enumerable:!(s=m(e,o))||s.enumerable});return i};var S=(i,e,r)=>(r=i!=null?p(u(i)):{},c(e||!i||!i.__esModule?t(r,\"default\",{value:i,enumerable:!0}):r,i)),y=i=>c(t({},\"__esModule\",{value:!0}),i);var h=w((v,a)=>{a.exports=_jsx_runtime});var C={};x(C,{default:()=>d,frontmatter:()=>b});var n=S(h()),b={title:\"Explain the same-origin policy with regards to JavaScript\"};function l(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The same-origin policy is a security measure implemented in web browsers to prevent malicious scripts on one page from accessing data on another page. It ensures that web pages can only make requests to the same origin, where the origin is defined by the combination of the protocol, domain, and port. For example, a script from \",(0,n.jsx)(e.code,{children:\"http://example.com\"}),\" cannot access data from \",(0,n.jsx)(e.code,{children:\"http://anotherdomain.com\"}),\".\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is the same-origin policy?\"}),`\n`,(0,n.jsx)(e.p,{children:\"The same-origin policy is a critical security concept for web applications. It restricts how documents or scripts loaded from one origin can interact with resources from another origin. This policy helps to prevent malicious activities such as cross-site scripting (XSS) and cross-site request forgery (CSRF).\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition of origin\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"An origin is defined by the scheme (protocol), host (domain), and port of a URL. For example, the origin of \",(0,n.jsx)(e.code,{children:\"http://example.com:80/page\"}),\" is:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Scheme: \",(0,n.jsx)(e.code,{children:\"http\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Host: \",(0,n.jsx)(e.code,{children:\"example.com\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Port: \",(0,n.jsx)(e.code,{children:\"80\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Two URLs have the same origin if and only if all three components (scheme, host, and port) are identical.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How it works\"}),`\n`,(0,n.jsx)(e.p,{children:\"When a web page makes a request to another URL, the browser checks if the request is to the same origin. If the request is to a different origin, the browser blocks the request unless the server explicitly allows it using mechanisms like Cross-Origin Resource Sharing (CORS).\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Consider the following example:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"http://example.com/page1\"}),\" can access \",(0,n.jsx)(e.code,{children:\"http://example.com/page2\"}),\" because they share the same origin.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"http://example.com/page1\"}),\" cannot access \",(0,n.jsx)(e.code,{children:\"http://anotherdomain.com/page\"}),\" because they have different origins.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Exceptions\"}),`\n`,(0,n.jsx)(e.p,{children:\"There are some exceptions to the same-origin policy, such as:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Cross-Origin Resource Sharing (CORS): A mechanism that allows servers to specify who can access their resources.\"}),`\n`,(0,n.jsx)(e.li,{children:\"JSONP: A technique used to request data from a server residing in a different domain.\"}),`\n`,(0,n.jsx)(e.li,{children:\"WebSockets: A protocol that allows for full-duplex communication channels over a single TCP connection.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Code example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here is a simple example demonstrating the same-origin policy:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!-- index.html -->\n<script>\n  // This will work because the request is to the same origin\n  fetch('/api/data')\n    .then((response) => response.json())\n    .then((data) => console.log(data));\n\n  // This will be blocked by the browser because the request is to a different origin\n  fetch('http://anotherdomain.com/api/data')\n    .then((response) => response.json())\n    .then((data) => console.log(data))\n    .catch((error) => console.error('Error:', error));\n<\\/script>\n`})}),`\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/Web/Security/Same-origin_policy\",children:\"MDN Web Docs: Same-origin policy\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS\",children:\"MDN Web Docs: Cross-Origin Resource Sharing (CORS)\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://owasp.org/www-community/attacks/xss/\",children:\"OWASP: Cross-Site Scripting (XSS)\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://owasp.org/www-community/attacks/csrf/\",children:\"OWASP: Cross-Site Request Forgery (CSRF)\"})}),`\n`]})]})}function d(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(l,{...i})}):l(i)}return y(C);})();\n;return Component;"
 }
\ No newline at end of file
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 4b5e51e2a..9df68a45f 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-same-origin-policy-with-regards-to-javascript/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var f=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),b=(e,o)=>{for(var a in o)i(e,a,{get:o[a],enumerable:!0})},s=(e,o,a,m)=>{if(o&&typeof o==\"object\"||typeof o==\"function\")for(let t of l(o))!x.call(e,t)&&t!==a&&i(e,t,{get:()=>o[t],enumerable:!(m=u(o,t))||m.enumerable});return e};var j=(e,o,a)=>(a=e!=null?p(g(e)):{},s(o||!e||!e.__esModule?i(a,\"default\",{value:e,enumerable:!0}):a,e)),_=e=>s(i({},\"__esModule\",{value:!0}),e);var r=f((O,c)=>{c.exports=_jsx_runtime});var v={};b(v,{default:()=>q,frontmatter:()=>h});var n=j(r()),h={title:\"Explique a pol\\xEDtica de mesma origem em rela\\xE7\\xE3o ao JavaScript\"};function d(e){let o=Object.assign({p:\"p\"},e.components);return(0,n.jsx)(o.p,{children:\"A pol\\xEDtica de mesma origem impede o JavaScript de fazer solicita\\xE7\\xF5es al\\xE9m dos limites de dom\\xEDnio. Uma origem \\xE9 definida como uma combina\\xE7\\xE3o de esquema URI, nome do host e n\\xFAmero da porta. Essa pol\\xEDtica impede que um script malicioso em uma p\\xE1gina obtenha acesso a dados sens\\xEDveis em outra p\\xE1gina da web por meio do Document Object Model dessa p\\xE1gina.\"})}function M(e={}){let{wrapper:o}=e.components||{};return o?(0,n.jsx)(o,Object.assign({},e,{children:(0,n.jsx)(d,e)})):d(e)}var q=M;return _(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var _=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),b=(e,o)=>{for(var a in o)i(e,a,{get:o[a],enumerable:!0})},s=(e,o,a,n)=>{if(o&&typeof o==\"object\"||typeof o==\"function\")for(let t of x(o))!g.call(e,t)&&t!==a&&i(e,t,{get:()=>o[t],enumerable:!(n=l(o,t))||n.enumerable});return e};var h=(e,o,a)=>(a=e!=null?u(f(e)):{},s(o||!e||!e.__esModule?i(a,\"default\",{value:e,enumerable:!0}):a,e)),j=e=>s(i({},\"__esModule\",{value:!0}),e);var c=_((D,r)=>{r.exports=_jsx_runtime});var q={};b(q,{default:()=>p,frontmatter:()=>M});var m=h(c()),M={title:\"Explique a pol\\xEDtica de mesma origem em rela\\xE7\\xE3o ao JavaScript\"};function d(e){let o={p:\"p\",...e.components};return(0,m.jsx)(o.p,{children:\"A pol\\xEDtica de mesma origem impede o JavaScript de fazer solicita\\xE7\\xF5es al\\xE9m dos limites de dom\\xEDnio. Uma origem \\xE9 definida como uma combina\\xE7\\xE3o de esquema URI, nome do host e n\\xFAmero da porta. Essa pol\\xEDtica impede que um script malicioso em uma p\\xE1gina obtenha acesso a dados sens\\xEDveis em outra p\\xE1gina da web por meio do Document Object Model dessa p\\xE1gina.\"})}function p(e={}){let{wrapper:o}=e.components||{};return o?(0,m.jsx)(o,{...e,children:(0,m.jsx)(d,{...e})}):d(e)}return j(q);})();\n;return Component;"
 }
\ No newline at end of file
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 5ffd58f03..bcae55602 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-same-origin-policy-with-regards-to-javascript/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var u=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),x=(r,e)=>{for(var c in e)h(r,c,{get:e[c],enumerable:!0})},t=(r,e,c,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!S.call(r,i)&&i!==c&&h(r,i,{get:()=>e[i],enumerable:!(l=p(e,i))||l.enumerable});return r};var b=(r,e,c)=>(c=r!=null?s(g(r)):{},t(e||!r||!r.__esModule?h(c,\"default\",{value:r,enumerable:!0}):c,r)),f=r=>t(h({},\"__esModule\",{value:!0}),r);var d=u((W,o)=>{o.exports=_jsx_runtime});var O={};x(O,{default:()=>R,frontmatter:()=>w});var n=b(d()),w={title:\"\\u89E3\\u91CA JavaScript \\u65B9\\u9762\\u76F8\\u540C\\u7684\\u6765\\u6E90\\u7B56\\u7565\"};function a(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",pre:\"pre\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u540C\\u6E90\\u7B56\\u7565\\u662F Web \\u6D4F\\u89C8\\u5668\\u4E2D\\u5B9E\\u65BD\\u7684\\u4E00\\u9879\\u5B89\\u5168\\u63AA\\u65BD\\uFF0C\\u65E8\\u5728\\u9632\\u6B62\\u4E00\\u4E2A\\u9875\\u9762\\u4E0A\\u7684\\u6076\\u610F\\u811A\\u672C\\u8BBF\\u95EE\\u53E6\\u4E00\\u4E2A\\u9875\\u9762\\u4E0A\\u7684\\u6570\\u636E\\u3002\\u5B83\\u786E\\u4FDD\\u7F51\\u9875\\u53EA\\u80FD\\u5411\\u540C\\u4E00\\u6765\\u6E90\\u53D1\\u51FA\\u8BF7\\u6C42\\uFF0C\\u5176\\u4E2D\\u6765\\u6E90\\u7531\\u534F\\u8BAE\\u3001\\u57DF\\u548C\\u7AEF\\u53E3\\u7684\\u7EC4\\u5408\\u5B9A\\u4E49\\u3002\\u4F8B\\u5982\\uFF0C\\u6765\\u81EA \",(0,n.jsx)(e.code,{children:\"http://example.com\"}),\" \\u7684\\u811A\\u672C\\u65E0\\u6CD5\\u8BBF\\u95EE\\u6765\\u81EA \",(0,n.jsx)(e.code,{children:\"http://anotherdomain.com\"}),\" \\u7684\\u6570\\u636E\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u540C\\u6E90\\u7B56\\u7565\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u540C\\u6E90\\u7B56\\u7565\\u662F Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4E00\\u4E2A\\u5173\\u952E\\u5B89\\u5168\\u6982\\u5FF5\\u3002\\u5B83\\u9650\\u5236\\u4E86\\u4ECE\\u4E00\\u4E2A\\u6765\\u6E90\\u52A0\\u8F7D\\u7684\\u6587\\u6863\\u6216\\u811A\\u672C\\u4E0E\\u6765\\u81EA\\u53E6\\u4E00\\u4E2A\\u6765\\u6E90\\u7684\\u8D44\\u6E90\\u4EA4\\u4E92\\u7684\\u65B9\\u5F0F\\u3002\\u6B64\\u7B56\\u7565\\u6709\\u52A9\\u4E8E\\u9632\\u6B62\\u6076\\u610F\\u6D3B\\u52A8\\uFF0C\\u4F8B\\u5982\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS) \\u548C\\u8DE8\\u7AD9\\u70B9\\u8BF7\\u6C42\\u4F2A\\u9020 (CSRF)\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6765\\u6E90\\u7684\\u5B9A\\u4E49\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6765\\u6E90\\u7531 URL \\u7684\\u65B9\\u6848\\uFF08\\u534F\\u8BAE\\uFF09\\u3001\\u4E3B\\u673A\\uFF08\\u57DF\\uFF09\\u548C\\u7AEF\\u53E3\\u5B9A\\u4E49\\u3002\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"http://example.com:80/page\"}),\" \\u7684\\u6765\\u6E90\\u662F\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u65B9\\u6848\\uFF1A\",(0,n.jsx)(e.code,{children:\"http\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4E3B\\u673A\\uFF1A\",(0,n.jsx)(e.code,{children:\"example.com\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u7AEF\\u53E3\\uFF1A\",(0,n.jsx)(e.code,{children:\"80\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5F53\\u4E14\\u4EC5\\u5F53\\u6240\\u6709\\u4E09\\u4E2A\\u7EC4\\u4EF6\\uFF08\\u65B9\\u6848\\u3001\\u4E3B\\u673A\\u548C\\u7AEF\\u53E3\\uFF09\\u90FD\\u76F8\\u540C\\u65F6\\uFF0C\\u4E24\\u4E2A URL \\u5177\\u6709\\u76F8\\u540C\\u7684\\u6765\\u6E90\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B83\\u662F\\u5982\\u4F55\\u5DE5\\u4F5C\\u7684\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5F53\\u7F51\\u9875\\u5411\\u53E6\\u4E00\\u4E2A URL \\u53D1\\u51FA\\u8BF7\\u6C42\\u65F6\\uFF0C\\u6D4F\\u89C8\\u5668\\u4F1A\\u68C0\\u67E5\\u8BE5\\u8BF7\\u6C42\\u662F\\u5426\\u6765\\u81EA\\u540C\\u4E00\\u6765\\u6E90\\u3002\\u5982\\u679C\\u8BE5\\u8BF7\\u6C42\\u6765\\u81EA\\u4E0D\\u540C\\u7684\\u6765\\u6E90\\uFF0C\\u6D4F\\u89C8\\u5668\\u4F1A\\u963B\\u6B62\\u8BE5\\u8BF7\\u6C42\\uFF0C\\u9664\\u975E\\u670D\\u52A1\\u5668\\u4F7F\\u7528\\u8DE8\\u57DF\\u8D44\\u6E90\\u5171\\u4EAB (CORS) \\u7B49\\u673A\\u5236\\u660E\\u786E\\u5141\\u8BB8\\u8BE5\\u8BF7\\u6C42\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F8B\\u5B50\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8003\\u8651\\u4EE5\\u4E0B\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"http://example.com/page1\"}),\" \\u53EF\\u4EE5\\u8BBF\\u95EE \",(0,n.jsx)(e.code,{children:\"http://example.com/page2\"}),\"\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u5171\\u4EAB\\u76F8\\u540C\\u7684\\u6765\\u6E90\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"http://example.com/page1\"}),\" \\u65E0\\u6CD5\\u8BBF\\u95EE \",(0,n.jsx)(e.code,{children:\"http://anotherdomain.com/page\"}),\"\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u5177\\u6709\\u4E0D\\u540C\\u7684\\u6765\\u6E90\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5F02\\u5E38\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u540C\\u6E90\\u7B56\\u7565\\u6709\\u4E00\\u4E9B\\u4F8B\\u5916\\uFF0C\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u8DE8\\u57DF\\u8D44\\u6E90\\u5171\\u4EAB (CORS)\\uFF1A\\u4E00\\u79CD\\u5141\\u8BB8\\u670D\\u52A1\\u5668\\u6307\\u5B9A\\u8C01\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5176\\u8D44\\u6E90\\u7684\\u673A\\u5236\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"JSONP\\uFF1A\\u4E00\\u79CD\\u7528\\u4E8E\\u4ECE\\u4F4D\\u4E8E\\u4E0D\\u540C\\u57DF\\u4E2D\\u7684\\u670D\\u52A1\\u5668\\u8BF7\\u6C42\\u6570\\u636E\\u7684\\u6280\\u672F\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"WebSockets\\uFF1A\\u4E00\\u79CD\\u5141\\u8BB8\\u901A\\u8FC7\\u5355\\u4E2A TCP \\u8FDE\\u63A5\\u8FDB\\u884C\\u5168\\u53CC\\u5DE5\\u901A\\u4FE1\\u901A\\u9053\\u7684\\u534F\\u8BAE\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EE3\\u7801\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u793A\\u4F8B\\uFF0C\\u6F14\\u793A\\u4E86\\u540C\\u6E90\\u7B56\\u7565\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!-- index.html -->\n<script>\n  // This will work because the request is to the same origin\n  fetch('/api/data')\n    .then((response) => response.json())\n    .then((data) => console.log(data));\n\n  // This will be blocked by the browser because the request is to a different origin\n  fetch('http://anotherdomain.com/api/data')\n    .then((response) => response.json())\n    .then((data) => console.log(data))\n    .catch((error) => console.error('Error:', error));\n<\\/script>\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/Security/Same-origin_policy\",children:\"MDN Web Docs: Same-origin policy\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS\",children:\"MDN Web Docs: Cross-Origin Resource Sharing (CORS)\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://owasp.org/www-community/attacks/xss/\",children:\"OWASP: Cross-Site Scripting (XSS)\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://owasp.org/www-community/attacks/csrf/\",children:\"OWASP: Cross-Site Request Forgery (CSRF)\"})}),`\n`]})]})}function C(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(a,r)})):a(r)}var R=C;return f(O);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var h=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var x=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var c in e)h(r,c,{get:e[c],enumerable:!0})},t=(r,e,c,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of S(e))!u.call(r,i)&&i!==c&&h(r,i,{get:()=>e[i],enumerable:!(l=m(e,i))||l.enumerable});return r};var b=(r,e,c)=>(c=r!=null?p(g(r)):{},t(e||!r||!r.__esModule?h(c,\"default\",{value:r,enumerable:!0}):c,r)),w=r=>t(h({},\"__esModule\",{value:!0}),r);var d=x((y,o)=>{o.exports=_jsx_runtime});var R={};f(R,{default:()=>s,frontmatter:()=>C});var n=b(d()),C={title:\"\\u89E3\\u91CA JavaScript \\u65B9\\u9762\\u76F8\\u540C\\u7684\\u6765\\u6E90\\u7B56\\u7565\"};function a(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u540C\\u6E90\\u7B56\\u7565\\u662F Web \\u6D4F\\u89C8\\u5668\\u4E2D\\u5B9E\\u65BD\\u7684\\u4E00\\u9879\\u5B89\\u5168\\u63AA\\u65BD\\uFF0C\\u65E8\\u5728\\u9632\\u6B62\\u4E00\\u4E2A\\u9875\\u9762\\u4E0A\\u7684\\u6076\\u610F\\u811A\\u672C\\u8BBF\\u95EE\\u53E6\\u4E00\\u4E2A\\u9875\\u9762\\u4E0A\\u7684\\u6570\\u636E\\u3002\\u5B83\\u786E\\u4FDD\\u7F51\\u9875\\u53EA\\u80FD\\u5411\\u540C\\u4E00\\u6765\\u6E90\\u53D1\\u51FA\\u8BF7\\u6C42\\uFF0C\\u5176\\u4E2D\\u6765\\u6E90\\u7531\\u534F\\u8BAE\\u3001\\u57DF\\u548C\\u7AEF\\u53E3\\u7684\\u7EC4\\u5408\\u5B9A\\u4E49\\u3002\\u4F8B\\u5982\\uFF0C\\u6765\\u81EA \",(0,n.jsx)(e.code,{children:\"http://example.com\"}),\" \\u7684\\u811A\\u672C\\u65E0\\u6CD5\\u8BBF\\u95EE\\u6765\\u81EA \",(0,n.jsx)(e.code,{children:\"http://anotherdomain.com\"}),\" \\u7684\\u6570\\u636E\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u540C\\u6E90\\u7B56\\u7565\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u540C\\u6E90\\u7B56\\u7565\\u662F Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4E00\\u4E2A\\u5173\\u952E\\u5B89\\u5168\\u6982\\u5FF5\\u3002\\u5B83\\u9650\\u5236\\u4E86\\u4ECE\\u4E00\\u4E2A\\u6765\\u6E90\\u52A0\\u8F7D\\u7684\\u6587\\u6863\\u6216\\u811A\\u672C\\u4E0E\\u6765\\u81EA\\u53E6\\u4E00\\u4E2A\\u6765\\u6E90\\u7684\\u8D44\\u6E90\\u4EA4\\u4E92\\u7684\\u65B9\\u5F0F\\u3002\\u6B64\\u7B56\\u7565\\u6709\\u52A9\\u4E8E\\u9632\\u6B62\\u6076\\u610F\\u6D3B\\u52A8\\uFF0C\\u4F8B\\u5982\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS) \\u548C\\u8DE8\\u7AD9\\u70B9\\u8BF7\\u6C42\\u4F2A\\u9020 (CSRF)\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6765\\u6E90\\u7684\\u5B9A\\u4E49\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6765\\u6E90\\u7531 URL \\u7684\\u65B9\\u6848\\uFF08\\u534F\\u8BAE\\uFF09\\u3001\\u4E3B\\u673A\\uFF08\\u57DF\\uFF09\\u548C\\u7AEF\\u53E3\\u5B9A\\u4E49\\u3002\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"http://example.com:80/page\"}),\" \\u7684\\u6765\\u6E90\\u662F\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u65B9\\u6848\\uFF1A\",(0,n.jsx)(e.code,{children:\"http\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4E3B\\u673A\\uFF1A\",(0,n.jsx)(e.code,{children:\"example.com\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u7AEF\\u53E3\\uFF1A\",(0,n.jsx)(e.code,{children:\"80\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5F53\\u4E14\\u4EC5\\u5F53\\u6240\\u6709\\u4E09\\u4E2A\\u7EC4\\u4EF6\\uFF08\\u65B9\\u6848\\u3001\\u4E3B\\u673A\\u548C\\u7AEF\\u53E3\\uFF09\\u90FD\\u76F8\\u540C\\u65F6\\uFF0C\\u4E24\\u4E2A URL \\u5177\\u6709\\u76F8\\u540C\\u7684\\u6765\\u6E90\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B83\\u662F\\u5982\\u4F55\\u5DE5\\u4F5C\\u7684\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5F53\\u7F51\\u9875\\u5411\\u53E6\\u4E00\\u4E2A URL \\u53D1\\u51FA\\u8BF7\\u6C42\\u65F6\\uFF0C\\u6D4F\\u89C8\\u5668\\u4F1A\\u68C0\\u67E5\\u8BE5\\u8BF7\\u6C42\\u662F\\u5426\\u6765\\u81EA\\u540C\\u4E00\\u6765\\u6E90\\u3002\\u5982\\u679C\\u8BE5\\u8BF7\\u6C42\\u6765\\u81EA\\u4E0D\\u540C\\u7684\\u6765\\u6E90\\uFF0C\\u6D4F\\u89C8\\u5668\\u4F1A\\u963B\\u6B62\\u8BE5\\u8BF7\\u6C42\\uFF0C\\u9664\\u975E\\u670D\\u52A1\\u5668\\u4F7F\\u7528\\u8DE8\\u57DF\\u8D44\\u6E90\\u5171\\u4EAB (CORS) \\u7B49\\u673A\\u5236\\u660E\\u786E\\u5141\\u8BB8\\u8BE5\\u8BF7\\u6C42\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F8B\\u5B50\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8003\\u8651\\u4EE5\\u4E0B\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"http://example.com/page1\"}),\" \\u53EF\\u4EE5\\u8BBF\\u95EE \",(0,n.jsx)(e.code,{children:\"http://example.com/page2\"}),\"\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u5171\\u4EAB\\u76F8\\u540C\\u7684\\u6765\\u6E90\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"http://example.com/page1\"}),\" \\u65E0\\u6CD5\\u8BBF\\u95EE \",(0,n.jsx)(e.code,{children:\"http://anotherdomain.com/page\"}),\"\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u5177\\u6709\\u4E0D\\u540C\\u7684\\u6765\\u6E90\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5F02\\u5E38\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u540C\\u6E90\\u7B56\\u7565\\u6709\\u4E00\\u4E9B\\u4F8B\\u5916\\uFF0C\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u8DE8\\u57DF\\u8D44\\u6E90\\u5171\\u4EAB (CORS)\\uFF1A\\u4E00\\u79CD\\u5141\\u8BB8\\u670D\\u52A1\\u5668\\u6307\\u5B9A\\u8C01\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5176\\u8D44\\u6E90\\u7684\\u673A\\u5236\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"JSONP\\uFF1A\\u4E00\\u79CD\\u7528\\u4E8E\\u4ECE\\u4F4D\\u4E8E\\u4E0D\\u540C\\u57DF\\u4E2D\\u7684\\u670D\\u52A1\\u5668\\u8BF7\\u6C42\\u6570\\u636E\\u7684\\u6280\\u672F\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"WebSockets\\uFF1A\\u4E00\\u79CD\\u5141\\u8BB8\\u901A\\u8FC7\\u5355\\u4E2A TCP \\u8FDE\\u63A5\\u8FDB\\u884C\\u5168\\u53CC\\u5DE5\\u901A\\u4FE1\\u901A\\u9053\\u7684\\u534F\\u8BAE\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EE3\\u7801\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u793A\\u4F8B\\uFF0C\\u6F14\\u793A\\u4E86\\u540C\\u6E90\\u7B56\\u7565\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!-- index.html -->\n<script>\n  // This will work because the request is to the same origin\n  fetch('/api/data')\n    .then((response) => response.json())\n    .then((data) => console.log(data));\n\n  // This will be blocked by the browser because the request is to a different origin\n  fetch('http://anotherdomain.com/api/data')\n    .then((response) => response.json())\n    .then((data) => console.log(data))\n    .catch((error) => console.error('Error:', error));\n<\\/script>\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/Security/Same-origin_policy\",children:\"MDN Web Docs: Same-origin policy\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS\",children:\"MDN Web Docs: Cross-Origin Resource Sharing (CORS)\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://owasp.org/www-community/attacks/xss/\",children:\"OWASP: Cross-Site Scripting (XSS)\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://owasp.org/www-community/attacks/csrf/\",children:\"OWASP: Cross-Site Request Forgery (CSRF)\"})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(a,{...r})}):a(r)}return w(R);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/en-US.json
index 3c996a320..cece1b6a8 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),S=(t,e)=>{for(var r in e)a(t,r,{get:e[r],enumerable:!0})},o=(t,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!m.call(t,i)&&i!==r&&a(t,i,{get:()=>e[i],enumerable:!(s=p(e,i))||s.enumerable});return t};var x=(t,e,r)=>(r=t!=null?d(g(t)):{},o(e||!t||!t.__esModule?a(r,\"default\",{value:t,enumerable:!0}):r,t)),v=t=>o(a({},\"__esModule\",{value:!0}),t);var h=f((T,c)=>{c.exports=_jsx_runtime});var P={};S(P,{default:()=>y,frontmatter:()=>w});var n=x(h()),w={title:\"Explain what a single page app is and how to make one SEO-friendly\"};function l(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",h4:\"h4\",strong:\"strong\",pre:\"pre\",code:\"code\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"A single page application (SPA) is a web application that loads a single HTML page and dynamically updates content as the user interacts with the app. This approach provides a more fluid user experience but can be challenging for SEO because search engines may not execute JavaScript to render content. To make an SPA SEO-friendly, you can use server-side rendering (SSR) or static site generation (SSG) to ensure that search engines can index your content. Tools like Next.js for React or Nuxt.js for Vue.js can help achieve this.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is a single page app?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition\"}),`\n`,(0,n.jsx)(e.p,{children:\"A single page application (SPA) is a web application that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from the server. This results in a more fluid user experience, similar to a desktop application.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Key characteristics\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The application loads a single HTML page and dynamically updates it as the user interacts with the app\"}),`\n`,(0,n.jsx)(e.li,{children:\"Uses AJAX or Fetch API to communicate with the server and update the page without a full reload\"}),`\n`,(0,n.jsx)(e.li,{children:\"Often relies on client-side routing to manage different views or states within the app\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Faster interactions after the initial load\"}),`\n`,(0,n.jsx)(e.li,{children:\"Reduced server load due to fewer full-page requests\"}),`\n`,(0,n.jsx)(e.li,{children:\"Improved user experience with smoother transitions\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"How to make an SPA SEO-friendly\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Challenges\"}),`\n`,(0,n.jsx)(e.p,{children:\"SPAs can be challenging for SEO because search engines may not execute JavaScript to render content. This can result in search engines indexing an empty or incomplete page.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Solutions\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Server-side rendering (SSR)\"}),`\n`,(0,n.jsx)(e.p,{children:\"Server-side rendering involves rendering the initial HTML of the page on the server before sending it to the client. This ensures that search engines can index the fully rendered content.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"React\"}),\": Use Next.js, which provides built-in support for SSR\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Vue.js\"}),\": Use Nuxt.js, which also supports SSR out of the box\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example with Next.js:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React from 'react';\nimport { GetServerSideProps } from 'next';\n\nconst Page = ({ data }) => {\n  return (\n    <div>\n      <h1>{data.title}</h1>\n      <p>{data.content}</p>\n    </div>\n  );\n};\n\nexport const getServerSideProps: GetServerSideProps = async () => {\n  const res = await fetch('https://api.example.com/data');\n  const data = await res.json();\n\n  return {\n    props: {\n      data,\n    },\n  };\n};\n\nexport default Page;\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Static site generation (SSG)\"}),`\n`,(0,n.jsx)(e.p,{children:\"Static site generation involves generating the HTML for each page at build time. This approach is suitable for content that doesn't change frequently.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"React\"}),\": Use Next.js with its static generation capabilities\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Vue.js\"}),\": Use Nuxt.js with its static site generation feature\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example with Next.js:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React from 'react';\nimport { GetStaticProps } from 'next';\n\nconst Page = ({ data }) => {\n  return (\n    <div>\n      <h1>{data.title}</h1>\n      <p>{data.content}</p>\n    </div>\n  );\n};\n\nexport const getStaticProps: GetStaticProps = async () => {\n  const res = await fetch('https://api.example.com/data');\n  const data = await res.json();\n\n  return {\n    props: {\n      data,\n    },\n  };\n};\n\nexport default Page;\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Pre-rendering with tools\"}),`\n`,(0,n.jsx)(e.p,{children:\"Some tools can pre-render your SPA and serve the pre-rendered HTML to search engines.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Prerender.io\"}),\": A service that pre-renders your JavaScript application and serves the static HTML to search engines\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Rendertron\"}),\": A headless Chrome rendering solution that can be used to pre-render your SPA\"]}),`\n`]}),`\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://nextjs.org/docs\",children:\"Next.js Documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nuxtjs.org/docs\",children:\"Nuxt.js Documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://prerender.io/\",children:\"Prerender.io\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/GoogleChrome/rendertron\",children:\"Rendertron\"})}),`\n`]})]})}function j(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(l,t)})):l(t)}var y=j;return v(P);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var S=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var r in e)a(t,r,{get:e[r],enumerable:!0})},o=(t,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of g(e))!f.call(t,i)&&i!==r&&a(t,i,{get:()=>e[i],enumerable:!(s=u(e,i))||s.enumerable});return t};var v=(t,e,r)=>(r=t!=null?p(m(t)):{},o(e||!t||!t.__esModule?a(r,\"default\",{value:t,enumerable:!0}):r,t)),w=t=>o(a({},\"__esModule\",{value:!0}),t);var h=S((b,c)=>{c.exports=_jsx_runtime});var y={};x(y,{default:()=>d,frontmatter:()=>j});var n=v(h()),j={title:\"Explain what a single page app is and how to make one SEO-friendly\"};function l(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"A single page application (SPA) is a web application that loads a single HTML page and dynamically updates content as the user interacts with the app. This approach provides a more fluid user experience but can be challenging for SEO because search engines may not execute JavaScript to render content. To make an SPA SEO-friendly, you can use server-side rendering (SSR) or static site generation (SSG) to ensure that search engines can index your content. Tools like Next.js for React or Nuxt.js for Vue.js can help achieve this.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is a single page app?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition\"}),`\n`,(0,n.jsx)(e.p,{children:\"A single page application (SPA) is a web application that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from the server. This results in a more fluid user experience, similar to a desktop application.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Key characteristics\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The application loads a single HTML page and dynamically updates it as the user interacts with the app\"}),`\n`,(0,n.jsx)(e.li,{children:\"Uses AJAX or Fetch API to communicate with the server and update the page without a full reload\"}),`\n`,(0,n.jsx)(e.li,{children:\"Often relies on client-side routing to manage different views or states within the app\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Faster interactions after the initial load\"}),`\n`,(0,n.jsx)(e.li,{children:\"Reduced server load due to fewer full-page requests\"}),`\n`,(0,n.jsx)(e.li,{children:\"Improved user experience with smoother transitions\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"How to make an SPA SEO-friendly\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Challenges\"}),`\n`,(0,n.jsx)(e.p,{children:\"SPAs can be challenging for SEO because search engines may not execute JavaScript to render content. This can result in search engines indexing an empty or incomplete page.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Solutions\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Server-side rendering (SSR)\"}),`\n`,(0,n.jsx)(e.p,{children:\"Server-side rendering involves rendering the initial HTML of the page on the server before sending it to the client. This ensures that search engines can index the fully rendered content.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"React\"}),\": Use Next.js, which provides built-in support for SSR\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Vue.js\"}),\": Use Nuxt.js, which also supports SSR out of the box\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example with Next.js:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React from 'react';\nimport { GetServerSideProps } from 'next';\n\nconst Page = ({ data }) => {\n  return (\n    <div>\n      <h1>{data.title}</h1>\n      <p>{data.content}</p>\n    </div>\n  );\n};\n\nexport const getServerSideProps: GetServerSideProps = async () => {\n  const res = await fetch('https://api.example.com/data');\n  const data = await res.json();\n\n  return {\n    props: {\n      data,\n    },\n  };\n};\n\nexport default Page;\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Static site generation (SSG)\"}),`\n`,(0,n.jsx)(e.p,{children:\"Static site generation involves generating the HTML for each page at build time. This approach is suitable for content that doesn't change frequently.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"React\"}),\": Use Next.js with its static generation capabilities\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Vue.js\"}),\": Use Nuxt.js with its static site generation feature\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example with Next.js:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React from 'react';\nimport { GetStaticProps } from 'next';\n\nconst Page = ({ data }) => {\n  return (\n    <div>\n      <h1>{data.title}</h1>\n      <p>{data.content}</p>\n    </div>\n  );\n};\n\nexport const getStaticProps: GetStaticProps = async () => {\n  const res = await fetch('https://api.example.com/data');\n  const data = await res.json();\n\n  return {\n    props: {\n      data,\n    },\n  };\n};\n\nexport default Page;\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Pre-rendering with tools\"}),`\n`,(0,n.jsx)(e.p,{children:\"Some tools can pre-render your SPA and serve the pre-rendered HTML to search engines.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Prerender.io\"}),\": A service that pre-renders your JavaScript application and serves the static HTML to search engines\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Rendertron\"}),\": A headless Chrome rendering solution that can be used to pre-render your SPA\"]}),`\n`]}),`\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://nextjs.org/docs\",children:\"Next.js Documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nuxtjs.org/docs\",children:\"Nuxt.js Documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://prerender.io/\",children:\"Prerender.io\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/GoogleChrome/rendertron\",children:\"Rendertron\"})}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}return w(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/pt-BR.json b/apps/web/src/__generated__/questions/quiz/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/pt-BR.json
index 43fd95403..e3b87489d 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/pt-BR.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var h=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),f=(a,e)=>{for(var i in e)s(a,i,{get:e[i],enumerable:!0})},t=(a,e,i,n)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!g.call(a,r)&&r!==i&&s(a,r,{get:()=>e[r],enumerable:!(n=p(e,r))||n.enumerable});return a};var b=(a,e,i)=>(i=a!=null?m(v(a)):{},t(e||!a||!a.__esModule?s(i,\"default\",{value:a,enumerable:!0}):i,a)),z=a=>t(s({},\"__esModule\",{value:!0}),a);var c=h((P,d)=>{d.exports=_jsx_runtime});var j={};f(j,{default:()=>A,frontmatter:()=>x});var o=b(c()),x={title:\"Explique o que \\xE9 um aplicativo de p\\xE1gina \\xFAnica e como torn\\xE1-lo amig\\xE1vel para SEO\"};function l(a){let e=Object.assign({p:\"p\",a:\"a\",h2:\"h2\",ul:\"ul\",li:\"li\"},a.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.p,{children:\"Os desenvolvedores web atualmente se referem aos produtos que constroem como aplicativos web, em vez de sites. Embora n\\xE3o haja uma diferen\\xE7a estrita entre os dois termos, os aplicativos web tendem a ser altamente interativos e din\\xE2micos, permitindo que o usu\\xE1rio execute a\\xE7\\xF5es e receba uma resposta para sua a\\xE7\\xE3o. Tradicionalmente, o navegador recebe o HTML do servidor e o renderiza. Quando o usu\\xE1rio navegar para outra URL, \\xE9 necess\\xE1ria uma atualiza\\xE7\\xE3o de p\\xE1gina inteira e o servidor envia novo HTML para a nova p\\xE1gina. Isso \\xE9 chamado de renderiza\\xE7\\xE3o no lado do servidor.\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"No entanto, em SPAs modernas, \\xE9 usado o rendering no lado do cliente (client-side rendering) em vez disso. O navegador carrega a p\\xE1gina inicial do servidor, juntamente com os scripts (frameworks, bibliotecas, c\\xF3digo do aplicativo) e folhas de estilo necess\\xE1rias para todo o aplicativo. Quando o usu\\xE1rio navega para outras p\\xE1ginas, uma atualiza\\xE7\\xE3o de p\\xE1gina n\\xE3o \\xE9 acionada. A URL da p\\xE1gina \\xE9 atualizada atrav\\xE9s da \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History_API\",children:\"API Hist\\xF3rico HTML5\"}),\". Novos dados necess\\xE1rios para a nova p\\xE1gina, geralmente no formato JSON, s\\xE3o recuperados pelo navegador via \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started\",children:\"AJAX\"}),\" pedidos ao servidor. O SPA, em seguida, atualiza dinamicamente a p\\xE1gina com dados via JavaScript, que j\\xE1 foi baixado na carga inicial da p\\xE1gina. Esse modelo \\xE9 semelhante a como os aplicativos nativos dos dispositivos m\\xF3veis funcionam.\"]}),`\n`,(0,o.jsx)(e.h2,{children:\"Pr\\xF3s\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"O aplicativo parece mais responsivo e os usu\\xE1rios n\\xE3o veem o flash entre as navega\\xE7\\xF5es de p\\xE1gina devido \\xE0s atualiza\\xE7\\xF5es completas da p\\xE1gina.\"}),`\n`,(0,o.jsx)(e.li,{children:\"S\\xE3o feitas menos solicita\\xE7\\xF5es HTTP ao servidor, pois os mesmos recursos n\\xE3o precisam ser baixados novamente a cada carga de p\\xE1gina.\"}),`\n`,(0,o.jsx)(e.li,{children:\"H\\xE1 uma clara separa\\xE7\\xE3o das responsabilidades entre o cliente e o servidor, permitindo a f\\xE1cil constru\\xE7\\xE3o de novos clientes para diferentes plataformas (por exemplo, dispositivos m\\xF3veis, chatbots, rel\\xF3gios inteligentes) sem precisar modificar o c\\xF3digo do servidor. Voc\\xEA tamb\\xE9m pode modificar a pilha de tecnologia no cliente e no servidor independentemente, desde que o contrato da API n\\xE3o seja quebrado.\"}),`\n`]}),`\n`,(0,o.jsx)(e.h2,{children:\"Contras\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"H\\xE1 uma carga inicial de p\\xE1gina mais pesada devido ao carregamento do framework, c\\xF3digo do aplicativo e recursos necess\\xE1rios para v\\xE1rias p\\xE1ginas.\"}),`\n`,(0,o.jsx)(e.li,{children:\"H\\xE1 uma etapa adicional a ser feita no seu servidor, que \\xE9 configur\\xE1-lo para rotear todas as solicita\\xE7\\xF5es para um \\xFAnico ponto de entrada e permitir que o roteamento do lado do cliente assuma a partir da\\xED.\"}),`\n`,(0,o.jsxs)(e.li,{children:[\"As SPAs dependem do JavaScript para renderizar conte\\xFAdo, mas nem todos os mecanismos de pesquisa executam JavaScript durante a rastreamento e podem ver conte\\xFAdo vazio em sua p\\xE1gina. Isso prejudica inadvertidamente a otimiza\\xE7\\xE3o de mecanismos de pesquisa (SEO) do seu aplicativo. No entanto, na maioria das vezes, ao construir aplicativos, o SEO n\\xE3o \\xE9 o fator mais importante, pois nem todo o conte\\xFAdo precisa ser index\\xE1vel pelos mecanismos de pesquisa. Para contornar esse problema, voc\\xEA pode renderizar seu aplicativo no servidor ou usar servi\\xE7os como \",(0,o.jsx)(e.a,{href:\"https://prerender.io/\",children:\"Prerender\"}),' para \"renderizar seu JavaScript em um navegador, salvar o HTML est\\xE1tico e retorn\\xE1-lo aos crawlers\".']}),`\n`]})]})}function S(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,Object.assign({},a,{children:(0,o.jsx)(l,a)})):l(a)}var A=S;return z(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var f=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),z=(a,e)=>{for(var i in e)s(a,i,{get:e[i],enumerable:!0})},t=(a,e,i,n)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of v(e))!h.call(a,r)&&r!==i&&s(a,r,{get:()=>e[r],enumerable:!(n=u(e,r))||n.enumerable});return a};var b=(a,e,i)=>(i=a!=null?p(g(a)):{},t(e||!a||!a.__esModule?s(i,\"default\",{value:a,enumerable:!0}):i,a)),x=a=>t(s({},\"__esModule\",{value:!0}),a);var c=f((P,d)=>{d.exports=_jsx_runtime});var A={};z(A,{default:()=>m,frontmatter:()=>S});var o=b(c()),S={title:\"Explique o que \\xE9 um aplicativo de p\\xE1gina \\xFAnica e como torn\\xE1-lo amig\\xE1vel para SEO\"};function l(a){let e={a:\"a\",h2:\"h2\",li:\"li\",p:\"p\",ul:\"ul\",...a.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.p,{children:\"Os desenvolvedores web atualmente se referem aos produtos que constroem como aplicativos web, em vez de sites. Embora n\\xE3o haja uma diferen\\xE7a estrita entre os dois termos, os aplicativos web tendem a ser altamente interativos e din\\xE2micos, permitindo que o usu\\xE1rio execute a\\xE7\\xF5es e receba uma resposta para sua a\\xE7\\xE3o. Tradicionalmente, o navegador recebe o HTML do servidor e o renderiza. Quando o usu\\xE1rio navegar para outra URL, \\xE9 necess\\xE1ria uma atualiza\\xE7\\xE3o de p\\xE1gina inteira e o servidor envia novo HTML para a nova p\\xE1gina. Isso \\xE9 chamado de renderiza\\xE7\\xE3o no lado do servidor.\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"No entanto, em SPAs modernas, \\xE9 usado o rendering no lado do cliente (client-side rendering) em vez disso. O navegador carrega a p\\xE1gina inicial do servidor, juntamente com os scripts (frameworks, bibliotecas, c\\xF3digo do aplicativo) e folhas de estilo necess\\xE1rias para todo o aplicativo. Quando o usu\\xE1rio navega para outras p\\xE1ginas, uma atualiza\\xE7\\xE3o de p\\xE1gina n\\xE3o \\xE9 acionada. A URL da p\\xE1gina \\xE9 atualizada atrav\\xE9s da \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History_API\",children:\"API Hist\\xF3rico HTML5\"}),\". Novos dados necess\\xE1rios para a nova p\\xE1gina, geralmente no formato JSON, s\\xE3o recuperados pelo navegador via \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started\",children:\"AJAX\"}),\" pedidos ao servidor. O SPA, em seguida, atualiza dinamicamente a p\\xE1gina com dados via JavaScript, que j\\xE1 foi baixado na carga inicial da p\\xE1gina. Esse modelo \\xE9 semelhante a como os aplicativos nativos dos dispositivos m\\xF3veis funcionam.\"]}),`\n`,(0,o.jsx)(e.h2,{children:\"Pr\\xF3s\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"O aplicativo parece mais responsivo e os usu\\xE1rios n\\xE3o veem o flash entre as navega\\xE7\\xF5es de p\\xE1gina devido \\xE0s atualiza\\xE7\\xF5es completas da p\\xE1gina.\"}),`\n`,(0,o.jsx)(e.li,{children:\"S\\xE3o feitas menos solicita\\xE7\\xF5es HTTP ao servidor, pois os mesmos recursos n\\xE3o precisam ser baixados novamente a cada carga de p\\xE1gina.\"}),`\n`,(0,o.jsx)(e.li,{children:\"H\\xE1 uma clara separa\\xE7\\xE3o das responsabilidades entre o cliente e o servidor, permitindo a f\\xE1cil constru\\xE7\\xE3o de novos clientes para diferentes plataformas (por exemplo, dispositivos m\\xF3veis, chatbots, rel\\xF3gios inteligentes) sem precisar modificar o c\\xF3digo do servidor. Voc\\xEA tamb\\xE9m pode modificar a pilha de tecnologia no cliente e no servidor independentemente, desde que o contrato da API n\\xE3o seja quebrado.\"}),`\n`]}),`\n`,(0,o.jsx)(e.h2,{children:\"Contras\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"H\\xE1 uma carga inicial de p\\xE1gina mais pesada devido ao carregamento do framework, c\\xF3digo do aplicativo e recursos necess\\xE1rios para v\\xE1rias p\\xE1ginas.\"}),`\n`,(0,o.jsx)(e.li,{children:\"H\\xE1 uma etapa adicional a ser feita no seu servidor, que \\xE9 configur\\xE1-lo para rotear todas as solicita\\xE7\\xF5es para um \\xFAnico ponto de entrada e permitir que o roteamento do lado do cliente assuma a partir da\\xED.\"}),`\n`,(0,o.jsxs)(e.li,{children:[\"As SPAs dependem do JavaScript para renderizar conte\\xFAdo, mas nem todos os mecanismos de pesquisa executam JavaScript durante a rastreamento e podem ver conte\\xFAdo vazio em sua p\\xE1gina. Isso prejudica inadvertidamente a otimiza\\xE7\\xE3o de mecanismos de pesquisa (SEO) do seu aplicativo. No entanto, na maioria das vezes, ao construir aplicativos, o SEO n\\xE3o \\xE9 o fator mais importante, pois nem todo o conte\\xFAdo precisa ser index\\xE1vel pelos mecanismos de pesquisa. Para contornar esse problema, voc\\xEA pode renderizar seu aplicativo no servidor ou usar servi\\xE7os como \",(0,o.jsx)(e.a,{href:\"https://prerender.io/\",children:\"Prerender\"}),' para \"renderizar seu JavaScript em um navegador, salvar o HTML est\\xE1tico e retorn\\xE1-lo aos crawlers\".']}),`\n`]})]})}function m(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,{...a,children:(0,o.jsx)(l,{...a})}):l(a)}return x(A);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/zh-CN.json
index b801f0db7..89c1bda1d 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),j=(r,n)=>{for(var t in n)c(r,t,{get:n[t],enumerable:!0})},l=(r,n,t,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of S(n))!x.call(r,i)&&i!==t&&c(r,i,{get:()=>n[i],enumerable:!(h=p(n,i))||h.enumerable});return r};var m=(r,n,t)=>(t=r!=null?s(u(r)):{},l(n||!r||!r.__esModule?c(t,\"default\",{value:r,enumerable:!0}):t,r)),P=r=>l(c({},\"__esModule\",{value:!0}),r);var a=g((M,d)=>{d.exports=_jsx_runtime});var R={};j(R,{default:()=>N,frontmatter:()=>f});var e=m(a()),f={title:\"\\u89E3\\u91CA\\u4EC0\\u4E48\\u662F\\u5355\\u9875\\u5E94\\u7528\\u7A0B\\u5E8F\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u5176\\u5BF9 SEO \\u53CB\\u597D\"};function o(r){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",h4:\"h4\",strong:\"strong\",pre:\"pre\",code:\"code\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5355\\u9875\\u5E94\\u7528\\u7A0B\\u5E8F (SPA) \\u662F\\u4E00\\u79CD Web \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u5B83\\u52A0\\u8F7D\\u5355\\u4E2A HTML \\u9875\\u9762\\uFF0C\\u5E76\\u5728\\u7528\\u6237\\u4E0E\\u5E94\\u7528\\u7A0B\\u5E8F\\u4EA4\\u4E92\\u65F6\\u52A8\\u6001\\u66F4\\u65B0\\u5185\\u5BB9\\u3002\\u8FD9\\u79CD\\u65B9\\u6CD5\\u63D0\\u4F9B\\u4E86\\u66F4\\u6D41\\u7545\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\uFF0C\\u4F46\\u5BF9\\u4E8E SEO \\u6765\\u8BF4\\u53EF\\u80FD\\u5177\\u6709\\u6311\\u6218\\u6027\\uFF0C\\u56E0\\u4E3A\\u641C\\u7D22\\u5F15\\u64CE\\u53EF\\u80FD\\u4E0D\\u4F1A\\u6267\\u884C JavaScript \\u6765\\u5448\\u73B0\\u5185\\u5BB9\\u3002\\u8981\\u4F7F SPA \\u5BF9 SEO \\u53CB\\u597D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3 (SSR) \\u6216\\u9759\\u6001\\u7AD9\\u70B9\\u751F\\u6210 (SSG) \\u6765\\u786E\\u4FDD\\u641C\\u7D22\\u5F15\\u64CE\\u53EF\\u4EE5\\u7D22\\u5F15\\u60A8\\u7684\\u5185\\u5BB9\\u3002\\u50CF Next.js for React \\u6216 Nuxt.js for Vue.js \\u8FD9\\u6837\\u7684\\u5DE5\\u5177\\u53EF\\u4EE5\\u5E2E\\u52A9\\u5B9E\\u73B0\\u8FD9\\u4E00\\u70B9\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u5355\\u9875\\u5E94\\u7528\\u7A0B\\u5E8F\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5355\\u9875\\u5E94\\u7528\\u7A0B\\u5E8F (SPA) \\u662F\\u4E00\\u79CD Web \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u5B83\\u901A\\u8FC7\\u52A8\\u6001\\u91CD\\u5199\\u5F53\\u524D\\u9875\\u9762\\u800C\\u4E0D\\u662F\\u4ECE\\u670D\\u52A1\\u5668\\u52A0\\u8F7D\\u6574\\u4E2A\\u65B0\\u9875\\u9762\\u6765\\u4E0E\\u7528\\u6237\\u4EA4\\u4E92\\u3002\\u8FD9\\u4F1A\\u4EA7\\u751F\\u66F4\\u6D41\\u7545\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\uFF0C\\u7C7B\\u4F3C\\u4E8E\\u684C\\u9762\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5173\\u952E\\u7279\\u5F81\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5E94\\u7528\\u7A0B\\u5E8F\\u52A0\\u8F7D\\u5355\\u4E2A HTML \\u9875\\u9762\\uFF0C\\u5E76\\u5728\\u7528\\u6237\\u4E0E\\u5E94\\u7528\\u7A0B\\u5E8F\\u4EA4\\u4E92\\u65F6\\u52A8\\u6001\\u66F4\\u65B0\\u5B83\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u7528 AJAX \\u6216 Fetch API \\u4E0E\\u670D\\u52A1\\u5668\\u901A\\u4FE1\\u5E76\\u66F4\\u65B0\\u9875\\u9762\\uFF0C\\u65E0\\u9700\\u5B8C\\u5168\\u91CD\\u65B0\\u52A0\\u8F7D\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u901A\\u5E38\\u4F9D\\u8D56\\u5BA2\\u6237\\u7AEF\\u8DEF\\u7531\\u6765\\u7BA1\\u7406\\u5E94\\u7528\\u7A0B\\u5E8F\\u5185\\u7684\\u4E0D\\u540C\\u89C6\\u56FE\\u6216\\u72B6\\u6001\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u521D\\u59CB\\u52A0\\u8F7D\\u540E\\u4EA4\\u4E92\\u66F4\\u5FEB\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u7531\\u4E8E\\u9875\\u9762\\u8BF7\\u6C42\\u51CF\\u5C11\\uFF0C\\u670D\\u52A1\\u5668\\u8D1F\\u8F7D\\u964D\\u4F4E\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u901A\\u8FC7\\u66F4\\u6D41\\u7545\\u7684\\u8FC7\\u6E21\\u6539\\u5584\\u7528\\u6237\\u4F53\\u9A8C\"}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5982\\u4F55\\u4F7F SPA \\u5BF9 SEO \\u53CB\\u597D\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6311\\u6218\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5BF9\\u4E8E SEO \\u6765\\u8BF4\\uFF0CSPA \\u5177\\u6709\\u6311\\u6218\\u6027\\uFF0C\\u56E0\\u4E3A\\u641C\\u7D22\\u5F15\\u64CE\\u53EF\\u80FD\\u4E0D\\u4F1A\\u6267\\u884C JavaScript \\u6765\\u5448\\u73B0\\u5185\\u5BB9\\u3002\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u641C\\u7D22\\u5F15\\u64CE\\u7D22\\u5F15\\u4E00\\u4E2A\\u7A7A\\u7684\\u6216\\u4E0D\\u5B8C\\u6574\\u7684\\u9875\\u9762\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u89E3\\u51B3\\u65B9\\u6848\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3 (SSR)\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\u6D89\\u53CA\\u5728\\u5C06\\u9875\\u9762\\u53D1\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\\u4E4B\\u524D\\u5728\\u670D\\u52A1\\u5668\\u4E0A\\u5448\\u73B0\\u9875\\u9762\\u7684\\u521D\\u59CB HTML\\u3002\\u8FD9\\u786E\\u4FDD\\u4E86\\u641C\\u7D22\\u5F15\\u64CE\\u53EF\\u4EE5\\u7D22\\u5F15\\u5B8C\\u5168\\u5448\\u73B0\\u7684\\u5185\\u5BB9\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"React\"}),\"\\uFF1A\\u4F7F\\u7528 Next.js\\uFF0C\\u5B83\\u63D0\\u4F9B\\u5BF9 SSR \\u7684\\u5185\\u7F6E\\u652F\\u6301\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Vue.js\"}),\"\\uFF1A\\u4F7F\\u7528 Nuxt.js\\uFF0C\\u5B83\\u4E5F\\u652F\\u6301\\u5F00\\u7BB1\\u5373\\u7528\\u7684 SSR\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"Next.js \\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import React from 'react';\nimport { GetServerSideProps } from 'next';\n\nconst Page = ({ data }) => {\n  return (\n    <div>\n      <h1>{data.title}</h1>\n      <p>{data.content}</p>\n    </div>\n  );\n};\n\nexport const getServerSideProps: GetServerSideProps = async () => {\n  const res = await fetch('https://api.example.com/data');\n  const data = await res.json();\n\n  return {\n    props: {\n      data,\n    },\n  };\n};\n\nexport default Page;\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u9759\\u6001\\u7AD9\\u70B9\\u751F\\u6210 (SSG)\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9759\\u6001\\u7AD9\\u70B9\\u751F\\u6210\\u6D89\\u53CA\\u5728\\u6784\\u5EFA\\u65F6\\u4E3A\\u6BCF\\u4E2A\\u9875\\u9762\\u751F\\u6210 HTML\\u3002\\u8FD9\\u79CD\\u65B9\\u6CD5\\u9002\\u7528\\u4E8E\\u5185\\u5BB9\\u4E0D\\u7ECF\\u5E38\\u66F4\\u6539\\u7684\\u60C5\\u51B5\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"React\"}),\"\\uFF1A\\u4F7F\\u7528 Next.js \\u53CA\\u5176\\u9759\\u6001\\u751F\\u6210\\u529F\\u80FD\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Vue.js\"}),\"\\uFF1A\\u4F7F\\u7528 Nuxt.js \\u53CA\\u5176\\u9759\\u6001\\u7AD9\\u70B9\\u751F\\u6210\\u529F\\u80FD\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"Next.js \\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import React from 'react';\nimport { GetStaticProps } from 'next';\n\nconst Page = ({ data }) => {\n  return (\n    <div>\n      <h1>{data.title}</h1>\n      <p>{data.content}</p>\n    </div>\n  );\n};\n\nexport const getStaticProps: GetStaticProps = async () => {\n  const res = await fetch('https://api.example.com/data');\n  const data = await res.json();\n\n  return {\n    props: {\n      data,\n    },\n  };\n};\n\nexport default Page;\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528\\u5DE5\\u5177\\u8FDB\\u884C\\u9884\\u6E32\\u67D3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E00\\u4E9B\\u5DE5\\u5177\\u53EF\\u4EE5\\u9884\\u6E32\\u67D3\\u60A8\\u7684 SPA \\u5E76\\u5C06\\u9884\\u6E32\\u67D3\\u7684 HTML \\u63D0\\u4F9B\\u7ED9\\u641C\\u7D22\\u5F15\\u64CE\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Prerender.io\"}),\"\\uFF1A\\u4E00\\u9879\\u9884\\u6E32\\u67D3\\u60A8\\u7684 JavaScript \\u5E94\\u7528\\u7A0B\\u5E8F\\u5E76\\u5C06\\u9759\\u6001 HTML \\u63D0\\u4F9B\\u7ED9\\u641C\\u7D22\\u5F15\\u64CE\\u7684\\u670D\\u52A1\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Rendertron\"}),\"\\uFF1A\\u4E00\\u4E2A\\u65E0\\u5934 Chrome \\u6E32\\u67D3\\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u53EF\\u7528\\u4E8E\\u9884\\u6E32\\u67D3\\u60A8\\u7684 SPA\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://nextjs.org/docs\",children:\"Next.js \\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://nuxtjs.org/docs\",children:\"Nuxt.js \\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://prerender.io/\",children:\"Prerender.io\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://github.com/GoogleChrome/rendertron\",children:\"Rendertron\"})}),`\n`]})]})}function v(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(o,r)})):o(r)}var N=v;return P(R);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),j=(r,n)=>{for(var t in n)c(r,t,{get:n[t],enumerable:!0})},l=(r,n,t,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of u(n))!m.call(r,i)&&i!==t&&c(r,i,{get:()=>n[i],enumerable:!(h=S(n,i))||h.enumerable});return r};var P=(r,n,t)=>(t=r!=null?p(x(r)):{},l(n||!r||!r.__esModule?c(t,\"default\",{value:r,enumerable:!0}):t,r)),f=r=>l(c({},\"__esModule\",{value:!0}),r);var a=g((A,d)=>{d.exports=_jsx_runtime});var N={};j(N,{default:()=>s,frontmatter:()=>v});var e=P(a()),v={title:\"\\u89E3\\u91CA\\u4EC0\\u4E48\\u662F\\u5355\\u9875\\u5E94\\u7528\\u7A0B\\u5E8F\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u5176\\u5BF9 SEO \\u53CB\\u597D\"};function o(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5355\\u9875\\u5E94\\u7528\\u7A0B\\u5E8F (SPA) \\u662F\\u4E00\\u79CD Web \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u5B83\\u52A0\\u8F7D\\u5355\\u4E2A HTML \\u9875\\u9762\\uFF0C\\u5E76\\u5728\\u7528\\u6237\\u4E0E\\u5E94\\u7528\\u7A0B\\u5E8F\\u4EA4\\u4E92\\u65F6\\u52A8\\u6001\\u66F4\\u65B0\\u5185\\u5BB9\\u3002\\u8FD9\\u79CD\\u65B9\\u6CD5\\u63D0\\u4F9B\\u4E86\\u66F4\\u6D41\\u7545\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\uFF0C\\u4F46\\u5BF9\\u4E8E SEO \\u6765\\u8BF4\\u53EF\\u80FD\\u5177\\u6709\\u6311\\u6218\\u6027\\uFF0C\\u56E0\\u4E3A\\u641C\\u7D22\\u5F15\\u64CE\\u53EF\\u80FD\\u4E0D\\u4F1A\\u6267\\u884C JavaScript \\u6765\\u5448\\u73B0\\u5185\\u5BB9\\u3002\\u8981\\u4F7F SPA \\u5BF9 SEO \\u53CB\\u597D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3 (SSR) \\u6216\\u9759\\u6001\\u7AD9\\u70B9\\u751F\\u6210 (SSG) \\u6765\\u786E\\u4FDD\\u641C\\u7D22\\u5F15\\u64CE\\u53EF\\u4EE5\\u7D22\\u5F15\\u60A8\\u7684\\u5185\\u5BB9\\u3002\\u50CF Next.js for React \\u6216 Nuxt.js for Vue.js \\u8FD9\\u6837\\u7684\\u5DE5\\u5177\\u53EF\\u4EE5\\u5E2E\\u52A9\\u5B9E\\u73B0\\u8FD9\\u4E00\\u70B9\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u5355\\u9875\\u5E94\\u7528\\u7A0B\\u5E8F\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5355\\u9875\\u5E94\\u7528\\u7A0B\\u5E8F (SPA) \\u662F\\u4E00\\u79CD Web \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u5B83\\u901A\\u8FC7\\u52A8\\u6001\\u91CD\\u5199\\u5F53\\u524D\\u9875\\u9762\\u800C\\u4E0D\\u662F\\u4ECE\\u670D\\u52A1\\u5668\\u52A0\\u8F7D\\u6574\\u4E2A\\u65B0\\u9875\\u9762\\u6765\\u4E0E\\u7528\\u6237\\u4EA4\\u4E92\\u3002\\u8FD9\\u4F1A\\u4EA7\\u751F\\u66F4\\u6D41\\u7545\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\uFF0C\\u7C7B\\u4F3C\\u4E8E\\u684C\\u9762\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5173\\u952E\\u7279\\u5F81\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5E94\\u7528\\u7A0B\\u5E8F\\u52A0\\u8F7D\\u5355\\u4E2A HTML \\u9875\\u9762\\uFF0C\\u5E76\\u5728\\u7528\\u6237\\u4E0E\\u5E94\\u7528\\u7A0B\\u5E8F\\u4EA4\\u4E92\\u65F6\\u52A8\\u6001\\u66F4\\u65B0\\u5B83\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u7528 AJAX \\u6216 Fetch API \\u4E0E\\u670D\\u52A1\\u5668\\u901A\\u4FE1\\u5E76\\u66F4\\u65B0\\u9875\\u9762\\uFF0C\\u65E0\\u9700\\u5B8C\\u5168\\u91CD\\u65B0\\u52A0\\u8F7D\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u901A\\u5E38\\u4F9D\\u8D56\\u5BA2\\u6237\\u7AEF\\u8DEF\\u7531\\u6765\\u7BA1\\u7406\\u5E94\\u7528\\u7A0B\\u5E8F\\u5185\\u7684\\u4E0D\\u540C\\u89C6\\u56FE\\u6216\\u72B6\\u6001\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u521D\\u59CB\\u52A0\\u8F7D\\u540E\\u4EA4\\u4E92\\u66F4\\u5FEB\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u7531\\u4E8E\\u9875\\u9762\\u8BF7\\u6C42\\u51CF\\u5C11\\uFF0C\\u670D\\u52A1\\u5668\\u8D1F\\u8F7D\\u964D\\u4F4E\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u901A\\u8FC7\\u66F4\\u6D41\\u7545\\u7684\\u8FC7\\u6E21\\u6539\\u5584\\u7528\\u6237\\u4F53\\u9A8C\"}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5982\\u4F55\\u4F7F SPA \\u5BF9 SEO \\u53CB\\u597D\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6311\\u6218\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5BF9\\u4E8E SEO \\u6765\\u8BF4\\uFF0CSPA \\u5177\\u6709\\u6311\\u6218\\u6027\\uFF0C\\u56E0\\u4E3A\\u641C\\u7D22\\u5F15\\u64CE\\u53EF\\u80FD\\u4E0D\\u4F1A\\u6267\\u884C JavaScript \\u6765\\u5448\\u73B0\\u5185\\u5BB9\\u3002\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u641C\\u7D22\\u5F15\\u64CE\\u7D22\\u5F15\\u4E00\\u4E2A\\u7A7A\\u7684\\u6216\\u4E0D\\u5B8C\\u6574\\u7684\\u9875\\u9762\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u89E3\\u51B3\\u65B9\\u6848\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3 (SSR)\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\u6D89\\u53CA\\u5728\\u5C06\\u9875\\u9762\\u53D1\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\\u4E4B\\u524D\\u5728\\u670D\\u52A1\\u5668\\u4E0A\\u5448\\u73B0\\u9875\\u9762\\u7684\\u521D\\u59CB HTML\\u3002\\u8FD9\\u786E\\u4FDD\\u4E86\\u641C\\u7D22\\u5F15\\u64CE\\u53EF\\u4EE5\\u7D22\\u5F15\\u5B8C\\u5168\\u5448\\u73B0\\u7684\\u5185\\u5BB9\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"React\"}),\"\\uFF1A\\u4F7F\\u7528 Next.js\\uFF0C\\u5B83\\u63D0\\u4F9B\\u5BF9 SSR \\u7684\\u5185\\u7F6E\\u652F\\u6301\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Vue.js\"}),\"\\uFF1A\\u4F7F\\u7528 Nuxt.js\\uFF0C\\u5B83\\u4E5F\\u652F\\u6301\\u5F00\\u7BB1\\u5373\\u7528\\u7684 SSR\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"Next.js \\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import React from 'react';\nimport { GetServerSideProps } from 'next';\n\nconst Page = ({ data }) => {\n  return (\n    <div>\n      <h1>{data.title}</h1>\n      <p>{data.content}</p>\n    </div>\n  );\n};\n\nexport const getServerSideProps: GetServerSideProps = async () => {\n  const res = await fetch('https://api.example.com/data');\n  const data = await res.json();\n\n  return {\n    props: {\n      data,\n    },\n  };\n};\n\nexport default Page;\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u9759\\u6001\\u7AD9\\u70B9\\u751F\\u6210 (SSG)\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9759\\u6001\\u7AD9\\u70B9\\u751F\\u6210\\u6D89\\u53CA\\u5728\\u6784\\u5EFA\\u65F6\\u4E3A\\u6BCF\\u4E2A\\u9875\\u9762\\u751F\\u6210 HTML\\u3002\\u8FD9\\u79CD\\u65B9\\u6CD5\\u9002\\u7528\\u4E8E\\u5185\\u5BB9\\u4E0D\\u7ECF\\u5E38\\u66F4\\u6539\\u7684\\u60C5\\u51B5\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"React\"}),\"\\uFF1A\\u4F7F\\u7528 Next.js \\u53CA\\u5176\\u9759\\u6001\\u751F\\u6210\\u529F\\u80FD\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Vue.js\"}),\"\\uFF1A\\u4F7F\\u7528 Nuxt.js \\u53CA\\u5176\\u9759\\u6001\\u7AD9\\u70B9\\u751F\\u6210\\u529F\\u80FD\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"Next.js \\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import React from 'react';\nimport { GetStaticProps } from 'next';\n\nconst Page = ({ data }) => {\n  return (\n    <div>\n      <h1>{data.title}</h1>\n      <p>{data.content}</p>\n    </div>\n  );\n};\n\nexport const getStaticProps: GetStaticProps = async () => {\n  const res = await fetch('https://api.example.com/data');\n  const data = await res.json();\n\n  return {\n    props: {\n      data,\n    },\n  };\n};\n\nexport default Page;\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528\\u5DE5\\u5177\\u8FDB\\u884C\\u9884\\u6E32\\u67D3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E00\\u4E9B\\u5DE5\\u5177\\u53EF\\u4EE5\\u9884\\u6E32\\u67D3\\u60A8\\u7684 SPA \\u5E76\\u5C06\\u9884\\u6E32\\u67D3\\u7684 HTML \\u63D0\\u4F9B\\u7ED9\\u641C\\u7D22\\u5F15\\u64CE\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Prerender.io\"}),\"\\uFF1A\\u4E00\\u9879\\u9884\\u6E32\\u67D3\\u60A8\\u7684 JavaScript \\u5E94\\u7528\\u7A0B\\u5E8F\\u5E76\\u5C06\\u9759\\u6001 HTML \\u63D0\\u4F9B\\u7ED9\\u641C\\u7D22\\u5F15\\u64CE\\u7684\\u670D\\u52A1\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Rendertron\"}),\"\\uFF1A\\u4E00\\u4E2A\\u65E0\\u5934 Chrome \\u6E32\\u67D3\\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u53EF\\u7528\\u4E8E\\u9884\\u6E32\\u67D3\\u60A8\\u7684 SPA\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://nextjs.org/docs\",children:\"Next.js \\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://nuxtjs.org/docs\",children:\"Nuxt.js \\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://prerender.io/\",children:\"Prerender.io\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://github.com/GoogleChrome/rendertron\",children:\"Rendertron\"})}),`\n`]})]})}function s(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(o,{...r})}):o(r)}return f(N);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-what-happens-when-setstate-is-called-in-react/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-what-happens-when-setstate-is-called-in-react/en-US.json
index 63565c330..32d2677fe 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-what-happens-when-setstate-is-called-in-react/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-what-happens-when-setstate-is-called-in-react/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/explain-what-happens-when-setstate-is-called-in-react/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),y=(n,e)=>{for(var a in e)r(n,a,{get:e[a],enumerable:!0})},c=(n,e,a,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!g.call(n,s)&&s!==a&&r(n,s,{get:()=>e[s],enumerable:!(o=d(e,s))||o.enumerable});return n};var v=(n,e,a)=>(a=n!=null?l(f(n)):{},c(e||!n||!n.__esModule?r(a,\"default\",{value:n,enumerable:!0}):a,n)),w=n=>c(r({},\"__esModule\",{value:!0}),n);var h=m((x,u)=>{u.exports=_jsx_runtime});var C={};y(C,{default:()=>R,frontmatter:()=>b});var t=v(h()),b={title:\"Explain what happens when the `useState` setter function is called in React\"};function i(n){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",strong:\"strong\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"When the setter function returned by the \",(0,t.jsx)(e.code,{children:\"useState\"}),\" hook is called in React, it schedules an update to the component's state value. React then queues a re-render of the component with the new state. This process is typically asynchronous, and React batches multiple state updates together for performance.\"]}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsxs)(e.h2,{children:[\"What happens when the \",(0,t.jsx)(e.code,{children:\"useState\"}),\" setter is called\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"State update scheduling\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"When you call the setter function provided by \",(0,t.jsx)(e.code,{children:\"useState\"}),\" (e.g., \",(0,t.jsx)(e.code,{children:\"setCount\"}),\"), React schedules an update for that specific state variable. This doesn't happen instantly; React marks the component as needing to re-render with the updated state value.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`const [count, setCount] = useState(0);\n// ...\nsetCount(count + 1); // Schedules an update to set 'count' to 1\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"State replacement\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The \",(0,t.jsx)(e.code,{children:\"useState\"}),\" setter function \",(0,t.jsx)(e.strong,{children:\"replaces\"}),\" the old state value entirely with the new value you provide. If your state is an object and you only want to update one property, you need to manually spread the old state and override the specific property.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`const [user, setUser] = useState({ name: 'Anon', age: 99 });\n\n// To update only name, you must spread the old state:\nsetUser((prevState) => ({ ...prevState, name: 'John' }));\n// If you just did setUser({ name: 'John' }), the 'age' property would be lost.\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Re-rendering\"}),`\n`,(0,t.jsx)(e.p,{children:\"After scheduling the state update(s), React will eventually trigger a re-render of the component. The functional component body is executed again with the new state value(s). React updates its virtual DOM, compares it with the previous version, and efficiently updates the actual DOM only where necessary.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Asynchronous nature and Batching\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"State updates triggered by \",(0,t.jsx)(e.code,{children:\"useState\"}),\" setters are typically asynchronous and batched. If you call multiple state setters in the same event handler or effect, React will often batch these updates together into a single re-render pass for better performance. Because of this, you shouldn't rely on the state variable having its new value immediately after calling the setter. If the new state depends on the previous state, use the functional update form.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`// Assume count is 0\nsetCount(count + 1); // Queues update to 1\nsetCount(count + 1); // Still sees count as 0, queues update to 1 again!\n// Result might be 1, not 2\n\n// Correct way using functional update:\nsetCount((prevCount) => prevCount + 1); // Queues update based on previous state\nsetCount((prevCount) => prevCount + 1); // Queues another update based on the result of the first\n// Result will be 2\n`})}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsxs)(e.a,{href:\"https://react.dev/reference/react/useState\",children:[\"React Docs: Using the State Hook (\",(0,t.jsx)(e.code,{children:\"useState\"}),\")\"]})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state\",children:\"React Docs: Queueing multiple state updates\"})}),`\n`]})]})}function S(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(i,n)})):i(n)}var R=S;return w(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var a in e)r(n,a,{get:e[a],enumerable:!0})},c=(n,e,a,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of f(e))!g.call(n,s)&&s!==a&&r(n,s,{get:()=>e[s],enumerable:!(o=p(e,s))||o.enumerable});return n};var w=(n,e,a)=>(a=n!=null?d(m(n)):{},c(e||!n||!n.__esModule?r(a,\"default\",{value:n,enumerable:!0}):a,n)),S=n=>c(r({},\"__esModule\",{value:!0}),n);var h=y((x,u)=>{u.exports=_jsx_runtime});var R={};v(R,{default:()=>l,frontmatter:()=>b});var t=w(h()),b={title:\"Explain what happens when the `useState` setter function is called in React\"};function i(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"When the setter function returned by the \",(0,t.jsx)(e.code,{children:\"useState\"}),\" hook is called in React, it schedules an update to the component's state value. React then queues a re-render of the component with the new state. This process is typically asynchronous, and React batches multiple state updates together for performance.\"]}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsxs)(e.h2,{children:[\"What happens when the \",(0,t.jsx)(e.code,{children:\"useState\"}),\" setter is called\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"State update scheduling\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"When you call the setter function provided by \",(0,t.jsx)(e.code,{children:\"useState\"}),\" (e.g., \",(0,t.jsx)(e.code,{children:\"setCount\"}),\"), React schedules an update for that specific state variable. This doesn't happen instantly; React marks the component as needing to re-render with the updated state value.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`const [count, setCount] = useState(0);\n// ...\nsetCount(count + 1); // Schedules an update to set 'count' to 1\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"State replacement\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The \",(0,t.jsx)(e.code,{children:\"useState\"}),\" setter function \",(0,t.jsx)(e.strong,{children:\"replaces\"}),\" the old state value entirely with the new value you provide. If your state is an object and you only want to update one property, you need to manually spread the old state and override the specific property.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`const [user, setUser] = useState({ name: 'Anon', age: 99 });\n\n// To update only name, you must spread the old state:\nsetUser((prevState) => ({ ...prevState, name: 'John' }));\n// If you just did setUser({ name: 'John' }), the 'age' property would be lost.\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Re-rendering\"}),`\n`,(0,t.jsx)(e.p,{children:\"After scheduling the state update(s), React will eventually trigger a re-render of the component. The functional component body is executed again with the new state value(s). React updates its virtual DOM, compares it with the previous version, and efficiently updates the actual DOM only where necessary.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Asynchronous nature and Batching\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"State updates triggered by \",(0,t.jsx)(e.code,{children:\"useState\"}),\" setters are typically asynchronous and batched. If you call multiple state setters in the same event handler or effect, React will often batch these updates together into a single re-render pass for better performance. Because of this, you shouldn't rely on the state variable having its new value immediately after calling the setter. If the new state depends on the previous state, use the functional update form.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`// Assume count is 0\nsetCount(count + 1); // Queues update to 1\nsetCount(count + 1); // Still sees count as 0, queues update to 1 again!\n// Result might be 1, not 2\n\n// Correct way using functional update:\nsetCount((prevCount) => prevCount + 1); // Queues update based on previous state\nsetCount((prevCount) => prevCount + 1); // Queues another update based on the result of the first\n// Result will be 2\n`})}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsxs)(e.a,{href:\"https://react.dev/reference/react/useState\",children:[\"React Docs: Using the State Hook (\",(0,t.jsx)(e.code,{children:\"useState\"}),\")\"]})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state\",children:\"React Docs: Queueing multiple state updates\"})}),`\n`]})]})}function l(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(i,{...n})}):i(n)}return S(R);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-what-happens-when-setstate-is-called-in-react/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-what-happens-when-setstate-is-called-in-react/zh-CN.json
index 6aeeb365e..13816958a 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-what-happens-when-setstate-is-called-in-react/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-what-happens-when-setstate-is-called-in-react/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/explain-what-happens-when-setstate-is-called-in-react/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var C=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),S=(t,e)=>{for(var c in e)a(t,c,{get:e[c],enumerable:!0})},o=(t,e,c,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!m.call(t,r)&&r!==c&&a(t,r,{get:()=>e[r],enumerable:!(s=u(e,r))||s.enumerable});return t};var v=(t,e,c)=>(c=t!=null?l(g(t)):{},o(e||!t||!t.__esModule?a(c,\"default\",{value:t,enumerable:!0}):c,t)),f=t=>o(a({},\"__esModule\",{value:!0}),t);var d=C((D,h)=>{h.exports=_jsx_runtime});var _={};S(_,{default:()=>x,frontmatter:()=>R});var n=v(d()),R={title:\"\\u89E3\\u91CA\\u5728 React \\u4E2D\\u8C03\\u7528 `useState` \\u8BBE\\u7F6E\\u5668\\u51FD\\u6570\\u65F6\\u4F1A\\u53D1\\u751F\\u4EC0\\u4E48\"};function i(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",strong:\"strong\",ul:\"ul\",li:\"li\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u5728 React \\u4E2D\\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"useState\"}),\" \\u94A9\\u5B50\\u8FD4\\u56DE\\u7684\\u8BBE\\u7F6E\\u5668\\u51FD\\u6570\\u65F6\\uFF0C\\u5B83\\u4F1A\\u5B89\\u6392\\u5BF9\\u7EC4\\u4EF6\\u72B6\\u6001\\u503C\\u7684\\u66F4\\u65B0\\u3002\\u7136\\u540E\\uFF0CReact \\u4F1A\\u5C06\\u7EC4\\u4EF6\\u91CD\\u65B0\\u6E32\\u67D3\\u4E0E\\u65B0\\u72B6\\u6001\\u6392\\u961F\\u3002\\u6B64\\u8FC7\\u7A0B\\u901A\\u5E38\\u662F\\u5F02\\u6B65\\u7684\\uFF0C\\u5E76\\u4E14 React \\u4F1A\\u5C06\\u591A\\u4E2A\\u72B6\\u6001\\u66F4\\u65B0\\u6279\\u5904\\u7406\\u5728\\u4E00\\u8D77\\u4EE5\\u63D0\\u9AD8\\u6027\\u80FD\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"useState\"}),\" \\u8BBE\\u7F6E\\u5668\\u65F6\\u4F1A\\u53D1\\u751F\\u4EC0\\u4E48\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u72B6\\u6001\\u66F4\\u65B0\\u8C03\\u5EA6\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u60A8\\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"useState\"}),\" \\u63D0\\u4F9B\\u7684\\u8BBE\\u7F6E\\u5668\\u51FD\\u6570\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"setCount\"}),\"\\uFF09\\u65F6\\uFF0CReact \\u4F1A\\u5B89\\u6392\\u5BF9\\u8BE5\\u7279\\u5B9A\\u72B6\\u6001\\u53D8\\u91CF\\u7684\\u66F4\\u65B0\\u3002\\u8FD9\\u4E0D\\u4F1A\\u7ACB\\u5373\\u53D1\\u751F\\uFF1BReact \\u4F1A\\u5C06\\u7EC4\\u4EF6\\u6807\\u8BB0\\u4E3A\\u9700\\u8981\\u4F7F\\u7528\\u66F4\\u65B0\\u540E\\u7684\\u72B6\\u6001\\u503C\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [count, setCount] = useState(0);\n// ...\nsetCount(count + 1); // \\u5B89\\u6392\\u66F4\\u65B0\\u4EE5\\u5C06 'count' \\u8BBE\\u7F6E\\u4E3A 1\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u72B6\\u6001\\u66FF\\u6362\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useState\"}),\" \\u8BBE\\u7F6E\\u5668\\u51FD\\u6570\",(0,n.jsx)(e.strong,{children:\"\\u5B8C\\u5168\\u66FF\\u6362\"}),\"\\u60A8\\u63D0\\u4F9B\\u7684\\u65B0\\u503C\\u4E2D\\u7684\\u65E7\\u72B6\\u6001\\u503C\\u3002\\u5982\\u679C\\u60A8\\u7684\\u72B6\\u6001\\u662F\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u5E76\\u4E14\\u60A8\\u53EA\\u60F3\\u66F4\\u65B0\\u4E00\\u4E2A\\u5C5E\\u6027\\uFF0C\\u5219\\u9700\\u8981\\u624B\\u52A8\\u5C55\\u5F00\\u65E7\\u72B6\\u6001\\u5E76\\u8986\\u76D6\\u7279\\u5B9A\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [user, setUser] = useState({ name: 'Anon', age: 99 });\n\n// \\u4EC5\\u66F4\\u65B0 name\\uFF0C\\u60A8\\u5FC5\\u987B\\u5C55\\u5F00\\u65E7\\u72B6\\u6001\\uFF1A\nsetUser((prevState) => ({ ...prevState, name: 'John' }));\n// \\u5982\\u679C\\u60A8\\u53EA\\u662F\\u6267\\u884C setUser({ name: 'John' })\\uFF0C\\u5219 'age' \\u5C5E\\u6027\\u5C06\\u4F1A\\u4E22\\u5931\\u3002\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u91CD\\u65B0\\u6E32\\u67D3\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u5B89\\u6392\\u72B6\\u6001\\u66F4\\u65B0\\u540E\\uFF0CReact \\u6700\\u7EC8\\u5C06\\u89E6\\u53D1\\u7EC4\\u4EF6\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E3B\\u4F53\\u5C06\\u4F7F\\u7528\\u65B0\\u7684\\u72B6\\u6001\\u503C\\u518D\\u6B21\\u6267\\u884C\\u3002React \\u66F4\\u65B0\\u5176\\u865A\\u62DF DOM\\uFF0C\\u5C06\\u5176\\u4E0E\\u4E4B\\u524D\\u7684\\u7248\\u672C\\u8FDB\\u884C\\u6BD4\\u8F83\\uFF0C\\u5E76\\u4EC5\\u5728\\u5FC5\\u8981\\u65F6\\u6709\\u6548\\u5730\\u66F4\\u65B0\\u5B9E\\u9645 DOM\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5F02\\u6B65\\u6027\\u8D28\\u548C\\u6279\\u5904\\u7406\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u7531 \",(0,n.jsx)(e.code,{children:\"useState\"}),\" \\u8BBE\\u7F6E\\u5668\\u89E6\\u53D1\\u7684\\u72B6\\u6001\\u66F4\\u65B0\\u901A\\u5E38\\u662F\\u5F02\\u6B65\\u548C\\u6279\\u5904\\u7406\\u7684\\u3002\\u5982\\u679C\\u60A8\\u5728\\u540C\\u4E00\\u4E2A\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u6216 effect \\u4E2D\\u8C03\\u7528\\u591A\\u4E2A\\u72B6\\u6001\\u8BBE\\u7F6E\\u5668\\uFF0CReact \\u901A\\u5E38\\u4F1A\\u5C06\\u8FD9\\u4E9B\\u66F4\\u65B0\\u6279\\u5904\\u7406\\u5728\\u4E00\\u8D77\\uFF0C\\u4EE5\\u8FDB\\u884C\\u5355\\u6B21\\u91CD\\u65B0\\u6E32\\u67D3\\uFF0C\\u4ECE\\u800C\\u83B7\\u5F97\\u66F4\\u597D\\u7684\\u6027\\u80FD\\u3002\\u56E0\\u6B64\\uFF0C\\u60A8\\u4E0D\\u5E94\\u8BE5\\u4F9D\\u8D56\\u72B6\\u6001\\u53D8\\u91CF\\u5728\\u8C03\\u7528\\u8BBE\\u7F6E\\u5668\\u540E\\u7ACB\\u5373\\u5177\\u6709\\u65B0\\u503C\\u3002\\u5982\\u679C\\u65B0\\u72B6\\u6001\\u4F9D\\u8D56\\u4E8E\\u4E4B\\u524D\\u7684\\u72B6\\u6001\\uFF0C\\u8BF7\\u4F7F\\u7528\\u51FD\\u6570\\u5F0F\\u66F4\\u65B0\\u5F62\\u5F0F\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// \\u5047\\u8BBE count \\u4E3A 0\nsetCount(count + 1); // \\u5C06\\u66F4\\u65B0\\u6392\\u961F\\u5230 1\nsetCount(count + 1); // \\u4ECD\\u7136\\u5C06 count \\u89C6\\u4E3A 0\\uFF0C\\u518D\\u6B21\\u5C06\\u66F4\\u65B0\\u6392\\u961F\\u5230 1!\n// \\u7ED3\\u679C\\u53EF\\u80FD\\u662F 1\\uFF0C\\u800C\\u4E0D\\u662F 2\n\n// \\u4F7F\\u7528\\u51FD\\u6570\\u5F0F\\u66F4\\u65B0\\u7684\\u6B63\\u786E\\u65B9\\u6CD5\\uFF1A\nsetCount((prevCount) => prevCount + 1); // \\u6839\\u636E\\u4E4B\\u524D\\u7684\\u72B6\\u6001\\u5C06\\u66F4\\u65B0\\u6392\\u961F\nsetCount((prevCount) => prevCount + 1); // \\u6839\\u636E\\u7B2C\\u4E00\\u4E2A\\u7684\\u7ED3\\u679C\\u5C06\\u53E6\\u4E00\\u4E2A\\u66F4\\u65B0\\u6392\\u961F\n// \\u7ED3\\u679C\\u5C06\\u662F 2\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useState\",children:[\"React \\u6587\\u6863\\uFF1A\\u4F7F\\u7528\\u72B6\\u6001 Hook (\",(0,n.jsx)(e.code,{children:\"useState\"}),\")\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state\",children:\"React \\u6587\\u6863\\uFF1A\\u5C06\\u591A\\u4E2A\\u72B6\\u6001\\u66F4\\u65B0\\u6392\\u961F\"})}),`\n`]})]})}function j(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(i,t)})):i(t)}var x=j;return f(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var S=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var c in e)a(t,c,{get:e[c],enumerable:!0})},s=(t,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!C.call(t,r)&&r!==c&&a(t,r,{get:()=>e[r],enumerable:!(o=p(e,r))||o.enumerable});return t};var f=(t,e,c)=>(c=t!=null?u(g(t)):{},s(e||!t||!t.__esModule?a(c,\"default\",{value:t,enumerable:!0}):c,t)),R=t=>s(a({},\"__esModule\",{value:!0}),t);var d=S((M,h)=>{h.exports=_jsx_runtime});var j={};v(j,{default:()=>i,frontmatter:()=>x});var n=f(d()),x={title:\"\\u89E3\\u91CA\\u5728 React \\u4E2D\\u8C03\\u7528 `useState` \\u8BBE\\u7F6E\\u5668\\u51FD\\u6570\\u65F6\\u4F1A\\u53D1\\u751F\\u4EC0\\u4E48\"};function l(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u5728 React \\u4E2D\\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"useState\"}),\" \\u94A9\\u5B50\\u8FD4\\u56DE\\u7684\\u8BBE\\u7F6E\\u5668\\u51FD\\u6570\\u65F6\\uFF0C\\u5B83\\u4F1A\\u5B89\\u6392\\u5BF9\\u7EC4\\u4EF6\\u72B6\\u6001\\u503C\\u7684\\u66F4\\u65B0\\u3002\\u7136\\u540E\\uFF0CReact \\u4F1A\\u5C06\\u7EC4\\u4EF6\\u91CD\\u65B0\\u6E32\\u67D3\\u4E0E\\u65B0\\u72B6\\u6001\\u6392\\u961F\\u3002\\u6B64\\u8FC7\\u7A0B\\u901A\\u5E38\\u662F\\u5F02\\u6B65\\u7684\\uFF0C\\u5E76\\u4E14 React \\u4F1A\\u5C06\\u591A\\u4E2A\\u72B6\\u6001\\u66F4\\u65B0\\u6279\\u5904\\u7406\\u5728\\u4E00\\u8D77\\u4EE5\\u63D0\\u9AD8\\u6027\\u80FD\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"useState\"}),\" \\u8BBE\\u7F6E\\u5668\\u65F6\\u4F1A\\u53D1\\u751F\\u4EC0\\u4E48\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u72B6\\u6001\\u66F4\\u65B0\\u8C03\\u5EA6\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u60A8\\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"useState\"}),\" \\u63D0\\u4F9B\\u7684\\u8BBE\\u7F6E\\u5668\\u51FD\\u6570\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"setCount\"}),\"\\uFF09\\u65F6\\uFF0CReact \\u4F1A\\u5B89\\u6392\\u5BF9\\u8BE5\\u7279\\u5B9A\\u72B6\\u6001\\u53D8\\u91CF\\u7684\\u66F4\\u65B0\\u3002\\u8FD9\\u4E0D\\u4F1A\\u7ACB\\u5373\\u53D1\\u751F\\uFF1BReact \\u4F1A\\u5C06\\u7EC4\\u4EF6\\u6807\\u8BB0\\u4E3A\\u9700\\u8981\\u4F7F\\u7528\\u66F4\\u65B0\\u540E\\u7684\\u72B6\\u6001\\u503C\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [count, setCount] = useState(0);\n// ...\nsetCount(count + 1); // \\u5B89\\u6392\\u66F4\\u65B0\\u4EE5\\u5C06 'count' \\u8BBE\\u7F6E\\u4E3A 1\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u72B6\\u6001\\u66FF\\u6362\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useState\"}),\" \\u8BBE\\u7F6E\\u5668\\u51FD\\u6570\",(0,n.jsx)(e.strong,{children:\"\\u5B8C\\u5168\\u66FF\\u6362\"}),\"\\u60A8\\u63D0\\u4F9B\\u7684\\u65B0\\u503C\\u4E2D\\u7684\\u65E7\\u72B6\\u6001\\u503C\\u3002\\u5982\\u679C\\u60A8\\u7684\\u72B6\\u6001\\u662F\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u5E76\\u4E14\\u60A8\\u53EA\\u60F3\\u66F4\\u65B0\\u4E00\\u4E2A\\u5C5E\\u6027\\uFF0C\\u5219\\u9700\\u8981\\u624B\\u52A8\\u5C55\\u5F00\\u65E7\\u72B6\\u6001\\u5E76\\u8986\\u76D6\\u7279\\u5B9A\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [user, setUser] = useState({ name: 'Anon', age: 99 });\n\n// \\u4EC5\\u66F4\\u65B0 name\\uFF0C\\u60A8\\u5FC5\\u987B\\u5C55\\u5F00\\u65E7\\u72B6\\u6001\\uFF1A\nsetUser((prevState) => ({ ...prevState, name: 'John' }));\n// \\u5982\\u679C\\u60A8\\u53EA\\u662F\\u6267\\u884C setUser({ name: 'John' })\\uFF0C\\u5219 'age' \\u5C5E\\u6027\\u5C06\\u4F1A\\u4E22\\u5931\\u3002\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u91CD\\u65B0\\u6E32\\u67D3\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u5B89\\u6392\\u72B6\\u6001\\u66F4\\u65B0\\u540E\\uFF0CReact \\u6700\\u7EC8\\u5C06\\u89E6\\u53D1\\u7EC4\\u4EF6\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E3B\\u4F53\\u5C06\\u4F7F\\u7528\\u65B0\\u7684\\u72B6\\u6001\\u503C\\u518D\\u6B21\\u6267\\u884C\\u3002React \\u66F4\\u65B0\\u5176\\u865A\\u62DF DOM\\uFF0C\\u5C06\\u5176\\u4E0E\\u4E4B\\u524D\\u7684\\u7248\\u672C\\u8FDB\\u884C\\u6BD4\\u8F83\\uFF0C\\u5E76\\u4EC5\\u5728\\u5FC5\\u8981\\u65F6\\u6709\\u6548\\u5730\\u66F4\\u65B0\\u5B9E\\u9645 DOM\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5F02\\u6B65\\u6027\\u8D28\\u548C\\u6279\\u5904\\u7406\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u7531 \",(0,n.jsx)(e.code,{children:\"useState\"}),\" \\u8BBE\\u7F6E\\u5668\\u89E6\\u53D1\\u7684\\u72B6\\u6001\\u66F4\\u65B0\\u901A\\u5E38\\u662F\\u5F02\\u6B65\\u548C\\u6279\\u5904\\u7406\\u7684\\u3002\\u5982\\u679C\\u60A8\\u5728\\u540C\\u4E00\\u4E2A\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u6216 effect \\u4E2D\\u8C03\\u7528\\u591A\\u4E2A\\u72B6\\u6001\\u8BBE\\u7F6E\\u5668\\uFF0CReact \\u901A\\u5E38\\u4F1A\\u5C06\\u8FD9\\u4E9B\\u66F4\\u65B0\\u6279\\u5904\\u7406\\u5728\\u4E00\\u8D77\\uFF0C\\u4EE5\\u8FDB\\u884C\\u5355\\u6B21\\u91CD\\u65B0\\u6E32\\u67D3\\uFF0C\\u4ECE\\u800C\\u83B7\\u5F97\\u66F4\\u597D\\u7684\\u6027\\u80FD\\u3002\\u56E0\\u6B64\\uFF0C\\u60A8\\u4E0D\\u5E94\\u8BE5\\u4F9D\\u8D56\\u72B6\\u6001\\u53D8\\u91CF\\u5728\\u8C03\\u7528\\u8BBE\\u7F6E\\u5668\\u540E\\u7ACB\\u5373\\u5177\\u6709\\u65B0\\u503C\\u3002\\u5982\\u679C\\u65B0\\u72B6\\u6001\\u4F9D\\u8D56\\u4E8E\\u4E4B\\u524D\\u7684\\u72B6\\u6001\\uFF0C\\u8BF7\\u4F7F\\u7528\\u51FD\\u6570\\u5F0F\\u66F4\\u65B0\\u5F62\\u5F0F\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// \\u5047\\u8BBE count \\u4E3A 0\nsetCount(count + 1); // \\u5C06\\u66F4\\u65B0\\u6392\\u961F\\u5230 1\nsetCount(count + 1); // \\u4ECD\\u7136\\u5C06 count \\u89C6\\u4E3A 0\\uFF0C\\u518D\\u6B21\\u5C06\\u66F4\\u65B0\\u6392\\u961F\\u5230 1!\n// \\u7ED3\\u679C\\u53EF\\u80FD\\u662F 1\\uFF0C\\u800C\\u4E0D\\u662F 2\n\n// \\u4F7F\\u7528\\u51FD\\u6570\\u5F0F\\u66F4\\u65B0\\u7684\\u6B63\\u786E\\u65B9\\u6CD5\\uFF1A\nsetCount((prevCount) => prevCount + 1); // \\u6839\\u636E\\u4E4B\\u524D\\u7684\\u72B6\\u6001\\u5C06\\u66F4\\u65B0\\u6392\\u961F\nsetCount((prevCount) => prevCount + 1); // \\u6839\\u636E\\u7B2C\\u4E00\\u4E2A\\u7684\\u7ED3\\u679C\\u5C06\\u53E6\\u4E00\\u4E2A\\u66F4\\u65B0\\u6392\\u961F\n// \\u7ED3\\u679C\\u5C06\\u662F 2\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useState\",children:[\"React \\u6587\\u6863\\uFF1A\\u4F7F\\u7528\\u72B6\\u6001 Hook (\",(0,n.jsx)(e.code,{children:\"useState\"}),\")\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state\",children:\"React \\u6587\\u6863\\uFF1A\\u5C06\\u591A\\u4E2A\\u72B6\\u6001\\u66F4\\u65B0\\u6392\\u961F\"})}),`\n`]})]})}function i(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}return R(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-what-react-hydration-is/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-what-react-hydration-is/en-US.json
index b5d023814..2fc74509f 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-what-react-hydration-is/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-what-react-hydration-is/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/explain-what-react-hydration-is/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var o=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var u=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},s=(t,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!v.call(t,r)&&r!==i&&a(t,r,{get:()=>e[r],enumerable:!(c=g(e,r))||c.enumerable});return t};var y=(t,e,i)=>(i=t!=null?o(m(t)):{},s(e||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),R=t=>s(a({},\"__esModule\",{value:!0}),t);var l=u((L,h)=>{h.exports=_jsx_runtime});var T={};f(T,{default:()=>x,frontmatter:()=>b});var n=y(l()),b={title:\"Explain what React hydration is\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",ul:\"ul\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"React hydration is the process of attaching event listeners and making a server-rendered HTML page interactive on the client side. When a React application is server-side rendered, the HTML is sent to the client, and React takes over to make it dynamic by attaching event handlers and initializing state. This process is called hydration.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is React hydration?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Server-side rendering (SSR)\"}),`\n`,(0,n.jsx)(e.p,{children:\"Server-side rendering (SSR) is a technique where the HTML of a web page is generated on the server and sent to the client. This allows for faster initial page loads and better SEO since the content is already available when the page is loaded.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Hydration process\"}),`\n`,(0,n.jsx)(e.p,{children:'Hydration is the process that happens after the server-side rendered HTML is sent to the client. React takes the static HTML and \"hydrates\" it by attaching event listeners and initializing the state, making the page interactive. This process involves:'}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reusing the existing HTML\"}),\": React uses the HTML generated by the server and does not re-render it from scratch.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Attaching event listeners\"}),\": React attaches the necessary event listeners to the existing HTML elements.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Initializing state\"}),\": React initializes the component state and props to make the page dynamic.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here's a simple example to illustrate the concept:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Server-side rendering\"}),\": The server generates the following HTML:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<div id=\"root\">\n  <button>Click me</button>\n</div>\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Client-side hydration\"}),\": When the HTML is sent to the client, React hydrates it with the following code:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nfunction App() {\n  const handleClick = () => {\n    alert('Button clicked!');\n  };\n\n  return <button onClick={handleClick}>Click me</button>;\n}\n\nReactDOM.hydrate(<App />, document.getElementById('root'));\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the server sends the static HTML with a button to the client. React then hydrates the button by attaching the \",(0,n.jsx)(e.code,{children:\"onClick\"}),\" event listener, making it interactive.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits of hydration\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Faster initial load\"}),\": Since the HTML is already available, the initial page load is faster.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"SEO benefits\"}),\": Search engines can crawl the server-rendered HTML, improving SEO.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Improved user experience\"}),\": Users can see the content immediately, even before React has fully taken over.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Challenges of hydration\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Mismatch issues\"}),\": If the server-rendered HTML does not match the client-side React components, it can cause errors and warnings.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Performance overhead\"}),\": Hydration can be resource-intensive, especially for large applications.\"]}),`\n`]}),`\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://react.dev/reference/react-dom/client/hydrateRoot\",children:\"React documentation on hydration\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react-dom/server\",children:\"Server-side rendering in React\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nextjs.org/docs/basic-features/pages#hydration\",children:\"Next.js documentation on hydration\"})}),`\n`]})]})}function M(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var x=M;return R(T);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},s=(t,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!u.call(t,r)&&r!==i&&a(t,r,{get:()=>e[r],enumerable:!(c=g(e,r))||c.enumerable});return t};var R=(t,e,i)=>(i=t!=null?p(v(t)):{},s(e||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),M=t=>s(a({},\"__esModule\",{value:!0}),t);var l=f((H,h)=>{h.exports=_jsx_runtime});var T={};y(T,{default:()=>o,frontmatter:()=>x});var n=R(l()),x={title:\"Explain what React hydration is\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"React hydration is the process of attaching event listeners and making a server-rendered HTML page interactive on the client side. When a React application is server-side rendered, the HTML is sent to the client, and React takes over to make it dynamic by attaching event handlers and initializing state. This process is called hydration.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is React hydration?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Server-side rendering (SSR)\"}),`\n`,(0,n.jsx)(e.p,{children:\"Server-side rendering (SSR) is a technique where the HTML of a web page is generated on the server and sent to the client. This allows for faster initial page loads and better SEO since the content is already available when the page is loaded.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Hydration process\"}),`\n`,(0,n.jsx)(e.p,{children:'Hydration is the process that happens after the server-side rendered HTML is sent to the client. React takes the static HTML and \"hydrates\" it by attaching event listeners and initializing the state, making the page interactive. This process involves:'}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reusing the existing HTML\"}),\": React uses the HTML generated by the server and does not re-render it from scratch.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Attaching event listeners\"}),\": React attaches the necessary event listeners to the existing HTML elements.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Initializing state\"}),\": React initializes the component state and props to make the page dynamic.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here's a simple example to illustrate the concept:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Server-side rendering\"}),\": The server generates the following HTML:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<div id=\"root\">\n  <button>Click me</button>\n</div>\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Client-side hydration\"}),\": When the HTML is sent to the client, React hydrates it with the following code:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nfunction App() {\n  const handleClick = () => {\n    alert('Button clicked!');\n  };\n\n  return <button onClick={handleClick}>Click me</button>;\n}\n\nReactDOM.hydrate(<App />, document.getElementById('root'));\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the server sends the static HTML with a button to the client. React then hydrates the button by attaching the \",(0,n.jsx)(e.code,{children:\"onClick\"}),\" event listener, making it interactive.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits of hydration\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Faster initial load\"}),\": Since the HTML is already available, the initial page load is faster.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"SEO benefits\"}),\": Search engines can crawl the server-rendered HTML, improving SEO.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Improved user experience\"}),\": Users can see the content immediately, even before React has fully taken over.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Challenges of hydration\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Mismatch issues\"}),\": If the server-rendered HTML does not match the client-side React components, it can cause errors and warnings.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Performance overhead\"}),\": Hydration can be resource-intensive, especially for large applications.\"]}),`\n`]}),`\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://react.dev/reference/react-dom/client/hydrateRoot\",children:\"React documentation on hydration\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react-dom/server\",children:\"Server-side rendering in React\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nextjs.org/docs/basic-features/pages#hydration\",children:\"Next.js documentation on hydration\"})}),`\n`]})]})}function o(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return M(T);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-what-react-hydration-is/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-what-react-hydration-is/zh-CN.json
index 6906c6a67..69e6ed175 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-what-react-hydration-is/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-what-react-hydration-is/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/explain-what-react-hydration-is/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var u=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),M=(r,n)=>{for(var c in n)l(r,c,{get:n[c],enumerable:!0})},h=(r,n,c,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of g(n))!R.call(r,t)&&t!==c&&l(r,t,{get:()=>n[t],enumerable:!(i=p(n,t))||i.enumerable});return r};var L=(r,n,c)=>(c=r!=null?s(m(r)):{},h(n||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),T=r=>h(l({},\"__esModule\",{value:!0}),r);var o=u((b,d)=>{d.exports=_jsx_runtime});var j={};M(j,{default:()=>x,frontmatter:()=>f});var e=L(o()),f={title:\"\\u89E3\\u91CA React \\u6C34\\u5408\\u662F\\u4EC0\\u4E48\"};function a(r){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",ul:\"ul\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u6C34\\u5408\\u662F\\u5728\\u5BA2\\u6237\\u7AEF\\u9644\\u52A0\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u5E76\\u4F7F\\u670D\\u52A1\\u5668\\u6E32\\u67D3\\u7684 HTML \\u9875\\u9762\\u5177\\u6709\\u4EA4\\u4E92\\u6027\\u7684\\u8FC7\\u7A0B\\u3002\\u5F53 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u8FDB\\u884C\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\u65F6\\uFF0CHTML \\u4F1A\\u53D1\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\\uFF0CReact \\u4F1A\\u63A5\\u7BA1\\u5E76\\u901A\\u8FC7\\u9644\\u52A0\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u548C\\u521D\\u59CB\\u5316\\u72B6\\u6001\\u6765\\u4F7F\\u5176\\u5177\\u6709\\u52A8\\u6001\\u6027\\u3002\\u6B64\\u8FC7\\u7A0B\\u79F0\\u4E3A\\u6C34\\u5408\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F React \\u6C34\\u5408\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3 (SSR)\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3 (SSR) \\u662F\\u4E00\\u79CD\\u5728\\u670D\\u52A1\\u5668\\u4E0A\\u751F\\u6210\\u7F51\\u9875 HTML \\u5E76\\u5C06\\u5176\\u53D1\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\\u7684\\u6280\\u672F\\u3002\\u8FD9\\u5141\\u8BB8\\u66F4\\u5FEB\\u7684\\u521D\\u59CB\\u9875\\u9762\\u52A0\\u8F7D\\u548C\\u66F4\\u597D\\u7684 SEO\\uFF0C\\u56E0\\u4E3A\\u5185\\u5BB9\\u5728\\u52A0\\u8F7D\\u9875\\u9762\\u65F6\\u5DF2\\u7ECF\\u53EF\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6C34\\u5408\\u8FC7\\u7A0B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6C34\\u5408\\u662F\\u5728\\u5C06\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\u7684 HTML \\u53D1\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\\u540E\\u53D1\\u751F\\u7684\\u8FC7\\u7A0B\\u3002React \\u83B7\\u53D6\\u9759\\u6001 HTML \\u5E76\\u901A\\u8FC7\\u9644\\u52A0\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u548C\\u521D\\u59CB\\u5316\\u72B6\\u6001\\u6765\\u201C\\u6C34\\u5408\\u201D\\u5B83\\uFF0C\\u4ECE\\u800C\\u4F7F\\u9875\\u9762\\u5177\\u6709\\u4EA4\\u4E92\\u6027\\u3002\\u6B64\\u8FC7\\u7A0B\\u6D89\\u53CA\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u91CD\\u7528\\u73B0\\u6709\\u7684 HTML\"}),\"\\uFF1AReact \\u4F7F\\u7528\\u670D\\u52A1\\u5668\\u751F\\u6210\\u7684 HTML\\uFF0C\\u800C\\u4E0D\\u662F\\u4ECE\\u5934\\u5F00\\u59CB\\u91CD\\u65B0\\u6E32\\u67D3\\u5B83\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9644\\u52A0\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\"}),\"\\uFF1AReact \\u5C06\\u5FC5\\u8981\\u7684\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u73B0\\u6709\\u7684 HTML \\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u521D\\u59CB\\u5316\\u72B6\\u6001\"}),\"\\uFF1AReact \\u521D\\u59CB\\u5316\\u7EC4\\u4EF6\\u72B6\\u6001\\u548C\\u5C5E\\u6027\\u4EE5\\u4F7F\\u9875\\u9762\\u5177\\u6709\\u52A8\\u6001\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u4F8B\\u5B50\\uFF0C\\u8BF4\\u660E\\u8FD9\\u4E2A\\u6982\\u5FF5\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\"}),\"\\uFF1A\\u670D\\u52A1\\u5668\\u751F\\u6210\\u4EE5\\u4E0B HTML\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-html\",children:`<div id=\"root\">\n  <button>Click me</button>\n</div>\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u5BA2\\u6237\\u7AEF\\u6C34\\u5408\"}),\"\\uFF1A\\u5F53 HTML \\u53D1\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\\u65F6\\uFF0CReact \\u4F7F\\u7528\\u4EE5\\u4E0B\\u4EE3\\u7801\\u5BF9\\u5176\\u8FDB\\u884C\\u6C34\\u5408\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nfunction App() {\n  const handleClick = () => {\n    alert('Button clicked!');\n  };\n\n  return <button onClick={handleClick}>Click me</button>;\n}\n\nReactDOM.hydrate(<App />, document.getElementById('root'));\n`})}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u670D\\u52A1\\u5668\\u5C06\\u5E26\\u6709\\u6309\\u94AE\\u7684\\u9759\\u6001 HTML \\u53D1\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\\u3002\\u7136\\u540E\\uFF0CReact \\u901A\\u8FC7\\u9644\\u52A0 \",(0,e.jsx)(n.code,{children:\"onClick\"}),\" \\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u6765\\u5BF9\\u6309\\u94AE\\u8FDB\\u884C\\u6C34\\u5408\\uFF0C\\u4F7F\\u5176\\u5177\\u6709\\u4EA4\\u4E92\\u6027\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6C34\\u5408\\u7684\\u597D\\u5904\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u66F4\\u5FEB\\u7684\\u521D\\u59CB\\u52A0\\u8F7D\"}),\"\\uFF1A\\u7531\\u4E8E HTML \\u5DF2\\u7ECF\\u53EF\\u7528\\uFF0C\\u56E0\\u6B64\\u521D\\u59CB\\u9875\\u9762\\u52A0\\u8F7D\\u901F\\u5EA6\\u66F4\\u5FEB\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"SEO \\u4F18\\u52BF\"}),\"\\uFF1A\\u641C\\u7D22\\u5F15\\u64CE\\u53EF\\u4EE5\\u6293\\u53D6\\u670D\\u52A1\\u5668\\u6E32\\u67D3\\u7684 HTML\\uFF0C\\u4ECE\\u800C\\u6539\\u5584 SEO\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6539\\u8FDB\\u7684\\u7528\\u6237\\u4F53\\u9A8C\"}),\"\\uFF1A\\u7528\\u6237\\u53EF\\u4EE5\\u7ACB\\u5373\\u770B\\u5230\\u5185\\u5BB9\\uFF0C\\u751A\\u81F3\\u5728 React \\u5B8C\\u5168\\u63A5\\u7BA1\\u4E4B\\u524D\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6C34\\u5408\\u7684\\u6311\\u6218\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E0D\\u5339\\u914D\\u95EE\\u9898\"}),\"\\uFF1A\\u5982\\u679C\\u670D\\u52A1\\u5668\\u6E32\\u67D3\\u7684 HTML \\u4E0E\\u5BA2\\u6237\\u7AEF React \\u7EC4\\u4EF6\\u4E0D\\u5339\\u914D\\uFF0C\\u5219\\u53EF\\u80FD\\u5BFC\\u81F4\\u9519\\u8BEF\\u548C\\u8B66\\u544A\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6027\\u80FD\\u5F00\\u9500\"}),\"\\uFF1A\\u6C34\\u5408\\u53EF\\u80FD\\u5360\\u7528\\u5927\\u91CF\\u8D44\\u6E90\\uFF0C\\u5C24\\u5176\\u5BF9\\u4E8E\\u5927\\u578B\\u5E94\\u7528\\u7A0B\\u5E8F\\u800C\\u8A00\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react-dom/client/hydrateRoot\",children:\"React \\u6587\\u6863\\u5173\\u4E8E hydration\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react-dom/server\",children:\"React \\u4E2D\\u7684\\u670D\\u52A1\\u7AEF\\u6E32\\u67D3\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://nextjs.org/docs/basic-features/pages#hydration\",children:\"Next.js \\u6587\\u6863\\u5173\\u4E8E hydration\"})}),`\n`]})]})}function H(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(a,r)})):a(r)}var x=H;return T(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var M=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),L=(r,n)=>{for(var c in n)l(r,c,{get:n[c],enumerable:!0})},h=(r,n,c,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of R(n))!u.call(r,t)&&t!==c&&l(r,t,{get:()=>n[t],enumerable:!(i=m(n,t))||i.enumerable});return r};var T=(r,n,c)=>(c=r!=null?p(g(r)):{},h(n||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),f=r=>h(l({},\"__esModule\",{value:!0}),r);var o=M((C,d)=>{d.exports=_jsx_runtime});var x={};L(x,{default:()=>s,frontmatter:()=>H});var e=T(o()),H={title:\"\\u89E3\\u91CA React \\u6C34\\u5408\\u662F\\u4EC0\\u4E48\"};function a(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u6C34\\u5408\\u662F\\u5728\\u5BA2\\u6237\\u7AEF\\u9644\\u52A0\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u5E76\\u4F7F\\u670D\\u52A1\\u5668\\u6E32\\u67D3\\u7684 HTML \\u9875\\u9762\\u5177\\u6709\\u4EA4\\u4E92\\u6027\\u7684\\u8FC7\\u7A0B\\u3002\\u5F53 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u8FDB\\u884C\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\u65F6\\uFF0CHTML \\u4F1A\\u53D1\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\\uFF0CReact \\u4F1A\\u63A5\\u7BA1\\u5E76\\u901A\\u8FC7\\u9644\\u52A0\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u548C\\u521D\\u59CB\\u5316\\u72B6\\u6001\\u6765\\u4F7F\\u5176\\u5177\\u6709\\u52A8\\u6001\\u6027\\u3002\\u6B64\\u8FC7\\u7A0B\\u79F0\\u4E3A\\u6C34\\u5408\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F React \\u6C34\\u5408\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3 (SSR)\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3 (SSR) \\u662F\\u4E00\\u79CD\\u5728\\u670D\\u52A1\\u5668\\u4E0A\\u751F\\u6210\\u7F51\\u9875 HTML \\u5E76\\u5C06\\u5176\\u53D1\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\\u7684\\u6280\\u672F\\u3002\\u8FD9\\u5141\\u8BB8\\u66F4\\u5FEB\\u7684\\u521D\\u59CB\\u9875\\u9762\\u52A0\\u8F7D\\u548C\\u66F4\\u597D\\u7684 SEO\\uFF0C\\u56E0\\u4E3A\\u5185\\u5BB9\\u5728\\u52A0\\u8F7D\\u9875\\u9762\\u65F6\\u5DF2\\u7ECF\\u53EF\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6C34\\u5408\\u8FC7\\u7A0B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6C34\\u5408\\u662F\\u5728\\u5C06\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\u7684 HTML \\u53D1\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\\u540E\\u53D1\\u751F\\u7684\\u8FC7\\u7A0B\\u3002React \\u83B7\\u53D6\\u9759\\u6001 HTML \\u5E76\\u901A\\u8FC7\\u9644\\u52A0\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u548C\\u521D\\u59CB\\u5316\\u72B6\\u6001\\u6765\\u201C\\u6C34\\u5408\\u201D\\u5B83\\uFF0C\\u4ECE\\u800C\\u4F7F\\u9875\\u9762\\u5177\\u6709\\u4EA4\\u4E92\\u6027\\u3002\\u6B64\\u8FC7\\u7A0B\\u6D89\\u53CA\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u91CD\\u7528\\u73B0\\u6709\\u7684 HTML\"}),\"\\uFF1AReact \\u4F7F\\u7528\\u670D\\u52A1\\u5668\\u751F\\u6210\\u7684 HTML\\uFF0C\\u800C\\u4E0D\\u662F\\u4ECE\\u5934\\u5F00\\u59CB\\u91CD\\u65B0\\u6E32\\u67D3\\u5B83\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9644\\u52A0\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\"}),\"\\uFF1AReact \\u5C06\\u5FC5\\u8981\\u7684\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u73B0\\u6709\\u7684 HTML \\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u521D\\u59CB\\u5316\\u72B6\\u6001\"}),\"\\uFF1AReact \\u521D\\u59CB\\u5316\\u7EC4\\u4EF6\\u72B6\\u6001\\u548C\\u5C5E\\u6027\\u4EE5\\u4F7F\\u9875\\u9762\\u5177\\u6709\\u52A8\\u6001\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u4F8B\\u5B50\\uFF0C\\u8BF4\\u660E\\u8FD9\\u4E2A\\u6982\\u5FF5\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\"}),\"\\uFF1A\\u670D\\u52A1\\u5668\\u751F\\u6210\\u4EE5\\u4E0B HTML\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-html\",children:`<div id=\"root\">\n  <button>Click me</button>\n</div>\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u5BA2\\u6237\\u7AEF\\u6C34\\u5408\"}),\"\\uFF1A\\u5F53 HTML \\u53D1\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\\u65F6\\uFF0CReact \\u4F7F\\u7528\\u4EE5\\u4E0B\\u4EE3\\u7801\\u5BF9\\u5176\\u8FDB\\u884C\\u6C34\\u5408\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nfunction App() {\n  const handleClick = () => {\n    alert('Button clicked!');\n  };\n\n  return <button onClick={handleClick}>Click me</button>;\n}\n\nReactDOM.hydrate(<App />, document.getElementById('root'));\n`})}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u670D\\u52A1\\u5668\\u5C06\\u5E26\\u6709\\u6309\\u94AE\\u7684\\u9759\\u6001 HTML \\u53D1\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\\u3002\\u7136\\u540E\\uFF0CReact \\u901A\\u8FC7\\u9644\\u52A0 \",(0,e.jsx)(n.code,{children:\"onClick\"}),\" \\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u6765\\u5BF9\\u6309\\u94AE\\u8FDB\\u884C\\u6C34\\u5408\\uFF0C\\u4F7F\\u5176\\u5177\\u6709\\u4EA4\\u4E92\\u6027\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6C34\\u5408\\u7684\\u597D\\u5904\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u66F4\\u5FEB\\u7684\\u521D\\u59CB\\u52A0\\u8F7D\"}),\"\\uFF1A\\u7531\\u4E8E HTML \\u5DF2\\u7ECF\\u53EF\\u7528\\uFF0C\\u56E0\\u6B64\\u521D\\u59CB\\u9875\\u9762\\u52A0\\u8F7D\\u901F\\u5EA6\\u66F4\\u5FEB\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"SEO \\u4F18\\u52BF\"}),\"\\uFF1A\\u641C\\u7D22\\u5F15\\u64CE\\u53EF\\u4EE5\\u6293\\u53D6\\u670D\\u52A1\\u5668\\u6E32\\u67D3\\u7684 HTML\\uFF0C\\u4ECE\\u800C\\u6539\\u5584 SEO\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6539\\u8FDB\\u7684\\u7528\\u6237\\u4F53\\u9A8C\"}),\"\\uFF1A\\u7528\\u6237\\u53EF\\u4EE5\\u7ACB\\u5373\\u770B\\u5230\\u5185\\u5BB9\\uFF0C\\u751A\\u81F3\\u5728 React \\u5B8C\\u5168\\u63A5\\u7BA1\\u4E4B\\u524D\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6C34\\u5408\\u7684\\u6311\\u6218\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E0D\\u5339\\u914D\\u95EE\\u9898\"}),\"\\uFF1A\\u5982\\u679C\\u670D\\u52A1\\u5668\\u6E32\\u67D3\\u7684 HTML \\u4E0E\\u5BA2\\u6237\\u7AEF React \\u7EC4\\u4EF6\\u4E0D\\u5339\\u914D\\uFF0C\\u5219\\u53EF\\u80FD\\u5BFC\\u81F4\\u9519\\u8BEF\\u548C\\u8B66\\u544A\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6027\\u80FD\\u5F00\\u9500\"}),\"\\uFF1A\\u6C34\\u5408\\u53EF\\u80FD\\u5360\\u7528\\u5927\\u91CF\\u8D44\\u6E90\\uFF0C\\u5C24\\u5176\\u5BF9\\u4E8E\\u5927\\u578B\\u5E94\\u7528\\u7A0B\\u5E8F\\u800C\\u8A00\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react-dom/client/hydrateRoot\",children:\"React \\u6587\\u6863\\u5173\\u4E8E hydration\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react-dom/server\",children:\"React \\u4E2D\\u7684\\u670D\\u52A1\\u7AEF\\u6E32\\u67D3\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://nextjs.org/docs/basic-features/pages#hydration\",children:\"Next.js \\u6587\\u6863\\u5173\\u4E8E hydration\"})}),`\n`]})]})}function s(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(a,{...r})}):a(r)}return f(x);})();\n;return Component;"
 }
\ No newline at end of file
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 4d4e7bd20..c7ce45601 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
@@ -27,5 +27,5 @@
     ],
     "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 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;"
+  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(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 f(e))!x.call(t,r)&&r!==o&&a(t,r,{get:()=>e[r],enumerable:!(i=u(e,r))||i.enumerable});return t};var I=(t,e,o)=>(o=t!=null?p(m(t)):{},c(e||!t||!t.__esModule?a(o,\"default\",{value:t,enumerable:!0}):o,t)),F=t=>c(a({},\"__esModule\",{value:!0}),t);var d=y((b,s)=>{s.exports=_jsx_runtime});var E={};v(E,{default:()=>h,frontmatter:()=>g});var n=I(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={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...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 h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}return F(E);})();\n;return Component;"
 }
\ No newline at end of file
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/pt-BR.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/pt-BR.json
index e0847e064..c205e7ef2 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/pt-BR.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/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "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/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var r in e)c(n,r,{get:e[r],enumerable:!0})},i=(n,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of f(e))!h.call(n,a)&&a!==r&&c(n,a,{get:()=>e[a],enumerable:!(t=l(e,a))||t.enumerable});return n};var v=(n,e,r)=>(r=n!=null?u(p(n)):{},i(e||!n||!n.__esModule?c(r,\"default\",{value:n,enumerable:!0}):r,n)),I=n=>i(c({},\"__esModule\",{value:!0}),n);var d=x((F,s)=>{s.exports=_jsx_runtime});var E={};g(E,{default:()=>q,frontmatter:()=>b});var o=v(d()),b={title:\"Explique porque o seguinte n\\xE3o funciona como um IIFE: `function foo(){ }();`. O que precisa ser alterado para torn\\xE1-lo corretamente um IIFE?\"};function m(n){let e=Object.assign({p:\"p\",code:\"code\",em:\"em\",pre:\"pre\"},n.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"IIFE significa express\\xF5es de fun\\xE7\\xE3o imediatamente invocadas. O interpretador JavaScript l\\xEA \",(0,o.jsx)(e.code,{children:\"function foo(){ }();\"}),\" como \",(0,o.jsx)(e.code,{children:\"function foo(){ }\"}),\" e \",(0,o.jsx)(e.code,{children:\"();\"}),\", onde o primeiro \\xE9 uma declara\\xE7\\xE3o de fun\\xE7\\xE3o e o \\xFAltimo (um par de par\\xEAnteses) \\xE9 uma tentativa de chamar uma fun\\xE7\\xE3o, mas n\\xE3o h\\xE1 nome especificado, portanto, ele retorna \",(0,o.jsx)(e.code,{children:\"Uncaught SyntaxError: Unexpected token )\"}),\".\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Aqui est\\xE3o duas maneiras de corrigir que envolve a adi\\xE7\\xE3o de mais par\\xEAnteses: \",(0,o.jsx)(e.code,{children:\"(function foo(){ })()\"}),\" e \",(0,o.jsx)(e.code,{children:\"(function foo(){ }())\"}),\". Declara\\xE7\\xF5es que come\\xE7am com \",(0,o.jsx)(e.code,{children:\"function\"}),\" s\\xE3o consideradas como \",(0,o.jsx)(e.em,{children:\"function declarations\"}),\" ao envolver essa fun\\xE7\\xE3o dentro de \",(0,o.jsx)(e.code,{children:\"()\"}),\", ela se torna uma \",(0,o.jsx)(e.em,{children:\"function expression\"}),\" que pode ser executada com o \",(0,o.jsx)(e.code,{children:\"()\"}),\" subsequente. Essas fun\\xE7\\xF5es n\\xE3o s\\xE3o expostas no escopo global e voc\\xEA pode at\\xE9 omitir o nome delas se n\\xE3o precisar fazer refer\\xEAncia a si mesmas dentro do corpo.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Voc\\xEA tamb\\xE9m pode usar o operador \",(0,o.jsx)(e.code,{children:\"void\"}),\": \",(0,o.jsx)(e.code,{children:\"void function foo(){ }();\"}),\". Infelizmente, h\\xE1 um problema com essa abordagem. A avalia\\xE7\\xE3o da express\\xE3o fornecida \\xE9 sempre undefined, ent\\xE3o, se sua fun\\xE7\\xE3o IIFE retornar algo, voc\\xEA n\\xE3o poder\\xE1 us\\xE1-la. Um exemplo:\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`const foo = void (function bar() {\n  return 'foo';\n})();\n\nconsole.log(foo); // indefinido\n`})})]})}function j(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(m,n)})):m(n)}var q=j;return I(E);})();\n;return Component;"
+  "solution": "var Component=(()=>{var l=Object.create;var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var r in e)c(n,r,{get:e[r],enumerable:!0})},i=(n,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!x.call(n,a)&&a!==r&&c(n,a,{get:()=>e[a],enumerable:!(t=f(e,a))||t.enumerable});return n};var I=(n,e,r)=>(r=n!=null?l(h(n)):{},i(e||!n||!n.__esModule?c(r,\"default\",{value:n,enumerable:!0}):r,n)),q=n=>i(c({},\"__esModule\",{value:!0}),n);var s=v((j,d)=>{d.exports=_jsx_runtime});var _={};g(_,{default:()=>u,frontmatter:()=>E});var o=I(s()),E={title:\"Explique porque o seguinte n\\xE3o funciona como um IIFE: `function foo(){ }();`. O que precisa ser alterado para torn\\xE1-lo corretamente um IIFE?\"};function m(n){let e={code:\"code\",em:\"em\",p:\"p\",pre:\"pre\",...n.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"IIFE significa express\\xF5es de fun\\xE7\\xE3o imediatamente invocadas. O interpretador JavaScript l\\xEA \",(0,o.jsx)(e.code,{children:\"function foo(){ }();\"}),\" como \",(0,o.jsx)(e.code,{children:\"function foo(){ }\"}),\" e \",(0,o.jsx)(e.code,{children:\"();\"}),\", onde o primeiro \\xE9 uma declara\\xE7\\xE3o de fun\\xE7\\xE3o e o \\xFAltimo (um par de par\\xEAnteses) \\xE9 uma tentativa de chamar uma fun\\xE7\\xE3o, mas n\\xE3o h\\xE1 nome especificado, portanto, ele retorna \",(0,o.jsx)(e.code,{children:\"Uncaught SyntaxError: Unexpected token )\"}),\".\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Aqui est\\xE3o duas maneiras de corrigir que envolve a adi\\xE7\\xE3o de mais par\\xEAnteses: \",(0,o.jsx)(e.code,{children:\"(function foo(){ })()\"}),\" e \",(0,o.jsx)(e.code,{children:\"(function foo(){ }())\"}),\". Declara\\xE7\\xF5es que come\\xE7am com \",(0,o.jsx)(e.code,{children:\"function\"}),\" s\\xE3o consideradas como \",(0,o.jsx)(e.em,{children:\"function declarations\"}),\" ao envolver essa fun\\xE7\\xE3o dentro de \",(0,o.jsx)(e.code,{children:\"()\"}),\", ela se torna uma \",(0,o.jsx)(e.em,{children:\"function expression\"}),\" que pode ser executada com o \",(0,o.jsx)(e.code,{children:\"()\"}),\" subsequente. Essas fun\\xE7\\xF5es n\\xE3o s\\xE3o expostas no escopo global e voc\\xEA pode at\\xE9 omitir o nome delas se n\\xE3o precisar fazer refer\\xEAncia a si mesmas dentro do corpo.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Voc\\xEA tamb\\xE9m pode usar o operador \",(0,o.jsx)(e.code,{children:\"void\"}),\": \",(0,o.jsx)(e.code,{children:\"void function foo(){ }();\"}),\". Infelizmente, h\\xE1 um problema com essa abordagem. A avalia\\xE7\\xE3o da express\\xE3o fornecida \\xE9 sempre undefined, ent\\xE3o, se sua fun\\xE7\\xE3o IIFE retornar algo, voc\\xEA n\\xE3o poder\\xE1 us\\xE1-la. Um exemplo:\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`const foo = void (function bar() {\n  return 'foo';\n})();\n\nconsole.log(foo); // indefinido\n`})})]})}function u(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(m,{...n})}):m(n)}return q(_);})();\n;return Component;"
 }
\ No newline at end of file
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/zh-CN.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/zh-CN.json
index 84c7c4d8c..72fa5fa47 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/zh-CN.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/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "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/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var m=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),v=(c,n)=>{for(var r in n)o(c,r,{get:n[r],enumerable:!0})},l=(c,n,r,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of f(n))!I.call(c,i)&&i!==r&&o(c,i,{get:()=>n[i],enumerable:!(t=p(n,i))||t.enumerable});return c};var F=(c,n,r)=>(r=c!=null?s(u(c)):{},l(n||!c||!c.__esModule?o(r,\"default\",{value:c,enumerable:!0}):r,c)),g=c=>l(o({},\"__esModule\",{value:!0}),c);var a=m((_,h)=>{h.exports=_jsx_runtime});var j={};v(j,{default:()=>E,frontmatter:()=>S});var e=F(a()),S={title:\"\\u89E3\\u91CA\\u4E3A\\u4EC0\\u4E48\\u4EE5\\u4E0B\\u4EE3\\u7801\\u4E0D\\u80FD\\u4F5C\\u4E3A IIFE \\u5DE5\\u4F5C\\uFF1A`function foo(){}();`\\u3002\\u9700\\u8981\\u66F4\\u6539\\u4EC0\\u4E48\\u624D\\u80FD\\u4F7F\\u5176\\u6210\\u4E3A\\u4E00\\u4E2A\\u6B63\\u786E\\u7684 IIFE\\uFF1F\"};function d(c){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},c.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4EE3\\u7801 \",(0,e.jsx)(n.code,{children:\"function foo(){}();\"}),\" \\u4E0D\\u80FD\\u4F5C\\u4E3A\\u7ACB\\u5373\\u8C03\\u7528\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F (IIFE) \\u5DE5\\u4F5C\\uFF0C\\u56E0\\u4E3A JavaScript \\u89E3\\u6790\\u5668\\u5C06 \",(0,e.jsx)(n.code,{children:\"function foo(){}\"}),\" \\u89C6\\u4E3A\\u51FD\\u6570\\u58F0\\u660E\\uFF0C\\u800C\\u4E0D\\u662F\\u8868\\u8FBE\\u5F0F\\u3002\\u8981\\u4F7F\\u5176\\u6210\\u4E3A IIFE\\uFF0C\\u4F60\\u9700\\u8981\\u5C06\\u51FD\\u6570\\u7528\\u62EC\\u53F7\\u62EC\\u8D77\\u6765\\uFF0C\\u5C06\\u5176\\u8F6C\\u6362\\u4E3A\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\uFF1A\",(0,e.jsx)(n.code,{children:\"(function foo(){})();\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4E3A\\u4EC0\\u4E48\\u4EE3\\u7801\\u4E0D\\u80FD\\u4F5C\\u4E3A IIFE \\u5DE5\\u4F5C\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u58F0\\u660E vs. \\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u51FD\\u6570\\u58F0\\u660E\\u548C\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u88AB\\u89E3\\u6790\\u5668\\u533A\\u522B\\u5BF9\\u5F85\\u3002\\u4EE3\\u7801 \",(0,e.jsx)(n.code,{children:\"function foo(){}\"}),\" \\u88AB\\u89E3\\u91CA\\u4E3A\\u51FD\\u6570\\u58F0\\u660E\\u3002\\u51FD\\u6570\\u58F0\\u660E\\u4E0D\\u4F1A\\u7ACB\\u5373\\u8C03\\u7528\\uFF1B\\u5B83\\u4EEC\\u4F1A\\u88AB\\u63D0\\u5347\\u5230\\u5176\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u5728\\u4EE3\\u7801\\u7684\\u540E\\u9762\\u8C03\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BED\\u6CD5\\u9519\\u8BEF\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5F53\\u4F60\\u5C1D\\u8BD5\\u901A\\u8FC7\\u5728\\u672B\\u5C3E\\u6DFB\\u52A0 \",(0,e.jsx)(n.code,{children:\"();\"}),\" \\u6765\\u7ACB\\u5373\\u8C03\\u7528\\u51FD\\u6570\\u58F0\\u660E\\u65F6\\uFF0C\\u4F1A\\u5BFC\\u81F4\\u8BED\\u6CD5\\u9519\\u8BEF\\uFF0C\\u56E0\\u4E3A\\u89E3\\u6790\\u5668\\u671F\\u671B\\u7ACB\\u5373\\u8C03\\u7528\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\uFF0C\\u800C\\u4E0D\\u662F\\u58F0\\u660E\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5982\\u4F55\\u6B63\\u786E\\u5730\\u5C06\\u5176\\u5236\\u4F5C\\u4E3A IIFE\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7528\\u62EC\\u53F7\\u62EC\\u8D77\\u6765\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8981\\u5C06\\u51FD\\u6570\\u58F0\\u660E\\u8F6C\\u6362\\u4E3A\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\uFF0C\\u4F60\\u9700\\u8981\\u5C06\\u51FD\\u6570\\u58F0\\u660E\\u7528\\u62EC\\u53F7\\u62EC\\u8D77\\u6765\\u3002\\u8FD9\\u544A\\u8BC9 JavaScript \\u89E3\\u6790\\u5668\\u5C06\\u5176\\u89C6\\u4E3A\\u4E00\\u4E2A\\u8868\\u8FBE\\u5F0F\\u3002\\u4EE5\\u4E0B\\u662F\\u66F4\\u6B63\\u540E\\u7684\\u4EE3\\u7801\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`(function foo(){})();\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u66FF\\u4EE3\\u8BED\\u6CD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F60\\u4E5F\\u53EF\\u4EE5\\u4F7F\\u7528\\u66FF\\u4EE3\\u8BED\\u6CD5\\uFF0C\\u5C06\\u62EC\\u53F7\\u653E\\u5728\\u539F\\u59CB\\u884C\\u5468\\u56F4\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`(function foo(){}());\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u4E24\\u79CD\\u8BED\\u6CD5\\u90FD\\u662F\\u6709\\u6548\\u7684\\uFF0C\\u5E76\\u4E14\\u5C06\\u6B63\\u786E\\u5730\\u521B\\u5EFA IIFE\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/IIFE\",children:\"MDN Web Docs: IIFE\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function\",children:\"JavaScript Function Expressions\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\",children:\"JavaScript Function Declarations\"})}),`\n`]})]})}function x(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,Object.assign({},c,{children:(0,e.jsx)(d,c)})):d(c)}var E=x;return g(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var v=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),F=(c,n)=>{for(var r in n)i(c,r,{get:n[r],enumerable:!0})},l=(c,n,r,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of u(n))!m.call(c,o)&&o!==r&&i(c,o,{get:()=>n[o],enumerable:!(t=f(n,o))||t.enumerable});return c};var S=(c,n,r)=>(r=c!=null?p(I(c)):{},l(n||!c||!c.__esModule?i(r,\"default\",{value:c,enumerable:!0}):r,c)),x=c=>l(i({},\"__esModule\",{value:!0}),c);var a=v((J,h)=>{h.exports=_jsx_runtime});var g={};F(g,{default:()=>s,frontmatter:()=>E});var e=S(a()),E={title:\"\\u89E3\\u91CA\\u4E3A\\u4EC0\\u4E48\\u4EE5\\u4E0B\\u4EE3\\u7801\\u4E0D\\u80FD\\u4F5C\\u4E3A IIFE \\u5DE5\\u4F5C\\uFF1A`function foo(){}();`\\u3002\\u9700\\u8981\\u66F4\\u6539\\u4EC0\\u4E48\\u624D\\u80FD\\u4F7F\\u5176\\u6210\\u4E3A\\u4E00\\u4E2A\\u6B63\\u786E\\u7684 IIFE\\uFF1F\"};function d(c){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4EE3\\u7801 \",(0,e.jsx)(n.code,{children:\"function foo(){}();\"}),\" \\u4E0D\\u80FD\\u4F5C\\u4E3A\\u7ACB\\u5373\\u8C03\\u7528\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F (IIFE) \\u5DE5\\u4F5C\\uFF0C\\u56E0\\u4E3A JavaScript \\u89E3\\u6790\\u5668\\u5C06 \",(0,e.jsx)(n.code,{children:\"function foo(){}\"}),\" \\u89C6\\u4E3A\\u51FD\\u6570\\u58F0\\u660E\\uFF0C\\u800C\\u4E0D\\u662F\\u8868\\u8FBE\\u5F0F\\u3002\\u8981\\u4F7F\\u5176\\u6210\\u4E3A IIFE\\uFF0C\\u4F60\\u9700\\u8981\\u5C06\\u51FD\\u6570\\u7528\\u62EC\\u53F7\\u62EC\\u8D77\\u6765\\uFF0C\\u5C06\\u5176\\u8F6C\\u6362\\u4E3A\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\uFF1A\",(0,e.jsx)(n.code,{children:\"(function foo(){})();\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4E3A\\u4EC0\\u4E48\\u4EE3\\u7801\\u4E0D\\u80FD\\u4F5C\\u4E3A IIFE \\u5DE5\\u4F5C\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u58F0\\u660E vs. \\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u51FD\\u6570\\u58F0\\u660E\\u548C\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u88AB\\u89E3\\u6790\\u5668\\u533A\\u522B\\u5BF9\\u5F85\\u3002\\u4EE3\\u7801 \",(0,e.jsx)(n.code,{children:\"function foo(){}\"}),\" \\u88AB\\u89E3\\u91CA\\u4E3A\\u51FD\\u6570\\u58F0\\u660E\\u3002\\u51FD\\u6570\\u58F0\\u660E\\u4E0D\\u4F1A\\u7ACB\\u5373\\u8C03\\u7528\\uFF1B\\u5B83\\u4EEC\\u4F1A\\u88AB\\u63D0\\u5347\\u5230\\u5176\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u5728\\u4EE3\\u7801\\u7684\\u540E\\u9762\\u8C03\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BED\\u6CD5\\u9519\\u8BEF\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5F53\\u4F60\\u5C1D\\u8BD5\\u901A\\u8FC7\\u5728\\u672B\\u5C3E\\u6DFB\\u52A0 \",(0,e.jsx)(n.code,{children:\"();\"}),\" \\u6765\\u7ACB\\u5373\\u8C03\\u7528\\u51FD\\u6570\\u58F0\\u660E\\u65F6\\uFF0C\\u4F1A\\u5BFC\\u81F4\\u8BED\\u6CD5\\u9519\\u8BEF\\uFF0C\\u56E0\\u4E3A\\u89E3\\u6790\\u5668\\u671F\\u671B\\u7ACB\\u5373\\u8C03\\u7528\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\uFF0C\\u800C\\u4E0D\\u662F\\u58F0\\u660E\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5982\\u4F55\\u6B63\\u786E\\u5730\\u5C06\\u5176\\u5236\\u4F5C\\u4E3A IIFE\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7528\\u62EC\\u53F7\\u62EC\\u8D77\\u6765\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8981\\u5C06\\u51FD\\u6570\\u58F0\\u660E\\u8F6C\\u6362\\u4E3A\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\uFF0C\\u4F60\\u9700\\u8981\\u5C06\\u51FD\\u6570\\u58F0\\u660E\\u7528\\u62EC\\u53F7\\u62EC\\u8D77\\u6765\\u3002\\u8FD9\\u544A\\u8BC9 JavaScript \\u89E3\\u6790\\u5668\\u5C06\\u5176\\u89C6\\u4E3A\\u4E00\\u4E2A\\u8868\\u8FBE\\u5F0F\\u3002\\u4EE5\\u4E0B\\u662F\\u66F4\\u6B63\\u540E\\u7684\\u4EE3\\u7801\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`(function foo(){})();\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u66FF\\u4EE3\\u8BED\\u6CD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F60\\u4E5F\\u53EF\\u4EE5\\u4F7F\\u7528\\u66FF\\u4EE3\\u8BED\\u6CD5\\uFF0C\\u5C06\\u62EC\\u53F7\\u653E\\u5728\\u539F\\u59CB\\u884C\\u5468\\u56F4\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`(function foo(){}());\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u4E24\\u79CD\\u8BED\\u6CD5\\u90FD\\u662F\\u6709\\u6548\\u7684\\uFF0C\\u5E76\\u4E14\\u5C06\\u6B63\\u786E\\u5730\\u521B\\u5EFA IIFE\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/IIFE\",children:\"MDN Web Docs: IIFE\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function\",children:\"JavaScript Function Expressions\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\",children:\"JavaScript Function Declarations\"})}),`\n`]})]})}function s(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,{...c,children:(0,e.jsx)(d,{...c})}):d(c)}return x(g);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.json
index 258d16f53..ac3c08ecb 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),m=(i,e)=>{for(var d in e)t(i,d,{get:e[d],enumerable:!0})},r=(i,e,d,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of b(e))!x.call(i,o)&&o!==d&&t(i,o,{get:()=>e[o],enumerable:!(l=p(e,o))||l.enumerable});return i};var f=(i,e,d)=>(d=i!=null?s(u(i)):{},r(e||!i||!i.__esModule?t(d,\"default\",{value:i,enumerable:!0}):d,i)),w=i=>r(t({},\"__esModule\",{value:!0}),i);var h=g((S,a)=>{a.exports=_jsx_runtime});var z={};m(z,{default:()=>v,frontmatter:()=>y});var n=f(h()),y={title:\"Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.\"};function c(i){let e=Object.assign({p:\"p\",code:\"code\",ul:\"ul\",li:\"li\",h2:\"h2\",a:\"a\",pre:\"pre\",h3:\"h3\",strong:\"strong\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. Each box has a content area (e.g. text, an image, etc.) and optional surrounding \",(0,n.jsx)(e.code,{children:\"padding\"}),\", \",(0,n.jsx)(e.code,{children:\"border\"}),\", and \",(0,n.jsx)(e.code,{children:\"margin\"}),\" areas.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"The CSS box model is responsible for calculating:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"How much space a block element takes up.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Whether or not borders and/or margins overlap, or collapse.\"}),`\n`,(0,n.jsx)(e.li,{children:\"A box's dimensions.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Box Model Rules\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The dimensions of a block element are calculated by \",(0,n.jsx)(e.code,{children:\"width\"}),\", \",(0,n.jsx)(e.code,{children:\"height\"}),\", \",(0,n.jsx)(e.code,{children:\"padding\"}),\"s, and \",(0,n.jsx)(e.code,{children:\"border\"}),\"s.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"If no \",(0,n.jsx)(e.code,{children:\"height\"}),\" is specified, a block element will be as high as the content it contains, plus \",(0,n.jsx)(e.code,{children:\"padding\"}),\" (unless there are floats, for which, see \",(0,n.jsx)(e.a,{href:\"/questions/quiz/describe-floats-and-how-they-work\",children:\"describe floats and how they work\"}),\").\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"If no \",(0,n.jsx)(e.code,{children:\"width\"}),\" is specified, a non-\",(0,n.jsx)(e.code,{children:\"float\"}),\"-ed block element will expand to fit the width of its parent minus the \",(0,n.jsx)(e.code,{children:\"padding\"}),\", unless it has a \",(0,n.jsx)(e.code,{children:\"max-width\"}),\" property set, in which case it will be no wider than the specified maximum width.\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Some block-level elements (e.g. \",(0,n.jsx)(e.code,{children:\"table\"}),\", \",(0,n.jsx)(e.code,{children:\"figure\"}),\", and \",(0,n.jsx)(e.code,{children:\"input\"}),\") have inherent or default width values, and may not expand to fill the full width of their parent container.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Note: \",(0,n.jsx)(e.code,{children:\"span\"}),\" is an inline-level element and does not have a default width, so it will not expand to fit.\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"height\"}),\" of an element is calculated by the content's \",(0,n.jsx)(e.code,{children:\"height\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"width\"}),\" of an element is calculated by the content's \",(0,n.jsx)(e.code,{children:\"width\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"By default (\",(0,n.jsx)(e.code,{children:\"box-sizing: content-box\"}),\"), \",(0,n.jsx)(e.code,{children:\"padding\"}),\"s and \",(0,n.jsx)(e.code,{children:\"border\"}),\"s are not part of the \",(0,n.jsx)(e.code,{children:\"width\"}),\" and \",(0,n.jsx)(e.code,{children:\"height\"}),\" of an element.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Note that \",(0,n.jsx)(e.code,{children:\"margin\"}),\"s are not counted towards the actual size of the box. It affects the total space that the box will take up on the page, but only the space outside the box. The box's area stops at the \",(0,n.jsx)(e.code,{children:\"border\"}),\" \\u2014 it does not extend into the \",(0,n.jsx)(e.code,{children:\"margin\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Extra\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Look up the \",(0,n.jsx)(e.code,{children:\"box-sizing\"}),\" property, which affects how the total heights and widths of elements are calculated.\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"box-sizing: content-box\"}),\": This is the default value of \",(0,n.jsx)(e.code,{children:\"box-sizing\"}),\" and adheres to the rules above.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"For example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.example {\n  box-sizing: content-box;\n  width: 100px;\n  padding: 10px;\n  border: 5px solid black;\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The actual space taken by the \",(0,n.jsx)(e.code,{children:\".example\"}),\" element will be 130px wide (100px width + 10px left padding + 10px right padding + 5px left border + 5px right border).\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"box-sizing: border-box\"}),\": The \",(0,n.jsx)(e.code,{children:\"width\"}),\" and \",(0,n.jsx)(e.code,{children:\"height\"}),\" will include the content, padding and border (but not the margin). This is a much more intuitive way to think about boxes and hence many CSS frameworks (e.g. Bootstrap, Tailwind, Bulma) set \",(0,n.jsx)(e.code,{children:\"* { box-sizing: border-box; }\"}),\" globally, so that all elements use such a box model by default. See the \",(0,n.jsxs)(e.a,{href:\"/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages\",children:[\"question on \",(0,n.jsx)(e.code,{children:\"box-sizing: border-box\"})]}),\" for more information.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"For example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.example {\n  box-sizing: border-box;\n  width: 100px;\n  padding: 10px;\n  border: 5px solid black;\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"The element will still take up 100px on the page, but the content area will be 70px wide (100px - 10px left padding - 10px right padding - 5px left border - 5px right border).\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Border and Margin Behavior\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Borders do not collapse or overlap\"}),\" with those of adjacent elements. Each element\\u2019s border is rendered individually.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Margins can collapse\"}),\", but only vertically and only between block-level elements. Horizontal margins do not collapse. This means that if one block element has a bottom margin and the next has a top margin, only the larger of the two will be used. This behavior is independent of \",(0,n.jsx)(e.code,{children:\"box-sizing\"}),\" and is the default in CSS.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"References\"}),`\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/Learn/CSS/Building_blocks/The_box_model#the_standard_css_box_model\",children:\"The box model | MDN\"})}),`\n`]})]})}function k(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(c,i)})):c(i)}var v=k;return w(z);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),f=(i,e)=>{for(var d in e)t(i,d,{get:e[d],enumerable:!0})},r=(i,e,d,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!g.call(i,o)&&o!==d&&t(i,o,{get:()=>e[o],enumerable:!(l=b(e,o))||l.enumerable});return i};var w=(i,e,d)=>(d=i!=null?p(x(i)):{},r(e||!i||!i.__esModule?t(d,\"default\",{value:i,enumerable:!0}):d,i)),y=i=>r(t({},\"__esModule\",{value:!0}),i);var a=m((T,h)=>{h.exports=_jsx_runtime});var v={};f(v,{default:()=>s,frontmatter:()=>k});var n=w(a()),k={title:\"Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.\"};function c(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. Each box has a content area (e.g. text, an image, etc.) and optional surrounding \",(0,n.jsx)(e.code,{children:\"padding\"}),\", \",(0,n.jsx)(e.code,{children:\"border\"}),\", and \",(0,n.jsx)(e.code,{children:\"margin\"}),\" areas.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"The CSS box model is responsible for calculating:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"How much space a block element takes up.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Whether or not borders and/or margins overlap, or collapse.\"}),`\n`,(0,n.jsx)(e.li,{children:\"A box's dimensions.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Box Model Rules\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The dimensions of a block element are calculated by \",(0,n.jsx)(e.code,{children:\"width\"}),\", \",(0,n.jsx)(e.code,{children:\"height\"}),\", \",(0,n.jsx)(e.code,{children:\"padding\"}),\"s, and \",(0,n.jsx)(e.code,{children:\"border\"}),\"s.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"If no \",(0,n.jsx)(e.code,{children:\"height\"}),\" is specified, a block element will be as high as the content it contains, plus \",(0,n.jsx)(e.code,{children:\"padding\"}),\" (unless there are floats, for which, see \",(0,n.jsx)(e.a,{href:\"/questions/quiz/describe-floats-and-how-they-work\",children:\"describe floats and how they work\"}),\").\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"If no \",(0,n.jsx)(e.code,{children:\"width\"}),\" is specified, a non-\",(0,n.jsx)(e.code,{children:\"float\"}),\"-ed block element will expand to fit the width of its parent minus the \",(0,n.jsx)(e.code,{children:\"padding\"}),\", unless it has a \",(0,n.jsx)(e.code,{children:\"max-width\"}),\" property set, in which case it will be no wider than the specified maximum width.\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Some block-level elements (e.g. \",(0,n.jsx)(e.code,{children:\"table\"}),\", \",(0,n.jsx)(e.code,{children:\"figure\"}),\", and \",(0,n.jsx)(e.code,{children:\"input\"}),\") have inherent or default width values, and may not expand to fill the full width of their parent container.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Note: \",(0,n.jsx)(e.code,{children:\"span\"}),\" is an inline-level element and does not have a default width, so it will not expand to fit.\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"height\"}),\" of an element is calculated by the content's \",(0,n.jsx)(e.code,{children:\"height\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"width\"}),\" of an element is calculated by the content's \",(0,n.jsx)(e.code,{children:\"width\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"By default (\",(0,n.jsx)(e.code,{children:\"box-sizing: content-box\"}),\"), \",(0,n.jsx)(e.code,{children:\"padding\"}),\"s and \",(0,n.jsx)(e.code,{children:\"border\"}),\"s are not part of the \",(0,n.jsx)(e.code,{children:\"width\"}),\" and \",(0,n.jsx)(e.code,{children:\"height\"}),\" of an element.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Note that \",(0,n.jsx)(e.code,{children:\"margin\"}),\"s are not counted towards the actual size of the box. It affects the total space that the box will take up on the page, but only the space outside the box. The box's area stops at the \",(0,n.jsx)(e.code,{children:\"border\"}),\" \\u2014 it does not extend into the \",(0,n.jsx)(e.code,{children:\"margin\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Extra\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Look up the \",(0,n.jsx)(e.code,{children:\"box-sizing\"}),\" property, which affects how the total heights and widths of elements are calculated.\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"box-sizing: content-box\"}),\": This is the default value of \",(0,n.jsx)(e.code,{children:\"box-sizing\"}),\" and adheres to the rules above.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"For example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.example {\n  box-sizing: content-box;\n  width: 100px;\n  padding: 10px;\n  border: 5px solid black;\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The actual space taken by the \",(0,n.jsx)(e.code,{children:\".example\"}),\" element will be 130px wide (100px width + 10px left padding + 10px right padding + 5px left border + 5px right border).\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"box-sizing: border-box\"}),\": The \",(0,n.jsx)(e.code,{children:\"width\"}),\" and \",(0,n.jsx)(e.code,{children:\"height\"}),\" will include the content, padding and border (but not the margin). This is a much more intuitive way to think about boxes and hence many CSS frameworks (e.g. Bootstrap, Tailwind, Bulma) set \",(0,n.jsx)(e.code,{children:\"* { box-sizing: border-box; }\"}),\" globally, so that all elements use such a box model by default. See the \",(0,n.jsxs)(e.a,{href:\"/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages\",children:[\"question on \",(0,n.jsx)(e.code,{children:\"box-sizing: border-box\"})]}),\" for more information.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"For example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.example {\n  box-sizing: border-box;\n  width: 100px;\n  padding: 10px;\n  border: 5px solid black;\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"The element will still take up 100px on the page, but the content area will be 70px wide (100px - 10px left padding - 10px right padding - 5px left border - 5px right border).\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Border and Margin Behavior\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Borders do not collapse or overlap\"}),\" with those of adjacent elements. Each element\\u2019s border is rendered individually.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Margins can collapse\"}),\", but only vertically and only between block-level elements. Horizontal margins do not collapse. This means that if one block element has a bottom margin and the next has a top margin, only the larger of the two will be used. This behavior is independent of \",(0,n.jsx)(e.code,{children:\"box-sizing\"}),\" and is the default in CSS.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"References\"}),`\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/Learn/CSS/Building_blocks/The_box_model#the_standard_css_box_model\",children:\"The box model | MDN\"})}),`\n`]})]})}function s(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(c,{...i})}):c(i)}return y(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/pt-BR.json b/apps/web/src/__generated__/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/pt-BR.json
index b722c21c9..8ffa3aff4 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/pt-BR.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),b=(a,e)=>{for(var n in e)i(a,n,{get:e[n],enumerable:!0})},c=(a,e,n,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of u(e))!x.call(a,d)&&d!==n&&i(a,d,{get:()=>e[d],enumerable:!(r=h(e,d))||r.enumerable});return a};var f=(a,e,n)=>(n=a!=null?m(p(a)):{},c(e||!a||!a.__esModule?i(n,\"default\",{value:a,enumerable:!0}):n,a)),q=a=>c(i({},\"__esModule\",{value:!0}),a);var s=g((j,l)=>{l.exports=_jsx_runtime});var _={};b(_,{default:()=>S,frontmatter:()=>v});var o=f(s()),v={title:\"Explique sua compreens\\xE3o do modelo de caixa e como voc\\xEA diria ao navegador em CSS para renderizar seu layout em diferentes modelos de caixa.\"};function t(a){let e=Object.assign({p:\"p\",code:\"code\",ul:\"ul\",li:\"li\",h2:\"h2\",a:\"a\"},a.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"O modelo de caixa CSS descreve as caixas retangulares que s\\xE3o geradas para os elementos na \\xE1rvore de documentos e dispostas de acordo com o modelo de formata\\xE7\\xE3o visual. Cada caixa tem uma \\xE1rea de conte\\xFAdo (por exemplo, texto, uma imagem, etc.) e \\xE1reas opcionais dos \",(0,o.jsx)(e.code,{children:\"padding\"}),\", \",(0,o.jsx)(e.code,{children:\"border\"}),\", e \",(0,o.jsx)(e.code,{children:\"margin\"}),\".\"]}),`\n`,(0,o.jsx)(e.p,{children:\"O modelo da caixa CSS \\xE9 respons\\xE1vel por calcular:\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"O espa\\xE7o que um elemento de bloco ocupa.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Se as bordas e/ou margens se sobrep\\xF5em ou se colapsam.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Dimens\\xF5es de uma caixa.\"}),`\n`]}),`\n`,(0,o.jsx)(e.h2,{children:\"Regras do Modelo da Caixa\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"As dimens\\xF5es de um elemento de bloco s\\xE3o calculadas por meio de \",(0,o.jsx)(e.code,{children:\"width\"}),\", \",(0,o.jsx)(e.code,{children:\"height\"}),\", \",(0,o.jsx)(e.code,{children:\"padding\"}),\"s e \",(0,o.jsx)(e.code,{children:\"border\"}),\"s.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se nenhum \",(0,o.jsx)(e.code,{children:\"height\"}),\" for especificado, um elemento do bloco ser\\xE1 t\\xE3o alto quanto o conte\\xFAdo que ele cont\\xE9m, mais \",(0,o.jsx)(e.code,{children:\"padding\"}),\" (a menos que existam floats, veja \",(0,o.jsx)(e.a,{href:\"/questions/quiz/describe-floats-and-how-they-work\",children:\"descreva flutuantes e como funcionam\"}),\").\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se nenhum \",(0,o.jsx)(e.code,{children:\"width\"}),\" for especificado, um elemento n\\xE3o-\",(0,o.jsx)(e.code,{children:\"float\"}),\" do bloco ser\\xE1 expandido para caber a largura do seu pai menos o \",(0,o.jsx)(e.code,{children:\"padding\"}),\", a n\\xE3o ser que tenha uma propriedade definida para 'max-width', neste caso n\\xE3o ser\\xE1 maior do que a largura m\\xE1xima especificada.\",`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"Alguns elementos de n\\xEDvel de bloco (por exemplo, \",(0,o.jsx)(e.code,{children:\"table\"}),\", \",(0,o.jsx)(e.code,{children:\"figure\"}),\" e \",(0,o.jsx)(e.code,{children:\"input\"}),\") t\\xEAm valores de largura inerentes ou padr\\xE3o, e podem n\\xE3o expandir para preencher a largura total do seu recipiente pai.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Nota: \",(0,o.jsx)(e.code,{children:\"span\"}),\" \\xE9 um elemento em n\\xEDvel inline e n\\xE3o tem largura padr\\xE3o, ent\\xE3o ele n\\xE3o se expandir\\xE1 para se ajustar.\"]}),`\n`]}),`\n`]}),`\n`,(0,o.jsxs)(e.li,{children:[\"O \",(0,o.jsx)(e.code,{children:\"height\"}),\" de um elemento \\xE9 calculado pela \",(0,o.jsx)(e.code,{children:\"height\"}),\" do conte\\xFAdo.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"A \",(0,o.jsx)(e.code,{children:\"width\"}),\" de um elemento \\xE9 calculada pela \",(0,o.jsx)(e.code,{children:\"width\"}),\" do conte\\xFAdo.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Por padr\\xE3o (\",(0,o.jsx)(e.code,{children:\"box-sizing: content-box\"}),\"), \",(0,o.jsx)(e.code,{children:\"padding\"}),\"s e \",(0,o.jsx)(e.code,{children:\"border\"}),\"s n\\xE3o fazem parte da \",(0,o.jsx)(e.code,{children:\"width\"}),\" e \",(0,o.jsx)(e.code,{children:\"height\"}),\" de um elemento.\"]}),`\n`]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Note que \",(0,o.jsx)(e.code,{children:\"margin\"}),\"s n\\xE3o s\\xE3o contados para o tamanho real da caixa. Isso afeta o espa\\xE7o total que a caixa ocupar\\xE1 na p\\xE1gina, mas apenas o espa\\xE7o fora da caixa. A \\xE1rea da caixa para no \",(0,o.jsx)(e.code,{children:\"border\"}),\" \\u2014 ela n\\xE3o se estende at\\xE9 a \",(0,o.jsx)(e.code,{children:\"margin\"}),\".\"]}),`\n`,(0,o.jsx)(e.h2,{children:\"Extra\"}),`\n`,(0,o.jsx)(e.p,{children:\"A propriedade box-sizing, que define como as dimens\\xF5es totais largura e altura de um elemento s\\xE3o calculadas.\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:\"box-sizing: content-box\"}),\": Este \\xE9 o valor padr\\xE3o de \",(0,o.jsx)(e.code,{children:\"box-sizing\"}),\" e segue as regras mencionadas acima.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:\"box-sizing: border-box\"}),\": A \",(0,o.jsx)(e.code,{children:\"width\"}),\" e a \",(0,o.jsx)(e.code,{children:\"height\"}),\" incluir\\xE3o o conte\\xFAdo, padding e borda, mas n\\xE3o incluir\\xE3o a margin. Esta \\xE9 uma maneira muito mais intuitiva de pensar em caixas e, portanto, muitos frameworks CSS (por exemplo, Bootstrap, Tailwind, Bulma) definem \",(0,o.jsx)(e.code,{children:\"* { box-sizing: border-box; }\"}),\" globalmente, para que todos os elementos usem esse modelo de caixa por padr\\xE3o. Veja a \",(0,o.jsx)(e.a,{href:\"/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages\",children:\"pergunta sobre o 'box-sizing: border-box'\"}),\" para mais informa\\xE7\\xF5es.\"]}),`\n`]}),`\n`,(0,o.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_standard_css_box_model\",children:\"O modelo de caixa | MDN\"})}),`\n`]})]})}function w(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,Object.assign({},a,{children:(0,o.jsx)(t,a)})):t(a)}var S=w;return q(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),f=(a,e)=>{for(var n in e)i(a,n,{get:e[n],enumerable:!0})},c=(a,e,n,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of p(e))!g.call(a,d)&&d!==n&&i(a,d,{get:()=>e[d],enumerable:!(r=u(e,d))||r.enumerable});return a};var q=(a,e,n)=>(n=a!=null?h(x(a)):{},c(e||!a||!a.__esModule?i(n,\"default\",{value:a,enumerable:!0}):n,a)),v=a=>c(i({},\"__esModule\",{value:!0}),a);var s=b((z,l)=>{l.exports=_jsx_runtime});var S={};f(S,{default:()=>m,frontmatter:()=>w});var o=q(s()),w={title:\"Explique sua compreens\\xE3o do modelo de caixa e como voc\\xEA diria ao navegador em CSS para renderizar seu layout em diferentes modelos de caixa.\"};function t(a){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",ul:\"ul\",...a.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"O modelo de caixa CSS descreve as caixas retangulares que s\\xE3o geradas para os elementos na \\xE1rvore de documentos e dispostas de acordo com o modelo de formata\\xE7\\xE3o visual. Cada caixa tem uma \\xE1rea de conte\\xFAdo (por exemplo, texto, uma imagem, etc.) e \\xE1reas opcionais dos \",(0,o.jsx)(e.code,{children:\"padding\"}),\", \",(0,o.jsx)(e.code,{children:\"border\"}),\", e \",(0,o.jsx)(e.code,{children:\"margin\"}),\".\"]}),`\n`,(0,o.jsx)(e.p,{children:\"O modelo da caixa CSS \\xE9 respons\\xE1vel por calcular:\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"O espa\\xE7o que um elemento de bloco ocupa.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Se as bordas e/ou margens se sobrep\\xF5em ou se colapsam.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Dimens\\xF5es de uma caixa.\"}),`\n`]}),`\n`,(0,o.jsx)(e.h2,{children:\"Regras do Modelo da Caixa\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"As dimens\\xF5es de um elemento de bloco s\\xE3o calculadas por meio de \",(0,o.jsx)(e.code,{children:\"width\"}),\", \",(0,o.jsx)(e.code,{children:\"height\"}),\", \",(0,o.jsx)(e.code,{children:\"padding\"}),\"s e \",(0,o.jsx)(e.code,{children:\"border\"}),\"s.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se nenhum \",(0,o.jsx)(e.code,{children:\"height\"}),\" for especificado, um elemento do bloco ser\\xE1 t\\xE3o alto quanto o conte\\xFAdo que ele cont\\xE9m, mais \",(0,o.jsx)(e.code,{children:\"padding\"}),\" (a menos que existam floats, veja \",(0,o.jsx)(e.a,{href:\"/questions/quiz/describe-floats-and-how-they-work\",children:\"descreva flutuantes e como funcionam\"}),\").\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se nenhum \",(0,o.jsx)(e.code,{children:\"width\"}),\" for especificado, um elemento n\\xE3o-\",(0,o.jsx)(e.code,{children:\"float\"}),\" do bloco ser\\xE1 expandido para caber a largura do seu pai menos o \",(0,o.jsx)(e.code,{children:\"padding\"}),\", a n\\xE3o ser que tenha uma propriedade definida para 'max-width', neste caso n\\xE3o ser\\xE1 maior do que a largura m\\xE1xima especificada.\",`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"Alguns elementos de n\\xEDvel de bloco (por exemplo, \",(0,o.jsx)(e.code,{children:\"table\"}),\", \",(0,o.jsx)(e.code,{children:\"figure\"}),\" e \",(0,o.jsx)(e.code,{children:\"input\"}),\") t\\xEAm valores de largura inerentes ou padr\\xE3o, e podem n\\xE3o expandir para preencher a largura total do seu recipiente pai.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Nota: \",(0,o.jsx)(e.code,{children:\"span\"}),\" \\xE9 um elemento em n\\xEDvel inline e n\\xE3o tem largura padr\\xE3o, ent\\xE3o ele n\\xE3o se expandir\\xE1 para se ajustar.\"]}),`\n`]}),`\n`]}),`\n`,(0,o.jsxs)(e.li,{children:[\"O \",(0,o.jsx)(e.code,{children:\"height\"}),\" de um elemento \\xE9 calculado pela \",(0,o.jsx)(e.code,{children:\"height\"}),\" do conte\\xFAdo.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"A \",(0,o.jsx)(e.code,{children:\"width\"}),\" de um elemento \\xE9 calculada pela \",(0,o.jsx)(e.code,{children:\"width\"}),\" do conte\\xFAdo.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Por padr\\xE3o (\",(0,o.jsx)(e.code,{children:\"box-sizing: content-box\"}),\"), \",(0,o.jsx)(e.code,{children:\"padding\"}),\"s e \",(0,o.jsx)(e.code,{children:\"border\"}),\"s n\\xE3o fazem parte da \",(0,o.jsx)(e.code,{children:\"width\"}),\" e \",(0,o.jsx)(e.code,{children:\"height\"}),\" de um elemento.\"]}),`\n`]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Note que \",(0,o.jsx)(e.code,{children:\"margin\"}),\"s n\\xE3o s\\xE3o contados para o tamanho real da caixa. Isso afeta o espa\\xE7o total que a caixa ocupar\\xE1 na p\\xE1gina, mas apenas o espa\\xE7o fora da caixa. A \\xE1rea da caixa para no \",(0,o.jsx)(e.code,{children:\"border\"}),\" \\u2014 ela n\\xE3o se estende at\\xE9 a \",(0,o.jsx)(e.code,{children:\"margin\"}),\".\"]}),`\n`,(0,o.jsx)(e.h2,{children:\"Extra\"}),`\n`,(0,o.jsx)(e.p,{children:\"A propriedade box-sizing, que define como as dimens\\xF5es totais largura e altura de um elemento s\\xE3o calculadas.\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:\"box-sizing: content-box\"}),\": Este \\xE9 o valor padr\\xE3o de \",(0,o.jsx)(e.code,{children:\"box-sizing\"}),\" e segue as regras mencionadas acima.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:\"box-sizing: border-box\"}),\": A \",(0,o.jsx)(e.code,{children:\"width\"}),\" e a \",(0,o.jsx)(e.code,{children:\"height\"}),\" incluir\\xE3o o conte\\xFAdo, padding e borda, mas n\\xE3o incluir\\xE3o a margin. Esta \\xE9 uma maneira muito mais intuitiva de pensar em caixas e, portanto, muitos frameworks CSS (por exemplo, Bootstrap, Tailwind, Bulma) definem \",(0,o.jsx)(e.code,{children:\"* { box-sizing: border-box; }\"}),\" globalmente, para que todos os elementos usem esse modelo de caixa por padr\\xE3o. Veja a \",(0,o.jsx)(e.a,{href:\"/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages\",children:\"pergunta sobre o 'box-sizing: border-box'\"}),\" para mais informa\\xE7\\xF5es.\"]}),`\n`]}),`\n`,(0,o.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_standard_css_box_model\",children:\"O modelo de caixa | MDN\"})}),`\n`]})]})}function m(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,{...a,children:(0,o.jsx)(t,{...a})}):t(a)}return v(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/zh-CN.json
index 4eabc3faf..102e7c067 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var u=(d,n)=>()=>(n||d((n={exports:{}}).exports,n),n.exports),m=(d,n)=>{for(var i in n)r(d,i,{get:n[i],enumerable:!0})},h=(d,n,i,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of x(n))!b.call(d,c)&&c!==i&&r(d,c,{get:()=>n[c],enumerable:!(l=p(n,c))||l.enumerable});return d};var w=(d,n,i)=>(i=d!=null?a(g(d)):{},h(n||!d||!d.__esModule?r(i,\"default\",{value:d,enumerable:!0}):i,d)),z=d=>h(r({},\"__esModule\",{value:!0}),d);var t=u((k,o)=>{o.exports=_jsx_runtime});var C={};m(C,{default:()=>f,frontmatter:()=>_});var e=w(t()),_={title:\"\\u89E3\\u91CA\\u4F60\\u5BF9\\u76D2\\u5B50\\u6A21\\u578B\\u7684\\u7406\\u89E3\\uFF0C\\u4EE5\\u53CA\\u4F60\\u5C06\\u5982\\u4F55\\u5728 CSS \\u4E2D\\u544A\\u8BC9\\u6D4F\\u89C8\\u5668\\u4EE5\\u4E0D\\u540C\\u7684\\u76D2\\u5B50\\u6A21\\u578B\\u6E32\\u67D3\\u4F60\\u7684\\u5E03\\u5C40\\u3002\"};function s(d){let n=Object.assign({p:\"p\",code:\"code\",ul:\"ul\",li:\"li\",h2:\"h2\",a:\"a\",pre:\"pre\",h3:\"h3\",strong:\"strong\"},d.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.p,{children:[\"CSS \\u76D2\\u5B50\\u6A21\\u578B\\u63CF\\u8FF0\\u4E86\\u4E3A\\u6587\\u6863\\u6811\\u4E2D\\u7684\\u5143\\u7D20\\u751F\\u6210\\u7684\\u77E9\\u5F62\\u6846\\uFF0C\\u5E76\\u6839\\u636E\\u89C6\\u89C9\\u683C\\u5F0F\\u5316\\u6A21\\u578B\\u8FDB\\u884C\\u5E03\\u5C40\\u3002\\u6BCF\\u4E2A\\u6846\\u90FD\\u6709\\u4E00\\u4E2A\\u5185\\u5BB9\\u533A\\u57DF\\uFF08\\u4F8B\\u5982\\u6587\\u672C\\u3001\\u56FE\\u50CF\\u7B49\\uFF09\\u548C\\u53EF\\u9009\\u7684\\u5468\\u56F4 \",(0,e.jsx)(n.code,{children:\"padding\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"border\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"margin\"}),\" \\u533A\\u57DF\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"CSS \\u76D2\\u5B50\\u6A21\\u578B\\u8D1F\\u8D23\\u8BA1\\u7B97\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5757\\u7EA7\\u5143\\u7D20\\u5360\\u636E\\u591A\\u5C11\\u7A7A\\u95F4\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u8FB9\\u6846\\u548C/\\u6216\\u8FB9\\u8DDD\\u662F\\u5426\\u91CD\\u53E0\\u6216\\u6298\\u53E0\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u76D2\\u5B50\\u7684\\u5C3A\\u5BF8\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u76D2\\u5B50\\u6A21\\u578B\\u89C4\\u5219\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5757\\u7EA7\\u5143\\u7D20\\u7684\\u5C3A\\u5BF8\\u7531 \",(0,e.jsx)(n.code,{children:\"width\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"height\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"padding\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"border\"}),\" \\u8BA1\\u7B97\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5982\\u679C\\u672A\\u6307\\u5B9A \",(0,e.jsx)(n.code,{children:\"height\"}),\"\\uFF0C\\u5219\\u5757\\u7EA7\\u5143\\u7D20\\u7684\\u9AD8\\u5EA6\\u5C06\\u4E0E\\u5176\\u5305\\u542B\\u7684\\u5185\\u5BB9\\u4E00\\u6837\\u9AD8\\uFF0C\\u518D\\u52A0\\u4E0A \",(0,e.jsx)(n.code,{children:\"padding\"}),\"\\uFF08\\u9664\\u975E\\u6709\\u6D6E\\u52A8\\uFF0C\\u5BF9\\u4E8E\\u6D6E\\u52A8\\uFF0C\\u8BF7\\u53C2\\u9605 \",(0,e.jsx)(n.a,{href:\"/questions/quiz/describe-floats-and-how-they-work\",children:\"\\u63CF\\u8FF0\\u6D6E\\u52A8\\u53CA\\u5176\\u5DE5\\u4F5C\\u539F\\u7406\"}),\"\\uFF09\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5982\\u679C\\u672A\\u6307\\u5B9A \",(0,e.jsx)(n.code,{children:\"width\"}),\"\\uFF0C\\u5219\\u975E \",(0,e.jsx)(n.code,{children:\"float\"}),\"-ed \\u5757\\u7EA7\\u5143\\u7D20\\u5C06\\u6269\\u5C55\\u4EE5\\u9002\\u5408\\u5176\\u7236\\u5143\\u7D20\\u7684\\u5BBD\\u5EA6\\u51CF\\u53BB \",(0,e.jsx)(n.code,{children:\"padding\"}),\"\\uFF0C\\u9664\\u975E\\u5B83\\u8BBE\\u7F6E\\u4E86 \",(0,e.jsx)(n.code,{children:\"max-width\"}),\" \\u5C5E\\u6027\\uFF0C\\u5728\\u8FD9\\u79CD\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5B83\\u5C06\\u4E0D\\u8D85\\u8FC7\\u6307\\u5B9A\\u7684\\u6700\\u5927\\u5BBD\\u5EA6\\u3002\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"\\u67D0\\u4E9B\\u5757\\u7EA7\\u5143\\u7D20\\uFF08\\u4F8B\\u5982 \",(0,e.jsx)(n.code,{children:\"table\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"figure\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"input\"}),\"\\uFF09\\u5177\\u6709\\u56FA\\u6709\\u7684\\u6216\\u9ED8\\u8BA4\\u7684\\u5BBD\\u5EA6\\u503C\\uFF0C\\u5E76\\u4E14\\u53EF\\u80FD\\u4E0D\\u4F1A\\u6269\\u5C55\\u4EE5\\u586B\\u5145\\u5176\\u7236\\u5BB9\\u5668\\u7684\\u6574\\u4E2A\\u5BBD\\u5EA6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u6CE8\\u610F\\uFF1A\",(0,e.jsx)(n.code,{children:\"span\"}),\" \\u662F\\u4E00\\u4E2A\\u5185\\u8054\\u7EA7\\u5143\\u7D20\\uFF0C\\u6CA1\\u6709\\u9ED8\\u8BA4\\u5BBD\\u5EA6\\uFF0C\\u56E0\\u6B64\\u5B83\\u4E0D\\u4F1A\\u6269\\u5C55\\u4EE5\\u9002\\u5E94\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5143\\u7D20\\u7684 \",(0,e.jsx)(n.code,{children:\"height\"}),\" \\u7531\\u5185\\u5BB9\\u7684 \",(0,e.jsx)(n.code,{children:\"height\"}),\" \\u8BA1\\u7B97\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5143\\u7D20\\u7684 \",(0,e.jsx)(n.code,{children:\"width\"}),\" \\u7531\\u5185\\u5BB9\\u7684 \",(0,e.jsx)(n.code,{children:\"width\"}),\" \\u8BA1\\u7B97\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B (\",(0,e.jsx)(n.code,{children:\"box-sizing: content-box\"}),\")\\uFF0C\",(0,e.jsx)(n.code,{children:\"padding\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"border\"}),\" \\u4E0D\\u5C5E\\u4E8E\\u5143\\u7D20\\u7684 \",(0,e.jsx)(n.code,{children:\"width\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"height\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8BF7\\u6CE8\\u610F\\uFF0C\",(0,e.jsx)(n.code,{children:\"margin\"}),\" \\u4E0D\\u8BA1\\u5165\\u76D2\\u5B50\\u7684\\u5B9E\\u9645\\u5927\\u5C0F\\u3002\\u5B83\\u4F1A\\u5F71\\u54CD\\u76D2\\u5B50\\u5728\\u9875\\u9762\\u4E0A\\u5360\\u7528\\u7684\\u603B\\u7A7A\\u95F4\\uFF0C\\u4F46\\u4EC5\\u9650\\u4E8E\\u76D2\\u5B50\\u5916\\u90E8\\u7684\\u7A7A\\u95F4\\u3002\\u76D2\\u5B50\\u7684\\u533A\\u57DF\\u5728 \",(0,e.jsx)(n.code,{children:\"border\"}),\" \\u5904\\u505C\\u6B62\\u2014\\u2014\\u5B83\\u4E0D\\u4F1A\\u5EF6\\u4F38\\u5230 \",(0,e.jsx)(n.code,{children:\"margin\"}),\" \\u4E2D\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u989D\\u5916\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u67E5\\u627E \",(0,e.jsx)(n.code,{children:\"box-sizing\"}),\" \\u5C5E\\u6027\\uFF0C\\u8BE5\\u5C5E\\u6027\\u4F1A\\u5F71\\u54CD\\u5143\\u7D20\\u7684\\u603B\\u9AD8\\u5EA6\\u548C\\u5BBD\\u5EA6\\u7684\\u8BA1\\u7B97\\u65B9\\u5F0F\\u3002\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"box-sizing: content-box\"}),\": \\u8FD9\\u662F \",(0,e.jsx)(n.code,{children:\"box-sizing\"}),\" \\u7684\\u9ED8\\u8BA4\\u503C\\uFF0C\\u9075\\u5FAA\\u4E0A\\u8FF0\\u89C4\\u5219\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-css\",children:`.example {\n  box-sizing: content-box;\n  width: 100px;\n  padding: 10px;\n  border: 5px solid black;\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\".example\"}),\" \\u5143\\u7D20\\u5B9E\\u9645\\u5360\\u7528\\u7684\\u7A7A\\u95F4\\u5C06\\u662F 130px \\u5BBD\\uFF08100px \\u5BBD\\u5EA6 + 10px \\u5DE6\\u5185\\u8FB9\\u8DDD + 10px \\u53F3\\u5185\\u8FB9\\u8DDD + 5px \\u5DE6\\u8FB9\\u6846 + 5px \\u53F3\\u8FB9\\u6846\\uFF09\\u3002\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"box-sizing: border-box\"}),\": \",(0,e.jsx)(n.code,{children:\"width\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"height\"}),\" \\u5C06\\u5305\\u62EC\\u5185\\u5BB9\\u3001\\u5185\\u8FB9\\u8DDD\\u548C\\u8FB9\\u6846\\uFF08\\u4F46\\u4E0D\\u5305\\u62EC\\u5916\\u8FB9\\u8DDD\\uFF09\\u3002\\u8FD9\\u662F\\u4E00\\u79CD\\u66F4\\u76F4\\u89C2\\u7684\\u601D\\u8003\\u76D2\\u5B50\\u6A21\\u578B\\u7684\\u65B9\\u5F0F\\uFF0C\\u56E0\\u6B64\\u8BB8\\u591A CSS \\u6846\\u67B6\\uFF08\\u4F8B\\u5982 Bootstrap\\u3001Tailwind\\u3001Bulma\\uFF09\\u5168\\u5C40\\u8BBE\\u7F6E \",(0,e.jsx)(n.code,{children:\"* { box-sizing: border-box; }\"}),\"\\uFF0C\\u4EE5\\u4FBF\\u6240\\u6709\\u5143\\u7D20\\u9ED8\\u8BA4\\u4F7F\\u7528\\u8FD9\\u79CD\\u76D2\\u5B50\\u6A21\\u578B\\u3002\\u6709\\u5173\\u66F4\\u591A\\u4FE1\\u606F\\uFF0C\\u8BF7\\u53C2\\u9605\",(0,e.jsxs)(n.a,{href:\"/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages\",children:[\"\\u5173\\u4E8E \",(0,e.jsx)(n.code,{children:\"box-sizing: border-box\"}),\" \\u7684\\u95EE\\u9898\"]}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-css\",children:`.example {\n  box-sizing: border-box;\n  width: 100px;\n  padding: 10px;\n  border: 5px solid black;\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8BE5\\u5143\\u7D20\\u5728\\u9875\\u9762\\u4E0A\\u4ECD\\u5C06\\u5360\\u7528 100px\\uFF0C\\u4F46\\u5185\\u5BB9\\u533A\\u57DF\\u5C06\\u4E3A 70px \\u5BBD\\uFF08100px - 10px \\u5DE6\\u5185\\u8FB9\\u8DDD - 10px \\u53F3\\u5185\\u8FB9\\u8DDD - 5px \\u5DE6\\u8FB9\\u6846 - 5px \\u53F3\\u8FB9\\u6846\\uFF09\\u3002\"}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8FB9\\u6846\\u548C\\u5916\\u8FB9\\u8DDD\\u884C\\u4E3A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8FB9\\u6846\\u4E0D\\u4F1A\\u4E0E\\u76F8\\u90BB\\u5143\\u7D20\\u7684\\u8FB9\\u6846\\u6298\\u53E0\\u6216\\u91CD\\u53E0\"}),\"\\u3002\\u6BCF\\u4E2A\\u5143\\u7D20\\u7684\\u8FB9\\u6846\\u5355\\u72EC\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5916\\u8FB9\\u8DDD\\u53EF\\u4EE5\\u6298\\u53E0\"}),\"\\uFF0C\\u4F46\\u4EC5\\u5782\\u76F4\\u65B9\\u5411\\uFF0C\\u4E14\\u4EC5\\u5728\\u5757\\u7EA7\\u5143\\u7D20\\u4E4B\\u95F4\\u3002\\u6C34\\u5E73\\u5916\\u8FB9\\u8DDD\\u4E0D\\u4F1A\\u6298\\u53E0\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u5982\\u679C\\u4E00\\u4E2A\\u5757\\u7EA7\\u5143\\u7D20\\u5177\\u6709\\u5E95\\u90E8\\u5916\\u8FB9\\u8DDD\\uFF0C\\u800C\\u4E0B\\u4E00\\u4E2A\\u5757\\u7EA7\\u5143\\u7D20\\u5177\\u6709\\u9876\\u90E8\\u5916\\u8FB9\\u8DDD\\uFF0C\\u5219\\u4EC5\\u4F7F\\u7528\\u4E24\\u8005\\u4E2D\\u8F83\\u5927\\u7684\\u4E00\\u4E2A\\u3002\\u6B64\\u884C\\u4E3A\\u4E0E \",(0,e.jsx)(n.code,{children:\"box-sizing\"}),\" \\u65E0\\u5173\\uFF0C\\u5E76\\u4E14\\u662F CSS \\u4E2D\\u7684\\u9ED8\\u8BA4\\u884C\\u4E3A\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u53C2\\u8003\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model#the_standard_css_box_model\",children:\"\\u76D2\\u5B50\\u6A21\\u578B | MDN\"})}),`\n`]})]})}function S(d={}){let{wrapper:n}=d.components||{};return n?(0,e.jsx)(n,Object.assign({},d,{children:(0,e.jsx)(s,d)})):s(d)}var f=S;return z(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var m=(d,n)=>()=>(n||d((n={exports:{}}).exports,n),n.exports),w=(d,n)=>{for(var i in n)r(d,i,{get:n[i],enumerable:!0})},h=(d,n,i,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of g(n))!u.call(d,c)&&c!==i&&r(d,c,{get:()=>n[c],enumerable:!(l=x(n,c))||l.enumerable});return d};var z=(d,n,i)=>(i=d!=null?p(b(d)):{},h(n||!d||!d.__esModule?r(i,\"default\",{value:d,enumerable:!0}):i,d)),_=d=>h(r({},\"__esModule\",{value:!0}),d);var t=m((j,o)=>{o.exports=_jsx_runtime});var f={};w(f,{default:()=>s,frontmatter:()=>S});var e=z(t()),S={title:\"\\u89E3\\u91CA\\u4F60\\u5BF9\\u76D2\\u5B50\\u6A21\\u578B\\u7684\\u7406\\u89E3\\uFF0C\\u4EE5\\u53CA\\u4F60\\u5C06\\u5982\\u4F55\\u5728 CSS \\u4E2D\\u544A\\u8BC9\\u6D4F\\u89C8\\u5668\\u4EE5\\u4E0D\\u540C\\u7684\\u76D2\\u5B50\\u6A21\\u578B\\u6E32\\u67D3\\u4F60\\u7684\\u5E03\\u5C40\\u3002\"};function a(d){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...d.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.p,{children:[\"CSS \\u76D2\\u5B50\\u6A21\\u578B\\u63CF\\u8FF0\\u4E86\\u4E3A\\u6587\\u6863\\u6811\\u4E2D\\u7684\\u5143\\u7D20\\u751F\\u6210\\u7684\\u77E9\\u5F62\\u6846\\uFF0C\\u5E76\\u6839\\u636E\\u89C6\\u89C9\\u683C\\u5F0F\\u5316\\u6A21\\u578B\\u8FDB\\u884C\\u5E03\\u5C40\\u3002\\u6BCF\\u4E2A\\u6846\\u90FD\\u6709\\u4E00\\u4E2A\\u5185\\u5BB9\\u533A\\u57DF\\uFF08\\u4F8B\\u5982\\u6587\\u672C\\u3001\\u56FE\\u50CF\\u7B49\\uFF09\\u548C\\u53EF\\u9009\\u7684\\u5468\\u56F4 \",(0,e.jsx)(n.code,{children:\"padding\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"border\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"margin\"}),\" \\u533A\\u57DF\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"CSS \\u76D2\\u5B50\\u6A21\\u578B\\u8D1F\\u8D23\\u8BA1\\u7B97\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5757\\u7EA7\\u5143\\u7D20\\u5360\\u636E\\u591A\\u5C11\\u7A7A\\u95F4\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u8FB9\\u6846\\u548C/\\u6216\\u8FB9\\u8DDD\\u662F\\u5426\\u91CD\\u53E0\\u6216\\u6298\\u53E0\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u76D2\\u5B50\\u7684\\u5C3A\\u5BF8\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u76D2\\u5B50\\u6A21\\u578B\\u89C4\\u5219\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5757\\u7EA7\\u5143\\u7D20\\u7684\\u5C3A\\u5BF8\\u7531 \",(0,e.jsx)(n.code,{children:\"width\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"height\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"padding\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"border\"}),\" \\u8BA1\\u7B97\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5982\\u679C\\u672A\\u6307\\u5B9A \",(0,e.jsx)(n.code,{children:\"height\"}),\"\\uFF0C\\u5219\\u5757\\u7EA7\\u5143\\u7D20\\u7684\\u9AD8\\u5EA6\\u5C06\\u4E0E\\u5176\\u5305\\u542B\\u7684\\u5185\\u5BB9\\u4E00\\u6837\\u9AD8\\uFF0C\\u518D\\u52A0\\u4E0A \",(0,e.jsx)(n.code,{children:\"padding\"}),\"\\uFF08\\u9664\\u975E\\u6709\\u6D6E\\u52A8\\uFF0C\\u5BF9\\u4E8E\\u6D6E\\u52A8\\uFF0C\\u8BF7\\u53C2\\u9605 \",(0,e.jsx)(n.a,{href:\"/questions/quiz/describe-floats-and-how-they-work\",children:\"\\u63CF\\u8FF0\\u6D6E\\u52A8\\u53CA\\u5176\\u5DE5\\u4F5C\\u539F\\u7406\"}),\"\\uFF09\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5982\\u679C\\u672A\\u6307\\u5B9A \",(0,e.jsx)(n.code,{children:\"width\"}),\"\\uFF0C\\u5219\\u975E \",(0,e.jsx)(n.code,{children:\"float\"}),\"-ed \\u5757\\u7EA7\\u5143\\u7D20\\u5C06\\u6269\\u5C55\\u4EE5\\u9002\\u5408\\u5176\\u7236\\u5143\\u7D20\\u7684\\u5BBD\\u5EA6\\u51CF\\u53BB \",(0,e.jsx)(n.code,{children:\"padding\"}),\"\\uFF0C\\u9664\\u975E\\u5B83\\u8BBE\\u7F6E\\u4E86 \",(0,e.jsx)(n.code,{children:\"max-width\"}),\" \\u5C5E\\u6027\\uFF0C\\u5728\\u8FD9\\u79CD\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5B83\\u5C06\\u4E0D\\u8D85\\u8FC7\\u6307\\u5B9A\\u7684\\u6700\\u5927\\u5BBD\\u5EA6\\u3002\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"\\u67D0\\u4E9B\\u5757\\u7EA7\\u5143\\u7D20\\uFF08\\u4F8B\\u5982 \",(0,e.jsx)(n.code,{children:\"table\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"figure\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"input\"}),\"\\uFF09\\u5177\\u6709\\u56FA\\u6709\\u7684\\u6216\\u9ED8\\u8BA4\\u7684\\u5BBD\\u5EA6\\u503C\\uFF0C\\u5E76\\u4E14\\u53EF\\u80FD\\u4E0D\\u4F1A\\u6269\\u5C55\\u4EE5\\u586B\\u5145\\u5176\\u7236\\u5BB9\\u5668\\u7684\\u6574\\u4E2A\\u5BBD\\u5EA6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u6CE8\\u610F\\uFF1A\",(0,e.jsx)(n.code,{children:\"span\"}),\" \\u662F\\u4E00\\u4E2A\\u5185\\u8054\\u7EA7\\u5143\\u7D20\\uFF0C\\u6CA1\\u6709\\u9ED8\\u8BA4\\u5BBD\\u5EA6\\uFF0C\\u56E0\\u6B64\\u5B83\\u4E0D\\u4F1A\\u6269\\u5C55\\u4EE5\\u9002\\u5E94\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5143\\u7D20\\u7684 \",(0,e.jsx)(n.code,{children:\"height\"}),\" \\u7531\\u5185\\u5BB9\\u7684 \",(0,e.jsx)(n.code,{children:\"height\"}),\" \\u8BA1\\u7B97\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5143\\u7D20\\u7684 \",(0,e.jsx)(n.code,{children:\"width\"}),\" \\u7531\\u5185\\u5BB9\\u7684 \",(0,e.jsx)(n.code,{children:\"width\"}),\" \\u8BA1\\u7B97\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B (\",(0,e.jsx)(n.code,{children:\"box-sizing: content-box\"}),\")\\uFF0C\",(0,e.jsx)(n.code,{children:\"padding\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"border\"}),\" \\u4E0D\\u5C5E\\u4E8E\\u5143\\u7D20\\u7684 \",(0,e.jsx)(n.code,{children:\"width\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"height\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8BF7\\u6CE8\\u610F\\uFF0C\",(0,e.jsx)(n.code,{children:\"margin\"}),\" \\u4E0D\\u8BA1\\u5165\\u76D2\\u5B50\\u7684\\u5B9E\\u9645\\u5927\\u5C0F\\u3002\\u5B83\\u4F1A\\u5F71\\u54CD\\u76D2\\u5B50\\u5728\\u9875\\u9762\\u4E0A\\u5360\\u7528\\u7684\\u603B\\u7A7A\\u95F4\\uFF0C\\u4F46\\u4EC5\\u9650\\u4E8E\\u76D2\\u5B50\\u5916\\u90E8\\u7684\\u7A7A\\u95F4\\u3002\\u76D2\\u5B50\\u7684\\u533A\\u57DF\\u5728 \",(0,e.jsx)(n.code,{children:\"border\"}),\" \\u5904\\u505C\\u6B62\\u2014\\u2014\\u5B83\\u4E0D\\u4F1A\\u5EF6\\u4F38\\u5230 \",(0,e.jsx)(n.code,{children:\"margin\"}),\" \\u4E2D\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u989D\\u5916\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u67E5\\u627E \",(0,e.jsx)(n.code,{children:\"box-sizing\"}),\" \\u5C5E\\u6027\\uFF0C\\u8BE5\\u5C5E\\u6027\\u4F1A\\u5F71\\u54CD\\u5143\\u7D20\\u7684\\u603B\\u9AD8\\u5EA6\\u548C\\u5BBD\\u5EA6\\u7684\\u8BA1\\u7B97\\u65B9\\u5F0F\\u3002\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"box-sizing: content-box\"}),\": \\u8FD9\\u662F \",(0,e.jsx)(n.code,{children:\"box-sizing\"}),\" \\u7684\\u9ED8\\u8BA4\\u503C\\uFF0C\\u9075\\u5FAA\\u4E0A\\u8FF0\\u89C4\\u5219\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-css\",children:`.example {\n  box-sizing: content-box;\n  width: 100px;\n  padding: 10px;\n  border: 5px solid black;\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\".example\"}),\" \\u5143\\u7D20\\u5B9E\\u9645\\u5360\\u7528\\u7684\\u7A7A\\u95F4\\u5C06\\u662F 130px \\u5BBD\\uFF08100px \\u5BBD\\u5EA6 + 10px \\u5DE6\\u5185\\u8FB9\\u8DDD + 10px \\u53F3\\u5185\\u8FB9\\u8DDD + 5px \\u5DE6\\u8FB9\\u6846 + 5px \\u53F3\\u8FB9\\u6846\\uFF09\\u3002\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"box-sizing: border-box\"}),\": \",(0,e.jsx)(n.code,{children:\"width\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"height\"}),\" \\u5C06\\u5305\\u62EC\\u5185\\u5BB9\\u3001\\u5185\\u8FB9\\u8DDD\\u548C\\u8FB9\\u6846\\uFF08\\u4F46\\u4E0D\\u5305\\u62EC\\u5916\\u8FB9\\u8DDD\\uFF09\\u3002\\u8FD9\\u662F\\u4E00\\u79CD\\u66F4\\u76F4\\u89C2\\u7684\\u601D\\u8003\\u76D2\\u5B50\\u6A21\\u578B\\u7684\\u65B9\\u5F0F\\uFF0C\\u56E0\\u6B64\\u8BB8\\u591A CSS \\u6846\\u67B6\\uFF08\\u4F8B\\u5982 Bootstrap\\u3001Tailwind\\u3001Bulma\\uFF09\\u5168\\u5C40\\u8BBE\\u7F6E \",(0,e.jsx)(n.code,{children:\"* { box-sizing: border-box; }\"}),\"\\uFF0C\\u4EE5\\u4FBF\\u6240\\u6709\\u5143\\u7D20\\u9ED8\\u8BA4\\u4F7F\\u7528\\u8FD9\\u79CD\\u76D2\\u5B50\\u6A21\\u578B\\u3002\\u6709\\u5173\\u66F4\\u591A\\u4FE1\\u606F\\uFF0C\\u8BF7\\u53C2\\u9605\",(0,e.jsxs)(n.a,{href:\"/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages\",children:[\"\\u5173\\u4E8E \",(0,e.jsx)(n.code,{children:\"box-sizing: border-box\"}),\" \\u7684\\u95EE\\u9898\"]}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-css\",children:`.example {\n  box-sizing: border-box;\n  width: 100px;\n  padding: 10px;\n  border: 5px solid black;\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8BE5\\u5143\\u7D20\\u5728\\u9875\\u9762\\u4E0A\\u4ECD\\u5C06\\u5360\\u7528 100px\\uFF0C\\u4F46\\u5185\\u5BB9\\u533A\\u57DF\\u5C06\\u4E3A 70px \\u5BBD\\uFF08100px - 10px \\u5DE6\\u5185\\u8FB9\\u8DDD - 10px \\u53F3\\u5185\\u8FB9\\u8DDD - 5px \\u5DE6\\u8FB9\\u6846 - 5px \\u53F3\\u8FB9\\u6846\\uFF09\\u3002\"}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8FB9\\u6846\\u548C\\u5916\\u8FB9\\u8DDD\\u884C\\u4E3A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8FB9\\u6846\\u4E0D\\u4F1A\\u4E0E\\u76F8\\u90BB\\u5143\\u7D20\\u7684\\u8FB9\\u6846\\u6298\\u53E0\\u6216\\u91CD\\u53E0\"}),\"\\u3002\\u6BCF\\u4E2A\\u5143\\u7D20\\u7684\\u8FB9\\u6846\\u5355\\u72EC\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5916\\u8FB9\\u8DDD\\u53EF\\u4EE5\\u6298\\u53E0\"}),\"\\uFF0C\\u4F46\\u4EC5\\u5782\\u76F4\\u65B9\\u5411\\uFF0C\\u4E14\\u4EC5\\u5728\\u5757\\u7EA7\\u5143\\u7D20\\u4E4B\\u95F4\\u3002\\u6C34\\u5E73\\u5916\\u8FB9\\u8DDD\\u4E0D\\u4F1A\\u6298\\u53E0\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u5982\\u679C\\u4E00\\u4E2A\\u5757\\u7EA7\\u5143\\u7D20\\u5177\\u6709\\u5E95\\u90E8\\u5916\\u8FB9\\u8DDD\\uFF0C\\u800C\\u4E0B\\u4E00\\u4E2A\\u5757\\u7EA7\\u5143\\u7D20\\u5177\\u6709\\u9876\\u90E8\\u5916\\u8FB9\\u8DDD\\uFF0C\\u5219\\u4EC5\\u4F7F\\u7528\\u4E24\\u8005\\u4E2D\\u8F83\\u5927\\u7684\\u4E00\\u4E2A\\u3002\\u6B64\\u884C\\u4E3A\\u4E0E \",(0,e.jsx)(n.code,{children:\"box-sizing\"}),\" \\u65E0\\u5173\\uFF0C\\u5E76\\u4E14\\u662F CSS \\u4E2D\\u7684\\u9ED8\\u8BA4\\u884C\\u4E3A\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u53C2\\u8003\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model#the_standard_css_box_model\",children:\"\\u76D2\\u5B50\\u6A21\\u578B | MDN\"})}),`\n`]})]})}function s(d={}){let{wrapper:n}=d.components||{};return n?(0,e.jsx)(n,{...d,children:(0,e.jsx)(a,{...d})}):a(d)}return _(f);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/en-US.json b/apps/web/src/__generated__/questions/quiz/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/en-US.json
index 94d88da26..bba09ca9c 100644
--- a/apps/web/src/__generated__/questions/quiz/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var o in e)n(t,o,{get:e[o],enumerable:!0})},i=(t,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!f.call(t,r)&&r!==o&&n(t,r,{get:()=>e[r],enumerable:!(a=p(e,r))||a.enumerable});return t};var y=(t,e,o)=>(o=t!=null?l(u(t)):{},i(e||!t||!t.__esModule?n(o,\"default\",{value:t,enumerable:!0}):o,t)),b=t=>i(n({},\"__esModule\",{value:!0}),t);var d=x((B,c)=>{c.exports=_jsx_runtime});var F={};g(F,{default:()=>_,frontmatter:()=>w});var s=y(d()),w={title:\"Have you ever used a grid system, and if so, what do you prefer?\"};function h(t){let e=Object.assign({p:\"p\",code:\"code\",a:\"a\"},t.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(e.p,{children:[\"Before Flex became popular (around 2014), the \",(0,s.jsx)(e.code,{children:\"float\"}),\"-based grid system was the most reliable because it still has the most browser support among the alternative existing systems (flex, grid). Bootstrap was using the \",(0,s.jsx)(e.code,{children:\"float\"}),\" approach until Bootstrap 4 which switched to the \",(0,s.jsx)(e.code,{children:\"flex\"}),\"-based approach.\"]}),`\n`,(0,s.jsxs)(e.p,{children:[\"Today, \",(0,s.jsx)(e.code,{children:\"flex\"}),\" is the recommended approach for building grid systems and has \",(0,s.jsx)(e.a,{href:\"https://caniuse.com/#search=flex\",children:\"decent browser support (99.64%)\"}),\".\"]}),`\n`,(0,s.jsxs)(e.p,{children:[\"For the adventurous, they can look into \",(0,s.jsx)(e.a,{href:\"https://css-tricks.com/snippets/css/complete-guide-grid/\",children:\"CSS Grid Layout\"}),\", which uses the shiny new \",(0,s.jsx)(e.code,{children:\"grid\"}),\" property. Grid is a two-dimensional grid-based layout system as compared to Flexbox, which is one-dimensional.\"]})]})}function j(t={}){let{wrapper:e}=t.components||{};return e?(0,s.jsx)(e,Object.assign({},t,{children:(0,s.jsx)(h,t)})):h(t)}var _=j;return b(F);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var s in e)n(t,s,{get:e[s],enumerable:!0})},i=(t,e,s,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!x.call(t,r)&&r!==s&&n(t,r,{get:()=>e[r],enumerable:!(a=m(e,r))||a.enumerable});return t};var w=(t,e,s)=>(s=t!=null?p(f(t)):{},i(e||!t||!t.__esModule?n(s,\"default\",{value:t,enumerable:!0}):s,t)),b=t=>i(n({},\"__esModule\",{value:!0}),t);var d=g((v,c)=>{c.exports=_jsx_runtime});var j={};y(j,{default:()=>l,frontmatter:()=>_});var o=w(d()),_={title:\"Have you ever used a grid system, and if so, what do you prefer?\"};function h(t){let e={a:\"a\",code:\"code\",p:\"p\",...t.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Before Flex became popular (around 2014), the \",(0,o.jsx)(e.code,{children:\"float\"}),\"-based grid system was the most reliable because it still has the most browser support among the alternative existing systems (flex, grid). Bootstrap was using the \",(0,o.jsx)(e.code,{children:\"float\"}),\" approach until Bootstrap 4 which switched to the \",(0,o.jsx)(e.code,{children:\"flex\"}),\"-based approach.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Today, \",(0,o.jsx)(e.code,{children:\"flex\"}),\" is the recommended approach for building grid systems and has \",(0,o.jsx)(e.a,{href:\"https://caniuse.com/#search=flex\",children:\"decent browser support (99.64%)\"}),\".\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"For the adventurous, they can look into \",(0,o.jsx)(e.a,{href:\"https://css-tricks.com/snippets/css/complete-guide-grid/\",children:\"CSS Grid Layout\"}),\", which uses the shiny new \",(0,o.jsx)(e.code,{children:\"grid\"}),\" property. Grid is a two-dimensional grid-based layout system as compared to Flexbox, which is one-dimensional.\"]})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(h,{...t})}):h(t)}return b(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/pt-BR.json b/apps/web/src/__generated__/questions/quiz/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/pt-BR.json
index dc92c8a53..2be078eb8 100644
--- a/apps/web/src/__generated__/questions/quiz/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),f=(a,e)=>{for(var r in e)t(a,r,{get:e[r],enumerable:!0})},d=(a,e,r,n)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!g.call(a,s)&&s!==r&&t(a,s,{get:()=>e[s],enumerable:!(n=u(e,s))||n.enumerable});return a};var b=(a,e,r)=>(r=a!=null?l(h(a)):{},d(e||!a||!a.__esModule?t(r,\"default\",{value:a,enumerable:!0}):r,a)),v=a=>d(t({},\"__esModule\",{value:!0}),a);var c=x((C,i)=>{i.exports=_jsx_runtime});var F={};f(F,{default:()=>q,frontmatter:()=>j});var o=b(c()),j={title:\"Voc\\xEA j\\xE1 usou um sistema de grid e, se sim, o que voc\\xEA prefere?\"};function m(a){let e=Object.assign({p:\"p\",code:\"code\",a:\"a\"},a.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Antes de Flex se tornar popular (por volta de 2014), o sistema de grid baseado em \",(0,o.jsx)(e.code,{children:\"float\"}),\" era o mais confi\\xE1vel porque ainda tem maior suporte dos navegadores entre os sistemas alternativos (flex, grid). Bootstrap estava usando a abordagem \",(0,o.jsx)(e.code,{children:\"float\"}),\" at\\xE9 o Bootstrap 4 que mudou para a abordagem \",(0,o.jsx)(e.code,{children:\"flex\"}),\".\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Hoje, \",(0,o.jsx)(e.code,{children:\"flex\"}),\" \\xE9 a abordagem recomendada para construir sistemas de grid e tem \",(0,o.jsx)(e.a,{href:\"https://caniuse.com/#search=flex\",children:\"suporte bom para os navegadores (99.64%)\"}),\".\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Para os aventureiros, voc\\xEAs podem dar uma olhada no \",(0,o.jsx)(e.a,{href:\"https://css-tricks.com/snippets/css/complete-guide-grid-/\",children:\"CSS Grid Layout\"}),\", que usa a mais nova propriedade \",(0,o.jsx)(e.code,{children:\"grid\"}),\". Grid \\xE9 um sistema de layout bidimensional baseado em grade, em compara\\xE7\\xE3o com o Flexbox, que \\xE9 unidimensional.\"]})]})}function _(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,Object.assign({},a,{children:(0,o.jsx)(m,a)})):m(a)}var q=_;return v(F);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),v=(a,e)=>{for(var r in e)t(a,r,{get:e[r],enumerable:!0})},d=(a,e,r,n)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of h(e))!f.call(a,s)&&s!==r&&t(a,s,{get:()=>e[s],enumerable:!(n=p(e,s))||n.enumerable});return a};var b=(a,e,r)=>(r=a!=null?u(x(a)):{},d(e||!a||!a.__esModule?t(r,\"default\",{value:a,enumerable:!0}):r,a)),j=a=>d(t({},\"__esModule\",{value:!0}),a);var c=g((y,i)=>{i.exports=_jsx_runtime});var q={};v(q,{default:()=>l,frontmatter:()=>_});var o=b(c()),_={title:\"Voc\\xEA j\\xE1 usou um sistema de grid e, se sim, o que voc\\xEA prefere?\"};function m(a){let e={a:\"a\",code:\"code\",p:\"p\",...a.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Antes de Flex se tornar popular (por volta de 2014), o sistema de grid baseado em \",(0,o.jsx)(e.code,{children:\"float\"}),\" era o mais confi\\xE1vel porque ainda tem maior suporte dos navegadores entre os sistemas alternativos (flex, grid). Bootstrap estava usando a abordagem \",(0,o.jsx)(e.code,{children:\"float\"}),\" at\\xE9 o Bootstrap 4 que mudou para a abordagem \",(0,o.jsx)(e.code,{children:\"flex\"}),\".\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Hoje, \",(0,o.jsx)(e.code,{children:\"flex\"}),\" \\xE9 a abordagem recomendada para construir sistemas de grid e tem \",(0,o.jsx)(e.a,{href:\"https://caniuse.com/#search=flex\",children:\"suporte bom para os navegadores (99.64%)\"}),\".\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Para os aventureiros, voc\\xEAs podem dar uma olhada no \",(0,o.jsx)(e.a,{href:\"https://css-tricks.com/snippets/css/complete-guide-grid-/\",children:\"CSS Grid Layout\"}),\", que usa a mais nova propriedade \",(0,o.jsx)(e.code,{children:\"grid\"}),\". Grid \\xE9 um sistema de layout bidimensional baseado em grade, em compara\\xE7\\xE3o com o Flexbox, que \\xE9 unidimensional.\"]})]})}function l(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,{...a,children:(0,o.jsx)(m,{...a})}):m(a)}return j(q);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/zh-CN.json b/apps/web/src/__generated__/questions/quiz/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/zh-CN.json
index d6f3a04dd..75397d245 100644
--- a/apps/web/src/__generated__/questions/quiz/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var u=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var c in e)o(t,c,{get:e[c],enumerable:!0})},i=(t,e,c,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!m.call(t,r)&&r!==c&&o(t,r,{get:()=>e[r],enumerable:!(s=x(e,r))||s.enumerable});return t};var j=(t,e,c)=>(c=t!=null?h(f(t)):{},i(e||!t||!t.__esModule?o(c,\"default\",{value:t,enumerable:!0}):c,t)),_=t=>i(o({},\"__esModule\",{value:!0}),t);var a=u((B,d)=>{d.exports=_jsx_runtime});var M={};g(M,{default:()=>C,frontmatter:()=>F});var n=j(a()),F={title:\"\\u4F60\\u662F\\u5426\\u4F7F\\u7528\\u8FC7\\u7F51\\u683C\\u7CFB\\u7EDF\\uFF0C\\u5982\\u679C\\u4F7F\\u7528\\u8FC7\\uFF0C\\u4F60\\u66F4\\u559C\\u6B22\\u54EA\\u79CD\\uFF1F\"};function l(t){let e=Object.assign({p:\"p\",code:\"code\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"\\u5728 Flex \\u53D8\\u5F97\\u6D41\\u884C\\u4E4B\\u524D\\uFF08\\u5927\\u7EA6\\u5728 2014 \\u5E74\\uFF09\\uFF0C\\u57FA\\u4E8E \",(0,n.jsx)(e.code,{children:\"float\"}),\" \\u7684\\u7F51\\u683C\\u7CFB\\u7EDF\\u662F\\u6700\\u53EF\\u9760\\u7684\\uFF0C\\u56E0\\u4E3A\\u5B83\\u5728\\u73B0\\u6709\\u7684\\u66FF\\u4EE3\\u7CFB\\u7EDF\\uFF08flex\\u3001grid\\uFF09\\u4E2D\\u4ECD\\u7136\\u62E5\\u6709\\u6700\\u591A\\u7684\\u6D4F\\u89C8\\u5668\\u652F\\u6301\\u3002Bootstrap \\u4E00\\u76F4\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"float\"}),\" \\u65B9\\u6CD5\\uFF0C\\u76F4\\u5230 Bootstrap 4 \\u5207\\u6362\\u5230\\u57FA\\u4E8E \",(0,n.jsx)(e.code,{children:\"flex\"}),\" \\u7684\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u4ECA\\uFF0C\",(0,n.jsx)(e.code,{children:\"flex\"}),\" \\u662F\\u6784\\u5EFA\\u7F51\\u683C\\u7CFB\\u7EDF\\u7684\\u63A8\\u8350\\u65B9\\u6CD5\\uFF0C\\u5E76\\u4E14\\u5177\\u6709 \",(0,n.jsx)(e.a,{href:\"https://caniuse.com/#search=flex\",children:\"\\u4E0D\\u9519\\u7684\\u6D4F\\u89C8\\u5668\\u652F\\u6301 (99.64%)\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5BF9\\u4E8E\\u559C\\u6B22\\u5192\\u9669\\u7684\\u4EBA\\uFF0C\\u4ED6\\u4EEC\\u53EF\\u4EE5\\u7814\\u7A76 \",(0,n.jsx)(e.a,{href:\"https://css-tricks.com/snippets/css/complete-guide-grid/\",children:\"CSS Grid Layout\"}),\"\\uFF0C\\u5B83\\u4F7F\\u7528\\u5168\\u65B0\\u7684 \",(0,n.jsx)(e.code,{children:\"grid\"}),\" \\u5C5E\\u6027\\u3002Grid \\u662F\\u4E00\\u4E2A\\u57FA\\u4E8E\\u4E8C\\u7EF4\\u7F51\\u683C\\u7684\\u5E03\\u5C40\\u7CFB\\u7EDF\\uFF0C\\u800C Flexbox \\u662F\\u4E00\\u7EF4\\u7684\\u3002\"]})]})}function b(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(l,t)})):l(t)}var C=b;return _(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var x=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var _=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},s=(t,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of f(e))!u.call(t,c)&&c!==r&&o(t,c,{get:()=>e[c],enumerable:!(d=p(e,c))||d.enumerable});return t};var j=(t,e,r)=>(r=t!=null?x(m(t)):{},s(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),F=t=>s(o({},\"__esModule\",{value:!0}),t);var l=_((B,i)=>{i.exports=_jsx_runtime});var M={};g(M,{default:()=>h,frontmatter:()=>C});var n=j(l()),C={title:\"\\u4F60\\u662F\\u5426\\u4F7F\\u7528\\u8FC7\\u7F51\\u683C\\u7CFB\\u7EDF\\uFF0C\\u5982\\u679C\\u4F7F\\u7528\\u8FC7\\uFF0C\\u4F60\\u66F4\\u559C\\u6B22\\u54EA\\u79CD\\uFF1F\"};function a(t){let e={a:\"a\",code:\"code\",p:\"p\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"\\u5728 Flex \\u53D8\\u5F97\\u6D41\\u884C\\u4E4B\\u524D\\uFF08\\u5927\\u7EA6\\u5728 2014 \\u5E74\\uFF09\\uFF0C\\u57FA\\u4E8E \",(0,n.jsx)(e.code,{children:\"float\"}),\" \\u7684\\u7F51\\u683C\\u7CFB\\u7EDF\\u662F\\u6700\\u53EF\\u9760\\u7684\\uFF0C\\u56E0\\u4E3A\\u5B83\\u5728\\u73B0\\u6709\\u7684\\u66FF\\u4EE3\\u7CFB\\u7EDF\\uFF08flex\\u3001grid\\uFF09\\u4E2D\\u4ECD\\u7136\\u62E5\\u6709\\u6700\\u591A\\u7684\\u6D4F\\u89C8\\u5668\\u652F\\u6301\\u3002Bootstrap \\u4E00\\u76F4\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"float\"}),\" \\u65B9\\u6CD5\\uFF0C\\u76F4\\u5230 Bootstrap 4 \\u5207\\u6362\\u5230\\u57FA\\u4E8E \",(0,n.jsx)(e.code,{children:\"flex\"}),\" \\u7684\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u4ECA\\uFF0C\",(0,n.jsx)(e.code,{children:\"flex\"}),\" \\u662F\\u6784\\u5EFA\\u7F51\\u683C\\u7CFB\\u7EDF\\u7684\\u63A8\\u8350\\u65B9\\u6CD5\\uFF0C\\u5E76\\u4E14\\u5177\\u6709 \",(0,n.jsx)(e.a,{href:\"https://caniuse.com/#search=flex\",children:\"\\u4E0D\\u9519\\u7684\\u6D4F\\u89C8\\u5668\\u652F\\u6301 (99.64%)\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5BF9\\u4E8E\\u559C\\u6B22\\u5192\\u9669\\u7684\\u4EBA\\uFF0C\\u4ED6\\u4EEC\\u53EF\\u4EE5\\u7814\\u7A76 \",(0,n.jsx)(e.a,{href:\"https://css-tricks.com/snippets/css/complete-guide-grid/\",children:\"CSS Grid Layout\"}),\"\\uFF0C\\u5B83\\u4F7F\\u7528\\u5168\\u65B0\\u7684 \",(0,n.jsx)(e.code,{children:\"grid\"}),\" \\u5C5E\\u6027\\u3002Grid \\u662F\\u4E00\\u4E2A\\u57FA\\u4E8E\\u4E8C\\u7EF4\\u7F51\\u683C\\u7684\\u5E03\\u5C40\\u7CFB\\u7EDF\\uFF0C\\u800C Flexbox \\u662F\\u4E00\\u7EF4\\u7684\\u3002\"]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(a,{...t})}):a(t)}return F(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/en-US.json b/apps/web/src/__generated__/questions/quiz/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/en-US.json
index 130428d17..f29af6400 100644
--- a/apps/web/src/__generated__/questions/quiz/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var s in e)r(t,s,{get:e[s],enumerable:!0})},a=(t,e,s,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of m(e))!u.call(t,n)&&n!==s&&r(t,n,{get:()=>e[n],enumerable:!(o=p(e,n))||o.enumerable});return t};var v=(t,e,s)=>(s=t!=null?d(g(t)):{},a(e||!t||!t.__esModule?r(s,\"default\",{value:t,enumerable:!0}):s,t)),b=t=>a(r({},\"__esModule\",{value:!0}),t);var c=w((_,l)=>{l.exports=_jsx_runtime});var k={};f(k,{default:()=>j,frontmatter:()=>y});var i=v(c()),y={title:\"Have you ever worked with retina graphics?\",subtitle:\"If so, when and what techniques did you use?\"};function h(t){let e=Object.assign({p:\"p\",em:\"em\",code:\"code\",pre:\"pre\",a:\"a\"},t.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.em,{children:\"Retina\"}),\" is just a marketing term to refer to high resolution screens with a pixel ratio bigger than 1. The key thing to know is that using a pixel ratio means these displays are emulating a lower resolution screen in order to show elements with the same size. Nowadays we consider all mobile devices \",(0,i.jsx)(e.em,{children:\"retina\"}),\" defacto displays.\"]}),`\n`,(0,i.jsx)(e.p,{children:\"Browsers by default render DOM elements according to the device resolution, except for images.\"}),`\n`,(0,i.jsx)(e.p,{children:\"In order to have crisp, good-looking graphics that make the best of retina displays we need to use high resolution images whenever possible. However using always the highest resolution images will have an impact on performance as more bytes will need to be sent over the wire.\"}),`\n`,(0,i.jsxs)(e.p,{children:[\"To overcome this problem, we can use responsive images, as specified in HTML5. It requires making available different resolution files of the same image to the browser and let it decide which image is best, using the html attribute \",(0,i.jsx)(e.code,{children:\"srcset\"}),\" and optionally \",(0,i.jsx)(e.code,{children:\"sizes\"}),\", for instance:\"]}),`\n`,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:\"language-html\",children:`<div responsive-background-image>\n  <img\n    src=\"/images/test-1600.jpg\"\n    sizes=\"\n      (min-width: 768px) 50vw,\n      (min-width: 1024px) 66vw,\n      100vw\"\n    srcset=\"\n      /images/test-400.jpg   400w,\n      /images/test-800.jpg   800w,\n      /images/test-1200.jpg 1200w\n    \" />\n</div>\n`})}),`\n`,(0,i.jsxs)(e.p,{children:[\"It is important to note that browsers which don't support HTML5's \",(0,i.jsx)(e.code,{children:\"srcset\"}),\" (i.e. IE11) will ignore it and use \",(0,i.jsx)(e.code,{children:\"src\"}),\" instead. If we really need to support IE11 and we want to provide this feature for performance reasons, we can use a JavaScript polyfill, e.g. \",(0,i.jsx)(e.a,{href:\"https://scottjehl.github.io/picturefill/\",children:\"Picturefill\"}),\".\"]}),`\n`,(0,i.jsx)(e.p,{children:\"For icons, to use SVGs where possible, as they render very crisply regardless of resolution.\"})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,Object.assign({},t,{children:(0,i.jsx)(h,t)})):h(t)}var j=x;return b(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var n in e)r(t,n,{get:e[n],enumerable:!0})},a=(t,e,n,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of g(e))!w.call(t,s)&&s!==n&&r(t,s,{get:()=>e[s],enumerable:!(o=m(e,s))||o.enumerable});return t};var b=(t,e,n)=>(n=t!=null?p(u(t)):{},a(e||!t||!t.__esModule?r(n,\"default\",{value:t,enumerable:!0}):n,t)),y=t=>a(r({},\"__esModule\",{value:!0}),t);var c=f((I,l)=>{l.exports=_jsx_runtime});var j={};v(j,{default:()=>d,frontmatter:()=>x});var i=b(c()),x={title:\"Have you ever worked with retina graphics?\",subtitle:\"If so, when and what techniques did you use?\"};function h(t){let e={a:\"a\",code:\"code\",em:\"em\",p:\"p\",pre:\"pre\",...t.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.em,{children:\"Retina\"}),\" is just a marketing term to refer to high resolution screens with a pixel ratio bigger than 1. The key thing to know is that using a pixel ratio means these displays are emulating a lower resolution screen in order to show elements with the same size. Nowadays we consider all mobile devices \",(0,i.jsx)(e.em,{children:\"retina\"}),\" defacto displays.\"]}),`\n`,(0,i.jsx)(e.p,{children:\"Browsers by default render DOM elements according to the device resolution, except for images.\"}),`\n`,(0,i.jsx)(e.p,{children:\"In order to have crisp, good-looking graphics that make the best of retina displays we need to use high resolution images whenever possible. However using always the highest resolution images will have an impact on performance as more bytes will need to be sent over the wire.\"}),`\n`,(0,i.jsxs)(e.p,{children:[\"To overcome this problem, we can use responsive images, as specified in HTML5. It requires making available different resolution files of the same image to the browser and let it decide which image is best, using the html attribute \",(0,i.jsx)(e.code,{children:\"srcset\"}),\" and optionally \",(0,i.jsx)(e.code,{children:\"sizes\"}),\", for instance:\"]}),`\n`,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:\"language-html\",children:`<div responsive-background-image>\n  <img\n    src=\"/images/test-1600.jpg\"\n    sizes=\"\n      (min-width: 768px) 50vw,\n      (min-width: 1024px) 66vw,\n      100vw\"\n    srcset=\"\n      /images/test-400.jpg   400w,\n      /images/test-800.jpg   800w,\n      /images/test-1200.jpg 1200w\n    \" />\n</div>\n`})}),`\n`,(0,i.jsxs)(e.p,{children:[\"It is important to note that browsers which don't support HTML5's \",(0,i.jsx)(e.code,{children:\"srcset\"}),\" (i.e. IE11) will ignore it and use \",(0,i.jsx)(e.code,{children:\"src\"}),\" instead. If we really need to support IE11 and we want to provide this feature for performance reasons, we can use a JavaScript polyfill, e.g. \",(0,i.jsx)(e.a,{href:\"https://scottjehl.github.io/picturefill/\",children:\"Picturefill\"}),\".\"]}),`\n`,(0,i.jsx)(e.p,{children:\"For icons, to use SVGs where possible, as they render very crisply regardless of resolution.\"})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(h,{...t})}):h(t)}return y(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/pt-BR.json b/apps/web/src/__generated__/questions/quiz/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/pt-BR.json
index db0139c2f..6231c3955 100644
--- a/apps/web/src/__generated__/questions/quiz/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var v=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var a in e)i(o,a,{get:e[a],enumerable:!0})},t=(o,e,a,n)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!h.call(o,r)&&r!==a&&i(o,r,{get:()=>e[r],enumerable:!(n=l(e,r))||n.enumerable});return o};var f=(o,e,a)=>(a=o!=null?p(g(o)):{},t(e||!o||!o.__esModule?i(a,\"default\",{value:o,enumerable:!0}):a,o)),j=o=>t(i({},\"__esModule\",{value:!0}),o);var d=v((M,m)=>{m.exports=_jsx_runtime});var z={};x(z,{default:()=>w,frontmatter:()=>q});var s=f(d()),q={title:\"Voc\\xEA j\\xE1 trabalhou com gr\\xE1ficos de retina?\",subtitle:\"Em caso afirmativo, quando e que t\\xE9cnicas utilizou?\"};function c(o){let e=Object.assign({p:\"p\",em:\"em\",code:\"code\",pre:\"pre\",a:\"a\"},o.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.em,{children:\"Retina\"}),\" \\xE9 apenas um termo de marketing usado para se referir a telas de alta resolu\\xE7\\xE3o com uma propor\\xE7\\xE3o de pixels maior do que 1. O ponto chave a saber \\xE9 que o uso de uma taxa de pixels significa que essas telas est\\xE3o emulando uma tela de resolu\\xE7\\xE3o mais baixa para mostrar elementos com o mesmo tamanho. Hoje em dia, consideramos todos os dispositivos m\\xF3veis \",(0,s.jsx)(e.em,{children:\"retina\"}),\" por padr\\xE3o.\"]}),`\n`,(0,s.jsx)(e.p,{children:\"Os navegadores, por padr\\xE3o, renderizam elementos do DOM de acordo com a resolu\\xE7\\xE3o do dispositivo, exceto para imagens.\"}),`\n`,(0,s.jsx)(e.p,{children:\"Para ter gr\\xE1ficos n\\xEDtidos e com boa apar\\xEAncia que aproveitem ao m\\xE1ximo as telas retina, precisamos usar imagens de alta resolu\\xE7\\xE3o sempre que poss\\xEDvel. No entanto, usar sempre imagens com a maior resolu\\xE7\\xE3o ter\\xE1 um impacto no desempenho, j\\xE1 que mais bytes precisar\\xE3o ser enviados pela rede.\"}),`\n`,(0,s.jsxs)(e.p,{children:[\"Para superar esse problema, podemos usar imagens responsivas, como especificado no HTML5. Ele requer disponibilizar diferentes arquivos de resolu\\xE7\\xE3o da mesma imagem para o navegador e deix\\xE1-lo decidir qual imagem \\xE9 a melhor, usando o atributo html \",(0,s.jsx)(e.code,{children:\"srcset\"}),\" e opcionalmente \",(0,s.jsx)(e.code,{children:\"sizes\"}),\", por exemplo:\"]}),`\n`,(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:\"language-html\",children:`<div responsive-background-image>\n  <img\n    src=\"/images/test-1600.jpg\"\n    sizes=\"\n      (min-width: 768px) 50vw,\n      (min-width: 1024px) 66vw,\n      100vw\"\n    srcset=\"\n      /images/test-400.jpg   400w,\n      /images/test-800.jpg   800w,\n      /images/test-1200.jpg 1200w\n    \" />\n</div>\n`})}),`\n`,(0,s.jsxs)(e.p,{children:[\"\\xC9 importante notar que os navegadores que n\\xE3o suportam o \",(0,s.jsx)(e.code,{children:\"srcset\"}),\" do HTML5 (ou seja, IE11) v\\xE3o ignor\\xE1-lo e usar o \",(0,s.jsx)(e.code,{children:\"src\"}),\" em vez disso. Se realmente precisarmos oferecer suporte ao IE11 e quisermos fornecer esse recurso por motivos de desempenho, podemos usar um polyfill JavaScript, como o \",(0,s.jsx)(e.a,{href:\"https://scottjehl.github.io/picturefill/\",children:\"Picturefill\"}),\".\"]}),`\n`,(0,s.jsx)(e.p,{children:\"Para \\xEDcones, \\xE9 recomendado usar SVGs sempre que poss\\xEDvel, pois eles s\\xE3o renderizados com muita nitidez independentemente da resolu\\xE7\\xE3o.\"})]})}function b(o={}){let{wrapper:e}=o.components||{};return e?(0,s.jsx)(e,Object.assign({},o,{children:(0,s.jsx)(c,o)})):c(o)}var w=b;return j(z);})();\n;return Component;"
+  "solution": "var Component=(()=>{var l=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var x=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),f=(o,e)=>{for(var a in e)i(o,a,{get:e[a],enumerable:!0})},t=(o,e,a,n)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of h(e))!v.call(o,r)&&r!==a&&i(o,r,{get:()=>e[r],enumerable:!(n=u(e,r))||n.enumerable});return o};var q=(o,e,a)=>(a=o!=null?l(g(o)):{},t(e||!o||!o.__esModule?i(a,\"default\",{value:o,enumerable:!0}):a,o)),j=o=>t(i({},\"__esModule\",{value:!0}),o);var d=x((_,m)=>{m.exports=_jsx_runtime});var w={};f(w,{default:()=>p,frontmatter:()=>b});var s=q(d()),b={title:\"Voc\\xEA j\\xE1 trabalhou com gr\\xE1ficos de retina?\",subtitle:\"Em caso afirmativo, quando e que t\\xE9cnicas utilizou?\"};function c(o){let e={a:\"a\",code:\"code\",em:\"em\",p:\"p\",pre:\"pre\",...o.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.em,{children:\"Retina\"}),\" \\xE9 apenas um termo de marketing usado para se referir a telas de alta resolu\\xE7\\xE3o com uma propor\\xE7\\xE3o de pixels maior do que 1. O ponto chave a saber \\xE9 que o uso de uma taxa de pixels significa que essas telas est\\xE3o emulando uma tela de resolu\\xE7\\xE3o mais baixa para mostrar elementos com o mesmo tamanho. Hoje em dia, consideramos todos os dispositivos m\\xF3veis \",(0,s.jsx)(e.em,{children:\"retina\"}),\" por padr\\xE3o.\"]}),`\n`,(0,s.jsx)(e.p,{children:\"Os navegadores, por padr\\xE3o, renderizam elementos do DOM de acordo com a resolu\\xE7\\xE3o do dispositivo, exceto para imagens.\"}),`\n`,(0,s.jsx)(e.p,{children:\"Para ter gr\\xE1ficos n\\xEDtidos e com boa apar\\xEAncia que aproveitem ao m\\xE1ximo as telas retina, precisamos usar imagens de alta resolu\\xE7\\xE3o sempre que poss\\xEDvel. No entanto, usar sempre imagens com a maior resolu\\xE7\\xE3o ter\\xE1 um impacto no desempenho, j\\xE1 que mais bytes precisar\\xE3o ser enviados pela rede.\"}),`\n`,(0,s.jsxs)(e.p,{children:[\"Para superar esse problema, podemos usar imagens responsivas, como especificado no HTML5. Ele requer disponibilizar diferentes arquivos de resolu\\xE7\\xE3o da mesma imagem para o navegador e deix\\xE1-lo decidir qual imagem \\xE9 a melhor, usando o atributo html \",(0,s.jsx)(e.code,{children:\"srcset\"}),\" e opcionalmente \",(0,s.jsx)(e.code,{children:\"sizes\"}),\", por exemplo:\"]}),`\n`,(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:\"language-html\",children:`<div responsive-background-image>\n  <img\n    src=\"/images/test-1600.jpg\"\n    sizes=\"\n      (min-width: 768px) 50vw,\n      (min-width: 1024px) 66vw,\n      100vw\"\n    srcset=\"\n      /images/test-400.jpg   400w,\n      /images/test-800.jpg   800w,\n      /images/test-1200.jpg 1200w\n    \" />\n</div>\n`})}),`\n`,(0,s.jsxs)(e.p,{children:[\"\\xC9 importante notar que os navegadores que n\\xE3o suportam o \",(0,s.jsx)(e.code,{children:\"srcset\"}),\" do HTML5 (ou seja, IE11) v\\xE3o ignor\\xE1-lo e usar o \",(0,s.jsx)(e.code,{children:\"src\"}),\" em vez disso. Se realmente precisarmos oferecer suporte ao IE11 e quisermos fornecer esse recurso por motivos de desempenho, podemos usar um polyfill JavaScript, como o \",(0,s.jsx)(e.a,{href:\"https://scottjehl.github.io/picturefill/\",children:\"Picturefill\"}),\".\"]}),`\n`,(0,s.jsx)(e.p,{children:\"Para \\xEDcones, \\xE9 recomendado usar SVGs sempre que poss\\xEDvel, pois eles s\\xE3o renderizados com muita nitidez independentemente da resolu\\xE7\\xE3o.\"})]})}function p(o={}){let{wrapper:e}=o.components||{};return e?(0,s.jsx)(e,{...o,children:(0,s.jsx)(c,{...o})}):c(o)}return j(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/zh-CN.json b/apps/web/src/__generated__/questions/quiz/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/zh-CN.json
index 12c1bc438..bff9d12ac 100644
--- a/apps/web/src/__generated__/questions/quiz/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var j=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var i in e)r(n,i,{get:e[i],enumerable:!0})},l=(n,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!u.call(n,c)&&c!==i&&r(n,c,{get:()=>e[c],enumerable:!(s=p(e,c))||s.enumerable});return n};var f=(n,e,i)=>(i=n!=null?h(g(n)):{},l(e||!n||!n.__esModule?r(i,\"default\",{value:n,enumerable:!0}):i,n)),w=n=>l(r({},\"__esModule\",{value:!0}),n);var a=j((L,d)=>{d.exports=_jsx_runtime});var b={};x(b,{default:()=>M,frontmatter:()=>v});var t=f(a()),v={title:\"\\u4F60\\u662F\\u5426\\u4F7F\\u7528\\u8FC7\\u89C6\\u7F51\\u819C\\u56FE\\u5F62\\uFF1F\",subtitle:\"\\u5982\\u679C\\u662F\\uFF0C\\u4F60\\u662F\\u4EC0\\u4E48\\u65F6\\u5019\\u4EE5\\u53CA\\u4F7F\\u7528\\u4E86\\u4EC0\\u4E48\\u6280\\u672F\\uFF1F\"};function o(n){let e=Object.assign({p:\"p\",em:\"em\",code:\"code\",pre:\"pre\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.em,{children:\"Retina\"}),\" \\u53EA\\u662F\\u4E00\\u4E2A\\u8425\\u9500\\u672F\\u8BED\\uFF0C\\u6307\\u7684\\u662F\\u50CF\\u7D20\\u6BD4\\u5927\\u4E8E 1 \\u7684\\u9AD8\\u5206\\u8FA8\\u7387\\u5C4F\\u5E55\\u3002\\u9700\\u8981\\u77E5\\u9053\\u7684\\u5173\\u952E\\u662F\\uFF0C\\u4F7F\\u7528\\u50CF\\u7D20\\u6BD4\\u610F\\u5473\\u7740\\u8FD9\\u4E9B\\u663E\\u793A\\u5668\\u6B63\\u5728\\u6A21\\u62DF\\u8F83\\u4F4E\\u5206\\u8FA8\\u7387\\u7684\\u5C4F\\u5E55\\uFF0C\\u4EE5\\u4FBF\\u4EE5\\u76F8\\u540C\\u7684\\u5927\\u5C0F\\u663E\\u793A\\u5143\\u7D20\\u3002\\u5982\\u4ECA\\uFF0C\\u6211\\u4EEC\\u8BA4\\u4E3A\\u6240\\u6709\\u79FB\\u52A8\\u8BBE\\u5907\\u90FD\\u662F \",(0,t.jsx)(e.em,{children:\"retina\"}),\" \\u9ED8\\u8BA4\\u663E\\u793A\\u5668\\u3002\"]}),`\n`,(0,t.jsx)(e.p,{children:\"\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\uFF0C\\u6D4F\\u89C8\\u5668\\u4F1A\\u6839\\u636E\\u8BBE\\u5907\\u5206\\u8FA8\\u7387\\u6E32\\u67D3 DOM \\u5143\\u7D20\\uFF0C\\u4F46\\u56FE\\u50CF\\u9664\\u5916\\u3002\"}),`\n`,(0,t.jsx)(e.p,{children:\"\\u4E3A\\u4E86\\u83B7\\u5F97\\u6E05\\u6670\\u3001\\u7F8E\\u89C2\\u7684\\u56FE\\u5F62\\uFF0C\\u5145\\u5206\\u5229\\u7528\\u89C6\\u7F51\\u819C\\u663E\\u793A\\u5668\\uFF0C\\u6211\\u4EEC\\u9700\\u8981\\u5C3D\\u53EF\\u80FD\\u4F7F\\u7528\\u9AD8\\u5206\\u8FA8\\u7387\\u56FE\\u50CF\\u3002\\u4F46\\u662F\\uFF0C\\u59CB\\u7EC8\\u4F7F\\u7528\\u6700\\u9AD8\\u5206\\u8FA8\\u7387\\u7684\\u56FE\\u50CF\\u4F1A\\u5F71\\u54CD\\u6027\\u80FD\\uFF0C\\u56E0\\u4E3A\\u9700\\u8981\\u901A\\u8FC7\\u7F51\\u7EDC\\u53D1\\u9001\\u66F4\\u591A\\u5B57\\u8282\\u3002\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u4E3A\\u4E86\\u514B\\u670D\\u8FD9\\u4E2A\\u95EE\\u9898\\uFF0C\\u6211\\u4EEC\\u53EF\\u4EE5\\u4F7F\\u7528 HTML5 \\u4E2D\\u6307\\u5B9A\\u7684\\u54CD\\u5E94\\u5F0F\\u56FE\\u50CF\\u3002\\u5B83\\u8981\\u6C42\\u5411\\u6D4F\\u89C8\\u5668\\u63D0\\u4F9B\\u76F8\\u540C\\u56FE\\u50CF\\u7684\\u4E0D\\u540C\\u5206\\u8FA8\\u7387\\u6587\\u4EF6\\uFF0C\\u5E76\\u8BA9\\u5B83\\u51B3\\u5B9A\\u54EA\\u5F20\\u56FE\\u50CF\\u6700\\u597D\\uFF0C\\u4F7F\\u7528 html \\u5C5E\\u6027 \",(0,t.jsx)(e.code,{children:\"srcset\"}),\" \\u548C\\u53EF\\u9009\\u7684 \",(0,t.jsx)(e.code,{children:\"sizes\"}),\"\\uFF0C\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-html\",children:`<div responsive-background-image>\n  <img\n    src=\"/images/test-1600.jpg\"\n    sizes=\"\n      (min-width: 768px) 50vw,\n      (min-width: 1024px) 66vw,\n      100vw\"\n    srcset=\"\n      /images/test-400.jpg   400w,\n      /images/test-800.jpg   800w,\n      /images/test-1200.jpg 1200w\n    \" />\n</div>\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u91CD\\u8981\\u7684\\u662F\\u8981\\u6CE8\\u610F\\uFF0C\\u4E0D\\u652F\\u6301 HTML5 \\u7684 \",(0,t.jsx)(e.code,{children:\"srcset\"}),\" \\u7684\\u6D4F\\u89C8\\u5668\\uFF08\\u5373 IE11\\uFF09\\u5C06\\u5FFD\\u7565\\u5B83\\u5E76\\u4F7F\\u7528 \",(0,t.jsx)(e.code,{children:\"src\"}),\"\\u3002\\u5982\\u679C\\u6211\\u4EEC\\u771F\\u7684\\u9700\\u8981\\u652F\\u6301 IE11 \\u5E76\\u4E14\\u51FA\\u4E8E\\u6027\\u80FD\\u539F\\u56E0\\u5E0C\\u671B\\u63D0\\u4F9B\\u6B64\\u529F\\u80FD\\uFF0C\\u6211\\u4EEC\\u53EF\\u4EE5\\u4F7F\\u7528 JavaScript polyfill\\uFF0C\\u4F8B\\u5982 \",(0,t.jsx)(e.a,{href:\"https://scottjehl.github.io/picturefill/\",children:\"Picturefill\"}),\"\\u3002\"]}),`\n`,(0,t.jsx)(e.p,{children:\"\\u5BF9\\u4E8E\\u56FE\\u6807\\uFF0C\\u5C3D\\u53EF\\u80FD\\u4F7F\\u7528 SVG\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u65E0\\u8BBA\\u5206\\u8FA8\\u7387\\u5982\\u4F55\\u90FD\\u80FD\\u975E\\u5E38\\u6E05\\u6670\\u5730\\u6E32\\u67D3\\u3002\"})]})}function _(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(o,n)})):o(n)}var M=_;return w(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var j=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var i in e)c(n,i,{get:e[i],enumerable:!0})},l=(n,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of g(e))!x.call(n,r)&&r!==i&&c(n,r,{get:()=>e[r],enumerable:!(s=m(e,r))||s.enumerable});return n};var w=(n,e,i)=>(i=n!=null?p(u(n)):{},l(e||!n||!n.__esModule?c(i,\"default\",{value:n,enumerable:!0}):i,n)),v=n=>l(c({},\"__esModule\",{value:!0}),n);var o=j((D,d)=>{d.exports=_jsx_runtime});var M={};f(M,{default:()=>h,frontmatter:()=>_});var t=w(o()),_={title:\"\\u4F60\\u662F\\u5426\\u4F7F\\u7528\\u8FC7\\u89C6\\u7F51\\u819C\\u56FE\\u5F62\\uFF1F\",subtitle:\"\\u5982\\u679C\\u662F\\uFF0C\\u4F60\\u662F\\u4EC0\\u4E48\\u65F6\\u5019\\u4EE5\\u53CA\\u4F7F\\u7528\\u4E86\\u4EC0\\u4E48\\u6280\\u672F\\uFF1F\"};function a(n){let e={a:\"a\",code:\"code\",em:\"em\",p:\"p\",pre:\"pre\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.em,{children:\"Retina\"}),\" \\u53EA\\u662F\\u4E00\\u4E2A\\u8425\\u9500\\u672F\\u8BED\\uFF0C\\u6307\\u7684\\u662F\\u50CF\\u7D20\\u6BD4\\u5927\\u4E8E 1 \\u7684\\u9AD8\\u5206\\u8FA8\\u7387\\u5C4F\\u5E55\\u3002\\u9700\\u8981\\u77E5\\u9053\\u7684\\u5173\\u952E\\u662F\\uFF0C\\u4F7F\\u7528\\u50CF\\u7D20\\u6BD4\\u610F\\u5473\\u7740\\u8FD9\\u4E9B\\u663E\\u793A\\u5668\\u6B63\\u5728\\u6A21\\u62DF\\u8F83\\u4F4E\\u5206\\u8FA8\\u7387\\u7684\\u5C4F\\u5E55\\uFF0C\\u4EE5\\u4FBF\\u4EE5\\u76F8\\u540C\\u7684\\u5927\\u5C0F\\u663E\\u793A\\u5143\\u7D20\\u3002\\u5982\\u4ECA\\uFF0C\\u6211\\u4EEC\\u8BA4\\u4E3A\\u6240\\u6709\\u79FB\\u52A8\\u8BBE\\u5907\\u90FD\\u662F \",(0,t.jsx)(e.em,{children:\"retina\"}),\" \\u9ED8\\u8BA4\\u663E\\u793A\\u5668\\u3002\"]}),`\n`,(0,t.jsx)(e.p,{children:\"\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\uFF0C\\u6D4F\\u89C8\\u5668\\u4F1A\\u6839\\u636E\\u8BBE\\u5907\\u5206\\u8FA8\\u7387\\u6E32\\u67D3 DOM \\u5143\\u7D20\\uFF0C\\u4F46\\u56FE\\u50CF\\u9664\\u5916\\u3002\"}),`\n`,(0,t.jsx)(e.p,{children:\"\\u4E3A\\u4E86\\u83B7\\u5F97\\u6E05\\u6670\\u3001\\u7F8E\\u89C2\\u7684\\u56FE\\u5F62\\uFF0C\\u5145\\u5206\\u5229\\u7528\\u89C6\\u7F51\\u819C\\u663E\\u793A\\u5668\\uFF0C\\u6211\\u4EEC\\u9700\\u8981\\u5C3D\\u53EF\\u80FD\\u4F7F\\u7528\\u9AD8\\u5206\\u8FA8\\u7387\\u56FE\\u50CF\\u3002\\u4F46\\u662F\\uFF0C\\u59CB\\u7EC8\\u4F7F\\u7528\\u6700\\u9AD8\\u5206\\u8FA8\\u7387\\u7684\\u56FE\\u50CF\\u4F1A\\u5F71\\u54CD\\u6027\\u80FD\\uFF0C\\u56E0\\u4E3A\\u9700\\u8981\\u901A\\u8FC7\\u7F51\\u7EDC\\u53D1\\u9001\\u66F4\\u591A\\u5B57\\u8282\\u3002\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u4E3A\\u4E86\\u514B\\u670D\\u8FD9\\u4E2A\\u95EE\\u9898\\uFF0C\\u6211\\u4EEC\\u53EF\\u4EE5\\u4F7F\\u7528 HTML5 \\u4E2D\\u6307\\u5B9A\\u7684\\u54CD\\u5E94\\u5F0F\\u56FE\\u50CF\\u3002\\u5B83\\u8981\\u6C42\\u5411\\u6D4F\\u89C8\\u5668\\u63D0\\u4F9B\\u76F8\\u540C\\u56FE\\u50CF\\u7684\\u4E0D\\u540C\\u5206\\u8FA8\\u7387\\u6587\\u4EF6\\uFF0C\\u5E76\\u8BA9\\u5B83\\u51B3\\u5B9A\\u54EA\\u5F20\\u56FE\\u50CF\\u6700\\u597D\\uFF0C\\u4F7F\\u7528 html \\u5C5E\\u6027 \",(0,t.jsx)(e.code,{children:\"srcset\"}),\" \\u548C\\u53EF\\u9009\\u7684 \",(0,t.jsx)(e.code,{children:\"sizes\"}),\"\\uFF0C\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-html\",children:`<div responsive-background-image>\n  <img\n    src=\"/images/test-1600.jpg\"\n    sizes=\"\n      (min-width: 768px) 50vw,\n      (min-width: 1024px) 66vw,\n      100vw\"\n    srcset=\"\n      /images/test-400.jpg   400w,\n      /images/test-800.jpg   800w,\n      /images/test-1200.jpg 1200w\n    \" />\n</div>\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u91CD\\u8981\\u7684\\u662F\\u8981\\u6CE8\\u610F\\uFF0C\\u4E0D\\u652F\\u6301 HTML5 \\u7684 \",(0,t.jsx)(e.code,{children:\"srcset\"}),\" \\u7684\\u6D4F\\u89C8\\u5668\\uFF08\\u5373 IE11\\uFF09\\u5C06\\u5FFD\\u7565\\u5B83\\u5E76\\u4F7F\\u7528 \",(0,t.jsx)(e.code,{children:\"src\"}),\"\\u3002\\u5982\\u679C\\u6211\\u4EEC\\u771F\\u7684\\u9700\\u8981\\u652F\\u6301 IE11 \\u5E76\\u4E14\\u51FA\\u4E8E\\u6027\\u80FD\\u539F\\u56E0\\u5E0C\\u671B\\u63D0\\u4F9B\\u6B64\\u529F\\u80FD\\uFF0C\\u6211\\u4EEC\\u53EF\\u4EE5\\u4F7F\\u7528 JavaScript polyfill\\uFF0C\\u4F8B\\u5982 \",(0,t.jsx)(e.a,{href:\"https://scottjehl.github.io/picturefill/\",children:\"Picturefill\"}),\"\\u3002\"]}),`\n`,(0,t.jsx)(e.p,{children:\"\\u5BF9\\u4E8E\\u56FE\\u6807\\uFF0C\\u5C3D\\u53EF\\u80FD\\u4F7F\\u7528 SVG\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u65E0\\u8BBA\\u5206\\u8FA8\\u7387\\u5982\\u4F55\\u90FD\\u80FD\\u975E\\u5E38\\u6E05\\u6670\\u5730\\u6E32\\u67D3\\u3002\"})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(a,{...n})}):a(n)}return v(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.json b/apps/web/src/__generated__/questions/quiz/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.json
index 06a5c0187..0db9e1200 100644
--- a/apps/web/src/__generated__/questions/quiz/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var y=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),h=(e,o)=>{for(var t in o)r(e,t,{get:o[t],enumerable:!0})},a=(e,o,t,i)=>{if(o&&typeof o==\"object\"||typeof o==\"function\")for(let s of f(o))!p.call(e,s)&&s!==t&&r(e,s,{get:()=>o[s],enumerable:!(i=u(o,s))||i.enumerable});return e};var w=(e,o,t)=>(t=e!=null?m(x(e)):{},a(o||!e||!e.__esModule?r(t,\"default\",{value:e,enumerable:!0}):t,e)),b=e=>a(r({},\"__esModule\",{value:!0}),e);var c=y((_,l)=>{l.exports=_jsx_runtime});var S={};h(S,{default:()=>v,frontmatter:()=>g});var n=w(c()),g={title:\"Have you played around with the new CSS Flexbox or Grid specs?\"};function d(e){let o=Object.assign({p:\"p\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o.p,{children:\"Flexbox is mainly meant for 1-dimensional layouts while Grid is meant for 2-dimensional layouts.\"}),`\n`,(0,n.jsx)(o.p,{children:\"Flexbox solves many common problems in CSS, such as vertical centering of elements within a container, sticky footer, etc. famous CSS frameworks like Bootstrap and Bulma are based on Flexbox, and Flexbox is still the tested and proven way to create a variety of layouts.\"}),`\n`,(0,n.jsx)(o.p,{children:\"Grid is meant for two-dimensional layouts, giving you full control over both rows and columns. It offers an intuitive and powerful way to create complex grid-based designs directly in CSS, often with less code and more flexibility than older techniques. Browser support for Grid is now strong across all major modern browsers, making it a solid option for layout design in most projects.\"})]})}function j(e={}){let{wrapper:o}=e.components||{};return o?(0,n.jsx)(o,Object.assign({},e,{children:(0,n.jsx)(d,e)})):d(e)}var v=j;return b(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var h=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),w=(e,o)=>{for(var t in o)s(e,t,{get:o[t],enumerable:!0})},a=(e,o,t,i)=>{if(o&&typeof o==\"object\"||typeof o==\"function\")for(let r of x(o))!y.call(e,r)&&r!==t&&s(e,r,{get:()=>o[r],enumerable:!(i=f(o,r))||i.enumerable});return e};var b=(e,o,t)=>(t=e!=null?u(p(e)):{},a(o||!e||!e.__esModule?s(t,\"default\",{value:e,enumerable:!0}):t,e)),g=e=>a(s({},\"__esModule\",{value:!0}),e);var d=h((F,l)=>{l.exports=_jsx_runtime});var S={};w(S,{default:()=>m,frontmatter:()=>v});var n=b(d()),v={title:\"Have you played around with the new CSS Flexbox or Grid specs?\"};function c(e){let o={p:\"p\",...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o.p,{children:\"Flexbox is mainly meant for 1-dimensional layouts while Grid is meant for 2-dimensional layouts.\"}),`\n`,(0,n.jsx)(o.p,{children:\"Flexbox solves many common problems in CSS, such as vertical centering of elements within a container, sticky footer, etc. famous CSS frameworks like Bootstrap and Bulma are based on Flexbox, and Flexbox is still the tested and proven way to create a variety of layouts.\"}),`\n`,(0,n.jsx)(o.p,{children:\"Grid is meant for two-dimensional layouts, giving you full control over both rows and columns. It offers an intuitive and powerful way to create complex grid-based designs directly in CSS, often with less code and more flexibility than older techniques. Browser support for Grid is now strong across all major modern browsers, making it a solid option for layout design in most projects.\"})]})}function m(e={}){let{wrapper:o}=e.components||{};return o?(0,n.jsx)(o,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}return g(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/pt-BR.json b/apps/web/src/__generated__/questions/quiz/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/pt-BR.json
index d2309f69d..3e513b9d8 100644
--- a/apps/web/src/__generated__/questions/quiz/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var g=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),j=(e,o)=>{for(var n in o)t(e,n,{get:o[n],enumerable:!0})},i=(e,o,n,r)=>{if(o&&typeof o==\"object\"||typeof o==\"function\")for(let s of p(o))!b.call(e,s)&&s!==n&&t(e,s,{get:()=>o[s],enumerable:!(r=u(o,s))||r.enumerable});return e};var F=(e,o,n)=>(n=e!=null?l(x(e)):{},i(o||!e||!e.__esModule?t(n,\"default\",{value:e,enumerable:!0}):n,e)),f=e=>i(t({},\"__esModule\",{value:!0}),e);var m=g((C,d)=>{d.exports=_jsx_runtime});var y={};j(y,{default:()=>h,frontmatter:()=>v});var a=F(m()),v={title:\"Voc\\xEA j\\xE1 experimentou as novas especifica\\xE7\\xF5es CSS Flexbox ou Grid?\"};function c(e){let o=Object.assign({p:\"p\"},e.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(o.p,{children:\"Flexbox \\xE9 destinado principalmente para layouts unidimensionais, enquanto Grid \\xE9 destinado para layouts bidimensionais.\"}),`\n`,(0,a.jsx)(o.p,{children:\"Flexbox resolve muitos problemas comuns no CSS, como centraliza\\xE7\\xE3o vertical de elementos dentro de um cont\\xEAiner, rodap\\xE9 fixo, etc. Frameworks CSS famosos como Bootstrap e Bulma s\\xE3o baseados em Flexbox, e Flexbox ainda \\xE9 a maneira testada e comprovada de criar layouts.\"}),`\n`,(0,a.jsx)(o.p,{children:\"Grid \\xE9, de longe, a abordagem mais intuitiva para criar layouts baseados em grade, mas o suporte dos navegadores ainda n\\xE3o \\xE9 t\\xE3o amplo no momento. Muitos problemas de layout j\\xE1 podem ser resolvidos com Flexbox, ent\\xE3o n\\xE3o h\\xE1 uma grande necessidade do Grid.\"})]})}function _(e={}){let{wrapper:o}=e.components||{};return o?(0,a.jsx)(o,Object.assign({},e,{children:(0,a.jsx)(c,e)})):c(e)}var h=_;return f(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var f=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),g=(e,o)=>{for(var n in o)s(e,n,{get:o[n],enumerable:!0})},i=(e,o,n,r)=>{if(o&&typeof o==\"object\"||typeof o==\"function\")for(let t of x(o))!F.call(e,t)&&t!==n&&s(e,t,{get:()=>o[t],enumerable:!(r=p(o,t))||r.enumerable});return e};var j=(e,o,n)=>(n=e!=null?u(b(e)):{},i(o||!e||!e.__esModule?s(n,\"default\",{value:e,enumerable:!0}):n,e)),v=e=>i(s({},\"__esModule\",{value:!0}),e);var m=f((S,d)=>{d.exports=_jsx_runtime});var h={};g(h,{default:()=>l,frontmatter:()=>_});var a=j(m()),_={title:\"Voc\\xEA j\\xE1 experimentou as novas especifica\\xE7\\xF5es CSS Flexbox ou Grid?\"};function c(e){let o={p:\"p\",...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(o.p,{children:\"Flexbox \\xE9 destinado principalmente para layouts unidimensionais, enquanto Grid \\xE9 destinado para layouts bidimensionais.\"}),`\n`,(0,a.jsx)(o.p,{children:\"Flexbox resolve muitos problemas comuns no CSS, como centraliza\\xE7\\xE3o vertical de elementos dentro de um cont\\xEAiner, rodap\\xE9 fixo, etc. Frameworks CSS famosos como Bootstrap e Bulma s\\xE3o baseados em Flexbox, e Flexbox ainda \\xE9 a maneira testada e comprovada de criar layouts.\"}),`\n`,(0,a.jsx)(o.p,{children:\"Grid \\xE9, de longe, a abordagem mais intuitiva para criar layouts baseados em grade, mas o suporte dos navegadores ainda n\\xE3o \\xE9 t\\xE3o amplo no momento. Muitos problemas de layout j\\xE1 podem ser resolvidos com Flexbox, ent\\xE3o n\\xE3o h\\xE1 uma grande necessidade do Grid.\"})]})}function l(e={}){let{wrapper:o}=e.components||{};return o?(0,a.jsx)(o,{...e,children:(0,a.jsx)(c,{...e})}):c(e)}return v(h);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/zh-CN.json b/apps/web/src/__generated__/questions/quiz/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/zh-CN.json
index c7313b523..5018c0ef8 100644
--- a/apps/web/src/__generated__/questions/quiz/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var b=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),j=(t,n)=>{for(var o in n)s(t,o,{get:n[o],enumerable:!0})},c=(t,n,o,x)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of p(n))!S.call(t,r)&&r!==o&&s(t,r,{get:()=>n[r],enumerable:!(x=m(n,r))||x.enumerable});return t};var F=(t,n,o)=>(o=t!=null?d(u(t)):{},c(n||!t||!t.__esModule?s(o,\"default\",{value:t,enumerable:!0}):o,t)),_=t=>c(s({},\"__esModule\",{value:!0}),t);var a=b((M,i)=>{i.exports=_jsx_runtime});var g={};j(g,{default:()=>h,frontmatter:()=>C});var e=F(a()),C={title:\"\\u4F60\\u73A9\\u8FC7\\u65B0\\u7684 CSS Flexbox \\u6216 Grid \\u89C4\\u8303\\u5417\\uFF1F\"};function l(t){let n=Object.assign({p:\"p\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.p,{children:\"Flexbox \\u4E3B\\u8981\\u7528\\u4E8E\\u4E00\\u7EF4\\u5E03\\u5C40\\uFF0C\\u800C Grid \\u7528\\u4E8E\\u4E8C\\u7EF4\\u5E03\\u5C40\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"Flexbox \\u89E3\\u51B3\\u4E86 CSS \\u4E2D\\u7684\\u8BB8\\u591A\\u5E38\\u89C1\\u95EE\\u9898\\uFF0C\\u4F8B\\u5982\\u5728\\u5BB9\\u5668\\u5185\\u5782\\u76F4\\u5C45\\u4E2D\\u5143\\u7D20\\u3001\\u7C98\\u6027\\u9875\\u811A\\u7B49\\u3002\\u8457\\u540D\\u7684 CSS \\u6846\\u67B6\\uFF0C\\u5982 Bootstrap \\u548C Bulma\\uFF0C\\u90FD\\u57FA\\u4E8E Flexbox\\uFF0C\\u800C Flexbox \\u4ECD\\u7136\\u662F\\u521B\\u5EFA\\u5404\\u79CD\\u5E03\\u5C40\\u7684\\u7ECF\\u8FC7\\u6D4B\\u8BD5\\u548C\\u9A8C\\u8BC1\\u7684\\u65B9\\u6CD5\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"Grid \\u9002\\u7528\\u4E8E\\u4E8C\\u7EF4\\u5E03\\u5C40\\uFF0C\\u8BA9\\u60A8\\u53EF\\u4EE5\\u5B8C\\u5168\\u63A7\\u5236\\u884C\\u548C\\u5217\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u76F4\\u89C2\\u800C\\u5F3A\\u5927\\u7684\\u65B9\\u5F0F\\uFF0C\\u53EF\\u4EE5\\u76F4\\u63A5\\u5728 CSS \\u4E2D\\u521B\\u5EFA\\u590D\\u6742\\u7684\\u57FA\\u4E8E\\u7F51\\u683C\\u7684\\u8BBE\\u8BA1\\uFF0C\\u901A\\u5E38\\u6BD4\\u65E7\\u6280\\u672F\\u4F7F\\u7528\\u66F4\\u5C11\\u7684\\u4EE3\\u7801\\u548C\\u66F4\\u5927\\u7684\\u7075\\u6D3B\\u6027\\u3002\\u73B0\\u5728\\uFF0C\\u6240\\u6709\\u4E3B\\u8981\\u7684\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u90FD\\u5BF9 Grid \\u63D0\\u4F9B\\u4E86\\u5F3A\\u5927\\u7684\\u652F\\u6301\\uFF0C\\u8FD9\\u4F7F\\u5176\\u6210\\u4E3A\\u5927\\u591A\\u6570\\u9879\\u76EE\\u4E2D\\u5E03\\u5C40\\u8BBE\\u8BA1\\u7684\\u53EF\\u9760\\u9009\\u62E9\\u3002\"})]})}function f(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(l,t)})):l(t)}var h=f;return _(g);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var x=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var _=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),C=(t,n)=>{for(var o in n)x(t,o,{get:n[o],enumerable:!0})},c=(t,n,o,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of u(n))!F.call(t,r)&&r!==o&&x(t,r,{get:()=>n[r],enumerable:!(s=p(n,r))||s.enumerable});return t};var b=(t,n,o)=>(o=t!=null?m(S(t)):{},c(n||!t||!t.__esModule?x(o,\"default\",{value:t,enumerable:!0}):o,t)),f=t=>c(x({},\"__esModule\",{value:!0}),t);var l=_((M,i)=>{i.exports=_jsx_runtime});var j={};C(j,{default:()=>d,frontmatter:()=>h});var e=b(l()),h={title:\"\\u4F60\\u73A9\\u8FC7\\u65B0\\u7684 CSS Flexbox \\u6216 Grid \\u89C4\\u8303\\u5417\\uFF1F\"};function a(t){let n={p:\"p\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.p,{children:\"Flexbox \\u4E3B\\u8981\\u7528\\u4E8E\\u4E00\\u7EF4\\u5E03\\u5C40\\uFF0C\\u800C Grid \\u7528\\u4E8E\\u4E8C\\u7EF4\\u5E03\\u5C40\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"Flexbox \\u89E3\\u51B3\\u4E86 CSS \\u4E2D\\u7684\\u8BB8\\u591A\\u5E38\\u89C1\\u95EE\\u9898\\uFF0C\\u4F8B\\u5982\\u5728\\u5BB9\\u5668\\u5185\\u5782\\u76F4\\u5C45\\u4E2D\\u5143\\u7D20\\u3001\\u7C98\\u6027\\u9875\\u811A\\u7B49\\u3002\\u8457\\u540D\\u7684 CSS \\u6846\\u67B6\\uFF0C\\u5982 Bootstrap \\u548C Bulma\\uFF0C\\u90FD\\u57FA\\u4E8E Flexbox\\uFF0C\\u800C Flexbox \\u4ECD\\u7136\\u662F\\u521B\\u5EFA\\u5404\\u79CD\\u5E03\\u5C40\\u7684\\u7ECF\\u8FC7\\u6D4B\\u8BD5\\u548C\\u9A8C\\u8BC1\\u7684\\u65B9\\u6CD5\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"Grid \\u9002\\u7528\\u4E8E\\u4E8C\\u7EF4\\u5E03\\u5C40\\uFF0C\\u8BA9\\u60A8\\u53EF\\u4EE5\\u5B8C\\u5168\\u63A7\\u5236\\u884C\\u548C\\u5217\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u76F4\\u89C2\\u800C\\u5F3A\\u5927\\u7684\\u65B9\\u5F0F\\uFF0C\\u53EF\\u4EE5\\u76F4\\u63A5\\u5728 CSS \\u4E2D\\u521B\\u5EFA\\u590D\\u6742\\u7684\\u57FA\\u4E8E\\u7F51\\u683C\\u7684\\u8BBE\\u8BA1\\uFF0C\\u901A\\u5E38\\u6BD4\\u65E7\\u6280\\u672F\\u4F7F\\u7528\\u66F4\\u5C11\\u7684\\u4EE3\\u7801\\u548C\\u66F4\\u5927\\u7684\\u7075\\u6D3B\\u6027\\u3002\\u73B0\\u5728\\uFF0C\\u6240\\u6709\\u4E3B\\u8981\\u7684\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u90FD\\u5BF9 Grid \\u63D0\\u4F9B\\u4E86\\u5F3A\\u5927\\u7684\\u652F\\u6301\\uFF0C\\u8FD9\\u4F7F\\u5176\\u6210\\u4E3A\\u5927\\u591A\\u6570\\u9879\\u76EE\\u4E2D\\u5E03\\u5C40\\u8BBE\\u8BA1\\u7684\\u53EF\\u9760\\u9009\\u62E9\\u3002\"})]})}function d(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(a,{...t})}):a(t)}return f(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/en-US.json b/apps/web/src/__generated__/questions/quiz/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/en-US.json
index 3caa00c45..4fdafb6f0 100644
--- a/apps/web/src/__generated__/questions/quiz/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var n in e)i(t,n,{get:e[n],enumerable:!0})},s=(t,e,n,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!b.call(t,o)&&o!==n&&i(t,o,{get:()=>e[o],enumerable:!(r=l(e,o))||r.enumerable});return t};var j=(t,e,n)=>(n=t!=null?d(x(t)):{},s(e||!t||!t.__esModule?i(n,\"default\",{value:t,enumerable:!0}):n,t)),_=t=>s(i({},\"__esModule\",{value:!0}),t);var m=f((k,c)=>{c.exports=_jsx_runtime});var M={};g(M,{default:()=>C,frontmatter:()=>y});var a=j(m()),y={title:\"Have you used or implemented media queries or mobile-specific layouts/CSS?\"};function u(t){let e=Object.assign({p:\"p\"},t.components);return(0,a.jsx)(e.p,{children:\"An example would be transforming a stacked pill navigation into a fixed-bottom tab navigation beyond a certain breakpoint.\"})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,a.jsx)(e,Object.assign({},t,{children:(0,a.jsx)(u,t)})):u(t)}var C=v;return _(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var l=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var _=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var n in e)i(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of x(e))!b.call(t,o)&&o!==n&&i(t,o,{get:()=>e[o],enumerable:!(r=p(e,o))||r.enumerable});return t};var g=(t,e,n)=>(n=t!=null?l(f(t)):{},c(e||!t||!t.__esModule?i(n,\"default\",{value:t,enumerable:!0}):n,t)),j=t=>c(i({},\"__esModule\",{value:!0}),t);var s=_((h,m)=>{m.exports=_jsx_runtime});var C={};y(C,{default:()=>d,frontmatter:()=>v});var a=g(s()),v={title:\"Have you used or implemented media queries or mobile-specific layouts/CSS?\"};function u(t){let e={p:\"p\",...t.components};return(0,a.jsx)(e.p,{children:\"An example would be transforming a stacked pill navigation into a fixed-bottom tab navigation beyond a certain breakpoint.\"})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,a.jsx)(e,{...t,children:(0,a.jsx)(u,{...t})}):u(t)}return j(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/pt-BR.json b/apps/web/src/__generated__/questions/quiz/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/pt-BR.json
index 0a8d5a29e..7d79f3b76 100644
--- a/apps/web/src/__generated__/questions/quiz/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var j=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var o in t)a(e,o,{get:t[o],enumerable:!0})},i=(e,t,o,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let n of f(t))!x.call(e,n)&&n!==o&&a(e,n,{get:()=>t[n],enumerable:!(s=d(t,n))||s.enumerable});return e};var g=(e,t,o)=>(o=e!=null?p(l(e)):{},i(t||!e||!e.__esModule?a(o,\"default\",{value:e,enumerable:!0}):o,e)),v=e=>i(a({},\"__esModule\",{value:!0}),e);var u=j((D,m)=>{m.exports=_jsx_runtime});var M={};_(M,{default:()=>C,frontmatter:()=>b});var r=g(u()),b={title:\"Voc\\xEA usou ou implementou consultas de m\\xEDdia ou layouts/CSS espec\\xEDficos para dispositivos m\\xF3veis?\"};function c(e){let t=Object.assign({p:\"p\"},e.components);return(0,r.jsx)(t.p,{children:\"Um exemplo seria transformar uma navega\\xE7\\xE3o em forma de pilha em uma navega\\xE7\\xE3o de abas fixas na parte inferior, al\\xE9m de um determinado ponto de interrup\\xE7\\xE3o.\"})}function h(e={}){let{wrapper:t}=e.components||{};return t?(0,r.jsx)(t,Object.assign({},e,{children:(0,r.jsx)(c,e)})):c(e)}var C=h;return v(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var v=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),h=(e,o)=>{for(var t in o)a(e,t,{get:o[t],enumerable:!0})},s=(e,o,t,m)=>{if(o&&typeof o==\"object\"||typeof o==\"function\")for(let n of l(o))!_.call(e,n)&&n!==t&&a(e,n,{get:()=>o[n],enumerable:!(m=f(o,n))||m.enumerable});return e};var j=(e,o,t)=>(t=e!=null?d(x(e)):{},s(o||!e||!e.__esModule?a(t,\"default\",{value:e,enumerable:!0}):t,e)),C=e=>s(a({},\"__esModule\",{value:!0}),e);var u=v((D,i)=>{i.exports=_jsx_runtime});var g={};h(g,{default:()=>p,frontmatter:()=>M});var r=j(u()),M={title:\"Voc\\xEA usou ou implementou consultas de m\\xEDdia ou layouts/CSS espec\\xEDficos para dispositivos m\\xF3veis?\"};function c(e){let o={p:\"p\",...e.components};return(0,r.jsx)(o.p,{children:\"Um exemplo seria transformar uma navega\\xE7\\xE3o em forma de pilha em uma navega\\xE7\\xE3o de abas fixas na parte inferior, al\\xE9m de um determinado ponto de interrup\\xE7\\xE3o.\"})}function p(e={}){let{wrapper:o}=e.components||{};return o?(0,r.jsx)(o,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}return C(g);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/zh-CN.json b/apps/web/src/__generated__/questions/quiz/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/zh-CN.json
index b98fda311..cc67b56db 100644
--- a/apps/web/src/__generated__/questions/quiz/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var x=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var d=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),l=(t,n)=>{for(var e in n)r(t,e,{get:n[e],enumerable:!0})},i=(t,n,e,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of f(n))!_.call(t,o)&&o!==e&&r(t,o,{get:()=>n[o],enumerable:!(s=p(n,o))||s.enumerable});return t};var C=(t,n,e)=>(e=t!=null?x(j(t)):{},i(n||!t||!t.__esModule?r(e,\"default\",{value:t,enumerable:!0}):e,t)),M=t=>i(r({},\"__esModule\",{value:!0}),t);var m=d((S,a)=>{a.exports=_jsx_runtime});var D={};l(D,{default:()=>h,frontmatter:()=>b});var c=C(m()),b={title:\"\\u4F60\\u662F\\u5426\\u4F7F\\u7528\\u6216\\u5B9E\\u73B0\\u4E86\\u5A92\\u4F53\\u67E5\\u8BE2\\u6216\\u79FB\\u52A8\\u8BBE\\u5907\\u7279\\u5B9A\\u7684\\u5E03\\u5C40/CSS\\uFF1F\"};function u(t){let n=Object.assign({p:\"p\"},t.components);return(0,c.jsx)(n.p,{children:\"\\u4E00\\u4E2A\\u4F8B\\u5B50\\u662F\\u5C06\\u5806\\u53E0\\u7684\\u836F\\u4E38\\u5BFC\\u822A\\u8F6C\\u6362\\u4E3A\\u8D85\\u8FC7\\u67D0\\u4E2A\\u65AD\\u70B9\\u7684\\u56FA\\u5B9A\\u5E95\\u90E8\\u6807\\u7B7E\\u5BFC\\u822A\\u3002\"})}function g(t={}){let{wrapper:n}=t.components||{};return n?(0,c.jsx)(n,Object.assign({},t,{children:(0,c.jsx)(u,t)})):u(t)}var h=g;return M(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty;var j=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),C=(t,n)=>{for(var e in n)r(t,e,{get:n[e],enumerable:!0})},i=(t,n,e,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of _(n))!l.call(t,o)&&o!==e&&r(t,o,{get:()=>n[o],enumerable:!(s=f(n,o))||s.enumerable});return t};var M=(t,n,e)=>(e=t!=null?p(d(t)):{},i(n||!t||!t.__esModule?r(e,\"default\",{value:t,enumerable:!0}):e,t)),h=t=>i(r({},\"__esModule\",{value:!0}),t);var u=j((w,m)=>{m.exports=_jsx_runtime});var S={};C(S,{default:()=>a,frontmatter:()=>D});var c=M(u()),D={title:\"\\u4F60\\u662F\\u5426\\u4F7F\\u7528\\u6216\\u5B9E\\u73B0\\u4E86\\u5A92\\u4F53\\u67E5\\u8BE2\\u6216\\u79FB\\u52A8\\u8BBE\\u5907\\u7279\\u5B9A\\u7684\\u5E03\\u5C40/CSS\\uFF1F\"};function x(t){let n={p:\"p\",...t.components};return(0,c.jsx)(n.p,{children:\"\\u4E00\\u4E2A\\u4F8B\\u5B50\\u662F\\u5C06\\u5806\\u53E0\\u7684\\u836F\\u4E38\\u5BFC\\u822A\\u8F6C\\u6362\\u4E3A\\u8D85\\u8FC7\\u67D0\\u4E2A\\u65AD\\u70B9\\u7684\\u56FA\\u5B9A\\u5E95\\u90E8\\u6807\\u7B7E\\u5BFC\\u822A\\u3002\"})}function a(t={}){let{wrapper:n}=t.components||{};return n?(0,c.jsx)(n,{...t,children:(0,c.jsx)(x,{...t})}):x(t)}return h(S);})();\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 c187e24ff..b4b74b542 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-closures-be-used-to-create-private-variables/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),m=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},a=(t,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of f(e))!v.call(t,c)&&c!==r&&o(t,c,{get:()=>e[c],enumerable:!(i=d(e,c))||i.enumerable});return t};var b=(t,e,r)=>(r=t!=null?h(p(t)):{},a(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),C=t=>a(o({},\"__esModule\",{value:!0}),t);var s=g((w,l)=>{l.exports=_jsx_runtime});var T={};m(T,{default:()=>x,frontmatter:()=>j});var n=b(s()),j={title:\"How can closures be used to create private variables?\"};function u(t){let e=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",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:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Closures in JavaScript can be used to create private variables by defining a function within another function. The inner function has access to the outer function's variables, but those variables are not accessible from outside the outer function. This allows you to encapsulate and protect the variables from being accessed or modified directly.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function createCounter() {\n  let count = 0; // private variable\n\n  return {\n    increment: function () {\n      count++;\n      return count;\n    },\n    decrement: function () {\n      count--;\n      return count;\n    },\n    getCount: function () {\n      return count;\n    },\n  };\n}\n\nconst counter = createCounter();\nconsole.log(counter.increment()); // 1\nconsole.log(counter.getCount()); // 1\nconsole.log(counter.count); // undefined\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How can closures be used to create private variables?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Understanding closures\"}),`\n`,(0,n.jsx)(e.p,{children:\"A closure is a feature in JavaScript where an inner function has access to the outer (enclosing) function's variables. This includes:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Variables declared within the outer function's scope\"}),`\n`,(0,n.jsx)(e.li,{children:\"Parameters of the outer function\"}),`\n`,(0,n.jsx)(e.li,{children:\"Variables from the global scope\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Creating private variables\"}),`\n`,(0,n.jsx)(e.p,{children:\"To create private variables using closures, you can define a function that returns an object containing methods. These methods can access and modify the private variables, but the variables themselves are not accessible from outside the function.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here's a detailed example to illustrate how closures can be used to create private variables:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function createCounter() {\n  let count = 0; // private variable\n\n  return {\n    increment: function () {\n      count++;\n      return count;\n    },\n    decrement: function () {\n      count--;\n      return count;\n    },\n    getCount: function () {\n      return count;\n    },\n  };\n}\n\nconst counter = createCounter();\nconsole.log(counter.increment()); // 1\nconsole.log(counter.increment()); // 2\nconsole.log(counter.decrement()); // 1\nconsole.log(counter.getCount()); // 1\nconsole.log(counter.count); // undefined\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Explanation\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Outer function\"}),\": \",(0,n.jsx)(e.code,{children:\"createCounter\"}),\" is the outer function that defines a private variable \",(0,n.jsx)(e.code,{children:\"count\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Inner functions\"}),\": The object returned by \",(0,n.jsx)(e.code,{children:\"createCounter\"}),\" contains methods (\",(0,n.jsx)(e.code,{children:\"increment\"}),\", \",(0,n.jsx)(e.code,{children:\"decrement\"}),\", and \",(0,n.jsx)(e.code,{children:\"getCount\"}),\") that form closures. These methods have access to the \",(0,n.jsx)(e.code,{children:\"count\"}),\" variable.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Encapsulation\"}),\": The \",(0,n.jsx)(e.code,{children:\"count\"}),\" variable is not accessible directly from outside the \",(0,n.jsx)(e.code,{children:\"createCounter\"}),\" function. It can only be accessed and modified through the methods provided.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Encapsulation\"}),\": Private variables help in encapsulating the state and behavior of an object, preventing unintended interference.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Data integrity\"}),\": By restricting direct access to variables, you can ensure that they are modified only through controlled methods.\"]}),`\n`]}),`\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/Web/JavaScript/Closures\",children:\"MDN Web Docs: Closures\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/closure\",children:\"JavaScript.info: Closures\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://eloquentjavascript.net/03_functions.html#h_jxlmhe5yFI\",children:\"Eloquent JavaScript: Functions and Closures\"})}),`\n`]})]})}function y(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var x=y;return C(T);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var o=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},a=(t,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!m.call(t,c)&&c!==r&&o(t,c,{get:()=>e[c],enumerable:!(i=f(e,c))||i.enumerable});return t};var C=(t,e,r)=>(r=t!=null?d(v(t)):{},a(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),y=t=>a(o({},\"__esModule\",{value:!0}),t);var s=g((_,l)=>{l.exports=_jsx_runtime});var x={};b(x,{default:()=>h,frontmatter:()=>j});var n=C(s()),j={title:\"How can closures be used to create private variables?\"};function u(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Closures in JavaScript can be used to create private variables by defining a function within another function. The inner function has access to the outer function's variables, but those variables are not accessible from outside the outer function. This allows you to encapsulate and protect the variables from being accessed or modified directly.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function createCounter() {\n  let count = 0; // private variable\n\n  return {\n    increment: function () {\n      count++;\n      return count;\n    },\n    decrement: function () {\n      count--;\n      return count;\n    },\n    getCount: function () {\n      return count;\n    },\n  };\n}\n\nconst counter = createCounter();\nconsole.log(counter.increment()); // 1\nconsole.log(counter.getCount()); // 1\nconsole.log(counter.count); // undefined\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How can closures be used to create private variables?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Understanding closures\"}),`\n`,(0,n.jsx)(e.p,{children:\"A closure is a feature in JavaScript where an inner function has access to the outer (enclosing) function's variables. This includes:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Variables declared within the outer function's scope\"}),`\n`,(0,n.jsx)(e.li,{children:\"Parameters of the outer function\"}),`\n`,(0,n.jsx)(e.li,{children:\"Variables from the global scope\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Creating private variables\"}),`\n`,(0,n.jsx)(e.p,{children:\"To create private variables using closures, you can define a function that returns an object containing methods. These methods can access and modify the private variables, but the variables themselves are not accessible from outside the function.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here's a detailed example to illustrate how closures can be used to create private variables:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function createCounter() {\n  let count = 0; // private variable\n\n  return {\n    increment: function () {\n      count++;\n      return count;\n    },\n    decrement: function () {\n      count--;\n      return count;\n    },\n    getCount: function () {\n      return count;\n    },\n  };\n}\n\nconst counter = createCounter();\nconsole.log(counter.increment()); // 1\nconsole.log(counter.increment()); // 2\nconsole.log(counter.decrement()); // 1\nconsole.log(counter.getCount()); // 1\nconsole.log(counter.count); // undefined\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Explanation\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Outer function\"}),\": \",(0,n.jsx)(e.code,{children:\"createCounter\"}),\" is the outer function that defines a private variable \",(0,n.jsx)(e.code,{children:\"count\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Inner functions\"}),\": The object returned by \",(0,n.jsx)(e.code,{children:\"createCounter\"}),\" contains methods (\",(0,n.jsx)(e.code,{children:\"increment\"}),\", \",(0,n.jsx)(e.code,{children:\"decrement\"}),\", and \",(0,n.jsx)(e.code,{children:\"getCount\"}),\") that form closures. These methods have access to the \",(0,n.jsx)(e.code,{children:\"count\"}),\" variable.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Encapsulation\"}),\": The \",(0,n.jsx)(e.code,{children:\"count\"}),\" variable is not accessible directly from outside the \",(0,n.jsx)(e.code,{children:\"createCounter\"}),\" function. It can only be accessed and modified through the methods provided.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Encapsulation\"}),\": Private variables help in encapsulating the state and behavior of an object, preventing unintended interference.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Data integrity\"}),\": By restricting direct access to variables, you can ensure that they are modified only through controlled methods.\"]}),`\n`]}),`\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/Web/JavaScript/Closures\",children:\"MDN Web Docs: Closures\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/closure\",children:\"JavaScript.info: Closures\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://eloquentjavascript.net/03_functions.html#h_jxlmhe5yFI\",children:\"Eloquent JavaScript: Functions and Closures\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(u,{...t})}):u(t)}return y(x);})();\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/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-can-closures-be-used-to-create-private-variables/zh-CN.json
index ac127fa88..35aecaeac 100644
--- a/apps/web/src/__generated__/questions/quiz/how-can-closures-be-used-to-create-private-variables/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-can-closures-be-used-to-create-private-variables/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-closures-be-used-to-create-private-variables/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var o=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),C=(r,n)=>{for(var c in n)o(r,c,{get:n[c],enumerable:!0})},i=(r,n,c,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of g(n))!m.call(r,t)&&t!==c&&o(r,t,{get:()=>n[t],enumerable:!(l=a(n,t))||l.enumerable});return r};var v=(r,n,c)=>(c=r!=null?s(p(r)):{},i(n||!r||!r.__esModule?o(c,\"default\",{value:r,enumerable:!0}):c,r)),j=r=>i(o({},\"__esModule\",{value:!0}),r);var d=f((J,u)=>{u.exports=_jsx_runtime});var S={};C(S,{default:()=>b,frontmatter:()=>x});var e=v(d()),x={title:\"\\u5982\\u4F55\\u4F7F\\u7528\\u95ED\\u5305\\u521B\\u5EFA\\u79C1\\u6709\\u53D8\\u91CF\\uFF1F\"};function h(r){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",ol:\"ol\",strong:\"strong\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684\\u95ED\\u5305\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u4E2D\\u5B9A\\u4E49\\u4E00\\u4E2A\\u51FD\\u6570\\u6765\\u521B\\u5EFA\\u79C1\\u6709\\u53D8\\u91CF\\u3002\\u5185\\u90E8\\u51FD\\u6570\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5916\\u90E8\\u51FD\\u6570\\u7684\\u53D8\\u91CF\\uFF0C\\u4F46\\u8FD9\\u4E9B\\u53D8\\u91CF\\u65E0\\u6CD5\\u4ECE\\u5916\\u90E8\\u51FD\\u6570\\u5916\\u90E8\\u8BBF\\u95EE\\u3002\\u8FD9\\u5141\\u8BB8\\u60A8\\u5C01\\u88C5\\u548C\\u4FDD\\u62A4\\u53D8\\u91CF\\uFF0C\\u9632\\u6B62\\u5B83\\u4EEC\\u88AB\\u76F4\\u63A5\\u8BBF\\u95EE\\u6216\\u4FEE\\u6539\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function createCounter() {\n  let count = 0; // private variable\n\n  return {\n    increment: function () {\n      count++;\n      return count;\n    },\n    decrement: function () {\n      count--;\n      return count;\n    },\n    getCount: function () {\n      return count;\n    },\n  };\n}\n\nconst counter = createCounter();\nconsole.log(counter.increment()); // 1\nconsole.log(counter.getCount()); // 1\nconsole.log(counter.count); // undefined\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5982\\u4F55\\u4F7F\\u7528\\u95ED\\u5305\\u521B\\u5EFA\\u79C1\\u6709\\u53D8\\u91CF\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E86\\u89E3\\u95ED\\u5305\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u95ED\\u5305\\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u4E2A\\u7279\\u6027\\uFF0C\\u5176\\u4E2D\\u5185\\u90E8\\u51FD\\u6570\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5916\\u90E8\\uFF08\\u5C01\\u95ED\\uFF09\\u51FD\\u6570\\u7684\\u53D8\\u91CF\\u3002\\u8FD9\\u5305\\u62EC\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5728\\u5916\\u90E8\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\\u5185\\u58F0\\u660E\\u7684\\u53D8\\u91CF\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5916\\u90E8\\u51FD\\u6570\\u7684\\u53C2\\u6570\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u6765\\u81EA\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u7684\\u53D8\\u91CF\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u521B\\u5EFA\\u79C1\\u6709\\u53D8\\u91CF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8981\\u4F7F\\u7528\\u95ED\\u5305\\u521B\\u5EFA\\u79C1\\u6709\\u53D8\\u91CF\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5B9A\\u4E49\\u4E00\\u4E2A\\u8FD4\\u56DE\\u5305\\u542B\\u65B9\\u6CD5\\u7684\\u5BF9\\u8C61\\u7684\\u51FD\\u6570\\u3002\\u8FD9\\u4E9B\\u65B9\\u6CD5\\u53EF\\u4EE5\\u8BBF\\u95EE\\u548C\\u4FEE\\u6539\\u79C1\\u6709\\u53D8\\u91CF\\uFF0C\\u4F46\\u53D8\\u91CF\\u672C\\u8EAB\\u65E0\\u6CD5\\u4ECE\\u51FD\\u6570\\u5916\\u90E8\\u8BBF\\u95EE\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u8BE6\\u7EC6\\u7684\\u793A\\u4F8B\\uFF0C\\u8BF4\\u660E\\u5982\\u4F55\\u4F7F\\u7528\\u95ED\\u5305\\u521B\\u5EFA\\u79C1\\u6709\\u53D8\\u91CF\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function createCounter() {\n  let count = 0; // private variable\n\n  return {\n    increment: function () {\n      count++;\n      return count;\n    },\n    decrement: function () {\n      count--;\n      return count;\n    },\n    getCount: function () {\n      return count;\n    },\n  };\n}\n\nconst counter = createCounter();\nconsole.log(counter.increment()); // 1\nconsole.log(counter.increment()); // 2\nconsole.log(counter.decrement()); // 1\nconsole.log(counter.getCount()); // 1\nconsole.log(counter.count); // undefined\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u89E3\\u91CA\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5916\\u90E8\\u51FD\\u6570\"}),\"\\uFF1A\",(0,e.jsx)(n.code,{children:\"createCounter\"}),\" \\u662F\\u5B9A\\u4E49\\u79C1\\u6709\\u53D8\\u91CF \",(0,e.jsx)(n.code,{children:\"count\"}),\" \\u7684\\u5916\\u90E8\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5185\\u90E8\\u51FD\\u6570\"}),\"\\uFF1A\",(0,e.jsx)(n.code,{children:\"createCounter\"}),\" \\u8FD4\\u56DE\\u7684\\u5BF9\\u8C61\\u5305\\u542B\\u5F62\\u6210\\u95ED\\u5305\\u7684\\u65B9\\u6CD5\\uFF08\",(0,e.jsx)(n.code,{children:\"increment\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"decrement\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"getCount\"}),\"\\uFF09\\u3002\\u8FD9\\u4E9B\\u65B9\\u6CD5\\u53EF\\u4EE5\\u8BBF\\u95EE \",(0,e.jsx)(n.code,{children:\"count\"}),\" \\u53D8\\u91CF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C01\\u88C5\"}),\"\\uFF1A\",(0,e.jsx)(n.code,{children:\"count\"}),\" \\u53D8\\u91CF\\u65E0\\u6CD5\\u76F4\\u63A5\\u4ECE \",(0,e.jsx)(n.code,{children:\"createCounter\"}),\" \\u51FD\\u6570\\u5916\\u90E8\\u8BBF\\u95EE\\u3002\\u5B83\\u53EA\\u80FD\\u901A\\u8FC7\\u63D0\\u4F9B\\u7684\\u65B9\\u6CD5\\u8FDB\\u884C\\u8BBF\\u95EE\\u548C\\u4FEE\\u6539\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C01\\u88C5\"}),\"\\uFF1A\\u79C1\\u6709\\u53D8\\u91CF\\u6709\\u52A9\\u4E8E\\u5C01\\u88C5\\u5BF9\\u8C61\\u7684\\u72B6\\u6001\\u548C\\u884C\\u4E3A\\uFF0C\\u9632\\u6B62\\u610F\\u5916\\u5E72\\u6270\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6570\\u636E\\u5B8C\\u6574\\u6027\"}),\"\\uFF1A\\u901A\\u8FC7\\u9650\\u5236\\u5BF9\\u53D8\\u91CF\\u7684\\u76F4\\u63A5\\u8BBF\\u95EE\\uFF0C\\u60A8\\u53EF\\u4EE5\\u786E\\u4FDD\\u5B83\\u4EEC\\u4EC5\\u901A\\u8FC7\\u53D7\\u63A7\\u65B9\\u6CD5\\u8FDB\\u884C\\u4FEE\\u6539\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures\",children:\"MDN Web Docs: Closures\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/closure\",children:\"JavaScript.info: Closures\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/03_functions.html#h_jxlmhe5yFI\",children:\"Eloquent JavaScript: Functions and Closures\"})}),`\n`]})]})}function _(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(h,r)})):h(r)}var b=_;return j(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var a=Object.create;var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var C=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),v=(r,n)=>{for(var c in n)o(r,c,{get:n[c],enumerable:!0})},i=(r,n,c,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of p(n))!f.call(r,t)&&t!==c&&o(r,t,{get:()=>n[t],enumerable:!(l=g(n,t))||l.enumerable});return r};var j=(r,n,c)=>(c=r!=null?a(m(r)):{},i(n||!r||!r.__esModule?o(c,\"default\",{value:r,enumerable:!0}):c,r)),x=r=>i(o({},\"__esModule\",{value:!0}),r);var d=C((J,u)=>{u.exports=_jsx_runtime});var S={};v(S,{default:()=>s,frontmatter:()=>_});var e=j(d()),_={title:\"\\u5982\\u4F55\\u4F7F\\u7528\\u95ED\\u5305\\u521B\\u5EFA\\u79C1\\u6709\\u53D8\\u91CF\\uFF1F\"};function h(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684\\u95ED\\u5305\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u4E2D\\u5B9A\\u4E49\\u4E00\\u4E2A\\u51FD\\u6570\\u6765\\u521B\\u5EFA\\u79C1\\u6709\\u53D8\\u91CF\\u3002\\u5185\\u90E8\\u51FD\\u6570\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5916\\u90E8\\u51FD\\u6570\\u7684\\u53D8\\u91CF\\uFF0C\\u4F46\\u8FD9\\u4E9B\\u53D8\\u91CF\\u65E0\\u6CD5\\u4ECE\\u5916\\u90E8\\u51FD\\u6570\\u5916\\u90E8\\u8BBF\\u95EE\\u3002\\u8FD9\\u5141\\u8BB8\\u60A8\\u5C01\\u88C5\\u548C\\u4FDD\\u62A4\\u53D8\\u91CF\\uFF0C\\u9632\\u6B62\\u5B83\\u4EEC\\u88AB\\u76F4\\u63A5\\u8BBF\\u95EE\\u6216\\u4FEE\\u6539\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function createCounter() {\n  let count = 0; // private variable\n\n  return {\n    increment: function () {\n      count++;\n      return count;\n    },\n    decrement: function () {\n      count--;\n      return count;\n    },\n    getCount: function () {\n      return count;\n    },\n  };\n}\n\nconst counter = createCounter();\nconsole.log(counter.increment()); // 1\nconsole.log(counter.getCount()); // 1\nconsole.log(counter.count); // undefined\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5982\\u4F55\\u4F7F\\u7528\\u95ED\\u5305\\u521B\\u5EFA\\u79C1\\u6709\\u53D8\\u91CF\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E86\\u89E3\\u95ED\\u5305\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u95ED\\u5305\\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u4E2A\\u7279\\u6027\\uFF0C\\u5176\\u4E2D\\u5185\\u90E8\\u51FD\\u6570\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5916\\u90E8\\uFF08\\u5C01\\u95ED\\uFF09\\u51FD\\u6570\\u7684\\u53D8\\u91CF\\u3002\\u8FD9\\u5305\\u62EC\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5728\\u5916\\u90E8\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\\u5185\\u58F0\\u660E\\u7684\\u53D8\\u91CF\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5916\\u90E8\\u51FD\\u6570\\u7684\\u53C2\\u6570\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u6765\\u81EA\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u7684\\u53D8\\u91CF\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u521B\\u5EFA\\u79C1\\u6709\\u53D8\\u91CF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8981\\u4F7F\\u7528\\u95ED\\u5305\\u521B\\u5EFA\\u79C1\\u6709\\u53D8\\u91CF\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5B9A\\u4E49\\u4E00\\u4E2A\\u8FD4\\u56DE\\u5305\\u542B\\u65B9\\u6CD5\\u7684\\u5BF9\\u8C61\\u7684\\u51FD\\u6570\\u3002\\u8FD9\\u4E9B\\u65B9\\u6CD5\\u53EF\\u4EE5\\u8BBF\\u95EE\\u548C\\u4FEE\\u6539\\u79C1\\u6709\\u53D8\\u91CF\\uFF0C\\u4F46\\u53D8\\u91CF\\u672C\\u8EAB\\u65E0\\u6CD5\\u4ECE\\u51FD\\u6570\\u5916\\u90E8\\u8BBF\\u95EE\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u8BE6\\u7EC6\\u7684\\u793A\\u4F8B\\uFF0C\\u8BF4\\u660E\\u5982\\u4F55\\u4F7F\\u7528\\u95ED\\u5305\\u521B\\u5EFA\\u79C1\\u6709\\u53D8\\u91CF\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function createCounter() {\n  let count = 0; // private variable\n\n  return {\n    increment: function () {\n      count++;\n      return count;\n    },\n    decrement: function () {\n      count--;\n      return count;\n    },\n    getCount: function () {\n      return count;\n    },\n  };\n}\n\nconst counter = createCounter();\nconsole.log(counter.increment()); // 1\nconsole.log(counter.increment()); // 2\nconsole.log(counter.decrement()); // 1\nconsole.log(counter.getCount()); // 1\nconsole.log(counter.count); // undefined\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u89E3\\u91CA\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5916\\u90E8\\u51FD\\u6570\"}),\"\\uFF1A\",(0,e.jsx)(n.code,{children:\"createCounter\"}),\" \\u662F\\u5B9A\\u4E49\\u79C1\\u6709\\u53D8\\u91CF \",(0,e.jsx)(n.code,{children:\"count\"}),\" \\u7684\\u5916\\u90E8\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5185\\u90E8\\u51FD\\u6570\"}),\"\\uFF1A\",(0,e.jsx)(n.code,{children:\"createCounter\"}),\" \\u8FD4\\u56DE\\u7684\\u5BF9\\u8C61\\u5305\\u542B\\u5F62\\u6210\\u95ED\\u5305\\u7684\\u65B9\\u6CD5\\uFF08\",(0,e.jsx)(n.code,{children:\"increment\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"decrement\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"getCount\"}),\"\\uFF09\\u3002\\u8FD9\\u4E9B\\u65B9\\u6CD5\\u53EF\\u4EE5\\u8BBF\\u95EE \",(0,e.jsx)(n.code,{children:\"count\"}),\" \\u53D8\\u91CF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C01\\u88C5\"}),\"\\uFF1A\",(0,e.jsx)(n.code,{children:\"count\"}),\" \\u53D8\\u91CF\\u65E0\\u6CD5\\u76F4\\u63A5\\u4ECE \",(0,e.jsx)(n.code,{children:\"createCounter\"}),\" \\u51FD\\u6570\\u5916\\u90E8\\u8BBF\\u95EE\\u3002\\u5B83\\u53EA\\u80FD\\u901A\\u8FC7\\u63D0\\u4F9B\\u7684\\u65B9\\u6CD5\\u8FDB\\u884C\\u8BBF\\u95EE\\u548C\\u4FEE\\u6539\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C01\\u88C5\"}),\"\\uFF1A\\u79C1\\u6709\\u53D8\\u91CF\\u6709\\u52A9\\u4E8E\\u5C01\\u88C5\\u5BF9\\u8C61\\u7684\\u72B6\\u6001\\u548C\\u884C\\u4E3A\\uFF0C\\u9632\\u6B62\\u610F\\u5916\\u5E72\\u6270\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6570\\u636E\\u5B8C\\u6574\\u6027\"}),\"\\uFF1A\\u901A\\u8FC7\\u9650\\u5236\\u5BF9\\u53D8\\u91CF\\u7684\\u76F4\\u63A5\\u8BBF\\u95EE\\uFF0C\\u60A8\\u53EF\\u4EE5\\u786E\\u4FDD\\u5B83\\u4EEC\\u4EC5\\u901A\\u8FC7\\u53D7\\u63A7\\u65B9\\u6CD5\\u8FDB\\u884C\\u4FEE\\u6539\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures\",children:\"MDN Web Docs: Closures\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/closure\",children:\"JavaScript.info: Closures\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/03_functions.html#h_jxlmhe5yFI\",children:\"Eloquent JavaScript: Functions and Closures\"})}),`\n`]})]})}function s(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(h,{...r})}):h(r)}return x(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-can-you-avoid-problems-related-to-hoisting/en-US.json b/apps/web/src/__generated__/questions/quiz/how-can-you-avoid-problems-related-to-hoisting/en-US.json
index 01e5a9638..48de78c39 100644
--- a/apps/web/src/__generated__/questions/quiz/how-can-you-avoid-problems-related-to-hoisting/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-can-you-avoid-problems-related-to-hoisting/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-you-avoid-problems-related-to-hoisting/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),m=(o,e)=>{for(var t in e)r(o,t,{get:e[t],enumerable:!0})},c=(o,e,t,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!f.call(o,i)&&i!==t&&r(o,i,{get:()=>e[i],enumerable:!(l=u(e,i))||l.enumerable});return o};var v=(o,e,t)=>(t=o!=null?h(g(o)):{},c(e||!o||!o.__esModule?r(t,\"default\",{value:o,enumerable:!0}):t,o)),x=o=>c(r({},\"__esModule\",{value:!0}),o);var s=b((F,a)=>{a.exports=_jsx_runtime});var N={};m(N,{default:()=>w,frontmatter:()=>y});var n=v(s()),y={title:\"How can you avoid problems related to hoisting?\"};function d(o){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To avoid problems related to hoisting, always declare variables at the top of their scope using \",(0,n.jsx)(e.code,{children:\"let\"}),\" or \",(0,n.jsx)(e.code,{children:\"const\"}),\" instead of \",(0,n.jsx)(e.code,{children:\"var\"}),\". This ensures that variables are block-scoped and not hoisted to the top of their containing function or global scope. Additionally, declare functions before they are called to avoid issues with function hoisting.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Use let or const\nlet x = 10;\nconst y = 20;\nconsole.log(x, y); // Output: 10 20\n\n// Declare functions before calling them\nfunction myFunction() {\n  console.log('Hello, world!');\n}\nmyFunction(); // Output: 'Hello, world!'\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How can you avoid problems related to hoisting?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Understand hoisting\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hoisting is JavaScript's default behavior of moving declarations to the top of the current scope (script or function). This can lead to unexpected results if not properly managed.\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" instead of \",(0,n.jsx)(e.code,{children:\"var\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" are block-scoped, meaning they are only accessible within the block they are defined. This prevents them from being hoisted to the top of the function or global scope, reducing the risk of unexpected behavior.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(x); // undefined. (Hoisted but uninitialized, risk of unexpected behavior)\nconsole.log(y); // ReferenceError: Cannot access 'y' before initialization. (Not hoisted)\nconsole.log(z); // ReferenceError: Cannot access 'z' before initialization. (Not hoisted)\n\n// Avoid using var\nvar x = 10; // Hoisted to the top of the function or global scope\n\n// Use let or const\nlet y = 20; // Block-scoped, not hoisted to the top\nconst z = 30; // Block-scoped, not hoisted to the top\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Declare variables at the top of their scope\"}),`\n`,(0,n.jsx)(e.p,{children:\"To avoid confusion and potential errors, always declare your variables at the top of their scope. This makes it clear where the variables are coming from and ensures they are initialized before use.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function example() {\n  let a = 1;\n  const b = 2;\n\n  // Now use a and b\n  console.log(a + b);\n}\nexample(); // Output: 3\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Declare functions before calling them\"}),`\n`,(0,n.jsx)(e.p,{children:\"Function declarations are hoisted, but function expressions are not. To avoid issues, always declare functions before calling them.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Function declaration (hoisted)\nfunction myFunction() {\n  console.log('Hello, world!');\n}\nmyFunction(); // No issues here\n\n// Function expression (not hoisted)\nconst anotherFunction = function () {\n  console.log('Hello again!');\n};\nanotherFunction(); // No issues here\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Avoid using undeclared variables\"}),`\n`,(0,n.jsx)(e.p,{children:\"Using undeclared variables can lead to unexpected behavior due to hoisting. Always declare your variables before using them.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Avoid this\nfunction badExample() {\n  x = 10; // ReferenceError in strict mode\n  console.log(x);\n}\n\n// Do this instead\nfunction goodExample() {\n  let x = 10; // x is declared\n  console.log(x);\n}\n\ngoodExample();\nbadExample();\n`})}),`\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/Hoisting\",children:\"MDN Web Docs: Hoisting\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var\",children:\"MDN Web Docs: var\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let\",children:\"MDN Web Docs: let\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const\",children:\"MDN Web Docs: const\"})}),`\n`]})]})}function D(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(d,o)})):d(o)}var w=D;return x(N);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var b=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),v=(o,e)=>{for(var t in e)r(o,t,{get:e[t],enumerable:!0})},c=(o,e,t,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of f(e))!m.call(o,i)&&i!==t&&r(o,i,{get:()=>e[i],enumerable:!(l=p(e,i))||l.enumerable});return o};var x=(o,e,t)=>(t=o!=null?u(g(o)):{},c(e||!o||!o.__esModule?r(t,\"default\",{value:o,enumerable:!0}):t,o)),y=o=>c(r({},\"__esModule\",{value:!0}),o);var s=b((F,a)=>{a.exports=_jsx_runtime});var w={};v(w,{default:()=>h,frontmatter:()=>D});var n=x(s()),D={title:\"How can you avoid problems related to hoisting?\"};function d(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To avoid problems related to hoisting, always declare variables at the top of their scope using \",(0,n.jsx)(e.code,{children:\"let\"}),\" or \",(0,n.jsx)(e.code,{children:\"const\"}),\" instead of \",(0,n.jsx)(e.code,{children:\"var\"}),\". This ensures that variables are block-scoped and not hoisted to the top of their containing function or global scope. Additionally, declare functions before they are called to avoid issues with function hoisting.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Use let or const\nlet x = 10;\nconst y = 20;\nconsole.log(x, y); // Output: 10 20\n\n// Declare functions before calling them\nfunction myFunction() {\n  console.log('Hello, world!');\n}\nmyFunction(); // Output: 'Hello, world!'\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How can you avoid problems related to hoisting?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Understand hoisting\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hoisting is JavaScript's default behavior of moving declarations to the top of the current scope (script or function). This can lead to unexpected results if not properly managed.\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" instead of \",(0,n.jsx)(e.code,{children:\"var\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" are block-scoped, meaning they are only accessible within the block they are defined. This prevents them from being hoisted to the top of the function or global scope, reducing the risk of unexpected behavior.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(x); // undefined. (Hoisted but uninitialized, risk of unexpected behavior)\nconsole.log(y); // ReferenceError: Cannot access 'y' before initialization. (Not hoisted)\nconsole.log(z); // ReferenceError: Cannot access 'z' before initialization. (Not hoisted)\n\n// Avoid using var\nvar x = 10; // Hoisted to the top of the function or global scope\n\n// Use let or const\nlet y = 20; // Block-scoped, not hoisted to the top\nconst z = 30; // Block-scoped, not hoisted to the top\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Declare variables at the top of their scope\"}),`\n`,(0,n.jsx)(e.p,{children:\"To avoid confusion and potential errors, always declare your variables at the top of their scope. This makes it clear where the variables are coming from and ensures they are initialized before use.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function example() {\n  let a = 1;\n  const b = 2;\n\n  // Now use a and b\n  console.log(a + b);\n}\nexample(); // Output: 3\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Declare functions before calling them\"}),`\n`,(0,n.jsx)(e.p,{children:\"Function declarations are hoisted, but function expressions are not. To avoid issues, always declare functions before calling them.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Function declaration (hoisted)\nfunction myFunction() {\n  console.log('Hello, world!');\n}\nmyFunction(); // No issues here\n\n// Function expression (not hoisted)\nconst anotherFunction = function () {\n  console.log('Hello again!');\n};\nanotherFunction(); // No issues here\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Avoid using undeclared variables\"}),`\n`,(0,n.jsx)(e.p,{children:\"Using undeclared variables can lead to unexpected behavior due to hoisting. Always declare your variables before using them.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Avoid this\nfunction badExample() {\n  x = 10; // ReferenceError in strict mode\n  console.log(x);\n}\n\n// Do this instead\nfunction goodExample() {\n  let x = 10; // x is declared\n  console.log(x);\n}\n\ngoodExample();\nbadExample();\n`})}),`\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/Hoisting\",children:\"MDN Web Docs: Hoisting\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var\",children:\"MDN Web Docs: var\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let\",children:\"MDN Web Docs: let\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const\",children:\"MDN Web Docs: const\"})}),`\n`]})]})}function h(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(d,{...o})}):d(o)}return y(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-can-you-avoid-problems-related-to-hoisting/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-can-you-avoid-problems-related-to-hoisting/zh-CN.json
index 0a5d94980..1aa5c94ab 100644
--- a/apps/web/src/__generated__/questions/quiz/how-can-you-avoid-problems-related-to-hoisting/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-can-you-avoid-problems-related-to-hoisting/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-you-avoid-problems-related-to-hoisting/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var c in e)l(o,c,{get:e[c],enumerable:!0})},i=(o,e,c,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of p(e))!m.call(o,t)&&t!==c&&l(o,t,{get:()=>e[t],enumerable:!(r=u(e,t))||r.enumerable});return o};var v=(o,e,c)=>(c=o!=null?h(g(o)):{},i(e||!o||!o.__esModule?l(c,\"default\",{value:o,enumerable:!0}):c,o)),b=o=>i(l({},\"__esModule\",{value:!0}),o);var d=f((z,s)=>{s.exports=_jsx_runtime});var y={};x(y,{default:()=>j,frontmatter:()=>N});var n=v(d()),N={title:\"\\u5982\\u4F55\\u907F\\u514D\\u4E0E\\u53D8\\u91CF\\u63D0\\u5347\\u76F8\\u5173\\u7684\\u95EE\\u9898\\uFF1F\"};function a(o){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E3A\\u4E86\\u907F\\u514D\\u4E0E\\u53D8\\u91CF\\u63D0\\u5347\\u76F8\\u5173\\u7684\\u95EE\\u9898\\uFF0C\\u8BF7\\u59CB\\u7EC8\\u5728\\u4F5C\\u7528\\u57DF\\u9876\\u90E8\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u58F0\\u660E\\u53D8\\u91CF\\uFF0C\\u800C\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"var\"}),\"\\u3002 \\u8FD9\\u53EF\\u4EE5\\u786E\\u4FDD\\u53D8\\u91CF\\u662F\\u5757\\u4F5C\\u7528\\u57DF\\u7684\\uFF0C\\u5E76\\u4E14\\u4E0D\\u4F1A\\u88AB\\u63D0\\u5347\\u5230\\u5305\\u542B\\u51FD\\u6570\\u6216\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\u3002 \\u6B64\\u5916\\uFF0C\\u5728\\u8C03\\u7528\\u51FD\\u6570\\u4E4B\\u524D\\u58F0\\u660E\\u51FD\\u6570\\uFF0C\\u4EE5\\u907F\\u514D\\u51FD\\u6570\\u63D0\\u5347\\u95EE\\u9898\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Use let or const\nlet x = 10;\nconst y = 20;\nconsole.log(x, y); // Output: 10 20\n\n// Declare functions before calling them\nfunction myFunction() {\n  console.log('Hello, world!');\n}\nmyFunction(); // Output: 'Hello, world!'\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u907F\\u514D\\u4E0E\\u53D8\\u91CF\\u63D0\\u5347\\u76F8\\u5173\\u7684\\u95EE\\u9898\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E86\\u89E3\\u53D8\\u91CF\\u63D0\\u5347\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u53D8\\u91CF\\u63D0\\u5347\\u662F JavaScript \\u5C06\\u58F0\\u660E\\u79FB\\u81F3\\u5F53\\u524D\\u4F5C\\u7528\\u57DF\\uFF08\\u811A\\u672C\\u6216\\u51FD\\u6570\\uFF09\\u9876\\u90E8\\u7684\\u9ED8\\u8BA4\\u884C\\u4E3A\\u3002 \\u5982\\u679C\\u7BA1\\u7406\\u4E0D\\u5F53\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u610F\\u5916\\u7ED3\\u679C\\u3002\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u800C\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"var\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u662F\\u5757\\u4F5C\\u7528\\u57DF\\u7684\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4EEC\\u53EA\\u80FD\\u5728\\u5B9A\\u4E49\\u5B83\\u4EEC\\u7684\\u5757\\u4E2D\\u8BBF\\u95EE\\u3002 \\u8FD9\\u53EF\\u4EE5\\u9632\\u6B62\\u5B83\\u4EEC\\u88AB\\u63D0\\u5347\\u5230\\u51FD\\u6570\\u6216\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\uFF0C\\u4ECE\\u800C\\u964D\\u4F4E\\u610F\\u5916\\u884C\\u4E3A\\u7684\\u98CE\\u9669\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(x); // undefined. (Hoisted but uninitialized, risk of unexpected behavior)\nconsole.log(y); // ReferenceError: Cannot access 'y' before initialization. (Not hoisted)\nconsole.log(z); // ReferenceError: Cannot access 'z' before initialization. (Not hoisted)\n\n// Avoid using var\nvar x = 10; // Hoisted to the top of the function or global scope\n\n// Use let or const\nlet y = 20; // Block-scoped, not hoisted to the top\nconst z = 30; // Block-scoped, not hoisted to the top\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5728\\u53D8\\u91CF\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\u58F0\\u660E\\u53D8\\u91CF\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E3A\\u4E86\\u907F\\u514D\\u6DF7\\u6DC6\\u548C\\u6F5C\\u5728\\u7684\\u9519\\u8BEF\\uFF0C\\u8BF7\\u59CB\\u7EC8\\u5728\\u53D8\\u91CF\\u7684\\u4F5C\\u7528\\u57DF\\u9876\\u90E8\\u58F0\\u660E\\u53D8\\u91CF\\u3002 \\u8FD9\\u6837\\u53EF\\u4EE5\\u6E05\\u695A\\u5730\\u8BF4\\u660E\\u53D8\\u91CF\\u7684\\u6765\\u6E90\\uFF0C\\u5E76\\u786E\\u4FDD\\u5B83\\u4EEC\\u5728\\u4F7F\\u7528\\u524D\\u5DF2\\u521D\\u59CB\\u5316\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function example() {\n  let a = 1;\n  const b = 2;\n\n  // Now use a and b\n  console.log(a + b);\n}\nexample(); // Output: 3\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5728\\u8C03\\u7528\\u51FD\\u6570\\u4E4B\\u524D\\u58F0\\u660E\\u5B83\\u4EEC\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u51FD\\u6570\\u58F0\\u660E\\u4F1A\\u88AB\\u63D0\\u5347\\uFF0C\\u4F46\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u4E0D\\u4F1A\\u3002 \\u4E3A\\u4E86\\u907F\\u514D\\u51FA\\u73B0\\u95EE\\u9898\\uFF0C\\u8BF7\\u59CB\\u7EC8\\u5728\\u8C03\\u7528\\u51FD\\u6570\\u4E4B\\u524D\\u58F0\\u660E\\u5B83\\u4EEC\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Function declaration (hoisted)\nfunction myFunction() {\n  console.log('Hello, world!');\n}\nmyFunction(); // No issues here\n\n// Function expression (not hoisted)\nconst anotherFunction = function () {\n  console.log('Hello again!');\n};\nanotherFunction(); // No issues here\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u907F\\u514D\\u4F7F\\u7528\\u672A\\u58F0\\u660E\\u7684\\u53D8\\u91CF\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u7531\\u4E8E\\u53D8\\u91CF\\u63D0\\u5347\\uFF0C\\u4F7F\\u7528\\u672A\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u610F\\u5916\\u884C\\u4E3A\\u3002 \\u59CB\\u7EC8\\u5728\\u4F7F\\u7528\\u53D8\\u91CF\\u4E4B\\u524D\\u58F0\\u660E\\u5B83\\u4EEC\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Avoid this\nfunction badExample() {\n  x = 10; // ReferenceError in strict mode\n  console.log(x);\n}\n\n// Do this instead\nfunction goodExample() {\n  let x = 10; // x is declared\n  console.log(x);\n}\n\ngoodExample();\nbadExample();\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Hoisting\",children:\"MDN Web Docs: Hoisting\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var\",children:\"MDN Web Docs: var\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let\",children:\"MDN Web Docs: let\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const\",children:\"MDN Web Docs: const\"})}),`\n`]})]})}function D(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(a,o)})):a(o)}var j=D;return b(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),v=(o,e)=>{for(var c in e)t(o,c,{get:e[c],enumerable:!0})},i=(o,e,c,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of g(e))!f.call(o,l)&&l!==c&&t(o,l,{get:()=>e[l],enumerable:!(r=p(e,l))||r.enumerable});return o};var b=(o,e,c)=>(c=o!=null?u(m(o)):{},i(e||!o||!o.__esModule?t(c,\"default\",{value:o,enumerable:!0}):c,o)),N=o=>i(t({},\"__esModule\",{value:!0}),o);var d=x((j,s)=>{s.exports=_jsx_runtime});var y={};v(y,{default:()=>h,frontmatter:()=>D});var n=b(d()),D={title:\"\\u5982\\u4F55\\u907F\\u514D\\u4E0E\\u53D8\\u91CF\\u63D0\\u5347\\u76F8\\u5173\\u7684\\u95EE\\u9898\\uFF1F\"};function a(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E3A\\u4E86\\u907F\\u514D\\u4E0E\\u53D8\\u91CF\\u63D0\\u5347\\u76F8\\u5173\\u7684\\u95EE\\u9898\\uFF0C\\u8BF7\\u59CB\\u7EC8\\u5728\\u4F5C\\u7528\\u57DF\\u9876\\u90E8\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u58F0\\u660E\\u53D8\\u91CF\\uFF0C\\u800C\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"var\"}),\"\\u3002 \\u8FD9\\u53EF\\u4EE5\\u786E\\u4FDD\\u53D8\\u91CF\\u662F\\u5757\\u4F5C\\u7528\\u57DF\\u7684\\uFF0C\\u5E76\\u4E14\\u4E0D\\u4F1A\\u88AB\\u63D0\\u5347\\u5230\\u5305\\u542B\\u51FD\\u6570\\u6216\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\u3002 \\u6B64\\u5916\\uFF0C\\u5728\\u8C03\\u7528\\u51FD\\u6570\\u4E4B\\u524D\\u58F0\\u660E\\u51FD\\u6570\\uFF0C\\u4EE5\\u907F\\u514D\\u51FD\\u6570\\u63D0\\u5347\\u95EE\\u9898\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Use let or const\nlet x = 10;\nconst y = 20;\nconsole.log(x, y); // Output: 10 20\n\n// Declare functions before calling them\nfunction myFunction() {\n  console.log('Hello, world!');\n}\nmyFunction(); // Output: 'Hello, world!'\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u907F\\u514D\\u4E0E\\u53D8\\u91CF\\u63D0\\u5347\\u76F8\\u5173\\u7684\\u95EE\\u9898\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E86\\u89E3\\u53D8\\u91CF\\u63D0\\u5347\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u53D8\\u91CF\\u63D0\\u5347\\u662F JavaScript \\u5C06\\u58F0\\u660E\\u79FB\\u81F3\\u5F53\\u524D\\u4F5C\\u7528\\u57DF\\uFF08\\u811A\\u672C\\u6216\\u51FD\\u6570\\uFF09\\u9876\\u90E8\\u7684\\u9ED8\\u8BA4\\u884C\\u4E3A\\u3002 \\u5982\\u679C\\u7BA1\\u7406\\u4E0D\\u5F53\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u610F\\u5916\\u7ED3\\u679C\\u3002\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u800C\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"var\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u662F\\u5757\\u4F5C\\u7528\\u57DF\\u7684\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4EEC\\u53EA\\u80FD\\u5728\\u5B9A\\u4E49\\u5B83\\u4EEC\\u7684\\u5757\\u4E2D\\u8BBF\\u95EE\\u3002 \\u8FD9\\u53EF\\u4EE5\\u9632\\u6B62\\u5B83\\u4EEC\\u88AB\\u63D0\\u5347\\u5230\\u51FD\\u6570\\u6216\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\uFF0C\\u4ECE\\u800C\\u964D\\u4F4E\\u610F\\u5916\\u884C\\u4E3A\\u7684\\u98CE\\u9669\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(x); // undefined. (Hoisted but uninitialized, risk of unexpected behavior)\nconsole.log(y); // ReferenceError: Cannot access 'y' before initialization. (Not hoisted)\nconsole.log(z); // ReferenceError: Cannot access 'z' before initialization. (Not hoisted)\n\n// Avoid using var\nvar x = 10; // Hoisted to the top of the function or global scope\n\n// Use let or const\nlet y = 20; // Block-scoped, not hoisted to the top\nconst z = 30; // Block-scoped, not hoisted to the top\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5728\\u53D8\\u91CF\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\u58F0\\u660E\\u53D8\\u91CF\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E3A\\u4E86\\u907F\\u514D\\u6DF7\\u6DC6\\u548C\\u6F5C\\u5728\\u7684\\u9519\\u8BEF\\uFF0C\\u8BF7\\u59CB\\u7EC8\\u5728\\u53D8\\u91CF\\u7684\\u4F5C\\u7528\\u57DF\\u9876\\u90E8\\u58F0\\u660E\\u53D8\\u91CF\\u3002 \\u8FD9\\u6837\\u53EF\\u4EE5\\u6E05\\u695A\\u5730\\u8BF4\\u660E\\u53D8\\u91CF\\u7684\\u6765\\u6E90\\uFF0C\\u5E76\\u786E\\u4FDD\\u5B83\\u4EEC\\u5728\\u4F7F\\u7528\\u524D\\u5DF2\\u521D\\u59CB\\u5316\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function example() {\n  let a = 1;\n  const b = 2;\n\n  // Now use a and b\n  console.log(a + b);\n}\nexample(); // Output: 3\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5728\\u8C03\\u7528\\u51FD\\u6570\\u4E4B\\u524D\\u58F0\\u660E\\u5B83\\u4EEC\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u51FD\\u6570\\u58F0\\u660E\\u4F1A\\u88AB\\u63D0\\u5347\\uFF0C\\u4F46\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u4E0D\\u4F1A\\u3002 \\u4E3A\\u4E86\\u907F\\u514D\\u51FA\\u73B0\\u95EE\\u9898\\uFF0C\\u8BF7\\u59CB\\u7EC8\\u5728\\u8C03\\u7528\\u51FD\\u6570\\u4E4B\\u524D\\u58F0\\u660E\\u5B83\\u4EEC\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Function declaration (hoisted)\nfunction myFunction() {\n  console.log('Hello, world!');\n}\nmyFunction(); // No issues here\n\n// Function expression (not hoisted)\nconst anotherFunction = function () {\n  console.log('Hello again!');\n};\nanotherFunction(); // No issues here\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u907F\\u514D\\u4F7F\\u7528\\u672A\\u58F0\\u660E\\u7684\\u53D8\\u91CF\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u7531\\u4E8E\\u53D8\\u91CF\\u63D0\\u5347\\uFF0C\\u4F7F\\u7528\\u672A\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u610F\\u5916\\u884C\\u4E3A\\u3002 \\u59CB\\u7EC8\\u5728\\u4F7F\\u7528\\u53D8\\u91CF\\u4E4B\\u524D\\u58F0\\u660E\\u5B83\\u4EEC\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Avoid this\nfunction badExample() {\n  x = 10; // ReferenceError in strict mode\n  console.log(x);\n}\n\n// Do this instead\nfunction goodExample() {\n  let x = 10; // x is declared\n  console.log(x);\n}\n\ngoodExample();\nbadExample();\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Hoisting\",children:\"MDN Web Docs: Hoisting\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var\",children:\"MDN Web Docs: var\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let\",children:\"MDN Web Docs: let\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const\",children:\"MDN Web Docs: const\"})}),`\n`]})]})}function h(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(a,{...o})}):a(o)}return N(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-can-you-create-custom-error-objects/en-US.json b/apps/web/src/__generated__/questions/quiz/how-can-you-create-custom-error-objects/en-US.json
index 64d2519c6..1fe102aca 100644
--- a/apps/web/src/__generated__/questions/quiz/how-can-you-create-custom-error-objects/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-can-you-create-custom-error-objects/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-you-create-custom-error-objects/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var C=(o,r)=>()=>(r||o((r={exports:{}}).exports,r),r.exports),E=(o,r)=>{for(var s in r)t(o,s,{get:r[s],enumerable:!0})},a=(o,r,s,c)=>{if(r&&typeof r==\"object\"||typeof r==\"function\")for(let n of m(r))!p.call(o,n)&&n!==s&&t(o,n,{get:()=>r[n],enumerable:!(c=u(r,n))||c.enumerable});return o};var f=(o,r,s)=>(s=o!=null?d(g(o)):{},a(r||!o||!o.__esModule?t(s,\"default\",{value:o,enumerable:!0}):s,o)),x=o=>a(t({},\"__esModule\",{value:!0}),o);var l=C((T,i)=>{i.exports=_jsx_runtime});var w={};E(w,{default:()=>y,frontmatter:()=>b});var e=f(l()),b={title:\"How can you create custom error objects?\"};function h(o){let r=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(r.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(r.p,{children:[\"To create custom error objects in JavaScript, you can extend the built-in \",(0,e.jsx)(r.code,{children:\"Error\"}),\" class. This allows you to add custom properties and methods to your error objects. Here's a quick example:\"]}),`\n`,(0,e.jsx)(r.pre,{live:!0,children:(0,e.jsx)(r.code,{className:\"language-js\",children:`class CustomError extends Error {\n  constructor(message) {\n    super(message);\n    this.name = 'CustomError';\n  }\n}\n\ntry {\n  throw new CustomError('This is a custom error message');\n} catch (error) {\n  console.log(error.name); // CustomError\n  console.log(error.message); // This is a custom error message\n}\n`})}),`\n`,(0,e.jsx)(r.hr,{}),`\n`,(0,e.jsx)(r.h2,{children:\"How can you create custom error objects?\"}),`\n`,(0,e.jsxs)(r.h3,{children:[\"Extending the \",(0,e.jsx)(r.code,{children:\"Error\"}),\" class\"]}),`\n`,(0,e.jsxs)(r.p,{children:[\"To create a custom error object, you can extend the built-in \",(0,e.jsx)(r.code,{children:\"Error\"}),\" class. This allows you to inherit the properties and methods of the \",(0,e.jsx)(r.code,{children:\"Error\"}),\" class while adding your own custom properties and methods.\"]}),`\n`,(0,e.jsx)(r.pre,{children:(0,e.jsx)(r.code,{className:\"language-js\",children:`class CustomError extends Error {\n  constructor(message) {\n    super(message);\n    this.name = 'CustomError';\n  }\n}\n`})}),`\n`,(0,e.jsx)(r.h3,{children:\"Adding custom properties\"}),`\n`,(0,e.jsx)(r.p,{children:\"You can add custom properties to your custom error class to provide more context about the error.\"}),`\n`,(0,e.jsx)(r.pre,{live:!0,children:(0,e.jsx)(r.code,{className:\"language-js\",children:`class CustomError extends Error {\n  constructor(message, errorCode) {\n    super(message);\n    this.name = 'CustomError';\n    this.errorCode = errorCode;\n  }\n}\n\ntry {\n  throw new CustomError('This is a custom error message', 404);\n} catch (error) {\n  console.log(error.name); // CustomError\n  console.log(error.message); // This is a custom error message\n  console.log(error.errorCode); // 404\n}\n`})}),`\n`,(0,e.jsx)(r.h3,{children:\"Custom methods\"}),`\n`,(0,e.jsx)(r.p,{children:\"You can also add custom methods to your custom error class to handle specific error-related logic.\"}),`\n`,(0,e.jsx)(r.pre,{live:!0,children:(0,e.jsx)(r.code,{className:\"language-js\",children:`class CustomError extends Error {\n  constructor(message, errorCode) {\n    super(message);\n    this.name = 'CustomError';\n    this.errorCode = errorCode;\n  }\n\n  logError() {\n    console.error(\\`\\${this.name} [\\${this.errorCode}]: \\${this.message}\\`);\n  }\n}\n\ntry {\n  throw new CustomError('This is a custom error message', 404);\n} catch (error) {\n  error.logError(); // CustomError [404]: This is a custom error message\n}\n`})}),`\n`,(0,e.jsxs)(r.h3,{children:[\"Using \",(0,e.jsx)(r.code,{children:\"instanceof\"}),\" to check for custom errors\"]}),`\n`,(0,e.jsxs)(r.p,{children:[\"You can use the \",(0,e.jsx)(r.code,{children:\"instanceof\"}),\" operator to check if an error is an instance of your custom error class.\"]}),`\n`,(0,e.jsx)(r.pre,{live:!0,children:(0,e.jsx)(r.code,{className:\"language-js\",children:`class CustomError extends Error {\n  constructor(message, errorCode) {\n    super(message);\n    this.name = 'CustomError';\n    this.errorCode = errorCode;\n  }\n}\n\ntry {\n  throw new CustomError('This is a custom error message', 404);\n} catch (error) {\n  if (error instanceof CustomError) {\n    console.log('Caught a CustomError');\n  } else {\n    console.log('Caught a different type of error');\n  }\n}\n`})}),`\n`,(0,e.jsx)(r.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(r.ul,{children:[`\n`,(0,e.jsx)(r.li,{children:(0,e.jsx)(r.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error\",children:\"MDN Web Docs: Error\"})}),`\n`,(0,e.jsx)(r.li,{children:(0,e.jsx)(r.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#subclassing_built-in_classes\",children:\"MDN Web Docs: Extending built-in classes\"})}),`\n`,(0,e.jsx)(r.li,{children:(0,e.jsx)(r.a,{href:\"https://javascript.info/custom-errors\",children:\"JavaScript.info: Custom errors\"})}),`\n`]})]})}function j(o={}){let{wrapper:r}=o.components||{};return r?(0,e.jsx)(r,Object.assign({},o,{children:(0,e.jsx)(h,o)})):h(o)}var y=j;return x(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var E=(o,r)=>()=>(r||o((r={exports:{}}).exports,r),r.exports),f=(o,r)=>{for(var s in r)t(o,s,{get:r[s],enumerable:!0})},a=(o,r,s,c)=>{if(r&&typeof r==\"object\"||typeof r==\"function\")for(let n of g(r))!C.call(o,n)&&n!==s&&t(o,n,{get:()=>r[n],enumerable:!(c=m(r,n))||c.enumerable});return o};var x=(o,r,s)=>(s=o!=null?u(p(o)):{},a(r||!o||!o.__esModule?t(s,\"default\",{value:o,enumerable:!0}):s,o)),b=o=>a(t({},\"__esModule\",{value:!0}),o);var l=E((v,i)=>{i.exports=_jsx_runtime});var y={};f(y,{default:()=>d,frontmatter:()=>j});var e=x(l()),j={title:\"How can you create custom error objects?\"};function h(o){let r={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(r.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(r.p,{children:[\"To create custom error objects in JavaScript, you can extend the built-in \",(0,e.jsx)(r.code,{children:\"Error\"}),\" class. This allows you to add custom properties and methods to your error objects. Here's a quick example:\"]}),`\n`,(0,e.jsx)(r.pre,{live:!0,children:(0,e.jsx)(r.code,{className:\"language-js\",children:`class CustomError extends Error {\n  constructor(message) {\n    super(message);\n    this.name = 'CustomError';\n  }\n}\n\ntry {\n  throw new CustomError('This is a custom error message');\n} catch (error) {\n  console.log(error.name); // CustomError\n  console.log(error.message); // This is a custom error message\n}\n`})}),`\n`,(0,e.jsx)(r.hr,{}),`\n`,(0,e.jsx)(r.h2,{children:\"How can you create custom error objects?\"}),`\n`,(0,e.jsxs)(r.h3,{children:[\"Extending the \",(0,e.jsx)(r.code,{children:\"Error\"}),\" class\"]}),`\n`,(0,e.jsxs)(r.p,{children:[\"To create a custom error object, you can extend the built-in \",(0,e.jsx)(r.code,{children:\"Error\"}),\" class. This allows you to inherit the properties and methods of the \",(0,e.jsx)(r.code,{children:\"Error\"}),\" class while adding your own custom properties and methods.\"]}),`\n`,(0,e.jsx)(r.pre,{children:(0,e.jsx)(r.code,{className:\"language-js\",children:`class CustomError extends Error {\n  constructor(message) {\n    super(message);\n    this.name = 'CustomError';\n  }\n}\n`})}),`\n`,(0,e.jsx)(r.h3,{children:\"Adding custom properties\"}),`\n`,(0,e.jsx)(r.p,{children:\"You can add custom properties to your custom error class to provide more context about the error.\"}),`\n`,(0,e.jsx)(r.pre,{live:!0,children:(0,e.jsx)(r.code,{className:\"language-js\",children:`class CustomError extends Error {\n  constructor(message, errorCode) {\n    super(message);\n    this.name = 'CustomError';\n    this.errorCode = errorCode;\n  }\n}\n\ntry {\n  throw new CustomError('This is a custom error message', 404);\n} catch (error) {\n  console.log(error.name); // CustomError\n  console.log(error.message); // This is a custom error message\n  console.log(error.errorCode); // 404\n}\n`})}),`\n`,(0,e.jsx)(r.h3,{children:\"Custom methods\"}),`\n`,(0,e.jsx)(r.p,{children:\"You can also add custom methods to your custom error class to handle specific error-related logic.\"}),`\n`,(0,e.jsx)(r.pre,{live:!0,children:(0,e.jsx)(r.code,{className:\"language-js\",children:`class CustomError extends Error {\n  constructor(message, errorCode) {\n    super(message);\n    this.name = 'CustomError';\n    this.errorCode = errorCode;\n  }\n\n  logError() {\n    console.error(\\`\\${this.name} [\\${this.errorCode}]: \\${this.message}\\`);\n  }\n}\n\ntry {\n  throw new CustomError('This is a custom error message', 404);\n} catch (error) {\n  error.logError(); // CustomError [404]: This is a custom error message\n}\n`})}),`\n`,(0,e.jsxs)(r.h3,{children:[\"Using \",(0,e.jsx)(r.code,{children:\"instanceof\"}),\" to check for custom errors\"]}),`\n`,(0,e.jsxs)(r.p,{children:[\"You can use the \",(0,e.jsx)(r.code,{children:\"instanceof\"}),\" operator to check if an error is an instance of your custom error class.\"]}),`\n`,(0,e.jsx)(r.pre,{live:!0,children:(0,e.jsx)(r.code,{className:\"language-js\",children:`class CustomError extends Error {\n  constructor(message, errorCode) {\n    super(message);\n    this.name = 'CustomError';\n    this.errorCode = errorCode;\n  }\n}\n\ntry {\n  throw new CustomError('This is a custom error message', 404);\n} catch (error) {\n  if (error instanceof CustomError) {\n    console.log('Caught a CustomError');\n  } else {\n    console.log('Caught a different type of error');\n  }\n}\n`})}),`\n`,(0,e.jsx)(r.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(r.ul,{children:[`\n`,(0,e.jsx)(r.li,{children:(0,e.jsx)(r.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error\",children:\"MDN Web Docs: Error\"})}),`\n`,(0,e.jsx)(r.li,{children:(0,e.jsx)(r.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#subclassing_built-in_classes\",children:\"MDN Web Docs: Extending built-in classes\"})}),`\n`,(0,e.jsx)(r.li,{children:(0,e.jsx)(r.a,{href:\"https://javascript.info/custom-errors\",children:\"JavaScript.info: Custom errors\"})}),`\n`]})]})}function d(o={}){let{wrapper:r}=o.components||{};return r?(0,e.jsx)(r,{...o,children:(0,e.jsx)(h,{...o})}):h(o)}return b(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-can-you-create-custom-error-objects/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-can-you-create-custom-error-objects/zh-CN.json
index 056fd164f..32883d3d9 100644
--- a/apps/web/src/__generated__/questions/quiz/how-can-you-create-custom-error-objects/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-can-you-create-custom-error-objects/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-you-create-custom-error-objects/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var p=(n,r)=>()=>(r||n((r={exports:{}}).exports,r),r.exports),E=(n,r)=>{for(var o in r)c(n,o,{get:r[o],enumerable:!0})},a=(n,r,o,t)=>{if(r&&typeof r==\"object\"||typeof r==\"function\")for(let s of u(r))!C.call(n,s)&&s!==o&&c(n,s,{get:()=>r[s],enumerable:!(t=m(r,s))||t.enumerable});return n};var f=(n,r,o)=>(o=n!=null?d(g(n)):{},a(r||!n||!n.__esModule?c(o,\"default\",{value:n,enumerable:!0}):o,n)),x=n=>a(c({},\"__esModule\",{value:!0}),n);var l=p((T,i)=>{i.exports=_jsx_runtime});var _={};E(_,{default:()=>v,frontmatter:()=>j});var e=f(l()),j={title:\"\\u5982\\u4F55\\u521B\\u5EFA\\u81EA\\u5B9A\\u4E49\\u9519\\u8BEF\\u5BF9\\u8C61\\uFF1F\"};function h(n){let r=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(r.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(r.p,{children:[\"\\u8981\\u5728 JavaScript \\u4E2D\\u521B\\u5EFA\\u81EA\\u5B9A\\u4E49\\u9519\\u8BEF\\u5BF9\\u8C61\\uFF0C\\u60A8\\u53EF\\u4EE5\\u6269\\u5C55\\u5185\\u7F6E\\u7684 \",(0,e.jsx)(r.code,{children:\"Error\"}),\" \\u7C7B\\u3002 \\u8FD9\\u5141\\u8BB8\\u60A8\\u5411\\u9519\\u8BEF\\u5BF9\\u8C61\\u6DFB\\u52A0\\u81EA\\u5B9A\\u4E49\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002 \\u8FD9\\u662F\\u4E00\\u4E2A\\u5FEB\\u901F\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,e.jsx)(r.pre,{live:!0,children:(0,e.jsx)(r.code,{className:\"language-js\",children:`class CustomError extends Error {\n  constructor(message) {\n    super(message);\n    this.name = 'CustomError';\n  }\n}\n\ntry {\n  throw new CustomError('This is a custom error message');\n} catch (error) {\n  console.log(error.name); // CustomError\n  console.log(error.message); // This is a custom error message\n}\n`})}),`\n`,(0,e.jsx)(r.hr,{}),`\n`,(0,e.jsx)(r.h2,{children:\"\\u5982\\u4F55\\u521B\\u5EFA\\u81EA\\u5B9A\\u4E49\\u9519\\u8BEF\\u5BF9\\u8C61\\uFF1F\"}),`\n`,(0,e.jsxs)(r.h3,{children:[\"\\u6269\\u5C55 \",(0,e.jsx)(r.code,{children:\"Error\"}),\" \\u7C7B\"]}),`\n`,(0,e.jsxs)(r.p,{children:[\"\\u8981\\u521B\\u5EFA\\u81EA\\u5B9A\\u4E49\\u9519\\u8BEF\\u5BF9\\u8C61\\uFF0C\\u60A8\\u53EF\\u4EE5\\u6269\\u5C55\\u5185\\u7F6E\\u7684 \",(0,e.jsx)(r.code,{children:\"Error\"}),\" \\u7C7B\\u3002 \\u8FD9\\u5141\\u8BB8\\u60A8\\u7EE7\\u627F \",(0,e.jsx)(r.code,{children:\"Error\"}),\" \\u7C7B\\u7684\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\uFF0C\\u540C\\u65F6\\u6DFB\\u52A0\\u60A8\\u81EA\\u5DF1\\u7684\\u81EA\\u5B9A\\u4E49\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,e.jsx)(r.pre,{children:(0,e.jsx)(r.code,{className:\"language-js\",children:`class CustomError extends Error {\n  constructor(message) {\n    super(message);\n    this.name = 'CustomError';\n  }\n}\n`})}),`\n`,(0,e.jsx)(r.h3,{children:\"\\u6DFB\\u52A0\\u81EA\\u5B9A\\u4E49\\u5C5E\\u6027\"}),`\n`,(0,e.jsx)(r.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u5411\\u81EA\\u5B9A\\u4E49\\u9519\\u8BEF\\u7C7B\\u6DFB\\u52A0\\u81EA\\u5B9A\\u4E49\\u5C5E\\u6027\\uFF0C\\u4EE5\\u63D0\\u4F9B\\u6709\\u5173\\u9519\\u8BEF\\u7684\\u66F4\\u591A\\u4E0A\\u4E0B\\u6587\\u3002\"}),`\n`,(0,e.jsx)(r.pre,{live:!0,children:(0,e.jsx)(r.code,{className:\"language-js\",children:`class CustomError extends Error {\n  constructor(message, errorCode) {\n    super(message);\n    this.name = 'CustomError';\n    this.errorCode = errorCode;\n  }\n}\n\ntry {\n  throw new CustomError('This is a custom error message', 404);\n} catch (error) {\n  console.log(error.name); // CustomError\n  console.log(error.message); // This is a custom error message\n  console.log(error.errorCode); // 404\n}\n`})}),`\n`,(0,e.jsx)(r.h3,{children:\"\\u81EA\\u5B9A\\u4E49\\u65B9\\u6CD5\"}),`\n`,(0,e.jsx)(r.p,{children:\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u5411\\u81EA\\u5B9A\\u4E49\\u9519\\u8BEF\\u7C7B\\u6DFB\\u52A0\\u81EA\\u5B9A\\u4E49\\u65B9\\u6CD5\\u6765\\u5904\\u7406\\u7279\\u5B9A\\u7684\\u9519\\u8BEF\\u76F8\\u5173\\u903B\\u8F91\\u3002\"}),`\n`,(0,e.jsx)(r.pre,{live:!0,children:(0,e.jsx)(r.code,{className:\"language-js\",children:`class CustomError extends Error {\n  constructor(message, errorCode) {\n    super(message);\n    this.name = 'CustomError';\n    this.errorCode = errorCode;\n  }\n\n  logError() {\n    console.error(\\`\\${this.name} [\\${this.errorCode}]: \\${this.message}\\`);\n  }\n}\n\ntry {\n  throw new CustomError('This is a custom error message', 404);\n} catch (error) {\n  error.logError(); // CustomError [404]: This is a custom error message\n}\n`})}),`\n`,(0,e.jsxs)(r.h3,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(r.code,{children:\"instanceof\"}),\" \\u68C0\\u67E5\\u81EA\\u5B9A\\u4E49\\u9519\\u8BEF\"]}),`\n`,(0,e.jsxs)(r.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(r.code,{children:\"instanceof\"}),\" \\u8FD0\\u7B97\\u7B26\\u6765\\u68C0\\u67E5\\u9519\\u8BEF\\u662F\\u5426\\u662F\\u60A8\\u7684\\u81EA\\u5B9A\\u4E49\\u9519\\u8BEF\\u7C7B\\u7684\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,e.jsx)(r.pre,{live:!0,children:(0,e.jsx)(r.code,{className:\"language-js\",children:`class CustomError extends Error {\n  constructor(message, errorCode) {\n    super(message);\n    this.name = 'CustomError';\n    this.errorCode = errorCode;\n  }\n}\n\ntry {\n  throw new CustomError('This is a custom error message', 404);\n} catch (error) {\n  if (error instanceof CustomError) {\n    console.log('Caught a CustomError');\n  } else {\n    console.log('Caught a different type of error');\n  }\n}\n`})}),`\n`,(0,e.jsx)(r.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(r.ul,{children:[`\n`,(0,e.jsx)(r.li,{children:(0,e.jsx)(r.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error\",children:\"MDN Web Docs: Error\"})}),`\n`,(0,e.jsx)(r.li,{children:(0,e.jsx)(r.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#subclassing_built-in_classes\",children:\"MDN Web Docs: Extending built-in classes\"})}),`\n`,(0,e.jsx)(r.li,{children:(0,e.jsx)(r.a,{href:\"https://javascript.info/custom-errors\",children:\"JavaScript.info: Custom errors\"})}),`\n`]})]})}function b(n={}){let{wrapper:r}=n.components||{};return r?(0,e.jsx)(r,Object.assign({},n,{children:(0,e.jsx)(h,n)})):h(n)}var v=b;return x(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var E=(n,r)=>()=>(r||n((r={exports:{}}).exports,r),r.exports),f=(n,r)=>{for(var o in r)c(n,o,{get:r[o],enumerable:!0})},a=(n,r,o,t)=>{if(r&&typeof r==\"object\"||typeof r==\"function\")for(let s of g(r))!p.call(n,s)&&s!==o&&c(n,s,{get:()=>r[s],enumerable:!(t=u(r,s))||t.enumerable});return n};var x=(n,r,o)=>(o=n!=null?m(C(n)):{},a(r||!n||!n.__esModule?c(o,\"default\",{value:n,enumerable:!0}):o,n)),j=n=>a(c({},\"__esModule\",{value:!0}),n);var i=E((w,l)=>{l.exports=_jsx_runtime});var _={};f(_,{default:()=>d,frontmatter:()=>v});var e=x(i()),v={title:\"\\u5982\\u4F55\\u521B\\u5EFA\\u81EA\\u5B9A\\u4E49\\u9519\\u8BEF\\u5BF9\\u8C61\\uFF1F\"};function h(n){let r={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(r.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(r.p,{children:[\"\\u8981\\u5728 JavaScript \\u4E2D\\u521B\\u5EFA\\u81EA\\u5B9A\\u4E49\\u9519\\u8BEF\\u5BF9\\u8C61\\uFF0C\\u60A8\\u53EF\\u4EE5\\u6269\\u5C55\\u5185\\u7F6E\\u7684 \",(0,e.jsx)(r.code,{children:\"Error\"}),\" \\u7C7B\\u3002 \\u8FD9\\u5141\\u8BB8\\u60A8\\u5411\\u9519\\u8BEF\\u5BF9\\u8C61\\u6DFB\\u52A0\\u81EA\\u5B9A\\u4E49\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002 \\u8FD9\\u662F\\u4E00\\u4E2A\\u5FEB\\u901F\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,e.jsx)(r.pre,{live:!0,children:(0,e.jsx)(r.code,{className:\"language-js\",children:`class CustomError extends Error {\n  constructor(message) {\n    super(message);\n    this.name = 'CustomError';\n  }\n}\n\ntry {\n  throw new CustomError('This is a custom error message');\n} catch (error) {\n  console.log(error.name); // CustomError\n  console.log(error.message); // This is a custom error message\n}\n`})}),`\n`,(0,e.jsx)(r.hr,{}),`\n`,(0,e.jsx)(r.h2,{children:\"\\u5982\\u4F55\\u521B\\u5EFA\\u81EA\\u5B9A\\u4E49\\u9519\\u8BEF\\u5BF9\\u8C61\\uFF1F\"}),`\n`,(0,e.jsxs)(r.h3,{children:[\"\\u6269\\u5C55 \",(0,e.jsx)(r.code,{children:\"Error\"}),\" \\u7C7B\"]}),`\n`,(0,e.jsxs)(r.p,{children:[\"\\u8981\\u521B\\u5EFA\\u81EA\\u5B9A\\u4E49\\u9519\\u8BEF\\u5BF9\\u8C61\\uFF0C\\u60A8\\u53EF\\u4EE5\\u6269\\u5C55\\u5185\\u7F6E\\u7684 \",(0,e.jsx)(r.code,{children:\"Error\"}),\" \\u7C7B\\u3002 \\u8FD9\\u5141\\u8BB8\\u60A8\\u7EE7\\u627F \",(0,e.jsx)(r.code,{children:\"Error\"}),\" \\u7C7B\\u7684\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\uFF0C\\u540C\\u65F6\\u6DFB\\u52A0\\u60A8\\u81EA\\u5DF1\\u7684\\u81EA\\u5B9A\\u4E49\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,e.jsx)(r.pre,{children:(0,e.jsx)(r.code,{className:\"language-js\",children:`class CustomError extends Error {\n  constructor(message) {\n    super(message);\n    this.name = 'CustomError';\n  }\n}\n`})}),`\n`,(0,e.jsx)(r.h3,{children:\"\\u6DFB\\u52A0\\u81EA\\u5B9A\\u4E49\\u5C5E\\u6027\"}),`\n`,(0,e.jsx)(r.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u5411\\u81EA\\u5B9A\\u4E49\\u9519\\u8BEF\\u7C7B\\u6DFB\\u52A0\\u81EA\\u5B9A\\u4E49\\u5C5E\\u6027\\uFF0C\\u4EE5\\u63D0\\u4F9B\\u6709\\u5173\\u9519\\u8BEF\\u7684\\u66F4\\u591A\\u4E0A\\u4E0B\\u6587\\u3002\"}),`\n`,(0,e.jsx)(r.pre,{live:!0,children:(0,e.jsx)(r.code,{className:\"language-js\",children:`class CustomError extends Error {\n  constructor(message, errorCode) {\n    super(message);\n    this.name = 'CustomError';\n    this.errorCode = errorCode;\n  }\n}\n\ntry {\n  throw new CustomError('This is a custom error message', 404);\n} catch (error) {\n  console.log(error.name); // CustomError\n  console.log(error.message); // This is a custom error message\n  console.log(error.errorCode); // 404\n}\n`})}),`\n`,(0,e.jsx)(r.h3,{children:\"\\u81EA\\u5B9A\\u4E49\\u65B9\\u6CD5\"}),`\n`,(0,e.jsx)(r.p,{children:\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u5411\\u81EA\\u5B9A\\u4E49\\u9519\\u8BEF\\u7C7B\\u6DFB\\u52A0\\u81EA\\u5B9A\\u4E49\\u65B9\\u6CD5\\u6765\\u5904\\u7406\\u7279\\u5B9A\\u7684\\u9519\\u8BEF\\u76F8\\u5173\\u903B\\u8F91\\u3002\"}),`\n`,(0,e.jsx)(r.pre,{live:!0,children:(0,e.jsx)(r.code,{className:\"language-js\",children:`class CustomError extends Error {\n  constructor(message, errorCode) {\n    super(message);\n    this.name = 'CustomError';\n    this.errorCode = errorCode;\n  }\n\n  logError() {\n    console.error(\\`\\${this.name} [\\${this.errorCode}]: \\${this.message}\\`);\n  }\n}\n\ntry {\n  throw new CustomError('This is a custom error message', 404);\n} catch (error) {\n  error.logError(); // CustomError [404]: This is a custom error message\n}\n`})}),`\n`,(0,e.jsxs)(r.h3,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(r.code,{children:\"instanceof\"}),\" \\u68C0\\u67E5\\u81EA\\u5B9A\\u4E49\\u9519\\u8BEF\"]}),`\n`,(0,e.jsxs)(r.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(r.code,{children:\"instanceof\"}),\" \\u8FD0\\u7B97\\u7B26\\u6765\\u68C0\\u67E5\\u9519\\u8BEF\\u662F\\u5426\\u662F\\u60A8\\u7684\\u81EA\\u5B9A\\u4E49\\u9519\\u8BEF\\u7C7B\\u7684\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,e.jsx)(r.pre,{live:!0,children:(0,e.jsx)(r.code,{className:\"language-js\",children:`class CustomError extends Error {\n  constructor(message, errorCode) {\n    super(message);\n    this.name = 'CustomError';\n    this.errorCode = errorCode;\n  }\n}\n\ntry {\n  throw new CustomError('This is a custom error message', 404);\n} catch (error) {\n  if (error instanceof CustomError) {\n    console.log('Caught a CustomError');\n  } else {\n    console.log('Caught a different type of error');\n  }\n}\n`})}),`\n`,(0,e.jsx)(r.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(r.ul,{children:[`\n`,(0,e.jsx)(r.li,{children:(0,e.jsx)(r.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error\",children:\"MDN Web Docs: Error\"})}),`\n`,(0,e.jsx)(r.li,{children:(0,e.jsx)(r.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#subclassing_built-in_classes\",children:\"MDN Web Docs: Extending built-in classes\"})}),`\n`,(0,e.jsx)(r.li,{children:(0,e.jsx)(r.a,{href:\"https://javascript.info/custom-errors\",children:\"JavaScript.info: Custom errors\"})}),`\n`]})]})}function d(n={}){let{wrapper:r}=n.components||{};return r?(0,e.jsx)(r,{...n,children:(0,e.jsx)(h,{...n})}):h(n)}return j(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-can-you-implement-secure-authentication-and-authorization-in-javascript-applications/en-US.json b/apps/web/src/__generated__/questions/quiz/how-can-you-implement-secure-authentication-and-authorization-in-javascript-applications/en-US.json
index 991dda71a..ebc30eb4f 100644
--- a/apps/web/src/__generated__/questions/quiz/how-can-you-implement-secure-authentication-and-authorization-in-javascript-applications/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-can-you-implement-secure-authentication-and-authorization-in-javascript-applications/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-you-implement-secure-authentication-and-authorization-in-javascript-applications/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),k=(r,e)=>{for(var t in e)a(r,t,{get:e[t],enumerable:!0})},s=(r,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!m.call(r,o)&&o!==t&&a(r,o,{get:()=>e[o],enumerable:!(i=p(e,o))||i.enumerable});return r};var y=(r,e,t)=>(t=r!=null?h(g(r)):{},s(e||!r||!r.__esModule?a(t,\"default\",{value:r,enumerable:!0}):t,r)),S=r=>s(a({},\"__esModule\",{value:!0}),r);var l=f((v,c)=>{c.exports=_jsx_runtime});var j={};k(j,{default:()=>b,frontmatter:()=>w});var n=y(l()),w={title:\"How can you implement secure authentication and authorization in JavaScript applications?\"};function d(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To implement secure authentication and authorization in JavaScript applications, use HTTPS to encrypt data in transit, and store sensitive data like tokens securely using \",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" or \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\". Implement token-based authentication using JWTs, and validate tokens on the server side. Use libraries like OAuth for third-party authentication and ensure proper role-based access control (RBAC) for authorization.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How can you implement secure authentication and authorization in JavaScript applications?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Use HTTPS\"}),`\n`,(0,n.jsx)(e.p,{children:\"Ensure that your application uses HTTPS to encrypt data in transit. This prevents man-in-the-middle attacks and ensures that data exchanged between the client and server is secure.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Token-based authentication\"}),`\n`,(0,n.jsx)(e.p,{children:\"Use JSON Web Tokens (JWT) for token-based authentication. JWTs are compact, URL-safe tokens that can be used to securely transmit information between parties.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example of generating a JWT\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const jwt = require('jsonwebtoken');\n\nconst token = jwt.sign({ userId: 123 }, 'your-256-bit-secret', {\n  expiresIn: '1h',\n});\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Example of verifying a JWT\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const jwt = require('jsonwebtoken');\n\ntry {\n  const decoded = jwt.verify(token, 'your-256-bit-secret');\n  console.log(decoded);\n} catch (err) {\n  console.error('Invalid token');\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Secure storage\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Store sensitive data like tokens securely. Use \",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" or \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" for storing tokens, but be aware of their vulnerabilities. For more security, consider using HttpOnly cookies.\"]}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Example of storing a token in \",(0,n.jsx)(e.code,{children:\"localStorage\"})]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`localStorage.setItem('token', token);\n`})}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Example of retrieving a token from \",(0,n.jsx)(e.code,{children:\"localStorage\"})]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const token = localStorage.getItem('token');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Server-side validation\"}),`\n`,(0,n.jsx)(e.p,{children:\"Always validate tokens on the server side to ensure they are not tampered with. This adds an extra layer of security.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"OAuth for third-party authentication\"}),`\n`,(0,n.jsx)(e.p,{children:\"Use OAuth for third-party authentication. Libraries like Passport.js can simplify the implementation of OAuth in your application.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example of using Passport.js for Google OAuth\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const passport = require('passport');\nconst GoogleStrategy = require('passport-google-oauth20').Strategy;\n\npassport.use(\n  new GoogleStrategy(\n    {\n      clientID: 'YOUR_GOOGLE_CLIENT_ID',\n      clientSecret: 'YOUR_GOOGLE_CLIENT_SECRET',\n      callbackURL: 'http://www.example.com/auth/google/callback',\n    },\n    function (accessToken, refreshToken, profile, done) {\n      User.findOrCreate({ googleId: profile.id }, function (err, user) {\n        return done(err, user);\n      });\n    },\n  ),\n);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Role-based access control (RBAC)\"}),`\n`,(0,n.jsx)(e.p,{children:\"Implement role-based access control to ensure that users have the appropriate permissions to access resources.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example of RBAC middleware in Express.js\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function checkRole(role) {\n  return function (req, res, next) {\n    if (req.user && req.user.role === role) {\n      next();\n    } else {\n      res.status(403).send('Forbidden');\n    }\n  };\n}\n\n// Usage\napp.get('/admin', checkRole('admin'), (req, res) => {\n  res.send('Welcome, admin!');\n});\n`})}),`\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://jwt.io/\",children:\"JWT.io\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"http://www.passportjs.org/docs/\",children:\"Passport.js documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://owasp.org/www-project-secure-coding-practices/\",children:\"OWASP Secure Coding Practices\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Security/HTTP_strict_transport_security\",children:\"MDN Web Docs on HTTPS\"})}),`\n`]})]})}function T(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(d,r)})):d(r)}var b=T;return S(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var k=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),y=(r,e)=>{for(var t in e)a(r,t,{get:e[t],enumerable:!0})},s=(r,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of g(e))!f.call(r,o)&&o!==t&&a(r,o,{get:()=>e[o],enumerable:!(i=u(e,o))||i.enumerable});return r};var S=(r,e,t)=>(t=r!=null?p(m(r)):{},s(e||!r||!r.__esModule?a(t,\"default\",{value:r,enumerable:!0}):t,r)),w=r=>s(a({},\"__esModule\",{value:!0}),r);var l=k((x,c)=>{c.exports=_jsx_runtime});var b={};y(b,{default:()=>h,frontmatter:()=>T});var n=S(l()),T={title:\"How can you implement secure authentication and authorization in JavaScript applications?\"};function d(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To implement secure authentication and authorization in JavaScript applications, use HTTPS to encrypt data in transit, and store sensitive data like tokens securely using \",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" or \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\". Implement token-based authentication using JWTs, and validate tokens on the server side. Use libraries like OAuth for third-party authentication and ensure proper role-based access control (RBAC) for authorization.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How can you implement secure authentication and authorization in JavaScript applications?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Use HTTPS\"}),`\n`,(0,n.jsx)(e.p,{children:\"Ensure that your application uses HTTPS to encrypt data in transit. This prevents man-in-the-middle attacks and ensures that data exchanged between the client and server is secure.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Token-based authentication\"}),`\n`,(0,n.jsx)(e.p,{children:\"Use JSON Web Tokens (JWT) for token-based authentication. JWTs are compact, URL-safe tokens that can be used to securely transmit information between parties.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example of generating a JWT\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const jwt = require('jsonwebtoken');\n\nconst token = jwt.sign({ userId: 123 }, 'your-256-bit-secret', {\n  expiresIn: '1h',\n});\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Example of verifying a JWT\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const jwt = require('jsonwebtoken');\n\ntry {\n  const decoded = jwt.verify(token, 'your-256-bit-secret');\n  console.log(decoded);\n} catch (err) {\n  console.error('Invalid token');\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Secure storage\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Store sensitive data like tokens securely. Use \",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" or \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" for storing tokens, but be aware of their vulnerabilities. For more security, consider using HttpOnly cookies.\"]}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Example of storing a token in \",(0,n.jsx)(e.code,{children:\"localStorage\"})]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`localStorage.setItem('token', token);\n`})}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Example of retrieving a token from \",(0,n.jsx)(e.code,{children:\"localStorage\"})]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const token = localStorage.getItem('token');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Server-side validation\"}),`\n`,(0,n.jsx)(e.p,{children:\"Always validate tokens on the server side to ensure they are not tampered with. This adds an extra layer of security.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"OAuth for third-party authentication\"}),`\n`,(0,n.jsx)(e.p,{children:\"Use OAuth for third-party authentication. Libraries like Passport.js can simplify the implementation of OAuth in your application.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example of using Passport.js for Google OAuth\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const passport = require('passport');\nconst GoogleStrategy = require('passport-google-oauth20').Strategy;\n\npassport.use(\n  new GoogleStrategy(\n    {\n      clientID: 'YOUR_GOOGLE_CLIENT_ID',\n      clientSecret: 'YOUR_GOOGLE_CLIENT_SECRET',\n      callbackURL: 'http://www.example.com/auth/google/callback',\n    },\n    function (accessToken, refreshToken, profile, done) {\n      User.findOrCreate({ googleId: profile.id }, function (err, user) {\n        return done(err, user);\n      });\n    },\n  ),\n);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Role-based access control (RBAC)\"}),`\n`,(0,n.jsx)(e.p,{children:\"Implement role-based access control to ensure that users have the appropriate permissions to access resources.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example of RBAC middleware in Express.js\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function checkRole(role) {\n  return function (req, res, next) {\n    if (req.user && req.user.role === role) {\n      next();\n    } else {\n      res.status(403).send('Forbidden');\n    }\n  };\n}\n\n// Usage\napp.get('/admin', checkRole('admin'), (req, res) => {\n  res.send('Welcome, admin!');\n});\n`})}),`\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://jwt.io/\",children:\"JWT.io\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"http://www.passportjs.org/docs/\",children:\"Passport.js documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://owasp.org/www-project-secure-coding-practices/\",children:\"OWASP Secure Coding Practices\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Security/HTTP_strict_transport_security\",children:\"MDN Web Docs on HTTPS\"})}),`\n`]})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(d,{...r})}):d(r)}return w(b);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-can-you-implement-secure-authentication-and-authorization-in-javascript-applications/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-can-you-implement-secure-authentication-and-authorization-in-javascript-applications/zh-CN.json
index 9074147b2..3a116eef8 100644
--- a/apps/web/src/__generated__/questions/quiz/how-can-you-implement-secure-authentication-and-authorization-in-javascript-applications/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-can-you-implement-secure-authentication-and-authorization-in-javascript-applications/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-you-implement-secure-authentication-and-authorization-in-javascript-applications/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),S=(r,e)=>{for(var c in e)t(r,c,{get:e[c],enumerable:!0})},s=(r,e,c,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!j.call(r,o)&&o!==c&&t(r,o,{get:()=>e[o],enumerable:!(l=p(e,o))||l.enumerable});return r};var T=(r,e,c)=>(c=r!=null?d(g(r)):{},s(e||!r||!r.__esModule?t(c,\"default\",{value:r,enumerable:!0}):c,r)),f=r=>s(t({},\"__esModule\",{value:!0}),r);var a=m((b,i)=>{i.exports=_jsx_runtime});var _={};S(_,{default:()=>k,frontmatter:()=>w});var n=T(a()),w={title:\"\\u5982\\u4F55\\u5728 JavaScript \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u5B9E\\u73B0\\u5B89\\u5168\\u7684\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u548C\\u6388\\u6743\\uFF1F\"};function h(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u5728 JavaScript \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u5B9E\\u73B0\\u5B89\\u5168\\u7684\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u548C\\u6388\\u6743\\uFF0C\\u8BF7\\u4F7F\\u7528 HTTPS \\u52A0\\u5BC6\\u4F20\\u8F93\\u4E2D\\u7684\\u6570\\u636E\\uFF0C\\u5E76\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" \\u5B89\\u5168\\u5730\\u5B58\\u50A8\\u4EE4\\u724C\\u7B49\\u654F\\u611F\\u6570\\u636E\\u3002\\u4F7F\\u7528 JWT \\u5B9E\\u73B0\\u57FA\\u4E8E\\u4EE4\\u724C\\u7684\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\uFF0C\\u5E76\\u5728\\u670D\\u52A1\\u5668\\u7AEF\\u9A8C\\u8BC1\\u4EE4\\u724C\\u3002\\u4F7F\\u7528 OAuth \\u7B49\\u5E93\\u8FDB\\u884C\\u7B2C\\u4E09\\u65B9\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\uFF0C\\u5E76\\u786E\\u4FDD\\u4E3A\\u6388\\u6743\\u4F7F\\u7528\\u9002\\u5F53\\u7684\\u57FA\\u4E8E\\u89D2\\u8272\\u7684\\u8BBF\\u95EE\\u63A7\\u5236 (RBAC)\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u5728 JavaScript \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u5B9E\\u73B0\\u5B89\\u5168\\u7684\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u548C\\u6388\\u6743\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 HTTPS\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u786E\\u4FDD\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u4F7F\\u7528 HTTPS \\u52A0\\u5BC6\\u4F20\\u8F93\\u4E2D\\u7684\\u6570\\u636E\\u3002\\u8FD9\\u53EF\\u4EE5\\u9632\\u6B62\\u4E2D\\u95F4\\u4EBA\\u653B\\u51FB\\uFF0C\\u5E76\\u786E\\u4FDD\\u5BA2\\u6237\\u7AEF\\u548C\\u670D\\u52A1\\u5668\\u4E4B\\u95F4\\u4EA4\\u6362\\u7684\\u6570\\u636E\\u662F\\u5B89\\u5168\\u7684\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u57FA\\u4E8E\\u4EE4\\u724C\\u7684\\u8EAB\\u4EFD\\u9A8C\\u8BC1\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4F7F\\u7528 JSON Web \\u4EE4\\u724C (JWT) \\u8FDB\\u884C\\u57FA\\u4E8E\\u4EE4\\u724C\\u7684\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u3002JWT \\u662F\\u7D27\\u51D1\\u7684\\u3001URL \\u5B89\\u5168\\u7684\\u4EE4\\u724C\\uFF0C\\u53EF\\u7528\\u4E8E\\u5728\\u5404\\u65B9\\u4E4B\\u95F4\\u5B89\\u5168\\u5730\\u4F20\\u8F93\\u4FE1\\u606F\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u751F\\u6210 JWT \\u7684\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const jwt = require('jsonwebtoken');\n\nconst token = jwt.sign({ userId: 123 }, 'your-256-bit-secret', {\n  expiresIn: '1h',\n});\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u9A8C\\u8BC1 JWT \\u7684\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const jwt = require('jsonwebtoken');\n\ntry {\n  const decoded = jwt.verify(token, 'your-256-bit-secret');\n  console.log(decoded);\n} catch (err) {\n  console.error('Invalid token');\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B89\\u5168\\u5B58\\u50A8\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5B89\\u5168\\u5730\\u5B58\\u50A8\\u4EE4\\u724C\\u7B49\\u654F\\u611F\\u6570\\u636E\\u3002\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" \\u5B58\\u50A8\\u4EE4\\u724C\\uFF0C\\u4F46\\u8981\\u6CE8\\u610F\\u5B83\\u4EEC\\u5B58\\u5728\\u7684\\u6F0F\\u6D1E\\u3002\\u4E3A\\u4E86\\u63D0\\u9AD8\\u5B89\\u5168\\u6027\\uFF0C\\u8BF7\\u8003\\u8651\\u4F7F\\u7528 HttpOnly cookie\\u3002\"]}),`\n`,(0,n.jsxs)(e.h4,{children:[\"\\u5C06\\u4EE4\\u724C\\u5B58\\u50A8\\u5728 \",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u4E2D\\u7684\\u793A\\u4F8B\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`localStorage.setItem('token', token);\n`})}),`\n`,(0,n.jsxs)(e.h4,{children:[\"\\u4ECE \",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u68C0\\u7D22\\u4EE4\\u724C\\u7684\\u793A\\u4F8B\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const token = localStorage.getItem('token');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u670D\\u52A1\\u5668\\u7AEF\\u9A8C\\u8BC1\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u59CB\\u7EC8\\u5728\\u670D\\u52A1\\u5668\\u7AEF\\u9A8C\\u8BC1\\u4EE4\\u724C\\uFF0C\\u4EE5\\u786E\\u4FDD\\u5B83\\u4EEC\\u672A\\u88AB\\u7BE1\\u6539\\u3002\\u8FD9\\u589E\\u52A0\\u4E86\\u989D\\u5916\\u7684\\u5B89\\u5168\\u5C42\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7528\\u4E8E\\u7B2C\\u4E09\\u65B9\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u7684 OAuth\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4F7F\\u7528 OAuth \\u8FDB\\u884C\\u7B2C\\u4E09\\u65B9\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u3002\\u50CF Passport.js \\u8FD9\\u6837\\u7684\\u5E93\\u53EF\\u4EE5\\u7B80\\u5316\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D OAuth \\u7684\\u5B9E\\u73B0\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4F7F\\u7528 Passport.js \\u8FDB\\u884C Google OAuth \\u7684\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const passport = require('passport');\nconst GoogleStrategy = require('passport-google-oauth20').Strategy;\n\npassport.use(\n  new GoogleStrategy(\n    {\n      clientID: 'YOUR_GOOGLE_CLIENT_ID',\n      clientSecret: 'YOUR_GOOGLE_CLIENT_SECRET',\n      callbackURL: 'http://www.example.com/auth/google/callback',\n    },\n    function (accessToken, refreshToken, profile, done) {\n      User.findOrCreate({ googleId: profile.id }, function (err, user) {\n        return done(err, user);\n      });\n    },\n  ),\n);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u57FA\\u4E8E\\u89D2\\u8272\\u7684\\u8BBF\\u95EE\\u63A7\\u5236 (RBAC)\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5B9E\\u65BD\\u57FA\\u4E8E\\u89D2\\u8272\\u7684\\u8BBF\\u95EE\\u63A7\\u5236\\uFF0C\\u4EE5\\u786E\\u4FDD\\u7528\\u6237\\u62E5\\u6709\\u8BBF\\u95EE\\u8D44\\u6E90\\u7684\\u9002\\u5F53\\u6743\\u9650\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Express.js \\u4E2D RBAC \\u4E2D\\u95F4\\u4EF6\\u7684\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function checkRole(role) {\n  return function (req, res, next) {\n    if (req.user && req.user.role === role) {\n      next();\n    } else {\n      res.status(403).send('Forbidden');\n    }\n  };\n}\n\n// Usage\napp.get('/admin', checkRole('admin'), (req, res) => {\n  res.send('Welcome, admin!');\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jwt.io/\",children:\"JWT.io\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"http://www.passportjs.org/docs/\",children:\"Passport.js documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://owasp.org/www-project-secure-coding-practices/\",children:\"OWASP Secure Coding Practices\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Security/HTTP_strict_transport_security\",children:\"MDN Web Docs on HTTPS\"})}),`\n`]})]})}function O(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(h,r)})):h(r)}var k=O;return f(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var j=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),T=(r,e)=>{for(var c in e)t(r,c,{get:e[c],enumerable:!0})},s=(r,e,c,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of g(e))!S.call(r,o)&&o!==c&&t(r,o,{get:()=>e[o],enumerable:!(l=u(e,o))||l.enumerable});return r};var f=(r,e,c)=>(c=r!=null?p(m(r)):{},s(e||!r||!r.__esModule?t(c,\"default\",{value:r,enumerable:!0}):c,r)),w=r=>s(t({},\"__esModule\",{value:!0}),r);var h=j((x,i)=>{i.exports=_jsx_runtime});var _={};T(_,{default:()=>d,frontmatter:()=>k});var n=f(h()),k={title:\"\\u5982\\u4F55\\u5728 JavaScript \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u5B9E\\u73B0\\u5B89\\u5168\\u7684\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u548C\\u6388\\u6743\\uFF1F\"};function a(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u5728 JavaScript \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u5B9E\\u73B0\\u5B89\\u5168\\u7684\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u548C\\u6388\\u6743\\uFF0C\\u8BF7\\u4F7F\\u7528 HTTPS \\u52A0\\u5BC6\\u4F20\\u8F93\\u4E2D\\u7684\\u6570\\u636E\\uFF0C\\u5E76\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" \\u5B89\\u5168\\u5730\\u5B58\\u50A8\\u4EE4\\u724C\\u7B49\\u654F\\u611F\\u6570\\u636E\\u3002\\u4F7F\\u7528 JWT \\u5B9E\\u73B0\\u57FA\\u4E8E\\u4EE4\\u724C\\u7684\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\uFF0C\\u5E76\\u5728\\u670D\\u52A1\\u5668\\u7AEF\\u9A8C\\u8BC1\\u4EE4\\u724C\\u3002\\u4F7F\\u7528 OAuth \\u7B49\\u5E93\\u8FDB\\u884C\\u7B2C\\u4E09\\u65B9\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\uFF0C\\u5E76\\u786E\\u4FDD\\u4E3A\\u6388\\u6743\\u4F7F\\u7528\\u9002\\u5F53\\u7684\\u57FA\\u4E8E\\u89D2\\u8272\\u7684\\u8BBF\\u95EE\\u63A7\\u5236 (RBAC)\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u5728 JavaScript \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u5B9E\\u73B0\\u5B89\\u5168\\u7684\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u548C\\u6388\\u6743\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 HTTPS\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u786E\\u4FDD\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u4F7F\\u7528 HTTPS \\u52A0\\u5BC6\\u4F20\\u8F93\\u4E2D\\u7684\\u6570\\u636E\\u3002\\u8FD9\\u53EF\\u4EE5\\u9632\\u6B62\\u4E2D\\u95F4\\u4EBA\\u653B\\u51FB\\uFF0C\\u5E76\\u786E\\u4FDD\\u5BA2\\u6237\\u7AEF\\u548C\\u670D\\u52A1\\u5668\\u4E4B\\u95F4\\u4EA4\\u6362\\u7684\\u6570\\u636E\\u662F\\u5B89\\u5168\\u7684\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u57FA\\u4E8E\\u4EE4\\u724C\\u7684\\u8EAB\\u4EFD\\u9A8C\\u8BC1\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4F7F\\u7528 JSON Web \\u4EE4\\u724C (JWT) \\u8FDB\\u884C\\u57FA\\u4E8E\\u4EE4\\u724C\\u7684\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u3002JWT \\u662F\\u7D27\\u51D1\\u7684\\u3001URL \\u5B89\\u5168\\u7684\\u4EE4\\u724C\\uFF0C\\u53EF\\u7528\\u4E8E\\u5728\\u5404\\u65B9\\u4E4B\\u95F4\\u5B89\\u5168\\u5730\\u4F20\\u8F93\\u4FE1\\u606F\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u751F\\u6210 JWT \\u7684\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const jwt = require('jsonwebtoken');\n\nconst token = jwt.sign({ userId: 123 }, 'your-256-bit-secret', {\n  expiresIn: '1h',\n});\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u9A8C\\u8BC1 JWT \\u7684\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const jwt = require('jsonwebtoken');\n\ntry {\n  const decoded = jwt.verify(token, 'your-256-bit-secret');\n  console.log(decoded);\n} catch (err) {\n  console.error('Invalid token');\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B89\\u5168\\u5B58\\u50A8\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5B89\\u5168\\u5730\\u5B58\\u50A8\\u4EE4\\u724C\\u7B49\\u654F\\u611F\\u6570\\u636E\\u3002\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" \\u5B58\\u50A8\\u4EE4\\u724C\\uFF0C\\u4F46\\u8981\\u6CE8\\u610F\\u5B83\\u4EEC\\u5B58\\u5728\\u7684\\u6F0F\\u6D1E\\u3002\\u4E3A\\u4E86\\u63D0\\u9AD8\\u5B89\\u5168\\u6027\\uFF0C\\u8BF7\\u8003\\u8651\\u4F7F\\u7528 HttpOnly cookie\\u3002\"]}),`\n`,(0,n.jsxs)(e.h4,{children:[\"\\u5C06\\u4EE4\\u724C\\u5B58\\u50A8\\u5728 \",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u4E2D\\u7684\\u793A\\u4F8B\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`localStorage.setItem('token', token);\n`})}),`\n`,(0,n.jsxs)(e.h4,{children:[\"\\u4ECE \",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u68C0\\u7D22\\u4EE4\\u724C\\u7684\\u793A\\u4F8B\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const token = localStorage.getItem('token');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u670D\\u52A1\\u5668\\u7AEF\\u9A8C\\u8BC1\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u59CB\\u7EC8\\u5728\\u670D\\u52A1\\u5668\\u7AEF\\u9A8C\\u8BC1\\u4EE4\\u724C\\uFF0C\\u4EE5\\u786E\\u4FDD\\u5B83\\u4EEC\\u672A\\u88AB\\u7BE1\\u6539\\u3002\\u8FD9\\u589E\\u52A0\\u4E86\\u989D\\u5916\\u7684\\u5B89\\u5168\\u5C42\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7528\\u4E8E\\u7B2C\\u4E09\\u65B9\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u7684 OAuth\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4F7F\\u7528 OAuth \\u8FDB\\u884C\\u7B2C\\u4E09\\u65B9\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u3002\\u50CF Passport.js \\u8FD9\\u6837\\u7684\\u5E93\\u53EF\\u4EE5\\u7B80\\u5316\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D OAuth \\u7684\\u5B9E\\u73B0\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4F7F\\u7528 Passport.js \\u8FDB\\u884C Google OAuth \\u7684\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const passport = require('passport');\nconst GoogleStrategy = require('passport-google-oauth20').Strategy;\n\npassport.use(\n  new GoogleStrategy(\n    {\n      clientID: 'YOUR_GOOGLE_CLIENT_ID',\n      clientSecret: 'YOUR_GOOGLE_CLIENT_SECRET',\n      callbackURL: 'http://www.example.com/auth/google/callback',\n    },\n    function (accessToken, refreshToken, profile, done) {\n      User.findOrCreate({ googleId: profile.id }, function (err, user) {\n        return done(err, user);\n      });\n    },\n  ),\n);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u57FA\\u4E8E\\u89D2\\u8272\\u7684\\u8BBF\\u95EE\\u63A7\\u5236 (RBAC)\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5B9E\\u65BD\\u57FA\\u4E8E\\u89D2\\u8272\\u7684\\u8BBF\\u95EE\\u63A7\\u5236\\uFF0C\\u4EE5\\u786E\\u4FDD\\u7528\\u6237\\u62E5\\u6709\\u8BBF\\u95EE\\u8D44\\u6E90\\u7684\\u9002\\u5F53\\u6743\\u9650\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Express.js \\u4E2D RBAC \\u4E2D\\u95F4\\u4EF6\\u7684\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function checkRole(role) {\n  return function (req, res, next) {\n    if (req.user && req.user.role === role) {\n      next();\n    } else {\n      res.status(403).send('Forbidden');\n    }\n  };\n}\n\n// Usage\napp.get('/admin', checkRole('admin'), (req, res) => {\n  res.send('Welcome, admin!');\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jwt.io/\",children:\"JWT.io\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"http://www.passportjs.org/docs/\",children:\"Passport.js documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://owasp.org/www-project-secure-coding-practices/\",children:\"OWASP Secure Coding Practices\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Security/HTTP_strict_transport_security\",children:\"MDN Web Docs on HTTPS\"})}),`\n`]})]})}function d(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(a,{...r})}):a(r)}return w(_);})();\n;return Component;"
 }
\ No newline at end of file
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 465aee001..6d1955974 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-you-optimize-dom-manipulation-for-better-performance/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var o=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var i in e)o(t,i,{get:e[i],enumerable:!0})},l=(t,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!g.call(t,r)&&r!==i&&o(t,r,{get:()=>e[r],enumerable:!(a=h(e,r))||a.enumerable});return t};var b=(t,e,i)=>(i=t!=null?s(p(t)):{},l(e||!t||!t.__esModule?o(i,\"default\",{value:t,enumerable:!0}):i,t)),w=t=>l(o({},\"__esModule\",{value:!0}),t);var d=y((x,c)=>{c.exports=_jsx_runtime});var E={};f(E,{default:()=>M,frontmatter:()=>D});var n=b(d()),D={title:\"How can you optimize DOM manipulation for better performance?\"};function m(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:[\"To optimize DOM manipulation for better performance, minimize direct DOM access and updates. Use techniques like batching DOM changes, using \",(0,n.jsx)(e.code,{children:\"documentFragment\"}),\" for multiple elements, and leveraging virtual DOM libraries like React. Also, consider using \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" for animations and avoid layout thrashing by reading and writing DOM properties separately.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How can you optimize DOM manipulation for better performance?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Minimize direct DOM access\"}),`\n`,(0,n.jsx)(e.p,{children:\"Accessing the DOM is relatively slow, so try to minimize the number of times you read from or write to the DOM. Instead, store references to elements in variables and work with those.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Creating an element for the example below\nconst newElement = document.createElement('div');\nnewElement.id = 'myElement';\ndocument.body.appendChild(newElement);\n\nconst element = document.getElementById('myElement'); // Access once\n// Then use the reference to edit style\nelement.style.color = 'red';\nelement.style.backgroundColor = 'blue';\n\nconsole.log(document.body); // Notice the edits\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Batch DOM changes\"}),`\n`,(0,n.jsx)(e.p,{children:\"Instead of making multiple changes to the DOM one at a time, batch them together. This reduces the number of reflows and repaints.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Creating an element for the example below\nconst newElement = document.createElement('div');\nnewElement.id = 'myElement';\ndocument.body.appendChild(newElement);\n\nconst element = document.getElementById('myElement');\nelement.style.cssText = 'color: red; background-color: blue;';\n\nconsole.log(document.body); // Notice the edits\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"documentFragment\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"When adding multiple elements to the DOM, use a \",(0,n.jsx)(e.code,{children:\"documentFragment\"}),\" to minimize reflows and repaints.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const fragment = document.createDocumentFragment();\nfor (let i = 0; i < 100; i++) {\n  const newElement = document.createElement('div');\n  newElement.textContent = \\`Item \\${i}\\`;\n  fragment.appendChild(newElement);\n}\ndocument.body.appendChild(fragment);\n\nconsole.log(document.body); // Notice that the divs have been added\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Leverage virtual DOM libraries\"}),`\n`,(0,n.jsx)(e.p,{children:\"Libraries like React use a virtual DOM to batch updates and minimize direct DOM manipulation, which can significantly improve performance.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst App = () => (\n  <div>\n    <h1>Hello, world!</h1>\n  </div>\n);\n\nReactDOM.render(<App />, document.getElementById('root'));\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" for animations\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"For smoother animations, use \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" to ensure updates are synchronized with the browser's repaint cycle.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function animate() {\n  // Update animation state\n  requestAnimationFrame(animate);\n}\nrequestAnimationFrame(animate);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Avoid layout thrashing\"}),`\n`,(0,n.jsx)(e.p,{children:\"Layout thrashing occurs when you read and write to the DOM repeatedly in a way that forces the browser to recalculate styles and layout multiple times. To avoid this, separate read and write operations.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Creating an element for the example below\nconst newElement = document.createElement('div');\nnewElement.id = 'myElement';\ndocument.body.appendChild(newElement);\n\nconst element = document.getElementById('myElement');\nconst height = element.clientHeight; // Read\nelement.style.height = \\`\\${height + 10}px\\`; // Write\n`})}),`\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/Web/API/Document_Object_Model/Manipulating_the_DOM\",children:\"MDN Web Docs: DOM manipulation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing\",children:\"Google Developers: Avoid large, complex layouts and layout thrashing\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn\",children:\"React documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame\",children:\"MDN Web Docs: Using requestAnimationFrame\"})}),`\n`]})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(m,t)})):m(t)}var M=v;return w(E);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},l=(t,e,r,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!y.call(t,i)&&i!==r&&o(t,i,{get:()=>e[i],enumerable:!(a=u(e,i))||a.enumerable});return t};var b=(t,e,r)=>(r=t!=null?h(g(t)):{},l(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),D=t=>l(o({},\"__esModule\",{value:!0}),t);var d=f((O,c)=>{c.exports=_jsx_runtime});var M={};w(M,{default:()=>s,frontmatter:()=>v});var n=b(d()),v={title:\"How can you optimize DOM manipulation for better performance?\"};function m(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To optimize DOM manipulation for better performance, minimize direct DOM access and updates. Use techniques like batching DOM changes, using \",(0,n.jsx)(e.code,{children:\"documentFragment\"}),\" for multiple elements, and leveraging virtual DOM libraries like React. Also, consider using \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" for animations and avoid layout thrashing by reading and writing DOM properties separately.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How can you optimize DOM manipulation for better performance?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Minimize direct DOM access\"}),`\n`,(0,n.jsx)(e.p,{children:\"Accessing the DOM is relatively slow, so try to minimize the number of times you read from or write to the DOM. Instead, store references to elements in variables and work with those.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Creating an element for the example below\nconst newElement = document.createElement('div');\nnewElement.id = 'myElement';\ndocument.body.appendChild(newElement);\n\nconst element = document.getElementById('myElement'); // Access once\n// Then use the reference to edit style\nelement.style.color = 'red';\nelement.style.backgroundColor = 'blue';\n\nconsole.log(document.body); // Notice the edits\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Batch DOM changes\"}),`\n`,(0,n.jsx)(e.p,{children:\"Instead of making multiple changes to the DOM one at a time, batch them together. This reduces the number of reflows and repaints.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Creating an element for the example below\nconst newElement = document.createElement('div');\nnewElement.id = 'myElement';\ndocument.body.appendChild(newElement);\n\nconst element = document.getElementById('myElement');\nelement.style.cssText = 'color: red; background-color: blue;';\n\nconsole.log(document.body); // Notice the edits\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"documentFragment\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"When adding multiple elements to the DOM, use a \",(0,n.jsx)(e.code,{children:\"documentFragment\"}),\" to minimize reflows and repaints.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const fragment = document.createDocumentFragment();\nfor (let i = 0; i < 100; i++) {\n  const newElement = document.createElement('div');\n  newElement.textContent = \\`Item \\${i}\\`;\n  fragment.appendChild(newElement);\n}\ndocument.body.appendChild(fragment);\n\nconsole.log(document.body); // Notice that the divs have been added\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Leverage virtual DOM libraries\"}),`\n`,(0,n.jsx)(e.p,{children:\"Libraries like React use a virtual DOM to batch updates and minimize direct DOM manipulation, which can significantly improve performance.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst App = () => (\n  <div>\n    <h1>Hello, world!</h1>\n  </div>\n);\n\nReactDOM.render(<App />, document.getElementById('root'));\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" for animations\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"For smoother animations, use \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" to ensure updates are synchronized with the browser's repaint cycle.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function animate() {\n  // Update animation state\n  requestAnimationFrame(animate);\n}\nrequestAnimationFrame(animate);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Avoid layout thrashing\"}),`\n`,(0,n.jsx)(e.p,{children:\"Layout thrashing occurs when you read and write to the DOM repeatedly in a way that forces the browser to recalculate styles and layout multiple times. To avoid this, separate read and write operations.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Creating an element for the example below\nconst newElement = document.createElement('div');\nnewElement.id = 'myElement';\ndocument.body.appendChild(newElement);\n\nconst element = document.getElementById('myElement');\nconst height = element.clientHeight; // Read\nelement.style.height = \\`\\${height + 10}px\\`; // Write\n`})}),`\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/Web/API/Document_Object_Model/Manipulating_the_DOM\",children:\"MDN Web Docs: DOM manipulation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing\",children:\"Google Developers: Avoid large, complex layouts and layout thrashing\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn\",children:\"React documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame\",children:\"MDN Web Docs: Using requestAnimationFrame\"})}),`\n`]})]})}function s(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(m,{...t})}):m(t)}return D(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-can-you-optimize-dom-manipulation-for-better-performance/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-can-you-optimize-dom-manipulation-for-better-performance/zh-CN.json
index 9893a5ac6..94f35a885 100644
--- a/apps/web/src/__generated__/questions/quiz/how-can-you-optimize-dom-manipulation-for-better-performance/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-can-you-optimize-dom-manipulation-for-better-performance/zh-CN.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-you-optimize-dom-manipulation-for-better-performance/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=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})},d=(t,e,l,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!g.call(t,o)&&o!==l&&c(t,o,{get:()=>e[o],enumerable:!(r=s(e,o))||r.enumerable});return t};var y=(t,e,l)=>(l=t!=null?h(p(t)):{},d(e||!t||!t.__esModule?c(l,\"default\",{value:t,enumerable:!0}):l,t)),E=t=>d(c({},\"__esModule\",{value:!0}),t);var a=D((x,i)=>{i.exports=_jsx_runtime});var w={};M(w,{default:()=>f,frontmatter:()=>O});var n=y(a()),O={title:\"\\u5982\\u4F55\\u4F18\\u5316 DOM \\u64CD\\u4F5C\\u4EE5\\u83B7\\u5F97\\u66F4\\u597D\\u7684\\u6027\\u80FD\\uFF1F\"};function m(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:[\"\\u8981\\u4F18\\u5316 DOM \\u64CD\\u4F5C\\u4EE5\\u83B7\\u5F97\\u66F4\\u597D\\u7684\\u6027\\u80FD\\uFF0C\\u8BF7\\u5C3D\\u91CF\\u51CF\\u5C11\\u76F4\\u63A5\\u8BBF\\u95EE\\u548C\\u66F4\\u65B0 DOM\\u3002\\u4F7F\\u7528\\u8BF8\\u5982\\u6279\\u5904\\u7406 DOM \\u66F4\\u6539\\u3001\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"documentFragment\"}),\" \\u5904\\u7406\\u591A\\u4E2A\\u5143\\u7D20\\u4EE5\\u53CA\\u5229\\u7528 React \\u7B49\\u865A\\u62DF DOM \\u5E93\\u7B49\\u6280\\u672F\\u3002\\u6B64\\u5916\\uFF0C\\u8FD8\\u53EF\\u4EE5\\u8003\\u8651\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" \\u8FDB\\u884C\\u52A8\\u753B\\u5904\\u7406\\uFF0C\\u5E76\\u901A\\u8FC7\\u5206\\u522B\\u8BFB\\u53D6\\u548C\\u5199\\u5165 DOM \\u5C5E\\u6027\\u6765\\u907F\\u514D\\u5E03\\u5C40\\u6296\\u52A8\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u4F18\\u5316 DOM \\u64CD\\u4F5C\\u4EE5\\u83B7\\u5F97\\u66F4\\u597D\\u7684\\u6027\\u80FD\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5C3D\\u91CF\\u51CF\\u5C11\\u76F4\\u63A5 DOM \\u8BBF\\u95EE\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8BBF\\u95EE DOM \\u76F8\\u5BF9\\u8F83\\u6162\\uFF0C\\u56E0\\u6B64\\u8BF7\\u5C3D\\u91CF\\u51CF\\u5C11\\u4ECE DOM \\u8BFB\\u53D6\\u6216\\u5199\\u5165 DOM \\u7684\\u6B21\\u6570\\u3002\\u76F8\\u53CD\\uFF0C\\u5C06\\u5BF9\\u5143\\u7D20\\u7684\\u5F15\\u7528\\u5B58\\u50A8\\u5728\\u53D8\\u91CF\\u4E2D\\uFF0C\\u5E76\\u4F7F\\u7528\\u8FD9\\u4E9B\\u53D8\\u91CF\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Creating an element for the example below\nconst newElement = document.createElement('div');\nnewElement.id = 'myElement';\ndocument.body.appendChild(newElement);\n\nconst element = document.getElementById('myElement'); // Access once\n// Then use the reference to edit style\nelement.style.color = 'red';\nelement.style.backgroundColor = 'blue';\n\nconsole.log(document.body); // Notice the edits\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6279\\u5904\\u7406 DOM \\u66F4\\u6539\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E0D\\u8981\\u4E00\\u6B21\\u5BF9 DOM \\u8FDB\\u884C\\u591A\\u6B21\\u66F4\\u6539\\uFF0C\\u800C\\u662F\\u5C06\\u5B83\\u4EEC\\u6279\\u5904\\u7406\\u5728\\u4E00\\u8D77\\u3002\\u8FD9\\u51CF\\u5C11\\u4E86\\u91CD\\u6392\\u548C\\u91CD\\u7ED8\\u7684\\u6B21\\u6570\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Creating an element for the example below\nconst newElement = document.createElement('div');\nnewElement.id = 'myElement';\ndocument.body.appendChild(newElement);\n\nconst element = document.getElementById('myElement');\nelement.style.cssText = 'color: red; background-color: blue;';\n\nconsole.log(document.body); // Notice the edits\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"documentFragment\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5C06\\u591A\\u4E2A\\u5143\\u7D20\\u6DFB\\u52A0\\u5230 DOM \\u65F6\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"documentFragment\"}),\" \\u4EE5\\u6700\\u5927\\u9650\\u5EA6\\u5730\\u51CF\\u5C11\\u91CD\\u6392\\u548C\\u91CD\\u7ED8\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const fragment = document.createDocumentFragment();\nfor (let i = 0; i < 100; i++) {\n  const newElement = document.createElement('div');\n  newElement.textContent = \\`Item \\${i}\\`;\n  fragment.appendChild(newElement);\n}\ndocument.body.appendChild(fragment);\n\nconsole.log(document.body); // Notice that the divs have been added\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5229\\u7528\\u865A\\u62DF DOM \\u5E93\"}),`\n`,(0,n.jsx)(e.p,{children:\"React \\u7B49\\u5E93\\u4F7F\\u7528\\u865A\\u62DF DOM \\u6765\\u6279\\u5904\\u7406\\u66F4\\u65B0\\u5E76\\u6700\\u5927\\u9650\\u5EA6\\u5730\\u51CF\\u5C11\\u76F4\\u63A5 DOM \\u64CD\\u4F5C\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u663E\\u8457\\u63D0\\u9AD8\\u6027\\u80FD\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst App = () => (\n  <div>\n    <h1>Hello, world!</h1>\n  </div>\n);\n\nReactDOM.render(<App />, document.getElementById('root'));\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" \\u8FDB\\u884C\\u52A8\\u753B\\u5904\\u7406\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E3A\\u4E86\\u83B7\\u5F97\\u66F4\\u6D41\\u7545\\u7684\\u52A8\\u753B\\u6548\\u679C\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" \\u786E\\u4FDD\\u66F4\\u65B0\\u4E0E\\u6D4F\\u89C8\\u5668\\u7684\\u91CD\\u7ED8\\u5468\\u671F\\u540C\\u6B65\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function animate() {\n  // Update animation state\n  requestAnimationFrame(animate);\n}\nrequestAnimationFrame(animate);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u907F\\u514D\\u5E03\\u5C40\\u6296\\u52A8\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5F53\\u60A8\\u4EE5\\u8FEB\\u4F7F\\u6D4F\\u89C8\\u5668\\u591A\\u6B21\\u91CD\\u65B0\\u8BA1\\u7B97\\u6837\\u5F0F\\u548C\\u5E03\\u5C40\\u7684\\u65B9\\u5F0F\\u53CD\\u590D\\u8BFB\\u53D6\\u548C\\u5199\\u5165 DOM \\u65F6\\uFF0C\\u5C31\\u4F1A\\u53D1\\u751F\\u5E03\\u5C40\\u6296\\u52A8\\u3002\\u4E3A\\u907F\\u514D\\u8FD9\\u79CD\\u60C5\\u51B5\\uFF0C\\u8BF7\\u5C06\\u8BFB\\u53D6\\u548C\\u5199\\u5165\\u64CD\\u4F5C\\u5206\\u5F00\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Creating an element for the example below\nconst newElement = document.createElement('div');\nnewElement.id = 'myElement';\ndocument.body.appendChild(newElement);\n\nconst element = document.getElementById('myElement');\nconst height = element.clientHeight; // Read\nelement.style.height = \\`\\${height + 10}px\\`; // Write\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Document_Object_Model/Manipulating_the_DOM\",children:\"MDN Web Docs: DOM manipulation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing\",children:\"Google Developers: Avoid large, complex layouts and layout thrashing\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn\",children:\"React documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame\",children:\"MDN Web Docs: Using requestAnimationFrame\"})}),`\n`]})]})}function b(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(m,t)})):m(t)}var f=b;return E(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var M=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var l in e)r(t,l,{get:e[l],enumerable:!0})},d=(t,e,l,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!D.call(t,o)&&o!==l&&r(t,o,{get:()=>e[o],enumerable:!(c=u(e,o))||c.enumerable});return t};var E=(t,e,l)=>(l=t!=null?s(g(t)):{},d(e||!t||!t.__esModule?r(l,\"default\",{value:t,enumerable:!0}):l,t)),O=t=>d(r({},\"__esModule\",{value:!0}),t);var a=M((v,i)=>{i.exports=_jsx_runtime});var b={};y(b,{default:()=>h,frontmatter:()=>f});var n=E(a()),f={title:\"\\u5982\\u4F55\\u4F18\\u5316 DOM \\u64CD\\u4F5C\\u4EE5\\u83B7\\u5F97\\u66F4\\u597D\\u7684\\u6027\\u80FD\\uFF1F\"};function m(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u4F18\\u5316 DOM \\u64CD\\u4F5C\\u4EE5\\u83B7\\u5F97\\u66F4\\u597D\\u7684\\u6027\\u80FD\\uFF0C\\u8BF7\\u5C3D\\u91CF\\u51CF\\u5C11\\u76F4\\u63A5\\u8BBF\\u95EE\\u548C\\u66F4\\u65B0 DOM\\u3002\\u4F7F\\u7528\\u8BF8\\u5982\\u6279\\u5904\\u7406 DOM \\u66F4\\u6539\\u3001\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"documentFragment\"}),\" \\u5904\\u7406\\u591A\\u4E2A\\u5143\\u7D20\\u4EE5\\u53CA\\u5229\\u7528 React \\u7B49\\u865A\\u62DF DOM \\u5E93\\u7B49\\u6280\\u672F\\u3002\\u6B64\\u5916\\uFF0C\\u8FD8\\u53EF\\u4EE5\\u8003\\u8651\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" \\u8FDB\\u884C\\u52A8\\u753B\\u5904\\u7406\\uFF0C\\u5E76\\u901A\\u8FC7\\u5206\\u522B\\u8BFB\\u53D6\\u548C\\u5199\\u5165 DOM \\u5C5E\\u6027\\u6765\\u907F\\u514D\\u5E03\\u5C40\\u6296\\u52A8\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u4F18\\u5316 DOM \\u64CD\\u4F5C\\u4EE5\\u83B7\\u5F97\\u66F4\\u597D\\u7684\\u6027\\u80FD\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5C3D\\u91CF\\u51CF\\u5C11\\u76F4\\u63A5 DOM \\u8BBF\\u95EE\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8BBF\\u95EE DOM \\u76F8\\u5BF9\\u8F83\\u6162\\uFF0C\\u56E0\\u6B64\\u8BF7\\u5C3D\\u91CF\\u51CF\\u5C11\\u4ECE DOM \\u8BFB\\u53D6\\u6216\\u5199\\u5165 DOM \\u7684\\u6B21\\u6570\\u3002\\u76F8\\u53CD\\uFF0C\\u5C06\\u5BF9\\u5143\\u7D20\\u7684\\u5F15\\u7528\\u5B58\\u50A8\\u5728\\u53D8\\u91CF\\u4E2D\\uFF0C\\u5E76\\u4F7F\\u7528\\u8FD9\\u4E9B\\u53D8\\u91CF\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Creating an element for the example below\nconst newElement = document.createElement('div');\nnewElement.id = 'myElement';\ndocument.body.appendChild(newElement);\n\nconst element = document.getElementById('myElement'); // Access once\n// Then use the reference to edit style\nelement.style.color = 'red';\nelement.style.backgroundColor = 'blue';\n\nconsole.log(document.body); // Notice the edits\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6279\\u5904\\u7406 DOM \\u66F4\\u6539\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E0D\\u8981\\u4E00\\u6B21\\u5BF9 DOM \\u8FDB\\u884C\\u591A\\u6B21\\u66F4\\u6539\\uFF0C\\u800C\\u662F\\u5C06\\u5B83\\u4EEC\\u6279\\u5904\\u7406\\u5728\\u4E00\\u8D77\\u3002\\u8FD9\\u51CF\\u5C11\\u4E86\\u91CD\\u6392\\u548C\\u91CD\\u7ED8\\u7684\\u6B21\\u6570\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Creating an element for the example below\nconst newElement = document.createElement('div');\nnewElement.id = 'myElement';\ndocument.body.appendChild(newElement);\n\nconst element = document.getElementById('myElement');\nelement.style.cssText = 'color: red; background-color: blue;';\n\nconsole.log(document.body); // Notice the edits\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"documentFragment\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5C06\\u591A\\u4E2A\\u5143\\u7D20\\u6DFB\\u52A0\\u5230 DOM \\u65F6\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"documentFragment\"}),\" \\u4EE5\\u6700\\u5927\\u9650\\u5EA6\\u5730\\u51CF\\u5C11\\u91CD\\u6392\\u548C\\u91CD\\u7ED8\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const fragment = document.createDocumentFragment();\nfor (let i = 0; i < 100; i++) {\n  const newElement = document.createElement('div');\n  newElement.textContent = \\`Item \\${i}\\`;\n  fragment.appendChild(newElement);\n}\ndocument.body.appendChild(fragment);\n\nconsole.log(document.body); // Notice that the divs have been added\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5229\\u7528\\u865A\\u62DF DOM \\u5E93\"}),`\n`,(0,n.jsx)(e.p,{children:\"React \\u7B49\\u5E93\\u4F7F\\u7528\\u865A\\u62DF DOM \\u6765\\u6279\\u5904\\u7406\\u66F4\\u65B0\\u5E76\\u6700\\u5927\\u9650\\u5EA6\\u5730\\u51CF\\u5C11\\u76F4\\u63A5 DOM \\u64CD\\u4F5C\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u663E\\u8457\\u63D0\\u9AD8\\u6027\\u80FD\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst App = () => (\n  <div>\n    <h1>Hello, world!</h1>\n  </div>\n);\n\nReactDOM.render(<App />, document.getElementById('root'));\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" \\u8FDB\\u884C\\u52A8\\u753B\\u5904\\u7406\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E3A\\u4E86\\u83B7\\u5F97\\u66F4\\u6D41\\u7545\\u7684\\u52A8\\u753B\\u6548\\u679C\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" \\u786E\\u4FDD\\u66F4\\u65B0\\u4E0E\\u6D4F\\u89C8\\u5668\\u7684\\u91CD\\u7ED8\\u5468\\u671F\\u540C\\u6B65\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function animate() {\n  // Update animation state\n  requestAnimationFrame(animate);\n}\nrequestAnimationFrame(animate);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u907F\\u514D\\u5E03\\u5C40\\u6296\\u52A8\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5F53\\u60A8\\u4EE5\\u8FEB\\u4F7F\\u6D4F\\u89C8\\u5668\\u591A\\u6B21\\u91CD\\u65B0\\u8BA1\\u7B97\\u6837\\u5F0F\\u548C\\u5E03\\u5C40\\u7684\\u65B9\\u5F0F\\u53CD\\u590D\\u8BFB\\u53D6\\u548C\\u5199\\u5165 DOM \\u65F6\\uFF0C\\u5C31\\u4F1A\\u53D1\\u751F\\u5E03\\u5C40\\u6296\\u52A8\\u3002\\u4E3A\\u907F\\u514D\\u8FD9\\u79CD\\u60C5\\u51B5\\uFF0C\\u8BF7\\u5C06\\u8BFB\\u53D6\\u548C\\u5199\\u5165\\u64CD\\u4F5C\\u5206\\u5F00\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Creating an element for the example below\nconst newElement = document.createElement('div');\nnewElement.id = 'myElement';\ndocument.body.appendChild(newElement);\n\nconst element = document.getElementById('myElement');\nconst height = element.clientHeight; // Read\nelement.style.height = \\`\\${height + 10}px\\`; // Write\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Document_Object_Model/Manipulating_the_DOM\",children:\"MDN Web Docs: DOM manipulation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing\",children:\"Google Developers: Avoid large, complex layouts and layout thrashing\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn\",children:\"React documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame\",children:\"MDN Web Docs: Using requestAnimationFrame\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(m,{...t})}):m(t)}return O(b);})();\n;return Component;"
 }
\ No newline at end of file
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 bd8751b65..08bff45d8 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-you-optimize-network-requests-for-better-performance/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),b=(r,e)=>{for(var i in e)t(r,i,{get:e[i],enumerable:!0})},c=(r,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!u.call(r,o)&&o!==i&&t(r,o,{get:()=>e[o],enumerable:!(s=m(e,o))||s.enumerable});return r};var v=(r,e,i)=>(i=r!=null?h(g(r)):{},c(e||!r||!r.__esModule?t(i,\"default\",{value:r,enumerable:!0}):i,r)),y=r=>c(t({},\"__esModule\",{value:!0}),r);var a=f((k,l)=>{l.exports=_jsx_runtime});var S={};b(S,{default:()=>C,frontmatter:()=>w});var n=v(a()),w={title:\"How can you optimize network requests for better performance?\"};function d(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To optimize network requests for better performance, you can minimize the number of requests, use caching, compress data, and leverage modern web technologies like HTTP/2 and service workers. For example, you can combine multiple CSS files into one to reduce the number of requests, use \",(0,n.jsx)(e.code,{children:\"Cache-Control\"}),\" headers to cache static assets, and enable Gzip compression on your server to reduce the size of the data being transferred.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How can you optimize network requests for better performance?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Minimize the number of requests\"}),`\n`,(0,n.jsx)(e.p,{children:\"Reducing the number of network requests can significantly improve performance. Here are some strategies:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Combine files\"}),\": Merge multiple CSS or JavaScript files into a single file.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Image sprites\"}),\": Combine multiple images into a single sprite sheet and use CSS to display the correct part of the image.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Inline small assets\"}),\": Use data URIs to inline small images or fonts directly into your CSS or HTML.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Use caching\"}),`\n`,(0,n.jsx)(e.p,{children:\"Caching can reduce the need to make network requests for resources that have not changed:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"HTTP caching\"}),\": Use \",(0,n.jsx)(e.code,{children:\"Cache-Control\"}),\" and \",(0,n.jsx)(e.code,{children:\"ETag\"}),\" headers to control how and when resources are cached by the browser.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Service workers\"}),\": Implement service workers to cache assets and API responses, allowing your app to work offline and load faster on subsequent visits.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Compress data\"}),`\n`,(0,n.jsx)(e.p,{children:\"Reducing the size of the data being transferred can speed up network requests:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Gzip/Brotli compression\"}),\": Enable Gzip or Brotli compression on your server to compress HTML, CSS, and JavaScript files.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Minification\"}),\": Minify CSS, JavaScript, and HTML files to remove unnecessary characters and reduce file size.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Leverage modern web technologies\"}),`\n`,(0,n.jsx)(e.p,{children:\"Modern web technologies can help optimize network performance:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"HTTP/2\"}),\": Use HTTP/2 to take advantage of multiplexing, header compression, and server push, which can reduce latency and improve load times.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"CDNs\"}),\": Use Content Delivery Networks (CDNs) to serve static assets from locations closer to the user, reducing latency.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Optimize images\"}),`\n`,(0,n.jsx)(e.p,{children:\"Images often account for a large portion of the data transferred:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Responsive images\"}),\": Use the \",(0,n.jsx)(e.code,{children:\"srcset\"}),\" attribute to serve different image sizes based on the user's device.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Image formats\"}),\": Use modern image formats like WebP or AVIF, which offer better compression than traditional formats like JPEG or PNG.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Lazy loading\"}),\": Implement lazy loading to defer loading images until they are needed.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Reduce payload size\"}),`\n`,(0,n.jsx)(e.p,{children:\"Reducing the amount of data sent in each request can improve performance:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"API optimization\"}),\": Optimize API responses to include only the necessary data.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"GraphQL\"}),\": Use GraphQL to request only the specific data needed by the client.\"]}),`\n`]}),`\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/Web/HTTP/Caching\",children:\"MDN Web Docs: HTTP caching\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/\",children:\"Google Developers: Optimizing content efficiency\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://web.dev/http2/\",children:\"Web.dev: Use HTTP/2\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API\",children:\"MDN Web Docs: Service workers\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization\",children:\"Google Developers: Image optimization\"})}),`\n`]})]})}function z(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(d,r)})):d(r)}var C=z;return y(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),v=(r,e)=>{for(var i in e)t(r,i,{get:e[i],enumerable:!0})},c=(r,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of g(e))!f.call(r,o)&&o!==i&&t(r,o,{get:()=>e[o],enumerable:!(s=p(e,o))||s.enumerable});return r};var y=(r,e,i)=>(i=r!=null?m(u(r)):{},c(e||!r||!r.__esModule?t(i,\"default\",{value:r,enumerable:!0}):i,r)),w=r=>c(t({},\"__esModule\",{value:!0}),r);var a=b((T,l)=>{l.exports=_jsx_runtime});var C={};v(C,{default:()=>h,frontmatter:()=>z});var n=y(a()),z={title:\"How can you optimize network requests for better performance?\"};function d(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To optimize network requests for better performance, you can minimize the number of requests, use caching, compress data, and leverage modern web technologies like HTTP/2 and service workers. For example, you can combine multiple CSS files into one to reduce the number of requests, use \",(0,n.jsx)(e.code,{children:\"Cache-Control\"}),\" headers to cache static assets, and enable Gzip compression on your server to reduce the size of the data being transferred.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How can you optimize network requests for better performance?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Minimize the number of requests\"}),`\n`,(0,n.jsx)(e.p,{children:\"Reducing the number of network requests can significantly improve performance. Here are some strategies:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Combine files\"}),\": Merge multiple CSS or JavaScript files into a single file.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Image sprites\"}),\": Combine multiple images into a single sprite sheet and use CSS to display the correct part of the image.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Inline small assets\"}),\": Use data URIs to inline small images or fonts directly into your CSS or HTML.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Use caching\"}),`\n`,(0,n.jsx)(e.p,{children:\"Caching can reduce the need to make network requests for resources that have not changed:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"HTTP caching\"}),\": Use \",(0,n.jsx)(e.code,{children:\"Cache-Control\"}),\" and \",(0,n.jsx)(e.code,{children:\"ETag\"}),\" headers to control how and when resources are cached by the browser.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Service workers\"}),\": Implement service workers to cache assets and API responses, allowing your app to work offline and load faster on subsequent visits.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Compress data\"}),`\n`,(0,n.jsx)(e.p,{children:\"Reducing the size of the data being transferred can speed up network requests:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Gzip/Brotli compression\"}),\": Enable Gzip or Brotli compression on your server to compress HTML, CSS, and JavaScript files.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Minification\"}),\": Minify CSS, JavaScript, and HTML files to remove unnecessary characters and reduce file size.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Leverage modern web technologies\"}),`\n`,(0,n.jsx)(e.p,{children:\"Modern web technologies can help optimize network performance:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"HTTP/2\"}),\": Use HTTP/2 to take advantage of multiplexing, header compression, and server push, which can reduce latency and improve load times.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"CDNs\"}),\": Use Content Delivery Networks (CDNs) to serve static assets from locations closer to the user, reducing latency.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Optimize images\"}),`\n`,(0,n.jsx)(e.p,{children:\"Images often account for a large portion of the data transferred:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Responsive images\"}),\": Use the \",(0,n.jsx)(e.code,{children:\"srcset\"}),\" attribute to serve different image sizes based on the user's device.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Image formats\"}),\": Use modern image formats like WebP or AVIF, which offer better compression than traditional formats like JPEG or PNG.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Lazy loading\"}),\": Implement lazy loading to defer loading images until they are needed.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Reduce payload size\"}),`\n`,(0,n.jsx)(e.p,{children:\"Reducing the amount of data sent in each request can improve performance:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"API optimization\"}),\": Optimize API responses to include only the necessary data.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"GraphQL\"}),\": Use GraphQL to request only the specific data needed by the client.\"]}),`\n`]}),`\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/Web/HTTP/Caching\",children:\"MDN Web Docs: HTTP caching\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/\",children:\"Google Developers: Optimizing content efficiency\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://web.dev/http2/\",children:\"Web.dev: Use HTTP/2\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API\",children:\"MDN Web Docs: Service workers\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization\",children:\"Google Developers: Image optimization\"})}),`\n`]})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(d,{...r})}):d(r)}return w(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-can-you-optimize-network-requests-for-better-performance/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-can-you-optimize-network-requests-for-better-performance/zh-CN.json
index 5c8de13da..6d2e25358 100644
--- a/apps/web/src/__generated__/questions/quiz/how-can-you-optimize-network-requests-for-better-performance/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-can-you-optimize-network-requests-for-better-performance/zh-CN.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-you-optimize-network-requests-for-better-performance/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var T=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),f=(r,n)=>{for(var i in n)c(r,i,{get:n[i],enumerable:!0})},d=(r,n,i,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of g(n))!m.call(r,l)&&l!==i&&c(r,l,{get:()=>n[l],enumerable:!(h=p(n,l))||h.enumerable});return r};var u=(r,n,i)=>(i=r!=null?a(S(r)):{},d(n||!r||!r.__esModule?c(i,\"default\",{value:r,enumerable:!0}):i,r)),v=r=>d(c({},\"__esModule\",{value:!0}),r);var t=T((H,o)=>{o.exports=_jsx_runtime});var W={};f(W,{default:()=>b,frontmatter:()=>C});var e=u(t()),C={title:\"\\u5982\\u4F55\\u4F18\\u5316\\u7F51\\u7EDC\\u8BF7\\u6C42\\u4EE5\\u83B7\\u5F97\\u66F4\\u597D\\u7684\\u6027\\u80FD\\uFF1F\"};function s(r){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E3A\\u4E86\\u4F18\\u5316\\u7F51\\u7EDC\\u8BF7\\u6C42\\u4EE5\\u83B7\\u5F97\\u66F4\\u597D\\u7684\\u6027\\u80FD\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C3D\\u91CF\\u51CF\\u5C11\\u8BF7\\u6C42\\u6570\\u91CF\\u3001\\u4F7F\\u7528\\u7F13\\u5B58\\u3001\\u538B\\u7F29\\u6570\\u636E\\uFF0C\\u5E76\\u5229\\u7528 HTTP/2 \\u548C Service Worker \\u7B49\\u73B0\\u4EE3 Web \\u6280\\u672F\\u3002\\u4F8B\\u5982\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C06\\u591A\\u4E2A CSS \\u6587\\u4EF6\\u5408\\u5E76\\u6210\\u4E00\\u4E2A\\u4EE5\\u51CF\\u5C11\\u8BF7\\u6C42\\u6570\\u91CF\\uFF0C\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"Cache-Control\"}),\" \\u6807\\u5934\\u7F13\\u5B58\\u9759\\u6001\\u8D44\\u6E90\\uFF0C\\u5E76\\u5728\\u60A8\\u7684\\u670D\\u52A1\\u5668\\u4E0A\\u542F\\u7528 Gzip \\u538B\\u7F29\\u4EE5\\u51CF\\u5C11\\u4F20\\u8F93\\u7684\\u6570\\u636E\\u5927\\u5C0F\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5982\\u4F55\\u4F18\\u5316\\u7F51\\u7EDC\\u8BF7\\u6C42\\u4EE5\\u83B7\\u5F97\\u66F4\\u597D\\u7684\\u6027\\u80FD\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5C3D\\u91CF\\u51CF\\u5C11\\u8BF7\\u6C42\\u6570\\u91CF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51CF\\u5C11\\u7F51\\u7EDC\\u8BF7\\u6C42\\u7684\\u6570\\u91CF\\u53EF\\u4EE5\\u663E\\u8457\\u63D0\\u9AD8\\u6027\\u80FD\\u3002\\u4EE5\\u4E0B\\u662F\\u4E00\\u4E9B\\u7B56\\u7565\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5408\\u5E76\\u6587\\u4EF6\"}),\"\\uFF1A\\u5C06\\u591A\\u4E2A CSS \\u6216 JavaScript \\u6587\\u4EF6\\u5408\\u5E76\\u6210\\u4E00\\u4E2A\\u6587\\u4EF6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u56FE\\u50CF\\u7CBE\\u7075\"}),\"\\uFF1A\\u5C06\\u591A\\u4E2A\\u56FE\\u50CF\\u5408\\u5E76\\u6210\\u4E00\\u4E2A\\u7CBE\\u7075\\u8868\\uFF0C\\u5E76\\u4F7F\\u7528 CSS \\u663E\\u793A\\u56FE\\u50CF\\u7684\\u6B63\\u786E\\u90E8\\u5206\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5185\\u8054\\u5C0F\\u8D44\\u6E90\"}),\"\\uFF1A\\u4F7F\\u7528\\u6570\\u636E URI \\u5C06\\u5C0F\\u56FE\\u50CF\\u6216\\u5B57\\u4F53\\u76F4\\u63A5\\u5185\\u8054\\u5230\\u60A8\\u7684 CSS \\u6216 HTML \\u4E2D\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528\\u7F13\\u5B58\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7F13\\u5B58\\u53EF\\u4EE5\\u51CF\\u5C11\\u5BF9\\u5C1A\\u672A\\u66F4\\u6539\\u7684\\u8D44\\u6E90\\u8FDB\\u884C\\u7F51\\u7EDC\\u8BF7\\u6C42\\u7684\\u9700\\u6C42\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"HTTP \\u7F13\\u5B58\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"Cache-Control\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"ETag\"}),\" \\u6807\\u5934\\u6765\\u63A7\\u5236\\u6D4F\\u89C8\\u5668\\u7F13\\u5B58\\u8D44\\u6E90\\u7684\\u65B9\\u5F0F\\u548C\\u65F6\\u95F4\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Service Worker\"}),\"\\uFF1A\\u5B9E\\u73B0 Service Worker \\u6765\\u7F13\\u5B58\\u8D44\\u6E90\\u548C API \\u54CD\\u5E94\\uFF0C\\u5141\\u8BB8\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u79BB\\u7EBF\\u5DE5\\u4F5C\\uFF0C\\u5E76\\u5728\\u540E\\u7EED\\u8BBF\\u95EE\\u65F6\\u66F4\\u5FEB\\u5730\\u52A0\\u8F7D\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u538B\\u7F29\\u6570\\u636E\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51CF\\u5C11\\u4F20\\u8F93\\u7684\\u6570\\u636E\\u5927\\u5C0F\\u53EF\\u4EE5\\u52A0\\u901F\\u7F51\\u7EDC\\u8BF7\\u6C42\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Gzip/Brotli \\u538B\\u7F29\"}),\"\\uFF1A\\u5728\\u60A8\\u7684\\u670D\\u52A1\\u5668\\u4E0A\\u542F\\u7528 Gzip \\u6216 Brotli \\u538B\\u7F29\\u4EE5\\u538B\\u7F29 HTML\\u3001CSS \\u548C JavaScript \\u6587\\u4EF6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6700\\u5C0F\\u5316\"}),\"\\uFF1A\\u6700\\u5C0F\\u5316 CSS\\u3001JavaScript \\u548C HTML \\u6587\\u4EF6\\u4EE5\\u5220\\u9664\\u4E0D\\u5FC5\\u8981\\u7684\\u5B57\\u7B26\\u5E76\\u51CF\\u5C0F\\u6587\\u4EF6\\u5927\\u5C0F\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5229\\u7528\\u73B0\\u4EE3 Web \\u6280\\u672F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u73B0\\u4EE3 Web \\u6280\\u672F\\u53EF\\u4EE5\\u5E2E\\u52A9\\u4F18\\u5316\\u7F51\\u7EDC\\u6027\\u80FD\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"HTTP/2\"}),\"\\uFF1A\\u4F7F\\u7528 HTTP/2 \\u6765\\u5229\\u7528\\u591A\\u8DEF\\u590D\\u7528\\u3001\\u6807\\u5934\\u538B\\u7F29\\u548C\\u670D\\u52A1\\u5668\\u63A8\\u9001\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u51CF\\u5C11\\u5EF6\\u8FDF\\u5E76\\u63D0\\u9AD8\\u52A0\\u8F7D\\u65F6\\u95F4\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"CDN\"}),\"\\uFF1A\\u4F7F\\u7528\\u5185\\u5BB9\\u5206\\u53D1\\u7F51\\u7EDC (CDN) \\u4ECE\\u66F4\\u9760\\u8FD1\\u7528\\u6237\\u7684\\u4F4D\\u7F6E\\u63D0\\u4F9B\\u9759\\u6001\\u8D44\\u6E90\\uFF0C\\u4ECE\\u800C\\u51CF\\u5C11\\u5EF6\\u8FDF\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F18\\u5316\\u56FE\\u50CF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u56FE\\u50CF\\u901A\\u5E38\\u5360\\u7528\\u4E86\\u5F88\\u5927\\u4E00\\u90E8\\u5206\\u5DF2\\u4F20\\u8F93\\u7684\\u6570\\u636E\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u54CD\\u5E94\\u5F0F\\u56FE\\u50CF\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"srcset\"}),\" \\u5C5E\\u6027\\u6839\\u636E\\u7528\\u6237\\u7684\\u8BBE\\u5907\\u63D0\\u4F9B\\u4E0D\\u540C\\u7684\\u56FE\\u50CF\\u5927\\u5C0F\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u56FE\\u50CF\\u683C\\u5F0F\"}),\"\\uFF1A\\u4F7F\\u7528\\u73B0\\u4EE3\\u56FE\\u50CF\\u683C\\u5F0F\\uFF0C\\u5982 WebP \\u6216 AVIF\\uFF0C\\u5B83\\u4EEC\\u6BD4 JPEG \\u6216 PNG \\u7B49\\u4F20\\u7EDF\\u683C\\u5F0F\\u63D0\\u4F9B\\u66F4\\u597D\\u7684\\u538B\\u7F29\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u61D2\\u52A0\\u8F7D\"}),\"\\uFF1A\\u5B9E\\u73B0\\u61D2\\u52A0\\u8F7D\\u4EE5\\u63A8\\u8FDF\\u52A0\\u8F7D\\u56FE\\u50CF\\uFF0C\\u76F4\\u5230\\u9700\\u8981\\u5B83\\u4EEC\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51CF\\u5C11\\u6709\\u6548\\u8D1F\\u8F7D\\u5927\\u5C0F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51CF\\u5C11\\u6BCF\\u4E2A\\u8BF7\\u6C42\\u4E2D\\u53D1\\u9001\\u7684\\u6570\\u636E\\u91CF\\u53EF\\u4EE5\\u63D0\\u9AD8\\u6027\\u80FD\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"API \\u4F18\\u5316\"}),\"\\uFF1A\\u4F18\\u5316 API \\u54CD\\u5E94\\uFF0C\\u4EC5\\u5305\\u542B\\u5FC5\\u8981\\u7684\\u6570\\u636E\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"GraphQL\"}),\"\\uFF1A\\u4F7F\\u7528 GraphQL \\u4EC5\\u8BF7\\u6C42\\u5BA2\\u6237\\u7AEF\\u6240\\u9700\\u7684\\u6570\\u636E\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching\",children:\"MDN Web Docs: HTTP \\u7F13\\u5B58\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/\",children:\"Google Developers: \\u4F18\\u5316\\u5185\\u5BB9\\u6548\\u7387\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://web.dev/http2/\",children:\"Web.dev: \\u4F7F\\u7528 HTTP/2\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API\",children:\"MDN Web Docs: Service workers\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization\",children:\"Google Developers: \\u56FE\\u7247\\u4F18\\u5316\"})}),`\n`]})]})}function P(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(s,r)})):s(r)}var b=P;return v(W);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var f=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),u=(r,n)=>{for(var i in n)c(r,i,{get:n[i],enumerable:!0})},d=(r,n,i,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of S(n))!T.call(r,l)&&l!==i&&c(r,l,{get:()=>n[l],enumerable:!(h=g(n,l))||h.enumerable});return r};var v=(r,n,i)=>(i=r!=null?p(m(r)):{},d(n||!r||!r.__esModule?c(i,\"default\",{value:r,enumerable:!0}):i,r)),C=r=>d(c({},\"__esModule\",{value:!0}),r);var t=f((D,o)=>{o.exports=_jsx_runtime});var W={};u(W,{default:()=>a,frontmatter:()=>P});var e=v(t()),P={title:\"\\u5982\\u4F55\\u4F18\\u5316\\u7F51\\u7EDC\\u8BF7\\u6C42\\u4EE5\\u83B7\\u5F97\\u66F4\\u597D\\u7684\\u6027\\u80FD\\uFF1F\"};function s(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E3A\\u4E86\\u4F18\\u5316\\u7F51\\u7EDC\\u8BF7\\u6C42\\u4EE5\\u83B7\\u5F97\\u66F4\\u597D\\u7684\\u6027\\u80FD\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C3D\\u91CF\\u51CF\\u5C11\\u8BF7\\u6C42\\u6570\\u91CF\\u3001\\u4F7F\\u7528\\u7F13\\u5B58\\u3001\\u538B\\u7F29\\u6570\\u636E\\uFF0C\\u5E76\\u5229\\u7528 HTTP/2 \\u548C Service Worker \\u7B49\\u73B0\\u4EE3 Web \\u6280\\u672F\\u3002\\u4F8B\\u5982\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C06\\u591A\\u4E2A CSS \\u6587\\u4EF6\\u5408\\u5E76\\u6210\\u4E00\\u4E2A\\u4EE5\\u51CF\\u5C11\\u8BF7\\u6C42\\u6570\\u91CF\\uFF0C\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"Cache-Control\"}),\" \\u6807\\u5934\\u7F13\\u5B58\\u9759\\u6001\\u8D44\\u6E90\\uFF0C\\u5E76\\u5728\\u60A8\\u7684\\u670D\\u52A1\\u5668\\u4E0A\\u542F\\u7528 Gzip \\u538B\\u7F29\\u4EE5\\u51CF\\u5C11\\u4F20\\u8F93\\u7684\\u6570\\u636E\\u5927\\u5C0F\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5982\\u4F55\\u4F18\\u5316\\u7F51\\u7EDC\\u8BF7\\u6C42\\u4EE5\\u83B7\\u5F97\\u66F4\\u597D\\u7684\\u6027\\u80FD\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5C3D\\u91CF\\u51CF\\u5C11\\u8BF7\\u6C42\\u6570\\u91CF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51CF\\u5C11\\u7F51\\u7EDC\\u8BF7\\u6C42\\u7684\\u6570\\u91CF\\u53EF\\u4EE5\\u663E\\u8457\\u63D0\\u9AD8\\u6027\\u80FD\\u3002\\u4EE5\\u4E0B\\u662F\\u4E00\\u4E9B\\u7B56\\u7565\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5408\\u5E76\\u6587\\u4EF6\"}),\"\\uFF1A\\u5C06\\u591A\\u4E2A CSS \\u6216 JavaScript \\u6587\\u4EF6\\u5408\\u5E76\\u6210\\u4E00\\u4E2A\\u6587\\u4EF6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u56FE\\u50CF\\u7CBE\\u7075\"}),\"\\uFF1A\\u5C06\\u591A\\u4E2A\\u56FE\\u50CF\\u5408\\u5E76\\u6210\\u4E00\\u4E2A\\u7CBE\\u7075\\u8868\\uFF0C\\u5E76\\u4F7F\\u7528 CSS \\u663E\\u793A\\u56FE\\u50CF\\u7684\\u6B63\\u786E\\u90E8\\u5206\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5185\\u8054\\u5C0F\\u8D44\\u6E90\"}),\"\\uFF1A\\u4F7F\\u7528\\u6570\\u636E URI \\u5C06\\u5C0F\\u56FE\\u50CF\\u6216\\u5B57\\u4F53\\u76F4\\u63A5\\u5185\\u8054\\u5230\\u60A8\\u7684 CSS \\u6216 HTML \\u4E2D\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528\\u7F13\\u5B58\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7F13\\u5B58\\u53EF\\u4EE5\\u51CF\\u5C11\\u5BF9\\u5C1A\\u672A\\u66F4\\u6539\\u7684\\u8D44\\u6E90\\u8FDB\\u884C\\u7F51\\u7EDC\\u8BF7\\u6C42\\u7684\\u9700\\u6C42\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"HTTP \\u7F13\\u5B58\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"Cache-Control\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"ETag\"}),\" \\u6807\\u5934\\u6765\\u63A7\\u5236\\u6D4F\\u89C8\\u5668\\u7F13\\u5B58\\u8D44\\u6E90\\u7684\\u65B9\\u5F0F\\u548C\\u65F6\\u95F4\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Service Worker\"}),\"\\uFF1A\\u5B9E\\u73B0 Service Worker \\u6765\\u7F13\\u5B58\\u8D44\\u6E90\\u548C API \\u54CD\\u5E94\\uFF0C\\u5141\\u8BB8\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u79BB\\u7EBF\\u5DE5\\u4F5C\\uFF0C\\u5E76\\u5728\\u540E\\u7EED\\u8BBF\\u95EE\\u65F6\\u66F4\\u5FEB\\u5730\\u52A0\\u8F7D\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u538B\\u7F29\\u6570\\u636E\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51CF\\u5C11\\u4F20\\u8F93\\u7684\\u6570\\u636E\\u5927\\u5C0F\\u53EF\\u4EE5\\u52A0\\u901F\\u7F51\\u7EDC\\u8BF7\\u6C42\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Gzip/Brotli \\u538B\\u7F29\"}),\"\\uFF1A\\u5728\\u60A8\\u7684\\u670D\\u52A1\\u5668\\u4E0A\\u542F\\u7528 Gzip \\u6216 Brotli \\u538B\\u7F29\\u4EE5\\u538B\\u7F29 HTML\\u3001CSS \\u548C JavaScript \\u6587\\u4EF6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6700\\u5C0F\\u5316\"}),\"\\uFF1A\\u6700\\u5C0F\\u5316 CSS\\u3001JavaScript \\u548C HTML \\u6587\\u4EF6\\u4EE5\\u5220\\u9664\\u4E0D\\u5FC5\\u8981\\u7684\\u5B57\\u7B26\\u5E76\\u51CF\\u5C0F\\u6587\\u4EF6\\u5927\\u5C0F\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5229\\u7528\\u73B0\\u4EE3 Web \\u6280\\u672F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u73B0\\u4EE3 Web \\u6280\\u672F\\u53EF\\u4EE5\\u5E2E\\u52A9\\u4F18\\u5316\\u7F51\\u7EDC\\u6027\\u80FD\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"HTTP/2\"}),\"\\uFF1A\\u4F7F\\u7528 HTTP/2 \\u6765\\u5229\\u7528\\u591A\\u8DEF\\u590D\\u7528\\u3001\\u6807\\u5934\\u538B\\u7F29\\u548C\\u670D\\u52A1\\u5668\\u63A8\\u9001\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u51CF\\u5C11\\u5EF6\\u8FDF\\u5E76\\u63D0\\u9AD8\\u52A0\\u8F7D\\u65F6\\u95F4\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"CDN\"}),\"\\uFF1A\\u4F7F\\u7528\\u5185\\u5BB9\\u5206\\u53D1\\u7F51\\u7EDC (CDN) \\u4ECE\\u66F4\\u9760\\u8FD1\\u7528\\u6237\\u7684\\u4F4D\\u7F6E\\u63D0\\u4F9B\\u9759\\u6001\\u8D44\\u6E90\\uFF0C\\u4ECE\\u800C\\u51CF\\u5C11\\u5EF6\\u8FDF\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F18\\u5316\\u56FE\\u50CF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u56FE\\u50CF\\u901A\\u5E38\\u5360\\u7528\\u4E86\\u5F88\\u5927\\u4E00\\u90E8\\u5206\\u5DF2\\u4F20\\u8F93\\u7684\\u6570\\u636E\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u54CD\\u5E94\\u5F0F\\u56FE\\u50CF\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"srcset\"}),\" \\u5C5E\\u6027\\u6839\\u636E\\u7528\\u6237\\u7684\\u8BBE\\u5907\\u63D0\\u4F9B\\u4E0D\\u540C\\u7684\\u56FE\\u50CF\\u5927\\u5C0F\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u56FE\\u50CF\\u683C\\u5F0F\"}),\"\\uFF1A\\u4F7F\\u7528\\u73B0\\u4EE3\\u56FE\\u50CF\\u683C\\u5F0F\\uFF0C\\u5982 WebP \\u6216 AVIF\\uFF0C\\u5B83\\u4EEC\\u6BD4 JPEG \\u6216 PNG \\u7B49\\u4F20\\u7EDF\\u683C\\u5F0F\\u63D0\\u4F9B\\u66F4\\u597D\\u7684\\u538B\\u7F29\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u61D2\\u52A0\\u8F7D\"}),\"\\uFF1A\\u5B9E\\u73B0\\u61D2\\u52A0\\u8F7D\\u4EE5\\u63A8\\u8FDF\\u52A0\\u8F7D\\u56FE\\u50CF\\uFF0C\\u76F4\\u5230\\u9700\\u8981\\u5B83\\u4EEC\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51CF\\u5C11\\u6709\\u6548\\u8D1F\\u8F7D\\u5927\\u5C0F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51CF\\u5C11\\u6BCF\\u4E2A\\u8BF7\\u6C42\\u4E2D\\u53D1\\u9001\\u7684\\u6570\\u636E\\u91CF\\u53EF\\u4EE5\\u63D0\\u9AD8\\u6027\\u80FD\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"API \\u4F18\\u5316\"}),\"\\uFF1A\\u4F18\\u5316 API \\u54CD\\u5E94\\uFF0C\\u4EC5\\u5305\\u542B\\u5FC5\\u8981\\u7684\\u6570\\u636E\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"GraphQL\"}),\"\\uFF1A\\u4F7F\\u7528 GraphQL \\u4EC5\\u8BF7\\u6C42\\u5BA2\\u6237\\u7AEF\\u6240\\u9700\\u7684\\u6570\\u636E\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching\",children:\"MDN Web Docs: HTTP \\u7F13\\u5B58\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/\",children:\"Google Developers: \\u4F18\\u5316\\u5185\\u5BB9\\u6548\\u7387\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://web.dev/http2/\",children:\"Web.dev: \\u4F7F\\u7528 HTTP/2\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API\",children:\"MDN Web Docs: Service workers\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization\",children:\"Google Developers: \\u56FE\\u7247\\u4F18\\u5316\"})}),`\n`]})]})}function a(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(s,{...r})}):s(r)}return C(W);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-can-you-prevent-clickjacking-attacks/en-US.json b/apps/web/src/__generated__/questions/quiz/how-can-you-prevent-clickjacking-attacks/en-US.json
index 17c90685c..62f3ada08 100644
--- a/apps/web/src/__generated__/questions/quiz/how-can-you-prevent-clickjacking-attacks/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-can-you-prevent-clickjacking-attacks/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-you-prevent-clickjacking-attacks/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),y=(i,e)=>{for(var r in e)t(i,r,{get:e[r],enumerable:!0})},a=(i,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!u.call(i,c)&&c!==r&&t(i,c,{get:()=>e[c],enumerable:!(o=p(e,c))||o.enumerable});return i};var b=(i,e,r)=>(r=i!=null?s(g(i)):{},a(e||!i||!i.__esModule?t(r,\"default\",{value:i,enumerable:!0}):r,i)),k=i=>a(t({},\"__esModule\",{value:!0}),i);var d=f((j,l)=>{l.exports=_jsx_runtime});var w={};y(w,{default:()=>v,frontmatter:()=>S});var n=b(d()),S={title:\"How can you prevent clickjacking attacks?\"};function h(i){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To prevent clickjacking attacks, you can use the \",(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\" HTTP header to control whether your site can be embedded in iframes. Set it to \",(0,n.jsx)(e.code,{children:\"DENY\"}),\" to prevent all framing, or \",(0,n.jsx)(e.code,{children:\"SAMEORIGIN\"}),\" to allow framing only from the same origin. Additionally, you can use the \",(0,n.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" (CSP) header with the \",(0,n.jsx)(e.code,{children:\"frame-ancestors\"}),\" directive to specify which origins are allowed to frame your content.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-Frame-Options: DENY\n`})}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: frame-ancestors 'self'\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is clickjacking?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Clickjacking is a type of attack where a malicious site tricks users into clicking on something different from what the user perceives, potentially leading to unauthorized actions or information disclosure. This is often achieved by embedding the target site in an invisible iframe and overlaying it with deceptive content.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"How to prevent clickjacking attacks\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\" header\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\" HTTP header can be used to control whether a browser should be allowed to render a page in a \",(0,n.jsx)(e.code,{children:\"<frame>\"}),\", \",(0,n.jsx)(e.code,{children:\"<iframe>\"}),\", \",(0,n.jsx)(e.code,{children:\"<embed>\"}),\", or \",(0,n.jsx)(e.code,{children:\"<object>\"}),\". This header has three possible values:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"DENY\"}),\": Prevents the page from being displayed in a frame, regardless of the site attempting to do so.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"SAMEORIGIN\"}),\": Allows the page to be displayed in a frame on the same origin as the page itself.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"ALLOW-FROM uri\"}),\": Allows the page to be displayed in a frame only on the specified origin.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-Frame-Options: DENY\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" header\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" (CSP) header provides a more flexible and modern approach to prevent clickjacking. The \",(0,n.jsx)(e.code,{children:\"frame-ancestors\"}),\" directive specifies valid parents that may embed a page using \",(0,n.jsx)(e.code,{children:\"<frame>\"}),\", \",(0,n.jsx)(e.code,{children:\"<iframe>\"}),\", \",(0,n.jsx)(e.code,{children:\"<object>\"}),\", \",(0,n.jsx)(e.code,{children:\"<embed>\"}),\", or \",(0,n.jsx)(e.code,{children:\"<applet>\"}),\" tags.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: frame-ancestors 'self'\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"This directive can also specify multiple origins or use wildcards for more complex scenarios.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: frame-ancestors 'self' https://trusted.com\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Combining both headers\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"For maximum compatibility and security, it is recommended to use both \",(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\" and \",(0,n.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" headers together.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-Frame-Options: SAMEORIGIN\nContent-Security-Policy: frame-ancestors 'self'\n`})}),`\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/Web/HTTP/Headers/X-Frame-Options\",children:\"MDN Web Docs: X-Frame-Options\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP\",children:\"MDN Web Docs: Content-Security-Policy\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html\",children:\"OWASP: Clickjacking Defense Cheat Sheet\"})}),`\n`]})]})}function C(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(h,i)})):h(i)}var v=C;return k(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),b=(i,e)=>{for(var r in e)t(i,r,{get:e[r],enumerable:!0})},a=(i,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of g(e))!f.call(i,c)&&c!==r&&t(i,c,{get:()=>e[c],enumerable:!(o=m(e,c))||o.enumerable});return i};var k=(i,e,r)=>(r=i!=null?p(u(i)):{},a(e||!i||!i.__esModule?t(r,\"default\",{value:i,enumerable:!0}):r,i)),S=i=>a(t({},\"__esModule\",{value:!0}),i);var d=y((P,l)=>{l.exports=_jsx_runtime});var v={};b(v,{default:()=>s,frontmatter:()=>C});var n=k(d()),C={title:\"How can you prevent clickjacking attacks?\"};function h(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To prevent clickjacking attacks, you can use the \",(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\" HTTP header to control whether your site can be embedded in iframes. Set it to \",(0,n.jsx)(e.code,{children:\"DENY\"}),\" to prevent all framing, or \",(0,n.jsx)(e.code,{children:\"SAMEORIGIN\"}),\" to allow framing only from the same origin. Additionally, you can use the \",(0,n.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" (CSP) header with the \",(0,n.jsx)(e.code,{children:\"frame-ancestors\"}),\" directive to specify which origins are allowed to frame your content.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-Frame-Options: DENY\n`})}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: frame-ancestors 'self'\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is clickjacking?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Clickjacking is a type of attack where a malicious site tricks users into clicking on something different from what the user perceives, potentially leading to unauthorized actions or information disclosure. This is often achieved by embedding the target site in an invisible iframe and overlaying it with deceptive content.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"How to prevent clickjacking attacks\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\" header\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\" HTTP header can be used to control whether a browser should be allowed to render a page in a \",(0,n.jsx)(e.code,{children:\"<frame>\"}),\", \",(0,n.jsx)(e.code,{children:\"<iframe>\"}),\", \",(0,n.jsx)(e.code,{children:\"<embed>\"}),\", or \",(0,n.jsx)(e.code,{children:\"<object>\"}),\". This header has three possible values:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"DENY\"}),\": Prevents the page from being displayed in a frame, regardless of the site attempting to do so.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"SAMEORIGIN\"}),\": Allows the page to be displayed in a frame on the same origin as the page itself.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"ALLOW-FROM uri\"}),\": Allows the page to be displayed in a frame only on the specified origin.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-Frame-Options: DENY\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" header\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" (CSP) header provides a more flexible and modern approach to prevent clickjacking. The \",(0,n.jsx)(e.code,{children:\"frame-ancestors\"}),\" directive specifies valid parents that may embed a page using \",(0,n.jsx)(e.code,{children:\"<frame>\"}),\", \",(0,n.jsx)(e.code,{children:\"<iframe>\"}),\", \",(0,n.jsx)(e.code,{children:\"<object>\"}),\", \",(0,n.jsx)(e.code,{children:\"<embed>\"}),\", or \",(0,n.jsx)(e.code,{children:\"<applet>\"}),\" tags.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: frame-ancestors 'self'\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"This directive can also specify multiple origins or use wildcards for more complex scenarios.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: frame-ancestors 'self' https://trusted.com\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Combining both headers\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"For maximum compatibility and security, it is recommended to use both \",(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\" and \",(0,n.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" headers together.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-Frame-Options: SAMEORIGIN\nContent-Security-Policy: frame-ancestors 'self'\n`})}),`\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/Web/HTTP/Headers/X-Frame-Options\",children:\"MDN Web Docs: X-Frame-Options\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP\",children:\"MDN Web Docs: Content-Security-Policy\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html\",children:\"OWASP: Clickjacking Defense Cheat Sheet\"})}),`\n`]})]})}function s(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(h,{...i})}):h(i)}return S(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-can-you-prevent-clickjacking-attacks/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-can-you-prevent-clickjacking-attacks/zh-CN.json
index f0e029362..096312a4c 100644
--- a/apps/web/src/__generated__/questions/quiz/how-can-you-prevent-clickjacking-attacks/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-can-you-prevent-clickjacking-attacks/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-you-prevent-clickjacking-attacks/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),y=(c,e)=>{for(var r in e)l(c,r,{get:e[r],enumerable:!0})},t=(c,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!f.call(c,i)&&i!==r&&l(c,i,{get:()=>e[i],enumerable:!(d=p(e,i))||d.enumerable});return c};var C=(c,e,r)=>(r=c!=null?s(u(c)):{},t(e||!c||!c.__esModule?l(r,\"default\",{value:c,enumerable:!0}):r,c)),N=c=>t(l({},\"__esModule\",{value:!0}),c);var o=g((X,h)=>{h.exports=_jsx_runtime});var F={};y(F,{default:()=>S,frontmatter:()=>O});var n=C(o()),O={title:\"\\u5982\\u4F55\\u9632\\u6B62\\u70B9\\u51FB\\u52AB\\u6301\\u653B\\u51FB\\uFF1F\"};function a(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E3A\\u4E86\\u9632\\u6B62\\u70B9\\u51FB\\u52AB\\u6301\\u653B\\u51FB\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\" HTTP \\u6807\\u5934\\u6765\\u63A7\\u5236\\u60A8\\u7684\\u7F51\\u7AD9\\u662F\\u5426\\u53EF\\u4EE5\\u5D4C\\u5165\\u5728 iframe \\u4E2D\\u3002\\u5C06\\u5176\\u8BBE\\u7F6E\\u4E3A \",(0,n.jsx)(e.code,{children:\"DENY\"}),\" \\u4EE5\\u9632\\u6B62\\u6240\\u6709\\u6846\\u67B6\\uFF0C\\u6216\\u8BBE\\u7F6E\\u4E3A \",(0,n.jsx)(e.code,{children:\"SAMEORIGIN\"}),\" \\u4EE5\\u4EC5\\u5141\\u8BB8\\u6765\\u81EA\\u540C\\u4E00\\u6765\\u6E90\\u7684\\u6846\\u67B6\\u3002\\u6B64\\u5916\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5E26\\u6709 \",(0,n.jsx)(e.code,{children:\"frame-ancestors\"}),\" \\u6307\\u4EE4\\u7684 \",(0,n.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" (CSP) \\u6807\\u5934\\u6765\\u6307\\u5B9A\\u5141\\u8BB8\\u54EA\\u4E9B\\u6765\\u6E90\\u6765\\u6784\\u5EFA\\u60A8\\u7684\\u5185\\u5BB9\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-Frame-Options: DENY\n`})}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: frame-ancestors 'self'\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u70B9\\u51FB\\u52AB\\u6301\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u70B9\\u51FB\\u52AB\\u6301\\u662F\\u4E00\\u79CD\\u653B\\u51FB\\uFF0C\\u6076\\u610F\\u7F51\\u7AD9\\u4F1A\\u8BF1\\u9A97\\u7528\\u6237\\u70B9\\u51FB\\u4E0E\\u7528\\u6237\\u611F\\u77E5\\u4E0D\\u540C\\u7684\\u5185\\u5BB9\\uFF0C\\u4ECE\\u800C\\u53EF\\u80FD\\u5BFC\\u81F4\\u672A\\u7ECF\\u6388\\u6743\\u7684\\u64CD\\u4F5C\\u6216\\u4FE1\\u606F\\u6CC4\\u9732\\u3002\\u8FD9\\u901A\\u5E38\\u662F\\u901A\\u8FC7\\u5C06\\u76EE\\u6807\\u7F51\\u7AD9\\u5D4C\\u5165\\u5230\\u4E0D\\u53EF\\u89C1\\u7684 iframe \\u4E2D\\u5E76\\u7528\\u6B3A\\u9A97\\u6027\\u5185\\u5BB9\\u8986\\u76D6\\u5B83\\u6765\\u5B9E\\u73B0\\u7684\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u9632\\u6B62\\u70B9\\u51FB\\u52AB\\u6301\\u653B\\u51FB\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\" \\u6807\\u5934\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\" HTTP \\u6807\\u5934\\u53EF\\u7528\\u4E8E\\u63A7\\u5236\\u662F\\u5426\\u5E94\\u5141\\u8BB8\\u6D4F\\u89C8\\u5668\\u5728 \",(0,n.jsx)(e.code,{children:\"<frame>\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"<iframe>\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"<embed>\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"<object>\"}),\" \\u4E2D\\u5448\\u73B0\\u9875\\u9762\\u3002\\u6B64\\u6807\\u5934\\u6709\\u4E09\\u4E2A\\u53EF\\u80FD\\u7684\\u503C\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"DENY\"}),\"\\uFF1A\\u963B\\u6B62\\u9875\\u9762\\u5728\\u6846\\u67B6\\u4E2D\\u663E\\u793A\\uFF0C\\u65E0\\u8BBA\\u5C1D\\u8BD5\\u8FD9\\u6837\\u505A\\u7684\\u7AD9\\u70B9\\u662F\\u4EC0\\u4E48\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"SAMEORIGIN\"}),\"\\uFF1A\\u5141\\u8BB8\\u9875\\u9762\\u5728\\u4E0E\\u9875\\u9762\\u672C\\u8EAB\\u76F8\\u540C\\u7684\\u6765\\u6E90\\u7684\\u6846\\u67B6\\u4E2D\\u663E\\u793A\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"ALLOW-FROM uri\"}),\"\\uFF1A\\u4EC5\\u5141\\u8BB8\\u9875\\u9762\\u5728\\u6307\\u5B9A\\u7684\\u6765\\u6E90\\u7684\\u6846\\u67B6\\u4E2D\\u663E\\u793A\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-Frame-Options: DENY\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" \\u6807\\u5934\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" (CSP) \\u6807\\u5934\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u7075\\u6D3B\\u3001\\u66F4\\u73B0\\u4EE3\\u7684\\u65B9\\u6CD5\\u6765\\u9632\\u6B62\\u70B9\\u51FB\\u52AB\\u6301\\u3002\",(0,n.jsx)(e.code,{children:\"frame-ancestors\"}),\" \\u6307\\u4EE4\\u6307\\u5B9A\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"<frame>\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"<iframe>\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"<object>\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"<embed>\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"<applet>\"}),\" \\u6807\\u7B7E\\u5D4C\\u5165\\u9875\\u9762\\u7684\\u6709\\u6548\\u7236\\u7EA7\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: frame-ancestors 'self'\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u6307\\u4EE4\\u8FD8\\u53EF\\u4EE5\\u6307\\u5B9A\\u591A\\u4E2A\\u6765\\u6E90\\u6216\\u4F7F\\u7528\\u901A\\u914D\\u7B26\\u6765\\u5904\\u7406\\u66F4\\u590D\\u6742\\u7684\\u573A\\u666F\\u3002\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: frame-ancestors 'self' https://trusted.com\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7ED3\\u5408\\u4F7F\\u7528\\u8FD9\\u4E24\\u4E2A\\u6807\\u5934\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E3A\\u4E86\\u83B7\\u5F97\\u6700\\u5927\\u7684\\u517C\\u5BB9\\u6027\\u548C\\u5B89\\u5168\\u6027\\uFF0C\\u5EFA\\u8BAE\\u540C\\u65F6\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" \\u6807\\u5934\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-Frame-Options: SAMEORIGIN\nContent-Security-Policy: frame-ancestors 'self'\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/X-Frame-Options\",children:\"MDN Web \\u6587\\u6863\\uFF1AX-Frame-Options\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP\",children:\"MDN Web \\u6587\\u6863\\uFF1AContent-Security-Policy\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html\",children:\"OWASP\\uFF1AClickjacking \\u9632\\u5FA1\\u5907\\u5FD8\\u5355\"})}),`\n`]})]})}function P(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(a,c)})):a(c)}var S=P;return N(F);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),C=(c,e)=>{for(var r in e)l(c,r,{get:e[r],enumerable:!0})},t=(c,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!g.call(c,i)&&i!==r&&l(c,i,{get:()=>e[i],enumerable:!(d=m(e,i))||d.enumerable});return c};var N=(c,e,r)=>(r=c!=null?p(f(c)):{},t(e||!c||!c.__esModule?l(r,\"default\",{value:c,enumerable:!0}):r,c)),P=c=>t(l({},\"__esModule\",{value:!0}),c);var o=y((X,h)=>{h.exports=_jsx_runtime});var O={};C(O,{default:()=>s,frontmatter:()=>S});var n=N(o()),S={title:\"\\u5982\\u4F55\\u9632\\u6B62\\u70B9\\u51FB\\u52AB\\u6301\\u653B\\u51FB\\uFF1F\"};function a(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E3A\\u4E86\\u9632\\u6B62\\u70B9\\u51FB\\u52AB\\u6301\\u653B\\u51FB\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\" HTTP \\u6807\\u5934\\u6765\\u63A7\\u5236\\u60A8\\u7684\\u7F51\\u7AD9\\u662F\\u5426\\u53EF\\u4EE5\\u5D4C\\u5165\\u5728 iframe \\u4E2D\\u3002\\u5C06\\u5176\\u8BBE\\u7F6E\\u4E3A \",(0,n.jsx)(e.code,{children:\"DENY\"}),\" \\u4EE5\\u9632\\u6B62\\u6240\\u6709\\u6846\\u67B6\\uFF0C\\u6216\\u8BBE\\u7F6E\\u4E3A \",(0,n.jsx)(e.code,{children:\"SAMEORIGIN\"}),\" \\u4EE5\\u4EC5\\u5141\\u8BB8\\u6765\\u81EA\\u540C\\u4E00\\u6765\\u6E90\\u7684\\u6846\\u67B6\\u3002\\u6B64\\u5916\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5E26\\u6709 \",(0,n.jsx)(e.code,{children:\"frame-ancestors\"}),\" \\u6307\\u4EE4\\u7684 \",(0,n.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" (CSP) \\u6807\\u5934\\u6765\\u6307\\u5B9A\\u5141\\u8BB8\\u54EA\\u4E9B\\u6765\\u6E90\\u6765\\u6784\\u5EFA\\u60A8\\u7684\\u5185\\u5BB9\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-Frame-Options: DENY\n`})}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: frame-ancestors 'self'\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u70B9\\u51FB\\u52AB\\u6301\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u70B9\\u51FB\\u52AB\\u6301\\u662F\\u4E00\\u79CD\\u653B\\u51FB\\uFF0C\\u6076\\u610F\\u7F51\\u7AD9\\u4F1A\\u8BF1\\u9A97\\u7528\\u6237\\u70B9\\u51FB\\u4E0E\\u7528\\u6237\\u611F\\u77E5\\u4E0D\\u540C\\u7684\\u5185\\u5BB9\\uFF0C\\u4ECE\\u800C\\u53EF\\u80FD\\u5BFC\\u81F4\\u672A\\u7ECF\\u6388\\u6743\\u7684\\u64CD\\u4F5C\\u6216\\u4FE1\\u606F\\u6CC4\\u9732\\u3002\\u8FD9\\u901A\\u5E38\\u662F\\u901A\\u8FC7\\u5C06\\u76EE\\u6807\\u7F51\\u7AD9\\u5D4C\\u5165\\u5230\\u4E0D\\u53EF\\u89C1\\u7684 iframe \\u4E2D\\u5E76\\u7528\\u6B3A\\u9A97\\u6027\\u5185\\u5BB9\\u8986\\u76D6\\u5B83\\u6765\\u5B9E\\u73B0\\u7684\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u9632\\u6B62\\u70B9\\u51FB\\u52AB\\u6301\\u653B\\u51FB\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\" \\u6807\\u5934\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\" HTTP \\u6807\\u5934\\u53EF\\u7528\\u4E8E\\u63A7\\u5236\\u662F\\u5426\\u5E94\\u5141\\u8BB8\\u6D4F\\u89C8\\u5668\\u5728 \",(0,n.jsx)(e.code,{children:\"<frame>\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"<iframe>\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"<embed>\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"<object>\"}),\" \\u4E2D\\u5448\\u73B0\\u9875\\u9762\\u3002\\u6B64\\u6807\\u5934\\u6709\\u4E09\\u4E2A\\u53EF\\u80FD\\u7684\\u503C\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"DENY\"}),\"\\uFF1A\\u963B\\u6B62\\u9875\\u9762\\u5728\\u6846\\u67B6\\u4E2D\\u663E\\u793A\\uFF0C\\u65E0\\u8BBA\\u5C1D\\u8BD5\\u8FD9\\u6837\\u505A\\u7684\\u7AD9\\u70B9\\u662F\\u4EC0\\u4E48\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"SAMEORIGIN\"}),\"\\uFF1A\\u5141\\u8BB8\\u9875\\u9762\\u5728\\u4E0E\\u9875\\u9762\\u672C\\u8EAB\\u76F8\\u540C\\u7684\\u6765\\u6E90\\u7684\\u6846\\u67B6\\u4E2D\\u663E\\u793A\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"ALLOW-FROM uri\"}),\"\\uFF1A\\u4EC5\\u5141\\u8BB8\\u9875\\u9762\\u5728\\u6307\\u5B9A\\u7684\\u6765\\u6E90\\u7684\\u6846\\u67B6\\u4E2D\\u663E\\u793A\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-Frame-Options: DENY\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" \\u6807\\u5934\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" (CSP) \\u6807\\u5934\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u7075\\u6D3B\\u3001\\u66F4\\u73B0\\u4EE3\\u7684\\u65B9\\u6CD5\\u6765\\u9632\\u6B62\\u70B9\\u51FB\\u52AB\\u6301\\u3002\",(0,n.jsx)(e.code,{children:\"frame-ancestors\"}),\" \\u6307\\u4EE4\\u6307\\u5B9A\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"<frame>\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"<iframe>\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"<object>\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"<embed>\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"<applet>\"}),\" \\u6807\\u7B7E\\u5D4C\\u5165\\u9875\\u9762\\u7684\\u6709\\u6548\\u7236\\u7EA7\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: frame-ancestors 'self'\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u6307\\u4EE4\\u8FD8\\u53EF\\u4EE5\\u6307\\u5B9A\\u591A\\u4E2A\\u6765\\u6E90\\u6216\\u4F7F\\u7528\\u901A\\u914D\\u7B26\\u6765\\u5904\\u7406\\u66F4\\u590D\\u6742\\u7684\\u573A\\u666F\\u3002\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: frame-ancestors 'self' https://trusted.com\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7ED3\\u5408\\u4F7F\\u7528\\u8FD9\\u4E24\\u4E2A\\u6807\\u5934\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E3A\\u4E86\\u83B7\\u5F97\\u6700\\u5927\\u7684\\u517C\\u5BB9\\u6027\\u548C\\u5B89\\u5168\\u6027\\uFF0C\\u5EFA\\u8BAE\\u540C\\u65F6\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" \\u6807\\u5934\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-Frame-Options: SAMEORIGIN\nContent-Security-Policy: frame-ancestors 'self'\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/X-Frame-Options\",children:\"MDN Web \\u6587\\u6863\\uFF1AX-Frame-Options\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP\",children:\"MDN Web \\u6587\\u6863\\uFF1AContent-Security-Policy\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html\",children:\"OWASP\\uFF1AClickjacking \\u9632\\u5FA1\\u5907\\u5FD8\\u5355\"})}),`\n`]})]})}function s(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(a,{...c})}):a(c)}return P(O);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-can-you-prevent-sql-injection-vulnerabilities-in-javascript-applications/en-US.json b/apps/web/src/__generated__/questions/quiz/how-can-you-prevent-sql-injection-vulnerabilities-in-javascript-applications/en-US.json
index 580912b80..3ab4ac40d 100644
--- a/apps/web/src/__generated__/questions/quiz/how-can-you-prevent-sql-injection-vulnerabilities-in-javascript-applications/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-can-you-prevent-sql-injection-vulnerabilities-in-javascript-applications/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-you-prevent-sql-injection-vulnerabilities-in-javascript-applications/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),v=(r,e)=>{for(var i in e)s(r,i,{get:e[i],enumerable:!0})},o=(r,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of p(e))!y.call(r,t)&&t!==i&&s(r,t,{get:()=>e[t],enumerable:!(a=u(e,t))||a.enumerable});return r};var q=(r,e,i)=>(i=r!=null?h(m(r)):{},o(e||!r||!r.__esModule?s(i,\"default\",{value:r,enumerable:!0}):i,r)),j=r=>o(s({},\"__esModule\",{value:!0}),r);var c=g((x,l)=>{l.exports=_jsx_runtime});var E={};v(E,{default:()=>f,frontmatter:()=>S});var n=q(c()),S={title:\"How can you prevent SQL injection vulnerabilities in JavaScript applications?\"};function d(r){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",h4:\"h4\",code:\"code\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"To prevent SQL injection vulnerabilities in JavaScript applications, always use parameterized queries or prepared statements instead of string concatenation to construct SQL queries. This ensures that user input is treated as data and not executable code. Additionally, use ORM libraries that handle SQL injection prevention for you, and always validate and sanitize user inputs.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How can you prevent SQL injection vulnerabilities in JavaScript applications?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Use parameterized queries or prepared statements\"}),`\n`,(0,n.jsx)(e.p,{children:\"Parameterized queries or prepared statements ensure that user input is treated as data and not executable code. This is the most effective way to prevent SQL injection.\"}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Example using Node.js with the \",(0,n.jsx)(e.code,{children:\"mysql\"}),\" library:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const mysql = require('mysql');\nconst connection = mysql.createConnection({\n  host: 'localhost',\n  user: 'root',\n  password: 'password',\n  database: 'test',\n});\n\nconst userId = 1;\nconst query = 'SELECT * FROM users WHERE id = ?';\n\nconnection.query(query, [userId], (error, results) => {\n  if (error) throw error;\n  console.log(results);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Use ORM libraries\"}),`\n`,(0,n.jsx)(e.p,{children:\"Object-Relational Mapping (ORM) libraries like Sequelize, TypeORM, or Mongoose (for MongoDB) abstract away SQL queries and handle SQL injection prevention internally.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example using Sequelize:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const { Sequelize, DataTypes } = require('sequelize');\nconst sequelize = new Sequelize('database', 'username', 'password', {\n  host: 'localhost',\n  dialect: 'mysql',\n});\n\nconst User = sequelize.define('User', {\n  username: {\n    type: DataTypes.STRING,\n    allowNull: false,\n  },\n});\n\nUser.findAll({\n  where: {\n    id: 1,\n  },\n}).then((users) => {\n  console.log(users);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Validate and sanitize user inputs\"}),`\n`,(0,n.jsx)(e.p,{children:\"Always validate and sanitize user inputs to ensure they conform to expected formats and do not contain malicious code.\"}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Example using \",(0,n.jsx)(e.code,{children:\"validator\"}),\" library:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const validator = require('validator');\n\nconst userInput = 'someUserInput';\nif (validator.isAlphanumeric(userInput)) {\n  // Proceed with using the input\n} else {\n  // Handle invalid input\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Use stored procedures\"}),`\n`,(0,n.jsx)(e.p,{children:\"Stored procedures are precompiled SQL statements stored in the database. They can help prevent SQL injection by separating the SQL logic from user input.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-sql\",children:`CREATE PROCEDURE GetUserById(IN userId INT)\nBEGIN\n  SELECT * FROM users WHERE id = userId;\nEND;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Use security libraries and frameworks\"}),`\n`,(0,n.jsx)(e.p,{children:\"Leverage security libraries and frameworks that provide built-in protection against SQL injection.\"}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Example using Express.js with \",(0,n.jsx)(e.code,{children:\"express-validator\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const { body, validationResult } = require('express-validator');\n\napp.post(\n  '/user',\n  [body('username').isAlphanumeric(), body('email').isEmail()],\n  (req, res) => {\n    const errors = validationResult(req);\n    if (!errors.isEmpty()) {\n      return res.status(400).json({ errors: errors.array() });\n    }\n    // Proceed with safe input\n  },\n);\n`})}),`\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://cheatsheetseries.owasp.org/cheatsheets/SQL_Injection_Prevention_Cheat_Sheet.html\",children:\"OWASP SQL Injection Prevention Cheat Sheet\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/mysqljs/mysql\",children:\"Node.js MySQL Documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://sequelize.org/master/\",children:\"Sequelize Documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://express-validator.github.io/docs/\",children:\"Express Validator Documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/validatorjs/validator.js\",children:\"Validator.js Documentation\"})}),`\n`]})]})}function b(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(d,r)})):d(r)}var f=b;return j(E);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),q=(r,e)=>{for(var i in e)s(r,i,{get:e[i],enumerable:!0})},o=(r,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of m(e))!g.call(r,t)&&t!==i&&s(r,t,{get:()=>e[t],enumerable:!(a=p(e,t))||a.enumerable});return r};var S=(r,e,i)=>(i=r!=null?u(y(r)):{},o(e||!r||!r.__esModule?s(i,\"default\",{value:r,enumerable:!0}):i,r)),j=r=>o(s({},\"__esModule\",{value:!0}),r);var c=v((w,l)=>{l.exports=_jsx_runtime});var b={};q(b,{default:()=>h,frontmatter:()=>f});var n=S(c()),f={title:\"How can you prevent SQL injection vulnerabilities in JavaScript applications?\"};function d(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"To prevent SQL injection vulnerabilities in JavaScript applications, always use parameterized queries or prepared statements instead of string concatenation to construct SQL queries. This ensures that user input is treated as data and not executable code. Additionally, use ORM libraries that handle SQL injection prevention for you, and always validate and sanitize user inputs.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How can you prevent SQL injection vulnerabilities in JavaScript applications?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Use parameterized queries or prepared statements\"}),`\n`,(0,n.jsx)(e.p,{children:\"Parameterized queries or prepared statements ensure that user input is treated as data and not executable code. This is the most effective way to prevent SQL injection.\"}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Example using Node.js with the \",(0,n.jsx)(e.code,{children:\"mysql\"}),\" library:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const mysql = require('mysql');\nconst connection = mysql.createConnection({\n  host: 'localhost',\n  user: 'root',\n  password: 'password',\n  database: 'test',\n});\n\nconst userId = 1;\nconst query = 'SELECT * FROM users WHERE id = ?';\n\nconnection.query(query, [userId], (error, results) => {\n  if (error) throw error;\n  console.log(results);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Use ORM libraries\"}),`\n`,(0,n.jsx)(e.p,{children:\"Object-Relational Mapping (ORM) libraries like Sequelize, TypeORM, or Mongoose (for MongoDB) abstract away SQL queries and handle SQL injection prevention internally.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example using Sequelize:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const { Sequelize, DataTypes } = require('sequelize');\nconst sequelize = new Sequelize('database', 'username', 'password', {\n  host: 'localhost',\n  dialect: 'mysql',\n});\n\nconst User = sequelize.define('User', {\n  username: {\n    type: DataTypes.STRING,\n    allowNull: false,\n  },\n});\n\nUser.findAll({\n  where: {\n    id: 1,\n  },\n}).then((users) => {\n  console.log(users);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Validate and sanitize user inputs\"}),`\n`,(0,n.jsx)(e.p,{children:\"Always validate and sanitize user inputs to ensure they conform to expected formats and do not contain malicious code.\"}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Example using \",(0,n.jsx)(e.code,{children:\"validator\"}),\" library:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const validator = require('validator');\n\nconst userInput = 'someUserInput';\nif (validator.isAlphanumeric(userInput)) {\n  // Proceed with using the input\n} else {\n  // Handle invalid input\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Use stored procedures\"}),`\n`,(0,n.jsx)(e.p,{children:\"Stored procedures are precompiled SQL statements stored in the database. They can help prevent SQL injection by separating the SQL logic from user input.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-sql\",children:`CREATE PROCEDURE GetUserById(IN userId INT)\nBEGIN\n  SELECT * FROM users WHERE id = userId;\nEND;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Use security libraries and frameworks\"}),`\n`,(0,n.jsx)(e.p,{children:\"Leverage security libraries and frameworks that provide built-in protection against SQL injection.\"}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Example using Express.js with \",(0,n.jsx)(e.code,{children:\"express-validator\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const { body, validationResult } = require('express-validator');\n\napp.post(\n  '/user',\n  [body('username').isAlphanumeric(), body('email').isEmail()],\n  (req, res) => {\n    const errors = validationResult(req);\n    if (!errors.isEmpty()) {\n      return res.status(400).json({ errors: errors.array() });\n    }\n    // Proceed with safe input\n  },\n);\n`})}),`\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://cheatsheetseries.owasp.org/cheatsheets/SQL_Injection_Prevention_Cheat_Sheet.html\",children:\"OWASP SQL Injection Prevention Cheat Sheet\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/mysqljs/mysql\",children:\"Node.js MySQL Documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://sequelize.org/master/\",children:\"Sequelize Documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://express-validator.github.io/docs/\",children:\"Express Validator Documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/validatorjs/validator.js\",children:\"Validator.js Documentation\"})}),`\n`]})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(d,{...r})}):d(r)}return j(b);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-can-you-prevent-sql-injection-vulnerabilities-in-javascript-applications/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-can-you-prevent-sql-injection-vulnerabilities-in-javascript-applications/zh-CN.json
index 2151c7fbe..6004034df 100644
--- a/apps/web/src/__generated__/questions/quiz/how-can-you-prevent-sql-injection-vulnerabilities-in-javascript-applications/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-can-you-prevent-sql-injection-vulnerabilities-in-javascript-applications/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-you-prevent-sql-injection-vulnerabilities-in-javascript-applications/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var S=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),g=(r,e)=>{for(var s in e)i(r,s,{get:e[s],enumerable:!0})},a=(r,e,s,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of p(e))!q.call(r,l)&&l!==s&&i(r,l,{get:()=>e[l],enumerable:!(t=u(e,l))||t.enumerable});return r};var y=(r,e,s)=>(s=r!=null?h(m(r)):{},a(e||!r||!r.__esModule?i(s,\"default\",{value:r,enumerable:!0}):s,r)),j=r=>a(i({},\"__esModule\",{value:!0}),r);var c=S((x,o)=>{o.exports=_jsx_runtime});var v={};g(v,{default:()=>R,frontmatter:()=>E});var n=y(c()),E={title:\"\\u5982\\u4F55\\u9632\\u6B62\\u5728 JavaScript \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u53D1\\u751F SQL \\u6CE8\\u5165\\u6F0F\\u6D1E\\uFF1F\"};function d(r){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",h4:\"h4\",code:\"code\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E3A\\u4E86\\u9632\\u6B62 JavaScript \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u51FA\\u73B0 SQL \\u6CE8\\u5165\\u6F0F\\u6D1E\\uFF0C\\u8BF7\\u59CB\\u7EC8\\u4F7F\\u7528\\u53C2\\u6570\\u5316\\u67E5\\u8BE2\\u6216\\u9884\\u5904\\u7406\\u8BED\\u53E5\\uFF0C\\u800C\\u4E0D\\u662F\\u4F7F\\u7528\\u5B57\\u7B26\\u4E32\\u8FDE\\u63A5\\u6765\\u6784\\u9020 SQL \\u67E5\\u8BE2\\u3002\\u8FD9\\u53EF\\u786E\\u4FDD\\u7528\\u6237\\u8F93\\u5165\\u88AB\\u89C6\\u4E3A\\u6570\\u636E\\u800C\\u4E0D\\u662F\\u53EF\\u6267\\u884C\\u4EE3\\u7801\\u3002\\u6B64\\u5916\\uFF0C\\u4F7F\\u7528\\u5904\\u7406 SQL \\u6CE8\\u5165\\u9884\\u9632\\u7684 ORM \\u5E93\\uFF0C\\u5E76\\u59CB\\u7EC8\\u9A8C\\u8BC1\\u548C\\u6E05\\u7406\\u7528\\u6237\\u8F93\\u5165\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u9632\\u6B62\\u5728 JavaScript \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u53D1\\u751F SQL \\u6CE8\\u5165\\u6F0F\\u6D1E\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u53C2\\u6570\\u5316\\u67E5\\u8BE2\\u6216\\u9884\\u5904\\u7406\\u8BED\\u53E5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u53C2\\u6570\\u5316\\u67E5\\u8BE2\\u6216\\u9884\\u5904\\u7406\\u8BED\\u53E5\\u53EF\\u786E\\u4FDD\\u7528\\u6237\\u8F93\\u5165\\u88AB\\u89C6\\u4E3A\\u6570\\u636E\\u800C\\u4E0D\\u662F\\u53EF\\u6267\\u884C\\u4EE3\\u7801\\u3002\\u8FD9\\u662F\\u9632\\u6B62 SQL \\u6CE8\\u5165\\u7684\\u6700\\u6709\\u6548\\u65B9\\u6CD5\\u3002\"}),`\n`,(0,n.jsxs)(e.h4,{children:[\"\\u4F7F\\u7528 Node.js \\u548C \",(0,n.jsx)(e.code,{children:\"mysql\"}),\" \\u5E93\\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const mysql = require('mysql');\nconst connection = mysql.createConnection({\n  host: 'localhost',\n  user: 'root',\n  password: 'password',\n  database: 'test',\n});\n\nconst userId = 1;\nconst query = 'SELECT * FROM users WHERE id = ?';\n\nconnection.query(query, [userId], (error, results) => {\n  if (error) throw error;\n  console.log(results);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 ORM \\u5E93\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5BF9\\u8C61\\u5173\\u7CFB\\u6620\\u5C04 (ORM) \\u5E93\\uFF08\\u5982 Sequelize\\u3001TypeORM \\u6216 Mongoose (\\u7528\\u4E8E MongoDB)\\uFF09\\u62BD\\u8C61\\u4E86 SQL \\u67E5\\u8BE2\\uFF0C\\u5E76\\u5728\\u5185\\u90E8\\u5904\\u7406 SQL \\u6CE8\\u5165\\u9884\\u9632\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4F7F\\u7528 Sequelize \\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const { Sequelize, DataTypes } = require('sequelize');\nconst sequelize = new Sequelize('database', 'username', 'password', {\n  host: 'localhost',\n  dialect: 'mysql',\n});\n\nconst User = sequelize.define('User', {\n  username: {\n    type: DataTypes.STRING,\n    allowNull: false,\n  },\n});\n\nUser.findAll({\n  where: {\n    id: 1,\n  },\n}).then((users) => {\n  console.log(users);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u9A8C\\u8BC1\\u548C\\u6E05\\u7406\\u7528\\u6237\\u8F93\\u5165\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u59CB\\u7EC8\\u9A8C\\u8BC1\\u548C\\u6E05\\u7406\\u7528\\u6237\\u8F93\\u5165\\uFF0C\\u4EE5\\u786E\\u4FDD\\u5B83\\u4EEC\\u7B26\\u5408\\u9884\\u671F\\u683C\\u5F0F\\uFF0C\\u5E76\\u4E14\\u4E0D\\u5305\\u542B\\u6076\\u610F\\u4EE3\\u7801\\u3002\"}),`\n`,(0,n.jsxs)(e.h4,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"validator\"}),\" \\u5E93\\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const validator = require('validator');\n\nconst userInput = 'someUserInput';\nif (validator.isAlphanumeric(userInput)) {\n  // Proceed with using the input\n} else {\n  // Handle invalid input\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u5B58\\u50A8\\u8FC7\\u7A0B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5B58\\u50A8\\u8FC7\\u7A0B\\u662F\\u5B58\\u50A8\\u5728\\u6570\\u636E\\u5E93\\u4E2D\\u7684\\u9884\\u7F16\\u8BD1 SQL \\u8BED\\u53E5\\u3002\\u5B83\\u4EEC\\u53EF\\u4EE5\\u901A\\u8FC7\\u5C06 SQL \\u903B\\u8F91\\u4E0E\\u7528\\u6237\\u8F93\\u5165\\u5206\\u5F00\\u6765\\u5E2E\\u52A9\\u9632\\u6B62 SQL \\u6CE8\\u5165\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-sql\",children:`CREATE PROCEDURE GetUserById(IN userId INT)\nBEGIN\n  SELECT * FROM users WHERE id = userId;\nEND;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u5B89\\u5168\\u5E93\\u548C\\u6846\\u67B6\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5229\\u7528\\u63D0\\u4F9B\\u5185\\u7F6E SQL \\u6CE8\\u5165\\u4FDD\\u62A4\\u7684\\u5B89\\u5168\\u5E93\\u548C\\u6846\\u67B6\\u3002\"}),`\n`,(0,n.jsxs)(e.h4,{children:[\"\\u4F7F\\u7528 Express.js \\u548C \",(0,n.jsx)(e.code,{children:\"express-validator\"}),\" \\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const { body, validationResult } = require('express-validator');\n\napp.post(\n  '/user',\n  [body('username').isAlphanumeric(), body('email').isEmail()],\n  (req, res) => {\n    const errors = validationResult(req);\n    if (!errors.isEmpty()) {\n      return res.status(400).json({ errors: errors.array() });\n    }\n    // Proceed with safe input\n  },\n);\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/validatorjs/validator.js\",children:\"Validator.js \\u6587\\u6863\"})}),`\n`]})]})}function L(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(d,r)})):d(r)}var R=L;return j(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var y=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),g=(r,e)=>{for(var s in e)i(r,s,{get:e[s],enumerable:!0})},t=(r,e,s,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of m(e))!S.call(r,l)&&l!==s&&i(r,l,{get:()=>e[l],enumerable:!(o=p(e,l))||o.enumerable});return r};var E=(r,e,s)=>(s=r!=null?u(q(r)):{},t(e||!r||!r.__esModule?i(s,\"default\",{value:r,enumerable:!0}):s,r)),L=r=>t(i({},\"__esModule\",{value:!0}),r);var c=y((f,a)=>{a.exports=_jsx_runtime});var R={};g(R,{default:()=>h,frontmatter:()=>j});var n=E(c()),j={title:\"\\u5982\\u4F55\\u9632\\u6B62\\u5728 JavaScript \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u53D1\\u751F SQL \\u6CE8\\u5165\\u6F0F\\u6D1E\\uFF1F\"};function d(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E3A\\u4E86\\u9632\\u6B62 JavaScript \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u51FA\\u73B0 SQL \\u6CE8\\u5165\\u6F0F\\u6D1E\\uFF0C\\u8BF7\\u59CB\\u7EC8\\u4F7F\\u7528\\u53C2\\u6570\\u5316\\u67E5\\u8BE2\\u6216\\u9884\\u5904\\u7406\\u8BED\\u53E5\\uFF0C\\u800C\\u4E0D\\u662F\\u4F7F\\u7528\\u5B57\\u7B26\\u4E32\\u8FDE\\u63A5\\u6765\\u6784\\u9020 SQL \\u67E5\\u8BE2\\u3002\\u8FD9\\u53EF\\u786E\\u4FDD\\u7528\\u6237\\u8F93\\u5165\\u88AB\\u89C6\\u4E3A\\u6570\\u636E\\u800C\\u4E0D\\u662F\\u53EF\\u6267\\u884C\\u4EE3\\u7801\\u3002\\u6B64\\u5916\\uFF0C\\u4F7F\\u7528\\u5904\\u7406 SQL \\u6CE8\\u5165\\u9884\\u9632\\u7684 ORM \\u5E93\\uFF0C\\u5E76\\u59CB\\u7EC8\\u9A8C\\u8BC1\\u548C\\u6E05\\u7406\\u7528\\u6237\\u8F93\\u5165\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u9632\\u6B62\\u5728 JavaScript \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u53D1\\u751F SQL \\u6CE8\\u5165\\u6F0F\\u6D1E\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u53C2\\u6570\\u5316\\u67E5\\u8BE2\\u6216\\u9884\\u5904\\u7406\\u8BED\\u53E5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u53C2\\u6570\\u5316\\u67E5\\u8BE2\\u6216\\u9884\\u5904\\u7406\\u8BED\\u53E5\\u53EF\\u786E\\u4FDD\\u7528\\u6237\\u8F93\\u5165\\u88AB\\u89C6\\u4E3A\\u6570\\u636E\\u800C\\u4E0D\\u662F\\u53EF\\u6267\\u884C\\u4EE3\\u7801\\u3002\\u8FD9\\u662F\\u9632\\u6B62 SQL \\u6CE8\\u5165\\u7684\\u6700\\u6709\\u6548\\u65B9\\u6CD5\\u3002\"}),`\n`,(0,n.jsxs)(e.h4,{children:[\"\\u4F7F\\u7528 Node.js \\u548C \",(0,n.jsx)(e.code,{children:\"mysql\"}),\" \\u5E93\\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const mysql = require('mysql');\nconst connection = mysql.createConnection({\n  host: 'localhost',\n  user: 'root',\n  password: 'password',\n  database: 'test',\n});\n\nconst userId = 1;\nconst query = 'SELECT * FROM users WHERE id = ?';\n\nconnection.query(query, [userId], (error, results) => {\n  if (error) throw error;\n  console.log(results);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 ORM \\u5E93\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5BF9\\u8C61\\u5173\\u7CFB\\u6620\\u5C04 (ORM) \\u5E93\\uFF08\\u5982 Sequelize\\u3001TypeORM \\u6216 Mongoose (\\u7528\\u4E8E MongoDB)\\uFF09\\u62BD\\u8C61\\u4E86 SQL \\u67E5\\u8BE2\\uFF0C\\u5E76\\u5728\\u5185\\u90E8\\u5904\\u7406 SQL \\u6CE8\\u5165\\u9884\\u9632\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4F7F\\u7528 Sequelize \\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const { Sequelize, DataTypes } = require('sequelize');\nconst sequelize = new Sequelize('database', 'username', 'password', {\n  host: 'localhost',\n  dialect: 'mysql',\n});\n\nconst User = sequelize.define('User', {\n  username: {\n    type: DataTypes.STRING,\n    allowNull: false,\n  },\n});\n\nUser.findAll({\n  where: {\n    id: 1,\n  },\n}).then((users) => {\n  console.log(users);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u9A8C\\u8BC1\\u548C\\u6E05\\u7406\\u7528\\u6237\\u8F93\\u5165\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u59CB\\u7EC8\\u9A8C\\u8BC1\\u548C\\u6E05\\u7406\\u7528\\u6237\\u8F93\\u5165\\uFF0C\\u4EE5\\u786E\\u4FDD\\u5B83\\u4EEC\\u7B26\\u5408\\u9884\\u671F\\u683C\\u5F0F\\uFF0C\\u5E76\\u4E14\\u4E0D\\u5305\\u542B\\u6076\\u610F\\u4EE3\\u7801\\u3002\"}),`\n`,(0,n.jsxs)(e.h4,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"validator\"}),\" \\u5E93\\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const validator = require('validator');\n\nconst userInput = 'someUserInput';\nif (validator.isAlphanumeric(userInput)) {\n  // Proceed with using the input\n} else {\n  // Handle invalid input\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u5B58\\u50A8\\u8FC7\\u7A0B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5B58\\u50A8\\u8FC7\\u7A0B\\u662F\\u5B58\\u50A8\\u5728\\u6570\\u636E\\u5E93\\u4E2D\\u7684\\u9884\\u7F16\\u8BD1 SQL \\u8BED\\u53E5\\u3002\\u5B83\\u4EEC\\u53EF\\u4EE5\\u901A\\u8FC7\\u5C06 SQL \\u903B\\u8F91\\u4E0E\\u7528\\u6237\\u8F93\\u5165\\u5206\\u5F00\\u6765\\u5E2E\\u52A9\\u9632\\u6B62 SQL \\u6CE8\\u5165\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-sql\",children:`CREATE PROCEDURE GetUserById(IN userId INT)\nBEGIN\n  SELECT * FROM users WHERE id = userId;\nEND;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u5B89\\u5168\\u5E93\\u548C\\u6846\\u67B6\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5229\\u7528\\u63D0\\u4F9B\\u5185\\u7F6E SQL \\u6CE8\\u5165\\u4FDD\\u62A4\\u7684\\u5B89\\u5168\\u5E93\\u548C\\u6846\\u67B6\\u3002\"}),`\n`,(0,n.jsxs)(e.h4,{children:[\"\\u4F7F\\u7528 Express.js \\u548C \",(0,n.jsx)(e.code,{children:\"express-validator\"}),\" \\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const { body, validationResult } = require('express-validator');\n\napp.post(\n  '/user',\n  [body('username').isAlphanumeric(), body('email').isEmail()],\n  (req, res) => {\n    const errors = validationResult(req);\n    if (!errors.isEmpty()) {\n      return res.status(400).json({ errors: errors.array() });\n    }\n    // Proceed with safe input\n  },\n);\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/validatorjs/validator.js\",children:\"Validator.js \\u6587\\u6863\"})}),`\n`]})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(d,{...r})}):d(r)}return L(R);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-can-you-share-code-between-files/en-US.json b/apps/web/src/__generated__/questions/quiz/how-can-you-share-code-between-files/en-US.json
index 6e4eacaff..0a5632fee 100644
--- a/apps/web/src/__generated__/questions/quiz/how-can-you-share-code-between-files/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-can-you-share-code-between-files/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-you-share-code-between-files/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var j=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var o in e)l(r,o,{get:e[o],enumerable:!0})},a=(r,e,o,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!g.call(r,c)&&c!==o&&l(r,c,{get:()=>e[c],enumerable:!(t=u(e,c))||t.enumerable});return r};var x=(r,e,o)=>(o=r!=null?h(m(r)):{},a(e||!r||!r.__esModule?l(o,\"default\",{value:r,enumerable:!0}):o,r)),b=r=>a(l({},\"__esModule\",{value:!0}),r);var s=j((I,i)=>{i.exports=_jsx_runtime});var y={};f(y,{default:()=>w,frontmatter:()=>v});var n=x(s()),v={title:\"How can you share code between JavaScript files?\"};function d(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To share code between JavaScript files, you can use modules. In modern JavaScript, you can use ES6 modules with \",(0,n.jsx)(e.code,{children:\"export\"}),\" and \",(0,n.jsx)(e.code,{children:\"import\"}),\" statements. For example, you can export a function from one file and import it into another:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// file1.js\nexport function greet() {\n  console.log('Hello, world!');\n}\n\n// file2.js\nimport { greet } from './file1.js';\ngreet();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Alternatively, in Node.js, you can use \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\" and \",(0,n.jsx)(e.code,{children:\"require\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// file1.js\nmodule.exports = function greet() {\n  console.log('Hello, world!');\n};\n\n// file2.js\nconst greet = require('./file1.js');\ngreet();\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Using ES6 modules\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Exporting code\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To share code, you can use the \",(0,n.jsx)(e.code,{children:\"export\"}),\" keyword to export variables, functions, or classes from a module:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// utils.js\nexport function add(a, b) {\n  return a + b;\n}\n\nexport const PI = 3.14;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Importing code\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can then import the exported code in another file using the \",(0,n.jsx)(e.code,{children:\"import\"}),\" keyword:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// main.js\nimport { add, PI } from './utils.js';\n\nconsole.log(add(2, 3)); // 5\nconsole.log(PI); // 3.14\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Default exports\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can also export a single default value from a module:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// math.js\nexport default function subtract(a, b) {\n  return a - b;\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"And import it without curly braces:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// main.js\nimport subtract from './math.js';\n\nconsole.log(subtract(5, 2)); // 3\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Using CommonJS modules in Node.js\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Exporting code\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In Node.js, you can use \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\" to export code:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// utils.js\nmodule.exports.add = function (a, b) {\n  return a + b;\n};\n\nmodule.exports.PI = 3.14;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Importing code\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can then import the exported code using \",(0,n.jsx)(e.code,{children:\"require\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// main.js\nconst utils = require('./utils.js');\n\nconsole.log(utils.add(2, 3)); // 5\nconsole.log(utils.PI); // 3.14\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Exporting a single value\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can also export a single value:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// math.js\nmodule.exports = function subtract(a, b) {\n  return a - b;\n};\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"And import it directly:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// main.js\nconst subtract = require('./math.js');\n\nconsole.log(subtract(5, 2)); // 3\n`})}),`\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/Web/JavaScript/Guide/Modules\",children:\"MDN Web Docs on ES6 modules\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nodejs.org/api/modules.html\",children:\"Node.js documentation on modules\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/javascript-modules-a-beginner-s-guide-783f7d7a5fcc/\",children:\"JavaScript modules: A beginner\\u2019s guide\"})}),`\n`]})]})}function N(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(d,r)})):d(r)}var w=N;return b(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),x=(r,e)=>{for(var o in e)l(r,o,{get:e[o],enumerable:!0})},a=(r,e,o,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!j.call(r,c)&&c!==o&&l(r,c,{get:()=>e[c],enumerable:!(t=p(e,c))||t.enumerable});return r};var b=(r,e,o)=>(o=r!=null?u(g(r)):{},a(e||!r||!r.__esModule?l(o,\"default\",{value:r,enumerable:!0}):o,r)),v=r=>a(l({},\"__esModule\",{value:!0}),r);var d=f((S,i)=>{i.exports=_jsx_runtime});var w={};x(w,{default:()=>h,frontmatter:()=>N});var n=b(d()),N={title:\"How can you share code between JavaScript files?\"};function s(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To share code between JavaScript files, you can use modules. In modern JavaScript, you can use ES6 modules with \",(0,n.jsx)(e.code,{children:\"export\"}),\" and \",(0,n.jsx)(e.code,{children:\"import\"}),\" statements. For example, you can export a function from one file and import it into another:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// file1.js\nexport function greet() {\n  console.log('Hello, world!');\n}\n\n// file2.js\nimport { greet } from './file1.js';\ngreet();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Alternatively, in Node.js, you can use \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\" and \",(0,n.jsx)(e.code,{children:\"require\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// file1.js\nmodule.exports = function greet() {\n  console.log('Hello, world!');\n};\n\n// file2.js\nconst greet = require('./file1.js');\ngreet();\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Using ES6 modules\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Exporting code\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To share code, you can use the \",(0,n.jsx)(e.code,{children:\"export\"}),\" keyword to export variables, functions, or classes from a module:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// utils.js\nexport function add(a, b) {\n  return a + b;\n}\n\nexport const PI = 3.14;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Importing code\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can then import the exported code in another file using the \",(0,n.jsx)(e.code,{children:\"import\"}),\" keyword:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// main.js\nimport { add, PI } from './utils.js';\n\nconsole.log(add(2, 3)); // 5\nconsole.log(PI); // 3.14\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Default exports\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can also export a single default value from a module:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// math.js\nexport default function subtract(a, b) {\n  return a - b;\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"And import it without curly braces:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// main.js\nimport subtract from './math.js';\n\nconsole.log(subtract(5, 2)); // 3\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Using CommonJS modules in Node.js\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Exporting code\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In Node.js, you can use \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\" to export code:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// utils.js\nmodule.exports.add = function (a, b) {\n  return a + b;\n};\n\nmodule.exports.PI = 3.14;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Importing code\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can then import the exported code using \",(0,n.jsx)(e.code,{children:\"require\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// main.js\nconst utils = require('./utils.js');\n\nconsole.log(utils.add(2, 3)); // 5\nconsole.log(utils.PI); // 3.14\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Exporting a single value\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can also export a single value:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// math.js\nmodule.exports = function subtract(a, b) {\n  return a - b;\n};\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"And import it directly:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// main.js\nconst subtract = require('./math.js');\n\nconsole.log(subtract(5, 2)); // 3\n`})}),`\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/Web/JavaScript/Guide/Modules\",children:\"MDN Web Docs on ES6 modules\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nodejs.org/api/modules.html\",children:\"Node.js documentation on modules\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/javascript-modules-a-beginner-s-guide-783f7d7a5fcc/\",children:\"JavaScript modules: A beginner\\u2019s guide\"})}),`\n`]})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(s,{...r})}):s(r)}return v(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-can-you-share-code-between-files/pt-BR.json b/apps/web/src/__generated__/questions/quiz/how-can-you-share-code-between-files/pt-BR.json
index 49e535744..9d2e88dce 100644
--- a/apps/web/src/__generated__/questions/quiz/how-can-you-share-code-between-files/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/how-can-you-share-code-between-files/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-you-share-code-between-files/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var b=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),f=(o,e)=>{for(var n in e)r(o,n,{get:e[n],enumerable:!0})},d=(o,e,n,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of p(e))!x.call(o,t)&&t!==n&&r(o,t,{get:()=>e[t],enumerable:!(s=l(e,t))||s.enumerable});return o};var j=(o,e,n)=>(n=o!=null?u(v(o)):{},d(e||!o||!o.__esModule?r(n,\"default\",{value:o,enumerable:!0}):n,o)),g=o=>d(r({},\"__esModule\",{value:!0}),o);var m=b((D,i)=>{i.exports=_jsx_runtime});var C={};f(C,{default:()=>q,frontmatter:()=>h});var a=j(m()),h={title:\"Como voc\\xEA pode compartilhar c\\xF3digo entre arquivos?\"};function c(o){let e=Object.assign({p:\"p\",code:\"code\"},o.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.p,{children:\"Isto depende do ambiente JavaScript.\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"No cliente (ambiente do navegador), desde que as vari\\xE1veis/fun\\xE7\\xF5es sejam declaradas no escopo global (\",(0,a.jsx)(e.code,{children:\"window\"}),\"), todos os scripts podem se referir a elas. Alternativamente, adote a Defini\\xE7\\xE3o de M\\xF3dulo Ass\\xEDncrono (AMD) por meio do RequireJS para uma abordagem mais modular.\"]}),`\n`,(0,a.jsxs)(e.p,{children:[\"No servidor (Node.js), a maneira comum tem sido usar o CommonJS. Cada arquivo \\xE9 tratado como um m\\xF3dulo e pode exportar vari\\xE1veis e fun\\xE7\\xF5es anexando-os ao objeto \",(0,a.jsx)(e.code,{children:\"module.exports\"}),\".\"]}),`\n`,(0,a.jsx)(e.p,{children:\"ES2015 define uma sintaxe de m\\xF3dulo que visa substituir tanto o AMD quanto o CommonJS. Isso eventualmente ser\\xE1 suportado em ambos os ambientes de navegador e Node.\"})]})}function _(o={}){let{wrapper:e}=o.components||{};return e?(0,a.jsx)(e,Object.assign({},o,{children:(0,a.jsx)(c,o)})):c(o)}var q=_;return g(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var h=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),b=(o,e)=>{for(var n in e)r(o,n,{get:e[n],enumerable:!0})},d=(o,e,n,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of v(e))!f.call(o,t)&&t!==n&&r(o,t,{get:()=>e[t],enumerable:!(s=p(e,t))||s.enumerable});return o};var j=(o,e,n)=>(n=o!=null?l(x(o)):{},d(e||!o||!o.__esModule?r(n,\"default\",{value:o,enumerable:!0}):n,o)),g=o=>d(r({},\"__esModule\",{value:!0}),o);var m=h((M,i)=>{i.exports=_jsx_runtime});var q={};b(q,{default:()=>u,frontmatter:()=>_});var a=j(m()),_={title:\"Como voc\\xEA pode compartilhar c\\xF3digo entre arquivos?\"};function c(o){let e={code:\"code\",p:\"p\",...o.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.p,{children:\"Isto depende do ambiente JavaScript.\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"No cliente (ambiente do navegador), desde que as vari\\xE1veis/fun\\xE7\\xF5es sejam declaradas no escopo global (\",(0,a.jsx)(e.code,{children:\"window\"}),\"), todos os scripts podem se referir a elas. Alternativamente, adote a Defini\\xE7\\xE3o de M\\xF3dulo Ass\\xEDncrono (AMD) por meio do RequireJS para uma abordagem mais modular.\"]}),`\n`,(0,a.jsxs)(e.p,{children:[\"No servidor (Node.js), a maneira comum tem sido usar o CommonJS. Cada arquivo \\xE9 tratado como um m\\xF3dulo e pode exportar vari\\xE1veis e fun\\xE7\\xF5es anexando-os ao objeto \",(0,a.jsx)(e.code,{children:\"module.exports\"}),\".\"]}),`\n`,(0,a.jsx)(e.p,{children:\"ES2015 define uma sintaxe de m\\xF3dulo que visa substituir tanto o AMD quanto o CommonJS. Isso eventualmente ser\\xE1 suportado em ambos os ambientes de navegador e Node.\"})]})}function u(o={}){let{wrapper:e}=o.components||{};return e?(0,a.jsx)(e,{...o,children:(0,a.jsx)(c,{...o})}):c(o)}return g(q);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-can-you-share-code-between-files/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-can-you-share-code-between-files/zh-CN.json
index b816e06a7..e0ee8c932 100644
--- a/apps/web/src/__generated__/questions/quiz/how-can-you-share-code-between-files/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-can-you-share-code-between-files/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-you-share-code-between-files/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var j=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),f=(r,n)=>{for(var c in n)i(r,c,{get:n[c],enumerable:!0})},a=(r,n,c,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of u(n))!g.call(r,l)&&l!==c&&i(r,l,{get:()=>n[l],enumerable:!(o=p(n,l))||o.enumerable});return r};var x=(r,n,c)=>(c=r!=null?h(m(r)):{},a(n||!r||!r.__esModule?i(c,\"default\",{value:r,enumerable:!0}):c,r)),b=r=>a(i({},\"__esModule\",{value:!0}),r);var s=j((J,d)=>{d.exports=_jsx_runtime});var w={};f(w,{default:()=>S,frontmatter:()=>v});var e=x(s()),v={title:\"\\u5982\\u4F55\\u5728 JavaScript \\u6587\\u4EF6\\u4E4B\\u95F4\\u5171\\u4EAB\\u4EE3\\u7801\\uFF1F\"};function t(r){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8981\\u5728 JavaScript \\u6587\\u4EF6\\u4E4B\\u95F4\\u5171\\u4EAB\\u4EE3\\u7801\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u6A21\\u5757\\u3002\\u5728\\u73B0\\u4EE3 JavaScript \\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5E26\\u6709 \",(0,e.jsx)(n.code,{children:\"export\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"import\"}),\" \\u8BED\\u53E5\\u7684 ES6 \\u6A21\\u5757\\u3002\\u4F8B\\u5982\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4ECE\\u4E00\\u4E2A\\u6587\\u4EF6\\u5BFC\\u51FA\\u4E00\\u4E2A\\u51FD\\u6570\\u5E76\\u5C06\\u5176\\u5BFC\\u5165\\u5230\\u53E6\\u4E00\\u4E2A\\u6587\\u4EF6\\u4E2D\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// file1.js\nexport function greet() {\n  console.log('Hello, world!');\n}\n\n// file2.js\nimport { greet } from './file1.js';\ngreet();\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u6216\\u8005\\uFF0C\\u5728 Node.js \\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"module.exports\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"require\"}),\"\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// file1.js\nmodule.exports = function greet() {\n  console.log('Hello, world!');\n};\n\n// file2.js\nconst greet = require('./file1.js');\ngreet();\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F7F\\u7528 ES6 \\u6A21\\u5757\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5BFC\\u51FA\\u4EE3\\u7801\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8981\\u5171\\u4EAB\\u4EE3\\u7801\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"export\"}),\" \\u5173\\u952E\\u5B57\\u4ECE\\u6A21\\u5757\\u4E2D\\u5BFC\\u51FA\\u53D8\\u91CF\\u3001\\u51FD\\u6570\\u6216\\u7C7B\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// utils.js\nexport function add(a, b) {\n  return a + b;\n}\n\nexport const PI = 3.14;\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5BFC\\u5165\\u4EE3\\u7801\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7136\\u540E\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"import\"}),\" \\u5173\\u952E\\u5B57\\u5728\\u53E6\\u4E00\\u4E2A\\u6587\\u4EF6\\u4E2D\\u5BFC\\u5165\\u5BFC\\u51FA\\u7684\\u4EE3\\u7801\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// main.js\nimport { add, PI } from './utils.js';\n\nconsole.log(add(2, 3)); // 5\nconsole.log(PI); // 3.14\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9ED8\\u8BA4\\u5BFC\\u51FA\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u4ECE\\u6A21\\u5757\\u5BFC\\u51FA\\u4E00\\u4E2A\\u9ED8\\u8BA4\\u503C\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// math.js\nexport default function subtract(a, b) {\n  return a - b;\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5E76\\u5728\\u6CA1\\u6709\\u5927\\u62EC\\u53F7\\u7684\\u60C5\\u51B5\\u4E0B\\u5BFC\\u5165\\u5B83\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// main.js\nimport subtract from './math.js';\n\nconsole.log(subtract(5, 2)); // 3\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5728 Node.js \\u4E2D\\u4F7F\\u7528 CommonJS \\u6A21\\u5757\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5BFC\\u51FA\\u4EE3\\u7801\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 Node.js \\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"module.exports\"}),\" \\u5BFC\\u51FA\\u4EE3\\u7801\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// utils.js\nmodule.exports.add = function (a, b) {\n  return a + b;\n};\n\nmodule.exports.PI = 3.14;\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5BFC\\u5165\\u4EE3\\u7801\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7136\\u540E\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"require\"}),\" \\u5BFC\\u5165\\u5BFC\\u51FA\\u7684\\u4EE3\\u7801\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// main.js\nconst utils = require('./utils.js');\n\nconsole.log(utils.add(2, 3)); // 5\nconsole.log(utils.PI); // 3.14\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5BFC\\u51FA\\u5355\\u4E2A\\u503C\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60A8\\u4E5F\\u53EF\\u4EE5\\u5BFC\\u51FA\\u4E00\\u4E2A\\u503C\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// math.js\nmodule.exports = function subtract(a, b) {\n  return a - b;\n};\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5E76\\u76F4\\u63A5\\u5BFC\\u5165\\u5B83\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// main.js\nconst subtract = require('./math.js');\n\nconsole.log(subtract(5, 2)); // 3\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules\",children:\"MDN Web Docs on ES6 modules\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://nodejs.org/api/modules.html\",children:\"Node.js documentation on modules\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/javascript-modules-a-beginner-s-guide-783f7d7a5fcc/\",children:\"JavaScript modules: A beginner\\u2019s guide\"})}),`\n`]})]})}function N(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(t,r)})):t(r)}var S=N;return b(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var f=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),x=(r,n)=>{for(var c in n)o(r,c,{get:n[c],enumerable:!0})},a=(r,n,c,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of m(n))!j.call(r,l)&&l!==c&&o(r,l,{get:()=>n[l],enumerable:!(i=u(n,l))||i.enumerable});return r};var b=(r,n,c)=>(c=r!=null?p(g(r)):{},a(n||!r||!r.__esModule?o(c,\"default\",{value:r,enumerable:!0}):c,r)),v=r=>a(o({},\"__esModule\",{value:!0}),r);var t=f((_,d)=>{d.exports=_jsx_runtime});var S={};x(S,{default:()=>h,frontmatter:()=>N});var e=b(t()),N={title:\"\\u5982\\u4F55\\u5728 JavaScript \\u6587\\u4EF6\\u4E4B\\u95F4\\u5171\\u4EAB\\u4EE3\\u7801\\uFF1F\"};function s(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8981\\u5728 JavaScript \\u6587\\u4EF6\\u4E4B\\u95F4\\u5171\\u4EAB\\u4EE3\\u7801\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u6A21\\u5757\\u3002\\u5728\\u73B0\\u4EE3 JavaScript \\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5E26\\u6709 \",(0,e.jsx)(n.code,{children:\"export\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"import\"}),\" \\u8BED\\u53E5\\u7684 ES6 \\u6A21\\u5757\\u3002\\u4F8B\\u5982\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4ECE\\u4E00\\u4E2A\\u6587\\u4EF6\\u5BFC\\u51FA\\u4E00\\u4E2A\\u51FD\\u6570\\u5E76\\u5C06\\u5176\\u5BFC\\u5165\\u5230\\u53E6\\u4E00\\u4E2A\\u6587\\u4EF6\\u4E2D\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// file1.js\nexport function greet() {\n  console.log('Hello, world!');\n}\n\n// file2.js\nimport { greet } from './file1.js';\ngreet();\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u6216\\u8005\\uFF0C\\u5728 Node.js \\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"module.exports\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"require\"}),\"\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// file1.js\nmodule.exports = function greet() {\n  console.log('Hello, world!');\n};\n\n// file2.js\nconst greet = require('./file1.js');\ngreet();\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F7F\\u7528 ES6 \\u6A21\\u5757\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5BFC\\u51FA\\u4EE3\\u7801\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8981\\u5171\\u4EAB\\u4EE3\\u7801\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"export\"}),\" \\u5173\\u952E\\u5B57\\u4ECE\\u6A21\\u5757\\u4E2D\\u5BFC\\u51FA\\u53D8\\u91CF\\u3001\\u51FD\\u6570\\u6216\\u7C7B\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// utils.js\nexport function add(a, b) {\n  return a + b;\n}\n\nexport const PI = 3.14;\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5BFC\\u5165\\u4EE3\\u7801\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7136\\u540E\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"import\"}),\" \\u5173\\u952E\\u5B57\\u5728\\u53E6\\u4E00\\u4E2A\\u6587\\u4EF6\\u4E2D\\u5BFC\\u5165\\u5BFC\\u51FA\\u7684\\u4EE3\\u7801\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// main.js\nimport { add, PI } from './utils.js';\n\nconsole.log(add(2, 3)); // 5\nconsole.log(PI); // 3.14\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9ED8\\u8BA4\\u5BFC\\u51FA\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u4ECE\\u6A21\\u5757\\u5BFC\\u51FA\\u4E00\\u4E2A\\u9ED8\\u8BA4\\u503C\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// math.js\nexport default function subtract(a, b) {\n  return a - b;\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5E76\\u5728\\u6CA1\\u6709\\u5927\\u62EC\\u53F7\\u7684\\u60C5\\u51B5\\u4E0B\\u5BFC\\u5165\\u5B83\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// main.js\nimport subtract from './math.js';\n\nconsole.log(subtract(5, 2)); // 3\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5728 Node.js \\u4E2D\\u4F7F\\u7528 CommonJS \\u6A21\\u5757\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5BFC\\u51FA\\u4EE3\\u7801\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 Node.js \\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"module.exports\"}),\" \\u5BFC\\u51FA\\u4EE3\\u7801\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// utils.js\nmodule.exports.add = function (a, b) {\n  return a + b;\n};\n\nmodule.exports.PI = 3.14;\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5BFC\\u5165\\u4EE3\\u7801\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7136\\u540E\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"require\"}),\" \\u5BFC\\u5165\\u5BFC\\u51FA\\u7684\\u4EE3\\u7801\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// main.js\nconst utils = require('./utils.js');\n\nconsole.log(utils.add(2, 3)); // 5\nconsole.log(utils.PI); // 3.14\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5BFC\\u51FA\\u5355\\u4E2A\\u503C\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60A8\\u4E5F\\u53EF\\u4EE5\\u5BFC\\u51FA\\u4E00\\u4E2A\\u503C\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// math.js\nmodule.exports = function subtract(a, b) {\n  return a - b;\n};\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5E76\\u76F4\\u63A5\\u5BFC\\u5165\\u5B83\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// main.js\nconst subtract = require('./math.js');\n\nconsole.log(subtract(5, 2)); // 3\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules\",children:\"MDN Web Docs on ES6 modules\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://nodejs.org/api/modules.html\",children:\"Node.js documentation on modules\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/javascript-modules-a-beginner-s-guide-783f7d7a5fcc/\",children:\"JavaScript modules: A beginner\\u2019s guide\"})}),`\n`]})]})}function h(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(s,{...r})}):s(r)}return v(S);})();\n;return Component;"
 }
\ No newline at end of file
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 341100b6f..ef5cf23aa 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-you-test-asynchronous-code-in-javascript/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var a in e)s(t,a,{get:e[a],enumerable:!0})},r=(t,e,a,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of u(e))!m.call(t,c)&&c!==a&&s(t,c,{get:()=>e[c],enumerable:!(o=p(e,c))||o.enumerable});return t};var D=(t,e,a)=>(a=t!=null?l(f(t)):{},r(e||!t||!t.__esModule?s(a,\"default\",{value:t,enumerable:!0}):a,t)),w=t=>r(s({},\"__esModule\",{value:!0}),t);var i=y((M,h)=>{h.exports=_jsx_runtime});var k={};g(k,{default:()=>b,frontmatter:()=>j});var n=D(i()),j={title:\"How can you test asynchronous code in JavaScript?\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",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:[\"To test asynchronous code in JavaScript, you can use testing frameworks like Jest or Mocha. These frameworks provide built-in support for handling asynchronous operations. You can use \",(0,n.jsx)(e.code,{children:\"async\"}),\"/\",(0,n.jsx)(e.code,{children:\"await\"}),\" or return promises in your test functions. For example, in Jest, you can write:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`test('fetches data successfully', async () => {\n  const data = await fetchData();\n  expect(data).toBeDefined();\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Alternatively, you can use callbacks and the \",(0,n.jsx)(e.code,{children:\"done\"}),\" function to signal the end of an asynchronous test.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How can you test asynchronous code in JavaScript?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Testing asynchronous code in JavaScript can be challenging, but modern testing frameworks like Jest and Mocha provide robust support for handling asynchronous operations. Here are some common methods to test asynchronous code:\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"async\"}),\"/\",(0,n.jsx)(e.code,{children:\"await\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"One of the most straightforward ways to test asynchronous code is by using \",(0,n.jsx)(e.code,{children:\"async\"}),\"/\",(0,n.jsx)(e.code,{children:\"await\"}),\". This approach makes your test code look synchronous, which can be easier to read and write.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example with Jest\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// fetchData.js\nexport const fetchData = async () => {\n  const response = await fetch('https://api.example.com/data');\n  return response.json();\n};\n\n// fetchData.test.js\nimport { fetchData } from './fetchData';\n\ntest('fetches data successfully', async () => {\n  const data = await fetchData();\n  expect(data).toBeDefined();\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Returning a promise\"}),`\n`,(0,n.jsx)(e.p,{children:\"Another way to handle asynchronous tests is by returning a promise from your test function. Jest and Mocha will wait for the promise to resolve before finishing the test.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example with Jest\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// fetchData.js\nexport const fetchData = () => {\n  return fetch('https://api.example.com/data').then((response) =>\n    response.json(),\n  );\n};\n\n// fetchData.test.js\nimport { fetchData } from './fetchData';\n\ntest('fetches data successfully', () => {\n  return fetchData().then((data) => {\n    expect(data).toBeDefined();\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Using callbacks\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"For older codebases or specific scenarios, you might need to use callbacks. In Jest, you can use the \",(0,n.jsx)(e.code,{children:\"done\"}),\" function to signal the end of an asynchronous test.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example with Jest\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// fetchData.js\nexport const fetchData = (callback) => {\n  fetch('https://api.example.com/data')\n    .then((response) => response.json())\n    .then((data) => callback(null, data))\n    .catch((error) => callback(error));\n};\n\n// fetchData.test.js\nimport { fetchData } from './fetchData';\n\ntest('fetches data successfully', (done) => {\n  fetchData((error, data) => {\n    expect(error).toBeNull();\n    expect(data).toBeDefined();\n    done();\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Using Mocha\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Mocha also supports \",(0,n.jsx)(e.code,{children:\"async\"}),\"/\",(0,n.jsx)(e.code,{children:\"await\"}),\", returning promises, and using callbacks. Here is an example using \",(0,n.jsx)(e.code,{children:\"async\"}),\"/\",(0,n.jsx)(e.code,{children:\"await\"}),\" with Mocha:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// fetchData.js\nexport const fetchData = async () => {\n  const response = await fetch('https://api.example.com/data');\n  return response.json();\n};\n\n// fetchData.test.js\nimport { fetchData } from './fetchData';\nimport { expect } from 'chai';\n\ndescribe('fetchData', () => {\n  it('fetches data successfully', async () => {\n    const data = await fetchData();\n    expect(data).to.be.an('object');\n  });\n});\n`})}),`\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://jestjs.io/docs/asynchronous\",children:\"Jest documentation on testing asynchronous code\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://mochajs.org/#asynchronous-code\",children:\"Mocha documentation on testing asynchronous code\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await\",children:\"MDN Web Docs on async/await\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.chaijs.com/\",children:\"Chai assertion library\"})}),`\n`]})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var b=x;return w(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),D=(t,e)=>{for(var a in e)s(t,a,{get:e[a],enumerable:!0})},r=(t,e,a,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of f(e))!y.call(t,c)&&c!==a&&s(t,c,{get:()=>e[c],enumerable:!(o=u(e,c))||o.enumerable});return t};var w=(t,e,a)=>(a=t!=null?p(m(t)):{},r(e||!t||!t.__esModule?s(a,\"default\",{value:t,enumerable:!0}):a,t)),x=t=>r(s({},\"__esModule\",{value:!0}),t);var i=g((J,h)=>{h.exports=_jsx_runtime});var b={};D(b,{default:()=>l,frontmatter:()=>j});var n=w(i()),j={title:\"How can you test asynchronous code in JavaScript?\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To test asynchronous code in JavaScript, you can use testing frameworks like Jest or Mocha. These frameworks provide built-in support for handling asynchronous operations. You can use \",(0,n.jsx)(e.code,{children:\"async\"}),\"/\",(0,n.jsx)(e.code,{children:\"await\"}),\" or return promises in your test functions. For example, in Jest, you can write:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`test('fetches data successfully', async () => {\n  const data = await fetchData();\n  expect(data).toBeDefined();\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Alternatively, you can use callbacks and the \",(0,n.jsx)(e.code,{children:\"done\"}),\" function to signal the end of an asynchronous test.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How can you test asynchronous code in JavaScript?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Testing asynchronous code in JavaScript can be challenging, but modern testing frameworks like Jest and Mocha provide robust support for handling asynchronous operations. Here are some common methods to test asynchronous code:\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"async\"}),\"/\",(0,n.jsx)(e.code,{children:\"await\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"One of the most straightforward ways to test asynchronous code is by using \",(0,n.jsx)(e.code,{children:\"async\"}),\"/\",(0,n.jsx)(e.code,{children:\"await\"}),\". This approach makes your test code look synchronous, which can be easier to read and write.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example with Jest\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// fetchData.js\nexport const fetchData = async () => {\n  const response = await fetch('https://api.example.com/data');\n  return response.json();\n};\n\n// fetchData.test.js\nimport { fetchData } from './fetchData';\n\ntest('fetches data successfully', async () => {\n  const data = await fetchData();\n  expect(data).toBeDefined();\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Returning a promise\"}),`\n`,(0,n.jsx)(e.p,{children:\"Another way to handle asynchronous tests is by returning a promise from your test function. Jest and Mocha will wait for the promise to resolve before finishing the test.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example with Jest\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// fetchData.js\nexport const fetchData = () => {\n  return fetch('https://api.example.com/data').then((response) =>\n    response.json(),\n  );\n};\n\n// fetchData.test.js\nimport { fetchData } from './fetchData';\n\ntest('fetches data successfully', () => {\n  return fetchData().then((data) => {\n    expect(data).toBeDefined();\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Using callbacks\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"For older codebases or specific scenarios, you might need to use callbacks. In Jest, you can use the \",(0,n.jsx)(e.code,{children:\"done\"}),\" function to signal the end of an asynchronous test.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example with Jest\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// fetchData.js\nexport const fetchData = (callback) => {\n  fetch('https://api.example.com/data')\n    .then((response) => response.json())\n    .then((data) => callback(null, data))\n    .catch((error) => callback(error));\n};\n\n// fetchData.test.js\nimport { fetchData } from './fetchData';\n\ntest('fetches data successfully', (done) => {\n  fetchData((error, data) => {\n    expect(error).toBeNull();\n    expect(data).toBeDefined();\n    done();\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Using Mocha\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Mocha also supports \",(0,n.jsx)(e.code,{children:\"async\"}),\"/\",(0,n.jsx)(e.code,{children:\"await\"}),\", returning promises, and using callbacks. Here is an example using \",(0,n.jsx)(e.code,{children:\"async\"}),\"/\",(0,n.jsx)(e.code,{children:\"await\"}),\" with Mocha:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// fetchData.js\nexport const fetchData = async () => {\n  const response = await fetch('https://api.example.com/data');\n  return response.json();\n};\n\n// fetchData.test.js\nimport { fetchData } from './fetchData';\nimport { expect } from 'chai';\n\ndescribe('fetchData', () => {\n  it('fetches data successfully', async () => {\n    const data = await fetchData();\n    expect(data).to.be.an('object');\n  });\n});\n`})}),`\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://jestjs.io/docs/asynchronous\",children:\"Jest documentation on testing asynchronous code\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://mochajs.org/#asynchronous-code\",children:\"Mocha documentation on testing asynchronous code\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await\",children:\"MDN Web Docs on async/await\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.chaijs.com/\",children:\"Chai assertion library\"})}),`\n`]})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return x(b);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-can-you-test-asynchronous-code-in-javascript/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-can-you-test-asynchronous-code-in-javascript/zh-CN.json
index 0b8ec110c..0d4b195af 100644
--- a/apps/web/src/__generated__/questions/quiz/how-can-you-test-asynchronous-code-in-javascript/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-can-you-test-asynchronous-code-in-javascript/zh-CN.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-you-test-asynchronous-code-in-javascript/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var u=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),j=(t,e)=>{for(var a in e)s(t,a,{get:e[a],enumerable:!0})},h=(t,e,a,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of f(e))!D.call(t,c)&&c!==a&&s(t,c,{get:()=>e[c],enumerable:!(r=p(e,c))||r.enumerable});return t};var x=(t,e,a)=>(a=t!=null?l(m(t)):{},h(e||!t||!t.__esModule?s(a,\"default\",{value:t,enumerable:!0}):a,t)),y=t=>h(s({},\"__esModule\",{value:!0}),t);var d=u((_,o)=>{o.exports=_jsx_runtime});var M={};j(M,{default:()=>J,frontmatter:()=>g});var n=x(d()),g={title:\"\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u6D4B\\u8BD5\\u5F02\\u6B65\\u4EE3\\u7801\\uFF1F\"};function i(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",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:[\"\\u8981\\u5728 JavaScript \\u4E2D\\u6D4B\\u8BD5\\u5F02\\u6B65\\u4EE3\\u7801\\uFF0C\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528 Jest \\u6216 Mocha \\u7B49\\u6D4B\\u8BD5\\u6846\\u67B6\\u3002\\u8FD9\\u4E9B\\u6846\\u67B6\\u63D0\\u4F9B\\u4E86\\u5BF9\\u5904\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u7684\\u5185\\u7F6E\\u652F\\u6301\\u3002\\u4F60\\u53EF\\u4EE5\\u5728\\u6D4B\\u8BD5\\u51FD\\u6570\\u4E2D\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"async\"}),\"/\",(0,n.jsx)(e.code,{children:\"await\"}),\" \\u6216\\u8FD4\\u56DE promise\\u3002\\u4F8B\\u5982\\uFF0C\\u5728 Jest \\u4E2D\\uFF0C\\u4F60\\u53EF\\u4EE5\\u7F16\\u5199\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`test('fetches data successfully', async () => {\n  const data = await fetchData();\n  expect(data).toBeDefined();\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6216\\u8005\\uFF0C\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528\\u56DE\\u8C03\\u51FD\\u6570\\u548C \",(0,n.jsx)(e.code,{children:\"done\"}),\" \\u51FD\\u6570\\u6765\\u6307\\u793A\\u5F02\\u6B65\\u6D4B\\u8BD5\\u7684\\u7ED3\\u675F\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u6D4B\\u8BD5\\u5F02\\u6B65\\u4EE3\\u7801\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 JavaScript \\u4E2D\\u6D4B\\u8BD5\\u5F02\\u6B65\\u4EE3\\u7801\\u53EF\\u80FD\\u5177\\u6709\\u6311\\u6218\\u6027\\uFF0C\\u4F46\\u50CF Jest \\u548C Mocha \\u8FD9\\u6837\\u7684\\u73B0\\u4EE3\\u6D4B\\u8BD5\\u6846\\u67B6\\u4E3A\\u5904\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u63D0\\u4F9B\\u4E86\\u5F3A\\u5927\\u7684\\u652F\\u6301\\u3002\\u4EE5\\u4E0B\\u662F\\u6D4B\\u8BD5\\u5F02\\u6B65\\u4EE3\\u7801\\u7684\\u4E00\\u4E9B\\u5E38\\u7528\\u65B9\\u6CD5\\uFF1A\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"async\"}),\"/\",(0,n.jsx)(e.code,{children:\"await\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6D4B\\u8BD5\\u5F02\\u6B65\\u4EE3\\u7801\\u6700\\u76F4\\u63A5\\u7684\\u65B9\\u6CD5\\u4E4B\\u4E00\\u662F\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"async\"}),\"/\",(0,n.jsx)(e.code,{children:\"await\"}),\"\\u3002\\u8FD9\\u79CD\\u65B9\\u6CD5\\u4F7F\\u4F60\\u7684\\u6D4B\\u8BD5\\u4EE3\\u7801\\u770B\\u8D77\\u6765\\u662F\\u540C\\u6B65\\u7684\\uFF0C\\u8FD9\\u66F4\\u5BB9\\u6613\\u9605\\u8BFB\\u548C\\u7F16\\u5199\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Jest \\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// fetchData.js\nexport const fetchData = async () => {\n  const response = await fetch('https://api.example.com/data');\n  return response.json();\n};\n\n// fetchData.test.js\nimport { fetchData } from './fetchData';\n\ntest('fetches data successfully', async () => {\n  const data = await fetchData();\n  expect(data).toBeDefined();\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8FD4\\u56DE\\u4E00\\u4E2A promise\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5904\\u7406\\u5F02\\u6B65\\u6D4B\\u8BD5\\u7684\\u53E6\\u4E00\\u79CD\\u65B9\\u6CD5\\u662F\\u4ECE\\u4F60\\u7684\\u6D4B\\u8BD5\\u51FD\\u6570\\u4E2D\\u8FD4\\u56DE\\u4E00\\u4E2A promise\\u3002Jest \\u548C Mocha \\u5C06\\u7B49\\u5F85 promise \\u5728\\u5B8C\\u6210\\u6D4B\\u8BD5\\u4E4B\\u524D\\u88AB\\u89E3\\u6790\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Jest \\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// fetchData.js\nexport const fetchData = () => {\n  return fetch('https://api.example.com/data').then((response) =>\n    response.json(),\n  );\n};\n\n// fetchData.test.js\nimport { fetchData } from './fetchData';\n\ntest('fetches data successfully', () => {\n  return fetchData().then((data) => {\n    expect(data).toBeDefined();\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u56DE\\u8C03\\u51FD\\u6570\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5BF9\\u4E8E\\u65E7\\u7684\\u4EE3\\u7801\\u5E93\\u6216\\u7279\\u5B9A\\u573A\\u666F\\uFF0C\\u4F60\\u53EF\\u80FD\\u9700\\u8981\\u4F7F\\u7528\\u56DE\\u8C03\\u51FD\\u6570\\u3002\\u5728 Jest \\u4E2D\\uFF0C\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"done\"}),\" \\u51FD\\u6570\\u6765\\u6307\\u793A\\u5F02\\u6B65\\u6D4B\\u8BD5\\u7684\\u7ED3\\u675F\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Jest \\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// fetchData.js\nexport const fetchData = (callback) => {\n  fetch('https://api.example.com/data')\n    .then((response) => response.json())\n    .then((data) => callback(null, data))\n    .catch((error) => callback(error));\n};\n\n// fetchData.test.js\nimport { fetchData } from './fetchData';\n\ntest('fetches data successfully', (done) => {\n  fetchData((error, data) => {\n    expect(error).toBeNull();\n    expect(data).toBeDefined();\n    done();\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 Mocha\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Mocha \\u4E5F\\u652F\\u6301 \",(0,n.jsx)(e.code,{children:\"async\"}),\"/\",(0,n.jsx)(e.code,{children:\"await\"}),\"\\u3001\\u8FD4\\u56DE promise \\u548C\\u4F7F\\u7528\\u56DE\\u8C03\\u51FD\\u6570\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"async\"}),\"/\",(0,n.jsx)(e.code,{children:\"await\"}),\" \\u548C Mocha \\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// fetchData.js\nexport const fetchData = async () => {\n  const response = await fetch('https://api.example.com/data');\n  return response.json();\n};\n\n// fetchData.test.js\nimport { fetchData } from './fetchData';\nimport { expect } from 'chai';\n\ndescribe('fetchData', () => {\n  it('fetches data successfully', async () => {\n    const data = await fetchData();\n    expect(data).to.be.an('object');\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jestjs.io/docs/asynchronous\",children:\"Jest \\u5173\\u4E8E\\u6D4B\\u8BD5\\u5F02\\u6B65\\u4EE3\\u7801\\u7684\\u6587\\u6863\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://mochajs.org/#asynchronous-code\",children:\"Mocha \\u5173\\u4E8E\\u6D4B\\u8BD5\\u5F02\\u6B65\\u4EE3\\u7801\\u7684\\u6587\\u6863\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await\",children:\"MDN Web Docs \\u5173\\u4E8E async/await\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.chaijs.com/\",children:\"Chai \\u65AD\\u8A00\\u5E93\"})}),`\n`]})]})}function w(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(i,t)})):i(t)}var J=w;return y(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var j=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var a in e)s(t,a,{get:e[a],enumerable:!0})},h=(t,e,a,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!u.call(t,c)&&c!==a&&s(t,c,{get:()=>e[c],enumerable:!(r=f(e,c))||r.enumerable});return t};var y=(t,e,a)=>(a=t!=null?p(D(t)):{},h(e||!t||!t.__esModule?s(a,\"default\",{value:t,enumerable:!0}):a,t)),w=t=>h(s({},\"__esModule\",{value:!0}),t);var d=j((_,o)=>{o.exports=_jsx_runtime});var J={};x(J,{default:()=>l,frontmatter:()=>g});var n=y(d()),g={title:\"\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u6D4B\\u8BD5\\u5F02\\u6B65\\u4EE3\\u7801\\uFF1F\"};function i(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u5728 JavaScript \\u4E2D\\u6D4B\\u8BD5\\u5F02\\u6B65\\u4EE3\\u7801\\uFF0C\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528 Jest \\u6216 Mocha \\u7B49\\u6D4B\\u8BD5\\u6846\\u67B6\\u3002\\u8FD9\\u4E9B\\u6846\\u67B6\\u63D0\\u4F9B\\u4E86\\u5BF9\\u5904\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u7684\\u5185\\u7F6E\\u652F\\u6301\\u3002\\u4F60\\u53EF\\u4EE5\\u5728\\u6D4B\\u8BD5\\u51FD\\u6570\\u4E2D\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"async\"}),\"/\",(0,n.jsx)(e.code,{children:\"await\"}),\" \\u6216\\u8FD4\\u56DE promise\\u3002\\u4F8B\\u5982\\uFF0C\\u5728 Jest \\u4E2D\\uFF0C\\u4F60\\u53EF\\u4EE5\\u7F16\\u5199\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`test('fetches data successfully', async () => {\n  const data = await fetchData();\n  expect(data).toBeDefined();\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6216\\u8005\\uFF0C\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528\\u56DE\\u8C03\\u51FD\\u6570\\u548C \",(0,n.jsx)(e.code,{children:\"done\"}),\" \\u51FD\\u6570\\u6765\\u6307\\u793A\\u5F02\\u6B65\\u6D4B\\u8BD5\\u7684\\u7ED3\\u675F\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u6D4B\\u8BD5\\u5F02\\u6B65\\u4EE3\\u7801\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 JavaScript \\u4E2D\\u6D4B\\u8BD5\\u5F02\\u6B65\\u4EE3\\u7801\\u53EF\\u80FD\\u5177\\u6709\\u6311\\u6218\\u6027\\uFF0C\\u4F46\\u50CF Jest \\u548C Mocha \\u8FD9\\u6837\\u7684\\u73B0\\u4EE3\\u6D4B\\u8BD5\\u6846\\u67B6\\u4E3A\\u5904\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u63D0\\u4F9B\\u4E86\\u5F3A\\u5927\\u7684\\u652F\\u6301\\u3002\\u4EE5\\u4E0B\\u662F\\u6D4B\\u8BD5\\u5F02\\u6B65\\u4EE3\\u7801\\u7684\\u4E00\\u4E9B\\u5E38\\u7528\\u65B9\\u6CD5\\uFF1A\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"async\"}),\"/\",(0,n.jsx)(e.code,{children:\"await\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6D4B\\u8BD5\\u5F02\\u6B65\\u4EE3\\u7801\\u6700\\u76F4\\u63A5\\u7684\\u65B9\\u6CD5\\u4E4B\\u4E00\\u662F\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"async\"}),\"/\",(0,n.jsx)(e.code,{children:\"await\"}),\"\\u3002\\u8FD9\\u79CD\\u65B9\\u6CD5\\u4F7F\\u4F60\\u7684\\u6D4B\\u8BD5\\u4EE3\\u7801\\u770B\\u8D77\\u6765\\u662F\\u540C\\u6B65\\u7684\\uFF0C\\u8FD9\\u66F4\\u5BB9\\u6613\\u9605\\u8BFB\\u548C\\u7F16\\u5199\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Jest \\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// fetchData.js\nexport const fetchData = async () => {\n  const response = await fetch('https://api.example.com/data');\n  return response.json();\n};\n\n// fetchData.test.js\nimport { fetchData } from './fetchData';\n\ntest('fetches data successfully', async () => {\n  const data = await fetchData();\n  expect(data).toBeDefined();\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8FD4\\u56DE\\u4E00\\u4E2A promise\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5904\\u7406\\u5F02\\u6B65\\u6D4B\\u8BD5\\u7684\\u53E6\\u4E00\\u79CD\\u65B9\\u6CD5\\u662F\\u4ECE\\u4F60\\u7684\\u6D4B\\u8BD5\\u51FD\\u6570\\u4E2D\\u8FD4\\u56DE\\u4E00\\u4E2A promise\\u3002Jest \\u548C Mocha \\u5C06\\u7B49\\u5F85 promise \\u5728\\u5B8C\\u6210\\u6D4B\\u8BD5\\u4E4B\\u524D\\u88AB\\u89E3\\u6790\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Jest \\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// fetchData.js\nexport const fetchData = () => {\n  return fetch('https://api.example.com/data').then((response) =>\n    response.json(),\n  );\n};\n\n// fetchData.test.js\nimport { fetchData } from './fetchData';\n\ntest('fetches data successfully', () => {\n  return fetchData().then((data) => {\n    expect(data).toBeDefined();\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u56DE\\u8C03\\u51FD\\u6570\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5BF9\\u4E8E\\u65E7\\u7684\\u4EE3\\u7801\\u5E93\\u6216\\u7279\\u5B9A\\u573A\\u666F\\uFF0C\\u4F60\\u53EF\\u80FD\\u9700\\u8981\\u4F7F\\u7528\\u56DE\\u8C03\\u51FD\\u6570\\u3002\\u5728 Jest \\u4E2D\\uFF0C\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"done\"}),\" \\u51FD\\u6570\\u6765\\u6307\\u793A\\u5F02\\u6B65\\u6D4B\\u8BD5\\u7684\\u7ED3\\u675F\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Jest \\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// fetchData.js\nexport const fetchData = (callback) => {\n  fetch('https://api.example.com/data')\n    .then((response) => response.json())\n    .then((data) => callback(null, data))\n    .catch((error) => callback(error));\n};\n\n// fetchData.test.js\nimport { fetchData } from './fetchData';\n\ntest('fetches data successfully', (done) => {\n  fetchData((error, data) => {\n    expect(error).toBeNull();\n    expect(data).toBeDefined();\n    done();\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 Mocha\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Mocha \\u4E5F\\u652F\\u6301 \",(0,n.jsx)(e.code,{children:\"async\"}),\"/\",(0,n.jsx)(e.code,{children:\"await\"}),\"\\u3001\\u8FD4\\u56DE promise \\u548C\\u4F7F\\u7528\\u56DE\\u8C03\\u51FD\\u6570\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"async\"}),\"/\",(0,n.jsx)(e.code,{children:\"await\"}),\" \\u548C Mocha \\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// fetchData.js\nexport const fetchData = async () => {\n  const response = await fetch('https://api.example.com/data');\n  return response.json();\n};\n\n// fetchData.test.js\nimport { fetchData } from './fetchData';\nimport { expect } from 'chai';\n\ndescribe('fetchData', () => {\n  it('fetches data successfully', async () => {\n    const data = await fetchData();\n    expect(data).to.be.an('object');\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jestjs.io/docs/asynchronous\",children:\"Jest \\u5173\\u4E8E\\u6D4B\\u8BD5\\u5F02\\u6B65\\u4EE3\\u7801\\u7684\\u6587\\u6863\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://mochajs.org/#asynchronous-code\",children:\"Mocha \\u5173\\u4E8E\\u6D4B\\u8BD5\\u5F02\\u6B65\\u4EE3\\u7801\\u7684\\u6587\\u6863\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await\",children:\"MDN Web Docs \\u5173\\u4E8E async/await\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.chaijs.com/\",children:\"Chai \\u65AD\\u8A00\\u5E93\"})}),`\n`]})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(i,{...t})}):i(t)}return w(J);})();\n;return Component;"
 }
\ No newline at end of file
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 183002349..3c055ccd2 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),x=(r,n)=>{for(var i in n)t(r,i,{get:n[i],enumerable:!0})},o=(r,n,i,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let a of f(n))!m.call(r,a)&&a!==i&&t(r,a,{get:()=>n[a],enumerable:!(c=u(n,a))||c.enumerable});return r};var y=(r,n,i)=>(i=r!=null?h(p(r)):{},o(n||!r||!r.__esModule?t(i,\"default\",{value:r,enumerable:!0}):i,r)),b=r=>o(t({},\"__esModule\",{value:!0}),r);var s=g((F,l)=>{l.exports=_jsx_runtime});var _={};x(_,{default:()=>C,frontmatter:()=>w});var e=y(s()),w={title:\"How do currying and partial application differ from each other?\"};function d(r){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Currying transforms a function with multiple arguments into a sequence of functions, each taking a single argument. For example, a function \",(0,e.jsx)(n.code,{children:\"f(a, b, c)\"}),\" becomes \",(0,e.jsx)(n.code,{children:\"f(a)(b)(c)\"}),\". Partial application, on the other hand, fixes a few arguments of a function and produces another function with a smaller number of arguments. For example, if you partially apply \",(0,e.jsx)(n.code,{children:\"f(a, b, c)\"}),\" with \",(0,e.jsx)(n.code,{children:\"a\"}),\", you get a new function \",(0,e.jsx)(n.code,{children:\"f'(b, c)\"}),\".\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Currying vs partial application\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Currying\"}),`\n`,(0,e.jsx)(n.p,{children:\"Currying is a technique where a function with multiple arguments is transformed into a sequence of functions, each taking a single argument. This allows for more flexible function composition and reuse.\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a) {\n  return function (b) {\n    return function (c) {\n      return a + b + c;\n    };\n  };\n}\n\nconst result = add(1)(2)(3);\nconsole.log(result); // 6\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In this example, \",(0,e.jsx)(n.code,{children:\"add\"}),\" is a curried function that takes three arguments one at a time.\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Partial application\"}),`\n`,(0,e.jsx)(n.p,{children:\"Partial application is a technique where you fix a few arguments of a function, producing another function with a smaller number of arguments. This is useful for creating specialized functions from more general ones.\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b, c) {\n  return a + b + c;\n}\n\nconst addOne = add.bind(null, 1);\nconst result = addOne(2, 3);\nconsole.log(result); // 6\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In this example, \",(0,e.jsx)(n.code,{children:\"addOne\"}),\" is a partially applied function that fixes the first argument of \",(0,e.jsx)(n.code,{children:\"add\"}),\" to \",(0,e.jsx)(n.code,{children:\"1\"}),\".\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Key differences\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Currying\"}),\": Transforms a function with multiple arguments into a sequence of functions, each taking a single argument.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Partial application\"}),\": Fixes a few arguments of a function and produces another function with a smaller number of arguments.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Currying\",children:\"Currying on MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Partial_application\",children:\"Partial application on MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/currying-partials\",children:\"JavaScript.info on currying and partial application\"})}),`\n`]})]})}function j(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(d,r)})):d(r)}var C=j;return b(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),y=(r,n)=>{for(var i in n)t(r,i,{get:n[i],enumerable:!0})},c=(r,n,i,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let a of p(n))!g.call(r,a)&&a!==i&&t(r,a,{get:()=>n[a],enumerable:!(o=f(n,a))||o.enumerable});return r};var w=(r,n,i)=>(i=r!=null?u(m(r)):{},c(n||!r||!r.__esModule?t(i,\"default\",{value:r,enumerable:!0}):i,r)),b=r=>c(t({},\"__esModule\",{value:!0}),r);var s=x((v,l)=>{l.exports=_jsx_runtime});var j={};y(j,{default:()=>h,frontmatter:()=>C});var e=w(s()),C={title:\"How do currying and partial application differ from each other?\"};function d(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Currying transforms a function with multiple arguments into a sequence of functions, each taking a single argument. For example, a function \",(0,e.jsx)(n.code,{children:\"f(a, b, c)\"}),\" becomes \",(0,e.jsx)(n.code,{children:\"f(a)(b)(c)\"}),\". Partial application, on the other hand, fixes a few arguments of a function and produces another function with a smaller number of arguments. For example, if you partially apply \",(0,e.jsx)(n.code,{children:\"f(a, b, c)\"}),\" with \",(0,e.jsx)(n.code,{children:\"a\"}),\", you get a new function \",(0,e.jsx)(n.code,{children:\"f'(b, c)\"}),\".\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Currying vs partial application\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Currying\"}),`\n`,(0,e.jsx)(n.p,{children:\"Currying is a technique where a function with multiple arguments is transformed into a sequence of functions, each taking a single argument. This allows for more flexible function composition and reuse.\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a) {\n  return function (b) {\n    return function (c) {\n      return a + b + c;\n    };\n  };\n}\n\nconst result = add(1)(2)(3);\nconsole.log(result); // 6\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In this example, \",(0,e.jsx)(n.code,{children:\"add\"}),\" is a curried function that takes three arguments one at a time.\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Partial application\"}),`\n`,(0,e.jsx)(n.p,{children:\"Partial application is a technique where you fix a few arguments of a function, producing another function with a smaller number of arguments. This is useful for creating specialized functions from more general ones.\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b, c) {\n  return a + b + c;\n}\n\nconst addOne = add.bind(null, 1);\nconst result = addOne(2, 3);\nconsole.log(result); // 6\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In this example, \",(0,e.jsx)(n.code,{children:\"addOne\"}),\" is a partially applied function that fixes the first argument of \",(0,e.jsx)(n.code,{children:\"add\"}),\" to \",(0,e.jsx)(n.code,{children:\"1\"}),\".\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Key differences\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Currying\"}),\": Transforms a function with multiple arguments into a sequence of functions, each taking a single argument.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Partial application\"}),\": Fixes a few arguments of a function and produces another function with a smaller number of arguments.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Currying\",children:\"Currying on MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Partial_application\",children:\"Partial application on MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/currying-partials\",children:\"JavaScript.info on currying and partial application\"})}),`\n`]})]})}function h(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(d,{...r})}):d(r)}return b(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-currying-and-partial-application-differ-from-each-other/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-currying-and-partial-application-differ-from-each-other/zh-CN.json
index 4a00b7198..7c242154c 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-currying-and-partial-application-differ-from-each-other/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-currying-and-partial-application-differ-from-each-other/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-currying-and-partial-application-differ-from-each-other/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),y=(e,n)=>{for(var c in n)l(e,c,{get:n[c],enumerable:!0})},h=(e,n,c,d)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of g(n))!f.call(e,i)&&i!==c&&l(e,i,{get:()=>n[i],enumerable:!(d=u(n,i))||d.enumerable});return e};var b=(e,n,c)=>(c=e!=null?s(p(e)):{},h(n||!e||!e.__esModule?l(c,\"default\",{value:e,enumerable:!0}):c,e)),j=e=>h(l({},\"__esModule\",{value:!0}),e);var o=m((O,t)=>{t.exports=_jsx_runtime});var v={};y(v,{default:()=>_,frontmatter:()=>C});var r=b(o()),C={title:\"Currying \\u548C\\u90E8\\u5206\\u5E94\\u7528\\u4E4B\\u95F4\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function a(e){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},e.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,r.jsxs)(n.p,{children:[\"Currying \\u5C06\\u5177\\u6709\\u591A\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u8F6C\\u6362\\u4E3A\\u4E00\\u7CFB\\u5217\\u51FD\\u6570\\uFF0C\\u6BCF\\u4E2A\\u51FD\\u6570\\u53EA\\u63A5\\u53D7\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\\u4F8B\\u5982\\uFF0C\\u51FD\\u6570 \",(0,r.jsx)(n.code,{children:\"f(a, b, c)\"}),\" \\u53D8\\u4E3A \",(0,r.jsx)(n.code,{children:\"f(a)(b)(c)\"}),\"\\u3002\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\\u90E8\\u5206\\u5E94\\u7528\\u4F1A\\u56FA\\u5B9A\\u51FD\\u6570\\u7684\\u51E0\\u4E2A\\u53C2\\u6570\\uFF0C\\u5E76\\u751F\\u6210\\u53E6\\u4E00\\u4E2A\\u5177\\u6709\\u8F83\\u5C11\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u3002\\u4F8B\\u5982\\uFF0C\\u5982\\u679C\\u4F7F\\u7528 \",(0,r.jsx)(n.code,{children:\"a\"}),\" \\u90E8\\u5206\\u5E94\\u7528 \",(0,r.jsx)(n.code,{children:\"f(a, b, c)\"}),\"\\uFF0C\\u5219\\u4F1A\\u5F97\\u5230\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570 \",(0,r.jsx)(n.code,{children:\"f'(b, c)\"}),\"\\u3002\"]}),`\n`,(0,r.jsx)(n.hr,{}),`\n`,(0,r.jsx)(n.h2,{children:\"Currying vs \\u90E8\\u5206\\u5E94\\u7528\"}),`\n`,(0,r.jsx)(n.h3,{children:\"Currying\"}),`\n`,(0,r.jsx)(n.p,{children:\"Currying \\u662F\\u4E00\\u79CD\\u5C06\\u5177\\u6709\\u591A\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u8F6C\\u6362\\u4E3A\\u4E00\\u7CFB\\u5217\\u51FD\\u6570\\u7684\\u6280\\u672F\\uFF0C\\u6BCF\\u4E2A\\u51FD\\u6570\\u53EA\\u63A5\\u53D7\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\\u8FD9\\u5141\\u8BB8\\u66F4\\u7075\\u6D3B\\u7684\\u51FD\\u6570\\u7EC4\\u5408\\u548C\\u91CD\\u7528\\u3002\"}),`\n`,(0,r.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`function add(a) {\n  return function (b) {\n    return function (c) {\n      return a + b + c;\n    };\n  };\n}\n\nconst result = add(1)(2)(3);\nconsole.log(result); // 6\n`})}),`\n`,(0,r.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,r.jsx)(n.code,{children:\"add\"}),\" \\u662F\\u4E00\\u4E2A curried \\u51FD\\u6570\\uFF0C\\u5B83\\u4E00\\u6B21\\u63A5\\u53D7\\u4E09\\u4E2A\\u53C2\\u6570\\u3002\"]}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u90E8\\u5206\\u5E94\\u7528\"}),`\n`,(0,r.jsx)(n.p,{children:\"\\u90E8\\u5206\\u5E94\\u7528\\u662F\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728\\u5176\\u4E2D\\u56FA\\u5B9A\\u51FD\\u6570\\u7684\\u51E0\\u4E2A\\u53C2\\u6570\\uFF0C\\u4ECE\\u800C\\u751F\\u6210\\u53E6\\u4E00\\u4E2A\\u5177\\u6709\\u8F83\\u5C11\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u3002\\u8FD9\\u5BF9\\u4E8E\\u4ECE\\u66F4\\u901A\\u7528\\u7684\\u51FD\\u6570\\u521B\\u5EFA\\u4E13\\u95E8\\u7684\\u51FD\\u6570\\u5F88\\u6709\\u7528\\u3002\"}),`\n`,(0,r.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`function add(a, b, c) {\n  return a + b + c;\n}\n\nconst addOne = add.bind(null, 1);\nconst result = addOne(2, 3);\nconsole.log(result); // 6\n`})}),`\n`,(0,r.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,r.jsx)(n.code,{children:\"addOne\"}),\" \\u662F\\u4E00\\u4E2A\\u90E8\\u5206\\u5E94\\u7528\\u7684\\u51FD\\u6570\\uFF0C\\u5B83\\u5C06 \",(0,r.jsx)(n.code,{children:\"add\"}),\" \\u7684\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u56FA\\u5B9A\\u4E3A \",(0,r.jsx)(n.code,{children:\"1\"}),\"\\u3002\"]}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u4E3B\\u8981\\u533A\\u522B\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"Currying\"}),\"\\uFF1A\\u5C06\\u5177\\u6709\\u591A\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u8F6C\\u6362\\u4E3A\\u4E00\\u7CFB\\u5217\\u51FD\\u6570\\uFF0C\\u6BCF\\u4E2A\\u51FD\\u6570\\u53EA\\u63A5\\u53D7\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u90E8\\u5206\\u5E94\\u7528\"}),\"\\uFF1A\\u56FA\\u5B9A\\u51FD\\u6570\\u7684\\u51E0\\u4E2A\\u53C2\\u6570\\uFF0C\\u5E76\\u751F\\u6210\\u53E6\\u4E00\\u4E2A\\u5177\\u6709\\u8F83\\u5C11\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Currying\",children:\"MDN \\u4E0A\\u7684 Currying\"})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Partial_application\",children:\"MDN \\u4E0A\\u7684\\u90E8\\u5206\\u5E94\\u7528\"})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://javascript.info/currying-partials\",children:\"JavaScript.info \\u5173\\u4E8E currying \\u548C\\u90E8\\u5206\\u5E94\\u7528\"})}),`\n`]})]})}function x(e={}){let{wrapper:n}=e.components||{};return n?(0,r.jsx)(n,Object.assign({},e,{children:(0,r.jsx)(a,e)})):a(e)}var _=x;return j(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var y=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),C=(e,n)=>{for(var c in n)l(e,c,{get:n[c],enumerable:!0})},h=(e,n,c,d)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of p(n))!m.call(e,i)&&i!==c&&l(e,i,{get:()=>n[i],enumerable:!(d=g(n,i))||d.enumerable});return e};var b=(e,n,c)=>(c=e!=null?u(f(e)):{},h(n||!e||!e.__esModule?l(c,\"default\",{value:e,enumerable:!0}):c,e)),x=e=>h(l({},\"__esModule\",{value:!0}),e);var o=y((M,t)=>{t.exports=_jsx_runtime});var _={};C(_,{default:()=>s,frontmatter:()=>j});var r=b(o()),j={title:\"Currying \\u548C\\u90E8\\u5206\\u5E94\\u7528\\u4E4B\\u95F4\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function a(e){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,r.jsxs)(n.p,{children:[\"Currying \\u5C06\\u5177\\u6709\\u591A\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u8F6C\\u6362\\u4E3A\\u4E00\\u7CFB\\u5217\\u51FD\\u6570\\uFF0C\\u6BCF\\u4E2A\\u51FD\\u6570\\u53EA\\u63A5\\u53D7\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\\u4F8B\\u5982\\uFF0C\\u51FD\\u6570 \",(0,r.jsx)(n.code,{children:\"f(a, b, c)\"}),\" \\u53D8\\u4E3A \",(0,r.jsx)(n.code,{children:\"f(a)(b)(c)\"}),\"\\u3002\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\\u90E8\\u5206\\u5E94\\u7528\\u4F1A\\u56FA\\u5B9A\\u51FD\\u6570\\u7684\\u51E0\\u4E2A\\u53C2\\u6570\\uFF0C\\u5E76\\u751F\\u6210\\u53E6\\u4E00\\u4E2A\\u5177\\u6709\\u8F83\\u5C11\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u3002\\u4F8B\\u5982\\uFF0C\\u5982\\u679C\\u4F7F\\u7528 \",(0,r.jsx)(n.code,{children:\"a\"}),\" \\u90E8\\u5206\\u5E94\\u7528 \",(0,r.jsx)(n.code,{children:\"f(a, b, c)\"}),\"\\uFF0C\\u5219\\u4F1A\\u5F97\\u5230\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570 \",(0,r.jsx)(n.code,{children:\"f'(b, c)\"}),\"\\u3002\"]}),`\n`,(0,r.jsx)(n.hr,{}),`\n`,(0,r.jsx)(n.h2,{children:\"Currying vs \\u90E8\\u5206\\u5E94\\u7528\"}),`\n`,(0,r.jsx)(n.h3,{children:\"Currying\"}),`\n`,(0,r.jsx)(n.p,{children:\"Currying \\u662F\\u4E00\\u79CD\\u5C06\\u5177\\u6709\\u591A\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u8F6C\\u6362\\u4E3A\\u4E00\\u7CFB\\u5217\\u51FD\\u6570\\u7684\\u6280\\u672F\\uFF0C\\u6BCF\\u4E2A\\u51FD\\u6570\\u53EA\\u63A5\\u53D7\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\\u8FD9\\u5141\\u8BB8\\u66F4\\u7075\\u6D3B\\u7684\\u51FD\\u6570\\u7EC4\\u5408\\u548C\\u91CD\\u7528\\u3002\"}),`\n`,(0,r.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`function add(a) {\n  return function (b) {\n    return function (c) {\n      return a + b + c;\n    };\n  };\n}\n\nconst result = add(1)(2)(3);\nconsole.log(result); // 6\n`})}),`\n`,(0,r.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,r.jsx)(n.code,{children:\"add\"}),\" \\u662F\\u4E00\\u4E2A curried \\u51FD\\u6570\\uFF0C\\u5B83\\u4E00\\u6B21\\u63A5\\u53D7\\u4E09\\u4E2A\\u53C2\\u6570\\u3002\"]}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u90E8\\u5206\\u5E94\\u7528\"}),`\n`,(0,r.jsx)(n.p,{children:\"\\u90E8\\u5206\\u5E94\\u7528\\u662F\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728\\u5176\\u4E2D\\u56FA\\u5B9A\\u51FD\\u6570\\u7684\\u51E0\\u4E2A\\u53C2\\u6570\\uFF0C\\u4ECE\\u800C\\u751F\\u6210\\u53E6\\u4E00\\u4E2A\\u5177\\u6709\\u8F83\\u5C11\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u3002\\u8FD9\\u5BF9\\u4E8E\\u4ECE\\u66F4\\u901A\\u7528\\u7684\\u51FD\\u6570\\u521B\\u5EFA\\u4E13\\u95E8\\u7684\\u51FD\\u6570\\u5F88\\u6709\\u7528\\u3002\"}),`\n`,(0,r.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`function add(a, b, c) {\n  return a + b + c;\n}\n\nconst addOne = add.bind(null, 1);\nconst result = addOne(2, 3);\nconsole.log(result); // 6\n`})}),`\n`,(0,r.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,r.jsx)(n.code,{children:\"addOne\"}),\" \\u662F\\u4E00\\u4E2A\\u90E8\\u5206\\u5E94\\u7528\\u7684\\u51FD\\u6570\\uFF0C\\u5B83\\u5C06 \",(0,r.jsx)(n.code,{children:\"add\"}),\" \\u7684\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u56FA\\u5B9A\\u4E3A \",(0,r.jsx)(n.code,{children:\"1\"}),\"\\u3002\"]}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u4E3B\\u8981\\u533A\\u522B\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"Currying\"}),\"\\uFF1A\\u5C06\\u5177\\u6709\\u591A\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u8F6C\\u6362\\u4E3A\\u4E00\\u7CFB\\u5217\\u51FD\\u6570\\uFF0C\\u6BCF\\u4E2A\\u51FD\\u6570\\u53EA\\u63A5\\u53D7\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u90E8\\u5206\\u5E94\\u7528\"}),\"\\uFF1A\\u56FA\\u5B9A\\u51FD\\u6570\\u7684\\u51E0\\u4E2A\\u53C2\\u6570\\uFF0C\\u5E76\\u751F\\u6210\\u53E6\\u4E00\\u4E2A\\u5177\\u6709\\u8F83\\u5C11\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Currying\",children:\"MDN \\u4E0A\\u7684 Currying\"})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Partial_application\",children:\"MDN \\u4E0A\\u7684\\u90E8\\u5206\\u5E94\\u7528\"})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://javascript.info/currying-partials\",children:\"JavaScript.info \\u5173\\u4E8E currying \\u548C\\u90E8\\u5206\\u5E94\\u7528\"})}),`\n`]})]})}function s(e={}){let{wrapper:n}=e.components||{};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}return x(_);})();\n;return Component;"
 }
\ No newline at end of file
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 ae3b996ae..05888c0a7 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-iframe-on-a-page-communicate/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var u=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var s in e)a(t,s,{get:e[s],enumerable:!0})},o=(t,e,s,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of g(e))!f.call(t,r)&&r!==s&&a(t,r,{get:()=>e[r],enumerable:!(i=m(e,r))||i.enumerable});return t};var v=(t,e,s)=>(s=t!=null?l(p(t)):{},o(e||!t||!t.__esModule?a(s,\"default\",{value:t,enumerable:!0}):s,t)),y=t=>o(a({},\"__esModule\",{value:!0}),t);var d=u((H,c)=>{c.exports=_jsx_runtime});var I={};w(I,{default:()=>b,frontmatter:()=>x});var n=v(d()),x={title:\"How do `<iframe>` on a page communicate?\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",strong:\"strong\",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:[(0,n.jsx)(e.code,{children:\"<iframe>\"}),\" elements on a page can communicate using the \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" API. This allows for secure cross-origin communication between the parent page and the iframe. The \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" method sends a message, and the \",(0,n.jsx)(e.code,{children:\"message\"}),\" event listener receives it. Here's a simple example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// In the parent page\nconst iframe = document.querySelector('iframe');\niframe.contentWindow.postMessage('Hello from parent', '*');\n\n// In the iframe\nwindow.addEventListener('message', (event) => {\n  console.log(event.data); // 'Hello from parent'\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"How do \",(0,n.jsx)(e.code,{children:\"<iframe>\"}),\" on a page communicate?\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" API\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" API is the most common and secure way for iframes to communicate with each other or with their parent page. This method allows for cross-origin communication, which is essential for modern web applications.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Sending a message\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To send a message from the parent page to the iframe, you can use the \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" method. Here\\u2019s an example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// In the parent page\nconst iframe = document.querySelector('iframe');\niframe.contentWindow.postMessage('Hello from parent', '*');\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the parent page selects the iframe and sends a message to it. The second parameter, \",(0,n.jsx)(e.code,{children:\"'*'\"}),\", is the target origin. It specifies the origin of the target window. Using \",(0,n.jsx)(e.code,{children:\"'*'\"}),\" means the message can be received by any origin, but for security reasons, it's better to specify the exact origin.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Receiving a message\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To receive a message in the iframe, you need to add an event listener for the \",(0,n.jsx)(e.code,{children:\"message\"}),\" event:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// In the iframe\nwindow.addEventListener('message', (event) => {\n  console.log(event.data); // 'Hello from parent'\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"event\"}),\" object contains the \",(0,n.jsx)(e.code,{children:\"data\"}),\" property, which holds the message sent by the parent page.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Security considerations\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When using \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\", it's crucial to consider security:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Specify the target origin\"}),\": Instead of using \",(0,n.jsx)(e.code,{children:\"'*'\"}),\", specify the exact origin to ensure that only messages from trusted sources are received.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Validate the message\"}),\": Always validate the message content to prevent malicious data from being processed.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example with target origin\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here\\u2019s an example with a specified target origin:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// In the parent page\nconst iframe = document.querySelector('iframe');\nconst targetOrigin = 'https://example.com';\niframe.contentWindow.postMessage('Hello from parent', targetOrigin);\n\n// In the iframe\nwindow.addEventListener('message', (event) => {\n  if (event.origin === 'https://parent.com') {\n    console.log(event.data); // 'Hello from parent'\n  }\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the parent page sends a message only to \",(0,n.jsx)(e.code,{children:\"https://example.com\"}),\", and the iframe processes the message only if it comes from \",(0,n.jsx)(e.code,{children:\"https://parent.com\"}),\".\"]}),`\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/Web/API/Window/postMessage\",children:\"MDN Web Docs: Window.postMessage()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://html.spec.whatwg.org/multipage/web-messaging.html#dom-window-postmessage\",children:\"HTML Living Standard: postMessage\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#cross-document_messaging\",children:\"Cross-document messaging\"})}),`\n`]})]})}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 b=M;return y(I);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var r in e)a(t,r,{get:e[r],enumerable:!0})},o=(t,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!u.call(t,s)&&s!==r&&a(t,s,{get:()=>e[s],enumerable:!(i=g(e,s))||i.enumerable});return t};var y=(t,e,r)=>(r=t!=null?m(f(t)):{},o(e||!t||!t.__esModule?a(r,\"default\",{value:t,enumerable:!0}):r,t)),x=t=>o(a({},\"__esModule\",{value:!0}),t);var d=w((H,c)=>{c.exports=_jsx_runtime});var I={};v(I,{default:()=>l,frontmatter:()=>M});var n=y(d()),M={title:\"How do `<iframe>` on a page communicate?\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"<iframe>\"}),\" elements on a page can communicate using the \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" API. This allows for secure cross-origin communication between the parent page and the iframe. The \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" method sends a message, and the \",(0,n.jsx)(e.code,{children:\"message\"}),\" event listener receives it. Here's a simple example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// In the parent page\nconst iframe = document.querySelector('iframe');\niframe.contentWindow.postMessage('Hello from parent', '*');\n\n// In the iframe\nwindow.addEventListener('message', (event) => {\n  console.log(event.data); // 'Hello from parent'\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"How do \",(0,n.jsx)(e.code,{children:\"<iframe>\"}),\" on a page communicate?\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" API\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" API is the most common and secure way for iframes to communicate with each other or with their parent page. This method allows for cross-origin communication, which is essential for modern web applications.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Sending a message\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To send a message from the parent page to the iframe, you can use the \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" method. Here\\u2019s an example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// In the parent page\nconst iframe = document.querySelector('iframe');\niframe.contentWindow.postMessage('Hello from parent', '*');\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the parent page selects the iframe and sends a message to it. The second parameter, \",(0,n.jsx)(e.code,{children:\"'*'\"}),\", is the target origin. It specifies the origin of the target window. Using \",(0,n.jsx)(e.code,{children:\"'*'\"}),\" means the message can be received by any origin, but for security reasons, it's better to specify the exact origin.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Receiving a message\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To receive a message in the iframe, you need to add an event listener for the \",(0,n.jsx)(e.code,{children:\"message\"}),\" event:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// In the iframe\nwindow.addEventListener('message', (event) => {\n  console.log(event.data); // 'Hello from parent'\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"event\"}),\" object contains the \",(0,n.jsx)(e.code,{children:\"data\"}),\" property, which holds the message sent by the parent page.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Security considerations\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When using \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\", it's crucial to consider security:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Specify the target origin\"}),\": Instead of using \",(0,n.jsx)(e.code,{children:\"'*'\"}),\", specify the exact origin to ensure that only messages from trusted sources are received.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Validate the message\"}),\": Always validate the message content to prevent malicious data from being processed.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example with target origin\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here\\u2019s an example with a specified target origin:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// In the parent page\nconst iframe = document.querySelector('iframe');\nconst targetOrigin = 'https://example.com';\niframe.contentWindow.postMessage('Hello from parent', targetOrigin);\n\n// In the iframe\nwindow.addEventListener('message', (event) => {\n  if (event.origin === 'https://parent.com') {\n    console.log(event.data); // 'Hello from parent'\n  }\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the parent page sends a message only to \",(0,n.jsx)(e.code,{children:\"https://example.com\"}),\", and the iframe processes the message only if it comes from \",(0,n.jsx)(e.code,{children:\"https://parent.com\"}),\".\"]}),`\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/Web/API/Window/postMessage\",children:\"MDN Web Docs: Window.postMessage()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://html.spec.whatwg.org/multipage/web-messaging.html#dom-window-postmessage\",children:\"HTML Living Standard: postMessage\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#cross-document_messaging\",children:\"Cross-document messaging\"})}),`\n`]})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return x(I);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-iframe-on-a-page-communicate/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-iframe-on-a-page-communicate/zh-CN.json
index 4391a97dc..06e044ecb 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-iframe-on-a-page-communicate/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-iframe-on-a-page-communicate/zh-CN.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-iframe-on-a-page-communicate/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var u=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),w=(r,e)=>{for(var i in e)c(r,i,{get:e[i],enumerable:!0})},s=(r,e,i,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of g(e))!f.call(r,o)&&o!==i&&c(r,o,{get:()=>e[o],enumerable:!(t=m(e,o))||t.enumerable});return r};var M=(r,e,i)=>(i=r!=null?h(p(r)):{},s(e||!r||!r.__esModule?c(i,\"default\",{value:r,enumerable:!0}):i,r)),v=r=>s(c({},\"__esModule\",{value:!0}),r);var l=u((H,d)=>{d.exports=_jsx_runtime});var _={};w(_,{default:()=>W,frontmatter:()=>j});var n=M(l()),j={title:\"\\u9875\\u9762\\u4E0A\\u7684 `<iframe>` \\u5982\\u4F55\\u901A\\u4FE1\\uFF1F\"};function a(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u9875\\u9762\\u4E0A\\u7684 \",(0,n.jsx)(e.code,{children:\"<iframe>\"}),\" \\u5143\\u7D20\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" API \\u8FDB\\u884C\\u901A\\u4FE1\\u3002\\u8FD9\\u5141\\u8BB8\\u7236\\u9875\\u9762\\u548C iframe \\u4E4B\\u95F4\\u8FDB\\u884C\\u5B89\\u5168\\u7684\\u8DE8\\u6E90\\u901A\\u4FE1\\u3002\",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" \\u65B9\\u6CD5\\u53D1\\u9001\\u6D88\\u606F\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"message\"}),\" \\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u63A5\\u6536\\u6D88\\u606F\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u4F8B\\u5B50\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u5728\\u7236\\u9875\\u9762\\u4E2D\nconst iframe = document.querySelector('iframe');\niframe.contentWindow.postMessage('Hello from parent', '*');\n\n// \\u5728 iframe \\u4E2D\nwindow.addEventListener('message', (event) => {\n  console.log(event.data); // 'Hello from parent'\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u9875\\u9762\\u4E0A\\u7684 \",(0,n.jsx)(e.code,{children:\"<iframe>\"}),\" \\u5982\\u4F55\\u901A\\u4FE1\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" API\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"postMessage\"}),\" API \\u662F iframe \\u76F8\\u4E92\\u4E4B\\u95F4\\u6216\\u4E0E\\u5176\\u7236\\u9875\\u9762\\u901A\\u4FE1\\u7684\\u6700\\u5E38\\u89C1\\u548C\\u6700\\u5B89\\u5168\\u7684\\u65B9\\u5F0F\\u3002\\u6B64\\u65B9\\u6CD5\\u5141\\u8BB8\\u8DE8\\u6E90\\u901A\\u4FE1\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u73B0\\u4EE3 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u81F3\\u5173\\u91CD\\u8981\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u53D1\\u9001\\u6D88\\u606F\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u5C06\\u6D88\\u606F\\u4ECE\\u7236\\u9875\\u9762\\u53D1\\u9001\\u5230 iframe\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" \\u65B9\\u6CD5\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u4F8B\\u5B50\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u5728\\u7236\\u9875\\u9762\\u4E2D\nconst iframe = document.querySelector('iframe');\niframe.contentWindow.postMessage('Hello from parent', '*');\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u7236\\u9875\\u9762\\u9009\\u62E9 iframe \\u5E76\\u5411\\u5176\\u53D1\\u9001\\u6D88\\u606F\\u3002\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570 \",(0,n.jsx)(e.code,{children:\"'*'\"}),\" \\u662F\\u76EE\\u6807 origin\\u3002\\u5B83\\u6307\\u5B9A\\u76EE\\u6807\\u7A97\\u53E3\\u7684 origin\\u3002\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"'*'\"}),\" \\u610F\\u5473\\u7740\\u4EFB\\u4F55 origin \\u90FD\\u53EF\\u4EE5\\u63A5\\u6536\\u6D88\\u606F\\uFF0C\\u4F46\\u51FA\\u4E8E\\u5B89\\u5168\\u539F\\u56E0\\uFF0C\\u6700\\u597D\\u6307\\u5B9A\\u786E\\u5207\\u7684 origin\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u63A5\\u6536\\u6D88\\u606F\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u5728 iframe \\u4E2D\\u63A5\\u6536\\u6D88\\u606F\\uFF0C\\u60A8\\u9700\\u8981\\u4E3A \",(0,n.jsx)(e.code,{children:\"message\"}),\" \\u4E8B\\u4EF6\\u6DFB\\u52A0\\u4E00\\u4E2A\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u5728 iframe \\u4E2D\nwindow.addEventListener('message', (event) => {\n  console.log(event.data); // 'Hello from parent'\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"event\"}),\" \\u5BF9\\u8C61\\u5305\\u542B \",(0,n.jsx)(e.code,{children:\"data\"}),\" \\u5C5E\\u6027\\uFF0C\\u8BE5\\u5C5E\\u6027\\u4FDD\\u5B58\\u7236\\u9875\\u9762\\u53D1\\u9001\\u7684\\u6D88\\u606F\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B89\\u5168\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" \\u65F6\\uFF0C\\u8003\\u8651\\u5B89\\u5168\\u6027\\u81F3\\u5173\\u91CD\\u8981\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6307\\u5B9A\\u76EE\\u6807 origin\"}),\"\\uFF1A\\u4E0D\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"'*'\"}),\"\\uFF0C\\u800C\\u662F\\u6307\\u5B9A\\u786E\\u5207\\u7684 origin\\uFF0C\\u4EE5\\u786E\\u4FDD\\u4EC5\\u63A5\\u6536\\u6765\\u81EA\\u53D7\\u4FE1\\u4EFB\\u6765\\u6E90\\u7684\\u6D88\\u606F\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u9A8C\\u8BC1\\u6D88\\u606F\"}),\"\\uFF1A\\u59CB\\u7EC8\\u9A8C\\u8BC1\\u6D88\\u606F\\u5185\\u5BB9\\uFF0C\\u4EE5\\u9632\\u6B62\\u5904\\u7406\\u6076\\u610F\\u6570\\u636E\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5E26\\u6709\\u76EE\\u6807 origin \\u7684\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u5E26\\u6709\\u6307\\u5B9A\\u76EE\\u6807\\u6765\\u6E90\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// In the parent page\nconst iframe = document.querySelector('iframe');\nconst targetOrigin = 'https://example.com';\niframe.contentWindow.postMessage('Hello from parent', targetOrigin);\n\n// In the iframe\nwindow.addEventListener('message', (event) => {\n  if (event.origin === 'https://parent.com') {\n    console.log(event.data); // 'Hello from parent'\n  }\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u7236\\u9875\\u9762\\u4EC5\\u5411 \",(0,n.jsx)(e.code,{children:\"https://example.com\"}),\" \\u53D1\\u9001\\u6D88\\u606F\\uFF0C\\u5E76\\u4E14 iframe \\u4EC5\\u5728\\u6D88\\u606F\\u6765\\u81EA \",(0,n.jsx)(e.code,{children:\"https://parent.com\"}),\" \\u65F6\\u624D\\u5904\\u7406\\u8BE5\\u6D88\\u606F\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Window/postMessage\",children:\"MDN Web Docs: Window.postMessage()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://html.spec.whatwg.org/multipage/web-messaging.html#dom-window-postmessage\",children:\"HTML Living Standard: postMessage\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#cross-document_messaging\",children:\"\\u8DE8\\u6587\\u6863\\u6D88\\u606F\\u4F20\\u9012\"})}),`\n`]})]})}function x(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(a,r)})):a(r)}var W=x;return v(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var w=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),M=(r,e)=>{for(var i in e)c(r,i,{get:e[i],enumerable:!0})},d=(r,e,i,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!u.call(r,o)&&o!==i&&c(r,o,{get:()=>e[o],enumerable:!(t=g(e,o))||t.enumerable});return r};var v=(r,e,i)=>(i=r!=null?m(f(r)):{},d(e||!r||!r.__esModule?c(i,\"default\",{value:r,enumerable:!0}):i,r)),x=r=>d(c({},\"__esModule\",{value:!0}),r);var s=w((H,l)=>{l.exports=_jsx_runtime});var j={};M(j,{default:()=>h,frontmatter:()=>W});var n=v(s()),W={title:\"\\u9875\\u9762\\u4E0A\\u7684 `<iframe>` \\u5982\\u4F55\\u901A\\u4FE1\\uFF1F\"};function a(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u9875\\u9762\\u4E0A\\u7684 \",(0,n.jsx)(e.code,{children:\"<iframe>\"}),\" \\u5143\\u7D20\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" API \\u8FDB\\u884C\\u901A\\u4FE1\\u3002\\u8FD9\\u5141\\u8BB8\\u7236\\u9875\\u9762\\u548C iframe \\u4E4B\\u95F4\\u8FDB\\u884C\\u5B89\\u5168\\u7684\\u8DE8\\u6E90\\u901A\\u4FE1\\u3002\",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" \\u65B9\\u6CD5\\u53D1\\u9001\\u6D88\\u606F\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"message\"}),\" \\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u63A5\\u6536\\u6D88\\u606F\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u4F8B\\u5B50\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u5728\\u7236\\u9875\\u9762\\u4E2D\nconst iframe = document.querySelector('iframe');\niframe.contentWindow.postMessage('Hello from parent', '*');\n\n// \\u5728 iframe \\u4E2D\nwindow.addEventListener('message', (event) => {\n  console.log(event.data); // 'Hello from parent'\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u9875\\u9762\\u4E0A\\u7684 \",(0,n.jsx)(e.code,{children:\"<iframe>\"}),\" \\u5982\\u4F55\\u901A\\u4FE1\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" API\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"postMessage\"}),\" API \\u662F iframe \\u76F8\\u4E92\\u4E4B\\u95F4\\u6216\\u4E0E\\u5176\\u7236\\u9875\\u9762\\u901A\\u4FE1\\u7684\\u6700\\u5E38\\u89C1\\u548C\\u6700\\u5B89\\u5168\\u7684\\u65B9\\u5F0F\\u3002\\u6B64\\u65B9\\u6CD5\\u5141\\u8BB8\\u8DE8\\u6E90\\u901A\\u4FE1\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u73B0\\u4EE3 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u81F3\\u5173\\u91CD\\u8981\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u53D1\\u9001\\u6D88\\u606F\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u5C06\\u6D88\\u606F\\u4ECE\\u7236\\u9875\\u9762\\u53D1\\u9001\\u5230 iframe\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" \\u65B9\\u6CD5\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u4F8B\\u5B50\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u5728\\u7236\\u9875\\u9762\\u4E2D\nconst iframe = document.querySelector('iframe');\niframe.contentWindow.postMessage('Hello from parent', '*');\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u7236\\u9875\\u9762\\u9009\\u62E9 iframe \\u5E76\\u5411\\u5176\\u53D1\\u9001\\u6D88\\u606F\\u3002\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570 \",(0,n.jsx)(e.code,{children:\"'*'\"}),\" \\u662F\\u76EE\\u6807 origin\\u3002\\u5B83\\u6307\\u5B9A\\u76EE\\u6807\\u7A97\\u53E3\\u7684 origin\\u3002\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"'*'\"}),\" \\u610F\\u5473\\u7740\\u4EFB\\u4F55 origin \\u90FD\\u53EF\\u4EE5\\u63A5\\u6536\\u6D88\\u606F\\uFF0C\\u4F46\\u51FA\\u4E8E\\u5B89\\u5168\\u539F\\u56E0\\uFF0C\\u6700\\u597D\\u6307\\u5B9A\\u786E\\u5207\\u7684 origin\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u63A5\\u6536\\u6D88\\u606F\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u5728 iframe \\u4E2D\\u63A5\\u6536\\u6D88\\u606F\\uFF0C\\u60A8\\u9700\\u8981\\u4E3A \",(0,n.jsx)(e.code,{children:\"message\"}),\" \\u4E8B\\u4EF6\\u6DFB\\u52A0\\u4E00\\u4E2A\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u5728 iframe \\u4E2D\nwindow.addEventListener('message', (event) => {\n  console.log(event.data); // 'Hello from parent'\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"event\"}),\" \\u5BF9\\u8C61\\u5305\\u542B \",(0,n.jsx)(e.code,{children:\"data\"}),\" \\u5C5E\\u6027\\uFF0C\\u8BE5\\u5C5E\\u6027\\u4FDD\\u5B58\\u7236\\u9875\\u9762\\u53D1\\u9001\\u7684\\u6D88\\u606F\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B89\\u5168\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" \\u65F6\\uFF0C\\u8003\\u8651\\u5B89\\u5168\\u6027\\u81F3\\u5173\\u91CD\\u8981\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6307\\u5B9A\\u76EE\\u6807 origin\"}),\"\\uFF1A\\u4E0D\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"'*'\"}),\"\\uFF0C\\u800C\\u662F\\u6307\\u5B9A\\u786E\\u5207\\u7684 origin\\uFF0C\\u4EE5\\u786E\\u4FDD\\u4EC5\\u63A5\\u6536\\u6765\\u81EA\\u53D7\\u4FE1\\u4EFB\\u6765\\u6E90\\u7684\\u6D88\\u606F\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u9A8C\\u8BC1\\u6D88\\u606F\"}),\"\\uFF1A\\u59CB\\u7EC8\\u9A8C\\u8BC1\\u6D88\\u606F\\u5185\\u5BB9\\uFF0C\\u4EE5\\u9632\\u6B62\\u5904\\u7406\\u6076\\u610F\\u6570\\u636E\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5E26\\u6709\\u76EE\\u6807 origin \\u7684\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u5E26\\u6709\\u6307\\u5B9A\\u76EE\\u6807\\u6765\\u6E90\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// In the parent page\nconst iframe = document.querySelector('iframe');\nconst targetOrigin = 'https://example.com';\niframe.contentWindow.postMessage('Hello from parent', targetOrigin);\n\n// In the iframe\nwindow.addEventListener('message', (event) => {\n  if (event.origin === 'https://parent.com') {\n    console.log(event.data); // 'Hello from parent'\n  }\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u7236\\u9875\\u9762\\u4EC5\\u5411 \",(0,n.jsx)(e.code,{children:\"https://example.com\"}),\" \\u53D1\\u9001\\u6D88\\u606F\\uFF0C\\u5E76\\u4E14 iframe \\u4EC5\\u5728\\u6D88\\u606F\\u6765\\u81EA \",(0,n.jsx)(e.code,{children:\"https://parent.com\"}),\" \\u65F6\\u624D\\u5904\\u7406\\u8BE5\\u6D88\\u606F\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Window/postMessage\",children:\"MDN Web Docs: Window.postMessage()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://html.spec.whatwg.org/multipage/web-messaging.html#dom-window-postmessage\",children:\"HTML Living Standard: postMessage\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#cross-document_messaging\",children:\"\\u8DE8\\u6587\\u6863\\u6D88\\u606F\\u4F20\\u9012\"})}),`\n`]})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(a,{...r})}):a(r)}return x(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-sets-and-maps-handle-equality-checks-for-objects/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-sets-and-maps-handle-equality-checks-for-objects/en-US.json
index a8496e339..95ffbce3a 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-sets-and-maps-handle-equality-checks-for-objects/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-sets-and-maps-handle-equality-checks-for-objects/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-sets-and-maps-handle-equality-checks-for-objects/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var j=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},l=(t,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of u(e))!b.call(t,c)&&c!==o&&r(t,c,{get:()=>e[c],enumerable:!(a=p(e,c))||a.enumerable});return t};var y=(t,e,o)=>(o=t!=null?h(m(t)):{},l(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),g=t=>l(r({},\"__esModule\",{value:!0}),t);var s=j((q,i)=>{i.exports=_jsx_runtime});var v={};f(v,{default:()=>M,frontmatter:()=>w});var n=y(s()),w={title:\"How do `Set`s and `Map`s handle equality checks for objects?\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",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:[(0,n.jsx)(e.code,{children:\"Set\"}),\"s and \",(0,n.jsx)(e.code,{children:\"Map\"}),\"s in JavaScript handle equality checks for objects based on reference equality, not deep equality. This means that two objects are considered equal only if they reference the same memory location. For example, if you add two different object literals with the same properties to a \",(0,n.jsx)(e.code,{children:\"Set\"}),\", they will be treated as distinct entries.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const set = new Set();\nconst obj1 = { a: 1 };\nconst obj2 = { a: 1 };\n\nset.add(obj1);\nset.add(obj2);\n\nconsole.log(set.size); // Output: 2\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"How do \",(0,n.jsx)(e.code,{children:\"Set\"}),\"s and \",(0,n.jsx)(e.code,{children:\"Map\"}),\"s handle equality checks for objects?\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Reference equality\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, \",(0,n.jsx)(e.code,{children:\"Set\"}),\"s and \",(0,n.jsx)(e.code,{children:\"Map\"}),\"s use reference equality to determine if two objects are the same. This means that two objects are considered equal only if they reference the same memory location.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Example with \",(0,n.jsx)(e.code,{children:\"Set\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"When you add objects to a \",(0,n.jsx)(e.code,{children:\"Set\"}),\", the \",(0,n.jsx)(e.code,{children:\"Set\"}),\" will only consider them equal if they are the same object reference.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const set = new Set();\nconst obj1 = { a: 1 };\nconst obj2 = { a: 1 };\n\nset.add(obj1);\nset.add(obj2);\n\nconsole.log(set.size); // Output: 2\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"obj1\"}),\" and \",(0,n.jsx)(e.code,{children:\"obj2\"}),\" have the same properties, but they are different object references. Therefore, the \",(0,n.jsx)(e.code,{children:\"Set\"}),\" treats them as distinct entries.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Example with \",(0,n.jsx)(e.code,{children:\"Map\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Similarly, when you use objects as keys in a \",(0,n.jsx)(e.code,{children:\"Map\"}),\", the \",(0,n.jsx)(e.code,{children:\"Map\"}),\" will only consider them equal if they are the same object reference.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const map = new Map();\nconst obj1 = { a: 1 };\nconst obj2 = { a: 1 };\n\nmap.set(obj1, 'value1');\nmap.set(obj2, 'value2');\n\nconsole.log(map.size); // Output: 2\nconsole.log(map.get(obj1)); // Output: 'value1'\nconsole.log(map.get(obj2)); // Output: 'value2'\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"obj1\"}),\" and \",(0,n.jsx)(e.code,{children:\"obj2\"}),\" are different object references, so the \",(0,n.jsx)(e.code,{children:\"Map\"}),\" treats them as different keys.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Practical implications\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"If you need to check for deep equality (i.e., objects with the same properties and values), you will need to implement your own comparison logic or use a library like Lodash.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Be mindful of object references when using \",(0,n.jsx)(e.code,{children:\"Set\"}),\"s and \",(0,n.jsx)(e.code,{children:\"Map\"}),\"s, especially when dealing with complex data structures.\"]}),`\n`]}),`\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/Web/JavaScript/Reference/Global_Objects/Set\",children:\"MDN Web Docs: Set\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map\",children:\"MDN Web Docs: Map\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://lodash.com/docs/4.17.15#isEqual\",children:\"Lodash: isEqual\"})}),`\n`]})]})}function S(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var M=S;return g(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var f=(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,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!j.call(t,c)&&c!==o&&r(t,c,{get:()=>e[c],enumerable:!(a=u(e,c))||a.enumerable});return t};var w=(t,e,o)=>(o=t!=null?p(b(t)):{},l(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),g=t=>l(r({},\"__esModule\",{value:!0}),t);var d=f((x,i)=>{i.exports=_jsx_runtime});var M={};y(M,{default:()=>h,frontmatter:()=>S});var n=w(d()),S={title:\"How do `Set`s and `Map`s handle equality checks for objects?\"};function s(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Set\"}),\"s and \",(0,n.jsx)(e.code,{children:\"Map\"}),\"s in JavaScript handle equality checks for objects based on reference equality, not deep equality. This means that two objects are considered equal only if they reference the same memory location. For example, if you add two different object literals with the same properties to a \",(0,n.jsx)(e.code,{children:\"Set\"}),\", they will be treated as distinct entries.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const set = new Set();\nconst obj1 = { a: 1 };\nconst obj2 = { a: 1 };\n\nset.add(obj1);\nset.add(obj2);\n\nconsole.log(set.size); // Output: 2\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"How do \",(0,n.jsx)(e.code,{children:\"Set\"}),\"s and \",(0,n.jsx)(e.code,{children:\"Map\"}),\"s handle equality checks for objects?\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Reference equality\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, \",(0,n.jsx)(e.code,{children:\"Set\"}),\"s and \",(0,n.jsx)(e.code,{children:\"Map\"}),\"s use reference equality to determine if two objects are the same. This means that two objects are considered equal only if they reference the same memory location.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Example with \",(0,n.jsx)(e.code,{children:\"Set\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"When you add objects to a \",(0,n.jsx)(e.code,{children:\"Set\"}),\", the \",(0,n.jsx)(e.code,{children:\"Set\"}),\" will only consider them equal if they are the same object reference.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const set = new Set();\nconst obj1 = { a: 1 };\nconst obj2 = { a: 1 };\n\nset.add(obj1);\nset.add(obj2);\n\nconsole.log(set.size); // Output: 2\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"obj1\"}),\" and \",(0,n.jsx)(e.code,{children:\"obj2\"}),\" have the same properties, but they are different object references. Therefore, the \",(0,n.jsx)(e.code,{children:\"Set\"}),\" treats them as distinct entries.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Example with \",(0,n.jsx)(e.code,{children:\"Map\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Similarly, when you use objects as keys in a \",(0,n.jsx)(e.code,{children:\"Map\"}),\", the \",(0,n.jsx)(e.code,{children:\"Map\"}),\" will only consider them equal if they are the same object reference.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const map = new Map();\nconst obj1 = { a: 1 };\nconst obj2 = { a: 1 };\n\nmap.set(obj1, 'value1');\nmap.set(obj2, 'value2');\n\nconsole.log(map.size); // Output: 2\nconsole.log(map.get(obj1)); // Output: 'value1'\nconsole.log(map.get(obj2)); // Output: 'value2'\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"obj1\"}),\" and \",(0,n.jsx)(e.code,{children:\"obj2\"}),\" are different object references, so the \",(0,n.jsx)(e.code,{children:\"Map\"}),\" treats them as different keys.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Practical implications\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"If you need to check for deep equality (i.e., objects with the same properties and values), you will need to implement your own comparison logic or use a library like Lodash.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Be mindful of object references when using \",(0,n.jsx)(e.code,{children:\"Set\"}),\"s and \",(0,n.jsx)(e.code,{children:\"Map\"}),\"s, especially when dealing with complex data structures.\"]}),`\n`]}),`\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/Web/JavaScript/Reference/Global_Objects/Set\",children:\"MDN Web Docs: Set\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map\",children:\"MDN Web Docs: Map\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://lodash.com/docs/4.17.15#isEqual\",children:\"Lodash: isEqual\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(s,{...t})}):s(t)}return g(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-sets-and-maps-handle-equality-checks-for-objects/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-sets-and-maps-handle-equality-checks-for-objects/zh-CN.json
index 85b6372ee..51a6cdcfa 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-sets-and-maps-handle-equality-checks-for-objects/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-sets-and-maps-handle-equality-checks-for-objects/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-sets-and-maps-handle-equality-checks-for-objects/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var m=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),S=(c,e)=>{for(var o in e)t(c,o,{get:e[o],enumerable:!0})},r=(c,e,o,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of u(e))!b.call(c,l)&&l!==o&&t(c,l,{get:()=>e[l],enumerable:!(d=p(e,l))||d.enumerable});return c};var g=(c,e,o)=>(o=c!=null?s(j(c)):{},r(e||!c||!c.__esModule?t(o,\"default\",{value:c,enumerable:!0}):o,c)),M=c=>r(t({},\"__esModule\",{value:!0}),c);var i=m((D,a)=>{a.exports=_jsx_runtime});var O={};S(O,{default:()=>x,frontmatter:()=>v});var n=g(i()),v={title:\"Set \\u548C Map \\u5982\\u4F55\\u5904\\u7406\\u5BF9\\u8C61\\u7684\\u76F8\\u7B49\\u6027\\u68C0\\u67E5\\uFF1F\"};function h(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u6839\\u636E\\u5F15\\u7528\\u76F8\\u7B49\\u6027\\uFF08\\u800C\\u4E0D\\u662F\\u6DF1\\u5EA6\\u76F8\\u7B49\\u6027\\uFF09\\u5904\\u7406\\u5BF9\\u8C61\\u7684\\u76F8\\u7B49\\u6027\\u68C0\\u67E5\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u53EA\\u6709\\u5F53\\u4E24\\u4E2A\\u5BF9\\u8C61\\u5F15\\u7528\\u76F8\\u540C\\u7684\\u5185\\u5B58\\u4F4D\\u7F6E\\u65F6\\uFF0C\\u624D\\u8BA4\\u4E3A\\u5B83\\u4EEC\\u76F8\\u7B49\\u3002\\u4F8B\\u5982\\uFF0C\\u5982\\u679C\\u5C06\\u4E24\\u4E2A\\u5177\\u6709\\u76F8\\u540C\\u5C5E\\u6027\\u7684\\u4E0D\\u540C\\u5BF9\\u8C61\\u5B57\\u9762\\u91CF\\u6DFB\\u52A0\\u5230 \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u4E2D\\uFF0C\\u5B83\\u4EEC\\u5C06\\u88AB\\u89C6\\u4E3A\\u4E0D\\u540C\\u7684\\u6761\\u76EE\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const set = new Set();\nconst obj1 = { a: 1 };\nconst obj2 = { a: 1 };\n\nset.add(obj1);\nset.add(obj2);\n\nconsole.log(set.size); // Output: 2\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Set \\u548C Map \\u5982\\u4F55\\u5904\\u7406\\u5BF9\\u8C61\\u7684\\u76F8\\u7B49\\u6027\\u68C0\\u67E5\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5F15\\u7528\\u76F8\\u7B49\\u6027\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u4F7F\\u7528\\u5F15\\u7528\\u76F8\\u7B49\\u6027\\u6765\\u786E\\u5B9A\\u4E24\\u4E2A\\u5BF9\\u8C61\\u662F\\u5426\\u76F8\\u540C\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u53EA\\u6709\\u5F53\\u4E24\\u4E2A\\u5BF9\\u8C61\\u5F15\\u7528\\u76F8\\u540C\\u7684\\u5185\\u5B58\\u4F4D\\u7F6E\\u65F6\\uFF0C\\u624D\\u8BA4\\u4E3A\\u5B83\\u4EEC\\u76F8\\u7B49\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Set \\u793A\\u4F8B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u60A8\\u5C06\\u5BF9\\u8C61\\u6DFB\\u52A0\\u5230 \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u65F6\\uFF0C\",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u4EC5\\u5728\\u5B83\\u4EEC\\u662F\\u76F8\\u540C\\u7684\\u5BF9\\u8C61\\u5F15\\u7528\\u65F6\\u624D\\u8BA4\\u4E3A\\u5B83\\u4EEC\\u76F8\\u7B49\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const set = new Set();\nconst obj1 = { a: 1 };\nconst obj2 = { a: 1 };\n\nset.add(obj1);\nset.add(obj2);\n\nconsole.log(set.size); // Output: 2\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"obj1\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"obj2\"}),\" \\u5177\\u6709\\u76F8\\u540C\\u7684\\u5C5E\\u6027\\uFF0C\\u4F46\\u5B83\\u4EEC\\u662F\\u4E0D\\u540C\\u7684\\u5BF9\\u8C61\\u5F15\\u7528\\u3002\\u56E0\\u6B64\\uFF0C\",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u5C06\\u5B83\\u4EEC\\u89C6\\u4E3A\\u4E0D\\u540C\\u7684\\u6761\\u76EE\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Map \\u793A\\u4F8B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u540C\\u6837\\uFF0C\\u5F53\\u60A8\\u5C06\\u5BF9\\u8C61\\u7528\\u4F5C \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u4E2D\\u7684\\u952E\\u65F6\\uFF0C\",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u4EC5\\u5728\\u5B83\\u4EEC\\u662F\\u76F8\\u540C\\u7684\\u5BF9\\u8C61\\u5F15\\u7528\\u65F6\\u624D\\u8BA4\\u4E3A\\u5B83\\u4EEC\\u76F8\\u7B49\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const map = new Map();\nconst obj1 = { a: 1 };\nconst obj2 = { a: 1 };\n\nmap.set(obj1, 'value1');\nmap.set(obj2, 'value2');\n\nconsole.log(map.size); // Output: 2\nconsole.log(map.get(obj1)); // Output: 'value1'\nconsole.log(map.get(obj2)); // Output: 'value2'\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"obj1\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"obj2\"}),\" \\u662F\\u4E0D\\u540C\\u7684\\u5BF9\\u8C61\\u5F15\\u7528\\uFF0C\\u56E0\\u6B64 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5C06\\u5B83\\u4EEC\\u89C6\\u4E3A\\u4E0D\\u540C\\u7684\\u952E\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B9E\\u9645\\u5E94\\u7528\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u5982\\u679C\\u60A8\\u9700\\u8981\\u68C0\\u67E5\\u6DF1\\u5EA6\\u76F8\\u7B49\\u6027\\uFF08\\u5373\\uFF0C\\u5177\\u6709\\u76F8\\u540C\\u5C5E\\u6027\\u548C\\u503C\\u7684\\u5BF9\\u8C61\\uFF09\\uFF0C\\u5219\\u9700\\u8981\\u5B9E\\u73B0\\u81EA\\u5DF1\\u7684\\u6BD4\\u8F83\\u903B\\u8F91\\u6216\\u4F7F\\u7528 Lodash \\u7B49\\u5E93\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5728\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u65F6\\uFF0C\\u8BF7\\u6CE8\\u610F\\u5BF9\\u8C61\\u5F15\\u7528\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u5904\\u7406\\u590D\\u6742\\u6570\\u636E\\u7ED3\\u6784\\u65F6\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Set\",children:\"MDN Web Docs: Set\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map\",children:\"MDN Web Docs: Map\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://lodash.com/docs/4.17.15#isEqual\",children:\"Lodash: isEqual\"})}),`\n`]})]})}function f(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(h,c)})):h(c)}var x=f;return M(O);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var S=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),g=(c,e)=>{for(var o in e)t(c,o,{get:e[o],enumerable:!0})},r=(c,e,o,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of j(e))!m.call(c,l)&&l!==o&&t(c,l,{get:()=>e[l],enumerable:!(d=u(e,l))||d.enumerable});return c};var M=(c,e,o)=>(o=c!=null?p(b(c)):{},r(e||!c||!c.__esModule?t(o,\"default\",{value:c,enumerable:!0}):o,c)),v=c=>r(t({},\"__esModule\",{value:!0}),c);var i=S((D,a)=>{a.exports=_jsx_runtime});var x={};g(x,{default:()=>s,frontmatter:()=>f});var n=M(i()),f={title:\"Set \\u548C Map \\u5982\\u4F55\\u5904\\u7406\\u5BF9\\u8C61\\u7684\\u76F8\\u7B49\\u6027\\u68C0\\u67E5\\uFF1F\"};function h(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u6839\\u636E\\u5F15\\u7528\\u76F8\\u7B49\\u6027\\uFF08\\u800C\\u4E0D\\u662F\\u6DF1\\u5EA6\\u76F8\\u7B49\\u6027\\uFF09\\u5904\\u7406\\u5BF9\\u8C61\\u7684\\u76F8\\u7B49\\u6027\\u68C0\\u67E5\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u53EA\\u6709\\u5F53\\u4E24\\u4E2A\\u5BF9\\u8C61\\u5F15\\u7528\\u76F8\\u540C\\u7684\\u5185\\u5B58\\u4F4D\\u7F6E\\u65F6\\uFF0C\\u624D\\u8BA4\\u4E3A\\u5B83\\u4EEC\\u76F8\\u7B49\\u3002\\u4F8B\\u5982\\uFF0C\\u5982\\u679C\\u5C06\\u4E24\\u4E2A\\u5177\\u6709\\u76F8\\u540C\\u5C5E\\u6027\\u7684\\u4E0D\\u540C\\u5BF9\\u8C61\\u5B57\\u9762\\u91CF\\u6DFB\\u52A0\\u5230 \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u4E2D\\uFF0C\\u5B83\\u4EEC\\u5C06\\u88AB\\u89C6\\u4E3A\\u4E0D\\u540C\\u7684\\u6761\\u76EE\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const set = new Set();\nconst obj1 = { a: 1 };\nconst obj2 = { a: 1 };\n\nset.add(obj1);\nset.add(obj2);\n\nconsole.log(set.size); // Output: 2\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Set \\u548C Map \\u5982\\u4F55\\u5904\\u7406\\u5BF9\\u8C61\\u7684\\u76F8\\u7B49\\u6027\\u68C0\\u67E5\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5F15\\u7528\\u76F8\\u7B49\\u6027\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u4F7F\\u7528\\u5F15\\u7528\\u76F8\\u7B49\\u6027\\u6765\\u786E\\u5B9A\\u4E24\\u4E2A\\u5BF9\\u8C61\\u662F\\u5426\\u76F8\\u540C\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u53EA\\u6709\\u5F53\\u4E24\\u4E2A\\u5BF9\\u8C61\\u5F15\\u7528\\u76F8\\u540C\\u7684\\u5185\\u5B58\\u4F4D\\u7F6E\\u65F6\\uFF0C\\u624D\\u8BA4\\u4E3A\\u5B83\\u4EEC\\u76F8\\u7B49\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Set \\u793A\\u4F8B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u60A8\\u5C06\\u5BF9\\u8C61\\u6DFB\\u52A0\\u5230 \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u65F6\\uFF0C\",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u4EC5\\u5728\\u5B83\\u4EEC\\u662F\\u76F8\\u540C\\u7684\\u5BF9\\u8C61\\u5F15\\u7528\\u65F6\\u624D\\u8BA4\\u4E3A\\u5B83\\u4EEC\\u76F8\\u7B49\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const set = new Set();\nconst obj1 = { a: 1 };\nconst obj2 = { a: 1 };\n\nset.add(obj1);\nset.add(obj2);\n\nconsole.log(set.size); // Output: 2\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"obj1\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"obj2\"}),\" \\u5177\\u6709\\u76F8\\u540C\\u7684\\u5C5E\\u6027\\uFF0C\\u4F46\\u5B83\\u4EEC\\u662F\\u4E0D\\u540C\\u7684\\u5BF9\\u8C61\\u5F15\\u7528\\u3002\\u56E0\\u6B64\\uFF0C\",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u5C06\\u5B83\\u4EEC\\u89C6\\u4E3A\\u4E0D\\u540C\\u7684\\u6761\\u76EE\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Map \\u793A\\u4F8B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u540C\\u6837\\uFF0C\\u5F53\\u60A8\\u5C06\\u5BF9\\u8C61\\u7528\\u4F5C \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u4E2D\\u7684\\u952E\\u65F6\\uFF0C\",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u4EC5\\u5728\\u5B83\\u4EEC\\u662F\\u76F8\\u540C\\u7684\\u5BF9\\u8C61\\u5F15\\u7528\\u65F6\\u624D\\u8BA4\\u4E3A\\u5B83\\u4EEC\\u76F8\\u7B49\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const map = new Map();\nconst obj1 = { a: 1 };\nconst obj2 = { a: 1 };\n\nmap.set(obj1, 'value1');\nmap.set(obj2, 'value2');\n\nconsole.log(map.size); // Output: 2\nconsole.log(map.get(obj1)); // Output: 'value1'\nconsole.log(map.get(obj2)); // Output: 'value2'\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"obj1\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"obj2\"}),\" \\u662F\\u4E0D\\u540C\\u7684\\u5BF9\\u8C61\\u5F15\\u7528\\uFF0C\\u56E0\\u6B64 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5C06\\u5B83\\u4EEC\\u89C6\\u4E3A\\u4E0D\\u540C\\u7684\\u952E\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B9E\\u9645\\u5E94\\u7528\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u5982\\u679C\\u60A8\\u9700\\u8981\\u68C0\\u67E5\\u6DF1\\u5EA6\\u76F8\\u7B49\\u6027\\uFF08\\u5373\\uFF0C\\u5177\\u6709\\u76F8\\u540C\\u5C5E\\u6027\\u548C\\u503C\\u7684\\u5BF9\\u8C61\\uFF09\\uFF0C\\u5219\\u9700\\u8981\\u5B9E\\u73B0\\u81EA\\u5DF1\\u7684\\u6BD4\\u8F83\\u903B\\u8F91\\u6216\\u4F7F\\u7528 Lodash \\u7B49\\u5E93\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5728\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u65F6\\uFF0C\\u8BF7\\u6CE8\\u610F\\u5BF9\\u8C61\\u5F15\\u7528\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u5904\\u7406\\u590D\\u6742\\u6570\\u636E\\u7ED3\\u6784\\u65F6\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Set\",children:\"MDN Web Docs: Set\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map\",children:\"MDN Web Docs: Map\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://lodash.com/docs/4.17.15#isEqual\",children:\"Lodash: isEqual\"})}),`\n`]})]})}function s(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(h,{...c})}):h(c)}return v(x);})();\n;return Component;"
 }
\ No newline at end of file
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 64956e01c..ca0eb6b1d 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var t in e)l(r,t,{get:e[t],enumerable:!0})},c=(r,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!b.call(r,o)&&o!==t&&l(r,o,{get:()=>e[o],enumerable:!(s=u(e,o))||s.enumerable});return r};var C=(r,e,t)=>(t=r!=null?d(g(r)):{},c(e||!r||!r.__esModule?l(t,\"default\",{value:r,enumerable:!0}):t,r)),q=r=>c(l({},\"__esModule\",{value:!0}),r);var a=m((k,i)=>{i.exports=_jsx_runtime});var v={};f(v,{default:()=>A,frontmatter:()=>w});var n=C(a()),w={title:\"How do you abort a web request using `AbortController` in JavaScript?\"};function h(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",ul:\"ul\",li:\"li\",hr:\"hr\",ol:\"ol\",strong:\"strong\",h3:\"h3\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"AbortController\"}),\" is used to cancel ongoing asynchronous operations like fetch requests.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const controller = new AbortController();\nconst signal = controller.signal;\n\nfetch('https://jsonplaceholder.typicode.com/todos/1', { signal })\n  .then((response) => {\n    // Handle response\n  })\n  .catch((error) => {\n    if (error.name === 'AbortError') {\n      console.log('Request aborted');\n    } else {\n      console.error('Error:', error);\n    }\n  });\n\n// Call abort() to abort the request\ncontroller.abort();\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Aborting web requests is useful for:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Canceling requests based on user actions.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Prioritizing the latest requests in scenarios with multiple simultaneous requests.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Canceling requests that are no longer needed, e.g. after the user has navigated away from the page.\"}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"AbortController\"}),\"s\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"AbortController\"}),\" allows graceful cancelation of ongoing asynchronous operations like fetch requests. It offers a mechanism to signal to the underlying network layer that the request is no longer required, preventing unnecessary resource consumption and improving user experience.\"]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"AbortController\"}),\"s\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"AbortController\"}),\"s involve the following steps:\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"Create an \",(0,n.jsx)(e.code,{children:\"AbortController\"}),\" instance\"]}),\": Initialize an \",(0,n.jsx)(e.code,{children:\"AbortController\"}),\" instance, which creates a signal that can be used to abort requests.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Pass the signal to the request\"}),\": Pass the signal to the request, typically through the \",(0,n.jsx)(e.code,{children:\"signal\"}),\" property in the request options.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Abort the request\"}),\": Call the \",(0,n.jsx)(e.code,{children:\"abort()\"}),\" method on the \",(0,n.jsx)(e.code,{children:\"AbortController\"}),\" instance to cancel the ongoing request.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here is an example of how to use \",(0,n.jsx)(e.code,{children:\"AbortController\"}),\"s with the \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const controller = new AbortController();\nconst signal = controller.signal;\n\nfetch('https://jsonplaceholder.typicode.com/todos/1', { signal })\n  .then((response) => {\n    // Handle response\n  })\n  .catch((error) => {\n    if (error.name === 'AbortError') {\n      console.log('Request aborted');\n    } else {\n      console.error('Error:', error);\n    }\n  });\n\n// Call abort() to abort the request\ncontroller.abort();\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Canceling a \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" request on a user action\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Cancel requests that take too long or are no longer relevant due to user interactions (e.g., user cancels uploading of a huge file).\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML: <button id='cancel-button'>Cancel upload</button>\nconst btn = document.createElement('button');\nbtn.id = 'cancel-button';\nbtn.innerHTML = 'Cancel upload';\ndocument.body.appendChild(btn);\n\nconst controller = new AbortController();\nconst signal = controller.signal;\n\nfetch('https://jsonplaceholder.typicode.com/todos/1', { signal })\n  .then((response) => {\n    // Handle successful response\n  })\n  .catch((error) => {\n    if (error.name === 'AbortError') {\n      console.log('Request canceled');\n    } else {\n      console.error('Network or other error:', error);\n    }\n  });\n\ndocument.getElementById('cancel-button').addEventListener('click', () => {\n  controller.abort();\n});\ndocument.getElementById('cancel-button').click(); // Simulate clicking the cancel button\n`})}),`\n`,(0,n.jsx)(e.p,{children:'When you click the \"Cancel upload\" button, in-flight request will be aborted.'}),`\n`,(0,n.jsx)(e.h3,{children:\"Prioritizing latest requests in a race condition\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In scenarios where multiple requests are initiated for the same data, use \",(0,n.jsx)(e.code,{children:\"AbortController\"}),\" to prioritize the latest request and abort earlier ones.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let latestController = null; // Keeps track of the latest controller\n\nfunction fetchData(url) {\n  if (latestController) {\n    latestController.abort(); // Abort any previous request\n  }\n\n  const controller = new AbortController();\n  latestController = controller;\n  const signal = controller.signal;\n\n  fetch(url, { signal })\n    .then((response) => response.json())\n    .then((data) => console.log('Fetched data:', data))\n    .catch((error) => {\n      if (error.name === 'AbortError') {\n        console.log('Request canceled');\n      } else {\n        console.error('Network or other error:', error);\n      }\n    });\n}\n\nfetchData('https://jsonplaceholder.typicode.com/posts/1');\n\n// Simulate race conditions with new requests that quickly cancel the previous one\nsetTimeout(() => {\n  fetchData('https://jsonplaceholder.typicode.com/posts/2');\n}, 5);\nsetTimeout(() => {\n  fetchData('https://jsonplaceholder.typicode.com/posts/3');\n}, 5);\n// Only the last request should (posts/3) will be allowed to complete\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, when the \",(0,n.jsx)(e.code,{children:\"fetchData()\"}),\" function is called multiple times triggering multiple fetch requests, \",(0,n.jsx)(e.code,{children:\"AbortController\"}),\"s will cancel all the previous requests except the latest request. This is common in scenarios like type-ahead search or infinite scrolling, where new requests are triggered frequently.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Canceling requests that are no longer needed\"}),`\n`,(0,n.jsx)(e.p,{children:\"In situations where the user has navigated away from the page, aborting the request can prevent unnecessary operations (e.g. success callback handling), and freeing up resources by lowering the likelihood of memory leaks.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"AbortController\"}),\"s is not \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\"-specific, it can be used to abort other asynchronous tasks as well.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"A singular \",(0,n.jsx)(e.code,{children:\"AbortContoller\"}),\" instance can be reused on multiple async tasks and cancel all of them at once.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Calling \",(0,n.jsx)(e.code,{children:\"abort()\"}),\" on \",(0,n.jsx)(e.code,{children:\"AbortController\"}),\"s does not send any notification or signal to the server. The server is unaware of the cancelation and will continue processing the request until it completes or times out.\"]}),`\n`]}),`\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/Web/API/AbortController\",children:\"AbortController | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/fetch-abort\",children:\"Fetch: Abort | Javascript.info\"})}),`\n`]})]})}function y(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(h,r)})):h(r)}var A=y;return q(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),C=(r,e)=>{for(var t in e)l(r,t,{get:e[t],enumerable:!0})},c=(r,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of g(e))!m.call(r,o)&&o!==t&&l(r,o,{get:()=>e[o],enumerable:!(s=p(e,o))||s.enumerable});return r};var q=(r,e,t)=>(t=r!=null?u(b(r)):{},c(e||!r||!r.__esModule?l(t,\"default\",{value:r,enumerable:!0}):t,r)),w=r=>c(l({},\"__esModule\",{value:!0}),r);var a=f((k,i)=>{i.exports=_jsx_runtime});var A={};C(A,{default:()=>d,frontmatter:()=>y});var n=q(a()),y={title:\"How do you abort a web request using `AbortController` in JavaScript?\"};function h(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"AbortController\"}),\" is used to cancel ongoing asynchronous operations like fetch requests.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const controller = new AbortController();\nconst signal = controller.signal;\n\nfetch('https://jsonplaceholder.typicode.com/todos/1', { signal })\n  .then((response) => {\n    // Handle response\n  })\n  .catch((error) => {\n    if (error.name === 'AbortError') {\n      console.log('Request aborted');\n    } else {\n      console.error('Error:', error);\n    }\n  });\n\n// Call abort() to abort the request\ncontroller.abort();\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Aborting web requests is useful for:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Canceling requests based on user actions.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Prioritizing the latest requests in scenarios with multiple simultaneous requests.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Canceling requests that are no longer needed, e.g. after the user has navigated away from the page.\"}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"AbortController\"}),\"s\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"AbortController\"}),\" allows graceful cancelation of ongoing asynchronous operations like fetch requests. It offers a mechanism to signal to the underlying network layer that the request is no longer required, preventing unnecessary resource consumption and improving user experience.\"]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"AbortController\"}),\"s\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"AbortController\"}),\"s involve the following steps:\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"Create an \",(0,n.jsx)(e.code,{children:\"AbortController\"}),\" instance\"]}),\": Initialize an \",(0,n.jsx)(e.code,{children:\"AbortController\"}),\" instance, which creates a signal that can be used to abort requests.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Pass the signal to the request\"}),\": Pass the signal to the request, typically through the \",(0,n.jsx)(e.code,{children:\"signal\"}),\" property in the request options.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Abort the request\"}),\": Call the \",(0,n.jsx)(e.code,{children:\"abort()\"}),\" method on the \",(0,n.jsx)(e.code,{children:\"AbortController\"}),\" instance to cancel the ongoing request.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here is an example of how to use \",(0,n.jsx)(e.code,{children:\"AbortController\"}),\"s with the \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const controller = new AbortController();\nconst signal = controller.signal;\n\nfetch('https://jsonplaceholder.typicode.com/todos/1', { signal })\n  .then((response) => {\n    // Handle response\n  })\n  .catch((error) => {\n    if (error.name === 'AbortError') {\n      console.log('Request aborted');\n    } else {\n      console.error('Error:', error);\n    }\n  });\n\n// Call abort() to abort the request\ncontroller.abort();\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Canceling a \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" request on a user action\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Cancel requests that take too long or are no longer relevant due to user interactions (e.g., user cancels uploading of a huge file).\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML: <button id='cancel-button'>Cancel upload</button>\nconst btn = document.createElement('button');\nbtn.id = 'cancel-button';\nbtn.innerHTML = 'Cancel upload';\ndocument.body.appendChild(btn);\n\nconst controller = new AbortController();\nconst signal = controller.signal;\n\nfetch('https://jsonplaceholder.typicode.com/todos/1', { signal })\n  .then((response) => {\n    // Handle successful response\n  })\n  .catch((error) => {\n    if (error.name === 'AbortError') {\n      console.log('Request canceled');\n    } else {\n      console.error('Network or other error:', error);\n    }\n  });\n\ndocument.getElementById('cancel-button').addEventListener('click', () => {\n  controller.abort();\n});\ndocument.getElementById('cancel-button').click(); // Simulate clicking the cancel button\n`})}),`\n`,(0,n.jsx)(e.p,{children:'When you click the \"Cancel upload\" button, in-flight request will be aborted.'}),`\n`,(0,n.jsx)(e.h3,{children:\"Prioritizing latest requests in a race condition\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In scenarios where multiple requests are initiated for the same data, use \",(0,n.jsx)(e.code,{children:\"AbortController\"}),\" to prioritize the latest request and abort earlier ones.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let latestController = null; // Keeps track of the latest controller\n\nfunction fetchData(url) {\n  if (latestController) {\n    latestController.abort(); // Abort any previous request\n  }\n\n  const controller = new AbortController();\n  latestController = controller;\n  const signal = controller.signal;\n\n  fetch(url, { signal })\n    .then((response) => response.json())\n    .then((data) => console.log('Fetched data:', data))\n    .catch((error) => {\n      if (error.name === 'AbortError') {\n        console.log('Request canceled');\n      } else {\n        console.error('Network or other error:', error);\n      }\n    });\n}\n\nfetchData('https://jsonplaceholder.typicode.com/posts/1');\n\n// Simulate race conditions with new requests that quickly cancel the previous one\nsetTimeout(() => {\n  fetchData('https://jsonplaceholder.typicode.com/posts/2');\n}, 5);\nsetTimeout(() => {\n  fetchData('https://jsonplaceholder.typicode.com/posts/3');\n}, 5);\n// Only the last request should (posts/3) will be allowed to complete\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, when the \",(0,n.jsx)(e.code,{children:\"fetchData()\"}),\" function is called multiple times triggering multiple fetch requests, \",(0,n.jsx)(e.code,{children:\"AbortController\"}),\"s will cancel all the previous requests except the latest request. This is common in scenarios like type-ahead search or infinite scrolling, where new requests are triggered frequently.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Canceling requests that are no longer needed\"}),`\n`,(0,n.jsx)(e.p,{children:\"In situations where the user has navigated away from the page, aborting the request can prevent unnecessary operations (e.g. success callback handling), and freeing up resources by lowering the likelihood of memory leaks.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"AbortController\"}),\"s is not \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\"-specific, it can be used to abort other asynchronous tasks as well.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"A singular \",(0,n.jsx)(e.code,{children:\"AbortContoller\"}),\" instance can be reused on multiple async tasks and cancel all of them at once.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Calling \",(0,n.jsx)(e.code,{children:\"abort()\"}),\" on \",(0,n.jsx)(e.code,{children:\"AbortController\"}),\"s does not send any notification or signal to the server. The server is unaware of the cancelation and will continue processing the request until it completes or times out.\"]}),`\n`]}),`\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/Web/API/AbortController\",children:\"AbortController | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/fetch-abort\",children:\"Fetch: Abort | Javascript.info\"})}),`\n`]})]})}function d(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return w(A);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-abort-a-web-request-using-abortcontrollers/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-abort-a-web-request-using-abortcontrollers/zh-CN.json
index 1173dee65..990aad66e 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-abort-a-web-request-using-abortcontrollers/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-abort-a-web-request-using-abortcontrollers/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-abort-a-web-request-using-abortcontrollers/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),f=(r,n)=>{for(var o in n)t(r,o,{get:n[o],enumerable:!0})},d=(r,n,o,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of b(n))!g.call(r,l)&&l!==o&&t(r,l,{get:()=>n[l],enumerable:!(c=p(n,l))||c.enumerable});return r};var C=(r,n,o)=>(o=r!=null?a(u(r)):{},d(n||!r||!r.__esModule?t(o,\"default\",{value:r,enumerable:!0}):o,r)),A=r=>d(t({},\"__esModule\",{value:!0}),r);var s=m((E,i)=>{i.exports=_jsx_runtime});var w={};f(w,{default:()=>v,frontmatter:()=>j});var e=C(s()),j={title:\"\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u4F7F\\u7528 `AbortController` \\u7EC8\\u6B62 Web \\u8BF7\\u6C42\\uFF1F\"};function h(r){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",ul:\"ul\",li:\"li\",hr:\"hr\",ol:\"ol\",strong:\"strong\",h3:\"h3\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"AbortController\"}),\" \\u7528\\u4E8E\\u53D6\\u6D88\\u8FDB\\u884C\\u4E2D\\u7684\\u5F02\\u6B65\\u64CD\\u4F5C\\uFF0C\\u4F8B\\u5982 fetch \\u8BF7\\u6C42\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const controller = new AbortController();\nconst signal = controller.signal;\n\nfetch('https://jsonplaceholder.typicode.com/todos/1', { signal })\n  .then((response) => {\n    // Handle response\n  })\n  .catch((error) => {\n    if (error.name === 'AbortError') {\n      console.log('Request aborted');\n    } else {\n      console.error('Error:', error);\n    }\n  });\n\n// Call abort() to abort the request\ncontroller.abort();\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7EC8\\u6B62 Web \\u8BF7\\u6C42\\u5BF9\\u4E8E\\u4EE5\\u4E0B\\u60C5\\u51B5\\u5F88\\u6709\\u7528\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u6839\\u636E\\u7528\\u6237\\u64CD\\u4F5C\\u53D6\\u6D88\\u8BF7\\u6C42\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5728\\u6709\\u591A\\u4E2A\\u5E76\\u53D1\\u8BF7\\u6C42\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u4F18\\u5148\\u5904\\u7406\\u6700\\u65B0\\u7684\\u8BF7\\u6C42\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u53D6\\u6D88\\u4E0D\\u518D\\u9700\\u8981\\u7684\\u8BF7\\u6C42\\uFF0C\\u4F8B\\u5982\\uFF0C\\u5728\\u7528\\u6237\\u5DF2\\u4ECE\\u9875\\u9762\\u5BFC\\u822A\\u79BB\\u5F00\\u4E4B\\u540E\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsxs)(n.h2,{children:[(0,e.jsx)(n.code,{children:\"AbortController\"}),\"s\"]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"AbortController\"}),\" \\u5141\\u8BB8\\u4F18\\u96C5\\u5730\\u53D6\\u6D88\\u8FDB\\u884C\\u4E2D\\u7684\\u5F02\\u6B65\\u64CD\\u4F5C\\uFF0C\\u4F8B\\u5982 fetch \\u8BF7\\u6C42\\u3002 \\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u673A\\u5236\\uFF0C\\u5411\\u5E95\\u5C42\\u7F51\\u7EDC\\u5C42\\u53D1\\u51FA\\u4FE1\\u53F7\\uFF0C\\u8868\\u660E\\u4E0D\\u518D\\u9700\\u8981\\u8BE5\\u8BF7\\u6C42\\uFF0C\\u4ECE\\u800C\\u9632\\u6B62\\u4E0D\\u5FC5\\u8981\\u7684\\u8D44\\u6E90\\u6D88\\u8017\\u5E76\\u6539\\u5584\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"]}),`\n`,(0,e.jsxs)(n.h2,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"AbortController\"}),\"s\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"AbortController\"}),\" \\u6D89\\u53CA\\u4EE5\\u4E0B\\u6B65\\u9AA4\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsxs)(n.strong,{children:[\"\\u521B\\u5EFA \",(0,e.jsx)(n.code,{children:\"AbortController\"}),\" \\u5B9E\\u4F8B\"]}),\"\\uFF1A\\u521D\\u59CB\\u5316\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"AbortController\"}),\" \\u5B9E\\u4F8B\\uFF0C\\u5B83\\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u53EF\\u7528\\u4E8E\\u4E2D\\u6B62\\u8BF7\\u6C42\\u7684\\u4FE1\\u53F7\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C06\\u4FE1\\u53F7\\u4F20\\u9012\\u7ED9\\u8BF7\\u6C42\"}),\"\\uFF1A\\u5C06\\u4FE1\\u53F7\\u4F20\\u9012\\u7ED9\\u8BF7\\u6C42\\uFF0C\\u901A\\u5E38\\u901A\\u8FC7\\u8BF7\\u6C42\\u9009\\u9879\\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"signal\"}),\" \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E2D\\u6B62\\u8BF7\\u6C42\"}),\"\\uFF1A\\u5728 \",(0,e.jsx)(n.code,{children:\"AbortController\"}),\" \\u5B9E\\u4F8B\\u4E0A\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"abort()\"}),\" \\u65B9\\u6CD5\\u4EE5\\u53D6\\u6D88\\u6B63\\u5728\\u8FDB\\u884C\\u7684\\u8BF7\\u6C42\\u3002\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4EE5\\u4E0B\\u662F\\u5982\\u4F55\\u5C06 \",(0,e.jsx)(n.code,{children:\"AbortController\"}),\" \\u4E0E \",(0,e.jsx)(n.code,{children:\"fetch()\"}),\" API \\u7ED3\\u5408\\u4F7F\\u7528\\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const controller = new AbortController();\nconst signal = controller.signal;\n\nfetch('https://jsonplaceholder.typicode.com/todos/1', { signal })\n  .then((response) => {\n    // Handle response\n  })\n  .catch((error) => {\n    if (error.name === 'AbortError') {\n      console.log('Request aborted');\n    } else {\n      console.error('Error:', error);\n    }\n  });\n\n// Call abort() to abort the request\ncontroller.abort();\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u5728\\u7528\\u6237\\u64CD\\u4F5C\\u65F6\\u53D6\\u6D88 \",(0,e.jsx)(n.code,{children:\"fetch()\"}),\" \\u8BF7\\u6C42\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u53D6\\u6D88\\u7531\\u4E8E\\u7528\\u6237\\u4EA4\\u4E92\\uFF08\\u4F8B\\u5982\\uFF0C\\u7528\\u6237\\u53D6\\u6D88\\u4E0A\\u4F20\\u4E00\\u4E2A\\u5927\\u6587\\u4EF6\\uFF09\\u800C\\u5BFC\\u81F4\\u8017\\u65F6\\u8FC7\\u957F\\u6216\\u4E0D\\u518D\\u76F8\\u5173\\u7684\\u8BF7\\u6C42\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML: <button id='cancel-button'>Cancel upload</button>\nconst btn = document.createElement('button');\nbtn.id = 'cancel-button';\nbtn.innerHTML = 'Cancel upload';\ndocument.body.appendChild(btn);\n\nconst controller = new AbortController();\nconst signal = controller.signal;\n\nfetch('https://jsonplaceholder.typicode.com/todos/1', { signal })\n  .then((response) => {\n    // Handle successful response\n  })\n  .catch((error) => {\n    if (error.name === 'AbortError') {\n      console.log('Request canceled');\n    } else {\n      console.error('Network or other error:', error);\n    }\n  });\n\ndocument.getElementById('cancel-button').addEventListener('click', () => {\n  controller.abort();\n});\ndocument.getElementById('cancel-button').click(); // Simulate clicking the cancel button\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F53\\u60A8\\u5355\\u51FB\\u201C\\u53D6\\u6D88\\u4E0A\\u4F20\\u201D\\u6309\\u94AE\\u65F6\\uFF0C\\u6B63\\u5728\\u8FDB\\u884C\\u7684\\u8BF7\\u6C42\\u5C06\\u88AB\\u4E2D\\u6B62\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u7ADE\\u4E89\\u6761\\u4EF6\\u4E0B\\u4F18\\u5148\\u5904\\u7406\\u6700\\u65B0\\u8BF7\\u6C42\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u4E3A\\u76F8\\u540C\\u6570\\u636E\\u542F\\u52A8\\u591A\\u4E2A\\u8BF7\\u6C42\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"AbortController\"}),\" \\u4F18\\u5148\\u5904\\u7406\\u6700\\u65B0\\u8BF7\\u6C42\\u5E76\\u4E2D\\u6B62\\u8F83\\u65E9\\u7684\\u8BF7\\u6C42\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`let latestController = null; // Keeps track of the latest controller\n\nfunction fetchData(url) {\n  if (latestController) {\n    latestController.abort(); // Abort any previous request\n  }\n\n  const controller = new AbortController();\n  latestController = controller;\n  const signal = controller.signal;\n\n  fetch(url, { signal })\n    .then((response) => response.json())\n    .then((data) => console.log('Fetched data:', data))\n    .catch((error) => {\n      if (error.name === 'AbortError') {\n        console.log('Request canceled');\n      } else {\n        console.error('Network or other error:', error);\n      }\n    });\n}\n\nfetchData('https://jsonplaceholder.typicode.com/posts/1');\n\n// Simulate race conditions with new requests that quickly cancel the previous one\nsetTimeout(() => {\n  fetchData('https://jsonplaceholder.typicode.com/posts/2');\n}, 5);\nsetTimeout(() => {\n  fetchData('https://jsonplaceholder.typicode.com/posts/3');\n}, 5);\n// Only the last request should (posts/3) will be allowed to complete\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u672C\\u4F8B\\u4E2D\\uFF0C\\u5F53\\u591A\\u6B21\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"fetchData()\"}),\" \\u51FD\\u6570\\u89E6\\u53D1\\u591A\\u4E2A fetch \\u8BF7\\u6C42\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"AbortController\"}),\" \\u5C06\\u53D6\\u6D88\\u6240\\u6709\\u4E4B\\u524D\\u7684\\u8BF7\\u6C42\\uFF0C\\u9664\\u4E86\\u6700\\u65B0\\u7684\\u8BF7\\u6C42\\u3002\\u8FD9\\u5728\\u8BF8\\u5982\\u7C7B\\u578B\\u63D0\\u793A\\u641C\\u7D22\\u6216\\u65E0\\u9650\\u6EDA\\u52A8\\u7B49\\u573A\\u666F\\u4E2D\\u5F88\\u5E38\\u89C1\\uFF0C\\u5728\\u8FD9\\u4E9B\\u573A\\u666F\\u4E2D\\uFF0C\\u4F1A\\u9891\\u7E41\\u89E6\\u53D1\\u65B0\\u7684\\u8BF7\\u6C42\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u53D6\\u6D88\\u4E0D\\u518D\\u9700\\u8981\\u7684\\u8BF7\\u6C42\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u7528\\u6237\\u5DF2\\u4ECE\\u9875\\u9762\\u5BFC\\u822A\\u51FA\\u53BB\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u4E2D\\u6B62\\u8BF7\\u6C42\\u53EF\\u4EE5\\u9632\\u6B62\\u4E0D\\u5FC5\\u8981\\u7684\\u64CD\\u4F5C\\uFF08\\u4F8B\\u5982\\uFF0C\\u6210\\u529F\\u56DE\\u8C03\\u5904\\u7406\\uFF09\\uFF0C\\u5E76\\u901A\\u8FC7\\u964D\\u4F4E\\u5185\\u5B58\\u6CC4\\u6F0F\\u7684\\u53EF\\u80FD\\u6027\\u6765\\u91CA\\u653E\\u8D44\\u6E90\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7B14\\u8BB0\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"AbortController\"}),\" \\u4E0D\\u4EC5\\u9650\\u4E8E \",(0,e.jsx)(n.code,{children:\"fetch()\"}),\"\\uFF0C\\u5B83\\u4E5F\\u53EF\\u4EE5\\u7528\\u4E8E\\u4E2D\\u6B62\\u5176\\u4ED6\\u5F02\\u6B65\\u4EFB\\u52A1\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u4E00\\u4E2A\\u5355\\u72EC\\u7684 \",(0,e.jsx)(n.code,{children:\"AbortContoller\"}),\" \\u5B9E\\u4F8B\\u53EF\\u4EE5\\u5728\\u591A\\u4E2A\\u5F02\\u6B65\\u4EFB\\u52A1\\u4E0A\\u91CD\\u590D\\u4F7F\\u7528\\uFF0C\\u5E76\\u4E00\\u6B21\\u53D6\\u6D88\\u6240\\u6709\\u4EFB\\u52A1\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5728 \",(0,e.jsx)(n.code,{children:\"AbortController\"}),\" \\u4E0A\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"abort()\"}),\" \\u4E0D\\u4F1A\\u5411\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4EFB\\u4F55\\u901A\\u77E5\\u6216\\u4FE1\\u53F7\\u3002\\u670D\\u52A1\\u5668\\u4E0D\\u77E5\\u9053\\u53D6\\u6D88\\u64CD\\u4F5C\\uFF0C\\u5E76\\u5C06\\u7EE7\\u7EED\\u5904\\u7406\\u8BF7\\u6C42\\uFF0C\\u76F4\\u5230\\u5B83\\u5B8C\\u6210\\u6216\\u8D85\\u65F6\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/AbortController\",children:\"AbortController | MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/fetch-abort\",children:\"Fetch: Abort | Javascript.info\"})}),`\n`]})]})}function y(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(h,r)})):h(r)}var v=y;return A(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),C=(r,n)=>{for(var o in n)t(r,o,{get:n[o],enumerable:!0})},d=(r,n,o,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of u(n))!m.call(r,l)&&l!==o&&t(r,l,{get:()=>n[l],enumerable:!(c=b(n,l))||c.enumerable});return r};var A=(r,n,o)=>(o=r!=null?p(g(r)):{},d(n||!r||!r.__esModule?t(o,\"default\",{value:r,enumerable:!0}):o,r)),j=r=>d(t({},\"__esModule\",{value:!0}),r);var h=f((q,i)=>{i.exports=_jsx_runtime});var v={};C(v,{default:()=>a,frontmatter:()=>y});var e=A(h()),y={title:\"\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u4F7F\\u7528 `AbortController` \\u7EC8\\u6B62 Web \\u8BF7\\u6C42\\uFF1F\"};function s(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"AbortController\"}),\" \\u7528\\u4E8E\\u53D6\\u6D88\\u8FDB\\u884C\\u4E2D\\u7684\\u5F02\\u6B65\\u64CD\\u4F5C\\uFF0C\\u4F8B\\u5982 fetch \\u8BF7\\u6C42\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const controller = new AbortController();\nconst signal = controller.signal;\n\nfetch('https://jsonplaceholder.typicode.com/todos/1', { signal })\n  .then((response) => {\n    // Handle response\n  })\n  .catch((error) => {\n    if (error.name === 'AbortError') {\n      console.log('Request aborted');\n    } else {\n      console.error('Error:', error);\n    }\n  });\n\n// Call abort() to abort the request\ncontroller.abort();\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7EC8\\u6B62 Web \\u8BF7\\u6C42\\u5BF9\\u4E8E\\u4EE5\\u4E0B\\u60C5\\u51B5\\u5F88\\u6709\\u7528\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u6839\\u636E\\u7528\\u6237\\u64CD\\u4F5C\\u53D6\\u6D88\\u8BF7\\u6C42\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5728\\u6709\\u591A\\u4E2A\\u5E76\\u53D1\\u8BF7\\u6C42\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u4F18\\u5148\\u5904\\u7406\\u6700\\u65B0\\u7684\\u8BF7\\u6C42\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u53D6\\u6D88\\u4E0D\\u518D\\u9700\\u8981\\u7684\\u8BF7\\u6C42\\uFF0C\\u4F8B\\u5982\\uFF0C\\u5728\\u7528\\u6237\\u5DF2\\u4ECE\\u9875\\u9762\\u5BFC\\u822A\\u79BB\\u5F00\\u4E4B\\u540E\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsxs)(n.h2,{children:[(0,e.jsx)(n.code,{children:\"AbortController\"}),\"s\"]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"AbortController\"}),\" \\u5141\\u8BB8\\u4F18\\u96C5\\u5730\\u53D6\\u6D88\\u8FDB\\u884C\\u4E2D\\u7684\\u5F02\\u6B65\\u64CD\\u4F5C\\uFF0C\\u4F8B\\u5982 fetch \\u8BF7\\u6C42\\u3002 \\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u673A\\u5236\\uFF0C\\u5411\\u5E95\\u5C42\\u7F51\\u7EDC\\u5C42\\u53D1\\u51FA\\u4FE1\\u53F7\\uFF0C\\u8868\\u660E\\u4E0D\\u518D\\u9700\\u8981\\u8BE5\\u8BF7\\u6C42\\uFF0C\\u4ECE\\u800C\\u9632\\u6B62\\u4E0D\\u5FC5\\u8981\\u7684\\u8D44\\u6E90\\u6D88\\u8017\\u5E76\\u6539\\u5584\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"]}),`\n`,(0,e.jsxs)(n.h2,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"AbortController\"}),\"s\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"AbortController\"}),\" \\u6D89\\u53CA\\u4EE5\\u4E0B\\u6B65\\u9AA4\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsxs)(n.strong,{children:[\"\\u521B\\u5EFA \",(0,e.jsx)(n.code,{children:\"AbortController\"}),\" \\u5B9E\\u4F8B\"]}),\"\\uFF1A\\u521D\\u59CB\\u5316\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"AbortController\"}),\" \\u5B9E\\u4F8B\\uFF0C\\u5B83\\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u53EF\\u7528\\u4E8E\\u4E2D\\u6B62\\u8BF7\\u6C42\\u7684\\u4FE1\\u53F7\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C06\\u4FE1\\u53F7\\u4F20\\u9012\\u7ED9\\u8BF7\\u6C42\"}),\"\\uFF1A\\u5C06\\u4FE1\\u53F7\\u4F20\\u9012\\u7ED9\\u8BF7\\u6C42\\uFF0C\\u901A\\u5E38\\u901A\\u8FC7\\u8BF7\\u6C42\\u9009\\u9879\\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"signal\"}),\" \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E2D\\u6B62\\u8BF7\\u6C42\"}),\"\\uFF1A\\u5728 \",(0,e.jsx)(n.code,{children:\"AbortController\"}),\" \\u5B9E\\u4F8B\\u4E0A\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"abort()\"}),\" \\u65B9\\u6CD5\\u4EE5\\u53D6\\u6D88\\u6B63\\u5728\\u8FDB\\u884C\\u7684\\u8BF7\\u6C42\\u3002\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4EE5\\u4E0B\\u662F\\u5982\\u4F55\\u5C06 \",(0,e.jsx)(n.code,{children:\"AbortController\"}),\" \\u4E0E \",(0,e.jsx)(n.code,{children:\"fetch()\"}),\" API \\u7ED3\\u5408\\u4F7F\\u7528\\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const controller = new AbortController();\nconst signal = controller.signal;\n\nfetch('https://jsonplaceholder.typicode.com/todos/1', { signal })\n  .then((response) => {\n    // Handle response\n  })\n  .catch((error) => {\n    if (error.name === 'AbortError') {\n      console.log('Request aborted');\n    } else {\n      console.error('Error:', error);\n    }\n  });\n\n// Call abort() to abort the request\ncontroller.abort();\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u5728\\u7528\\u6237\\u64CD\\u4F5C\\u65F6\\u53D6\\u6D88 \",(0,e.jsx)(n.code,{children:\"fetch()\"}),\" \\u8BF7\\u6C42\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u53D6\\u6D88\\u7531\\u4E8E\\u7528\\u6237\\u4EA4\\u4E92\\uFF08\\u4F8B\\u5982\\uFF0C\\u7528\\u6237\\u53D6\\u6D88\\u4E0A\\u4F20\\u4E00\\u4E2A\\u5927\\u6587\\u4EF6\\uFF09\\u800C\\u5BFC\\u81F4\\u8017\\u65F6\\u8FC7\\u957F\\u6216\\u4E0D\\u518D\\u76F8\\u5173\\u7684\\u8BF7\\u6C42\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// HTML: <button id='cancel-button'>Cancel upload</button>\nconst btn = document.createElement('button');\nbtn.id = 'cancel-button';\nbtn.innerHTML = 'Cancel upload';\ndocument.body.appendChild(btn);\n\nconst controller = new AbortController();\nconst signal = controller.signal;\n\nfetch('https://jsonplaceholder.typicode.com/todos/1', { signal })\n  .then((response) => {\n    // Handle successful response\n  })\n  .catch((error) => {\n    if (error.name === 'AbortError') {\n      console.log('Request canceled');\n    } else {\n      console.error('Network or other error:', error);\n    }\n  });\n\ndocument.getElementById('cancel-button').addEventListener('click', () => {\n  controller.abort();\n});\ndocument.getElementById('cancel-button').click(); // Simulate clicking the cancel button\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F53\\u60A8\\u5355\\u51FB\\u201C\\u53D6\\u6D88\\u4E0A\\u4F20\\u201D\\u6309\\u94AE\\u65F6\\uFF0C\\u6B63\\u5728\\u8FDB\\u884C\\u7684\\u8BF7\\u6C42\\u5C06\\u88AB\\u4E2D\\u6B62\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u7ADE\\u4E89\\u6761\\u4EF6\\u4E0B\\u4F18\\u5148\\u5904\\u7406\\u6700\\u65B0\\u8BF7\\u6C42\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u4E3A\\u76F8\\u540C\\u6570\\u636E\\u542F\\u52A8\\u591A\\u4E2A\\u8BF7\\u6C42\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"AbortController\"}),\" \\u4F18\\u5148\\u5904\\u7406\\u6700\\u65B0\\u8BF7\\u6C42\\u5E76\\u4E2D\\u6B62\\u8F83\\u65E9\\u7684\\u8BF7\\u6C42\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`let latestController = null; // Keeps track of the latest controller\n\nfunction fetchData(url) {\n  if (latestController) {\n    latestController.abort(); // Abort any previous request\n  }\n\n  const controller = new AbortController();\n  latestController = controller;\n  const signal = controller.signal;\n\n  fetch(url, { signal })\n    .then((response) => response.json())\n    .then((data) => console.log('Fetched data:', data))\n    .catch((error) => {\n      if (error.name === 'AbortError') {\n        console.log('Request canceled');\n      } else {\n        console.error('Network or other error:', error);\n      }\n    });\n}\n\nfetchData('https://jsonplaceholder.typicode.com/posts/1');\n\n// Simulate race conditions with new requests that quickly cancel the previous one\nsetTimeout(() => {\n  fetchData('https://jsonplaceholder.typicode.com/posts/2');\n}, 5);\nsetTimeout(() => {\n  fetchData('https://jsonplaceholder.typicode.com/posts/3');\n}, 5);\n// Only the last request should (posts/3) will be allowed to complete\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u672C\\u4F8B\\u4E2D\\uFF0C\\u5F53\\u591A\\u6B21\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"fetchData()\"}),\" \\u51FD\\u6570\\u89E6\\u53D1\\u591A\\u4E2A fetch \\u8BF7\\u6C42\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"AbortController\"}),\" \\u5C06\\u53D6\\u6D88\\u6240\\u6709\\u4E4B\\u524D\\u7684\\u8BF7\\u6C42\\uFF0C\\u9664\\u4E86\\u6700\\u65B0\\u7684\\u8BF7\\u6C42\\u3002\\u8FD9\\u5728\\u8BF8\\u5982\\u7C7B\\u578B\\u63D0\\u793A\\u641C\\u7D22\\u6216\\u65E0\\u9650\\u6EDA\\u52A8\\u7B49\\u573A\\u666F\\u4E2D\\u5F88\\u5E38\\u89C1\\uFF0C\\u5728\\u8FD9\\u4E9B\\u573A\\u666F\\u4E2D\\uFF0C\\u4F1A\\u9891\\u7E41\\u89E6\\u53D1\\u65B0\\u7684\\u8BF7\\u6C42\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u53D6\\u6D88\\u4E0D\\u518D\\u9700\\u8981\\u7684\\u8BF7\\u6C42\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u7528\\u6237\\u5DF2\\u4ECE\\u9875\\u9762\\u5BFC\\u822A\\u51FA\\u53BB\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u4E2D\\u6B62\\u8BF7\\u6C42\\u53EF\\u4EE5\\u9632\\u6B62\\u4E0D\\u5FC5\\u8981\\u7684\\u64CD\\u4F5C\\uFF08\\u4F8B\\u5982\\uFF0C\\u6210\\u529F\\u56DE\\u8C03\\u5904\\u7406\\uFF09\\uFF0C\\u5E76\\u901A\\u8FC7\\u964D\\u4F4E\\u5185\\u5B58\\u6CC4\\u6F0F\\u7684\\u53EF\\u80FD\\u6027\\u6765\\u91CA\\u653E\\u8D44\\u6E90\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7B14\\u8BB0\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"AbortController\"}),\" \\u4E0D\\u4EC5\\u9650\\u4E8E \",(0,e.jsx)(n.code,{children:\"fetch()\"}),\"\\uFF0C\\u5B83\\u4E5F\\u53EF\\u4EE5\\u7528\\u4E8E\\u4E2D\\u6B62\\u5176\\u4ED6\\u5F02\\u6B65\\u4EFB\\u52A1\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u4E00\\u4E2A\\u5355\\u72EC\\u7684 \",(0,e.jsx)(n.code,{children:\"AbortContoller\"}),\" \\u5B9E\\u4F8B\\u53EF\\u4EE5\\u5728\\u591A\\u4E2A\\u5F02\\u6B65\\u4EFB\\u52A1\\u4E0A\\u91CD\\u590D\\u4F7F\\u7528\\uFF0C\\u5E76\\u4E00\\u6B21\\u53D6\\u6D88\\u6240\\u6709\\u4EFB\\u52A1\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5728 \",(0,e.jsx)(n.code,{children:\"AbortController\"}),\" \\u4E0A\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"abort()\"}),\" \\u4E0D\\u4F1A\\u5411\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4EFB\\u4F55\\u901A\\u77E5\\u6216\\u4FE1\\u53F7\\u3002\\u670D\\u52A1\\u5668\\u4E0D\\u77E5\\u9053\\u53D6\\u6D88\\u64CD\\u4F5C\\uFF0C\\u5E76\\u5C06\\u7EE7\\u7EED\\u5904\\u7406\\u8BF7\\u6C42\\uFF0C\\u76F4\\u5230\\u5B83\\u5B8C\\u6210\\u6216\\u8D85\\u65F6\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/AbortController\",children:\"AbortController | MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/fetch-abort\",children:\"Fetch: Abort | Javascript.info\"})}),`\n`]})]})}function a(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(s,{...r})}):s(r)}return j(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/en-US.json
index dea7cac0b..8b17fd53f 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),y=(r,e)=>{for(var c in e)a(r,c,{get:e[c],enumerable:!0})},l=(r,e,c,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!u.call(r,o)&&o!==c&&a(r,o,{get:()=>e[o],enumerable:!(t=m(e,o))||t.enumerable});return r};var x=(r,e,c)=>(c=r!=null?s(f(r)):{},l(e||!r||!r.__esModule?a(c,\"default\",{value:r,enumerable:!0}):c,r)),b=r=>l(a({},\"__esModule\",{value:!0}),r);var d=g((S,i)=>{i.exports=_jsx_runtime});var _={};y(_,{default:()=>D,frontmatter:()=>v});var n=x(d()),v={title:\"How do you access the index of an element in an array during iteration?\"};function h(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To access the index of an element in an array during iteration, you can use methods like \",(0,n.jsx)(e.code,{children:\"forEach\"}),\", \",(0,n.jsx)(e.code,{children:\"map\"}),\", \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" with \",(0,n.jsx)(e.code,{children:\"entries\"}),\", or a traditional \",(0,n.jsx)(e.code,{children:\"for\"}),\" loop. For example, using \",(0,n.jsx)(e.code,{children:\"forEach\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = ['a', 'b', 'c'];\narray.forEach((element, index) => {\n  console.log(index, element);\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"forEach\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"forEach\"}),\" method executes a provided function once for each array element. The callback function takes three arguments: the current element, the index of the current element, and the array itself.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = ['a', 'b', 'c'];\narray.forEach((element, index) => {\n  console.log(index, element);\n});\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"map\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"map\"}),\" method creates a new array populated with the results of calling a provided function on every element in the calling array. The callback function also takes three arguments: the current element, the index of the current element, and the array itself.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = ['a', 'b', 'c'];\narray.map((element, index) => {\n  console.log(index, element);\n});\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" with \",(0,n.jsx)(e.code,{children:\"entries\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" loop can be combined with the \",(0,n.jsx)(e.code,{children:\"entries\"}),\" method to access both the index and the element.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = ['a', 'b', 'c'];\nfor (const [index, element] of array.entries()) {\n  console.log(index, element);\n}\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using a traditional \",(0,n.jsx)(e.code,{children:\"for\"}),\" loop\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"A traditional \",(0,n.jsx)(e.code,{children:\"for\"}),\" loop gives you direct access to the index.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = ['a', 'b', 'c'];\nfor (let index = 0; index < array.length; index++) {\n  console.log(index, array[index]);\n}\n`})}),`\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/Web/JavaScript/Reference/Global_Objects/Array/forEach\",children:\"MDN Web Docs: Array.prototype.forEach\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map\",children:\"MDN Web Docs: Array.prototype.map\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of\",children:\"MDN Web Docs: for...of\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries\",children:\"MDN Web Docs: Array.prototype.entries\"})}),`\n`]})]})}function j(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(h,r)})):h(r)}var D=j;return b(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),x=(r,e)=>{for(var o in e)a(r,o,{get:e[o],enumerable:!0})},l=(r,e,o,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of f(e))!g.call(r,c)&&c!==o&&a(r,c,{get:()=>e[c],enumerable:!(t=p(e,c))||t.enumerable});return r};var b=(r,e,o)=>(o=r!=null?m(u(r)):{},l(e||!r||!r.__esModule?a(o,\"default\",{value:r,enumerable:!0}):o,r)),v=r=>l(a({},\"__esModule\",{value:!0}),r);var d=y((N,i)=>{i.exports=_jsx_runtime});var D={};x(D,{default:()=>s,frontmatter:()=>j});var n=b(d()),j={title:\"How do you access the index of an element in an array during iteration?\"};function h(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To access the index of an element in an array during iteration, you can use methods like \",(0,n.jsx)(e.code,{children:\"forEach\"}),\", \",(0,n.jsx)(e.code,{children:\"map\"}),\", \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" with \",(0,n.jsx)(e.code,{children:\"entries\"}),\", or a traditional \",(0,n.jsx)(e.code,{children:\"for\"}),\" loop. For example, using \",(0,n.jsx)(e.code,{children:\"forEach\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = ['a', 'b', 'c'];\narray.forEach((element, index) => {\n  console.log(index, element);\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"forEach\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"forEach\"}),\" method executes a provided function once for each array element. The callback function takes three arguments: the current element, the index of the current element, and the array itself.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = ['a', 'b', 'c'];\narray.forEach((element, index) => {\n  console.log(index, element);\n});\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"map\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"map\"}),\" method creates a new array populated with the results of calling a provided function on every element in the calling array. The callback function also takes three arguments: the current element, the index of the current element, and the array itself.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = ['a', 'b', 'c'];\narray.map((element, index) => {\n  console.log(index, element);\n});\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" with \",(0,n.jsx)(e.code,{children:\"entries\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" loop can be combined with the \",(0,n.jsx)(e.code,{children:\"entries\"}),\" method to access both the index and the element.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = ['a', 'b', 'c'];\nfor (const [index, element] of array.entries()) {\n  console.log(index, element);\n}\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using a traditional \",(0,n.jsx)(e.code,{children:\"for\"}),\" loop\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"A traditional \",(0,n.jsx)(e.code,{children:\"for\"}),\" loop gives you direct access to the index.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = ['a', 'b', 'c'];\nfor (let index = 0; index < array.length; index++) {\n  console.log(index, array[index]);\n}\n`})}),`\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/Web/JavaScript/Reference/Global_Objects/Array/forEach\",children:\"MDN Web Docs: Array.prototype.forEach\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map\",children:\"MDN Web Docs: Array.prototype.map\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of\",children:\"MDN Web Docs: for...of\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries\",children:\"MDN Web Docs: Array.prototype.entries\"})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return v(D);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/zh-CN.json
index 91121268a..7a6ba7abe 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),b=(r,e)=>{for(var c in e)l(r,c,{get:e[c],enumerable:!0})},d=(r,e,c,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of f(e))!g.call(r,o)&&o!==c&&l(r,o,{get:()=>e[o],enumerable:!(a=p(e,o))||a.enumerable});return r};var y=(r,e,c)=>(c=r!=null?s(m(r)):{},d(e||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),u=r=>d(l({},\"__esModule\",{value:!0}),r);var t=x((S,i)=>{i.exports=_jsx_runtime});var _={};b(_,{default:()=>D,frontmatter:()=>j});var n=y(t()),j={title:\"\\u5982\\u4F55\\u5728\\u8FED\\u4EE3\\u8FC7\\u7A0B\\u4E2D\\u8BBF\\u95EE\\u6570\\u7EC4\\u4E2D\\u5143\\u7D20\\u7684\\u7D22\\u5F15\\uFF1F\"};function h(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u5728\\u8FED\\u4EE3\\u8FC7\\u7A0B\\u4E2D\\u8BBF\\u95EE\\u6570\\u7EC4\\u4E2D\\u5143\\u7D20\\u7684\\u7D22\\u5F15\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"forEach\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"map\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u4E0E \",(0,n.jsx)(e.code,{children:\"entries\"}),\" \\u6216\\u4F20\\u7EDF\\u7684 \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u7B49\\u65B9\\u6CD5\\u3002\\u4F8B\\u5982\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"forEach\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = ['a', 'b', 'c'];\narray.forEach((element, index) => {\n  console.log(index, element);\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"forEach\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"forEach\"}),\" \\u65B9\\u6CD5\\u4E3A\\u6570\\u7EC4\\u7684\\u6BCF\\u4E2A\\u5143\\u7D20\\u6267\\u884C\\u4E00\\u6B21\\u63D0\\u4F9B\\u7684\\u51FD\\u6570\\u3002\\u56DE\\u8C03\\u51FD\\u6570\\u63A5\\u53D7\\u4E09\\u4E2A\\u53C2\\u6570\\uFF1A\\u5F53\\u524D\\u5143\\u7D20\\u3001\\u5F53\\u524D\\u5143\\u7D20\\u7684\\u7D22\\u5F15\\u548C\\u6570\\u7EC4\\u672C\\u8EAB\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = ['a', 'b', 'c'];\narray.forEach((element, index) => {\n  console.log(index, element);\n});\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"map\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"map\"}),\" \\u65B9\\u6CD5\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u6570\\u7EC4\\uFF0C\\u5176\\u4E2D\\u586B\\u5145\\u4E86\\u5728\\u8C03\\u7528\\u6570\\u7EC4\\u7684\\u6BCF\\u4E2A\\u5143\\u7D20\\u4E0A\\u8C03\\u7528\\u63D0\\u4F9B\\u7684\\u51FD\\u6570\\u7684\\u7ED3\\u679C\\u3002\\u56DE\\u8C03\\u51FD\\u6570\\u4E5F\\u63A5\\u53D7\\u4E09\\u4E2A\\u53C2\\u6570\\uFF1A\\u5F53\\u524D\\u5143\\u7D20\\u3001\\u5F53\\u524D\\u5143\\u7D20\\u7684\\u7D22\\u5F15\\u548C\\u6570\\u7EC4\\u672C\\u8EAB\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = ['a', 'b', 'c'];\narray.map((element, index) => {\n  console.log(index, element);\n});\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u4E0E \",(0,n.jsx)(e.code,{children:\"entries\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u5FAA\\u73AF\\u53EF\\u4EE5\\u4E0E \",(0,n.jsx)(e.code,{children:\"entries\"}),\" \\u65B9\\u6CD5\\u7ED3\\u5408\\u4F7F\\u7528\\uFF0C\\u4EE5\\u8BBF\\u95EE\\u7D22\\u5F15\\u548C\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = ['a', 'b', 'c'];\nfor (const [index, element] of array.entries()) {\n  console.log(index, element);\n}\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528\\u4F20\\u7EDF\\u7684 \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F20\\u7EDF\\u7684 \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u4F7F\\u60A8\\u53EF\\u4EE5\\u76F4\\u63A5\\u8BBF\\u95EE\\u7D22\\u5F15\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = ['a', 'b', 'c'];\nfor (let index = 0; index < array.length; index++) {\n  console.log(index, array[index]);\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Array/forEach\",children:\"MDN Web Docs: Array.prototype.forEach\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map\",children:\"MDN Web Docs: Array.prototype.map\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of\",children:\"MDN Web Docs: for...of\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries\",children:\"MDN Web Docs: Array.prototype.entries\"})}),`\n`]})]})}function v(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(h,r)})):h(r)}var D=v;return u(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var y=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),u=(r,e)=>{for(var c in e)l(r,c,{get:e[c],enumerable:!0})},d=(r,e,c,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!x.call(r,o)&&o!==c&&l(r,o,{get:()=>e[o],enumerable:!(a=f(e,o))||a.enumerable});return r};var b=(r,e,c)=>(c=r!=null?p(g(r)):{},d(e||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),j=r=>d(l({},\"__esModule\",{value:!0}),r);var t=y((N,i)=>{i.exports=_jsx_runtime});var D={};u(D,{default:()=>s,frontmatter:()=>v});var n=b(t()),v={title:\"\\u5982\\u4F55\\u5728\\u8FED\\u4EE3\\u8FC7\\u7A0B\\u4E2D\\u8BBF\\u95EE\\u6570\\u7EC4\\u4E2D\\u5143\\u7D20\\u7684\\u7D22\\u5F15\\uFF1F\"};function h(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u5728\\u8FED\\u4EE3\\u8FC7\\u7A0B\\u4E2D\\u8BBF\\u95EE\\u6570\\u7EC4\\u4E2D\\u5143\\u7D20\\u7684\\u7D22\\u5F15\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"forEach\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"map\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u4E0E \",(0,n.jsx)(e.code,{children:\"entries\"}),\" \\u6216\\u4F20\\u7EDF\\u7684 \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u7B49\\u65B9\\u6CD5\\u3002\\u4F8B\\u5982\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"forEach\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = ['a', 'b', 'c'];\narray.forEach((element, index) => {\n  console.log(index, element);\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"forEach\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"forEach\"}),\" \\u65B9\\u6CD5\\u4E3A\\u6570\\u7EC4\\u7684\\u6BCF\\u4E2A\\u5143\\u7D20\\u6267\\u884C\\u4E00\\u6B21\\u63D0\\u4F9B\\u7684\\u51FD\\u6570\\u3002\\u56DE\\u8C03\\u51FD\\u6570\\u63A5\\u53D7\\u4E09\\u4E2A\\u53C2\\u6570\\uFF1A\\u5F53\\u524D\\u5143\\u7D20\\u3001\\u5F53\\u524D\\u5143\\u7D20\\u7684\\u7D22\\u5F15\\u548C\\u6570\\u7EC4\\u672C\\u8EAB\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = ['a', 'b', 'c'];\narray.forEach((element, index) => {\n  console.log(index, element);\n});\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"map\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"map\"}),\" \\u65B9\\u6CD5\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u6570\\u7EC4\\uFF0C\\u5176\\u4E2D\\u586B\\u5145\\u4E86\\u5728\\u8C03\\u7528\\u6570\\u7EC4\\u7684\\u6BCF\\u4E2A\\u5143\\u7D20\\u4E0A\\u8C03\\u7528\\u63D0\\u4F9B\\u7684\\u51FD\\u6570\\u7684\\u7ED3\\u679C\\u3002\\u56DE\\u8C03\\u51FD\\u6570\\u4E5F\\u63A5\\u53D7\\u4E09\\u4E2A\\u53C2\\u6570\\uFF1A\\u5F53\\u524D\\u5143\\u7D20\\u3001\\u5F53\\u524D\\u5143\\u7D20\\u7684\\u7D22\\u5F15\\u548C\\u6570\\u7EC4\\u672C\\u8EAB\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = ['a', 'b', 'c'];\narray.map((element, index) => {\n  console.log(index, element);\n});\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u4E0E \",(0,n.jsx)(e.code,{children:\"entries\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u5FAA\\u73AF\\u53EF\\u4EE5\\u4E0E \",(0,n.jsx)(e.code,{children:\"entries\"}),\" \\u65B9\\u6CD5\\u7ED3\\u5408\\u4F7F\\u7528\\uFF0C\\u4EE5\\u8BBF\\u95EE\\u7D22\\u5F15\\u548C\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = ['a', 'b', 'c'];\nfor (const [index, element] of array.entries()) {\n  console.log(index, element);\n}\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528\\u4F20\\u7EDF\\u7684 \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F20\\u7EDF\\u7684 \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u4F7F\\u60A8\\u53EF\\u4EE5\\u76F4\\u63A5\\u8BBF\\u95EE\\u7D22\\u5F15\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = ['a', 'b', 'c'];\nfor (let index = 0; index < array.length; index++) {\n  console.log(index, array[index]);\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Array/forEach\",children:\"MDN Web Docs: Array.prototype.forEach\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map\",children:\"MDN Web Docs: Array.prototype.map\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of\",children:\"MDN Web Docs: for...of\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries\",children:\"MDN Web Docs: Array.prototype.entries\"})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return j(D);})();\n;return Component;"
 }
\ No newline at end of file
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 31230cb2d..dc2424e4d 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-add-remove-and-modify-html-elements-using-javascript/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var o in e)d(t,o,{get:e[o],enumerable:!0})},r=(t,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of p(e))!g.call(t,l)&&l!==o&&d(t,l,{get:()=>e[l],enumerable:!(c=h(e,l))||c.enumerable});return t};var T=(t,e,o)=>(o=t!=null?s(u(t)):{},r(e||!t||!t.__esModule?d(o,\"default\",{value:t,enumerable:!0}):o,t)),f=t=>r(d({},\"__esModule\",{value:!0}),t);var a=v((N,i)=>{i.exports=_jsx_runtime});var b={};y(b,{default:()=>E,frontmatter:()=>C});var n=T(a()),C={title:\"How do you add, remove, and modify HTML elements using JavaScript?\"};function m(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",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:[\"To add, remove, and modify HTML elements using JavaScript, you can use methods like \",(0,n.jsx)(e.code,{children:\"createElement\"}),\", \",(0,n.jsx)(e.code,{children:\"appendChild\"}),\", \",(0,n.jsx)(e.code,{children:\"removeChild\"}),\", and properties like \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" and \",(0,n.jsx)(e.code,{children:\"textContent\"}),\". For example, to add an element, you can create it using \",(0,n.jsx)(e.code,{children:\"document.createElement\"}),\" and then append it to a parent element using \",(0,n.jsx)(e.code,{children:\"appendChild\"}),\". To remove an element, you can use \",(0,n.jsx)(e.code,{children:\"removeChild\"}),\" on its parent. To modify an element, you can change its \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" or \",(0,n.jsx)(e.code,{children:\"textContent\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Adding an element\nconst newElement = document.createElement('div');\nnewElement.textContent = 'Hello, World!';\ndocument.body.appendChild(newElement);\n\n// Removing an element\nconst elementToRemove = document.getElementById('elementId');\nelementToRemove.parentNode.removeChild(elementToRemove);\n\n// Modifying an element\nconst elementToModify = document.getElementById('elementId');\nelementToModify.innerHTML = 'New Content';\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Adding, removing, and modifying HTML elements using JavaScript\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Adding elements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To add an HTML element, you can use the \",(0,n.jsx)(e.code,{children:\"document.createElement\"}),\" method to create a new element and then append it to a parent element using \",(0,n.jsx)(e.code,{children:\"appendChild\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a new div element\nconst newDiv = document.createElement('div');\n\n// Set its content\nnewDiv.textContent = 'Hello, World!';\n\n// Append the new element to the body\ndocument.body.appendChild(newDiv);\n\n// See the changed document by running the code\nconsole.log(document.body);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can also use \",(0,n.jsx)(e.code,{children:\"insertBefore\"}),\" to insert the new element before an existing child element.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const parentElement = document.getElementById('parent');\nconst newElement = document.createElement('p');\nnewElement.textContent = 'Inserted Paragraph';\nconst referenceElement = document.getElementById('reference');\nparentElement.insertBefore(newElement, referenceElement);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Removing elements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To remove an HTML element, you can use the \",(0,n.jsx)(e.code,{children:\"removeChild\"}),\" method on its parent element.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Select the element to be removed\nconst elementToRemove = document.getElementById('elementId');\n\n// Remove the element\nelementToRemove.parentNode.removeChild(elementToRemove);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Alternatively, you can use the \",(0,n.jsx)(e.code,{children:\"remove\"}),\" method directly on the element.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const elementToRemove = document.getElementById('elementId');\nelementToRemove.remove();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Modifying elements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To modify an HTML element, you can change its properties such as \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\", \",(0,n.jsx)(e.code,{children:\"textContent\"}),\", or attributes.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const elementToModify = document.createElement('div');\n\n// Change its inner HTML\nelementToModify.innerHTML = 'New Content';\n\n// Change its text content\nelementToModify.textContent = 'New Text Content';\n\n// Change an attribute\nelementToModify.setAttribute('class', 'new-class');\n\nconsole.log(elementToModify);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can also use methods like \",(0,n.jsx)(e.code,{children:\"classList.add\"}),\", \",(0,n.jsx)(e.code,{children:\"classList.remove\"}),\", and \",(0,n.jsx)(e.code,{children:\"classList.toggle\"}),\" to modify the element's classes.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const element = document.getElementById('elementId');\n\n// Add a class\nelement.classList.add('new-class');\n\n// Remove a class\nelement.classList.remove('old-class');\n\n// Toggle a class\nelement.classList.toggle('active');\n`})}),`\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/Web/API/Document/createElement\",children:\"MDN Web Docs: Document.createElement\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild\",children:\"MDN Web Docs: Node.appendChild\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild\",children:\"MDN Web Docs: Node.removeChild\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML\",children:\"MDN Web Docs: Element.innerHTML\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent\",children:\"MDN Web Docs: Element.textContent\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Element/classList\",children:\"MDN Web Docs: Element.classList\"})}),`\n`]})]})}function M(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(m,t)})):m(t)}var E=M;return f(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),T=(t,e)=>{for(var o in e)d(t,o,{get:e[o],enumerable:!0})},r=(t,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of u(e))!v.call(t,l)&&l!==o&&d(t,l,{get:()=>e[l],enumerable:!(c=p(e,l))||c.enumerable});return t};var f=(t,e,o)=>(o=t!=null?h(g(t)):{},r(e||!t||!t.__esModule?d(o,\"default\",{value:t,enumerable:!0}):o,t)),C=t=>r(d({},\"__esModule\",{value:!0}),t);var a=y((N,i)=>{i.exports=_jsx_runtime});var E={};T(E,{default:()=>s,frontmatter:()=>M});var n=f(a()),M={title:\"How do you add, remove, and modify HTML elements using JavaScript?\"};function m(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To add, remove, and modify HTML elements using JavaScript, you can use methods like \",(0,n.jsx)(e.code,{children:\"createElement\"}),\", \",(0,n.jsx)(e.code,{children:\"appendChild\"}),\", \",(0,n.jsx)(e.code,{children:\"removeChild\"}),\", and properties like \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" and \",(0,n.jsx)(e.code,{children:\"textContent\"}),\". For example, to add an element, you can create it using \",(0,n.jsx)(e.code,{children:\"document.createElement\"}),\" and then append it to a parent element using \",(0,n.jsx)(e.code,{children:\"appendChild\"}),\". To remove an element, you can use \",(0,n.jsx)(e.code,{children:\"removeChild\"}),\" on its parent. To modify an element, you can change its \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" or \",(0,n.jsx)(e.code,{children:\"textContent\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Adding an element\nconst newElement = document.createElement('div');\nnewElement.textContent = 'Hello, World!';\ndocument.body.appendChild(newElement);\n\n// Removing an element\nconst elementToRemove = document.getElementById('elementId');\nelementToRemove.parentNode.removeChild(elementToRemove);\n\n// Modifying an element\nconst elementToModify = document.getElementById('elementId');\nelementToModify.innerHTML = 'New Content';\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Adding, removing, and modifying HTML elements using JavaScript\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Adding elements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To add an HTML element, you can use the \",(0,n.jsx)(e.code,{children:\"document.createElement\"}),\" method to create a new element and then append it to a parent element using \",(0,n.jsx)(e.code,{children:\"appendChild\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a new div element\nconst newDiv = document.createElement('div');\n\n// Set its content\nnewDiv.textContent = 'Hello, World!';\n\n// Append the new element to the body\ndocument.body.appendChild(newDiv);\n\n// See the changed document by running the code\nconsole.log(document.body);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can also use \",(0,n.jsx)(e.code,{children:\"insertBefore\"}),\" to insert the new element before an existing child element.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const parentElement = document.getElementById('parent');\nconst newElement = document.createElement('p');\nnewElement.textContent = 'Inserted Paragraph';\nconst referenceElement = document.getElementById('reference');\nparentElement.insertBefore(newElement, referenceElement);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Removing elements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To remove an HTML element, you can use the \",(0,n.jsx)(e.code,{children:\"removeChild\"}),\" method on its parent element.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Select the element to be removed\nconst elementToRemove = document.getElementById('elementId');\n\n// Remove the element\nelementToRemove.parentNode.removeChild(elementToRemove);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Alternatively, you can use the \",(0,n.jsx)(e.code,{children:\"remove\"}),\" method directly on the element.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const elementToRemove = document.getElementById('elementId');\nelementToRemove.remove();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Modifying elements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To modify an HTML element, you can change its properties such as \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\", \",(0,n.jsx)(e.code,{children:\"textContent\"}),\", or attributes.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const elementToModify = document.createElement('div');\n\n// Change its inner HTML\nelementToModify.innerHTML = 'New Content';\n\n// Change its text content\nelementToModify.textContent = 'New Text Content';\n\n// Change an attribute\nelementToModify.setAttribute('class', 'new-class');\n\nconsole.log(elementToModify);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can also use methods like \",(0,n.jsx)(e.code,{children:\"classList.add\"}),\", \",(0,n.jsx)(e.code,{children:\"classList.remove\"}),\", and \",(0,n.jsx)(e.code,{children:\"classList.toggle\"}),\" to modify the element's classes.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const element = document.getElementById('elementId');\n\n// Add a class\nelement.classList.add('new-class');\n\n// Remove a class\nelement.classList.remove('old-class');\n\n// Toggle a class\nelement.classList.toggle('active');\n`})}),`\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/Web/API/Document/createElement\",children:\"MDN Web Docs: Document.createElement\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild\",children:\"MDN Web Docs: Node.appendChild\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild\",children:\"MDN Web Docs: Node.removeChild\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML\",children:\"MDN Web Docs: Element.innerHTML\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent\",children:\"MDN Web Docs: Element.textContent\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Element/classList\",children:\"MDN Web Docs: Element.classList\"})}),`\n`]})]})}function s(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(m,{...t})}):m(t)}return C(E);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-add-remove-and-modify-html-elements-using-javascript/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-add-remove-and-modify-html-elements-using-javascript/zh-CN.json
index 2ab722300..22a58008a 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-add-remove-and-modify-html-elements-using-javascript/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-add-remove-and-modify-html-elements-using-javascript/zh-CN.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-add-remove-and-modify-html-elements-using-javascript/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var o=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var u=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),C=(t,e)=>{for(var l in e)o(t,l,{get:e[l],enumerable:!0})},r=(t,e,l,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of p(e))!v.call(t,d)&&d!==l&&o(t,d,{get:()=>e[d],enumerable:!(c=s(e,d))||c.enumerable});return t};var T=(t,e,l)=>(l=t!=null?a(g(t)):{},r(e||!t||!t.__esModule?o(l,\"default\",{value:t,enumerable:!0}):l,t)),E=t=>r(o({},\"__esModule\",{value:!0}),t);var m=u((y,i)=>{i.exports=_jsx_runtime});var L={};C(L,{default:()=>f,frontmatter:()=>M});var n=T(m()),M={title:\"\\u5982\\u4F55\\u4F7F\\u7528 JavaScript \\u6DFB\\u52A0\\u3001\\u5220\\u9664\\u548C\\u4FEE\\u6539 HTML \\u5143\\u7D20\\uFF1F\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",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:[\"\\u8981\\u4F7F\\u7528 JavaScript \\u6DFB\\u52A0\\u3001\\u5220\\u9664\\u548C\\u4FEE\\u6539 HTML \\u5143\\u7D20\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"createElement\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"appendChild\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"removeChild\"}),\" \\u7B49\\u65B9\\u6CD5\\u4EE5\\u53CA \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"textContent\"}),\" \\u7B49\\u5C5E\\u6027\\u3002\\u4F8B\\u5982\\uFF0C\\u8981\\u6DFB\\u52A0\\u4E00\\u4E2A\\u5143\\u7D20\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"document.createElement\"}),\" \\u521B\\u5EFA\\u5B83\\uFF0C\\u7136\\u540E\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"appendChild\"}),\" \\u5C06\\u5176\\u9644\\u52A0\\u5230\\u7236\\u5143\\u7D20\\u3002\\u8981\\u5220\\u9664\\u4E00\\u4E2A\\u5143\\u7D20\\uFF0C\\u53EF\\u4EE5\\u5728\\u5176\\u7236\\u5143\\u7D20\\u4E0A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"removeChild\"}),\"\\u3002\\u8981\\u4FEE\\u6539\\u4E00\\u4E2A\\u5143\\u7D20\\uFF0C\\u53EF\\u4EE5\\u66F4\\u6539\\u5176 \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"textContent\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Adding an element\nconst newElement = document.createElement('div');\nnewElement.textContent = 'Hello, World!';\ndocument.body.appendChild(newElement);\n\n// Removing an element\nconst elementToRemove = document.getElementById('elementId');\nelementToRemove.parentNode.removeChild(elementToRemove);\n\n// Modifying an element\nconst elementToModify = document.getElementById('elementId');\nelementToModify.innerHTML = 'New Content';\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4F7F\\u7528 JavaScript \\u6DFB\\u52A0\\u3001\\u5220\\u9664\\u548C\\u4FEE\\u6539 HTML \\u5143\\u7D20\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6DFB\\u52A0\\u5143\\u7D20\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u6DFB\\u52A0 HTML \\u5143\\u7D20\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"document.createElement\"}),\" \\u65B9\\u6CD5\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5143\\u7D20\\uFF0C\\u7136\\u540E\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"appendChild\"}),\" \\u5C06\\u5176\\u9644\\u52A0\\u5230\\u7236\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a new div element\nconst newDiv = document.createElement('div');\n\n// Set its content\nnewDiv.textContent = 'Hello, World!';\n\n// Append the new element to the body\ndocument.body.appendChild(newDiv);\n\n// See the changed document by running the code\nconsole.log(document.body);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"insertBefore\"}),\" \\u5728\\u73B0\\u6709\\u5B50\\u5143\\u7D20\\u4E4B\\u524D\\u63D2\\u5165\\u65B0\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const parentElement = document.getElementById('parent');\nconst newElement = document.createElement('p');\nnewElement.textContent = 'Inserted Paragraph';\nconst referenceElement = document.getElementById('reference');\nparentElement.insertBefore(newElement, referenceElement);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5220\\u9664\\u5143\\u7D20\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u5220\\u9664 HTML \\u5143\\u7D20\\uFF0C\\u53EF\\u4EE5\\u5728\\u5176\\u7236\\u5143\\u7D20\\u4E0A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"removeChild\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Select the element to be removed\nconst elementToRemove = document.getElementById('elementId');\n\n// Remove the element\nelementToRemove.parentNode.removeChild(elementToRemove);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6216\\u8005\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728\\u8BE5\\u5143\\u7D20\\u4E0A\\u76F4\\u63A5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"remove\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const elementToRemove = document.getElementById('elementId');\nelementToRemove.remove();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4FEE\\u6539\\u5143\\u7D20\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u4FEE\\u6539 HTML \\u5143\\u7D20\\uFF0C\\u60A8\\u53EF\\u4EE5\\u66F4\\u6539\\u5176\\u5C5E\\u6027\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"textContent\"}),\" \\u6216\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const elementToModify = document.createElement('div');\n\n// Change its inner HTML\nelementToModify.innerHTML = 'New Content';\n\n// Change its text content\nelementToModify.textContent = 'New Text Content';\n\n// Change an attribute\nelementToModify.setAttribute('class', 'new-class');\n\nconsole.log(elementToModify);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"classList.add\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"classList.remove\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"classList.toggle\"}),\" \\u7B49\\u65B9\\u6CD5\\u6765\\u4FEE\\u6539\\u5143\\u7D20\\u7684\\u7C7B\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const element = document.getElementById('elementId');\n\n// Add a class\nelement.classList.add('new-class');\n\n// Remove a class\nelement.classList.remove('old-class');\n\n// Toggle a class\nelement.classList.toggle('active');\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElement\",children:\"MDN Web \\u6587\\u6863\\uFF1ADocument.createElement\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Node/appendChild\",children:\"MDN Web \\u6587\\u6863\\uFF1ANode.appendChild\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Node/removeChild\",children:\"MDN Web \\u6587\\u6863\\uFF1ANode.removeChild\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML\",children:\"MDN Web \\u6587\\u6863\\uFF1AElement.innerHTML\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent\",children:\"MDN Web \\u6587\\u6863\\uFF1AElement.textContent\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList\",children:\"MDN Web \\u6587\\u6863\\uFF1AElement.classList\"})}),`\n`]})]})}function N(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var f=N;return E(L);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var C=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),T=(t,e)=>{for(var l in e)o(t,l,{get:e[l],enumerable:!0})},r=(t,e,l,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of g(e))!u.call(t,d)&&d!==l&&o(t,d,{get:()=>e[d],enumerable:!(c=p(e,d))||c.enumerable});return t};var E=(t,e,l)=>(l=t!=null?s(v(t)):{},r(e||!t||!t.__esModule?o(l,\"default\",{value:t,enumerable:!0}):l,t)),M=t=>r(o({},\"__esModule\",{value:!0}),t);var m=C((y,i)=>{i.exports=_jsx_runtime});var f={};T(f,{default:()=>a,frontmatter:()=>N});var n=E(m()),N={title:\"\\u5982\\u4F55\\u4F7F\\u7528 JavaScript \\u6DFB\\u52A0\\u3001\\u5220\\u9664\\u548C\\u4FEE\\u6539 HTML \\u5143\\u7D20\\uFF1F\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u4F7F\\u7528 JavaScript \\u6DFB\\u52A0\\u3001\\u5220\\u9664\\u548C\\u4FEE\\u6539 HTML \\u5143\\u7D20\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"createElement\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"appendChild\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"removeChild\"}),\" \\u7B49\\u65B9\\u6CD5\\u4EE5\\u53CA \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"textContent\"}),\" \\u7B49\\u5C5E\\u6027\\u3002\\u4F8B\\u5982\\uFF0C\\u8981\\u6DFB\\u52A0\\u4E00\\u4E2A\\u5143\\u7D20\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"document.createElement\"}),\" \\u521B\\u5EFA\\u5B83\\uFF0C\\u7136\\u540E\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"appendChild\"}),\" \\u5C06\\u5176\\u9644\\u52A0\\u5230\\u7236\\u5143\\u7D20\\u3002\\u8981\\u5220\\u9664\\u4E00\\u4E2A\\u5143\\u7D20\\uFF0C\\u53EF\\u4EE5\\u5728\\u5176\\u7236\\u5143\\u7D20\\u4E0A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"removeChild\"}),\"\\u3002\\u8981\\u4FEE\\u6539\\u4E00\\u4E2A\\u5143\\u7D20\\uFF0C\\u53EF\\u4EE5\\u66F4\\u6539\\u5176 \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"textContent\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Adding an element\nconst newElement = document.createElement('div');\nnewElement.textContent = 'Hello, World!';\ndocument.body.appendChild(newElement);\n\n// Removing an element\nconst elementToRemove = document.getElementById('elementId');\nelementToRemove.parentNode.removeChild(elementToRemove);\n\n// Modifying an element\nconst elementToModify = document.getElementById('elementId');\nelementToModify.innerHTML = 'New Content';\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4F7F\\u7528 JavaScript \\u6DFB\\u52A0\\u3001\\u5220\\u9664\\u548C\\u4FEE\\u6539 HTML \\u5143\\u7D20\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6DFB\\u52A0\\u5143\\u7D20\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u6DFB\\u52A0 HTML \\u5143\\u7D20\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"document.createElement\"}),\" \\u65B9\\u6CD5\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5143\\u7D20\\uFF0C\\u7136\\u540E\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"appendChild\"}),\" \\u5C06\\u5176\\u9644\\u52A0\\u5230\\u7236\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a new div element\nconst newDiv = document.createElement('div');\n\n// Set its content\nnewDiv.textContent = 'Hello, World!';\n\n// Append the new element to the body\ndocument.body.appendChild(newDiv);\n\n// See the changed document by running the code\nconsole.log(document.body);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"insertBefore\"}),\" \\u5728\\u73B0\\u6709\\u5B50\\u5143\\u7D20\\u4E4B\\u524D\\u63D2\\u5165\\u65B0\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const parentElement = document.getElementById('parent');\nconst newElement = document.createElement('p');\nnewElement.textContent = 'Inserted Paragraph';\nconst referenceElement = document.getElementById('reference');\nparentElement.insertBefore(newElement, referenceElement);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5220\\u9664\\u5143\\u7D20\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u5220\\u9664 HTML \\u5143\\u7D20\\uFF0C\\u53EF\\u4EE5\\u5728\\u5176\\u7236\\u5143\\u7D20\\u4E0A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"removeChild\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Select the element to be removed\nconst elementToRemove = document.getElementById('elementId');\n\n// Remove the element\nelementToRemove.parentNode.removeChild(elementToRemove);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6216\\u8005\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728\\u8BE5\\u5143\\u7D20\\u4E0A\\u76F4\\u63A5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"remove\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const elementToRemove = document.getElementById('elementId');\nelementToRemove.remove();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4FEE\\u6539\\u5143\\u7D20\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u4FEE\\u6539 HTML \\u5143\\u7D20\\uFF0C\\u60A8\\u53EF\\u4EE5\\u66F4\\u6539\\u5176\\u5C5E\\u6027\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"textContent\"}),\" \\u6216\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const elementToModify = document.createElement('div');\n\n// Change its inner HTML\nelementToModify.innerHTML = 'New Content';\n\n// Change its text content\nelementToModify.textContent = 'New Text Content';\n\n// Change an attribute\nelementToModify.setAttribute('class', 'new-class');\n\nconsole.log(elementToModify);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"classList.add\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"classList.remove\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"classList.toggle\"}),\" \\u7B49\\u65B9\\u6CD5\\u6765\\u4FEE\\u6539\\u5143\\u7D20\\u7684\\u7C7B\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const element = document.getElementById('elementId');\n\n// Add a class\nelement.classList.add('new-class');\n\n// Remove a class\nelement.classList.remove('old-class');\n\n// Toggle a class\nelement.classList.toggle('active');\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElement\",children:\"MDN Web \\u6587\\u6863\\uFF1ADocument.createElement\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Node/appendChild\",children:\"MDN Web \\u6587\\u6863\\uFF1ANode.appendChild\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Node/removeChild\",children:\"MDN Web \\u6587\\u6863\\uFF1ANode.removeChild\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML\",children:\"MDN Web \\u6587\\u6863\\uFF1AElement.innerHTML\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent\",children:\"MDN Web \\u6587\\u6863\\uFF1AElement.textContent\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList\",children:\"MDN Web \\u6587\\u6863\\uFF1AElement.classList\"})}),`\n`]})]})}function a(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return M(f);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-add-remove-and-update-elements-in-an-array/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-add-remove-and-update-elements-in-an-array/en-US.json
index 23e42c340..f402b8fb2 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-add-remove-and-update-elements-in-an-array/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-add-remove-and-update-elements-in-an-array/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-add-remove-and-update-elements-in-an-array/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),y=(r,e)=>{for(var a in e)o(r,a,{get:e[a],enumerable:!0})},s=(r,e,a,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of m(e))!g.call(r,t)&&t!==a&&o(r,t,{get:()=>e[t],enumerable:!(l=p(e,t))||l.enumerable});return r};var v=(r,e,a)=>(a=r!=null?d(u(r)):{},s(e||!r||!r.__esModule?o(a,\"default\",{value:r,enumerable:!0}):a,r)),b=r=>s(o({},\"__esModule\",{value:!0}),r);var i=f((U,c)=>{c.exports=_jsx_runtime});var x={};y(x,{default:()=>T,frontmatter:()=>j});var n=v(i()),j={title:\"How do you add, remove, and update elements in an array?\"};function h(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",strong:\"strong\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To add elements to an array, you can use methods like \",(0,n.jsx)(e.code,{children:\"push\"}),\", \",(0,n.jsx)(e.code,{children:\"unshift\"}),\", or \",(0,n.jsx)(e.code,{children:\"splice\"}),\". To remove elements, you can use \",(0,n.jsx)(e.code,{children:\"pop\"}),\", \",(0,n.jsx)(e.code,{children:\"shift\"}),\", or \",(0,n.jsx)(e.code,{children:\"splice\"}),\". To update elements, you can directly access the array index and assign a new value.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\n\n// Add elements\narr.push(4); // [1, 2, 3, 4]\narr.unshift(0); // [0, 1, 2, 3, 4]\narr.splice(2, 0, 1.5); // [0, 1, 1.5, 2, 3, 4]\n\n// Remove elements\narr.pop(); // [0, 1, 1.5, 2, 3]\narr.shift(); // [1, 1.5, 2, 3]\narr.splice(1, 1); // [1, 2, 3]\n\n// Update elements\narr[1] = 5; // [1, 5, 3]\nconsole.log(arr); // Final state: [1, 5, 3]\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note\"}),\": If you try to \",(0,n.jsx)(e.code,{children:\"console.log(arr)\"}),\" after each operation in some environments (like Chrome DevTools), you may only see the final state of \",(0,n.jsx)(e.code,{children:\"arr\"}),\". This happens because the console sometimes keeps a live reference to the array instead of logging its state at the exact moment. To see intermediate states properly, store snapshots using \",(0,n.jsx)(e.code,{children:\"console.log([...arr])\"}),\" or print values immediately after each operation.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Adding elements to an array\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"push\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"push\"}),\" method adds one or more elements to the end of an array and returns the new length of the array.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\nconsole.log(arr.push(4)); // Output: 4 (new length of array)\nconsole.log(arr); // [1, 2, 3, 4]\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"unshift\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"unshift\"}),\" method adds one or more elements to the beginning of an array and returns the new length of the array.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\nconsole.log(arr.unshift(0)); // Output: 4 (new length of array)\nconsole.log(arr); // [0, 1, 2, 3]\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"splice\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"splice\"}),\" method can add elements at any position in the array. The first parameter specifies the index at which to start changing the array, the second parameter specifies the number of elements to remove, and the rest are the elements to add.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\narr.splice(1, 0, 1.5); // Removes no element, but adds 1.5\nconsole.log(arr); // [1, 1.5, 2, 3]\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Removing elements from an array\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"pop\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"pop\"}),\" method removes the last element from an array and returns that element.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\nconsole.log(arr.pop()); // Output: 3\nconsole.log(arr); // [1, 2]\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"shift\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"shift\"}),\" method removes the first element from an array and returns that element.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\nconsole.log(arr.shift()); // Output: 1\nconsole.log(arr); // [2, 3]\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"splice\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"splice\"}),\" method can also remove elements from any position in the array. The first parameter specifies the index at which to start changing the array, and the second parameter specifies the number of elements to remove.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3, 4];\nconsole.log(arr.splice(1, 2)); // Output: [2, 3]\nconsole.log(arr); // [1, 4]\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Updating elements in an array\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Direct assignment\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can update elements in an array by directly accessing the index and assigning a new value.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\narr[1] = 5;\nconsole.log(arr); // [1, 5, 3]\n`})}),`\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/Web/JavaScript/Reference/Global_Objects/Array/push\",children:\"MDN Web Docs: Array.prototype.push\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift\",children:\"MDN Web Docs: Array.prototype.unshift\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice\",children:\"MDN Web Docs: Array.prototype.splice\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop\",children:\"MDN Web Docs: Array.prototype.pop\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift\",children:\"MDN Web Docs: Array.prototype.shift\"})}),`\n`]})]})}function D(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(h,r)})):h(r)}var T=D;return b(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),v=(r,e)=>{for(var a in e)o(r,a,{get:e[a],enumerable:!0})},c=(r,e,a,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of u(e))!f.call(r,t)&&t!==a&&o(r,t,{get:()=>e[t],enumerable:!(l=m(e,t))||l.enumerable});return r};var b=(r,e,a)=>(a=r!=null?p(g(r)):{},c(e||!r||!r.__esModule?o(a,\"default\",{value:r,enumerable:!0}):a,r)),j=r=>c(o({},\"__esModule\",{value:!0}),r);var i=y((N,s)=>{s.exports=_jsx_runtime});var T={};v(T,{default:()=>d,frontmatter:()=>D});var n=b(i()),D={title:\"How do you add, remove, and update elements in an array?\"};function h(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To add elements to an array, you can use methods like \",(0,n.jsx)(e.code,{children:\"push\"}),\", \",(0,n.jsx)(e.code,{children:\"unshift\"}),\", or \",(0,n.jsx)(e.code,{children:\"splice\"}),\". To remove elements, you can use \",(0,n.jsx)(e.code,{children:\"pop\"}),\", \",(0,n.jsx)(e.code,{children:\"shift\"}),\", or \",(0,n.jsx)(e.code,{children:\"splice\"}),\". To update elements, you can directly access the array index and assign a new value.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\n\n// Add elements\narr.push(4); // [1, 2, 3, 4]\narr.unshift(0); // [0, 1, 2, 3, 4]\narr.splice(2, 0, 1.5); // [0, 1, 1.5, 2, 3, 4]\n\n// Remove elements\narr.pop(); // [0, 1, 1.5, 2, 3]\narr.shift(); // [1, 1.5, 2, 3]\narr.splice(1, 1); // [1, 2, 3]\n\n// Update elements\narr[1] = 5; // [1, 5, 3]\nconsole.log(arr); // Final state: [1, 5, 3]\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note\"}),\": If you try to \",(0,n.jsx)(e.code,{children:\"console.log(arr)\"}),\" after each operation in some environments (like Chrome DevTools), you may only see the final state of \",(0,n.jsx)(e.code,{children:\"arr\"}),\". This happens because the console sometimes keeps a live reference to the array instead of logging its state at the exact moment. To see intermediate states properly, store snapshots using \",(0,n.jsx)(e.code,{children:\"console.log([...arr])\"}),\" or print values immediately after each operation.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Adding elements to an array\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"push\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"push\"}),\" method adds one or more elements to the end of an array and returns the new length of the array.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\nconsole.log(arr.push(4)); // Output: 4 (new length of array)\nconsole.log(arr); // [1, 2, 3, 4]\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"unshift\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"unshift\"}),\" method adds one or more elements to the beginning of an array and returns the new length of the array.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\nconsole.log(arr.unshift(0)); // Output: 4 (new length of array)\nconsole.log(arr); // [0, 1, 2, 3]\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"splice\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"splice\"}),\" method can add elements at any position in the array. The first parameter specifies the index at which to start changing the array, the second parameter specifies the number of elements to remove, and the rest are the elements to add.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\narr.splice(1, 0, 1.5); // Removes no element, but adds 1.5\nconsole.log(arr); // [1, 1.5, 2, 3]\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Removing elements from an array\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"pop\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"pop\"}),\" method removes the last element from an array and returns that element.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\nconsole.log(arr.pop()); // Output: 3\nconsole.log(arr); // [1, 2]\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"shift\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"shift\"}),\" method removes the first element from an array and returns that element.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\nconsole.log(arr.shift()); // Output: 1\nconsole.log(arr); // [2, 3]\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"splice\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"splice\"}),\" method can also remove elements from any position in the array. The first parameter specifies the index at which to start changing the array, and the second parameter specifies the number of elements to remove.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3, 4];\nconsole.log(arr.splice(1, 2)); // Output: [2, 3]\nconsole.log(arr); // [1, 4]\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Updating elements in an array\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Direct assignment\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can update elements in an array by directly accessing the index and assigning a new value.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\narr[1] = 5;\nconsole.log(arr); // [1, 5, 3]\n`})}),`\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/Web/JavaScript/Reference/Global_Objects/Array/push\",children:\"MDN Web Docs: Array.prototype.push\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift\",children:\"MDN Web Docs: Array.prototype.unshift\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice\",children:\"MDN Web Docs: Array.prototype.splice\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop\",children:\"MDN Web Docs: Array.prototype.pop\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift\",children:\"MDN Web Docs: Array.prototype.shift\"})}),`\n`]})]})}function d(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return j(T);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-add-remove-and-update-elements-in-an-array/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-add-remove-and-update-elements-in-an-array/zh-CN.json
index 5fd2d62fb..9d2b1aff1 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-add-remove-and-update-elements-in-an-array/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-add-remove-and-update-elements-in-an-array/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-add-remove-and-update-elements-in-an-array/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var t=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var l in e)o(n,l,{get:e[l],enumerable:!0})},h=(n,e,l,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of u(e))!f.call(n,c)&&c!==l&&o(n,c,{get:()=>e[c],enumerable:!(i=p(e,c))||i.enumerable});return n};var v=(n,e,l)=>(l=n!=null?t(g(n)):{},h(e||!n||!n.__esModule?o(l,\"default\",{value:n,enumerable:!0}):l,n)),j=n=>h(o({},\"__esModule\",{value:!0}),n);var d=m((A,a)=>{a.exports=_jsx_runtime});var O={};b(O,{default:()=>N,frontmatter:()=>y});var r=v(d()),y={title:\"\\u5982\\u4F55\\u6DFB\\u52A0\\u3001\\u5220\\u9664\\u548C\\u66F4\\u65B0\\u6570\\u7EC4\\u4E2D\\u7684\\u5143\\u7D20\\uFF1F\"};function s(n){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",strong:\"strong\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u8981\\u5411\\u6570\\u7EC4\\u6DFB\\u52A0\\u5143\\u7D20\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"push\"}),\"\\u3001\",(0,r.jsx)(e.code,{children:\"unshift\"}),\" \\u6216 \",(0,r.jsx)(e.code,{children:\"splice\"}),\" \\u7B49\\u65B9\\u6CD5\\u3002\\u8981\\u5220\\u9664\\u5143\\u7D20\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"pop\"}),\"\\u3001\",(0,r.jsx)(e.code,{children:\"shift\"}),\" \\u6216 \",(0,r.jsx)(e.code,{children:\"splice\"}),\"\\u3002\\u8981\\u66F4\\u65B0\\u5143\\u7D20\\uFF0C\\u53EF\\u4EE5\\u76F4\\u63A5\\u8BBF\\u95EE\\u6570\\u7EC4\\u7D22\\u5F15\\u5E76\\u5206\\u914D\\u4E00\\u4E2A\\u65B0\\u503C\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\n\n// Add elements\narr.push(4); // [1, 2, 3, 4]\narr.unshift(0); // [0, 1, 2, 3, 4]\narr.splice(2, 0, 1.5); // [0, 1, 1.5, 2, 3, 4]\n\n// Remove elements\narr.pop(); // [0, 1, 1.5, 2, 3]\narr.shift(); // [1, 1.5, 2, 3]\narr.splice(1, 1); // [1, 2, 3]\n\n// Update elements\narr[1] = 5; // [1, 5, 3]\nconsole.log(arr); // Final state: [1, 5, 3]\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.strong,{children:\"\\u6CE8\\u610F\"}),\"\\uFF1A\\u5982\\u679C\\u5728\\u67D0\\u4E9B\\u73AF\\u5883\\uFF08\\u5982 Chrome DevTools\\uFF09\\u4E2D\\u5C1D\\u8BD5\\u5728\\u6BCF\\u6B21\\u64CD\\u4F5C\\u540E\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"console.log(arr)\"}),\"\\uFF0C\\u60A8\\u53EF\\u80FD\\u53EA\\u80FD\\u770B\\u5230 \",(0,r.jsx)(e.code,{children:\"arr\"}),\" \\u7684\\u6700\\u7EC8\\u72B6\\u6001\\u3002\\u8FD9\\u662F\\u56E0\\u4E3A\\u63A7\\u5236\\u53F0\\u6709\\u65F6\\u4F1A\\u4FDD\\u7559\\u5BF9\\u6570\\u7EC4\\u7684\\u5B9E\\u65F6\\u5F15\\u7528\\uFF0C\\u800C\\u4E0D\\u662F\\u8BB0\\u5F55\\u5176\\u786E\\u5207\\u65F6\\u523B\\u7684\\u72B6\\u6001\\u3002\\u8981\\u6B63\\u786E\\u67E5\\u770B\\u4E2D\\u95F4\\u72B6\\u6001\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"console.log([...arr])\"}),\" \\u5B58\\u50A8\\u5FEB\\u7167\\uFF0C\\u6216\\u5728\\u6BCF\\u6B21\\u64CD\\u4F5C\\u540E\\u7ACB\\u5373\\u6253\\u5370\\u503C\\u3002\"]}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u5411\\u6570\\u7EC4\\u6DFB\\u52A0\\u5143\\u7D20\"}),`\n`,(0,r.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"push\"})]}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"push\"}),\" \\u65B9\\u6CD5\\u5C06\\u4E00\\u4E2A\\u6216\\u591A\\u4E2A\\u5143\\u7D20\\u6DFB\\u52A0\\u5230\\u6570\\u7EC4\\u7684\\u672B\\u5C3E\\uFF0C\\u5E76\\u8FD4\\u56DE\\u6570\\u7EC4\\u7684\\u65B0\\u957F\\u5EA6\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\nconsole.log(arr.push(4)); // Output: 4 (new length of array)\nconsole.log(arr); // [1, 2, 3, 4]\n`})}),`\n`,(0,r.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"unshift\"})]}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"unshift\"}),\" \\u65B9\\u6CD5\\u5C06\\u4E00\\u4E2A\\u6216\\u591A\\u4E2A\\u5143\\u7D20\\u6DFB\\u52A0\\u5230\\u6570\\u7EC4\\u7684\\u5F00\\u5934\\uFF0C\\u5E76\\u8FD4\\u56DE\\u6570\\u7EC4\\u7684\\u65B0\\u957F\\u5EA6\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\nconsole.log(arr.unshift(0)); // Output: 4 (new length of array)\nconsole.log(arr); // [0, 1, 2, 3]\n`})}),`\n`,(0,r.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"splice\"})]}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"splice\"}),\" \\u65B9\\u6CD5\\u53EF\\u4EE5\\u5728\\u6570\\u7EC4\\u4E2D\\u7684\\u4EFB\\u4F55\\u4F4D\\u7F6E\\u6DFB\\u52A0\\u5143\\u7D20\\u3002\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u6307\\u5B9A\\u5F00\\u59CB\\u66F4\\u6539\\u6570\\u7EC4\\u7684\\u7D22\\u5F15\\uFF0C\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u6307\\u5B9A\\u8981\\u5220\\u9664\\u7684\\u5143\\u7D20\\u6570\\u91CF\\uFF0C\\u5176\\u4F59\\u7684\\u662F\\u8981\\u6DFB\\u52A0\\u7684\\u5143\\u7D20\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\narr.splice(1, 0, 1.5); // Removes no element, but adds 1.5\nconsole.log(arr); // [1, 1.5, 2, 3]\n`})}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u4ECE\\u6570\\u7EC4\\u4E2D\\u5220\\u9664\\u5143\\u7D20\"}),`\n`,(0,r.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"pop\"})]}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"pop\"}),\" \\u65B9\\u6CD5\\u4ECE\\u6570\\u7EC4\\u4E2D\\u5220\\u9664\\u6700\\u540E\\u4E00\\u4E2A\\u5143\\u7D20\\u5E76\\u8FD4\\u56DE\\u8BE5\\u5143\\u7D20\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\nconsole.log(arr.pop()); // Output: 3\nconsole.log(arr); // [1, 2]\n`})}),`\n`,(0,r.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"shift\"})]}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"shift\"}),\" \\u65B9\\u6CD5\\u4ECE\\u6570\\u7EC4\\u4E2D\\u5220\\u9664\\u7B2C\\u4E00\\u4E2A\\u5143\\u7D20\\uFF0C\\u5E76\\u8FD4\\u56DE\\u8BE5\\u5143\\u7D20\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\nconsole.log(arr.shift()); // Output: 1\nconsole.log(arr); // [2, 3]\n`})}),`\n`,(0,r.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"splice\"})]}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"splice\"}),\" \\u65B9\\u6CD5\\u4E5F\\u53EF\\u4EE5\\u4ECE\\u6570\\u7EC4\\u4E2D\\u7684\\u4EFB\\u4F55\\u4F4D\\u7F6E\\u5220\\u9664\\u5143\\u7D20\\u3002\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u6307\\u5B9A\\u5F00\\u59CB\\u66F4\\u6539\\u6570\\u7EC4\\u7684\\u7D22\\u5F15\\uFF0C\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u6307\\u5B9A\\u8981\\u5220\\u9664\\u7684\\u5143\\u7D20\\u6570\\u91CF\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3, 4];\nconsole.log(arr.splice(1, 2)); // Output: [2, 3]\nconsole.log(arr); // [1, 4]\n`})}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u66F4\\u65B0\\u6570\\u7EC4\\u4E2D\\u7684\\u5143\\u7D20\"}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u76F4\\u63A5\\u8D4B\\u503C\"}),`\n`,(0,r.jsx)(e.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u901A\\u8FC7\\u76F4\\u63A5\\u8BBF\\u95EE\\u7D22\\u5F15\\u5E76\\u5206\\u914D\\u65B0\\u503C\\u6765\\u66F4\\u65B0\\u6570\\u7EC4\\u4E2D\\u7684\\u5143\\u7D20\\u3002\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\narr[1] = 5;\nconsole.log(arr); // [1, 5, 3]\n`})}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push\",children:\"MDN Web Docs: Array.prototype.push\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift\",children:\"MDN Web Docs: Array.prototype.unshift\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice\",children:\"MDN Web Docs: Array.prototype.splice\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop\",children:\"MDN Web Docs: Array.prototype.pop\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift\",children:\"MDN Web Docs: Array.prototype.shift\"})}),`\n`]})]})}function D(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,Object.assign({},n,{children:(0,r.jsx)(s,n)})):s(n)}var N=D;return j(O);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var b=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var l in e)o(n,l,{get:e[l],enumerable:!0})},h=(n,e,l,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of g(e))!m.call(n,c)&&c!==l&&o(n,c,{get:()=>e[c],enumerable:!(i=u(e,c))||i.enumerable});return n};var j=(n,e,l)=>(l=n!=null?p(f(n)):{},h(e||!n||!n.__esModule?o(l,\"default\",{value:n,enumerable:!0}):l,n)),y=n=>h(o({},\"__esModule\",{value:!0}),n);var d=b((A,a)=>{a.exports=_jsx_runtime});var N={};v(N,{default:()=>t,frontmatter:()=>D});var r=j(d()),D={title:\"\\u5982\\u4F55\\u6DFB\\u52A0\\u3001\\u5220\\u9664\\u548C\\u66F4\\u65B0\\u6570\\u7EC4\\u4E2D\\u7684\\u5143\\u7D20\\uFF1F\"};function s(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u8981\\u5411\\u6570\\u7EC4\\u6DFB\\u52A0\\u5143\\u7D20\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"push\"}),\"\\u3001\",(0,r.jsx)(e.code,{children:\"unshift\"}),\" \\u6216 \",(0,r.jsx)(e.code,{children:\"splice\"}),\" \\u7B49\\u65B9\\u6CD5\\u3002\\u8981\\u5220\\u9664\\u5143\\u7D20\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"pop\"}),\"\\u3001\",(0,r.jsx)(e.code,{children:\"shift\"}),\" \\u6216 \",(0,r.jsx)(e.code,{children:\"splice\"}),\"\\u3002\\u8981\\u66F4\\u65B0\\u5143\\u7D20\\uFF0C\\u53EF\\u4EE5\\u76F4\\u63A5\\u8BBF\\u95EE\\u6570\\u7EC4\\u7D22\\u5F15\\u5E76\\u5206\\u914D\\u4E00\\u4E2A\\u65B0\\u503C\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\n\n// Add elements\narr.push(4); // [1, 2, 3, 4]\narr.unshift(0); // [0, 1, 2, 3, 4]\narr.splice(2, 0, 1.5); // [0, 1, 1.5, 2, 3, 4]\n\n// Remove elements\narr.pop(); // [0, 1, 1.5, 2, 3]\narr.shift(); // [1, 1.5, 2, 3]\narr.splice(1, 1); // [1, 2, 3]\n\n// Update elements\narr[1] = 5; // [1, 5, 3]\nconsole.log(arr); // Final state: [1, 5, 3]\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.strong,{children:\"\\u6CE8\\u610F\"}),\"\\uFF1A\\u5982\\u679C\\u5728\\u67D0\\u4E9B\\u73AF\\u5883\\uFF08\\u5982 Chrome DevTools\\uFF09\\u4E2D\\u5C1D\\u8BD5\\u5728\\u6BCF\\u6B21\\u64CD\\u4F5C\\u540E\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"console.log(arr)\"}),\"\\uFF0C\\u60A8\\u53EF\\u80FD\\u53EA\\u80FD\\u770B\\u5230 \",(0,r.jsx)(e.code,{children:\"arr\"}),\" \\u7684\\u6700\\u7EC8\\u72B6\\u6001\\u3002\\u8FD9\\u662F\\u56E0\\u4E3A\\u63A7\\u5236\\u53F0\\u6709\\u65F6\\u4F1A\\u4FDD\\u7559\\u5BF9\\u6570\\u7EC4\\u7684\\u5B9E\\u65F6\\u5F15\\u7528\\uFF0C\\u800C\\u4E0D\\u662F\\u8BB0\\u5F55\\u5176\\u786E\\u5207\\u65F6\\u523B\\u7684\\u72B6\\u6001\\u3002\\u8981\\u6B63\\u786E\\u67E5\\u770B\\u4E2D\\u95F4\\u72B6\\u6001\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"console.log([...arr])\"}),\" \\u5B58\\u50A8\\u5FEB\\u7167\\uFF0C\\u6216\\u5728\\u6BCF\\u6B21\\u64CD\\u4F5C\\u540E\\u7ACB\\u5373\\u6253\\u5370\\u503C\\u3002\"]}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u5411\\u6570\\u7EC4\\u6DFB\\u52A0\\u5143\\u7D20\"}),`\n`,(0,r.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"push\"})]}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"push\"}),\" \\u65B9\\u6CD5\\u5C06\\u4E00\\u4E2A\\u6216\\u591A\\u4E2A\\u5143\\u7D20\\u6DFB\\u52A0\\u5230\\u6570\\u7EC4\\u7684\\u672B\\u5C3E\\uFF0C\\u5E76\\u8FD4\\u56DE\\u6570\\u7EC4\\u7684\\u65B0\\u957F\\u5EA6\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\nconsole.log(arr.push(4)); // Output: 4 (new length of array)\nconsole.log(arr); // [1, 2, 3, 4]\n`})}),`\n`,(0,r.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"unshift\"})]}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"unshift\"}),\" \\u65B9\\u6CD5\\u5C06\\u4E00\\u4E2A\\u6216\\u591A\\u4E2A\\u5143\\u7D20\\u6DFB\\u52A0\\u5230\\u6570\\u7EC4\\u7684\\u5F00\\u5934\\uFF0C\\u5E76\\u8FD4\\u56DE\\u6570\\u7EC4\\u7684\\u65B0\\u957F\\u5EA6\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\nconsole.log(arr.unshift(0)); // Output: 4 (new length of array)\nconsole.log(arr); // [0, 1, 2, 3]\n`})}),`\n`,(0,r.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"splice\"})]}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"splice\"}),\" \\u65B9\\u6CD5\\u53EF\\u4EE5\\u5728\\u6570\\u7EC4\\u4E2D\\u7684\\u4EFB\\u4F55\\u4F4D\\u7F6E\\u6DFB\\u52A0\\u5143\\u7D20\\u3002\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u6307\\u5B9A\\u5F00\\u59CB\\u66F4\\u6539\\u6570\\u7EC4\\u7684\\u7D22\\u5F15\\uFF0C\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u6307\\u5B9A\\u8981\\u5220\\u9664\\u7684\\u5143\\u7D20\\u6570\\u91CF\\uFF0C\\u5176\\u4F59\\u7684\\u662F\\u8981\\u6DFB\\u52A0\\u7684\\u5143\\u7D20\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\narr.splice(1, 0, 1.5); // Removes no element, but adds 1.5\nconsole.log(arr); // [1, 1.5, 2, 3]\n`})}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u4ECE\\u6570\\u7EC4\\u4E2D\\u5220\\u9664\\u5143\\u7D20\"}),`\n`,(0,r.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"pop\"})]}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"pop\"}),\" \\u65B9\\u6CD5\\u4ECE\\u6570\\u7EC4\\u4E2D\\u5220\\u9664\\u6700\\u540E\\u4E00\\u4E2A\\u5143\\u7D20\\u5E76\\u8FD4\\u56DE\\u8BE5\\u5143\\u7D20\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\nconsole.log(arr.pop()); // Output: 3\nconsole.log(arr); // [1, 2]\n`})}),`\n`,(0,r.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"shift\"})]}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"shift\"}),\" \\u65B9\\u6CD5\\u4ECE\\u6570\\u7EC4\\u4E2D\\u5220\\u9664\\u7B2C\\u4E00\\u4E2A\\u5143\\u7D20\\uFF0C\\u5E76\\u8FD4\\u56DE\\u8BE5\\u5143\\u7D20\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\nconsole.log(arr.shift()); // Output: 1\nconsole.log(arr); // [2, 3]\n`})}),`\n`,(0,r.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"splice\"})]}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"splice\"}),\" \\u65B9\\u6CD5\\u4E5F\\u53EF\\u4EE5\\u4ECE\\u6570\\u7EC4\\u4E2D\\u7684\\u4EFB\\u4F55\\u4F4D\\u7F6E\\u5220\\u9664\\u5143\\u7D20\\u3002\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u6307\\u5B9A\\u5F00\\u59CB\\u66F4\\u6539\\u6570\\u7EC4\\u7684\\u7D22\\u5F15\\uFF0C\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u6307\\u5B9A\\u8981\\u5220\\u9664\\u7684\\u5143\\u7D20\\u6570\\u91CF\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3, 4];\nconsole.log(arr.splice(1, 2)); // Output: [2, 3]\nconsole.log(arr); // [1, 4]\n`})}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u66F4\\u65B0\\u6570\\u7EC4\\u4E2D\\u7684\\u5143\\u7D20\"}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u76F4\\u63A5\\u8D4B\\u503C\"}),`\n`,(0,r.jsx)(e.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u901A\\u8FC7\\u76F4\\u63A5\\u8BBF\\u95EE\\u7D22\\u5F15\\u5E76\\u5206\\u914D\\u65B0\\u503C\\u6765\\u66F4\\u65B0\\u6570\\u7EC4\\u4E2D\\u7684\\u5143\\u7D20\\u3002\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\narr[1] = 5;\nconsole.log(arr); // [1, 5, 3]\n`})}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push\",children:\"MDN Web Docs: Array.prototype.push\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift\",children:\"MDN Web Docs: Array.prototype.unshift\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice\",children:\"MDN Web Docs: Array.prototype.splice\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop\",children:\"MDN Web Docs: Array.prototype.pop\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift\",children:\"MDN Web Docs: Array.prototype.shift\"})}),`\n`]})]})}function t(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(s,{...n})}):s(n)}return y(N);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-check-if-an-object-has-a-specific-property/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-check-if-an-object-has-a-specific-property/en-US.json
index 7531c0eac..66df54369 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-check-if-an-object-has-a-specific-property/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-check-if-an-object-has-a-specific-property/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-check-if-an-object-has-a-specific-property/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var u=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var o in e)i(r,o,{get:e[o],enumerable:!0})},h=(r,e,o,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of y(e))!b.call(r,c)&&c!==o&&i(r,c,{get:()=>e[c],enumerable:!(t=p(e,c))||t.enumerable});return r};var g=(r,e,o)=>(o=r!=null?d(j(r)):{},h(e||!r||!r.__esModule?i(o,\"default\",{value:r,enumerable:!0}):o,r)),O=r=>h(i({},\"__esModule\",{value:!0}),r);var s=u((v,l)=>{l.exports=_jsx_runtime});var k={};f(k,{default:()=>P,frontmatter:()=>w});var n=g(s()),w={title:\"How do you check if an object has a specific property?\"};function a(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To check if an object has a specific property, you can use the \",(0,n.jsx)(e.code,{children:\"in\"}),\" operator or the \",(0,n.jsx)(e.code,{children:\"hasOwnProperty\"}),\" method. The \",(0,n.jsx)(e.code,{children:\"in\"}),\" operator checks for both own and inherited properties, while \",(0,n.jsx)(e.code,{children:\"hasOwnProperty\"}),\" checks only for own properties.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { key: 'value' };\n\n// Using the \\`in\\` operator\nif ('key' in obj) {\n  console.log('Property exists');\n}\n\n// Using \\`hasOwnProperty\\`\nif (obj.hasOwnProperty('key')) {\n  console.log('Property exists');\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How do you check if an object has a specific property?\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"in\"}),\" operator\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"in\"}),\" operator checks if a property exists in an object, including properties in the object's prototype chain.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { key: 'value' };\n\nif ('key' in obj) {\n  console.log('Property exists');\n}\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"hasOwnProperty\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"hasOwnProperty\"}),\" method checks if a property exists directly on the object, not in its prototype chain.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { key: 'value' };\n\nif (obj.hasOwnProperty('key')) {\n  console.log('Property exists');\n}\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Differences between \",(0,n.jsx)(e.code,{children:\"in\"}),\" and \",(0,n.jsx)(e.code,{children:\"hasOwnProperty\"})]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"in\"}),\" operator checks for both own and inherited properties.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"hasOwnProperty\"}),\" method checks only for own properties.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example with inherited properties\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const parentObj = { inheritedKey: 'inheritedValue' };\nconst childObj = Object.create(parentObj);\nchildObj.ownKey = 'ownValue';\n\nconsole.log('inheritedKey' in childObj); // true\nconsole.log(childObj.hasOwnProperty('inheritedKey')); // false\nconsole.log('ownKey' in childObj); // true\nconsole.log(childObj.hasOwnProperty('ownKey')); // true\n`})}),`\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/Web/JavaScript/Reference/Operators/in\",children:\"MDN Web Docs: in operator\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty\",children:\"MDN Web Docs: Object.prototype.hasOwnProperty\"})}),`\n`]})]})}function m(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(a,r)})):a(r)}var P=m;return O(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),w=(r,e)=>{for(var o in e)i(r,o,{get:e[o],enumerable:!0})},h=(r,e,o,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of j(e))!u.call(r,c)&&c!==o&&i(r,c,{get:()=>e[c],enumerable:!(t=y(e,c))||t.enumerable});return r};var g=(r,e,o)=>(o=r!=null?p(b(r)):{},h(e||!r||!r.__esModule?i(o,\"default\",{value:r,enumerable:!0}):o,r)),O=r=>h(i({},\"__esModule\",{value:!0}),r);var s=f((x,l)=>{l.exports=_jsx_runtime});var P={};w(P,{default:()=>a,frontmatter:()=>m});var n=g(s()),m={title:\"How do you check if an object has a specific property?\"};function d(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To check if an object has a specific property, you can use the \",(0,n.jsx)(e.code,{children:\"in\"}),\" operator or the \",(0,n.jsx)(e.code,{children:\"hasOwnProperty\"}),\" method. The \",(0,n.jsx)(e.code,{children:\"in\"}),\" operator checks for both own and inherited properties, while \",(0,n.jsx)(e.code,{children:\"hasOwnProperty\"}),\" checks only for own properties.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { key: 'value' };\n\n// Using the \\`in\\` operator\nif ('key' in obj) {\n  console.log('Property exists');\n}\n\n// Using \\`hasOwnProperty\\`\nif (obj.hasOwnProperty('key')) {\n  console.log('Property exists');\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How do you check if an object has a specific property?\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"in\"}),\" operator\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"in\"}),\" operator checks if a property exists in an object, including properties in the object's prototype chain.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { key: 'value' };\n\nif ('key' in obj) {\n  console.log('Property exists');\n}\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"hasOwnProperty\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"hasOwnProperty\"}),\" method checks if a property exists directly on the object, not in its prototype chain.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { key: 'value' };\n\nif (obj.hasOwnProperty('key')) {\n  console.log('Property exists');\n}\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Differences between \",(0,n.jsx)(e.code,{children:\"in\"}),\" and \",(0,n.jsx)(e.code,{children:\"hasOwnProperty\"})]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"in\"}),\" operator checks for both own and inherited properties.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"hasOwnProperty\"}),\" method checks only for own properties.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example with inherited properties\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const parentObj = { inheritedKey: 'inheritedValue' };\nconst childObj = Object.create(parentObj);\nchildObj.ownKey = 'ownValue';\n\nconsole.log('inheritedKey' in childObj); // true\nconsole.log(childObj.hasOwnProperty('inheritedKey')); // false\nconsole.log('ownKey' in childObj); // true\nconsole.log(childObj.hasOwnProperty('ownKey')); // true\n`})}),`\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/Web/JavaScript/Reference/Operators/in\",children:\"MDN Web Docs: in operator\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty\",children:\"MDN Web Docs: Object.prototype.hasOwnProperty\"})}),`\n`]})]})}function a(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(d,{...r})}):d(r)}return O(P);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-check-if-an-object-has-a-specific-property/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-check-if-an-object-has-a-specific-property/zh-CN.json
index 796f79dcd..84cccd719 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-check-if-an-object-has-a-specific-property/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-check-if-an-object-has-a-specific-property/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-check-if-an-object-has-a-specific-property/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var u=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),b=(r,e)=>{for(var o in e)l(r,o,{get:e[o],enumerable:!0})},t=(r,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of y(e))!O.call(r,c)&&c!==o&&l(r,c,{get:()=>e[c],enumerable:!(i=p(e,c))||i.enumerable});return r};var g=(r,e,o)=>(o=r!=null?a(j(r)):{},t(e||!r||!r.__esModule?l(o,\"default\",{value:r,enumerable:!0}):o,r)),w=r=>t(l({},\"__esModule\",{value:!0}),r);var d=u((_,h)=>{h.exports=_jsx_runtime});var x={};b(x,{default:()=>f,frontmatter:()=>P});var n=g(d()),P={title:\"\\u5982\\u4F55\\u68C0\\u67E5\\u5BF9\\u8C61\\u662F\\u5426\\u5177\\u6709\\u7279\\u5B9A\\u5C5E\\u6027\\uFF1F\"};function s(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u68C0\\u67E5\\u5BF9\\u8C61\\u662F\\u5426\\u5177\\u6709\\u7279\\u5B9A\\u5C5E\\u6027\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"in\"}),\" \\u8FD0\\u7B97\\u7B26\\u6216 \",(0,n.jsx)(e.code,{children:\"hasOwnProperty\"}),\" \\u65B9\\u6CD5\\u3002\",(0,n.jsx)(e.code,{children:\"in\"}),\" \\u8FD0\\u7B97\\u7B26\\u68C0\\u67E5\\u81EA\\u6709\\u5C5E\\u6027\\u548C\\u7EE7\\u627F\\u5C5E\\u6027\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"hasOwnProperty\"}),\" \\u4EC5\\u68C0\\u67E5\\u81EA\\u6709\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { key: 'value' };\n\n// \\u4F7F\\u7528 \\`in\\` \\u8FD0\\u7B97\\u7B26\nif ('key' in obj) {\n  console.log('Property exists');\n}\n\n// \\u4F7F\\u7528 \\`hasOwnProperty\\`\nif (obj.hasOwnProperty('key')) {\n  console.log('Property exists');\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u68C0\\u67E5\\u5BF9\\u8C61\\u662F\\u5426\\u5177\\u6709\\u7279\\u5B9A\\u5C5E\\u6027\\uFF1F\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"in\"}),\" \\u8FD0\\u7B97\\u7B26\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"in\"}),\" \\u8FD0\\u7B97\\u7B26\\u68C0\\u67E5\\u5C5E\\u6027\\u662F\\u5426\\u5B58\\u5728\\u4E8E\\u5BF9\\u8C61\\u4E2D\\uFF0C\\u5305\\u62EC\\u5BF9\\u8C61\\u539F\\u578B\\u94FE\\u4E2D\\u7684\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { key: 'value' };\n\nif ('key' in obj) {\n  console.log('Property exists');\n}\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"hasOwnProperty\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"hasOwnProperty\"}),\" \\u65B9\\u6CD5\\u68C0\\u67E5\\u5C5E\\u6027\\u662F\\u5426\\u76F4\\u63A5\\u5B58\\u5728\\u4E8E\\u5BF9\\u8C61\\u4E0A\\uFF0C\\u800C\\u4E0D\\u662F\\u5728\\u5176\\u539F\\u578B\\u94FE\\u4E2D\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { key: 'value' };\n\nif (obj.hasOwnProperty('key')) {\n  console.log('Property exists');\n}\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"in\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"hasOwnProperty\"}),\" \\u4E4B\\u95F4\\u7684\\u533A\\u522B\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"in\"}),\" \\u8FD0\\u7B97\\u7B26\\u68C0\\u67E5\\u81EA\\u6709\\u5C5E\\u6027\\u548C\\u7EE7\\u627F\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"hasOwnProperty\"}),\" \\u65B9\\u6CD5\\u4EC5\\u68C0\\u67E5\\u81EA\\u6709\\u5C5E\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5177\\u6709\\u7EE7\\u627F\\u5C5E\\u6027\\u7684\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const parentObj = { inheritedKey: 'inheritedValue' };\nconst childObj = Object.create(parentObj);\nchildObj.ownKey = 'ownValue';\n\nconsole.log('inheritedKey' in childObj); // true\nconsole.log(childObj.hasOwnProperty('inheritedKey')); // false\nconsole.log('ownKey' in childObj); // true\nconsole.log(childObj.hasOwnProperty('ownKey')); // true\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Operators/in\",children:\"MDN Web Docs: in operator\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty\",children:\"MDN Web Docs: Object.prototype.hasOwnProperty\"})}),`\n`]})]})}function m(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(s,r)})):s(r)}var f=m;return w(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var b=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),g=(r,e)=>{for(var o in e)l(r,o,{get:e[o],enumerable:!0})},t=(r,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of j(e))!O.call(r,c)&&c!==o&&l(r,c,{get:()=>e[c],enumerable:!(i=y(e,c))||i.enumerable});return r};var w=(r,e,o)=>(o=r!=null?p(u(r)):{},t(e||!r||!r.__esModule?l(o,\"default\",{value:r,enumerable:!0}):o,r)),P=r=>t(l({},\"__esModule\",{value:!0}),r);var d=b((v,h)=>{h.exports=_jsx_runtime});var f={};g(f,{default:()=>a,frontmatter:()=>m});var n=w(d()),m={title:\"\\u5982\\u4F55\\u68C0\\u67E5\\u5BF9\\u8C61\\u662F\\u5426\\u5177\\u6709\\u7279\\u5B9A\\u5C5E\\u6027\\uFF1F\"};function s(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u68C0\\u67E5\\u5BF9\\u8C61\\u662F\\u5426\\u5177\\u6709\\u7279\\u5B9A\\u5C5E\\u6027\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"in\"}),\" \\u8FD0\\u7B97\\u7B26\\u6216 \",(0,n.jsx)(e.code,{children:\"hasOwnProperty\"}),\" \\u65B9\\u6CD5\\u3002\",(0,n.jsx)(e.code,{children:\"in\"}),\" \\u8FD0\\u7B97\\u7B26\\u68C0\\u67E5\\u81EA\\u6709\\u5C5E\\u6027\\u548C\\u7EE7\\u627F\\u5C5E\\u6027\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"hasOwnProperty\"}),\" \\u4EC5\\u68C0\\u67E5\\u81EA\\u6709\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { key: 'value' };\n\n// \\u4F7F\\u7528 \\`in\\` \\u8FD0\\u7B97\\u7B26\nif ('key' in obj) {\n  console.log('Property exists');\n}\n\n// \\u4F7F\\u7528 \\`hasOwnProperty\\`\nif (obj.hasOwnProperty('key')) {\n  console.log('Property exists');\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u68C0\\u67E5\\u5BF9\\u8C61\\u662F\\u5426\\u5177\\u6709\\u7279\\u5B9A\\u5C5E\\u6027\\uFF1F\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"in\"}),\" \\u8FD0\\u7B97\\u7B26\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"in\"}),\" \\u8FD0\\u7B97\\u7B26\\u68C0\\u67E5\\u5C5E\\u6027\\u662F\\u5426\\u5B58\\u5728\\u4E8E\\u5BF9\\u8C61\\u4E2D\\uFF0C\\u5305\\u62EC\\u5BF9\\u8C61\\u539F\\u578B\\u94FE\\u4E2D\\u7684\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { key: 'value' };\n\nif ('key' in obj) {\n  console.log('Property exists');\n}\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"hasOwnProperty\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"hasOwnProperty\"}),\" \\u65B9\\u6CD5\\u68C0\\u67E5\\u5C5E\\u6027\\u662F\\u5426\\u76F4\\u63A5\\u5B58\\u5728\\u4E8E\\u5BF9\\u8C61\\u4E0A\\uFF0C\\u800C\\u4E0D\\u662F\\u5728\\u5176\\u539F\\u578B\\u94FE\\u4E2D\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { key: 'value' };\n\nif (obj.hasOwnProperty('key')) {\n  console.log('Property exists');\n}\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"in\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"hasOwnProperty\"}),\" \\u4E4B\\u95F4\\u7684\\u533A\\u522B\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"in\"}),\" \\u8FD0\\u7B97\\u7B26\\u68C0\\u67E5\\u81EA\\u6709\\u5C5E\\u6027\\u548C\\u7EE7\\u627F\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"hasOwnProperty\"}),\" \\u65B9\\u6CD5\\u4EC5\\u68C0\\u67E5\\u81EA\\u6709\\u5C5E\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5177\\u6709\\u7EE7\\u627F\\u5C5E\\u6027\\u7684\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const parentObj = { inheritedKey: 'inheritedValue' };\nconst childObj = Object.create(parentObj);\nchildObj.ownKey = 'ownValue';\n\nconsole.log('inheritedKey' in childObj); // true\nconsole.log(childObj.hasOwnProperty('inheritedKey')); // false\nconsole.log('ownKey' in childObj); // true\nconsole.log(childObj.hasOwnProperty('ownKey')); // true\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Operators/in\",children:\"MDN Web Docs: in operator\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty\",children:\"MDN Web Docs: Object.prototype.hasOwnProperty\"})}),`\n`]})]})}function a(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(s,{...r})}):s(r)}return P(f);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-check-the-data-type-of-a-variable/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-check-the-data-type-of-a-variable/en-US.json
index f478ed5d7..a41f7bc93 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-check-the-data-type-of-a-variable/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-check-the-data-type-of-a-variable/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-check-the-data-type-of-a-variable/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var b=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),m=(r,e)=>{for(var o in e)c(r,o,{get:e[o],enumerable:!0})},i=(r,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of p(e))!y.call(r,l)&&l!==o&&c(r,l,{get:()=>e[l],enumerable:!(a=u(e,l))||a.enumerable});return r};var g=(r,e,o)=>(o=r!=null?s(f(r)):{},i(e||!r||!r.__esModule?c(o,\"default\",{value:r,enumerable:!0}):o,r)),N=r=>i(c({},\"__esModule\",{value:!0}),r);var d=b((D,t)=>{t.exports=_jsx_runtime});var S={};m(S,{default:()=>A,frontmatter:()=>v});var n=g(d()),v={title:\"How do you check the data type of a variable?\"};function h(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To check the data type of a variable in JavaScript, you can use the \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" operator. For example, \",(0,n.jsx)(e.code,{children:\"typeof variableName\"}),\" will return a string indicating the type of the variable, such as \",(0,n.jsx)(e.code,{children:'\"string\"'}),\", \",(0,n.jsx)(e.code,{children:'\"number\"'}),\", \",(0,n.jsx)(e.code,{children:'\"boolean\"'}),\", \",(0,n.jsx)(e.code,{children:'\"object\"'}),\", \",(0,n.jsx)(e.code,{children:'\"function\"'}),\", \",(0,n.jsx)(e.code,{children:'\"undefined\"'}),\", or \",(0,n.jsx)(e.code,{children:'\"symbol\"'}),\". For arrays and \",(0,n.jsx)(e.code,{children:\"null\"}),\", you can use \",(0,n.jsx)(e.code,{children:\"Array.isArray(variableName)\"}),\" and \",(0,n.jsx)(e.code,{children:\"variableName === null\"}),\", respectively.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How do you check the data type of a variable?\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" operator\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" operator is the most common way to check the data type of a variable in JavaScript. It returns a string indicating the type of the operand.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let str = 'Hello, world!';\nconsole.log(typeof str); // \"string\"\n\nlet num = 42;\nconsole.log(typeof num); // \"number\"\n\nlet bool = true;\nconsole.log(typeof bool); // \"boolean\"\n\nlet obj = { name: 'Alice' };\nconsole.log(typeof obj); // \"object\"\n\nlet func = function () {};\nconsole.log(typeof func); // \"function\"\n\nlet undef;\nconsole.log(typeof undef); // \"undefined\"\n\nlet sym = Symbol();\nconsole.log(typeof sym); // \"symbol\"\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Checking for \",(0,n.jsx)(e.code,{children:\"null\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" operator returns \",(0,n.jsx)(e.code,{children:'\"object\"'}),\" for \",(0,n.jsx)(e.code,{children:\"null\"}),\", which can be misleading. To specifically check for \",(0,n.jsx)(e.code,{children:\"null\"}),\", you should use a strict equality comparison.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let n = null;\nconsole.log(n === null); // true\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Checking for arrays\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Arrays are a special type of object in JavaScript. To check if a variable is an array, you can use the \",(0,n.jsx)(e.code,{children:\"Array.isArray\"}),\" method.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\nconsole.log(Array.isArray(arr)); // true\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Checking for \",(0,n.jsx)(e.code,{children:\"NaN\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"NaN\"}),\" (Not-a-Number) is a special numeric value in JavaScript. To check if a value is \",(0,n.jsx)(e.code,{children:\"NaN\"}),\", you can use the \",(0,n.jsx)(e.code,{children:\"Number.isNaN\"}),\" method.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let notANumber = NaN;\nconsole.log(Number.isNaN(notANumber)); // true\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Checking for \",(0,n.jsx)(e.code,{children:\"null\"}),\" and \",(0,n.jsx)(e.code,{children:\"undefined\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"To check if a variable is either \",(0,n.jsx)(e.code,{children:\"null\"}),\" or \",(0,n.jsx)(e.code,{children:\"undefined\"}),\", you can use a combination of the \",(0,n.jsx)(e.code,{children:\"==\"}),\" operator and the \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" operator.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let value = null;\nconsole.log(value == null); // true\n\nlet value2;\nconsole.log(typeof value2 === 'undefined'); // true\n`})}),`\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/Web/JavaScript/Reference/Operators/typeof\",children:\"MDN Web Docs: typeof\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray\",children:\"MDN Web Docs: Array.isArray\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN\",children:\"MDN Web Docs: Number.isNaN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null\",children:\"MDN Web Docs: null\"})}),`\n`]})]})}function j(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(h,r)})):h(r)}var A=j;return N(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),g=(r,e)=>{for(var o in e)c(r,o,{get:e[o],enumerable:!0})},i=(r,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of f(e))!b.call(r,l)&&l!==o&&c(r,l,{get:()=>e[l],enumerable:!(a=p(e,l))||a.enumerable});return r};var N=(r,e,o)=>(o=r!=null?u(y(r)):{},i(e||!r||!r.__esModule?c(o,\"default\",{value:r,enumerable:!0}):o,r)),v=r=>i(c({},\"__esModule\",{value:!0}),r);var d=m((k,t)=>{t.exports=_jsx_runtime});var A={};g(A,{default:()=>s,frontmatter:()=>j});var n=N(d()),j={title:\"How do you check the data type of a variable?\"};function h(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To check the data type of a variable in JavaScript, you can use the \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" operator. For example, \",(0,n.jsx)(e.code,{children:\"typeof variableName\"}),\" will return a string indicating the type of the variable, such as \",(0,n.jsx)(e.code,{children:'\"string\"'}),\", \",(0,n.jsx)(e.code,{children:'\"number\"'}),\", \",(0,n.jsx)(e.code,{children:'\"boolean\"'}),\", \",(0,n.jsx)(e.code,{children:'\"object\"'}),\", \",(0,n.jsx)(e.code,{children:'\"function\"'}),\", \",(0,n.jsx)(e.code,{children:'\"undefined\"'}),\", or \",(0,n.jsx)(e.code,{children:'\"symbol\"'}),\". For arrays and \",(0,n.jsx)(e.code,{children:\"null\"}),\", you can use \",(0,n.jsx)(e.code,{children:\"Array.isArray(variableName)\"}),\" and \",(0,n.jsx)(e.code,{children:\"variableName === null\"}),\", respectively.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How do you check the data type of a variable?\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" operator\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" operator is the most common way to check the data type of a variable in JavaScript. It returns a string indicating the type of the operand.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let str = 'Hello, world!';\nconsole.log(typeof str); // \"string\"\n\nlet num = 42;\nconsole.log(typeof num); // \"number\"\n\nlet bool = true;\nconsole.log(typeof bool); // \"boolean\"\n\nlet obj = { name: 'Alice' };\nconsole.log(typeof obj); // \"object\"\n\nlet func = function () {};\nconsole.log(typeof func); // \"function\"\n\nlet undef;\nconsole.log(typeof undef); // \"undefined\"\n\nlet sym = Symbol();\nconsole.log(typeof sym); // \"symbol\"\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Checking for \",(0,n.jsx)(e.code,{children:\"null\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" operator returns \",(0,n.jsx)(e.code,{children:'\"object\"'}),\" for \",(0,n.jsx)(e.code,{children:\"null\"}),\", which can be misleading. To specifically check for \",(0,n.jsx)(e.code,{children:\"null\"}),\", you should use a strict equality comparison.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let n = null;\nconsole.log(n === null); // true\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Checking for arrays\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Arrays are a special type of object in JavaScript. To check if a variable is an array, you can use the \",(0,n.jsx)(e.code,{children:\"Array.isArray\"}),\" method.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\nconsole.log(Array.isArray(arr)); // true\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Checking for \",(0,n.jsx)(e.code,{children:\"NaN\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"NaN\"}),\" (Not-a-Number) is a special numeric value in JavaScript. To check if a value is \",(0,n.jsx)(e.code,{children:\"NaN\"}),\", you can use the \",(0,n.jsx)(e.code,{children:\"Number.isNaN\"}),\" method.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let notANumber = NaN;\nconsole.log(Number.isNaN(notANumber)); // true\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Checking for \",(0,n.jsx)(e.code,{children:\"null\"}),\" and \",(0,n.jsx)(e.code,{children:\"undefined\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"To check if a variable is either \",(0,n.jsx)(e.code,{children:\"null\"}),\" or \",(0,n.jsx)(e.code,{children:\"undefined\"}),\", you can use a combination of the \",(0,n.jsx)(e.code,{children:\"==\"}),\" operator and the \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" operator.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let value = null;\nconsole.log(value == null); // true\n\nlet value2;\nconsole.log(typeof value2 === 'undefined'); // true\n`})}),`\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/Web/JavaScript/Reference/Operators/typeof\",children:\"MDN Web Docs: typeof\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray\",children:\"MDN Web Docs: Array.isArray\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN\",children:\"MDN Web Docs: Number.isNaN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null\",children:\"MDN Web Docs: null\"})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return v(A);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-check-the-data-type-of-a-variable/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-check-the-data-type-of-a-variable/zh-CN.json
index 7e42ed8e8..7a5bd58e3 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-check-the-data-type-of-a-variable/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-check-the-data-type-of-a-variable/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-check-the-data-type-of-a-variable/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var m=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),N=(l,e)=>{for(var r in e)o(l,r,{get:e[r],enumerable:!0})},i=(l,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!b.call(l,c)&&c!==r&&o(l,c,{get:()=>e[c],enumerable:!(d=u(e,c))||d.enumerable});return l};var g=(l,e,r)=>(r=l!=null?s(f(l)):{},i(e||!l||!l.__esModule?o(r,\"default\",{value:l,enumerable:!0}):r,l)),y=l=>i(o({},\"__esModule\",{value:!0}),l);var a=m((_,t)=>{t.exports=_jsx_runtime});var S={};N(S,{default:()=>A,frontmatter:()=>v});var n=g(a()),v={title:\"\\u5982\\u4F55\\u68C0\\u67E5\\u53D8\\u91CF\\u7684\\u6570\\u636E\\u7C7B\\u578B\\uFF1F\"};function h(l){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},l.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u5728 JavaScript \\u4E2D\\u68C0\\u67E5\\u53D8\\u91CF\\u7684\\u6570\\u636E\\u7C7B\\u578B\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" \\u8FD0\\u7B97\\u7B26\\u3002\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"typeof variableName\"}),\" \\u5C06\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5B57\\u7B26\\u4E32\\uFF0C\\u6307\\u793A\\u53D8\\u91CF\\u7684\\u7C7B\\u578B\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:'\"string\"'}),\"\\u3001\",(0,n.jsx)(e.code,{children:'\"number\"'}),\"\\u3001\",(0,n.jsx)(e.code,{children:'\"boolean\"'}),\"\\u3001\",(0,n.jsx)(e.code,{children:'\"object\"'}),\"\\u3001\",(0,n.jsx)(e.code,{children:'\"function\"'}),\"\\u3001\",(0,n.jsx)(e.code,{children:'\"undefined\"'}),\" \\u6216 \",(0,n.jsx)(e.code,{children:'\"symbol\"'}),\"\\u3002\\u5BF9\\u4E8E\\u6570\\u7EC4\\u548C \",(0,n.jsx)(e.code,{children:\"null\"}),\"\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5206\\u522B\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Array.isArray(variableName)\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"variableName === null\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u68C0\\u67E5\\u53D8\\u91CF\\u7684\\u6570\\u636E\\u7C7B\\u578B\\uFF1F\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" \\u8FD0\\u7B97\\u7B26\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"typeof\"}),\" \\u8FD0\\u7B97\\u7B26\\u662F\\u68C0\\u67E5 JavaScript \\u4E2D\\u53D8\\u91CF\\u6570\\u636E\\u7C7B\\u578B\\u6700\\u5E38\\u7528\\u7684\\u65B9\\u6CD5\\u3002\\u5B83\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5B57\\u7B26\\u4E32\\uFF0C\\u6307\\u793A\\u64CD\\u4F5C\\u6570\\u7684\\u7C7B\\u578B\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let str = 'Hello, world!';\nconsole.log(typeof str); // \"string\"\n\nlet num = 42;\nconsole.log(typeof num); // \"number\"\n\nlet bool = true;\nconsole.log(typeof bool); // \"boolean\"\n\nlet obj = { name: 'Alice' };\nconsole.log(typeof obj); // \"object\"\n\nlet func = function () {};\nconsole.log(typeof func); // \"function\"\n\nlet undef;\nconsole.log(typeof undef); // \"undefined\"\n\nlet sym = Symbol();\nconsole.log(typeof sym); // \"symbol\"\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u68C0\\u67E5 \",(0,n.jsx)(e.code,{children:\"null\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"typeof\"}),\" \\u8FD0\\u7B97\\u7B26\\u5BF9 \",(0,n.jsx)(e.code,{children:\"null\"}),\" \\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:'\"object\"'}),\"\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u4EA7\\u751F\\u8BEF\\u5BFC\\u3002\\u8981\\u4E13\\u95E8\\u68C0\\u67E5 \",(0,n.jsx)(e.code,{children:\"null\"}),\"\\uFF0C\\u60A8\\u5E94\\u8BE5\\u4F7F\\u7528\\u4E25\\u683C\\u7684\\u76F8\\u7B49\\u6BD4\\u8F83\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let n = null;\nconsole.log(n === null); // true\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u68C0\\u67E5\\u6570\\u7EC4\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6570\\u7EC4\\u662F JavaScript \\u4E2D\\u4E00\\u79CD\\u7279\\u6B8A\\u7C7B\\u578B\\u7684\\u5BF9\\u8C61\\u3002\\u8981\\u68C0\\u67E5\\u53D8\\u91CF\\u662F\\u5426\\u4E3A\\u6570\\u7EC4\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Array.isArray\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\nconsole.log(Array.isArray(arr)); // true\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u68C0\\u67E5 \",(0,n.jsx)(e.code,{children:\"NaN\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"NaN\"}),\" (Not-a-Number) \\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u4E2A\\u7279\\u6B8A\\u7684\\u6570\\u503C\\u3002\\u8981\\u68C0\\u67E5\\u4E00\\u4E2A\\u503C\\u662F\\u5426\\u4E3A \",(0,n.jsx)(e.code,{children:\"NaN\"}),\"\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Number.isNaN\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let notANumber = NaN;\nconsole.log(Number.isNaN(notANumber)); // true\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u68C0\\u67E5 \",(0,n.jsx)(e.code,{children:\"null\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"undefined\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u68C0\\u67E5\\u53D8\\u91CF\\u662F \",(0,n.jsx)(e.code,{children:\"null\"}),\" \\u8FD8\\u662F \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"==\"}),\" \\u8FD0\\u7B97\\u7B26\\u548C \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" \\u8FD0\\u7B97\\u7B26\\u7684\\u7EC4\\u5408\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let value = null;\nconsole.log(value == null); // true\n\nlet value2;\nconsole.log(typeof value2 === 'undefined'); // true\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Operators/typeof\",children:\"MDN Web Docs: typeof\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray\",children:\"MDN Web Docs: Array.isArray\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN\",children:\"MDN Web Docs: Number.isNaN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null\",children:\"MDN Web Docs: null\"})}),`\n`]})]})}function j(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(h,l)})):h(l)}var A=j;return y(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var N=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),y=(l,e)=>{for(var r in e)o(l,r,{get:e[r],enumerable:!0})},i=(l,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of f(e))!m.call(l,c)&&c!==r&&o(l,c,{get:()=>e[c],enumerable:!(d=p(e,c))||d.enumerable});return l};var g=(l,e,r)=>(r=l!=null?u(b(l)):{},i(e||!l||!l.__esModule?o(r,\"default\",{value:l,enumerable:!0}):r,l)),v=l=>i(o({},\"__esModule\",{value:!0}),l);var a=N((D,t)=>{t.exports=_jsx_runtime});var A={};y(A,{default:()=>s,frontmatter:()=>j});var n=g(a()),j={title:\"\\u5982\\u4F55\\u68C0\\u67E5\\u53D8\\u91CF\\u7684\\u6570\\u636E\\u7C7B\\u578B\\uFF1F\"};function h(l){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u5728 JavaScript \\u4E2D\\u68C0\\u67E5\\u53D8\\u91CF\\u7684\\u6570\\u636E\\u7C7B\\u578B\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" \\u8FD0\\u7B97\\u7B26\\u3002\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"typeof variableName\"}),\" \\u5C06\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5B57\\u7B26\\u4E32\\uFF0C\\u6307\\u793A\\u53D8\\u91CF\\u7684\\u7C7B\\u578B\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:'\"string\"'}),\"\\u3001\",(0,n.jsx)(e.code,{children:'\"number\"'}),\"\\u3001\",(0,n.jsx)(e.code,{children:'\"boolean\"'}),\"\\u3001\",(0,n.jsx)(e.code,{children:'\"object\"'}),\"\\u3001\",(0,n.jsx)(e.code,{children:'\"function\"'}),\"\\u3001\",(0,n.jsx)(e.code,{children:'\"undefined\"'}),\" \\u6216 \",(0,n.jsx)(e.code,{children:'\"symbol\"'}),\"\\u3002\\u5BF9\\u4E8E\\u6570\\u7EC4\\u548C \",(0,n.jsx)(e.code,{children:\"null\"}),\"\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5206\\u522B\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Array.isArray(variableName)\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"variableName === null\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u68C0\\u67E5\\u53D8\\u91CF\\u7684\\u6570\\u636E\\u7C7B\\u578B\\uFF1F\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" \\u8FD0\\u7B97\\u7B26\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"typeof\"}),\" \\u8FD0\\u7B97\\u7B26\\u662F\\u68C0\\u67E5 JavaScript \\u4E2D\\u53D8\\u91CF\\u6570\\u636E\\u7C7B\\u578B\\u6700\\u5E38\\u7528\\u7684\\u65B9\\u6CD5\\u3002\\u5B83\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5B57\\u7B26\\u4E32\\uFF0C\\u6307\\u793A\\u64CD\\u4F5C\\u6570\\u7684\\u7C7B\\u578B\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let str = 'Hello, world!';\nconsole.log(typeof str); // \"string\"\n\nlet num = 42;\nconsole.log(typeof num); // \"number\"\n\nlet bool = true;\nconsole.log(typeof bool); // \"boolean\"\n\nlet obj = { name: 'Alice' };\nconsole.log(typeof obj); // \"object\"\n\nlet func = function () {};\nconsole.log(typeof func); // \"function\"\n\nlet undef;\nconsole.log(typeof undef); // \"undefined\"\n\nlet sym = Symbol();\nconsole.log(typeof sym); // \"symbol\"\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u68C0\\u67E5 \",(0,n.jsx)(e.code,{children:\"null\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"typeof\"}),\" \\u8FD0\\u7B97\\u7B26\\u5BF9 \",(0,n.jsx)(e.code,{children:\"null\"}),\" \\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:'\"object\"'}),\"\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u4EA7\\u751F\\u8BEF\\u5BFC\\u3002\\u8981\\u4E13\\u95E8\\u68C0\\u67E5 \",(0,n.jsx)(e.code,{children:\"null\"}),\"\\uFF0C\\u60A8\\u5E94\\u8BE5\\u4F7F\\u7528\\u4E25\\u683C\\u7684\\u76F8\\u7B49\\u6BD4\\u8F83\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let n = null;\nconsole.log(n === null); // true\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u68C0\\u67E5\\u6570\\u7EC4\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6570\\u7EC4\\u662F JavaScript \\u4E2D\\u4E00\\u79CD\\u7279\\u6B8A\\u7C7B\\u578B\\u7684\\u5BF9\\u8C61\\u3002\\u8981\\u68C0\\u67E5\\u53D8\\u91CF\\u662F\\u5426\\u4E3A\\u6570\\u7EC4\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Array.isArray\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let arr = [1, 2, 3];\nconsole.log(Array.isArray(arr)); // true\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u68C0\\u67E5 \",(0,n.jsx)(e.code,{children:\"NaN\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"NaN\"}),\" (Not-a-Number) \\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u4E2A\\u7279\\u6B8A\\u7684\\u6570\\u503C\\u3002\\u8981\\u68C0\\u67E5\\u4E00\\u4E2A\\u503C\\u662F\\u5426\\u4E3A \",(0,n.jsx)(e.code,{children:\"NaN\"}),\"\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Number.isNaN\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let notANumber = NaN;\nconsole.log(Number.isNaN(notANumber)); // true\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u68C0\\u67E5 \",(0,n.jsx)(e.code,{children:\"null\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"undefined\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u68C0\\u67E5\\u53D8\\u91CF\\u662F \",(0,n.jsx)(e.code,{children:\"null\"}),\" \\u8FD8\\u662F \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"==\"}),\" \\u8FD0\\u7B97\\u7B26\\u548C \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" \\u8FD0\\u7B97\\u7B26\\u7684\\u7EC4\\u5408\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let value = null;\nconsole.log(value == null); // true\n\nlet value2;\nconsole.log(typeof value2 === 'undefined'); // true\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Operators/typeof\",children:\"MDN Web Docs: typeof\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray\",children:\"MDN Web Docs: Array.isArray\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN\",children:\"MDN Web Docs: Number.isNaN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null\",children:\"MDN Web Docs: null\"})}),`\n`]})]})}function s(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(h,{...l})}):h(l)}return v(A);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-convert-a-set-to-an-array-in-javascript/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-convert-a-set-to-an-array-in-javascript/en-US.json
index 99127048c..b91517b6d 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-convert-a-set-to-an-array-in-javascript/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-convert-a-set-to-an-array-in-javascript/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-convert-a-set-to-an-array-in-javascript/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),S=(n,e)=>{for(var o in e)a(n,o,{get:e[o],enumerable:!0})},i=(n,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of p(e))!u.call(n,t)&&t!==o&&a(n,t,{get:()=>e[t],enumerable:!(c=m(e,t))||c.enumerable});return n};var g=(n,e,o)=>(o=n!=null?h(y(n)):{},i(e||!n||!n.__esModule?a(o,\"default\",{value:n,enumerable:!0}):o,n)),b=n=>i(a({},\"__esModule\",{value:!0}),n);var s=f((_,l)=>{l.exports=_jsx_runtime});var x={};S(x,{default:()=>j,frontmatter:()=>v});var r=g(s()),v={title:\"How do you convert a `Set` to an array in JavaScript?\"};function d(n){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"To convert a \",(0,r.jsx)(e.code,{children:\"Set\"}),\" to an array in JavaScript, you can use the \",(0,r.jsx)(e.code,{children:\"Array.from()\"}),\" method or the spread operator. For example:\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const mySet = new Set([1, 2, 3]);\nconst myArray = Array.from(mySet);\n// OR const myArray = [...mySet];\n\nconsole.log(myArray); // Output: [1, 2, 3]\n`})}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsxs)(e.h2,{children:[\"How do you convert a \",(0,r.jsx)(e.code,{children:\"Set\"}),\" to an array in JavaScript?\"]}),`\n`,(0,r.jsxs)(e.h3,{children:[\"Using \",(0,r.jsx)(e.code,{children:\"Array.from()\"})]}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"Array.from()\"}),\" method creates a new, shallow-copied array instance from an array-like or iterable object, such as a \",(0,r.jsx)(e.code,{children:\"Set\"}),\".\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const mySet = new Set([1, 2, 3]);\nconst myArray = Array.from(mySet);\nconsole.log(myArray); // Output: [1, 2, 3]\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"Using the spread operator\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"The spread operator (\",(0,r.jsx)(e.code,{children:\"...\"}),\") can be used to expand the elements of a \",(0,r.jsx)(e.code,{children:\"Set\"}),\" into an array.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const mySet = new Set([1, 2, 3]);\nconst myArray = [...mySet];\nconsole.log(myArray); // Output: [1, 2, 3]\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"Performance considerations\"}),`\n`,(0,r.jsx)(e.p,{children:\"Both methods are efficient and commonly used. However, the spread operator is often considered more concise and readable. Performance differences are generally negligible for most use cases, but for very large sets, you might want to benchmark both methods to see which performs better in your specific scenario.\"}),`\n`,(0,r.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from\",children:\"MDN Web Docs: Array.from()\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax\",children:\"MDN Web Docs: Spread syntax\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set\",children:\"MDN Web Docs: Set\"})}),`\n`]})]})}function A(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,Object.assign({},n,{children:(0,r.jsx)(d,n)})):d(n)}var j=A;return b(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var S=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var o in e)a(n,o,{get:e[o],enumerable:!0})},l=(n,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of y(e))!f.call(n,t)&&t!==o&&a(n,t,{get:()=>e[t],enumerable:!(c=p(e,t))||c.enumerable});return n};var b=(n,e,o)=>(o=n!=null?m(u(n)):{},l(e||!n||!n.__esModule?a(o,\"default\",{value:n,enumerable:!0}):o,n)),v=n=>l(a({},\"__esModule\",{value:!0}),n);var s=S((w,i)=>{i.exports=_jsx_runtime});var x={};g(x,{default:()=>h,frontmatter:()=>A});var r=b(s()),A={title:\"How do you convert a `Set` to an array in JavaScript?\"};function d(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"To convert a \",(0,r.jsx)(e.code,{children:\"Set\"}),\" to an array in JavaScript, you can use the \",(0,r.jsx)(e.code,{children:\"Array.from()\"}),\" method or the spread operator. For example:\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const mySet = new Set([1, 2, 3]);\nconst myArray = Array.from(mySet);\n// OR const myArray = [...mySet];\n\nconsole.log(myArray); // Output: [1, 2, 3]\n`})}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsxs)(e.h2,{children:[\"How do you convert a \",(0,r.jsx)(e.code,{children:\"Set\"}),\" to an array in JavaScript?\"]}),`\n`,(0,r.jsxs)(e.h3,{children:[\"Using \",(0,r.jsx)(e.code,{children:\"Array.from()\"})]}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"Array.from()\"}),\" method creates a new, shallow-copied array instance from an array-like or iterable object, such as a \",(0,r.jsx)(e.code,{children:\"Set\"}),\".\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const mySet = new Set([1, 2, 3]);\nconst myArray = Array.from(mySet);\nconsole.log(myArray); // Output: [1, 2, 3]\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"Using the spread operator\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"The spread operator (\",(0,r.jsx)(e.code,{children:\"...\"}),\") can be used to expand the elements of a \",(0,r.jsx)(e.code,{children:\"Set\"}),\" into an array.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const mySet = new Set([1, 2, 3]);\nconst myArray = [...mySet];\nconsole.log(myArray); // Output: [1, 2, 3]\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"Performance considerations\"}),`\n`,(0,r.jsx)(e.p,{children:\"Both methods are efficient and commonly used. However, the spread operator is often considered more concise and readable. Performance differences are generally negligible for most use cases, but for very large sets, you might want to benchmark both methods to see which performs better in your specific scenario.\"}),`\n`,(0,r.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from\",children:\"MDN Web Docs: Array.from()\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax\",children:\"MDN Web Docs: Spread syntax\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set\",children:\"MDN Web Docs: Set\"})}),`\n`]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(d,{...n})}):d(n)}return v(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-convert-a-set-to-an-array-in-javascript/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-convert-a-set-to-an-array-in-javascript/zh-CN.json
index 6c1d95c0e..198fe3f37 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-convert-a-set-to-an-array-in-javascript/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-convert-a-set-to-an-array-in-javascript/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-convert-a-set-to-an-array-in-javascript/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var u=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var c in e)l(n,c,{get:e[c],enumerable:!0})},a=(n,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of p(e))!S.call(n,t)&&t!==c&&l(n,t,{get:()=>e[t],enumerable:!(o=m(e,t))||o.enumerable});return n};var g=(n,e,c)=>(c=n!=null?s(y(n)):{},a(e||!n||!n.__esModule?l(c,\"default\",{value:n,enumerable:!0}):c,n)),A=n=>a(l({},\"__esModule\",{value:!0}),n);var d=u((D,i)=>{i.exports=_jsx_runtime});var x={};f(x,{default:()=>v,frontmatter:()=>b});var r=g(d()),b={title:\"\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u5C06 `Set` \\u8F6C\\u6362\\u4E3A\\u6570\\u7EC4\\uFF1F\"};function h(n){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u8981\\u5728 JavaScript \\u4E2D\\u5C06 \",(0,r.jsx)(e.code,{children:\"Set\"}),\" \\u8F6C\\u6362\\u4E3A\\u6570\\u7EC4\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"Array.from()\"}),\" \\u65B9\\u6CD5\\u6216\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const mySet = new Set([1, 2, 3]);\nconst myArray = Array.from(mySet);\n// OR const myArray = [...mySet];\n\nconsole.log(myArray); // Output: [1, 2, 3]\n`})}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsxs)(e.h2,{children:[\"\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u5C06 \",(0,r.jsx)(e.code,{children:\"Set\"}),\" \\u8F6C\\u6362\\u4E3A\\u6570\\u7EC4\\uFF1F\"]}),`\n`,(0,r.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"Array.from()\"})]}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"Array.from()\"}),\" \\u65B9\\u6CD5\\u4ECE\\u7C7B\\u4F3C\\u6570\\u7EC4\\u6216\\u53EF\\u8FED\\u4EE3\\u5BF9\\u8C61\\uFF08\\u4F8B\\u5982 \",(0,r.jsx)(e.code,{children:\"Set\"}),\"\\uFF09\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u3001\\u6D45\\u62F7\\u8D1D\\u7684\\u6570\\u7EC4\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const mySet = new Set([1, 2, 3]);\nconst myArray = Array.from(mySet);\nconsole.log(myArray); // Output: [1, 2, 3]\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26 (\",(0,r.jsx)(e.code,{children:\"...\"}),\") \\u53EF\\u7528\\u4E8E\\u5C06 \",(0,r.jsx)(e.code,{children:\"Set\"}),\" \\u7684\\u5143\\u7D20\\u5C55\\u5F00\\u5230\\u6570\\u7EC4\\u4E2D\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const mySet = new Set([1, 2, 3]);\nconst myArray = [...mySet];\nconsole.log(myArray); // Output: [1, 2, 3]\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u6027\\u80FD\\u8003\\u91CF\"}),`\n`,(0,r.jsx)(e.p,{children:\"\\u8FD9\\u4E24\\u79CD\\u65B9\\u6CD5\\u90FD\\u9AD8\\u6548\\u4E14\\u5E38\\u7528\\u3002\\u4F46\\u662F\\uFF0C\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\\u901A\\u5E38\\u88AB\\u8BA4\\u4E3A\\u66F4\\u7B80\\u6D01\\u6613\\u8BFB\\u3002\\u5BF9\\u4E8E\\u5927\\u591A\\u6570\\u7528\\u4F8B\\uFF0C\\u6027\\u80FD\\u5DEE\\u5F02\\u901A\\u5E38\\u53EF\\u4EE5\\u5FFD\\u7565\\u4E0D\\u8BA1\\uFF0C\\u4F46\\u5BF9\\u4E8E\\u975E\\u5E38\\u5927\\u7684\\u96C6\\u5408\\uFF0C\\u60A8\\u53EF\\u80FD\\u9700\\u8981\\u5BF9\\u8FD9\\u4E24\\u79CD\\u65B9\\u6CD5\\u8FDB\\u884C\\u57FA\\u51C6\\u6D4B\\u8BD5\\uFF0C\\u4EE5\\u67E5\\u770B\\u54EA\\u79CD\\u65B9\\u6CD5\\u5728\\u60A8\\u7684\\u7279\\u5B9A\\u573A\\u666F\\u4E2D\\u8868\\u73B0\\u66F4\\u597D\\u3002\"}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from\",children:\"MDN Web Docs: Array.from()\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax\",children:\"MDN Web Docs: Spread syntax\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set\",children:\"MDN Web Docs: Set\"})}),`\n`]})]})}function j(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,Object.assign({},n,{children:(0,r.jsx)(h,n)})):h(n)}var v=j;return A(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var c in e)l(n,c,{get:e[c],enumerable:!0})},a=(n,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of y(e))!u.call(n,t)&&t!==c&&l(n,t,{get:()=>e[t],enumerable:!(o=p(e,t))||o.enumerable});return n};var A=(n,e,c)=>(c=n!=null?m(S(n)):{},a(e||!n||!n.__esModule?l(c,\"default\",{value:n,enumerable:!0}):c,n)),v=n=>a(l({},\"__esModule\",{value:!0}),n);var i=f((_,d)=>{d.exports=_jsx_runtime});var b={};g(b,{default:()=>s,frontmatter:()=>x});var r=A(i()),x={title:\"\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u5C06 `Set` \\u8F6C\\u6362\\u4E3A\\u6570\\u7EC4\\uFF1F\"};function h(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u8981\\u5728 JavaScript \\u4E2D\\u5C06 \",(0,r.jsx)(e.code,{children:\"Set\"}),\" \\u8F6C\\u6362\\u4E3A\\u6570\\u7EC4\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"Array.from()\"}),\" \\u65B9\\u6CD5\\u6216\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const mySet = new Set([1, 2, 3]);\nconst myArray = Array.from(mySet);\n// OR const myArray = [...mySet];\n\nconsole.log(myArray); // Output: [1, 2, 3]\n`})}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsxs)(e.h2,{children:[\"\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u5C06 \",(0,r.jsx)(e.code,{children:\"Set\"}),\" \\u8F6C\\u6362\\u4E3A\\u6570\\u7EC4\\uFF1F\"]}),`\n`,(0,r.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"Array.from()\"})]}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"Array.from()\"}),\" \\u65B9\\u6CD5\\u4ECE\\u7C7B\\u4F3C\\u6570\\u7EC4\\u6216\\u53EF\\u8FED\\u4EE3\\u5BF9\\u8C61\\uFF08\\u4F8B\\u5982 \",(0,r.jsx)(e.code,{children:\"Set\"}),\"\\uFF09\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u3001\\u6D45\\u62F7\\u8D1D\\u7684\\u6570\\u7EC4\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const mySet = new Set([1, 2, 3]);\nconst myArray = Array.from(mySet);\nconsole.log(myArray); // Output: [1, 2, 3]\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26 (\",(0,r.jsx)(e.code,{children:\"...\"}),\") \\u53EF\\u7528\\u4E8E\\u5C06 \",(0,r.jsx)(e.code,{children:\"Set\"}),\" \\u7684\\u5143\\u7D20\\u5C55\\u5F00\\u5230\\u6570\\u7EC4\\u4E2D\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const mySet = new Set([1, 2, 3]);\nconst myArray = [...mySet];\nconsole.log(myArray); // Output: [1, 2, 3]\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u6027\\u80FD\\u8003\\u91CF\"}),`\n`,(0,r.jsx)(e.p,{children:\"\\u8FD9\\u4E24\\u79CD\\u65B9\\u6CD5\\u90FD\\u9AD8\\u6548\\u4E14\\u5E38\\u7528\\u3002\\u4F46\\u662F\\uFF0C\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\\u901A\\u5E38\\u88AB\\u8BA4\\u4E3A\\u66F4\\u7B80\\u6D01\\u6613\\u8BFB\\u3002\\u5BF9\\u4E8E\\u5927\\u591A\\u6570\\u7528\\u4F8B\\uFF0C\\u6027\\u80FD\\u5DEE\\u5F02\\u901A\\u5E38\\u53EF\\u4EE5\\u5FFD\\u7565\\u4E0D\\u8BA1\\uFF0C\\u4F46\\u5BF9\\u4E8E\\u975E\\u5E38\\u5927\\u7684\\u96C6\\u5408\\uFF0C\\u60A8\\u53EF\\u80FD\\u9700\\u8981\\u5BF9\\u8FD9\\u4E24\\u79CD\\u65B9\\u6CD5\\u8FDB\\u884C\\u57FA\\u51C6\\u6D4B\\u8BD5\\uFF0C\\u4EE5\\u67E5\\u770B\\u54EA\\u79CD\\u65B9\\u6CD5\\u5728\\u60A8\\u7684\\u7279\\u5B9A\\u573A\\u666F\\u4E2D\\u8868\\u73B0\\u66F4\\u597D\\u3002\"}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from\",children:\"MDN Web Docs: Array.from()\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax\",children:\"MDN Web Docs: Spread syntax\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set\",children:\"MDN Web Docs: Set\"})}),`\n`]})]})}function s(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(h,{...n})}):h(n)}return v(b);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-convert-a-string-to-a-number-in-javascript/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-convert-a-string-to-a-number-in-javascript/en-US.json
index 341bcf4ed..26617d0f2 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-convert-a-string-to-a-number-in-javascript/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-convert-a-string-to-a-number-in-javascript/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-convert-a-string-to-a-number-in-javascript/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var t in e)l(r,t,{get:e[t],enumerable:!0})},c=(r,e,t,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!g.call(r,o)&&o!==t&&l(r,o,{get:()=>e[o],enumerable:!(a=u(e,o))||a.enumerable});return r};var N=(r,e,t)=>(t=r!=null?h(p(r)):{},c(e||!r||!r.__esModule?l(t,\"default\",{value:r,enumerable:!0}):t,r)),v=r=>c(l({},\"__esModule\",{value:!0}),r);var s=b((D,i)=>{i.exports=_jsx_runtime});var y={};f(y,{default:()=>I,frontmatter:()=>S});var n=N(s()),S={title:\"How do you convert a string to a number in JavaScript?\"};function d(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, you can convert a string to a number using several methods. The most common ones are \",(0,n.jsx)(e.code,{children:\"Number()\"}),\", \",(0,n.jsx)(e.code,{children:\"parseInt()\"}),\", \",(0,n.jsx)(e.code,{children:\"parseFloat()\"}),\", and the unary plus operator (\",(0,n.jsx)(e.code,{children:\"+\"}),\"). For example, \",(0,n.jsx)(e.code,{children:'Number(\"123\")'}),\" converts the string \",(0,n.jsx)(e.code,{children:'\"123\"'}),\" to the number \",(0,n.jsx)(e.code,{children:\"123\"}),\", and \",(0,n.jsx)(e.code,{children:'parseInt(\"123.45\")'}),\" converts the string \",(0,n.jsx)(e.code,{children:'\"123.45\"'}),\" to the integer \",(0,n.jsx)(e.code,{children:\"123\"}),\".\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How do you convert a string to a number in JavaScript?\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"Number()\"}),\" function\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Number()\"}),\" function converts a string to a number. It can handle both integer and floating-point numbers.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let str = '123';\nlet num = Number(str);\nconsole.log(num); // 123\n\nlet floatStr = '123.45';\nlet floatNum = Number(floatStr);\nconsole.log(floatNum); // 123.45\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"parseInt()\"}),\" function\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"parseInt()\"}),\" function parses a string and returns an integer. It can also take a second argument, the radix (base) of the numeral system to be used.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let str = '123';\nlet num = parseInt(str);\nconsole.log(num); // 123\n\nlet floatStr = '120.45';\nlet floatNum = parseInt(floatStr);\nconsole.log(floatNum); // 120\n\nlet binaryStr = '1010';\nlet binaryNum = parseInt(binaryStr, 2);\nconsole.log(binaryNum); // 10\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"parseFloat()\"}),\" function\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"parseFloat()\"}),\" function parses a string and returns a floating-point number.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let floatStr = '123.45';\nlet floatNum = parseFloat(floatStr);\nconsole.log(floatNum); // 123.45\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the unary plus operator (\",(0,n.jsx)(e.code,{children:\"+\"}),\")\"]}),`\n`,(0,n.jsx)(e.p,{children:\"The unary plus operator can be used to convert a string to a number. It is a shorthand method and works for both integers and floating-point numbers.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let str = '123';\nlet num = +str;\nconsole.log(num); // 123\n\nlet floatStr = '123.45';\nlet floatNum = +floatStr;\nconsole.log(floatNum); // 123.45\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Handling non-numeric strings\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"If the string cannot be converted to a number, these methods will return \",(0,n.jsx)(e.code,{children:\"NaN\"}),\" (Not-a-Number).\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let invalidStr = 'abc';\nconsole.log(Number(invalidStr)); // NaN\nconsole.log(parseInt(invalidStr)); // NaN\nconsole.log(parseFloat(invalidStr)); // NaN\nconsole.log(+invalidStr); // NaN\n`})}),`\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/Web/JavaScript/Reference/Global_Objects/Number\",children:\"MDN Web Docs: Number()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt\",children:\"MDN Web Docs: parseInt()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat\",children:\"MDN Web Docs: parseFloat()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus\",children:\"MDN Web Docs: Unary plus (+)\"})}),`\n`]})]})}function j(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(d,r)})):d(r)}var I=j;return v(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),N=(r,e)=>{for(var t in e)l(r,t,{get:e[t],enumerable:!0})},c=(r,e,t,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!b.call(r,o)&&o!==t&&l(r,o,{get:()=>e[o],enumerable:!(a=m(e,o))||a.enumerable});return r};var v=(r,e,t)=>(t=r!=null?u(g(r)):{},c(e||!r||!r.__esModule?l(t,\"default\",{value:r,enumerable:!0}):t,r)),S=r=>c(l({},\"__esModule\",{value:!0}),r);var s=f((x,i)=>{i.exports=_jsx_runtime});var y={};N(y,{default:()=>h,frontmatter:()=>I});var n=v(s()),I={title:\"How do you convert a string to a number in JavaScript?\"};function d(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, you can convert a string to a number using several methods. The most common ones are \",(0,n.jsx)(e.code,{children:\"Number()\"}),\", \",(0,n.jsx)(e.code,{children:\"parseInt()\"}),\", \",(0,n.jsx)(e.code,{children:\"parseFloat()\"}),\", and the unary plus operator (\",(0,n.jsx)(e.code,{children:\"+\"}),\"). For example, \",(0,n.jsx)(e.code,{children:'Number(\"123\")'}),\" converts the string \",(0,n.jsx)(e.code,{children:'\"123\"'}),\" to the number \",(0,n.jsx)(e.code,{children:\"123\"}),\", and \",(0,n.jsx)(e.code,{children:'parseInt(\"123.45\")'}),\" converts the string \",(0,n.jsx)(e.code,{children:'\"123.45\"'}),\" to the integer \",(0,n.jsx)(e.code,{children:\"123\"}),\".\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How do you convert a string to a number in JavaScript?\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"Number()\"}),\" function\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Number()\"}),\" function converts a string to a number. It can handle both integer and floating-point numbers.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let str = '123';\nlet num = Number(str);\nconsole.log(num); // 123\n\nlet floatStr = '123.45';\nlet floatNum = Number(floatStr);\nconsole.log(floatNum); // 123.45\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"parseInt()\"}),\" function\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"parseInt()\"}),\" function parses a string and returns an integer. It can also take a second argument, the radix (base) of the numeral system to be used.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let str = '123';\nlet num = parseInt(str);\nconsole.log(num); // 123\n\nlet floatStr = '120.45';\nlet floatNum = parseInt(floatStr);\nconsole.log(floatNum); // 120\n\nlet binaryStr = '1010';\nlet binaryNum = parseInt(binaryStr, 2);\nconsole.log(binaryNum); // 10\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"parseFloat()\"}),\" function\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"parseFloat()\"}),\" function parses a string and returns a floating-point number.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let floatStr = '123.45';\nlet floatNum = parseFloat(floatStr);\nconsole.log(floatNum); // 123.45\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the unary plus operator (\",(0,n.jsx)(e.code,{children:\"+\"}),\")\"]}),`\n`,(0,n.jsx)(e.p,{children:\"The unary plus operator can be used to convert a string to a number. It is a shorthand method and works for both integers and floating-point numbers.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let str = '123';\nlet num = +str;\nconsole.log(num); // 123\n\nlet floatStr = '123.45';\nlet floatNum = +floatStr;\nconsole.log(floatNum); // 123.45\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Handling non-numeric strings\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"If the string cannot be converted to a number, these methods will return \",(0,n.jsx)(e.code,{children:\"NaN\"}),\" (Not-a-Number).\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let invalidStr = 'abc';\nconsole.log(Number(invalidStr)); // NaN\nconsole.log(parseInt(invalidStr)); // NaN\nconsole.log(parseFloat(invalidStr)); // NaN\nconsole.log(+invalidStr); // NaN\n`})}),`\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/Web/JavaScript/Reference/Global_Objects/Number\",children:\"MDN Web Docs: Number()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt\",children:\"MDN Web Docs: parseInt()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat\",children:\"MDN Web Docs: parseFloat()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus\",children:\"MDN Web Docs: Unary plus (+)\"})}),`\n`]})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(d,{...r})}):d(r)}return S(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-convert-a-string-to-a-number-in-javascript/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-convert-a-string-to-a-number-in-javascript/zh-CN.json
index f0eb5a5d1..9028fb64f 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-convert-a-string-to-a-number-in-javascript/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-convert-a-string-to-a-number-in-javascript/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-convert-a-string-to-a-number-in-javascript/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var b=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),g=(l,e)=>{for(var r in e)t(l,r,{get:e[r],enumerable:!0})},a=(l,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of u(e))!N.call(l,c)&&c!==r&&t(l,c,{get:()=>e[c],enumerable:!(o=p(e,c))||o.enumerable});return l};var f=(l,e,r)=>(r=l!=null?h(m(l)):{},a(e||!l||!l.__esModule?t(r,\"default\",{value:l,enumerable:!0}):r,l)),S=l=>a(t({},\"__esModule\",{value:!0}),l);var d=b((x,i)=>{i.exports=_jsx_runtime});var _={};g(_,{default:()=>D,frontmatter:()=>v});var n=f(d()),v={title:\"\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u5C06\\u5B57\\u7B26\\u4E32\\u8F6C\\u6362\\u4E3A\\u6570\\u5B57\\uFF1F\"};function s(l){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},l.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u591A\\u79CD\\u65B9\\u6CD5\\u5C06\\u5B57\\u7B26\\u4E32\\u8F6C\\u6362\\u4E3A\\u6570\\u5B57\\u3002\\u6700\\u5E38\\u89C1\\u7684\\u65B9\\u6CD5\\u662F \",(0,n.jsx)(e.code,{children:\"Number()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"parseInt()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"parseFloat()\"}),\" \\u548C\\u4E00\\u5143\\u52A0\\u8FD0\\u7B97\\u7B26 (\",(0,n.jsx)(e.code,{children:\"+\"}),\")\\u3002\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:'Number(\"123\")'}),\" \\u5C06\\u5B57\\u7B26\\u4E32 \",(0,n.jsx)(e.code,{children:'\"123\"'}),\" \\u8F6C\\u6362\\u4E3A\\u6570\\u5B57 \",(0,n.jsx)(e.code,{children:\"123\"}),\"\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:'parseInt(\"123.45\")'}),\" \\u5C06\\u5B57\\u7B26\\u4E32 \",(0,n.jsx)(e.code,{children:'\"123.45\"'}),\" \\u8F6C\\u6362\\u4E3A\\u6574\\u6570 \",(0,n.jsx)(e.code,{children:\"123\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u5C06\\u5B57\\u7B26\\u4E32\\u8F6C\\u6362\\u4E3A\\u6570\\u5B57\\uFF1F\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Number()\"}),\" \\u51FD\\u6570\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Number()\"}),\" \\u51FD\\u6570\\u5C06\\u5B57\\u7B26\\u4E32\\u8F6C\\u6362\\u4E3A\\u6570\\u5B57\\u3002\\u5B83\\u53EF\\u4EE5\\u5904\\u7406\\u6574\\u6570\\u548C\\u6D6E\\u70B9\\u6570\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let str = '123';\nlet num = Number(str);\nconsole.log(num); // 123\n\nlet floatStr = '123.45';\nlet floatNum = Number(floatStr);\nconsole.log(floatNum); // 123.45\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"parseInt()\"}),\" \\u51FD\\u6570\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"parseInt()\"}),\" \\u51FD\\u6570\\u89E3\\u6790\\u4E00\\u4E2A\\u5B57\\u7B26\\u4E32\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A\\u6574\\u6570\\u3002\\u5B83\\u8FD8\\u53EF\\u4EE5\\u63A5\\u53D7\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\uFF0C\\u5373\\u8981\\u4F7F\\u7528\\u7684\\u6570\\u5B57\\u7CFB\\u7EDF\\u7684\\u57FA\\u6570\\uFF08\\u5E95\\u6570\\uFF09\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let str = '123';\nlet num = parseInt(str);\nconsole.log(num); // 123\n\nlet floatStr = '120.45';\nlet floatNum = parseInt(floatStr);\nconsole.log(floatNum); // 120\n\nlet binaryStr = '1010';\nlet binaryNum = parseInt(binaryStr, 2);\nconsole.log(binaryNum); // 10\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"parseFloat()\"}),\" \\u51FD\\u6570\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"parseFloat()\"}),\" \\u51FD\\u6570\\u89E3\\u6790\\u4E00\\u4E2A\\u5B57\\u7B26\\u4E32\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A\\u6D6E\\u70B9\\u6570\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let floatStr = '123.45';\nlet floatNum = parseFloat(floatStr);\nconsole.log(floatNum); // 123.45\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528\\u4E00\\u5143\\u52A0\\u8FD0\\u7B97\\u7B26 (\",(0,n.jsx)(e.code,{children:\"+\"}),\")\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E00\\u5143\\u52A0\\u8FD0\\u7B97\\u7B26\\u53EF\\u7528\\u4E8E\\u5C06\\u5B57\\u7B26\\u4E32\\u8F6C\\u6362\\u4E3A\\u6570\\u5B57\\u3002\\u8FD9\\u662F\\u4E00\\u79CD\\u7B80\\u5199\\u65B9\\u6CD5\\uFF0C\\u9002\\u7528\\u4E8E\\u6574\\u6570\\u548C\\u6D6E\\u70B9\\u6570\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let str = '123';\nlet num = +str;\nconsole.log(num); // 123\n\nlet floatStr = '123.45';\nlet floatNum = +floatStr;\nconsole.log(floatNum); // 123.45\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5904\\u7406\\u975E\\u6570\\u5B57\\u5B57\\u7B26\\u4E32\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u5B57\\u7B26\\u4E32\\u65E0\\u6CD5\\u8F6C\\u6362\\u4E3A\\u6570\\u5B57\\uFF0C\\u8FD9\\u4E9B\\u65B9\\u6CD5\\u5C06\\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:\"NaN\"}),\" (\\u975E\\u6570\\u5B57)\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let invalidStr = 'abc';\nconsole.log(Number(invalidStr)); // NaN\nconsole.log(parseInt(invalidStr)); // NaN\nconsole.log(parseFloat(invalidStr)); // NaN\nconsole.log(+invalidStr); // NaN\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number\",children:\"MDN Web Docs: Number()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt\",children:\"MDN Web Docs: parseInt()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseFloat\",children:\"MDN Web Docs: parseFloat()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Unary_plus\",children:\"MDN Web Docs: Unary plus (+)\"})}),`\n`]})]})}function j(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(s,l)})):s(l)}var D=j;return S(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),g=(l,e)=>{for(var r in e)o(l,r,{get:e[r],enumerable:!0})},a=(l,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!f.call(l,c)&&c!==r&&o(l,c,{get:()=>e[c],enumerable:!(t=u(e,c))||t.enumerable});return l};var S=(l,e,r)=>(r=l!=null?p(N(l)):{},a(e||!l||!l.__esModule?o(r,\"default\",{value:l,enumerable:!0}):r,l)),v=l=>a(o({},\"__esModule\",{value:!0}),l);var d=b((I,i)=>{i.exports=_jsx_runtime});var D={};g(D,{default:()=>h,frontmatter:()=>j});var n=S(d()),j={title:\"\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u5C06\\u5B57\\u7B26\\u4E32\\u8F6C\\u6362\\u4E3A\\u6570\\u5B57\\uFF1F\"};function s(l){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u591A\\u79CD\\u65B9\\u6CD5\\u5C06\\u5B57\\u7B26\\u4E32\\u8F6C\\u6362\\u4E3A\\u6570\\u5B57\\u3002\\u6700\\u5E38\\u89C1\\u7684\\u65B9\\u6CD5\\u662F \",(0,n.jsx)(e.code,{children:\"Number()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"parseInt()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"parseFloat()\"}),\" \\u548C\\u4E00\\u5143\\u52A0\\u8FD0\\u7B97\\u7B26 (\",(0,n.jsx)(e.code,{children:\"+\"}),\")\\u3002\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:'Number(\"123\")'}),\" \\u5C06\\u5B57\\u7B26\\u4E32 \",(0,n.jsx)(e.code,{children:'\"123\"'}),\" \\u8F6C\\u6362\\u4E3A\\u6570\\u5B57 \",(0,n.jsx)(e.code,{children:\"123\"}),\"\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:'parseInt(\"123.45\")'}),\" \\u5C06\\u5B57\\u7B26\\u4E32 \",(0,n.jsx)(e.code,{children:'\"123.45\"'}),\" \\u8F6C\\u6362\\u4E3A\\u6574\\u6570 \",(0,n.jsx)(e.code,{children:\"123\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u5C06\\u5B57\\u7B26\\u4E32\\u8F6C\\u6362\\u4E3A\\u6570\\u5B57\\uFF1F\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Number()\"}),\" \\u51FD\\u6570\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Number()\"}),\" \\u51FD\\u6570\\u5C06\\u5B57\\u7B26\\u4E32\\u8F6C\\u6362\\u4E3A\\u6570\\u5B57\\u3002\\u5B83\\u53EF\\u4EE5\\u5904\\u7406\\u6574\\u6570\\u548C\\u6D6E\\u70B9\\u6570\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let str = '123';\nlet num = Number(str);\nconsole.log(num); // 123\n\nlet floatStr = '123.45';\nlet floatNum = Number(floatStr);\nconsole.log(floatNum); // 123.45\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"parseInt()\"}),\" \\u51FD\\u6570\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"parseInt()\"}),\" \\u51FD\\u6570\\u89E3\\u6790\\u4E00\\u4E2A\\u5B57\\u7B26\\u4E32\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A\\u6574\\u6570\\u3002\\u5B83\\u8FD8\\u53EF\\u4EE5\\u63A5\\u53D7\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\uFF0C\\u5373\\u8981\\u4F7F\\u7528\\u7684\\u6570\\u5B57\\u7CFB\\u7EDF\\u7684\\u57FA\\u6570\\uFF08\\u5E95\\u6570\\uFF09\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let str = '123';\nlet num = parseInt(str);\nconsole.log(num); // 123\n\nlet floatStr = '120.45';\nlet floatNum = parseInt(floatStr);\nconsole.log(floatNum); // 120\n\nlet binaryStr = '1010';\nlet binaryNum = parseInt(binaryStr, 2);\nconsole.log(binaryNum); // 10\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"parseFloat()\"}),\" \\u51FD\\u6570\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"parseFloat()\"}),\" \\u51FD\\u6570\\u89E3\\u6790\\u4E00\\u4E2A\\u5B57\\u7B26\\u4E32\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A\\u6D6E\\u70B9\\u6570\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let floatStr = '123.45';\nlet floatNum = parseFloat(floatStr);\nconsole.log(floatNum); // 123.45\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528\\u4E00\\u5143\\u52A0\\u8FD0\\u7B97\\u7B26 (\",(0,n.jsx)(e.code,{children:\"+\"}),\")\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E00\\u5143\\u52A0\\u8FD0\\u7B97\\u7B26\\u53EF\\u7528\\u4E8E\\u5C06\\u5B57\\u7B26\\u4E32\\u8F6C\\u6362\\u4E3A\\u6570\\u5B57\\u3002\\u8FD9\\u662F\\u4E00\\u79CD\\u7B80\\u5199\\u65B9\\u6CD5\\uFF0C\\u9002\\u7528\\u4E8E\\u6574\\u6570\\u548C\\u6D6E\\u70B9\\u6570\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let str = '123';\nlet num = +str;\nconsole.log(num); // 123\n\nlet floatStr = '123.45';\nlet floatNum = +floatStr;\nconsole.log(floatNum); // 123.45\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5904\\u7406\\u975E\\u6570\\u5B57\\u5B57\\u7B26\\u4E32\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u5B57\\u7B26\\u4E32\\u65E0\\u6CD5\\u8F6C\\u6362\\u4E3A\\u6570\\u5B57\\uFF0C\\u8FD9\\u4E9B\\u65B9\\u6CD5\\u5C06\\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:\"NaN\"}),\" (\\u975E\\u6570\\u5B57)\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let invalidStr = 'abc';\nconsole.log(Number(invalidStr)); // NaN\nconsole.log(parseInt(invalidStr)); // NaN\nconsole.log(parseFloat(invalidStr)); // NaN\nconsole.log(+invalidStr); // NaN\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number\",children:\"MDN Web Docs: Number()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt\",children:\"MDN Web Docs: parseInt()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseFloat\",children:\"MDN Web Docs: parseFloat()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Unary_plus\",children:\"MDN Web Docs: Unary plus (+)\"})}),`\n`]})]})}function h(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(s,{...l})}):s(l)}return v(D);})();\n;return Component;"
 }
\ No newline at end of file
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 ebddf3833..f4e57bdf5 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-create-a-constructor-function/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var f=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),j=(t,n)=>{for(var o in n)r(t,o,{get:n[o],enumerable:!0})},i=(t,n,o,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let a of g(n))!p.call(t,a)&&a!==o&&r(t,a,{get:()=>n[a],enumerable:!(c=u(n,a))||c.enumerable});return t};var y=(t,n,o)=>(o=t!=null?d(m(t)):{},i(n||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),w=t=>i(r({},\"__esModule\",{value:!0}),t);var h=f((k,s)=>{s.exports=_jsx_runtime});var J={};j(J,{default:()=>P,frontmatter:()=>b});var e=y(h()),b={title:\"How do you create a constructor function?\"};function l(t){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"To create a constructor function in JavaScript, define a regular function with a capitalized name to indicate it's a constructor. Use the \",(0,e.jsx)(n.code,{children:\"this\"}),\" keyword to set properties and methods. When creating an instance, use the \",(0,e.jsx)(n.code,{children:\"new\"}),\" keyword.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\nconst john = new Person('John', 30);\nconsole.log(john.age); // 30\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"How do you create a constructor function?\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Defining a constructor function\"}),`\n`,(0,e.jsx)(n.p,{children:\"A constructor function in JavaScript is a regular function that is used to create objects. By convention, the name of the constructor function starts with a capital letter to distinguish it from regular functions.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"Using the \",(0,e.jsx)(n.code,{children:\"this\"}),\" keyword\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"Within the constructor function, the \",(0,e.jsx)(n.code,{children:\"this\"}),\" keyword is used to refer to the object that will be created. Properties and methods can be assigned to \",(0,e.jsx)(n.code,{children:\"this\"}),\".\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n  this.greet = function () {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`,\n    );\n  };\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Creating an instance\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"To create an instance of the object, use the \",(0,e.jsx)(n.code,{children:\"new\"}),\" keyword followed by the constructor function.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n  this.greet = function () {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`,\n    );\n  };\n}\n\nconst john = new Person('John', 30);\njohn.greet(); // Output: Hello, my name is John and I am 30 years old.\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Adding methods to the prototype\"}),`\n`,(0,e.jsx)(n.p,{children:\"To save memory, it's a good practice to add methods to the constructor's prototype instead of defining them inside the constructor function.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\nPerson.prototype.greet = function () {\n  console.log(\\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`);\n};\n\nconst jane = new Person('Jane', 25);\njane.greet(); // Output: Hello, my name is Jane and I am 25 years old.\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Checking the instance type\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"You can check if an object is an instance of a constructor function using the \",(0,e.jsx)(n.code,{children:\"instanceof\"}),\" operator.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\nconst jane = new Person('Jane', 25);\n\nconsole.log(jane instanceof Person); // Output: true\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects\",children:\"MDN Web Docs: Working with objects\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes\",children:\"MDN Web Docs: Object prototypes\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/constructor-new\",children:'JavaScript.info: Constructor, operator \"new\"'})}),`\n`]})]})}function v(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(l,t)})):l(t)}var P=v;return w(J);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var j=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),y=(t,n)=>{for(var o in n)a(t,o,{get:n[o],enumerable:!0})},i=(t,n,o,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of m(n))!f.call(t,r)&&r!==o&&a(t,r,{get:()=>n[r],enumerable:!(c=g(n,r))||c.enumerable});return t};var w=(t,n,o)=>(o=t!=null?u(p(t)):{},i(n||!t||!t.__esModule?a(o,\"default\",{value:t,enumerable:!0}):o,t)),v=t=>i(a({},\"__esModule\",{value:!0}),t);var h=j((_,s)=>{s.exports=_jsx_runtime});var P={};y(P,{default:()=>d,frontmatter:()=>b});var e=w(h()),b={title:\"How do you create a constructor function?\"};function l(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"To create a constructor function in JavaScript, define a regular function with a capitalized name to indicate it's a constructor. Use the \",(0,e.jsx)(n.code,{children:\"this\"}),\" keyword to set properties and methods. When creating an instance, use the \",(0,e.jsx)(n.code,{children:\"new\"}),\" keyword.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\nconst john = new Person('John', 30);\nconsole.log(john.age); // 30\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"How do you create a constructor function?\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Defining a constructor function\"}),`\n`,(0,e.jsx)(n.p,{children:\"A constructor function in JavaScript is a regular function that is used to create objects. By convention, the name of the constructor function starts with a capital letter to distinguish it from regular functions.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"Using the \",(0,e.jsx)(n.code,{children:\"this\"}),\" keyword\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"Within the constructor function, the \",(0,e.jsx)(n.code,{children:\"this\"}),\" keyword is used to refer to the object that will be created. Properties and methods can be assigned to \",(0,e.jsx)(n.code,{children:\"this\"}),\".\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n  this.greet = function () {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`,\n    );\n  };\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Creating an instance\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"To create an instance of the object, use the \",(0,e.jsx)(n.code,{children:\"new\"}),\" keyword followed by the constructor function.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n  this.greet = function () {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`,\n    );\n  };\n}\n\nconst john = new Person('John', 30);\njohn.greet(); // Output: Hello, my name is John and I am 30 years old.\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Adding methods to the prototype\"}),`\n`,(0,e.jsx)(n.p,{children:\"To save memory, it's a good practice to add methods to the constructor's prototype instead of defining them inside the constructor function.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\nPerson.prototype.greet = function () {\n  console.log(\\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`);\n};\n\nconst jane = new Person('Jane', 25);\njane.greet(); // Output: Hello, my name is Jane and I am 25 years old.\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Checking the instance type\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"You can check if an object is an instance of a constructor function using the \",(0,e.jsx)(n.code,{children:\"instanceof\"}),\" operator.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\nconst jane = new Person('Jane', 25);\n\nconsole.log(jane instanceof Person); // Output: true\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects\",children:\"MDN Web Docs: Working with objects\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes\",children:\"MDN Web Docs: Object prototypes\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/constructor-new\",children:'JavaScript.info: Constructor, operator \"new\"'})}),`\n`]})]})}function d(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(l,{...t})}):l(t)}return v(P);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-create-a-constructor-function/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-create-a-constructor-function/zh-CN.json
index 8671a728c..2885c45d4 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-create-a-constructor-function/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-create-a-constructor-function/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-create-a-constructor-function/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var j=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),f=(a,n)=>{for(var r in n)t(a,r,{get:n[r],enumerable:!0})},c=(a,n,r,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of g(n))!p.call(a,o)&&o!==r&&t(a,o,{get:()=>n[o],enumerable:!(i=m(n,o))||i.enumerable});return a};var v=(a,n,r)=>(r=a!=null?d(u(a)):{},c(n||!a||!a.__esModule?t(r,\"default\",{value:a,enumerable:!0}):r,a)),y=a=>c(t({},\"__esModule\",{value:!0}),a);var l=j((x,s)=>{s.exports=_jsx_runtime});var b={};f(b,{default:()=>J,frontmatter:()=>P});var e=v(l()),P={title:\"\\u5982\\u4F55\\u521B\\u5EFA\\u6784\\u9020\\u51FD\\u6570\\uFF1F\"};function h(a){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},a.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8981\\u5728 JavaScript \\u4E2D\\u521B\\u5EFA\\u6784\\u9020\\u51FD\\u6570\\uFF0C\\u8BF7\\u5B9A\\u4E49\\u4E00\\u4E2A\\u540D\\u79F0\\u5927\\u5199\\u7684\\u5E38\\u89C4\\u51FD\\u6570\\uFF0C\\u4EE5\\u8868\\u660E\\u5B83\\u662F\\u4E00\\u4E2A\\u6784\\u9020\\u51FD\\u6570\\u3002\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\\u8BBE\\u7F6E\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\\u521B\\u5EFA\\u5B9E\\u4F8B\\u65F6\\uFF0C\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\nconst john = new Person('John', 30);\nconsole.log(john.age); // 30\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5982\\u4F55\\u521B\\u5EFA\\u6784\\u9020\\u51FD\\u6570\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\\u6784\\u9020\\u51FD\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684\\u6784\\u9020\\u51FD\\u6570\\u662F\\u4E00\\u4E2A\\u7528\\u4E8E\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u5E38\\u89C4\\u51FD\\u6570\\u3002\\u6309\\u7167\\u60EF\\u4F8B\\uFF0C\\u6784\\u9020\\u51FD\\u6570\\u7684\\u540D\\u79F0\\u4EE5\\u5927\\u5199\\u5B57\\u6BCD\\u5F00\\u5934\\uFF0C\\u4EE5\\u533A\\u522B\\u4E8E\\u5E38\\u89C4\\u51FD\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6784\\u9020\\u51FD\\u6570\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\\u7528\\u4E8E\\u5F15\\u7528\\u5C06\\u8981\\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u3002\\u53EF\\u4EE5\\u5C06\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u5206\\u914D\\u7ED9 \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n  this.greet = function () {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`,\n    );\n  };\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u521B\\u5EFA\\u5B9E\\u4F8B\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8981\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u5B9E\\u4F8B\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\uFF0C\\u540E\\u8DDF\\u6784\\u9020\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n  this.greet = function () {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`,\n    );\n  };\n}\n\nconst john = new Person('John', 30);\njohn.greet(); // Output: Hello, my name is John and I am 30 years old.\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5C06\\u65B9\\u6CD5\\u6DFB\\u52A0\\u5230\\u539F\\u578B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E3A\\u4E86\\u8282\\u7701\\u5185\\u5B58\\uFF0C\\u6700\\u597D\\u5C06\\u65B9\\u6CD5\\u6DFB\\u52A0\\u5230\\u6784\\u9020\\u51FD\\u6570\\u7684\\u539F\\u578B\\u4E2D\\uFF0C\\u800C\\u4E0D\\u662F\\u5728\\u6784\\u9020\\u51FD\\u6570\\u4E2D\\u5B9A\\u4E49\\u5B83\\u4EEC\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\nPerson.prototype.greet = function () {\n  console.log(\\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`);\n};\n\nconst jane = new Person('Jane', 25);\njane.greet(); // Output: Hello, my name is Jane and I am 25 years old.\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u68C0\\u67E5\\u5B9E\\u4F8B\\u7C7B\\u578B\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"instanceof\"}),\" \\u8FD0\\u7B97\\u7B26\\u68C0\\u67E5\\u5BF9\\u8C61\\u662F\\u5426\\u662F\\u6784\\u9020\\u51FD\\u6570\\u7684\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\nconst jane = new Person('Jane', 25);\n\nconsole.log(jane instanceof Person); // Output: true\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects\",children:\"MDN Web Docs: Working with objects\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes\",children:\"MDN Web Docs: Object prototypes\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/constructor-new\",children:'JavaScript.info: Constructor, operator \"new\"'})}),`\n`]})]})}function w(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(h,a)})):h(a)}var J=w;return y(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var t=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var f=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),v=(a,n)=>{for(var r in n)t(a,r,{get:n[r],enumerable:!0})},c=(a,n,r,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of u(n))!j.call(a,o)&&o!==r&&t(a,o,{get:()=>n[o],enumerable:!(i=g(n,o))||i.enumerable});return a};var y=(a,n,r)=>(r=a!=null?m(p(a)):{},c(n||!a||!a.__esModule?t(r,\"default\",{value:a,enumerable:!0}):r,a)),P=a=>c(t({},\"__esModule\",{value:!0}),a);var l=f((x,s)=>{s.exports=_jsx_runtime});var J={};v(J,{default:()=>d,frontmatter:()=>w});var e=y(l()),w={title:\"\\u5982\\u4F55\\u521B\\u5EFA\\u6784\\u9020\\u51FD\\u6570\\uFF1F\"};function h(a){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...a.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8981\\u5728 JavaScript \\u4E2D\\u521B\\u5EFA\\u6784\\u9020\\u51FD\\u6570\\uFF0C\\u8BF7\\u5B9A\\u4E49\\u4E00\\u4E2A\\u540D\\u79F0\\u5927\\u5199\\u7684\\u5E38\\u89C4\\u51FD\\u6570\\uFF0C\\u4EE5\\u8868\\u660E\\u5B83\\u662F\\u4E00\\u4E2A\\u6784\\u9020\\u51FD\\u6570\\u3002\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\\u8BBE\\u7F6E\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\\u521B\\u5EFA\\u5B9E\\u4F8B\\u65F6\\uFF0C\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\nconst john = new Person('John', 30);\nconsole.log(john.age); // 30\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5982\\u4F55\\u521B\\u5EFA\\u6784\\u9020\\u51FD\\u6570\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\\u6784\\u9020\\u51FD\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684\\u6784\\u9020\\u51FD\\u6570\\u662F\\u4E00\\u4E2A\\u7528\\u4E8E\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u5E38\\u89C4\\u51FD\\u6570\\u3002\\u6309\\u7167\\u60EF\\u4F8B\\uFF0C\\u6784\\u9020\\u51FD\\u6570\\u7684\\u540D\\u79F0\\u4EE5\\u5927\\u5199\\u5B57\\u6BCD\\u5F00\\u5934\\uFF0C\\u4EE5\\u533A\\u522B\\u4E8E\\u5E38\\u89C4\\u51FD\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6784\\u9020\\u51FD\\u6570\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\\u7528\\u4E8E\\u5F15\\u7528\\u5C06\\u8981\\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u3002\\u53EF\\u4EE5\\u5C06\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u5206\\u914D\\u7ED9 \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n  this.greet = function () {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`,\n    );\n  };\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u521B\\u5EFA\\u5B9E\\u4F8B\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8981\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u5B9E\\u4F8B\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\uFF0C\\u540E\\u8DDF\\u6784\\u9020\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n  this.greet = function () {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`,\n    );\n  };\n}\n\nconst john = new Person('John', 30);\njohn.greet(); // Output: Hello, my name is John and I am 30 years old.\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5C06\\u65B9\\u6CD5\\u6DFB\\u52A0\\u5230\\u539F\\u578B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E3A\\u4E86\\u8282\\u7701\\u5185\\u5B58\\uFF0C\\u6700\\u597D\\u5C06\\u65B9\\u6CD5\\u6DFB\\u52A0\\u5230\\u6784\\u9020\\u51FD\\u6570\\u7684\\u539F\\u578B\\u4E2D\\uFF0C\\u800C\\u4E0D\\u662F\\u5728\\u6784\\u9020\\u51FD\\u6570\\u4E2D\\u5B9A\\u4E49\\u5B83\\u4EEC\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\nPerson.prototype.greet = function () {\n  console.log(\\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`);\n};\n\nconst jane = new Person('Jane', 25);\njane.greet(); // Output: Hello, my name is Jane and I am 25 years old.\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u68C0\\u67E5\\u5B9E\\u4F8B\\u7C7B\\u578B\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"instanceof\"}),\" \\u8FD0\\u7B97\\u7B26\\u68C0\\u67E5\\u5BF9\\u8C61\\u662F\\u5426\\u662F\\u6784\\u9020\\u51FD\\u6570\\u7684\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\nconst jane = new Person('Jane', 25);\n\nconsole.log(jane instanceof Person); // Output: true\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects\",children:\"MDN Web Docs: Working with objects\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes\",children:\"MDN Web Docs: Object prototypes\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/constructor-new\",children:'JavaScript.info: Constructor, operator \"new\"'})}),`\n`]})]})}function d(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,{...a,children:(0,e.jsx)(h,{...a})}):h(a)}return P(J);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-debug-react-applications/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-debug-react-applications/en-US.json
index c64d9400f..2f4b681ab 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-debug-react-applications/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-debug-react-applications/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/how-do-you-debug-react-applications/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var y=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),b=(r,e)=>{for(var o in e)a(r,o,{get:e[o],enumerable:!0})},i=(r,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of u(e))!m.call(r,t)&&t!==o&&a(r,t,{get:()=>e[t],enumerable:!(c=p(e,t))||c.enumerable});return r};var f=(r,e,o)=>(o=r!=null?h(g(r)):{},i(e||!r||!r.__esModule?a(o,\"default\",{value:r,enumerable:!0}):o,r)),v=r=>i(a({},\"__esModule\",{value:!0}),r);var l=y((B,s)=>{s.exports=_jsx_runtime});var x={};b(x,{default:()=>C,frontmatter:()=>w});var n=f(l()),w={title:\"How do you debug React applications?\"};function d(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\",pre:\"pre\",ol:\"ol\",h4:\"h4\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To debug React applications, you can use the React Developer Tools browser extension to inspect component hierarchies and state. Additionally, you can use \",(0,n.jsx)(e.code,{children:\"console.log\"}),\" statements to log data and errors, and leverage breakpoints in your code using browser developer tools. For more advanced debugging, you can use error boundaries to catch and handle errors in your components.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How do you debug React applications?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Using React Developer Tools\"}),`\n`,(0,n.jsx)(e.p,{children:\"The React Developer Tools browser extension is a powerful tool for inspecting and debugging React applications. It allows you to:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Inspect the component hierarchy\"}),`\n`,(0,n.jsx)(e.li,{children:\"View and edit component state and props\"}),`\n`,(0,n.jsx)(e.li,{children:\"Trace component re-renders\"}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can install the extension from the \",(0,n.jsx)(e.a,{href:\"https://chrome.google.com/webstore/detail/react-developer-tools\",children:\"Chrome Web Store\"}),\" or \",(0,n.jsx)(e.a,{href:\"https://addons.mozilla.org/en-US/firefox/addon/react-devtools/\",children:\"Firefox Add-ons\"}),\".\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"console.log\"}),\" statements\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Adding \",(0,n.jsx)(e.code,{children:\"console.log\"}),\" statements in your code can help you understand the flow of your application and identify issues. For example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`function MyComponent(props) {\n  console.log('Rendering MyComponent with props:', props);\n  return <div>{props.message}</div>;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Using breakpoints\"}),`\n`,(0,n.jsx)(e.p,{children:\"Browser developer tools, such as Chrome DevTools, allow you to set breakpoints in your code. This can help you pause execution and inspect the current state of your application. To set a breakpoint:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Open the browser's developer tools (usually by pressing \",(0,n.jsx)(e.code,{children:\"F12\"}),\" or \",(0,n.jsx)(e.code,{children:\"Ctrl+Shift+I\"}),\").\"]}),`\n`,(0,n.jsx)(e.li,{children:'Navigate to the \"Sources\" tab.'}),`\n`,(0,n.jsx)(e.li,{children:\"Find the relevant file and line of code.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Click on the line number to set a breakpoint.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Using Error Boundaries\"}),`\n`,(0,n.jsx)(e.p,{children:\"Error boundaries are React components that catch JavaScript errors in their child component tree. You can implement error boundaries in two ways:\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Using React's Built-in Class Component\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`class ErrorBoundary extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError(error) {\n    // Update state so the next render will show the fallback UI.\n    return { hasError: true };\n  }\n\n  componentDidCatch(error, info) {\n    // You can also log the error to an error reporting service\n    console.error('Error caught by error boundary:', error, info);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      // You can render any custom fallback UI\n      return <h1>Something went wrong.</h1>;\n    }\n\n    return this.props.children;\n  }\n}\n\n// Usage\nfunction App() {\n  return (\n    <ErrorBoundary>\n      <MyComponent />\n    </ErrorBoundary>\n  );\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Using react-error-boundary Package\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Alternatively, you can use the \",(0,n.jsx)(e.code,{children:\"react-error-boundary\"}),\" package for a more convenient approach:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import { ErrorBoundary } from 'react-error-boundary';\n\nfunction ErrorFallback({ error, resetErrorBoundary }) {\n  return (\n    <div role=\"alert\">\n      <p>Something went wrong:</p>\n      <pre style={{ color: 'red' }}>{error.message}</pre>\n      <button onClick={resetErrorBoundary}>Try again</button>\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <ErrorBoundary\n      FallbackComponent={ErrorFallback}\n      onReset={() => {\n        // Reset the state of your app\n      }}\n      onError={(error, info) => {\n        // Log the error to an error reporting service\n      }}\n    >\n      <MyComponent />\n    </ErrorBoundary>\n  );\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"For handling errors in event handlers or async code, you can use the \",(0,n.jsx)(e.code,{children:\"useErrorBoundary\"}),\" hook:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import { useErrorBoundary } from 'react-error-boundary';\n\nfunction MyComponent() {\n  const { showBoundary } = useErrorBoundary();\n\n  const handleAsyncError = async () => {\n    try {\n      await someAsyncOperation();\n    } catch (error) {\n      showBoundary(error);\n    }\n  };\n\n  return <button onClick={handleAsyncError}>Perform Action</button>;\n}\n`})}),`\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://react.dev/learn/react-developer-tools\",children:\"React Developer Tools\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary\",children:\"Error boundaries in React\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/tools/chrome-devtools\",children:\"Using the Chrome DevTools\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Debugging\",children:\"Debugging JavaScript\"})}),`\n`]})]})}function E(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(d,r)})):d(r)}var C=E;return v(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var b=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var o in e)a(r,o,{get:e[o],enumerable:!0})},i=(r,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of g(e))!y.call(r,t)&&t!==o&&a(r,t,{get:()=>e[t],enumerable:!(c=u(e,t))||c.enumerable});return r};var v=(r,e,o)=>(o=r!=null?p(m(r)):{},i(e||!r||!r.__esModule?a(o,\"default\",{value:r,enumerable:!0}):o,r)),w=r=>i(a({},\"__esModule\",{value:!0}),r);var l=b((k,s)=>{s.exports=_jsx_runtime});var C={};f(C,{default:()=>h,frontmatter:()=>E});var n=v(l()),E={title:\"How do you debug React applications?\"};function d(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To debug React applications, you can use the React Developer Tools browser extension to inspect component hierarchies and state. Additionally, you can use \",(0,n.jsx)(e.code,{children:\"console.log\"}),\" statements to log data and errors, and leverage breakpoints in your code using browser developer tools. For more advanced debugging, you can use error boundaries to catch and handle errors in your components.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How do you debug React applications?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Using React Developer Tools\"}),`\n`,(0,n.jsx)(e.p,{children:\"The React Developer Tools browser extension is a powerful tool for inspecting and debugging React applications. It allows you to:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Inspect the component hierarchy\"}),`\n`,(0,n.jsx)(e.li,{children:\"View and edit component state and props\"}),`\n`,(0,n.jsx)(e.li,{children:\"Trace component re-renders\"}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can install the extension from the \",(0,n.jsx)(e.a,{href:\"https://chrome.google.com/webstore/detail/react-developer-tools\",children:\"Chrome Web Store\"}),\" or \",(0,n.jsx)(e.a,{href:\"https://addons.mozilla.org/en-US/firefox/addon/react-devtools/\",children:\"Firefox Add-ons\"}),\".\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"console.log\"}),\" statements\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Adding \",(0,n.jsx)(e.code,{children:\"console.log\"}),\" statements in your code can help you understand the flow of your application and identify issues. For example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`function MyComponent(props) {\n  console.log('Rendering MyComponent with props:', props);\n  return <div>{props.message}</div>;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Using breakpoints\"}),`\n`,(0,n.jsx)(e.p,{children:\"Browser developer tools, such as Chrome DevTools, allow you to set breakpoints in your code. This can help you pause execution and inspect the current state of your application. To set a breakpoint:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Open the browser's developer tools (usually by pressing \",(0,n.jsx)(e.code,{children:\"F12\"}),\" or \",(0,n.jsx)(e.code,{children:\"Ctrl+Shift+I\"}),\").\"]}),`\n`,(0,n.jsx)(e.li,{children:'Navigate to the \"Sources\" tab.'}),`\n`,(0,n.jsx)(e.li,{children:\"Find the relevant file and line of code.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Click on the line number to set a breakpoint.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Using Error Boundaries\"}),`\n`,(0,n.jsx)(e.p,{children:\"Error boundaries are React components that catch JavaScript errors in their child component tree. You can implement error boundaries in two ways:\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Using React's Built-in Class Component\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`class ErrorBoundary extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError(error) {\n    // Update state so the next render will show the fallback UI.\n    return { hasError: true };\n  }\n\n  componentDidCatch(error, info) {\n    // You can also log the error to an error reporting service\n    console.error('Error caught by error boundary:', error, info);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      // You can render any custom fallback UI\n      return <h1>Something went wrong.</h1>;\n    }\n\n    return this.props.children;\n  }\n}\n\n// Usage\nfunction App() {\n  return (\n    <ErrorBoundary>\n      <MyComponent />\n    </ErrorBoundary>\n  );\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Using react-error-boundary Package\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Alternatively, you can use the \",(0,n.jsx)(e.code,{children:\"react-error-boundary\"}),\" package for a more convenient approach:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import { ErrorBoundary } from 'react-error-boundary';\n\nfunction ErrorFallback({ error, resetErrorBoundary }) {\n  return (\n    <div role=\"alert\">\n      <p>Something went wrong:</p>\n      <pre style={{ color: 'red' }}>{error.message}</pre>\n      <button onClick={resetErrorBoundary}>Try again</button>\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <ErrorBoundary\n      FallbackComponent={ErrorFallback}\n      onReset={() => {\n        // Reset the state of your app\n      }}\n      onError={(error, info) => {\n        // Log the error to an error reporting service\n      }}\n    >\n      <MyComponent />\n    </ErrorBoundary>\n  );\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"For handling errors in event handlers or async code, you can use the \",(0,n.jsx)(e.code,{children:\"useErrorBoundary\"}),\" hook:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import { useErrorBoundary } from 'react-error-boundary';\n\nfunction MyComponent() {\n  const { showBoundary } = useErrorBoundary();\n\n  const handleAsyncError = async () => {\n    try {\n      await someAsyncOperation();\n    } catch (error) {\n      showBoundary(error);\n    }\n  };\n\n  return <button onClick={handleAsyncError}>Perform Action</button>;\n}\n`})}),`\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://react.dev/learn/react-developer-tools\",children:\"React Developer Tools\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary\",children:\"Error boundaries in React\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/tools/chrome-devtools\",children:\"Using the Chrome DevTools\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Debugging\",children:\"Debugging JavaScript\"})}),`\n`]})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(d,{...r})}):d(r)}return w(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-debug-react-applications/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-debug-react-applications/zh-CN.json
index d6af415e4..d3894bab6 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-debug-react-applications/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-debug-react-applications/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/how-do-you-debug-react-applications/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var y=(e,r)=>()=>(r||e((r={exports:{}}).exports,r),r.exports),f=(e,r)=>{for(var o in r)c(e,o,{get:r[o],enumerable:!0})},a=(e,r,o,l)=>{if(r&&typeof r==\"object\"||typeof r==\"function\")for(let t of u(r))!m.call(e,t)&&t!==o&&c(e,t,{get:()=>r[t],enumerable:!(l=p(r,t))||l.enumerable});return e};var v=(e,r,o)=>(o=e!=null?s(g(e)):{},a(r||!e||!e.__esModule?c(o,\"default\",{value:e,enumerable:!0}):o,e)),b=e=>a(c({},\"__esModule\",{value:!0}),e);var d=y((D,i)=>{i.exports=_jsx_runtime});var x={};f(x,{default:()=>R,frontmatter:()=>E});var n=v(d()),E={title:\"\\u5982\\u4F55\\u8C03\\u8BD5 React \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF1F\"};function h(e){let r=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\",pre:\"pre\",ol:\"ol\",h4:\"h4\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(r.p,{children:[\"\\u8981\\u8C03\\u8BD5 React \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 React Developer Tools \\u6D4F\\u89C8\\u5668\\u6269\\u5C55\\u7A0B\\u5E8F\\u6765\\u68C0\\u67E5\\u7EC4\\u4EF6\\u5C42\\u6B21\\u7ED3\\u6784\\u548C\\u72B6\\u6001\\u3002\\u6B64\\u5916\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(r.code,{children:\"console.log\"}),\" \\u8BED\\u53E5\\u6765\\u8BB0\\u5F55\\u6570\\u636E\\u548C\\u9519\\u8BEF\\uFF0C\\u5E76\\u5229\\u7528\\u6D4F\\u89C8\\u5668\\u5F00\\u53D1\\u8005\\u5DE5\\u5177\\u5728\\u4EE3\\u7801\\u4E2D\\u8BBE\\u7F6E\\u65AD\\u70B9\\u3002\\u5BF9\\u4E8E\\u66F4\\u9AD8\\u7EA7\\u7684\\u8C03\\u8BD5\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u9519\\u8BEF\\u8FB9\\u754C\\u6765\\u6355\\u83B7\\u548C\\u5904\\u7406\\u7EC4\\u4EF6\\u4E2D\\u7684\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsx)(r.hr,{}),`\n`,(0,n.jsx)(r.h2,{children:\"\\u5982\\u4F55\\u8C03\\u8BD5 React \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF1F\"}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u4F7F\\u7528 React Developer Tools\"}),`\n`,(0,n.jsx)(r.p,{children:\"React Developer Tools \\u6D4F\\u89C8\\u5668\\u6269\\u5C55\\u7A0B\\u5E8F\\u662F\\u4E00\\u4E2A\\u7528\\u4E8E\\u68C0\\u67E5\\u548C\\u8C03\\u8BD5 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u5F3A\\u5927\\u5DE5\\u5177\\u3002\\u5B83\\u5141\\u8BB8\\u60A8\\uFF1A\"}),`\n`,(0,n.jsxs)(r.ul,{children:[`\n`,(0,n.jsx)(r.li,{children:\"\\u68C0\\u67E5\\u7EC4\\u4EF6\\u5C42\\u6B21\\u7ED3\\u6784\"}),`\n`,(0,n.jsx)(r.li,{children:\"\\u67E5\\u770B\\u548C\\u7F16\\u8F91\\u7EC4\\u4EF6\\u72B6\\u6001\\u548C\\u5C5E\\u6027\"}),`\n`,(0,n.jsx)(r.li,{children:\"\\u8DDF\\u8E2A\\u7EC4\\u4EF6\\u91CD\\u65B0\\u6E32\\u67D3\"}),`\n`]}),`\n`,(0,n.jsxs)(r.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4ECE \",(0,n.jsx)(r.a,{href:\"https://chrome.google.com/webstore/detail/react-developer-tools\",children:\"Chrome Web Store\"}),\" \\u6216 \",(0,n.jsx)(r.a,{href:\"https://addons.mozilla.org/en-US/firefox/addon/react-devtools/\",children:\"Firefox Add-ons\"}),\" \\u5B89\\u88C5\\u8BE5\\u6269\\u5C55\\u7A0B\\u5E8F\\u3002\"]}),`\n`,(0,n.jsxs)(r.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(r.code,{children:\"console.log\"}),\" \\u8BED\\u53E5\"]}),`\n`,(0,n.jsxs)(r.p,{children:[\"\\u5728\\u4EE3\\u7801\\u4E2D\\u6DFB\\u52A0 \",(0,n.jsx)(r.code,{children:\"console.log\"}),\" \\u8BED\\u53E5\\u53EF\\u4EE5\\u5E2E\\u52A9\\u60A8\\u4E86\\u89E3\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u6D41\\u7A0B\\u5E76\\u8BC6\\u522B\\u95EE\\u9898\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:\"language-javascript\",children:`function MyComponent(props) {\n  console.log('Rendering MyComponent with props:', props);\n  return <div>{props.message}</div>;\n}\n`})}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u4F7F\\u7528\\u65AD\\u70B9\"}),`\n`,(0,n.jsx)(r.p,{children:\"\\u6D4F\\u89C8\\u5668\\u5F00\\u53D1\\u8005\\u5DE5\\u5177\\uFF08\\u4F8B\\u5982 Chrome DevTools\\uFF09\\u5141\\u8BB8\\u60A8\\u5728\\u4EE3\\u7801\\u4E2D\\u8BBE\\u7F6E\\u65AD\\u70B9\\u3002\\u8FD9\\u53EF\\u4EE5\\u5E2E\\u52A9\\u60A8\\u6682\\u505C\\u6267\\u884C\\u5E76\\u68C0\\u67E5\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u5F53\\u524D\\u72B6\\u6001\\u3002\\u8981\\u8BBE\\u7F6E\\u65AD\\u70B9\\uFF1A\"}),`\n`,(0,n.jsxs)(r.ol,{children:[`\n`,(0,n.jsxs)(r.li,{children:[\"\\u6253\\u5F00\\u6D4F\\u89C8\\u5668\\u7684\\u5F00\\u53D1\\u8005\\u5DE5\\u5177\\uFF08\\u901A\\u5E38\\u6309 \",(0,n.jsx)(r.code,{children:\"F12\"}),\" \\u6216 \",(0,n.jsx)(r.code,{children:\"Ctrl+Shift+I\"}),\"\\uFF09\\u3002\"]}),`\n`,(0,n.jsx)(r.li,{children:\"\\u5BFC\\u822A\\u5230\\u201CSources\\u201D\\u9009\\u9879\\u5361\\u3002\"}),`\n`,(0,n.jsx)(r.li,{children:\"\\u627E\\u5230\\u76F8\\u5173\\u6587\\u4EF6\\u548C\\u4EE3\\u7801\\u884C\\u3002\"}),`\n`,(0,n.jsx)(r.li,{children:\"\\u5355\\u51FB\\u884C\\u53F7\\u4EE5\\u8BBE\\u7F6E\\u65AD\\u70B9\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u4F7F\\u7528\\u9519\\u8BEF\\u8FB9\\u754C\"}),`\n`,(0,n.jsx)(r.p,{children:\"\\u9519\\u8BEF\\u8FB9\\u754C\\u662F React \\u7EC4\\u4EF6\\uFF0C\\u7528\\u4E8E\\u6355\\u83B7\\u5176\\u5B50\\u7EC4\\u4EF6\\u6811\\u4E2D\\u7684 JavaScript \\u9519\\u8BEF\\u3002\\u60A8\\u53EF\\u4EE5\\u901A\\u8FC7\\u4E24\\u79CD\\u65B9\\u5F0F\\u5B9E\\u73B0\\u9519\\u8BEF\\u8FB9\\u754C\\uFF1A\"}),`\n`,(0,n.jsx)(r.h4,{children:\"\\u4F7F\\u7528 React \\u7684\\u5185\\u7F6E\\u7C7B\\u7EC4\\u4EF6\"}),`\n`,(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:\"language-javascript\",children:`class ErrorBoundary extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError(error) {\n    // Update state so the next render will show the fallback UI.\n    return { hasError: true };\n  }\n\n  componentDidCatch(error, info) {\n    // You can also log the error to an error reporting service\n    console.error('Error caught by error boundary:', error, info);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      // You can render any custom fallback UI\n      return <h1>Something went wrong.</h1>;\n    }\n\n    return this.props.children;\n  }\n}\n\n// Usage\nfunction App() {\n  return (\n    <ErrorBoundary>\n      <MyComponent />\n    </ErrorBoundary>\n  );\n}\n`})}),`\n`,(0,n.jsx)(r.h4,{children:\"\\u4F7F\\u7528 react-error-boundary \\u5305\"}),`\n`,(0,n.jsxs)(r.p,{children:[\"\\u6216\\u8005\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(r.code,{children:\"react-error-boundary\"}),\" \\u5305\\u6765\\u83B7\\u5F97\\u66F4\\u65B9\\u4FBF\\u7684\\u65B9\\u6CD5\\uFF1A\"]}),`\n`,(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:\"language-javascript\",children:`import { ErrorBoundary } from 'react-error-boundary';\n\nfunction ErrorFallback({ error, resetErrorBoundary }) {\n  return (\n    <div role=\"alert\">\n      <p>\\u51FA\\u9519\\u4E86\\uFF1A</p>\n      <pre style={{ color: 'red' }}>{error.message}</pre>\n      <button onClick={resetErrorBoundary}>\\u91CD\\u8BD5</button>\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <ErrorBoundary\n      FallbackComponent={ErrorFallback}\n      onReset={() => {\n        // \\u91CD\\u7F6E\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u72B6\\u6001\n      }}\n      onError={(error, info) => {\n        // \\u5C06\\u9519\\u8BEF\\u8BB0\\u5F55\\u5230\\u9519\\u8BEF\\u62A5\\u544A\\u670D\\u52A1\n      }}\n    >\n      <MyComponent />\n    </ErrorBoundary>\n  );\n}\n`})}),`\n`,(0,n.jsxs)(r.p,{children:[\"\\u5BF9\\u4E8E\\u5904\\u7406\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u6216\\u5F02\\u6B65\\u4EE3\\u7801\\u4E2D\\u7684\\u9519\\u8BEF\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(r.code,{children:\"useErrorBoundary\"}),\" \\u94A9\\u5B50\\uFF1A\"]}),`\n`,(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:\"language-javascript\",children:`import { useErrorBoundary } from 'react-error-boundary';\n\nfunction MyComponent() {\n  const { showBoundary } = useErrorBoundary();\n\n  const handleAsyncError = async () => {\n    try {\n      await someAsyncOperation();\n    } catch (error) {\n      showBoundary(error);\n    }\n  };\n\n  return <button onClick={handleAsyncError}>\\u6267\\u884C\\u64CD\\u4F5C</button>;\n}\n`})}),`\n`,(0,n.jsx)(r.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(r.ul,{children:[`\n`,(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:\"https://react.dev/learn/react-developer-tools\",children:\"React Developer Tools\"})}),`\n`,(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:\"https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary\",children:\"Error boundaries in React\"})}),`\n`,(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:\"https://developers.google.com/web/tools/chrome-devtools\",children:\"Using the Chrome DevTools\"})}),`\n`,(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Debugging\",children:\"Debugging JavaScript\"})}),`\n`]})]})}function C(e={}){let{wrapper:r}=e.components||{};return r?(0,n.jsx)(r,Object.assign({},e,{children:(0,n.jsx)(h,e)})):h(e)}var R=C;return b(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(e,r)=>()=>(r||e((r={exports:{}}).exports,r),r.exports),v=(e,r)=>{for(var o in r)c(e,o,{get:r[o],enumerable:!0})},a=(e,r,o,l)=>{if(r&&typeof r==\"object\"||typeof r==\"function\")for(let t of m(r))!y.call(e,t)&&t!==o&&c(e,t,{get:()=>r[t],enumerable:!(l=u(r,t))||l.enumerable});return e};var b=(e,r,o)=>(o=e!=null?p(g(e)):{},a(r||!e||!e.__esModule?c(o,\"default\",{value:e,enumerable:!0}):o,e)),E=e=>a(c({},\"__esModule\",{value:!0}),e);var d=f((B,i)=>{i.exports=_jsx_runtime});var R={};v(R,{default:()=>s,frontmatter:()=>C});var n=b(d()),C={title:\"\\u5982\\u4F55\\u8C03\\u8BD5 React \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF1F\"};function h(e){let r={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",ul:\"ul\",...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(r.p,{children:[\"\\u8981\\u8C03\\u8BD5 React \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 React Developer Tools \\u6D4F\\u89C8\\u5668\\u6269\\u5C55\\u7A0B\\u5E8F\\u6765\\u68C0\\u67E5\\u7EC4\\u4EF6\\u5C42\\u6B21\\u7ED3\\u6784\\u548C\\u72B6\\u6001\\u3002\\u6B64\\u5916\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(r.code,{children:\"console.log\"}),\" \\u8BED\\u53E5\\u6765\\u8BB0\\u5F55\\u6570\\u636E\\u548C\\u9519\\u8BEF\\uFF0C\\u5E76\\u5229\\u7528\\u6D4F\\u89C8\\u5668\\u5F00\\u53D1\\u8005\\u5DE5\\u5177\\u5728\\u4EE3\\u7801\\u4E2D\\u8BBE\\u7F6E\\u65AD\\u70B9\\u3002\\u5BF9\\u4E8E\\u66F4\\u9AD8\\u7EA7\\u7684\\u8C03\\u8BD5\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u9519\\u8BEF\\u8FB9\\u754C\\u6765\\u6355\\u83B7\\u548C\\u5904\\u7406\\u7EC4\\u4EF6\\u4E2D\\u7684\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsx)(r.hr,{}),`\n`,(0,n.jsx)(r.h2,{children:\"\\u5982\\u4F55\\u8C03\\u8BD5 React \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF1F\"}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u4F7F\\u7528 React Developer Tools\"}),`\n`,(0,n.jsx)(r.p,{children:\"React Developer Tools \\u6D4F\\u89C8\\u5668\\u6269\\u5C55\\u7A0B\\u5E8F\\u662F\\u4E00\\u4E2A\\u7528\\u4E8E\\u68C0\\u67E5\\u548C\\u8C03\\u8BD5 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u5F3A\\u5927\\u5DE5\\u5177\\u3002\\u5B83\\u5141\\u8BB8\\u60A8\\uFF1A\"}),`\n`,(0,n.jsxs)(r.ul,{children:[`\n`,(0,n.jsx)(r.li,{children:\"\\u68C0\\u67E5\\u7EC4\\u4EF6\\u5C42\\u6B21\\u7ED3\\u6784\"}),`\n`,(0,n.jsx)(r.li,{children:\"\\u67E5\\u770B\\u548C\\u7F16\\u8F91\\u7EC4\\u4EF6\\u72B6\\u6001\\u548C\\u5C5E\\u6027\"}),`\n`,(0,n.jsx)(r.li,{children:\"\\u8DDF\\u8E2A\\u7EC4\\u4EF6\\u91CD\\u65B0\\u6E32\\u67D3\"}),`\n`]}),`\n`,(0,n.jsxs)(r.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4ECE \",(0,n.jsx)(r.a,{href:\"https://chrome.google.com/webstore/detail/react-developer-tools\",children:\"Chrome Web Store\"}),\" \\u6216 \",(0,n.jsx)(r.a,{href:\"https://addons.mozilla.org/en-US/firefox/addon/react-devtools/\",children:\"Firefox Add-ons\"}),\" \\u5B89\\u88C5\\u8BE5\\u6269\\u5C55\\u7A0B\\u5E8F\\u3002\"]}),`\n`,(0,n.jsxs)(r.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(r.code,{children:\"console.log\"}),\" \\u8BED\\u53E5\"]}),`\n`,(0,n.jsxs)(r.p,{children:[\"\\u5728\\u4EE3\\u7801\\u4E2D\\u6DFB\\u52A0 \",(0,n.jsx)(r.code,{children:\"console.log\"}),\" \\u8BED\\u53E5\\u53EF\\u4EE5\\u5E2E\\u52A9\\u60A8\\u4E86\\u89E3\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u6D41\\u7A0B\\u5E76\\u8BC6\\u522B\\u95EE\\u9898\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:\"language-javascript\",children:`function MyComponent(props) {\n  console.log('Rendering MyComponent with props:', props);\n  return <div>{props.message}</div>;\n}\n`})}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u4F7F\\u7528\\u65AD\\u70B9\"}),`\n`,(0,n.jsx)(r.p,{children:\"\\u6D4F\\u89C8\\u5668\\u5F00\\u53D1\\u8005\\u5DE5\\u5177\\uFF08\\u4F8B\\u5982 Chrome DevTools\\uFF09\\u5141\\u8BB8\\u60A8\\u5728\\u4EE3\\u7801\\u4E2D\\u8BBE\\u7F6E\\u65AD\\u70B9\\u3002\\u8FD9\\u53EF\\u4EE5\\u5E2E\\u52A9\\u60A8\\u6682\\u505C\\u6267\\u884C\\u5E76\\u68C0\\u67E5\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u5F53\\u524D\\u72B6\\u6001\\u3002\\u8981\\u8BBE\\u7F6E\\u65AD\\u70B9\\uFF1A\"}),`\n`,(0,n.jsxs)(r.ol,{children:[`\n`,(0,n.jsxs)(r.li,{children:[\"\\u6253\\u5F00\\u6D4F\\u89C8\\u5668\\u7684\\u5F00\\u53D1\\u8005\\u5DE5\\u5177\\uFF08\\u901A\\u5E38\\u6309 \",(0,n.jsx)(r.code,{children:\"F12\"}),\" \\u6216 \",(0,n.jsx)(r.code,{children:\"Ctrl+Shift+I\"}),\"\\uFF09\\u3002\"]}),`\n`,(0,n.jsx)(r.li,{children:\"\\u5BFC\\u822A\\u5230\\u201CSources\\u201D\\u9009\\u9879\\u5361\\u3002\"}),`\n`,(0,n.jsx)(r.li,{children:\"\\u627E\\u5230\\u76F8\\u5173\\u6587\\u4EF6\\u548C\\u4EE3\\u7801\\u884C\\u3002\"}),`\n`,(0,n.jsx)(r.li,{children:\"\\u5355\\u51FB\\u884C\\u53F7\\u4EE5\\u8BBE\\u7F6E\\u65AD\\u70B9\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u4F7F\\u7528\\u9519\\u8BEF\\u8FB9\\u754C\"}),`\n`,(0,n.jsx)(r.p,{children:\"\\u9519\\u8BEF\\u8FB9\\u754C\\u662F React \\u7EC4\\u4EF6\\uFF0C\\u7528\\u4E8E\\u6355\\u83B7\\u5176\\u5B50\\u7EC4\\u4EF6\\u6811\\u4E2D\\u7684 JavaScript \\u9519\\u8BEF\\u3002\\u60A8\\u53EF\\u4EE5\\u901A\\u8FC7\\u4E24\\u79CD\\u65B9\\u5F0F\\u5B9E\\u73B0\\u9519\\u8BEF\\u8FB9\\u754C\\uFF1A\"}),`\n`,(0,n.jsx)(r.h4,{children:\"\\u4F7F\\u7528 React \\u7684\\u5185\\u7F6E\\u7C7B\\u7EC4\\u4EF6\"}),`\n`,(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:\"language-javascript\",children:`class ErrorBoundary extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError(error) {\n    // Update state so the next render will show the fallback UI.\n    return { hasError: true };\n  }\n\n  componentDidCatch(error, info) {\n    // You can also log the error to an error reporting service\n    console.error('Error caught by error boundary:', error, info);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      // You can render any custom fallback UI\n      return <h1>Something went wrong.</h1>;\n    }\n\n    return this.props.children;\n  }\n}\n\n// Usage\nfunction App() {\n  return (\n    <ErrorBoundary>\n      <MyComponent />\n    </ErrorBoundary>\n  );\n}\n`})}),`\n`,(0,n.jsx)(r.h4,{children:\"\\u4F7F\\u7528 react-error-boundary \\u5305\"}),`\n`,(0,n.jsxs)(r.p,{children:[\"\\u6216\\u8005\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(r.code,{children:\"react-error-boundary\"}),\" \\u5305\\u6765\\u83B7\\u5F97\\u66F4\\u65B9\\u4FBF\\u7684\\u65B9\\u6CD5\\uFF1A\"]}),`\n`,(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:\"language-javascript\",children:`import { ErrorBoundary } from 'react-error-boundary';\n\nfunction ErrorFallback({ error, resetErrorBoundary }) {\n  return (\n    <div role=\"alert\">\n      <p>\\u51FA\\u9519\\u4E86\\uFF1A</p>\n      <pre style={{ color: 'red' }}>{error.message}</pre>\n      <button onClick={resetErrorBoundary}>\\u91CD\\u8BD5</button>\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <ErrorBoundary\n      FallbackComponent={ErrorFallback}\n      onReset={() => {\n        // \\u91CD\\u7F6E\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u72B6\\u6001\n      }}\n      onError={(error, info) => {\n        // \\u5C06\\u9519\\u8BEF\\u8BB0\\u5F55\\u5230\\u9519\\u8BEF\\u62A5\\u544A\\u670D\\u52A1\n      }}\n    >\n      <MyComponent />\n    </ErrorBoundary>\n  );\n}\n`})}),`\n`,(0,n.jsxs)(r.p,{children:[\"\\u5BF9\\u4E8E\\u5904\\u7406\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u6216\\u5F02\\u6B65\\u4EE3\\u7801\\u4E2D\\u7684\\u9519\\u8BEF\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(r.code,{children:\"useErrorBoundary\"}),\" \\u94A9\\u5B50\\uFF1A\"]}),`\n`,(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:\"language-javascript\",children:`import { useErrorBoundary } from 'react-error-boundary';\n\nfunction MyComponent() {\n  const { showBoundary } = useErrorBoundary();\n\n  const handleAsyncError = async () => {\n    try {\n      await someAsyncOperation();\n    } catch (error) {\n      showBoundary(error);\n    }\n  };\n\n  return <button onClick={handleAsyncError}>\\u6267\\u884C\\u64CD\\u4F5C</button>;\n}\n`})}),`\n`,(0,n.jsx)(r.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(r.ul,{children:[`\n`,(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:\"https://react.dev/learn/react-developer-tools\",children:\"React Developer Tools\"})}),`\n`,(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:\"https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary\",children:\"Error boundaries in React\"})}),`\n`,(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:\"https://developers.google.com/web/tools/chrome-devtools\",children:\"Using the Chrome DevTools\"})}),`\n`,(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Debugging\",children:\"Debugging JavaScript\"})}),`\n`]})]})}function s(e={}){let{wrapper:r}=e.components||{};return r?(0,n.jsx)(r,{...e,children:(0,n.jsx)(h,{...e})}):h(e)}return E(R);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-decide-between-using-react-state-context-and-external-state-managers/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-decide-between-using-react-state-context-and-external-state-managers/en-US.json
index 46929e253..ae13c165d 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-decide-between-using-react-state-context-and-external-state-managers/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-decide-between-using-react-state-context-and-external-state-managers/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/how-do-you-decide-between-using-react-state-context-and-external-state-managers/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var o in e)a(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!g.call(t,r)&&r!==o&&a(t,r,{get:()=>e[r],enumerable:!(s=m(e,r))||s.enumerable});return t};var v=(t,e,o)=>(o=t!=null?h(p(t)):{},c(e||!t||!t.__esModule?a(o,\"default\",{value:t,enumerable:!0}):o,t)),b=t=>c(a({},\"__esModule\",{value:!0}),t);var d=x((j,i)=>{i.exports=_jsx_runtime});var w={};f(w,{default:()=>y,frontmatter:()=>C});var n=v(d()),C={title:\"How do you decide between using React state, context, and external state managers?\"};function l(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",pre:\"pre\",code:\"code\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Choosing between React state, context, and external state managers depends on the complexity and scope of your application's state management needs. Use React state for local component state, React context for global state that needs to be shared across multiple components, and external state managers like Redux or MobX for complex state management that requires advanced features like middleware, time-travel debugging, or when the state needs to be shared across a large application.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Deciding between React state, context, and external state managers\"}),`\n`,(0,n.jsx)(e.h3,{children:\"React state\"}),`\n`,(0,n.jsx)(e.p,{children:\"React state is best suited for managing local state within a single component. It is simple to use and provides a straightforward way to handle state that does not need to be shared across multiple components.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"When to use React state\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"When the state is only relevant to a single component\"}),`\n`,(0,n.jsx)(e.li,{children:\"When the state does not need to be accessed or modified by other components\"}),`\n`,(0,n.jsx)(e.li,{children:\"When you want to keep the component self-contained and easy to understand\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(count + 1)}>Increment</button>\n    </div>\n  );\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"React context\"}),`\n`,(0,n.jsx)(e.p,{children:\"React context is useful for sharing state across multiple components without having to pass props down through every level of the component tree. It is ideal for global state that needs to be accessed by many components.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"When to use React context\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"When you need to share state across multiple components\"}),`\n`,(0,n.jsx)(e.li,{children:\"When you want to avoid prop drilling (passing props through many levels of components)\"}),`\n`,(0,n.jsx)(e.li,{children:\"When the state is relatively simple and does not require advanced state management features\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { createContext, useContext, useState } from 'react';\n\nconst ThemeContext = createContext();\n\nfunction ThemeProvider({ children }) {\n  const [theme, setTheme] = useState('light');\n\n  return (\n    <ThemeContext.Provider value={{ theme, setTheme }}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\nfunction ThemedComponent() {\n  const { theme, setTheme } = useContext(ThemeContext);\n\n  return (\n    <div>\n      <p>Current theme: {theme}</p>\n      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>\n        Toggle Theme\n      </button>\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <ThemeProvider>\n      <ThemedComponent />\n    </ThemeProvider>\n  );\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"External state managers\"}),`\n`,(0,n.jsx)(e.p,{children:\"External state managers like Redux or MobX are designed for complex state management needs. They provide advanced features such as middleware, time-travel debugging, and the ability to manage state across a large application.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"When to use external state managers\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"When the state management needs are complex and involve many interconnected pieces of state\"}),`\n`,(0,n.jsx)(e.li,{children:\"When you need advanced features like middleware, time-travel debugging, or dev tools\"}),`\n`,(0,n.jsx)(e.li,{children:\"When the state needs to be shared across a large application with many components\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example with Redux\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`// actions.js\nexport const increment = () => ({ type: 'INCREMENT' });\n\n// reducer.js\nconst initialState = { count: 0 };\n\nfunction counterReducer(state = initialState, action) {\n  switch (action.type) {\n    case 'INCREMENT':\n      return { ...state, count: state.count + 1 };\n    default:\n      return state;\n  }\n}\n\nexport default counterReducer;\n\n// store.js\nimport { createStore } from 'redux';\nimport counterReducer from './reducer';\n\nconst store = createStore(counterReducer);\n\nexport default store;\n\n// Counter.js\nimport React from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { increment } from './actions';\n\nfunction Counter() {\n  const count = useSelector((state) => state.count);\n  const dispatch = useDispatch();\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => dispatch(increment())}>Increment</button>\n    </div>\n  );\n}\n\n// App.js\nimport React from 'react';\nimport { Provider } from 'react-redux';\nimport store from './store';\nimport Counter from './Counter';\n\nfunction App() {\n  return (\n    <Provider store={store}>\n      <Counter />\n    </Provider>\n  );\n}\n`})}),`\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://react.dev/learn/state-a-components-memory\",children:\"React documentation on state\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/passing-data-deeply-with-context\",children:\"React documentation on context\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://redux.js.org/\",children:\"Redux documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://mobx.js.org/README.html\",children:\"MobX documentation\"})}),`\n`]})]})}function R(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(l,t)})):l(t)}var y=R;return b(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var o in e)a(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!x.call(t,r)&&r!==o&&a(t,r,{get:()=>e[r],enumerable:!(s=u(e,r))||s.enumerable});return t};var C=(t,e,o)=>(o=t!=null?m(g(t)):{},c(e||!t||!t.__esModule?a(o,\"default\",{value:t,enumerable:!0}):o,t)),R=t=>c(a({},\"__esModule\",{value:!0}),t);var d=f((T,i)=>{i.exports=_jsx_runtime});var y={};v(y,{default:()=>h,frontmatter:()=>b});var n=C(d()),b={title:\"How do you decide between using React state, context, and external state managers?\"};function l(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Choosing between React state, context, and external state managers depends on the complexity and scope of your application's state management needs. Use React state for local component state, React context for global state that needs to be shared across multiple components, and external state managers like Redux or MobX for complex state management that requires advanced features like middleware, time-travel debugging, or when the state needs to be shared across a large application.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Deciding between React state, context, and external state managers\"}),`\n`,(0,n.jsx)(e.h3,{children:\"React state\"}),`\n`,(0,n.jsx)(e.p,{children:\"React state is best suited for managing local state within a single component. It is simple to use and provides a straightforward way to handle state that does not need to be shared across multiple components.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"When to use React state\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"When the state is only relevant to a single component\"}),`\n`,(0,n.jsx)(e.li,{children:\"When the state does not need to be accessed or modified by other components\"}),`\n`,(0,n.jsx)(e.li,{children:\"When you want to keep the component self-contained and easy to understand\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(count + 1)}>Increment</button>\n    </div>\n  );\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"React context\"}),`\n`,(0,n.jsx)(e.p,{children:\"React context is useful for sharing state across multiple components without having to pass props down through every level of the component tree. It is ideal for global state that needs to be accessed by many components.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"When to use React context\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"When you need to share state across multiple components\"}),`\n`,(0,n.jsx)(e.li,{children:\"When you want to avoid prop drilling (passing props through many levels of components)\"}),`\n`,(0,n.jsx)(e.li,{children:\"When the state is relatively simple and does not require advanced state management features\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { createContext, useContext, useState } from 'react';\n\nconst ThemeContext = createContext();\n\nfunction ThemeProvider({ children }) {\n  const [theme, setTheme] = useState('light');\n\n  return (\n    <ThemeContext.Provider value={{ theme, setTheme }}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\nfunction ThemedComponent() {\n  const { theme, setTheme } = useContext(ThemeContext);\n\n  return (\n    <div>\n      <p>Current theme: {theme}</p>\n      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>\n        Toggle Theme\n      </button>\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <ThemeProvider>\n      <ThemedComponent />\n    </ThemeProvider>\n  );\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"External state managers\"}),`\n`,(0,n.jsx)(e.p,{children:\"External state managers like Redux or MobX are designed for complex state management needs. They provide advanced features such as middleware, time-travel debugging, and the ability to manage state across a large application.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"When to use external state managers\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"When the state management needs are complex and involve many interconnected pieces of state\"}),`\n`,(0,n.jsx)(e.li,{children:\"When you need advanced features like middleware, time-travel debugging, or dev tools\"}),`\n`,(0,n.jsx)(e.li,{children:\"When the state needs to be shared across a large application with many components\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example with Redux\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`// actions.js\nexport const increment = () => ({ type: 'INCREMENT' });\n\n// reducer.js\nconst initialState = { count: 0 };\n\nfunction counterReducer(state = initialState, action) {\n  switch (action.type) {\n    case 'INCREMENT':\n      return { ...state, count: state.count + 1 };\n    default:\n      return state;\n  }\n}\n\nexport default counterReducer;\n\n// store.js\nimport { createStore } from 'redux';\nimport counterReducer from './reducer';\n\nconst store = createStore(counterReducer);\n\nexport default store;\n\n// Counter.js\nimport React from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { increment } from './actions';\n\nfunction Counter() {\n  const count = useSelector((state) => state.count);\n  const dispatch = useDispatch();\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => dispatch(increment())}>Increment</button>\n    </div>\n  );\n}\n\n// App.js\nimport React from 'react';\nimport { Provider } from 'react-redux';\nimport store from './store';\nimport Counter from './Counter';\n\nfunction App() {\n  return (\n    <Provider store={store}>\n      <Counter />\n    </Provider>\n  );\n}\n`})}),`\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://react.dev/learn/state-a-components-memory\",children:\"React documentation on state\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/passing-data-deeply-with-context\",children:\"React documentation on context\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://redux.js.org/\",children:\"Redux documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://mobx.js.org/README.html\",children:\"MobX documentation\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}return R(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-decide-between-using-react-state-context-and-external-state-managers/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-decide-between-using-react-state-context-and-external-state-managers/zh-CN.json
index 63cc6c765..1267df50d 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-decide-between-using-react-state-context-and-external-state-managers/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-decide-between-using-react-state-context-and-external-state-managers/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/how-do-you-decide-between-using-react-state-context-and-external-state-managers/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var f=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),R=(t,n)=>{for(var r in n)o(t,r,{get:n[r],enumerable:!0})},h=(t,n,r,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of m(n))!x.call(t,c)&&c!==r&&o(t,c,{get:()=>n[c],enumerable:!(i=u(n,c))||i.enumerable});return t};var C=(t,n,r)=>(r=t!=null?s(p(t)):{},h(n||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),j=t=>h(o({},\"__esModule\",{value:!0}),t);var d=f((M,a)=>{a.exports=_jsx_runtime});var b={};R(b,{default:()=>T,frontmatter:()=>v});var e=C(d()),v={title:\"\\u60A8\\u5982\\u4F55\\u51B3\\u5B9A\\u4F7F\\u7528 React \\u72B6\\u6001\\u3001\\u4E0A\\u4E0B\\u6587\\u548C\\u5916\\u90E8\\u72B6\\u6001\\u7BA1\\u7406\\u5668\\uFF1F\"};function l(t){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",pre:\"pre\",code:\"code\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 React \\u72B6\\u6001\\u3001\\u4E0A\\u4E0B\\u6587\\u548C\\u5916\\u90E8\\u72B6\\u6001\\u7BA1\\u7406\\u5668\\u4E4B\\u95F4\\u8FDB\\u884C\\u9009\\u62E9\\u53D6\\u51B3\\u4E8E\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u72B6\\u6001\\u7BA1\\u7406\\u9700\\u6C42\\u7684\\u590D\\u6742\\u6027\\u548C\\u8303\\u56F4\\u3002\\u5C06 React \\u72B6\\u6001\\u7528\\u4E8E\\u672C\\u5730\\u7EC4\\u4EF6\\u72B6\\u6001\\uFF0C\\u5C06 React \\u4E0A\\u4E0B\\u6587\\u7528\\u4E8E\\u9700\\u8981\\u5728\\u591A\\u4E2A\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u5171\\u4EAB\\u7684\\u5168\\u5C40\\u72B6\\u6001\\uFF0C\\u5C06 Redux \\u6216 MobX \\u7B49\\u5916\\u90E8\\u72B6\\u6001\\u7BA1\\u7406\\u5668\\u7528\\u4E8E\\u9700\\u8981\\u9AD8\\u7EA7\\u529F\\u80FD\\uFF08\\u5982\\u4E2D\\u95F4\\u4EF6\\u3001\\u65F6\\u95F4\\u65C5\\u884C\\u8C03\\u8BD5\\uFF09\\u6216\\u9700\\u8981\\u5728\\u5927\\u578B\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E4B\\u95F4\\u5171\\u4EAB\\u72B6\\u6001\\u7684\\u590D\\u6742\\u72B6\\u6001\\u7BA1\\u7406\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u51B3\\u5B9A\\u4F7F\\u7528 React \\u72B6\\u6001\\u3001\\u4E0A\\u4E0B\\u6587\\u548C\\u5916\\u90E8\\u72B6\\u6001\\u7BA1\\u7406\\u5668\"}),`\n`,(0,e.jsx)(n.h3,{children:\"React \\u72B6\\u6001\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u72B6\\u6001\\u6700\\u9002\\u5408\\u7528\\u4E8E\\u7BA1\\u7406\\u5355\\u4E2A\\u7EC4\\u4EF6\\u4E2D\\u7684\\u672C\\u5730\\u72B6\\u6001\\u3002\\u5B83\\u6613\\u4E8E\\u4F7F\\u7528\\uFF0C\\u5E76\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u76F4\\u63A5\\u7684\\u65B9\\u5F0F\\u6765\\u5904\\u7406\\u4E0D\\u9700\\u8981\\u5728\\u591A\\u4E2A\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u5171\\u4EAB\\u7684\\u72B6\\u6001\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F55\\u65F6\\u4F7F\\u7528 React \\u72B6\\u6001\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u72B6\\u6001\\u4EC5\\u4E0E\\u5355\\u4E2A\\u7EC4\\u4EF6\\u76F8\\u5173\\u65F6\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u72B6\\u6001\\u4E0D\\u9700\\u8981\\u88AB\\u5176\\u4ED6\\u7EC4\\u4EF6\\u8BBF\\u95EE\\u6216\\u4FEE\\u6539\\u65F6\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u60A8\\u5E0C\\u671B\\u4FDD\\u6301\\u7EC4\\u4EF6\\u81EA\\u5305\\u542B\\u4E14\\u6613\\u4E8E\\u7406\\u89E3\\u65F6\"}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`import React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(count + 1)}>Increment</button>\n    </div>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"React \\u4E0A\\u4E0B\\u6587\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u4E0A\\u4E0B\\u6587\\u5BF9\\u4E8E\\u5728\\u591A\\u4E2A\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u5171\\u4EAB\\u72B6\\u6001\\u975E\\u5E38\\u6709\\u7528\\uFF0C\\u800C\\u65E0\\u9700\\u901A\\u8FC7\\u7EC4\\u4EF6\\u6811\\u7684\\u6BCF\\u4E00\\u5C42\\u4F20\\u9012 props\\u3002\\u5B83\\u975E\\u5E38\\u9002\\u5408\\u9700\\u8981\\u88AB\\u8BB8\\u591A\\u7EC4\\u4EF6\\u8BBF\\u95EE\\u7684\\u5168\\u5C40\\u72B6\\u6001\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F55\\u65F6\\u4F7F\\u7528 React \\u4E0A\\u4E0B\\u6587\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u60A8\\u9700\\u8981\\u5728\\u591A\\u4E2A\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u5171\\u4EAB\\u72B6\\u6001\\u65F6\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u60A8\\u60F3\\u907F\\u514D prop \\u94BB\\u53D6\\uFF08\\u901A\\u8FC7\\u591A\\u5C42\\u7EC4\\u4EF6\\u4F20\\u9012 props\\uFF09\\u65F6\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u72B6\\u6001\\u76F8\\u5BF9\\u7B80\\u5355\\u4E14\\u4E0D\\u9700\\u8981\\u9AD8\\u7EA7\\u72B6\\u6001\\u7BA1\\u7406\\u529F\\u80FD\\u65F6\"}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`import React, { createContext, useContext, useState } from 'react';\n\nconst ThemeContext = createContext();\n\nfunction ThemeProvider({ children }) {\n  const [theme, setTheme] = useState('light');\n\n  return (\n    <ThemeContext.Provider value={{ theme, setTheme }}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\nfunction ThemedComponent() {\n  const { theme, setTheme } = useContext(ThemeContext);\n\n  return (\n    <div>\n      <p>Current theme: {theme}</p>\n      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>\n        \\u5207\\u6362\\u4E3B\\u9898\n      </button>\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <ThemeProvider>\n      <ThemedComponent />\n    </ThemeProvider>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5916\\u90E8\\u72B6\\u6001\\u7BA1\\u7406\\u5668\"}),`\n`,(0,e.jsx)(n.p,{children:\"Redux \\u6216 MobX \\u7B49\\u5916\\u90E8\\u72B6\\u6001\\u7BA1\\u7406\\u5668\\u4E13\\u4E3A\\u590D\\u6742\\u7684\\u72B6\\u6001\\u7BA1\\u7406\\u9700\\u6C42\\u800C\\u8BBE\\u8BA1\\u3002\\u5B83\\u4EEC\\u63D0\\u4F9B\\u9AD8\\u7EA7\\u529F\\u80FD\\uFF0C\\u4F8B\\u5982\\u4E2D\\u95F4\\u4EF6\\u3001\\u65F6\\u95F4\\u65C5\\u884C\\u8C03\\u8BD5\\u4EE5\\u53CA\\u5728\\u5927\\u578B\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7BA1\\u7406\\u72B6\\u6001\\u7684\\u80FD\\u529B\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F55\\u65F6\\u4F7F\\u7528\\u5916\\u90E8\\u72B6\\u6001\\u7BA1\\u7406\\u5668\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u72B6\\u6001\\u7BA1\\u7406\\u9700\\u6C42\\u590D\\u6742\\u5E76\\u6D89\\u53CA\\u8BB8\\u591A\\u76F8\\u4E92\\u5173\\u8054\\u7684\\u72B6\\u6001\\u65F6\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u60A8\\u9700\\u8981\\u9AD8\\u7EA7\\u529F\\u80FD\\uFF08\\u5982\\u4E2D\\u95F4\\u4EF6\\u3001\\u65F6\\u95F4\\u65C5\\u884C\\u8C03\\u8BD5\\u6216\\u5F00\\u53D1\\u5DE5\\u5177\\uFF09\\u65F6\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u9700\\u8981\\u5728\\u5177\\u6709\\u8BB8\\u591A\\u7EC4\\u4EF6\\u7684\\u5927\\u578B\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E4B\\u95F4\\u5171\\u4EAB\\u72B6\\u6001\\u65F6\"}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"Redux \\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`// actions.js\nexport const increment = () => ({ type: 'INCREMENT' });\n\n// reducer.js\nconst initialState = { count: 0 };\n\nfunction counterReducer(state = initialState, action) {\n  switch (action.type) {\n    case 'INCREMENT':\n      return { ...state, count: state.count + 1 };\n    default:\n      return state;\n  }\n}\n\nexport default counterReducer;\n\n// store.js\nimport { createStore } from 'redux';\nimport counterReducer from './reducer';\n\nconst store = createStore(counterReducer);\n\nexport default store;\n\n// Counter.js\nimport React from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { increment } from './actions';\n\nfunction Counter() {\n  const count = useSelector((state) => state.count);\n  const dispatch = useDispatch();\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => dispatch(increment())}>Increment</button>\n    </div>\n  );\n}\n\n// App.js\nimport React from 'react';\nimport { Provider } from 'react-redux';\nimport store from './store';\nimport Counter from './Counter';\n\nfunction App() {\n  return (\n    <Provider store={store}>\n      <Counter />\n    </Provider>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React \\u72B6\\u6001\\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/passing-data-deeply-with-context\",children:\"React \\u4E0A\\u4E0B\\u6587\\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://redux.js.org/\",children:\"Redux \\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://mobx.js.org/README.html\",children:\"MobX \\u6587\\u6863\"})}),`\n`]})]})}function g(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(l,t)})):l(t)}var T=g;return j(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var R=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),C=(t,n)=>{for(var r in n)o(t,r,{get:n[r],enumerable:!0})},h=(t,n,r,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of p(n))!f.call(t,c)&&c!==r&&o(t,c,{get:()=>n[c],enumerable:!(i=m(n,c))||i.enumerable});return t};var v=(t,n,r)=>(r=t!=null?s(x(t)):{},h(n||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),T=t=>h(o({},\"__esModule\",{value:!0}),t);var l=R((S,d)=>{d.exports=_jsx_runtime});var g={};C(g,{default:()=>u,frontmatter:()=>j});var e=v(l()),j={title:\"\\u60A8\\u5982\\u4F55\\u51B3\\u5B9A\\u4F7F\\u7528 React \\u72B6\\u6001\\u3001\\u4E0A\\u4E0B\\u6587\\u548C\\u5916\\u90E8\\u72B6\\u6001\\u7BA1\\u7406\\u5668\\uFF1F\"};function a(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 React \\u72B6\\u6001\\u3001\\u4E0A\\u4E0B\\u6587\\u548C\\u5916\\u90E8\\u72B6\\u6001\\u7BA1\\u7406\\u5668\\u4E4B\\u95F4\\u8FDB\\u884C\\u9009\\u62E9\\u53D6\\u51B3\\u4E8E\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u72B6\\u6001\\u7BA1\\u7406\\u9700\\u6C42\\u7684\\u590D\\u6742\\u6027\\u548C\\u8303\\u56F4\\u3002\\u5C06 React \\u72B6\\u6001\\u7528\\u4E8E\\u672C\\u5730\\u7EC4\\u4EF6\\u72B6\\u6001\\uFF0C\\u5C06 React \\u4E0A\\u4E0B\\u6587\\u7528\\u4E8E\\u9700\\u8981\\u5728\\u591A\\u4E2A\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u5171\\u4EAB\\u7684\\u5168\\u5C40\\u72B6\\u6001\\uFF0C\\u5C06 Redux \\u6216 MobX \\u7B49\\u5916\\u90E8\\u72B6\\u6001\\u7BA1\\u7406\\u5668\\u7528\\u4E8E\\u9700\\u8981\\u9AD8\\u7EA7\\u529F\\u80FD\\uFF08\\u5982\\u4E2D\\u95F4\\u4EF6\\u3001\\u65F6\\u95F4\\u65C5\\u884C\\u8C03\\u8BD5\\uFF09\\u6216\\u9700\\u8981\\u5728\\u5927\\u578B\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E4B\\u95F4\\u5171\\u4EAB\\u72B6\\u6001\\u7684\\u590D\\u6742\\u72B6\\u6001\\u7BA1\\u7406\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u51B3\\u5B9A\\u4F7F\\u7528 React \\u72B6\\u6001\\u3001\\u4E0A\\u4E0B\\u6587\\u548C\\u5916\\u90E8\\u72B6\\u6001\\u7BA1\\u7406\\u5668\"}),`\n`,(0,e.jsx)(n.h3,{children:\"React \\u72B6\\u6001\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u72B6\\u6001\\u6700\\u9002\\u5408\\u7528\\u4E8E\\u7BA1\\u7406\\u5355\\u4E2A\\u7EC4\\u4EF6\\u4E2D\\u7684\\u672C\\u5730\\u72B6\\u6001\\u3002\\u5B83\\u6613\\u4E8E\\u4F7F\\u7528\\uFF0C\\u5E76\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u76F4\\u63A5\\u7684\\u65B9\\u5F0F\\u6765\\u5904\\u7406\\u4E0D\\u9700\\u8981\\u5728\\u591A\\u4E2A\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u5171\\u4EAB\\u7684\\u72B6\\u6001\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F55\\u65F6\\u4F7F\\u7528 React \\u72B6\\u6001\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u72B6\\u6001\\u4EC5\\u4E0E\\u5355\\u4E2A\\u7EC4\\u4EF6\\u76F8\\u5173\\u65F6\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u72B6\\u6001\\u4E0D\\u9700\\u8981\\u88AB\\u5176\\u4ED6\\u7EC4\\u4EF6\\u8BBF\\u95EE\\u6216\\u4FEE\\u6539\\u65F6\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u60A8\\u5E0C\\u671B\\u4FDD\\u6301\\u7EC4\\u4EF6\\u81EA\\u5305\\u542B\\u4E14\\u6613\\u4E8E\\u7406\\u89E3\\u65F6\"}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`import React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(count + 1)}>Increment</button>\n    </div>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"React \\u4E0A\\u4E0B\\u6587\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u4E0A\\u4E0B\\u6587\\u5BF9\\u4E8E\\u5728\\u591A\\u4E2A\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u5171\\u4EAB\\u72B6\\u6001\\u975E\\u5E38\\u6709\\u7528\\uFF0C\\u800C\\u65E0\\u9700\\u901A\\u8FC7\\u7EC4\\u4EF6\\u6811\\u7684\\u6BCF\\u4E00\\u5C42\\u4F20\\u9012 props\\u3002\\u5B83\\u975E\\u5E38\\u9002\\u5408\\u9700\\u8981\\u88AB\\u8BB8\\u591A\\u7EC4\\u4EF6\\u8BBF\\u95EE\\u7684\\u5168\\u5C40\\u72B6\\u6001\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F55\\u65F6\\u4F7F\\u7528 React \\u4E0A\\u4E0B\\u6587\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u60A8\\u9700\\u8981\\u5728\\u591A\\u4E2A\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u5171\\u4EAB\\u72B6\\u6001\\u65F6\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u60A8\\u60F3\\u907F\\u514D prop \\u94BB\\u53D6\\uFF08\\u901A\\u8FC7\\u591A\\u5C42\\u7EC4\\u4EF6\\u4F20\\u9012 props\\uFF09\\u65F6\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u72B6\\u6001\\u76F8\\u5BF9\\u7B80\\u5355\\u4E14\\u4E0D\\u9700\\u8981\\u9AD8\\u7EA7\\u72B6\\u6001\\u7BA1\\u7406\\u529F\\u80FD\\u65F6\"}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`import React, { createContext, useContext, useState } from 'react';\n\nconst ThemeContext = createContext();\n\nfunction ThemeProvider({ children }) {\n  const [theme, setTheme] = useState('light');\n\n  return (\n    <ThemeContext.Provider value={{ theme, setTheme }}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\nfunction ThemedComponent() {\n  const { theme, setTheme } = useContext(ThemeContext);\n\n  return (\n    <div>\n      <p>Current theme: {theme}</p>\n      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>\n        \\u5207\\u6362\\u4E3B\\u9898\n      </button>\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <ThemeProvider>\n      <ThemedComponent />\n    </ThemeProvider>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5916\\u90E8\\u72B6\\u6001\\u7BA1\\u7406\\u5668\"}),`\n`,(0,e.jsx)(n.p,{children:\"Redux \\u6216 MobX \\u7B49\\u5916\\u90E8\\u72B6\\u6001\\u7BA1\\u7406\\u5668\\u4E13\\u4E3A\\u590D\\u6742\\u7684\\u72B6\\u6001\\u7BA1\\u7406\\u9700\\u6C42\\u800C\\u8BBE\\u8BA1\\u3002\\u5B83\\u4EEC\\u63D0\\u4F9B\\u9AD8\\u7EA7\\u529F\\u80FD\\uFF0C\\u4F8B\\u5982\\u4E2D\\u95F4\\u4EF6\\u3001\\u65F6\\u95F4\\u65C5\\u884C\\u8C03\\u8BD5\\u4EE5\\u53CA\\u5728\\u5927\\u578B\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7BA1\\u7406\\u72B6\\u6001\\u7684\\u80FD\\u529B\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F55\\u65F6\\u4F7F\\u7528\\u5916\\u90E8\\u72B6\\u6001\\u7BA1\\u7406\\u5668\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u72B6\\u6001\\u7BA1\\u7406\\u9700\\u6C42\\u590D\\u6742\\u5E76\\u6D89\\u53CA\\u8BB8\\u591A\\u76F8\\u4E92\\u5173\\u8054\\u7684\\u72B6\\u6001\\u65F6\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u60A8\\u9700\\u8981\\u9AD8\\u7EA7\\u529F\\u80FD\\uFF08\\u5982\\u4E2D\\u95F4\\u4EF6\\u3001\\u65F6\\u95F4\\u65C5\\u884C\\u8C03\\u8BD5\\u6216\\u5F00\\u53D1\\u5DE5\\u5177\\uFF09\\u65F6\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u9700\\u8981\\u5728\\u5177\\u6709\\u8BB8\\u591A\\u7EC4\\u4EF6\\u7684\\u5927\\u578B\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E4B\\u95F4\\u5171\\u4EAB\\u72B6\\u6001\\u65F6\"}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"Redux \\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`// actions.js\nexport const increment = () => ({ type: 'INCREMENT' });\n\n// reducer.js\nconst initialState = { count: 0 };\n\nfunction counterReducer(state = initialState, action) {\n  switch (action.type) {\n    case 'INCREMENT':\n      return { ...state, count: state.count + 1 };\n    default:\n      return state;\n  }\n}\n\nexport default counterReducer;\n\n// store.js\nimport { createStore } from 'redux';\nimport counterReducer from './reducer';\n\nconst store = createStore(counterReducer);\n\nexport default store;\n\n// Counter.js\nimport React from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { increment } from './actions';\n\nfunction Counter() {\n  const count = useSelector((state) => state.count);\n  const dispatch = useDispatch();\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => dispatch(increment())}>Increment</button>\n    </div>\n  );\n}\n\n// App.js\nimport React from 'react';\nimport { Provider } from 'react-redux';\nimport store from './store';\nimport Counter from './Counter';\n\nfunction App() {\n  return (\n    <Provider store={store}>\n      <Counter />\n    </Provider>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React \\u72B6\\u6001\\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/passing-data-deeply-with-context\",children:\"React \\u4E0A\\u4E0B\\u6587\\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://redux.js.org/\",children:\"Redux \\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://mobx.js.org/README.html\",children:\"MobX \\u6587\\u6863\"})}),`\n`]})]})}function u(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(a,{...t})}):a(t)}return T(g);})();\n;return Component;"
 }
\ No newline at end of file
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 7c05b17c5..a045194aa 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},o=(t,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!u.call(t,r)&&r!==i&&a(t,r,{get:()=>e[r],enumerable:!(s=p(e,r))||s.enumerable});return t};var w=(t,e,i)=>(i=t!=null?d(g(t)):{},o(e||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),v=t=>o(a({},\"__esModule\",{value:!0}),t);var l=b((M,c)=>{c.exports=_jsx_runtime});var J={};f(J,{default:()=>x,frontmatter:()=>y});var n=w(l()),y={title:\"How do you detect if JavaScript is disabled on a page?\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",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:[\"To detect if JavaScript is disabled on a page, you can use the \",(0,n.jsx)(e.code,{children:\"<noscript>\"}),\" HTML tag. This tag allows you to display content or messages to users who have JavaScript disabled in their browsers. For example, you can include a message within the \",(0,n.jsx)(e.code,{children:\"<noscript>\"}),\" tag to inform users that JavaScript is required for the full functionality of the page.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<noscript>\n  <p>\n    JavaScript is disabled in your browser. Please enable JavaScript for the\n    best experience.\n  </p>\n</noscript>\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"<noscript>\"}),\" tag\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"What is the \",(0,n.jsx)(e.code,{children:\"<noscript>\"}),\" tag?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"<noscript>\"}),\" tag is an HTML element that provides an alternative content for users who have disabled JavaScript in their browsers. This tag is useful for informing users that certain features of the website may not work properly without JavaScript.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example usage\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here is an example of how to use the \",(0,n.jsx)(e.code,{children:\"<noscript>\"}),\" tag to display a message to users with JavaScript disabled:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!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    <title>JavaScript Detection</title>\n  </head>\n  <body>\n    <h1>Welcome to our website</h1>\n    <noscript>\n      <p>\n        JavaScript is disabled in your browser. Please enable JavaScript for the\n        best experience.\n      </p>\n    </noscript>\n    <p>This content is visible to all users.</p>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the message inside the \",(0,n.jsx)(e.code,{children:\"<noscript>\"}),\" tag will only be displayed if JavaScript is disabled. If JavaScript is enabled, the content inside the \",(0,n.jsx)(e.code,{children:\"<noscript>\"}),\" tag will be ignored.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Styling the \",(0,n.jsx)(e.code,{children:\"<noscript>\"}),\" content\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can also style the content inside the \",(0,n.jsx)(e.code,{children:\"<noscript>\"}),\" tag using CSS to make it more noticeable. For example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<noscript>\n  <style>\n    .noscript-message {\n      color: red;\n      font-weight: bold;\n    }\n  </style>\n  <p class=\"noscript-message\">\n    JavaScript is disabled in your browser. Please enable JavaScript for the\n    best experience.\n  </p>\n</noscript>\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"In this example, the message will be styled with red text and bold font to make it stand out.\"}),`\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.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript\",children:[\"MDN Web Docs: \",(0,n.jsx)(e.code,{children:\"<noscript>\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://www.w3schools.com/tags/tag_noscript.asp\",children:[\"W3Schools: HTML \",(0,n.jsx)(e.code,{children:\"<noscript>\"}),\" Tag\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://caniuse.com/?search=noscript\",children:[\"Can I use: \",(0,n.jsx)(e.code,{children:\"<noscript>\"})]})}),`\n`]})]})}function S(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var x=S;return v(J);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},o=(t,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!b.call(t,r)&&r!==i&&a(t,r,{get:()=>e[r],enumerable:!(s=m(e,r))||s.enumerable});return t};var v=(t,e,i)=>(i=t!=null?p(g(t)):{},o(e||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),y=t=>o(a({},\"__esModule\",{value:!0}),t);var l=f((T,c)=>{c.exports=_jsx_runtime});var x={};w(x,{default:()=>d,frontmatter:()=>S});var n=v(l()),S={title:\"How do you detect if JavaScript is disabled on a page?\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To detect if JavaScript is disabled on a page, you can use the \",(0,n.jsx)(e.code,{children:\"<noscript>\"}),\" HTML tag. This tag allows you to display content or messages to users who have JavaScript disabled in their browsers. For example, you can include a message within the \",(0,n.jsx)(e.code,{children:\"<noscript>\"}),\" tag to inform users that JavaScript is required for the full functionality of the page.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<noscript>\n  <p>\n    JavaScript is disabled in your browser. Please enable JavaScript for the\n    best experience.\n  </p>\n</noscript>\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"<noscript>\"}),\" tag\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"What is the \",(0,n.jsx)(e.code,{children:\"<noscript>\"}),\" tag?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"<noscript>\"}),\" tag is an HTML element that provides an alternative content for users who have disabled JavaScript in their browsers. This tag is useful for informing users that certain features of the website may not work properly without JavaScript.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example usage\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here is an example of how to use the \",(0,n.jsx)(e.code,{children:\"<noscript>\"}),\" tag to display a message to users with JavaScript disabled:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!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    <title>JavaScript Detection</title>\n  </head>\n  <body>\n    <h1>Welcome to our website</h1>\n    <noscript>\n      <p>\n        JavaScript is disabled in your browser. Please enable JavaScript for the\n        best experience.\n      </p>\n    </noscript>\n    <p>This content is visible to all users.</p>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the message inside the \",(0,n.jsx)(e.code,{children:\"<noscript>\"}),\" tag will only be displayed if JavaScript is disabled. If JavaScript is enabled, the content inside the \",(0,n.jsx)(e.code,{children:\"<noscript>\"}),\" tag will be ignored.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Styling the \",(0,n.jsx)(e.code,{children:\"<noscript>\"}),\" content\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can also style the content inside the \",(0,n.jsx)(e.code,{children:\"<noscript>\"}),\" tag using CSS to make it more noticeable. For example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<noscript>\n  <style>\n    .noscript-message {\n      color: red;\n      font-weight: bold;\n    }\n  </style>\n  <p class=\"noscript-message\">\n    JavaScript is disabled in your browser. Please enable JavaScript for the\n    best experience.\n  </p>\n</noscript>\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"In this example, the message will be styled with red text and bold font to make it stand out.\"}),`\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.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript\",children:[\"MDN Web Docs: \",(0,n.jsx)(e.code,{children:\"<noscript>\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://www.w3schools.com/tags/tag_noscript.asp\",children:[\"W3Schools: HTML \",(0,n.jsx)(e.code,{children:\"<noscript>\"}),\" Tag\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://caniuse.com/?search=noscript\",children:[\"Can I use: \",(0,n.jsx)(e.code,{children:\"<noscript>\"})]})}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return y(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-detect-if-javascript-is-disabled-on-a-page/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-detect-if-javascript-is-disabled-on-a-page/zh-CN.json
index 1baa4bbda..91f347f20 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-detect-if-javascript-is-disabled-on-a-page/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-detect-if-javascript-is-disabled-on-a-page/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-detect-if-javascript-is-disabled-on-a-page/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),J=(e,n)=>{for(var r in n)t(e,r,{get:n[r],enumerable:!0})},o=(e,n,r,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of m(n))!v.call(e,i)&&i!==r&&t(e,i,{get:()=>n[i],enumerable:!(a=s(n,i))||a.enumerable});return e};var u=(e,n,r)=>(r=e!=null?p(S(e)):{},o(n||!e||!e.__esModule?t(r,\"default\",{value:e,enumerable:!0}):r,e)),f=e=>o(t({},\"__esModule\",{value:!0}),e);var h=g((j,l)=>{l.exports=_jsx_runtime});var _={};J(_,{default:()=>M,frontmatter:()=>w});var c=u(h()),w={title:\"\\u5982\\u4F55\\u68C0\\u6D4B\\u9875\\u9762\\u662F\\u5426\\u7981\\u7528\\u4E86 JavaScript\\uFF1F\"};function d(e){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},e.components);return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,c.jsxs)(n.p,{children:[\"\\u8981\\u68C0\\u6D4B\\u9875\\u9762\\u4E0A\\u662F\\u5426\\u7981\\u7528\\u4E86 JavaScript\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,c.jsx)(n.code,{children:\"<noscript>\"}),\" HTML \\u6807\\u7B7E\\u3002\\u6B64\\u6807\\u7B7E\\u5141\\u8BB8\\u60A8\\u5411\\u6D4F\\u89C8\\u5668\\u4E2D\\u7981\\u7528\\u4E86 JavaScript \\u7684\\u7528\\u6237\\u663E\\u793A\\u5185\\u5BB9\\u6216\\u6D88\\u606F\\u3002\\u4F8B\\u5982\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728 \",(0,c.jsx)(n.code,{children:\"<noscript>\"}),\" \\u6807\\u7B7E\\u4E2D\\u5305\\u542B\\u4E00\\u6761\\u6D88\\u606F\\uFF0C\\u544A\\u77E5\\u7528\\u6237\\u9700\\u8981 JavaScript \\u624D\\u80FD\\u83B7\\u5F97\\u9875\\u9762\\u7684\\u5168\\u90E8\\u529F\\u80FD\\u3002\"]}),`\n`,(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:\"language-html\",children:`<noscript>\n  <p>\n    \\u60A8\\u7684\\u6D4F\\u89C8\\u5668\\u4E2D\\u7981\\u7528\\u4E86 JavaScript\\u3002\\u8BF7\\u542F\\u7528 JavaScript \\u4EE5\\u83B7\\u5F97\n    \\u6700\\u4F73\\u4F53\\u9A8C\\u3002\n  </p>\n</noscript>\n`})}),`\n`,(0,c.jsx)(n.hr,{}),`\n`,(0,c.jsxs)(n.h2,{children:[\"\\u4F7F\\u7528 \",(0,c.jsx)(n.code,{children:\"<noscript>\"}),\" \\u6807\\u7B7E\"]}),`\n`,(0,c.jsxs)(n.h3,{children:[\"\\u4EC0\\u4E48\\u662F \",(0,c.jsx)(n.code,{children:\"<noscript>\"}),\" \\u6807\\u7B7E\\uFF1F\"]}),`\n`,(0,c.jsxs)(n.p,{children:[(0,c.jsx)(n.code,{children:\"<noscript>\"}),\" \\u6807\\u7B7E\\u662F\\u4E00\\u4E2A HTML \\u5143\\u7D20\\uFF0C\\u5B83\\u4E3A\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u7981\\u7528\\u4E86 JavaScript \\u7684\\u7528\\u6237\\u63D0\\u4F9B\\u66FF\\u4EE3\\u5185\\u5BB9\\u3002\\u6B64\\u6807\\u7B7E\\u5BF9\\u4E8E\\u544A\\u77E5\\u7528\\u6237\\uFF0C\\u5982\\u679C\\u6CA1\\u6709 JavaScript\\uFF0C\\u7F51\\u7AD9\\u7684\\u67D0\\u4E9B\\u529F\\u80FD\\u53EF\\u80FD\\u65E0\\u6CD5\\u6B63\\u5E38\\u5DE5\\u4F5C\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,c.jsx)(n.h3,{children:\"\\u793A\\u4F8B\\u7528\\u6CD5\"}),`\n`,(0,c.jsxs)(n.p,{children:[\"\\u4EE5\\u4E0B\\u662F\\u5982\\u4F55\\u4F7F\\u7528 \",(0,c.jsx)(n.code,{children:\"<noscript>\"}),\" \\u6807\\u7B7E\\u5411\\u7981\\u7528\\u4E86 JavaScript \\u7684\\u7528\\u6237\\u663E\\u793A\\u6D88\\u606F\\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:\"language-html\",children:`<!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    <title>JavaScript \\u68C0\\u6D4B</title>\n  </head>\n  <body>\n    <h1>\\u6B22\\u8FCE\\u6765\\u5230\\u6211\\u4EEC\\u7684\\u7F51\\u7AD9</h1>\n    <noscript>\n      <p>\n        \\u60A8\\u7684\\u6D4F\\u89C8\\u5668\\u4E2D\\u7981\\u7528\\u4E86 JavaScript\\u3002\\u8BF7\\u542F\\u7528 JavaScript \\u4EE5\\u83B7\\u5F97\n        \\u6700\\u4F73\\u4F53\\u9A8C\\u3002\n      </p>\n    </noscript>\n    <p>\\u6B64\\u5185\\u5BB9\\u5BF9\\u6240\\u6709\\u7528\\u6237\\u53EF\\u89C1\\u3002</p>\n  </body>\n</html>\n`})}),`\n`,(0,c.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u53EA\\u6709\\u5728\\u7981\\u7528 JavaScript \\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u624D\\u4F1A\\u663E\\u793A \",(0,c.jsx)(n.code,{children:\"<noscript>\"}),\" \\u6807\\u7B7E\\u5185\\u7684\\u6D88\\u606F\\u3002\\u5982\\u679C\\u542F\\u7528\\u4E86 JavaScript\\uFF0C\\u5219\\u4F1A\\u5FFD\\u7565 \",(0,c.jsx)(n.code,{children:\"<noscript>\"}),\" \\u6807\\u7B7E\\u5185\\u7684\\u5185\\u5BB9\\u3002\"]}),`\n`,(0,c.jsxs)(n.h3,{children:[\"\\u8BBE\\u7F6E \",(0,c.jsx)(n.code,{children:\"<noscript>\"}),\" \\u5185\\u5BB9\\u7684\\u6837\\u5F0F\"]}),`\n`,(0,c.jsxs)(n.p,{children:[\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u4F7F\\u7528 CSS \\u8BBE\\u7F6E \",(0,c.jsx)(n.code,{children:\"<noscript>\"}),\" \\u6807\\u7B7E\\u5185\\u5185\\u5BB9\\u7684\\u6837\\u5F0F\\uFF0C\\u4F7F\\u5176\\u66F4\\u5F15\\u4EBA\\u6CE8\\u76EE\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:\"language-html\",children:`<noscript>\n  <style>\n    .noscript-message {\n      color: red;\n      font-weight: bold;\n    }\n  </style>\n  <p class=\"noscript-message\">\n    \\u60A8\\u7684\\u6D4F\\u89C8\\u5668\\u4E2D\\u7981\\u7528\\u4E86 JavaScript\\u3002\\u8BF7\\u542F\\u7528 JavaScript \\u4EE5\\u83B7\\u5F97\n    \\u6700\\u4F73\\u4F53\\u9A8C\\u3002\n  </p>\n</noscript>\n`})}),`\n`,(0,c.jsx)(n.p,{children:\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u6D88\\u606F\\u5C06\\u4F7F\\u7528\\u7EA2\\u8272\\u6587\\u672C\\u548C\\u7C97\\u4F53\\u5B57\\u4F53\\u8BBE\\u7F6E\\u6837\\u5F0F\\uFF0C\\u4F7F\\u5176\\u7A81\\u51FA\\u663E\\u793A\\u3002\"}),`\n`,(0,c.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,c.jsxs)(n.ul,{children:[`\n`,(0,c.jsx)(n.li,{children:(0,c.jsxs)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript\",children:[\"MDN Web Docs: \",(0,c.jsx)(n.code,{children:\"<noscript>\"})]})}),`\n`,(0,c.jsx)(n.li,{children:(0,c.jsxs)(n.a,{href:\"https://www.w3schools.com/tags/tag_noscript.asp\",children:[\"W3Schools: HTML \",(0,c.jsx)(n.code,{children:\"<noscript>\"}),\" \\u6807\\u7B7E\"]})}),`\n`,(0,c.jsx)(n.li,{children:(0,c.jsxs)(n.a,{href:\"https://caniuse.com/?search=noscript\",children:[\"Can I use: \",(0,c.jsx)(n.code,{children:\"<noscript>\"})]})}),`\n`]})]})}function x(e={}){let{wrapper:n}=e.components||{};return n?(0,c.jsx)(n,Object.assign({},e,{children:(0,c.jsx)(d,e)})):d(e)}var M=x;return f(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,J=Object.prototype.hasOwnProperty;var g=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),u=(e,n)=>{for(var r in n)t(e,r,{get:n[r],enumerable:!0})},a=(e,n,r,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of S(n))!J.call(e,i)&&i!==r&&t(e,i,{get:()=>n[i],enumerable:!(o=m(n,i))||o.enumerable});return e};var f=(e,n,r)=>(r=e!=null?s(v(e)):{},a(n||!e||!e.__esModule?t(r,\"default\",{value:e,enumerable:!0}):r,e)),w=e=>a(t({},\"__esModule\",{value:!0}),e);var h=g((y,l)=>{l.exports=_jsx_runtime});var M={};u(M,{default:()=>p,frontmatter:()=>x});var c=f(h()),x={title:\"\\u5982\\u4F55\\u68C0\\u6D4B\\u9875\\u9762\\u662F\\u5426\\u7981\\u7528\\u4E86 JavaScript\\uFF1F\"};function d(e){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,c.jsxs)(n.p,{children:[\"\\u8981\\u68C0\\u6D4B\\u9875\\u9762\\u4E0A\\u662F\\u5426\\u7981\\u7528\\u4E86 JavaScript\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,c.jsx)(n.code,{children:\"<noscript>\"}),\" HTML \\u6807\\u7B7E\\u3002\\u6B64\\u6807\\u7B7E\\u5141\\u8BB8\\u60A8\\u5411\\u6D4F\\u89C8\\u5668\\u4E2D\\u7981\\u7528\\u4E86 JavaScript \\u7684\\u7528\\u6237\\u663E\\u793A\\u5185\\u5BB9\\u6216\\u6D88\\u606F\\u3002\\u4F8B\\u5982\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728 \",(0,c.jsx)(n.code,{children:\"<noscript>\"}),\" \\u6807\\u7B7E\\u4E2D\\u5305\\u542B\\u4E00\\u6761\\u6D88\\u606F\\uFF0C\\u544A\\u77E5\\u7528\\u6237\\u9700\\u8981 JavaScript \\u624D\\u80FD\\u83B7\\u5F97\\u9875\\u9762\\u7684\\u5168\\u90E8\\u529F\\u80FD\\u3002\"]}),`\n`,(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:\"language-html\",children:`<noscript>\n  <p>\n    \\u60A8\\u7684\\u6D4F\\u89C8\\u5668\\u4E2D\\u7981\\u7528\\u4E86 JavaScript\\u3002\\u8BF7\\u542F\\u7528 JavaScript \\u4EE5\\u83B7\\u5F97\n    \\u6700\\u4F73\\u4F53\\u9A8C\\u3002\n  </p>\n</noscript>\n`})}),`\n`,(0,c.jsx)(n.hr,{}),`\n`,(0,c.jsxs)(n.h2,{children:[\"\\u4F7F\\u7528 \",(0,c.jsx)(n.code,{children:\"<noscript>\"}),\" \\u6807\\u7B7E\"]}),`\n`,(0,c.jsxs)(n.h3,{children:[\"\\u4EC0\\u4E48\\u662F \",(0,c.jsx)(n.code,{children:\"<noscript>\"}),\" \\u6807\\u7B7E\\uFF1F\"]}),`\n`,(0,c.jsxs)(n.p,{children:[(0,c.jsx)(n.code,{children:\"<noscript>\"}),\" \\u6807\\u7B7E\\u662F\\u4E00\\u4E2A HTML \\u5143\\u7D20\\uFF0C\\u5B83\\u4E3A\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u7981\\u7528\\u4E86 JavaScript \\u7684\\u7528\\u6237\\u63D0\\u4F9B\\u66FF\\u4EE3\\u5185\\u5BB9\\u3002\\u6B64\\u6807\\u7B7E\\u5BF9\\u4E8E\\u544A\\u77E5\\u7528\\u6237\\uFF0C\\u5982\\u679C\\u6CA1\\u6709 JavaScript\\uFF0C\\u7F51\\u7AD9\\u7684\\u67D0\\u4E9B\\u529F\\u80FD\\u53EF\\u80FD\\u65E0\\u6CD5\\u6B63\\u5E38\\u5DE5\\u4F5C\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,c.jsx)(n.h3,{children:\"\\u793A\\u4F8B\\u7528\\u6CD5\"}),`\n`,(0,c.jsxs)(n.p,{children:[\"\\u4EE5\\u4E0B\\u662F\\u5982\\u4F55\\u4F7F\\u7528 \",(0,c.jsx)(n.code,{children:\"<noscript>\"}),\" \\u6807\\u7B7E\\u5411\\u7981\\u7528\\u4E86 JavaScript \\u7684\\u7528\\u6237\\u663E\\u793A\\u6D88\\u606F\\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:\"language-html\",children:`<!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    <title>JavaScript \\u68C0\\u6D4B</title>\n  </head>\n  <body>\n    <h1>\\u6B22\\u8FCE\\u6765\\u5230\\u6211\\u4EEC\\u7684\\u7F51\\u7AD9</h1>\n    <noscript>\n      <p>\n        \\u60A8\\u7684\\u6D4F\\u89C8\\u5668\\u4E2D\\u7981\\u7528\\u4E86 JavaScript\\u3002\\u8BF7\\u542F\\u7528 JavaScript \\u4EE5\\u83B7\\u5F97\n        \\u6700\\u4F73\\u4F53\\u9A8C\\u3002\n      </p>\n    </noscript>\n    <p>\\u6B64\\u5185\\u5BB9\\u5BF9\\u6240\\u6709\\u7528\\u6237\\u53EF\\u89C1\\u3002</p>\n  </body>\n</html>\n`})}),`\n`,(0,c.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u53EA\\u6709\\u5728\\u7981\\u7528 JavaScript \\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u624D\\u4F1A\\u663E\\u793A \",(0,c.jsx)(n.code,{children:\"<noscript>\"}),\" \\u6807\\u7B7E\\u5185\\u7684\\u6D88\\u606F\\u3002\\u5982\\u679C\\u542F\\u7528\\u4E86 JavaScript\\uFF0C\\u5219\\u4F1A\\u5FFD\\u7565 \",(0,c.jsx)(n.code,{children:\"<noscript>\"}),\" \\u6807\\u7B7E\\u5185\\u7684\\u5185\\u5BB9\\u3002\"]}),`\n`,(0,c.jsxs)(n.h3,{children:[\"\\u8BBE\\u7F6E \",(0,c.jsx)(n.code,{children:\"<noscript>\"}),\" \\u5185\\u5BB9\\u7684\\u6837\\u5F0F\"]}),`\n`,(0,c.jsxs)(n.p,{children:[\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u4F7F\\u7528 CSS \\u8BBE\\u7F6E \",(0,c.jsx)(n.code,{children:\"<noscript>\"}),\" \\u6807\\u7B7E\\u5185\\u5185\\u5BB9\\u7684\\u6837\\u5F0F\\uFF0C\\u4F7F\\u5176\\u66F4\\u5F15\\u4EBA\\u6CE8\\u76EE\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:\"language-html\",children:`<noscript>\n  <style>\n    .noscript-message {\n      color: red;\n      font-weight: bold;\n    }\n  </style>\n  <p class=\"noscript-message\">\n    \\u60A8\\u7684\\u6D4F\\u89C8\\u5668\\u4E2D\\u7981\\u7528\\u4E86 JavaScript\\u3002\\u8BF7\\u542F\\u7528 JavaScript \\u4EE5\\u83B7\\u5F97\n    \\u6700\\u4F73\\u4F53\\u9A8C\\u3002\n  </p>\n</noscript>\n`})}),`\n`,(0,c.jsx)(n.p,{children:\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u6D88\\u606F\\u5C06\\u4F7F\\u7528\\u7EA2\\u8272\\u6587\\u672C\\u548C\\u7C97\\u4F53\\u5B57\\u4F53\\u8BBE\\u7F6E\\u6837\\u5F0F\\uFF0C\\u4F7F\\u5176\\u7A81\\u51FA\\u663E\\u793A\\u3002\"}),`\n`,(0,c.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,c.jsxs)(n.ul,{children:[`\n`,(0,c.jsx)(n.li,{children:(0,c.jsxs)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript\",children:[\"MDN Web Docs: \",(0,c.jsx)(n.code,{children:\"<noscript>\"})]})}),`\n`,(0,c.jsx)(n.li,{children:(0,c.jsxs)(n.a,{href:\"https://www.w3schools.com/tags/tag_noscript.asp\",children:[\"W3Schools: HTML \",(0,c.jsx)(n.code,{children:\"<noscript>\"}),\" \\u6807\\u7B7E\"]})}),`\n`,(0,c.jsx)(n.li,{children:(0,c.jsxs)(n.a,{href:\"https://caniuse.com/?search=noscript\",children:[\"Can I use: \",(0,c.jsx)(n.code,{children:\"<noscript>\"})]})}),`\n`]})]})}function p(e={}){let{wrapper:n}=e.components||{};return n?(0,c.jsx)(n,{...e,children:(0,c.jsx)(d,{...e})}):d(e)}return w(M);})();\n;return Component;"
 }
\ No newline at end of file
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 cbd36ee56..7a47e8e18 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),y=(n,e)=>{for(var r in e)o(n,r,{get:e[r],enumerable:!0})},s=(n,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!g.call(n,c)&&c!==r&&o(n,c,{get:()=>e[c],enumerable:!(t=p(e,c))||t.enumerable});return n};var v=(n,e,r)=>(r=n!=null?d(u(n)):{},s(e||!n||!n.__esModule?o(r,\"default\",{value:n,enumerable:!0}):r,n)),f=n=>s(o({},\"__esModule\",{value:!0}),n);var h=w((P,l)=>{l.exports=_jsx_runtime});var L={};y(L,{default:()=>S,frontmatter:()=>U});var a=v(h()),U={title:\"How do you get the query string values of the current page in JavaScript?\"};function i(n){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",a:\"a\"},n.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"To get the query string values of the current page in JavaScript, you can use the \",(0,a.jsx)(e.code,{children:\"URLSearchParams\"}),\" object. First, create a \",(0,a.jsx)(e.code,{children:\"URLSearchParams\"}),\" instance with \",(0,a.jsx)(e.code,{children:\"window.location.search\"}),\", then use the \",(0,a.jsx)(e.code,{children:\"get\"}),\" method to retrieve specific query parameters. For example:\"]}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`const params = new URLSearchParams(window.location.search);\nconst value = params.get('language');\nconsole.log(value);\n`})}),`\n`,(0,a.jsx)(e.hr,{}),`\n`,(0,a.jsx)(e.h2,{children:\"How do you get the query string values of the current page in JavaScript?\"}),`\n`,(0,a.jsx)(e.h3,{children:\"Using URLSearchParams\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"The \",(0,a.jsx)(e.code,{children:\"URLSearchParams\"}),\" interface provides an easy way to work with query strings. Here's how you can use it:\"]}),`\n`,(0,a.jsxs)(e.ol,{children:[`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsxs)(e.strong,{children:[\"Create a \",(0,a.jsx)(e.code,{children:\"URLSearchParams\"}),\" instance\"]}),\": Use \",(0,a.jsx)(e.code,{children:\"window.location.search\"}),\" to get the query string part of the URL.\"]}),`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.strong,{children:\"Retrieve specific query parameters\"}),\": Use the \",(0,a.jsx)(e.code,{children:\"get\"}),\" method to get the value of a specific query parameter.\"]}),`\n`]}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`const params = new URLSearchParams(window.location.search);\nconst value = params.get('key'); // Replace 'key' with the actual query parameter name\nconsole.log(value);\n`})}),`\n`,(0,a.jsxs)(e.p,{children:[\"If the query parameter does not exist, the \",(0,a.jsx)(e.code,{children:\"get\"}),\" method returns \",(0,a.jsx)(e.code,{children:\"null\"}),\".\"]}),`\n`,(0,a.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"Consider a URL like \",(0,a.jsx)(e.code,{children:\"https://example.com?page=2&sort=asc\"}),\". To get the values of \",(0,a.jsx)(e.code,{children:\"page\"}),\" and \",(0,a.jsx)(e.code,{children:\"sort\"}),\":\"]}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`const params = new URLSearchParams(window.location.search);\nconst page = params.get('page'); // '2'\nconst sort = params.get('sort'); // 'asc'\n`})}),`\n`,(0,a.jsx)(e.h3,{children:\"Handling multiple values\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"If a query parameter appears multiple times, you can use the \",(0,a.jsx)(e.code,{children:\"getAll\"}),\" method to retrieve all values:\"]}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`const params = new URLSearchParams(window.location.search);\nconst values = params.getAll('key'); // Returns an array of values\n`})}),`\n`,(0,a.jsx)(e.h3,{children:\"Checking for the existence of a parameter\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"You can use the \",(0,a.jsx)(e.code,{children:\"has\"}),\" method to check if a query parameter exists.\"]}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`const params = new URLSearchParams(window.location.search);\nconsole.log(params.has('page'));\nconsole.log(params.has('language'));\nconsole.log(params.has('tab'));\n`})}),`\n`,(0,a.jsx)(e.h3,{children:\"Iterating over all parameters\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"You can iterate over all query parameters using the \",(0,a.jsx)(e.code,{children:\"forEach\"}),\" method:\"]}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:\"const params = new URLSearchParams(window.location.search);\\nparams.forEach((value, key) => {\\n  console.log(`${key}: ${value}`);\\n});\\n\"})}),`\n`,(0,a.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:(0,a.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams\",children:\"MDN Web Docs: URLSearchParams\"})}),`\n`,(0,a.jsx)(e.li,{children:(0,a.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Window/location\",children:\"MDN Web Docs: window.location\"})}),`\n`]})]})}function R(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,Object.assign({},n,{children:(0,a.jsx)(i,n)})):i(n)}var S=R;return f(L);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var r in e)o(n,r,{get:e[r],enumerable:!0})},s=(n,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of u(e))!w.call(n,c)&&c!==r&&o(n,c,{get:()=>e[c],enumerable:!(t=m(e,c))||t.enumerable});return n};var f=(n,e,r)=>(r=n!=null?p(g(n)):{},s(e||!n||!n.__esModule?o(r,\"default\",{value:n,enumerable:!0}):r,n)),U=n=>s(o({},\"__esModule\",{value:!0}),n);var h=y((x,l)=>{l.exports=_jsx_runtime});var S={};v(S,{default:()=>d,frontmatter:()=>R});var a=f(h()),R={title:\"How do you get the query string values of the current page in JavaScript?\"};function i(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...n.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"To get the query string values of the current page in JavaScript, you can use the \",(0,a.jsx)(e.code,{children:\"URLSearchParams\"}),\" object. First, create a \",(0,a.jsx)(e.code,{children:\"URLSearchParams\"}),\" instance with \",(0,a.jsx)(e.code,{children:\"window.location.search\"}),\", then use the \",(0,a.jsx)(e.code,{children:\"get\"}),\" method to retrieve specific query parameters. For example:\"]}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`const params = new URLSearchParams(window.location.search);\nconst value = params.get('language');\nconsole.log(value);\n`})}),`\n`,(0,a.jsx)(e.hr,{}),`\n`,(0,a.jsx)(e.h2,{children:\"How do you get the query string values of the current page in JavaScript?\"}),`\n`,(0,a.jsx)(e.h3,{children:\"Using URLSearchParams\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"The \",(0,a.jsx)(e.code,{children:\"URLSearchParams\"}),\" interface provides an easy way to work with query strings. Here's how you can use it:\"]}),`\n`,(0,a.jsxs)(e.ol,{children:[`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsxs)(e.strong,{children:[\"Create a \",(0,a.jsx)(e.code,{children:\"URLSearchParams\"}),\" instance\"]}),\": Use \",(0,a.jsx)(e.code,{children:\"window.location.search\"}),\" to get the query string part of the URL.\"]}),`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.strong,{children:\"Retrieve specific query parameters\"}),\": Use the \",(0,a.jsx)(e.code,{children:\"get\"}),\" method to get the value of a specific query parameter.\"]}),`\n`]}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`const params = new URLSearchParams(window.location.search);\nconst value = params.get('key'); // Replace 'key' with the actual query parameter name\nconsole.log(value);\n`})}),`\n`,(0,a.jsxs)(e.p,{children:[\"If the query parameter does not exist, the \",(0,a.jsx)(e.code,{children:\"get\"}),\" method returns \",(0,a.jsx)(e.code,{children:\"null\"}),\".\"]}),`\n`,(0,a.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"Consider a URL like \",(0,a.jsx)(e.code,{children:\"https://example.com?page=2&sort=asc\"}),\". To get the values of \",(0,a.jsx)(e.code,{children:\"page\"}),\" and \",(0,a.jsx)(e.code,{children:\"sort\"}),\":\"]}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`const params = new URLSearchParams(window.location.search);\nconst page = params.get('page'); // '2'\nconst sort = params.get('sort'); // 'asc'\n`})}),`\n`,(0,a.jsx)(e.h3,{children:\"Handling multiple values\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"If a query parameter appears multiple times, you can use the \",(0,a.jsx)(e.code,{children:\"getAll\"}),\" method to retrieve all values:\"]}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`const params = new URLSearchParams(window.location.search);\nconst values = params.getAll('key'); // Returns an array of values\n`})}),`\n`,(0,a.jsx)(e.h3,{children:\"Checking for the existence of a parameter\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"You can use the \",(0,a.jsx)(e.code,{children:\"has\"}),\" method to check if a query parameter exists.\"]}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`const params = new URLSearchParams(window.location.search);\nconsole.log(params.has('page'));\nconsole.log(params.has('language'));\nconsole.log(params.has('tab'));\n`})}),`\n`,(0,a.jsx)(e.h3,{children:\"Iterating over all parameters\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"You can iterate over all query parameters using the \",(0,a.jsx)(e.code,{children:\"forEach\"}),\" method:\"]}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:\"const params = new URLSearchParams(window.location.search);\\nparams.forEach((value, key) => {\\n  console.log(`${key}: ${value}`);\\n});\\n\"})}),`\n`,(0,a.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:(0,a.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams\",children:\"MDN Web Docs: URLSearchParams\"})}),`\n`,(0,a.jsx)(e.li,{children:(0,a.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Window/location\",children:\"MDN Web Docs: window.location\"})}),`\n`]})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(i,{...n})}):i(n)}return U(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/zh-CN.json
index 10a061cdc..5f2ef9c25 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "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/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var t=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var w=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),S=(a,e)=>{for(var c in e)l(a,c,{get:e[c],enumerable:!0})},s=(a,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!u.call(a,r)&&r!==c&&l(a,r,{get:()=>e[r],enumerable:!(o=p(e,r))||o.enumerable});return a};var U=(a,e,c)=>(c=a!=null?t(g(a)):{},s(e||!a||!a.__esModule?l(c,\"default\",{value:a,enumerable:!0}):c,a)),L=a=>s(l({},\"__esModule\",{value:!0}),a);var d=w((f,h)=>{h.exports=_jsx_runtime});var v={};S(v,{default:()=>j,frontmatter:()=>P});var n=U(d()),P={title:\"\\u5982\\u4F55\\u7528 JavaScript \\u83B7\\u53D6\\u5F53\\u524D\\u9875\\u9762\\u7684\\u67E5\\u8BE2\\u5B57\\u7B26\\u4E32\\u503C\\uFF1F\"};function i(a){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",a:\"a\"},a.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u5728 JavaScript \\u4E2D\\u83B7\\u53D6\\u5F53\\u524D\\u9875\\u9762\\u7684\\u67E5\\u8BE2\\u5B57\\u7B26\\u4E32\\u503C\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"URLSearchParams\"}),\" \\u5BF9\\u8C61\\u3002\\u9996\\u5148\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.location.search\"}),\" \\u521B\\u5EFA\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"URLSearchParams\"}),\" \\u5B9E\\u4F8B\\uFF0C\\u7136\\u540E\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"get\"}),\" \\u65B9\\u6CD5\\u68C0\\u7D22\\u7279\\u5B9A\\u7684\\u67E5\\u8BE2\\u53C2\\u6570\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const params = new URLSearchParams(window.location.search);\nconst value = params.get('language');\nconsole.log(value);\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u7528 JavaScript \\u83B7\\u53D6\\u5F53\\u524D\\u9875\\u9762\\u7684\\u67E5\\u8BE2\\u5B57\\u7B26\\u4E32\\u503C\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 URLSearchParams\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"URLSearchParams\"}),\" \\u63A5\\u53E3\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u7B80\\u5355\\u7684\\u65B9\\u6CD5\\u6765\\u5904\\u7406\\u67E5\\u8BE2\\u5B57\\u7B26\\u4E32\\u3002\\u4EE5\\u4E0B\\u662F\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"URLSearchParams\"}),\" \\u5B9E\\u4F8B\"]}),\"\\uFF1A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.location.search\"}),\" \\u83B7\\u53D6 URL \\u7684\\u67E5\\u8BE2\\u5B57\\u7B26\\u4E32\\u90E8\\u5206\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u68C0\\u7D22\\u7279\\u5B9A\\u7684\\u67E5\\u8BE2\\u53C2\\u6570\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"get\"}),\" \\u65B9\\u6CD5\\u83B7\\u53D6\\u7279\\u5B9A\\u67E5\\u8BE2\\u53C2\\u6570\\u7684\\u503C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const params = new URLSearchParams(window.location.search);\nconst value = params.get('key'); // \\u5C06 'key' \\u66FF\\u6362\\u4E3A\\u5B9E\\u9645\\u7684\\u67E5\\u8BE2\\u53C2\\u6570\\u540D\\u79F0\nconsole.log(value);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u67E5\\u8BE2\\u53C2\\u6570\\u4E0D\\u5B58\\u5728\\uFF0C\",(0,n.jsx)(e.code,{children:\"get\"}),\" \\u65B9\\u6CD5\\u5C06\\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:\"null\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8003\\u8651\\u4E00\\u4E2A\\u50CF \",(0,n.jsx)(e.code,{children:\"https://example.com?page=2&sort=asc\"}),\" \\u8FD9\\u6837\\u7684 URL\\u3002\\u8981\\u83B7\\u53D6 \",(0,n.jsx)(e.code,{children:\"page\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"sort\"}),\" \\u7684\\u503C\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const params = new URLSearchParams(window.location.search);\nconst page = params.get('page'); // '2'\nconst sort = params.get('sort'); // 'asc'\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5904\\u7406\\u591A\\u4E2A\\u503C\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u4E00\\u4E2A\\u67E5\\u8BE2\\u53C2\\u6570\\u51FA\\u73B0\\u591A\\u6B21\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"getAll\"}),\" \\u65B9\\u6CD5\\u68C0\\u7D22\\u6240\\u6709\\u503C\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const params = new URLSearchParams(window.location.search);\nconst values = params.getAll('key'); // \\u8FD4\\u56DE\\u4E00\\u4E2A\\u503C\\u6570\\u7EC4\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u68C0\\u67E5\\u53C2\\u6570\\u662F\\u5426\\u5B58\\u5728\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"has\"}),\" \\u65B9\\u6CD5\\u68C0\\u67E5\\u67E5\\u8BE2\\u53C2\\u6570\\u662F\\u5426\\u5B58\\u5728\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const params = new URLSearchParams(window.location.search);\nconsole.log(params.has('page'));\nconsole.log(params.has('language'));\nconsole.log(params.has('tab'));\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u904D\\u5386\\u6240\\u6709\\u53C2\\u6570\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"forEach\"}),\" \\u65B9\\u6CD5\\u904D\\u5386\\u6240\\u6709\\u67E5\\u8BE2\\u53C2\\u6570\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"const params = new URLSearchParams(window.location.search);\\nparams.forEach((value, key) => {\\n  console.log(`${key}: ${value}`);\\n});\\n\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/URLSearchParams\",children:\"MDN Web Docs: URLSearchParams\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Window/location\",children:\"MDN Web Docs: window.location\"})}),`\n`]})]})}function R(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(i,a)})):i(a)}var j=R;return L(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var S=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),U=(a,e)=>{for(var c in e)l(a,c,{get:e[c],enumerable:!0})},s=(a,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of g(e))!w.call(a,r)&&r!==c&&l(a,r,{get:()=>e[r],enumerable:!(o=m(e,r))||o.enumerable});return a};var L=(a,e,c)=>(c=a!=null?p(u(a)):{},s(e||!a||!a.__esModule?l(c,\"default\",{value:a,enumerable:!0}):c,a)),P=a=>s(l({},\"__esModule\",{value:!0}),a);var d=S((x,h)=>{h.exports=_jsx_runtime});var v={};U(v,{default:()=>t,frontmatter:()=>R});var n=L(d()),R={title:\"\\u5982\\u4F55\\u7528 JavaScript \\u83B7\\u53D6\\u5F53\\u524D\\u9875\\u9762\\u7684\\u67E5\\u8BE2\\u5B57\\u7B26\\u4E32\\u503C\\uFF1F\"};function i(a){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...a.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u5728 JavaScript \\u4E2D\\u83B7\\u53D6\\u5F53\\u524D\\u9875\\u9762\\u7684\\u67E5\\u8BE2\\u5B57\\u7B26\\u4E32\\u503C\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"URLSearchParams\"}),\" \\u5BF9\\u8C61\\u3002\\u9996\\u5148\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.location.search\"}),\" \\u521B\\u5EFA\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"URLSearchParams\"}),\" \\u5B9E\\u4F8B\\uFF0C\\u7136\\u540E\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"get\"}),\" \\u65B9\\u6CD5\\u68C0\\u7D22\\u7279\\u5B9A\\u7684\\u67E5\\u8BE2\\u53C2\\u6570\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const params = new URLSearchParams(window.location.search);\nconst value = params.get('language');\nconsole.log(value);\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u7528 JavaScript \\u83B7\\u53D6\\u5F53\\u524D\\u9875\\u9762\\u7684\\u67E5\\u8BE2\\u5B57\\u7B26\\u4E32\\u503C\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 URLSearchParams\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"URLSearchParams\"}),\" \\u63A5\\u53E3\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u7B80\\u5355\\u7684\\u65B9\\u6CD5\\u6765\\u5904\\u7406\\u67E5\\u8BE2\\u5B57\\u7B26\\u4E32\\u3002\\u4EE5\\u4E0B\\u662F\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"URLSearchParams\"}),\" \\u5B9E\\u4F8B\"]}),\"\\uFF1A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.location.search\"}),\" \\u83B7\\u53D6 URL \\u7684\\u67E5\\u8BE2\\u5B57\\u7B26\\u4E32\\u90E8\\u5206\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u68C0\\u7D22\\u7279\\u5B9A\\u7684\\u67E5\\u8BE2\\u53C2\\u6570\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"get\"}),\" \\u65B9\\u6CD5\\u83B7\\u53D6\\u7279\\u5B9A\\u67E5\\u8BE2\\u53C2\\u6570\\u7684\\u503C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const params = new URLSearchParams(window.location.search);\nconst value = params.get('key'); // \\u5C06 'key' \\u66FF\\u6362\\u4E3A\\u5B9E\\u9645\\u7684\\u67E5\\u8BE2\\u53C2\\u6570\\u540D\\u79F0\nconsole.log(value);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u67E5\\u8BE2\\u53C2\\u6570\\u4E0D\\u5B58\\u5728\\uFF0C\",(0,n.jsx)(e.code,{children:\"get\"}),\" \\u65B9\\u6CD5\\u5C06\\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:\"null\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8003\\u8651\\u4E00\\u4E2A\\u50CF \",(0,n.jsx)(e.code,{children:\"https://example.com?page=2&sort=asc\"}),\" \\u8FD9\\u6837\\u7684 URL\\u3002\\u8981\\u83B7\\u53D6 \",(0,n.jsx)(e.code,{children:\"page\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"sort\"}),\" \\u7684\\u503C\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const params = new URLSearchParams(window.location.search);\nconst page = params.get('page'); // '2'\nconst sort = params.get('sort'); // 'asc'\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5904\\u7406\\u591A\\u4E2A\\u503C\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u4E00\\u4E2A\\u67E5\\u8BE2\\u53C2\\u6570\\u51FA\\u73B0\\u591A\\u6B21\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"getAll\"}),\" \\u65B9\\u6CD5\\u68C0\\u7D22\\u6240\\u6709\\u503C\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const params = new URLSearchParams(window.location.search);\nconst values = params.getAll('key'); // \\u8FD4\\u56DE\\u4E00\\u4E2A\\u503C\\u6570\\u7EC4\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u68C0\\u67E5\\u53C2\\u6570\\u662F\\u5426\\u5B58\\u5728\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"has\"}),\" \\u65B9\\u6CD5\\u68C0\\u67E5\\u67E5\\u8BE2\\u53C2\\u6570\\u662F\\u5426\\u5B58\\u5728\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const params = new URLSearchParams(window.location.search);\nconsole.log(params.has('page'));\nconsole.log(params.has('language'));\nconsole.log(params.has('tab'));\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u904D\\u5386\\u6240\\u6709\\u53C2\\u6570\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"forEach\"}),\" \\u65B9\\u6CD5\\u904D\\u5386\\u6240\\u6709\\u67E5\\u8BE2\\u53C2\\u6570\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"const params = new URLSearchParams(window.location.search);\\nparams.forEach((value, key) => {\\n  console.log(`${key}: ${value}`);\\n});\\n\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/URLSearchParams\",children:\"MDN Web Docs: URLSearchParams\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Window/location\",children:\"MDN Web Docs: window.location\"})}),`\n`]})]})}function t(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(i,{...a})}):i(a)}return P(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-handle-asynchronous-data-loading-in-react-applications/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-handle-asynchronous-data-loading-in-react-applications/en-US.json
index 82c8d40bc..0648754ec 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-handle-asynchronous-data-loading-in-react-applications/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-handle-asynchronous-data-loading-in-react-applications/en-US.json
@@ -33,5 +33,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/how-do-you-handle-asynchronous-data-loading-in-react-applications/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var a in e)c(t,a,{get:e[a],enumerable:!0})},s=(t,e,a,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!g.call(t,r)&&r!==a&&c(t,r,{get:()=>e[r],enumerable:!(o=u(e,r))||o.enumerable});return t};var v=(t,e,a)=>(a=t!=null?h(p(t)):{},s(e||!t||!t.__esModule?c(a,\"default\",{value:t,enumerable:!0}):a,t)),D=t=>s(c({},\"__esModule\",{value:!0}),t);var d=m((F,i)=>{i.exports=_jsx_runtime});var j={};y(j,{default:()=>S,frontmatter:()=>E});var n=v(d()),E={title:\"How do you handle asynchronous data loading in React applications?\"};function l(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",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:[\"In React applications, asynchronous data loading is typically handled using \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" and \",(0,n.jsx)(e.code,{children:\"useState\"}),\" hooks. You initiate the data fetch inside \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" and update the state with the fetched data. This ensures that the component re-renders with the new data. Here's a simple example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useState, useEffect } from 'react';\n\nfunction DataFetchingComponent() {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    async function fetchData() {\n      const response = await fetch('https://api.example.com/data');\n      const result = await response.json();\n      setData(result);\n      setLoading(false);\n    }\n\n    fetchData();\n  }, []);\n\n  if (loading) {\n    return <div>Loading...</div>;\n  }\n\n  return <div>{JSON.stringify(data)}</div>;\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Handling asynchronous data loading in React applications\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" and \",(0,n.jsx)(e.code,{children:\"useState\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The most common way to handle asynchronous data loading in React is by using the \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" and \",(0,n.jsx)(e.code,{children:\"useState\"}),\" hooks. \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" allows you to perform side effects, such as data fetching, and \",(0,n.jsx)(e.code,{children:\"useState\"}),\" helps manage the component's state.\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Initialize state\"}),\": Use \",(0,n.jsx)(e.code,{children:\"useState\"}),\" to create state variables for storing the fetched data and loading status.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Fetch data\"}),\": Use \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" to perform the data fetching when the component mounts.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Update state\"}),\": Once the data is fetched, update the state to trigger a re-render.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's a detailed example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useState, useEffect } from 'react';\n\nfunction DataFetchingComponent() {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    async function fetchData() {\n      try {\n        const response = await fetch('https://api.example.com/data');\n        const result = await response.json();\n        setData(result);\n      } catch (error) {\n        console.error('Error fetching data:', error);\n      } finally {\n        setLoading(false);\n      }\n    }\n\n    fetchData();\n  }, []);\n\n  if (loading) {\n    return <div>Loading...</div>;\n  }\n\n  return <div>{JSON.stringify(data)}</div>;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Handling errors\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"It's important to handle errors that may occur during data fetching. You can use a \",(0,n.jsx)(e.code,{children:\"try-catch\"}),\" block within the \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" to catch and handle errors.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  async function fetchData() {\n    try {\n      const response = await fetch('https://api.example.com/data');\n      const result = await response.json();\n      setData(result);\n    } catch (error) {\n      console.error('Error fetching data:', error);\n    } finally {\n      setLoading(false);\n    }\n  }\n\n  fetchData();\n}, []);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Using custom hooks\"}),`\n`,(0,n.jsx)(e.p,{children:\"For better code reusability, you can create custom hooks to handle data fetching. This allows you to encapsulate the data fetching logic and reuse it across multiple components.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import { useState, useEffect } from 'react';\n\nfunction useFetch(url) {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n\n  useEffect(() => {\n    async function fetchData() {\n      try {\n        const response = await fetch(url);\n        const result = await response.json();\n        setData(result);\n      } catch (error) {\n        setError(error);\n      } finally {\n        setLoading(false);\n      }\n    }\n\n    fetchData();\n  }, [url]);\n\n  return { data, loading, error };\n}\n\nexport default useFetch;\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"You can then use this custom hook in your components:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React from 'react';\nimport useFetch from './useFetch';\n\nfunction DataFetchingComponent() {\n  const { data, loading, error } = useFetch('https://api.example.com/data');\n\n  if (loading) {\n    return <div>Loading...</div>;\n  }\n\n  if (error) {\n    return <div>Error: {error.message}</div>;\n  }\n\n  return <div>{JSON.stringify(data)}</div>;\n}\n`})}),`\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://react.dev/reference/react/hooks\",children:\"React documentation on hooks\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/useEffect\",children:\"React useEffect Hook\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\",children:\"Fetch API\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/async-await#error-handling\",children:\"Handling errors in async functions\"})}),`\n`]})]})}function w(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(l,t)})):l(t)}var S=w;return D(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var a in e)c(t,a,{get:e[a],enumerable:!0})},s=(t,e,a,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!m.call(t,r)&&r!==a&&c(t,r,{get:()=>e[r],enumerable:!(o=f(e,r))||o.enumerable});return t};var D=(t,e,a)=>(a=t!=null?u(g(t)):{},s(e||!t||!t.__esModule?c(a,\"default\",{value:t,enumerable:!0}):a,t)),E=t=>s(c({},\"__esModule\",{value:!0}),t);var d=y((j,i)=>{i.exports=_jsx_runtime});var S={};v(S,{default:()=>h,frontmatter:()=>w});var n=D(d()),w={title:\"How do you handle asynchronous data loading in React applications?\"};function l(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In React applications, asynchronous data loading is typically handled using \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" and \",(0,n.jsx)(e.code,{children:\"useState\"}),\" hooks. You initiate the data fetch inside \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" and update the state with the fetched data. This ensures that the component re-renders with the new data. Here's a simple example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useState, useEffect } from 'react';\n\nfunction DataFetchingComponent() {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    async function fetchData() {\n      const response = await fetch('https://api.example.com/data');\n      const result = await response.json();\n      setData(result);\n      setLoading(false);\n    }\n\n    fetchData();\n  }, []);\n\n  if (loading) {\n    return <div>Loading...</div>;\n  }\n\n  return <div>{JSON.stringify(data)}</div>;\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Handling asynchronous data loading in React applications\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" and \",(0,n.jsx)(e.code,{children:\"useState\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The most common way to handle asynchronous data loading in React is by using the \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" and \",(0,n.jsx)(e.code,{children:\"useState\"}),\" hooks. \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" allows you to perform side effects, such as data fetching, and \",(0,n.jsx)(e.code,{children:\"useState\"}),\" helps manage the component's state.\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Initialize state\"}),\": Use \",(0,n.jsx)(e.code,{children:\"useState\"}),\" to create state variables for storing the fetched data and loading status.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Fetch data\"}),\": Use \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" to perform the data fetching when the component mounts.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Update state\"}),\": Once the data is fetched, update the state to trigger a re-render.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's a detailed example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useState, useEffect } from 'react';\n\nfunction DataFetchingComponent() {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    async function fetchData() {\n      try {\n        const response = await fetch('https://api.example.com/data');\n        const result = await response.json();\n        setData(result);\n      } catch (error) {\n        console.error('Error fetching data:', error);\n      } finally {\n        setLoading(false);\n      }\n    }\n\n    fetchData();\n  }, []);\n\n  if (loading) {\n    return <div>Loading...</div>;\n  }\n\n  return <div>{JSON.stringify(data)}</div>;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Handling errors\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"It's important to handle errors that may occur during data fetching. You can use a \",(0,n.jsx)(e.code,{children:\"try-catch\"}),\" block within the \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" to catch and handle errors.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  async function fetchData() {\n    try {\n      const response = await fetch('https://api.example.com/data');\n      const result = await response.json();\n      setData(result);\n    } catch (error) {\n      console.error('Error fetching data:', error);\n    } finally {\n      setLoading(false);\n    }\n  }\n\n  fetchData();\n}, []);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Using custom hooks\"}),`\n`,(0,n.jsx)(e.p,{children:\"For better code reusability, you can create custom hooks to handle data fetching. This allows you to encapsulate the data fetching logic and reuse it across multiple components.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import { useState, useEffect } from 'react';\n\nfunction useFetch(url) {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n\n  useEffect(() => {\n    async function fetchData() {\n      try {\n        const response = await fetch(url);\n        const result = await response.json();\n        setData(result);\n      } catch (error) {\n        setError(error);\n      } finally {\n        setLoading(false);\n      }\n    }\n\n    fetchData();\n  }, [url]);\n\n  return { data, loading, error };\n}\n\nexport default useFetch;\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"You can then use this custom hook in your components:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React from 'react';\nimport useFetch from './useFetch';\n\nfunction DataFetchingComponent() {\n  const { data, loading, error } = useFetch('https://api.example.com/data');\n\n  if (loading) {\n    return <div>Loading...</div>;\n  }\n\n  if (error) {\n    return <div>Error: {error.message}</div>;\n  }\n\n  return <div>{JSON.stringify(data)}</div>;\n}\n`})}),`\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://react.dev/reference/react/hooks\",children:\"React documentation on hooks\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/useEffect\",children:\"React useEffect Hook\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\",children:\"Fetch API\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/async-await#error-handling\",children:\"Handling errors in async functions\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}return E(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-handle-asynchronous-data-loading-in-react-applications/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-handle-asynchronous-data-loading-in-react-applications/zh-CN.json
index d9c699688..993d90e1c 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-handle-asynchronous-data-loading-in-react-applications/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-handle-asynchronous-data-loading-in-react-applications/zh-CN.json
@@ -33,5 +33,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/how-do-you-handle-asynchronous-data-loading-in-react-applications/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),v=(t,n)=>{for(var r in n)c(t,r,{get:n[r],enumerable:!0})},o=(t,n,r,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let a of f(n))!g.call(t,a)&&a!==r&&c(t,a,{get:()=>n[a],enumerable:!(s=u(n,a))||s.enumerable});return t};var D=(t,n,r)=>(r=t!=null?h(p(t)):{},o(n||!t||!t.__esModule?c(r,\"default\",{value:t,enumerable:!0}):r,t)),E=t=>o(c({},\"__esModule\",{value:!0}),t);var d=m((L,i)=>{i.exports=_jsx_runtime});var x={};v(x,{default:()=>y,frontmatter:()=>S});var e=D(d()),S={title:\"\\u5982\\u4F55\\u5728 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u5904\\u7406\\u5F02\\u6B65\\u6570\\u636E\\u52A0\\u8F7D\\uFF1F\"};function l(t){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\uFF0C\\u5F02\\u6B65\\u6570\\u636E\\u52A0\\u8F7D\\u901A\\u5E38\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useEffect\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"useState\"}),\" \\u94A9\\u5B50\\u6765\\u5904\\u7406\\u3002\\u60A8\\u5728 \",(0,e.jsx)(n.code,{children:\"useEffect\"}),\" \\u5185\\u90E8\\u542F\\u52A8\\u6570\\u636E\\u83B7\\u53D6\\uFF0C\\u5E76\\u4F7F\\u7528\\u83B7\\u53D6\\u7684\\u6570\\u636E\\u66F4\\u65B0\\u72B6\\u6001\\u3002\\u8FD9\\u786E\\u4FDD\\u4E86\\u7EC4\\u4EF6\\u4F7F\\u7528\\u65B0\\u6570\\u636E\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u4F8B\\u5B50\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import React, { useState, useEffect } from 'react';\n\nfunction DataFetchingComponent() {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    async function fetchData() {\n      const response = await fetch('https://api.example.com/data');\n      const result = await response.json();\n      setData(result);\n      setLoading(false);\n    }\n\n    fetchData();\n  }, []);\n\n  if (loading) {\n    return <div>Loading...</div>;\n  }\n\n  return <div>{JSON.stringify(data)}</div>;\n}\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5728 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u5904\\u7406\\u5F02\\u6B65\\u6570\\u636E\\u52A0\\u8F7D\"}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useEffect\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"useState\"})]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5904\\u7406 React \\u4E2D\\u5F02\\u6B65\\u6570\\u636E\\u52A0\\u8F7D\\u6700\\u5E38\\u89C1\\u7684\\u65B9\\u6CD5\\u662F\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useEffect\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"useState\"}),\" \\u94A9\\u5B50\\u3002\",(0,e.jsx)(n.code,{children:\"useEffect\"}),\" \\u5141\\u8BB8\\u60A8\\u6267\\u884C\\u526F\\u4F5C\\u7528\\uFF0C\\u4F8B\\u5982\\u6570\\u636E\\u83B7\\u53D6\\uFF0C\\u800C \",(0,e.jsx)(n.code,{children:\"useState\"}),\" \\u6709\\u52A9\\u4E8E\\u7BA1\\u7406\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u3002\"]}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u521D\\u59CB\\u5316\\u72B6\\u6001\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useState\"}),\" \\u521B\\u5EFA\\u72B6\\u6001\\u53D8\\u91CF\\u6765\\u5B58\\u50A8\\u83B7\\u53D6\\u7684\\u6570\\u636E\\u548C\\u52A0\\u8F7D\\u72B6\\u6001\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u83B7\\u53D6\\u6570\\u636E\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useEffect\"}),\" \\u5728\\u7EC4\\u4EF6\\u6302\\u8F7D\\u65F6\\u6267\\u884C\\u6570\\u636E\\u83B7\\u53D6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u66F4\\u65B0\\u72B6\\u6001\"}),\"\\uFF1A\\u83B7\\u53D6\\u6570\\u636E\\u540E\\uFF0C\\u66F4\\u65B0\\u72B6\\u6001\\u4EE5\\u89E6\\u53D1\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u8BE6\\u7EC6\\u7684\\u4F8B\\u5B50\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import React, { useState, useEffect } from 'react';\n\nfunction DataFetchingComponent() {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    async function fetchData() {\n      try {\n        const response = await fetch('https://api.example.com/data');\n        const result = await response.json();\n        setData(result);\n      } catch (error) {\n        console.error('Error fetching data:', error);\n      } finally {\n        setLoading(false);\n      }\n    }\n\n    fetchData();\n  }, []);\n\n  if (loading) {\n    return <div>Loading...</div>;\n  }\n\n  return <div>{JSON.stringify(data)}</div>;\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5904\\u7406\\u9519\\u8BEF\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5904\\u7406\\u6570\\u636E\\u83B7\\u53D6\\u671F\\u95F4\\u53EF\\u80FD\\u53D1\\u751F\\u7684\\u9519\\u8BEF\\u975E\\u5E38\\u91CD\\u8981\\u3002\\u60A8\\u53EF\\u4EE5\\u5728 \",(0,e.jsx)(n.code,{children:\"useEffect\"}),\" \\u4E2D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"try-catch\"}),\" \\u5757\\u6765\\u6355\\u83B7\\u548C\\u5904\\u7406\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`useEffect(() => {\n  async function fetchData() {\n    try {\n      const response = await fetch('https://api.example.com/data');\n      const result = await response.json();\n      setData(result);\n    } catch (error) {\n      console.error('Error fetching data:', error);\n    } finally {\n      setLoading(false);\n    }\n  }\n\n  fetchData();\n}, []);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528\\u81EA\\u5B9A\\u4E49\\u94A9\\u5B50\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E3A\\u4E86\\u66F4\\u597D\\u5730\\u91CD\\u7528\\u4EE3\\u7801\\uFF0C\\u60A8\\u53EF\\u4EE5\\u521B\\u5EFA\\u81EA\\u5B9A\\u4E49\\u94A9\\u5B50\\u6765\\u5904\\u7406\\u6570\\u636E\\u83B7\\u53D6\\u3002\\u8FD9\\u5141\\u8BB8\\u60A8\\u5C01\\u88C5\\u6570\\u636E\\u83B7\\u53D6\\u903B\\u8F91\\u5E76\\u5728\\u591A\\u4E2A\\u7EC4\\u4EF6\\u4E2D\\u91CD\\u7528\\u5B83\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import { useState, useEffect } from 'react';\n\nfunction useFetch(url) {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n\n  useEffect(() => {\n    async function fetchData() {\n      try {\n        const response = await fetch(url);\n        const result = await response.json();\n        setData(result);\n      } catch (error) {\n        setError(error);\n      } finally {\n        setLoading(false);\n      }\n    }\n\n    fetchData();\n  }, [url]);\n\n  return { data, loading, error };\n}\n\nexport default useFetch;\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7136\\u540E\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728\\u7EC4\\u4EF6\\u4E2D\\u4F7F\\u7528\\u6B64\\u81EA\\u5B9A\\u4E49\\u94A9\\u5B50\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import React from 'react';\nimport useFetch from './useFetch';\n\nfunction DataFetchingComponent() {\n  const { data, loading, error } = useFetch('https://api.example.com/data');\n\n  if (loading) {\n    return <div>Loading...</div>;\n  }\n\n  if (error) {\n    return <div>Error: {error.message}</div>;\n  }\n\n  return <div>{JSON.stringify(data)}</div>;\n}\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react/hooks\",children:\"React documentation on hooks\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react/useEffect\",children:\"React useEffect Hook\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\",children:\"Fetch API\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/async-await#error-handling\",children:\"Handling errors in async functions\"})}),`\n`]})]})}function j(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(l,t)})):l(t)}var y=j;return E(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var v=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),D=(t,n)=>{for(var r in n)c(t,r,{get:n[r],enumerable:!0})},o=(t,n,r,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let a of p(n))!m.call(t,a)&&a!==r&&c(t,a,{get:()=>n[a],enumerable:!(s=f(n,a))||s.enumerable});return t};var E=(t,n,r)=>(r=t!=null?u(g(t)):{},o(n||!t||!t.__esModule?c(r,\"default\",{value:t,enumerable:!0}):r,t)),S=t=>o(c({},\"__esModule\",{value:!0}),t);var d=v((F,i)=>{i.exports=_jsx_runtime});var j={};D(j,{default:()=>h,frontmatter:()=>y});var e=E(d()),y={title:\"\\u5982\\u4F55\\u5728 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u5904\\u7406\\u5F02\\u6B65\\u6570\\u636E\\u52A0\\u8F7D\\uFF1F\"};function l(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\uFF0C\\u5F02\\u6B65\\u6570\\u636E\\u52A0\\u8F7D\\u901A\\u5E38\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useEffect\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"useState\"}),\" \\u94A9\\u5B50\\u6765\\u5904\\u7406\\u3002\\u60A8\\u5728 \",(0,e.jsx)(n.code,{children:\"useEffect\"}),\" \\u5185\\u90E8\\u542F\\u52A8\\u6570\\u636E\\u83B7\\u53D6\\uFF0C\\u5E76\\u4F7F\\u7528\\u83B7\\u53D6\\u7684\\u6570\\u636E\\u66F4\\u65B0\\u72B6\\u6001\\u3002\\u8FD9\\u786E\\u4FDD\\u4E86\\u7EC4\\u4EF6\\u4F7F\\u7528\\u65B0\\u6570\\u636E\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u4F8B\\u5B50\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import React, { useState, useEffect } from 'react';\n\nfunction DataFetchingComponent() {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    async function fetchData() {\n      const response = await fetch('https://api.example.com/data');\n      const result = await response.json();\n      setData(result);\n      setLoading(false);\n    }\n\n    fetchData();\n  }, []);\n\n  if (loading) {\n    return <div>Loading...</div>;\n  }\n\n  return <div>{JSON.stringify(data)}</div>;\n}\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5728 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u5904\\u7406\\u5F02\\u6B65\\u6570\\u636E\\u52A0\\u8F7D\"}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useEffect\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"useState\"})]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5904\\u7406 React \\u4E2D\\u5F02\\u6B65\\u6570\\u636E\\u52A0\\u8F7D\\u6700\\u5E38\\u89C1\\u7684\\u65B9\\u6CD5\\u662F\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useEffect\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"useState\"}),\" \\u94A9\\u5B50\\u3002\",(0,e.jsx)(n.code,{children:\"useEffect\"}),\" \\u5141\\u8BB8\\u60A8\\u6267\\u884C\\u526F\\u4F5C\\u7528\\uFF0C\\u4F8B\\u5982\\u6570\\u636E\\u83B7\\u53D6\\uFF0C\\u800C \",(0,e.jsx)(n.code,{children:\"useState\"}),\" \\u6709\\u52A9\\u4E8E\\u7BA1\\u7406\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u3002\"]}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u521D\\u59CB\\u5316\\u72B6\\u6001\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useState\"}),\" \\u521B\\u5EFA\\u72B6\\u6001\\u53D8\\u91CF\\u6765\\u5B58\\u50A8\\u83B7\\u53D6\\u7684\\u6570\\u636E\\u548C\\u52A0\\u8F7D\\u72B6\\u6001\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u83B7\\u53D6\\u6570\\u636E\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useEffect\"}),\" \\u5728\\u7EC4\\u4EF6\\u6302\\u8F7D\\u65F6\\u6267\\u884C\\u6570\\u636E\\u83B7\\u53D6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u66F4\\u65B0\\u72B6\\u6001\"}),\"\\uFF1A\\u83B7\\u53D6\\u6570\\u636E\\u540E\\uFF0C\\u66F4\\u65B0\\u72B6\\u6001\\u4EE5\\u89E6\\u53D1\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u8BE6\\u7EC6\\u7684\\u4F8B\\u5B50\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import React, { useState, useEffect } from 'react';\n\nfunction DataFetchingComponent() {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    async function fetchData() {\n      try {\n        const response = await fetch('https://api.example.com/data');\n        const result = await response.json();\n        setData(result);\n      } catch (error) {\n        console.error('Error fetching data:', error);\n      } finally {\n        setLoading(false);\n      }\n    }\n\n    fetchData();\n  }, []);\n\n  if (loading) {\n    return <div>Loading...</div>;\n  }\n\n  return <div>{JSON.stringify(data)}</div>;\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5904\\u7406\\u9519\\u8BEF\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5904\\u7406\\u6570\\u636E\\u83B7\\u53D6\\u671F\\u95F4\\u53EF\\u80FD\\u53D1\\u751F\\u7684\\u9519\\u8BEF\\u975E\\u5E38\\u91CD\\u8981\\u3002\\u60A8\\u53EF\\u4EE5\\u5728 \",(0,e.jsx)(n.code,{children:\"useEffect\"}),\" \\u4E2D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"try-catch\"}),\" \\u5757\\u6765\\u6355\\u83B7\\u548C\\u5904\\u7406\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`useEffect(() => {\n  async function fetchData() {\n    try {\n      const response = await fetch('https://api.example.com/data');\n      const result = await response.json();\n      setData(result);\n    } catch (error) {\n      console.error('Error fetching data:', error);\n    } finally {\n      setLoading(false);\n    }\n  }\n\n  fetchData();\n}, []);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528\\u81EA\\u5B9A\\u4E49\\u94A9\\u5B50\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E3A\\u4E86\\u66F4\\u597D\\u5730\\u91CD\\u7528\\u4EE3\\u7801\\uFF0C\\u60A8\\u53EF\\u4EE5\\u521B\\u5EFA\\u81EA\\u5B9A\\u4E49\\u94A9\\u5B50\\u6765\\u5904\\u7406\\u6570\\u636E\\u83B7\\u53D6\\u3002\\u8FD9\\u5141\\u8BB8\\u60A8\\u5C01\\u88C5\\u6570\\u636E\\u83B7\\u53D6\\u903B\\u8F91\\u5E76\\u5728\\u591A\\u4E2A\\u7EC4\\u4EF6\\u4E2D\\u91CD\\u7528\\u5B83\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import { useState, useEffect } from 'react';\n\nfunction useFetch(url) {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n\n  useEffect(() => {\n    async function fetchData() {\n      try {\n        const response = await fetch(url);\n        const result = await response.json();\n        setData(result);\n      } catch (error) {\n        setError(error);\n      } finally {\n        setLoading(false);\n      }\n    }\n\n    fetchData();\n  }, [url]);\n\n  return { data, loading, error };\n}\n\nexport default useFetch;\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7136\\u540E\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728\\u7EC4\\u4EF6\\u4E2D\\u4F7F\\u7528\\u6B64\\u81EA\\u5B9A\\u4E49\\u94A9\\u5B50\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import React from 'react';\nimport useFetch from './useFetch';\n\nfunction DataFetchingComponent() {\n  const { data, loading, error } = useFetch('https://api.example.com/data');\n\n  if (loading) {\n    return <div>Loading...</div>;\n  }\n\n  if (error) {\n    return <div>Error: {error.message}</div>;\n  }\n\n  return <div>{JSON.stringify(data)}</div>;\n}\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react/hooks\",children:\"React documentation on hooks\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react/useEffect\",children:\"React useEffect Hook\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\",children:\"Fetch API\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/async-await#error-handling\",children:\"Handling errors in async functions\"})}),`\n`]})]})}function h(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(l,{...t})}):l(t)}return S(j);})();\n;return Component;"
 }
\ No newline at end of file
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 63eecac27..d2e7081e9 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var o in e)c(r,o,{get:e[o],enumerable:!0})},s=(r,e,o,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!g.call(r,a)&&a!==o&&c(r,a,{get:()=>e[a],enumerable:!(t=p(e,a))||t.enumerable});return r};var w=(r,e,o)=>(o=r!=null?d(m(r)):{},s(e||!r||!r.__esModule?c(o,\"default\",{value:r,enumerable:!0}):o,r)),j=r=>s(c({},\"__esModule\",{value:!0}),r);var h=y((P,i)=>{i.exports=_jsx_runtime});var U={};f(U,{default:()=>E,frontmatter:()=>v});var n=w(h()),v={title:\"How do you handle errors in asynchronous operations?\"};function l(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To handle errors in asynchronous operations, you can use \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" blocks with \",(0,n.jsx)(e.code,{children:\"async/await\"}),\" syntax or \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" method with Promises. For example, with \",(0,n.jsx)(e.code,{children:\"async/await\"}),\", you can wrap your code in a \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" block to catch any errors:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    // Invalid URl\n    const response = await fetch('https://api.example.com/data');\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\n\nfetchData(); // Error fetching data: ....\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"With Promises, you can use the \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" method:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://api.example.com/data') // Invalid URl\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error fetching data:', error));\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" with \",(0,n.jsx)(e.code,{children:\"async/await\"})]}),`\n`,(0,n.jsx)(e.h3,{children:\"Basic usage\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When using \",(0,n.jsx)(e.code,{children:\"async/await\"}),\", you can handle errors by wrapping your asynchronous code in a \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" block. This allows you to catch any errors that occur during the execution of the \",(0,n.jsx)(e.code,{children:\"await\"}),\" statement.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    // Invalid URl\n    const response = await fetch('https://api.example.com/data');\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\n\nfetchData(); // Error fetching data: ....\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Nested asynchronous operations\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"If you have multiple asynchronous operations, you can nest \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" blocks to handle errors at different levels.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchUser() {\n  // Simulate a successful async operation\n  return { id: 1, name: 'Alice' };\n}\n\nasync function fetchUserPosts() {\n  // Simulate a failed async operation\n  throw new Error('Failed to fetch posts');\n}\n\nasync function loadUserData() {\n  try {\n    const user = await fetchUser();\n    console.log('User:', user);\n\n    try {\n      const posts = await fetchUserPosts();\n      console.log('Posts:', posts);\n    } catch (postsError) {\n      console.error('Error fetching posts:', postsError.message);\n    }\n  } catch (userError) {\n    console.error('Error fetching user:', userError.message);\n  }\n}\n\nloadUserData();\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Using \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" with Promises\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Basic usage\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When working with Promises, you can handle errors using the \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" method. This method is called if the Promise is rejected.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://api.example.com/data')\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error fetching data:', error));\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Chaining multiple Promises\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"If you have multiple Promises chained together, you can use a single \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" at the end to handle any errors that occur in any of the Promises.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://api.example.com/data')\n  .then((response) => response.json())\n  .then((data) => {\n    // Process data\n    return processData(data);\n  })\n  .then((result) => {\n    // Further processing\n    console.log(result);\n  })\n  .catch((error) => console.error('Error in the chain:', error));\n`})}),`\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/Learn/JavaScript/Asynchronous/Async_await\",children:\"MDN Web Docs: async/await\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises\",children:\"MDN Web Docs: Promises\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/promise-error-handling\",children:\"JavaScript.info: Error handling with promises\"})}),`\n`]})]})}function x(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(l,r)})):l(r)}var E=x;return j(U);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),w=(r,e)=>{for(var o in e)c(r,o,{get:e[o],enumerable:!0})},s=(r,e,o,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!y.call(r,a)&&a!==o&&c(r,a,{get:()=>e[a],enumerable:!(t=u(e,a))||t.enumerable});return r};var j=(r,e,o)=>(o=r!=null?p(g(r)):{},s(e||!r||!r.__esModule?c(o,\"default\",{value:r,enumerable:!0}):o,r)),v=r=>s(c({},\"__esModule\",{value:!0}),r);var h=f((D,i)=>{i.exports=_jsx_runtime});var E={};w(E,{default:()=>d,frontmatter:()=>x});var n=j(h()),x={title:\"How do you handle errors in asynchronous operations?\"};function l(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To handle errors in asynchronous operations, you can use \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" blocks with \",(0,n.jsx)(e.code,{children:\"async/await\"}),\" syntax or \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" method with Promises. For example, with \",(0,n.jsx)(e.code,{children:\"async/await\"}),\", you can wrap your code in a \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" block to catch any errors:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    // Invalid URl\n    const response = await fetch('https://api.example.com/data');\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\n\nfetchData(); // Error fetching data: ....\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"With Promises, you can use the \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" method:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://api.example.com/data') // Invalid URl\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error fetching data:', error));\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" with \",(0,n.jsx)(e.code,{children:\"async/await\"})]}),`\n`,(0,n.jsx)(e.h3,{children:\"Basic usage\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When using \",(0,n.jsx)(e.code,{children:\"async/await\"}),\", you can handle errors by wrapping your asynchronous code in a \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" block. This allows you to catch any errors that occur during the execution of the \",(0,n.jsx)(e.code,{children:\"await\"}),\" statement.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    // Invalid URl\n    const response = await fetch('https://api.example.com/data');\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\n\nfetchData(); // Error fetching data: ....\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Nested asynchronous operations\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"If you have multiple asynchronous operations, you can nest \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" blocks to handle errors at different levels.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchUser() {\n  // Simulate a successful async operation\n  return { id: 1, name: 'Alice' };\n}\n\nasync function fetchUserPosts() {\n  // Simulate a failed async operation\n  throw new Error('Failed to fetch posts');\n}\n\nasync function loadUserData() {\n  try {\n    const user = await fetchUser();\n    console.log('User:', user);\n\n    try {\n      const posts = await fetchUserPosts();\n      console.log('Posts:', posts);\n    } catch (postsError) {\n      console.error('Error fetching posts:', postsError.message);\n    }\n  } catch (userError) {\n    console.error('Error fetching user:', userError.message);\n  }\n}\n\nloadUserData();\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Using \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" with Promises\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Basic usage\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When working with Promises, you can handle errors using the \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" method. This method is called if the Promise is rejected.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://api.example.com/data')\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error fetching data:', error));\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Chaining multiple Promises\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"If you have multiple Promises chained together, you can use a single \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" at the end to handle any errors that occur in any of the Promises.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://api.example.com/data')\n  .then((response) => response.json())\n  .then((data) => {\n    // Process data\n    return processData(data);\n  })\n  .then((result) => {\n    // Further processing\n    console.log(result);\n  })\n  .catch((error) => console.error('Error in the chain:', error));\n`})}),`\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/Learn/JavaScript/Asynchronous/Async_await\",children:\"MDN Web Docs: async/await\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises\",children:\"MDN Web Docs: Promises\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/promise-error-handling\",children:\"JavaScript.info: Error handling with promises\"})}),`\n`]})]})}function d(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(l,{...r})}):l(r)}return v(E);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-handle-errors-in-asynchronous-operations/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-handle-errors-in-asynchronous-operations/zh-CN.json
index ce3b24bdd..2da717e77 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-handle-errors-in-asynchronous-operations/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-handle-errors-in-asynchronous-operations/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-handle-errors-in-asynchronous-operations/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),y=(r,e)=>{for(var c in e)t(r,c,{get:e[c],enumerable:!0})},s=(r,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!f.call(r,a)&&a!==c&&t(r,a,{get:()=>e[a],enumerable:!(o=p(e,a))||o.enumerable});return r};var j=(r,e,c)=>(c=r!=null?d(u(r)):{},s(e||!r||!r.__esModule?t(c,\"default\",{value:r,enumerable:!0}):c,r)),w=r=>s(t({},\"__esModule\",{value:!0}),r);var h=g((U,i)=>{i.exports=_jsx_runtime});var D={};y(D,{default:()=>x,frontmatter:()=>v});var n=j(h()),v={title:\"\\u5982\\u4F55\\u5904\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u4E2D\\u7684\\u9519\\u8BEF\\uFF1F\"};function l(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u5904\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u4E2D\\u7684\\u9519\\u8BEF\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u5E26\\u6709 \",(0,n.jsx)(e.code,{children:\"async/await\"}),\" \\u8BED\\u6CD5\\u7684 \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" \\u5757\\u6216\\u5E26\\u6709 Promises \\u7684 \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" \\u65B9\\u6CD5\\u3002\\u4F8B\\u5982\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"async/await\"}),\"\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C06\\u4EE3\\u7801\\u5305\\u88C5\\u5728 \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" \\u5757\\u4E2D\\u4EE5\\u6355\\u83B7\\u4EFB\\u4F55\\u9519\\u8BEF\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    // Invalid URl\n    const response = await fetch('https://api.example.com/data');\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\n\nfetchData(); // Error fetching data: ....\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 Promises\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" \\u65B9\\u6CD5\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://api.example.com/data') // Invalid URl\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error fetching data:', error));\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"async/await\"})]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u57FA\\u672C\\u7528\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"async/await\"}),\" \\u65F6\\uFF0C\\u60A8\\u53EF\\u4EE5\\u901A\\u8FC7\\u5C06\\u5F02\\u6B65\\u4EE3\\u7801\\u5305\\u88C5\\u5728 \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" \\u5757\\u4E2D\\u6765\\u5904\\u7406\\u9519\\u8BEF\\u3002\\u8FD9\\u5141\\u8BB8\\u60A8\\u6355\\u83B7\\u5728\\u6267\\u884C \",(0,n.jsx)(e.code,{children:\"await\"}),\" \\u8BED\\u53E5\\u671F\\u95F4\\u53D1\\u751F\\u7684\\u4EFB\\u4F55\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    // Invalid URl\n    const response = await fetch('https://api.example.com/data');\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\n\nfetchData(); // Error fetching data: ....\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5D4C\\u5957\\u5F02\\u6B65\\u64CD\\u4F5C\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u60A8\\u6709\\u591A\\u4E2A\\u5F02\\u6B65\\u64CD\\u4F5C\\uFF0C\\u5219\\u53EF\\u4EE5\\u5D4C\\u5957 \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" \\u5757\\u4EE5\\u5904\\u7406\\u4E0D\\u540C\\u7EA7\\u522B\\u7684\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchUser() {\n  // Simulate a successful async operation\n  return { id: 1, name: 'Alice' };\n}\n\nasync function fetchUserPosts() {\n  // Simulate a failed async operation\n  throw new Error('Failed to fetch posts');\n}\n\nasync function loadUserData() {\n  try {\n    const user = await fetchUser();\n    console.log('User:', user);\n\n    try {\n      const posts = await fetchUserPosts();\n      console.log('Posts:', posts);\n    } catch (postsError) {\n      console.error('Error fetching posts:', postsError.message);\n    }\n  } catch (userError) {\n    console.error('Error fetching user:', userError.message);\n  }\n}\n\nloadUserData();\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" \\u548C Promises\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u57FA\\u672C\\u7528\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 Promises \\u65F6\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" \\u65B9\\u6CD5\\u5904\\u7406\\u9519\\u8BEF\\u3002\\u5982\\u679C Promise \\u88AB\\u62D2\\u7EDD\\uFF0C\\u5219\\u4F1A\\u8C03\\u7528\\u6B64\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://api.example.com/data')\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error fetching data:', error));\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u94FE\\u63A5\\u591A\\u4E2A Promises\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u60A8\\u5C06\\u591A\\u4E2A Promises \\u94FE\\u63A5\\u5728\\u4E00\\u8D77\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728\\u672B\\u5C3E\\u4F7F\\u7528\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" \\u6765\\u5904\\u7406\\u4EFB\\u4F55 Promise \\u4E2D\\u53D1\\u751F\\u7684\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://api.example.com/data')\n  .then((response) => response.json())\n  .then((data) => {\n    // Process data\n    return processData(data);\n  })\n  .then((result) => {\n    // Further processing\n    console.log(result);\n  })\n  .catch((error) => console.error('Error in the chain:', error));\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Learn/JavaScript/Asynchronous/Async_await\",children:\"MDN Web Docs: async/await\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises\",children:\"MDN Web Docs: Promises\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/promise-error-handling\",children:\"JavaScript.info: Error handling with promises\"})}),`\n`]})]})}function E(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(l,r)})):l(r)}var x=E;return w(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),j=(r,e)=>{for(var c in e)o(r,c,{get:e[c],enumerable:!0})},s=(r,e,c,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!g.call(r,a)&&a!==c&&o(r,a,{get:()=>e[a],enumerable:!(t=m(e,a))||t.enumerable});return r};var w=(r,e,c)=>(c=r!=null?p(f(r)):{},s(e||!r||!r.__esModule?o(c,\"default\",{value:r,enumerable:!0}):c,r)),v=r=>s(o({},\"__esModule\",{value:!0}),r);var h=y((P,i)=>{i.exports=_jsx_runtime});var x={};j(x,{default:()=>d,frontmatter:()=>E});var n=w(h()),E={title:\"\\u5982\\u4F55\\u5904\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u4E2D\\u7684\\u9519\\u8BEF\\uFF1F\"};function l(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u5904\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u4E2D\\u7684\\u9519\\u8BEF\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u5E26\\u6709 \",(0,n.jsx)(e.code,{children:\"async/await\"}),\" \\u8BED\\u6CD5\\u7684 \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" \\u5757\\u6216\\u5E26\\u6709 Promises \\u7684 \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" \\u65B9\\u6CD5\\u3002\\u4F8B\\u5982\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"async/await\"}),\"\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C06\\u4EE3\\u7801\\u5305\\u88C5\\u5728 \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" \\u5757\\u4E2D\\u4EE5\\u6355\\u83B7\\u4EFB\\u4F55\\u9519\\u8BEF\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    // Invalid URl\n    const response = await fetch('https://api.example.com/data');\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\n\nfetchData(); // Error fetching data: ....\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 Promises\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" \\u65B9\\u6CD5\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://api.example.com/data') // Invalid URl\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error fetching data:', error));\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"async/await\"})]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u57FA\\u672C\\u7528\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"async/await\"}),\" \\u65F6\\uFF0C\\u60A8\\u53EF\\u4EE5\\u901A\\u8FC7\\u5C06\\u5F02\\u6B65\\u4EE3\\u7801\\u5305\\u88C5\\u5728 \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" \\u5757\\u4E2D\\u6765\\u5904\\u7406\\u9519\\u8BEF\\u3002\\u8FD9\\u5141\\u8BB8\\u60A8\\u6355\\u83B7\\u5728\\u6267\\u884C \",(0,n.jsx)(e.code,{children:\"await\"}),\" \\u8BED\\u53E5\\u671F\\u95F4\\u53D1\\u751F\\u7684\\u4EFB\\u4F55\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    // Invalid URl\n    const response = await fetch('https://api.example.com/data');\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\n\nfetchData(); // Error fetching data: ....\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5D4C\\u5957\\u5F02\\u6B65\\u64CD\\u4F5C\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u60A8\\u6709\\u591A\\u4E2A\\u5F02\\u6B65\\u64CD\\u4F5C\\uFF0C\\u5219\\u53EF\\u4EE5\\u5D4C\\u5957 \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" \\u5757\\u4EE5\\u5904\\u7406\\u4E0D\\u540C\\u7EA7\\u522B\\u7684\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchUser() {\n  // Simulate a successful async operation\n  return { id: 1, name: 'Alice' };\n}\n\nasync function fetchUserPosts() {\n  // Simulate a failed async operation\n  throw new Error('Failed to fetch posts');\n}\n\nasync function loadUserData() {\n  try {\n    const user = await fetchUser();\n    console.log('User:', user);\n\n    try {\n      const posts = await fetchUserPosts();\n      console.log('Posts:', posts);\n    } catch (postsError) {\n      console.error('Error fetching posts:', postsError.message);\n    }\n  } catch (userError) {\n    console.error('Error fetching user:', userError.message);\n  }\n}\n\nloadUserData();\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" \\u548C Promises\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u57FA\\u672C\\u7528\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 Promises \\u65F6\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" \\u65B9\\u6CD5\\u5904\\u7406\\u9519\\u8BEF\\u3002\\u5982\\u679C Promise \\u88AB\\u62D2\\u7EDD\\uFF0C\\u5219\\u4F1A\\u8C03\\u7528\\u6B64\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://api.example.com/data')\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error fetching data:', error));\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u94FE\\u63A5\\u591A\\u4E2A Promises\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u60A8\\u5C06\\u591A\\u4E2A Promises \\u94FE\\u63A5\\u5728\\u4E00\\u8D77\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728\\u672B\\u5C3E\\u4F7F\\u7528\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" \\u6765\\u5904\\u7406\\u4EFB\\u4F55 Promise \\u4E2D\\u53D1\\u751F\\u7684\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://api.example.com/data')\n  .then((response) => response.json())\n  .then((data) => {\n    // Process data\n    return processData(data);\n  })\n  .then((result) => {\n    // Further processing\n    console.log(result);\n  })\n  .catch((error) => console.error('Error in the chain:', error));\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Learn/JavaScript/Asynchronous/Async_await\",children:\"MDN Web Docs: async/await\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises\",children:\"MDN Web Docs: Promises\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/promise-error-handling\",children:\"JavaScript.info: Error handling with promises\"})}),`\n`]})]})}function d(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(l,{...r})}):l(r)}return v(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-handle-errors-using-trycatch-blocks/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-handle-errors-using-trycatch-blocks/en-US.json
index 9a83f3c51..3160ca335 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-handle-errors-using-trycatch-blocks/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-handle-errors-using-trycatch-blocks/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-handle-errors-using-trycatch-blocks/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var p=(n,r)=>()=>(r||n((r={exports:{}}).exports,r),r.exports),m=(n,r)=>{for(var o in r)t(n,o,{get:r[o],enumerable:!0})},a=(n,r,o,l)=>{if(r&&typeof r==\"object\"||typeof r==\"function\")for(let c of f(r))!y.call(n,c)&&c!==o&&t(n,c,{get:()=>r[c],enumerable:!(l=u(r,c))||l.enumerable});return n};var b=(n,r,o)=>(o=n!=null?d(g(n)):{},a(r||!n||!n.__esModule?t(o,\"default\",{value:n,enumerable:!0}):o,n)),k=n=>a(t({},\"__esModule\",{value:!0}),n);var h=p((O,i)=>{i.exports=_jsx_runtime});var v={};m(v,{default:()=>E,frontmatter:()=>w});var e=b(h()),w={title:\"How do you handle errors using `try...catch` blocks?\"};function s(n){let r=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(r.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(r.p,{children:[\"To handle errors using \",(0,e.jsx)(r.code,{children:\"try...catch\"}),\" blocks, you wrap the code that might throw an error inside a \",(0,e.jsx)(r.code,{children:\"try\"}),\" block. If an error occurs, the control is transferred to the \",(0,e.jsx)(r.code,{children:\"catch\"}),\" block where you can handle the error. Optionally, you can use a \",(0,e.jsx)(r.code,{children:\"finally\"}),\" block to execute code regardless of whether an error occurred or not.\"]}),`\n`,(0,e.jsx)(r.pre,{children:(0,e.jsx)(r.code,{className:\"language-js\",children:`try {\n  // Code that may throw an error\n} catch (error) {\n  // Handle the error\n} finally {\n  // Code that will run regardless of an error\n}\n`})}),`\n`,(0,e.jsx)(r.hr,{}),`\n`,(0,e.jsxs)(r.h2,{children:[\"How do you handle errors using \",(0,e.jsx)(r.code,{children:\"try...catch\"}),\" blocks?\"]}),`\n`,(0,e.jsx)(r.h3,{children:\"Basic structure\"}),`\n`,(0,e.jsxs)(r.p,{children:[\"The \",(0,e.jsx)(r.code,{children:\"try...catch\"}),\" statement consists of a \",(0,e.jsx)(r.code,{children:\"try\"}),\" block, a \",(0,e.jsx)(r.code,{children:\"catch\"}),\" block, and optionally a \",(0,e.jsx)(r.code,{children:\"finally\"}),\" block.\"]}),`\n`,(0,e.jsx)(r.pre,{children:(0,e.jsx)(r.code,{className:\"language-js\",children:`try {\n  // Code that may throw an error\n} catch (error) {\n  // Handle the error\n} finally {\n  // Code that will run regardless of an error\n}\n`})}),`\n`,(0,e.jsx)(r.h3,{children:\"Example\"}),`\n`,(0,e.jsxs)(r.p,{children:[\"Here is an example of using \",(0,e.jsx)(r.code,{children:\"try...catch\"}),\" to handle errors:\"]}),`\n`,(0,e.jsx)(r.pre,{live:!0,children:(0,e.jsx)(r.code,{className:\"language-js\",children:`function riskyOperation() {\n  const invalidJsonString = '{\"name\": \"John}'; // Try changing this to a valid JSON string\n  return JSON.parse(invalidJsonString);\n}\n\ntry {\n  let result = riskyOperation();\n  console.log(result);\n} catch (error) {\n  console.error('An error occurred:', error.message);\n} finally {\n  console.log('This will run regardless of an error');\n}\n`})}),`\n`,(0,e.jsx)(r.h3,{children:\"Explanation\"}),`\n`,(0,e.jsxs)(r.ul,{children:[`\n`,(0,e.jsxs)(r.li,{children:[(0,e.jsxs)(r.strong,{children:[(0,e.jsx)(r.code,{children:\"try\"}),\" block\"]}),\": Contains code that might throw an error. If an error occurs, the control is transferred to the \",(0,e.jsx)(r.code,{children:\"catch\"}),\" block.\"]}),`\n`,(0,e.jsxs)(r.li,{children:[(0,e.jsxs)(r.strong,{children:[(0,e.jsx)(r.code,{children:\"catch\"}),\" block\"]}),\": Contains code to handle the error. The \",(0,e.jsx)(r.code,{children:\"error\"}),\" object contains information about the error.\"]}),`\n`,(0,e.jsxs)(r.li,{children:[(0,e.jsxs)(r.strong,{children:[(0,e.jsx)(r.code,{children:\"finally\"}),\" block\"]}),\": Contains code that will run regardless of whether an error occurred or not. This is useful for cleanup tasks.\"]}),`\n`]}),`\n`,(0,e.jsxs)(r.h3,{children:[\"Nested \",(0,e.jsx)(r.code,{children:\"try...catch\"}),\" blocks\"]}),`\n`,(0,e.jsxs)(r.p,{children:[\"You can nest \",(0,e.jsx)(r.code,{children:\"try...catch\"}),\" blocks to handle different levels of errors:\"]}),`\n`,(0,e.jsx)(r.pre,{live:!0,children:(0,e.jsx)(r.code,{className:\"language-js\",children:`function anotherRiskyOperation() {\n  const person = undefined;\n  console.log(person.name);\n}\n\ntry {\n  try {\n    anotherRiskyOperation();\n  } catch (innerError) {\n    // Error (if any) for anotherRiskyOperation caught here\n    console.error('Inner error:', innerError.message);\n  }\n} catch (outerError) {\n  // Inner error does not reach here\n  console.error('Outer error:', outerError.message);\n}\n`})}),`\n`,(0,e.jsx)(r.h3,{children:\"Re-throwing errors\"}),`\n`,(0,e.jsxs)(r.p,{children:[\"You can re-throw an error from the \",(0,e.jsx)(r.code,{children:\"catch\"}),\" block if you want it to be handled by an outer \",(0,e.jsx)(r.code,{children:\"try...catch\"}),\" block:\"]}),`\n`,(0,e.jsx)(r.pre,{live:!0,children:(0,e.jsx)(r.code,{className:\"language-js\",children:`function yetAnotherRiskyOperation() {\n  const numerator = 10;\n  const denominator = 0;\n  if (denominator === 0) {\n    throw new Error('Cannot divide by zero');\n  }\n\n  return numerator / denominator;\n}\n\ntry {\n  try {\n    const result = yetAnotherRiskyOperation();\n    console.log('Divisinon result:', result);\n  } catch (innerError) {\n    console.error('Inner error:', innerError.message);\n    throw innerError; // Re-throw the error\n  }\n} catch (outerError) {\n  console.error('Outer error:', outerError.message);\n}\n`})}),`\n`,(0,e.jsxs)(r.h3,{children:[\"Using \",(0,e.jsx)(r.code,{children:\"finally\"}),\" for cleanup\"]}),`\n`,(0,e.jsxs)(r.p,{children:[\"The \",(0,e.jsx)(r.code,{children:\"finally\"}),\" block is useful for cleanup tasks, such as closing a file or releasing resources:\"]}),`\n`,(0,e.jsx)(r.pre,{children:(0,e.jsx)(r.code,{className:\"language-js\",children:`// openFile() and closeFile() are custom implementations\ntry {\n  let file = openFile('example.txt');\n  // Perform operations on the file\n} catch (error) {\n  console.error('An error occurred:', error.message);\n} finally {\n  closeFile(file); // Ensure the file is closed\n}\n`})}),`\n`,(0,e.jsx)(r.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(r.ul,{children:[`\n`,(0,e.jsx)(r.li,{children:(0,e.jsx)(r.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch\",children:\"MDN Web Docs: try...catch\"})}),`\n`,(0,e.jsx)(r.li,{children:(0,e.jsx)(r.a,{href:\"https://javascript.info/try-catch\",children:'JavaScript.info: Error handling, \"try...catch\"'})}),`\n`,(0,e.jsx)(r.li,{children:(0,e.jsx)(r.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error\",children:\"MDN Web Docs: Error object\"})}),`\n`]})]})}function j(n={}){let{wrapper:r}=n.components||{};return r?(0,e.jsx)(r,Object.assign({},n,{children:(0,e.jsx)(s,n)})):s(n)}var E=j;return k(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var m=(n,r)=>()=>(r||n((r={exports:{}}).exports,r),r.exports),b=(n,r)=>{for(var o in r)t(n,o,{get:r[o],enumerable:!0})},a=(n,r,o,l)=>{if(r&&typeof r==\"object\"||typeof r==\"function\")for(let c of y(r))!p.call(n,c)&&c!==o&&t(n,c,{get:()=>r[c],enumerable:!(l=f(r,c))||l.enumerable});return n};var k=(n,r,o)=>(o=n!=null?u(g(n)):{},a(r||!n||!n.__esModule?t(o,\"default\",{value:n,enumerable:!0}):o,n)),w=n=>a(t({},\"__esModule\",{value:!0}),n);var h=m((x,i)=>{i.exports=_jsx_runtime});var j={};b(j,{default:()=>d,frontmatter:()=>E});var e=k(h()),E={title:\"How do you handle errors using `try...catch` blocks?\"};function s(n){let r={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...n.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(r.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(r.p,{children:[\"To handle errors using \",(0,e.jsx)(r.code,{children:\"try...catch\"}),\" blocks, you wrap the code that might throw an error inside a \",(0,e.jsx)(r.code,{children:\"try\"}),\" block. If an error occurs, the control is transferred to the \",(0,e.jsx)(r.code,{children:\"catch\"}),\" block where you can handle the error. Optionally, you can use a \",(0,e.jsx)(r.code,{children:\"finally\"}),\" block to execute code regardless of whether an error occurred or not.\"]}),`\n`,(0,e.jsx)(r.pre,{children:(0,e.jsx)(r.code,{className:\"language-js\",children:`try {\n  // Code that may throw an error\n} catch (error) {\n  // Handle the error\n} finally {\n  // Code that will run regardless of an error\n}\n`})}),`\n`,(0,e.jsx)(r.hr,{}),`\n`,(0,e.jsxs)(r.h2,{children:[\"How do you handle errors using \",(0,e.jsx)(r.code,{children:\"try...catch\"}),\" blocks?\"]}),`\n`,(0,e.jsx)(r.h3,{children:\"Basic structure\"}),`\n`,(0,e.jsxs)(r.p,{children:[\"The \",(0,e.jsx)(r.code,{children:\"try...catch\"}),\" statement consists of a \",(0,e.jsx)(r.code,{children:\"try\"}),\" block, a \",(0,e.jsx)(r.code,{children:\"catch\"}),\" block, and optionally a \",(0,e.jsx)(r.code,{children:\"finally\"}),\" block.\"]}),`\n`,(0,e.jsx)(r.pre,{children:(0,e.jsx)(r.code,{className:\"language-js\",children:`try {\n  // Code that may throw an error\n} catch (error) {\n  // Handle the error\n} finally {\n  // Code that will run regardless of an error\n}\n`})}),`\n`,(0,e.jsx)(r.h3,{children:\"Example\"}),`\n`,(0,e.jsxs)(r.p,{children:[\"Here is an example of using \",(0,e.jsx)(r.code,{children:\"try...catch\"}),\" to handle errors:\"]}),`\n`,(0,e.jsx)(r.pre,{live:!0,children:(0,e.jsx)(r.code,{className:\"language-js\",children:`function riskyOperation() {\n  const invalidJsonString = '{\"name\": \"John}'; // Try changing this to a valid JSON string\n  return JSON.parse(invalidJsonString);\n}\n\ntry {\n  let result = riskyOperation();\n  console.log(result);\n} catch (error) {\n  console.error('An error occurred:', error.message);\n} finally {\n  console.log('This will run regardless of an error');\n}\n`})}),`\n`,(0,e.jsx)(r.h3,{children:\"Explanation\"}),`\n`,(0,e.jsxs)(r.ul,{children:[`\n`,(0,e.jsxs)(r.li,{children:[(0,e.jsxs)(r.strong,{children:[(0,e.jsx)(r.code,{children:\"try\"}),\" block\"]}),\": Contains code that might throw an error. If an error occurs, the control is transferred to the \",(0,e.jsx)(r.code,{children:\"catch\"}),\" block.\"]}),`\n`,(0,e.jsxs)(r.li,{children:[(0,e.jsxs)(r.strong,{children:[(0,e.jsx)(r.code,{children:\"catch\"}),\" block\"]}),\": Contains code to handle the error. The \",(0,e.jsx)(r.code,{children:\"error\"}),\" object contains information about the error.\"]}),`\n`,(0,e.jsxs)(r.li,{children:[(0,e.jsxs)(r.strong,{children:[(0,e.jsx)(r.code,{children:\"finally\"}),\" block\"]}),\": Contains code that will run regardless of whether an error occurred or not. This is useful for cleanup tasks.\"]}),`\n`]}),`\n`,(0,e.jsxs)(r.h3,{children:[\"Nested \",(0,e.jsx)(r.code,{children:\"try...catch\"}),\" blocks\"]}),`\n`,(0,e.jsxs)(r.p,{children:[\"You can nest \",(0,e.jsx)(r.code,{children:\"try...catch\"}),\" blocks to handle different levels of errors:\"]}),`\n`,(0,e.jsx)(r.pre,{live:!0,children:(0,e.jsx)(r.code,{className:\"language-js\",children:`function anotherRiskyOperation() {\n  const person = undefined;\n  console.log(person.name);\n}\n\ntry {\n  try {\n    anotherRiskyOperation();\n  } catch (innerError) {\n    // Error (if any) for anotherRiskyOperation caught here\n    console.error('Inner error:', innerError.message);\n  }\n} catch (outerError) {\n  // Inner error does not reach here\n  console.error('Outer error:', outerError.message);\n}\n`})}),`\n`,(0,e.jsx)(r.h3,{children:\"Re-throwing errors\"}),`\n`,(0,e.jsxs)(r.p,{children:[\"You can re-throw an error from the \",(0,e.jsx)(r.code,{children:\"catch\"}),\" block if you want it to be handled by an outer \",(0,e.jsx)(r.code,{children:\"try...catch\"}),\" block:\"]}),`\n`,(0,e.jsx)(r.pre,{live:!0,children:(0,e.jsx)(r.code,{className:\"language-js\",children:`function yetAnotherRiskyOperation() {\n  const numerator = 10;\n  const denominator = 0;\n  if (denominator === 0) {\n    throw new Error('Cannot divide by zero');\n  }\n\n  return numerator / denominator;\n}\n\ntry {\n  try {\n    const result = yetAnotherRiskyOperation();\n    console.log('Divisinon result:', result);\n  } catch (innerError) {\n    console.error('Inner error:', innerError.message);\n    throw innerError; // Re-throw the error\n  }\n} catch (outerError) {\n  console.error('Outer error:', outerError.message);\n}\n`})}),`\n`,(0,e.jsxs)(r.h3,{children:[\"Using \",(0,e.jsx)(r.code,{children:\"finally\"}),\" for cleanup\"]}),`\n`,(0,e.jsxs)(r.p,{children:[\"The \",(0,e.jsx)(r.code,{children:\"finally\"}),\" block is useful for cleanup tasks, such as closing a file or releasing resources:\"]}),`\n`,(0,e.jsx)(r.pre,{children:(0,e.jsx)(r.code,{className:\"language-js\",children:`// openFile() and closeFile() are custom implementations\ntry {\n  let file = openFile('example.txt');\n  // Perform operations on the file\n} catch (error) {\n  console.error('An error occurred:', error.message);\n} finally {\n  closeFile(file); // Ensure the file is closed\n}\n`})}),`\n`,(0,e.jsx)(r.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(r.ul,{children:[`\n`,(0,e.jsx)(r.li,{children:(0,e.jsx)(r.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch\",children:\"MDN Web Docs: try...catch\"})}),`\n`,(0,e.jsx)(r.li,{children:(0,e.jsx)(r.a,{href:\"https://javascript.info/try-catch\",children:'JavaScript.info: Error handling, \"try...catch\"'})}),`\n`,(0,e.jsx)(r.li,{children:(0,e.jsx)(r.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error\",children:\"MDN Web Docs: Error object\"})}),`\n`]})]})}function d(n={}){let{wrapper:r}=n.components||{};return r?(0,e.jsx)(r,{...n,children:(0,e.jsx)(s,{...n})}):s(n)}return w(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-handle-errors-using-trycatch-blocks/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-handle-errors-using-trycatch-blocks/zh-CN.json
index d531fe5cd..d27a0ab93 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-handle-errors-using-trycatch-blocks/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-handle-errors-using-trycatch-blocks/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-handle-errors-using-trycatch-blocks/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var t=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var m=(e,r)=>()=>(r||e((r={exports:{}}).exports,r),r.exports),f=(e,r)=>{for(var c in r)t(e,c,{get:r[c],enumerable:!0})},i=(e,r,c,l)=>{if(r&&typeof r==\"object\"||typeof r==\"function\")for(let o of u(r))!p.call(e,o)&&o!==c&&t(e,o,{get:()=>r[o],enumerable:!(l=y(r,o))||l.enumerable});return e};var j=(e,r,c)=>(c=e!=null?s(g(e)):{},i(r||!e||!e.__esModule?t(c,\"default\",{value:e,enumerable:!0}):c,e)),v=e=>i(t({},\"__esModule\",{value:!0}),e);var h=m((N,a)=>{a.exports=_jsx_runtime});var b={};f(b,{default:()=>x,frontmatter:()=>E});var n=j(h()),E={title:\"\\u5982\\u4F55\\u4F7F\\u7528 `try...catch` \\u5757\\u5904\\u7406\\u9519\\u8BEF\\uFF1F\"};function d(e){let r=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(r.p,{children:[\"\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(r.code,{children:\"try...catch\"}),\" \\u5757\\u5904\\u7406\\u9519\\u8BEF\\uFF0C\\u60A8\\u9700\\u8981\\u5C06\\u53EF\\u80FD\\u629B\\u51FA\\u9519\\u8BEF\\u7684\\u4EE3\\u7801\\u5305\\u88C5\\u5728 \",(0,n.jsx)(r.code,{children:\"try\"}),\" \\u5757\\u4E2D\\u3002\\u5982\\u679C\\u53D1\\u751F\\u9519\\u8BEF\\uFF0C\\u63A7\\u5236\\u6743\\u5C06\\u8F6C\\u79FB\\u5230 \",(0,n.jsx)(r.code,{children:\"catch\"}),\" \\u5757\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728\\u5176\\u4E2D\\u5904\\u7406\\u9519\\u8BEF\\u3002\\u6216\\u8005\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(r.code,{children:\"finally\"}),\" \\u5757\\u6765\\u6267\\u884C\\u4EE3\\u7801\\uFF0C\\u65E0\\u8BBA\\u662F\\u5426\\u53D1\\u751F\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:\"language-js\",children:`try {\n  // Code that may throw an error\n} catch (error) {\n  // Handle the error\n} finally {\n  // Code that will run regardless of an error\n}\n`})}),`\n`,(0,n.jsx)(r.hr,{}),`\n`,(0,n.jsxs)(r.h2,{children:[\"\\u5982\\u4F55\\u4F7F\\u7528 \",(0,n.jsx)(r.code,{children:\"try...catch\"}),\" \\u5757\\u5904\\u7406\\u9519\\u8BEF\\uFF1F\"]}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u57FA\\u672C\\u7ED3\\u6784\"}),`\n`,(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.code,{children:\"try...catch\"}),\" \\u8BED\\u53E5\\u7531 \",(0,n.jsx)(r.code,{children:\"try\"}),\" \\u5757\\u3001\",(0,n.jsx)(r.code,{children:\"catch\"}),\" \\u5757\\u548C\\u53EF\\u9009\\u7684 \",(0,n.jsx)(r.code,{children:\"finally\"}),\" \\u5757\\u7EC4\\u6210\\u3002\"]}),`\n`,(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:\"language-js\",children:`try {\n  // Code that may throw an error\n} catch (error) {\n  // Handle the error\n} finally {\n  // Code that will run regardless of an error\n}\n`})}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsxs)(r.p,{children:[\"\\u4EE5\\u4E0B\\u662F\\u4F7F\\u7528 \",(0,n.jsx)(r.code,{children:\"try...catch\"}),\" \\u5904\\u7406\\u9519\\u8BEF\\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(r.pre,{live:!0,children:(0,n.jsx)(r.code,{className:\"language-js\",children:`function riskyOperation() {\n  const invalidJsonString = '{\"name\": \"John}'; // Try changing this to a valid JSON string\n  return JSON.parse(invalidJsonString);\n}\n\ntry {\n  let result = riskyOperation();\n  console.log(result);\n} catch (error) {\n  console.error('An error occurred:', error.message);\n} finally {\n  console.log('This will run regardless of an error');\n}\n`})}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u89E3\\u91CA\"}),`\n`,(0,n.jsxs)(r.ul,{children:[`\n`,(0,n.jsxs)(r.li,{children:[(0,n.jsxs)(r.strong,{children:[(0,n.jsx)(r.code,{children:\"try\"}),\" \\u5757\"]}),\"\\uFF1A\\u5305\\u542B\\u53EF\\u80FD\\u629B\\u51FA\\u9519\\u8BEF\\u7684\\u4EE3\\u7801\\u3002\\u5982\\u679C\\u53D1\\u751F\\u9519\\u8BEF\\uFF0C\\u63A7\\u5236\\u6743\\u5C06\\u8F6C\\u79FB\\u5230 \",(0,n.jsx)(r.code,{children:\"catch\"}),\" \\u5757\\u3002\"]}),`\n`,(0,n.jsxs)(r.li,{children:[(0,n.jsxs)(r.strong,{children:[(0,n.jsx)(r.code,{children:\"catch\"}),\" \\u5757\"]}),\"\\uFF1A\\u5305\\u542B\\u5904\\u7406\\u9519\\u8BEF\\u7684\\u4EE3\\u7801\\u3002\",(0,n.jsx)(r.code,{children:\"error\"}),\" \\u5BF9\\u8C61\\u5305\\u542B\\u6709\\u5173\\u9519\\u8BEF\\u7684\\u4FE1\\u606F\\u3002\"]}),`\n`,(0,n.jsxs)(r.li,{children:[(0,n.jsxs)(r.strong,{children:[(0,n.jsx)(r.code,{children:\"finally\"}),\" \\u5757\"]}),\"\\uFF1A\\u5305\\u542B\\u65E0\\u8BBA\\u662F\\u5426\\u53D1\\u751F\\u9519\\u8BEF\\u90FD\\u5C06\\u8FD0\\u884C\\u7684\\u4EE3\\u7801\\u3002\\u8FD9\\u5BF9\\u4E8E\\u6E05\\u7406\\u4EFB\\u52A1\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(r.h3,{children:[\"\\u5D4C\\u5957 \",(0,n.jsx)(r.code,{children:\"try...catch\"}),\" \\u5757\"]}),`\n`,(0,n.jsxs)(r.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u5D4C\\u5957 \",(0,n.jsx)(r.code,{children:\"try...catch\"}),\" \\u5757\\u6765\\u5904\\u7406\\u4E0D\\u540C\\u7EA7\\u522B\\u7684\\u9519\\u8BEF\\uFF1A\"]}),`\n`,(0,n.jsx)(r.pre,{live:!0,children:(0,n.jsx)(r.code,{className:\"language-js\",children:`function anotherRiskyOperation() {\n  const person = undefined;\n  console.log(person.name);\n}\n\ntry {\n  try {\n    anotherRiskyOperation();\n  } catch (innerError) {\n    // Error (if any) for anotherRiskyOperation caught here\n    console.error('Inner error:', innerError.message);\n  }\n} catch (outerError) {\n  // Inner error does not reach here\n  console.error('Outer error:', outerError.message);\n}\n`})}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u91CD\\u65B0\\u629B\\u51FA\\u9519\\u8BEF\"}),`\n`,(0,n.jsxs)(r.p,{children:[\"\\u5982\\u679C\\u5E0C\\u671B\\u7531\\u5916\\u90E8 \",(0,n.jsx)(r.code,{children:\"try...catch\"}),\" \\u5757\\u5904\\u7406\\u9519\\u8BEF\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4ECE \",(0,n.jsx)(r.code,{children:\"catch\"}),\" \\u5757\\u91CD\\u65B0\\u629B\\u51FA\\u9519\\u8BEF\\uFF1A\"]}),`\n`,(0,n.jsx)(r.pre,{live:!0,children:(0,n.jsx)(r.code,{className:\"language-js\",children:`function yetAnotherRiskyOperation() {\n  const numerator = 10;\n  const denominator = 0;\n  if (denominator === 0) {\n    throw new Error('Cannot divide by zero');\n  }\n\n  return numerator / denominator;\n}\n\ntry {\n  try {\n    const result = yetAnotherRiskyOperation();\n    console.log('Divisinon result:', result);\n  } catch (innerError) {\n    console.error('Inner error:', innerError.message);\n    throw innerError; // Re-throw the error\n  }\n} catch (outerError) {\n  console.error('Outer error:', outerError.message);\n}\n`})}),`\n`,(0,n.jsxs)(r.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(r.code,{children:\"finally\"}),\" \\u8FDB\\u884C\\u6E05\\u7406\"]}),`\n`,(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.code,{children:\"finally\"}),\" \\u5757\\u5BF9\\u4E8E\\u6E05\\u7406\\u4EFB\\u52A1\\u5F88\\u6709\\u7528\\uFF0C\\u4F8B\\u5982\\u5173\\u95ED\\u6587\\u4EF6\\u6216\\u91CA\\u653E\\u8D44\\u6E90\\uFF1A\"]}),`\n`,(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:\"language-js\",children:`// openFile() \\u548C closeFile() \\u662F\\u81EA\\u5B9A\\u4E49\\u5B9E\\u73B0\ntry {\n  let file = openFile('example.txt');\n  // \\u5BF9\\u6587\\u4EF6\\u6267\\u884C\\u64CD\\u4F5C\n} catch (error) {\n  console.error('\\u53D1\\u751F\\u9519\\u8BEF:', error.message);\n} finally {\n  closeFile(file); // \\u786E\\u4FDD\\u6587\\u4EF6\\u5DF2\\u5173\\u95ED\n}\n`})}),`\n`,(0,n.jsx)(r.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(r.ul,{children:[`\n`,(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch\",children:\"MDN Web Docs: try...catch\"})}),`\n`,(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:\"https://javascript.info/try-catch\",children:'JavaScript.info: Error handling, \"try...catch\"'})}),`\n`,(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error\",children:\"MDN Web Docs: Error object\"})}),`\n`]})]})}function O(e={}){let{wrapper:r}=e.components||{};return r?(0,n.jsx)(r,Object.assign({},e,{children:(0,n.jsx)(d,e)})):d(e)}var x=O;return v(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var y=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(e,r)=>()=>(r||e((r={exports:{}}).exports,r),r.exports),j=(e,r)=>{for(var c in r)t(e,c,{get:r[c],enumerable:!0})},i=(e,r,c,l)=>{if(r&&typeof r==\"object\"||typeof r==\"function\")for(let o of g(r))!m.call(e,o)&&o!==c&&t(e,o,{get:()=>r[o],enumerable:!(l=u(r,o))||l.enumerable});return e};var v=(e,r,c)=>(c=e!=null?y(p(e)):{},i(r||!e||!e.__esModule?t(c,\"default\",{value:e,enumerable:!0}):c,e)),E=e=>i(t({},\"__esModule\",{value:!0}),e);var a=f((N,h)=>{h.exports=_jsx_runtime});var x={};j(x,{default:()=>s,frontmatter:()=>O});var n=v(a()),O={title:\"\\u5982\\u4F55\\u4F7F\\u7528 `try...catch` \\u5757\\u5904\\u7406\\u9519\\u8BEF\\uFF1F\"};function d(e){let r={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(r.p,{children:[\"\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(r.code,{children:\"try...catch\"}),\" \\u5757\\u5904\\u7406\\u9519\\u8BEF\\uFF0C\\u60A8\\u9700\\u8981\\u5C06\\u53EF\\u80FD\\u629B\\u51FA\\u9519\\u8BEF\\u7684\\u4EE3\\u7801\\u5305\\u88C5\\u5728 \",(0,n.jsx)(r.code,{children:\"try\"}),\" \\u5757\\u4E2D\\u3002\\u5982\\u679C\\u53D1\\u751F\\u9519\\u8BEF\\uFF0C\\u63A7\\u5236\\u6743\\u5C06\\u8F6C\\u79FB\\u5230 \",(0,n.jsx)(r.code,{children:\"catch\"}),\" \\u5757\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728\\u5176\\u4E2D\\u5904\\u7406\\u9519\\u8BEF\\u3002\\u6216\\u8005\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(r.code,{children:\"finally\"}),\" \\u5757\\u6765\\u6267\\u884C\\u4EE3\\u7801\\uFF0C\\u65E0\\u8BBA\\u662F\\u5426\\u53D1\\u751F\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:\"language-js\",children:`try {\n  // Code that may throw an error\n} catch (error) {\n  // Handle the error\n} finally {\n  // Code that will run regardless of an error\n}\n`})}),`\n`,(0,n.jsx)(r.hr,{}),`\n`,(0,n.jsxs)(r.h2,{children:[\"\\u5982\\u4F55\\u4F7F\\u7528 \",(0,n.jsx)(r.code,{children:\"try...catch\"}),\" \\u5757\\u5904\\u7406\\u9519\\u8BEF\\uFF1F\"]}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u57FA\\u672C\\u7ED3\\u6784\"}),`\n`,(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.code,{children:\"try...catch\"}),\" \\u8BED\\u53E5\\u7531 \",(0,n.jsx)(r.code,{children:\"try\"}),\" \\u5757\\u3001\",(0,n.jsx)(r.code,{children:\"catch\"}),\" \\u5757\\u548C\\u53EF\\u9009\\u7684 \",(0,n.jsx)(r.code,{children:\"finally\"}),\" \\u5757\\u7EC4\\u6210\\u3002\"]}),`\n`,(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:\"language-js\",children:`try {\n  // Code that may throw an error\n} catch (error) {\n  // Handle the error\n} finally {\n  // Code that will run regardless of an error\n}\n`})}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsxs)(r.p,{children:[\"\\u4EE5\\u4E0B\\u662F\\u4F7F\\u7528 \",(0,n.jsx)(r.code,{children:\"try...catch\"}),\" \\u5904\\u7406\\u9519\\u8BEF\\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(r.pre,{live:!0,children:(0,n.jsx)(r.code,{className:\"language-js\",children:`function riskyOperation() {\n  const invalidJsonString = '{\"name\": \"John}'; // Try changing this to a valid JSON string\n  return JSON.parse(invalidJsonString);\n}\n\ntry {\n  let result = riskyOperation();\n  console.log(result);\n} catch (error) {\n  console.error('An error occurred:', error.message);\n} finally {\n  console.log('This will run regardless of an error');\n}\n`})}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u89E3\\u91CA\"}),`\n`,(0,n.jsxs)(r.ul,{children:[`\n`,(0,n.jsxs)(r.li,{children:[(0,n.jsxs)(r.strong,{children:[(0,n.jsx)(r.code,{children:\"try\"}),\" \\u5757\"]}),\"\\uFF1A\\u5305\\u542B\\u53EF\\u80FD\\u629B\\u51FA\\u9519\\u8BEF\\u7684\\u4EE3\\u7801\\u3002\\u5982\\u679C\\u53D1\\u751F\\u9519\\u8BEF\\uFF0C\\u63A7\\u5236\\u6743\\u5C06\\u8F6C\\u79FB\\u5230 \",(0,n.jsx)(r.code,{children:\"catch\"}),\" \\u5757\\u3002\"]}),`\n`,(0,n.jsxs)(r.li,{children:[(0,n.jsxs)(r.strong,{children:[(0,n.jsx)(r.code,{children:\"catch\"}),\" \\u5757\"]}),\"\\uFF1A\\u5305\\u542B\\u5904\\u7406\\u9519\\u8BEF\\u7684\\u4EE3\\u7801\\u3002\",(0,n.jsx)(r.code,{children:\"error\"}),\" \\u5BF9\\u8C61\\u5305\\u542B\\u6709\\u5173\\u9519\\u8BEF\\u7684\\u4FE1\\u606F\\u3002\"]}),`\n`,(0,n.jsxs)(r.li,{children:[(0,n.jsxs)(r.strong,{children:[(0,n.jsx)(r.code,{children:\"finally\"}),\" \\u5757\"]}),\"\\uFF1A\\u5305\\u542B\\u65E0\\u8BBA\\u662F\\u5426\\u53D1\\u751F\\u9519\\u8BEF\\u90FD\\u5C06\\u8FD0\\u884C\\u7684\\u4EE3\\u7801\\u3002\\u8FD9\\u5BF9\\u4E8E\\u6E05\\u7406\\u4EFB\\u52A1\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(r.h3,{children:[\"\\u5D4C\\u5957 \",(0,n.jsx)(r.code,{children:\"try...catch\"}),\" \\u5757\"]}),`\n`,(0,n.jsxs)(r.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u5D4C\\u5957 \",(0,n.jsx)(r.code,{children:\"try...catch\"}),\" \\u5757\\u6765\\u5904\\u7406\\u4E0D\\u540C\\u7EA7\\u522B\\u7684\\u9519\\u8BEF\\uFF1A\"]}),`\n`,(0,n.jsx)(r.pre,{live:!0,children:(0,n.jsx)(r.code,{className:\"language-js\",children:`function anotherRiskyOperation() {\n  const person = undefined;\n  console.log(person.name);\n}\n\ntry {\n  try {\n    anotherRiskyOperation();\n  } catch (innerError) {\n    // Error (if any) for anotherRiskyOperation caught here\n    console.error('Inner error:', innerError.message);\n  }\n} catch (outerError) {\n  // Inner error does not reach here\n  console.error('Outer error:', outerError.message);\n}\n`})}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u91CD\\u65B0\\u629B\\u51FA\\u9519\\u8BEF\"}),`\n`,(0,n.jsxs)(r.p,{children:[\"\\u5982\\u679C\\u5E0C\\u671B\\u7531\\u5916\\u90E8 \",(0,n.jsx)(r.code,{children:\"try...catch\"}),\" \\u5757\\u5904\\u7406\\u9519\\u8BEF\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4ECE \",(0,n.jsx)(r.code,{children:\"catch\"}),\" \\u5757\\u91CD\\u65B0\\u629B\\u51FA\\u9519\\u8BEF\\uFF1A\"]}),`\n`,(0,n.jsx)(r.pre,{live:!0,children:(0,n.jsx)(r.code,{className:\"language-js\",children:`function yetAnotherRiskyOperation() {\n  const numerator = 10;\n  const denominator = 0;\n  if (denominator === 0) {\n    throw new Error('Cannot divide by zero');\n  }\n\n  return numerator / denominator;\n}\n\ntry {\n  try {\n    const result = yetAnotherRiskyOperation();\n    console.log('Divisinon result:', result);\n  } catch (innerError) {\n    console.error('Inner error:', innerError.message);\n    throw innerError; // Re-throw the error\n  }\n} catch (outerError) {\n  console.error('Outer error:', outerError.message);\n}\n`})}),`\n`,(0,n.jsxs)(r.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(r.code,{children:\"finally\"}),\" \\u8FDB\\u884C\\u6E05\\u7406\"]}),`\n`,(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.code,{children:\"finally\"}),\" \\u5757\\u5BF9\\u4E8E\\u6E05\\u7406\\u4EFB\\u52A1\\u5F88\\u6709\\u7528\\uFF0C\\u4F8B\\u5982\\u5173\\u95ED\\u6587\\u4EF6\\u6216\\u91CA\\u653E\\u8D44\\u6E90\\uFF1A\"]}),`\n`,(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:\"language-js\",children:`// openFile() \\u548C closeFile() \\u662F\\u81EA\\u5B9A\\u4E49\\u5B9E\\u73B0\ntry {\n  let file = openFile('example.txt');\n  // \\u5BF9\\u6587\\u4EF6\\u6267\\u884C\\u64CD\\u4F5C\n} catch (error) {\n  console.error('\\u53D1\\u751F\\u9519\\u8BEF:', error.message);\n} finally {\n  closeFile(file); // \\u786E\\u4FDD\\u6587\\u4EF6\\u5DF2\\u5173\\u95ED\n}\n`})}),`\n`,(0,n.jsx)(r.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(r.ul,{children:[`\n`,(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch\",children:\"MDN Web Docs: try...catch\"})}),`\n`,(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:\"https://javascript.info/try-catch\",children:'JavaScript.info: Error handling, \"try...catch\"'})}),`\n`,(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error\",children:\"MDN Web Docs: Error object\"})}),`\n`]})]})}function s(e={}){let{wrapper:r}=e.components||{};return r?(0,n.jsx)(r,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}return E(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-import-and-export-modules-in-javascript/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-import-and-export-modules-in-javascript/en-US.json
index 87fa0773d..255693274 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-import-and-export-modules-in-javascript/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-import-and-export-modules-in-javascript/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-import-and-export-modules-in-javascript/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var t in e)i(o,t,{get:e[t],enumerable:!0})},c=(o,e,t,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!y.call(o,r)&&r!==t&&i(o,r,{get:()=>e[r],enumerable:!(l=h(e,r))||l.enumerable});return o};var g=(o,e,t)=>(t=o!=null?s(p(o)):{},c(e||!o||!o.__esModule?i(t,\"default\",{value:o,enumerable:!0}):t,o)),b=o=>c(i({},\"__esModule\",{value:!0}),o);var d=f((T,a)=>{a.exports=_jsx_runtime});var w={};x(w,{default:()=>F,frontmatter:()=>j});var n=g(d()),j={title:\"How do you import and export modules in JavaScript?\"};function m(o){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, you can import and export modules using the \",(0,n.jsx)(e.code,{children:\"import\"}),\" and \",(0,n.jsx)(e.code,{children:\"export\"}),\" statements. To export a module, you can use \",(0,n.jsx)(e.code,{children:\"export\"}),\" before a function, variable, or class, or use \",(0,n.jsx)(e.code,{children:\"export default\"}),\" for a single default export. To import a module, you use the \",(0,n.jsx)(e.code,{children:\"import\"}),\" statement followed by the name of the exported module and the path to the module file.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Exporting a module\nexport const myFunction = () => {\n  /* ... */\n};\nexport default myFunction;\n\n// Importing a module\nimport { myFunction } from './myModule';\nimport myFunction from './myModule';\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Exporting modules\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Named exports\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can export multiple named items from a module. Use the \",(0,n.jsx)(e.code,{children:\"export\"}),\" keyword before the function, variable, or class you want to export.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// myModule.js\nexport const myFunction = () => {\n  console.log('This is my function');\n};\n\nexport const myVariable = 42;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Default exports\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A module can have one default export. Use the \",(0,n.jsx)(e.code,{children:\"export default\"}),\" keyword to export a single item.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// myModule.js\nconst myFunction = () => {\n  console.log('This is my function');\n};\n\nexport default myFunction;\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Importing modules\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Importing named exports\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To import named exports, use the \",(0,n.jsx)(e.code,{children:\"import\"}),\" statement followed by curly braces containing the names of the exports.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// main.js\nimport { myFunction, myVariable } from './myModule';\n\nmyFunction(); // This is my function\nconsole.log(myVariable); // 42\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Importing default exports\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To import a default export, use the \",(0,n.jsx)(e.code,{children:\"import\"}),\" statement followed by a name of your choice.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// main.js\nimport myFunction from './myModule';\n\nmyFunction(); // This is my function\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Importing all exports\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can import all named exports from a module using the \",(0,n.jsx)(e.code,{children:\"*\"}),\" syntax and an alias.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// main.js\nimport * as myModule from './myModule';\n\nmyModule.myFunction(); // This is my function\nconsole.log(myModule.myVariable); // 42\n`})}),`\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/Web/JavaScript/Reference/Statements/import\",children:\"MDN Web Docs: import\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export\",children:\"MDN Web Docs: export\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.sitepoint.com/understanding-es6-modules/\",children:\"JavaScript Modules: A Beginner\\u2019s Guide\"})}),`\n`]})]})}function M(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(m,o)})):m(o)}var F=M;return b(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),g=(o,e)=>{for(var t in e)i(o,t,{get:e[t],enumerable:!0})},c=(o,e,t,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!f.call(o,r)&&r!==t&&i(o,r,{get:()=>e[r],enumerable:!(l=u(e,r))||l.enumerable});return o};var b=(o,e,t)=>(t=o!=null?h(y(o)):{},c(e||!o||!o.__esModule?i(t,\"default\",{value:o,enumerable:!0}):t,o)),j=o=>c(i({},\"__esModule\",{value:!0}),o);var d=x((v,a)=>{a.exports=_jsx_runtime});var F={};g(F,{default:()=>s,frontmatter:()=>M});var n=b(d()),M={title:\"How do you import and export modules in JavaScript?\"};function m(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, you can import and export modules using the \",(0,n.jsx)(e.code,{children:\"import\"}),\" and \",(0,n.jsx)(e.code,{children:\"export\"}),\" statements. To export a module, you can use \",(0,n.jsx)(e.code,{children:\"export\"}),\" before a function, variable, or class, or use \",(0,n.jsx)(e.code,{children:\"export default\"}),\" for a single default export. To import a module, you use the \",(0,n.jsx)(e.code,{children:\"import\"}),\" statement followed by the name of the exported module and the path to the module file.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Exporting a module\nexport const myFunction = () => {\n  /* ... */\n};\nexport default myFunction;\n\n// Importing a module\nimport { myFunction } from './myModule';\nimport myFunction from './myModule';\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Exporting modules\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Named exports\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can export multiple named items from a module. Use the \",(0,n.jsx)(e.code,{children:\"export\"}),\" keyword before the function, variable, or class you want to export.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// myModule.js\nexport const myFunction = () => {\n  console.log('This is my function');\n};\n\nexport const myVariable = 42;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Default exports\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A module can have one default export. Use the \",(0,n.jsx)(e.code,{children:\"export default\"}),\" keyword to export a single item.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// myModule.js\nconst myFunction = () => {\n  console.log('This is my function');\n};\n\nexport default myFunction;\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Importing modules\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Importing named exports\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To import named exports, use the \",(0,n.jsx)(e.code,{children:\"import\"}),\" statement followed by curly braces containing the names of the exports.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// main.js\nimport { myFunction, myVariable } from './myModule';\n\nmyFunction(); // This is my function\nconsole.log(myVariable); // 42\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Importing default exports\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To import a default export, use the \",(0,n.jsx)(e.code,{children:\"import\"}),\" statement followed by a name of your choice.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// main.js\nimport myFunction from './myModule';\n\nmyFunction(); // This is my function\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Importing all exports\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can import all named exports from a module using the \",(0,n.jsx)(e.code,{children:\"*\"}),\" syntax and an alias.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// main.js\nimport * as myModule from './myModule';\n\nmyModule.myFunction(); // This is my function\nconsole.log(myModule.myVariable); // 42\n`})}),`\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/Web/JavaScript/Reference/Statements/import\",children:\"MDN Web Docs: import\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export\",children:\"MDN Web Docs: export\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.sitepoint.com/understanding-es6-modules/\",children:\"JavaScript Modules: A Beginner\\u2019s Guide\"})}),`\n`]})]})}function s(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(m,{...o})}):m(o)}return j(F);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-import-and-export-modules-in-javascript/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-import-and-export-modules-in-javascript/zh-CN.json
index 7bac8b30e..ff05013b6 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-import-and-export-modules-in-javascript/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-import-and-export-modules-in-javascript/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-import-and-export-modules-in-javascript/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var g=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),f=(o,n)=>{for(var r in n)i(o,r,{get:n[r],enumerable:!0})},t=(o,n,r,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of p(n))!y.call(o,c)&&c!==r&&i(o,c,{get:()=>n[c],enumerable:!(l=h(n,c))||l.enumerable});return o};var x=(o,n,r)=>(r=o!=null?m(u(o)):{},t(n||!o||!o.__esModule?i(r,\"default\",{value:o,enumerable:!0}):r,o)),j=o=>t(i({},\"__esModule\",{value:!0}),o);var s=g((v,d)=>{d.exports=_jsx_runtime});var S={};f(S,{default:()=>b,frontmatter:()=>M});var e=x(s()),M={title:\"\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u5BFC\\u5165\\u548C\\u5BFC\\u51FA\\u6A21\\u5757\\uFF1F\"};function a(o){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"import\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"export\"}),\" \\u8BED\\u53E5\\u5BFC\\u5165\\u548C\\u5BFC\\u51FA\\u6A21\\u5757\\u3002\\u8981\\u5BFC\\u51FA\\u6A21\\u5757\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728\\u51FD\\u6570\\u3001\\u53D8\\u91CF\\u6216\\u7C7B\\u4E4B\\u524D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"export\"}),\"\\uFF0C\\u6216\\u8005\\u5BF9\\u5355\\u4E2A\\u9ED8\\u8BA4\\u5BFC\\u51FA\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"export default\"}),\"\\u3002\\u8981\\u5BFC\\u5165\\u6A21\\u5757\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"import\"}),\" \\u8BED\\u53E5\\uFF0C\\u540E\\u8DDF\\u5DF2\\u5BFC\\u51FA\\u6A21\\u5757\\u7684\\u540D\\u79F0\\u548C\\u6A21\\u5757\\u6587\\u4EF6\\u7684\\u8DEF\\u5F84\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Exporting a module\nexport const myFunction = () => {\n  /* ... */\n};\nexport default myFunction;\n\n// Importing a module\nimport { myFunction } from './myModule';\nimport myFunction from './myModule';\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5BFC\\u51FA\\u6A21\\u5757\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u547D\\u540D\\u5BFC\\u51FA\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4ECE\\u6A21\\u5757\\u4E2D\\u5BFC\\u51FA\\u591A\\u4E2A\\u5DF2\\u547D\\u540D\\u7684\\u9879\\u76EE\\u3002\\u5728\\u8981\\u5BFC\\u51FA\\u7684\\u51FD\\u6570\\u3001\\u53D8\\u91CF\\u6216\\u7C7B\\u4E4B\\u524D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"export\"}),\" \\u5173\\u952E\\u5B57\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// myModule.js\nexport const myFunction = () => {\n  console.log('This is my function');\n};\n\nexport const myVariable = 42;\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9ED8\\u8BA4\\u5BFC\\u51FA\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E00\\u4E2A\\u6A21\\u5757\\u53EF\\u4EE5\\u6709\\u4E00\\u4E2A\\u9ED8\\u8BA4\\u5BFC\\u51FA\\u3002\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"export default\"}),\" \\u5173\\u952E\\u5B57\\u5BFC\\u51FA\\u4E00\\u4E2A\\u9879\\u76EE\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// myModule.js\nconst myFunction = () => {\n  console.log('This is my function');\n};\n\nexport default myFunction;\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5BFC\\u5165\\u6A21\\u5757\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5BFC\\u5165\\u547D\\u540D\\u5BFC\\u51FA\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8981\\u5BFC\\u5165\\u547D\\u540D\\u5BFC\\u51FA\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"import\"}),\" \\u8BED\\u53E5\\uFF0C\\u540E\\u8DDF\\u5305\\u542B\\u5BFC\\u51FA\\u540D\\u79F0\\u7684\\u62EC\\u53F7\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// main.js\nimport { myFunction, myVariable } from './myModule';\n\nmyFunction(); // This is my function\nconsole.log(myVariable); // 42\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5BFC\\u5165\\u9ED8\\u8BA4\\u5BFC\\u51FA\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8981\\u5BFC\\u5165\\u9ED8\\u8BA4\\u5BFC\\u51FA\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"import\"}),\" \\u8BED\\u53E5\\uFF0C\\u540E\\u8DDF\\u60A8\\u9009\\u62E9\\u7684\\u540D\\u79F0\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// main.js\nimport myFunction from './myModule';\n\nmyFunction(); // This is my function\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5BFC\\u5165\\u6240\\u6709\\u5BFC\\u51FA\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"*\"}),\" \\u8BED\\u6CD5\\u548C\\u522B\\u540D\\u4ECE\\u6A21\\u5757\\u5BFC\\u5165\\u6240\\u6709\\u5DF2\\u547D\\u540D\\u7684\\u5BFC\\u51FA\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// main.js\nimport * as myModule from './myModule';\n\nmyModule.myFunction(); // This is my function\nconsole.log(myModule.myVariable); // 42\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import\",children:\"MDN Web Docs: import\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export\",children:\"MDN Web Docs: export\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.sitepoint.com/understanding-es6-modules/\",children:\"JavaScript Modules: A Beginner\\u2019s Guide\"})}),`\n`]})]})}function F(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,Object.assign({},o,{children:(0,e.jsx)(a,o)})):a(o)}var b=F;return j(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),x=(o,n)=>{for(var r in n)i(o,r,{get:n[r],enumerable:!0})},t=(o,n,r,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of u(n))!f.call(o,c)&&c!==r&&i(o,c,{get:()=>n[c],enumerable:!(l=p(n,c))||l.enumerable});return o};var j=(o,n,r)=>(r=o!=null?s(y(o)):{},t(n||!o||!o.__esModule?i(r,\"default\",{value:o,enumerable:!0}):r,o)),M=o=>t(i({},\"__esModule\",{value:!0}),o);var m=g((N,d)=>{d.exports=_jsx_runtime});var S={};x(S,{default:()=>a,frontmatter:()=>F});var e=j(m()),F={title:\"\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u5BFC\\u5165\\u548C\\u5BFC\\u51FA\\u6A21\\u5757\\uFF1F\"};function h(o){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"import\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"export\"}),\" \\u8BED\\u53E5\\u5BFC\\u5165\\u548C\\u5BFC\\u51FA\\u6A21\\u5757\\u3002\\u8981\\u5BFC\\u51FA\\u6A21\\u5757\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728\\u51FD\\u6570\\u3001\\u53D8\\u91CF\\u6216\\u7C7B\\u4E4B\\u524D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"export\"}),\"\\uFF0C\\u6216\\u8005\\u5BF9\\u5355\\u4E2A\\u9ED8\\u8BA4\\u5BFC\\u51FA\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"export default\"}),\"\\u3002\\u8981\\u5BFC\\u5165\\u6A21\\u5757\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"import\"}),\" \\u8BED\\u53E5\\uFF0C\\u540E\\u8DDF\\u5DF2\\u5BFC\\u51FA\\u6A21\\u5757\\u7684\\u540D\\u79F0\\u548C\\u6A21\\u5757\\u6587\\u4EF6\\u7684\\u8DEF\\u5F84\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Exporting a module\nexport const myFunction = () => {\n  /* ... */\n};\nexport default myFunction;\n\n// Importing a module\nimport { myFunction } from './myModule';\nimport myFunction from './myModule';\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5BFC\\u51FA\\u6A21\\u5757\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u547D\\u540D\\u5BFC\\u51FA\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4ECE\\u6A21\\u5757\\u4E2D\\u5BFC\\u51FA\\u591A\\u4E2A\\u5DF2\\u547D\\u540D\\u7684\\u9879\\u76EE\\u3002\\u5728\\u8981\\u5BFC\\u51FA\\u7684\\u51FD\\u6570\\u3001\\u53D8\\u91CF\\u6216\\u7C7B\\u4E4B\\u524D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"export\"}),\" \\u5173\\u952E\\u5B57\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// myModule.js\nexport const myFunction = () => {\n  console.log('This is my function');\n};\n\nexport const myVariable = 42;\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9ED8\\u8BA4\\u5BFC\\u51FA\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E00\\u4E2A\\u6A21\\u5757\\u53EF\\u4EE5\\u6709\\u4E00\\u4E2A\\u9ED8\\u8BA4\\u5BFC\\u51FA\\u3002\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"export default\"}),\" \\u5173\\u952E\\u5B57\\u5BFC\\u51FA\\u4E00\\u4E2A\\u9879\\u76EE\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// myModule.js\nconst myFunction = () => {\n  console.log('This is my function');\n};\n\nexport default myFunction;\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5BFC\\u5165\\u6A21\\u5757\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5BFC\\u5165\\u547D\\u540D\\u5BFC\\u51FA\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8981\\u5BFC\\u5165\\u547D\\u540D\\u5BFC\\u51FA\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"import\"}),\" \\u8BED\\u53E5\\uFF0C\\u540E\\u8DDF\\u5305\\u542B\\u5BFC\\u51FA\\u540D\\u79F0\\u7684\\u62EC\\u53F7\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// main.js\nimport { myFunction, myVariable } from './myModule';\n\nmyFunction(); // This is my function\nconsole.log(myVariable); // 42\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5BFC\\u5165\\u9ED8\\u8BA4\\u5BFC\\u51FA\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8981\\u5BFC\\u5165\\u9ED8\\u8BA4\\u5BFC\\u51FA\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"import\"}),\" \\u8BED\\u53E5\\uFF0C\\u540E\\u8DDF\\u60A8\\u9009\\u62E9\\u7684\\u540D\\u79F0\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// main.js\nimport myFunction from './myModule';\n\nmyFunction(); // This is my function\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5BFC\\u5165\\u6240\\u6709\\u5BFC\\u51FA\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"*\"}),\" \\u8BED\\u6CD5\\u548C\\u522B\\u540D\\u4ECE\\u6A21\\u5757\\u5BFC\\u5165\\u6240\\u6709\\u5DF2\\u547D\\u540D\\u7684\\u5BFC\\u51FA\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// main.js\nimport * as myModule from './myModule';\n\nmyModule.myFunction(); // This is my function\nconsole.log(myModule.myVariable); // 42\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import\",children:\"MDN Web Docs: import\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export\",children:\"MDN Web Docs: export\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.sitepoint.com/understanding-es6-modules/\",children:\"JavaScript Modules: A Beginner\\u2019s Guide\"})}),`\n`]})]})}function a(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,{...o,children:(0,e.jsx)(h,{...o})}):h(o)}return M(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-localize-react-applications/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-localize-react-applications/en-US.json
index 4d343f977..58084399d 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-localize-react-applications/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-localize-react-applications/en-US.json
@@ -33,5 +33,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/how-do-you-localize-react-applications/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),x=(t,n)=>{for(var a in n)r(t,a,{get:n[a],enumerable:!0})},c=(t,n,a,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of u(n))!m.call(t,i)&&i!==a&&r(t,i,{get:()=>n[i],enumerable:!(o=p(n,i))||o.enumerable});return t};var y=(t,n,a)=>(a=t!=null?h(g(t)):{},c(n||!t||!t.__esModule?r(a,\"default\",{value:t,enumerable:!0}):a,t)),j=t=>c(r({},\"__esModule\",{value:!0}),t);var s=f((T,l)=>{l.exports=_jsx_runtime});var R={};x(R,{default:()=>v,frontmatter:()=>w});var e=y(s()),w={title:\"How do you localize React applications?\"};function d(t){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"To localize a React application, you typically use a library like \",(0,e.jsx)(n.code,{children:\"react-i18next\"}),\" or \",(0,e.jsx)(n.code,{children:\"react-intl\"}),\". First, you set up your translation files for different languages. Then, you configure the localization library in your React app. Finally, you use the provided hooks or components to display localized text in your components.\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// Example using react-i18next\nimport { useTranslation } from 'react-i18next';\n\nconst MyComponent = () => {\n  const { t } = useTranslation();\n  return <p>{t('welcome_message')}</p>;\n};\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Setting up localization in React\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Choosing a localization library\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"There are several libraries available for localizing React applications, with \",(0,e.jsx)(n.code,{children:\"react-i18next\"}),\" and \",(0,e.jsx)(n.code,{children:\"react-intl\"}),\" being among the most popular. For this guide, we'll focus on \",(0,e.jsx)(n.code,{children:\"react-i18next\"}),\".\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Installing the library\"}),`\n`,(0,e.jsx)(n.p,{children:\"First, install the necessary packages:\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-bash\",children:`npm install i18next react-i18next\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Setting up translation files\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Create JSON files for each language you want to support. For example, create \",(0,e.jsx)(n.code,{children:\"en.json\"}),\" and \",(0,e.jsx)(n.code,{children:\"fr.json\"}),\" in a \",(0,e.jsx)(n.code,{children:\"locales\"}),\" directory:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`// locales/en.json\n{\n  \"welcome_message\": \"Welcome to our application!\"\n}\n`})}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`// locales/fr.json\n{\n  \"welcome_message\": \"Bienvenue dans notre application!\"\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Configuring the localization library\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Set up \",(0,e.jsx)(n.code,{children:\"i18next\"}),\" and \",(0,e.jsx)(n.code,{children:\"react-i18next\"}),\" in your application. Create an \",(0,e.jsx)(n.code,{children:\"i18n.js\"}),\" file for the configuration:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// i18n.js\nimport i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\nimport en from './locales/en.json';\nimport fr from './locales/fr.json';\n\ni18n.use(initReactI18next).init({\n  resources: {\n    en: { translation: en },\n    fr: { translation: fr },\n  },\n  lng: 'en', // default language\n  fallbackLng: 'en',\n  interpolation: {\n    escapeValue: false, // react already safes from xss\n  },\n});\n\nexport default i18n;\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Integrating with your React application\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Wrap your application with the \",(0,e.jsx)(n.code,{children:\"I18nextProvider\"}),\" and import the \",(0,e.jsx)(n.code,{children:\"i18n\"}),\" configuration:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nimport { I18nextProvider } from 'react-i18next';\nimport i18n from './i18n';\n\nReactDOM.render(\n  <I18nextProvider i18n={i18n}>\n    <App />\n  </I18nextProvider>,\n  document.getElementById('root'),\n);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Using translations in components\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Use the \",(0,e.jsx)(n.code,{children:\"useTranslation\"}),\" hook to access the \",(0,e.jsx)(n.code,{children:\"t\"}),\" function for translating text:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// MyComponent.js\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nconst MyComponent = () => {\n  const { t } = useTranslation();\n  return <p>{t('welcome_message')}</p>;\n};\n\nexport default MyComponent;\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Switching languages\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"To switch languages, use the \",(0,e.jsx)(n.code,{children:\"i18n.changeLanguage\"}),\" method:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// LanguageSwitcher.js\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nconst LanguageSwitcher = () => {\n  const { i18n } = useTranslation();\n\n  const changeLanguage = (lng) => {\n    i18n.changeLanguage(lng);\n  };\n\n  return (\n    <div>\n      <button onClick={() => changeLanguage('en')}>English</button>\n      <button onClick={() => changeLanguage('fr')}>Fran\\xE7ais</button>\n    </div>\n  );\n};\n\nexport default LanguageSwitcher;\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.i18next.com/\",children:\"react-i18next documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.i18next.com/\",children:\"i18next documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://formatjs.io/docs/react-intl/\",children:\"react-intl documentation\"})}),`\n`]})]})}function b(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(d,t)})):d(t)}var v=b;return j(R);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),y=(t,n)=>{for(var a in n)i(t,a,{get:n[a],enumerable:!0})},c=(t,n,a,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of g(n))!f.call(t,r)&&r!==a&&i(t,r,{get:()=>n[r],enumerable:!(o=u(n,r))||o.enumerable});return t};var j=(t,n,a)=>(a=t!=null?p(m(t)):{},c(n||!t||!t.__esModule?i(a,\"default\",{value:t,enumerable:!0}):a,t)),w=t=>c(i({},\"__esModule\",{value:!0}),t);var s=x((C,l)=>{l.exports=_jsx_runtime});var b={};y(b,{default:()=>h,frontmatter:()=>v});var e=j(s()),v={title:\"How do you localize React applications?\"};function d(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"To localize a React application, you typically use a library like \",(0,e.jsx)(n.code,{children:\"react-i18next\"}),\" or \",(0,e.jsx)(n.code,{children:\"react-intl\"}),\". First, you set up your translation files for different languages. Then, you configure the localization library in your React app. Finally, you use the provided hooks or components to display localized text in your components.\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// Example using react-i18next\nimport { useTranslation } from 'react-i18next';\n\nconst MyComponent = () => {\n  const { t } = useTranslation();\n  return <p>{t('welcome_message')}</p>;\n};\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Setting up localization in React\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Choosing a localization library\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"There are several libraries available for localizing React applications, with \",(0,e.jsx)(n.code,{children:\"react-i18next\"}),\" and \",(0,e.jsx)(n.code,{children:\"react-intl\"}),\" being among the most popular. For this guide, we'll focus on \",(0,e.jsx)(n.code,{children:\"react-i18next\"}),\".\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Installing the library\"}),`\n`,(0,e.jsx)(n.p,{children:\"First, install the necessary packages:\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-bash\",children:`npm install i18next react-i18next\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Setting up translation files\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Create JSON files for each language you want to support. For example, create \",(0,e.jsx)(n.code,{children:\"en.json\"}),\" and \",(0,e.jsx)(n.code,{children:\"fr.json\"}),\" in a \",(0,e.jsx)(n.code,{children:\"locales\"}),\" directory:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`// locales/en.json\n{\n  \"welcome_message\": \"Welcome to our application!\"\n}\n`})}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`// locales/fr.json\n{\n  \"welcome_message\": \"Bienvenue dans notre application!\"\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Configuring the localization library\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Set up \",(0,e.jsx)(n.code,{children:\"i18next\"}),\" and \",(0,e.jsx)(n.code,{children:\"react-i18next\"}),\" in your application. Create an \",(0,e.jsx)(n.code,{children:\"i18n.js\"}),\" file for the configuration:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// i18n.js\nimport i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\nimport en from './locales/en.json';\nimport fr from './locales/fr.json';\n\ni18n.use(initReactI18next).init({\n  resources: {\n    en: { translation: en },\n    fr: { translation: fr },\n  },\n  lng: 'en', // default language\n  fallbackLng: 'en',\n  interpolation: {\n    escapeValue: false, // react already safes from xss\n  },\n});\n\nexport default i18n;\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Integrating with your React application\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Wrap your application with the \",(0,e.jsx)(n.code,{children:\"I18nextProvider\"}),\" and import the \",(0,e.jsx)(n.code,{children:\"i18n\"}),\" configuration:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nimport { I18nextProvider } from 'react-i18next';\nimport i18n from './i18n';\n\nReactDOM.render(\n  <I18nextProvider i18n={i18n}>\n    <App />\n  </I18nextProvider>,\n  document.getElementById('root'),\n);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Using translations in components\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Use the \",(0,e.jsx)(n.code,{children:\"useTranslation\"}),\" hook to access the \",(0,e.jsx)(n.code,{children:\"t\"}),\" function for translating text:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// MyComponent.js\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nconst MyComponent = () => {\n  const { t } = useTranslation();\n  return <p>{t('welcome_message')}</p>;\n};\n\nexport default MyComponent;\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Switching languages\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"To switch languages, use the \",(0,e.jsx)(n.code,{children:\"i18n.changeLanguage\"}),\" method:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// LanguageSwitcher.js\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nconst LanguageSwitcher = () => {\n  const { i18n } = useTranslation();\n\n  const changeLanguage = (lng) => {\n    i18n.changeLanguage(lng);\n  };\n\n  return (\n    <div>\n      <button onClick={() => changeLanguage('en')}>English</button>\n      <button onClick={() => changeLanguage('fr')}>Fran\\xE7ais</button>\n    </div>\n  );\n};\n\nexport default LanguageSwitcher;\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.i18next.com/\",children:\"react-i18next documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.i18next.com/\",children:\"i18next documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://formatjs.io/docs/react-intl/\",children:\"react-intl documentation\"})}),`\n`]})]})}function h(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(d,{...t})}):d(t)}return w(b);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-localize-react-applications/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-localize-react-applications/zh-CN.json
index db8287266..e8c023ebd 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-localize-react-applications/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-localize-react-applications/zh-CN.json
@@ -33,5 +33,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/how-do-you-localize-react-applications/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),x=(r,n)=>{for(var t in n)a(r,t,{get:n[t],enumerable:!0})},o=(r,n,t,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of m(n))!u.call(r,c)&&c!==t&&a(r,c,{get:()=>n[c],enumerable:!(i=p(n,c))||i.enumerable});return r};var j=(r,n,t)=>(t=r!=null?h(g(r)):{},o(n||!r||!r.__esModule?a(t,\"default\",{value:r,enumerable:!0}):t,r)),R=r=>o(a({},\"__esModule\",{value:!0}),r);var s=f((N,l)=>{l.exports=_jsx_runtime});var _={};x(_,{default:()=>L,frontmatter:()=>v});var e=j(s()),v={title:\"\\u5982\\u4F55\\u672C\\u5730\\u5316 React \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF1F\"};function d(r){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8981\\u672C\\u5730\\u5316 React \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u60A8\\u901A\\u5E38\\u4F7F\\u7528\\u50CF \",(0,e.jsx)(n.code,{children:\"react-i18next\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"react-intl\"}),\" \\u8FD9\\u6837\\u7684\\u5E93\\u3002\\u9996\\u5148\\uFF0C\\u60A8\\u4E3A\\u4E0D\\u540C\\u7684\\u8BED\\u8A00\\u8BBE\\u7F6E\\u7FFB\\u8BD1\\u6587\\u4EF6\\u3002\\u7136\\u540E\\uFF0C\\u60A8\\u5728 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u914D\\u7F6E\\u672C\\u5730\\u5316\\u5E93\\u3002\\u6700\\u540E\\uFF0C\\u60A8\\u4F7F\\u7528\\u63D0\\u4F9B\\u7684\\u94A9\\u5B50\\u6216\\u7EC4\\u4EF6\\u5728\\u7EC4\\u4EF6\\u4E2D\\u663E\\u793A\\u672C\\u5730\\u5316\\u6587\\u672C\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// \\u4F7F\\u7528 react-i18next \\u7684\\u793A\\u4F8B\nimport { useTranslation } from 'react-i18next';\n\nconst MyComponent = () => {\n  const { t } = useTranslation();\n  return <p>{t('welcome_message')}</p>;\n};\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5728 React \\u4E2D\\u8BBE\\u7F6E\\u672C\\u5730\\u5316\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9009\\u62E9\\u672C\\u5730\\u5316\\u5E93\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u6709\\u51E0\\u4E2A\\u5E93\\u53EF\\u7528\\u4E8E\\u672C\\u5730\\u5316 React \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u5176\\u4E2D \",(0,e.jsx)(n.code,{children:\"react-i18next\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"react-intl\"}),\" \\u662F\\u6700\\u53D7\\u6B22\\u8FCE\\u7684\\u3002\\u5728\\u672C\\u6307\\u5357\\u4E2D\\uFF0C\\u6211\\u4EEC\\u5C06\\u91CD\\u70B9\\u4ECB\\u7ECD \",(0,e.jsx)(n.code,{children:\"react-i18next\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B89\\u88C5\\u5E93\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9996\\u5148\\uFF0C\\u5B89\\u88C5\\u5FC5\\u8981\\u7684\\u8F6F\\u4EF6\\u5305\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-bash\",children:`npm install i18next react-i18next\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BBE\\u7F6E\\u7FFB\\u8BD1\\u6587\\u4EF6\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E3A\\u8981\\u652F\\u6301\\u7684\\u6BCF\\u79CD\\u8BED\\u8A00\\u521B\\u5EFA JSON \\u6587\\u4EF6\\u3002\\u4F8B\\u5982\\uFF0C\\u5728 \",(0,e.jsx)(n.code,{children:\"locales\"}),\" \\u76EE\\u5F55\\u4E2D\\u521B\\u5EFA \",(0,e.jsx)(n.code,{children:\"en.json\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"fr.json\"}),\"\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`// locales/en.json\n{\n  \"welcome_message\": \"Welcome to our application!\"\n}\n`})}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`// locales/fr.json\n{\n  \"welcome_message\": \"Bienvenue dans notre application!\"\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u914D\\u7F6E\\u672C\\u5730\\u5316\\u5E93\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u8BBE\\u7F6E \",(0,e.jsx)(n.code,{children:\"i18next\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"react-i18next\"}),\"\\u3002\\u521B\\u5EFA\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"i18n.js\"}),\" \\u6587\\u4EF6\\u7528\\u4E8E\\u914D\\u7F6E\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// i18n.js\nimport i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\nimport en from './locales/en.json';\nimport fr from './locales/fr.json';\n\ni18n.use(initReactI18next).init({\n  resources: {\n    en: { translation: en },\n    fr: { translation: fr },\n  },\n  lng: 'en', // default language\n  fallbackLng: 'en',\n  interpolation: {\n    escapeValue: false, // react already safes from xss\n  },\n});\n\nexport default i18n;\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E0E\\u60A8\\u7684 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u96C6\\u6210\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"I18nextProvider\"}),\" \\u5305\\u88C5\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u5E76\\u5BFC\\u5165 \",(0,e.jsx)(n.code,{children:\"i18n\"}),\" \\u914D\\u7F6E\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nimport { I18nextProvider } from 'react-i18next';\nimport i18n from './i18n';\n\nReactDOM.render(\n  <I18nextProvider i18n={i18n}>\n    <App />\n  </I18nextProvider>,\n  document.getElementById('root'),\n);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u7EC4\\u4EF6\\u4E2D\\u4F7F\\u7528\\u7FFB\\u8BD1\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useTranslation\"}),\" \\u94A9\\u5B50\\u6765\\u8BBF\\u95EE\\u7528\\u4E8E\\u7FFB\\u8BD1\\u6587\\u672C\\u7684 \",(0,e.jsx)(n.code,{children:\"t\"}),\" \\u51FD\\u6570\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// MyComponent.js\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nconst MyComponent = () => {\n  const { t } = useTranslation();\n  return <p>{t('welcome_message')}</p>;\n};\n\nexport default MyComponent;\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5207\\u6362\\u8BED\\u8A00\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8981\\u5207\\u6362\\u8BED\\u8A00\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"i18n.changeLanguage\"}),\" \\u65B9\\u6CD5\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// LanguageSwitcher.js\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nconst LanguageSwitcher = () => {\n  const { i18n } = useTranslation();\n\n  const changeLanguage = (lng) => {\n    i18n.changeLanguage(lng);\n  };\n\n  return (\n    <div>\n      <button onClick={() => changeLanguage('en')}>English</button>\n      <button onClick={() => changeLanguage('fr')}>Fran\\xE7ais</button>\n    </div>\n  );\n};\n\nexport default LanguageSwitcher;\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.i18next.com/\",children:\"react-i18next \\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.i18next.com/\",children:\"i18next \\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://formatjs.io/docs/react-intl/\",children:\"react-intl \\u6587\\u6863\"})}),`\n`]})]})}function w(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(d,r)})):d(r)}var L=w;return R(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),j=(r,n)=>{for(var t in n)a(r,t,{get:n[t],enumerable:!0})},o=(r,n,t,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of g(n))!f.call(r,c)&&c!==t&&a(r,c,{get:()=>n[c],enumerable:!(i=m(n,c))||i.enumerable});return r};var R=(r,n,t)=>(t=r!=null?p(u(r)):{},o(n||!r||!r.__esModule?a(t,\"default\",{value:r,enumerable:!0}):t,r)),v=r=>o(a({},\"__esModule\",{value:!0}),r);var d=x((M,l)=>{l.exports=_jsx_runtime});var L={};j(L,{default:()=>h,frontmatter:()=>w});var e=R(d()),w={title:\"\\u5982\\u4F55\\u672C\\u5730\\u5316 React \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF1F\"};function s(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8981\\u672C\\u5730\\u5316 React \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u60A8\\u901A\\u5E38\\u4F7F\\u7528\\u50CF \",(0,e.jsx)(n.code,{children:\"react-i18next\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"react-intl\"}),\" \\u8FD9\\u6837\\u7684\\u5E93\\u3002\\u9996\\u5148\\uFF0C\\u60A8\\u4E3A\\u4E0D\\u540C\\u7684\\u8BED\\u8A00\\u8BBE\\u7F6E\\u7FFB\\u8BD1\\u6587\\u4EF6\\u3002\\u7136\\u540E\\uFF0C\\u60A8\\u5728 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u914D\\u7F6E\\u672C\\u5730\\u5316\\u5E93\\u3002\\u6700\\u540E\\uFF0C\\u60A8\\u4F7F\\u7528\\u63D0\\u4F9B\\u7684\\u94A9\\u5B50\\u6216\\u7EC4\\u4EF6\\u5728\\u7EC4\\u4EF6\\u4E2D\\u663E\\u793A\\u672C\\u5730\\u5316\\u6587\\u672C\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// \\u4F7F\\u7528 react-i18next \\u7684\\u793A\\u4F8B\nimport { useTranslation } from 'react-i18next';\n\nconst MyComponent = () => {\n  const { t } = useTranslation();\n  return <p>{t('welcome_message')}</p>;\n};\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5728 React \\u4E2D\\u8BBE\\u7F6E\\u672C\\u5730\\u5316\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9009\\u62E9\\u672C\\u5730\\u5316\\u5E93\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u6709\\u51E0\\u4E2A\\u5E93\\u53EF\\u7528\\u4E8E\\u672C\\u5730\\u5316 React \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u5176\\u4E2D \",(0,e.jsx)(n.code,{children:\"react-i18next\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"react-intl\"}),\" \\u662F\\u6700\\u53D7\\u6B22\\u8FCE\\u7684\\u3002\\u5728\\u672C\\u6307\\u5357\\u4E2D\\uFF0C\\u6211\\u4EEC\\u5C06\\u91CD\\u70B9\\u4ECB\\u7ECD \",(0,e.jsx)(n.code,{children:\"react-i18next\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B89\\u88C5\\u5E93\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9996\\u5148\\uFF0C\\u5B89\\u88C5\\u5FC5\\u8981\\u7684\\u8F6F\\u4EF6\\u5305\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-bash\",children:`npm install i18next react-i18next\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BBE\\u7F6E\\u7FFB\\u8BD1\\u6587\\u4EF6\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E3A\\u8981\\u652F\\u6301\\u7684\\u6BCF\\u79CD\\u8BED\\u8A00\\u521B\\u5EFA JSON \\u6587\\u4EF6\\u3002\\u4F8B\\u5982\\uFF0C\\u5728 \",(0,e.jsx)(n.code,{children:\"locales\"}),\" \\u76EE\\u5F55\\u4E2D\\u521B\\u5EFA \",(0,e.jsx)(n.code,{children:\"en.json\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"fr.json\"}),\"\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`// locales/en.json\n{\n  \"welcome_message\": \"Welcome to our application!\"\n}\n`})}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`// locales/fr.json\n{\n  \"welcome_message\": \"Bienvenue dans notre application!\"\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u914D\\u7F6E\\u672C\\u5730\\u5316\\u5E93\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u8BBE\\u7F6E \",(0,e.jsx)(n.code,{children:\"i18next\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"react-i18next\"}),\"\\u3002\\u521B\\u5EFA\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"i18n.js\"}),\" \\u6587\\u4EF6\\u7528\\u4E8E\\u914D\\u7F6E\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// i18n.js\nimport i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\nimport en from './locales/en.json';\nimport fr from './locales/fr.json';\n\ni18n.use(initReactI18next).init({\n  resources: {\n    en: { translation: en },\n    fr: { translation: fr },\n  },\n  lng: 'en', // default language\n  fallbackLng: 'en',\n  interpolation: {\n    escapeValue: false, // react already safes from xss\n  },\n});\n\nexport default i18n;\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E0E\\u60A8\\u7684 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u96C6\\u6210\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"I18nextProvider\"}),\" \\u5305\\u88C5\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u5E76\\u5BFC\\u5165 \",(0,e.jsx)(n.code,{children:\"i18n\"}),\" \\u914D\\u7F6E\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nimport { I18nextProvider } from 'react-i18next';\nimport i18n from './i18n';\n\nReactDOM.render(\n  <I18nextProvider i18n={i18n}>\n    <App />\n  </I18nextProvider>,\n  document.getElementById('root'),\n);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u7EC4\\u4EF6\\u4E2D\\u4F7F\\u7528\\u7FFB\\u8BD1\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useTranslation\"}),\" \\u94A9\\u5B50\\u6765\\u8BBF\\u95EE\\u7528\\u4E8E\\u7FFB\\u8BD1\\u6587\\u672C\\u7684 \",(0,e.jsx)(n.code,{children:\"t\"}),\" \\u51FD\\u6570\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// MyComponent.js\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nconst MyComponent = () => {\n  const { t } = useTranslation();\n  return <p>{t('welcome_message')}</p>;\n};\n\nexport default MyComponent;\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5207\\u6362\\u8BED\\u8A00\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8981\\u5207\\u6362\\u8BED\\u8A00\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"i18n.changeLanguage\"}),\" \\u65B9\\u6CD5\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// LanguageSwitcher.js\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nconst LanguageSwitcher = () => {\n  const { i18n } = useTranslation();\n\n  const changeLanguage = (lng) => {\n    i18n.changeLanguage(lng);\n  };\n\n  return (\n    <div>\n      <button onClick={() => changeLanguage('en')}>English</button>\n      <button onClick={() => changeLanguage('fr')}>Fran\\xE7ais</button>\n    </div>\n  );\n};\n\nexport default LanguageSwitcher;\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.i18next.com/\",children:\"react-i18next \\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.i18next.com/\",children:\"i18next \\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://formatjs.io/docs/react-intl/\",children:\"react-intl \\u6587\\u6863\"})}),`\n`]})]})}function h(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(s,{...r})}):s(r)}return v(L);})();\n;return Component;"
 }
\ No newline at end of file
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 a23a61ab5..396745f7a 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var i=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),j=(o,e)=>{for(var r in e)s(o,r,{get:e[r],enumerable:!0})},h=(o,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of u(e))!g.call(o,t)&&t!==r&&s(o,t,{get:()=>e[t],enumerable:!(c=p(e,t))||c.enumerable});return o};var y=(o,e,r)=>(r=o!=null?i(f(o)):{},h(e||!o||!o.__esModule?s(r,\"default\",{value:o,enumerable:!0}):r,o)),T=o=>h(s({},\"__esModule\",{value:!0}),o);var d=m((E,a)=>{a.exports=_jsx_runtime});var P={};j(P,{default:()=>k,frontmatter:()=>w});var n=y(d()),w={title:\"How do you make an HTTP request using the Fetch API?\"};function l(o){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To make an HTTP request using the Fetch API, you can use the \",(0,n.jsx)(e.code,{children:\"fetch\"}),\" function, which returns a promise. You can handle the response using \",(0,n.jsx)(e.code,{children:\".then()\"}),\" and \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" for error handling. Here's a basic example of a GET request:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"For a POST request, you can pass an options object as the second argument to \",(0,n.jsx)(e.code,{children:\"fetch\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/posts', {\n  method: 'POST',\n  body: JSON.stringify({\n    title: 'foo',\n    body: 'bar',\n    userId: 1,\n  }),\n  headers: {\n    'Content-Type': 'application/json; charset=UTF-8',\n  },\n})\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Making an HTTP request using the Fetch API\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Basic GET request\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To make a basic GET request, you can use the \",(0,n.jsx)(e.code,{children:\"fetch\"}),\" function with the URL of the resource you want to fetch. The \",(0,n.jsx)(e.code,{children:\"fetch\"}),\" function returns a promise that resolves to the \",(0,n.jsx)(e.code,{children:\"Response\"}),\" object representing the response to the request.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Handling different response types\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Response\"}),\" object has several methods to handle different types of responses, such as \",(0,n.jsx)(e.code,{children:\".json()\"}),\", \",(0,n.jsx)(e.code,{children:\".text()\"}),\", \",(0,n.jsx)(e.code,{children:\".blob()\"}),\", and \",(0,n.jsx)(e.code,{children:\".arrayBuffer()\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.text())\n  .then((text) => console.log(text))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Making a POST request\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To make a POST request, you need to pass an options object as the second argument to \",(0,n.jsx)(e.code,{children:\"fetch\"}),\". This object can include the HTTP method, headers, and body of the request.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/posts', {\n  method: 'POST',\n  body: JSON.stringify({\n    title: 'foo',\n    body: 'bar',\n    userId: 1,\n  }),\n  headers: {\n    'Content-Type': 'application/json; charset=UTF-8',\n  },\n})\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Handling errors\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Error handling in the Fetch API can be done using the \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" method. It's also a good practice to check the \",(0,n.jsx)(e.code,{children:\"response.ok\"}),\" property to ensure the request was successful.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.tyicode.com/posts/1/comments') // Typo in the URL\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Using async/await\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can also use the Fetch API with \",(0,n.jsx)(e.code,{children:\"async/await\"}),\" for a more synchronous-looking code.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch(\n      'https://jsonplaceholder.typicode.com/todos/1',\n    );\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error:', error);\n  }\n}\n\nfetchData();\n`})}),`\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/Web/API/Fetch_API\",children:\"MDN Web Docs: Fetch API\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch\",children:\"MDN Web Docs: Using Fetch\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/fetch\",children:\"JavaScript.info: Fetch\"})}),`\n`]})]})}function b(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(l,o)})):l(o)}var k=b;return T(P);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var j=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),y=(o,e)=>{for(var r in e)s(o,r,{get:e[r],enumerable:!0})},h=(o,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of f(e))!m.call(o,t)&&t!==r&&s(o,t,{get:()=>e[t],enumerable:!(c=u(e,t))||c.enumerable});return o};var T=(o,e,r)=>(r=o!=null?p(g(o)):{},h(e||!o||!o.__esModule?s(r,\"default\",{value:o,enumerable:!0}):r,o)),w=o=>h(s({},\"__esModule\",{value:!0}),o);var d=j((F,a)=>{a.exports=_jsx_runtime});var k={};y(k,{default:()=>i,frontmatter:()=>b});var n=T(d()),b={title:\"How do you make an HTTP request using the Fetch API?\"};function l(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To make an HTTP request using the Fetch API, you can use the \",(0,n.jsx)(e.code,{children:\"fetch\"}),\" function, which returns a promise. You can handle the response using \",(0,n.jsx)(e.code,{children:\".then()\"}),\" and \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" for error handling. Here's a basic example of a GET request:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"For a POST request, you can pass an options object as the second argument to \",(0,n.jsx)(e.code,{children:\"fetch\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/posts', {\n  method: 'POST',\n  body: JSON.stringify({\n    title: 'foo',\n    body: 'bar',\n    userId: 1,\n  }),\n  headers: {\n    'Content-Type': 'application/json; charset=UTF-8',\n  },\n})\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Making an HTTP request using the Fetch API\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Basic GET request\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To make a basic GET request, you can use the \",(0,n.jsx)(e.code,{children:\"fetch\"}),\" function with the URL of the resource you want to fetch. The \",(0,n.jsx)(e.code,{children:\"fetch\"}),\" function returns a promise that resolves to the \",(0,n.jsx)(e.code,{children:\"Response\"}),\" object representing the response to the request.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Handling different response types\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Response\"}),\" object has several methods to handle different types of responses, such as \",(0,n.jsx)(e.code,{children:\".json()\"}),\", \",(0,n.jsx)(e.code,{children:\".text()\"}),\", \",(0,n.jsx)(e.code,{children:\".blob()\"}),\", and \",(0,n.jsx)(e.code,{children:\".arrayBuffer()\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.text())\n  .then((text) => console.log(text))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Making a POST request\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To make a POST request, you need to pass an options object as the second argument to \",(0,n.jsx)(e.code,{children:\"fetch\"}),\". This object can include the HTTP method, headers, and body of the request.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/posts', {\n  method: 'POST',\n  body: JSON.stringify({\n    title: 'foo',\n    body: 'bar',\n    userId: 1,\n  }),\n  headers: {\n    'Content-Type': 'application/json; charset=UTF-8',\n  },\n})\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Handling errors\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Error handling in the Fetch API can be done using the \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" method. It's also a good practice to check the \",(0,n.jsx)(e.code,{children:\"response.ok\"}),\" property to ensure the request was successful.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.tyicode.com/posts/1/comments') // Typo in the URL\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Using async/await\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can also use the Fetch API with \",(0,n.jsx)(e.code,{children:\"async/await\"}),\" for a more synchronous-looking code.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch(\n      'https://jsonplaceholder.typicode.com/todos/1',\n    );\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error:', error);\n  }\n}\n\nfetchData();\n`})}),`\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/Web/API/Fetch_API\",children:\"MDN Web Docs: Fetch API\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch\",children:\"MDN Web Docs: Using Fetch\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/fetch\",children:\"JavaScript.info: Fetch\"})}),`\n`]})]})}function i(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(l,{...o})}):l(o)}return w(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-make-an-http-request-using-the-fetch-api/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-make-an-http-request-using-the-fetch-api/zh-CN.json
index 94d168b39..35f605449 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-make-an-http-request-using-the-fetch-api/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-make-an-http-request-using-the-fetch-api/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-make-an-http-request-using-the-fetch-api/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var i=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var j=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),u=(r,e)=>{for(var o in e)t(r,o,{get:e[o],enumerable:!0})},h=(r,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of f(e))!g.call(r,c)&&c!==o&&t(r,c,{get:()=>e[c],enumerable:!(s=p(e,c))||s.enumerable});return r};var y=(r,e,o)=>(o=r!=null?i(m(r)):{},h(e||!r||!r.__esModule?t(o,\"default\",{value:r,enumerable:!0}):o,r)),T=r=>h(t({},\"__esModule\",{value:!0}),r);var d=j((E,l)=>{l.exports=_jsx_runtime});var N={};u(N,{default:()=>F,frontmatter:()=>w});var n=y(d()),w={title:\"\\u5982\\u4F55\\u4F7F\\u7528 Fetch API \\u53D1\\u51FA HTTP \\u8BF7\\u6C42\\uFF1F\"};function a(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u4F7F\\u7528 Fetch API \\u53D1\\u51FA HTTP \\u8BF7\\u6C42\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"fetch\"}),\" \\u51FD\\u6570\\uFF0C\\u8BE5\\u51FD\\u6570\\u8FD4\\u56DE\\u4E00\\u4E2A promise\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".then()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" \\u6765\\u5904\\u7406\\u54CD\\u5E94\\uFF0C\\u4EE5\\u8FDB\\u884C\\u9519\\u8BEF\\u5904\\u7406\\u3002 \\u8FD9\\u662F\\u4E00\\u4E2A GET \\u8BF7\\u6C42\\u7684\\u57FA\\u672C\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5BF9\\u4E8E POST \\u8BF7\\u6C42\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C06\\u4E00\\u4E2A\\u9009\\u9879\\u5BF9\\u8C61\\u4F5C\\u4E3A\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9 \",(0,n.jsx)(e.code,{children:\"fetch\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/posts', {\n  method: 'POST',\n  body: JSON.stringify({\n    title: 'foo',\n    body: 'bar',\n    userId: 1,\n  }),\n  headers: {\n    'Content-Type': 'application/json; charset=UTF-8',\n  },\n})\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4F7F\\u7528 Fetch API \\u53D1\\u51FA HTTP \\u8BF7\\u6C42\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u57FA\\u672C\\u7684 GET \\u8BF7\\u6C42\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u53D1\\u51FA\\u57FA\\u672C\\u7684 GET \\u8BF7\\u6C42\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"fetch\"}),\" \\u51FD\\u6570\\uFF0C\\u5E76\\u4F7F\\u7528\\u60A8\\u8981\\u83B7\\u53D6\\u7684\\u8D44\\u6E90\\u7684 URL\\u3002\",(0,n.jsx)(e.code,{children:\"fetch\"}),\" \\u51FD\\u6570\\u8FD4\\u56DE\\u4E00\\u4E2A promise\\uFF0C\\u8BE5 promise \\u89E3\\u6790\\u4E3A\\u8868\\u793A\\u5BF9\\u8BF7\\u6C42\\u7684\\u54CD\\u5E94\\u7684 \",(0,n.jsx)(e.code,{children:\"Response\"}),\" \\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5904\\u7406\\u4E0D\\u540C\\u7684\\u54CD\\u5E94\\u7C7B\\u578B\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Response\"}),\" \\u5BF9\\u8C61\\u6709\\u51E0\\u79CD\\u65B9\\u6CD5\\u6765\\u5904\\u7406\\u4E0D\\u540C\\u7C7B\\u578B\\u7684\\u54CD\\u5E94\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\".json()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\".text()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\".blob()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\".arrayBuffer()\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.text())\n  .then((text) => console.log(text))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u53D1\\u51FA POST \\u8BF7\\u6C42\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u53D1\\u51FA POST \\u8BF7\\u6C42\\uFF0C\\u60A8\\u9700\\u8981\\u5C06\\u4E00\\u4E2A\\u9009\\u9879\\u5BF9\\u8C61\\u4F5C\\u4E3A\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9 \",(0,n.jsx)(e.code,{children:\"fetch\"}),\"\\u3002\\u6B64\\u5BF9\\u8C61\\u53EF\\u4EE5\\u5305\\u62EC HTTP \\u65B9\\u6CD5\\u3001\\u6807\\u5934\\u548C\\u8BF7\\u6C42\\u6B63\\u6587\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/posts', {\n  method: 'POST',\n  body: JSON.stringify({\n    title: 'foo',\n    body: 'bar',\n    userId: 1,\n  }),\n  headers: {\n    'Content-Type': 'application/json; charset=UTF-8',\n  },\n})\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5904\\u7406\\u9519\\u8BEF\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" \\u65B9\\u6CD5\\u5728 Fetch API \\u4E2D\\u8FDB\\u884C\\u9519\\u8BEF\\u5904\\u7406\\u3002 \\u68C0\\u67E5 \",(0,n.jsx)(e.code,{children:\"response.ok\"}),\" \\u5C5E\\u6027\\u4EE5\\u786E\\u4FDD\\u8BF7\\u6C42\\u6210\\u529F\\u4E5F\\u662F\\u4E00\\u4E2A\\u597D\\u4E60\\u60EF\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.tyicode.com/posts/1/comments') // Typo in the URL\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 async/await\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u5C06 Fetch API \\u4E0E \",(0,n.jsx)(e.code,{children:\"async/await\"}),\" \\u7ED3\\u5408\\u4F7F\\u7528\\uFF0C\\u4EE5\\u83B7\\u5F97\\u66F4\\u5177\\u540C\\u6B65\\u611F\\u77E5\\u7684\\u4EE3\\u7801\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch(\n      'https://jsonplaceholder.typicode.com/todos/1',\n    );\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error:', error);\n  }\n}\n\nfetchData();\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Fetch_API\",children:\"MDN Web Docs: Fetch API\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch\",children:\"MDN Web Docs: Using Fetch\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/fetch\",children:\"JavaScript.info: Fetch\"})}),`\n`]})]})}function P(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(a,r)})):a(r)}var F=P;return T(N);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var j=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),y=(r,e)=>{for(var o in e)t(r,o,{get:e[o],enumerable:!0})},h=(r,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!g.call(r,c)&&c!==o&&t(r,c,{get:()=>e[c],enumerable:!(s=f(e,c))||s.enumerable});return r};var T=(r,e,o)=>(o=r!=null?p(u(r)):{},h(e||!r||!r.__esModule?t(o,\"default\",{value:r,enumerable:!0}):o,r)),w=r=>h(t({},\"__esModule\",{value:!0}),r);var d=j((E,l)=>{l.exports=_jsx_runtime});var F={};y(F,{default:()=>i,frontmatter:()=>P});var n=T(d()),P={title:\"\\u5982\\u4F55\\u4F7F\\u7528 Fetch API \\u53D1\\u51FA HTTP \\u8BF7\\u6C42\\uFF1F\"};function a(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u4F7F\\u7528 Fetch API \\u53D1\\u51FA HTTP \\u8BF7\\u6C42\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"fetch\"}),\" \\u51FD\\u6570\\uFF0C\\u8BE5\\u51FD\\u6570\\u8FD4\\u56DE\\u4E00\\u4E2A promise\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".then()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" \\u6765\\u5904\\u7406\\u54CD\\u5E94\\uFF0C\\u4EE5\\u8FDB\\u884C\\u9519\\u8BEF\\u5904\\u7406\\u3002 \\u8FD9\\u662F\\u4E00\\u4E2A GET \\u8BF7\\u6C42\\u7684\\u57FA\\u672C\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5BF9\\u4E8E POST \\u8BF7\\u6C42\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C06\\u4E00\\u4E2A\\u9009\\u9879\\u5BF9\\u8C61\\u4F5C\\u4E3A\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9 \",(0,n.jsx)(e.code,{children:\"fetch\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/posts', {\n  method: 'POST',\n  body: JSON.stringify({\n    title: 'foo',\n    body: 'bar',\n    userId: 1,\n  }),\n  headers: {\n    'Content-Type': 'application/json; charset=UTF-8',\n  },\n})\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4F7F\\u7528 Fetch API \\u53D1\\u51FA HTTP \\u8BF7\\u6C42\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u57FA\\u672C\\u7684 GET \\u8BF7\\u6C42\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u53D1\\u51FA\\u57FA\\u672C\\u7684 GET \\u8BF7\\u6C42\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"fetch\"}),\" \\u51FD\\u6570\\uFF0C\\u5E76\\u4F7F\\u7528\\u60A8\\u8981\\u83B7\\u53D6\\u7684\\u8D44\\u6E90\\u7684 URL\\u3002\",(0,n.jsx)(e.code,{children:\"fetch\"}),\" \\u51FD\\u6570\\u8FD4\\u56DE\\u4E00\\u4E2A promise\\uFF0C\\u8BE5 promise \\u89E3\\u6790\\u4E3A\\u8868\\u793A\\u5BF9\\u8BF7\\u6C42\\u7684\\u54CD\\u5E94\\u7684 \",(0,n.jsx)(e.code,{children:\"Response\"}),\" \\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5904\\u7406\\u4E0D\\u540C\\u7684\\u54CD\\u5E94\\u7C7B\\u578B\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Response\"}),\" \\u5BF9\\u8C61\\u6709\\u51E0\\u79CD\\u65B9\\u6CD5\\u6765\\u5904\\u7406\\u4E0D\\u540C\\u7C7B\\u578B\\u7684\\u54CD\\u5E94\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\".json()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\".text()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\".blob()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\".arrayBuffer()\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.text())\n  .then((text) => console.log(text))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u53D1\\u51FA POST \\u8BF7\\u6C42\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u53D1\\u51FA POST \\u8BF7\\u6C42\\uFF0C\\u60A8\\u9700\\u8981\\u5C06\\u4E00\\u4E2A\\u9009\\u9879\\u5BF9\\u8C61\\u4F5C\\u4E3A\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9 \",(0,n.jsx)(e.code,{children:\"fetch\"}),\"\\u3002\\u6B64\\u5BF9\\u8C61\\u53EF\\u4EE5\\u5305\\u62EC HTTP \\u65B9\\u6CD5\\u3001\\u6807\\u5934\\u548C\\u8BF7\\u6C42\\u6B63\\u6587\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/posts', {\n  method: 'POST',\n  body: JSON.stringify({\n    title: 'foo',\n    body: 'bar',\n    userId: 1,\n  }),\n  headers: {\n    'Content-Type': 'application/json; charset=UTF-8',\n  },\n})\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5904\\u7406\\u9519\\u8BEF\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" \\u65B9\\u6CD5\\u5728 Fetch API \\u4E2D\\u8FDB\\u884C\\u9519\\u8BEF\\u5904\\u7406\\u3002 \\u68C0\\u67E5 \",(0,n.jsx)(e.code,{children:\"response.ok\"}),\" \\u5C5E\\u6027\\u4EE5\\u786E\\u4FDD\\u8BF7\\u6C42\\u6210\\u529F\\u4E5F\\u662F\\u4E00\\u4E2A\\u597D\\u4E60\\u60EF\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.tyicode.com/posts/1/comments') // Typo in the URL\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 async/await\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u5C06 Fetch API \\u4E0E \",(0,n.jsx)(e.code,{children:\"async/await\"}),\" \\u7ED3\\u5408\\u4F7F\\u7528\\uFF0C\\u4EE5\\u83B7\\u5F97\\u66F4\\u5177\\u540C\\u6B65\\u611F\\u77E5\\u7684\\u4EE3\\u7801\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch(\n      'https://jsonplaceholder.typicode.com/todos/1',\n    );\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error:', error);\n  }\n}\n\nfetchData();\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Fetch_API\",children:\"MDN Web Docs: Fetch API\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch\",children:\"MDN Web Docs: Using Fetch\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/fetch\",children:\"JavaScript.info: Fetch\"})}),`\n`]})]})}function i(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(a,{...r})}):a(r)}return w(F);})();\n;return Component;"
 }
\ No newline at end of file
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 3ef2d9026..1558e746d 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-manipulate-css-styles-using-javascript/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),v=(l,e)=>{for(var t in e)i(l,t,{get:e[t],enumerable:!0})},a=(l,e,t,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!g.call(l,s)&&s!==t&&i(l,s,{get:()=>e[s],enumerable:!(o=h(e,s))||o.enumerable});return l};var S=(l,e,t)=>(t=l!=null?m(u(l)):{},a(e||!l||!l.__esModule?i(t,\"default\",{value:l,enumerable:!0}):t,l)),C=l=>a(i({},\"__esModule\",{value:!0}),l);var r=y((k,c)=>{c.exports=_jsx_runtime});var L={};v(L,{default:()=>f,frontmatter:()=>D});var n=S(r()),D={title:\"How do you manipulate CSS styles using JavaScript?\"};function d(l){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},l.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can manipulate CSS styles using JavaScript by accessing the \",(0,n.jsx)(e.code,{children:\"style\"}),\" property of an HTML element. For example, to change the background color of a \",(0,n.jsx)(e.code,{children:\"div\"}),\" element with the id \",(0,n.jsx)(e.code,{children:\"myDiv\"}),\", you can use:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.getElementById('myDiv').style.backgroundColor = 'blue';\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can also add, remove, or toggle CSS classes using the \",(0,n.jsx)(e.code,{children:\"classList\"}),\" property:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.getElementById('myDiv').classList.add('newClass');\ndocument.getElementById('myDiv').classList.remove('oldClass');\ndocument.getElementById('myDiv').classList.toggle('toggleClass');\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Manipulating CSS styles using JavaScript\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Accessing and modifying inline styles\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can directly manipulate the inline styles of an HTML element using the \",(0,n.jsx)(e.code,{children:\"style\"}),\" property. This property allows you to set individual CSS properties.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Select the element\nconst myDiv = document.getElementById('myDiv');\n\n// Change the background color\nmyDiv.style.backgroundColor = 'blue';\n\n// Set multiple styles\nmyDiv.style.width = '100px';\nmyDiv.style.height = '100px';\nmyDiv.style.border = '1px solid black';\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"classList\"}),\" property\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"classList\"}),\" property provides methods to add, remove, and toggle CSS classes on an element. This is useful for applying predefined styles from your CSS files.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Select the element\nconst myDiv = document.getElementById('myDiv');\n\n// Add a class\nmyDiv.classList.add('newClass');\n\n// Remove a class\nmyDiv.classList.remove('oldClass');\n\n// Toggle a class\nmyDiv.classList.toggle('toggleClass');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Modifying styles using CSS variables\"}),`\n`,(0,n.jsx)(e.p,{children:\"CSS variables (custom properties) can be manipulated using JavaScript. This is particularly useful for theming and dynamic styling.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Set a CSS variable\ndocument.documentElement.style.setProperty('--main-color', 'blue');\n\n// Get the value of a CSS variable\nconst mainColor = getComputedStyle(document.documentElement).getPropertyValue(\n  '--main-color',\n);\nconsole.log(mainColor);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Using external stylesheets\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can also manipulate styles by dynamically adding or removing stylesheets.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a new link element\nconst link = document.createElement('link');\nlink.rel = 'stylesheet';\nlink.href = 'styles.css';\n\n// Append the link element to the head\ndocument.head.appendChild(link);\n\n// Remove the link element\ndocument.head.removeChild(link);\n`})}),`\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/Web/API/HTMLElement/style\",children:\"MDN Web Docs: Element.style\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Element/classList\",children:\"MDN Web Docs: Element.classList\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties\",children:\"MDN Web Docs: Using CSS custom properties (variables)\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement\",children:\"MDN Web Docs: Document.createElement()\"})}),`\n`]})]})}function b(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(d,l)})):d(l)}var f=b;return C(L);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),S=(l,e)=>{for(var t in e)i(l,t,{get:e[t],enumerable:!0})},a=(l,e,t,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of u(e))!y.call(l,s)&&s!==t&&i(l,s,{get:()=>e[s],enumerable:!(o=p(e,s))||o.enumerable});return l};var C=(l,e,t)=>(t=l!=null?h(g(l)):{},a(e||!l||!l.__esModule?i(t,\"default\",{value:l,enumerable:!0}):t,l)),D=l=>a(i({},\"__esModule\",{value:!0}),l);var c=v((E,r)=>{r.exports=_jsx_runtime});var f={};S(f,{default:()=>m,frontmatter:()=>b});var n=C(c()),b={title:\"How do you manipulate CSS styles using JavaScript?\"};function d(l){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can manipulate CSS styles using JavaScript by accessing the \",(0,n.jsx)(e.code,{children:\"style\"}),\" property of an HTML element. For example, to change the background color of a \",(0,n.jsx)(e.code,{children:\"div\"}),\" element with the id \",(0,n.jsx)(e.code,{children:\"myDiv\"}),\", you can use:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.getElementById('myDiv').style.backgroundColor = 'blue';\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can also add, remove, or toggle CSS classes using the \",(0,n.jsx)(e.code,{children:\"classList\"}),\" property:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.getElementById('myDiv').classList.add('newClass');\ndocument.getElementById('myDiv').classList.remove('oldClass');\ndocument.getElementById('myDiv').classList.toggle('toggleClass');\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Manipulating CSS styles using JavaScript\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Accessing and modifying inline styles\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can directly manipulate the inline styles of an HTML element using the \",(0,n.jsx)(e.code,{children:\"style\"}),\" property. This property allows you to set individual CSS properties.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Select the element\nconst myDiv = document.getElementById('myDiv');\n\n// Change the background color\nmyDiv.style.backgroundColor = 'blue';\n\n// Set multiple styles\nmyDiv.style.width = '100px';\nmyDiv.style.height = '100px';\nmyDiv.style.border = '1px solid black';\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"classList\"}),\" property\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"classList\"}),\" property provides methods to add, remove, and toggle CSS classes on an element. This is useful for applying predefined styles from your CSS files.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Select the element\nconst myDiv = document.getElementById('myDiv');\n\n// Add a class\nmyDiv.classList.add('newClass');\n\n// Remove a class\nmyDiv.classList.remove('oldClass');\n\n// Toggle a class\nmyDiv.classList.toggle('toggleClass');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Modifying styles using CSS variables\"}),`\n`,(0,n.jsx)(e.p,{children:\"CSS variables (custom properties) can be manipulated using JavaScript. This is particularly useful for theming and dynamic styling.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Set a CSS variable\ndocument.documentElement.style.setProperty('--main-color', 'blue');\n\n// Get the value of a CSS variable\nconst mainColor = getComputedStyle(document.documentElement).getPropertyValue(\n  '--main-color',\n);\nconsole.log(mainColor);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Using external stylesheets\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can also manipulate styles by dynamically adding or removing stylesheets.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a new link element\nconst link = document.createElement('link');\nlink.rel = 'stylesheet';\nlink.href = 'styles.css';\n\n// Append the link element to the head\ndocument.head.appendChild(link);\n\n// Remove the link element\ndocument.head.removeChild(link);\n`})}),`\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/Web/API/HTMLElement/style\",children:\"MDN Web Docs: Element.style\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Element/classList\",children:\"MDN Web Docs: Element.classList\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties\",children:\"MDN Web Docs: Using CSS custom properties (variables)\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement\",children:\"MDN Web Docs: Document.createElement()\"})}),`\n`]})]})}function m(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(d,{...l})}):d(l)}return D(f);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-manipulate-css-styles-using-javascript/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-manipulate-css-styles-using-javascript/zh-CN.json
index b05fd7db0..00a89a5e9 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-manipulate-css-styles-using-javascript/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-manipulate-css-styles-using-javascript/zh-CN.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-manipulate-css-styles-using-javascript/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var y=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),S=(l,e)=>{for(var t in e)s(l,t,{get:e[t],enumerable:!0})},r=(l,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of g(e))!u.call(l,c)&&c!==t&&s(l,c,{get:()=>e[c],enumerable:!(i=m(e,c))||i.enumerable});return l};var C=(l,e,t)=>(t=l!=null?h(p(l)):{},r(e||!l||!l.__esModule?s(t,\"default\",{value:l,enumerable:!0}):t,l)),v=l=>r(s({},\"__esModule\",{value:!0}),l);var o=y((j,d)=>{d.exports=_jsx_runtime});var E={};S(E,{default:()=>L,frontmatter:()=>D});var n=C(o()),D={title:\"\\u5982\\u4F55\\u4F7F\\u7528 JavaScript \\u64CD\\u4F5C CSS \\u6837\\u5F0F\\uFF1F\"};function a(l){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},l.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBF\\u95EE HTML \\u5143\\u7D20\\u7684 \",(0,n.jsx)(e.code,{children:\"style\"}),\" \\u5C5E\\u6027\\u6765\\u4F7F\\u7528 JavaScript \\u64CD\\u4F5C CSS \\u6837\\u5F0F\\u3002\\u4F8B\\u5982\\uFF0C\\u8981\\u66F4\\u6539 \",(0,n.jsx)(e.code,{children:\"id\"}),\" \\u4E3A \",(0,n.jsx)(e.code,{children:\"myDiv\"}),\" \\u7684 \",(0,n.jsx)(e.code,{children:\"div\"}),\" \\u5143\\u7D20\\u7684\\u80CC\\u666F\\u989C\\u8272\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.getElementById('myDiv').style.backgroundColor = 'blue';\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"classList\"}),\" \\u5C5E\\u6027\\u6DFB\\u52A0\\u3001\\u5220\\u9664\\u6216\\u5207\\u6362 CSS \\u7C7B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.getElementById('myDiv').classList.add('newClass');\ndocument.getElementById('myDiv').classList.remove('oldClass');\ndocument.getElementById('myDiv').classList.toggle('toggleClass');\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4F7F\\u7528 JavaScript \\u64CD\\u4F5C CSS \\u6837\\u5F0F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BBF\\u95EE\\u548C\\u4FEE\\u6539\\u5185\\u8054\\u6837\\u5F0F\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"style\"}),\" \\u5C5E\\u6027\\u76F4\\u63A5\\u64CD\\u4F5C HTML \\u5143\\u7D20\\u7684\\u5185\\u8054\\u6837\\u5F0F\\u3002\\u6B64\\u5C5E\\u6027\\u5141\\u8BB8\\u60A8\\u8BBE\\u7F6E\\u5355\\u4E2A CSS \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Select the element\nconst myDiv = document.getElementById('myDiv');\n\n// Change the background color\nmyDiv.style.backgroundColor = 'blue';\n\n// Set multiple styles\nmyDiv.style.width = '100px';\nmyDiv.style.height = '100px';\nmyDiv.style.border = '1px solid black';\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"classList\"}),\" \\u5C5E\\u6027\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"classList\"}),\" \\u5C5E\\u6027\\u63D0\\u4F9B\\u4E86\\u5728\\u5143\\u7D20\\u4E0A\\u6DFB\\u52A0\\u3001\\u5220\\u9664\\u548C\\u5207\\u6362 CSS \\u7C7B\\u7684\\u65B9\\u6CD5\\u3002\\u8FD9\\u5BF9\\u4E8E\\u5E94\\u7528\\u6765\\u81EA CSS \\u6587\\u4EF6\\u7684\\u9884\\u5B9A\\u4E49\\u6837\\u5F0F\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Select the element\nconst myDiv = document.getElementById('myDiv');\n\n// Add a class\nmyDiv.classList.add('newClass');\n\n// Remove a class\nmyDiv.classList.remove('oldClass');\n\n// Toggle a class\nmyDiv.classList.toggle('toggleClass');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 CSS \\u53D8\\u91CF\\u4FEE\\u6539\\u6837\\u5F0F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u53EF\\u4EE5\\u4F7F\\u7528 JavaScript \\u64CD\\u4F5C CSS \\u53D8\\u91CF\\uFF08\\u81EA\\u5B9A\\u4E49\\u5C5E\\u6027\\uFF09\\u3002\\u8FD9\\u5BF9\\u4E8E\\u4E3B\\u9898\\u548C\\u52A8\\u6001\\u6837\\u5F0F\\u7279\\u522B\\u6709\\u7528\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Set a CSS variable\ndocument.documentElement.style.setProperty('--main-color', 'blue');\n\n// Get the value of a CSS variable\nconst mainColor = getComputedStyle(document.documentElement).getPropertyValue(\n  '--main-color',\n);\nconsole.log(mainColor);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u5916\\u90E8\\u6837\\u5F0F\\u8868\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u901A\\u8FC7\\u52A8\\u6001\\u6DFB\\u52A0\\u6216\\u5220\\u9664\\u6837\\u5F0F\\u8868\\u6765\\u64CD\\u4F5C\\u6837\\u5F0F\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a new link element\nconst link = document.createElement('link');\nlink.rel = 'stylesheet';\nlink.href = 'styles.css';\n\n// Append the link element to the head\ndocument.head.appendChild(link);\n\n// Remove the link element\ndocument.head.removeChild(link);\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/style\",children:\"MDN Web \\u6587\\u6863\\uFF1AElement.style\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList\",children:\"MDN Web \\u6587\\u6863\\uFF1AElement.classList\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties\",children:\"MDN Web \\u6587\\u6863\\uFF1A\\u4F7F\\u7528 CSS \\u81EA\\u5B9A\\u4E49\\u5C5E\\u6027\\uFF08\\u53D8\\u91CF\\uFF09\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElement\",children:\"MDN Web \\u6587\\u6863\\uFF1ADocument.createElement()\"})}),`\n`]})]})}function b(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(a,l)})):a(l)}var L=b;return v(E);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var S=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),C=(l,e)=>{for(var t in e)s(l,t,{get:e[t],enumerable:!0})},r=(l,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of g(e))!y.call(l,c)&&c!==t&&s(l,c,{get:()=>e[c],enumerable:!(i=p(e,c))||i.enumerable});return l};var v=(l,e,t)=>(t=l!=null?m(u(l)):{},r(e||!l||!l.__esModule?s(t,\"default\",{value:l,enumerable:!0}):t,l)),D=l=>r(s({},\"__esModule\",{value:!0}),l);var o=S((N,d)=>{d.exports=_jsx_runtime});var L={};C(L,{default:()=>h,frontmatter:()=>b});var n=v(o()),b={title:\"\\u5982\\u4F55\\u4F7F\\u7528 JavaScript \\u64CD\\u4F5C CSS \\u6837\\u5F0F\\uFF1F\"};function a(l){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBF\\u95EE HTML \\u5143\\u7D20\\u7684 \",(0,n.jsx)(e.code,{children:\"style\"}),\" \\u5C5E\\u6027\\u6765\\u4F7F\\u7528 JavaScript \\u64CD\\u4F5C CSS \\u6837\\u5F0F\\u3002\\u4F8B\\u5982\\uFF0C\\u8981\\u66F4\\u6539 \",(0,n.jsx)(e.code,{children:\"id\"}),\" \\u4E3A \",(0,n.jsx)(e.code,{children:\"myDiv\"}),\" \\u7684 \",(0,n.jsx)(e.code,{children:\"div\"}),\" \\u5143\\u7D20\\u7684\\u80CC\\u666F\\u989C\\u8272\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.getElementById('myDiv').style.backgroundColor = 'blue';\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"classList\"}),\" \\u5C5E\\u6027\\u6DFB\\u52A0\\u3001\\u5220\\u9664\\u6216\\u5207\\u6362 CSS \\u7C7B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.getElementById('myDiv').classList.add('newClass');\ndocument.getElementById('myDiv').classList.remove('oldClass');\ndocument.getElementById('myDiv').classList.toggle('toggleClass');\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4F7F\\u7528 JavaScript \\u64CD\\u4F5C CSS \\u6837\\u5F0F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BBF\\u95EE\\u548C\\u4FEE\\u6539\\u5185\\u8054\\u6837\\u5F0F\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"style\"}),\" \\u5C5E\\u6027\\u76F4\\u63A5\\u64CD\\u4F5C HTML \\u5143\\u7D20\\u7684\\u5185\\u8054\\u6837\\u5F0F\\u3002\\u6B64\\u5C5E\\u6027\\u5141\\u8BB8\\u60A8\\u8BBE\\u7F6E\\u5355\\u4E2A CSS \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Select the element\nconst myDiv = document.getElementById('myDiv');\n\n// Change the background color\nmyDiv.style.backgroundColor = 'blue';\n\n// Set multiple styles\nmyDiv.style.width = '100px';\nmyDiv.style.height = '100px';\nmyDiv.style.border = '1px solid black';\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"classList\"}),\" \\u5C5E\\u6027\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"classList\"}),\" \\u5C5E\\u6027\\u63D0\\u4F9B\\u4E86\\u5728\\u5143\\u7D20\\u4E0A\\u6DFB\\u52A0\\u3001\\u5220\\u9664\\u548C\\u5207\\u6362 CSS \\u7C7B\\u7684\\u65B9\\u6CD5\\u3002\\u8FD9\\u5BF9\\u4E8E\\u5E94\\u7528\\u6765\\u81EA CSS \\u6587\\u4EF6\\u7684\\u9884\\u5B9A\\u4E49\\u6837\\u5F0F\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Select the element\nconst myDiv = document.getElementById('myDiv');\n\n// Add a class\nmyDiv.classList.add('newClass');\n\n// Remove a class\nmyDiv.classList.remove('oldClass');\n\n// Toggle a class\nmyDiv.classList.toggle('toggleClass');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 CSS \\u53D8\\u91CF\\u4FEE\\u6539\\u6837\\u5F0F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u53EF\\u4EE5\\u4F7F\\u7528 JavaScript \\u64CD\\u4F5C CSS \\u53D8\\u91CF\\uFF08\\u81EA\\u5B9A\\u4E49\\u5C5E\\u6027\\uFF09\\u3002\\u8FD9\\u5BF9\\u4E8E\\u4E3B\\u9898\\u548C\\u52A8\\u6001\\u6837\\u5F0F\\u7279\\u522B\\u6709\\u7528\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Set a CSS variable\ndocument.documentElement.style.setProperty('--main-color', 'blue');\n\n// Get the value of a CSS variable\nconst mainColor = getComputedStyle(document.documentElement).getPropertyValue(\n  '--main-color',\n);\nconsole.log(mainColor);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u5916\\u90E8\\u6837\\u5F0F\\u8868\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u901A\\u8FC7\\u52A8\\u6001\\u6DFB\\u52A0\\u6216\\u5220\\u9664\\u6837\\u5F0F\\u8868\\u6765\\u64CD\\u4F5C\\u6837\\u5F0F\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a new link element\nconst link = document.createElement('link');\nlink.rel = 'stylesheet';\nlink.href = 'styles.css';\n\n// Append the link element to the head\ndocument.head.appendChild(link);\n\n// Remove the link element\ndocument.head.removeChild(link);\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/style\",children:\"MDN Web \\u6587\\u6863\\uFF1AElement.style\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList\",children:\"MDN Web \\u6587\\u6863\\uFF1AElement.classList\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties\",children:\"MDN Web \\u6587\\u6863\\uFF1A\\u4F7F\\u7528 CSS \\u81EA\\u5B9A\\u4E49\\u5C5E\\u6027\\uFF08\\u53D8\\u91CF\\uFF09\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElement\",children:\"MDN Web \\u6587\\u6863\\uFF1ADocument.createElement()\"})}),`\n`]})]})}function h(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(a,{...l})}):a(l)}return D(L);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-organize-your-code-module-pattern-classical-inheritance/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-organize-your-code-module-pattern-classical-inheritance/en-US.json
index edec1f99e..6ce3e61ef 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-organize-your-code-module-pattern-classical-inheritance/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-organize-your-code-module-pattern-classical-inheritance/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),b=(i,n)=>{for(var t in n)o(i,t,{get:n[t],enumerable:!0})},c=(i,n,t,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of p(n))!g.call(i,r)&&r!==t&&o(i,r,{get:()=>n[r],enumerable:!(a=u(n,r))||a.enumerable});return i};var y=(i,n,t)=>(t=i!=null?h(m(i)):{},c(n||!i||!i.__esModule?o(t,\"default\",{value:i,enumerable:!0}):t,i)),j=i=>c(o({},\"__esModule\",{value:!0}),i);var d=f((F,s)=>{s.exports=_jsx_runtime});var C={};b(C,{default:()=>x,frontmatter:()=>v});var e=y(d()),v={title:\"How do you organize your code?\",subtitle:\"Do you use module pattern, classical inheritance, something else?\"};function l(i){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},i.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"I organize my code by following a modular approach, using a clear folder structure, and adhering to coding standards and best practices. I separate concerns by dividing code into different layers such as components, services, and utilities. I also use naming conventions and documentation to ensure code readability and maintainability.\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"How do you organize your code?\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Modular approach\"}),`\n`,(0,e.jsx)(n.p,{children:\"I follow a modular approach to break down the application into smaller, reusable pieces. This helps in managing the codebase more efficiently and makes it easier to maintain and scale.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Folder structure\"}),`\n`,(0,e.jsx)(n.p,{children:\"I use a clear and consistent folder structure to organize my code. Here is a common structure for a React project:\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{children:`src/\n|-- components/\n|   |-- Header/\n|   |   |-- Header.js\n|   |   |-- Header.css\n|   |-- Footer/\n|   |   |-- Footer.js\n|   |   |-- Footer.css\n|-- services/\n|   |-- apiService.js\n|-- utils/\n|   |-- helpers.js\n|-- App.js\n|-- index.js\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Separation of concerns\"}),`\n`,(0,e.jsx)(n.p,{children:\"I separate concerns by dividing the code into different layers:\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Components\"}),\": UI elements that are reusable and self-contained\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Services\"}),\": Functions that handle data fetching and business logic\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Utilities\"}),\": Helper functions and constants that can be used across the application\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Naming conventions\"}),`\n`,(0,e.jsx)(n.p,{children:\"I use consistent naming conventions to improve code readability:\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Files and folders\"}),\": Use camelCase or kebab-case for file and folder names\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Components\"}),\": Use PascalCase for React component names\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Variables and functions\"}),\": Use camelCase for variable and function names\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Documentation\"}),`\n`,(0,e.jsx)(n.p,{children:\"I document my code to make it easier for others (and myself) to understand:\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Comments\"}),\": Add comments to explain complex logic or important sections of the code\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"README\"}),\": Include a README file with instructions on how to set up and run the project\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Coding standards and best practices\"}),`\n`,(0,e.jsx)(n.p,{children:\"I adhere to coding standards and best practices to ensure code quality:\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Linting\"}),\": Use tools like ESLint to enforce coding standards\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Formatting\"}),\": Use tools like Prettier to maintain consistent code formatting\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Testing\"}),\": Write unit tests and integration tests to ensure code reliability\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://github.com/airbnb/javascript\",children:\"JavaScript Coding Standards\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/writing-clean-code-6a8e2889b9f8/\",children:\"Writing Clean Code\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://jsdoc.app/\",children:\"Effective JavaScript Documentation\"})}),`\n`]})]})}function w(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,Object.assign({},i,{children:(0,e.jsx)(l,i)})):l(i)}var x=w;return j(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),y=(i,n)=>{for(var r in n)o(i,r,{get:n[r],enumerable:!0})},c=(i,n,r,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of m(n))!f.call(i,t)&&t!==r&&o(i,t,{get:()=>n[t],enumerable:!(a=p(n,t))||a.enumerable});return i};var j=(i,n,r)=>(r=i!=null?u(g(i)):{},c(n||!i||!i.__esModule?o(r,\"default\",{value:i,enumerable:!0}):r,i)),v=i=>c(o({},\"__esModule\",{value:!0}),i);var d=b((I,s)=>{s.exports=_jsx_runtime});var x={};y(x,{default:()=>h,frontmatter:()=>w});var e=j(d()),w={title:\"How do you organize your code?\",subtitle:\"Do you use module pattern, classical inheritance, something else?\"};function l(i){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"I organize my code by following a modular approach, using a clear folder structure, and adhering to coding standards and best practices. I separate concerns by dividing code into different layers such as components, services, and utilities. I also use naming conventions and documentation to ensure code readability and maintainability.\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"How do you organize your code?\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Modular approach\"}),`\n`,(0,e.jsx)(n.p,{children:\"I follow a modular approach to break down the application into smaller, reusable pieces. This helps in managing the codebase more efficiently and makes it easier to maintain and scale.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Folder structure\"}),`\n`,(0,e.jsx)(n.p,{children:\"I use a clear and consistent folder structure to organize my code. Here is a common structure for a React project:\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{children:`src/\n|-- components/\n|   |-- Header/\n|   |   |-- Header.js\n|   |   |-- Header.css\n|   |-- Footer/\n|   |   |-- Footer.js\n|   |   |-- Footer.css\n|-- services/\n|   |-- apiService.js\n|-- utils/\n|   |-- helpers.js\n|-- App.js\n|-- index.js\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Separation of concerns\"}),`\n`,(0,e.jsx)(n.p,{children:\"I separate concerns by dividing the code into different layers:\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Components\"}),\": UI elements that are reusable and self-contained\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Services\"}),\": Functions that handle data fetching and business logic\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Utilities\"}),\": Helper functions and constants that can be used across the application\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Naming conventions\"}),`\n`,(0,e.jsx)(n.p,{children:\"I use consistent naming conventions to improve code readability:\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Files and folders\"}),\": Use camelCase or kebab-case for file and folder names\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Components\"}),\": Use PascalCase for React component names\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Variables and functions\"}),\": Use camelCase for variable and function names\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Documentation\"}),`\n`,(0,e.jsx)(n.p,{children:\"I document my code to make it easier for others (and myself) to understand:\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Comments\"}),\": Add comments to explain complex logic or important sections of the code\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"README\"}),\": Include a README file with instructions on how to set up and run the project\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Coding standards and best practices\"}),`\n`,(0,e.jsx)(n.p,{children:\"I adhere to coding standards and best practices to ensure code quality:\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Linting\"}),\": Use tools like ESLint to enforce coding standards\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Formatting\"}),\": Use tools like Prettier to maintain consistent code formatting\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Testing\"}),\": Write unit tests and integration tests to ensure code reliability\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://github.com/airbnb/javascript\",children:\"JavaScript Coding Standards\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/writing-clean-code-6a8e2889b9f8/\",children:\"Writing Clean Code\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://jsdoc.app/\",children:\"Effective JavaScript Documentation\"})}),`\n`]})]})}function h(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,{...i,children:(0,e.jsx)(l,{...i})}):l(i)}return v(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-organize-your-code-module-pattern-classical-inheritance/pt-BR.json b/apps/web/src/__generated__/questions/quiz/how-do-you-organize-your-code-module-pattern-classical-inheritance/pt-BR.json
index be8ecbf57..8a4617469 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-organize-your-code-module-pattern-classical-inheritance/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-organize-your-code-module-pattern-classical-inheritance/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var c=Object.create;var t=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var x=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),b=(a,e)=>{for(var s in e)t(a,s,{get:e[s],enumerable:!0})},d=(a,e,s,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of p(e))!v.call(a,n)&&n!==s&&t(a,n,{get:()=>e[n],enumerable:!(r=l(e,n))||r.enumerable});return a};var g=(a,e,s)=>(s=a!=null?c(h(a)):{},d(e||!a||!a.__esModule?t(s,\"default\",{value:a,enumerable:!0}):s,a)),f=a=>d(t({},\"__esModule\",{value:!0}),a);var i=x((F,u)=>{u.exports=_jsx_runtime});var O={};b(O,{default:()=>q,frontmatter:()=>j});var o=g(i()),j={title:\"Como voc\\xEA organiza seu c\\xF3digo?\",subtitle:\"Voc\\xEA usa o pattern de modulo, heran\\xE7a cl\\xE1ssica, algo mais?\"};function m(a){let e=Object.assign({p:\"p\",a:\"a\"},a.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.p,{children:\"No passado, os desenvolvedores usavam o Backbone para os meus modelos, que incentivava uma abordagem mais OOP, criando modelos Backbone e anexando m\\xE9todos a eles.\"}),`\n`,(0,o.jsx)(e.p,{children:\"O padr\\xE3o de m\\xF3dulo ainda \\xE9 \\xF3timo, mas nos dias de hoje, os desenvolvedores preferem usar o React/Redux, que utiliza um fluxo de dados unidirecional baseado na arquitetura Flux. Agora \\xE9 comum representar o modelo de dados de um aplicativo usando objetos simples e escrever fun\\xE7\\xF5es puras de utilidade para manipular esses objetos. O State \\xE9 manipulado usando a\\xE7\\xF5es e redutores como em qualquer outra aplica\\xE7\\xE3o Redux.\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Evite usar heran\\xE7a cl\\xE1ssica sempre que poss\\xEDvel. Quando e se tiver, mantenha \",(0,o.jsx)(e.a,{href:\"https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4\",children:\"estas regras\"}),\".\"]})]})}function _(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,Object.assign({},a,{children:(0,o.jsx)(m,a)})):m(a)}var q=_;return f(O);})();\n;return Component;"
+  "solution": "var Component=(()=>{var l=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var f=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),b=(a,e)=>{for(var s in e)t(a,s,{get:e[s],enumerable:!0})},d=(a,e,s,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of h(e))!x.call(a,n)&&n!==s&&t(a,n,{get:()=>e[n],enumerable:!(r=p(e,n))||r.enumerable});return a};var g=(a,e,s)=>(s=a!=null?l(v(a)):{},d(e||!a||!a.__esModule?t(s,\"default\",{value:a,enumerable:!0}):s,a)),j=a=>d(t({},\"__esModule\",{value:!0}),a);var i=f((C,u)=>{u.exports=_jsx_runtime});var q={};b(q,{default:()=>c,frontmatter:()=>_});var o=g(i()),_={title:\"Como voc\\xEA organiza seu c\\xF3digo?\",subtitle:\"Voc\\xEA usa o pattern de modulo, heran\\xE7a cl\\xE1ssica, algo mais?\"};function m(a){let e={a:\"a\",p:\"p\",...a.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.p,{children:\"No passado, os desenvolvedores usavam o Backbone para os meus modelos, que incentivava uma abordagem mais OOP, criando modelos Backbone e anexando m\\xE9todos a eles.\"}),`\n`,(0,o.jsx)(e.p,{children:\"O padr\\xE3o de m\\xF3dulo ainda \\xE9 \\xF3timo, mas nos dias de hoje, os desenvolvedores preferem usar o React/Redux, que utiliza um fluxo de dados unidirecional baseado na arquitetura Flux. Agora \\xE9 comum representar o modelo de dados de um aplicativo usando objetos simples e escrever fun\\xE7\\xF5es puras de utilidade para manipular esses objetos. O State \\xE9 manipulado usando a\\xE7\\xF5es e redutores como em qualquer outra aplica\\xE7\\xE3o Redux.\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Evite usar heran\\xE7a cl\\xE1ssica sempre que poss\\xEDvel. Quando e se tiver, mantenha \",(0,o.jsx)(e.a,{href:\"https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4\",children:\"estas regras\"}),\".\"]})]})}function c(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,{...a,children:(0,o.jsx)(m,{...a})}):m(a)}return j(q);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-organize-your-code-module-pattern-classical-inheritance/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-organize-your-code-module-pattern-classical-inheritance/zh-CN.json
index e62254f2b..bc130188a 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-organize-your-code-module-pattern-classical-inheritance/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-organize-your-code-module-pattern-classical-inheritance/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var m=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),f=(r,n)=>{for(var i in n)l(r,i,{get:n[i],enumerable:!0})},t=(r,n,i,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of g(n))!j.call(r,c)&&c!==i&&l(r,c,{get:()=>n[c],enumerable:!(h=p(n,c))||h.enumerable});return r};var x=(r,n,i)=>(i=r!=null?a(u(r)):{},t(n||!r||!r.__esModule?l(i,\"default\",{value:r,enumerable:!0}):i,r)),b=r=>t(l({},\"__esModule\",{value:!0}),r);var s=m((D,d)=>{d.exports=_jsx_runtime});var v={};f(v,{default:()=>F,frontmatter:()=>_});var e=x(s()),_={title:\"\\u4F60\\u5982\\u4F55\\u7EC4\\u7EC7\\u4F60\\u7684\\u4EE3\\u7801\\uFF1F\",subtitle:\"\\u4F60\\u4F7F\\u7528\\u6A21\\u5757\\u6A21\\u5F0F\\u3001\\u7ECF\\u5178\\u7EE7\\u627F\\u8FD8\\u662F\\u5176\\u4ED6\\u65B9\\u5F0F\\uFF1F\"};function o(r){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6211\\u901A\\u8FC7\\u9075\\u5FAA\\u6A21\\u5757\\u5316\\u65B9\\u6CD5\\u3001\\u4F7F\\u7528\\u6E05\\u6670\\u7684\\u6587\\u4EF6\\u5939\\u7ED3\\u6784\\u4EE5\\u53CA\\u9075\\u5B88\\u7F16\\u7801\\u6807\\u51C6\\u548C\\u6700\\u4F73\\u5B9E\\u8DF5\\u6765\\u7EC4\\u7EC7\\u6211\\u7684\\u4EE3\\u7801\\u3002\\u6211\\u901A\\u8FC7\\u5C06\\u4EE3\\u7801\\u5212\\u5206\\u4E3A\\u4E0D\\u540C\\u7684\\u5C42\\uFF08\\u5982\\u7EC4\\u4EF6\\u3001\\u670D\\u52A1\\u548C\\u5B9E\\u7528\\u7A0B\\u5E8F\\uFF09\\u6765\\u5206\\u79BB\\u5173\\u6CE8\\u70B9\\u3002\\u6211\\u8FD8\\u4F7F\\u7528\\u547D\\u540D\\u7EA6\\u5B9A\\u548C\\u6587\\u6863\\u6765\\u786E\\u4FDD\\u4EE3\\u7801\\u7684\\u53EF\\u8BFB\\u6027\\u548C\\u53EF\\u7EF4\\u62A4\\u6027\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F60\\u5982\\u4F55\\u7EC4\\u7EC7\\u4F60\\u7684\\u4EE3\\u7801\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6A21\\u5757\\u5316\\u65B9\\u6CD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6211\\u9075\\u5FAA\\u6A21\\u5757\\u5316\\u65B9\\u6CD5\\uFF0C\\u5C06\\u5E94\\u7528\\u7A0B\\u5E8F\\u5206\\u89E3\\u4E3A\\u66F4\\u5C0F\\u3001\\u53EF\\u91CD\\u7528\\u7684\\u90E8\\u5206\\u3002\\u8FD9\\u6709\\u52A9\\u4E8E\\u66F4\\u6709\\u6548\\u5730\\u7BA1\\u7406\\u4EE3\\u7801\\u5E93\\uFF0C\\u5E76\\u4F7F\\u5176\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u548C\\u6269\\u5C55\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6587\\u4EF6\\u5939\\u7ED3\\u6784\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6211\\u4F7F\\u7528\\u6E05\\u6670\\u4E00\\u81F4\\u7684\\u6587\\u4EF6\\u5939\\u7ED3\\u6784\\u6765\\u7EC4\\u7EC7\\u6211\\u7684\\u4EE3\\u7801\\u3002\\u4EE5\\u4E0B\\u662F React \\u9879\\u76EE\\u7684\\u5E38\\u89C1\\u7ED3\\u6784\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{children:`src/\n|-- components/\n|   |-- Header/\n|   |   |-- Header.js\n|   |   |-- Header.css\n|   |-- Footer/\n|   |   |-- Footer.js\n|   |   |-- Footer.css\n|-- services/\n|   |-- apiService.js\n|-- utils/\n|   |-- helpers.js\n|-- App.js\n|-- index.js\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5173\\u6CE8\\u70B9\\u5206\\u79BB\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6211\\u901A\\u8FC7\\u5C06\\u4EE3\\u7801\\u5212\\u5206\\u4E3A\\u4E0D\\u540C\\u7684\\u5C42\\u6765\\u5206\\u79BB\\u5173\\u6CE8\\u70B9\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7EC4\\u4EF6\"}),\"\\uFF1A\\u53EF\\u91CD\\u7528\\u4E14\\u81EA\\u5305\\u542B\\u7684 UI \\u5143\\u7D20\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u670D\\u52A1\"}),\"\\uFF1A\\u5904\\u7406\\u6570\\u636E\\u83B7\\u53D6\\u548C\\u4E1A\\u52A1\\u903B\\u8F91\\u7684\\u51FD\\u6570\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B9E\\u7528\\u7A0B\\u5E8F\"}),\"\\uFF1A\\u53EF\\u5728\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u4F7F\\u7528\\u7684\\u8F85\\u52A9\\u51FD\\u6570\\u548C\\u5E38\\u91CF\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u547D\\u540D\\u7EA6\\u5B9A\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6211\\u4F7F\\u7528\\u4E00\\u81F4\\u7684\\u547D\\u540D\\u7EA6\\u5B9A\\u6765\\u63D0\\u9AD8\\u4EE3\\u7801\\u53EF\\u8BFB\\u6027\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6587\\u4EF6\\u548C\\u6587\\u4EF6\\u5939\"}),\"\\uFF1A\\u5BF9\\u6587\\u4EF6\\u548C\\u6587\\u4EF6\\u5939\\u540D\\u79F0\\u4F7F\\u7528 camelCase \\u6216 kebab-case\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7EC4\\u4EF6\"}),\"\\uFF1A\\u5BF9 React \\u7EC4\\u4EF6\\u540D\\u79F0\\u4F7F\\u7528 PascalCase\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53D8\\u91CF\\u548C\\u51FD\\u6570\"}),\"\\uFF1A\\u5BF9\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u540D\\u79F0\\u4F7F\\u7528 camelCase\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6587\\u6863\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6211\\u8BB0\\u5F55\\u6211\\u7684\\u4EE3\\u7801\\uFF0C\\u4EE5\\u4FBF\\u5176\\u4ED6\\u4EBA\\uFF08\\u548C\\u6211\\u81EA\\u5DF1\\uFF09\\u66F4\\u5BB9\\u6613\\u7406\\u89E3\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6CE8\\u91CA\"}),\"\\uFF1A\\u6DFB\\u52A0\\u6CE8\\u91CA\\u4EE5\\u89E3\\u91CA\\u590D\\u6742\\u7684\\u903B\\u8F91\\u6216\\u4EE3\\u7801\\u7684\\u91CD\\u8981\\u90E8\\u5206\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"README\"}),\"\\uFF1A\\u5305\\u542B\\u4E00\\u4E2A README \\u6587\\u4EF6\\uFF0C\\u5176\\u4E2D\\u5305\\u542B\\u6709\\u5173\\u5982\\u4F55\\u8BBE\\u7F6E\\u548C\\u8FD0\\u884C\\u9879\\u76EE\\u7684\\u8BF4\\u660E\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7F16\\u7801\\u6807\\u51C6\\u548C\\u6700\\u4F73\\u5B9E\\u8DF5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6211\\u9075\\u5B88\\u7F16\\u7801\\u6807\\u51C6\\u548C\\u6700\\u4F73\\u5B9E\\u8DF5\\uFF0C\\u4EE5\\u786E\\u4FDD\\u4EE3\\u7801\\u8D28\\u91CF\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Linting\"}),\": \\u4F7F\\u7528 ESLint \\u7B49\\u5DE5\\u5177\\u6765\\u6267\\u884C\\u7F16\\u7801\\u6807\\u51C6\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Formatting\"}),\": \\u4F7F\\u7528 Prettier \\u7B49\\u5DE5\\u5177\\u6765\\u4FDD\\u6301\\u4E00\\u81F4\\u7684\\u4EE3\\u7801\\u683C\\u5F0F\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Testing\"}),\": \\u7F16\\u5199\\u5355\\u5143\\u6D4B\\u8BD5\\u548C\\u96C6\\u6210\\u6D4B\\u8BD5\\u4EE5\\u786E\\u4FDD\\u4EE3\\u7801\\u53EF\\u9760\\u6027\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://github.com/airbnb/javascript\",children:\"JavaScript \\u7F16\\u7801\\u89C4\\u8303\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/writing-clean-code-6a8e2889b9f8/\",children:\"\\u7F16\\u5199\\u5E72\\u51C0\\u7684\\u4EE3\\u7801\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://jsdoc.app/\",children:\"\\u6709\\u6548\\u7684 JavaScript \\u6587\\u6863\"})}),`\n`]})]})}function w(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(o,r)})):o(r)}var F=w;return b(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var f=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),x=(r,n)=>{for(var i in n)l(r,i,{get:n[i],enumerable:!0})},t=(r,n,i,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of u(n))!j.call(r,c)&&c!==i&&l(r,c,{get:()=>n[c],enumerable:!(h=g(n,c))||h.enumerable});return r};var b=(r,n,i)=>(i=r!=null?p(m(r)):{},t(n||!r||!r.__esModule?l(i,\"default\",{value:r,enumerable:!0}):i,r)),_=r=>t(l({},\"__esModule\",{value:!0}),r);var s=f((C,d)=>{d.exports=_jsx_runtime});var F={};x(F,{default:()=>a,frontmatter:()=>w});var e=b(s()),w={title:\"\\u4F60\\u5982\\u4F55\\u7EC4\\u7EC7\\u4F60\\u7684\\u4EE3\\u7801\\uFF1F\",subtitle:\"\\u4F60\\u4F7F\\u7528\\u6A21\\u5757\\u6A21\\u5F0F\\u3001\\u7ECF\\u5178\\u7EE7\\u627F\\u8FD8\\u662F\\u5176\\u4ED6\\u65B9\\u5F0F\\uFF1F\"};function o(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6211\\u901A\\u8FC7\\u9075\\u5FAA\\u6A21\\u5757\\u5316\\u65B9\\u6CD5\\u3001\\u4F7F\\u7528\\u6E05\\u6670\\u7684\\u6587\\u4EF6\\u5939\\u7ED3\\u6784\\u4EE5\\u53CA\\u9075\\u5B88\\u7F16\\u7801\\u6807\\u51C6\\u548C\\u6700\\u4F73\\u5B9E\\u8DF5\\u6765\\u7EC4\\u7EC7\\u6211\\u7684\\u4EE3\\u7801\\u3002\\u6211\\u901A\\u8FC7\\u5C06\\u4EE3\\u7801\\u5212\\u5206\\u4E3A\\u4E0D\\u540C\\u7684\\u5C42\\uFF08\\u5982\\u7EC4\\u4EF6\\u3001\\u670D\\u52A1\\u548C\\u5B9E\\u7528\\u7A0B\\u5E8F\\uFF09\\u6765\\u5206\\u79BB\\u5173\\u6CE8\\u70B9\\u3002\\u6211\\u8FD8\\u4F7F\\u7528\\u547D\\u540D\\u7EA6\\u5B9A\\u548C\\u6587\\u6863\\u6765\\u786E\\u4FDD\\u4EE3\\u7801\\u7684\\u53EF\\u8BFB\\u6027\\u548C\\u53EF\\u7EF4\\u62A4\\u6027\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F60\\u5982\\u4F55\\u7EC4\\u7EC7\\u4F60\\u7684\\u4EE3\\u7801\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6A21\\u5757\\u5316\\u65B9\\u6CD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6211\\u9075\\u5FAA\\u6A21\\u5757\\u5316\\u65B9\\u6CD5\\uFF0C\\u5C06\\u5E94\\u7528\\u7A0B\\u5E8F\\u5206\\u89E3\\u4E3A\\u66F4\\u5C0F\\u3001\\u53EF\\u91CD\\u7528\\u7684\\u90E8\\u5206\\u3002\\u8FD9\\u6709\\u52A9\\u4E8E\\u66F4\\u6709\\u6548\\u5730\\u7BA1\\u7406\\u4EE3\\u7801\\u5E93\\uFF0C\\u5E76\\u4F7F\\u5176\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u548C\\u6269\\u5C55\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6587\\u4EF6\\u5939\\u7ED3\\u6784\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6211\\u4F7F\\u7528\\u6E05\\u6670\\u4E00\\u81F4\\u7684\\u6587\\u4EF6\\u5939\\u7ED3\\u6784\\u6765\\u7EC4\\u7EC7\\u6211\\u7684\\u4EE3\\u7801\\u3002\\u4EE5\\u4E0B\\u662F React \\u9879\\u76EE\\u7684\\u5E38\\u89C1\\u7ED3\\u6784\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{children:`src/\n|-- components/\n|   |-- Header/\n|   |   |-- Header.js\n|   |   |-- Header.css\n|   |-- Footer/\n|   |   |-- Footer.js\n|   |   |-- Footer.css\n|-- services/\n|   |-- apiService.js\n|-- utils/\n|   |-- helpers.js\n|-- App.js\n|-- index.js\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5173\\u6CE8\\u70B9\\u5206\\u79BB\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6211\\u901A\\u8FC7\\u5C06\\u4EE3\\u7801\\u5212\\u5206\\u4E3A\\u4E0D\\u540C\\u7684\\u5C42\\u6765\\u5206\\u79BB\\u5173\\u6CE8\\u70B9\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7EC4\\u4EF6\"}),\"\\uFF1A\\u53EF\\u91CD\\u7528\\u4E14\\u81EA\\u5305\\u542B\\u7684 UI \\u5143\\u7D20\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u670D\\u52A1\"}),\"\\uFF1A\\u5904\\u7406\\u6570\\u636E\\u83B7\\u53D6\\u548C\\u4E1A\\u52A1\\u903B\\u8F91\\u7684\\u51FD\\u6570\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B9E\\u7528\\u7A0B\\u5E8F\"}),\"\\uFF1A\\u53EF\\u5728\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u4F7F\\u7528\\u7684\\u8F85\\u52A9\\u51FD\\u6570\\u548C\\u5E38\\u91CF\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u547D\\u540D\\u7EA6\\u5B9A\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6211\\u4F7F\\u7528\\u4E00\\u81F4\\u7684\\u547D\\u540D\\u7EA6\\u5B9A\\u6765\\u63D0\\u9AD8\\u4EE3\\u7801\\u53EF\\u8BFB\\u6027\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6587\\u4EF6\\u548C\\u6587\\u4EF6\\u5939\"}),\"\\uFF1A\\u5BF9\\u6587\\u4EF6\\u548C\\u6587\\u4EF6\\u5939\\u540D\\u79F0\\u4F7F\\u7528 camelCase \\u6216 kebab-case\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7EC4\\u4EF6\"}),\"\\uFF1A\\u5BF9 React \\u7EC4\\u4EF6\\u540D\\u79F0\\u4F7F\\u7528 PascalCase\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53D8\\u91CF\\u548C\\u51FD\\u6570\"}),\"\\uFF1A\\u5BF9\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u540D\\u79F0\\u4F7F\\u7528 camelCase\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6587\\u6863\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6211\\u8BB0\\u5F55\\u6211\\u7684\\u4EE3\\u7801\\uFF0C\\u4EE5\\u4FBF\\u5176\\u4ED6\\u4EBA\\uFF08\\u548C\\u6211\\u81EA\\u5DF1\\uFF09\\u66F4\\u5BB9\\u6613\\u7406\\u89E3\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6CE8\\u91CA\"}),\"\\uFF1A\\u6DFB\\u52A0\\u6CE8\\u91CA\\u4EE5\\u89E3\\u91CA\\u590D\\u6742\\u7684\\u903B\\u8F91\\u6216\\u4EE3\\u7801\\u7684\\u91CD\\u8981\\u90E8\\u5206\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"README\"}),\"\\uFF1A\\u5305\\u542B\\u4E00\\u4E2A README \\u6587\\u4EF6\\uFF0C\\u5176\\u4E2D\\u5305\\u542B\\u6709\\u5173\\u5982\\u4F55\\u8BBE\\u7F6E\\u548C\\u8FD0\\u884C\\u9879\\u76EE\\u7684\\u8BF4\\u660E\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7F16\\u7801\\u6807\\u51C6\\u548C\\u6700\\u4F73\\u5B9E\\u8DF5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6211\\u9075\\u5B88\\u7F16\\u7801\\u6807\\u51C6\\u548C\\u6700\\u4F73\\u5B9E\\u8DF5\\uFF0C\\u4EE5\\u786E\\u4FDD\\u4EE3\\u7801\\u8D28\\u91CF\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Linting\"}),\": \\u4F7F\\u7528 ESLint \\u7B49\\u5DE5\\u5177\\u6765\\u6267\\u884C\\u7F16\\u7801\\u6807\\u51C6\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Formatting\"}),\": \\u4F7F\\u7528 Prettier \\u7B49\\u5DE5\\u5177\\u6765\\u4FDD\\u6301\\u4E00\\u81F4\\u7684\\u4EE3\\u7801\\u683C\\u5F0F\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Testing\"}),\": \\u7F16\\u5199\\u5355\\u5143\\u6D4B\\u8BD5\\u548C\\u96C6\\u6210\\u6D4B\\u8BD5\\u4EE5\\u786E\\u4FDD\\u4EE3\\u7801\\u53EF\\u9760\\u6027\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://github.com/airbnb/javascript\",children:\"JavaScript \\u7F16\\u7801\\u89C4\\u8303\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/writing-clean-code-6a8e2889b9f8/\",children:\"\\u7F16\\u5199\\u5E72\\u51C0\\u7684\\u4EE3\\u7801\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://jsdoc.app/\",children:\"\\u6709\\u6548\\u7684 JavaScript \\u6587\\u6863\"})}),`\n`]})]})}function a(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(o,{...r})}):o(r)}return _(F);})();\n;return Component;"
 }
\ No newline at end of file
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 f257be245..0ddb70788 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var r in e)a(t,r,{get:e[r],enumerable:!0})},c=(t,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of v(e))!p.call(t,o)&&o!==r&&a(t,o,{get:()=>e[o],enumerable:!(i=u(e,o))||i.enumerable});return t};var b=(t,e,r)=>(r=t!=null?s(f(t)):{},c(e||!t||!t.__esModule?a(r,\"default\",{value:t,enumerable:!0}):r,t)),w=t=>c(a({},\"__esModule\",{value:!0}),t);var d=m((E,l)=>{l.exports=_jsx_runtime});var y={};g(y,{default:()=>j,frontmatter:()=>D});var n=b(d()),D={title:\"How do you prevent the default behavior of an event?\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",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:[\"To prevent the default behavior of an event in JavaScript, you can use the \",(0,n.jsx)(e.code,{children:\"preventDefault\"}),\" method on the event object. For example, if you want to prevent a form from submitting, you can do the following:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.querySelector('form').addEventListener('submit', function (event) {\n  event.preventDefault();\n});\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"This method stops the default action associated with the event from occurring.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How do you prevent the default behavior of an event?\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"preventDefault\"}),\" method\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"preventDefault\"}),\" method is used to stop the default action of an event from occurring. This is useful in scenarios where you want to override the default behavior of an element, such as preventing a link from navigating to a new page or stopping a form from submitting.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example: Preventing form submission\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To prevent a form from submitting, you can attach an event listener to the form's \",(0,n.jsx)(e.code,{children:\"submit\"}),\" event and call \",(0,n.jsx)(e.code,{children:\"preventDefault\"}),\" within the event handler:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.querySelector('form').addEventListener('submit', function (event) {\n  event.preventDefault();\n  // Additional code to handle form submission\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Example: Preventing link navigation\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To prevent a link from navigating to a new page, you can attach an event listener to the link's \",(0,n.jsx)(e.code,{children:\"click\"}),\" event and call \",(0,n.jsx)(e.code,{children:\"preventDefault\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.querySelector('a').addEventListener('click', function (event) {\n  event.preventDefault();\n  // Additional code to handle the click event\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Example: Preventing default behavior in other events\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"preventDefault\"}),\" method can be used with various other events, such as \",(0,n.jsx)(e.code,{children:\"keydown\"}),\", \",(0,n.jsx)(e.code,{children:\"contextmenu\"}),\", and more. Here is an example of preventing the default context menu from appearing on right-click:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.addEventListener('contextmenu', function (event) {\n  event.preventDefault();\n  // Additional code to handle the right-click event\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Important considerations\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"preventDefault\"}),\" method should be called within the event handler function.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Not all events have a default behavior that can be prevented. For example, custom events do not have default actions.\"}),`\n`]}),`\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/Web/API/Event/preventDefault\",children:\"MDN Web Docs: Event.preventDefault()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/default-browser-action\",children:\"JavaScript.info: Browser default actions\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3schools.com/jsref/event_preventdefault.asp\",children:\"W3Schools: JavaScript Event preventDefault()\"})}),`\n`]})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var j=x;return w(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var r in e)a(t,r,{get:e[r],enumerable:!0})},c=(t,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of f(e))!m.call(t,o)&&o!==r&&a(t,o,{get:()=>e[o],enumerable:!(i=v(e,o))||i.enumerable});return t};var w=(t,e,r)=>(r=t!=null?u(p(t)):{},c(e||!t||!t.__esModule?a(r,\"default\",{value:t,enumerable:!0}):r,t)),D=t=>c(a({},\"__esModule\",{value:!0}),t);var d=g((k,l)=>{l.exports=_jsx_runtime});var y={};b(y,{default:()=>s,frontmatter:()=>x});var n=w(d()),x={title:\"How do you prevent the default behavior of an event?\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To prevent the default behavior of an event in JavaScript, you can use the \",(0,n.jsx)(e.code,{children:\"preventDefault\"}),\" method on the event object. For example, if you want to prevent a form from submitting, you can do the following:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.querySelector('form').addEventListener('submit', function (event) {\n  event.preventDefault();\n});\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"This method stops the default action associated with the event from occurring.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How do you prevent the default behavior of an event?\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"preventDefault\"}),\" method\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"preventDefault\"}),\" method is used to stop the default action of an event from occurring. This is useful in scenarios where you want to override the default behavior of an element, such as preventing a link from navigating to a new page or stopping a form from submitting.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example: Preventing form submission\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To prevent a form from submitting, you can attach an event listener to the form's \",(0,n.jsx)(e.code,{children:\"submit\"}),\" event and call \",(0,n.jsx)(e.code,{children:\"preventDefault\"}),\" within the event handler:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.querySelector('form').addEventListener('submit', function (event) {\n  event.preventDefault();\n  // Additional code to handle form submission\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Example: Preventing link navigation\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To prevent a link from navigating to a new page, you can attach an event listener to the link's \",(0,n.jsx)(e.code,{children:\"click\"}),\" event and call \",(0,n.jsx)(e.code,{children:\"preventDefault\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.querySelector('a').addEventListener('click', function (event) {\n  event.preventDefault();\n  // Additional code to handle the click event\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Example: Preventing default behavior in other events\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"preventDefault\"}),\" method can be used with various other events, such as \",(0,n.jsx)(e.code,{children:\"keydown\"}),\", \",(0,n.jsx)(e.code,{children:\"contextmenu\"}),\", and more. Here is an example of preventing the default context menu from appearing on right-click:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.addEventListener('contextmenu', function (event) {\n  event.preventDefault();\n  // Additional code to handle the right-click event\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Important considerations\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"preventDefault\"}),\" method should be called within the event handler function.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Not all events have a default behavior that can be prevented. For example, custom events do not have default actions.\"}),`\n`]}),`\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/Web/API/Event/preventDefault\",children:\"MDN Web Docs: Event.preventDefault()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/default-browser-action\",children:\"JavaScript.info: Browser default actions\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3schools.com/jsref/event_preventdefault.asp\",children:\"W3Schools: JavaScript Event preventDefault()\"})}),`\n`]})]})}function s(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return D(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-prevent-the-default-behavior-of-an-event/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-prevent-the-default-behavior-of-an-event/zh-CN.json
index 286ebc20b..2dfff47e3 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-prevent-the-default-behavior-of-an-event/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-prevent-the-default-behavior-of-an-event/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-prevent-the-default-behavior-of-an-event/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),D=(t,e)=>{for(var r in e)l(t,r,{get:e[r],enumerable:!0})},i=(t,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!f.call(t,c)&&c!==r&&l(t,c,{get:()=>e[c],enumerable:!(d=u(e,c))||d.enumerable});return t};var g=(t,e,r)=>(r=t!=null?s(v(t)):{},i(e||!t||!t.__esModule?l(r,\"default\",{value:t,enumerable:!0}):r,t)),j=t=>i(l({},\"__esModule\",{value:!0}),t);var a=m((E,h)=>{h.exports=_jsx_runtime});var S={};D(S,{default:()=>w,frontmatter:()=>x});var n=g(a()),x={title:\"\\u5982\\u4F55\\u963B\\u6B62\\u4E8B\\u4EF6\\u7684\\u9ED8\\u8BA4\\u884C\\u4E3A\\uFF1F\"};function o(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",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:[\"\\u8981\\u5728 JavaScript \\u4E2D\\u963B\\u6B62\\u4E8B\\u4EF6\\u7684\\u9ED8\\u8BA4\\u884C\\u4E3A\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728\\u4E8B\\u4EF6\\u5BF9\\u8C61\\u4E0A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"preventDefault\"}),\" \\u65B9\\u6CD5\\u3002\\u4F8B\\u5982\\uFF0C\\u5982\\u679C\\u60A8\\u60F3\\u963B\\u6B62\\u8868\\u5355\\u63D0\\u4EA4\\uFF0C\\u60A8\\u53EF\\u4EE5\\u6267\\u884C\\u4EE5\\u4E0B\\u64CD\\u4F5C\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.querySelector('form').addEventListener('submit', function (event) {\n  event.preventDefault();\n});\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u65B9\\u6CD5\\u4F1A\\u963B\\u6B62\\u4E0E\\u4E8B\\u4EF6\\u5173\\u8054\\u7684\\u9ED8\\u8BA4\\u64CD\\u4F5C\\u53D1\\u751F\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u963B\\u6B62\\u4E8B\\u4EF6\\u7684\\u9ED8\\u8BA4\\u884C\\u4E3A\\uFF1F\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"preventDefault\"}),\" \\u65B9\\u6CD5\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"preventDefault\"}),\" \\u65B9\\u6CD5\\u7528\\u4E8E\\u963B\\u6B62\\u4E8B\\u4EF6\\u7684\\u9ED8\\u8BA4\\u64CD\\u4F5C\\u53D1\\u751F\\u3002\\u8FD9\\u5728\\u60A8\\u60F3\\u8981\\u8986\\u76D6\\u5143\\u7D20\\u7684\\u9ED8\\u8BA4\\u884C\\u4E3A\\uFF08\\u4F8B\\u5982\\uFF0C\\u963B\\u6B62\\u94FE\\u63A5\\u5BFC\\u822A\\u5230\\u65B0\\u9875\\u9762\\u6216\\u963B\\u6B62\\u8868\\u5355\\u63D0\\u4EA4\\uFF09\\u7684\\u60C5\\u51B5\\u4E0B\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\\uFF1A\\u963B\\u6B62\\u8868\\u5355\\u63D0\\u4EA4\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u963B\\u6B62\\u8868\\u5355\\u63D0\\u4EA4\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C06\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u8868\\u5355\\u7684 \",(0,n.jsx)(e.code,{children:\"submit\"}),\" \\u4E8B\\u4EF6\\uFF0C\\u5E76\\u5728\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D\\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"preventDefault\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.querySelector('form').addEventListener('submit', function (event) {\n  event.preventDefault();\n  // \\u989D\\u5916\\u7684\\u4EE3\\u7801\\u6765\\u5904\\u7406\\u8868\\u5355\\u63D0\\u4EA4\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\\uFF1A\\u963B\\u6B62\\u94FE\\u63A5\\u5BFC\\u822A\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u963B\\u6B62\\u94FE\\u63A5\\u5BFC\\u822A\\u5230\\u65B0\\u9875\\u9762\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C06\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u94FE\\u63A5\\u7684 \",(0,n.jsx)(e.code,{children:\"click\"}),\" \\u4E8B\\u4EF6\\u5E76\\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"preventDefault\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.querySelector('a').addEventListener('click', function (event) {\n  event.preventDefault();\n  // \\u989D\\u5916\\u7684\\u4EE3\\u7801\\u6765\\u5904\\u7406\\u70B9\\u51FB\\u4E8B\\u4EF6\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\\uFF1A\\u963B\\u6B62\\u5176\\u4ED6\\u4E8B\\u4EF6\\u4E2D\\u7684\\u9ED8\\u8BA4\\u884C\\u4E3A\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"preventDefault\"}),\" \\u65B9\\u6CD5\\u53EF\\u4EE5\\u4E0E\\u5404\\u79CD\\u5176\\u4ED6\\u4E8B\\u4EF6\\u4E00\\u8D77\\u4F7F\\u7528\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"keydown\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"contextmenu\"}),\" \\u7B49\\u3002 \\u8FD9\\u662F\\u4E00\\u4E2A\\u963B\\u6B62\\u53F3\\u952E\\u5355\\u51FB\\u65F6\\u51FA\\u73B0\\u9ED8\\u8BA4\\u4E0A\\u4E0B\\u6587\\u83DC\\u5355\\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.addEventListener('contextmenu', function (event) {\n  event.preventDefault();\n  // \\u989D\\u5916\\u7684\\u4EE3\\u7801\\u6765\\u5904\\u7406\\u53F3\\u952E\\u5355\\u51FB\\u4E8B\\u4EF6\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u91CD\\u8981\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"preventDefault\"}),\" \\u65B9\\u6CD5\\u5E94\\u5728\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u51FD\\u6570\\u4E2D\\u8C03\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5E76\\u975E\\u6240\\u6709\\u4E8B\\u4EF6\\u90FD\\u5177\\u6709\\u53EF\\u4EE5\\u963B\\u6B62\\u7684\\u9ED8\\u8BA4\\u884C\\u4E3A\\u3002 \\u4F8B\\u5982\\uFF0C\\u81EA\\u5B9A\\u4E49\\u4E8B\\u4EF6\\u6CA1\\u6709\\u9ED8\\u8BA4\\u64CD\\u4F5C\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Event/preventDefault\",children:\"MDN Web Docs: Event.preventDefault()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/default-browser-action\",children:\"JavaScript.info: Browser default actions\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3schools.com/jsref/event_preventdefault.asp\",children:\"W3Schools: JavaScript Event preventDefault()\"})}),`\n`]})]})}function b(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(o,t)})):o(t)}var w=b;return j(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var D=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var r in e)l(t,r,{get:e[r],enumerable:!0})},i=(t,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of v(e))!m.call(t,c)&&c!==r&&l(t,c,{get:()=>e[c],enumerable:!(d=p(e,c))||d.enumerable});return t};var j=(t,e,r)=>(r=t!=null?s(f(t)):{},i(e||!t||!t.__esModule?l(r,\"default\",{value:t,enumerable:!0}):r,t)),x=t=>i(l({},\"__esModule\",{value:!0}),t);var o=D((E,h)=>{h.exports=_jsx_runtime});var S={};g(S,{default:()=>u,frontmatter:()=>w});var n=j(o()),w={title:\"\\u5982\\u4F55\\u963B\\u6B62\\u4E8B\\u4EF6\\u7684\\u9ED8\\u8BA4\\u884C\\u4E3A\\uFF1F\"};function a(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u5728 JavaScript \\u4E2D\\u963B\\u6B62\\u4E8B\\u4EF6\\u7684\\u9ED8\\u8BA4\\u884C\\u4E3A\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728\\u4E8B\\u4EF6\\u5BF9\\u8C61\\u4E0A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"preventDefault\"}),\" \\u65B9\\u6CD5\\u3002\\u4F8B\\u5982\\uFF0C\\u5982\\u679C\\u60A8\\u60F3\\u963B\\u6B62\\u8868\\u5355\\u63D0\\u4EA4\\uFF0C\\u60A8\\u53EF\\u4EE5\\u6267\\u884C\\u4EE5\\u4E0B\\u64CD\\u4F5C\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.querySelector('form').addEventListener('submit', function (event) {\n  event.preventDefault();\n});\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u65B9\\u6CD5\\u4F1A\\u963B\\u6B62\\u4E0E\\u4E8B\\u4EF6\\u5173\\u8054\\u7684\\u9ED8\\u8BA4\\u64CD\\u4F5C\\u53D1\\u751F\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u963B\\u6B62\\u4E8B\\u4EF6\\u7684\\u9ED8\\u8BA4\\u884C\\u4E3A\\uFF1F\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"preventDefault\"}),\" \\u65B9\\u6CD5\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"preventDefault\"}),\" \\u65B9\\u6CD5\\u7528\\u4E8E\\u963B\\u6B62\\u4E8B\\u4EF6\\u7684\\u9ED8\\u8BA4\\u64CD\\u4F5C\\u53D1\\u751F\\u3002\\u8FD9\\u5728\\u60A8\\u60F3\\u8981\\u8986\\u76D6\\u5143\\u7D20\\u7684\\u9ED8\\u8BA4\\u884C\\u4E3A\\uFF08\\u4F8B\\u5982\\uFF0C\\u963B\\u6B62\\u94FE\\u63A5\\u5BFC\\u822A\\u5230\\u65B0\\u9875\\u9762\\u6216\\u963B\\u6B62\\u8868\\u5355\\u63D0\\u4EA4\\uFF09\\u7684\\u60C5\\u51B5\\u4E0B\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\\uFF1A\\u963B\\u6B62\\u8868\\u5355\\u63D0\\u4EA4\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u963B\\u6B62\\u8868\\u5355\\u63D0\\u4EA4\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C06\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u8868\\u5355\\u7684 \",(0,n.jsx)(e.code,{children:\"submit\"}),\" \\u4E8B\\u4EF6\\uFF0C\\u5E76\\u5728\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D\\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"preventDefault\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.querySelector('form').addEventListener('submit', function (event) {\n  event.preventDefault();\n  // \\u989D\\u5916\\u7684\\u4EE3\\u7801\\u6765\\u5904\\u7406\\u8868\\u5355\\u63D0\\u4EA4\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\\uFF1A\\u963B\\u6B62\\u94FE\\u63A5\\u5BFC\\u822A\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u963B\\u6B62\\u94FE\\u63A5\\u5BFC\\u822A\\u5230\\u65B0\\u9875\\u9762\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C06\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u9644\\u52A0\\u5230\\u94FE\\u63A5\\u7684 \",(0,n.jsx)(e.code,{children:\"click\"}),\" \\u4E8B\\u4EF6\\u5E76\\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"preventDefault\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.querySelector('a').addEventListener('click', function (event) {\n  event.preventDefault();\n  // \\u989D\\u5916\\u7684\\u4EE3\\u7801\\u6765\\u5904\\u7406\\u70B9\\u51FB\\u4E8B\\u4EF6\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\\uFF1A\\u963B\\u6B62\\u5176\\u4ED6\\u4E8B\\u4EF6\\u4E2D\\u7684\\u9ED8\\u8BA4\\u884C\\u4E3A\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"preventDefault\"}),\" \\u65B9\\u6CD5\\u53EF\\u4EE5\\u4E0E\\u5404\\u79CD\\u5176\\u4ED6\\u4E8B\\u4EF6\\u4E00\\u8D77\\u4F7F\\u7528\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"keydown\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"contextmenu\"}),\" \\u7B49\\u3002 \\u8FD9\\u662F\\u4E00\\u4E2A\\u963B\\u6B62\\u53F3\\u952E\\u5355\\u51FB\\u65F6\\u51FA\\u73B0\\u9ED8\\u8BA4\\u4E0A\\u4E0B\\u6587\\u83DC\\u5355\\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.addEventListener('contextmenu', function (event) {\n  event.preventDefault();\n  // \\u989D\\u5916\\u7684\\u4EE3\\u7801\\u6765\\u5904\\u7406\\u53F3\\u952E\\u5355\\u51FB\\u4E8B\\u4EF6\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u91CD\\u8981\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"preventDefault\"}),\" \\u65B9\\u6CD5\\u5E94\\u5728\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u51FD\\u6570\\u4E2D\\u8C03\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5E76\\u975E\\u6240\\u6709\\u4E8B\\u4EF6\\u90FD\\u5177\\u6709\\u53EF\\u4EE5\\u963B\\u6B62\\u7684\\u9ED8\\u8BA4\\u884C\\u4E3A\\u3002 \\u4F8B\\u5982\\uFF0C\\u81EA\\u5B9A\\u4E49\\u4E8B\\u4EF6\\u6CA1\\u6709\\u9ED8\\u8BA4\\u64CD\\u4F5C\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Event/preventDefault\",children:\"MDN Web Docs: Event.preventDefault()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/default-browser-action\",children:\"JavaScript.info: Browser default actions\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3schools.com/jsref/event_preventdefault.asp\",children:\"W3Schools: JavaScript Event preventDefault()\"})}),`\n`]})]})}function u(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(a,{...t})}):a(t)}return x(S);})();\n;return Component;"
 }
\ No newline at end of file
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 4caff6b86..f98fe66ea 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var r=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var m=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),f=(o,e)=>{for(var i in e)r(o,i,{get:e[i],enumerable:!0})},a=(o,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of p(e))!u.call(o,t)&&t!==i&&r(o,t,{get:()=>e[t],enumerable:!(c=w(e,t))||c.enumerable});return o};var y=(o,e,i)=>(i=o!=null?s(g(o)):{},a(e||!o||!o.__esModule?r(i,\"default\",{value:o,enumerable:!0}):i,o)),b=o=>a(r({},\"__esModule\",{value:!0}),o);var l=m((D,h)=>{h.exports=_jsx_runtime});var W={};f(W,{default:()=>j,frontmatter:()=>x});var n=y(l()),x={title:\"How do you redirect to a new page in JavaScript?\"};function d(o){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To redirect to a new page in JavaScript, you can use the \",(0,n.jsx)(e.code,{children:\"window.location\"}),\" object. The most common methods are \",(0,n.jsx)(e.code,{children:\"window.location.href\"}),\" and \",(0,n.jsx)(e.code,{children:\"window.location.replace()\"}),\". For example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Using window.location.href\nwindow.location.href = 'https://www.example.com';\n\n// Using window.location.replace()\nwindow.location.replace('https://www.example.com');\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How do you redirect to a new page in JavaScript?\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"window.location.href\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"window.location.href\"}),\" property is used to get or set the URL of the current page. When you set this property, the browser will navigate to the new URL, and it will create a new entry in the browser's history.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`window.location.href = 'https://www.example.com';\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"window.location.replace()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"window.location.replace()\"}),\" method is similar to \",(0,n.jsx)(e.code,{children:\"window.location.href\"}),\", but it does not create a new entry in the browser's history. This means that the user cannot use the back button to return to the original page.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`window.location.replace('https://www.example.com');\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"window.location.assign()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"window.location.assign()\"}),\" method works similarly to \",(0,n.jsx)(e.code,{children:\"window.location.href\"}),\" and creates a new entry in the browser's history.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`window.location.assign('https://www.example.com');\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"window.location.reload()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"If you want to reload the current page, you can use the \",(0,n.jsx)(e.code,{children:\"window.location.reload()\"}),\" method. This method can be useful if you want to refresh the page without changing the URL.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`window.location.reload();\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"window.history.pushState()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"For more advanced use cases, such as single-page applications (SPAs), you can use the \",(0,n.jsx)(e.code,{children:\"window.history.pushState()\"}),\" method. This method allows you to change the URL without reloading the page.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`window.history.pushState({}, '', '/new-page');\n`})}),`\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/Web/API/Window/location\",children:\"MDN Web Docs: Window.location\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Location/href\",children:\"MDN Web Docs: Window.location.href\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Location/replace\",children:\"MDN Web Docs: Window.location.replace()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/pushState\",children:\"MDN Web Docs: Window.history.pushState()\"})}),`\n`]})]})}function U(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(d,o)})):d(o)}var j=U;return b(W);})();\n;return Component;"
+  "solution": "var Component=(()=>{var w=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(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})},a=(o,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of u(e))!m.call(o,t)&&t!==i&&r(o,t,{get:()=>e[t],enumerable:!(c=p(e,t))||c.enumerable});return o};var b=(o,e,i)=>(i=o!=null?w(g(o)):{},a(e||!o||!o.__esModule?r(i,\"default\",{value:o,enumerable:!0}):i,o)),x=o=>a(r({},\"__esModule\",{value:!0}),o);var l=f((j,h)=>{h.exports=_jsx_runtime});var W={};y(W,{default:()=>s,frontmatter:()=>U});var n=b(l()),U={title:\"How do you redirect to a new page in JavaScript?\"};function d(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To redirect to a new page in JavaScript, you can use the \",(0,n.jsx)(e.code,{children:\"window.location\"}),\" object. The most common methods are \",(0,n.jsx)(e.code,{children:\"window.location.href\"}),\" and \",(0,n.jsx)(e.code,{children:\"window.location.replace()\"}),\". For example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Using window.location.href\nwindow.location.href = 'https://www.example.com';\n\n// Using window.location.replace()\nwindow.location.replace('https://www.example.com');\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How do you redirect to a new page in JavaScript?\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"window.location.href\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"window.location.href\"}),\" property is used to get or set the URL of the current page. When you set this property, the browser will navigate to the new URL, and it will create a new entry in the browser's history.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`window.location.href = 'https://www.example.com';\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"window.location.replace()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"window.location.replace()\"}),\" method is similar to \",(0,n.jsx)(e.code,{children:\"window.location.href\"}),\", but it does not create a new entry in the browser's history. This means that the user cannot use the back button to return to the original page.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`window.location.replace('https://www.example.com');\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"window.location.assign()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"window.location.assign()\"}),\" method works similarly to \",(0,n.jsx)(e.code,{children:\"window.location.href\"}),\" and creates a new entry in the browser's history.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`window.location.assign('https://www.example.com');\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"window.location.reload()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"If you want to reload the current page, you can use the \",(0,n.jsx)(e.code,{children:\"window.location.reload()\"}),\" method. This method can be useful if you want to refresh the page without changing the URL.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`window.location.reload();\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"window.history.pushState()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"For more advanced use cases, such as single-page applications (SPAs), you can use the \",(0,n.jsx)(e.code,{children:\"window.history.pushState()\"}),\" method. This method allows you to change the URL without reloading the page.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`window.history.pushState({}, '', '/new-page');\n`})}),`\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/Web/API/Window/location\",children:\"MDN Web Docs: Window.location\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Location/href\",children:\"MDN Web Docs: Window.location.href\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Location/replace\",children:\"MDN Web Docs: Window.location.replace()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/pushState\",children:\"MDN Web Docs: Window.history.pushState()\"})}),`\n`]})]})}function s(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(d,{...o})}):d(o)}return x(W);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-redirect-to-a-new-page-in-javascript/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-redirect-to-a-new-page-in-javascript/zh-CN.json
index b1aec4686..81ea4aade 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-redirect-to-a-new-page-in-javascript/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-redirect-to-a-new-page-in-javascript/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-redirect-to-a-new-page-in-javascript/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var w=Object.create;var l=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var u=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),f=(o,e)=>{for(var c in e)l(o,c,{get:e[c],enumerable:!0})},d=(o,e,c,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!g.call(o,i)&&i!==c&&l(o,i,{get:()=>e[i],enumerable:!(r=s(e,i))||r.enumerable});return o};var x=(o,e,c)=>(c=o!=null?w(m(o)):{},d(e||!o||!o.__esModule?l(c,\"default\",{value:o,enumerable:!0}):c,o)),j=o=>d(l({},\"__esModule\",{value:!0}),o);var h=u((L,a)=>{a.exports=_jsx_runtime});var N={};f(N,{default:()=>b,frontmatter:()=>S});var n=x(h()),S={title:\"\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u91CD\\u5B9A\\u5411\\u5230\\u65B0\\u9875\\u9762\\uFF1F\"};function t(o){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u5728 JavaScript \\u4E2D\\u91CD\\u5B9A\\u5411\\u5230\\u65B0\\u9875\\u9762\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.location\"}),\" \\u5BF9\\u8C61\\u3002\\u6700\\u5E38\\u7528\\u7684\\u65B9\\u6CD5\\u662F \",(0,n.jsx)(e.code,{children:\"window.location.href\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"window.location.replace()\"}),\"\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Using window.location.href\nwindow.location.href = 'https://www.example.com';\n\n// Using window.location.replace()\nwindow.location.replace('https://www.example.com');\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u91CD\\u5B9A\\u5411\\u5230\\u65B0\\u9875\\u9762\\uFF1F\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.location.href\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"window.location.href\"}),\" \\u5C5E\\u6027\\u7528\\u4E8E\\u83B7\\u53D6\\u6216\\u8BBE\\u7F6E\\u5F53\\u524D\\u9875\\u9762\\u7684 URL\\u3002\\u8BBE\\u7F6E\\u6B64\\u5C5E\\u6027\\u540E\\uFF0C\\u6D4F\\u89C8\\u5668\\u5C06\\u5BFC\\u822A\\u5230\\u65B0\\u7684 URL\\uFF0C\\u5E76\\u5C06\\u5728\\u6D4F\\u89C8\\u5668\\u7684\\u5386\\u53F2\\u8BB0\\u5F55\\u4E2D\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u6761\\u76EE\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`window.location.href = 'https://www.example.com';\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.location.replace()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"window.location.replace()\"}),\" \\u65B9\\u6CD5\\u7C7B\\u4F3C\\u4E8E \",(0,n.jsx)(e.code,{children:\"window.location.href\"}),\"\\uFF0C\\u4F46\\u5B83\\u4E0D\\u4F1A\\u5728\\u6D4F\\u89C8\\u5668\\u7684\\u5386\\u53F2\\u8BB0\\u5F55\\u4E2D\\u521B\\u5EFA\\u65B0\\u6761\\u76EE\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u7528\\u6237\\u65E0\\u6CD5\\u4F7F\\u7528\\u540E\\u9000\\u6309\\u94AE\\u8FD4\\u56DE\\u5230\\u539F\\u59CB\\u9875\\u9762\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`window.location.replace('https://www.example.com');\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.location.assign()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"window.location.assign()\"}),\" \\u65B9\\u6CD5\\u4E0E \",(0,n.jsx)(e.code,{children:\"window.location.href\"}),\" \\u7C7B\\u4F3C\\uFF0C\\u5E76\\u5728\\u6D4F\\u89C8\\u5668\\u7684\\u5386\\u53F2\\u8BB0\\u5F55\\u4E2D\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u6761\\u76EE\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`window.location.assign('https://www.example.com');\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.location.reload()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u8981\\u91CD\\u65B0\\u52A0\\u8F7D\\u5F53\\u524D\\u9875\\u9762\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.location.reload()\"}),\" \\u65B9\\u6CD5\\u3002\\u5982\\u679C\\u60A8\\u60F3\\u5237\\u65B0\\u9875\\u9762\\u800C\\u4E0D\\u66F4\\u6539 URL\\uFF0C\\u6B64\\u65B9\\u6CD5\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`window.location.reload();\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.history.pushState()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5BF9\\u4E8E\\u66F4\\u9AD8\\u7EA7\\u7684\\u7528\\u4F8B\\uFF0C\\u4F8B\\u5982\\u5355\\u9875\\u5E94\\u7528\\u7A0B\\u5E8F (SPA)\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.history.pushState()\"}),\" \\u65B9\\u6CD5\\u3002\\u6B64\\u65B9\\u6CD5\\u5141\\u8BB8\\u60A8\\u66F4\\u6539 URL \\u800C\\u65E0\\u9700\\u91CD\\u65B0\\u52A0\\u8F7D\\u9875\\u9762\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`window.history.pushState({}, '', '/new-page');\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Window/location\",children:\"MDN Web \\u6587\\u6863\\uFF1AWindow.location\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Location/href\",children:\"MDN Web \\u6587\\u6863\\uFF1AWindow.location.href\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Location/replace\",children:\"MDN Web \\u6587\\u6863\\uFF1AWindow.location.replace()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/pushState\",children:\"MDN Web \\u6587\\u6863\\uFF1AWindow.history.pushState()\"})}),`\n`]})]})}function W(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(t,o)})):t(o)}var b=W;return j(N);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var c in e)l(o,c,{get:e[c],enumerable:!0})},d=(o,e,c,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!u.call(o,i)&&i!==c&&l(o,i,{get:()=>e[i],enumerable:!(r=p(e,i))||r.enumerable});return o};var S=(o,e,c)=>(c=o!=null?s(g(o)):{},d(e||!o||!o.__esModule?l(c,\"default\",{value:o,enumerable:!0}):c,o)),W=o=>d(l({},\"__esModule\",{value:!0}),o);var h=f((b,a)=>{a.exports=_jsx_runtime});var N={};x(N,{default:()=>w,frontmatter:()=>j});var n=S(h()),j={title:\"\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u91CD\\u5B9A\\u5411\\u5230\\u65B0\\u9875\\u9762\\uFF1F\"};function t(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u5728 JavaScript \\u4E2D\\u91CD\\u5B9A\\u5411\\u5230\\u65B0\\u9875\\u9762\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.location\"}),\" \\u5BF9\\u8C61\\u3002\\u6700\\u5E38\\u7528\\u7684\\u65B9\\u6CD5\\u662F \",(0,n.jsx)(e.code,{children:\"window.location.href\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"window.location.replace()\"}),\"\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Using window.location.href\nwindow.location.href = 'https://www.example.com';\n\n// Using window.location.replace()\nwindow.location.replace('https://www.example.com');\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u91CD\\u5B9A\\u5411\\u5230\\u65B0\\u9875\\u9762\\uFF1F\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.location.href\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"window.location.href\"}),\" \\u5C5E\\u6027\\u7528\\u4E8E\\u83B7\\u53D6\\u6216\\u8BBE\\u7F6E\\u5F53\\u524D\\u9875\\u9762\\u7684 URL\\u3002\\u8BBE\\u7F6E\\u6B64\\u5C5E\\u6027\\u540E\\uFF0C\\u6D4F\\u89C8\\u5668\\u5C06\\u5BFC\\u822A\\u5230\\u65B0\\u7684 URL\\uFF0C\\u5E76\\u5C06\\u5728\\u6D4F\\u89C8\\u5668\\u7684\\u5386\\u53F2\\u8BB0\\u5F55\\u4E2D\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u6761\\u76EE\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`window.location.href = 'https://www.example.com';\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.location.replace()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"window.location.replace()\"}),\" \\u65B9\\u6CD5\\u7C7B\\u4F3C\\u4E8E \",(0,n.jsx)(e.code,{children:\"window.location.href\"}),\"\\uFF0C\\u4F46\\u5B83\\u4E0D\\u4F1A\\u5728\\u6D4F\\u89C8\\u5668\\u7684\\u5386\\u53F2\\u8BB0\\u5F55\\u4E2D\\u521B\\u5EFA\\u65B0\\u6761\\u76EE\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u7528\\u6237\\u65E0\\u6CD5\\u4F7F\\u7528\\u540E\\u9000\\u6309\\u94AE\\u8FD4\\u56DE\\u5230\\u539F\\u59CB\\u9875\\u9762\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`window.location.replace('https://www.example.com');\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.location.assign()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"window.location.assign()\"}),\" \\u65B9\\u6CD5\\u4E0E \",(0,n.jsx)(e.code,{children:\"window.location.href\"}),\" \\u7C7B\\u4F3C\\uFF0C\\u5E76\\u5728\\u6D4F\\u89C8\\u5668\\u7684\\u5386\\u53F2\\u8BB0\\u5F55\\u4E2D\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u6761\\u76EE\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`window.location.assign('https://www.example.com');\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.location.reload()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u8981\\u91CD\\u65B0\\u52A0\\u8F7D\\u5F53\\u524D\\u9875\\u9762\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.location.reload()\"}),\" \\u65B9\\u6CD5\\u3002\\u5982\\u679C\\u60A8\\u60F3\\u5237\\u65B0\\u9875\\u9762\\u800C\\u4E0D\\u66F4\\u6539 URL\\uFF0C\\u6B64\\u65B9\\u6CD5\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`window.location.reload();\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.history.pushState()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5BF9\\u4E8E\\u66F4\\u9AD8\\u7EA7\\u7684\\u7528\\u4F8B\\uFF0C\\u4F8B\\u5982\\u5355\\u9875\\u5E94\\u7528\\u7A0B\\u5E8F (SPA)\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.history.pushState()\"}),\" \\u65B9\\u6CD5\\u3002\\u6B64\\u65B9\\u6CD5\\u5141\\u8BB8\\u60A8\\u66F4\\u6539 URL \\u800C\\u65E0\\u9700\\u91CD\\u65B0\\u52A0\\u8F7D\\u9875\\u9762\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`window.history.pushState({}, '', '/new-page');\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Window/location\",children:\"MDN Web \\u6587\\u6863\\uFF1AWindow.location\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Location/href\",children:\"MDN Web \\u6587\\u6863\\uFF1AWindow.location.href\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Location/replace\",children:\"MDN Web \\u6587\\u6863\\uFF1AWindow.location.replace()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/pushState\",children:\"MDN Web \\u6587\\u6863\\uFF1AWindow.history.pushState()\"})}),`\n`]})]})}function w(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(t,{...o})}):t(o)}return W(N);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-reliably-determine-whether-an-object-is-empty/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-reliably-determine-whether-an-object-is-empty/en-US.json
index c1db2df6c..e4938d1ed 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-reliably-determine-whether-an-object-is-empty/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-reliably-determine-whether-an-object-is-empty/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-reliably-determine-whether-an-object-is-empty/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var u=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),m=(o,e)=>{for(var t in e)c(o,t,{get:e[t],enumerable:!0})},l=(o,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!y.call(o,r)&&r!==t&&c(o,r,{get:()=>e[r],enumerable:!(s=b(e,r))||s.enumerable});return o};var g=(o,e,t)=>(t=o!=null?d(j(o)):{},l(e||!o||!o.__esModule?c(t,\"default\",{value:o,enumerable:!0}):t,o)),f=o=>l(c({},\"__esModule\",{value:!0}),o);var h=u((D,i)=>{i.exports=_jsx_runtime});var E={};m(E,{default:()=>k,frontmatter:()=>O});var n=g(h()),O={title:\"How do you reliably determine whether an object is empty?\"};function a(o){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To reliably determine whether an object is empty, you can use \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" to check if the object has any enumerable properties. If the length of the array returned by \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" is zero, the object is empty.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const isEmpty = (obj) => Object.keys(obj).length === 0;\n\nconst obj = {};\nconsole.log(isEmpty(obj)); // true\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How do you reliably determine whether an object is empty?\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"Object.keys()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The most common and reliable way to check if an object is empty is by using \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\". This method returns an array of the object's own enumerable property names. If the length of this array is zero, the object is empty.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const isEmpty = (obj) => Object.keys(obj).length === 0;\n\nconst obj1 = {};\nconst obj2 = { key: 'value' };\n\nconsole.log(isEmpty(obj1)); // true\nconsole.log(isEmpty(obj2)); // false\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"Object.entries()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Another method is to use \",(0,n.jsx)(e.code,{children:\"Object.entries()\"}),\", which returns an array of the object's own enumerable property \",(0,n.jsx)(e.code,{children:\"[key, value]\"}),\" pairs. If the length of this array is zero, the object is empty.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const isEmpty = (obj) => Object.entries(obj).length === 0;\n\nconst obj1 = {};\nconst obj2 = { key: 'value' };\n\nconsole.log(isEmpty(obj1)); // true\nconsole.log(isEmpty(obj2)); // false\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"Object.values()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Similarly, you can use \",(0,n.jsx)(e.code,{children:\"Object.values()\"}),\", which returns an array of the object's own enumerable property values. If the length of this array is zero, the object is empty.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const isEmpty = (obj) => Object.values(obj).length === 0;\n\nconst obj1 = {};\nconst obj2 = { key: 'value' };\n\nconsole.log(isEmpty(obj1)); // true\nconsole.log(isEmpty(obj2)); // false\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using a \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" loop\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can also use a \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" loop to check if an object has any properties. If the loop doesn't iterate over any properties, the object is empty.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const isEmpty = (obj) => {\n  for (let key in obj) {\n    if (obj.hasOwnProperty(key)) {\n      return false;\n    }\n  }\n  return true;\n};\n\nconst obj1 = {};\nconst obj2 = { key: 'value' };\nconst childObj = Object.create(obj2); // Inherit from obj2\n\nconsole.log(isEmpty(obj1)); // true\nconsole.log(isEmpty(obj2)); // false\nconsole.log(isEmpty(childObj)); // true (has no own properties)\nconsole.log(childObj.key); // Output: 'value' (still has the inherited property)\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Edge cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Prototype properties\"}),\": The methods above only check for the object's own properties, not properties inherited from its prototype.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Non-enumerable properties\"}),\": These methods do not account for non-enumerable properties.\"]}),`\n`]}),`\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/Web/JavaScript/Reference/Global_Objects/Object/keys\",children:\"MDN Web Docs: Object.keys()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries\",children:\"MDN Web Docs: Object.entries()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values\",children:\"MDN Web Docs: Object.values()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in\",children:\"MDN Web Docs: for...in\"})}),`\n`]})]})}function v(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(a,o)})):a(o)}var k=v;return f(E);})();\n;return Component;"
+  "solution": "var Component=(()=>{var b=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var m=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),g=(o,e)=>{for(var t in e)c(o,t,{get:e[t],enumerable:!0})},l=(o,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of j(e))!u.call(o,r)&&r!==t&&c(o,r,{get:()=>e[r],enumerable:!(s=p(e,r))||s.enumerable});return o};var f=(o,e,t)=>(t=o!=null?b(y(o)):{},l(e||!o||!o.__esModule?c(t,\"default\",{value:o,enumerable:!0}):t,o)),v=o=>l(c({},\"__esModule\",{value:!0}),o);var h=m((w,i)=>{i.exports=_jsx_runtime});var k={};g(k,{default:()=>d,frontmatter:()=>O});var n=f(h()),O={title:\"How do you reliably determine whether an object is empty?\"};function a(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To reliably determine whether an object is empty, you can use \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" to check if the object has any enumerable properties. If the length of the array returned by \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" is zero, the object is empty.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const isEmpty = (obj) => Object.keys(obj).length === 0;\n\nconst obj = {};\nconsole.log(isEmpty(obj)); // true\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How do you reliably determine whether an object is empty?\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"Object.keys()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The most common and reliable way to check if an object is empty is by using \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\". This method returns an array of the object's own enumerable property names. If the length of this array is zero, the object is empty.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const isEmpty = (obj) => Object.keys(obj).length === 0;\n\nconst obj1 = {};\nconst obj2 = { key: 'value' };\n\nconsole.log(isEmpty(obj1)); // true\nconsole.log(isEmpty(obj2)); // false\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"Object.entries()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Another method is to use \",(0,n.jsx)(e.code,{children:\"Object.entries()\"}),\", which returns an array of the object's own enumerable property \",(0,n.jsx)(e.code,{children:\"[key, value]\"}),\" pairs. If the length of this array is zero, the object is empty.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const isEmpty = (obj) => Object.entries(obj).length === 0;\n\nconst obj1 = {};\nconst obj2 = { key: 'value' };\n\nconsole.log(isEmpty(obj1)); // true\nconsole.log(isEmpty(obj2)); // false\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"Object.values()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Similarly, you can use \",(0,n.jsx)(e.code,{children:\"Object.values()\"}),\", which returns an array of the object's own enumerable property values. If the length of this array is zero, the object is empty.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const isEmpty = (obj) => Object.values(obj).length === 0;\n\nconst obj1 = {};\nconst obj2 = { key: 'value' };\n\nconsole.log(isEmpty(obj1)); // true\nconsole.log(isEmpty(obj2)); // false\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using a \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" loop\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can also use a \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" loop to check if an object has any properties. If the loop doesn't iterate over any properties, the object is empty.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const isEmpty = (obj) => {\n  for (let key in obj) {\n    if (obj.hasOwnProperty(key)) {\n      return false;\n    }\n  }\n  return true;\n};\n\nconst obj1 = {};\nconst obj2 = { key: 'value' };\nconst childObj = Object.create(obj2); // Inherit from obj2\n\nconsole.log(isEmpty(obj1)); // true\nconsole.log(isEmpty(obj2)); // false\nconsole.log(isEmpty(childObj)); // true (has no own properties)\nconsole.log(childObj.key); // Output: 'value' (still has the inherited property)\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Edge cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Prototype properties\"}),\": The methods above only check for the object's own properties, not properties inherited from its prototype.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Non-enumerable properties\"}),\": These methods do not account for non-enumerable properties.\"]}),`\n`]}),`\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/Web/JavaScript/Reference/Global_Objects/Object/keys\",children:\"MDN Web Docs: Object.keys()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries\",children:\"MDN Web Docs: Object.entries()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values\",children:\"MDN Web Docs: Object.values()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in\",children:\"MDN Web Docs: for...in\"})}),`\n`]})]})}function d(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(a,{...o})}):a(o)}return v(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-reliably-determine-whether-an-object-is-empty/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-reliably-determine-whether-an-object-is-empty/zh-CN.json
index 896efedb8..ba11d14e9 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-reliably-determine-whether-an-object-is-empty/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-reliably-determine-whether-an-object-is-empty/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-reliably-determine-whether-an-object-is-empty/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var t=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),m=(c,e)=>{for(var o in e)t(c,o,{get:e[o],enumerable:!0})},s=(c,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of j(e))!u.call(c,l)&&l!==o&&t(c,l,{get:()=>e[l],enumerable:!(r=b(e,l))||r.enumerable});return c};var y=(c,e,o)=>(o=c!=null?a(p(c)):{},s(e||!c||!c.__esModule?t(o,\"default\",{value:c,enumerable:!0}):o,c)),O=c=>s(t({},\"__esModule\",{value:!0}),c);var h=g((_,i)=>{i.exports=_jsx_runtime});var E={};m(E,{default:()=>k,frontmatter:()=>f});var n=y(h()),f={title:\"\\u5982\\u4F55\\u53EF\\u9760\\u5730\\u786E\\u5B9A\\u4E00\\u4E2A\\u5BF9\\u8C61\\u662F\\u5426\\u4E3A\\u7A7A\\uFF1F\"};function d(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u53EF\\u9760\\u5730\\u786E\\u5B9A\\u4E00\\u4E2A\\u5BF9\\u8C61\\u662F\\u5426\\u4E3A\\u7A7A\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" \\u6765\\u68C0\\u67E5\\u8BE5\\u5BF9\\u8C61\\u662F\\u5426\\u5177\\u6709\\u4EFB\\u4F55\\u53EF\\u679A\\u4E3E\\u7684\\u5C5E\\u6027\\u3002\\u5982\\u679C \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" \\u8FD4\\u56DE\\u7684\\u6570\\u7EC4\\u7684\\u957F\\u5EA6\\u4E3A\\u96F6\\uFF0C\\u5219\\u8BE5\\u5BF9\\u8C61\\u4E3A\\u7A7A\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const isEmpty = (obj) => Object.keys(obj).length === 0;\n\nconst obj = {};\nconsole.log(isEmpty(obj)); // true\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u53EF\\u9760\\u5730\\u786E\\u5B9A\\u4E00\\u4E2A\\u5BF9\\u8C61\\u662F\\u5426\\u4E3A\\u7A7A\\uFF1F\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.keys()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u68C0\\u67E5\\u5BF9\\u8C61\\u662F\\u5426\\u4E3A\\u7A7A\\u7684\\u6700\\u5E38\\u89C1\\u548C\\u53EF\\u9760\\u7684\\u65B9\\u6CD5\\u662F\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\"\\u3002\\u6B64\\u65B9\\u6CD5\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5305\\u542B\\u5BF9\\u8C61\\u81EA\\u8EAB\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\\u540D\\u79F0\\u7684\\u6570\\u7EC4\\u3002\\u5982\\u679C\\u6B64\\u6570\\u7EC4\\u7684\\u957F\\u5EA6\\u4E3A\\u96F6\\uFF0C\\u5219\\u8BE5\\u5BF9\\u8C61\\u4E3A\\u7A7A\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const isEmpty = (obj) => Object.keys(obj).length === 0;\n\nconst obj1 = {};\nconst obj2 = { key: 'value' };\n\nconsole.log(isEmpty(obj1)); // true\nconsole.log(isEmpty(obj2)); // false\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.entries()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u53E6\\u4E00\\u79CD\\u65B9\\u6CD5\\u662F\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.entries()\"}),\"\\uFF0C\\u5B83\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5305\\u542B\\u5BF9\\u8C61\\u81EA\\u8EAB\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027 \",(0,n.jsx)(e.code,{children:\"[key, value]\"}),\" \\u5BF9\\u7684\\u6570\\u7EC4\\u3002\\u5982\\u679C\\u6B64\\u6570\\u7EC4\\u7684\\u957F\\u5EA6\\u4E3A\\u96F6\\uFF0C\\u5219\\u8BE5\\u5BF9\\u8C61\\u4E3A\\u7A7A\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const isEmpty = (obj) => Object.entries(obj).length === 0;\n\nconst obj1 = {};\nconst obj2 = { key: 'value' };\n\nconsole.log(isEmpty(obj1)); // true\nconsole.log(isEmpty(obj2)); // false\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.values()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u540C\\u6837\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.values()\"}),\"\\uFF0C\\u5B83\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5305\\u542B\\u5BF9\\u8C61\\u81EA\\u8EAB\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\\u503C\\u7684\\u6570\\u7EC4\\u3002\\u5982\\u679C\\u6B64\\u6570\\u7EC4\\u7684\\u957F\\u5EA6\\u4E3A\\u96F6\\uFF0C\\u5219\\u8BE5\\u5BF9\\u8C61\\u4E3A\\u7A7A\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const isEmpty = (obj) => Object.values(obj).length === 0;\n\nconst obj1 = {};\nconst obj2 = { key: 'value' };\n\nconsole.log(isEmpty(obj1)); // true\nconsole.log(isEmpty(obj2)); // false\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" \\u5FAA\\u73AF\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" \\u5FAA\\u73AF\\u6765\\u68C0\\u67E5\\u5BF9\\u8C61\\u662F\\u5426\\u5177\\u6709\\u4EFB\\u4F55\\u5C5E\\u6027\\u3002\\u5982\\u679C\\u5FAA\\u73AF\\u6CA1\\u6709\\u904D\\u5386\\u4EFB\\u4F55\\u5C5E\\u6027\\uFF0C\\u5219\\u8BE5\\u5BF9\\u8C61\\u4E3A\\u7A7A\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const isEmpty = (obj) => {\n  for (let key in obj) {\n    if (obj.hasOwnProperty(key)) {\n      return false;\n    }\n  }\n  return true;\n};\n\nconst obj1 = {};\nconst obj2 = { key: 'value' };\nconst childObj = Object.create(obj2); // Inherit from obj2\n\nconsole.log(isEmpty(obj1)); // true\nconsole.log(isEmpty(obj2)); // false\nconsole.log(isEmpty(childObj)); // true (has no own properties)\nconsole.log(childObj.key); // Output: 'value' (still has the inherited property)\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8FB9\\u7F18\\u60C5\\u51B5\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u539F\\u578B\\u5C5E\\u6027\"}),\"\\uFF1A\\u4E0A\\u8FF0\\u65B9\\u6CD5\\u4EC5\\u68C0\\u67E5\\u5BF9\\u8C61\\u81EA\\u8EAB\\u7684\\u5C5E\\u6027\\uFF0C\\u800C\\u4E0D\\u662F\\u4ECE\\u5176\\u539F\\u578B\\u7EE7\\u627F\\u7684\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\"}),\"\\uFF1A\\u8FD9\\u4E9B\\u65B9\\u6CD5\\u4E0D\\u8003\\u8651\\u4E0D\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys\",children:\"MDN Web \\u6587\\u6863\\uFF1AObject.keys()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/entries\",children:\"MDN Web \\u6587\\u6863\\uFF1AObject.entries()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/values\",children:\"MDN Web \\u6587\\u6863\\uFF1AObject.values()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in\",children:\"MDN Web \\u6587\\u6863\\uFF1Afor...in\"})}),`\n`]})]})}function v(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(d,c)})):d(c)}var k=v;return O(E);})();\n;return Component;"
+  "solution": "var Component=(()=>{var b=Object.create;var r=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),y=(o,e)=>{for(var c in e)r(o,c,{get:e[c],enumerable:!0})},s=(o,e,c,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of p(e))!g.call(o,l)&&l!==c&&r(o,l,{get:()=>e[l],enumerable:!(t=j(e,l))||t.enumerable});return o};var O=(o,e,c)=>(c=o!=null?b(u(o)):{},s(e||!o||!o.__esModule?r(c,\"default\",{value:o,enumerable:!0}):c,o)),f=o=>s(r({},\"__esModule\",{value:!0}),o);var h=m((N,i)=>{i.exports=_jsx_runtime});var k={};y(k,{default:()=>a,frontmatter:()=>v});var n=O(h()),v={title:\"\\u5982\\u4F55\\u53EF\\u9760\\u5730\\u786E\\u5B9A\\u4E00\\u4E2A\\u5BF9\\u8C61\\u662F\\u5426\\u4E3A\\u7A7A\\uFF1F\"};function d(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u53EF\\u9760\\u5730\\u786E\\u5B9A\\u4E00\\u4E2A\\u5BF9\\u8C61\\u662F\\u5426\\u4E3A\\u7A7A\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" \\u6765\\u68C0\\u67E5\\u8BE5\\u5BF9\\u8C61\\u662F\\u5426\\u5177\\u6709\\u4EFB\\u4F55\\u53EF\\u679A\\u4E3E\\u7684\\u5C5E\\u6027\\u3002\\u5982\\u679C \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" \\u8FD4\\u56DE\\u7684\\u6570\\u7EC4\\u7684\\u957F\\u5EA6\\u4E3A\\u96F6\\uFF0C\\u5219\\u8BE5\\u5BF9\\u8C61\\u4E3A\\u7A7A\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const isEmpty = (obj) => Object.keys(obj).length === 0;\n\nconst obj = {};\nconsole.log(isEmpty(obj)); // true\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u53EF\\u9760\\u5730\\u786E\\u5B9A\\u4E00\\u4E2A\\u5BF9\\u8C61\\u662F\\u5426\\u4E3A\\u7A7A\\uFF1F\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.keys()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u68C0\\u67E5\\u5BF9\\u8C61\\u662F\\u5426\\u4E3A\\u7A7A\\u7684\\u6700\\u5E38\\u89C1\\u548C\\u53EF\\u9760\\u7684\\u65B9\\u6CD5\\u662F\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\"\\u3002\\u6B64\\u65B9\\u6CD5\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5305\\u542B\\u5BF9\\u8C61\\u81EA\\u8EAB\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\\u540D\\u79F0\\u7684\\u6570\\u7EC4\\u3002\\u5982\\u679C\\u6B64\\u6570\\u7EC4\\u7684\\u957F\\u5EA6\\u4E3A\\u96F6\\uFF0C\\u5219\\u8BE5\\u5BF9\\u8C61\\u4E3A\\u7A7A\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const isEmpty = (obj) => Object.keys(obj).length === 0;\n\nconst obj1 = {};\nconst obj2 = { key: 'value' };\n\nconsole.log(isEmpty(obj1)); // true\nconsole.log(isEmpty(obj2)); // false\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.entries()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u53E6\\u4E00\\u79CD\\u65B9\\u6CD5\\u662F\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.entries()\"}),\"\\uFF0C\\u5B83\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5305\\u542B\\u5BF9\\u8C61\\u81EA\\u8EAB\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027 \",(0,n.jsx)(e.code,{children:\"[key, value]\"}),\" \\u5BF9\\u7684\\u6570\\u7EC4\\u3002\\u5982\\u679C\\u6B64\\u6570\\u7EC4\\u7684\\u957F\\u5EA6\\u4E3A\\u96F6\\uFF0C\\u5219\\u8BE5\\u5BF9\\u8C61\\u4E3A\\u7A7A\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const isEmpty = (obj) => Object.entries(obj).length === 0;\n\nconst obj1 = {};\nconst obj2 = { key: 'value' };\n\nconsole.log(isEmpty(obj1)); // true\nconsole.log(isEmpty(obj2)); // false\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.values()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u540C\\u6837\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.values()\"}),\"\\uFF0C\\u5B83\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5305\\u542B\\u5BF9\\u8C61\\u81EA\\u8EAB\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\\u503C\\u7684\\u6570\\u7EC4\\u3002\\u5982\\u679C\\u6B64\\u6570\\u7EC4\\u7684\\u957F\\u5EA6\\u4E3A\\u96F6\\uFF0C\\u5219\\u8BE5\\u5BF9\\u8C61\\u4E3A\\u7A7A\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const isEmpty = (obj) => Object.values(obj).length === 0;\n\nconst obj1 = {};\nconst obj2 = { key: 'value' };\n\nconsole.log(isEmpty(obj1)); // true\nconsole.log(isEmpty(obj2)); // false\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" \\u5FAA\\u73AF\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" \\u5FAA\\u73AF\\u6765\\u68C0\\u67E5\\u5BF9\\u8C61\\u662F\\u5426\\u5177\\u6709\\u4EFB\\u4F55\\u5C5E\\u6027\\u3002\\u5982\\u679C\\u5FAA\\u73AF\\u6CA1\\u6709\\u904D\\u5386\\u4EFB\\u4F55\\u5C5E\\u6027\\uFF0C\\u5219\\u8BE5\\u5BF9\\u8C61\\u4E3A\\u7A7A\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const isEmpty = (obj) => {\n  for (let key in obj) {\n    if (obj.hasOwnProperty(key)) {\n      return false;\n    }\n  }\n  return true;\n};\n\nconst obj1 = {};\nconst obj2 = { key: 'value' };\nconst childObj = Object.create(obj2); // Inherit from obj2\n\nconsole.log(isEmpty(obj1)); // true\nconsole.log(isEmpty(obj2)); // false\nconsole.log(isEmpty(childObj)); // true (has no own properties)\nconsole.log(childObj.key); // Output: 'value' (still has the inherited property)\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8FB9\\u7F18\\u60C5\\u51B5\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u539F\\u578B\\u5C5E\\u6027\"}),\"\\uFF1A\\u4E0A\\u8FF0\\u65B9\\u6CD5\\u4EC5\\u68C0\\u67E5\\u5BF9\\u8C61\\u81EA\\u8EAB\\u7684\\u5C5E\\u6027\\uFF0C\\u800C\\u4E0D\\u662F\\u4ECE\\u5176\\u539F\\u578B\\u7EE7\\u627F\\u7684\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\"}),\"\\uFF1A\\u8FD9\\u4E9B\\u65B9\\u6CD5\\u4E0D\\u8003\\u8651\\u4E0D\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys\",children:\"MDN Web \\u6587\\u6863\\uFF1AObject.keys()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/entries\",children:\"MDN Web \\u6587\\u6863\\uFF1AObject.entries()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/values\",children:\"MDN Web \\u6587\\u6863\\uFF1AObject.values()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in\",children:\"MDN Web \\u6587\\u6863\\uFF1Afor...in\"})}),`\n`]})]})}function a(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(d,{...o})}):d(o)}return f(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-reset-a-components-state-in-react/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-reset-a-components-state-in-react/en-US.json
index c283ef917..cb97c7243 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-reset-a-components-state-in-react/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-reset-a-components-state-in-react/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/how-do-you-reset-a-components-state-in-react/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var g=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),x=(n,t)=>{for(var a in t)s(n,a,{get:t[a],enumerable:!0})},c=(n,t,a,o)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let i of u(t))!S.call(n,i)&&i!==a&&s(n,i,{get:()=>t[i],enumerable:!(o=d(t,i))||o.enumerable});return n};var f=(n,t,a)=>(a=n!=null?p(m(n)):{},c(t||!n||!n.__esModule?s(a,\"default\",{value:n,enumerable:!0}):a,n)),y=n=>c(s({},\"__esModule\",{value:!0}),n);var l=g((M,r)=>{r.exports=_jsx_runtime});var j={};x(j,{default:()=>b,frontmatter:()=>C});var e=f(l()),C={title:\"How do you reset a component's state in React?\"};function h(n){let t=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(t.p,{children:[\"To reset a component's state in React, you can set the state back to its initial value. This can be done by defining an initial state and then using the \",(0,e.jsx)(t.code,{children:\"setState\"}),\" function to reset it. For example, if you have a state object like this:\"]}),`\n`,(0,e.jsx)(t.pre,{children:(0,e.jsx)(t.code,{className:\"language-javascript\",children:`const [state, setState] = useState(initialState);\n`})}),`\n`,(0,e.jsx)(t.p,{children:\"You can reset it by calling:\"}),`\n`,(0,e.jsx)(t.pre,{children:(0,e.jsx)(t.code,{className:\"language-javascript\",children:`setState(initialState);\n`})}),`\n`,(0,e.jsx)(t.hr,{}),`\n`,(0,e.jsx)(t.h2,{children:\"How do you reset a component's state in React?\"}),`\n`,(0,e.jsx)(t.h3,{children:\"Using functional components with hooks\"}),`\n`,(0,e.jsxs)(t.p,{children:[\"In functional components, you can use the \",(0,e.jsx)(t.code,{children:\"useState\"}),\" hook to manage state. To reset the state, you can simply call the \",(0,e.jsx)(t.code,{children:\"setState\"}),\" function with the initial state value.\"]}),`\n`,(0,e.jsx)(t.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(t.pre,{children:(0,e.jsx)(t.code,{className:\"language-javascript\",children:`import React, { useState } from 'react';\n\nconst MyComponent = () => {\n  const initialState = { count: 0, text: '' };\n  const [state, setState] = useState(initialState);\n\n  const resetState = () => {\n    setState(initialState);\n  };\n\n  return (\n    <div>\n      <p>Count: {state.count}</p>\n      <p>Text: {state.text}</p>\n      <button onClick={resetState}>Reset</button>\n    </div>\n  );\n};\n\nexport default MyComponent;\n`})}),`\n`,(0,e.jsx)(t.h3,{children:\"Using class components\"}),`\n`,(0,e.jsxs)(t.p,{children:[\"In class components, you can reset the state by calling \",(0,e.jsx)(t.code,{children:\"this.setState\"}),\" with the initial state value.\"]}),`\n`,(0,e.jsx)(t.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(t.pre,{children:(0,e.jsx)(t.code,{className:\"language-javascript\",children:`import React, { Component } from 'react';\n\nclass MyComponent extends Component {\n  constructor(props) {\n    super(props);\n    this.initialState = { count: 0, text: '' };\n    this.state = this.initialState;\n  }\n\n  resetState = () => {\n    this.setState(this.initialState);\n  };\n\n  render() {\n    return (\n      <div>\n        <p>Count: {this.state.count}</p>\n        <p>Text: {this.state.text}</p>\n        <button onClick={this.resetState}>Reset</button>\n      </div>\n    );\n  }\n}\n\nexport default MyComponent;\n`})}),`\n`,(0,e.jsx)(t.h3,{children:\"Using a function to generate initial state\"}),`\n`,(0,e.jsx)(t.p,{children:\"Sometimes, the initial state might be derived from props or other dynamic sources. In such cases, you can use a function to generate the initial state.\"}),`\n`,(0,e.jsx)(t.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(t.pre,{children:(0,e.jsx)(t.code,{className:\"language-javascript\",children:`import React, { useState } from 'react';\n\nconst MyComponent = (props) => {\n  const getInitialState = () => ({ count: props.initialCount, text: '' });\n  const [state, setState] = useState(getInitialState);\n\n  const resetState = () => {\n    setState(getInitialState());\n  };\n\n  return (\n    <div>\n      <p>Count: {state.count}</p>\n      <p>Text: {state.text}</p>\n      <button onClick={resetState}>Reset</button>\n    </div>\n  );\n};\n\nexport default MyComponent;\n`})}),`\n`,(0,e.jsx)(t.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(t.ul,{children:[`\n`,(0,e.jsx)(t.li,{children:(0,e.jsx)(t.a,{href:\"https://react.dev/reference/react/useState\",children:\"React useState Hook\"})}),`\n`,(0,e.jsx)(t.li,{children:(0,e.jsx)(t.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React Component State\"})}),`\n`,(0,e.jsx)(t.li,{children:(0,e.jsx)(t.a,{href:\"https://react.dev/reference/react/Component\",children:\"React Functional Components\"})}),`\n`]})]})}function v(n={}){let{wrapper:t}=n.components||{};return t?(0,e.jsx)(t,Object.assign({},n,{children:(0,e.jsx)(h,n)})):h(n)}var b=v;return y(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),f=(n,t)=>{for(var a in t)o(n,a,{get:t[a],enumerable:!0})},c=(n,t,a,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let i of m(t))!g.call(n,i)&&i!==a&&o(n,i,{get:()=>t[i],enumerable:!(s=u(t,i))||s.enumerable});return n};var y=(n,t,a)=>(a=n!=null?d(S(n)):{},c(t||!n||!n.__esModule?o(a,\"default\",{value:n,enumerable:!0}):a,n)),C=n=>c(o({},\"__esModule\",{value:!0}),n);var l=x((j,r)=>{r.exports=_jsx_runtime});var b={};f(b,{default:()=>p,frontmatter:()=>v});var e=y(l()),v={title:\"How do you reset a component's state in React?\"};function h(n){let t={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(t.p,{children:[\"To reset a component's state in React, you can set the state back to its initial value. This can be done by defining an initial state and then using the \",(0,e.jsx)(t.code,{children:\"setState\"}),\" function to reset it. For example, if you have a state object like this:\"]}),`\n`,(0,e.jsx)(t.pre,{children:(0,e.jsx)(t.code,{className:\"language-javascript\",children:`const [state, setState] = useState(initialState);\n`})}),`\n`,(0,e.jsx)(t.p,{children:\"You can reset it by calling:\"}),`\n`,(0,e.jsx)(t.pre,{children:(0,e.jsx)(t.code,{className:\"language-javascript\",children:`setState(initialState);\n`})}),`\n`,(0,e.jsx)(t.hr,{}),`\n`,(0,e.jsx)(t.h2,{children:\"How do you reset a component's state in React?\"}),`\n`,(0,e.jsx)(t.h3,{children:\"Using functional components with hooks\"}),`\n`,(0,e.jsxs)(t.p,{children:[\"In functional components, you can use the \",(0,e.jsx)(t.code,{children:\"useState\"}),\" hook to manage state. To reset the state, you can simply call the \",(0,e.jsx)(t.code,{children:\"setState\"}),\" function with the initial state value.\"]}),`\n`,(0,e.jsx)(t.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(t.pre,{children:(0,e.jsx)(t.code,{className:\"language-javascript\",children:`import React, { useState } from 'react';\n\nconst MyComponent = () => {\n  const initialState = { count: 0, text: '' };\n  const [state, setState] = useState(initialState);\n\n  const resetState = () => {\n    setState(initialState);\n  };\n\n  return (\n    <div>\n      <p>Count: {state.count}</p>\n      <p>Text: {state.text}</p>\n      <button onClick={resetState}>Reset</button>\n    </div>\n  );\n};\n\nexport default MyComponent;\n`})}),`\n`,(0,e.jsx)(t.h3,{children:\"Using class components\"}),`\n`,(0,e.jsxs)(t.p,{children:[\"In class components, you can reset the state by calling \",(0,e.jsx)(t.code,{children:\"this.setState\"}),\" with the initial state value.\"]}),`\n`,(0,e.jsx)(t.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(t.pre,{children:(0,e.jsx)(t.code,{className:\"language-javascript\",children:`import React, { Component } from 'react';\n\nclass MyComponent extends Component {\n  constructor(props) {\n    super(props);\n    this.initialState = { count: 0, text: '' };\n    this.state = this.initialState;\n  }\n\n  resetState = () => {\n    this.setState(this.initialState);\n  };\n\n  render() {\n    return (\n      <div>\n        <p>Count: {this.state.count}</p>\n        <p>Text: {this.state.text}</p>\n        <button onClick={this.resetState}>Reset</button>\n      </div>\n    );\n  }\n}\n\nexport default MyComponent;\n`})}),`\n`,(0,e.jsx)(t.h3,{children:\"Using a function to generate initial state\"}),`\n`,(0,e.jsx)(t.p,{children:\"Sometimes, the initial state might be derived from props or other dynamic sources. In such cases, you can use a function to generate the initial state.\"}),`\n`,(0,e.jsx)(t.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(t.pre,{children:(0,e.jsx)(t.code,{className:\"language-javascript\",children:`import React, { useState } from 'react';\n\nconst MyComponent = (props) => {\n  const getInitialState = () => ({ count: props.initialCount, text: '' });\n  const [state, setState] = useState(getInitialState);\n\n  const resetState = () => {\n    setState(getInitialState());\n  };\n\n  return (\n    <div>\n      <p>Count: {state.count}</p>\n      <p>Text: {state.text}</p>\n      <button onClick={resetState}>Reset</button>\n    </div>\n  );\n};\n\nexport default MyComponent;\n`})}),`\n`,(0,e.jsx)(t.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(t.ul,{children:[`\n`,(0,e.jsx)(t.li,{children:(0,e.jsx)(t.a,{href:\"https://react.dev/reference/react/useState\",children:\"React useState Hook\"})}),`\n`,(0,e.jsx)(t.li,{children:(0,e.jsx)(t.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React Component State\"})}),`\n`,(0,e.jsx)(t.li,{children:(0,e.jsx)(t.a,{href:\"https://react.dev/reference/react/Component\",children:\"React Functional Components\"})}),`\n`]})]})}function p(n={}){let{wrapper:t}=n.components||{};return t?(0,e.jsx)(t,{...n,children:(0,e.jsx)(h,{...n})}):h(n)}return C(b);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-reset-a-components-state-in-react/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-reset-a-components-state-in-react/zh-CN.json
index 37146e9b4..964d1cb33 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-reset-a-components-state-in-react/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-reset-a-components-state-in-react/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/how-do-you-reset-a-components-state-in-react/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var x=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),C=(n,t)=>{for(var a in t)c(n,a,{get:t[a],enumerable:!0})},s=(n,t,a,i)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of u(t))!m.call(n,r)&&r!==a&&c(n,r,{get:()=>t[r],enumerable:!(i=d(t,r))||i.enumerable});return n};var g=(n,t,a)=>(a=n!=null?p(S(n)):{},s(t||!n||!n.__esModule?c(a,\"default\",{value:n,enumerable:!0}):a,n)),f=n=>s(c({},\"__esModule\",{value:!0}),n);var l=x((y,o)=>{o.exports=_jsx_runtime});var M={};C(M,{default:()=>j,frontmatter:()=>v});var e=g(l()),v={title:\"\\u5982\\u4F55\\u5728 React \\u4E2D\\u91CD\\u7F6E\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\uFF1F\"};function h(n){let t=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(t.p,{children:[\"\\u8981\\u5728 React \\u4E2D\\u91CD\\u7F6E\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C06\\u72B6\\u6001\\u8BBE\\u7F6E\\u56DE\\u5176\\u521D\\u59CB\\u503C\\u3002\\u8FD9\\u53EF\\u4EE5\\u901A\\u8FC7\\u5B9A\\u4E49\\u521D\\u59CB\\u72B6\\u6001\\uFF0C\\u7136\\u540E\\u4F7F\\u7528 \",(0,e.jsx)(t.code,{children:\"setState\"}),\" \\u51FD\\u6570\\u6765\\u91CD\\u7F6E\\u5B83\\u6765\\u5B9E\\u73B0\\u3002\\u4F8B\\u5982\\uFF0C\\u5982\\u679C\\u60A8\\u6709\\u4E00\\u4E2A\\u50CF\\u8FD9\\u6837\\u7684\\u72B6\\u6001\\u5BF9\\u8C61\\uFF1A\"]}),`\n`,(0,e.jsx)(t.pre,{children:(0,e.jsx)(t.code,{className:\"language-javascript\",children:`const [state, setState] = useState(initialState);\n`})}),`\n`,(0,e.jsx)(t.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u901A\\u8FC7\\u8C03\\u7528\\u4EE5\\u4E0B\\u65B9\\u6CD5\\u6765\\u91CD\\u7F6E\\u5B83\\uFF1A\"}),`\n`,(0,e.jsx)(t.pre,{children:(0,e.jsx)(t.code,{className:\"language-javascript\",children:`setState(initialState);\n`})}),`\n`,(0,e.jsx)(t.hr,{}),`\n`,(0,e.jsx)(t.h2,{children:\"\\u5982\\u4F55\\u5728 React \\u4E2D\\u91CD\\u7F6E\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\uFF1F\"}),`\n`,(0,e.jsx)(t.h3,{children:\"\\u4F7F\\u7528\\u5E26\\u6709\\u94A9\\u5B50\\u7684\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\"}),`\n`,(0,e.jsxs)(t.p,{children:[\"\\u5728\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(t.code,{children:\"useState\"}),\" \\u94A9\\u5B50\\u6765\\u7BA1\\u7406\\u72B6\\u6001\\u3002\\u8981\\u91CD\\u7F6E\\u72B6\\u6001\\uFF0C\\u60A8\\u53EF\\u4EE5\\u7B80\\u5355\\u5730\\u4F7F\\u7528\\u521D\\u59CB\\u72B6\\u6001\\u503C\\u8C03\\u7528 \",(0,e.jsx)(t.code,{children:\"setState\"}),\" \\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsx)(t.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(t.pre,{children:(0,e.jsx)(t.code,{className:\"language-javascript\",children:`import React, { useState } from 'react';\n\nconst MyComponent = () => {\n  const initialState = { count: 0, text: '' };\n  const [state, setState] = useState(initialState);\n\n  const resetState = () => {\n    setState(initialState);\n  };\n\n  return (\n    <div>\n      <p>Count: {state.count}</p>\n      <p>Text: {state.text}</p>\n      <button onClick={resetState}>Reset</button>\n    </div>\n  );\n};\n\nexport default MyComponent;\n`})}),`\n`,(0,e.jsx)(t.h3,{children:\"\\u4F7F\\u7528\\u7C7B\\u7EC4\\u4EF6\"}),`\n`,(0,e.jsxs)(t.p,{children:[\"\\u5728\\u7C7B\\u7EC4\\u4EF6\\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u901A\\u8FC7\\u4F7F\\u7528\\u521D\\u59CB\\u72B6\\u6001\\u503C\\u8C03\\u7528 \",(0,e.jsx)(t.code,{children:\"this.setState\"}),\" \\u6765\\u91CD\\u7F6E\\u72B6\\u6001\\u3002\"]}),`\n`,(0,e.jsx)(t.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(t.pre,{children:(0,e.jsx)(t.code,{className:\"language-javascript\",children:`import React, { Component } from 'react';\n\nclass MyComponent extends Component {\n  constructor(props) {\n    super(props);\n    this.initialState = { count: 0, text: '' };\n    this.state = this.initialState;\n  }\n\n  resetState = () => {\n    this.setState(this.initialState);\n  };\n\n  render() {\n    return (\n      <div>\n        <p>Count: {this.state.count}</p>\n        <p>Text: {this.state.text}</p>\n        <button onClick={this.resetState}>Reset</button>\n      </div>\n    );\n  }\n}\n\nexport default MyComponent;\n`})}),`\n`,(0,e.jsx)(t.h3,{children:\"\\u4F7F\\u7528\\u51FD\\u6570\\u751F\\u6210\\u521D\\u59CB\\u72B6\\u6001\"}),`\n`,(0,e.jsx)(t.p,{children:\"\\u6709\\u65F6\\uFF0C\\u521D\\u59CB\\u72B6\\u6001\\u53EF\\u80FD\\u6E90\\u81EA props \\u6216\\u5176\\u4ED6\\u52A8\\u6001\\u6E90\\u3002\\u5728\\u8FD9\\u79CD\\u60C5\\u51B5\\u4E0B\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u4E00\\u4E2A\\u51FD\\u6570\\u6765\\u751F\\u6210\\u521D\\u59CB\\u72B6\\u6001\\u3002\"}),`\n`,(0,e.jsx)(t.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(t.pre,{children:(0,e.jsx)(t.code,{className:\"language-javascript\",children:`import React, { useState } from 'react';\n\nconst MyComponent = (props) => {\n  const getInitialState = () => ({ count: props.initialCount, text: '' });\n  const [state, setState] = useState(getInitialState);\n\n  const resetState = () => {\n    setState(getInitialState());\n  };\n\n  return (\n    <div>\n      <p>Count: {state.count}</p>\n      <p>Text: {state.text}</p>\n      <button onClick={resetState}>Reset</button>\n    </div>\n  );\n};\n\nexport default MyComponent;\n`})}),`\n`,(0,e.jsx)(t.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(t.ul,{children:[`\n`,(0,e.jsx)(t.li,{children:(0,e.jsx)(t.a,{href:\"https://react.dev/reference/react/useState\",children:\"React useState Hook\"})}),`\n`,(0,e.jsx)(t.li,{children:(0,e.jsx)(t.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React Component State\"})}),`\n`,(0,e.jsx)(t.li,{children:(0,e.jsx)(t.a,{href:\"https://react.dev/reference/react/Component\",children:\"React Functional Components\"})}),`\n`]})]})}function R(n={}){let{wrapper:t}=n.components||{};return t?(0,e.jsx)(t,Object.assign({},n,{children:(0,e.jsx)(h,n)})):h(n)}var j=R;return f(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var C=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),f=(n,t)=>{for(var a in t)c(n,a,{get:t[a],enumerable:!0})},o=(n,t,a,i)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of S(t))!x.call(n,r)&&r!==a&&c(n,r,{get:()=>t[r],enumerable:!(i=u(t,r))||i.enumerable});return n};var g=(n,t,a)=>(a=n!=null?d(m(n)):{},o(t||!n||!n.__esModule?c(a,\"default\",{value:n,enumerable:!0}):a,n)),v=n=>o(c({},\"__esModule\",{value:!0}),n);var l=C((y,s)=>{s.exports=_jsx_runtime});var j={};f(j,{default:()=>p,frontmatter:()=>R});var e=g(l()),R={title:\"\\u5982\\u4F55\\u5728 React \\u4E2D\\u91CD\\u7F6E\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\uFF1F\"};function h(n){let t={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(t.p,{children:[\"\\u8981\\u5728 React \\u4E2D\\u91CD\\u7F6E\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C06\\u72B6\\u6001\\u8BBE\\u7F6E\\u56DE\\u5176\\u521D\\u59CB\\u503C\\u3002\\u8FD9\\u53EF\\u4EE5\\u901A\\u8FC7\\u5B9A\\u4E49\\u521D\\u59CB\\u72B6\\u6001\\uFF0C\\u7136\\u540E\\u4F7F\\u7528 \",(0,e.jsx)(t.code,{children:\"setState\"}),\" \\u51FD\\u6570\\u6765\\u91CD\\u7F6E\\u5B83\\u6765\\u5B9E\\u73B0\\u3002\\u4F8B\\u5982\\uFF0C\\u5982\\u679C\\u60A8\\u6709\\u4E00\\u4E2A\\u50CF\\u8FD9\\u6837\\u7684\\u72B6\\u6001\\u5BF9\\u8C61\\uFF1A\"]}),`\n`,(0,e.jsx)(t.pre,{children:(0,e.jsx)(t.code,{className:\"language-javascript\",children:`const [state, setState] = useState(initialState);\n`})}),`\n`,(0,e.jsx)(t.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u901A\\u8FC7\\u8C03\\u7528\\u4EE5\\u4E0B\\u65B9\\u6CD5\\u6765\\u91CD\\u7F6E\\u5B83\\uFF1A\"}),`\n`,(0,e.jsx)(t.pre,{children:(0,e.jsx)(t.code,{className:\"language-javascript\",children:`setState(initialState);\n`})}),`\n`,(0,e.jsx)(t.hr,{}),`\n`,(0,e.jsx)(t.h2,{children:\"\\u5982\\u4F55\\u5728 React \\u4E2D\\u91CD\\u7F6E\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\uFF1F\"}),`\n`,(0,e.jsx)(t.h3,{children:\"\\u4F7F\\u7528\\u5E26\\u6709\\u94A9\\u5B50\\u7684\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\"}),`\n`,(0,e.jsxs)(t.p,{children:[\"\\u5728\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(t.code,{children:\"useState\"}),\" \\u94A9\\u5B50\\u6765\\u7BA1\\u7406\\u72B6\\u6001\\u3002\\u8981\\u91CD\\u7F6E\\u72B6\\u6001\\uFF0C\\u60A8\\u53EF\\u4EE5\\u7B80\\u5355\\u5730\\u4F7F\\u7528\\u521D\\u59CB\\u72B6\\u6001\\u503C\\u8C03\\u7528 \",(0,e.jsx)(t.code,{children:\"setState\"}),\" \\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsx)(t.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(t.pre,{children:(0,e.jsx)(t.code,{className:\"language-javascript\",children:`import React, { useState } from 'react';\n\nconst MyComponent = () => {\n  const initialState = { count: 0, text: '' };\n  const [state, setState] = useState(initialState);\n\n  const resetState = () => {\n    setState(initialState);\n  };\n\n  return (\n    <div>\n      <p>Count: {state.count}</p>\n      <p>Text: {state.text}</p>\n      <button onClick={resetState}>Reset</button>\n    </div>\n  );\n};\n\nexport default MyComponent;\n`})}),`\n`,(0,e.jsx)(t.h3,{children:\"\\u4F7F\\u7528\\u7C7B\\u7EC4\\u4EF6\"}),`\n`,(0,e.jsxs)(t.p,{children:[\"\\u5728\\u7C7B\\u7EC4\\u4EF6\\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u901A\\u8FC7\\u4F7F\\u7528\\u521D\\u59CB\\u72B6\\u6001\\u503C\\u8C03\\u7528 \",(0,e.jsx)(t.code,{children:\"this.setState\"}),\" \\u6765\\u91CD\\u7F6E\\u72B6\\u6001\\u3002\"]}),`\n`,(0,e.jsx)(t.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(t.pre,{children:(0,e.jsx)(t.code,{className:\"language-javascript\",children:`import React, { Component } from 'react';\n\nclass MyComponent extends Component {\n  constructor(props) {\n    super(props);\n    this.initialState = { count: 0, text: '' };\n    this.state = this.initialState;\n  }\n\n  resetState = () => {\n    this.setState(this.initialState);\n  };\n\n  render() {\n    return (\n      <div>\n        <p>Count: {this.state.count}</p>\n        <p>Text: {this.state.text}</p>\n        <button onClick={this.resetState}>Reset</button>\n      </div>\n    );\n  }\n}\n\nexport default MyComponent;\n`})}),`\n`,(0,e.jsx)(t.h3,{children:\"\\u4F7F\\u7528\\u51FD\\u6570\\u751F\\u6210\\u521D\\u59CB\\u72B6\\u6001\"}),`\n`,(0,e.jsx)(t.p,{children:\"\\u6709\\u65F6\\uFF0C\\u521D\\u59CB\\u72B6\\u6001\\u53EF\\u80FD\\u6E90\\u81EA props \\u6216\\u5176\\u4ED6\\u52A8\\u6001\\u6E90\\u3002\\u5728\\u8FD9\\u79CD\\u60C5\\u51B5\\u4E0B\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u4E00\\u4E2A\\u51FD\\u6570\\u6765\\u751F\\u6210\\u521D\\u59CB\\u72B6\\u6001\\u3002\"}),`\n`,(0,e.jsx)(t.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(t.pre,{children:(0,e.jsx)(t.code,{className:\"language-javascript\",children:`import React, { useState } from 'react';\n\nconst MyComponent = (props) => {\n  const getInitialState = () => ({ count: props.initialCount, text: '' });\n  const [state, setState] = useState(getInitialState);\n\n  const resetState = () => {\n    setState(getInitialState());\n  };\n\n  return (\n    <div>\n      <p>Count: {state.count}</p>\n      <p>Text: {state.text}</p>\n      <button onClick={resetState}>Reset</button>\n    </div>\n  );\n};\n\nexport default MyComponent;\n`})}),`\n`,(0,e.jsx)(t.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(t.ul,{children:[`\n`,(0,e.jsx)(t.li,{children:(0,e.jsx)(t.a,{href:\"https://react.dev/reference/react/useState\",children:\"React useState Hook\"})}),`\n`,(0,e.jsx)(t.li,{children:(0,e.jsx)(t.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React Component State\"})}),`\n`,(0,e.jsx)(t.li,{children:(0,e.jsx)(t.a,{href:\"https://react.dev/reference/react/Component\",children:\"React Functional Components\"})}),`\n`]})]})}function p(n={}){let{wrapper:t}=n.components||{};return t?(0,e.jsx)(t,{...n,children:(0,e.jsx)(h,{...n})}):h(n)}return v(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-serve-a-page-with-content-in-multiple-languages/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-serve-a-page-with-content-in-multiple-languages/en-US.json
index b067e7e77..ffc7c073b 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-serve-a-page-with-content-in-multiple-languages/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-serve-a-page-with-content-in-multiple-languages/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var a in e)r(t,a,{get:e[a],enumerable:!0})},o=(t,e,a,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!m.call(t,i)&&i!==a&&r(t,i,{get:()=>e[i],enumerable:!(l=g(e,i))||l.enumerable});return t};var v=(t,e,a)=>(a=t!=null?d(p(t)):{},o(e||!t||!t.__esModule?r(a,\"default\",{value:t,enumerable:!0}):a,t)),w=t=>o(r({},\"__esModule\",{value:!0}),t);var c=f((_,s)=>{s.exports=_jsx_runtime});var k={};b(k,{default:()=>j,frontmatter:()=>T});var n=v(c()),T={title:\"How do you serve a page with content in multiple languages?\"};function h(t){let e=Object.assign({blockquote:\"blockquote\",p:\"p\",code:\"code\",h2:\"h2\",ul:\"ul\",li:\"li\",strong:\"strong\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"Assumption: The question is about how to serve a page with content available in multiple languages and the content within the page should be displayed only in one consistent language.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Serving a page in different languages is one of the aspects of internationalization (i18n).\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When an HTTP request is made to a server, the requesting user agent usually sends information about language preferences, such as in the \",(0,n.jsx)(e.code,{children:\"Accept-Language\"}),\" header. The server can then use this information to return a version of the document in the appropriate language if such an alternative is available. The returned HTML document should also declare the \",(0,n.jsx)(e.code,{children:\"lang\"}),\" attribute in the \",(0,n.jsx)(e.code,{children:\"<html>\"}),\" tag, such as \",(0,n.jsx)(e.code,{children:'<html lang=\"en\">...</html>'}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"To let a search engine know that the same content is available in different languages, \",(0,n.jsx)(e.code,{children:\"<link>\"}),\" tags with the \",(0,n.jsx)(e.code,{children:'rel=\"alternate\"'}),\" and \",(0,n.jsx)(e.code,{children:'hreflang=\"...\"'}),\" attributes should be used. E.g. \",(0,n.jsx)(e.code,{children:'<link rel=\"alternate\" hreflang=\"de\" href=\"http://de.example.com/page.html\" />'}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Rendering\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Server-side rendering:\"}),\" The HTML markup will contain string placeholders and content for the specific language will be fetched from configuration in code or a translation service. The server then dynamically generates the HTML page with content in that particular language.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Client-side rendering:\"}),\" The appropriate locale strings will be fetched and combined with the JavaScript-based views.\"]}),`\n`]})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var j=x;return w(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var a in e)r(t,a,{get:e[a],enumerable:!0})},o=(t,e,a,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!f.call(t,i)&&i!==a&&r(t,i,{get:()=>e[i],enumerable:!(l=g(e,i))||l.enumerable});return t};var w=(t,e,a)=>(a=t!=null?u(m(t)):{},o(e||!t||!t.__esModule?r(a,\"default\",{value:t,enumerable:!0}):a,t)),T=t=>o(r({},\"__esModule\",{value:!0}),t);var h=b((_,c)=>{c.exports=_jsx_runtime});var k={};v(k,{default:()=>d,frontmatter:()=>x});var n=w(h()),x={title:\"How do you serve a page with content in multiple languages?\"};function s(t){let e={blockquote:\"blockquote\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"Assumption: The question is about how to serve a page with content available in multiple languages and the content within the page should be displayed only in one consistent language.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Serving a page in different languages is one of the aspects of internationalization (i18n).\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When an HTTP request is made to a server, the requesting user agent usually sends information about language preferences, such as in the \",(0,n.jsx)(e.code,{children:\"Accept-Language\"}),\" header. The server can then use this information to return a version of the document in the appropriate language if such an alternative is available. The returned HTML document should also declare the \",(0,n.jsx)(e.code,{children:\"lang\"}),\" attribute in the \",(0,n.jsx)(e.code,{children:\"<html>\"}),\" tag, such as \",(0,n.jsx)(e.code,{children:'<html lang=\"en\">...</html>'}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"To let a search engine know that the same content is available in different languages, \",(0,n.jsx)(e.code,{children:\"<link>\"}),\" tags with the \",(0,n.jsx)(e.code,{children:'rel=\"alternate\"'}),\" and \",(0,n.jsx)(e.code,{children:'hreflang=\"...\"'}),\" attributes should be used. E.g. \",(0,n.jsx)(e.code,{children:'<link rel=\"alternate\" hreflang=\"de\" href=\"http://de.example.com/page.html\" />'}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Rendering\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Server-side rendering:\"}),\" The HTML markup will contain string placeholders and content for the specific language will be fetched from configuration in code or a translation service. The server then dynamically generates the HTML page with content in that particular language.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Client-side rendering:\"}),\" The appropriate locale strings will be fetched and combined with the JavaScript-based views.\"]}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(s,{...t})}):s(t)}return T(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-serve-a-page-with-content-in-multiple-languages/pt-BR.json b/apps/web/src/__generated__/questions/quiz/how-do-you-serve-a-page-with-content-in-multiple-languages/pt-BR.json
index 52f1aefa7..e67619fd6 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-serve-a-page-with-content-in-multiple-languages/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-serve-a-page-with-content-in-multiple-languages/pt-BR.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),b=(a,e)=>{for(var n in e)r(a,n,{get:e[n],enumerable:!0})},t=(a,e,n,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!g.call(a,i)&&i!==n&&r(a,i,{get:()=>e[i],enumerable:!(s=p(e,i))||s.enumerable});return a};var f=(a,e,n)=>(n=a!=null?l(h(a)):{},t(e||!a||!a.__esModule?r(n,\"default\",{value:a,enumerable:!0}):n,a)),x=a=>t(r({},\"__esModule\",{value:!0}),a);var c=v((O,d)=>{d.exports=_jsx_runtime});var q={};b(q,{default:()=>_,frontmatter:()=>j});var o=f(c()),j={title:\"Como se serve uma p\\xE1gina com conte\\xFAdo em v\\xE1rios idiomas?\"};function m(a){let e=Object.assign({blockquote:\"blockquote\",p:\"p\",code:\"code\",h2:\"h2\",ul:\"ul\",li:\"li\",strong:\"strong\"},a.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.blockquote,{children:[`\n`,(0,o.jsx)(e.p,{children:\"Suposi\\xE7\\xE3o: A pergunta \\xE9 sobre como servir uma p\\xE1gina com conte\\xFAdo dispon\\xEDvel em v\\xE1rios idiomas e o conte\\xFAdo dentro da p\\xE1gina deve ser exibido apenas em um idioma consistente.\"}),`\n`]}),`\n`,(0,o.jsx)(e.p,{children:\"Servir uma p\\xE1gina em diferentes idiomas \\xE9 um dos aspectos da internacionaliza\\xE7\\xE3o (i18n).\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Quando uma solicita\\xE7\\xE3o HTTP \\xE9 feita para um servidor, o agente de usu\\xE1rio que faz a solicita\\xE7\\xE3o geralmente envia informa\\xE7\\xF5es sobre as prefer\\xEAncias de idioma, como no cabe\\xE7alho \",(0,o.jsx)(e.code,{children:\"Accept-Language\"}),\". O servidor pode ent\\xE3o usar essa informa\\xE7\\xE3o para retornar uma vers\\xE3o do documento no idioma apropriado se tal alternativa estiver dispon\\xEDvel. O documento HTML retornado tamb\\xE9m deve declarar o atributo lang na tag \",(0,o.jsx)(e.code,{children:\"<html>,\"}),\" como por exemplo \",(0,o.jsx)(e.code,{children:'<html lang=\"en\">...</html>'}),\".\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Para permitir que um mecanismo de busca saiba que o mesmo conte\\xFAdo est\\xE1 dispon\\xEDvel em diferentes idiomas, as tags \",(0,o.jsx)(e.code,{children:\"<link>\"}),\" com os atributos \",(0,o.jsx)(e.code,{children:'rel=\"alternate\"'}),\" e \",(0,o.jsx)(e.code,{children:'hreflang=\"...\"'}),\" devem ser usadas. Ex. \",(0,o.jsx)(e.code,{children:'<link rel=\"alternate\" hreflang=\"de\" href=\"http://de.example.com/page.html\" />'}),\".\"]}),`\n`,(0,o.jsx)(e.h2,{children:\"Renderiza\\xE7\\xE3o\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Renderiza\\xE7\\xE3o no servidor:\"}),\" O HTML conter\\xE1 espa\\xE7os reservados para strings e o conte\\xFAdo para o idioma espec\\xEDfico ser\\xE1 obtido a partir de configura\\xE7\\xF5es no c\\xF3digo ou de um servi\\xE7o de tradu\\xE7\\xE3o. O servidor ent\\xE3o gera dinamicamente a p\\xE1gina HTML com o conte\\xFAdo nesse idioma espec\\xEDfico.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Renderiza\\xE7\\xE3o do lado cliente:\"}),\" As strings de localiza\\xE7\\xE3o apropriadas ser\\xE3o obtidas e combinadas com as visualiza\\xE7\\xF5es baseadas em JavaScript.\"]}),`\n`]})]})}function z(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,Object.assign({},a,{children:(0,o.jsx)(m,a)})):m(a)}var _=z;return x(q);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var f=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),b=(a,e)=>{for(var n in e)i(a,n,{get:e[n],enumerable:!0})},s=(a,e,n,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of h(e))!v.call(a,r)&&r!==n&&i(a,r,{get:()=>e[r],enumerable:!(d=u(e,r))||d.enumerable});return a};var x=(a,e,n)=>(n=a!=null?p(g(a)):{},s(e||!a||!a.__esModule?i(n,\"default\",{value:a,enumerable:!0}):n,a)),z=a=>s(i({},\"__esModule\",{value:!0}),a);var c=f((j,t)=>{t.exports=_jsx_runtime});var q={};b(q,{default:()=>l,frontmatter:()=>_});var o=x(c()),_={title:\"Como se serve uma p\\xE1gina com conte\\xFAdo em v\\xE1rios idiomas?\"};function m(a){let e={blockquote:\"blockquote\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",strong:\"strong\",ul:\"ul\",...a.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.blockquote,{children:[`\n`,(0,o.jsx)(e.p,{children:\"Suposi\\xE7\\xE3o: A pergunta \\xE9 sobre como servir uma p\\xE1gina com conte\\xFAdo dispon\\xEDvel em v\\xE1rios idiomas e o conte\\xFAdo dentro da p\\xE1gina deve ser exibido apenas em um idioma consistente.\"}),`\n`]}),`\n`,(0,o.jsx)(e.p,{children:\"Servir uma p\\xE1gina em diferentes idiomas \\xE9 um dos aspectos da internacionaliza\\xE7\\xE3o (i18n).\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Quando uma solicita\\xE7\\xE3o HTTP \\xE9 feita para um servidor, o agente de usu\\xE1rio que faz a solicita\\xE7\\xE3o geralmente envia informa\\xE7\\xF5es sobre as prefer\\xEAncias de idioma, como no cabe\\xE7alho \",(0,o.jsx)(e.code,{children:\"Accept-Language\"}),\". O servidor pode ent\\xE3o usar essa informa\\xE7\\xE3o para retornar uma vers\\xE3o do documento no idioma apropriado se tal alternativa estiver dispon\\xEDvel. O documento HTML retornado tamb\\xE9m deve declarar o atributo lang na tag \",(0,o.jsx)(e.code,{children:\"<html>,\"}),\" como por exemplo \",(0,o.jsx)(e.code,{children:'<html lang=\"en\">...</html>'}),\".\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Para permitir que um mecanismo de busca saiba que o mesmo conte\\xFAdo est\\xE1 dispon\\xEDvel em diferentes idiomas, as tags \",(0,o.jsx)(e.code,{children:\"<link>\"}),\" com os atributos \",(0,o.jsx)(e.code,{children:'rel=\"alternate\"'}),\" e \",(0,o.jsx)(e.code,{children:'hreflang=\"...\"'}),\" devem ser usadas. Ex. \",(0,o.jsx)(e.code,{children:'<link rel=\"alternate\" hreflang=\"de\" href=\"http://de.example.com/page.html\" />'}),\".\"]}),`\n`,(0,o.jsx)(e.h2,{children:\"Renderiza\\xE7\\xE3o\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Renderiza\\xE7\\xE3o no servidor:\"}),\" O HTML conter\\xE1 espa\\xE7os reservados para strings e o conte\\xFAdo para o idioma espec\\xEDfico ser\\xE1 obtido a partir de configura\\xE7\\xF5es no c\\xF3digo ou de um servi\\xE7o de tradu\\xE7\\xE3o. O servidor ent\\xE3o gera dinamicamente a p\\xE1gina HTML com o conte\\xFAdo nesse idioma espec\\xEDfico.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Renderiza\\xE7\\xE3o do lado cliente:\"}),\" As strings de localiza\\xE7\\xE3o apropriadas ser\\xE3o obtidas e combinadas com as visualiza\\xE7\\xF5es baseadas em JavaScript.\"]}),`\n`]})]})}function l(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,{...a,children:(0,o.jsx)(m,{...a})}):m(a)}return z(q);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-serve-a-page-with-content-in-multiple-languages/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-serve-a-page-with-content-in-multiple-languages/zh-CN.json
index 53cc69634..f75a15e75 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-serve-a-page-with-content-in-multiple-languages/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-serve-a-page-with-content-in-multiple-languages/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var c in e)r(t,c,{get:e[c],enumerable:!0})},i=(t,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of m(e))!u.call(t,l)&&l!==c&&r(t,l,{get:()=>e[l],enumerable:!(o=g(e,l))||o.enumerable});return t};var j=(t,e,c)=>(c=t!=null?s(p(t)):{},i(e||!t||!t.__esModule?r(c,\"default\",{value:t,enumerable:!0}):c,t)),_=t=>i(r({},\"__esModule\",{value:!0}),t);var h=x((H,d)=>{d.exports=_jsx_runtime});var L={};f(L,{default:()=>k,frontmatter:()=>M});var n=j(h()),M={title:\"\\u5982\\u4F55\\u4F7F\\u7528\\u591A\\u79CD\\u8BED\\u8A00\\u63D0\\u4F9B\\u9875\\u9762\\u5185\\u5BB9\\uFF1F\"};function a(t){let e=Object.assign({blockquote:\"blockquote\",p:\"p\",code:\"code\",h2:\"h2\",ul:\"ul\",li:\"li\",strong:\"strong\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"\\u5047\\u8BBE\\uFF1A\\u8FD9\\u4E2A\\u95EE\\u9898\\u662F\\u5173\\u4E8E\\u5982\\u4F55\\u63D0\\u4F9B\\u9875\\u9762\\u5185\\u5BB9\\uFF0C\\u8FD9\\u4E9B\\u5185\\u5BB9\\u6709\\u591A\\u79CD\\u8BED\\u8A00\\u7248\\u672C\\uFF0C\\u5E76\\u4E14\\u9875\\u9762\\u4E2D\\u7684\\u5185\\u5BB9\\u5E94\\u8BE5\\u53EA\\u4EE5\\u4E00\\u79CD\\u4E00\\u81F4\\u7684\\u8BED\\u8A00\\u663E\\u793A\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0D\\u540C\\u8BED\\u8A00\\u63D0\\u4F9B\\u9875\\u9762\\u662F\\u56FD\\u9645\\u5316 (i18n) \\u7684\\u4E00\\u4E2A\\u65B9\\u9762\\u3002\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u5411\\u670D\\u52A1\\u5668\\u53D1\\u51FA HTTP \\u8BF7\\u6C42\\u65F6\\uFF0C\\u8BF7\\u6C42\\u7528\\u6237\\u4EE3\\u7406\\u901A\\u5E38\\u4F1A\\u53D1\\u9001\\u6709\\u5173\\u8BED\\u8A00\\u504F\\u597D\\u7684\\u4FE1\\u606F\\uFF0C\\u4F8B\\u5982\\u5728 \",(0,n.jsx)(e.code,{children:\"Accept-Language\"}),\" \\u6807\\u5934\\u4E2D\\u3002\\u7136\\u540E\\uFF0C\\u5982\\u679C\\u5B58\\u5728\\u8FD9\\u79CD\\u5907\\u9009\\u65B9\\u6848\\uFF0C\\u670D\\u52A1\\u5668\\u53EF\\u4EE5\\u4F7F\\u7528\\u6B64\\u4FE1\\u606F\\u4EE5\\u9002\\u5F53\\u7684\\u8BED\\u8A00\\u8FD4\\u56DE\\u6587\\u6863\\u7248\\u672C\\u3002\\u8FD4\\u56DE\\u7684 HTML \\u6587\\u6863\\u8FD8\\u5E94\\u5728 \",(0,n.jsx)(e.code,{children:\"<html>\"}),\" \\u6807\\u7B7E\\u4E2D\\u58F0\\u660E \",(0,n.jsx)(e.code,{children:\"lang\"}),\" \\u5C5E\\u6027\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:'<html lang=\"en\">...</html>'}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E3A\\u4E86\\u8BA9\\u641C\\u7D22\\u5F15\\u64CE\\u77E5\\u9053\\u76F8\\u540C\\u7684\\u5185\\u5BB9\\u6709\\u4E0D\\u540C\\u7684\\u8BED\\u8A00\\u7248\\u672C\\uFF0C\\u5E94\\u8BE5\\u4F7F\\u7528\\u5E26\\u6709 \",(0,n.jsx)(e.code,{children:'rel=\"alternate\"'}),\" \\u548C \",(0,n.jsx)(e.code,{children:'hreflang=\"...\"'}),\" \\u5C5E\\u6027\\u7684 \",(0,n.jsx)(e.code,{children:\"<link>\"}),\" \\u6807\\u7B7E\\u3002\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:'<link rel=\"alternate\" hreflang=\"de\" href=\"http://de.example.com/page.html\" />'}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6E32\\u67D3\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\uFF1A\"}),\" HTML \\u6807\\u8BB0\\u5C06\\u5305\\u542B\\u5B57\\u7B26\\u4E32\\u5360\\u4F4D\\u7B26\\uFF0C\\u7279\\u5B9A\\u8BED\\u8A00\\u7684\\u5185\\u5BB9\\u5C06\\u4ECE\\u4EE3\\u7801\\u914D\\u7F6E\\u6216\\u7FFB\\u8BD1\\u670D\\u52A1\\u4E2D\\u83B7\\u53D6\\u3002\\u7136\\u540E\\uFF0C\\u670D\\u52A1\\u5668\\u52A8\\u6001\\u751F\\u6210\\u5177\\u6709\\u8BE5\\u7279\\u5B9A\\u8BED\\u8A00\\u5185\\u5BB9\\u7684 HTML \\u9875\\u9762\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5BA2\\u6237\\u7AEF\\u6E32\\u67D3\\uFF1A\"}),\" \\u9002\\u5F53\\u7684\\u533A\\u57DF\\u8BBE\\u7F6E\\u5B57\\u7B26\\u4E32\\u5C06\\u88AB\\u63D0\\u53D6\\u5E76\\u4E0E\\u57FA\\u4E8E JavaScript \\u7684\\u89C6\\u56FE\\u76F8\\u7ED3\\u5408\\u3002\"]}),`\n`]})]})}function b(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(a,t)})):a(t)}var k=b;return _(L);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var f=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),_=(l,e)=>{for(var t in e)r(l,t,{get:e[t],enumerable:!0})},d=(l,e,t,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of u(e))!x.call(l,c)&&c!==t&&r(l,c,{get:()=>e[c],enumerable:!(o=p(e,c))||o.enumerable});return l};var M=(l,e,t)=>(t=l!=null?m(g(l)):{},d(e||!l||!l.__esModule?r(t,\"default\",{value:l,enumerable:!0}):t,l)),j=l=>d(r({},\"__esModule\",{value:!0}),l);var h=f((H,i)=>{i.exports=_jsx_runtime});var L={};_(L,{default:()=>s,frontmatter:()=>k});var n=M(h()),k={title:\"\\u5982\\u4F55\\u4F7F\\u7528\\u591A\\u79CD\\u8BED\\u8A00\\u63D0\\u4F9B\\u9875\\u9762\\u5185\\u5BB9\\uFF1F\"};function a(l){let e={blockquote:\"blockquote\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",strong:\"strong\",ul:\"ul\",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"\\u5047\\u8BBE\\uFF1A\\u8FD9\\u4E2A\\u95EE\\u9898\\u662F\\u5173\\u4E8E\\u5982\\u4F55\\u63D0\\u4F9B\\u9875\\u9762\\u5185\\u5BB9\\uFF0C\\u8FD9\\u4E9B\\u5185\\u5BB9\\u6709\\u591A\\u79CD\\u8BED\\u8A00\\u7248\\u672C\\uFF0C\\u5E76\\u4E14\\u9875\\u9762\\u4E2D\\u7684\\u5185\\u5BB9\\u5E94\\u8BE5\\u53EA\\u4EE5\\u4E00\\u79CD\\u4E00\\u81F4\\u7684\\u8BED\\u8A00\\u663E\\u793A\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0D\\u540C\\u8BED\\u8A00\\u63D0\\u4F9B\\u9875\\u9762\\u662F\\u56FD\\u9645\\u5316 (i18n) \\u7684\\u4E00\\u4E2A\\u65B9\\u9762\\u3002\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u5411\\u670D\\u52A1\\u5668\\u53D1\\u51FA HTTP \\u8BF7\\u6C42\\u65F6\\uFF0C\\u8BF7\\u6C42\\u7528\\u6237\\u4EE3\\u7406\\u901A\\u5E38\\u4F1A\\u53D1\\u9001\\u6709\\u5173\\u8BED\\u8A00\\u504F\\u597D\\u7684\\u4FE1\\u606F\\uFF0C\\u4F8B\\u5982\\u5728 \",(0,n.jsx)(e.code,{children:\"Accept-Language\"}),\" \\u6807\\u5934\\u4E2D\\u3002\\u7136\\u540E\\uFF0C\\u5982\\u679C\\u5B58\\u5728\\u8FD9\\u79CD\\u5907\\u9009\\u65B9\\u6848\\uFF0C\\u670D\\u52A1\\u5668\\u53EF\\u4EE5\\u4F7F\\u7528\\u6B64\\u4FE1\\u606F\\u4EE5\\u9002\\u5F53\\u7684\\u8BED\\u8A00\\u8FD4\\u56DE\\u6587\\u6863\\u7248\\u672C\\u3002\\u8FD4\\u56DE\\u7684 HTML \\u6587\\u6863\\u8FD8\\u5E94\\u5728 \",(0,n.jsx)(e.code,{children:\"<html>\"}),\" \\u6807\\u7B7E\\u4E2D\\u58F0\\u660E \",(0,n.jsx)(e.code,{children:\"lang\"}),\" \\u5C5E\\u6027\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:'<html lang=\"en\">...</html>'}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E3A\\u4E86\\u8BA9\\u641C\\u7D22\\u5F15\\u64CE\\u77E5\\u9053\\u76F8\\u540C\\u7684\\u5185\\u5BB9\\u6709\\u4E0D\\u540C\\u7684\\u8BED\\u8A00\\u7248\\u672C\\uFF0C\\u5E94\\u8BE5\\u4F7F\\u7528\\u5E26\\u6709 \",(0,n.jsx)(e.code,{children:'rel=\"alternate\"'}),\" \\u548C \",(0,n.jsx)(e.code,{children:'hreflang=\"...\"'}),\" \\u5C5E\\u6027\\u7684 \",(0,n.jsx)(e.code,{children:\"<link>\"}),\" \\u6807\\u7B7E\\u3002\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:'<link rel=\"alternate\" hreflang=\"de\" href=\"http://de.example.com/page.html\" />'}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6E32\\u67D3\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\uFF1A\"}),\" HTML \\u6807\\u8BB0\\u5C06\\u5305\\u542B\\u5B57\\u7B26\\u4E32\\u5360\\u4F4D\\u7B26\\uFF0C\\u7279\\u5B9A\\u8BED\\u8A00\\u7684\\u5185\\u5BB9\\u5C06\\u4ECE\\u4EE3\\u7801\\u914D\\u7F6E\\u6216\\u7FFB\\u8BD1\\u670D\\u52A1\\u4E2D\\u83B7\\u53D6\\u3002\\u7136\\u540E\\uFF0C\\u670D\\u52A1\\u5668\\u52A8\\u6001\\u751F\\u6210\\u5177\\u6709\\u8BE5\\u7279\\u5B9A\\u8BED\\u8A00\\u5185\\u5BB9\\u7684 HTML \\u9875\\u9762\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5BA2\\u6237\\u7AEF\\u6E32\\u67D3\\uFF1A\"}),\" \\u9002\\u5F53\\u7684\\u533A\\u57DF\\u8BBE\\u7F6E\\u5B57\\u7B26\\u4E32\\u5C06\\u88AB\\u63D0\\u53D6\\u5E76\\u4E0E\\u57FA\\u4E8E JavaScript \\u7684\\u89C6\\u56FE\\u76F8\\u7ED3\\u5408\\u3002\"]}),`\n`]})]})}function s(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(a,{...l})}):a(l)}return j(L);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/en-US.json
index e8b47a42b..ff1d87023 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var o=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var t in e)o(n,t,{get:e[t],enumerable:!0})},a=(n,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!m.call(n,i)&&i!==t&&o(n,i,{get:()=>e[i],enumerable:!(s=h(e,i))||s.enumerable});return n};var x=(n,e,t)=>(t=n!=null?d(f(n)):{},a(e||!n||!n.__esModule?o(t,\"default\",{value:n,enumerable:!0}):t,n)),w=n=>a(o({},\"__esModule\",{value:!0}),n);var l=g((C,c)=>{c.exports=_jsx_runtime});var S={};b(S,{default:()=>v,frontmatter:()=>j});var r=x(l()),j={title:\"How do you serve your pages for feature-constrained browsers?\",subtitle:\"What techniques/processes do you use?\"};function u(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"Techniques\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"Graceful degradation: The practice of building an application for modern browsers while ensuring it remains functional in older browsers.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Progressive enhancement: The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.\"}),`\n`,(0,r.jsxs)(e.li,{children:[\"Use \",(0,r.jsx)(e.a,{href:\"https://caniuse.com/\",children:\"caniuse.com\"}),\" to check for feature support.\"]}),`\n`,(0,r.jsx)(e.li,{children:\"Autoprefixer for automatic vendor prefix insertion.\"}),`\n`,(0,r.jsxs)(e.li,{children:[\"Feature detection using \",(0,r.jsx)(e.a,{href:\"https://modernizr.com/\",children:\"Modernizr\"}),\".\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"Use CSS Feature queries via \",(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/@supports\",children:\"`@support``\"})]}),`\n`]})]})}function _(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,Object.assign({},n,{children:(0,r.jsx)(u,n)})):u(n)}var v=_;return w(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var t in e)o(n,t,{get:e[t],enumerable:!0})},a=(n,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of f(e))!x.call(n,i)&&i!==t&&o(n,i,{get:()=>e[i],enumerable:!(s=p(e,i))||s.enumerable});return n};var w=(n,e,t)=>(t=n!=null?h(m(n)):{},a(e||!n||!n.__esModule?o(t,\"default\",{value:n,enumerable:!0}):t,n)),_=n=>a(o({},\"__esModule\",{value:!0}),n);var l=g((y,c)=>{c.exports=_jsx_runtime});var j={};b(j,{default:()=>d,frontmatter:()=>v});var r=w(l()),v={title:\"How do you serve your pages for feature-constrained browsers?\",subtitle:\"What techniques/processes do you use?\"};function u(n){let e={a:\"a\",h2:\"h2\",li:\"li\",ul:\"ul\",...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"Techniques\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"Graceful degradation: The practice of building an application for modern browsers while ensuring it remains functional in older browsers.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Progressive enhancement: The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.\"}),`\n`,(0,r.jsxs)(e.li,{children:[\"Use \",(0,r.jsx)(e.a,{href:\"https://caniuse.com/\",children:\"caniuse.com\"}),\" to check for feature support.\"]}),`\n`,(0,r.jsx)(e.li,{children:\"Autoprefixer for automatic vendor prefix insertion.\"}),`\n`,(0,r.jsxs)(e.li,{children:[\"Feature detection using \",(0,r.jsx)(e.a,{href:\"https://modernizr.com/\",children:\"Modernizr\"}),\".\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"Use CSS Feature queries via \",(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/@supports\",children:\"`@support``\"})]}),`\n`]})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(u,{...n})}):u(n)}return _(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/pt-BR.json b/apps/web/src/__generated__/questions/quiz/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/pt-BR.json
index 84dd15ba5..99d4ce51b 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),v=(r,e)=>{for(var n in e)s(r,n,{get:e[n],enumerable:!0})},c=(r,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!g.call(r,o)&&o!==n&&s(r,o,{get:()=>e[o],enumerable:!(i=m(e,o))||i.enumerable});return r};var x=(r,e,n)=>(n=r!=null?l(h(r)):{},c(e||!r||!r.__esModule?s(n,\"default\",{value:r,enumerable:!0}):n,r)),j=r=>c(s({},\"__esModule\",{value:!0}),r);var d=f((D,t)=>{t.exports=_jsx_runtime});var S={};v(S,{default:()=>C,frontmatter:()=>_});var a=x(d()),_={title:\"Como voc\\xEA serve suas p\\xE1ginas para navegadores com limita\\xE7\\xF5es de recursos?\",subtitle:\"Quais t\\xE9cnicas/processos voc\\xEA usa?\"};function u(r){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h2,{children:\"T\\xE9cnicas\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:\"Degrada\\xE7\\xE3o graciosa: A pr\\xE1tica de construir uma aplica\\xE7\\xE3o para navegadores modernos, garantindo que ela permane\\xE7a funcional em navegadores mais antigos.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Aprimoramento progressivo: A pr\\xE1tica de construir uma aplica\\xE7\\xE3o para um n\\xEDvel base de experi\\xEAncia do usu\\xE1rio, mas adicionar aprimoramentos funcionais quando um navegador a suporta.\"}),`\n`,(0,a.jsxs)(e.li,{children:[\"Use \",(0,a.jsx)(e.a,{href:\"https://caniuse.com/\",children:\"caniuse.com\"}),\" para verificar o suporte de recursos.\"]}),`\n`,(0,a.jsx)(e.li,{children:\"Autoprefixer para inser\\xE7\\xE3o autom\\xE1tica de prefixo do fornecedor (vendor).\"}),`\n`,(0,a.jsxs)(e.li,{children:[\"Detec\\xE7\\xE3o de recursos usando \",(0,a.jsx)(e.a,{href:\"https://modernizr.com/\",children:\"Modernizr\"}),\".\"]}),`\n`,(0,a.jsxs)(e.li,{children:[\"Use as consultas CSS de recursos via \",(0,a.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/@supports\",children:\"`@support``\"})]}),`\n`]})]})}function b(r={}){let{wrapper:e}=r.components||{};return e?(0,a.jsx)(e,Object.assign({},r,{children:(0,a.jsx)(u,r)})):u(r)}var C=b;return j(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),x=(r,e)=>{for(var o in e)s(r,o,{get:e[o],enumerable:!0})},c=(r,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of h(e))!g.call(r,n)&&n!==o&&s(r,n,{get:()=>e[n],enumerable:!(i=p(e,n))||i.enumerable});return r};var _=(r,e,o)=>(o=r!=null?m(f(r)):{},c(e||!r||!r.__esModule?s(o,\"default\",{value:r,enumerable:!0}):o,r)),j=r=>c(s({},\"__esModule\",{value:!0}),r);var d=v((D,t)=>{t.exports=_jsx_runtime});var S={};x(S,{default:()=>l,frontmatter:()=>C});var a=_(d()),C={title:\"Como voc\\xEA serve suas p\\xE1ginas para navegadores com limita\\xE7\\xF5es de recursos?\",subtitle:\"Quais t\\xE9cnicas/processos voc\\xEA usa?\"};function u(r){let e={a:\"a\",h2:\"h2\",li:\"li\",ul:\"ul\",...r.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h2,{children:\"T\\xE9cnicas\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:\"Degrada\\xE7\\xE3o graciosa: A pr\\xE1tica de construir uma aplica\\xE7\\xE3o para navegadores modernos, garantindo que ela permane\\xE7a funcional em navegadores mais antigos.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Aprimoramento progressivo: A pr\\xE1tica de construir uma aplica\\xE7\\xE3o para um n\\xEDvel base de experi\\xEAncia do usu\\xE1rio, mas adicionar aprimoramentos funcionais quando um navegador a suporta.\"}),`\n`,(0,a.jsxs)(e.li,{children:[\"Use \",(0,a.jsx)(e.a,{href:\"https://caniuse.com/\",children:\"caniuse.com\"}),\" para verificar o suporte de recursos.\"]}),`\n`,(0,a.jsx)(e.li,{children:\"Autoprefixer para inser\\xE7\\xE3o autom\\xE1tica de prefixo do fornecedor (vendor).\"}),`\n`,(0,a.jsxs)(e.li,{children:[\"Detec\\xE7\\xE3o de recursos usando \",(0,a.jsx)(e.a,{href:\"https://modernizr.com/\",children:\"Modernizr\"}),\".\"]}),`\n`,(0,a.jsxs)(e.li,{children:[\"Use as consultas CSS de recursos via \",(0,a.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/@supports\",children:\"`@support``\"})]}),`\n`]})]})}function l(r={}){let{wrapper:e}=r.components||{};return e?(0,a.jsx)(e,{...r,children:(0,a.jsx)(u,{...r})}):u(r)}return j(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/zh-CN.json
index fa46ce969..63e0cd232 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var f=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),j=(e,n)=>{for(var r in n)c(e,r,{get:n[r],enumerable:!0})},o=(e,n,r,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of m(n))!x.call(e,i)&&i!==r&&c(e,i,{get:()=>n[i],enumerable:!(l=u(n,i))||l.enumerable});return e};var _=(e,n,r)=>(r=e!=null?d(p(e)):{},o(n||!e||!e.__esModule?c(r,\"default\",{value:e,enumerable:!0}):r,e)),g=e=>o(c({},\"__esModule\",{value:!0}),e);var h=f((D,s)=>{s.exports=_jsx_runtime});var M={};j(M,{default:()=>C,frontmatter:()=>S});var t=_(h()),S={title:\"\\u60A8\\u5982\\u4F55\\u4E3A\\u529F\\u80FD\\u53D7\\u9650\\u7684\\u6D4F\\u89C8\\u5668\\u63D0\\u4F9B\\u9875\\u9762\\uFF1F\",subtitle:\"\\u60A8\\u4F7F\\u7528\\u4EC0\\u4E48\\u6280\\u672F/\\u6D41\\u7A0B\\uFF1F\"};function a(e){let n=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\"},e.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{children:\"\\u6280\\u672F\"}),`\n`,(0,t.jsxs)(n.ul,{children:[`\n`,(0,t.jsx)(n.li,{children:\"\\u4F18\\u96C5\\u964D\\u7EA7\\uFF1A\\u4E3A\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u6784\\u5EFA\\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u540C\\u65F6\\u786E\\u4FDD\\u5B83\\u5728\\u65E7\\u6D4F\\u89C8\\u5668\\u4E2D\\u4ECD\\u80FD\\u8FD0\\u884C\\u7684\\u5B9E\\u8DF5\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"\\u6E10\\u8FDB\\u589E\\u5F3A\\uFF1A\\u4E3A\\u57FA\\u672C\\u7528\\u6237\\u4F53\\u9A8C\\u6784\\u5EFA\\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u4F46\\u5728\\u6D4F\\u89C8\\u5668\\u652F\\u6301\\u65F6\\u6DFB\\u52A0\\u529F\\u80FD\\u589E\\u5F3A\\u7684\\u5B9E\\u8DF5\\u3002\"}),`\n`,(0,t.jsxs)(n.li,{children:[\"\\u4F7F\\u7528 \",(0,t.jsx)(n.a,{href:\"https://caniuse.com/\",children:\"caniuse.com\"}),\" \\u68C0\\u67E5\\u529F\\u80FD\\u652F\\u6301\\u3002\"]}),`\n`,(0,t.jsx)(n.li,{children:\"Autoprefixer \\u7528\\u4E8E\\u81EA\\u52A8\\u63D2\\u5165\\u4F9B\\u5E94\\u5546\\u524D\\u7F00\\u3002\"}),`\n`,(0,t.jsxs)(n.li,{children:[\"\\u4F7F\\u7528 \",(0,t.jsx)(n.a,{href:\"https://modernizr.com/\",children:\"Modernizr\"}),\" \\u8FDB\\u884C\\u529F\\u80FD\\u68C0\\u6D4B\\u3002\"]}),`\n`,(0,t.jsxs)(n.li,{children:[\"\\u901A\\u8FC7 \",(0,t.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/@supports\",children:\"`@support``\"}),\" \\u4F7F\\u7528 CSS \\u529F\\u80FD\\u67E5\\u8BE2\"]}),`\n`]})]})}function b(e={}){let{wrapper:n}=e.components||{};return n?(0,t.jsx)(n,Object.assign({},e,{children:(0,t.jsx)(a,e)})):a(e)}var C=b;return g(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var _=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),j=(e,n)=>{for(var t in n)l(e,t,{get:n[t],enumerable:!0})},c=(e,n,t,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of p(n))!f.call(e,i)&&i!==t&&l(e,i,{get:()=>n[i],enumerable:!(o=m(n,i))||o.enumerable});return e};var S=(e,n,t)=>(t=e!=null?u(x(e)):{},c(n||!e||!e.__esModule?l(t,\"default\",{value:e,enumerable:!0}):t,e)),C=e=>c(l({},\"__esModule\",{value:!0}),e);var h=_((b,s)=>{s.exports=_jsx_runtime});var g={};j(g,{default:()=>a,frontmatter:()=>M});var r=S(h()),M={title:\"\\u60A8\\u5982\\u4F55\\u4E3A\\u529F\\u80FD\\u53D7\\u9650\\u7684\\u6D4F\\u89C8\\u5668\\u63D0\\u4F9B\\u9875\\u9762\\uFF1F\",subtitle:\"\\u60A8\\u4F7F\\u7528\\u4EC0\\u4E48\\u6280\\u672F/\\u6D41\\u7A0B\\uFF1F\"};function d(e){let n={a:\"a\",h2:\"h2\",li:\"li\",ul:\"ul\",...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h2,{children:\"\\u6280\\u672F\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:\"\\u4F18\\u96C5\\u964D\\u7EA7\\uFF1A\\u4E3A\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u6784\\u5EFA\\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u540C\\u65F6\\u786E\\u4FDD\\u5B83\\u5728\\u65E7\\u6D4F\\u89C8\\u5668\\u4E2D\\u4ECD\\u80FD\\u8FD0\\u884C\\u7684\\u5B9E\\u8DF5\\u3002\"}),`\n`,(0,r.jsx)(n.li,{children:\"\\u6E10\\u8FDB\\u589E\\u5F3A\\uFF1A\\u4E3A\\u57FA\\u672C\\u7528\\u6237\\u4F53\\u9A8C\\u6784\\u5EFA\\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u4F46\\u5728\\u6D4F\\u89C8\\u5668\\u652F\\u6301\\u65F6\\u6DFB\\u52A0\\u529F\\u80FD\\u589E\\u5F3A\\u7684\\u5B9E\\u8DF5\\u3002\"}),`\n`,(0,r.jsxs)(n.li,{children:[\"\\u4F7F\\u7528 \",(0,r.jsx)(n.a,{href:\"https://caniuse.com/\",children:\"caniuse.com\"}),\" \\u68C0\\u67E5\\u529F\\u80FD\\u652F\\u6301\\u3002\"]}),`\n`,(0,r.jsx)(n.li,{children:\"Autoprefixer \\u7528\\u4E8E\\u81EA\\u52A8\\u63D2\\u5165\\u4F9B\\u5E94\\u5546\\u524D\\u7F00\\u3002\"}),`\n`,(0,r.jsxs)(n.li,{children:[\"\\u4F7F\\u7528 \",(0,r.jsx)(n.a,{href:\"https://modernizr.com/\",children:\"Modernizr\"}),\" \\u8FDB\\u884C\\u529F\\u80FD\\u68C0\\u6D4B\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[\"\\u901A\\u8FC7 \",(0,r.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/@supports\",children:\"`@support``\"}),\" \\u4F7F\\u7528 CSS \\u529F\\u80FD\\u67E5\\u8BE2\"]}),`\n`]})]})}function a(e={}){let{wrapper:n}=e.components||{};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}return C(g);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-test-react-applications/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-test-react-applications/en-US.json
index 14d39ce87..de781cb49 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-test-react-applications/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-test-react-applications/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/how-do-you-test-react-applications/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var o=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var r in e)o(n,r,{get:e[r],enumerable:!0})},a=(n,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!g.call(n,i)&&i!==r&&o(n,i,{get:()=>e[i],enumerable:!(s=h(e,i))||s.enumerable});return n};var v=(n,e,r)=>(r=n!=null?d(u(n)):{},a(e||!n||!n.__esModule?o(r,\"default\",{value:n,enumerable:!0}):r,n)),w=n=>a(o({},\"__esModule\",{value:!0}),n);var p=y((E,c)=>{c.exports=_jsx_runtime});var C={};f(C,{default:()=>j,frontmatter:()=>x});var t=v(p()),x={title:\"How do you test React applications?\"};function l(n){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:\"To test React applications, you can use tools like Jest and React Testing Library. Jest is a JavaScript testing framework that works well with React, and React Testing Library provides utilities to test React components in a way that resembles how users interact with them. You can write unit tests for individual components, integration tests for component interactions, and end-to-end tests using tools like Cypress.\"}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"How do you test React applications?\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Unit testing\"}),`\n`,(0,t.jsx)(e.p,{children:\"Unit testing involves testing individual components in isolation. Jest is a popular choice for unit testing React applications. It provides a test runner, assertion library, and mocking capabilities.\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`import React from 'react';\nimport { render, screen } from '@testing-library/react';\nimport '@testing-library/jest-dom/extend-expect';\nimport MyComponent from './MyComponent';\n\ntest('renders the component with the correct text', () => {\n  render(<MyComponent />);\n  expect(screen.getByText('Hello, World!')).toBeInTheDocument();\n});\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Integration testing\"}),`\n`,(0,t.jsx)(e.p,{children:\"Integration testing involves testing the interaction between multiple components. React Testing Library is useful for this as it allows you to render components and interact with them as a user would.\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`import React from 'react';\nimport { render, fireEvent, screen } from '@testing-library/react';\nimport '@testing-library/jest-dom/extend-expect';\nimport ParentComponent from './ParentComponent';\n\ntest('updates child component when parent state changes', () => {\n  render(<ParentComponent />);\n  fireEvent.click(screen.getByText('Update Child'));\n  expect(screen.getByText('Child Updated')).toBeInTheDocument();\n});\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"End-to-end testing\"}),`\n`,(0,t.jsx)(e.p,{children:\"End-to-end (E2E) testing involves testing the entire application flow from the user's perspective. Cypress is a popular tool for E2E testing in React applications.\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`describe('My Application', () => {\n  it('should allow a user to log in', () => {\n    cy.visit('/login');\n    cy.get('input[name=\"username\"]').type('user');\n    cy.get('input[name=\"password\"]').type('password');\n    cy.get('button[type=\"submit\"]').click();\n    cy.url().should('include', '/dashboard');\n  });\n});\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Snapshot testing\"}),`\n`,(0,t.jsx)(e.p,{children:\"Snapshot testing involves capturing the rendered output of a component and comparing it to a saved snapshot. Jest provides built-in support for snapshot testing.\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`import React from 'react';\nimport renderer from 'react-test-renderer';\nimport MyComponent from './MyComponent';\n\ntest('matches the snapshot', () => {\n  const tree = renderer.create(<MyComponent />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n`})}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://jestjs.io/docs/getting-started\",children:\"Jest documentation\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://testing-library.com/docs/react-testing-library/intro\",children:\"React Testing Library documentation\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://docs.cypress.io/guides/overview/why-cypress\",children:\"Cypress documentation\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://jestjs.io/docs/snapshot-testing\",children:\"Snapshot testing with Jest\"})}),`\n`]})]})}function b(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(l,n)})):l(n)}var j=b;return w(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var r in e)o(n,r,{get:e[r],enumerable:!0})},a=(n,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!y.call(n,i)&&i!==r&&o(n,i,{get:()=>e[i],enumerable:!(s=m(e,i))||s.enumerable});return n};var w=(n,e,r)=>(r=n!=null?h(g(n)):{},a(e||!n||!n.__esModule?o(r,\"default\",{value:n,enumerable:!0}):r,n)),x=n=>a(o({},\"__esModule\",{value:!0}),n);var p=f((R,c)=>{c.exports=_jsx_runtime});var C={};v(C,{default:()=>d,frontmatter:()=>b});var t=w(p()),b={title:\"How do you test React applications?\"};function l(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:\"To test React applications, you can use tools like Jest and React Testing Library. Jest is a JavaScript testing framework that works well with React, and React Testing Library provides utilities to test React components in a way that resembles how users interact with them. You can write unit tests for individual components, integration tests for component interactions, and end-to-end tests using tools like Cypress.\"}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"How do you test React applications?\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Unit testing\"}),`\n`,(0,t.jsx)(e.p,{children:\"Unit testing involves testing individual components in isolation. Jest is a popular choice for unit testing React applications. It provides a test runner, assertion library, and mocking capabilities.\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`import React from 'react';\nimport { render, screen } from '@testing-library/react';\nimport '@testing-library/jest-dom/extend-expect';\nimport MyComponent from './MyComponent';\n\ntest('renders the component with the correct text', () => {\n  render(<MyComponent />);\n  expect(screen.getByText('Hello, World!')).toBeInTheDocument();\n});\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Integration testing\"}),`\n`,(0,t.jsx)(e.p,{children:\"Integration testing involves testing the interaction between multiple components. React Testing Library is useful for this as it allows you to render components and interact with them as a user would.\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`import React from 'react';\nimport { render, fireEvent, screen } from '@testing-library/react';\nimport '@testing-library/jest-dom/extend-expect';\nimport ParentComponent from './ParentComponent';\n\ntest('updates child component when parent state changes', () => {\n  render(<ParentComponent />);\n  fireEvent.click(screen.getByText('Update Child'));\n  expect(screen.getByText('Child Updated')).toBeInTheDocument();\n});\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"End-to-end testing\"}),`\n`,(0,t.jsx)(e.p,{children:\"End-to-end (E2E) testing involves testing the entire application flow from the user's perspective. Cypress is a popular tool for E2E testing in React applications.\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`describe('My Application', () => {\n  it('should allow a user to log in', () => {\n    cy.visit('/login');\n    cy.get('input[name=\"username\"]').type('user');\n    cy.get('input[name=\"password\"]').type('password');\n    cy.get('button[type=\"submit\"]').click();\n    cy.url().should('include', '/dashboard');\n  });\n});\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Snapshot testing\"}),`\n`,(0,t.jsx)(e.p,{children:\"Snapshot testing involves capturing the rendered output of a component and comparing it to a saved snapshot. Jest provides built-in support for snapshot testing.\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`import React from 'react';\nimport renderer from 'react-test-renderer';\nimport MyComponent from './MyComponent';\n\ntest('matches the snapshot', () => {\n  const tree = renderer.create(<MyComponent />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n`})}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://jestjs.io/docs/getting-started\",children:\"Jest documentation\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://testing-library.com/docs/react-testing-library/intro\",children:\"React Testing Library documentation\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://docs.cypress.io/guides/overview/why-cypress\",children:\"Cypress documentation\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://jestjs.io/docs/snapshot-testing\",children:\"Snapshot testing with Jest\"})}),`\n`]})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(l,{...n})}):l(n)}return x(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-test-react-applications/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-test-react-applications/zh-CN.json
index 92b9606af..40bc2c8e9 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-test-react-applications/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-test-react-applications/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/how-do-you-test-react-applications/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var u=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},a=(t,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!y.call(t,c)&&c!==r&&i(t,c,{get:()=>e[c],enumerable:!(s=p(e,c))||s.enumerable});return t};var x=(t,e,r)=>(r=t!=null?l(g(t)):{},a(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),j=t=>a(i({},\"__esModule\",{value:!0}),t);var h=u((T,o)=>{o.exports=_jsx_runtime});var M={};f(M,{default:()=>R,frontmatter:()=>b});var n=x(h()),b={title:\"\\u5982\\u4F55\\u6D4B\\u8BD5 React \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF1F\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",code:\"code\",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.jsx)(e.p,{children:\"\\u8981\\u6D4B\\u8BD5 React \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 Jest \\u548C React Testing Library \\u7B49\\u5DE5\\u5177\\u3002Jest \\u662F\\u4E00\\u4E2A\\u4E0E React \\u914D\\u5408\\u826F\\u597D\\u7684 JavaScript \\u6D4B\\u8BD5\\u6846\\u67B6\\uFF0C\\u800C React Testing Library \\u63D0\\u4F9B\\u4E86\\u4EE5\\u7C7B\\u4F3C\\u4E8E\\u7528\\u6237\\u4E0E\\u7EC4\\u4EF6\\u4EA4\\u4E92\\u7684\\u65B9\\u5F0F\\u6D4B\\u8BD5 React \\u7EC4\\u4EF6\\u7684\\u5B9E\\u7528\\u7A0B\\u5E8F\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 Cypress \\u7B49\\u5DE5\\u5177\\u4E3A\\u5355\\u4E2A\\u7EC4\\u4EF6\\u7F16\\u5199\\u5355\\u5143\\u6D4B\\u8BD5\\u3001\\u4E3A\\u7EC4\\u4EF6\\u4EA4\\u4E92\\u7F16\\u5199\\u96C6\\u6210\\u6D4B\\u8BD5\\u4EE5\\u53CA\\u7F16\\u5199\\u7AEF\\u5230\\u7AEF\\u6D4B\\u8BD5\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u6D4B\\u8BD5 React \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5355\\u5143\\u6D4B\\u8BD5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5355\\u5143\\u6D4B\\u8BD5\\u6D89\\u53CA\\u5355\\u72EC\\u6D4B\\u8BD5\\u5404\\u4E2A\\u7EC4\\u4EF6\\u3002Jest \\u662F\\u4E00\\u4E2A\\u7528\\u4E8E\\u5355\\u5143\\u6D4B\\u8BD5 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u5E38\\u7528\\u9009\\u62E9\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u6D4B\\u8BD5\\u8FD0\\u884C\\u5668\\u3001\\u65AD\\u8A00\\u5E93\\u548C\\u6A21\\u62DF\\u529F\\u80FD\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React from 'react';\nimport { render, screen } from '@testing-library/react';\nimport '@testing-library/jest-dom/extend-expect';\nimport MyComponent from './MyComponent';\n\ntest('renders the component with the correct text', () => {\n  render(<MyComponent />);\n  expect(screen.getByText('Hello, World!')).toBeInTheDocument();\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u96C6\\u6210\\u6D4B\\u8BD5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u96C6\\u6210\\u6D4B\\u8BD5\\u6D89\\u53CA\\u6D4B\\u8BD5\\u591A\\u4E2A\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u7684\\u4EA4\\u4E92\\u3002React Testing Library \\u5BF9\\u6B64\\u5F88\\u6709\\u7528\\uFF0C\\u56E0\\u4E3A\\u5B83\\u5141\\u8BB8\\u60A8\\u6E32\\u67D3\\u7EC4\\u4EF6\\u5E76\\u50CF\\u7528\\u6237\\u4E00\\u6837\\u4E0E\\u5B83\\u4EEC\\u4EA4\\u4E92\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React from 'react';\nimport { render, fireEvent, screen } from '@testing-library/react';\nimport '@testing-library/jest-dom/extend-expect';\nimport ParentComponent from './ParentComponent';\n\ntest('updates child component when parent state changes', () => {\n  render(<ParentComponent />);\n  fireEvent.click(screen.getByText('Update Child'));\n  expect(screen.getByText('Child Updated')).toBeInTheDocument();\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7AEF\\u5230\\u7AEF\\u6D4B\\u8BD5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u7AEF\\u5230\\u7AEF (E2E) \\u6D4B\\u8BD5\\u6D89\\u53CA\\u4ECE\\u7528\\u6237\\u7684\\u89D2\\u5EA6\\u6D4B\\u8BD5\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u6D41\\u7A0B\\u3002Cypress \\u662F\\u4E00\\u4E2A\\u7528\\u4E8E React \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D E2E \\u6D4B\\u8BD5\\u7684\\u5E38\\u7528\\u5DE5\\u5177\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`describe('My Application', () => {\n  it('should allow a user to log in', () => {\n    cy.visit('/login');\n    cy.get('input[name=\"username\"]').type('user');\n    cy.get('input[name=\"password\"]').type('password');\n    cy.get('button[type=\"submit\"]').click();\n    cy.url().should('include', '/dashboard');\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5FEB\\u7167\\u6D4B\\u8BD5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5FEB\\u7167\\u6D4B\\u8BD5\\u6D89\\u53CA\\u6355\\u83B7\\u7EC4\\u4EF6\\u7684\\u6E32\\u67D3\\u8F93\\u51FA\\u5E76\\u5C06\\u5176\\u4E0E\\u5DF2\\u4FDD\\u5B58\\u7684\\u5FEB\\u7167\\u8FDB\\u884C\\u6BD4\\u8F83\\u3002Jest \\u63D0\\u4F9B\\u4E86\\u5BF9\\u5FEB\\u7167\\u6D4B\\u8BD5\\u7684\\u5185\\u7F6E\\u652F\\u6301\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React from 'react';\nimport renderer from 'react-test-renderer';\nimport MyComponent from './MyComponent';\n\ntest('matches the snapshot', () => {\n  const tree = renderer.create(<MyComponent />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jestjs.io/docs/getting-started\",children:\"Jest \\u6587\\u6863\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://testing-library.com/docs/react-testing-library/intro\",children:\"React Testing Library \\u6587\\u6863\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://docs.cypress.io/guides/overview/why-cypress\",children:\"Cypress \\u6587\\u6863\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jestjs.io/docs/snapshot-testing\",children:\"\\u4F7F\\u7528 Jest \\u8FDB\\u884C\\u5FEB\\u7167\\u6D4B\\u8BD5\"})}),`\n`]})]})}function C(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var R=C;return j(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},o=(t,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of y(e))!u.call(t,c)&&c!==r&&i(t,c,{get:()=>e[c],enumerable:!(s=m(e,c))||s.enumerable});return t};var C=(t,e,r)=>(r=t!=null?p(g(t)):{},o(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),j=t=>o(i({},\"__esModule\",{value:!0}),t);var h=f((v,a)=>{a.exports=_jsx_runtime});var b={};x(b,{default:()=>l,frontmatter:()=>R});var n=C(h()),R={title:\"\\u5982\\u4F55\\u6D4B\\u8BD5 React \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF1F\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8981\\u6D4B\\u8BD5 React \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 Jest \\u548C React Testing Library \\u7B49\\u5DE5\\u5177\\u3002Jest \\u662F\\u4E00\\u4E2A\\u4E0E React \\u914D\\u5408\\u826F\\u597D\\u7684 JavaScript \\u6D4B\\u8BD5\\u6846\\u67B6\\uFF0C\\u800C React Testing Library \\u63D0\\u4F9B\\u4E86\\u4EE5\\u7C7B\\u4F3C\\u4E8E\\u7528\\u6237\\u4E0E\\u7EC4\\u4EF6\\u4EA4\\u4E92\\u7684\\u65B9\\u5F0F\\u6D4B\\u8BD5 React \\u7EC4\\u4EF6\\u7684\\u5B9E\\u7528\\u7A0B\\u5E8F\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 Cypress \\u7B49\\u5DE5\\u5177\\u4E3A\\u5355\\u4E2A\\u7EC4\\u4EF6\\u7F16\\u5199\\u5355\\u5143\\u6D4B\\u8BD5\\u3001\\u4E3A\\u7EC4\\u4EF6\\u4EA4\\u4E92\\u7F16\\u5199\\u96C6\\u6210\\u6D4B\\u8BD5\\u4EE5\\u53CA\\u7F16\\u5199\\u7AEF\\u5230\\u7AEF\\u6D4B\\u8BD5\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u6D4B\\u8BD5 React \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5355\\u5143\\u6D4B\\u8BD5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5355\\u5143\\u6D4B\\u8BD5\\u6D89\\u53CA\\u5355\\u72EC\\u6D4B\\u8BD5\\u5404\\u4E2A\\u7EC4\\u4EF6\\u3002Jest \\u662F\\u4E00\\u4E2A\\u7528\\u4E8E\\u5355\\u5143\\u6D4B\\u8BD5 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u5E38\\u7528\\u9009\\u62E9\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u6D4B\\u8BD5\\u8FD0\\u884C\\u5668\\u3001\\u65AD\\u8A00\\u5E93\\u548C\\u6A21\\u62DF\\u529F\\u80FD\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React from 'react';\nimport { render, screen } from '@testing-library/react';\nimport '@testing-library/jest-dom/extend-expect';\nimport MyComponent from './MyComponent';\n\ntest('renders the component with the correct text', () => {\n  render(<MyComponent />);\n  expect(screen.getByText('Hello, World!')).toBeInTheDocument();\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u96C6\\u6210\\u6D4B\\u8BD5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u96C6\\u6210\\u6D4B\\u8BD5\\u6D89\\u53CA\\u6D4B\\u8BD5\\u591A\\u4E2A\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u7684\\u4EA4\\u4E92\\u3002React Testing Library \\u5BF9\\u6B64\\u5F88\\u6709\\u7528\\uFF0C\\u56E0\\u4E3A\\u5B83\\u5141\\u8BB8\\u60A8\\u6E32\\u67D3\\u7EC4\\u4EF6\\u5E76\\u50CF\\u7528\\u6237\\u4E00\\u6837\\u4E0E\\u5B83\\u4EEC\\u4EA4\\u4E92\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React from 'react';\nimport { render, fireEvent, screen } from '@testing-library/react';\nimport '@testing-library/jest-dom/extend-expect';\nimport ParentComponent from './ParentComponent';\n\ntest('updates child component when parent state changes', () => {\n  render(<ParentComponent />);\n  fireEvent.click(screen.getByText('Update Child'));\n  expect(screen.getByText('Child Updated')).toBeInTheDocument();\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7AEF\\u5230\\u7AEF\\u6D4B\\u8BD5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u7AEF\\u5230\\u7AEF (E2E) \\u6D4B\\u8BD5\\u6D89\\u53CA\\u4ECE\\u7528\\u6237\\u7684\\u89D2\\u5EA6\\u6D4B\\u8BD5\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u6D41\\u7A0B\\u3002Cypress \\u662F\\u4E00\\u4E2A\\u7528\\u4E8E React \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D E2E \\u6D4B\\u8BD5\\u7684\\u5E38\\u7528\\u5DE5\\u5177\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`describe('My Application', () => {\n  it('should allow a user to log in', () => {\n    cy.visit('/login');\n    cy.get('input[name=\"username\"]').type('user');\n    cy.get('input[name=\"password\"]').type('password');\n    cy.get('button[type=\"submit\"]').click();\n    cy.url().should('include', '/dashboard');\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5FEB\\u7167\\u6D4B\\u8BD5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5FEB\\u7167\\u6D4B\\u8BD5\\u6D89\\u53CA\\u6355\\u83B7\\u7EC4\\u4EF6\\u7684\\u6E32\\u67D3\\u8F93\\u51FA\\u5E76\\u5C06\\u5176\\u4E0E\\u5DF2\\u4FDD\\u5B58\\u7684\\u5FEB\\u7167\\u8FDB\\u884C\\u6BD4\\u8F83\\u3002Jest \\u63D0\\u4F9B\\u4E86\\u5BF9\\u5FEB\\u7167\\u6D4B\\u8BD5\\u7684\\u5185\\u7F6E\\u652F\\u6301\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React from 'react';\nimport renderer from 'react-test-renderer';\nimport MyComponent from './MyComponent';\n\ntest('matches the snapshot', () => {\n  const tree = renderer.create(<MyComponent />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jestjs.io/docs/getting-started\",children:\"Jest \\u6587\\u6863\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://testing-library.com/docs/react-testing-library/intro\",children:\"React Testing Library \\u6587\\u6863\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://docs.cypress.io/guides/overview/why-cypress\",children:\"Cypress \\u6587\\u6863\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jestjs.io/docs/snapshot-testing\",children:\"\\u4F7F\\u7528 Jest \\u8FDB\\u884C\\u5FEB\\u7167\\u6D4B\\u8BD5\"})}),`\n`]})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return j(b);})();\n;return Component;"
 }
\ No newline at end of file
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 2cd7f141b..e09c5f95d 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-use-windowhistory-api/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var r in e)i(n,r,{get:e[r],enumerable:!0})},s=(n,e,r,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of y(e))!m.call(n,o)&&o!==r&&i(n,o,{get:()=>e[o],enumerable:!(h=p(e,o))||h.enumerable});return n};var w=(n,e,r)=>(r=n!=null?l(u(n)):{},s(e||!n||!n.__esModule?i(r,\"default\",{value:n,enumerable:!0}):r,n)),f=n=>s(i({},\"__esModule\",{value:!0}),n);var c=g((P,d)=>{d.exports=_jsx_runtime});var I={};b(I,{default:()=>v,frontmatter:()=>S});var t=w(c()),S={title:\"How do you use `window.history` API?\"};function a(n){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The \",(0,t.jsx)(e.code,{children:\"window.history\"}),\" API allows you to manipulate the browser's session history. You can use \",(0,t.jsx)(e.code,{children:\"history.pushState()\"}),\" to add a new entry to the history stack, \",(0,t.jsx)(e.code,{children:\"history.replaceState()\"}),\" to modify the current entry, and \",(0,t.jsx)(e.code,{children:\"history.back()\"}),\", \",(0,t.jsx)(e.code,{children:\"history.forward()\"}),\", and \",(0,t.jsx)(e.code,{children:\"history.go()\"}),\" to navigate through the history. For example, \",(0,t.jsx)(e.code,{children:'history.pushState({page: 1}, \"title 1\", \"?page=1\")'}),\" adds a new entry to the history.\"]}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsxs)(e.h2,{children:[\"Using the \",(0,t.jsx)(e.code,{children:\"window.history\"}),\" API\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"The \",(0,t.jsx)(e.code,{children:\"window.history\"}),\" API provides methods to interact with the browser's history stack. This can be useful for single-page applications (SPAs) where you want to manage the URL and browser history without causing a full page reload.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Methods\"}),`\n`,(0,t.jsx)(e.h4,{children:(0,t.jsx)(e.code,{children:\"history.pushState()\"})}),`\n`,(0,t.jsx)(e.p,{children:\"This method adds a new entry to the history stack.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`history.pushState({ page: 1 }, 'title 1', '?page=1');\n`})}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"The first parameter is a state object associated with the new history entry.\"}),`\n`,(0,t.jsx)(e.li,{children:\"The second parameter is the title of the new history entry (currently ignored by most browsers).\"}),`\n`,(0,t.jsx)(e.li,{children:\"The third parameter is the URL to be displayed in the address bar.\"}),`\n`]}),`\n`,(0,t.jsx)(e.h4,{children:(0,t.jsx)(e.code,{children:\"history.replaceState()\"})}),`\n`,(0,t.jsx)(e.p,{children:\"This method modifies the current history entry.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`history.replaceState({ page: 2 }, 'title 2', '?page=2');\n`})}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[\"The parameters are the same as \",(0,t.jsx)(e.code,{children:\"pushState()\"}),\", but this method replaces the current entry instead of adding a new one.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h4,{children:(0,t.jsx)(e.code,{children:\"history.back()\"})}),`\n`,(0,t.jsx)(e.p,{children:\"This method moves the user back one entry in the history stack, similar to clicking the browser's back button.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`history.back();\n`})}),`\n`,(0,t.jsx)(e.h4,{children:(0,t.jsx)(e.code,{children:\"history.forward()\"})}),`\n`,(0,t.jsx)(e.p,{children:\"This method moves the user forward one entry in the history stack, similar to clicking the browser's forward button.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`history.forward();\n`})}),`\n`,(0,t.jsx)(e.h4,{children:(0,t.jsx)(e.code,{children:\"history.go()\"})}),`\n`,(0,t.jsx)(e.p,{children:\"This method moves the user a specified number of entries in the history stack.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`// Move back one entry\nhistory.go(-1);\n\n// Move forward one entry\nhistory.go(1);\n\n// Reload the current page\nhistory.go(0);\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Here's a simple example demonstrating the use of \",(0,t.jsx)(e.code,{children:\"pushState\"}),\" and \",(0,t.jsx)(e.code,{children:\"replaceState\"}),\":\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <title>History API Example</title>\n  </head>\n  <body>\n    <button id=\"pushStateBtn\">Push State</button>\n    <button id=\"replaceStateBtn\">Replace State</button>\n    <button id=\"backBtn\">Back</button>\n    <button id=\"forwardBtn\">Forward</button>\n\n    <script>\n      document.getElementById('pushStateBtn').addEventListener('click', () => {\n        history.pushState({ page: 1 }, 'title 1', '?page=1');\n      });\n\n      document\n        .getElementById('replaceStateBtn')\n        .addEventListener('click', () => {\n          history.replaceState({ page: 2 }, 'title 2', '?page=2');\n        });\n\n      document.getElementById('backBtn').addEventListener('click', () => {\n        history.back();\n      });\n\n      document.getElementById('forwardBtn').addEventListener('click', () => {\n        history.forward();\n      });\n    <\\/script>\n  </body>\n</html>\n`})}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History_API\",children:\"MDN Web Docs: History API\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/pushState\",children:[\"MDN Web Docs: \",(0,t.jsx)(e.code,{children:\"history.pushState()\"})]})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState\",children:[\"MDN Web Docs: \",(0,t.jsx)(e.code,{children:\"history.replaceState()\"})]})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/back\",children:[\"MDN Web Docs: \",(0,t.jsx)(e.code,{children:\"history.back()\"})]})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/forward\",children:[\"MDN Web Docs: \",(0,t.jsx)(e.code,{children:\"history.forward()\"})]})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/go\",children:[\"MDN Web Docs: \",(0,t.jsx)(e.code,{children:\"history.go()\"})]})}),`\n`]})]})}function k(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(a,n)})):a(n)}var v=k;return f(I);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),w=(n,e)=>{for(var r in e)i(n,r,{get:e[r],enumerable:!0})},d=(n,e,r,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!g.call(n,o)&&o!==r&&i(n,o,{get:()=>e[o],enumerable:!(h=y(e,o))||h.enumerable});return n};var f=(n,e,r)=>(r=n!=null?p(m(n)):{},d(e||!n||!n.__esModule?i(r,\"default\",{value:n,enumerable:!0}):r,n)),S=n=>d(i({},\"__esModule\",{value:!0}),n);var s=b((D,c)=>{c.exports=_jsx_runtime});var v={};w(v,{default:()=>l,frontmatter:()=>k});var t=f(s()),k={title:\"How do you use `window.history` API?\"};function a(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The \",(0,t.jsx)(e.code,{children:\"window.history\"}),\" API allows you to manipulate the browser's session history. You can use \",(0,t.jsx)(e.code,{children:\"history.pushState()\"}),\" to add a new entry to the history stack, \",(0,t.jsx)(e.code,{children:\"history.replaceState()\"}),\" to modify the current entry, and \",(0,t.jsx)(e.code,{children:\"history.back()\"}),\", \",(0,t.jsx)(e.code,{children:\"history.forward()\"}),\", and \",(0,t.jsx)(e.code,{children:\"history.go()\"}),\" to navigate through the history. For example, \",(0,t.jsx)(e.code,{children:'history.pushState({page: 1}, \"title 1\", \"?page=1\")'}),\" adds a new entry to the history.\"]}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsxs)(e.h2,{children:[\"Using the \",(0,t.jsx)(e.code,{children:\"window.history\"}),\" API\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"The \",(0,t.jsx)(e.code,{children:\"window.history\"}),\" API provides methods to interact with the browser's history stack. This can be useful for single-page applications (SPAs) where you want to manage the URL and browser history without causing a full page reload.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Methods\"}),`\n`,(0,t.jsx)(e.h4,{children:(0,t.jsx)(e.code,{children:\"history.pushState()\"})}),`\n`,(0,t.jsx)(e.p,{children:\"This method adds a new entry to the history stack.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`history.pushState({ page: 1 }, 'title 1', '?page=1');\n`})}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"The first parameter is a state object associated with the new history entry.\"}),`\n`,(0,t.jsx)(e.li,{children:\"The second parameter is the title of the new history entry (currently ignored by most browsers).\"}),`\n`,(0,t.jsx)(e.li,{children:\"The third parameter is the URL to be displayed in the address bar.\"}),`\n`]}),`\n`,(0,t.jsx)(e.h4,{children:(0,t.jsx)(e.code,{children:\"history.replaceState()\"})}),`\n`,(0,t.jsx)(e.p,{children:\"This method modifies the current history entry.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`history.replaceState({ page: 2 }, 'title 2', '?page=2');\n`})}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[\"The parameters are the same as \",(0,t.jsx)(e.code,{children:\"pushState()\"}),\", but this method replaces the current entry instead of adding a new one.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h4,{children:(0,t.jsx)(e.code,{children:\"history.back()\"})}),`\n`,(0,t.jsx)(e.p,{children:\"This method moves the user back one entry in the history stack, similar to clicking the browser's back button.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`history.back();\n`})}),`\n`,(0,t.jsx)(e.h4,{children:(0,t.jsx)(e.code,{children:\"history.forward()\"})}),`\n`,(0,t.jsx)(e.p,{children:\"This method moves the user forward one entry in the history stack, similar to clicking the browser's forward button.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`history.forward();\n`})}),`\n`,(0,t.jsx)(e.h4,{children:(0,t.jsx)(e.code,{children:\"history.go()\"})}),`\n`,(0,t.jsx)(e.p,{children:\"This method moves the user a specified number of entries in the history stack.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`// Move back one entry\nhistory.go(-1);\n\n// Move forward one entry\nhistory.go(1);\n\n// Reload the current page\nhistory.go(0);\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Here's a simple example demonstrating the use of \",(0,t.jsx)(e.code,{children:\"pushState\"}),\" and \",(0,t.jsx)(e.code,{children:\"replaceState\"}),\":\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <title>History API Example</title>\n  </head>\n  <body>\n    <button id=\"pushStateBtn\">Push State</button>\n    <button id=\"replaceStateBtn\">Replace State</button>\n    <button id=\"backBtn\">Back</button>\n    <button id=\"forwardBtn\">Forward</button>\n\n    <script>\n      document.getElementById('pushStateBtn').addEventListener('click', () => {\n        history.pushState({ page: 1 }, 'title 1', '?page=1');\n      });\n\n      document\n        .getElementById('replaceStateBtn')\n        .addEventListener('click', () => {\n          history.replaceState({ page: 2 }, 'title 2', '?page=2');\n        });\n\n      document.getElementById('backBtn').addEventListener('click', () => {\n        history.back();\n      });\n\n      document.getElementById('forwardBtn').addEventListener('click', () => {\n        history.forward();\n      });\n    <\\/script>\n  </body>\n</html>\n`})}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History_API\",children:\"MDN Web Docs: History API\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/pushState\",children:[\"MDN Web Docs: \",(0,t.jsx)(e.code,{children:\"history.pushState()\"})]})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState\",children:[\"MDN Web Docs: \",(0,t.jsx)(e.code,{children:\"history.replaceState()\"})]})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/back\",children:[\"MDN Web Docs: \",(0,t.jsx)(e.code,{children:\"history.back()\"})]})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/forward\",children:[\"MDN Web Docs: \",(0,t.jsx)(e.code,{children:\"history.forward()\"})]})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/go\",children:[\"MDN Web Docs: \",(0,t.jsx)(e.code,{children:\"history.go()\"})]})}),`\n`]})]})}function l(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(a,{...n})}):a(n)}return S(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-use-windowhistory-api/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-use-windowhistory-api/zh-CN.json
index f796b939d..ad2d10f40 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-use-windowhistory-api/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-use-windowhistory-api/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-use-windowhistory-api/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},o=(t,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of y(e))!u.call(t,c)&&c!==r&&i(t,c,{get:()=>e[c],enumerable:!(d=p(e,c))||d.enumerable});return t};var S=(t,e,r)=>(r=t!=null?s(g(t)):{},o(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),f=t=>o(i({},\"__esModule\",{value:!0}),t);var l=m((A,h)=>{h.exports=_jsx_runtime});var P={};b(P,{default:()=>D,frontmatter:()=>w});var n=S(l()),w={title:\"\\u5982\\u4F55\\u4F7F\\u7528 `window.history` API\\uFF1F\"};function a(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",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:[\"\\u901A\\u8FC7 \",(0,n.jsx)(e.code,{children:\"window.history\"}),\" API\\uFF0C\\u60A8\\u53EF\\u4EE5\\u64CD\\u4F5C\\u6D4F\\u89C8\\u5668\\u7684\\u4F1A\\u8BDD\\u5386\\u53F2\\u8BB0\\u5F55\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"history.pushState()\"}),\" \\u5411\\u5386\\u53F2\\u5806\\u6808\\u6DFB\\u52A0\\u65B0\\u6761\\u76EE\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"history.replaceState()\"}),\" \\u4FEE\\u6539\\u5F53\\u524D\\u6761\\u76EE\\uFF0C\\u4EE5\\u53CA\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"history.back()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"history.forward()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"history.go()\"}),\" \\u5728\\u5386\\u53F2\\u8BB0\\u5F55\\u4E2D\\u5BFC\\u822A\\u3002\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:'history.pushState({page: 1}, \"title 1\", \"?page=1\")'}),\" \\u5411\\u5386\\u53F2\\u8BB0\\u5F55\\u6DFB\\u52A0\\u4E00\\u4E2A\\u65B0\\u6761\\u76EE\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.history\"}),\" API\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"window.history\"}),\" API \\u63D0\\u4F9B\\u4E86\\u4E0E\\u6D4F\\u89C8\\u5668\\u5386\\u53F2\\u5806\\u6808\\u4EA4\\u4E92\\u7684\\u65B9\\u6CD5\\u3002\\u8FD9\\u5BF9\\u4E8E\\u5355\\u9875\\u5E94\\u7528\\u7A0B\\u5E8F (SPA) \\u5F88\\u6709\\u7528\\uFF0C\\u60A8\\u5E0C\\u671B\\u7BA1\\u7406 URL \\u548C\\u6D4F\\u89C8\\u5668\\u5386\\u53F2\\u8BB0\\u5F55\\uFF0C\\u800C\\u65E0\\u9700\\u5BFC\\u81F4\\u5B8C\\u5168\\u9875\\u9762\\u91CD\\u65B0\\u52A0\\u8F7D\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u65B9\\u6CD5\"}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"history.pushState()\"})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u65B9\\u6CD5\\u5411\\u5386\\u53F2\\u5806\\u6808\\u6DFB\\u52A0\\u4E00\\u4E2A\\u65B0\\u6761\\u76EE\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`history.pushState({ page: 1 }, 'title 1', '?page=1');\n`})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u662F\\u4E0E\\u65B0\\u5386\\u53F2\\u8BB0\\u5F55\\u6761\\u76EE\\u5173\\u8054\\u7684\\u72B6\\u6001\\u5BF9\\u8C61\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u662F\\u65B0\\u5386\\u53F2\\u8BB0\\u5F55\\u6761\\u76EE\\u7684\\u6807\\u9898\\uFF08\\u76EE\\u524D\\u5927\\u591A\\u6570\\u6D4F\\u89C8\\u5668\\u90FD\\u5FFD\\u7565\\uFF09\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u7B2C\\u4E09\\u4E2A\\u53C2\\u6570\\u662F\\u8981\\u663E\\u793A\\u5728\\u5730\\u5740\\u680F\\u4E2D\\u7684 URL\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"history.replaceState()\"})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u65B9\\u6CD5\\u4FEE\\u6539\\u5F53\\u524D\\u5386\\u53F2\\u8BB0\\u5F55\\u6761\\u76EE\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`history.replaceState({ page: 2 }, 'title 2', '?page=2');\n`})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u53C2\\u6570\\u4E0E \",(0,n.jsx)(e.code,{children:\"pushState()\"}),\" \\u76F8\\u540C\\uFF0C\\u4F46\\u6B64\\u65B9\\u6CD5\\u66FF\\u6362\\u5F53\\u524D\\u6761\\u76EE\\uFF0C\\u800C\\u4E0D\\u662F\\u6DFB\\u52A0\\u65B0\\u6761\\u76EE\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"history.back()\"})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u65B9\\u6CD5\\u5C06\\u7528\\u6237\\u5728\\u5386\\u53F2\\u5806\\u6808\\u4E2D\\u540E\\u9000\\u4E00\\u4E2A\\u6761\\u76EE\\uFF0C\\u7C7B\\u4F3C\\u4E8E\\u5355\\u51FB\\u6D4F\\u89C8\\u5668\\u7684\\u540E\\u9000\\u6309\\u94AE\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`history.back();\n`})}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"history.forward()\"})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u65B9\\u6CD5\\u4F7F\\u7528\\u6237\\u5728\\u5386\\u53F2\\u5806\\u6808\\u4E2D\\u5411\\u524D\\u79FB\\u52A8\\u4E00\\u4E2A\\u6761\\u76EE\\uFF0C\\u7C7B\\u4F3C\\u4E8E\\u5355\\u51FB\\u6D4F\\u89C8\\u5668\\u7684\\u524D\\u8FDB\\u6309\\u94AE\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`history.forward();\n`})}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"history.go()\"})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u65B9\\u6CD5\\u5C06\\u7528\\u6237\\u5728\\u5386\\u53F2\\u5806\\u6808\\u4E2D\\u79FB\\u52A8\\u6307\\u5B9A\\u7684\\u6761\\u76EE\\u6570\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Move back one entry\nhistory.go(-1);\n\n// Move forward one entry\nhistory.go(1);\n\n// Reload the current page\nhistory.go(0);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u793A\\u4F8B\\uFF0C\\u6F14\\u793A\\u4E86 \",(0,n.jsx)(e.code,{children:\"pushState\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"replaceState\"}),\" \\u7684\\u7528\\u6CD5\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <title>History API Example</title>\n  </head>\n  <body>\n    <button id=\"pushStateBtn\">Push State</button>\n    <button id=\"replaceStateBtn\">Replace State</button>\n    <button id=\"backBtn\">Back</button>\n    <button id=\"forwardBtn\">Forward</button>\n\n    <script>\n      document.getElementById('pushStateBtn').addEventListener('click', () => {\n        history.pushState({ page: 1 }, 'title 1', '?page=1');\n      });\n\n      document\n        .getElementById('replaceStateBtn')\n        .addEventListener('click', () => {\n          history.replaceState({ page: 2 }, 'title 2', '?page=2');\n        });\n\n      document.getElementById('backBtn').addEventListener('click', () => {\n        history.back();\n      });\n\n      document.getElementById('forwardBtn').addEventListener('click', () => {\n        history.forward();\n      });\n    <\\/script>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/History_API\",children:\"MDN Web Docs: History API\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/pushState\",children:[\"MDN Web Docs: \",(0,n.jsx)(e.code,{children:\"history.pushState()\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState\",children:[\"MDN Web Docs: \",(0,n.jsx)(e.code,{children:\"history.replaceState()\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/back\",children:[\"MDN Web Docs: \",(0,n.jsx)(e.code,{children:\"history.back()\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/forward\",children:[\"MDN Web Docs: \",(0,n.jsx)(e.code,{children:\"history.forward()\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/go\",children:[\"MDN Web Docs: \",(0,n.jsx)(e.code,{children:\"history.go()\"})]})}),`\n`]})]})}function I(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(a,t)})):a(t)}var D=I;return f(P);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var b=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),S=(r,e)=>{for(var t in e)i(r,t,{get:e[t],enumerable:!0})},o=(r,e,t,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of g(e))!m.call(r,c)&&c!==t&&i(r,c,{get:()=>e[c],enumerable:!(d=y(e,c))||d.enumerable});return r};var f=(r,e,t)=>(t=r!=null?p(u(r)):{},o(e||!r||!r.__esModule?i(t,\"default\",{value:r,enumerable:!0}):t,r)),w=r=>o(i({},\"__esModule\",{value:!0}),r);var l=b((k,h)=>{h.exports=_jsx_runtime});var D={};S(D,{default:()=>s,frontmatter:()=>I});var n=f(l()),I={title:\"\\u5982\\u4F55\\u4F7F\\u7528 `window.history` API\\uFF1F\"};function a(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u901A\\u8FC7 \",(0,n.jsx)(e.code,{children:\"window.history\"}),\" API\\uFF0C\\u60A8\\u53EF\\u4EE5\\u64CD\\u4F5C\\u6D4F\\u89C8\\u5668\\u7684\\u4F1A\\u8BDD\\u5386\\u53F2\\u8BB0\\u5F55\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"history.pushState()\"}),\" \\u5411\\u5386\\u53F2\\u5806\\u6808\\u6DFB\\u52A0\\u65B0\\u6761\\u76EE\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"history.replaceState()\"}),\" \\u4FEE\\u6539\\u5F53\\u524D\\u6761\\u76EE\\uFF0C\\u4EE5\\u53CA\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"history.back()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"history.forward()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"history.go()\"}),\" \\u5728\\u5386\\u53F2\\u8BB0\\u5F55\\u4E2D\\u5BFC\\u822A\\u3002\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:'history.pushState({page: 1}, \"title 1\", \"?page=1\")'}),\" \\u5411\\u5386\\u53F2\\u8BB0\\u5F55\\u6DFB\\u52A0\\u4E00\\u4E2A\\u65B0\\u6761\\u76EE\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.history\"}),\" API\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"window.history\"}),\" API \\u63D0\\u4F9B\\u4E86\\u4E0E\\u6D4F\\u89C8\\u5668\\u5386\\u53F2\\u5806\\u6808\\u4EA4\\u4E92\\u7684\\u65B9\\u6CD5\\u3002\\u8FD9\\u5BF9\\u4E8E\\u5355\\u9875\\u5E94\\u7528\\u7A0B\\u5E8F (SPA) \\u5F88\\u6709\\u7528\\uFF0C\\u60A8\\u5E0C\\u671B\\u7BA1\\u7406 URL \\u548C\\u6D4F\\u89C8\\u5668\\u5386\\u53F2\\u8BB0\\u5F55\\uFF0C\\u800C\\u65E0\\u9700\\u5BFC\\u81F4\\u5B8C\\u5168\\u9875\\u9762\\u91CD\\u65B0\\u52A0\\u8F7D\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u65B9\\u6CD5\"}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"history.pushState()\"})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u65B9\\u6CD5\\u5411\\u5386\\u53F2\\u5806\\u6808\\u6DFB\\u52A0\\u4E00\\u4E2A\\u65B0\\u6761\\u76EE\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`history.pushState({ page: 1 }, 'title 1', '?page=1');\n`})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u662F\\u4E0E\\u65B0\\u5386\\u53F2\\u8BB0\\u5F55\\u6761\\u76EE\\u5173\\u8054\\u7684\\u72B6\\u6001\\u5BF9\\u8C61\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u662F\\u65B0\\u5386\\u53F2\\u8BB0\\u5F55\\u6761\\u76EE\\u7684\\u6807\\u9898\\uFF08\\u76EE\\u524D\\u5927\\u591A\\u6570\\u6D4F\\u89C8\\u5668\\u90FD\\u5FFD\\u7565\\uFF09\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u7B2C\\u4E09\\u4E2A\\u53C2\\u6570\\u662F\\u8981\\u663E\\u793A\\u5728\\u5730\\u5740\\u680F\\u4E2D\\u7684 URL\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"history.replaceState()\"})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u65B9\\u6CD5\\u4FEE\\u6539\\u5F53\\u524D\\u5386\\u53F2\\u8BB0\\u5F55\\u6761\\u76EE\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`history.replaceState({ page: 2 }, 'title 2', '?page=2');\n`})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u53C2\\u6570\\u4E0E \",(0,n.jsx)(e.code,{children:\"pushState()\"}),\" \\u76F8\\u540C\\uFF0C\\u4F46\\u6B64\\u65B9\\u6CD5\\u66FF\\u6362\\u5F53\\u524D\\u6761\\u76EE\\uFF0C\\u800C\\u4E0D\\u662F\\u6DFB\\u52A0\\u65B0\\u6761\\u76EE\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"history.back()\"})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u65B9\\u6CD5\\u5C06\\u7528\\u6237\\u5728\\u5386\\u53F2\\u5806\\u6808\\u4E2D\\u540E\\u9000\\u4E00\\u4E2A\\u6761\\u76EE\\uFF0C\\u7C7B\\u4F3C\\u4E8E\\u5355\\u51FB\\u6D4F\\u89C8\\u5668\\u7684\\u540E\\u9000\\u6309\\u94AE\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`history.back();\n`})}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"history.forward()\"})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u65B9\\u6CD5\\u4F7F\\u7528\\u6237\\u5728\\u5386\\u53F2\\u5806\\u6808\\u4E2D\\u5411\\u524D\\u79FB\\u52A8\\u4E00\\u4E2A\\u6761\\u76EE\\uFF0C\\u7C7B\\u4F3C\\u4E8E\\u5355\\u51FB\\u6D4F\\u89C8\\u5668\\u7684\\u524D\\u8FDB\\u6309\\u94AE\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`history.forward();\n`})}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"history.go()\"})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u65B9\\u6CD5\\u5C06\\u7528\\u6237\\u5728\\u5386\\u53F2\\u5806\\u6808\\u4E2D\\u79FB\\u52A8\\u6307\\u5B9A\\u7684\\u6761\\u76EE\\u6570\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Move back one entry\nhistory.go(-1);\n\n// Move forward one entry\nhistory.go(1);\n\n// Reload the current page\nhistory.go(0);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u793A\\u4F8B\\uFF0C\\u6F14\\u793A\\u4E86 \",(0,n.jsx)(e.code,{children:\"pushState\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"replaceState\"}),\" \\u7684\\u7528\\u6CD5\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <title>History API Example</title>\n  </head>\n  <body>\n    <button id=\"pushStateBtn\">Push State</button>\n    <button id=\"replaceStateBtn\">Replace State</button>\n    <button id=\"backBtn\">Back</button>\n    <button id=\"forwardBtn\">Forward</button>\n\n    <script>\n      document.getElementById('pushStateBtn').addEventListener('click', () => {\n        history.pushState({ page: 1 }, 'title 1', '?page=1');\n      });\n\n      document\n        .getElementById('replaceStateBtn')\n        .addEventListener('click', () => {\n          history.replaceState({ page: 2 }, 'title 2', '?page=2');\n        });\n\n      document.getElementById('backBtn').addEventListener('click', () => {\n        history.back();\n      });\n\n      document.getElementById('forwardBtn').addEventListener('click', () => {\n        history.forward();\n      });\n    <\\/script>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/History_API\",children:\"MDN Web Docs: History API\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/pushState\",children:[\"MDN Web Docs: \",(0,n.jsx)(e.code,{children:\"history.pushState()\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState\",children:[\"MDN Web Docs: \",(0,n.jsx)(e.code,{children:\"history.replaceState()\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/back\",children:[\"MDN Web Docs: \",(0,n.jsx)(e.code,{children:\"history.back()\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/forward\",children:[\"MDN Web Docs: \",(0,n.jsx)(e.code,{children:\"history.forward()\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/History/go\",children:[\"MDN Web Docs: \",(0,n.jsx)(e.code,{children:\"history.go()\"})]})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(a,{...r})}):a(r)}return w(D);})();\n;return Component;"
 }
\ No newline at end of file
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 50668fccf..ea23fba45 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var g=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),v=(i,e)=>{for(var t in e)o(i,t,{get:e[t],enumerable:!0})},d=(i,e,t,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of m(e))!y.call(i,l)&&l!==t&&o(i,l,{get:()=>e[l],enumerable:!(a=u(e,l))||a.enumerable});return i};var f=(i,e,t)=>(t=i!=null?h(p(i)):{},d(e||!i||!i.__esModule?o(t,\"default\",{value:i,enumerable:!0}):t,i)),V=i=>d(o({},\"__esModule\",{value:!0}),i);var r=g((I,s)=>{s.exports=_jsx_runtime});var w={};v(w,{default:()=>k,frontmatter:()=>b});var n=f(r()),b={title:\"How do you validate form elements using the Constraint Validation API?\"};function c(i){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The Constraint Validation API provides a way to validate form elements in HTML. You can use properties like \",(0,n.jsx)(e.code,{children:\"validity\"}),\", \",(0,n.jsx)(e.code,{children:\"validationMessage\"}),\", and methods like \",(0,n.jsx)(e.code,{children:\"checkValidity()\"}),\" and \",(0,n.jsx)(e.code,{children:\"setCustomValidity()\"}),\". For example, to check if an input is valid, you can use:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\nif (input.checkValidity()) {\n  console.log('Input is valid');\n} else {\n  console.log(input.validationMessage);\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How do you validate form elements using the Constraint Validation API?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Introduction\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Constraint Validation API is a set of methods and properties available on form elements that allow you to perform validation checks and provide feedback to users. This API is built into HTML5 and provides a way to validate form inputs without needing to write custom JavaScript validation logic.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Key properties and methods\"}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"checkValidity()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"checkValidity()\"}),\" method checks if an element meets all its validation constraints. It returns \",(0,n.jsx)(e.code,{children:\"true\"}),\" if the element is valid and \",(0,n.jsx)(e.code,{children:\"false\"}),\" otherwise.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\nif (input.checkValidity()) {\n  console.log('Input is valid');\n} else {\n  console.log('Input is invalid');\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"reportValidity()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"reportValidity()\"}),\" method works like \",(0,n.jsx)(e.code,{children:\"checkValidity()\"}),\" but also displays the browser's default validation message if the element is invalid.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\nif (!input.reportValidity()) {\n  console.log('Input is invalid');\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"setCustomValidity()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"setCustomValidity()\"}),\" method allows you to set a custom validation message. If a custom message is set, the element will be considered invalid.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\ninput.setCustomValidity('This field is required');\nif (!input.checkValidity()) {\n  console.log(input.validationMessage); // Outputs: This field is required\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"validity\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"validity\"}),\" property is an object that contains several boolean properties indicating the validity state of the element, such as \",(0,n.jsx)(e.code,{children:\"valid\"}),\", \",(0,n.jsx)(e.code,{children:\"valueMissing\"}),\", \",(0,n.jsx)(e.code,{children:\"typeMismatch\"}),\", etc.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\nif (input.validity.valueMissing) {\n  console.log('Value is missing');\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"validationMessage\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"validationMessage\"}),\" property returns the message that will be shown to the user if the element is invalid.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\nif (!input.checkValidity()) {\n  console.log(input.validationMessage);\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here is a complete example that demonstrates how to use the Constraint Validation API to validate a form:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<form id=\"myForm\">\n  <input type=\"text\" id=\"username\" required />\n  <input type=\"submit\" value=\"Submit\" />\n</form>\n\n<script>\n  const form = document.getElementById('myForm');\n  const username = document.getElementById('username');\n\n  form.addEventListener('submit', function (event) {\n    if (!username.checkValidity()) {\n      username.setCustomValidity('Username is required');\n      username.reportValidity();\n      event.preventDefault();\n    } else {\n      username.setCustomValidity(''); // Clear custom message\n    }\n  });\n<\\/script>\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the form will not submit if the \",(0,n.jsx)(e.code,{children:\"username\"}),\" input is empty, and a custom validation message will be displayed.\"]}),`\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/Web/Guide/HTML/Constraint_validation\",children:\"MDN Web Docs: Constraint Validation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/checkValidity\",children:\"MDN Web Docs: HTMLFormElement.checkValidity()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity\",children:\"MDN Web Docs: HTMLObjectElement.setCustomValidity()\"})}),`\n`]})]})}function M(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(c,i)})):c(i)}var k=M;return V(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),f=(i,e)=>{for(var t in e)o(i,t,{get:e[t],enumerable:!0})},d=(i,e,t,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of p(e))!g.call(i,l)&&l!==t&&o(i,l,{get:()=>e[l],enumerable:!(a=m(e,l))||a.enumerable});return i};var V=(i,e,t)=>(t=i!=null?u(y(i)):{},d(e||!i||!i.__esModule?o(t,\"default\",{value:i,enumerable:!0}):t,i)),b=i=>d(o({},\"__esModule\",{value:!0}),i);var r=v((C,s)=>{s.exports=_jsx_runtime});var k={};f(k,{default:()=>h,frontmatter:()=>M});var n=V(r()),M={title:\"How do you validate form elements using the Constraint Validation API?\"};function c(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The Constraint Validation API provides a way to validate form elements in HTML. You can use properties like \",(0,n.jsx)(e.code,{children:\"validity\"}),\", \",(0,n.jsx)(e.code,{children:\"validationMessage\"}),\", and methods like \",(0,n.jsx)(e.code,{children:\"checkValidity()\"}),\" and \",(0,n.jsx)(e.code,{children:\"setCustomValidity()\"}),\". For example, to check if an input is valid, you can use:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\nif (input.checkValidity()) {\n  console.log('Input is valid');\n} else {\n  console.log(input.validationMessage);\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How do you validate form elements using the Constraint Validation API?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Introduction\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Constraint Validation API is a set of methods and properties available on form elements that allow you to perform validation checks and provide feedback to users. This API is built into HTML5 and provides a way to validate form inputs without needing to write custom JavaScript validation logic.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Key properties and methods\"}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"checkValidity()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"checkValidity()\"}),\" method checks if an element meets all its validation constraints. It returns \",(0,n.jsx)(e.code,{children:\"true\"}),\" if the element is valid and \",(0,n.jsx)(e.code,{children:\"false\"}),\" otherwise.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\nif (input.checkValidity()) {\n  console.log('Input is valid');\n} else {\n  console.log('Input is invalid');\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"reportValidity()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"reportValidity()\"}),\" method works like \",(0,n.jsx)(e.code,{children:\"checkValidity()\"}),\" but also displays the browser's default validation message if the element is invalid.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\nif (!input.reportValidity()) {\n  console.log('Input is invalid');\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"setCustomValidity()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"setCustomValidity()\"}),\" method allows you to set a custom validation message. If a custom message is set, the element will be considered invalid.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\ninput.setCustomValidity('This field is required');\nif (!input.checkValidity()) {\n  console.log(input.validationMessage); // Outputs: This field is required\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"validity\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"validity\"}),\" property is an object that contains several boolean properties indicating the validity state of the element, such as \",(0,n.jsx)(e.code,{children:\"valid\"}),\", \",(0,n.jsx)(e.code,{children:\"valueMissing\"}),\", \",(0,n.jsx)(e.code,{children:\"typeMismatch\"}),\", etc.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\nif (input.validity.valueMissing) {\n  console.log('Value is missing');\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"validationMessage\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"validationMessage\"}),\" property returns the message that will be shown to the user if the element is invalid.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\nif (!input.checkValidity()) {\n  console.log(input.validationMessage);\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here is a complete example that demonstrates how to use the Constraint Validation API to validate a form:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<form id=\"myForm\">\n  <input type=\"text\" id=\"username\" required />\n  <input type=\"submit\" value=\"Submit\" />\n</form>\n\n<script>\n  const form = document.getElementById('myForm');\n  const username = document.getElementById('username');\n\n  form.addEventListener('submit', function (event) {\n    if (!username.checkValidity()) {\n      username.setCustomValidity('Username is required');\n      username.reportValidity();\n      event.preventDefault();\n    } else {\n      username.setCustomValidity(''); // Clear custom message\n    }\n  });\n<\\/script>\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the form will not submit if the \",(0,n.jsx)(e.code,{children:\"username\"}),\" input is empty, and a custom validation message will be displayed.\"]}),`\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/Web/Guide/HTML/Constraint_validation\",children:\"MDN Web Docs: Constraint Validation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/checkValidity\",children:\"MDN Web Docs: HTMLFormElement.checkValidity()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity\",children:\"MDN Web Docs: HTMLObjectElement.setCustomValidity()\"})}),`\n`]})]})}function h(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(c,{...i})}):c(i)}return b(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-validate-form-elements-using-the-constraint-validation-api/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-validate-form-elements-using-the-constraint-validation-api/zh-CN.json
index aecee04b9..8112b2fda 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-validate-form-elements-using-the-constraint-validation-api/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-validate-form-elements-using-the-constraint-validation-api/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),v=(i,e)=>{for(var t in e)l(i,t,{get:e[t],enumerable:!0})},r=(i,e,t,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!g.call(i,c)&&c!==t&&l(i,c,{get:()=>e[c],enumerable:!(d=u(e,c))||d.enumerable});return i};var V=(i,e,t)=>(t=i!=null?h(m(i)):{},r(e||!i||!i.__esModule?l(t,\"default\",{value:i,enumerable:!0}):t,i)),f=i=>r(l({},\"__esModule\",{value:!0}),i);var s=y((N,o)=>{o.exports=_jsx_runtime});var I={};v(I,{default:()=>j,frontmatter:()=>M});var n=V(s()),M={title:\"\\u5982\\u4F55\\u4F7F\\u7528\\u7EA6\\u675F\\u9A8C\\u8BC1 API \\u9A8C\\u8BC1\\u8868\\u5355\\u5143\\u7D20\\uFF1F\"};function a(i){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u7EA6\\u675F\\u9A8C\\u8BC1 API \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u9A8C\\u8BC1 HTML \\u8868\\u5355\\u5143\\u7D20\\u7684\\u65B9\\u6CD5\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"validity\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"validationMessage\"}),\" \\u7B49\\u5C5E\\u6027\\u4EE5\\u53CA \",(0,n.jsx)(e.code,{children:\"checkValidity()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"setCustomValidity()\"}),\" \\u7B49\\u65B9\\u6CD5\\u3002\\u4F8B\\u5982\\uFF0C\\u8981\\u68C0\\u67E5\\u8F93\\u5165\\u662F\\u5426\\u6709\\u6548\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\nif (input.checkValidity()) {\n  console.log('Input is valid');\n} else {\n  console.log(input.validationMessage);\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u4F7F\\u7528\\u7EA6\\u675F\\u9A8C\\u8BC1 API \\u9A8C\\u8BC1\\u8868\\u5355\\u5143\\u7D20\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7B80\\u4ECB\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u7EA6\\u675F\\u9A8C\\u8BC1 API \\u662F\\u4E00\\u7EC4\\u5728\\u8868\\u5355\\u5143\\u7D20\\u4E0A\\u53EF\\u7528\\u7684\\u65B9\\u6CD5\\u548C\\u5C5E\\u6027\\uFF0C\\u5141\\u8BB8\\u60A8\\u6267\\u884C\\u9A8C\\u8BC1\\u68C0\\u67E5\\u5E76\\u5411\\u7528\\u6237\\u63D0\\u4F9B\\u53CD\\u9988\\u3002\\u6B64 API \\u5185\\u7F6E\\u4E8E HTML5 \\u4E2D\\uFF0C\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u9A8C\\u8BC1\\u8868\\u5355\\u8F93\\u5165\\u7684\\u65B9\\u6CD5\\uFF0C\\u800C\\u65E0\\u9700\\u7F16\\u5199\\u81EA\\u5B9A\\u4E49 JavaScript \\u9A8C\\u8BC1\\u903B\\u8F91\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5173\\u952E\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\"}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"checkValidity()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"checkValidity()\"}),\" \\u65B9\\u6CD5\\u68C0\\u67E5\\u5143\\u7D20\\u662F\\u5426\\u6EE1\\u8DB3\\u5176\\u6240\\u6709\\u9A8C\\u8BC1\\u7EA6\\u675F\\u3002\\u5982\\u679C\\u5143\\u7D20\\u6709\\u6548\\uFF0C\\u5219\\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\uFF0C\\u5426\\u5219\\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:\"false\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\nif (input.checkValidity()) {\n  console.log('Input is valid');\n} else {\n  console.log('Input is invalid');\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"reportValidity()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"reportValidity()\"}),\" \\u65B9\\u6CD5\\u7684\\u5DE5\\u4F5C\\u65B9\\u5F0F\\u4E0E \",(0,n.jsx)(e.code,{children:\"checkValidity()\"}),\" \\u7C7B\\u4F3C\\uFF0C\\u4F46\\u5982\\u679C\\u5143\\u7D20\\u65E0\\u6548\\uFF0C\\u5B83\\u8FD8\\u4F1A\\u663E\\u793A\\u6D4F\\u89C8\\u5668\\u7684\\u9ED8\\u8BA4\\u9A8C\\u8BC1\\u6D88\\u606F\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\nif (!input.reportValidity()) {\n  console.log('Input is invalid');\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"setCustomValidity()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"setCustomValidity()\"}),\" \\u65B9\\u6CD5\\u5141\\u8BB8\\u60A8\\u8BBE\\u7F6E\\u81EA\\u5B9A\\u4E49\\u9A8C\\u8BC1\\u6D88\\u606F\\u3002\\u5982\\u679C\\u8BBE\\u7F6E\\u4E86\\u81EA\\u5B9A\\u4E49\\u6D88\\u606F\\uFF0C\\u5219\\u8BE5\\u5143\\u7D20\\u5C06\\u88AB\\u89C6\\u4E3A\\u65E0\\u6548\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\ninput.setCustomValidity('This field is required');\nif (!input.checkValidity()) {\n  console.log(input.validationMessage); // Outputs: This field is required\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"validity\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"validity\"}),\" \\u5C5E\\u6027\\u662F\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u5305\\u542B\\u51E0\\u4E2A\\u5E03\\u5C14\\u5C5E\\u6027\\uFF0C\\u6307\\u793A\\u5143\\u7D20\\u7684\\u6709\\u6548\\u6027\\u72B6\\u6001\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"valid\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"valueMissing\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"typeMismatch\"}),\" \\u7B49\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\nif (input.validity.valueMissing) {\n  console.log('Value is missing');\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"validationMessage\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u5143\\u7D20\\u65E0\\u6548\\uFF0C\",(0,n.jsx)(e.code,{children:\"validationMessage\"}),\" \\u5C5E\\u6027\\u5C06\\u8FD4\\u56DE\\u5C06\\u5411\\u7528\\u6237\\u663E\\u793A\\u7684\\u6D88\\u606F\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\nif (!input.checkValidity()) {\n  console.log(input.validationMessage);\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u5B8C\\u6574\\u7684\\u793A\\u4F8B\\uFF0C\\u6F14\\u793A\\u4E86\\u5982\\u4F55\\u4F7F\\u7528\\u7EA6\\u675F\\u9A8C\\u8BC1 API \\u6765\\u9A8C\\u8BC1\\u8868\\u5355\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<form id=\"myForm\">\n  <input type=\"text\" id=\"username\" required />\n  <input type=\"submit\" value=\"Submit\" />\n</form>\n\n<script>\n  const form = document.getElementById('myForm');\n  const username = document.getElementById('username');\n\n  form.addEventListener('submit', function (event) {\n    if (!username.checkValidity()) {\n      username.setCustomValidity('Username is required');\n      username.reportValidity();\n      event.preventDefault();\n    } else {\n      username.setCustomValidity(''); // Clear custom message\n    }\n  });\n<\\/script>\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u5982\\u679C \",(0,n.jsx)(e.code,{children:\"username\"}),\" \\u8F93\\u5165\\u4E3A\\u7A7A\\uFF0C\\u5219\\u8868\\u5355\\u5C06\\u4E0D\\u4F1A\\u63D0\\u4EA4\\uFF0C\\u5E76\\u4E14\\u5C06\\u663E\\u793A\\u81EA\\u5B9A\\u4E49\\u9A8C\\u8BC1\\u6D88\\u606F\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Constraint_validation\",children:\"MDN Web Docs: Constraint Validation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLFormElement/checkValidity\",children:\"MDN Web Docs: HTMLFormElement.checkValidity()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLObjectElement/setCustomValidity\",children:\"MDN Web Docs: HTMLObjectElement.setCustomValidity()\"})}),`\n`]})]})}function C(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(a,i)})):a(i)}var j=C;return f(I);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),V=(i,e)=>{for(var l in e)c(i,l,{get:e[l],enumerable:!0})},r=(i,e,l,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of m(e))!g.call(i,t)&&t!==l&&c(i,t,{get:()=>e[t],enumerable:!(d=p(e,t))||d.enumerable});return i};var f=(i,e,l)=>(l=i!=null?u(y(i)):{},r(e||!i||!i.__esModule?c(l,\"default\",{value:i,enumerable:!0}):l,i)),M=i=>r(c({},\"__esModule\",{value:!0}),i);var s=v((N,o)=>{o.exports=_jsx_runtime});var I={};V(I,{default:()=>h,frontmatter:()=>C});var n=f(s()),C={title:\"\\u5982\\u4F55\\u4F7F\\u7528\\u7EA6\\u675F\\u9A8C\\u8BC1 API \\u9A8C\\u8BC1\\u8868\\u5355\\u5143\\u7D20\\uFF1F\"};function a(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u7EA6\\u675F\\u9A8C\\u8BC1 API \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u9A8C\\u8BC1 HTML \\u8868\\u5355\\u5143\\u7D20\\u7684\\u65B9\\u6CD5\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"validity\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"validationMessage\"}),\" \\u7B49\\u5C5E\\u6027\\u4EE5\\u53CA \",(0,n.jsx)(e.code,{children:\"checkValidity()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"setCustomValidity()\"}),\" \\u7B49\\u65B9\\u6CD5\\u3002\\u4F8B\\u5982\\uFF0C\\u8981\\u68C0\\u67E5\\u8F93\\u5165\\u662F\\u5426\\u6709\\u6548\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\nif (input.checkValidity()) {\n  console.log('Input is valid');\n} else {\n  console.log(input.validationMessage);\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u4F7F\\u7528\\u7EA6\\u675F\\u9A8C\\u8BC1 API \\u9A8C\\u8BC1\\u8868\\u5355\\u5143\\u7D20\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7B80\\u4ECB\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u7EA6\\u675F\\u9A8C\\u8BC1 API \\u662F\\u4E00\\u7EC4\\u5728\\u8868\\u5355\\u5143\\u7D20\\u4E0A\\u53EF\\u7528\\u7684\\u65B9\\u6CD5\\u548C\\u5C5E\\u6027\\uFF0C\\u5141\\u8BB8\\u60A8\\u6267\\u884C\\u9A8C\\u8BC1\\u68C0\\u67E5\\u5E76\\u5411\\u7528\\u6237\\u63D0\\u4F9B\\u53CD\\u9988\\u3002\\u6B64 API \\u5185\\u7F6E\\u4E8E HTML5 \\u4E2D\\uFF0C\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u9A8C\\u8BC1\\u8868\\u5355\\u8F93\\u5165\\u7684\\u65B9\\u6CD5\\uFF0C\\u800C\\u65E0\\u9700\\u7F16\\u5199\\u81EA\\u5B9A\\u4E49 JavaScript \\u9A8C\\u8BC1\\u903B\\u8F91\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5173\\u952E\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\"}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"checkValidity()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"checkValidity()\"}),\" \\u65B9\\u6CD5\\u68C0\\u67E5\\u5143\\u7D20\\u662F\\u5426\\u6EE1\\u8DB3\\u5176\\u6240\\u6709\\u9A8C\\u8BC1\\u7EA6\\u675F\\u3002\\u5982\\u679C\\u5143\\u7D20\\u6709\\u6548\\uFF0C\\u5219\\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\uFF0C\\u5426\\u5219\\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:\"false\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\nif (input.checkValidity()) {\n  console.log('Input is valid');\n} else {\n  console.log('Input is invalid');\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"reportValidity()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"reportValidity()\"}),\" \\u65B9\\u6CD5\\u7684\\u5DE5\\u4F5C\\u65B9\\u5F0F\\u4E0E \",(0,n.jsx)(e.code,{children:\"checkValidity()\"}),\" \\u7C7B\\u4F3C\\uFF0C\\u4F46\\u5982\\u679C\\u5143\\u7D20\\u65E0\\u6548\\uFF0C\\u5B83\\u8FD8\\u4F1A\\u663E\\u793A\\u6D4F\\u89C8\\u5668\\u7684\\u9ED8\\u8BA4\\u9A8C\\u8BC1\\u6D88\\u606F\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\nif (!input.reportValidity()) {\n  console.log('Input is invalid');\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"setCustomValidity()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"setCustomValidity()\"}),\" \\u65B9\\u6CD5\\u5141\\u8BB8\\u60A8\\u8BBE\\u7F6E\\u81EA\\u5B9A\\u4E49\\u9A8C\\u8BC1\\u6D88\\u606F\\u3002\\u5982\\u679C\\u8BBE\\u7F6E\\u4E86\\u81EA\\u5B9A\\u4E49\\u6D88\\u606F\\uFF0C\\u5219\\u8BE5\\u5143\\u7D20\\u5C06\\u88AB\\u89C6\\u4E3A\\u65E0\\u6548\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\ninput.setCustomValidity('This field is required');\nif (!input.checkValidity()) {\n  console.log(input.validationMessage); // Outputs: This field is required\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"validity\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"validity\"}),\" \\u5C5E\\u6027\\u662F\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u5305\\u542B\\u51E0\\u4E2A\\u5E03\\u5C14\\u5C5E\\u6027\\uFF0C\\u6307\\u793A\\u5143\\u7D20\\u7684\\u6709\\u6548\\u6027\\u72B6\\u6001\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"valid\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"valueMissing\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"typeMismatch\"}),\" \\u7B49\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\nif (input.validity.valueMissing) {\n  console.log('Value is missing');\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:(0,n.jsx)(e.code,{children:\"validationMessage\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u5143\\u7D20\\u65E0\\u6548\\uFF0C\",(0,n.jsx)(e.code,{children:\"validationMessage\"}),\" \\u5C5E\\u6027\\u5C06\\u8FD4\\u56DE\\u5C06\\u5411\\u7528\\u6237\\u663E\\u793A\\u7684\\u6D88\\u606F\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\nif (!input.checkValidity()) {\n  console.log(input.validationMessage);\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u5B8C\\u6574\\u7684\\u793A\\u4F8B\\uFF0C\\u6F14\\u793A\\u4E86\\u5982\\u4F55\\u4F7F\\u7528\\u7EA6\\u675F\\u9A8C\\u8BC1 API \\u6765\\u9A8C\\u8BC1\\u8868\\u5355\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<form id=\"myForm\">\n  <input type=\"text\" id=\"username\" required />\n  <input type=\"submit\" value=\"Submit\" />\n</form>\n\n<script>\n  const form = document.getElementById('myForm');\n  const username = document.getElementById('username');\n\n  form.addEventListener('submit', function (event) {\n    if (!username.checkValidity()) {\n      username.setCustomValidity('Username is required');\n      username.reportValidity();\n      event.preventDefault();\n    } else {\n      username.setCustomValidity(''); // Clear custom message\n    }\n  });\n<\\/script>\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u5982\\u679C \",(0,n.jsx)(e.code,{children:\"username\"}),\" \\u8F93\\u5165\\u4E3A\\u7A7A\\uFF0C\\u5219\\u8868\\u5355\\u5C06\\u4E0D\\u4F1A\\u63D0\\u4EA4\\uFF0C\\u5E76\\u4E14\\u5C06\\u663E\\u793A\\u81EA\\u5B9A\\u4E49\\u9A8C\\u8BC1\\u6D88\\u606F\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Constraint_validation\",children:\"MDN Web Docs: Constraint Validation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLFormElement/checkValidity\",children:\"MDN Web Docs: HTMLFormElement.checkValidity()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLObjectElement/setCustomValidity\",children:\"MDN Web Docs: HTMLObjectElement.setCustomValidity()\"})}),`\n`]})]})}function h(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(a,{...i})}):a(i)}return M(I);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-write-unit-tests-for-javascript-code/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-write-unit-tests-for-javascript-code/en-US.json
index e2d169db0..114af2374 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-write-unit-tests-for-javascript-code/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-write-unit-tests-for-javascript-code/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-write-unit-tests-for-javascript-code/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),j=(t,e)=>{for(var s in e)o(t,s,{get:e[s],enumerable:!0})},r=(t,e,s,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!f.call(t,c)&&c!==s&&o(t,c,{get:()=>e[c],enumerable:!(i=u(e,c))||i.enumerable});return t};var x=(t,e,s)=>(s=t!=null?h(m(t)):{},r(e||!t||!t.__esModule?o(s,\"default\",{value:t,enumerable:!0}):s,t)),y=t=>r(o({},\"__esModule\",{value:!0}),t);var d=g((J,a)=>{a.exports=_jsx_runtime});var v={};j(v,{default:()=>b,frontmatter:()=>k});var n=x(d()),k={title:\"How do you write unit tests for JavaScript code?\"};function l(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",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:[\"To write unit tests for JavaScript code, you typically use a testing framework like Jest or Mocha. First, you set up your testing environment by installing the necessary libraries. Then, you write test cases using functions like \",(0,n.jsx)(e.code,{children:\"describe\"}),\", \",(0,n.jsx)(e.code,{children:\"it\"}),\", or \",(0,n.jsx)(e.code,{children:\"test\"}),\" to define your tests. Each test case should focus on a small, isolated piece of functionality. You use assertions to check if the output of your code matches the expected result.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Example using Jest:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// sum.js\nfunction sum(a, b) {\n  return a + b;\n}\nmodule.exports = sum;\n\n// sum.test.js\nconst sum = require('./sum');\n\ntest('adds 1 + 2 to equal 3', () => {\n  expect(sum(1, 2)).toBe(3);\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Setting up the testing environment\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Installing Jest\"}),`\n`,(0,n.jsx)(e.p,{children:\"To get started with Jest, you need to install it via npm:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`npm install --save-dev jest\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Configuring Jest\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Add a script to your \",(0,n.jsx)(e.code,{children:\"package.json\"}),\" to run Jest:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"scripts\": {\n    \"test\": \"jest\"\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Writing test cases\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Basic structure\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A test file typically contains one or more \",(0,n.jsx)(e.code,{children:\"describe\"}),\" blocks, which group related tests, and \",(0,n.jsx)(e.code,{children:\"it\"}),\" or \",(0,n.jsx)(e.code,{children:\"test\"}),\" blocks, which define individual test cases.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// sum.js\nfunction sum(a, b) {\n  return a + b;\n}\nmodule.exports = sum;\n\n// sum.test.js\nconst sum = require('./sum');\n\ndescribe('sum function', () => {\n  test('adds 1 + 2 to equal 3', () => {\n    expect(sum(1, 2)).toBe(3);\n  });\n\n  test('adds -1 + 1 to equal 0', () => {\n    expect(sum(-1, 1)).toBe(0);\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Using assertions\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Assertions are used to check if the output of your code matches the expected result. Jest provides various assertion methods like \",(0,n.jsx)(e.code,{children:\"toBe\"}),\", \",(0,n.jsx)(e.code,{children:\"toEqual\"}),\", \",(0,n.jsx)(e.code,{children:\"toBeNull\"}),\", etc.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`test('object assignment', () => {\n  const data = { one: 1 };\n  data['two'] = 2;\n  expect(data).toEqual({ one: 1, two: 2 });\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Mocking dependencies\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Sometimes, you need to mock dependencies to isolate the unit of code you are testing. Jest provides functions like \",(0,n.jsx)(e.code,{children:\"jest.fn()\"}),\" and \",(0,n.jsx)(e.code,{children:\"jest.mock()\"}),\" for this purpose.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// fetchData.js\nconst fetch = require('node-fetch');\n\nasync function fetchData(url) {\n  const response = await fetch(url);\n  return response.json();\n}\nmodule.exports = fetchData;\n\n// fetchData.test.js\nconst fetchData = require('./fetchData');\nconst fetch = require('node-fetch');\n\njest.mock('node-fetch');\n\ntest('fetches data from API', async () => {\n  const mockResponse = { data: '12345' };\n  fetch.mockResolvedValueOnce({\n    json: async () => mockResponse,\n  });\n\n  const data = await fetchData('https://api.example.com/data');\n  expect(data).toEqual(mockResponse);\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Running the tests\"}),`\n`,(0,n.jsx)(e.p,{children:\"To run your tests, use the following command:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`npm test\n`})}),`\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://jestjs.io/docs/getting-started\",children:\"Jest documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://mochajs.org/\",children:\"Mocha documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.chaijs.com/\",children:\"Chai documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://sinonjs.org/\",children:\"Sinon documentation\"})}),`\n`]})]})}function w(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=w;return y(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var j=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var s in e)o(t,s,{get:e[s],enumerable:!0})},r=(t,e,s,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!g.call(t,c)&&c!==s&&o(t,c,{get:()=>e[c],enumerable:!(i=p(e,c))||i.enumerable});return t};var y=(t,e,s)=>(s=t!=null?u(f(t)):{},r(e||!t||!t.__esModule?o(s,\"default\",{value:t,enumerable:!0}):s,t)),k=t=>r(o({},\"__esModule\",{value:!0}),t);var d=j((q,a)=>{a.exports=_jsx_runtime});var b={};x(b,{default:()=>h,frontmatter:()=>w});var n=y(d()),w={title:\"How do you write unit tests for JavaScript code?\"};function l(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To write unit tests for JavaScript code, you typically use a testing framework like Jest or Mocha. First, you set up your testing environment by installing the necessary libraries. Then, you write test cases using functions like \",(0,n.jsx)(e.code,{children:\"describe\"}),\", \",(0,n.jsx)(e.code,{children:\"it\"}),\", or \",(0,n.jsx)(e.code,{children:\"test\"}),\" to define your tests. Each test case should focus on a small, isolated piece of functionality. You use assertions to check if the output of your code matches the expected result.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Example using Jest:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// sum.js\nfunction sum(a, b) {\n  return a + b;\n}\nmodule.exports = sum;\n\n// sum.test.js\nconst sum = require('./sum');\n\ntest('adds 1 + 2 to equal 3', () => {\n  expect(sum(1, 2)).toBe(3);\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Setting up the testing environment\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Installing Jest\"}),`\n`,(0,n.jsx)(e.p,{children:\"To get started with Jest, you need to install it via npm:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`npm install --save-dev jest\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Configuring Jest\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Add a script to your \",(0,n.jsx)(e.code,{children:\"package.json\"}),\" to run Jest:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"scripts\": {\n    \"test\": \"jest\"\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Writing test cases\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Basic structure\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A test file typically contains one or more \",(0,n.jsx)(e.code,{children:\"describe\"}),\" blocks, which group related tests, and \",(0,n.jsx)(e.code,{children:\"it\"}),\" or \",(0,n.jsx)(e.code,{children:\"test\"}),\" blocks, which define individual test cases.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// sum.js\nfunction sum(a, b) {\n  return a + b;\n}\nmodule.exports = sum;\n\n// sum.test.js\nconst sum = require('./sum');\n\ndescribe('sum function', () => {\n  test('adds 1 + 2 to equal 3', () => {\n    expect(sum(1, 2)).toBe(3);\n  });\n\n  test('adds -1 + 1 to equal 0', () => {\n    expect(sum(-1, 1)).toBe(0);\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Using assertions\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Assertions are used to check if the output of your code matches the expected result. Jest provides various assertion methods like \",(0,n.jsx)(e.code,{children:\"toBe\"}),\", \",(0,n.jsx)(e.code,{children:\"toEqual\"}),\", \",(0,n.jsx)(e.code,{children:\"toBeNull\"}),\", etc.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`test('object assignment', () => {\n  const data = { one: 1 };\n  data['two'] = 2;\n  expect(data).toEqual({ one: 1, two: 2 });\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Mocking dependencies\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Sometimes, you need to mock dependencies to isolate the unit of code you are testing. Jest provides functions like \",(0,n.jsx)(e.code,{children:\"jest.fn()\"}),\" and \",(0,n.jsx)(e.code,{children:\"jest.mock()\"}),\" for this purpose.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// fetchData.js\nconst fetch = require('node-fetch');\n\nasync function fetchData(url) {\n  const response = await fetch(url);\n  return response.json();\n}\nmodule.exports = fetchData;\n\n// fetchData.test.js\nconst fetchData = require('./fetchData');\nconst fetch = require('node-fetch');\n\njest.mock('node-fetch');\n\ntest('fetches data from API', async () => {\n  const mockResponse = { data: '12345' };\n  fetch.mockResolvedValueOnce({\n    json: async () => mockResponse,\n  });\n\n  const data = await fetchData('https://api.example.com/data');\n  expect(data).toEqual(mockResponse);\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Running the tests\"}),`\n`,(0,n.jsx)(e.p,{children:\"To run your tests, use the following command:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`npm test\n`})}),`\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://jestjs.io/docs/getting-started\",children:\"Jest documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://mochajs.org/\",children:\"Mocha documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.chaijs.com/\",children:\"Chai documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://sinonjs.org/\",children:\"Sinon documentation\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}return k(b);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-write-unit-tests-for-javascript-code/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-do-you-write-unit-tests-for-javascript-code/zh-CN.json
index 670a2f005..d21e55f24 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-write-unit-tests-for-javascript-code/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-write-unit-tests-for-javascript-code/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-write-unit-tests-for-javascript-code/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var i=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var c in e)r(t,c,{get:e[c],enumerable:!0})},d=(t,e,c,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!j.call(t,s)&&s!==c&&r(t,s,{get:()=>e[s],enumerable:!(a=u(e,s))||a.enumerable});return t};var x=(t,e,c)=>(c=t!=null?i(m(t)):{},d(e||!t||!t.__esModule?r(c,\"default\",{value:t,enumerable:!0}):c,t)),b=t=>d(r({},\"__esModule\",{value:!0}),t);var o=f((k,h)=>{h.exports=_jsx_runtime});var w={};g(w,{default:()=>D,frontmatter:()=>q});var n=x(o()),q={title:\"\\u5982\\u4F55\\u4E3A JavaScript \\u4EE3\\u7801\\u7F16\\u5199\\u5355\\u5143\\u6D4B\\u8BD5\\uFF1F\"};function l(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u4E3A JavaScript \\u4EE3\\u7801\\u7F16\\u5199\\u5355\\u5143\\u6D4B\\u8BD5\\uFF0C\\u60A8\\u901A\\u5E38\\u4F7F\\u7528 Jest \\u6216 Mocha \\u7B49\\u6D4B\\u8BD5\\u6846\\u67B6\\u3002\\u9996\\u5148\\uFF0C\\u60A8\\u901A\\u8FC7\\u5B89\\u88C5\\u5FC5\\u8981\\u7684\\u5E93\\u6765\\u8BBE\\u7F6E\\u6D4B\\u8BD5\\u73AF\\u5883\\u3002\\u7136\\u540E\\uFF0C\\u60A8\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"describe\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"it\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"test\"}),\" \\u7B49\\u51FD\\u6570\\u7F16\\u5199\\u6D4B\\u8BD5\\u7528\\u4F8B\\u6765\\u5B9A\\u4E49\\u60A8\\u7684\\u6D4B\\u8BD5\\u3002\\u6BCF\\u4E2A\\u6D4B\\u8BD5\\u7528\\u4F8B\\u90FD\\u5E94\\u4FA7\\u91CD\\u4E8E\\u4E00\\u5C0F\\u6BB5\\u5B64\\u7ACB\\u7684\\u529F\\u80FD\\u3002\\u60A8\\u4F7F\\u7528\\u65AD\\u8A00\\u6765\\u68C0\\u67E5\\u4EE3\\u7801\\u7684\\u8F93\\u51FA\\u662F\\u5426\\u4E0E\\u9884\\u671F\\u7ED3\\u679C\\u5339\\u914D\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4F7F\\u7528 Jest \\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// sum.js\nfunction sum(a, b) {\n  return a + b;\n}\nmodule.exports = sum;\n\n// sum.test.js\nconst sum = require('./sum');\n\ntest('adds 1 + 2 to equal 3', () => {\n  expect(sum(1, 2)).toBe(3);\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u8BBE\\u7F6E\\u6D4B\\u8BD5\\u73AF\\u5883\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B89\\u88C5 Jest\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8981\\u5F00\\u59CB\\u4F7F\\u7528 Jest\\uFF0C\\u60A8\\u9700\\u8981\\u901A\\u8FC7 npm \\u5B89\\u88C5\\u5B83\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`npm install --save-dev jest\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u914D\\u7F6E Jest\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5C06\\u811A\\u672C\\u6DFB\\u52A0\\u5230\\u60A8\\u7684 \",(0,n.jsx)(e.code,{children:\"package.json\"}),\" \\u4EE5\\u8FD0\\u884C Jest\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"scripts\": {\n    \"test\": \"jest\"\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7F16\\u5199\\u6D4B\\u8BD5\\u7528\\u4F8B\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u57FA\\u672C\\u7ED3\\u6784\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6D4B\\u8BD5\\u6587\\u4EF6\\u901A\\u5E38\\u5305\\u542B\\u4E00\\u4E2A\\u6216\\u591A\\u4E2A \",(0,n.jsx)(e.code,{children:\"describe\"}),\" \\u5757\\uFF08\\u7528\\u4E8E\\u5206\\u7EC4\\u76F8\\u5173\\u6D4B\\u8BD5\\uFF09\\u548C \",(0,n.jsx)(e.code,{children:\"it\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"test\"}),\" \\u5757\\uFF08\\u7528\\u4E8E\\u5B9A\\u4E49\\u5355\\u4E2A\\u6D4B\\u8BD5\\u7528\\u4F8B\\uFF09\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// sum.js\nfunction sum(a, b) {\n  return a + b;\n}\nmodule.exports = sum;\n\n// sum.test.js\nconst sum = require('./sum');\n\ndescribe('sum function', () => {\n  test('adds 1 + 2 to equal 3', () => {\n    expect(sum(1, 2)).toBe(3);\n  });\n\n  test('adds -1 + 1 to equal 0', () => {\n    expect(sum(-1, 1)).toBe(0);\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u65AD\\u8A00\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u65AD\\u8A00\\u7528\\u4E8E\\u68C0\\u67E5\\u4EE3\\u7801\\u7684\\u8F93\\u51FA\\u662F\\u5426\\u4E0E\\u9884\\u671F\\u7ED3\\u679C\\u5339\\u914D\\u3002Jest \\u63D0\\u4F9B\\u4E86\\u5404\\u79CD\\u65AD\\u8A00\\u65B9\\u6CD5\\uFF0C\\u5982 \",(0,n.jsx)(e.code,{children:\"toBe\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"toEqual\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"toBeNull\"}),\" \\u7B49\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`test('object assignment', () => {\n  const data = { one: 1 };\n  data['two'] = 2;\n  expect(data).toEqual({ one: 1, two: 2 });\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6A21\\u62DF\\u4F9D\\u8D56\\u9879\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6709\\u65F6\\uFF0C\\u60A8\\u9700\\u8981\\u6A21\\u62DF\\u4F9D\\u8D56\\u9879\\u4EE5\\u9694\\u79BB\\u60A8\\u6B63\\u5728\\u6D4B\\u8BD5\\u7684\\u4EE3\\u7801\\u5355\\u5143\\u3002 Jest \\u63D0\\u4F9B\\u4E86 \",(0,n.jsx)(e.code,{children:\"jest.fn()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"jest.mock()\"}),\" \\u7B49\\u529F\\u80FD\\u6765\\u5B9E\\u73B0\\u6B64\\u76EE\\u7684\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// fetchData.js\nconst fetch = require('node-fetch');\n\nasync function fetchData(url) {\n  const response = await fetch(url);\n  return response.json();\n}\nmodule.exports = fetchData;\n\n// fetchData.test.js\nconst fetchData = require('./fetchData');\nconst fetch = require('node-fetch');\n\njest.mock('node-fetch');\n\ntest('fetches data from API', async () => {\n  const mockResponse = { data: '12345' };\n  fetch.mockResolvedValueOnce({\n    json: async () => mockResponse,\n  });\n\n  const data = await fetchData('https://api.example.com/data');\n  expect(data).toEqual(mockResponse);\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u8FD0\\u884C\\u6D4B\\u8BD5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8981\\u8FD0\\u884C\\u6D4B\\u8BD5\\uFF0C\\u8BF7\\u4F7F\\u7528\\u4EE5\\u4E0B\\u547D\\u4EE4\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`npm test\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jestjs.io/docs/getting-started\",children:\"Jest \\u6587\\u6863\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://mochajs.org/\",children:\"Mocha \\u6587\\u6863\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.chaijs.com/\",children:\"Chai \\u6587\\u6863\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://sinonjs.org/\",children:\"Sinon \\u6587\\u6863\"})}),`\n`]})]})}function J(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(l,t)})):l(t)}var D=J;return b(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var c in e)r(t,c,{get:e[c],enumerable:!0})},d=(t,e,c,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!j.call(t,s)&&s!==c&&r(t,s,{get:()=>e[s],enumerable:!(a=p(e,s))||a.enumerable});return t};var q=(t,e,c)=>(c=t!=null?u(f(t)):{},d(e||!t||!t.__esModule?r(c,\"default\",{value:t,enumerable:!0}):c,t)),J=t=>d(r({},\"__esModule\",{value:!0}),t);var o=g((N,h)=>{h.exports=_jsx_runtime});var D={};x(D,{default:()=>i,frontmatter:()=>b});var n=q(o()),b={title:\"\\u5982\\u4F55\\u4E3A JavaScript \\u4EE3\\u7801\\u7F16\\u5199\\u5355\\u5143\\u6D4B\\u8BD5\\uFF1F\"};function l(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u4E3A JavaScript \\u4EE3\\u7801\\u7F16\\u5199\\u5355\\u5143\\u6D4B\\u8BD5\\uFF0C\\u60A8\\u901A\\u5E38\\u4F7F\\u7528 Jest \\u6216 Mocha \\u7B49\\u6D4B\\u8BD5\\u6846\\u67B6\\u3002\\u9996\\u5148\\uFF0C\\u60A8\\u901A\\u8FC7\\u5B89\\u88C5\\u5FC5\\u8981\\u7684\\u5E93\\u6765\\u8BBE\\u7F6E\\u6D4B\\u8BD5\\u73AF\\u5883\\u3002\\u7136\\u540E\\uFF0C\\u60A8\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"describe\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"it\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"test\"}),\" \\u7B49\\u51FD\\u6570\\u7F16\\u5199\\u6D4B\\u8BD5\\u7528\\u4F8B\\u6765\\u5B9A\\u4E49\\u60A8\\u7684\\u6D4B\\u8BD5\\u3002\\u6BCF\\u4E2A\\u6D4B\\u8BD5\\u7528\\u4F8B\\u90FD\\u5E94\\u4FA7\\u91CD\\u4E8E\\u4E00\\u5C0F\\u6BB5\\u5B64\\u7ACB\\u7684\\u529F\\u80FD\\u3002\\u60A8\\u4F7F\\u7528\\u65AD\\u8A00\\u6765\\u68C0\\u67E5\\u4EE3\\u7801\\u7684\\u8F93\\u51FA\\u662F\\u5426\\u4E0E\\u9884\\u671F\\u7ED3\\u679C\\u5339\\u914D\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4F7F\\u7528 Jest \\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// sum.js\nfunction sum(a, b) {\n  return a + b;\n}\nmodule.exports = sum;\n\n// sum.test.js\nconst sum = require('./sum');\n\ntest('adds 1 + 2 to equal 3', () => {\n  expect(sum(1, 2)).toBe(3);\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u8BBE\\u7F6E\\u6D4B\\u8BD5\\u73AF\\u5883\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B89\\u88C5 Jest\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8981\\u5F00\\u59CB\\u4F7F\\u7528 Jest\\uFF0C\\u60A8\\u9700\\u8981\\u901A\\u8FC7 npm \\u5B89\\u88C5\\u5B83\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`npm install --save-dev jest\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u914D\\u7F6E Jest\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5C06\\u811A\\u672C\\u6DFB\\u52A0\\u5230\\u60A8\\u7684 \",(0,n.jsx)(e.code,{children:\"package.json\"}),\" \\u4EE5\\u8FD0\\u884C Jest\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"scripts\": {\n    \"test\": \"jest\"\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7F16\\u5199\\u6D4B\\u8BD5\\u7528\\u4F8B\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u57FA\\u672C\\u7ED3\\u6784\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6D4B\\u8BD5\\u6587\\u4EF6\\u901A\\u5E38\\u5305\\u542B\\u4E00\\u4E2A\\u6216\\u591A\\u4E2A \",(0,n.jsx)(e.code,{children:\"describe\"}),\" \\u5757\\uFF08\\u7528\\u4E8E\\u5206\\u7EC4\\u76F8\\u5173\\u6D4B\\u8BD5\\uFF09\\u548C \",(0,n.jsx)(e.code,{children:\"it\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"test\"}),\" \\u5757\\uFF08\\u7528\\u4E8E\\u5B9A\\u4E49\\u5355\\u4E2A\\u6D4B\\u8BD5\\u7528\\u4F8B\\uFF09\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// sum.js\nfunction sum(a, b) {\n  return a + b;\n}\nmodule.exports = sum;\n\n// sum.test.js\nconst sum = require('./sum');\n\ndescribe('sum function', () => {\n  test('adds 1 + 2 to equal 3', () => {\n    expect(sum(1, 2)).toBe(3);\n  });\n\n  test('adds -1 + 1 to equal 0', () => {\n    expect(sum(-1, 1)).toBe(0);\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u65AD\\u8A00\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u65AD\\u8A00\\u7528\\u4E8E\\u68C0\\u67E5\\u4EE3\\u7801\\u7684\\u8F93\\u51FA\\u662F\\u5426\\u4E0E\\u9884\\u671F\\u7ED3\\u679C\\u5339\\u914D\\u3002Jest \\u63D0\\u4F9B\\u4E86\\u5404\\u79CD\\u65AD\\u8A00\\u65B9\\u6CD5\\uFF0C\\u5982 \",(0,n.jsx)(e.code,{children:\"toBe\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"toEqual\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"toBeNull\"}),\" \\u7B49\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`test('object assignment', () => {\n  const data = { one: 1 };\n  data['two'] = 2;\n  expect(data).toEqual({ one: 1, two: 2 });\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6A21\\u62DF\\u4F9D\\u8D56\\u9879\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6709\\u65F6\\uFF0C\\u60A8\\u9700\\u8981\\u6A21\\u62DF\\u4F9D\\u8D56\\u9879\\u4EE5\\u9694\\u79BB\\u60A8\\u6B63\\u5728\\u6D4B\\u8BD5\\u7684\\u4EE3\\u7801\\u5355\\u5143\\u3002 Jest \\u63D0\\u4F9B\\u4E86 \",(0,n.jsx)(e.code,{children:\"jest.fn()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"jest.mock()\"}),\" \\u7B49\\u529F\\u80FD\\u6765\\u5B9E\\u73B0\\u6B64\\u76EE\\u7684\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// fetchData.js\nconst fetch = require('node-fetch');\n\nasync function fetchData(url) {\n  const response = await fetch(url);\n  return response.json();\n}\nmodule.exports = fetchData;\n\n// fetchData.test.js\nconst fetchData = require('./fetchData');\nconst fetch = require('node-fetch');\n\njest.mock('node-fetch');\n\ntest('fetches data from API', async () => {\n  const mockResponse = { data: '12345' };\n  fetch.mockResolvedValueOnce({\n    json: async () => mockResponse,\n  });\n\n  const data = await fetchData('https://api.example.com/data');\n  expect(data).toEqual(mockResponse);\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u8FD0\\u884C\\u6D4B\\u8BD5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8981\\u8FD0\\u884C\\u6D4B\\u8BD5\\uFF0C\\u8BF7\\u4F7F\\u7528\\u4EE5\\u4E0B\\u547D\\u4EE4\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`npm test\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jestjs.io/docs/getting-started\",children:\"Jest \\u6587\\u6863\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://mochajs.org/\",children:\"Mocha \\u6587\\u6863\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.chaijs.com/\",children:\"Chai \\u6587\\u6863\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://sinonjs.org/\",children:\"Sinon \\u6587\\u6863\"})}),`\n`]})]})}function i(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}return J(D);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-does-hoisting-affect-function-declarations-and-expressions/en-US.json b/apps/web/src/__generated__/questions/quiz/how-does-hoisting-affect-function-declarations-and-expressions/en-US.json
index 11450eddd..1264279f7 100644
--- a/apps/web/src/__generated__/questions/quiz/how-does-hoisting-affect-function-declarations-and-expressions/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-does-hoisting-affect-function-declarations-and-expressions/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-does-hoisting-affect-function-declarations-and-expressions/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),m=(o,e)=>{for(var i in e)r(o,i,{get:e[i],enumerable:!0})},s=(o,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of f(e))!g.call(o,t)&&t!==i&&r(o,t,{get:()=>e[t],enumerable:!(c=u(e,t))||c.enumerable});return o};var v=(o,e,i)=>(i=o!=null?d(p(o)):{},s(e||!o||!o.__esModule?r(i,\"default\",{value:o,enumerable:!0}):i,o)),x=o=>s(r({},\"__esModule\",{value:!0}),o);var l=b((D,a)=>{a.exports=_jsx_runtime});var T={};m(T,{default:()=>H,frontmatter:()=>w});var n=v(l()),w={title:\"How does hoisting affect function declarations and expressions?\"};function h(o){let e=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hoisting in JavaScript means that function declarations are moved to the top of their containing scope during the compile phase, making them available throughout the entire scope. This allows you to call a function before it is defined in the code. However, function expressions are not hoisted in the same way. If you try to call a function expression before it is defined, you will get an error because the variable holding the function is hoisted but not its assignment.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Function declaration\nconsole.log(foo()); // Works fine\nfunction foo() {\n  return 'Hello';\n}\n\n// Function expression\nconsole.log(bar()); // Throws TypeError: bar is not a function\nvar bar = function () {\n  return 'Hello';\n};\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Hoisting in JavaScript\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Function declarations\"}),`\n`,(0,n.jsx)(e.p,{children:\"Function declarations are hoisted to the top of their containing scope. This means you can call the function before it is defined in the code.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(foo()); // Works fine\nfunction foo() {\n  return 'Hello';\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In the example above, the function \",(0,n.jsx)(e.code,{children:\"foo\"}),\" is hoisted to the top of its scope, so calling \",(0,n.jsx)(e.code,{children:\"foo()\"}),\" before its definition works without any issues.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Function expressions\"}),`\n`,(0,n.jsx)(e.p,{children:\"Function expressions, on the other hand, are not hoisted in the same way. The variable that holds the function is hoisted, but its assignment is not. This means that if you try to call a function expression before it is defined, you will get an error.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(bar()); // Throws TypeError: bar is not a function\nvar bar = function () {\n  return 'Hello';\n};\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the variable \",(0,n.jsx)(e.code,{children:\"bar\"}),\" is hoisted to the top of its scope, but the assignment \",(0,n.jsx)(e.code,{children:\"function() { return 'Hello'; }\"}),\" is not. Therefore, calling \",(0,n.jsx)(e.code,{children:\"bar()\"}),\" before the assignment results in a \",(0,n.jsx)(e.code,{children:\"TypeError\"}),\".\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Differences between \",(0,n.jsx)(e.code,{children:\"var\"}),\", \",(0,n.jsx)(e.code,{children:\"let\"}),\", and \",(0,n.jsx)(e.code,{children:\"const\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"It's also important to note the differences in hoisting behavior between \",(0,n.jsx)(e.code,{children:\"var\"}),\", \",(0,n.jsx)(e.code,{children:\"let\"}),\", and \",(0,n.jsx)(e.code,{children:\"const\"}),\" when used with function expressions.\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\": The variable is hoisted and initialized with \",(0,n.jsx)(e.code,{children:\"undefined\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\": The variables are hoisted but not initialized, leading to a \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\" if accessed before initialization.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(baz); // undefined\nvar baz = function () {\n  return 'Hello';\n};\n\nconsole.log(qux); // ReferenceError: Cannot access 'qux' before initialization\nlet qux = function () {\n  return 'Hello';\n};\n\nconsole.log(quux); // ReferenceError: Cannot access 'quux' before initialization\nconst quux = function () {\n  return 'Hello';\n};\n`})}),`\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/Hoisting\",children:\"MDN Web Docs on Hoisting\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/var#var-hoisting\",children:\"JavaScript.info on Hoisting\"})}),`\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:\"MDN Web Docs on Function Declarations\"})}),`\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:\"MDN Web Docs on Function Expressions\"})}),`\n`]})]})}function y(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(h,o)})):h(o)}var H=y;return x(T);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var m=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),v=(o,e)=>{for(var i in e)r(o,i,{get:e[i],enumerable:!0})},s=(o,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of p(e))!b.call(o,t)&&t!==i&&r(o,t,{get:()=>e[t],enumerable:!(c=f(e,t))||c.enumerable});return o};var x=(o,e,i)=>(i=o!=null?u(g(o)):{},s(e||!o||!o.__esModule?r(i,\"default\",{value:o,enumerable:!0}):i,o)),w=o=>s(r({},\"__esModule\",{value:!0}),o);var a=m((D,l)=>{l.exports=_jsx_runtime});var H={};v(H,{default:()=>d,frontmatter:()=>y});var n=x(a()),y={title:\"How does hoisting affect function declarations and expressions?\"};function h(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hoisting in JavaScript means that function declarations are moved to the top of their containing scope during the compile phase, making them available throughout the entire scope. This allows you to call a function before it is defined in the code. However, function expressions are not hoisted in the same way. If you try to call a function expression before it is defined, you will get an error because the variable holding the function is hoisted but not its assignment.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Function declaration\nconsole.log(foo()); // Works fine\nfunction foo() {\n  return 'Hello';\n}\n\n// Function expression\nconsole.log(bar()); // Throws TypeError: bar is not a function\nvar bar = function () {\n  return 'Hello';\n};\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Hoisting in JavaScript\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Function declarations\"}),`\n`,(0,n.jsx)(e.p,{children:\"Function declarations are hoisted to the top of their containing scope. This means you can call the function before it is defined in the code.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(foo()); // Works fine\nfunction foo() {\n  return 'Hello';\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In the example above, the function \",(0,n.jsx)(e.code,{children:\"foo\"}),\" is hoisted to the top of its scope, so calling \",(0,n.jsx)(e.code,{children:\"foo()\"}),\" before its definition works without any issues.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Function expressions\"}),`\n`,(0,n.jsx)(e.p,{children:\"Function expressions, on the other hand, are not hoisted in the same way. The variable that holds the function is hoisted, but its assignment is not. This means that if you try to call a function expression before it is defined, you will get an error.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(bar()); // Throws TypeError: bar is not a function\nvar bar = function () {\n  return 'Hello';\n};\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the variable \",(0,n.jsx)(e.code,{children:\"bar\"}),\" is hoisted to the top of its scope, but the assignment \",(0,n.jsx)(e.code,{children:\"function() { return 'Hello'; }\"}),\" is not. Therefore, calling \",(0,n.jsx)(e.code,{children:\"bar()\"}),\" before the assignment results in a \",(0,n.jsx)(e.code,{children:\"TypeError\"}),\".\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Differences between \",(0,n.jsx)(e.code,{children:\"var\"}),\", \",(0,n.jsx)(e.code,{children:\"let\"}),\", and \",(0,n.jsx)(e.code,{children:\"const\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"It's also important to note the differences in hoisting behavior between \",(0,n.jsx)(e.code,{children:\"var\"}),\", \",(0,n.jsx)(e.code,{children:\"let\"}),\", and \",(0,n.jsx)(e.code,{children:\"const\"}),\" when used with function expressions.\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\": The variable is hoisted and initialized with \",(0,n.jsx)(e.code,{children:\"undefined\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\": The variables are hoisted but not initialized, leading to a \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\" if accessed before initialization.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(baz); // undefined\nvar baz = function () {\n  return 'Hello';\n};\n\nconsole.log(qux); // ReferenceError: Cannot access 'qux' before initialization\nlet qux = function () {\n  return 'Hello';\n};\n\nconsole.log(quux); // ReferenceError: Cannot access 'quux' before initialization\nconst quux = function () {\n  return 'Hello';\n};\n`})}),`\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/Hoisting\",children:\"MDN Web Docs on Hoisting\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/var#var-hoisting\",children:\"JavaScript.info on Hoisting\"})}),`\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:\"MDN Web Docs on Function Declarations\"})}),`\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:\"MDN Web Docs on Function Expressions\"})}),`\n`]})]})}function d(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(h,{...o})}):h(o)}return w(H);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-does-hoisting-affect-function-declarations-and-expressions/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-does-hoisting-affect-function-declarations-and-expressions/zh-CN.json
index 1458f2654..75cf942c2 100644
--- a/apps/web/src/__generated__/questions/quiz/how-does-hoisting-affect-function-declarations-and-expressions/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-does-hoisting-affect-function-declarations-and-expressions/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-does-hoisting-affect-function-declarations-and-expressions/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var H=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),v=(o,n)=>{for(var r in n)c(o,r,{get:n[r],enumerable:!0})},t=(o,n,r,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of g(n))!p.call(o,i)&&i!==r&&c(o,i,{get:()=>n[i],enumerable:!(l=u(n,i))||l.enumerable});return o};var b=(o,n,r)=>(r=o!=null?h(f(o)):{},t(n||!o||!o.__esModule?c(r,\"default\",{value:o,enumerable:!0}):r,o)),m=o=>t(c({},\"__esModule\",{value:!0}),o);var d=H((E,s)=>{s.exports=_jsx_runtime});var S={};v(S,{default:()=>D,frontmatter:()=>x});var e=b(d()),x={title:\"Hoisting \\u5982\\u4F55\\u5F71\\u54CD\\u51FD\\u6570\\u58F0\\u660E\\u548C\\u8868\\u8FBE\\u5F0F\\uFF1F\"};function a(o){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684 Hoisting \\u610F\\u5473\\u7740\\u51FD\\u6570\\u58F0\\u660E\\u5728\\u7F16\\u8BD1\\u9636\\u6BB5\\u88AB\\u79FB\\u52A8\\u5230\\u5176\\u5305\\u542B\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\uFF0C\\u4F7F\\u5176\\u5728\\u6574\\u4E2A\\u4F5C\\u7528\\u57DF\\u4E2D\\u53EF\\u7528\\u3002\\u8FD9\\u5141\\u8BB8\\u60A8\\u5728\\u4EE3\\u7801\\u4E2D\\u5B9A\\u4E49\\u51FD\\u6570\\u4E4B\\u524D\\u8C03\\u7528\\u5B83\\u3002\\u4F46\\u662F\\uFF0C\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u4E0D\\u4F1A\\u4EE5\\u76F8\\u540C\\u7684\\u65B9\\u5F0F\\u88AB Hoisting\\u3002\\u5982\\u679C\\u60A8\\u5C1D\\u8BD5\\u5728\\u5B9A\\u4E49\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u4E4B\\u524D\\u8C03\\u7528\\u5B83\\uFF0C\\u60A8\\u5C06\\u6536\\u5230\\u4E00\\u4E2A\\u9519\\u8BEF\\uFF0C\\u56E0\\u4E3A\\u4FDD\\u5B58\\u51FD\\u6570\\u7684\\u53D8\\u91CF\\u88AB Hoisting\\uFF0C\\u4F46\\u5176\\u8D4B\\u503C\\u6CA1\\u6709\\u88AB Hoisting\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Function declaration\nconsole.log(foo()); // Works fine\nfunction foo() {\n  return 'Hello';\n}\n\n// Function expression\nconsole.log(bar()); // Throws TypeError: bar is not a function\nvar bar = function () {\n  return 'Hello';\n};\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"JavaScript \\u4E2D\\u7684 Hoisting\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u58F0\\u660E\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51FD\\u6570\\u58F0\\u660E\\u88AB Hoisting \\u5230\\u5176\\u5305\\u542B\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u60A8\\u53EF\\u4EE5\\u5728\\u4EE3\\u7801\\u4E2D\\u5B9A\\u4E49\\u51FD\\u6570\\u4E4B\\u524D\\u8C03\\u7528\\u8BE5\\u51FD\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`console.log(foo()); // Works fine\nfunction foo() {\n  return 'Hello';\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u4E0A\\u9762\\u7684\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u51FD\\u6570 \",(0,e.jsx)(n.code,{children:\"foo\"}),\" \\u88AB Hoisting \\u5230\\u5176\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\uFF0C\\u56E0\\u6B64\\u5728\\u5B9A\\u4E49\\u4E4B\\u524D\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"foo()\"}),\" \\u53EF\\u4EE5\\u6B63\\u5E38\\u5DE5\\u4F5C\\uFF0C\\u6CA1\\u6709\\u4EFB\\u4F55\\u95EE\\u9898\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u4E0D\\u4F1A\\u4EE5\\u76F8\\u540C\\u7684\\u65B9\\u5F0F\\u88AB Hoisting\\u3002\\u4FDD\\u5B58\\u51FD\\u6570\\u7684\\u53D8\\u91CF\\u88AB Hoisting\\uFF0C\\u4F46\\u5176\\u8D4B\\u503C\\u6CA1\\u6709\\u88AB Hoisting\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u5982\\u679C\\u60A8\\u5C1D\\u8BD5\\u5728\\u5B9A\\u4E49\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u4E4B\\u524D\\u8C03\\u7528\\u5B83\\uFF0C\\u60A8\\u5C06\\u6536\\u5230\\u4E00\\u4E2A\\u9519\\u8BEF\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`console.log(bar()); // Throws TypeError: bar is not a function\nvar bar = function () {\n  return 'Hello';\n};\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u53D8\\u91CF \",(0,e.jsx)(n.code,{children:\"bar\"}),\" \\u88AB Hoisting \\u5230\\u5176\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\uFF0C\\u4F46\\u8D4B\\u503C \",(0,e.jsx)(n.code,{children:\"function() { return 'Hello'; }\"}),\" \\u6CA1\\u6709\\u88AB Hoisting\\u3002\\u56E0\\u6B64\\uFF0C\\u5728\\u8D4B\\u503C\\u4E4B\\u524D\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"bar()\"}),\" \\u4F1A\\u5BFC\\u81F4 \",(0,e.jsx)(n.code,{children:\"TypeError\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[(0,e.jsx)(n.code,{children:\"var\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"let\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"const\"}),\" \\u4E4B\\u95F4\\u7684\\u533A\\u522B\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u4F7F\\u7528\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u65F6\\uFF0C\\u6CE8\\u610F \",(0,e.jsx)(n.code,{children:\"var\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"let\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"const\"}),\" \\u4E4B\\u95F4\\u7684 Hoisting \\u884C\\u4E3A\\u5DEE\\u5F02\\u4E5F\\u5F88\\u91CD\\u8981\\u3002\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"var\"}),\"\\uFF1A\\u53D8\\u91CF\\u88AB Hoisting \\u5E76\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"undefined\"}),\" \\u521D\\u59CB\\u5316\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"let\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"const\"}),\"\\uFF1A\\u53D8\\u91CF\\u88AB Hoisting \\u4F46\\u672A\\u521D\\u59CB\\u5316\\uFF0C\\u5982\\u679C\\u5728\\u521D\\u59CB\\u5316\\u4E4B\\u524D\\u8BBF\\u95EE\\uFF0C\\u5219\\u4F1A\\u5BFC\\u81F4 \",(0,e.jsx)(n.code,{children:\"ReferenceError\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`console.log(baz); // undefined\nvar baz = function () {\n  return 'Hello';\n};\n\nconsole.log(qux); // ReferenceError: Cannot access 'qux' before initialization\nlet qux = function () {\n  return 'Hello';\n};\n\nconsole.log(quux); // ReferenceError: Cannot access 'quux' before initialization\nconst quux = function () {\n  return 'Hello';\n};\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Hoisting\",children:\"MDN Web Docs on Hoisting\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/var#var-hoisting\",children:\"JavaScript.info on Hoisting\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\",children:\"MDN Web Docs on Function Declarations\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function\",children:\"MDN Web Docs on Function Expressions\"})}),`\n`]})]})}function j(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,Object.assign({},o,{children:(0,e.jsx)(a,o)})):a(o)}var D=j;return m(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var v=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),b=(o,n)=>{for(var r in n)c(o,r,{get:n[r],enumerable:!0})},t=(o,n,r,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of g(n))!H.call(o,i)&&i!==r&&c(o,i,{get:()=>n[i],enumerable:!(l=f(n,i))||l.enumerable});return o};var m=(o,n,r)=>(r=o!=null?u(p(o)):{},t(n||!o||!o.__esModule?c(r,\"default\",{value:o,enumerable:!0}):r,o)),x=o=>t(c({},\"__esModule\",{value:!0}),o);var d=v((z,s)=>{s.exports=_jsx_runtime});var D={};b(D,{default:()=>h,frontmatter:()=>j});var e=m(d()),j={title:\"Hoisting \\u5982\\u4F55\\u5F71\\u54CD\\u51FD\\u6570\\u58F0\\u660E\\u548C\\u8868\\u8FBE\\u5F0F\\uFF1F\"};function a(o){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684 Hoisting \\u610F\\u5473\\u7740\\u51FD\\u6570\\u58F0\\u660E\\u5728\\u7F16\\u8BD1\\u9636\\u6BB5\\u88AB\\u79FB\\u52A8\\u5230\\u5176\\u5305\\u542B\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\uFF0C\\u4F7F\\u5176\\u5728\\u6574\\u4E2A\\u4F5C\\u7528\\u57DF\\u4E2D\\u53EF\\u7528\\u3002\\u8FD9\\u5141\\u8BB8\\u60A8\\u5728\\u4EE3\\u7801\\u4E2D\\u5B9A\\u4E49\\u51FD\\u6570\\u4E4B\\u524D\\u8C03\\u7528\\u5B83\\u3002\\u4F46\\u662F\\uFF0C\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u4E0D\\u4F1A\\u4EE5\\u76F8\\u540C\\u7684\\u65B9\\u5F0F\\u88AB Hoisting\\u3002\\u5982\\u679C\\u60A8\\u5C1D\\u8BD5\\u5728\\u5B9A\\u4E49\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u4E4B\\u524D\\u8C03\\u7528\\u5B83\\uFF0C\\u60A8\\u5C06\\u6536\\u5230\\u4E00\\u4E2A\\u9519\\u8BEF\\uFF0C\\u56E0\\u4E3A\\u4FDD\\u5B58\\u51FD\\u6570\\u7684\\u53D8\\u91CF\\u88AB Hoisting\\uFF0C\\u4F46\\u5176\\u8D4B\\u503C\\u6CA1\\u6709\\u88AB Hoisting\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Function declaration\nconsole.log(foo()); // Works fine\nfunction foo() {\n  return 'Hello';\n}\n\n// Function expression\nconsole.log(bar()); // Throws TypeError: bar is not a function\nvar bar = function () {\n  return 'Hello';\n};\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"JavaScript \\u4E2D\\u7684 Hoisting\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u58F0\\u660E\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51FD\\u6570\\u58F0\\u660E\\u88AB Hoisting \\u5230\\u5176\\u5305\\u542B\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u60A8\\u53EF\\u4EE5\\u5728\\u4EE3\\u7801\\u4E2D\\u5B9A\\u4E49\\u51FD\\u6570\\u4E4B\\u524D\\u8C03\\u7528\\u8BE5\\u51FD\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`console.log(foo()); // Works fine\nfunction foo() {\n  return 'Hello';\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u4E0A\\u9762\\u7684\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u51FD\\u6570 \",(0,e.jsx)(n.code,{children:\"foo\"}),\" \\u88AB Hoisting \\u5230\\u5176\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\uFF0C\\u56E0\\u6B64\\u5728\\u5B9A\\u4E49\\u4E4B\\u524D\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"foo()\"}),\" \\u53EF\\u4EE5\\u6B63\\u5E38\\u5DE5\\u4F5C\\uFF0C\\u6CA1\\u6709\\u4EFB\\u4F55\\u95EE\\u9898\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u4E0D\\u4F1A\\u4EE5\\u76F8\\u540C\\u7684\\u65B9\\u5F0F\\u88AB Hoisting\\u3002\\u4FDD\\u5B58\\u51FD\\u6570\\u7684\\u53D8\\u91CF\\u88AB Hoisting\\uFF0C\\u4F46\\u5176\\u8D4B\\u503C\\u6CA1\\u6709\\u88AB Hoisting\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u5982\\u679C\\u60A8\\u5C1D\\u8BD5\\u5728\\u5B9A\\u4E49\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u4E4B\\u524D\\u8C03\\u7528\\u5B83\\uFF0C\\u60A8\\u5C06\\u6536\\u5230\\u4E00\\u4E2A\\u9519\\u8BEF\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`console.log(bar()); // Throws TypeError: bar is not a function\nvar bar = function () {\n  return 'Hello';\n};\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u53D8\\u91CF \",(0,e.jsx)(n.code,{children:\"bar\"}),\" \\u88AB Hoisting \\u5230\\u5176\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\uFF0C\\u4F46\\u8D4B\\u503C \",(0,e.jsx)(n.code,{children:\"function() { return 'Hello'; }\"}),\" \\u6CA1\\u6709\\u88AB Hoisting\\u3002\\u56E0\\u6B64\\uFF0C\\u5728\\u8D4B\\u503C\\u4E4B\\u524D\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"bar()\"}),\" \\u4F1A\\u5BFC\\u81F4 \",(0,e.jsx)(n.code,{children:\"TypeError\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[(0,e.jsx)(n.code,{children:\"var\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"let\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"const\"}),\" \\u4E4B\\u95F4\\u7684\\u533A\\u522B\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u4F7F\\u7528\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u65F6\\uFF0C\\u6CE8\\u610F \",(0,e.jsx)(n.code,{children:\"var\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"let\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"const\"}),\" \\u4E4B\\u95F4\\u7684 Hoisting \\u884C\\u4E3A\\u5DEE\\u5F02\\u4E5F\\u5F88\\u91CD\\u8981\\u3002\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"var\"}),\"\\uFF1A\\u53D8\\u91CF\\u88AB Hoisting \\u5E76\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"undefined\"}),\" \\u521D\\u59CB\\u5316\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"let\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"const\"}),\"\\uFF1A\\u53D8\\u91CF\\u88AB Hoisting \\u4F46\\u672A\\u521D\\u59CB\\u5316\\uFF0C\\u5982\\u679C\\u5728\\u521D\\u59CB\\u5316\\u4E4B\\u524D\\u8BBF\\u95EE\\uFF0C\\u5219\\u4F1A\\u5BFC\\u81F4 \",(0,e.jsx)(n.code,{children:\"ReferenceError\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`console.log(baz); // undefined\nvar baz = function () {\n  return 'Hello';\n};\n\nconsole.log(qux); // ReferenceError: Cannot access 'qux' before initialization\nlet qux = function () {\n  return 'Hello';\n};\n\nconsole.log(quux); // ReferenceError: Cannot access 'quux' before initialization\nconst quux = function () {\n  return 'Hello';\n};\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Hoisting\",children:\"MDN Web Docs on Hoisting\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/var#var-hoisting\",children:\"JavaScript.info on Hoisting\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\",children:\"MDN Web Docs on Function Declarations\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function\",children:\"MDN Web Docs on Function Expressions\"})}),`\n`]})]})}function h(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,{...o,children:(0,e.jsx)(a,{...o})}):a(o)}return x(D);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-does-javascript-garbage-collection-work/en-US.json b/apps/web/src/__generated__/questions/quiz/how-does-javascript-garbage-collection-work/en-US.json
index b1275076e..c2b9f32cf 100644
--- a/apps/web/src/__generated__/questions/quiz/how-does-javascript-garbage-collection-work/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-does-javascript-garbage-collection-work/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-does-javascript-garbage-collection-work/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var u=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var a in e)o(r,a,{get:e[a],enumerable:!0})},l=(r,e,a,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!p.call(r,i)&&i!==a&&o(r,i,{get:()=>e[i],enumerable:!(t=g(e,i))||t.enumerable});return r};var v=(r,e,a)=>(a=r!=null?d(b(r)):{},l(e||!r||!r.__esModule?o(a,\"default\",{value:r,enumerable:!0}):a,r)),y=r=>l(o({},\"__esModule\",{value:!0}),r);var s=u((J,c)=>{c.exports=_jsx_runtime});var M={};f(M,{default:()=>k,frontmatter:()=>w});var n=v(s()),w={title:\"How does JavaScript garbage collection work?\"};function h(r){let e=Object.assign({h2:\"h2\",p:\"p\",strong:\"strong\",ul:\"ul\",li:\"li\",hr:\"hr\",h3:\"h3\",ol:\"ol\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Garbage collection in JavaScript is an automatic memory management mechanism that reclaims memory occupied by objects and variables that are no longer in use by the program. The two most common algorithms are mark-and-sweep and generational garbage collection.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Mark-and-sweep\"})}),`\n`,(0,n.jsx)(e.p,{children:\"The most common garbage collection algorithm used in JavaScript is the Mark-and-sweep algorithm. It operates in two phases:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Marking phase\"}),': The garbage collector traverses the object graph, starting from the root objects (global variables, currently executing functions, etc.), and marks all reachable objects as \"in-use\".']}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Sweeping phase\"}),\": The garbage collector sweeps through memory, removing all unmarked objects, as they are considered unreachable and no longer needed.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"This algorithm effectively identifies and removes objects that have become unreachable, freeing up memory for new allocations.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Generational garbage collection\"})}),`\n`,(0,n.jsx)(e.p,{children:\"Leveraged by modern JavaScript engines, objects are divided into different generations based on their age and usage patterns. Frequently accessed objects are moved to younger generations, while less frequently used objects are promoted to older generations. This optimization reduces the overhead of garbage collection by focusing on the younger generations, where most objects are short-lived.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Different JavaScript engines (differs according to browsers) implement different garbage collection algorithms and there's no standard way of doing garbage collection.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Garbage collection in JavaScript\"}),`\n`,(0,n.jsx)(e.p,{children:\"Garbage collection in JavaScript is an automatic process managed by the JavaScript engine, designed to reclaim memory occupied by objects that are no longer needed. This helps prevent memory leaks and optimizes the use of available memory. Here's an overview of how garbage collection works in JavaScript:\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Memory management basics\"}),`\n`,(0,n.jsx)(e.p,{children:\"JavaScript allocates memory for objects, arrays, and other variables as they are created. Over time, some of these objects become unreachable because there are no references to them. Garbage collection is the process of identifying these unreachable objects and reclaiming their memory.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Reachability\"}),`\n`,(0,n.jsx)(e.p,{children:\"The primary concept in JavaScript garbage collection is reachability. An object is considered reachable if it can be accessed or reached in some way:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Global variables\"}),\": Objects referenced by global variables are always reachable.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Local variables and function parameters\"}),\": These objects are reachable as long as the function is executing.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Closure variables\"}),\": Objects referenced by closures are reachable if the closure is reachable.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"DOM and other system roots\"}),\": Objects referenced by the DOM or other host objects.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"If there is a chain of references from a root to an object, that object is considered reachable.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Garbage collection algorithms\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Mark-and-sweep\"}),\":\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Mark Phase\"}),\": The garbage collector starts from the root objects and marks all reachable objects.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Sweep Phase\"}),\": It then scans memory for objects that were not marked and reclaims their memory.\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reference counting\"}),\":\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"This algorithm keeps a count of references to each object. When an object's reference count drops to zero, it is considered unreachable and can be collected.\"}),`\n`,(0,n.jsx)(e.li,{children:\"A drawback of reference counting is that it cannot handle circular references well (e.g., two objects referencing each other but not referenced by any other object).\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Generational garbage collection\"}),\":\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Memory is divided into generations: young and old.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Objects are initially allocated in the young generation.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Objects that survive multiple collections are promoted to the old generation.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Young generation collections are more frequent and faster, while old generation collections are less frequent but cover more objects.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"JavaScript engine implementations\"}),`\n`,(0,n.jsx)(e.p,{children:\"Different JavaScript engines use variations of these algorithms:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"V8 (Google Chrome, Node.js)\"}),\": Uses a combination of generational, mark-and-sweep, and other optimizations for efficient garbage collection.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"SpiderMonkey (Mozilla Firefox)\"}),\": Uses incremental and generational garbage collection.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"JavaScriptCore (Safari)\"}),\": Uses a mark-and-sweep algorithm with generational collection.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Memory leaks\"}),`\n`,(0,n.jsx)(e.p,{children:\"Memory leaks in JavaScript occur when a program fails to release memory that it no longer needs, causing the program to consume more and more memory over time.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Memory leaks in JavaScript can occur due to various reasons, including:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Accidental global variables\"}),\": Unintentionally creating global variables that remain in memory even after they are no longer needed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Closures\"}),\": Improper use of closures, where an inner function retains references to variables from an outer function's scope, preventing the outer function's scope from being garbage collected.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Event listeners\"}),\": Failing to remove event listeners or callbacks when they are no longer needed, causing the associated objects to remain in memory.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Caching\"}),\": Implementing caches without proper eviction logic, leading to unbounded memory growth over time.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Detached DOM node references\"}),\": Keeping references to detached DOM nodes, preventing them from being garbage collected.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Forgotten timers or callbacks\"}),\": Failing to clear timers or callbacks when they are no longer needed, causing their associated data to remain in memory.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"To avoid leaking memory:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Remove event listeners\"}),\": Always remove event listeners when they are no longer needed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Clear references in closures\"}),\": Avoid holding unnecessary references in closures.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Manage DOM references\"}),\": Explicitly remove DOM nodes and their references when they are no longer needed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Avoid global variables\"}),\": Minimize the use of global variables to reduce the risk of inadvertently keeping references alive.\"]}),`\n`]}),`\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/Garbage_collection\",children:\"Garbage collection - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_management\",children:\"Memory management\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.linkedin.com/pulse/understanding-memory-management-garbage-collection-aayush-patniya\",children:\"Understanding memory management and garbage collection in JavaScript\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.calibraint.com/blog/garbage-collection-in-javascript\",children:\"JavaScript memory management: A comprehensive guide to garbage collection in JavaScript\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/garbage-collection\",children:\"Garbage collection - javascript.info\"})}),`\n`]})]})}function j(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(h,r)})):h(r)}var k=j;return y(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var g=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),v=(r,e)=>{for(var a in e)o(r,a,{get:e[a],enumerable:!0})},l=(r,e,a,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of b(e))!u.call(r,i)&&i!==a&&o(r,i,{get:()=>e[i],enumerable:!(t=m(e,i))||t.enumerable});return r};var y=(r,e,a)=>(a=r!=null?g(p(r)):{},l(e||!r||!r.__esModule?o(a,\"default\",{value:r,enumerable:!0}):a,r)),w=r=>l(o({},\"__esModule\",{value:!0}),r);var s=f((S,c)=>{c.exports=_jsx_runtime});var k={};v(k,{default:()=>d,frontmatter:()=>j});var n=y(s()),j={title:\"How does JavaScript garbage collection work?\"};function h(r){let e={a:\"a\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Garbage collection in JavaScript is an automatic memory management mechanism that reclaims memory occupied by objects and variables that are no longer in use by the program. The two most common algorithms are mark-and-sweep and generational garbage collection.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Mark-and-sweep\"})}),`\n`,(0,n.jsx)(e.p,{children:\"The most common garbage collection algorithm used in JavaScript is the Mark-and-sweep algorithm. It operates in two phases:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Marking phase\"}),': The garbage collector traverses the object graph, starting from the root objects (global variables, currently executing functions, etc.), and marks all reachable objects as \"in-use\".']}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Sweeping phase\"}),\": The garbage collector sweeps through memory, removing all unmarked objects, as they are considered unreachable and no longer needed.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"This algorithm effectively identifies and removes objects that have become unreachable, freeing up memory for new allocations.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Generational garbage collection\"})}),`\n`,(0,n.jsx)(e.p,{children:\"Leveraged by modern JavaScript engines, objects are divided into different generations based on their age and usage patterns. Frequently accessed objects are moved to younger generations, while less frequently used objects are promoted to older generations. This optimization reduces the overhead of garbage collection by focusing on the younger generations, where most objects are short-lived.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Different JavaScript engines (differs according to browsers) implement different garbage collection algorithms and there's no standard way of doing garbage collection.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Garbage collection in JavaScript\"}),`\n`,(0,n.jsx)(e.p,{children:\"Garbage collection in JavaScript is an automatic process managed by the JavaScript engine, designed to reclaim memory occupied by objects that are no longer needed. This helps prevent memory leaks and optimizes the use of available memory. Here's an overview of how garbage collection works in JavaScript:\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Memory management basics\"}),`\n`,(0,n.jsx)(e.p,{children:\"JavaScript allocates memory for objects, arrays, and other variables as they are created. Over time, some of these objects become unreachable because there are no references to them. Garbage collection is the process of identifying these unreachable objects and reclaiming their memory.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Reachability\"}),`\n`,(0,n.jsx)(e.p,{children:\"The primary concept in JavaScript garbage collection is reachability. An object is considered reachable if it can be accessed or reached in some way:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Global variables\"}),\": Objects referenced by global variables are always reachable.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Local variables and function parameters\"}),\": These objects are reachable as long as the function is executing.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Closure variables\"}),\": Objects referenced by closures are reachable if the closure is reachable.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"DOM and other system roots\"}),\": Objects referenced by the DOM or other host objects.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"If there is a chain of references from a root to an object, that object is considered reachable.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Garbage collection algorithms\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Mark-and-sweep\"}),\":\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Mark Phase\"}),\": The garbage collector starts from the root objects and marks all reachable objects.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Sweep Phase\"}),\": It then scans memory for objects that were not marked and reclaims their memory.\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reference counting\"}),\":\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"This algorithm keeps a count of references to each object. When an object's reference count drops to zero, it is considered unreachable and can be collected.\"}),`\n`,(0,n.jsx)(e.li,{children:\"A drawback of reference counting is that it cannot handle circular references well (e.g., two objects referencing each other but not referenced by any other object).\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Generational garbage collection\"}),\":\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Memory is divided into generations: young and old.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Objects are initially allocated in the young generation.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Objects that survive multiple collections are promoted to the old generation.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Young generation collections are more frequent and faster, while old generation collections are less frequent but cover more objects.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"JavaScript engine implementations\"}),`\n`,(0,n.jsx)(e.p,{children:\"Different JavaScript engines use variations of these algorithms:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"V8 (Google Chrome, Node.js)\"}),\": Uses a combination of generational, mark-and-sweep, and other optimizations for efficient garbage collection.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"SpiderMonkey (Mozilla Firefox)\"}),\": Uses incremental and generational garbage collection.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"JavaScriptCore (Safari)\"}),\": Uses a mark-and-sweep algorithm with generational collection.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Memory leaks\"}),`\n`,(0,n.jsx)(e.p,{children:\"Memory leaks in JavaScript occur when a program fails to release memory that it no longer needs, causing the program to consume more and more memory over time.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Memory leaks in JavaScript can occur due to various reasons, including:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Accidental global variables\"}),\": Unintentionally creating global variables that remain in memory even after they are no longer needed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Closures\"}),\": Improper use of closures, where an inner function retains references to variables from an outer function's scope, preventing the outer function's scope from being garbage collected.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Event listeners\"}),\": Failing to remove event listeners or callbacks when they are no longer needed, causing the associated objects to remain in memory.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Caching\"}),\": Implementing caches without proper eviction logic, leading to unbounded memory growth over time.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Detached DOM node references\"}),\": Keeping references to detached DOM nodes, preventing them from being garbage collected.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Forgotten timers or callbacks\"}),\": Failing to clear timers or callbacks when they are no longer needed, causing their associated data to remain in memory.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"To avoid leaking memory:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Remove event listeners\"}),\": Always remove event listeners when they are no longer needed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Clear references in closures\"}),\": Avoid holding unnecessary references in closures.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Manage DOM references\"}),\": Explicitly remove DOM nodes and their references when they are no longer needed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Avoid global variables\"}),\": Minimize the use of global variables to reduce the risk of inadvertently keeping references alive.\"]}),`\n`]}),`\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/Garbage_collection\",children:\"Garbage collection - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_management\",children:\"Memory management\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.linkedin.com/pulse/understanding-memory-management-garbage-collection-aayush-patniya\",children:\"Understanding memory management and garbage collection in JavaScript\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.calibraint.com/blog/garbage-collection-in-javascript\",children:\"JavaScript memory management: A comprehensive guide to garbage collection in JavaScript\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/garbage-collection\",children:\"Garbage collection - javascript.info\"})}),`\n`]})]})}function d(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return w(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-does-javascript-garbage-collection-work/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-does-javascript-garbage-collection-work/zh-CN.json
index 041279c69..8b17a7bf4 100644
--- a/apps/web/src/__generated__/questions/quiz/how-does-javascript-garbage-collection-work/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-does-javascript-garbage-collection-work/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-does-javascript-garbage-collection-work/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var m=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),u=(i,n)=>{for(var l in n)c(i,l,{get:n[l],enumerable:!0})},d=(i,n,l,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let e of g(n))!S.call(i,e)&&e!==l&&c(i,e,{get:()=>n[e],enumerable:!(h=p(n,e))||h.enumerable});return i};var J=(i,n,l)=>(l=i!=null?s(v(i)):{},d(n||!i||!i.__esModule?c(l,\"default\",{value:i,enumerable:!0}):l,i)),f=i=>d(c({},\"__esModule\",{value:!0}),i);var a=m((_,t)=>{t.exports=_jsx_runtime});var D={};u(D,{default:()=>x,frontmatter:()=>M});var r=J(a()),M={title:\"JavaScript \\u5783\\u573E\\u56DE\\u6536\\u673A\\u5236\\u662F\\u5982\\u4F55\\u5DE5\\u4F5C\\u7684\\uFF1F\"};function o(i){let n=Object.assign({h2:\"h2\",p:\"p\",strong:\"strong\",ul:\"ul\",li:\"li\",hr:\"hr\",h3:\"h3\",ol:\"ol\",a:\"a\"},i.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684\\u5783\\u573E\\u56DE\\u6536\\u662F\\u4E00\\u79CD\\u81EA\\u52A8\\u5185\\u5B58\\u7BA1\\u7406\\u673A\\u5236\\uFF0C\\u7528\\u4E8E\\u56DE\\u6536\\u7A0B\\u5E8F\\u4E0D\\u518D\\u4F7F\\u7528\\u7684\\u5BF9\\u8C61\\u548C\\u53D8\\u91CF\\u6240\\u5360\\u7528\\u7684\\u5185\\u5B58\\u3002\\u4E24\\u79CD\\u6700\\u5E38\\u89C1\\u7684\\u7B97\\u6CD5\\u662F\\u6807\\u8BB0-\\u6E05\\u9664\\u548C\\u5206\\u4EE3\\u5783\\u573E\\u56DE\\u6536\\u3002\"}),`\n`,(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:\"\\u6807\\u8BB0-\\u6E05\\u9664\"})}),`\n`,(0,r.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u4F7F\\u7528\\u6700\\u5E38\\u89C1\\u7684\\u5783\\u573E\\u56DE\\u6536\\u7B97\\u6CD5\\u662F\\u6807\\u8BB0-\\u6E05\\u9664\\u7B97\\u6CD5\\u3002\\u5B83\\u5206\\u4E24\\u4E2A\\u9636\\u6BB5\\u8FD0\\u884C\\uFF1A\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u6807\\u8BB0\\u9636\\u6BB5\"}),\"\\uFF1A\\u5783\\u573E\\u56DE\\u6536\\u5668\\u904D\\u5386\\u5BF9\\u8C61\\u56FE\\uFF0C\\u4ECE\\u6839\\u5BF9\\u8C61\\uFF08\\u5168\\u5C40\\u53D8\\u91CF\\u3001\\u5F53\\u524D\\u6267\\u884C\\u7684\\u51FD\\u6570\\u7B49\\uFF09\\u5F00\\u59CB\\uFF0C\\u5C06\\u6240\\u6709\\u53EF\\u8BBF\\u95EE\\u7684\\u5BF9\\u8C61\\u6807\\u8BB0\\u4E3A\\u201C\\u5728\\u4F7F\\u7528\\u4E2D\\u201D\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u6E05\\u9664\\u9636\\u6BB5\"}),\"\\uFF1A\\u5783\\u573E\\u56DE\\u6536\\u5668\\u626B\\u63CF\\u5185\\u5B58\\uFF0C\\u5220\\u9664\\u6240\\u6709\\u672A\\u6807\\u8BB0\\u7684\\u5BF9\\u8C61\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u88AB\\u8BA4\\u4E3A\\u4E0D\\u53EF\\u8BBF\\u95EE\\u4E14\\u4E0D\\u518D\\u9700\\u8981\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.p,{children:\"\\u8BE5\\u7B97\\u6CD5\\u6709\\u6548\\u5730\\u8BC6\\u522B\\u5E76\\u5220\\u9664\\u5DF2\\u53D8\\u5F97\\u4E0D\\u53EF\\u8BBF\\u95EE\\u7684\\u5BF9\\u8C61\\uFF0C\\u4ECE\\u800C\\u4E3A\\u65B0\\u7684\\u5206\\u914D\\u91CA\\u653E\\u5185\\u5B58\\u3002\"}),`\n`,(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:\"\\u5206\\u4EE3\\u5783\\u573E\\u56DE\\u6536\"})}),`\n`,(0,r.jsx)(n.p,{children:\"\\u73B0\\u4EE3 JavaScript \\u5F15\\u64CE\\u5229\\u7528\\u4E86\\u8FD9\\u4E00\\u70B9\\uFF0C\\u5BF9\\u8C61\\u6839\\u636E\\u5176\\u5E74\\u9F84\\u548C\\u4F7F\\u7528\\u6A21\\u5F0F\\u88AB\\u5212\\u5206\\u4E3A\\u4E0D\\u540C\\u7684\\u4EE3\\u3002\\u7ECF\\u5E38\\u8BBF\\u95EE\\u7684\\u5BF9\\u8C61\\u88AB\\u79FB\\u52A8\\u5230\\u5E74\\u8F7B\\u4EE3\\uFF0C\\u800C\\u8F83\\u5C11\\u4F7F\\u7528\\u7684\\u5BF9\\u8C61\\u88AB\\u63D0\\u5347\\u5230\\u8001\\u5E74\\u4EE3\\u3002\\u8FD9\\u79CD\\u4F18\\u5316\\u901A\\u8FC7\\u4E13\\u6CE8\\u4E8E\\u5E74\\u8F7B\\u4EE3\\uFF08\\u5927\\u591A\\u6570\\u5BF9\\u8C61\\u5BFF\\u547D\\u77ED\\uFF09\\u6765\\u51CF\\u5C11\\u5783\\u573E\\u56DE\\u6536\\u7684\\u5F00\\u9500\\u3002\"}),`\n`,(0,r.jsx)(n.p,{children:\"\\u4E0D\\u540C\\u7684 JavaScript \\u5F15\\u64CE\\uFF08\\u6839\\u636E\\u6D4F\\u89C8\\u5668\\u800C\\u5F02\\uFF09\\u5B9E\\u73B0\\u4E0D\\u540C\\u7684\\u5783\\u573E\\u56DE\\u6536\\u7B97\\u6CD5\\uFF0C\\u5E76\\u4E14\\u6CA1\\u6709\\u6807\\u51C6\\u7684\\u5783\\u573E\\u56DE\\u6536\\u65B9\\u5F0F\\u3002\"}),`\n`,(0,r.jsx)(n.hr,{}),`\n`,(0,r.jsx)(n.h2,{children:\"JavaScript \\u4E2D\\u7684\\u5783\\u573E\\u56DE\\u6536\"}),`\n`,(0,r.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684\\u5783\\u573E\\u56DE\\u6536\\u662F\\u7531 JavaScript \\u5F15\\u64CE\\u7BA1\\u7406\\u7684\\u81EA\\u52A8\\u8FC7\\u7A0B\\uFF0C\\u65E8\\u5728\\u56DE\\u6536\\u4E0D\\u518D\\u9700\\u8981\\u7684\\u5BF9\\u8C61\\u6240\\u5360\\u7528\\u7684\\u5185\\u5B58\\u3002\\u8FD9\\u6709\\u52A9\\u4E8E\\u9632\\u6B62\\u5185\\u5B58\\u6CC4\\u6F0F\\u5E76\\u4F18\\u5316\\u53EF\\u7528\\u5185\\u5B58\\u7684\\u4F7F\\u7528\\u3002\\u4EE5\\u4E0B\\u662F JavaScript \\u4E2D\\u5783\\u573E\\u56DE\\u6536\\u5DE5\\u4F5C\\u539F\\u7406\\u7684\\u6982\\u8FF0\\uFF1A\"}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u5185\\u5B58\\u7BA1\\u7406\\u57FA\\u7840\"}),`\n`,(0,r.jsx)(n.p,{children:\"JavaScript \\u5728\\u521B\\u5EFA\\u5BF9\\u8C61\\u3001\\u6570\\u7EC4\\u548C\\u5176\\u4ED6\\u53D8\\u91CF\\u65F6\\u4E3A\\u5176\\u5206\\u914D\\u5185\\u5B58\\u3002\\u968F\\u7740\\u65F6\\u95F4\\u7684\\u63A8\\u79FB\\uFF0C\\u5176\\u4E2D\\u4E00\\u4E9B\\u5BF9\\u8C61\\u53D8\\u5F97\\u4E0D\\u53EF\\u8BBF\\u95EE\\uFF0C\\u56E0\\u4E3A\\u6CA1\\u6709\\u5BF9\\u5B83\\u4EEC\\u7684\\u5F15\\u7528\\u3002\\u5783\\u573E\\u56DE\\u6536\\u662F\\u8BC6\\u522B\\u8FD9\\u4E9B\\u4E0D\\u53EF\\u8BBF\\u95EE\\u7684\\u5BF9\\u8C61\\u5E76\\u56DE\\u6536\\u5176\\u5185\\u5B58\\u7684\\u8FC7\\u7A0B\\u3002\"}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u53EF\\u8FBE\\u6027\"}),`\n`,(0,r.jsx)(n.p,{children:\"JavaScript \\u5783\\u573E\\u56DE\\u6536\\u4E2D\\u7684\\u4E3B\\u8981\\u6982\\u5FF5\\u662F\\u53EF\\u8FBE\\u6027\\u3002\\u5982\\u679C\\u4E00\\u4E2A\\u5BF9\\u8C61\\u53EF\\u4EE5\\u901A\\u8FC7\\u67D0\\u79CD\\u65B9\\u5F0F\\u8BBF\\u95EE\\u6216\\u5230\\u8FBE\\uFF0C\\u5219\\u8BA4\\u4E3A\\u5B83\\u662F\\u53EF\\u8FBE\\u7684\\uFF1A\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5168\\u5C40\\u53D8\\u91CF\"}),\"\\uFF1A\\u5168\\u5C40\\u53D8\\u91CF\\u5F15\\u7528\\u7684\\u5BF9\\u8C61\\u59CB\\u7EC8\\u662F\\u53EF\\u8FBE\\u7684\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5C40\\u90E8\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u53C2\\u6570\"}),\"\\uFF1A\\u53EA\\u8981\\u51FD\\u6570\\u6B63\\u5728\\u6267\\u884C\\uFF0C\\u8FD9\\u4E9B\\u5BF9\\u8C61\\u5C31\\u662F\\u53EF\\u8FBE\\u7684\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u95ED\\u5305\\u53D8\\u91CF\"}),\"\\uFF1A\\u5982\\u679C\\u95ED\\u5305\\u662F\\u53EF\\u8FBE\\u7684\\uFF0C\\u5219\\u95ED\\u5305\\u5F15\\u7528\\u7684\\u5BF9\\u8C61\\u662F\\u53EF\\u8FBE\\u7684\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"DOM \\u548C\\u5176\\u4ED6\\u7CFB\\u7EDF\\u6839\"}),\"\\uFF1ADOM \\u6216\\u5176\\u4ED6\\u5BBF\\u4E3B\\u5BF9\\u8C61\\u5F15\\u7528\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.p,{children:\"\\u5982\\u679C\\u4ECE\\u6839\\u5230\\u5BF9\\u8C61\\u5B58\\u5728\\u5F15\\u7528\\u94FE\\uFF0C\\u5219\\u8BE5\\u5BF9\\u8C61\\u88AB\\u8BA4\\u4E3A\\u662F\\u53EF\\u8FBE\\u7684\\u3002\"}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u5783\\u573E\\u56DE\\u6536\\u7B97\\u6CD5\"}),`\n`,(0,r.jsxs)(n.ol,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u6807\\u8BB0\\u548C\\u6E05\\u9664\"}),\"\\uFF1A\",`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u6807\\u8BB0\\u9636\\u6BB5\"}),\"\\uFF1A\\u5783\\u573E\\u6536\\u96C6\\u5668\\u4ECE\\u6839\\u5BF9\\u8C61\\u5F00\\u59CB\\uFF0C\\u6807\\u8BB0\\u6240\\u6709\\u53EF\\u8BBF\\u95EE\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u6E05\\u9664\\u9636\\u6BB5\"}),\"\\uFF1A\\u7136\\u540E\\u626B\\u63CF\\u5185\\u5B58\\uFF0C\\u67E5\\u627E\\u672A\\u88AB\\u6807\\u8BB0\\u7684\\u5BF9\\u8C61\\uFF0C\\u5E76\\u56DE\\u6536\\u5B83\\u4EEC\\u7684\\u5185\\u5B58\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5F15\\u7528\\u8BA1\\u6570\"}),\"\\uFF1A\",`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:\"\\u6B64\\u7B97\\u6CD5\\u4FDD\\u7559\\u5BF9\\u6BCF\\u4E2A\\u5BF9\\u8C61\\u7684\\u5F15\\u7528\\u8BA1\\u6570\\u3002\\u5F53\\u5BF9\\u8C61\\u7684\\u5F15\\u7528\\u8BA1\\u6570\\u964D\\u4E3A\\u96F6\\u65F6\\uFF0C\\u5B83\\u88AB\\u8BA4\\u4E3A\\u4E0D\\u53EF\\u8BBF\\u95EE\\uFF0C\\u53EF\\u4EE5\\u88AB\\u6536\\u96C6\\u3002\"}),`\n`,(0,r.jsx)(n.li,{children:\"\\u5F15\\u7528\\u8BA1\\u6570\\u7684\\u7F3A\\u70B9\\u662F\\u5B83\\u4E0D\\u80FD\\u5F88\\u597D\\u5730\\u5904\\u7406\\u5FAA\\u73AF\\u5F15\\u7528\\uFF08\\u4F8B\\u5982\\uFF0C\\u4E24\\u4E2A\\u5BF9\\u8C61\\u76F8\\u4E92\\u5F15\\u7528\\uFF0C\\u4F46\\u6CA1\\u6709\\u88AB\\u4EFB\\u4F55\\u5176\\u4ED6\\u5BF9\\u8C61\\u5F15\\u7528\\uFF09\\u3002\"}),`\n`]}),`\n`]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5206\\u4EE3\\u5783\\u573E\\u56DE\\u6536\"}),\"\\uFF1A\",`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:\"\\u5185\\u5B58\\u88AB\\u5212\\u5206\\u4E3A\\u51E0\\u4EE3\\uFF1A\\u5E74\\u8F7B\\u4EE3\\u548C\\u8001\\u5E74\\u4EE3\\u3002\"}),`\n`,(0,r.jsx)(n.li,{children:\"\\u5BF9\\u8C61\\u6700\\u521D\\u5206\\u914D\\u5728\\u5E74\\u8F7B\\u4EE3\\u4E2D\\u3002\"}),`\n`,(0,r.jsx)(n.li,{children:\"\\u5B58\\u6D3B\\u4E86\\u591A\\u6B21\\u6536\\u96C6\\u7684\\u5BF9\\u8C61\\u88AB\\u63D0\\u5347\\u5230\\u8001\\u5E74\\u4EE3\\u3002\"}),`\n`,(0,r.jsx)(n.li,{children:\"\\u5E74\\u8F7B\\u4EE3\\u6536\\u96C6\\u66F4\\u9891\\u7E41\\u4E14\\u66F4\\u5FEB\\uFF0C\\u800C\\u8001\\u5E74\\u4EE3\\u6536\\u96C6\\u4E0D\\u592A\\u9891\\u7E41\\uFF0C\\u4F46\\u6DB5\\u76D6\\u66F4\\u591A\\u5BF9\\u8C61\\u3002\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,r.jsx)(n.h3,{children:\"JavaScript \\u5F15\\u64CE\\u5B9E\\u73B0\"}),`\n`,(0,r.jsx)(n.p,{children:\"\\u4E0D\\u540C\\u7684 JavaScript \\u5F15\\u64CE\\u4F7F\\u7528\\u8FD9\\u4E9B\\u7B97\\u6CD5\\u7684\\u53D8\\u4F53\\uFF1A\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"V8 (Google Chrome, Node.js)\"}),\"\\uFF1A\\u4F7F\\u7528\\u5206\\u4EE3\\u3001\\u6807\\u8BB0\\u548C\\u6E05\\u9664\\u4EE5\\u53CA\\u5176\\u4ED6\\u4F18\\u5316\\u6765\\u9AD8\\u6548\\u5730\\u8FDB\\u884C\\u5783\\u573E\\u56DE\\u6536\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"SpiderMonkey (Mozilla Firefox)\"}),\"\\uFF1A\\u4F7F\\u7528\\u589E\\u91CF\\u548C\\u5206\\u4EE3\\u5783\\u573E\\u56DE\\u6536\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"JavaScriptCore (Safari)\"}),\"\\uFF1A\\u4F7F\\u7528\\u5E26\\u6709\\u5206\\u4EE3\\u6536\\u96C6\\u7684\\u6807\\u8BB0\\u548C\\u6E05\\u9664\\u7B97\\u6CD5\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u5185\\u5B58\\u6CC4\\u6F0F\"}),`\n`,(0,r.jsx)(n.p,{children:\"\\u5F53\\u7A0B\\u5E8F\\u672A\\u80FD\\u91CA\\u653E\\u5B83\\u4E0D\\u518D\\u9700\\u8981\\u7684\\u5185\\u5B58\\u65F6\\uFF0CJavaScript \\u4E2D\\u5C31\\u4F1A\\u53D1\\u751F\\u5185\\u5B58\\u6CC4\\u6F0F\\uFF0C\\u5BFC\\u81F4\\u7A0B\\u5E8F\\u968F\\u7740\\u65F6\\u95F4\\u7684\\u63A8\\u79FB\\u6D88\\u8017\\u8D8A\\u6765\\u8D8A\\u591A\\u7684\\u5185\\u5B58\\u3002\"}),`\n`,(0,r.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684\\u5185\\u5B58\\u6CC4\\u6F0F\\u53EF\\u80FD\\u7531\\u4E8E\\u5404\\u79CD\\u539F\\u56E0\\u800C\\u53D1\\u751F\\uFF0C\\u5305\\u62EC\\uFF1A\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u610F\\u5916\\u7684\\u5168\\u5C40\\u53D8\\u91CF\"}),\"\\uFF1A\\u65E0\\u610F\\u4E2D\\u521B\\u5EFA\\u5168\\u5C40\\u53D8\\u91CF\\uFF0C\\u5373\\u4F7F\\u4E0D\\u518D\\u9700\\u8981\\u5B83\\u4EEC\\uFF0C\\u8FD9\\u4E9B\\u53D8\\u91CF\\u4ECD\\u7136\\u4FDD\\u7559\\u5728\\u5185\\u5B58\\u4E2D\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u95ED\\u5305\"}),\"\\uFF1A\\u4E0D\\u6B63\\u786E\\u5730\\u4F7F\\u7528\\u95ED\\u5305\\uFF0C\\u5176\\u4E2D\\u5185\\u90E8\\u51FD\\u6570\\u4FDD\\u7559\\u5BF9\\u6765\\u81EA\\u5916\\u90E8\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\\u7684\\u53D8\\u91CF\\u7684\\u5F15\\u7528\\uFF0C\\u963B\\u6B62\\u5916\\u90E8\\u51FD\\u6570\\u7684\\u4F5C\\u7528\\u57DF\\u88AB\\u5783\\u573E\\u56DE\\u6536\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\"}),\"\\uFF1A\\u5F53\\u4E0D\\u518D\\u9700\\u8981\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u6216\\u56DE\\u8C03\\u65F6\\uFF0C\\u672A\\u80FD\\u5220\\u9664\\u5B83\\u4EEC\\uFF0C\\u5BFC\\u81F4\\u76F8\\u5173\\u5BF9\\u8C61\\u4FDD\\u7559\\u5728\\u5185\\u5B58\\u4E2D\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u7F13\\u5B58\"}),\"\\uFF1A\\u5B9E\\u73B0\\u7F13\\u5B58\\u65F6\\u6CA1\\u6709\\u9002\\u5F53\\u7684\\u9010\\u51FA\\u903B\\u8F91\\uFF0C\\u5BFC\\u81F4\\u968F\\u7740\\u65F6\\u95F4\\u7684\\u63A8\\u79FB\\u5185\\u5B58\\u65E0\\u754C\\u589E\\u957F\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5206\\u79BB\\u7684 DOM \\u8282\\u70B9\\u5F15\\u7528\"}),\"\\uFF1A\\u4FDD\\u7559\\u5BF9\\u5206\\u79BB\\u7684 DOM \\u8282\\u70B9\\u7684\\u5F15\\u7528\\uFF0C\\u963B\\u6B62\\u5B83\\u4EEC\\u88AB\\u5783\\u573E\\u56DE\\u6536\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u88AB\\u9057\\u5FD8\\u7684\\u8BA1\\u65F6\\u5668\\u6216\\u56DE\\u8C03\"}),\"\\uFF1A\\u672A\\u80FD\\u6E05\\u9664\\u8BA1\\u65F6\\u5668\\u6216\\u56DE\\u8C03\\uFF0C\\u5BFC\\u81F4\\u5B83\\u4EEC\\u7684\\u76F8\\u5173\\u6570\\u636E\\u4FDD\\u7559\\u5728\\u5185\\u5B58\\u4E2D\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.p,{children:\"\\u4E3A\\u4E86\\u907F\\u514D\\u5185\\u5B58\\u6CC4\\u6F0F\\uFF1A\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5220\\u9664\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\"}),\"\\uFF1A\\u5F53\\u4E0D\\u518D\\u9700\\u8981\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u65F6\\uFF0C\\u59CB\\u7EC8\\u5220\\u9664\\u5B83\\u4EEC\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u6E05\\u9664\\u95ED\\u5305\\u4E2D\\u7684\\u5F15\\u7528\"}),\"\\uFF1A\\u907F\\u514D\\u5728\\u95ED\\u5305\\u4E2D\\u4FDD\\u7559\\u4E0D\\u5FC5\\u8981\\u7684\\u5F15\\u7528\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u7BA1\\u7406 DOM \\u5F15\\u7528\"}),\"\\uFF1A\\u5F53\\u4E0D\\u518D\\u9700\\u8981 DOM \\u8282\\u70B9\\u53CA\\u5176\\u5F15\\u7528\\u65F6\\uFF0C\\u663E\\u5F0F\\u5220\\u9664\\u5B83\\u4EEC\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u907F\\u514D\\u5168\\u5C40\\u53D8\\u91CF\"}),\"\\uFF1A\\u5C3D\\u91CF\\u51CF\\u5C11\\u5168\\u5C40\\u53D8\\u91CF\\u7684\\u4F7F\\u7528\\uFF0C\\u4EE5\\u964D\\u4F4E\\u65E0\\u610F\\u4E2D\\u4FDD\\u6301\\u5F15\\u7528\\u5B58\\u6D3B\\u7684\\u98CE\\u9669\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Garbage_collection\",children:\"\\u5783\\u573E\\u56DE\\u6536 - MDN\"})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_management\",children:\"\\u5185\\u5B58\\u7BA1\\u7406\"})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://www.linkedin.com/pulse/understanding-memory-management-garbage-collection-aayush-patniya\",children:\"\\u4E86\\u89E3 JavaScript \\u4E2D\\u7684\\u5185\\u5B58\\u7BA1\\u7406\\u548C\\u5783\\u573E\\u56DE\\u6536\"})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://www.calibraint.com/blog/garbage-collection-in-javascript\",children:\"JavaScript \\u5185\\u5B58\\u7BA1\\u7406\\uFF1AJavaScript \\u4E2D\\u5783\\u573E\\u56DE\\u6536\\u7684\\u7EFC\\u5408\\u6307\\u5357\"})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://javascript.info/garbage-collection\",children:\"\\u5783\\u573E\\u56DE\\u6536 - javascript.info\"})}),`\n`]})]})}function j(i={}){let{wrapper:n}=i.components||{};return n?(0,r.jsx)(n,Object.assign({},i,{children:(0,r.jsx)(o,i)})):o(i)}var x=j;return f(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var u=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),J=(i,n)=>{for(var l in n)c(i,l,{get:n[l],enumerable:!0})},d=(i,n,l,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let e of v(n))!m.call(i,e)&&e!==l&&c(i,e,{get:()=>n[e],enumerable:!(h=g(n,e))||h.enumerable});return i};var f=(i,n,l)=>(l=i!=null?p(S(i)):{},d(n||!i||!i.__esModule?c(l,\"default\",{value:i,enumerable:!0}):l,i)),M=i=>d(c({},\"__esModule\",{value:!0}),i);var a=u((_,t)=>{t.exports=_jsx_runtime});var D={};J(D,{default:()=>s,frontmatter:()=>x});var r=f(a()),x={title:\"JavaScript \\u5783\\u573E\\u56DE\\u6536\\u673A\\u5236\\u662F\\u5982\\u4F55\\u5DE5\\u4F5C\\u7684\\uFF1F\"};function o(i){let n={a:\"a\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",strong:\"strong\",ul:\"ul\",...i.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684\\u5783\\u573E\\u56DE\\u6536\\u662F\\u4E00\\u79CD\\u81EA\\u52A8\\u5185\\u5B58\\u7BA1\\u7406\\u673A\\u5236\\uFF0C\\u7528\\u4E8E\\u56DE\\u6536\\u7A0B\\u5E8F\\u4E0D\\u518D\\u4F7F\\u7528\\u7684\\u5BF9\\u8C61\\u548C\\u53D8\\u91CF\\u6240\\u5360\\u7528\\u7684\\u5185\\u5B58\\u3002\\u4E24\\u79CD\\u6700\\u5E38\\u89C1\\u7684\\u7B97\\u6CD5\\u662F\\u6807\\u8BB0-\\u6E05\\u9664\\u548C\\u5206\\u4EE3\\u5783\\u573E\\u56DE\\u6536\\u3002\"}),`\n`,(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:\"\\u6807\\u8BB0-\\u6E05\\u9664\"})}),`\n`,(0,r.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u4F7F\\u7528\\u6700\\u5E38\\u89C1\\u7684\\u5783\\u573E\\u56DE\\u6536\\u7B97\\u6CD5\\u662F\\u6807\\u8BB0-\\u6E05\\u9664\\u7B97\\u6CD5\\u3002\\u5B83\\u5206\\u4E24\\u4E2A\\u9636\\u6BB5\\u8FD0\\u884C\\uFF1A\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u6807\\u8BB0\\u9636\\u6BB5\"}),\"\\uFF1A\\u5783\\u573E\\u56DE\\u6536\\u5668\\u904D\\u5386\\u5BF9\\u8C61\\u56FE\\uFF0C\\u4ECE\\u6839\\u5BF9\\u8C61\\uFF08\\u5168\\u5C40\\u53D8\\u91CF\\u3001\\u5F53\\u524D\\u6267\\u884C\\u7684\\u51FD\\u6570\\u7B49\\uFF09\\u5F00\\u59CB\\uFF0C\\u5C06\\u6240\\u6709\\u53EF\\u8BBF\\u95EE\\u7684\\u5BF9\\u8C61\\u6807\\u8BB0\\u4E3A\\u201C\\u5728\\u4F7F\\u7528\\u4E2D\\u201D\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u6E05\\u9664\\u9636\\u6BB5\"}),\"\\uFF1A\\u5783\\u573E\\u56DE\\u6536\\u5668\\u626B\\u63CF\\u5185\\u5B58\\uFF0C\\u5220\\u9664\\u6240\\u6709\\u672A\\u6807\\u8BB0\\u7684\\u5BF9\\u8C61\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u88AB\\u8BA4\\u4E3A\\u4E0D\\u53EF\\u8BBF\\u95EE\\u4E14\\u4E0D\\u518D\\u9700\\u8981\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.p,{children:\"\\u8BE5\\u7B97\\u6CD5\\u6709\\u6548\\u5730\\u8BC6\\u522B\\u5E76\\u5220\\u9664\\u5DF2\\u53D8\\u5F97\\u4E0D\\u53EF\\u8BBF\\u95EE\\u7684\\u5BF9\\u8C61\\uFF0C\\u4ECE\\u800C\\u4E3A\\u65B0\\u7684\\u5206\\u914D\\u91CA\\u653E\\u5185\\u5B58\\u3002\"}),`\n`,(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:\"\\u5206\\u4EE3\\u5783\\u573E\\u56DE\\u6536\"})}),`\n`,(0,r.jsx)(n.p,{children:\"\\u73B0\\u4EE3 JavaScript \\u5F15\\u64CE\\u5229\\u7528\\u4E86\\u8FD9\\u4E00\\u70B9\\uFF0C\\u5BF9\\u8C61\\u6839\\u636E\\u5176\\u5E74\\u9F84\\u548C\\u4F7F\\u7528\\u6A21\\u5F0F\\u88AB\\u5212\\u5206\\u4E3A\\u4E0D\\u540C\\u7684\\u4EE3\\u3002\\u7ECF\\u5E38\\u8BBF\\u95EE\\u7684\\u5BF9\\u8C61\\u88AB\\u79FB\\u52A8\\u5230\\u5E74\\u8F7B\\u4EE3\\uFF0C\\u800C\\u8F83\\u5C11\\u4F7F\\u7528\\u7684\\u5BF9\\u8C61\\u88AB\\u63D0\\u5347\\u5230\\u8001\\u5E74\\u4EE3\\u3002\\u8FD9\\u79CD\\u4F18\\u5316\\u901A\\u8FC7\\u4E13\\u6CE8\\u4E8E\\u5E74\\u8F7B\\u4EE3\\uFF08\\u5927\\u591A\\u6570\\u5BF9\\u8C61\\u5BFF\\u547D\\u77ED\\uFF09\\u6765\\u51CF\\u5C11\\u5783\\u573E\\u56DE\\u6536\\u7684\\u5F00\\u9500\\u3002\"}),`\n`,(0,r.jsx)(n.p,{children:\"\\u4E0D\\u540C\\u7684 JavaScript \\u5F15\\u64CE\\uFF08\\u6839\\u636E\\u6D4F\\u89C8\\u5668\\u800C\\u5F02\\uFF09\\u5B9E\\u73B0\\u4E0D\\u540C\\u7684\\u5783\\u573E\\u56DE\\u6536\\u7B97\\u6CD5\\uFF0C\\u5E76\\u4E14\\u6CA1\\u6709\\u6807\\u51C6\\u7684\\u5783\\u573E\\u56DE\\u6536\\u65B9\\u5F0F\\u3002\"}),`\n`,(0,r.jsx)(n.hr,{}),`\n`,(0,r.jsx)(n.h2,{children:\"JavaScript \\u4E2D\\u7684\\u5783\\u573E\\u56DE\\u6536\"}),`\n`,(0,r.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684\\u5783\\u573E\\u56DE\\u6536\\u662F\\u7531 JavaScript \\u5F15\\u64CE\\u7BA1\\u7406\\u7684\\u81EA\\u52A8\\u8FC7\\u7A0B\\uFF0C\\u65E8\\u5728\\u56DE\\u6536\\u4E0D\\u518D\\u9700\\u8981\\u7684\\u5BF9\\u8C61\\u6240\\u5360\\u7528\\u7684\\u5185\\u5B58\\u3002\\u8FD9\\u6709\\u52A9\\u4E8E\\u9632\\u6B62\\u5185\\u5B58\\u6CC4\\u6F0F\\u5E76\\u4F18\\u5316\\u53EF\\u7528\\u5185\\u5B58\\u7684\\u4F7F\\u7528\\u3002\\u4EE5\\u4E0B\\u662F JavaScript \\u4E2D\\u5783\\u573E\\u56DE\\u6536\\u5DE5\\u4F5C\\u539F\\u7406\\u7684\\u6982\\u8FF0\\uFF1A\"}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u5185\\u5B58\\u7BA1\\u7406\\u57FA\\u7840\"}),`\n`,(0,r.jsx)(n.p,{children:\"JavaScript \\u5728\\u521B\\u5EFA\\u5BF9\\u8C61\\u3001\\u6570\\u7EC4\\u548C\\u5176\\u4ED6\\u53D8\\u91CF\\u65F6\\u4E3A\\u5176\\u5206\\u914D\\u5185\\u5B58\\u3002\\u968F\\u7740\\u65F6\\u95F4\\u7684\\u63A8\\u79FB\\uFF0C\\u5176\\u4E2D\\u4E00\\u4E9B\\u5BF9\\u8C61\\u53D8\\u5F97\\u4E0D\\u53EF\\u8BBF\\u95EE\\uFF0C\\u56E0\\u4E3A\\u6CA1\\u6709\\u5BF9\\u5B83\\u4EEC\\u7684\\u5F15\\u7528\\u3002\\u5783\\u573E\\u56DE\\u6536\\u662F\\u8BC6\\u522B\\u8FD9\\u4E9B\\u4E0D\\u53EF\\u8BBF\\u95EE\\u7684\\u5BF9\\u8C61\\u5E76\\u56DE\\u6536\\u5176\\u5185\\u5B58\\u7684\\u8FC7\\u7A0B\\u3002\"}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u53EF\\u8FBE\\u6027\"}),`\n`,(0,r.jsx)(n.p,{children:\"JavaScript \\u5783\\u573E\\u56DE\\u6536\\u4E2D\\u7684\\u4E3B\\u8981\\u6982\\u5FF5\\u662F\\u53EF\\u8FBE\\u6027\\u3002\\u5982\\u679C\\u4E00\\u4E2A\\u5BF9\\u8C61\\u53EF\\u4EE5\\u901A\\u8FC7\\u67D0\\u79CD\\u65B9\\u5F0F\\u8BBF\\u95EE\\u6216\\u5230\\u8FBE\\uFF0C\\u5219\\u8BA4\\u4E3A\\u5B83\\u662F\\u53EF\\u8FBE\\u7684\\uFF1A\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5168\\u5C40\\u53D8\\u91CF\"}),\"\\uFF1A\\u5168\\u5C40\\u53D8\\u91CF\\u5F15\\u7528\\u7684\\u5BF9\\u8C61\\u59CB\\u7EC8\\u662F\\u53EF\\u8FBE\\u7684\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5C40\\u90E8\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u53C2\\u6570\"}),\"\\uFF1A\\u53EA\\u8981\\u51FD\\u6570\\u6B63\\u5728\\u6267\\u884C\\uFF0C\\u8FD9\\u4E9B\\u5BF9\\u8C61\\u5C31\\u662F\\u53EF\\u8FBE\\u7684\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u95ED\\u5305\\u53D8\\u91CF\"}),\"\\uFF1A\\u5982\\u679C\\u95ED\\u5305\\u662F\\u53EF\\u8FBE\\u7684\\uFF0C\\u5219\\u95ED\\u5305\\u5F15\\u7528\\u7684\\u5BF9\\u8C61\\u662F\\u53EF\\u8FBE\\u7684\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"DOM \\u548C\\u5176\\u4ED6\\u7CFB\\u7EDF\\u6839\"}),\"\\uFF1ADOM \\u6216\\u5176\\u4ED6\\u5BBF\\u4E3B\\u5BF9\\u8C61\\u5F15\\u7528\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.p,{children:\"\\u5982\\u679C\\u4ECE\\u6839\\u5230\\u5BF9\\u8C61\\u5B58\\u5728\\u5F15\\u7528\\u94FE\\uFF0C\\u5219\\u8BE5\\u5BF9\\u8C61\\u88AB\\u8BA4\\u4E3A\\u662F\\u53EF\\u8FBE\\u7684\\u3002\"}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u5783\\u573E\\u56DE\\u6536\\u7B97\\u6CD5\"}),`\n`,(0,r.jsxs)(n.ol,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u6807\\u8BB0\\u548C\\u6E05\\u9664\"}),\"\\uFF1A\",`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u6807\\u8BB0\\u9636\\u6BB5\"}),\"\\uFF1A\\u5783\\u573E\\u6536\\u96C6\\u5668\\u4ECE\\u6839\\u5BF9\\u8C61\\u5F00\\u59CB\\uFF0C\\u6807\\u8BB0\\u6240\\u6709\\u53EF\\u8BBF\\u95EE\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u6E05\\u9664\\u9636\\u6BB5\"}),\"\\uFF1A\\u7136\\u540E\\u626B\\u63CF\\u5185\\u5B58\\uFF0C\\u67E5\\u627E\\u672A\\u88AB\\u6807\\u8BB0\\u7684\\u5BF9\\u8C61\\uFF0C\\u5E76\\u56DE\\u6536\\u5B83\\u4EEC\\u7684\\u5185\\u5B58\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5F15\\u7528\\u8BA1\\u6570\"}),\"\\uFF1A\",`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:\"\\u6B64\\u7B97\\u6CD5\\u4FDD\\u7559\\u5BF9\\u6BCF\\u4E2A\\u5BF9\\u8C61\\u7684\\u5F15\\u7528\\u8BA1\\u6570\\u3002\\u5F53\\u5BF9\\u8C61\\u7684\\u5F15\\u7528\\u8BA1\\u6570\\u964D\\u4E3A\\u96F6\\u65F6\\uFF0C\\u5B83\\u88AB\\u8BA4\\u4E3A\\u4E0D\\u53EF\\u8BBF\\u95EE\\uFF0C\\u53EF\\u4EE5\\u88AB\\u6536\\u96C6\\u3002\"}),`\n`,(0,r.jsx)(n.li,{children:\"\\u5F15\\u7528\\u8BA1\\u6570\\u7684\\u7F3A\\u70B9\\u662F\\u5B83\\u4E0D\\u80FD\\u5F88\\u597D\\u5730\\u5904\\u7406\\u5FAA\\u73AF\\u5F15\\u7528\\uFF08\\u4F8B\\u5982\\uFF0C\\u4E24\\u4E2A\\u5BF9\\u8C61\\u76F8\\u4E92\\u5F15\\u7528\\uFF0C\\u4F46\\u6CA1\\u6709\\u88AB\\u4EFB\\u4F55\\u5176\\u4ED6\\u5BF9\\u8C61\\u5F15\\u7528\\uFF09\\u3002\"}),`\n`]}),`\n`]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5206\\u4EE3\\u5783\\u573E\\u56DE\\u6536\"}),\"\\uFF1A\",`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:\"\\u5185\\u5B58\\u88AB\\u5212\\u5206\\u4E3A\\u51E0\\u4EE3\\uFF1A\\u5E74\\u8F7B\\u4EE3\\u548C\\u8001\\u5E74\\u4EE3\\u3002\"}),`\n`,(0,r.jsx)(n.li,{children:\"\\u5BF9\\u8C61\\u6700\\u521D\\u5206\\u914D\\u5728\\u5E74\\u8F7B\\u4EE3\\u4E2D\\u3002\"}),`\n`,(0,r.jsx)(n.li,{children:\"\\u5B58\\u6D3B\\u4E86\\u591A\\u6B21\\u6536\\u96C6\\u7684\\u5BF9\\u8C61\\u88AB\\u63D0\\u5347\\u5230\\u8001\\u5E74\\u4EE3\\u3002\"}),`\n`,(0,r.jsx)(n.li,{children:\"\\u5E74\\u8F7B\\u4EE3\\u6536\\u96C6\\u66F4\\u9891\\u7E41\\u4E14\\u66F4\\u5FEB\\uFF0C\\u800C\\u8001\\u5E74\\u4EE3\\u6536\\u96C6\\u4E0D\\u592A\\u9891\\u7E41\\uFF0C\\u4F46\\u6DB5\\u76D6\\u66F4\\u591A\\u5BF9\\u8C61\\u3002\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,r.jsx)(n.h3,{children:\"JavaScript \\u5F15\\u64CE\\u5B9E\\u73B0\"}),`\n`,(0,r.jsx)(n.p,{children:\"\\u4E0D\\u540C\\u7684 JavaScript \\u5F15\\u64CE\\u4F7F\\u7528\\u8FD9\\u4E9B\\u7B97\\u6CD5\\u7684\\u53D8\\u4F53\\uFF1A\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"V8 (Google Chrome, Node.js)\"}),\"\\uFF1A\\u4F7F\\u7528\\u5206\\u4EE3\\u3001\\u6807\\u8BB0\\u548C\\u6E05\\u9664\\u4EE5\\u53CA\\u5176\\u4ED6\\u4F18\\u5316\\u6765\\u9AD8\\u6548\\u5730\\u8FDB\\u884C\\u5783\\u573E\\u56DE\\u6536\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"SpiderMonkey (Mozilla Firefox)\"}),\"\\uFF1A\\u4F7F\\u7528\\u589E\\u91CF\\u548C\\u5206\\u4EE3\\u5783\\u573E\\u56DE\\u6536\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"JavaScriptCore (Safari)\"}),\"\\uFF1A\\u4F7F\\u7528\\u5E26\\u6709\\u5206\\u4EE3\\u6536\\u96C6\\u7684\\u6807\\u8BB0\\u548C\\u6E05\\u9664\\u7B97\\u6CD5\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u5185\\u5B58\\u6CC4\\u6F0F\"}),`\n`,(0,r.jsx)(n.p,{children:\"\\u5F53\\u7A0B\\u5E8F\\u672A\\u80FD\\u91CA\\u653E\\u5B83\\u4E0D\\u518D\\u9700\\u8981\\u7684\\u5185\\u5B58\\u65F6\\uFF0CJavaScript \\u4E2D\\u5C31\\u4F1A\\u53D1\\u751F\\u5185\\u5B58\\u6CC4\\u6F0F\\uFF0C\\u5BFC\\u81F4\\u7A0B\\u5E8F\\u968F\\u7740\\u65F6\\u95F4\\u7684\\u63A8\\u79FB\\u6D88\\u8017\\u8D8A\\u6765\\u8D8A\\u591A\\u7684\\u5185\\u5B58\\u3002\"}),`\n`,(0,r.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684\\u5185\\u5B58\\u6CC4\\u6F0F\\u53EF\\u80FD\\u7531\\u4E8E\\u5404\\u79CD\\u539F\\u56E0\\u800C\\u53D1\\u751F\\uFF0C\\u5305\\u62EC\\uFF1A\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u610F\\u5916\\u7684\\u5168\\u5C40\\u53D8\\u91CF\"}),\"\\uFF1A\\u65E0\\u610F\\u4E2D\\u521B\\u5EFA\\u5168\\u5C40\\u53D8\\u91CF\\uFF0C\\u5373\\u4F7F\\u4E0D\\u518D\\u9700\\u8981\\u5B83\\u4EEC\\uFF0C\\u8FD9\\u4E9B\\u53D8\\u91CF\\u4ECD\\u7136\\u4FDD\\u7559\\u5728\\u5185\\u5B58\\u4E2D\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u95ED\\u5305\"}),\"\\uFF1A\\u4E0D\\u6B63\\u786E\\u5730\\u4F7F\\u7528\\u95ED\\u5305\\uFF0C\\u5176\\u4E2D\\u5185\\u90E8\\u51FD\\u6570\\u4FDD\\u7559\\u5BF9\\u6765\\u81EA\\u5916\\u90E8\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\\u7684\\u53D8\\u91CF\\u7684\\u5F15\\u7528\\uFF0C\\u963B\\u6B62\\u5916\\u90E8\\u51FD\\u6570\\u7684\\u4F5C\\u7528\\u57DF\\u88AB\\u5783\\u573E\\u56DE\\u6536\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\"}),\"\\uFF1A\\u5F53\\u4E0D\\u518D\\u9700\\u8981\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u6216\\u56DE\\u8C03\\u65F6\\uFF0C\\u672A\\u80FD\\u5220\\u9664\\u5B83\\u4EEC\\uFF0C\\u5BFC\\u81F4\\u76F8\\u5173\\u5BF9\\u8C61\\u4FDD\\u7559\\u5728\\u5185\\u5B58\\u4E2D\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u7F13\\u5B58\"}),\"\\uFF1A\\u5B9E\\u73B0\\u7F13\\u5B58\\u65F6\\u6CA1\\u6709\\u9002\\u5F53\\u7684\\u9010\\u51FA\\u903B\\u8F91\\uFF0C\\u5BFC\\u81F4\\u968F\\u7740\\u65F6\\u95F4\\u7684\\u63A8\\u79FB\\u5185\\u5B58\\u65E0\\u754C\\u589E\\u957F\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5206\\u79BB\\u7684 DOM \\u8282\\u70B9\\u5F15\\u7528\"}),\"\\uFF1A\\u4FDD\\u7559\\u5BF9\\u5206\\u79BB\\u7684 DOM \\u8282\\u70B9\\u7684\\u5F15\\u7528\\uFF0C\\u963B\\u6B62\\u5B83\\u4EEC\\u88AB\\u5783\\u573E\\u56DE\\u6536\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u88AB\\u9057\\u5FD8\\u7684\\u8BA1\\u65F6\\u5668\\u6216\\u56DE\\u8C03\"}),\"\\uFF1A\\u672A\\u80FD\\u6E05\\u9664\\u8BA1\\u65F6\\u5668\\u6216\\u56DE\\u8C03\\uFF0C\\u5BFC\\u81F4\\u5B83\\u4EEC\\u7684\\u76F8\\u5173\\u6570\\u636E\\u4FDD\\u7559\\u5728\\u5185\\u5B58\\u4E2D\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.p,{children:\"\\u4E3A\\u4E86\\u907F\\u514D\\u5185\\u5B58\\u6CC4\\u6F0F\\uFF1A\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5220\\u9664\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\"}),\"\\uFF1A\\u5F53\\u4E0D\\u518D\\u9700\\u8981\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u65F6\\uFF0C\\u59CB\\u7EC8\\u5220\\u9664\\u5B83\\u4EEC\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u6E05\\u9664\\u95ED\\u5305\\u4E2D\\u7684\\u5F15\\u7528\"}),\"\\uFF1A\\u907F\\u514D\\u5728\\u95ED\\u5305\\u4E2D\\u4FDD\\u7559\\u4E0D\\u5FC5\\u8981\\u7684\\u5F15\\u7528\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u7BA1\\u7406 DOM \\u5F15\\u7528\"}),\"\\uFF1A\\u5F53\\u4E0D\\u518D\\u9700\\u8981 DOM \\u8282\\u70B9\\u53CA\\u5176\\u5F15\\u7528\\u65F6\\uFF0C\\u663E\\u5F0F\\u5220\\u9664\\u5B83\\u4EEC\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u907F\\u514D\\u5168\\u5C40\\u53D8\\u91CF\"}),\"\\uFF1A\\u5C3D\\u91CF\\u51CF\\u5C11\\u5168\\u5C40\\u53D8\\u91CF\\u7684\\u4F7F\\u7528\\uFF0C\\u4EE5\\u964D\\u4F4E\\u65E0\\u610F\\u4E2D\\u4FDD\\u6301\\u5F15\\u7528\\u5B58\\u6D3B\\u7684\\u98CE\\u9669\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Garbage_collection\",children:\"\\u5783\\u573E\\u56DE\\u6536 - MDN\"})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_management\",children:\"\\u5185\\u5B58\\u7BA1\\u7406\"})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://www.linkedin.com/pulse/understanding-memory-management-garbage-collection-aayush-patniya\",children:\"\\u4E86\\u89E3 JavaScript \\u4E2D\\u7684\\u5185\\u5B58\\u7BA1\\u7406\\u548C\\u5783\\u573E\\u56DE\\u6536\"})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://www.calibraint.com/blog/garbage-collection-in-javascript\",children:\"JavaScript \\u5185\\u5B58\\u7BA1\\u7406\\uFF1AJavaScript \\u4E2D\\u5783\\u573E\\u56DE\\u6536\\u7684\\u7EFC\\u5408\\u6307\\u5357\"})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://javascript.info/garbage-collection\",children:\"\\u5783\\u573E\\u56DE\\u6536 - javascript.info\"})}),`\n`]})]})}function s(i={}){let{wrapper:n}=i.components||{};return n?(0,r.jsx)(n,{...i,children:(0,r.jsx)(o,{...i})}):o(i)}return M(D);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/en-US.json b/apps/web/src/__generated__/questions/quiz/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/en-US.json
index ff003c7d1..fa0af6921 100644
--- a/apps/web/src/__generated__/questions/quiz/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},o=(t,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!f.call(t,r)&&r!==i&&a(t,r,{get:()=>e[r],enumerable:!(c=p(e,r))||c.enumerable});return t};var w=(t,e,i)=>(i=t!=null?d(m(t)):{},o(e||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),D=t=>o(a({},\"__esModule\",{value:!0}),t);var l=g((x,h)=>{h.exports=_jsx_runtime});var b={};v(b,{default:()=>y,frontmatter:()=>M});var n=w(l()),M={title:\"How does virtual DOM in React work? What are its benefits and downsides?\"};function s(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",ul:\"ul\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:'The virtual DOM in React is a lightweight copy of the actual DOM. When the state of a component changes, React creates a new virtual DOM tree and compares it with the previous one using a process called \"reconciliation.\" Only the differences are then updated in the actual DOM, making updates more efficient. The benefits include improved performance and a more declarative way to manage UI. However, it can add complexity and may not be as performant for very simple applications.'}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How does virtual DOM in React work?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"What is the virtual DOM?\"}),`\n`,(0,n.jsx)(e.p,{children:'The virtual DOM is a concept where a virtual representation of the UI is kept in memory and synced with the real DOM by a library such as React. This process is called \"reconciliation.\"'}),`\n`,(0,n.jsx)(e.h3,{children:\"How does it work?\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Initial render\"}),\": When a React component is first rendered, a virtual DOM tree is created. This tree is a lightweight copy of the actual DOM.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"State change\"}),\": When the state of a component changes, React creates a new virtual DOM tree.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Diffing\"}),': React compares the new virtual DOM tree with the previous one to find the differences. This process is known as \"diffing.\"']}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reconciliation\"}),\": React updates only the parts of the actual DOM that have changed, based on the differences found during the diffing process.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Code example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import { useState } from 'react';\n\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n\n  const increment = () => setCount(count + 1);\n\n  return (\n    <div>\n      <p>{count}</p>\n      <button onClick={increment}>Increment</button>\n    </div>\n  );\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, when the button is clicked, the state changes, triggering a new virtual DOM tree to be created. React then compares this new tree with the previous one and updates only the \",(0,n.jsx)(e.code,{children:\"<p>\"}),\" element in the actual DOM.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Benefits of virtual DOM\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Improved performance\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Efficient updates\"}),\": By updating only the parts of the DOM that have changed, React minimizes the number of costly DOM operations.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Batch updates\"}),\": React can batch multiple updates together, reducing the number of re-renders.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Declarative UI\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Simplified development\"}),\": Developers can describe what the UI should look like for a given state, and React takes care of updating the DOM to match that state.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Cross-platform\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"React Native\"}),\": The virtual DOM concept allows React to be used for mobile app development with React Native, providing a consistent development experience across platforms.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Downsides of virtual DOM\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Complexity\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Learning curve\"}),\": Understanding how the virtual DOM works and how to optimize components can be challenging for beginners.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Overhead\"}),\": For very simple applications, the overhead of maintaining a virtual DOM may not be justified.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Performance limitations\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Not a silver bullet\"}),\": While the virtual DOM improves performance for many use cases, it may not be as performant as manual DOM manipulation for very specific, highly optimized scenarios.\"]}),`\n`]}),`\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://react.dev/learn/render-and-commit\",children:\"React Docs on Reconciliation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/what-is-the-virtual-dom-in-react/\",children:\"What is the Virtual DOM in React?\"})}),`\n`]})]})}function O(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(s,t)})):s(t)}var y=O;return D(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},c=(t,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!g.call(t,r)&&r!==i&&a(t,r,{get:()=>e[r],enumerable:!(o=u(e,r))||o.enumerable});return t};var D=(t,e,i)=>(i=t!=null?p(f(t)):{},c(e||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),M=t=>c(a({},\"__esModule\",{value:!0}),t);var l=v((R,h)=>{h.exports=_jsx_runtime});var y={};w(y,{default:()=>d,frontmatter:()=>O});var n=D(l()),O={title:\"How does virtual DOM in React work? What are its benefits and downsides?\"};function s(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:'The virtual DOM in React is a lightweight copy of the actual DOM. When the state of a component changes, React creates a new virtual DOM tree and compares it with the previous one using a process called \"reconciliation.\" Only the differences are then updated in the actual DOM, making updates more efficient. The benefits include improved performance and a more declarative way to manage UI. However, it can add complexity and may not be as performant for very simple applications.'}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"How does virtual DOM in React work?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"What is the virtual DOM?\"}),`\n`,(0,n.jsx)(e.p,{children:'The virtual DOM is a concept where a virtual representation of the UI is kept in memory and synced with the real DOM by a library such as React. This process is called \"reconciliation.\"'}),`\n`,(0,n.jsx)(e.h3,{children:\"How does it work?\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Initial render\"}),\": When a React component is first rendered, a virtual DOM tree is created. This tree is a lightweight copy of the actual DOM.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"State change\"}),\": When the state of a component changes, React creates a new virtual DOM tree.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Diffing\"}),': React compares the new virtual DOM tree with the previous one to find the differences. This process is known as \"diffing.\"']}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reconciliation\"}),\": React updates only the parts of the actual DOM that have changed, based on the differences found during the diffing process.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Code example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import { useState } from 'react';\n\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n\n  const increment = () => setCount(count + 1);\n\n  return (\n    <div>\n      <p>{count}</p>\n      <button onClick={increment}>Increment</button>\n    </div>\n  );\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, when the button is clicked, the state changes, triggering a new virtual DOM tree to be created. React then compares this new tree with the previous one and updates only the \",(0,n.jsx)(e.code,{children:\"<p>\"}),\" element in the actual DOM.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Benefits of virtual DOM\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Improved performance\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Efficient updates\"}),\": By updating only the parts of the DOM that have changed, React minimizes the number of costly DOM operations.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Batch updates\"}),\": React can batch multiple updates together, reducing the number of re-renders.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Declarative UI\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Simplified development\"}),\": Developers can describe what the UI should look like for a given state, and React takes care of updating the DOM to match that state.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Cross-platform\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"React Native\"}),\": The virtual DOM concept allows React to be used for mobile app development with React Native, providing a consistent development experience across platforms.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Downsides of virtual DOM\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Complexity\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Learning curve\"}),\": Understanding how the virtual DOM works and how to optimize components can be challenging for beginners.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Overhead\"}),\": For very simple applications, the overhead of maintaining a virtual DOM may not be justified.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Performance limitations\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Not a silver bullet\"}),\": While the virtual DOM improves performance for many use cases, it may not be as performant as manual DOM manipulation for very specific, highly optimized scenarios.\"]}),`\n`]}),`\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://react.dev/learn/render-and-commit\",children:\"React Docs on Reconciliation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/what-is-the-virtual-dom-in-react/\",children:\"What is the Virtual DOM in React?\"})}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(s,{...t})}):s(t)}return M(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/zh-CN.json
index 3c9476646..57d21f651 100644
--- a/apps/web/src/__generated__/questions/quiz/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var g=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),m=(c,n)=>{for(var r in n)i(c,r,{get:n[r],enumerable:!0})},h=(c,n,r,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of M(n))!O.call(c,t)&&t!==r&&i(c,t,{get:()=>n[t],enumerable:!(l=D(n,t))||l.enumerable});return c};var R=(c,n,r)=>(r=c!=null?s(u(c)):{},h(n||!c||!c.__esModule?i(r,\"default\",{value:c,enumerable:!0}):r,c)),p=c=>h(i({},\"__esModule\",{value:!0}),c);var o=g((w,d)=>{d.exports=_jsx_runtime});var _={};m(_,{default:()=>j,frontmatter:()=>f});var e=R(o()),f={title:\"React \\u4E2D\\u7684\\u865A\\u62DF DOM \\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\\u5B83\\u6709\\u54EA\\u4E9B\\u4F18\\u70B9\\u548C\\u7F3A\\u70B9\\uFF1F\"};function a(c){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",ul:\"ul\",a:\"a\"},c.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u4E2D\\u7684\\u865A\\u62DF DOM \\u662F\\u5B9E\\u9645 DOM \\u7684\\u8F7B\\u91CF\\u7EA7\\u526F\\u672C\\u3002\\u5F53\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0CReact \\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\uFF0C\\u5E76\\u4F7F\\u7528\\u79F0\\u4E3A\\u201C\\u534F\\u8C03\\u201D\\u7684\\u8FC7\\u7A0B\\u5C06\\u5176\\u4E0E\\u4E4B\\u524D\\u7684\\u6811\\u8FDB\\u884C\\u6BD4\\u8F83\\u3002\\u7136\\u540E\\uFF0C\\u53EA\\u6709\\u5DEE\\u5F02\\u4F1A\\u5728\\u5B9E\\u9645 DOM \\u4E2D\\u66F4\\u65B0\\uFF0C\\u4ECE\\u800C\\u4F7F\\u66F4\\u65B0\\u66F4\\u6709\\u6548\\u3002\\u4F18\\u70B9\\u5305\\u62EC\\u63D0\\u9AD8\\u6027\\u80FD\\u548C\\u66F4\\u5177\\u58F0\\u660E\\u6027\\u7684\\u65B9\\u5F0F\\u6765\\u7BA1\\u7406 UI\\u3002\\u4F46\\u662F\\uFF0C\\u5B83\\u53EF\\u80FD\\u4F1A\\u589E\\u52A0\\u590D\\u6742\\u6027\\uFF0C\\u5E76\\u4E14\\u5BF9\\u4E8E\\u975E\\u5E38\\u7B80\\u5355\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u53EF\\u80FD\\u6CA1\\u6709\\u90A3\\u4E48\\u9AD8\\u7684\\u6027\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u4E2D\\u7684\\u865A\\u62DF DOM \\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EC0\\u4E48\\u662F\\u865A\\u62DF DOM\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u865A\\u62DF DOM \\u662F\\u4E00\\u4E2A\\u6982\\u5FF5\\uFF0C\\u5176\\u4E2D UI \\u7684\\u865A\\u62DF\\u8868\\u793A\\u5F62\\u5F0F\\u4FDD\\u5B58\\u5728\\u5185\\u5B58\\u4E2D\\uFF0C\\u5E76\\u901A\\u8FC7 React \\u7B49\\u5E93\\u4E0E\\u771F\\u5B9E\\u7684 DOM \\u540C\\u6B65\\u3002\\u6B64\\u8FC7\\u7A0B\\u79F0\\u4E3A\\u201C\\u534F\\u8C03\\u201D\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B83\\u662F\\u5982\\u4F55\\u5DE5\\u4F5C\\u7684\\uFF1F\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u521D\\u59CB\\u6E32\\u67D3\"}),\"\\uFF1A\\u9996\\u6B21\\u6E32\\u67D3 React \\u7EC4\\u4EF6\\u65F6\\uFF0C\\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u865A\\u62DF DOM \\u6811\\u3002\\u6B64\\u6811\\u662F\\u5B9E\\u9645 DOM \\u7684\\u8F7B\\u91CF\\u7EA7\\u526F\\u672C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u72B6\\u6001\\u66F4\\u6539\"}),\"\\uFF1A\\u5F53\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0CReact \\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5DEE\\u5F02\"}),\"\\uFF1AReact \\u5C06\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\u4E0E\\u4E4B\\u524D\\u7684\\u6811\\u8FDB\\u884C\\u6BD4\\u8F83\\uFF0C\\u4EE5\\u627E\\u5230\\u5DEE\\u5F02\\u3002\\u6B64\\u8FC7\\u7A0B\\u79F0\\u4E3A\\u201C\\u5DEE\\u5F02\\u201D\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u534F\\u8C03\"}),\"\\uFF1AReact \\u4EC5\\u6839\\u636E\\u5728\\u5DEE\\u5F02\\u8FC7\\u7A0B\\u4E2D\\u627E\\u5230\\u7684\\u5DEE\\u5F02\\u6765\\u66F4\\u65B0\\u5B9E\\u9645 DOM \\u7684\\u90E8\\u5206\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EE3\\u7801\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`import { useState } from 'react';\n\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n\n  const increment = () => setCount(count + 1);\n\n  return (\n    <div>\n      <p>{count}</p>\n      <button onClick={increment}>Increment</button>\n    </div>\n  );\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u5F53\\u5355\\u51FB\\u6309\\u94AE\\u65F6\\uFF0C\\u72B6\\u6001\\u4F1A\\u53D1\\u751F\\u53D8\\u5316\\uFF0C\\u4ECE\\u800C\\u89E6\\u53D1\\u521B\\u5EFA\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\u3002\\u7136\\u540E\\uFF0CReact \\u5C06\\u6B64\\u65B0\\u6811\\u4E0E\\u4E4B\\u524D\\u7684\\u6811\\u8FDB\\u884C\\u6BD4\\u8F83\\uFF0C\\u5E76\\u4EC5\\u66F4\\u65B0\\u5B9E\\u9645 DOM \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"<p>\"}),\" \\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u865A\\u62DF DOM \\u7684\\u597D\\u5904\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u63D0\\u9AD8\\u6027\\u80FD\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9AD8\\u6548\\u66F4\\u65B0\"}),\"\\uFF1A\\u901A\\u8FC7\\u4EC5\\u66F4\\u65B0\\u5DF2\\u66F4\\u6539\\u7684 DOM \\u90E8\\u5206\\uFF0CReact \\u6700\\u5C0F\\u5316\\u4E86\\u6602\\u8D35\\u7684 DOM \\u64CD\\u4F5C\\u7684\\u6570\\u91CF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6279\\u91CF\\u66F4\\u65B0\"}),\"\\uFF1AReact \\u53EF\\u4EE5\\u5C06\\u591A\\u4E2A\\u66F4\\u65B0\\u6279\\u91CF\\u5904\\u7406\\u5728\\u4E00\\u8D77\\uFF0C\\u4ECE\\u800C\\u51CF\\u5C11\\u91CD\\u65B0\\u6E32\\u67D3\\u7684\\u6B21\\u6570\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u58F0\\u660E\\u5F0F UI\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7B80\\u5316\\u5F00\\u53D1\"}),\"\\uFF1A\\u5F00\\u53D1\\u4EBA\\u5458\\u53EF\\u4EE5\\u63CF\\u8FF0 UI \\u5728\\u7ED9\\u5B9A\\u72B6\\u6001\\u4E0B\\u5E94\\u8BE5\\u662F\\u4EC0\\u4E48\\u6837\\u5B50\\uFF0C\\u800C React \\u8D1F\\u8D23\\u66F4\\u65B0 DOM \\u4EE5\\u5339\\u914D\\u8BE5\\u72B6\\u6001\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8DE8\\u5E73\\u53F0\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"React Native\"}),\"\\uFF1A\\u865A\\u62DF DOM \\u6982\\u5FF5\\u5141\\u8BB8 React \\u7528\\u4E8E\\u4F7F\\u7528 React Native \\u8FDB\\u884C\\u79FB\\u52A8\\u5E94\\u7528\\u7A0B\\u5E8F\\u5F00\\u53D1\\uFF0C\\u4ECE\\u800C\\u5728\\u4E0D\\u540C\\u5E73\\u53F0\\u4E0A\\u63D0\\u4F9B\\u4E00\\u81F4\\u7684\\u5F00\\u53D1\\u4F53\\u9A8C\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u865A\\u62DF DOM \\u7684\\u7F3A\\u70B9\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u590D\\u6742\\u6027\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B66\\u4E60\\u66F2\\u7EBF\"}),\"\\uFF1A\\u5BF9\\u4E8E\\u521D\\u5B66\\u8005\\u6765\\u8BF4\\uFF0C\\u7406\\u89E3\\u865A\\u62DF DOM \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\u4EE5\\u53CA\\u5982\\u4F55\\u4F18\\u5316\\u7EC4\\u4EF6\\u53EF\\u80FD\\u5177\\u6709\\u6311\\u6218\\u6027\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5F00\\u9500\"}),\"\\uFF1A\\u5BF9\\u4E8E\\u975E\\u5E38\\u7B80\\u5355\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u7EF4\\u62A4\\u865A\\u62DF DOM \\u7684\\u5F00\\u9500\\u53EF\\u80FD\\u4E0D\\u5408\\u7406\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6027\\u80FD\\u9650\\u5236\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5E76\\u975E\\u4E07\\u80FD\\u836F\"}),\"\\uFF1A\\u867D\\u7136\\u865A\\u62DF DOM \\u6539\\u5584\\u4E86\\u8BB8\\u591A\\u7528\\u4F8B\\u7684\\u6027\\u80FD\\uFF0C\\u4F46\\u5728\\u975E\\u5E38\\u5177\\u4F53\\u3001\\u9AD8\\u5EA6\\u4F18\\u5316\\u7684\\u573A\\u666F\\u4E2D\\uFF0C\\u5B83\\u7684\\u6027\\u80FD\\u53EF\\u80FD\\u4E0D\\u5982\\u624B\\u52A8 DOM \\u64CD\\u4F5C\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/render-and-commit\",children:\"React Docs on Reconciliation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/what-is-the-virtual-dom-in-react/\",children:\"What is the Virtual DOM in React?\"})}),`\n`]})]})}function x(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,Object.assign({},c,{children:(0,e.jsx)(a,c)})):a(c)}var j=x;return p(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var D=Object.create;var i=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var O=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var R=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),p=(r,n)=>{for(var c in n)i(r,c,{get:n[c],enumerable:!0})},h=(r,n,c,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of u(n))!m.call(r,t)&&t!==c&&i(r,t,{get:()=>n[t],enumerable:!(l=M(n,t))||l.enumerable});return r};var g=(r,n,c)=>(c=r!=null?D(O(r)):{},h(n||!r||!r.__esModule?i(c,\"default\",{value:r,enumerable:!0}):c,r)),f=r=>h(i({},\"__esModule\",{value:!0}),r);var o=R((v,d)=>{d.exports=_jsx_runtime});var _={};p(_,{default:()=>s,frontmatter:()=>x});var e=g(o()),x={title:\"React \\u4E2D\\u7684\\u865A\\u62DF DOM \\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\\u5B83\\u6709\\u54EA\\u4E9B\\u4F18\\u70B9\\u548C\\u7F3A\\u70B9\\uFF1F\"};function a(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u4E2D\\u7684\\u865A\\u62DF DOM \\u662F\\u5B9E\\u9645 DOM \\u7684\\u8F7B\\u91CF\\u7EA7\\u526F\\u672C\\u3002\\u5F53\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0CReact \\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\uFF0C\\u5E76\\u4F7F\\u7528\\u79F0\\u4E3A\\u201C\\u534F\\u8C03\\u201D\\u7684\\u8FC7\\u7A0B\\u5C06\\u5176\\u4E0E\\u4E4B\\u524D\\u7684\\u6811\\u8FDB\\u884C\\u6BD4\\u8F83\\u3002\\u7136\\u540E\\uFF0C\\u53EA\\u6709\\u5DEE\\u5F02\\u4F1A\\u5728\\u5B9E\\u9645 DOM \\u4E2D\\u66F4\\u65B0\\uFF0C\\u4ECE\\u800C\\u4F7F\\u66F4\\u65B0\\u66F4\\u6709\\u6548\\u3002\\u4F18\\u70B9\\u5305\\u62EC\\u63D0\\u9AD8\\u6027\\u80FD\\u548C\\u66F4\\u5177\\u58F0\\u660E\\u6027\\u7684\\u65B9\\u5F0F\\u6765\\u7BA1\\u7406 UI\\u3002\\u4F46\\u662F\\uFF0C\\u5B83\\u53EF\\u80FD\\u4F1A\\u589E\\u52A0\\u590D\\u6742\\u6027\\uFF0C\\u5E76\\u4E14\\u5BF9\\u4E8E\\u975E\\u5E38\\u7B80\\u5355\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u53EF\\u80FD\\u6CA1\\u6709\\u90A3\\u4E48\\u9AD8\\u7684\\u6027\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u4E2D\\u7684\\u865A\\u62DF DOM \\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EC0\\u4E48\\u662F\\u865A\\u62DF DOM\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u865A\\u62DF DOM \\u662F\\u4E00\\u4E2A\\u6982\\u5FF5\\uFF0C\\u5176\\u4E2D UI \\u7684\\u865A\\u62DF\\u8868\\u793A\\u5F62\\u5F0F\\u4FDD\\u5B58\\u5728\\u5185\\u5B58\\u4E2D\\uFF0C\\u5E76\\u901A\\u8FC7 React \\u7B49\\u5E93\\u4E0E\\u771F\\u5B9E\\u7684 DOM \\u540C\\u6B65\\u3002\\u6B64\\u8FC7\\u7A0B\\u79F0\\u4E3A\\u201C\\u534F\\u8C03\\u201D\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B83\\u662F\\u5982\\u4F55\\u5DE5\\u4F5C\\u7684\\uFF1F\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u521D\\u59CB\\u6E32\\u67D3\"}),\"\\uFF1A\\u9996\\u6B21\\u6E32\\u67D3 React \\u7EC4\\u4EF6\\u65F6\\uFF0C\\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u865A\\u62DF DOM \\u6811\\u3002\\u6B64\\u6811\\u662F\\u5B9E\\u9645 DOM \\u7684\\u8F7B\\u91CF\\u7EA7\\u526F\\u672C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u72B6\\u6001\\u66F4\\u6539\"}),\"\\uFF1A\\u5F53\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0CReact \\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5DEE\\u5F02\"}),\"\\uFF1AReact \\u5C06\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\u4E0E\\u4E4B\\u524D\\u7684\\u6811\\u8FDB\\u884C\\u6BD4\\u8F83\\uFF0C\\u4EE5\\u627E\\u5230\\u5DEE\\u5F02\\u3002\\u6B64\\u8FC7\\u7A0B\\u79F0\\u4E3A\\u201C\\u5DEE\\u5F02\\u201D\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u534F\\u8C03\"}),\"\\uFF1AReact \\u4EC5\\u6839\\u636E\\u5728\\u5DEE\\u5F02\\u8FC7\\u7A0B\\u4E2D\\u627E\\u5230\\u7684\\u5DEE\\u5F02\\u6765\\u66F4\\u65B0\\u5B9E\\u9645 DOM \\u7684\\u90E8\\u5206\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EE3\\u7801\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`import { useState } from 'react';\n\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n\n  const increment = () => setCount(count + 1);\n\n  return (\n    <div>\n      <p>{count}</p>\n      <button onClick={increment}>Increment</button>\n    </div>\n  );\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u5F53\\u5355\\u51FB\\u6309\\u94AE\\u65F6\\uFF0C\\u72B6\\u6001\\u4F1A\\u53D1\\u751F\\u53D8\\u5316\\uFF0C\\u4ECE\\u800C\\u89E6\\u53D1\\u521B\\u5EFA\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\u3002\\u7136\\u540E\\uFF0CReact \\u5C06\\u6B64\\u65B0\\u6811\\u4E0E\\u4E4B\\u524D\\u7684\\u6811\\u8FDB\\u884C\\u6BD4\\u8F83\\uFF0C\\u5E76\\u4EC5\\u66F4\\u65B0\\u5B9E\\u9645 DOM \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"<p>\"}),\" \\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u865A\\u62DF DOM \\u7684\\u597D\\u5904\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u63D0\\u9AD8\\u6027\\u80FD\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9AD8\\u6548\\u66F4\\u65B0\"}),\"\\uFF1A\\u901A\\u8FC7\\u4EC5\\u66F4\\u65B0\\u5DF2\\u66F4\\u6539\\u7684 DOM \\u90E8\\u5206\\uFF0CReact \\u6700\\u5C0F\\u5316\\u4E86\\u6602\\u8D35\\u7684 DOM \\u64CD\\u4F5C\\u7684\\u6570\\u91CF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6279\\u91CF\\u66F4\\u65B0\"}),\"\\uFF1AReact \\u53EF\\u4EE5\\u5C06\\u591A\\u4E2A\\u66F4\\u65B0\\u6279\\u91CF\\u5904\\u7406\\u5728\\u4E00\\u8D77\\uFF0C\\u4ECE\\u800C\\u51CF\\u5C11\\u91CD\\u65B0\\u6E32\\u67D3\\u7684\\u6B21\\u6570\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u58F0\\u660E\\u5F0F UI\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7B80\\u5316\\u5F00\\u53D1\"}),\"\\uFF1A\\u5F00\\u53D1\\u4EBA\\u5458\\u53EF\\u4EE5\\u63CF\\u8FF0 UI \\u5728\\u7ED9\\u5B9A\\u72B6\\u6001\\u4E0B\\u5E94\\u8BE5\\u662F\\u4EC0\\u4E48\\u6837\\u5B50\\uFF0C\\u800C React \\u8D1F\\u8D23\\u66F4\\u65B0 DOM \\u4EE5\\u5339\\u914D\\u8BE5\\u72B6\\u6001\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8DE8\\u5E73\\u53F0\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"React Native\"}),\"\\uFF1A\\u865A\\u62DF DOM \\u6982\\u5FF5\\u5141\\u8BB8 React \\u7528\\u4E8E\\u4F7F\\u7528 React Native \\u8FDB\\u884C\\u79FB\\u52A8\\u5E94\\u7528\\u7A0B\\u5E8F\\u5F00\\u53D1\\uFF0C\\u4ECE\\u800C\\u5728\\u4E0D\\u540C\\u5E73\\u53F0\\u4E0A\\u63D0\\u4F9B\\u4E00\\u81F4\\u7684\\u5F00\\u53D1\\u4F53\\u9A8C\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u865A\\u62DF DOM \\u7684\\u7F3A\\u70B9\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u590D\\u6742\\u6027\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B66\\u4E60\\u66F2\\u7EBF\"}),\"\\uFF1A\\u5BF9\\u4E8E\\u521D\\u5B66\\u8005\\u6765\\u8BF4\\uFF0C\\u7406\\u89E3\\u865A\\u62DF DOM \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\u4EE5\\u53CA\\u5982\\u4F55\\u4F18\\u5316\\u7EC4\\u4EF6\\u53EF\\u80FD\\u5177\\u6709\\u6311\\u6218\\u6027\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5F00\\u9500\"}),\"\\uFF1A\\u5BF9\\u4E8E\\u975E\\u5E38\\u7B80\\u5355\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u7EF4\\u62A4\\u865A\\u62DF DOM \\u7684\\u5F00\\u9500\\u53EF\\u80FD\\u4E0D\\u5408\\u7406\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6027\\u80FD\\u9650\\u5236\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5E76\\u975E\\u4E07\\u80FD\\u836F\"}),\"\\uFF1A\\u867D\\u7136\\u865A\\u62DF DOM \\u6539\\u5584\\u4E86\\u8BB8\\u591A\\u7528\\u4F8B\\u7684\\u6027\\u80FD\\uFF0C\\u4F46\\u5728\\u975E\\u5E38\\u5177\\u4F53\\u3001\\u9AD8\\u5EA6\\u4F18\\u5316\\u7684\\u573A\\u666F\\u4E2D\\uFF0C\\u5B83\\u7684\\u6027\\u80FD\\u53EF\\u80FD\\u4E0D\\u5982\\u624B\\u52A8 DOM \\u64CD\\u4F5C\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/render-and-commit\",children:\"React Docs on Reconciliation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/what-is-the-virtual-dom-in-react/\",children:\"What is the Virtual DOM in React?\"})}),`\n`]})]})}function s(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(a,{...r})}):a(r)}return f(_);})();\n;return Component;"
 }
\ No newline at end of file
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 ba4e226b6..47d7f411c 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-is-promiseall-different-from-promiseallsettled/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),P=(o,e)=>{for(var s in e)n(o,s,{get:e[s],enumerable:!0})},t=(o,e,s,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of p(e))!f.call(o,l)&&l!==s&&n(o,l,{get:()=>e[l],enumerable:!(i=m(e,l))||i.enumerable});return o};var j=(o,e,s)=>(s=o!=null?d(u(o)):{},t(e||!o||!o.__esModule?n(s,\"default\",{value:o,enumerable:!0}):s,o)),g=o=>t(n({},\"__esModule\",{value:!0}),o);var c=v((_,a)=>{a.exports=_jsx_runtime});var x={};P(x,{default:()=>S,frontmatter:()=>b});var r=j(c()),b={title:\"How is `Promise.all()` different from `Promise.allSettled()`?\"};function h(o){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" and \",(0,r.jsx)(e.code,{children:\"Promise.allSettled()\"}),\" are both methods for handling multiple promises in JavaScript, but they behave differently. \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" waits for all promises to resolve and fails fast if any promise rejects, returning a single rejected promise. \",(0,r.jsx)(e.code,{children:\"Promise.allSettled()\"}),\", on the other hand, waits for all promises to settle (either resolve or reject) and returns an array of objects describing the outcome of each promise.\"]}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsxs)(e.h2,{children:[\"How is \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" different from \",(0,r.jsx)(e.code,{children:\"Promise.allSettled()\"}),\"?\"]}),`\n`,(0,r.jsx)(e.h3,{children:(0,r.jsx)(e.code,{children:\"Promise.all()\"})}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" takes an iterable of promises and returns a single promise that resolves when all of the input promises have resolved. If any of the input promises reject, the returned promise immediately rejects with the reason of the first promise that rejected.\"]}),`\n`,(0,r.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = Promise.resolve(3);\nconst promise2 = 42;\nconst promise3 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'foo');\n});\n\nPromise.all([promise1, promise2, promise3])\n  .then((values) => {\n    console.log(values); // [3, 42, 'foo']\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"In this example, \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" resolves with an array of results \",(0,r.jsx)(e.code,{children:\"[3, 42, 'foo']\"}),\" because all promises resolve successfully.\"]}),`\n`,(0,r.jsx)(e.h4,{children:\"Failure case\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = Promise.resolve(3);\nconst promise2 = Promise.reject('error');\nconst promise3 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'foo');\n});\n\nPromise.all([promise1, promise2, promise3])\n  .then((values) => {\n    console.log(values);\n  })\n  .catch((error) => {\n    console.error(error); // 'error'\n  });\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"In this example, \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" rejects immediately with the reason \",(0,r.jsx)(e.code,{children:\"'error'\"}),\" because \",(0,r.jsx)(e.code,{children:\"promise2\"}),\" rejects.\"]}),`\n`,(0,r.jsx)(e.h3,{children:(0,r.jsx)(e.code,{children:\"Promise.allSettled()\"})}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"Promise.allSettled()\"}),\" takes an iterable of promises and returns a single promise that resolves when all of the input promises have settled (either resolved or rejected). The returned promise resolves with an array of objects that each describe the outcome of each promise.\"]}),`\n`,(0,r.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = Promise.resolve(3);\nconst promise2 = 42;\nconst promise3 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'foo');\n});\n\nPromise.allSettled([promise1, promise2, promise3]).then((results) => {\n  results.forEach((result) => console.log(result));\n  // { status: 'fulfilled', value: 3 }\n  // { status: 'fulfilled', value: 42 }\n  // { status: 'fulfilled', value: 'foo' }\n});\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"In this example, \",(0,r.jsx)(e.code,{children:\"Promise.allSettled()\"}),\" resolves with an array of result objects, each indicating the status and value of the promises.\"]}),`\n`,(0,r.jsx)(e.h4,{children:\"Failure case\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = Promise.resolve(3);\nconst promise2 = Promise.reject('error');\nconst promise3 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'foo');\n});\n\nPromise.allSettled([promise1, promise2, promise3]).then((results) => {\n  results.forEach((result) => console.log(result));\n  // { status: 'fulfilled', value: 3 }\n  // { status: 'rejected', reason: 'error' }\n  // { status: 'fulfilled', value: 'foo' }\n});\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"In this example, \",(0,r.jsx)(e.code,{children:\"Promise.allSettled()\"}),\" resolves with an array of result objects, including the rejected promise with its reason.\"]}),`\n`,(0,r.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all\",children:\"MDN Web Docs: Promise.all()\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled\",children:\"MDN Web Docs: Promise.allSettled()\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://javascript.info/promise-api\",children:\"JavaScript.info: Promise API\"})}),`\n`]})]})}function w(o={}){let{wrapper:e}=o.components||{};return e?(0,r.jsx)(e,Object.assign({},o,{children:(0,r.jsx)(h,o)})):h(o)}var S=w;return g(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var P=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),j=(o,e)=>{for(var s in e)n(o,s,{get:e[s],enumerable:!0})},t=(o,e,s,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of u(e))!v.call(o,l)&&l!==s&&n(o,l,{get:()=>e[l],enumerable:!(i=p(e,l))||i.enumerable});return o};var g=(o,e,s)=>(s=o!=null?m(f(o)):{},t(e||!o||!o.__esModule?n(s,\"default\",{value:o,enumerable:!0}):s,o)),b=o=>t(n({},\"__esModule\",{value:!0}),o);var c=P((y,a)=>{a.exports=_jsx_runtime});var S={};j(S,{default:()=>d,frontmatter:()=>w});var r=g(c()),w={title:\"How is `Promise.all()` different from `Promise.allSettled()`?\"};function h(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" and \",(0,r.jsx)(e.code,{children:\"Promise.allSettled()\"}),\" are both methods for handling multiple promises in JavaScript, but they behave differently. \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" waits for all promises to resolve and fails fast if any promise rejects, returning a single rejected promise. \",(0,r.jsx)(e.code,{children:\"Promise.allSettled()\"}),\", on the other hand, waits for all promises to settle (either resolve or reject) and returns an array of objects describing the outcome of each promise.\"]}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsxs)(e.h2,{children:[\"How is \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" different from \",(0,r.jsx)(e.code,{children:\"Promise.allSettled()\"}),\"?\"]}),`\n`,(0,r.jsx)(e.h3,{children:(0,r.jsx)(e.code,{children:\"Promise.all()\"})}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" takes an iterable of promises and returns a single promise that resolves when all of the input promises have resolved. If any of the input promises reject, the returned promise immediately rejects with the reason of the first promise that rejected.\"]}),`\n`,(0,r.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = Promise.resolve(3);\nconst promise2 = 42;\nconst promise3 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'foo');\n});\n\nPromise.all([promise1, promise2, promise3])\n  .then((values) => {\n    console.log(values); // [3, 42, 'foo']\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"In this example, \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" resolves with an array of results \",(0,r.jsx)(e.code,{children:\"[3, 42, 'foo']\"}),\" because all promises resolve successfully.\"]}),`\n`,(0,r.jsx)(e.h4,{children:\"Failure case\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = Promise.resolve(3);\nconst promise2 = Promise.reject('error');\nconst promise3 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'foo');\n});\n\nPromise.all([promise1, promise2, promise3])\n  .then((values) => {\n    console.log(values);\n  })\n  .catch((error) => {\n    console.error(error); // 'error'\n  });\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"In this example, \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" rejects immediately with the reason \",(0,r.jsx)(e.code,{children:\"'error'\"}),\" because \",(0,r.jsx)(e.code,{children:\"promise2\"}),\" rejects.\"]}),`\n`,(0,r.jsx)(e.h3,{children:(0,r.jsx)(e.code,{children:\"Promise.allSettled()\"})}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"Promise.allSettled()\"}),\" takes an iterable of promises and returns a single promise that resolves when all of the input promises have settled (either resolved or rejected). The returned promise resolves with an array of objects that each describe the outcome of each promise.\"]}),`\n`,(0,r.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = Promise.resolve(3);\nconst promise2 = 42;\nconst promise3 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'foo');\n});\n\nPromise.allSettled([promise1, promise2, promise3]).then((results) => {\n  results.forEach((result) => console.log(result));\n  // { status: 'fulfilled', value: 3 }\n  // { status: 'fulfilled', value: 42 }\n  // { status: 'fulfilled', value: 'foo' }\n});\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"In this example, \",(0,r.jsx)(e.code,{children:\"Promise.allSettled()\"}),\" resolves with an array of result objects, each indicating the status and value of the promises.\"]}),`\n`,(0,r.jsx)(e.h4,{children:\"Failure case\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = Promise.resolve(3);\nconst promise2 = Promise.reject('error');\nconst promise3 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'foo');\n});\n\nPromise.allSettled([promise1, promise2, promise3]).then((results) => {\n  results.forEach((result) => console.log(result));\n  // { status: 'fulfilled', value: 3 }\n  // { status: 'rejected', reason: 'error' }\n  // { status: 'fulfilled', value: 'foo' }\n});\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"In this example, \",(0,r.jsx)(e.code,{children:\"Promise.allSettled()\"}),\" resolves with an array of result objects, including the rejected promise with its reason.\"]}),`\n`,(0,r.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all\",children:\"MDN Web Docs: Promise.all()\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled\",children:\"MDN Web Docs: Promise.allSettled()\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://javascript.info/promise-api\",children:\"JavaScript.info: Promise API\"})}),`\n`]})]})}function d(o={}){let{wrapper:e}=o.components||{};return e?(0,r.jsx)(e,{...o,children:(0,r.jsx)(h,{...o})}):h(o)}return b(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-is-promiseall-different-from-promiseallsettled/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-is-promiseall-different-from-promiseallsettled/zh-CN.json
index 6bf87d34c..a0f1c2337 100644
--- a/apps/web/src/__generated__/questions/quiz/how-is-promiseall-different-from-promiseallsettled/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-is-promiseall-different-from-promiseallsettled/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-is-promiseall-different-from-promiseallsettled/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var n=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),v=(o,e)=>{for(var s in e)n(o,s,{get:e[s],enumerable:!0})},t=(o,e,s,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of P(e))!u.call(o,l)&&l!==s&&n(o,l,{get:()=>e[l],enumerable:!(i=d(e,l))||i.enumerable});return o};var j=(o,e,s)=>(s=o!=null?h(p(o)):{},t(e||!o||!o.__esModule?n(s,\"default\",{value:o,enumerable:!0}):s,o)),g=o=>t(n({},\"__esModule\",{value:!0}),o);var m=f((w,c)=>{c.exports=_jsx_runtime});var _={};v(_,{default:()=>x,frontmatter:()=>S});var r=j(m()),S={title:\"Promise.all() \\u4E0E Promise.allSettled() \\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function a(o){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsx)(e.p,{children:\"Promise.all() \\u548C Promise.allSettled() \\u90FD\\u662F\\u7528\\u4E8E\\u5904\\u7406 JavaScript \\u4E2D\\u591A\\u4E2A Promise \\u7684\\u65B9\\u6CD5\\uFF0C\\u4F46\\u5B83\\u4EEC\\u7684\\u884C\\u4E3A\\u6709\\u6240\\u4E0D\\u540C\\u3002Promise.all() \\u7B49\\u5F85\\u6240\\u6709 Promise \\u90FD\\u88AB\\u89E3\\u51B3\\uFF0C\\u5982\\u679C\\u4EFB\\u4F55\\u4E00\\u4E2A Promise \\u88AB\\u62D2\\u7EDD\\uFF0C\\u5B83\\u4F1A\\u5FEB\\u901F\\u5931\\u8D25\\uFF0C\\u8FD4\\u56DE\\u4E00\\u4E2A\\u88AB\\u62D2\\u7EDD\\u7684 Promise\\u3002\\u53E6\\u4E00\\u65B9\\u9762\\uFF0CPromise.allSettled() \\u7B49\\u5F85\\u6240\\u6709 Promise \\u90FD\\u88AB\\u786E\\u5B9A\\uFF08\\u89E3\\u51B3\\u6216\\u62D2\\u7EDD\\uFF09\\uFF0C\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A\\u63CF\\u8FF0\\u6BCF\\u4E2A Promise \\u7ED3\\u679C\\u7684\\u5BF9\\u8C61\\u6570\\u7EC4\\u3002\"}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsx)(e.h2,{children:\"Promise.all() \\u4E0E Promise.allSettled() \\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"}),`\n`,(0,r.jsx)(e.h3,{children:\"Promise.all()\"}),`\n`,(0,r.jsx)(e.p,{children:\"Promise.all() \\u63A5\\u53D7\\u4E00\\u4E2A\\u53EF\\u8FED\\u4EE3\\u7684 Promise\\uFF0C\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A Promise\\uFF0C\\u5F53\\u6240\\u6709\\u8F93\\u5165\\u7684 Promise \\u90FD\\u5DF2\\u89E3\\u51B3\\u65F6\\uFF0C\\u8BE5 Promise \\u5C06\\u88AB\\u89E3\\u51B3\\u3002\\u5982\\u679C\\u4EFB\\u4F55\\u4E00\\u4E2A\\u8F93\\u5165\\u7684 Promise \\u88AB\\u62D2\\u7EDD\\uFF0C\\u5219\\u8FD4\\u56DE\\u7684 Promise \\u4F1A\\u7ACB\\u5373\\u88AB\\u62D2\\u7EDD\\uFF0C\\u5E76\\u5E26\\u6709\\u7B2C\\u4E00\\u4E2A\\u88AB\\u62D2\\u7EDD\\u7684 Promise \\u7684\\u539F\\u56E0\\u3002\"}),`\n`,(0,r.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = Promise.resolve(3);\nconst promise2 = 42;\nconst promise3 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'foo');\n});\n\nPromise.all([promise1, promise2, promise3])\n  .then((values) => {\n    console.log(values); // [3, 42, 'foo']\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0CPromise.all() \\u4F7F\\u7528\\u7ED3\\u679C\\u6570\\u7EC4 \",(0,r.jsx)(e.code,{children:\"[3, 42, 'foo']\"}),\" \\u8FDB\\u884C\\u89E3\\u6790\\uFF0C\\u56E0\\u4E3A\\u6240\\u6709 Promise \\u90FD\\u6210\\u529F\\u89E3\\u6790\\u3002\"]}),`\n`,(0,r.jsx)(e.h4,{children:\"\\u5931\\u8D25\\u60C5\\u51B5\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = Promise.resolve(3);\nconst promise2 = Promise.reject('error');\nconst promise3 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'foo');\n});\n\nPromise.all([promise1, promise2, promise3])\n  .then((values) => {\n    console.log(values);\n  })\n  .catch((error) => {\n    console.error(error); // 'error'\n  });\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0CPromise.all() \\u7ACB\\u5373\\u62D2\\u7EDD\\uFF0C\\u539F\\u56E0\\u662F \",(0,r.jsx)(e.code,{children:\"'error'\"}),\"\\uFF0C\\u56E0\\u4E3A \",(0,r.jsx)(e.code,{children:\"promise2\"}),\" \\u88AB\\u62D2\\u7EDD\\u3002\"]}),`\n`,(0,r.jsx)(e.h3,{children:\"Promise.allSettled()\"}),`\n`,(0,r.jsx)(e.p,{children:\"Promise.allSettled() \\u63A5\\u53D7\\u4E00\\u4E2A\\u53EF\\u8FED\\u4EE3\\u7684 Promise\\uFF0C\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A Promise\\uFF0C\\u5F53\\u6240\\u6709\\u8F93\\u5165\\u7684 Promise \\u90FD\\u5DF2\\u786E\\u5B9A\\uFF08\\u5DF2\\u89E3\\u51B3\\u6216\\u5DF2\\u62D2\\u7EDD\\uFF09\\u65F6\\uFF0C\\u8BE5 Promise \\u5C06\\u88AB\\u89E3\\u51B3\\u3002\\u8FD4\\u56DE\\u7684 Promise \\u4F7F\\u7528\\u4E00\\u4E2A\\u5BF9\\u8C61\\u6570\\u7EC4\\u8FDB\\u884C\\u89E3\\u6790\\uFF0C\\u6BCF\\u4E2A\\u5BF9\\u8C61\\u63CF\\u8FF0\\u6BCF\\u4E2A Promise \\u7684\\u7ED3\\u679C\\u3002\"}),`\n`,(0,r.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = Promise.resolve(3);\nconst promise2 = 42;\nconst promise3 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'foo');\n});\n\nPromise.allSettled([promise1, promise2, promise3]).then((results) => {\n  results.forEach((result) => console.log(result));\n  // { status: 'fulfilled', value: 3 }\n  // { status: 'fulfilled', value: 42 }\n  // { status: 'fulfilled', value: 'foo' }\n});\n`})}),`\n`,(0,r.jsx)(e.p,{children:\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0CPromise.allSettled() \\u4F7F\\u7528\\u7ED3\\u679C\\u5BF9\\u8C61\\u6570\\u7EC4\\u8FDB\\u884C\\u89E3\\u6790\\uFF0C\\u6BCF\\u4E2A\\u5BF9\\u8C61\\u6307\\u793A Promise \\u7684\\u72B6\\u6001\\u548C\\u503C\\u3002\"}),`\n`,(0,r.jsx)(e.h4,{children:\"\\u5931\\u8D25\\u60C5\\u51B5\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = Promise.resolve(3);\nconst promise2 = Promise.reject('error');\nconst promise3 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'foo');\n});\n\nPromise.allSettled([promise1, promise2, promise3]).then((results) => {\n  results.forEach((result) => console.log(result));\n  // { status: 'fulfilled', value: 3 }\n  // { status: 'rejected', reason: 'error' }\n  // { status: 'fulfilled', value: 'foo' }\n});\n`})}),`\n`,(0,r.jsx)(e.p,{children:\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0CPromise.allSettled() \\u4F7F\\u7528\\u7ED3\\u679C\\u5BF9\\u8C61\\u6570\\u7EC4\\u8FDB\\u884C\\u89E3\\u6790\\uFF0C\\u5305\\u62EC\\u88AB\\u62D2\\u7EDD\\u7684 Promise \\u53CA\\u5176\\u539F\\u56E0\\u3002\"}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all\",children:\"MDN Web \\u6587\\u6863\\uFF1APromise.all()\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled\",children:\"MDN Web \\u6587\\u6863\\uFF1APromise.allSettled()\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://zh.javascript.info/promise-api\",children:\"JavaScript.info\\uFF1APromise API\"})}),`\n`]})]})}function b(o={}){let{wrapper:e}=o.components||{};return e?(0,r.jsx)(e,Object.assign({},o,{children:(0,r.jsx)(a,o)})):a(o)}var x=b;return g(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var n=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),j=(o,e)=>{for(var l in e)n(o,l,{get:e[l],enumerable:!0})},t=(o,e,l,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!f.call(o,s)&&s!==l&&n(o,s,{get:()=>e[s],enumerable:!(i=P(e,s))||i.enumerable});return o};var g=(o,e,l)=>(l=o!=null?d(u(o)):{},t(e||!o||!o.__esModule?n(l,\"default\",{value:o,enumerable:!0}):l,o)),S=o=>t(n({},\"__esModule\",{value:!0}),o);var c=v((N,m)=>{m.exports=_jsx_runtime});var _={};j(_,{default:()=>h,frontmatter:()=>x});var r=g(c()),x={title:\"Promise.all() \\u4E0E Promise.allSettled() \\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function a(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsx)(e.p,{children:\"Promise.all() \\u548C Promise.allSettled() \\u90FD\\u662F\\u7528\\u4E8E\\u5904\\u7406 JavaScript \\u4E2D\\u591A\\u4E2A Promise \\u7684\\u65B9\\u6CD5\\uFF0C\\u4F46\\u5B83\\u4EEC\\u7684\\u884C\\u4E3A\\u6709\\u6240\\u4E0D\\u540C\\u3002Promise.all() \\u7B49\\u5F85\\u6240\\u6709 Promise \\u90FD\\u88AB\\u89E3\\u51B3\\uFF0C\\u5982\\u679C\\u4EFB\\u4F55\\u4E00\\u4E2A Promise \\u88AB\\u62D2\\u7EDD\\uFF0C\\u5B83\\u4F1A\\u5FEB\\u901F\\u5931\\u8D25\\uFF0C\\u8FD4\\u56DE\\u4E00\\u4E2A\\u88AB\\u62D2\\u7EDD\\u7684 Promise\\u3002\\u53E6\\u4E00\\u65B9\\u9762\\uFF0CPromise.allSettled() \\u7B49\\u5F85\\u6240\\u6709 Promise \\u90FD\\u88AB\\u786E\\u5B9A\\uFF08\\u89E3\\u51B3\\u6216\\u62D2\\u7EDD\\uFF09\\uFF0C\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A\\u63CF\\u8FF0\\u6BCF\\u4E2A Promise \\u7ED3\\u679C\\u7684\\u5BF9\\u8C61\\u6570\\u7EC4\\u3002\"}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsx)(e.h2,{children:\"Promise.all() \\u4E0E Promise.allSettled() \\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"}),`\n`,(0,r.jsx)(e.h3,{children:\"Promise.all()\"}),`\n`,(0,r.jsx)(e.p,{children:\"Promise.all() \\u63A5\\u53D7\\u4E00\\u4E2A\\u53EF\\u8FED\\u4EE3\\u7684 Promise\\uFF0C\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A Promise\\uFF0C\\u5F53\\u6240\\u6709\\u8F93\\u5165\\u7684 Promise \\u90FD\\u5DF2\\u89E3\\u51B3\\u65F6\\uFF0C\\u8BE5 Promise \\u5C06\\u88AB\\u89E3\\u51B3\\u3002\\u5982\\u679C\\u4EFB\\u4F55\\u4E00\\u4E2A\\u8F93\\u5165\\u7684 Promise \\u88AB\\u62D2\\u7EDD\\uFF0C\\u5219\\u8FD4\\u56DE\\u7684 Promise \\u4F1A\\u7ACB\\u5373\\u88AB\\u62D2\\u7EDD\\uFF0C\\u5E76\\u5E26\\u6709\\u7B2C\\u4E00\\u4E2A\\u88AB\\u62D2\\u7EDD\\u7684 Promise \\u7684\\u539F\\u56E0\\u3002\"}),`\n`,(0,r.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = Promise.resolve(3);\nconst promise2 = 42;\nconst promise3 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'foo');\n});\n\nPromise.all([promise1, promise2, promise3])\n  .then((values) => {\n    console.log(values); // [3, 42, 'foo']\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0CPromise.all() \\u4F7F\\u7528\\u7ED3\\u679C\\u6570\\u7EC4 \",(0,r.jsx)(e.code,{children:\"[3, 42, 'foo']\"}),\" \\u8FDB\\u884C\\u89E3\\u6790\\uFF0C\\u56E0\\u4E3A\\u6240\\u6709 Promise \\u90FD\\u6210\\u529F\\u89E3\\u6790\\u3002\"]}),`\n`,(0,r.jsx)(e.h4,{children:\"\\u5931\\u8D25\\u60C5\\u51B5\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = Promise.resolve(3);\nconst promise2 = Promise.reject('error');\nconst promise3 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'foo');\n});\n\nPromise.all([promise1, promise2, promise3])\n  .then((values) => {\n    console.log(values);\n  })\n  .catch((error) => {\n    console.error(error); // 'error'\n  });\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0CPromise.all() \\u7ACB\\u5373\\u62D2\\u7EDD\\uFF0C\\u539F\\u56E0\\u662F \",(0,r.jsx)(e.code,{children:\"'error'\"}),\"\\uFF0C\\u56E0\\u4E3A \",(0,r.jsx)(e.code,{children:\"promise2\"}),\" \\u88AB\\u62D2\\u7EDD\\u3002\"]}),`\n`,(0,r.jsx)(e.h3,{children:\"Promise.allSettled()\"}),`\n`,(0,r.jsx)(e.p,{children:\"Promise.allSettled() \\u63A5\\u53D7\\u4E00\\u4E2A\\u53EF\\u8FED\\u4EE3\\u7684 Promise\\uFF0C\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A Promise\\uFF0C\\u5F53\\u6240\\u6709\\u8F93\\u5165\\u7684 Promise \\u90FD\\u5DF2\\u786E\\u5B9A\\uFF08\\u5DF2\\u89E3\\u51B3\\u6216\\u5DF2\\u62D2\\u7EDD\\uFF09\\u65F6\\uFF0C\\u8BE5 Promise \\u5C06\\u88AB\\u89E3\\u51B3\\u3002\\u8FD4\\u56DE\\u7684 Promise \\u4F7F\\u7528\\u4E00\\u4E2A\\u5BF9\\u8C61\\u6570\\u7EC4\\u8FDB\\u884C\\u89E3\\u6790\\uFF0C\\u6BCF\\u4E2A\\u5BF9\\u8C61\\u63CF\\u8FF0\\u6BCF\\u4E2A Promise \\u7684\\u7ED3\\u679C\\u3002\"}),`\n`,(0,r.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = Promise.resolve(3);\nconst promise2 = 42;\nconst promise3 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'foo');\n});\n\nPromise.allSettled([promise1, promise2, promise3]).then((results) => {\n  results.forEach((result) => console.log(result));\n  // { status: 'fulfilled', value: 3 }\n  // { status: 'fulfilled', value: 42 }\n  // { status: 'fulfilled', value: 'foo' }\n});\n`})}),`\n`,(0,r.jsx)(e.p,{children:\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0CPromise.allSettled() \\u4F7F\\u7528\\u7ED3\\u679C\\u5BF9\\u8C61\\u6570\\u7EC4\\u8FDB\\u884C\\u89E3\\u6790\\uFF0C\\u6BCF\\u4E2A\\u5BF9\\u8C61\\u6307\\u793A Promise \\u7684\\u72B6\\u6001\\u548C\\u503C\\u3002\"}),`\n`,(0,r.jsx)(e.h4,{children:\"\\u5931\\u8D25\\u60C5\\u51B5\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = Promise.resolve(3);\nconst promise2 = Promise.reject('error');\nconst promise3 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'foo');\n});\n\nPromise.allSettled([promise1, promise2, promise3]).then((results) => {\n  results.forEach((result) => console.log(result));\n  // { status: 'fulfilled', value: 3 }\n  // { status: 'rejected', reason: 'error' }\n  // { status: 'fulfilled', value: 'foo' }\n});\n`})}),`\n`,(0,r.jsx)(e.p,{children:\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0CPromise.allSettled() \\u4F7F\\u7528\\u7ED3\\u679C\\u5BF9\\u8C61\\u6570\\u7EC4\\u8FDB\\u884C\\u89E3\\u6790\\uFF0C\\u5305\\u62EC\\u88AB\\u62D2\\u7EDD\\u7684 Promise \\u53CA\\u5176\\u539F\\u56E0\\u3002\"}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all\",children:\"MDN Web \\u6587\\u6863\\uFF1APromise.all()\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled\",children:\"MDN Web \\u6587\\u6863\\uFF1APromise.allSettled()\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://zh.javascript.info/promise-api\",children:\"JavaScript.info\\uFF1APromise API\"})}),`\n`]})]})}function h(o={}){let{wrapper:e}=o.components||{};return e?(0,r.jsx)(e,{...o,children:(0,r.jsx)(a,{...o})}):a(o)}return S(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-is-responsive-design-different-from-adaptive-design/en-US.json b/apps/web/src/__generated__/questions/quiz/how-is-responsive-design-different-from-adaptive-design/en-US.json
index cf30017cf..9597de35a 100644
--- a/apps/web/src/__generated__/questions/quiz/how-is-responsive-design-different-from-adaptive-design/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-is-responsive-design-different-from-adaptive-design/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var c=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),m=(t,e)=>{for(var i in e)o(t,i,{get:e[i],enumerable:!0})},r=(t,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!g.call(t,s)&&s!==i&&o(t,s,{get:()=>e[s],enumerable:!(a=u(e,s))||a.enumerable});return t};var b=(t,e,i)=>(i=t!=null?c(f(t)):{},r(e||!t||!t.__esModule?o(i,\"default\",{value:t,enumerable:!0}):i,t)),y=t=>r(o({},\"__esModule\",{value:!0}),t);var l=v((z,d)=>{d.exports=_jsx_runtime});var j={};m(j,{default:()=>k,frontmatter:()=>x});var n=b(l()),x={title:\"How is responsive design different from adaptive design?\"};function h(t){let e=Object.assign({p:\"p\",ul:\"ul\",li:\"li\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Both responsive and adaptive design attempt to optimize the user experience across different devices, adjusting for different viewport sizes, resolutions, usage contexts, control mechanisms, and so on.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Responsive design works on the principle of flexibility - a single fluid website that can look good on any device. Responsive websites use media queries, flexible grids, and responsive images to create a user experience that flexes and changes based on a multitude of factors. Like a single ball growing or shrinking to fit through several different hoops.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Adaptive design is more like the modern definition of progressive enhancement. Instead of one flexible design, adaptive design detects the device and other features and then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics. The site detects the type of device used and delivers the pre-set layout for that device. Instead of a single ball going through several different-sized hoops, you'd have several different balls to use depending on the hoop size.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Both of these methods have some issues that need to be weighed:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Responsive design can be quite challenging, as you're essentially using a single albeit responsive layout to fit all situations. How to set the media query breakpoints is one such challenge. Do you use standardized breakpoint values? Or, do you use breakpoints that make sense to your particular layout? What if that layout changes?\"}),`\n`,(0,n.jsx)(e.li,{children:\"Adaptive design generally requires user agent sniffing, or DPI detection, etc., all of which can prove unreliable.\"}),`\n`]})]})}function w(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var k=w;return y(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var i in e)o(t,i,{get:e[i],enumerable:!0})},r=(t,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of f(e))!v.call(t,s)&&s!==i&&o(t,s,{get:()=>e[s],enumerable:!(a=p(e,s))||a.enumerable});return t};var y=(t,e,i)=>(i=t!=null?u(g(t)):{},r(e||!t||!t.__esModule?o(i,\"default\",{value:t,enumerable:!0}):i,t)),x=t=>r(o({},\"__esModule\",{value:!0}),t);var l=m((j,d)=>{d.exports=_jsx_runtime});var k={};b(k,{default:()=>c,frontmatter:()=>w});var n=y(l()),w={title:\"How is responsive design different from adaptive design?\"};function h(t){let e={li:\"li\",p:\"p\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Both responsive and adaptive design attempt to optimize the user experience across different devices, adjusting for different viewport sizes, resolutions, usage contexts, control mechanisms, and so on.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Responsive design works on the principle of flexibility - a single fluid website that can look good on any device. Responsive websites use media queries, flexible grids, and responsive images to create a user experience that flexes and changes based on a multitude of factors. Like a single ball growing or shrinking to fit through several different hoops.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Adaptive design is more like the modern definition of progressive enhancement. Instead of one flexible design, adaptive design detects the device and other features and then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics. The site detects the type of device used and delivers the pre-set layout for that device. Instead of a single ball going through several different-sized hoops, you'd have several different balls to use depending on the hoop size.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Both of these methods have some issues that need to be weighed:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Responsive design can be quite challenging, as you're essentially using a single albeit responsive layout to fit all situations. How to set the media query breakpoints is one such challenge. Do you use standardized breakpoint values? Or, do you use breakpoints that make sense to your particular layout? What if that layout changes?\"}),`\n`,(0,n.jsx)(e.li,{children:\"Adaptive design generally requires user agent sniffing, or DPI detection, etc., all of which can prove unreliable.\"}),`\n`]})]})}function c(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return x(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-is-responsive-design-different-from-adaptive-design/pt-BR.json b/apps/web/src/__generated__/questions/quiz/how-is-responsive-design-different-from-adaptive-design/pt-BR.json
index 3b4764842..eba094cef 100644
--- a/apps/web/src/__generated__/questions/quiz/how-is-responsive-design-different-from-adaptive-design/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/how-is-responsive-design-different-from-adaptive-design/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var a in e)n(o,a,{get:e[a],enumerable:!0})},r=(o,e,a,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of l(e))!f.call(o,i)&&i!==a&&n(o,i,{get:()=>e[i],enumerable:!(t=m(e,i))||t.enumerable});return o};var b=(o,e,a)=>(a=o!=null?p(v(o)):{},r(e||!o||!o.__esModule?n(a,\"default\",{value:o,enumerable:!0}):a,o)),h=o=>r(n({},\"__esModule\",{value:!0}),o);var u=g((y,d)=>{d.exports=_jsx_runtime});var z={};x(z,{default:()=>O,frontmatter:()=>q});var s=b(u()),q={title:\"Como o design responsivo \\xE9 diferente do design adapt\\xE1vel?\"};function c(o){let e=Object.assign({p:\"p\",ul:\"ul\",li:\"li\"},o.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.p,{children:\"Tanto o design responsivo quanto o design adapt\\xE1vel tentam otimizar a experi\\xEAncia do usu\\xE1rio em diferentes dispositivos, ajustando-se a diferentes tamanhos de viewport, resolu\\xE7\\xF5es, contextos de uso, mecanismos de controle e assim por diante.\"}),`\n`,(0,s.jsx)(e.p,{children:\"O design responsivo funciona com base no princ\\xEDpio da flexibilidade - um \\xFAnico site fluido que pode ter uma boa apar\\xEAncia em qualquer dispositivo. Sites responsivos usam consultas de m\\xEDdia, grades flex\\xEDveis e imagens responsivas para criar uma experi\\xEAncia do usu\\xE1rio que se flexiona e muda com base em uma infinidade de fatores. Como uma bola \\xFAnica que cresce ou diminui para se ajustar a v\\xE1rios aros diferentes.\"}),`\n`,(0,s.jsx)(e.p,{children:\"O design adapt\\xE1vel \\xE9 mais parecido com a defini\\xE7\\xE3o moderna de aprimoramento progressivo. Em vez de um design flex\\xEDvel, o design adapt\\xE1vel detecta o dispositivo e outras caracter\\xEDsticas e, em seguida, fornece o recurso e layout apropriados com base em um conjunto predefinido de tamanhos de viewport e outras caracter\\xEDsticas. O site detecta o tipo de dispositivo utilizado e fornece o layout pr\\xE9-configurado para esse dispositivo. Em vez de uma \\xFAnica bola passando por aros de tamanhos diferentes, voc\\xEA teria v\\xE1rias bolas diferentes para usar dependendo do tamanho do aro.\"}),`\n`,(0,s.jsx)(e.p,{children:\"Ambos esses m\\xE9todos t\\xEAm alguns problemas que precisam ser avaliados:\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsx)(e.li,{children:\"O design responsivo pode ser bastante desafiador, pois voc\\xEA est\\xE1 essencialmente usando um \\xFAnico layout, embora responsivo, para se adequar a todas as situa\\xE7\\xF5es. Definir os pontos de interrup\\xE7\\xE3o de consulta de m\\xEDdia \\xE9 um desses desafios. Voc\\xEA usa valores padronizados de ponto de quebra? Ou, voc\\xEA utiliza pontos de interrup\\xE7\\xE3o que fazem sentido para o layout espec\\xEDfico do seu site? E se o layout mudar?\"}),`\n`,(0,s.jsx)(e.li,{children:\"O design adapt\\xE1vel geralmente requer a detec\\xE7\\xE3o de agente do usu\\xE1rio ou detec\\xE7\\xE3o de DPI, etc., todos os quais podem se mostrar pouco confi\\xE1veis.\"}),`\n`]})]})}function j(o={}){let{wrapper:e}=o.components||{};return e?(0,s.jsx)(e,Object.assign({},o,{children:(0,s.jsx)(c,o)})):c(o)}var O=j;return h(z);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var n=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),b=(o,e)=>{for(var s in e)n(o,s,{get:e[s],enumerable:!0})},t=(o,e,s,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of v(e))!g.call(o,i)&&i!==s&&n(o,i,{get:()=>e[i],enumerable:!(r=l(e,i))||r.enumerable});return o};var h=(o,e,s)=>(s=o!=null?m(f(o)):{},t(e||!o||!o.__esModule?n(s,\"default\",{value:o,enumerable:!0}):s,o)),q=o=>t(n({},\"__esModule\",{value:!0}),o);var u=x((y,d)=>{d.exports=_jsx_runtime});var z={};b(z,{default:()=>p,frontmatter:()=>j});var a=h(u()),j={title:\"Como o design responsivo \\xE9 diferente do design adapt\\xE1vel?\"};function c(o){let e={li:\"li\",p:\"p\",ul:\"ul\",...o.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.p,{children:\"Tanto o design responsivo quanto o design adapt\\xE1vel tentam otimizar a experi\\xEAncia do usu\\xE1rio em diferentes dispositivos, ajustando-se a diferentes tamanhos de viewport, resolu\\xE7\\xF5es, contextos de uso, mecanismos de controle e assim por diante.\"}),`\n`,(0,a.jsx)(e.p,{children:\"O design responsivo funciona com base no princ\\xEDpio da flexibilidade - um \\xFAnico site fluido que pode ter uma boa apar\\xEAncia em qualquer dispositivo. Sites responsivos usam consultas de m\\xEDdia, grades flex\\xEDveis e imagens responsivas para criar uma experi\\xEAncia do usu\\xE1rio que se flexiona e muda com base em uma infinidade de fatores. Como uma bola \\xFAnica que cresce ou diminui para se ajustar a v\\xE1rios aros diferentes.\"}),`\n`,(0,a.jsx)(e.p,{children:\"O design adapt\\xE1vel \\xE9 mais parecido com a defini\\xE7\\xE3o moderna de aprimoramento progressivo. Em vez de um design flex\\xEDvel, o design adapt\\xE1vel detecta o dispositivo e outras caracter\\xEDsticas e, em seguida, fornece o recurso e layout apropriados com base em um conjunto predefinido de tamanhos de viewport e outras caracter\\xEDsticas. O site detecta o tipo de dispositivo utilizado e fornece o layout pr\\xE9-configurado para esse dispositivo. Em vez de uma \\xFAnica bola passando por aros de tamanhos diferentes, voc\\xEA teria v\\xE1rias bolas diferentes para usar dependendo do tamanho do aro.\"}),`\n`,(0,a.jsx)(e.p,{children:\"Ambos esses m\\xE9todos t\\xEAm alguns problemas que precisam ser avaliados:\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:\"O design responsivo pode ser bastante desafiador, pois voc\\xEA est\\xE1 essencialmente usando um \\xFAnico layout, embora responsivo, para se adequar a todas as situa\\xE7\\xF5es. Definir os pontos de interrup\\xE7\\xE3o de consulta de m\\xEDdia \\xE9 um desses desafios. Voc\\xEA usa valores padronizados de ponto de quebra? Ou, voc\\xEA utiliza pontos de interrup\\xE7\\xE3o que fazem sentido para o layout espec\\xEDfico do seu site? E se o layout mudar?\"}),`\n`,(0,a.jsx)(e.li,{children:\"O design adapt\\xE1vel geralmente requer a detec\\xE7\\xE3o de agente do usu\\xE1rio ou detec\\xE7\\xE3o de DPI, etc., todos os quais podem se mostrar pouco confi\\xE1veis.\"}),`\n`]})]})}function p(o={}){let{wrapper:e}=o.components||{};return e?(0,a.jsx)(e,{...o,children:(0,a.jsx)(c,{...o})}):c(o)}return q(z);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-is-responsive-design-different-from-adaptive-design/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-is-responsive-design-different-from-adaptive-design/zh-CN.json
index ba485d387..434710825 100644
--- a/apps/web/src/__generated__/questions/quiz/how-is-responsive-design-different-from-adaptive-design/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-is-responsive-design-different-from-adaptive-design/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var j=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),_=(t,n)=>{for(var r in n)i(t,r,{get:n[r],enumerable:!0})},s=(t,n,r,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of m(n))!x.call(t,c)&&c!==r&&i(t,c,{get:()=>n[c],enumerable:!(l=h(n,c))||l.enumerable});return t};var f=(t,n,r)=>(r=t!=null?u(p(t)):{},s(n||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),g=t=>s(i({},\"__esModule\",{value:!0}),t);var a=j((O,o)=>{o.exports=_jsx_runtime});var C={};_(C,{default:()=>b,frontmatter:()=>D});var e=f(a()),D={title:\"\\u54CD\\u5E94\\u5F0F\\u8BBE\\u8BA1\\u4E0E\\u81EA\\u9002\\u5E94\\u8BBE\\u8BA1\\u6709\\u4F55\\u4E0D\\u540C\\uFF1F\"};function d(t){let n=Object.assign({p:\"p\",ul:\"ul\",li:\"li\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.p,{children:\"\\u54CD\\u5E94\\u5F0F\\u8BBE\\u8BA1\\u548C\\u81EA\\u9002\\u5E94\\u8BBE\\u8BA1\\u90FD\\u8BD5\\u56FE\\u4F18\\u5316\\u4E0D\\u540C\\u8BBE\\u5907\\u4E0A\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\uFF0C\\u9488\\u5BF9\\u4E0D\\u540C\\u7684\\u89C6\\u53E3\\u5927\\u5C0F\\u3001\\u5206\\u8FA8\\u7387\\u3001\\u4F7F\\u7528\\u4E0A\\u4E0B\\u6587\\u3001\\u63A7\\u5236\\u673A\\u5236\\u7B49\\u8FDB\\u884C\\u8C03\\u6574\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u54CD\\u5E94\\u5F0F\\u8BBE\\u8BA1\\u57FA\\u4E8E\\u7075\\u6D3B\\u6027\\u539F\\u5219\\u2014\\u2014\\u4E00\\u4E2A\\u53EF\\u4EE5\\u5728\\u4EFB\\u4F55\\u8BBE\\u5907\\u4E0A\\u770B\\u8D77\\u6765\\u90FD\\u4E0D\\u9519\\u7684\\u5355\\u4E00\\u6D41\\u7545\\u7F51\\u7AD9\\u3002\\u54CD\\u5E94\\u5F0F\\u7F51\\u7AD9\\u4F7F\\u7528\\u5A92\\u4F53\\u67E5\\u8BE2\\u3001\\u7075\\u6D3B\\u7684\\u7F51\\u683C\\u548C\\u54CD\\u5E94\\u5F0F\\u56FE\\u50CF\\u6765\\u521B\\u5EFA\\u4E00\\u79CD\\u7528\\u6237\\u4F53\\u9A8C\\uFF0C\\u8FD9\\u79CD\\u4F53\\u9A8C\\u4F1A\\u6839\\u636E\\u591A\\u79CD\\u56E0\\u7D20\\u8FDB\\u884C\\u8C03\\u6574\\u548C\\u6539\\u53D8\\u3002\\u5C31\\u50CF\\u4E00\\u4E2A\\u7403\\u53D8\\u5927\\u6216\\u53D8\\u5C0F\\u4EE5\\u9002\\u5E94\\u51E0\\u4E2A\\u4E0D\\u540C\\u7684\\u5706\\u73AF\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u81EA\\u9002\\u5E94\\u8BBE\\u8BA1\\u66F4\\u50CF\\u662F\\u6E10\\u8FDB\\u589E\\u5F3A\\u7684\\u73B0\\u4EE3\\u5B9A\\u4E49\\u3002\\u81EA\\u9002\\u5E94\\u8BBE\\u8BA1\\u4E0D\\u662F\\u4E00\\u4E2A\\u7075\\u6D3B\\u7684\\u8BBE\\u8BA1\\uFF0C\\u800C\\u662F\\u68C0\\u6D4B\\u8BBE\\u5907\\u548C\\u5176\\u4ED6\\u529F\\u80FD\\uFF0C\\u7136\\u540E\\u6839\\u636E\\u9884\\u5B9A\\u4E49\\u7684\\u4E00\\u7EC4\\u89C6\\u53E3\\u5927\\u5C0F\\u548C\\u5176\\u4ED6\\u7279\\u5F81\\u63D0\\u4F9B\\u9002\\u5F53\\u7684\\u529F\\u80FD\\u548C\\u5E03\\u5C40\\u3002\\u8BE5\\u7F51\\u7AD9\\u68C0\\u6D4B\\u6240\\u4F7F\\u7528\\u7684\\u8BBE\\u5907\\u7C7B\\u578B\\uFF0C\\u5E76\\u4E3A\\u8BE5\\u8BBE\\u5907\\u63D0\\u4F9B\\u9884\\u8BBE\\u7684\\u5E03\\u5C40\\u3002\\u4E0E\\u5176\\u8BA9\\u4E00\\u4E2A\\u7403\\u7A7F\\u8FC7\\u51E0\\u4E2A\\u4E0D\\u540C\\u5927\\u5C0F\\u7684\\u5706\\u73AF\\uFF0C\\u4E0D\\u5982\\u6839\\u636E\\u5706\\u73AF\\u7684\\u5927\\u5C0F\\u4F7F\\u7528\\u51E0\\u4E2A\\u4E0D\\u540C\\u7684\\u7403\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u4E24\\u79CD\\u65B9\\u6CD5\\u90FD\\u6709\\u4E00\\u4E9B\\u9700\\u8981\\u6743\\u8861\\u7684\\u95EE\\u9898\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u54CD\\u5E94\\u5F0F\\u8BBE\\u8BA1\\u53EF\\u80FD\\u975E\\u5E38\\u5177\\u6709\\u6311\\u6218\\u6027\\uFF0C\\u56E0\\u4E3A\\u60A8\\u672C\\u8D28\\u4E0A\\u662F\\u4F7F\\u7528\\u4E00\\u4E2A\\u5355\\u4E00\\u7684\\uFF08\\u5C3D\\u7BA1\\u662F\\u54CD\\u5E94\\u5F0F\\u7684\\uFF09\\u5E03\\u5C40\\u6765\\u9002\\u5E94\\u6240\\u6709\\u60C5\\u51B5\\u3002\\u5982\\u4F55\\u8BBE\\u7F6E\\u5A92\\u4F53\\u67E5\\u8BE2\\u65AD\\u70B9\\u5C31\\u662F\\u4E00\\u4E2A\\u8FD9\\u6837\\u7684\\u6311\\u6218\\u3002\\u60A8\\u662F\\u4F7F\\u7528\\u6807\\u51C6\\u5316\\u7684\\u65AD\\u70B9\\u503C\\u5417\\uFF1F\\u6216\\u8005\\uFF0C\\u60A8\\u662F\\u4F7F\\u7528\\u5BF9\\u60A8\\u7684\\u7279\\u5B9A\\u5E03\\u5C40\\u6709\\u610F\\u4E49\\u7684\\u65AD\\u70B9\\u5417\\uFF1F\\u5982\\u679C\\u8BE5\\u5E03\\u5C40\\u53D1\\u751F\\u53D8\\u5316\\u600E\\u4E48\\u529E\\uFF1F\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u81EA\\u9002\\u5E94\\u8BBE\\u8BA1\\u901A\\u5E38\\u9700\\u8981\\u7528\\u6237\\u4EE3\\u7406\\u55C5\\u63A2\\u6216 DPI \\u68C0\\u6D4B\\u7B49\\uFF0C\\u6240\\u6709\\u8FD9\\u4E9B\\u90FD\\u53EF\\u80FD\\u88AB\\u8BC1\\u660E\\u662F\\u4E0D\\u53EF\\u9760\\u7684\\u3002\"}),`\n`]})]})}function M(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(d,t)})):d(t)}var b=M;return g(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var f=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),j=(t,n)=>{for(var r in n)i(t,r,{get:n[r],enumerable:!0})},o=(t,n,r,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of p(n))!_.call(t,c)&&c!==r&&i(t,c,{get:()=>n[c],enumerable:!(l=m(n,c))||l.enumerable});return t};var D=(t,n,r)=>(r=t!=null?h(x(t)):{},o(n||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),M=t=>o(i({},\"__esModule\",{value:!0}),t);var d=f((X,s)=>{s.exports=_jsx_runtime});var C={};j(C,{default:()=>u,frontmatter:()=>g});var e=D(d()),g={title:\"\\u54CD\\u5E94\\u5F0F\\u8BBE\\u8BA1\\u4E0E\\u81EA\\u9002\\u5E94\\u8BBE\\u8BA1\\u6709\\u4F55\\u4E0D\\u540C\\uFF1F\"};function a(t){let n={li:\"li\",p:\"p\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.p,{children:\"\\u54CD\\u5E94\\u5F0F\\u8BBE\\u8BA1\\u548C\\u81EA\\u9002\\u5E94\\u8BBE\\u8BA1\\u90FD\\u8BD5\\u56FE\\u4F18\\u5316\\u4E0D\\u540C\\u8BBE\\u5907\\u4E0A\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\uFF0C\\u9488\\u5BF9\\u4E0D\\u540C\\u7684\\u89C6\\u53E3\\u5927\\u5C0F\\u3001\\u5206\\u8FA8\\u7387\\u3001\\u4F7F\\u7528\\u4E0A\\u4E0B\\u6587\\u3001\\u63A7\\u5236\\u673A\\u5236\\u7B49\\u8FDB\\u884C\\u8C03\\u6574\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u54CD\\u5E94\\u5F0F\\u8BBE\\u8BA1\\u57FA\\u4E8E\\u7075\\u6D3B\\u6027\\u539F\\u5219\\u2014\\u2014\\u4E00\\u4E2A\\u53EF\\u4EE5\\u5728\\u4EFB\\u4F55\\u8BBE\\u5907\\u4E0A\\u770B\\u8D77\\u6765\\u90FD\\u4E0D\\u9519\\u7684\\u5355\\u4E00\\u6D41\\u7545\\u7F51\\u7AD9\\u3002\\u54CD\\u5E94\\u5F0F\\u7F51\\u7AD9\\u4F7F\\u7528\\u5A92\\u4F53\\u67E5\\u8BE2\\u3001\\u7075\\u6D3B\\u7684\\u7F51\\u683C\\u548C\\u54CD\\u5E94\\u5F0F\\u56FE\\u50CF\\u6765\\u521B\\u5EFA\\u4E00\\u79CD\\u7528\\u6237\\u4F53\\u9A8C\\uFF0C\\u8FD9\\u79CD\\u4F53\\u9A8C\\u4F1A\\u6839\\u636E\\u591A\\u79CD\\u56E0\\u7D20\\u8FDB\\u884C\\u8C03\\u6574\\u548C\\u6539\\u53D8\\u3002\\u5C31\\u50CF\\u4E00\\u4E2A\\u7403\\u53D8\\u5927\\u6216\\u53D8\\u5C0F\\u4EE5\\u9002\\u5E94\\u51E0\\u4E2A\\u4E0D\\u540C\\u7684\\u5706\\u73AF\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u81EA\\u9002\\u5E94\\u8BBE\\u8BA1\\u66F4\\u50CF\\u662F\\u6E10\\u8FDB\\u589E\\u5F3A\\u7684\\u73B0\\u4EE3\\u5B9A\\u4E49\\u3002\\u81EA\\u9002\\u5E94\\u8BBE\\u8BA1\\u4E0D\\u662F\\u4E00\\u4E2A\\u7075\\u6D3B\\u7684\\u8BBE\\u8BA1\\uFF0C\\u800C\\u662F\\u68C0\\u6D4B\\u8BBE\\u5907\\u548C\\u5176\\u4ED6\\u529F\\u80FD\\uFF0C\\u7136\\u540E\\u6839\\u636E\\u9884\\u5B9A\\u4E49\\u7684\\u4E00\\u7EC4\\u89C6\\u53E3\\u5927\\u5C0F\\u548C\\u5176\\u4ED6\\u7279\\u5F81\\u63D0\\u4F9B\\u9002\\u5F53\\u7684\\u529F\\u80FD\\u548C\\u5E03\\u5C40\\u3002\\u8BE5\\u7F51\\u7AD9\\u68C0\\u6D4B\\u6240\\u4F7F\\u7528\\u7684\\u8BBE\\u5907\\u7C7B\\u578B\\uFF0C\\u5E76\\u4E3A\\u8BE5\\u8BBE\\u5907\\u63D0\\u4F9B\\u9884\\u8BBE\\u7684\\u5E03\\u5C40\\u3002\\u4E0E\\u5176\\u8BA9\\u4E00\\u4E2A\\u7403\\u7A7F\\u8FC7\\u51E0\\u4E2A\\u4E0D\\u540C\\u5927\\u5C0F\\u7684\\u5706\\u73AF\\uFF0C\\u4E0D\\u5982\\u6839\\u636E\\u5706\\u73AF\\u7684\\u5927\\u5C0F\\u4F7F\\u7528\\u51E0\\u4E2A\\u4E0D\\u540C\\u7684\\u7403\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u4E24\\u79CD\\u65B9\\u6CD5\\u90FD\\u6709\\u4E00\\u4E9B\\u9700\\u8981\\u6743\\u8861\\u7684\\u95EE\\u9898\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u54CD\\u5E94\\u5F0F\\u8BBE\\u8BA1\\u53EF\\u80FD\\u975E\\u5E38\\u5177\\u6709\\u6311\\u6218\\u6027\\uFF0C\\u56E0\\u4E3A\\u60A8\\u672C\\u8D28\\u4E0A\\u662F\\u4F7F\\u7528\\u4E00\\u4E2A\\u5355\\u4E00\\u7684\\uFF08\\u5C3D\\u7BA1\\u662F\\u54CD\\u5E94\\u5F0F\\u7684\\uFF09\\u5E03\\u5C40\\u6765\\u9002\\u5E94\\u6240\\u6709\\u60C5\\u51B5\\u3002\\u5982\\u4F55\\u8BBE\\u7F6E\\u5A92\\u4F53\\u67E5\\u8BE2\\u65AD\\u70B9\\u5C31\\u662F\\u4E00\\u4E2A\\u8FD9\\u6837\\u7684\\u6311\\u6218\\u3002\\u60A8\\u662F\\u4F7F\\u7528\\u6807\\u51C6\\u5316\\u7684\\u65AD\\u70B9\\u503C\\u5417\\uFF1F\\u6216\\u8005\\uFF0C\\u60A8\\u662F\\u4F7F\\u7528\\u5BF9\\u60A8\\u7684\\u7279\\u5B9A\\u5E03\\u5C40\\u6709\\u610F\\u4E49\\u7684\\u65AD\\u70B9\\u5417\\uFF1F\\u5982\\u679C\\u8BE5\\u5E03\\u5C40\\u53D1\\u751F\\u53D8\\u5316\\u600E\\u4E48\\u529E\\uFF1F\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u81EA\\u9002\\u5E94\\u8BBE\\u8BA1\\u901A\\u5E38\\u9700\\u8981\\u7528\\u6237\\u4EE3\\u7406\\u55C5\\u63A2\\u6216 DPI \\u68C0\\u6D4B\\u7B49\\uFF0C\\u6240\\u6709\\u8FD9\\u4E9B\\u90FD\\u53EF\\u80FD\\u88AB\\u8BC1\\u660E\\u662F\\u4E0D\\u53EF\\u9760\\u7684\\u3002\"}),`\n`]})]})}function u(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(a,{...t})}):a(t)}return M(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders/en-US.json b/apps/web/src/__generated__/questions/quiz/how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders/en-US.json
index 5f45fe4cf..621a7e308 100644
--- a/apps/web/src/__generated__/questions/quiz/how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders/en-US.json
@@ -33,5 +33,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var o in e)c(n,o,{get:e[o],enumerable:!0})},a=(n,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!x.call(n,r)&&r!==o&&c(n,r,{get:()=>e[r],enumerable:!(s=u(e,r))||s.enumerable});return n};var y=(n,e,o)=>(o=n!=null?d(m(n)):{},a(e||!n||!n.__esModule?c(o,\"default\",{value:n,enumerable:!0}):o,n)),f=n=>a(c({},\"__esModule\",{value:!0}),n);var l=v((P,i)=>{i.exports=_jsx_runtime});var j={};g(j,{default:()=>w,frontmatter:()=>C});var t=y(l()),C={title:\"How would one optimize the performance of React contexts to reduce rerenders?\"};function h(n){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"To optimize the performance of React contexts and reduce rerenders, you can use techniques such as memoizing context values, splitting contexts, and using selectors. Memoizing context values with \",(0,t.jsx)(e.code,{children:\"useMemo\"}),\" ensures that the context value only changes when its dependencies change. Splitting contexts allows you to isolate state changes to specific parts of your application. Using selectors with libraries like \",(0,t.jsx)(e.code,{children:\"use-context-selector\"}),\" can help you only rerender components that actually need the updated context value.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`const value = useMemo(() => ({ state, dispatch }), [state, dispatch]);\n`})}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"How to optimize the performance of React contexts to reduce rerenders\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Memoizing context values\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"One of the most effective ways to reduce unnecessary rerenders is to memoize the context value. By using \",(0,t.jsx)(e.code,{children:\"useMemo\"}),\", you can ensure that the context value only changes when its dependencies change.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`import React, { createContext, useMemo, useState } from 'react';\n\nconst MyContext = createContext();\n\nconst MyProvider = ({ children }) => {\n  const [state, setState] = useState(initialState);\n\n  const value = useMemo(() => ({ state, setState }), [state]);\n\n  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;\n};\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Splitting contexts\"}),`\n`,(0,t.jsx)(e.p,{children:\"Another technique is to split your context into multiple smaller contexts. This way, you can isolate state changes to specific parts of your application, reducing the number of components that need to rerender.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`const UserContext = createContext();\nconst ThemeContext = createContext();\n\nconst UserProvider = ({ children }) => {\n  const [user, setUser] = useState(null);\n\n  return (\n    <UserContext.Provider value={{ user, setUser }}>\n      {children}\n    </UserContext.Provider>\n  );\n};\n\nconst ThemeProvider = ({ children }) => {\n  const [theme, setTheme] = useState('light');\n\n  return (\n    <ThemeContext.Provider value={{ theme, setTheme }}>\n      {children}\n    </ThemeContext.Provider>\n  );\n};\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Using selectors\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Using selectors can help you only rerender components that actually need the updated context value. Libraries like \",(0,t.jsx)(e.code,{children:\"use-context-selector\"}),\" can be very useful for this purpose.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`import { createContext, useContextSelector } from 'use-context-selector';\n\nconst MyContext = createContext();\n\nconst MyComponent = () => {\n  const state = useContextSelector(MyContext, (v) => v.state);\n\n  return <div>{state}</div>;\n};\n`})}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/learn/passing-data-deeply-with-context\",children:\"React documentation on context\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/reference/react/useMemo\",children:\"useMemo Hook documentation\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://github.com/dai-shi/use-context-selector\",children:\"use-context-selector library\"})}),`\n`]})]})}function M(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var w=M;return f(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),y=(n,e)=>{for(var o in e)c(n,o,{get:e[o],enumerable:!0})},a=(n,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!v.call(n,r)&&r!==o&&c(n,r,{get:()=>e[r],enumerable:!(s=p(e,r))||s.enumerable});return n};var f=(n,e,o)=>(o=n!=null?u(x(n)):{},a(e||!n||!n.__esModule?c(o,\"default\",{value:n,enumerable:!0}):o,n)),C=n=>a(c({},\"__esModule\",{value:!0}),n);var l=g((j,i)=>{i.exports=_jsx_runtime});var w={};y(w,{default:()=>d,frontmatter:()=>M});var t=f(l()),M={title:\"How would one optimize the performance of React contexts to reduce rerenders?\"};function h(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"To optimize the performance of React contexts and reduce rerenders, you can use techniques such as memoizing context values, splitting contexts, and using selectors. Memoizing context values with \",(0,t.jsx)(e.code,{children:\"useMemo\"}),\" ensures that the context value only changes when its dependencies change. Splitting contexts allows you to isolate state changes to specific parts of your application. Using selectors with libraries like \",(0,t.jsx)(e.code,{children:\"use-context-selector\"}),\" can help you only rerender components that actually need the updated context value.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`const value = useMemo(() => ({ state, dispatch }), [state, dispatch]);\n`})}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"How to optimize the performance of React contexts to reduce rerenders\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Memoizing context values\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"One of the most effective ways to reduce unnecessary rerenders is to memoize the context value. By using \",(0,t.jsx)(e.code,{children:\"useMemo\"}),\", you can ensure that the context value only changes when its dependencies change.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`import React, { createContext, useMemo, useState } from 'react';\n\nconst MyContext = createContext();\n\nconst MyProvider = ({ children }) => {\n  const [state, setState] = useState(initialState);\n\n  const value = useMemo(() => ({ state, setState }), [state]);\n\n  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;\n};\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Splitting contexts\"}),`\n`,(0,t.jsx)(e.p,{children:\"Another technique is to split your context into multiple smaller contexts. This way, you can isolate state changes to specific parts of your application, reducing the number of components that need to rerender.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`const UserContext = createContext();\nconst ThemeContext = createContext();\n\nconst UserProvider = ({ children }) => {\n  const [user, setUser] = useState(null);\n\n  return (\n    <UserContext.Provider value={{ user, setUser }}>\n      {children}\n    </UserContext.Provider>\n  );\n};\n\nconst ThemeProvider = ({ children }) => {\n  const [theme, setTheme] = useState('light');\n\n  return (\n    <ThemeContext.Provider value={{ theme, setTheme }}>\n      {children}\n    </ThemeContext.Provider>\n  );\n};\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Using selectors\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Using selectors can help you only rerender components that actually need the updated context value. Libraries like \",(0,t.jsx)(e.code,{children:\"use-context-selector\"}),\" can be very useful for this purpose.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`import { createContext, useContextSelector } from 'use-context-selector';\n\nconst MyContext = createContext();\n\nconst MyComponent = () => {\n  const state = useContextSelector(MyContext, (v) => v.state);\n\n  return <div>{state}</div>;\n};\n`})}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/learn/passing-data-deeply-with-context\",children:\"React documentation on context\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/reference/react/useMemo\",children:\"useMemo Hook documentation\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://github.com/dai-shi/use-context-selector\",children:\"use-context-selector library\"})}),`\n`]})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(h,{...n})}):h(n)}return C(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders/zh-CN.json
index 075e9808a..c614f890e 100644
--- a/apps/web/src/__generated__/questions/quiz/how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders/zh-CN.json
@@ -33,5 +33,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),C=(n,e)=>{for(var r in e)o(n,r,{get:e[r],enumerable:!0})},a=(n,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of x(e))!p.call(n,c)&&c!==r&&o(n,c,{get:()=>e[c],enumerable:!(s=u(e,c))||s.enumerable});return n};var M=(n,e,r)=>(r=n!=null?d(m(n)):{},a(e||!n||!n.__esModule?o(r,\"default\",{value:n,enumerable:!0}):r,n)),g=n=>a(o({},\"__esModule\",{value:!0}),n);var l=v((_,i)=>{i.exports=_jsx_runtime});var P={};C(P,{default:()=>y,frontmatter:()=>f});var t=M(l()),f={title:\"\\u5982\\u4F55\\u4F18\\u5316 React Context \\u7684\\u6027\\u80FD\\u4EE5\\u51CF\\u5C11\\u91CD\\u65B0\\u6E32\\u67D3\\uFF1F\"};function h(n){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u8981\\u4F18\\u5316 React Context \\u7684\\u6027\\u80FD\\u5E76\\u51CF\\u5C11\\u91CD\\u65B0\\u6E32\\u67D3\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u8BF8\\u5982\\u8BB0\\u5FC6\\u4E0A\\u4E0B\\u6587\\u503C\\u3001\\u62C6\\u5206\\u4E0A\\u4E0B\\u6587\\u548C\\u4F7F\\u7528\\u9009\\u62E9\\u5668\\u7B49\\u6280\\u672F\\u3002\\u4F7F\\u7528 \",(0,t.jsx)(e.code,{children:\"useMemo\"}),\" \\u8BB0\\u5FC6\\u4E0A\\u4E0B\\u6587\\u503C\\u53EF\\u786E\\u4FDD\\u4E0A\\u4E0B\\u6587\\u503C\\u4EC5\\u5728\\u5176\\u4F9D\\u8D56\\u9879\\u66F4\\u6539\\u65F6\\u624D\\u66F4\\u6539\\u3002\\u62C6\\u5206\\u4E0A\\u4E0B\\u6587\\u5141\\u8BB8\\u60A8\\u5C06\\u72B6\\u6001\\u66F4\\u6539\\u9694\\u79BB\\u5230\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u7279\\u5B9A\\u90E8\\u5206\\u3002\\u4F7F\\u7528\\u50CF \",(0,t.jsx)(e.code,{children:\"use-context-selector\"}),\" \\u8FD9\\u6837\\u7684\\u5E93\\u4E0E\\u9009\\u62E9\\u5668\\u53EF\\u4EE5\\u5E2E\\u52A9\\u60A8\\u4EC5\\u91CD\\u65B0\\u6E32\\u67D3\\u5B9E\\u9645\\u9700\\u8981\\u66F4\\u65B0\\u7684\\u4E0A\\u4E0B\\u6587\\u503C\\u7684\\u7EC4\\u4EF6\\u3002\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`const value = useMemo(() => ({ state, dispatch }), [state, dispatch]);\n`})}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u4F18\\u5316 React Context \\u7684\\u6027\\u80FD\\u4EE5\\u51CF\\u5C11\\u91CD\\u65B0\\u6E32\\u67D3\"}),`\n`,(0,t.jsx)(e.h3,{children:\"\\u8BB0\\u5FC6\\u4E0A\\u4E0B\\u6587\\u503C\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u51CF\\u5C11\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\\u7684\\u6700\\u6709\\u6548\\u65B9\\u6CD5\\u4E4B\\u4E00\\u662F\\u8BB0\\u5FC6\\u4E0A\\u4E0B\\u6587\\u503C\\u3002\\u901A\\u8FC7\\u4F7F\\u7528 \",(0,t.jsx)(e.code,{children:\"useMemo\"}),\"\\uFF0C\\u60A8\\u53EF\\u4EE5\\u786E\\u4FDD\\u4E0A\\u4E0B\\u6587\\u503C\\u4EC5\\u5728\\u5176\\u4F9D\\u8D56\\u9879\\u66F4\\u6539\\u65F6\\u624D\\u66F4\\u6539\\u3002\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`import React, { createContext, useMemo, useState } from 'react';\n\nconst MyContext = createContext();\n\nconst MyProvider = ({ children }) => {\n  const [state, setState] = useState(initialState);\n\n  const value = useMemo(() => ({ state, setState }), [state]);\n\n  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;\n};\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"\\u62C6\\u5206\\u4E0A\\u4E0B\\u6587\"}),`\n`,(0,t.jsx)(e.p,{children:\"\\u53E6\\u4E00\\u79CD\\u6280\\u672F\\u662F\\u5C06\\u60A8\\u7684\\u4E0A\\u4E0B\\u6587\\u62C6\\u5206\\u4E3A\\u591A\\u4E2A\\u8F83\\u5C0F\\u7684\\u4E0A\\u4E0B\\u6587\\u3002\\u901A\\u8FC7\\u8FD9\\u79CD\\u65B9\\u5F0F\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C06\\u72B6\\u6001\\u66F4\\u6539\\u9694\\u79BB\\u5230\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u7279\\u5B9A\\u90E8\\u5206\\uFF0C\\u4ECE\\u800C\\u51CF\\u5C11\\u9700\\u8981\\u91CD\\u65B0\\u6E32\\u67D3\\u7684\\u7EC4\\u4EF6\\u6570\\u91CF\\u3002\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`const UserContext = createContext();\nconst ThemeContext = createContext();\n\nconst UserProvider = ({ children }) => {\n  const [user, setUser] = useState(null);\n\n  return (\n    <UserContext.Provider value={{ user, setUser }}>\n      {children}\n    </UserContext.Provider>\n  );\n};\n\nconst ThemeProvider = ({ children }) => {\n  const [theme, setTheme] = useState('light');\n\n  return (\n    <ThemeContext.Provider value={{ theme, setTheme }}>\n      {children}\n    </ThemeContext.Provider>\n  );\n};\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u9009\\u62E9\\u5668\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u4F7F\\u7528\\u9009\\u62E9\\u5668\\u53EF\\u4EE5\\u5E2E\\u52A9\\u60A8\\u4EC5\\u91CD\\u65B0\\u6E32\\u67D3\\u5B9E\\u9645\\u9700\\u8981\\u66F4\\u65B0\\u7684\\u4E0A\\u4E0B\\u6587\\u503C\\u7684\\u7EC4\\u4EF6\\u3002\\u50CF \",(0,t.jsx)(e.code,{children:\"use-context-selector\"}),\" \\u8FD9\\u6837\\u7684\\u5E93\\u5BF9\\u6B64\\u76EE\\u7684\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`import { createContext, useContextSelector } from 'use-context-selector';\n\nconst MyContext = createContext();\n\nconst MyComponent = () => {\n  const state = useContextSelector(MyContext, (v) => v.state);\n\n  return <div>{state}</div>;\n};\n`})}),`\n`,(0,t.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/learn/passing-data-deeply-with-context\",children:\"React context \\u6587\\u6863\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/reference/react/useMemo\",children:\"useMemo Hook \\u6587\\u6863\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://github.com/dai-shi/use-context-selector\",children:\"use-context-selector \\u5E93\"})}),`\n`]})]})}function j(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var y=j;return g(P);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var C=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),M=(n,e)=>{for(var r in e)o(n,r,{get:e[r],enumerable:!0})},a=(n,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!v.call(n,c)&&c!==r&&o(n,c,{get:()=>e[c],enumerable:!(s=x(e,c))||s.enumerable});return n};var g=(n,e,r)=>(r=n!=null?u(p(n)):{},a(e||!n||!n.__esModule?o(r,\"default\",{value:n,enumerable:!0}):r,n)),f=n=>a(o({},\"__esModule\",{value:!0}),n);var l=C((S,i)=>{i.exports=_jsx_runtime});var y={};M(y,{default:()=>d,frontmatter:()=>j});var t=g(l()),j={title:\"\\u5982\\u4F55\\u4F18\\u5316 React Context \\u7684\\u6027\\u80FD\\u4EE5\\u51CF\\u5C11\\u91CD\\u65B0\\u6E32\\u67D3\\uFF1F\"};function h(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u8981\\u4F18\\u5316 React Context \\u7684\\u6027\\u80FD\\u5E76\\u51CF\\u5C11\\u91CD\\u65B0\\u6E32\\u67D3\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u8BF8\\u5982\\u8BB0\\u5FC6\\u4E0A\\u4E0B\\u6587\\u503C\\u3001\\u62C6\\u5206\\u4E0A\\u4E0B\\u6587\\u548C\\u4F7F\\u7528\\u9009\\u62E9\\u5668\\u7B49\\u6280\\u672F\\u3002\\u4F7F\\u7528 \",(0,t.jsx)(e.code,{children:\"useMemo\"}),\" \\u8BB0\\u5FC6\\u4E0A\\u4E0B\\u6587\\u503C\\u53EF\\u786E\\u4FDD\\u4E0A\\u4E0B\\u6587\\u503C\\u4EC5\\u5728\\u5176\\u4F9D\\u8D56\\u9879\\u66F4\\u6539\\u65F6\\u624D\\u66F4\\u6539\\u3002\\u62C6\\u5206\\u4E0A\\u4E0B\\u6587\\u5141\\u8BB8\\u60A8\\u5C06\\u72B6\\u6001\\u66F4\\u6539\\u9694\\u79BB\\u5230\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u7279\\u5B9A\\u90E8\\u5206\\u3002\\u4F7F\\u7528\\u50CF \",(0,t.jsx)(e.code,{children:\"use-context-selector\"}),\" \\u8FD9\\u6837\\u7684\\u5E93\\u4E0E\\u9009\\u62E9\\u5668\\u53EF\\u4EE5\\u5E2E\\u52A9\\u60A8\\u4EC5\\u91CD\\u65B0\\u6E32\\u67D3\\u5B9E\\u9645\\u9700\\u8981\\u66F4\\u65B0\\u7684\\u4E0A\\u4E0B\\u6587\\u503C\\u7684\\u7EC4\\u4EF6\\u3002\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`const value = useMemo(() => ({ state, dispatch }), [state, dispatch]);\n`})}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u4F18\\u5316 React Context \\u7684\\u6027\\u80FD\\u4EE5\\u51CF\\u5C11\\u91CD\\u65B0\\u6E32\\u67D3\"}),`\n`,(0,t.jsx)(e.h3,{children:\"\\u8BB0\\u5FC6\\u4E0A\\u4E0B\\u6587\\u503C\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u51CF\\u5C11\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\\u7684\\u6700\\u6709\\u6548\\u65B9\\u6CD5\\u4E4B\\u4E00\\u662F\\u8BB0\\u5FC6\\u4E0A\\u4E0B\\u6587\\u503C\\u3002\\u901A\\u8FC7\\u4F7F\\u7528 \",(0,t.jsx)(e.code,{children:\"useMemo\"}),\"\\uFF0C\\u60A8\\u53EF\\u4EE5\\u786E\\u4FDD\\u4E0A\\u4E0B\\u6587\\u503C\\u4EC5\\u5728\\u5176\\u4F9D\\u8D56\\u9879\\u66F4\\u6539\\u65F6\\u624D\\u66F4\\u6539\\u3002\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`import React, { createContext, useMemo, useState } from 'react';\n\nconst MyContext = createContext();\n\nconst MyProvider = ({ children }) => {\n  const [state, setState] = useState(initialState);\n\n  const value = useMemo(() => ({ state, setState }), [state]);\n\n  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;\n};\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"\\u62C6\\u5206\\u4E0A\\u4E0B\\u6587\"}),`\n`,(0,t.jsx)(e.p,{children:\"\\u53E6\\u4E00\\u79CD\\u6280\\u672F\\u662F\\u5C06\\u60A8\\u7684\\u4E0A\\u4E0B\\u6587\\u62C6\\u5206\\u4E3A\\u591A\\u4E2A\\u8F83\\u5C0F\\u7684\\u4E0A\\u4E0B\\u6587\\u3002\\u901A\\u8FC7\\u8FD9\\u79CD\\u65B9\\u5F0F\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C06\\u72B6\\u6001\\u66F4\\u6539\\u9694\\u79BB\\u5230\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u7279\\u5B9A\\u90E8\\u5206\\uFF0C\\u4ECE\\u800C\\u51CF\\u5C11\\u9700\\u8981\\u91CD\\u65B0\\u6E32\\u67D3\\u7684\\u7EC4\\u4EF6\\u6570\\u91CF\\u3002\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`const UserContext = createContext();\nconst ThemeContext = createContext();\n\nconst UserProvider = ({ children }) => {\n  const [user, setUser] = useState(null);\n\n  return (\n    <UserContext.Provider value={{ user, setUser }}>\n      {children}\n    </UserContext.Provider>\n  );\n};\n\nconst ThemeProvider = ({ children }) => {\n  const [theme, setTheme] = useState('light');\n\n  return (\n    <ThemeContext.Provider value={{ theme, setTheme }}>\n      {children}\n    </ThemeContext.Provider>\n  );\n};\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u9009\\u62E9\\u5668\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u4F7F\\u7528\\u9009\\u62E9\\u5668\\u53EF\\u4EE5\\u5E2E\\u52A9\\u60A8\\u4EC5\\u91CD\\u65B0\\u6E32\\u67D3\\u5B9E\\u9645\\u9700\\u8981\\u66F4\\u65B0\\u7684\\u4E0A\\u4E0B\\u6587\\u503C\\u7684\\u7EC4\\u4EF6\\u3002\\u50CF \",(0,t.jsx)(e.code,{children:\"use-context-selector\"}),\" \\u8FD9\\u6837\\u7684\\u5E93\\u5BF9\\u6B64\\u76EE\\u7684\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`import { createContext, useContextSelector } from 'use-context-selector';\n\nconst MyContext = createContext();\n\nconst MyComponent = () => {\n  const state = useContextSelector(MyContext, (v) => v.state);\n\n  return <div>{state}</div>;\n};\n`})}),`\n`,(0,t.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/learn/passing-data-deeply-with-context\",children:\"React context \\u6587\\u6863\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/reference/react/useMemo\",children:\"useMemo Hook \\u6587\\u6863\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://github.com/dai-shi/use-context-selector\",children:\"use-context-selector \\u5E93\"})}),`\n`]})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(h,{...n})}):h(n)}return f(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-would-you-approach-fixing-browser-specific-styling-issues/en-US.json b/apps/web/src/__generated__/questions/quiz/how-would-you-approach-fixing-browser-specific-styling-issues/en-US.json
index c6fdbd13a..3aa523155 100644
--- a/apps/web/src/__generated__/questions/quiz/how-would-you-approach-fixing-browser-specific-styling-issues/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-would-you-approach-fixing-browser-specific-styling-issues/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),m=(t,e)=>{for(var i in e)o(t,i,{get:e[i],enumerable:!0})},a=(t,e,i,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of f(e))!p.call(t,n)&&n!==i&&o(t,n,{get:()=>e[n],enumerable:!(r=h(e,n))||r.enumerable});return t};var w=(t,e,i)=>(i=t!=null?u(y(t)):{},a(e||!t||!t.__esModule?o(i,\"default\",{value:t,enumerable:!0}):i,t)),x=t=>a(o({},\"__esModule\",{value:!0}),t);var c=g((v,l)=>{l.exports=_jsx_runtime});var C={};m(C,{default:()=>j,frontmatter:()=>b});var s=w(c()),b={title:\"How would you approach fixing browser-specific styling issues?\"};function d(t){let e=Object.assign({ul:\"ul\",li:\"li\",code:\"code\"},t.components);return(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsx)(e.li,{children:\"After identifying the issue and the offending browser, use a separate style sheet that only loads when that specific browser is being used. This technique requires server-side rendering though.\"}),`\n`,(0,s.jsx)(e.li,{children:\"Use libraries like Bootstrap that already handles these styling issues for you.\"}),`\n`,(0,s.jsxs)(e.li,{children:[\"Use \",(0,s.jsx)(e.code,{children:\"autoprefixer\"}),\" to automatically add vendor prefixes to your code.\"]}),`\n`,(0,s.jsx)(e.li,{children:\"Use Reset CSS or Normalize.css.\"}),`\n`,(0,s.jsx)(e.li,{children:\"If you're using PostCSS (or a similar CSS transpilation library), there may be plugins which allow you to opt in to using modern CSS syntax (and even W3C proposals) that will transform those sections of your code into equivalent backward-compatible code that will work in the targets you've used.\"}),`\n`]})}function S(t={}){let{wrapper:e}=t.components||{};return e?(0,s.jsx)(e,Object.assign({},t,{children:(0,s.jsx)(d,t)})):d(t)}var j=S;return x(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var i in e)s(t,i,{get:e[i],enumerable:!0})},a=(t,e,i,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of y(e))!m.call(t,n)&&n!==i&&s(t,n,{get:()=>e[n],enumerable:!(r=f(e,n))||r.enumerable});return t};var g=(t,e,i)=>(i=t!=null?h(p(t)):{},a(e||!t||!t.__esModule?s(i,\"default\",{value:t,enumerable:!0}):i,t)),b=t=>a(s({},\"__esModule\",{value:!0}),t);var c=w((j,l)=>{l.exports=_jsx_runtime});var C={};x(C,{default:()=>u,frontmatter:()=>S});var o=g(c()),S={title:\"How would you approach fixing browser-specific styling issues?\"};function d(t){let e={code:\"code\",li:\"li\",ul:\"ul\",...t.components};return(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"After identifying the issue and the offending browser, use a separate style sheet that only loads when that specific browser is being used. This technique requires server-side rendering though.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Use libraries like Bootstrap that already handles these styling issues for you.\"}),`\n`,(0,o.jsxs)(e.li,{children:[\"Use \",(0,o.jsx)(e.code,{children:\"autoprefixer\"}),\" to automatically add vendor prefixes to your code.\"]}),`\n`,(0,o.jsx)(e.li,{children:\"Use Reset CSS or Normalize.css.\"}),`\n`,(0,o.jsx)(e.li,{children:\"If you're using PostCSS (or a similar CSS transpilation library), there may be plugins which allow you to opt in to using modern CSS syntax (and even W3C proposals) that will transform those sections of your code into equivalent backward-compatible code that will work in the targets you've used.\"}),`\n`]})}function u(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(d,{...t})}):d(t)}return b(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-would-you-approach-fixing-browser-specific-styling-issues/pt-BR.json b/apps/web/src/__generated__/questions/quiz/how-would-you-approach-fixing-browser-specific-styling-issues/pt-BR.json
index 3a27f780b..ee8a59e6b 100644
--- a/apps/web/src/__generated__/questions/quiz/how-would-you-approach-fixing-browser-specific-styling-issues/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/how-would-you-approach-fixing-browser-specific-styling-issues/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var x=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),b=(o,e)=>{for(var s in e)n(o,s,{get:e[s],enumerable:!0})},t=(o,e,s,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!v.call(o,r)&&r!==s&&n(o,r,{get:()=>e[r],enumerable:!(i=m(e,r))||i.enumerable});return o};var h=(o,e,s)=>(s=o!=null?u(f(o)):{},t(e||!o||!o.__esModule?n(s,\"default\",{value:o,enumerable:!0}):s,o)),q=o=>t(n({},\"__esModule\",{value:!0}),o);var d=x((D,c)=>{c.exports=_jsx_runtime});var C={};b(C,{default:()=>j,frontmatter:()=>g});var a=h(d()),g={title:\"Como voc\\xEA abordaria a corre\\xE7\\xE3o de problemas de estilo espec\\xEDficos de navegador?\"};function l(o){let e=Object.assign({ul:\"ul\",li:\"li\",code:\"code\"},o.components);return(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:\"Depois de identificar o problema e o navegador problem\\xE1tico, use uma folha de estilo separada que s\\xF3 \\xE9 carregada quando aquele navegador espec\\xEDfico est\\xE1 sendo usado. Essa t\\xE9cnica requer renderiza\\xE7\\xE3o do lado do servidor.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Use bibliotecas como Bootstrap que j\\xE1 lidam com esses problemas de estilo para voc\\xEA.\"}),`\n`,(0,a.jsxs)(e.li,{children:[\"Use o \",(0,a.jsx)(e.code,{children:\"autoprefixer\"}),\" para adicionar automaticamente prefixos de vendors ao seu c\\xF3digo.\"]}),`\n`,(0,a.jsx)(e.li,{children:\"Use Reset CSS or Normalize.css.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Se voc\\xEA estiver usando o PostCSS (ou uma biblioteca semelhante de transpila\\xE7\\xE3o CSS), pode haver plugins que permitam que voc\\xEA opte por usar a sintaxe CSS moderna (e at\\xE9 mesmo as propostas W3C) que transformar\\xE1 aquelas se\\xE7\\xF5es do seu c\\xF3digo em c\\xF3digo compat\\xEDvel com vers\\xF5es anteriores que funcionar\\xE3o nos destinos que voc\\xEA definiu.\"}),`\n`]})}function S(o={}){let{wrapper:e}=o.components||{};return e?(0,a.jsx)(e,Object.assign({},o,{children:(0,a.jsx)(l,o)})):l(o)}var j=S;return q(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var h=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),q=(o,e)=>{for(var s in e)n(o,s,{get:e[s],enumerable:!0})},t=(o,e,s,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!x.call(o,r)&&r!==s&&n(o,r,{get:()=>e[r],enumerable:!(i=p(e,r))||i.enumerable});return o};var b=(o,e,s)=>(s=o!=null?m(v(o)):{},t(e||!o||!o.__esModule?n(s,\"default\",{value:o,enumerable:!0}):s,o)),S=o=>t(n({},\"__esModule\",{value:!0}),o);var d=h((_,c)=>{c.exports=_jsx_runtime});var C={};q(C,{default:()=>u,frontmatter:()=>g});var a=b(d()),g={title:\"Como voc\\xEA abordaria a corre\\xE7\\xE3o de problemas de estilo espec\\xEDficos de navegador?\"};function l(o){let e={code:\"code\",li:\"li\",ul:\"ul\",...o.components};return(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:\"Depois de identificar o problema e o navegador problem\\xE1tico, use uma folha de estilo separada que s\\xF3 \\xE9 carregada quando aquele navegador espec\\xEDfico est\\xE1 sendo usado. Essa t\\xE9cnica requer renderiza\\xE7\\xE3o do lado do servidor.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Use bibliotecas como Bootstrap que j\\xE1 lidam com esses problemas de estilo para voc\\xEA.\"}),`\n`,(0,a.jsxs)(e.li,{children:[\"Use o \",(0,a.jsx)(e.code,{children:\"autoprefixer\"}),\" para adicionar automaticamente prefixos de vendors ao seu c\\xF3digo.\"]}),`\n`,(0,a.jsx)(e.li,{children:\"Use Reset CSS or Normalize.css.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Se voc\\xEA estiver usando o PostCSS (ou uma biblioteca semelhante de transpila\\xE7\\xE3o CSS), pode haver plugins que permitam que voc\\xEA opte por usar a sintaxe CSS moderna (e at\\xE9 mesmo as propostas W3C) que transformar\\xE1 aquelas se\\xE7\\xF5es do seu c\\xF3digo em c\\xF3digo compat\\xEDvel com vers\\xF5es anteriores que funcionar\\xE3o nos destinos que voc\\xEA definiu.\"}),`\n`]})}function u(o={}){let{wrapper:e}=o.components||{};return e?(0,a.jsx)(e,{...o,children:(0,a.jsx)(l,{...o})}):l(o)}return S(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-would-you-approach-fixing-browser-specific-styling-issues/zh-CN.json b/apps/web/src/__generated__/questions/quiz/how-would-you-approach-fixing-browser-specific-styling-issues/zh-CN.json
index d3308ad56..5a3895b5e 100644
--- a/apps/web/src/__generated__/questions/quiz/how-would-you-approach-fixing-browser-specific-styling-issues/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/how-would-you-approach-fixing-browser-specific-styling-issues/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var j=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),C=(e,n)=>{for(var o in n)r(e,o,{get:n[o],enumerable:!0})},s=(e,n,o,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of h(n))!S.call(e,i)&&i!==o&&r(e,i,{get:()=>n[i],enumerable:!(c=x(n,i))||c.enumerable});return e};var f=(e,n,o)=>(o=e!=null?u(m(e)):{},s(n||!e||!e.__esModule?r(o,\"default\",{value:e,enumerable:!0}):o,e)),_=e=>s(r({},\"__esModule\",{value:!0}),e);var d=j((O,l)=>{l.exports=_jsx_runtime});var g={};C(g,{default:()=>b,frontmatter:()=>p});var t=f(d()),p={title:\"\\u60A8\\u5C06\\u5982\\u4F55\\u89E3\\u51B3\\u7279\\u5B9A\\u4E8E\\u6D4F\\u89C8\\u5668\\u7684\\u6837\\u5F0F\\u95EE\\u9898\\uFF1F\"};function a(e){let n=Object.assign({ul:\"ul\",li:\"li\",code:\"code\"},e.components);return(0,t.jsxs)(n.ul,{children:[`\n`,(0,t.jsx)(n.li,{children:\"\\u5728\\u786E\\u5B9A\\u95EE\\u9898\\u548C\\u6709\\u95EE\\u9898\\u7684\\u6D4F\\u89C8\\u5668\\u540E\\uFF0C\\u4F7F\\u7528\\u4EC5\\u5728\\u7279\\u5B9A\\u6D4F\\u89C8\\u5668\\u4F7F\\u7528\\u65F6\\u52A0\\u8F7D\\u7684\\u5355\\u72EC\\u6837\\u5F0F\\u8868\\u3002\\u4F46\\u662F\\uFF0C\\u6B64\\u6280\\u672F\\u9700\\u8981\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"\\u4F7F\\u7528 Bootstrap \\u7B49\\u5DF2\\u7ECF\\u4E3A\\u60A8\\u5904\\u7406\\u8FD9\\u4E9B\\u6837\\u5F0F\\u95EE\\u9898\\u7684\\u5E93\\u3002\"}),`\n`,(0,t.jsxs)(n.li,{children:[\"\\u4F7F\\u7528 \",(0,t.jsx)(n.code,{children:\"autoprefixer\"}),\" \\u81EA\\u52A8\\u5C06\\u4F9B\\u5E94\\u5546\\u524D\\u7F00\\u6DFB\\u52A0\\u5230\\u60A8\\u7684\\u4EE3\\u7801\\u4E2D\\u3002\"]}),`\n`,(0,t.jsx)(n.li,{children:\"\\u4F7F\\u7528 Reset CSS \\u6216 Normalize.css\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"\\u5982\\u679C\\u60A8\\u6B63\\u5728\\u4F7F\\u7528 PostCSS\\uFF08\\u6216\\u7C7B\\u4F3C\\u7684 CSS \\u8F6C\\u8BD1\\u5E93\\uFF09\\uFF0C\\u53EF\\u80FD\\u5B58\\u5728\\u5141\\u8BB8\\u60A8\\u9009\\u62E9\\u4F7F\\u7528\\u73B0\\u4EE3 CSS \\u8BED\\u6CD5\\uFF08\\u751A\\u81F3 W3C \\u63D0\\u6848\\uFF09\\u7684\\u63D2\\u4EF6\\uFF0C\\u8FD9\\u4E9B\\u63D2\\u4EF6\\u4F1A\\u5C06\\u4EE3\\u7801\\u7684\\u8FD9\\u4E9B\\u90E8\\u5206\\u8F6C\\u6362\\u4E3A\\u7B49\\u6548\\u7684\\u5411\\u540E\\u517C\\u5BB9\\u4EE3\\u7801\\uFF0C\\u8FD9\\u4E9B\\u4EE3\\u7801\\u5C06\\u5728\\u60A8\\u4F7F\\u7528\\u7684\\u76EE\\u6807\\u4E2D\\u8D77\\u4F5C\\u7528\\u3002\"}),`\n`]})}function M(e={}){let{wrapper:n}=e.components||{};return n?(0,t.jsx)(n,Object.assign({},e,{children:(0,t.jsx)(a,e)})):a(e)}var b=M;return _(g);})();\n;return Component;"
+  "solution": "var Component=(()=>{var x=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var f=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),_=(e,n)=>{for(var o in n)i(e,o,{get:n[o],enumerable:!0})},l=(e,n,o,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of m(n))!C.call(e,r)&&r!==o&&i(e,r,{get:()=>n[r],enumerable:!(c=h(n,r))||c.enumerable});return e};var j=(e,n,o)=>(o=e!=null?x(S(e)):{},l(n||!e||!e.__esModule?i(o,\"default\",{value:e,enumerable:!0}):o,e)),p=e=>l(i({},\"__esModule\",{value:!0}),e);var d=f((w,s)=>{s.exports=_jsx_runtime});var D={};_(D,{default:()=>a,frontmatter:()=>M});var t=j(d()),M={title:\"\\u60A8\\u5C06\\u5982\\u4F55\\u89E3\\u51B3\\u7279\\u5B9A\\u4E8E\\u6D4F\\u89C8\\u5668\\u7684\\u6837\\u5F0F\\u95EE\\u9898\\uFF1F\"};function u(e){let n={code:\"code\",li:\"li\",ul:\"ul\",...e.components};return(0,t.jsxs)(n.ul,{children:[`\n`,(0,t.jsx)(n.li,{children:\"\\u5728\\u786E\\u5B9A\\u95EE\\u9898\\u548C\\u6709\\u95EE\\u9898\\u7684\\u6D4F\\u89C8\\u5668\\u540E\\uFF0C\\u4F7F\\u7528\\u4EC5\\u5728\\u7279\\u5B9A\\u6D4F\\u89C8\\u5668\\u4F7F\\u7528\\u65F6\\u52A0\\u8F7D\\u7684\\u5355\\u72EC\\u6837\\u5F0F\\u8868\\u3002\\u4F46\\u662F\\uFF0C\\u6B64\\u6280\\u672F\\u9700\\u8981\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"\\u4F7F\\u7528 Bootstrap \\u7B49\\u5DF2\\u7ECF\\u4E3A\\u60A8\\u5904\\u7406\\u8FD9\\u4E9B\\u6837\\u5F0F\\u95EE\\u9898\\u7684\\u5E93\\u3002\"}),`\n`,(0,t.jsxs)(n.li,{children:[\"\\u4F7F\\u7528 \",(0,t.jsx)(n.code,{children:\"autoprefixer\"}),\" \\u81EA\\u52A8\\u5C06\\u4F9B\\u5E94\\u5546\\u524D\\u7F00\\u6DFB\\u52A0\\u5230\\u60A8\\u7684\\u4EE3\\u7801\\u4E2D\\u3002\"]}),`\n`,(0,t.jsx)(n.li,{children:\"\\u4F7F\\u7528 Reset CSS \\u6216 Normalize.css\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"\\u5982\\u679C\\u60A8\\u6B63\\u5728\\u4F7F\\u7528 PostCSS\\uFF08\\u6216\\u7C7B\\u4F3C\\u7684 CSS \\u8F6C\\u8BD1\\u5E93\\uFF09\\uFF0C\\u53EF\\u80FD\\u5B58\\u5728\\u5141\\u8BB8\\u60A8\\u9009\\u62E9\\u4F7F\\u7528\\u73B0\\u4EE3 CSS \\u8BED\\u6CD5\\uFF08\\u751A\\u81F3 W3C \\u63D0\\u6848\\uFF09\\u7684\\u63D2\\u4EF6\\uFF0C\\u8FD9\\u4E9B\\u63D2\\u4EF6\\u4F1A\\u5C06\\u4EE3\\u7801\\u7684\\u8FD9\\u4E9B\\u90E8\\u5206\\u8F6C\\u6362\\u4E3A\\u7B49\\u6548\\u7684\\u5411\\u540E\\u517C\\u5BB9\\u4EE3\\u7801\\uFF0C\\u8FD9\\u4E9B\\u4EE3\\u7801\\u5C06\\u5728\\u60A8\\u4F7F\\u7528\\u7684\\u76EE\\u6807\\u4E2D\\u8D77\\u4F5C\\u7528\\u3002\"}),`\n`]})}function a(e={}){let{wrapper:n}=e.components||{};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(u,{...e})}):u(e)}return p(D);})();\n;return Component;"
 }
\ No newline at end of file
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 62ffa6f2f..ab601cd90 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var p=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var i in e)o(n,i,{get:e[i],enumerable:!0})},a=(n,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!m.call(n,r)&&r!==i&&o(n,r,{get:()=>e[r],enumerable:!(s=g(e,r))||s.enumerable});return n};var w=(n,e,i)=>(i=n!=null?h(f(n)):{},a(e||!n||!n.__esModule?o(i,\"default\",{value:n,enumerable:!0}):i,n)),b=n=>a(o({},\"__esModule\",{value:!0}),n);var c=p((_,l)=>{l.exports=_jsx_runtime});var y={};v(y,{default:()=>j,frontmatter:()=>x});var t=w(c()),x={title:\"Consider HTML5 as an open web platform. What are the building blocks of HTML5?\"};function d(n){let e=Object.assign({ul:\"ul\",li:\"li\",strong:\"strong\"},n.components);return(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Semantics\"}),\": HTML tags describe the content.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Styling\"}),\": Customizing appearance of HTML tags\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Connectivity\"}),\": Communicate with the server in new and innovative ways.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Offline and storage\"}),\": Allows webpages to store data on the client-side locally and operate offline more efficiently.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Multimedia\"}),\": Makes video and audio first-class citizens in the Open Web.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"2D/3D graphics and effects\"}),\": Allows a much more diverse range of presentation options.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Performance\"}),\" and integration: Provides greater speed optimization and better usage of computer hardware.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Device access\"}),\": Allows for the usage of various input and output devices.\"]}),`\n`]})}function M(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(d,n)})):d(n)}var j=M;return b(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var g=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),w=(n,e)=>{for(var i in e)o(n,i,{get:e[i],enumerable:!0})},a=(n,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!p.call(n,r)&&r!==i&&o(n,r,{get:()=>e[r],enumerable:!(s=u(e,r))||s.enumerable});return n};var x=(n,e,i)=>(i=n!=null?g(m(n)):{},a(e||!n||!n.__esModule?o(i,\"default\",{value:n,enumerable:!0}):i,n)),M=n=>a(o({},\"__esModule\",{value:!0}),n);var c=v((_,l)=>{l.exports=_jsx_runtime});var y={};w(y,{default:()=>h,frontmatter:()=>b});var t=x(c()),b={title:\"Consider HTML5 as an open web platform. What are the building blocks of HTML5?\"};function d(n){let e={li:\"li\",strong:\"strong\",ul:\"ul\",...n.components};return(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Semantics\"}),\": HTML tags describe the content.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Styling\"}),\": Customizing appearance of HTML tags\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Connectivity\"}),\": Communicate with the server in new and innovative ways.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Offline and storage\"}),\": Allows webpages to store data on the client-side locally and operate offline more efficiently.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Multimedia\"}),\": Makes video and audio first-class citizens in the Open Web.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"2D/3D graphics and effects\"}),\": Allows a much more diverse range of presentation options.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Performance and integration\"}),\": Provides greater speed optimization and better usage of computer hardware.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Device access\"}),\": Allows for the usage of various input and output devices.\"]}),`\n`]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(d,{...n})}):d(n)}return M(y);})();\n;return Component;"
 }
\ No newline at end of file
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 c3ce053dc..8e7d38e0d 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var p=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var i in e)r(n,i,{get:e[i],enumerable:!0})},t=(n,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of h(e))!f.call(n,a)&&a!==i&&r(n,a,{get:()=>e[a],enumerable:!(s=u(e,a))||s.enumerable});return n};var x=(n,e,i)=>(i=n!=null?m(g(n)):{},t(e||!n||!n.__esModule?r(i,\"default\",{value:n,enumerable:!0}):i,n)),b=n=>t(r({},\"__esModule\",{value:!0}),n);var c=p((D,d)=>{d.exports=_jsx_runtime});var z={};v(z,{default:()=>_,frontmatter:()=>M});var o=x(c()),M={title:\"Considere HTML5 como uma plataforma web aberta. Quais s\\xE3o os blocos de constru\\xE7\\xE3o do HTML5?\"};function l(n){let e=Object.assign({ul:\"ul\",li:\"li\",strong:\"strong\"},n.components);return(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Semantics\"}),\": As tags HTML descrevem o conte\\xFAdo.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Estiliza\\xE7\\xE3o\"}),\": Personalizando a apar\\xEAncia das tags HTML\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Conectividade\"}),\": Comunique-se com o servidor de maneiras novas e inovadoras.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Offline e armazenamento\"}),\": Permite que as p\\xE1ginas da web armazenem dados localmente no lado do cliente e funcionem offline de maneira mais eficiente.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Multim\\xEDdia\"}),\": Torna o v\\xEDdeo e o \\xE1udio cidad\\xE3os de primeira classe na Web Aberta.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Gr\\xE1ficos e efeitos 2D/3D\"}),\": Permite uma gama muito mais diversa de op\\xE7\\xF5es de apresenta\\xE7\\xE3o.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Desempenho\"}),\" e integra\\xE7\\xE3o: Fornece uma otimiza\\xE7\\xE3o de velocidade maior e melhor uso do hardware do computador.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Acesso a dispositivos\"}),\": Permite o uso de v\\xE1rios dispositivos de entrada e sa\\xEDda.\"]}),`\n`]})}function j(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(l,n)})):l(n)}var _=j;return b(z);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var v=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var i in e)a(o,i,{get:e[i],enumerable:!0})},t=(o,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of g(e))!p.call(o,r)&&r!==i&&a(o,r,{get:()=>e[r],enumerable:!(s=h(e,r))||s.enumerable});return o};var M=(o,e,i)=>(i=o!=null?u(f(o)):{},t(e||!o||!o.__esModule?a(i,\"default\",{value:o,enumerable:!0}):i,o)),b=o=>t(a({},\"__esModule\",{value:!0}),o);var c=v((C,d)=>{d.exports=_jsx_runtime});var j={};x(j,{default:()=>m,frontmatter:()=>_});var n=M(c()),_={title:\"Considere HTML5 como uma plataforma web aberta. Quais s\\xE3o os blocos de constru\\xE7\\xE3o do HTML5?\"};function l(o){let e={li:\"li\",strong:\"strong\",ul:\"ul\",...o.components};return(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Semantics\"}),\": As tags HTML descrevem o conte\\xFAdo.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Estiliza\\xE7\\xE3o\"}),\": Personalizando a apar\\xEAncia das tags HTML\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Conectividade\"}),\": Comunique-se com o servidor de maneiras novas e inovadoras.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Offline e armazenamento\"}),\": Permite que as p\\xE1ginas da web armazenem dados localmente no lado do cliente e funcionem offline de maneira mais eficiente.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Multim\\xEDdia\"}),\": Torna o v\\xEDdeo e o \\xE1udio cidad\\xE3os de primeira classe na Web Aberta.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Gr\\xE1ficos e efeitos 2D/3D\"}),\": Permite uma gama muito mais diversa de op\\xE7\\xF5es de apresenta\\xE7\\xE3o.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Desempenho e integra\\xE7\\xE3o\"}),\": Fornece uma otimiza\\xE7\\xE3o de velocidade maior e melhor uso do hardware do computador.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Acesso a dispositivos\"}),\": Permite o uso de v\\xE1rios dispositivos de entrada e sa\\xEDda.\"]}),`\n`]})}function m(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(l,{...o})}):l(o)}return b(j);})();\n;return Component;"
 }
\ No newline at end of file
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 da6191a02..b648a66b6 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var g=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var m=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),M=(r,n)=>{for(var t in n)l(r,t,{get:n[t],enumerable:!0})},o=(r,n,t,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of a(n))!j.call(r,i)&&i!==t&&l(r,i,{get:()=>n[i],enumerable:!(c=u(n,i))||c.enumerable});return r};var _=(r,n,t)=>(t=r!=null?g(x(r)):{},o(n||!r||!r.__esModule?l(t,\"default\",{value:r,enumerable:!0}):t,r)),f=r=>o(l({},\"__esModule\",{value:!0}),r);var d=m((p,s)=>{s.exports=_jsx_runtime});var H={};M(H,{default:()=>D,frontmatter:()=>L});var e=_(d()),L={title:\"\\u5C06 HTML5 \\u89C6\\u4E3A\\u4E00\\u4E2A\\u5F00\\u653E\\u7684 Web \\u5E73\\u53F0\\u3002HTML5 \\u7684\\u6784\\u5EFA\\u5757\\u662F\\u4EC0\\u4E48\\uFF1F\"};function h(r){let n=Object.assign({ul:\"ul\",li:\"li\",strong:\"strong\"},r.components);return(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8BED\\u4E49\"}),\": HTML \\u6807\\u7B7E\\u63CF\\u8FF0\\u5185\\u5BB9\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6837\\u5F0F\"}),\": \\u81EA\\u5B9A\\u4E49 HTML \\u6807\\u7B7E\\u7684\\u5916\\u89C2\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8FDE\\u63A5\\u6027\"}),\": \\u4EE5\\u65B0\\u7684\\u548C\\u521B\\u65B0\\u7684\\u65B9\\u5F0F\\u4E0E\\u670D\\u52A1\\u5668\\u901A\\u4FE1\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u79BB\\u7EBF\\u548C\\u5B58\\u50A8\"}),\": \\u5141\\u8BB8\\u7F51\\u9875\\u5728\\u5BA2\\u6237\\u7AEF\\u672C\\u5730\\u5B58\\u50A8\\u6570\\u636E\\uFF0C\\u5E76\\u66F4\\u6709\\u6548\\u5730\\u79BB\\u7EBF\\u8FD0\\u884C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u591A\\u5A92\\u4F53\"}),\": \\u4F7F\\u89C6\\u9891\\u548C\\u97F3\\u9891\\u6210\\u4E3A\\u5F00\\u653E Web \\u4E2D\\u7684\\u4E00\\u6D41\\u516C\\u6C11\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"2D/3D \\u56FE\\u5F62\\u548C\\u6548\\u679C\"}),\": \\u5141\\u8BB8\\u66F4\\u591A\\u6837\\u5316\\u7684\\u6F14\\u793A\\u9009\\u9879\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6027\\u80FD\"}),\" \\u548C\\u96C6\\u6210\\uFF1A\\u63D0\\u4F9B\\u66F4\\u9AD8\\u7684\\u901F\\u5EA6\\u4F18\\u5316\\u548C\\u66F4\\u597D\\u7684\\u8BA1\\u7B97\\u673A\\u786C\\u4EF6\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8BBE\\u5907\\u8BBF\\u95EE\"}),\": \\u5141\\u8BB8\\u4F7F\\u7528\\u5404\\u79CD\\u8F93\\u5165\\u548C\\u8F93\\u51FA\\u8BBE\\u5907\\u3002\"]}),`\n`]})}function b(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(h,r)})):h(r)}var D=b;return f(H);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var _=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),f=(r,n)=>{for(var t in n)l(r,t,{get:n[t],enumerable:!0})},o=(r,n,t,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of a(n))!M.call(r,i)&&i!==t&&l(r,i,{get:()=>n[i],enumerable:!(c=x(n,i))||c.enumerable});return r};var j=(r,n,t)=>(t=r!=null?u(m(r)):{},o(n||!r||!r.__esModule?l(t,\"default\",{value:r,enumerable:!0}):t,r)),L=r=>o(l({},\"__esModule\",{value:!0}),r);var d=_((p,s)=>{s.exports=_jsx_runtime});var H={};f(H,{default:()=>g,frontmatter:()=>D});var e=j(d()),D={title:\"\\u5C06 HTML5 \\u89C6\\u4E3A\\u4E00\\u4E2A\\u5F00\\u653E\\u7684 Web \\u5E73\\u53F0\\u3002HTML5 \\u7684\\u6784\\u5EFA\\u5757\\u662F\\u4EC0\\u4E48\\uFF1F\"};function h(r){let n={li:\"li\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8BED\\u4E49\"}),\": HTML \\u6807\\u7B7E\\u63CF\\u8FF0\\u5185\\u5BB9\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6837\\u5F0F\"}),\": \\u81EA\\u5B9A\\u4E49 HTML \\u6807\\u7B7E\\u7684\\u5916\\u89C2\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8FDE\\u63A5\\u6027\"}),\": \\u4EE5\\u65B0\\u7684\\u548C\\u521B\\u65B0\\u7684\\u65B9\\u5F0F\\u4E0E\\u670D\\u52A1\\u5668\\u901A\\u4FE1\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u79BB\\u7EBF\\u548C\\u5B58\\u50A8\"}),\": \\u5141\\u8BB8\\u7F51\\u9875\\u5728\\u5BA2\\u6237\\u7AEF\\u672C\\u5730\\u5B58\\u50A8\\u6570\\u636E\\uFF0C\\u5E76\\u66F4\\u6709\\u6548\\u5730\\u79BB\\u7EBF\\u8FD0\\u884C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u591A\\u5A92\\u4F53\"}),\": \\u4F7F\\u89C6\\u9891\\u548C\\u97F3\\u9891\\u6210\\u4E3A\\u5F00\\u653E Web \\u4E2D\\u7684\\u4E00\\u6D41\\u516C\\u6C11\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"2D/3D \\u56FE\\u5F62\\u548C\\u6548\\u679C\"}),\": \\u5141\\u8BB8\\u66F4\\u591A\\u6837\\u5316\\u7684\\u5448\\u73B0\\u9009\\u9879\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6027\\u80FD\\u548C\\u96C6\\u6210\"}),\": \\u63D0\\u4F9B\\u66F4\\u9AD8\\u7684\\u901F\\u5EA6\\u4F18\\u5316\\u548C\\u66F4\\u597D\\u7684\\u8BA1\\u7B97\\u673A\\u786C\\u4EF6\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8BBE\\u5907\\u8BBF\\u95EE\"}),\": \\u5141\\u8BB8\\u4F7F\\u7528\\u5404\\u79CD\\u8F93\\u5165\\u548C\\u8F93\\u51FA\\u8BBE\\u5907\\u3002\"]}),`\n`]})}function g(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(h,{...r})}):h(r)}return L(H);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/en-US.json b/apps/web/src/__generated__/questions/quiz/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/en-US.json
index 38b9ac301..19f68157c 100644
--- a/apps/web/src/__generated__/questions/quiz/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/en-US.json
@@ -30,5 +30,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},a=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!f.call(t,r)&&r!==o&&i(t,r,{get:()=>e[r],enumerable:!(s=g(e,r))||s.enumerable});return t};var w=(t,e,o)=>(o=t!=null?d(u(t)):{},a(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),x=t=>a(i({},\"__esModule\",{value:!0}),t);var l=m((M,c)=>{c.exports=_jsx_runtime});var v={};b(v,{default:()=>_,frontmatter:()=>y});var n=w(l()),y={title:\"Is there any reason you'd want to use `translate()` instead of `absolute` positioning, or vice-versa? And why?\"};function h(t){let e=Object.assign({p:\"p\",code:\"code\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"translate()\"}),\" is a possible value of the CSS \",(0,n.jsx)(e.code,{children:\"transform\"}),\" property. When using \",(0,n.jsx)(e.code,{children:\"translate()\"}),\", the element still occupies its original space (sort of like \",(0,n.jsx)(e.code,{children:\"position: relative\"}),\"). But when changing the absolute positioning of elements, the elements are removed from the flow of the page and the positioning of the surrounding elements will be affected. Hence the page layout will have to be recalculated.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Changing \",(0,n.jsx)(e.code,{children:\"transform\"}),\" or \",(0,n.jsx)(e.code,{children:\"opacity\"}),\" does not trigger browser reflows or repaints but does trigger compositions; On the other hand, changing the absolute positioning triggers \",(0,n.jsx)(e.code,{children:\"reflow\"}),\". \",(0,n.jsx)(e.code,{children:\"transform\"}),\" causes the browser to create a GPU layer for the element but changing absolute positioning properties uses the CPU. Hence \",(0,n.jsx)(e.code,{children:\"translate()\"}),\" is more efficient and will result in shorter paint times for smoother animations.\"]})]})}function j(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var _=j;return x(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var g=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},a=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!m.call(t,r)&&r!==o&&i(t,r,{get:()=>e[r],enumerable:!(s=p(e,r))||s.enumerable});return t};var x=(t,e,o)=>(o=t!=null?g(f(t)):{},a(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),y=t=>a(i({},\"__esModule\",{value:!0}),t);var l=w((C,c)=>{c.exports=_jsx_runtime});var v={};b(v,{default:()=>d,frontmatter:()=>_});var n=x(l()),_={title:\"Is there any reason you'd want to use `translate()` instead of `absolute` positioning, or vice-versa? And why?\"};function h(t){let e={code:\"code\",p:\"p\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"translate()\"}),\" is a possible value of the CSS \",(0,n.jsx)(e.code,{children:\"transform\"}),\" property. When using \",(0,n.jsx)(e.code,{children:\"translate()\"}),\", the element still occupies its original space (sort of like \",(0,n.jsx)(e.code,{children:\"position: relative\"}),\"). But when changing the absolute positioning of elements, the elements are removed from the flow of the page and the positioning of the surrounding elements will be affected. Hence the page layout will have to be recalculated.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Changing \",(0,n.jsx)(e.code,{children:\"transform\"}),\" or \",(0,n.jsx)(e.code,{children:\"opacity\"}),\" does not trigger browser reflows or repaints but does trigger compositions; On the other hand, changing the absolute positioning triggers \",(0,n.jsx)(e.code,{children:\"reflow\"}),\". \",(0,n.jsx)(e.code,{children:\"transform\"}),\" causes the browser to create a GPU layer for the element but changing absolute positioning properties uses the CPU. Hence \",(0,n.jsx)(e.code,{children:\"translate()\"}),\" is more efficient and will result in shorter paint times for smoother animations.\"]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return y(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/pt-BR.json b/apps/web/src/__generated__/questions/quiz/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/pt-BR.json
index 8a7134d06..c8e445fa2 100644
--- a/apps/web/src/__generated__/questions/quiz/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/pt-BR.json
@@ -30,5 +30,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var v=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),x=(e,o)=>{for(var n in o)s(e,n,{get:o[n],enumerable:!0})},i=(e,o,n,t)=>{if(o&&typeof o==\"object\"||typeof o==\"function\")for(let r of p(o))!h.call(e,r)&&r!==n&&s(e,r,{get:()=>o[r],enumerable:!(t=l(o,r))||t.enumerable});return e};var g=(e,o,n)=>(n=e!=null?u(f(e)):{},i(o||!e||!e.__esModule?s(n,\"default\",{value:e,enumerable:!0}):n,e)),j=e=>i(s({},\"__esModule\",{value:!0}),e);var d=v((C,c)=>{c.exports=_jsx_runtime});var P={};x(P,{default:()=>M,frontmatter:()=>_});var a=g(d()),_={title:\"Existe alguma raz\\xE3o para voc\\xEA querer usar `translate()` ao inv\\xE9s de posicionamento `absolute`, ou vice-versa? E por qu\\xEA?\"};function m(e){let o=Object.assign({p:\"p\",code:\"code\"},e.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(o.p,{children:[(0,a.jsx)(o.code,{children:\"translate()\"}),\" \\xE9 um valor poss\\xEDvel da propriedade CSS \",(0,a.jsx)(o.code,{children:\"transform\"}),\". Ao usar \",(0,a.jsx)(o.code,{children:\"traduzir()\"}),\", o elemento ainda ocupa seu espa\\xE7o original (mais ou menos como o \",(0,a.jsx)(o.code,{children:\"position: relative\"}),\"). Mas ao mudar o posicionamento absoluto dos elementos, os elementos s\\xE3o removidos do fluxo da p\\xE1gina e o posicionamento dos elementos ao redor ser\\xE1 afetado. Portanto, o layout da p\\xE1gina ter\\xE1 que ser recalculado.\"]}),`\n`,(0,a.jsxs)(o.p,{children:[\"Mudar \",(0,a.jsx)(o.code,{children:\"transform\"}),\" ou \",(0,a.jsx)(o.code,{children:\"opacity\"}),\" n\\xE3o aciona reflows ou repaints no navegador, mas aciona composi\\xE7\\xF5es; Por outro lado, mudar o posicionamento absoluto aciona um \",(0,a.jsx)(o.code,{children:\"reflow\"}),\". \",(0,a.jsx)(o.code,{children:\"transform\"}),\" faz com que o navegador crie uma camada GPU para o elemento, mas mudar as propriedades de posicionamento absoluto usa a CPU. Portanto, \",(0,a.jsx)(o.code,{children:\"translate()\"}),\" \\xE9 mais eficiente e resultar\\xE1 em tempos de pintura mais curtos para anima\\xE7\\xF5es mais suaves.\"]})]})}function b(e={}){let{wrapper:o}=e.components||{};return o?(0,a.jsx)(o,Object.assign({},e,{children:(0,a.jsx)(m,e)})):m(e)}var M=b;return j(P);})();\n;return Component;"
+  "solution": "var Component=(()=>{var l=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var x=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),g=(e,o)=>{for(var r in o)t(e,r,{get:o[r],enumerable:!0})},i=(e,o,r,s)=>{if(o&&typeof o==\"object\"||typeof o==\"function\")for(let n of f(o))!v.call(e,n)&&n!==r&&t(e,n,{get:()=>o[n],enumerable:!(s=p(o,n))||s.enumerable});return e};var _=(e,o,r)=>(r=e!=null?l(h(e)):{},i(o||!e||!e.__esModule?t(r,\"default\",{value:e,enumerable:!0}):r,e)),j=e=>i(t({},\"__esModule\",{value:!0}),e);var d=x((q,c)=>{c.exports=_jsx_runtime});var P={};g(P,{default:()=>u,frontmatter:()=>M});var a=_(d()),M={title:\"Existe alguma raz\\xE3o para voc\\xEA querer usar `translate()` ao inv\\xE9s de posicionamento `absolute`, ou vice-versa? E por qu\\xEA?\"};function m(e){let o={code:\"code\",p:\"p\",...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(o.p,{children:[(0,a.jsx)(o.code,{children:\"translate()\"}),\" \\xE9 um valor poss\\xEDvel da propriedade CSS \",(0,a.jsx)(o.code,{children:\"transform\"}),\". Ao usar \",(0,a.jsx)(o.code,{children:\"traduzir()\"}),\", o elemento ainda ocupa seu espa\\xE7o original (mais ou menos como o \",(0,a.jsx)(o.code,{children:\"position: relative\"}),\"). Mas ao mudar o posicionamento absoluto dos elementos, os elementos s\\xE3o removidos do fluxo da p\\xE1gina e o posicionamento dos elementos ao redor ser\\xE1 afetado. Portanto, o layout da p\\xE1gina ter\\xE1 que ser recalculado.\"]}),`\n`,(0,a.jsxs)(o.p,{children:[\"Mudar \",(0,a.jsx)(o.code,{children:\"transform\"}),\" ou \",(0,a.jsx)(o.code,{children:\"opacity\"}),\" n\\xE3o aciona reflows ou repaints no navegador, mas aciona composi\\xE7\\xF5es; Por outro lado, mudar o posicionamento absoluto aciona um \",(0,a.jsx)(o.code,{children:\"reflow\"}),\". \",(0,a.jsx)(o.code,{children:\"transform\"}),\" faz com que o navegador crie uma camada GPU para o elemento, mas mudar as propriedades de posicionamento absoluto usa a CPU. Portanto, \",(0,a.jsx)(o.code,{children:\"translate()\"}),\" \\xE9 mais eficiente e resultar\\xE1 em tempos de pintura mais curtos para anima\\xE7\\xF5es mais suaves.\"]})]})}function u(e={}){let{wrapper:o}=e.components||{};return o?(0,a.jsx)(o,{...e,children:(0,a.jsx)(m,{...e})}):m(e)}return j(P);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/zh-CN.json b/apps/web/src/__generated__/questions/quiz/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/zh-CN.json
index 0aed54c2f..0296f84bb 100644
--- a/apps/web/src/__generated__/questions/quiz/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/zh-CN.json
@@ -30,5 +30,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var u=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var r in e)o(n,r,{get:e[r],enumerable:!0})},a=(n,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!f.call(n,c)&&c!==r&&o(n,c,{get:()=>e[c],enumerable:!(s=m(e,c))||s.enumerable});return n};var _=(n,e,r)=>(r=n!=null?h(x(n)):{},a(e||!n||!n.__esModule?o(r,\"default\",{value:n,enumerable:!0}):r,n)),g=n=>a(o({},\"__esModule\",{value:!0}),n);var i=u((F,d)=>{d.exports=_jsx_runtime});var y={};j(y,{default:()=>M,frontmatter:()=>C});var t=_(i()),C={title:\"\\u4F60\\u662F\\u5426\\u60F3\\u4F7F\\u7528 `translate()` \\u800C\\u4E0D\\u662F `absolute` \\u5B9A\\u4F4D\\uFF0C\\u6216\\u8005\\u53CD\\u8FC7\\u6765\\uFF1F\\u4E3A\\u4EC0\\u4E48\\uFF1F\"};function l(n){let e=Object.assign({p:\"p\",code:\"code\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"translate()\"}),\" \\u662F CSS \",(0,t.jsx)(e.code,{children:\"transform\"}),\" \\u5C5E\\u6027\\u7684\\u4E00\\u4E2A\\u53EF\\u80FD\\u503C\\u3002\\u4F7F\\u7528 \",(0,t.jsx)(e.code,{children:\"translate()\"}),\" \\u65F6\\uFF0C\\u5143\\u7D20\\u4ECD\\u7136\\u5360\\u636E\\u5176\\u539F\\u59CB\\u7A7A\\u95F4\\uFF08\\u6709\\u70B9\\u50CF \",(0,t.jsx)(e.code,{children:\"position: relative\"}),\"\\uFF09\\u3002\\u4F46\\u662F\\uFF0C\\u5F53\\u66F4\\u6539\\u5143\\u7D20\\u7684\\u7EDD\\u5BF9\\u5B9A\\u4F4D\\u65F6\\uFF0C\\u5143\\u7D20\\u5C06\\u4ECE\\u9875\\u9762\\u6D41\\u4E2D\\u79FB\\u9664\\uFF0C\\u5E76\\u4E14\\u5468\\u56F4\\u5143\\u7D20\\u7684\\u4F4D\\u7F6E\\u5C06\\u53D7\\u5230\\u5F71\\u54CD\\u3002\\u56E0\\u6B64\\uFF0C\\u5C06\\u4E0D\\u5F97\\u4E0D\\u91CD\\u65B0\\u8BA1\\u7B97\\u9875\\u9762\\u5E03\\u5C40\\u3002\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u66F4\\u6539 \",(0,t.jsx)(e.code,{children:\"transform\"}),\" \\u6216 \",(0,t.jsx)(e.code,{children:\"opacity\"}),\" \\u4E0D\\u4F1A\\u89E6\\u53D1\\u6D4F\\u89C8\\u5668\\u56DE\\u6D41\\u6216\\u91CD\\u7ED8\\uFF0C\\u4F46\\u4F1A\\u89E6\\u53D1\\u5408\\u6210\\uFF1B\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\\u66F4\\u6539\\u7EDD\\u5BF9\\u5B9A\\u4F4D\\u4F1A\\u89E6\\u53D1\\u201C\\u56DE\\u6D41\\u201D\\u3002\",(0,t.jsx)(e.code,{children:\"transform\"}),\" \\u4F1A\\u5BFC\\u81F4\\u6D4F\\u89C8\\u5668\\u4E3A\\u8BE5\\u5143\\u7D20\\u521B\\u5EFA\\u4E00\\u4E2A GPU \\u5C42\\uFF0C\\u4F46\\u66F4\\u6539\\u7EDD\\u5BF9\\u5B9A\\u4F4D\\u5C5E\\u6027\\u4F1A\\u4F7F\\u7528 CPU\\u3002\\u56E0\\u6B64\\uFF0C\",(0,t.jsx)(e.code,{children:\"translate()\"}),\" \\u66F4\\u6709\\u6548\\uFF0C\\u5E76\\u4E14\\u5C06\\u5BFC\\u81F4\\u66F4\\u77ED\\u7684\\u7ED8\\u5236\\u65F6\\u95F4\\uFF0C\\u4ECE\\u800C\\u5B9E\\u73B0\\u66F4\\u6D41\\u7545\\u7684\\u52A8\\u753B\\u3002\"]})]})}function b(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(l,n)})):l(n)}var M=b;return g(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var _=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var r in e)c(n,r,{get:e[r],enumerable:!0})},d=(n,e,r,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of x(e))!u.call(n,o)&&o!==r&&c(n,o,{get:()=>e[o],enumerable:!(a=p(e,o))||a.enumerable});return n};var C=(n,e,r)=>(r=n!=null?m(f(n)):{},d(e||!n||!n.__esModule?c(r,\"default\",{value:n,enumerable:!0}):r,n)),M=n=>d(c({},\"__esModule\",{value:!0}),n);var i=_((F,s)=>{s.exports=_jsx_runtime});var y={};j(y,{default:()=>h,frontmatter:()=>g});var t=C(i()),g={title:\"\\u4F60\\u662F\\u5426\\u60F3\\u4F7F\\u7528 `translate()` \\u800C\\u4E0D\\u662F `absolute` \\u5B9A\\u4F4D\\uFF0C\\u6216\\u8005\\u53CD\\u8FC7\\u6765\\uFF1F\\u4E3A\\u4EC0\\u4E48\\uFF1F\"};function l(n){let e={code:\"code\",p:\"p\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"translate()\"}),\" \\u662F CSS \",(0,t.jsx)(e.code,{children:\"transform\"}),\" \\u5C5E\\u6027\\u7684\\u4E00\\u4E2A\\u53EF\\u80FD\\u503C\\u3002\\u4F7F\\u7528 \",(0,t.jsx)(e.code,{children:\"translate()\"}),\" \\u65F6\\uFF0C\\u5143\\u7D20\\u4ECD\\u7136\\u5360\\u636E\\u5176\\u539F\\u59CB\\u7A7A\\u95F4\\uFF08\\u6709\\u70B9\\u50CF \",(0,t.jsx)(e.code,{children:\"position: relative\"}),\"\\uFF09\\u3002\\u4F46\\u662F\\uFF0C\\u5F53\\u66F4\\u6539\\u5143\\u7D20\\u7684\\u7EDD\\u5BF9\\u5B9A\\u4F4D\\u65F6\\uFF0C\\u5143\\u7D20\\u5C06\\u4ECE\\u9875\\u9762\\u6D41\\u4E2D\\u79FB\\u9664\\uFF0C\\u5E76\\u4E14\\u5468\\u56F4\\u5143\\u7D20\\u7684\\u4F4D\\u7F6E\\u5C06\\u53D7\\u5230\\u5F71\\u54CD\\u3002\\u56E0\\u6B64\\uFF0C\\u5C06\\u4E0D\\u5F97\\u4E0D\\u91CD\\u65B0\\u8BA1\\u7B97\\u9875\\u9762\\u5E03\\u5C40\\u3002\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u66F4\\u6539 \",(0,t.jsx)(e.code,{children:\"transform\"}),\" \\u6216 \",(0,t.jsx)(e.code,{children:\"opacity\"}),\" \\u4E0D\\u4F1A\\u89E6\\u53D1\\u6D4F\\u89C8\\u5668\\u56DE\\u6D41\\u6216\\u91CD\\u7ED8\\uFF0C\\u4F46\\u4F1A\\u89E6\\u53D1\\u5408\\u6210\\uFF1B\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\\u66F4\\u6539\\u7EDD\\u5BF9\\u5B9A\\u4F4D\\u4F1A\\u89E6\\u53D1\\u201C\\u56DE\\u6D41\\u201D\\u3002\",(0,t.jsx)(e.code,{children:\"transform\"}),\" \\u4F1A\\u5BFC\\u81F4\\u6D4F\\u89C8\\u5668\\u4E3A\\u8BE5\\u5143\\u7D20\\u521B\\u5EFA\\u4E00\\u4E2A GPU \\u5C42\\uFF0C\\u4F46\\u66F4\\u6539\\u7EDD\\u5BF9\\u5B9A\\u4F4D\\u5C5E\\u6027\\u4F1A\\u4F7F\\u7528 CPU\\u3002\\u56E0\\u6B64\\uFF0C\",(0,t.jsx)(e.code,{children:\"translate()\"}),\" \\u66F4\\u6709\\u6548\\uFF0C\\u5E76\\u4E14\\u5C06\\u5BFC\\u81F4\\u66F4\\u77ED\\u7684\\u7ED8\\u5236\\u65F6\\u95F4\\uFF0C\\u4ECE\\u800C\\u5B9E\\u73B0\\u66F4\\u6D41\\u7545\\u7684\\u52A8\\u753B\\u3002\"]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(l,{...n})}):l(n)}return M(y);})();\n;return Component;"
 }
\ No newline at end of file
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 12e3391d0..1e764e336 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),w=(a,n)=>{for(var i in n)t(a,i,{get:n[i],enumerable:!0})},l=(a,n,i,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of p(n))!g.call(a,r)&&r!==i&&t(a,r,{get:()=>n[r],enumerable:!(o=h(n,r))||o.enumerable});return a};var b=(a,n,i)=>(i=a!=null?u(f(a)):{},l(n||!a||!a.__esModule?t(i,\"default\",{value:a,enumerable:!0}):i,a)),x=a=>l(t({},\"__esModule\",{value:!0}),a);var d=m((_,c)=>{c.exports=_jsx_runtime});var j={};w(j,{default:()=>C,frontmatter:()=>y});var e=b(d()),y={title:\"Provide some examples of how currying and partial application can be used\"};function s(a){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},a.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Currying transforms a function with multiple arguments into a sequence of functions, each taking a single argument. Partial application fixes a few arguments of a function, producing another function with a smaller number of arguments. For example, currying a function \",(0,e.jsx)(n.code,{children:\"add(a, b)\"}),\" would look like \",(0,e.jsx)(n.code,{children:\"add(a)(b)\"}),\", while partial application of \",(0,e.jsx)(n.code,{children:\"add(2, b)\"}),\" would fix the first argument to 2, resulting in a function that only needs the second argument.\"]}),`\n`,(0,e.jsx)(n.p,{children:\"Currying example:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const add = (a) => (b) => a + b;\nconst addTwo = add(2);\nconsole.log(addTwo(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"Partial application example:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const add = (a, b) => a + b;\nconst addTwo = add.bind(null, 2);\nconsole.log(addTwo(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Currying and partial application\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Currying\"}),`\n`,(0,e.jsx)(n.p,{children:\"Currying is a technique where a function with multiple arguments is transformed into a sequence of functions, each taking a single argument. This allows for more flexible function composition and reuse.\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Consider a simple function that adds two numbers:\nfunction add(a, b) {\n  return a + b;\n}\n\n// To curry this function, we transform it into a series of functions,\n// each taking one argument:\nconst curriedAdd = (a) => (b) => a + b;\n\n// Now, you can use the curried function like this:\nconst addTwo = curriedAdd(2);\nconsole.log(addTwo(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Partial application\"}),`\n`,(0,e.jsx)(n.p,{children:\"Partial application is a technique where you fix a few arguments of a function, producing another function with a smaller number of arguments. This is useful for creating specialized functions from more general ones.\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Consider the same add function:\nfunction add(a, b) {\n  return a + b;\n}\n\n// To partially apply this function\n// you can use the \\`bind\\` method to fix the first argument:\nconst addTwo = add.bind(null, 2);\nconsole.log(addTwo(3)); // 5\n\n// Alternatively, you can create a custom partial application function:\nfunction partial(fn, ...fixedArgs) {\n  return function (...remainingArgs) {\n    return fn(...fixedArgs, ...remainingArgs);\n  };\n}\n\nconst addTwoCustom = partial(add, 2);\nconsole.log(addTwoCustom(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Currying\",children:\"Currying on MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Partial_application\",children:\"Partial application on MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/1st_edition/chapter6.html\",children:\"Functional programming in JavaScript\"})}),`\n`]})]})}function T(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(s,a)})):s(a)}var C=T;return x(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var w=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),x=(a,n)=>{for(var i in n)t(a,i,{get:n[i],enumerable:!0})},l=(a,n,i,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of f(n))!g.call(a,r)&&r!==i&&t(a,r,{get:()=>n[r],enumerable:!(o=p(n,r))||o.enumerable});return a};var b=(a,n,i)=>(i=a!=null?h(m(a)):{},l(n||!a||!a.__esModule?t(i,\"default\",{value:a,enumerable:!0}):i,a)),y=a=>l(t({},\"__esModule\",{value:!0}),a);var d=w((v,c)=>{c.exports=_jsx_runtime});var C={};x(C,{default:()=>u,frontmatter:()=>T});var e=b(d()),T={title:\"Provide some examples of how currying and partial application can be used\"};function s(a){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...a.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Currying transforms a function with multiple arguments into a sequence of functions, each taking a single argument. Partial application fixes a few arguments of a function, producing another function with a smaller number of arguments. For example, currying a function \",(0,e.jsx)(n.code,{children:\"add(a, b)\"}),\" would look like \",(0,e.jsx)(n.code,{children:\"add(a)(b)\"}),\", while partial application of \",(0,e.jsx)(n.code,{children:\"add(2, b)\"}),\" would fix the first argument to 2, resulting in a function that only needs the second argument.\"]}),`\n`,(0,e.jsx)(n.p,{children:\"Currying example:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const add = (a) => (b) => a + b;\nconst addTwo = add(2);\nconsole.log(addTwo(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"Partial application example:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const add = (a, b) => a + b;\nconst addTwo = add.bind(null, 2);\nconsole.log(addTwo(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Currying and partial application\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Currying\"}),`\n`,(0,e.jsx)(n.p,{children:\"Currying is a technique where a function with multiple arguments is transformed into a sequence of functions, each taking a single argument. This allows for more flexible function composition and reuse.\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Consider a simple function that adds two numbers:\nfunction add(a, b) {\n  return a + b;\n}\n\n// To curry this function, we transform it into a series of functions,\n// each taking one argument:\nconst curriedAdd = (a) => (b) => a + b;\n\n// Now, you can use the curried function like this:\nconst addTwo = curriedAdd(2);\nconsole.log(addTwo(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Partial application\"}),`\n`,(0,e.jsx)(n.p,{children:\"Partial application is a technique where you fix a few arguments of a function, producing another function with a smaller number of arguments. This is useful for creating specialized functions from more general ones.\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Consider the same add function:\nfunction add(a, b) {\n  return a + b;\n}\n\n// To partially apply this function\n// you can use the \\`bind\\` method to fix the first argument:\nconst addTwo = add.bind(null, 2);\nconsole.log(addTwo(3)); // 5\n\n// Alternatively, you can create a custom partial application function:\nfunction partial(fn, ...fixedArgs) {\n  return function (...remainingArgs) {\n    return fn(...fixedArgs, ...remainingArgs);\n  };\n}\n\nconst addTwoCustom = partial(add, 2);\nconsole.log(addTwoCustom(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Currying\",children:\"Currying on MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Partial_application\",children:\"Partial application on MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/1st_edition/chapter6.html\",children:\"Functional programming in JavaScript\"})}),`\n`]})]})}function u(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,{...a,children:(0,e.jsx)(s,{...a})}):s(a)}return y(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/provide-some-examples-of-how-currying-and-partial-application-can-be-used/zh-CN.json b/apps/web/src/__generated__/questions/quiz/provide-some-examples-of-how-currying-and-partial-application-can-be-used/zh-CN.json
index 095e680c3..36e154230 100644
--- a/apps/web/src/__generated__/questions/quiz/provide-some-examples-of-how-currying-and-partial-application-can-be-used/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/provide-some-examples-of-how-currying-and-partial-application-can-be-used/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var b=(d,n)=>()=>(n||d((n={exports:{}}).exports,n),n.exports),f=(d,n)=>{for(var r in n)l(d,r,{get:n[r],enumerable:!0})},o=(d,n,r,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let a of p(n))!m.call(d,a)&&a!==r&&l(d,a,{get:()=>n[a],enumerable:!(c=u(n,a))||c.enumerable});return d};var j=(d,n,r)=>(r=d!=null?h(g(d)):{},o(n||!d||!d.__esModule?l(r,\"default\",{value:d,enumerable:!0}):r,d)),w=d=>o(l({},\"__esModule\",{value:!0}),d);var t=b((N,i)=>{i.exports=_jsx_runtime});var v={};f(v,{default:()=>_,frontmatter:()=>x});var e=j(t()),x={title:\"\\u63D0\\u4F9B\\u4E00\\u4E9B\\u5173\\u4E8E\\u5982\\u4F55\\u4F7F\\u7528\\u67EF\\u91CC\\u5316\\u548C\\u90E8\\u5206\\u5E94\\u7528\\u7684\\u4F8B\\u5B50\"};function s(d){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},d.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u67EF\\u91CC\\u5316\\u5C06\\u5177\\u6709\\u591A\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u8F6C\\u6362\\u4E3A\\u4E00\\u7CFB\\u5217\\u51FD\\u6570\\uFF0C\\u6BCF\\u4E2A\\u51FD\\u6570\\u53EA\\u63A5\\u53D7\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\\u90E8\\u5206\\u5E94\\u7528\\u4F1A\\u56FA\\u5B9A\\u51FD\\u6570\\u7684\\u4E00\\u4E9B\\u53C2\\u6570\\uFF0C\\u751F\\u6210\\u53E6\\u4E00\\u4E2A\\u53C2\\u6570\\u8F83\\u5C11\\u7684\\u51FD\\u6570\\u3002\\u4F8B\\u5982\\uFF0C\\u67EF\\u91CC\\u5316\\u51FD\\u6570 \",(0,e.jsx)(n.code,{children:\"add(a, b)\"}),\" \\u770B\\u8D77\\u6765\\u50CF \",(0,e.jsx)(n.code,{children:\"add(a)(b)\"}),\"\\uFF0C\\u800C\\u90E8\\u5206\\u5E94\\u7528 \",(0,e.jsx)(n.code,{children:\"add(2, b)\"}),\" \\u4F1A\\u5C06\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u56FA\\u5B9A\\u4E3A 2\\uFF0C\\u4ECE\\u800C\\u4EA7\\u751F\\u4E00\\u4E2A\\u53EA\\u9700\\u8981\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u67EF\\u91CC\\u5316\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const add = (a) => (b) => a + b;\nconst addTwo = add(2);\nconsole.log(addTwo(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u90E8\\u5206\\u5E94\\u7528\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const add = (a, b) => a + b;\nconst addTwo = add.bind(null, 2);\nconsole.log(addTwo(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u67EF\\u91CC\\u5316\\u548C\\u90E8\\u5206\\u5E94\\u7528\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u67EF\\u91CC\\u5316\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u67EF\\u91CC\\u5316\\u662F\\u4E00\\u79CD\\u5C06\\u5177\\u6709\\u591A\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u8F6C\\u6362\\u4E3A\\u4E00\\u7CFB\\u5217\\u51FD\\u6570\\u7684\\u6280\\u672F\\uFF0C\\u6BCF\\u4E2A\\u51FD\\u6570\\u53EA\\u63A5\\u53D7\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\\u8FD9\\u5141\\u8BB8\\u66F4\\u7075\\u6D3B\\u7684\\u51FD\\u6570\\u7EC4\\u5408\\u548C\\u91CD\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u8003\\u8651\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u52A0\\u6CD5\\u51FD\\u6570\\uFF1A\nfunction add(a, b) {\n  return a + b;\n}\n\n// \\u8981\\u67EF\\u91CC\\u5316\\u8FD9\\u4E2A\\u51FD\\u6570\\uFF0C\\u6211\\u4EEC\\u5C06\\u5176\\u8F6C\\u6362\\u4E3A\\u4E00\\u7CFB\\u5217\\u51FD\\u6570\\uFF0C\n// \\u6BCF\\u4E2A\\u51FD\\u6570\\u63A5\\u53D7\\u4E00\\u4E2A\\u53C2\\u6570\\uFF1A\nconst curriedAdd = (a) => (b) => a + b;\n\n// \\u73B0\\u5728\\uFF0C\\u4F60\\u53EF\\u4EE5\\u8FD9\\u6837\\u4F7F\\u7528\\u67EF\\u91CC\\u5316\\u51FD\\u6570\\uFF1A\nconst addTwo = curriedAdd(2);\nconsole.log(addTwo(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u90E8\\u5206\\u5E94\\u7528\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u90E8\\u5206\\u5E94\\u7528\\u662F\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u4F60\\u53EF\\u4EE5\\u5728\\u5176\\u4E2D\\u56FA\\u5B9A\\u51FD\\u6570\\u7684\\u4E00\\u4E9B\\u53C2\\u6570\\uFF0C\\u4ECE\\u800C\\u751F\\u6210\\u53E6\\u4E00\\u4E2A\\u53C2\\u6570\\u8F83\\u5C11\\u7684\\u51FD\\u6570\\u3002\\u8FD9\\u5BF9\\u4E8E\\u4ECE\\u66F4\\u901A\\u7528\\u7684\\u51FD\\u6570\\u521B\\u5EFA\\u4E13\\u95E8\\u7684\\u51FD\\u6570\\u5F88\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u8003\\u8651\\u76F8\\u540C\\u7684 add \\u51FD\\u6570\\uFF1A\nfunction add(a, b) {\n  return a + b;\n}\n\n// \\u8981\\u90E8\\u5206\\u5E94\\u7528\\u6B64\\u51FD\\u6570\n// \\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528 \\`bind\\` \\u65B9\\u6CD5\\u6765\\u56FA\\u5B9A\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\uFF1A\nconst addTwo = add.bind(null, 2);\nconsole.log(addTwo(3)); // 5\n\n// \\u6216\\u8005\\uFF0C\\u4F60\\u53EF\\u4EE5\\u521B\\u5EFA\\u4E00\\u4E2A\\u81EA\\u5B9A\\u4E49\\u7684\\u90E8\\u5206\\u5E94\\u7528\\u51FD\\u6570\\uFF1A\nfunction partial(fn, ...fixedArgs) {\n  return function (...remainingArgs) {\n    return fn(...fixedArgs, ...remainingArgs);\n  };\n}\n\nconst addTwoCustom = partial(add, 2);\nconsole.log(addTwoCustom(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Currying\",children:\"MDN \\u4E0A\\u7684\\u67EF\\u91CC\\u5316\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Partial_application\",children:\"MDN \\u4E0A\\u7684\\u90E8\\u5206\\u5E94\\u7528\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/1st_edition/chapter6.html\",children:\"JavaScript \\u4E2D\\u7684\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\"})}),`\n`]})]})}function T(d={}){let{wrapper:n}=d.components||{};return n?(0,e.jsx)(n,Object.assign({},d,{children:(0,e.jsx)(s,d)})):s(d)}var _=T;return w(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(d,n)=>()=>(n||d((n={exports:{}}).exports,n),n.exports),w=(d,n)=>{for(var r in n)l(d,r,{get:n[r],enumerable:!0})},o=(d,n,r,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let a of g(n))!b.call(d,a)&&a!==r&&l(d,a,{get:()=>n[a],enumerable:!(c=p(n,a))||c.enumerable});return d};var x=(d,n,r)=>(r=d!=null?u(m(d)):{},o(n||!d||!d.__esModule?l(r,\"default\",{value:d,enumerable:!0}):r,d)),T=d=>o(l({},\"__esModule\",{value:!0}),d);var t=f((A,i)=>{i.exports=_jsx_runtime});var _={};w(_,{default:()=>s,frontmatter:()=>j});var e=x(t()),j={title:\"\\u63D0\\u4F9B\\u4E00\\u4E9B\\u5173\\u4E8E\\u5982\\u4F55\\u4F7F\\u7528\\u67EF\\u91CC\\u5316\\u548C\\u90E8\\u5206\\u5E94\\u7528\\u7684\\u4F8B\\u5B50\"};function h(d){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...d.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u67EF\\u91CC\\u5316\\u5C06\\u5177\\u6709\\u591A\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u8F6C\\u6362\\u4E3A\\u4E00\\u7CFB\\u5217\\u51FD\\u6570\\uFF0C\\u6BCF\\u4E2A\\u51FD\\u6570\\u53EA\\u63A5\\u53D7\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\\u90E8\\u5206\\u5E94\\u7528\\u4F1A\\u56FA\\u5B9A\\u51FD\\u6570\\u7684\\u4E00\\u4E9B\\u53C2\\u6570\\uFF0C\\u751F\\u6210\\u53E6\\u4E00\\u4E2A\\u53C2\\u6570\\u8F83\\u5C11\\u7684\\u51FD\\u6570\\u3002\\u4F8B\\u5982\\uFF0C\\u67EF\\u91CC\\u5316\\u51FD\\u6570 \",(0,e.jsx)(n.code,{children:\"add(a, b)\"}),\" \\u770B\\u8D77\\u6765\\u50CF \",(0,e.jsx)(n.code,{children:\"add(a)(b)\"}),\"\\uFF0C\\u800C\\u90E8\\u5206\\u5E94\\u7528 \",(0,e.jsx)(n.code,{children:\"add(2, b)\"}),\" \\u4F1A\\u5C06\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u56FA\\u5B9A\\u4E3A 2\\uFF0C\\u4ECE\\u800C\\u4EA7\\u751F\\u4E00\\u4E2A\\u53EA\\u9700\\u8981\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u67EF\\u91CC\\u5316\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const add = (a) => (b) => a + b;\nconst addTwo = add(2);\nconsole.log(addTwo(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u90E8\\u5206\\u5E94\\u7528\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const add = (a, b) => a + b;\nconst addTwo = add.bind(null, 2);\nconsole.log(addTwo(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u67EF\\u91CC\\u5316\\u548C\\u90E8\\u5206\\u5E94\\u7528\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u67EF\\u91CC\\u5316\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u67EF\\u91CC\\u5316\\u662F\\u4E00\\u79CD\\u5C06\\u5177\\u6709\\u591A\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u8F6C\\u6362\\u4E3A\\u4E00\\u7CFB\\u5217\\u51FD\\u6570\\u7684\\u6280\\u672F\\uFF0C\\u6BCF\\u4E2A\\u51FD\\u6570\\u53EA\\u63A5\\u53D7\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\\u8FD9\\u5141\\u8BB8\\u66F4\\u7075\\u6D3B\\u7684\\u51FD\\u6570\\u7EC4\\u5408\\u548C\\u91CD\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u8003\\u8651\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u52A0\\u6CD5\\u51FD\\u6570\\uFF1A\nfunction add(a, b) {\n  return a + b;\n}\n\n// \\u8981\\u67EF\\u91CC\\u5316\\u8FD9\\u4E2A\\u51FD\\u6570\\uFF0C\\u6211\\u4EEC\\u5C06\\u5176\\u8F6C\\u6362\\u4E3A\\u4E00\\u7CFB\\u5217\\u51FD\\u6570\\uFF0C\n// \\u6BCF\\u4E2A\\u51FD\\u6570\\u63A5\\u53D7\\u4E00\\u4E2A\\u53C2\\u6570\\uFF1A\nconst curriedAdd = (a) => (b) => a + b;\n\n// \\u73B0\\u5728\\uFF0C\\u4F60\\u53EF\\u4EE5\\u8FD9\\u6837\\u4F7F\\u7528\\u67EF\\u91CC\\u5316\\u51FD\\u6570\\uFF1A\nconst addTwo = curriedAdd(2);\nconsole.log(addTwo(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u90E8\\u5206\\u5E94\\u7528\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u90E8\\u5206\\u5E94\\u7528\\u662F\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u4F60\\u53EF\\u4EE5\\u5728\\u5176\\u4E2D\\u56FA\\u5B9A\\u51FD\\u6570\\u7684\\u4E00\\u4E9B\\u53C2\\u6570\\uFF0C\\u4ECE\\u800C\\u751F\\u6210\\u53E6\\u4E00\\u4E2A\\u53C2\\u6570\\u8F83\\u5C11\\u7684\\u51FD\\u6570\\u3002\\u8FD9\\u5BF9\\u4E8E\\u4ECE\\u66F4\\u901A\\u7528\\u7684\\u51FD\\u6570\\u521B\\u5EFA\\u4E13\\u95E8\\u7684\\u51FD\\u6570\\u5F88\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u8003\\u8651\\u76F8\\u540C\\u7684 add \\u51FD\\u6570\\uFF1A\nfunction add(a, b) {\n  return a + b;\n}\n\n// \\u8981\\u90E8\\u5206\\u5E94\\u7528\\u6B64\\u51FD\\u6570\n// \\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528 \\`bind\\` \\u65B9\\u6CD5\\u6765\\u56FA\\u5B9A\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\uFF1A\nconst addTwo = add.bind(null, 2);\nconsole.log(addTwo(3)); // 5\n\n// \\u6216\\u8005\\uFF0C\\u4F60\\u53EF\\u4EE5\\u521B\\u5EFA\\u4E00\\u4E2A\\u81EA\\u5B9A\\u4E49\\u7684\\u90E8\\u5206\\u5E94\\u7528\\u51FD\\u6570\\uFF1A\nfunction partial(fn, ...fixedArgs) {\n  return function (...remainingArgs) {\n    return fn(...fixedArgs, ...remainingArgs);\n  };\n}\n\nconst addTwoCustom = partial(add, 2);\nconsole.log(addTwoCustom(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Currying\",children:\"MDN \\u4E0A\\u7684\\u67EF\\u91CC\\u5316\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Partial_application\",children:\"MDN \\u4E0A\\u7684\\u90E8\\u5206\\u5E94\\u7528\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/1st_edition/chapter6.html\",children:\"JavaScript \\u4E2D\\u7684\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\"})}),`\n`]})]})}function s(d={}){let{wrapper:n}=d.components||{};return n?(0,e.jsx)(n,{...d,children:(0,e.jsx)(h,{...d})}):h(d)}return T(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.json b/apps/web/src/__generated__/questions/quiz/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.json
index 320f6de6a..fab3e9340 100644
--- a/apps/web/src/__generated__/questions/quiz/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var p=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),y=(o,n)=>{for(var t in n)i(o,t,{get:n[t],enumerable:!0})},s=(o,n,t,r)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let a of m(n))!w.call(o,a)&&a!==t&&i(o,a,{get:()=>n[a],enumerable:!(r=u(n,a))||r.enumerable});return o};var g=(o,n,t)=>(t=o!=null?d(f(o)):{},s(n||!o||!o.__esModule?i(t,\"default\",{value:o,enumerable:!0}):t,o)),v=o=>s(i({},\"__esModule\",{value:!0}),o);var h=p((J,c)=>{c.exports=_jsx_runtime});var x={};y(x,{default:()=>N,frontmatter:()=>b});var e=g(h()),b={title:\"What advantage is there for using the JavaScript arrow syntax for a method in a constructor?\"};function l(o){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},o.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"The main advantage of using an arrow function as a method inside a constructor is that the value of \",(0,e.jsx)(n.code,{children:\"this\"}),\" gets set at the time of the function creation and can't change after that. When the constructor is used to create a new object, \",(0,e.jsx)(n.code,{children:\"this\"}),\" will always refer to that object.\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"For example, let's say we have a \",(0,e.jsx)(n.code,{children:\"Person\"}),\" constructor that takes a first name as an argument has two methods to \",(0,e.jsx)(n.code,{children:\"console.log()\"}),\" that name, one as a regular function and one as an arrow function:\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const Person = function (name) {\n  this.firstName = name;\n  this.sayName1 = function () {\n    console.log(this.firstName);\n  };\n  this.sayName2 = () => {\n    console.log(this.firstName);\n  };\n};\n\nconst john = new Person('John');\nconst dave = new Person('Dave');\n\njohn.sayName1(); // John\njohn.sayName2(); // John\n\n// The regular function can have its \\`this\\` value changed, but the arrow function cannot\njohn.sayName1.call(dave); // Dave (because \\`this\\` is now the dave object)\njohn.sayName2.call(dave); // John\n\njohn.sayName1.apply(dave); // Dave (because \\`this\\` is now the dave object)\njohn.sayName2.apply(dave); // John\n\njohn.sayName1.bind(dave)(); // Dave (because \\`this\\` is now the dave object)\njohn.sayName2.bind(dave)(); // John\n\nconst sayNameFromWindow1 = john.sayName1;\nsayNameFromWindow1(); // undefined (because \\`this\\` is now the window object)\n\nconst sayNameFromWindow2 = john.sayName2;\nsayNameFromWindow2(); // John\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"The main takeaway here is that \",(0,e.jsx)(n.code,{children:\"this\"}),\" can be changed for a normal function, but \",(0,e.jsx)(n.code,{children:\"this\"}),\" always stays the same for an arrow function. So even if you are passing around your arrow function to different parts of your application, you wouldn't have to worry about the value of \",(0,e.jsx)(n.code,{children:\"this\"}),\" changing.\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Arrow functions\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Arrow functions are introduced in ES2015 and it provides a concise way to write functions in Javascript. One of the key features of arrow function is that it lexically bind the \",(0,e.jsx)(n.code,{children:\"this\"}),\" value, which means that it takes the \",(0,e.jsx)(n.code,{children:\"this\"}),\" value from enclosing scope.\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Syntax\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Arrow functions use the \",(0,e.jsx)(n.code,{children:\"=>\"}),\" syntax instead of the function keyword. The basic syntax is:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const myFunction = (arg1, arg2, ...argN) => {\n  // function body\n};\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"If the function body has only one expression, you can omit the curly braces and the return keyword:\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const myFunction = (arg1, arg2, ...argN) => expression;\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Examples\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Arrow function with parameters\nconst multiply = (x, y) => x * y;\nconsole.log(multiply(2, 3)); // Output: 6\n\n// Arrow function with no parameters\nconst sayHello = () => 'Hello, World!';\nconsole.log(sayHello()); // Output: 'Hello, World!'\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Advantages\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Concise\"}),\": Arrow functions provide a more concise syntax, especially for short functions.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Implicit return\"}),\": They have an implicit return for single-line functions.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsxs)(n.strong,{children:[\"Value of \",(0,e.jsx)(n.code,{children:\"this\"}),\" is predictable\"]}),\": Arrow functions lexically bind the \",(0,e.jsx)(n.code,{children:\"this\"}),\" value, inheriting it from the enclosing scope.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Limitations\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Arrow functions cannot be used as constructors and will throw an error when used with the \",(0,e.jsx)(n.code,{children:\"new\"}),\" keyword.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const Foo = () => {};\nconst foo = new Foo(); // TypeError: Foo is not a constructor\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"They also do not have \",(0,e.jsx)(n.code,{children:\"arguments\"}),\" keyword; the arguments have to be obtained from using the rest operator (\",(0,e.jsx)(n.code,{children:\"...\"}),\") in the arguments.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const arrowFunction = (...args) => {\n  console.log(arguments); // Throws a ReferenceError\n  console.log(args); // [1, 2, 3]\n};\n\narrowFunction(1, 2, 3);\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"Since arrow functions do not have their own \",(0,e.jsx)(n.code,{children:\"this\"}),\", they are not suitable for defining methods in an object. Traditional function expressions or function declarations should be used instead.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: () => this.value, // \\`this\\` does not refer to \\`obj\\`\n};\n\nconsole.log(obj.getValue()); // undefined\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Why arrow functions are useful\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"One of the most notable features of arrow functions is their behavior with \",(0,e.jsx)(n.code,{children:\"this\"}),\". Unlike regular functions, arrow functions do not have their own \",(0,e.jsx)(n.code,{children:\"this\"}),\". Instead, they inherit \",(0,e.jsx)(n.code,{children:\"this\"}),\" from the parent scope at the time they are defined. This makes arrow functions particularly useful for scenarios like event handlers, callbacks, and methods in classes.\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Arrow functions inside function constructors\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const Person = function (name) {\n  this.firstName = name;\n  this.sayName1 = function () {\n    console.log(this.firstName);\n  };\n  this.sayName2 = () => {\n    console.log(this.firstName);\n  };\n};\n\nconst john = new Person('John');\nconst dave = new Person('Dave');\n\njohn.sayName1(); // John\njohn.sayName2(); // John\n\n// The regular function can have its \\`this\\` value changed, but the arrow function cannot\njohn.sayName1.call(dave); // Dave (because \\`this\\` is now the dave object)\njohn.sayName2.call(dave); // John\n\njohn.sayName1.apply(dave); // Dave (because \\`this\\` is now the dave object)\njohn.sayName2.apply(dave); // John\n\njohn.sayName1.bind(dave)(); // Dave (because \\`this\\` is now the dave object)\njohn.sayName2.bind(dave)(); // John\n\nconst sayNameFromWindow1 = john.sayName1;\nsayNameFromWindow1(); // undefined (because \\`this\\` is now the window object)\n\nconst sayNameFromWindow2 = john.sayName2;\nsayNameFromWindow2(); // John\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Arrow functions in event handlers\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const button = document.getElementById('myButton');\n\nbutton.addEventListener('click', function () {\n  console.log(this); // Output: Button\n  console.log(this === button); // Output: true\n});\n\nbutton.addEventListener('click', () => {\n  console.log(this); // Output: Window\n  console.log(this === window); // Output: true\n});\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"This can be particularly helpful in React class components. If you define a class method for something such as a click handler using a normal function, and then you pass that click handler down into a child component as a prop, you will need to also bind \",(0,e.jsx)(n.code,{children:\"this\"}),\" in the constructor of the parent component. If you instead use an arrow function, there is no need to bind \",(0,e.jsx)(n.code,{children:\"this\"}),\", as the method will automatically get its \",(0,e.jsx)(n.code,{children:\"this\"}),\" value from its enclosing lexical context. See this \",(0,e.jsx)(n.a,{href:\"https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb\",children:\"article\"}),\" for an excellent demonstration and sample code.\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions\",children:\"Arrow function expressions - MDN \"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/javascript-arrow-functions-in-dep\",children:\"How to Use JavaScript Arrow Functions \\u2013 Explained in Detail\"})}),`\n`]})]})}function j(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,Object.assign({},o,{children:(0,e.jsx)(l,o)})):l(o)}var N=j;return v(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var y=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),g=(o,n)=>{for(var t in n)i(o,t,{get:n[t],enumerable:!0})},s=(o,n,t,r)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let a of f(n))!p.call(o,a)&&a!==t&&i(o,a,{get:()=>n[a],enumerable:!(r=m(n,a))||r.enumerable});return o};var v=(o,n,t)=>(t=o!=null?u(w(o)):{},s(n||!o||!o.__esModule?i(t,\"default\",{value:o,enumerable:!0}):t,o)),b=o=>s(i({},\"__esModule\",{value:!0}),o);var h=y((F,c)=>{c.exports=_jsx_runtime});var N={};g(N,{default:()=>d,frontmatter:()=>j});var e=v(h()),j={title:\"What advantage is there for using the JavaScript arrow syntax for a method in a constructor?\"};function l(o){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...o.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"The main advantage of using an arrow function as a method inside a constructor is that the value of \",(0,e.jsx)(n.code,{children:\"this\"}),\" gets set at the time of the function creation and can't change after that. When the constructor is used to create a new object, \",(0,e.jsx)(n.code,{children:\"this\"}),\" will always refer to that object.\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"For example, let's say we have a \",(0,e.jsx)(n.code,{children:\"Person\"}),\" constructor that takes a first name as an argument has two methods to \",(0,e.jsx)(n.code,{children:\"console.log()\"}),\" that name, one as a regular function and one as an arrow function:\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const Person = function (name) {\n  this.firstName = name;\n  this.sayName1 = function () {\n    console.log(this.firstName);\n  };\n  this.sayName2 = () => {\n    console.log(this.firstName);\n  };\n};\n\nconst john = new Person('John');\nconst dave = new Person('Dave');\n\njohn.sayName1(); // John\njohn.sayName2(); // John\n\n// The regular function can have its \\`this\\` value changed, but the arrow function cannot\njohn.sayName1.call(dave); // Dave (because \\`this\\` is now the dave object)\njohn.sayName2.call(dave); // John\n\njohn.sayName1.apply(dave); // Dave (because \\`this\\` is now the dave object)\njohn.sayName2.apply(dave); // John\n\njohn.sayName1.bind(dave)(); // Dave (because \\`this\\` is now the dave object)\njohn.sayName2.bind(dave)(); // John\n\nconst sayNameFromWindow1 = john.sayName1;\nsayNameFromWindow1(); // undefined (because \\`this\\` is now the window object)\n\nconst sayNameFromWindow2 = john.sayName2;\nsayNameFromWindow2(); // John\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"The main takeaway here is that \",(0,e.jsx)(n.code,{children:\"this\"}),\" can be changed for a normal function, but \",(0,e.jsx)(n.code,{children:\"this\"}),\" always stays the same for an arrow function. So even if you are passing around your arrow function to different parts of your application, you wouldn't have to worry about the value of \",(0,e.jsx)(n.code,{children:\"this\"}),\" changing.\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Arrow functions\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Arrow functions are introduced in ES2015 and it provides a concise way to write functions in Javascript. One of the key features of arrow function is that it lexically bind the \",(0,e.jsx)(n.code,{children:\"this\"}),\" value, which means that it takes the \",(0,e.jsx)(n.code,{children:\"this\"}),\" value from enclosing scope.\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Syntax\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Arrow functions use the \",(0,e.jsx)(n.code,{children:\"=>\"}),\" syntax instead of the function keyword. The basic syntax is:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const myFunction = (arg1, arg2, ...argN) => {\n  // function body\n};\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"If the function body has only one expression, you can omit the curly braces and the return keyword:\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const myFunction = (arg1, arg2, ...argN) => expression;\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Examples\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Arrow function with parameters\nconst multiply = (x, y) => x * y;\nconsole.log(multiply(2, 3)); // Output: 6\n\n// Arrow function with no parameters\nconst sayHello = () => 'Hello, World!';\nconsole.log(sayHello()); // Output: 'Hello, World!'\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Advantages\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Concise\"}),\": Arrow functions provide a more concise syntax, especially for short functions.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Implicit return\"}),\": They have an implicit return for single-line functions.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsxs)(n.strong,{children:[\"Value of \",(0,e.jsx)(n.code,{children:\"this\"}),\" is predictable\"]}),\": Arrow functions lexically bind the \",(0,e.jsx)(n.code,{children:\"this\"}),\" value, inheriting it from the enclosing scope.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Limitations\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Arrow functions cannot be used as constructors and will throw an error when used with the \",(0,e.jsx)(n.code,{children:\"new\"}),\" keyword.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const Foo = () => {};\nconst foo = new Foo(); // TypeError: Foo is not a constructor\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"They also do not have \",(0,e.jsx)(n.code,{children:\"arguments\"}),\" keyword; the arguments have to be obtained from using the rest operator (\",(0,e.jsx)(n.code,{children:\"...\"}),\") in the arguments.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const arrowFunction = (...args) => {\n  console.log(arguments); // Throws a ReferenceError\n  console.log(args); // [1, 2, 3]\n};\n\narrowFunction(1, 2, 3);\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"Since arrow functions do not have their own \",(0,e.jsx)(n.code,{children:\"this\"}),\", they are not suitable for defining methods in an object. Traditional function expressions or function declarations should be used instead.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: () => this.value, // \\`this\\` does not refer to \\`obj\\`\n};\n\nconsole.log(obj.getValue()); // undefined\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Why arrow functions are useful\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"One of the most notable features of arrow functions is their behavior with \",(0,e.jsx)(n.code,{children:\"this\"}),\". Unlike regular functions, arrow functions do not have their own \",(0,e.jsx)(n.code,{children:\"this\"}),\". Instead, they inherit \",(0,e.jsx)(n.code,{children:\"this\"}),\" from the parent scope at the time they are defined. This makes arrow functions particularly useful for scenarios like event handlers, callbacks, and methods in classes.\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Arrow functions inside function constructors\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const Person = function (name) {\n  this.firstName = name;\n  this.sayName1 = function () {\n    console.log(this.firstName);\n  };\n  this.sayName2 = () => {\n    console.log(this.firstName);\n  };\n};\n\nconst john = new Person('John');\nconst dave = new Person('Dave');\n\njohn.sayName1(); // John\njohn.sayName2(); // John\n\n// The regular function can have its \\`this\\` value changed, but the arrow function cannot\njohn.sayName1.call(dave); // Dave (because \\`this\\` is now the dave object)\njohn.sayName2.call(dave); // John\n\njohn.sayName1.apply(dave); // Dave (because \\`this\\` is now the dave object)\njohn.sayName2.apply(dave); // John\n\njohn.sayName1.bind(dave)(); // Dave (because \\`this\\` is now the dave object)\njohn.sayName2.bind(dave)(); // John\n\nconst sayNameFromWindow1 = john.sayName1;\nsayNameFromWindow1(); // undefined (because \\`this\\` is now the window object)\n\nconst sayNameFromWindow2 = john.sayName2;\nsayNameFromWindow2(); // John\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Arrow functions in event handlers\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const button = document.getElementById('myButton');\n\nbutton.addEventListener('click', function () {\n  console.log(this); // Output: Button\n  console.log(this === button); // Output: true\n});\n\nbutton.addEventListener('click', () => {\n  console.log(this); // Output: Window\n  console.log(this === window); // Output: true\n});\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"This can be particularly helpful in React class components. If you define a class method for something such as a click handler using a normal function, and then you pass that click handler down into a child component as a prop, you will need to also bind \",(0,e.jsx)(n.code,{children:\"this\"}),\" in the constructor of the parent component. If you instead use an arrow function, there is no need to bind \",(0,e.jsx)(n.code,{children:\"this\"}),\", as the method will automatically get its \",(0,e.jsx)(n.code,{children:\"this\"}),\" value from its enclosing lexical context. See this \",(0,e.jsx)(n.a,{href:\"https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb\",children:\"article\"}),\" for an excellent demonstration and sample code.\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions\",children:\"Arrow function expressions - MDN \"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/javascript-arrow-functions-in-dep\",children:\"How to Use JavaScript Arrow Functions \\u2013 Explained in Detail\"})}),`\n`]})]})}function d(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,{...o,children:(0,e.jsx)(l,{...o})}):l(o)}return b(N);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/pt-BR.json
index af7c21bae..dd6c38c30 100644
--- a/apps/web/src/__generated__/questions/quiz/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var f=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),j=(e,o)=>{for(var n in o)t(e,n,{get:o[n],enumerable:!0})},m=(e,o,n,s)=>{if(o&&typeof o==\"object\"||typeof o==\"function\")for(let r of l(o))!v.call(e,r)&&r!==n&&t(e,r,{get:()=>o[r],enumerable:!(s=p(o,r))||s.enumerable});return e};var g=(e,o,n)=>(n=e!=null?u(h(e)):{},m(o||!e||!e.__esModule?t(n,\"default\",{value:e,enumerable:!0}):n,e)),N=e=>m(t({},\"__esModule\",{value:!0}),e);var c=f((J,i)=>{i.exports=_jsx_runtime});var x={};j(x,{default:()=>w,frontmatter:()=>b});var a=g(c()),b={title:\"Qual \\xE9 a vantagem de usar a sintaxe de seta para um m\\xE9todo em um constructor?\"};function d(e){let o=Object.assign({p:\"p\",code:\"code\",pre:\"pre\",a:\"a\"},e.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(o.p,{children:[\"A principal vantagem de usar uma arrow function como um m\\xE9todo dentro de um construtor \\xE9 que o valor de \",(0,a.jsx)(o.code,{children:\"this\"}),\" \\xE9 definido no momento da cria\\xE7\\xE3o da fun\\xE7\\xE3o e n\\xE3o pode mudar depois disso. Ent\\xE3o, quando o construtor \\xE9 usado para criar um novo objeto, \",(0,a.jsx)(o.code,{children:\"this\"}),\" sempre ir\\xE1 referir-se ao objeto. Por exemplo, digamos que temos um construtor \",(0,a.jsx)(o.code,{children:\"Person\"}),\" que toma o primeiro nome como um argumento tem dois m\\xE9todos para dar um \",(0,a.jsx)(o.code,{children:\"console.log\"}),\" nesse nome, um como uma fun\\xE7\\xE3o normal e um como uma fun\\xE7\\xE3o de seta:\"]}),`\n`,(0,a.jsx)(o.pre,{children:(0,a.jsx)(o.code,{className:\"language-js\",children:`const Person = function (firstName) {\n  this.firstName = firstName;\n  this.sayName1 = function () {\n    console.log(this.firstName);\n  };\n  this.sayName2 = () => {\n    console.log(this.firstName);\n  };\n};\n\nconst john = new Person('John');\nconst dave = new Person('Dave');\n\njohn.sayName1(); // John\njohn.sayName2(); // John\n\n// A fun\\xE7\\xE3o regular pode ter seu valor 'this' alterado, mas a arrow function n\\xE3o pode\njohn.sayName1.call(dave); // Dave (porque \"this\" \\xE9 agora o objeto dave)\njohn.sayName2.call(dave); // John\n\njohn.sayName1.apply(dave); // Dave (porque 'this' \\xE9 agora o objeto dave)\njohn.sayName2.apply(dave); // Jo\\xE3o\n\njohn.sayName1.bind(dave)(); // Dave (porque 'this' \\xE9 agora o dave object)\njohn.sayName2.bind(dave)(); // Jo\\xE3o\n\nvar sayNameFromWindow1 = john.sayName1;\nsayNameFromWindow1(); // undefined (porque 'this' agora \\xE9 o objeto da window)\n\nvar sayNameFromWindow2 = john.sayName2;\nsayNameFromWindow2(); // John\n`})}),`\n`,(0,a.jsxs)(o.p,{children:[\"O principal tirada aqui \\xE9 que \",(0,a.jsx)(o.code,{children:\"this\"}),\" pode ser alterado para uma fun\\xE7\\xE3o normal, mas o contexto sempre permanece o mesmo para uma arrow function. Ent\\xE3o, mesmo que voc\\xEA esteja passando pela arrow function para diferentes partes do seu aplicativo, voc\\xEA n\\xE3o precisaria se preocupar com a mudan\\xE7a de contexto.\"]}),`\n`,(0,a.jsxs)(o.p,{children:[\"Isso pode ser particularmente \\xFAtil em componentes de classe React. Se voc\\xEA definir um m\\xE9todo de classe para algo como um manipulador de cliques usando uma fun\\xE7\\xE3o normal, e, em seguida, voc\\xEA passa que clica manipulando em um componente filho como uma propriedade, voc\\xEA tamb\\xE9m precisar\\xE1 vincular o \",(0,a.jsx)(o.code,{children:\"this\"}),' no construtor do componente pai. Se voc\\xEA ao inv\\xE9s disso usar uma arrow function, n\\xE3o h\\xE1 necessidade de vincular tamb\\xE9m \"this\", como o m\\xE9todo ir\\xE1 automaticamente obter seu valor \"this\" no contexto l\\xE9xico que est\\xE1 encapsulado. (Veja esse artigo para uma excelente demonstra\\xE7\\xE3o e c\\xF3digo de amostra: ',(0,a.jsx)(o.a,{href:\"https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb\",children:\"https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb\"}),\")\"]})]})}function y(e={}){let{wrapper:o}=e.components||{};return o?(0,a.jsx)(o,Object.assign({},e,{children:(0,a.jsx)(d,e)})):d(e)}var w=y;return N(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var j=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),N=(e,o)=>{for(var n in o)t(e,n,{get:o[n],enumerable:!0})},m=(e,o,n,s)=>{if(o&&typeof o==\"object\"||typeof o==\"function\")for(let r of h(o))!f.call(e,r)&&r!==n&&t(e,r,{get:()=>o[r],enumerable:!(s=l(o,r))||s.enumerable});return e};var g=(e,o,n)=>(n=e!=null?p(v(e)):{},m(o||!e||!e.__esModule?t(n,\"default\",{value:e,enumerable:!0}):n,e)),y=e=>m(t({},\"__esModule\",{value:!0}),e);var c=j((q,i)=>{i.exports=_jsx_runtime});var b={};N(b,{default:()=>u,frontmatter:()=>w});var a=g(c()),w={title:\"Qual \\xE9 a vantagem de usar a sintaxe de seta para um m\\xE9todo em um constructor?\"};function d(e){let o={a:\"a\",code:\"code\",p:\"p\",pre:\"pre\",...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(o.p,{children:[\"A principal vantagem de usar uma arrow function como um m\\xE9todo dentro de um construtor \\xE9 que o valor de \",(0,a.jsx)(o.code,{children:\"this\"}),\" \\xE9 definido no momento da cria\\xE7\\xE3o da fun\\xE7\\xE3o e n\\xE3o pode mudar depois disso. Ent\\xE3o, quando o construtor \\xE9 usado para criar um novo objeto, \",(0,a.jsx)(o.code,{children:\"this\"}),\" sempre ir\\xE1 referir-se ao objeto. Por exemplo, digamos que temos um construtor \",(0,a.jsx)(o.code,{children:\"Person\"}),\" que toma o primeiro nome como um argumento tem dois m\\xE9todos para dar um \",(0,a.jsx)(o.code,{children:\"console.log\"}),\" nesse nome, um como uma fun\\xE7\\xE3o normal e um como uma fun\\xE7\\xE3o de seta:\"]}),`\n`,(0,a.jsx)(o.pre,{children:(0,a.jsx)(o.code,{className:\"language-js\",children:`const Person = function (firstName) {\n  this.firstName = firstName;\n  this.sayName1 = function () {\n    console.log(this.firstName);\n  };\n  this.sayName2 = () => {\n    console.log(this.firstName);\n  };\n};\n\nconst john = new Person('John');\nconst dave = new Person('Dave');\n\njohn.sayName1(); // John\njohn.sayName2(); // John\n\n// A fun\\xE7\\xE3o regular pode ter seu valor 'this' alterado, mas a arrow function n\\xE3o pode\njohn.sayName1.call(dave); // Dave (porque \"this\" \\xE9 agora o objeto dave)\njohn.sayName2.call(dave); // John\n\njohn.sayName1.apply(dave); // Dave (porque 'this' \\xE9 agora o objeto dave)\njohn.sayName2.apply(dave); // Jo\\xE3o\n\njohn.sayName1.bind(dave)(); // Dave (porque 'this' \\xE9 agora o dave object)\njohn.sayName2.bind(dave)(); // Jo\\xE3o\n\nvar sayNameFromWindow1 = john.sayName1;\nsayNameFromWindow1(); // undefined (porque 'this' agora \\xE9 o objeto da window)\n\nvar sayNameFromWindow2 = john.sayName2;\nsayNameFromWindow2(); // John\n`})}),`\n`,(0,a.jsxs)(o.p,{children:[\"O principal tirada aqui \\xE9 que \",(0,a.jsx)(o.code,{children:\"this\"}),\" pode ser alterado para uma fun\\xE7\\xE3o normal, mas o contexto sempre permanece o mesmo para uma arrow function. Ent\\xE3o, mesmo que voc\\xEA esteja passando pela arrow function para diferentes partes do seu aplicativo, voc\\xEA n\\xE3o precisaria se preocupar com a mudan\\xE7a de contexto.\"]}),`\n`,(0,a.jsxs)(o.p,{children:[\"Isso pode ser particularmente \\xFAtil em componentes de classe React. Se voc\\xEA definir um m\\xE9todo de classe para algo como um manipulador de cliques usando uma fun\\xE7\\xE3o normal, e, em seguida, voc\\xEA passa que clica manipulando em um componente filho como uma propriedade, voc\\xEA tamb\\xE9m precisar\\xE1 vincular o \",(0,a.jsx)(o.code,{children:\"this\"}),' no construtor do componente pai. Se voc\\xEA ao inv\\xE9s disso usar uma arrow function, n\\xE3o h\\xE1 necessidade de vincular tamb\\xE9m \"this\", como o m\\xE9todo ir\\xE1 automaticamente obter seu valor \"this\" no contexto l\\xE9xico que est\\xE1 encapsulado. (Veja esse artigo para uma excelente demonstra\\xE7\\xE3o e c\\xF3digo de amostra: ',(0,a.jsx)(o.a,{href:\"https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb\",children:\"https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb\"}),\")\"]})]})}function u(e={}){let{wrapper:o}=e.components||{};return o?(0,a.jsx)(o,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}return y(b);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/zh-CN.json
index 3d1988b98..01b499b30 100644
--- a/apps/web/src/__generated__/questions/quiz/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var N=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),y=(o,n)=>{for(var a in n)i(o,a,{get:n[a],enumerable:!0})},r=(o,n,a,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of u(n))!p.call(o,c)&&c!==a&&i(o,c,{get:()=>n[c],enumerable:!(s=m(n,c))||s.enumerable});return o};var v=(o,n,a)=>(a=o!=null?d(g(o)):{},r(n||!o||!o.__esModule?i(a,\"default\",{value:o,enumerable:!0}):a,o)),j=o=>r(i({},\"__esModule\",{value:!0}),o);var t=N((x,h)=>{h.exports=_jsx_runtime});var F={};y(F,{default:()=>b,frontmatter:()=>w});var e=v(t()),w={title:\"\\u5728\\u6784\\u9020\\u51FD\\u6570\\u4E2D\\u4F7F\\u7528 JavaScript \\u7BAD\\u5934\\u8BED\\u6CD5\\u4F5C\\u4E3A\\u65B9\\u6CD5\\u6709\\u4EC0\\u4E48\\u4F18\\u52BF\\uFF1F\"};function l(o){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},o.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6784\\u9020\\u51FD\\u6570\\u4E2D\\u4F7F\\u7528\\u7BAD\\u5934\\u51FD\\u6570\\u4F5C\\u4E3A\\u65B9\\u6CD5\\u7684\\u4E3B\\u8981\\u4F18\\u70B9\\u662F \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u5728\\u51FD\\u6570\\u521B\\u5EFA\\u65F6\\u8BBE\\u7F6E\\uFF0C\\u4E4B\\u540E\\u65E0\\u6CD5\\u66F4\\u6539\\u3002\\u5F53\\u6784\\u9020\\u51FD\\u6570\\u7528\\u4E8E\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5C06\\u59CB\\u7EC8\\u5F15\\u7528\\u8BE5\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F8B\\u5982\\uFF0C\\u5047\\u8BBE\\u6211\\u4EEC\\u6709\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"Person\"}),\" \\u6784\\u9020\\u51FD\\u6570\\uFF0C\\u5B83\\u63A5\\u53D7\\u4E00\\u4E2A\\u540D\\u5B57\\u4F5C\\u4E3A\\u53C2\\u6570\\uFF0C\\u5E76\\u6709\\u4E24\\u4E2A\\u65B9\\u6CD5\\u6765 \",(0,e.jsx)(n.code,{children:\"console.log()\"}),\" \\u8BE5\\u540D\\u79F0\\uFF0C\\u4E00\\u4E2A\\u4F5C\\u4E3A\\u5E38\\u89C4\\u51FD\\u6570\\uFF0C\\u4E00\\u4E2A\\u4F5C\\u4E3A\\u7BAD\\u5934\\u51FD\\u6570\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const Person = function (name) {\n  this.firstName = name;\n  this.sayName1 = function () {\n    console.log(this.firstName);\n  };\n  this.sayName2 = () => {\n    console.log(this.firstName);\n  };\n};\n\nconst john = new Person('John');\nconst dave = new Person('Dave');\n\njohn.sayName1(); // John\njohn.sayName2(); // John\n\n// \\u5E38\\u89C4\\u51FD\\u6570\\u53EF\\u4EE5\\u66F4\\u6539\\u5176 \\`this\\` \\u503C\\uFF0C\\u4F46\\u7BAD\\u5934\\u51FD\\u6570\\u4E0D\\u80FD\njohn.sayName1.call(dave); // Dave (\\u56E0\\u4E3A \\`this\\` \\u73B0\\u5728\\u662F dave \\u5BF9\\u8C61)\njohn.sayName2.call(dave); // John\n\njohn.sayName1.apply(dave); // Dave (\\u56E0\\u4E3A \\`this\\` \\u73B0\\u5728\\u662F dave \\u5BF9\\u8C61)\njohn.sayName2.apply(dave); // John\n\njohn.sayName1.bind(dave)(); // Dave (\\u56E0\\u4E3A \\`this\\` \\u73B0\\u5728\\u662F dave \\u5BF9\\u8C61)\njohn.sayName2.bind(dave)(); // John\n\nconst sayNameFromWindow1 = john.sayName1;\nsayNameFromWindow1(); // undefined (\\u56E0\\u4E3A \\`this\\` \\u73B0\\u5728\\u662F window \\u5BF9\\u8C61)\n\nconst sayNameFromWindow2 = john.sayName2;\nsayNameFromWindow2(); // John\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8FD9\\u91CC\\u7684\\u4E3B\\u8981\\u7ED3\\u8BBA\\u662F\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u53EF\\u4EE5\\u4E3A\\u666E\\u901A\\u51FD\\u6570\\u66F4\\u6539\\uFF0C\\u4F46 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5BF9\\u4E8E\\u7BAD\\u5934\\u51FD\\u6570\\u59CB\\u7EC8\\u4FDD\\u6301\\u4E0D\\u53D8\\u3002\\u56E0\\u6B64\\uFF0C\\u5373\\u4F7F\\u60A8\\u5C06\\u7BAD\\u5934\\u51FD\\u6570\\u4F20\\u9012\\u5230\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4E0D\\u540C\\u90E8\\u5206\\uFF0C\\u60A8\\u4E5F\\u4E0D\\u5FC5\\u62C5\\u5FC3 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u53D1\\u751F\\u53D8\\u5316\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7BAD\\u5934\\u51FD\\u6570\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u662F\\u5728 ES2015 \\u4E2D\\u5F15\\u5165\\u7684\\uFF0C\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u7528 Javascript \\u7F16\\u5199\\u51FD\\u6570\\u7684\\u7B80\\u6D01\\u65B9\\u5F0F\\u3002\\u7BAD\\u5934\\u51FD\\u6570\\u7684\\u4E00\\u4E2A\\u5173\\u952E\\u7279\\u6027\\u662F\\u5B83\\u5728\\u8BCD\\u6CD5\\u4E0A\\u7ED1\\u5B9A\\u4E86 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4ECE\\u5C01\\u95ED\\u8303\\u56F4\\u83B7\\u53D6 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"=>\"}),\" \\u8BED\\u6CD5\\u4EE3\\u66FF function \\u5173\\u952E\\u5B57\\u3002\\u57FA\\u672C\\u8BED\\u6CD5\\u662F\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const myFunction = (arg1, arg2, ...argN) => {\n  // function body\n};\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5982\\u679C\\u51FD\\u6570\\u4F53\\u53EA\\u6709\\u4E00\\u4E2A\\u8868\\u8FBE\\u5F0F\\uFF0C\\u5219\\u53EF\\u4EE5\\u7701\\u7565\\u5927\\u62EC\\u53F7\\u548C return \\u5173\\u952E\\u5B57\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const myFunction = (arg1, arg2, ...argN) => expression;\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F8B\\u5B50\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u5E26\\u6709\\u53C2\\u6570\\u7684\\u7BAD\\u5934\\u51FD\\u6570\nconst multiply = (x, y) => x * y;\nconsole.log(multiply(2, 3)); // \\u8F93\\u51FA\\uFF1A6\n\n// \\u6CA1\\u6709\\u53C2\\u6570\\u7684\\u7BAD\\u5934\\u51FD\\u6570\nconst sayHello = () => 'Hello, World!';\nconsole.log(sayHello()); // \\u8F93\\u51FA\\uFF1A'Hello, World!'\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7B80\\u6D01\"}),\": \\u7BAD\\u5934\\u51FD\\u6570\\u63D0\\u4F9B\\u66F4\\u7B80\\u6D01\\u7684\\u8BED\\u6CD5\\uFF0C\\u5C24\\u5176\\u9002\\u7528\\u4E8E\\u77ED\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9690\\u5F0F\\u8FD4\\u56DE\"}),\": \\u5B83\\u4EEC\\u5BF9\\u5355\\u884C\\u51FD\\u6570\\u5177\\u6709\\u9690\\u5F0F\\u8FD4\\u56DE\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsxs)(n.strong,{children:[(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u662F\\u53EF\\u9884\\u6D4B\\u7684\"]}),\": \\u7BAD\\u5934\\u51FD\\u6570\\u5728\\u8BCD\\u6CD5\\u4E0A\\u7ED1\\u5B9A \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\uFF0C\\u4ECE\\u5C01\\u95ED\\u8303\\u56F4\\u7EE7\\u627F\\u5B83\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5C40\\u9650\\u6027\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u4E0D\\u80FD\\u7528\\u4F5C\\u6784\\u9020\\u51FD\\u6570\\uFF0C\\u5E76\\u4E14\\u4E0E \",(0,e.jsx)(n.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u4E00\\u8D77\\u4F7F\\u7528\\u65F6\\u4F1A\\u629B\\u51FA\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const Foo = () => {};\nconst foo = new Foo(); // TypeError: Foo is not a constructor\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5B83\\u4EEC\\u4E5F\\u6CA1\\u6709 \",(0,e.jsx)(n.code,{children:\"arguments\"}),\" \\u5173\\u952E\\u5B57\\uFF1B\\u53C2\\u6570\\u5FC5\\u987B\\u901A\\u8FC7\\u5728\\u53C2\\u6570\\u4E2D\\u4F7F\\u7528 rest \\u8FD0\\u7B97\\u7B26 (\",(0,e.jsx)(n.code,{children:\"...\"}),\") \\u6765\\u83B7\\u53D6\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const arrowFunction = (...args) => {\n  console.log(arguments); // Throws a ReferenceError\n  console.log(args); // [1, 2, 3]\n};\n\narrowFunction(1, 2, 3);\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7531\\u4E8E\\u7BAD\\u5934\\u51FD\\u6570\\u6CA1\\u6709\\u81EA\\u5DF1\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\uFF0C\\u56E0\\u6B64\\u5B83\\u4EEC\\u4E0D\\u9002\\u5408\\u5728\\u5BF9\\u8C61\\u4E2D\\u5B9A\\u4E49\\u65B9\\u6CD5\\u3002 \\u5E94\\u8BE5\\u4F7F\\u7528\\u4F20\\u7EDF\\u7684\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u6216\\u51FD\\u6570\\u58F0\\u660E\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: () => this.value, // \\`this\\` does not refer to \\`obj\\`\n};\n\nconsole.log(obj.getValue()); // undefined\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4E3A\\u4EC0\\u4E48\\u7BAD\\u5934\\u51FD\\u6570\\u6709\\u7528\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u6700\\u663E\\u8457\\u7684\\u7279\\u5F81\\u4E4B\\u4E00\\u662F\\u5B83\\u4EEC\\u4E0E \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u884C\\u4E3A\\u3002\\u4E0E\\u5E38\\u89C4\\u51FD\\u6570\\u4E0D\\u540C\\uFF0C\\u7BAD\\u5934\\u51FD\\u6570\\u6CA1\\u6709\\u81EA\\u5DF1\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\u3002\\u76F8\\u53CD\\uFF0C\\u5B83\\u4EEC\\u5728\\u5B9A\\u4E49\\u65F6\\u4ECE\\u7236\\u4F5C\\u7528\\u57DF\\u7EE7\\u627F \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\u3002\\u8FD9\\u4F7F\\u5F97\\u7BAD\\u5934\\u51FD\\u6570\\u7279\\u522B\\u9002\\u7528\\u4E8E\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u3001\\u56DE\\u8C03\\u548C\\u7C7B\\u4E2D\\u7684\\u65B9\\u6CD5\\u7B49\\u573A\\u666F\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\\u4E2D\\u7684\\u7BAD\\u5934\\u51FD\\u6570\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const Person = function (name) {\n  this.firstName = name;\n  this.sayName1 = function () {\n    console.log(this.firstName);\n  };\n  this.sayName2 = () => {\n    console.log(this.firstName);\n  };\n};\n\nconst john = new Person('John');\nconst dave = new Person('Dave');\n\njohn.sayName1(); // John\njohn.sayName2(); // John\n\n// \\u5E38\\u89C4\\u51FD\\u6570\\u53EF\\u4EE5\\u66F4\\u6539\\u5176 \\`this\\` \\u503C\\uFF0C\\u4F46\\u7BAD\\u5934\\u51FD\\u6570\\u4E0D\\u80FD\njohn.sayName1.call(dave); // Dave (\\u56E0\\u4E3A \\`this\\` \\u73B0\\u5728\\u662F dave \\u5BF9\\u8C61)\njohn.sayName2.call(dave); // John\n\njohn.sayName1.apply(dave); // Dave (\\u56E0\\u4E3A \\`this\\` \\u73B0\\u5728\\u662F dave \\u5BF9\\u8C61)\njohn.sayName2.apply(dave); // John\n\njohn.sayName1.bind(dave)(); // Dave (\\u56E0\\u4E3A \\`this\\` \\u73B0\\u5728\\u662F dave \\u5BF9\\u8C61)\njohn.sayName2.bind(dave)(); // John\n\nconst sayNameFromWindow1 = john.sayName1;\nsayNameFromWindow1(); // undefined (\\u56E0\\u4E3A \\`this\\` \\u73B0\\u5728\\u662F window \\u5BF9\\u8C61)\n\nconst sayNameFromWindow2 = john.sayName2;\nsayNameFromWindow2(); // John\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7BAD\\u5934\\u51FD\\u6570\\u5728\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const button = document.getElementById('myButton');\n\nbutton.addEventListener('click', function () {\n  console.log(this); // Output: Button\n  console.log(this === button); // Output: true\n});\n\nbutton.addEventListener('click', () => {\n  console.log(this); // Output: Window\n  console.log(this === window); // Output: true\n});\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8FD9\\u5728 React \\u7C7B\\u7EC4\\u4EF6\\u4E2D\\u7279\\u522B\\u6709\\u7528\\u3002 \\u5982\\u679C\\u60A8\\u4F7F\\u7528\\u666E\\u901A\\u51FD\\u6570\\u5B9A\\u4E49\\u4E00\\u4E2A\\u7C7B\\u65B9\\u6CD5\\uFF0C\\u4F8B\\u5982\\u5355\\u51FB\\u5904\\u7406\\u7A0B\\u5E8F\\uFF0C\\u7136\\u540E\\u5C06\\u8BE5\\u5355\\u51FB\\u5904\\u7406\\u7A0B\\u5E8F\\u4F5C\\u4E3A prop \\u4F20\\u9012\\u5230\\u5B50\\u7EC4\\u4EF6\\u4E2D\\uFF0C\\u5219\\u8FD8\\u9700\\u8981\\u5728\\u7236\\u7EC4\\u4EF6\\u7684\\u6784\\u9020\\u51FD\\u6570\\u4E2D\\u7ED1\\u5B9A \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\u3002 \\u5982\\u679C\\u60A8\\u6539\\u4E3A\\u4F7F\\u7528\\u7BAD\\u5934\\u51FD\\u6570\\uFF0C\\u5219\\u65E0\\u9700\\u7ED1\\u5B9A \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\uFF0C\\u56E0\\u4E3A\\u8BE5\\u65B9\\u6CD5\\u5C06\\u81EA\\u52A8\\u4ECE\\u5176\\u5C01\\u95ED\\u7684\\u8BCD\\u6CD5\\u4E0A\\u4E0B\\u6587\\u4E2D\\u83B7\\u53D6\\u5176 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u3002 \\u8BF7\\u53C2\\u9605\\u6B64 \",(0,e.jsx)(n.a,{href:\"https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb\",children:\"\\u6587\\u7AE0\"}),\" \\u4EE5\\u83B7\\u5F97\\u51FA\\u8272\\u7684\\u6F14\\u793A\\u548C\\u793A\\u4F8B\\u4EE3\\u7801\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions\",children:\"\\u7BAD\\u5934\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F - MDN \"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/javascript-arrow-functions-in-dep\",children:\"\\u5982\\u4F55\\u4F7F\\u7528 JavaScript \\u7BAD\\u5934\\u51FD\\u6570 \\u2013 \\u8BE6\\u7EC6\\u89E3\\u91CA\"})}),`\n`]})]})}function f(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,Object.assign({},o,{children:(0,e.jsx)(l,o)})):l(o)}var b=f;return j(F);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var y=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),v=(o,n)=>{for(var a in n)i(o,a,{get:n[a],enumerable:!0})},s=(o,n,a,r)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of p(n))!N.call(o,c)&&c!==a&&i(o,c,{get:()=>n[c],enumerable:!(r=u(n,c))||r.enumerable});return o};var j=(o,n,a)=>(a=o!=null?m(g(o)):{},s(n||!o||!o.__esModule?i(a,\"default\",{value:o,enumerable:!0}):a,o)),w=o=>s(i({},\"__esModule\",{value:!0}),o);var t=y((b,h)=>{h.exports=_jsx_runtime});var F={};v(F,{default:()=>d,frontmatter:()=>f});var e=j(t()),f={title:\"\\u5728\\u6784\\u9020\\u51FD\\u6570\\u4E2D\\u4F7F\\u7528 JavaScript \\u7BAD\\u5934\\u8BED\\u6CD5\\u4F5C\\u4E3A\\u65B9\\u6CD5\\u6709\\u4EC0\\u4E48\\u4F18\\u52BF\\uFF1F\"};function l(o){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...o.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6784\\u9020\\u51FD\\u6570\\u4E2D\\u4F7F\\u7528\\u7BAD\\u5934\\u51FD\\u6570\\u4F5C\\u4E3A\\u65B9\\u6CD5\\u7684\\u4E3B\\u8981\\u4F18\\u70B9\\u662F \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u5728\\u51FD\\u6570\\u521B\\u5EFA\\u65F6\\u8BBE\\u7F6E\\uFF0C\\u4E4B\\u540E\\u65E0\\u6CD5\\u66F4\\u6539\\u3002\\u5F53\\u6784\\u9020\\u51FD\\u6570\\u7528\\u4E8E\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5C06\\u59CB\\u7EC8\\u5F15\\u7528\\u8BE5\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F8B\\u5982\\uFF0C\\u5047\\u8BBE\\u6211\\u4EEC\\u6709\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"Person\"}),\" \\u6784\\u9020\\u51FD\\u6570\\uFF0C\\u5B83\\u63A5\\u53D7\\u4E00\\u4E2A\\u540D\\u5B57\\u4F5C\\u4E3A\\u53C2\\u6570\\uFF0C\\u5E76\\u6709\\u4E24\\u4E2A\\u65B9\\u6CD5\\u6765 \",(0,e.jsx)(n.code,{children:\"console.log()\"}),\" \\u8BE5\\u540D\\u79F0\\uFF0C\\u4E00\\u4E2A\\u4F5C\\u4E3A\\u5E38\\u89C4\\u51FD\\u6570\\uFF0C\\u4E00\\u4E2A\\u4F5C\\u4E3A\\u7BAD\\u5934\\u51FD\\u6570\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const Person = function (name) {\n  this.firstName = name;\n  this.sayName1 = function () {\n    console.log(this.firstName);\n  };\n  this.sayName2 = () => {\n    console.log(this.firstName);\n  };\n};\n\nconst john = new Person('John');\nconst dave = new Person('Dave');\n\njohn.sayName1(); // John\njohn.sayName2(); // John\n\n// \\u5E38\\u89C4\\u51FD\\u6570\\u53EF\\u4EE5\\u66F4\\u6539\\u5176 \\`this\\` \\u503C\\uFF0C\\u4F46\\u7BAD\\u5934\\u51FD\\u6570\\u4E0D\\u80FD\njohn.sayName1.call(dave); // Dave (\\u56E0\\u4E3A \\`this\\` \\u73B0\\u5728\\u662F dave \\u5BF9\\u8C61)\njohn.sayName2.call(dave); // John\n\njohn.sayName1.apply(dave); // Dave (\\u56E0\\u4E3A \\`this\\` \\u73B0\\u5728\\u662F dave \\u5BF9\\u8C61)\njohn.sayName2.apply(dave); // John\n\njohn.sayName1.bind(dave)(); // Dave (\\u56E0\\u4E3A \\`this\\` \\u73B0\\u5728\\u662F dave \\u5BF9\\u8C61)\njohn.sayName2.bind(dave)(); // John\n\nconst sayNameFromWindow1 = john.sayName1;\nsayNameFromWindow1(); // undefined (\\u56E0\\u4E3A \\`this\\` \\u73B0\\u5728\\u662F window \\u5BF9\\u8C61)\n\nconst sayNameFromWindow2 = john.sayName2;\nsayNameFromWindow2(); // John\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8FD9\\u91CC\\u7684\\u4E3B\\u8981\\u7ED3\\u8BBA\\u662F\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u53EF\\u4EE5\\u4E3A\\u666E\\u901A\\u51FD\\u6570\\u66F4\\u6539\\uFF0C\\u4F46 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5BF9\\u4E8E\\u7BAD\\u5934\\u51FD\\u6570\\u59CB\\u7EC8\\u4FDD\\u6301\\u4E0D\\u53D8\\u3002\\u56E0\\u6B64\\uFF0C\\u5373\\u4F7F\\u60A8\\u5C06\\u7BAD\\u5934\\u51FD\\u6570\\u4F20\\u9012\\u5230\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4E0D\\u540C\\u90E8\\u5206\\uFF0C\\u60A8\\u4E5F\\u4E0D\\u5FC5\\u62C5\\u5FC3 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u53D1\\u751F\\u53D8\\u5316\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7BAD\\u5934\\u51FD\\u6570\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u662F\\u5728 ES2015 \\u4E2D\\u5F15\\u5165\\u7684\\uFF0C\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u7528 Javascript \\u7F16\\u5199\\u51FD\\u6570\\u7684\\u7B80\\u6D01\\u65B9\\u5F0F\\u3002\\u7BAD\\u5934\\u51FD\\u6570\\u7684\\u4E00\\u4E2A\\u5173\\u952E\\u7279\\u6027\\u662F\\u5B83\\u5728\\u8BCD\\u6CD5\\u4E0A\\u7ED1\\u5B9A\\u4E86 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4ECE\\u5C01\\u95ED\\u8303\\u56F4\\u83B7\\u53D6 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"=>\"}),\" \\u8BED\\u6CD5\\u4EE3\\u66FF function \\u5173\\u952E\\u5B57\\u3002\\u57FA\\u672C\\u8BED\\u6CD5\\u662F\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const myFunction = (arg1, arg2, ...argN) => {\n  // function body\n};\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5982\\u679C\\u51FD\\u6570\\u4F53\\u53EA\\u6709\\u4E00\\u4E2A\\u8868\\u8FBE\\u5F0F\\uFF0C\\u5219\\u53EF\\u4EE5\\u7701\\u7565\\u5927\\u62EC\\u53F7\\u548C return \\u5173\\u952E\\u5B57\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const myFunction = (arg1, arg2, ...argN) => expression;\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F8B\\u5B50\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u5E26\\u6709\\u53C2\\u6570\\u7684\\u7BAD\\u5934\\u51FD\\u6570\nconst multiply = (x, y) => x * y;\nconsole.log(multiply(2, 3)); // \\u8F93\\u51FA\\uFF1A6\n\n// \\u6CA1\\u6709\\u53C2\\u6570\\u7684\\u7BAD\\u5934\\u51FD\\u6570\nconst sayHello = () => 'Hello, World!';\nconsole.log(sayHello()); // \\u8F93\\u51FA\\uFF1A'Hello, World!'\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7B80\\u6D01\"}),\": \\u7BAD\\u5934\\u51FD\\u6570\\u63D0\\u4F9B\\u66F4\\u7B80\\u6D01\\u7684\\u8BED\\u6CD5\\uFF0C\\u5C24\\u5176\\u9002\\u7528\\u4E8E\\u77ED\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9690\\u5F0F\\u8FD4\\u56DE\"}),\": \\u5B83\\u4EEC\\u5BF9\\u5355\\u884C\\u51FD\\u6570\\u5177\\u6709\\u9690\\u5F0F\\u8FD4\\u56DE\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsxs)(n.strong,{children:[(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u662F\\u53EF\\u9884\\u6D4B\\u7684\"]}),\": \\u7BAD\\u5934\\u51FD\\u6570\\u5728\\u8BCD\\u6CD5\\u4E0A\\u7ED1\\u5B9A \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\uFF0C\\u4ECE\\u5C01\\u95ED\\u8303\\u56F4\\u7EE7\\u627F\\u5B83\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5C40\\u9650\\u6027\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u4E0D\\u80FD\\u7528\\u4F5C\\u6784\\u9020\\u51FD\\u6570\\uFF0C\\u5E76\\u4E14\\u4E0E \",(0,e.jsx)(n.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u4E00\\u8D77\\u4F7F\\u7528\\u65F6\\u4F1A\\u629B\\u51FA\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const Foo = () => {};\nconst foo = new Foo(); // TypeError: Foo is not a constructor\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5B83\\u4EEC\\u4E5F\\u6CA1\\u6709 \",(0,e.jsx)(n.code,{children:\"arguments\"}),\" \\u5173\\u952E\\u5B57\\uFF1B\\u53C2\\u6570\\u5FC5\\u987B\\u901A\\u8FC7\\u5728\\u53C2\\u6570\\u4E2D\\u4F7F\\u7528 rest \\u8FD0\\u7B97\\u7B26 (\",(0,e.jsx)(n.code,{children:\"...\"}),\") \\u6765\\u83B7\\u53D6\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const arrowFunction = (...args) => {\n  console.log(arguments); // Throws a ReferenceError\n  console.log(args); // [1, 2, 3]\n};\n\narrowFunction(1, 2, 3);\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7531\\u4E8E\\u7BAD\\u5934\\u51FD\\u6570\\u6CA1\\u6709\\u81EA\\u5DF1\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\uFF0C\\u56E0\\u6B64\\u5B83\\u4EEC\\u4E0D\\u9002\\u5408\\u5728\\u5BF9\\u8C61\\u4E2D\\u5B9A\\u4E49\\u65B9\\u6CD5\\u3002 \\u5E94\\u8BE5\\u4F7F\\u7528\\u4F20\\u7EDF\\u7684\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u6216\\u51FD\\u6570\\u58F0\\u660E\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: () => this.value, // \\`this\\` does not refer to \\`obj\\`\n};\n\nconsole.log(obj.getValue()); // undefined\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4E3A\\u4EC0\\u4E48\\u7BAD\\u5934\\u51FD\\u6570\\u6709\\u7528\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u6700\\u663E\\u8457\\u7684\\u7279\\u5F81\\u4E4B\\u4E00\\u662F\\u5B83\\u4EEC\\u4E0E \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u884C\\u4E3A\\u3002\\u4E0E\\u5E38\\u89C4\\u51FD\\u6570\\u4E0D\\u540C\\uFF0C\\u7BAD\\u5934\\u51FD\\u6570\\u6CA1\\u6709\\u81EA\\u5DF1\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\u3002\\u76F8\\u53CD\\uFF0C\\u5B83\\u4EEC\\u5728\\u5B9A\\u4E49\\u65F6\\u4ECE\\u7236\\u4F5C\\u7528\\u57DF\\u7EE7\\u627F \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\u3002\\u8FD9\\u4F7F\\u5F97\\u7BAD\\u5934\\u51FD\\u6570\\u7279\\u522B\\u9002\\u7528\\u4E8E\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u3001\\u56DE\\u8C03\\u548C\\u7C7B\\u4E2D\\u7684\\u65B9\\u6CD5\\u7B49\\u573A\\u666F\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\\u4E2D\\u7684\\u7BAD\\u5934\\u51FD\\u6570\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const Person = function (name) {\n  this.firstName = name;\n  this.sayName1 = function () {\n    console.log(this.firstName);\n  };\n  this.sayName2 = () => {\n    console.log(this.firstName);\n  };\n};\n\nconst john = new Person('John');\nconst dave = new Person('Dave');\n\njohn.sayName1(); // John\njohn.sayName2(); // John\n\n// \\u5E38\\u89C4\\u51FD\\u6570\\u53EF\\u4EE5\\u66F4\\u6539\\u5176 \\`this\\` \\u503C\\uFF0C\\u4F46\\u7BAD\\u5934\\u51FD\\u6570\\u4E0D\\u80FD\njohn.sayName1.call(dave); // Dave (\\u56E0\\u4E3A \\`this\\` \\u73B0\\u5728\\u662F dave \\u5BF9\\u8C61)\njohn.sayName2.call(dave); // John\n\njohn.sayName1.apply(dave); // Dave (\\u56E0\\u4E3A \\`this\\` \\u73B0\\u5728\\u662F dave \\u5BF9\\u8C61)\njohn.sayName2.apply(dave); // John\n\njohn.sayName1.bind(dave)(); // Dave (\\u56E0\\u4E3A \\`this\\` \\u73B0\\u5728\\u662F dave \\u5BF9\\u8C61)\njohn.sayName2.bind(dave)(); // John\n\nconst sayNameFromWindow1 = john.sayName1;\nsayNameFromWindow1(); // undefined (\\u56E0\\u4E3A \\`this\\` \\u73B0\\u5728\\u662F window \\u5BF9\\u8C61)\n\nconst sayNameFromWindow2 = john.sayName2;\nsayNameFromWindow2(); // John\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7BAD\\u5934\\u51FD\\u6570\\u5728\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const button = document.getElementById('myButton');\n\nbutton.addEventListener('click', function () {\n  console.log(this); // Output: Button\n  console.log(this === button); // Output: true\n});\n\nbutton.addEventListener('click', () => {\n  console.log(this); // Output: Window\n  console.log(this === window); // Output: true\n});\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8FD9\\u5728 React \\u7C7B\\u7EC4\\u4EF6\\u4E2D\\u7279\\u522B\\u6709\\u7528\\u3002 \\u5982\\u679C\\u60A8\\u4F7F\\u7528\\u666E\\u901A\\u51FD\\u6570\\u5B9A\\u4E49\\u4E00\\u4E2A\\u7C7B\\u65B9\\u6CD5\\uFF0C\\u4F8B\\u5982\\u5355\\u51FB\\u5904\\u7406\\u7A0B\\u5E8F\\uFF0C\\u7136\\u540E\\u5C06\\u8BE5\\u5355\\u51FB\\u5904\\u7406\\u7A0B\\u5E8F\\u4F5C\\u4E3A prop \\u4F20\\u9012\\u5230\\u5B50\\u7EC4\\u4EF6\\u4E2D\\uFF0C\\u5219\\u8FD8\\u9700\\u8981\\u5728\\u7236\\u7EC4\\u4EF6\\u7684\\u6784\\u9020\\u51FD\\u6570\\u4E2D\\u7ED1\\u5B9A \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\u3002 \\u5982\\u679C\\u60A8\\u6539\\u4E3A\\u4F7F\\u7528\\u7BAD\\u5934\\u51FD\\u6570\\uFF0C\\u5219\\u65E0\\u9700\\u7ED1\\u5B9A \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\uFF0C\\u56E0\\u4E3A\\u8BE5\\u65B9\\u6CD5\\u5C06\\u81EA\\u52A8\\u4ECE\\u5176\\u5C01\\u95ED\\u7684\\u8BCD\\u6CD5\\u4E0A\\u4E0B\\u6587\\u4E2D\\u83B7\\u53D6\\u5176 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u3002 \\u8BF7\\u53C2\\u9605\\u6B64 \",(0,e.jsx)(n.a,{href:\"https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb\",children:\"\\u6587\\u7AE0\"}),\" \\u4EE5\\u83B7\\u5F97\\u51FA\\u8272\\u7684\\u6F14\\u793A\\u548C\\u793A\\u4F8B\\u4EE3\\u7801\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions\",children:\"\\u7BAD\\u5934\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F - MDN \"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/javascript-arrow-functions-in-dep\",children:\"\\u5982\\u4F55\\u4F7F\\u7528 JavaScript \\u7BAD\\u5934\\u51FD\\u6570 \\u2013 \\u8BE6\\u7EC6\\u89E3\\u91CA\"})}),`\n`]})]})}function d(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,{...o,children:(0,e.jsx)(l,{...o})}):l(o)}return w(F);})();\n;return Component;"
 }
\ No newline at end of file
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 48cbac088..a4a64424f 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-callback-functions-and-how-are-they-used/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var g=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),b=(a,n)=>{for(var t in n)c(a,t,{get:n[t],enumerable:!0})},s=(a,n,t,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of m(n))!p.call(a,o)&&o!==t&&c(a,o,{get:()=>n[o],enumerable:!(l=u(n,o))||l.enumerable});return a};var k=(a,n,t)=>(t=a!=null?d(f(a)):{},s(n||!a||!a.__esModule?c(t,\"default\",{value:a,enumerable:!0}):t,a)),y=a=>s(c({},\"__esModule\",{value:!0}),a);var i=g((A,r)=>{r.exports=_jsx_runtime});var x={};b(x,{default:()=>j,frontmatter:()=>v});var e=k(i()),v={title:\"What are callback functions and how are they used?\"};function h(a){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},a.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. They are commonly used for asynchronous operations like handling events, making API calls, or reading files. For example:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fetchData(callback) {\n  // assume an asynchronous operation to fetch data\n  const data = { name: 'John Doe' };\n  callback(data);\n}\n\nfunction handleData(data) {\n  console.log(data);\n}\n\nfetchData(handleData);\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"What are callback functions and how are they used?\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Definition\"}),`\n`,(0,e.jsx)(n.p,{children:\"A callback function is a function that is passed as an argument to another function and is executed after some operation has been completed. This allows other code to run in the meantime and prevents blocking.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Synchronous callbacks\"}),`\n`,(0,e.jsx)(n.p,{children:\"Synchronous callbacks are executed immediately within the function they are passed to. They are often used for tasks that need to be completed before moving on to the next line of code.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet(name, callback) {\n  console.log('Hello ' + name);\n  callback();\n}\n\nfunction sayGoodbye() {\n  console.log('Goodbye!');\n}\n\ngreet('Alice', sayGoodbye);\n// Output:\n// Hello Alice\n// Goodbye!\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Asynchronous callbacks\"}),`\n`,(0,e.jsx)(n.p,{children:\"Asynchronous callbacks are used for operations that take some time to complete, such as reading files, making HTTP requests, or handling events. These callbacks are executed after the asynchronous operation has finished.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fetchData(callback) {\n  setTimeout(() => {\n    const data = { name: 'John Doe' };\n    callback(data);\n  }, 1000);\n}\n\nfunction handleData(data) {\n  console.log(data);\n}\n\nfetchData(handleData);\n// Output: { name: 'John Doe' } after 1 second\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Common use cases\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Event handling\"}),`\n`,(0,e.jsx)(n.p,{children:\"Callbacks are often used in event handling. For example, in JavaScript, you can pass a callback function to an event listener.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const button = document.createElement('button');\n\nbutton.addEventListener('click', () => {\n  setTimeout(() => {\n    console.log('Button clicked after 1s');\n  }, 1000);\n});\n\nbutton.click();\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"API calls\"}),`\n`,(0,e.jsx)(n.p,{children:\"Callbacks are frequently used in making API calls to handle the response data.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function getUserData(userId, callback) {\n  fetch(\\`https://jsonplaceholder.typicode.com/todos/2\\`)\n    .then((response) => response.json())\n    .then((data) => callback(data))\n    .catch((error) => console.error('Error:', error));\n}\n\nfunction displayUserData(data) {\n  console.log(data);\n}\n\ngetUserData(1, displayUserData);\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"Timers\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Callbacks are also used with timers like \",(0,e.jsx)(n.code,{children:\"setTimeout\"}),\" and \",(0,e.jsx)(n.code,{children:\"setInterval\"}),\".\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function sayHello() {\n  console.log('Hello, world!');\n}\n\nsetTimeout(sayHello, 2000); // After 2 seconds elapse, sayHello callback is called\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Callback_function\",children:\"MDN Web Docs: Callback function\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/callbacks\",children:\"JavaScript.info: Callbacks\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/11_async.html\",children:\"Eloquent JavaScript: Asynchronous Programming\"})}),`\n`]})]})}function D(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(h,a)})):h(a)}var j=D;return y(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),k=(a,n)=>{for(var t in n)c(a,t,{get:n[t],enumerable:!0})},s=(a,n,t,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of f(n))!g.call(a,o)&&o!==t&&c(a,o,{get:()=>n[o],enumerable:!(l=m(n,o))||l.enumerable});return a};var y=(a,n,t)=>(t=a!=null?u(p(a)):{},s(n||!a||!a.__esModule?c(t,\"default\",{value:a,enumerable:!0}):t,a)),v=a=>s(c({},\"__esModule\",{value:!0}),a);var i=b((T,r)=>{r.exports=_jsx_runtime});var j={};k(j,{default:()=>d,frontmatter:()=>D});var e=y(i()),D={title:\"What are callback functions and how are they used?\"};function h(a){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...a.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. They are commonly used for asynchronous operations like handling events, making API calls, or reading files. For example:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fetchData(callback) {\n  // assume an asynchronous operation to fetch data\n  const data = { name: 'John Doe' };\n  callback(data);\n}\n\nfunction handleData(data) {\n  console.log(data);\n}\n\nfetchData(handleData);\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"What are callback functions and how are they used?\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Definition\"}),`\n`,(0,e.jsx)(n.p,{children:\"A callback function is a function that is passed as an argument to another function and is executed after some operation has been completed. This allows other code to run in the meantime and prevents blocking.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Synchronous callbacks\"}),`\n`,(0,e.jsx)(n.p,{children:\"Synchronous callbacks are executed immediately within the function they are passed to. They are often used for tasks that need to be completed before moving on to the next line of code.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet(name, callback) {\n  console.log('Hello ' + name);\n  callback();\n}\n\nfunction sayGoodbye() {\n  console.log('Goodbye!');\n}\n\ngreet('Alice', sayGoodbye);\n// Output:\n// Hello Alice\n// Goodbye!\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Asynchronous callbacks\"}),`\n`,(0,e.jsx)(n.p,{children:\"Asynchronous callbacks are used for operations that take some time to complete, such as reading files, making HTTP requests, or handling events. These callbacks are executed after the asynchronous operation has finished.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fetchData(callback) {\n  setTimeout(() => {\n    const data = { name: 'John Doe' };\n    callback(data);\n  }, 1000);\n}\n\nfunction handleData(data) {\n  console.log(data);\n}\n\nfetchData(handleData);\n// Output: { name: 'John Doe' } after 1 second\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Common use cases\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Event handling\"}),`\n`,(0,e.jsx)(n.p,{children:\"Callbacks are often used in event handling. For example, in JavaScript, you can pass a callback function to an event listener.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const button = document.createElement('button');\n\nbutton.addEventListener('click', () => {\n  setTimeout(() => {\n    console.log('Button clicked after 1s');\n  }, 1000);\n});\n\nbutton.click();\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"API calls\"}),`\n`,(0,e.jsx)(n.p,{children:\"Callbacks are frequently used in making API calls to handle the response data.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function getUserData(userId, callback) {\n  fetch(\\`https://jsonplaceholder.typicode.com/todos/2\\`)\n    .then((response) => response.json())\n    .then((data) => callback(data))\n    .catch((error) => console.error('Error:', error));\n}\n\nfunction displayUserData(data) {\n  console.log(data);\n}\n\ngetUserData(1, displayUserData);\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"Timers\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Callbacks are also used with timers like \",(0,e.jsx)(n.code,{children:\"setTimeout\"}),\" and \",(0,e.jsx)(n.code,{children:\"setInterval\"}),\".\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function sayHello() {\n  console.log('Hello, world!');\n}\n\nsetTimeout(sayHello, 2000); // After 2 seconds elapse, sayHello callback is called\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Callback_function\",children:\"MDN Web Docs: Callback function\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/callbacks\",children:\"JavaScript.info: Callbacks\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/11_async.html\",children:\"Eloquent JavaScript: Asynchronous Programming\"})}),`\n`]})]})}function d(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,{...a,children:(0,e.jsx)(h,{...a})}):h(a)}return v(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-callback-functions-and-how-are-they-used/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-callback-functions-and-how-are-they-used/zh-CN.json
index 9d719c9d9..066de52cb 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-callback-functions-and-how-are-they-used/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-callback-functions-and-how-are-they-used/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-callback-functions-and-how-are-they-used/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),b=(a,n)=>{for(var c in n)t(a,c,{get:n[c],enumerable:!0})},r=(a,n,c,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of p(n))!g.call(a,l)&&l!==c&&t(a,l,{get:()=>n[l],enumerable:!(o=u(n,l))||o.enumerable});return a};var D=(a,n,c)=>(c=a!=null?h(m(a)):{},r(n||!a||!a.__esModule?t(c,\"default\",{value:a,enumerable:!0}):c,a)),j=a=>r(t({},\"__esModule\",{value:!0}),a);var i=f((H,s)=>{s.exports=_jsx_runtime});var x={};b(x,{default:()=>v,frontmatter:()=>y});var e=D(i()),y={title:\"\\u4EC0\\u4E48\\u662F\\u56DE\\u8C03\\u51FD\\u6570\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u4EEC\\uFF1F\"};function d(a){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},a.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u56DE\\u8C03\\u51FD\\u6570\\u662F\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u7684\\u51FD\\u6570\\uFF0C\\u7136\\u540E\\u5728\\u5916\\u90E8\\u51FD\\u6570\\u4E2D\\u8C03\\u7528\\u8BE5\\u51FD\\u6570\\u4EE5\\u5B8C\\u6210\\u67D0\\u79CD\\u4F8B\\u7A0B\\u6216\\u64CD\\u4F5C\\u3002\\u5B83\\u4EEC\\u901A\\u5E38\\u7528\\u4E8E\\u5F02\\u6B65\\u64CD\\u4F5C\\uFF0C\\u4F8B\\u5982\\u5904\\u7406\\u4E8B\\u4EF6\\u3001\\u8FDB\\u884C API \\u8C03\\u7528\\u6216\\u8BFB\\u53D6\\u6587\\u4EF6\\u3002\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fetchData(callback) {\n  // assume an asynchronous operation to fetch data\n  const data = { name: 'John Doe' };\n  callback(data);\n}\n\nfunction handleData(data) {\n  console.log(data);\n}\n\nfetchData(handleData);\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u56DE\\u8C03\\u51FD\\u6570\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u4EEC\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u56DE\\u8C03\\u51FD\\u6570\\u662F\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u5E76\\u5728\\u5B8C\\u6210\\u67D0\\u4E9B\\u64CD\\u4F5C\\u540E\\u6267\\u884C\\u7684\\u51FD\\u6570\\u3002\\u8FD9\\u5141\\u8BB8\\u5176\\u4ED6\\u4EE3\\u7801\\u540C\\u65F6\\u8FD0\\u884C\\u5E76\\u9632\\u6B62\\u963B\\u585E\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u540C\\u6B65\\u56DE\\u8C03\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u540C\\u6B65\\u56DE\\u8C03\\u5728\\u4F20\\u9012\\u7ED9\\u5B83\\u4EEC\\u7684\\u51FD\\u6570\\u4E2D\\u7ACB\\u5373\\u6267\\u884C\\u3002\\u5B83\\u4EEC\\u901A\\u5E38\\u7528\\u4E8E\\u9700\\u8981\\u5728\\u8FDB\\u5165\\u4E0B\\u4E00\\u884C\\u4EE3\\u7801\\u4E4B\\u524D\\u5B8C\\u6210\\u7684\\u4EFB\\u52A1\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet(name, callback) {\n  console.log('Hello ' + name);\n  callback();\n}\n\nfunction sayGoodbye() {\n  console.log('Goodbye!');\n}\n\ngreet('Alice', sayGoodbye);\n// Output:\n// Hello Alice\n// Goodbye!\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5F02\\u6B65\\u56DE\\u8C03\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F02\\u6B65\\u56DE\\u8C03\\u7528\\u4E8E\\u9700\\u8981\\u4E00\\u4E9B\\u65F6\\u95F4\\u624D\\u80FD\\u5B8C\\u6210\\u7684\\u64CD\\u4F5C\\uFF0C\\u4F8B\\u5982\\u8BFB\\u53D6\\u6587\\u4EF6\\u3001\\u53D1\\u51FA HTTP \\u8BF7\\u6C42\\u6216\\u5904\\u7406\\u4E8B\\u4EF6\\u3002\\u8FD9\\u4E9B\\u56DE\\u8C03\\u5728\\u5F02\\u6B65\\u64CD\\u4F5C\\u5B8C\\u6210\\u540E\\u6267\\u884C\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fetchData(callback) {\n  setTimeout(() => {\n    const data = { name: 'John Doe' };\n    callback(data);\n  }, 1000);\n}\n\nfunction handleData(data) {\n  console.log(data);\n}\n\nfetchData(handleData);\n// Output: { name: 'John Doe' } after 1 second\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5E38\\u89C1\\u7528\\u4F8B\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4E8B\\u4EF6\\u5904\\u7406\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u56DE\\u8C03\\u901A\\u5E38\\u7528\\u4E8E\\u4E8B\\u4EF6\\u5904\\u7406\\u3002\\u4F8B\\u5982\\uFF0C\\u5728 JavaScript \\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C06\\u56DE\\u8C03\\u51FD\\u6570\\u4F20\\u9012\\u7ED9\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const button = document.createElement('button');\n\nbutton.addEventListener('click', () => {\n  setTimeout(() => {\n    console.log('Button clicked after 1s');\n  }, 1000);\n});\n\nbutton.click();\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"API \\u8C03\\u7528\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u56DE\\u8C03\\u7ECF\\u5E38\\u7528\\u4E8E\\u8FDB\\u884C API \\u8C03\\u7528\\u4EE5\\u5904\\u7406\\u54CD\\u5E94\\u6570\\u636E\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function getUserData(userId, callback) {\n  fetch(\\`https://jsonplaceholder.typicode.com/todos/2\\`)\n    .then((response) => response.json())\n    .then((data) => callback(data))\n    .catch((error) => console.error('Error:', error));\n}\n\nfunction displayUserData(data) {\n  console.log(data);\n}\n\ngetUserData(1, displayUserData);\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5B9A\\u65F6\\u5668\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u56DE\\u8C03\\u51FD\\u6570\\u4E5F\\u7528\\u4E8E\\u8BA1\\u65F6\\u5668\\uFF0C\\u5982 \",(0,e.jsx)(n.code,{children:\"setTimeout\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"setInterval\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function sayHello() {\n  console.log('Hello, world!');\n}\n\nsetTimeout(sayHello, 2000); // 2 \\u79D2\\u540E\\uFF0CsayHello \\u56DE\\u8C03\\u51FD\\u6570\\u88AB\\u8C03\\u7528\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Callback_function\",children:\"MDN Web Docs: Callback function\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/callbacks\",children:\"JavaScript.info: Callbacks\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/11_async.html\",children:\"Eloquent JavaScript: Asynchronous Programming\"})}),`\n`]})]})}function k(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(d,a)})):d(a)}var v=k;return j(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),D=(a,n)=>{for(var l in n)t(a,l,{get:n[l],enumerable:!0})},r=(a,n,l,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of m(n))!g.call(a,c)&&c!==l&&t(a,c,{get:()=>n[c],enumerable:!(o=p(n,c))||o.enumerable});return a};var y=(a,n,l)=>(l=a!=null?u(f(a)):{},r(n||!a||!a.__esModule?t(l,\"default\",{value:a,enumerable:!0}):l,a)),j=a=>r(t({},\"__esModule\",{value:!0}),a);var s=b((_,i)=>{i.exports=_jsx_runtime});var v={};D(v,{default:()=>h,frontmatter:()=>k});var e=y(s()),k={title:\"\\u4EC0\\u4E48\\u662F\\u56DE\\u8C03\\u51FD\\u6570\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u4EEC\\uFF1F\"};function d(a){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...a.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u56DE\\u8C03\\u51FD\\u6570\\u662F\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u7684\\u51FD\\u6570\\uFF0C\\u7136\\u540E\\u5728\\u5916\\u90E8\\u51FD\\u6570\\u4E2D\\u8C03\\u7528\\u8BE5\\u51FD\\u6570\\u4EE5\\u5B8C\\u6210\\u67D0\\u79CD\\u4F8B\\u7A0B\\u6216\\u64CD\\u4F5C\\u3002\\u5B83\\u4EEC\\u901A\\u5E38\\u7528\\u4E8E\\u5F02\\u6B65\\u64CD\\u4F5C\\uFF0C\\u4F8B\\u5982\\u5904\\u7406\\u4E8B\\u4EF6\\u3001\\u8FDB\\u884C API \\u8C03\\u7528\\u6216\\u8BFB\\u53D6\\u6587\\u4EF6\\u3002\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fetchData(callback) {\n  // assume an asynchronous operation to fetch data\n  const data = { name: 'John Doe' };\n  callback(data);\n}\n\nfunction handleData(data) {\n  console.log(data);\n}\n\nfetchData(handleData);\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u56DE\\u8C03\\u51FD\\u6570\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u4EEC\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u56DE\\u8C03\\u51FD\\u6570\\u662F\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u5E76\\u5728\\u5B8C\\u6210\\u67D0\\u4E9B\\u64CD\\u4F5C\\u540E\\u6267\\u884C\\u7684\\u51FD\\u6570\\u3002\\u8FD9\\u5141\\u8BB8\\u5176\\u4ED6\\u4EE3\\u7801\\u540C\\u65F6\\u8FD0\\u884C\\u5E76\\u9632\\u6B62\\u963B\\u585E\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u540C\\u6B65\\u56DE\\u8C03\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u540C\\u6B65\\u56DE\\u8C03\\u5728\\u4F20\\u9012\\u7ED9\\u5B83\\u4EEC\\u7684\\u51FD\\u6570\\u4E2D\\u7ACB\\u5373\\u6267\\u884C\\u3002\\u5B83\\u4EEC\\u901A\\u5E38\\u7528\\u4E8E\\u9700\\u8981\\u5728\\u8FDB\\u5165\\u4E0B\\u4E00\\u884C\\u4EE3\\u7801\\u4E4B\\u524D\\u5B8C\\u6210\\u7684\\u4EFB\\u52A1\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet(name, callback) {\n  console.log('Hello ' + name);\n  callback();\n}\n\nfunction sayGoodbye() {\n  console.log('Goodbye!');\n}\n\ngreet('Alice', sayGoodbye);\n// Output:\n// Hello Alice\n// Goodbye!\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5F02\\u6B65\\u56DE\\u8C03\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F02\\u6B65\\u56DE\\u8C03\\u7528\\u4E8E\\u9700\\u8981\\u4E00\\u4E9B\\u65F6\\u95F4\\u624D\\u80FD\\u5B8C\\u6210\\u7684\\u64CD\\u4F5C\\uFF0C\\u4F8B\\u5982\\u8BFB\\u53D6\\u6587\\u4EF6\\u3001\\u53D1\\u51FA HTTP \\u8BF7\\u6C42\\u6216\\u5904\\u7406\\u4E8B\\u4EF6\\u3002\\u8FD9\\u4E9B\\u56DE\\u8C03\\u5728\\u5F02\\u6B65\\u64CD\\u4F5C\\u5B8C\\u6210\\u540E\\u6267\\u884C\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fetchData(callback) {\n  setTimeout(() => {\n    const data = { name: 'John Doe' };\n    callback(data);\n  }, 1000);\n}\n\nfunction handleData(data) {\n  console.log(data);\n}\n\nfetchData(handleData);\n// Output: { name: 'John Doe' } after 1 second\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5E38\\u89C1\\u7528\\u4F8B\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4E8B\\u4EF6\\u5904\\u7406\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u56DE\\u8C03\\u901A\\u5E38\\u7528\\u4E8E\\u4E8B\\u4EF6\\u5904\\u7406\\u3002\\u4F8B\\u5982\\uFF0C\\u5728 JavaScript \\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C06\\u56DE\\u8C03\\u51FD\\u6570\\u4F20\\u9012\\u7ED9\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const button = document.createElement('button');\n\nbutton.addEventListener('click', () => {\n  setTimeout(() => {\n    console.log('Button clicked after 1s');\n  }, 1000);\n});\n\nbutton.click();\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"API \\u8C03\\u7528\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u56DE\\u8C03\\u7ECF\\u5E38\\u7528\\u4E8E\\u8FDB\\u884C API \\u8C03\\u7528\\u4EE5\\u5904\\u7406\\u54CD\\u5E94\\u6570\\u636E\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function getUserData(userId, callback) {\n  fetch(\\`https://jsonplaceholder.typicode.com/todos/2\\`)\n    .then((response) => response.json())\n    .then((data) => callback(data))\n    .catch((error) => console.error('Error:', error));\n}\n\nfunction displayUserData(data) {\n  console.log(data);\n}\n\ngetUserData(1, displayUserData);\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5B9A\\u65F6\\u5668\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u56DE\\u8C03\\u51FD\\u6570\\u4E5F\\u7528\\u4E8E\\u8BA1\\u65F6\\u5668\\uFF0C\\u5982 \",(0,e.jsx)(n.code,{children:\"setTimeout\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"setInterval\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function sayHello() {\n  console.log('Hello, world!');\n}\n\nsetTimeout(sayHello, 2000); // 2 \\u79D2\\u540E\\uFF0CsayHello \\u56DE\\u8C03\\u51FD\\u6570\\u88AB\\u8C03\\u7528\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Callback_function\",children:\"MDN Web Docs: Callback function\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/callbacks\",children:\"JavaScript.info: Callbacks\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/11_async.html\",children:\"Eloquent JavaScript: Asynchronous Programming\"})}),`\n`]})]})}function h(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,{...a,children:(0,e.jsx)(d,{...a})}):d(a)}return j(v);})();\n;return Component;"
 }
\ No newline at end of file
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 8ccf3828c..b2e7de912 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-are-data-attributes-good-for/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var o in e)n(t,o,{get:e[o],enumerable:!0})},i=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!b.call(t,r)&&r!==o&&n(t,r,{get:()=>e[r],enumerable:!(s=u(e,r))||s.enumerable});return t};var w=(t,e,o)=>(o=t!=null?h(p(t)):{},i(e||!t||!t.__esModule?n(o,\"default\",{value:t,enumerable:!0}):o,t)),y=t=>i(n({},\"__esModule\",{value:!0}),t);var c=g((D,d)=>{d.exports=_jsx_runtime});var j={};f(j,{default:()=>M,frontmatter:()=>v});var a=w(c()),v={title:\"What are `data-` attributes good for?\"};function l(t){let e=Object.assign({p:\"p\",code:\"code\",a:\"a\",pre:\"pre\",strong:\"strong\"},t.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(e.p,{children:[\"Before JavaScript frameworks became popular, developers used \",(0,a.jsx)(e.code,{children:\"data-\"}),\" attributes to store extra data within the DOM itself, without other hacks such as non-standard attributes, extra properties on the DOM. It is intended to store custom data private to the page or application, for when there are no more appropriate attributes or elements.\"]}),`\n`,(0,a.jsxs)(e.p,{children:[\"Another common use case for \",(0,a.jsx)(e.code,{children:\"data-\"}),\" attributes is to store information used by third-party libraries or frameworks. For example, the Bootstrap library uses data attributes to cause \",(0,a.jsx)(e.code,{children:\"<button>\"}),\"s to trigger actions on a modal elsewhere on the page (\",(0,a.jsx)(e.a,{href:\"https://getbootstrap.com/docs/5.2/components/modal/#via-data-attributes\",children:\"example\"}),\").\"]}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-html\",children:`<button type=\"button\" data-bs-toggle=\"modal\" data-bs-target=\"#myModal\">\n  Launch modal\n</button>\n...\n<div class=\"modal fade\" id=\"myModal\">Modal contents</div>\n`})}),`\n`,(0,a.jsxs)(e.p,{children:[\"These days, using \",(0,a.jsx)(e.code,{children:\"data-\"}),' attributes is generally not encouraged. One reason is that users can modify the data attribute easily by using \"inspect element\" in the browser. The data model is better stored within JavaScript environment and have them kept in-sync with the DOM via virtual DOM reconciliation or two-way data binding possibly through a library or a framework.']}),`\n`,(0,a.jsxs)(e.p,{children:[\"However, one perfectly valid use of data attributes, is to add an identifier for \",(0,a.jsx)(e.strong,{children:\"end-to-end\"}),\" testing frameworks (e.g. Playwright, Puppeteer, Selenium), without adding classes or ID attributes just for tests which are primarily for other purposes. The element needs a way to be selected and something like \",(0,a.jsx)(e.code,{children:'data-test-id=\"my-element\"'}),\" is a valid way to do so without convoluting the semantic markup otherwise.\"]})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,a.jsx)(e,Object.assign({},t,{children:(0,a.jsx)(l,t)})):l(t)}var M=x;return y(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var o in e)n(t,o,{get:e[o],enumerable:!0})},i=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!g.call(t,r)&&r!==o&&n(t,r,{get:()=>e[r],enumerable:!(s=m(e,r))||s.enumerable});return t};var y=(t,e,o)=>(o=t!=null?u(b(t)):{},i(e||!t||!t.__esModule?n(o,\"default\",{value:t,enumerable:!0}):o,t)),v=t=>i(n({},\"__esModule\",{value:!0}),t);var c=f((D,d)=>{d.exports=_jsx_runtime});var M={};w(M,{default:()=>h,frontmatter:()=>x});var a=y(c()),x={title:\"What are `data-` attributes good for?\"};function l(t){let e={a:\"a\",code:\"code\",p:\"p\",pre:\"pre\",strong:\"strong\",...t.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(e.p,{children:[\"Before JavaScript frameworks became popular, developers used \",(0,a.jsx)(e.code,{children:\"data-\"}),\" attributes to store extra data within the DOM itself, without other hacks such as non-standard attributes, extra properties on the DOM. It is intended to store custom data private to the page or application, for when there are no more appropriate attributes or elements.\"]}),`\n`,(0,a.jsxs)(e.p,{children:[\"Another common use case for \",(0,a.jsx)(e.code,{children:\"data-\"}),\" attributes is to store information used by third-party libraries or frameworks. For example, the Bootstrap library uses data attributes to cause \",(0,a.jsx)(e.code,{children:\"<button>\"}),\"s to trigger actions on a modal elsewhere on the page (\",(0,a.jsx)(e.a,{href:\"https://getbootstrap.com/docs/5.2/components/modal/#via-data-attributes\",children:\"example\"}),\").\"]}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-html\",children:`<button type=\"button\" data-bs-toggle=\"modal\" data-bs-target=\"#myModal\">\n  Launch modal\n</button>\n...\n<div class=\"modal fade\" id=\"myModal\">Modal contents</div>\n`})}),`\n`,(0,a.jsxs)(e.p,{children:[\"These days, using \",(0,a.jsx)(e.code,{children:\"data-\"}),' attributes is generally not encouraged. One reason is that users can modify the data attribute easily by using \"inspect element\" in the browser. The data model is better stored within JavaScript environment and have them kept in-sync with the DOM via virtual DOM reconciliation or two-way data binding possibly through a library or a framework.']}),`\n`,(0,a.jsxs)(e.p,{children:[\"However, one perfectly valid use of data attributes, is to add an identifier for \",(0,a.jsx)(e.strong,{children:\"end-to-end\"}),\" testing frameworks (e.g. Playwright, Puppeteer, Selenium), without adding classes or ID attributes just for tests which are primarily for other purposes. The element needs a way to be selected and something like \",(0,a.jsx)(e.code,{children:'data-test-id=\"my-element\"'}),\" is a valid way to do so without convoluting the semantic markup otherwise.\"]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,a.jsx)(e,{...t,children:(0,a.jsx)(l,{...t})}):l(t)}return v(M);})();\n;return Component;"
 }
\ No newline at end of file
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 d8f1f3e41..d469f0036 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-are-data-attributes-good-for/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var h=(e,a)=>()=>(a||e((a={exports:{}}).exports,a),a.exports),f=(e,a)=>{for(var r in a)n(e,r,{get:a[r],enumerable:!0})},d=(e,a,r,s)=>{if(a&&typeof a==\"object\"||typeof a==\"function\")for(let t of p(a))!g.call(e,t)&&t!==r&&n(e,t,{get:()=>a[t],enumerable:!(s=u(a,t))||s.enumerable});return e};var v=(e,a,r)=>(r=e!=null?l(b(e)):{},d(a||!e||!e.__esModule?n(r,\"default\",{value:e,enumerable:!0}):r,e)),x=e=>d(n({},\"__esModule\",{value:!0}),e);var m=h((_,i)=>{i.exports=_jsx_runtime});var z={};f(z,{default:()=>j,frontmatter:()=>M});var o=v(m()),M={title:\"Para que servem os atributos `data-`?\"};function c(e){let a=Object.assign({p:\"p\",code:\"code\",a:\"a\",pre:\"pre\",strong:\"strong\"},e.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a.p,{children:\"Antes de os frameworks JavaScript se tornarem populares, os desenvolvedores usavam atributos data- para armazenar dados extras dentro do pr\\xF3prio DOM, sem outros hacks, como atributos n\\xE3o padr\\xE3o e propriedades extras no DOM. S\\xE3o destinados a armazenar dados personalizados privados para a p\\xE1gina ou aplica\\xE7\\xE3o, quando n\\xE3o h\\xE1 mais atributos ou elementos apropriados para isso.\"}),`\n`,(0,o.jsxs)(a.p,{children:[\"Outro caso comum de uso dos atributos \",(0,o.jsx)(a.code,{children:\"data-\"}),\" \\xE9 armazenar informa\\xE7\\xF5es usadas por bibliotecas ou frameworks de terceiros. Por exemplo, a biblioteca Bootstrap usa atributos de dados para causar \",(0,o.jsx)(a.code,{children:\"<button>\"}),\"s executar a\\xE7\\xF5es em um modal em outro lugar na p\\xE1gina (\",(0,o.jsx)(a.a,{href:\"https://getbootstrap.com/docs/5.2/components/modal/#via-data-attributes\",children:\"example\"}),\").\"]}),`\n`,(0,o.jsx)(a.pre,{children:(0,o.jsx)(a.code,{className:\"language-html\",children:`<button type=\"button\" data-bs-toggle=\"modal\" data-bs-target=\"#myModal\">\n  Iniciar modal\n</button>\n...\n<div class=\"modal fade\" id=\"myModal\">Conte\\xFAdo Modal</div>\n`})}),`\n`,(0,o.jsxs)(a.p,{children:[\"Hoje em dia, usar atributos \",(0,o.jsx)(a.code,{children:\"data-\"}),' geralmente n\\xE3o \\xE9 recomendado. Uma raz\\xE3o \\xE9 que os usu\\xE1rios podem modificar o atributo dos dados facilmente usando \"inspecionar elemento\" no navegador. O modelo de dados \\xE9 melhor armazenado dentro do ambiente JavaScript e mantido em sincronia com o DOM por meio de reconcilia\\xE7\\xE3o virtual do DOM ou binding de dados bidirecional, possivelmente por meio de uma biblioteca ou framework.']}),`\n`,(0,o.jsxs)(a.p,{children:[\"No entanto, um uso perfeitamente v\\xE1lido de atributos de dados \\xE9 adicionar um identificador para frameworks de teste \",(0,o.jsx)(a.strong,{children:\"end-to-end\"}),\" (por exemplo, Playwright, Puppeteer, Selenium), sem adicionar classes ou atributos ID apenas para testes que s\\xE3o principalmente para outros fins. O elemento precisa de uma maneira de ser selecionado e algo como \",(0,o.jsx)(a.code,{children:'data-test-id=\"meu-element\"'}),\" \\xE9 uma maneira v\\xE1lida de faz\\xEA-lo sem convoluir a marca\\xE7\\xE3o sem\\xE2ntica.\"]})]})}function O(e={}){let{wrapper:a}=e.components||{};return a?(0,o.jsx)(a,Object.assign({},e,{children:(0,o.jsx)(c,e)})):c(e)}var j=O;return x(z);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(e,a)=>()=>(a||e((a={exports:{}}).exports,a),a.exports),v=(e,a)=>{for(var r in a)n(e,r,{get:a[r],enumerable:!0})},s=(e,a,r,d)=>{if(a&&typeof a==\"object\"||typeof a==\"function\")for(let t of b(a))!g.call(e,t)&&t!==r&&n(e,t,{get:()=>a[t],enumerable:!(d=p(a,t))||d.enumerable});return e};var x=(e,a,r)=>(r=e!=null?u(h(e)):{},s(a||!e||!e.__esModule?n(r,\"default\",{value:e,enumerable:!0}):r,e)),M=e=>s(n({},\"__esModule\",{value:!0}),e);var m=f((_,i)=>{i.exports=_jsx_runtime});var D={};v(D,{default:()=>l,frontmatter:()=>z});var o=x(m()),z={title:\"Para que servem os atributos `data-`?\"};function c(e){let a={a:\"a\",code:\"code\",p:\"p\",pre:\"pre\",strong:\"strong\",...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a.p,{children:\"Antes de os frameworks JavaScript se tornarem populares, os desenvolvedores usavam atributos data- para armazenar dados extras dentro do pr\\xF3prio DOM, sem outros hacks, como atributos n\\xE3o padr\\xE3o e propriedades extras no DOM. S\\xE3o destinados a armazenar dados personalizados privados para a p\\xE1gina ou aplica\\xE7\\xE3o, quando n\\xE3o h\\xE1 mais atributos ou elementos apropriados para isso.\"}),`\n`,(0,o.jsxs)(a.p,{children:[\"Outro caso comum de uso dos atributos \",(0,o.jsx)(a.code,{children:\"data-\"}),\" \\xE9 armazenar informa\\xE7\\xF5es usadas por bibliotecas ou frameworks de terceiros. Por exemplo, a biblioteca Bootstrap usa atributos de dados para causar \",(0,o.jsx)(a.code,{children:\"<button>\"}),\"s executar a\\xE7\\xF5es em um modal em outro lugar na p\\xE1gina (\",(0,o.jsx)(a.a,{href:\"https://getbootstrap.com/docs/5.2/components/modal/#via-data-attributes\",children:\"example\"}),\").\"]}),`\n`,(0,o.jsx)(a.pre,{children:(0,o.jsx)(a.code,{className:\"language-html\",children:`<button type=\"button\" data-bs-toggle=\"modal\" data-bs-target=\"#myModal\">\n  Iniciar modal\n</button>\n...\n<div class=\"modal fade\" id=\"myModal\">Conte\\xFAdo Modal</div>\n`})}),`\n`,(0,o.jsxs)(a.p,{children:[\"Hoje em dia, usar atributos \",(0,o.jsx)(a.code,{children:\"data-\"}),' geralmente n\\xE3o \\xE9 recomendado. Uma raz\\xE3o \\xE9 que os usu\\xE1rios podem modificar o atributo dos dados facilmente usando \"inspecionar elemento\" no navegador. O modelo de dados \\xE9 melhor armazenado dentro do ambiente JavaScript e mantido em sincronia com o DOM por meio de reconcilia\\xE7\\xE3o virtual do DOM ou binding de dados bidirecional, possivelmente por meio de uma biblioteca ou framework.']}),`\n`,(0,o.jsxs)(a.p,{children:[\"No entanto, um uso perfeitamente v\\xE1lido de atributos de dados \\xE9 adicionar um identificador para frameworks de teste \",(0,o.jsx)(a.strong,{children:\"end-to-end\"}),\" (por exemplo, Playwright, Puppeteer, Selenium), sem adicionar classes ou atributos ID apenas para testes que s\\xE3o principalmente para outros fins. O elemento precisa de uma maneira de ser selecionado e algo como \",(0,o.jsx)(a.code,{children:'data-test-id=\"meu-element\"'}),\" \\xE9 uma maneira v\\xE1lida de faz\\xEA-lo sem convoluir a marca\\xE7\\xE3o sem\\xE2ntica.\"]})]})}function l(e={}){let{wrapper:a}=e.components||{};return a?(0,o.jsx)(a,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}return M(D);})();\n;return Component;"
 }
\ No newline at end of file
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 38823c1b8..412720b27 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-are-data-attributes-good-for/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),M=(e,t)=>{for(var a in t)d(e,a,{get:t[a],enumerable:!0})},c=(e,t,a,r)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let o of h(t))!g.call(e,o)&&o!==a&&d(e,o,{get:()=>t[o],enumerable:!(r=p(t,o))||r.enumerable});return e};var x=(e,t,a)=>(a=e!=null?m(u(e)):{},c(t||!e||!e.__esModule?d(a,\"default\",{value:e,enumerable:!0}):a,e)),f=e=>c(d({},\"__esModule\",{value:!0}),e);var i=b((v,s)=>{s.exports=_jsx_runtime});var y={};M(y,{default:()=>_,frontmatter:()=>j});var n=x(i()),j={title:\"data- \\u5C5E\\u6027\\u6709\\u4EC0\\u4E48\\u7528\\uFF1F\"};function l(e){let t=Object.assign({p:\"p\",code:\"code\",a:\"a\",pre:\"pre\",strong:\"strong\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:[\"\\u5728 JavaScript \\u6846\\u67B6\\u6D41\\u884C\\u4E4B\\u524D\\uFF0C\\u5F00\\u53D1\\u4EBA\\u5458\\u4F7F\\u7528 \",(0,n.jsx)(t.code,{children:\"data-\"}),\" \\u5C5E\\u6027\\u5728 DOM \\u672C\\u8EAB\\u4E2D\\u5B58\\u50A8\\u989D\\u5916\\u7684\\u6570\\u636E\\uFF0C\\u800C\\u65E0\\u9700\\u5176\\u4ED6\\u6280\\u5DE7\\uFF0C\\u4F8B\\u5982\\u975E\\u6807\\u51C6\\u5C5E\\u6027\\u3001DOM \\u4E0A\\u7684\\u989D\\u5916\\u5C5E\\u6027\\u3002\\u5B83\\u65E8\\u5728\\u5B58\\u50A8\\u9875\\u9762\\u6216\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E13\\u7528\\u7684\\u81EA\\u5B9A\\u4E49\\u6570\\u636E\\uFF0C\\u5F53\\u6CA1\\u6709\\u66F4\\u5408\\u9002\\u7684\\u5C5E\\u6027\\u6216\\u5143\\u7D20\\u65F6\\u3002\"]}),`\n`,(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:\"data-\"}),\" \\u5C5E\\u6027\\u7684\\u53E6\\u4E00\\u4E2A\\u5E38\\u89C1\\u7528\\u4F8B\\u662F\\u5B58\\u50A8\\u7B2C\\u4E09\\u65B9\\u5E93\\u6216\\u6846\\u67B6\\u4F7F\\u7528\\u7684\\u4FE1\\u606F\\u3002\\u4F8B\\u5982\\uFF0CBootstrap \\u5E93\\u4F7F\\u7528\\u6570\\u636E\\u5C5E\\u6027\\u4F7F \",(0,n.jsx)(t.code,{children:\"<button>\"}),\" \\u5728\\u9875\\u9762\\u4E0A\\u7684\\u5176\\u4ED6\\u4F4D\\u7F6E\\u89E6\\u53D1\\u6A21\\u6001\\u64CD\\u4F5C (\",(0,n.jsx)(t.a,{href:\"https://getbootstrap.com/docs/5.2/components/modal/#via-data-attributes\",children:\"\\u793A\\u4F8B\"}),\")\\u3002\"]}),`\n`,(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:\"language-html\",children:`<button type=\"button\" data-bs-toggle=\"modal\" data-bs-target=\"#myModal\">\n  Launch modal\n</button>\n...\n<div class=\"modal fade\" id=\"myModal\">Modal contents</div>\n`})}),`\n`,(0,n.jsxs)(t.p,{children:[\"\\u5982\\u4ECA\\uFF0C\\u901A\\u5E38\\u4E0D\\u9F13\\u52B1\\u4F7F\\u7528 \",(0,n.jsx)(t.code,{children:\"data-\"}),\" \\u5C5E\\u6027\\u3002\\u539F\\u56E0\\u4E4B\\u4E00\\u662F\\u7528\\u6237\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u4F7F\\u7528\\u201C\\u68C0\\u67E5\\u5143\\u7D20\\u201D\\u6765\\u8F7B\\u677E\\u4FEE\\u6539\\u6570\\u636E\\u5C5E\\u6027\\u3002\\u6570\\u636E\\u6A21\\u578B\\u6700\\u597D\\u5B58\\u50A8\\u5728 JavaScript \\u73AF\\u5883\\u4E2D\\uFF0C\\u5E76\\u901A\\u8FC7\\u865A\\u62DF DOM \\u534F\\u8C03\\u6216\\u53CC\\u5411\\u6570\\u636E\\u7ED1\\u5B9A\\uFF08\\u53EF\\u80FD\\u901A\\u8FC7\\u5E93\\u6216\\u6846\\u67B6\\uFF09\\u4F7F\\u5B83\\u4EEC\\u4E0E DOM \\u4FDD\\u6301\\u540C\\u6B65\\u3002\"]}),`\n`,(0,n.jsxs)(t.p,{children:[\"\\u4F46\\u662F\\uFF0C\\u6570\\u636E\\u5C5E\\u6027\\u7684\\u4E00\\u4E2A\\u5B8C\\u5168\\u6709\\u6548\\u7684\\u7528\\u9014\\u662F\\u4E3A \",(0,n.jsx)(t.strong,{children:\"\\u7AEF\\u5230\\u7AEF\"}),\" \\u6D4B\\u8BD5\\u6846\\u67B6\\uFF08\\u4F8B\\u5982 Playwright\\u3001Puppeteer\\u3001Selenium\\uFF09\\u6DFB\\u52A0\\u4E00\\u4E2A\\u6807\\u8BC6\\u7B26\\uFF0C\\u800C\\u65E0\\u9700\\u4EC5\\u4E3A\\u4E3B\\u8981\\u7528\\u4E8E\\u5176\\u4ED6\\u76EE\\u7684\\u7684\\u6D4B\\u8BD5\\u6DFB\\u52A0\\u7C7B\\u6216 ID \\u5C5E\\u6027\\u3002\\u8BE5\\u5143\\u7D20\\u9700\\u8981\\u4E00\\u79CD\\u88AB\\u9009\\u62E9\\u7684\\u65B9\\u5F0F\\uFF0C\\u800C\\u7C7B\\u4F3C \",(0,n.jsx)(t.code,{children:'data-test-id=\"my-element\"'}),\" \\u7684\\u65B9\\u5F0F\\u662F\\u4E00\\u79CD\\u6709\\u6548\\u7684\\u65B9\\u5F0F\\uFF0C\\u53EF\\u4EE5\\u5728\\u4E0D\\u4F7F\\u8BED\\u4E49\\u6807\\u8BB0\\u590D\\u6742\\u5316\\u7684\\u524D\\u63D0\\u4E0B\\u5B9E\\u73B0\\u3002\"]})]})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(l,e)})):l(e)}var _=D;return f(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var x=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),b=(e,t)=>{for(var a in t)d(e,a,{get:t[a],enumerable:!0})},c=(e,t,a,r)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let o of u(t))!M.call(e,o)&&o!==a&&d(e,o,{get:()=>t[o],enumerable:!(r=h(t,o))||r.enumerable});return e};var f=(e,t,a)=>(a=e!=null?p(g(e)):{},c(t||!e||!e.__esModule?d(a,\"default\",{value:e,enumerable:!0}):a,e)),D=e=>c(d({},\"__esModule\",{value:!0}),e);var s=x((v,l)=>{l.exports=_jsx_runtime});var y={};b(y,{default:()=>m,frontmatter:()=>_});var n=f(s()),_={title:\"data- \\u5C5E\\u6027\\u6709\\u4EC0\\u4E48\\u7528\\uFF1F\"};function i(e){let t={a:\"a\",code:\"code\",p:\"p\",pre:\"pre\",strong:\"strong\",...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:[\"\\u5728 JavaScript \\u6846\\u67B6\\u6D41\\u884C\\u4E4B\\u524D\\uFF0C\\u5F00\\u53D1\\u4EBA\\u5458\\u4F7F\\u7528 \",(0,n.jsx)(t.code,{children:\"data-\"}),\" \\u5C5E\\u6027\\u5728 DOM \\u672C\\u8EAB\\u4E2D\\u5B58\\u50A8\\u989D\\u5916\\u7684\\u6570\\u636E\\uFF0C\\u800C\\u65E0\\u9700\\u5176\\u4ED6\\u6280\\u5DE7\\uFF0C\\u4F8B\\u5982\\u975E\\u6807\\u51C6\\u5C5E\\u6027\\u3001DOM \\u4E0A\\u7684\\u989D\\u5916\\u5C5E\\u6027\\u3002\\u5B83\\u65E8\\u5728\\u5B58\\u50A8\\u9875\\u9762\\u6216\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E13\\u7528\\u7684\\u81EA\\u5B9A\\u4E49\\u6570\\u636E\\uFF0C\\u5F53\\u6CA1\\u6709\\u66F4\\u5408\\u9002\\u7684\\u5C5E\\u6027\\u6216\\u5143\\u7D20\\u65F6\\u3002\"]}),`\n`,(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:\"data-\"}),\" \\u5C5E\\u6027\\u7684\\u53E6\\u4E00\\u4E2A\\u5E38\\u89C1\\u7528\\u4F8B\\u662F\\u5B58\\u50A8\\u7B2C\\u4E09\\u65B9\\u5E93\\u6216\\u6846\\u67B6\\u4F7F\\u7528\\u7684\\u4FE1\\u606F\\u3002\\u4F8B\\u5982\\uFF0CBootstrap \\u5E93\\u4F7F\\u7528\\u6570\\u636E\\u5C5E\\u6027\\u4F7F \",(0,n.jsx)(t.code,{children:\"<button>\"}),\" \\u5728\\u9875\\u9762\\u4E0A\\u7684\\u5176\\u4ED6\\u4F4D\\u7F6E\\u89E6\\u53D1\\u6A21\\u6001\\u64CD\\u4F5C (\",(0,n.jsx)(t.a,{href:\"https://getbootstrap.com/docs/5.2/components/modal/#via-data-attributes\",children:\"\\u793A\\u4F8B\"}),\")\\u3002\"]}),`\n`,(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:\"language-html\",children:`<button type=\"button\" data-bs-toggle=\"modal\" data-bs-target=\"#myModal\">\n  Launch modal\n</button>\n...\n<div class=\"modal fade\" id=\"myModal\">Modal contents</div>\n`})}),`\n`,(0,n.jsxs)(t.p,{children:[\"\\u5982\\u4ECA\\uFF0C\\u901A\\u5E38\\u4E0D\\u9F13\\u52B1\\u4F7F\\u7528 \",(0,n.jsx)(t.code,{children:\"data-\"}),\" \\u5C5E\\u6027\\u3002\\u539F\\u56E0\\u4E4B\\u4E00\\u662F\\u7528\\u6237\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u4F7F\\u7528\\u201C\\u68C0\\u67E5\\u5143\\u7D20\\u201D\\u6765\\u8F7B\\u677E\\u4FEE\\u6539\\u6570\\u636E\\u5C5E\\u6027\\u3002\\u6570\\u636E\\u6A21\\u578B\\u6700\\u597D\\u5B58\\u50A8\\u5728 JavaScript \\u73AF\\u5883\\u4E2D\\uFF0C\\u5E76\\u901A\\u8FC7\\u865A\\u62DF DOM \\u534F\\u8C03\\u6216\\u53CC\\u5411\\u6570\\u636E\\u7ED1\\u5B9A\\uFF08\\u53EF\\u80FD\\u901A\\u8FC7\\u5E93\\u6216\\u6846\\u67B6\\uFF09\\u4F7F\\u5B83\\u4EEC\\u4E0E DOM \\u4FDD\\u6301\\u540C\\u6B65\\u3002\"]}),`\n`,(0,n.jsxs)(t.p,{children:[\"\\u4F46\\u662F\\uFF0C\\u6570\\u636E\\u5C5E\\u6027\\u7684\\u4E00\\u4E2A\\u5B8C\\u5168\\u6709\\u6548\\u7684\\u7528\\u9014\\u662F\\u4E3A \",(0,n.jsx)(t.strong,{children:\"\\u7AEF\\u5230\\u7AEF\"}),\" \\u6D4B\\u8BD5\\u6846\\u67B6\\uFF08\\u4F8B\\u5982 Playwright\\u3001Puppeteer\\u3001Selenium\\uFF09\\u6DFB\\u52A0\\u4E00\\u4E2A\\u6807\\u8BC6\\u7B26\\uFF0C\\u800C\\u65E0\\u9700\\u4EC5\\u4E3A\\u4E3B\\u8981\\u7528\\u4E8E\\u5176\\u4ED6\\u76EE\\u7684\\u7684\\u6D4B\\u8BD5\\u6DFB\\u52A0\\u7C7B\\u6216 ID \\u5C5E\\u6027\\u3002\\u8BE5\\u5143\\u7D20\\u9700\\u8981\\u4E00\\u79CD\\u88AB\\u9009\\u62E9\\u7684\\u65B9\\u5F0F\\uFF0C\\u800C\\u7C7B\\u4F3C \",(0,n.jsx)(t.code,{children:'data-test-id=\"my-element\"'}),\" \\u7684\\u65B9\\u5F0F\\u662F\\u4E00\\u79CD\\u6709\\u6548\\u7684\\u65B9\\u5F0F\\uFF0C\\u53EF\\u4EE5\\u5728\\u4E0D\\u4F7F\\u8BED\\u4E49\\u6807\\u8BB0\\u590D\\u6742\\u5316\\u7684\\u524D\\u63D0\\u4E0B\\u5B9E\\u73B0\\u3002\"]})]})}function m(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(i,{...e})}):i(e)}return D(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-default-parameters-and-how-are-they-used/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-default-parameters-and-how-are-they-used/en-US.json
index 3e448dfad..9fe53a71f 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-default-parameters-and-how-are-they-used/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-default-parameters-and-how-are-they-used/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-default-parameters-and-how-are-they-used/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),v=(a,e)=>{for(var t in e)l(a,t,{get:e[t],enumerable:!0})},s=(a,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!m.call(a,r)&&r!==t&&l(a,r,{get:()=>e[r],enumerable:!(i=h(e,r))||i.enumerable});return a};var b=(a,e,t)=>(t=a!=null?u(f(a)):{},s(e||!a||!a.__esModule?l(t,\"default\",{value:a,enumerable:!0}):t,a)),x=a=>s(l({},\"__esModule\",{value:!0}),a);var o=g((D,d)=>{d.exports=_jsx_runtime});var A={};v(A,{default:()=>j,frontmatter:()=>w});var n=b(o()),w={title:\"What are default parameters and how are they used?\"};function c(a){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},a.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Default parameters in JavaScript allow you to set default values for function parameters if no value or \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" is passed. This helps avoid \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" values and makes your code more robust. You can define default parameters by assigning a value to the parameter in the function definition.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet(name = 'Guest') {\n  console.log(\\`Hello, \\${name}!\\`);\n}\n\ngreet(); // Output: Hello, Guest!\ngreet('Alice'); // Output: Hello, Alice!\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Default parameters\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Default parameters in JavaScript provide a way to set default values for function parameters. This feature was introduced in ECMAScript 2015 (ES6) and helps to make functions more robust and easier to work with by avoiding \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" values when no arguments are passed.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can define default parameters by assigning a value to the parameter in the function definition. If no value or \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" is passed for that parameter, the default value will be used.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function functionName(parameter1 = defaultValue1, parameter2 = defaultValue2) {\n  // function body\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here is a simple example to illustrate how default parameters work:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet(name = 'Guest') {\n  console.log(\\`Hello, \\${name}!\\`);\n}\n\ngreet(); // Output: Hello, Guest!\ngreet('Alice'); // Output: Hello, Alice!\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the \",(0,n.jsx)(e.code,{children:\"greet\"}),\" function has a default parameter \",(0,n.jsx)(e.code,{children:\"name\"}),\" with a default value of \",(0,n.jsx)(e.code,{children:\"'Guest'\"}),\". When the function is called without any arguments, it uses the default value. When an argument is provided, it overrides the default value.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Multiple default parameters\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can also define multiple default parameters in a function:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function createUser(username = 'Anonymous', age = 18) {\n  console.log(\\`Username: \\${username}, Age: \\${age}\\`);\n}\n\ncreateUser(); // Output: Username: Anonymous, Age: 18\ncreateUser('John'); // Output: Username: John, Age: 18\ncreateUser('John', 25); // Output: Username: John, Age: 25\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the \",(0,n.jsx)(e.code,{children:\"createUser\"}),\" function has two default parameters: \",(0,n.jsx)(e.code,{children:\"username\"}),\" and \",(0,n.jsx)(e.code,{children:\"age\"}),\". If no arguments are passed, both default values are used. If only one argument is passed, the second parameter uses its default value.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Using expressions as default values\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can also use expressions as default values for parameters:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function add(a = 0, b = a + 1) {\n  return a + b;\n}\n\nconsole.log(add()); // Output: 1\nconsole.log(add(5)); // Output: 11\nconsole.log(add(5, 10)); // Output: 15\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the default value for \",(0,n.jsx)(e.code,{children:\"b\"}),\" is an expression that depends on the value of \",(0,n.jsx)(e.code,{children:\"a\"}),\". If no arguments are passed, \",(0,n.jsx)(e.code,{children:\"a\"}),\" is \",(0,n.jsx)(e.code,{children:\"0\"}),\" and \",(0,n.jsx)(e.code,{children:\"b\"}),\" is \",(0,n.jsx)(e.code,{children:\"1\"}),\". If only \",(0,n.jsx)(e.code,{children:\"a\"}),\" is passed, \",(0,n.jsx)(e.code,{children:\"b\"}),\" is \",(0,n.jsx)(e.code,{children:\"a + 1\"}),\". If both \",(0,n.jsx)(e.code,{children:\"a\"}),\" and \",(0,n.jsx)(e.code,{children:\"b\"}),\" are passed, the provided values are used.\"]}),`\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/Web/JavaScript/Reference/Functions/Default_parameters\",children:\"MDN Web Docs: Default parameters\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/function-basics#default-values\",children:\"JavaScript.info: Default parameters\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.ecma-international.org/ecma-262/6.0/#sec-function-definitions\",children:\"ECMAScript 2015 (ES6) specification\"})}),`\n`]})]})}function y(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(c,a)})):c(a)}var j=y;return x(A);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),b=(a,e)=>{for(var t in e)l(a,t,{get:e[t],enumerable:!0})},s=(a,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!g.call(a,r)&&r!==t&&l(a,r,{get:()=>e[r],enumerable:!(i=p(e,r))||i.enumerable});return a};var x=(a,e,t)=>(t=a!=null?h(m(a)):{},s(e||!a||!a.__esModule?l(t,\"default\",{value:a,enumerable:!0}):t,a)),w=a=>s(l({},\"__esModule\",{value:!0}),a);var o=v((D,d)=>{d.exports=_jsx_runtime});var A={};b(A,{default:()=>u,frontmatter:()=>y});var n=x(o()),y={title:\"What are default parameters and how are they used?\"};function c(a){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...a.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Default parameters in JavaScript allow you to set default values for function parameters if no value or \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" is passed. This helps avoid \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" values and makes your code more robust. You can define default parameters by assigning a value to the parameter in the function definition.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet(name = 'Guest') {\n  console.log(\\`Hello, \\${name}!\\`);\n}\n\ngreet(); // Output: Hello, Guest!\ngreet('Alice'); // Output: Hello, Alice!\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Default parameters\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Default parameters in JavaScript provide a way to set default values for function parameters. This feature was introduced in ECMAScript 2015 (ES6) and helps to make functions more robust and easier to work with by avoiding \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" values when no arguments are passed.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can define default parameters by assigning a value to the parameter in the function definition. If no value or \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" is passed for that parameter, the default value will be used.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function functionName(parameter1 = defaultValue1, parameter2 = defaultValue2) {\n  // function body\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here is a simple example to illustrate how default parameters work:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet(name = 'Guest') {\n  console.log(\\`Hello, \\${name}!\\`);\n}\n\ngreet(); // Output: Hello, Guest!\ngreet('Alice'); // Output: Hello, Alice!\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the \",(0,n.jsx)(e.code,{children:\"greet\"}),\" function has a default parameter \",(0,n.jsx)(e.code,{children:\"name\"}),\" with a default value of \",(0,n.jsx)(e.code,{children:\"'Guest'\"}),\". When the function is called without any arguments, it uses the default value. When an argument is provided, it overrides the default value.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Multiple default parameters\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can also define multiple default parameters in a function:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function createUser(username = 'Anonymous', age = 18) {\n  console.log(\\`Username: \\${username}, Age: \\${age}\\`);\n}\n\ncreateUser(); // Output: Username: Anonymous, Age: 18\ncreateUser('John'); // Output: Username: John, Age: 18\ncreateUser('John', 25); // Output: Username: John, Age: 25\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the \",(0,n.jsx)(e.code,{children:\"createUser\"}),\" function has two default parameters: \",(0,n.jsx)(e.code,{children:\"username\"}),\" and \",(0,n.jsx)(e.code,{children:\"age\"}),\". If no arguments are passed, both default values are used. If only one argument is passed, the second parameter uses its default value.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Using expressions as default values\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can also use expressions as default values for parameters:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function add(a = 0, b = a + 1) {\n  return a + b;\n}\n\nconsole.log(add()); // Output: 1\nconsole.log(add(5)); // Output: 11\nconsole.log(add(5, 10)); // Output: 15\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the default value for \",(0,n.jsx)(e.code,{children:\"b\"}),\" is an expression that depends on the value of \",(0,n.jsx)(e.code,{children:\"a\"}),\". If no arguments are passed, \",(0,n.jsx)(e.code,{children:\"a\"}),\" is \",(0,n.jsx)(e.code,{children:\"0\"}),\" and \",(0,n.jsx)(e.code,{children:\"b\"}),\" is \",(0,n.jsx)(e.code,{children:\"1\"}),\". If only \",(0,n.jsx)(e.code,{children:\"a\"}),\" is passed, \",(0,n.jsx)(e.code,{children:\"b\"}),\" is \",(0,n.jsx)(e.code,{children:\"a + 1\"}),\". If both \",(0,n.jsx)(e.code,{children:\"a\"}),\" and \",(0,n.jsx)(e.code,{children:\"b\"}),\" are passed, the provided values are used.\"]}),`\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/Web/JavaScript/Reference/Functions/Default_parameters\",children:\"MDN Web Docs: Default parameters\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/function-basics#default-values\",children:\"JavaScript.info: Default parameters\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.ecma-international.org/ecma-262/6.0/#sec-function-definitions\",children:\"ECMAScript 2015 (ES6) specification\"})}),`\n`]})]})}function u(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(c,{...a})}):c(a)}return w(A);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-default-parameters-and-how-are-they-used/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-default-parameters-and-how-are-they-used/zh-CN.json
index 3252917af..f4586962c 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-default-parameters-and-how-are-they-used/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-default-parameters-and-how-are-they-used/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-default-parameters-and-how-are-they-used/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var d=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),j=(c,e)=>{for(var r in e)d(c,r,{get:e[r],enumerable:!0})},t=(c,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of p(e))!m.call(c,l)&&l!==r&&d(c,l,{get:()=>e[l],enumerable:!(i=s(e,l))||i.enumerable});return c};var b=(c,e,r)=>(r=c!=null?u(g(c)):{},t(e||!c||!c.__esModule?d(r,\"default\",{value:c,enumerable:!0}):r,c)),A=c=>t(d({},\"__esModule\",{value:!0}),c);var o=f((N,a)=>{a.exports=_jsx_runtime});var U={};j(U,{default:()=>x,frontmatter:()=>O});var n=b(o()),O={title:\"\\u4EC0\\u4E48\\u662F\\u9ED8\\u8BA4\\u53C2\\u6570\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u4EEC\\uFF1F\"};function h(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684\\u9ED8\\u8BA4\\u53C2\\u6570\\u5141\\u8BB8\\u60A8\\u4E3A\\u51FD\\u6570\\u53C2\\u6570\\u8BBE\\u7F6E\\u9ED8\\u8BA4\\u503C\\uFF0C\\u5982\\u679C\\u6CA1\\u6709\\u4F20\\u9012\\u4EFB\\u4F55\\u503C\\u6216 \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u3002\\u8FD9\\u6709\\u52A9\\u4E8E\\u907F\\u514D \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" \\u503C\\uFF0C\\u5E76\\u4F7F\\u60A8\\u7684\\u4EE3\\u7801\\u66F4\\u5065\\u58EE\\u3002\\u60A8\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728\\u51FD\\u6570\\u5B9A\\u4E49\\u4E2D\\u4E3A\\u53C2\\u6570\\u8D4B\\u503C\\u6765\\u5B9A\\u4E49\\u9ED8\\u8BA4\\u53C2\\u6570\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet(name = 'Guest') {\n  console.log(\\`Hello, \\${name}!\\`);\n}\n\ngreet(); // Output: Hello, Guest!\ngreet('Alice'); // Output: Hello, Alice!\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u9ED8\\u8BA4\\u53C2\\u6570\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684\\u9ED8\\u8BA4\\u53C2\\u6570\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u4E3A\\u51FD\\u6570\\u53C2\\u6570\\u8BBE\\u7F6E\\u9ED8\\u8BA4\\u503C\\u7684\\u65B9\\u6CD5\\u3002\\u6B64\\u529F\\u80FD\\u662F\\u5728 ECMAScript 2015 (ES6) \\u4E2D\\u5F15\\u5165\\u7684\\uFF0C\\u901A\\u8FC7\\u907F\\u514D\\u672A\\u4F20\\u9012\\u4EFB\\u4F55\\u53C2\\u6570\\u65F6\\u51FA\\u73B0 \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" \\u503C\\uFF0C\\u6709\\u52A9\\u4E8E\\u4F7F\\u51FD\\u6570\\u66F4\\u5065\\u58EE\\u4E14\\u66F4\\u6613\\u4E8E\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728\\u51FD\\u6570\\u5B9A\\u4E49\\u4E2D\\u4E3A\\u53C2\\u6570\\u8D4B\\u503C\\u6765\\u5B9A\\u4E49\\u9ED8\\u8BA4\\u53C2\\u6570\\u3002\\u5982\\u679C\\u672A\\u4F20\\u9012\\u8BE5\\u53C2\\u6570\\u7684\\u503C\\u6216 \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\uFF0C\\u5219\\u5C06\\u4F7F\\u7528\\u9ED8\\u8BA4\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function functionName(parameter1 = defaultValue1, parameter2 = defaultValue2) {\n  // function body\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u793A\\u4F8B\\uFF0C\\u8BF4\\u660E\\u9ED8\\u8BA4\\u53C2\\u6570\\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet(name = 'Guest') {\n  console.log(\\`Hello, \\${name}!\\`);\n}\n\ngreet(); // Output: Hello, Guest!\ngreet('Alice'); // Output: Hello, Alice!\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"greet\"}),\" \\u51FD\\u6570\\u6709\\u4E00\\u4E2A\\u9ED8\\u8BA4\\u53C2\\u6570 \",(0,n.jsx)(e.code,{children:\"name\"}),\"\\uFF0C\\u5176\\u9ED8\\u8BA4\\u503C\\u4E3A \",(0,n.jsx)(e.code,{children:\"'Guest'\"}),\"\\u3002\\u5F53\\u4E0D\\u5E26\\u4EFB\\u4F55\\u53C2\\u6570\\u8C03\\u7528\\u8BE5\\u51FD\\u6570\\u65F6\\uFF0C\\u5B83\\u4F7F\\u7528\\u9ED8\\u8BA4\\u503C\\u3002\\u5F53\\u63D0\\u4F9B\\u53C2\\u6570\\u65F6\\uFF0C\\u5B83\\u4F1A\\u8986\\u76D6\\u9ED8\\u8BA4\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u591A\\u4E2A\\u9ED8\\u8BA4\\u53C2\\u6570\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u5728\\u4E00\\u4E2A\\u51FD\\u6570\\u4E2D\\u5B9A\\u4E49\\u591A\\u4E2A\\u9ED8\\u8BA4\\u53C2\\u6570\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function createUser(username = 'Anonymous', age = 18) {\n  console.log(\\`Username: \\${username}, Age: \\${age}\\`);\n}\n\ncreateUser(); // Output: Username: Anonymous, Age: 18\ncreateUser('John'); // Output: Username: John, Age: 18\ncreateUser('John', 25); // Output: Username: John, Age: 25\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"createUser\"}),\" \\u51FD\\u6570\\u6709\\u4E24\\u4E2A\\u9ED8\\u8BA4\\u53C2\\u6570\\uFF1A\",(0,n.jsx)(e.code,{children:\"username\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"age\"}),\"\\u3002\\u5982\\u679C\\u672A\\u4F20\\u9012\\u4EFB\\u4F55\\u53C2\\u6570\\uFF0C\\u5219\\u4F7F\\u7528\\u4E24\\u4E2A\\u9ED8\\u8BA4\\u503C\\u3002\\u5982\\u679C\\u4EC5\\u4F20\\u9012\\u4E00\\u4E2A\\u53C2\\u6570\\uFF0C\\u5219\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u4F7F\\u7528\\u5176\\u9ED8\\u8BA4\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u8868\\u8FBE\\u5F0F\\u4F5C\\u4E3A\\u9ED8\\u8BA4\\u503C\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u4F7F\\u7528\\u8868\\u8FBE\\u5F0F\\u4F5C\\u4E3A\\u53C2\\u6570\\u7684\\u9ED8\\u8BA4\\u503C\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function add(a = 0, b = a + 1) {\n  return a + b;\n}\n\nconsole.log(add()); // Output: 1\nconsole.log(add(5)); // Output: 11\nconsole.log(add(5, 10)); // Output: 15\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"b\"}),\" \\u7684\\u9ED8\\u8BA4\\u503C\\u662F\\u4E00\\u4E2A\\u4F9D\\u8D56\\u4E8E \",(0,n.jsx)(e.code,{children:\"a\"}),\" \\u503C\\u7684\\u8868\\u8FBE\\u5F0F\\u3002\\u5982\\u679C\\u6CA1\\u6709\\u4F20\\u9012\\u53C2\\u6570\\uFF0C\",(0,n.jsx)(e.code,{children:\"a\"}),\" \\u662F \",(0,n.jsx)(e.code,{children:\"0\"}),\"\\uFF0C\",(0,n.jsx)(e.code,{children:\"b\"}),\" \\u662F \",(0,n.jsx)(e.code,{children:\"1\"}),\"\\u3002\\u5982\\u679C\\u53EA\\u4F20\\u9012\\u4E86 \",(0,n.jsx)(e.code,{children:\"a\"}),\"\\uFF0C\",(0,n.jsx)(e.code,{children:\"b\"}),\" \\u662F \",(0,n.jsx)(e.code,{children:\"a + 1\"}),\"\\u3002\\u5982\\u679C\\u540C\\u65F6\\u4F20\\u9012\\u4E86 \",(0,n.jsx)(e.code,{children:\"a\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"b\"}),\"\\uFF0C\\u5219\\u4F7F\\u7528\\u63D0\\u4F9B\\u7684\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters\",children:\"MDN Web \\u6587\\u6863\\uFF1A\\u9ED8\\u8BA4\\u53C2\\u6570\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/function-basics#default-values\",children:\"JavaScript.info\\uFF1A\\u9ED8\\u8BA4\\u53C2\\u6570\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.ecma-international.org/ecma-262/6.0/#sec-function-definitions\",children:\"ECMAScript 2015 (ES6) \\u89C4\\u8303\"})}),`\n`]})]})}function v(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(h,c)})):h(c)}var x=v;return A(U);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var A=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),j=(c,e)=>{for(var r in e)d(c,r,{get:e[r],enumerable:!0})},t=(c,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of m(e))!f.call(c,l)&&l!==r&&d(c,l,{get:()=>e[l],enumerable:!(i=p(e,l))||i.enumerable});return c};var v=(c,e,r)=>(r=c!=null?s(g(c)):{},t(e||!c||!c.__esModule?d(r,\"default\",{value:c,enumerable:!0}):r,c)),b=c=>t(d({},\"__esModule\",{value:!0}),c);var o=A((J,a)=>{a.exports=_jsx_runtime});var x={};j(x,{default:()=>u,frontmatter:()=>O});var n=v(o()),O={title:\"\\u4EC0\\u4E48\\u662F\\u9ED8\\u8BA4\\u53C2\\u6570\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u4EEC\\uFF1F\"};function h(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684\\u9ED8\\u8BA4\\u53C2\\u6570\\u5141\\u8BB8\\u60A8\\u4E3A\\u51FD\\u6570\\u53C2\\u6570\\u8BBE\\u7F6E\\u9ED8\\u8BA4\\u503C\\uFF0C\\u5982\\u679C\\u6CA1\\u6709\\u4F20\\u9012\\u4EFB\\u4F55\\u503C\\u6216 \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u3002\\u8FD9\\u6709\\u52A9\\u4E8E\\u907F\\u514D \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" \\u503C\\uFF0C\\u5E76\\u4F7F\\u60A8\\u7684\\u4EE3\\u7801\\u66F4\\u5065\\u58EE\\u3002\\u60A8\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728\\u51FD\\u6570\\u5B9A\\u4E49\\u4E2D\\u4E3A\\u53C2\\u6570\\u8D4B\\u503C\\u6765\\u5B9A\\u4E49\\u9ED8\\u8BA4\\u53C2\\u6570\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet(name = 'Guest') {\n  console.log(\\`Hello, \\${name}!\\`);\n}\n\ngreet(); // Output: Hello, Guest!\ngreet('Alice'); // Output: Hello, Alice!\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u9ED8\\u8BA4\\u53C2\\u6570\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684\\u9ED8\\u8BA4\\u53C2\\u6570\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u4E3A\\u51FD\\u6570\\u53C2\\u6570\\u8BBE\\u7F6E\\u9ED8\\u8BA4\\u503C\\u7684\\u65B9\\u6CD5\\u3002\\u6B64\\u529F\\u80FD\\u662F\\u5728 ECMAScript 2015 (ES6) \\u4E2D\\u5F15\\u5165\\u7684\\uFF0C\\u901A\\u8FC7\\u907F\\u514D\\u672A\\u4F20\\u9012\\u4EFB\\u4F55\\u53C2\\u6570\\u65F6\\u51FA\\u73B0 \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" \\u503C\\uFF0C\\u6709\\u52A9\\u4E8E\\u4F7F\\u51FD\\u6570\\u66F4\\u5065\\u58EE\\u4E14\\u66F4\\u6613\\u4E8E\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728\\u51FD\\u6570\\u5B9A\\u4E49\\u4E2D\\u4E3A\\u53C2\\u6570\\u8D4B\\u503C\\u6765\\u5B9A\\u4E49\\u9ED8\\u8BA4\\u53C2\\u6570\\u3002\\u5982\\u679C\\u672A\\u4F20\\u9012\\u8BE5\\u53C2\\u6570\\u7684\\u503C\\u6216 \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\uFF0C\\u5219\\u5C06\\u4F7F\\u7528\\u9ED8\\u8BA4\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function functionName(parameter1 = defaultValue1, parameter2 = defaultValue2) {\n  // function body\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u793A\\u4F8B\\uFF0C\\u8BF4\\u660E\\u9ED8\\u8BA4\\u53C2\\u6570\\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet(name = 'Guest') {\n  console.log(\\`Hello, \\${name}!\\`);\n}\n\ngreet(); // Output: Hello, Guest!\ngreet('Alice'); // Output: Hello, Alice!\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"greet\"}),\" \\u51FD\\u6570\\u6709\\u4E00\\u4E2A\\u9ED8\\u8BA4\\u53C2\\u6570 \",(0,n.jsx)(e.code,{children:\"name\"}),\"\\uFF0C\\u5176\\u9ED8\\u8BA4\\u503C\\u4E3A \",(0,n.jsx)(e.code,{children:\"'Guest'\"}),\"\\u3002\\u5F53\\u4E0D\\u5E26\\u4EFB\\u4F55\\u53C2\\u6570\\u8C03\\u7528\\u8BE5\\u51FD\\u6570\\u65F6\\uFF0C\\u5B83\\u4F7F\\u7528\\u9ED8\\u8BA4\\u503C\\u3002\\u5F53\\u63D0\\u4F9B\\u53C2\\u6570\\u65F6\\uFF0C\\u5B83\\u4F1A\\u8986\\u76D6\\u9ED8\\u8BA4\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u591A\\u4E2A\\u9ED8\\u8BA4\\u53C2\\u6570\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u5728\\u4E00\\u4E2A\\u51FD\\u6570\\u4E2D\\u5B9A\\u4E49\\u591A\\u4E2A\\u9ED8\\u8BA4\\u53C2\\u6570\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function createUser(username = 'Anonymous', age = 18) {\n  console.log(\\`Username: \\${username}, Age: \\${age}\\`);\n}\n\ncreateUser(); // Output: Username: Anonymous, Age: 18\ncreateUser('John'); // Output: Username: John, Age: 18\ncreateUser('John', 25); // Output: Username: John, Age: 25\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"createUser\"}),\" \\u51FD\\u6570\\u6709\\u4E24\\u4E2A\\u9ED8\\u8BA4\\u53C2\\u6570\\uFF1A\",(0,n.jsx)(e.code,{children:\"username\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"age\"}),\"\\u3002\\u5982\\u679C\\u672A\\u4F20\\u9012\\u4EFB\\u4F55\\u53C2\\u6570\\uFF0C\\u5219\\u4F7F\\u7528\\u4E24\\u4E2A\\u9ED8\\u8BA4\\u503C\\u3002\\u5982\\u679C\\u4EC5\\u4F20\\u9012\\u4E00\\u4E2A\\u53C2\\u6570\\uFF0C\\u5219\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u4F7F\\u7528\\u5176\\u9ED8\\u8BA4\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u8868\\u8FBE\\u5F0F\\u4F5C\\u4E3A\\u9ED8\\u8BA4\\u503C\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u4F7F\\u7528\\u8868\\u8FBE\\u5F0F\\u4F5C\\u4E3A\\u53C2\\u6570\\u7684\\u9ED8\\u8BA4\\u503C\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function add(a = 0, b = a + 1) {\n  return a + b;\n}\n\nconsole.log(add()); // Output: 1\nconsole.log(add(5)); // Output: 11\nconsole.log(add(5, 10)); // Output: 15\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"b\"}),\" \\u7684\\u9ED8\\u8BA4\\u503C\\u662F\\u4E00\\u4E2A\\u4F9D\\u8D56\\u4E8E \",(0,n.jsx)(e.code,{children:\"a\"}),\" \\u503C\\u7684\\u8868\\u8FBE\\u5F0F\\u3002\\u5982\\u679C\\u6CA1\\u6709\\u4F20\\u9012\\u53C2\\u6570\\uFF0C\",(0,n.jsx)(e.code,{children:\"a\"}),\" \\u662F \",(0,n.jsx)(e.code,{children:\"0\"}),\"\\uFF0C\",(0,n.jsx)(e.code,{children:\"b\"}),\" \\u662F \",(0,n.jsx)(e.code,{children:\"1\"}),\"\\u3002\\u5982\\u679C\\u53EA\\u4F20\\u9012\\u4E86 \",(0,n.jsx)(e.code,{children:\"a\"}),\"\\uFF0C\",(0,n.jsx)(e.code,{children:\"b\"}),\" \\u662F \",(0,n.jsx)(e.code,{children:\"a + 1\"}),\"\\u3002\\u5982\\u679C\\u540C\\u65F6\\u4F20\\u9012\\u4E86 \",(0,n.jsx)(e.code,{children:\"a\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"b\"}),\"\\uFF0C\\u5219\\u4F7F\\u7528\\u63D0\\u4F9B\\u7684\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters\",children:\"MDN Web \\u6587\\u6863\\uFF1A\\u9ED8\\u8BA4\\u53C2\\u6570\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/function-basics#default-values\",children:\"JavaScript.info\\uFF1A\\u9ED8\\u8BA4\\u53C2\\u6570\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.ecma-international.org/ecma-262/6.0/#sec-function-definitions\",children:\"ECMAScript 2015 (ES6) \\u89C4\\u8303\"})}),`\n`]})]})}function u(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(h,{...c})}):h(c)}return b(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-design-patterns-and-why-are-they-useful/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-design-patterns-and-why-are-they-useful/en-US.json
index cab3e63fb..80587c5d6 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-design-patterns-and-why-are-they-useful/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-design-patterns-and-why-are-they-useful/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-design-patterns-and-why-are-they-useful/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var i in e)s(t,i,{get:e[i],enumerable:!0})},o=(t,e,i,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of g(e))!m.call(t,a)&&a!==i&&s(t,a,{get:()=>e[a],enumerable:!(r=p(e,a))||r.enumerable});return t};var f=(t,e,i)=>(i=t!=null?h(u(t)):{},o(e||!t||!t.__esModule?s(i,\"default\",{value:t,enumerable:!0}):i,t)),w=t=>o(s({},\"__esModule\",{value:!0}),t);var c=b((T,l)=>{l.exports=_jsx_runtime});var S={};y(S,{default:()=>D,frontmatter:()=>v});var n=f(c()),v={title:\"What are design patterns and why are they useful?\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",ul:\"ul\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Design patterns are reusable solutions to common problems in software design. They provide a template for how to solve a problem that can be used in many different situations. They are useful because they help developers avoid common pitfalls, improve code readability, and make it easier to maintain and scale applications.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are design patterns and why are they useful?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition of design patterns\"}),`\n`,(0,n.jsx)(e.p,{children:'Design patterns are general, reusable solutions to common problems that occur in software design. They are not finished designs that can be directly transformed into code but rather templates that describe how to solve a problem in various contexts. The concept was popularized by the book \"Design Patterns: Elements of Reusable Object-Oriented Software\" by Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides, also known as the \"Gang of Four\" (GoF).'}),`\n`,(0,n.jsx)(e.h3,{children:\"Types of design patterns\"}),`\n`,(0,n.jsx)(e.p,{children:\"Design patterns are typically categorized into three main types:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Creational patterns\"}),\": Deal with object creation mechanisms, trying to create objects in a manner suitable to the situation. Examples include Singleton, Factory Method, and Abstract Factory.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Structural patterns\"}),\": Deal with object composition or the structure of classes and objects. Examples include Adapter, Composite, and Decorator.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Behavioral patterns\"}),\": Deal with object interaction and responsibility. Examples include Observer, Strategy, and Command.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Why design patterns are useful\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reusability\"}),\": Design patterns provide a proven solution to common problems, which can be reused across different projects.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Maintainability\"}),\": They help in writing code that is easier to understand, maintain, and extend.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Scalability\"}),\": Design patterns can help in designing systems that are scalable and can handle growth in complexity.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Communication\"}),\": They provide a common vocabulary for developers, making it easier to discuss and share design ideas.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Best practices\"}),\": They encapsulate best practices and industry standards, helping developers avoid common pitfalls.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example: Singleton pattern\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Singleton pattern ensures that a class has only one instance and provides a global point of access to it. Here is a simple implementation in JavaScript:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Singleton {\n  constructor() {\n    if (Singleton.instance) {\n      return Singleton.instance;\n    }\n    Singleton.instance = this;\n  }\n\n  someMethod() {\n    console.log('Singleton method');\n  }\n}\n\nconst instance1 = new Singleton();\nconst instance2 = new Singleton();\n\nconsole.log(instance1 === instance2); // true\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the \",(0,n.jsx)(e.code,{children:\"Singleton\"}),\" class ensures that only one instance of the class is created. Any subsequent calls to create a new instance will return the existing instance.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://en.wikipedia.org/wiki/Design_Patterns\",children:\"Design Patterns: Elements of Reusable Object-Oriented Software\"}),\" by the Gang of Four\"]}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://refactoring.guru/design-patterns\",children:\"Refactoring Guru: Design Patterns\"})}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://addyosmani.com/resources/essentialjsdesignpatterns/book/\",children:\"JavaScript Design Patterns\"}),\" by Addy Osmani\"]}),`\n`]})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var D=x;return w(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var i in e)s(t,i,{get:e[i],enumerable:!0})},o=(t,e,i,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!b.call(t,a)&&a!==i&&s(t,a,{get:()=>e[a],enumerable:!(r=g(e,a))||r.enumerable});return t};var w=(t,e,i)=>(i=t!=null?p(m(t)):{},o(e||!t||!t.__esModule?s(i,\"default\",{value:t,enumerable:!0}):i,t)),v=t=>o(s({},\"__esModule\",{value:!0}),t);var c=y((j,l)=>{l.exports=_jsx_runtime});var D={};f(D,{default:()=>h,frontmatter:()=>x});var n=w(c()),x={title:\"What are design patterns and why are they useful?\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Design patterns are reusable solutions to common problems in software design. They provide a template for how to solve a problem that can be used in many different situations. They are useful because they help developers avoid common pitfalls, improve code readability, and make it easier to maintain and scale applications.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are design patterns and why are they useful?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition of design patterns\"}),`\n`,(0,n.jsx)(e.p,{children:'Design patterns are general, reusable solutions to common problems that occur in software design. They are not finished designs that can be directly transformed into code but rather templates that describe how to solve a problem in various contexts. The concept was popularized by the book \"Design Patterns: Elements of Reusable Object-Oriented Software\" by Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides, also known as the \"Gang of Four\" (GoF).'}),`\n`,(0,n.jsx)(e.h3,{children:\"Types of design patterns\"}),`\n`,(0,n.jsx)(e.p,{children:\"Design patterns are typically categorized into three main types:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Creational patterns\"}),\": Deal with object creation mechanisms, trying to create objects in a manner suitable to the situation. Examples include Singleton, Factory Method, and Abstract Factory.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Structural patterns\"}),\": Deal with object composition or the structure of classes and objects. Examples include Adapter, Composite, and Decorator.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Behavioral patterns\"}),\": Deal with object interaction and responsibility. Examples include Observer, Strategy, and Command.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Why design patterns are useful\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reusability\"}),\": Design patterns provide a proven solution to common problems, which can be reused across different projects.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Maintainability\"}),\": They help in writing code that is easier to understand, maintain, and extend.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Scalability\"}),\": Design patterns can help in designing systems that are scalable and can handle growth in complexity.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Communication\"}),\": They provide a common vocabulary for developers, making it easier to discuss and share design ideas.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Best practices\"}),\": They encapsulate best practices and industry standards, helping developers avoid common pitfalls.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example: Singleton pattern\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Singleton pattern ensures that a class has only one instance and provides a global point of access to it. Here is a simple implementation in JavaScript:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Singleton {\n  constructor() {\n    if (Singleton.instance) {\n      return Singleton.instance;\n    }\n    Singleton.instance = this;\n  }\n\n  someMethod() {\n    console.log('Singleton method');\n  }\n}\n\nconst instance1 = new Singleton();\nconst instance2 = new Singleton();\n\nconsole.log(instance1 === instance2); // true\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the \",(0,n.jsx)(e.code,{children:\"Singleton\"}),\" class ensures that only one instance of the class is created. Any subsequent calls to create a new instance will return the existing instance.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://en.wikipedia.org/wiki/Design_Patterns\",children:\"Design Patterns: Elements of Reusable Object-Oriented Software\"}),\" by the Gang of Four\"]}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://refactoring.guru/design-patterns\",children:\"Refactoring Guru: Design Patterns\"})}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://addyosmani.com/resources/essentialjsdesignpatterns/book/\",children:\"JavaScript Design Patterns\"}),\" by Addy Osmani\"]}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return v(D);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-design-patterns-and-why-are-they-useful/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-design-patterns-and-why-are-they-useful/zh-CN.json
index 5ec21976a..6ca785292 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-design-patterns-and-why-are-they-useful/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-design-patterns-and-why-are-they-useful/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-design-patterns-and-why-are-they-useful/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var t=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),S=(i,n)=>{for(var r in n)t(i,r,{get:n[r],enumerable:!0})},h=(i,n,r,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of p(n))!m.call(i,l)&&l!==r&&t(i,l,{get:()=>n[l],enumerable:!(c=g(n,l))||c.enumerable});return i};var j=(i,n,r)=>(r=i!=null?a(u(i)):{},h(n||!i||!i.__esModule?t(r,\"default\",{value:i,enumerable:!0}):r,i)),x=i=>h(t({},\"__esModule\",{value:!0}),i);var s=f((F,o)=>{o.exports=_jsx_runtime});var y={};S(y,{default:()=>w,frontmatter:()=>_});var e=j(s()),_={title:\"\\u4EC0\\u4E48\\u662F\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF1F\\u5B83\\u4EEC\\u4E3A\\u4EC0\\u4E48\\u6709\\u7528\\uFF1F\"};function d(i){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",ul:\"ul\",a:\"a\"},i.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8BBE\\u8BA1\\u6A21\\u5F0F\\u662F\\u8F6F\\u4EF6\\u8BBE\\u8BA1\\u4E2D\\u5E38\\u89C1\\u95EE\\u9898\\u7684\\u53EF\\u91CD\\u7528\\u89E3\\u51B3\\u65B9\\u6848\\u3002\\u5B83\\u4EEC\\u4E3A\\u5982\\u4F55\\u89E3\\u51B3\\u53EF\\u4EE5\\u5728\\u8BB8\\u591A\\u4E0D\\u540C\\u60C5\\u51B5\\u4E0B\\u4F7F\\u7528\\u7684\\u95EE\\u9898\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u6A21\\u677F\\u3002\\u5B83\\u4EEC\\u4E4B\\u6240\\u4EE5\\u6709\\u7528\\uFF0C\\u662F\\u56E0\\u4E3A\\u5B83\\u4EEC\\u53EF\\u4EE5\\u5E2E\\u52A9\\u5F00\\u53D1\\u4EBA\\u5458\\u907F\\u514D\\u5E38\\u89C1\\u7684\\u9677\\u9631\\uFF0C\\u63D0\\u9AD8\\u4EE3\\u7801\\u53EF\\u8BFB\\u6027\\uFF0C\\u5E76\\u4F7F\\u7EF4\\u62A4\\u548C\\u6269\\u5C55\\u5E94\\u7528\\u7A0B\\u5E8F\\u66F4\\u5BB9\\u6613\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF1F\\u5B83\\u4EEC\\u4E3A\\u4EC0\\u4E48\\u6709\\u7528\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BBE\\u8BA1\\u6A21\\u5F0F\\u7684\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8BBE\\u8BA1\\u6A21\\u5F0F\\u662F\\u9488\\u5BF9\\u8F6F\\u4EF6\\u8BBE\\u8BA1\\u4E2D\\u51FA\\u73B0\\u7684\\u5E38\\u89C1\\u95EE\\u9898\\u7684\\u4E00\\u822C\\u6027\\u3001\\u53EF\\u91CD\\u7528\\u7684\\u89E3\\u51B3\\u65B9\\u6848\\u3002\\u5B83\\u4EEC\\u4E0D\\u662F\\u53EF\\u4EE5\\u76F4\\u63A5\\u8F6C\\u5316\\u4E3A\\u4EE3\\u7801\\u7684\\u5DF2\\u5B8C\\u6210\\u8BBE\\u8BA1\\uFF0C\\u800C\\u662F\\u63CF\\u8FF0\\u5982\\u4F55\\u5728\\u5404\\u79CD\\u4E0A\\u4E0B\\u6587\\u4E2D\\u89E3\\u51B3\\u95EE\\u9898\\u7684\\u6A21\\u677F\\u3002\\u8FD9\\u4E2A\\u6982\\u5FF5\\u7531 Erich Gamma\\u3001Richard Helm\\u3001Ralph Johnson \\u548C John Vlissides\\uFF08\\u4E5F\\u79F0\\u4E3A\\u201C\\u56DB\\u4EBA\\u5E2E\\u201D\\uFF08GoF\\uFF09\\uFF09\\u5408\\u8457\\u7684\\u300A\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF1A\\u53EF\\u590D\\u7528\\u9762\\u5411\\u5BF9\\u8C61\\u8F6F\\u4EF6\\u8981\\u7D20\\u300B\\u4E00\\u4E66\\u63A8\\u5E7F\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BBE\\u8BA1\\u6A21\\u5F0F\\u7684\\u7C7B\\u578B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8BBE\\u8BA1\\u6A21\\u5F0F\\u901A\\u5E38\\u5206\\u4E3A\\u4E09\\u79CD\\u4E3B\\u8981\\u7C7B\\u578B\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u521B\\u5EFA\\u578B\\u6A21\\u5F0F\"}),\"\\uFF1A\\u5904\\u7406\\u5BF9\\u8C61\\u521B\\u5EFA\\u673A\\u5236\\uFF0C\\u8BD5\\u56FE\\u4EE5\\u9002\\u5408\\u60C5\\u51B5\\u7684\\u65B9\\u5F0F\\u521B\\u5EFA\\u5BF9\\u8C61\\u3002\\u793A\\u4F8B\\u5305\\u62EC\\u5355\\u4F8B\\u6A21\\u5F0F\\u3001\\u5DE5\\u5382\\u65B9\\u6CD5\\u548C\\u62BD\\u8C61\\u5DE5\\u5382\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7ED3\\u6784\\u578B\\u6A21\\u5F0F\"}),\"\\uFF1A\\u5904\\u7406\\u5BF9\\u8C61\\u7EC4\\u5408\\u6216\\u7C7B\\u548C\\u5BF9\\u8C61\\u7684\\u7ED3\\u6784\\u3002\\u793A\\u4F8B\\u5305\\u62EC\\u9002\\u914D\\u5668\\u6A21\\u5F0F\\u3001\\u7EC4\\u5408\\u6A21\\u5F0F\\u548C\\u88C5\\u9970\\u5668\\u6A21\\u5F0F\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u884C\\u4E3A\\u578B\\u6A21\\u5F0F\"}),\"\\uFF1A\\u5904\\u7406\\u5BF9\\u8C61\\u4EA4\\u4E92\\u548C\\u8D23\\u4EFB\\u3002\\u793A\\u4F8B\\u5305\\u62EC\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\\u3001\\u7B56\\u7565\\u6A21\\u5F0F\\u548C\\u547D\\u4EE4\\u6A21\\u5F0F\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E3A\\u4EC0\\u4E48\\u8BBE\\u8BA1\\u6A21\\u5F0F\\u6709\\u7528\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u91CD\\u7528\\u6027\"}),\"\\uFF1A\\u8BBE\\u8BA1\\u6A21\\u5F0F\\u4E3A\\u5E38\\u89C1\\u95EE\\u9898\\u63D0\\u4F9B\\u4E86\\u7ECF\\u8FC7\\u9A8C\\u8BC1\\u7684\\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u53EF\\u4EE5\\u5728\\u4E0D\\u540C\\u7684\\u9879\\u76EE\\u4E2D\\u91CD\\u590D\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u7EF4\\u62A4\\u6027\"}),\"\\uFF1A\\u5B83\\u4EEC\\u6709\\u52A9\\u4E8E\\u7F16\\u5199\\u66F4\\u6613\\u4E8E\\u7406\\u89E3\\u3001\\u7EF4\\u62A4\\u548C\\u6269\\u5C55\\u7684\\u4EE3\\u7801\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u6269\\u5C55\\u6027\"}),\"\\uFF1A\\u8BBE\\u8BA1\\u6A21\\u5F0F\\u53EF\\u4EE5\\u5E2E\\u52A9\\u8BBE\\u8BA1\\u53EF\\u6269\\u5C55\\u7684\\u7CFB\\u7EDF\\uFF0C\\u5E76\\u53EF\\u4EE5\\u5904\\u7406\\u590D\\u6742\\u6027\\u7684\\u589E\\u957F\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6C9F\\u901A\"}),\"\\uFF1A\\u5B83\\u4EEC\\u4E3A\\u5F00\\u53D1\\u4EBA\\u5458\\u63D0\\u4F9B\\u4E86\\u901A\\u7528\\u8BCD\\u6C47\\uFF0C\\u4F7F\\u8BA8\\u8BBA\\u548C\\u5206\\u4EAB\\u8BBE\\u8BA1\\u7406\\u5FF5\\u66F4\\u5BB9\\u6613\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6700\\u4F73\\u5B9E\\u8DF5\"}),\"\\uFF1A\\u5B83\\u4EEC\\u5C01\\u88C5\\u4E86\\u6700\\u4F73\\u5B9E\\u8DF5\\u548C\\u884C\\u4E1A\\u6807\\u51C6\\uFF0C\\u5E2E\\u52A9\\u5F00\\u53D1\\u4EBA\\u5458\\u907F\\u514D\\u5E38\\u89C1\\u7684\\u9677\\u9631\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\\uFF1A\\u5355\\u4F8B\\u6A21\\u5F0F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5355\\u4F8B\\u6A21\\u5F0F\\u786E\\u4FDD\\u4E00\\u4E2A\\u7C7B\\u53EA\\u6709\\u4E00\\u4E2A\\u5B9E\\u4F8B\\uFF0C\\u5E76\\u63D0\\u4F9B\\u5BF9\\u5B83\\u7684\\u5168\\u5C40\\u8BBF\\u95EE\\u70B9\\u3002\\u4EE5\\u4E0B\\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u4E2A\\u7B80\\u5355\\u5B9E\\u73B0\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Singleton {\n  constructor() {\n    if (Singleton.instance) {\n      return Singleton.instance;\n    }\n    Singleton.instance = this;\n  }\n\n  someMethod() {\n    console.log('Singleton method');\n  }\n}\n\nconst instance1 = new Singleton();\nconst instance2 = new Singleton();\n\nconsole.log(instance1 === instance2); // true\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"Singleton\"}),\" \\u7C7B\\u786E\\u4FDD\\u53EA\\u521B\\u5EFA\\u4E00\\u4E2A\\u7C7B\\u7684\\u5B9E\\u4F8B\\u3002\\u4EFB\\u4F55\\u540E\\u7EED\\u521B\\u5EFA\\u65B0\\u5B9E\\u4F8B\\u7684\\u8C03\\u7528\\u90FD\\u5C06\\u8FD4\\u56DE\\u73B0\\u6709\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Design_Patterns\",children:\"\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF1A\\u53EF\\u590D\\u7528\\u9762\\u5411\\u5BF9\\u8C61\\u8F6F\\u4EF6\\u7684\\u8981\\u7D20\"}),\" by the Gang of Four\"]}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://refactoring.guru/design-patterns\",children:\"Refactoring Guru: \\u8BBE\\u8BA1\\u6A21\\u5F0F\"})}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.a,{href:\"https://addyosmani.com/resources/essentialjsdesignpatterns/book/\",children:\"JavaScript \\u8BBE\\u8BA1\\u6A21\\u5F0F\"}),\" by Addy Osmani\"]}),`\n`]})]})}function b(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,Object.assign({},i,{children:(0,e.jsx)(d,i)})):d(i)}var w=b;return x(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var g=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var S=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),x=(i,n)=>{for(var r in n)t(i,r,{get:n[r],enumerable:!0})},h=(i,n,r,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of u(n))!f.call(i,l)&&l!==r&&t(i,l,{get:()=>n[l],enumerable:!(c=p(n,l))||c.enumerable});return i};var _=(i,n,r)=>(r=i!=null?g(m(i)):{},h(n||!i||!i.__esModule?t(r,\"default\",{value:i,enumerable:!0}):r,i)),j=i=>h(t({},\"__esModule\",{value:!0}),i);var s=S((F,o)=>{o.exports=_jsx_runtime});var y={};x(y,{default:()=>a,frontmatter:()=>w});var e=_(s()),w={title:\"\\u4EC0\\u4E48\\u662F\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF1F\\u5B83\\u4EEC\\u4E3A\\u4EC0\\u4E48\\u6709\\u7528\\uFF1F\"};function d(i){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8BBE\\u8BA1\\u6A21\\u5F0F\\u662F\\u8F6F\\u4EF6\\u8BBE\\u8BA1\\u4E2D\\u5E38\\u89C1\\u95EE\\u9898\\u7684\\u53EF\\u91CD\\u7528\\u89E3\\u51B3\\u65B9\\u6848\\u3002\\u5B83\\u4EEC\\u4E3A\\u5982\\u4F55\\u89E3\\u51B3\\u53EF\\u4EE5\\u5728\\u8BB8\\u591A\\u4E0D\\u540C\\u60C5\\u51B5\\u4E0B\\u4F7F\\u7528\\u7684\\u95EE\\u9898\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u6A21\\u677F\\u3002\\u5B83\\u4EEC\\u4E4B\\u6240\\u4EE5\\u6709\\u7528\\uFF0C\\u662F\\u56E0\\u4E3A\\u5B83\\u4EEC\\u53EF\\u4EE5\\u5E2E\\u52A9\\u5F00\\u53D1\\u4EBA\\u5458\\u907F\\u514D\\u5E38\\u89C1\\u7684\\u9677\\u9631\\uFF0C\\u63D0\\u9AD8\\u4EE3\\u7801\\u53EF\\u8BFB\\u6027\\uFF0C\\u5E76\\u4F7F\\u7EF4\\u62A4\\u548C\\u6269\\u5C55\\u5E94\\u7528\\u7A0B\\u5E8F\\u66F4\\u5BB9\\u6613\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF1F\\u5B83\\u4EEC\\u4E3A\\u4EC0\\u4E48\\u6709\\u7528\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BBE\\u8BA1\\u6A21\\u5F0F\\u7684\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8BBE\\u8BA1\\u6A21\\u5F0F\\u662F\\u9488\\u5BF9\\u8F6F\\u4EF6\\u8BBE\\u8BA1\\u4E2D\\u51FA\\u73B0\\u7684\\u5E38\\u89C1\\u95EE\\u9898\\u7684\\u4E00\\u822C\\u6027\\u3001\\u53EF\\u91CD\\u7528\\u7684\\u89E3\\u51B3\\u65B9\\u6848\\u3002\\u5B83\\u4EEC\\u4E0D\\u662F\\u53EF\\u4EE5\\u76F4\\u63A5\\u8F6C\\u5316\\u4E3A\\u4EE3\\u7801\\u7684\\u5DF2\\u5B8C\\u6210\\u8BBE\\u8BA1\\uFF0C\\u800C\\u662F\\u63CF\\u8FF0\\u5982\\u4F55\\u5728\\u5404\\u79CD\\u4E0A\\u4E0B\\u6587\\u4E2D\\u89E3\\u51B3\\u95EE\\u9898\\u7684\\u6A21\\u677F\\u3002\\u8FD9\\u4E2A\\u6982\\u5FF5\\u7531 Erich Gamma\\u3001Richard Helm\\u3001Ralph Johnson \\u548C John Vlissides\\uFF08\\u4E5F\\u79F0\\u4E3A\\u201C\\u56DB\\u4EBA\\u5E2E\\u201D\\uFF08GoF\\uFF09\\uFF09\\u5408\\u8457\\u7684\\u300A\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF1A\\u53EF\\u590D\\u7528\\u9762\\u5411\\u5BF9\\u8C61\\u8F6F\\u4EF6\\u8981\\u7D20\\u300B\\u4E00\\u4E66\\u63A8\\u5E7F\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BBE\\u8BA1\\u6A21\\u5F0F\\u7684\\u7C7B\\u578B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8BBE\\u8BA1\\u6A21\\u5F0F\\u901A\\u5E38\\u5206\\u4E3A\\u4E09\\u79CD\\u4E3B\\u8981\\u7C7B\\u578B\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u521B\\u5EFA\\u578B\\u6A21\\u5F0F\"}),\"\\uFF1A\\u5904\\u7406\\u5BF9\\u8C61\\u521B\\u5EFA\\u673A\\u5236\\uFF0C\\u8BD5\\u56FE\\u4EE5\\u9002\\u5408\\u60C5\\u51B5\\u7684\\u65B9\\u5F0F\\u521B\\u5EFA\\u5BF9\\u8C61\\u3002\\u793A\\u4F8B\\u5305\\u62EC\\u5355\\u4F8B\\u6A21\\u5F0F\\u3001\\u5DE5\\u5382\\u65B9\\u6CD5\\u548C\\u62BD\\u8C61\\u5DE5\\u5382\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7ED3\\u6784\\u578B\\u6A21\\u5F0F\"}),\"\\uFF1A\\u5904\\u7406\\u5BF9\\u8C61\\u7EC4\\u5408\\u6216\\u7C7B\\u548C\\u5BF9\\u8C61\\u7684\\u7ED3\\u6784\\u3002\\u793A\\u4F8B\\u5305\\u62EC\\u9002\\u914D\\u5668\\u6A21\\u5F0F\\u3001\\u7EC4\\u5408\\u6A21\\u5F0F\\u548C\\u88C5\\u9970\\u5668\\u6A21\\u5F0F\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u884C\\u4E3A\\u578B\\u6A21\\u5F0F\"}),\"\\uFF1A\\u5904\\u7406\\u5BF9\\u8C61\\u4EA4\\u4E92\\u548C\\u8D23\\u4EFB\\u3002\\u793A\\u4F8B\\u5305\\u62EC\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\\u3001\\u7B56\\u7565\\u6A21\\u5F0F\\u548C\\u547D\\u4EE4\\u6A21\\u5F0F\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E3A\\u4EC0\\u4E48\\u8BBE\\u8BA1\\u6A21\\u5F0F\\u6709\\u7528\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u91CD\\u7528\\u6027\"}),\"\\uFF1A\\u8BBE\\u8BA1\\u6A21\\u5F0F\\u4E3A\\u5E38\\u89C1\\u95EE\\u9898\\u63D0\\u4F9B\\u4E86\\u7ECF\\u8FC7\\u9A8C\\u8BC1\\u7684\\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u53EF\\u4EE5\\u5728\\u4E0D\\u540C\\u7684\\u9879\\u76EE\\u4E2D\\u91CD\\u590D\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u7EF4\\u62A4\\u6027\"}),\"\\uFF1A\\u5B83\\u4EEC\\u6709\\u52A9\\u4E8E\\u7F16\\u5199\\u66F4\\u6613\\u4E8E\\u7406\\u89E3\\u3001\\u7EF4\\u62A4\\u548C\\u6269\\u5C55\\u7684\\u4EE3\\u7801\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u6269\\u5C55\\u6027\"}),\"\\uFF1A\\u8BBE\\u8BA1\\u6A21\\u5F0F\\u53EF\\u4EE5\\u5E2E\\u52A9\\u8BBE\\u8BA1\\u53EF\\u6269\\u5C55\\u7684\\u7CFB\\u7EDF\\uFF0C\\u5E76\\u53EF\\u4EE5\\u5904\\u7406\\u590D\\u6742\\u6027\\u7684\\u589E\\u957F\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6C9F\\u901A\"}),\"\\uFF1A\\u5B83\\u4EEC\\u4E3A\\u5F00\\u53D1\\u4EBA\\u5458\\u63D0\\u4F9B\\u4E86\\u901A\\u7528\\u8BCD\\u6C47\\uFF0C\\u4F7F\\u8BA8\\u8BBA\\u548C\\u5206\\u4EAB\\u8BBE\\u8BA1\\u7406\\u5FF5\\u66F4\\u5BB9\\u6613\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6700\\u4F73\\u5B9E\\u8DF5\"}),\"\\uFF1A\\u5B83\\u4EEC\\u5C01\\u88C5\\u4E86\\u6700\\u4F73\\u5B9E\\u8DF5\\u548C\\u884C\\u4E1A\\u6807\\u51C6\\uFF0C\\u5E2E\\u52A9\\u5F00\\u53D1\\u4EBA\\u5458\\u907F\\u514D\\u5E38\\u89C1\\u7684\\u9677\\u9631\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\\uFF1A\\u5355\\u4F8B\\u6A21\\u5F0F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5355\\u4F8B\\u6A21\\u5F0F\\u786E\\u4FDD\\u4E00\\u4E2A\\u7C7B\\u53EA\\u6709\\u4E00\\u4E2A\\u5B9E\\u4F8B\\uFF0C\\u5E76\\u63D0\\u4F9B\\u5BF9\\u5B83\\u7684\\u5168\\u5C40\\u8BBF\\u95EE\\u70B9\\u3002\\u4EE5\\u4E0B\\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u4E2A\\u7B80\\u5355\\u5B9E\\u73B0\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Singleton {\n  constructor() {\n    if (Singleton.instance) {\n      return Singleton.instance;\n    }\n    Singleton.instance = this;\n  }\n\n  someMethod() {\n    console.log('Singleton method');\n  }\n}\n\nconst instance1 = new Singleton();\nconst instance2 = new Singleton();\n\nconsole.log(instance1 === instance2); // true\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"Singleton\"}),\" \\u7C7B\\u786E\\u4FDD\\u53EA\\u521B\\u5EFA\\u4E00\\u4E2A\\u7C7B\\u7684\\u5B9E\\u4F8B\\u3002\\u4EFB\\u4F55\\u540E\\u7EED\\u521B\\u5EFA\\u65B0\\u5B9E\\u4F8B\\u7684\\u8C03\\u7528\\u90FD\\u5C06\\u8FD4\\u56DE\\u73B0\\u6709\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Design_Patterns\",children:\"\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF1A\\u53EF\\u590D\\u7528\\u9762\\u5411\\u5BF9\\u8C61\\u8F6F\\u4EF6\\u7684\\u8981\\u7D20\"}),\" by the Gang of Four\"]}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://refactoring.guru/design-patterns\",children:\"Refactoring Guru: \\u8BBE\\u8BA1\\u6A21\\u5F0F\"})}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.a,{href:\"https://addyosmani.com/resources/essentialjsdesignpatterns/book/\",children:\"JavaScript \\u8BBE\\u8BA1\\u6A21\\u5F0F\"}),\" by Addy Osmani\"]}),`\n`]})]})}function a(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,{...i,children:(0,e.jsx)(d,{...i})}):d(i)}return j(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-error-boundaries-in-react-for/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-error-boundaries-in-react-for/en-US.json
index 134f605a8..00f89473a 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-error-boundaries-in-react-for/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-error-boundaries-in-react-for/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-are-error-boundaries-in-react-for/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(n,r)=>()=>(r||n((r={exports:{}}).exports,r),r.exports),y=(n,r)=>{for(var o in r)a(n,o,{get:r[o],enumerable:!0})},c=(n,r,o,i)=>{if(r&&typeof r==\"object\"||typeof r==\"function\")for(let t of p(r))!f.call(n,t)&&t!==o&&a(n,t,{get:()=>r[t],enumerable:!(i=u(r,t))||i.enumerable});return n};var b=(n,r,o)=>(o=n!=null?l(m(n)):{},c(r||!n||!n.__esModule?a(o,\"default\",{value:n,enumerable:!0}):o,n)),v=n=>c(a({},\"__esModule\",{value:!0}),n);var d=g((k,h)=>{h.exports=_jsx_runtime});var T={};y(T,{default:()=>E,frontmatter:()=>w});var e=b(d()),w={title:\"What are error boundaries in React for?\"};function s(n){let r=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",pre:\"pre\",a:\"a\"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(r.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(r.p,{children:[\"Error boundaries in React are components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of crashing the whole application. They are implemented using the \",(0,e.jsx)(r.code,{children:\"componentDidCatch\"}),\" lifecycle method and the \",(0,e.jsx)(r.code,{children:\"static getDerivedStateFromError\"}),\" method. Error boundaries do not catch errors inside event handlers, asynchronous code, or server-side rendering.\"]}),`\n`,(0,e.jsx)(r.hr,{}),`\n`,(0,e.jsx)(r.h2,{children:\"What are error boundaries in React for?\"}),`\n`,(0,e.jsx)(r.h3,{children:\"Introduction\"}),`\n`,(0,e.jsx)(r.p,{children:\"Error boundaries are a feature in React that help manage and handle errors in a more graceful way. They allow developers to catch JavaScript errors anywhere in their component tree, log those errors, and display a fallback UI instead of crashing the entire application.\"}),`\n`,(0,e.jsx)(r.h3,{children:\"How to implement error boundaries\"}),`\n`,(0,e.jsx)(r.p,{children:\"To create an error boundary, you need to define a class component that implements either or both of the following lifecycle methods:\"}),`\n`,(0,e.jsxs)(r.ul,{children:[`\n`,(0,e.jsxs)(r.li,{children:[(0,e.jsx)(r.code,{children:\"static getDerivedStateFromError(error)\"}),\": This method is used to update the state so the next render will show the fallback UI.\"]}),`\n`,(0,e.jsxs)(r.li,{children:[(0,e.jsx)(r.code,{children:\"componentDidCatch(error, info)\"}),\": This method is used to log error information.\"]}),`\n`]}),`\n`,(0,e.jsx)(r.p,{children:\"Here is an example of an error boundary component:\"}),`\n`,(0,e.jsx)(r.pre,{children:(0,e.jsx)(r.code,{className:\"language-jsx\",children:`import React, { Component } from 'react';\n\nclass ErrorBoundary extends Component {\n  constructor(props) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError(error) {\n    // Update state so the next render shows the fallback UI\n    return { hasError: true };\n  }\n\n  componentDidCatch(error, errorInfo) {\n    // You can also log the error to an error reporting service\n    console.error('Error caught by ErrorBoundary: ', error, errorInfo);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      // You can render any custom fallback UI\n      return <h1>Something went wrong.</h1>;\n    }\n\n    return this.props.children;\n  }\n}\n\nexport default ErrorBoundary;\n`})}),`\n`,(0,e.jsx)(r.h3,{children:\"Usage\"}),`\n`,(0,e.jsx)(r.p,{children:\"To use the error boundary, wrap it around any component that you want to monitor for errors:\"}),`\n`,(0,e.jsx)(r.pre,{children:(0,e.jsx)(r.code,{className:\"language-jsx\",children:`<ErrorBoundary>\n  <MyComponent />\n</ErrorBoundary>\n`})}),`\n`,(0,e.jsx)(r.h3,{children:\"Limitations\"}),`\n`,(0,e.jsx)(r.p,{children:\"Error boundaries have some limitations:\"}),`\n`,(0,e.jsxs)(r.ul,{children:[`\n`,(0,e.jsxs)(r.li,{children:[\"They do not catch errors inside event handlers. For event handlers, you need to use regular JavaScript \",(0,e.jsx)(r.code,{children:\"try\"}),\"/\",(0,e.jsx)(r.code,{children:\"catch\"}),\" blocks.\"]}),`\n`,(0,e.jsxs)(r.li,{children:[\"They do not catch errors in asynchronous code (e.g., \",(0,e.jsx)(r.code,{children:\"setTimeout\"}),\" or \",(0,e.jsx)(r.code,{children:\"requestAnimationFrame\"}),\" callbacks).\"]}),`\n`,(0,e.jsx)(r.li,{children:\"They do not catch errors during server-side rendering.\"}),`\n`,(0,e.jsx)(r.li,{children:\"They do not catch errors thrown in the error boundary itself.\"}),`\n`]}),`\n`,(0,e.jsx)(r.h3,{children:\"Best practices\"}),`\n`,(0,e.jsxs)(r.ul,{children:[`\n`,(0,e.jsx)(r.li,{children:\"Use error boundaries to wrap high-level components such as route handlers or major sections of your application.\"}),`\n`,(0,e.jsx)(r.li,{children:\"Log errors to an error reporting service to keep track of issues in production.\"}),`\n`,(0,e.jsx)(r.li,{children:\"Provide a user-friendly fallback UI to improve the user experience when an error occurs.\"}),`\n`]}),`\n`,(0,e.jsx)(r.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(r.ul,{children:[`\n`,(0,e.jsx)(r.li,{children:(0,e.jsx)(r.a,{href:\"https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary\",children:\"React documentation on error boundaries\"})}),`\n`]})]})}function x(n={}){let{wrapper:r}=n.components||{};return r?(0,e.jsx)(r,Object.assign({},n,{children:(0,e.jsx)(s,n)})):s(n)}var E=x;return v(T);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var g=(n,r)=>()=>(r||n((r={exports:{}}).exports,r),r.exports),b=(n,r)=>{for(var o in r)a(n,o,{get:r[o],enumerable:!0})},c=(n,r,o,i)=>{if(r&&typeof r==\"object\"||typeof r==\"function\")for(let t of m(r))!y.call(n,t)&&t!==o&&a(n,t,{get:()=>r[t],enumerable:!(i=p(r,t))||i.enumerable});return n};var v=(n,r,o)=>(o=n!=null?u(f(n)):{},c(r||!n||!n.__esModule?a(o,\"default\",{value:n,enumerable:!0}):o,n)),w=n=>c(a({},\"__esModule\",{value:!0}),n);var d=g((k,h)=>{h.exports=_jsx_runtime});var E={};b(E,{default:()=>l,frontmatter:()=>x});var e=v(d()),x={title:\"What are error boundaries in React for?\"};function s(n){let r={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(r.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(r.p,{children:[\"Error boundaries in React are components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of crashing the whole application. They are implemented using the \",(0,e.jsx)(r.code,{children:\"componentDidCatch\"}),\" lifecycle method and the \",(0,e.jsx)(r.code,{children:\"static getDerivedStateFromError\"}),\" method. Error boundaries do not catch errors inside event handlers, asynchronous code, or server-side rendering.\"]}),`\n`,(0,e.jsx)(r.hr,{}),`\n`,(0,e.jsx)(r.h2,{children:\"What are error boundaries in React for?\"}),`\n`,(0,e.jsx)(r.h3,{children:\"Introduction\"}),`\n`,(0,e.jsx)(r.p,{children:\"Error boundaries are a feature in React that help manage and handle errors in a more graceful way. They allow developers to catch JavaScript errors anywhere in their component tree, log those errors, and display a fallback UI instead of crashing the entire application.\"}),`\n`,(0,e.jsx)(r.h3,{children:\"How to implement error boundaries\"}),`\n`,(0,e.jsx)(r.p,{children:\"To create an error boundary, you need to define a class component that implements either or both of the following lifecycle methods:\"}),`\n`,(0,e.jsxs)(r.ul,{children:[`\n`,(0,e.jsxs)(r.li,{children:[(0,e.jsx)(r.code,{children:\"static getDerivedStateFromError(error)\"}),\": This method is used to update the state so the next render will show the fallback UI.\"]}),`\n`,(0,e.jsxs)(r.li,{children:[(0,e.jsx)(r.code,{children:\"componentDidCatch(error, info)\"}),\": This method is used to log error information.\"]}),`\n`]}),`\n`,(0,e.jsx)(r.p,{children:\"Here is an example of an error boundary component:\"}),`\n`,(0,e.jsx)(r.pre,{children:(0,e.jsx)(r.code,{className:\"language-jsx\",children:`import React, { Component } from 'react';\n\nclass ErrorBoundary extends Component {\n  constructor(props) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError(error) {\n    // Update state so the next render shows the fallback UI\n    return { hasError: true };\n  }\n\n  componentDidCatch(error, errorInfo) {\n    // You can also log the error to an error reporting service\n    console.error('Error caught by ErrorBoundary: ', error, errorInfo);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      // You can render any custom fallback UI\n      return <h1>Something went wrong.</h1>;\n    }\n\n    return this.props.children;\n  }\n}\n\nexport default ErrorBoundary;\n`})}),`\n`,(0,e.jsx)(r.h3,{children:\"Usage\"}),`\n`,(0,e.jsx)(r.p,{children:\"To use the error boundary, wrap it around any component that you want to monitor for errors:\"}),`\n`,(0,e.jsx)(r.pre,{children:(0,e.jsx)(r.code,{className:\"language-jsx\",children:`<ErrorBoundary>\n  <MyComponent />\n</ErrorBoundary>\n`})}),`\n`,(0,e.jsx)(r.h3,{children:\"Limitations\"}),`\n`,(0,e.jsx)(r.p,{children:\"Error boundaries have some limitations:\"}),`\n`,(0,e.jsxs)(r.ul,{children:[`\n`,(0,e.jsxs)(r.li,{children:[\"They do not catch errors inside event handlers. For event handlers, you need to use regular JavaScript \",(0,e.jsx)(r.code,{children:\"try\"}),\"/\",(0,e.jsx)(r.code,{children:\"catch\"}),\" blocks.\"]}),`\n`,(0,e.jsxs)(r.li,{children:[\"They do not catch errors in asynchronous code (e.g., \",(0,e.jsx)(r.code,{children:\"setTimeout\"}),\" or \",(0,e.jsx)(r.code,{children:\"requestAnimationFrame\"}),\" callbacks).\"]}),`\n`,(0,e.jsx)(r.li,{children:\"They do not catch errors during server-side rendering.\"}),`\n`,(0,e.jsx)(r.li,{children:\"They do not catch errors thrown in the error boundary itself.\"}),`\n`]}),`\n`,(0,e.jsx)(r.h3,{children:\"Best practices\"}),`\n`,(0,e.jsxs)(r.ul,{children:[`\n`,(0,e.jsx)(r.li,{children:\"Use error boundaries to wrap high-level components such as route handlers or major sections of your application.\"}),`\n`,(0,e.jsx)(r.li,{children:\"Log errors to an error reporting service to keep track of issues in production.\"}),`\n`,(0,e.jsx)(r.li,{children:\"Provide a user-friendly fallback UI to improve the user experience when an error occurs.\"}),`\n`]}),`\n`,(0,e.jsx)(r.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(r.ul,{children:[`\n`,(0,e.jsx)(r.li,{children:(0,e.jsx)(r.a,{href:\"https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary\",children:\"React documentation on error boundaries\"})}),`\n`]})]})}function l(n={}){let{wrapper:r}=n.components||{};return r?(0,e.jsx)(r,{...n,children:(0,e.jsx)(s,{...n})}):s(n)}return w(E);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-error-boundaries-in-react-for/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-error-boundaries-in-react-for/zh-CN.json
index 26467760d..453423abd 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-error-boundaries-in-react-for/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-error-boundaries-in-react-for/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-are-error-boundaries-in-react-for/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(e,r)=>()=>(r||e((r={exports:{}}).exports,r),r.exports),x=(e,r)=>{for(var t in r)o(e,t,{get:r[t],enumerable:!0})},h=(e,r,t,i)=>{if(r&&typeof r==\"object\"||typeof r==\"function\")for(let c of u(r))!g.call(e,c)&&c!==t&&o(e,c,{get:()=>r[c],enumerable:!(i=p(r,c))||i.enumerable});return e};var E=(e,r,t)=>(t=e!=null?s(m(e)):{},h(r||!e||!e.__esModule?o(t,\"default\",{value:e,enumerable:!0}):t,e)),y=e=>h(o({},\"__esModule\",{value:!0}),e);var d=f((b,a)=>{a.exports=_jsx_runtime});var D={};x(D,{default:()=>v,frontmatter:()=>j});var n=E(d()),j={title:\"React \\u4E2D\\u7684\\u9519\\u8BEF\\u8FB9\\u754C\\u662F\\u505A\\u4EC0\\u4E48\\u7684\\uFF1F\"};function l(e){let r=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",pre:\"pre\",a:\"a\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(r.p,{children:[\"React \\u4E2D\\u7684\\u9519\\u8BEF\\u8FB9\\u754C\\u662F\\u6355\\u83B7\\u5176\\u5B50\\u7EC4\\u4EF6\\u6811\\u4E2D\\u4EFB\\u4F55\\u4F4D\\u7F6E\\u7684 JavaScript \\u9519\\u8BEF\\u7684\\u7EC4\\u4EF6\\uFF0C\\u8BB0\\u5F55\\u8FD9\\u4E9B\\u9519\\u8BEF\\uFF0C\\u5E76\\u663E\\u793A\\u5907\\u7528 UI\\uFF0C\\u800C\\u4E0D\\u662F\\u5D29\\u6E83\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\\u5B83\\u4EEC\\u4F7F\\u7528 \",(0,n.jsx)(r.code,{children:\"componentDidCatch\"}),\" \\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\\u548C \",(0,n.jsx)(r.code,{children:\"static getDerivedStateFromError\"}),\" \\u65B9\\u6CD5\\u5B9E\\u73B0\\u3002\\u9519\\u8BEF\\u8FB9\\u754C\\u4E0D\\u4F1A\\u6355\\u83B7\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u3001\\u5F02\\u6B65\\u4EE3\\u7801\\u6216\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\u4E2D\\u7684\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsx)(r.hr,{}),`\n`,(0,n.jsx)(r.h2,{children:\"React \\u4E2D\\u7684\\u9519\\u8BEF\\u8FB9\\u754C\\u662F\\u505A\\u4EC0\\u4E48\\u7684\\uFF1F\"}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u7B80\\u4ECB\"}),`\n`,(0,n.jsx)(r.p,{children:\"\\u9519\\u8BEF\\u8FB9\\u754C\\u662F React \\u4E2D\\u7684\\u4E00\\u9879\\u529F\\u80FD\\uFF0C\\u6709\\u52A9\\u4E8E\\u4EE5\\u66F4\\u4F18\\u96C5\\u7684\\u65B9\\u5F0F\\u7BA1\\u7406\\u548C\\u5904\\u7406\\u9519\\u8BEF\\u3002\\u5B83\\u4EEC\\u5141\\u8BB8\\u5F00\\u53D1\\u4EBA\\u5458\\u6355\\u83B7\\u5176\\u7EC4\\u4EF6\\u6811\\u4E2D\\u4EFB\\u4F55\\u4F4D\\u7F6E\\u7684 JavaScript \\u9519\\u8BEF\\uFF0C\\u8BB0\\u5F55\\u8FD9\\u4E9B\\u9519\\u8BEF\\uFF0C\\u5E76\\u663E\\u793A\\u5907\\u7528 UI\\uFF0C\\u800C\\u4E0D\\u662F\\u5D29\\u6E83\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\"}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u5982\\u4F55\\u5B9E\\u73B0\\u9519\\u8BEF\\u8FB9\\u754C\"}),`\n`,(0,n.jsx)(r.p,{children:\"\\u8981\\u521B\\u5EFA\\u9519\\u8BEF\\u8FB9\\u754C\\uFF0C\\u60A8\\u9700\\u8981\\u5B9A\\u4E49\\u4E00\\u4E2A\\u7C7B\\u7EC4\\u4EF6\\uFF0C\\u8BE5\\u7EC4\\u4EF6\\u5B9E\\u73B0\\u4EE5\\u4E0B\\u4E00\\u4E2A\\u6216\\u4E24\\u4E2A\\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\\uFF1A\"}),`\n`,(0,n.jsxs)(r.ul,{children:[`\n`,(0,n.jsxs)(r.li,{children:[(0,n.jsx)(r.code,{children:\"static getDerivedStateFromError(error)\"}),\"\\uFF1A\\u6B64\\u65B9\\u6CD5\\u7528\\u4E8E\\u66F4\\u65B0\\u72B6\\u6001\\uFF0C\\u4EE5\\u4FBF\\u4E0B\\u4E00\\u6B21\\u6E32\\u67D3\\u5C06\\u663E\\u793A\\u5907\\u7528 UI\\u3002\"]}),`\n`,(0,n.jsxs)(r.li,{children:[(0,n.jsx)(r.code,{children:\"componentDidCatch(error, info)\"}),\"\\uFF1A\\u6B64\\u65B9\\u6CD5\\u7528\\u4E8E\\u8BB0\\u5F55\\u9519\\u8BEF\\u4FE1\\u606F\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(r.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u9519\\u8BEF\\u8FB9\\u754C\\u7EC4\\u4EF6\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:\"language-jsx\",children:`import React, { Component } from 'react';\n\nclass ErrorBoundary extends Component {\n  constructor(props) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError(error) {\n    // Update state so the next render shows the fallback UI\n    return { hasError: true };\n  }\n\n  componentDidCatch(error, errorInfo) {\n    // You can also log the error to an error reporting service\n    console.error('Error caught by ErrorBoundary: ', error, errorInfo);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      // You can render any custom fallback UI\n      return <h1>Something went wrong.</h1>;\n    }\n\n    return this.props.children;\n  }\n}\n\nexport default ErrorBoundary;\n`})}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u7528\\u6CD5\"}),`\n`,(0,n.jsx)(r.p,{children:\"\\u8981\\u4F7F\\u7528\\u9519\\u8BEF\\u8FB9\\u754C\\uFF0C\\u8BF7\\u5C06\\u5176\\u5305\\u88C5\\u5728\\u60A8\\u8981\\u76D1\\u89C6\\u9519\\u8BEF\\u7684\\u4EFB\\u4F55\\u7EC4\\u4EF6\\u5468\\u56F4\\uFF1A\"}),`\n`,(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:\"language-jsx\",children:`<ErrorBoundary>\n  <MyComponent />\n</ErrorBoundary>\n`})}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u9650\\u5236\"}),`\n`,(0,n.jsx)(r.p,{children:\"\\u9519\\u8BEF\\u8FB9\\u754C\\u6709\\u4E00\\u4E9B\\u9650\\u5236\\uFF1A\"}),`\n`,(0,n.jsxs)(r.ul,{children:[`\n`,(0,n.jsxs)(r.li,{children:[\"\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u6355\\u83B7\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D\\u7684\\u9519\\u8BEF\\u3002\\u5BF9\\u4E8E\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\uFF0C\\u60A8\\u9700\\u8981\\u4F7F\\u7528\\u5E38\\u89C4\\u7684 JavaScript \",(0,n.jsx)(r.code,{children:\"try\"}),\"/\",(0,n.jsx)(r.code,{children:\"catch\"}),\" \\u5757\\u3002\"]}),`\n`,(0,n.jsxs)(r.li,{children:[\"\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u6355\\u83B7\\u5F02\\u6B65\\u4EE3\\u7801\\u4E2D\\u7684\\u9519\\u8BEF\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(r.code,{children:\"setTimeout\"}),\" \\u6216 \",(0,n.jsx)(r.code,{children:\"requestAnimationFrame\"}),\" \\u56DE\\u8C03\\uFF09\\u3002\"]}),`\n`,(0,n.jsx)(r.li,{children:\"\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u6355\\u83B7\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\u671F\\u95F4\\u7684\\u9519\\u8BEF\\u3002\"}),`\n`,(0,n.jsx)(r.li,{children:\"\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u6355\\u83B7\\u5728\\u9519\\u8BEF\\u8FB9\\u754C\\u672C\\u8EAB\\u4E2D\\u629B\\u51FA\\u7684\\u9519\\u8BEF\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u6700\\u4F73\\u5B9E\\u8DF5\"}),`\n`,(0,n.jsxs)(r.ul,{children:[`\n`,(0,n.jsx)(r.li,{children:\"\\u4F7F\\u7528\\u9519\\u8BEF\\u8FB9\\u754C\\u6765\\u5305\\u88C5\\u9AD8\\u7EA7\\u7EC4\\u4EF6\\uFF0C\\u4F8B\\u5982\\u8DEF\\u7531\\u5904\\u7406\\u7A0B\\u5E8F\\u6216\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4E3B\\u8981\\u90E8\\u5206\\u3002\"}),`\n`,(0,n.jsx)(r.li,{children:\"\\u5C06\\u9519\\u8BEF\\u8BB0\\u5F55\\u5230\\u9519\\u8BEF\\u62A5\\u544A\\u670D\\u52A1\\uFF0C\\u4EE5\\u8DDF\\u8E2A\\u751F\\u4EA7\\u4E2D\\u7684\\u95EE\\u9898\\u3002\"}),`\n`,(0,n.jsx)(r.li,{children:\"\\u63D0\\u4F9B\\u7528\\u6237\\u53CB\\u597D\\u7684\\u5907\\u7528 UI\\uFF0C\\u4EE5\\u6539\\u5584\\u53D1\\u751F\\u9519\\u8BEF\\u65F6\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(r.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(r.ul,{children:[`\n`,(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:\"https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary\",children:\"React documentation on error boundaries\"})}),`\n`]})]})}function C(e={}){let{wrapper:r}=e.components||{};return r?(0,n.jsx)(r,Object.assign({},e,{children:(0,n.jsx)(l,e)})):l(e)}var v=C;return y(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(e,r)=>()=>(r||e((r={exports:{}}).exports,r),r.exports),E=(e,r)=>{for(var t in r)c(e,t,{get:r[t],enumerable:!0})},h=(e,r,t,i)=>{if(r&&typeof r==\"object\"||typeof r==\"function\")for(let o of m(r))!g.call(e,o)&&o!==t&&c(e,o,{get:()=>r[o],enumerable:!(i=u(r,o))||i.enumerable});return e};var y=(e,r,t)=>(t=e!=null?p(f(e)):{},h(r||!e||!e.__esModule?c(t,\"default\",{value:e,enumerable:!0}):t,e)),C=e=>h(c({},\"__esModule\",{value:!0}),e);var a=x((j,d)=>{d.exports=_jsx_runtime});var D={};E(D,{default:()=>s,frontmatter:()=>v});var n=y(a()),v={title:\"React \\u4E2D\\u7684\\u9519\\u8BEF\\u8FB9\\u754C\\u662F\\u505A\\u4EC0\\u4E48\\u7684\\uFF1F\"};function l(e){let r={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(r.p,{children:[\"React \\u4E2D\\u7684\\u9519\\u8BEF\\u8FB9\\u754C\\u662F\\u6355\\u83B7\\u5176\\u5B50\\u7EC4\\u4EF6\\u6811\\u4E2D\\u4EFB\\u4F55\\u4F4D\\u7F6E\\u7684 JavaScript \\u9519\\u8BEF\\u7684\\u7EC4\\u4EF6\\uFF0C\\u8BB0\\u5F55\\u8FD9\\u4E9B\\u9519\\u8BEF\\uFF0C\\u5E76\\u663E\\u793A\\u5907\\u7528 UI\\uFF0C\\u800C\\u4E0D\\u662F\\u5D29\\u6E83\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\\u5B83\\u4EEC\\u4F7F\\u7528 \",(0,n.jsx)(r.code,{children:\"componentDidCatch\"}),\" \\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\\u548C \",(0,n.jsx)(r.code,{children:\"static getDerivedStateFromError\"}),\" \\u65B9\\u6CD5\\u5B9E\\u73B0\\u3002\\u9519\\u8BEF\\u8FB9\\u754C\\u4E0D\\u4F1A\\u6355\\u83B7\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u3001\\u5F02\\u6B65\\u4EE3\\u7801\\u6216\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\u4E2D\\u7684\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsx)(r.hr,{}),`\n`,(0,n.jsx)(r.h2,{children:\"React \\u4E2D\\u7684\\u9519\\u8BEF\\u8FB9\\u754C\\u662F\\u505A\\u4EC0\\u4E48\\u7684\\uFF1F\"}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u7B80\\u4ECB\"}),`\n`,(0,n.jsx)(r.p,{children:\"\\u9519\\u8BEF\\u8FB9\\u754C\\u662F React \\u4E2D\\u7684\\u4E00\\u9879\\u529F\\u80FD\\uFF0C\\u6709\\u52A9\\u4E8E\\u4EE5\\u66F4\\u4F18\\u96C5\\u7684\\u65B9\\u5F0F\\u7BA1\\u7406\\u548C\\u5904\\u7406\\u9519\\u8BEF\\u3002\\u5B83\\u4EEC\\u5141\\u8BB8\\u5F00\\u53D1\\u4EBA\\u5458\\u6355\\u83B7\\u5176\\u7EC4\\u4EF6\\u6811\\u4E2D\\u4EFB\\u4F55\\u4F4D\\u7F6E\\u7684 JavaScript \\u9519\\u8BEF\\uFF0C\\u8BB0\\u5F55\\u8FD9\\u4E9B\\u9519\\u8BEF\\uFF0C\\u5E76\\u663E\\u793A\\u5907\\u7528 UI\\uFF0C\\u800C\\u4E0D\\u662F\\u5D29\\u6E83\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\"}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u5982\\u4F55\\u5B9E\\u73B0\\u9519\\u8BEF\\u8FB9\\u754C\"}),`\n`,(0,n.jsx)(r.p,{children:\"\\u8981\\u521B\\u5EFA\\u9519\\u8BEF\\u8FB9\\u754C\\uFF0C\\u60A8\\u9700\\u8981\\u5B9A\\u4E49\\u4E00\\u4E2A\\u7C7B\\u7EC4\\u4EF6\\uFF0C\\u8BE5\\u7EC4\\u4EF6\\u5B9E\\u73B0\\u4EE5\\u4E0B\\u4E00\\u4E2A\\u6216\\u4E24\\u4E2A\\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\\uFF1A\"}),`\n`,(0,n.jsxs)(r.ul,{children:[`\n`,(0,n.jsxs)(r.li,{children:[(0,n.jsx)(r.code,{children:\"static getDerivedStateFromError(error)\"}),\"\\uFF1A\\u6B64\\u65B9\\u6CD5\\u7528\\u4E8E\\u66F4\\u65B0\\u72B6\\u6001\\uFF0C\\u4EE5\\u4FBF\\u4E0B\\u4E00\\u6B21\\u6E32\\u67D3\\u5C06\\u663E\\u793A\\u5907\\u7528 UI\\u3002\"]}),`\n`,(0,n.jsxs)(r.li,{children:[(0,n.jsx)(r.code,{children:\"componentDidCatch(error, info)\"}),\"\\uFF1A\\u6B64\\u65B9\\u6CD5\\u7528\\u4E8E\\u8BB0\\u5F55\\u9519\\u8BEF\\u4FE1\\u606F\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(r.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u9519\\u8BEF\\u8FB9\\u754C\\u7EC4\\u4EF6\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:\"language-jsx\",children:`import React, { Component } from 'react';\n\nclass ErrorBoundary extends Component {\n  constructor(props) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError(error) {\n    // Update state so the next render shows the fallback UI\n    return { hasError: true };\n  }\n\n  componentDidCatch(error, errorInfo) {\n    // You can also log the error to an error reporting service\n    console.error('Error caught by ErrorBoundary: ', error, errorInfo);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      // You can render any custom fallback UI\n      return <h1>Something went wrong.</h1>;\n    }\n\n    return this.props.children;\n  }\n}\n\nexport default ErrorBoundary;\n`})}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u7528\\u6CD5\"}),`\n`,(0,n.jsx)(r.p,{children:\"\\u8981\\u4F7F\\u7528\\u9519\\u8BEF\\u8FB9\\u754C\\uFF0C\\u8BF7\\u5C06\\u5176\\u5305\\u88C5\\u5728\\u60A8\\u8981\\u76D1\\u89C6\\u9519\\u8BEF\\u7684\\u4EFB\\u4F55\\u7EC4\\u4EF6\\u5468\\u56F4\\uFF1A\"}),`\n`,(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:\"language-jsx\",children:`<ErrorBoundary>\n  <MyComponent />\n</ErrorBoundary>\n`})}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u9650\\u5236\"}),`\n`,(0,n.jsx)(r.p,{children:\"\\u9519\\u8BEF\\u8FB9\\u754C\\u6709\\u4E00\\u4E9B\\u9650\\u5236\\uFF1A\"}),`\n`,(0,n.jsxs)(r.ul,{children:[`\n`,(0,n.jsxs)(r.li,{children:[\"\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u6355\\u83B7\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D\\u7684\\u9519\\u8BEF\\u3002\\u5BF9\\u4E8E\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\uFF0C\\u60A8\\u9700\\u8981\\u4F7F\\u7528\\u5E38\\u89C4\\u7684 JavaScript \",(0,n.jsx)(r.code,{children:\"try\"}),\"/\",(0,n.jsx)(r.code,{children:\"catch\"}),\" \\u5757\\u3002\"]}),`\n`,(0,n.jsxs)(r.li,{children:[\"\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u6355\\u83B7\\u5F02\\u6B65\\u4EE3\\u7801\\u4E2D\\u7684\\u9519\\u8BEF\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(r.code,{children:\"setTimeout\"}),\" \\u6216 \",(0,n.jsx)(r.code,{children:\"requestAnimationFrame\"}),\" \\u56DE\\u8C03\\uFF09\\u3002\"]}),`\n`,(0,n.jsx)(r.li,{children:\"\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u6355\\u83B7\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\\u671F\\u95F4\\u7684\\u9519\\u8BEF\\u3002\"}),`\n`,(0,n.jsx)(r.li,{children:\"\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u6355\\u83B7\\u5728\\u9519\\u8BEF\\u8FB9\\u754C\\u672C\\u8EAB\\u4E2D\\u629B\\u51FA\\u7684\\u9519\\u8BEF\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(r.h3,{children:\"\\u6700\\u4F73\\u5B9E\\u8DF5\"}),`\n`,(0,n.jsxs)(r.ul,{children:[`\n`,(0,n.jsx)(r.li,{children:\"\\u4F7F\\u7528\\u9519\\u8BEF\\u8FB9\\u754C\\u6765\\u5305\\u88C5\\u9AD8\\u7EA7\\u7EC4\\u4EF6\\uFF0C\\u4F8B\\u5982\\u8DEF\\u7531\\u5904\\u7406\\u7A0B\\u5E8F\\u6216\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4E3B\\u8981\\u90E8\\u5206\\u3002\"}),`\n`,(0,n.jsx)(r.li,{children:\"\\u5C06\\u9519\\u8BEF\\u8BB0\\u5F55\\u5230\\u9519\\u8BEF\\u62A5\\u544A\\u670D\\u52A1\\uFF0C\\u4EE5\\u8DDF\\u8E2A\\u751F\\u4EA7\\u4E2D\\u7684\\u95EE\\u9898\\u3002\"}),`\n`,(0,n.jsx)(r.li,{children:\"\\u63D0\\u4F9B\\u7528\\u6237\\u53CB\\u597D\\u7684\\u5907\\u7528 UI\\uFF0C\\u4EE5\\u6539\\u5584\\u53D1\\u751F\\u9519\\u8BEF\\u65F6\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(r.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(r.ul,{children:[`\n`,(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:\"https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary\",children:\"React documentation on error boundaries\"})}),`\n`]})]})}function s(e={}){let{wrapper:r}=e.components||{};return r?(0,n.jsx)(r,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}return C(D);})();\n;return Component;"
 }
\ No newline at end of file
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 43f3ccee6..78cbeb358 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-event-listeners-and-how-are-they-used/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var p=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var i in e)o(t,i,{get:e[i],enumerable:!0})},c=(t,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!g.call(t,r)&&r!==i&&o(t,r,{get:()=>e[r],enumerable:!(s=u(e,r))||s.enumerable});return t};var w=(t,e,i)=>(i=t!=null?h(v(t)):{},c(e||!t||!t.__esModule?o(i,\"default\",{value:t,enumerable:!0}):i,t)),y=t=>c(o({},\"__esModule\",{value:!0}),t);var a=p((x,l)=>{l.exports=_jsx_runtime});var L={};f(L,{default:()=>b,frontmatter:()=>k});var n=w(a()),k={title:\"What are event listeners and how are they used?\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",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:[\"Event listeners are functions that wait for specific events to occur on elements, such as clicks or key presses. They are used to execute code in response to these events. You can add an event listener to an element using the \",(0,n.jsx)(e.code,{children:\"addEventListener\"}),\" method. For example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.getElementById('myButton').addEventListener('click', function () {\n  alert('Button was clicked!');\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are event listeners and how are they used?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Event listeners are a fundamental part of web development, allowing developers to make web pages interactive by responding to user actions. They are functions that wait for specific events to occur on elements, such as clicks, key presses, or mouse movements, and then execute a specified function when those events occur.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Adding an event listener\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To add an event listener to an element, you use the \",(0,n.jsx)(e.code,{children:\"addEventListener\"}),\" method. This method takes two main arguments: the type of event to listen for and the function to execute when the event occurs.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const button = document.getElementById('myButton');\n\nbutton.addEventListener('click', function () {\n  alert('Button was clicked!');\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, an event listener is added to a button element with the ID \",(0,n.jsx)(e.code,{children:\"myButton\"}),'. When the button is clicked, an alert box will appear with the message \"Button was clicked!\".']}),`\n`,(0,n.jsx)(e.h3,{children:\"Removing an event listener\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can also remove an event listener using the \",(0,n.jsx)(e.code,{children:\"removeEventListener\"}),\" method. This method requires the same arguments as \",(0,n.jsx)(e.code,{children:\"addEventListener\"}),\": the event type and the function to remove.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function handleClick() {\n  alert('Button was clicked!');\n}\n\nbutton.addEventListener('click', handleClick);\n\n// Later, you can remove the event listener\nbutton.removeEventListener('click', handleClick);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Event object\"}),`\n`,(0,n.jsx)(e.p,{children:\"When an event listener is triggered, an event object is passed to the event handler function. This object contains useful information about the event, such as the target element, the type of event, and more.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`button.addEventListener('click', function (event) {\n  console.log('Event type:', event.type);\n  console.log('Target element:', event.target);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Common event types\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"click\"}),\": Triggered when an element is clicked\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"mouseover\"}),\": Triggered when the mouse pointer is moved over an element\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"mouseout\"}),\": Triggered when the mouse pointer is moved out of an element\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"keydown\"}),\": Triggered when a key is pressed down\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"keyup\"}),\": Triggered when a key is released\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Event delegation\"}),`\n`,(0,n.jsx)(e.p,{children:\"Event delegation is a technique where a single event listener is added to a parent element to manage events for multiple child elements. This is useful for improving performance and managing dynamic content.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const list = document.getElementById('myList');\n\nlist.addEventListener('click', function (event) {\n  if (event.target && event.target.nodeName === 'LI') {\n    console.log('List item clicked:', event.target.textContent);\n  }\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, a single event listener is added to a list element. When any list item (\",(0,n.jsx)(e.code,{children:\"LI\"}),\") is clicked, the event listener will handle the event.\"]}),`\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/Web/API/EventTarget/addEventListener\",children:\"MDN Web Docs: EventTarget.addEventListener()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/introduction-browser-events\",children:\"JavaScript.info: Introduction to browser events\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3schools.com/js/js_htmldom_eventlistener.asp\",children:\"W3Schools: JavaScript Event Listeners\"})}),`\n`]})]})}function E(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var b=E;return y(L);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var i in e)o(t,i,{get:e[i],enumerable:!0})},s=(t,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of v(e))!g.call(t,r)&&r!==i&&o(t,r,{get:()=>e[r],enumerable:!(c=m(e,r))||c.enumerable});return t};var y=(t,e,i)=>(i=t!=null?u(p(t)):{},s(e||!t||!t.__esModule?o(i,\"default\",{value:t,enumerable:!0}):i,t)),k=t=>s(o({},\"__esModule\",{value:!0}),t);var d=f((x,l)=>{l.exports=_jsx_runtime});var L={};w(L,{default:()=>h,frontmatter:()=>E});var n=y(d()),E={title:\"What are event listeners and how are they used?\"};function a(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Event listeners are functions that wait for specific events to occur on elements, such as clicks or key presses. They are used to execute code in response to these events. You can add an event listener to an element using the \",(0,n.jsx)(e.code,{children:\"addEventListener\"}),\" method. For example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.getElementById('myButton').addEventListener('click', function () {\n  alert('Button was clicked!');\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are event listeners and how are they used?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Event listeners are a fundamental part of web development, allowing developers to make web pages interactive by responding to user actions. They are functions that wait for specific events to occur on elements, such as clicks, key presses, or mouse movements, and then execute a specified function when those events occur.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Adding an event listener\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To add an event listener to an element, you use the \",(0,n.jsx)(e.code,{children:\"addEventListener\"}),\" method. This method takes two main arguments: the type of event to listen for and the function to execute when the event occurs.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const button = document.getElementById('myButton');\n\nbutton.addEventListener('click', function () {\n  alert('Button was clicked!');\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, an event listener is added to a button element with the ID \",(0,n.jsx)(e.code,{children:\"myButton\"}),'. When the button is clicked, an alert box will appear with the message \"Button was clicked!\".']}),`\n`,(0,n.jsx)(e.h3,{children:\"Removing an event listener\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can also remove an event listener using the \",(0,n.jsx)(e.code,{children:\"removeEventListener\"}),\" method. This method requires the same arguments as \",(0,n.jsx)(e.code,{children:\"addEventListener\"}),\": the event type and the function to remove.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function handleClick() {\n  alert('Button was clicked!');\n}\n\nbutton.addEventListener('click', handleClick);\n\n// Later, you can remove the event listener\nbutton.removeEventListener('click', handleClick);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Event object\"}),`\n`,(0,n.jsx)(e.p,{children:\"When an event listener is triggered, an event object is passed to the event handler function. This object contains useful information about the event, such as the target element, the type of event, and more.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`button.addEventListener('click', function (event) {\n  console.log('Event type:', event.type);\n  console.log('Target element:', event.target);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Common event types\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"click\"}),\": Triggered when an element is clicked\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"mouseover\"}),\": Triggered when the mouse pointer is moved over an element\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"mouseout\"}),\": Triggered when the mouse pointer is moved out of an element\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"keydown\"}),\": Triggered when a key is pressed down\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"keyup\"}),\": Triggered when a key is released\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Event delegation\"}),`\n`,(0,n.jsx)(e.p,{children:\"Event delegation is a technique where a single event listener is added to a parent element to manage events for multiple child elements. This is useful for improving performance and managing dynamic content.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const list = document.getElementById('myList');\n\nlist.addEventListener('click', function (event) {\n  if (event.target && event.target.nodeName === 'LI') {\n    console.log('List item clicked:', event.target.textContent);\n  }\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, a single event listener is added to a list element. When any list item (\",(0,n.jsx)(e.code,{children:\"LI\"}),\") is clicked, the event listener will handle the event.\"]}),`\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/Web/API/EventTarget/addEventListener\",children:\"MDN Web Docs: EventTarget.addEventListener()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/introduction-browser-events\",children:\"JavaScript.info: Introduction to browser events\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3schools.com/js/js_htmldom_eventlistener.asp\",children:\"W3Schools: JavaScript Event Listeners\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(a,{...t})}):a(t)}return k(L);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-event-listeners-and-how-are-they-used/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-event-listeners-and-how-are-they-used/zh-CN.json
index d7a43e9b0..fa829b75d 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-event-listeners-and-how-are-they-used/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-event-listeners-and-how-are-they-used/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-event-listeners-and-how-are-they-used/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),L=(t,e)=>{for(var c in e)i(t,c,{get:e[c],enumerable:!0})},d=(t,e,c,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!p.call(t,r)&&r!==c&&i(t,r,{get:()=>e[r],enumerable:!(l=u(e,r))||l.enumerable});return t};var E=(t,e,c)=>(c=t!=null?a(v(t)):{},d(e||!t||!t.__esModule?i(c,\"default\",{value:t,enumerable:!0}):c,t)),k=t=>d(i({},\"__esModule\",{value:!0}),t);var h=g((x,o)=>{o.exports=_jsx_runtime});var b={};L(b,{default:()=>y,frontmatter:()=>f});var n=E(h()),f={title:\"\\u4EC0\\u4E48\\u662F\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u4EEC\\uFF1F\"};function s(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",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:[\"\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u662F\\u7B49\\u5F85\\u5143\\u7D20\\u4E0A\\u53D1\\u751F\\u7279\\u5B9A\\u4E8B\\u4EF6\\uFF08\\u4F8B\\u5982\\u5355\\u51FB\\u6216\\u6309\\u952E\\uFF09\\u7684\\u51FD\\u6570\\u3002\\u5B83\\u4EEC\\u7528\\u4E8E\\u54CD\\u5E94\\u8FD9\\u4E9B\\u4E8B\\u4EF6\\u6267\\u884C\\u4EE3\\u7801\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"addEventListener\"}),\" \\u65B9\\u6CD5\\u5C06\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u6DFB\\u52A0\\u5230\\u5143\\u7D20\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.getElementById('myButton').addEventListener('click', function () {\n  alert('Button was clicked!');\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u4EEC\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u662F Web \\u5F00\\u53D1\\u7684\\u57FA\\u672C\\u7EC4\\u6210\\u90E8\\u5206\\uFF0C\\u5141\\u8BB8\\u5F00\\u53D1\\u4EBA\\u5458\\u901A\\u8FC7\\u54CD\\u5E94\\u7528\\u6237\\u64CD\\u4F5C\\u6765\\u4F7F\\u7F51\\u9875\\u5177\\u6709\\u4EA4\\u4E92\\u6027\\u3002\\u5B83\\u4EEC\\u662F\\u7B49\\u5F85\\u5143\\u7D20\\u4E0A\\u53D1\\u751F\\u7279\\u5B9A\\u4E8B\\u4EF6\\uFF08\\u4F8B\\u5982\\u5355\\u51FB\\u3001\\u6309\\u952E\\u6216\\u9F20\\u6807\\u79FB\\u52A8\\uFF09\\u7684\\u51FD\\u6570\\uFF0C\\u7136\\u540E\\u5728\\u8FD9\\u4E9B\\u4E8B\\u4EF6\\u53D1\\u751F\\u65F6\\u6267\\u884C\\u6307\\u5B9A\\u7684\\u51FD\\u6570\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6DFB\\u52A0\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u5C06\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u6DFB\\u52A0\\u5230\\u5143\\u7D20\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"addEventListener\"}),\" \\u65B9\\u6CD5\\u3002\\u6B64\\u65B9\\u6CD5\\u63A5\\u53D7\\u4E24\\u4E2A\\u4E3B\\u8981\\u53C2\\u6570\\uFF1A\\u8981\\u4FA6\\u542C\\u7684\\u4E8B\\u4EF6\\u7C7B\\u578B\\u548C\\u4E8B\\u4EF6\\u53D1\\u751F\\u65F6\\u8981\\u6267\\u884C\\u7684\\u51FD\\u6570\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const button = document.getElementById('myButton');\n\nbutton.addEventListener('click', function () {\n  alert('Button was clicked!');\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u5C06\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u6DFB\\u52A0\\u5230 ID \\u4E3A \",(0,n.jsx)(e.code,{children:\"myButton\"}),\" \\u7684\\u6309\\u94AE\\u5143\\u7D20\\u3002\\u5355\\u51FB\\u8BE5\\u6309\\u94AE\\u65F6\\uFF0C\\u5C06\\u5F39\\u51FA\\u4E00\\u4E2A\\u8B66\\u62A5\\u6846\\uFF0C\\u5176\\u4E2D\\u663E\\u793A\\u6D88\\u606F\\u201CButton was clicked!\\u201D\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u79FB\\u9664\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"removeEventListener\"}),\" \\u65B9\\u6CD5\\u79FB\\u9664\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u3002\\u6B64\\u65B9\\u6CD5\\u9700\\u8981\\u4E0E \",(0,n.jsx)(e.code,{children:\"addEventListener\"}),\" \\u76F8\\u540C\\u7684\\u53C2\\u6570\\uFF1A\\u4E8B\\u4EF6\\u7C7B\\u578B\\u548C\\u8981\\u79FB\\u9664\\u7684\\u51FD\\u6570\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function handleClick() {\n  alert('Button was clicked!');\n}\n\nbutton.addEventListener('click', handleClick);\n\n// Later, you can remove the event listener\nbutton.removeEventListener('click', handleClick);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E8B\\u4EF6\\u5BF9\\u8C61\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u89E6\\u53D1\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u65F6\\uFF0C\\u4F1A\\u5C06\\u4E00\\u4E2A\\u4E8B\\u4EF6\\u5BF9\\u8C61\\u4F20\\u9012\\u7ED9\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u51FD\\u6570\\u3002\\u6B64\\u5BF9\\u8C61\\u5305\\u542B\\u6709\\u5173\\u4E8B\\u4EF6\\u7684\\u6709\\u7528\\u4FE1\\u606F\\uFF0C\\u4F8B\\u5982\\u76EE\\u6807\\u5143\\u7D20\\u3001\\u4E8B\\u4EF6\\u7C7B\\u578B\\u7B49\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`button.addEventListener('click', function (event) {\n  console.log('Event type:', event.type);\n  console.log('Target element:', event.target);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5E38\\u89C1\\u4E8B\\u4EF6\\u7C7B\\u578B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"click\"}),\": \\u5355\\u51FB\\u5143\\u7D20\\u65F6\\u89E6\\u53D1\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"mouseover\"}),\": \\u9F20\\u6807\\u6307\\u9488\\u79FB\\u52A8\\u5230\\u5143\\u7D20\\u4E0A\\u65F6\\u89E6\\u53D1\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"mouseout\"}),\": \\u9F20\\u6807\\u6307\\u9488\\u79FB\\u51FA\\u5143\\u7D20\\u65F6\\u89E6\\u53D1\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"keydown\"}),\": \\u6309\\u4E0B\\u67D0\\u4E2A\\u952E\\u65F6\\u89E6\\u53D1\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"keyup\"}),\": \\u91CA\\u653E\\u67D0\\u4E2A\\u952E\\u65F6\\u89E6\\u53D1\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E8B\\u4EF6\\u59D4\\u6258\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E8B\\u4EF6\\u59D4\\u6258\\u662F\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u5176\\u4E2D\\u5C06\\u5355\\u4E2A\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u6DFB\\u52A0\\u5230\\u7236\\u5143\\u7D20\\u4EE5\\u7BA1\\u7406\\u591A\\u4E2A\\u5B50\\u5143\\u7D20\\u7684\\u4E8B\\u4EF6\\u3002\\u8FD9\\u5BF9\\u4E8E\\u63D0\\u9AD8\\u6027\\u80FD\\u548C\\u7BA1\\u7406\\u52A8\\u6001\\u5185\\u5BB9\\u5F88\\u6709\\u7528\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const list = document.getElementById('myList');\n\nlist.addEventListener('click', function (event) {\n  if (event.target && event.target.nodeName === 'LI') {\n    console.log('List item clicked:', event.target.textContent);\n  }\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u5C06\\u5355\\u4E2A\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u6DFB\\u52A0\\u5230\\u5217\\u8868\\u5143\\u7D20\\u3002\\u5F53\\u5355\\u51FB\\u4EFB\\u4F55\\u5217\\u8868\\u9879 (\",(0,n.jsx)(e.code,{children:\"LI\"}),\") \\u65F6\\uFF0C\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u5C06\\u5904\\u7406\\u8BE5\\u4E8B\\u4EF6\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/EventTarget/addEventListener\",children:\"MDN Web Docs: EventTarget.addEventListener()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/introduction-browser-events\",children:\"JavaScript.info: Introduction to browser events\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3schools.com/js/js_htmldom_eventlistener.asp\",children:\"W3Schools: JavaScript Event Listeners\"})}),`\n`]})]})}function j(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(s,t)})):s(t)}var y=j;return k(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var L=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),E=(t,e)=>{for(var c in e)l(t,c,{get:e[c],enumerable:!0})},d=(t,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of v(e))!g.call(t,r)&&r!==c&&l(t,r,{get:()=>e[r],enumerable:!(i=m(e,r))||i.enumerable});return t};var k=(t,e,c)=>(c=t!=null?u(p(t)):{},d(e||!t||!t.__esModule?l(c,\"default\",{value:t,enumerable:!0}):c,t)),f=t=>d(l({},\"__esModule\",{value:!0}),t);var h=L((b,o)=>{o.exports=_jsx_runtime});var y={};E(y,{default:()=>a,frontmatter:()=>j});var n=k(h()),j={title:\"\\u4EC0\\u4E48\\u662F\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u4EEC\\uFF1F\"};function s(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u662F\\u7B49\\u5F85\\u5143\\u7D20\\u4E0A\\u53D1\\u751F\\u7279\\u5B9A\\u4E8B\\u4EF6\\uFF08\\u4F8B\\u5982\\u5355\\u51FB\\u6216\\u6309\\u952E\\uFF09\\u7684\\u51FD\\u6570\\u3002\\u5B83\\u4EEC\\u7528\\u4E8E\\u54CD\\u5E94\\u8FD9\\u4E9B\\u4E8B\\u4EF6\\u6267\\u884C\\u4EE3\\u7801\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"addEventListener\"}),\" \\u65B9\\u6CD5\\u5C06\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u6DFB\\u52A0\\u5230\\u5143\\u7D20\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.getElementById('myButton').addEventListener('click', function () {\n  alert('Button was clicked!');\n});\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u4EEC\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u662F Web \\u5F00\\u53D1\\u7684\\u57FA\\u672C\\u7EC4\\u6210\\u90E8\\u5206\\uFF0C\\u5141\\u8BB8\\u5F00\\u53D1\\u4EBA\\u5458\\u901A\\u8FC7\\u54CD\\u5E94\\u7528\\u6237\\u64CD\\u4F5C\\u6765\\u4F7F\\u7F51\\u9875\\u5177\\u6709\\u4EA4\\u4E92\\u6027\\u3002\\u5B83\\u4EEC\\u662F\\u7B49\\u5F85\\u5143\\u7D20\\u4E0A\\u53D1\\u751F\\u7279\\u5B9A\\u4E8B\\u4EF6\\uFF08\\u4F8B\\u5982\\u5355\\u51FB\\u3001\\u6309\\u952E\\u6216\\u9F20\\u6807\\u79FB\\u52A8\\uFF09\\u7684\\u51FD\\u6570\\uFF0C\\u7136\\u540E\\u5728\\u8FD9\\u4E9B\\u4E8B\\u4EF6\\u53D1\\u751F\\u65F6\\u6267\\u884C\\u6307\\u5B9A\\u7684\\u51FD\\u6570\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6DFB\\u52A0\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u5C06\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u6DFB\\u52A0\\u5230\\u5143\\u7D20\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"addEventListener\"}),\" \\u65B9\\u6CD5\\u3002\\u6B64\\u65B9\\u6CD5\\u63A5\\u53D7\\u4E24\\u4E2A\\u4E3B\\u8981\\u53C2\\u6570\\uFF1A\\u8981\\u4FA6\\u542C\\u7684\\u4E8B\\u4EF6\\u7C7B\\u578B\\u548C\\u4E8B\\u4EF6\\u53D1\\u751F\\u65F6\\u8981\\u6267\\u884C\\u7684\\u51FD\\u6570\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const button = document.getElementById('myButton');\n\nbutton.addEventListener('click', function () {\n  alert('Button was clicked!');\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u5C06\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u6DFB\\u52A0\\u5230 ID \\u4E3A \",(0,n.jsx)(e.code,{children:\"myButton\"}),\" \\u7684\\u6309\\u94AE\\u5143\\u7D20\\u3002\\u5355\\u51FB\\u8BE5\\u6309\\u94AE\\u65F6\\uFF0C\\u5C06\\u5F39\\u51FA\\u4E00\\u4E2A\\u8B66\\u62A5\\u6846\\uFF0C\\u5176\\u4E2D\\u663E\\u793A\\u6D88\\u606F\\u201CButton was clicked!\\u201D\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u79FB\\u9664\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u8FD8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"removeEventListener\"}),\" \\u65B9\\u6CD5\\u79FB\\u9664\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u3002\\u6B64\\u65B9\\u6CD5\\u9700\\u8981\\u4E0E \",(0,n.jsx)(e.code,{children:\"addEventListener\"}),\" \\u76F8\\u540C\\u7684\\u53C2\\u6570\\uFF1A\\u4E8B\\u4EF6\\u7C7B\\u578B\\u548C\\u8981\\u79FB\\u9664\\u7684\\u51FD\\u6570\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function handleClick() {\n  alert('Button was clicked!');\n}\n\nbutton.addEventListener('click', handleClick);\n\n// Later, you can remove the event listener\nbutton.removeEventListener('click', handleClick);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E8B\\u4EF6\\u5BF9\\u8C61\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u89E6\\u53D1\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u65F6\\uFF0C\\u4F1A\\u5C06\\u4E00\\u4E2A\\u4E8B\\u4EF6\\u5BF9\\u8C61\\u4F20\\u9012\\u7ED9\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u51FD\\u6570\\u3002\\u6B64\\u5BF9\\u8C61\\u5305\\u542B\\u6709\\u5173\\u4E8B\\u4EF6\\u7684\\u6709\\u7528\\u4FE1\\u606F\\uFF0C\\u4F8B\\u5982\\u76EE\\u6807\\u5143\\u7D20\\u3001\\u4E8B\\u4EF6\\u7C7B\\u578B\\u7B49\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`button.addEventListener('click', function (event) {\n  console.log('Event type:', event.type);\n  console.log('Target element:', event.target);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5E38\\u89C1\\u4E8B\\u4EF6\\u7C7B\\u578B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"click\"}),\": \\u5355\\u51FB\\u5143\\u7D20\\u65F6\\u89E6\\u53D1\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"mouseover\"}),\": \\u9F20\\u6807\\u6307\\u9488\\u79FB\\u52A8\\u5230\\u5143\\u7D20\\u4E0A\\u65F6\\u89E6\\u53D1\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"mouseout\"}),\": \\u9F20\\u6807\\u6307\\u9488\\u79FB\\u51FA\\u5143\\u7D20\\u65F6\\u89E6\\u53D1\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"keydown\"}),\": \\u6309\\u4E0B\\u67D0\\u4E2A\\u952E\\u65F6\\u89E6\\u53D1\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"keyup\"}),\": \\u91CA\\u653E\\u67D0\\u4E2A\\u952E\\u65F6\\u89E6\\u53D1\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E8B\\u4EF6\\u59D4\\u6258\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E8B\\u4EF6\\u59D4\\u6258\\u662F\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u5176\\u4E2D\\u5C06\\u5355\\u4E2A\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u6DFB\\u52A0\\u5230\\u7236\\u5143\\u7D20\\u4EE5\\u7BA1\\u7406\\u591A\\u4E2A\\u5B50\\u5143\\u7D20\\u7684\\u4E8B\\u4EF6\\u3002\\u8FD9\\u5BF9\\u4E8E\\u63D0\\u9AD8\\u6027\\u80FD\\u548C\\u7BA1\\u7406\\u52A8\\u6001\\u5185\\u5BB9\\u5F88\\u6709\\u7528\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const list = document.getElementById('myList');\n\nlist.addEventListener('click', function (event) {\n  if (event.target && event.target.nodeName === 'LI') {\n    console.log('List item clicked:', event.target.textContent);\n  }\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u5C06\\u5355\\u4E2A\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u6DFB\\u52A0\\u5230\\u5217\\u8868\\u5143\\u7D20\\u3002\\u5F53\\u5355\\u51FB\\u4EFB\\u4F55\\u5217\\u8868\\u9879 (\",(0,n.jsx)(e.code,{children:\"LI\"}),\") \\u65F6\\uFF0C\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u5C06\\u5904\\u7406\\u8BE5\\u4E8B\\u4EF6\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/EventTarget/addEventListener\",children:\"MDN Web Docs: EventTarget.addEventListener()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/introduction-browser-events\",children:\"JavaScript.info: Introduction to browser events\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3schools.com/js/js_htmldom_eventlistener.asp\",children:\"W3Schools: JavaScript Event Listeners\"})}),`\n`]})]})}function a(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(s,{...t})}):s(t)}return f(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-higher-order-components-in-react/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-higher-order-components-in-react/en-US.json
index eaf8808b1..f0f648f6b 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-higher-order-components-in-react/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-higher-order-components-in-react/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-are-higher-order-components-in-react/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var C=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),f=(o,n)=>{for(var r in n)a(o,r,{get:n[r],enumerable:!0})},c=(o,n,r,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of m(n))!g.call(o,t)&&t!==r&&a(o,t,{get:()=>n[t],enumerable:!(i=l(n,t))||i.enumerable});return o};var x=(o,n,r)=>(r=o!=null?d(u(o)):{},c(n||!o||!o.__esModule?a(r,\"default\",{value:o,enumerable:!0}):r,o)),w=o=>c(a({},\"__esModule\",{value:!0}),o);var h=C((b,s)=>{s.exports=_jsx_runtime});var y={};f(y,{default:()=>v,frontmatter:()=>H});var e=x(h()),H={title:\"What are higher order components in React?\"};function p(o){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},o.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Higher order components (HOCs) in React are functions that take a component and return a new component with additional props or behavior. They are used to reuse component logic. For example, if you have a component \",(0,e.jsx)(n.code,{children:\"MyComponent\"}),\", you can create an HOC like this:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`const withExtraProps = (WrappedComponent) => {\n  return (props) => <WrappedComponent {...props} extraProp=\"value\" />;\n};\n\nconst EnhancedComponent = withExtraProps(MyComponent);\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"What are higher order components in React?\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Definition\"}),`\n`,(0,e.jsx)(n.p,{children:\"Higher order components (HOCs) are functions in React that take a component as an argument and return a new component. The new component typically wraps the original component and adds additional props, state, or behavior. HOCs are a pattern for reusing component logic.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Purpose\"}),`\n`,(0,e.jsx)(n.p,{children:\"HOCs are used to:\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"Share common functionality between components\"}),`\n`,(0,e.jsx)(n.li,{children:\"Abstract and reuse component logic\"}),`\n`,(0,e.jsx)(n.li,{children:\"Enhance components with additional props or state\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Example\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Here is a simple example of an HOC that adds an \",(0,e.jsx)(n.code,{children:\"extraProp\"}),\" to a wrapped component:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import React from 'react';\n\n// Define the HOC\nconst withExtraProps = (WrappedComponent) => {\n  return (props) => {\n    return <WrappedComponent {...props} extraProp=\"value\" />;\n  };\n};\n\n// Define a component to be wrapped\nconst MyComponent = (props) => {\n  return <div>{props.extraProp}</div>;\n};\n\n// Wrap the component using the HOC\nconst EnhancedComponent = withExtraProps(MyComponent);\n\n// Use the enhanced component\nconst App = () => {\n  return <EnhancedComponent />;\n};\n\nexport default App;\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In this example, \",(0,e.jsx)(n.code,{children:\"withExtraProps\"}),\" is an HOC that adds an \",(0,e.jsx)(n.code,{children:\"extraProp\"}),\" to \",(0,e.jsx)(n.code,{children:\"MyComponent\"}),\". The \",(0,e.jsx)(n.code,{children:\"EnhancedComponent\"}),\" now has access to \",(0,e.jsx)(n.code,{children:\"extraProp\"}),\".\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Common use cases\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Authentication\"}),\": Wrapping components to check if a user is authenticated before rendering.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Logging\"}),\": Adding logging functionality to components.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Theming\"}),\": Injecting theme-related props into components.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Data fetching\"}),\": Fetching data and passing it as props to components.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Best practices\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Do not mutate the original component\"}),\": Always return a new component.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Use HOCs sparingly\"}),\": Overusing HOCs can make the code harder to understand.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Name the HOC properly\"}),\": Use a descriptive name that indicates what the HOC does.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Alternatives\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Render props\"}),\": A pattern where a component uses a function as a prop to determine what to render.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Hooks\"}),\": Custom hooks can be used to share logic between functional components.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e\",children:\"Understanding higher order components in React\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://blog.logrocket.com/hooks-vs-render-props-vs-hocs/\",children:\"HOCs vs Render Props vs Hooks\"})}),`\n`]})]})}function O(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,Object.assign({},o,{children:(0,e.jsx)(p,o)})):p(o)}var v=O;return w(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var l=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var f=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),x=(o,n)=>{for(var r in n)a(o,r,{get:n[r],enumerable:!0})},c=(o,n,r,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of u(n))!C.call(o,t)&&t!==r&&a(o,t,{get:()=>n[t],enumerable:!(i=m(n,t))||i.enumerable});return o};var w=(o,n,r)=>(r=o!=null?l(g(o)):{},c(n||!o||!o.__esModule?a(r,\"default\",{value:o,enumerable:!0}):r,o)),H=o=>c(a({},\"__esModule\",{value:!0}),o);var p=f((P,h)=>{h.exports=_jsx_runtime});var y={};x(y,{default:()=>d,frontmatter:()=>v});var e=w(p()),v={title:\"What are higher order components in React?\"};function s(o){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...o.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Higher order components (HOCs) in React are functions that take a component and return a new component with additional props or behavior. They are used to reuse component logic. For example, if you have a component \",(0,e.jsx)(n.code,{children:\"MyComponent\"}),\", you can create an HOC like this:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`const withExtraProps = (WrappedComponent) => {\n  return (props) => <WrappedComponent {...props} extraProp=\"value\" />;\n};\n\nconst EnhancedComponent = withExtraProps(MyComponent);\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"What are higher order components in React?\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Definition\"}),`\n`,(0,e.jsx)(n.p,{children:\"Higher order components (HOCs) are functions in React that take a component as an argument and return a new component. The new component typically wraps the original component and adds additional props, state, or behavior. HOCs are a pattern for reusing component logic.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Purpose\"}),`\n`,(0,e.jsx)(n.p,{children:\"HOCs are used to:\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"Share common functionality between components\"}),`\n`,(0,e.jsx)(n.li,{children:\"Abstract and reuse component logic\"}),`\n`,(0,e.jsx)(n.li,{children:\"Enhance components with additional props or state\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Example\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Here is a simple example of an HOC that adds an \",(0,e.jsx)(n.code,{children:\"extraProp\"}),\" to a wrapped component:\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import React from 'react';\n\n// Define the HOC\nconst withExtraProps = (WrappedComponent) => {\n  return (props) => {\n    return <WrappedComponent {...props} extraProp=\"value\" />;\n  };\n};\n\n// Define a component to be wrapped\nconst MyComponent = (props) => {\n  return <div>{props.extraProp}</div>;\n};\n\n// Wrap the component using the HOC\nconst EnhancedComponent = withExtraProps(MyComponent);\n\n// Use the enhanced component\nconst App = () => {\n  return <EnhancedComponent />;\n};\n\nexport default App;\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In this example, \",(0,e.jsx)(n.code,{children:\"withExtraProps\"}),\" is an HOC that adds an \",(0,e.jsx)(n.code,{children:\"extraProp\"}),\" to \",(0,e.jsx)(n.code,{children:\"MyComponent\"}),\". The \",(0,e.jsx)(n.code,{children:\"EnhancedComponent\"}),\" now has access to \",(0,e.jsx)(n.code,{children:\"extraProp\"}),\".\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Common use cases\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Authentication\"}),\": Wrapping components to check if a user is authenticated before rendering.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Logging\"}),\": Adding logging functionality to components.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Theming\"}),\": Injecting theme-related props into components.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Data fetching\"}),\": Fetching data and passing it as props to components.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Best practices\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Do not mutate the original component\"}),\": Always return a new component.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Use HOCs sparingly\"}),\": Overusing HOCs can make the code harder to understand.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Name the HOC properly\"}),\": Use a descriptive name that indicates what the HOC does.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Alternatives\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Render props\"}),\": A pattern where a component uses a function as a prop to determine what to render.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Hooks\"}),\": Custom hooks can be used to share logic between functional components.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e\",children:\"Understanding higher order components in React\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://blog.logrocket.com/hooks-vs-render-props-vs-hocs/\",children:\"HOCs vs Render Props vs Hooks\"})}),`\n`]})]})}function d(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,{...o,children:(0,e.jsx)(s,{...o})}):s(o)}return H(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-higher-order-components-in-react/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-higher-order-components-in-react/zh-CN.json
index a7bd00ae9..791ade953 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-higher-order-components-in-react/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-higher-order-components-in-react/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-are-higher-order-components-in-react/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var t=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),x=(r,n)=>{for(var o in n)t(r,o,{get:n[o],enumerable:!0})},l=(r,n,o,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of m(n))!u.call(r,c)&&c!==o&&t(r,c,{get:()=>n[c],enumerable:!(i=a(n,c))||i.enumerable});return r};var H=(r,n,o)=>(o=r!=null?s(C(r)):{},l(n||!r||!r.__esModule?t(o,\"default\",{value:r,enumerable:!0}):o,r)),O=r=>l(t({},\"__esModule\",{value:!0}),r);var p=g((R,h)=>{h.exports=_jsx_runtime});var j={};x(j,{default:()=>v,frontmatter:()=>P});var e=H(p()),P={title:\"React \\u4E2D\\u4EC0\\u4E48\\u662F\\u9AD8\\u9636\\u7EC4\\u4EF6\\uFF1F\"};function d(r){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"React \\u4E2D\\u7684\\u9AD8\\u9636\\u7EC4\\u4EF6 (HOC) \\u662F\\u63A5\\u53D7\\u4E00\\u4E2A\\u7EC4\\u4EF6\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A\\u65B0\\u7EC4\\u4EF6\\u7684\\u51FD\\u6570\\uFF0C\\u8BE5\\u65B0\\u7EC4\\u4EF6\\u5177\\u6709\\u989D\\u5916\\u7684 props \\u6216\\u884C\\u4E3A\\u3002\\u5B83\\u4EEC\\u7528\\u4E8E\\u91CD\\u7528\\u7EC4\\u4EF6\\u903B\\u8F91\\u3002\\u4F8B\\u5982\\uFF0C\\u5982\\u679C\\u60A8\\u6709\\u4E00\\u4E2A\\u7EC4\\u4EF6 \",(0,e.jsx)(n.code,{children:\"MyComponent\"}),\"\\uFF0C\\u60A8\\u53EF\\u4EE5\\u50CF\\u8FD9\\u6837\\u521B\\u5EFA\\u4E00\\u4E2A HOC\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`const withExtraProps = (WrappedComponent) => {\n  return (props) => <WrappedComponent {...props} extraProp=\"value\" />;\n};\n\nconst EnhancedComponent = withExtraProps(MyComponent);\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u4E2D\\u4EC0\\u4E48\\u662F\\u9AD8\\u9636\\u7EC4\\u4EF6\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9AD8\\u9636\\u7EC4\\u4EF6 (HOC) \\u662F React \\u4E2D\\u63A5\\u53D7\\u4E00\\u4E2A\\u7EC4\\u4EF6\\u4F5C\\u4E3A\\u53C2\\u6570\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A\\u65B0\\u7EC4\\u4EF6\\u7684\\u51FD\\u6570\\u3002\\u65B0\\u7EC4\\u4EF6\\u901A\\u5E38\\u4F1A\\u5305\\u88C5\\u539F\\u59CB\\u7EC4\\u4EF6\\u5E76\\u6DFB\\u52A0\\u989D\\u5916\\u7684 props\\u3001state \\u6216\\u884C\\u4E3A\\u3002HOC \\u662F\\u4E00\\u79CD\\u91CD\\u7528\\u7EC4\\u4EF6\\u903B\\u8F91\\u7684\\u6A21\\u5F0F\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u76EE\\u7684\"}),`\n`,(0,e.jsx)(n.p,{children:\"HOC \\u7528\\u4E8E\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5728\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u5171\\u4EAB\\u901A\\u7528\\u529F\\u80FD\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u62BD\\u8C61\\u548C\\u91CD\\u7528\\u7EC4\\u4EF6\\u903B\\u8F91\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u7528\\u989D\\u5916\\u7684 props \\u6216 state \\u589E\\u5F3A\\u7EC4\\u4EF6\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684 HOC \\u793A\\u4F8B\\uFF0C\\u5B83\\u5411\\u5305\\u88C5\\u7684\\u7EC4\\u4EF6\\u6DFB\\u52A0\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"extraProp\"}),\"\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import React from 'react';\n\n// \\u5B9A\\u4E49 HOC\nconst withExtraProps = (WrappedComponent) => {\n  return (props) => {\n    return <WrappedComponent {...props} extraProp=\"value\" />;\n  };\n};\n\n// \\u5B9A\\u4E49\\u8981\\u5305\\u88C5\\u7684\\u7EC4\\u4EF6\nconst MyComponent = (props) => {\n  return <div>{props.extraProp}</div>;\n};\n\n// \\u4F7F\\u7528 HOC \\u5305\\u88C5\\u7EC4\\u4EF6\nconst EnhancedComponent = withExtraProps(MyComponent);\n\n// \\u4F7F\\u7528\\u589E\\u5F3A\\u7EC4\\u4EF6\nconst App = () => {\n  return <EnhancedComponent />;\n};\n\nexport default App;\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"withExtraProps\"}),\" \\u662F\\u4E00\\u4E2A HOC\\uFF0C\\u5B83\\u5411 \",(0,e.jsx)(n.code,{children:\"MyComponent\"}),\" \\u6DFB\\u52A0\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"extraProp\"}),\"\\u3002\",(0,e.jsx)(n.code,{children:\"EnhancedComponent\"}),\" \\u73B0\\u5728\\u53EF\\u4EE5\\u8BBF\\u95EE \",(0,e.jsx)(n.code,{children:\"extraProp\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5E38\\u89C1\\u7528\\u4F8B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8EAB\\u4EFD\\u9A8C\\u8BC1\"}),\"\\uFF1A\\u5728\\u6E32\\u67D3\\u4E4B\\u524D\\u5305\\u88C5\\u7EC4\\u4EF6\\u4EE5\\u68C0\\u67E5\\u7528\\u6237\\u662F\\u5426\\u5DF2\\u901A\\u8FC7\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u65E5\\u5FD7\\u8BB0\\u5F55\"}),\"\\uFF1A\\u5411\\u7EC4\\u4EF6\\u6DFB\\u52A0\\u65E5\\u5FD7\\u8BB0\\u5F55\\u529F\\u80FD\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E3B\\u9898\"}),\"\\uFF1A\\u5C06\\u4E0E\\u4E3B\\u9898\\u76F8\\u5173\\u7684 props \\u6CE8\\u5165\\u5230\\u7EC4\\u4EF6\\u4E2D\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6570\\u636E\\u83B7\\u53D6\"}),\"\\uFF1A\\u83B7\\u53D6\\u6570\\u636E\\u5E76\\u5C06\\u5176\\u4F5C\\u4E3A props \\u4F20\\u9012\\u7ED9\\u7EC4\\u4EF6\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6700\\u4F73\\u5B9E\\u8DF5\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E0D\\u8981\\u6539\\u53D8\\u539F\\u59CB\\u7EC4\\u4EF6\"}),\"\\uFF1A\\u59CB\\u7EC8\\u8FD4\\u56DE\\u4E00\\u4E2A\\u65B0\\u7EC4\\u4EF6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8C28\\u614E\\u4F7F\\u7528 HOC\"}),\"\\uFF1A\\u8FC7\\u5EA6\\u4F7F\\u7528 HOC \\u4F1A\\u4F7F\\u4EE3\\u7801\\u66F4\\u96BE\\u7406\\u89E3\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6B63\\u786E\\u547D\\u540D HOC\"}),\"\\uFF1A\\u4F7F\\u7528\\u4E00\\u4E2A\\u63CF\\u8FF0\\u6027\\u540D\\u79F0\\u6765\\u6307\\u793A HOC \\u7684\\u4F5C\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u66FF\\u4EE3\\u65B9\\u6848\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Render props\"}),\": \\u4E00\\u79CD\\u6A21\\u5F0F\\uFF0C\\u7EC4\\u4EF6\\u4F7F\\u7528\\u51FD\\u6570\\u4F5C\\u4E3A prop \\u6765\\u786E\\u5B9A\\u8981\\u6E32\\u67D3\\u7684\\u5185\\u5BB9\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Hooks\"}),\": \\u81EA\\u5B9A\\u4E49 hooks \\u53EF\\u7528\\u4E8E\\u5728\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u5171\\u4EAB\\u903B\\u8F91\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e\",children:\"\\u7406\\u89E3 React \\u4E2D\\u7684\\u9AD8\\u9636\\u7EC4\\u4EF6\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://blog.logrocket.com/hooks-vs-render-props-vs-hocs/\",children:\"HOCs vs Render Props vs Hooks\"})}),`\n`]})]})}function f(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(d,r)})):d(r)}var v=f;return O(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var a=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),H=(r,n)=>{for(var o in n)t(r,o,{get:n[o],enumerable:!0})},h=(r,n,o,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of C(n))!x.call(r,c)&&c!==o&&t(r,c,{get:()=>n[c],enumerable:!(l=m(n,c))||l.enumerable});return r};var O=(r,n,o)=>(o=r!=null?a(u(r)):{},h(n||!r||!r.__esModule?t(o,\"default\",{value:r,enumerable:!0}):o,r)),P=r=>h(t({},\"__esModule\",{value:!0}),r);var p=g((R,i)=>{i.exports=_jsx_runtime});var v={};H(v,{default:()=>s,frontmatter:()=>f});var e=O(p()),f={title:\"React \\u4E2D\\u4EC0\\u4E48\\u662F\\u9AD8\\u9636\\u7EC4\\u4EF6\\uFF1F\"};function d(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"React \\u4E2D\\u7684\\u9AD8\\u9636\\u7EC4\\u4EF6 (HOC) \\u662F\\u63A5\\u53D7\\u4E00\\u4E2A\\u7EC4\\u4EF6\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A\\u65B0\\u7EC4\\u4EF6\\u7684\\u51FD\\u6570\\uFF0C\\u8BE5\\u65B0\\u7EC4\\u4EF6\\u5177\\u6709\\u989D\\u5916\\u7684 props \\u6216\\u884C\\u4E3A\\u3002\\u5B83\\u4EEC\\u7528\\u4E8E\\u91CD\\u7528\\u7EC4\\u4EF6\\u903B\\u8F91\\u3002\\u4F8B\\u5982\\uFF0C\\u5982\\u679C\\u60A8\\u6709\\u4E00\\u4E2A\\u7EC4\\u4EF6 \",(0,e.jsx)(n.code,{children:\"MyComponent\"}),\"\\uFF0C\\u60A8\\u53EF\\u4EE5\\u50CF\\u8FD9\\u6837\\u521B\\u5EFA\\u4E00\\u4E2A HOC\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`const withExtraProps = (WrappedComponent) => {\n  return (props) => <WrappedComponent {...props} extraProp=\"value\" />;\n};\n\nconst EnhancedComponent = withExtraProps(MyComponent);\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u4E2D\\u4EC0\\u4E48\\u662F\\u9AD8\\u9636\\u7EC4\\u4EF6\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9AD8\\u9636\\u7EC4\\u4EF6 (HOC) \\u662F React \\u4E2D\\u63A5\\u53D7\\u4E00\\u4E2A\\u7EC4\\u4EF6\\u4F5C\\u4E3A\\u53C2\\u6570\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A\\u65B0\\u7EC4\\u4EF6\\u7684\\u51FD\\u6570\\u3002\\u65B0\\u7EC4\\u4EF6\\u901A\\u5E38\\u4F1A\\u5305\\u88C5\\u539F\\u59CB\\u7EC4\\u4EF6\\u5E76\\u6DFB\\u52A0\\u989D\\u5916\\u7684 props\\u3001state \\u6216\\u884C\\u4E3A\\u3002HOC \\u662F\\u4E00\\u79CD\\u91CD\\u7528\\u7EC4\\u4EF6\\u903B\\u8F91\\u7684\\u6A21\\u5F0F\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u76EE\\u7684\"}),`\n`,(0,e.jsx)(n.p,{children:\"HOC \\u7528\\u4E8E\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5728\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u5171\\u4EAB\\u901A\\u7528\\u529F\\u80FD\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u62BD\\u8C61\\u548C\\u91CD\\u7528\\u7EC4\\u4EF6\\u903B\\u8F91\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u7528\\u989D\\u5916\\u7684 props \\u6216 state \\u589E\\u5F3A\\u7EC4\\u4EF6\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684 HOC \\u793A\\u4F8B\\uFF0C\\u5B83\\u5411\\u5305\\u88C5\\u7684\\u7EC4\\u4EF6\\u6DFB\\u52A0\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"extraProp\"}),\"\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import React from 'react';\n\n// \\u5B9A\\u4E49 HOC\nconst withExtraProps = (WrappedComponent) => {\n  return (props) => {\n    return <WrappedComponent {...props} extraProp=\"value\" />;\n  };\n};\n\n// \\u5B9A\\u4E49\\u8981\\u5305\\u88C5\\u7684\\u7EC4\\u4EF6\nconst MyComponent = (props) => {\n  return <div>{props.extraProp}</div>;\n};\n\n// \\u4F7F\\u7528 HOC \\u5305\\u88C5\\u7EC4\\u4EF6\nconst EnhancedComponent = withExtraProps(MyComponent);\n\n// \\u4F7F\\u7528\\u589E\\u5F3A\\u7EC4\\u4EF6\nconst App = () => {\n  return <EnhancedComponent />;\n};\n\nexport default App;\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"withExtraProps\"}),\" \\u662F\\u4E00\\u4E2A HOC\\uFF0C\\u5B83\\u5411 \",(0,e.jsx)(n.code,{children:\"MyComponent\"}),\" \\u6DFB\\u52A0\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"extraProp\"}),\"\\u3002\",(0,e.jsx)(n.code,{children:\"EnhancedComponent\"}),\" \\u73B0\\u5728\\u53EF\\u4EE5\\u8BBF\\u95EE \",(0,e.jsx)(n.code,{children:\"extraProp\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5E38\\u89C1\\u7528\\u4F8B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8EAB\\u4EFD\\u9A8C\\u8BC1\"}),\"\\uFF1A\\u5728\\u6E32\\u67D3\\u4E4B\\u524D\\u5305\\u88C5\\u7EC4\\u4EF6\\u4EE5\\u68C0\\u67E5\\u7528\\u6237\\u662F\\u5426\\u5DF2\\u901A\\u8FC7\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u65E5\\u5FD7\\u8BB0\\u5F55\"}),\"\\uFF1A\\u5411\\u7EC4\\u4EF6\\u6DFB\\u52A0\\u65E5\\u5FD7\\u8BB0\\u5F55\\u529F\\u80FD\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E3B\\u9898\"}),\"\\uFF1A\\u5C06\\u4E0E\\u4E3B\\u9898\\u76F8\\u5173\\u7684 props \\u6CE8\\u5165\\u5230\\u7EC4\\u4EF6\\u4E2D\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6570\\u636E\\u83B7\\u53D6\"}),\"\\uFF1A\\u83B7\\u53D6\\u6570\\u636E\\u5E76\\u5C06\\u5176\\u4F5C\\u4E3A props \\u4F20\\u9012\\u7ED9\\u7EC4\\u4EF6\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6700\\u4F73\\u5B9E\\u8DF5\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E0D\\u8981\\u6539\\u53D8\\u539F\\u59CB\\u7EC4\\u4EF6\"}),\"\\uFF1A\\u59CB\\u7EC8\\u8FD4\\u56DE\\u4E00\\u4E2A\\u65B0\\u7EC4\\u4EF6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8C28\\u614E\\u4F7F\\u7528 HOC\"}),\"\\uFF1A\\u8FC7\\u5EA6\\u4F7F\\u7528 HOC \\u4F1A\\u4F7F\\u4EE3\\u7801\\u66F4\\u96BE\\u7406\\u89E3\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6B63\\u786E\\u547D\\u540D HOC\"}),\"\\uFF1A\\u4F7F\\u7528\\u4E00\\u4E2A\\u63CF\\u8FF0\\u6027\\u540D\\u79F0\\u6765\\u6307\\u793A HOC \\u7684\\u4F5C\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u66FF\\u4EE3\\u65B9\\u6848\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Render props\"}),\": \\u4E00\\u79CD\\u6A21\\u5F0F\\uFF0C\\u7EC4\\u4EF6\\u4F7F\\u7528\\u51FD\\u6570\\u4F5C\\u4E3A prop \\u6765\\u786E\\u5B9A\\u8981\\u6E32\\u67D3\\u7684\\u5185\\u5BB9\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Hooks\"}),\": \\u81EA\\u5B9A\\u4E49 hooks \\u53EF\\u7528\\u4E8E\\u5728\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u5171\\u4EAB\\u903B\\u8F91\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e\",children:\"\\u7406\\u89E3 React \\u4E2D\\u7684\\u9AD8\\u9636\\u7EC4\\u4EF6\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://blog.logrocket.com/hooks-vs-render-props-vs-hocs/\",children:\"HOCs vs Render Props vs Hooks\"})}),`\n`]})]})}function s(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(d,{...r})}):d(r)}return P(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.json
index b3eea1dde..9b6661d02 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var p=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},l=(t,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of g(e))!m.call(t,a)&&a!==r&&o(t,a,{get:()=>e[a],enumerable:!(i=u(e,a))||i.enumerable});return t};var y=(t,e,r)=>(r=t!=null?h(f(t)):{},l(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),b=t=>l(o({},\"__esModule\",{value:!0}),t);var c=p((D,s)=>{s.exports=_jsx_runtime});var I={};v(I,{default:()=>j,frontmatter:()=>w});var n=y(c()),w={title:\"What are iterators and generators in JavaScript and what are they used for?\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",strong:\"strong\",ul:\"ul\",li:\"li\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",h4:\"h4\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"In JavaScript, iterators and generators are powerful tools for managing sequences of data and controlling the flow of execution in a more flexible way.\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Iterators\"}),\" are objects that define a sequence and potentially a return value upon its termination. It adheres to a specific interface:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"An iterator object must implement a \",(0,n.jsx)(e.code,{children:\"next()\"}),\" method.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"next()\"}),\" method returns an object with two properties:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"value\"}),\": The next value in the sequence.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"done\"}),\": A boolean that is \",(0,n.jsx)(e.code,{children:\"true\"}),\" if the iterator has finished its sequence, otherwise \",(0,n.jsx)(e.code,{children:\"false\"}),\".\"]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's an example of an object implementing the iterator interface.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const iterator = {\n  current: 0,\n  last: 5,\n  next() {\n    if (this.current <= this.last) {\n      return { value: this.current++, done: false };\n    } else {\n      return { value: undefined, done: true };\n    }\n  },\n};\n\nlet result = iterator.next();\nwhile (!result.done) {\n  console.log(result.value); // Logs 0, 1, 2, 3, 4, 5\n  result = iterator.next();\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Generators\"}),\" are a special functions that \",(0,n.jsx)(e.strong,{children:\"can pause execution and resume at a later point\"}),\". It uses the \",(0,n.jsx)(e.code,{children:\"function*\"}),\" syntax and the \",(0,n.jsx)(e.code,{children:\"yield\"}),\" keyword to control the flow of execution. When you call a generator function, it doesn't execute completely like a regular function. Instead, it returns an iterator object. Calling the \",(0,n.jsx)(e.code,{children:\"next()\"}),\" method on the returned iterator advances the generator to the next \",(0,n.jsx)(e.code,{children:\"yield\"}),\" statement, and the value after \",(0,n.jsx)(e.code,{children:\"yield\"}),\" becomes the return value of \",(0,n.jsx)(e.code,{children:\"next()\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function* numberGenerator() {\n  let num = 0;\n  while (num <= 5) {\n    yield num++;\n  }\n}\n\nconst gen = numberGenerator();\nconsole.log(gen.next()); // { value: 0, done: false }\nconsole.log(gen.next()); // { value: 1, done: false }\nconsole.log(gen.next()); // { value: 2, done: false }\nconsole.log(gen.next()); // { value: 3, done: false }\nconsole.log(gen.next()); // { value: 4, done: false }\nconsole.log(gen.next()); // { value: 5, done: false }\nconsole.log(gen.next()); // { value: undefined, done: true }\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Generators are powerful for creating iterators on-demand, especially for infinite sequences or complex iteration logic. They can be used for:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Lazy evaluation \\u2013 processing elements only when needed, improving memory efficiency for large datasets.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Implementing iterators for custom data structures.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Creating asynchronous iterators for handling data streams.\"}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Iterators\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Iterators are objects that define a sequence and provide a \",(0,n.jsx)(e.code,{children:\"next()\"}),\" method to access the next value in the sequence. They are used to iterate over data structures like \",(0,n.jsx)(e.code,{children:\"arrays\"}),\", \",(0,n.jsx)(e.code,{children:\"strings\"}),\", and custom \",(0,n.jsx)(e.code,{children:\"objects\"}),\". The key use case of iterators include:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Implementing the iterator protocol to make custom objects iterable, allowing them to be used with \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" loops and other language constructs that expect iterables.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Providing a standard way to iterate over different data structures, making code more reusable and maintainable.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Creating a custom iterator for a range of numbers\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, we can provide a default implementation for iterator by implementing \",(0,n.jsx)(e.code,{children:\"[Symbol.iterator]()\"}),\" in any custom object.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Define a class named Range\nclass Range {\n  // The constructor takes two parameters: start and end\n  constructor(start, end) {\n    // Assign the start and end values to the instance\n    this.start = start;\n    this.end = end;\n  }\n\n  // Define the default iterator for the object\n  [Symbol.iterator]() {\n    // Initialize the current value to the start value\n    let current = this.start;\n    const end = this.end;\n\n    // Return an object with a next method\n    return {\n      // The next method returns the next value in the iteration\n      next() {\n        // If the current value is less than or equal to the end value...\n        if (current <= end) {\n          // ...return an object with the current value and done set to false\n          return { value: current++, done: false };\n        }\n\n        // ...otherwise, return an object with value set to undefined and done set to true\n        return { value: undefined, done: true };\n      },\n    };\n  }\n}\n\n// Create a new Range object with start = 1 and end = 3\nconst range = new Range(1, 3);\n// Iterate over the range object\nfor (const number of range) {\n  // Log each number to the console\n  console.log(number); // 1, 2, 3\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Built-in objects using the iterator protocol\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, several built-in objects implement the iterator protocol, meaning they have a default \",(0,n.jsx)(e.code,{children:\"@@iterator\"}),\" method. This allows them to be used in constructs like \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" loops and with the spread operator. Here are some of the key built-in objects that implement iterators:\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Arrays\"}),\": Arrays have a built-in iterator that allows you to iterate over their elements.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3];\nconst iterator = array[Symbol.iterator]();\n\nconsole.log(iterator.next()); // { value: 1, done: false }\nconsole.log(iterator.next()); // { value: 2, done: false }\nconsole.log(iterator.next()); // { value: 3, done: false }\nconsole.log(iterator.next()); // { value: undefined, done: true }\n\nfor (const value of array) {\n  console.log(value); // Logs 1, 2, 3\n}\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Strings\"}),\": Strings have a built-in iterator that allows you to iterate over their characters.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const string = 'hello';\nconst iterator = string[Symbol.iterator]();\n\nconsole.log(iterator.next()); // { value: \"h\", done: false }\nconsole.log(iterator.next()); // { value: \"e\", done: false }\nconsole.log(iterator.next()); // { value: \"l\", done: false }\nconsole.log(iterator.next()); // { value: \"l\", done: false }\nconsole.log(iterator.next()); // { value: \"o\", done: false }\nconsole.log(iterator.next()); // { value: undefined, done: true }\n\nfor (const char of string) {\n  console.log(char); // Logs h, e, l, l, o\n}\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"DOM NodeLists\"})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a new div and append it to the DOM\nconst newDiv = document.createElement('div');\nnewDiv.id = 'div1';\ndocument.body.appendChild(newDiv);\n\nconst nodeList = document.querySelectorAll('div');\nconst iterator = nodeList[Symbol.iterator]();\n\nconsole.log(iterator.next()); // { value: HTMLDivElement, done: false }\nconsole.log(iterator.next()); // { value: undefined, done: true }\n\nfor (const node of nodeList) {\n  console.log(node); // Logs each <div> element, in this case only div1\n}\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\"s and \",(0,n.jsx)(e.code,{children:\"Set\"}),\"s also have built-in iterators.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Generators\"}),`\n`,(0,n.jsx)(e.p,{children:\"Generators are a special kind of function that can pause and resume their execution, allowing them to generate a sequence of values on-the-fly. They are commonly used to create iterators but have other applications as well. The key use cases of generators include:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Creating iterators in a more concise and readable way compared to manually implementing the iterator protocol.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Implementing lazy evaluation, where values are generated only when needed, saving memory and computation time.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Simplifying asynchronous programming by allowing code to be written in a synchronous-looking style using \",(0,n.jsx)(e.code,{children:\"yield\"}),\" and \",(0,n.jsx)(e.code,{children:\"await\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Generators provide several benefits:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Lazy evaluation\"}),\": They generate values on the fly and only when required, which is memory efficient.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Pause and resume\"}),\": Generators can pause execution (via \",(0,n.jsx)(e.code,{children:\"yield\"}),\") and can also receive new data upon resuming.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Asynchronous iteration\"}),\": With the advent of \",(0,n.jsx)(e.code,{children:\"async/await\"}),\", generators can be used to manage asynchronous data flows.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Creating an iterator using a generator function\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"We can rewrite our \",(0,n.jsx)(e.code,{children:\"Range\"}),\" example to use a generator function:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Define a class named Range\nclass Range {\n  // The constructor takes two parameters: start and end\n  constructor(start, end) {\n    // Assign the start and end values to the instance\n    this.start = start;\n    this.end = end;\n  }\n\n  // Define the default iterator for the object using a generator\n  *[Symbol.iterator]() {\n    // Initialize the current value to the start value\n    let current = this.start;\n\n    // While the current value is less than or equal to the end value...\n    while (current <= this.end) {\n      // ...yield the current value\n      yield current++;\n    }\n  }\n}\n\n// Create a new Range object with start = 1 and end = 3\nconst range = new Range(1, 3);\n// Iterate over the range object\nfor (const number of range) {\n  // Log each number to the console\n  console.log(number); // 1, 2, 3\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Iterating over data streams\"}),`\n`,(0,n.jsx)(e.p,{children:\"Generators are well-suited for iterating over data streams, such as fetching data from an API or reading files. This example demonstrates using a generator to fetch data from an API in batches:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function* fetchDataInBatches(url, numBatches = 5, batchSize = 10) {\n  let startIndex = 0;\n  let currBatch = 0;\n\n  while (currBatch < numBatches) {\n    const response = await fetch(\n      \\`\\${url}?_start=\\${startIndex}&_limit=\\${batchSize}\\`,\n    );\n    const data = await response.json();\n    if (data.length === 0) break;\n    yield data;\n    startIndex += batchSize;\n    currBatch += 1;\n  }\n}\n\nasync function fetchAndLogData() {\n  const dataGenerator = fetchDataInBatches(\n    'https://jsonplaceholder.typicode.com/todos',\n  );\n\n  for await (const batch of dataGenerator) {\n    console.log(batch);\n  }\n}\nfetchAndLogData();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"This generator function \",(0,n.jsx)(e.code,{children:\"fetchDataInBatches\"}),\" fetches data from an API in batches of a specified size. It yields each batch of data, allowing you to process it before fetching the next batch. This approach can be more memory-efficient than fetching all data at once.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Implementing asynchronous iterators\"}),`\n`,(0,n.jsx)(e.p,{children:\"Generators can be used to implement asynchronous iterators, which are useful for working with asynchronous data sources. This example demonstrates an asynchronous iterator for fetching data from an API:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function* fetchDataAsyncIterator(url, pagesToFetch = 3) {\n  let currPage = 1;\n\n  while (currPage <= pagesToFetch) {\n    const response = await fetch(\\`\\${url}?_page=\\${currPage}\\`);\n    const data = await response.json();\n    if (data.length === 0) break;\n    yield data;\n    currPage++;\n  }\n}\n\nasync function fetchAndLogData() {\n  const asyncIterator = fetchDataAsyncIterator(\n    'https://jsonplaceholder.typicode.com/todos',\n  );\n\n  for await (const chunk of asyncIterator) {\n    console.log(chunk);\n  }\n}\nfetchAndLogData();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The generator function \",(0,n.jsx)(e.code,{children:\"fetchDataAsyncIterator\"}),\" is an asynchronous iterator that fetches data from an API in pages. It yields each page of data, allowing you to process it before fetching the next page. This approach can be useful for handling large datasets or long-running operations.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Generators are also used extensively in JavaScript libraries and frameworks, such as \",(0,n.jsx)(e.a,{href:\"https://redux-saga.js.org/\",children:\"Redux-Saga\"}),\" and \",(0,n.jsx)(e.a,{href:\"https://rxjs.dev/\",children:\"RxJS\"}),\", for handling asynchronous operations and reactive programming.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Summary\"}),`\n`,(0,n.jsx)(e.p,{children:\"Iterators and generators provide a powerful and flexible way to work with collections of data in JavaScript. Iterators define a standardized way to traverse data sequences, while generators offer a more expressive and efficient way to create iterators, handle asynchronous operations, and compose complex data pipelines.\"}),`\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/Web/JavaScript/Guide/Iterators_and_Generators\",children:\"Iterators and generators\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/async-iterators-generators\",children:\"Async iteration and generators\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/iterable\",children:\"Iterables\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://blog.bitsrc.io/explore-iterators-and-generators-in-javascript-ea4102015377\",children:\"Explore Iterators and Generators in JavaScript\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://syntactic-sugar.dev/blog/nested-route/iterators-and-generators\",children:\"Iterators and Generators in JavaScript\"})}),`\n`]})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var j=x;return b(I);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var v=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},l=(t,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of f(e))!p.call(t,a)&&a!==r&&o(t,a,{get:()=>e[a],enumerable:!(i=g(e,a))||i.enumerable});return t};var b=(t,e,r)=>(r=t!=null?u(m(t)):{},l(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),w=t=>l(o({},\"__esModule\",{value:!0}),t);var c=v((S,s)=>{s.exports=_jsx_runtime});var j={};y(j,{default:()=>h,frontmatter:()=>x});var n=b(c()),x={title:\"What are iterators and generators in JavaScript and what are they used for?\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"In JavaScript, iterators and generators are powerful tools for managing sequences of data and controlling the flow of execution in a more flexible way.\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Iterators\"}),\" are objects that define a sequence and potentially a return value upon its termination. It adheres to a specific interface:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"An iterator object must implement a \",(0,n.jsx)(e.code,{children:\"next()\"}),\" method.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"next()\"}),\" method returns an object with two properties:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"value\"}),\": The next value in the sequence.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"done\"}),\": A boolean that is \",(0,n.jsx)(e.code,{children:\"true\"}),\" if the iterator has finished its sequence, otherwise \",(0,n.jsx)(e.code,{children:\"false\"}),\".\"]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's an example of an object implementing the iterator interface.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const iterator = {\n  current: 0,\n  last: 5,\n  next() {\n    if (this.current <= this.last) {\n      return { value: this.current++, done: false };\n    } else {\n      return { value: undefined, done: true };\n    }\n  },\n};\n\nlet result = iterator.next();\nwhile (!result.done) {\n  console.log(result.value); // Logs 0, 1, 2, 3, 4, 5\n  result = iterator.next();\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Generators\"}),\" are a special functions that \",(0,n.jsx)(e.strong,{children:\"can pause execution and resume at a later point\"}),\". It uses the \",(0,n.jsx)(e.code,{children:\"function*\"}),\" syntax and the \",(0,n.jsx)(e.code,{children:\"yield\"}),\" keyword to control the flow of execution. When you call a generator function, it doesn't execute completely like a regular function. Instead, it returns an iterator object. Calling the \",(0,n.jsx)(e.code,{children:\"next()\"}),\" method on the returned iterator advances the generator to the next \",(0,n.jsx)(e.code,{children:\"yield\"}),\" statement, and the value after \",(0,n.jsx)(e.code,{children:\"yield\"}),\" becomes the return value of \",(0,n.jsx)(e.code,{children:\"next()\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function* numberGenerator() {\n  let num = 0;\n  while (num <= 5) {\n    yield num++;\n  }\n}\n\nconst gen = numberGenerator();\nconsole.log(gen.next()); // { value: 0, done: false }\nconsole.log(gen.next()); // { value: 1, done: false }\nconsole.log(gen.next()); // { value: 2, done: false }\nconsole.log(gen.next()); // { value: 3, done: false }\nconsole.log(gen.next()); // { value: 4, done: false }\nconsole.log(gen.next()); // { value: 5, done: false }\nconsole.log(gen.next()); // { value: undefined, done: true }\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Generators are powerful for creating iterators on-demand, especially for infinite sequences or complex iteration logic. They can be used for:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Lazy evaluation \\u2013 processing elements only when needed, improving memory efficiency for large datasets.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Implementing iterators for custom data structures.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Creating asynchronous iterators for handling data streams.\"}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Iterators\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Iterators are objects that define a sequence and provide a \",(0,n.jsx)(e.code,{children:\"next()\"}),\" method to access the next value in the sequence. They are used to iterate over data structures like \",(0,n.jsx)(e.code,{children:\"arrays\"}),\", \",(0,n.jsx)(e.code,{children:\"strings\"}),\", and custom \",(0,n.jsx)(e.code,{children:\"objects\"}),\". The key use case of iterators include:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Implementing the iterator protocol to make custom objects iterable, allowing them to be used with \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" loops and other language constructs that expect iterables.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Providing a standard way to iterate over different data structures, making code more reusable and maintainable.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Creating a custom iterator for a range of numbers\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, we can provide a default implementation for iterator by implementing \",(0,n.jsx)(e.code,{children:\"[Symbol.iterator]()\"}),\" in any custom object.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Define a class named Range\nclass Range {\n  // The constructor takes two parameters: start and end\n  constructor(start, end) {\n    // Assign the start and end values to the instance\n    this.start = start;\n    this.end = end;\n  }\n\n  // Define the default iterator for the object\n  [Symbol.iterator]() {\n    // Initialize the current value to the start value\n    let current = this.start;\n    const end = this.end;\n\n    // Return an object with a next method\n    return {\n      // The next method returns the next value in the iteration\n      next() {\n        // If the current value is less than or equal to the end value...\n        if (current <= end) {\n          // ...return an object with the current value and done set to false\n          return { value: current++, done: false };\n        }\n\n        // ...otherwise, return an object with value set to undefined and done set to true\n        return { value: undefined, done: true };\n      },\n    };\n  }\n}\n\n// Create a new Range object with start = 1 and end = 3\nconst range = new Range(1, 3);\n// Iterate over the range object\nfor (const number of range) {\n  // Log each number to the console\n  console.log(number); // 1, 2, 3\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Built-in objects using the iterator protocol\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, several built-in objects implement the iterator protocol, meaning they have a default \",(0,n.jsx)(e.code,{children:\"@@iterator\"}),\" method. This allows them to be used in constructs like \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" loops and with the spread operator. Here are some of the key built-in objects that implement iterators:\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Arrays\"}),\": Arrays have a built-in iterator that allows you to iterate over their elements.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3];\nconst iterator = array[Symbol.iterator]();\n\nconsole.log(iterator.next()); // { value: 1, done: false }\nconsole.log(iterator.next()); // { value: 2, done: false }\nconsole.log(iterator.next()); // { value: 3, done: false }\nconsole.log(iterator.next()); // { value: undefined, done: true }\n\nfor (const value of array) {\n  console.log(value); // Logs 1, 2, 3\n}\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Strings\"}),\": Strings have a built-in iterator that allows you to iterate over their characters.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const string = 'hello';\nconst iterator = string[Symbol.iterator]();\n\nconsole.log(iterator.next()); // { value: \"h\", done: false }\nconsole.log(iterator.next()); // { value: \"e\", done: false }\nconsole.log(iterator.next()); // { value: \"l\", done: false }\nconsole.log(iterator.next()); // { value: \"l\", done: false }\nconsole.log(iterator.next()); // { value: \"o\", done: false }\nconsole.log(iterator.next()); // { value: undefined, done: true }\n\nfor (const char of string) {\n  console.log(char); // Logs h, e, l, l, o\n}\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"DOM NodeLists\"})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a new div and append it to the DOM\nconst newDiv = document.createElement('div');\nnewDiv.id = 'div1';\ndocument.body.appendChild(newDiv);\n\nconst nodeList = document.querySelectorAll('div');\nconst iterator = nodeList[Symbol.iterator]();\n\nconsole.log(iterator.next()); // { value: HTMLDivElement, done: false }\nconsole.log(iterator.next()); // { value: undefined, done: true }\n\nfor (const node of nodeList) {\n  console.log(node); // Logs each <div> element, in this case only div1\n}\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\"s and \",(0,n.jsx)(e.code,{children:\"Set\"}),\"s also have built-in iterators.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Generators\"}),`\n`,(0,n.jsx)(e.p,{children:\"Generators are a special kind of function that can pause and resume their execution, allowing them to generate a sequence of values on-the-fly. They are commonly used to create iterators but have other applications as well. The key use cases of generators include:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Creating iterators in a more concise and readable way compared to manually implementing the iterator protocol.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Implementing lazy evaluation, where values are generated only when needed, saving memory and computation time.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Simplifying asynchronous programming by allowing code to be written in a synchronous-looking style using \",(0,n.jsx)(e.code,{children:\"yield\"}),\" and \",(0,n.jsx)(e.code,{children:\"await\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Generators provide several benefits:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Lazy evaluation\"}),\": They generate values on the fly and only when required, which is memory efficient.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Pause and resume\"}),\": Generators can pause execution (via \",(0,n.jsx)(e.code,{children:\"yield\"}),\") and can also receive new data upon resuming.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Asynchronous iteration\"}),\": With the advent of \",(0,n.jsx)(e.code,{children:\"async/await\"}),\", generators can be used to manage asynchronous data flows.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Creating an iterator using a generator function\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"We can rewrite our \",(0,n.jsx)(e.code,{children:\"Range\"}),\" example to use a generator function:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Define a class named Range\nclass Range {\n  // The constructor takes two parameters: start and end\n  constructor(start, end) {\n    // Assign the start and end values to the instance\n    this.start = start;\n    this.end = end;\n  }\n\n  // Define the default iterator for the object using a generator\n  *[Symbol.iterator]() {\n    // Initialize the current value to the start value\n    let current = this.start;\n\n    // While the current value is less than or equal to the end value...\n    while (current <= this.end) {\n      // ...yield the current value\n      yield current++;\n    }\n  }\n}\n\n// Create a new Range object with start = 1 and end = 3\nconst range = new Range(1, 3);\n// Iterate over the range object\nfor (const number of range) {\n  // Log each number to the console\n  console.log(number); // 1, 2, 3\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Iterating over data streams\"}),`\n`,(0,n.jsx)(e.p,{children:\"Generators are well-suited for iterating over data streams, such as fetching data from an API or reading files. This example demonstrates using a generator to fetch data from an API in batches:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function* fetchDataInBatches(url, numBatches = 5, batchSize = 10) {\n  let startIndex = 0;\n  let currBatch = 0;\n\n  while (currBatch < numBatches) {\n    const response = await fetch(\n      \\`\\${url}?_start=\\${startIndex}&_limit=\\${batchSize}\\`,\n    );\n    const data = await response.json();\n    if (data.length === 0) break;\n    yield data;\n    startIndex += batchSize;\n    currBatch += 1;\n  }\n}\n\nasync function fetchAndLogData() {\n  const dataGenerator = fetchDataInBatches(\n    'https://jsonplaceholder.typicode.com/todos',\n  );\n\n  for await (const batch of dataGenerator) {\n    console.log(batch);\n  }\n}\nfetchAndLogData();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"This generator function \",(0,n.jsx)(e.code,{children:\"fetchDataInBatches\"}),\" fetches data from an API in batches of a specified size. It yields each batch of data, allowing you to process it before fetching the next batch. This approach can be more memory-efficient than fetching all data at once.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Implementing asynchronous iterators\"}),`\n`,(0,n.jsx)(e.p,{children:\"Generators can be used to implement asynchronous iterators, which are useful for working with asynchronous data sources. This example demonstrates an asynchronous iterator for fetching data from an API:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function* fetchDataAsyncIterator(url, pagesToFetch = 3) {\n  let currPage = 1;\n\n  while (currPage <= pagesToFetch) {\n    const response = await fetch(\\`\\${url}?_page=\\${currPage}\\`);\n    const data = await response.json();\n    if (data.length === 0) break;\n    yield data;\n    currPage++;\n  }\n}\n\nasync function fetchAndLogData() {\n  const asyncIterator = fetchDataAsyncIterator(\n    'https://jsonplaceholder.typicode.com/todos',\n  );\n\n  for await (const chunk of asyncIterator) {\n    console.log(chunk);\n  }\n}\nfetchAndLogData();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The generator function \",(0,n.jsx)(e.code,{children:\"fetchDataAsyncIterator\"}),\" is an asynchronous iterator that fetches data from an API in pages. It yields each page of data, allowing you to process it before fetching the next page. This approach can be useful for handling large datasets or long-running operations.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Generators are also used extensively in JavaScript libraries and frameworks, such as \",(0,n.jsx)(e.a,{href:\"https://redux-saga.js.org/\",children:\"Redux-Saga\"}),\" and \",(0,n.jsx)(e.a,{href:\"https://rxjs.dev/\",children:\"RxJS\"}),\", for handling asynchronous operations and reactive programming.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Summary\"}),`\n`,(0,n.jsx)(e.p,{children:\"Iterators and generators provide a powerful and flexible way to work with collections of data in JavaScript. Iterators define a standardized way to traverse data sequences, while generators offer a more expressive and efficient way to create iterators, handle asynchronous operations, and compose complex data pipelines.\"}),`\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/Web/JavaScript/Guide/Iterators_and_Generators\",children:\"Iterators and generators\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/async-iterators-generators\",children:\"Async iteration and generators\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/iterable\",children:\"Iterables\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://blog.bitsrc.io/explore-iterators-and-generators-in-javascript-ea4102015377\",children:\"Explore Iterators and Generators in JavaScript\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://syntactic-sugar.dev/blog/nested-route/iterators-and-generators\",children:\"Iterators and Generators in JavaScript\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return w(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-iterators-and-generators-and-what-are-they-used-for/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-iterators-and-generators-and-what-are-they-used-for/zh-CN.json
index 033f65140..4390bd3aa 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-iterators-and-generators-and-what-are-they-used-for/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-iterators-and-generators-and-what-are-they-used-for/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-iterators-and-generators-and-what-are-they-used-for/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var v=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),m=(r,n)=>{for(var t in n)o(r,t,{get:n[t],enumerable:!0})},a=(r,n,t,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of g(n))!p.call(r,l)&&l!==t&&o(r,l,{get:()=>n[l],enumerable:!(c=u(n,l))||c.enumerable});return r};var x=(r,n,t)=>(t=r!=null?h(f(r)):{},a(n||!r||!r.__esModule?o(t,\"default\",{value:r,enumerable:!0}):t,r)),y=r=>a(o({},\"__esModule\",{value:!0}),r);var d=v((I,i)=>{i.exports=_jsx_runtime});var S={};m(S,{default:()=>w,frontmatter:()=>b});var e=x(d()),b={title:\"JavaScript \\u4E2D\\u7684\\u8FED\\u4EE3\\u5668\\u548C\\u751F\\u6210\\u5668\\u662F\\u4EC0\\u4E48\\uFF0C\\u5B83\\u4EEC\\u6709\\u4EC0\\u4E48\\u7528\\u9014\\uFF1F\"};function s(r){let n=Object.assign({h2:\"h2\",p:\"p\",strong:\"strong\",ul:\"ul\",li:\"li\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",h4:\"h4\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u8FED\\u4EE3\\u5668\\u548C\\u751F\\u6210\\u5668\\u662F\\u7528\\u4E8E\\u7BA1\\u7406\\u6570\\u636E\\u5E8F\\u5217\\u548C\\u4EE5\\u66F4\\u7075\\u6D3B\\u7684\\u65B9\\u5F0F\\u63A7\\u5236\\u6267\\u884C\\u6D41\\u7A0B\\u7684\\u5F3A\\u5927\\u5DE5\\u5177\\u3002\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u8FED\\u4EE3\\u5668\"}),\"\\u662F\\u5B9A\\u4E49\\u5E8F\\u5217\\u5E76\\u53EF\\u80FD\\u5728\\u5176\\u7EC8\\u6B62\\u65F6\\u8FD4\\u56DE\\u503C\\u7684\\u5BF9\\u8C61\\u3002\\u5B83\\u9075\\u5FAA\\u4E00\\u4E2A\\u7279\\u5B9A\\u7684\\u63A5\\u53E3\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"\\u8FED\\u4EE3\\u5668\\u5BF9\\u8C61\\u5FC5\\u987B\\u5B9E\\u73B0\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"next()\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"next()\"}),\" \\u65B9\\u6CD5\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5177\\u6709\\u4E24\\u4E2A\\u5C5E\\u6027\\u7684\\u5BF9\\u8C61\\uFF1A\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"value\"}),\"\\uFF1A\\u5E8F\\u5217\\u4E2D\\u7684\\u4E0B\\u4E00\\u4E2A\\u503C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"done\"}),\"\\uFF1A\\u4E00\\u4E2A\\u5E03\\u5C14\\u503C\\uFF0C\\u5982\\u679C\\u8FED\\u4EE3\\u5668\\u5DF2\\u5B8C\\u6210\\u5176\\u5E8F\\u5217\\uFF0C\\u5219\\u4E3A \",(0,e.jsx)(n.code,{children:\"true\"}),\"\\uFF0C\\u5426\\u5219\\u4E3A \",(0,e.jsx)(n.code,{children:\"false\"}),\"\\u3002\"]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u5B9E\\u73B0\\u8FED\\u4EE3\\u5668\\u63A5\\u53E3\\u7684\\u5BF9\\u8C61\\u7684\\u793A\\u4F8B\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const iterator = {\n  current: 0,\n  last: 5,\n  next() {\n    if (this.current <= this.last) {\n      return { value: this.current++, done: false };\n    } else {\n      return { value: undefined, done: true };\n    }\n  },\n};\n\nlet result = iterator.next();\nwhile (!result.done) {\n  console.log(result.value); // Logs 0, 1, 2, 3, 4, 5\n  result = iterator.next();\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u751F\\u6210\\u5668\"}),\"\\u662F\\u4E00\\u79CD\\u7279\\u6B8A\\u7684\\u51FD\\u6570\\uFF0C\",(0,e.jsx)(n.strong,{children:\"\\u53EF\\u4EE5\\u6682\\u505C\\u6267\\u884C\\u5E76\\u5728\\u7A0D\\u540E\\u6062\\u590D\"}),\"\\u3002\\u5B83\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"function*\"}),\" \\u8BED\\u6CD5\\u548C \",(0,e.jsx)(n.code,{children:\"yield\"}),\" \\u5173\\u952E\\u5B57\\u6765\\u63A7\\u5236\\u6267\\u884C\\u6D41\\u7A0B\\u3002\\u5F53\\u60A8\\u8C03\\u7528\\u751F\\u6210\\u5668\\u51FD\\u6570\\u65F6\\uFF0C\\u5B83\\u4E0D\\u4F1A\\u50CF\\u666E\\u901A\\u51FD\\u6570\\u4E00\\u6837\\u5B8C\\u5168\\u6267\\u884C\\u3002\\u76F8\\u53CD\\uFF0C\\u5B83\\u8FD4\\u56DE\\u4E00\\u4E2A\\u8FED\\u4EE3\\u5668\\u5BF9\\u8C61\\u3002\\u5728\\u8FD4\\u56DE\\u7684\\u8FED\\u4EE3\\u5668\\u4E0A\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"next()\"}),\" \\u65B9\\u6CD5\\u4F1A\\u5C06\\u751F\\u6210\\u5668\\u63A8\\u8FDB\\u5230\\u4E0B\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"yield\"}),\" \\u8BED\\u53E5\\uFF0C\\u5E76\\u4E14 \",(0,e.jsx)(n.code,{children:\"yield\"}),\" \\u4E4B\\u540E\\u7684\\u503C\\u5C06\\u6210\\u4E3A \",(0,e.jsx)(n.code,{children:\"next()\"}),\" \\u7684\\u8FD4\\u56DE\\u503C\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function* numberGenerator() {\n  let num = 0;\n  while (num <= 5) {\n    yield num++;\n  }\n}\n\nconst gen = numberGenerator();\nconsole.log(gen.next()); // { value: 0, done: false }\nconsole.log(gen.next()); // { value: 1, done: false }\nconsole.log(gen.next()); // { value: 2, done: false }\nconsole.log(gen.next()); // { value: 3, done: false }\nconsole.log(gen.next()); // { value: 4, done: false }\nconsole.log(gen.next()); // { value: 5, done: false }\nconsole.log(gen.next()); // { value: undefined, done: true }\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u751F\\u6210\\u5668\\u5BF9\\u4E8E\\u6309\\u9700\\u521B\\u5EFA\\u8FED\\u4EE3\\u5668\\u975E\\u5E38\\u5F3A\\u5927\\uFF0C\\u5C24\\u5176\\u9002\\u7528\\u4E8E\\u65E0\\u9650\\u5E8F\\u5217\\u6216\\u590D\\u6742\\u7684\\u8FED\\u4EE3\\u903B\\u8F91\\u3002\\u5B83\\u4EEC\\u53EF\\u7528\\u4E8E\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u60F0\\u6027\\u6C42\\u503C \\u2013 \\u4EC5\\u5728\\u9700\\u8981\\u65F6\\u5904\\u7406\\u5143\\u7D20\\uFF0C\\u63D0\\u9AD8\\u5927\\u578B\\u6570\\u636E\\u96C6\\u7684\\u5185\\u5B58\\u6548\\u7387\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4E3A\\u81EA\\u5B9A\\u4E49\\u6570\\u636E\\u7ED3\\u6784\\u5B9E\\u73B0\\u8FED\\u4EE3\\u5668\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u521B\\u5EFA\\u5F02\\u6B65\\u8FED\\u4EE3\\u5668\\u4EE5\\u5904\\u7406\\u6570\\u636E\\u6D41\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u8FED\\u4EE3\\u5668\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8FED\\u4EE3\\u5668\\u662F\\u5B9A\\u4E49\\u5E8F\\u5217\\u5E76\\u63D0\\u4F9B \",(0,e.jsx)(n.code,{children:\"next()\"}),\" \\u65B9\\u6CD5\\u4EE5\\u8BBF\\u95EE\\u5E8F\\u5217\\u4E2D\\u4E0B\\u4E00\\u4E2A\\u503C\\u7684\\u5BF9\\u8C61\\u3002\\u5B83\\u4EEC\\u7528\\u4E8E\\u8FED\\u4EE3 \",(0,e.jsx)(n.code,{children:\"\\u6570\\u7EC4\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"\\u5B57\\u7B26\\u4E32\"}),\" \\u548C\\u81EA\\u5B9A\\u4E49 \",(0,e.jsx)(n.code,{children:\"\\u5BF9\\u8C61\"}),\" \\u7B49\\u6570\\u636E\\u7ED3\\u6784\\u3002\\u8FED\\u4EE3\\u5668\\u7684\\u4E3B\\u8981\\u7528\\u4F8B\\u5305\\u62EC\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5B9E\\u73B0\\u8FED\\u4EE3\\u5668\\u534F\\u8BAE\\u4EE5\\u4F7F\\u81EA\\u5B9A\\u4E49\\u5BF9\\u8C61\\u53EF\\u8FED\\u4EE3\\uFF0C\\u5141\\u8BB8\\u5B83\\u4EEC\\u4E0E \",(0,e.jsx)(n.code,{children:\"for...of\"}),\" \\u5FAA\\u73AF\\u548C\\u5176\\u4ED6\\u671F\\u671B\\u53EF\\u8FED\\u4EE3\\u5BF9\\u8C61\\u7684\\u8BED\\u8A00\\u7ED3\\u6784\\u4E00\\u8D77\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.li,{children:\"\\u63D0\\u4F9B\\u4E00\\u79CD\\u6807\\u51C6\\u65B9\\u5F0F\\u6765\\u8FED\\u4EE3\\u4E0D\\u540C\\u7684\\u6570\\u636E\\u7ED3\\u6784\\uFF0C\\u4F7F\\u4EE3\\u7801\\u66F4\\u5177\\u53EF\\u91CD\\u7528\\u6027\\u548C\\u53EF\\u7EF4\\u62A4\\u6027\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E3A\\u6570\\u5B57\\u8303\\u56F4\\u521B\\u5EFA\\u81EA\\u5B9A\\u4E49\\u8FED\\u4EE3\\u5668\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u6211\\u4EEC\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728\\u4EFB\\u4F55\\u81EA\\u5B9A\\u4E49\\u5BF9\\u8C61\\u4E2D\\u5B9E\\u73B0 \",(0,e.jsx)(n.code,{children:\"[Symbol.iterator]()\"}),\" \\u6765\\u4E3A\\u8FED\\u4EE3\\u5668\\u63D0\\u4F9B\\u9ED8\\u8BA4\\u5B9E\\u73B0\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u5B9A\\u4E49\\u4E00\\u4E2A\\u540D\\u4E3A Range \\u7684\\u7C7B\nclass Range {\n  // \\u6784\\u9020\\u51FD\\u6570\\u63A5\\u53D7\\u4E24\\u4E2A\\u53C2\\u6570\\uFF1Astart \\u548C end\n  constructor(start, end) {\n    // \\u5C06 start \\u548C end \\u503C\\u5206\\u914D\\u7ED9\\u5B9E\\u4F8B\n    this.start = start;\n    this.end = end;\n  }\n\n  // \\u5B9A\\u4E49\\u5BF9\\u8C61\\u7684\\u9ED8\\u8BA4\\u8FED\\u4EE3\\u5668\n  [Symbol.iterator]() {\n    // \\u5C06\\u5F53\\u524D\\u503C\\u521D\\u59CB\\u5316\\u4E3A\\u8D77\\u59CB\\u503C\n    let current = this.start;\n    const end = this.end;\n\n    // \\u8FD4\\u56DE\\u4E00\\u4E2A\\u5E26\\u6709 next \\u65B9\\u6CD5\\u7684\\u5BF9\\u8C61\n    return {\n      // next \\u65B9\\u6CD5\\u8FD4\\u56DE\\u8FED\\u4EE3\\u4E2D\\u7684\\u4E0B\\u4E00\\u4E2A\\u503C\n      next() {\n        // \\u5982\\u679C\\u5F53\\u524D\\u503C\\u5C0F\\u4E8E\\u6216\\u7B49\\u4E8E\\u7ED3\\u675F\\u503C...\n        if (current <= end) {\n          // ...\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5E26\\u6709\\u5F53\\u524D\\u503C\\u548C done \\u8BBE\\u7F6E\\u4E3A false \\u7684\\u5BF9\\u8C61\n          return { value: current++, done: false };\n        }\n\n        // ...\\u5426\\u5219\\uFF0C\\u8FD4\\u56DE\\u4E00\\u4E2A value \\u8BBE\\u7F6E\\u4E3A undefined \\u4E14 done \\u8BBE\\u7F6E\\u4E3A true \\u7684\\u5BF9\\u8C61\n        return { value: undefined, done: true };\n      },\n    };\n  }\n}\n\n// \\u521B\\u5EFA\\u4E00\\u4E2A start = 1 \\u4E14 end = 3 \\u7684\\u65B0 Range \\u5BF9\\u8C61\nconst range = new Range(1, 3);\n// \\u8FED\\u4EE3 range \\u5BF9\\u8C61\nfor (const number of range) {\n  // \\u5C06\\u6BCF\\u4E2A\\u6570\\u5B57\\u8BB0\\u5F55\\u5230\\u63A7\\u5236\\u53F0\n  console.log(number); // 1, 2, 3\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528\\u8FED\\u4EE3\\u5668\\u534F\\u8BAE\\u7684\\u5185\\u7F6E\\u5BF9\\u8C61\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u51E0\\u4E2A\\u5185\\u7F6E\\u5BF9\\u8C61\\u5B9E\\u73B0\\u4E86\\u8FED\\u4EE3\\u5668\\u534F\\u8BAE\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4EEC\\u5177\\u6709\\u9ED8\\u8BA4\\u7684 \",(0,e.jsx)(n.code,{children:\"@@iterator\"}),\" \\u65B9\\u6CD5\\u3002\\u8FD9\\u4F7F\\u5F97\\u5B83\\u4EEC\\u53EF\\u4EE5\\u5728 \",(0,e.jsx)(n.code,{children:\"for...of\"}),\" \\u5FAA\\u73AF\\u548C\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\\u7B49\\u7ED3\\u6784\\u4E2D\\u4F7F\\u7528\\u3002\\u4EE5\\u4E0B\\u662F\\u5B9E\\u73B0\\u8FED\\u4EE3\\u5668\\u7684\\u4E00\\u4E9B\\u5173\\u952E\\u5185\\u7F6E\\u5BF9\\u8C61\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u6570\\u7EC4\"}),\"\\uFF1A\\u6570\\u7EC4\\u5177\\u6709\\u5185\\u7F6E\\u7684\\u8FED\\u4EE3\\u5668\\uFF0C\\u5141\\u8BB8\\u60A8\\u904D\\u5386\\u5176\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const array = [1, 2, 3];\nconst iterator = array[Symbol.iterator]();\n\nconsole.log(iterator.next()); // { value: 1, done: false }\nconsole.log(iterator.next()); // { value: 2, done: false }\nconsole.log(iterator.next()); // { value: 3, done: false }\nconsole.log(iterator.next()); // { value: undefined, done: true }\n\nfor (const value of array) {\n  console.log(value); // Logs 1, 2, 3\n}\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B57\\u7B26\\u4E32\"}),\"\\uFF1A\\u5B57\\u7B26\\u4E32\\u5177\\u6709\\u5185\\u7F6E\\u7684\\u8FED\\u4EE3\\u5668\\uFF0C\\u5141\\u8BB8\\u60A8\\u904D\\u5386\\u5176\\u5B57\\u7B26\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const string = 'hello';\nconst iterator = string[Symbol.iterator]();\n\nconsole.log(iterator.next()); // { value: \"h\", done: false }\nconsole.log(iterator.next()); // { value: \"e\", done: false }\nconsole.log(iterator.next()); // { value: \"l\", done: false }\nconsole.log(iterator.next()); // { value: \"l\", done: false }\nconsole.log(iterator.next()); // { value: \"o\", done: false }\nconsole.log(iterator.next()); // { value: undefined, done: true }\n\nfor (const char of string) {\n  console.log(char); // Logs h, e, l, l, o\n}\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:\"DOM NodeLists\"})}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Create a new div and append it to the DOM\nconst newDiv = document.createElement('div');\nnewDiv.id = 'div1';\ndocument.body.appendChild(newDiv);\n\nconst nodeList = document.querySelectorAll('div');\nconst iterator = nodeList[Symbol.iterator]();\n\nconsole.log(iterator.next()); // { value: HTMLDivElement, done: false }\nconsole.log(iterator.next()); // { value: undefined, done: true }\n\nfor (const node of nodeList) {\n  console.log(node); // Logs each <div> element, in this case only div1\n}\n`})}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"Map\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"Set\"}),\" \\u4E5F\\u6709\\u5185\\u7F6E\\u7684\\u8FED\\u4EE3\\u5668\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u751F\\u6210\\u5668\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u751F\\u6210\\u5668\\u662F\\u4E00\\u79CD\\u7279\\u6B8A\\u7684\\u51FD\\u6570\\uFF0C\\u53EF\\u4EE5\\u6682\\u505C\\u548C\\u6062\\u590D\\u5176\\u6267\\u884C\\uFF0C\\u5141\\u8BB8\\u5B83\\u4EEC\\u52A8\\u6001\\u751F\\u6210\\u4E00\\u7CFB\\u5217\\u503C\\u3002\\u5B83\\u4EEC\\u901A\\u5E38\\u7528\\u4E8E\\u521B\\u5EFA\\u8FED\\u4EE3\\u5668\\uFF0C\\u4F46\\u4E5F\\u6709\\u5176\\u4ED6\\u5E94\\u7528\\u3002\\u751F\\u6210\\u5668\\u7684\\u4E3B\\u8981\\u7528\\u4F8B\\u5305\\u62EC\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u4E0E\\u624B\\u52A8\\u5B9E\\u73B0\\u8FED\\u4EE3\\u5668\\u534F\\u8BAE\\u76F8\\u6BD4\\uFF0C\\u4EE5\\u66F4\\u7B80\\u6D01\\u6613\\u8BFB\\u7684\\u65B9\\u5F0F\\u521B\\u5EFA\\u8FED\\u4EE3\\u5668\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B9E\\u73B0\\u60F0\\u6027\\u6C42\\u503C\\uFF0C\\u4EC5\\u5728\\u9700\\u8981\\u65F6\\u751F\\u6210\\u503C\\uFF0C\\u4ECE\\u800C\\u8282\\u7701\\u5185\\u5B58\\u548C\\u8BA1\\u7B97\\u65F6\\u95F4\\u3002\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u901A\\u8FC7\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"yield\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"await\"}),\" \\u4EE5\\u540C\\u6B65\\u98CE\\u683C\\u7F16\\u5199\\u4EE3\\u7801\\uFF0C\\u7B80\\u5316\\u5F02\\u6B65\\u7F16\\u7A0B\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u751F\\u6210\\u5668\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E9B\\u597D\\u5904\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u60F0\\u6027\\u6C42\\u503C\"}),\"\\uFF1A\\u5B83\\u4EEC\\u52A8\\u6001\\u751F\\u6210\\u503C\\uFF0C\\u5E76\\u4E14\\u4EC5\\u5728\\u9700\\u8981\\u65F6\\u624D\\u751F\\u6210\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u63D0\\u9AD8\\u5185\\u5B58\\u6548\\u7387\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6682\\u505C\\u548C\\u6062\\u590D\"}),\"\\uFF1A\\u751F\\u6210\\u5668\\u53EF\\u4EE5\\u6682\\u505C\\u6267\\u884C\\uFF08\\u901A\\u8FC7 \",(0,e.jsx)(n.code,{children:\"yield\"}),\"\\uFF09\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u5728\\u6062\\u590D\\u65F6\\u63A5\\u6536\\u65B0\\u6570\\u636E\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5F02\\u6B65\\u8FED\\u4EE3\"}),\"\\uFF1A\\u968F\\u7740 \",(0,e.jsx)(n.code,{children:\"async/await\"}),\" \\u7684\\u51FA\\u73B0\\uFF0C\\u751F\\u6210\\u5668\\u53EF\\u7528\\u4E8E\\u7BA1\\u7406\\u5F02\\u6B65\\u6570\\u636E\\u6D41\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528\\u751F\\u6210\\u5668\\u51FD\\u6570\\u521B\\u5EFA\\u8FED\\u4EE3\\u5668\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u6211\\u4EEC\\u53EF\\u4EE5\\u91CD\\u5199\\u6211\\u4EEC\\u7684 \",(0,e.jsx)(n.code,{children:\"Range\"}),\" \\u793A\\u4F8B\\u4EE5\\u4F7F\\u7528\\u751F\\u6210\\u5668\\u51FD\\u6570\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Define a class named Range\nclass Range {\n  // The constructor takes two parameters: start and end\n  constructor(start, end) {\n    // Assign the start and end values to the instance\n    this.start = start;\n    this.end = end;\n  }\n\n  // Define the default iterator for the object using a generator\n  *[Symbol.iterator]() {\n    // Initialize the current value to the start value\n    let current = this.start;\n\n    // While the current value is less than or equal to the end value...\n    while (current <= this.end) {\n      // ...yield the current value\n      yield current++;\n    }\n  }\n}\n\n// Create a new Range object with start = 1 and end = 3\nconst range = new Range(1, 3);\n// Iterate over the range object\nfor (const number of range) {\n  // Log each number to the console\n  console.log(number); // 1, 2, 3\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8FED\\u4EE3\\u6570\\u636E\\u6D41\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u751F\\u6210\\u5668\\u975E\\u5E38\\u9002\\u5408\\u8FED\\u4EE3\\u6570\\u636E\\u6D41\\uFF0C\\u4F8B\\u5982\\u4ECE API \\u83B7\\u53D6\\u6570\\u636E\\u6216\\u8BFB\\u53D6\\u6587\\u4EF6\\u3002\\u6B64\\u793A\\u4F8B\\u6F14\\u793A\\u4E86\\u5982\\u4F55\\u4F7F\\u7528\\u751F\\u6210\\u5668\\u5206\\u6279\\u4ECE API \\u83B7\\u53D6\\u6570\\u636E\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`async function* fetchDataInBatches(url, numBatches = 5, batchSize = 10) {\n  let startIndex = 0;\n  let currBatch = 0;\n\n  while (currBatch < numBatches) {\n    const response = await fetch(\n      \\`\\${url}?_start=\\${startIndex}&_limit=\\${batchSize}\\`,\n    );\n    const data = await response.json();\n    if (data.length === 0) break;\n    yield data;\n    startIndex += batchSize;\n    currBatch += 1;\n  }\n}\n\nasync function fetchAndLogData() {\n  const dataGenerator = fetchDataInBatches(\n    'https://jsonplaceholder.typicode.com/todos',\n  );\n\n  for await (const batch of dataGenerator) {\n    console.log(batch);\n  }\n}\nfetchAndLogData();\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u6B64\\u751F\\u6210\\u5668\\u51FD\\u6570 \",(0,e.jsx)(n.code,{children:\"fetchDataInBatches\"}),\" \\u4EE5\\u6307\\u5B9A\\u5927\\u5C0F\\u7684\\u6279\\u6B21\\u4ECE API \\u83B7\\u53D6\\u6570\\u636E\\u3002\\u5B83\\u4EA7\\u751F\\u6BCF\\u6279\\u6570\\u636E\\uFF0C\\u5141\\u8BB8\\u60A8\\u5728\\u83B7\\u53D6\\u4E0B\\u4E00\\u6279\\u6570\\u636E\\u4E4B\\u524D\\u5BF9\\u5176\\u8FDB\\u884C\\u5904\\u7406\\u3002\\u8FD9\\u79CD\\u65B9\\u6CD5\\u53EF\\u4EE5\\u6BD4\\u4E00\\u6B21\\u83B7\\u53D6\\u6240\\u6709\\u6570\\u636E\\u66F4\\u8282\\u7701\\u5185\\u5B58\\u3002\"]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5B9E\\u73B0\\u5F02\\u6B65\\u8FED\\u4EE3\\u5668\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u751F\\u6210\\u5668\\u53EF\\u7528\\u4E8E\\u5B9E\\u73B0\\u5F02\\u6B65\\u8FED\\u4EE3\\u5668\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u5904\\u7406\\u5F02\\u6B65\\u6570\\u636E\\u6E90\\u5F88\\u6709\\u7528\\u3002\\u6B64\\u793A\\u4F8B\\u6F14\\u793A\\u4E86\\u7528\\u4E8E\\u4ECE API \\u83B7\\u53D6\\u6570\\u636E\\u7684\\u5F02\\u6B65\\u8FED\\u4EE3\\u5668\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`async function* fetchDataAsyncIterator(url, pagesToFetch = 3) {\n  let currPage = 1;\n\n  while (currPage <= pagesToFetch) {\n    const response = await fetch(\\`\\${url}?_page=\\${currPage}\\`);\n    const data = await response.json();\n    if (data.length === 0) break;\n    yield data;\n    currPage++;\n  }\n}\n\nasync function fetchAndLogData() {\n  const asyncIterator = fetchDataAsyncIterator(\n    'https://jsonplaceholder.typicode.com/todos',\n  );\n\n  for await (const chunk of asyncIterator) {\n    console.log(chunk);\n  }\n}\nfetchAndLogData();\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u751F\\u6210\\u5668\\u51FD\\u6570 \",(0,e.jsx)(n.code,{children:\"fetchDataAsyncIterator\"}),\" \\u662F\\u4E00\\u4E2A\\u5F02\\u6B65\\u8FED\\u4EE3\\u5668\\uFF0C\\u5B83\\u4ECE API \\u4E2D\\u5206\\u9875\\u83B7\\u53D6\\u6570\\u636E\\u3002\\u5B83\\u4EA7\\u751F\\u6BCF\\u9875\\u6570\\u636E\\uFF0C\\u5141\\u8BB8\\u60A8\\u5728\\u83B7\\u53D6\\u4E0B\\u4E00\\u9875\\u4E4B\\u524D\\u5BF9\\u5176\\u8FDB\\u884C\\u5904\\u7406\\u3002\\u8FD9\\u79CD\\u65B9\\u6CD5\\u5BF9\\u4E8E\\u5904\\u7406\\u5927\\u578B\\u6570\\u636E\\u96C6\\u6216\\u957F\\u65F6\\u95F4\\u8FD0\\u884C\\u7684\\u64CD\\u4F5C\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u751F\\u6210\\u5668\\u4E5F\\u5E7F\\u6CDB\\u7528\\u4E8E JavaScript \\u5E93\\u548C\\u6846\\u67B6\\u4E2D\\uFF0C\\u4F8B\\u5982 \",(0,e.jsx)(n.a,{href:\"https://redux-saga.js.org/\",children:\"Redux-Saga\"}),\" \\u548C \",(0,e.jsx)(n.a,{href:\"https://rxjs.dev/\",children:\"RxJS\"}),\"\\uFF0C\\u7528\\u4E8E\\u5904\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u548C\\u54CD\\u5E94\\u5F0F\\u7F16\\u7A0B\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FED\\u4EE3\\u5668\\u548C\\u751F\\u6210\\u5668\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u5F3A\\u5927\\u800C\\u7075\\u6D3B\\u7684\\u65B9\\u5F0F\\u6765\\u5904\\u7406 JavaScript \\u4E2D\\u7684\\u6570\\u636E\\u96C6\\u5408\\u3002 \\u8FED\\u4EE3\\u5668\\u5B9A\\u4E49\\u4E86\\u4E00\\u79CD\\u904D\\u5386\\u6570\\u636E\\u5E8F\\u5217\\u7684\\u6807\\u51C6\\u5316\\u65B9\\u5F0F\\uFF0C\\u800C\\u751F\\u6210\\u5668\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u5177\\u8868\\u73B0\\u529B\\u548C\\u6548\\u7387\\u7684\\u65B9\\u5F0F\\u6765\\u521B\\u5EFA\\u8FED\\u4EE3\\u5668\\u3001\\u5904\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u4EE5\\u53CA\\u7EC4\\u5408\\u590D\\u6742\\u7684\\u6570\\u636E\\u7BA1\\u9053\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators\",children:\"\\u8FED\\u4EE3\\u5668\\u548C\\u751F\\u6210\\u5668\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/async-iterators-generators\",children:\"\\u5F02\\u6B65\\u8FED\\u4EE3\\u548C\\u751F\\u6210\\u5668\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/iterable\",children:\"\\u53EF\\u8FED\\u4EE3\\u5BF9\\u8C61\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://blog.bitsrc.io/explore-iterators-and-generators-in-javascript-ea4102015377\",children:\"\\u63A2\\u7D22 JavaScript \\u4E2D\\u7684\\u8FED\\u4EE3\\u5668\\u548C\\u751F\\u6210\\u5668\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://syntactic-sugar.dev/blog/nested-route/iterators-and-generators\",children:\"JavaScript \\u4E2D\\u7684\\u8FED\\u4EE3\\u5668\\u548C\\u751F\\u6210\\u5668\"})}),`\n`]})]})}function j(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(s,r)})):s(r)}var w=j;return y(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var m=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),x=(r,n)=>{for(var t in n)o(r,t,{get:n[t],enumerable:!0})},a=(r,n,t,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of f(n))!v.call(r,l)&&l!==t&&o(r,l,{get:()=>n[l],enumerable:!(c=g(n,l))||c.enumerable});return r};var y=(r,n,t)=>(t=r!=null?u(p(r)):{},a(n||!r||!r.__esModule?o(t,\"default\",{value:r,enumerable:!0}):t,r)),b=r=>a(o({},\"__esModule\",{value:!0}),r);var d=m((D,i)=>{i.exports=_jsx_runtime});var w={};x(w,{default:()=>h,frontmatter:()=>j});var e=y(d()),j={title:\"JavaScript \\u4E2D\\u7684\\u8FED\\u4EE3\\u5668\\u548C\\u751F\\u6210\\u5668\\u662F\\u4EC0\\u4E48\\uFF0C\\u5B83\\u4EEC\\u6709\\u4EC0\\u4E48\\u7528\\u9014\\uFF1F\"};function s(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u8FED\\u4EE3\\u5668\\u548C\\u751F\\u6210\\u5668\\u662F\\u7528\\u4E8E\\u7BA1\\u7406\\u6570\\u636E\\u5E8F\\u5217\\u548C\\u4EE5\\u66F4\\u7075\\u6D3B\\u7684\\u65B9\\u5F0F\\u63A7\\u5236\\u6267\\u884C\\u6D41\\u7A0B\\u7684\\u5F3A\\u5927\\u5DE5\\u5177\\u3002\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u8FED\\u4EE3\\u5668\"}),\"\\u662F\\u5B9A\\u4E49\\u5E8F\\u5217\\u5E76\\u53EF\\u80FD\\u5728\\u5176\\u7EC8\\u6B62\\u65F6\\u8FD4\\u56DE\\u503C\\u7684\\u5BF9\\u8C61\\u3002\\u5B83\\u9075\\u5FAA\\u4E00\\u4E2A\\u7279\\u5B9A\\u7684\\u63A5\\u53E3\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"\\u8FED\\u4EE3\\u5668\\u5BF9\\u8C61\\u5FC5\\u987B\\u5B9E\\u73B0\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"next()\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"next()\"}),\" \\u65B9\\u6CD5\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5177\\u6709\\u4E24\\u4E2A\\u5C5E\\u6027\\u7684\\u5BF9\\u8C61\\uFF1A\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"value\"}),\"\\uFF1A\\u5E8F\\u5217\\u4E2D\\u7684\\u4E0B\\u4E00\\u4E2A\\u503C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"done\"}),\"\\uFF1A\\u4E00\\u4E2A\\u5E03\\u5C14\\u503C\\uFF0C\\u5982\\u679C\\u8FED\\u4EE3\\u5668\\u5DF2\\u5B8C\\u6210\\u5176\\u5E8F\\u5217\\uFF0C\\u5219\\u4E3A \",(0,e.jsx)(n.code,{children:\"true\"}),\"\\uFF0C\\u5426\\u5219\\u4E3A \",(0,e.jsx)(n.code,{children:\"false\"}),\"\\u3002\"]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u5B9E\\u73B0\\u8FED\\u4EE3\\u5668\\u63A5\\u53E3\\u7684\\u5BF9\\u8C61\\u7684\\u793A\\u4F8B\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const iterator = {\n  current: 0,\n  last: 5,\n  next() {\n    if (this.current <= this.last) {\n      return { value: this.current++, done: false };\n    } else {\n      return { value: undefined, done: true };\n    }\n  },\n};\n\nlet result = iterator.next();\nwhile (!result.done) {\n  console.log(result.value); // Logs 0, 1, 2, 3, 4, 5\n  result = iterator.next();\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u751F\\u6210\\u5668\"}),\"\\u662F\\u4E00\\u79CD\\u7279\\u6B8A\\u7684\\u51FD\\u6570\\uFF0C\",(0,e.jsx)(n.strong,{children:\"\\u53EF\\u4EE5\\u6682\\u505C\\u6267\\u884C\\u5E76\\u5728\\u7A0D\\u540E\\u6062\\u590D\"}),\"\\u3002\\u5B83\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"function*\"}),\" \\u8BED\\u6CD5\\u548C \",(0,e.jsx)(n.code,{children:\"yield\"}),\" \\u5173\\u952E\\u5B57\\u6765\\u63A7\\u5236\\u6267\\u884C\\u6D41\\u7A0B\\u3002\\u5F53\\u60A8\\u8C03\\u7528\\u751F\\u6210\\u5668\\u51FD\\u6570\\u65F6\\uFF0C\\u5B83\\u4E0D\\u4F1A\\u50CF\\u666E\\u901A\\u51FD\\u6570\\u4E00\\u6837\\u5B8C\\u5168\\u6267\\u884C\\u3002\\u76F8\\u53CD\\uFF0C\\u5B83\\u8FD4\\u56DE\\u4E00\\u4E2A\\u8FED\\u4EE3\\u5668\\u5BF9\\u8C61\\u3002\\u5728\\u8FD4\\u56DE\\u7684\\u8FED\\u4EE3\\u5668\\u4E0A\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"next()\"}),\" \\u65B9\\u6CD5\\u4F1A\\u5C06\\u751F\\u6210\\u5668\\u63A8\\u8FDB\\u5230\\u4E0B\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"yield\"}),\" \\u8BED\\u53E5\\uFF0C\\u5E76\\u4E14 \",(0,e.jsx)(n.code,{children:\"yield\"}),\" \\u4E4B\\u540E\\u7684\\u503C\\u5C06\\u6210\\u4E3A \",(0,e.jsx)(n.code,{children:\"next()\"}),\" \\u7684\\u8FD4\\u56DE\\u503C\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function* numberGenerator() {\n  let num = 0;\n  while (num <= 5) {\n    yield num++;\n  }\n}\n\nconst gen = numberGenerator();\nconsole.log(gen.next()); // { value: 0, done: false }\nconsole.log(gen.next()); // { value: 1, done: false }\nconsole.log(gen.next()); // { value: 2, done: false }\nconsole.log(gen.next()); // { value: 3, done: false }\nconsole.log(gen.next()); // { value: 4, done: false }\nconsole.log(gen.next()); // { value: 5, done: false }\nconsole.log(gen.next()); // { value: undefined, done: true }\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u751F\\u6210\\u5668\\u5BF9\\u4E8E\\u6309\\u9700\\u521B\\u5EFA\\u8FED\\u4EE3\\u5668\\u975E\\u5E38\\u5F3A\\u5927\\uFF0C\\u5C24\\u5176\\u9002\\u7528\\u4E8E\\u65E0\\u9650\\u5E8F\\u5217\\u6216\\u590D\\u6742\\u7684\\u8FED\\u4EE3\\u903B\\u8F91\\u3002\\u5B83\\u4EEC\\u53EF\\u7528\\u4E8E\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u60F0\\u6027\\u6C42\\u503C \\u2013 \\u4EC5\\u5728\\u9700\\u8981\\u65F6\\u5904\\u7406\\u5143\\u7D20\\uFF0C\\u63D0\\u9AD8\\u5927\\u578B\\u6570\\u636E\\u96C6\\u7684\\u5185\\u5B58\\u6548\\u7387\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4E3A\\u81EA\\u5B9A\\u4E49\\u6570\\u636E\\u7ED3\\u6784\\u5B9E\\u73B0\\u8FED\\u4EE3\\u5668\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u521B\\u5EFA\\u5F02\\u6B65\\u8FED\\u4EE3\\u5668\\u4EE5\\u5904\\u7406\\u6570\\u636E\\u6D41\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u8FED\\u4EE3\\u5668\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8FED\\u4EE3\\u5668\\u662F\\u5B9A\\u4E49\\u5E8F\\u5217\\u5E76\\u63D0\\u4F9B \",(0,e.jsx)(n.code,{children:\"next()\"}),\" \\u65B9\\u6CD5\\u4EE5\\u8BBF\\u95EE\\u5E8F\\u5217\\u4E2D\\u4E0B\\u4E00\\u4E2A\\u503C\\u7684\\u5BF9\\u8C61\\u3002\\u5B83\\u4EEC\\u7528\\u4E8E\\u8FED\\u4EE3 \",(0,e.jsx)(n.code,{children:\"\\u6570\\u7EC4\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"\\u5B57\\u7B26\\u4E32\"}),\" \\u548C\\u81EA\\u5B9A\\u4E49 \",(0,e.jsx)(n.code,{children:\"\\u5BF9\\u8C61\"}),\" \\u7B49\\u6570\\u636E\\u7ED3\\u6784\\u3002\\u8FED\\u4EE3\\u5668\\u7684\\u4E3B\\u8981\\u7528\\u4F8B\\u5305\\u62EC\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5B9E\\u73B0\\u8FED\\u4EE3\\u5668\\u534F\\u8BAE\\u4EE5\\u4F7F\\u81EA\\u5B9A\\u4E49\\u5BF9\\u8C61\\u53EF\\u8FED\\u4EE3\\uFF0C\\u5141\\u8BB8\\u5B83\\u4EEC\\u4E0E \",(0,e.jsx)(n.code,{children:\"for...of\"}),\" \\u5FAA\\u73AF\\u548C\\u5176\\u4ED6\\u671F\\u671B\\u53EF\\u8FED\\u4EE3\\u5BF9\\u8C61\\u7684\\u8BED\\u8A00\\u7ED3\\u6784\\u4E00\\u8D77\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.li,{children:\"\\u63D0\\u4F9B\\u4E00\\u79CD\\u6807\\u51C6\\u65B9\\u5F0F\\u6765\\u8FED\\u4EE3\\u4E0D\\u540C\\u7684\\u6570\\u636E\\u7ED3\\u6784\\uFF0C\\u4F7F\\u4EE3\\u7801\\u66F4\\u5177\\u53EF\\u91CD\\u7528\\u6027\\u548C\\u53EF\\u7EF4\\u62A4\\u6027\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E3A\\u6570\\u5B57\\u8303\\u56F4\\u521B\\u5EFA\\u81EA\\u5B9A\\u4E49\\u8FED\\u4EE3\\u5668\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u6211\\u4EEC\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728\\u4EFB\\u4F55\\u81EA\\u5B9A\\u4E49\\u5BF9\\u8C61\\u4E2D\\u5B9E\\u73B0 \",(0,e.jsx)(n.code,{children:\"[Symbol.iterator]()\"}),\" \\u6765\\u4E3A\\u8FED\\u4EE3\\u5668\\u63D0\\u4F9B\\u9ED8\\u8BA4\\u5B9E\\u73B0\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u5B9A\\u4E49\\u4E00\\u4E2A\\u540D\\u4E3A Range \\u7684\\u7C7B\nclass Range {\n  // \\u6784\\u9020\\u51FD\\u6570\\u63A5\\u53D7\\u4E24\\u4E2A\\u53C2\\u6570\\uFF1Astart \\u548C end\n  constructor(start, end) {\n    // \\u5C06 start \\u548C end \\u503C\\u5206\\u914D\\u7ED9\\u5B9E\\u4F8B\n    this.start = start;\n    this.end = end;\n  }\n\n  // \\u5B9A\\u4E49\\u5BF9\\u8C61\\u7684\\u9ED8\\u8BA4\\u8FED\\u4EE3\\u5668\n  [Symbol.iterator]() {\n    // \\u5C06\\u5F53\\u524D\\u503C\\u521D\\u59CB\\u5316\\u4E3A\\u8D77\\u59CB\\u503C\n    let current = this.start;\n    const end = this.end;\n\n    // \\u8FD4\\u56DE\\u4E00\\u4E2A\\u5E26\\u6709 next \\u65B9\\u6CD5\\u7684\\u5BF9\\u8C61\n    return {\n      // next \\u65B9\\u6CD5\\u8FD4\\u56DE\\u8FED\\u4EE3\\u4E2D\\u7684\\u4E0B\\u4E00\\u4E2A\\u503C\n      next() {\n        // \\u5982\\u679C\\u5F53\\u524D\\u503C\\u5C0F\\u4E8E\\u6216\\u7B49\\u4E8E\\u7ED3\\u675F\\u503C...\n        if (current <= end) {\n          // ...\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5E26\\u6709\\u5F53\\u524D\\u503C\\u548C done \\u8BBE\\u7F6E\\u4E3A false \\u7684\\u5BF9\\u8C61\n          return { value: current++, done: false };\n        }\n\n        // ...\\u5426\\u5219\\uFF0C\\u8FD4\\u56DE\\u4E00\\u4E2A value \\u8BBE\\u7F6E\\u4E3A undefined \\u4E14 done \\u8BBE\\u7F6E\\u4E3A true \\u7684\\u5BF9\\u8C61\n        return { value: undefined, done: true };\n      },\n    };\n  }\n}\n\n// \\u521B\\u5EFA\\u4E00\\u4E2A start = 1 \\u4E14 end = 3 \\u7684\\u65B0 Range \\u5BF9\\u8C61\nconst range = new Range(1, 3);\n// \\u8FED\\u4EE3 range \\u5BF9\\u8C61\nfor (const number of range) {\n  // \\u5C06\\u6BCF\\u4E2A\\u6570\\u5B57\\u8BB0\\u5F55\\u5230\\u63A7\\u5236\\u53F0\n  console.log(number); // 1, 2, 3\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528\\u8FED\\u4EE3\\u5668\\u534F\\u8BAE\\u7684\\u5185\\u7F6E\\u5BF9\\u8C61\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u51E0\\u4E2A\\u5185\\u7F6E\\u5BF9\\u8C61\\u5B9E\\u73B0\\u4E86\\u8FED\\u4EE3\\u5668\\u534F\\u8BAE\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4EEC\\u5177\\u6709\\u9ED8\\u8BA4\\u7684 \",(0,e.jsx)(n.code,{children:\"@@iterator\"}),\" \\u65B9\\u6CD5\\u3002\\u8FD9\\u4F7F\\u5F97\\u5B83\\u4EEC\\u53EF\\u4EE5\\u5728 \",(0,e.jsx)(n.code,{children:\"for...of\"}),\" \\u5FAA\\u73AF\\u548C\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\\u7B49\\u7ED3\\u6784\\u4E2D\\u4F7F\\u7528\\u3002\\u4EE5\\u4E0B\\u662F\\u5B9E\\u73B0\\u8FED\\u4EE3\\u5668\\u7684\\u4E00\\u4E9B\\u5173\\u952E\\u5185\\u7F6E\\u5BF9\\u8C61\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u6570\\u7EC4\"}),\"\\uFF1A\\u6570\\u7EC4\\u5177\\u6709\\u5185\\u7F6E\\u7684\\u8FED\\u4EE3\\u5668\\uFF0C\\u5141\\u8BB8\\u60A8\\u904D\\u5386\\u5176\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const array = [1, 2, 3];\nconst iterator = array[Symbol.iterator]();\n\nconsole.log(iterator.next()); // { value: 1, done: false }\nconsole.log(iterator.next()); // { value: 2, done: false }\nconsole.log(iterator.next()); // { value: 3, done: false }\nconsole.log(iterator.next()); // { value: undefined, done: true }\n\nfor (const value of array) {\n  console.log(value); // Logs 1, 2, 3\n}\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B57\\u7B26\\u4E32\"}),\"\\uFF1A\\u5B57\\u7B26\\u4E32\\u5177\\u6709\\u5185\\u7F6E\\u7684\\u8FED\\u4EE3\\u5668\\uFF0C\\u5141\\u8BB8\\u60A8\\u904D\\u5386\\u5176\\u5B57\\u7B26\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const string = 'hello';\nconst iterator = string[Symbol.iterator]();\n\nconsole.log(iterator.next()); // { value: \"h\", done: false }\nconsole.log(iterator.next()); // { value: \"e\", done: false }\nconsole.log(iterator.next()); // { value: \"l\", done: false }\nconsole.log(iterator.next()); // { value: \"l\", done: false }\nconsole.log(iterator.next()); // { value: \"o\", done: false }\nconsole.log(iterator.next()); // { value: undefined, done: true }\n\nfor (const char of string) {\n  console.log(char); // Logs h, e, l, l, o\n}\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:\"DOM NodeLists\"})}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Create a new div and append it to the DOM\nconst newDiv = document.createElement('div');\nnewDiv.id = 'div1';\ndocument.body.appendChild(newDiv);\n\nconst nodeList = document.querySelectorAll('div');\nconst iterator = nodeList[Symbol.iterator]();\n\nconsole.log(iterator.next()); // { value: HTMLDivElement, done: false }\nconsole.log(iterator.next()); // { value: undefined, done: true }\n\nfor (const node of nodeList) {\n  console.log(node); // Logs each <div> element, in this case only div1\n}\n`})}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"Map\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"Set\"}),\" \\u4E5F\\u6709\\u5185\\u7F6E\\u7684\\u8FED\\u4EE3\\u5668\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u751F\\u6210\\u5668\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u751F\\u6210\\u5668\\u662F\\u4E00\\u79CD\\u7279\\u6B8A\\u7684\\u51FD\\u6570\\uFF0C\\u53EF\\u4EE5\\u6682\\u505C\\u548C\\u6062\\u590D\\u5176\\u6267\\u884C\\uFF0C\\u5141\\u8BB8\\u5B83\\u4EEC\\u52A8\\u6001\\u751F\\u6210\\u4E00\\u7CFB\\u5217\\u503C\\u3002\\u5B83\\u4EEC\\u901A\\u5E38\\u7528\\u4E8E\\u521B\\u5EFA\\u8FED\\u4EE3\\u5668\\uFF0C\\u4F46\\u4E5F\\u6709\\u5176\\u4ED6\\u5E94\\u7528\\u3002\\u751F\\u6210\\u5668\\u7684\\u4E3B\\u8981\\u7528\\u4F8B\\u5305\\u62EC\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u4E0E\\u624B\\u52A8\\u5B9E\\u73B0\\u8FED\\u4EE3\\u5668\\u534F\\u8BAE\\u76F8\\u6BD4\\uFF0C\\u4EE5\\u66F4\\u7B80\\u6D01\\u6613\\u8BFB\\u7684\\u65B9\\u5F0F\\u521B\\u5EFA\\u8FED\\u4EE3\\u5668\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B9E\\u73B0\\u60F0\\u6027\\u6C42\\u503C\\uFF0C\\u4EC5\\u5728\\u9700\\u8981\\u65F6\\u751F\\u6210\\u503C\\uFF0C\\u4ECE\\u800C\\u8282\\u7701\\u5185\\u5B58\\u548C\\u8BA1\\u7B97\\u65F6\\u95F4\\u3002\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u901A\\u8FC7\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"yield\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"await\"}),\" \\u4EE5\\u540C\\u6B65\\u98CE\\u683C\\u7F16\\u5199\\u4EE3\\u7801\\uFF0C\\u7B80\\u5316\\u5F02\\u6B65\\u7F16\\u7A0B\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u751F\\u6210\\u5668\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E9B\\u597D\\u5904\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u60F0\\u6027\\u6C42\\u503C\"}),\"\\uFF1A\\u5B83\\u4EEC\\u52A8\\u6001\\u751F\\u6210\\u503C\\uFF0C\\u5E76\\u4E14\\u4EC5\\u5728\\u9700\\u8981\\u65F6\\u624D\\u751F\\u6210\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u63D0\\u9AD8\\u5185\\u5B58\\u6548\\u7387\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6682\\u505C\\u548C\\u6062\\u590D\"}),\"\\uFF1A\\u751F\\u6210\\u5668\\u53EF\\u4EE5\\u6682\\u505C\\u6267\\u884C\\uFF08\\u901A\\u8FC7 \",(0,e.jsx)(n.code,{children:\"yield\"}),\"\\uFF09\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u5728\\u6062\\u590D\\u65F6\\u63A5\\u6536\\u65B0\\u6570\\u636E\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5F02\\u6B65\\u8FED\\u4EE3\"}),\"\\uFF1A\\u968F\\u7740 \",(0,e.jsx)(n.code,{children:\"async/await\"}),\" \\u7684\\u51FA\\u73B0\\uFF0C\\u751F\\u6210\\u5668\\u53EF\\u7528\\u4E8E\\u7BA1\\u7406\\u5F02\\u6B65\\u6570\\u636E\\u6D41\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528\\u751F\\u6210\\u5668\\u51FD\\u6570\\u521B\\u5EFA\\u8FED\\u4EE3\\u5668\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u6211\\u4EEC\\u53EF\\u4EE5\\u91CD\\u5199\\u6211\\u4EEC\\u7684 \",(0,e.jsx)(n.code,{children:\"Range\"}),\" \\u793A\\u4F8B\\u4EE5\\u4F7F\\u7528\\u751F\\u6210\\u5668\\u51FD\\u6570\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Define a class named Range\nclass Range {\n  // The constructor takes two parameters: start and end\n  constructor(start, end) {\n    // Assign the start and end values to the instance\n    this.start = start;\n    this.end = end;\n  }\n\n  // Define the default iterator for the object using a generator\n  *[Symbol.iterator]() {\n    // Initialize the current value to the start value\n    let current = this.start;\n\n    // While the current value is less than or equal to the end value...\n    while (current <= this.end) {\n      // ...yield the current value\n      yield current++;\n    }\n  }\n}\n\n// Create a new Range object with start = 1 and end = 3\nconst range = new Range(1, 3);\n// Iterate over the range object\nfor (const number of range) {\n  // Log each number to the console\n  console.log(number); // 1, 2, 3\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8FED\\u4EE3\\u6570\\u636E\\u6D41\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u751F\\u6210\\u5668\\u975E\\u5E38\\u9002\\u5408\\u8FED\\u4EE3\\u6570\\u636E\\u6D41\\uFF0C\\u4F8B\\u5982\\u4ECE API \\u83B7\\u53D6\\u6570\\u636E\\u6216\\u8BFB\\u53D6\\u6587\\u4EF6\\u3002\\u6B64\\u793A\\u4F8B\\u6F14\\u793A\\u4E86\\u5982\\u4F55\\u4F7F\\u7528\\u751F\\u6210\\u5668\\u5206\\u6279\\u4ECE API \\u83B7\\u53D6\\u6570\\u636E\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`async function* fetchDataInBatches(url, numBatches = 5, batchSize = 10) {\n  let startIndex = 0;\n  let currBatch = 0;\n\n  while (currBatch < numBatches) {\n    const response = await fetch(\n      \\`\\${url}?_start=\\${startIndex}&_limit=\\${batchSize}\\`,\n    );\n    const data = await response.json();\n    if (data.length === 0) break;\n    yield data;\n    startIndex += batchSize;\n    currBatch += 1;\n  }\n}\n\nasync function fetchAndLogData() {\n  const dataGenerator = fetchDataInBatches(\n    'https://jsonplaceholder.typicode.com/todos',\n  );\n\n  for await (const batch of dataGenerator) {\n    console.log(batch);\n  }\n}\nfetchAndLogData();\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u6B64\\u751F\\u6210\\u5668\\u51FD\\u6570 \",(0,e.jsx)(n.code,{children:\"fetchDataInBatches\"}),\" \\u4EE5\\u6307\\u5B9A\\u5927\\u5C0F\\u7684\\u6279\\u6B21\\u4ECE API \\u83B7\\u53D6\\u6570\\u636E\\u3002\\u5B83\\u4EA7\\u751F\\u6BCF\\u6279\\u6570\\u636E\\uFF0C\\u5141\\u8BB8\\u60A8\\u5728\\u83B7\\u53D6\\u4E0B\\u4E00\\u6279\\u6570\\u636E\\u4E4B\\u524D\\u5BF9\\u5176\\u8FDB\\u884C\\u5904\\u7406\\u3002\\u8FD9\\u79CD\\u65B9\\u6CD5\\u53EF\\u4EE5\\u6BD4\\u4E00\\u6B21\\u83B7\\u53D6\\u6240\\u6709\\u6570\\u636E\\u66F4\\u8282\\u7701\\u5185\\u5B58\\u3002\"]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5B9E\\u73B0\\u5F02\\u6B65\\u8FED\\u4EE3\\u5668\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u751F\\u6210\\u5668\\u53EF\\u7528\\u4E8E\\u5B9E\\u73B0\\u5F02\\u6B65\\u8FED\\u4EE3\\u5668\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u5904\\u7406\\u5F02\\u6B65\\u6570\\u636E\\u6E90\\u5F88\\u6709\\u7528\\u3002\\u6B64\\u793A\\u4F8B\\u6F14\\u793A\\u4E86\\u7528\\u4E8E\\u4ECE API \\u83B7\\u53D6\\u6570\\u636E\\u7684\\u5F02\\u6B65\\u8FED\\u4EE3\\u5668\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`async function* fetchDataAsyncIterator(url, pagesToFetch = 3) {\n  let currPage = 1;\n\n  while (currPage <= pagesToFetch) {\n    const response = await fetch(\\`\\${url}?_page=\\${currPage}\\`);\n    const data = await response.json();\n    if (data.length === 0) break;\n    yield data;\n    currPage++;\n  }\n}\n\nasync function fetchAndLogData() {\n  const asyncIterator = fetchDataAsyncIterator(\n    'https://jsonplaceholder.typicode.com/todos',\n  );\n\n  for await (const chunk of asyncIterator) {\n    console.log(chunk);\n  }\n}\nfetchAndLogData();\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u751F\\u6210\\u5668\\u51FD\\u6570 \",(0,e.jsx)(n.code,{children:\"fetchDataAsyncIterator\"}),\" \\u662F\\u4E00\\u4E2A\\u5F02\\u6B65\\u8FED\\u4EE3\\u5668\\uFF0C\\u5B83\\u4ECE API \\u4E2D\\u5206\\u9875\\u83B7\\u53D6\\u6570\\u636E\\u3002\\u5B83\\u4EA7\\u751F\\u6BCF\\u9875\\u6570\\u636E\\uFF0C\\u5141\\u8BB8\\u60A8\\u5728\\u83B7\\u53D6\\u4E0B\\u4E00\\u9875\\u4E4B\\u524D\\u5BF9\\u5176\\u8FDB\\u884C\\u5904\\u7406\\u3002\\u8FD9\\u79CD\\u65B9\\u6CD5\\u5BF9\\u4E8E\\u5904\\u7406\\u5927\\u578B\\u6570\\u636E\\u96C6\\u6216\\u957F\\u65F6\\u95F4\\u8FD0\\u884C\\u7684\\u64CD\\u4F5C\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u751F\\u6210\\u5668\\u4E5F\\u5E7F\\u6CDB\\u7528\\u4E8E JavaScript \\u5E93\\u548C\\u6846\\u67B6\\u4E2D\\uFF0C\\u4F8B\\u5982 \",(0,e.jsx)(n.a,{href:\"https://redux-saga.js.org/\",children:\"Redux-Saga\"}),\" \\u548C \",(0,e.jsx)(n.a,{href:\"https://rxjs.dev/\",children:\"RxJS\"}),\"\\uFF0C\\u7528\\u4E8E\\u5904\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u548C\\u54CD\\u5E94\\u5F0F\\u7F16\\u7A0B\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FED\\u4EE3\\u5668\\u548C\\u751F\\u6210\\u5668\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u5F3A\\u5927\\u800C\\u7075\\u6D3B\\u7684\\u65B9\\u5F0F\\u6765\\u5904\\u7406 JavaScript \\u4E2D\\u7684\\u6570\\u636E\\u96C6\\u5408\\u3002 \\u8FED\\u4EE3\\u5668\\u5B9A\\u4E49\\u4E86\\u4E00\\u79CD\\u904D\\u5386\\u6570\\u636E\\u5E8F\\u5217\\u7684\\u6807\\u51C6\\u5316\\u65B9\\u5F0F\\uFF0C\\u800C\\u751F\\u6210\\u5668\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u5177\\u8868\\u73B0\\u529B\\u548C\\u6548\\u7387\\u7684\\u65B9\\u5F0F\\u6765\\u521B\\u5EFA\\u8FED\\u4EE3\\u5668\\u3001\\u5904\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u4EE5\\u53CA\\u7EC4\\u5408\\u590D\\u6742\\u7684\\u6570\\u636E\\u7BA1\\u9053\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators\",children:\"\\u8FED\\u4EE3\\u5668\\u548C\\u751F\\u6210\\u5668\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/async-iterators-generators\",children:\"\\u5F02\\u6B65\\u8FED\\u4EE3\\u548C\\u751F\\u6210\\u5668\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/iterable\",children:\"\\u53EF\\u8FED\\u4EE3\\u5BF9\\u8C61\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://blog.bitsrc.io/explore-iterators-and-generators-in-javascript-ea4102015377\",children:\"\\u63A2\\u7D22 JavaScript \\u4E2D\\u7684\\u8FED\\u4EE3\\u5668\\u548C\\u751F\\u6210\\u5668\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://syntactic-sugar.dev/blog/nested-route/iterators-and-generators\",children:\"JavaScript \\u4E2D\\u7684\\u8FED\\u4EE3\\u5668\\u548C\\u751F\\u6210\\u5668\"})}),`\n`]})]})}function h(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(s,{...r})}):s(r)}return b(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-javascript-object-getters-and-setters-for/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-javascript-object-getters-and-setters-for/en-US.json
index a6776c5db..5e3cd826c 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-javascript-object-getters-and-setters-for/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-javascript-object-getters-and-setters-for/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-javascript-object-getters-and-setters-for/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var r in e)o(n,r,{get:e[r],enumerable:!0})},i=(n,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!m.call(n,a)&&a!==r&&o(n,a,{get:()=>e[a],enumerable:!(s=p(e,a))||s.enumerable});return n};var y=(n,e,r)=>(r=n!=null?h(g(n)):{},i(e||!n||!n.__esModule?o(r,\"default\",{value:n,enumerable:!0}):r,n)),b=n=>i(o({},\"__esModule\",{value:!0}),n);var c=f((J,l)=>{l.exports=_jsx_runtime});var S={};v(S,{default:()=>N,frontmatter:()=>j});var t=y(c()),j={title:\"What are JavaScript object getters and setters for?\"};function d(n){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",ul:\"ul\",li:\"li\",strong:\"strong\",ol:\"ol\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:\"JavaScript object getters and setters are used to control access to an object's properties. They provide a way to encapsulate the implementation details of a property and define custom behavior when getting or setting its value.\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Getters and setters are defined using the \",(0,t.jsx)(e.code,{children:\"get\"}),\" and \",(0,t.jsx)(e.code,{children:\"set\"}),\" keywords, respectively, followed by a function that is executed when the property is accessed or assigned a new value.\"]}),`\n`,(0,t.jsx)(e.p,{children:\"Here's a code example demonstrating the use of getters and setters:\"}),`\n`,(0,t.jsx)(e.pre,{live:!0,children:(0,t.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  _name: 'John Doe', // Private property\n\n  get name() {\n    // Getter\n    return this._name;\n  },\n  set name(newName) {\n    // Setter\n    if (newName.trim().length > 0) {\n      this._name = newName;\n    } else {\n      console.log('Invalid name');\n    }\n  },\n};\n\n// Accessing the name property using the getter\nconsole.log(person.name); // Output: 'John Doe'\n\n// Setting the name property using the setter\nperson.name = 'Jane Smith'; // Setter is called\nconsole.log(person.name); // Output: 'Jane Smith'\n\nperson.name = ''; // Setter is called, but the value is not set due to validation\nconsole.log(person.name); // Output: 'Jane Smith'\n`})}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"JavaScript object getters and setters\"}),`\n`,(0,t.jsx)(e.p,{children:\"In JavaScript, getters and setters are special methods that allow you to control how properties of an object are accessed and modified.\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Getters\"}),\": Functions that are invoked whenever you try to access a property using dot notation (e.g., \",(0,t.jsx)(e.code,{children:\"obj.name\"}),\"). They provide a way to customize the value that is returned when the property is read.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Setters\"}),\": Functions that are called when you try to assign a value to a property using dot notation with the assignment operator (e.g., \",(0,t.jsx)(e.code,{children:'obj.name = \"John\"'}),\"). They allow you to perform actions like data validation, formatting, or side effects before the actual value is stored in the object.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.pre,{live:!0,children:(0,t.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  _firstName: 'John',\n  _lastName: 'Doe',\n  get fullName() {\n    return \\`\\${this._firstName} \\${this._lastName}\\`;\n  },\n  set fullName(value) {\n    const parts = value.split(' ');\n    this._firstName = parts[0];\n    this._lastName = parts[1];\n  },\n};\n\nconsole.log(person.fullName); // Output: John Doe\nperson.fullName = 'Jane Smith';\nconsole.log(person.fullName); // Output: Jane Smith\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"In this example, the \",(0,t.jsx)(e.code,{children:\"fullName\"}),\" property doesn't have a direct value stored in the object. The getter function calculates it by combining the \",(0,t.jsx)(e.code,{children:\"_firstName\"}),\" and \",(0,t.jsx)(e.code,{children:\"_lastName\"}),\" properties. The setter splits the assigned value into first and last names and updates the internal properties accordingly.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"Benefits\"}),`\n`,(0,t.jsx)(e.p,{children:\"Getters and setters provide several benefits:\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Encapsulation\"}),\": They allow you to encapsulate the implementation details of a property, making it easier to change the internal representation without affecting external code that uses the property.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Data validation\"}),\": Setters can be used to validate the values being assigned to a property, ensuring data integrity and consistency.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Computed Properties\"}),\": Getters can be used to compute and return a derived value based on other properties or calculations.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Side effects\"}),\": Setters can be used to perform side effects when a property is changed. For example, you might update a related property or trigger an action when a specific value is assigned/modified, such as logging or debugging.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty\",children:\"Object.defineProperty() | MDN\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://javascript.info/property-descriptors\",children:\"Property flags and descriptors | Javascript.info\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal\",children:\"Object.seal() | MDN\"})}),`\n`]})]})}function w(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(d,n)})):d(n)}var N=w;return b(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),y=(n,e)=>{for(var r in e)o(n,r,{get:e[r],enumerable:!0})},i=(n,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!f.call(n,a)&&a!==r&&o(n,a,{get:()=>e[a],enumerable:!(s=u(e,a))||s.enumerable});return n};var b=(n,e,r)=>(r=n!=null?p(g(n)):{},i(e||!n||!n.__esModule?o(r,\"default\",{value:n,enumerable:!0}):r,n)),j=n=>i(o({},\"__esModule\",{value:!0}),n);var c=v((_,l)=>{l.exports=_jsx_runtime});var N={};y(N,{default:()=>h,frontmatter:()=>w});var t=b(c()),w={title:\"What are JavaScript object getters and setters for?\"};function d(n){let e={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:\"JavaScript object getters and setters are used to control access to an object's properties. They provide a way to encapsulate the implementation details of a property and define custom behavior when getting or setting its value.\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Getters and setters are defined using the \",(0,t.jsx)(e.code,{children:\"get\"}),\" and \",(0,t.jsx)(e.code,{children:\"set\"}),\" keywords, respectively, followed by a function that is executed when the property is accessed or assigned a new value.\"]}),`\n`,(0,t.jsx)(e.p,{children:\"Here's a code example demonstrating the use of getters and setters:\"}),`\n`,(0,t.jsx)(e.pre,{live:!0,children:(0,t.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  _name: 'John Doe', // Private property\n\n  get name() {\n    // Getter\n    return this._name;\n  },\n  set name(newName) {\n    // Setter\n    if (newName.trim().length > 0) {\n      this._name = newName;\n    } else {\n      console.log('Invalid name');\n    }\n  },\n};\n\n// Accessing the name property using the getter\nconsole.log(person.name); // Output: 'John Doe'\n\n// Setting the name property using the setter\nperson.name = 'Jane Smith'; // Setter is called\nconsole.log(person.name); // Output: 'Jane Smith'\n\nperson.name = ''; // Setter is called, but the value is not set due to validation\nconsole.log(person.name); // Output: 'Jane Smith'\n`})}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"JavaScript object getters and setters\"}),`\n`,(0,t.jsx)(e.p,{children:\"In JavaScript, getters and setters are special methods that allow you to control how properties of an object are accessed and modified.\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Getters\"}),\": Functions that are invoked whenever you try to access a property using dot notation (e.g., \",(0,t.jsx)(e.code,{children:\"obj.name\"}),\"). They provide a way to customize the value that is returned when the property is read.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Setters\"}),\": Functions that are called when you try to assign a value to a property using dot notation with the assignment operator (e.g., \",(0,t.jsx)(e.code,{children:'obj.name = \"John\"'}),\"). They allow you to perform actions like data validation, formatting, or side effects before the actual value is stored in the object.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.pre,{live:!0,children:(0,t.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  _firstName: 'John',\n  _lastName: 'Doe',\n  get fullName() {\n    return \\`\\${this._firstName} \\${this._lastName}\\`;\n  },\n  set fullName(value) {\n    const parts = value.split(' ');\n    this._firstName = parts[0];\n    this._lastName = parts[1];\n  },\n};\n\nconsole.log(person.fullName); // Output: John Doe\nperson.fullName = 'Jane Smith';\nconsole.log(person.fullName); // Output: Jane Smith\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"In this example, the \",(0,t.jsx)(e.code,{children:\"fullName\"}),\" property doesn't have a direct value stored in the object. The getter function calculates it by combining the \",(0,t.jsx)(e.code,{children:\"_firstName\"}),\" and \",(0,t.jsx)(e.code,{children:\"_lastName\"}),\" properties. The setter splits the assigned value into first and last names and updates the internal properties accordingly.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"Benefits\"}),`\n`,(0,t.jsx)(e.p,{children:\"Getters and setters provide several benefits:\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Encapsulation\"}),\": They allow you to encapsulate the implementation details of a property, making it easier to change the internal representation without affecting external code that uses the property.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Data validation\"}),\": Setters can be used to validate the values being assigned to a property, ensuring data integrity and consistency.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Computed Properties\"}),\": Getters can be used to compute and return a derived value based on other properties or calculations.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Side effects\"}),\": Setters can be used to perform side effects when a property is changed. For example, you might update a related property or trigger an action when a specific value is assigned/modified, such as logging or debugging.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty\",children:\"Object.defineProperty() | MDN\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://javascript.info/property-descriptors\",children:\"Property flags and descriptors | Javascript.info\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal\",children:\"Object.seal() | MDN\"})}),`\n`]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(d,{...n})}):d(n)}return j(N);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-javascript-object-getters-and-setters-for/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-javascript-object-getters-and-setters-for/zh-CN.json
index 2f5c0b778..bc520f11e 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-javascript-object-getters-and-setters-for/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-javascript-object-getters-and-setters-for/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-javascript-object-getters-and-setters-for/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var u=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),N=(t,e)=>{for(var r in e)s(t,r,{get:e[r],enumerable:!0})},o=(t,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of p(e))!f.call(t,l)&&l!==r&&s(t,l,{get:()=>e[l],enumerable:!(i=m(e,l))||i.enumerable});return t};var _=(t,e,r)=>(r=t!=null?d(g(t)):{},o(e||!t||!t.__esModule?s(r,\"default\",{value:t,enumerable:!0}):r,t)),S=t=>o(s({},\"__esModule\",{value:!0}),t);var a=u((D,c)=>{c.exports=_jsx_runtime});var b={};N(b,{default:()=>v,frontmatter:()=>j});var n=_(a()),j={title:\"JavaScript \\u5BF9\\u8C61 getter \\u548C setter \\u6709\\u4EC0\\u4E48\\u7528\\uFF1F\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",ul:\"ul\",li:\"li\",strong:\"strong\",ol:\"ol\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"JavaScript \\u5BF9\\u8C61 getter \\u548C setter \\u7528\\u4E8E\\u63A7\\u5236\\u5BF9\\u5BF9\\u8C61\\u5C5E\\u6027\\u7684\\u8BBF\\u95EE\\u3002\\u5B83\\u4EEC\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u5C01\\u88C5\\u5C5E\\u6027\\u7684\\u5B9E\\u73B0\\u7EC6\\u8282\\uFF0C\\u5E76\\u5728\\u83B7\\u53D6\\u6216\\u8BBE\\u7F6E\\u5176\\u503C\\u65F6\\u5B9A\\u4E49\\u81EA\\u5B9A\\u4E49\\u884C\\u4E3A\\u7684\\u65B9\\u6CD5\\u3002\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Getters \\u548C setters \\u5206\\u522B\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"get\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"set\"}),\" \\u5173\\u952E\\u5B57\\u5B9A\\u4E49\\uFF0C\\u540E\\u8DDF\\u4E00\\u4E2A\\u5728\\u8BBF\\u95EE\\u5C5E\\u6027\\u6216\\u4E3A\\u5176\\u5206\\u914D\\u65B0\\u503C\\u65F6\\u6267\\u884C\\u7684\\u51FD\\u6570\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u4E00\\u4E2A\\u4EE3\\u7801\\u793A\\u4F8B\\uFF0C\\u6F14\\u793A\\u4E86 getter \\u548C setter \\u7684\\u7528\\u6CD5\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  _name: 'John Doe', // \\u79C1\\u6709\\u5C5E\\u6027\n\n  get name() {\n    // Getter\n    return this._name;\n  },\n  set name(newName) {\n    // Setter\n    if (newName.trim().length > 0) {\n      this._name = newName;\n    } else {\n      console.log('Invalid name');\n    }\n  },\n};\n\n// \\u4F7F\\u7528 getter \\u8BBF\\u95EE name \\u5C5E\\u6027\nconsole.log(person.name); // \\u8F93\\u51FA\\uFF1A'John Doe'\n\n// \\u4F7F\\u7528 setter \\u8BBE\\u7F6E name \\u5C5E\\u6027\nperson.name = 'Jane Smith'; // \\u8C03\\u7528 Setter\nconsole.log(person.name); // \\u8F93\\u51FA\\uFF1A'Jane Smith'\n\nperson.name = ''; // \\u8C03\\u7528 Setter\\uFF0C\\u4F46\\u7531\\u4E8E\\u9A8C\\u8BC1\\uFF0C\\u8BE5\\u503C\\u672A\\u8BBE\\u7F6E\nconsole.log(person.name); // \\u8F93\\u51FA\\uFF1A'Jane Smith'\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"JavaScript \\u5BF9\\u8C61 getter \\u548C setter\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0Cgetter \\u548C setter \\u662F\\u7279\\u6B8A\\u7684\\u65B9\\u6CD5\\uFF0C\\u5141\\u8BB8\\u60A8\\u63A7\\u5236\\u5982\\u4F55\\u8BBF\\u95EE\\u548C\\u4FEE\\u6539\\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u3002\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Getters\"}),\"\\uFF1A\\u6BCF\\u5F53\\u60A8\\u5C1D\\u8BD5\\u4F7F\\u7528\\u70B9\\u8868\\u793A\\u6CD5\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"obj.name\"}),\"\\uFF09\\u8BBF\\u95EE\\u5C5E\\u6027\\u65F6\\u8C03\\u7528\\u7684\\u51FD\\u6570\\u3002\\u5B83\\u4EEC\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u81EA\\u5B9A\\u4E49\\u5728\\u8BFB\\u53D6\\u5C5E\\u6027\\u65F6\\u8FD4\\u56DE\\u7684\\u503C\\u7684\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Setters\"}),\"\\uFF1A\\u5F53\\u60A8\\u5C1D\\u8BD5\\u4F7F\\u7528\\u70B9\\u8868\\u793A\\u6CD5\\u548C\\u8D4B\\u503C\\u8FD0\\u7B97\\u7B26\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:'obj.name = \"John\"'}),\"\\uFF09\\u4E3A\\u5C5E\\u6027\\u8D4B\\u503C\\u65F6\\u8C03\\u7528\\u7684\\u51FD\\u6570\\u3002\\u5B83\\u4EEC\\u5141\\u8BB8\\u60A8\\u5728\\u5C06\\u5B9E\\u9645\\u503C\\u5B58\\u50A8\\u5728\\u5BF9\\u8C61\\u4E2D\\u4E4B\\u524D\\u6267\\u884C\\u6570\\u636E\\u9A8C\\u8BC1\\u3001\\u683C\\u5F0F\\u5316\\u6216\\u526F\\u4F5C\\u7528\\u7B49\\u64CD\\u4F5C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  _firstName: 'John',\n  _lastName: 'Doe',\n  get fullName() {\n    return \\`\\${this._firstName} \\${this._lastName}\\`;\n  },\n  set fullName(value) {\n    const parts = value.split(' ');\n    this._firstName = parts[0];\n    this._lastName = parts[1];\n  },\n};\n\nconsole.log(person.fullName); // \\u8F93\\u51FA\\uFF1AJohn Doe\nperson.fullName = 'Jane Smith';\nconsole.log(person.fullName); // \\u8F93\\u51FA\\uFF1AJane Smith\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"fullName\"}),\" \\u5C5E\\u6027\\u6CA1\\u6709\\u76F4\\u63A5\\u5B58\\u50A8\\u5728\\u5BF9\\u8C61\\u4E2D\\u7684\\u503C\\u3002getter \\u51FD\\u6570\\u901A\\u8FC7\\u7EC4\\u5408 \",(0,n.jsx)(e.code,{children:\"_firstName\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"_lastName\"}),\" \\u5C5E\\u6027\\u6765\\u8BA1\\u7B97\\u5B83\\u3002setter \\u5C06\\u5206\\u914D\\u7684\\u503C\\u62C6\\u5206\\u4E3A\\u540D\\u5B57\\u548C\\u59D3\\u6C0F\\uFF0C\\u5E76\\u76F8\\u5E94\\u5730\\u66F4\\u65B0\\u5185\\u90E8\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,n.jsx)(e.p,{children:\"Getters \\u548C setters \\u63D0\\u4F9B\\u4E86\\u51E0\\u4E2A\\u597D\\u5904\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5C01\\u88C5\"}),\"\\uFF1A\\u5B83\\u4EEC\\u5141\\u8BB8\\u60A8\\u5C01\\u88C5\\u5C5E\\u6027\\u7684\\u5B9E\\u73B0\\u7EC6\\u8282\\uFF0C\\u4ECE\\u800C\\u66F4\\u5BB9\\u6613\\u66F4\\u6539\\u5185\\u90E8\\u8868\\u793A\\uFF0C\\u800C\\u4E0D\\u4F1A\\u5F71\\u54CD\\u4F7F\\u7528\\u8BE5\\u5C5E\\u6027\\u7684\\u5916\\u90E8\\u4EE3\\u7801\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6570\\u636E\\u9A8C\\u8BC1\"}),\"\\uFF1ASetters \\u53EF\\u7528\\u4E8E\\u9A8C\\u8BC1\\u5206\\u914D\\u7ED9\\u5C5E\\u6027\\u7684\\u503C\\uFF0C\\u786E\\u4FDD\\u6570\\u636E\\u5B8C\\u6574\\u6027\\u548C\\u4E00\\u81F4\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8BA1\\u7B97\\u5C5E\\u6027\"}),\"\\uFF1AGetters \\u53EF\\u7528\\u4E8E\\u8BA1\\u7B97\\u5E76\\u8FD4\\u56DE\\u57FA\\u4E8E\\u5176\\u4ED6\\u5C5E\\u6027\\u6216\\u8BA1\\u7B97\\u7684\\u6D3E\\u751F\\u503C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u526F\\u4F5C\\u7528\"}),\"\\uFF1A\\u5F53\\u5C5E\\u6027\\u66F4\\u6539\\u65F6\\uFF0CSetters \\u53EF\\u7528\\u4E8E\\u6267\\u884C\\u526F\\u4F5C\\u7528\\u3002\\u4F8B\\u5982\\uFF0C\\u60A8\\u53EF\\u80FD\\u66F4\\u65B0\\u76F8\\u5173\\u5C5E\\u6027\\u6216\\u5728\\u5206\\u914D/\\u4FEE\\u6539\\u7279\\u5B9A\\u503C\\u65F6\\u89E6\\u53D1\\u64CD\\u4F5C\\uFF0C\\u4F8B\\u5982\\u65E5\\u5FD7\\u8BB0\\u5F55\\u6216\\u8C03\\u8BD5\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Object/defineProperty\",children:\"Object.defineProperty() | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/property-descriptors\",children:\"Property flags and descriptors | Javascript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal\",children:\"Object.seal() | MDN\"})}),`\n`]})]})}function J(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var v=J;return S(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var N=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),_=(t,e)=>{for(var r in e)s(t,r,{get:e[r],enumerable:!0})},i=(t,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of g(e))!u.call(t,l)&&l!==r&&s(t,l,{get:()=>e[l],enumerable:!(o=p(e,l))||o.enumerable});return t};var S=(t,e,r)=>(r=t!=null?m(f(t)):{},i(e||!t||!t.__esModule?s(r,\"default\",{value:t,enumerable:!0}):r,t)),J=t=>i(s({},\"__esModule\",{value:!0}),t);var a=N((x,c)=>{c.exports=_jsx_runtime});var v={};_(v,{default:()=>d,frontmatter:()=>j});var n=S(a()),j={title:\"JavaScript \\u5BF9\\u8C61 getter \\u548C setter \\u6709\\u4EC0\\u4E48\\u7528\\uFF1F\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"JavaScript \\u5BF9\\u8C61 getter \\u548C setter \\u7528\\u4E8E\\u63A7\\u5236\\u5BF9\\u5BF9\\u8C61\\u5C5E\\u6027\\u7684\\u8BBF\\u95EE\\u3002\\u5B83\\u4EEC\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u5C01\\u88C5\\u5C5E\\u6027\\u7684\\u5B9E\\u73B0\\u7EC6\\u8282\\uFF0C\\u5E76\\u5728\\u83B7\\u53D6\\u6216\\u8BBE\\u7F6E\\u5176\\u503C\\u65F6\\u5B9A\\u4E49\\u81EA\\u5B9A\\u4E49\\u884C\\u4E3A\\u7684\\u65B9\\u6CD5\\u3002\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Getters \\u548C setters \\u5206\\u522B\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"get\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"set\"}),\" \\u5173\\u952E\\u5B57\\u5B9A\\u4E49\\uFF0C\\u540E\\u8DDF\\u4E00\\u4E2A\\u5728\\u8BBF\\u95EE\\u5C5E\\u6027\\u6216\\u4E3A\\u5176\\u5206\\u914D\\u65B0\\u503C\\u65F6\\u6267\\u884C\\u7684\\u51FD\\u6570\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u4E00\\u4E2A\\u4EE3\\u7801\\u793A\\u4F8B\\uFF0C\\u6F14\\u793A\\u4E86 getter \\u548C setter \\u7684\\u7528\\u6CD5\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  _name: 'John Doe', // \\u79C1\\u6709\\u5C5E\\u6027\n\n  get name() {\n    // Getter\n    return this._name;\n  },\n  set name(newName) {\n    // Setter\n    if (newName.trim().length > 0) {\n      this._name = newName;\n    } else {\n      console.log('Invalid name');\n    }\n  },\n};\n\n// \\u4F7F\\u7528 getter \\u8BBF\\u95EE name \\u5C5E\\u6027\nconsole.log(person.name); // \\u8F93\\u51FA\\uFF1A'John Doe'\n\n// \\u4F7F\\u7528 setter \\u8BBE\\u7F6E name \\u5C5E\\u6027\nperson.name = 'Jane Smith'; // \\u8C03\\u7528 Setter\nconsole.log(person.name); // \\u8F93\\u51FA\\uFF1A'Jane Smith'\n\nperson.name = ''; // \\u8C03\\u7528 Setter\\uFF0C\\u4F46\\u7531\\u4E8E\\u9A8C\\u8BC1\\uFF0C\\u8BE5\\u503C\\u672A\\u8BBE\\u7F6E\nconsole.log(person.name); // \\u8F93\\u51FA\\uFF1A'Jane Smith'\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"JavaScript \\u5BF9\\u8C61 getter \\u548C setter\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0Cgetter \\u548C setter \\u662F\\u7279\\u6B8A\\u7684\\u65B9\\u6CD5\\uFF0C\\u5141\\u8BB8\\u60A8\\u63A7\\u5236\\u5982\\u4F55\\u8BBF\\u95EE\\u548C\\u4FEE\\u6539\\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u3002\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Getters\"}),\"\\uFF1A\\u6BCF\\u5F53\\u60A8\\u5C1D\\u8BD5\\u4F7F\\u7528\\u70B9\\u8868\\u793A\\u6CD5\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"obj.name\"}),\"\\uFF09\\u8BBF\\u95EE\\u5C5E\\u6027\\u65F6\\u8C03\\u7528\\u7684\\u51FD\\u6570\\u3002\\u5B83\\u4EEC\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u81EA\\u5B9A\\u4E49\\u5728\\u8BFB\\u53D6\\u5C5E\\u6027\\u65F6\\u8FD4\\u56DE\\u7684\\u503C\\u7684\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Setters\"}),\"\\uFF1A\\u5F53\\u60A8\\u5C1D\\u8BD5\\u4F7F\\u7528\\u70B9\\u8868\\u793A\\u6CD5\\u548C\\u8D4B\\u503C\\u8FD0\\u7B97\\u7B26\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:'obj.name = \"John\"'}),\"\\uFF09\\u4E3A\\u5C5E\\u6027\\u8D4B\\u503C\\u65F6\\u8C03\\u7528\\u7684\\u51FD\\u6570\\u3002\\u5B83\\u4EEC\\u5141\\u8BB8\\u60A8\\u5728\\u5C06\\u5B9E\\u9645\\u503C\\u5B58\\u50A8\\u5728\\u5BF9\\u8C61\\u4E2D\\u4E4B\\u524D\\u6267\\u884C\\u6570\\u636E\\u9A8C\\u8BC1\\u3001\\u683C\\u5F0F\\u5316\\u6216\\u526F\\u4F5C\\u7528\\u7B49\\u64CD\\u4F5C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  _firstName: 'John',\n  _lastName: 'Doe',\n  get fullName() {\n    return \\`\\${this._firstName} \\${this._lastName}\\`;\n  },\n  set fullName(value) {\n    const parts = value.split(' ');\n    this._firstName = parts[0];\n    this._lastName = parts[1];\n  },\n};\n\nconsole.log(person.fullName); // \\u8F93\\u51FA\\uFF1AJohn Doe\nperson.fullName = 'Jane Smith';\nconsole.log(person.fullName); // \\u8F93\\u51FA\\uFF1AJane Smith\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"fullName\"}),\" \\u5C5E\\u6027\\u6CA1\\u6709\\u76F4\\u63A5\\u5B58\\u50A8\\u5728\\u5BF9\\u8C61\\u4E2D\\u7684\\u503C\\u3002getter \\u51FD\\u6570\\u901A\\u8FC7\\u7EC4\\u5408 \",(0,n.jsx)(e.code,{children:\"_firstName\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"_lastName\"}),\" \\u5C5E\\u6027\\u6765\\u8BA1\\u7B97\\u5B83\\u3002setter \\u5C06\\u5206\\u914D\\u7684\\u503C\\u62C6\\u5206\\u4E3A\\u540D\\u5B57\\u548C\\u59D3\\u6C0F\\uFF0C\\u5E76\\u76F8\\u5E94\\u5730\\u66F4\\u65B0\\u5185\\u90E8\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,n.jsx)(e.p,{children:\"Getters \\u548C setters \\u63D0\\u4F9B\\u4E86\\u51E0\\u4E2A\\u597D\\u5904\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5C01\\u88C5\"}),\"\\uFF1A\\u5B83\\u4EEC\\u5141\\u8BB8\\u60A8\\u5C01\\u88C5\\u5C5E\\u6027\\u7684\\u5B9E\\u73B0\\u7EC6\\u8282\\uFF0C\\u4ECE\\u800C\\u66F4\\u5BB9\\u6613\\u66F4\\u6539\\u5185\\u90E8\\u8868\\u793A\\uFF0C\\u800C\\u4E0D\\u4F1A\\u5F71\\u54CD\\u4F7F\\u7528\\u8BE5\\u5C5E\\u6027\\u7684\\u5916\\u90E8\\u4EE3\\u7801\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6570\\u636E\\u9A8C\\u8BC1\"}),\"\\uFF1ASetters \\u53EF\\u7528\\u4E8E\\u9A8C\\u8BC1\\u5206\\u914D\\u7ED9\\u5C5E\\u6027\\u7684\\u503C\\uFF0C\\u786E\\u4FDD\\u6570\\u636E\\u5B8C\\u6574\\u6027\\u548C\\u4E00\\u81F4\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8BA1\\u7B97\\u5C5E\\u6027\"}),\"\\uFF1AGetters \\u53EF\\u7528\\u4E8E\\u8BA1\\u7B97\\u5E76\\u8FD4\\u56DE\\u57FA\\u4E8E\\u5176\\u4ED6\\u5C5E\\u6027\\u6216\\u8BA1\\u7B97\\u7684\\u6D3E\\u751F\\u503C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u526F\\u4F5C\\u7528\"}),\"\\uFF1A\\u5F53\\u5C5E\\u6027\\u66F4\\u6539\\u65F6\\uFF0CSetters \\u53EF\\u7528\\u4E8E\\u6267\\u884C\\u526F\\u4F5C\\u7528\\u3002\\u4F8B\\u5982\\uFF0C\\u60A8\\u53EF\\u80FD\\u66F4\\u65B0\\u76F8\\u5173\\u5C5E\\u6027\\u6216\\u5728\\u5206\\u914D/\\u4FEE\\u6539\\u7279\\u5B9A\\u503C\\u65F6\\u89E6\\u53D1\\u64CD\\u4F5C\\uFF0C\\u4F8B\\u5982\\u65E5\\u5FD7\\u8BB0\\u5F55\\u6216\\u8C03\\u8BD5\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Object/defineProperty\",children:\"Object.defineProperty() | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/property-descriptors\",children:\"Property flags and descriptors | Javascript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal\",children:\"Object.seal() | MDN\"})}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return J(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-javascript-object-property-flags-and-descriptors/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-javascript-object-property-flags-and-descriptors/en-US.json
index 026f55424..2b1c85fa6 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-javascript-object-property-flags-and-descriptors/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-javascript-object-property-flags-and-descriptors/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-javascript-object-property-flags-and-descriptors/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),y=(n,e)=>{for(var t in e)i(n,t,{get:e[t],enumerable:!0})},l=(n,e,t,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of b(e))!f.call(n,o)&&o!==t&&i(n,o,{get:()=>e[o],enumerable:!(c=p(e,o))||c.enumerable});return n};var m=(n,e,t)=>(t=n!=null?h(u(n)):{},l(e||!n||!n.__esModule?i(t,\"default\",{value:n,enumerable:!0}):t,n)),j=n=>l(i({},\"__esModule\",{value:!0}),n);var d=g((J,a)=>{a.exports=_jsx_runtime});var D={};y(D,{default:()=>O,frontmatter:()=>v});var r=m(d()),v={title:\"What are JavaScript object property flags and descriptors?\"};function s(n){let e=Object.assign({h2:\"h2\",p:\"p\",strong:\"strong\",ul:\"ul\",li:\"li\",code:\"code\",hr:\"hr\",pre:\"pre\",h3:\"h3\",a:\"a\"},n.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsx)(e.p,{children:\"In JavaScript, property flags and descriptors manage the behavior and attributes of object properties.\"}),`\n`,(0,r.jsx)(e.p,{children:(0,r.jsx)(e.strong,{children:\"Property flags\"})}),`\n`,(0,r.jsx)(e.p,{children:\"Property flags are used to specify the behavior of a property on an object. Here are the available flags:\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"writable\"}),\": Specifies whether the property can be written to. Defaults to \",(0,r.jsx)(e.code,{children:\"true\"}),\".\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"enumerable\"}),\": Specifies whether the property is enumerable. Defaults to \",(0,r.jsx)(e.code,{children:\"true\"}),\".\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"configurable\"}),\": Specifies whether the property can be deleted or its attributes changed. Default is \",(0,r.jsx)(e.code,{children:\"true\"}),\".\"]}),`\n`]}),`\n`,(0,r.jsx)(e.p,{children:(0,r.jsx)(e.strong,{children:\"Property descriptors\"})}),`\n`,(0,r.jsxs)(e.p,{children:[\"These provide detailed information about an object's property, including its value and flags. They are retrieved using \",(0,r.jsx)(e.code,{children:\"Object.getOwnPropertyDescriptor()\"}),\" and set using \",(0,r.jsx)(e.code,{children:\"Object.defineProperty()\"}),\".\"]}),`\n`,(0,r.jsx)(e.p,{children:\"The use cases of property descriptors are as follows:\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[\"Making a property non-writable by setting \",(0,r.jsx)(e.code,{children:\"writable: false\"}),\" to ensure data consistency.\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"Hiding a property from enumeration by setting \",(0,r.jsx)(e.code,{children:\"enumerable: false\"}),\".\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"Preventing property deletion and modification by setting \",(0,r.jsx)(e.code,{children:\"configurable: false\"}),\".\"]}),`\n`,(0,r.jsx)(e.li,{children:\"Freezing or sealing objects to prevent modifications globally.\"}),`\n`]}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsx)(e.h2,{children:\"JavaScript object property flags and descriptors\"}),`\n`,(0,r.jsx)(e.p,{children:\"In JavaScript, property flags and descriptors are used to manage the behavior and attributes of object properties. These flags and descriptors are essential for understanding how properties are accessed, modified, and inherited.\"}),`\n`,(0,r.jsx)(e.h2,{children:\"Property flags\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"Property flags are used to specify the behavior of a property. They are set using the \",(0,r.jsx)(e.code,{children:\"Object.defineProperty()\"}),\" method, which allows you to define a property on an object with specific attributes. The available property flags are:\"]}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"writable\"}),\": Specifies whether the property can be written to. Defaults to \",(0,r.jsx)(e.code,{children:\"true\"}),\".\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"enumerable\"}),\": Specifies whether the property is enumerable. Defaults to \",(0,r.jsx)(e.code,{children:\"true\"}),\".\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"configurable\"}),\": Specifies whether the property can be deleted or its attributes changed. Default is \",(0,r.jsx)(e.code,{children:\"true\"}),\".\"]}),`\n`]}),`\n`,(0,r.jsx)(e.h2,{children:\"Property descriptors\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"Property descriptors provide detailed information about an object's property, encapsulating its value and flags. They are retrieved using \",(0,r.jsx)(e.code,{children:\"Object.getOwnPropertyDescriptor()\"}),\" and set using \",(0,r.jsx)(e.code,{children:\"Object.defineProperty()\"})]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let user = { name: 'John Doe' };\nlet descriptor = Object.getOwnPropertyDescriptor(user, 'name');\n\nconsole.log(descriptor); // {value: \"John Doe\", writable: true, enumerable: true, configurable: true}\n`})}),`\n`,(0,r.jsx)(e.h2,{children:\"Manipulating property flags\"}),`\n`,(0,r.jsxs)(e.h3,{children:[(0,r.jsx)(e.code,{children:\"writable\"}),\" flag\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"writable\"}),\" flag specifies whether a property can be written to. When \",(0,r.jsx)(e.code,{children:\"writable\"}),\" is \",(0,r.jsx)(e.code,{children:\"false\"}),\", trying to assign value to the property fails silently in non-strict mode, and it throws a \",(0,r.jsx)(e.code,{children:\"TypeError\"}),\" in strict mode.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const obj = {};\n\nObject.defineProperty(obj, 'name', {\n  writable: false,\n  value: 'John Doe',\n});\n\nconsole.log(obj.name); // Output: John Doe\nobj.name = 'Jane Doe'; // This does not change name. Generates TypeError in strict mode\nconsole.log(obj.name); // Output: John Doe (unchanged)\n`})}),`\n`,(0,r.jsxs)(e.h3,{children:[(0,r.jsx)(e.code,{children:\"enumerable\"}),\" flag\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"enumerable\"}),\" flag specifies whether a property is enumerable. The \",(0,r.jsx)(e.code,{children:\"enumerable flag\"}),\" is set to \",(0,r.jsx)(e.code,{children:\"true\"}),\", which means the property is visible in a \",(0,r.jsx)(e.code,{children:\"for...in\"}),\" loop.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const obj = {};\n\nObject.defineProperty(obj, 'name', {\n  enumerable: false,\n  value: 'John Doe',\n});\n\nfor (const prop in obj) {\n  console.log(prop); // Output: nothing\n}\n\nconst obj1 = {};\n\nObject.defineProperty(obj1, 'name', {\n  enumerable: true,\n  value: 'John Doe',\n});\n\nfor (const prop in obj1) {\n  console.log(prop); // Output: name\n}\n`})}),`\n`,(0,r.jsxs)(e.h2,{children:[(0,r.jsx)(e.code,{children:\"configurable\"}),\" flag\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"configurable\"}),\" flag specifies whether a property can be deleted or its attributes changed. When \",(0,r.jsx)(e.code,{children:\"configurable\"}),\" is \",(0,r.jsx)(e.code,{children:\"false\"}),\", trying to delete or change the property fails silently in non-strict mode, and it throws a \",(0,r.jsx)(e.code,{children:\"TypeError\"}),\" in strict mode.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const obj = {};\n\nObject.defineProperty(obj, 'name', {\n  configurable: false,\n  value: 'John Doe',\n});\n\ndelete obj.name; // Does not delete property. Generates TypeError in strict mode\nconsole.log(obj.name); // Output: John Doe (not deleted)\n`})}),`\n`,(0,r.jsx)(e.h2,{children:(0,r.jsx)(e.code,{children:\"Object.seal()\"})}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"Object.seal()\"}),\" method in JavaScript effectively prevents the addition or removal of properties from the object, while still allowing the modification of existing property values. It also makes all properties non-configurable, meaning their descriptors (like \",(0,r.jsx)(e.code,{children:\"writable\"}),\", \",(0,r.jsx)(e.code,{children:\"enumerable\"}),\", and \",(0,r.jsx)(e.code,{children:\"configurable\"}),\") cannot be changed.\"]}),`\n`,(0,r.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty\",children:\"Object.defineProperty() | MDN\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://javascript.info/property-descriptors\",children:\"Property flags and descriptors | Javascript.info\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal\",children:\"Object.seal() | MDN\"})}),`\n`]})]})}function w(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,Object.assign({},n,{children:(0,r.jsx)(s,n)})):s(n)}var O=w;return j(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),m=(n,e)=>{for(var t in e)i(n,t,{get:e[t],enumerable:!0})},c=(n,e,t,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of b(e))!g.call(n,o)&&o!==t&&i(n,o,{get:()=>e[o],enumerable:!(l=u(e,o))||l.enumerable});return n};var j=(n,e,t)=>(t=n!=null?p(f(n)):{},c(e||!n||!n.__esModule?i(t,\"default\",{value:n,enumerable:!0}):t,n)),v=n=>c(i({},\"__esModule\",{value:!0}),n);var d=y((P,a)=>{a.exports=_jsx_runtime});var O={};m(O,{default:()=>h,frontmatter:()=>w});var r=j(d()),w={title:\"What are JavaScript object property flags and descriptors?\"};function s(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsx)(e.p,{children:\"In JavaScript, property flags and descriptors manage the behavior and attributes of object properties.\"}),`\n`,(0,r.jsx)(e.p,{children:(0,r.jsx)(e.strong,{children:\"Property flags\"})}),`\n`,(0,r.jsx)(e.p,{children:\"Property flags are used to specify the behavior of a property on an object. Here are the available flags:\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"writable\"}),\": Specifies whether the property can be written to. Defaults to \",(0,r.jsx)(e.code,{children:\"true\"}),\".\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"enumerable\"}),\": Specifies whether the property is enumerable. Defaults to \",(0,r.jsx)(e.code,{children:\"true\"}),\".\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"configurable\"}),\": Specifies whether the property can be deleted or its attributes changed. Default is \",(0,r.jsx)(e.code,{children:\"true\"}),\".\"]}),`\n`]}),`\n`,(0,r.jsx)(e.p,{children:(0,r.jsx)(e.strong,{children:\"Property descriptors\"})}),`\n`,(0,r.jsxs)(e.p,{children:[\"These provide detailed information about an object's property, including its value and flags. They are retrieved using \",(0,r.jsx)(e.code,{children:\"Object.getOwnPropertyDescriptor()\"}),\" and set using \",(0,r.jsx)(e.code,{children:\"Object.defineProperty()\"}),\".\"]}),`\n`,(0,r.jsx)(e.p,{children:\"The use cases of property descriptors are as follows:\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[\"Making a property non-writable by setting \",(0,r.jsx)(e.code,{children:\"writable: false\"}),\" to ensure data consistency.\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"Hiding a property from enumeration by setting \",(0,r.jsx)(e.code,{children:\"enumerable: false\"}),\".\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"Preventing property deletion and modification by setting \",(0,r.jsx)(e.code,{children:\"configurable: false\"}),\".\"]}),`\n`,(0,r.jsx)(e.li,{children:\"Freezing or sealing objects to prevent modifications globally.\"}),`\n`]}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsx)(e.h2,{children:\"JavaScript object property flags and descriptors\"}),`\n`,(0,r.jsx)(e.p,{children:\"In JavaScript, property flags and descriptors are used to manage the behavior and attributes of object properties. These flags and descriptors are essential for understanding how properties are accessed, modified, and inherited.\"}),`\n`,(0,r.jsx)(e.h2,{children:\"Property flags\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"Property flags are used to specify the behavior of a property. They are set using the \",(0,r.jsx)(e.code,{children:\"Object.defineProperty()\"}),\" method, which allows you to define a property on an object with specific attributes. The available property flags are:\"]}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"writable\"}),\": Specifies whether the property can be written to. Defaults to \",(0,r.jsx)(e.code,{children:\"true\"}),\".\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"enumerable\"}),\": Specifies whether the property is enumerable. Defaults to \",(0,r.jsx)(e.code,{children:\"true\"}),\".\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"configurable\"}),\": Specifies whether the property can be deleted or its attributes changed. Default is \",(0,r.jsx)(e.code,{children:\"true\"}),\".\"]}),`\n`]}),`\n`,(0,r.jsx)(e.h2,{children:\"Property descriptors\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"Property descriptors provide detailed information about an object's property, encapsulating its value and flags. They are retrieved using \",(0,r.jsx)(e.code,{children:\"Object.getOwnPropertyDescriptor()\"}),\" and set using \",(0,r.jsx)(e.code,{children:\"Object.defineProperty()\"})]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let user = { name: 'John Doe' };\nlet descriptor = Object.getOwnPropertyDescriptor(user, 'name');\n\nconsole.log(descriptor); // {value: \"John Doe\", writable: true, enumerable: true, configurable: true}\n`})}),`\n`,(0,r.jsx)(e.h2,{children:\"Manipulating property flags\"}),`\n`,(0,r.jsxs)(e.h3,{children:[(0,r.jsx)(e.code,{children:\"writable\"}),\" flag\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"writable\"}),\" flag specifies whether a property can be written to. When \",(0,r.jsx)(e.code,{children:\"writable\"}),\" is \",(0,r.jsx)(e.code,{children:\"false\"}),\", trying to assign value to the property fails silently in non-strict mode, and it throws a \",(0,r.jsx)(e.code,{children:\"TypeError\"}),\" in strict mode.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const obj = {};\n\nObject.defineProperty(obj, 'name', {\n  writable: false,\n  value: 'John Doe',\n});\n\nconsole.log(obj.name); // Output: John Doe\nobj.name = 'Jane Doe'; // This does not change name. Generates TypeError in strict mode\nconsole.log(obj.name); // Output: John Doe (unchanged)\n`})}),`\n`,(0,r.jsxs)(e.h3,{children:[(0,r.jsx)(e.code,{children:\"enumerable\"}),\" flag\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"enumerable\"}),\" flag specifies whether a property is enumerable. The \",(0,r.jsx)(e.code,{children:\"enumerable flag\"}),\" is set to \",(0,r.jsx)(e.code,{children:\"true\"}),\", which means the property is visible in a \",(0,r.jsx)(e.code,{children:\"for...in\"}),\" loop.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const obj = {};\n\nObject.defineProperty(obj, 'name', {\n  enumerable: false,\n  value: 'John Doe',\n});\n\nfor (const prop in obj) {\n  console.log(prop); // Output: nothing\n}\n\nconst obj1 = {};\n\nObject.defineProperty(obj1, 'name', {\n  enumerable: true,\n  value: 'John Doe',\n});\n\nfor (const prop in obj1) {\n  console.log(prop); // Output: name\n}\n`})}),`\n`,(0,r.jsxs)(e.h2,{children:[(0,r.jsx)(e.code,{children:\"configurable\"}),\" flag\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"configurable\"}),\" flag specifies whether a property can be deleted or its attributes changed. When \",(0,r.jsx)(e.code,{children:\"configurable\"}),\" is \",(0,r.jsx)(e.code,{children:\"false\"}),\", trying to delete or change the property fails silently in non-strict mode, and it throws a \",(0,r.jsx)(e.code,{children:\"TypeError\"}),\" in strict mode.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const obj = {};\n\nObject.defineProperty(obj, 'name', {\n  configurable: false,\n  value: 'John Doe',\n});\n\ndelete obj.name; // Does not delete property. Generates TypeError in strict mode\nconsole.log(obj.name); // Output: John Doe (not deleted)\n`})}),`\n`,(0,r.jsx)(e.h2,{children:(0,r.jsx)(e.code,{children:\"Object.seal()\"})}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"Object.seal()\"}),\" method in JavaScript effectively prevents the addition or removal of properties from the object, while still allowing the modification of existing property values. It also makes all properties non-configurable, meaning their descriptors (like \",(0,r.jsx)(e.code,{children:\"writable\"}),\", \",(0,r.jsx)(e.code,{children:\"enumerable\"}),\", and \",(0,r.jsx)(e.code,{children:\"configurable\"}),\") cannot be changed.\"]}),`\n`,(0,r.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty\",children:\"Object.defineProperty() | MDN\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://javascript.info/property-descriptors\",children:\"Property flags and descriptors | Javascript.info\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal\",children:\"Object.seal() | MDN\"})}),`\n`]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(s,{...n})}):s(n)}return v(O);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-javascript-object-property-flags-and-descriptors/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-javascript-object-property-flags-and-descriptors/zh-CN.json
index 541ef6f52..ed021711c 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-javascript-object-property-flags-and-descriptors/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-javascript-object-property-flags-and-descriptors/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-javascript-object-property-flags-and-descriptors/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),g=(r,e)=>{for(var c in e)o(r,c,{get:e[c],enumerable:!0})},d=(r,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of u(e))!j.call(r,l)&&l!==c&&o(r,l,{get:()=>e[l],enumerable:!(i=p(e,l))||i.enumerable});return r};var m=(r,e,c)=>(c=r!=null?s(b(r)):{},d(e||!r||!r.__esModule?o(c,\"default\",{value:r,enumerable:!0}):c,r)),O=r=>d(o({},\"__esModule\",{value:!0}),r);var h=f((P,t)=>{t.exports=_jsx_runtime});var J={};g(J,{default:()=>D,frontmatter:()=>v});var n=m(h()),v={title:\"JavaScript \\u5BF9\\u8C61\\u5C5E\\u6027\\u6807\\u5FD7\\u548C\\u63CF\\u8FF0\\u7B26\\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(r){let e=Object.assign({h2:\"h2\",p:\"p\",strong:\"strong\",ul:\"ul\",li:\"li\",code:\"code\",hr:\"hr\",pre:\"pre\",h3:\"h3\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u5C5E\\u6027\\u6807\\u5FD7\\u548C\\u63CF\\u8FF0\\u7B26\\u7BA1\\u7406\\u5BF9\\u8C61\\u5C5E\\u6027\\u7684\\u884C\\u4E3A\\u548C\\u5C5E\\u6027\\u3002\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"\\u5C5E\\u6027\\u6807\\u5FD7\"})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5C5E\\u6027\\u6807\\u5FD7\\u7528\\u4E8E\\u6307\\u5B9A\\u5BF9\\u8C61\\u4E0A\\u5C5E\\u6027\\u7684\\u884C\\u4E3A\\u3002\\u4EE5\\u4E0B\\u662F\\u53EF\\u7528\\u7684\\u6807\\u5FD7\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"writable\"}),\"\\uFF1A\\u6307\\u5B9A\\u662F\\u5426\\u53EF\\u4EE5\\u5199\\u5165\\u5C5E\\u6027\\u3002\\u9ED8\\u8BA4\\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"enumerable\"}),\"\\uFF1A\\u6307\\u5B9A\\u5C5E\\u6027\\u662F\\u5426\\u53EF\\u679A\\u4E3E\\u3002\\u9ED8\\u8BA4\\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"configurable\"}),\"\\uFF1A\\u6307\\u5B9A\\u662F\\u5426\\u53EF\\u4EE5\\u5220\\u9664\\u5C5E\\u6027\\u6216\\u66F4\\u6539\\u5176\\u5C5E\\u6027\\u3002\\u9ED8\\u8BA4\\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"\\u5C5E\\u6027\\u63CF\\u8FF0\\u7B26\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u4E9B\\u63D0\\u4F9B\\u4E86\\u5173\\u4E8E\\u5BF9\\u8C61\\u5C5E\\u6027\\u7684\\u8BE6\\u7EC6\\u4FE1\\u606F\\uFF0C\\u5305\\u62EC\\u5176\\u503C\\u548C\\u6807\\u5FD7\\u3002\\u5B83\\u4EEC\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.getOwnPropertyDescriptor()\"}),\" \\u68C0\\u7D22\\uFF0C\\u5E76\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.defineProperty()\"}),\" \\u8BBE\\u7F6E\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5C5E\\u6027\\u63CF\\u8FF0\\u7B26\\u7684\\u7528\\u4F8B\\u5982\\u4E0B\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u901A\\u8FC7\\u8BBE\\u7F6E \",(0,n.jsx)(e.code,{children:\"writable: false\"}),\" \\u4F7F\\u5C5E\\u6027\\u4E0D\\u53EF\\u5199\\uFF0C\\u4EE5\\u786E\\u4FDD\\u6570\\u636E\\u4E00\\u81F4\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u901A\\u8FC7\\u8BBE\\u7F6E \",(0,n.jsx)(e.code,{children:\"enumerable: false\"}),\" \\u9690\\u85CF\\u5C5E\\u6027\\uFF0C\\u4F7F\\u5176\\u4E0D\\u88AB\\u679A\\u4E3E\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u901A\\u8FC7\\u8BBE\\u7F6E \",(0,n.jsx)(e.code,{children:\"configurable: false\"}),\" \\u963B\\u6B62\\u5C5E\\u6027\\u5220\\u9664\\u548C\\u4FEE\\u6539\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u51BB\\u7ED3\\u6216\\u5BC6\\u5C01\\u5BF9\\u8C61\\u4EE5\\u9632\\u6B62\\u5168\\u5C40\\u4FEE\\u6539\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"JavaScript \\u5BF9\\u8C61\\u5C5E\\u6027\\u6807\\u5FD7\\u548C\\u63CF\\u8FF0\\u7B26\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u5C5E\\u6027\\u6807\\u5FD7\\u548C\\u63CF\\u8FF0\\u7B26\\u7528\\u4E8E\\u7BA1\\u7406\\u5BF9\\u8C61\\u5C5E\\u6027\\u7684\\u884C\\u4E3A\\u548C\\u5C5E\\u6027\\u3002\\u8FD9\\u4E9B\\u6807\\u5FD7\\u548C\\u63CF\\u8FF0\\u7B26\\u5BF9\\u4E8E\\u7406\\u89E3\\u5982\\u4F55\\u8BBF\\u95EE\\u3001\\u4FEE\\u6539\\u548C\\u7EE7\\u627F\\u5C5E\\u6027\\u81F3\\u5173\\u91CD\\u8981\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5C5E\\u6027\\u6807\\u5FD7\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5C5E\\u6027\\u6807\\u5FD7\\u7528\\u4E8E\\u6307\\u5B9A\\u5C5E\\u6027\\u7684\\u884C\\u4E3A\\u3002\\u5B83\\u4EEC\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.defineProperty()\"}),\" \\u65B9\\u6CD5\\u8BBE\\u7F6E\\uFF0C\\u8BE5\\u65B9\\u6CD5\\u5141\\u8BB8\\u60A8\\u4F7F\\u7528\\u7279\\u5B9A\\u5C5E\\u6027\\u5728\\u5BF9\\u8C61\\u4E0A\\u5B9A\\u4E49\\u5C5E\\u6027\\u3002\\u53EF\\u7528\\u7684\\u5C5E\\u6027\\u6807\\u5FD7\\u6709\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"writable\"}),\"\\uFF1A\\u6307\\u5B9A\\u662F\\u5426\\u53EF\\u4EE5\\u5199\\u5165\\u5C5E\\u6027\\u3002\\u9ED8\\u8BA4\\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"enumerable\"}),\"\\uFF1A\\u6307\\u5B9A\\u5C5E\\u6027\\u662F\\u5426\\u53EF\\u679A\\u4E3E\\u3002\\u9ED8\\u8BA4\\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"configurable\"}),\"\\uFF1A\\u6307\\u5B9A\\u662F\\u5426\\u53EF\\u4EE5\\u5220\\u9664\\u5C5E\\u6027\\u6216\\u66F4\\u6539\\u5176\\u5C5E\\u6027\\u3002\\u9ED8\\u8BA4\\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5C5E\\u6027\\u63CF\\u8FF0\\u7B26\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5C5E\\u6027\\u63CF\\u8FF0\\u7B26\\u63D0\\u4F9B\\u6709\\u5173\\u5BF9\\u8C61\\u5C5E\\u6027\\u7684\\u8BE6\\u7EC6\\u4FE1\\u606F\\uFF0C\\u5C01\\u88C5\\u5176\\u503C\\u548C\\u6807\\u5FD7\\u3002\\u5B83\\u4EEC\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.getOwnPropertyDescriptor()\"}),\" \\u68C0\\u7D22\\uFF0C\\u5E76\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.defineProperty()\"}),\" \\u8BBE\\u7F6E\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let user = { name: 'John Doe' };\nlet descriptor = Object.getOwnPropertyDescriptor(user, 'name');\n\nconsole.log(descriptor); // {value: \"John Doe\", writable: true, enumerable: true, configurable: true}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u64CD\\u7EB5\\u5C5E\\u6027\\u6807\\u5FD7\"}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"writable\"}),\" \\u6807\\u5FD7\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"writable\"}),\" \\u6807\\u5FD7\\u6307\\u5B9A\\u662F\\u5426\\u53EF\\u4EE5\\u5199\\u5165\\u5C5E\\u6027\\u3002\\u5F53 \",(0,n.jsx)(e.code,{children:\"writable\"}),\" \\u4E3A \",(0,n.jsx)(e.code,{children:\"false\"}),\" \\u65F6\\uFF0C\\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u5C1D\\u8BD5\\u4E3A\\u8BE5\\u5C5E\\u6027\\u8D4B\\u503C\\u4F1A\\u9759\\u9ED8\\u5931\\u8D25\\uFF0C\\u800C\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u4F1A\\u629B\\u51FA \",(0,n.jsx)(e.code,{children:\"TypeError\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {};\n\nObject.defineProperty(obj, 'name', {\n  writable: false,\n  value: 'John Doe',\n});\n\nconsole.log(obj.name); // Output: John Doe\nobj.name = 'Jane Doe'; // This does not change name. Generates TypeError in strict mode\nconsole.log(obj.name); // Output: John Doe (unchanged)\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"enumerable\"}),\" \\u6807\\u5FD7\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"enumerable\"}),\" \\u6807\\u5FD7\\u6307\\u5B9A\\u4E00\\u4E2A\\u5C5E\\u6027\\u662F\\u5426\\u53EF\\u679A\\u4E3E\\u3002\",(0,n.jsx)(e.code,{children:\"enumerable\"}),\" \\u6807\\u5FD7\\u8BBE\\u7F6E\\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u8BE5\\u5C5E\\u6027\\u5728 \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" \\u5FAA\\u73AF\\u4E2D\\u53EF\\u89C1\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {};\n\nObject.defineProperty(obj, 'name', {\n  enumerable: false,\n  value: 'John Doe',\n});\n\nfor (const prop in obj) {\n  console.log(prop); // Output: nothing\n}\n\nconst obj1 = {};\n\nObject.defineProperty(obj1, 'name', {\n  enumerable: true,\n  value: 'John Doe',\n});\n\nfor (const prop in obj1) {\n  console.log(prop); // Output: name\n}\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"configurable\"}),\" \\u6807\\u5FD7\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"configurable\"}),\" \\u6807\\u5FD7\\u6307\\u5B9A\\u4E00\\u4E2A\\u5C5E\\u6027\\u662F\\u5426\\u53EF\\u4EE5\\u88AB\\u5220\\u9664\\u6216\\u5176\\u5C5E\\u6027\\u662F\\u5426\\u53EF\\u4EE5\\u88AB\\u66F4\\u6539\\u3002\\u5F53 \",(0,n.jsx)(e.code,{children:\"configurable\"}),\" \\u4E3A \",(0,n.jsx)(e.code,{children:\"false\"}),\" \\u65F6\\uFF0C\\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u5C1D\\u8BD5\\u5220\\u9664\\u6216\\u66F4\\u6539\\u8BE5\\u5C5E\\u6027\\u4F1A\\u9759\\u9ED8\\u5931\\u8D25\\uFF0C\\u800C\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u4F1A\\u629B\\u51FA \",(0,n.jsx)(e.code,{children:\"TypeError\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {};\n\nObject.defineProperty(obj, 'name', {\n  configurable: false,\n  value: 'John Doe',\n});\n\ndelete obj.name; // Does not delete property. Generates TypeError in strict mode\nconsole.log(obj.name); // Output: John Doe (not deleted)\n`})}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"Object.seal()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"Object.seal()\"}),\" \\u65B9\\u6CD5\\u6709\\u6548\\u5730\\u963B\\u6B62\\u4E86\\u5411\\u5BF9\\u8C61\\u6DFB\\u52A0\\u6216\\u5220\\u9664\\u5C5E\\u6027\\uFF0C\\u4F46\\u4ECD\\u7136\\u5141\\u8BB8\\u4FEE\\u6539\\u73B0\\u6709\\u5C5E\\u6027\\u503C\\u3002\\u5B83\\u8FD8\\u4F7F\\u6240\\u6709\\u5C5E\\u6027\\u53D8\\u4E3A\\u4E0D\\u53EF\\u914D\\u7F6E\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4EEC\\u7684\\u63CF\\u8FF0\\u7B26\\uFF08\\u5982 \",(0,n.jsx)(e.code,{children:\"writable\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"enumerable\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"configurable\"}),\"\\uFF09\\u65E0\\u6CD5\\u66F4\\u6539\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Object/defineProperty\",children:\"Object.defineProperty() | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/property-descriptors\",children:\"Property flags and descriptors | Javascript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal\",children:\"Object.seal() | MDN\"})}),`\n`]})]})}function y(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(a,r)})):a(r)}var D=y;return O(J);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),g=(r,e)=>{for(var c in e)o(r,c,{get:e[c],enumerable:!0})},d=(r,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of b(e))!f.call(r,l)&&l!==c&&o(r,l,{get:()=>e[l],enumerable:!(i=u(e,l))||i.enumerable});return r};var O=(r,e,c)=>(c=r!=null?p(j(r)):{},d(e||!r||!r.__esModule?o(c,\"default\",{value:r,enumerable:!0}):c,r)),v=r=>d(o({},\"__esModule\",{value:!0}),r);var h=m((w,t)=>{t.exports=_jsx_runtime});var D={};g(D,{default:()=>s,frontmatter:()=>y});var n=O(h()),y={title:\"JavaScript \\u5BF9\\u8C61\\u5C5E\\u6027\\u6807\\u5FD7\\u548C\\u63CF\\u8FF0\\u7B26\\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u5C5E\\u6027\\u6807\\u5FD7\\u548C\\u63CF\\u8FF0\\u7B26\\u7BA1\\u7406\\u5BF9\\u8C61\\u5C5E\\u6027\\u7684\\u884C\\u4E3A\\u548C\\u5C5E\\u6027\\u3002\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"\\u5C5E\\u6027\\u6807\\u5FD7\"})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5C5E\\u6027\\u6807\\u5FD7\\u7528\\u4E8E\\u6307\\u5B9A\\u5BF9\\u8C61\\u4E0A\\u5C5E\\u6027\\u7684\\u884C\\u4E3A\\u3002\\u4EE5\\u4E0B\\u662F\\u53EF\\u7528\\u7684\\u6807\\u5FD7\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"writable\"}),\"\\uFF1A\\u6307\\u5B9A\\u662F\\u5426\\u53EF\\u4EE5\\u5199\\u5165\\u5C5E\\u6027\\u3002\\u9ED8\\u8BA4\\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"enumerable\"}),\"\\uFF1A\\u6307\\u5B9A\\u5C5E\\u6027\\u662F\\u5426\\u53EF\\u679A\\u4E3E\\u3002\\u9ED8\\u8BA4\\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"configurable\"}),\"\\uFF1A\\u6307\\u5B9A\\u662F\\u5426\\u53EF\\u4EE5\\u5220\\u9664\\u5C5E\\u6027\\u6216\\u66F4\\u6539\\u5176\\u5C5E\\u6027\\u3002\\u9ED8\\u8BA4\\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"\\u5C5E\\u6027\\u63CF\\u8FF0\\u7B26\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u4E9B\\u63D0\\u4F9B\\u4E86\\u5173\\u4E8E\\u5BF9\\u8C61\\u5C5E\\u6027\\u7684\\u8BE6\\u7EC6\\u4FE1\\u606F\\uFF0C\\u5305\\u62EC\\u5176\\u503C\\u548C\\u6807\\u5FD7\\u3002\\u5B83\\u4EEC\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.getOwnPropertyDescriptor()\"}),\" \\u68C0\\u7D22\\uFF0C\\u5E76\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.defineProperty()\"}),\" \\u8BBE\\u7F6E\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5C5E\\u6027\\u63CF\\u8FF0\\u7B26\\u7684\\u7528\\u4F8B\\u5982\\u4E0B\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u901A\\u8FC7\\u8BBE\\u7F6E \",(0,n.jsx)(e.code,{children:\"writable: false\"}),\" \\u4F7F\\u5C5E\\u6027\\u4E0D\\u53EF\\u5199\\uFF0C\\u4EE5\\u786E\\u4FDD\\u6570\\u636E\\u4E00\\u81F4\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u901A\\u8FC7\\u8BBE\\u7F6E \",(0,n.jsx)(e.code,{children:\"enumerable: false\"}),\" \\u9690\\u85CF\\u5C5E\\u6027\\uFF0C\\u4F7F\\u5176\\u4E0D\\u88AB\\u679A\\u4E3E\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u901A\\u8FC7\\u8BBE\\u7F6E \",(0,n.jsx)(e.code,{children:\"configurable: false\"}),\" \\u963B\\u6B62\\u5C5E\\u6027\\u5220\\u9664\\u548C\\u4FEE\\u6539\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u51BB\\u7ED3\\u6216\\u5BC6\\u5C01\\u5BF9\\u8C61\\u4EE5\\u9632\\u6B62\\u5168\\u5C40\\u4FEE\\u6539\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"JavaScript \\u5BF9\\u8C61\\u5C5E\\u6027\\u6807\\u5FD7\\u548C\\u63CF\\u8FF0\\u7B26\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u5C5E\\u6027\\u6807\\u5FD7\\u548C\\u63CF\\u8FF0\\u7B26\\u7528\\u4E8E\\u7BA1\\u7406\\u5BF9\\u8C61\\u5C5E\\u6027\\u7684\\u884C\\u4E3A\\u548C\\u5C5E\\u6027\\u3002\\u8FD9\\u4E9B\\u6807\\u5FD7\\u548C\\u63CF\\u8FF0\\u7B26\\u5BF9\\u4E8E\\u7406\\u89E3\\u5982\\u4F55\\u8BBF\\u95EE\\u3001\\u4FEE\\u6539\\u548C\\u7EE7\\u627F\\u5C5E\\u6027\\u81F3\\u5173\\u91CD\\u8981\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5C5E\\u6027\\u6807\\u5FD7\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5C5E\\u6027\\u6807\\u5FD7\\u7528\\u4E8E\\u6307\\u5B9A\\u5C5E\\u6027\\u7684\\u884C\\u4E3A\\u3002\\u5B83\\u4EEC\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.defineProperty()\"}),\" \\u65B9\\u6CD5\\u8BBE\\u7F6E\\uFF0C\\u8BE5\\u65B9\\u6CD5\\u5141\\u8BB8\\u60A8\\u4F7F\\u7528\\u7279\\u5B9A\\u5C5E\\u6027\\u5728\\u5BF9\\u8C61\\u4E0A\\u5B9A\\u4E49\\u5C5E\\u6027\\u3002\\u53EF\\u7528\\u7684\\u5C5E\\u6027\\u6807\\u5FD7\\u6709\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"writable\"}),\"\\uFF1A\\u6307\\u5B9A\\u662F\\u5426\\u53EF\\u4EE5\\u5199\\u5165\\u5C5E\\u6027\\u3002\\u9ED8\\u8BA4\\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"enumerable\"}),\"\\uFF1A\\u6307\\u5B9A\\u5C5E\\u6027\\u662F\\u5426\\u53EF\\u679A\\u4E3E\\u3002\\u9ED8\\u8BA4\\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"configurable\"}),\"\\uFF1A\\u6307\\u5B9A\\u662F\\u5426\\u53EF\\u4EE5\\u5220\\u9664\\u5C5E\\u6027\\u6216\\u66F4\\u6539\\u5176\\u5C5E\\u6027\\u3002\\u9ED8\\u8BA4\\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5C5E\\u6027\\u63CF\\u8FF0\\u7B26\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5C5E\\u6027\\u63CF\\u8FF0\\u7B26\\u63D0\\u4F9B\\u6709\\u5173\\u5BF9\\u8C61\\u5C5E\\u6027\\u7684\\u8BE6\\u7EC6\\u4FE1\\u606F\\uFF0C\\u5C01\\u88C5\\u5176\\u503C\\u548C\\u6807\\u5FD7\\u3002\\u5B83\\u4EEC\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.getOwnPropertyDescriptor()\"}),\" \\u68C0\\u7D22\\uFF0C\\u5E76\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.defineProperty()\"}),\" \\u8BBE\\u7F6E\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let user = { name: 'John Doe' };\nlet descriptor = Object.getOwnPropertyDescriptor(user, 'name');\n\nconsole.log(descriptor); // {value: \"John Doe\", writable: true, enumerable: true, configurable: true}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u64CD\\u7EB5\\u5C5E\\u6027\\u6807\\u5FD7\"}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"writable\"}),\" \\u6807\\u5FD7\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"writable\"}),\" \\u6807\\u5FD7\\u6307\\u5B9A\\u662F\\u5426\\u53EF\\u4EE5\\u5199\\u5165\\u5C5E\\u6027\\u3002\\u5F53 \",(0,n.jsx)(e.code,{children:\"writable\"}),\" \\u4E3A \",(0,n.jsx)(e.code,{children:\"false\"}),\" \\u65F6\\uFF0C\\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u5C1D\\u8BD5\\u4E3A\\u8BE5\\u5C5E\\u6027\\u8D4B\\u503C\\u4F1A\\u9759\\u9ED8\\u5931\\u8D25\\uFF0C\\u800C\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u4F1A\\u629B\\u51FA \",(0,n.jsx)(e.code,{children:\"TypeError\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {};\n\nObject.defineProperty(obj, 'name', {\n  writable: false,\n  value: 'John Doe',\n});\n\nconsole.log(obj.name); // Output: John Doe\nobj.name = 'Jane Doe'; // This does not change name. Generates TypeError in strict mode\nconsole.log(obj.name); // Output: John Doe (unchanged)\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"enumerable\"}),\" \\u6807\\u5FD7\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"enumerable\"}),\" \\u6807\\u5FD7\\u6307\\u5B9A\\u4E00\\u4E2A\\u5C5E\\u6027\\u662F\\u5426\\u53EF\\u679A\\u4E3E\\u3002\",(0,n.jsx)(e.code,{children:\"enumerable\"}),\" \\u6807\\u5FD7\\u8BBE\\u7F6E\\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u8BE5\\u5C5E\\u6027\\u5728 \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" \\u5FAA\\u73AF\\u4E2D\\u53EF\\u89C1\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {};\n\nObject.defineProperty(obj, 'name', {\n  enumerable: false,\n  value: 'John Doe',\n});\n\nfor (const prop in obj) {\n  console.log(prop); // Output: nothing\n}\n\nconst obj1 = {};\n\nObject.defineProperty(obj1, 'name', {\n  enumerable: true,\n  value: 'John Doe',\n});\n\nfor (const prop in obj1) {\n  console.log(prop); // Output: name\n}\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"configurable\"}),\" \\u6807\\u5FD7\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"configurable\"}),\" \\u6807\\u5FD7\\u6307\\u5B9A\\u4E00\\u4E2A\\u5C5E\\u6027\\u662F\\u5426\\u53EF\\u4EE5\\u88AB\\u5220\\u9664\\u6216\\u5176\\u5C5E\\u6027\\u662F\\u5426\\u53EF\\u4EE5\\u88AB\\u66F4\\u6539\\u3002\\u5F53 \",(0,n.jsx)(e.code,{children:\"configurable\"}),\" \\u4E3A \",(0,n.jsx)(e.code,{children:\"false\"}),\" \\u65F6\\uFF0C\\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u5C1D\\u8BD5\\u5220\\u9664\\u6216\\u66F4\\u6539\\u8BE5\\u5C5E\\u6027\\u4F1A\\u9759\\u9ED8\\u5931\\u8D25\\uFF0C\\u800C\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u4F1A\\u629B\\u51FA \",(0,n.jsx)(e.code,{children:\"TypeError\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {};\n\nObject.defineProperty(obj, 'name', {\n  configurable: false,\n  value: 'John Doe',\n});\n\ndelete obj.name; // Does not delete property. Generates TypeError in strict mode\nconsole.log(obj.name); // Output: John Doe (not deleted)\n`})}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"Object.seal()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"Object.seal()\"}),\" \\u65B9\\u6CD5\\u6709\\u6548\\u5730\\u963B\\u6B62\\u4E86\\u5411\\u5BF9\\u8C61\\u6DFB\\u52A0\\u6216\\u5220\\u9664\\u5C5E\\u6027\\uFF0C\\u4F46\\u4ECD\\u7136\\u5141\\u8BB8\\u4FEE\\u6539\\u73B0\\u6709\\u5C5E\\u6027\\u503C\\u3002\\u5B83\\u8FD8\\u4F7F\\u6240\\u6709\\u5C5E\\u6027\\u53D8\\u4E3A\\u4E0D\\u53EF\\u914D\\u7F6E\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4EEC\\u7684\\u63CF\\u8FF0\\u7B26\\uFF08\\u5982 \",(0,n.jsx)(e.code,{children:\"writable\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"enumerable\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"configurable\"}),\"\\uFF09\\u65E0\\u6CD5\\u66F4\\u6539\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Object/defineProperty\",children:\"Object.defineProperty() | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/property-descriptors\",children:\"Property flags and descriptors | Javascript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal\",children:\"Object.seal() | MDN\"})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(a,{...r})}):a(r)}return v(D);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-javascript-polyfills-for/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-javascript-polyfills-for/en-US.json
index eb5aae225..15b711397 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-javascript-polyfills-for/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-javascript-polyfills-for/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-javascript-polyfills-for/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var m=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var r in e)t(n,r,{get:e[r],enumerable:!0})},s=(n,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of f(e))!y.call(n,l)&&l!==r&&t(n,l,{get:()=>e[l],enumerable:!(o=p(e,l))||o.enumerable});return n};var b=(n,e,r)=>(r=n!=null?h(u(n)):{},s(e||!n||!n.__esModule?t(r,\"default\",{value:n,enumerable:!0}):r,n)),v=n=>s(t({},\"__esModule\",{value:!0}),n);var c=m((x,a)=>{a.exports=_jsx_runtime});var S={};g(S,{default:()=>P,frontmatter:()=>w});var i=b(c()),w={title:\"What are JavaScript polyfills for?\"};function d(n){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\",strong:\"strong\",code:\"code\",pre:\"pre\",hr:\"hr\",ol:\"ol\",h3:\"h3\",a:\"a\"},n.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,i.jsx)(e.p,{children:\"Polyfills in JavaScript are pieces of code that provide modern functionality to older browsers that lack native support for those features. They bridge the gap between the JavaScript language features and APIs available in modern browsers and the limited capabilities of older browser versions.\"}),`\n`,(0,i.jsx)(e.p,{children:\"They can be implemented manually or included through libraries and are often used in conjunction with feature detection.\"}),`\n`,(0,i.jsx)(e.p,{children:\"Common use cases include:\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"New JavaScript Methods\"}),\": For example, \",(0,i.jsx)(e.code,{children:\"Array.prototype.includes()\"}),\", \",(0,i.jsx)(e.code,{children:\"Object.assign()\"}),\", etc.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"New APIs\"}),\": Such as \",(0,i.jsx)(e.code,{children:\"fetch()\"}),\", \",(0,i.jsx)(e.code,{children:\"Promise\"}),\", \",(0,i.jsx)(e.code,{children:\"IntersectionObserver\"}),\", etc. Modern browsers support these now but for a long time they have to be polyfilled.\"]}),`\n`]}),`\n`,(0,i.jsx)(e.p,{children:\"Libraries and services for polyfills:\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[`\n`,(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.strong,{children:(0,i.jsx)(e.code,{children:\"core-js\"})}),\": A modular standard library for JavaScript which includes polyfills for a wide range of ECMAScript features.\"]}),`\n`,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:\"language-js\",children:`import 'core-js/actual/array/flat-map'; // With this, Array.prototype.flatMap is available to be used.\n\n[1, 2].flatMap((it) => [it, it]); // => [1, 1, 2, 2]\n`})}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:[`\n`,(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.strong,{children:\"Polyfill.io\"}),\": A service that provides polyfills based on the features and user agents specified in the request.\"]}),`\n`,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:\"language-js\",children:`<script src=\"https://polyfill.io/v3/polyfill.min.js\"><\\/script>\n`})}),`\n`]}),`\n`]}),`\n`,(0,i.jsx)(e.hr,{}),`\n`,(0,i.jsx)(e.h2,{children:\"Polyfills in JavaScript\"}),`\n`,(0,i.jsx)(e.p,{children:\"Polyfills in JavaScript are pieces of code (usually JavaScript) that provide modern functionality on older browsers that do not natively support it. They enable developers to use newer features of the language and APIs while maintaining compatibility with older environments.\"}),`\n`,(0,i.jsx)(e.h2,{children:\"How polyfills work\"}),`\n`,(0,i.jsx)(e.p,{children:\"Polyfills detect if a feature or API is missing in a browser and provide a custom implementation of that feature using existing JavaScript capabilities. This allows developers to write code using the latest JavaScript features and APIs without worrying about browser compatibility issues.\"}),`\n`,(0,i.jsxs)(e.p,{children:[\"For example, let's consider the \",(0,i.jsx)(e.code,{children:\"Array.prototype.includes()\"}),\" method, which determines if an array includes a specific element. This method is not supported in older browsers like Internet Explorer 11. To address this, we can use a polyfill:\"]}),`\n`,(0,i.jsx)(e.pre,{live:!0,children:(0,i.jsx)(e.code,{className:\"language-js\",children:`// Polyfill for Array.prototype.includes()\nif (!Array.prototype.includes) {\n  Array.prototype.includes = function (searchElement) {\n    for (var i = 0; i < this.length; i++) {\n      if (this[i] === searchElement) {\n        return true;\n      }\n    }\n\n    return false;\n  };\n}\n\nconsole.log([1, 2, 3].includes(2)); // true\nconsole.log([1, 2, 3].includes(4)); // false\n`})}),`\n`,(0,i.jsxs)(e.p,{children:[\"By including this polyfill, we can safely use \",(0,i.jsx)(e.code,{children:\"Array.prototype.includes()\"}),\" even in browsers that don't support it natively.\"]}),`\n`,(0,i.jsx)(e.h2,{children:\"Implementing polyfills\"}),`\n`,(0,i.jsxs)(e.ol,{children:[`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"Identify the missing feature\"}),\": Determine if the feature is compatible with the target browsers or detect its presence using feature detection methods like \",(0,i.jsx)(e.code,{children:\"typeof\"}),\", \",(0,i.jsx)(e.code,{children:\"in\"}),\", or \",(0,i.jsx)(e.code,{children:\"window\"}),\".\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"Write the fallback implementation\"}),\": Develop the fallback implementation that provides similar functionality, either using a pre-existing polyfill library or pure JavaScript code.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"Test the polyfill\"}),\": Thoroughly test the polyfill to ensure it functions as intended across different contexts and browsers.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"Implement the polyfill\"}),\": Enclose the code that uses the missing feature in an if statement that checks for feature support. If not supported, run the polyfill code instead.\"]}),`\n`]}),`\n`,(0,i.jsx)(e.h3,{children:\"Considerations\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"Selective loading\"}),\": Polyfills should only be loaded for browsers that need them to optimize performance.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"Feature detection\"}),\": Perform feature detection before applying a polyfill to avoid overwriting native implementations or applying unnecessary polyfills.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"Size and performance\"}),\": Polyfills can increase the JavaScript bundle size, so minification and compression techniques should be used to mitigate this impact.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"Existing libraries\"}),\": Consider using existing libraries and tools that offer comprehensive polyfill solutions for multiple features, handling feature detection, conditional loading, and fallbacks efficiently\"]}),`\n`]}),`\n`,(0,i.jsx)(e.h3,{children:\"Libraries and services for polyfills\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[`\n`,(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.strong,{children:(0,i.jsx)(e.code,{children:\"core-js\"})}),\": A modular standard library for JavaScript which includes polyfills for a wide range of ECMAScript features.\"]}),`\n`,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:\"language-js\",children:`import 'core-js/actual/array/flat-map'; // With this, Array.prototype.flatMap is available to be used.\n\n[1, 2].flatMap((it) => [it, it]); // => [1, 1, 2, 2]\n`})}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:[`\n`,(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.strong,{children:\"Polyfill.io\"}),\": A service that provides polyfills based on the features and user agents specified in the request.\"]}),`\n`,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:\"language-js\",children:`<script src=\"https://polyfill.io/v3/polyfill.min.js\"><\\/script>\n`})}),`\n`]}),`\n`]}),`\n`,(0,i.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Polyfill\",children:\"Polyfill - MDN\"})}),`\n`,(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:\"https://javascript.info/polyfills\",children:\"Polyfills and transpilers\"})}),`\n`,(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:\"https://medium.com/alienbrains/polyfills-how-do-they-work-ea6a12b792b\",children:\"Polyfills: How do they work?\"})}),`\n`,(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:\"https://www.linkedin.com/pulse/polyfill-javascript-divyansh-singh\",children:\"Polyfill in Javascript\"})}),`\n`,(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:\"https://dev.to/shubhamdutta2000/polyfills-for-javascript-a-full-overview-3f7m\",children:\"Shubham Dutta\"})}),`\n`]})]})}function j(n={}){let{wrapper:e}=n.components||{};return e?(0,i.jsx)(e,Object.assign({},n,{children:(0,i.jsx)(d,n)})):d(n)}var P=j;return v(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var r in e)t(n,r,{get:e[r],enumerable:!0})},s=(n,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of u(e))!m.call(n,l)&&l!==r&&t(n,l,{get:()=>e[l],enumerable:!(o=f(e,l))||o.enumerable});return n};var b=(n,e,r)=>(r=n!=null?p(y(n)):{},s(e||!n||!n.__esModule?t(r,\"default\",{value:n,enumerable:!0}):r,n)),w=n=>s(t({},\"__esModule\",{value:!0}),n);var c=g((A,a)=>{a.exports=_jsx_runtime});var P={};v(P,{default:()=>h,frontmatter:()=>j});var i=b(c()),j={title:\"What are JavaScript polyfills for?\"};function d(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...n.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,i.jsx)(e.p,{children:\"Polyfills in JavaScript are pieces of code that provide modern functionality to older browsers that lack native support for those features. They bridge the gap between the JavaScript language features and APIs available in modern browsers and the limited capabilities of older browser versions.\"}),`\n`,(0,i.jsx)(e.p,{children:\"They can be implemented manually or included through libraries and are often used in conjunction with feature detection.\"}),`\n`,(0,i.jsx)(e.p,{children:\"Common use cases include:\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"New JavaScript Methods\"}),\": For example, \",(0,i.jsx)(e.code,{children:\"Array.prototype.includes()\"}),\", \",(0,i.jsx)(e.code,{children:\"Object.assign()\"}),\", etc.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"New APIs\"}),\": Such as \",(0,i.jsx)(e.code,{children:\"fetch()\"}),\", \",(0,i.jsx)(e.code,{children:\"Promise\"}),\", \",(0,i.jsx)(e.code,{children:\"IntersectionObserver\"}),\", etc. Modern browsers support these now but for a long time they have to be polyfilled.\"]}),`\n`]}),`\n`,(0,i.jsx)(e.p,{children:\"Libraries and services for polyfills:\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[`\n`,(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.strong,{children:(0,i.jsx)(e.code,{children:\"core-js\"})}),\": A modular standard library for JavaScript which includes polyfills for a wide range of ECMAScript features.\"]}),`\n`,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:\"language-js\",children:`import 'core-js/actual/array/flat-map'; // With this, Array.prototype.flatMap is available to be used.\n\n[1, 2].flatMap((it) => [it, it]); // => [1, 1, 2, 2]\n`})}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:[`\n`,(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.strong,{children:\"Polyfill.io\"}),\": A service that provides polyfills based on the features and user agents specified in the request.\"]}),`\n`,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:\"language-js\",children:`<script src=\"https://polyfill.io/v3/polyfill.min.js\"><\\/script>\n`})}),`\n`]}),`\n`]}),`\n`,(0,i.jsx)(e.hr,{}),`\n`,(0,i.jsx)(e.h2,{children:\"Polyfills in JavaScript\"}),`\n`,(0,i.jsx)(e.p,{children:\"Polyfills in JavaScript are pieces of code (usually JavaScript) that provide modern functionality on older browsers that do not natively support it. They enable developers to use newer features of the language and APIs while maintaining compatibility with older environments.\"}),`\n`,(0,i.jsx)(e.h2,{children:\"How polyfills work\"}),`\n`,(0,i.jsx)(e.p,{children:\"Polyfills detect if a feature or API is missing in a browser and provide a custom implementation of that feature using existing JavaScript capabilities. This allows developers to write code using the latest JavaScript features and APIs without worrying about browser compatibility issues.\"}),`\n`,(0,i.jsxs)(e.p,{children:[\"For example, let's consider the \",(0,i.jsx)(e.code,{children:\"Array.prototype.includes()\"}),\" method, which determines if an array includes a specific element. This method is not supported in older browsers like Internet Explorer 11. To address this, we can use a polyfill:\"]}),`\n`,(0,i.jsx)(e.pre,{live:!0,children:(0,i.jsx)(e.code,{className:\"language-js\",children:`// Polyfill for Array.prototype.includes()\nif (!Array.prototype.includes) {\n  Array.prototype.includes = function (searchElement) {\n    for (var i = 0; i < this.length; i++) {\n      if (this[i] === searchElement) {\n        return true;\n      }\n    }\n\n    return false;\n  };\n}\n\nconsole.log([1, 2, 3].includes(2)); // true\nconsole.log([1, 2, 3].includes(4)); // false\n`})}),`\n`,(0,i.jsxs)(e.p,{children:[\"By including this polyfill, we can safely use \",(0,i.jsx)(e.code,{children:\"Array.prototype.includes()\"}),\" even in browsers that don't support it natively.\"]}),`\n`,(0,i.jsx)(e.h2,{children:\"Implementing polyfills\"}),`\n`,(0,i.jsxs)(e.ol,{children:[`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"Identify the missing feature\"}),\": Determine if the feature is compatible with the target browsers or detect its presence using feature detection methods like \",(0,i.jsx)(e.code,{children:\"typeof\"}),\", \",(0,i.jsx)(e.code,{children:\"in\"}),\", or \",(0,i.jsx)(e.code,{children:\"window\"}),\".\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"Write the fallback implementation\"}),\": Develop the fallback implementation that provides similar functionality, either using a pre-existing polyfill library or pure JavaScript code.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"Test the polyfill\"}),\": Thoroughly test the polyfill to ensure it functions as intended across different contexts and browsers.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"Implement the polyfill\"}),\": Enclose the code that uses the missing feature in an if statement that checks for feature support. If not supported, run the polyfill code instead.\"]}),`\n`]}),`\n`,(0,i.jsx)(e.h3,{children:\"Considerations\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"Selective loading\"}),\": Polyfills should only be loaded for browsers that need them to optimize performance.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"Feature detection\"}),\": Perform feature detection before applying a polyfill to avoid overwriting native implementations or applying unnecessary polyfills.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"Size and performance\"}),\": Polyfills can increase the JavaScript bundle size, so minification and compression techniques should be used to mitigate this impact.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"Existing libraries\"}),\": Consider using existing libraries and tools that offer comprehensive polyfill solutions for multiple features, handling feature detection, conditional loading, and fallbacks efficiently\"]}),`\n`]}),`\n`,(0,i.jsx)(e.h3,{children:\"Libraries and services for polyfills\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[`\n`,(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.strong,{children:(0,i.jsx)(e.code,{children:\"core-js\"})}),\": A modular standard library for JavaScript which includes polyfills for a wide range of ECMAScript features.\"]}),`\n`,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:\"language-js\",children:`import 'core-js/actual/array/flat-map'; // With this, Array.prototype.flatMap is available to be used.\n\n[1, 2].flatMap((it) => [it, it]); // => [1, 1, 2, 2]\n`})}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:[`\n`,(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.strong,{children:\"Polyfill.io\"}),\": A service that provides polyfills based on the features and user agents specified in the request.\"]}),`\n`,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:\"language-js\",children:`<script src=\"https://polyfill.io/v3/polyfill.min.js\"><\\/script>\n`})}),`\n`]}),`\n`]}),`\n`,(0,i.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Polyfill\",children:\"Polyfill - MDN\"})}),`\n`,(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:\"https://javascript.info/polyfills\",children:\"Polyfills and transpilers\"})}),`\n`,(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:\"https://medium.com/alienbrains/polyfills-how-do-they-work-ea6a12b792b\",children:\"Polyfills: How do they work?\"})}),`\n`,(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:\"https://www.linkedin.com/pulse/polyfill-javascript-divyansh-singh\",children:\"Polyfill in Javascript\"})}),`\n`,(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:\"https://dev.to/shubhamdutta2000/polyfills-for-javascript-a-full-overview-3f7m\",children:\"Shubham Dutta\"})}),`\n`]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(d,{...n})}):d(n)}return w(P);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-javascript-polyfills-for/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-javascript-polyfills-for/zh-CN.json
index 6991abf30..96157ce0e 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-javascript-polyfills-for/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-javascript-polyfills-for/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-javascript-polyfills-for/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(i,l)=>()=>(l||i((l={exports:{}}).exports,l),l.exports),m=(i,l)=>{for(var r in l)c(i,r,{get:l[r],enumerable:!0})},t=(i,l,r,o)=>{if(l&&typeof l==\"object\"||typeof l==\"function\")for(let e of f(l))!u.call(i,e)&&e!==r&&c(i,e,{get:()=>l[e],enumerable:!(o=p(l,e))||o.enumerable});return i};var v=(i,l,r)=>(r=i!=null?s(y(i)):{},t(l||!i||!i.__esModule?c(r,\"default\",{value:i,enumerable:!0}):r,i)),j=i=>t(c({},\"__esModule\",{value:!0}),i);var d=g((w,h)=>{h.exports=_jsx_runtime});var J={};m(J,{default:()=>A,frontmatter:()=>P});var n=v(d()),P={title:\"JavaScript \\u7684 Polyfill \\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(i){let l=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\",strong:\"strong\",code:\"code\",pre:\"pre\",hr:\"hr\",ol:\"ol\",h3:\"h3\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(l.p,{children:\"JavaScript \\u4E2D\\u7684 Polyfill \\u662F\\u4E00\\u6BB5\\u4EE3\\u7801\\uFF0C\\u5B83\\u4E3A\\u8F83\\u65E7\\u7684\\u6D4F\\u89C8\\u5668\\u63D0\\u4F9B\\u73B0\\u4EE3\\u529F\\u80FD\\uFF0C\\u800C\\u8FD9\\u4E9B\\u6D4F\\u89C8\\u5668\\u672C\\u8EAB\\u5E76\\u4E0D\\u539F\\u751F\\u652F\\u6301\\u8FD9\\u4E9B\\u529F\\u80FD\\u3002\\u5B83\\u4EEC\\u5F25\\u5408\\u4E86\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u4E2D\\u53EF\\u7528\\u7684 JavaScript \\u8BED\\u8A00\\u7279\\u6027\\u548C API \\u4E0E\\u65E7\\u7248\\u672C\\u6D4F\\u89C8\\u5668\\u6709\\u9650\\u529F\\u80FD\\u4E4B\\u95F4\\u7684\\u5DEE\\u8DDD\\u3002\"}),`\n`,(0,n.jsx)(l.p,{children:\"\\u5B83\\u4EEC\\u53EF\\u4EE5\\u624B\\u52A8\\u5B9E\\u73B0\\u6216\\u901A\\u8FC7\\u5E93\\u5F15\\u5165\\uFF0C\\u5E76\\u4E14\\u901A\\u5E38\\u4E0E\\u529F\\u80FD\\u68C0\\u6D4B\\u7ED3\\u5408\\u4F7F\\u7528\\u3002\"}),`\n`,(0,n.jsx)(l.p,{children:\"\\u5E38\\u89C1\\u7528\\u4F8B\\u5305\\u62EC\\uFF1A\"}),`\n`,(0,n.jsxs)(l.ul,{children:[`\n`,(0,n.jsxs)(l.li,{children:[(0,n.jsx)(l.strong,{children:\"\\u65B0\\u7684 JavaScript \\u65B9\\u6CD5\"}),\"\\uFF1A\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(l.code,{children:\"Array.prototype.includes()\"}),\"\\u3001\",(0,n.jsx)(l.code,{children:\"Object.assign()\"}),\" \\u7B49\\u3002\"]}),`\n`,(0,n.jsxs)(l.li,{children:[(0,n.jsx)(l.strong,{children:\"\\u65B0\\u7684 API\"}),\"\\uFF1A\\u4F8B\\u5982 \",(0,n.jsx)(l.code,{children:\"fetch()\"}),\"\\u3001\",(0,n.jsx)(l.code,{children:\"Promise\"}),\"\\u3001\",(0,n.jsx)(l.code,{children:\"IntersectionObserver\"}),\" \\u7B49\\u3002\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u73B0\\u5728\\u652F\\u6301\\u8FD9\\u4E9B\\uFF0C\\u4F46\\u5F88\\u957F\\u4E00\\u6BB5\\u65F6\\u95F4\\u5185\\u5B83\\u4EEC\\u5FC5\\u987B\\u88AB polyfilled\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(l.p,{children:\"\\u7528\\u4E8E polyfill \\u7684\\u5E93\\u548C\\u670D\\u52A1\\uFF1A\"}),`\n`,(0,n.jsxs)(l.ul,{children:[`\n`,(0,n.jsxs)(l.li,{children:[`\n`,(0,n.jsxs)(l.p,{children:[(0,n.jsx)(l.strong,{children:(0,n.jsx)(l.code,{children:\"core-js\"})}),\"\\uFF1A\\u4E00\\u4E2A\\u7528\\u4E8E JavaScript \\u7684\\u6A21\\u5757\\u5316\\u6807\\u51C6\\u5E93\\uFF0C\\u5176\\u4E2D\\u5305\\u62EC\\u5404\\u79CD ECMAScript \\u7279\\u6027\\u7684 polyfill\\u3002\"]}),`\n`,(0,n.jsx)(l.pre,{children:(0,n.jsx)(l.code,{className:\"language-js\",children:`import 'core-js/actual/array/flat-map'; // With this, Array.prototype.flatMap is available to be used.\n\n[1, 2].flatMap((it) => [it, it]); // => [1, 1, 2, 2]\n`})}),`\n`]}),`\n`,(0,n.jsxs)(l.li,{children:[`\n`,(0,n.jsxs)(l.p,{children:[(0,n.jsx)(l.strong,{children:\"Polyfill.io\"}),\"\\uFF1A\\u4E00\\u9879\\u670D\\u52A1\\uFF0C\\u6839\\u636E\\u8BF7\\u6C42\\u4E2D\\u6307\\u5B9A\\u7684\\u529F\\u80FD\\u548C\\u7528\\u6237\\u4EE3\\u7406\\u63D0\\u4F9B polyfill\\u3002\"]}),`\n`,(0,n.jsx)(l.pre,{children:(0,n.jsx)(l.code,{className:\"language-js\",children:`<script src=\"https://polyfill.io/v3/polyfill.min.js\"><\\/script>\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(l.hr,{}),`\n`,(0,n.jsx)(l.h2,{children:\"JavaScript \\u4E2D\\u7684 Polyfill\"}),`\n`,(0,n.jsx)(l.p,{children:\"JavaScript \\u4E2D\\u7684 Polyfill \\u662F\\u4E00\\u6BB5\\u4EE3\\u7801\\uFF08\\u901A\\u5E38\\u662F JavaScript\\uFF09\\uFF0C\\u5B83\\u5728\\u8F83\\u65E7\\u7684\\u6D4F\\u89C8\\u5668\\u4E0A\\u63D0\\u4F9B\\u73B0\\u4EE3\\u529F\\u80FD\\uFF0C\\u800C\\u8FD9\\u4E9B\\u6D4F\\u89C8\\u5668\\u672C\\u8EAB\\u5E76\\u4E0D\\u539F\\u751F\\u652F\\u6301\\u8FD9\\u4E9B\\u529F\\u80FD\\u3002\\u5B83\\u4EEC\\u4F7F\\u5F00\\u53D1\\u4EBA\\u5458\\u80FD\\u591F\\u4F7F\\u7528\\u8BE5\\u8BED\\u8A00\\u548C API \\u7684\\u8F83\\u65B0\\u529F\\u80FD\\uFF0C\\u540C\\u65F6\\u4FDD\\u6301\\u4E0E\\u65E7\\u73AF\\u5883\\u7684\\u517C\\u5BB9\\u6027\\u3002\"}),`\n`,(0,n.jsx)(l.h2,{children:\"Polyfill \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,n.jsx)(l.p,{children:\"Polyfill \\u68C0\\u6D4B\\u6D4F\\u89C8\\u5668\\u4E2D\\u662F\\u5426\\u7F3A\\u5C11\\u67D0\\u4E2A\\u529F\\u80FD\\u6216 API\\uFF0C\\u5E76\\u4F7F\\u7528\\u73B0\\u6709\\u7684 JavaScript \\u529F\\u80FD\\u63D0\\u4F9B\\u8BE5\\u529F\\u80FD\\u7684\\u81EA\\u5B9A\\u4E49\\u5B9E\\u73B0\\u3002\\u8FD9\\u4F7F\\u5F00\\u53D1\\u4EBA\\u5458\\u80FD\\u591F\\u4F7F\\u7528\\u6700\\u65B0\\u7684 JavaScript \\u529F\\u80FD\\u548C API \\u7F16\\u5199\\u4EE3\\u7801\\uFF0C\\u800C\\u65E0\\u9700\\u62C5\\u5FC3\\u6D4F\\u89C8\\u5668\\u517C\\u5BB9\\u6027\\u95EE\\u9898\\u3002\"}),`\n`,(0,n.jsxs)(l.p,{children:[\"\\u4F8B\\u5982\\uFF0C\\u8BA9\\u6211\\u4EEC\\u8003\\u8651\\u4E00\\u4E0B \",(0,n.jsx)(l.code,{children:\"Array.prototype.includes()\"}),\" \\u65B9\\u6CD5\\uFF0C\\u8BE5\\u65B9\\u6CD5\\u786E\\u5B9A\\u6570\\u7EC4\\u662F\\u5426\\u5305\\u542B\\u7279\\u5B9A\\u5143\\u7D20\\u3002\\u8F83\\u65E7\\u7684\\u6D4F\\u89C8\\u5668\\uFF08\\u5982 Internet Explorer 11\\uFF09\\u4E0D\\u652F\\u6301\\u6B64\\u65B9\\u6CD5\\u3002\\u4E3A\\u4E86\\u89E3\\u51B3\\u8FD9\\u4E2A\\u95EE\\u9898\\uFF0C\\u6211\\u4EEC\\u53EF\\u4EE5\\u4F7F\\u7528 polyfill\\uFF1A\"]}),`\n`,(0,n.jsx)(l.pre,{live:!0,children:(0,n.jsx)(l.code,{className:\"language-js\",children:`// Polyfill for Array.prototype.includes()\nif (!Array.prototype.includes) {\n  Array.prototype.includes = function (searchElement) {\n    for (var i = 0; i < this.length; i++) {\n      if (this[i] === searchElement) {\n        return true;\n      }\n    }\n\n    return false;\n  };\n}\n\nconsole.log([1, 2, 3].includes(2)); // true\nconsole.log([1, 2, 3].includes(4)); // false\n`})}),`\n`,(0,n.jsxs)(l.p,{children:[\"\\u901A\\u8FC7\\u5305\\u542B\\u6B64 polyfill\\uFF0C\\u5373\\u4F7F\\u5728\\u539F\\u751F\\u4E0D\\u652F\\u6301\\u5B83\\u7684\\u6D4F\\u89C8\\u5668\\u4E2D\\uFF0C\\u6211\\u4EEC\\u4E5F\\u53EF\\u4EE5\\u5B89\\u5168\\u5730\\u4F7F\\u7528 \",(0,n.jsx)(l.code,{children:\"Array.prototype.includes()\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(l.h2,{children:\"\\u5B9E\\u73B0 polyfill\"}),`\n`,(0,n.jsxs)(l.ol,{children:[`\n`,(0,n.jsxs)(l.li,{children:[(0,n.jsx)(l.strong,{children:\"\\u786E\\u5B9A\\u7F3A\\u5931\\u7684\\u529F\\u80FD\"}),\"\\uFF1A\\u786E\\u5B9A\\u8BE5\\u529F\\u80FD\\u662F\\u5426\\u4E0E\\u76EE\\u6807\\u6D4F\\u89C8\\u5668\\u517C\\u5BB9\\uFF0C\\u6216\\u4F7F\\u7528 \",(0,n.jsx)(l.code,{children:\"typeof\"}),\"\\u3001\",(0,n.jsx)(l.code,{children:\"in\"}),\" \\u6216 \",(0,n.jsx)(l.code,{children:\"window\"}),\" \\u7B49\\u529F\\u80FD\\u68C0\\u6D4B\\u65B9\\u6CD5\\u68C0\\u6D4B\\u5176\\u662F\\u5426\\u5B58\\u5728\\u3002\"]}),`\n`,(0,n.jsxs)(l.li,{children:[(0,n.jsx)(l.strong,{children:\"\\u7F16\\u5199\\u540E\\u5907\\u5B9E\\u73B0\"}),\"\\uFF1A\\u5F00\\u53D1\\u63D0\\u4F9B\\u7C7B\\u4F3C\\u529F\\u80FD\\u7684\\u540E\\u5907\\u5B9E\\u73B0\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u9884\\u5148\\u5B58\\u5728\\u7684 polyfill \\u5E93\\u6216\\u7EAF JavaScript \\u4EE3\\u7801\\u3002\"]}),`\n`,(0,n.jsxs)(l.li,{children:[(0,n.jsx)(l.strong,{children:\"\\u6D4B\\u8BD5 polyfill\"}),\"\\uFF1A\\u5F7B\\u5E95\\u6D4B\\u8BD5 polyfill\\uFF0C\\u4EE5\\u786E\\u4FDD\\u5B83\\u5728\\u4E0D\\u540C\\u7684\\u4E0A\\u4E0B\\u6587\\u548C\\u6D4F\\u89C8\\u5668\\u4E2D\\u6309\\u9884\\u671F\\u8FD0\\u884C\\u3002\"]}),`\n`,(0,n.jsxs)(l.li,{children:[(0,n.jsx)(l.strong,{children:\"\\u5B9E\\u73B0 polyfill\"}),\"\\uFF1A\\u5C06\\u4F7F\\u7528\\u7F3A\\u5931\\u529F\\u80FD\\u7684\\u4EE3\\u7801\\u5305\\u542B\\u5728 if \\u8BED\\u53E5\\u4E2D\\uFF0C\\u8BE5\\u8BED\\u53E5\\u68C0\\u67E5\\u529F\\u80FD\\u652F\\u6301\\u3002\\u5982\\u679C\\u4E0D\\u652F\\u6301\\uFF0C\\u5219\\u8FD0\\u884C polyfill \\u4EE3\\u7801\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(l.h3,{children:\"\\u8003\\u8651\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(l.ul,{children:[`\n`,(0,n.jsxs)(l.li,{children:[(0,n.jsx)(l.strong,{children:\"\\u9009\\u62E9\\u6027\\u52A0\\u8F7D\"}),\"\\uFF1Apolyfill \\u5E94\\u8BE5\\u4EC5\\u9488\\u5BF9\\u9700\\u8981\\u5B83\\u4EEC\\u7684\\u6D4F\\u89C8\\u5668\\u52A0\\u8F7D\\uFF0C\\u4EE5\\u4F18\\u5316\\u6027\\u80FD\\u3002\"]}),`\n`,(0,n.jsxs)(l.li,{children:[(0,n.jsx)(l.strong,{children:\"\\u529F\\u80FD\\u68C0\\u6D4B\"}),\"\\uFF1A\\u5728\\u5E94\\u7528 polyfill \\u4E4B\\u524D\\u6267\\u884C\\u529F\\u80FD\\u68C0\\u6D4B\\uFF0C\\u4EE5\\u907F\\u514D\\u8986\\u76D6\\u539F\\u751F\\u5B9E\\u73B0\\u6216\\u5E94\\u7528\\u4E0D\\u5FC5\\u8981\\u7684 polyfill\\u3002\"]}),`\n`,(0,n.jsxs)(l.li,{children:[(0,n.jsx)(l.strong,{children:\"\\u5927\\u5C0F\\u548C\\u6027\\u80FD\"}),\"\\uFF1Apolyfill \\u53EF\\u80FD\\u4F1A\\u589E\\u52A0 JavaScript \\u6346\\u7ED1\\u5305\\u7684\\u5927\\u5C0F\\uFF0C\\u56E0\\u6B64\\u5E94\\u4F7F\\u7528\\u7F29\\u5C0F\\u548C\\u538B\\u7F29\\u6280\\u672F\\u6765\\u51CF\\u8F7B\\u8FD9\\u79CD\\u5F71\\u54CD\\u3002\"]}),`\n`,(0,n.jsxs)(l.li,{children:[(0,n.jsx)(l.strong,{children:\"\\u73B0\\u6709\\u5E93\"}),\"\\uFF1A\\u8003\\u8651\\u4F7F\\u7528\\u73B0\\u6709\\u7684\\u5E93\\u548C\\u5DE5\\u5177\\uFF0C\\u8FD9\\u4E9B\\u5E93\\u548C\\u5DE5\\u5177\\u4E3A\\u591A\\u4E2A\\u529F\\u80FD\\u63D0\\u4F9B\\u5168\\u9762\\u7684 polyfill \\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u6709\\u6548\\u5730\\u5904\\u7406\\u529F\\u80FD\\u68C0\\u6D4B\\u3001\\u6761\\u4EF6\\u52A0\\u8F7D\\u548C\\u540E\\u5907\"]}),`\n`]}),`\n`,(0,n.jsx)(l.h3,{children:\"\\u7528\\u4E8E polyfill \\u7684\\u5E93\\u548C\\u670D\\u52A1\"}),`\n`,(0,n.jsxs)(l.ul,{children:[`\n`,(0,n.jsxs)(l.li,{children:[`\n`,(0,n.jsxs)(l.p,{children:[(0,n.jsx)(l.strong,{children:(0,n.jsx)(l.code,{children:\"core-js\"})}),\"\\uFF1A\\u4E00\\u4E2A\\u7528\\u4E8E JavaScript \\u7684\\u6A21\\u5757\\u5316\\u6807\\u51C6\\u5E93\\uFF0C\\u5176\\u4E2D\\u5305\\u62EC\\u5404\\u79CD ECMAScript \\u7279\\u6027\\u7684 polyfill\\u3002\"]}),`\n`,(0,n.jsx)(l.pre,{children:(0,n.jsx)(l.code,{className:\"language-js\",children:`import 'core-js/actual/array/flat-map'; // With this, Array.prototype.flatMap is available to be used.\n\n[1, 2].flatMap((it) => [it, it]); // => [1, 1, 2, 2]\n`})}),`\n`]}),`\n`,(0,n.jsxs)(l.li,{children:[`\n`,(0,n.jsxs)(l.p,{children:[(0,n.jsx)(l.strong,{children:\"Polyfill.io\"}),\"\\uFF1A\\u4E00\\u9879\\u670D\\u52A1\\uFF0C\\u6839\\u636E\\u8BF7\\u6C42\\u4E2D\\u6307\\u5B9A\\u7684\\u529F\\u80FD\\u548C\\u7528\\u6237\\u4EE3\\u7406\\u63D0\\u4F9B polyfill\\u3002\"]}),`\n`,(0,n.jsx)(l.pre,{children:(0,n.jsx)(l.code,{className:\"language-js\",children:`<script src=\"https://polyfill.io/v3/polyfill.min.js\"><\\/script>\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(l.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(l.ul,{children:[`\n`,(0,n.jsx)(l.li,{children:(0,n.jsx)(l.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Polyfill\",children:\"Polyfill - MDN\"})}),`\n`,(0,n.jsx)(l.li,{children:(0,n.jsx)(l.a,{href:\"https://javascript.info/polyfills\",children:\"Polyfills and transpilers\"})}),`\n`,(0,n.jsx)(l.li,{children:(0,n.jsx)(l.a,{href:\"https://medium.com/alienbrains/polyfills-how-do-they-work-ea6a12b792b\",children:\"Polyfills: How do they work?\"})}),`\n`,(0,n.jsx)(l.li,{children:(0,n.jsx)(l.a,{href:\"https://www.linkedin.com/pulse/polyfill-javascript-divyansh-singh\",children:\"Polyfill in Javascript\"})}),`\n`,(0,n.jsx)(l.li,{children:(0,n.jsx)(l.a,{href:\"https://dev.to/shubhamdutta2000/polyfills-for-javascript-a-full-overview-3f7m\",children:\"Shubham Dutta\"})}),`\n`]})]})}function S(i={}){let{wrapper:l}=i.components||{};return l?(0,n.jsx)(l,Object.assign({},i,{children:(0,n.jsx)(a,i)})):a(i)}var A=S;return j(J);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(i,l)=>()=>(l||i((l={exports:{}}).exports,l),l.exports),v=(i,l)=>{for(var r in l)c(i,r,{get:l[r],enumerable:!0})},t=(i,l,r,o)=>{if(l&&typeof l==\"object\"||typeof l==\"function\")for(let e of y(l))!g.call(i,e)&&e!==r&&c(i,e,{get:()=>l[e],enumerable:!(o=f(l,e))||o.enumerable});return i};var j=(i,l,r)=>(r=i!=null?s(u(i)):{},t(l||!i||!i.__esModule?c(r,\"default\",{value:i,enumerable:!0}):r,i)),P=i=>t(c({},\"__esModule\",{value:!0}),i);var d=m((b,h)=>{h.exports=_jsx_runtime});var A={};v(A,{default:()=>p,frontmatter:()=>S});var n=j(d()),S={title:\"JavaScript \\u7684 Polyfill \\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(i){let l={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(l.p,{children:\"JavaScript \\u4E2D\\u7684 Polyfill \\u662F\\u4E00\\u6BB5\\u4EE3\\u7801\\uFF0C\\u5B83\\u4E3A\\u8F83\\u65E7\\u7684\\u6D4F\\u89C8\\u5668\\u63D0\\u4F9B\\u73B0\\u4EE3\\u529F\\u80FD\\uFF0C\\u800C\\u8FD9\\u4E9B\\u6D4F\\u89C8\\u5668\\u672C\\u8EAB\\u5E76\\u4E0D\\u539F\\u751F\\u652F\\u6301\\u8FD9\\u4E9B\\u529F\\u80FD\\u3002\\u5B83\\u4EEC\\u5F25\\u5408\\u4E86\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u4E2D\\u53EF\\u7528\\u7684 JavaScript \\u8BED\\u8A00\\u7279\\u6027\\u548C API \\u4E0E\\u65E7\\u7248\\u672C\\u6D4F\\u89C8\\u5668\\u6709\\u9650\\u529F\\u80FD\\u4E4B\\u95F4\\u7684\\u5DEE\\u8DDD\\u3002\"}),`\n`,(0,n.jsx)(l.p,{children:\"\\u5B83\\u4EEC\\u53EF\\u4EE5\\u624B\\u52A8\\u5B9E\\u73B0\\u6216\\u901A\\u8FC7\\u5E93\\u5F15\\u5165\\uFF0C\\u5E76\\u4E14\\u901A\\u5E38\\u4E0E\\u529F\\u80FD\\u68C0\\u6D4B\\u7ED3\\u5408\\u4F7F\\u7528\\u3002\"}),`\n`,(0,n.jsx)(l.p,{children:\"\\u5E38\\u89C1\\u7528\\u4F8B\\u5305\\u62EC\\uFF1A\"}),`\n`,(0,n.jsxs)(l.ul,{children:[`\n`,(0,n.jsxs)(l.li,{children:[(0,n.jsx)(l.strong,{children:\"\\u65B0\\u7684 JavaScript \\u65B9\\u6CD5\"}),\"\\uFF1A\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(l.code,{children:\"Array.prototype.includes()\"}),\"\\u3001\",(0,n.jsx)(l.code,{children:\"Object.assign()\"}),\" \\u7B49\\u3002\"]}),`\n`,(0,n.jsxs)(l.li,{children:[(0,n.jsx)(l.strong,{children:\"\\u65B0\\u7684 API\"}),\"\\uFF1A\\u4F8B\\u5982 \",(0,n.jsx)(l.code,{children:\"fetch()\"}),\"\\u3001\",(0,n.jsx)(l.code,{children:\"Promise\"}),\"\\u3001\",(0,n.jsx)(l.code,{children:\"IntersectionObserver\"}),\" \\u7B49\\u3002\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u73B0\\u5728\\u652F\\u6301\\u8FD9\\u4E9B\\uFF0C\\u4F46\\u5F88\\u957F\\u4E00\\u6BB5\\u65F6\\u95F4\\u5185\\u5B83\\u4EEC\\u5FC5\\u987B\\u88AB polyfilled\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(l.p,{children:\"\\u7528\\u4E8E polyfill \\u7684\\u5E93\\u548C\\u670D\\u52A1\\uFF1A\"}),`\n`,(0,n.jsxs)(l.ul,{children:[`\n`,(0,n.jsxs)(l.li,{children:[`\n`,(0,n.jsxs)(l.p,{children:[(0,n.jsx)(l.strong,{children:(0,n.jsx)(l.code,{children:\"core-js\"})}),\"\\uFF1A\\u4E00\\u4E2A\\u7528\\u4E8E JavaScript \\u7684\\u6A21\\u5757\\u5316\\u6807\\u51C6\\u5E93\\uFF0C\\u5176\\u4E2D\\u5305\\u62EC\\u5404\\u79CD ECMAScript \\u7279\\u6027\\u7684 polyfill\\u3002\"]}),`\n`,(0,n.jsx)(l.pre,{children:(0,n.jsx)(l.code,{className:\"language-js\",children:`import 'core-js/actual/array/flat-map'; // With this, Array.prototype.flatMap is available to be used.\n\n[1, 2].flatMap((it) => [it, it]); // => [1, 1, 2, 2]\n`})}),`\n`]}),`\n`,(0,n.jsxs)(l.li,{children:[`\n`,(0,n.jsxs)(l.p,{children:[(0,n.jsx)(l.strong,{children:\"Polyfill.io\"}),\"\\uFF1A\\u4E00\\u9879\\u670D\\u52A1\\uFF0C\\u6839\\u636E\\u8BF7\\u6C42\\u4E2D\\u6307\\u5B9A\\u7684\\u529F\\u80FD\\u548C\\u7528\\u6237\\u4EE3\\u7406\\u63D0\\u4F9B polyfill\\u3002\"]}),`\n`,(0,n.jsx)(l.pre,{children:(0,n.jsx)(l.code,{className:\"language-js\",children:`<script src=\"https://polyfill.io/v3/polyfill.min.js\"><\\/script>\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(l.hr,{}),`\n`,(0,n.jsx)(l.h2,{children:\"JavaScript \\u4E2D\\u7684 Polyfill\"}),`\n`,(0,n.jsx)(l.p,{children:\"JavaScript \\u4E2D\\u7684 Polyfill \\u662F\\u4E00\\u6BB5\\u4EE3\\u7801\\uFF08\\u901A\\u5E38\\u662F JavaScript\\uFF09\\uFF0C\\u5B83\\u5728\\u8F83\\u65E7\\u7684\\u6D4F\\u89C8\\u5668\\u4E0A\\u63D0\\u4F9B\\u73B0\\u4EE3\\u529F\\u80FD\\uFF0C\\u800C\\u8FD9\\u4E9B\\u6D4F\\u89C8\\u5668\\u672C\\u8EAB\\u5E76\\u4E0D\\u539F\\u751F\\u652F\\u6301\\u8FD9\\u4E9B\\u529F\\u80FD\\u3002\\u5B83\\u4EEC\\u4F7F\\u5F00\\u53D1\\u4EBA\\u5458\\u80FD\\u591F\\u4F7F\\u7528\\u8BE5\\u8BED\\u8A00\\u548C API \\u7684\\u8F83\\u65B0\\u529F\\u80FD\\uFF0C\\u540C\\u65F6\\u4FDD\\u6301\\u4E0E\\u65E7\\u73AF\\u5883\\u7684\\u517C\\u5BB9\\u6027\\u3002\"}),`\n`,(0,n.jsx)(l.h2,{children:\"Polyfill \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,n.jsx)(l.p,{children:\"Polyfill \\u68C0\\u6D4B\\u6D4F\\u89C8\\u5668\\u4E2D\\u662F\\u5426\\u7F3A\\u5C11\\u67D0\\u4E2A\\u529F\\u80FD\\u6216 API\\uFF0C\\u5E76\\u4F7F\\u7528\\u73B0\\u6709\\u7684 JavaScript \\u529F\\u80FD\\u63D0\\u4F9B\\u8BE5\\u529F\\u80FD\\u7684\\u81EA\\u5B9A\\u4E49\\u5B9E\\u73B0\\u3002\\u8FD9\\u4F7F\\u5F00\\u53D1\\u4EBA\\u5458\\u80FD\\u591F\\u4F7F\\u7528\\u6700\\u65B0\\u7684 JavaScript \\u529F\\u80FD\\u548C API \\u7F16\\u5199\\u4EE3\\u7801\\uFF0C\\u800C\\u65E0\\u9700\\u62C5\\u5FC3\\u6D4F\\u89C8\\u5668\\u517C\\u5BB9\\u6027\\u95EE\\u9898\\u3002\"}),`\n`,(0,n.jsxs)(l.p,{children:[\"\\u4F8B\\u5982\\uFF0C\\u8BA9\\u6211\\u4EEC\\u8003\\u8651\\u4E00\\u4E0B \",(0,n.jsx)(l.code,{children:\"Array.prototype.includes()\"}),\" \\u65B9\\u6CD5\\uFF0C\\u8BE5\\u65B9\\u6CD5\\u786E\\u5B9A\\u6570\\u7EC4\\u662F\\u5426\\u5305\\u542B\\u7279\\u5B9A\\u5143\\u7D20\\u3002\\u8F83\\u65E7\\u7684\\u6D4F\\u89C8\\u5668\\uFF08\\u5982 Internet Explorer 11\\uFF09\\u4E0D\\u652F\\u6301\\u6B64\\u65B9\\u6CD5\\u3002\\u4E3A\\u4E86\\u89E3\\u51B3\\u8FD9\\u4E2A\\u95EE\\u9898\\uFF0C\\u6211\\u4EEC\\u53EF\\u4EE5\\u4F7F\\u7528 polyfill\\uFF1A\"]}),`\n`,(0,n.jsx)(l.pre,{live:!0,children:(0,n.jsx)(l.code,{className:\"language-js\",children:`// Polyfill for Array.prototype.includes()\nif (!Array.prototype.includes) {\n  Array.prototype.includes = function (searchElement) {\n    for (var i = 0; i < this.length; i++) {\n      if (this[i] === searchElement) {\n        return true;\n      }\n    }\n\n    return false;\n  };\n}\n\nconsole.log([1, 2, 3].includes(2)); // true\nconsole.log([1, 2, 3].includes(4)); // false\n`})}),`\n`,(0,n.jsxs)(l.p,{children:[\"\\u901A\\u8FC7\\u5305\\u542B\\u6B64 polyfill\\uFF0C\\u5373\\u4F7F\\u5728\\u539F\\u751F\\u4E0D\\u652F\\u6301\\u5B83\\u7684\\u6D4F\\u89C8\\u5668\\u4E2D\\uFF0C\\u6211\\u4EEC\\u4E5F\\u53EF\\u4EE5\\u5B89\\u5168\\u5730\\u4F7F\\u7528 \",(0,n.jsx)(l.code,{children:\"Array.prototype.includes()\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(l.h2,{children:\"\\u5B9E\\u73B0 polyfill\"}),`\n`,(0,n.jsxs)(l.ol,{children:[`\n`,(0,n.jsxs)(l.li,{children:[(0,n.jsx)(l.strong,{children:\"\\u786E\\u5B9A\\u7F3A\\u5931\\u7684\\u529F\\u80FD\"}),\"\\uFF1A\\u786E\\u5B9A\\u8BE5\\u529F\\u80FD\\u662F\\u5426\\u4E0E\\u76EE\\u6807\\u6D4F\\u89C8\\u5668\\u517C\\u5BB9\\uFF0C\\u6216\\u4F7F\\u7528 \",(0,n.jsx)(l.code,{children:\"typeof\"}),\"\\u3001\",(0,n.jsx)(l.code,{children:\"in\"}),\" \\u6216 \",(0,n.jsx)(l.code,{children:\"window\"}),\" \\u7B49\\u529F\\u80FD\\u68C0\\u6D4B\\u65B9\\u6CD5\\u68C0\\u6D4B\\u5176\\u662F\\u5426\\u5B58\\u5728\\u3002\"]}),`\n`,(0,n.jsxs)(l.li,{children:[(0,n.jsx)(l.strong,{children:\"\\u7F16\\u5199\\u540E\\u5907\\u5B9E\\u73B0\"}),\"\\uFF1A\\u5F00\\u53D1\\u63D0\\u4F9B\\u7C7B\\u4F3C\\u529F\\u80FD\\u7684\\u540E\\u5907\\u5B9E\\u73B0\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u9884\\u5148\\u5B58\\u5728\\u7684 polyfill \\u5E93\\u6216\\u7EAF JavaScript \\u4EE3\\u7801\\u3002\"]}),`\n`,(0,n.jsxs)(l.li,{children:[(0,n.jsx)(l.strong,{children:\"\\u6D4B\\u8BD5 polyfill\"}),\"\\uFF1A\\u5F7B\\u5E95\\u6D4B\\u8BD5 polyfill\\uFF0C\\u4EE5\\u786E\\u4FDD\\u5B83\\u5728\\u4E0D\\u540C\\u7684\\u4E0A\\u4E0B\\u6587\\u548C\\u6D4F\\u89C8\\u5668\\u4E2D\\u6309\\u9884\\u671F\\u8FD0\\u884C\\u3002\"]}),`\n`,(0,n.jsxs)(l.li,{children:[(0,n.jsx)(l.strong,{children:\"\\u5B9E\\u73B0 polyfill\"}),\"\\uFF1A\\u5C06\\u4F7F\\u7528\\u7F3A\\u5931\\u529F\\u80FD\\u7684\\u4EE3\\u7801\\u5305\\u542B\\u5728 if \\u8BED\\u53E5\\u4E2D\\uFF0C\\u8BE5\\u8BED\\u53E5\\u68C0\\u67E5\\u529F\\u80FD\\u652F\\u6301\\u3002\\u5982\\u679C\\u4E0D\\u652F\\u6301\\uFF0C\\u5219\\u8FD0\\u884C polyfill \\u4EE3\\u7801\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(l.h3,{children:\"\\u8003\\u8651\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(l.ul,{children:[`\n`,(0,n.jsxs)(l.li,{children:[(0,n.jsx)(l.strong,{children:\"\\u9009\\u62E9\\u6027\\u52A0\\u8F7D\"}),\"\\uFF1Apolyfill \\u5E94\\u8BE5\\u4EC5\\u9488\\u5BF9\\u9700\\u8981\\u5B83\\u4EEC\\u7684\\u6D4F\\u89C8\\u5668\\u52A0\\u8F7D\\uFF0C\\u4EE5\\u4F18\\u5316\\u6027\\u80FD\\u3002\"]}),`\n`,(0,n.jsxs)(l.li,{children:[(0,n.jsx)(l.strong,{children:\"\\u529F\\u80FD\\u68C0\\u6D4B\"}),\"\\uFF1A\\u5728\\u5E94\\u7528 polyfill \\u4E4B\\u524D\\u6267\\u884C\\u529F\\u80FD\\u68C0\\u6D4B\\uFF0C\\u4EE5\\u907F\\u514D\\u8986\\u76D6\\u539F\\u751F\\u5B9E\\u73B0\\u6216\\u5E94\\u7528\\u4E0D\\u5FC5\\u8981\\u7684 polyfill\\u3002\"]}),`\n`,(0,n.jsxs)(l.li,{children:[(0,n.jsx)(l.strong,{children:\"\\u5927\\u5C0F\\u548C\\u6027\\u80FD\"}),\"\\uFF1Apolyfill \\u53EF\\u80FD\\u4F1A\\u589E\\u52A0 JavaScript \\u6346\\u7ED1\\u5305\\u7684\\u5927\\u5C0F\\uFF0C\\u56E0\\u6B64\\u5E94\\u4F7F\\u7528\\u7F29\\u5C0F\\u548C\\u538B\\u7F29\\u6280\\u672F\\u6765\\u51CF\\u8F7B\\u8FD9\\u79CD\\u5F71\\u54CD\\u3002\"]}),`\n`,(0,n.jsxs)(l.li,{children:[(0,n.jsx)(l.strong,{children:\"\\u73B0\\u6709\\u5E93\"}),\"\\uFF1A\\u8003\\u8651\\u4F7F\\u7528\\u73B0\\u6709\\u7684\\u5E93\\u548C\\u5DE5\\u5177\\uFF0C\\u8FD9\\u4E9B\\u5E93\\u548C\\u5DE5\\u5177\\u4E3A\\u591A\\u4E2A\\u529F\\u80FD\\u63D0\\u4F9B\\u5168\\u9762\\u7684 polyfill \\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u6709\\u6548\\u5730\\u5904\\u7406\\u529F\\u80FD\\u68C0\\u6D4B\\u3001\\u6761\\u4EF6\\u52A0\\u8F7D\\u548C\\u540E\\u5907\"]}),`\n`]}),`\n`,(0,n.jsx)(l.h3,{children:\"\\u7528\\u4E8E polyfill \\u7684\\u5E93\\u548C\\u670D\\u52A1\"}),`\n`,(0,n.jsxs)(l.ul,{children:[`\n`,(0,n.jsxs)(l.li,{children:[`\n`,(0,n.jsxs)(l.p,{children:[(0,n.jsx)(l.strong,{children:(0,n.jsx)(l.code,{children:\"core-js\"})}),\"\\uFF1A\\u4E00\\u4E2A\\u7528\\u4E8E JavaScript \\u7684\\u6A21\\u5757\\u5316\\u6807\\u51C6\\u5E93\\uFF0C\\u5176\\u4E2D\\u5305\\u62EC\\u5404\\u79CD ECMAScript \\u7279\\u6027\\u7684 polyfill\\u3002\"]}),`\n`,(0,n.jsx)(l.pre,{children:(0,n.jsx)(l.code,{className:\"language-js\",children:`import 'core-js/actual/array/flat-map'; // With this, Array.prototype.flatMap is available to be used.\n\n[1, 2].flatMap((it) => [it, it]); // => [1, 1, 2, 2]\n`})}),`\n`]}),`\n`,(0,n.jsxs)(l.li,{children:[`\n`,(0,n.jsxs)(l.p,{children:[(0,n.jsx)(l.strong,{children:\"Polyfill.io\"}),\"\\uFF1A\\u4E00\\u9879\\u670D\\u52A1\\uFF0C\\u6839\\u636E\\u8BF7\\u6C42\\u4E2D\\u6307\\u5B9A\\u7684\\u529F\\u80FD\\u548C\\u7528\\u6237\\u4EE3\\u7406\\u63D0\\u4F9B polyfill\\u3002\"]}),`\n`,(0,n.jsx)(l.pre,{children:(0,n.jsx)(l.code,{className:\"language-js\",children:`<script src=\"https://polyfill.io/v3/polyfill.min.js\"><\\/script>\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(l.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(l.ul,{children:[`\n`,(0,n.jsx)(l.li,{children:(0,n.jsx)(l.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Polyfill\",children:\"Polyfill - MDN\"})}),`\n`,(0,n.jsx)(l.li,{children:(0,n.jsx)(l.a,{href:\"https://javascript.info/polyfills\",children:\"Polyfills and transpilers\"})}),`\n`,(0,n.jsx)(l.li,{children:(0,n.jsx)(l.a,{href:\"https://medium.com/alienbrains/polyfills-how-do-they-work-ea6a12b792b\",children:\"Polyfills: How do they work?\"})}),`\n`,(0,n.jsx)(l.li,{children:(0,n.jsx)(l.a,{href:\"https://www.linkedin.com/pulse/polyfill-javascript-divyansh-singh\",children:\"Polyfill in Javascript\"})}),`\n`,(0,n.jsx)(l.li,{children:(0,n.jsx)(l.a,{href:\"https://dev.to/shubhamdutta2000/polyfills-for-javascript-a-full-overview-3f7m\",children:\"Shubham Dutta\"})}),`\n`]})]})}function p(i={}){let{wrapper:l}=i.components||{};return l?(0,n.jsx)(l,{...i,children:(0,n.jsx)(a,{...i})}):a(i)}return P(A);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-mocks-and-stubs-and-how-are-they-used-in-testing/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-mocks-and-stubs-and-how-are-they-used-in-testing/en-US.json
index fb4afae59..31f3f46bd 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-mocks-and-stubs-and-how-are-they-used-in-testing/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-mocks-and-stubs-and-how-are-they-used-in-testing/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-mocks-and-stubs-and-how-are-they-used-in-testing/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var s in e)r(t,s,{get:e[s],enumerable:!0})},i=(t,e,s,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!g.call(t,o)&&o!==s&&r(t,o,{get:()=>e[o],enumerable:!(a=u(e,o))||a.enumerable});return t};var w=(t,e,s)=>(s=t!=null?l(p(t)):{},i(e||!t||!t.__esModule?r(s,\"default\",{value:t,enumerable:!0}):s,t)),k=t=>i(r({},\"__esModule\",{value:!0}),t);var h=f((S,c)=>{c.exports=_jsx_runtime});var j={};b(j,{default:()=>D,frontmatter:()=>y});var n=w(h()),y={title:\"What are mocks and stubs and how are they used in testing?\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Mocks and stubs are tools used in testing to simulate the behavior of real objects. Stubs provide predefined responses to function calls, while mocks are more complex and can verify interactions, such as whether a function was called and with what arguments. Stubs are used to isolate the code being tested from external dependencies, and mocks are used to ensure that the code interacts correctly with those dependencies.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are mocks and stubs and how are they used in testing?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Stubs\"}),`\n`,(0,n.jsx)(e.p,{children:\"Stubs are simple objects that provide predefined responses to function calls made during tests. They are used to isolate the code being tested from external dependencies, such as databases or APIs, by providing controlled responses.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// A simple stub for a function that fetches user data\nconst fetchUserDataStub = sinon.stub();\nfetchUserDataStub.returns({ id: 1, name: 'John Doe' });\n\n// Using the stub in a test\nconst userData = fetchUserDataStub();\nconsole.log(userData); // { id: 1, name: 'John Doe' }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Mocks\"}),`\n`,(0,n.jsx)(e.p,{children:\"Mocks are more complex than stubs. They not only provide predefined responses but also record information about how they were called. This allows you to verify interactions, such as whether a function was called, how many times it was called, and with what arguments.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// A simple mock for a function that logs user data\nconst logUserDataMock = sinon.mock();\nlogUserDataMock.expects('log').once().withArgs({ id: 1, name: 'John Doe' });\n\n// Using the mock in a test\nlogUserDataMock.log({ id: 1, name: 'John Doe' });\nlogUserDataMock.verify(); // Verifies that the log method was called once with the specified arguments\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"When to use stubs and mocks\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Stubs\"}),\": Use stubs when you need to isolate the code being tested from external dependencies and control the responses those dependencies provide.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Mocks\"}),\": Use mocks when you need to verify that the code interacts correctly with external dependencies, such as ensuring that a function is called with the correct arguments.\"]}),`\n`]}),`\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://sinonjs.org/releases/latest/\",children:\"Sinon.js documentation\"})}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://martinfowler.com/articles/mocksArentStubs.html\",children:\"Mocks Aren't Stubs\"}),\" by Martin Fowler\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://www.sitepoint.com/testing-javascript-mocks-stubs/\",children:\"Testing JavaScript with Mocks and Stubs\"}),\" on SitePoint\"]}),`\n`]})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var D=x;return k(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var s in e)r(t,s,{get:e[s],enumerable:!0})},i=(t,e,s,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!f.call(t,o)&&o!==s&&r(t,o,{get:()=>e[o],enumerable:!(a=m(e,o))||a.enumerable});return t};var k=(t,e,s)=>(s=t!=null?u(g(t)):{},i(e||!t||!t.__esModule?r(s,\"default\",{value:t,enumerable:!0}):s,t)),y=t=>i(r({},\"__esModule\",{value:!0}),t);var h=b((S,c)=>{c.exports=_jsx_runtime});var D={};w(D,{default:()=>l,frontmatter:()=>x});var n=k(h()),x={title:\"What are mocks and stubs and how are they used in testing?\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Mocks and stubs are tools used in testing to simulate the behavior of real objects. Stubs provide predefined responses to function calls, while mocks are more complex and can verify interactions, such as whether a function was called and with what arguments. Stubs are used to isolate the code being tested from external dependencies, and mocks are used to ensure that the code interacts correctly with those dependencies.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are mocks and stubs and how are they used in testing?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Stubs\"}),`\n`,(0,n.jsx)(e.p,{children:\"Stubs are simple objects that provide predefined responses to function calls made during tests. They are used to isolate the code being tested from external dependencies, such as databases or APIs, by providing controlled responses.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// A simple stub for a function that fetches user data\nconst fetchUserDataStub = sinon.stub();\nfetchUserDataStub.returns({ id: 1, name: 'John Doe' });\n\n// Using the stub in a test\nconst userData = fetchUserDataStub();\nconsole.log(userData); // { id: 1, name: 'John Doe' }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Mocks\"}),`\n`,(0,n.jsx)(e.p,{children:\"Mocks are more complex than stubs. They not only provide predefined responses but also record information about how they were called. This allows you to verify interactions, such as whether a function was called, how many times it was called, and with what arguments.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// A simple mock for a function that logs user data\nconst logUserDataMock = sinon.mock();\nlogUserDataMock.expects('log').once().withArgs({ id: 1, name: 'John Doe' });\n\n// Using the mock in a test\nlogUserDataMock.log({ id: 1, name: 'John Doe' });\nlogUserDataMock.verify(); // Verifies that the log method was called once with the specified arguments\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"When to use stubs and mocks\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Stubs\"}),\": Use stubs when you need to isolate the code being tested from external dependencies and control the responses those dependencies provide.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Mocks\"}),\": Use mocks when you need to verify that the code interacts correctly with external dependencies, such as ensuring that a function is called with the correct arguments.\"]}),`\n`]}),`\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://sinonjs.org/releases/latest/\",children:\"Sinon.js documentation\"})}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://martinfowler.com/articles/mocksArentStubs.html\",children:\"Mocks Aren't Stubs\"}),\" by Martin Fowler\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://www.sitepoint.com/testing-javascript-mocks-stubs/\",children:\"Testing JavaScript with Mocks and Stubs\"}),\" on SitePoint\"]}),`\n`]})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return y(D);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-mocks-and-stubs-and-how-are-they-used-in-testing/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-mocks-and-stubs-and-how-are-they-used-in-testing/zh-CN.json
index c3ee1c4d5..77d1da2ec 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-mocks-and-stubs-and-how-are-they-used-in-testing/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-mocks-and-stubs-and-how-are-they-used-in-testing/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-mocks-and-stubs-and-how-are-they-used-in-testing/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var D=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),f=(t,n)=>{for(var r in n)o(t,r,{get:n[r],enumerable:!0})},i=(t,n,r,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of u(n))!p.call(t,c)&&c!==r&&o(t,c,{get:()=>n[c],enumerable:!(s=g(n,c))||s.enumerable});return t};var j=(t,n,r)=>(r=t!=null?d(m(t)):{},i(n||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),x=t=>i(o({},\"__esModule\",{value:!0}),t);var l=D((U,h)=>{h.exports=_jsx_runtime});var S={};f(S,{default:()=>k,frontmatter:()=>b});var e=j(l()),b={title:\"\\u4EC0\\u4E48\\u662F\\u6A21\\u62DF\\u548C\\u5B58\\u6839\\uFF0C\\u4EE5\\u53CA\\u5B83\\u4EEC\\u5728\\u6D4B\\u8BD5\\u4E2D\\u5982\\u4F55\\u4F7F\\u7528\\uFF1F\"};function a(t){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u62DF\\u548C\\u5B58\\u6839\\u662F\\u7528\\u4E8E\\u6D4B\\u8BD5\\u7684\\u5DE5\\u5177\\uFF0C\\u7528\\u4E8E\\u6A21\\u62DF\\u771F\\u5B9E\\u5BF9\\u8C61\\u7684\\u884C\\u4E3A\\u3002\\u5B58\\u6839\\u4E3A\\u51FD\\u6570\\u8C03\\u7528\\u63D0\\u4F9B\\u9884\\u5B9A\\u4E49\\u7684\\u54CD\\u5E94\\uFF0C\\u800C\\u6A21\\u62DF\\u66F4\\u590D\\u6742\\uFF0C\\u53EF\\u4EE5\\u9A8C\\u8BC1\\u4EA4\\u4E92\\uFF0C\\u4F8B\\u5982\\u662F\\u5426\\u8C03\\u7528\\u4E86\\u51FD\\u6570\\u4EE5\\u53CA\\u4F7F\\u7528\\u4EC0\\u4E48\\u53C2\\u6570\\u3002\\u5B58\\u6839\\u7528\\u4E8E\\u5C06\\u6B63\\u5728\\u6D4B\\u8BD5\\u7684\\u4EE3\\u7801\\u4E0E\\u5916\\u90E8\\u4F9D\\u8D56\\u9879\\u9694\\u79BB\\uFF0C\\u800C\\u6A21\\u62DF\\u7528\\u4E8E\\u786E\\u4FDD\\u4EE3\\u7801\\u4E0E\\u8FD9\\u4E9B\\u4F9D\\u8D56\\u9879\\u6B63\\u786E\\u4EA4\\u4E92\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u6A21\\u62DF\\u548C\\u5B58\\u6839\\uFF0C\\u4EE5\\u53CA\\u5B83\\u4EEC\\u5728\\u6D4B\\u8BD5\\u4E2D\\u5982\\u4F55\\u4F7F\\u7528\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B58\\u6839\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5B58\\u6839\\u662F\\u7B80\\u5355\\u7684\\u5BF9\\u8C61\\uFF0C\\u5B83\\u4EEC\\u4E3A\\u6D4B\\u8BD5\\u671F\\u95F4\\u8FDB\\u884C\\u7684\\u51FD\\u6570\\u8C03\\u7528\\u63D0\\u4F9B\\u9884\\u5B9A\\u4E49\\u7684\\u54CD\\u5E94\\u3002\\u5B83\\u4EEC\\u7528\\u4E8E\\u901A\\u8FC7\\u63D0\\u4F9B\\u53D7\\u63A7\\u54CD\\u5E94\\u6765\\u5C06\\u6B63\\u5728\\u6D4B\\u8BD5\\u7684\\u4EE3\\u7801\\u4E0E\\u5916\\u90E8\\u4F9D\\u8D56\\u9879\\uFF08\\u4F8B\\u5982\\u6570\\u636E\\u5E93\\u6216 API\\uFF09\\u9694\\u79BB\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u4E00\\u4E2A\\u7528\\u4E8E\\u83B7\\u53D6\\u7528\\u6237\\u6570\\u636E\\u7684\\u51FD\\u6570\\u7684\\u7B80\\u5355\\u5B58\\u6839\nconst fetchUserDataStub = sinon.stub();\nfetchUserDataStub.returns({ id: 1, name: 'John Doe' });\n\n// \\u5728\\u6D4B\\u8BD5\\u4E2D\\u4F7F\\u7528\\u5B58\\u6839\nconst userData = fetchUserDataStub();\nconsole.log(userData); // { id: 1, name: 'John Doe' }\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6A21\\u62DF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u62DF\\u6BD4\\u5B58\\u6839\\u66F4\\u590D\\u6742\\u3002\\u5B83\\u4EEC\\u4E0D\\u4EC5\\u63D0\\u4F9B\\u9884\\u5B9A\\u4E49\\u7684\\u54CD\\u5E94\\uFF0C\\u8FD8\\u8BB0\\u5F55\\u6709\\u5173\\u5982\\u4F55\\u8C03\\u7528\\u5B83\\u4EEC\\u7684\\u4FE1\\u606F\\u3002\\u8FD9\\u4F7F\\u60A8\\u53EF\\u4EE5\\u9A8C\\u8BC1\\u4EA4\\u4E92\\uFF0C\\u4F8B\\u5982\\u662F\\u5426\\u8C03\\u7528\\u4E86\\u51FD\\u6570\\u3001\\u8C03\\u7528\\u4E86\\u591A\\u5C11\\u6B21\\u4EE5\\u53CA\\u4F7F\\u7528\\u4EC0\\u4E48\\u53C2\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u4E00\\u4E2A\\u7528\\u4E8E\\u8BB0\\u5F55\\u7528\\u6237\\u6570\\u636E\\u7684\\u51FD\\u6570\\u7684\\u7B80\\u5355\\u6A21\\u62DF\nconst logUserDataMock = sinon.mock();\nlogUserDataMock.expects('log').once().withArgs({ id: 1, name: 'John Doe' });\n\n// \\u5728\\u6D4B\\u8BD5\\u4E2D\\u4F7F\\u7528\\u6A21\\u62DF\nlogUserDataMock.log({ id: 1, name: 'John Doe' });\nlogUserDataMock.verify(); // \\u9A8C\\u8BC1 log \\u65B9\\u6CD5\\u662F\\u5426\\u4F7F\\u7528\\u6307\\u5B9A\\u7684\\u53C2\\u6570\\u8C03\\u7528\\u4E86\\u4E00\\u6B21\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F55\\u65F6\\u4F7F\\u7528\\u5B58\\u6839\\u548C\\u6A21\\u62DF\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B58\\u6839\"}),\"\\uFF1A\\u5F53\\u60A8\\u9700\\u8981\\u5C06\\u6B63\\u5728\\u6D4B\\u8BD5\\u7684\\u4EE3\\u7801\\u4E0E\\u5916\\u90E8\\u4F9D\\u8D56\\u9879\\u9694\\u79BB\\u5E76\\u63A7\\u5236\\u8FD9\\u4E9B\\u4F9D\\u8D56\\u9879\\u63D0\\u4F9B\\u7684\\u54CD\\u5E94\\u65F6\\uFF0C\\u8BF7\\u4F7F\\u7528\\u5B58\\u6839\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6A21\\u62DF\"}),\"\\uFF1A\\u5F53\\u60A8\\u9700\\u8981\\u9A8C\\u8BC1\\u4EE3\\u7801\\u662F\\u5426\\u4E0E\\u5916\\u90E8\\u4F9D\\u8D56\\u9879\\u6B63\\u786E\\u4EA4\\u4E92\\u65F6\\uFF0C\\u4F8B\\u5982\\u786E\\u4FDD\\u4F7F\\u7528\\u6B63\\u786E\\u7684\\u53C2\\u6570\\u8C03\\u7528\\u51FD\\u6570\\u65F6\\uFF0C\\u8BF7\\u4F7F\\u7528\\u6A21\\u62DF\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://sinonjs.org/releases/latest/\",children:\"Sinon.js \\u6587\\u6863\"})}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.a,{href:\"https://martinfowler.com/articles/mocksArentStubs.html\",children:\"Mocks Aren't Stubs\"}),\" \\u4F5C\\u8005\\uFF1AMartin Fowler\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.a,{href:\"https://www.sitepoint.com/testing-javascript-mocks-stubs/\",children:\"\\u4F7F\\u7528\\u6A21\\u62DF\\u548C\\u5B58\\u6839\\u6D4B\\u8BD5 JavaScript\"}),\" on SitePoint\"]}),`\n`]})]})}function M(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(a,t)})):a(t)}var k=M;return x(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var f=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),j=(r,n)=>{for(var t in n)c(r,t,{get:n[t],enumerable:!0})},h=(r,n,t,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of g(n))!D.call(r,o)&&o!==t&&c(r,o,{get:()=>n[o],enumerable:!(s=m(n,o))||s.enumerable});return r};var x=(r,n,t)=>(t=r!=null?u(p(r)):{},h(n||!r||!r.__esModule?c(t,\"default\",{value:r,enumerable:!0}):t,r)),M=r=>h(c({},\"__esModule\",{value:!0}),r);var l=f((w,i)=>{i.exports=_jsx_runtime});var S={};j(S,{default:()=>d,frontmatter:()=>k});var e=x(l()),k={title:\"\\u4EC0\\u4E48\\u662F\\u6A21\\u62DF\\u548C\\u5B58\\u6839\\uFF0C\\u4EE5\\u53CA\\u5B83\\u4EEC\\u5728\\u6D4B\\u8BD5\\u4E2D\\u5982\\u4F55\\u4F7F\\u7528\\uFF1F\"};function a(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u62DF\\u548C\\u5B58\\u6839\\u662F\\u7528\\u4E8E\\u6D4B\\u8BD5\\u7684\\u5DE5\\u5177\\uFF0C\\u7528\\u4E8E\\u6A21\\u62DF\\u771F\\u5B9E\\u5BF9\\u8C61\\u7684\\u884C\\u4E3A\\u3002\\u5B58\\u6839\\u4E3A\\u51FD\\u6570\\u8C03\\u7528\\u63D0\\u4F9B\\u9884\\u5B9A\\u4E49\\u7684\\u54CD\\u5E94\\uFF0C\\u800C\\u6A21\\u62DF\\u66F4\\u590D\\u6742\\uFF0C\\u53EF\\u4EE5\\u9A8C\\u8BC1\\u4EA4\\u4E92\\uFF0C\\u4F8B\\u5982\\u662F\\u5426\\u8C03\\u7528\\u4E86\\u51FD\\u6570\\u4EE5\\u53CA\\u4F7F\\u7528\\u4EC0\\u4E48\\u53C2\\u6570\\u3002\\u5B58\\u6839\\u7528\\u4E8E\\u5C06\\u6B63\\u5728\\u6D4B\\u8BD5\\u7684\\u4EE3\\u7801\\u4E0E\\u5916\\u90E8\\u4F9D\\u8D56\\u9879\\u9694\\u79BB\\uFF0C\\u800C\\u6A21\\u62DF\\u7528\\u4E8E\\u786E\\u4FDD\\u4EE3\\u7801\\u4E0E\\u8FD9\\u4E9B\\u4F9D\\u8D56\\u9879\\u6B63\\u786E\\u4EA4\\u4E92\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u6A21\\u62DF\\u548C\\u5B58\\u6839\\uFF0C\\u4EE5\\u53CA\\u5B83\\u4EEC\\u5728\\u6D4B\\u8BD5\\u4E2D\\u5982\\u4F55\\u4F7F\\u7528\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B58\\u6839\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5B58\\u6839\\u662F\\u7B80\\u5355\\u7684\\u5BF9\\u8C61\\uFF0C\\u5B83\\u4EEC\\u4E3A\\u6D4B\\u8BD5\\u671F\\u95F4\\u8FDB\\u884C\\u7684\\u51FD\\u6570\\u8C03\\u7528\\u63D0\\u4F9B\\u9884\\u5B9A\\u4E49\\u7684\\u54CD\\u5E94\\u3002\\u5B83\\u4EEC\\u7528\\u4E8E\\u901A\\u8FC7\\u63D0\\u4F9B\\u53D7\\u63A7\\u54CD\\u5E94\\u6765\\u5C06\\u6B63\\u5728\\u6D4B\\u8BD5\\u7684\\u4EE3\\u7801\\u4E0E\\u5916\\u90E8\\u4F9D\\u8D56\\u9879\\uFF08\\u4F8B\\u5982\\u6570\\u636E\\u5E93\\u6216 API\\uFF09\\u9694\\u79BB\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u4E00\\u4E2A\\u7528\\u4E8E\\u83B7\\u53D6\\u7528\\u6237\\u6570\\u636E\\u7684\\u51FD\\u6570\\u7684\\u7B80\\u5355\\u5B58\\u6839\nconst fetchUserDataStub = sinon.stub();\nfetchUserDataStub.returns({ id: 1, name: 'John Doe' });\n\n// \\u5728\\u6D4B\\u8BD5\\u4E2D\\u4F7F\\u7528\\u5B58\\u6839\nconst userData = fetchUserDataStub();\nconsole.log(userData); // { id: 1, name: 'John Doe' }\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6A21\\u62DF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u62DF\\u6BD4\\u5B58\\u6839\\u66F4\\u590D\\u6742\\u3002\\u5B83\\u4EEC\\u4E0D\\u4EC5\\u63D0\\u4F9B\\u9884\\u5B9A\\u4E49\\u7684\\u54CD\\u5E94\\uFF0C\\u8FD8\\u8BB0\\u5F55\\u6709\\u5173\\u5982\\u4F55\\u8C03\\u7528\\u5B83\\u4EEC\\u7684\\u4FE1\\u606F\\u3002\\u8FD9\\u4F7F\\u60A8\\u53EF\\u4EE5\\u9A8C\\u8BC1\\u4EA4\\u4E92\\uFF0C\\u4F8B\\u5982\\u662F\\u5426\\u8C03\\u7528\\u4E86\\u51FD\\u6570\\u3001\\u8C03\\u7528\\u4E86\\u591A\\u5C11\\u6B21\\u4EE5\\u53CA\\u4F7F\\u7528\\u4EC0\\u4E48\\u53C2\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u4E00\\u4E2A\\u7528\\u4E8E\\u8BB0\\u5F55\\u7528\\u6237\\u6570\\u636E\\u7684\\u51FD\\u6570\\u7684\\u7B80\\u5355\\u6A21\\u62DF\nconst logUserDataMock = sinon.mock();\nlogUserDataMock.expects('log').once().withArgs({ id: 1, name: 'John Doe' });\n\n// \\u5728\\u6D4B\\u8BD5\\u4E2D\\u4F7F\\u7528\\u6A21\\u62DF\nlogUserDataMock.log({ id: 1, name: 'John Doe' });\nlogUserDataMock.verify(); // \\u9A8C\\u8BC1 log \\u65B9\\u6CD5\\u662F\\u5426\\u4F7F\\u7528\\u6307\\u5B9A\\u7684\\u53C2\\u6570\\u8C03\\u7528\\u4E86\\u4E00\\u6B21\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F55\\u65F6\\u4F7F\\u7528\\u5B58\\u6839\\u548C\\u6A21\\u62DF\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B58\\u6839\"}),\"\\uFF1A\\u5F53\\u60A8\\u9700\\u8981\\u5C06\\u6B63\\u5728\\u6D4B\\u8BD5\\u7684\\u4EE3\\u7801\\u4E0E\\u5916\\u90E8\\u4F9D\\u8D56\\u9879\\u9694\\u79BB\\u5E76\\u63A7\\u5236\\u8FD9\\u4E9B\\u4F9D\\u8D56\\u9879\\u63D0\\u4F9B\\u7684\\u54CD\\u5E94\\u65F6\\uFF0C\\u8BF7\\u4F7F\\u7528\\u5B58\\u6839\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6A21\\u62DF\"}),\"\\uFF1A\\u5F53\\u60A8\\u9700\\u8981\\u9A8C\\u8BC1\\u4EE3\\u7801\\u662F\\u5426\\u4E0E\\u5916\\u90E8\\u4F9D\\u8D56\\u9879\\u6B63\\u786E\\u4EA4\\u4E92\\u65F6\\uFF0C\\u4F8B\\u5982\\u786E\\u4FDD\\u4F7F\\u7528\\u6B63\\u786E\\u7684\\u53C2\\u6570\\u8C03\\u7528\\u51FD\\u6570\\u65F6\\uFF0C\\u8BF7\\u4F7F\\u7528\\u6A21\\u62DF\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://sinonjs.org/releases/latest/\",children:\"Sinon.js \\u6587\\u6863\"})}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.a,{href:\"https://martinfowler.com/articles/mocksArentStubs.html\",children:\"Mocks Aren't Stubs\"}),\" \\u4F5C\\u8005\\uFF1AMartin Fowler\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.a,{href:\"https://www.sitepoint.com/testing-javascript-mocks-stubs/\",children:\"\\u4F7F\\u7528\\u6A21\\u62DF\\u548C\\u5B58\\u6839\\u6D4B\\u8BD5 JavaScript\"}),\" on SitePoint\"]}),`\n`]})]})}function d(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(a,{...r})}):a(r)}return M(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-modules-and-why-are-they-useful/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-modules-and-why-are-they-useful/en-US.json
index c103454f4..e5591483d 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-modules-and-why-are-they-useful/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-modules-and-why-are-they-useful/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-modules-and-why-are-they-useful/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),y=(o,e)=>{for(var t in e)i(o,t,{get:e[t],enumerable:!0})},r=(o,e,t,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!f.call(o,a)&&a!==t&&i(o,a,{get:()=>e[a],enumerable:!(l=h(e,a))||l.enumerable});return o};var b=(o,e,t)=>(t=o!=null?u(m(o)):{},r(e||!o||!o.__esModule?i(t,\"default\",{value:o,enumerable:!0}):t,o)),x=o=>r(i({},\"__esModule\",{value:!0}),o);var c=g((k,s)=>{s.exports=_jsx_runtime});var v={};y(v,{default:()=>j,frontmatter:()=>w});var n=b(c()),w={title:\"What are modules and why are they useful?\"};function d(o){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Modules are reusable pieces of code that can be imported and exported between different files in a project. They help in organizing code, making it more maintainable and scalable. By using modules, you can avoid global namespace pollution and manage dependencies more effectively. In JavaScript, you can use \",(0,n.jsx)(e.code,{children:\"import\"}),\" and \",(0,n.jsx)(e.code,{children:\"export\"}),\" statements to work with modules.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// myModule.js\nexport const myFunction = () => {\n  console.log('Hello, World!');\n};\n\n// main.js\nimport { myFunction } from './myModule.js';\nmyFunction(); // Outputs: Hello, World!\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are modules and why are they useful?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition of modules\"}),`\n`,(0,n.jsx)(e.p,{children:\"Modules are self-contained units of code that encapsulate functionality and can be imported and exported between different parts of an application. They allow developers to break down complex applications into smaller, manageable pieces.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits of using modules\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Code organization\"}),`\n`,(0,n.jsx)(e.p,{children:\"Modules help in organizing code by grouping related functionalities together. This makes the codebase easier to navigate and understand.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Maintainability\"}),`\n`,(0,n.jsx)(e.p,{children:\"By breaking down the code into smaller modules, it becomes easier to maintain and update. Changes in one module are less likely to affect other parts of the application.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Reusability\"}),`\n`,(0,n.jsx)(e.p,{children:\"Modules can be reused across different parts of an application or even in different projects. This reduces code duplication and promotes the DRY (Don't Repeat Yourself) principle.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Avoiding global namespace pollution\"}),`\n`,(0,n.jsx)(e.p,{children:\"Modules help in avoiding global namespace pollution by encapsulating variables and functions within their own scope. This reduces the risk of naming conflicts and makes the code more robust.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Dependency management\"}),`\n`,(0,n.jsx)(e.p,{children:\"Modules make it easier to manage dependencies between different parts of an application. You can explicitly declare what a module depends on and what it exports, making the code more predictable and easier to debug.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Working with modules in JavaScript\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Exporting from a module\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can export variables, functions, or classes from a module using the \",(0,n.jsx)(e.code,{children:\"export\"}),\" keyword.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// myModule.js\nexport const myVariable = 42;\nexport function myFunction() {\n  console.log('Hello, World!');\n}\nexport class MyClass {\n  constructor() {\n    console.log('MyClass instance created');\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Importing into a module\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can import variables, functions, or classes from another module using the \",(0,n.jsx)(e.code,{children:\"import\"}),\" keyword.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// main.js\nimport { myVariable, myFunction, MyClass } from './myModule.js';\n\nconsole.log(myVariable); // Outputs: 42\nmyFunction(); // Outputs: Hello, World!\nconst myClassInstance = new MyClass(); // Outputs: MyClass instance created\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Default exports\"}),`\n`,(0,n.jsx)(e.p,{children:\"A module can have a default export, which can be imported without using curly braces.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// myModule.js\nconst myDefaultFunction = () => {\n  console.log('Default export function');\n};\nexport default myDefaultFunction;\n\n// main.js\nimport myDefaultFunction from './myModule.js';\nmyDefaultFunction(); // Outputs: Default export function\n`})}),`\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/Web/JavaScript/Reference/Statements/import\",children:\"MDN Web Docs: Import\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export\",children:\"MDN Web Docs: Export\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.sitepoint.com/understanding-es6-modules/\",children:\"JavaScript Modules: A Beginner\\u2019s Guide\"})}),`\n`]})]})}function M(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(d,o)})):d(o)}var j=M;return x(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),b=(o,e)=>{for(var t in e)i(o,t,{get:e[t],enumerable:!0})},r=(o,e,t,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!g.call(o,a)&&a!==t&&i(o,a,{get:()=>e[a],enumerable:!(l=p(e,a))||l.enumerable});return o};var x=(o,e,t)=>(t=o!=null?h(f(o)):{},r(e||!o||!o.__esModule?i(t,\"default\",{value:o,enumerable:!0}):t,o)),w=o=>r(i({},\"__esModule\",{value:!0}),o);var c=y((D,s)=>{s.exports=_jsx_runtime});var j={};b(j,{default:()=>u,frontmatter:()=>M});var n=x(c()),M={title:\"What are modules and why are they useful?\"};function d(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Modules are reusable pieces of code that can be imported and exported between different files in a project. They help in organizing code, making it more maintainable and scalable. By using modules, you can avoid global namespace pollution and manage dependencies more effectively. In JavaScript, you can use \",(0,n.jsx)(e.code,{children:\"import\"}),\" and \",(0,n.jsx)(e.code,{children:\"export\"}),\" statements to work with modules.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// myModule.js\nexport const myFunction = () => {\n  console.log('Hello, World!');\n};\n\n// main.js\nimport { myFunction } from './myModule.js';\nmyFunction(); // Outputs: Hello, World!\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are modules and why are they useful?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition of modules\"}),`\n`,(0,n.jsx)(e.p,{children:\"Modules are self-contained units of code that encapsulate functionality and can be imported and exported between different parts of an application. They allow developers to break down complex applications into smaller, manageable pieces.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits of using modules\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Code organization\"}),`\n`,(0,n.jsx)(e.p,{children:\"Modules help in organizing code by grouping related functionalities together. This makes the codebase easier to navigate and understand.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Maintainability\"}),`\n`,(0,n.jsx)(e.p,{children:\"By breaking down the code into smaller modules, it becomes easier to maintain and update. Changes in one module are less likely to affect other parts of the application.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Reusability\"}),`\n`,(0,n.jsx)(e.p,{children:\"Modules can be reused across different parts of an application or even in different projects. This reduces code duplication and promotes the DRY (Don't Repeat Yourself) principle.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Avoiding global namespace pollution\"}),`\n`,(0,n.jsx)(e.p,{children:\"Modules help in avoiding global namespace pollution by encapsulating variables and functions within their own scope. This reduces the risk of naming conflicts and makes the code more robust.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Dependency management\"}),`\n`,(0,n.jsx)(e.p,{children:\"Modules make it easier to manage dependencies between different parts of an application. You can explicitly declare what a module depends on and what it exports, making the code more predictable and easier to debug.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Working with modules in JavaScript\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Exporting from a module\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can export variables, functions, or classes from a module using the \",(0,n.jsx)(e.code,{children:\"export\"}),\" keyword.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// myModule.js\nexport const myVariable = 42;\nexport function myFunction() {\n  console.log('Hello, World!');\n}\nexport class MyClass {\n  constructor() {\n    console.log('MyClass instance created');\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Importing into a module\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can import variables, functions, or classes from another module using the \",(0,n.jsx)(e.code,{children:\"import\"}),\" keyword.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// main.js\nimport { myVariable, myFunction, MyClass } from './myModule.js';\n\nconsole.log(myVariable); // Outputs: 42\nmyFunction(); // Outputs: Hello, World!\nconst myClassInstance = new MyClass(); // Outputs: MyClass instance created\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Default exports\"}),`\n`,(0,n.jsx)(e.p,{children:\"A module can have a default export, which can be imported without using curly braces.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// myModule.js\nconst myDefaultFunction = () => {\n  console.log('Default export function');\n};\nexport default myDefaultFunction;\n\n// main.js\nimport myDefaultFunction from './myModule.js';\nmyDefaultFunction(); // Outputs: Default export function\n`})}),`\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/Web/JavaScript/Reference/Statements/import\",children:\"MDN Web Docs: Import\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export\",children:\"MDN Web Docs: Export\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.sitepoint.com/understanding-es6-modules/\",children:\"JavaScript Modules: A Beginner\\u2019s Guide\"})}),`\n`]})]})}function u(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(d,{...o})}):d(o)}return w(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-modules-and-why-are-they-useful/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-modules-and-why-are-they-useful/zh-CN.json
index 3cfc92892..855b8dcd1 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-modules-and-why-are-they-useful/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-modules-and-why-are-they-useful/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-modules-and-why-are-they-useful/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),g=(l,n)=>{for(var r in n)o(l,r,{get:n[r],enumerable:!0})},i=(l,n,r,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of u(n))!y.call(l,c)&&c!==r&&o(l,c,{get:()=>n[c],enumerable:!(t=p(n,c))||t.enumerable});return l};var j=(l,n,r)=>(r=l!=null?h(m(l)):{},i(n||!l||!l.__esModule?o(r,\"default\",{value:l,enumerable:!0}):r,l)),x=l=>i(o({},\"__esModule\",{value:!0}),l);var d=f((C,s)=>{s.exports=_jsx_runtime});var b={};g(b,{default:()=>F,frontmatter:()=>M});var e=j(d()),M={title:\"\\u4EC0\\u4E48\\u662F\\u6A21\\u5757\\u4EE5\\u53CA\\u5B83\\u4EEC\\u4E3A\\u4EC0\\u4E48\\u6709\\u7528\\uFF1F\"};function a(l){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},l.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u6A21\\u5757\\u662F\\u53EF\\u91CD\\u7528\\u7684\\u4EE3\\u7801\\u7247\\u6BB5\\uFF0C\\u53EF\\u4EE5\\u5728\\u9879\\u76EE\\u4E2D\\u7684\\u4E0D\\u540C\\u6587\\u4EF6\\u4E4B\\u95F4\\u5BFC\\u5165\\u548C\\u5BFC\\u51FA\\u3002\\u5B83\\u4EEC\\u6709\\u52A9\\u4E8E\\u7EC4\\u7EC7\\u4EE3\\u7801\\uFF0C\\u4F7F\\u5176\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u548C\\u6269\\u5C55\\u3002\\u901A\\u8FC7\\u4F7F\\u7528\\u6A21\\u5757\\uFF0C\\u60A8\\u53EF\\u4EE5\\u907F\\u514D\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u6C61\\u67D3\\u5E76\\u66F4\\u6709\\u6548\\u5730\\u7BA1\\u7406\\u4F9D\\u8D56\\u5173\\u7CFB\\u3002\\u5728 JavaScript \\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"import\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"export\"}),\" \\u8BED\\u53E5\\u6765\\u5904\\u7406\\u6A21\\u5757\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// myModule.js\nexport const myFunction = () => {\n  console.log('Hello, World!');\n};\n\n// main.js\nimport { myFunction } from './myModule.js';\nmyFunction(); // Outputs: Hello, World!\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u6A21\\u5757\\u4EE5\\u53CA\\u5B83\\u4EEC\\u4E3A\\u4EC0\\u4E48\\u6709\\u7528\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6A21\\u5757\\u7684\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u662F\\u81EA\\u5305\\u542B\\u7684\\u4EE3\\u7801\\u5355\\u5143\\uFF0C\\u5C01\\u88C5\\u4E86\\u529F\\u80FD\\uFF0C\\u53EF\\u4EE5\\u5728\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4E0D\\u540C\\u90E8\\u5206\\u4E4B\\u95F4\\u5BFC\\u5165\\u548C\\u5BFC\\u51FA\\u3002\\u5B83\\u4EEC\\u5141\\u8BB8\\u5F00\\u53D1\\u4EBA\\u5458\\u5C06\\u590D\\u6742\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u5206\\u89E3\\u6210\\u66F4\\u5C0F\\u3001\\u66F4\\u6613\\u4E8E\\u7BA1\\u7406\\u7684\\u90E8\\u5206\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528\\u6A21\\u5757\\u7684\\u597D\\u5904\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4EE3\\u7801\\u7EC4\\u7EC7\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u901A\\u8FC7\\u5C06\\u76F8\\u5173\\u529F\\u80FD\\u7EC4\\u5408\\u5728\\u4E00\\u8D77\\uFF0C\\u5E2E\\u52A9\\u7EC4\\u7EC7\\u4EE3\\u7801\\u3002\\u8FD9\\u4F7F\\u5F97\\u4EE3\\u7801\\u5E93\\u66F4\\u6613\\u4E8E\\u5BFC\\u822A\\u548C\\u7406\\u89E3\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u53EF\\u7EF4\\u62A4\\u6027\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u901A\\u8FC7\\u5C06\\u4EE3\\u7801\\u5206\\u89E3\\u6210\\u66F4\\u5C0F\\u7684\\u6A21\\u5757\\uFF0C\\u66F4\\u5BB9\\u6613\\u7EF4\\u62A4\\u548C\\u66F4\\u65B0\\u3002\\u4E00\\u4E2A\\u6A21\\u5757\\u4E2D\\u7684\\u66F4\\u6539\\u4E0D\\u592A\\u53EF\\u80FD\\u5F71\\u54CD\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u5176\\u4ED6\\u90E8\\u5206\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u53EF\\u91CD\\u7528\\u6027\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u53EF\\u4EE5\\u5728\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4E0D\\u540C\\u90E8\\u5206\\u751A\\u81F3\\u4E0D\\u540C\\u9879\\u76EE\\u4E2D\\u91CD\\u590D\\u4F7F\\u7528\\u3002\\u8FD9\\u51CF\\u5C11\\u4E86\\u4EE3\\u7801\\u91CD\\u590D\\uFF0C\\u5E76\\u4FC3\\u8FDB\\u4E86 DRY\\uFF08\\u4E0D\\u8981\\u91CD\\u590D\\u81EA\\u5DF1\\uFF09\\u539F\\u5219\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u907F\\u514D\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u6C61\\u67D3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u901A\\u8FC7\\u5C06\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u5C01\\u88C5\\u5728\\u5176\\u81EA\\u5DF1\\u7684\\u4F5C\\u7528\\u57DF\\u5185\\uFF0C\\u6709\\u52A9\\u4E8E\\u907F\\u514D\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u6C61\\u67D3\\u3002\\u8FD9\\u964D\\u4F4E\\u4E86\\u547D\\u540D\\u51B2\\u7A81\\u7684\\u98CE\\u9669\\uFF0C\\u5E76\\u4F7F\\u4EE3\\u7801\\u66F4\\u5065\\u58EE\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F9D\\u8D56\\u7BA1\\u7406\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u4F7F\\u7BA1\\u7406\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E0D\\u540C\\u90E8\\u5206\\u4E4B\\u95F4\\u7684\\u4F9D\\u8D56\\u5173\\u7CFB\\u66F4\\u5BB9\\u6613\\u3002\\u60A8\\u53EF\\u4EE5\\u663E\\u5F0F\\u58F0\\u660E\\u4E00\\u4E2A\\u6A21\\u5757\\u4F9D\\u8D56\\u4E8E\\u4EC0\\u4E48\\u4EE5\\u53CA\\u5B83\\u5BFC\\u51FA\\u4EC0\\u4E48\\uFF0C\\u4F7F\\u4EE3\\u7801\\u66F4\\u53EF\\u9884\\u6D4B\\u4E14\\u66F4\\u6613\\u4E8E\\u8C03\\u8BD5\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728 JavaScript \\u4E2D\\u4F7F\\u7528\\u6A21\\u5757\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4ECE\\u6A21\\u5757\\u5BFC\\u51FA\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"export\"}),\" \\u5173\\u952E\\u5B57\\u4ECE\\u6A21\\u5757\\u4E2D\\u5BFC\\u51FA\\u53D8\\u91CF\\u3001\\u51FD\\u6570\\u6216\\u7C7B\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// myModule.js\nexport const myVariable = 42;\nexport function myFunction() {\n  console.log('Hello, World!');\n}\nexport class MyClass {\n  constructor() {\n    console.log('MyClass instance created');\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5BFC\\u5165\\u5230\\u6A21\\u5757\\u4E2D\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"import\"}),\" \\u5173\\u952E\\u5B57\\u4ECE\\u53E6\\u4E00\\u4E2A\\u6A21\\u5757\\u5BFC\\u5165\\u53D8\\u91CF\\u3001\\u51FD\\u6570\\u6216\\u7C7B\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// main.js\nimport { myVariable, myFunction, MyClass } from './myModule.js';\n\nconsole.log(myVariable); // Outputs: 42\nmyFunction(); // Outputs: Hello, World!\nconst myClassInstance = new MyClass(); // Outputs: MyClass instance created\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u9ED8\\u8BA4\\u5BFC\\u51FA\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E00\\u4E2A\\u6A21\\u5757\\u53EF\\u4EE5\\u6709\\u4E00\\u4E2A\\u9ED8\\u8BA4\\u5BFC\\u51FA\\uFF0C\\u53EF\\u4EE5\\u5728\\u4E0D\\u4F7F\\u7528\\u5927\\u62EC\\u53F7\\u7684\\u60C5\\u51B5\\u4E0B\\u5BFC\\u5165\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// myModule.js\nconst myDefaultFunction = () => {\n  console.log('Default export function');\n};\nexport default myDefaultFunction;\n\n// main.js\nimport myDefaultFunction from './myModule.js';\nmyDefaultFunction(); // Outputs: Default export function\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import\",children:\"MDN Web Docs: Import\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export\",children:\"MDN Web Docs: Export\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.sitepoint.com/understanding-es6-modules/\",children:\"JavaScript Modules: A Beginner\\u2019s Guide\"})}),`\n`]})]})}function D(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,Object.assign({},l,{children:(0,e.jsx)(a,l)})):a(l)}var F=D;return x(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),g=(l,n)=>{for(var r in n)o(l,r,{get:n[r],enumerable:!0})},i=(l,n,r,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of m(n))!f.call(l,c)&&c!==r&&o(l,c,{get:()=>n[c],enumerable:!(t=u(n,c))||t.enumerable});return l};var j=(l,n,r)=>(r=l!=null?p(y(l)):{},i(n||!l||!l.__esModule?o(r,\"default\",{value:l,enumerable:!0}):r,l)),M=l=>i(o({},\"__esModule\",{value:!0}),l);var d=x((C,s)=>{s.exports=_jsx_runtime});var F={};g(F,{default:()=>h,frontmatter:()=>D});var e=j(d()),D={title:\"\\u4EC0\\u4E48\\u662F\\u6A21\\u5757\\u4EE5\\u53CA\\u5B83\\u4EEC\\u4E3A\\u4EC0\\u4E48\\u6709\\u7528\\uFF1F\"};function a(l){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...l.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u6A21\\u5757\\u662F\\u53EF\\u91CD\\u7528\\u7684\\u4EE3\\u7801\\u7247\\u6BB5\\uFF0C\\u53EF\\u4EE5\\u5728\\u9879\\u76EE\\u4E2D\\u7684\\u4E0D\\u540C\\u6587\\u4EF6\\u4E4B\\u95F4\\u5BFC\\u5165\\u548C\\u5BFC\\u51FA\\u3002\\u5B83\\u4EEC\\u6709\\u52A9\\u4E8E\\u7EC4\\u7EC7\\u4EE3\\u7801\\uFF0C\\u4F7F\\u5176\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u548C\\u6269\\u5C55\\u3002\\u901A\\u8FC7\\u4F7F\\u7528\\u6A21\\u5757\\uFF0C\\u60A8\\u53EF\\u4EE5\\u907F\\u514D\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u6C61\\u67D3\\u5E76\\u66F4\\u6709\\u6548\\u5730\\u7BA1\\u7406\\u4F9D\\u8D56\\u5173\\u7CFB\\u3002\\u5728 JavaScript \\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"import\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"export\"}),\" \\u8BED\\u53E5\\u6765\\u5904\\u7406\\u6A21\\u5757\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// myModule.js\nexport const myFunction = () => {\n  console.log('Hello, World!');\n};\n\n// main.js\nimport { myFunction } from './myModule.js';\nmyFunction(); // Outputs: Hello, World!\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u6A21\\u5757\\u4EE5\\u53CA\\u5B83\\u4EEC\\u4E3A\\u4EC0\\u4E48\\u6709\\u7528\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6A21\\u5757\\u7684\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u662F\\u81EA\\u5305\\u542B\\u7684\\u4EE3\\u7801\\u5355\\u5143\\uFF0C\\u5C01\\u88C5\\u4E86\\u529F\\u80FD\\uFF0C\\u53EF\\u4EE5\\u5728\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4E0D\\u540C\\u90E8\\u5206\\u4E4B\\u95F4\\u5BFC\\u5165\\u548C\\u5BFC\\u51FA\\u3002\\u5B83\\u4EEC\\u5141\\u8BB8\\u5F00\\u53D1\\u4EBA\\u5458\\u5C06\\u590D\\u6742\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u5206\\u89E3\\u6210\\u66F4\\u5C0F\\u3001\\u66F4\\u6613\\u4E8E\\u7BA1\\u7406\\u7684\\u90E8\\u5206\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528\\u6A21\\u5757\\u7684\\u597D\\u5904\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4EE3\\u7801\\u7EC4\\u7EC7\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u901A\\u8FC7\\u5C06\\u76F8\\u5173\\u529F\\u80FD\\u7EC4\\u5408\\u5728\\u4E00\\u8D77\\uFF0C\\u5E2E\\u52A9\\u7EC4\\u7EC7\\u4EE3\\u7801\\u3002\\u8FD9\\u4F7F\\u5F97\\u4EE3\\u7801\\u5E93\\u66F4\\u6613\\u4E8E\\u5BFC\\u822A\\u548C\\u7406\\u89E3\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u53EF\\u7EF4\\u62A4\\u6027\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u901A\\u8FC7\\u5C06\\u4EE3\\u7801\\u5206\\u89E3\\u6210\\u66F4\\u5C0F\\u7684\\u6A21\\u5757\\uFF0C\\u66F4\\u5BB9\\u6613\\u7EF4\\u62A4\\u548C\\u66F4\\u65B0\\u3002\\u4E00\\u4E2A\\u6A21\\u5757\\u4E2D\\u7684\\u66F4\\u6539\\u4E0D\\u592A\\u53EF\\u80FD\\u5F71\\u54CD\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u5176\\u4ED6\\u90E8\\u5206\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u53EF\\u91CD\\u7528\\u6027\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u53EF\\u4EE5\\u5728\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4E0D\\u540C\\u90E8\\u5206\\u751A\\u81F3\\u4E0D\\u540C\\u9879\\u76EE\\u4E2D\\u91CD\\u590D\\u4F7F\\u7528\\u3002\\u8FD9\\u51CF\\u5C11\\u4E86\\u4EE3\\u7801\\u91CD\\u590D\\uFF0C\\u5E76\\u4FC3\\u8FDB\\u4E86 DRY\\uFF08\\u4E0D\\u8981\\u91CD\\u590D\\u81EA\\u5DF1\\uFF09\\u539F\\u5219\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u907F\\u514D\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u6C61\\u67D3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u901A\\u8FC7\\u5C06\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u5C01\\u88C5\\u5728\\u5176\\u81EA\\u5DF1\\u7684\\u4F5C\\u7528\\u57DF\\u5185\\uFF0C\\u6709\\u52A9\\u4E8E\\u907F\\u514D\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u6C61\\u67D3\\u3002\\u8FD9\\u964D\\u4F4E\\u4E86\\u547D\\u540D\\u51B2\\u7A81\\u7684\\u98CE\\u9669\\uFF0C\\u5E76\\u4F7F\\u4EE3\\u7801\\u66F4\\u5065\\u58EE\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F9D\\u8D56\\u7BA1\\u7406\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u4F7F\\u7BA1\\u7406\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E0D\\u540C\\u90E8\\u5206\\u4E4B\\u95F4\\u7684\\u4F9D\\u8D56\\u5173\\u7CFB\\u66F4\\u5BB9\\u6613\\u3002\\u60A8\\u53EF\\u4EE5\\u663E\\u5F0F\\u58F0\\u660E\\u4E00\\u4E2A\\u6A21\\u5757\\u4F9D\\u8D56\\u4E8E\\u4EC0\\u4E48\\u4EE5\\u53CA\\u5B83\\u5BFC\\u51FA\\u4EC0\\u4E48\\uFF0C\\u4F7F\\u4EE3\\u7801\\u66F4\\u53EF\\u9884\\u6D4B\\u4E14\\u66F4\\u6613\\u4E8E\\u8C03\\u8BD5\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728 JavaScript \\u4E2D\\u4F7F\\u7528\\u6A21\\u5757\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4ECE\\u6A21\\u5757\\u5BFC\\u51FA\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"export\"}),\" \\u5173\\u952E\\u5B57\\u4ECE\\u6A21\\u5757\\u4E2D\\u5BFC\\u51FA\\u53D8\\u91CF\\u3001\\u51FD\\u6570\\u6216\\u7C7B\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// myModule.js\nexport const myVariable = 42;\nexport function myFunction() {\n  console.log('Hello, World!');\n}\nexport class MyClass {\n  constructor() {\n    console.log('MyClass instance created');\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5BFC\\u5165\\u5230\\u6A21\\u5757\\u4E2D\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"import\"}),\" \\u5173\\u952E\\u5B57\\u4ECE\\u53E6\\u4E00\\u4E2A\\u6A21\\u5757\\u5BFC\\u5165\\u53D8\\u91CF\\u3001\\u51FD\\u6570\\u6216\\u7C7B\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// main.js\nimport { myVariable, myFunction, MyClass } from './myModule.js';\n\nconsole.log(myVariable); // Outputs: 42\nmyFunction(); // Outputs: Hello, World!\nconst myClassInstance = new MyClass(); // Outputs: MyClass instance created\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u9ED8\\u8BA4\\u5BFC\\u51FA\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E00\\u4E2A\\u6A21\\u5757\\u53EF\\u4EE5\\u6709\\u4E00\\u4E2A\\u9ED8\\u8BA4\\u5BFC\\u51FA\\uFF0C\\u53EF\\u4EE5\\u5728\\u4E0D\\u4F7F\\u7528\\u5927\\u62EC\\u53F7\\u7684\\u60C5\\u51B5\\u4E0B\\u5BFC\\u5165\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// myModule.js\nconst myDefaultFunction = () => {\n  console.log('Default export function');\n};\nexport default myDefaultFunction;\n\n// main.js\nimport myDefaultFunction from './myModule.js';\nmyDefaultFunction(); // Outputs: Default export function\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import\",children:\"MDN Web Docs: Import\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export\",children:\"MDN Web Docs: Export\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.sitepoint.com/understanding-es6-modules/\",children:\"JavaScript Modules: A Beginner\\u2019s Guide\"})}),`\n`]})]})}function h(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,{...l,children:(0,e.jsx)(a,{...l})}):a(l)}return M(F);})();\n;return Component;"
 }
\ No newline at end of file
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 bd172df5a..a5110561f 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-progressive-web-applications-pwas/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var b=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),v=(r,e)=>{for(var i in e)t(r,i,{get:e[i],enumerable:!0})},o=(r,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of g(e))!u.call(r,s)&&s!==i&&t(r,s,{get:()=>e[s],enumerable:!(a=p(e,s))||a.enumerable});return r};var m=(r,e,i)=>(i=r!=null?d(f(r)):{},o(e||!r||!r.__esModule?t(i,\"default\",{value:r,enumerable:!0}):i,r)),w=r=>o(t({},\"__esModule\",{value:!0}),r);var c=b((x,l)=>{l.exports=_jsx_runtime});var T={};v(T,{default:()=>W,frontmatter:()=>k});var n=m(c()),k={title:\"What are Progressive Web Applications (PWAs)?\"};function h(r){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",h4:\"h4\",pre:\"pre\",code:\"code\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Progressive Web Applications (PWAs) are web applications that use modern web capabilities to deliver an app-like experience to users. They are reliable, fast, and engaging. PWAs can work offline, send push notifications, and be installed on a user's home screen. They leverage technologies like service workers, web app manifests, and HTTPS to provide these features.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are Progressive Web Applications (PWAs)?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition\"}),`\n`,(0,n.jsx)(e.p,{children:\"Progressive Web Applications (PWAs) are web applications that combine the best of web and mobile apps. They are built using standard web technologies such as HTML, CSS, and JavaScript but offer enhanced capabilities that make them feel like native apps.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Key characteristics\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Progressive\"}),\": They work for every user, regardless of browser choice, because they are built with progressive enhancement as a core tenet.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Responsive\"}),\": They fit any form factor, whether it's a desktop, mobile, or tablet.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Connectivity independent\"}),\": They can work offline or on low-quality networks using service workers.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"App-like\"}),\": They provide an app-like experience to users with app-style interactions and navigation.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Fresh\"}),\": They are always up-to-date thanks to the service worker update process.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Safe\"}),\": They are served via HTTPS to prevent snooping and ensure content hasn't been tampered with.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Discoverable\"}),': They are identifiable as \"applications\" thanks to W3C manifests and service worker registration, allowing search engines to find them.']}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Re-engageable\"}),\": They can send push notifications to re-engage users.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Installable\"}),\": They allow users to add apps they find most useful to their home screen without the hassle of an app store.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Linkable\"}),\": They can be easily shared via URL and do not require complex installation.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Core technologies\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Service workers\"}),`\n`,(0,n.jsx)(e.p,{children:\"Service workers are scripts that run in the background, separate from the web page, enabling features like offline functionality, background sync, and push notifications.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`if ('serviceWorker' in navigator) {\n  navigator.serviceWorker\n    .register('/service-worker.js')\n    .then(function (registration) {\n      console.log('Service Worker registered with scope:', registration.scope);\n    })\n    .catch(function (error) {\n      console.log('Service Worker registration failed:', error);\n    });\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Web app manifest\"}),`\n`,(0,n.jsx)(e.p,{children:\"The web app manifest is a JSON file that provides metadata about the application (name, icons, start URL, etc.) and allows it to be installed on the user's home screen.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"name\": \"My PWA\",\n  \"short_name\": \"PWA\",\n  \"start_url\": \"/index.html\",\n  \"display\": \"standalone\",\n  \"background_color\": \"#ffffff\",\n  \"theme_color\": \"#000000\",\n  \"icons\": [\n    {\n      \"src\": \"icon/lowres.webp\",\n      \"sizes\": \"48x48\",\n      \"type\": \"image/webp\"\n    },\n    {\n      \"src\": \"icon/hd_hi.ico\",\n      \"sizes\": \"72x72 96x96 128x128 256x256\"\n    }\n  ]\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"HTTPS\"}),`\n`,(0,n.jsx)(e.p,{children:\"PWAs must be served over HTTPS to ensure security and privacy. This is a requirement for service workers and other advanced web features.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Improved performance\"}),\": PWAs load faster and provide a smoother user experience.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Increased engagement\"}),\": Features like push notifications and home screen installation help keep users engaged.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Cost-effective\"}),\": Developing a PWA can be more cost-effective than building separate native apps for different platforms.\"]}),`\n`]}),`\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://developers.google.com/web/progressive-web-apps\",children:\"Google Developers: Progressive Web Apps\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps\",children:\"MDN Web Docs: Progressive web apps (PWAs)\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://web.dev/what-are-pwas/\",children:\"Web.dev: What are Progressive Web Apps?\"})}),`\n`]})]})}function y(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(h,r)})):h(r)}var W=y;return w(T);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var v=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),m=(r,e)=>{for(var i in e)t(r,i,{get:e[i],enumerable:!0})},o=(r,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of f(e))!b.call(r,s)&&s!==i&&t(r,s,{get:()=>e[s],enumerable:!(a=g(e,s))||a.enumerable});return r};var w=(r,e,i)=>(i=r!=null?p(u(r)):{},o(e||!r||!r.__esModule?t(i,\"default\",{value:r,enumerable:!0}):i,r)),k=r=>o(t({},\"__esModule\",{value:!0}),r);var c=v((P,l)=>{l.exports=_jsx_runtime});var W={};m(W,{default:()=>d,frontmatter:()=>y});var n=w(c()),y={title:\"What are Progressive Web Applications (PWAs)?\"};function h(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Progressive Web Applications (PWAs) are web applications that use modern web capabilities to deliver an app-like experience to users. They are reliable, fast, and engaging. PWAs can work offline, send push notifications, and be installed on a user's home screen. They leverage technologies like service workers, web app manifests, and HTTPS to provide these features.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are Progressive Web Applications (PWAs)?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition\"}),`\n`,(0,n.jsx)(e.p,{children:\"Progressive Web Applications (PWAs) are web applications that combine the best of web and mobile apps. They are built using standard web technologies such as HTML, CSS, and JavaScript but offer enhanced capabilities that make them feel like native apps.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Key characteristics\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Progressive\"}),\": They work for every user, regardless of browser choice, because they are built with progressive enhancement as a core tenet.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Responsive\"}),\": They fit any form factor, whether it's a desktop, mobile, or tablet.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Connectivity independent\"}),\": They can work offline or on low-quality networks using service workers.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"App-like\"}),\": They provide an app-like experience to users with app-style interactions and navigation.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Fresh\"}),\": They are always up-to-date thanks to the service worker update process.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Safe\"}),\": They are served via HTTPS to prevent snooping and ensure content hasn't been tampered with.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Discoverable\"}),': They are identifiable as \"applications\" thanks to W3C manifests and service worker registration, allowing search engines to find them.']}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Re-engageable\"}),\": They can send push notifications to re-engage users.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Installable\"}),\": They allow users to add apps they find most useful to their home screen without the hassle of an app store.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Linkable\"}),\": They can be easily shared via URL and do not require complex installation.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Core technologies\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Service workers\"}),`\n`,(0,n.jsx)(e.p,{children:\"Service workers are scripts that run in the background, separate from the web page, enabling features like offline functionality, background sync, and push notifications.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`if ('serviceWorker' in navigator) {\n  navigator.serviceWorker\n    .register('/service-worker.js')\n    .then(function (registration) {\n      console.log('Service Worker registered with scope:', registration.scope);\n    })\n    .catch(function (error) {\n      console.log('Service Worker registration failed:', error);\n    });\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Web app manifest\"}),`\n`,(0,n.jsx)(e.p,{children:\"The web app manifest is a JSON file that provides metadata about the application (name, icons, start URL, etc.) and allows it to be installed on the user's home screen.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"name\": \"My PWA\",\n  \"short_name\": \"PWA\",\n  \"start_url\": \"/index.html\",\n  \"display\": \"standalone\",\n  \"background_color\": \"#ffffff\",\n  \"theme_color\": \"#000000\",\n  \"icons\": [\n    {\n      \"src\": \"icon/lowres.webp\",\n      \"sizes\": \"48x48\",\n      \"type\": \"image/webp\"\n    },\n    {\n      \"src\": \"icon/hd_hi.ico\",\n      \"sizes\": \"72x72 96x96 128x128 256x256\"\n    }\n  ]\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"HTTPS\"}),`\n`,(0,n.jsx)(e.p,{children:\"PWAs must be served over HTTPS to ensure security and privacy. This is a requirement for service workers and other advanced web features.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Improved performance\"}),\": PWAs load faster and provide a smoother user experience.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Increased engagement\"}),\": Features like push notifications and home screen installation help keep users engaged.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Cost-effective\"}),\": Developing a PWA can be more cost-effective than building separate native apps for different platforms.\"]}),`\n`]}),`\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://developers.google.com/web/progressive-web-apps\",children:\"Google Developers: Progressive Web Apps\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps\",children:\"MDN Web Docs: Progressive web apps (PWAs)\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://web.dev/what-are-pwas/\",children:\"Web.dev: What are Progressive Web Apps?\"})}),`\n`]})]})}function d(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return k(W);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-progressive-web-applications-pwas/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-progressive-web-applications-pwas/zh-CN.json
index 4969061b0..af143522b 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-progressive-web-applications-pwas/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-progressive-web-applications-pwas/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-progressive-web-applications-pwas/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var m=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),P=(r,n)=>{for(var i in n)c(r,i,{get:n[i],enumerable:!0})},o=(r,n,i,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of p(n))!b.call(r,l)&&l!==i&&c(r,l,{get:()=>n[l],enumerable:!(h=g(n,l))||h.enumerable});return r};var f=(r,n,i)=>(i=r!=null?a(W(r)):{},o(n||!r||!r.__esModule?c(i,\"default\",{value:r,enumerable:!0}):i,r)),u=r=>o(c({},\"__esModule\",{value:!0}),r);var t=m((S,s)=>{s.exports=_jsx_runtime});var w={};P(w,{default:()=>_,frontmatter:()=>v});var e=f(t()),v={title:\"\\u4EC0\\u4E48\\u662F\\u6E10\\u8FDB\\u5F0F Web \\u5E94\\u7528\\u7A0B\\u5E8F (PWA)\\uFF1F\"};function d(r){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",h4:\"h4\",pre:\"pre\",code:\"code\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6E10\\u8FDB\\u5F0F Web \\u5E94\\u7528\\u7A0B\\u5E8F (PWA) \\u662F\\u4F7F\\u7528\\u73B0\\u4EE3 Web \\u529F\\u80FD\\u4E3A\\u7528\\u6237\\u63D0\\u4F9B\\u7C7B\\u4F3C\\u5E94\\u7528\\u7A0B\\u5E8F\\u4F53\\u9A8C\\u7684 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\\u5B83\\u4EEC\\u53EF\\u9760\\u3001\\u5FEB\\u901F\\u4E14\\u5F15\\u4EBA\\u5165\\u80DC\\u3002PWA \\u53EF\\u4EE5\\u79BB\\u7EBF\\u5DE5\\u4F5C\\u3001\\u53D1\\u9001\\u63A8\\u9001\\u901A\\u77E5\\uFF0C\\u5E76\\u5B89\\u88C5\\u5728\\u7528\\u6237\\u7684 home \\u5C4F\\u5E55\\u4E0A\\u3002\\u5B83\\u4EEC\\u5229\\u7528\\u670D\\u52A1\\u5DE5\\u4F5C\\u8005\\u3001Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u6E05\\u5355\\u548C HTTPS \\u7B49\\u6280\\u672F\\u6765\\u63D0\\u4F9B\\u8FD9\\u4E9B\\u529F\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u6E10\\u8FDB\\u5F0F Web \\u5E94\\u7528\\u7A0B\\u5E8F (PWA)\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6E10\\u8FDB\\u5F0F Web \\u5E94\\u7528\\u7A0B\\u5E8F (PWA) \\u662F\\u7ED3\\u5408\\u4E86 Web \\u548C\\u79FB\\u52A8\\u5E94\\u7528\\u7A0B\\u5E8F\\u4F18\\u70B9\\u7684 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\\u5B83\\u4EEC\\u4F7F\\u7528 HTML\\u3001CSS \\u548C JavaScript \\u7B49\\u6807\\u51C6 Web \\u6280\\u672F\\u6784\\u5EFA\\uFF0C\\u4F46\\u63D0\\u4F9B\\u4E86\\u589E\\u5F3A\\u7684\\u529F\\u80FD\\uFF0C\\u4F7F\\u5176\\u611F\\u89C9\\u50CF\\u539F\\u751F\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5173\\u952E\\u7279\\u5F81\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6E10\\u8FDB\\u5F0F\"}),\"\\uFF1A\\u5B83\\u4EEC\\u9002\\u7528\\u4E8E\\u6BCF\\u4E2A\\u7528\\u6237\\uFF0C\\u65E0\\u8BBA\\u6D4F\\u89C8\\u5668\\u9009\\u62E9\\u5982\\u4F55\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u4EE5\\u6E10\\u8FDB\\u5F0F\\u589E\\u5F3A\\u4E3A\\u6838\\u5FC3\\u539F\\u5219\\u6784\\u5EFA\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u54CD\\u5E94\\u5F0F\"}),\"\\uFF1A\\u5B83\\u4EEC\\u9002\\u5408\\u4EFB\\u4F55\\u5916\\u5F62\\u5C3A\\u5BF8\\uFF0C\\u65E0\\u8BBA\\u662F\\u684C\\u9762\\u3001\\u79FB\\u52A8\\u8BBE\\u5907\\u8FD8\\u662F\\u5E73\\u677F\\u7535\\u8111\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u72EC\\u7ACB\\u4E8E\\u8FDE\\u63A5\"}),\"\\uFF1A\\u5B83\\u4EEC\\u53EF\\u4EE5\\u4F7F\\u7528\\u670D\\u52A1\\u5DE5\\u4F5C\\u8005\\u79BB\\u7EBF\\u6216\\u5728\\u4F4E\\u8D28\\u91CF\\u7F51\\u7EDC\\u4E0A\\u5DE5\\u4F5C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7C7B\\u4F3C\\u5E94\\u7528\\u7A0B\\u5E8F\"}),\"\\uFF1A\\u5B83\\u4EEC\\u901A\\u8FC7\\u7C7B\\u4F3C\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4EA4\\u4E92\\u548C\\u5BFC\\u822A\\u4E3A\\u7528\\u6237\\u63D0\\u4F9B\\u7C7B\\u4F3C\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4F53\\u9A8C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u65B0\\u9C9C\"}),\"\\uFF1A\\u7531\\u4E8E\\u670D\\u52A1\\u5DE5\\u4F5C\\u8005\\u66F4\\u65B0\\u8FC7\\u7A0B\\uFF0C\\u5B83\\u4EEC\\u59CB\\u7EC8\\u4FDD\\u6301\\u6700\\u65B0\\u72B6\\u6001\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B89\\u5168\"}),\"\\uFF1A\\u5B83\\u4EEC\\u901A\\u8FC7 HTTPS \\u63D0\\u4F9B\\uFF0C\\u4EE5\\u9632\\u6B62\\u7AA5\\u63A2\\u5E76\\u786E\\u4FDD\\u5185\\u5BB9\\u672A\\u88AB\\u7BE1\\u6539\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u53D1\\u73B0\"}),\"\\uFF1A\\u7531\\u4E8E W3C \\u6E05\\u5355\\u548C\\u670D\\u52A1\\u5DE5\\u4F5C\\u8005\\u6CE8\\u518C\\uFF0C\\u5B83\\u4EEC\\u88AB\\u6807\\u8BC6\\u4E3A\\u201C\\u5E94\\u7528\\u7A0B\\u5E8F\\u201D\\uFF0C\\u4ECE\\u800C\\u5141\\u8BB8\\u641C\\u7D22\\u5F15\\u64CE\\u627E\\u5230\\u5B83\\u4EEC\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u91CD\\u65B0\\u53C2\\u4E0E\"}),\"\\uFF1A\\u5B83\\u4EEC\\u53EF\\u4EE5\\u53D1\\u9001\\u63A8\\u9001\\u901A\\u77E5\\u4EE5\\u91CD\\u65B0\\u5438\\u5F15\\u7528\\u6237\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u5B89\\u88C5\"}),\"\\uFF1A\\u5B83\\u4EEC\\u5141\\u8BB8\\u7528\\u6237\\u5C06\\u4ED6\\u4EEC\\u8BA4\\u4E3A\\u6700\\u6709\\u7528\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u6DFB\\u52A0\\u5230\\u4ED6\\u4EEC\\u7684 home \\u5C4F\\u5E55\\uFF0C\\u800C\\u65E0\\u9700\\u9EBB\\u70E6\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u5546\\u5E97\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u94FE\\u63A5\"}),\"\\uFF1A\\u5B83\\u4EEC\\u53EF\\u4EE5\\u901A\\u8FC7 URL \\u8F7B\\u677E\\u5171\\u4EAB\\uFF0C\\u5E76\\u4E14\\u4E0D\\u9700\\u8981\\u590D\\u6742\\u7684\\u5B89\\u88C5\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6838\\u5FC3\\u6280\\u672F\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u670D\\u52A1\\u5DE5\\u4F5C\\u8005\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u670D\\u52A1\\u5DE5\\u4F5C\\u8005\\u662F\\u5728\\u540E\\u53F0\\u8FD0\\u884C\\u7684\\u811A\\u672C\\uFF0C\\u4E0E\\u7F51\\u9875\\u5206\\u5F00\\uFF0C\\u652F\\u6301\\u79BB\\u7EBF\\u529F\\u80FD\\u3001\\u540E\\u53F0\\u540C\\u6B65\\u548C\\u63A8\\u9001\\u901A\\u77E5\\u7B49\\u529F\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`if ('serviceWorker' in navigator) {\n  navigator.serviceWorker\n    .register('/service-worker.js')\n    .then(function (registration) {\n      console.log('Service Worker registered with scope:', registration.scope);\n    })\n    .catch(function (error) {\n      console.log('Service Worker registration failed:', error);\n    });\n}\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u6E05\\u5355\"}),`\n`,(0,e.jsx)(n.p,{children:\"Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u6E05\\u5355\\u662F\\u4E00\\u4E2A JSON \\u6587\\u4EF6\\uFF0C\\u5B83\\u63D0\\u4F9B\\u6709\\u5173\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u5143\\u6570\\u636E\\uFF08\\u540D\\u79F0\\u3001\\u56FE\\u6807\\u3001\\u542F\\u52A8 URL \\u7B49\\uFF09\\uFF0C\\u5E76\\u5141\\u8BB8\\u5C06\\u5176\\u5B89\\u88C5\\u5728\\u7528\\u6237\\u7684 home \\u5C4F\\u5E55\\u4E0A\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"name\": \"My PWA\",\n  \"short_name\": \"PWA\",\n  \"start_url\": \"/index.html\",\n  \"display\": \"standalone\",\n  \"background_color\": \"#ffffff\",\n  \"theme_color\": \"#000000\",\n  \"icons\": [\n    {\n      \"src\": \"icon/lowres.webp\",\n      \"sizes\": \"48x48\",\n      \"type\": \"image/webp\"\n    },\n    {\n      \"src\": \"icon/hd_hi.ico\",\n      \"sizes\": \"72x72 96x96 128x128 256x256\"\n    }\n  ]\n}\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"HTTPS\"}),`\n`,(0,e.jsx)(n.p,{children:\"PWA \\u5FC5\\u987B\\u901A\\u8FC7 HTTPS \\u63D0\\u4F9B\\u4EE5\\u786E\\u4FDD\\u5B89\\u5168\\u6027\\u548C\\u9690\\u79C1\\u3002\\u8FD9\\u662F\\u670D\\u52A1\\u5DE5\\u4F5C\\u8005\\u548C\\u5176\\u4ED6\\u9AD8\\u7EA7 Web \\u529F\\u80FD\\u7684\\u8981\\u6C42\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F18\\u52BF\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6539\\u8FDB\\u7684\\u6027\\u80FD\"}),\"\\uFF1APWA \\u52A0\\u8F7D\\u901F\\u5EA6\\u66F4\\u5FEB\\uFF0C\\u5E76\\u63D0\\u4F9B\\u66F4\\u6D41\\u7545\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u589E\\u52A0\\u7684\\u53C2\\u4E0E\\u5EA6\"}),\"\\uFF1A\\u63A8\\u9001\\u901A\\u77E5\\u548C home \\u5C4F\\u5E55\\u5B89\\u88C5\\u7B49\\u529F\\u80FD\\u6709\\u52A9\\u4E8E\\u4FDD\\u6301\\u7528\\u6237\\u7684\\u53C2\\u4E0E\\u5EA6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5177\\u6709\\u6210\\u672C\\u6548\\u76CA\"}),\"\\uFF1A\\u5F00\\u53D1 PWA \\u53EF\\u80FD\\u6BD4\\u4E3A\\u4E0D\\u540C\\u5E73\\u53F0\\u6784\\u5EFA\\u5355\\u72EC\\u7684\\u672C\\u5730\\u5E94\\u7528\\u7A0B\\u5E8F\\u66F4\\u5177\\u6210\\u672C\\u6548\\u76CA\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developers.google.com/web/progressive-web-apps\",children:\"Google Developers: Progressive Web Apps\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps\",children:\"MDN Web Docs: Progressive web apps (PWAs)\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://web.dev/what-are-pwas/\",children:\"Web.dev: What are Progressive Web Apps?\"})}),`\n`]})]})}function x(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(d,r)})):d(r)}var _=x;return u(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var g=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var P=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),f=(r,n)=>{for(var i in n)c(r,i,{get:n[i],enumerable:!0})},o=(r,n,i,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of W(n))!m.call(r,l)&&l!==i&&c(r,l,{get:()=>n[l],enumerable:!(h=p(n,l))||h.enumerable});return r};var u=(r,n,i)=>(i=r!=null?g(b(r)):{},o(n||!r||!r.__esModule?c(i,\"default\",{value:r,enumerable:!0}):i,r)),v=r=>o(c({},\"__esModule\",{value:!0}),r);var t=P((A,s)=>{s.exports=_jsx_runtime});var _={};f(_,{default:()=>a,frontmatter:()=>x});var e=u(t()),x={title:\"\\u4EC0\\u4E48\\u662F\\u6E10\\u8FDB\\u5F0F Web \\u5E94\\u7528\\u7A0B\\u5E8F (PWA)\\uFF1F\"};function d(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6E10\\u8FDB\\u5F0F Web \\u5E94\\u7528\\u7A0B\\u5E8F (PWA) \\u662F\\u4F7F\\u7528\\u73B0\\u4EE3 Web \\u529F\\u80FD\\u4E3A\\u7528\\u6237\\u63D0\\u4F9B\\u7C7B\\u4F3C\\u5E94\\u7528\\u7A0B\\u5E8F\\u4F53\\u9A8C\\u7684 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\\u5B83\\u4EEC\\u53EF\\u9760\\u3001\\u5FEB\\u901F\\u4E14\\u5F15\\u4EBA\\u5165\\u80DC\\u3002PWA \\u53EF\\u4EE5\\u79BB\\u7EBF\\u5DE5\\u4F5C\\u3001\\u53D1\\u9001\\u63A8\\u9001\\u901A\\u77E5\\uFF0C\\u5E76\\u5B89\\u88C5\\u5728\\u7528\\u6237\\u7684 home \\u5C4F\\u5E55\\u4E0A\\u3002\\u5B83\\u4EEC\\u5229\\u7528\\u670D\\u52A1\\u5DE5\\u4F5C\\u8005\\u3001Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u6E05\\u5355\\u548C HTTPS \\u7B49\\u6280\\u672F\\u6765\\u63D0\\u4F9B\\u8FD9\\u4E9B\\u529F\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u6E10\\u8FDB\\u5F0F Web \\u5E94\\u7528\\u7A0B\\u5E8F (PWA)\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6E10\\u8FDB\\u5F0F Web \\u5E94\\u7528\\u7A0B\\u5E8F (PWA) \\u662F\\u7ED3\\u5408\\u4E86 Web \\u548C\\u79FB\\u52A8\\u5E94\\u7528\\u7A0B\\u5E8F\\u4F18\\u70B9\\u7684 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\\u5B83\\u4EEC\\u4F7F\\u7528 HTML\\u3001CSS \\u548C JavaScript \\u7B49\\u6807\\u51C6 Web \\u6280\\u672F\\u6784\\u5EFA\\uFF0C\\u4F46\\u63D0\\u4F9B\\u4E86\\u589E\\u5F3A\\u7684\\u529F\\u80FD\\uFF0C\\u4F7F\\u5176\\u611F\\u89C9\\u50CF\\u539F\\u751F\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5173\\u952E\\u7279\\u5F81\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6E10\\u8FDB\\u5F0F\"}),\"\\uFF1A\\u5B83\\u4EEC\\u9002\\u7528\\u4E8E\\u6BCF\\u4E2A\\u7528\\u6237\\uFF0C\\u65E0\\u8BBA\\u6D4F\\u89C8\\u5668\\u9009\\u62E9\\u5982\\u4F55\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u4EE5\\u6E10\\u8FDB\\u5F0F\\u589E\\u5F3A\\u4E3A\\u6838\\u5FC3\\u539F\\u5219\\u6784\\u5EFA\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u54CD\\u5E94\\u5F0F\"}),\"\\uFF1A\\u5B83\\u4EEC\\u9002\\u5408\\u4EFB\\u4F55\\u5916\\u5F62\\u5C3A\\u5BF8\\uFF0C\\u65E0\\u8BBA\\u662F\\u684C\\u9762\\u3001\\u79FB\\u52A8\\u8BBE\\u5907\\u8FD8\\u662F\\u5E73\\u677F\\u7535\\u8111\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u72EC\\u7ACB\\u4E8E\\u8FDE\\u63A5\"}),\"\\uFF1A\\u5B83\\u4EEC\\u53EF\\u4EE5\\u4F7F\\u7528\\u670D\\u52A1\\u5DE5\\u4F5C\\u8005\\u79BB\\u7EBF\\u6216\\u5728\\u4F4E\\u8D28\\u91CF\\u7F51\\u7EDC\\u4E0A\\u5DE5\\u4F5C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7C7B\\u4F3C\\u5E94\\u7528\\u7A0B\\u5E8F\"}),\"\\uFF1A\\u5B83\\u4EEC\\u901A\\u8FC7\\u7C7B\\u4F3C\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4EA4\\u4E92\\u548C\\u5BFC\\u822A\\u4E3A\\u7528\\u6237\\u63D0\\u4F9B\\u7C7B\\u4F3C\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4F53\\u9A8C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u65B0\\u9C9C\"}),\"\\uFF1A\\u7531\\u4E8E\\u670D\\u52A1\\u5DE5\\u4F5C\\u8005\\u66F4\\u65B0\\u8FC7\\u7A0B\\uFF0C\\u5B83\\u4EEC\\u59CB\\u7EC8\\u4FDD\\u6301\\u6700\\u65B0\\u72B6\\u6001\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B89\\u5168\"}),\"\\uFF1A\\u5B83\\u4EEC\\u901A\\u8FC7 HTTPS \\u63D0\\u4F9B\\uFF0C\\u4EE5\\u9632\\u6B62\\u7AA5\\u63A2\\u5E76\\u786E\\u4FDD\\u5185\\u5BB9\\u672A\\u88AB\\u7BE1\\u6539\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u53D1\\u73B0\"}),\"\\uFF1A\\u7531\\u4E8E W3C \\u6E05\\u5355\\u548C\\u670D\\u52A1\\u5DE5\\u4F5C\\u8005\\u6CE8\\u518C\\uFF0C\\u5B83\\u4EEC\\u88AB\\u6807\\u8BC6\\u4E3A\\u201C\\u5E94\\u7528\\u7A0B\\u5E8F\\u201D\\uFF0C\\u4ECE\\u800C\\u5141\\u8BB8\\u641C\\u7D22\\u5F15\\u64CE\\u627E\\u5230\\u5B83\\u4EEC\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u91CD\\u65B0\\u53C2\\u4E0E\"}),\"\\uFF1A\\u5B83\\u4EEC\\u53EF\\u4EE5\\u53D1\\u9001\\u63A8\\u9001\\u901A\\u77E5\\u4EE5\\u91CD\\u65B0\\u5438\\u5F15\\u7528\\u6237\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u5B89\\u88C5\"}),\"\\uFF1A\\u5B83\\u4EEC\\u5141\\u8BB8\\u7528\\u6237\\u5C06\\u4ED6\\u4EEC\\u8BA4\\u4E3A\\u6700\\u6709\\u7528\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u6DFB\\u52A0\\u5230\\u4ED6\\u4EEC\\u7684 home \\u5C4F\\u5E55\\uFF0C\\u800C\\u65E0\\u9700\\u9EBB\\u70E6\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u5546\\u5E97\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u94FE\\u63A5\"}),\"\\uFF1A\\u5B83\\u4EEC\\u53EF\\u4EE5\\u901A\\u8FC7 URL \\u8F7B\\u677E\\u5171\\u4EAB\\uFF0C\\u5E76\\u4E14\\u4E0D\\u9700\\u8981\\u590D\\u6742\\u7684\\u5B89\\u88C5\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6838\\u5FC3\\u6280\\u672F\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u670D\\u52A1\\u5DE5\\u4F5C\\u8005\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u670D\\u52A1\\u5DE5\\u4F5C\\u8005\\u662F\\u5728\\u540E\\u53F0\\u8FD0\\u884C\\u7684\\u811A\\u672C\\uFF0C\\u4E0E\\u7F51\\u9875\\u5206\\u5F00\\uFF0C\\u652F\\u6301\\u79BB\\u7EBF\\u529F\\u80FD\\u3001\\u540E\\u53F0\\u540C\\u6B65\\u548C\\u63A8\\u9001\\u901A\\u77E5\\u7B49\\u529F\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`if ('serviceWorker' in navigator) {\n  navigator.serviceWorker\n    .register('/service-worker.js')\n    .then(function (registration) {\n      console.log('Service Worker registered with scope:', registration.scope);\n    })\n    .catch(function (error) {\n      console.log('Service Worker registration failed:', error);\n    });\n}\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u6E05\\u5355\"}),`\n`,(0,e.jsx)(n.p,{children:\"Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u6E05\\u5355\\u662F\\u4E00\\u4E2A JSON \\u6587\\u4EF6\\uFF0C\\u5B83\\u63D0\\u4F9B\\u6709\\u5173\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u5143\\u6570\\u636E\\uFF08\\u540D\\u79F0\\u3001\\u56FE\\u6807\\u3001\\u542F\\u52A8 URL \\u7B49\\uFF09\\uFF0C\\u5E76\\u5141\\u8BB8\\u5C06\\u5176\\u5B89\\u88C5\\u5728\\u7528\\u6237\\u7684 home \\u5C4F\\u5E55\\u4E0A\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"name\": \"My PWA\",\n  \"short_name\": \"PWA\",\n  \"start_url\": \"/index.html\",\n  \"display\": \"standalone\",\n  \"background_color\": \"#ffffff\",\n  \"theme_color\": \"#000000\",\n  \"icons\": [\n    {\n      \"src\": \"icon/lowres.webp\",\n      \"sizes\": \"48x48\",\n      \"type\": \"image/webp\"\n    },\n    {\n      \"src\": \"icon/hd_hi.ico\",\n      \"sizes\": \"72x72 96x96 128x128 256x256\"\n    }\n  ]\n}\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"HTTPS\"}),`\n`,(0,e.jsx)(n.p,{children:\"PWA \\u5FC5\\u987B\\u901A\\u8FC7 HTTPS \\u63D0\\u4F9B\\u4EE5\\u786E\\u4FDD\\u5B89\\u5168\\u6027\\u548C\\u9690\\u79C1\\u3002\\u8FD9\\u662F\\u670D\\u52A1\\u5DE5\\u4F5C\\u8005\\u548C\\u5176\\u4ED6\\u9AD8\\u7EA7 Web \\u529F\\u80FD\\u7684\\u8981\\u6C42\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F18\\u52BF\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6539\\u8FDB\\u7684\\u6027\\u80FD\"}),\"\\uFF1APWA \\u52A0\\u8F7D\\u901F\\u5EA6\\u66F4\\u5FEB\\uFF0C\\u5E76\\u63D0\\u4F9B\\u66F4\\u6D41\\u7545\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u589E\\u52A0\\u7684\\u53C2\\u4E0E\\u5EA6\"}),\"\\uFF1A\\u63A8\\u9001\\u901A\\u77E5\\u548C home \\u5C4F\\u5E55\\u5B89\\u88C5\\u7B49\\u529F\\u80FD\\u6709\\u52A9\\u4E8E\\u4FDD\\u6301\\u7528\\u6237\\u7684\\u53C2\\u4E0E\\u5EA6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5177\\u6709\\u6210\\u672C\\u6548\\u76CA\"}),\"\\uFF1A\\u5F00\\u53D1 PWA \\u53EF\\u80FD\\u6BD4\\u4E3A\\u4E0D\\u540C\\u5E73\\u53F0\\u6784\\u5EFA\\u5355\\u72EC\\u7684\\u672C\\u5730\\u5E94\\u7528\\u7A0B\\u5E8F\\u66F4\\u5177\\u6210\\u672C\\u6548\\u76CA\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developers.google.com/web/progressive-web-apps\",children:\"Google Developers: Progressive Web Apps\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps\",children:\"MDN Web Docs: Progressive web apps (PWAs)\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://web.dev/what-are-pwas/\",children:\"Web.dev: What are Progressive Web Apps?\"})}),`\n`]})]})}function a(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(d,{...r})}):d(r)}return v(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-promises-and-how-do-they-work/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-promises-and-how-do-they-work/en-US.json
index 24b29f146..834d508fa 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-promises-and-how-do-they-work/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-promises-and-how-do-they-work/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-promises-and-how-do-they-work/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),v=(r,e)=>{for(var o in e)c(r,o,{get:e[o],enumerable:!0})},l=(r,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!f.call(r,s)&&s!==o&&c(r,s,{get:()=>e[s],enumerable:!(i=u(e,s))||i.enumerable});return r};var j=(r,e,o)=>(o=r!=null?d(p(r)):{},l(e||!r||!r.__esModule?c(o,\"default\",{value:r,enumerable:!0}):o,r)),P=r=>l(c({},\"__esModule\",{value:!0}),r);var a=g((x,t)=>{t.exports=_jsx_runtime});var S={};v(S,{default:()=>y,frontmatter:()=>w});var n=j(a()),w={title:\"What are Promises and how do they work?\"};function h(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Promises in JavaScript are objects that represent the eventual completion (or failure) of an asynchronous operation and its resulting value. They have three states: \",(0,n.jsx)(e.code,{children:\"pending\"}),\", \",(0,n.jsx)(e.code,{children:\"fulfilled\"}),\", and \",(0,n.jsx)(e.code,{children:\"rejected\"}),\". You can handle the results of a promise using the \",(0,n.jsx)(e.code,{children:\".then()\"}),\" method for success and the \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" method for errors.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  // asynchronous operation\n  const success = true;\n  if (success) {\n    resolve('Success!');\n  } else {\n    reject('Error!');\n  }\n});\n\npromise\n  .then((result) => {\n    console.log(result); // 'Success!' (this will print)\n  })\n  .catch((error) => {\n    console.error(error); // 'Error!'\n  });\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are Promises and how do they work?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition\"}),`\n`,(0,n.jsx)(e.p,{children:\"Promises are a way to handle asynchronous operations in JavaScript. They provide a cleaner, more readable way to handle asynchronous code compared to traditional callback functions.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"States of a Promise\"}),`\n`,(0,n.jsx)(e.p,{children:\"A promise can be in one of three states:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Pending\"}),\": The initial state, neither fulfilled nor rejected.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Fulfilled\"}),\": The operation completed successfully.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Rejected\"}),\": The operation failed.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Creating a Promise\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You create a promise using the \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" constructor, which takes a function with two arguments: \",(0,n.jsx)(e.code,{children:\"resolve\"}),\" and \",(0,n.jsx)(e.code,{children:\"reject\"}),\". These are callbacks that you call to change the state of the promise.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  // asynchronous operation\n  const success = true;\n  if (success) {\n    resolve('Success!');\n  } else {\n    reject('Error!');\n  }\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Handling a Promise\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To handle the result of a promise, you use the \",(0,n.jsx)(e.code,{children:\".then()\"}),\" method for a successful outcome and the \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" method for an error.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  // asynchronous operation\n  const success = false;\n  if (success) {\n    resolve('Success!');\n  } else {\n    reject('Error!');\n  }\n});\n\npromise\n  .then((result) => {\n    console.log(result); // 'Success!'\n  })\n  .catch((error) => {\n    console.error(error); // 'Error!' (this will print)\n  });\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Chaining Promises\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Promises can be chained to handle multiple asynchronous operations in sequence. Each \",(0,n.jsx)(e.code,{children:\".then()\"}),\" returns a new promise, allowing for further chaining.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`new Promise((resolve, reject) => {\n  setTimeout(() => {\n    resolve('Promise 1 resolved after 1 second');\n  }, 1000);\n})\n  .then((result) => {\n    console.log(result);\n    return 'Another promise';\n  })\n  .then((anotherResult) => {\n    console.log(anotherResult);\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Combining Promises\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can use \",(0,n.jsx)(e.code,{children:\"Promise.all()\"}),\" to run multiple promises in parallel and wait for all of them to complete.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise1 = Promise.resolve('First');\nlet promise2 = Promise.resolve('Second');\nlet promise3 = new Promise((resolve, reject) => {\n  setTimeout(() => {\n    resolve('Third');\n  }, 2000);\n});\n\nPromise.all([promise1, promise2, promise3]).then((results) => {\n  console.log(results); // ['First', 'Second', 'Third']\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In the above example, while \",(0,n.jsx)(e.code,{children:\"promise1\"}),\" and \",(0,n.jsx)(e.code,{children:\"promise2\"}),\" resolve instantly, \",(0,n.jsx)(e.code,{children:\"Promise.all\"}),\" waits for \",(0,n.jsx)(e.code,{children:\"promise3\"}),\", which takes 2 seconds, before logging the results.\"]}),`\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/Web/JavaScript/Reference/Global_Objects/Promise\",children:\"MDN Web Docs: Promise\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/promise-basics\",children:\"JavaScript.info: Promises\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/ch11.md#promises\",children:\"You Don't Know JS: Promises\"})}),`\n`]})]})}function b(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(h,r)})):h(r)}var y=b;return P(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),P=(r,e)=>{for(var o in e)c(r,o,{get:e[o],enumerable:!0})},l=(r,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!g.call(r,s)&&s!==o&&c(r,s,{get:()=>e[s],enumerable:!(i=m(e,s))||i.enumerable});return r};var j=(r,e,o)=>(o=r!=null?u(f(r)):{},l(e||!r||!r.__esModule?c(o,\"default\",{value:r,enumerable:!0}):o,r)),w=r=>l(c({},\"__esModule\",{value:!0}),r);var h=v((T,t)=>{t.exports=_jsx_runtime});var b={};P(b,{default:()=>d,frontmatter:()=>y});var n=j(h()),y={title:\"What are Promises and how do they work?\"};function a(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Promises in JavaScript are objects that represent the eventual completion (or failure) of an asynchronous operation and its resulting value. They have three states: \",(0,n.jsx)(e.code,{children:\"pending\"}),\", \",(0,n.jsx)(e.code,{children:\"fulfilled\"}),\", and \",(0,n.jsx)(e.code,{children:\"rejected\"}),\". You can handle the results of a promise using the \",(0,n.jsx)(e.code,{children:\".then()\"}),\" method for success and the \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" method for errors.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  // asynchronous operation\n  const success = true;\n  if (success) {\n    resolve('Success!');\n  } else {\n    reject('Error!');\n  }\n});\n\npromise\n  .then((result) => {\n    console.log(result); // 'Success!' (this will print)\n  })\n  .catch((error) => {\n    console.error(error); // 'Error!'\n  });\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are Promises and how do they work?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition\"}),`\n`,(0,n.jsx)(e.p,{children:\"Promises are a way to handle asynchronous operations in JavaScript. They provide a cleaner, more readable way to handle asynchronous code compared to traditional callback functions.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"States of a Promise\"}),`\n`,(0,n.jsx)(e.p,{children:\"A promise can be in one of three states:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Pending\"}),\": The initial state, neither fulfilled nor rejected.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Fulfilled\"}),\": The operation completed successfully.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Rejected\"}),\": The operation failed.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Creating a Promise\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You create a promise using the \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" constructor, which takes a function with two arguments: \",(0,n.jsx)(e.code,{children:\"resolve\"}),\" and \",(0,n.jsx)(e.code,{children:\"reject\"}),\". These are callbacks that you call to change the state of the promise.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  // asynchronous operation\n  const success = true;\n  if (success) {\n    resolve('Success!');\n  } else {\n    reject('Error!');\n  }\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Handling a Promise\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To handle the result of a promise, you use the \",(0,n.jsx)(e.code,{children:\".then()\"}),\" method for a successful outcome and the \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" method for an error.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  // asynchronous operation\n  const success = false;\n  if (success) {\n    resolve('Success!');\n  } else {\n    reject('Error!');\n  }\n});\n\npromise\n  .then((result) => {\n    console.log(result); // 'Success!'\n  })\n  .catch((error) => {\n    console.error(error); // 'Error!' (this will print)\n  });\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Chaining Promises\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Promises can be chained to handle multiple asynchronous operations in sequence. Each \",(0,n.jsx)(e.code,{children:\".then()\"}),\" returns a new promise, allowing for further chaining.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`new Promise((resolve, reject) => {\n  setTimeout(() => {\n    resolve('Promise 1 resolved after 1 second');\n  }, 1000);\n})\n  .then((result) => {\n    console.log(result);\n    return 'Another promise';\n  })\n  .then((anotherResult) => {\n    console.log(anotherResult);\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Combining Promises\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can use \",(0,n.jsx)(e.code,{children:\"Promise.all()\"}),\" to run multiple promises in parallel and wait for all of them to complete.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise1 = Promise.resolve('First');\nlet promise2 = Promise.resolve('Second');\nlet promise3 = new Promise((resolve, reject) => {\n  setTimeout(() => {\n    resolve('Third');\n  }, 2000);\n});\n\nPromise.all([promise1, promise2, promise3]).then((results) => {\n  console.log(results); // ['First', 'Second', 'Third']\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In the above example, while \",(0,n.jsx)(e.code,{children:\"promise1\"}),\" and \",(0,n.jsx)(e.code,{children:\"promise2\"}),\" resolve instantly, \",(0,n.jsx)(e.code,{children:\"Promise.all\"}),\" waits for \",(0,n.jsx)(e.code,{children:\"promise3\"}),\", which takes 2 seconds, before logging the results.\"]}),`\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/Web/JavaScript/Reference/Global_Objects/Promise\",children:\"MDN Web Docs: Promise\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/promise-basics\",children:\"JavaScript.info: Promises\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/ch11.md#promises\",children:\"You Don't Know JS: Promises\"})}),`\n`]})]})}function d(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(a,{...r})}):a(r)}return w(b);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-promises-and-how-do-they-work/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-promises-and-how-do-they-work/zh-CN.json
index bb0cfe43a..02fbf9cae 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-promises-and-how-do-they-work/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-promises-and-how-do-they-work/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-promises-and-how-do-they-work/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),j=(r,e)=>{for(var o in e)c(r,o,{get:e[o],enumerable:!0})},l=(r,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of u(e))!P.call(r,s)&&s!==o&&c(r,s,{get:()=>e[s],enumerable:!(i=m(e,s))||i.enumerable});return r};var v=(r,e,o)=>(o=r!=null?a(p(r)):{},l(e||!r||!r.__esModule?c(o,\"default\",{value:r,enumerable:!0}):o,r)),f=r=>l(c({},\"__esModule\",{value:!0}),r);var h=g((D,t)=>{t.exports=_jsx_runtime});var x={};j(x,{default:()=>w,frontmatter:()=>S});var n=v(h()),S={title:\"\\u4EC0\\u4E48\\u662F Promise \\u4EE5\\u53CA\\u5B83\\u4EEC\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"};function d(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684 Promise \\u662F\\u8868\\u793A\\u5F02\\u6B65\\u64CD\\u4F5C\\u6700\\u7EC8\\u5B8C\\u6210\\uFF08\\u6216\\u5931\\u8D25\\uFF09\\u53CA\\u5176\\u7ED3\\u679C\\u503C\\u7684\\u5BF9\\u8C61\\u3002\\u5B83\\u4EEC\\u6709\\u4E09\\u79CD\\u72B6\\u6001\\uFF1A\",(0,n.jsx)(e.code,{children:\"pending\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"fulfilled\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"rejected\"}),\"\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".then()\"}),\" \\u65B9\\u6CD5\\u5904\\u7406 Promise \\u7684\\u7ED3\\u679C\\u4EE5\\u83B7\\u53D6\\u6210\\u529F\\u7684\\u7ED3\\u679C\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" \\u65B9\\u6CD5\\u5904\\u7406\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  // asynchronous operation\n  const success = true;\n  if (success) {\n    resolve('Success!');\n  } else {\n    reject('Error!');\n  }\n});\n\npromise\n  .then((result) => {\n    console.log(result); // 'Success!' (this will print)\n  })\n  .catch((error) => {\n    console.error(error); // 'Error!'\n  });\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F Promise \\u4EE5\\u53CA\\u5B83\\u4EEC\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,n.jsx)(e.p,{children:\"Promise \\u662F\\u4E00\\u79CD\\u5728 JavaScript \\u4E2D\\u5904\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u7684\\u65B9\\u5F0F\\u3002\\u4E0E\\u4F20\\u7EDF\\u7684 callback \\u51FD\\u6570\\u76F8\\u6BD4\\uFF0C\\u5B83\\u4EEC\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u6E05\\u6670\\u3001\\u66F4\\u6613\\u8BFB\\u7684\\u65B9\\u5F0F\\u6765\\u5904\\u7406\\u5F02\\u6B65\\u4EE3\\u7801\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Promise \\u7684\\u72B6\\u6001\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E00\\u4E2A Promise \\u53EF\\u4EE5\\u5904\\u4E8E\\u4EE5\\u4E0B\\u4E09\\u79CD\\u72B6\\u6001\\u4E4B\\u4E00\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Pending\"}),\"\\uFF1A\\u521D\\u59CB\\u72B6\\u6001\\uFF0C\\u65E2\\u672A\\u5B8C\\u6210\\u4E5F\\u672A\\u62D2\\u7EDD\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Fulfilled\"}),\"\\uFF1A\\u64CD\\u4F5C\\u6210\\u529F\\u5B8C\\u6210\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Rejected\"}),\"\\uFF1A\\u64CD\\u4F5C\\u5931\\u8D25\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u521B\\u5EFA\\u4E00\\u4E2A Promise\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" \\u6784\\u9020\\u51FD\\u6570\\u521B\\u5EFA\\u4E00\\u4E2A Promise\\uFF0C\\u8BE5\\u6784\\u9020\\u51FD\\u6570\\u63A5\\u53D7\\u4E00\\u4E2A\\u5E26\\u6709\\u4E24\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\uFF1A\",(0,n.jsx)(e.code,{children:\"resolve\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"reject\"}),\"\\u3002\\u8FD9\\u4E9B\\u662F\\u60A8\\u7528\\u6765\\u66F4\\u6539 Promise \\u72B6\\u6001\\u7684\\u56DE\\u8C03\\u51FD\\u6570\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  // asynchronous operation\n  const success = true;\n  if (success) {\n    resolve('Success!');\n  } else {\n    reject('Error!');\n  }\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5904\\u7406 Promise\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u5904\\u7406 Promise \\u7684\\u7ED3\\u679C\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".then()\"}),\" \\u65B9\\u6CD5\\u6765\\u83B7\\u53D6\\u6210\\u529F\\u7684\\u7ED3\\u679C\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" \\u65B9\\u6CD5\\u6765\\u83B7\\u53D6\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  // asynchronous operation\n  const success = false;\n  if (success) {\n    resolve('Success!');\n  } else {\n    reject('Error!');\n  }\n});\n\npromise\n  .then((result) => {\n    console.log(result); // 'Success!'\n  })\n  .catch((error) => {\n    console.error(error); // 'Error!' (this will print)\n  });\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u94FE\\u5F0F Promise\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Promise \\u53EF\\u4EE5\\u94FE\\u63A5\\u8D77\\u6765\\u4EE5\\u6309\\u987A\\u5E8F\\u5904\\u7406\\u591A\\u4E2A\\u5F02\\u6B65\\u64CD\\u4F5C\\u3002\\u6BCF\\u4E2A \",(0,n.jsx)(e.code,{children:\".then()\"}),\" \\u90FD\\u4F1A\\u8FD4\\u56DE\\u4E00\\u4E2A\\u65B0\\u7684 Promise\\uFF0C\\u4ECE\\u800C\\u5141\\u8BB8\\u8FDB\\u4E00\\u6B65\\u94FE\\u63A5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`new Promise((resolve, reject) => {\n  setTimeout(() => {\n    resolve('Promise 1 resolved after 1 second');\n  }, 1000);\n})\n  .then((result) => {\n    console.log(result);\n    return 'Another promise';\n  })\n  .then((anotherResult) => {\n    console.log(anotherResult);\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7EC4\\u5408 Promise\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Promise.all()\"}),\" \\u5E76\\u884C\\u8FD0\\u884C\\u591A\\u4E2A promise\\uFF0C\\u5E76\\u7B49\\u5F85\\u5B83\\u4EEC\\u5168\\u90E8\\u5B8C\\u6210\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let promise1 = Promise.resolve('First');\nlet promise2 = Promise.resolve('Second');\nlet promise3 = new Promise((resolve, reject) => {\n  setTimeout(() => {\n    resolve('Third');\n  }, 2000);\n});\n\nPromise.all([promise1, promise2, promise3]).then((results) => {\n  console.log(results); // ['First', 'Second', 'Third']\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u4E0A\\u9762\\u7684\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u867D\\u7136 \",(0,n.jsx)(e.code,{children:\"promise1\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"promise2\"}),\" \\u7ACB\\u5373\\u5B8C\\u6210\\uFF0C\\u4F46 \",(0,n.jsx)(e.code,{children:\"Promise.all\"}),\" \\u4F1A\\u7B49\\u5F85 \",(0,n.jsx)(e.code,{children:\"promise3\"}),\"\\uFF0C\\u5B83\\u9700\\u8981 2 \\u79D2\\u949F\\uFF0C\\u7136\\u540E\\u624D\\u4F1A\\u8BB0\\u5F55\\u7ED3\\u679C\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Promise\",children:\"MDN Web Docs: Promise\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/promise-basics\",children:\"JavaScript.info: Promises\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/ch11.md#promises\",children:\"You Don't Know JS: Promises\"})}),`\n`]})]})}function b(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(d,r)})):d(r)}var w=b;return f(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var o in e)c(n,o,{get:e[o],enumerable:!0})},l=(n,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!v.call(n,s)&&s!==o&&c(n,s,{get:()=>e[s],enumerable:!(i=u(e,s))||i.enumerable});return n};var f=(n,e,o)=>(o=n!=null?m(P(n)):{},l(e||!n||!n.__esModule?c(o,\"default\",{value:n,enumerable:!0}):o,n)),S=n=>l(c({},\"__esModule\",{value:!0}),n);var h=g((_,t)=>{t.exports=_jsx_runtime});var b={};j(b,{default:()=>a,frontmatter:()=>w});var r=f(h()),w={title:\"\\u4EC0\\u4E48\\u662F Promise \\u4EE5\\u53CA\\u5B83\\u4EEC\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"};function d(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684 Promise \\u662F\\u8868\\u793A\\u5F02\\u6B65\\u64CD\\u4F5C\\u6700\\u7EC8\\u5B8C\\u6210\\uFF08\\u6216\\u5931\\u8D25\\uFF09\\u53CA\\u5176\\u7ED3\\u679C\\u503C\\u7684\\u5BF9\\u8C61\\u3002\\u5B83\\u4EEC\\u6709\\u4E09\\u79CD\\u72B6\\u6001\\uFF1A\",(0,r.jsx)(e.code,{children:\"pending\"}),\"\\u3001\",(0,r.jsx)(e.code,{children:\"fulfilled\"}),\" \\u548C \",(0,r.jsx)(e.code,{children:\"rejected\"}),\"\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\".then()\"}),\" \\u65B9\\u6CD5\\u5904\\u7406 Promise \\u7684\\u7ED3\\u679C\\u4EE5\\u83B7\\u53D6\\u6210\\u529F\\u7684\\u7ED3\\u679C\\uFF0C\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\".catch()\"}),\" \\u65B9\\u6CD5\\u5904\\u7406\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  // asynchronous operation\n  const success = true;\n  if (success) {\n    resolve('Success!');\n  } else {\n    reject('Error!');\n  }\n});\n\npromise\n  .then((result) => {\n    console.log(result); // 'Success!' (this will print)\n  })\n  .catch((error) => {\n    console.error(error); // 'Error!'\n  });\n`})}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F Promise \\u4EE5\\u53CA\\u5B83\\u4EEC\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,r.jsx)(e.p,{children:\"Promise \\u662F\\u4E00\\u79CD\\u5728 JavaScript \\u4E2D\\u5904\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u7684\\u65B9\\u5F0F\\u3002\\u4E0E\\u4F20\\u7EDF\\u7684 callback \\u51FD\\u6570\\u76F8\\u6BD4\\uFF0C\\u5B83\\u4EEC\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u6E05\\u6670\\u3001\\u66F4\\u6613\\u8BFB\\u7684\\u65B9\\u5F0F\\u6765\\u5904\\u7406\\u5F02\\u6B65\\u4EE3\\u7801\\u3002\"}),`\n`,(0,r.jsx)(e.h3,{children:\"Promise \\u7684\\u72B6\\u6001\"}),`\n`,(0,r.jsx)(e.p,{children:\"\\u4E00\\u4E2A Promise \\u53EF\\u4EE5\\u5904\\u4E8E\\u4EE5\\u4E0B\\u4E09\\u79CD\\u72B6\\u6001\\u4E4B\\u4E00\\uFF1A\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"Pending\"}),\"\\uFF1A\\u521D\\u59CB\\u72B6\\u6001\\uFF0C\\u65E2\\u672A\\u5B8C\\u6210\\u4E5F\\u672A\\u62D2\\u7EDD\\u3002\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"Fulfilled\"}),\"\\uFF1A\\u64CD\\u4F5C\\u6210\\u529F\\u5B8C\\u6210\\u3002\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"Rejected\"}),\"\\uFF1A\\u64CD\\u4F5C\\u5931\\u8D25\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u521B\\u5EFA\\u4E00\\u4E2A Promise\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"Promise\"}),\" \\u6784\\u9020\\u51FD\\u6570\\u521B\\u5EFA\\u4E00\\u4E2A Promise\\uFF0C\\u8BE5\\u6784\\u9020\\u51FD\\u6570\\u63A5\\u53D7\\u4E00\\u4E2A\\u5E26\\u6709\\u4E24\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\uFF1A\",(0,r.jsx)(e.code,{children:\"resolve\"}),\" \\u548C \",(0,r.jsx)(e.code,{children:\"reject\"}),\"\\u3002\\u8FD9\\u4E9B\\u662F\\u60A8\\u7528\\u6765\\u66F4\\u6539 Promise \\u72B6\\u6001\\u7684\\u56DE\\u8C03\\u51FD\\u6570\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  // asynchronous operation\n  const success = true;\n  if (success) {\n    resolve('Success!');\n  } else {\n    reject('Error!');\n  }\n});\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u5904\\u7406 Promise\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u8981\\u5904\\u7406 Promise \\u7684\\u7ED3\\u679C\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\".then()\"}),\" \\u65B9\\u6CD5\\u6765\\u83B7\\u53D6\\u6210\\u529F\\u7684\\u7ED3\\u679C\\uFF0C\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\".catch()\"}),\" \\u65B9\\u6CD5\\u6765\\u83B7\\u53D6\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let promise = new Promise((resolve, reject) => {\n  // asynchronous operation\n  const success = false;\n  if (success) {\n    resolve('Success!');\n  } else {\n    reject('Error!');\n  }\n});\n\npromise\n  .then((result) => {\n    console.log(result); // 'Success!'\n  })\n  .catch((error) => {\n    console.error(error); // 'Error!' (this will print)\n  });\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u94FE\\u5F0F Promise\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"Promise \\u53EF\\u4EE5\\u94FE\\u63A5\\u8D77\\u6765\\u4EE5\\u6309\\u987A\\u5E8F\\u5904\\u7406\\u591A\\u4E2A\\u5F02\\u6B65\\u64CD\\u4F5C\\u3002\\u6BCF\\u4E2A \",(0,r.jsx)(e.code,{children:\".then()\"}),\" \\u90FD\\u4F1A\\u8FD4\\u56DE\\u4E00\\u4E2A\\u65B0\\u7684 Promise\\uFF0C\\u4ECE\\u800C\\u5141\\u8BB8\\u8FDB\\u4E00\\u6B65\\u94FE\\u63A5\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`new Promise((resolve, reject) => {\n  setTimeout(() => {\n    resolve('Promise 1 resolved after 1 second');\n  }, 1000);\n})\n  .then((result) => {\n    console.log(result);\n    return 'Another promise';\n  })\n  .then((anotherResult) => {\n    console.log(anotherResult);\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u7EC4\\u5408 Promise\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" \\u5E76\\u884C\\u8FD0\\u884C\\u591A\\u4E2A promise\\uFF0C\\u5E76\\u7B49\\u5F85\\u5B83\\u4EEC\\u5168\\u90E8\\u5B8C\\u6210\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let promise1 = Promise.resolve('First');\nlet promise2 = Promise.resolve('Second');\nlet promise3 = new Promise((resolve, reject) => {\n  setTimeout(() => {\n    resolve('Third');\n  }, 2000);\n});\n\nPromise.all([promise1, promise2, promise3]).then((results) => {\n  console.log(results); // ['First', 'Second', 'Third']\n});\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u5728\\u4E0A\\u9762\\u7684\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u867D\\u7136 \",(0,r.jsx)(e.code,{children:\"promise1\"}),\" \\u548C \",(0,r.jsx)(e.code,{children:\"promise2\"}),\" \\u7ACB\\u5373\\u5B8C\\u6210\\uFF0C\\u4F46 \",(0,r.jsx)(e.code,{children:\"Promise.all\"}),\" \\u4F1A\\u7B49\\u5F85 \",(0,r.jsx)(e.code,{children:\"promise3\"}),\"\\uFF0C\\u5B83\\u9700\\u8981 2 \\u79D2\\u949F\\uFF0C\\u7136\\u540E\\u624D\\u4F1A\\u8BB0\\u5F55\\u7ED3\\u679C\\u3002\"]}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise\",children:\"MDN Web Docs: Promise\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://javascript.info/promise-basics\",children:\"JavaScript.info: Promises\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/ch11.md#promises\",children:\"You Don't Know JS: Promises\"})}),`\n`]})]})}function a(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(d,{...n})}):d(n)}return S(b);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-proxies-in-javascript-used-for/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-proxies-in-javascript-used-for/en-US.json
index 80d924797..bc61622a9 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-proxies-in-javascript-used-for/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-proxies-in-javascript-used-for/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-proxies-in-javascript-used-for/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var r in e)a(t,r,{get:e[r],enumerable:!0})},s=(t,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of g(e))!y.call(t,o)&&o!==r&&a(t,o,{get:()=>e[o],enumerable:!(i=h(e,o))||i.enumerable});return t};var b=(t,e,r)=>(r=t!=null?d(u(t)):{},s(e||!t||!t.__esModule?a(r,\"default\",{value:t,enumerable:!0}):r,t)),v=t=>s(a({},\"__esModule\",{value:!0}),t);var l=m((J,c)=>{c.exports=_jsx_runtime});var P={};f(P,{default:()=>w,frontmatter:()=>x});var n=b(l()),x={title:\"What are proxies in JavaScript used for?\"};function p(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",ul:\"ul\",li:\"li\",strong:\"strong\",hr:\"hr\",h3:\"h3\",h4:\"h4\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"In JavaScript, a proxy is an object that acts as an intermediary between an object and the code. Proxies are used to intercept and customize the fundamental operations of JavaScript objects, such as property access, assignment, function invocation, and more.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here's a basic example of using a \",(0,n.jsx)(e.code,{children:\"Proxy\"}),\" to log every property access:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const myObject = {\n  name: 'John',\n  age: 42,\n};\n\nconst handler = {\n  get: function (target, prop, receiver) {\n    console.log(\\`Someone accessed property \"\\${prop}\"\\`);\n    return target[prop];\n  },\n};\n\nconst proxiedObject = new Proxy(myObject, handler);\n\nconsole.log(proxiedObject.name);\n// Someone accessed property \"name\"\n// 'John'\n\nconsole.log(proxiedObject.age);\n// Someone accessed property \"age\"\n// 42\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Use cases include:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Property access interception\"}),\": Intercept and customize property access on an object.\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Property assignment validation\"}),\": Validate property values before they are set on the target object.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Logging and debugging\"}),\": Create wrappers for logging and debugging interactions with an object\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Creating reactive systems\"}),\": Trigger updates in other parts of your application when object properties change (data binding).\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Data transformation\"}),\": Transforming data being set or retrieved from an object.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Mocking and stubbing in tests\"}),\": Create mock or stub objects for testing purposes, allowing you to isolate dependencies and focus on the unit under test\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Function invocation interception\"}),\": Used to cache and return the result of frequently accessed methods if they involve network calls or computationally intensive logic, improving performance\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Dynamic property creation\"}),\": Useful for defining properties on-the-fly with default values and avoid storing redundant data in objects.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"JavaScript proxies\"}),`\n`,(0,n.jsx)(e.p,{children:\"In JavaScript, a proxy is an object that allows you to customize the behavior of another object, often referred to as the target object. Proxies can intercept and redefine various operations for the target object, such as property access, assignment, enumeration, function invocation, and more. This makes proxies a powerful tool for a variety of use cases, including but not limited to validation, logging, performance monitoring, and implementing advanced data structures.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here are some common use cases and examples of how proxies can be used in JavaScript:\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Property access interception\"}),`\n`,(0,n.jsx)(e.p,{children:\"Proxies can be used to intercept and customize property access on an object.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const target = {\n  message: 'Hello, world!',\n};\n\nconst handler = {\n  get: function (target, property) {\n    if (property in target) {\n      return target[property];\n    }\n\n    return \\`Property \\${property} does not exist.\\`;\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nconsole.log(proxy.message); // Hello, world!\nconsole.log(proxy.nonExistentProperty); // Property nonExistentProperty does not exist.\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Creating wrappers for logging and debugging\"}),`\n`,(0,n.jsx)(e.p,{children:\"This is useful for creating wrappers for logging and debugging interactions with an object.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const target = {\n  name: 'Alice',\n  age: 30,\n};\n\nconst handler = {\n  get: function (target, property) {\n    console.log(\\`Getting property \\${property}\\`);\n    return target[property];\n  },\n  set: function (target, property, value) {\n    console.log(\\`Setting property \\${property} to \\${value}\\`);\n    target[property] = value;\n    return true;\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nconsole.log(proxy.name); // Output: Getting property name\n//         Alice\nproxy.age = 31; // Output: Setting property age to 31\nconsole.log(proxy.age); // Output: Getting property age\n//         31\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Property assignment validation\"}),`\n`,(0,n.jsx)(e.p,{children:\"Proxies can be used to validate property values before they are set on the target object.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const target = {\n  age: 25,\n};\n\nconst handler = {\n  set: function (target, property, value) {\n    if (property === 'age' && typeof value !== 'number') {\n      throw new TypeError('Age must be a number');\n    }\n    target[property] = value;\n    return true;\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nproxy.age = 30; // Works fine\nproxy.age = 'thirty'; // Throws TypeError: Age must be a number\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Creating reactive systems\"}),`\n`,(0,n.jsx)(e.p,{children:\"Proxies are often used to trigger updates in other parts of your application when object properties change (data binding).\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A practical example is JavaScript frameworks like \",(0,n.jsx)(e.a,{href:\"https://vuejs.org/\",children:\"Vue.js\"}),\", where proxies are used to \",(0,n.jsx)(e.a,{href:\"https://vuejs.org/guide/extras/reactivity-in-depth.html\",children:\"create reactive systems that automatically update the UI when data changes\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const target = {\n  firstName: 'John',\n  lastName: 'Doe',\n};\n\nconst handler = {\n  set: function (target, property, value) {\n    console.log(\\`Property \\${property} set to \\${value}\\`);\n    target[property] = value;\n    // Automatically update the UI or perform other actions\n    return true;\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nproxy.firstName = 'Jane'; // Output: Property firstName set to Jane\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Other use cases for access interception include:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Mocking and stubbing\"}),\": Proxies can be used to create mock or stub objects for testing purposes, allowing you to isolate dependencies and focus on the unit under test.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Function invocation interception\"}),`\n`,(0,n.jsx)(e.p,{children:\"Proxies can intercept and customize function calls.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const target = function (name) {\n  return \\`Hello, \\${name}!\\`;\n};\n\nconst handler = {\n  apply: function (target, thisArg, argumentsList) {\n    console.log(\\`Called with arguments: \\${argumentsList}\\`);\n    return target.apply(thisArg, argumentsList);\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nconsole.log(proxy('Alice')); // Called with arguments: Alice\n// Hello, Alice!\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"This interception can be used to cache and return the result of frequently accessed methods if they involve network calls or computationally intensive logic, improving performance by reducing the number of requests/computations made.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Dynamic property creation\"}),`\n`,(0,n.jsx)(e.p,{children:\"Proxies can be used to dynamically create properties or methods on an object. This is useful for defining properties on-the-fly with default values and avoid storing redundant data in objects.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const target = {};\n\nconst handler = {\n  get: function (target, property) {\n    if (!(property in target)) {\n      target[property] = \\`Dynamic property \\${property}\\`;\n    }\n    return target[property];\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nconsole.log(proxy.newProp); // Output: Dynamic property newProp\nconsole.log(proxy.anotherProp); // Output: Dynamic property anotherProp\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Implementing object relational mappers (ORMs)\"}),`\n`,(0,n.jsx)(e.p,{children:\"Proxies can be used to create objects for database records by intercepting property access to lazily load data from the database. This provides a more object-oriented interface to interact with a database.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Real world use cases\"}),`\n`,(0,n.jsx)(e.p,{children:\"Many popular libraries, especially state management solutions, are built on top of JavaScript proxies:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.a,{href:\"https://vuejs.org/\",children:\"Vue.js\"})}),\": Vue.js is a progressive framework for building user interfaces. In Vue 3, proxies are used extensively to implement the reactivity system.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.a,{href:\"https://mobx.js.org/\",children:\"MobX\"})}),\": MobX uses proxies to make objects and arrays observable, allowing components to automatically react to state changes.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.a,{href:\"https://immerjs.github.io/\",children:\"Immer\"})}),\": Immer is a library that allows you to work with immutable state in a more convenient way. It uses proxies to track changes and produce the next immutable state.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Summary\"}),`\n`,(0,n.jsx)(e.p,{children:\"Proxies in JavaScript provide a powerful and flexible way to intercept and customize operations on objects. They are useful for a wide range of applications, including validation, logging, debugging, dynamic property creation, and implementing reactive systems. By using proxies, developers can create more robust, maintainable, and feature-rich applications.\"}),`\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/Web/JavaScript/Reference/Global_Objects/Proxy\",children:\"Proxy - JavaScript | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/proxy\",children:\"Proxy and Reflect | JavaScript.info\"})}),`\n`]})]})}function j(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(p,t)})):p(t)}var w=j;return v(P);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var r in e)a(t,r,{get:e[r],enumerable:!0})},s=(t,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!m.call(t,o)&&o!==r&&a(t,o,{get:()=>e[o],enumerable:!(i=g(e,o))||i.enumerable});return t};var v=(t,e,r)=>(r=t!=null?h(y(t)):{},s(e||!t||!t.__esModule?a(r,\"default\",{value:t,enumerable:!0}):r,t)),x=t=>s(a({},\"__esModule\",{value:!0}),t);var l=f((S,c)=>{c.exports=_jsx_runtime});var w={};b(w,{default:()=>d,frontmatter:()=>j});var n=v(l()),j={title:\"What are proxies in JavaScript used for?\"};function p(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"In JavaScript, a proxy is an object that acts as an intermediary between an object and the code. Proxies are used to intercept and customize the fundamental operations of JavaScript objects, such as property access, assignment, function invocation, and more.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here's a basic example of using a \",(0,n.jsx)(e.code,{children:\"Proxy\"}),\" to log every property access:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const myObject = {\n  name: 'John',\n  age: 42,\n};\n\nconst handler = {\n  get: function (target, prop, receiver) {\n    console.log(\\`Someone accessed property \"\\${prop}\"\\`);\n    return target[prop];\n  },\n};\n\nconst proxiedObject = new Proxy(myObject, handler);\n\nconsole.log(proxiedObject.name);\n// Someone accessed property \"name\"\n// 'John'\n\nconsole.log(proxiedObject.age);\n// Someone accessed property \"age\"\n// 42\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Use cases include:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Property access interception\"}),\": Intercept and customize property access on an object.\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Property assignment validation\"}),\": Validate property values before they are set on the target object.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Logging and debugging\"}),\": Create wrappers for logging and debugging interactions with an object\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Creating reactive systems\"}),\": Trigger updates in other parts of your application when object properties change (data binding).\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Data transformation\"}),\": Transforming data being set or retrieved from an object.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Mocking and stubbing in tests\"}),\": Create mock or stub objects for testing purposes, allowing you to isolate dependencies and focus on the unit under test\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Function invocation interception\"}),\": Used to cache and return the result of frequently accessed methods if they involve network calls or computationally intensive logic, improving performance\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Dynamic property creation\"}),\": Useful for defining properties on-the-fly with default values and avoid storing redundant data in objects.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"JavaScript proxies\"}),`\n`,(0,n.jsx)(e.p,{children:\"In JavaScript, a proxy is an object that allows you to customize the behavior of another object, often referred to as the target object. Proxies can intercept and redefine various operations for the target object, such as property access, assignment, enumeration, function invocation, and more. This makes proxies a powerful tool for a variety of use cases, including but not limited to validation, logging, performance monitoring, and implementing advanced data structures.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here are some common use cases and examples of how proxies can be used in JavaScript:\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Property access interception\"}),`\n`,(0,n.jsx)(e.p,{children:\"Proxies can be used to intercept and customize property access on an object.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const target = {\n  message: 'Hello, world!',\n};\n\nconst handler = {\n  get: function (target, property) {\n    if (property in target) {\n      return target[property];\n    }\n\n    return \\`Property \\${property} does not exist.\\`;\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nconsole.log(proxy.message); // Hello, world!\nconsole.log(proxy.nonExistentProperty); // Property nonExistentProperty does not exist.\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Creating wrappers for logging and debugging\"}),`\n`,(0,n.jsx)(e.p,{children:\"This is useful for creating wrappers for logging and debugging interactions with an object.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const target = {\n  name: 'Alice',\n  age: 30,\n};\n\nconst handler = {\n  get: function (target, property) {\n    console.log(\\`Getting property \\${property}\\`);\n    return target[property];\n  },\n  set: function (target, property, value) {\n    console.log(\\`Setting property \\${property} to \\${value}\\`);\n    target[property] = value;\n    return true;\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nconsole.log(proxy.name); // Output: Getting property name\n//         Alice\nproxy.age = 31; // Output: Setting property age to 31\nconsole.log(proxy.age); // Output: Getting property age\n//         31\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Property assignment validation\"}),`\n`,(0,n.jsx)(e.p,{children:\"Proxies can be used to validate property values before they are set on the target object.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const target = {\n  age: 25,\n};\n\nconst handler = {\n  set: function (target, property, value) {\n    if (property === 'age' && typeof value !== 'number') {\n      throw new TypeError('Age must be a number');\n    }\n    target[property] = value;\n    return true;\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nproxy.age = 30; // Works fine\nproxy.age = 'thirty'; // Throws TypeError: Age must be a number\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Creating reactive systems\"}),`\n`,(0,n.jsx)(e.p,{children:\"Proxies are often used to trigger updates in other parts of your application when object properties change (data binding).\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A practical example is JavaScript frameworks like \",(0,n.jsx)(e.a,{href:\"https://vuejs.org/\",children:\"Vue.js\"}),\", where proxies are used to \",(0,n.jsx)(e.a,{href:\"https://vuejs.org/guide/extras/reactivity-in-depth.html\",children:\"create reactive systems that automatically update the UI when data changes\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const target = {\n  firstName: 'John',\n  lastName: 'Doe',\n};\n\nconst handler = {\n  set: function (target, property, value) {\n    console.log(\\`Property \\${property} set to \\${value}\\`);\n    target[property] = value;\n    // Automatically update the UI or perform other actions\n    return true;\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nproxy.firstName = 'Jane'; // Output: Property firstName set to Jane\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Other use cases for access interception include:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Mocking and stubbing\"}),\": Proxies can be used to create mock or stub objects for testing purposes, allowing you to isolate dependencies and focus on the unit under test.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Function invocation interception\"}),`\n`,(0,n.jsx)(e.p,{children:\"Proxies can intercept and customize function calls.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const target = function (name) {\n  return \\`Hello, \\${name}!\\`;\n};\n\nconst handler = {\n  apply: function (target, thisArg, argumentsList) {\n    console.log(\\`Called with arguments: \\${argumentsList}\\`);\n    return target.apply(thisArg, argumentsList);\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nconsole.log(proxy('Alice')); // Called with arguments: Alice\n// Hello, Alice!\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"This interception can be used to cache and return the result of frequently accessed methods if they involve network calls or computationally intensive logic, improving performance by reducing the number of requests/computations made.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Dynamic property creation\"}),`\n`,(0,n.jsx)(e.p,{children:\"Proxies can be used to dynamically create properties or methods on an object. This is useful for defining properties on-the-fly with default values and avoid storing redundant data in objects.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const target = {};\n\nconst handler = {\n  get: function (target, property) {\n    if (!(property in target)) {\n      target[property] = \\`Dynamic property \\${property}\\`;\n    }\n    return target[property];\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nconsole.log(proxy.newProp); // Output: Dynamic property newProp\nconsole.log(proxy.anotherProp); // Output: Dynamic property anotherProp\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Implementing object relational mappers (ORMs)\"}),`\n`,(0,n.jsx)(e.p,{children:\"Proxies can be used to create objects for database records by intercepting property access to lazily load data from the database. This provides a more object-oriented interface to interact with a database.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Real world use cases\"}),`\n`,(0,n.jsx)(e.p,{children:\"Many popular libraries, especially state management solutions, are built on top of JavaScript proxies:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.a,{href:\"https://vuejs.org/\",children:\"Vue.js\"})}),\": Vue.js is a progressive framework for building user interfaces. In Vue 3, proxies are used extensively to implement the reactivity system.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.a,{href:\"https://mobx.js.org/\",children:\"MobX\"})}),\": MobX uses proxies to make objects and arrays observable, allowing components to automatically react to state changes.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.a,{href:\"https://immerjs.github.io/\",children:\"Immer\"})}),\": Immer is a library that allows you to work with immutable state in a more convenient way. It uses proxies to track changes and produce the next immutable state.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Summary\"}),`\n`,(0,n.jsx)(e.p,{children:\"Proxies in JavaScript provide a powerful and flexible way to intercept and customize operations on objects. They are useful for a wide range of applications, including validation, logging, debugging, dynamic property creation, and implementing reactive systems. By using proxies, developers can create more robust, maintainable, and feature-rich applications.\"}),`\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/Web/JavaScript/Reference/Global_Objects/Proxy\",children:\"Proxy - JavaScript | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/proxy\",children:\"Proxy and Reflect | JavaScript.info\"})}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(p,{...t})}):p(t)}return x(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-proxies-in-javascript-used-for/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-proxies-in-javascript-used-for/zh-CN.json
index 8503328c8..3d3ba70c5 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-proxies-in-javascript-used-for/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-proxies-in-javascript-used-for/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-proxies-in-javascript-used-for/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var m=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),x=(r,n)=>{for(var t in n)l(r,t,{get:n[t],enumerable:!0})},a=(r,n,t,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of g(n))!y.call(r,o)&&o!==t&&l(r,o,{get:()=>n[o],enumerable:!(c=d(n,o))||c.enumerable});return r};var v=(r,n,t)=>(t=r!=null?s(u(r)):{},a(n||!r||!r.__esModule?l(t,\"default\",{value:r,enumerable:!0}):t,r)),f=r=>a(l({},\"__esModule\",{value:!0}),r);var p=m((S,i)=>{i.exports=_jsx_runtime});var w={};x(w,{default:()=>b,frontmatter:()=>j});var e=v(p()),j={title:\"JavaScript \\u4E2D\\u7684\\u4EE3\\u7406\\u6709\\u4EC0\\u4E48\\u7528\\uFF1F\"};function h(r){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",ul:\"ul\",li:\"li\",strong:\"strong\",hr:\"hr\",h3:\"h3\",h4:\"h4\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u4EE3\\u7406\\u662F\\u4E00\\u4E2A\\u5145\\u5F53\\u5BF9\\u8C61\\u548C\\u4EE3\\u7801\\u4E4B\\u95F4\\u4E2D\\u4ECB\\u7684 \\u5BF9\\u8C61\\u3002\\u4EE3\\u7406\\u7528\\u4E8E\\u62E6\\u622A\\u548C\\u81EA\\u5B9A\\u4E49 JavaScript \\u5BF9\\u8C61\\u7684\\u57FA\\u672C\\u64CD\\u4F5C\\uFF0C\\u4F8B\\u5982\\u5C5E\\u6027\\u8BBF\\u95EE\\u3001\\u8D4B\\u503C\\u3001\\u51FD\\u6570\\u8C03\\u7528\\u7B49\\u3002\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4EE5\\u4E0B\\u662F\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"Proxy\"}),\" \\u8BB0\\u5F55\\u6BCF\\u4E2A\\u5C5E\\u6027\\u8BBF\\u95EE\\u7684\\u57FA\\u672C\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const myObject = {\n  name: 'John',\n  age: 42,\n};\n\nconst handler = {\n  get: function (target, prop, receiver) {\n    console.log(\\`Someone accessed property \"\\${prop}\"\\`);\n    return target[prop];\n  },\n};\n\nconst proxiedObject = new Proxy(myObject, handler);\n\nconsole.log(proxiedObject.name);\n// Someone accessed property \"name\"\n// 'John'\n\nconsole.log(proxiedObject.age);\n// Someone accessed property \"age\"\n// 42\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7528\\u4F8B\\u5305\\u62EC\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C5E\\u6027\\u8BBF\\u95EE\\u62E6\\u622A\"}),\"\\uFF1A\\u62E6\\u622A\\u548C\\u81EA\\u5B9A\\u4E49\\u5BF9\\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u8BBF\\u95EE\\u3002\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C5E\\u6027\\u8D4B\\u503C\\u9A8C\\u8BC1\"}),\"\\uFF1A\\u5728\\u5C06\\u5C5E\\u6027\\u503C\\u8BBE\\u7F6E\\u5230\\u76EE\\u6807\\u5BF9\\u8C61\\u4E4B\\u524D\\u9A8C\\u8BC1\\u5B83\\u4EEC\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u65E5\\u5FD7\\u8BB0\\u5F55\\u548C\\u8C03\\u8BD5\"}),\"\\uFF1A\\u521B\\u5EFA\\u7528\\u4E8E\\u8BB0\\u5F55\\u548C\\u8C03\\u8BD5\\u4E0E\\u5BF9\\u8C61\\u4EA4\\u4E92\\u7684\\u5305\\u88C5\\u5668\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u521B\\u5EFA\\u53CD\\u5E94\\u5F0F\\u7CFB\\u7EDF\"}),\"\\uFF1A\\u5F53\\u5BF9\\u8C61\\u5C5E\\u6027\\u66F4\\u6539\\u65F6\\uFF0C\\u89E6\\u53D1\\u5E94\\u7528\\u7A0B\\u5E8F\\u5176\\u4ED6\\u90E8\\u5206\\u7684\\u66F4\\u65B0\\uFF08\\u6570\\u636E\\u7ED1\\u5B9A\\uFF09\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6570\\u636E\\u8F6C\\u6362\"}),\"\\uFF1A\\u8F6C\\u6362\\u4ECE\\u5BF9\\u8C61\\u8BBE\\u7F6E\\u6216\\u68C0\\u7D22\\u7684\\u6570\\u636E\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5728\\u6D4B\\u8BD5\\u4E2D\\u6A21\\u62DF\\u548C\\u5B58\\u6839\"}),\"\\uFF1A\\u4E3A\\u6D4B\\u8BD5\\u76EE\\u7684\\u521B\\u5EFA\\u6A21\\u62DF\\u6216\\u5B58\\u6839\\u5BF9\\u8C61\\uFF0C\\u5141\\u8BB8\\u60A8\\u9694\\u79BB\\u4F9D\\u8D56\\u9879\\u5E76\\u4E13\\u6CE8\\u4E8E\\u88AB\\u6D4B\\u5355\\u5143\"]}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u51FD\\u6570\\u8C03\\u7528\\u62E6\\u622A\"}),\"\\uFF1A\\u7528\\u4E8E\\u7F13\\u5B58\\u548C\\u8FD4\\u56DE\\u7ECF\\u5E38\\u8BBF\\u95EE\\u7684\\u65B9\\u6CD5\\u7684\\u7ED3\\u679C\\uFF08\\u5982\\u679C\\u5B83\\u4EEC\\u6D89\\u53CA\\u7F51\\u7EDC\\u8C03\\u7528\\u6216\\u8BA1\\u7B97\\u5BC6\\u96C6\\u578B\\u903B\\u8F91\\uFF09\\uFF0C\\u4ECE\\u800C\\u63D0\\u9AD8\\u6027\\u80FD\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u52A8\\u6001\\u5C5E\\u6027\\u521B\\u5EFA\"}),\"\\uFF1A\\u7528\\u4E8E\\u5373\\u65F6\\u5B9A\\u4E49\\u5177\\u6709\\u9ED8\\u8BA4\\u503C\\u7684\\u5C5E\\u6027\\uFF0C\\u5E76\\u907F\\u514D\\u5728\\u5BF9\\u8C61\\u4E2D\\u5B58\\u50A8\\u5197\\u4F59\\u6570\\u636E\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"JavaScript \\u4EE3\\u7406\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u4EE3\\u7406\\u662F\\u4E00\\u4E2A\\u5141\\u8BB8\\u60A8\\u81EA\\u5B9A\\u4E49\\u53E6\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF08\\u901A\\u5E38\\u79F0\\u4E3A\\u76EE\\u6807\\u5BF9\\u8C61\\uFF09\\u884C\\u4E3A\\u7684\\u5BF9\\u8C61\\u3002\\u4EE3\\u7406\\u53EF\\u4EE5\\u62E6\\u622A\\u548C\\u91CD\\u65B0\\u5B9A\\u4E49\\u76EE\\u6807\\u5BF9\\u8C61\\u7684\\u5404\\u79CD\\u64CD\\u4F5C\\uFF0C\\u4F8B\\u5982\\u5C5E\\u6027\\u8BBF\\u95EE\\u3001\\u8D4B\\u503C\\u3001\\u679A\\u4E3E\\u3001\\u51FD\\u6570\\u8C03\\u7528\\u7B49\\u3002\\u8FD9\\u4F7F\\u5F97\\u4EE3\\u7406\\u6210\\u4E3A\\u5404\\u79CD\\u7528\\u4F8B\\u7684\\u5F3A\\u5927\\u5DE5\\u5177\\uFF0C\\u5305\\u62EC\\u4F46\\u4E0D\\u9650\\u4E8E\\u9A8C\\u8BC1\\u3001\\u65E5\\u5FD7\\u8BB0\\u5F55\\u3001\\u6027\\u80FD\\u76D1\\u63A7\\u548C\\u5B9E\\u73B0\\u9AD8\\u7EA7\\u6570\\u636E\\u7ED3\\u6784\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u4EE3\\u7406\\u5728 JavaScript \\u4E2D\\u4F7F\\u7528\\u7684\\u4E00\\u4E9B\\u5E38\\u89C1\\u7528\\u4F8B\\u548C\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5C5E\\u6027\\u8BBF\\u95EE\\u62E6\\u622A\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE3\\u7406\\u53EF\\u7528\\u4E8E\\u62E6\\u622A\\u548C\\u81EA\\u5B9A\\u4E49\\u5BF9\\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u8BBF\\u95EE\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const target = {\n  message: 'Hello, world!',\n};\n\nconst handler = {\n  get: function (target, property) {\n    if (property in target) {\n      return target[property];\n    }\n\n    return \\`Property \\${property} does not exist.\\`;\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nconsole.log(proxy.message); // Hello, world!\nconsole.log(proxy.nonExistentProperty); // Property nonExistentProperty does not exist.\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u521B\\u5EFA\\u7528\\u4E8E\\u65E5\\u5FD7\\u8BB0\\u5F55\\u548C\\u8C03\\u8BD5\\u7684\\u5305\\u88C5\\u5668\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u5BF9\\u4E8E\\u521B\\u5EFA\\u7528\\u4E8E\\u8BB0\\u5F55\\u548C\\u8C03\\u8BD5\\u4E0E\\u5BF9\\u8C61\\u4EA4\\u4E92\\u7684\\u5305\\u88C5\\u5668\\u5F88\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const target = {\n  name: 'Alice',\n  age: 30,\n};\n\nconst handler = {\n  get: function (target, property) {\n    console.log(\\`Getting property \\${property}\\`);\n    return target[property];\n  },\n  set: function (target, property, value) {\n    console.log(\\`Setting property \\${property} to \\${value}\\`);\n    target[property] = value;\n    return true;\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nconsole.log(proxy.name); // Output: Getting property name\n//         Alice\nproxy.age = 31; // Output: Setting property age to 31\nconsole.log(proxy.age); // Output: Getting property age\n//         31\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5C5E\\u6027\\u8D4B\\u503C\\u9A8C\\u8BC1\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE3\\u7406\\u53EF\\u7528\\u4E8E\\u5728\\u5C06\\u5C5E\\u6027\\u503C\\u8BBE\\u7F6E\\u5230\\u76EE\\u6807\\u5BF9\\u8C61\\u4E4B\\u524D\\u9A8C\\u8BC1\\u5B83\\u4EEC\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const target = {\n  age: 25,\n};\n\nconst handler = {\n  set: function (target, property, value) {\n    if (property === 'age' && typeof value !== 'number') {\n      throw new TypeError('Age must be a number');\n    }\n    target[property] = value;\n    return true;\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nproxy.age = 30; // Works fine\nproxy.age = 'thirty'; // Throws TypeError: Age must be a number\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u521B\\u5EFA\\u54CD\\u5E94\\u5F0F\\u7CFB\\u7EDF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE3\\u7406\\u901A\\u5E38\\u7528\\u4E8E\\u5728\\u5BF9\\u8C61\\u5C5E\\u6027\\u66F4\\u6539\\u65F6\\u89E6\\u53D1\\u5E94\\u7528\\u7A0B\\u5E8F\\u5176\\u4ED6\\u90E8\\u5206\\u7684\\u66F4\\u65B0\\uFF08\\u6570\\u636E\\u7ED1\\u5B9A\\uFF09\\u3002\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E00\\u4E2A\\u5B9E\\u9645\\u7684\\u4F8B\\u5B50\\u662F\\u50CF \",(0,e.jsx)(n.a,{href:\"https://vuejs.org/\",children:\"Vue.js\"}),\" \\u8FD9\\u6837\\u7684 JavaScript \\u6846\\u67B6\\uFF0C\\u5176\\u4E2D\\u4EE3\\u7406\\u7528\\u4E8E\",(0,e.jsx)(n.a,{href:\"https://vuejs.org/guide/extras/reactivity-in-depth.html\",children:\"\\u521B\\u5EFA\\u54CD\\u5E94\\u5F0F\\u7CFB\\u7EDF\\uFF0C\\u5F53\\u6570\\u636E\\u66F4\\u6539\\u65F6\\u81EA\\u52A8\\u66F4\\u65B0 UI\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const target = {\n  firstName: 'John',\n  lastName: 'Doe',\n};\n\nconst handler = {\n  set: function (target, property, value) {\n    console.log(\\`Property \\${property} set to \\${value}\\`);\n    target[property] = value;\n    // Automatically update the UI or perform other actions\n    return true;\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nproxy.firstName = 'Jane'; // Output: Property firstName set to Jane\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8BBF\\u95EE\\u62E6\\u622A\\u7684\\u5176\\u4ED6\\u7528\\u4F8B\\u5305\\u62EC\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6A21\\u62DF\\u548C\\u5B58\\u6839\"}),\"\\uFF1A\\u4EE3\\u7406\\u53EF\\u7528\\u4E8E\\u521B\\u5EFA\\u7528\\u4E8E\\u6D4B\\u8BD5\\u76EE\\u7684\\u7684\\u6A21\\u62DF\\u6216\\u5B58\\u6839\\u5BF9\\u8C61\\uFF0C\\u5141\\u8BB8\\u60A8\\u9694\\u79BB\\u4F9D\\u8D56\\u9879\\u5E76\\u4E13\\u6CE8\\u4E8E\\u88AB\\u6D4B\\u5355\\u5143\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u8C03\\u7528\\u62E6\\u622A\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE3\\u7406\\u53EF\\u4EE5\\u62E6\\u622A\\u548C\\u81EA\\u5B9A\\u4E49\\u51FD\\u6570\\u8C03\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const target = function (name) {\n  return \\`Hello, \\${name}!\\`;\n};\n\nconst handler = {\n  apply: function (target, thisArg, argumentsList) {\n    console.log(\\`Called with arguments: \\${argumentsList}\\`);\n    return target.apply(thisArg, argumentsList);\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nconsole.log(proxy('Alice')); // Called with arguments: Alice\n// Hello, Alice!\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5982\\u679C\\u9891\\u7E41\\u8BBF\\u95EE\\u7684\\u65B9\\u6CD5\\u6D89\\u53CA\\u7F51\\u7EDC\\u8C03\\u7528\\u6216\\u8BA1\\u7B97\\u5BC6\\u96C6\\u578B\\u903B\\u8F91\\uFF0C\\u5219\\u6B64\\u62E6\\u622A\\u53EF\\u7528\\u4E8E\\u7F13\\u5B58\\u5E76\\u8FD4\\u56DE\\u7ED3\\u679C\\uFF0C\\u4ECE\\u800C\\u901A\\u8FC7\\u51CF\\u5C11\\u53D1\\u51FA\\u7684\\u8BF7\\u6C42/\\u8BA1\\u7B97\\u6B21\\u6570\\u6765\\u63D0\\u9AD8\\u6027\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u52A8\\u6001\\u5C5E\\u6027\\u521B\\u5EFA\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE3\\u7406\\u53EF\\u7528\\u4E8E\\u52A8\\u6001\\u5730\\u5728\\u5BF9\\u8C61\\u4E0A\\u521B\\u5EFA\\u5C5E\\u6027\\u6216\\u65B9\\u6CD5\\u3002\\u8FD9\\u5BF9\\u4E8E\\u4F7F\\u7528\\u9ED8\\u8BA4\\u503C\\u5373\\u65F6\\u5B9A\\u4E49\\u5C5E\\u6027\\u5E76\\u907F\\u514D\\u5728\\u5BF9\\u8C61\\u4E2D\\u5B58\\u50A8\\u5197\\u4F59\\u6570\\u636E\\u975E\\u5E38\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const target = {};\n\nconst handler = {\n  get: function (target, property) {\n    if (!(property in target)) {\n      target[property] = \\`Dynamic property \\${property}\\`;\n    }\n    return target[property];\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nconsole.log(proxy.newProp); // Output: Dynamic property newProp\nconsole.log(proxy.anotherProp); // Output: Dynamic property anotherProp\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9E\\u73B0\\u5BF9\\u8C61\\u5173\\u7CFB\\u6620\\u5C04\\u5668 (ORM)\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE3\\u7406\\u53EF\\u7528\\u4E8E\\u521B\\u5EFA\\u6570\\u636E\\u5E93\\u8BB0\\u5F55\\u7684\\u5BF9\\u8C61\\uFF0C\\u65B9\\u6CD5\\u662F\\u62E6\\u622A\\u5C5E\\u6027\\u8BBF\\u95EE\\u4EE5\\u4ECE\\u6570\\u636E\\u5E93\\u4E2D\\u60F0\\u6027\\u52A0\\u8F7D\\u6570\\u636E\\u3002\\u8FD9\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u66F4\\u9762\\u5411\\u5BF9\\u8C61\\u7684\\u63A5\\u53E3\\u6765\\u4E0E\\u6570\\u636E\\u5E93\\u4EA4\\u4E92\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5B9E\\u9645\\u7528\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8BB8\\u591A\\u6D41\\u884C\\u7684\\u5E93\\uFF0C\\u5C24\\u5176\\u662F\\u72B6\\u6001\\u7BA1\\u7406\\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u90FD\\u662F\\u5EFA\\u7ACB\\u5728 JavaScript \\u4EE3\\u7406\\u4E4B\\u4E0A\\u7684\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:(0,e.jsx)(n.a,{href:\"https://vuejs.org/\",children:\"Vue.js\"})}),\"\\uFF1AVue.js \\u662F\\u4E00\\u4E2A\\u7528\\u4E8E\\u6784\\u5EFA\\u7528\\u6237\\u754C\\u9762\\u7684\\u6E10\\u8FDB\\u5F0F\\u6846\\u67B6\\u3002\\u5728 Vue 3 \\u4E2D\\uFF0C\\u4EE3\\u7406\\u88AB\\u5E7F\\u6CDB\\u7528\\u4E8E\\u5B9E\\u73B0\\u54CD\\u5E94\\u5F0F\\u7CFB\\u7EDF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:(0,e.jsx)(n.a,{href:\"https://mobx.js.org/\",children:\"MobX\"})}),\"\\uFF1AMobX \\u4F7F\\u7528\\u4EE3\\u7406\\u4F7F\\u5BF9\\u8C61\\u548C\\u6570\\u7EC4\\u53EF\\u89C2\\u5BDF\\uFF0C\\u5141\\u8BB8\\u7EC4\\u4EF6\\u81EA\\u52A8\\u54CD\\u5E94\\u72B6\\u6001\\u66F4\\u6539\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:(0,e.jsx)(n.a,{href:\"https://immerjs.github.io/\",children:\"Immer\"})}),\"\\uFF1AImmer \\u662F\\u4E00\\u4E2A\\u5141\\u8BB8\\u60A8\\u4EE5\\u66F4\\u65B9\\u4FBF\\u7684\\u65B9\\u5F0F\\u4F7F\\u7528\\u4E0D\\u53EF\\u53D8\\u72B6\\u6001\\u7684\\u5E93\\u3002\\u5B83\\u4F7F\\u7528\\u4EE3\\u7406\\u6765\\u8DDF\\u8E2A\\u66F4\\u6539\\u5E76\\u751F\\u6210\\u4E0B\\u4E00\\u4E2A\\u4E0D\\u53EF\\u53D8\\u72B6\\u6001\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684\\u4EE3\\u7406\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u5F3A\\u5927\\u800C\\u7075\\u6D3B\\u7684\\u65B9\\u5F0F\\u6765\\u62E6\\u622A\\u548C\\u81EA\\u5B9A\\u4E49\\u5BF9\\u8C61\\u4E0A\\u7684\\u64CD\\u4F5C\\u3002\\u5B83\\u4EEC\\u9002\\u7528\\u4E8E\\u5E7F\\u6CDB\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u5305\\u62EC\\u9A8C\\u8BC1\\u3001\\u65E5\\u5FD7\\u8BB0\\u5F55\\u3001\\u8C03\\u8BD5\\u3001\\u52A8\\u6001\\u5C5E\\u6027\\u521B\\u5EFA\\u548C\\u5B9E\\u73B0\\u54CD\\u5E94\\u5F0F\\u7CFB\\u7EDF\\u3002\\u901A\\u8FC7\\u4F7F\\u7528\\u4EE3\\u7406\\uFF0C\\u5F00\\u53D1\\u4EBA\\u5458\\u53EF\\u4EE5\\u521B\\u5EFA\\u66F4\\u5F3A\\u5927\\u3001\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u4E14\\u529F\\u80FD\\u66F4\\u4E30\\u5BCC\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy\",children:\"Proxy - JavaScript | MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://zh.javascript.info/proxy\",children:\"Proxy and Reflect | JavaScript.info\"})}),`\n`]})]})}function P(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(h,r)})):h(r)}var b=P;return f(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var l=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var x=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),v=(r,n)=>{for(var t in n)l(r,t,{get:n[t],enumerable:!0})},a=(r,n,t,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of u(n))!m.call(r,o)&&o!==t&&l(r,o,{get:()=>n[o],enumerable:!(c=g(n,o))||c.enumerable});return r};var f=(r,n,t)=>(t=r!=null?d(y(r)):{},a(n||!r||!r.__esModule?l(t,\"default\",{value:r,enumerable:!0}):t,r)),j=r=>a(l({},\"__esModule\",{value:!0}),r);var p=x((J,i)=>{i.exports=_jsx_runtime});var b={};v(b,{default:()=>s,frontmatter:()=>P});var e=f(p()),P={title:\"JavaScript \\u4E2D\\u7684\\u4EE3\\u7406\\u6709\\u4EC0\\u4E48\\u7528\\uFF1F\"};function h(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u4EE3\\u7406\\u662F\\u4E00\\u4E2A\\u5145\\u5F53\\u5BF9\\u8C61\\u548C\\u4EE3\\u7801\\u4E4B\\u95F4\\u4E2D\\u4ECB\\u7684 \\u5BF9\\u8C61\\u3002\\u4EE3\\u7406\\u7528\\u4E8E\\u62E6\\u622A\\u548C\\u81EA\\u5B9A\\u4E49 JavaScript \\u5BF9\\u8C61\\u7684\\u57FA\\u672C\\u64CD\\u4F5C\\uFF0C\\u4F8B\\u5982\\u5C5E\\u6027\\u8BBF\\u95EE\\u3001\\u8D4B\\u503C\\u3001\\u51FD\\u6570\\u8C03\\u7528\\u7B49\\u3002\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4EE5\\u4E0B\\u662F\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"Proxy\"}),\" \\u8BB0\\u5F55\\u6BCF\\u4E2A\\u5C5E\\u6027\\u8BBF\\u95EE\\u7684\\u57FA\\u672C\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const myObject = {\n  name: 'John',\n  age: 42,\n};\n\nconst handler = {\n  get: function (target, prop, receiver) {\n    console.log(\\`Someone accessed property \"\\${prop}\"\\`);\n    return target[prop];\n  },\n};\n\nconst proxiedObject = new Proxy(myObject, handler);\n\nconsole.log(proxiedObject.name);\n// Someone accessed property \"name\"\n// 'John'\n\nconsole.log(proxiedObject.age);\n// Someone accessed property \"age\"\n// 42\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7528\\u4F8B\\u5305\\u62EC\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C5E\\u6027\\u8BBF\\u95EE\\u62E6\\u622A\"}),\"\\uFF1A\\u62E6\\u622A\\u548C\\u81EA\\u5B9A\\u4E49\\u5BF9\\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u8BBF\\u95EE\\u3002\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C5E\\u6027\\u8D4B\\u503C\\u9A8C\\u8BC1\"}),\"\\uFF1A\\u5728\\u5C06\\u5C5E\\u6027\\u503C\\u8BBE\\u7F6E\\u5230\\u76EE\\u6807\\u5BF9\\u8C61\\u4E4B\\u524D\\u9A8C\\u8BC1\\u5B83\\u4EEC\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u65E5\\u5FD7\\u8BB0\\u5F55\\u548C\\u8C03\\u8BD5\"}),\"\\uFF1A\\u521B\\u5EFA\\u7528\\u4E8E\\u8BB0\\u5F55\\u548C\\u8C03\\u8BD5\\u4E0E\\u5BF9\\u8C61\\u4EA4\\u4E92\\u7684\\u5305\\u88C5\\u5668\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u521B\\u5EFA\\u53CD\\u5E94\\u5F0F\\u7CFB\\u7EDF\"}),\"\\uFF1A\\u5F53\\u5BF9\\u8C61\\u5C5E\\u6027\\u66F4\\u6539\\u65F6\\uFF0C\\u89E6\\u53D1\\u5E94\\u7528\\u7A0B\\u5E8F\\u5176\\u4ED6\\u90E8\\u5206\\u7684\\u66F4\\u65B0\\uFF08\\u6570\\u636E\\u7ED1\\u5B9A\\uFF09\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6570\\u636E\\u8F6C\\u6362\"}),\"\\uFF1A\\u8F6C\\u6362\\u4ECE\\u5BF9\\u8C61\\u8BBE\\u7F6E\\u6216\\u68C0\\u7D22\\u7684\\u6570\\u636E\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5728\\u6D4B\\u8BD5\\u4E2D\\u6A21\\u62DF\\u548C\\u5B58\\u6839\"}),\"\\uFF1A\\u4E3A\\u6D4B\\u8BD5\\u76EE\\u7684\\u521B\\u5EFA\\u6A21\\u62DF\\u6216\\u5B58\\u6839\\u5BF9\\u8C61\\uFF0C\\u5141\\u8BB8\\u60A8\\u9694\\u79BB\\u4F9D\\u8D56\\u9879\\u5E76\\u4E13\\u6CE8\\u4E8E\\u88AB\\u6D4B\\u5355\\u5143\"]}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u51FD\\u6570\\u8C03\\u7528\\u62E6\\u622A\"}),\"\\uFF1A\\u7528\\u4E8E\\u7F13\\u5B58\\u548C\\u8FD4\\u56DE\\u7ECF\\u5E38\\u8BBF\\u95EE\\u7684\\u65B9\\u6CD5\\u7684\\u7ED3\\u679C\\uFF08\\u5982\\u679C\\u5B83\\u4EEC\\u6D89\\u53CA\\u7F51\\u7EDC\\u8C03\\u7528\\u6216\\u8BA1\\u7B97\\u5BC6\\u96C6\\u578B\\u903B\\u8F91\\uFF09\\uFF0C\\u4ECE\\u800C\\u63D0\\u9AD8\\u6027\\u80FD\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u52A8\\u6001\\u5C5E\\u6027\\u521B\\u5EFA\"}),\"\\uFF1A\\u7528\\u4E8E\\u5373\\u65F6\\u5B9A\\u4E49\\u5177\\u6709\\u9ED8\\u8BA4\\u503C\\u7684\\u5C5E\\u6027\\uFF0C\\u5E76\\u907F\\u514D\\u5728\\u5BF9\\u8C61\\u4E2D\\u5B58\\u50A8\\u5197\\u4F59\\u6570\\u636E\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"JavaScript \\u4EE3\\u7406\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u4EE3\\u7406\\u662F\\u4E00\\u4E2A\\u5141\\u8BB8\\u60A8\\u81EA\\u5B9A\\u4E49\\u53E6\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF08\\u901A\\u5E38\\u79F0\\u4E3A\\u76EE\\u6807\\u5BF9\\u8C61\\uFF09\\u884C\\u4E3A\\u7684\\u5BF9\\u8C61\\u3002\\u4EE3\\u7406\\u53EF\\u4EE5\\u62E6\\u622A\\u548C\\u91CD\\u65B0\\u5B9A\\u4E49\\u76EE\\u6807\\u5BF9\\u8C61\\u7684\\u5404\\u79CD\\u64CD\\u4F5C\\uFF0C\\u4F8B\\u5982\\u5C5E\\u6027\\u8BBF\\u95EE\\u3001\\u8D4B\\u503C\\u3001\\u679A\\u4E3E\\u3001\\u51FD\\u6570\\u8C03\\u7528\\u7B49\\u3002\\u8FD9\\u4F7F\\u5F97\\u4EE3\\u7406\\u6210\\u4E3A\\u5404\\u79CD\\u7528\\u4F8B\\u7684\\u5F3A\\u5927\\u5DE5\\u5177\\uFF0C\\u5305\\u62EC\\u4F46\\u4E0D\\u9650\\u4E8E\\u9A8C\\u8BC1\\u3001\\u65E5\\u5FD7\\u8BB0\\u5F55\\u3001\\u6027\\u80FD\\u76D1\\u63A7\\u548C\\u5B9E\\u73B0\\u9AD8\\u7EA7\\u6570\\u636E\\u7ED3\\u6784\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u4EE3\\u7406\\u5728 JavaScript \\u4E2D\\u4F7F\\u7528\\u7684\\u4E00\\u4E9B\\u5E38\\u89C1\\u7528\\u4F8B\\u548C\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5C5E\\u6027\\u8BBF\\u95EE\\u62E6\\u622A\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE3\\u7406\\u53EF\\u7528\\u4E8E\\u62E6\\u622A\\u548C\\u81EA\\u5B9A\\u4E49\\u5BF9\\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u8BBF\\u95EE\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const target = {\n  message: 'Hello, world!',\n};\n\nconst handler = {\n  get: function (target, property) {\n    if (property in target) {\n      return target[property];\n    }\n\n    return \\`Property \\${property} does not exist.\\`;\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nconsole.log(proxy.message); // Hello, world!\nconsole.log(proxy.nonExistentProperty); // Property nonExistentProperty does not exist.\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u521B\\u5EFA\\u7528\\u4E8E\\u65E5\\u5FD7\\u8BB0\\u5F55\\u548C\\u8C03\\u8BD5\\u7684\\u5305\\u88C5\\u5668\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u5BF9\\u4E8E\\u521B\\u5EFA\\u7528\\u4E8E\\u8BB0\\u5F55\\u548C\\u8C03\\u8BD5\\u4E0E\\u5BF9\\u8C61\\u4EA4\\u4E92\\u7684\\u5305\\u88C5\\u5668\\u5F88\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const target = {\n  name: 'Alice',\n  age: 30,\n};\n\nconst handler = {\n  get: function (target, property) {\n    console.log(\\`Getting property \\${property}\\`);\n    return target[property];\n  },\n  set: function (target, property, value) {\n    console.log(\\`Setting property \\${property} to \\${value}\\`);\n    target[property] = value;\n    return true;\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nconsole.log(proxy.name); // Output: Getting property name\n//         Alice\nproxy.age = 31; // Output: Setting property age to 31\nconsole.log(proxy.age); // Output: Getting property age\n//         31\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5C5E\\u6027\\u8D4B\\u503C\\u9A8C\\u8BC1\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE3\\u7406\\u53EF\\u7528\\u4E8E\\u5728\\u5C06\\u5C5E\\u6027\\u503C\\u8BBE\\u7F6E\\u5230\\u76EE\\u6807\\u5BF9\\u8C61\\u4E4B\\u524D\\u9A8C\\u8BC1\\u5B83\\u4EEC\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const target = {\n  age: 25,\n};\n\nconst handler = {\n  set: function (target, property, value) {\n    if (property === 'age' && typeof value !== 'number') {\n      throw new TypeError('Age must be a number');\n    }\n    target[property] = value;\n    return true;\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nproxy.age = 30; // Works fine\nproxy.age = 'thirty'; // Throws TypeError: Age must be a number\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u521B\\u5EFA\\u54CD\\u5E94\\u5F0F\\u7CFB\\u7EDF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE3\\u7406\\u901A\\u5E38\\u7528\\u4E8E\\u5728\\u5BF9\\u8C61\\u5C5E\\u6027\\u66F4\\u6539\\u65F6\\u89E6\\u53D1\\u5E94\\u7528\\u7A0B\\u5E8F\\u5176\\u4ED6\\u90E8\\u5206\\u7684\\u66F4\\u65B0\\uFF08\\u6570\\u636E\\u7ED1\\u5B9A\\uFF09\\u3002\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E00\\u4E2A\\u5B9E\\u9645\\u7684\\u4F8B\\u5B50\\u662F\\u50CF \",(0,e.jsx)(n.a,{href:\"https://vuejs.org/\",children:\"Vue.js\"}),\" \\u8FD9\\u6837\\u7684 JavaScript \\u6846\\u67B6\\uFF0C\\u5176\\u4E2D\\u4EE3\\u7406\\u7528\\u4E8E\",(0,e.jsx)(n.a,{href:\"https://vuejs.org/guide/extras/reactivity-in-depth.html\",children:\"\\u521B\\u5EFA\\u54CD\\u5E94\\u5F0F\\u7CFB\\u7EDF\\uFF0C\\u5F53\\u6570\\u636E\\u66F4\\u6539\\u65F6\\u81EA\\u52A8\\u66F4\\u65B0 UI\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const target = {\n  firstName: 'John',\n  lastName: 'Doe',\n};\n\nconst handler = {\n  set: function (target, property, value) {\n    console.log(\\`Property \\${property} set to \\${value}\\`);\n    target[property] = value;\n    // Automatically update the UI or perform other actions\n    return true;\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nproxy.firstName = 'Jane'; // Output: Property firstName set to Jane\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8BBF\\u95EE\\u62E6\\u622A\\u7684\\u5176\\u4ED6\\u7528\\u4F8B\\u5305\\u62EC\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6A21\\u62DF\\u548C\\u5B58\\u6839\"}),\"\\uFF1A\\u4EE3\\u7406\\u53EF\\u7528\\u4E8E\\u521B\\u5EFA\\u7528\\u4E8E\\u6D4B\\u8BD5\\u76EE\\u7684\\u7684\\u6A21\\u62DF\\u6216\\u5B58\\u6839\\u5BF9\\u8C61\\uFF0C\\u5141\\u8BB8\\u60A8\\u9694\\u79BB\\u4F9D\\u8D56\\u9879\\u5E76\\u4E13\\u6CE8\\u4E8E\\u88AB\\u6D4B\\u5355\\u5143\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u8C03\\u7528\\u62E6\\u622A\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE3\\u7406\\u53EF\\u4EE5\\u62E6\\u622A\\u548C\\u81EA\\u5B9A\\u4E49\\u51FD\\u6570\\u8C03\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const target = function (name) {\n  return \\`Hello, \\${name}!\\`;\n};\n\nconst handler = {\n  apply: function (target, thisArg, argumentsList) {\n    console.log(\\`Called with arguments: \\${argumentsList}\\`);\n    return target.apply(thisArg, argumentsList);\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nconsole.log(proxy('Alice')); // Called with arguments: Alice\n// Hello, Alice!\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5982\\u679C\\u9891\\u7E41\\u8BBF\\u95EE\\u7684\\u65B9\\u6CD5\\u6D89\\u53CA\\u7F51\\u7EDC\\u8C03\\u7528\\u6216\\u8BA1\\u7B97\\u5BC6\\u96C6\\u578B\\u903B\\u8F91\\uFF0C\\u5219\\u6B64\\u62E6\\u622A\\u53EF\\u7528\\u4E8E\\u7F13\\u5B58\\u5E76\\u8FD4\\u56DE\\u7ED3\\u679C\\uFF0C\\u4ECE\\u800C\\u901A\\u8FC7\\u51CF\\u5C11\\u53D1\\u51FA\\u7684\\u8BF7\\u6C42/\\u8BA1\\u7B97\\u6B21\\u6570\\u6765\\u63D0\\u9AD8\\u6027\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u52A8\\u6001\\u5C5E\\u6027\\u521B\\u5EFA\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE3\\u7406\\u53EF\\u7528\\u4E8E\\u52A8\\u6001\\u5730\\u5728\\u5BF9\\u8C61\\u4E0A\\u521B\\u5EFA\\u5C5E\\u6027\\u6216\\u65B9\\u6CD5\\u3002\\u8FD9\\u5BF9\\u4E8E\\u4F7F\\u7528\\u9ED8\\u8BA4\\u503C\\u5373\\u65F6\\u5B9A\\u4E49\\u5C5E\\u6027\\u5E76\\u907F\\u514D\\u5728\\u5BF9\\u8C61\\u4E2D\\u5B58\\u50A8\\u5197\\u4F59\\u6570\\u636E\\u975E\\u5E38\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const target = {};\n\nconst handler = {\n  get: function (target, property) {\n    if (!(property in target)) {\n      target[property] = \\`Dynamic property \\${property}\\`;\n    }\n    return target[property];\n  },\n};\n\nconst proxy = new Proxy(target, handler);\n\nconsole.log(proxy.newProp); // Output: Dynamic property newProp\nconsole.log(proxy.anotherProp); // Output: Dynamic property anotherProp\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9E\\u73B0\\u5BF9\\u8C61\\u5173\\u7CFB\\u6620\\u5C04\\u5668 (ORM)\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE3\\u7406\\u53EF\\u7528\\u4E8E\\u521B\\u5EFA\\u6570\\u636E\\u5E93\\u8BB0\\u5F55\\u7684\\u5BF9\\u8C61\\uFF0C\\u65B9\\u6CD5\\u662F\\u62E6\\u622A\\u5C5E\\u6027\\u8BBF\\u95EE\\u4EE5\\u4ECE\\u6570\\u636E\\u5E93\\u4E2D\\u60F0\\u6027\\u52A0\\u8F7D\\u6570\\u636E\\u3002\\u8FD9\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u66F4\\u9762\\u5411\\u5BF9\\u8C61\\u7684\\u63A5\\u53E3\\u6765\\u4E0E\\u6570\\u636E\\u5E93\\u4EA4\\u4E92\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5B9E\\u9645\\u7528\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8BB8\\u591A\\u6D41\\u884C\\u7684\\u5E93\\uFF0C\\u5C24\\u5176\\u662F\\u72B6\\u6001\\u7BA1\\u7406\\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u90FD\\u662F\\u5EFA\\u7ACB\\u5728 JavaScript \\u4EE3\\u7406\\u4E4B\\u4E0A\\u7684\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:(0,e.jsx)(n.a,{href:\"https://vuejs.org/\",children:\"Vue.js\"})}),\"\\uFF1AVue.js \\u662F\\u4E00\\u4E2A\\u7528\\u4E8E\\u6784\\u5EFA\\u7528\\u6237\\u754C\\u9762\\u7684\\u6E10\\u8FDB\\u5F0F\\u6846\\u67B6\\u3002\\u5728 Vue 3 \\u4E2D\\uFF0C\\u4EE3\\u7406\\u88AB\\u5E7F\\u6CDB\\u7528\\u4E8E\\u5B9E\\u73B0\\u54CD\\u5E94\\u5F0F\\u7CFB\\u7EDF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:(0,e.jsx)(n.a,{href:\"https://mobx.js.org/\",children:\"MobX\"})}),\"\\uFF1AMobX \\u4F7F\\u7528\\u4EE3\\u7406\\u4F7F\\u5BF9\\u8C61\\u548C\\u6570\\u7EC4\\u53EF\\u89C2\\u5BDF\\uFF0C\\u5141\\u8BB8\\u7EC4\\u4EF6\\u81EA\\u52A8\\u54CD\\u5E94\\u72B6\\u6001\\u66F4\\u6539\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:(0,e.jsx)(n.a,{href:\"https://immerjs.github.io/\",children:\"Immer\"})}),\"\\uFF1AImmer \\u662F\\u4E00\\u4E2A\\u5141\\u8BB8\\u60A8\\u4EE5\\u66F4\\u65B9\\u4FBF\\u7684\\u65B9\\u5F0F\\u4F7F\\u7528\\u4E0D\\u53EF\\u53D8\\u72B6\\u6001\\u7684\\u5E93\\u3002\\u5B83\\u4F7F\\u7528\\u4EE3\\u7406\\u6765\\u8DDF\\u8E2A\\u66F4\\u6539\\u5E76\\u751F\\u6210\\u4E0B\\u4E00\\u4E2A\\u4E0D\\u53EF\\u53D8\\u72B6\\u6001\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684\\u4EE3\\u7406\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u5F3A\\u5927\\u800C\\u7075\\u6D3B\\u7684\\u65B9\\u5F0F\\u6765\\u62E6\\u622A\\u548C\\u81EA\\u5B9A\\u4E49\\u5BF9\\u8C61\\u4E0A\\u7684\\u64CD\\u4F5C\\u3002\\u5B83\\u4EEC\\u9002\\u7528\\u4E8E\\u5E7F\\u6CDB\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u5305\\u62EC\\u9A8C\\u8BC1\\u3001\\u65E5\\u5FD7\\u8BB0\\u5F55\\u3001\\u8C03\\u8BD5\\u3001\\u52A8\\u6001\\u5C5E\\u6027\\u521B\\u5EFA\\u548C\\u5B9E\\u73B0\\u54CD\\u5E94\\u5F0F\\u7CFB\\u7EDF\\u3002\\u901A\\u8FC7\\u4F7F\\u7528\\u4EE3\\u7406\\uFF0C\\u5F00\\u53D1\\u4EBA\\u5458\\u53EF\\u4EE5\\u521B\\u5EFA\\u66F4\\u5F3A\\u5927\\u3001\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u4E14\\u529F\\u80FD\\u66F4\\u4E30\\u5BCC\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy\",children:\"Proxy - JavaScript | MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://zh.javascript.info/proxy\",children:\"Proxy and Reflect | JavaScript.info\"})}),`\n`]})]})}function s(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(h,{...r})}):h(r)}return j(b);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-react-fragments-used-for/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-react-fragments-used-for/en-US.json
index a76b68a5f..4a712e79a 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-react-fragments-used-for/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-react-fragments-used-for/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-are-react-fragments-used-for/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},s=(t,e,r,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!p.call(t,a)&&a!==r&&i(t,a,{get:()=>e[a],enumerable:!(l=m(e,a))||l.enumerable});return t};var w=(t,e,r)=>(r=t!=null?h(g(t)):{},s(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),x=t=>s(i({},\"__esModule\",{value:!0}),t);var c=f((M,o)=>{o.exports=_jsx_runtime});var j={};y(j,{default:()=>C,frontmatter:()=>F});var n=w(c()),F={title:\"What are React Fragments used for?\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",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:[\"React Fragments are used to group multiple elements without adding extra nodes to the DOM. This is useful when you want to return multiple elements from a component's render method without wrapping them in an additional HTML element. You can use the shorthand syntax \",(0,n.jsx)(e.code,{children:\"<>...</>\"}),\" or the \",(0,n.jsx)(e.code,{children:\"React.Fragment\"}),\" syntax.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`return (\n  <>\n    <ChildComponent1 />\n    <ChildComponent2 />\n  </>\n);\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are React Fragments used for?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Grouping multiple elements\"}),`\n`,(0,n.jsx)(e.p,{children:\"React Fragments allow you to group multiple elements without adding extra nodes to the DOM. This is particularly useful when you want to return multiple elements from a component's render method but don't want to introduce unnecessary wrapper elements.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Avoiding unnecessary DOM nodes\"}),`\n`,(0,n.jsx)(e.p,{children:\"Using React Fragments helps in avoiding unnecessary DOM nodes, which can be beneficial for performance and maintaining a cleaner DOM structure. This is especially important in complex applications where additional nodes can lead to increased memory usage and slower rendering times.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,n.jsx)(e.p,{children:\"There are two ways to use React Fragments:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Shorthand syntax\"}),\": This is the most concise way to use fragments. It uses empty tags \",(0,n.jsx)(e.code,{children:\"<>...</>\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`return (\n  <>\n    <ChildComponent1 />\n    <ChildComponent2 />\n  </>\n);\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Full syntax\"}),\": This uses \",(0,n.jsx)(e.code,{children:\"React.Fragment\"}),\" and can be useful if you need to add keys to the fragment.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`return (\n  <React.Fragment>\n    <ChildComponent1 />\n    <ChildComponent2 />\n  </React.Fragment>\n);\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Adding keys to fragments\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"If you need to add keys to the elements within a fragment, you must use the full \",(0,n.jsx)(e.code,{children:\"React.Fragment\"}),\" syntax. This is useful when rendering a list of elements.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`return (\n  <>\n    {items.map((item) => (\n      <React.Fragment key={item.id}>\n        <ChildComponent />\n      </React.Fragment>\n    ))}\n  </>\n);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Returning multiple elements from a component\"}),\": When a component needs to return multiple sibling elements, using a fragment can help avoid unnecessary wrapper elements.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Rendering lists\"}),\": When rendering a list of elements, fragments can be used to group the list items without adding extra nodes to the DOM.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Conditional rendering\"}),\": When conditionally rendering multiple elements, fragments can help keep the DOM structure clean.\"]}),`\n`]}),`\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://react.dev/reference/react/Fragment\",children:\"React Fragments - Official Documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/react-fragments-complete-guide/\",children:\"React Fragments - A Complete Guide\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://blog.logrocket.com/when-to-use-react-fragments/\",children:\"When to use React Fragments\"})}),`\n`]})]})}function R(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var C=R;return x(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},s=(t,e,r,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of g(e))!f.call(t,a)&&a!==r&&i(t,a,{get:()=>e[a],enumerable:!(l=u(e,a))||l.enumerable});return t};var x=(t,e,r)=>(r=t!=null?m(p(t)):{},s(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),F=t=>s(i({},\"__esModule\",{value:!0}),t);var c=y((M,o)=>{o.exports=_jsx_runtime});var C={};w(C,{default:()=>h,frontmatter:()=>R});var n=x(c()),R={title:\"What are React Fragments used for?\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React Fragments are used to group multiple elements without adding extra nodes to the DOM. This is useful when you want to return multiple elements from a component's render method without wrapping them in an additional HTML element. You can use the shorthand syntax \",(0,n.jsx)(e.code,{children:\"<>...</>\"}),\" or the \",(0,n.jsx)(e.code,{children:\"React.Fragment\"}),\" syntax.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`return (\n  <>\n    <ChildComponent1 />\n    <ChildComponent2 />\n  </>\n);\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are React Fragments used for?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Grouping multiple elements\"}),`\n`,(0,n.jsx)(e.p,{children:\"React Fragments allow you to group multiple elements without adding extra nodes to the DOM. This is particularly useful when you want to return multiple elements from a component's render method but don't want to introduce unnecessary wrapper elements.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Avoiding unnecessary DOM nodes\"}),`\n`,(0,n.jsx)(e.p,{children:\"Using React Fragments helps in avoiding unnecessary DOM nodes, which can be beneficial for performance and maintaining a cleaner DOM structure. This is especially important in complex applications where additional nodes can lead to increased memory usage and slower rendering times.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,n.jsx)(e.p,{children:\"There are two ways to use React Fragments:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Shorthand syntax\"}),\": This is the most concise way to use fragments. It uses empty tags \",(0,n.jsx)(e.code,{children:\"<>...</>\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`return (\n  <>\n    <ChildComponent1 />\n    <ChildComponent2 />\n  </>\n);\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Full syntax\"}),\": This uses \",(0,n.jsx)(e.code,{children:\"React.Fragment\"}),\" and can be useful if you need to add keys to the fragment.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`return (\n  <React.Fragment>\n    <ChildComponent1 />\n    <ChildComponent2 />\n  </React.Fragment>\n);\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Adding keys to fragments\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"If you need to add keys to the elements within a fragment, you must use the full \",(0,n.jsx)(e.code,{children:\"React.Fragment\"}),\" syntax. This is useful when rendering a list of elements.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`return (\n  <>\n    {items.map((item) => (\n      <React.Fragment key={item.id}>\n        <ChildComponent />\n      </React.Fragment>\n    ))}\n  </>\n);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Returning multiple elements from a component\"}),\": When a component needs to return multiple sibling elements, using a fragment can help avoid unnecessary wrapper elements.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Rendering lists\"}),\": When rendering a list of elements, fragments can be used to group the list items without adding extra nodes to the DOM.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Conditional rendering\"}),\": When conditionally rendering multiple elements, fragments can help keep the DOM structure clean.\"]}),`\n`]}),`\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://react.dev/reference/react/Fragment\",children:\"React Fragments - Official Documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/react-fragments-complete-guide/\",children:\"React Fragments - A Complete Guide\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://blog.logrocket.com/when-to-use-react-fragments/\",children:\"When to use React Fragments\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return F(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-react-fragments-used-for/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-react-fragments-used-for/zh-CN.json
index b3b69f129..8d6524f3c 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-react-fragments-used-for/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-react-fragments-used-for/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-are-react-fragments-used-for/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),F=(r,n)=>{for(var t in n)l(r,t,{get:n[t],enumerable:!0})},i=(r,n,t,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of g(n))!u.call(r,c)&&c!==t&&l(r,c,{get:()=>n[c],enumerable:!(a=m(n,c))||a.enumerable});return r};var C=(r,n,t)=>(t=r!=null?s(p(r)):{},i(n||!r||!r.__esModule?l(t,\"default\",{value:r,enumerable:!0}):t,r)),R=r=>i(l({},\"__esModule\",{value:!0}),r);var d=f((_,h)=>{h.exports=_jsx_runtime});var M={};F(M,{default:()=>D,frontmatter:()=>x});var e=C(d()),x={title:\"React Fragments \\u6709\\u4EC0\\u4E48\\u7528\\uFF1F\"};function o(r){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"React Fragments \\u7528\\u4E8E\\u5BF9\\u591A\\u4E2A\\u5143\\u7D20\\u8FDB\\u884C\\u5206\\u7EC4\\uFF0C\\u800C\\u65E0\\u9700\\u5411 DOM \\u6DFB\\u52A0\\u989D\\u5916\\u7684\\u8282\\u70B9\\u3002\\u5F53\\u60A8\\u5E0C\\u671B\\u4ECE\\u7EC4\\u4EF6\\u7684 render \\u65B9\\u6CD5\\u8FD4\\u56DE\\u591A\\u4E2A\\u5143\\u7D20\\uFF0C\\u800C\\u65E0\\u9700\\u5C06\\u5B83\\u4EEC\\u5305\\u88F9\\u5728\\u989D\\u5916\\u7684 HTML \\u5143\\u7D20\\u4E2D\\u65F6\\uFF0C\\u8FD9\\u975E\\u5E38\\u6709\\u7528\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u7B80\\u5199\\u8BED\\u6CD5 \",(0,e.jsx)(n.code,{children:\"<>...</>\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"React.Fragment\"}),\" \\u8BED\\u6CD5\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`return (\n  <>\n    <ChildComponent1 />\n    <ChildComponent2 />\n  </>\n);\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React Fragments \\u6709\\u4EC0\\u4E48\\u7528\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5BF9\\u591A\\u4E2A\\u5143\\u7D20\\u8FDB\\u884C\\u5206\\u7EC4\"}),`\n`,(0,e.jsx)(n.p,{children:\"React Fragments \\u5141\\u8BB8\\u60A8\\u5BF9\\u591A\\u4E2A\\u5143\\u7D20\\u8FDB\\u884C\\u5206\\u7EC4\\uFF0C\\u800C\\u65E0\\u9700\\u5411 DOM \\u6DFB\\u52A0\\u989D\\u5916\\u7684\\u8282\\u70B9\\u3002\\u5F53\\u60A8\\u5E0C\\u671B\\u4ECE\\u7EC4\\u4EF6\\u7684 render \\u65B9\\u6CD5\\u8FD4\\u56DE\\u591A\\u4E2A\\u5143\\u7D20\\uFF0C\\u4F46\\u53C8\\u4E0D\\u60F3\\u5F15\\u5165\\u4E0D\\u5FC5\\u8981\\u7684\\u5305\\u88C5\\u5143\\u7D20\\u65F6\\uFF0C\\u8FD9\\u7279\\u522B\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u907F\\u514D\\u4E0D\\u5FC5\\u8981\\u7684 DOM \\u8282\\u70B9\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528 React Fragments \\u6709\\u52A9\\u4E8E\\u907F\\u514D\\u4E0D\\u5FC5\\u8981\\u7684 DOM \\u8282\\u70B9\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u6027\\u80FD\\u548C\\u7EF4\\u62A4\\u66F4\\u6E05\\u6670\\u7684 DOM \\u7ED3\\u6784\\u662F\\u6709\\u76CA\\u7684\\u3002\\u8FD9\\u5728\\u590D\\u6742\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u5C24\\u4E3A\\u91CD\\u8981\\uFF0C\\u56E0\\u4E3A\\u989D\\u5916\\u7684\\u8282\\u70B9\\u53EF\\u80FD\\u5BFC\\u81F4\\u5185\\u5B58\\u4F7F\\u7528\\u589E\\u52A0\\u548C\\u6E32\\u67D3\\u65F6\\u95F4\\u53D8\\u6162\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528 React Fragments \\u6709\\u4E24\\u79CD\\u65B9\\u6CD5\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u7B80\\u5199\\u8BED\\u6CD5\"}),\"\\uFF1A\\u8FD9\\u662F\\u4F7F\\u7528 fragments \\u6700\\u7B80\\u6D01\\u7684\\u65B9\\u5F0F\\u3002\\u5B83\\u4F7F\\u7528\\u7A7A\\u6807\\u7B7E \",(0,e.jsx)(n.code,{children:\"<>...</>\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`return (\n  <>\n    <ChildComponent1 />\n    <ChildComponent2 />\n  </>\n);\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B8C\\u6574\\u8BED\\u6CD5\"}),\"\\uFF1A\\u8FD9\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"React.Fragment\"}),\"\\uFF0C\\u5982\\u679C\\u60A8\\u9700\\u8981\\u5411 fragment \\u6DFB\\u52A0\\u952E\\uFF0C\\u8FD9\\u53EF\\u80FD\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`return (\n  <React.Fragment>\n    <ChildComponent1 />\n    <ChildComponent2 />\n  </React.Fragment>\n);\n`})}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5411 fragments \\u6DFB\\u52A0\\u952E\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5982\\u679C\\u60A8\\u9700\\u8981\\u5411 fragment \\u4E2D\\u7684\\u5143\\u7D20\\u6DFB\\u52A0\\u952E\\uFF0C\\u5219\\u5FC5\\u987B\\u4F7F\\u7528\\u5B8C\\u6574\\u7684 \",(0,e.jsx)(n.code,{children:\"React.Fragment\"}),\" \\u8BED\\u6CD5\\u3002\\u8FD9\\u5728\\u6E32\\u67D3\\u5143\\u7D20\\u5217\\u8868\\u65F6\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`return (\n  <>\n    {items.map((item) => (\n      <React.Fragment key={item.id}>\n        <ChildComponent />\n      </React.Fragment>\n    ))}\n  </>\n);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4ECE\\u7EC4\\u4EF6\\u8FD4\\u56DE\\u591A\\u4E2A\\u5143\\u7D20\"}),\"\\uFF1A\\u5F53\\u7EC4\\u4EF6\\u9700\\u8981\\u8FD4\\u56DE\\u591A\\u4E2A\\u5144\\u5F1F\\u5143\\u7D20\\u65F6\\uFF0C\\u4F7F\\u7528 fragment \\u53EF\\u4EE5\\u5E2E\\u52A9\\u907F\\u514D\\u4E0D\\u5FC5\\u8981\\u7684\\u5305\\u88C5\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6E32\\u67D3\\u5217\\u8868\"}),\"\\uFF1A\\u6E32\\u67D3\\u5143\\u7D20\\u5217\\u8868\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 fragments \\u5BF9\\u5217\\u8868\\u9879\\u8FDB\\u884C\\u5206\\u7EC4\\uFF0C\\u800C\\u65E0\\u9700\\u5411 DOM \\u6DFB\\u52A0\\u989D\\u5916\\u7684\\u8282\\u70B9\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6761\\u4EF6\\u6E32\\u67D3\"}),\"\\uFF1A\\u5F53\\u6709\\u6761\\u4EF6\\u5730\\u6E32\\u67D3\\u591A\\u4E2A\\u5143\\u7D20\\u65F6\\uFF0Cfragments \\u53EF\\u4EE5\\u5E2E\\u52A9\\u4FDD\\u6301 DOM \\u7ED3\\u6784\\u7684\\u6574\\u6D01\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react/Fragment\",children:\"React Fragments - Official Documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/react-fragments-complete-guide/\",children:\"React Fragments - A Complete Guide\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://blog.logrocket.com/when-to-use-react-fragments/\",children:\"When to use React Fragments\"})}),`\n`]})]})}function j(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(o,r)})):o(r)}var D=j;return R(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var F=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),C=(r,n)=>{for(var t in n)l(r,t,{get:n[t],enumerable:!0})},i=(r,n,t,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of p(n))!f.call(r,c)&&c!==t&&l(r,c,{get:()=>n[c],enumerable:!(a=g(n,c))||a.enumerable});return r};var R=(r,n,t)=>(t=r!=null?s(u(r)):{},i(n||!r||!r.__esModule?l(t,\"default\",{value:r,enumerable:!0}):t,r)),x=r=>i(l({},\"__esModule\",{value:!0}),r);var d=F((O,h)=>{h.exports=_jsx_runtime});var M={};C(M,{default:()=>m,frontmatter:()=>D});var e=R(d()),D={title:\"React Fragments \\u6709\\u4EC0\\u4E48\\u7528\\uFF1F\"};function o(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"React Fragments \\u7528\\u4E8E\\u5BF9\\u591A\\u4E2A\\u5143\\u7D20\\u8FDB\\u884C\\u5206\\u7EC4\\uFF0C\\u800C\\u65E0\\u9700\\u5411 DOM \\u6DFB\\u52A0\\u989D\\u5916\\u7684\\u8282\\u70B9\\u3002\\u5F53\\u60A8\\u5E0C\\u671B\\u4ECE\\u7EC4\\u4EF6\\u7684 render \\u65B9\\u6CD5\\u8FD4\\u56DE\\u591A\\u4E2A\\u5143\\u7D20\\uFF0C\\u800C\\u65E0\\u9700\\u5C06\\u5B83\\u4EEC\\u5305\\u88F9\\u5728\\u989D\\u5916\\u7684 HTML \\u5143\\u7D20\\u4E2D\\u65F6\\uFF0C\\u8FD9\\u975E\\u5E38\\u6709\\u7528\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u7B80\\u5199\\u8BED\\u6CD5 \",(0,e.jsx)(n.code,{children:\"<>...</>\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"React.Fragment\"}),\" \\u8BED\\u6CD5\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`return (\n  <>\n    <ChildComponent1 />\n    <ChildComponent2 />\n  </>\n);\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React Fragments \\u6709\\u4EC0\\u4E48\\u7528\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5BF9\\u591A\\u4E2A\\u5143\\u7D20\\u8FDB\\u884C\\u5206\\u7EC4\"}),`\n`,(0,e.jsx)(n.p,{children:\"React Fragments \\u5141\\u8BB8\\u60A8\\u5BF9\\u591A\\u4E2A\\u5143\\u7D20\\u8FDB\\u884C\\u5206\\u7EC4\\uFF0C\\u800C\\u65E0\\u9700\\u5411 DOM \\u6DFB\\u52A0\\u989D\\u5916\\u7684\\u8282\\u70B9\\u3002\\u5F53\\u60A8\\u5E0C\\u671B\\u4ECE\\u7EC4\\u4EF6\\u7684 render \\u65B9\\u6CD5\\u8FD4\\u56DE\\u591A\\u4E2A\\u5143\\u7D20\\uFF0C\\u4F46\\u53C8\\u4E0D\\u60F3\\u5F15\\u5165\\u4E0D\\u5FC5\\u8981\\u7684\\u5305\\u88C5\\u5143\\u7D20\\u65F6\\uFF0C\\u8FD9\\u7279\\u522B\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u907F\\u514D\\u4E0D\\u5FC5\\u8981\\u7684 DOM \\u8282\\u70B9\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528 React Fragments \\u6709\\u52A9\\u4E8E\\u907F\\u514D\\u4E0D\\u5FC5\\u8981\\u7684 DOM \\u8282\\u70B9\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u6027\\u80FD\\u548C\\u7EF4\\u62A4\\u66F4\\u6E05\\u6670\\u7684 DOM \\u7ED3\\u6784\\u662F\\u6709\\u76CA\\u7684\\u3002\\u8FD9\\u5728\\u590D\\u6742\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u5C24\\u4E3A\\u91CD\\u8981\\uFF0C\\u56E0\\u4E3A\\u989D\\u5916\\u7684\\u8282\\u70B9\\u53EF\\u80FD\\u5BFC\\u81F4\\u5185\\u5B58\\u4F7F\\u7528\\u589E\\u52A0\\u548C\\u6E32\\u67D3\\u65F6\\u95F4\\u53D8\\u6162\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528 React Fragments \\u6709\\u4E24\\u79CD\\u65B9\\u6CD5\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u7B80\\u5199\\u8BED\\u6CD5\"}),\"\\uFF1A\\u8FD9\\u662F\\u4F7F\\u7528 fragments \\u6700\\u7B80\\u6D01\\u7684\\u65B9\\u5F0F\\u3002\\u5B83\\u4F7F\\u7528\\u7A7A\\u6807\\u7B7E \",(0,e.jsx)(n.code,{children:\"<>...</>\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`return (\n  <>\n    <ChildComponent1 />\n    <ChildComponent2 />\n  </>\n);\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B8C\\u6574\\u8BED\\u6CD5\"}),\"\\uFF1A\\u8FD9\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"React.Fragment\"}),\"\\uFF0C\\u5982\\u679C\\u60A8\\u9700\\u8981\\u5411 fragment \\u6DFB\\u52A0\\u952E\\uFF0C\\u8FD9\\u53EF\\u80FD\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`return (\n  <React.Fragment>\n    <ChildComponent1 />\n    <ChildComponent2 />\n  </React.Fragment>\n);\n`})}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5411 fragments \\u6DFB\\u52A0\\u952E\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5982\\u679C\\u60A8\\u9700\\u8981\\u5411 fragment \\u4E2D\\u7684\\u5143\\u7D20\\u6DFB\\u52A0\\u952E\\uFF0C\\u5219\\u5FC5\\u987B\\u4F7F\\u7528\\u5B8C\\u6574\\u7684 \",(0,e.jsx)(n.code,{children:\"React.Fragment\"}),\" \\u8BED\\u6CD5\\u3002\\u8FD9\\u5728\\u6E32\\u67D3\\u5143\\u7D20\\u5217\\u8868\\u65F6\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`return (\n  <>\n    {items.map((item) => (\n      <React.Fragment key={item.id}>\n        <ChildComponent />\n      </React.Fragment>\n    ))}\n  </>\n);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4ECE\\u7EC4\\u4EF6\\u8FD4\\u56DE\\u591A\\u4E2A\\u5143\\u7D20\"}),\"\\uFF1A\\u5F53\\u7EC4\\u4EF6\\u9700\\u8981\\u8FD4\\u56DE\\u591A\\u4E2A\\u5144\\u5F1F\\u5143\\u7D20\\u65F6\\uFF0C\\u4F7F\\u7528 fragment \\u53EF\\u4EE5\\u5E2E\\u52A9\\u907F\\u514D\\u4E0D\\u5FC5\\u8981\\u7684\\u5305\\u88C5\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6E32\\u67D3\\u5217\\u8868\"}),\"\\uFF1A\\u6E32\\u67D3\\u5143\\u7D20\\u5217\\u8868\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 fragments \\u5BF9\\u5217\\u8868\\u9879\\u8FDB\\u884C\\u5206\\u7EC4\\uFF0C\\u800C\\u65E0\\u9700\\u5411 DOM \\u6DFB\\u52A0\\u989D\\u5916\\u7684\\u8282\\u70B9\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6761\\u4EF6\\u6E32\\u67D3\"}),\"\\uFF1A\\u5F53\\u6709\\u6761\\u4EF6\\u5730\\u6E32\\u67D3\\u591A\\u4E2A\\u5143\\u7D20\\u65F6\\uFF0Cfragments \\u53EF\\u4EE5\\u5E2E\\u52A9\\u4FDD\\u6301 DOM \\u7ED3\\u6784\\u7684\\u6574\\u6D01\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react/Fragment\",children:\"React Fragments - Official Documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/react-fragments-complete-guide/\",children:\"React Fragments - A Complete Guide\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://blog.logrocket.com/when-to-use-react-fragments/\",children:\"When to use React Fragments\"})}),`\n`]})]})}function m(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(o,{...r})}):o(r)}return x(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-react-portals-used-for/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-react-portals-used-for/en-US.json
index 2a6fe554e..445bca3d6 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-react-portals-used-for/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-react-portals-used-for/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-are-react-portals-used-for/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),y=(n,e)=>{for(var o in e)i(n,o,{get:e[o],enumerable:!0})},c=(n,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!f.call(n,r)&&r!==o&&i(n,r,{get:()=>e[r],enumerable:!(a=p(e,r))||a.enumerable});return n};var w=(n,e,o)=>(o=n!=null?h(m(n)):{},c(e||!n||!n.__esModule?i(o,\"default\",{value:n,enumerable:!0}):o,n)),b=n=>c(i({},\"__esModule\",{value:!0}),n);var s=g((x,l)=>{l.exports=_jsx_runtime});var O={};y(O,{default:()=>M,frontmatter:()=>v});var t=w(s()),v={title:\"What are React Portals used for?\"};function d(n){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"React Portals are used to render children into a DOM node that exists outside the hierarchy of the parent component. This is useful for scenarios like modals, tooltips, and dropdowns where you need to break out of the parent component's overflow or z-index constraints. You can create a portal using \",(0,t.jsx)(e.code,{children:\"ReactDOM.createPortal(child, container)\"}),\".\"]}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"What are React Portals used for?\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Introduction\"}),`\n`,(0,t.jsx)(e.p,{children:\"React Portals provide a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. This is particularly useful for certain UI patterns that require breaking out of the normal parent-child DOM structure.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Modals\"}),`\n`,(0,t.jsx)(e.p,{children:\"Modals often need to be rendered outside the parent component to avoid issues with z-index and overflow. By using a portal, you can ensure the modal is rendered at the top level of the DOM, making it easier to manage its visibility and positioning.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-jsx\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst Modal = ({ isOpen, children }) => {\n  if (!isOpen) return null;\n\n  return ReactDOM.createPortal(\n    <div className=\"modal\">{children}</div>,\n    document.getElementById('modal-root'),\n  );\n};\n`})}),`\n`,(0,t.jsx)(e.h4,{children:\"Tooltips\"}),`\n`,(0,t.jsx)(e.p,{children:\"Tooltips need to be rendered outside the parent component to avoid being clipped by overflow settings. Using a portal allows the tooltip to be positioned correctly without being constrained by the parent component's styles.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-jsx\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst Tooltip = ({ text, targetRef }) => {\n  const tooltipStyle = {\n    position: 'absolute',\n    top: targetRef.current.offsetTop,\n    left: targetRef.current.offsetLeft,\n  };\n\n  return ReactDOM.createPortal(\n    <div className=\"tooltip\" style={tooltipStyle}>\n      {text}\n    </div>,\n    document.body,\n  );\n};\n`})}),`\n`,(0,t.jsx)(e.h4,{children:\"Dropdowns\"}),`\n`,(0,t.jsx)(e.p,{children:\"Dropdowns often need to be rendered outside the parent component to avoid being clipped by overflow settings. Using a portal allows the dropdown to be positioned correctly without being constrained by the parent component's styles.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-jsx\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst Dropdown = ({ isOpen, children }) => {\n  if (!isOpen) return null;\n\n  return ReactDOM.createPortal(\n    <div className=\"dropdown\">{children}</div>,\n    document.body,\n  );\n};\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"How to create a portal\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"To create a portal, you use the \",(0,t.jsx)(e.code,{children:\"ReactDOM.createPortal\"}),\" method. This method takes two arguments: the child element to render and the DOM node to render it into.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-jsx\",children:`ReactDOM.createPortal(child, container);\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Benefits\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Breaking out of parent constraints\"}),\": Portals allow you to render components outside the parent component's DOM hierarchy, which is useful for avoiding issues with z-index and overflow.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Improved accessibility\"}),\": By rendering components like modals and tooltips at the top level of the DOM, you can ensure they are more easily accessible to screen readers and other assistive technologies.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Simplified styling\"}),\": By rendering components outside the parent component, you can avoid complex CSS rules and ensure the component is styled correctly.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/reference/react-dom/createPortal\",children:\"React createPortal documentation\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://blog.logrocket.com/building-a-modal-with-react-portals/\",children:\"Building a modal with React Portals\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://www.smashingmagazine.com/2020/03/react-portals-accessibility/\",children:\"Using React Portals for better accessibility\"})}),`\n`]})]})}function D(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(d,n)})):d(n)}var M=D;return b(O);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),w=(n,e)=>{for(var o in e)i(n,o,{get:e[o],enumerable:!0})},c=(n,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!g.call(n,r)&&r!==o&&i(n,r,{get:()=>e[r],enumerable:!(a=u(e,r))||a.enumerable});return n};var b=(n,e,o)=>(o=n!=null?p(f(n)):{},c(e||!n||!n.__esModule?i(o,\"default\",{value:n,enumerable:!0}):o,n)),v=n=>c(i({},\"__esModule\",{value:!0}),n);var s=y((x,l)=>{l.exports=_jsx_runtime});var M={};w(M,{default:()=>h,frontmatter:()=>D});var t=b(s()),D={title:\"What are React Portals used for?\"};function d(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"React Portals are used to render children into a DOM node that exists outside the hierarchy of the parent component. This is useful for scenarios like modals, tooltips, and dropdowns where you need to break out of the parent component's overflow or z-index constraints. You can create a portal using \",(0,t.jsx)(e.code,{children:\"ReactDOM.createPortal(child, container)\"}),\".\"]}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"What are React Portals used for?\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Introduction\"}),`\n`,(0,t.jsx)(e.p,{children:\"React Portals provide a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. This is particularly useful for certain UI patterns that require breaking out of the normal parent-child DOM structure.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Modals\"}),`\n`,(0,t.jsx)(e.p,{children:\"Modals often need to be rendered outside the parent component to avoid issues with z-index and overflow. By using a portal, you can ensure the modal is rendered at the top level of the DOM, making it easier to manage its visibility and positioning.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-jsx\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst Modal = ({ isOpen, children }) => {\n  if (!isOpen) return null;\n\n  return ReactDOM.createPortal(\n    <div className=\"modal\">{children}</div>,\n    document.getElementById('modal-root'),\n  );\n};\n`})}),`\n`,(0,t.jsx)(e.h4,{children:\"Tooltips\"}),`\n`,(0,t.jsx)(e.p,{children:\"Tooltips need to be rendered outside the parent component to avoid being clipped by overflow settings. Using a portal allows the tooltip to be positioned correctly without being constrained by the parent component's styles.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-jsx\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst Tooltip = ({ text, targetRef }) => {\n  const tooltipStyle = {\n    position: 'absolute',\n    top: targetRef.current.offsetTop,\n    left: targetRef.current.offsetLeft,\n  };\n\n  return ReactDOM.createPortal(\n    <div className=\"tooltip\" style={tooltipStyle}>\n      {text}\n    </div>,\n    document.body,\n  );\n};\n`})}),`\n`,(0,t.jsx)(e.h4,{children:\"Dropdowns\"}),`\n`,(0,t.jsx)(e.p,{children:\"Dropdowns often need to be rendered outside the parent component to avoid being clipped by overflow settings. Using a portal allows the dropdown to be positioned correctly without being constrained by the parent component's styles.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-jsx\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst Dropdown = ({ isOpen, children }) => {\n  if (!isOpen) return null;\n\n  return ReactDOM.createPortal(\n    <div className=\"dropdown\">{children}</div>,\n    document.body,\n  );\n};\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"How to create a portal\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"To create a portal, you use the \",(0,t.jsx)(e.code,{children:\"ReactDOM.createPortal\"}),\" method. This method takes two arguments: the child element to render and the DOM node to render it into.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-jsx\",children:`ReactDOM.createPortal(child, container);\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Benefits\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Breaking out of parent constraints\"}),\": Portals allow you to render components outside the parent component's DOM hierarchy, which is useful for avoiding issues with z-index and overflow.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Improved accessibility\"}),\": By rendering components like modals and tooltips at the top level of the DOM, you can ensure they are more easily accessible to screen readers and other assistive technologies.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Simplified styling\"}),\": By rendering components outside the parent component, you can avoid complex CSS rules and ensure the component is styled correctly.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/reference/react-dom/createPortal\",children:\"React createPortal documentation\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://blog.logrocket.com/building-a-modal-with-react-portals/\",children:\"Building a modal with React Portals\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://www.smashingmagazine.com/2020/03/react-portals-accessibility/\",children:\"Using React Portals for better accessibility\"})}),`\n`]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(d,{...n})}):d(n)}return v(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-react-portals-used-for/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-react-portals-used-for/zh-CN.json
index fc3a1fa9e..74cc95969 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-react-portals-used-for/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-react-portals-used-for/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-are-react-portals-used-for/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),O=(t,e)=>{for(var r in e)l(t,r,{get:e[r],enumerable:!0})},a=(t,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!u.call(t,c)&&c!==r&&l(t,c,{get:()=>e[c],enumerable:!(o=p(e,c))||o.enumerable});return t};var R=(t,e,r)=>(r=t!=null?s(f(t)):{},a(e||!t||!t.__esModule?l(r,\"default\",{value:t,enumerable:!0}):r,t)),D=t=>a(l({},\"__esModule\",{value:!0}),t);var d=g((j,i)=>{i.exports=_jsx_runtime});var w={};O(w,{default:()=>P,frontmatter:()=>M});var n=R(d()),M={title:\"React Portals \\u6709\\u4EC0\\u4E48\\u7528\\uFF1F\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",ul:\"ul\",li:\"li\",strong:\"strong\",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:[\"React Portals \\u7528\\u4E8E\\u5C06\\u5B50\\u9879\\u6E32\\u67D3\\u5230\\u5B58\\u5728\\u4E8E\\u7236\\u7EC4\\u4EF6\\u5C42\\u7EA7\\u7ED3\\u6784\\u4E4B\\u5916\\u7684 DOM \\u8282\\u70B9\\u4E2D\\u3002\\u8FD9\\u5BF9\\u4E8E\\u6A21\\u6001\\u6846\\u3001\\u5DE5\\u5177\\u63D0\\u793A\\u548C\\u4E0B\\u62C9\\u83DC\\u5355\\u7B49\\u9700\\u8981\\u7A81\\u7834\\u7236\\u7EC4\\u4EF6\\u7684 overflow \\u6216 z-index \\u9650\\u5236\\u7684\\u573A\\u666F\\u975E\\u5E38\\u6709\\u7528\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"ReactDOM.createPortal(child, container)\"}),\" \\u521B\\u5EFA\\u4E00\\u4E2A portal\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"React Portals \\u6709\\u4EC0\\u4E48\\u7528\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7B80\\u4ECB\"}),`\n`,(0,n.jsx)(e.p,{children:\"React Portals \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u5C06\\u5B50\\u9879\\u6E32\\u67D3\\u5230\\u5B58\\u5728\\u4E8E\\u7236\\u7EC4\\u4EF6 DOM \\u7ED3\\u6784\\u4E4B\\u5916\\u7684 DOM \\u8282\\u70B9\\u4E2D\\u7684\\u65B9\\u6CD5\\u3002\\u8FD9\\u5BF9\\u4E8E\\u67D0\\u4E9B\\u9700\\u8981\\u7A81\\u7834\\u6B63\\u5E38\\u7236\\u5B50 DOM \\u7ED3\\u6784\\u7684 UI \\u6A21\\u5F0F\\u7279\\u522B\\u6709\\u7528\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u6A21\\u6001\\u6846\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6A21\\u6001\\u6846\\u901A\\u5E38\\u9700\\u8981\\u5728\\u7236\\u7EC4\\u4EF6\\u4E4B\\u5916\\u6E32\\u67D3\\uFF0C\\u4EE5\\u907F\\u514D z-index \\u548C overflow \\u95EE\\u9898\\u3002\\u901A\\u8FC7\\u4F7F\\u7528 portal\\uFF0C\\u60A8\\u53EF\\u4EE5\\u786E\\u4FDD\\u6A21\\u6001\\u6846\\u5728 DOM \\u7684\\u9876\\u5C42\\u6E32\\u67D3\\uFF0C\\u4ECE\\u800C\\u66F4\\u5BB9\\u6613\\u7BA1\\u7406\\u5176\\u53EF\\u89C1\\u6027\\u548C\\u5B9A\\u4F4D\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst Modal = ({ isOpen, children }) => {\n  if (!isOpen) return null;\n\n  return ReactDOM.createPortal(\n    <div className=\"modal\">{children}</div>,\n    document.getElementById('modal-root'),\n  );\n};\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u5DE5\\u5177\\u63D0\\u793A\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5DE5\\u5177\\u63D0\\u793A\\u9700\\u8981\\u5728\\u7236\\u7EC4\\u4EF6\\u4E4B\\u5916\\u6E32\\u67D3\\uFF0C\\u4EE5\\u907F\\u514D\\u88AB overflow \\u8BBE\\u7F6E\\u526A\\u5207\\u3002\\u4F7F\\u7528 portal \\u5141\\u8BB8\\u5DE5\\u5177\\u63D0\\u793A\\u6B63\\u786E\\u5730\\u5B9A\\u4F4D\\uFF0C\\u800C\\u4E0D\\u4F1A\\u53D7\\u5230\\u7236\\u7EC4\\u4EF6\\u6837\\u5F0F\\u7684\\u7EA6\\u675F\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst Tooltip = ({ text, targetRef }) => {\n  const tooltipStyle = {\n    position: 'absolute',\n    top: targetRef.current.offsetTop,\n    left: targetRef.current.offsetLeft,\n  };\n\n  return ReactDOM.createPortal(\n    <div className=\"tooltip\" style={tooltipStyle}>\n      {text}\n    </div>,\n    document.body,\n  );\n};\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4E0B\\u62C9\\u83DC\\u5355\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E0B\\u62C9\\u83DC\\u5355\\u901A\\u5E38\\u9700\\u8981\\u5728\\u7236\\u7EC4\\u4EF6\\u4E4B\\u5916\\u6E32\\u67D3\\uFF0C\\u4EE5\\u907F\\u514D\\u88AB overflow \\u8BBE\\u7F6E\\u526A\\u5207\\u3002\\u4F7F\\u7528 portal \\u5141\\u8BB8\\u4E0B\\u62C9\\u83DC\\u5355\\u6B63\\u786E\\u5730\\u5B9A\\u4F4D\\uFF0C\\u800C\\u4E0D\\u4F1A\\u53D7\\u5230\\u7236\\u7EC4\\u4EF6\\u6837\\u5F0F\\u7684\\u7EA6\\u675F\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst Dropdown = ({ isOpen, children }) => {\n  if (!isOpen) return null;\n\n  return ReactDOM.createPortal(\n    <div className=\"dropdown\">{children}</div>,\n    document.body,\n  );\n};\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5982\\u4F55\\u521B\\u5EFA portal\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u521B\\u5EFA\\u4E00\\u4E2A portal\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"ReactDOM.createPortal\"}),\" \\u65B9\\u6CD5\\u3002\\u6B64\\u65B9\\u6CD5\\u63A5\\u53D7\\u4E24\\u4E2A\\u53C2\\u6570\\uFF1A\\u8981\\u6E32\\u67D3\\u7684\\u5B50\\u5143\\u7D20\\u548C\\u8981\\u5C06\\u5176\\u6E32\\u67D3\\u5230\\u7684 DOM \\u8282\\u70B9\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`ReactDOM.createPortal(child, container);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u7A81\\u7834\\u7236\\u7EA7\\u7EA6\\u675F\"}),\"\\uFF1APortals \\u5141\\u8BB8\\u60A8\\u5728\\u7236\\u7EC4\\u4EF6\\u7684 DOM \\u5C42\\u6B21\\u7ED3\\u6784\\u4E4B\\u5916\\u6E32\\u67D3\\u7EC4\\u4EF6\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u907F\\u514D z-index \\u548C overflow \\u95EE\\u9898\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6539\\u8FDB\\u7684\\u53EF\\u8BBF\\u95EE\\u6027\"}),\"\\uFF1A\\u901A\\u8FC7\\u5728 DOM \\u7684\\u9876\\u5C42\\u6E32\\u67D3\\u6A21\\u6001\\u6846\\u548C\\u5DE5\\u5177\\u63D0\\u793A\\u7B49\\u7EC4\\u4EF6\\uFF0C\\u60A8\\u53EF\\u4EE5\\u786E\\u4FDD\\u5B83\\u4EEC\\u66F4\\u5BB9\\u6613\\u88AB\\u5C4F\\u5E55\\u9605\\u8BFB\\u5668\\u548C\\u5176\\u4ED6\\u8F85\\u52A9\\u6280\\u672F\\u8BBF\\u95EE\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u7B80\\u5316\\u6837\\u5F0F\"}),\"\\uFF1A\\u901A\\u8FC7\\u5728\\u7236\\u7EC4\\u4EF6\\u4E4B\\u5916\\u6E32\\u67D3\\u7EC4\\u4EF6\\uFF0C\\u60A8\\u53EF\\u4EE5\\u907F\\u514D\\u590D\\u6742\\u7684 CSS \\u89C4\\u5219\\uFF0C\\u5E76\\u786E\\u4FDD\\u7EC4\\u4EF6\\u7684\\u6837\\u5F0F\\u6B63\\u786E\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react-dom/createPortal\",children:\"React createPortal documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://blog.logrocket.com/building-a-modal-with-react-portals/\",children:\"Building a modal with React Portals\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.smashingmagazine.com/2020/03/react-portals-accessibility/\",children:\"Using React Portals for better accessibility\"})}),`\n`]})]})}function x(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=x;return D(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var R=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),D=(r,e)=>{for(var t in e)l(r,t,{get:e[t],enumerable:!0})},a=(r,e,t,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of f(e))!g.call(r,c)&&c!==t&&l(r,c,{get:()=>e[c],enumerable:!(o=m(e,c))||o.enumerable});return r};var M=(r,e,t)=>(t=r!=null?p(u(r)):{},a(e||!r||!r.__esModule?l(t,\"default\",{value:r,enumerable:!0}):t,r)),O=r=>a(l({},\"__esModule\",{value:!0}),r);var d=R((v,i)=>{i.exports=_jsx_runtime});var P={};D(P,{default:()=>s,frontmatter:()=>x});var n=M(d()),x={title:\"React Portals \\u6709\\u4EC0\\u4E48\\u7528\\uFF1F\"};function h(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React Portals \\u7528\\u4E8E\\u5C06\\u5B50\\u9879\\u6E32\\u67D3\\u5230\\u5B58\\u5728\\u4E8E\\u7236\\u7EC4\\u4EF6\\u5C42\\u7EA7\\u7ED3\\u6784\\u4E4B\\u5916\\u7684 DOM \\u8282\\u70B9\\u4E2D\\u3002\\u8FD9\\u5BF9\\u4E8E\\u6A21\\u6001\\u6846\\u3001\\u5DE5\\u5177\\u63D0\\u793A\\u548C\\u4E0B\\u62C9\\u83DC\\u5355\\u7B49\\u9700\\u8981\\u7A81\\u7834\\u7236\\u7EC4\\u4EF6\\u7684 overflow \\u6216 z-index \\u9650\\u5236\\u7684\\u573A\\u666F\\u975E\\u5E38\\u6709\\u7528\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"ReactDOM.createPortal(child, container)\"}),\" \\u521B\\u5EFA\\u4E00\\u4E2A portal\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"React Portals \\u6709\\u4EC0\\u4E48\\u7528\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7B80\\u4ECB\"}),`\n`,(0,n.jsx)(e.p,{children:\"React Portals \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u5C06\\u5B50\\u9879\\u6E32\\u67D3\\u5230\\u5B58\\u5728\\u4E8E\\u7236\\u7EC4\\u4EF6 DOM \\u7ED3\\u6784\\u4E4B\\u5916\\u7684 DOM \\u8282\\u70B9\\u4E2D\\u7684\\u65B9\\u6CD5\\u3002\\u8FD9\\u5BF9\\u4E8E\\u67D0\\u4E9B\\u9700\\u8981\\u7A81\\u7834\\u6B63\\u5E38\\u7236\\u5B50 DOM \\u7ED3\\u6784\\u7684 UI \\u6A21\\u5F0F\\u7279\\u522B\\u6709\\u7528\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u6A21\\u6001\\u6846\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6A21\\u6001\\u6846\\u901A\\u5E38\\u9700\\u8981\\u5728\\u7236\\u7EC4\\u4EF6\\u4E4B\\u5916\\u6E32\\u67D3\\uFF0C\\u4EE5\\u907F\\u514D z-index \\u548C overflow \\u95EE\\u9898\\u3002\\u901A\\u8FC7\\u4F7F\\u7528 portal\\uFF0C\\u60A8\\u53EF\\u4EE5\\u786E\\u4FDD\\u6A21\\u6001\\u6846\\u5728 DOM \\u7684\\u9876\\u5C42\\u6E32\\u67D3\\uFF0C\\u4ECE\\u800C\\u66F4\\u5BB9\\u6613\\u7BA1\\u7406\\u5176\\u53EF\\u89C1\\u6027\\u548C\\u5B9A\\u4F4D\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst Modal = ({ isOpen, children }) => {\n  if (!isOpen) return null;\n\n  return ReactDOM.createPortal(\n    <div className=\"modal\">{children}</div>,\n    document.getElementById('modal-root'),\n  );\n};\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u5DE5\\u5177\\u63D0\\u793A\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5DE5\\u5177\\u63D0\\u793A\\u9700\\u8981\\u5728\\u7236\\u7EC4\\u4EF6\\u4E4B\\u5916\\u6E32\\u67D3\\uFF0C\\u4EE5\\u907F\\u514D\\u88AB overflow \\u8BBE\\u7F6E\\u526A\\u5207\\u3002\\u4F7F\\u7528 portal \\u5141\\u8BB8\\u5DE5\\u5177\\u63D0\\u793A\\u6B63\\u786E\\u5730\\u5B9A\\u4F4D\\uFF0C\\u800C\\u4E0D\\u4F1A\\u53D7\\u5230\\u7236\\u7EC4\\u4EF6\\u6837\\u5F0F\\u7684\\u7EA6\\u675F\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst Tooltip = ({ text, targetRef }) => {\n  const tooltipStyle = {\n    position: 'absolute',\n    top: targetRef.current.offsetTop,\n    left: targetRef.current.offsetLeft,\n  };\n\n  return ReactDOM.createPortal(\n    <div className=\"tooltip\" style={tooltipStyle}>\n      {text}\n    </div>,\n    document.body,\n  );\n};\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4E0B\\u62C9\\u83DC\\u5355\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E0B\\u62C9\\u83DC\\u5355\\u901A\\u5E38\\u9700\\u8981\\u5728\\u7236\\u7EC4\\u4EF6\\u4E4B\\u5916\\u6E32\\u67D3\\uFF0C\\u4EE5\\u907F\\u514D\\u88AB overflow \\u8BBE\\u7F6E\\u526A\\u5207\\u3002\\u4F7F\\u7528 portal \\u5141\\u8BB8\\u4E0B\\u62C9\\u83DC\\u5355\\u6B63\\u786E\\u5730\\u5B9A\\u4F4D\\uFF0C\\u800C\\u4E0D\\u4F1A\\u53D7\\u5230\\u7236\\u7EC4\\u4EF6\\u6837\\u5F0F\\u7684\\u7EA6\\u675F\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst Dropdown = ({ isOpen, children }) => {\n  if (!isOpen) return null;\n\n  return ReactDOM.createPortal(\n    <div className=\"dropdown\">{children}</div>,\n    document.body,\n  );\n};\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5982\\u4F55\\u521B\\u5EFA portal\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u521B\\u5EFA\\u4E00\\u4E2A portal\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"ReactDOM.createPortal\"}),\" \\u65B9\\u6CD5\\u3002\\u6B64\\u65B9\\u6CD5\\u63A5\\u53D7\\u4E24\\u4E2A\\u53C2\\u6570\\uFF1A\\u8981\\u6E32\\u67D3\\u7684\\u5B50\\u5143\\u7D20\\u548C\\u8981\\u5C06\\u5176\\u6E32\\u67D3\\u5230\\u7684 DOM \\u8282\\u70B9\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`ReactDOM.createPortal(child, container);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u7A81\\u7834\\u7236\\u7EA7\\u7EA6\\u675F\"}),\"\\uFF1APortals \\u5141\\u8BB8\\u60A8\\u5728\\u7236\\u7EC4\\u4EF6\\u7684 DOM \\u5C42\\u6B21\\u7ED3\\u6784\\u4E4B\\u5916\\u6E32\\u67D3\\u7EC4\\u4EF6\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u907F\\u514D z-index \\u548C overflow \\u95EE\\u9898\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6539\\u8FDB\\u7684\\u53EF\\u8BBF\\u95EE\\u6027\"}),\"\\uFF1A\\u901A\\u8FC7\\u5728 DOM \\u7684\\u9876\\u5C42\\u6E32\\u67D3\\u6A21\\u6001\\u6846\\u548C\\u5DE5\\u5177\\u63D0\\u793A\\u7B49\\u7EC4\\u4EF6\\uFF0C\\u60A8\\u53EF\\u4EE5\\u786E\\u4FDD\\u5B83\\u4EEC\\u66F4\\u5BB9\\u6613\\u88AB\\u5C4F\\u5E55\\u9605\\u8BFB\\u5668\\u548C\\u5176\\u4ED6\\u8F85\\u52A9\\u6280\\u672F\\u8BBF\\u95EE\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u7B80\\u5316\\u6837\\u5F0F\"}),\"\\uFF1A\\u901A\\u8FC7\\u5728\\u7236\\u7EC4\\u4EF6\\u4E4B\\u5916\\u6E32\\u67D3\\u7EC4\\u4EF6\\uFF0C\\u60A8\\u53EF\\u4EE5\\u907F\\u514D\\u590D\\u6742\\u7684 CSS \\u89C4\\u5219\\uFF0C\\u5E76\\u786E\\u4FDD\\u7EC4\\u4EF6\\u7684\\u6837\\u5F0F\\u6B63\\u786E\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react-dom/createPortal\",children:\"React createPortal documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://blog.logrocket.com/building-a-modal-with-react-portals/\",children:\"Building a modal with React Portals\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.smashingmagazine.com/2020/03/react-portals-accessibility/\",children:\"Using React Portals for better accessibility\"})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return O(P);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-render-props-in-react-and-what-are-they-for/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-render-props-in-react-and-what-are-they-for/en-US.json
index 25e6f9380..b63b21f44 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-render-props-in-react-and-what-are-they-for/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-render-props-in-react-and-what-are-they-for/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-are-render-props-in-react-and-what-are-they-for/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},a=(t,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!g.call(t,o)&&o!==r&&i(t,o,{get:()=>e[o],enumerable:!(s=p(e,o))||s.enumerable});return t};var b=(t,e,r)=>(r=t!=null?l(m(t)):{},a(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),w=t=>a(i({},\"__esModule\",{value:!0}),t);var h=f((R,c)=>{c.exports=_jsx_runtime});var y={};x(y,{default:()=>v,frontmatter:()=>k});var n=b(h()),k={title:\"What are render props in React and what are they for?\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Render props in React are a technique for sharing code between components using a prop whose value is a function. This function returns a React element and allows you to pass data to the child component. It helps in reusing component logic without using higher-order components or hooks.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`class DataFetcher extends React.Component {\n  state = { data: null };\n\n  componentDidMount() {\n    fetch(this.props.url)\n      .then((response) => response.json())\n      .then((data) => this.setState({ data }));\n  }\n\n  render() {\n    return this.props.render(this.state.data);\n  }\n}\n\n// Usage\n<DataFetcher\n  url=\"/api/data\"\n  render={(data) => <div>{data ? data.name : 'Loading...'}</div>}\n/>;\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are render props in React and what are they for?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition\"}),`\n`,(0,n.jsx)(e.p,{children:'Render props is a pattern in React for sharing code between components using a prop whose value is a function. This function is called a \"render prop\" because it is used to determine what to render.'}),`\n`,(0,n.jsx)(e.h3,{children:\"Purpose\"}),`\n`,(0,n.jsx)(e.p,{children:\"Render props are used to:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Share logic between components without using higher-order components (HOCs) or hooks\"}),`\n`,(0,n.jsx)(e.li,{children:\"Make components more reusable and composable\"}),`\n`,(0,n.jsx)(e.li,{children:\"Improve code readability and maintainability\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"How it works\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A component that uses a render prop takes a function as a prop. This function is called within the component's \",(0,n.jsx)(e.code,{children:\"render\"}),\" method to produce the desired output.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here is a simple example to illustrate the concept:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`class MouseTracker extends React.Component {\n  state = { x: 0, y: 0 };\n\n  handleMouseMove = (event) => {\n    this.setState({\n      x: event.clientX,\n      y: event.clientY,\n    });\n  };\n\n  render() {\n    return (\n      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>\n        {this.props.render(this.state)}\n      </div>\n    );\n  }\n}\n\n// Usage\n<MouseTracker\n  render={({ x, y }) => (\n    <h1>\n      The mouse position is ({x}, {y})\n    </h1>\n  )}\n/>;\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"MouseTracker\"}),\" is a component that tracks the mouse position and passes the coordinates to the \",(0,n.jsx)(e.code,{children:\"render\"}),\" prop function. The \",(0,n.jsx)(e.code,{children:\"render\"}),\" prop function then determines how to display the coordinates.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reusability\"}),\": The logic for tracking the mouse position is encapsulated in \",(0,n.jsx)(e.code,{children:\"MouseTracker\"}),\", making it reusable across different parts of the application.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Separation of concerns\"}),\": The \",(0,n.jsx)(e.code,{children:\"MouseTracker\"}),\" component is responsible for tracking the mouse position, while the \",(0,n.jsx)(e.code,{children:\"render\"}),\" prop function is responsible for rendering the UI.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Flexibility\"}),\": Different UI representations can be created by passing different \",(0,n.jsx)(e.code,{children:\"render\"}),\" prop functions to the same \",(0,n.jsx)(e.code,{children:\"MouseTracker\"}),\" component.\"]}),`\n`]}),`\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://kentcdodds.com/blog/compound-components-with-react-hooks\",children:\"Advanced React patterns\"})}),`\n`]})]})}function M(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var v=M;return w(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},a=(t,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!g.call(t,o)&&o!==r&&i(t,o,{get:()=>e[o],enumerable:!(s=u(e,o))||s.enumerable});return t};var k=(t,e,r)=>(r=t!=null?p(f(t)):{},a(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),M=t=>a(i({},\"__esModule\",{value:!0}),t);var h=x((T,c)=>{c.exports=_jsx_runtime});var v={};w(v,{default:()=>l,frontmatter:()=>b});var n=k(h()),b={title:\"What are render props in React and what are they for?\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Render props in React are a technique for sharing code between components using a prop whose value is a function. This function returns a React element and allows you to pass data to the child component. It helps in reusing component logic without using higher-order components or hooks.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`class DataFetcher extends React.Component {\n  state = { data: null };\n\n  componentDidMount() {\n    fetch(this.props.url)\n      .then((response) => response.json())\n      .then((data) => this.setState({ data }));\n  }\n\n  render() {\n    return this.props.render(this.state.data);\n  }\n}\n\n// Usage\n<DataFetcher\n  url=\"/api/data\"\n  render={(data) => <div>{data ? data.name : 'Loading...'}</div>}\n/>;\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are render props in React and what are they for?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition\"}),`\n`,(0,n.jsx)(e.p,{children:'Render props is a pattern in React for sharing code between components using a prop whose value is a function. This function is called a \"render prop\" because it is used to determine what to render.'}),`\n`,(0,n.jsx)(e.h3,{children:\"Purpose\"}),`\n`,(0,n.jsx)(e.p,{children:\"Render props are used to:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Share logic between components without using higher-order components (HOCs) or hooks\"}),`\n`,(0,n.jsx)(e.li,{children:\"Make components more reusable and composable\"}),`\n`,(0,n.jsx)(e.li,{children:\"Improve code readability and maintainability\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"How it works\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A component that uses a render prop takes a function as a prop. This function is called within the component's \",(0,n.jsx)(e.code,{children:\"render\"}),\" method to produce the desired output.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here is a simple example to illustrate the concept:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`class MouseTracker extends React.Component {\n  state = { x: 0, y: 0 };\n\n  handleMouseMove = (event) => {\n    this.setState({\n      x: event.clientX,\n      y: event.clientY,\n    });\n  };\n\n  render() {\n    return (\n      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>\n        {this.props.render(this.state)}\n      </div>\n    );\n  }\n}\n\n// Usage\n<MouseTracker\n  render={({ x, y }) => (\n    <h1>\n      The mouse position is ({x}, {y})\n    </h1>\n  )}\n/>;\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"MouseTracker\"}),\" is a component that tracks the mouse position and passes the coordinates to the \",(0,n.jsx)(e.code,{children:\"render\"}),\" prop function. The \",(0,n.jsx)(e.code,{children:\"render\"}),\" prop function then determines how to display the coordinates.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reusability\"}),\": The logic for tracking the mouse position is encapsulated in \",(0,n.jsx)(e.code,{children:\"MouseTracker\"}),\", making it reusable across different parts of the application.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Separation of concerns\"}),\": The \",(0,n.jsx)(e.code,{children:\"MouseTracker\"}),\" component is responsible for tracking the mouse position, while the \",(0,n.jsx)(e.code,{children:\"render\"}),\" prop function is responsible for rendering the UI.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Flexibility\"}),\": Different UI representations can be created by passing different \",(0,n.jsx)(e.code,{children:\"render\"}),\" prop functions to the same \",(0,n.jsx)(e.code,{children:\"MouseTracker\"}),\" component.\"]}),`\n`]}),`\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://kentcdodds.com/blog/compound-components-with-react-hooks\",children:\"Advanced React patterns\"})}),`\n`]})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return M(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-render-props-in-react-and-what-are-they-for/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-render-props-in-react-and-what-are-they-for/zh-CN.json
index 26351ecc9..0e9fbfed0 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-render-props-in-react-and-what-are-they-for/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-render-props-in-react-and-what-are-they-for/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-are-render-props-in-react-and-what-are-they-for/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),M=(r,n)=>{for(var t in n)c(r,t,{get:n[t],enumerable:!0})},h=(r,n,t,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let d of u(n))!g.call(r,d)&&d!==t&&c(r,d,{get:()=>n[d],enumerable:!(o=p(n,d))||o.enumerable});return r};var R=(r,n,t)=>(t=r!=null?a(m(r)):{},h(n||!r||!r.__esModule?c(t,\"default\",{value:r,enumerable:!0}):t,r)),v=r=>h(c({},\"__esModule\",{value:!0}),r);var s=x((y,i)=>{i.exports=_jsx_runtime});var f={};M(f,{default:()=>T,frontmatter:()=>j});var e=R(s()),j={title:\"React \\u4E2D\\u7684 render props \\u662F\\u4EC0\\u4E48\\uFF0C\\u5B83\\u4EEC\\u6709\\u4EC0\\u4E48\\u7528\\uFF1F\"};function l(r){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u4E2D\\u7684 Render props \\u662F\\u4E00\\u79CD\\u5728\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u5171\\u4EAB\\u4EE3\\u7801\\u7684\\u6280\\u672F\\uFF0C\\u5B83\\u4F7F\\u7528\\u4E00\\u4E2A\\u503C\\u4E3A\\u51FD\\u6570\\u7684 prop\\u3002\\u6B64\\u51FD\\u6570\\u8FD4\\u56DE\\u4E00\\u4E2A React \\u5143\\u7D20\\uFF0C\\u5E76\\u5141\\u8BB8\\u60A8\\u5C06\\u6570\\u636E\\u4F20\\u9012\\u7ED9\\u5B50\\u7EC4\\u4EF6\\u3002\\u5B83\\u6709\\u52A9\\u4E8E\\u91CD\\u7528\\u7EC4\\u4EF6\\u903B\\u8F91\\uFF0C\\u800C\\u65E0\\u9700\\u4F7F\\u7528\\u9AD8\\u9636\\u7EC4\\u4EF6\\u6216\\u94A9\\u5B50\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`class DataFetcher extends React.Component {\n  state = { data: null };\n\n  componentDidMount() {\n    fetch(this.props.url)\n      .then((response) => response.json())\n      .then((data) => this.setState({ data }));\n  }\n\n  render() {\n    return this.props.render(this.state.data);\n  }\n}\n\n// Usage\n<DataFetcher\n  url=\"/api/data\"\n  render={(data) => <div>{data ? data.name : 'Loading...'}</div>}\n/>;\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u4E2D\\u7684 render props \\u662F\\u4EC0\\u4E48\\uFF0C\\u5B83\\u4EEC\\u6709\\u4EC0\\u4E48\\u7528\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"Render props \\u662F React \\u4E2D\\u4E00\\u79CD\\u5728\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u5171\\u4EAB\\u4EE3\\u7801\\u7684\\u6A21\\u5F0F\\uFF0C\\u5B83\\u4F7F\\u7528\\u4E00\\u4E2A\\u503C\\u4E3A\\u51FD\\u6570\\u7684 prop\\u3002\\u6B64\\u51FD\\u6570\\u88AB\\u79F0\\u4E3A\\u201Crender prop\\u201D\\uFF0C\\u56E0\\u4E3A\\u5B83\\u7528\\u4E8E\\u786E\\u5B9A\\u8981\\u6E32\\u67D3\\u7684\\u5185\\u5BB9\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u76EE\\u7684\"}),`\n`,(0,e.jsx)(n.p,{children:\"Render props \\u7528\\u4E8E\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5728\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u5171\\u4EAB\\u903B\\u8F91\\uFF0C\\u800C\\u65E0\\u9700\\u4F7F\\u7528\\u9AD8\\u9636\\u7EC4\\u4EF6 (HOC) \\u6216\\u94A9\\u5B50\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u7EC4\\u4EF6\\u66F4\\u5177\\u53EF\\u91CD\\u7528\\u6027\\u548C\\u53EF\\u7EC4\\u5408\\u6027\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u63D0\\u9AD8\\u4EE3\\u7801\\u53EF\\u8BFB\\u6027\\u548C\\u53EF\\u7EF4\\u62A4\\u6027\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 render prop \\u7684\\u7EC4\\u4EF6\\u5C06\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A prop\\u3002\\u6B64\\u51FD\\u6570\\u5728\\u7EC4\\u4EF6\\u7684 \",(0,e.jsx)(n.code,{children:\"render\"}),\" \\u65B9\\u6CD5\\u4E2D\\u88AB\\u8C03\\u7528\\uFF0C\\u4EE5\\u751F\\u6210\\u6240\\u9700\\u7684\\u8F93\\u51FA\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u793A\\u4F8B\\uFF0C\\u7528\\u4E8E\\u8BF4\\u660E\\u8FD9\\u4E2A\\u6982\\u5FF5\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`class MouseTracker extends React.Component {\n  state = { x: 0, y: 0 };\n\n  handleMouseMove = (event) => {\n    this.setState({\n      x: event.clientX,\n      y: event.clientY,\n    });\n  };\n\n  render() {\n    return (\n      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>\n        {this.props.render(this.state)}\n      </div>\n    );\n  }\n}\n\n// Usage\n<MouseTracker\n  render={({ x, y }) => (\n    <h1>\n      The mouse position is ({x}, {y})\n    </h1>\n  )}\n/>;\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"MouseTracker\"}),\" \\u662F\\u4E00\\u4E2A\\u8DDF\\u8E2A\\u9F20\\u6807\\u4F4D\\u7F6E\\u5E76\\u5C06\\u5750\\u6807\\u4F20\\u9012\\u7ED9 \",(0,e.jsx)(n.code,{children:\"render\"}),\" prop \\u51FD\\u6570\\u7684\\u7EC4\\u4EF6\\u3002\\u7136\\u540E\\uFF0C\",(0,e.jsx)(n.code,{children:\"render\"}),\" prop \\u51FD\\u6570\\u786E\\u5B9A\\u5982\\u4F55\\u663E\\u793A\\u5750\\u6807\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u91CD\\u7528\\u6027\"}),\"\\uFF1A\\u8DDF\\u8E2A\\u9F20\\u6807\\u4F4D\\u7F6E\\u7684\\u903B\\u8F91\\u88AB\\u5C01\\u88C5\\u5728 \",(0,e.jsx)(n.code,{children:\"MouseTracker\"}),\" \\u4E2D\\uFF0C\\u4F7F\\u5176\\u53EF\\u5728\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4E0D\\u540C\\u90E8\\u5206\\u91CD\\u590D\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5173\\u6CE8\\u70B9\\u5206\\u79BB\"}),\"\\uFF1A\",(0,e.jsx)(n.code,{children:\"MouseTracker\"}),\" \\u7EC4\\u4EF6\\u8D1F\\u8D23\\u8DDF\\u8E2A\\u9F20\\u6807\\u4F4D\\u7F6E\\uFF0C\\u800C \",(0,e.jsx)(n.code,{children:\"render\"}),\" prop \\u51FD\\u6570\\u8D1F\\u8D23\\u6E32\\u67D3 UI\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7075\\u6D3B\\u6027\"}),\"\\uFF1A\\u901A\\u8FC7\\u5C06\\u4E0D\\u540C\\u7684 \",(0,e.jsx)(n.code,{children:\"render\"}),\" prop \\u51FD\\u6570\\u4F20\\u9012\\u7ED9\\u540C\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"MouseTracker\"}),\" \\u7EC4\\u4EF6\\uFF0C\\u53EF\\u4EE5\\u521B\\u5EFA\\u4E0D\\u540C\\u7684 UI \\u8868\\u793A\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://kentcdodds.com/blog/compound-components-with-react-hooks\",children:\"\\u9AD8\\u7EA7 React \\u6A21\\u5F0F\"})}),`\n`]})]})}function k(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(l,r)})):l(r)}var T=k;return v(f);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var M=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),R=(r,n)=>{for(var t in n)c(r,t,{get:n[t],enumerable:!0})},h=(r,n,t,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let d of m(n))!g.call(r,d)&&d!==t&&c(r,d,{get:()=>n[d],enumerable:!(o=u(n,d))||o.enumerable});return r};var v=(r,n,t)=>(t=r!=null?p(x(r)):{},h(n||!r||!r.__esModule?c(t,\"default\",{value:r,enumerable:!0}):t,r)),j=r=>h(c({},\"__esModule\",{value:!0}),r);var s=M((_,i)=>{i.exports=_jsx_runtime});var T={};R(T,{default:()=>a,frontmatter:()=>k});var e=v(s()),k={title:\"React \\u4E2D\\u7684 render props \\u662F\\u4EC0\\u4E48\\uFF0C\\u5B83\\u4EEC\\u6709\\u4EC0\\u4E48\\u7528\\uFF1F\"};function l(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u4E2D\\u7684 Render props \\u662F\\u4E00\\u79CD\\u5728\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u5171\\u4EAB\\u4EE3\\u7801\\u7684\\u6280\\u672F\\uFF0C\\u5B83\\u4F7F\\u7528\\u4E00\\u4E2A\\u503C\\u4E3A\\u51FD\\u6570\\u7684 prop\\u3002\\u6B64\\u51FD\\u6570\\u8FD4\\u56DE\\u4E00\\u4E2A React \\u5143\\u7D20\\uFF0C\\u5E76\\u5141\\u8BB8\\u60A8\\u5C06\\u6570\\u636E\\u4F20\\u9012\\u7ED9\\u5B50\\u7EC4\\u4EF6\\u3002\\u5B83\\u6709\\u52A9\\u4E8E\\u91CD\\u7528\\u7EC4\\u4EF6\\u903B\\u8F91\\uFF0C\\u800C\\u65E0\\u9700\\u4F7F\\u7528\\u9AD8\\u9636\\u7EC4\\u4EF6\\u6216\\u94A9\\u5B50\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`class DataFetcher extends React.Component {\n  state = { data: null };\n\n  componentDidMount() {\n    fetch(this.props.url)\n      .then((response) => response.json())\n      .then((data) => this.setState({ data }));\n  }\n\n  render() {\n    return this.props.render(this.state.data);\n  }\n}\n\n// Usage\n<DataFetcher\n  url=\"/api/data\"\n  render={(data) => <div>{data ? data.name : 'Loading...'}</div>}\n/>;\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u4E2D\\u7684 render props \\u662F\\u4EC0\\u4E48\\uFF0C\\u5B83\\u4EEC\\u6709\\u4EC0\\u4E48\\u7528\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"Render props \\u662F React \\u4E2D\\u4E00\\u79CD\\u5728\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u5171\\u4EAB\\u4EE3\\u7801\\u7684\\u6A21\\u5F0F\\uFF0C\\u5B83\\u4F7F\\u7528\\u4E00\\u4E2A\\u503C\\u4E3A\\u51FD\\u6570\\u7684 prop\\u3002\\u6B64\\u51FD\\u6570\\u88AB\\u79F0\\u4E3A\\u201Crender prop\\u201D\\uFF0C\\u56E0\\u4E3A\\u5B83\\u7528\\u4E8E\\u786E\\u5B9A\\u8981\\u6E32\\u67D3\\u7684\\u5185\\u5BB9\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u76EE\\u7684\"}),`\n`,(0,e.jsx)(n.p,{children:\"Render props \\u7528\\u4E8E\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5728\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u5171\\u4EAB\\u903B\\u8F91\\uFF0C\\u800C\\u65E0\\u9700\\u4F7F\\u7528\\u9AD8\\u9636\\u7EC4\\u4EF6 (HOC) \\u6216\\u94A9\\u5B50\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u7EC4\\u4EF6\\u66F4\\u5177\\u53EF\\u91CD\\u7528\\u6027\\u548C\\u53EF\\u7EC4\\u5408\\u6027\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u63D0\\u9AD8\\u4EE3\\u7801\\u53EF\\u8BFB\\u6027\\u548C\\u53EF\\u7EF4\\u62A4\\u6027\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 render prop \\u7684\\u7EC4\\u4EF6\\u5C06\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A prop\\u3002\\u6B64\\u51FD\\u6570\\u5728\\u7EC4\\u4EF6\\u7684 \",(0,e.jsx)(n.code,{children:\"render\"}),\" \\u65B9\\u6CD5\\u4E2D\\u88AB\\u8C03\\u7528\\uFF0C\\u4EE5\\u751F\\u6210\\u6240\\u9700\\u7684\\u8F93\\u51FA\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u793A\\u4F8B\\uFF0C\\u7528\\u4E8E\\u8BF4\\u660E\\u8FD9\\u4E2A\\u6982\\u5FF5\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`class MouseTracker extends React.Component {\n  state = { x: 0, y: 0 };\n\n  handleMouseMove = (event) => {\n    this.setState({\n      x: event.clientX,\n      y: event.clientY,\n    });\n  };\n\n  render() {\n    return (\n      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>\n        {this.props.render(this.state)}\n      </div>\n    );\n  }\n}\n\n// Usage\n<MouseTracker\n  render={({ x, y }) => (\n    <h1>\n      The mouse position is ({x}, {y})\n    </h1>\n  )}\n/>;\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"MouseTracker\"}),\" \\u662F\\u4E00\\u4E2A\\u8DDF\\u8E2A\\u9F20\\u6807\\u4F4D\\u7F6E\\u5E76\\u5C06\\u5750\\u6807\\u4F20\\u9012\\u7ED9 \",(0,e.jsx)(n.code,{children:\"render\"}),\" prop \\u51FD\\u6570\\u7684\\u7EC4\\u4EF6\\u3002\\u7136\\u540E\\uFF0C\",(0,e.jsx)(n.code,{children:\"render\"}),\" prop \\u51FD\\u6570\\u786E\\u5B9A\\u5982\\u4F55\\u663E\\u793A\\u5750\\u6807\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u91CD\\u7528\\u6027\"}),\"\\uFF1A\\u8DDF\\u8E2A\\u9F20\\u6807\\u4F4D\\u7F6E\\u7684\\u903B\\u8F91\\u88AB\\u5C01\\u88C5\\u5728 \",(0,e.jsx)(n.code,{children:\"MouseTracker\"}),\" \\u4E2D\\uFF0C\\u4F7F\\u5176\\u53EF\\u5728\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4E0D\\u540C\\u90E8\\u5206\\u91CD\\u590D\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5173\\u6CE8\\u70B9\\u5206\\u79BB\"}),\"\\uFF1A\",(0,e.jsx)(n.code,{children:\"MouseTracker\"}),\" \\u7EC4\\u4EF6\\u8D1F\\u8D23\\u8DDF\\u8E2A\\u9F20\\u6807\\u4F4D\\u7F6E\\uFF0C\\u800C \",(0,e.jsx)(n.code,{children:\"render\"}),\" prop \\u51FD\\u6570\\u8D1F\\u8D23\\u6E32\\u67D3 UI\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7075\\u6D3B\\u6027\"}),\"\\uFF1A\\u901A\\u8FC7\\u5C06\\u4E0D\\u540C\\u7684 \",(0,e.jsx)(n.code,{children:\"render\"}),\" prop \\u51FD\\u6570\\u4F20\\u9012\\u7ED9\\u540C\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"MouseTracker\"}),\" \\u7EC4\\u4EF6\\uFF0C\\u53EF\\u4EE5\\u521B\\u5EFA\\u4E0D\\u540C\\u7684 UI \\u8868\\u793A\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://kentcdodds.com/blog/compound-components-with-react-hooks\",children:\"\\u9AD8\\u7EA7 React \\u6A21\\u5F0F\"})}),`\n`]})]})}function a(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(l,{...r})}):l(r)}return j(T);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-rest-parameters-and-how-are-they-used/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-rest-parameters-and-how-are-they-used/en-US.json
index 97b6aec95..aaf541761 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-rest-parameters-and-how-are-they-used/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-rest-parameters-and-how-are-they-used/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-rest-parameters-and-how-are-they-used/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),y=(r,e)=>{for(var t in e)i(r,t,{get:e[t],enumerable:!0})},c=(r,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!f.call(r,a)&&a!==t&&i(r,a,{get:()=>e[a],enumerable:!(s=u(e,a))||s.enumerable});return r};var b=(r,e,t)=>(t=r!=null?d(p(r)):{},c(e||!r||!r.__esModule?i(t,\"default\",{value:r,enumerable:!0}):t,r)),w=r=>c(i({},\"__esModule\",{value:!0}),r);var l=g((S,o)=>{o.exports=_jsx_runtime});var R={};y(R,{default:()=>v,frontmatter:()=>x});var n=b(l()),x={title:\"What are rest parameters and how are they used?\"};function h(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Rest parameters in JavaScript allow a function to accept an indefinite number of arguments as an array. They are denoted by three dots (\",(0,n.jsx)(e.code,{children:\"...\"}),\") followed by the name of the array. This feature is useful for functions that need to handle multiple arguments without knowing the exact number in advance.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function sum(...numbers) {\n  return numbers.reduce((acc, curr) => acc + curr, 0);\n}\n\nconsole.log(sum(1, 2, 3, 4)); // Output: 10\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Rest parameters\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Rest parameters allow a function to accept an indefinite number of arguments as an array. They are represented by three dots (\",(0,n.jsx)(e.code,{children:\"...\"}),\") followed by the name of the array.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,n.jsx)(e.p,{children:\"The syntax for rest parameters is straightforward. You place three dots before the last parameter in the function definition:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function myFunction(a, b, ...rest) {\n  // 'rest' is an array containing the remaining arguments\n  console.log(rest); // [3, 4, 5]\n}\nmyFunction(1, 2, 3, 4, 5);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Usage\"}),`\n`,(0,n.jsx)(e.p,{children:\"Rest parameters are useful in various scenarios, such as when you need to handle multiple arguments without knowing their exact number in advance.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example: Summing numbers\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here's a simple example of a function that sums an indefinite number of arguments:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function sum(...numbers) {\n  return numbers.reduce((acc, curr) => acc + curr, 0);\n}\n\nconsole.log(sum(1, 2, 3, 4)); // Output: 10\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the \",(0,n.jsx)(e.code,{children:\"sum\"}),\" function uses the rest parameter \",(0,n.jsx)(e.code,{children:\"numbers\"}),\" to collect all the arguments passed to it into an array. The \",(0,n.jsx)(e.code,{children:\"reduce\"}),\" method is then used to sum up the elements of the array.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example: Combining arrays\"}),`\n`,(0,n.jsx)(e.p,{children:\"Rest parameters can also be used to combine multiple arrays into one:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function combineArrays(...arrays) {\n  return arrays.flat();\n}\n\nconsole.log(combineArrays([1, 2], [3, 4], [5, 6])); // Output: [1, 2, 3, 4, 5, 6]\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the \",(0,n.jsx)(e.code,{children:\"combineArrays\"}),\" function uses the rest parameter \",(0,n.jsx)(e.code,{children:\"arrays\"}),\" to collect all the arrays passed to it into a single array. The \",(0,n.jsx)(e.code,{children:\"flat\"}),\" method is then used to flatten the array of arrays into a single array.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Important points\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Rest parameters must be the last parameter in the function definition.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Only one rest parameter is allowed per function.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Rest parameters are different from the \",(0,n.jsx)(e.code,{children:\"arguments\"}),\" object, which is an array-like object available within all non-arrow functions.\"]}),`\n`]}),`\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/Web/JavaScript/Reference/Functions/rest_parameters\",children:\"MDN Web Docs: Rest parameters\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/rest-parameters-spread\",children:\"JavaScript.info: Rest parameters and spread syntax\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3schools.com/js/js_function_parameters.asp\",children:\"W3Schools: JavaScript Function Parameters\"})}),`\n`]})]})}function j(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(h,r)})):h(r)}var v=j;return w(R);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),b=(r,e)=>{for(var t in e)i(r,t,{get:e[t],enumerable:!0})},c=(r,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!y.call(r,a)&&a!==t&&i(r,a,{get:()=>e[a],enumerable:!(s=m(e,a))||s.enumerable});return r};var w=(r,e,t)=>(t=r!=null?u(f(r)):{},c(e||!r||!r.__esModule?i(t,\"default\",{value:r,enumerable:!0}):t,r)),x=r=>c(i({},\"__esModule\",{value:!0}),r);var l=g((_,o)=>{o.exports=_jsx_runtime});var v={};b(v,{default:()=>d,frontmatter:()=>j});var n=w(l()),j={title:\"What are rest parameters and how are they used?\"};function h(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Rest parameters in JavaScript allow a function to accept an indefinite number of arguments as an array. They are denoted by three dots (\",(0,n.jsx)(e.code,{children:\"...\"}),\") followed by the name of the array. This feature is useful for functions that need to handle multiple arguments without knowing the exact number in advance.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function sum(...numbers) {\n  return numbers.reduce((acc, curr) => acc + curr, 0);\n}\n\nconsole.log(sum(1, 2, 3, 4)); // Output: 10\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Rest parameters\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Rest parameters allow a function to accept an indefinite number of arguments as an array. They are represented by three dots (\",(0,n.jsx)(e.code,{children:\"...\"}),\") followed by the name of the array.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,n.jsx)(e.p,{children:\"The syntax for rest parameters is straightforward. You place three dots before the last parameter in the function definition:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function myFunction(a, b, ...rest) {\n  // 'rest' is an array containing the remaining arguments\n  console.log(rest); // [3, 4, 5]\n}\nmyFunction(1, 2, 3, 4, 5);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Usage\"}),`\n`,(0,n.jsx)(e.p,{children:\"Rest parameters are useful in various scenarios, such as when you need to handle multiple arguments without knowing their exact number in advance.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example: Summing numbers\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here's a simple example of a function that sums an indefinite number of arguments:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function sum(...numbers) {\n  return numbers.reduce((acc, curr) => acc + curr, 0);\n}\n\nconsole.log(sum(1, 2, 3, 4)); // Output: 10\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the \",(0,n.jsx)(e.code,{children:\"sum\"}),\" function uses the rest parameter \",(0,n.jsx)(e.code,{children:\"numbers\"}),\" to collect all the arguments passed to it into an array. The \",(0,n.jsx)(e.code,{children:\"reduce\"}),\" method is then used to sum up the elements of the array.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example: Combining arrays\"}),`\n`,(0,n.jsx)(e.p,{children:\"Rest parameters can also be used to combine multiple arrays into one:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function combineArrays(...arrays) {\n  return arrays.flat();\n}\n\nconsole.log(combineArrays([1, 2], [3, 4], [5, 6])); // Output: [1, 2, 3, 4, 5, 6]\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the \",(0,n.jsx)(e.code,{children:\"combineArrays\"}),\" function uses the rest parameter \",(0,n.jsx)(e.code,{children:\"arrays\"}),\" to collect all the arrays passed to it into a single array. The \",(0,n.jsx)(e.code,{children:\"flat\"}),\" method is then used to flatten the array of arrays into a single array.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Important points\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Rest parameters must be the last parameter in the function definition.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Only one rest parameter is allowed per function.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Rest parameters are different from the \",(0,n.jsx)(e.code,{children:\"arguments\"}),\" object, which is an array-like object available within all non-arrow functions.\"]}),`\n`]}),`\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/Web/JavaScript/Reference/Functions/rest_parameters\",children:\"MDN Web Docs: Rest parameters\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/rest-parameters-spread\",children:\"JavaScript.info: Rest parameters and spread syntax\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3schools.com/js/js_function_parameters.asp\",children:\"W3Schools: JavaScript Function Parameters\"})}),`\n`]})]})}function d(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return x(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-rest-parameters-and-how-are-they-used/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-rest-parameters-and-how-are-they-used/zh-CN.json
index 9e6b3badf..932badca1 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-rest-parameters-and-how-are-they-used/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-rest-parameters-and-how-are-they-used/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-rest-parameters-and-how-are-they-used/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var o=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),j=(r,n)=>{for(var c in n)l(r,c,{get:n[c],enumerable:!0})},s=(r,n,c,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of m(n))!g.call(r,i)&&i!==c&&l(r,i,{get:()=>n[i],enumerable:!(t=u(n,i))||t.enumerable});return r};var b=(r,n,c)=>(c=r!=null?o(p(r)):{},s(n||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),v=r=>s(l({},\"__esModule\",{value:!0}),r);var a=f((w,h)=>{h.exports=_jsx_runtime});var N={};j(N,{default:()=>x,frontmatter:()=>y});var e=b(a()),y={title:\"\\u4EC0\\u4E48\\u662F\\u5269\\u4F59\\u53C2\\u6570\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u4EEC\\uFF1F\"};function d(r){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"JavaScript \\u4E2D\\u7684\\u5269\\u4F59\\u53C2\\u6570\\u5141\\u8BB8\\u51FD\\u6570\\u5C06\\u4E0D\\u5B9A\\u6570\\u91CF\\u7684\\u53C2\\u6570\\u4F5C\\u4E3A\\u6570\\u7EC4\\u63A5\\u53D7\\u3002\\u5B83\\u4EEC\\u7531\\u4E09\\u4E2A\\u70B9 (\",(0,e.jsx)(n.code,{children:\"...\"}),\") \\u540E\\u8DDF\\u6570\\u7EC4\\u7684\\u540D\\u79F0\\u8868\\u793A\\u3002\\u6B64\\u529F\\u80FD\\u5BF9\\u4E8E\\u9700\\u8981\\u5904\\u7406\\u591A\\u4E2A\\u53C2\\u6570\\u800C\\u65E0\\u9700\\u9884\\u5148\\u77E5\\u9053\\u786E\\u5207\\u6570\\u91CF\\u7684\\u51FD\\u6570\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function sum(...numbers) {\n  return numbers.reduce((acc, curr) => acc + curr, 0);\n}\n\nconsole.log(sum(1, 2, 3, 4)); // Output: 10\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5269\\u4F59\\u53C2\\u6570\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5269\\u4F59\\u53C2\\u6570\\u5141\\u8BB8\\u51FD\\u6570\\u5C06\\u4E0D\\u5B9A\\u6570\\u91CF\\u7684\\u53C2\\u6570\\u4F5C\\u4E3A\\u6570\\u7EC4\\u63A5\\u53D7\\u3002\\u5B83\\u4EEC\\u7531\\u4E09\\u4E2A\\u70B9 (\",(0,e.jsx)(n.code,{children:\"...\"}),\") \\u540E\\u8DDF\\u6570\\u7EC4\\u7684\\u540D\\u79F0\\u8868\\u793A\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5269\\u4F59\\u53C2\\u6570\\u7684\\u8BED\\u6CD5\\u5F88\\u7B80\\u5355\\u3002\\u60A8\\u5C06\\u4E09\\u4E2A\\u70B9\\u653E\\u5728\\u51FD\\u6570\\u5B9A\\u4E49\\u4E2D\\u6700\\u540E\\u4E00\\u4E2A\\u53C2\\u6570\\u7684\\u524D\\u9762\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function myFunction(a, b, ...rest) {\n  // 'rest' is an array containing the remaining arguments\n  console.log(rest); // [3, 4, 5]\n}\nmyFunction(1, 2, 3, 4, 5);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7528\\u6CD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5269\\u4F59\\u53C2\\u6570\\u5728\\u5404\\u79CD\\u60C5\\u51B5\\u4E0B\\u90FD\\u5F88\\u6709\\u7528\\uFF0C\\u4F8B\\u5982\\u5F53\\u60A8\\u9700\\u8981\\u5904\\u7406\\u591A\\u4E2A\\u53C2\\u6570\\u800C\\u65E0\\u9700\\u9884\\u5148\\u77E5\\u9053\\u5B83\\u4EEC\\u7684\\u786E\\u5207\\u6570\\u91CF\\u65F6\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\\uFF1A\\u6C42\\u548C\\u6570\\u5B57\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u5BF9\\u4E0D\\u5B9A\\u6570\\u91CF\\u7684\\u53C2\\u6570\\u6C42\\u548C\\u7684\\u51FD\\u6570\\u7684\\u7B80\\u5355\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function sum(...numbers) {\n  return numbers.reduce((acc, curr) => acc + curr, 0);\n}\n\nconsole.log(sum(1, 2, 3, 4)); // Output: 10\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"sum\"}),\" \\u51FD\\u6570\\u4F7F\\u7528\\u5269\\u4F59\\u53C2\\u6570 \",(0,e.jsx)(n.code,{children:\"numbers\"}),\" \\u5C06\\u4F20\\u9012\\u7ED9\\u5B83\\u7684\\u6240\\u6709\\u53C2\\u6570\\u6536\\u96C6\\u5230\\u4E00\\u4E2A\\u6570\\u7EC4\\u4E2D\\u3002\\u7136\\u540E\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"reduce\"}),\" \\u65B9\\u6CD5\\u5BF9\\u6570\\u7EC4\\u7684\\u5143\\u7D20\\u6C42\\u548C\\u3002\"]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\\uFF1A\\u5408\\u5E76\\u6570\\u7EC4\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5269\\u4F59\\u53C2\\u6570\\u4E5F\\u53EF\\u7528\\u4E8E\\u5C06\\u591A\\u4E2A\\u6570\\u7EC4\\u5408\\u5E76\\u4E3A\\u4E00\\u4E2A\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function combineArrays(...arrays) {\n  return arrays.flat();\n}\n\nconsole.log(combineArrays([1, 2], [3, 4], [5, 6])); // Output: [1, 2, 3, 4, 5, 6]\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"combineArrays\"}),\" \\u51FD\\u6570\\u4F7F\\u7528\\u5269\\u4F59\\u53C2\\u6570 \",(0,e.jsx)(n.code,{children:\"arrays\"}),\" \\u5C06\\u4F20\\u9012\\u7ED9\\u5B83\\u7684\\u6240\\u6709\\u6570\\u7EC4\\u6536\\u96C6\\u5230\\u4E00\\u4E2A\\u6570\\u7EC4\\u4E2D\\u3002\\u7136\\u540E\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"flat\"}),\" \\u65B9\\u6CD5\\u5C06\\u6570\\u7EC4\\u7684\\u6570\\u7EC4\\u5C55\\u5E73\\u4E3A\\u5355\\u4E2A\\u6570\\u7EC4\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u91CD\\u8981\\u63D0\\u793A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"Rest \\u53C2\\u6570\\u5FC5\\u987B\\u662F\\u51FD\\u6570\\u5B9A\\u4E49\\u4E2D\\u7684\\u6700\\u540E\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u6BCF\\u4E2A\\u51FD\\u6570\\u53EA\\u5141\\u8BB8\\u4E00\\u4E2A rest \\u53C2\\u6570\\u3002\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"Rest \\u53C2\\u6570\\u4E0E \",(0,e.jsx)(n.code,{children:\"arguments\"}),\" \\u5BF9\\u8C61\\u4E0D\\u540C\\uFF0C\",(0,e.jsx)(n.code,{children:\"arguments\"}),\" \\u5BF9\\u8C61\\u662F\\u4E00\\u4E2A\\u7C7B\\u4F3C\\u6570\\u7EC4\\u7684\\u5BF9\\u8C61\\uFF0C\\u53EF\\u5728\\u6240\\u6709\\u975E\\u7BAD\\u5934\\u51FD\\u6570\\u4E2D\\u4F7F\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/rest_parameters\",children:\"MDN Web \\u6587\\u6863\\uFF1ARest \\u53C2\\u6570\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://zh.javascript.info/rest-parameters-spread\",children:\"JavaScript.info\\uFF1ARest \\u53C2\\u6570\\u548C\\u5C55\\u5F00\\u8BED\\u6CD5\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.w3schools.com/js/js_function_parameters.asp\",children:\"W3Schools\\uFF1AJavaScript \\u51FD\\u6570\\u53C2\\u6570\"})}),`\n`]})]})}function _(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(d,r)})):d(r)}var x=_;return v(N);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var j=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),b=(r,n)=>{for(var c in n)l(r,c,{get:n[c],enumerable:!0})},h=(r,n,c,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of p(n))!f.call(r,i)&&i!==c&&l(r,i,{get:()=>n[i],enumerable:!(t=m(n,i))||t.enumerable});return r};var v=(r,n,c)=>(c=r!=null?u(g(r)):{},h(n||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),y=r=>h(l({},\"__esModule\",{value:!0}),r);var a=j((R,s)=>{s.exports=_jsx_runtime});var x={};b(x,{default:()=>o,frontmatter:()=>_});var e=v(a()),_={title:\"\\u4EC0\\u4E48\\u662F\\u5269\\u4F59\\u53C2\\u6570\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u4EEC\\uFF1F\"};function d(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"JavaScript \\u4E2D\\u7684\\u5269\\u4F59\\u53C2\\u6570\\u5141\\u8BB8\\u51FD\\u6570\\u5C06\\u4E0D\\u5B9A\\u6570\\u91CF\\u7684\\u53C2\\u6570\\u4F5C\\u4E3A\\u6570\\u7EC4\\u63A5\\u53D7\\u3002\\u5B83\\u4EEC\\u7531\\u4E09\\u4E2A\\u70B9 (\",(0,e.jsx)(n.code,{children:\"...\"}),\") \\u540E\\u8DDF\\u6570\\u7EC4\\u7684\\u540D\\u79F0\\u8868\\u793A\\u3002\\u6B64\\u529F\\u80FD\\u5BF9\\u4E8E\\u9700\\u8981\\u5904\\u7406\\u591A\\u4E2A\\u53C2\\u6570\\u800C\\u65E0\\u9700\\u9884\\u5148\\u77E5\\u9053\\u786E\\u5207\\u6570\\u91CF\\u7684\\u51FD\\u6570\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function sum(...numbers) {\n  return numbers.reduce((acc, curr) => acc + curr, 0);\n}\n\nconsole.log(sum(1, 2, 3, 4)); // Output: 10\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5269\\u4F59\\u53C2\\u6570\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5269\\u4F59\\u53C2\\u6570\\u5141\\u8BB8\\u51FD\\u6570\\u5C06\\u4E0D\\u5B9A\\u6570\\u91CF\\u7684\\u53C2\\u6570\\u4F5C\\u4E3A\\u6570\\u7EC4\\u63A5\\u53D7\\u3002\\u5B83\\u4EEC\\u7531\\u4E09\\u4E2A\\u70B9 (\",(0,e.jsx)(n.code,{children:\"...\"}),\") \\u540E\\u8DDF\\u6570\\u7EC4\\u7684\\u540D\\u79F0\\u8868\\u793A\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5269\\u4F59\\u53C2\\u6570\\u7684\\u8BED\\u6CD5\\u5F88\\u7B80\\u5355\\u3002\\u60A8\\u5C06\\u4E09\\u4E2A\\u70B9\\u653E\\u5728\\u51FD\\u6570\\u5B9A\\u4E49\\u4E2D\\u6700\\u540E\\u4E00\\u4E2A\\u53C2\\u6570\\u7684\\u524D\\u9762\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function myFunction(a, b, ...rest) {\n  // 'rest' is an array containing the remaining arguments\n  console.log(rest); // [3, 4, 5]\n}\nmyFunction(1, 2, 3, 4, 5);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7528\\u6CD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5269\\u4F59\\u53C2\\u6570\\u5728\\u5404\\u79CD\\u60C5\\u51B5\\u4E0B\\u90FD\\u5F88\\u6709\\u7528\\uFF0C\\u4F8B\\u5982\\u5F53\\u60A8\\u9700\\u8981\\u5904\\u7406\\u591A\\u4E2A\\u53C2\\u6570\\u800C\\u65E0\\u9700\\u9884\\u5148\\u77E5\\u9053\\u5B83\\u4EEC\\u7684\\u786E\\u5207\\u6570\\u91CF\\u65F6\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\\uFF1A\\u6C42\\u548C\\u6570\\u5B57\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u5BF9\\u4E0D\\u5B9A\\u6570\\u91CF\\u7684\\u53C2\\u6570\\u6C42\\u548C\\u7684\\u51FD\\u6570\\u7684\\u7B80\\u5355\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function sum(...numbers) {\n  return numbers.reduce((acc, curr) => acc + curr, 0);\n}\n\nconsole.log(sum(1, 2, 3, 4)); // Output: 10\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"sum\"}),\" \\u51FD\\u6570\\u4F7F\\u7528\\u5269\\u4F59\\u53C2\\u6570 \",(0,e.jsx)(n.code,{children:\"numbers\"}),\" \\u5C06\\u4F20\\u9012\\u7ED9\\u5B83\\u7684\\u6240\\u6709\\u53C2\\u6570\\u6536\\u96C6\\u5230\\u4E00\\u4E2A\\u6570\\u7EC4\\u4E2D\\u3002\\u7136\\u540E\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"reduce\"}),\" \\u65B9\\u6CD5\\u5BF9\\u6570\\u7EC4\\u7684\\u5143\\u7D20\\u6C42\\u548C\\u3002\"]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\\uFF1A\\u5408\\u5E76\\u6570\\u7EC4\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5269\\u4F59\\u53C2\\u6570\\u4E5F\\u53EF\\u7528\\u4E8E\\u5C06\\u591A\\u4E2A\\u6570\\u7EC4\\u5408\\u5E76\\u4E3A\\u4E00\\u4E2A\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function combineArrays(...arrays) {\n  return arrays.flat();\n}\n\nconsole.log(combineArrays([1, 2], [3, 4], [5, 6])); // Output: [1, 2, 3, 4, 5, 6]\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"combineArrays\"}),\" \\u51FD\\u6570\\u4F7F\\u7528\\u5269\\u4F59\\u53C2\\u6570 \",(0,e.jsx)(n.code,{children:\"arrays\"}),\" \\u5C06\\u4F20\\u9012\\u7ED9\\u5B83\\u7684\\u6240\\u6709\\u6570\\u7EC4\\u6536\\u96C6\\u5230\\u4E00\\u4E2A\\u6570\\u7EC4\\u4E2D\\u3002\\u7136\\u540E\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"flat\"}),\" \\u65B9\\u6CD5\\u5C06\\u6570\\u7EC4\\u7684\\u6570\\u7EC4\\u5C55\\u5E73\\u4E3A\\u5355\\u4E2A\\u6570\\u7EC4\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u91CD\\u8981\\u63D0\\u793A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"Rest \\u53C2\\u6570\\u5FC5\\u987B\\u662F\\u51FD\\u6570\\u5B9A\\u4E49\\u4E2D\\u7684\\u6700\\u540E\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u6BCF\\u4E2A\\u51FD\\u6570\\u53EA\\u5141\\u8BB8\\u4E00\\u4E2A rest \\u53C2\\u6570\\u3002\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"Rest \\u53C2\\u6570\\u4E0E \",(0,e.jsx)(n.code,{children:\"arguments\"}),\" \\u5BF9\\u8C61\\u4E0D\\u540C\\uFF0C\",(0,e.jsx)(n.code,{children:\"arguments\"}),\" \\u5BF9\\u8C61\\u662F\\u4E00\\u4E2A\\u7C7B\\u4F3C\\u6570\\u7EC4\\u7684\\u5BF9\\u8C61\\uFF0C\\u53EF\\u5728\\u6240\\u6709\\u975E\\u7BAD\\u5934\\u51FD\\u6570\\u4E2D\\u4F7F\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/rest_parameters\",children:\"MDN Web \\u6587\\u6863\\uFF1ARest \\u53C2\\u6570\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://zh.javascript.info/rest-parameters-spread\",children:\"JavaScript.info\\uFF1ARest \\u53C2\\u6570\\u548C\\u5C55\\u5F00\\u8BED\\u6CD5\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.w3schools.com/js/js_function_parameters.asp\",children:\"W3Schools\\uFF1AJavaScript \\u51FD\\u6570\\u53C2\\u6570\"})}),`\n`]})]})}function o(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(d,{...r})}):d(r)}return y(x);})();\n;return Component;"
 }
\ No newline at end of file
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 5af0f85cf..8b139ecbe 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-server-sent-events/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),S=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},a=(t,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!u.call(t,s)&&s!==r&&i(t,s,{get:()=>e[s],enumerable:!(o=v(e,s))||o.enumerable});return t};var f=(t,e,r)=>(r=t!=null?h(m(t)):{},a(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),w=t=>a(i({},\"__esModule\",{value:!0}),t);var l=g((j,c)=>{c.exports=_jsx_runtime});var T={};S(T,{default:()=>E,frontmatter:()=>b});var n=f(l()),b={title:\"What are server-sent events?\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",a:\"a\",code:\"code\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",strong:\"strong\",pre:\"pre\",hr:\"hr\",ol:\"ol\",li:\"li\",ul:\"ul\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.a,{href:\"https://html.spec.whatwg.org/multipage/comms.html#the-eventsource-interface\",children:\"Server-sent events (SSE)\"}),\" is a standard that allows a web page to receive automatic updates from a server via an HTTP connection. Server-sent events are used with \",(0,n.jsx)(e.code,{children:\"EventSource\"}),\" instances that opens a connection with a server and allows client to receive events from the server. Connections created by server-sent events are persistent (similar to the \",(0,n.jsx)(e.code,{children:\"WebSocket\"}),\"s), however there are a few differences:\"]}),`\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:\"Property\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"WebSocket\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"EventSource\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Direction\"}),(0,n.jsx)(e.td,{children:\"Bi-directional \\u2013 both client and server can exchange messages\"}),(0,n.jsx)(e.td,{children:\"Unidirectional \\u2013 only server sends data\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Data type\"}),(0,n.jsx)(e.td,{children:\"Binary and text data\"}),(0,n.jsx)(e.td,{children:\"Only text\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Protocol\"}),(0,n.jsxs)(e.td,{children:[\"WebSocket protocol (\",(0,n.jsx)(e.code,{children:\"ws://\"}),\")\"]}),(0,n.jsxs)(e.td,{children:[\"Regular HTTP (\",(0,n.jsx)(e.code,{children:\"http://\"}),\")\"]})]})]})]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Creating an event source\"})}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const eventSource = new EventSource('/sse-stream');\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Listening for events\"})}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Fired when the connection is established.\neventSource.addEventListener('open', () => {\n  console.log('Connection opened');\n});\n\n// Fired when a message is received from the server.\neventSource.addEventListener('message', (event) => {\n  console.log('Received message:', event.data);\n});\n\n// Fired when an error occurs.\neventSource.addEventListener('error', (error) => {\n  console.error('Error occurred:', error);\n});\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Sending events from server\"})}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const express = require('express');\nconst app = express();\n\napp.get('/sse-stream', (req, res) => {\n  // \\`Content-Type\\` need to be set to \\`text/event-stream\\`.\n  res.setHeader('Content-Type', 'text/event-stream');\n  res.setHeader('Cache-Control', 'no-cache');\n  res.setHeader('Connection', 'keep-alive');\n\n  // Each message should be prefixed with data.\n  const sendEvent = (data) => res.write(\\`data: \\${data}\\\\n\\\\n\\`);\n\n  sendEvent('Hello from server');\n\n  const intervalId = setInterval(() => sendEvent(new Date().toString()), 1000);\n\n  res.on('close', () => {\n    console.log('Client closed connection');\n    clearInterval(intervalId);\n  });\n});\n\napp.listen(3000, () => console.log('Server started on port 3000'));\n`})}),`\n`,(0,n.jsx)(e.p,{children:'In this example, the server sends a \"Hello from server\" message initially, and then sends the current date every second. The connection is kept alive until the client closes it'}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Server-sent events (SSE)\"}),`\n`,(0,n.jsx)(e.p,{children:\"Server-sent events (SSE) is a standard that allows a server to push updates to a web client over a single, long-lived HTTP connection. It enables real-time updates without the client having to constantly poll the server for new data.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"How SSE works\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"The client creates a new \",(0,n.jsx)(e.code,{children:\"EventSource\"}),\" object, passing the URL of the \",(0,n.jsx)(e.code,{children:\"server-side\"}),\" script that will generate the event stream:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const eventSource = new EventSource('/event-stream');\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"The server-side script sets the appropriate headers to indicate that it will be sending an event stream (\",(0,n.jsx)(e.code,{children:\"Content-Type: text/event-stream\"}),\"), and then starts sending events to the client.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"Each event sent by the server follows a specific format, with fields like \",(0,n.jsx)(e.code,{children:\"event\"}),\", \",(0,n.jsx)(e.code,{children:\"data\"}),\", and \",(0,n.jsx)(e.code,{children:\"id\"}),\". For example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`event: message\ndata: Hello, world!\n\nevent: update\nid: 123\ndata: {\"temperature\": 25, \"humidity\": 60}\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"On the client-side, the \",(0,n.jsx)(e.code,{children:\"EventSource\"}),\" object receives these events and dispatches them as browser events, which can be handled using event listeners or the \",(0,n.jsx)(e.code,{children:\"onmessage\"}),\" event handler:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`eventSource.onmessage = function (event) {\n  console.log('Received message:', event.data);\n};\n\neventSource.addEventListener('update', function (event) {\n  console.log('Received update:', JSON.parse(event.data));\n});\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"EventSource\"}),\" object automatically handles reconnection if the connection is lost, and it can resume the event stream from the last received event ID using the \",(0,n.jsx)(e.code,{children:\"Last-Event-ID HTTP header\"}),\".\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"SSE features\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Unidirectional\"}),\": Only the server can send data to the client. For bidirectional communication, web sockets would be more appropriate.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Retry mechanism\"}),\": The client will retry the connection if it fails, with the retry interval specified by the \",(0,n.jsx)(e.code,{children:\"retry:\"}),\" field from the server.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Text-only data\"}),\": SSE can only transmit text data, which means binary data needs to be encoded (e.g., Base64) before transmission. This can lead to increased overhead and inefficiency for applications that need to transmit large binary payloads.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Built-in browser support\"}),\": Supported by most modern browsers without additional libraries.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Event types\"}),\": SSE supports custom event types using the \",(0,n.jsx)(e.code,{children:\"event:\"}),\" field, allowing categorization of messages.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Last-Event-Id\"})}),\": The client sends the \",(0,n.jsx)(e.code,{children:\"Last-Event-Id\"}),\" header when reconnecting, allowing the server to resume the stream from the last received event. However, there is no built-in mechanism to replay missed events during the disconnection period. You may need to implement a mechanism to handle missed events, such as using the \",(0,n.jsx)(e.code,{children:\"Last-Event-Id\"}),\" header.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Connection limitations\"}),\": Browsers have a limit on the maximum number of concurrent SSE connections, typically around 6 per domain. This can be a bottleneck if you need to establish multiple SSE connections from the same client. Using HTTP/2 will mitigate this issue.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Implementing SSE in JavaScript\"}),`\n`,(0,n.jsx)(e.p,{children:\"The following code demonstrates a minimal implementation of SSE on the client and the server:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The server sets the appropriate headers to establish an SSE connection.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Messages are sent to the client every 5 seconds.\"}),`\n`,(0,n.jsx)(e.li,{children:\"The server cleans up the interval and ends the response when the client disconnects.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"On the client:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a new EventSource object\nconst eventSource = new EventSource('/sse');\n\n// Event listener for receiving messages\neventSource.onmessage = function (event) {\n  console.log('New message:', event.data);\n};\n\n// Event listener for errors\neventSource.onerror = function (error) {\n  console.error('Error occurred:', error);\n};\n\n// Optional: Event listener for open connection\neventSource.onopen = function () {\n  console.log('Connection opened');\n};\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"On the server:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const http = require('http');\n\nhttp\n  .createServer((req, res) => {\n    if (req.url === '/sse') {\n      // Set headers for SSE\n      res.writeHead(200, {\n        'Content-Type': 'text/event-stream',\n        'Cache-Control': 'no-cache',\n        Connection: 'keep-alive',\n      });\n\n      // Function to send a message\n      const sendMessage = (message) => {\n        res.write(\\`data: \\${message}\\\\n\\\\n\\`); // Messages are delimited with double line breaks.\n      };\n\n      // Send a message every 5 seconds\n      const intervalId = setInterval(() => {\n        sendMessage(\\`Current time: \\${new Date().toLocaleTimeString()}\\`);\n      }, 5000);\n\n      // Handle client disconnect\n      req.on('close', () => {\n        clearInterval(intervalId);\n        res.end();\n      });\n    } else {\n      res.writeHead(404);\n      res.end();\n    }\n  })\n  .listen(8080, () => {\n    console.log('SSE server running on port 8080');\n  });\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Summary\"}),`\n`,(0,n.jsx)(e.p,{children:\"Server-sent events provide an efficient and straightforward way to push updates from a server to a client in real-time. They are particularly well-suited for applications that require continuous data streams but do not need full bidirectional communication. With built-in support in modern browsers, SSE is a reliable choice for many real-time web applications.\"}),`\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/Web/API/Server-sent_events/Using_server-sent_events\",children:\"Using server-sent events - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/server-sent-events\",children:\"Server-sent Events - javascript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://ably.com/topic/server-sent-events\",children:\"Server-sent Events: A WebSockets alternative ready for another look\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://bunny.net/academy/http/what-is-sse-server-sent-events-and-how-do-they-work/\",children:\"What are SSE (Server-Sent Events) and how do they work?\"})}),`\n`]})]})}function y(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var E=y;return w(T);})();\n;return Component;"
+  "solution": "var Component=(()=>{var v=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var S=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},a=(t,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!g.call(t,s)&&s!==r&&i(t,s,{get:()=>e[s],enumerable:!(o=p(e,s))||o.enumerable});return t};var w=(t,e,r)=>(r=t!=null?v(u(t)):{},a(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),b=t=>a(i({},\"__esModule\",{value:!0}),t);var l=S((x,c)=>{c.exports=_jsx_runtime});var E={};f(E,{default:()=>h,frontmatter:()=>y});var n=w(l()),y={title:\"What are server-sent events?\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.a,{href:\"https://html.spec.whatwg.org/multipage/comms.html#the-eventsource-interface\",children:\"Server-sent events (SSE)\"}),\" is a standard that allows a web page to receive automatic updates from a server via an HTTP connection. Server-sent events are used with \",(0,n.jsx)(e.code,{children:\"EventSource\"}),\" instances that opens a connection with a server and allows client to receive events from the server. Connections created by server-sent events are persistent (similar to the \",(0,n.jsx)(e.code,{children:\"WebSocket\"}),\"s), however there are a few differences:\"]}),`\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:\"Property\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"WebSocket\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"EventSource\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Direction\"}),(0,n.jsx)(e.td,{children:\"Bi-directional \\u2013 both client and server can exchange messages\"}),(0,n.jsx)(e.td,{children:\"Unidirectional \\u2013 only server sends data\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Data type\"}),(0,n.jsx)(e.td,{children:\"Binary and text data\"}),(0,n.jsx)(e.td,{children:\"Only text\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Protocol\"}),(0,n.jsxs)(e.td,{children:[\"WebSocket protocol (\",(0,n.jsx)(e.code,{children:\"ws://\"}),\")\"]}),(0,n.jsxs)(e.td,{children:[\"Regular HTTP (\",(0,n.jsx)(e.code,{children:\"http://\"}),\")\"]})]})]})]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Creating an event source\"})}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const eventSource = new EventSource('/sse-stream');\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Listening for events\"})}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Fired when the connection is established.\neventSource.addEventListener('open', () => {\n  console.log('Connection opened');\n});\n\n// Fired when a message is received from the server.\neventSource.addEventListener('message', (event) => {\n  console.log('Received message:', event.data);\n});\n\n// Fired when an error occurs.\neventSource.addEventListener('error', (error) => {\n  console.error('Error occurred:', error);\n});\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Sending events from server\"})}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const express = require('express');\nconst app = express();\n\napp.get('/sse-stream', (req, res) => {\n  // \\`Content-Type\\` need to be set to \\`text/event-stream\\`.\n  res.setHeader('Content-Type', 'text/event-stream');\n  res.setHeader('Cache-Control', 'no-cache');\n  res.setHeader('Connection', 'keep-alive');\n\n  // Each message should be prefixed with data.\n  const sendEvent = (data) => res.write(\\`data: \\${data}\\\\n\\\\n\\`);\n\n  sendEvent('Hello from server');\n\n  const intervalId = setInterval(() => sendEvent(new Date().toString()), 1000);\n\n  res.on('close', () => {\n    console.log('Client closed connection');\n    clearInterval(intervalId);\n  });\n});\n\napp.listen(3000, () => console.log('Server started on port 3000'));\n`})}),`\n`,(0,n.jsx)(e.p,{children:'In this example, the server sends a \"Hello from server\" message initially, and then sends the current date every second. The connection is kept alive until the client closes it'}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Server-sent events (SSE)\"}),`\n`,(0,n.jsx)(e.p,{children:\"Server-sent events (SSE) is a standard that allows a server to push updates to a web client over a single, long-lived HTTP connection. It enables real-time updates without the client having to constantly poll the server for new data.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"How SSE works\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"The client creates a new \",(0,n.jsx)(e.code,{children:\"EventSource\"}),\" object, passing the URL of the \",(0,n.jsx)(e.code,{children:\"server-side\"}),\" script that will generate the event stream:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const eventSource = new EventSource('/event-stream');\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"The server-side script sets the appropriate headers to indicate that it will be sending an event stream (\",(0,n.jsx)(e.code,{children:\"Content-Type: text/event-stream\"}),\"), and then starts sending events to the client.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"Each event sent by the server follows a specific format, with fields like \",(0,n.jsx)(e.code,{children:\"event\"}),\", \",(0,n.jsx)(e.code,{children:\"data\"}),\", and \",(0,n.jsx)(e.code,{children:\"id\"}),\". For example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`event: message\ndata: Hello, world!\n\nevent: update\nid: 123\ndata: {\"temperature\": 25, \"humidity\": 60}\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"On the client-side, the \",(0,n.jsx)(e.code,{children:\"EventSource\"}),\" object receives these events and dispatches them as browser events, which can be handled using event listeners or the \",(0,n.jsx)(e.code,{children:\"onmessage\"}),\" event handler:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`eventSource.onmessage = function (event) {\n  console.log('Received message:', event.data);\n};\n\neventSource.addEventListener('update', function (event) {\n  console.log('Received update:', JSON.parse(event.data));\n});\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"EventSource\"}),\" object automatically handles reconnection if the connection is lost, and it can resume the event stream from the last received event ID using the \",(0,n.jsx)(e.code,{children:\"Last-Event-ID HTTP header\"}),\".\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"SSE features\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Unidirectional\"}),\": Only the server can send data to the client. For bidirectional communication, web sockets would be more appropriate.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Retry mechanism\"}),\": The client will retry the connection if it fails, with the retry interval specified by the \",(0,n.jsx)(e.code,{children:\"retry:\"}),\" field from the server.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Text-only data\"}),\": SSE can only transmit text data, which means binary data needs to be encoded (e.g., Base64) before transmission. This can lead to increased overhead and inefficiency for applications that need to transmit large binary payloads.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Built-in browser support\"}),\": Supported by most modern browsers without additional libraries.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Event types\"}),\": SSE supports custom event types using the \",(0,n.jsx)(e.code,{children:\"event:\"}),\" field, allowing categorization of messages.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Last-Event-Id\"})}),\": The client sends the \",(0,n.jsx)(e.code,{children:\"Last-Event-Id\"}),\" header when reconnecting, allowing the server to resume the stream from the last received event. However, there is no built-in mechanism to replay missed events during the disconnection period. You may need to implement a mechanism to handle missed events, such as using the \",(0,n.jsx)(e.code,{children:\"Last-Event-Id\"}),\" header.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Connection limitations\"}),\": Browsers have a limit on the maximum number of concurrent SSE connections, typically around 6 per domain. This can be a bottleneck if you need to establish multiple SSE connections from the same client. Using HTTP/2 will mitigate this issue.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Implementing SSE in JavaScript\"}),`\n`,(0,n.jsx)(e.p,{children:\"The following code demonstrates a minimal implementation of SSE on the client and the server:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The server sets the appropriate headers to establish an SSE connection.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Messages are sent to the client every 5 seconds.\"}),`\n`,(0,n.jsx)(e.li,{children:\"The server cleans up the interval and ends the response when the client disconnects.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"On the client:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a new EventSource object\nconst eventSource = new EventSource('/sse');\n\n// Event listener for receiving messages\neventSource.onmessage = function (event) {\n  console.log('New message:', event.data);\n};\n\n// Event listener for errors\neventSource.onerror = function (error) {\n  console.error('Error occurred:', error);\n};\n\n// Optional: Event listener for open connection\neventSource.onopen = function () {\n  console.log('Connection opened');\n};\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"On the server:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const http = require('http');\n\nhttp\n  .createServer((req, res) => {\n    if (req.url === '/sse') {\n      // Set headers for SSE\n      res.writeHead(200, {\n        'Content-Type': 'text/event-stream',\n        'Cache-Control': 'no-cache',\n        Connection: 'keep-alive',\n      });\n\n      // Function to send a message\n      const sendMessage = (message) => {\n        res.write(\\`data: \\${message}\\\\n\\\\n\\`); // Messages are delimited with double line breaks.\n      };\n\n      // Send a message every 5 seconds\n      const intervalId = setInterval(() => {\n        sendMessage(\\`Current time: \\${new Date().toLocaleTimeString()}\\`);\n      }, 5000);\n\n      // Handle client disconnect\n      req.on('close', () => {\n        clearInterval(intervalId);\n        res.end();\n      });\n    } else {\n      res.writeHead(404);\n      res.end();\n    }\n  })\n  .listen(8080, () => {\n    console.log('SSE server running on port 8080');\n  });\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Summary\"}),`\n`,(0,n.jsx)(e.p,{children:\"Server-sent events provide an efficient and straightforward way to push updates from a server to a client in real-time. They are particularly well-suited for applications that require continuous data streams but do not need full bidirectional communication. With built-in support in modern browsers, SSE is a reliable choice for many real-time web applications.\"}),`\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/Web/API/Server-sent_events/Using_server-sent_events\",children:\"Using server-sent events - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/server-sent-events\",children:\"Server-sent Events - javascript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://ably.com/topic/server-sent-events\",children:\"Server-sent Events: A WebSockets alternative ready for another look\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://bunny.net/academy/http/what-is-sse-server-sent-events-and-how-do-they-work/\",children:\"What are SSE (Server-Sent Events) and how do they work?\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return b(E);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-server-sent-events/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-server-sent-events/zh-CN.json
index f65d797af..287c0f236 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-server-sent-events/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-server-sent-events/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-server-sent-events/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var d=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var u=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),m=(r,e)=>{for(var t in e)d(r,t,{get:e[t],enumerable:!0})},o=(r,e,t,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!S.call(r,c)&&c!==t&&d(r,c,{get:()=>e[c],enumerable:!(l=v(e,c))||l.enumerable});return r};var E=(r,e,t)=>(t=r!=null?h(g(r)):{},o(e||!r||!r.__esModule?d(t,\"default\",{value:r,enumerable:!0}):t,r)),f=r=>o(d({},\"__esModule\",{value:!0}),r);var s=u((y,i)=>{i.exports=_jsx_runtime});var x={};m(x,{default:()=>j,frontmatter:()=>b});var n=E(s()),b={title:\"\\u4EC0\\u4E48\\u662F\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6\\uFF1F\"};function a(r){let e=Object.assign({h2:\"h2\",p:\"p\",a:\"a\",code:\"code\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",strong:\"strong\",pre:\"pre\",hr:\"hr\",ol:\"ol\",li:\"li\",ul:\"ul\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.a,{href:\"https://html.spec.whatwg.org/multipage/comms.html#the-eventsource-interface\",children:\"\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6 (SSE)\"}),\" \\u662F\\u4E00\\u79CD\\u6807\\u51C6\\uFF0C\\u5141\\u8BB8\\u7F51\\u9875\\u901A\\u8FC7 HTTP \\u8FDE\\u63A5\\u4ECE\\u670D\\u52A1\\u5668\\u63A5\\u6536\\u81EA\\u52A8\\u66F4\\u65B0\\u3002\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6\\u4E0E \",(0,n.jsx)(e.code,{children:\"EventSource\"}),\" \\u5B9E\\u4F8B\\u4E00\\u8D77\\u4F7F\\u7528\\uFF0C\\u8BE5\\u5B9E\\u4F8B\\u6253\\u5F00\\u4E0E\\u670D\\u52A1\\u5668\\u7684\\u8FDE\\u63A5\\uFF0C\\u5E76\\u5141\\u8BB8\\u5BA2\\u6237\\u7AEF\\u4ECE\\u670D\\u52A1\\u5668\\u63A5\\u6536\\u4E8B\\u4EF6\\u3002\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6\\u521B\\u5EFA\\u7684\\u8FDE\\u63A5\\u662F\\u6301\\u4E45\\u7684\\uFF08\\u7C7B\\u4F3C\\u4E8E \",(0,n.jsx)(e.code,{children:\"WebSocket\"}),\"\\uFF09\\uFF0C\\u4F46\\u662F\\u6709\\u4E00\\u4E9B\\u533A\\u522B\\uFF1A\"]}),`\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:\"\\u5C5E\\u6027\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"WebSocket\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"EventSource\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u65B9\\u5411\"}),(0,n.jsx)(e.td,{children:\"\\u53CC\\u5411 \\u2013 \\u5BA2\\u6237\\u7AEF\\u548C\\u670D\\u52A1\\u5668\\u90FD\\u53EF\\u4EE5\\u4EA4\\u6362\\u6D88\\u606F\"}),(0,n.jsx)(e.td,{children:\"\\u5355\\u5411 \\u2013 \\u53EA\\u6709\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u6570\\u636E\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u6570\\u636E\\u7C7B\\u578B\"}),(0,n.jsx)(e.td,{children:\"\\u4E8C\\u8FDB\\u5236\\u548C\\u6587\\u672C\\u6570\\u636E\"}),(0,n.jsx)(e.td,{children:\"\\u4EC5\\u6587\\u672C\\u6570\\u636E\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u534F\\u8BAE\"}),(0,n.jsxs)(e.td,{children:[\"WebSocket \\u534F\\u8BAE (\",(0,n.jsx)(e.code,{children:\"ws://\"}),\")\"]}),(0,n.jsxs)(e.td,{children:[\"\\u5E38\\u89C4 HTTP (\",(0,n.jsx)(e.code,{children:\"http://\"}),\")\"]})]})]})]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"\\u521B\\u5EFA\\u4E8B\\u4EF6\\u6E90\"})}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const eventSource = new EventSource('/sse-stream');\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"\\u76D1\\u542C\\u4E8B\\u4EF6\"})}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u5EFA\\u7ACB\\u8FDE\\u63A5\\u65F6\\u89E6\\u53D1\\u3002\neventSource.addEventListener('open', () => {\n  console.log('\\u8FDE\\u63A5\\u5DF2\\u6253\\u5F00');\n});\n\n// \\u4ECE\\u670D\\u52A1\\u5668\\u6536\\u5230\\u6D88\\u606F\\u65F6\\u89E6\\u53D1\\u3002\neventSource.addEventListener('message', (event) => {\n  console.log('\\u6536\\u5230\\u6D88\\u606F\\uFF1A', event.data);\n});\n\n// \\u53D1\\u751F\\u9519\\u8BEF\\u65F6\\u89E6\\u53D1\\u3002\neventSource.addEventListener('error', (error) => {\n  console.error('\\u53D1\\u751F\\u9519\\u8BEF\\uFF1A', error);\n});\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"\\u4ECE\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6\"})}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const express = require('express');\nconst app = express();\n\napp.get('/sse-stream', (req, res) => {\n  // \\`Content-Type\\` \\u9700\\u8981\\u8BBE\\u7F6E\\u4E3A \\`text/event-stream\\`\\u3002\n  res.setHeader('Content-Type', 'text/event-stream');\n  res.setHeader('Cache-Control', 'no-cache');\n  res.setHeader('Connection', 'keep-alive');\n\n  // \\u6BCF\\u6761\\u6D88\\u606F\\u90FD\\u5E94\\u4EE5 data \\u5F00\\u5934\\u3002\n  const sendEvent = (data) => res.write(\\`data: \\${data}\\\\n\\\\n\\`);\n\n  sendEvent('\\u6765\\u81EA\\u670D\\u52A1\\u5668\\u7684\\u95EE\\u5019');\n\n  const intervalId = setInterval(() => sendEvent(new Date().toString()), 1000);\n\n  res.on('close', () => {\n    console.log('\\u5BA2\\u6237\\u7AEF\\u5173\\u95ED\\u8FDE\\u63A5');\n    clearInterval(intervalId);\n  });\n});\n\napp.listen(3000, () => console.log('\\u670D\\u52A1\\u5668\\u5DF2\\u5728\\u7AEF\\u53E3 3000 \\u542F\\u52A8'));\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u670D\\u52A1\\u5668\\u6700\\u521D\\u53D1\\u9001\\u201C\\u6765\\u81EA\\u670D\\u52A1\\u5668\\u7684\\u95EE\\u5019\\u201D\\u6D88\\u606F\\uFF0C\\u7136\\u540E\\u6BCF\\u79D2\\u53D1\\u9001\\u5F53\\u524D\\u65E5\\u671F\\u3002\\u8FDE\\u63A5\\u4FDD\\u6301\\u6D3B\\u52A8\\u72B6\\u6001\\uFF0C\\u76F4\\u5230\\u5BA2\\u6237\\u7AEF\\u5C06\\u5176\\u5173\\u95ED\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6 (SSE)\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6 (SSE) \\u662F\\u4E00\\u79CD\\u6807\\u51C6\\uFF0C\\u5141\\u8BB8\\u670D\\u52A1\\u5668\\u901A\\u8FC7\\u5355\\u4E2A\\u3001\\u957F\\u8FDE\\u63A5\\u7684 HTTP \\u8FDE\\u63A5\\u5C06\\u66F4\\u65B0\\u63A8\\u9001\\u5230 Web \\u5BA2\\u6237\\u7AEF\\u3002\\u5B83\\u652F\\u6301\\u5B9E\\u65F6\\u66F4\\u65B0\\uFF0C\\u800C\\u65E0\\u9700\\u5BA2\\u6237\\u7AEF\\u4E0D\\u65AD\\u8F6E\\u8BE2\\u670D\\u52A1\\u5668\\u4EE5\\u83B7\\u53D6\\u65B0\\u6570\\u636E\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"SSE \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5BA2\\u6237\\u7AEF\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684 \",(0,n.jsx)(e.code,{children:\"EventSource\"}),\" \\u5BF9\\u8C61\\uFF0C\\u4F20\\u9012\\u5C06\\u751F\\u6210\\u4E8B\\u4EF6\\u6D41\\u7684 \",(0,n.jsx)(e.code,{children:\"\\u670D\\u52A1\\u5668\\u7AEF\"}),\" \\u811A\\u672C\\u7684 URL\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const eventSource = new EventSource('/event-stream');\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"\\u670D\\u52A1\\u5668\\u7AEF\\u811A\\u672C\\u8BBE\\u7F6E\\u9002\\u5F53\\u7684\\u6807\\u5934\\u4EE5\\u6307\\u793A\\u5B83\\u5C06\\u53D1\\u9001\\u4E8B\\u4EF6\\u6D41 (\",(0,n.jsx)(e.code,{children:\"Content-Type: text/event-stream\"}),\")\\uFF0C\\u7136\\u540E\\u5F00\\u59CB\\u5411\\u5BA2\\u6237\\u7AEF\\u53D1\\u9001\\u4E8B\\u4EF6\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u7684\\u6BCF\\u4E2A\\u4E8B\\u4EF6\\u90FD\\u9075\\u5FAA\\u7279\\u5B9A\\u7684\\u683C\\u5F0F\\uFF0C\\u5305\\u542B \",(0,n.jsx)(e.code,{children:\"event\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"data\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"id\"}),\" \\u7B49\\u5B57\\u6BB5\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`event: message\ndata: Hello, world!\n\nevent: update\nid: 123\ndata: {\"temperature\": 25, \"humidity\": 60}\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u5BA2\\u6237\\u7AEF\\uFF0C\",(0,n.jsx)(e.code,{children:\"EventSource\"}),\" \\u5BF9\\u8C61\\u63A5\\u6536\\u8FD9\\u4E9B\\u4E8B\\u4EF6\\u5E76\\u5C06\\u5176\\u4F5C\\u4E3A\\u6D4F\\u89C8\\u5668\\u4E8B\\u4EF6\\u5206\\u6D3E\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u6216 \",(0,n.jsx)(e.code,{children:\"onmessage\"}),\" \\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u6765\\u5904\\u7406\\u8FD9\\u4E9B\\u4E8B\\u4EF6\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`eventSource.onmessage = function (event) {\n  console.log('Received message:', event.data);\n};\n\neventSource.addEventListener('update', function (event) {\n  console.log('Received update:', JSON.parse(event.data));\n});\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u8FDE\\u63A5\\u65AD\\u5F00\\uFF0C\",(0,n.jsx)(e.code,{children:\"EventSource\"}),\" \\u5BF9\\u8C61\\u4F1A\\u81EA\\u52A8\\u5904\\u7406\\u91CD\\u65B0\\u8FDE\\u63A5\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Last-Event-ID HTTP \\u6807\\u5934\"}),\" \\u4ECE\\u4E0A\\u6B21\\u63A5\\u6536\\u5230\\u7684\\u4E8B\\u4EF6 ID \\u6062\\u590D\\u4E8B\\u4EF6\\u6D41\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"SSE \\u529F\\u80FD\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5355\\u5411\"}),\"\\uFF1A\\u53EA\\u6709\\u670D\\u52A1\\u5668\\u624D\\u80FD\\u5411\\u5BA2\\u6237\\u7AEF\\u53D1\\u9001\\u6570\\u636E\\u3002\\u5BF9\\u4E8E\\u53CC\\u5411\\u901A\\u4FE1\\uFF0CWeb \\u5957\\u63A5\\u5B57\\u5C06\\u66F4\\u5408\\u9002\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u91CD\\u8BD5\\u673A\\u5236\"}),\"\\uFF1A\\u5982\\u679C\\u8FDE\\u63A5\\u5931\\u8D25\\uFF0C\\u5BA2\\u6237\\u7AEF\\u5C06\\u91CD\\u8BD5\\u8FDE\\u63A5\\uFF0C\\u91CD\\u8BD5\\u95F4\\u9694\\u7531\\u670D\\u52A1\\u5668\\u7684 \",(0,n.jsx)(e.code,{children:\"retry:\"}),\" \\u5B57\\u6BB5\\u6307\\u5B9A\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4EC5\\u6587\\u672C\\u6570\\u636E\"}),\"\\uFF1ASSE \\u53EA\\u80FD\\u4F20\\u8F93\\u6587\\u672C\\u6570\\u636E\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5728\\u4F20\\u8F93\\u4E4B\\u524D\\u9700\\u8981\\u5BF9\\u4E8C\\u8FDB\\u5236\\u6570\\u636E\\u8FDB\\u884C\\u7F16\\u7801\\uFF08\\u4F8B\\u5982\\uFF0CBase64\\uFF09\\u3002\\u5BF9\\u4E8E\\u9700\\u8981\\u4F20\\u8F93\\u5927\\u578B\\u4E8C\\u8FDB\\u5236\\u6709\\u6548\\u8D1F\\u8F7D\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u5F00\\u9500\\u589E\\u52A0\\u548C\\u6548\\u7387\\u4F4E\\u4E0B\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5185\\u7F6E\\u6D4F\\u89C8\\u5668\\u652F\\u6301\"}),\"\\uFF1A\\u53D7\\u5927\\u591A\\u6570\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u652F\\u6301\\uFF0C\\u65E0\\u9700\\u5176\\u4ED6\\u5E93\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E8B\\u4EF6\\u7C7B\\u578B\"}),\"\\uFF1ASSE \\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"event:\"}),\" \\u5B57\\u6BB5\\u652F\\u6301\\u81EA\\u5B9A\\u4E49\\u4E8B\\u4EF6\\u7C7B\\u578B\\uFF0C\\u5141\\u8BB8\\u5BF9\\u6D88\\u606F\\u8FDB\\u884C\\u5206\\u7C7B\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Last-Event-Id\"})}),\"\\uFF1A\\u5BA2\\u6237\\u7AEF\\u5728\\u91CD\\u65B0\\u8FDE\\u63A5\\u65F6\\u53D1\\u9001 \",(0,n.jsx)(e.code,{children:\"Last-Event-Id\"}),\" \\u6807\\u5934\\uFF0C\\u5141\\u8BB8\\u670D\\u52A1\\u5668\\u4ECE\\u4E0A\\u6B21\\u63A5\\u6536\\u5230\\u7684\\u4E8B\\u4EF6\\u6062\\u590D\\u6D41\\u3002\\u4F46\\u662F\\uFF0C\\u6CA1\\u6709\\u5185\\u7F6E\\u7684\\u673A\\u5236\\u6765\\u91CD\\u653E\\u65AD\\u5F00\\u8FDE\\u63A5\\u671F\\u95F4\\u9519\\u8FC7\\u7684\\u4E8B\\u4EF6\\u3002\\u60A8\\u53EF\\u80FD\\u9700\\u8981\\u5B9E\\u73B0\\u4E00\\u79CD\\u673A\\u5236\\u6765\\u5904\\u7406\\u9519\\u8FC7\\u7684\\u4E8B\\u4EF6\\uFF0C\\u4F8B\\u5982\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Last-Event-Id\"}),\" \\u6807\\u5934\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8FDE\\u63A5\\u9650\\u5236\"}),\"\\uFF1A\\u6D4F\\u89C8\\u5668\\u5BF9\\u5E76\\u53D1 SSE \\u8FDE\\u63A5\\u7684\\u6700\\u5927\\u6570\\u91CF\\u6709\\u9650\\u5236\\uFF0C\\u901A\\u5E38\\u6BCF\\u4E2A\\u57DF\\u5927\\u7EA6 6 \\u4E2A\\u3002\\u5982\\u679C\\u9700\\u8981\\u4ECE\\u540C\\u4E00\\u5BA2\\u6237\\u7AEF\\u5EFA\\u7ACB\\u591A\\u4E2A SSE \\u8FDE\\u63A5\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u6210\\u4E3A\\u74F6\\u9888\\u3002\\u4F7F\\u7528 HTTP/2 \\u5C06\\u7F13\\u89E3\\u6B64\\u95EE\\u9898\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5728 JavaScript \\u4E2D\\u5B9E\\u73B0 SSE\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u4EE3\\u7801\\u6F14\\u793A\\u4E86\\u5BA2\\u6237\\u7AEF\\u548C\\u670D\\u52A1\\u5668\\u4E0A SSE \\u7684\\u6700\\u5C0F\\u5B9E\\u73B0\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u670D\\u52A1\\u5668\\u8BBE\\u7F6E\\u9002\\u5F53\\u7684\\u6807\\u5934\\u4EE5\\u5EFA\\u7ACB SSE \\u8FDE\\u63A5\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u6D88\\u606F\\u6BCF 5 \\u79D2\\u53D1\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5F53\\u5BA2\\u6237\\u7AEF\\u65AD\\u5F00\\u8FDE\\u63A5\\u65F6\\uFF0C\\u670D\\u52A1\\u5668\\u6E05\\u7406\\u95F4\\u9694\\u5E76\\u7ED3\\u675F\\u54CD\\u5E94\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u5BA2\\u6237\\u7AEF\\u4E0A\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a new EventSource object\nconst eventSource = new EventSource('/sse');\n\n// Event listener for receiving messages\neventSource.onmessage = function (event) {\n  console.log('New message:', event.data);\n};\n\n// Event listener for errors\neventSource.onerror = function (error) {\n  console.error('Error occurred:', error);\n};\n\n// Optional: Event listener for open connection\neventSource.onopen = function () {\n  console.log('Connection opened');\n};\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u670D\\u52A1\\u5668\\u4E0A\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const http = require('http');\n\nhttp\n  .createServer((req, res) => {\n    if (req.url === '/sse') {\n      // Set headers for SSE\n      res.writeHead(200, {\n        'Content-Type': 'text/event-stream',\n        'Cache-Control': 'no-cache',\n        Connection: 'keep-alive',\n      });\n\n      // Function to send a message\n      const sendMessage = (message) => {\n        res.write(\\`data: \\${message}\\\\n\\\\n\\`); // Messages are delimited with double line breaks.\n      };\n\n      // Send a message every 5 seconds\n      const intervalId = setInterval(() => {\n        sendMessage(\\`Current time: \\${new Date().toLocaleTimeString()}\\`);\n      }, 5000);\n\n      // Handle client disconnect\n      req.on('close', () => {\n        clearInterval(intervalId);\n        res.end();\n      });\n    } else {\n      res.writeHead(404);\n      res.end();\n    }\n  })\n  .listen(8080, () => {\n    console.log('SSE server running on port 8080');\n  });\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u9AD8\\u6548\\u4E14\\u76F4\\u63A5\\u7684\\u65B9\\u5F0F\\uFF0C\\u53EF\\u4EE5\\u5C06\\u66F4\\u65B0\\u4ECE\\u670D\\u52A1\\u5668\\u63A8\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\\u3002\\u5B83\\u4EEC\\u7279\\u522B\\u9002\\u7528\\u4E8E\\u9700\\u8981\\u8FDE\\u7EED\\u6570\\u636E\\u6D41\\u4F46\\u4E0D\\u9700\\u8981\\u5B8C\\u5168\\u53CC\\u5411\\u901A\\u4FE1\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\\u7531\\u4E8E\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u5185\\u7F6E\\u4E86\\u652F\\u6301\\uFF0CSSE \\u662F\\u8BB8\\u591A\\u5B9E\\u65F6 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u53EF\\u9760\\u9009\\u62E9\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Server-sent_events/Using_server-sent_events\",children:\"\\u4F7F\\u7528\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6 - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/server-sent-events\",children:\"\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6 - javascript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://ably.com/topic/server-sent-events\",children:\"\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6\\uFF1A\\u4E00\\u4E2A\\u51C6\\u5907\\u597D\\u518D\\u6B21\\u5BA1\\u89C6\\u7684 WebSockets \\u66FF\\u4EE3\\u65B9\\u6848\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://bunny.net/academy/http/what-is-sse-server-sent-events-and-how-do-they-work/\",children:\"\\u4EC0\\u4E48\\u662F SSE\\uFF08\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6\\uFF09\\u4EE5\\u53CA\\u5B83\\u4EEC\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"})}),`\n`]})]})}function w(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(a,r)})):a(r)}var j=w;return f(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var v=Object.create;var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),E=(r,e)=>{for(var t in e)d(r,t,{get:e[t],enumerable:!0})},o=(r,e,t,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of S(e))!u.call(r,c)&&c!==t&&d(r,c,{get:()=>e[c],enumerable:!(l=p(e,c))||l.enumerable});return r};var f=(r,e,t)=>(t=r!=null?v(g(r)):{},o(e||!r||!r.__esModule?d(t,\"default\",{value:r,enumerable:!0}):t,r)),w=r=>o(d({},\"__esModule\",{value:!0}),r);var s=m((T,i)=>{i.exports=_jsx_runtime});var j={};E(j,{default:()=>h,frontmatter:()=>b});var n=f(s()),b={title:\"\\u4EC0\\u4E48\\u662F\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6\\uFF1F\"};function a(r){let e={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.a,{href:\"https://html.spec.whatwg.org/multipage/comms.html#the-eventsource-interface\",children:\"\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6 (SSE)\"}),\" \\u662F\\u4E00\\u79CD\\u6807\\u51C6\\uFF0C\\u5141\\u8BB8\\u7F51\\u9875\\u901A\\u8FC7 HTTP \\u8FDE\\u63A5\\u4ECE\\u670D\\u52A1\\u5668\\u63A5\\u6536\\u81EA\\u52A8\\u66F4\\u65B0\\u3002\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6\\u4E0E \",(0,n.jsx)(e.code,{children:\"EventSource\"}),\" \\u5B9E\\u4F8B\\u4E00\\u8D77\\u4F7F\\u7528\\uFF0C\\u8BE5\\u5B9E\\u4F8B\\u6253\\u5F00\\u4E0E\\u670D\\u52A1\\u5668\\u7684\\u8FDE\\u63A5\\uFF0C\\u5E76\\u5141\\u8BB8\\u5BA2\\u6237\\u7AEF\\u4ECE\\u670D\\u52A1\\u5668\\u63A5\\u6536\\u4E8B\\u4EF6\\u3002\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6\\u521B\\u5EFA\\u7684\\u8FDE\\u63A5\\u662F\\u6301\\u4E45\\u7684\\uFF08\\u7C7B\\u4F3C\\u4E8E \",(0,n.jsx)(e.code,{children:\"WebSocket\"}),\"\\uFF09\\uFF0C\\u4F46\\u662F\\u6709\\u4E00\\u4E9B\\u533A\\u522B\\uFF1A\"]}),`\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:\"\\u5C5E\\u6027\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"WebSocket\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"EventSource\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u65B9\\u5411\"}),(0,n.jsx)(e.td,{children:\"\\u53CC\\u5411 \\u2013 \\u5BA2\\u6237\\u7AEF\\u548C\\u670D\\u52A1\\u5668\\u90FD\\u53EF\\u4EE5\\u4EA4\\u6362\\u6D88\\u606F\"}),(0,n.jsx)(e.td,{children:\"\\u5355\\u5411 \\u2013 \\u53EA\\u6709\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u6570\\u636E\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u6570\\u636E\\u7C7B\\u578B\"}),(0,n.jsx)(e.td,{children:\"\\u4E8C\\u8FDB\\u5236\\u548C\\u6587\\u672C\\u6570\\u636E\"}),(0,n.jsx)(e.td,{children:\"\\u4EC5\\u6587\\u672C\\u6570\\u636E\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u534F\\u8BAE\"}),(0,n.jsxs)(e.td,{children:[\"WebSocket \\u534F\\u8BAE (\",(0,n.jsx)(e.code,{children:\"ws://\"}),\")\"]}),(0,n.jsxs)(e.td,{children:[\"\\u5E38\\u89C4 HTTP (\",(0,n.jsx)(e.code,{children:\"http://\"}),\")\"]})]})]})]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"\\u521B\\u5EFA\\u4E8B\\u4EF6\\u6E90\"})}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const eventSource = new EventSource('/sse-stream');\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"\\u76D1\\u542C\\u4E8B\\u4EF6\"})}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u5EFA\\u7ACB\\u8FDE\\u63A5\\u65F6\\u89E6\\u53D1\\u3002\neventSource.addEventListener('open', () => {\n  console.log('\\u8FDE\\u63A5\\u5DF2\\u6253\\u5F00');\n});\n\n// \\u4ECE\\u670D\\u52A1\\u5668\\u6536\\u5230\\u6D88\\u606F\\u65F6\\u89E6\\u53D1\\u3002\neventSource.addEventListener('message', (event) => {\n  console.log('\\u6536\\u5230\\u6D88\\u606F\\uFF1A', event.data);\n});\n\n// \\u53D1\\u751F\\u9519\\u8BEF\\u65F6\\u89E6\\u53D1\\u3002\neventSource.addEventListener('error', (error) => {\n  console.error('\\u53D1\\u751F\\u9519\\u8BEF\\uFF1A', error);\n});\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"\\u4ECE\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6\"})}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const express = require('express');\nconst app = express();\n\napp.get('/sse-stream', (req, res) => {\n  // \\`Content-Type\\` \\u9700\\u8981\\u8BBE\\u7F6E\\u4E3A \\`text/event-stream\\`\\u3002\n  res.setHeader('Content-Type', 'text/event-stream');\n  res.setHeader('Cache-Control', 'no-cache');\n  res.setHeader('Connection', 'keep-alive');\n\n  // \\u6BCF\\u6761\\u6D88\\u606F\\u90FD\\u5E94\\u4EE5 data \\u5F00\\u5934\\u3002\n  const sendEvent = (data) => res.write(\\`data: \\${data}\\\\n\\\\n\\`);\n\n  sendEvent('\\u6765\\u81EA\\u670D\\u52A1\\u5668\\u7684\\u95EE\\u5019');\n\n  const intervalId = setInterval(() => sendEvent(new Date().toString()), 1000);\n\n  res.on('close', () => {\n    console.log('\\u5BA2\\u6237\\u7AEF\\u5173\\u95ED\\u8FDE\\u63A5');\n    clearInterval(intervalId);\n  });\n});\n\napp.listen(3000, () => console.log('\\u670D\\u52A1\\u5668\\u5DF2\\u5728\\u7AEF\\u53E3 3000 \\u542F\\u52A8'));\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u670D\\u52A1\\u5668\\u6700\\u521D\\u53D1\\u9001\\u201C\\u6765\\u81EA\\u670D\\u52A1\\u5668\\u7684\\u95EE\\u5019\\u201D\\u6D88\\u606F\\uFF0C\\u7136\\u540E\\u6BCF\\u79D2\\u53D1\\u9001\\u5F53\\u524D\\u65E5\\u671F\\u3002\\u8FDE\\u63A5\\u4FDD\\u6301\\u6D3B\\u52A8\\u72B6\\u6001\\uFF0C\\u76F4\\u5230\\u5BA2\\u6237\\u7AEF\\u5C06\\u5176\\u5173\\u95ED\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6 (SSE)\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6 (SSE) \\u662F\\u4E00\\u79CD\\u6807\\u51C6\\uFF0C\\u5141\\u8BB8\\u670D\\u52A1\\u5668\\u901A\\u8FC7\\u5355\\u4E2A\\u3001\\u957F\\u8FDE\\u63A5\\u7684 HTTP \\u8FDE\\u63A5\\u5C06\\u66F4\\u65B0\\u63A8\\u9001\\u5230 Web \\u5BA2\\u6237\\u7AEF\\u3002\\u5B83\\u652F\\u6301\\u5B9E\\u65F6\\u66F4\\u65B0\\uFF0C\\u800C\\u65E0\\u9700\\u5BA2\\u6237\\u7AEF\\u4E0D\\u65AD\\u8F6E\\u8BE2\\u670D\\u52A1\\u5668\\u4EE5\\u83B7\\u53D6\\u65B0\\u6570\\u636E\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"SSE \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5BA2\\u6237\\u7AEF\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684 \",(0,n.jsx)(e.code,{children:\"EventSource\"}),\" \\u5BF9\\u8C61\\uFF0C\\u4F20\\u9012\\u5C06\\u751F\\u6210\\u4E8B\\u4EF6\\u6D41\\u7684 \",(0,n.jsx)(e.code,{children:\"\\u670D\\u52A1\\u5668\\u7AEF\"}),\" \\u811A\\u672C\\u7684 URL\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const eventSource = new EventSource('/event-stream');\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"\\u670D\\u52A1\\u5668\\u7AEF\\u811A\\u672C\\u8BBE\\u7F6E\\u9002\\u5F53\\u7684\\u6807\\u5934\\u4EE5\\u6307\\u793A\\u5B83\\u5C06\\u53D1\\u9001\\u4E8B\\u4EF6\\u6D41 (\",(0,n.jsx)(e.code,{children:\"Content-Type: text/event-stream\"}),\")\\uFF0C\\u7136\\u540E\\u5F00\\u59CB\\u5411\\u5BA2\\u6237\\u7AEF\\u53D1\\u9001\\u4E8B\\u4EF6\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u7684\\u6BCF\\u4E2A\\u4E8B\\u4EF6\\u90FD\\u9075\\u5FAA\\u7279\\u5B9A\\u7684\\u683C\\u5F0F\\uFF0C\\u5305\\u542B \",(0,n.jsx)(e.code,{children:\"event\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"data\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"id\"}),\" \\u7B49\\u5B57\\u6BB5\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`event: message\ndata: Hello, world!\n\nevent: update\nid: 123\ndata: {\"temperature\": 25, \"humidity\": 60}\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u5BA2\\u6237\\u7AEF\\uFF0C\",(0,n.jsx)(e.code,{children:\"EventSource\"}),\" \\u5BF9\\u8C61\\u63A5\\u6536\\u8FD9\\u4E9B\\u4E8B\\u4EF6\\u5E76\\u5C06\\u5176\\u4F5C\\u4E3A\\u6D4F\\u89C8\\u5668\\u4E8B\\u4EF6\\u5206\\u6D3E\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u6216 \",(0,n.jsx)(e.code,{children:\"onmessage\"}),\" \\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u6765\\u5904\\u7406\\u8FD9\\u4E9B\\u4E8B\\u4EF6\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`eventSource.onmessage = function (event) {\n  console.log('Received message:', event.data);\n};\n\neventSource.addEventListener('update', function (event) {\n  console.log('Received update:', JSON.parse(event.data));\n});\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u8FDE\\u63A5\\u65AD\\u5F00\\uFF0C\",(0,n.jsx)(e.code,{children:\"EventSource\"}),\" \\u5BF9\\u8C61\\u4F1A\\u81EA\\u52A8\\u5904\\u7406\\u91CD\\u65B0\\u8FDE\\u63A5\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Last-Event-ID HTTP \\u6807\\u5934\"}),\" \\u4ECE\\u4E0A\\u6B21\\u63A5\\u6536\\u5230\\u7684\\u4E8B\\u4EF6 ID \\u6062\\u590D\\u4E8B\\u4EF6\\u6D41\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"SSE \\u529F\\u80FD\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5355\\u5411\"}),\"\\uFF1A\\u53EA\\u6709\\u670D\\u52A1\\u5668\\u624D\\u80FD\\u5411\\u5BA2\\u6237\\u7AEF\\u53D1\\u9001\\u6570\\u636E\\u3002\\u5BF9\\u4E8E\\u53CC\\u5411\\u901A\\u4FE1\\uFF0CWeb \\u5957\\u63A5\\u5B57\\u5C06\\u66F4\\u5408\\u9002\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u91CD\\u8BD5\\u673A\\u5236\"}),\"\\uFF1A\\u5982\\u679C\\u8FDE\\u63A5\\u5931\\u8D25\\uFF0C\\u5BA2\\u6237\\u7AEF\\u5C06\\u91CD\\u8BD5\\u8FDE\\u63A5\\uFF0C\\u91CD\\u8BD5\\u95F4\\u9694\\u7531\\u670D\\u52A1\\u5668\\u7684 \",(0,n.jsx)(e.code,{children:\"retry:\"}),\" \\u5B57\\u6BB5\\u6307\\u5B9A\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4EC5\\u6587\\u672C\\u6570\\u636E\"}),\"\\uFF1ASSE \\u53EA\\u80FD\\u4F20\\u8F93\\u6587\\u672C\\u6570\\u636E\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5728\\u4F20\\u8F93\\u4E4B\\u524D\\u9700\\u8981\\u5BF9\\u4E8C\\u8FDB\\u5236\\u6570\\u636E\\u8FDB\\u884C\\u7F16\\u7801\\uFF08\\u4F8B\\u5982\\uFF0CBase64\\uFF09\\u3002\\u5BF9\\u4E8E\\u9700\\u8981\\u4F20\\u8F93\\u5927\\u578B\\u4E8C\\u8FDB\\u5236\\u6709\\u6548\\u8D1F\\u8F7D\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u5F00\\u9500\\u589E\\u52A0\\u548C\\u6548\\u7387\\u4F4E\\u4E0B\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5185\\u7F6E\\u6D4F\\u89C8\\u5668\\u652F\\u6301\"}),\"\\uFF1A\\u53D7\\u5927\\u591A\\u6570\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u652F\\u6301\\uFF0C\\u65E0\\u9700\\u5176\\u4ED6\\u5E93\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E8B\\u4EF6\\u7C7B\\u578B\"}),\"\\uFF1ASSE \\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"event:\"}),\" \\u5B57\\u6BB5\\u652F\\u6301\\u81EA\\u5B9A\\u4E49\\u4E8B\\u4EF6\\u7C7B\\u578B\\uFF0C\\u5141\\u8BB8\\u5BF9\\u6D88\\u606F\\u8FDB\\u884C\\u5206\\u7C7B\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Last-Event-Id\"})}),\"\\uFF1A\\u5BA2\\u6237\\u7AEF\\u5728\\u91CD\\u65B0\\u8FDE\\u63A5\\u65F6\\u53D1\\u9001 \",(0,n.jsx)(e.code,{children:\"Last-Event-Id\"}),\" \\u6807\\u5934\\uFF0C\\u5141\\u8BB8\\u670D\\u52A1\\u5668\\u4ECE\\u4E0A\\u6B21\\u63A5\\u6536\\u5230\\u7684\\u4E8B\\u4EF6\\u6062\\u590D\\u6D41\\u3002\\u4F46\\u662F\\uFF0C\\u6CA1\\u6709\\u5185\\u7F6E\\u7684\\u673A\\u5236\\u6765\\u91CD\\u653E\\u65AD\\u5F00\\u8FDE\\u63A5\\u671F\\u95F4\\u9519\\u8FC7\\u7684\\u4E8B\\u4EF6\\u3002\\u60A8\\u53EF\\u80FD\\u9700\\u8981\\u5B9E\\u73B0\\u4E00\\u79CD\\u673A\\u5236\\u6765\\u5904\\u7406\\u9519\\u8FC7\\u7684\\u4E8B\\u4EF6\\uFF0C\\u4F8B\\u5982\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Last-Event-Id\"}),\" \\u6807\\u5934\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8FDE\\u63A5\\u9650\\u5236\"}),\"\\uFF1A\\u6D4F\\u89C8\\u5668\\u5BF9\\u5E76\\u53D1 SSE \\u8FDE\\u63A5\\u7684\\u6700\\u5927\\u6570\\u91CF\\u6709\\u9650\\u5236\\uFF0C\\u901A\\u5E38\\u6BCF\\u4E2A\\u57DF\\u5927\\u7EA6 6 \\u4E2A\\u3002\\u5982\\u679C\\u9700\\u8981\\u4ECE\\u540C\\u4E00\\u5BA2\\u6237\\u7AEF\\u5EFA\\u7ACB\\u591A\\u4E2A SSE \\u8FDE\\u63A5\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u6210\\u4E3A\\u74F6\\u9888\\u3002\\u4F7F\\u7528 HTTP/2 \\u5C06\\u7F13\\u89E3\\u6B64\\u95EE\\u9898\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5728 JavaScript \\u4E2D\\u5B9E\\u73B0 SSE\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u4EE3\\u7801\\u6F14\\u793A\\u4E86\\u5BA2\\u6237\\u7AEF\\u548C\\u670D\\u52A1\\u5668\\u4E0A SSE \\u7684\\u6700\\u5C0F\\u5B9E\\u73B0\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u670D\\u52A1\\u5668\\u8BBE\\u7F6E\\u9002\\u5F53\\u7684\\u6807\\u5934\\u4EE5\\u5EFA\\u7ACB SSE \\u8FDE\\u63A5\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u6D88\\u606F\\u6BCF 5 \\u79D2\\u53D1\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5F53\\u5BA2\\u6237\\u7AEF\\u65AD\\u5F00\\u8FDE\\u63A5\\u65F6\\uFF0C\\u670D\\u52A1\\u5668\\u6E05\\u7406\\u95F4\\u9694\\u5E76\\u7ED3\\u675F\\u54CD\\u5E94\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u5BA2\\u6237\\u7AEF\\u4E0A\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a new EventSource object\nconst eventSource = new EventSource('/sse');\n\n// Event listener for receiving messages\neventSource.onmessage = function (event) {\n  console.log('New message:', event.data);\n};\n\n// Event listener for errors\neventSource.onerror = function (error) {\n  console.error('Error occurred:', error);\n};\n\n// Optional: Event listener for open connection\neventSource.onopen = function () {\n  console.log('Connection opened');\n};\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u670D\\u52A1\\u5668\\u4E0A\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const http = require('http');\n\nhttp\n  .createServer((req, res) => {\n    if (req.url === '/sse') {\n      // Set headers for SSE\n      res.writeHead(200, {\n        'Content-Type': 'text/event-stream',\n        'Cache-Control': 'no-cache',\n        Connection: 'keep-alive',\n      });\n\n      // Function to send a message\n      const sendMessage = (message) => {\n        res.write(\\`data: \\${message}\\\\n\\\\n\\`); // Messages are delimited with double line breaks.\n      };\n\n      // Send a message every 5 seconds\n      const intervalId = setInterval(() => {\n        sendMessage(\\`Current time: \\${new Date().toLocaleTimeString()}\\`);\n      }, 5000);\n\n      // Handle client disconnect\n      req.on('close', () => {\n        clearInterval(intervalId);\n        res.end();\n      });\n    } else {\n      res.writeHead(404);\n      res.end();\n    }\n  })\n  .listen(8080, () => {\n    console.log('SSE server running on port 8080');\n  });\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u9AD8\\u6548\\u4E14\\u76F4\\u63A5\\u7684\\u65B9\\u5F0F\\uFF0C\\u53EF\\u4EE5\\u5C06\\u66F4\\u65B0\\u4ECE\\u670D\\u52A1\\u5668\\u63A8\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\\u3002\\u5B83\\u4EEC\\u7279\\u522B\\u9002\\u7528\\u4E8E\\u9700\\u8981\\u8FDE\\u7EED\\u6570\\u636E\\u6D41\\u4F46\\u4E0D\\u9700\\u8981\\u5B8C\\u5168\\u53CC\\u5411\\u901A\\u4FE1\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\\u7531\\u4E8E\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u5185\\u7F6E\\u4E86\\u652F\\u6301\\uFF0CSSE \\u662F\\u8BB8\\u591A\\u5B9E\\u65F6 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u53EF\\u9760\\u9009\\u62E9\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Server-sent_events/Using_server-sent_events\",children:\"\\u4F7F\\u7528\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6 - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/server-sent-events\",children:\"\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6 - javascript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://ably.com/topic/server-sent-events\",children:\"\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6\\uFF1A\\u4E00\\u4E2A\\u51C6\\u5907\\u597D\\u518D\\u6B21\\u5BA1\\u89C6\\u7684 WebSockets \\u66FF\\u4EE3\\u65B9\\u6848\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://bunny.net/academy/http/what-is-sse-server-sent-events-and-how-do-they-work/\",children:\"\\u4EC0\\u4E48\\u662F SSE\\uFF08\\u670D\\u52A1\\u5668\\u53D1\\u9001\\u4E8B\\u4EF6\\uFF09\\u4EE5\\u53CA\\u5B83\\u4EEC\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"})}),`\n`]})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(a,{...r})}):a(r)}return w(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-sets-and-maps-and-how-are-they-used/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-sets-and-maps-and-how-are-they-used/en-US.json
index 6c405b5b8..7cd1ddd14 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-sets-and-maps-and-how-are-they-used/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-sets-and-maps-and-how-are-they-used/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-sets-and-maps-and-how-are-they-used/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),S=(l,e)=>{for(var a in e)t(l,a,{get:e[a],enumerable:!0})},d=(l,e,a,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!y.call(l,c)&&c!==a&&t(l,c,{get:()=>e[c],enumerable:!(i=u(e,c))||i.enumerable});return l};var g=(l,e,a)=>(a=l!=null?s(m(l)):{},d(e||!l||!l.__esModule?t(a,\"default\",{value:l,enumerable:!0}):a,l)),M=l=>d(t({},\"__esModule\",{value:!0}),l);var r=v((x,o)=>{o.exports=_jsx_runtime});var b={};S(b,{default:()=>w,frontmatter:()=>f});var n=g(r()),f={title:\"What are `Set`s and `Map`s and how are they used?\"};function h(l){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},l.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Set\"}),\"s and \",(0,n.jsx)(e.code,{children:\"Map\"}),\"s are built-in JavaScript objects that help manage collections of data. A \",(0,n.jsx)(e.code,{children:\"Set\"}),\" is a collection of unique values, while a \",(0,n.jsx)(e.code,{children:\"Map\"}),\" is a collection of key-value pairs where keys can be of any type. \",(0,n.jsx)(e.code,{children:\"Set\"}),\"s are useful for storing unique items, and \",(0,n.jsx)(e.code,{children:\"Map\"}),\"s are useful for associating values with keys.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Set example\nlet mySet = new Set([1, 2, 3, 3]); // Set {1, 2, 3} (duplicate values are not added)\nmySet.add(4);\nconsole.log(mySet); // Set {1, 2, 3, 4}\n\n// Map example\nlet myMap = new Map();\nmyMap.set('key1', 'value1');\nmyMap.set('key2', 'value2');\nconsole.log(myMap.get('key1')); // 'value1'\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Set\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"What is a \",(0,n.jsx)(e.code,{children:\"Set\"}),\"?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"A \",(0,n.jsx)(e.code,{children:\"Set\"}),\" is a collection of values where each value must be unique. It is similar to an array but does not allow duplicate values.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"How to create a \",(0,n.jsx)(e.code,{children:\"Set\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can create a \",(0,n.jsx)(e.code,{children:\"Set\"}),\" using the \",(0,n.jsx)(e.code,{children:\"Set\"}),\" constructor:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let mySet = new Set([1, 2, 3, 3]);\nconsole.log(mySet); // Set {1, 2, 3}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Common methods\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"add(value)\"}),\": Adds a new element with the given value to the \",(0,n.jsx)(e.code,{children:\"Set\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"delete(value)\"}),\": Removes the element associated with the value.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"has(value)\"}),\": Returns a boolean indicating whether the value exists in the \",(0,n.jsx)(e.code,{children:\"Set\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"clear()\"}),\": Removes all elements from the \",(0,n.jsx)(e.code,{children:\"Set\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"size\"}),\": Returns the number of elements in the \",(0,n.jsx)(e.code,{children:\"Set\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example usage\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let mySet = new Set();\nmySet.add(1);\nmySet.add(2);\nmySet.add(2); // Duplicate value, will not be added\nconsole.log(mySet.has(1)); // true\nconsole.log(mySet.size); // 2\nmySet.delete(1);\nconsole.log(mySet.has(1)); // false\nmySet.clear();\nconsole.log(mySet.size); // 0\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Map\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"What is a \",(0,n.jsx)(e.code,{children:\"Map\"}),\"?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"A \",(0,n.jsx)(e.code,{children:\"Map\"}),\" is a collection of key-value pairs where keys can be of any type, including objects, functions, and primitives.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"How to create a \",(0,n.jsx)(e.code,{children:\"Map\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can create a \",(0,n.jsx)(e.code,{children:\"Map\"}),\" using the \",(0,n.jsx)(e.code,{children:\"Map\"}),\" constructor:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let myMap = new Map();\nmyMap.set('key1', 'value1');\nmyMap.set('key2', 'value2');\nconsole.log(myMap); // Map { key1: \"value1\", key2: \"value2\" }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Common methods\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"set(key, value)\"}),\": Adds or updates an element with the specified key and value.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"get(key)\"}),\": Returns the value associated with the key.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"delete(key)\"}),\": Removes the element associated with the key.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"has(key)\"}),\": Returns a boolean indicating whether the key exists in the \",(0,n.jsx)(e.code,{children:\"Map\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"clear()\"}),\": Removes all elements from the \",(0,n.jsx)(e.code,{children:\"Map\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"size\"}),\": Returns the number of elements in the \",(0,n.jsx)(e.code,{children:\"Map\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example usage\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let myMap = new Map();\nmyMap.set('key1', 'value1');\nmyMap.set('key2', 'value2');\nconsole.log(myMap.get('key1')); // 'value1'\nconsole.log(myMap.has('key2')); // true\nconsole.log(myMap.size); // 2\nmyMap.delete('key1');\nconsole.log(myMap.has('key1')); // false\nmyMap.clear();\nconsole.log(myMap.size); // 0\n`})}),`\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/Web/JavaScript/Reference/Global_Objects/Set\",children:\"MDN Web Docs: Set\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map\",children:\"MDN Web Docs: Map\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/map-set\",children:\"JavaScript.info: Set and Map\"})}),`\n`]})]})}function k(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(h,l)})):h(l)}var w=k;return M(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var S=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),M=(l,e)=>{for(var a in e)t(l,a,{get:e[a],enumerable:!0})},d=(l,e,a,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!v.call(l,c)&&c!==a&&t(l,c,{get:()=>e[c],enumerable:!(i=p(e,c))||i.enumerable});return l};var g=(l,e,a)=>(a=l!=null?u(y(l)):{},d(e||!l||!l.__esModule?t(a,\"default\",{value:l,enumerable:!0}):a,l)),f=l=>d(t({},\"__esModule\",{value:!0}),l);var r=S((j,o)=>{o.exports=_jsx_runtime});var w={};M(w,{default:()=>s,frontmatter:()=>k});var n=g(r()),k={title:\"What are `Set`s and `Map`s and how are they used?\"};function h(l){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Set\"}),\"s and \",(0,n.jsx)(e.code,{children:\"Map\"}),\"s are built-in JavaScript objects that help manage collections of data. A \",(0,n.jsx)(e.code,{children:\"Set\"}),\" is a collection of unique values, while a \",(0,n.jsx)(e.code,{children:\"Map\"}),\" is a collection of key-value pairs where keys can be of any type. \",(0,n.jsx)(e.code,{children:\"Set\"}),\"s are useful for storing unique items, and \",(0,n.jsx)(e.code,{children:\"Map\"}),\"s are useful for associating values with keys.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Set example\nlet mySet = new Set([1, 2, 3, 3]); // Set {1, 2, 3} (duplicate values are not added)\nmySet.add(4);\nconsole.log(mySet); // Set {1, 2, 3, 4}\n\n// Map example\nlet myMap = new Map();\nmyMap.set('key1', 'value1');\nmyMap.set('key2', 'value2');\nconsole.log(myMap.get('key1')); // 'value1'\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Set\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"What is a \",(0,n.jsx)(e.code,{children:\"Set\"}),\"?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"A \",(0,n.jsx)(e.code,{children:\"Set\"}),\" is a collection of values where each value must be unique. It is similar to an array but does not allow duplicate values.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"How to create a \",(0,n.jsx)(e.code,{children:\"Set\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can create a \",(0,n.jsx)(e.code,{children:\"Set\"}),\" using the \",(0,n.jsx)(e.code,{children:\"Set\"}),\" constructor:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let mySet = new Set([1, 2, 3, 3]);\nconsole.log(mySet); // Set {1, 2, 3}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Common methods\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"add(value)\"}),\": Adds a new element with the given value to the \",(0,n.jsx)(e.code,{children:\"Set\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"delete(value)\"}),\": Removes the element associated with the value.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"has(value)\"}),\": Returns a boolean indicating whether the value exists in the \",(0,n.jsx)(e.code,{children:\"Set\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"clear()\"}),\": Removes all elements from the \",(0,n.jsx)(e.code,{children:\"Set\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"size\"}),\": Returns the number of elements in the \",(0,n.jsx)(e.code,{children:\"Set\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example usage\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let mySet = new Set();\nmySet.add(1);\nmySet.add(2);\nmySet.add(2); // Duplicate value, will not be added\nconsole.log(mySet.has(1)); // true\nconsole.log(mySet.size); // 2\nmySet.delete(1);\nconsole.log(mySet.has(1)); // false\nmySet.clear();\nconsole.log(mySet.size); // 0\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Map\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"What is a \",(0,n.jsx)(e.code,{children:\"Map\"}),\"?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"A \",(0,n.jsx)(e.code,{children:\"Map\"}),\" is a collection of key-value pairs where keys can be of any type, including objects, functions, and primitives.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"How to create a \",(0,n.jsx)(e.code,{children:\"Map\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can create a \",(0,n.jsx)(e.code,{children:\"Map\"}),\" using the \",(0,n.jsx)(e.code,{children:\"Map\"}),\" constructor:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let myMap = new Map();\nmyMap.set('key1', 'value1');\nmyMap.set('key2', 'value2');\nconsole.log(myMap); // Map { key1: \"value1\", key2: \"value2\" }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Common methods\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"set(key, value)\"}),\": Adds or updates an element with the specified key and value.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"get(key)\"}),\": Returns the value associated with the key.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"delete(key)\"}),\": Removes the element associated with the key.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"has(key)\"}),\": Returns a boolean indicating whether the key exists in the \",(0,n.jsx)(e.code,{children:\"Map\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"clear()\"}),\": Removes all elements from the \",(0,n.jsx)(e.code,{children:\"Map\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"size\"}),\": Returns the number of elements in the \",(0,n.jsx)(e.code,{children:\"Map\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example usage\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let myMap = new Map();\nmyMap.set('key1', 'value1');\nmyMap.set('key2', 'value2');\nconsole.log(myMap.get('key1')); // 'value1'\nconsole.log(myMap.has('key2')); // true\nconsole.log(myMap.size); // 2\nmyMap.delete('key1');\nconsole.log(myMap.has('key1')); // false\nmyMap.clear();\nconsole.log(myMap.size); // 0\n`})}),`\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/Web/JavaScript/Reference/Global_Objects/Set\",children:\"MDN Web Docs: Set\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map\",children:\"MDN Web Docs: Map\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/map-set\",children:\"JavaScript.info: Set and Map\"})}),`\n`]})]})}function s(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(h,{...l})}):h(l)}return f(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-sets-and-maps-and-how-are-they-used/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-sets-and-maps-and-how-are-they-used/zh-CN.json
index 7256be6f9..229a7be81 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-sets-and-maps-and-how-are-they-used/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-sets-and-maps-and-how-are-they-used/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-sets-and-maps-and-how-are-they-used/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var M=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),u=(l,e)=>{for(var c in e)r(l,c,{get:e[c],enumerable:!0})},i=(l,e,c,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of m(e))!S.call(l,d)&&d!==c&&r(l,d,{get:()=>e[d],enumerable:!(a=p(e,d))||a.enumerable});return l};var g=(l,e,c)=>(c=l!=null?s(y(l)):{},i(e||!l||!l.__esModule?r(c,\"default\",{value:l,enumerable:!0}):c,l)),v=l=>i(r({},\"__esModule\",{value:!0}),l);var h=M((_,t)=>{t.exports=_jsx_runtime});var b={};u(b,{default:()=>f,frontmatter:()=>k});var n=g(h()),k={title:\"\\u4EC0\\u4E48\\u662F `Set` \\u548C `Map` \\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u4EEC\\uFF1F\"};function o(l){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},l.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u662F\\u5185\\u7F6E\\u7684 JavaScript \\u5BF9\\u8C61\\uFF0C\\u53EF\\u5E2E\\u52A9\\u7BA1\\u7406\\u6570\\u636E\\u96C6\\u5408\\u3002\",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u662F\\u552F\\u4E00\\u503C\\u7684\\u96C6\\u5408\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u662F\\u952E\\u503C\\u5BF9\\u7684\\u96C6\\u5408\\uFF0C\\u5176\\u4E2D\\u952E\\u53EF\\u4EE5\\u662F\\u4EFB\\u4F55\\u7C7B\\u578B\\u3002\",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u9002\\u7528\\u4E8E\\u5B58\\u50A8\\u552F\\u4E00\\u9879\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u9002\\u7528\\u4E8E\\u5C06\\u503C\\u4E0E\\u952E\\u5173\\u8054\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Set example\nlet mySet = new Set([1, 2, 3, 3]); // Set {1, 2, 3} (duplicate values are not added)\nmySet.add(4);\nconsole.log(mySet); // Set {1, 2, 3, 4}\n\n// Map example\nlet myMap = new Map();\nmyMap.set('key1', 'value1');\nmyMap.set('key2', 'value2');\nconsole.log(myMap.get('key1')); // 'value1'\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Set\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4EC0\\u4E48\\u662F \",(0,n.jsx)(e.code,{children:\"Set\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u662F\\u503C\\u7684\\u96C6\\u5408\\uFF0C\\u5176\\u4E2D\\u6BCF\\u4E2A\\u503C\\u90FD\\u5FC5\\u987B\\u662F\\u552F\\u4E00\\u7684\\u3002\\u5B83\\u7C7B\\u4F3C\\u4E8E\\u6570\\u7EC4\\uFF0C\\u4F46\\u4E0D\\u5141\\u8BB8\\u91CD\\u590D\\u503C\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u5982\\u4F55\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"Set\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u6784\\u9020\\u51FD\\u6570\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"Set\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let mySet = new Set([1, 2, 3, 3]);\nconsole.log(mySet); // Set {1, 2, 3}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5E38\\u7528\\u65B9\\u6CD5\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"add(value)\"}),\": \\u5C06\\u5177\\u6709\\u7ED9\\u5B9A\\u503C\\u7684\\u5143\\u7D20\\u6DFB\\u52A0\\u5230 \",(0,n.jsx)(e.code,{children:\"Set\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"delete(value)\"}),\": \\u5220\\u9664\\u4E0E\\u8BE5\\u503C\\u5173\\u8054\\u7684\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"has(value)\"}),\": \\u8FD4\\u56DE\\u4E00\\u4E2A\\u5E03\\u5C14\\u503C\\uFF0C\\u6307\\u793A\\u8BE5\\u503C\\u662F\\u5426\\u5B58\\u5728\\u4E8E \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u4E2D\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"clear()\"}),\": \\u4ECE \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u4E2D\\u5220\\u9664\\u6240\\u6709\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"size\"}),\": \\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u4E2D\\u7684\\u5143\\u7D20\\u6570\\u91CF\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let mySet = new Set();\nmySet.add(1);\nmySet.add(2);\nmySet.add(2); // Duplicate value, will not be added\nconsole.log(mySet.has(1)); // true\nconsole.log(mySet.size); // 2\nmySet.delete(1);\nconsole.log(mySet.has(1)); // false\nmySet.clear();\nconsole.log(mySet.size); // 0\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Map\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4EC0\\u4E48\\u662F \",(0,n.jsx)(e.code,{children:\"Map\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u662F\\u952E\\u503C\\u5BF9\\u7684\\u96C6\\u5408\\uFF0C\\u5176\\u4E2D\\u952E\\u53EF\\u4EE5\\u662F\\u4EFB\\u4F55\\u7C7B\\u578B\\uFF0C\\u5305\\u62EC\\u5BF9\\u8C61\\u3001\\u51FD\\u6570\\u548C\\u57FA\\u672C\\u7C7B\\u578B\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u5982\\u4F55\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"Map\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u6784\\u9020\\u51FD\\u6570\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"Map\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let myMap = new Map();\nmyMap.set('key1', 'value1');\nmyMap.set('key2', 'value2');\nconsole.log(myMap); // Map { key1: \"value1\", key2: \"value2\" }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5E38\\u7528\\u65B9\\u6CD5\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"set(key, value)\"}),\": \\u6DFB\\u52A0\\u6216\\u66F4\\u65B0\\u5177\\u6709\\u6307\\u5B9A\\u952E\\u548C\\u503C\\u7684\\u4E00\\u4E2A\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"get(key)\"}),\": \\u8FD4\\u56DE\\u4E0E\\u8BE5\\u952E\\u5173\\u8054\\u7684\\u503C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"delete(key)\"}),\": \\u79FB\\u9664\\u4E0E\\u8BE5\\u952E\\u5173\\u8054\\u7684\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"has(key)\"}),\": \\u8FD4\\u56DE\\u4E00\\u4E2A\\u5E03\\u5C14\\u503C\\uFF0C\\u6307\\u793A\\u8BE5\\u952E\\u662F\\u5426\\u5B58\\u5728\\u4E8E \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u4E2D\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"clear()\"}),\": \\u4ECE \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u4E2D\\u79FB\\u9664\\u6240\\u6709\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"size\"}),\": \\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u4E2D\\u5143\\u7D20\\u7684\\u6570\\u91CF\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let myMap = new Map();\nmyMap.set('key1', 'value1');\nmyMap.set('key2', 'value2');\nconsole.log(myMap.get('key1')); // 'value1'\nconsole.log(myMap.has('key2')); // true\nconsole.log(myMap.size); // 2\nmyMap.delete('key1');\nconsole.log(myMap.has('key1')); // false\nmyMap.clear();\nconsole.log(myMap.size); // 0\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Set\",children:\"MDN Web Docs: Set\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map\",children:\"MDN Web Docs: Map\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/map-set\",children:\"JavaScript.info: Set and Map\"})}),`\n`]})]})}function j(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(o,l)})):o(l)}var f=j;return v(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var u=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),g=(l,e)=>{for(var c in e)r(l,c,{get:e[c],enumerable:!0})},i=(l,e,c,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of y(e))!M.call(l,d)&&d!==c&&r(l,d,{get:()=>e[d],enumerable:!(a=m(e,d))||a.enumerable});return l};var v=(l,e,c)=>(c=l!=null?p(S(l)):{},i(e||!l||!l.__esModule?r(c,\"default\",{value:l,enumerable:!0}):c,l)),k=l=>i(r({},\"__esModule\",{value:!0}),l);var o=u((b,h)=>{h.exports=_jsx_runtime});var j={};g(j,{default:()=>s,frontmatter:()=>f});var n=v(o()),f={title:\"\\u4EC0\\u4E48\\u662F `Set` \\u548C `Map` \\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u4EEC\\uFF1F\"};function t(l){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u662F\\u5185\\u7F6E\\u7684 JavaScript \\u5BF9\\u8C61\\uFF0C\\u53EF\\u5E2E\\u52A9\\u7BA1\\u7406\\u6570\\u636E\\u96C6\\u5408\\u3002\",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u662F\\u552F\\u4E00\\u503C\\u7684\\u96C6\\u5408\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u662F\\u952E\\u503C\\u5BF9\\u7684\\u96C6\\u5408\\uFF0C\\u5176\\u4E2D\\u952E\\u53EF\\u4EE5\\u662F\\u4EFB\\u4F55\\u7C7B\\u578B\\u3002\",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u9002\\u7528\\u4E8E\\u5B58\\u50A8\\u552F\\u4E00\\u9879\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u9002\\u7528\\u4E8E\\u5C06\\u503C\\u4E0E\\u952E\\u5173\\u8054\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Set example\nlet mySet = new Set([1, 2, 3, 3]); // Set {1, 2, 3} (duplicate values are not added)\nmySet.add(4);\nconsole.log(mySet); // Set {1, 2, 3, 4}\n\n// Map example\nlet myMap = new Map();\nmyMap.set('key1', 'value1');\nmyMap.set('key2', 'value2');\nconsole.log(myMap.get('key1')); // 'value1'\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Set\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4EC0\\u4E48\\u662F \",(0,n.jsx)(e.code,{children:\"Set\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u662F\\u503C\\u7684\\u96C6\\u5408\\uFF0C\\u5176\\u4E2D\\u6BCF\\u4E2A\\u503C\\u90FD\\u5FC5\\u987B\\u662F\\u552F\\u4E00\\u7684\\u3002\\u5B83\\u7C7B\\u4F3C\\u4E8E\\u6570\\u7EC4\\uFF0C\\u4F46\\u4E0D\\u5141\\u8BB8\\u91CD\\u590D\\u503C\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u5982\\u4F55\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"Set\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u6784\\u9020\\u51FD\\u6570\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"Set\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let mySet = new Set([1, 2, 3, 3]);\nconsole.log(mySet); // Set {1, 2, 3}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5E38\\u7528\\u65B9\\u6CD5\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"add(value)\"}),\": \\u5C06\\u5177\\u6709\\u7ED9\\u5B9A\\u503C\\u7684\\u5143\\u7D20\\u6DFB\\u52A0\\u5230 \",(0,n.jsx)(e.code,{children:\"Set\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"delete(value)\"}),\": \\u5220\\u9664\\u4E0E\\u8BE5\\u503C\\u5173\\u8054\\u7684\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"has(value)\"}),\": \\u8FD4\\u56DE\\u4E00\\u4E2A\\u5E03\\u5C14\\u503C\\uFF0C\\u6307\\u793A\\u8BE5\\u503C\\u662F\\u5426\\u5B58\\u5728\\u4E8E \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u4E2D\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"clear()\"}),\": \\u4ECE \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u4E2D\\u5220\\u9664\\u6240\\u6709\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"size\"}),\": \\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u4E2D\\u7684\\u5143\\u7D20\\u6570\\u91CF\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let mySet = new Set();\nmySet.add(1);\nmySet.add(2);\nmySet.add(2); // Duplicate value, will not be added\nconsole.log(mySet.has(1)); // true\nconsole.log(mySet.size); // 2\nmySet.delete(1);\nconsole.log(mySet.has(1)); // false\nmySet.clear();\nconsole.log(mySet.size); // 0\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Map\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4EC0\\u4E48\\u662F \",(0,n.jsx)(e.code,{children:\"Map\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u662F\\u952E\\u503C\\u5BF9\\u7684\\u96C6\\u5408\\uFF0C\\u5176\\u4E2D\\u952E\\u53EF\\u4EE5\\u662F\\u4EFB\\u4F55\\u7C7B\\u578B\\uFF0C\\u5305\\u62EC\\u5BF9\\u8C61\\u3001\\u51FD\\u6570\\u548C\\u57FA\\u672C\\u7C7B\\u578B\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u5982\\u4F55\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"Map\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u6784\\u9020\\u51FD\\u6570\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"Map\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let myMap = new Map();\nmyMap.set('key1', 'value1');\nmyMap.set('key2', 'value2');\nconsole.log(myMap); // Map { key1: \"value1\", key2: \"value2\" }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5E38\\u7528\\u65B9\\u6CD5\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"set(key, value)\"}),\": \\u6DFB\\u52A0\\u6216\\u66F4\\u65B0\\u5177\\u6709\\u6307\\u5B9A\\u952E\\u548C\\u503C\\u7684\\u4E00\\u4E2A\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"get(key)\"}),\": \\u8FD4\\u56DE\\u4E0E\\u8BE5\\u952E\\u5173\\u8054\\u7684\\u503C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"delete(key)\"}),\": \\u79FB\\u9664\\u4E0E\\u8BE5\\u952E\\u5173\\u8054\\u7684\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"has(key)\"}),\": \\u8FD4\\u56DE\\u4E00\\u4E2A\\u5E03\\u5C14\\u503C\\uFF0C\\u6307\\u793A\\u8BE5\\u952E\\u662F\\u5426\\u5B58\\u5728\\u4E8E \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u4E2D\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"clear()\"}),\": \\u4ECE \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u4E2D\\u79FB\\u9664\\u6240\\u6709\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"size\"}),\": \\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u4E2D\\u5143\\u7D20\\u7684\\u6570\\u91CF\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let myMap = new Map();\nmyMap.set('key1', 'value1');\nmyMap.set('key2', 'value2');\nconsole.log(myMap.get('key1')); // 'value1'\nconsole.log(myMap.has('key2')); // true\nconsole.log(myMap.size); // 2\nmyMap.delete('key1');\nconsole.log(myMap.has('key1')); // false\nmyMap.clear();\nconsole.log(myMap.size); // 0\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Set\",children:\"MDN Web Docs: Set\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map\",children:\"MDN Web Docs: Map\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/map-set\",children:\"JavaScript.info: Set and Map\"})}),`\n`]})]})}function s(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(t,{...l})}):t(l)}return k(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-best-practices-for-handling-sensitive-data-in-javascript/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-some-best-practices-for-handling-sensitive-data-in-javascript/en-US.json
index b2a22c8e8..fb9ddfdcd 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-best-practices-for-handling-sensitive-data-in-javascript/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-best-practices-for-handling-sensitive-data-in-javascript/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-some-best-practices-for-handling-sensitive-data-in-javascript/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},o=(t,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of u(e))!v.call(t,s)&&s!==i&&r(t,s,{get:()=>e[s],enumerable:!(a=p(e,s))||a.enumerable});return t};var b=(t,e,i)=>(i=t!=null?h(m(t)):{},o(e||!t||!t.__esModule?r(i,\"default\",{value:t,enumerable:!0}):i,t)),S=t=>o(r({},\"__esModule\",{value:!0}),t);var d=g((w,c)=>{c.exports=_jsx_runtime});var T={};y(T,{default:()=>j,frontmatter:()=>f});var n=b(d()),f={title:\"What are some best practices for handling sensitive data in JavaScript?\"};function l(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",code:\"code\",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.jsx)(e.p,{children:\"Handling sensitive data in JavaScript requires careful attention to security practices. Avoid storing sensitive data in client-side storage like localStorage or sessionStorage. Use HTTPS to encrypt data in transit. Implement proper authentication and authorization mechanisms. Sanitize and validate all inputs to prevent injection attacks. Consider using environment variables for sensitive data in server-side code.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Best practices for handling sensitive data in JavaScript\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Avoid client-side storage for sensitive data\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Storing sensitive data such as tokens, passwords, or personal information in client-side storage like \",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" or \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" is risky because it can be easily accessed by malicious scripts. Instead, use secure cookies with the \",(0,n.jsx)(e.code,{children:\"HttpOnly\"}),\" and \",(0,n.jsx)(e.code,{children:\"Secure\"}),\" flags.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of setting a secure cookie in an Express.js server\nres.cookie('token', token, { httpOnly: true, secure: true });\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Use HTTPS\"}),`\n`,(0,n.jsx)(e.p,{children:\"Always use HTTPS to encrypt data in transit between the client and server. This ensures that sensitive data is not exposed to eavesdroppers.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Implement proper authentication and authorization\"}),`\n`,(0,n.jsx)(e.p,{children:\"Ensure that your application has robust authentication and authorization mechanisms. Use libraries and frameworks that are well-tested and maintained.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of using JSON Web Tokens (JWT) for authentication\nconst jwt = require('jsonwebtoken');\n\nconst token = jwt.sign({ userId: user.id }, process.env.JWT_SECRET, {\n  expiresIn: '1h',\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Sanitize and validate inputs\"}),`\n`,(0,n.jsx)(e.p,{children:\"Always sanitize and validate user inputs to prevent injection attacks such as SQL injection and cross-site scripting (XSS).\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of input validation using the express-validator library\nconst { body, validationResult } = require('express-validator');\n\napp.post(\n  '/submit',\n  [body('email').isEmail(), body('password').isLength({ min: 5 })],\n  (req, res) => {\n    const errors = validationResult(req);\n    if (!errors.isEmpty()) {\n      return res.status(400).json({ errors: errors.array() });\n    }\n    // Proceed with handling the request\n  },\n);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Use environment variables\"}),`\n`,(0,n.jsx)(e.p,{children:\"Store sensitive data such as API keys and database credentials in environment variables rather than hardcoding them in your source code.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of accessing environment variables in Node.js\nconst dbPassword = process.env.DB_PASSWORD;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Regularly update dependencies\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Keep your dependencies up to date to ensure that you have the latest security patches. Use tools like \",(0,n.jsx)(e.code,{children:\"npm audit\"}),\" to identify and fix vulnerabilities.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`# Example of running npm audit\nnpm audit fix\n`})}),`\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://owasp.org/www-project-top-ten/\",children:\"OWASP Top Ten Security Risks\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Security/HTTP_strict_transport_security\",children:\"MDN Web Docs: HTTPS\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://expressjs.com/en/advanced/best-practice-security.html\",children:\"Express.js Security Best Practices\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jwt.io/introduction/\",children:\"JSON Web Tokens (JWT) Introduction\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://express-validator.github.io/docs/\",children:\"express-validator Documentation\"})}),`\n`]})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(l,t)})):l(t)}var j=x;return S(T);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),S=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},o=(t,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!g.call(t,s)&&s!==i&&r(t,s,{get:()=>e[s],enumerable:!(a=u(e,s))||a.enumerable});return t};var f=(t,e,i)=>(i=t!=null?p(v(t)):{},o(e||!t||!t.__esModule?r(i,\"default\",{value:t,enumerable:!0}):i,t)),b=t=>o(r({},\"__esModule\",{value:!0}),t);var d=y((k,c)=>{c.exports=_jsx_runtime});var j={};S(j,{default:()=>h,frontmatter:()=>x});var n=f(d()),x={title:\"What are some best practices for handling sensitive data in JavaScript?\"};function l(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Handling sensitive data in JavaScript requires careful attention to security practices. Avoid storing sensitive data in client-side storage like localStorage or sessionStorage. Use HTTPS to encrypt data in transit. Implement proper authentication and authorization mechanisms. Sanitize and validate all inputs to prevent injection attacks. Consider using environment variables for sensitive data in server-side code.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Best practices for handling sensitive data in JavaScript\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Avoid client-side storage for sensitive data\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Storing sensitive data such as tokens, passwords, or personal information in client-side storage like \",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" or \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\" is risky because it can be easily accessed by malicious scripts. Instead, use secure cookies with the \",(0,n.jsx)(e.code,{children:\"HttpOnly\"}),\" and \",(0,n.jsx)(e.code,{children:\"Secure\"}),\" flags.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of setting a secure cookie in an Express.js server\nres.cookie('token', token, { httpOnly: true, secure: true });\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Use HTTPS\"}),`\n`,(0,n.jsx)(e.p,{children:\"Always use HTTPS to encrypt data in transit between the client and server. This ensures that sensitive data is not exposed to eavesdroppers.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Implement proper authentication and authorization\"}),`\n`,(0,n.jsx)(e.p,{children:\"Ensure that your application has robust authentication and authorization mechanisms. Use libraries and frameworks that are well-tested and maintained.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of using JSON Web Tokens (JWT) for authentication\nconst jwt = require('jsonwebtoken');\n\nconst token = jwt.sign({ userId: user.id }, process.env.JWT_SECRET, {\n  expiresIn: '1h',\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Sanitize and validate inputs\"}),`\n`,(0,n.jsx)(e.p,{children:\"Always sanitize and validate user inputs to prevent injection attacks such as SQL injection and cross-site scripting (XSS).\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of input validation using the express-validator library\nconst { body, validationResult } = require('express-validator');\n\napp.post(\n  '/submit',\n  [body('email').isEmail(), body('password').isLength({ min: 5 })],\n  (req, res) => {\n    const errors = validationResult(req);\n    if (!errors.isEmpty()) {\n      return res.status(400).json({ errors: errors.array() });\n    }\n    // Proceed with handling the request\n  },\n);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Use environment variables\"}),`\n`,(0,n.jsx)(e.p,{children:\"Store sensitive data such as API keys and database credentials in environment variables rather than hardcoding them in your source code.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of accessing environment variables in Node.js\nconst dbPassword = process.env.DB_PASSWORD;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Regularly update dependencies\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Keep your dependencies up to date to ensure that you have the latest security patches. Use tools like \",(0,n.jsx)(e.code,{children:\"npm audit\"}),\" to identify and fix vulnerabilities.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`# Example of running npm audit\nnpm audit fix\n`})}),`\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://owasp.org/www-project-top-ten/\",children:\"OWASP Top Ten Security Risks\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Security/HTTP_strict_transport_security\",children:\"MDN Web Docs: HTTPS\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://expressjs.com/en/advanced/best-practice-security.html\",children:\"Express.js Security Best Practices\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jwt.io/introduction/\",children:\"JSON Web Tokens (JWT) Introduction\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://express-validator.github.io/docs/\",children:\"express-validator Documentation\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}return b(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-best-practices-for-handling-sensitive-data-in-javascript/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-some-best-practices-for-handling-sensitive-data-in-javascript/zh-CN.json
index 512ef8584..60b8859dd 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-best-practices-for-handling-sensitive-data-in-javascript/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-best-practices-for-handling-sensitive-data-in-javascript/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-some-best-practices-for-handling-sensitive-data-in-javascript/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),S=(r,e)=>{for(var i in e)t(r,i,{get:e[i],enumerable:!0})},o=(r,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of u(e))!g.call(r,s)&&s!==i&&t(r,s,{get:()=>e[s],enumerable:!(c=p(e,s))||c.enumerable});return r};var j=(r,e,i)=>(i=r!=null?h(m(r)):{},o(e||!r||!r.__esModule?t(i,\"default\",{value:r,enumerable:!0}):i,r)),f=r=>o(t({},\"__esModule\",{value:!0}),r);var l=x((_,a)=>{a.exports=_jsx_runtime});var w={};S(w,{default:()=>T,frontmatter:()=>b});var n=j(l()),b={title:\"\\u5728 JavaScript \\u4E2D\\u5904\\u7406\\u654F\\u611F\\u6570\\u636E\\u7684\\u4E00\\u4E9B\\u6700\\u4F73\\u5B9E\\u8DF5\\u662F\\u4EC0\\u4E48\\uFF1F\"};function d(r){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",code:\"code\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 JavaScript \\u4E2D\\u5904\\u7406\\u654F\\u611F\\u6570\\u636E\\u9700\\u8981\\u7279\\u522B\\u6CE8\\u610F\\u5B89\\u5168\\u5B9E\\u8DF5\\u3002 \\u907F\\u514D\\u5C06\\u654F\\u611F\\u6570\\u636E\\u5B58\\u50A8\\u5728\\u5BA2\\u6237\\u7AEF\\u5B58\\u50A8\\u4E2D\\uFF0C\\u5982 localStorage \\u6216 sessionStorage\\u3002 \\u4F7F\\u7528 HTTPS \\u52A0\\u5BC6\\u4F20\\u8F93\\u4E2D\\u7684\\u6570\\u636E\\u3002 \\u5B9E\\u65BD\\u9002\\u5F53\\u7684\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u548C\\u6388\\u6743\\u673A\\u5236\\u3002 \\u51C0\\u5316\\u548C\\u9A8C\\u8BC1\\u6240\\u6709\\u8F93\\u5165\\u4EE5\\u9632\\u6B62\\u6CE8\\u5165\\u653B\\u51FB\\u3002 \\u8003\\u8651\\u5728\\u670D\\u52A1\\u5668\\u7AEF\\u4EE3\\u7801\\u4E2D\\u4F7F\\u7528\\u73AF\\u5883\\u53D8\\u91CF\\u6765\\u5B58\\u50A8\\u654F\\u611F\\u6570\\u636E\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5728 JavaScript \\u4E2D\\u5904\\u7406\\u654F\\u611F\\u6570\\u636E\\u7684\\u6700\\u4F73\\u5B9E\\u8DF5\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u907F\\u514D\\u5C06\\u654F\\u611F\\u6570\\u636E\\u5B58\\u50A8\\u5728\\u5BA2\\u6237\\u7AEF\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5C06\\u654F\\u611F\\u6570\\u636E\\uFF08\\u5982\\u4EE4\\u724C\\u3001\\u5BC6\\u7801\\u6216\\u4E2A\\u4EBA\\u4FE1\\u606F\\uFF09\\u5B58\\u50A8\\u5728\\u5BA2\\u6237\\u7AEF\\u5B58\\u50A8\\uFF08\\u5982 \",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\"\\uFF09\\u4E2D\\u5B58\\u5728\\u98CE\\u9669\\uFF0C\\u56E0\\u4E3A\\u6076\\u610F\\u811A\\u672C\\u53EF\\u4EE5\\u8F7B\\u677E\\u8BBF\\u95EE\\u5B83\\u3002 \\u800C\\u662F\\u4F7F\\u7528\\u5E26\\u6709 \",(0,n.jsx)(e.code,{children:\"HttpOnly\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Secure\"}),\" \\u6807\\u5FD7\\u7684\\u5B89\\u5168 cookie\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of setting a secure cookie in an Express.js server\nres.cookie('token', token, { httpOnly: true, secure: true });\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 HTTPS\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u59CB\\u7EC8\\u4F7F\\u7528 HTTPS \\u52A0\\u5BC6\\u5BA2\\u6237\\u7AEF\\u548C\\u670D\\u52A1\\u5668\\u4E4B\\u95F4\\u4F20\\u8F93\\u7684\\u6570\\u636E\\u3002 \\u8FD9\\u53EF\\u786E\\u4FDD\\u654F\\u611F\\u6570\\u636E\\u4E0D\\u4F1A\\u66B4\\u9732\\u7ED9\\u7A83\\u542C\\u8005\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B9E\\u65BD\\u9002\\u5F53\\u7684\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u548C\\u6388\\u6743\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u786E\\u4FDD\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u5177\\u6709\\u5F3A\\u5927\\u7684\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u548C\\u6388\\u6743\\u673A\\u5236\\u3002 \\u4F7F\\u7528\\u7ECF\\u8FC7\\u5145\\u5206\\u6D4B\\u8BD5\\u548C\\u7EF4\\u62A4\\u7684\\u5E93\\u548C\\u6846\\u67B6\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of using JSON Web Tokens (JWT) for authentication\nconst jwt = require('jsonwebtoken');\n\nconst token = jwt.sign({ userId: user.id }, process.env.JWT_SECRET, {\n  expiresIn: '1h',\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u51C0\\u5316\\u548C\\u9A8C\\u8BC1\\u8F93\\u5165\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u59CB\\u7EC8\\u51C0\\u5316\\u548C\\u9A8C\\u8BC1\\u7528\\u6237\\u8F93\\u5165\\uFF0C\\u4EE5\\u9632\\u6B62\\u6CE8\\u5165\\u653B\\u51FB\\uFF0C\\u4F8B\\u5982 SQL \\u6CE8\\u5165\\u548C\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS)\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of input validation using the express-validator library\nconst { body, validationResult } = require('express-validator');\n\napp.post(\n  '/submit',\n  [body('email').isEmail(), body('password').isLength({ min: 5 })],\n  (req, res) => {\n    const errors = validationResult(req);\n    if (!errors.isEmpty()) {\n      return res.status(400).json({ errors: errors.array() });\n    }\n    // Proceed with handling the request\n  },\n);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u73AF\\u5883\\u53D8\\u91CF\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5C06\\u654F\\u611F\\u6570\\u636E\\uFF08\\u5982 API \\u5BC6\\u94A5\\u548C\\u6570\\u636E\\u5E93\\u51ED\\u636E\\uFF09\\u5B58\\u50A8\\u5728\\u73AF\\u5883\\u53D8\\u91CF\\u4E2D\\uFF0C\\u800C\\u4E0D\\u662F\\u5728\\u6E90\\u4EE3\\u7801\\u4E2D\\u5BF9\\u5176\\u8FDB\\u884C\\u786C\\u7F16\\u7801\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of accessing environment variables in Node.js\nconst dbPassword = process.env.DB_PASSWORD;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B9A\\u671F\\u66F4\\u65B0\\u4F9D\\u8D56\\u9879\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4FDD\\u6301\\u60A8\\u7684\\u4F9D\\u8D56\\u9879\\u4E3A\\u6700\\u65B0\\uFF0C\\u4EE5\\u786E\\u4FDD\\u60A8\\u62E5\\u6709\\u6700\\u65B0\\u7684\\u5B89\\u5168\\u8865\\u4E01\\u3002\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"npm audit\"}),\" \\u7B49\\u5DE5\\u5177\\u6765\\u8BC6\\u522B\\u548C\\u4FEE\\u590D\\u6F0F\\u6D1E\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`# Example of running npm audit\nnpm audit fix\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://owasp.org/www-project-top-ten/\",children:\"OWASP \\u5341\\u5927\\u5B89\\u5168\\u98CE\\u9669\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Security/HTTP_strict_transport_security\",children:\"MDN Web \\u6587\\u6863\\uFF1AHTTPS\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://expressjs.com/en/advanced/best-practice-security.html\",children:\"Express.js \\u5B89\\u5168\\u6700\\u4F73\\u5B9E\\u8DF5\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jwt.io/introduction/\",children:\"JSON Web Tokens (JWT) \\u7B80\\u4ECB\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://express-validator.github.io/docs/\",children:\"express-validator \\u6587\\u6863\"})}),`\n`]})]})}function v(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(d,r)})):d(r)}var T=v;return f(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var S=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),j=(r,e)=>{for(var i in e)t(r,i,{get:e[i],enumerable:!0})},o=(r,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!x.call(r,s)&&s!==i&&t(r,s,{get:()=>e[s],enumerable:!(c=u(e,s))||c.enumerable});return r};var f=(r,e,i)=>(i=r!=null?p(g(r)):{},o(e||!r||!r.__esModule?t(i,\"default\",{value:r,enumerable:!0}):i,r)),v=r=>o(t({},\"__esModule\",{value:!0}),r);var l=S((y,a)=>{a.exports=_jsx_runtime});var b={};j(b,{default:()=>h,frontmatter:()=>T});var n=f(l()),T={title:\"\\u5728 JavaScript \\u4E2D\\u5904\\u7406\\u654F\\u611F\\u6570\\u636E\\u7684\\u4E00\\u4E9B\\u6700\\u4F73\\u5B9E\\u8DF5\\u662F\\u4EC0\\u4E48\\uFF1F\"};function d(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 JavaScript \\u4E2D\\u5904\\u7406\\u654F\\u611F\\u6570\\u636E\\u9700\\u8981\\u7279\\u522B\\u6CE8\\u610F\\u5B89\\u5168\\u5B9E\\u8DF5\\u3002 \\u907F\\u514D\\u5C06\\u654F\\u611F\\u6570\\u636E\\u5B58\\u50A8\\u5728\\u5BA2\\u6237\\u7AEF\\u5B58\\u50A8\\u4E2D\\uFF0C\\u5982 localStorage \\u6216 sessionStorage\\u3002 \\u4F7F\\u7528 HTTPS \\u52A0\\u5BC6\\u4F20\\u8F93\\u4E2D\\u7684\\u6570\\u636E\\u3002 \\u5B9E\\u65BD\\u9002\\u5F53\\u7684\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u548C\\u6388\\u6743\\u673A\\u5236\\u3002 \\u51C0\\u5316\\u548C\\u9A8C\\u8BC1\\u6240\\u6709\\u8F93\\u5165\\u4EE5\\u9632\\u6B62\\u6CE8\\u5165\\u653B\\u51FB\\u3002 \\u8003\\u8651\\u5728\\u670D\\u52A1\\u5668\\u7AEF\\u4EE3\\u7801\\u4E2D\\u4F7F\\u7528\\u73AF\\u5883\\u53D8\\u91CF\\u6765\\u5B58\\u50A8\\u654F\\u611F\\u6570\\u636E\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5728 JavaScript \\u4E2D\\u5904\\u7406\\u654F\\u611F\\u6570\\u636E\\u7684\\u6700\\u4F73\\u5B9E\\u8DF5\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u907F\\u514D\\u5C06\\u654F\\u611F\\u6570\\u636E\\u5B58\\u50A8\\u5728\\u5BA2\\u6237\\u7AEF\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5C06\\u654F\\u611F\\u6570\\u636E\\uFF08\\u5982\\u4EE4\\u724C\\u3001\\u5BC6\\u7801\\u6216\\u4E2A\\u4EBA\\u4FE1\\u606F\\uFF09\\u5B58\\u50A8\\u5728\\u5BA2\\u6237\\u7AEF\\u5B58\\u50A8\\uFF08\\u5982 \",(0,n.jsx)(e.code,{children:\"localStorage\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"sessionStorage\"}),\"\\uFF09\\u4E2D\\u5B58\\u5728\\u98CE\\u9669\\uFF0C\\u56E0\\u4E3A\\u6076\\u610F\\u811A\\u672C\\u53EF\\u4EE5\\u8F7B\\u677E\\u8BBF\\u95EE\\u5B83\\u3002 \\u800C\\u662F\\u4F7F\\u7528\\u5E26\\u6709 \",(0,n.jsx)(e.code,{children:\"HttpOnly\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Secure\"}),\" \\u6807\\u5FD7\\u7684\\u5B89\\u5168 cookie\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of setting a secure cookie in an Express.js server\nres.cookie('token', token, { httpOnly: true, secure: true });\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 HTTPS\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u59CB\\u7EC8\\u4F7F\\u7528 HTTPS \\u52A0\\u5BC6\\u5BA2\\u6237\\u7AEF\\u548C\\u670D\\u52A1\\u5668\\u4E4B\\u95F4\\u4F20\\u8F93\\u7684\\u6570\\u636E\\u3002 \\u8FD9\\u53EF\\u786E\\u4FDD\\u654F\\u611F\\u6570\\u636E\\u4E0D\\u4F1A\\u66B4\\u9732\\u7ED9\\u7A83\\u542C\\u8005\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B9E\\u65BD\\u9002\\u5F53\\u7684\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u548C\\u6388\\u6743\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u786E\\u4FDD\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u5177\\u6709\\u5F3A\\u5927\\u7684\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u548C\\u6388\\u6743\\u673A\\u5236\\u3002 \\u4F7F\\u7528\\u7ECF\\u8FC7\\u5145\\u5206\\u6D4B\\u8BD5\\u548C\\u7EF4\\u62A4\\u7684\\u5E93\\u548C\\u6846\\u67B6\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of using JSON Web Tokens (JWT) for authentication\nconst jwt = require('jsonwebtoken');\n\nconst token = jwt.sign({ userId: user.id }, process.env.JWT_SECRET, {\n  expiresIn: '1h',\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u51C0\\u5316\\u548C\\u9A8C\\u8BC1\\u8F93\\u5165\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u59CB\\u7EC8\\u51C0\\u5316\\u548C\\u9A8C\\u8BC1\\u7528\\u6237\\u8F93\\u5165\\uFF0C\\u4EE5\\u9632\\u6B62\\u6CE8\\u5165\\u653B\\u51FB\\uFF0C\\u4F8B\\u5982 SQL \\u6CE8\\u5165\\u548C\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS)\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of input validation using the express-validator library\nconst { body, validationResult } = require('express-validator');\n\napp.post(\n  '/submit',\n  [body('email').isEmail(), body('password').isLength({ min: 5 })],\n  (req, res) => {\n    const errors = validationResult(req);\n    if (!errors.isEmpty()) {\n      return res.status(400).json({ errors: errors.array() });\n    }\n    // Proceed with handling the request\n  },\n);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u73AF\\u5883\\u53D8\\u91CF\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5C06\\u654F\\u611F\\u6570\\u636E\\uFF08\\u5982 API \\u5BC6\\u94A5\\u548C\\u6570\\u636E\\u5E93\\u51ED\\u636E\\uFF09\\u5B58\\u50A8\\u5728\\u73AF\\u5883\\u53D8\\u91CF\\u4E2D\\uFF0C\\u800C\\u4E0D\\u662F\\u5728\\u6E90\\u4EE3\\u7801\\u4E2D\\u5BF9\\u5176\\u8FDB\\u884C\\u786C\\u7F16\\u7801\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of accessing environment variables in Node.js\nconst dbPassword = process.env.DB_PASSWORD;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B9A\\u671F\\u66F4\\u65B0\\u4F9D\\u8D56\\u9879\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4FDD\\u6301\\u60A8\\u7684\\u4F9D\\u8D56\\u9879\\u4E3A\\u6700\\u65B0\\uFF0C\\u4EE5\\u786E\\u4FDD\\u60A8\\u62E5\\u6709\\u6700\\u65B0\\u7684\\u5B89\\u5168\\u8865\\u4E01\\u3002\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"npm audit\"}),\" \\u7B49\\u5DE5\\u5177\\u6765\\u8BC6\\u522B\\u548C\\u4FEE\\u590D\\u6F0F\\u6D1E\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`# Example of running npm audit\nnpm audit fix\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://owasp.org/www-project-top-ten/\",children:\"OWASP \\u5341\\u5927\\u5B89\\u5168\\u98CE\\u9669\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Security/HTTP_strict_transport_security\",children:\"MDN Web \\u6587\\u6863\\uFF1AHTTPS\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://expressjs.com/en/advanced/best-practice-security.html\",children:\"Express.js \\u5B89\\u5168\\u6700\\u4F73\\u5B9E\\u8DF5\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jwt.io/introduction/\",children:\"JSON Web Tokens (JWT) \\u7B80\\u4ECB\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://express-validator.github.io/docs/\",children:\"express-validator \\u6587\\u6863\"})}),`\n`]})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(d,{...r})}):d(r)}return v(b);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-best-practices-for-writing-maintainable-and-effective-tests/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-some-best-practices-for-writing-maintainable-and-effective-tests/en-US.json
index 6460f70fd..609a4f96c 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-best-practices-for-writing-maintainable-and-effective-tests/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-best-practices-for-writing-maintainable-and-effective-tests/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-some-best-practices-for-writing-maintainable-and-effective-tests/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var i in e)s(t,i,{get:e[i],enumerable:!0})},l=(t,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of g(e))!m.call(t,r)&&r!==i&&s(t,r,{get:()=>e[r],enumerable:!(a=u(e,r))||a.enumerable});return t};var v=(t,e,i)=>(i=t!=null?h(p(t)):{},l(e||!t||!t.__esModule?s(i,\"default\",{value:t,enumerable:!0}):i,t)),x=t=>l(s({},\"__esModule\",{value:!0}),t);var d=f((D,c)=>{c.exports=_jsx_runtime});var w={};b(w,{default:()=>j,frontmatter:()=>A});var n=v(d()),A={title:\"What are some best practices for writing maintainable and effective tests in JavaScript?\"};function o(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"To write maintainable and effective tests, ensure they are clear, concise, and focused on a single behavior. Use descriptive names for test cases and avoid hardcoding values. Mock external dependencies and keep tests isolated. Regularly review and refactor tests to keep them up-to-date with the codebase.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Best practices for writing maintainable and effective tests\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Write clear and descriptive test names\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Use names that clearly describe the behavior being tested\"}),`\n`,(0,n.jsx)(e.li,{children:\"Avoid abbreviations and keep names meaningful\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Keep tests focused\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Ensure each test case focuses on a single behavior or functionality\"}),`\n`,(0,n.jsx)(e.li,{children:\"Avoid testing multiple things in a single test\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Use the AAA pattern (Arrange, Act, Assert)\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Arrange\"}),\": Set up the initial state and dependencies\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Act\"}),\": Execute the behavior being tested\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Assert\"}),\": Verify the outcome\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`test('should add two numbers correctly', () => {\n  // Arrange\n  const a = 1;\n  const b = 2;\n\n  // Act\n  const result = add(a, b);\n\n  // Assert\n  expect(result).toBe(3);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Avoid hardcoding values\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Use variables and constants to make tests more readable and maintainable\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = 5;\nconst expectedOutput = 25;\n\ntest('should return the square of a number', () => {\n  const result = square(input);\n  expect(result).toBe(expectedOutput);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Mock external dependencies\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Use mocking libraries to simulate external dependencies like APIs, databases, or third-party services\"}),`\n`,(0,n.jsx)(e.li,{children:\"Keep tests isolated from external factors\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`jest.mock('axios');\n\ntest('should fetch data from API', async () => {\n  const data = { id: 1, name: 'John Doe' };\n  axios.get.mockResolvedValue({ data });\n\n  const result = await fetchData();\n\n  expect(result).toEqual(data);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Keep tests isolated\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Ensure tests do not depend on each other\"}),`\n`,(0,n.jsx)(e.li,{children:\"Reset state and clean up after each test\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`afterEach(() => {\n  jest.clearAllMocks();\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Regularly review and refactor tests\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Keep tests up-to-date with changes in the codebase\"}),`\n`,(0,n.jsx)(e.li,{children:\"Remove redundant or outdated tests\"}),`\n`,(0,n.jsx)(e.li,{children:\"Refactor tests to improve readability and maintainability\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Use test coverage tools\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Measure test coverage to identify untested parts of the codebase\"}),`\n`,(0,n.jsx)(e.li,{children:\"Aim for high coverage but prioritize meaningful tests over 100% coverage\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Write tests before fixing bugs\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Reproduce the bug with a failing test\"}),`\n`,(0,n.jsx)(e.li,{children:\"Fix the bug and ensure the test passes\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Use a consistent style\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Follow a consistent style and conventions for writing tests\"}),`\n`,(0,n.jsx)(e.li,{children:\"Use linters and formatters to enforce consistency\"}),`\n`]}),`\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://jestjs.io/docs/getting-started\",children:\"Jest documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://mochajs.org/\",children:\"Mocha documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://testing-library.com/docs/\",children:\"Testing Library documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://kentcdodds.com/blog/effective-snapshot-testing\",children:\"Effective testing with Jest\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://martinfowler.com/bliki/TestDrivenDevelopment.html\",children:\"Test-driven development (TDD)\"})}),`\n`]})]})}function y(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(o,t)})):o(t)}var j=y;return x(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(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})},l=(t,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of g(e))!f.call(t,r)&&r!==i&&s(t,r,{get:()=>e[r],enumerable:!(a=p(e,r))||a.enumerable});return t};var x=(t,e,i)=>(i=t!=null?u(m(t)):{},l(e||!t||!t.__esModule?s(i,\"default\",{value:t,enumerable:!0}):i,t)),A=t=>l(s({},\"__esModule\",{value:!0}),t);var d=b((k,c)=>{c.exports=_jsx_runtime});var w={};v(w,{default:()=>h,frontmatter:()=>y});var n=x(d()),y={title:\"What are some best practices for writing maintainable and effective tests in JavaScript?\"};function o(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"To write maintainable and effective tests, ensure they are clear, concise, and focused on a single behavior. Use descriptive names for test cases and avoid hardcoding values. Mock external dependencies and keep tests isolated. Regularly review and refactor tests to keep them up-to-date with the codebase.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Best practices for writing maintainable and effective tests\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Write clear and descriptive test names\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Use names that clearly describe the behavior being tested\"}),`\n`,(0,n.jsx)(e.li,{children:\"Avoid abbreviations and keep names meaningful\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Keep tests focused\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Ensure each test case focuses on a single behavior or functionality\"}),`\n`,(0,n.jsx)(e.li,{children:\"Avoid testing multiple things in a single test\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Use the AAA pattern (Arrange, Act, Assert)\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Arrange\"}),\": Set up the initial state and dependencies\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Act\"}),\": Execute the behavior being tested\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Assert\"}),\": Verify the outcome\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`test('should add two numbers correctly', () => {\n  // Arrange\n  const a = 1;\n  const b = 2;\n\n  // Act\n  const result = add(a, b);\n\n  // Assert\n  expect(result).toBe(3);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Avoid hardcoding values\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Use variables and constants to make tests more readable and maintainable\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const input = 5;\nconst expectedOutput = 25;\n\ntest('should return the square of a number', () => {\n  const result = square(input);\n  expect(result).toBe(expectedOutput);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Mock external dependencies\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Use mocking libraries to simulate external dependencies like APIs, databases, or third-party services\"}),`\n`,(0,n.jsx)(e.li,{children:\"Keep tests isolated from external factors\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`jest.mock('axios');\n\ntest('should fetch data from API', async () => {\n  const data = { id: 1, name: 'John Doe' };\n  axios.get.mockResolvedValue({ data });\n\n  const result = await fetchData();\n\n  expect(result).toEqual(data);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Keep tests isolated\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Ensure tests do not depend on each other\"}),`\n`,(0,n.jsx)(e.li,{children:\"Reset state and clean up after each test\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`afterEach(() => {\n  jest.clearAllMocks();\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Regularly review and refactor tests\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Keep tests up-to-date with changes in the codebase\"}),`\n`,(0,n.jsx)(e.li,{children:\"Remove redundant or outdated tests\"}),`\n`,(0,n.jsx)(e.li,{children:\"Refactor tests to improve readability and maintainability\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Use test coverage tools\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Measure test coverage to identify untested parts of the codebase\"}),`\n`,(0,n.jsx)(e.li,{children:\"Aim for high coverage but prioritize meaningful tests over 100% coverage\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Write tests before fixing bugs\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Reproduce the bug with a failing test\"}),`\n`,(0,n.jsx)(e.li,{children:\"Fix the bug and ensure the test passes\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Use a consistent style\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Follow a consistent style and conventions for writing tests\"}),`\n`,(0,n.jsx)(e.li,{children:\"Use linters and formatters to enforce consistency\"}),`\n`]}),`\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://jestjs.io/docs/getting-started\",children:\"Jest documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://mochajs.org/\",children:\"Mocha documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://testing-library.com/docs/\",children:\"Testing Library documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://kentcdodds.com/blog/effective-snapshot-testing\",children:\"Effective testing with Jest\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://martinfowler.com/bliki/TestDrivenDevelopment.html\",children:\"Test-driven development (TDD)\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(o,{...t})}):o(t)}return A(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-best-practices-for-writing-maintainable-and-effective-tests/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-some-best-practices-for-writing-maintainable-and-effective-tests/zh-CN.json
index e958094df..ffdcf11a6 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-best-practices-for-writing-maintainable-and-effective-tests/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-best-practices-for-writing-maintainable-and-effective-tests/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-some-best-practices-for-writing-maintainable-and-effective-tests/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var o=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),j=(l,n)=>{for(var r in n)i(l,r,{get:n[r],enumerable:!0})},h=(l,n,r,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of m(n))!g.call(l,t)&&t!==r&&i(l,t,{get:()=>n[t],enumerable:!(c=u(n,t))||c.enumerable});return l};var x=(l,n,r)=>(r=l!=null?o(p(l)):{},h(n||!l||!l.__esModule?i(r,\"default\",{value:l,enumerable:!0}):r,l)),A=l=>h(i({},\"__esModule\",{value:!0}),l);var s=f((w,d)=>{d.exports=_jsx_runtime});var _={};j(_,{default:()=>D,frontmatter:()=>b});var e=x(s()),b={title:\"\\u5728 JavaScript \\u4E2D\\u7F16\\u5199\\u53EF\\u7EF4\\u62A4\\u4E14\\u6709\\u6548\\u7684\\u6D4B\\u8BD5\\u7684\\u6700\\u4F73\\u5B9E\\u8DF5\\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(l){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",a:\"a\"},l.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8981\\u7F16\\u5199\\u53EF\\u7EF4\\u62A4\\u4E14\\u6709\\u6548\\u7684\\u6D4B\\u8BD5\\uFF0C\\u8BF7\\u786E\\u4FDD\\u5B83\\u4EEC\\u6E05\\u6670\\u3001\\u7B80\\u6D01\\uFF0C\\u5E76\\u4FA7\\u91CD\\u4E8E\\u5355\\u4E00\\u884C\\u4E3A\\u3002\\u5BF9\\u6D4B\\u8BD5\\u7528\\u4F8B\\u4F7F\\u7528\\u63CF\\u8FF0\\u6027\\u540D\\u79F0\\uFF0C\\u5E76\\u907F\\u514D\\u786C\\u7F16\\u7801\\u503C\\u3002\\u6A21\\u62DF\\u5916\\u90E8\\u4F9D\\u8D56\\u9879\\u5E76\\u4FDD\\u6301\\u6D4B\\u8BD5\\u9694\\u79BB\\u3002\\u5B9A\\u671F\\u5BA1\\u67E5\\u548C\\u91CD\\u6784\\u6D4B\\u8BD5\\uFF0C\\u4EE5\\u4F7F\\u5176\\u4E0E\\u4EE3\\u7801\\u5E93\\u4FDD\\u6301\\u540C\\u6B65\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7F16\\u5199\\u53EF\\u7EF4\\u62A4\\u4E14\\u6709\\u6548\\u7684\\u6D4B\\u8BD5\\u7684\\u6700\\u4F73\\u5B9E\\u8DF5\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7F16\\u5199\\u6E05\\u6670\\u4E14\\u5177\\u6709\\u63CF\\u8FF0\\u6027\\u7684\\u6D4B\\u8BD5\\u540D\\u79F0\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u7528\\u6E05\\u6670\\u63CF\\u8FF0\\u88AB\\u6D4B\\u884C\\u4E3A\\u7684\\u540D\\u79F0\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u907F\\u514D\\u4F7F\\u7528\\u7F29\\u5199\\uFF0C\\u5E76\\u4FDD\\u6301\\u540D\\u79F0\\u6709\\u610F\\u4E49\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4FDD\\u6301\\u6D4B\\u8BD5\\u4E13\\u6CE8\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u786E\\u4FDD\\u6BCF\\u4E2A\\u6D4B\\u8BD5\\u7528\\u4F8B\\u90FD\\u4FA7\\u91CD\\u4E8E\\u5355\\u4E00\\u884C\\u4E3A\\u6216\\u529F\\u80FD\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u907F\\u514D\\u5728\\u5355\\u4E2A\\u6D4B\\u8BD5\\u4E2D\\u6D4B\\u8BD5\\u591A\\u9879\\u5185\\u5BB9\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528 AAA \\u6A21\\u5F0F\\uFF08Arrange, Act, Assert\\uFF09\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Arrange\"}),\"\\uFF1A\\u8BBE\\u7F6E\\u521D\\u59CB\\u72B6\\u6001\\u548C\\u4F9D\\u8D56\\u9879\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Act\"}),\"\\uFF1A\\u6267\\u884C\\u88AB\\u6D4B\\u884C\\u4E3A\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Assert\"}),\"\\uFF1A\\u9A8C\\u8BC1\\u7ED3\\u679C\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`test('should add two numbers correctly', () => {\n  // Arrange\n  const a = 1;\n  const b = 2;\n\n  // Act\n  const result = add(a, b);\n\n  // Assert\n  expect(result).toBe(3);\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u907F\\u514D\\u786C\\u7F16\\u7801\\u503C\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u7528\\u53D8\\u91CF\\u548C\\u5E38\\u91CF\\u4F7F\\u6D4B\\u8BD5\\u66F4\\u5177\\u53EF\\u8BFB\\u6027\\u548C\\u53EF\\u7EF4\\u62A4\\u6027\"}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const input = 5;\nconst expectedOutput = 25;\n\ntest('should return the square of a number', () => {\n  const result = square(input);\n  expect(result).toBe(expectedOutput);\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6A21\\u62DF\\u5916\\u90E8\\u4F9D\\u8D56\\u9879\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u7528\\u6A21\\u62DF\\u5E93\\u6765\\u6A21\\u62DF\\u5916\\u90E8\\u4F9D\\u8D56\\u9879\\uFF0C\\u5982 API\\u3001\\u6570\\u636E\\u5E93\\u6216\\u7B2C\\u4E09\\u65B9\\u670D\\u52A1\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4FDD\\u6301\\u6D4B\\u8BD5\\u4E0E\\u5916\\u90E8\\u56E0\\u7D20\\u9694\\u79BB\"}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`jest.mock('axios');\n\ntest('should fetch data from API', async () => {\n  const data = { id: 1, name: 'John Doe' };\n  axios.get.mockResolvedValue({ data });\n\n  const result = await fetchData();\n\n  expect(result).toEqual(data);\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4FDD\\u6301\\u6D4B\\u8BD5\\u9694\\u79BB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u786E\\u4FDD\\u6D4B\\u8BD5\\u4E0D\\u76F8\\u4E92\\u4F9D\\u8D56\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5728\\u6BCF\\u6B21\\u6D4B\\u8BD5\\u540E\\u91CD\\u7F6E\\u72B6\\u6001\\u5E76\\u6E05\\u7406\"}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`afterEach(() => {\n  jest.clearAllMocks();\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u671F\\u5BA1\\u67E5\\u548C\\u91CD\\u6784\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u6D4B\\u8BD5\\u4E0E\\u4EE3\\u7801\\u5E93\\u4E2D\\u7684\\u66F4\\u6539\\u4FDD\\u6301\\u540C\\u6B65\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5220\\u9664\\u5197\\u4F59\\u6216\\u8FC7\\u65F6\\u7684\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u91CD\\u6784\\u6D4B\\u8BD5\\u4EE5\\u63D0\\u9AD8\\u53EF\\u8BFB\\u6027\\u548C\\u53EF\\u7EF4\\u62A4\\u6027\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528\\u6D4B\\u8BD5\\u8986\\u76D6\\u7387\\u5DE5\\u5177\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u8861\\u91CF\\u6D4B\\u8BD5\\u8986\\u76D6\\u7387\\u4EE5\\u8BC6\\u522B\\u4EE3\\u7801\\u5E93\\u4E2D\\u672A\\u6D4B\\u8BD5\\u7684\\u90E8\\u5206\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4E89\\u53D6\\u9AD8\\u8986\\u76D6\\u7387\\uFF0C\\u4F46\\u4F18\\u5148\\u8003\\u8651\\u6709\\u610F\\u4E49\\u7684\\u6D4B\\u8BD5\\u800C\\u4E0D\\u662F 100% \\u7684\\u8986\\u76D6\\u7387\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u4FEE\\u590D\\u9519\\u8BEF\\u4E4B\\u524D\\u7F16\\u5199\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u7528\\u5931\\u8D25\\u7684\\u6D4B\\u8BD5\\u91CD\\u73B0\\u9519\\u8BEF\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4FEE\\u590D\\u9519\\u8BEF\\u5E76\\u786E\\u4FDD\\u6D4B\\u8BD5\\u901A\\u8FC7\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528\\u4E00\\u81F4\\u7684\\u98CE\\u683C\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u9075\\u5FAA\\u7F16\\u5199\\u6D4B\\u8BD5\\u7684\\u4E00\\u81F4\\u98CE\\u683C\\u548C\\u7EA6\\u5B9A\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u7528 linters \\u548C\\u683C\\u5F0F\\u5316\\u7A0B\\u5E8F\\u6765\\u5F3A\\u5236\\u4E00\\u81F4\\u6027\"}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://jestjs.io/docs/getting-started\",children:\"Jest documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://mochajs.org/\",children:\"Mocha documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://testing-library.com/docs/\",children:\"Testing Library documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://kentcdodds.com/blog/effective-snapshot-testing\",children:\"Effective testing with Jest\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://martinfowler.com/bliki/TestDrivenDevelopment.html\",children:\"Test-driven development (TDD)\"})}),`\n`]})]})}function v(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,Object.assign({},l,{children:(0,e.jsx)(a,l)})):a(l)}var D=v;return A(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),A=(l,n)=>{for(var r in n)i(l,r,{get:n[r],enumerable:!0})},h=(l,n,r,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of p(n))!f.call(l,t)&&t!==r&&i(l,t,{get:()=>n[t],enumerable:!(c=m(n,t))||c.enumerable});return l};var j=(l,n,r)=>(r=l!=null?u(g(l)):{},h(n||!l||!l.__esModule?i(r,\"default\",{value:l,enumerable:!0}):r,l)),b=l=>h(i({},\"__esModule\",{value:!0}),l);var s=x((k,d)=>{d.exports=_jsx_runtime});var D={};A(D,{default:()=>o,frontmatter:()=>v});var e=j(s()),v={title:\"\\u5728 JavaScript \\u4E2D\\u7F16\\u5199\\u53EF\\u7EF4\\u62A4\\u4E14\\u6709\\u6548\\u7684\\u6D4B\\u8BD5\\u7684\\u6700\\u4F73\\u5B9E\\u8DF5\\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(l){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...l.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8981\\u7F16\\u5199\\u53EF\\u7EF4\\u62A4\\u4E14\\u6709\\u6548\\u7684\\u6D4B\\u8BD5\\uFF0C\\u8BF7\\u786E\\u4FDD\\u5B83\\u4EEC\\u6E05\\u6670\\u3001\\u7B80\\u6D01\\uFF0C\\u5E76\\u4FA7\\u91CD\\u4E8E\\u5355\\u4E00\\u884C\\u4E3A\\u3002\\u5BF9\\u6D4B\\u8BD5\\u7528\\u4F8B\\u4F7F\\u7528\\u63CF\\u8FF0\\u6027\\u540D\\u79F0\\uFF0C\\u5E76\\u907F\\u514D\\u786C\\u7F16\\u7801\\u503C\\u3002\\u6A21\\u62DF\\u5916\\u90E8\\u4F9D\\u8D56\\u9879\\u5E76\\u4FDD\\u6301\\u6D4B\\u8BD5\\u9694\\u79BB\\u3002\\u5B9A\\u671F\\u5BA1\\u67E5\\u548C\\u91CD\\u6784\\u6D4B\\u8BD5\\uFF0C\\u4EE5\\u4F7F\\u5176\\u4E0E\\u4EE3\\u7801\\u5E93\\u4FDD\\u6301\\u540C\\u6B65\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7F16\\u5199\\u53EF\\u7EF4\\u62A4\\u4E14\\u6709\\u6548\\u7684\\u6D4B\\u8BD5\\u7684\\u6700\\u4F73\\u5B9E\\u8DF5\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7F16\\u5199\\u6E05\\u6670\\u4E14\\u5177\\u6709\\u63CF\\u8FF0\\u6027\\u7684\\u6D4B\\u8BD5\\u540D\\u79F0\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u7528\\u6E05\\u6670\\u63CF\\u8FF0\\u88AB\\u6D4B\\u884C\\u4E3A\\u7684\\u540D\\u79F0\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u907F\\u514D\\u4F7F\\u7528\\u7F29\\u5199\\uFF0C\\u5E76\\u4FDD\\u6301\\u540D\\u79F0\\u6709\\u610F\\u4E49\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4FDD\\u6301\\u6D4B\\u8BD5\\u4E13\\u6CE8\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u786E\\u4FDD\\u6BCF\\u4E2A\\u6D4B\\u8BD5\\u7528\\u4F8B\\u90FD\\u4FA7\\u91CD\\u4E8E\\u5355\\u4E00\\u884C\\u4E3A\\u6216\\u529F\\u80FD\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u907F\\u514D\\u5728\\u5355\\u4E2A\\u6D4B\\u8BD5\\u4E2D\\u6D4B\\u8BD5\\u591A\\u9879\\u5185\\u5BB9\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528 AAA \\u6A21\\u5F0F\\uFF08Arrange, Act, Assert\\uFF09\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Arrange\"}),\"\\uFF1A\\u8BBE\\u7F6E\\u521D\\u59CB\\u72B6\\u6001\\u548C\\u4F9D\\u8D56\\u9879\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Act\"}),\"\\uFF1A\\u6267\\u884C\\u88AB\\u6D4B\\u884C\\u4E3A\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Assert\"}),\"\\uFF1A\\u9A8C\\u8BC1\\u7ED3\\u679C\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`test('should add two numbers correctly', () => {\n  // Arrange\n  const a = 1;\n  const b = 2;\n\n  // Act\n  const result = add(a, b);\n\n  // Assert\n  expect(result).toBe(3);\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u907F\\u514D\\u786C\\u7F16\\u7801\\u503C\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u7528\\u53D8\\u91CF\\u548C\\u5E38\\u91CF\\u4F7F\\u6D4B\\u8BD5\\u66F4\\u5177\\u53EF\\u8BFB\\u6027\\u548C\\u53EF\\u7EF4\\u62A4\\u6027\"}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const input = 5;\nconst expectedOutput = 25;\n\ntest('should return the square of a number', () => {\n  const result = square(input);\n  expect(result).toBe(expectedOutput);\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6A21\\u62DF\\u5916\\u90E8\\u4F9D\\u8D56\\u9879\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u7528\\u6A21\\u62DF\\u5E93\\u6765\\u6A21\\u62DF\\u5916\\u90E8\\u4F9D\\u8D56\\u9879\\uFF0C\\u5982 API\\u3001\\u6570\\u636E\\u5E93\\u6216\\u7B2C\\u4E09\\u65B9\\u670D\\u52A1\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4FDD\\u6301\\u6D4B\\u8BD5\\u4E0E\\u5916\\u90E8\\u56E0\\u7D20\\u9694\\u79BB\"}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`jest.mock('axios');\n\ntest('should fetch data from API', async () => {\n  const data = { id: 1, name: 'John Doe' };\n  axios.get.mockResolvedValue({ data });\n\n  const result = await fetchData();\n\n  expect(result).toEqual(data);\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4FDD\\u6301\\u6D4B\\u8BD5\\u9694\\u79BB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u786E\\u4FDD\\u6D4B\\u8BD5\\u4E0D\\u76F8\\u4E92\\u4F9D\\u8D56\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5728\\u6BCF\\u6B21\\u6D4B\\u8BD5\\u540E\\u91CD\\u7F6E\\u72B6\\u6001\\u5E76\\u6E05\\u7406\"}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`afterEach(() => {\n  jest.clearAllMocks();\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u671F\\u5BA1\\u67E5\\u548C\\u91CD\\u6784\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u6D4B\\u8BD5\\u4E0E\\u4EE3\\u7801\\u5E93\\u4E2D\\u7684\\u66F4\\u6539\\u4FDD\\u6301\\u540C\\u6B65\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5220\\u9664\\u5197\\u4F59\\u6216\\u8FC7\\u65F6\\u7684\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u91CD\\u6784\\u6D4B\\u8BD5\\u4EE5\\u63D0\\u9AD8\\u53EF\\u8BFB\\u6027\\u548C\\u53EF\\u7EF4\\u62A4\\u6027\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528\\u6D4B\\u8BD5\\u8986\\u76D6\\u7387\\u5DE5\\u5177\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u8861\\u91CF\\u6D4B\\u8BD5\\u8986\\u76D6\\u7387\\u4EE5\\u8BC6\\u522B\\u4EE3\\u7801\\u5E93\\u4E2D\\u672A\\u6D4B\\u8BD5\\u7684\\u90E8\\u5206\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4E89\\u53D6\\u9AD8\\u8986\\u76D6\\u7387\\uFF0C\\u4F46\\u4F18\\u5148\\u8003\\u8651\\u6709\\u610F\\u4E49\\u7684\\u6D4B\\u8BD5\\u800C\\u4E0D\\u662F 100% \\u7684\\u8986\\u76D6\\u7387\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u4FEE\\u590D\\u9519\\u8BEF\\u4E4B\\u524D\\u7F16\\u5199\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u7528\\u5931\\u8D25\\u7684\\u6D4B\\u8BD5\\u91CD\\u73B0\\u9519\\u8BEF\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4FEE\\u590D\\u9519\\u8BEF\\u5E76\\u786E\\u4FDD\\u6D4B\\u8BD5\\u901A\\u8FC7\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528\\u4E00\\u81F4\\u7684\\u98CE\\u683C\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u9075\\u5FAA\\u7F16\\u5199\\u6D4B\\u8BD5\\u7684\\u4E00\\u81F4\\u98CE\\u683C\\u548C\\u7EA6\\u5B9A\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u7528 linters \\u548C\\u683C\\u5F0F\\u5316\\u7A0B\\u5E8F\\u6765\\u5F3A\\u5236\\u4E00\\u81F4\\u6027\"}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://jestjs.io/docs/getting-started\",children:\"Jest documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://mochajs.org/\",children:\"Mocha documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://testing-library.com/docs/\",children:\"Testing Library documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://kentcdodds.com/blog/effective-snapshot-testing\",children:\"Effective testing with Jest\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://martinfowler.com/bliki/TestDrivenDevelopment.html\",children:\"Test-driven development (TDD)\"})}),`\n`]})]})}function o(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,{...l,children:(0,e.jsx)(a,{...l})}):a(l)}return b(D);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-common-performance-bottlenecks-in-javascript-applications/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-some-common-performance-bottlenecks-in-javascript-applications/en-US.json
index 4a206a85a..1a4ee3653 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-common-performance-bottlenecks-in-javascript-applications/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-common-performance-bottlenecks-in-javascript-applications/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},c=(t,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!p.call(t,o)&&o!==i&&r(t,o,{get:()=>e[o],enumerable:!(a=u(e,o))||a.enumerable});return t};var v=(t,e,i)=>(i=t!=null?d(f(t)):{},c(e||!t||!t.__esModule?r(i,\"default\",{value:t,enumerable:!0}):i,t)),y=t=>c(r({},\"__esModule\",{value:!0}),t);var l=g((M,s)=>{s.exports=_jsx_runtime});var w={};b(w,{default:()=>x,frontmatter:()=>j});var n=v(l()),j={title:\"What are some common performance bottlenecks in JavaScript applications?\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",pre:\"pre\",code:\"code\",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.jsx)(e.p,{children:\"Common performance bottlenecks in JavaScript applications include inefficient DOM manipulation, excessive use of global variables, blocking the main thread with heavy computations, memory leaks, and improper use of asynchronous operations. To mitigate these issues, you can use techniques like debouncing and throttling, optimizing DOM updates, and leveraging web workers for heavy computations.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Inefficient DOM manipulation\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Frequent DOM updates\"}),`\n`,(0,n.jsx)(e.p,{children:\"Frequent DOM updates can be costly because the browser has to re-render the page each time the DOM changes. Batch DOM updates together to minimize reflows and repaints.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Inefficient\nfor (let i = 0; i < 1000; i++) {\n  const div = document.createElement('div');\n  div.textContent = i;\n  document.body.appendChild(div);\n}\n\n// Efficient\nconst fragment = document.createDocumentFragment();\nfor (let i = 0; i < 1000; i++) {\n  const div = document.createElement('div');\n  div.textContent = i;\n  fragment.appendChild(div);\n}\ndocument.body.appendChild(fragment);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Layout thrashing\"}),`\n`,(0,n.jsx)(e.p,{children:\"Layout thrashing occurs when you read and write to the DOM repeatedly, causing multiple reflows and repaints. Minimize layout thrashing by batching reads and writes separately.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Inefficient\nboxes.forEach((box) => {\n  const height = box.offsetHeight; // Read\n  box.style.height = \\`\\${height + 10}px\\`; // Write\n});\n\n// Efficient\n// Batch read\nconst heights = [];\nboxes.forEach((box) => {\n  heights.push(box.offsetHeight);\n});\n\n// Batch write\nboxes.forEach((box, i) => {\n  box.style.height = \\`\\${heights[i] + 10}px\\`;\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Excessive use of global variables\"}),`\n`,(0,n.jsx)(e.p,{children:\"Global variables can lead to memory leaks and make the code harder to maintain. Use local variables and closures to limit the scope of variables.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Inefficient\nvar globalVar = 'I am global';\n\n// Efficient\nfunction myFunction() {\n  let localVar = 'I am local';\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Blocking the main thread\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Heavy computations\"}),`\n`,(0,n.jsx)(e.p,{children:\"Heavy computations can block the main thread, making the UI unresponsive. Use web workers to offload heavy computations to a background thread.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Main thread\nconst worker = new Worker('worker.js');\nworker.postMessage('start');\n\n// worker.js\nself.onmessage = function (e) {\n  if (e.data === 'start') {\n    // Perform heavy computation\n    self.postMessage('done');\n  }\n};\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Synchronous operations\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Avoid synchronous operations like \",(0,n.jsx)(e.code,{children:\"alert\"}),\", \",(0,n.jsx)(e.code,{children:\"prompt\"}),\", and synchronous XHR requests, as they block the main thread.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Inefficient\nalert('This blocks the main thread');\n\n// Efficient\nconsole.log('This does not block the main thread');\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Memory leaks\"}),`\n`,(0,n.jsx)(e.p,{children:\"Memory leaks occur when memory that is no longer needed is not released. Common causes include circular references and unremoved event listeners.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Circular references\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Inefficient\nfunction createCircularReference() {\n  const obj1 = {};\n  const obj2 = {};\n  obj1.ref = obj2;\n  obj2.ref = obj1;\n}\n\n// Efficient\nfunction createNonCircularReference() {\n  const obj1 = {};\n  const obj2 = {};\n  obj1.ref = obj2;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Unremoved event listeners\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Inefficient\nelement.addEventListener('click', handleClick);\n\n// Efficient\nelement.removeEventListener('click', handleClick);\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Improper use of asynchronous operations\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Unoptimized promises\"}),`\n`,(0,n.jsx)(e.p,{children:\"Chain promises properly to avoid blocking the main thread.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Inefficient\nfetch('url')\n  .then((response) => response.json())\n  .then((data) => {\n    // Process data\n  });\n\n// Efficient\nasync function fetchData() {\n  const response = await fetch('url');\n  const data = await response.json();\n  // Process data\n}\nfetchData();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Debouncing and throttling\"}),`\n`,(0,n.jsx)(e.p,{children:\"Use debouncing and throttling to limit the rate of function execution, especially for event handlers.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Debouncing\nfunction debounce(func, wait) {\n  let timeout;\n  return function (...args) {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => func.apply(this, args), wait);\n  };\n}\n\n// Throttling\nfunction throttle(func, limit) {\n  let inThrottle;\n  return function (...args) {\n    if (!inThrottle) {\n      func.apply(this, args);\n      inThrottle = true;\n      setTimeout(() => (inThrottle = false), limit);\n    }\n  };\n}\n`})}),`\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/Web/Performance\",children:\"MDN Web Docs: Performance\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/performance\",children:\"Google Developers: Web Performance Optimization\"})}),`\n`]})]})}function k(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var x=k;return y(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},c=(t,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of f(e))!g.call(t,o)&&o!==i&&r(t,o,{get:()=>e[o],enumerable:!(a=m(e,o))||a.enumerable});return t};var y=(t,e,i)=>(i=t!=null?u(p(t)):{},c(e||!t||!t.__esModule?r(i,\"default\",{value:t,enumerable:!0}):i,t)),k=t=>c(r({},\"__esModule\",{value:!0}),t);var l=b((D,s)=>{s.exports=_jsx_runtime});var x={};v(x,{default:()=>d,frontmatter:()=>j});var n=y(l()),j={title:\"What are some common performance bottlenecks in JavaScript applications?\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Common performance bottlenecks in JavaScript applications include inefficient DOM manipulation, excessive use of global variables, blocking the main thread with heavy computations, memory leaks, and improper use of asynchronous operations. To mitigate these issues, you can use techniques like debouncing and throttling, optimizing DOM updates, and leveraging web workers for heavy computations.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Inefficient DOM manipulation\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Frequent DOM updates\"}),`\n`,(0,n.jsx)(e.p,{children:\"Frequent DOM updates can be costly because the browser has to re-render the page each time the DOM changes. Batch DOM updates together to minimize reflows and repaints.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Inefficient\nfor (let i = 0; i < 1000; i++) {\n  const div = document.createElement('div');\n  div.textContent = i;\n  document.body.appendChild(div);\n}\n\n// Efficient\nconst fragment = document.createDocumentFragment();\nfor (let i = 0; i < 1000; i++) {\n  const div = document.createElement('div');\n  div.textContent = i;\n  fragment.appendChild(div);\n}\ndocument.body.appendChild(fragment);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Layout thrashing\"}),`\n`,(0,n.jsx)(e.p,{children:\"Layout thrashing occurs when you read and write to the DOM repeatedly, causing multiple reflows and repaints. Minimize layout thrashing by batching reads and writes separately.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Inefficient\nboxes.forEach((box) => {\n  const height = box.offsetHeight; // Read\n  box.style.height = \\`\\${height + 10}px\\`; // Write\n});\n\n// Efficient\n// Batch read\nconst heights = [];\nboxes.forEach((box) => {\n  heights.push(box.offsetHeight);\n});\n\n// Batch write\nboxes.forEach((box, i) => {\n  box.style.height = \\`\\${heights[i] + 10}px\\`;\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Excessive use of global variables\"}),`\n`,(0,n.jsx)(e.p,{children:\"Global variables can lead to memory leaks and make the code harder to maintain. Use local variables and closures to limit the scope of variables.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Inefficient\nvar globalVar = 'I am global';\n\n// Efficient\nfunction myFunction() {\n  let localVar = 'I am local';\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Blocking the main thread\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Heavy computations\"}),`\n`,(0,n.jsx)(e.p,{children:\"Heavy computations can block the main thread, making the UI unresponsive. Use web workers to offload heavy computations to a background thread.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Main thread\nconst worker = new Worker('worker.js');\nworker.postMessage('start');\n\n// worker.js\nself.onmessage = function (e) {\n  if (e.data === 'start') {\n    // Perform heavy computation\n    self.postMessage('done');\n  }\n};\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Synchronous operations\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Avoid synchronous operations like \",(0,n.jsx)(e.code,{children:\"alert\"}),\", \",(0,n.jsx)(e.code,{children:\"prompt\"}),\", and synchronous XHR requests, as they block the main thread.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Inefficient\nalert('This blocks the main thread');\n\n// Efficient\nconsole.log('This does not block the main thread');\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Memory leaks\"}),`\n`,(0,n.jsx)(e.p,{children:\"Memory leaks occur when memory that is no longer needed is not released. Common causes include circular references and unremoved event listeners.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Circular references\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Inefficient\nfunction createCircularReference() {\n  const obj1 = {};\n  const obj2 = {};\n  obj1.ref = obj2;\n  obj2.ref = obj1;\n}\n\n// Efficient\nfunction createNonCircularReference() {\n  const obj1 = {};\n  const obj2 = {};\n  obj1.ref = obj2;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Unremoved event listeners\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Inefficient\nelement.addEventListener('click', handleClick);\n\n// Efficient\nelement.removeEventListener('click', handleClick);\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Improper use of asynchronous operations\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Unoptimized promises\"}),`\n`,(0,n.jsx)(e.p,{children:\"Chain promises properly to avoid blocking the main thread.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Inefficient\nfetch('url')\n  .then((response) => response.json())\n  .then((data) => {\n    // Process data\n  });\n\n// Efficient\nasync function fetchData() {\n  const response = await fetch('url');\n  const data = await response.json();\n  // Process data\n}\nfetchData();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Debouncing and throttling\"}),`\n`,(0,n.jsx)(e.p,{children:\"Use debouncing and throttling to limit the rate of function execution, especially for event handlers.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Debouncing\nfunction debounce(func, wait) {\n  let timeout;\n  return function (...args) {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => func.apply(this, args), wait);\n  };\n}\n\n// Throttling\nfunction throttle(func, limit) {\n  let inThrottle;\n  return function (...args) {\n    if (!inThrottle) {\n      func.apply(this, args);\n      inThrottle = true;\n      setTimeout(() => (inThrottle = false), limit);\n    }\n  };\n}\n`})}),`\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/Web/Performance\",children:\"MDN Web Docs: Performance\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/performance\",children:\"Google Developers: Web Performance Optimization\"})}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return k(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-common-performance-bottlenecks-in-javascript-applications/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-some-common-performance-bottlenecks-in-javascript-applications/zh-CN.json
index 201d80046..1012c0744 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-common-performance-bottlenecks-in-javascript-applications/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-common-performance-bottlenecks-in-javascript-applications/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var p=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),b=(t,n)=>{for(var i in n)c(t,i,{get:n[i],enumerable:!0})},l=(t,n,i,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of u(n))!g.call(t,r)&&r!==i&&c(t,r,{get:()=>n[r],enumerable:!(o=f(n,r))||o.enumerable});return t};var j=(t,n,i)=>(i=t!=null?d(m(t)):{},l(n||!t||!t.__esModule?c(i,\"default\",{value:t,enumerable:!0}):i,t)),x=t=>l(c({},\"__esModule\",{value:!0}),t);var h=p((w,a)=>{a.exports=_jsx_runtime});var E={};b(E,{default:()=>M,frontmatter:()=>v});var e=j(h()),v={title:\"JavaScript \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u5E38\\u89C1\\u7684\\u4E00\\u4E9B\\u6027\\u80FD\\u74F6\\u9888\\u662F\\u4EC0\\u4E48\\uFF1F\"};function s(t){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"JavaScript \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u5E38\\u89C1\\u7684\\u6027\\u80FD\\u74F6\\u9888\\u5305\\u62EC\\u4F4E\\u6548\\u7684 DOM \\u64CD\\u4F5C\\u3001\\u8FC7\\u5EA6\\u4F7F\\u7528\\u5168\\u5C40\\u53D8\\u91CF\\u3001\\u4F7F\\u7528\\u7E41\\u91CD\\u7684\\u8BA1\\u7B97\\u963B\\u585E\\u4E3B\\u7EBF\\u7A0B\\u3001\\u5185\\u5B58\\u6CC4\\u6F0F\\u4EE5\\u53CA\\u4E0D\\u6B63\\u786E\\u5730\\u4F7F\\u7528\\u5F02\\u6B65\\u64CD\\u4F5C\\u3002\\u4E3A\\u4E86\\u7F13\\u89E3\\u8FD9\\u4E9B\\u95EE\\u9898\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u8BF8\\u5982\\u9632\\u6296\\u548C\\u8282\\u6D41\\u4E4B\\u7C7B\\u7684\\u6280\\u672F\\u3001\\u4F18\\u5316 DOM \\u66F4\\u65B0\\u4EE5\\u53CA\\u5229\\u7528 Web Worker \\u8FDB\\u884C\\u7E41\\u91CD\\u7684\\u8BA1\\u7B97\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F4E\\u6548\\u7684 DOM \\u64CD\\u4F5C\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9891\\u7E41\\u7684 DOM \\u66F4\\u65B0\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9891\\u7E41\\u7684 DOM \\u66F4\\u65B0\\u53EF\\u80FD\\u4EE3\\u4EF7\\u9AD8\\u6602\\uFF0C\\u56E0\\u4E3A\\u6BCF\\u6B21 DOM \\u66F4\\u6539\\u65F6\\uFF0C\\u6D4F\\u89C8\\u5668\\u90FD\\u5FC5\\u987B\\u91CD\\u65B0\\u6E32\\u67D3\\u9875\\u9762\\u3002\\u5C06 DOM \\u66F4\\u65B0\\u6279\\u91CF\\u5904\\u7406\\u5728\\u4E00\\u8D77\\uFF0C\\u4EE5\\u6700\\u5927\\u9650\\u5EA6\\u5730\\u51CF\\u5C11\\u56DE\\u6D41\\u548C\\u91CD\\u7ED8\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Inefficient\nfor (let i = 0; i < 1000; i++) {\n  const div = document.createElement('div');\n  div.textContent = i;\n  document.body.appendChild(div);\n}\n\n// Efficient\nconst fragment = document.createDocumentFragment();\nfor (let i = 0; i < 1000; i++) {\n  const div = document.createElement('div');\n  div.textContent = i;\n  fragment.appendChild(div);\n}\ndocument.body.appendChild(fragment);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5E03\\u5C40\\u6296\\u52A8\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F53\\u60A8\\u53CD\\u590D\\u8BFB\\u53D6\\u548C\\u5199\\u5165 DOM \\u65F6\\uFF0C\\u5C31\\u4F1A\\u53D1\\u751F\\u5E03\\u5C40\\u6296\\u52A8\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u591A\\u6B21\\u56DE\\u6D41\\u548C\\u91CD\\u7ED8\\u3002\\u901A\\u8FC7\\u5206\\u522B\\u6279\\u91CF\\u5904\\u7406\\u8BFB\\u53D6\\u548C\\u5199\\u5165\\u6765\\u6700\\u5927\\u9650\\u5EA6\\u5730\\u51CF\\u5C11\\u5E03\\u5C40\\u6296\\u52A8\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Inefficient\nboxes.forEach((box) => {\n  const height = box.offsetHeight; // Read\n  box.style.height = \\`\\${height + 10}px\\`; // Write\n});\n\n// Efficient\n// Batch read\nconst heights = [];\nboxes.forEach((box) => {\n  heights.push(box.offsetHeight);\n});\n\n// Batch write\nboxes.forEach((box, i) => {\n  box.style.height = \\`\\${heights[i] + 10}px\\`;\n});\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u8FC7\\u5EA6\\u4F7F\\u7528\\u5168\\u5C40\\u53D8\\u91CF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5168\\u5C40\\u53D8\\u91CF\\u53EF\\u80FD\\u5BFC\\u81F4\\u5185\\u5B58\\u6CC4\\u6F0F\\uFF0C\\u5E76\\u4F7F\\u4EE3\\u7801\\u66F4\\u96BE\\u7EF4\\u62A4\\u3002\\u4F7F\\u7528\\u5C40\\u90E8\\u53D8\\u91CF\\u548C\\u95ED\\u5305\\u6765\\u9650\\u5236\\u53D8\\u91CF\\u7684\\u8303\\u56F4\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Inefficient\nvar globalVar = 'I am global';\n\n// Efficient\nfunction myFunction() {\n  let localVar = 'I am local';\n}\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u963B\\u585E\\u4E3B\\u7EBF\\u7A0B\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7E41\\u91CD\\u7684\\u8BA1\\u7B97\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7E41\\u91CD\\u7684\\u8BA1\\u7B97\\u4F1A\\u963B\\u585E\\u4E3B\\u7EBF\\u7A0B\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4 UI \\u65E0\\u54CD\\u5E94\\u3002\\u4F7F\\u7528 Web Worker \\u5C06\\u7E41\\u91CD\\u7684\\u8BA1\\u7B97\\u5206\\u6D41\\u5230\\u540E\\u53F0\\u7EBF\\u7A0B\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Main thread\nconst worker = new Worker('worker.js');\nworker.postMessage('start');\n\n// worker.js\nself.onmessage = function (e) {\n  if (e.data === 'start') {\n    // Perform heavy computation\n    self.postMessage('done');\n  }\n};\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u540C\\u6B65\\u64CD\\u4F5C\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u907F\\u514D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"alert\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"prompt\"}),\" \\u7B49\\u540C\\u6B65\\u64CD\\u4F5C\\u4EE5\\u53CA\\u540C\\u6B65 XHR \\u8BF7\\u6C42\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u4F1A\\u963B\\u585E\\u4E3B\\u7EBF\\u7A0B\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Inefficient\nalert('This blocks the main thread');\n\n// Efficient\nconsole.log('This does not block the main thread');\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5185\\u5B58\\u6CC4\\u6F0F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F53\\u4E0D\\u518D\\u9700\\u8981\\u7684\\u5185\\u5B58\\u672A\\u88AB\\u91CA\\u653E\\u65F6\\uFF0C\\u5C31\\u4F1A\\u53D1\\u751F\\u5185\\u5B58\\u6CC4\\u6F0F\\u3002\\u5E38\\u89C1\\u539F\\u56E0\\u5305\\u62EC\\u5FAA\\u73AF\\u5F15\\u7528\\u548C\\u672A\\u79FB\\u9664\\u7684\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5FAA\\u73AF\\u5F15\\u7528\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Inefficient\nfunction createCircularReference() {\n  const obj1 = {};\n  const obj2 = {};\n  obj1.ref = obj2;\n  obj2.ref = obj1;\n}\n\n// Efficient\nfunction createNonCircularReference() {\n  const obj1 = {};\n  const obj2 = {};\n  obj1.ref = obj2;\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u672A\\u79FB\\u9664\\u7684\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Inefficient\nelement.addEventListener('click', handleClick);\n\n// Efficient\nelement.removeEventListener('click', handleClick);\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5F02\\u6B65\\u64CD\\u4F5C\\u4F7F\\u7528\\u4E0D\\u5F53\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u672A\\u4F18\\u5316\\u7684 Promise\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6B63\\u786E\\u5730\\u94FE\\u5F0F\\u8C03\\u7528 Promise\\uFF0C\\u4EE5\\u907F\\u514D\\u963B\\u585E\\u4E3B\\u7EBF\\u7A0B\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Inefficient\nfetch('url')\n  .then((response) => response.json())\n  .then((data) => {\n    // Process data\n  });\n\n// Efficient\nasync function fetchData() {\n  const response = await fetch('url');\n  const data = await response.json();\n  // Process data\n}\nfetchData();\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Debouncing \\u548C throttling\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528 debouncing \\u548C throttling \\u6765\\u9650\\u5236\\u51FD\\u6570\\u6267\\u884C\\u7684\\u901F\\u7387\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u5904\\u7406\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u65F6\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Debouncing\nfunction debounce(func, wait) {\n  let timeout;\n  return function (...args) {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => func.apply(this, args), wait);\n  };\n}\n\n// Throttling\nfunction throttle(func, limit) {\n  let inThrottle;\n  return function (...args) {\n    if (!inThrottle) {\n      func.apply(this, args);\n      inThrottle = true;\n      setTimeout(() => (inThrottle = false), limit);\n    }\n  };\n}\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/Performance\",children:\"MDN Web \\u6587\\u6863\\uFF1A\\u6027\\u80FD\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developers.google.com/web/fundamentals/performance\",children:\"Google Developers\\uFF1AWeb \\u6027\\u80FD\\u4F18\\u5316\"})}),`\n`]})]})}function D(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(s,t)})):s(t)}var M=D;return x(E);})();\n;return Component;"
+  "solution": "var Component=(()=>{var f=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),j=(t,n)=>{for(var i in n)c(t,i,{get:n[i],enumerable:!0})},l=(t,n,i,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of m(n))!g.call(t,r)&&r!==i&&c(t,r,{get:()=>n[r],enumerable:!(o=u(n,r))||o.enumerable});return t};var x=(t,n,i)=>(i=t!=null?f(p(t)):{},l(n||!t||!t.__esModule?c(i,\"default\",{value:t,enumerable:!0}):i,t)),v=t=>l(c({},\"__esModule\",{value:!0}),t);var h=b((k,a)=>{a.exports=_jsx_runtime});var M={};j(M,{default:()=>d,frontmatter:()=>D});var e=x(h()),D={title:\"JavaScript \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u5E38\\u89C1\\u7684\\u4E00\\u4E9B\\u6027\\u80FD\\u74F6\\u9888\\u662F\\u4EC0\\u4E48\\uFF1F\"};function s(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"JavaScript \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u5E38\\u89C1\\u7684\\u6027\\u80FD\\u74F6\\u9888\\u5305\\u62EC\\u4F4E\\u6548\\u7684 DOM \\u64CD\\u4F5C\\u3001\\u8FC7\\u5EA6\\u4F7F\\u7528\\u5168\\u5C40\\u53D8\\u91CF\\u3001\\u4F7F\\u7528\\u7E41\\u91CD\\u7684\\u8BA1\\u7B97\\u963B\\u585E\\u4E3B\\u7EBF\\u7A0B\\u3001\\u5185\\u5B58\\u6CC4\\u6F0F\\u4EE5\\u53CA\\u4E0D\\u6B63\\u786E\\u5730\\u4F7F\\u7528\\u5F02\\u6B65\\u64CD\\u4F5C\\u3002\\u4E3A\\u4E86\\u7F13\\u89E3\\u8FD9\\u4E9B\\u95EE\\u9898\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u8BF8\\u5982\\u9632\\u6296\\u548C\\u8282\\u6D41\\u4E4B\\u7C7B\\u7684\\u6280\\u672F\\u3001\\u4F18\\u5316 DOM \\u66F4\\u65B0\\u4EE5\\u53CA\\u5229\\u7528 Web Worker \\u8FDB\\u884C\\u7E41\\u91CD\\u7684\\u8BA1\\u7B97\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F4E\\u6548\\u7684 DOM \\u64CD\\u4F5C\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9891\\u7E41\\u7684 DOM \\u66F4\\u65B0\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9891\\u7E41\\u7684 DOM \\u66F4\\u65B0\\u53EF\\u80FD\\u4EE3\\u4EF7\\u9AD8\\u6602\\uFF0C\\u56E0\\u4E3A\\u6BCF\\u6B21 DOM \\u66F4\\u6539\\u65F6\\uFF0C\\u6D4F\\u89C8\\u5668\\u90FD\\u5FC5\\u987B\\u91CD\\u65B0\\u6E32\\u67D3\\u9875\\u9762\\u3002\\u5C06 DOM \\u66F4\\u65B0\\u6279\\u91CF\\u5904\\u7406\\u5728\\u4E00\\u8D77\\uFF0C\\u4EE5\\u6700\\u5927\\u9650\\u5EA6\\u5730\\u51CF\\u5C11\\u56DE\\u6D41\\u548C\\u91CD\\u7ED8\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Inefficient\nfor (let i = 0; i < 1000; i++) {\n  const div = document.createElement('div');\n  div.textContent = i;\n  document.body.appendChild(div);\n}\n\n// Efficient\nconst fragment = document.createDocumentFragment();\nfor (let i = 0; i < 1000; i++) {\n  const div = document.createElement('div');\n  div.textContent = i;\n  fragment.appendChild(div);\n}\ndocument.body.appendChild(fragment);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5E03\\u5C40\\u6296\\u52A8\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F53\\u60A8\\u53CD\\u590D\\u8BFB\\u53D6\\u548C\\u5199\\u5165 DOM \\u65F6\\uFF0C\\u5C31\\u4F1A\\u53D1\\u751F\\u5E03\\u5C40\\u6296\\u52A8\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u591A\\u6B21\\u56DE\\u6D41\\u548C\\u91CD\\u7ED8\\u3002\\u901A\\u8FC7\\u5206\\u522B\\u6279\\u91CF\\u5904\\u7406\\u8BFB\\u53D6\\u548C\\u5199\\u5165\\u6765\\u6700\\u5927\\u9650\\u5EA6\\u5730\\u51CF\\u5C11\\u5E03\\u5C40\\u6296\\u52A8\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Inefficient\nboxes.forEach((box) => {\n  const height = box.offsetHeight; // Read\n  box.style.height = \\`\\${height + 10}px\\`; // Write\n});\n\n// Efficient\n// Batch read\nconst heights = [];\nboxes.forEach((box) => {\n  heights.push(box.offsetHeight);\n});\n\n// Batch write\nboxes.forEach((box, i) => {\n  box.style.height = \\`\\${heights[i] + 10}px\\`;\n});\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u8FC7\\u5EA6\\u4F7F\\u7528\\u5168\\u5C40\\u53D8\\u91CF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5168\\u5C40\\u53D8\\u91CF\\u53EF\\u80FD\\u5BFC\\u81F4\\u5185\\u5B58\\u6CC4\\u6F0F\\uFF0C\\u5E76\\u4F7F\\u4EE3\\u7801\\u66F4\\u96BE\\u7EF4\\u62A4\\u3002\\u4F7F\\u7528\\u5C40\\u90E8\\u53D8\\u91CF\\u548C\\u95ED\\u5305\\u6765\\u9650\\u5236\\u53D8\\u91CF\\u7684\\u8303\\u56F4\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Inefficient\nvar globalVar = 'I am global';\n\n// Efficient\nfunction myFunction() {\n  let localVar = 'I am local';\n}\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u963B\\u585E\\u4E3B\\u7EBF\\u7A0B\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7E41\\u91CD\\u7684\\u8BA1\\u7B97\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7E41\\u91CD\\u7684\\u8BA1\\u7B97\\u4F1A\\u963B\\u585E\\u4E3B\\u7EBF\\u7A0B\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4 UI \\u65E0\\u54CD\\u5E94\\u3002\\u4F7F\\u7528 Web Worker \\u5C06\\u7E41\\u91CD\\u7684\\u8BA1\\u7B97\\u5206\\u6D41\\u5230\\u540E\\u53F0\\u7EBF\\u7A0B\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Main thread\nconst worker = new Worker('worker.js');\nworker.postMessage('start');\n\n// worker.js\nself.onmessage = function (e) {\n  if (e.data === 'start') {\n    // Perform heavy computation\n    self.postMessage('done');\n  }\n};\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u540C\\u6B65\\u64CD\\u4F5C\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u907F\\u514D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"alert\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"prompt\"}),\" \\u7B49\\u540C\\u6B65\\u64CD\\u4F5C\\u4EE5\\u53CA\\u540C\\u6B65 XHR \\u8BF7\\u6C42\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u4F1A\\u963B\\u585E\\u4E3B\\u7EBF\\u7A0B\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Inefficient\nalert('This blocks the main thread');\n\n// Efficient\nconsole.log('This does not block the main thread');\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5185\\u5B58\\u6CC4\\u6F0F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F53\\u4E0D\\u518D\\u9700\\u8981\\u7684\\u5185\\u5B58\\u672A\\u88AB\\u91CA\\u653E\\u65F6\\uFF0C\\u5C31\\u4F1A\\u53D1\\u751F\\u5185\\u5B58\\u6CC4\\u6F0F\\u3002\\u5E38\\u89C1\\u539F\\u56E0\\u5305\\u62EC\\u5FAA\\u73AF\\u5F15\\u7528\\u548C\\u672A\\u79FB\\u9664\\u7684\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5FAA\\u73AF\\u5F15\\u7528\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Inefficient\nfunction createCircularReference() {\n  const obj1 = {};\n  const obj2 = {};\n  obj1.ref = obj2;\n  obj2.ref = obj1;\n}\n\n// Efficient\nfunction createNonCircularReference() {\n  const obj1 = {};\n  const obj2 = {};\n  obj1.ref = obj2;\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u672A\\u79FB\\u9664\\u7684\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Inefficient\nelement.addEventListener('click', handleClick);\n\n// Efficient\nelement.removeEventListener('click', handleClick);\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5F02\\u6B65\\u64CD\\u4F5C\\u4F7F\\u7528\\u4E0D\\u5F53\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u672A\\u4F18\\u5316\\u7684 Promise\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6B63\\u786E\\u5730\\u94FE\\u5F0F\\u8C03\\u7528 Promise\\uFF0C\\u4EE5\\u907F\\u514D\\u963B\\u585E\\u4E3B\\u7EBF\\u7A0B\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Inefficient\nfetch('url')\n  .then((response) => response.json())\n  .then((data) => {\n    // Process data\n  });\n\n// Efficient\nasync function fetchData() {\n  const response = await fetch('url');\n  const data = await response.json();\n  // Process data\n}\nfetchData();\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Debouncing \\u548C throttling\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528 debouncing \\u548C throttling \\u6765\\u9650\\u5236\\u51FD\\u6570\\u6267\\u884C\\u7684\\u901F\\u7387\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u5904\\u7406\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u65F6\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Debouncing\nfunction debounce(func, wait) {\n  let timeout;\n  return function (...args) {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => func.apply(this, args), wait);\n  };\n}\n\n// Throttling\nfunction throttle(func, limit) {\n  let inThrottle;\n  return function (...args) {\n    if (!inThrottle) {\n      func.apply(this, args);\n      inThrottle = true;\n      setTimeout(() => (inThrottle = false), limit);\n    }\n  };\n}\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/Performance\",children:\"MDN Web \\u6587\\u6863\\uFF1A\\u6027\\u80FD\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developers.google.com/web/fundamentals/performance\",children:\"Google Developers\\uFF1AWeb \\u6027\\u80FD\\u4F18\\u5316\"})}),`\n`]})]})}function d(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(s,{...t})}):s(t)}return v(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-common-pitfalls-when-doing-data-fetching-in-react/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-some-common-pitfalls-when-doing-data-fetching-in-react/en-US.json
index 47bfae05b..cfd85158e 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-common-pitfalls-when-doing-data-fetching-in-react/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-common-pitfalls-when-doing-data-fetching-in-react/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-are-some-common-pitfalls-when-doing-data-fetching-in-react/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var r in e)s(t,r,{get:e[r],enumerable:!0})},c=(t,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!m.call(t,a)&&a!==r&&s(t,a,{get:()=>e[a],enumerable:!(o=p(e,a))||o.enumerable});return t};var x=(t,e,r)=>(r=t!=null?l(f(t)):{},c(e||!t||!t.__esModule?s(r,\"default\",{value:t,enumerable:!0}):r,t)),j=t=>c(s({},\"__esModule\",{value:!0}),t);var d=g((D,i)=>{i.exports=_jsx_runtime});var v={};y(v,{default:()=>C,frontmatter:()=>E});var n=x(d()),E={title:\"What are some common pitfalls when doing data fetching in React?\"};function h(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:[\"Common pitfalls when doing data fetching in React include not handling loading and error states, causing memory leaks by not cleaning up subscriptions, and not using the right lifecycle methods or hooks. Always ensure you handle these states properly, clean up after your components, and use \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" for side effects in functional components.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Common pitfalls when doing data fetching in React\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Not handling loading and error states\"}),`\n`,(0,n.jsx)(e.p,{children:\"When fetching data, it's crucial to manage the different states of the request: loading, success, and error. Failing to do so can lead to a poor user experience.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const [data, setData] = useState(null);\nconst [loading, setLoading] = useState(true);\nconst [error, setError] = useState(null);\n\nuseEffect(() => {\n  fetch('https://api.example.com/data')\n    .then((response) => response.json())\n    .then((data) => {\n      setData(data);\n      setLoading(false);\n    })\n    .catch((error) => {\n      setError(error);\n      setLoading(false);\n    });\n}, []);\n\nif (loading) return <div>Loading...</div>;\nif (error) return <div>Error: {error.message}</div>;\nreturn <div>{JSON.stringify(data)}</div>;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Causing memory leaks by not cleaning up subscriptions\"}),`\n`,(0,n.jsx)(e.p,{children:\"When a component unmounts before a fetch request completes, it can cause memory leaks. To prevent this, you should clean up any ongoing requests.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`useEffect(() => {\n  let isMounted = true;\n\n  fetch('https://api.example.com/data')\n    .then((response) => response.json())\n    .then((data) => {\n      if (isMounted) {\n        setData(data);\n        setLoading(false);\n      }\n    })\n    .catch((error) => {\n      if (isMounted) {\n        setError(error);\n        setLoading(false);\n      }\n    });\n\n  return () => {\n    isMounted = false;\n  };\n}, []);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Not using the right lifecycle methods or hooks\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In class components, data fetching should be done in \",(0,n.jsx)(e.code,{children:\"componentDidMount\"}),\". In functional components, use the \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" hook.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`// Class component\nclass MyComponent extends React.Component {\n  componentDidMount() {\n    fetch('https://api.example.com/data')\n      .then((response) => response.json())\n      .then((data) => this.setState({ data, loading: false }))\n      .catch((error) => this.setState({ error, loading: false }));\n  }\n}\n\n// Functional component\nconst MyComponent = () => {\n  useEffect(() => {\n    fetch('https://api.example.com/data')\n      .then((response) => response.json())\n      .then((data) => setData(data))\n      .catch((error) => setError(error));\n  }, []);\n};\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Ignoring dependency arrays in \",(0,n.jsx)(e.code,{children:\"useEffect\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The dependency array in \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" determines when the effect runs. Ignoring it can lead to unnecessary re-renders or missed updates.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`useEffect(() => {\n  fetch('https://api.example.com/data')\n    .then((response) => response.json())\n    .then((data) => setData(data))\n    .catch((error) => setError(error));\n}, []); // Empty array means this effect runs once after the initial render\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Fetching data in the render method\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fetching data directly in the render method can cause infinite loops and performance issues. Always use lifecycle methods or hooks.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`// Incorrect\nconst MyComponent = () => {\n  const data = fetch('https://api.example.com/data').then((response) =>\n    response.json(),\n  );\n  return <div>{JSON.stringify(data)}</div>;\n};\n\n// Correct\nconst MyComponent = () => {\n  useEffect(() => {\n    fetch('https://api.example.com/data')\n      .then((response) => response.json())\n      .then((data) => setData(data))\n      .catch((error) => setError(error));\n  }, []);\n};\n`})}),`\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://react.dev/reference/react/hooks\",children:\"React documentation on hooks\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useEffect\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"useEffect\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.robinwieruch.de/react-hooks-fetch-data\",children:\"Handling async requests in React\"})}),`\n`]})]})}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 C=M;return j(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},c=(t,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of f(e))!g.call(t,a)&&a!==r&&o(t,a,{get:()=>e[a],enumerable:!(s=u(e,a))||s.enumerable});return t};var E=(t,e,r)=>(r=t!=null?p(m(t)):{},c(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),j=t=>c(o({},\"__esModule\",{value:!0}),t);var d=y((w,i)=>{i.exports=_jsx_runtime});var C={};x(C,{default:()=>l,frontmatter:()=>M});var n=E(d()),M={title:\"What are some common pitfalls when doing data fetching in React?\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Common pitfalls when doing data fetching in React include not handling loading and error states, causing memory leaks by not cleaning up subscriptions, and not using the right lifecycle methods or hooks. Always ensure you handle these states properly, clean up after your components, and use \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" for side effects in functional components.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Common pitfalls when doing data fetching in React\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Not handling loading and error states\"}),`\n`,(0,n.jsx)(e.p,{children:\"When fetching data, it's crucial to manage the different states of the request: loading, success, and error. Failing to do so can lead to a poor user experience.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const [data, setData] = useState(null);\nconst [loading, setLoading] = useState(true);\nconst [error, setError] = useState(null);\n\nuseEffect(() => {\n  fetch('https://api.example.com/data')\n    .then((response) => response.json())\n    .then((data) => {\n      setData(data);\n      setLoading(false);\n    })\n    .catch((error) => {\n      setError(error);\n      setLoading(false);\n    });\n}, []);\n\nif (loading) return <div>Loading...</div>;\nif (error) return <div>Error: {error.message}</div>;\nreturn <div>{JSON.stringify(data)}</div>;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Causing memory leaks by not cleaning up subscriptions\"}),`\n`,(0,n.jsx)(e.p,{children:\"When a component unmounts before a fetch request completes, it can cause memory leaks. To prevent this, you should clean up any ongoing requests.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`useEffect(() => {\n  let isMounted = true;\n\n  fetch('https://api.example.com/data')\n    .then((response) => response.json())\n    .then((data) => {\n      if (isMounted) {\n        setData(data);\n        setLoading(false);\n      }\n    })\n    .catch((error) => {\n      if (isMounted) {\n        setError(error);\n        setLoading(false);\n      }\n    });\n\n  return () => {\n    isMounted = false;\n  };\n}, []);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Not using the right lifecycle methods or hooks\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In class components, data fetching should be done in \",(0,n.jsx)(e.code,{children:\"componentDidMount\"}),\". In functional components, use the \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" hook.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`// Class component\nclass MyComponent extends React.Component {\n  componentDidMount() {\n    fetch('https://api.example.com/data')\n      .then((response) => response.json())\n      .then((data) => this.setState({ data, loading: false }))\n      .catch((error) => this.setState({ error, loading: false }));\n  }\n}\n\n// Functional component\nconst MyComponent = () => {\n  useEffect(() => {\n    fetch('https://api.example.com/data')\n      .then((response) => response.json())\n      .then((data) => setData(data))\n      .catch((error) => setError(error));\n  }, []);\n};\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Ignoring dependency arrays in \",(0,n.jsx)(e.code,{children:\"useEffect\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The dependency array in \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" determines when the effect runs. Ignoring it can lead to unnecessary re-renders or missed updates.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`useEffect(() => {\n  fetch('https://api.example.com/data')\n    .then((response) => response.json())\n    .then((data) => setData(data))\n    .catch((error) => setError(error));\n}, []); // Empty array means this effect runs once after the initial render\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Fetching data in the render method\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fetching data directly in the render method can cause infinite loops and performance issues. Always use lifecycle methods or hooks.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`// Incorrect\nconst MyComponent = () => {\n  const data = fetch('https://api.example.com/data').then((response) =>\n    response.json(),\n  );\n  return <div>{JSON.stringify(data)}</div>;\n};\n\n// Correct\nconst MyComponent = () => {\n  useEffect(() => {\n    fetch('https://api.example.com/data')\n      .then((response) => response.json())\n      .then((data) => setData(data))\n      .catch((error) => setError(error));\n  }, []);\n};\n`})}),`\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://react.dev/reference/react/hooks\",children:\"React documentation on hooks\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useEffect\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"useEffect\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.robinwieruch.de/react-hooks-fetch-data\",children:\"Handling async requests in React\"})}),`\n`]})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return j(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-common-pitfalls-when-doing-data-fetching-in-react/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-some-common-pitfalls-when-doing-data-fetching-in-react/zh-CN.json
index 31aca5833..358bc23eb 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-common-pitfalls-when-doing-data-fetching-in-react/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-common-pitfalls-when-doing-data-fetching-in-react/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-are-some-common-pitfalls-when-doing-data-fetching-in-react/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var r in e)s(t,r,{get:e[r],enumerable:!0})},o=(t,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of f(e))!m.call(t,a)&&a!==r&&s(t,a,{get:()=>e[a],enumerable:!(c=p(e,a))||c.enumerable});return t};var j=(t,e,r)=>(r=t!=null?l(u(t)):{},o(e||!t||!t.__esModule?s(r,\"default\",{value:t,enumerable:!0}):r,t)),E=t=>o(s({},\"__esModule\",{value:!0}),t);var h=g((L,d)=>{d.exports=_jsx_runtime});var C={};x(C,{default:()=>v,frontmatter:()=>M});var n=j(h()),M={title:\"\\u5728 React \\u4E2D\\u8FDB\\u884C\\u6570\\u636E\\u83B7\\u53D6\\u65F6\\uFF0C\\u6709\\u54EA\\u4E9B\\u5E38\\u89C1\\u7684\\u9677\\u9631\\uFF1F\"};function i(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:[\"\\u5728 React \\u4E2D\\u8FDB\\u884C\\u6570\\u636E\\u83B7\\u53D6\\u65F6\\uFF0C\\u5E38\\u89C1\\u7684\\u9677\\u9631\\u5305\\u62EC\\u4E0D\\u5904\\u7406\\u52A0\\u8F7D\\u548C\\u9519\\u8BEF\\u72B6\\u6001\\u3001\\u901A\\u8FC7\\u4E0D\\u6E05\\u7406\\u8BA2\\u9605\\u5BFC\\u81F4\\u5185\\u5B58\\u6CC4\\u6F0F\\uFF0C\\u4EE5\\u53CA\\u4E0D\\u4F7F\\u7528\\u6B63\\u786E\\u7684\\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\\u6216\\u94A9\\u5B50\\u3002 \\u59CB\\u7EC8\\u786E\\u4FDD\\u6B63\\u786E\\u5904\\u7406\\u8FD9\\u4E9B\\u72B6\\u6001\\uFF0C\\u6E05\\u7406\\u7EC4\\u4EF6\\u540E\\uFF0C\\u5E76\\u5728\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\u4E2D\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u8FDB\\u884C\\u526F\\u4F5C\\u7528\\u5904\\u7406\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5728 React \\u4E2D\\u8FDB\\u884C\\u6570\\u636E\\u83B7\\u53D6\\u65F6\\u5E38\\u89C1\\u7684\\u9677\\u9631\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E0D\\u5904\\u7406\\u52A0\\u8F7D\\u548C\\u9519\\u8BEF\\u72B6\\u6001\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u83B7\\u53D6\\u6570\\u636E\\u65F6\\uFF0C\\u7BA1\\u7406\\u8BF7\\u6C42\\u7684\\u4E0D\\u540C\\u72B6\\u6001\\uFF08\\u52A0\\u8F7D\\u3001\\u6210\\u529F\\u548C\\u9519\\u8BEF\\uFF09\\u81F3\\u5173\\u91CD\\u8981\\u3002 \\u5426\\u5219\\uFF0C\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u7CDF\\u7CD5\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const [data, setData] = useState(null);\nconst [loading, setLoading] = useState(true);\nconst [error, setError] = useState(null);\n\nuseEffect(() => {\n  fetch('https://api.example.com/data')\n    .then((response) => response.json())\n    .then((data) => {\n      setData(data);\n      setLoading(false);\n    })\n    .catch((error) => {\n      setError(error);\n      setLoading(false);\n    });\n}, []);\n\nif (loading) return <div>Loading...</div>;\nif (error) return <div>Error: {error.message}</div>;\nreturn <div>{JSON.stringify(data)}</div>;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u901A\\u8FC7\\u4E0D\\u6E05\\u7406\\u8BA2\\u9605\\u5BFC\\u81F4\\u5185\\u5B58\\u6CC4\\u6F0F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5F53\\u7EC4\\u4EF6\\u5728\\u83B7\\u53D6\\u8BF7\\u6C42\\u5B8C\\u6210\\u4E4B\\u524D\\u5378\\u8F7D\\u65F6\\uFF0C\\u5B83\\u53EF\\u80FD\\u5BFC\\u81F4\\u5185\\u5B58\\u6CC4\\u6F0F\\u3002 \\u4E3A\\u4E86\\u9632\\u6B62\\u8FD9\\u79CD\\u60C5\\u51B5\\uFF0C\\u60A8\\u5E94\\u8BE5\\u6E05\\u7406\\u4EFB\\u4F55\\u6B63\\u5728\\u8FDB\\u884C\\u7684\\u8BF7\\u6C42\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`useEffect(() => {\n  let isMounted = true;\n\n  fetch('https://api.example.com/data')\n    .then((response) => response.json())\n    .then((data) => {\n      if (isMounted) {\n        setData(data);\n        setLoading(false);\n      }\n    })\n    .catch((error) => {\n      if (isMounted) {\n        setError(error);\n        setLoading(false);\n      }\n    });\n\n  return () => {\n    isMounted = false;\n  };\n}, []);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E0D\\u4F7F\\u7528\\u6B63\\u786E\\u7684\\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\\u6216\\u94A9\\u5B50\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u7C7B\\u7EC4\\u4EF6\\u4E2D\\uFF0C\\u6570\\u636E\\u83B7\\u53D6\\u5E94\\u5728 \",(0,n.jsx)(e.code,{children:\"componentDidMount\"}),\" \\u4E2D\\u5B8C\\u6210\\u3002 \\u5728\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\u4E2D\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u94A9\\u5B50\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`// Class component\nclass MyComponent extends React.Component {\n  componentDidMount() {\n    fetch('https://api.example.com/data')\n      .then((response) => response.json())\n      .then((data) => this.setState({ data, loading: false }))\n      .catch((error) => this.setState({ error, loading: false }));\n  }\n}\n\n// Functional component\nconst MyComponent = () => {\n  useEffect(() => {\n    fetch('https://api.example.com/data')\n      .then((response) => response.json())\n      .then((data) => setData(data))\n      .catch((error) => setError(error));\n  }, []);\n};\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u5FFD\\u7565 \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u4E2D\\u7684\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u4E2D\\u7684\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u51B3\\u5B9A\\u4E86 effect \\u7684\\u8FD0\\u884C\\u65F6\\u95F4\\u3002 \\u5FFD\\u7565\\u5B83\\u53EF\\u80FD\\u5BFC\\u81F4\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\\u6216\\u9519\\u8FC7\\u7684\\u66F4\\u65B0\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`useEffect(() => {\n  fetch('https://api.example.com/data')\n    .then((response) => response.json())\n    .then((data) => setData(data))\n    .catch((error) => setError(error));\n}, []); // \\u7A7A\\u6570\\u7EC4\\u610F\\u5473\\u7740\\u6B64 effect \\u5728\\u521D\\u59CB\\u6E32\\u67D3\\u540E\\u8FD0\\u884C\\u4E00\\u6B21\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5728 render \\u65B9\\u6CD5\\u4E2D\\u83B7\\u53D6\\u6570\\u636E\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u76F4\\u63A5\\u5728 render \\u65B9\\u6CD5\\u4E2D\\u83B7\\u53D6\\u6570\\u636E\\u53EF\\u80FD\\u5BFC\\u81F4\\u65E0\\u9650\\u5FAA\\u73AF\\u548C\\u6027\\u80FD\\u95EE\\u9898\\u3002 \\u59CB\\u7EC8\\u4F7F\\u7528\\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\\u6216\\u94A9\\u5B50\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`// Incorrect\nconst MyComponent = () => {\n  const data = fetch('https://api.example.com/data').then((response) =>\n    response.json(),\n  );\n  return <div>{JSON.stringify(data)}</div>;\n};\n\n// Correct\nconst MyComponent = () => {\n  useEffect(() => {\n    fetch('https://api.example.com/data')\n      .then((response) => response.json())\n      .then((data) => setData(data))\n      .catch((error) => setError(error));\n  }, []);\n};\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/hooks\",children:\"React documentation on hooks\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useEffect\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"useEffect\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.robinwieruch.de/react-hooks-fetch-data\",children:\"Handling async requests in React\"})}),`\n`]})]})}function D(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(i,t)})):i(t)}var v=D;return E(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),E=(t,e)=>{for(var r in e)s(t,r,{get:e[r],enumerable:!0})},o=(t,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!g.call(t,a)&&a!==r&&s(t,a,{get:()=>e[a],enumerable:!(c=f(e,a))||c.enumerable});return t};var j=(t,e,r)=>(r=t!=null?p(m(t)):{},o(e||!t||!t.__esModule?s(r,\"default\",{value:t,enumerable:!0}):r,t)),M=t=>o(s({},\"__esModule\",{value:!0}),t);var h=x((y,d)=>{d.exports=_jsx_runtime});var v={};E(v,{default:()=>l,frontmatter:()=>D});var n=j(h()),D={title:\"\\u5728 React \\u4E2D\\u8FDB\\u884C\\u6570\\u636E\\u83B7\\u53D6\\u65F6\\uFF0C\\u6709\\u54EA\\u4E9B\\u5E38\\u89C1\\u7684\\u9677\\u9631\\uFF1F\"};function i(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 React \\u4E2D\\u8FDB\\u884C\\u6570\\u636E\\u83B7\\u53D6\\u65F6\\uFF0C\\u5E38\\u89C1\\u7684\\u9677\\u9631\\u5305\\u62EC\\u4E0D\\u5904\\u7406\\u52A0\\u8F7D\\u548C\\u9519\\u8BEF\\u72B6\\u6001\\u3001\\u901A\\u8FC7\\u4E0D\\u6E05\\u7406\\u8BA2\\u9605\\u5BFC\\u81F4\\u5185\\u5B58\\u6CC4\\u6F0F\\uFF0C\\u4EE5\\u53CA\\u4E0D\\u4F7F\\u7528\\u6B63\\u786E\\u7684\\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\\u6216\\u94A9\\u5B50\\u3002 \\u59CB\\u7EC8\\u786E\\u4FDD\\u6B63\\u786E\\u5904\\u7406\\u8FD9\\u4E9B\\u72B6\\u6001\\uFF0C\\u6E05\\u7406\\u7EC4\\u4EF6\\u540E\\uFF0C\\u5E76\\u5728\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\u4E2D\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u8FDB\\u884C\\u526F\\u4F5C\\u7528\\u5904\\u7406\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5728 React \\u4E2D\\u8FDB\\u884C\\u6570\\u636E\\u83B7\\u53D6\\u65F6\\u5E38\\u89C1\\u7684\\u9677\\u9631\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E0D\\u5904\\u7406\\u52A0\\u8F7D\\u548C\\u9519\\u8BEF\\u72B6\\u6001\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u83B7\\u53D6\\u6570\\u636E\\u65F6\\uFF0C\\u7BA1\\u7406\\u8BF7\\u6C42\\u7684\\u4E0D\\u540C\\u72B6\\u6001\\uFF08\\u52A0\\u8F7D\\u3001\\u6210\\u529F\\u548C\\u9519\\u8BEF\\uFF09\\u81F3\\u5173\\u91CD\\u8981\\u3002 \\u5426\\u5219\\uFF0C\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u7CDF\\u7CD5\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const [data, setData] = useState(null);\nconst [loading, setLoading] = useState(true);\nconst [error, setError] = useState(null);\n\nuseEffect(() => {\n  fetch('https://api.example.com/data')\n    .then((response) => response.json())\n    .then((data) => {\n      setData(data);\n      setLoading(false);\n    })\n    .catch((error) => {\n      setError(error);\n      setLoading(false);\n    });\n}, []);\n\nif (loading) return <div>Loading...</div>;\nif (error) return <div>Error: {error.message}</div>;\nreturn <div>{JSON.stringify(data)}</div>;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u901A\\u8FC7\\u4E0D\\u6E05\\u7406\\u8BA2\\u9605\\u5BFC\\u81F4\\u5185\\u5B58\\u6CC4\\u6F0F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5F53\\u7EC4\\u4EF6\\u5728\\u83B7\\u53D6\\u8BF7\\u6C42\\u5B8C\\u6210\\u4E4B\\u524D\\u5378\\u8F7D\\u65F6\\uFF0C\\u5B83\\u53EF\\u80FD\\u5BFC\\u81F4\\u5185\\u5B58\\u6CC4\\u6F0F\\u3002 \\u4E3A\\u4E86\\u9632\\u6B62\\u8FD9\\u79CD\\u60C5\\u51B5\\uFF0C\\u60A8\\u5E94\\u8BE5\\u6E05\\u7406\\u4EFB\\u4F55\\u6B63\\u5728\\u8FDB\\u884C\\u7684\\u8BF7\\u6C42\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`useEffect(() => {\n  let isMounted = true;\n\n  fetch('https://api.example.com/data')\n    .then((response) => response.json())\n    .then((data) => {\n      if (isMounted) {\n        setData(data);\n        setLoading(false);\n      }\n    })\n    .catch((error) => {\n      if (isMounted) {\n        setError(error);\n        setLoading(false);\n      }\n    });\n\n  return () => {\n    isMounted = false;\n  };\n}, []);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E0D\\u4F7F\\u7528\\u6B63\\u786E\\u7684\\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\\u6216\\u94A9\\u5B50\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u7C7B\\u7EC4\\u4EF6\\u4E2D\\uFF0C\\u6570\\u636E\\u83B7\\u53D6\\u5E94\\u5728 \",(0,n.jsx)(e.code,{children:\"componentDidMount\"}),\" \\u4E2D\\u5B8C\\u6210\\u3002 \\u5728\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\u4E2D\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u94A9\\u5B50\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`// Class component\nclass MyComponent extends React.Component {\n  componentDidMount() {\n    fetch('https://api.example.com/data')\n      .then((response) => response.json())\n      .then((data) => this.setState({ data, loading: false }))\n      .catch((error) => this.setState({ error, loading: false }));\n  }\n}\n\n// Functional component\nconst MyComponent = () => {\n  useEffect(() => {\n    fetch('https://api.example.com/data')\n      .then((response) => response.json())\n      .then((data) => setData(data))\n      .catch((error) => setError(error));\n  }, []);\n};\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u5FFD\\u7565 \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u4E2D\\u7684\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u4E2D\\u7684\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u51B3\\u5B9A\\u4E86 effect \\u7684\\u8FD0\\u884C\\u65F6\\u95F4\\u3002 \\u5FFD\\u7565\\u5B83\\u53EF\\u80FD\\u5BFC\\u81F4\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\\u6216\\u9519\\u8FC7\\u7684\\u66F4\\u65B0\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`useEffect(() => {\n  fetch('https://api.example.com/data')\n    .then((response) => response.json())\n    .then((data) => setData(data))\n    .catch((error) => setError(error));\n}, []); // \\u7A7A\\u6570\\u7EC4\\u610F\\u5473\\u7740\\u6B64 effect \\u5728\\u521D\\u59CB\\u6E32\\u67D3\\u540E\\u8FD0\\u884C\\u4E00\\u6B21\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5728 render \\u65B9\\u6CD5\\u4E2D\\u83B7\\u53D6\\u6570\\u636E\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u76F4\\u63A5\\u5728 render \\u65B9\\u6CD5\\u4E2D\\u83B7\\u53D6\\u6570\\u636E\\u53EF\\u80FD\\u5BFC\\u81F4\\u65E0\\u9650\\u5FAA\\u73AF\\u548C\\u6027\\u80FD\\u95EE\\u9898\\u3002 \\u59CB\\u7EC8\\u4F7F\\u7528\\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\\u6216\\u94A9\\u5B50\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`// Incorrect\nconst MyComponent = () => {\n  const data = fetch('https://api.example.com/data').then((response) =>\n    response.json(),\n  );\n  return <div>{JSON.stringify(data)}</div>;\n};\n\n// Correct\nconst MyComponent = () => {\n  useEffect(() => {\n    fetch('https://api.example.com/data')\n      .then((response) => response.json())\n      .then((data) => setData(data))\n      .catch((error) => setError(error));\n  }, []);\n};\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/hooks\",children:\"React documentation on hooks\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useEffect\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"useEffect\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.robinwieruch.de/react-hooks-fetch-data\",children:\"Handling async requests in React\"})}),`\n`]})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(i,{...t})}):i(t)}return M(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-common-security-headers-and-their-purpose/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-some-common-security-headers-and-their-purpose/en-US.json
index e9b589a3d..d5b29b245 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-common-security-headers-and-their-purpose/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-common-security-headers-and-their-purpose/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-some-common-security-headers-and-their-purpose/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),g=(r,e)=>{for(var t in e)c(r,t,{get:e[t],enumerable:!0})},s=(r,e,t,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!S.call(r,i)&&i!==t&&c(r,i,{get:()=>e[i],enumerable:!(o=p(e,i))||o.enumerable});return r};var y=(r,e,t)=>(t=r!=null?h(u(r)):{},s(e||!r||!r.__esModule?c(t,\"default\",{value:r,enumerable:!0}):t,r)),T=r=>s(c({},\"__esModule\",{value:!0}),r);var a=f((v,l)=>{l.exports=_jsx_runtime});var X={};g(X,{default:()=>P,frontmatter:()=>b});var n=y(a()),b={title:\"What are some common security headers and their purpose?\"};function d(r){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Security headers are HTTP response headers that help protect web applications from various attacks. Some common security headers include:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Content-Security-Policy (CSP)\"}),\": Prevents cross-site scripting (XSS) and other code injection attacks by specifying allowed content sources.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"X-Content-Type-Options\"}),\": Prevents MIME type sniffing by instructing the browser to follow the declared \",(0,n.jsx)(e.code,{children:\"Content-Type\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Strict-Transport-Security (HSTS)\"}),\": Enforces secure (HTTPS) connections to the server.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\": Prevents clickjacking by controlling whether a page can be displayed in a frame.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"X-XSS-Protection\"}),\": Enables the cross-site scripting (XSS) filter built into most browsers.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Referrer-Policy\"}),\": Controls how much referrer information is included with requests.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Common security headers and their purpose\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Content-Security-Policy (CSP)\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" header helps prevent cross-site scripting (XSS) and other code injection attacks by specifying which content sources are allowed to be loaded on the web page. For example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: default-src 'self'; img-src 'self' https://example.com; script-src 'self' 'unsafe-inline'\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"This policy allows content to be loaded only from the same origin (\",(0,n.jsx)(e.code,{children:\"'self'\"}),\"), images from the same origin or \",(0,n.jsx)(e.code,{children:\"https://example.com\"}),\", and scripts from the same origin or inline scripts.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"X-Content-Type-Options\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"X-Content-Type-Options\"}),\" header prevents MIME type sniffing by instructing the browser to follow the declared \",(0,n.jsx)(e.code,{children:\"Content-Type\"}),\". This helps mitigate attacks based on content type misinterpretation. The most common value is \",(0,n.jsx)(e.code,{children:\"nosniff\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-Content-Type-Options: nosniff\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Strict-Transport-Security (HSTS)\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Strict-Transport-Security\"}),\" header enforces secure (HTTPS) connections to the server. It instructs the browser to only interact with the site using HTTPS, even if the user attempts to access it via HTTP. For example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Strict-Transport-Security: max-age=31536000; includeSubDomains; preload\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"This policy tells the browser to enforce HTTPS for one year (\",(0,n.jsx)(e.code,{children:\"max-age=31536000\"}),\"), including all subdomains (\",(0,n.jsx)(e.code,{children:\"includeSubDomains\"}),\"), and allows the site to be included in browsers' HSTS preload lists (\",(0,n.jsx)(e.code,{children:\"preload\"}),\").\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"X-Frame-Options\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\" header prevents clickjacking by controlling whether a page can be displayed in a frame. Common values are \",(0,n.jsx)(e.code,{children:\"DENY\"}),\" and \",(0,n.jsx)(e.code,{children:\"SAMEORIGIN\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-Frame-Options: DENY\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"This policy prevents the page from being displayed in a frame, iframe, or object.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"X-XSS-Protection\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"X-XSS-Protection\"}),\" header enables the cross-site scripting (XSS) filter built into most browsers. It can block pages or sanitize scripts that appear to be malicious. For example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-XSS-Protection: 1; mode=block\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"This policy enables the XSS filter and instructs the browser to block the page if an attack is detected.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Referrer-Policy\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Referrer-Policy\"}),\" header controls how much referrer information is included with requests. It helps protect user privacy and can prevent information leakage. Common values include \",(0,n.jsx)(e.code,{children:\"no-referrer\"}),\", \",(0,n.jsx)(e.code,{children:\"no-referrer-when-downgrade\"}),\", and \",(0,n.jsx)(e.code,{children:\"strict-origin-when-cross-origin\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Referrer-Policy: no-referrer\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"This policy ensures that no referrer information is sent with requests.\"}),`\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/Web/HTTP/Headers\",children:\"MDN Web Docs: HTTP headers\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://owasp.org/www-project-secure-headers/\",children:\"OWASP Secure Headers Project\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP\",children:\"Content Security Policy (CSP) - MDN Web Docs\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security\",children:\"Strict-Transport-Security (HSTS) - MDN Web Docs\"})}),`\n`]})]})}function w(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(d,r)})):d(r)}var P=w;return T(X);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),y=(r,e)=>{for(var t in e)c(r,t,{get:e[t],enumerable:!0})},s=(r,e,t,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!f.call(r,i)&&i!==t&&c(r,i,{get:()=>e[i],enumerable:!(o=m(e,i))||o.enumerable});return r};var T=(r,e,t)=>(t=r!=null?p(S(r)):{},s(e||!r||!r.__esModule?c(t,\"default\",{value:r,enumerable:!0}):t,r)),b=r=>s(c({},\"__esModule\",{value:!0}),r);var d=g((C,l)=>{l.exports=_jsx_runtime});var P={};y(P,{default:()=>a,frontmatter:()=>w});var n=T(d()),w={title:\"What are some common security headers and their purpose?\"};function h(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Security headers are HTTP response headers that help protect web applications from various attacks. Some common security headers include:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Content-Security-Policy (CSP)\"}),\": Prevents cross-site scripting (XSS) and other code injection attacks by specifying allowed content sources.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"X-Content-Type-Options\"}),\": Prevents MIME type sniffing by instructing the browser to follow the declared \",(0,n.jsx)(e.code,{children:\"Content-Type\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Strict-Transport-Security (HSTS)\"}),\": Enforces secure (HTTPS) connections to the server.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\": Prevents clickjacking by controlling whether a page can be displayed in a frame.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"X-XSS-Protection\"}),\": Enables the cross-site scripting (XSS) filter built into most browsers.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Referrer-Policy\"}),\": Controls how much referrer information is included with requests.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Common security headers and their purpose\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Content-Security-Policy (CSP)\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" header helps prevent cross-site scripting (XSS) and other code injection attacks by specifying which content sources are allowed to be loaded on the web page. For example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: default-src 'self'; img-src 'self' https://example.com; script-src 'self' 'unsafe-inline'\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"This policy allows content to be loaded only from the same origin (\",(0,n.jsx)(e.code,{children:\"'self'\"}),\"), images from the same origin or \",(0,n.jsx)(e.code,{children:\"https://example.com\"}),\", and scripts from the same origin or inline scripts.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"X-Content-Type-Options\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"X-Content-Type-Options\"}),\" header prevents MIME type sniffing by instructing the browser to follow the declared \",(0,n.jsx)(e.code,{children:\"Content-Type\"}),\". This helps mitigate attacks based on content type misinterpretation. The most common value is \",(0,n.jsx)(e.code,{children:\"nosniff\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-Content-Type-Options: nosniff\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Strict-Transport-Security (HSTS)\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Strict-Transport-Security\"}),\" header enforces secure (HTTPS) connections to the server. It instructs the browser to only interact with the site using HTTPS, even if the user attempts to access it via HTTP. For example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Strict-Transport-Security: max-age=31536000; includeSubDomains; preload\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"This policy tells the browser to enforce HTTPS for one year (\",(0,n.jsx)(e.code,{children:\"max-age=31536000\"}),\"), including all subdomains (\",(0,n.jsx)(e.code,{children:\"includeSubDomains\"}),\"), and allows the site to be included in browsers' HSTS preload lists (\",(0,n.jsx)(e.code,{children:\"preload\"}),\").\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"X-Frame-Options\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\" header prevents clickjacking by controlling whether a page can be displayed in a frame. Common values are \",(0,n.jsx)(e.code,{children:\"DENY\"}),\" and \",(0,n.jsx)(e.code,{children:\"SAMEORIGIN\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-Frame-Options: DENY\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"This policy prevents the page from being displayed in a frame, iframe, or object.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"X-XSS-Protection\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"X-XSS-Protection\"}),\" header enables the cross-site scripting (XSS) filter built into most browsers. It can block pages or sanitize scripts that appear to be malicious. For example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-XSS-Protection: 1; mode=block\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"This policy enables the XSS filter and instructs the browser to block the page if an attack is detected.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Referrer-Policy\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Referrer-Policy\"}),\" header controls how much referrer information is included with requests. It helps protect user privacy and can prevent information leakage. Common values include \",(0,n.jsx)(e.code,{children:\"no-referrer\"}),\", \",(0,n.jsx)(e.code,{children:\"no-referrer-when-downgrade\"}),\", and \",(0,n.jsx)(e.code,{children:\"strict-origin-when-cross-origin\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Referrer-Policy: no-referrer\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"This policy ensures that no referrer information is sent with requests.\"}),`\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/Web/HTTP/Headers\",children:\"MDN Web Docs: HTTP headers\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://owasp.org/www-project-secure-headers/\",children:\"OWASP Secure Headers Project\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP\",children:\"Content Security Policy (CSP) - MDN Web Docs\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security\",children:\"Strict-Transport-Security (HSTS) - MDN Web Docs\"})}),`\n`]})]})}function a(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return b(P);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-common-security-headers-and-their-purpose/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-some-common-security-headers-and-their-purpose/zh-CN.json
index 8aeca55ea..4859f60a5 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-common-security-headers-and-their-purpose/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-common-security-headers-and-their-purpose/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-some-common-security-headers-and-their-purpose/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),P=(r,e)=>{for(var c in e)l(r,c,{get:e[c],enumerable:!0})},o=(r,e,c,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of S(e))!u.call(r,i)&&i!==c&&l(r,i,{get:()=>e[i],enumerable:!(d=p(e,i))||d.enumerable});return r};var f=(r,e,c)=>(c=r!=null?a(T(r)):{},o(e||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),y=r=>o(l({},\"__esModule\",{value:!0}),r);var h=m((D,t)=>{t.exports=_jsx_runtime});var H={};P(H,{default:()=>C,frontmatter:()=>g});var n=f(h()),g={title:\"\\u5E38\\u89C1\\u7684\\u5B89\\u5168\\u6807\\u5934\\u53CA\\u5176\\u7528\\u9014\\u662F\\u4EC0\\u4E48\\uFF1F\"};function s(r){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5B89\\u5168\\u6807\\u5934\\u662F HTTP \\u54CD\\u5E94\\u6807\\u5934\\uFF0C\\u53EF\\u5E2E\\u52A9\\u4FDD\\u62A4 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u514D\\u53D7\\u5404\\u79CD\\u653B\\u51FB\\u3002 \\u4E00\\u4E9B\\u5E38\\u89C1\\u7684\\u5B89\\u5168\\u6807\\u5934\\u5305\\u62EC\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Content-Security-Policy (CSP)\"}),\"\\uFF1A\\u901A\\u8FC7\\u6307\\u5B9A\\u5141\\u8BB8\\u7684\\u5185\\u5BB9\\u6765\\u6E90\\u6765\\u9632\\u6B62\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS) \\u548C\\u5176\\u4ED6\\u4EE3\\u7801\\u6CE8\\u5165\\u653B\\u51FB\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"X-Content-Type-Options\"}),\"\\uFF1A\\u901A\\u8FC7\\u6307\\u793A\\u6D4F\\u89C8\\u5668\\u9075\\u5FAA\\u58F0\\u660E\\u7684 \",(0,n.jsx)(e.code,{children:\"Content-Type\"}),\" \\u6765\\u9632\\u6B62 MIME \\u7C7B\\u578B\\u55C5\\u63A2\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Strict-Transport-Security (HSTS)\"}),\"\\uFF1A\\u5F3A\\u5236\\u5BF9\\u670D\\u52A1\\u5668\\u8FDB\\u884C\\u5B89\\u5168 (HTTPS) \\u8FDE\\u63A5\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\"\\uFF1A\\u901A\\u8FC7\\u63A7\\u5236\\u9875\\u9762\\u662F\\u5426\\u53EF\\u4EE5\\u5728\\u6846\\u67B6\\u4E2D\\u663E\\u793A\\u6765\\u9632\\u6B62\\u70B9\\u51FB\\u52AB\\u6301\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"X-XSS-Protection\"}),\"\\uFF1A\\u542F\\u7528\\u5185\\u7F6E\\u4E8E\\u5927\\u591A\\u6570\\u6D4F\\u89C8\\u5668\\u4E2D\\u7684\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS) \\u8FC7\\u6EE4\\u5668\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Referrer-Policy\"}),\"\\uFF1A\\u63A7\\u5236\\u8BF7\\u6C42\\u4E2D\\u5305\\u542B\\u591A\\u5C11\\u5F15\\u7528\\u8005\\u4FE1\\u606F\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5E38\\u89C1\\u7684\\u5B89\\u5168\\u6807\\u5934\\u53CA\\u5176\\u7528\\u9014\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Content-Security-Policy (CSP)\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" \\u6807\\u5934\\u901A\\u8FC7\\u6307\\u5B9A\\u5141\\u8BB8\\u5728\\u7F51\\u9875\\u4E0A\\u52A0\\u8F7D\\u54EA\\u4E9B\\u5185\\u5BB9\\u6765\\u6E90\\u6765\\u5E2E\\u52A9\\u9632\\u6B62\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS) \\u548C\\u5176\\u4ED6\\u4EE3\\u7801\\u6CE8\\u5165\\u653B\\u51FB\\u3002 \\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: default-src 'self'; img-src 'self' https://example.com; script-src 'self' 'unsafe-inline'\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6B64\\u7B56\\u7565\\u5141\\u8BB8\\u4EC5\\u4ECE\\u540C\\u4E00\\u6765\\u6E90 (\",(0,n.jsx)(e.code,{children:\"'self'\"}),\")\\u3001\\u6765\\u81EA\\u540C\\u4E00\\u6765\\u6E90\\u6216 \",(0,n.jsx)(e.code,{children:\"https://example.com\"}),\" \\u7684\\u56FE\\u50CF\\u4EE5\\u53CA\\u6765\\u81EA\\u540C\\u4E00\\u6765\\u6E90\\u6216\\u5185\\u8054\\u811A\\u672C\\u7684\\u811A\\u672C\\u52A0\\u8F7D\\u5185\\u5BB9\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"X-Content-Type-Options\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"X-Content-Type-Options\"}),\" \\u6807\\u5934\\u901A\\u8FC7\\u6307\\u793A\\u6D4F\\u89C8\\u5668\\u9075\\u5FAA\\u58F0\\u660E\\u7684 \",(0,n.jsx)(e.code,{children:\"Content-Type\"}),\" \\u6765\\u9632\\u6B62 MIME \\u7C7B\\u578B\\u55C5\\u63A2\\u3002 \\u8FD9\\u6709\\u52A9\\u4E8E\\u51CF\\u8F7B\\u57FA\\u4E8E\\u5185\\u5BB9\\u7C7B\\u578B\\u8BEF\\u89E3\\u7684\\u653B\\u51FB\\u3002 \\u6700\\u5E38\\u89C1\\u7684\\u503C\\u662F \",(0,n.jsx)(e.code,{children:\"nosniff\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-Content-Type-Options: nosniff\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Strict-Transport-Security (HSTS)\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Strict-Transport-Security\"}),\" \\u6807\\u5934\\u5F3A\\u5236\\u5BF9\\u670D\\u52A1\\u5668\\u8FDB\\u884C\\u5B89\\u5168 (HTTPS) \\u8FDE\\u63A5\\u3002 \\u5B83\\u6307\\u793A\\u6D4F\\u89C8\\u5668\\u4EC5\\u4F7F\\u7528 HTTPS \\u4E0E\\u7AD9\\u70B9\\u4EA4\\u4E92\\uFF0C\\u5373\\u4F7F\\u7528\\u6237\\u5C1D\\u8BD5\\u901A\\u8FC7 HTTP \\u8BBF\\u95EE\\u5B83\\u3002 \\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Strict-Transport-Security: max-age=31536000; includeSubDomains; preload\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6B64\\u7B56\\u7565\\u544A\\u8BC9\\u6D4F\\u89C8\\u5668\\u5F3A\\u5236 HTTPS \\u4E00\\u5E74 (\",(0,n.jsx)(e.code,{children:\"max-age=31536000\"}),\")\\uFF0C\\u5305\\u62EC\\u6240\\u6709\\u5B50\\u57DF (\",(0,n.jsx)(e.code,{children:\"includeSubDomains\"}),\")\\uFF0C\\u5E76\\u5141\\u8BB8\\u5C06\\u8BE5\\u7AD9\\u70B9\\u5305\\u542B\\u5728\\u6D4F\\u89C8\\u5668\\u7684 HSTS \\u9884\\u52A0\\u8F7D\\u5217\\u8868\\u4E2D (\",(0,n.jsx)(e.code,{children:\"preload\"}),\")\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"X-Frame-Options\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\" \\u6807\\u5934\\u901A\\u8FC7\\u63A7\\u5236\\u9875\\u9762\\u662F\\u5426\\u53EF\\u4EE5\\u5728\\u6846\\u67B6\\u4E2D\\u663E\\u793A\\u6765\\u9632\\u6B62\\u70B9\\u51FB\\u52AB\\u6301\\u3002 \\u5E38\\u89C1\\u503C\\u4E3A \",(0,n.jsx)(e.code,{children:\"DENY\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"SAMEORIGIN\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-Frame-Options: DENY\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u7B56\\u7565\\u53EF\\u9632\\u6B62\\u9875\\u9762\\u5728\\u6846\\u67B6\\u3001iframe \\u6216\\u5BF9\\u8C61\\u4E2D\\u663E\\u793A\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"X-XSS-Protection\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6807\\u5934 \",(0,n.jsx)(e.code,{children:\"X-XSS-Protection\"}),\" \\u542F\\u7528\\u5185\\u7F6E\\u4E8E\\u5927\\u591A\\u6570\\u6D4F\\u89C8\\u5668\\u4E2D\\u7684\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS) \\u8FC7\\u6EE4\\u5668\\u3002\\u5B83\\u53EF\\u4EE5\\u963B\\u6B62\\u9875\\u9762\\u6216\\u6E05\\u9664\\u770B\\u4F3C\\u6076\\u610F\\u7684\\u811A\\u672C\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-XSS-Protection: 1; mode=block\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u7B56\\u7565\\u542F\\u7528 XSS \\u8FC7\\u6EE4\\u5668\\uFF0C\\u5E76\\u6307\\u793A\\u6D4F\\u89C8\\u5668\\u5728\\u68C0\\u6D4B\\u5230\\u653B\\u51FB\\u65F6\\u963B\\u6B62\\u8BE5\\u9875\\u9762\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Referrer-Policy\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6807\\u5934 \",(0,n.jsx)(e.code,{children:\"Referrer-Policy\"}),\" \\u63A7\\u5236\\u8BF7\\u6C42\\u4E2D\\u5305\\u542B\\u591A\\u5C11\\u5F15\\u7528\\u8005\\u4FE1\\u606F\\u3002\\u5B83\\u6709\\u52A9\\u4E8E\\u4FDD\\u62A4\\u7528\\u6237\\u9690\\u79C1\\u5E76\\u9632\\u6B62\\u4FE1\\u606F\\u6CC4\\u9732\\u3002\\u5E38\\u89C1\\u503C\\u5305\\u62EC \",(0,n.jsx)(e.code,{children:\"no-referrer\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"no-referrer-when-downgrade\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"strict-origin-when-cross-origin\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Referrer-Policy: no-referrer\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u7B56\\u7565\\u786E\\u4FDD\\u4E0D\\u968F\\u8BF7\\u6C42\\u53D1\\u9001\\u4EFB\\u4F55\\u5F15\\u7528\\u8005\\u4FE1\\u606F\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/HTTP/Headers\",children:\"MDN Web Docs: HTTP headers\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://owasp.org/www-project-secure-headers/\",children:\"OWASP Secure Headers Project\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP\",children:\"Content Security Policy (CSP) - MDN Web Docs\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security\",children:\"Strict-Transport-Security (HSTS) - MDN Web Docs\"})}),`\n`]})]})}function X(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(s,r)})):s(r)}var C=X;return y(H);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var P=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var c in e)l(r,c,{get:e[c],enumerable:!0})},o=(r,e,c,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of T(e))!m.call(r,i)&&i!==c&&l(r,i,{get:()=>e[i],enumerable:!(d=S(e,i))||d.enumerable});return r};var y=(r,e,c)=>(c=r!=null?p(u(r)):{},o(e||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),g=r=>o(l({},\"__esModule\",{value:!0}),r);var h=P((x,t)=>{t.exports=_jsx_runtime});var C={};f(C,{default:()=>a,frontmatter:()=>X});var n=y(h()),X={title:\"\\u5E38\\u89C1\\u7684\\u5B89\\u5168\\u6807\\u5934\\u53CA\\u5176\\u7528\\u9014\\u662F\\u4EC0\\u4E48\\uFF1F\"};function s(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5B89\\u5168\\u6807\\u5934\\u662F HTTP \\u54CD\\u5E94\\u6807\\u5934\\uFF0C\\u53EF\\u5E2E\\u52A9\\u4FDD\\u62A4 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u514D\\u53D7\\u5404\\u79CD\\u653B\\u51FB\\u3002 \\u4E00\\u4E9B\\u5E38\\u89C1\\u7684\\u5B89\\u5168\\u6807\\u5934\\u5305\\u62EC\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Content-Security-Policy (CSP)\"}),\"\\uFF1A\\u901A\\u8FC7\\u6307\\u5B9A\\u5141\\u8BB8\\u7684\\u5185\\u5BB9\\u6765\\u6E90\\u6765\\u9632\\u6B62\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS) \\u548C\\u5176\\u4ED6\\u4EE3\\u7801\\u6CE8\\u5165\\u653B\\u51FB\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"X-Content-Type-Options\"}),\"\\uFF1A\\u901A\\u8FC7\\u6307\\u793A\\u6D4F\\u89C8\\u5668\\u9075\\u5FAA\\u58F0\\u660E\\u7684 \",(0,n.jsx)(e.code,{children:\"Content-Type\"}),\" \\u6765\\u9632\\u6B62 MIME \\u7C7B\\u578B\\u55C5\\u63A2\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Strict-Transport-Security (HSTS)\"}),\"\\uFF1A\\u5F3A\\u5236\\u5BF9\\u670D\\u52A1\\u5668\\u8FDB\\u884C\\u5B89\\u5168 (HTTPS) \\u8FDE\\u63A5\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\"\\uFF1A\\u901A\\u8FC7\\u63A7\\u5236\\u9875\\u9762\\u662F\\u5426\\u53EF\\u4EE5\\u5728\\u6846\\u67B6\\u4E2D\\u663E\\u793A\\u6765\\u9632\\u6B62\\u70B9\\u51FB\\u52AB\\u6301\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"X-XSS-Protection\"}),\"\\uFF1A\\u542F\\u7528\\u5185\\u7F6E\\u4E8E\\u5927\\u591A\\u6570\\u6D4F\\u89C8\\u5668\\u4E2D\\u7684\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS) \\u8FC7\\u6EE4\\u5668\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Referrer-Policy\"}),\"\\uFF1A\\u63A7\\u5236\\u8BF7\\u6C42\\u4E2D\\u5305\\u542B\\u591A\\u5C11\\u5F15\\u7528\\u8005\\u4FE1\\u606F\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5E38\\u89C1\\u7684\\u5B89\\u5168\\u6807\\u5934\\u53CA\\u5176\\u7528\\u9014\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Content-Security-Policy (CSP)\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Content-Security-Policy\"}),\" \\u6807\\u5934\\u901A\\u8FC7\\u6307\\u5B9A\\u5141\\u8BB8\\u5728\\u7F51\\u9875\\u4E0A\\u52A0\\u8F7D\\u54EA\\u4E9B\\u5185\\u5BB9\\u6765\\u6E90\\u6765\\u5E2E\\u52A9\\u9632\\u6B62\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS) \\u548C\\u5176\\u4ED6\\u4EE3\\u7801\\u6CE8\\u5165\\u653B\\u51FB\\u3002 \\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: default-src 'self'; img-src 'self' https://example.com; script-src 'self' 'unsafe-inline'\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6B64\\u7B56\\u7565\\u5141\\u8BB8\\u4EC5\\u4ECE\\u540C\\u4E00\\u6765\\u6E90 (\",(0,n.jsx)(e.code,{children:\"'self'\"}),\")\\u3001\\u6765\\u81EA\\u540C\\u4E00\\u6765\\u6E90\\u6216 \",(0,n.jsx)(e.code,{children:\"https://example.com\"}),\" \\u7684\\u56FE\\u50CF\\u4EE5\\u53CA\\u6765\\u81EA\\u540C\\u4E00\\u6765\\u6E90\\u6216\\u5185\\u8054\\u811A\\u672C\\u7684\\u811A\\u672C\\u52A0\\u8F7D\\u5185\\u5BB9\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"X-Content-Type-Options\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"X-Content-Type-Options\"}),\" \\u6807\\u5934\\u901A\\u8FC7\\u6307\\u793A\\u6D4F\\u89C8\\u5668\\u9075\\u5FAA\\u58F0\\u660E\\u7684 \",(0,n.jsx)(e.code,{children:\"Content-Type\"}),\" \\u6765\\u9632\\u6B62 MIME \\u7C7B\\u578B\\u55C5\\u63A2\\u3002 \\u8FD9\\u6709\\u52A9\\u4E8E\\u51CF\\u8F7B\\u57FA\\u4E8E\\u5185\\u5BB9\\u7C7B\\u578B\\u8BEF\\u89E3\\u7684\\u653B\\u51FB\\u3002 \\u6700\\u5E38\\u89C1\\u7684\\u503C\\u662F \",(0,n.jsx)(e.code,{children:\"nosniff\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-Content-Type-Options: nosniff\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Strict-Transport-Security (HSTS)\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Strict-Transport-Security\"}),\" \\u6807\\u5934\\u5F3A\\u5236\\u5BF9\\u670D\\u52A1\\u5668\\u8FDB\\u884C\\u5B89\\u5168 (HTTPS) \\u8FDE\\u63A5\\u3002 \\u5B83\\u6307\\u793A\\u6D4F\\u89C8\\u5668\\u4EC5\\u4F7F\\u7528 HTTPS \\u4E0E\\u7AD9\\u70B9\\u4EA4\\u4E92\\uFF0C\\u5373\\u4F7F\\u7528\\u6237\\u5C1D\\u8BD5\\u901A\\u8FC7 HTTP \\u8BBF\\u95EE\\u5B83\\u3002 \\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Strict-Transport-Security: max-age=31536000; includeSubDomains; preload\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6B64\\u7B56\\u7565\\u544A\\u8BC9\\u6D4F\\u89C8\\u5668\\u5F3A\\u5236 HTTPS \\u4E00\\u5E74 (\",(0,n.jsx)(e.code,{children:\"max-age=31536000\"}),\")\\uFF0C\\u5305\\u62EC\\u6240\\u6709\\u5B50\\u57DF (\",(0,n.jsx)(e.code,{children:\"includeSubDomains\"}),\")\\uFF0C\\u5E76\\u5141\\u8BB8\\u5C06\\u8BE5\\u7AD9\\u70B9\\u5305\\u542B\\u5728\\u6D4F\\u89C8\\u5668\\u7684 HSTS \\u9884\\u52A0\\u8F7D\\u5217\\u8868\\u4E2D (\",(0,n.jsx)(e.code,{children:\"preload\"}),\")\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"X-Frame-Options\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"X-Frame-Options\"}),\" \\u6807\\u5934\\u901A\\u8FC7\\u63A7\\u5236\\u9875\\u9762\\u662F\\u5426\\u53EF\\u4EE5\\u5728\\u6846\\u67B6\\u4E2D\\u663E\\u793A\\u6765\\u9632\\u6B62\\u70B9\\u51FB\\u52AB\\u6301\\u3002 \\u5E38\\u89C1\\u503C\\u4E3A \",(0,n.jsx)(e.code,{children:\"DENY\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"SAMEORIGIN\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-Frame-Options: DENY\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u7B56\\u7565\\u53EF\\u9632\\u6B62\\u9875\\u9762\\u5728\\u6846\\u67B6\\u3001iframe \\u6216\\u5BF9\\u8C61\\u4E2D\\u663E\\u793A\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"X-XSS-Protection\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6807\\u5934 \",(0,n.jsx)(e.code,{children:\"X-XSS-Protection\"}),\" \\u542F\\u7528\\u5185\\u7F6E\\u4E8E\\u5927\\u591A\\u6570\\u6D4F\\u89C8\\u5668\\u4E2D\\u7684\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS) \\u8FC7\\u6EE4\\u5668\\u3002\\u5B83\\u53EF\\u4EE5\\u963B\\u6B62\\u9875\\u9762\\u6216\\u6E05\\u9664\\u770B\\u4F3C\\u6076\\u610F\\u7684\\u811A\\u672C\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`X-XSS-Protection: 1; mode=block\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u7B56\\u7565\\u542F\\u7528 XSS \\u8FC7\\u6EE4\\u5668\\uFF0C\\u5E76\\u6307\\u793A\\u6D4F\\u89C8\\u5668\\u5728\\u68C0\\u6D4B\\u5230\\u653B\\u51FB\\u65F6\\u963B\\u6B62\\u8BE5\\u9875\\u9762\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Referrer-Policy\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6807\\u5934 \",(0,n.jsx)(e.code,{children:\"Referrer-Policy\"}),\" \\u63A7\\u5236\\u8BF7\\u6C42\\u4E2D\\u5305\\u542B\\u591A\\u5C11\\u5F15\\u7528\\u8005\\u4FE1\\u606F\\u3002\\u5B83\\u6709\\u52A9\\u4E8E\\u4FDD\\u62A4\\u7528\\u6237\\u9690\\u79C1\\u5E76\\u9632\\u6B62\\u4FE1\\u606F\\u6CC4\\u9732\\u3002\\u5E38\\u89C1\\u503C\\u5305\\u62EC \",(0,n.jsx)(e.code,{children:\"no-referrer\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"no-referrer-when-downgrade\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"strict-origin-when-cross-origin\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Referrer-Policy: no-referrer\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u7B56\\u7565\\u786E\\u4FDD\\u4E0D\\u968F\\u8BF7\\u6C42\\u53D1\\u9001\\u4EFB\\u4F55\\u5F15\\u7528\\u8005\\u4FE1\\u606F\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/HTTP/Headers\",children:\"MDN Web Docs: HTTP headers\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://owasp.org/www-project-secure-headers/\",children:\"OWASP Secure Headers Project\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP\",children:\"Content Security Policy (CSP) - MDN Web Docs\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security\",children:\"Strict-Transport-Security (HSTS) - MDN Web Docs\"})}),`\n`]})]})}function a(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(s,{...r})}):s(r)}return g(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/en-US.json
index 75af17cf9..95d0242e5 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),v=(a,e)=>{for(var t in e)r(a,t,{get:e[t],enumerable:!0})},o=(a,e,t,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of g(e))!u.call(a,i)&&i!==t&&r(a,i,{get:()=>e[i],enumerable:!(c=h(e,i))||c.enumerable});return a};var y=(a,e,t)=>(t=a!=null?p(m(a)):{},o(e||!a||!a.__esModule?r(t,\"default\",{value:a,enumerable:!0}):t,a)),b=a=>o(r({},\"__esModule\",{value:!0}),a);var d=f((j,l)=>{l.exports=_jsx_runtime});var T={};v(T,{default:()=>w,frontmatter:()=>S});var n=y(d()),S={title:\"What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?\"};function s(a){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\",hr:\"hr\",h3:\"h3\",pre:\"pre\",code:\"code\",a:\"a\"},a.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Using languages that compile to JavaScript, like TypeScript or CoffeeScript, can offer several advantages such as improved syntax, type safety, and better tooling. However, they also come with disadvantages like added build steps, potential performance overhead, and the need to learn new syntax.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Advantages:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Improved syntax and readability\"}),`\n`,(0,n.jsx)(e.li,{children:\"Type safety and error checking\"}),`\n`,(0,n.jsx)(e.li,{children:\"Better tooling and editor support\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Disadvantages:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Added build steps and complexity\"}),`\n`,(0,n.jsx)(e.li,{children:\"Potential performance overhead\"}),`\n`,(0,n.jsx)(e.li,{children:\"Learning curve for new syntax\"}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Advantages of writing JavaScript code in a language that compiles to JavaScript\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Improved syntax and readability\"}),`\n`,(0,n.jsx)(e.p,{children:\"Languages like TypeScript and CoffeeScript often provide a more concise and readable syntax compared to vanilla JavaScript. This can make the code easier to write and maintain.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-typescript\",children:`// TypeScript example\nclass Person {\n  constructor(private name: string) {}\n\n  greet() {\n    console.log(\\`Hello, \\${this.name}\\`);\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Type safety and error checking\"}),`\n`,(0,n.jsx)(e.p,{children:\"TypeScript, for example, adds static type checking to JavaScript, which can catch errors at compile time rather than at runtime. This can lead to more robust and reliable code.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-typescript\",children:`// TypeScript example\nfunction add(a: number, b: number): number {\n  return a + b;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Better tooling and editor support\"}),`\n`,(0,n.jsx)(e.p,{children:\"Languages that compile to JavaScript often come with enhanced tooling and editor support, such as autocompletion, refactoring tools, and better debugging capabilities. This can improve developer productivity.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Disadvantages of writing JavaScript code in a language that compiles to JavaScript\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Added build steps and complexity\"}),`\n`,(0,n.jsx)(e.p,{children:\"Using a language that compiles to JavaScript introduces an additional build step in the development process. This can complicate the build pipeline and increase the time it takes to see changes reflected in the browser.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`// Example of a build configuration for TypeScript\n{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"module\": \"commonjs\",\n    \"outDir\": \"./dist\",\n    \"rootDir\": \"./src\",\n    \"strict\": true\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Potential performance overhead\"}),`\n`,(0,n.jsx)(e.p,{children:\"While the compiled JavaScript code is often optimized, there can be cases where the performance is not as good as hand-written JavaScript. This is especially true if the compiler introduces unnecessary abstractions.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Learning curve for new syntax\"}),`\n`,(0,n.jsx)(e.p,{children:\"Developers need to learn the new syntax and features of the language that compiles to JavaScript. This can be a barrier to entry and may require additional training and resources.\"}),`\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://www.typescriptlang.org/docs/\",children:\"TypeScript Official Documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://coffeescript.org/\",children:\"CoffeeScript Official Documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://babeljs.io/\",children:\"Babel: The JavaScript Compiler\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html\",children:\"Comparing TypeScript and JavaScript\"})}),`\n`]})]})}function x(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(s,a)})):s(a)}var w=x;return b(T);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),y=(a,e)=>{for(var t in e)r(a,t,{get:e[t],enumerable:!0})},o=(a,e,t,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of g(e))!f.call(a,i)&&i!==t&&r(a,i,{get:()=>e[i],enumerable:!(c=m(e,i))||c.enumerable});return a};var b=(a,e,t)=>(t=a!=null?h(u(a)):{},o(e||!a||!a.__esModule?r(t,\"default\",{value:a,enumerable:!0}):t,a)),S=a=>o(r({},\"__esModule\",{value:!0}),a);var d=v((J,l)=>{l.exports=_jsx_runtime});var w={};y(w,{default:()=>p,frontmatter:()=>x});var n=b(d()),x={title:\"What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?\"};function s(a){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...a.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Using languages that compile to JavaScript, like TypeScript or CoffeeScript, can offer several advantages such as improved syntax, type safety, and better tooling. However, they also come with disadvantages like added build steps, potential performance overhead, and the need to learn new syntax.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Advantages:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Improved syntax and readability\"}),`\n`,(0,n.jsx)(e.li,{children:\"Type safety and error checking\"}),`\n`,(0,n.jsx)(e.li,{children:\"Better tooling and editor support\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Disadvantages:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Added build steps and complexity\"}),`\n`,(0,n.jsx)(e.li,{children:\"Potential performance overhead\"}),`\n`,(0,n.jsx)(e.li,{children:\"Learning curve for new syntax\"}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Advantages of writing JavaScript code in a language that compiles to JavaScript\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Improved syntax and readability\"}),`\n`,(0,n.jsx)(e.p,{children:\"Languages like TypeScript and CoffeeScript often provide a more concise and readable syntax compared to vanilla JavaScript. This can make the code easier to write and maintain.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-typescript\",children:`// TypeScript example\nclass Person {\n  constructor(private name: string) {}\n\n  greet() {\n    console.log(\\`Hello, \\${this.name}\\`);\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Type safety and error checking\"}),`\n`,(0,n.jsx)(e.p,{children:\"TypeScript, for example, adds static type checking to JavaScript, which can catch errors at compile time rather than at runtime. This can lead to more robust and reliable code.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-typescript\",children:`// TypeScript example\nfunction add(a: number, b: number): number {\n  return a + b;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Better tooling and editor support\"}),`\n`,(0,n.jsx)(e.p,{children:\"Languages that compile to JavaScript often come with enhanced tooling and editor support, such as autocompletion, refactoring tools, and better debugging capabilities. This can improve developer productivity.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Disadvantages of writing JavaScript code in a language that compiles to JavaScript\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Added build steps and complexity\"}),`\n`,(0,n.jsx)(e.p,{children:\"Using a language that compiles to JavaScript introduces an additional build step in the development process. This can complicate the build pipeline and increase the time it takes to see changes reflected in the browser.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`// Example of a build configuration for TypeScript\n{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"module\": \"commonjs\",\n    \"outDir\": \"./dist\",\n    \"rootDir\": \"./src\",\n    \"strict\": true\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Potential performance overhead\"}),`\n`,(0,n.jsx)(e.p,{children:\"While the compiled JavaScript code is often optimized, there can be cases where the performance is not as good as hand-written JavaScript. This is especially true if the compiler introduces unnecessary abstractions.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Learning curve for new syntax\"}),`\n`,(0,n.jsx)(e.p,{children:\"Developers need to learn the new syntax and features of the language that compiles to JavaScript. This can be a barrier to entry and may require additional training and resources.\"}),`\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://www.typescriptlang.org/docs/\",children:\"TypeScript Official Documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://coffeescript.org/\",children:\"CoffeeScript Official Documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://babeljs.io/\",children:\"Babel: The JavaScript Compiler\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html\",children:\"Comparing TypeScript and JavaScript\"})}),`\n`]})]})}function p(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(s,{...a})}):s(a)}return S(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/pt-BR.json
index 8f3176581..f686fca55 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var h=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),S=(a,e)=>{for(var i in e)r(a,i,{get:e[i],enumerable:!0})},d=(a,e,i,n)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of u(e))!v.call(a,s)&&s!==i&&r(a,s,{get:()=>e[s],enumerable:!(n=m(e,s))||n.enumerable});return a};var f=(a,e,i)=>(i=a!=null?p(g(a)):{},d(e||!a||!a.__esModule?r(i,\"default\",{value:a,enumerable:!0}):i,a)),x=a=>d(r({},\"__esModule\",{value:!0}),a);var t=h((_,c)=>{c.exports=_jsx_runtime});var C={};S(C,{default:()=>J,frontmatter:()=>j});var o=f(t()),j={title:\"Quais s\\xE3o algumas das vantagens/desvantagens de escrever c\\xF3digo JavaScript em uma linguagem que compila para JavaScript?\"};function l(a){let e=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\"},a.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.p,{children:\"Alguns exemplos de linguagens que compilam para JavaScript incluem CoffeeScript, Elm, ClojureScript, PureScript e TypeScript.\"}),`\n`,(0,o.jsx)(e.h2,{children:\"Vantagens\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"Corrige alguns dos problemas de longa data em JavaScript e desencoraja anti-padr\\xF5es do JavaScript.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Permite que voc\\xEA escreva um c\\xF3digo mais curto, fornecendo a\\xE7\\xFAcar sint\\xE1tico em cima do JavaScript, o que o ES5 n\\xE3o possui, mas o ES2015 \\xE9 excelente.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Tipos est\\xE1ticos s\\xE3o incr\\xEDveis (no caso do TypeScript) para projetos grandes que precisam ser mantidos ao longo do tempo.\"}),`\n`]}),`\n`,(0,o.jsx)(e.h2,{children:\"Desvantagens\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"\\xC9 preciso ter um processo de constru\\xE7\\xE3o/compila\\xE7\\xE3o, j\\xE1 que os navegadores apenas executam JavaScript e seu c\\xF3digo precisar\\xE1 ser compilado em JavaScript antes de ser enviado aos navegadores.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Depura\\xE7\\xE3o pode ser dif\\xEDcil se seus mapas de origem n\\xE3o mapearem corretamente para sua origem pr\\xE9-compilada.\"}),`\n`,(0,o.jsx)(e.li,{children:\"A maioria dos desenvolvedores n\\xE3o est\\xE1 familiarizada com essas linguagens e precisar\\xE1 aprend\\xEA-las. H\\xE1 um custo de aprendizado envolvido para sua equipe se voc\\xEA us\\xE1-lo em seus projetos.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Comunidade menor (dependendo da linguagem), o que significa que recursos, tutoriais, bibliotecas e ferramentas ser\\xE3o mais dif\\xEDceis de encontrar.\"}),`\n`,(0,o.jsx)(e.li,{children:\"O suporte de IDE/editor pode ser limitado.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Essas linguagens sempre estar\\xE3o atrasadas em rela\\xE7\\xE3o ao padr\\xE3o mais recente do JavaScript.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Os desenvolvedores devem estar cientes do que seu c\\xF3digo est\\xE1 sendo compilado, pois \\xE9 isso que realmente ser\\xE1 executado e \\xE9 isso que importa no final.\"}),`\n`]}),`\n`,(0,o.jsx)(e.p,{children:\"Na pr\\xE1tica, o ES2015 melhorou significativamente o JavaScript e tornou muito mais agrad\\xE1vel escrev\\xEA-lo. N\\xE3o h\\xE1 mais uma grande necessidade de usar o CoffeeScript nos dias de hoje. Em vez disso, o TypeScript \\xE9 a escolha preferida devido \\xE0 seguran\\xE7a de tipo adicionada e \\xE0 experi\\xEAncia de desenvolvedor melhorada que ele proporciona.\"})]})}function q(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,Object.assign({},a,{children:(0,o.jsx)(l,a)})):l(a)}var J=q;return x(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var S=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),f=(a,e)=>{for(var i in e)s(a,i,{get:e[i],enumerable:!0})},d=(a,e,i,n)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of g(e))!h.call(a,r)&&r!==i&&s(a,r,{get:()=>e[r],enumerable:!(n=u(e,r))||n.enumerable});return a};var x=(a,e,i)=>(i=a!=null?m(v(a)):{},d(e||!a||!a.__esModule?s(i,\"default\",{value:a,enumerable:!0}):i,a)),q=a=>d(s({},\"__esModule\",{value:!0}),a);var t=S((E,c)=>{c.exports=_jsx_runtime});var J={};f(J,{default:()=>p,frontmatter:()=>j});var o=x(t()),j={title:\"Quais s\\xE3o algumas das vantagens/desvantagens de escrever c\\xF3digo JavaScript em uma linguagem que compila para JavaScript?\"};function l(a){let e={h2:\"h2\",li:\"li\",p:\"p\",ul:\"ul\",...a.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.p,{children:\"Alguns exemplos de linguagens que compilam para JavaScript incluem CoffeeScript, Elm, ClojureScript, PureScript e TypeScript.\"}),`\n`,(0,o.jsx)(e.h2,{children:\"Vantagens\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"Corrige alguns dos problemas de longa data em JavaScript e desencoraja anti-padr\\xF5es do JavaScript.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Permite que voc\\xEA escreva um c\\xF3digo mais curto, fornecendo a\\xE7\\xFAcar sint\\xE1tico em cima do JavaScript, o que o ES5 n\\xE3o possui, mas o ES2015 \\xE9 excelente.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Tipos est\\xE1ticos s\\xE3o incr\\xEDveis (no caso do TypeScript) para projetos grandes que precisam ser mantidos ao longo do tempo.\"}),`\n`]}),`\n`,(0,o.jsx)(e.h2,{children:\"Desvantagens\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"\\xC9 preciso ter um processo de constru\\xE7\\xE3o/compila\\xE7\\xE3o, j\\xE1 que os navegadores apenas executam JavaScript e seu c\\xF3digo precisar\\xE1 ser compilado em JavaScript antes de ser enviado aos navegadores.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Depura\\xE7\\xE3o pode ser dif\\xEDcil se seus mapas de origem n\\xE3o mapearem corretamente para sua origem pr\\xE9-compilada.\"}),`\n`,(0,o.jsx)(e.li,{children:\"A maioria dos desenvolvedores n\\xE3o est\\xE1 familiarizada com essas linguagens e precisar\\xE1 aprend\\xEA-las. H\\xE1 um custo de aprendizado envolvido para sua equipe se voc\\xEA us\\xE1-lo em seus projetos.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Comunidade menor (dependendo da linguagem), o que significa que recursos, tutoriais, bibliotecas e ferramentas ser\\xE3o mais dif\\xEDceis de encontrar.\"}),`\n`,(0,o.jsx)(e.li,{children:\"O suporte de IDE/editor pode ser limitado.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Essas linguagens sempre estar\\xE3o atrasadas em rela\\xE7\\xE3o ao padr\\xE3o mais recente do JavaScript.\"}),`\n`,(0,o.jsx)(e.li,{children:\"Os desenvolvedores devem estar cientes do que seu c\\xF3digo est\\xE1 sendo compilado, pois \\xE9 isso que realmente ser\\xE1 executado e \\xE9 isso que importa no final.\"}),`\n`]}),`\n`,(0,o.jsx)(e.p,{children:\"Na pr\\xE1tica, o ES2015 melhorou significativamente o JavaScript e tornou muito mais agrad\\xE1vel escrev\\xEA-lo. N\\xE3o h\\xE1 mais uma grande necessidade de usar o CoffeeScript nos dias de hoje. Em vez disso, o TypeScript \\xE9 a escolha preferida devido \\xE0 seguran\\xE7a de tipo adicionada e \\xE0 experi\\xEAncia de desenvolvedor melhorada que ele proporciona.\"})]})}function p(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,{...a,children:(0,o.jsx)(l,{...a})}):l(a)}return q(J);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/zh-CN.json
index f81a7a1fd..b67d9600b 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var o=Object.create;var t=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),g=(r,n)=>{for(var i in n)t(r,i,{get:n[i],enumerable:!0})},a=(r,n,i,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of u(n))!m.call(r,c)&&c!==i&&t(r,c,{get:()=>n[c],enumerable:!(l=s(n,c))||l.enumerable});return r};var v=(r,n,i)=>(i=r!=null?o(S(r)):{},a(n||!r||!r.__esModule?t(i,\"default\",{value:r,enumerable:!0}):i,r)),J=r=>a(t({},\"__esModule\",{value:!0}),r);var h=f((w,p)=>{p.exports=_jsx_runtime});var j={};g(j,{default:()=>x,frontmatter:()=>y});var e=v(h()),y={title:\"\\u7528\\u7F16\\u8BD1\\u4E3A JavaScript \\u7684\\u8BED\\u8A00\\u7F16\\u5199 JavaScript \\u4EE3\\u7801\\u6709\\u54EA\\u4E9B\\u4F18\\u7F3A\\u70B9\\uFF1F\"};function d(r){let n=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\",hr:\"hr\",h3:\"h3\",pre:\"pre\",code:\"code\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528\\u7F16\\u8BD1\\u4E3A JavaScript \\u7684\\u8BED\\u8A00\\uFF08\\u5982 TypeScript \\u6216 CoffeeScript\\uFF09\\u53EF\\u4EE5\\u63D0\\u4F9B\\u4E00\\u4E9B\\u4F18\\u52BF\\uFF0C\\u4F8B\\u5982\\u6539\\u8FDB\\u7684\\u8BED\\u6CD5\\u3001\\u7C7B\\u578B\\u5B89\\u5168\\u6027\\u548C\\u66F4\\u597D\\u7684\\u5DE5\\u5177\\u3002\\u4F46\\u662F\\uFF0C\\u5B83\\u4EEC\\u4E5F\\u6709\\u7F3A\\u70B9\\uFF0C\\u4F8B\\u5982\\u589E\\u52A0\\u4E86\\u6784\\u5EFA\\u6B65\\u9AA4\\u3001\\u6F5C\\u5728\\u7684\\u6027\\u80FD\\u5F00\\u9500\\u4EE5\\u53CA\\u9700\\u8981\\u5B66\\u4E60\\u65B0\\u8BED\\u6CD5\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F18\\u70B9\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u6539\\u8FDB\\u7684\\u8BED\\u6CD5\\u548C\\u53EF\\u8BFB\\u6027\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u7C7B\\u578B\\u5B89\\u5168\\u6027\\u548C\\u9519\\u8BEF\\u68C0\\u67E5\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u66F4\\u597D\\u7684\\u5DE5\\u5177\\u548C\\u7F16\\u8F91\\u5668\\u652F\\u6301\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7F3A\\u70B9\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u589E\\u52A0\\u4E86\\u6784\\u5EFA\\u6B65\\u9AA4\\u548C\\u590D\\u6742\\u6027\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u6F5C\\u5728\\u7684\\u6027\\u80FD\\u5F00\\u9500\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B66\\u4E60\\u65B0\\u8BED\\u6CD5\\u7684\\u66F2\\u7EBF\"}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7528\\u7F16\\u8BD1\\u4E3A JavaScript \\u7684\\u8BED\\u8A00\\u7F16\\u5199 JavaScript \\u4EE3\\u7801\\u7684\\u4F18\\u70B9\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6539\\u8FDB\\u7684\\u8BED\\u6CD5\\u548C\\u53EF\\u8BFB\\u6027\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E0E\\u539F\\u59CB JavaScript \\u76F8\\u6BD4\\uFF0CTypeScript \\u548C CoffeeScript \\u7B49\\u8BED\\u8A00\\u901A\\u5E38\\u63D0\\u4F9B\\u66F4\\u7B80\\u6D01\\u3001\\u66F4\\u6613\\u8BFB\\u7684\\u8BED\\u6CD5\\u3002\\u8FD9\\u53EF\\u4EE5\\u4F7F\\u4EE3\\u7801\\u66F4\\u5BB9\\u6613\\u7F16\\u5199\\u548C\\u7EF4\\u62A4\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-typescript\",children:`// TypeScript example\nclass Person {\n  constructor(private name: string) {}\n\n  greet() {\n    console.log(\\`Hello, \\${this.name}\\`);\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7C7B\\u578B\\u5B89\\u5168\\u6027\\u548C\\u9519\\u8BEF\\u68C0\\u67E5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F8B\\u5982\\uFF0CTypeScript \\u5C06\\u9759\\u6001\\u7C7B\\u578B\\u68C0\\u67E5\\u6DFB\\u52A0\\u5230 JavaScript \\u4E2D\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u5728\\u7F16\\u8BD1\\u65F6\\u800C\\u4E0D\\u662F\\u8FD0\\u884C\\u65F6\\u6355\\u83B7\\u9519\\u8BEF\\u3002\\u8FD9\\u53EF\\u4EE5\\u4F7F\\u4EE3\\u7801\\u66F4\\u5065\\u58EE\\u3001\\u66F4\\u53EF\\u9760\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-typescript\",children:`// TypeScript example\nfunction add(a: number, b: number): number {\n  return a + b;\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u66F4\\u597D\\u7684\\u5DE5\\u5177\\u548C\\u7F16\\u8F91\\u5668\\u652F\\u6301\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7F16\\u8BD1\\u4E3A JavaScript \\u7684\\u8BED\\u8A00\\u901A\\u5E38\\u9644\\u5E26\\u589E\\u5F3A\\u7684\\u5DE5\\u5177\\u548C\\u7F16\\u8F91\\u5668\\u652F\\u6301\\uFF0C\\u4F8B\\u5982\\u81EA\\u52A8\\u5B8C\\u6210\\u3001\\u91CD\\u6784\\u5DE5\\u5177\\u548C\\u66F4\\u597D\\u7684\\u8C03\\u8BD5\\u529F\\u80FD\\u3002\\u8FD9\\u53EF\\u4EE5\\u63D0\\u9AD8\\u5F00\\u53D1\\u4EBA\\u5458\\u7684\\u5DE5\\u4F5C\\u6548\\u7387\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7528\\u7F16\\u8BD1\\u4E3A JavaScript \\u7684\\u8BED\\u8A00\\u7F16\\u5199 JavaScript \\u4EE3\\u7801\\u7684\\u7F3A\\u70B9\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u589E\\u52A0\\u4E86\\u6784\\u5EFA\\u6B65\\u9AA4\\u548C\\u590D\\u6742\\u6027\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528\\u7F16\\u8BD1\\u4E3A JavaScript \\u7684\\u8BED\\u8A00\\u4F1A\\u5728\\u5F00\\u53D1\\u8FC7\\u7A0B\\u4E2D\\u5F15\\u5165\\u989D\\u5916\\u7684\\u6784\\u5EFA\\u6B65\\u9AA4\\u3002\\u8FD9\\u4F1A\\u4F7F\\u6784\\u5EFA\\u6D41\\u7A0B\\u590D\\u6742\\u5316\\uFF0C\\u5E76\\u589E\\u52A0\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u770B\\u5230\\u66F4\\u6539\\u6240\\u9700\\u7684\\u65F6\\u95F4\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`// Example of a build configuration for TypeScript\n{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"module\": \"commonjs\",\n    \"outDir\": \"./dist\",\n    \"rootDir\": \"./src\",\n    \"strict\": true\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6F5C\\u5728\\u7684\\u6027\\u80FD\\u5F00\\u9500\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u867D\\u7136\\u7F16\\u8BD1\\u540E\\u7684 JavaScript \\u4EE3\\u7801\\u901A\\u5E38\\u7ECF\\u8FC7\\u4F18\\u5316\\uFF0C\\u4F46\\u5728\\u67D0\\u4E9B\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5176\\u6027\\u80FD\\u53EF\\u80FD\\u4E0D\\u5982\\u624B\\u5199\\u7684 JavaScript\\u3002\\u5982\\u679C\\u7F16\\u8BD1\\u5668\\u5F15\\u5165\\u4E0D\\u5FC5\\u8981\\u7684\\u62BD\\u8C61\\uFF0C\\u5C24\\u5176\\u5982\\u6B64\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u65B0\\u8BED\\u6CD5\\u7684\\u5B66\\u4E60\\u66F2\\u7EBF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F00\\u53D1\\u4EBA\\u5458\\u9700\\u8981\\u5B66\\u4E60\\u7F16\\u8BD1\\u4E3A JavaScript \\u7684\\u8BED\\u8A00\\u7684\\u65B0\\u8BED\\u6CD5\\u548C\\u7279\\u6027\\u3002\\u8FD9\\u53EF\\u80FD\\u6210\\u4E3A\\u8FDB\\u5165\\u7684\\u969C\\u788D\\uFF0C\\u5E76\\u4E14\\u53EF\\u80FD\\u9700\\u8981\\u989D\\u5916\\u7684\\u57F9\\u8BAD\\u548C\\u8D44\\u6E90\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.typescriptlang.org/docs/\",children:\"TypeScript \\u5B98\\u65B9\\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://coffeescript.org/\",children:\"CoffeeScript \\u5B98\\u65B9\\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://babeljs.io/\",children:\"Babel\\uFF1AJavaScript \\u7F16\\u8BD1\\u5668\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html\",children:\"\\u6BD4\\u8F83 TypeScript \\u548C JavaScript\"})}),`\n`]})]})}function b(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(d,r)})):d(r)}var x=b;return J(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),v=(r,n)=>{for(var i in n)t(r,i,{get:n[i],enumerable:!0})},a=(r,n,i,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of S(n))!f.call(r,c)&&c!==i&&t(r,c,{get:()=>n[c],enumerable:!(l=u(n,c))||l.enumerable});return r};var J=(r,n,i)=>(i=r!=null?s(m(r)):{},a(n||!r||!r.__esModule?t(i,\"default\",{value:r,enumerable:!0}):i,r)),y=r=>a(t({},\"__esModule\",{value:!0}),r);var h=g((j,p)=>{p.exports=_jsx_runtime});var b={};v(b,{default:()=>o,frontmatter:()=>x});var e=J(h()),x={title:\"\\u7528\\u7F16\\u8BD1\\u4E3A JavaScript \\u7684\\u8BED\\u8A00\\u7F16\\u5199 JavaScript \\u4EE3\\u7801\\u6709\\u54EA\\u4E9B\\u4F18\\u7F3A\\u70B9\\uFF1F\"};function d(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528\\u7F16\\u8BD1\\u4E3A JavaScript \\u7684\\u8BED\\u8A00\\uFF08\\u5982 TypeScript \\u6216 CoffeeScript\\uFF09\\u53EF\\u4EE5\\u63D0\\u4F9B\\u4E00\\u4E9B\\u4F18\\u52BF\\uFF0C\\u4F8B\\u5982\\u6539\\u8FDB\\u7684\\u8BED\\u6CD5\\u3001\\u7C7B\\u578B\\u5B89\\u5168\\u6027\\u548C\\u66F4\\u597D\\u7684\\u5DE5\\u5177\\u3002\\u4F46\\u662F\\uFF0C\\u5B83\\u4EEC\\u4E5F\\u6709\\u7F3A\\u70B9\\uFF0C\\u4F8B\\u5982\\u589E\\u52A0\\u4E86\\u6784\\u5EFA\\u6B65\\u9AA4\\u3001\\u6F5C\\u5728\\u7684\\u6027\\u80FD\\u5F00\\u9500\\u4EE5\\u53CA\\u9700\\u8981\\u5B66\\u4E60\\u65B0\\u8BED\\u6CD5\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F18\\u70B9\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u6539\\u8FDB\\u7684\\u8BED\\u6CD5\\u548C\\u53EF\\u8BFB\\u6027\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u7C7B\\u578B\\u5B89\\u5168\\u6027\\u548C\\u9519\\u8BEF\\u68C0\\u67E5\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u66F4\\u597D\\u7684\\u5DE5\\u5177\\u548C\\u7F16\\u8F91\\u5668\\u652F\\u6301\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7F3A\\u70B9\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u589E\\u52A0\\u4E86\\u6784\\u5EFA\\u6B65\\u9AA4\\u548C\\u590D\\u6742\\u6027\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u6F5C\\u5728\\u7684\\u6027\\u80FD\\u5F00\\u9500\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B66\\u4E60\\u65B0\\u8BED\\u6CD5\\u7684\\u66F2\\u7EBF\"}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7528\\u7F16\\u8BD1\\u4E3A JavaScript \\u7684\\u8BED\\u8A00\\u7F16\\u5199 JavaScript \\u4EE3\\u7801\\u7684\\u4F18\\u70B9\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6539\\u8FDB\\u7684\\u8BED\\u6CD5\\u548C\\u53EF\\u8BFB\\u6027\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E0E\\u539F\\u59CB JavaScript \\u76F8\\u6BD4\\uFF0CTypeScript \\u548C CoffeeScript \\u7B49\\u8BED\\u8A00\\u901A\\u5E38\\u63D0\\u4F9B\\u66F4\\u7B80\\u6D01\\u3001\\u66F4\\u6613\\u8BFB\\u7684\\u8BED\\u6CD5\\u3002\\u8FD9\\u53EF\\u4EE5\\u4F7F\\u4EE3\\u7801\\u66F4\\u5BB9\\u6613\\u7F16\\u5199\\u548C\\u7EF4\\u62A4\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-typescript\",children:`// TypeScript example\nclass Person {\n  constructor(private name: string) {}\n\n  greet() {\n    console.log(\\`Hello, \\${this.name}\\`);\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7C7B\\u578B\\u5B89\\u5168\\u6027\\u548C\\u9519\\u8BEF\\u68C0\\u67E5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F8B\\u5982\\uFF0CTypeScript \\u5C06\\u9759\\u6001\\u7C7B\\u578B\\u68C0\\u67E5\\u6DFB\\u52A0\\u5230 JavaScript \\u4E2D\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u5728\\u7F16\\u8BD1\\u65F6\\u800C\\u4E0D\\u662F\\u8FD0\\u884C\\u65F6\\u6355\\u83B7\\u9519\\u8BEF\\u3002\\u8FD9\\u53EF\\u4EE5\\u4F7F\\u4EE3\\u7801\\u66F4\\u5065\\u58EE\\u3001\\u66F4\\u53EF\\u9760\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-typescript\",children:`// TypeScript example\nfunction add(a: number, b: number): number {\n  return a + b;\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u66F4\\u597D\\u7684\\u5DE5\\u5177\\u548C\\u7F16\\u8F91\\u5668\\u652F\\u6301\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7F16\\u8BD1\\u4E3A JavaScript \\u7684\\u8BED\\u8A00\\u901A\\u5E38\\u9644\\u5E26\\u589E\\u5F3A\\u7684\\u5DE5\\u5177\\u548C\\u7F16\\u8F91\\u5668\\u652F\\u6301\\uFF0C\\u4F8B\\u5982\\u81EA\\u52A8\\u5B8C\\u6210\\u3001\\u91CD\\u6784\\u5DE5\\u5177\\u548C\\u66F4\\u597D\\u7684\\u8C03\\u8BD5\\u529F\\u80FD\\u3002\\u8FD9\\u53EF\\u4EE5\\u63D0\\u9AD8\\u5F00\\u53D1\\u4EBA\\u5458\\u7684\\u5DE5\\u4F5C\\u6548\\u7387\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7528\\u7F16\\u8BD1\\u4E3A JavaScript \\u7684\\u8BED\\u8A00\\u7F16\\u5199 JavaScript \\u4EE3\\u7801\\u7684\\u7F3A\\u70B9\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u589E\\u52A0\\u4E86\\u6784\\u5EFA\\u6B65\\u9AA4\\u548C\\u590D\\u6742\\u6027\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528\\u7F16\\u8BD1\\u4E3A JavaScript \\u7684\\u8BED\\u8A00\\u4F1A\\u5728\\u5F00\\u53D1\\u8FC7\\u7A0B\\u4E2D\\u5F15\\u5165\\u989D\\u5916\\u7684\\u6784\\u5EFA\\u6B65\\u9AA4\\u3002\\u8FD9\\u4F1A\\u4F7F\\u6784\\u5EFA\\u6D41\\u7A0B\\u590D\\u6742\\u5316\\uFF0C\\u5E76\\u589E\\u52A0\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u770B\\u5230\\u66F4\\u6539\\u6240\\u9700\\u7684\\u65F6\\u95F4\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`// Example of a build configuration for TypeScript\n{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"module\": \"commonjs\",\n    \"outDir\": \"./dist\",\n    \"rootDir\": \"./src\",\n    \"strict\": true\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6F5C\\u5728\\u7684\\u6027\\u80FD\\u5F00\\u9500\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u867D\\u7136\\u7F16\\u8BD1\\u540E\\u7684 JavaScript \\u4EE3\\u7801\\u901A\\u5E38\\u7ECF\\u8FC7\\u4F18\\u5316\\uFF0C\\u4F46\\u5728\\u67D0\\u4E9B\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5176\\u6027\\u80FD\\u53EF\\u80FD\\u4E0D\\u5982\\u624B\\u5199\\u7684 JavaScript\\u3002\\u5982\\u679C\\u7F16\\u8BD1\\u5668\\u5F15\\u5165\\u4E0D\\u5FC5\\u8981\\u7684\\u62BD\\u8C61\\uFF0C\\u5C24\\u5176\\u5982\\u6B64\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u65B0\\u8BED\\u6CD5\\u7684\\u5B66\\u4E60\\u66F2\\u7EBF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F00\\u53D1\\u4EBA\\u5458\\u9700\\u8981\\u5B66\\u4E60\\u7F16\\u8BD1\\u4E3A JavaScript \\u7684\\u8BED\\u8A00\\u7684\\u65B0\\u8BED\\u6CD5\\u548C\\u7279\\u6027\\u3002\\u8FD9\\u53EF\\u80FD\\u6210\\u4E3A\\u8FDB\\u5165\\u7684\\u969C\\u788D\\uFF0C\\u5E76\\u4E14\\u53EF\\u80FD\\u9700\\u8981\\u989D\\u5916\\u7684\\u57F9\\u8BAD\\u548C\\u8D44\\u6E90\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.typescriptlang.org/docs/\",children:\"TypeScript \\u5B98\\u65B9\\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://coffeescript.org/\",children:\"CoffeeScript \\u5B98\\u65B9\\u6587\\u6863\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://babeljs.io/\",children:\"Babel\\uFF1AJavaScript \\u7F16\\u8BD1\\u5668\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html\",children:\"\\u6BD4\\u8F83 TypeScript \\u548C JavaScript\"})}),`\n`]})]})}function o(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(d,{...r})}):d(r)}return y(b);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css/en-US.json
index b61bfe0b6..04662a4dd 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var o=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),u=(t,e)=>{for(var n in e)o(t,n,{get:e[n],enumerable:!0})},i=(t,e,n,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of f(e))!p.call(t,s)&&s!==n&&o(t,s,{get:()=>e[s],enumerable:!(a=d(e,s))||a.enumerable});return t};var y=(t,e,n)=>(n=t!=null?m(g(t)):{},i(e||!t||!t.__esModule?o(n,\"default\",{value:t,enumerable:!0}):n,t)),b=t=>i(o({},\"__esModule\",{value:!0}),t);var c=w((M,h)=>{h.exports=_jsx_runtime});var v={};u(v,{default:()=>k,frontmatter:()=>x});var r=y(c()),x={title:'What are some of the \"gotchas\" for writing efficient CSS?'};function l(t){let e=Object.assign({p:\"p\",a:\"a\"},t.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.p,{children:\"Firstly, understand that browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector. Hence avoid key selectors that are tag and universal selectors. They match a large number of elements and browsers will have to do more work in determining if the parents do match.\"}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.a,{href:\"https://bem.info/\",children:\"BEM (Block Element Modifier)\"}),\" methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override.\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"Be aware of which CSS properties \",(0,r.jsx)(e.a,{href:\"https://csstriggers.com/\",children:\"trigger\"}),\" reflow, repaint, and compositing. Avoid writing styles that change the layout (trigger reflow) where possible.\"]})]})}function j(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,Object.assign({},t,{children:(0,r.jsx)(l,t)})):l(t)}var k=j;return b(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var u=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var n in e)s(t,n,{get:e[n],enumerable:!0})},i=(t,e,n,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of g(e))!w.call(t,o)&&o!==n&&s(t,o,{get:()=>e[o],enumerable:!(a=f(e,o))||a.enumerable});return t};var x=(t,e,n)=>(n=t!=null?d(p(t)):{},i(e||!t||!t.__esModule?s(n,\"default\",{value:t,enumerable:!0}):n,t)),b=t=>i(s({},\"__esModule\",{value:!0}),t);var c=u((M,h)=>{h.exports=_jsx_runtime});var v={};y(v,{default:()=>m,frontmatter:()=>k});var r=x(c()),k={title:'What are some of the \"gotchas\" for writing efficient CSS?'};function l(t){let e={a:\"a\",p:\"p\",...t.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.p,{children:\"Firstly, understand that browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector. Hence avoid key selectors that are tag and universal selectors. They match a large number of elements and browsers will have to do more work in determining if the parents do match.\"}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.a,{href:\"https://bem.info/\",children:\"BEM (Block Element Modifier)\"}),\" methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override.\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"Be aware of which CSS properties \",(0,r.jsx)(e.a,{href:\"https://csstriggers.com/\",children:\"trigger\"}),\" reflow, repaint, and compositing. Avoid writing styles that change the layout (trigger reflow) where possible.\"]})]})}function m(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,{...t,children:(0,r.jsx)(l,{...t})}):l(t)}return b(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css/pt-BR.json
index f998edc23..6d2659567 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),v=(a,e)=>{for(var r in e)t(a,r,{get:e[r],enumerable:!0})},i=(a,e,r,n)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!f.call(a,s)&&s!==r&&t(a,s,{get:()=>e[s],enumerable:!(n=u(e,s))||n.enumerable});return a};var q=(a,e,r)=>(r=a!=null?l(h(a)):{},i(e||!a||!a.__esModule?t(r,\"default\",{value:a,enumerable:!0}):r,a)),j=a=>i(t({},\"__esModule\",{value:!0}),a);var d=g((C,c)=>{c.exports=_jsx_runtime});var M={};v(M,{default:()=>_,frontmatter:()=>x});var o=q(d()),x={title:'Quais s\\xE3o algumas das \"armadilhas\" para escrever CSS eficiente?'};function m(a){let e=Object.assign({p:\"p\",a:\"a\"},a.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.p,{children:\"Primeiramente, entenda que os navegadores combinam seletores da direita (seletor-chave) para a esquerda. Os navegadores filtram elementos no DOM de acordo com o seletor-chave e percorrem seus elementos pais para determinar correspond\\xEAncias. Quanto menor o comprimento da cadeia de seletores, mais r\\xE1pido o navegador pode determinar se aquele elemento corresponde ao seletor. Portanto, evite seletores-chave que sejam seletores de tag ou universais. Eles correspondem a um grande n\\xFAmero de elementos e os navegadores ter\\xE3o que fazer mais trabalho para determinar se os pais correspondem.\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"A metodologia \",(0,o.jsx)(e.a,{href:\"https://bem.info/\",children:\"BEM (Block Element Modifier)\"}),\" recomenda que tudo tenha uma \\xFAnica classe e, quando voc\\xEA precisa de hierarquia, que isso seja incorporado ao nome da classe tamb\\xE9m, o que naturalmente torna o seletor eficiente e f\\xE1cil de substituir.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Esteja ciente de quais propriedades CSS \",(0,o.jsx)(e.a,{href:\"https://csstriggers.com/\",children:\"trigger\"}),\" reflow, repaint, e compositing. Evite escrever estilos que alteram o layout (fator reflow) quando poss\\xEDvel.\"]})]})}function b(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,Object.assign({},a,{children:(0,o.jsx)(m,a)})):m(a)}var _=b;return j(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),q=(a,e)=>{for(var r in e)t(a,r,{get:e[r],enumerable:!0})},i=(a,e,r,n)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of h(e))!g.call(a,s)&&s!==r&&t(a,s,{get:()=>e[s],enumerable:!(n=p(e,s))||n.enumerable});return a};var x=(a,e,r)=>(r=a!=null?u(f(a)):{},i(e||!a||!a.__esModule?t(r,\"default\",{value:a,enumerable:!0}):r,a)),j=a=>i(t({},\"__esModule\",{value:!0}),a);var c=v((E,d)=>{d.exports=_jsx_runtime});var M={};q(M,{default:()=>l,frontmatter:()=>_});var o=x(c()),_={title:'Quais s\\xE3o algumas das \"armadilhas\" para escrever CSS eficiente?'};function m(a){let e={a:\"a\",p:\"p\",...a.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.p,{children:\"Primeiramente, entenda que os navegadores combinam seletores da direita (seletor-chave) para a esquerda. Os navegadores filtram elementos no DOM de acordo com o seletor-chave e percorrem seus elementos pais para determinar correspond\\xEAncias. Quanto menor o comprimento da cadeia de seletores, mais r\\xE1pido o navegador pode determinar se aquele elemento corresponde ao seletor. Portanto, evite seletores-chave que sejam seletores de tag ou universais. Eles correspondem a um grande n\\xFAmero de elementos e os navegadores ter\\xE3o que fazer mais trabalho para determinar se os pais correspondem.\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"A metodologia \",(0,o.jsx)(e.a,{href:\"https://bem.info/\",children:\"BEM (Block Element Modifier)\"}),\" recomenda que tudo tenha uma \\xFAnica classe e, quando voc\\xEA precisa de hierarquia, que isso seja incorporado ao nome da classe tamb\\xE9m, o que naturalmente torna o seletor eficiente e f\\xE1cil de substituir.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Esteja ciente de quais propriedades CSS \",(0,o.jsx)(e.a,{href:\"https://csstriggers.com/\",children:\"trigger\"}),\" reflow, repaint, e compositing. Evite escrever estilos que alteram o layout (fator reflow) quando poss\\xEDvel.\"]})]})}function l(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,{...a,children:(0,o.jsx)(m,{...a})}):m(a)}return j(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css/zh-CN.json
index 97f766d73..e31a3466a 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var c=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var j=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),u=(n,t)=>{for(var r in t)c(n,r,{get:t[r],enumerable:!0})},i=(n,t,r,o)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let s of p(t))!x.call(n,s)&&s!==r&&c(n,s,{get:()=>t[s],enumerable:!(o=d(t,s))||o.enumerable});return n};var _=(n,t,r)=>(r=n!=null?l(f(n)):{},i(t||!n||!n.__esModule?c(r,\"default\",{value:n,enumerable:!0}):r,n)),g=n=>i(c({},\"__esModule\",{value:!0}),n);var m=j((O,a)=>{a.exports=_jsx_runtime});var b={};u(b,{default:()=>S,frontmatter:()=>M});var e=_(m()),M={title:\"\\u7F16\\u5199\\u9AD8\\u6548 CSS \\u65F6\\u9700\\u8981\\u6CE8\\u610F\\u54EA\\u4E9B\\u201C\\u9677\\u9631\\u201D\\uFF1F\"};function h(n){let t=Object.assign({p:\"p\",a:\"a\"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.p,{children:\"\\u9996\\u5148\\uFF0C\\u4E86\\u89E3\\u6D4F\\u89C8\\u5668\\u4ECE\\u6700\\u53F3\\u4FA7\\uFF08\\u5173\\u952E\\u9009\\u62E9\\u5668\\uFF09\\u5230\\u5DE6\\u4FA7\\u5339\\u914D\\u9009\\u62E9\\u5668\\u3002 \\u6D4F\\u89C8\\u5668\\u6839\\u636E\\u5173\\u952E\\u9009\\u62E9\\u5668\\u8FC7\\u6EE4 DOM \\u4E2D\\u7684\\u5143\\u7D20\\uFF0C\\u5E76\\u904D\\u5386\\u5176\\u7236\\u5143\\u7D20\\u4EE5\\u786E\\u5B9A\\u5339\\u914D\\u9879\\u3002 \\u9009\\u62E9\\u5668\\u94FE\\u7684\\u957F\\u5EA6\\u8D8A\\u77ED\\uFF0C\\u6D4F\\u89C8\\u5668\\u786E\\u5B9A\\u8BE5\\u5143\\u7D20\\u662F\\u5426\\u4E0E\\u9009\\u62E9\\u5668\\u5339\\u914D\\u7684\\u901F\\u5EA6\\u5C31\\u8D8A\\u5FEB\\u3002 \\u56E0\\u6B64\\uFF0C\\u907F\\u514D\\u4F7F\\u7528\\u6807\\u7B7E\\u548C\\u901A\\u7528\\u9009\\u62E9\\u5668\\u4F5C\\u4E3A\\u5173\\u952E\\u9009\\u62E9\\u5668\\u3002 \\u5B83\\u4EEC\\u5339\\u914D\\u5927\\u91CF\\u5143\\u7D20\\uFF0C\\u6D4F\\u89C8\\u5668\\u5C06\\u4E0D\\u5F97\\u4E0D\\u505A\\u66F4\\u591A\\u7684\\u5DE5\\u4F5C\\u6765\\u786E\\u5B9A\\u7236\\u5143\\u7D20\\u662F\\u5426\\u5339\\u914D\\u3002\"}),`\n`,(0,e.jsxs)(t.p,{children:[(0,e.jsx)(t.a,{href:\"https://bem.info/\",children:\"BEM (Block Element Modifier)\"}),\" \\u65B9\\u6CD5\\u5EFA\\u8BAE\\u6240\\u6709\\u5185\\u5BB9\\u90FD\\u4F7F\\u7528\\u5355\\u4E2A\\u7C7B\\uFF0C\\u5E76\\u4E14\\u5728\\u9700\\u8981\\u5C42\\u6B21\\u7ED3\\u6784\\u65F6\\uFF0C\\u5C06\\u5176\\u4E5F\\u878D\\u5165\\u5230\\u7C7B\\u7684\\u540D\\u79F0\\u4E2D\\uFF0C\\u8FD9\\u81EA\\u7136\\u4F7F\\u9009\\u62E9\\u5668\\u9AD8\\u6548\\u4E14\\u6613\\u4E8E\\u8986\\u76D6\\u3002\"]}),`\n`,(0,e.jsxs)(t.p,{children:[\"\\u6CE8\\u610F\\u54EA\\u4E9B CSS \\u5C5E\\u6027\\u4F1A\",(0,e.jsx)(t.a,{href:\"https://csstriggers.com/\",children:\"\\u89E6\\u53D1\"}),\"\\u56DE\\u6D41\\u3001\\u91CD\\u7ED8\\u548C\\u5408\\u6210\\u3002 \\u5C3D\\u53EF\\u80FD\\u907F\\u514D\\u7F16\\u5199\\u66F4\\u6539\\u5E03\\u5C40\\uFF08\\u89E6\\u53D1\\u56DE\\u6D41\\uFF09\\u7684\\u6837\\u5F0F\\u3002\"]})]})}function C(n={}){let{wrapper:t}=n.components||{};return t?(0,e.jsx)(t,Object.assign({},n,{children:(0,e.jsx)(h,n)})):h(n)}var S=C;return g(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var _=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),M=(n,t)=>{for(var r in t)c(n,r,{get:t[r],enumerable:!0})},i=(n,t,r,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let o of f(t))!u.call(n,o)&&o!==r&&c(n,o,{get:()=>t[o],enumerable:!(s=p(t,o))||s.enumerable});return n};var j=(n,t,r)=>(r=n!=null?d(x(n)):{},i(t||!n||!n.__esModule?c(r,\"default\",{value:n,enumerable:!0}):r,n)),g=n=>i(c({},\"__esModule\",{value:!0}),n);var m=_((B,a)=>{a.exports=_jsx_runtime});var S={};M(S,{default:()=>l,frontmatter:()=>C});var e=j(m()),C={title:\"\\u7F16\\u5199\\u9AD8\\u6548 CSS \\u65F6\\u9700\\u8981\\u6CE8\\u610F\\u54EA\\u4E9B\\u201C\\u9677\\u9631\\u201D\\uFF1F\"};function h(n){let t={a:\"a\",p:\"p\",...n.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.p,{children:\"\\u9996\\u5148\\uFF0C\\u4E86\\u89E3\\u6D4F\\u89C8\\u5668\\u4ECE\\u6700\\u53F3\\u4FA7\\uFF08\\u5173\\u952E\\u9009\\u62E9\\u5668\\uFF09\\u5230\\u5DE6\\u4FA7\\u5339\\u914D\\u9009\\u62E9\\u5668\\u3002 \\u6D4F\\u89C8\\u5668\\u6839\\u636E\\u5173\\u952E\\u9009\\u62E9\\u5668\\u8FC7\\u6EE4 DOM \\u4E2D\\u7684\\u5143\\u7D20\\uFF0C\\u5E76\\u904D\\u5386\\u5176\\u7236\\u5143\\u7D20\\u4EE5\\u786E\\u5B9A\\u5339\\u914D\\u9879\\u3002 \\u9009\\u62E9\\u5668\\u94FE\\u7684\\u957F\\u5EA6\\u8D8A\\u77ED\\uFF0C\\u6D4F\\u89C8\\u5668\\u786E\\u5B9A\\u8BE5\\u5143\\u7D20\\u662F\\u5426\\u4E0E\\u9009\\u62E9\\u5668\\u5339\\u914D\\u7684\\u901F\\u5EA6\\u5C31\\u8D8A\\u5FEB\\u3002 \\u56E0\\u6B64\\uFF0C\\u907F\\u514D\\u4F7F\\u7528\\u6807\\u7B7E\\u548C\\u901A\\u7528\\u9009\\u62E9\\u5668\\u4F5C\\u4E3A\\u5173\\u952E\\u9009\\u62E9\\u5668\\u3002 \\u5B83\\u4EEC\\u5339\\u914D\\u5927\\u91CF\\u5143\\u7D20\\uFF0C\\u6D4F\\u89C8\\u5668\\u5C06\\u4E0D\\u5F97\\u4E0D\\u505A\\u66F4\\u591A\\u7684\\u5DE5\\u4F5C\\u6765\\u786E\\u5B9A\\u7236\\u5143\\u7D20\\u662F\\u5426\\u5339\\u914D\\u3002\"}),`\n`,(0,e.jsxs)(t.p,{children:[(0,e.jsx)(t.a,{href:\"https://bem.info/\",children:\"BEM (Block Element Modifier)\"}),\" \\u65B9\\u6CD5\\u5EFA\\u8BAE\\u6240\\u6709\\u5185\\u5BB9\\u90FD\\u4F7F\\u7528\\u5355\\u4E2A\\u7C7B\\uFF0C\\u5E76\\u4E14\\u5728\\u9700\\u8981\\u5C42\\u6B21\\u7ED3\\u6784\\u65F6\\uFF0C\\u5C06\\u5176\\u4E5F\\u878D\\u5165\\u5230\\u7C7B\\u7684\\u540D\\u79F0\\u4E2D\\uFF0C\\u8FD9\\u81EA\\u7136\\u4F7F\\u9009\\u62E9\\u5668\\u9AD8\\u6548\\u4E14\\u6613\\u4E8E\\u8986\\u76D6\\u3002\"]}),`\n`,(0,e.jsxs)(t.p,{children:[\"\\u6CE8\\u610F\\u54EA\\u4E9B CSS \\u5C5E\\u6027\\u4F1A\",(0,e.jsx)(t.a,{href:\"https://csstriggers.com/\",children:\"\\u89E6\\u53D1\"}),\"\\u56DE\\u6D41\\u3001\\u91CD\\u7ED8\\u548C\\u5408\\u6210\\u3002 \\u5C3D\\u53EF\\u80FD\\u907F\\u514D\\u7F16\\u5199\\u66F4\\u6539\\u5E03\\u5C40\\uFF08\\u89E6\\u53D1\\u56DE\\u6D41\\uFF09\\u7684\\u6837\\u5F0F\\u3002\"]})]})}function l(n={}){let{wrapper:t}=n.components||{};return t?(0,e.jsx)(t,{...n,children:(0,e.jsx)(h,{...n})}):h(n)}return g(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-pitfalls-about-using-context-in-react/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-some-pitfalls-about-using-context-in-react/en-US.json
index a8311db6c..fce779b9b 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-pitfalls-about-using-context-in-react/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-pitfalls-about-using-context-in-react/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-are-some-pitfalls-about-using-context-in-react/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(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,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!g.call(t,a)&&a!==o&&r(t,a,{get:()=>e[a],enumerable:!(i=u(e,a))||i.enumerable});return t};var v=(t,e,o)=>(o=t!=null?h(m(t)):{},c(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),C=t=>c(r({},\"__esModule\",{value:!0}),t);var l=f((k,s)=>{s.exports=_jsx_runtime});var w={};x(w,{default:()=>R,frontmatter:()=>y});var n=v(l()),y={title:\"What are some pitfalls about using context in React?\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",code:\"code\",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.jsx)(e.p,{children:\"Using context in React can lead to performance issues if not managed properly. It can cause unnecessary re-renders of components that consume the context, even if the part of the context they use hasn't changed. Additionally, overusing context for state management can make the code harder to understand and maintain. It's important to use context sparingly and consider other state management solutions like Redux or Zustand for more complex state needs.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Pitfalls about using context in React\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Performance issues\"}),`\n`,(0,n.jsx)(e.p,{children:\"One of the main pitfalls of using context in React is the potential for performance issues. When the context value changes, all components that consume the context will re-render, even if they don't use the part of the context that changed. This can lead to unnecessary re-renders and degrade the performance of your application.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const MyContext = React.createContext();\n\nfunction ParentComponent() {\n  const [value, setValue] = React.useState(0);\n\n  return (\n    <MyContext.Provider value={value}>\n      <ChildComponent />\n    </MyContext.Provider>\n  );\n}\n\nfunction ChildComponent() {\n  const value = React.useContext(MyContext);\n  console.log('ChildComponent re-rendered');\n  return <div>{value}</div>;\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"ChildComponent\"}),\" will re-render every time the \",(0,n.jsx)(e.code,{children:\"value\"}),\" in \",(0,n.jsx)(e.code,{children:\"ParentComponent\"}),\" changes, even if \",(0,n.jsx)(e.code,{children:\"ChildComponent\"}),\" doesn't need to update.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Overusing context\"}),`\n`,(0,n.jsx)(e.p,{children:\"Using context for state management can make the code harder to understand and maintain. Context is best suited for global state that doesn't change frequently, such as theme settings or user authentication status. Overusing context for more complex state management can lead to a tangled and hard-to-follow codebase.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Debugging difficulties\"}),`\n`,(0,n.jsx)(e.p,{children:\"Debugging issues related to context can be challenging. Since context updates can trigger re-renders in multiple components, it can be difficult to trace the source of a bug or performance issue. This is especially true in larger applications with many context providers and consumers.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Lack of fine-grained control\"}),`\n`,(0,n.jsx)(e.p,{children:\"Context provides a way to pass data through the component tree without having to pass props down manually at every level. However, it lacks fine-grained control over which components should re-render when the context value changes. This can lead to performance bottlenecks if not managed carefully.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Alternatives to context\"}),`\n`,(0,n.jsx)(e.p,{children:\"For more complex state management needs, consider using other state management solutions like Redux, Zustand, or Recoil. These libraries provide more fine-grained control over state updates and can help avoid some of the pitfalls associated with using context.\"}),`\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://react.dev/learn/passing-data-deeply-with-context\",children:\"React Context\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/memo#skipping-re-rendering-when-props-are-unchanged\",children:\"React memo Performance Optimization\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://redux.js.org/\",children:\"Redux\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/pmndrs/zustand\",children:\"Zustand\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://recoiljs.org/\",children:\"Recoil\"})}),`\n`]})]})}function b(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var R=b;return C(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=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})},c=(t,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!f.call(t,a)&&a!==o&&r(t,a,{get:()=>e[a],enumerable:!(i=p(e,a))||i.enumerable});return t};var C=(t,e,o)=>(o=t!=null?u(g(t)):{},c(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),y=t=>c(r({},\"__esModule\",{value:!0}),t);var l=x((j,s)=>{s.exports=_jsx_runtime});var w={};v(w,{default:()=>h,frontmatter:()=>R});var n=C(l()),R={title:\"What are some pitfalls about using context in React?\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Using context in React can lead to performance issues if not managed properly. It can cause unnecessary re-renders of components that consume the context, even if the part of the context they use hasn't changed. Additionally, overusing context for state management can make the code harder to understand and maintain. It's important to use context sparingly and consider other state management solutions like Redux or Zustand for more complex state needs.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Pitfalls about using context in React\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Performance issues\"}),`\n`,(0,n.jsx)(e.p,{children:\"One of the main pitfalls of using context in React is the potential for performance issues. When the context value changes, all components that consume the context will re-render, even if they don't use the part of the context that changed. This can lead to unnecessary re-renders and degrade the performance of your application.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const MyContext = React.createContext();\n\nfunction ParentComponent() {\n  const [value, setValue] = React.useState(0);\n\n  return (\n    <MyContext.Provider value={value}>\n      <ChildComponent />\n    </MyContext.Provider>\n  );\n}\n\nfunction ChildComponent() {\n  const value = React.useContext(MyContext);\n  console.log('ChildComponent re-rendered');\n  return <div>{value}</div>;\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"ChildComponent\"}),\" will re-render every time the \",(0,n.jsx)(e.code,{children:\"value\"}),\" in \",(0,n.jsx)(e.code,{children:\"ParentComponent\"}),\" changes, even if \",(0,n.jsx)(e.code,{children:\"ChildComponent\"}),\" doesn't need to update.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Overusing context\"}),`\n`,(0,n.jsx)(e.p,{children:\"Using context for state management can make the code harder to understand and maintain. Context is best suited for global state that doesn't change frequently, such as theme settings or user authentication status. Overusing context for more complex state management can lead to a tangled and hard-to-follow codebase.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Debugging difficulties\"}),`\n`,(0,n.jsx)(e.p,{children:\"Debugging issues related to context can be challenging. Since context updates can trigger re-renders in multiple components, it can be difficult to trace the source of a bug or performance issue. This is especially true in larger applications with many context providers and consumers.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Lack of fine-grained control\"}),`\n`,(0,n.jsx)(e.p,{children:\"Context provides a way to pass data through the component tree without having to pass props down manually at every level. However, it lacks fine-grained control over which components should re-render when the context value changes. This can lead to performance bottlenecks if not managed carefully.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Alternatives to context\"}),`\n`,(0,n.jsx)(e.p,{children:\"For more complex state management needs, consider using other state management solutions like Redux, Zustand, or Recoil. These libraries provide more fine-grained control over state updates and can help avoid some of the pitfalls associated with using context.\"}),`\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://react.dev/learn/passing-data-deeply-with-context\",children:\"React Context\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/memo#skipping-re-rendering-when-props-are-unchanged\",children:\"React memo Performance Optimization\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://redux.js.org/\",children:\"Redux\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/pmndrs/zustand\",children:\"Zustand\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://recoiljs.org/\",children:\"Recoil\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return y(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-pitfalls-about-using-context-in-react/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-some-pitfalls-about-using-context-in-react/zh-CN.json
index f8dbbca2c..1e2df1d7d 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-pitfalls-about-using-context-in-react/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-pitfalls-about-using-context-in-react/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-are-some-pitfalls-about-using-context-in-react/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var m=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),R=(t,n)=>{for(var r in n)c(t,r,{get:n[r],enumerable:!0})},i=(t,n,r,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of C(n))!u.call(t,o)&&o!==r&&c(t,o,{get:()=>n[o],enumerable:!(h=x(n,o))||h.enumerable});return t};var f=(t,n,r)=>(r=t!=null?s(p(t)):{},i(n||!t||!t.__esModule?c(r,\"default\",{value:t,enumerable:!0}):r,t)),g=t=>i(c({},\"__esModule\",{value:!0}),t);var l=m((P,d)=>{d.exports=_jsx_runtime});var _={};R(_,{default:()=>M,frontmatter:()=>v});var e=f(l()),v={title:\"\\u4F7F\\u7528 React Context \\u65F6\\u6709\\u54EA\\u4E9B\\u9677\\u9631\\uFF1F\"};function a(t){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5982\\u679C\\u7BA1\\u7406\\u4E0D\\u5F53\\uFF0C\\u5728 React \\u4E2D\\u4F7F\\u7528 Context \\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u6027\\u80FD\\u95EE\\u9898\\u3002\\u5B83\\u53EF\\u80FD\\u5BFC\\u81F4\\u4F7F\\u7528 Context \\u7684\\u7EC4\\u4EF6\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\\uFF0C\\u5373\\u4F7F\\u5B83\\u4EEC\\u4F7F\\u7528\\u7684 Context \\u90E8\\u5206\\u6CA1\\u6709\\u6539\\u53D8\\u3002\\u6B64\\u5916\\uFF0C\\u8FC7\\u5EA6\\u4F7F\\u7528 Context \\u8FDB\\u884C\\u72B6\\u6001\\u7BA1\\u7406\\u4F1A\\u4F7F\\u4EE3\\u7801\\u66F4\\u96BE\\u7406\\u89E3\\u548C\\u7EF4\\u62A4\\u3002\\u8C28\\u614E\\u4F7F\\u7528 Context \\u5E76\\u8003\\u8651\\u4F7F\\u7528 Redux \\u6216 Zustand \\u7B49\\u5176\\u4ED6\\u72B6\\u6001\\u7BA1\\u7406\\u89E3\\u51B3\\u65B9\\u6848\\u6765\\u6EE1\\u8DB3\\u66F4\\u590D\\u6742\\u7684\\u72B6\\u6001\\u9700\\u6C42\\u975E\\u5E38\\u91CD\\u8981\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F7F\\u7528 React Context \\u7684\\u9677\\u9631\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6027\\u80FD\\u95EE\\u9898\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 React \\u4E2D\\u4F7F\\u7528 Context \\u7684\\u4E3B\\u8981\\u9677\\u9631\\u4E4B\\u4E00\\u662F\\u6F5C\\u5728\\u7684\\u6027\\u80FD\\u95EE\\u9898\\u3002\\u5F53 Context \\u503C\\u66F4\\u6539\\u65F6\\uFF0C\\u6240\\u6709\\u4F7F\\u7528 Context \\u7684\\u7EC4\\u4EF6\\u90FD\\u5C06\\u91CD\\u65B0\\u6E32\\u67D3\\uFF0C\\u5373\\u4F7F\\u5B83\\u4EEC\\u4E0D\\u4F7F\\u7528\\u5DF2\\u66F4\\u6539\\u7684 Context \\u90E8\\u5206\\u3002\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\\u5E76\\u964D\\u4F4E\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u6027\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`const MyContext = React.createContext();\n\nfunction ParentComponent() {\n  const [value, setValue] = React.useState(0);\n\n  return (\n    <MyContext.Provider value={value}>\n      <ChildComponent />\n    </MyContext.Provider>\n  );\n}\n\nfunction ChildComponent() {\n  const value = React.useContext(MyContext);\n  console.log('ChildComponent re-rendered');\n  return <div>{value}</div>;\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"ChildComponent\"}),\" \\u5C06\\u5728 \",(0,e.jsx)(n.code,{children:\"ParentComponent\"}),\" \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"value\"}),\" \\u6BCF\\u6B21\\u66F4\\u6539\\u65F6\\u91CD\\u65B0\\u6E32\\u67D3\\uFF0C\\u5373\\u4F7F \",(0,e.jsx)(n.code,{children:\"ChildComponent\"}),\" \\u4E0D\\u9700\\u8981\\u66F4\\u65B0\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8FC7\\u5EA6\\u4F7F\\u7528 Context\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528 Context \\u8FDB\\u884C\\u72B6\\u6001\\u7BA1\\u7406\\u4F1A\\u4F7F\\u4EE3\\u7801\\u66F4\\u96BE\\u7406\\u89E3\\u548C\\u7EF4\\u62A4\\u3002Context \\u6700\\u9002\\u5408\\u4E8E\\u4E0D\\u7ECF\\u5E38\\u66F4\\u6539\\u7684\\u5168\\u5C40\\u72B6\\u6001\\uFF0C\\u4F8B\\u5982\\u4E3B\\u9898\\u8BBE\\u7F6E\\u6216\\u7528\\u6237\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u72B6\\u6001\\u3002\\u8FC7\\u5EA6\\u4F7F\\u7528 Context \\u8FDB\\u884C\\u66F4\\u590D\\u6742\\u7684\\u72B6\\u6001\\u7BA1\\u7406\\u4F1A\\u5BFC\\u81F4\\u4EE3\\u7801\\u5E93\\u6DF7\\u4E71\\u4E14\\u96BE\\u4EE5\\u7406\\u89E3\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8C03\\u8BD5\\u56F0\\u96BE\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8C03\\u8BD5\\u4E0E Context \\u76F8\\u5173\\u7684\\u95EE\\u9898\\u53EF\\u80FD\\u5177\\u6709\\u6311\\u6218\\u6027\\u3002\\u7531\\u4E8E Context \\u66F4\\u65B0\\u53EF\\u80FD\\u4F1A\\u5728\\u591A\\u4E2A\\u7EC4\\u4EF6\\u4E2D\\u89E6\\u53D1\\u91CD\\u65B0\\u6E32\\u67D3\\uFF0C\\u56E0\\u6B64\\u5F88\\u96BE\\u8FFD\\u8E2A\\u9519\\u8BEF\\u6216\\u6027\\u80FD\\u95EE\\u9898\\u7684\\u6839\\u6E90\\u3002\\u5BF9\\u4E8E\\u5177\\u6709\\u8BB8\\u591A Context \\u63D0\\u4F9B\\u7A0B\\u5E8F\\u548C\\u4F7F\\u7528\\u8005\\u7684\\u8F83\\u5927\\u5E94\\u7528\\u7A0B\\u5E8F\\u6765\\u8BF4\\u5C24\\u5176\\u5982\\u6B64\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7F3A\\u4E4F\\u7EC6\\u7C92\\u5EA6\\u63A7\\u5236\"}),`\n`,(0,e.jsx)(n.p,{children:\"Context \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u5728\\u7EC4\\u4EF6\\u6811\\u4E2D\\u4F20\\u9012\\u6570\\u636E\\u7684\\u65B9\\u6CD5\\uFF0C\\u800C\\u65E0\\u9700\\u5728\\u6BCF\\u4E2A\\u7EA7\\u522B\\u624B\\u52A8\\u4F20\\u9012 props\\u3002\\u4F46\\u662F\\uFF0C\\u5B83\\u7F3A\\u4E4F\\u5BF9 Context \\u503C\\u66F4\\u6539\\u65F6\\u5E94\\u91CD\\u65B0\\u6E32\\u67D3\\u54EA\\u4E9B\\u7EC4\\u4EF6\\u7684\\u7EC6\\u7C92\\u5EA6\\u63A7\\u5236\\u3002\\u5982\\u679C\\u7BA1\\u7406\\u4E0D\\u5F53\\uFF0C\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u6027\\u80FD\\u74F6\\u9888\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Context \\u7684\\u66FF\\u4EE3\\u65B9\\u6848\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5BF9\\u4E8E\\u66F4\\u590D\\u6742\\u7684\\u72B6\\u6001\\u7BA1\\u7406\\u9700\\u6C42\\uFF0C\\u8BF7\\u8003\\u8651\\u4F7F\\u7528 Redux\\u3001Zustand \\u6216 Recoil \\u7B49\\u5176\\u4ED6\\u72B6\\u6001\\u7BA1\\u7406\\u89E3\\u51B3\\u65B9\\u6848\\u3002\\u8FD9\\u4E9B\\u5E93\\u63D0\\u4F9B\\u4E86\\u5BF9\\u72B6\\u6001\\u66F4\\u65B0\\u7684\\u66F4\\u7EC6\\u7C92\\u5EA6\\u63A7\\u5236\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u5E2E\\u52A9\\u907F\\u514D\\u4E0E\\u4F7F\\u7528 Context \\u76F8\\u5173\\u7684\\u4E00\\u4E9B\\u9677\\u9631\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/passing-data-deeply-with-context\",children:\"React Context\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react/memo#skipping-re-rendering-when-props-are-unchanged\",children:\"React memo Performance Optimization\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://redux.js.org/\",children:\"Redux\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://github.com/pmndrs/zustand\",children:\"Zustand\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://recoiljs.org/\",children:\"Recoil\"})}),`\n`]})]})}function j(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(a,t)})):a(t)}var M=j;return g(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var C=Object.create;var c=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var R=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),f=(t,n)=>{for(var r in n)c(t,r,{get:n[r],enumerable:!0})},d=(t,n,r,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of p(n))!m.call(t,o)&&o!==r&&c(t,o,{get:()=>n[o],enumerable:!(h=s(n,o))||h.enumerable});return t};var g=(t,n,r)=>(r=t!=null?C(u(t)):{},d(n||!t||!t.__esModule?c(r,\"default\",{value:t,enumerable:!0}):r,t)),v=t=>d(c({},\"__esModule\",{value:!0}),t);var l=R((y,i)=>{i.exports=_jsx_runtime});var M={};f(M,{default:()=>x,frontmatter:()=>j});var e=g(l()),j={title:\"\\u4F7F\\u7528 React Context \\u65F6\\u6709\\u54EA\\u4E9B\\u9677\\u9631\\uFF1F\"};function a(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5982\\u679C\\u7BA1\\u7406\\u4E0D\\u5F53\\uFF0C\\u5728 React \\u4E2D\\u4F7F\\u7528 Context \\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u6027\\u80FD\\u95EE\\u9898\\u3002\\u5B83\\u53EF\\u80FD\\u5BFC\\u81F4\\u4F7F\\u7528 Context \\u7684\\u7EC4\\u4EF6\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\\uFF0C\\u5373\\u4F7F\\u5B83\\u4EEC\\u4F7F\\u7528\\u7684 Context \\u90E8\\u5206\\u6CA1\\u6709\\u6539\\u53D8\\u3002\\u6B64\\u5916\\uFF0C\\u8FC7\\u5EA6\\u4F7F\\u7528 Context \\u8FDB\\u884C\\u72B6\\u6001\\u7BA1\\u7406\\u4F1A\\u4F7F\\u4EE3\\u7801\\u66F4\\u96BE\\u7406\\u89E3\\u548C\\u7EF4\\u62A4\\u3002\\u8C28\\u614E\\u4F7F\\u7528 Context \\u5E76\\u8003\\u8651\\u4F7F\\u7528 Redux \\u6216 Zustand \\u7B49\\u5176\\u4ED6\\u72B6\\u6001\\u7BA1\\u7406\\u89E3\\u51B3\\u65B9\\u6848\\u6765\\u6EE1\\u8DB3\\u66F4\\u590D\\u6742\\u7684\\u72B6\\u6001\\u9700\\u6C42\\u975E\\u5E38\\u91CD\\u8981\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F7F\\u7528 React Context \\u7684\\u9677\\u9631\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6027\\u80FD\\u95EE\\u9898\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 React \\u4E2D\\u4F7F\\u7528 Context \\u7684\\u4E3B\\u8981\\u9677\\u9631\\u4E4B\\u4E00\\u662F\\u6F5C\\u5728\\u7684\\u6027\\u80FD\\u95EE\\u9898\\u3002\\u5F53 Context \\u503C\\u66F4\\u6539\\u65F6\\uFF0C\\u6240\\u6709\\u4F7F\\u7528 Context \\u7684\\u7EC4\\u4EF6\\u90FD\\u5C06\\u91CD\\u65B0\\u6E32\\u67D3\\uFF0C\\u5373\\u4F7F\\u5B83\\u4EEC\\u4E0D\\u4F7F\\u7528\\u5DF2\\u66F4\\u6539\\u7684 Context \\u90E8\\u5206\\u3002\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\\u5E76\\u964D\\u4F4E\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u6027\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`const MyContext = React.createContext();\n\nfunction ParentComponent() {\n  const [value, setValue] = React.useState(0);\n\n  return (\n    <MyContext.Provider value={value}>\n      <ChildComponent />\n    </MyContext.Provider>\n  );\n}\n\nfunction ChildComponent() {\n  const value = React.useContext(MyContext);\n  console.log('ChildComponent re-rendered');\n  return <div>{value}</div>;\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"ChildComponent\"}),\" \\u5C06\\u5728 \",(0,e.jsx)(n.code,{children:\"ParentComponent\"}),\" \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"value\"}),\" \\u6BCF\\u6B21\\u66F4\\u6539\\u65F6\\u91CD\\u65B0\\u6E32\\u67D3\\uFF0C\\u5373\\u4F7F \",(0,e.jsx)(n.code,{children:\"ChildComponent\"}),\" \\u4E0D\\u9700\\u8981\\u66F4\\u65B0\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8FC7\\u5EA6\\u4F7F\\u7528 Context\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528 Context \\u8FDB\\u884C\\u72B6\\u6001\\u7BA1\\u7406\\u4F1A\\u4F7F\\u4EE3\\u7801\\u66F4\\u96BE\\u7406\\u89E3\\u548C\\u7EF4\\u62A4\\u3002Context \\u6700\\u9002\\u5408\\u4E8E\\u4E0D\\u7ECF\\u5E38\\u66F4\\u6539\\u7684\\u5168\\u5C40\\u72B6\\u6001\\uFF0C\\u4F8B\\u5982\\u4E3B\\u9898\\u8BBE\\u7F6E\\u6216\\u7528\\u6237\\u8EAB\\u4EFD\\u9A8C\\u8BC1\\u72B6\\u6001\\u3002\\u8FC7\\u5EA6\\u4F7F\\u7528 Context \\u8FDB\\u884C\\u66F4\\u590D\\u6742\\u7684\\u72B6\\u6001\\u7BA1\\u7406\\u4F1A\\u5BFC\\u81F4\\u4EE3\\u7801\\u5E93\\u6DF7\\u4E71\\u4E14\\u96BE\\u4EE5\\u7406\\u89E3\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8C03\\u8BD5\\u56F0\\u96BE\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8C03\\u8BD5\\u4E0E Context \\u76F8\\u5173\\u7684\\u95EE\\u9898\\u53EF\\u80FD\\u5177\\u6709\\u6311\\u6218\\u6027\\u3002\\u7531\\u4E8E Context \\u66F4\\u65B0\\u53EF\\u80FD\\u4F1A\\u5728\\u591A\\u4E2A\\u7EC4\\u4EF6\\u4E2D\\u89E6\\u53D1\\u91CD\\u65B0\\u6E32\\u67D3\\uFF0C\\u56E0\\u6B64\\u5F88\\u96BE\\u8FFD\\u8E2A\\u9519\\u8BEF\\u6216\\u6027\\u80FD\\u95EE\\u9898\\u7684\\u6839\\u6E90\\u3002\\u5BF9\\u4E8E\\u5177\\u6709\\u8BB8\\u591A Context \\u63D0\\u4F9B\\u7A0B\\u5E8F\\u548C\\u4F7F\\u7528\\u8005\\u7684\\u8F83\\u5927\\u5E94\\u7528\\u7A0B\\u5E8F\\u6765\\u8BF4\\u5C24\\u5176\\u5982\\u6B64\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7F3A\\u4E4F\\u7EC6\\u7C92\\u5EA6\\u63A7\\u5236\"}),`\n`,(0,e.jsx)(n.p,{children:\"Context \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u5728\\u7EC4\\u4EF6\\u6811\\u4E2D\\u4F20\\u9012\\u6570\\u636E\\u7684\\u65B9\\u6CD5\\uFF0C\\u800C\\u65E0\\u9700\\u5728\\u6BCF\\u4E2A\\u7EA7\\u522B\\u624B\\u52A8\\u4F20\\u9012 props\\u3002\\u4F46\\u662F\\uFF0C\\u5B83\\u7F3A\\u4E4F\\u5BF9 Context \\u503C\\u66F4\\u6539\\u65F6\\u5E94\\u91CD\\u65B0\\u6E32\\u67D3\\u54EA\\u4E9B\\u7EC4\\u4EF6\\u7684\\u7EC6\\u7C92\\u5EA6\\u63A7\\u5236\\u3002\\u5982\\u679C\\u7BA1\\u7406\\u4E0D\\u5F53\\uFF0C\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u6027\\u80FD\\u74F6\\u9888\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Context \\u7684\\u66FF\\u4EE3\\u65B9\\u6848\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5BF9\\u4E8E\\u66F4\\u590D\\u6742\\u7684\\u72B6\\u6001\\u7BA1\\u7406\\u9700\\u6C42\\uFF0C\\u8BF7\\u8003\\u8651\\u4F7F\\u7528 Redux\\u3001Zustand \\u6216 Recoil \\u7B49\\u5176\\u4ED6\\u72B6\\u6001\\u7BA1\\u7406\\u89E3\\u51B3\\u65B9\\u6848\\u3002\\u8FD9\\u4E9B\\u5E93\\u63D0\\u4F9B\\u4E86\\u5BF9\\u72B6\\u6001\\u66F4\\u65B0\\u7684\\u66F4\\u7EC6\\u7C92\\u5EA6\\u63A7\\u5236\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u5E2E\\u52A9\\u907F\\u514D\\u4E0E\\u4F7F\\u7528 Context \\u76F8\\u5173\\u7684\\u4E00\\u4E9B\\u9677\\u9631\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/passing-data-deeply-with-context\",children:\"React Context\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react/memo#skipping-re-rendering-when-props-are-unchanged\",children:\"React memo Performance Optimization\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://redux.js.org/\",children:\"Redux\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://github.com/pmndrs/zustand\",children:\"Zustand\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://recoiljs.org/\",children:\"Recoil\"})}),`\n`]})]})}function x(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(a,{...t})}):a(t)}return v(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-popular-javascript-testing-frameworks/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-some-popular-javascript-testing-frameworks/en-US.json
index 0a0180978..82d35e8b4 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-popular-javascript-testing-frameworks/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-popular-javascript-testing-frameworks/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-some-popular-javascript-testing-frameworks/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),b=(i,e)=>{for(var t in e)s(i,t,{get:e[t],enumerable:!0})},o=(i,e,t,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!g.call(i,r)&&r!==t&&s(i,r,{get:()=>e[r],enumerable:!(a=p(e,r))||a.enumerable});return i};var v=(i,e,t)=>(t=i!=null?h(m(i)):{},o(e||!i||!i.__esModule?s(t,\"default\",{value:i,enumerable:!0}):t,i)),y=i=>o(s({},\"__esModule\",{value:!0}),i);var c=f((J,l)=>{l.exports=_jsx_runtime});var I={};b(I,{default:()=>k,frontmatter:()=>w});var n=v(c()),w={title:\"What are some popular JavaScript testing frameworks?\"};function d(i){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",pre:\"pre\",code:\"code\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Some popular JavaScript testing frameworks include Jest, Mocha, Jasmine, and Cypress. Jest is known for its simplicity and integration with React. Mocha is highly flexible and often used with other libraries like Chai for assertions. Jasmine is a behavior-driven development framework that requires no additional libraries. Cypress is an end-to-end testing framework that provides a great developer experience.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Popular JavaScript testing frameworks\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Jest\"}),`\n`,(0,n.jsx)(e.p,{children:\"Jest is a testing framework developed by Facebook, primarily used for testing React applications. It is known for its simplicity and ease of use.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"It comes with a built-in test runner, assertion library, and mocking support\"}),`\n`,(0,n.jsx)(e.li,{children:\"It has a zero-configuration setup, making it easy to get started\"}),`\n`,(0,n.jsx)(e.li,{children:\"It provides features like snapshot testing and code coverage out of the box\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`test('adds 1 + 2 to equal 3', () => {\n  expect(1 + 2).toBe(3);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Mocha\"}),`\n`,(0,n.jsx)(e.p,{children:\"Mocha is a flexible testing framework that can be used with various assertion libraries like Chai. It is known for its extensive configuration options and support for asynchronous testing.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"It provides a simple and flexible API for writing tests\"}),`\n`,(0,n.jsx)(e.li,{children:\"It supports both BDD (Behavior-Driven Development) and TDD (Test-Driven Development) styles\"}),`\n`,(0,n.jsx)(e.li,{children:\"It can be easily integrated with other libraries and tools\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const assert = require('assert');\n\ndescribe('Array', function () {\n  describe('#indexOf()', function () {\n    it('should return -1 when the value is not present', function () {\n      assert.strictEqual([1, 2, 3].indexOf(4), -1);\n    });\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Jasmine\"}),`\n`,(0,n.jsx)(e.p,{children:\"Jasmine is a behavior-driven development framework that requires no additional libraries. It is known for its simplicity and ease of use.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"It provides a clean and readable syntax for writing tests\"}),`\n`,(0,n.jsx)(e.li,{children:\"It includes built-in assertion and mocking libraries\"}),`\n`,(0,n.jsx)(e.li,{children:\"It supports asynchronous testing\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`describe('A suite', function () {\n  it('contains a spec with an expectation', function () {\n    expect(true).toBe(true);\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Cypress\"}),`\n`,(0,n.jsx)(e.p,{children:\"Cypress is an end-to-end testing framework that provides a great developer experience. It is known for its fast and reliable tests.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"It provides a simple and intuitive API for writing tests\"}),`\n`,(0,n.jsx)(e.li,{children:\"It includes built-in support for assertions, mocking, and stubbing\"}),`\n`,(0,n.jsx)(e.li,{children:\"It provides real-time reloading and debugging capabilities\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`describe('My First Test', function () {\n  it('Visits the Kitchen Sink', function () {\n    cy.visit('https://example.cypress.io');\n    cy.contains('type').click();\n    cy.url().should('include', '/commands/actions');\n  });\n});\n`})}),`\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://jestjs.io/docs/getting-started\",children:\"Jest documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://mochajs.org/#getting-started\",children:\"Mocha documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jasmine.github.io/pages/getting_started.html\",children:\"Jasmine documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://docs.cypress.io/guides/overview/why-cypress\",children:\"Cypress documentation\"})}),`\n`]})]})}function x(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(d,i)})):d(i)}var k=x;return y(I);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),v=(i,e)=>{for(var t in e)s(i,t,{get:e[t],enumerable:!0})},o=(i,e,t,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!f.call(i,r)&&r!==t&&s(i,r,{get:()=>e[r],enumerable:!(a=u(e,r))||a.enumerable});return i};var y=(i,e,t)=>(t=i!=null?p(g(i)):{},o(e||!i||!i.__esModule?s(t,\"default\",{value:i,enumerable:!0}):t,i)),w=i=>o(s({},\"__esModule\",{value:!0}),i);var c=b((j,l)=>{l.exports=_jsx_runtime});var k={};v(k,{default:()=>h,frontmatter:()=>x});var n=y(c()),x={title:\"What are some popular JavaScript testing frameworks?\"};function d(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Some popular JavaScript testing frameworks include Jest, Mocha, Jasmine, and Cypress. Jest is known for its simplicity and integration with React. Mocha is highly flexible and often used with other libraries like Chai for assertions. Jasmine is a behavior-driven development framework that requires no additional libraries. Cypress is an end-to-end testing framework that provides a great developer experience.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Popular JavaScript testing frameworks\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Jest\"}),`\n`,(0,n.jsx)(e.p,{children:\"Jest is a testing framework developed by Facebook, primarily used for testing React applications. It is known for its simplicity and ease of use.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"It comes with a built-in test runner, assertion library, and mocking support\"}),`\n`,(0,n.jsx)(e.li,{children:\"It has a zero-configuration setup, making it easy to get started\"}),`\n`,(0,n.jsx)(e.li,{children:\"It provides features like snapshot testing and code coverage out of the box\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`test('adds 1 + 2 to equal 3', () => {\n  expect(1 + 2).toBe(3);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Mocha\"}),`\n`,(0,n.jsx)(e.p,{children:\"Mocha is a flexible testing framework that can be used with various assertion libraries like Chai. It is known for its extensive configuration options and support for asynchronous testing.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"It provides a simple and flexible API for writing tests\"}),`\n`,(0,n.jsx)(e.li,{children:\"It supports both BDD (Behavior-Driven Development) and TDD (Test-Driven Development) styles\"}),`\n`,(0,n.jsx)(e.li,{children:\"It can be easily integrated with other libraries and tools\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const assert = require('assert');\n\ndescribe('Array', function () {\n  describe('#indexOf()', function () {\n    it('should return -1 when the value is not present', function () {\n      assert.strictEqual([1, 2, 3].indexOf(4), -1);\n    });\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Jasmine\"}),`\n`,(0,n.jsx)(e.p,{children:\"Jasmine is a behavior-driven development framework that requires no additional libraries. It is known for its simplicity and ease of use.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"It provides a clean and readable syntax for writing tests\"}),`\n`,(0,n.jsx)(e.li,{children:\"It includes built-in assertion and mocking libraries\"}),`\n`,(0,n.jsx)(e.li,{children:\"It supports asynchronous testing\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`describe('A suite', function () {\n  it('contains a spec with an expectation', function () {\n    expect(true).toBe(true);\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Cypress\"}),`\n`,(0,n.jsx)(e.p,{children:\"Cypress is an end-to-end testing framework that provides a great developer experience. It is known for its fast and reliable tests.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"It provides a simple and intuitive API for writing tests\"}),`\n`,(0,n.jsx)(e.li,{children:\"It includes built-in support for assertions, mocking, and stubbing\"}),`\n`,(0,n.jsx)(e.li,{children:\"It provides real-time reloading and debugging capabilities\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`describe('My First Test', function () {\n  it('Visits the Kitchen Sink', function () {\n    cy.visit('https://example.cypress.io');\n    cy.contains('type').click();\n    cy.url().should('include', '/commands/actions');\n  });\n});\n`})}),`\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://jestjs.io/docs/getting-started\",children:\"Jest documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://mochajs.org/#getting-started\",children:\"Mocha documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jasmine.github.io/pages/getting_started.html\",children:\"Jasmine documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://docs.cypress.io/guides/overview/why-cypress\",children:\"Cypress documentation\"})}),`\n`]})]})}function h(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(d,{...i})}):d(i)}return w(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-popular-javascript-testing-frameworks/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-some-popular-javascript-testing-frameworks/zh-CN.json
index bd0e931b4..327ec985a 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-popular-javascript-testing-frameworks/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-popular-javascript-testing-frameworks/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-some-popular-javascript-testing-frameworks/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var o=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),y=(i,n)=>{for(var c in n)r(i,c,{get:n[c],enumerable:!0})},l=(i,n,c,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of u(n))!g.call(i,t)&&t!==c&&r(i,t,{get:()=>n[t],enumerable:!(s=p(n,t))||s.enumerable});return i};var j=(i,n,c)=>(c=i!=null?o(m(i)):{},l(n||!i||!i.__esModule?r(c,\"default\",{value:i,enumerable:!0}):c,i)),x=i=>l(r({},\"__esModule\",{value:!0}),i);var a=f((v,h)=>{h.exports=_jsx_runtime});var b={};y(b,{default:()=>M,frontmatter:()=>J});var e=j(a()),J={title:\"\\u6709\\u54EA\\u4E9B\\u6D41\\u884C\\u7684 JavaScript \\u6D4B\\u8BD5\\u6846\\u67B6\\uFF1F\"};function d(i){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",pre:\"pre\",code:\"code\",a:\"a\"},i.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E00\\u4E9B\\u6D41\\u884C\\u7684 JavaScript \\u6D4B\\u8BD5\\u6846\\u67B6\\u5305\\u62EC Jest\\u3001Mocha\\u3001Jasmine \\u548C Cypress\\u3002Jest \\u4EE5\\u5176\\u7B80\\u5355\\u6027\\u548C\\u4E0E React \\u7684\\u96C6\\u6210\\u800C\\u95FB\\u540D\\u3002Mocha \\u975E\\u5E38\\u7075\\u6D3B\\uFF0C\\u901A\\u5E38\\u4E0E\\u5176\\u4ED6\\u5E93\\uFF08\\u5982 Chai\\uFF09\\u4E00\\u8D77\\u7528\\u4E8E\\u65AD\\u8A00\\u3002Jasmine \\u662F\\u4E00\\u4E2A\\u884C\\u4E3A\\u9A71\\u52A8\\u5F00\\u53D1\\u6846\\u67B6\\uFF0C\\u4E0D\\u9700\\u8981\\u989D\\u5916\\u7684\\u5E93\\u3002Cypress \\u662F\\u4E00\\u4E2A\\u7AEF\\u5230\\u7AEF\\u6D4B\\u8BD5\\u6846\\u67B6\\uFF0C\\u63D0\\u4F9B\\u51FA\\u8272\\u7684\\u5F00\\u53D1\\u8005\\u4F53\\u9A8C\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u6D41\\u884C\\u7684 JavaScript \\u6D4B\\u8BD5\\u6846\\u67B6\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Jest\"}),`\n`,(0,e.jsx)(n.p,{children:\"Jest \\u662F Facebook \\u5F00\\u53D1\\u7684\\u6D4B\\u8BD5\\u6846\\u67B6\\uFF0C\\u4E3B\\u8981\\u7528\\u4E8E\\u6D4B\\u8BD5 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\\u5B83\\u4EE5\\u5176\\u7B80\\u5355\\u6027\\u548C\\u6613\\u7528\\u6027\\u800C\\u95FB\\u540D\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u81EA\\u5E26\\u5185\\u7F6E\\u7684\\u6D4B\\u8BD5\\u8FD0\\u884C\\u5668\\u3001\\u65AD\\u8A00\\u5E93\\u548C\\u6A21\\u62DF\\u652F\\u6301\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u7684\\u8BBE\\u7F6E\\u65E0\\u9700\\u914D\\u7F6E\\uFF0C\\u6613\\u4E8E\\u4E0A\\u624B\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u63D0\\u4F9B\\u4E86\\u5FEB\\u7167\\u6D4B\\u8BD5\\u548C\\u5F00\\u7BB1\\u5373\\u7528\\u7684\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u7B49\\u529F\\u80FD\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`test('adds 1 + 2 to equal 3', () => {\n  expect(1 + 2).toBe(3);\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Mocha\"}),`\n`,(0,e.jsx)(n.p,{children:\"Mocha \\u662F\\u4E00\\u4E2A\\u7075\\u6D3B\\u7684\\u6D4B\\u8BD5\\u6846\\u67B6\\uFF0C\\u53EF\\u4EE5\\u4E0E\\u5404\\u79CD\\u65AD\\u8A00\\u5E93\\uFF08\\u5982 Chai\\uFF09\\u4E00\\u8D77\\u4F7F\\u7528\\u3002\\u5B83\\u4EE5\\u5176\\u5E7F\\u6CDB\\u7684\\u914D\\u7F6E\\u9009\\u9879\\u548C\\u5BF9\\u5F02\\u6B65\\u6D4B\\u8BD5\\u7684\\u652F\\u6301\\u800C\\u95FB\\u540D\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u7B80\\u5355\\u800C\\u7075\\u6D3B\\u7684 API \\u7528\\u4E8E\\u7F16\\u5199\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u652F\\u6301 BDD\\uFF08\\u884C\\u4E3A\\u9A71\\u52A8\\u5F00\\u53D1\\uFF09\\u548C TDD\\uFF08\\u6D4B\\u8BD5\\u9A71\\u52A8\\u5F00\\u53D1\\uFF09\\u98CE\\u683C\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u53EF\\u4EE5\\u8F7B\\u677E\\u5730\\u4E0E\\u5176\\u4ED6\\u5E93\\u548C\\u5DE5\\u5177\\u96C6\\u6210\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const assert = require('assert');\n\ndescribe('Array', function () {\n  describe('#indexOf()', function () {\n    it('should return -1 when the value is not present', function () {\n      assert.strictEqual([1, 2, 3].indexOf(4), -1);\n    });\n  });\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Jasmine\"}),`\n`,(0,e.jsx)(n.p,{children:\"Jasmine \\u662F\\u4E00\\u4E2A\\u884C\\u4E3A\\u9A71\\u52A8\\u5F00\\u53D1\\u6846\\u67B6\\uFF0C\\u4E0D\\u9700\\u8981\\u989D\\u5916\\u7684\\u5E93\\u3002\\u5B83\\u4EE5\\u5176\\u7B80\\u5355\\u6027\\u548C\\u6613\\u7528\\u6027\\u800C\\u95FB\\u540D\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u4E3A\\u7F16\\u5199\\u6D4B\\u8BD5\\u63D0\\u4F9B\\u4E86\\u6E05\\u6670\\u6613\\u8BFB\\u7684\\u8BED\\u6CD5\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u5305\\u62EC\\u5185\\u7F6E\\u7684\\u65AD\\u8A00\\u548C\\u6A21\\u62DF\\u5E93\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u652F\\u6301\\u5F02\\u6B65\\u6D4B\\u8BD5\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`describe('A suite', function () {\n  it('contains a spec with an expectation', function () {\n    expect(true).toBe(true);\n  });\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Cypress\"}),`\n`,(0,e.jsx)(n.p,{children:\"Cypress \\u662F\\u4E00\\u4E2A\\u7AEF\\u5230\\u7AEF\\u6D4B\\u8BD5\\u6846\\u67B6\\uFF0C\\u63D0\\u4F9B\\u51FA\\u8272\\u7684\\u5F00\\u53D1\\u8005\\u4F53\\u9A8C\\u3002\\u5B83\\u4EE5\\u5176\\u5FEB\\u901F\\u53EF\\u9760\\u7684\\u6D4B\\u8BD5\\u800C\\u95FB\\u540D\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u4E3A\\u7F16\\u5199\\u6D4B\\u8BD5\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u7B80\\u5355\\u76F4\\u89C2\\u7684 API\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u5305\\u62EC\\u5BF9\\u65AD\\u8A00\\u3001\\u6A21\\u62DF\\u548C\\u5B58\\u6839\\u7684\\u5185\\u7F6E\\u652F\\u6301\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u63D0\\u4F9B\\u5B9E\\u65F6\\u91CD\\u65B0\\u52A0\\u8F7D\\u548C\\u8C03\\u8BD5\\u529F\\u80FD\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`describe('My First Test', function () {\n  it('Visits the Kitchen Sink', function () {\n    cy.visit('https://example.cypress.io');\n    cy.contains('type').click();\n    cy.url().should('include', '/commands/actions');\n  });\n});\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://jestjs.io/docs/getting-started\",children:\"Jest documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://mochajs.org/#getting-started\",children:\"Mocha documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://jasmine.github.io/pages/getting_started.html\",children:\"Jasmine documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://docs.cypress.io/guides/overview/why-cypress\",children:\"Cypress documentation\"})}),`\n`]})]})}function C(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,Object.assign({},i,{children:(0,e.jsx)(d,i)})):d(i)}var M=C;return x(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),x=(i,n)=>{for(var c in n)r(i,c,{get:n[c],enumerable:!0})},l=(i,n,c,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of m(n))!f.call(i,t)&&t!==c&&r(i,t,{get:()=>n[t],enumerable:!(s=u(n,t))||s.enumerable});return i};var j=(i,n,c)=>(c=i!=null?p(g(i)):{},l(n||!i||!i.__esModule?r(c,\"default\",{value:i,enumerable:!0}):c,i)),J=i=>l(r({},\"__esModule\",{value:!0}),i);var d=y((v,h)=>{h.exports=_jsx_runtime});var M={};x(M,{default:()=>o,frontmatter:()=>C});var e=j(d()),C={title:\"\\u6709\\u54EA\\u4E9B\\u6D41\\u884C\\u7684 JavaScript \\u6D4B\\u8BD5\\u6846\\u67B6\\uFF1F\"};function a(i){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...i.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E00\\u4E9B\\u6D41\\u884C\\u7684 JavaScript \\u6D4B\\u8BD5\\u6846\\u67B6\\u5305\\u62EC Jest\\u3001Mocha\\u3001Jasmine \\u548C Cypress\\u3002Jest \\u4EE5\\u5176\\u7B80\\u5355\\u6027\\u548C\\u4E0E React \\u7684\\u96C6\\u6210\\u800C\\u95FB\\u540D\\u3002Mocha \\u975E\\u5E38\\u7075\\u6D3B\\uFF0C\\u901A\\u5E38\\u4E0E\\u5176\\u4ED6\\u5E93\\uFF08\\u5982 Chai\\uFF09\\u4E00\\u8D77\\u7528\\u4E8E\\u65AD\\u8A00\\u3002Jasmine \\u662F\\u4E00\\u4E2A\\u884C\\u4E3A\\u9A71\\u52A8\\u5F00\\u53D1\\u6846\\u67B6\\uFF0C\\u4E0D\\u9700\\u8981\\u989D\\u5916\\u7684\\u5E93\\u3002Cypress \\u662F\\u4E00\\u4E2A\\u7AEF\\u5230\\u7AEF\\u6D4B\\u8BD5\\u6846\\u67B6\\uFF0C\\u63D0\\u4F9B\\u51FA\\u8272\\u7684\\u5F00\\u53D1\\u8005\\u4F53\\u9A8C\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u6D41\\u884C\\u7684 JavaScript \\u6D4B\\u8BD5\\u6846\\u67B6\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Jest\"}),`\n`,(0,e.jsx)(n.p,{children:\"Jest \\u662F Facebook \\u5F00\\u53D1\\u7684\\u6D4B\\u8BD5\\u6846\\u67B6\\uFF0C\\u4E3B\\u8981\\u7528\\u4E8E\\u6D4B\\u8BD5 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\\u5B83\\u4EE5\\u5176\\u7B80\\u5355\\u6027\\u548C\\u6613\\u7528\\u6027\\u800C\\u95FB\\u540D\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u81EA\\u5E26\\u5185\\u7F6E\\u7684\\u6D4B\\u8BD5\\u8FD0\\u884C\\u5668\\u3001\\u65AD\\u8A00\\u5E93\\u548C\\u6A21\\u62DF\\u652F\\u6301\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u7684\\u8BBE\\u7F6E\\u65E0\\u9700\\u914D\\u7F6E\\uFF0C\\u6613\\u4E8E\\u4E0A\\u624B\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u63D0\\u4F9B\\u4E86\\u5FEB\\u7167\\u6D4B\\u8BD5\\u548C\\u5F00\\u7BB1\\u5373\\u7528\\u7684\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u7B49\\u529F\\u80FD\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`test('adds 1 + 2 to equal 3', () => {\n  expect(1 + 2).toBe(3);\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Mocha\"}),`\n`,(0,e.jsx)(n.p,{children:\"Mocha \\u662F\\u4E00\\u4E2A\\u7075\\u6D3B\\u7684\\u6D4B\\u8BD5\\u6846\\u67B6\\uFF0C\\u53EF\\u4EE5\\u4E0E\\u5404\\u79CD\\u65AD\\u8A00\\u5E93\\uFF08\\u5982 Chai\\uFF09\\u4E00\\u8D77\\u4F7F\\u7528\\u3002\\u5B83\\u4EE5\\u5176\\u5E7F\\u6CDB\\u7684\\u914D\\u7F6E\\u9009\\u9879\\u548C\\u5BF9\\u5F02\\u6B65\\u6D4B\\u8BD5\\u7684\\u652F\\u6301\\u800C\\u95FB\\u540D\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u7B80\\u5355\\u800C\\u7075\\u6D3B\\u7684 API \\u7528\\u4E8E\\u7F16\\u5199\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u652F\\u6301 BDD\\uFF08\\u884C\\u4E3A\\u9A71\\u52A8\\u5F00\\u53D1\\uFF09\\u548C TDD\\uFF08\\u6D4B\\u8BD5\\u9A71\\u52A8\\u5F00\\u53D1\\uFF09\\u98CE\\u683C\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u53EF\\u4EE5\\u8F7B\\u677E\\u5730\\u4E0E\\u5176\\u4ED6\\u5E93\\u548C\\u5DE5\\u5177\\u96C6\\u6210\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const assert = require('assert');\n\ndescribe('Array', function () {\n  describe('#indexOf()', function () {\n    it('should return -1 when the value is not present', function () {\n      assert.strictEqual([1, 2, 3].indexOf(4), -1);\n    });\n  });\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Jasmine\"}),`\n`,(0,e.jsx)(n.p,{children:\"Jasmine \\u662F\\u4E00\\u4E2A\\u884C\\u4E3A\\u9A71\\u52A8\\u5F00\\u53D1\\u6846\\u67B6\\uFF0C\\u4E0D\\u9700\\u8981\\u989D\\u5916\\u7684\\u5E93\\u3002\\u5B83\\u4EE5\\u5176\\u7B80\\u5355\\u6027\\u548C\\u6613\\u7528\\u6027\\u800C\\u95FB\\u540D\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u4E3A\\u7F16\\u5199\\u6D4B\\u8BD5\\u63D0\\u4F9B\\u4E86\\u6E05\\u6670\\u6613\\u8BFB\\u7684\\u8BED\\u6CD5\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u5305\\u62EC\\u5185\\u7F6E\\u7684\\u65AD\\u8A00\\u548C\\u6A21\\u62DF\\u5E93\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u652F\\u6301\\u5F02\\u6B65\\u6D4B\\u8BD5\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`describe('A suite', function () {\n  it('contains a spec with an expectation', function () {\n    expect(true).toBe(true);\n  });\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Cypress\"}),`\n`,(0,e.jsx)(n.p,{children:\"Cypress \\u662F\\u4E00\\u4E2A\\u7AEF\\u5230\\u7AEF\\u6D4B\\u8BD5\\u6846\\u67B6\\uFF0C\\u63D0\\u4F9B\\u51FA\\u8272\\u7684\\u5F00\\u53D1\\u8005\\u4F53\\u9A8C\\u3002\\u5B83\\u4EE5\\u5176\\u5FEB\\u901F\\u53EF\\u9760\\u7684\\u6D4B\\u8BD5\\u800C\\u95FB\\u540D\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u4E3A\\u7F16\\u5199\\u6D4B\\u8BD5\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u7B80\\u5355\\u76F4\\u89C2\\u7684 API\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u5305\\u62EC\\u5BF9\\u65AD\\u8A00\\u3001\\u6A21\\u62DF\\u548C\\u5B58\\u6839\\u7684\\u5185\\u7F6E\\u652F\\u6301\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u63D0\\u4F9B\\u5B9E\\u65F6\\u91CD\\u65B0\\u52A0\\u8F7D\\u548C\\u8C03\\u8BD5\\u529F\\u80FD\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`describe('My First Test', function () {\n  it('Visits the Kitchen Sink', function () {\n    cy.visit('https://example.cypress.io');\n    cy.contains('type').click();\n    cy.url().should('include', '/commands/actions');\n  });\n});\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://jestjs.io/docs/getting-started\",children:\"Jest documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://mochajs.org/#getting-started\",children:\"Mocha documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://jasmine.github.io/pages/getting_started.html\",children:\"Jasmine documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://docs.cypress.io/guides/overview/why-cypress\",children:\"Cypress documentation\"})}),`\n`]})]})}function o(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,{...i,children:(0,e.jsx)(a,{...i})}):a(i)}return J(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-react-anti-patterns/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-some-react-anti-patterns/en-US.json
index 4c316e6f3..1ad305005 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-react-anti-patterns/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-react-anti-patterns/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-are-some-react-anti-patterns/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var r in e)a(t,r,{get:e[r],enumerable:!0})},o=(t,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!g.call(t,i)&&i!==r&&a(t,i,{get:()=>e[i],enumerable:!(c=p(e,i))||c.enumerable});return t};var y=(t,e,r)=>(r=t!=null?h(m(t)):{},o(e||!t||!t.__esModule?a(r,\"default\",{value:t,enumerable:!0}):r,t)),x=t=>o(a({},\"__esModule\",{value:!0}),t);var s=f((b,l)=>{l.exports=_jsx_runtime});var j={};v(j,{default:()=>D,frontmatter:()=>k});var n=y(s()),k={title:\"What are some React anti-patterns?\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"React anti-patterns are practices that can lead to inefficient, hard-to-maintain, or buggy code. Some common anti-patterns include:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Mutating state directly instead of using \",(0,n.jsx)(e.code,{children:\"setState\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"componentWillMount\"}),\" for data fetching\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Overusing \",(0,n.jsx)(e.code,{children:\"componentWillReceiveProps\"})]}),`\n`,(0,n.jsx)(e.li,{children:\"Not using keys in lists\"}),`\n`,(0,n.jsx)(e.li,{children:\"Overusing inline functions in render\"}),`\n`,(0,n.jsx)(e.li,{children:\"Deeply nested state\"}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Common React anti-patterns\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Mutating state directly\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Directly mutating the state can lead to unexpected behavior and bugs. Always use \",(0,n.jsx)(e.code,{children:\"setState\"}),\" to update the state.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Anti-pattern\nthis.state.count = 1;\n\n// Correct approach\nthis.setState({ count: 1 });\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"componentWillMount\"}),\" for data fetching\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"componentWillMount\"}),\" is deprecated and should not be used for data fetching. Use \",(0,n.jsx)(e.code,{children:\"componentDidMount\"}),\" instead.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Anti-pattern\ncomponentWillMount() {\n  fetchData();\n}\n\n// Correct approach\ncomponentDidMount() {\n  fetchData();\n}\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Overusing \",(0,n.jsx)(e.code,{children:\"componentWillReceiveProps\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"componentWillReceiveProps\"}),\" is deprecated. Use \",(0,n.jsx)(e.code,{children:\"getDerivedStateFromProps\"}),\" or \",(0,n.jsx)(e.code,{children:\"componentDidUpdate\"}),\" instead.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Anti-pattern\ncomponentWillReceiveProps(nextProps) {\n  if (nextProps.value !== this.props.value) {\n    this.setState({ value: nextProps.value });\n  }\n}\n\n// Correct approach\nstatic getDerivedStateFromProps(nextProps, prevState) {\n  if (nextProps.value !== prevState.value) {\n    return { value: nextProps.value };\n  }\n  return null;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Not using keys in lists\"}),`\n`,(0,n.jsx)(e.p,{children:\"Keys help React identify which items have changed, are added, or are removed. Not using keys can lead to inefficient rendering.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Anti-pattern\nconst listItems = items.map((item) => <li>{item}</li>);\n\n// Correct approach\nconst listItems = items.map((item) => <li key={item.id}>{item}</li>);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Overusing inline functions in render\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Defining functions inside the \",(0,n.jsx)(e.code,{children:\"render\"}),\" method can lead to performance issues because a new function is created on every render.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Anti-pattern\nrender() {\n  return <button onClick={() => this.handleClick()}>Click me</button>;\n}\n\n// Correct approach\nrender() {\n  return <button onClick={this.handleClick}>Click me</button>;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Deeply nested state\"}),`\n`,(0,n.jsx)(e.p,{children:\"Deeply nested state can make state management complex and error-prone. Flatten the state structure when possible.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Anti-pattern\nthis.state = {\n  user: {\n    profile: {\n      name: 'John',\n      age: 30,\n    },\n  },\n};\n\n// Correct approach\nthis.state = {\n  userName: 'John',\n  userAge: 30,\n};\n`})}),`\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://react.dev/learn/state-a-components-memory\",children:\"React documentation on state\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/rendering-lists#why-does-react-need-keys\",children:\"React documentation on lists and keys\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/hooks\",children:\"React documentation on hooks\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/memo\",children:\"React documentation on memo optimizing performance\"})}),`\n`]})]})}function C(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var D=C;return x(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var r in e)a(t,r,{get:e[r],enumerable:!0})},o=(t,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!f.call(t,i)&&i!==r&&a(t,i,{get:()=>e[i],enumerable:!(c=u(e,i))||c.enumerable});return t};var x=(t,e,r)=>(r=t!=null?p(g(t)):{},o(e||!t||!t.__esModule?a(r,\"default\",{value:t,enumerable:!0}):r,t)),k=t=>o(a({},\"__esModule\",{value:!0}),t);var s=v((P,l)=>{l.exports=_jsx_runtime});var D={};y(D,{default:()=>h,frontmatter:()=>C});var n=x(s()),C={title:\"What are some React anti-patterns?\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"React anti-patterns are practices that can lead to inefficient, hard-to-maintain, or buggy code. Some common anti-patterns include:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Mutating state directly instead of using \",(0,n.jsx)(e.code,{children:\"setState\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"componentWillMount\"}),\" for data fetching\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Overusing \",(0,n.jsx)(e.code,{children:\"componentWillReceiveProps\"})]}),`\n`,(0,n.jsx)(e.li,{children:\"Not using keys in lists\"}),`\n`,(0,n.jsx)(e.li,{children:\"Overusing inline functions in render\"}),`\n`,(0,n.jsx)(e.li,{children:\"Deeply nested state\"}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Common React anti-patterns\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Mutating state directly\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Directly mutating the state can lead to unexpected behavior and bugs. Always use \",(0,n.jsx)(e.code,{children:\"setState\"}),\" to update the state.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Anti-pattern\nthis.state.count = 1;\n\n// Correct approach\nthis.setState({ count: 1 });\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"componentWillMount\"}),\" for data fetching\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"componentWillMount\"}),\" is deprecated and should not be used for data fetching. Use \",(0,n.jsx)(e.code,{children:\"componentDidMount\"}),\" instead.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Anti-pattern\ncomponentWillMount() {\n  fetchData();\n}\n\n// Correct approach\ncomponentDidMount() {\n  fetchData();\n}\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Overusing \",(0,n.jsx)(e.code,{children:\"componentWillReceiveProps\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"componentWillReceiveProps\"}),\" is deprecated. Use \",(0,n.jsx)(e.code,{children:\"getDerivedStateFromProps\"}),\" or \",(0,n.jsx)(e.code,{children:\"componentDidUpdate\"}),\" instead.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Anti-pattern\ncomponentWillReceiveProps(nextProps) {\n  if (nextProps.value !== this.props.value) {\n    this.setState({ value: nextProps.value });\n  }\n}\n\n// Correct approach\nstatic getDerivedStateFromProps(nextProps, prevState) {\n  if (nextProps.value !== prevState.value) {\n    return { value: nextProps.value };\n  }\n  return null;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Not using keys in lists\"}),`\n`,(0,n.jsx)(e.p,{children:\"Keys help React identify which items have changed, are added, or are removed. Not using keys can lead to inefficient rendering.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Anti-pattern\nconst listItems = items.map((item) => <li>{item}</li>);\n\n// Correct approach\nconst listItems = items.map((item) => <li key={item.id}>{item}</li>);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Overusing inline functions in render\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Defining functions inside the \",(0,n.jsx)(e.code,{children:\"render\"}),\" method can lead to performance issues because a new function is created on every render.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Anti-pattern\nrender() {\n  return <button onClick={() => this.handleClick()}>Click me</button>;\n}\n\n// Correct approach\nrender() {\n  return <button onClick={this.handleClick}>Click me</button>;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Deeply nested state\"}),`\n`,(0,n.jsx)(e.p,{children:\"Deeply nested state can make state management complex and error-prone. Flatten the state structure when possible.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Anti-pattern\nthis.state = {\n  user: {\n    profile: {\n      name: 'John',\n      age: 30,\n    },\n  },\n};\n\n// Correct approach\nthis.state = {\n  userName: 'John',\n  userAge: 30,\n};\n`})}),`\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://react.dev/learn/state-a-components-memory\",children:\"React documentation on state\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/rendering-lists#why-does-react-need-keys\",children:\"React documentation on lists and keys\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/hooks\",children:\"React documentation on hooks\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/memo\",children:\"React documentation on memo optimizing performance\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return k(D);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-react-anti-patterns/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-some-react-anti-patterns/zh-CN.json
index 72235c6d0..004edf1fc 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-react-anti-patterns/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-react-anti-patterns/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-are-some-react-anti-patterns/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},o=(t,e,r,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!v.call(t,c)&&c!==r&&i(t,c,{get:()=>e[c],enumerable:!(l=p(e,c))||l.enumerable});return t};var x=(t,e,r)=>(r=t!=null?s(u(t)):{},o(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),j=t=>o(i({},\"__esModule\",{value:!0}),t);var d=g((S,a)=>{a.exports=_jsx_runtime});var k={};f(k,{default:()=>D,frontmatter:()=>R});var n=x(d()),R={title:\"React \\u7684\\u4E00\\u4E9B\\u53CD\\u6A21\\u5F0F\\u662F\\u4EC0\\u4E48\\uFF1F\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"React \\u53CD\\u6A21\\u5F0F\\u662F\\u6307\\u53EF\\u80FD\\u5BFC\\u81F4\\u4EE3\\u7801\\u6548\\u7387\\u4F4E\\u4E0B\\u3001\\u96BE\\u4EE5\\u7EF4\\u62A4\\u6216\\u51FA\\u73B0\\u9519\\u8BEF\\u7684\\u5B9E\\u8DF5\\u3002\\u4E00\\u4E9B\\u5E38\\u89C1\\u7684\\u53CD\\u6A21\\u5F0F\\u5305\\u62EC\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u76F4\\u63A5\\u6539\\u53D8\\u72B6\\u6001\\uFF0C\\u800C\\u4E0D\\u662F\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"setState\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"componentWillMount\"}),\" \\u8FDB\\u884C\\u6570\\u636E\\u83B7\\u53D6\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u8FC7\\u5EA6\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"componentWillReceiveProps\"})]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5728\\u5217\\u8868\\u4E2D\\u4E0D\\u4F7F\\u7528\\u952E\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5728 render \\u4E2D\\u8FC7\\u5EA6\\u4F7F\\u7528\\u5185\\u8054\\u51FD\\u6570\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u72B6\\u6001\\u5D4C\\u5957\\u8FC7\\u6DF1\"}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5E38\\u89C1\\u7684 React \\u53CD\\u6A21\\u5F0F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u76F4\\u63A5\\u6539\\u53D8\\u72B6\\u6001\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u76F4\\u63A5\\u6539\\u53D8\\u72B6\\u6001\\u53EF\\u80FD\\u5BFC\\u81F4\\u610F\\u5916\\u7684\\u884C\\u4E3A\\u548C\\u9519\\u8BEF\\u3002 \\u59CB\\u7EC8\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"setState\"}),\" \\u6765\\u66F4\\u65B0\\u72B6\\u6001\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// \\u53CD\\u6A21\\u5F0F\nthis.state.count = 1;\n\n// \\u6B63\\u786E\\u65B9\\u6CD5\nthis.setState({ count: 1 });\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"componentWillMount\"}),\" \\u8FDB\\u884C\\u6570\\u636E\\u83B7\\u53D6\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"componentWillMount\"}),\" \\u5DF2\\u88AB\\u5F03\\u7528\\uFF0C\\u4E0D\\u5E94\\u7528\\u4E8E\\u6570\\u636E\\u83B7\\u53D6\\u3002 \\u8BF7\\u6539\\u7528 \",(0,n.jsx)(e.code,{children:\"componentDidMount\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// \\u53CD\\u6A21\\u5F0F\ncomponentWillMount() {\n  fetchData();\n}\n\n// \\u6B63\\u786E\\u65B9\\u6CD5\ncomponentDidMount() {\n  fetchData();\n}\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u8FC7\\u5EA6\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"componentWillReceiveProps\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"componentWillReceiveProps\"}),\" \\u5DF2\\u88AB\\u5F03\\u7528\\u3002 \\u8BF7\\u6539\\u7528 \",(0,n.jsx)(e.code,{children:\"getDerivedStateFromProps\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"componentDidUpdate\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// \\u53CD\\u6A21\\u5F0F\ncomponentWillReceiveProps(nextProps) {\n  if (nextProps.value !== this.props.value) {\n    this.setState({ value: nextProps.value });\n  }\n}\n\n// \\u6B63\\u786E\\u65B9\\u6CD5\nstatic getDerivedStateFromProps(nextProps, prevState) {\n  if (nextProps.value !== prevState.value) {\n    return { value: nextProps.value };\n  }\n  return null;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5728\\u5217\\u8868\\u4E2D\\u4E0D\\u4F7F\\u7528\\u952E\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u952E\\u53EF\\u5E2E\\u52A9 React \\u8BC6\\u522B\\u54EA\\u4E9B\\u9879\\u76EE\\u5DF2\\u66F4\\u6539\\u3001\\u5DF2\\u6DFB\\u52A0\\u6216\\u5DF2\\u5220\\u9664\\u3002 \\u4E0D\\u4F7F\\u7528\\u952E\\u53EF\\u80FD\\u5BFC\\u81F4\\u6E32\\u67D3\\u6548\\u7387\\u4F4E\\u4E0B\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// \\u53CD\\u6A21\\u5F0F\nconst listItems = items.map((item) => <li>{item}</li>);\n\n// \\u6B63\\u786E\\u65B9\\u6CD5\nconst listItems = items.map((item) => <li key={item.id}>{item}</li>);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5728 render \\u4E2D\\u8FC7\\u5EA6\\u4F7F\\u7528\\u5185\\u8054\\u51FD\\u6570\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 \",(0,n.jsx)(e.code,{children:\"render\"}),\" \\u65B9\\u6CD5\\u4E2D\\u5B9A\\u4E49\\u51FD\\u6570\\u53EF\\u80FD\\u5BFC\\u81F4\\u6027\\u80FD\\u95EE\\u9898\\uFF0C\\u56E0\\u4E3A\\u6BCF\\u6B21\\u6E32\\u67D3\\u90FD\\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// \\u53CD\\u6A21\\u5F0F\nrender() {\n  return <button onClick={() => this.handleClick()}>\\u70B9\\u51FB\\u6211</button>;\n}\n\n// \\u6B63\\u786E\\u65B9\\u6CD5\nrender() {\n  return <button onClick={this.handleClick}>\\u70B9\\u51FB\\u6211</button>;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6DF1\\u5EA6\\u5D4C\\u5957\\u72B6\\u6001\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6DF1\\u5EA6\\u5D4C\\u5957\\u72B6\\u6001\\u4F1A\\u4F7F\\u72B6\\u6001\\u7BA1\\u7406\\u53D8\\u5F97\\u590D\\u6742\\u4E14\\u5BB9\\u6613\\u51FA\\u9519\\u3002 \\u5C3D\\u53EF\\u80FD\\u6241\\u5E73\\u5316\\u72B6\\u6001\\u7ED3\\u6784\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// \\u53CD\\u6A21\\u5F0F\nthis.state = {\n  user: {\n    profile: {\n      name: 'John',\n      age: 30,\n    },\n  },\n};\n\n// \\u6B63\\u786E\\u65B9\\u6CD5\nthis.state = {\n  userName: 'John',\n  userAge: 30,\n};\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React documentation on state\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/rendering-lists#why-does-react-need-keys\",children:\"React documentation on lists and keys\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/hooks\",children:\"React documentation on hooks\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/memo\",children:\"React documentation on memo optimizing performance\"})}),`\n`]})]})}function P(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var D=P;return j(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},o=(t,e,r,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of u(e))!g.call(t,c)&&c!==r&&i(t,c,{get:()=>e[c],enumerable:!(l=m(e,c))||l.enumerable});return t};var R=(t,e,r)=>(r=t!=null?p(v(t)):{},o(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),P=t=>o(i({},\"__esModule\",{value:!0}),t);var d=f((M,a)=>{a.exports=_jsx_runtime});var D={};x(D,{default:()=>s,frontmatter:()=>j});var n=R(d()),j={title:\"React \\u7684\\u4E00\\u4E9B\\u53CD\\u6A21\\u5F0F\\u662F\\u4EC0\\u4E48\\uFF1F\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"React \\u53CD\\u6A21\\u5F0F\\u662F\\u6307\\u53EF\\u80FD\\u5BFC\\u81F4\\u4EE3\\u7801\\u6548\\u7387\\u4F4E\\u4E0B\\u3001\\u96BE\\u4EE5\\u7EF4\\u62A4\\u6216\\u51FA\\u73B0\\u9519\\u8BEF\\u7684\\u5B9E\\u8DF5\\u3002\\u4E00\\u4E9B\\u5E38\\u89C1\\u7684\\u53CD\\u6A21\\u5F0F\\u5305\\u62EC\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u76F4\\u63A5\\u6539\\u53D8\\u72B6\\u6001\\uFF0C\\u800C\\u4E0D\\u662F\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"setState\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"componentWillMount\"}),\" \\u8FDB\\u884C\\u6570\\u636E\\u83B7\\u53D6\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u8FC7\\u5EA6\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"componentWillReceiveProps\"})]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5728\\u5217\\u8868\\u4E2D\\u4E0D\\u4F7F\\u7528\\u952E\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5728 render \\u4E2D\\u8FC7\\u5EA6\\u4F7F\\u7528\\u5185\\u8054\\u51FD\\u6570\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u72B6\\u6001\\u5D4C\\u5957\\u8FC7\\u6DF1\"}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5E38\\u89C1\\u7684 React \\u53CD\\u6A21\\u5F0F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u76F4\\u63A5\\u6539\\u53D8\\u72B6\\u6001\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u76F4\\u63A5\\u6539\\u53D8\\u72B6\\u6001\\u53EF\\u80FD\\u5BFC\\u81F4\\u610F\\u5916\\u7684\\u884C\\u4E3A\\u548C\\u9519\\u8BEF\\u3002 \\u59CB\\u7EC8\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"setState\"}),\" \\u6765\\u66F4\\u65B0\\u72B6\\u6001\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// \\u53CD\\u6A21\\u5F0F\nthis.state.count = 1;\n\n// \\u6B63\\u786E\\u65B9\\u6CD5\nthis.setState({ count: 1 });\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"componentWillMount\"}),\" \\u8FDB\\u884C\\u6570\\u636E\\u83B7\\u53D6\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"componentWillMount\"}),\" \\u5DF2\\u88AB\\u5F03\\u7528\\uFF0C\\u4E0D\\u5E94\\u7528\\u4E8E\\u6570\\u636E\\u83B7\\u53D6\\u3002 \\u8BF7\\u6539\\u7528 \",(0,n.jsx)(e.code,{children:\"componentDidMount\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// \\u53CD\\u6A21\\u5F0F\ncomponentWillMount() {\n  fetchData();\n}\n\n// \\u6B63\\u786E\\u65B9\\u6CD5\ncomponentDidMount() {\n  fetchData();\n}\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u8FC7\\u5EA6\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"componentWillReceiveProps\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"componentWillReceiveProps\"}),\" \\u5DF2\\u88AB\\u5F03\\u7528\\u3002 \\u8BF7\\u6539\\u7528 \",(0,n.jsx)(e.code,{children:\"getDerivedStateFromProps\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"componentDidUpdate\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// \\u53CD\\u6A21\\u5F0F\ncomponentWillReceiveProps(nextProps) {\n  if (nextProps.value !== this.props.value) {\n    this.setState({ value: nextProps.value });\n  }\n}\n\n// \\u6B63\\u786E\\u65B9\\u6CD5\nstatic getDerivedStateFromProps(nextProps, prevState) {\n  if (nextProps.value !== prevState.value) {\n    return { value: nextProps.value };\n  }\n  return null;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5728\\u5217\\u8868\\u4E2D\\u4E0D\\u4F7F\\u7528\\u952E\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u952E\\u53EF\\u5E2E\\u52A9 React \\u8BC6\\u522B\\u54EA\\u4E9B\\u9879\\u76EE\\u5DF2\\u66F4\\u6539\\u3001\\u5DF2\\u6DFB\\u52A0\\u6216\\u5DF2\\u5220\\u9664\\u3002 \\u4E0D\\u4F7F\\u7528\\u952E\\u53EF\\u80FD\\u5BFC\\u81F4\\u6E32\\u67D3\\u6548\\u7387\\u4F4E\\u4E0B\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// \\u53CD\\u6A21\\u5F0F\nconst listItems = items.map((item) => <li>{item}</li>);\n\n// \\u6B63\\u786E\\u65B9\\u6CD5\nconst listItems = items.map((item) => <li key={item.id}>{item}</li>);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5728 render \\u4E2D\\u8FC7\\u5EA6\\u4F7F\\u7528\\u5185\\u8054\\u51FD\\u6570\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 \",(0,n.jsx)(e.code,{children:\"render\"}),\" \\u65B9\\u6CD5\\u4E2D\\u5B9A\\u4E49\\u51FD\\u6570\\u53EF\\u80FD\\u5BFC\\u81F4\\u6027\\u80FD\\u95EE\\u9898\\uFF0C\\u56E0\\u4E3A\\u6BCF\\u6B21\\u6E32\\u67D3\\u90FD\\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// \\u53CD\\u6A21\\u5F0F\nrender() {\n  return <button onClick={() => this.handleClick()}>\\u70B9\\u51FB\\u6211</button>;\n}\n\n// \\u6B63\\u786E\\u65B9\\u6CD5\nrender() {\n  return <button onClick={this.handleClick}>\\u70B9\\u51FB\\u6211</button>;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6DF1\\u5EA6\\u5D4C\\u5957\\u72B6\\u6001\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6DF1\\u5EA6\\u5D4C\\u5957\\u72B6\\u6001\\u4F1A\\u4F7F\\u72B6\\u6001\\u7BA1\\u7406\\u53D8\\u5F97\\u590D\\u6742\\u4E14\\u5BB9\\u6613\\u51FA\\u9519\\u3002 \\u5C3D\\u53EF\\u80FD\\u6241\\u5E73\\u5316\\u72B6\\u6001\\u7ED3\\u6784\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// \\u53CD\\u6A21\\u5F0F\nthis.state = {\n  user: {\n    profile: {\n      name: 'John',\n      age: 30,\n    },\n  },\n};\n\n// \\u6B63\\u786E\\u65B9\\u6CD5\nthis.state = {\n  userName: 'John',\n  userAge: 30,\n};\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React documentation on state\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/rendering-lists#why-does-react-need-keys\",children:\"React documentation on lists and keys\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/hooks\",children:\"React documentation on hooks\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/memo\",children:\"React documentation on memo optimizing performance\"})}),`\n`]})]})}function s(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return P(D);})();\n;return Component;"
 }
\ No newline at end of file
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 08d9fbc17..7503b2fb8 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-some-techniques-for-reducing-reflows-and-repaints/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var f=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),w=(i,e)=>{for(var t in e)r(i,t,{get:e[t],enumerable:!0})},c=(i,e,t,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of g(e))!p.call(i,l)&&l!==t&&r(i,l,{get:()=>e[l],enumerable:!(a=m(e,l))||a.enumerable});return i};var y=(i,e,t)=>(t=i!=null?d(u(i)):{},c(e||!i||!i.__esModule?r(t,\"default\",{value:i,enumerable:!0}):t,i)),x=i=>c(r({},\"__esModule\",{value:!0}),i);var o=f((A,s)=>{s.exports=_jsx_runtime});var b={};w(b,{default:()=>M,frontmatter:()=>v});var n=y(o()),v={title:\"What are some techniques for reducing reflows and repaints?\"};function h(i){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",pre:\"pre\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To reduce reflows and repaints, you can minimize DOM manipulations, batch DOM changes, use CSS classes for style changes, avoid complex CSS selectors, and use \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" for animations. Additionally, consider using \",(0,n.jsx)(e.code,{children:\"will-change\"}),\" for elements that will change frequently and avoid layout thrashing by reading and writing to the DOM separately.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Techniques for reducing reflows and repaints\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Minimize DOM manipulations\"}),`\n`,(0,n.jsx)(e.p,{children:\"Frequent changes to the DOM can cause multiple reflows and repaints. To minimize this:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"documentFragment\"}),\" to batch DOM updates\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Clone nodes, make changes, and then replace the original node\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Batch DOM changes\"}),`\n`,(0,n.jsx)(e.p,{children:\"Grouping multiple DOM changes together can reduce the number of reflows and repaints:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" to update multiple elements at once\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" to batch updates\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Use CSS classes for style changes\"}),`\n`,(0,n.jsx)(e.p,{children:\"Instead of changing styles directly via JavaScript, use CSS classes:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const element = document.createElement('h1');\nelement.classList.add('text-center');\n\nconsole.log(element); // Notice that the class has been added.\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Avoid complex CSS selectors\"}),`\n`,(0,n.jsx)(e.p,{children:\"Complex selectors can slow down the rendering process:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Use simple and direct selectors\"}),`\n`,(0,n.jsx)(e.li,{children:\"Avoid deep nesting\"}),`\n`]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" for animations\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" ensures that animations are synchronized with the browser's repaint cycle:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function animate() {\n  // Animation logic\n  requestAnimationFrame(animate);\n}\nrequestAnimationFrame(animate);\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"will-change\"}),\" for frequently changing elements\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"will-change\"}),\" property can hint to the browser about which elements will change, allowing it to optimize rendering:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.element {\n  will-change: transform;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Avoid layout thrashing\"}),`\n`,(0,n.jsx)(e.p,{children:\"Reading and writing to the DOM separately can prevent layout thrashing:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Mock div element\nconst element = document.createElement('div');\n\nconst height = element.offsetHeight; // Read\nelement.style.height = \\`\\${height + 10}px\\`; // Write\n\nconsole.log(element);\n`})}),`\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/Reflow\",children:\"MDN Web Docs: Reflow\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing\",children:\"Google Developers: Avoid large, complex layouts and layout thrashing\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://css-tricks.com/debouncing-throttling-explained-examples/\",children:\"CSS-Tricks: Debouncing and Throttling Explained Through Examples\"})}),`\n`]})]})}function D(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(h,i)})):h(i)}var M=D;return x(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var w=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),y=(i,e)=>{for(var t in e)r(i,t,{get:e[t],enumerable:!0})},c=(i,e,t,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of u(e))!f.call(i,l)&&l!==t&&r(i,l,{get:()=>e[l],enumerable:!(a=g(e,l))||a.enumerable});return i};var x=(i,e,t)=>(t=i!=null?m(p(i)):{},c(e||!i||!i.__esModule?r(t,\"default\",{value:i,enumerable:!0}):t,i)),v=i=>c(r({},\"__esModule\",{value:!0}),i);var s=w((b,o)=>{o.exports=_jsx_runtime});var M={};y(M,{default:()=>d,frontmatter:()=>D});var n=x(s()),D={title:\"What are some techniques for reducing reflows and repaints?\"};function h(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To reduce reflows and repaints, you can minimize DOM manipulations, batch DOM changes, use CSS classes for style changes, avoid complex CSS selectors, and use \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" for animations. Additionally, consider using \",(0,n.jsx)(e.code,{children:\"will-change\"}),\" for elements that will change frequently and avoid layout thrashing by reading and writing to the DOM separately.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Techniques for reducing reflows and repaints\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Minimize DOM manipulations\"}),`\n`,(0,n.jsx)(e.p,{children:\"Frequent changes to the DOM can cause multiple reflows and repaints. To minimize this:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"documentFragment\"}),\" to batch DOM updates\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Clone nodes, make changes, and then replace the original node\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Batch DOM changes\"}),`\n`,(0,n.jsx)(e.p,{children:\"Grouping multiple DOM changes together can reduce the number of reflows and repaints:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" to update multiple elements at once\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" to batch updates\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Use CSS classes for style changes\"}),`\n`,(0,n.jsx)(e.p,{children:\"Instead of changing styles directly via JavaScript, use CSS classes:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const element = document.createElement('h1');\nelement.classList.add('text-center');\n\nconsole.log(element); // Notice that the class has been added.\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Avoid complex CSS selectors\"}),`\n`,(0,n.jsx)(e.p,{children:\"Complex selectors can slow down the rendering process:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Use simple and direct selectors\"}),`\n`,(0,n.jsx)(e.li,{children:\"Avoid deep nesting\"}),`\n`]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" for animations\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" ensures that animations are synchronized with the browser's repaint cycle:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function animate() {\n  // Animation logic\n  requestAnimationFrame(animate);\n}\nrequestAnimationFrame(animate);\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"will-change\"}),\" for frequently changing elements\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"will-change\"}),\" property can hint to the browser about which elements will change, allowing it to optimize rendering:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.element {\n  will-change: transform;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Avoid layout thrashing\"}),`\n`,(0,n.jsx)(e.p,{children:\"Reading and writing to the DOM separately can prevent layout thrashing:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Mock div element\nconst element = document.createElement('div');\n\nconst height = element.offsetHeight; // Read\nelement.style.height = \\`\\${height + 10}px\\`; // Write\n\nconsole.log(element);\n`})}),`\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/Reflow\",children:\"MDN Web Docs: Reflow\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing\",children:\"Google Developers: Avoid large, complex layouts and layout thrashing\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://css-tricks.com/debouncing-throttling-explained-examples/\",children:\"CSS-Tricks: Debouncing and Throttling Explained Through Examples\"})}),`\n`]})]})}function d(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(h,{...i})}):h(i)}return v(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-techniques-for-reducing-reflows-and-repaints/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-some-techniques-for-reducing-reflows-and-repaints/zh-CN.json
index 4eaf9a270..7b91660d6 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-techniques-for-reducing-reflows-and-repaints/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-techniques-for-reducing-reflows-and-repaints/zh-CN.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-some-techniques-for-reducing-reflows-and-repaints/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var x=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),f=(l,e)=>{for(var i in e)c(l,i,{get:e[i],enumerable:!0})},h=(l,e,i,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of g(e))!p.call(l,r)&&r!==i&&c(l,r,{get:()=>e[r],enumerable:!(t=m(e,r))||t.enumerable});return l};var D=(l,e,i)=>(i=l!=null?s(u(l)):{},h(e||!l||!l.__esModule?c(i,\"default\",{value:l,enumerable:!0}):i,l)),M=l=>h(c({},\"__esModule\",{value:!0}),l);var a=x((w,d)=>{d.exports=_jsx_runtime});var v={};f(v,{default:()=>j,frontmatter:()=>S});var n=D(a()),S={title:\"\\u6709\\u54EA\\u4E9B\\u51CF\\u5C11\\u91CD\\u6392\\u548C\\u91CD\\u7ED8\\u7684\\u6280\\u672F\\uFF1F\"};function o(l){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",pre:\"pre\",a:\"a\"},l.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u51CF\\u5C11\\u91CD\\u6392\\u548C\\u91CD\\u7ED8\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C3D\\u91CF\\u51CF\\u5C11 DOM \\u64CD\\u4F5C\\u3001\\u6279\\u91CF\\u5904\\u7406 DOM \\u66F4\\u6539\\u3001\\u4F7F\\u7528 CSS \\u7C7B\\u8FDB\\u884C\\u6837\\u5F0F\\u66F4\\u6539\\u3001\\u907F\\u514D\\u590D\\u6742\\u7684 CSS \\u9009\\u62E9\\u5668\\uFF0C\\u5E76\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" \\u8FDB\\u884C\\u52A8\\u753B\\u3002\\u6B64\\u5916\\uFF0C\\u8BF7\\u8003\\u8651\\u5BF9\\u5C06\\u7ECF\\u5E38\\u66F4\\u6539\\u7684\\u5143\\u7D20\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"will-change\"}),\"\\uFF0C\\u5E76\\u901A\\u8FC7\\u5206\\u522B\\u8BFB\\u53D6\\u548C\\u5199\\u5165 DOM \\u6765\\u907F\\u514D\\u5E03\\u5C40\\u98A0\\u7C38\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u51CF\\u5C11\\u91CD\\u6392\\u548C\\u91CD\\u7ED8\\u7684\\u6280\\u672F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5C3D\\u91CF\\u51CF\\u5C11 DOM \\u64CD\\u4F5C\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u9891\\u7E41\\u66F4\\u6539 DOM \\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u591A\\u6B21\\u91CD\\u6392\\u548C\\u91CD\\u7ED8\\u3002\\u8981\\u5C3D\\u91CF\\u51CF\\u5C11\\u8FD9\\u79CD\\u60C5\\u51B5\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"documentFragment\"}),\" \\u6279\\u91CF\\u66F4\\u65B0 DOM\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u514B\\u9686\\u8282\\u70B9\\uFF0C\\u8FDB\\u884C\\u66F4\\u6539\\uFF0C\\u7136\\u540E\\u66FF\\u6362\\u539F\\u59CB\\u8282\\u70B9\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6279\\u91CF\\u5904\\u7406 DOM \\u66F4\\u6539\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5C06\\u591A\\u4E2A DOM \\u66F4\\u6539\\u7EC4\\u5408\\u5728\\u4E00\\u8D77\\u53EF\\u4EE5\\u51CF\\u5C11\\u91CD\\u6392\\u548C\\u91CD\\u7ED8\\u7684\\u6B21\\u6570\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" \\u4E00\\u6B21\\u66F4\\u65B0\\u591A\\u4E2A\\u5143\\u7D20\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" \\u6279\\u91CF\\u66F4\\u65B0\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 CSS \\u7C7B\\u8FDB\\u884C\\u6837\\u5F0F\\u66F4\\u6539\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E0D\\u8981\\u901A\\u8FC7 JavaScript \\u76F4\\u63A5\\u66F4\\u6539\\u6837\\u5F0F\\uFF0C\\u800C\\u662F\\u4F7F\\u7528 CSS \\u7C7B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const element = document.createElement('h1');\nelement.classList.add('text-center');\n\nconsole.log(element); // Notice that the class has been added.\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u907F\\u514D\\u590D\\u6742\\u7684 CSS \\u9009\\u62E9\\u5668\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u590D\\u6742\\u7684\\u9009\\u62E9\\u5668\\u4F1A\\u51CF\\u6162\\u6E32\\u67D3\\u8FC7\\u7A0B\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u4F7F\\u7528\\u7B80\\u5355\\u76F4\\u63A5\\u7684\\u9009\\u62E9\\u5668\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u907F\\u514D\\u6DF1\\u5EA6\\u5D4C\\u5957\"}),`\n`]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" \\u8FDB\\u884C\\u52A8\\u753B\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" \\u53EF\\u786E\\u4FDD\\u52A8\\u753B\\u4E0E\\u6D4F\\u89C8\\u5668\\u7684\\u91CD\\u7ED8\\u5468\\u671F\\u540C\\u6B65\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function animate() {\n  // Animation logic\n  requestAnimationFrame(animate);\n}\nrequestAnimationFrame(animate);\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u5BF9\\u9891\\u7E41\\u66F4\\u6539\\u7684\\u5143\\u7D20\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"will-change\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"will-change\"}),\" \\u5C5E\\u6027\\u53EF\\u4EE5\\u5411\\u6D4F\\u89C8\\u5668\\u63D0\\u793A\\u54EA\\u4E9B\\u5143\\u7D20\\u5C06\\u8981\\u66F4\\u6539\\uFF0C\\u4ECE\\u800C\\u5141\\u8BB8\\u5B83\\u4F18\\u5316\\u6E32\\u67D3\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.element {\n  will-change: transform;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u907F\\u514D\\u5E03\\u5C40\\u9707\\u8361\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5206\\u522B\\u8BFB\\u53D6\\u548C\\u5199\\u5165 DOM \\u53EF\\u4EE5\\u9632\\u6B62\\u5E03\\u5C40\\u9707\\u8361\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Mock div element\nconst element = document.createElement('div');\n\nconst height = element.offsetHeight; // Read\nelement.style.height = \\`\\${height + 10}px\\`; // Write\n\nconsole.log(element);\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Reflow\",children:\"MDN Web Docs: Reflow\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing\",children:\"Google Developers: Avoid large, complex layouts and layout thrashing\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://css-tricks.com/debouncing-throttling-explained-examples/\",children:\"CSS-Tricks: Debouncing and Throttling Explained Through Examples\"})}),`\n`]})]})}function O(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(o,l)})):o(l)}var j=O;return M(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var f=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),D=(l,e)=>{for(var r in e)c(l,r,{get:e[r],enumerable:!0})},h=(l,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of g(e))!x.call(l,i)&&i!==r&&c(l,i,{get:()=>e[i],enumerable:!(t=u(e,i))||t.enumerable});return l};var M=(l,e,r)=>(r=l!=null?m(p(l)):{},h(e||!l||!l.__esModule?c(r,\"default\",{value:l,enumerable:!0}):r,l)),S=l=>h(c({},\"__esModule\",{value:!0}),l);var a=f((j,d)=>{d.exports=_jsx_runtime});var F={};D(F,{default:()=>s,frontmatter:()=>v});var n=M(a()),v={title:\"\\u6709\\u54EA\\u4E9B\\u51CF\\u5C11\\u91CD\\u6392\\u548C\\u91CD\\u7ED8\\u7684\\u6280\\u672F\\uFF1F\"};function o(l){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u51CF\\u5C11\\u91CD\\u6392\\u548C\\u91CD\\u7ED8\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5C3D\\u91CF\\u51CF\\u5C11 DOM \\u64CD\\u4F5C\\u3001\\u6279\\u91CF\\u5904\\u7406 DOM \\u66F4\\u6539\\u3001\\u4F7F\\u7528 CSS \\u7C7B\\u8FDB\\u884C\\u6837\\u5F0F\\u66F4\\u6539\\u3001\\u907F\\u514D\\u590D\\u6742\\u7684 CSS \\u9009\\u62E9\\u5668\\uFF0C\\u5E76\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" \\u8FDB\\u884C\\u52A8\\u753B\\u3002\\u6B64\\u5916\\uFF0C\\u8BF7\\u8003\\u8651\\u5BF9\\u5C06\\u7ECF\\u5E38\\u66F4\\u6539\\u7684\\u5143\\u7D20\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"will-change\"}),\"\\uFF0C\\u5E76\\u901A\\u8FC7\\u5206\\u522B\\u8BFB\\u53D6\\u548C\\u5199\\u5165 DOM \\u6765\\u907F\\u514D\\u5E03\\u5C40\\u98A0\\u7C38\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u51CF\\u5C11\\u91CD\\u6392\\u548C\\u91CD\\u7ED8\\u7684\\u6280\\u672F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5C3D\\u91CF\\u51CF\\u5C11 DOM \\u64CD\\u4F5C\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u9891\\u7E41\\u66F4\\u6539 DOM \\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u591A\\u6B21\\u91CD\\u6392\\u548C\\u91CD\\u7ED8\\u3002\\u8981\\u5C3D\\u91CF\\u51CF\\u5C11\\u8FD9\\u79CD\\u60C5\\u51B5\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"documentFragment\"}),\" \\u6279\\u91CF\\u66F4\\u65B0 DOM\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u514B\\u9686\\u8282\\u70B9\\uFF0C\\u8FDB\\u884C\\u66F4\\u6539\\uFF0C\\u7136\\u540E\\u66FF\\u6362\\u539F\\u59CB\\u8282\\u70B9\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6279\\u91CF\\u5904\\u7406 DOM \\u66F4\\u6539\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5C06\\u591A\\u4E2A DOM \\u66F4\\u6539\\u7EC4\\u5408\\u5728\\u4E00\\u8D77\\u53EF\\u4EE5\\u51CF\\u5C11\\u91CD\\u6392\\u548C\\u91CD\\u7ED8\\u7684\\u6B21\\u6570\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" \\u4E00\\u6B21\\u66F4\\u65B0\\u591A\\u4E2A\\u5143\\u7D20\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" \\u6279\\u91CF\\u66F4\\u65B0\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 CSS \\u7C7B\\u8FDB\\u884C\\u6837\\u5F0F\\u66F4\\u6539\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E0D\\u8981\\u901A\\u8FC7 JavaScript \\u76F4\\u63A5\\u66F4\\u6539\\u6837\\u5F0F\\uFF0C\\u800C\\u662F\\u4F7F\\u7528 CSS \\u7C7B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const element = document.createElement('h1');\nelement.classList.add('text-center');\n\nconsole.log(element); // Notice that the class has been added.\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u907F\\u514D\\u590D\\u6742\\u7684 CSS \\u9009\\u62E9\\u5668\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u590D\\u6742\\u7684\\u9009\\u62E9\\u5668\\u4F1A\\u51CF\\u6162\\u6E32\\u67D3\\u8FC7\\u7A0B\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u4F7F\\u7528\\u7B80\\u5355\\u76F4\\u63A5\\u7684\\u9009\\u62E9\\u5668\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u907F\\u514D\\u6DF1\\u5EA6\\u5D4C\\u5957\"}),`\n`]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" \\u8FDB\\u884C\\u52A8\\u753B\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame\"}),\" \\u53EF\\u786E\\u4FDD\\u52A8\\u753B\\u4E0E\\u6D4F\\u89C8\\u5668\\u7684\\u91CD\\u7ED8\\u5468\\u671F\\u540C\\u6B65\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function animate() {\n  // Animation logic\n  requestAnimationFrame(animate);\n}\nrequestAnimationFrame(animate);\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u5BF9\\u9891\\u7E41\\u66F4\\u6539\\u7684\\u5143\\u7D20\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"will-change\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"will-change\"}),\" \\u5C5E\\u6027\\u53EF\\u4EE5\\u5411\\u6D4F\\u89C8\\u5668\\u63D0\\u793A\\u54EA\\u4E9B\\u5143\\u7D20\\u5C06\\u8981\\u66F4\\u6539\\uFF0C\\u4ECE\\u800C\\u5141\\u8BB8\\u5B83\\u4F18\\u5316\\u6E32\\u67D3\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.element {\n  will-change: transform;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u907F\\u514D\\u5E03\\u5C40\\u9707\\u8361\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5206\\u522B\\u8BFB\\u53D6\\u548C\\u5199\\u5165 DOM \\u53EF\\u4EE5\\u9632\\u6B62\\u5E03\\u5C40\\u9707\\u8361\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Mock div element\nconst element = document.createElement('div');\n\nconst height = element.offsetHeight; // Read\nelement.style.height = \\`\\${height + 10}px\\`; // Write\n\nconsole.log(element);\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Reflow\",children:\"MDN Web Docs: Reflow\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing\",children:\"Google Developers: Avoid large, complex layouts and layout thrashing\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://css-tricks.com/debouncing-throttling-explained-examples/\",children:\"CSS-Tricks: Debouncing and Throttling Explained Through Examples\"})}),`\n`]})]})}function s(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(o,{...l})}):o(l)}return S(F);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-tools-and-techniques-for-identifying-security-vulnerabilities-in-javascript-code/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-some-tools-and-techniques-for-identifying-security-vulnerabilities-in-javascript-code/en-US.json
index c69d0c311..d90df66c1 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-tools-and-techniques-for-identifying-security-vulnerabilities-in-javascript-code/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-tools-and-techniques-for-identifying-security-vulnerabilities-in-javascript-code/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-some-tools-and-techniques-for-identifying-security-vulnerabilities-in-javascript-code/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var m=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),f=(i,e)=>{for(var t in e)c(i,t,{get:e[t],enumerable:!0})},l=(i,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!y.call(i,r)&&r!==t&&c(i,r,{get:()=>e[r],enumerable:!(s=u(e,r))||s.enumerable});return i};var v=(i,e,t)=>(t=i!=null?h(g(i)):{},l(e||!i||!i.__esModule?c(t,\"default\",{value:i,enumerable:!0}):t,i)),b=i=>l(c({},\"__esModule\",{value:!0}),i);var o=m((j,a)=>{a.exports=_jsx_runtime});var k={};f(k,{default:()=>x,frontmatter:()=>w});var n=v(o()),w={title:\"What are some tools and techniques for identifying security vulnerabilities in JavaScript code?\"};function d(i){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",code:\"code\",pre:\"pre\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"To identify security vulnerabilities in JavaScript code, you can use static code analysis tools like ESLint with security plugins, dynamic analysis tools like OWASP ZAP, and dependency checkers like npm audit. Additionally, manual code reviews and adhering to secure coding practices are essential techniques.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Tools and techniques for identifying security vulnerabilities in JavaScript code\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Static code analysis tools\"}),`\n`,(0,n.jsx)(e.p,{children:\"Static code analysis tools examine your code without executing it. They can identify potential security vulnerabilities by analyzing the code structure and patterns.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"ESLint\"}),\": A popular linting tool for JavaScript that can be extended with security-focused plugins like \",(0,n.jsx)(e.code,{children:\"eslint-plugin-security\"}),\" to catch common security issues.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`npm install eslint eslint-plugin-security --save-dev\n`})}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// .eslintrc.json\n{\n  \"plugins\": [\"security\"],\n  \"extends\": [\"plugin:security/recommended\"]\n}\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"SonarQube\"}),\": A platform that provides continuous inspection of code quality and security vulnerabilities. It supports JavaScript and integrates with various CI/CD pipelines.\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Dynamic analysis tools\"}),`\n`,(0,n.jsx)(e.p,{children:\"Dynamic analysis tools test your application while it is running to identify security vulnerabilities.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"OWASP ZAP (Zed Attack Proxy)\"}),\": An open-source tool for finding security vulnerabilities in web applications. It can be used to perform automated scans and manual testing.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`zap.sh -daemon -port 8080 -config api.disablekey=true\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Burp Suite\"}),\": A comprehensive platform for web application security testing. It includes tools for scanning, crawling, and exploiting vulnerabilities.\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Dependency checkers\"}),`\n`,(0,n.jsx)(e.p,{children:\"Dependency checkers analyze the third-party libraries and packages your project depends on to identify known vulnerabilities.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"npm audit\"}),\": A built-in tool for npm that checks for vulnerabilities in your project's dependencies.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`npm audit\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Snyk\"}),\": A tool that continuously monitors your dependencies for vulnerabilities and provides fixes.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`snyk test\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Manual code reviews\"}),`\n`,(0,n.jsx)(e.p,{children:\"Manual code reviews involve developers examining each other's code to identify potential security issues. This technique is effective because it leverages human intuition and experience.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Secure coding practices\"}),`\n`,(0,n.jsx)(e.p,{children:\"Adhering to secure coding practices can help prevent security vulnerabilities from being introduced in the first place.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Input validation\"}),\": Always validate and sanitize user inputs to prevent injection attacks.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Output encoding\"}),\": Encode data before rendering it to prevent cross-site scripting (XSS) attacks.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Use HTTPS\"}),\": Ensure that your application uses HTTPS to encrypt data in transit.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Principle of least privilege\"}),\": Grant the minimum necessary permissions to users and services.\"]}),`\n`]}),`\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://owasp.org/www-project-top-ten/\",children:\"OWASP Top Ten\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://eslint.org/\",children:\"ESLint\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.sonarqube.org/\",children:\"SonarQube\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.zaproxy.org/\",children:\"OWASP ZAP\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://portswigger.net/burp\",children:\"Burp Suite\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://docs.npmjs.com/cli/v7/commands/npm-audit\",children:\"npm audit\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://snyk.io/\",children:\"Snyk\"})}),`\n`]})]})}function S(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(d,i)})):d(i)}var x=S;return b(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),v=(i,e)=>{for(var t in e)c(i,t,{get:e[t],enumerable:!0})},l=(i,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of g(e))!m.call(i,r)&&r!==t&&c(i,r,{get:()=>e[r],enumerable:!(s=p(e,r))||s.enumerable});return i};var b=(i,e,t)=>(t=i!=null?u(y(i)):{},l(e||!i||!i.__esModule?c(t,\"default\",{value:i,enumerable:!0}):t,i)),w=i=>l(c({},\"__esModule\",{value:!0}),i);var o=f((A,a)=>{a.exports=_jsx_runtime});var x={};v(x,{default:()=>h,frontmatter:()=>S});var n=b(o()),S={title:\"What are some tools and techniques for identifying security vulnerabilities in JavaScript code?\"};function d(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"To identify security vulnerabilities in JavaScript code, you can use static code analysis tools like ESLint with security plugins, dynamic analysis tools like OWASP ZAP, and dependency checkers like npm audit. Additionally, manual code reviews and adhering to secure coding practices are essential techniques.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Tools and techniques for identifying security vulnerabilities in JavaScript code\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Static code analysis tools\"}),`\n`,(0,n.jsx)(e.p,{children:\"Static code analysis tools examine your code without executing it. They can identify potential security vulnerabilities by analyzing the code structure and patterns.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"ESLint\"}),\": A popular linting tool for JavaScript that can be extended with security-focused plugins like \",(0,n.jsx)(e.code,{children:\"eslint-plugin-security\"}),\" to catch common security issues.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`npm install eslint eslint-plugin-security --save-dev\n`})}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// .eslintrc.json\n{\n  \"plugins\": [\"security\"],\n  \"extends\": [\"plugin:security/recommended\"]\n}\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"SonarQube\"}),\": A platform that provides continuous inspection of code quality and security vulnerabilities. It supports JavaScript and integrates with various CI/CD pipelines.\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Dynamic analysis tools\"}),`\n`,(0,n.jsx)(e.p,{children:\"Dynamic analysis tools test your application while it is running to identify security vulnerabilities.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"OWASP ZAP (Zed Attack Proxy)\"}),\": An open-source tool for finding security vulnerabilities in web applications. It can be used to perform automated scans and manual testing.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`zap.sh -daemon -port 8080 -config api.disablekey=true\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Burp Suite\"}),\": A comprehensive platform for web application security testing. It includes tools for scanning, crawling, and exploiting vulnerabilities.\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Dependency checkers\"}),`\n`,(0,n.jsx)(e.p,{children:\"Dependency checkers analyze the third-party libraries and packages your project depends on to identify known vulnerabilities.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"npm audit\"}),\": A built-in tool for npm that checks for vulnerabilities in your project's dependencies.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`npm audit\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Snyk\"}),\": A tool that continuously monitors your dependencies for vulnerabilities and provides fixes.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`snyk test\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Manual code reviews\"}),`\n`,(0,n.jsx)(e.p,{children:\"Manual code reviews involve developers examining each other's code to identify potential security issues. This technique is effective because it leverages human intuition and experience.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Secure coding practices\"}),`\n`,(0,n.jsx)(e.p,{children:\"Adhering to secure coding practices can help prevent security vulnerabilities from being introduced in the first place.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Input validation\"}),\": Always validate and sanitize user inputs to prevent injection attacks.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Output encoding\"}),\": Encode data before rendering it to prevent cross-site scripting (XSS) attacks.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Use HTTPS\"}),\": Ensure that your application uses HTTPS to encrypt data in transit.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Principle of least privilege\"}),\": Grant the minimum necessary permissions to users and services.\"]}),`\n`]}),`\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://owasp.org/www-project-top-ten/\",children:\"OWASP Top Ten\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://eslint.org/\",children:\"ESLint\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.sonarqube.org/\",children:\"SonarQube\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.zaproxy.org/\",children:\"OWASP ZAP\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://portswigger.net/burp\",children:\"Burp Suite\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://docs.npmjs.com/cli/v7/commands/npm-audit\",children:\"npm audit\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://snyk.io/\",children:\"Snyk\"})}),`\n`]})]})}function h(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(d,{...i})}):d(i)}return w(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-tools-and-techniques-for-identifying-security-vulnerabilities-in-javascript-code/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-some-tools-and-techniques-for-identifying-security-vulnerabilities-in-javascript-code/zh-CN.json
index aa0ae7124..46fd5dd0f 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-tools-and-techniques-for-identifying-security-vulnerabilities-in-javascript-code/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-tools-and-techniques-for-identifying-security-vulnerabilities-in-javascript-code/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-some-tools-and-techniques-for-identifying-security-vulnerabilities-in-javascript-code/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var o=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var S=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),b=(r,n)=>{for(var i in n)c(r,i,{get:n[i],enumerable:!0})},d=(r,n,i,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of u(n))!m.call(r,l)&&l!==i&&c(r,l,{get:()=>n[l],enumerable:!(h=p(n,l))||h.enumerable});return r};var f=(r,n,i)=>(i=r!=null?o(g(r)):{},d(n||!r||!r.__esModule?c(i,\"default\",{value:r,enumerable:!0}):i,r)),w=r=>d(c({},\"__esModule\",{value:!0}),r);var s=S((A,t)=>{t.exports=_jsx_runtime});var P={};b(P,{default:()=>j,frontmatter:()=>x});var e=f(s()),x={title:\"\\u6709\\u54EA\\u4E9B\\u7528\\u4E8E\\u8BC6\\u522B JavaScript \\u4EE3\\u7801\\u4E2D\\u5B89\\u5168\\u6F0F\\u6D1E\\u7684\\u5DE5\\u5177\\u548C\\u6280\\u672F\\uFF1F\"};function a(r){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",code:\"code\",pre:\"pre\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8981\\u8BC6\\u522B JavaScript \\u4EE3\\u7801\\u4E2D\\u7684\\u5B89\\u5168\\u6F0F\\u6D1E\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u9759\\u6001\\u4EE3\\u7801\\u5206\\u6790\\u5DE5\\u5177\\uFF08\\u5982\\u5E26\\u6709\\u5B89\\u5168\\u63D2\\u4EF6\\u7684 ESLint\\uFF09\\u3001\\u52A8\\u6001\\u5206\\u6790\\u5DE5\\u5177\\uFF08\\u5982 OWASP ZAP\\uFF09\\u548C\\u4F9D\\u8D56\\u9879\\u68C0\\u67E5\\u5668\\uFF08\\u5982 npm audit\\uFF09\\u3002\\u6B64\\u5916\\uFF0C\\u624B\\u52A8\\u4EE3\\u7801\\u5BA1\\u67E5\\u548C\\u9075\\u5B88\\u5B89\\u5168\\u7F16\\u7801\\u5B9E\\u8DF5\\u662F\\u5FC5\\u4E0D\\u53EF\\u5C11\\u7684\\u6280\\u672F\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7528\\u4E8E\\u8BC6\\u522B JavaScript \\u4EE3\\u7801\\u4E2D\\u5B89\\u5168\\u6F0F\\u6D1E\\u7684\\u5DE5\\u5177\\u548C\\u6280\\u672F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9759\\u6001\\u4EE3\\u7801\\u5206\\u6790\\u5DE5\\u5177\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9759\\u6001\\u4EE3\\u7801\\u5206\\u6790\\u5DE5\\u5177\\u5728\\u4E0D\\u6267\\u884C\\u4EE3\\u7801\\u7684\\u60C5\\u51B5\\u4E0B\\u68C0\\u67E5\\u60A8\\u7684\\u4EE3\\u7801\\u3002\\u5B83\\u4EEC\\u53EF\\u4EE5\\u901A\\u8FC7\\u5206\\u6790\\u4EE3\\u7801\\u7ED3\\u6784\\u548C\\u6A21\\u5F0F\\u6765\\u8BC6\\u522B\\u6F5C\\u5728\\u7684\\u5B89\\u5168\\u6F0F\\u6D1E\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"ESLint\"}),\"\\uFF1A\\u4E00\\u4E2A\\u6D41\\u884C\\u7684 JavaScript \\u68C0\\u67E5\\u5DE5\\u5177\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u5B89\\u5168\\u63D2\\u4EF6\\uFF08\\u5982 \",(0,e.jsx)(n.code,{children:\"eslint-plugin-security\"}),\"\\uFF09\\u8FDB\\u884C\\u6269\\u5C55\\uFF0C\\u4EE5\\u6355\\u83B7\\u5E38\\u89C1\\u7684\\u5B89\\u5168\\u95EE\\u9898\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-bash\",children:`npm install eslint eslint-plugin-security --save-dev\n`})}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// .eslintrc.json\n{\n  \"plugins\": [\"security\"],\n  \"extends\": [\"plugin:security/recommended\"]\n}\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"SonarQube\"}),\"\\uFF1A\\u4E00\\u4E2A\\u63D0\\u4F9B\\u4EE3\\u7801\\u8D28\\u91CF\\u548C\\u5B89\\u5168\\u6F0F\\u6D1E\\u6301\\u7EED\\u68C0\\u67E5\\u7684\\u5E73\\u53F0\\u3002\\u5B83\\u652F\\u6301 JavaScript \\u5E76\\u4E0E\\u5404\\u79CD CI/CD \\u7BA1\\u9053\\u96C6\\u6210\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u52A8\\u6001\\u5206\\u6790\\u5DE5\\u5177\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u52A8\\u6001\\u5206\\u6790\\u5DE5\\u5177\\u5728\\u5E94\\u7528\\u7A0B\\u5E8F\\u8FD0\\u884C\\u65F6\\u5BF9\\u5176\\u8FDB\\u884C\\u6D4B\\u8BD5\\uFF0C\\u4EE5\\u8BC6\\u522B\\u5B89\\u5168\\u6F0F\\u6D1E\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"OWASP ZAP (Zed Attack Proxy)\"}),\"\\uFF1A\\u4E00\\u4E2A\\u7528\\u4E8E\\u67E5\\u627E Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u5B89\\u5168\\u6F0F\\u6D1E\\u7684\\u5F00\\u6E90\\u5DE5\\u5177\\u3002\\u5B83\\u53EF\\u7528\\u4E8E\\u6267\\u884C\\u81EA\\u52A8\\u5316\\u626B\\u63CF\\u548C\\u624B\\u52A8\\u6D4B\\u8BD5\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-bash\",children:`zap.sh -daemon -port 8080 -config api.disablekey=true\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"Burp Suite\"}),\"\\uFF1A\\u4E00\\u4E2A\\u7528\\u4E8E Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u5B89\\u5168\\u6D4B\\u8BD5\\u7684\\u7EFC\\u5408\\u5E73\\u53F0\\u3002\\u5B83\\u5305\\u62EC\\u7528\\u4E8E\\u626B\\u63CF\\u3001\\u722C\\u53D6\\u548C\\u5229\\u7528\\u6F0F\\u6D1E\\u7684\\u5DE5\\u5177\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F9D\\u8D56\\u9879\\u68C0\\u67E5\\u5668\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F9D\\u8D56\\u9879\\u68C0\\u67E5\\u5668\\u5206\\u6790\\u60A8\\u7684\\u9879\\u76EE\\u6240\\u4F9D\\u8D56\\u7684\\u7B2C\\u4E09\\u65B9\\u5E93\\u548C\\u5305\\uFF0C\\u4EE5\\u8BC6\\u522B\\u5DF2\\u77E5\\u7684\\u6F0F\\u6D1E\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"npm audit\"}),\"\\uFF1Anpm \\u7684\\u4E00\\u4E2A\\u5185\\u7F6E\\u5DE5\\u5177\\uFF0C\\u7528\\u4E8E\\u68C0\\u67E5\\u60A8\\u7684\\u9879\\u76EE\\u4F9D\\u8D56\\u9879\\u4E2D\\u7684\\u6F0F\\u6D1E\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-bash\",children:`npm audit\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"Snyk\"}),\"\\uFF1A\\u4E00\\u4E2A\\u6301\\u7EED\\u76D1\\u63A7\\u60A8\\u7684\\u4F9D\\u8D56\\u9879\\u662F\\u5426\\u5B58\\u5728\\u6F0F\\u6D1E\\u5E76\\u63D0\\u4F9B\\u4FEE\\u590D\\u7684\\u5DE5\\u5177\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-bash\",children:`snyk test\n`})}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u624B\\u52A8\\u4EE3\\u7801\\u5BA1\\u67E5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u624B\\u52A8\\u4EE3\\u7801\\u5BA1\\u67E5\\u6D89\\u53CA\\u5F00\\u53D1\\u4EBA\\u5458\\u68C0\\u67E5\\u5F7C\\u6B64\\u7684\\u4EE3\\u7801\\u4EE5\\u8BC6\\u522B\\u6F5C\\u5728\\u7684\\u5B89\\u5168\\u95EE\\u9898\\u3002\\u8FD9\\u79CD\\u6280\\u672F\\u662F\\u6709\\u6548\\u7684\\uFF0C\\u56E0\\u4E3A\\u5B83\\u5229\\u7528\\u4E86\\u4EBA\\u7C7B\\u7684\\u76F4\\u89C9\\u548C\\u7ECF\\u9A8C\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B89\\u5168\\u7F16\\u7801\\u5B9E\\u8DF5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9075\\u5B88\\u5B89\\u5168\\u7F16\\u7801\\u5B9E\\u8DF5\\u53EF\\u4EE5\\u5E2E\\u52A9\\u9632\\u6B62\\u9996\\u5148\\u5F15\\u5165\\u5B89\\u5168\\u6F0F\\u6D1E\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8F93\\u5165\\u9A8C\\u8BC1\"}),\"\\uFF1A\\u59CB\\u7EC8\\u9A8C\\u8BC1\\u548C\\u6E05\\u7406\\u7528\\u6237\\u8F93\\u5165\\uFF0C\\u4EE5\\u9632\\u6B62\\u6CE8\\u5165\\u653B\\u51FB\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8F93\\u51FA\\u7F16\\u7801\"}),\"\\uFF1A\\u5728\\u5448\\u73B0\\u6570\\u636E\\u4E4B\\u524D\\u5BF9\\u5176\\u8FDB\\u884C\\u7F16\\u7801\\uFF0C\\u4EE5\\u9632\\u6B62\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS) \\u653B\\u51FB\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F7F\\u7528 HTTPS\"}),\"\\uFF1A\\u786E\\u4FDD\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u4F7F\\u7528 HTTPS \\u5BF9\\u4F20\\u8F93\\u4E2D\\u7684\\u6570\\u636E\\u8FDB\\u884C\\u52A0\\u5BC6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6700\\u5C0F\\u6743\\u9650\\u539F\\u5219\"}),\"\\uFF1A\\u5411\\u7528\\u6237\\u548C\\u670D\\u52A1\\u6388\\u4E88\\u6700\\u4F4E\\u9650\\u5EA6\\u7684\\u5FC5\\u8981\\u6743\\u9650\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://owasp.org/www-project-top-ten/\",children:\"OWASP Top Ten\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eslint.org/\",children:\"ESLint\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.sonarqube.org/\",children:\"SonarQube\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.zaproxy.org/\",children:\"OWASP ZAP\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://portswigger.net/burp\",children:\"Burp Suite\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://docs.npmjs.com/cli/v7/commands/npm-audit\",children:\"npm audit\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://snyk.io/\",children:\"Snyk\"})}),`\n`]})]})}function y(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(a,r)})):a(r)}var j=y;return w(P);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var f=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),w=(r,n)=>{for(var i in n)c(r,i,{get:n[i],enumerable:!0})},d=(r,n,i,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of g(n))!S.call(r,l)&&l!==i&&c(r,l,{get:()=>n[l],enumerable:!(h=u(n,l))||h.enumerable});return r};var x=(r,n,i)=>(i=r!=null?p(m(r)):{},d(n||!r||!r.__esModule?c(i,\"default\",{value:r,enumerable:!0}):i,r)),y=r=>d(c({},\"__esModule\",{value:!0}),r);var s=f((v,t)=>{t.exports=_jsx_runtime});var P={};w(P,{default:()=>o,frontmatter:()=>b});var e=x(s()),b={title:\"\\u6709\\u54EA\\u4E9B\\u7528\\u4E8E\\u8BC6\\u522B JavaScript \\u4EE3\\u7801\\u4E2D\\u5B89\\u5168\\u6F0F\\u6D1E\\u7684\\u5DE5\\u5177\\u548C\\u6280\\u672F\\uFF1F\"};function a(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8981\\u8BC6\\u522B JavaScript \\u4EE3\\u7801\\u4E2D\\u7684\\u5B89\\u5168\\u6F0F\\u6D1E\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u9759\\u6001\\u4EE3\\u7801\\u5206\\u6790\\u5DE5\\u5177\\uFF08\\u5982\\u5E26\\u6709\\u5B89\\u5168\\u63D2\\u4EF6\\u7684 ESLint\\uFF09\\u3001\\u52A8\\u6001\\u5206\\u6790\\u5DE5\\u5177\\uFF08\\u5982 OWASP ZAP\\uFF09\\u548C\\u4F9D\\u8D56\\u9879\\u68C0\\u67E5\\u5668\\uFF08\\u5982 npm audit\\uFF09\\u3002\\u6B64\\u5916\\uFF0C\\u624B\\u52A8\\u4EE3\\u7801\\u5BA1\\u67E5\\u548C\\u9075\\u5B88\\u5B89\\u5168\\u7F16\\u7801\\u5B9E\\u8DF5\\u662F\\u5FC5\\u4E0D\\u53EF\\u5C11\\u7684\\u6280\\u672F\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7528\\u4E8E\\u8BC6\\u522B JavaScript \\u4EE3\\u7801\\u4E2D\\u5B89\\u5168\\u6F0F\\u6D1E\\u7684\\u5DE5\\u5177\\u548C\\u6280\\u672F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9759\\u6001\\u4EE3\\u7801\\u5206\\u6790\\u5DE5\\u5177\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9759\\u6001\\u4EE3\\u7801\\u5206\\u6790\\u5DE5\\u5177\\u5728\\u4E0D\\u6267\\u884C\\u4EE3\\u7801\\u7684\\u60C5\\u51B5\\u4E0B\\u68C0\\u67E5\\u60A8\\u7684\\u4EE3\\u7801\\u3002\\u5B83\\u4EEC\\u53EF\\u4EE5\\u901A\\u8FC7\\u5206\\u6790\\u4EE3\\u7801\\u7ED3\\u6784\\u548C\\u6A21\\u5F0F\\u6765\\u8BC6\\u522B\\u6F5C\\u5728\\u7684\\u5B89\\u5168\\u6F0F\\u6D1E\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"ESLint\"}),\"\\uFF1A\\u4E00\\u4E2A\\u6D41\\u884C\\u7684 JavaScript \\u68C0\\u67E5\\u5DE5\\u5177\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u5B89\\u5168\\u63D2\\u4EF6\\uFF08\\u5982 \",(0,e.jsx)(n.code,{children:\"eslint-plugin-security\"}),\"\\uFF09\\u8FDB\\u884C\\u6269\\u5C55\\uFF0C\\u4EE5\\u6355\\u83B7\\u5E38\\u89C1\\u7684\\u5B89\\u5168\\u95EE\\u9898\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-bash\",children:`npm install eslint eslint-plugin-security --save-dev\n`})}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// .eslintrc.json\n{\n  \"plugins\": [\"security\"],\n  \"extends\": [\"plugin:security/recommended\"]\n}\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"SonarQube\"}),\"\\uFF1A\\u4E00\\u4E2A\\u63D0\\u4F9B\\u4EE3\\u7801\\u8D28\\u91CF\\u548C\\u5B89\\u5168\\u6F0F\\u6D1E\\u6301\\u7EED\\u68C0\\u67E5\\u7684\\u5E73\\u53F0\\u3002\\u5B83\\u652F\\u6301 JavaScript \\u5E76\\u4E0E\\u5404\\u79CD CI/CD \\u7BA1\\u9053\\u96C6\\u6210\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u52A8\\u6001\\u5206\\u6790\\u5DE5\\u5177\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u52A8\\u6001\\u5206\\u6790\\u5DE5\\u5177\\u5728\\u5E94\\u7528\\u7A0B\\u5E8F\\u8FD0\\u884C\\u65F6\\u5BF9\\u5176\\u8FDB\\u884C\\u6D4B\\u8BD5\\uFF0C\\u4EE5\\u8BC6\\u522B\\u5B89\\u5168\\u6F0F\\u6D1E\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"OWASP ZAP (Zed Attack Proxy)\"}),\"\\uFF1A\\u4E00\\u4E2A\\u7528\\u4E8E\\u67E5\\u627E Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u5B89\\u5168\\u6F0F\\u6D1E\\u7684\\u5F00\\u6E90\\u5DE5\\u5177\\u3002\\u5B83\\u53EF\\u7528\\u4E8E\\u6267\\u884C\\u81EA\\u52A8\\u5316\\u626B\\u63CF\\u548C\\u624B\\u52A8\\u6D4B\\u8BD5\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-bash\",children:`zap.sh -daemon -port 8080 -config api.disablekey=true\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"Burp Suite\"}),\"\\uFF1A\\u4E00\\u4E2A\\u7528\\u4E8E Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u5B89\\u5168\\u6D4B\\u8BD5\\u7684\\u7EFC\\u5408\\u5E73\\u53F0\\u3002\\u5B83\\u5305\\u62EC\\u7528\\u4E8E\\u626B\\u63CF\\u3001\\u722C\\u53D6\\u548C\\u5229\\u7528\\u6F0F\\u6D1E\\u7684\\u5DE5\\u5177\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F9D\\u8D56\\u9879\\u68C0\\u67E5\\u5668\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F9D\\u8D56\\u9879\\u68C0\\u67E5\\u5668\\u5206\\u6790\\u60A8\\u7684\\u9879\\u76EE\\u6240\\u4F9D\\u8D56\\u7684\\u7B2C\\u4E09\\u65B9\\u5E93\\u548C\\u5305\\uFF0C\\u4EE5\\u8BC6\\u522B\\u5DF2\\u77E5\\u7684\\u6F0F\\u6D1E\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"npm audit\"}),\"\\uFF1Anpm \\u7684\\u4E00\\u4E2A\\u5185\\u7F6E\\u5DE5\\u5177\\uFF0C\\u7528\\u4E8E\\u68C0\\u67E5\\u60A8\\u7684\\u9879\\u76EE\\u4F9D\\u8D56\\u9879\\u4E2D\\u7684\\u6F0F\\u6D1E\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-bash\",children:`npm audit\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"Snyk\"}),\"\\uFF1A\\u4E00\\u4E2A\\u6301\\u7EED\\u76D1\\u63A7\\u60A8\\u7684\\u4F9D\\u8D56\\u9879\\u662F\\u5426\\u5B58\\u5728\\u6F0F\\u6D1E\\u5E76\\u63D0\\u4F9B\\u4FEE\\u590D\\u7684\\u5DE5\\u5177\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-bash\",children:`snyk test\n`})}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u624B\\u52A8\\u4EE3\\u7801\\u5BA1\\u67E5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u624B\\u52A8\\u4EE3\\u7801\\u5BA1\\u67E5\\u6D89\\u53CA\\u5F00\\u53D1\\u4EBA\\u5458\\u68C0\\u67E5\\u5F7C\\u6B64\\u7684\\u4EE3\\u7801\\u4EE5\\u8BC6\\u522B\\u6F5C\\u5728\\u7684\\u5B89\\u5168\\u95EE\\u9898\\u3002\\u8FD9\\u79CD\\u6280\\u672F\\u662F\\u6709\\u6548\\u7684\\uFF0C\\u56E0\\u4E3A\\u5B83\\u5229\\u7528\\u4E86\\u4EBA\\u7C7B\\u7684\\u76F4\\u89C9\\u548C\\u7ECF\\u9A8C\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B89\\u5168\\u7F16\\u7801\\u5B9E\\u8DF5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9075\\u5B88\\u5B89\\u5168\\u7F16\\u7801\\u5B9E\\u8DF5\\u53EF\\u4EE5\\u5E2E\\u52A9\\u9632\\u6B62\\u9996\\u5148\\u5F15\\u5165\\u5B89\\u5168\\u6F0F\\u6D1E\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8F93\\u5165\\u9A8C\\u8BC1\"}),\"\\uFF1A\\u59CB\\u7EC8\\u9A8C\\u8BC1\\u548C\\u6E05\\u7406\\u7528\\u6237\\u8F93\\u5165\\uFF0C\\u4EE5\\u9632\\u6B62\\u6CE8\\u5165\\u653B\\u51FB\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8F93\\u51FA\\u7F16\\u7801\"}),\"\\uFF1A\\u5728\\u5448\\u73B0\\u6570\\u636E\\u4E4B\\u524D\\u5BF9\\u5176\\u8FDB\\u884C\\u7F16\\u7801\\uFF0C\\u4EE5\\u9632\\u6B62\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS) \\u653B\\u51FB\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F7F\\u7528 HTTPS\"}),\"\\uFF1A\\u786E\\u4FDD\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u4F7F\\u7528 HTTPS \\u5BF9\\u4F20\\u8F93\\u4E2D\\u7684\\u6570\\u636E\\u8FDB\\u884C\\u52A0\\u5BC6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6700\\u5C0F\\u6743\\u9650\\u539F\\u5219\"}),\"\\uFF1A\\u5411\\u7528\\u6237\\u548C\\u670D\\u52A1\\u6388\\u4E88\\u6700\\u4F4E\\u9650\\u5EA6\\u7684\\u5FC5\\u8981\\u6743\\u9650\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://owasp.org/www-project-top-ten/\",children:\"OWASP Top Ten\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eslint.org/\",children:\"ESLint\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.sonarqube.org/\",children:\"SonarQube\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.zaproxy.org/\",children:\"OWASP ZAP\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://portswigger.net/burp\",children:\"Burp Suite\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://docs.npmjs.com/cli/v7/commands/npm-audit\",children:\"npm audit\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://snyk.io/\",children:\"Snyk\"})}),`\n`]})]})}function o(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(a,{...r})}):a(r)}return y(P);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-tools-that-can-be-used-for-javascript-testing/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-some-tools-that-can-be-used-for-javascript-testing/en-US.json
index 37732e032..f7313ee5c 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-tools-that-can-be-used-for-javascript-testing/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-tools-that-can-be-used-for-javascript-testing/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-some-tools-that-can-be-used-for-javascript-testing/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},a=(t,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of u(e))!g.call(t,s)&&s!==i&&r(t,s,{get:()=>e[s],enumerable:!(o=p(e,s))||o.enumerable});return t};var b=(t,e,i)=>(i=t!=null?d(m(t)):{},a(e||!t||!t.__esModule?r(i,\"default\",{value:t,enumerable:!0}):i,t)),w=t=>a(r({},\"__esModule\",{value:!0}),t);var l=y((C,c)=>{c.exports=_jsx_runtime});var k={};f(k,{default:()=>J,frontmatter:()=>v});var n=b(l()),v={title:\"What are some tools that can be used for JavaScript testing?\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"For JavaScript testing, you can use tools like Jest, Mocha, Jasmine, and Cypress. Jest is popular for its ease of use and built-in features. Mocha is flexible and can be paired with other libraries. Jasmine is known for its simplicity and behavior-driven development (BDD) style. Cypress is great for end-to-end testing with a focus on real browser interactions.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Tools for JavaScript testing\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Jest\"}),`\n`,(0,n.jsx)(e.p,{children:\"Jest is a popular testing framework developed by Facebook. It is widely used for testing JavaScript applications, especially those built with React.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Ease of use\"}),\": Jest comes with a lot of built-in features, making it easy to set up and start testing.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Snapshot testing\"}),\": Jest allows you to capture snapshots of your components and compare them during future test runs.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Mocking\"}),\": Jest has powerful mocking capabilities, which makes it easy to mock functions, modules, and timers.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Code coverage\"}),\": Jest provides built-in code coverage reports.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example of a simple test using Jest:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const sum = (a, b) => a + b;\n\ntest('adds 1 + 2 to equal 3', () => {\n  expect(sum(1, 2)).toBe(3);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Mocha\"}),`\n`,(0,n.jsx)(e.p,{children:\"Mocha is a flexible testing framework that can be used with various assertion libraries and mocking tools.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Flexibility\"}),\": Mocha allows you to choose your own assertion library (e.g., Chai) and mocking tools (e.g., Sinon).\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Asynchronous testing\"}),\": Mocha has excellent support for asynchronous testing.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Browser support\"}),\": Mocha can be run in both Node.js and the browser.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example of a simple test using Mocha and Chai:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const { expect } = require('chai');\n\ndescribe('Array', () => {\n  it('should return -1 when the value is not present', () => {\n    expect([1, 2, 3].indexOf(4)).to.equal(-1);\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Jasmine\"}),`\n`,(0,n.jsx)(e.p,{children:\"Jasmine is a behavior-driven development (BDD) framework for testing JavaScript code. It is known for its simplicity and ease of use.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Simplicity\"}),\": Jasmine comes with everything you need to start testing, including an assertion library and mocking tools.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"BDD style\"}),\": Jasmine encourages writing tests in a BDD style, which can make your tests more readable.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example of a simple test using Jasmine:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`describe('A suite', () => {\n  it('contains a spec with an expectation', () => {\n    expect(true).toBe(true);\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Cypress\"}),`\n`,(0,n.jsx)(e.p,{children:\"Cypress is an end-to-end testing framework that focuses on real browser interactions.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Real browser testing\"}),\": Cypress runs tests in the browser, providing a more accurate representation of user interactions.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Time travel\"}),\": Cypress allows you to go back in time to see what happened at each step of your test.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Automatic waiting\"}),\": Cypress automatically waits for elements to appear and actions to complete, reducing the need for manual waits.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example of a simple test using Cypress:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`describe('My First Test', () => {\n  it('Visits the Kitchen Sink', () => {\n    cy.visit('https://example.cypress.io');\n    cy.contains('type').click();\n    cy.url().should('include', '/commands/actions');\n    cy.get('.action-email')\n      .type('fake@email.com')\n      .should('have.value', 'fake@email.com');\n  });\n});\n`})}),`\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://jestjs.io/docs/getting-started\",children:\"Jest documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://mochajs.org/\",children:\"Mocha documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jasmine.github.io/\",children:\"Jasmine documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://docs.cypress.io/guides/overview/why-cypress\",children:\"Cypress documentation\"})}),`\n`]})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var J=x;return w(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},a=(t,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!y.call(t,s)&&s!==i&&r(t,s,{get:()=>e[s],enumerable:!(o=u(e,s))||o.enumerable});return t};var b=(t,e,i)=>(i=t!=null?p(g(t)):{},a(e||!t||!t.__esModule?r(i,\"default\",{value:t,enumerable:!0}):i,t)),v=t=>a(r({},\"__esModule\",{value:!0}),t);var l=f((j,c)=>{c.exports=_jsx_runtime});var J={};w(J,{default:()=>d,frontmatter:()=>x});var n=b(l()),x={title:\"What are some tools that can be used for JavaScript testing?\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"For JavaScript testing, you can use tools like Jest, Mocha, Jasmine, and Cypress. Jest is popular for its ease of use and built-in features. Mocha is flexible and can be paired with other libraries. Jasmine is known for its simplicity and behavior-driven development (BDD) style. Cypress is great for end-to-end testing with a focus on real browser interactions.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Tools for JavaScript testing\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Jest\"}),`\n`,(0,n.jsx)(e.p,{children:\"Jest is a popular testing framework developed by Facebook. It is widely used for testing JavaScript applications, especially those built with React.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Ease of use\"}),\": Jest comes with a lot of built-in features, making it easy to set up and start testing.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Snapshot testing\"}),\": Jest allows you to capture snapshots of your components and compare them during future test runs.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Mocking\"}),\": Jest has powerful mocking capabilities, which makes it easy to mock functions, modules, and timers.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Code coverage\"}),\": Jest provides built-in code coverage reports.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example of a simple test using Jest:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const sum = (a, b) => a + b;\n\ntest('adds 1 + 2 to equal 3', () => {\n  expect(sum(1, 2)).toBe(3);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Mocha\"}),`\n`,(0,n.jsx)(e.p,{children:\"Mocha is a flexible testing framework that can be used with various assertion libraries and mocking tools.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Flexibility\"}),\": Mocha allows you to choose your own assertion library (e.g., Chai) and mocking tools (e.g., Sinon).\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Asynchronous testing\"}),\": Mocha has excellent support for asynchronous testing.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Browser support\"}),\": Mocha can be run in both Node.js and the browser.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example of a simple test using Mocha and Chai:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const { expect } = require('chai');\n\ndescribe('Array', () => {\n  it('should return -1 when the value is not present', () => {\n    expect([1, 2, 3].indexOf(4)).to.equal(-1);\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Jasmine\"}),`\n`,(0,n.jsx)(e.p,{children:\"Jasmine is a behavior-driven development (BDD) framework for testing JavaScript code. It is known for its simplicity and ease of use.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Simplicity\"}),\": Jasmine comes with everything you need to start testing, including an assertion library and mocking tools.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"BDD style\"}),\": Jasmine encourages writing tests in a BDD style, which can make your tests more readable.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example of a simple test using Jasmine:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`describe('A suite', () => {\n  it('contains a spec with an expectation', () => {\n    expect(true).toBe(true);\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Cypress\"}),`\n`,(0,n.jsx)(e.p,{children:\"Cypress is an end-to-end testing framework that focuses on real browser interactions.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Real browser testing\"}),\": Cypress runs tests in the browser, providing a more accurate representation of user interactions.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Time travel\"}),\": Cypress allows you to go back in time to see what happened at each step of your test.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Automatic waiting\"}),\": Cypress automatically waits for elements to appear and actions to complete, reducing the need for manual waits.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example of a simple test using Cypress:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`describe('My First Test', () => {\n  it('Visits the Kitchen Sink', () => {\n    cy.visit('https://example.cypress.io');\n    cy.contains('type').click();\n    cy.url().should('include', '/commands/actions');\n    cy.get('.action-email')\n      .type('fake@email.com')\n      .should('have.value', 'fake@email.com');\n  });\n});\n`})}),`\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://jestjs.io/docs/getting-started\",children:\"Jest documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://mochajs.org/\",children:\"Mocha documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jasmine.github.io/\",children:\"Jasmine documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://docs.cypress.io/guides/overview/why-cypress\",children:\"Cypress documentation\"})}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return v(J);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-tools-that-can-be-used-for-javascript-testing/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-some-tools-that-can-be-used-for-javascript-testing/zh-CN.json
index 18c74201c..2ee291945 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-tools-that-can-be-used-for-javascript-testing/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-tools-that-can-be-used-for-javascript-testing/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-some-tools-that-can-be-used-for-javascript-testing/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var o=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var J=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),y=(i,n)=>{for(var c in n)s(i,c,{get:n[c],enumerable:!0})},l=(i,n,c,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of u(n))!g.call(i,r)&&r!==c&&s(i,r,{get:()=>n[r],enumerable:!(t=p(n,r))||t.enumerable});return i};var j=(i,n,c)=>(c=i!=null?o(m(i)):{},l(n||!i||!i.__esModule?s(c,\"default\",{value:i,enumerable:!0}):c,i)),x=i=>l(s({},\"__esModule\",{value:!0}),i);var a=J((b,h)=>{h.exports=_jsx_runtime});var v={};y(v,{default:()=>f,frontmatter:()=>M});var e=j(a()),M={title:\"\\u6709\\u54EA\\u4E9B\\u53EF\\u7528\\u4E8E JavaScript \\u6D4B\\u8BD5\\u7684\\u5DE5\\u5177\\uFF1F\"};function d(i){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",a:\"a\"},i.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5BF9\\u4E8E JavaScript \\u6D4B\\u8BD5\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 Jest\\u3001Mocha\\u3001Jasmine \\u548C Cypress \\u7B49\\u5DE5\\u5177\\u3002 Jest \\u56E0\\u5176\\u6613\\u7528\\u6027\\u548C\\u5185\\u7F6E\\u529F\\u80FD\\u800C\\u5E7F\\u53D7\\u6B22\\u8FCE\\u3002 Mocha \\u5177\\u6709\\u7075\\u6D3B\\u6027\\uFF0C\\u53EF\\u4EE5\\u4E0E\\u5176\\u4ED6\\u5E93\\u914D\\u5BF9\\u3002 Jasmine \\u4EE5\\u5176\\u7B80\\u5355\\u6027\\u548C\\u884C\\u4E3A\\u9A71\\u52A8\\u5F00\\u53D1 (BDD) \\u98CE\\u683C\\u800C\\u95FB\\u540D\\u3002 Cypress \\u975E\\u5E38\\u9002\\u5408\\u7AEF\\u5230\\u7AEF\\u6D4B\\u8BD5\\uFF0C\\u4FA7\\u91CD\\u4E8E\\u771F\\u5B9E\\u7684\\u6D4F\\u89C8\\u5668\\u4EA4\\u4E92\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"JavaScript \\u6D4B\\u8BD5\\u5DE5\\u5177\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Jest\"}),`\n`,(0,e.jsx)(n.p,{children:\"Jest \\u662F Facebook \\u5F00\\u53D1\\u7684\\u4E00\\u4E2A\\u6D41\\u884C\\u7684\\u6D4B\\u8BD5\\u6846\\u67B6\\u3002 \\u5B83\\u88AB\\u5E7F\\u6CDB\\u7528\\u4E8E\\u6D4B\\u8BD5 JavaScript \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u5C24\\u5176\\u662F\\u90A3\\u4E9B\\u4F7F\\u7528 React \\u6784\\u5EFA\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6613\\u4E8E\\u4F7F\\u7528\"}),\"\\uFF1AJest \\u5E26\\u6709\\u8BB8\\u591A\\u5185\\u7F6E\\u529F\\u80FD\\uFF0C\\u4F7F\\u5176\\u6613\\u4E8E\\u8BBE\\u7F6E\\u548C\\u5F00\\u59CB\\u6D4B\\u8BD5\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5FEB\\u7167\\u6D4B\\u8BD5\"}),\"\\uFF1AJest \\u5141\\u8BB8\\u60A8\\u6355\\u83B7\\u7EC4\\u4EF6\\u7684\\u5FEB\\u7167\\u5E76\\u5728\\u5C06\\u6765\\u7684\\u6D4B\\u8BD5\\u8FD0\\u884C\\u671F\\u95F4\\u8FDB\\u884C\\u6BD4\\u8F83\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Mocking\"}),\"\\uFF1AJest \\u5177\\u6709\\u5F3A\\u5927\\u7684\\u6A21\\u62DF\\u529F\\u80FD\\uFF0C\\u8FD9\\u4F7F\\u5F97\\u6A21\\u62DF\\u51FD\\u6570\\u3001\\u6A21\\u5757\\u548C\\u8BA1\\u65F6\\u5668\\u53D8\\u5F97\\u5BB9\\u6613\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4EE3\\u7801\\u8986\\u76D6\\u7387\"}),\"\\uFF1AJest \\u63D0\\u4F9B\\u5185\\u7F6E\\u7684\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u62A5\\u544A\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528 Jest \\u7684\\u7B80\\u5355\\u6D4B\\u8BD5\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const sum = (a, b) => a + b;\n\ntest('adds 1 + 2 to equal 3', () => {\n  expect(sum(1, 2)).toBe(3);\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Mocha\"}),`\n`,(0,e.jsx)(n.p,{children:\"Mocha \\u662F\\u4E00\\u4E2A\\u7075\\u6D3B\\u7684\\u6D4B\\u8BD5\\u6846\\u67B6\\uFF0C\\u53EF\\u4EE5\\u4E0E\\u5404\\u79CD\\u65AD\\u8A00\\u5E93\\u548C\\u6A21\\u62DF\\u5DE5\\u5177\\u4E00\\u8D77\\u4F7F\\u7528\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7075\\u6D3B\\u6027\"}),\"\\uFF1AMocha \\u5141\\u8BB8\\u60A8\\u9009\\u62E9\\u81EA\\u5DF1\\u7684\\u65AD\\u8A00\\u5E93\\uFF08\\u4F8B\\u5982\\uFF0CChai\\uFF09\\u548C\\u6A21\\u62DF\\u5DE5\\u5177\\uFF08\\u4F8B\\u5982\\uFF0CSinon\\uFF09\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5F02\\u6B65\\u6D4B\\u8BD5\"}),\"\\uFF1AMocha \\u5177\\u6709\\u51FA\\u8272\\u7684\\u5F02\\u6B65\\u6D4B\\u8BD5\\u652F\\u6301\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6D4F\\u89C8\\u5668\\u652F\\u6301\"}),\"\\uFF1AMocha \\u53EF\\u4EE5\\u5728 Node.js \\u548C\\u6D4F\\u89C8\\u5668\\u4E2D\\u8FD0\\u884C\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528 Mocha \\u548C Chai \\u7684\\u7B80\\u5355\\u6D4B\\u8BD5\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const { expect } = require('chai');\n\ndescribe('Array', () => {\n  it('should return -1 when the value is not present', () => {\n    expect([1, 2, 3].indexOf(4)).to.equal(-1);\n  });\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Jasmine\"}),`\n`,(0,e.jsx)(n.p,{children:\"Jasmine \\u662F\\u4E00\\u4E2A\\u7528\\u4E8E\\u6D4B\\u8BD5 JavaScript \\u4EE3\\u7801\\u7684\\u884C\\u4E3A\\u9A71\\u52A8\\u5F00\\u53D1 (BDD) \\u6846\\u67B6\\u3002 \\u5B83\\u4EE5\\u5176\\u7B80\\u5355\\u6027\\u548C\\u6613\\u7528\\u6027\\u800C\\u95FB\\u540D\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7B80\\u5355\\u6027\"}),\"\\uFF1AJasmine \\u9644\\u5E26\\u4E86\\u60A8\\u5F00\\u59CB\\u6D4B\\u8BD5\\u6240\\u9700\\u7684\\u4E00\\u5207\\uFF0C\\u5305\\u62EC\\u65AD\\u8A00\\u5E93\\u548C\\u6A21\\u62DF\\u5DE5\\u5177\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"BDD \\u98CE\\u683C\"}),\"\\uFF1AJasmine \\u9F13\\u52B1\\u4EE5 BDD \\u98CE\\u683C\\u7F16\\u5199\\u6D4B\\u8BD5\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u4F7F\\u60A8\\u7684\\u6D4B\\u8BD5\\u66F4\\u5177\\u53EF\\u8BFB\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528 Jasmine \\u7684\\u7B80\\u5355\\u6D4B\\u8BD5\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`describe('A suite', () => {\n  it('contains a spec with an expectation', () => {\n    expect(true).toBe(true);\n  });\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Cypress\"}),`\n`,(0,e.jsx)(n.p,{children:\"Cypress \\u662F\\u4E00\\u4E2A\\u7AEF\\u5230\\u7AEF\\u6D4B\\u8BD5\\u6846\\u67B6\\uFF0C\\u4E13\\u6CE8\\u4E8E\\u771F\\u5B9E\\u7684\\u6D4F\\u89C8\\u5668\\u4EA4\\u4E92\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u771F\\u5B9E\\u6D4F\\u89C8\\u5668\\u6D4B\\u8BD5\"}),\"\\uFF1ACypress \\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u8FD0\\u884C\\u6D4B\\u8BD5\\uFF0C\\u63D0\\u4F9B\\u66F4\\u51C6\\u786E\\u7684\\u7528\\u6237\\u4EA4\\u4E92\\u8868\\u793A\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u65F6\\u95F4\\u65C5\\u884C\"}),\"\\uFF1ACypress \\u5141\\u8BB8\\u60A8\\u56DE\\u6EAF\\u65F6\\u95F4\\uFF0C\\u67E5\\u770B\\u6D4B\\u8BD5\\u7684\\u6BCF\\u4E2A\\u6B65\\u9AA4\\u53D1\\u751F\\u4E86\\u4EC0\\u4E48\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u81EA\\u52A8\\u7B49\\u5F85\"}),\"\\uFF1ACypress \\u81EA\\u52A8\\u7B49\\u5F85\\u5143\\u7D20\\u51FA\\u73B0\\u548C\\u64CD\\u4F5C\\u5B8C\\u6210\\uFF0C\\u51CF\\u5C11\\u4E86\\u624B\\u52A8\\u7B49\\u5F85\\u7684\\u9700\\u8981\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528 Cypress \\u7684\\u7B80\\u5355\\u6D4B\\u8BD5\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`describe('My First Test', () => {\n  it('Visits the Kitchen Sink', () => {\n    cy.visit('https://example.cypress.io');\n    cy.contains('type').click();\n    cy.url().should('include', '/commands/actions');\n    cy.get('.action-email')\n      .type('fake@email.com')\n      .should('have.value', 'fake@email.com');\n  });\n});\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://jestjs.io/docs/getting-started\",children:\"Jest documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://mochajs.org/\",children:\"Mocha documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://jasmine.github.io/\",children:\"Jasmine documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://docs.cypress.io/guides/overview/why-cypress\",children:\"Cypress documentation\"})}),`\n`]})]})}function C(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,Object.assign({},i,{children:(0,e.jsx)(d,i)})):d(i)}var f=C;return x(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,J=Object.prototype.hasOwnProperty;var y=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),x=(i,n)=>{for(var r in n)s(i,r,{get:n[r],enumerable:!0})},l=(i,n,r,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of m(n))!J.call(i,c)&&c!==r&&s(i,c,{get:()=>n[c],enumerable:!(t=u(n,c))||t.enumerable});return i};var j=(i,n,r)=>(r=i!=null?p(g(i)):{},l(n||!i||!i.__esModule?s(r,\"default\",{value:i,enumerable:!0}):r,i)),M=i=>l(s({},\"__esModule\",{value:!0}),i);var a=y((D,h)=>{h.exports=_jsx_runtime});var f={};x(f,{default:()=>o,frontmatter:()=>C});var e=j(a()),C={title:\"\\u6709\\u54EA\\u4E9B\\u53EF\\u7528\\u4E8E JavaScript \\u6D4B\\u8BD5\\u7684\\u5DE5\\u5177\\uFF1F\"};function d(i){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5BF9\\u4E8E JavaScript \\u6D4B\\u8BD5\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 Jest\\u3001Mocha\\u3001Jasmine \\u548C Cypress \\u7B49\\u5DE5\\u5177\\u3002 Jest \\u56E0\\u5176\\u6613\\u7528\\u6027\\u548C\\u5185\\u7F6E\\u529F\\u80FD\\u800C\\u5E7F\\u53D7\\u6B22\\u8FCE\\u3002 Mocha \\u5177\\u6709\\u7075\\u6D3B\\u6027\\uFF0C\\u53EF\\u4EE5\\u4E0E\\u5176\\u4ED6\\u5E93\\u914D\\u5BF9\\u3002 Jasmine \\u4EE5\\u5176\\u7B80\\u5355\\u6027\\u548C\\u884C\\u4E3A\\u9A71\\u52A8\\u5F00\\u53D1 (BDD) \\u98CE\\u683C\\u800C\\u95FB\\u540D\\u3002 Cypress \\u975E\\u5E38\\u9002\\u5408\\u7AEF\\u5230\\u7AEF\\u6D4B\\u8BD5\\uFF0C\\u4FA7\\u91CD\\u4E8E\\u771F\\u5B9E\\u7684\\u6D4F\\u89C8\\u5668\\u4EA4\\u4E92\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"JavaScript \\u6D4B\\u8BD5\\u5DE5\\u5177\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Jest\"}),`\n`,(0,e.jsx)(n.p,{children:\"Jest \\u662F Facebook \\u5F00\\u53D1\\u7684\\u4E00\\u4E2A\\u6D41\\u884C\\u7684\\u6D4B\\u8BD5\\u6846\\u67B6\\u3002 \\u5B83\\u88AB\\u5E7F\\u6CDB\\u7528\\u4E8E\\u6D4B\\u8BD5 JavaScript \\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u5C24\\u5176\\u662F\\u90A3\\u4E9B\\u4F7F\\u7528 React \\u6784\\u5EFA\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6613\\u4E8E\\u4F7F\\u7528\"}),\"\\uFF1AJest \\u5E26\\u6709\\u8BB8\\u591A\\u5185\\u7F6E\\u529F\\u80FD\\uFF0C\\u4F7F\\u5176\\u6613\\u4E8E\\u8BBE\\u7F6E\\u548C\\u5F00\\u59CB\\u6D4B\\u8BD5\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5FEB\\u7167\\u6D4B\\u8BD5\"}),\"\\uFF1AJest \\u5141\\u8BB8\\u60A8\\u6355\\u83B7\\u7EC4\\u4EF6\\u7684\\u5FEB\\u7167\\u5E76\\u5728\\u5C06\\u6765\\u7684\\u6D4B\\u8BD5\\u8FD0\\u884C\\u671F\\u95F4\\u8FDB\\u884C\\u6BD4\\u8F83\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Mocking\"}),\"\\uFF1AJest \\u5177\\u6709\\u5F3A\\u5927\\u7684\\u6A21\\u62DF\\u529F\\u80FD\\uFF0C\\u8FD9\\u4F7F\\u5F97\\u6A21\\u62DF\\u51FD\\u6570\\u3001\\u6A21\\u5757\\u548C\\u8BA1\\u65F6\\u5668\\u53D8\\u5F97\\u5BB9\\u6613\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4EE3\\u7801\\u8986\\u76D6\\u7387\"}),\"\\uFF1AJest \\u63D0\\u4F9B\\u5185\\u7F6E\\u7684\\u4EE3\\u7801\\u8986\\u76D6\\u7387\\u62A5\\u544A\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528 Jest \\u7684\\u7B80\\u5355\\u6D4B\\u8BD5\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const sum = (a, b) => a + b;\n\ntest('adds 1 + 2 to equal 3', () => {\n  expect(sum(1, 2)).toBe(3);\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Mocha\"}),`\n`,(0,e.jsx)(n.p,{children:\"Mocha \\u662F\\u4E00\\u4E2A\\u7075\\u6D3B\\u7684\\u6D4B\\u8BD5\\u6846\\u67B6\\uFF0C\\u53EF\\u4EE5\\u4E0E\\u5404\\u79CD\\u65AD\\u8A00\\u5E93\\u548C\\u6A21\\u62DF\\u5DE5\\u5177\\u4E00\\u8D77\\u4F7F\\u7528\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7075\\u6D3B\\u6027\"}),\"\\uFF1AMocha \\u5141\\u8BB8\\u60A8\\u9009\\u62E9\\u81EA\\u5DF1\\u7684\\u65AD\\u8A00\\u5E93\\uFF08\\u4F8B\\u5982\\uFF0CChai\\uFF09\\u548C\\u6A21\\u62DF\\u5DE5\\u5177\\uFF08\\u4F8B\\u5982\\uFF0CSinon\\uFF09\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5F02\\u6B65\\u6D4B\\u8BD5\"}),\"\\uFF1AMocha \\u5177\\u6709\\u51FA\\u8272\\u7684\\u5F02\\u6B65\\u6D4B\\u8BD5\\u652F\\u6301\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6D4F\\u89C8\\u5668\\u652F\\u6301\"}),\"\\uFF1AMocha \\u53EF\\u4EE5\\u5728 Node.js \\u548C\\u6D4F\\u89C8\\u5668\\u4E2D\\u8FD0\\u884C\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528 Mocha \\u548C Chai \\u7684\\u7B80\\u5355\\u6D4B\\u8BD5\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const { expect } = require('chai');\n\ndescribe('Array', () => {\n  it('should return -1 when the value is not present', () => {\n    expect([1, 2, 3].indexOf(4)).to.equal(-1);\n  });\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Jasmine\"}),`\n`,(0,e.jsx)(n.p,{children:\"Jasmine \\u662F\\u4E00\\u4E2A\\u7528\\u4E8E\\u6D4B\\u8BD5 JavaScript \\u4EE3\\u7801\\u7684\\u884C\\u4E3A\\u9A71\\u52A8\\u5F00\\u53D1 (BDD) \\u6846\\u67B6\\u3002 \\u5B83\\u4EE5\\u5176\\u7B80\\u5355\\u6027\\u548C\\u6613\\u7528\\u6027\\u800C\\u95FB\\u540D\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7B80\\u5355\\u6027\"}),\"\\uFF1AJasmine \\u9644\\u5E26\\u4E86\\u60A8\\u5F00\\u59CB\\u6D4B\\u8BD5\\u6240\\u9700\\u7684\\u4E00\\u5207\\uFF0C\\u5305\\u62EC\\u65AD\\u8A00\\u5E93\\u548C\\u6A21\\u62DF\\u5DE5\\u5177\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"BDD \\u98CE\\u683C\"}),\"\\uFF1AJasmine \\u9F13\\u52B1\\u4EE5 BDD \\u98CE\\u683C\\u7F16\\u5199\\u6D4B\\u8BD5\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u4F7F\\u60A8\\u7684\\u6D4B\\u8BD5\\u66F4\\u5177\\u53EF\\u8BFB\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528 Jasmine \\u7684\\u7B80\\u5355\\u6D4B\\u8BD5\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`describe('A suite', () => {\n  it('contains a spec with an expectation', () => {\n    expect(true).toBe(true);\n  });\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Cypress\"}),`\n`,(0,e.jsx)(n.p,{children:\"Cypress \\u662F\\u4E00\\u4E2A\\u7AEF\\u5230\\u7AEF\\u6D4B\\u8BD5\\u6846\\u67B6\\uFF0C\\u4E13\\u6CE8\\u4E8E\\u771F\\u5B9E\\u7684\\u6D4F\\u89C8\\u5668\\u4EA4\\u4E92\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u771F\\u5B9E\\u6D4F\\u89C8\\u5668\\u6D4B\\u8BD5\"}),\"\\uFF1ACypress \\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u8FD0\\u884C\\u6D4B\\u8BD5\\uFF0C\\u63D0\\u4F9B\\u66F4\\u51C6\\u786E\\u7684\\u7528\\u6237\\u4EA4\\u4E92\\u8868\\u793A\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u65F6\\u95F4\\u65C5\\u884C\"}),\"\\uFF1ACypress \\u5141\\u8BB8\\u60A8\\u56DE\\u6EAF\\u65F6\\u95F4\\uFF0C\\u67E5\\u770B\\u6D4B\\u8BD5\\u7684\\u6BCF\\u4E2A\\u6B65\\u9AA4\\u53D1\\u751F\\u4E86\\u4EC0\\u4E48\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u81EA\\u52A8\\u7B49\\u5F85\"}),\"\\uFF1ACypress \\u81EA\\u52A8\\u7B49\\u5F85\\u5143\\u7D20\\u51FA\\u73B0\\u548C\\u64CD\\u4F5C\\u5B8C\\u6210\\uFF0C\\u51CF\\u5C11\\u4E86\\u624B\\u52A8\\u7B49\\u5F85\\u7684\\u9700\\u8981\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528 Cypress \\u7684\\u7B80\\u5355\\u6D4B\\u8BD5\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`describe('My First Test', () => {\n  it('Visits the Kitchen Sink', () => {\n    cy.visit('https://example.cypress.io');\n    cy.contains('type').click();\n    cy.url().should('include', '/commands/actions');\n    cy.get('.action-email')\n      .type('fake@email.com')\n      .should('have.value', 'fake@email.com');\n  });\n});\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://jestjs.io/docs/getting-started\",children:\"Jest documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://mochajs.org/\",children:\"Mocha documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://jasmine.github.io/\",children:\"Jasmine documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://docs.cypress.io/guides/overview/why-cypress\",children:\"Cypress documentation\"})}),`\n`]})]})}function o(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,{...i,children:(0,e.jsx)(d,{...i})}):d(i)}return M(f);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-tools-that-can-be-used-to-measure-and-analyze-javascript-performance/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-some-tools-that-can-be-used-to-measure-and-analyze-javascript-performance/en-US.json
index 3fbb43b26..ef3a16c05 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-tools-that-can-be-used-to-measure-and-analyze-javascript-performance/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-tools-that-can-be-used-to-measure-and-analyze-javascript-performance/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-some-tools-that-can-be-used-to-measure-and-analyze-javascript-performance/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var t in e)i(n,t,{get:e[t],enumerable:!0})},l=(n,e,t,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of f(e))!u.call(n,o)&&o!==t&&i(n,o,{get:()=>e[o],enumerable:!(a=p(e,o))||a.enumerable});return n};var w=(n,e,t)=>(t=n!=null?d(m(n)):{},l(e||!n||!n.__esModule?i(t,\"default\",{value:n,enumerable:!0}):t,n)),v=n=>l(i({},\"__esModule\",{value:!0}),n);var c=g((J,h)=>{h.exports=_jsx_runtime});var T={};b(T,{default:()=>S,frontmatter:()=>y});var r=w(c()),y={title:\"What are some tools that can be used to measure and analyze JavaScript performance?\"};function s(n){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",code:\"code\",a:\"a\"},n.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsx)(e.p,{children:\"To measure and analyze JavaScript performance, you can use tools like Chrome DevTools, Lighthouse, WebPageTest, and JSPerf. Chrome DevTools provides a Performance panel for profiling, Lighthouse offers audits for performance metrics, WebPageTest allows for detailed performance testing, and JSPerf helps in comparing the performance of different JavaScript snippets.\"}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsx)(e.h2,{children:\"Tools to measure and analyze JavaScript performance\"}),`\n`,(0,r.jsx)(e.h3,{children:\"Chrome DevTools\"}),`\n`,(0,r.jsx)(e.p,{children:\"Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. It provides a Performance panel that allows you to record and analyze the runtime performance of your web application.\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[\"Open Chrome DevTools by pressing \",(0,r.jsx)(e.code,{children:\"F12\"}),\" or \",(0,r.jsx)(e.code,{children:\"Ctrl+Shift+I\"})]}),`\n`,(0,r.jsx)(e.li,{children:\"Navigate to the Performance panel\"}),`\n`,(0,r.jsx)(e.li,{children:'Click the \"Record\" button to start profiling'}),`\n`,(0,r.jsx)(e.li,{children:\"Interact with your web application to capture performance data\"}),`\n`,(0,r.jsx)(e.li,{children:'Click the \"Stop\" button to end profiling and analyze the results'}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"Lighthouse\"}),`\n`,(0,r.jsx)(e.p,{children:\"Lighthouse is an open-source, automated tool for improving the quality of web pages. It provides audits for performance, accessibility, progressive web apps, SEO, and more.\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"Open Chrome DevTools\"}),`\n`,(0,r.jsx)(e.li,{children:\"Navigate to the Lighthouse panel\"}),`\n`,(0,r.jsx)(e.li,{children:\"Select the categories you want to audit (e.g., Performance)\"}),`\n`,(0,r.jsx)(e.li,{children:'Click the \"Generate report\" button'}),`\n`,(0,r.jsx)(e.li,{children:\"Review the generated report for performance insights and recommendations\"}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"WebPageTest\"}),`\n`,(0,r.jsx)(e.p,{children:\"WebPageTest is a free online tool that provides detailed performance testing of web pages. It allows you to run tests from multiple locations around the world using real browsers.\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[\"Go to \",(0,r.jsx)(e.a,{href:\"https://www.webpagetest.org/\",children:\"WebPageTest\"})]}),`\n`,(0,r.jsx)(e.li,{children:\"Enter the URL of the web page you want to test\"}),`\n`,(0,r.jsx)(e.li,{children:\"Select the test location and browser\"}),`\n`,(0,r.jsx)(e.li,{children:'Click the \"Start Test\" button'}),`\n`,(0,r.jsx)(e.li,{children:\"Review the detailed performance report, including metrics like load time, time to first byte, and more\"}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"JSPerf\"}),`\n`,(0,r.jsx)(e.p,{children:\"JSPerf is a tool for comparing the performance of different JavaScript snippets. It allows you to create and run benchmarks to see which code performs better.\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[\"Go to \",(0,r.jsx)(e.a,{href:\"https://jsperf.com/\",children:\"JSPerf\"})]}),`\n`,(0,r.jsx)(e.li,{children:\"Create a new test case by entering different JavaScript snippets\"}),`\n`,(0,r.jsx)(e.li,{children:\"Run the benchmark to compare the performance of the snippets\"}),`\n`,(0,r.jsx)(e.li,{children:\"Review the results to see which snippet performs better\"}),`\n`]}),`\n`,(0,r.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.chrome.com/docs/devtools/evaluate-performance/\",children:\"Chrome DevTools Performance Panel\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developers.google.com/web/tools/lighthouse\",children:\"Lighthouse\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://www.webpagetest.org/\",children:\"WebPageTest\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://jsperf.com/\",children:\"JSPerf\"})}),`\n`]})]})}function P(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,Object.assign({},n,{children:(0,r.jsx)(s,n)})):s(n)}var S=P;return v(T);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var t in e)i(n,t,{get:e[t],enumerable:!0})},a=(n,e,t,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!g.call(n,o)&&o!==t&&i(n,o,{get:()=>e[o],enumerable:!(l=f(e,o))||l.enumerable});return n};var v=(n,e,t)=>(t=n!=null?p(u(n)):{},a(e||!n||!n.__esModule?i(t,\"default\",{value:n,enumerable:!0}):t,n)),y=n=>a(i({},\"__esModule\",{value:!0}),n);var c=w((C,h)=>{h.exports=_jsx_runtime});var S={};b(S,{default:()=>d,frontmatter:()=>P});var r=v(c()),P={title:\"What are some tools that can be used to measure and analyze JavaScript performance?\"};function s(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",ul:\"ul\",...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsx)(e.p,{children:\"To measure and analyze JavaScript performance, you can use tools like Chrome DevTools, Lighthouse, WebPageTest, and JSPerf. Chrome DevTools provides a Performance panel for profiling, Lighthouse offers audits for performance metrics, WebPageTest allows for detailed performance testing, and JSPerf helps in comparing the performance of different JavaScript snippets.\"}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsx)(e.h2,{children:\"Tools to measure and analyze JavaScript performance\"}),`\n`,(0,r.jsx)(e.h3,{children:\"Chrome DevTools\"}),`\n`,(0,r.jsx)(e.p,{children:\"Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. It provides a Performance panel that allows you to record and analyze the runtime performance of your web application.\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[\"Open Chrome DevTools by pressing \",(0,r.jsx)(e.code,{children:\"F12\"}),\" or \",(0,r.jsx)(e.code,{children:\"Ctrl+Shift+I\"})]}),`\n`,(0,r.jsx)(e.li,{children:\"Navigate to the Performance panel\"}),`\n`,(0,r.jsx)(e.li,{children:'Click the \"Record\" button to start profiling'}),`\n`,(0,r.jsx)(e.li,{children:\"Interact with your web application to capture performance data\"}),`\n`,(0,r.jsx)(e.li,{children:'Click the \"Stop\" button to end profiling and analyze the results'}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"Lighthouse\"}),`\n`,(0,r.jsx)(e.p,{children:\"Lighthouse is an open-source, automated tool for improving the quality of web pages. It provides audits for performance, accessibility, progressive web apps, SEO, and more.\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"Open Chrome DevTools\"}),`\n`,(0,r.jsx)(e.li,{children:\"Navigate to the Lighthouse panel\"}),`\n`,(0,r.jsx)(e.li,{children:\"Select the categories you want to audit (e.g., Performance)\"}),`\n`,(0,r.jsx)(e.li,{children:'Click the \"Generate report\" button'}),`\n`,(0,r.jsx)(e.li,{children:\"Review the generated report for performance insights and recommendations\"}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"WebPageTest\"}),`\n`,(0,r.jsx)(e.p,{children:\"WebPageTest is a free online tool that provides detailed performance testing of web pages. It allows you to run tests from multiple locations around the world using real browsers.\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[\"Go to \",(0,r.jsx)(e.a,{href:\"https://www.webpagetest.org/\",children:\"WebPageTest\"})]}),`\n`,(0,r.jsx)(e.li,{children:\"Enter the URL of the web page you want to test\"}),`\n`,(0,r.jsx)(e.li,{children:\"Select the test location and browser\"}),`\n`,(0,r.jsx)(e.li,{children:'Click the \"Start Test\" button'}),`\n`,(0,r.jsx)(e.li,{children:\"Review the detailed performance report, including metrics like load time, time to first byte, and more\"}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"JSPerf\"}),`\n`,(0,r.jsx)(e.p,{children:\"JSPerf is a tool for comparing the performance of different JavaScript snippets. It allows you to create and run benchmarks to see which code performs better.\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[\"Go to \",(0,r.jsx)(e.a,{href:\"https://jsperf.com/\",children:\"JSPerf\"})]}),`\n`,(0,r.jsx)(e.li,{children:\"Create a new test case by entering different JavaScript snippets\"}),`\n`,(0,r.jsx)(e.li,{children:\"Run the benchmark to compare the performance of the snippets\"}),`\n`,(0,r.jsx)(e.li,{children:\"Review the results to see which snippet performs better\"}),`\n`]}),`\n`,(0,r.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.chrome.com/docs/devtools/evaluate-performance/\",children:\"Chrome DevTools Performance Panel\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developers.google.com/web/tools/lighthouse\",children:\"Lighthouse\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://www.webpagetest.org/\",children:\"WebPageTest\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://jsperf.com/\",children:\"JSPerf\"})}),`\n`]})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(s,{...n})}):s(n)}return y(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-tools-that-can-be-used-to-measure-and-analyze-javascript-performance/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-some-tools-that-can-be-used-to-measure-and-analyze-javascript-performance/zh-CN.json
index 14cd6f7a7..efc457d37 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-tools-that-can-be-used-to-measure-and-analyze-javascript-performance/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-tools-that-can-be-used-to-measure-and-analyze-javascript-performance/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-some-tools-that-can-be-used-to-measure-and-analyze-javascript-performance/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var u=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),v=(r,e)=>{for(var l in e)i(r,l,{get:e[l],enumerable:!0})},t=(r,e,l,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let h of m(e))!g.call(r,h)&&h!==l&&i(r,h,{get:()=>e[h],enumerable:!(c=p(e,h))||c.enumerable});return r};var P=(r,e,l)=>(l=r!=null?a(f(r)):{},t(e||!r||!r.__esModule?i(l,\"default\",{value:r,enumerable:!0}):l,r)),S=r=>t(i({},\"__esModule\",{value:!0}),r);var d=u((D,o)=>{o.exports=_jsx_runtime});var C={};v(C,{default:()=>J,frontmatter:()=>b});var n=P(d()),b={title:\"\\u6709\\u54EA\\u4E9B\\u53EF\\u4EE5\\u7528\\u6765\\u8861\\u91CF\\u548C\\u5206\\u6790 JavaScript \\u6027\\u80FD\\u7684\\u5DE5\\u5177\\uFF1F\"};function s(r){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",code:\"code\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8981\\u8861\\u91CF\\u548C\\u5206\\u6790 JavaScript \\u6027\\u80FD\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 Chrome DevTools\\u3001Lighthouse\\u3001WebPageTest \\u548C JSPerf \\u7B49\\u5DE5\\u5177\\u3002Chrome DevTools \\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u7528\\u4E8E\\u5206\\u6790\\u7684 Performance \\u9762\\u677F\\uFF0CLighthouse \\u63D0\\u4F9B\\u6027\\u80FD\\u6307\\u6807\\u7684\\u5BA1\\u6838\\uFF0CWebPageTest \\u5141\\u8BB8\\u8FDB\\u884C\\u8BE6\\u7EC6\\u7684\\u6027\\u80FD\\u6D4B\\u8BD5\\uFF0C\\u800C JSPerf \\u6709\\u52A9\\u4E8E\\u6BD4\\u8F83\\u4E0D\\u540C JavaScript \\u4EE3\\u7801\\u6BB5\\u7684\\u6027\\u80FD\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7528\\u4E8E\\u8861\\u91CF\\u548C\\u5206\\u6790 JavaScript \\u6027\\u80FD\\u7684\\u5DE5\\u5177\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Chrome DevTools\"}),`\n`,(0,n.jsx)(e.p,{children:\"Chrome DevTools \\u662F\\u4E00\\u7EC4\\u76F4\\u63A5\\u5185\\u7F6E\\u4E8E Google Chrome \\u6D4F\\u89C8\\u5668\\u4E2D\\u7684 Web \\u5F00\\u53D1\\u8005\\u5DE5\\u5177\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A Performance \\u9762\\u677F\\uFF0C\\u5141\\u8BB8\\u60A8\\u5F55\\u5236\\u548C\\u5206\\u6790 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u8FD0\\u884C\\u65F6\\u6027\\u80FD\\u3002\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u901A\\u8FC7\\u6309 \",(0,n.jsx)(e.code,{children:\"F12\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"Ctrl+Shift+I\"}),\" \\u6253\\u5F00 Chrome DevTools\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5BFC\\u822A\\u5230 Performance \\u9762\\u677F\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5355\\u51FB\\u201CRecord\\u201D\\u6309\\u94AE\\u5F00\\u59CB\\u5206\\u6790\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u4E0E\\u60A8\\u7684 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u4EA4\\u4E92\\u4EE5\\u6355\\u83B7\\u6027\\u80FD\\u6570\\u636E\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5355\\u51FB\\u201CStop\\u201D\\u6309\\u94AE\\u7ED3\\u675F\\u5206\\u6790\\u5E76\\u5206\\u6790\\u7ED3\\u679C\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Lighthouse\"}),`\n`,(0,n.jsx)(e.p,{children:\"Lighthouse \\u662F\\u4E00\\u4E2A\\u5F00\\u6E90\\u7684\\u81EA\\u52A8\\u5316\\u5DE5\\u5177\\uFF0C\\u7528\\u4E8E\\u63D0\\u9AD8\\u7F51\\u9875\\u8D28\\u91CF\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u5BF9\\u6027\\u80FD\\u3001\\u53EF\\u8BBF\\u95EE\\u6027\\u3001\\u6E10\\u8FDB\\u5F0F Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u3001SEO \\u7B49\\u65B9\\u9762\\u7684\\u5BA1\\u6838\\u3002\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u6253\\u5F00 Chrome DevTools\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5BFC\\u822A\\u5230 Lighthouse \\u9762\\u677F\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u9009\\u62E9\\u60A8\\u8981\\u5BA1\\u6838\\u7684\\u7C7B\\u522B\\uFF08\\u4F8B\\u5982\\uFF0C\\u6027\\u80FD\\uFF09\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5355\\u51FB\\u201CGenerate report\\u201D\\u6309\\u94AE\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u67E5\\u770B\\u751F\\u6210\\u7684\\u62A5\\u544A\\u4EE5\\u83B7\\u53D6\\u6027\\u80FD\\u89C1\\u89E3\\u548C\\u5EFA\\u8BAE\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"WebPageTest\"}),`\n`,(0,n.jsx)(e.p,{children:\"WebPageTest \\u662F\\u4E00\\u4E2A\\u514D\\u8D39\\u7684\\u5728\\u7EBF\\u5DE5\\u5177\\uFF0C\\u63D0\\u4F9B\\u5BF9\\u7F51\\u9875\\u7684\\u8BE6\\u7EC6\\u6027\\u80FD\\u6D4B\\u8BD5\\u3002\\u5B83\\u5141\\u8BB8\\u60A8\\u4F7F\\u7528\\u771F\\u5B9E\\u7684\\u6D4F\\u89C8\\u5668\\u4ECE\\u4E16\\u754C\\u5404\\u5730\\u8FD0\\u884C\\u6D4B\\u8BD5\\u3002\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u8BBF\\u95EE \",(0,n.jsx)(e.a,{href:\"https://www.webpagetest.org/\",children:\"WebPageTest\"})]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u8F93\\u5165\\u60A8\\u8981\\u6D4B\\u8BD5\\u7684\\u7F51\\u9875\\u7684 URL\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u9009\\u62E9\\u6D4B\\u8BD5\\u4F4D\\u7F6E\\u548C\\u6D4F\\u89C8\\u5668\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5355\\u51FB\\u201CStart Test\\u201D\\u6309\\u94AE\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u67E5\\u770B\\u8BE6\\u7EC6\\u7684\\u6027\\u80FD\\u62A5\\u544A\\uFF0C\\u5305\\u62EC\\u52A0\\u8F7D\\u65F6\\u95F4\\u3001\\u9996\\u6B21\\u5B57\\u8282\\u65F6\\u95F4\\u7B49\\u6307\\u6807\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"JSPerf\"}),`\n`,(0,n.jsx)(e.p,{children:\"JSPerf \\u662F\\u4E00\\u4E2A\\u7528\\u4E8E\\u6BD4\\u8F83\\u4E0D\\u540C JavaScript \\u4EE3\\u7801\\u6BB5\\u6027\\u80FD\\u7684\\u5DE5\\u5177\\u3002\\u5B83\\u5141\\u8BB8\\u60A8\\u521B\\u5EFA\\u548C\\u8FD0\\u884C\\u57FA\\u51C6\\u6D4B\\u8BD5\\uFF0C\\u4EE5\\u67E5\\u770B\\u54EA\\u4E2A\\u4EE3\\u7801\\u7684\\u6027\\u80FD\\u66F4\\u597D\\u3002\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u8BBF\\u95EE \",(0,n.jsx)(e.a,{href:\"https://jsperf.com/\",children:\"JSPerf\"})]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u901A\\u8FC7\\u8F93\\u5165\\u4E0D\\u540C\\u7684 JavaScript \\u4EE3\\u7801\\u6BB5\\u6765\\u521B\\u5EFA\\u65B0\\u7684\\u6D4B\\u8BD5\\u7528\\u4F8B\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u8FD0\\u884C\\u57FA\\u51C6\\u6D4B\\u8BD5\\u4EE5\\u6BD4\\u8F83\\u4EE3\\u7801\\u6BB5\\u7684\\u6027\\u80FD\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u67E5\\u770B\\u7ED3\\u679C\\u4EE5\\u4E86\\u89E3\\u54EA\\u4E2A\\u4EE3\\u7801\\u6BB5\\u7684\\u6027\\u80FD\\u66F4\\u597D\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.chrome.com/docs/devtools/evaluate-performance/\",children:\"Chrome DevTools Performance Panel\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/tools/lighthouse\",children:\"Lighthouse\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.webpagetest.org/\",children:\"WebPageTest\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jsperf.com/\",children:\"JSPerf\"})}),`\n`]})]})}function T(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(s,r)})):s(r)}var J=T;return S(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var v=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),P=(r,e)=>{for(var l in e)i(r,l,{get:e[l],enumerable:!0})},o=(r,e,l,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let h of f(e))!u.call(r,h)&&h!==l&&i(r,h,{get:()=>e[h],enumerable:!(c=m(e,h))||c.enumerable});return r};var S=(r,e,l)=>(l=r!=null?p(g(r)):{},o(e||!r||!r.__esModule?i(l,\"default\",{value:r,enumerable:!0}):l,r)),T=r=>o(i({},\"__esModule\",{value:!0}),r);var d=v((w,t)=>{t.exports=_jsx_runtime});var J={};P(J,{default:()=>a,frontmatter:()=>b});var n=S(d()),b={title:\"\\u6709\\u54EA\\u4E9B\\u53EF\\u4EE5\\u7528\\u6765\\u8861\\u91CF\\u548C\\u5206\\u6790 JavaScript \\u6027\\u80FD\\u7684\\u5DE5\\u5177\\uFF1F\"};function s(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8981\\u8861\\u91CF\\u548C\\u5206\\u6790 JavaScript \\u6027\\u80FD\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 Chrome DevTools\\u3001Lighthouse\\u3001WebPageTest \\u548C JSPerf \\u7B49\\u5DE5\\u5177\\u3002Chrome DevTools \\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u7528\\u4E8E\\u5206\\u6790\\u7684 Performance \\u9762\\u677F\\uFF0CLighthouse \\u63D0\\u4F9B\\u6027\\u80FD\\u6307\\u6807\\u7684\\u5BA1\\u6838\\uFF0CWebPageTest \\u5141\\u8BB8\\u8FDB\\u884C\\u8BE6\\u7EC6\\u7684\\u6027\\u80FD\\u6D4B\\u8BD5\\uFF0C\\u800C JSPerf \\u6709\\u52A9\\u4E8E\\u6BD4\\u8F83\\u4E0D\\u540C JavaScript \\u4EE3\\u7801\\u6BB5\\u7684\\u6027\\u80FD\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7528\\u4E8E\\u8861\\u91CF\\u548C\\u5206\\u6790 JavaScript \\u6027\\u80FD\\u7684\\u5DE5\\u5177\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Chrome DevTools\"}),`\n`,(0,n.jsx)(e.p,{children:\"Chrome DevTools \\u662F\\u4E00\\u7EC4\\u76F4\\u63A5\\u5185\\u7F6E\\u4E8E Google Chrome \\u6D4F\\u89C8\\u5668\\u4E2D\\u7684 Web \\u5F00\\u53D1\\u8005\\u5DE5\\u5177\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A Performance \\u9762\\u677F\\uFF0C\\u5141\\u8BB8\\u60A8\\u5F55\\u5236\\u548C\\u5206\\u6790 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u8FD0\\u884C\\u65F6\\u6027\\u80FD\\u3002\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u901A\\u8FC7\\u6309 \",(0,n.jsx)(e.code,{children:\"F12\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"Ctrl+Shift+I\"}),\" \\u6253\\u5F00 Chrome DevTools\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5BFC\\u822A\\u5230 Performance \\u9762\\u677F\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5355\\u51FB\\u201CRecord\\u201D\\u6309\\u94AE\\u5F00\\u59CB\\u5206\\u6790\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u4E0E\\u60A8\\u7684 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u4EA4\\u4E92\\u4EE5\\u6355\\u83B7\\u6027\\u80FD\\u6570\\u636E\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5355\\u51FB\\u201CStop\\u201D\\u6309\\u94AE\\u7ED3\\u675F\\u5206\\u6790\\u5E76\\u5206\\u6790\\u7ED3\\u679C\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Lighthouse\"}),`\n`,(0,n.jsx)(e.p,{children:\"Lighthouse \\u662F\\u4E00\\u4E2A\\u5F00\\u6E90\\u7684\\u81EA\\u52A8\\u5316\\u5DE5\\u5177\\uFF0C\\u7528\\u4E8E\\u63D0\\u9AD8\\u7F51\\u9875\\u8D28\\u91CF\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u5BF9\\u6027\\u80FD\\u3001\\u53EF\\u8BBF\\u95EE\\u6027\\u3001\\u6E10\\u8FDB\\u5F0F Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u3001SEO \\u7B49\\u65B9\\u9762\\u7684\\u5BA1\\u6838\\u3002\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u6253\\u5F00 Chrome DevTools\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5BFC\\u822A\\u5230 Lighthouse \\u9762\\u677F\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u9009\\u62E9\\u60A8\\u8981\\u5BA1\\u6838\\u7684\\u7C7B\\u522B\\uFF08\\u4F8B\\u5982\\uFF0C\\u6027\\u80FD\\uFF09\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5355\\u51FB\\u201CGenerate report\\u201D\\u6309\\u94AE\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u67E5\\u770B\\u751F\\u6210\\u7684\\u62A5\\u544A\\u4EE5\\u83B7\\u53D6\\u6027\\u80FD\\u89C1\\u89E3\\u548C\\u5EFA\\u8BAE\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"WebPageTest\"}),`\n`,(0,n.jsx)(e.p,{children:\"WebPageTest \\u662F\\u4E00\\u4E2A\\u514D\\u8D39\\u7684\\u5728\\u7EBF\\u5DE5\\u5177\\uFF0C\\u63D0\\u4F9B\\u5BF9\\u7F51\\u9875\\u7684\\u8BE6\\u7EC6\\u6027\\u80FD\\u6D4B\\u8BD5\\u3002\\u5B83\\u5141\\u8BB8\\u60A8\\u4F7F\\u7528\\u771F\\u5B9E\\u7684\\u6D4F\\u89C8\\u5668\\u4ECE\\u4E16\\u754C\\u5404\\u5730\\u8FD0\\u884C\\u6D4B\\u8BD5\\u3002\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u8BBF\\u95EE \",(0,n.jsx)(e.a,{href:\"https://www.webpagetest.org/\",children:\"WebPageTest\"})]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u8F93\\u5165\\u60A8\\u8981\\u6D4B\\u8BD5\\u7684\\u7F51\\u9875\\u7684 URL\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u9009\\u62E9\\u6D4B\\u8BD5\\u4F4D\\u7F6E\\u548C\\u6D4F\\u89C8\\u5668\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5355\\u51FB\\u201CStart Test\\u201D\\u6309\\u94AE\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u67E5\\u770B\\u8BE6\\u7EC6\\u7684\\u6027\\u80FD\\u62A5\\u544A\\uFF0C\\u5305\\u62EC\\u52A0\\u8F7D\\u65F6\\u95F4\\u3001\\u9996\\u6B21\\u5B57\\u8282\\u65F6\\u95F4\\u7B49\\u6307\\u6807\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"JSPerf\"}),`\n`,(0,n.jsx)(e.p,{children:\"JSPerf \\u662F\\u4E00\\u4E2A\\u7528\\u4E8E\\u6BD4\\u8F83\\u4E0D\\u540C JavaScript \\u4EE3\\u7801\\u6BB5\\u6027\\u80FD\\u7684\\u5DE5\\u5177\\u3002\\u5B83\\u5141\\u8BB8\\u60A8\\u521B\\u5EFA\\u548C\\u8FD0\\u884C\\u57FA\\u51C6\\u6D4B\\u8BD5\\uFF0C\\u4EE5\\u67E5\\u770B\\u54EA\\u4E2A\\u4EE3\\u7801\\u7684\\u6027\\u80FD\\u66F4\\u597D\\u3002\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u8BBF\\u95EE \",(0,n.jsx)(e.a,{href:\"https://jsperf.com/\",children:\"JSPerf\"})]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u901A\\u8FC7\\u8F93\\u5165\\u4E0D\\u540C\\u7684 JavaScript \\u4EE3\\u7801\\u6BB5\\u6765\\u521B\\u5EFA\\u65B0\\u7684\\u6D4B\\u8BD5\\u7528\\u4F8B\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u8FD0\\u884C\\u57FA\\u51C6\\u6D4B\\u8BD5\\u4EE5\\u6BD4\\u8F83\\u4EE3\\u7801\\u6BB5\\u7684\\u6027\\u80FD\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u67E5\\u770B\\u7ED3\\u679C\\u4EE5\\u4E86\\u89E3\\u54EA\\u4E2A\\u4EE3\\u7801\\u6BB5\\u7684\\u6027\\u80FD\\u66F4\\u597D\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.chrome.com/docs/devtools/evaluate-performance/\",children:\"Chrome DevTools Performance Panel\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/tools/lighthouse\",children:\"Lighthouse\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.webpagetest.org/\",children:\"WebPageTest\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://jsperf.com/\",children:\"JSPerf\"})}),`\n`]})]})}function a(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(s,{...r})}):s(r)}return T(J);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-symbols-used-for/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-symbols-used-for/en-US.json
index 251bdcecd..47750d672 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-symbols-used-for/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-symbols-used-for/en-US.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-symbols-used-for/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var p=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),g=(o,e)=>{for(var l in e)i(o,l,{get:e[l],enumerable:!0})},t=(o,e,l,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of b(e))!u.call(o,r)&&r!==l&&i(o,r,{get:()=>e[r],enumerable:!(c=m(e,r))||c.enumerable});return o};var S=(o,e,l)=>(l=o!=null?h(y(o)):{},t(e||!o||!o.__esModule?i(l,\"default\",{value:o,enumerable:!0}):l,o)),f=o=>t(i({},\"__esModule\",{value:!0}),o);var s=p((q,a)=>{a.exports=_jsx_runtime});var k={};g(k,{default:()=>w,frontmatter:()=>j});var n=S(s()),j={title:\"What are `Symbol`s used for in JavaScript?\"};function d(o){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",strong:\"strong\",hr:\"hr\",ul:\"ul\",li:\"li\",blockquote:\"blockquote\",h3:\"h3\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s in JavaScript are a new primitive data type introduced in ES6 (ECMAScript 2015). They are unique and immutable identifiers that is primarily for object property keys to avoid name collisions. These values can be created using \",(0,n.jsx)(e.code,{children:\"Symbol(...)\"}),\" function, and each \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\" value is guaranteed to be unique, even if they have the same key/description. \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\" properties are not enumerable in \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" loops or \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\", making them suitable for creating private/internal object state.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let sym1 = Symbol();\nlet sym2 = Symbol('myKey');\n\nconsole.log(typeof sym1); // \"symbol\"\nconsole.log(sym1 === sym2); // false, because each symbol is unique\n\nlet obj = {};\nlet sym = Symbol('uniqueKey');\n\nobj[sym] = 'value';\nconsole.log(obj[sym]); // \"value\"\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note\"}),\": The \",(0,n.jsx)(e.code,{children:\"Symbol()\"}),\" function must be called without the \",(0,n.jsx)(e.code,{children:\"new\"}),\" keyword. It is not exactly a constructor because it can only be called as a function instead of with \",(0,n.jsx)(e.code,{children:\"new Symbol()\"}),\".\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s in JavaScript\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Symbols in JavaScript are a unique and immutable data type used primarily for object property keys to avoid name collisions.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Key characteristics\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Uniqueness\"}),\": Each Symbol value is unique, even if they have the same description.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Immutability\"}),\": Symbol values are immutable, meaning their value cannot be changed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Non-enumerable\"}),\": Symbol properties are not included in for...in loops or Object.keys().\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Creating \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s can be created using the \",(0,n.jsx)(e.code,{children:\"Symbol()\"}),\" function:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const sym1 = Symbol();\nconst sym2 = Symbol('uniqueKey');\n\nconsole.log(typeof sym1); // \"symbol\"\nconsole.log(sym1 === sym2); // false, because each symbol is unique\n`})}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Symbol(..)\"}),\" function must be called without the \",(0,n.jsx)(e.code,{children:\"new\"}),\" keyword.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s as \",(0,n.jsx)(e.code,{children:\"object\"}),\" property keys\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s can be used to add properties to an object without risk of name collision:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {};\nconst sym = Symbol('uniqueKey');\n\nobj[sym] = 'value';\nconsole.log(obj[sym]); // \"value\"\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s are not enumerable\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Symbol\"}),\" properties are not included in \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" loops or\",(0,n.jsx)(e.code,{children:\" Object.keys()\"}),\".\"]}),`\n`,(0,n.jsx)(e.li,{children:\"This makes them suitable for creating private/internal object state.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Use\",(0,n.jsx)(e.code,{children:\" Object.getOwnPropertySymbols(obj)\"}),\" to get all symbol properties on an object.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const mySymbol = Symbol('privateProperty');\nconst obj = {\n  name: 'John',\n  [mySymbol]: 42,\n};\n\nconsole.log(Object.keys(obj)); // Output: ['name']\nconsole.log(obj[mySymbol]); // Output: 42\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Global \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\" registry\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can create global \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s using \",(0,n.jsx)(e.code,{children:\"Symbol.for('key')\"}),\", which creates a new \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\" in the global registry if it doesn't exist, or returns the existing one. This allows you to reuse \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s across different parts of your code base or even across different code bases.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const globalSym1 = Symbol.for('globalKey');\nconst globalSym2 = Symbol.for('globalKey');\n\nconsole.log(globalSym1 === globalSym2); // true\n\nconst key = Symbol.keyFor(globalSym1);\nconsole.log(key); // \"globalKey\"\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Well-known \",(0,n.jsx)(e.code,{children:\"Symbol\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript includes several built-in \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s, referred as well-known \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s.\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Symbol.iterator\"})}),\": Defines the default \",(0,n.jsx)(e.code,{children:\"iterator\"}),\" for an object.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Symbol.toStringTag\"})}),\": Used to create a string description for an object.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Symbol.hasInstance\"})}),\": Used to determine if an object is an instance of a constructor.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"Symbol.iterator\"})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let iterable = {\n  [Symbol.iterator]() {\n    let step = 0;\n    return {\n      next() {\n        step++;\n        if (step <= 5) {\n          return { value: step, done: false };\n        }\n        return { done: true };\n      },\n    };\n  },\n};\n\nfor (let value of iterable) {\n  console.log(value); // 1, 2, 3, 4, 5\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"Symbol.toStringTag\"})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let myObj = {\n  [Symbol.toStringTag]: 'MyCustomObject',\n};\n\nconsole.log(Object.prototype.toString.call(myObj)); // \"[object MyCustomObject]\"\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Summary\"}),`\n`,(0,n.jsx)(e.p,{children:\"Symbols are a powerful feature in JavaScript, especially useful for creating unique object properties and customizing object behavior. They provide a means to create hidden properties, preventing accidental access or modification, which is particularly beneficial in large-scale applications and libraries.\"}),`\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/Web/JavaScript/Reference/Global_Objects/Symbol\",children:\"Symbol - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/symbol\",children:\"Symbol type\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/how-did-i-miss-javascript-symbols-c1f1c0e1874a/\",children:\"A quick overview of JavaScript symbols\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/types-grammar/ch1.md#symbol-values\",children:\"Symbol Values - You Don't Know JS Yet\"})}),`\n`]})]})}function v(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(d,o)})):d(o)}var w=v;return f(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),S=(o,e)=>{for(var l in e)i(o,l,{get:e[l],enumerable:!0})},t=(o,e,l,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of y(e))!p.call(o,r)&&r!==l&&i(o,r,{get:()=>e[r],enumerable:!(c=b(e,r))||c.enumerable});return o};var f=(o,e,l)=>(l=o!=null?m(u(o)):{},t(e||!o||!o.__esModule?i(l,\"default\",{value:o,enumerable:!0}):l,o)),j=o=>t(i({},\"__esModule\",{value:!0}),o);var s=g((q,a)=>{a.exports=_jsx_runtime});var w={};S(w,{default:()=>h,frontmatter:()=>v});var n=f(s()),v={title:\"What are `Symbol`s used for in JavaScript?\"};function d(o){let e={a:\"a\",blockquote:\"blockquote\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s in JavaScript are a new primitive data type introduced in ES6 (ECMAScript 2015). They are unique and immutable identifiers that is primarily for object property keys to avoid name collisions. These values can be created using \",(0,n.jsx)(e.code,{children:\"Symbol(...)\"}),\" function, and each \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\" value is guaranteed to be unique, even if they have the same key/description. \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\" properties are not enumerable in \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" loops or \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\", making them suitable for creating private/internal object state.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let sym1 = Symbol();\nlet sym2 = Symbol('myKey');\n\nconsole.log(typeof sym1); // \"symbol\"\nconsole.log(sym1 === sym2); // false, because each symbol is unique\n\nlet obj = {};\nlet sym = Symbol('uniqueKey');\n\nobj[sym] = 'value';\nconsole.log(obj[sym]); // \"value\"\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note\"}),\": The \",(0,n.jsx)(e.code,{children:\"Symbol()\"}),\" function must be called without the \",(0,n.jsx)(e.code,{children:\"new\"}),\" keyword. It is not exactly a constructor because it can only be called as a function instead of with \",(0,n.jsx)(e.code,{children:\"new Symbol()\"}),\".\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s in JavaScript\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Symbols in JavaScript are a unique and immutable data type used primarily for object property keys to avoid name collisions.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Key characteristics\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Uniqueness\"}),\": Each Symbol value is unique, even if they have the same description.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Immutability\"}),\": Symbol values are immutable, meaning their value cannot be changed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Non-enumerable\"}),\": Symbol properties are not included in for...in loops or Object.keys().\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Creating \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s can be created using the \",(0,n.jsx)(e.code,{children:\"Symbol()\"}),\" function:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const sym1 = Symbol();\nconst sym2 = Symbol('uniqueKey');\n\nconsole.log(typeof sym1); // \"symbol\"\nconsole.log(sym1 === sym2); // false, because each symbol is unique\n`})}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Symbol(..)\"}),\" function must be called without the \",(0,n.jsx)(e.code,{children:\"new\"}),\" keyword.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s as \",(0,n.jsx)(e.code,{children:\"object\"}),\" property keys\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s can be used to add properties to an object without risk of name collision:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {};\nconst sym = Symbol('uniqueKey');\n\nobj[sym] = 'value';\nconsole.log(obj[sym]); // \"value\"\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s are not enumerable\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Symbol\"}),\" properties are not included in \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" loops or\",(0,n.jsx)(e.code,{children:\" Object.keys()\"}),\".\"]}),`\n`,(0,n.jsx)(e.li,{children:\"This makes them suitable for creating private/internal object state.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Use\",(0,n.jsx)(e.code,{children:\" Object.getOwnPropertySymbols(obj)\"}),\" to get all symbol properties on an object.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const mySymbol = Symbol('privateProperty');\nconst obj = {\n  name: 'John',\n  [mySymbol]: 42,\n};\n\nconsole.log(Object.keys(obj)); // Output: ['name']\nconsole.log(obj[mySymbol]); // Output: 42\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Global \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\" registry\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can create global \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s using \",(0,n.jsx)(e.code,{children:\"Symbol.for('key')\"}),\", which creates a new \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\" in the global registry if it doesn't exist, or returns the existing one. This allows you to reuse \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s across different parts of your code base or even across different code bases.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const globalSym1 = Symbol.for('globalKey');\nconst globalSym2 = Symbol.for('globalKey');\n\nconsole.log(globalSym1 === globalSym2); // true\n\nconst key = Symbol.keyFor(globalSym1);\nconsole.log(key); // \"globalKey\"\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Well-known \",(0,n.jsx)(e.code,{children:\"Symbol\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript includes several built-in \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s, referred as well-known \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s.\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Symbol.iterator\"})}),\": Defines the default \",(0,n.jsx)(e.code,{children:\"iterator\"}),\" for an object.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Symbol.toStringTag\"})}),\": Used to create a string description for an object.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Symbol.hasInstance\"})}),\": Used to determine if an object is an instance of a constructor.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"Symbol.iterator\"})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let iterable = {\n  [Symbol.iterator]() {\n    let step = 0;\n    return {\n      next() {\n        step++;\n        if (step <= 5) {\n          return { value: step, done: false };\n        }\n        return { done: true };\n      },\n    };\n  },\n};\n\nfor (let value of iterable) {\n  console.log(value); // 1, 2, 3, 4, 5\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"Symbol.toStringTag\"})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let myObj = {\n  [Symbol.toStringTag]: 'MyCustomObject',\n};\n\nconsole.log(Object.prototype.toString.call(myObj)); // \"[object MyCustomObject]\"\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Summary\"}),`\n`,(0,n.jsx)(e.p,{children:\"Symbols are a powerful feature in JavaScript, especially useful for creating unique object properties and customizing object behavior. They provide a means to create hidden properties, preventing accidental access or modification, which is particularly beneficial in large-scale applications and libraries.\"}),`\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/Web/JavaScript/Reference/Global_Objects/Symbol\",children:\"Symbol - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/symbol\",children:\"Symbol type\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/how-did-i-miss-javascript-symbols-c1f1c0e1874a/\",children:\"A quick overview of JavaScript symbols\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/types-grammar/ch1.md#symbol-values\",children:\"Symbol Values - You Don't Know JS Yet\"})}),`\n`]})]})}function h(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(d,{...o})}):d(o)}return j(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-symbols-used-for/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-symbols-used-for/zh-CN.json
index c5106a331..30fc88931 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-symbols-used-for/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-symbols-used-for/zh-CN.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-symbols-used-for/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var u=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),g=(l,e)=>{for(var o in e)r(l,o,{get:e[o],enumerable:!0})},d=(l,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of a(e))!S.call(l,c)&&c!==o&&r(l,c,{get:()=>e[c],enumerable:!(i=y(e,c))||i.enumerable});return l};var p=(l,e,o)=>(o=l!=null?m(b(l)):{},d(e||!l||!l.__esModule?r(o,\"default\",{value:l,enumerable:!0}):o,l)),j=l=>d(r({},\"__esModule\",{value:!0}),l);var h=u((J,t)=>{t.exports=_jsx_runtime});var w={};g(w,{default:()=>O,frontmatter:()=>f});var n=p(h()),f={title:\"JavaScript \\u4E2D `Symbol` \\u7684\\u7528\\u9014\\u662F\\u4EC0\\u4E48\\uFF1F\"};function s(l){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",strong:\"strong\",hr:\"hr\",ul:\"ul\",li:\"li\",blockquote:\"blockquote\",h3:\"h3\",a:\"a\"},l.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\" \\u662F ES6 (ECMAScript 2015) \\u4E2D\\u5F15\\u5165\\u7684\\u4E00\\u79CD\\u65B0\\u7684\\u539F\\u59CB\\u6570\\u636E\\u7C7B\\u578B\\u3002\\u5B83\\u4EEC\\u662F\\u552F\\u4E00\\u7684\\u3001\\u4E0D\\u53EF\\u53D8\\u7684\\u6807\\u8BC6\\u7B26\\uFF0C\\u4E3B\\u8981\\u7528\\u4E8E\\u5BF9\\u8C61\\u5C5E\\u6027\\u952E\\uFF0C\\u4EE5\\u907F\\u514D\\u540D\\u79F0\\u51B2\\u7A81\\u3002\\u8FD9\\u4E9B\\u503C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Symbol(...)\"}),\" \\u51FD\\u6570\\u521B\\u5EFA\\uFF0C\\u5E76\\u4E14\\u6BCF\\u4E2A \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\" \\u503C\\u90FD\\u4FDD\\u8BC1\\u662F\\u552F\\u4E00\\u7684\\uFF0C\\u5373\\u4F7F\\u5B83\\u4EEC\\u5177\\u6709\\u76F8\\u540C\\u7684\\u952E/\\u63CF\\u8FF0\\u3002\",(0,n.jsx)(e.code,{children:\"Symbol\"}),\" \\u5C5E\\u6027\\u5728 \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" \\u5FAA\\u73AF\\u6216 \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" \\u4E2D\\u4E0D\\u53EF\\u679A\\u4E3E\\uFF0C\\u8FD9\\u4F7F\\u5F97\\u5B83\\u4EEC\\u9002\\u5408\\u521B\\u5EFA\\u79C1\\u6709/\\u5185\\u90E8\\u5BF9\\u8C61\\u72B6\\u6001\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let sym1 = Symbol();\nlet sym2 = Symbol('myKey');\n\nconsole.log(typeof sym1); // \"symbol\"\nconsole.log(sym1 === sym2); // false, because each symbol is unique\n\nlet obj = {};\nlet sym = Symbol('uniqueKey');\n\nobj[sym] = 'value';\nconsole.log(obj[sym]); // \"value\"\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u6CE8\\u610F\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"Symbol()\"}),\" \\u51FD\\u6570\\u5FC5\\u987B\\u5728\\u6CA1\\u6709 \",(0,n.jsx)(e.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u7684\\u60C5\\u51B5\\u4E0B\\u8C03\\u7528\\u3002\\u5B83\\u5E76\\u4E0D\\u5B8C\\u5168\\u662F\\u4E00\\u4E2A\\u6784\\u9020\\u51FD\\u6570\\uFF0C\\u56E0\\u4E3A\\u5B83\\u53EA\\u80FD\\u4F5C\\u4E3A\\u51FD\\u6570\\u8C03\\u7528\\uFF0C\\u800C\\u4E0D\\u662F\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"new Symbol()\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"Symbol\"})]}),`\n`,(0,n.jsx)(e.p,{children:\"JavaScript \\u4E2D\\u7684 Symbols \\u662F\\u4E00\\u79CD\\u72EC\\u7279\\u4E14\\u4E0D\\u53EF\\u53D8\\u7684\\u6570\\u636E\\u7C7B\\u578B\\uFF0C\\u4E3B\\u8981\\u7528\\u4E8E\\u5BF9\\u8C61\\u5C5E\\u6027\\u952E\\uFF0C\\u4EE5\\u907F\\u514D\\u540D\\u79F0\\u51B2\\u7A81\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5173\\u952E\\u7279\\u5F81\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u552F\\u4E00\\u6027\"}),\"\\uFF1A\\u6BCF\\u4E2A Symbol \\u503C\\u90FD\\u662F\\u552F\\u4E00\\u7684\\uFF0C\\u5373\\u4F7F\\u5B83\\u4EEC\\u5177\\u6709\\u76F8\\u540C\\u7684\\u63CF\\u8FF0\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u53EF\\u53D8\\u6027\"}),\"\\uFF1ASymbol \\u503C\\u662F\\u4E0D\\u53EF\\u53D8\\u7684\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4EEC\\u7684\\u503C\\u4E0D\\u80FD\\u88AB\\u66F4\\u6539\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u53EF\\u679A\\u4E3E\\u6027\"}),\"\\uFF1ASymbol \\u5C5E\\u6027\\u4E0D\\u5305\\u542B\\u5728 for...in \\u5FAA\\u73AF\\u6216 Object.keys() \\u4E2D\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"Symbol\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Symbol\"}),\" \\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Symbol()\"}),\" \\u51FD\\u6570\\u521B\\u5EFA\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const sym1 = Symbol();\nconst sym2 = Symbol('uniqueKey');\n\nconsole.log(typeof sym1); // \"symbol\"\nconsole.log(sym1 === sym2); // false, because each symbol is unique\n`})}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5FC5\\u987B\\u5728\\u6CA1\\u6709 \",(0,n.jsx)(e.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u7684\\u60C5\\u51B5\\u4E0B\\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"Symbol(..)\"}),\" \\u51FD\\u6570\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u5C06 \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\" \\u7528\\u4F5C \",(0,n.jsx)(e.code,{children:\"object\"}),\" \\u5C5E\\u6027\\u952E\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Symbol\"}),\" \\u53EF\\u7528\\u4E8E\\u5C06\\u5C5E\\u6027\\u6DFB\\u52A0\\u5230\\u5BF9\\u8C61\\uFF0C\\u800C\\u4E0D\\u4F1A\\u6709\\u540D\\u79F0\\u51B2\\u7A81\\u7684\\u98CE\\u9669\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {};\nconst sym = Symbol('uniqueKey');\n\nobj[sym] = 'value';\nconsole.log(obj[sym]); // \"value\"\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Symbol\"}),\" \\u4E0D\\u53EF\\u679A\\u4E3E\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Symbol\"}),\" \\u5C5E\\u6027\\u4E0D\\u5305\\u542B\\u5728 \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" \\u5FAA\\u73AF\\u6216 \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" \\u4E2D\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u8FD9\\u4F7F\\u5F97\\u5B83\\u4EEC\\u9002\\u5408\\u521B\\u5EFA\\u79C1\\u6709/\\u5185\\u90E8\\u5BF9\\u8C61\\u72B6\\u6001\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.getOwnPropertySymbols(obj)\"}),\" \\u83B7\\u53D6\\u5BF9\\u8C61\\u4E0A\\u7684\\u6240\\u6709 symbol \\u5C5E\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const mySymbol = Symbol('privateProperty');\nconst obj = {\n  name: 'John',\n  [mySymbol]: 42,\n};\n\nconsole.log(Object.keys(obj)); // Output: ['name']\nconsole.log(obj[mySymbol]); // Output: 42\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u5168\\u5C40 \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\" \\u6CE8\\u518C\\u8868\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Symbol.for('key')\"}),\" \\u521B\\u5EFA\\u5168\\u5C40 \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"\\uFF0C\\u5982\\u679C\\u5168\\u5C40\\u6CE8\\u518C\\u8868\\u4E2D\\u4E0D\\u5B58\\u5728\\uFF0C\\u5219\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684 \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"\\uFF0C\\u6216\\u8005\\u8FD4\\u56DE\\u73B0\\u6709\\u7684 \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"\\u3002\\u8FD9\\u5141\\u8BB8\\u60A8\\u5728\\u4EE3\\u7801\\u5E93\\u7684\\u4E0D\\u540C\\u90E8\\u5206\\u751A\\u81F3\\u4E0D\\u540C\\u7684\\u4EE3\\u7801\\u5E93\\u4E4B\\u95F4\\u91CD\\u7528 \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const globalSym1 = Symbol.for('globalKey');\nconst globalSym2 = Symbol.for('globalKey');\n\nconsole.log(globalSym1 === globalSym2); // true\n\nconst key = Symbol.keyFor(globalSym1);\nconsole.log(key); // \"globalKey\"\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4F17\\u6240\\u5468\\u77E5\\u7684 \",(0,n.jsx)(e.code,{children:\"Symbol\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u5305\\u542B\\u51E0\\u4E2A\\u5185\\u7F6E\\u7684 \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"\\uFF0C\\u79F0\\u4E3A\\u4F17\\u6240\\u5468\\u77E5\\u7684 \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Symbol.iterator\"})}),\"\\uFF1A\\u5B9A\\u4E49\\u5BF9\\u8C61\\u7684\\u9ED8\\u8BA4 \",(0,n.jsx)(e.code,{children:\"iterator\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Symbol.toStringTag\"})}),\"\\uFF1A\\u7528\\u4E8E\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u5B57\\u7B26\\u4E32\\u63CF\\u8FF0\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Symbol.hasInstance\"})}),\"\\uFF1A\\u7528\\u4E8E\\u786E\\u5B9A\\u5BF9\\u8C61\\u662F\\u5426\\u662F\\u6784\\u9020\\u51FD\\u6570\\u7684\\u5B9E\\u4F8B\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"Symbol.iterator\"})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let iterable = {\n  [Symbol.iterator]() {\n    let step = 0;\n    return {\n      next() {\n        step++;\n        if (step <= 5) {\n          return { value: step, done: false };\n        }\n        return { done: true };\n      },\n    };\n  },\n};\n\nfor (let value of iterable) {\n  console.log(value); // 1, 2, 3, 4, 5\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"Symbol.toStringTag\"})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let myObj = {\n  [Symbol.toStringTag]: 'MyCustomObject',\n};\n\nconsole.log(Object.prototype.toString.call(myObj)); // \"[object MyCustomObject]\"\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsx)(e.p,{children:\"Symbol \\u662F JavaScript \\u4E2D\\u4E00\\u9879\\u5F3A\\u5927\\u7684\\u529F\\u80FD\\uFF0C\\u5C24\\u5176\\u9002\\u7528\\u4E8E\\u521B\\u5EFA\\u552F\\u4E00\\u7684\\u5BF9\\u8C61\\u5C5E\\u6027\\u548C\\u81EA\\u5B9A\\u4E49\\u5BF9\\u8C61\\u884C\\u4E3A\\u3002\\u5B83\\u4EEC\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u521B\\u5EFA\\u9690\\u85CF\\u5C5E\\u6027\\u7684\\u65B9\\u6CD5\\uFF0C\\u9632\\u6B62\\u610F\\u5916\\u8BBF\\u95EE\\u6216\\u4FEE\\u6539\\uFF0C\\u8FD9\\u5728\\u5927\\u578B\\u5E94\\u7528\\u7A0B\\u5E8F\\u548C\\u5E93\\u4E2D\\u7279\\u522B\\u6709\\u76CA\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Symbol\",children:\"Symbol - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/symbol\",children:\"Symbol type\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/how-did-i-miss-javascript-symbols-c1f1c0e1874a/\",children:\"A quick overview of JavaScript symbols\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/types-grammar/ch1.md#symbol-values\",children:\"Symbol Values - You Don't Know JS Yet\"})}),`\n`]})]})}function v(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(s,l)})):s(l)}var O=v;return j(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var y=Object.create;var r=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),p=(l,e)=>{for(var o in e)r(l,o,{get:e[o],enumerable:!0})},d=(l,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of b(e))!u.call(l,c)&&c!==o&&r(l,c,{get:()=>e[c],enumerable:!(i=a(e,c))||i.enumerable});return l};var j=(l,e,o)=>(o=l!=null?y(S(l)):{},d(e||!l||!l.__esModule?r(o,\"default\",{value:l,enumerable:!0}):o,l)),f=l=>d(r({},\"__esModule\",{value:!0}),l);var h=g((k,t)=>{t.exports=_jsx_runtime});var O={};p(O,{default:()=>m,frontmatter:()=>v});var n=j(h()),v={title:\"JavaScript \\u4E2D `Symbol` \\u7684\\u7528\\u9014\\u662F\\u4EC0\\u4E48\\uFF1F\"};function s(l){let e={a:\"a\",blockquote:\"blockquote\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\" \\u662F ES6 (ECMAScript 2015) \\u4E2D\\u5F15\\u5165\\u7684\\u4E00\\u79CD\\u65B0\\u7684\\u539F\\u59CB\\u6570\\u636E\\u7C7B\\u578B\\u3002\\u5B83\\u4EEC\\u662F\\u552F\\u4E00\\u7684\\u3001\\u4E0D\\u53EF\\u53D8\\u7684\\u6807\\u8BC6\\u7B26\\uFF0C\\u4E3B\\u8981\\u7528\\u4E8E\\u5BF9\\u8C61\\u5C5E\\u6027\\u952E\\uFF0C\\u4EE5\\u907F\\u514D\\u540D\\u79F0\\u51B2\\u7A81\\u3002\\u8FD9\\u4E9B\\u503C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Symbol(...)\"}),\" \\u51FD\\u6570\\u521B\\u5EFA\\uFF0C\\u5E76\\u4E14\\u6BCF\\u4E2A \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\" \\u503C\\u90FD\\u4FDD\\u8BC1\\u662F\\u552F\\u4E00\\u7684\\uFF0C\\u5373\\u4F7F\\u5B83\\u4EEC\\u5177\\u6709\\u76F8\\u540C\\u7684\\u952E/\\u63CF\\u8FF0\\u3002\",(0,n.jsx)(e.code,{children:\"Symbol\"}),\" \\u5C5E\\u6027\\u5728 \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" \\u5FAA\\u73AF\\u6216 \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" \\u4E2D\\u4E0D\\u53EF\\u679A\\u4E3E\\uFF0C\\u8FD9\\u4F7F\\u5F97\\u5B83\\u4EEC\\u9002\\u5408\\u521B\\u5EFA\\u79C1\\u6709/\\u5185\\u90E8\\u5BF9\\u8C61\\u72B6\\u6001\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let sym1 = Symbol();\nlet sym2 = Symbol('myKey');\n\nconsole.log(typeof sym1); // \"symbol\"\nconsole.log(sym1 === sym2); // false, because each symbol is unique\n\nlet obj = {};\nlet sym = Symbol('uniqueKey');\n\nobj[sym] = 'value';\nconsole.log(obj[sym]); // \"value\"\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u6CE8\\u610F\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"Symbol()\"}),\" \\u51FD\\u6570\\u5FC5\\u987B\\u5728\\u6CA1\\u6709 \",(0,n.jsx)(e.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u7684\\u60C5\\u51B5\\u4E0B\\u8C03\\u7528\\u3002\\u5B83\\u5E76\\u4E0D\\u5B8C\\u5168\\u662F\\u4E00\\u4E2A\\u6784\\u9020\\u51FD\\u6570\\uFF0C\\u56E0\\u4E3A\\u5B83\\u53EA\\u80FD\\u4F5C\\u4E3A\\u51FD\\u6570\\u8C03\\u7528\\uFF0C\\u800C\\u4E0D\\u662F\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"new Symbol()\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"Symbol\"})]}),`\n`,(0,n.jsx)(e.p,{children:\"JavaScript \\u4E2D\\u7684 Symbols \\u662F\\u4E00\\u79CD\\u72EC\\u7279\\u4E14\\u4E0D\\u53EF\\u53D8\\u7684\\u6570\\u636E\\u7C7B\\u578B\\uFF0C\\u4E3B\\u8981\\u7528\\u4E8E\\u5BF9\\u8C61\\u5C5E\\u6027\\u952E\\uFF0C\\u4EE5\\u907F\\u514D\\u540D\\u79F0\\u51B2\\u7A81\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5173\\u952E\\u7279\\u5F81\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u552F\\u4E00\\u6027\"}),\"\\uFF1A\\u6BCF\\u4E2A Symbol \\u503C\\u90FD\\u662F\\u552F\\u4E00\\u7684\\uFF0C\\u5373\\u4F7F\\u5B83\\u4EEC\\u5177\\u6709\\u76F8\\u540C\\u7684\\u63CF\\u8FF0\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u53EF\\u53D8\\u6027\"}),\"\\uFF1ASymbol \\u503C\\u662F\\u4E0D\\u53EF\\u53D8\\u7684\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4EEC\\u7684\\u503C\\u4E0D\\u80FD\\u88AB\\u66F4\\u6539\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u53EF\\u679A\\u4E3E\\u6027\"}),\"\\uFF1ASymbol \\u5C5E\\u6027\\u4E0D\\u5305\\u542B\\u5728 for...in \\u5FAA\\u73AF\\u6216 Object.keys() \\u4E2D\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"Symbol\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Symbol\"}),\" \\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Symbol()\"}),\" \\u51FD\\u6570\\u521B\\u5EFA\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const sym1 = Symbol();\nconst sym2 = Symbol('uniqueKey');\n\nconsole.log(typeof sym1); // \"symbol\"\nconsole.log(sym1 === sym2); // false, because each symbol is unique\n`})}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5FC5\\u987B\\u5728\\u6CA1\\u6709 \",(0,n.jsx)(e.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u7684\\u60C5\\u51B5\\u4E0B\\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"Symbol(..)\"}),\" \\u51FD\\u6570\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u5C06 \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\" \\u7528\\u4F5C \",(0,n.jsx)(e.code,{children:\"object\"}),\" \\u5C5E\\u6027\\u952E\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Symbol\"}),\" \\u53EF\\u7528\\u4E8E\\u5C06\\u5C5E\\u6027\\u6DFB\\u52A0\\u5230\\u5BF9\\u8C61\\uFF0C\\u800C\\u4E0D\\u4F1A\\u6709\\u540D\\u79F0\\u51B2\\u7A81\\u7684\\u98CE\\u9669\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {};\nconst sym = Symbol('uniqueKey');\n\nobj[sym] = 'value';\nconsole.log(obj[sym]); // \"value\"\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Symbol\"}),\" \\u4E0D\\u53EF\\u679A\\u4E3E\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Symbol\"}),\" \\u5C5E\\u6027\\u4E0D\\u5305\\u542B\\u5728 \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" \\u5FAA\\u73AF\\u6216 \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" \\u4E2D\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u8FD9\\u4F7F\\u5F97\\u5B83\\u4EEC\\u9002\\u5408\\u521B\\u5EFA\\u79C1\\u6709/\\u5185\\u90E8\\u5BF9\\u8C61\\u72B6\\u6001\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.getOwnPropertySymbols(obj)\"}),\" \\u83B7\\u53D6\\u5BF9\\u8C61\\u4E0A\\u7684\\u6240\\u6709 symbol \\u5C5E\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const mySymbol = Symbol('privateProperty');\nconst obj = {\n  name: 'John',\n  [mySymbol]: 42,\n};\n\nconsole.log(Object.keys(obj)); // Output: ['name']\nconsole.log(obj[mySymbol]); // Output: 42\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u5168\\u5C40 \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\" \\u6CE8\\u518C\\u8868\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Symbol.for('key')\"}),\" \\u521B\\u5EFA\\u5168\\u5C40 \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"\\uFF0C\\u5982\\u679C\\u5168\\u5C40\\u6CE8\\u518C\\u8868\\u4E2D\\u4E0D\\u5B58\\u5728\\uFF0C\\u5219\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684 \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"\\uFF0C\\u6216\\u8005\\u8FD4\\u56DE\\u73B0\\u6709\\u7684 \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"\\u3002\\u8FD9\\u5141\\u8BB8\\u60A8\\u5728\\u4EE3\\u7801\\u5E93\\u7684\\u4E0D\\u540C\\u90E8\\u5206\\u751A\\u81F3\\u4E0D\\u540C\\u7684\\u4EE3\\u7801\\u5E93\\u4E4B\\u95F4\\u91CD\\u7528 \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const globalSym1 = Symbol.for('globalKey');\nconst globalSym2 = Symbol.for('globalKey');\n\nconsole.log(globalSym1 === globalSym2); // true\n\nconst key = Symbol.keyFor(globalSym1);\nconsole.log(key); // \"globalKey\"\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4F17\\u6240\\u5468\\u77E5\\u7684 \",(0,n.jsx)(e.code,{children:\"Symbol\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u5305\\u542B\\u51E0\\u4E2A\\u5185\\u7F6E\\u7684 \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"\\uFF0C\\u79F0\\u4E3A\\u4F17\\u6240\\u5468\\u77E5\\u7684 \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Symbol.iterator\"})}),\"\\uFF1A\\u5B9A\\u4E49\\u5BF9\\u8C61\\u7684\\u9ED8\\u8BA4 \",(0,n.jsx)(e.code,{children:\"iterator\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Symbol.toStringTag\"})}),\"\\uFF1A\\u7528\\u4E8E\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u5B57\\u7B26\\u4E32\\u63CF\\u8FF0\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Symbol.hasInstance\"})}),\"\\uFF1A\\u7528\\u4E8E\\u786E\\u5B9A\\u5BF9\\u8C61\\u662F\\u5426\\u662F\\u6784\\u9020\\u51FD\\u6570\\u7684\\u5B9E\\u4F8B\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"Symbol.iterator\"})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let iterable = {\n  [Symbol.iterator]() {\n    let step = 0;\n    return {\n      next() {\n        step++;\n        if (step <= 5) {\n          return { value: step, done: false };\n        }\n        return { done: true };\n      },\n    };\n  },\n};\n\nfor (let value of iterable) {\n  console.log(value); // 1, 2, 3, 4, 5\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"Symbol.toStringTag\"})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let myObj = {\n  [Symbol.toStringTag]: 'MyCustomObject',\n};\n\nconsole.log(Object.prototype.toString.call(myObj)); // \"[object MyCustomObject]\"\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsx)(e.p,{children:\"Symbol \\u662F JavaScript \\u4E2D\\u4E00\\u9879\\u5F3A\\u5927\\u7684\\u529F\\u80FD\\uFF0C\\u5C24\\u5176\\u9002\\u7528\\u4E8E\\u521B\\u5EFA\\u552F\\u4E00\\u7684\\u5BF9\\u8C61\\u5C5E\\u6027\\u548C\\u81EA\\u5B9A\\u4E49\\u5BF9\\u8C61\\u884C\\u4E3A\\u3002\\u5B83\\u4EEC\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u521B\\u5EFA\\u9690\\u85CF\\u5C5E\\u6027\\u7684\\u65B9\\u6CD5\\uFF0C\\u9632\\u6B62\\u610F\\u5916\\u8BBF\\u95EE\\u6216\\u4FEE\\u6539\\uFF0C\\u8FD9\\u5728\\u5927\\u578B\\u5E94\\u7528\\u7A0B\\u5E8F\\u548C\\u5E93\\u4E2D\\u7279\\u522B\\u6709\\u76CA\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Symbol\",children:\"Symbol - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/symbol\",children:\"Symbol type\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/how-did-i-miss-javascript-symbols-c1f1c0e1874a/\",children:\"A quick overview of JavaScript symbols\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/types-grammar/ch1.md#symbol-values\",children:\"Symbol Values - You Don't Know JS Yet\"})}),`\n`]})]})}function m(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(s,{...l})}):s(l)}return f(O);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-template-literals-and-how-are-they-used/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-template-literals-and-how-are-they-used/en-US.json
index c801937e1..499be5752 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-template-literals-and-how-are-they-used/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-template-literals-and-how-are-they-used/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-template-literals-and-how-are-they-used/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var l in e)r(t,l,{get:e[l],enumerable:!0})},s=(t,e,l,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!u.call(t,a)&&a!==l&&r(t,a,{get:()=>e[a],enumerable:!(i=m(e,a))||i.enumerable});return t};var x=(t,e,l)=>(l=t!=null?d(g(t)):{},s(e||!t||!t.__esModule?r(l,\"default\",{value:t,enumerable:!0}):l,t)),N=t=>s(r({},\"__esModule\",{value:!0}),t);var c=f((J,o)=>{o.exports=_jsx_runtime});var v={};y(v,{default:()=>w,frontmatter:()=>T});var n=x(c()),T={title:\"What are template literals and how are they used?\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",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:[\"Template literals are a feature in JavaScript that allow for easier string interpolation and multi-line strings. They are enclosed by backticks (\",(0,n.jsx)(e.code,{children:\"`\"}),\") instead of single or double quotes. You can embed expressions within template literals using \",(0,n.jsx)(e.code,{children:\"${expression}\"}),\" syntax.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"const myName = 'John';\\nconst greeting = `Hello, ${myName}!`;\\nconsole.log(greeting); // Output: Hello, John!\\n\"})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are template literals and how are they used?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Introduction to template literals\"}),`\n`,(0,n.jsx)(e.p,{children:\"Template literals are a feature introduced in ES6 (ECMAScript 2015) that provide an easier and more readable way to work with strings in JavaScript. They allow for string interpolation, multi-line strings, and embedded expressions.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Template literals are enclosed by backticks (\",(0,n.jsx)(e.code,{children:\"`\"}),\") instead of single or double quotes. This allows for more flexible string formatting.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"String interpolation\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"One of the most powerful features of template literals is string interpolation. You can embed expressions within a string using \",(0,n.jsx)(e.code,{children:\"${expression}\"}),\" syntax.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"const myName = 'John';\\nconst age = 30;\\nconst greeting = `Hello, my name is ${myName} and I am ${age} years old.`;\\nconsole.log(greeting); // Output: Hello, my name is John and I am 30 years old.\\n\"})}),`\n`,(0,n.jsx)(e.h3,{children:\"Multi-line strings\"}),`\n`,(0,n.jsx)(e.p,{children:\"Template literals make it easy to create multi-line strings without the need for escape characters.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const multiLineString = \\`This is a string\nthat spans multiple\nlines.\\`;\nconsole.log(multiLineString);\n// Output:\n// This is a string\n// that spans multiple\n// lines.\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Tagged templates\"}),`\n`,(0,n.jsx)(e.p,{children:\"Tagged templates allow you to parse template literals with a function. The function can then manipulate the template literal's content before it is output.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function tag(strings, ...values) {\n  console.log(strings); // Array of string literals: [\"Hello, \", \"!\"]\n  console.log(values); // Array of values: [\"John\"]\n  return 'Custom tagged template result';\n}\n\nconst myName = 'John';\nconst result = tag\\`Hello, \\${myName}!\\`;\nconsole.log(result); // Output: Custom tagged template result\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Nesting template literals\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can nest template literals within each other for more complex string constructions.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"const myName = 'John';\\nconst age = 30;\\nconst nestedTemplate = `Name: ${myName}, Age: ${age}, Info: ${`Name: ${myName}, Age: ${age}`}`;\\nconsole.log(nestedTemplate);\\n// Output: Name: John, Age: 30, Info: Name: John, Age: 30\\n\"})}),`\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/Web/JavaScript/Reference/Template_literals\",children:\"MDN Web Docs: Template literals\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/template-literals\",children:\"JavaScript.info: Template literals\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"http://es6-features.org/#StringInterpolation\",children:\"ES6 Features: Template literals\"})}),`\n`]})]})}function b(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var w=b;return N(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var l in e)r(t,l,{get:e[l],enumerable:!0})},s=(t,e,l,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!f.call(t,a)&&a!==l&&r(t,a,{get:()=>e[a],enumerable:!(i=p(e,a))||i.enumerable});return t};var N=(t,e,l)=>(l=t!=null?m(g(t)):{},s(e||!t||!t.__esModule?r(l,\"default\",{value:t,enumerable:!0}):l,t)),T=t=>s(r({},\"__esModule\",{value:!0}),t);var c=y((J,o)=>{o.exports=_jsx_runtime});var v={};x(v,{default:()=>d,frontmatter:()=>w});var n=N(c()),w={title:\"What are template literals and how are they used?\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Template literals are a feature in JavaScript that allow for easier string interpolation and multi-line strings. They are enclosed by backticks (\",(0,n.jsx)(e.code,{children:\"`\"}),\") instead of single or double quotes. You can embed expressions within template literals using \",(0,n.jsx)(e.code,{children:\"${expression}\"}),\" syntax.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"const myName = 'John';\\nconst greeting = `Hello, ${myName}!`;\\nconsole.log(greeting); // Output: Hello, John!\\n\"})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are template literals and how are they used?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Introduction to template literals\"}),`\n`,(0,n.jsx)(e.p,{children:\"Template literals are a feature introduced in ES6 (ECMAScript 2015) that provide an easier and more readable way to work with strings in JavaScript. They allow for string interpolation, multi-line strings, and embedded expressions.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Template literals are enclosed by backticks (\",(0,n.jsx)(e.code,{children:\"`\"}),\") instead of single or double quotes. This allows for more flexible string formatting.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"String interpolation\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"One of the most powerful features of template literals is string interpolation. You can embed expressions within a string using \",(0,n.jsx)(e.code,{children:\"${expression}\"}),\" syntax.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"const myName = 'John';\\nconst age = 30;\\nconst greeting = `Hello, my name is ${myName} and I am ${age} years old.`;\\nconsole.log(greeting); // Output: Hello, my name is John and I am 30 years old.\\n\"})}),`\n`,(0,n.jsx)(e.h3,{children:\"Multi-line strings\"}),`\n`,(0,n.jsx)(e.p,{children:\"Template literals make it easy to create multi-line strings without the need for escape characters.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const multiLineString = \\`This is a string\nthat spans multiple\nlines.\\`;\nconsole.log(multiLineString);\n// Output:\n// This is a string\n// that spans multiple\n// lines.\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Tagged templates\"}),`\n`,(0,n.jsx)(e.p,{children:\"Tagged templates allow you to parse template literals with a function. The function can then manipulate the template literal's content before it is output.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function tag(strings, ...values) {\n  console.log(strings); // Array of string literals: [\"Hello, \", \"!\"]\n  console.log(values); // Array of values: [\"John\"]\n  return 'Custom tagged template result';\n}\n\nconst myName = 'John';\nconst result = tag\\`Hello, \\${myName}!\\`;\nconsole.log(result); // Output: Custom tagged template result\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Nesting template literals\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can nest template literals within each other for more complex string constructions.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"const myName = 'John';\\nconst age = 30;\\nconst nestedTemplate = `Name: ${myName}, Age: ${age}, Info: ${`Name: ${myName}, Age: ${age}`}`;\\nconsole.log(nestedTemplate);\\n// Output: Name: John, Age: 30, Info: Name: John, Age: 30\\n\"})}),`\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/Web/JavaScript/Reference/Template_literals\",children:\"MDN Web Docs: Template literals\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/template-literals\",children:\"JavaScript.info: Template literals\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"http://es6-features.org/#StringInterpolation\",children:\"ES6 Features: Template literals\"})}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return T(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-template-literals-and-how-are-they-used/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-template-literals-and-how-are-they-used/zh-CN.json
index 20c948bb0..41f55e9c6 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-template-literals-and-how-are-they-used/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-template-literals-and-how-are-they-used/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-template-literals-and-how-are-they-used/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var N=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),f=(l,e)=>{for(var t in e)a(l,t,{get:e[t],enumerable:!0})},s=(l,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!u.call(l,r)&&r!==t&&a(l,r,{get:()=>e[r],enumerable:!(i=m(e,r))||i.enumerable});return l};var y=(l,e,t)=>(t=l!=null?d(g(l)):{},s(e||!l||!l.__esModule?a(t,\"default\",{value:l,enumerable:!0}):t,l)),v=l=>s(a({},\"__esModule\",{value:!0}),l);var o=N((T,c)=>{c.exports=_jsx_runtime});var S={};f(S,{default:()=>x,frontmatter:()=>j});var n=y(o()),j={title:\"\\u4EC0\\u4E48\\u662F\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u4EEC\\uFF1F\"};function h(l){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},l.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u4E2A\\u7279\\u6027\\uFF0C\\u5B83\\u5141\\u8BB8\\u66F4\\u8F7B\\u677E\\u7684\\u5B57\\u7B26\\u4E32\\u63D2\\u503C\\u548C\\u591A\\u884C\\u5B57\\u7B26\\u4E32\\u3002\\u5B83\\u4EEC\\u7528\\u53CD\\u5F15\\u53F7 (\",(0,n.jsx)(e.code,{children:\"`\"}),\") \\u800C\\u4E0D\\u662F\\u5355\\u5F15\\u53F7\\u6216\\u53CC\\u5F15\\u53F7\\u62EC\\u8D77\\u6765\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"${expression}\"}),\" \\u8BED\\u6CD5\\u5728\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u4E2D\\u5D4C\\u5165\\u8868\\u8FBE\\u5F0F\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"const myName = 'John';\\nconst greeting = `Hello, ${myName}!`;\\nconsole.log(greeting); // Output: Hello, John!\\n\"})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u4EEC\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u7B80\\u4ECB\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u662F ES6 (ECMAScript 2015) \\u4E2D\\u5F15\\u5165\\u7684\\u4E00\\u4E2A\\u7279\\u6027\\uFF0C\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u7B80\\u5355\\u3001\\u66F4\\u6613\\u8BFB\\u7684\\u65B9\\u5F0F\\u6765\\u5904\\u7406 JavaScript \\u4E2D\\u7684\\u5B57\\u7B26\\u4E32\\u3002\\u5B83\\u4EEC\\u5141\\u8BB8\\u5B57\\u7B26\\u4E32\\u63D2\\u503C\\u3001\\u591A\\u884C\\u5B57\\u7B26\\u4E32\\u548C\\u5D4C\\u5165\\u8868\\u8FBE\\u5F0F\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u7528\\u53CD\\u5F15\\u53F7 (\",(0,n.jsx)(e.code,{children:\"`\"}),\") \\u800C\\u4E0D\\u662F\\u5355\\u5F15\\u53F7\\u6216\\u53CC\\u5F15\\u53F7\\u62EC\\u8D77\\u6765\\u3002\\u8FD9\\u5141\\u8BB8\\u66F4\\u7075\\u6D3B\\u7684\\u5B57\\u7B26\\u4E32\\u683C\\u5F0F\\u5316\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B57\\u7B26\\u4E32\\u63D2\\u503C\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u6700\\u5F3A\\u5927\\u7684\\u529F\\u80FD\\u4E4B\\u4E00\\u662F\\u5B57\\u7B26\\u4E32\\u63D2\\u503C\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"${expression}\"}),\" \\u8BED\\u6CD5\\u5728\\u5B57\\u7B26\\u4E32\\u4E2D\\u5D4C\\u5165\\u8868\\u8FBE\\u5F0F\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"const myName = 'John';\\nconst age = 30;\\nconst greeting = `Hello, my name is ${myName} and I am ${age} years old.`;\\nconsole.log(greeting); // Output: Hello, my name is John and I am 30 years old.\\n\"})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u591A\\u884C\\u5B57\\u7B26\\u4E32\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u53EF\\u4EE5\\u8F7B\\u677E\\u521B\\u5EFA\\u591A\\u884C\\u5B57\\u7B26\\u4E32\\uFF0C\\u800C\\u65E0\\u9700\\u8F6C\\u4E49\\u5B57\\u7B26\\u3002\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const multiLineString = \\`This is a string\nthat spans multiple\nlines.\\`;\nconsole.log(multiLineString);\n// Output:\n// This is a string\n// that spans multiple\n// lines.\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6807\\u8BB0\\u6A21\\u677F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6807\\u8BB0\\u6A21\\u677F\\u5141\\u8BB8\\u60A8\\u4F7F\\u7528\\u51FD\\u6570\\u89E3\\u6790\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u3002\\u7136\\u540E\\uFF0C\\u8BE5\\u51FD\\u6570\\u53EF\\u4EE5\\u5728\\u8F93\\u51FA\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u7684\\u5185\\u5BB9\\u4E4B\\u524D\\u5BF9\\u5176\\u8FDB\\u884C\\u64CD\\u4F5C\\u3002\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function tag(strings, ...values) {\n  console.log(strings); // Array of string literals: [\"Hello, \", \"!\"]\n  console.log(values); // Array of values: [\"John\"]\n  return 'Custom tagged template result';\n}\n\nconst myName = 'John';\nconst result = tag\\`Hello, \\${myName}!\\`;\nconsole.log(result); // Output: Custom tagged template result\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5D4C\\u5957\\u6A21\\u677F\\u5B57\\u9762\\u91CF\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u5728\\u5F7C\\u6B64\\u4E4B\\u95F4\\u5D4C\\u5957\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\uFF0C\\u4EE5\\u6784\\u5EFA\\u66F4\\u590D\\u6742\\u7684\\u5B57\\u7B26\\u4E32\\u3002\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"const myName = 'John';\\nconst age = 30;\\nconst nestedTemplate = `Name: ${myName}, Age: ${age}, Info: ${`Name: ${myName}, Age: ${age}`}`;\\nconsole.log(nestedTemplate);\\n// Output: Name: John, Age: 30, Info: Name: John, Age: 30\\n\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Template_literals\",children:\"MDN Web Docs: Template literals\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/template-literals\",children:\"JavaScript.info: Template literals\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"http://es6-features.org/#StringInterpolation\",children:\"ES6 Features: Template literals\"})}),`\n`]})]})}function J(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(h,l)})):h(l)}var x=J;return v(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var f=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),y=(l,e)=>{for(var t in e)a(l,t,{get:e[t],enumerable:!0})},c=(l,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of g(e))!N.call(l,r)&&r!==t&&a(l,r,{get:()=>e[r],enumerable:!(i=p(e,r))||i.enumerable});return l};var v=(l,e,t)=>(t=l!=null?m(u(l)):{},c(e||!l||!l.__esModule?a(t,\"default\",{value:l,enumerable:!0}):t,l)),J=l=>c(a({},\"__esModule\",{value:!0}),l);var o=f(($,s)=>{s.exports=_jsx_runtime});var x={};y(x,{default:()=>d,frontmatter:()=>j});var n=v(o()),j={title:\"\\u4EC0\\u4E48\\u662F\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u4EEC\\uFF1F\"};function h(l){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u4E2A\\u7279\\u6027\\uFF0C\\u5B83\\u5141\\u8BB8\\u66F4\\u8F7B\\u677E\\u7684\\u5B57\\u7B26\\u4E32\\u63D2\\u503C\\u548C\\u591A\\u884C\\u5B57\\u7B26\\u4E32\\u3002\\u5B83\\u4EEC\\u7528\\u53CD\\u5F15\\u53F7 (\",(0,n.jsx)(e.code,{children:\"`\"}),\") \\u800C\\u4E0D\\u662F\\u5355\\u5F15\\u53F7\\u6216\\u53CC\\u5F15\\u53F7\\u62EC\\u8D77\\u6765\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"${expression}\"}),\" \\u8BED\\u6CD5\\u5728\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u4E2D\\u5D4C\\u5165\\u8868\\u8FBE\\u5F0F\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"const myName = 'John';\\nconst greeting = `Hello, ${myName}!`;\\nconsole.log(greeting); // Output: Hello, John!\\n\"})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u4EEC\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u7B80\\u4ECB\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u662F ES6 (ECMAScript 2015) \\u4E2D\\u5F15\\u5165\\u7684\\u4E00\\u4E2A\\u7279\\u6027\\uFF0C\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u7B80\\u5355\\u3001\\u66F4\\u6613\\u8BFB\\u7684\\u65B9\\u5F0F\\u6765\\u5904\\u7406 JavaScript \\u4E2D\\u7684\\u5B57\\u7B26\\u4E32\\u3002\\u5B83\\u4EEC\\u5141\\u8BB8\\u5B57\\u7B26\\u4E32\\u63D2\\u503C\\u3001\\u591A\\u884C\\u5B57\\u7B26\\u4E32\\u548C\\u5D4C\\u5165\\u8868\\u8FBE\\u5F0F\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u7528\\u53CD\\u5F15\\u53F7 (\",(0,n.jsx)(e.code,{children:\"`\"}),\") \\u800C\\u4E0D\\u662F\\u5355\\u5F15\\u53F7\\u6216\\u53CC\\u5F15\\u53F7\\u62EC\\u8D77\\u6765\\u3002\\u8FD9\\u5141\\u8BB8\\u66F4\\u7075\\u6D3B\\u7684\\u5B57\\u7B26\\u4E32\\u683C\\u5F0F\\u5316\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5B57\\u7B26\\u4E32\\u63D2\\u503C\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u6700\\u5F3A\\u5927\\u7684\\u529F\\u80FD\\u4E4B\\u4E00\\u662F\\u5B57\\u7B26\\u4E32\\u63D2\\u503C\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"${expression}\"}),\" \\u8BED\\u6CD5\\u5728\\u5B57\\u7B26\\u4E32\\u4E2D\\u5D4C\\u5165\\u8868\\u8FBE\\u5F0F\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"const myName = 'John';\\nconst age = 30;\\nconst greeting = `Hello, my name is ${myName} and I am ${age} years old.`;\\nconsole.log(greeting); // Output: Hello, my name is John and I am 30 years old.\\n\"})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u591A\\u884C\\u5B57\\u7B26\\u4E32\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u53EF\\u4EE5\\u8F7B\\u677E\\u521B\\u5EFA\\u591A\\u884C\\u5B57\\u7B26\\u4E32\\uFF0C\\u800C\\u65E0\\u9700\\u8F6C\\u4E49\\u5B57\\u7B26\\u3002\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const multiLineString = \\`This is a string\nthat spans multiple\nlines.\\`;\nconsole.log(multiLineString);\n// Output:\n// This is a string\n// that spans multiple\n// lines.\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6807\\u8BB0\\u6A21\\u677F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6807\\u8BB0\\u6A21\\u677F\\u5141\\u8BB8\\u60A8\\u4F7F\\u7528\\u51FD\\u6570\\u89E3\\u6790\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u3002\\u7136\\u540E\\uFF0C\\u8BE5\\u51FD\\u6570\\u53EF\\u4EE5\\u5728\\u8F93\\u51FA\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\u7684\\u5185\\u5BB9\\u4E4B\\u524D\\u5BF9\\u5176\\u8FDB\\u884C\\u64CD\\u4F5C\\u3002\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function tag(strings, ...values) {\n  console.log(strings); // Array of string literals: [\"Hello, \", \"!\"]\n  console.log(values); // Array of values: [\"John\"]\n  return 'Custom tagged template result';\n}\n\nconst myName = 'John';\nconst result = tag\\`Hello, \\${myName}!\\`;\nconsole.log(result); // Output: Custom tagged template result\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5D4C\\u5957\\u6A21\\u677F\\u5B57\\u9762\\u91CF\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u5728\\u5F7C\\u6B64\\u4E4B\\u95F4\\u5D4C\\u5957\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\uFF0C\\u4EE5\\u6784\\u5EFA\\u66F4\\u590D\\u6742\\u7684\\u5B57\\u7B26\\u4E32\\u3002\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"const myName = 'John';\\nconst age = 30;\\nconst nestedTemplate = `Name: ${myName}, Age: ${age}, Info: ${`Name: ${myName}, Age: ${age}`}`;\\nconsole.log(nestedTemplate);\\n// Output: Name: John, Age: 30, Info: Name: John, Age: 30\\n\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Template_literals\",children:\"MDN Web Docs: Template literals\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/template-literals\",children:\"JavaScript.info: Template literals\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"http://es6-features.org/#StringInterpolation\",children:\"ES6 Features: Template literals\"})}),`\n`]})]})}function d(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(h,{...l})}):h(l)}return J(x);})();\n;return Component;"
 }
\ No newline at end of file
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 015b563f0..f23a366f9 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
@@ -30,5 +30,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),v=(i,e)=>{for(var r in e)t(i,r,{get:e[r],enumerable:!0})},o=(i,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!f.call(i,a)&&a!==r&&t(i,a,{get:()=>e[a],enumerable:!(s=p(e,a))||s.enumerable});return i};var A=(i,e,r)=>(r=i!=null?h(g(i)):{},o(e||!i||!i.__esModule?t(r,\"default\",{value:i,enumerable:!0}):r,i)),y=i=>o(t({},\"__esModule\",{value:!0}),i);var c=m((k,l)=>{l.exports=_jsx_runtime});var x={};v(x,{default:()=>J,frontmatter:()=>b});var n=A(c()),b={title:\"What are the advantages and disadvantages of using AJAX?\"};function d(i){let e=Object.assign({h2:\"h2\",p:\"p\",strong:\"strong\",ul:\"ul\",li:\"li\",hr:\"hr\",a:\"a\",h3:\"h3\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"AJAX (Asynchronous JavaScript and XML) is a technique in JavaScript that allows web pages to send and retrieve data asynchronously from servers without refreshing or reloading the entire page.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Advantages\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Smoother user experience\"}),\": Updates happen without full page reloads, like in mail and chat applications.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Lighter server Load\"}),\": Only necessary data is fetched via AJAX, reducing server load and improving perceived performance of webpages.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Maintains client state\"}),\": User interactions and any client states are persisted within the page.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Disadvantages\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reliance on JavaScript\"}),\": If disabled, Ajax functionality breaks.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Bookmarking issues\"}),\": Dynamic content makes bookmarking specific page states difficult.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"SEO Challenges\"}),\": Search engines may struggle to index dynamic content.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Performance Concerns\"}),\": Processing Ajax data on low-end devices can be slow.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"AJAX (Asynchronous JavaScript and XML)\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"AJAX (Asynchronous JavaScript and XML) is a technique in JavaScript that allows web pages to send and retrieve data asynchronously from servers without refreshing or reloading the entire page. When it was first created, it revolutionized web development and resulted in a smoother and more responsive user experience. AJAX is explained in detail in \",(0,n.jsx)(e.a,{href:\"/questions/quiz/explain-ajax-in-as-much-detail-as-possible\",children:\"this question\"}),\".\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's a breakdown of AJAX's pros and cons:\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Advantages\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Enhanced user experience\"}),\": AJAX allows for partial page updates without full reloads. This creates a smoother and more responsive feel for users, as they don't have to wait for the entire page to refresh for every interaction.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reduced server load and bandwidth usage\"}),\": By exchanging only specific data with the server, AJAX minimizes the amount of data transferred. This leads to faster loading times and reduced server strain, especially for frequently updated content.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Improved performance\"}),\": Faster data exchange and partial page updates contribute to a quicker web application overall. Users perceive the application as more responsive and efficient.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Dynamic content updates, preserving client-only state\"}),\": AJAX enables real-time data updates without full page reloads, preserving client-only state like form inputs and scroll positions. This is ideal for features like live chat, stock tickers, or collaborative editing.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Form validation\"}),\": AJAX can be used for client-side form validation that requires back end interactions (e.g. checking for duplicate usernames), providing immediate feedback to users without requiring a form submission request. This improves the user experience and avoids unnecessary full page reloads for invalid submissions.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Disadvantages\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Increased complexity\"}),\": Developing AJAX-powered applications can be more complex compared to traditional web development. It requires handling asynchronous communication and potential race conditions between requests and responses. Since pages are not reloaded, parts of the page can be outdated overtime and can be confusing.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Dependency on JavaScript\"}),\": AJAX relies on JavaScript to function. Users with JavaScript disabled or unsupported browsers won't experience the full functionality of the application. A fallback mechanism (graceful degradation) is necessary to ensure basic functionality for these users.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Security concerns\"}),\": AJAX introduces new security considerations like Cross-Site Scripting (XSS) vulnerabilities (if servers return directly HTML markup) if not implemented carefully. Proper data validation and sanitization are crucial to prevent security risks.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Browser support\"}),\": Older browsers might not fully support AJAX features. Developers need to consider compatibility when building with AJAX to ensure a good user experience across different browsers.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"SEO challenges\"}),\": Search engines might have difficulty indexing content dynamically loaded through AJAX. Developers need to employ techniques like server-side rendering or proper content embedding to ensure search engine visibility.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Navigation problems\"}),\": AJAX can interfere with the browser's back and forward navigation buttons, as well as bookmarking, since the URL may not change with asynchronous updates.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"State management\"}),\": Maintaining the application state and ensuring proper navigation can be challenging with AJAX, requiring additional techniques such as the History API or URL hash fragments.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"While AJAX offers significant advantages in terms of user experience, performance, and functionality, it also introduces complexities and potential drawbacks related to development, SEO, browser compatibility, security, and navigation.\"}),`\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/AJAX\",children:\"Ajax | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data\",children:\"Fetching data from the server | MDN\"})}),`\n`]})]})}function w(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(d,i)})):d(i)}var J=w;return y(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var v=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),A=(i,e)=>{for(var r in e)t(i,r,{get:e[r],enumerable:!0})},o=(i,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of g(e))!m.call(i,a)&&a!==r&&t(i,a,{get:()=>e[a],enumerable:!(s=u(e,a))||s.enumerable});return i};var y=(i,e,r)=>(r=i!=null?p(f(i)):{},o(e||!i||!i.__esModule?t(r,\"default\",{value:i,enumerable:!0}):r,i)),b=i=>o(t({},\"__esModule\",{value:!0}),i);var c=v((X,l)=>{l.exports=_jsx_runtime});var J={};A(J,{default:()=>h,frontmatter:()=>w});var n=y(c()),w={title:\"What are the advantages and disadvantages of using AJAX?\"};function d(i){let e={a:\"a\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",strong:\"strong\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"AJAX (Asynchronous JavaScript and XML) is a technique in JavaScript that allows web pages to send and retrieve data asynchronously from servers without refreshing or reloading the entire page.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Advantages\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Smoother user experience\"}),\": Updates happen without full page reloads, like in mail and chat applications.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Lighter server Load\"}),\": Only necessary data is fetched via AJAX, reducing server load and improving perceived performance of webpages.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Maintains client state\"}),\": User interactions and any client states are persisted within the page.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Disadvantages\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reliance on JavaScript\"}),\": If disabled, Ajax functionality breaks.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Bookmarking issues\"}),\": Dynamic content makes bookmarking specific page states difficult.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"SEO Challenges\"}),\": Search engines may struggle to index dynamic content.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Performance Concerns\"}),\": Processing Ajax data on low-end devices can be slow.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"AJAX (Asynchronous JavaScript and XML)\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"AJAX (Asynchronous JavaScript and XML) is a technique in JavaScript that allows web pages to send and retrieve data asynchronously from servers without refreshing or reloading the entire page. When it was first created, it revolutionized web development and resulted in a smoother and more responsive user experience. AJAX is explained in detail in \",(0,n.jsx)(e.a,{href:\"/questions/quiz/explain-ajax-in-as-much-detail-as-possible\",children:\"this question\"}),\".\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's a breakdown of AJAX's pros and cons:\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Advantages\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Enhanced user experience\"}),\": AJAX allows for partial page updates without full reloads. This creates a smoother and more responsive feel for users, as they don't have to wait for the entire page to refresh for every interaction.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reduced server load and bandwidth usage\"}),\": By exchanging only specific data with the server, AJAX minimizes the amount of data transferred. This leads to faster loading times and reduced server strain, especially for frequently updated content.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Improved performance\"}),\": Faster data exchange and partial page updates contribute to a quicker web application overall. Users perceive the application as more responsive and efficient.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Dynamic content updates, preserving client-only state\"}),\": AJAX enables real-time data updates without full page reloads, preserving client-only state like form inputs and scroll positions. This is ideal for features like live chat, stock tickers, or collaborative editing.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Form validation\"}),\": AJAX can be used for client-side form validation that requires back end interactions (e.g. checking for duplicate usernames), providing immediate feedback to users without requiring a form submission request. This improves the user experience and avoids unnecessary full page reloads for invalid submissions.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Disadvantages\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Increased complexity\"}),\": Developing AJAX-powered applications can be more complex compared to traditional web development. It requires handling asynchronous communication and potential race conditions between requests and responses. Since pages are not reloaded, parts of the page can be outdated overtime and can be confusing.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Dependency on JavaScript\"}),\": AJAX relies on JavaScript to function. Users with JavaScript disabled or unsupported browsers won't experience the full functionality of the application. A fallback mechanism (graceful degradation) is necessary to ensure basic functionality for these users.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Security concerns\"}),\": AJAX introduces new security considerations like Cross-Site Scripting (XSS) vulnerabilities (if servers return directly HTML markup) if not implemented carefully. Proper data validation and sanitization are crucial to prevent security risks.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Browser support\"}),\": Older browsers might not fully support AJAX features. Developers need to consider compatibility when building with AJAX to ensure a good user experience across different browsers.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"SEO challenges\"}),\": Search engines might have difficulty indexing content dynamically loaded through AJAX. Developers need to employ techniques like server-side rendering or proper content embedding to ensure search engine visibility.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Navigation problems\"}),\": AJAX can interfere with the browser's back and forward navigation buttons, as well as bookmarking, since the URL may not change with asynchronous updates.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"State management\"}),\": Maintaining the application state and ensuring proper navigation can be challenging with AJAX, requiring additional techniques such as the History API or URL hash fragments.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"While AJAX offers significant advantages in terms of user experience, performance, and functionality, it also introduces complexities and potential drawbacks related to development, SEO, browser compatibility, security, and navigation.\"}),`\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/AJAX\",children:\"Ajax | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data\",children:\"Fetching data from the server | MDN\"})}),`\n`]})]})}function h(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(d,{...i})}):d(i)}return b(J);})();\n;return Component;"
 }
\ No newline at end of file
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 357e071d2..fefa4a6bd 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
@@ -30,5 +30,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var h=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),x=(a,e)=>{for(var i in e)r(a,i,{get:e[i],enumerable:!0})},t=(a,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!g.call(a,o)&&o!==i&&r(a,o,{get:()=>e[o],enumerable:!(s=u(e,o))||s.enumerable});return a};var f=(a,e,i)=>(i=a!=null?m(v(a)):{},t(e||!a||!a.__esModule?r(i,\"default\",{value:a,enumerable:!0}):i,a)),b=a=>t(r({},\"__esModule\",{value:!0}),a);var c=h((M,d)=>{d.exports=_jsx_runtime});var q={};x(q,{default:()=>_,frontmatter:()=>j});var n=f(c()),j={title:\"Quais s\\xE3o as vantagens e desvantagens de usar o Ajax?\"};function l(a){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\"},a.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"Vantagens\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Melhor interatividade. O novo conte\\xFAdo do servidor pode ser alterado dinamicamente sem a necessidade de recarregar a p\\xE1gina inteira.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Reduzir conex\\xF5es para o servidor, pois scripts e folhas de estilo s\\xF3 precisam ser solicitados uma vez.\"}),`\n`,(0,n.jsx)(e.li,{children:\"O State pode ser mantido em uma p\\xE1gina. As vari\\xE1veis do JavaScript e o estado do DOM persistir\\xE3o porque a p\\xE1gina principal do cont\\xEAiner n\\xE3o foi recarregada.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Basicamente, a maioria das vantagens de um SPA.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Desvantagens\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"P\\xE1ginas din\\xE2micas da web s\\xE3o mais dif\\xEDceis de favoritar.\"}),`\n`,(0,n.jsx)(e.li,{children:\"N\\xE3o funciona se o JavaScript foi desativado no navegador.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Alguns rastreadores web n\\xE3o executam JavaScript e n\\xE3o veem o conte\\xFAdo que foi carregado pelo JavaScript.\"}),`\n`,(0,n.jsx)(e.li,{children:\"P\\xE1ginas web que usam Ajax para buscar dados provavelmente ter\\xE3o que combinar os dados remotos com modelos do lado cliente para atualizar o DOM. Para que isso aconte\\xE7a, o JavaScript ter\\xE1 que ser analisado e executado no navegador, e dispositivos m\\xF3veis de baixo custo podem ter problemas com isso.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Basicamente, a maioria das vantagens de um SPA.\"}),`\n`]})]})}function S(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(l,a)})):l(a)}var _=S;return b(q);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),f=(a,e)=>{for(var o in e)r(a,o,{get:e[o],enumerable:!0})},t=(a,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of v(e))!g.call(a,i)&&i!==o&&r(a,i,{get:()=>e[i],enumerable:!(s=p(e,i))||s.enumerable});return a};var S=(a,e,o)=>(o=a!=null?u(h(a)):{},t(e||!a||!a.__esModule?r(o,\"default\",{value:a,enumerable:!0}):o,a)),b=a=>t(r({},\"__esModule\",{value:!0}),a);var c=x((A,d)=>{d.exports=_jsx_runtime});var _={};f(_,{default:()=>m,frontmatter:()=>j});var n=S(c()),j={title:\"Quais s\\xE3o as vantagens e desvantagens de usar o Ajax?\"};function l(a){let e={h2:\"h2\",li:\"li\",ul:\"ul\",...a.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"Vantagens\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Melhor interatividade. O novo conte\\xFAdo do servidor pode ser alterado dinamicamente sem a necessidade de recarregar a p\\xE1gina inteira.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Reduzir conex\\xF5es para o servidor, pois scripts e folhas de estilo s\\xF3 precisam ser solicitados uma vez.\"}),`\n`,(0,n.jsx)(e.li,{children:\"O State pode ser mantido em uma p\\xE1gina. As vari\\xE1veis do JavaScript e o estado do DOM persistir\\xE3o porque a p\\xE1gina principal do cont\\xEAiner n\\xE3o foi recarregada.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Basicamente, a maioria das vantagens de um SPA.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Desvantagens\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"P\\xE1ginas din\\xE2micas da web s\\xE3o mais dif\\xEDceis de favoritar.\"}),`\n`,(0,n.jsx)(e.li,{children:\"N\\xE3o funciona se o JavaScript foi desativado no navegador.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Alguns rastreadores web n\\xE3o executam JavaScript e n\\xE3o veem o conte\\xFAdo que foi carregado pelo JavaScript.\"}),`\n`,(0,n.jsx)(e.li,{children:\"P\\xE1ginas web que usam Ajax para buscar dados provavelmente ter\\xE3o que combinar os dados remotos com modelos do lado cliente para atualizar o DOM. Para que isso aconte\\xE7a, o JavaScript ter\\xE1 que ser analisado e executado no navegador, e dispositivos m\\xF3veis de baixo custo podem ter problemas com isso.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Basicamente, a maioria das vantagens de um SPA.\"}),`\n`]})]})}function m(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(l,{...a})}):l(a)}return b(_);})();\n;return Component;"
 }
\ No newline at end of file
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 09f998848..155d9ad51 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
@@ -30,5 +30,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var o=Object.create;var c=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,J=Object.prototype.hasOwnProperty;var X=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),g=(e,n)=>{for(var i in n)c(e,i,{get:n[i],enumerable:!0})},h=(e,n,i,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of p(n))!J.call(e,l)&&l!==i&&c(e,l,{get:()=>n[l],enumerable:!(t=A(n,l))||t.enumerable});return e};var x=(e,n,i)=>(i=e!=null?o(u(e)):{},h(n||!e||!e.__esModule?c(i,\"default\",{value:e,enumerable:!0}):i,e)),m=e=>h(c({},\"__esModule\",{value:!0}),e);var d=X((_,a)=>{a.exports=_jsx_runtime});var v={};g(v,{default:()=>f,frontmatter:()=>j});var r=x(d()),j={title:\"\\u4F7F\\u7528 AJAX \\u7684\\u4F18\\u7F3A\\u70B9\\u662F\\u4EC0\\u4E48\\uFF1F\"};function s(e){let n=Object.assign({h2:\"h2\",p:\"p\",strong:\"strong\",ul:\"ul\",li:\"li\",hr:\"hr\",a:\"a\",h3:\"h3\"},e.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsx)(n.p,{children:\"AJAX\\uFF08\\u5F02\\u6B65 JavaScript \\u548C XML\\uFF09\\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u5B83\\u5141\\u8BB8\\u7F51\\u9875\\u4ECE\\u670D\\u52A1\\u5668\\u5F02\\u6B65\\u53D1\\u9001\\u548C\\u68C0\\u7D22\\u6570\\u636E\\uFF0C\\u800C\\u65E0\\u9700\\u5237\\u65B0\\u6216\\u91CD\\u65B0\\u52A0\\u8F7D\\u6574\\u4E2A\\u9875\\u9762\\u3002\"}),`\n`,(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:\"\\u4F18\\u70B9\"})}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u66F4\\u6D41\\u7545\\u7684\\u7528\\u6237\\u4F53\\u9A8C\"}),\"\\uFF1A\\u66F4\\u65B0\\u53D1\\u751F\\u5728\\u6CA1\\u6709\\u5B8C\\u5168\\u9875\\u9762\\u91CD\\u65B0\\u52A0\\u8F7D\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5C31\\u50CF\\u5728\\u90AE\\u4EF6\\u548C\\u804A\\u5929\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u4E00\\u6837\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:\"\\u7F3A\\u70B9\"})}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u4F9D\\u8D56\\u4E8E JavaScript\"}),\"\\uFF1A\\u5982\\u679C\\u7981\\u7528\\uFF0CAjax \\u529F\\u80FD\\u4F1A\\u4E2D\\u65AD\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.hr,{}),`\n`,(0,r.jsx)(n.h2,{children:\"AJAX\\uFF08\\u5F02\\u6B65 JavaScript \\u548C XML\\uFF09\"}),`\n`,(0,r.jsxs)(n.p,{children:[\"AJAX\\uFF08\\u5F02\\u6B65 JavaScript \\u548C XML\\uFF09\\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u5B83\\u5141\\u8BB8\\u7F51\\u9875\\u4ECE\\u670D\\u52A1\\u5668\\u5F02\\u6B65\\u53D1\\u9001\\u548C\\u68C0\\u7D22\\u6570\\u636E\\uFF0C\\u800C\\u65E0\\u9700\\u5237\\u65B0\\u6216\\u91CD\\u65B0\\u52A0\\u8F7D\\u6574\\u4E2A\\u9875\\u9762\\u3002 \\u5F53\\u5B83\\u6700\\u521D\\u521B\\u5EFA\\u65F6\\uFF0C\\u5B83\\u5F7B\\u5E95\\u6539\\u53D8\\u4E86 Web \\u5F00\\u53D1\\uFF0C\\u5E76\\u5E26\\u6765\\u4E86\\u66F4\\u6D41\\u7545\\u3001\\u54CD\\u5E94\\u66F4\\u5FEB\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002 AJAX \\u5728\",(0,r.jsx)(n.a,{href:\"/questions/quiz/explain-ajax-in-as-much-detail-as-possible\",children:\"\\u8FD9\\u4E2A\\u95EE\\u9898\"}),\"\\u4E2D\\u8FDB\\u884C\\u4E86\\u8BE6\\u7EC6\\u89E3\\u91CA\\u3002\"]}),`\n`,(0,r.jsx)(n.p,{children:\"\\u4EE5\\u4E0B\\u662F AJAX \\u4F18\\u7F3A\\u70B9\\u7684\\u7EC6\\u5206\\uFF1A\"}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u589E\\u5F3A\\u7684\\u7528\\u6237\\u4F53\\u9A8C\"}),\"\\uFF1AAJAX \\u5141\\u8BB8\\u90E8\\u5206\\u9875\\u9762\\u66F4\\u65B0\\uFF0C\\u800C\\u65E0\\u9700\\u5B8C\\u5168\\u91CD\\u65B0\\u52A0\\u8F7D\\u3002 \\u8FD9\\u4E3A\\u7528\\u6237\\u521B\\u9020\\u4E86\\u66F4\\u6D41\\u7545\\u3001\\u66F4\\u7075\\u654F\\u7684\\u611F\\u89C9\\uFF0C\\u56E0\\u4E3A\\u4ED6\\u4EEC\\u4E0D\\u5FC5\\u7B49\\u5F85\\u6574\\u4E2A\\u9875\\u9762\\u5728\\u6BCF\\u6B21\\u4EA4\\u4E92\\u65F6\\u5237\\u65B0\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u589E\\u52A0\\u590D\\u6742\\u6027\"}),\"\\uFF1A\\u4E0E\\u4F20\\u7EDF\\u7684 Web \\u5F00\\u53D1\\u76F8\\u6BD4\\uFF0C\\u5F00\\u53D1\\u652F\\u6301 AJAX \\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u53EF\\u80FD\\u66F4\\u590D\\u6742\\u3002 \\u5B83\\u9700\\u8981\\u5904\\u7406\\u5F02\\u6B65\\u901A\\u4FE1\\u4EE5\\u53CA\\u8BF7\\u6C42\\u548C\\u54CD\\u5E94\\u4E4B\\u95F4\\u7684\\u6F5C\\u5728\\u7ADE\\u4E89\\u6761\\u4EF6\\u3002 \\u7531\\u4E8E\\u9875\\u9762\\u6CA1\\u6709\\u91CD\\u65B0\\u52A0\\u8F7D\\uFF0C\\u9875\\u9762\\u7684\\u4E00\\u90E8\\u5206\\u53EF\\u80FD\\u4F1A\\u968F\\u7740\\u65F6\\u95F4\\u7684\\u63A8\\u79FB\\u800C\\u8FC7\\u65F6\\uFF0C\\u5E76\\u4E14\\u53EF\\u80FD\\u4F1A\\u9020\\u6210\\u6DF7\\u6DC6\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.p,{children:\"\\u867D\\u7136 AJAX \\u5728\\u7528\\u6237\\u4F53\\u9A8C\\u3001\\u6027\\u80FD\\u548C\\u529F\\u80FD\\u65B9\\u9762\\u5177\\u6709\\u663E\\u7740\\u7684\\u4F18\\u52BF\\uFF0C\\u4F46\\u5B83\\u4E5F\\u5E26\\u6765\\u4E86\\u4E0E\\u5F00\\u53D1\\u3001SEO\\u3001\\u6D4F\\u89C8\\u5668\\u517C\\u5BB9\\u6027\\u3001\\u5B89\\u5168\\u6027\\u548C\\u5BFC\\u822A\\u76F8\\u5173\\u7684\\u590D\\u6742\\u6027\\u548C\\u6F5C\\u5728\\u7684\\u7F3A\\u70B9\\u3002\"}),`\n`,(0,r.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/AJAX\",children:\"Ajax | MDN\"})}),`\n`]})]})}function S(e={}){let{wrapper:n}=e.components||{};return n?(0,r.jsx)(n,Object.assign({},e,{children:(0,r.jsx)(s,e)})):s(e)}var f=S;return m(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var A=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var J=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var x=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),g=(e,n)=>{for(var i in n)c(e,i,{get:n[i],enumerable:!0})},t=(e,n,i,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of u(n))!X.call(e,l)&&l!==i&&c(e,l,{get:()=>n[l],enumerable:!(h=p(n,l))||h.enumerable});return e};var m=(e,n,i)=>(i=e!=null?A(J(e)):{},t(n||!e||!e.__esModule?c(i,\"default\",{value:e,enumerable:!0}):i,e)),j=e=>t(c({},\"__esModule\",{value:!0}),e);var d=x((M,a)=>{a.exports=_jsx_runtime});var f={};g(f,{default:()=>s,frontmatter:()=>S});var r=m(d()),S={title:\"\\u4F7F\\u7528 AJAX \\u7684\\u4F18\\u7F3A\\u70B9\\u662F\\u4EC0\\u4E48\\uFF1F\"};function o(e){let n={a:\"a\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",strong:\"strong\",ul:\"ul\",...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsx)(n.p,{children:\"AJAX\\uFF08\\u5F02\\u6B65 JavaScript \\u548C XML\\uFF09\\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u5B83\\u5141\\u8BB8\\u7F51\\u9875\\u4ECE\\u670D\\u52A1\\u5668\\u5F02\\u6B65\\u53D1\\u9001\\u548C\\u68C0\\u7D22\\u6570\\u636E\\uFF0C\\u800C\\u65E0\\u9700\\u5237\\u65B0\\u6216\\u91CD\\u65B0\\u52A0\\u8F7D\\u6574\\u4E2A\\u9875\\u9762\\u3002\"}),`\n`,(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:\"\\u4F18\\u70B9\"})}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u66F4\\u6D41\\u7545\\u7684\\u7528\\u6237\\u4F53\\u9A8C\"}),\"\\uFF1A\\u66F4\\u65B0\\u53D1\\u751F\\u5728\\u6CA1\\u6709\\u5B8C\\u5168\\u9875\\u9762\\u91CD\\u65B0\\u52A0\\u8F7D\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5C31\\u50CF\\u5728\\u90AE\\u4EF6\\u548C\\u804A\\u5929\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u4E00\\u6837\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:\"\\u7F3A\\u70B9\"})}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u4F9D\\u8D56\\u4E8E JavaScript\"}),\"\\uFF1A\\u5982\\u679C\\u7981\\u7528\\uFF0CAjax \\u529F\\u80FD\\u4F1A\\u4E2D\\u65AD\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.hr,{}),`\n`,(0,r.jsx)(n.h2,{children:\"AJAX\\uFF08\\u5F02\\u6B65 JavaScript \\u548C XML\\uFF09\"}),`\n`,(0,r.jsxs)(n.p,{children:[\"AJAX\\uFF08\\u5F02\\u6B65 JavaScript \\u548C XML\\uFF09\\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u5B83\\u5141\\u8BB8\\u7F51\\u9875\\u4ECE\\u670D\\u52A1\\u5668\\u5F02\\u6B65\\u53D1\\u9001\\u548C\\u68C0\\u7D22\\u6570\\u636E\\uFF0C\\u800C\\u65E0\\u9700\\u5237\\u65B0\\u6216\\u91CD\\u65B0\\u52A0\\u8F7D\\u6574\\u4E2A\\u9875\\u9762\\u3002 \\u5F53\\u5B83\\u6700\\u521D\\u521B\\u5EFA\\u65F6\\uFF0C\\u5B83\\u5F7B\\u5E95\\u6539\\u53D8\\u4E86 Web \\u5F00\\u53D1\\uFF0C\\u5E76\\u5E26\\u6765\\u4E86\\u66F4\\u6D41\\u7545\\u3001\\u54CD\\u5E94\\u66F4\\u5FEB\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002 AJAX \\u5728\",(0,r.jsx)(n.a,{href:\"/questions/quiz/explain-ajax-in-as-much-detail-as-possible\",children:\"\\u8FD9\\u4E2A\\u95EE\\u9898\"}),\"\\u4E2D\\u8FDB\\u884C\\u4E86\\u8BE6\\u7EC6\\u89E3\\u91CA\\u3002\"]}),`\n`,(0,r.jsx)(n.p,{children:\"\\u4EE5\\u4E0B\\u662F AJAX \\u4F18\\u7F3A\\u70B9\\u7684\\u7EC6\\u5206\\uFF1A\"}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u589E\\u5F3A\\u7684\\u7528\\u6237\\u4F53\\u9A8C\"}),\"\\uFF1AAJAX \\u5141\\u8BB8\\u90E8\\u5206\\u9875\\u9762\\u66F4\\u65B0\\uFF0C\\u800C\\u65E0\\u9700\\u5B8C\\u5168\\u91CD\\u65B0\\u52A0\\u8F7D\\u3002 \\u8FD9\\u4E3A\\u7528\\u6237\\u521B\\u9020\\u4E86\\u66F4\\u6D41\\u7545\\u3001\\u66F4\\u7075\\u654F\\u7684\\u611F\\u89C9\\uFF0C\\u56E0\\u4E3A\\u4ED6\\u4EEC\\u4E0D\\u5FC5\\u7B49\\u5F85\\u6574\\u4E2A\\u9875\\u9762\\u5728\\u6BCF\\u6B21\\u4EA4\\u4E92\\u65F6\\u5237\\u65B0\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u589E\\u52A0\\u590D\\u6742\\u6027\"}),\"\\uFF1A\\u4E0E\\u4F20\\u7EDF\\u7684 Web \\u5F00\\u53D1\\u76F8\\u6BD4\\uFF0C\\u5F00\\u53D1\\u652F\\u6301 AJAX \\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u53EF\\u80FD\\u66F4\\u590D\\u6742\\u3002 \\u5B83\\u9700\\u8981\\u5904\\u7406\\u5F02\\u6B65\\u901A\\u4FE1\\u4EE5\\u53CA\\u8BF7\\u6C42\\u548C\\u54CD\\u5E94\\u4E4B\\u95F4\\u7684\\u6F5C\\u5728\\u7ADE\\u4E89\\u6761\\u4EF6\\u3002 \\u7531\\u4E8E\\u9875\\u9762\\u6CA1\\u6709\\u91CD\\u65B0\\u52A0\\u8F7D\\uFF0C\\u9875\\u9762\\u7684\\u4E00\\u90E8\\u5206\\u53EF\\u80FD\\u4F1A\\u968F\\u7740\\u65F6\\u95F4\\u7684\\u63A8\\u79FB\\u800C\\u8FC7\\u65F6\\uFF0C\\u5E76\\u4E14\\u53EF\\u80FD\\u4F1A\\u9020\\u6210\\u6DF7\\u6DC6\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.p,{children:\"\\u867D\\u7136 AJAX \\u5728\\u7528\\u6237\\u4F53\\u9A8C\\u3001\\u6027\\u80FD\\u548C\\u529F\\u80FD\\u65B9\\u9762\\u5177\\u6709\\u663E\\u7740\\u7684\\u4F18\\u52BF\\uFF0C\\u4F46\\u5B83\\u4E5F\\u5E26\\u6765\\u4E86\\u4E0E\\u5F00\\u53D1\\u3001SEO\\u3001\\u6D4F\\u89C8\\u5668\\u517C\\u5BB9\\u6027\\u3001\\u5B89\\u5168\\u6027\\u548C\\u5BFC\\u822A\\u76F8\\u5173\\u7684\\u590D\\u6742\\u6027\\u548C\\u6F5C\\u5728\\u7684\\u7F3A\\u70B9\\u3002\"}),`\n`,(0,r.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/AJAX\",children:\"Ajax | MDN\"})}),`\n`]})]})}function s(e={}){let{wrapper:n}=e.components||{};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}return j(f);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors/en-US.json
index dddb4644e..53f3b42d5 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors/en-US.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),S=(n,e)=>{for(var s in e)a(n,s,{get:e[s],enumerable:!0})},l=(n,e,s,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!f.call(n,i)&&i!==s&&a(n,i,{get:()=>e[i],enumerable:!(r=u(e,i))||r.enumerable});return n};var b=(n,e,s)=>(s=n!=null?h(m(n)):{},l(e||!n||!n.__esModule?a(s,\"default\",{value:n,enumerable:!0}):s,n)),w=n=>l(a({},\"__esModule\",{value:!0}),n);var c=g((_,o)=>{o.exports=_jsx_runtime});var v={};S(v,{default:()=>x,frontmatter:()=>y});var t=b(c()),y={title:\"What are the advantages/disadvantages of using CSS preprocessors?\"};function d(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"Advantages\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"CSS is made more maintainable.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Easier to write nested selectors.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Variables for consistent theming. Can share theme files across different projects. This is not necessarily useful with CSS custom properties (frequently called CSS variables).\"}),`\n`,(0,t.jsx)(e.li,{children:\"Mixins to generate repeated CSS.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Sass and Less have features like loops, lists, and maps can make configuration easier and less verbose.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Splitting your code into multiple files during development. CSS files can be split up too but doing so will require an HTTP request to download each CSS file.\"}),`\n`]}),`\n`,(0,t.jsx)(e.h2,{children:\"Disadvantages\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"Requires tools for preprocessing. Re-compilation time can be slow.\"}),`\n`,(0,t.jsxs)(e.li,{children:[\"Not writing currently and potentially usable CSS. For example, by using something like \",(0,t.jsx)(e.a,{href:\"https://github.com/postcss/postcss-loader\",children:\"postcss-loader\"}),\" with \",(0,t.jsx)(e.a,{href:\"https://webpack.js.org/\",children:\"webpack\"}),\", you can write potentially future-compatible CSS, allowing you to use things like CSS variables instead of Sass variables. Thus, you're learning new syntax that could pay off if/when they become standardized.\"]}),`\n`]})]})}function C(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(d,n)})):d(n)}var x=C;return w(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var i in e)a(n,i,{get:e[i],enumerable:!0})},l=(n,e,i,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!S.call(n,s)&&s!==i&&a(n,s,{get:()=>e[s],enumerable:!(r=p(e,s))||r.enumerable});return n};var w=(n,e,i)=>(i=n!=null?u(f(n)):{},l(e||!n||!n.__esModule?a(i,\"default\",{value:n,enumerable:!0}):i,n)),y=n=>l(a({},\"__esModule\",{value:!0}),n);var c=g((j,o)=>{o.exports=_jsx_runtime});var x={};b(x,{default:()=>h,frontmatter:()=>C});var t=w(c()),C={title:\"What are the advantages/disadvantages of using CSS preprocessors?\"};function d(n){let e={a:\"a\",h2:\"h2\",li:\"li\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"Advantages\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"CSS is made more maintainable.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Easier to write nested selectors.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Variables for consistent theming. Can share theme files across different projects. This is not necessarily useful with CSS custom properties (frequently called CSS variables).\"}),`\n`,(0,t.jsx)(e.li,{children:\"Mixins to generate repeated CSS.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Sass and Less have features like loops, lists, and maps can make configuration easier and less verbose.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Splitting your code into multiple files during development. CSS files can be split up too but doing so will require an HTTP request to download each CSS file.\"}),`\n`]}),`\n`,(0,t.jsx)(e.h2,{children:\"Disadvantages\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"Requires tools for preprocessing. Re-compilation time can be slow.\"}),`\n`,(0,t.jsxs)(e.li,{children:[\"Not writing currently and potentially usable CSS. For example, by using something like \",(0,t.jsx)(e.a,{href:\"https://github.com/postcss/postcss-loader\",children:\"postcss-loader\"}),\" with \",(0,t.jsx)(e.a,{href:\"https://webpack.js.org/\",children:\"webpack\"}),\", you can write potentially future-compatible CSS, allowing you to use things like CSS variables instead of Sass variables. Thus, you're learning new syntax that could pay off if/when they become standardized.\"]}),`\n`]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(d,{...n})}):d(n)}return y(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors/pt-BR.json
index 78eeb8e0c..f2b63b29c 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors/pt-BR.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var S=(s,e)=>()=>(e||s((e={exports:{}}).exports,e),e.exports),f=(s,e)=>{for(var o in e)r(s,o,{get:e[o],enumerable:!0})},t=(s,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of u(e))!h.call(s,n)&&n!==o&&r(s,n,{get:()=>e[n],enumerable:!(i=p(e,n))||i.enumerable});return s};var g=(s,e,o)=>(o=s!=null?m(v(s)):{},t(e||!s||!s.__esModule?r(o,\"default\",{value:s,enumerable:!0}):o,s)),x=s=>t(r({},\"__esModule\",{value:!0}),s);var d=S((M,c)=>{c.exports=_jsx_runtime});var b={};f(b,{default:()=>j,frontmatter:()=>C});var a=g(d()),C={title:\"Quais s\\xE3o as vantagens / desvantagens de usar pr\\xE9-processadores CSS?\"};function l(s){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\"},s.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h2,{children:\"Vantagens\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:\"O CSS \\xE9 fica mais f\\xE1cil de ser mantido.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Mais f\\xE1cil escrever seletores aninhados.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Vari\\xE1veis para temas consistentes. Pode-se compartilhar arquivos de tema entre diferentes projetos. Isso n\\xE3o \\xE9 necessariamente \\xFAtil com propriedades personalizadas CSS (frequentemente chamadas de vari\\xE1veis CSS).\"}),`\n`,(0,a.jsx)(e.li,{children:\"Mixins para gerar CSS repetido.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Sass e Less possuem recursos como loops, listas e mapas que podem tornar a configura\\xE7\\xE3o mais f\\xE1cil e menos verbosa.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Dividindo o seu c\\xF3digo em v\\xE1rios arquivos durante o desenvolvimento. Os arquivos CSS tamb\\xE9m podem ser divididos, mas isso exigir\\xE1 uma solicita\\xE7\\xE3o HTTP para baixar cada arquivo CSS.\"}),`\n`]}),`\n`,(0,a.jsx)(e.h2,{children:\"Desvantagens\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:\"Requer ferramentas para pr\\xE9-processamento. Tempo de recompila\\xE7\\xE3o pode ser lento.\"}),`\n`,(0,a.jsxs)(e.li,{children:[\"N\\xE3o escrever CSS atual e potencialmente utiliz\\xE1vel. Por exemplo, usando algo como \",(0,a.jsx)(e.a,{href:\"https://github.com/postcss/postcss-loader\",children:\"postcss-loader\"}),\" com o \",(0,a.jsx)(e.a,{href:\"https://webpack.js.org/\",children:\"webpack\"}),\", voc\\xEA pode escrever CSS potencialmente compat\\xEDvel com o futuro, permitindo que voc\\xEA use coisas como vari\\xE1veis CSS em vez de vari\\xE1veis Sass. Assim, voc\\xEA est\\xE1 aprendendo uma nova sintaxe que pode pagar se/quando eles se tornarem padronizados.\"]}),`\n`]})]})}function q(s={}){let{wrapper:e}=s.components||{};return e?(0,a.jsx)(e,Object.assign({},s,{children:(0,a.jsx)(l,s)})):l(s)}var j=q;return x(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var f=(s,e)=>()=>(e||s((e={exports:{}}).exports,e),e.exports),g=(s,e)=>{for(var o in e)n(s,o,{get:e[o],enumerable:!0})},t=(s,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of v(e))!S.call(s,r)&&r!==o&&n(s,r,{get:()=>e[r],enumerable:!(i=u(e,r))||i.enumerable});return s};var x=(s,e,o)=>(o=s!=null?p(h(s)):{},t(e||!s||!s.__esModule?n(o,\"default\",{value:s,enumerable:!0}):o,s)),C=s=>t(n({},\"__esModule\",{value:!0}),s);var d=f((b,c)=>{c.exports=_jsx_runtime});var j={};g(j,{default:()=>m,frontmatter:()=>q});var a=x(d()),q={title:\"Quais s\\xE3o as vantagens / desvantagens de usar pr\\xE9-processadores CSS?\"};function l(s){let e={a:\"a\",h2:\"h2\",li:\"li\",ul:\"ul\",...s.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h2,{children:\"Vantagens\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:\"O CSS \\xE9 fica mais f\\xE1cil de ser mantido.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Mais f\\xE1cil escrever seletores aninhados.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Vari\\xE1veis para temas consistentes. Pode-se compartilhar arquivos de tema entre diferentes projetos. Isso n\\xE3o \\xE9 necessariamente \\xFAtil com propriedades personalizadas CSS (frequentemente chamadas de vari\\xE1veis CSS).\"}),`\n`,(0,a.jsx)(e.li,{children:\"Mixins para gerar CSS repetido.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Sass e Less possuem recursos como loops, listas e mapas que podem tornar a configura\\xE7\\xE3o mais f\\xE1cil e menos verbosa.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Dividindo o seu c\\xF3digo em v\\xE1rios arquivos durante o desenvolvimento. Os arquivos CSS tamb\\xE9m podem ser divididos, mas isso exigir\\xE1 uma solicita\\xE7\\xE3o HTTP para baixar cada arquivo CSS.\"}),`\n`]}),`\n`,(0,a.jsx)(e.h2,{children:\"Desvantagens\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:\"Requer ferramentas para pr\\xE9-processamento. Tempo de recompila\\xE7\\xE3o pode ser lento.\"}),`\n`,(0,a.jsxs)(e.li,{children:[\"N\\xE3o escrever CSS atual e potencialmente utiliz\\xE1vel. Por exemplo, usando algo como \",(0,a.jsx)(e.a,{href:\"https://github.com/postcss/postcss-loader\",children:\"postcss-loader\"}),\" com o \",(0,a.jsx)(e.a,{href:\"https://webpack.js.org/\",children:\"webpack\"}),\", voc\\xEA pode escrever CSS potencialmente compat\\xEDvel com o futuro, permitindo que voc\\xEA use coisas como vari\\xE1veis CSS em vez de vari\\xE1veis Sass. Assim, voc\\xEA est\\xE1 aprendendo uma nova sintaxe que pode pagar se/quando eles se tornarem padronizados.\"]}),`\n`]})]})}function m(s={}){let{wrapper:e}=s.components||{};return e?(0,a.jsx)(e,{...s,children:(0,a.jsx)(l,{...s})}):l(s)}return C(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors/zh-CN.json
index 03e563915..c6f822081 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors/zh-CN.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var S=Object.create;var r=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var p=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),x=(e,n)=>{for(var s in n)r(e,s,{get:n[s],enumerable:!0})},c=(e,n,s,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of u(n))!m.call(e,i)&&i!==s&&r(e,i,{get:()=>n[i],enumerable:!(l=d(n,i))||l.enumerable});return e};var j=(e,n,s)=>(s=e!=null?S(C(e)):{},c(n||!e||!e.__esModule?r(s,\"default\",{value:e,enumerable:!0}):s,e)),f=e=>c(r({},\"__esModule\",{value:!0}),e);var o=p((k,h)=>{h.exports=_jsx_runtime});var M={};x(M,{default:()=>b,frontmatter:()=>_});var t=j(o()),_={title:\"\\u4F7F\\u7528 CSS \\u9884\\u5904\\u7406\\u5668\\u7684\\u4F18\\u7F3A\\u70B9\\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(e){let n=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\"},e.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,t.jsxs)(n.ul,{children:[`\n`,(0,t.jsx)(n.li,{children:\"CSS \\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"\\u66F4\\u5BB9\\u6613\\u7F16\\u5199\\u5D4C\\u5957\\u9009\\u62E9\\u5668\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"\\u7528\\u4E8E\\u4E00\\u81F4\\u4E3B\\u9898\\u7684\\u53D8\\u91CF\\u3002\\u53EF\\u4EE5\\u5728\\u4E0D\\u540C\\u7684\\u9879\\u76EE\\u4E4B\\u95F4\\u5171\\u4EAB\\u4E3B\\u9898\\u6587\\u4EF6\\u3002\\u8FD9\\u4E0D\\u4E00\\u5B9A\\u5BF9 CSS \\u81EA\\u5B9A\\u4E49\\u5C5E\\u6027\\uFF08\\u901A\\u5E38\\u79F0\\u4E3A CSS \\u53D8\\u91CF\\uFF09\\u6709\\u7528\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"Mixins \\u7528\\u4E8E\\u751F\\u6210\\u91CD\\u590D\\u7684 CSS\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"Sass \\u548C Less \\u5177\\u6709\\u5FAA\\u73AF\\u3001\\u5217\\u8868\\u548C\\u6620\\u5C04\\u7B49\\u529F\\u80FD\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u914D\\u7F6E\\u66F4\\u5BB9\\u6613\\u4E14\\u66F4\\u7B80\\u6D01\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"\\u5728\\u5F00\\u53D1\\u8FC7\\u7A0B\\u4E2D\\u5C06\\u4EE3\\u7801\\u62C6\\u5206\\u4E3A\\u591A\\u4E2A\\u6587\\u4EF6\\u3002CSS \\u6587\\u4EF6\\u4E5F\\u53EF\\u4EE5\\u62C6\\u5206\\uFF0C\\u4F46\\u8FD9\\u6837\\u505A\\u9700\\u8981 HTTP \\u8BF7\\u6C42\\u6765\\u4E0B\\u8F7D\\u6BCF\\u4E2A CSS \\u6587\\u4EF6\\u3002\"}),`\n`]}),`\n`,(0,t.jsx)(n.h2,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,t.jsxs)(n.ul,{children:[`\n`,(0,t.jsx)(n.li,{children:\"\\u9700\\u8981\\u7528\\u4E8E\\u9884\\u5904\\u7406\\u7684\\u5DE5\\u5177\\u3002\\u91CD\\u65B0\\u7F16\\u8BD1\\u65F6\\u95F4\\u53EF\\u80FD\\u5F88\\u6162\\u3002\"}),`\n`,(0,t.jsxs)(n.li,{children:[\"\\u6CA1\\u6709\\u7F16\\u5199\\u5F53\\u524D\\u548C\\u6F5C\\u5728\\u53EF\\u7528\\u7684 CSS\\u3002\\u4F8B\\u5982\\uFF0C\\u901A\\u8FC7\\u5C06 \",(0,t.jsx)(n.a,{href:\"https://github.com/postcss/postcss-loader\",children:\"postcss-loader\"}),\" \\u4E0E \",(0,t.jsx)(n.a,{href:\"https://webpack.js.org/\",children:\"webpack\"}),\" \\u7ED3\\u5408\\u4F7F\\u7528\\uFF0C\\u60A8\\u53EF\\u4EE5\\u7F16\\u5199\\u6F5C\\u5728\\u7684\\u672A\\u6765\\u517C\\u5BB9\\u7684 CSS\\uFF0C\\u5141\\u8BB8\\u60A8\\u4F7F\\u7528 CSS \\u53D8\\u91CF\\u800C\\u4E0D\\u662F Sass \\u53D8\\u91CF\\u3002\\u56E0\\u6B64\\uFF0C\\u60A8\\u6B63\\u5728\\u5B66\\u4E60\\u65B0\\u7684\\u8BED\\u6CD5\\uFF0C\\u5982\\u679C/\\u5F53\\u5B83\\u4EEC\\u6807\\u51C6\\u5316\\u65F6\\uFF0C\\u53EF\\u80FD\\u4F1A\\u6709\\u6240\\u56DE\\u62A5\\u3002\"]}),`\n`]})]})}function g(e={}){let{wrapper:n}=e.components||{};return n?(0,t.jsx)(n,Object.assign({},e,{children:(0,t.jsx)(a,e)})):a(e)}var b=g;return f(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var x=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),f=(e,n)=>{for(var r in n)l(e,r,{get:n[r],enumerable:!0})},c=(e,n,r,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of C(n))!p.call(e,i)&&i!==r&&l(e,i,{get:()=>n[i],enumerable:!(s=u(n,i))||s.enumerable});return e};var _=(e,n,r)=>(r=e!=null?d(m(e)):{},c(n||!e||!e.__esModule?l(r,\"default\",{value:e,enumerable:!0}):r,e)),j=e=>c(l({},\"__esModule\",{value:!0}),e);var o=x((w,h)=>{h.exports=_jsx_runtime});var M={};f(M,{default:()=>a,frontmatter:()=>g});var t=_(o()),g={title:\"\\u4F7F\\u7528 CSS \\u9884\\u5904\\u7406\\u5668\\u7684\\u4F18\\u7F3A\\u70B9\\u662F\\u4EC0\\u4E48\\uFF1F\"};function S(e){let n={a:\"a\",h2:\"h2\",li:\"li\",ul:\"ul\",...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,t.jsxs)(n.ul,{children:[`\n`,(0,t.jsx)(n.li,{children:\"CSS \\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"\\u66F4\\u5BB9\\u6613\\u7F16\\u5199\\u5D4C\\u5957\\u9009\\u62E9\\u5668\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"\\u7528\\u4E8E\\u4E00\\u81F4\\u4E3B\\u9898\\u7684\\u53D8\\u91CF\\u3002\\u53EF\\u4EE5\\u5728\\u4E0D\\u540C\\u7684\\u9879\\u76EE\\u4E4B\\u95F4\\u5171\\u4EAB\\u4E3B\\u9898\\u6587\\u4EF6\\u3002\\u8FD9\\u4E0D\\u4E00\\u5B9A\\u5BF9 CSS \\u81EA\\u5B9A\\u4E49\\u5C5E\\u6027\\uFF08\\u901A\\u5E38\\u79F0\\u4E3A CSS \\u53D8\\u91CF\\uFF09\\u6709\\u7528\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"Mixins \\u7528\\u4E8E\\u751F\\u6210\\u91CD\\u590D\\u7684 CSS\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"Sass \\u548C Less \\u5177\\u6709\\u5FAA\\u73AF\\u3001\\u5217\\u8868\\u548C\\u6620\\u5C04\\u7B49\\u529F\\u80FD\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u914D\\u7F6E\\u66F4\\u5BB9\\u6613\\u4E14\\u66F4\\u7B80\\u6D01\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"\\u5728\\u5F00\\u53D1\\u8FC7\\u7A0B\\u4E2D\\u5C06\\u4EE3\\u7801\\u62C6\\u5206\\u4E3A\\u591A\\u4E2A\\u6587\\u4EF6\\u3002CSS \\u6587\\u4EF6\\u4E5F\\u53EF\\u4EE5\\u62C6\\u5206\\uFF0C\\u4F46\\u8FD9\\u6837\\u505A\\u9700\\u8981 HTTP \\u8BF7\\u6C42\\u6765\\u4E0B\\u8F7D\\u6BCF\\u4E2A CSS \\u6587\\u4EF6\\u3002\"}),`\n`]}),`\n`,(0,t.jsx)(n.h2,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,t.jsxs)(n.ul,{children:[`\n`,(0,t.jsx)(n.li,{children:\"\\u9700\\u8981\\u7528\\u4E8E\\u9884\\u5904\\u7406\\u7684\\u5DE5\\u5177\\u3002\\u91CD\\u65B0\\u7F16\\u8BD1\\u65F6\\u95F4\\u53EF\\u80FD\\u5F88\\u6162\\u3002\"}),`\n`,(0,t.jsxs)(n.li,{children:[\"\\u6CA1\\u6709\\u7F16\\u5199\\u5F53\\u524D\\u548C\\u6F5C\\u5728\\u53EF\\u7528\\u7684 CSS\\u3002\\u4F8B\\u5982\\uFF0C\\u901A\\u8FC7\\u5C06 \",(0,t.jsx)(n.a,{href:\"https://github.com/postcss/postcss-loader\",children:\"postcss-loader\"}),\" \\u4E0E \",(0,t.jsx)(n.a,{href:\"https://webpack.js.org/\",children:\"webpack\"}),\" \\u7ED3\\u5408\\u4F7F\\u7528\\uFF0C\\u60A8\\u53EF\\u4EE5\\u7F16\\u5199\\u6F5C\\u5728\\u7684\\u672A\\u6765\\u517C\\u5BB9\\u7684 CSS\\uFF0C\\u5141\\u8BB8\\u60A8\\u4F7F\\u7528 CSS \\u53D8\\u91CF\\u800C\\u4E0D\\u662F Sass \\u53D8\\u91CF\\u3002\\u56E0\\u6B64\\uFF0C\\u60A8\\u6B63\\u5728\\u5B66\\u4E60\\u65B0\\u7684\\u8BED\\u6CD5\\uFF0C\\u5982\\u679C/\\u5F53\\u5B83\\u4EEC\\u6807\\u51C6\\u5316\\u65F6\\uFF0C\\u53EF\\u80FD\\u4F1A\\u6709\\u6240\\u56DE\\u62A5\\u3002\"]}),`\n`]})]})}function a(e={}){let{wrapper:n}=e.components||{};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(S,{...e})}):S(e)}return j(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/en-US.json
index d806b7e5f..85d065ef1 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var u=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),y=(r,e)=>{for(var a in e)t(r,a,{get:e[a],enumerable:!0})},s=(r,e,a,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of g(e))!b.call(r,o)&&o!==a&&t(r,o,{get:()=>e[o],enumerable:!(c=p(e,o))||c.enumerable});return r};var m=(r,e,a)=>(a=r!=null?h(j(r)):{},s(e||!r||!r.__esModule?t(a,\"default\",{value:r,enumerable:!0}):a,r)),w=r=>s(t({},\"__esModule\",{value:!0}),r);var i=u((N,l)=>{l.exports=_jsx_runtime});var O={};y(O,{default:()=>A,frontmatter:()=>f});var n=m(i()),f={title:\"What are the advantages of using the spread operator with arrays and objects?\"};function d(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The spread operator (\",(0,n.jsx)(e.code,{children:\"...\"}),\") in JavaScript allows you to easily copy arrays and objects, merge them, and add new elements or properties. It simplifies syntax and improves readability. For arrays, it can be used to concatenate or clone arrays. For objects, it can be used to merge objects or add new properties.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Arrays\nconst arr1 = [1, 2, 3];\nconst arr2 = [...arr1, 4, 5];\nconsole.log(arr2); // [1, 2, 3, 4, 5]\n\n// Objects\nconst obj1 = { a: 1, b: 2 };\nconst obj2 = { ...obj1, c: 3 };\nconsole.log(obj2); // { a: 1, b: 2, c: 3 }\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Advantages of using the spread operator with arrays and objects\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Arrays\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Cloning arrays\"}),`\n`,(0,n.jsx)(e.p,{children:\"The spread operator allows you to create a shallow copy of an array easily.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const originalArray = [1, 2, 3];\nconst clonedArray = [...originalArray];\nconsole.log(clonedArray); // [1, 2, 3]\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Merging arrays\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can concatenate multiple arrays into one.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array1 = [1, 2];\nconst array2 = [3, 4];\nconst mergedArray = [...array1, ...array2];\nconsole.log(mergedArray); // [1, 2, 3, 4]\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Adding elements\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can add new elements to an array without mutating the original array.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3];\nconst newArray = [...array, 4, 5];\nconsole.log(newArray); // [1, 2, 3, 4, 5]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Objects\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Cloning objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"The spread operator allows you to create a shallow copy of an object.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const originalObject = { a: 1, b: 2 };\nconst clonedObject = { ...originalObject };\nconsole.log(clonedObject); // { a: 1, b: 2 }\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Merging objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can merge multiple objects into one.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const object1 = { a: 1 };\nconst object2 = { b: 2 };\nconst mergedObject = { ...object1, ...object2 };\nconsole.log(mergedObject); // { a: 1, b: 2 }\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Adding properties\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can add new properties to an object without mutating the original object.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const object = { a: 1, b: 2 };\nconst newObject = { ...object, c: 3 };\nconsole.log(newObject); // { a: 1, b: 2, c: 3 }\n`})}),`\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/Web/JavaScript/Reference/Operators/Spread_syntax\",children:\"MDN Web Docs: Spread syntax\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/rest-parameters-spread#spread-operator\",children:\"JavaScript.info: Spread operator\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/how-to-use-the-spread-operator-in-javascript/\",children:\"FreeCodeCamp: How to use the spread operator in JavaScript\"})}),`\n`]})]})}function v(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(d,r)})):d(r)}var A=v;return w(O);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var y=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),m=(r,e)=>{for(var a in e)t(r,a,{get:e[a],enumerable:!0})},s=(r,e,a,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of j(e))!u.call(r,o)&&o!==a&&t(r,o,{get:()=>e[o],enumerable:!(c=g(e,o))||c.enumerable});return r};var w=(r,e,a)=>(a=r!=null?p(b(r)):{},s(e||!r||!r.__esModule?t(a,\"default\",{value:r,enumerable:!0}):a,r)),f=r=>s(t({},\"__esModule\",{value:!0}),r);var i=y((O,l)=>{l.exports=_jsx_runtime});var A={};m(A,{default:()=>h,frontmatter:()=>v});var n=w(i()),v={title:\"What are the advantages of using the spread operator with arrays and objects?\"};function d(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The spread operator (\",(0,n.jsx)(e.code,{children:\"...\"}),\") in JavaScript allows you to easily copy arrays and objects, merge them, and add new elements or properties. It simplifies syntax and improves readability. For arrays, it can be used to concatenate or clone arrays. For objects, it can be used to merge objects or add new properties.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Arrays\nconst arr1 = [1, 2, 3];\nconst arr2 = [...arr1, 4, 5];\nconsole.log(arr2); // [1, 2, 3, 4, 5]\n\n// Objects\nconst obj1 = { a: 1, b: 2 };\nconst obj2 = { ...obj1, c: 3 };\nconsole.log(obj2); // { a: 1, b: 2, c: 3 }\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Advantages of using the spread operator with arrays and objects\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Arrays\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Cloning arrays\"}),`\n`,(0,n.jsx)(e.p,{children:\"The spread operator allows you to create a shallow copy of an array easily.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const originalArray = [1, 2, 3];\nconst clonedArray = [...originalArray];\nconsole.log(clonedArray); // [1, 2, 3]\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Merging arrays\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can concatenate multiple arrays into one.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array1 = [1, 2];\nconst array2 = [3, 4];\nconst mergedArray = [...array1, ...array2];\nconsole.log(mergedArray); // [1, 2, 3, 4]\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Adding elements\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can add new elements to an array without mutating the original array.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3];\nconst newArray = [...array, 4, 5];\nconsole.log(newArray); // [1, 2, 3, 4, 5]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Objects\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Cloning objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"The spread operator allows you to create a shallow copy of an object.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const originalObject = { a: 1, b: 2 };\nconst clonedObject = { ...originalObject };\nconsole.log(clonedObject); // { a: 1, b: 2 }\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Merging objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can merge multiple objects into one.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const object1 = { a: 1 };\nconst object2 = { b: 2 };\nconst mergedObject = { ...object1, ...object2 };\nconsole.log(mergedObject); // { a: 1, b: 2 }\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Adding properties\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can add new properties to an object without mutating the original object.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const object = { a: 1, b: 2 };\nconst newObject = { ...object, c: 3 };\nconsole.log(newObject); // { a: 1, b: 2, c: 3 }\n`})}),`\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/Web/JavaScript/Reference/Operators/Spread_syntax\",children:\"MDN Web Docs: Spread syntax\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/rest-parameters-spread#spread-operator\",children:\"JavaScript.info: Spread operator\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/how-to-use-the-spread-operator-in-javascript/\",children:\"FreeCodeCamp: How to use the spread operator in JavaScript\"})}),`\n`]})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(d,{...r})}):d(r)}return f(A);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/zh-CN.json
index 80f846ffe..6e911baef 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var u=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),m=(r,e)=>{for(var c in e)o(r,c,{get:e[c],enumerable:!0})},t=(r,e,c,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of g(e))!b.call(r,a)&&a!==c&&o(r,a,{get:()=>e[a],enumerable:!(l=p(e,a))||l.enumerable});return r};var y=(r,e,c)=>(c=r!=null?h(j(r)):{},t(e||!r||!r.__esModule?o(c,\"default\",{value:r,enumerable:!0}):c,r)),v=r=>t(o({},\"__esModule\",{value:!0}),r);var i=u((N,s)=>{s.exports=_jsx_runtime});var x={};m(x,{default:()=>w,frontmatter:()=>f});var n=y(i()),f={title:\"\\u4F7F\\u7528\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\\u5904\\u7406\\u6570\\u7EC4\\u548C\\u5BF9\\u8C61\\u7684\\u4F18\\u52BF\\u662F\\u4EC0\\u4E48\\uFF1F\"};function d(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26 (\",(0,n.jsx)(e.code,{children:\"...\"}),\") \\u5141\\u8BB8\\u60A8\\u8F7B\\u677E\\u590D\\u5236\\u6570\\u7EC4\\u548C\\u5BF9\\u8C61\\u3001\\u5408\\u5E76\\u5B83\\u4EEC\\u4EE5\\u53CA\\u6DFB\\u52A0\\u65B0\\u5143\\u7D20\\u6216\\u5C5E\\u6027\\u3002\\u5B83\\u7B80\\u5316\\u4E86\\u8BED\\u6CD5\\u5E76\\u63D0\\u9AD8\\u4E86\\u53EF\\u8BFB\\u6027\\u3002\\u5BF9\\u4E8E\\u6570\\u7EC4\\uFF0C\\u5B83\\u53EF\\u7528\\u4E8E\\u8FDE\\u63A5\\u6216\\u514B\\u9686\\u6570\\u7EC4\\u3002\\u5BF9\\u4E8E\\u5BF9\\u8C61\\uFF0C\\u5B83\\u53EF\\u7528\\u4E8E\\u5408\\u5E76\\u5BF9\\u8C61\\u6216\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Arrays\nconst arr1 = [1, 2, 3];\nconst arr2 = [...arr1, 4, 5];\nconsole.log(arr2); // [1, 2, 3, 4, 5]\n\n// Objects\nconst obj1 = { a: 1, b: 2 };\nconst obj2 = { ...obj1, c: 3 };\nconsole.log(obj2); // { a: 1, b: 2, c: 3 }\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4F7F\\u7528\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\\u5904\\u7406\\u6570\\u7EC4\\u548C\\u5BF9\\u8C61\\u7684\\u4F18\\u52BF\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6570\\u7EC4\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u514B\\u9686\\u6570\\u7EC4\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\\u5141\\u8BB8\\u60A8\\u8F7B\\u677E\\u521B\\u5EFA\\u6570\\u7EC4\\u7684\\u6D45\\u62F7\\u8D1D\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const originalArray = [1, 2, 3];\nconst clonedArray = [...originalArray];\nconsole.log(clonedArray); // [1, 2, 3]\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u5408\\u5E76\\u6570\\u7EC4\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u5C06\\u591A\\u4E2A\\u6570\\u7EC4\\u8FDE\\u63A5\\u6210\\u4E00\\u4E2A\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array1 = [1, 2];\nconst array2 = [3, 4];\nconst mergedArray = [...array1, ...array2];\nconsole.log(mergedArray); // [1, 2, 3, 4]\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u6DFB\\u52A0\\u5143\\u7D20\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u5728\\u4E0D\\u6539\\u53D8\\u539F\\u59CB\\u6570\\u7EC4\\u7684\\u60C5\\u51B5\\u4E0B\\u5411\\u6570\\u7EC4\\u6DFB\\u52A0\\u65B0\\u5143\\u7D20\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3];\nconst newArray = [...array, 4, 5];\nconsole.log(newArray); // [1, 2, 3, 4, 5]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5BF9\\u8C61\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u514B\\u9686\\u5BF9\\u8C61\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\\u5141\\u8BB8\\u60A8\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u6D45\\u62F7\\u8D1D\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const originalObject = { a: 1, b: 2 };\nconst clonedObject = { ...originalObject };\nconsole.log(clonedObject); // { a: 1, b: 2 }\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u5408\\u5E76\\u5BF9\\u8C61\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u5C06\\u591A\\u4E2A\\u5BF9\\u8C61\\u5408\\u5E76\\u6210\\u4E00\\u4E2A\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const object1 = { a: 1 };\nconst object2 = { b: 2 };\nconst mergedObject = { ...object1, ...object2 };\nconsole.log(mergedObject); // { a: 1, b: 2 }\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u6DFB\\u52A0\\u5C5E\\u6027\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u5728\\u4E0D\\u6539\\u53D8\\u539F\\u59CB\\u5BF9\\u8C61\\u7684\\u60C5\\u51B5\\u4E0B\\u5411\\u5BF9\\u8C61\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const object = { a: 1, b: 2 };\nconst newObject = { ...object, c: 3 };\nconsole.log(newObject); // { a: 1, b: 2, c: 3 }\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Operators/Spread_syntax\",children:\"MDN Web Docs: Spread syntax\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/rest-parameters-spread#spread-operator\",children:\"JavaScript.info: Spread operator\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/how-to-use-the-spread-operator-in-javascript/\",children:\"FreeCodeCamp: How to use the spread operator in JavaScript\"})}),`\n`]})]})}function O(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(d,r)})):d(r)}var w=O;return v(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),y=(r,e)=>{for(var c in e)o(r,c,{get:e[c],enumerable:!0})},t=(r,e,c,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of j(e))!u.call(r,a)&&a!==c&&o(r,a,{get:()=>e[a],enumerable:!(l=g(e,a))||l.enumerable});return r};var v=(r,e,c)=>(c=r!=null?p(b(r)):{},t(e||!r||!r.__esModule?o(c,\"default\",{value:r,enumerable:!0}):c,r)),f=r=>t(o({},\"__esModule\",{value:!0}),r);var i=m((A,s)=>{s.exports=_jsx_runtime});var x={};y(x,{default:()=>h,frontmatter:()=>w});var n=v(i()),w={title:\"\\u4F7F\\u7528\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\\u5904\\u7406\\u6570\\u7EC4\\u548C\\u5BF9\\u8C61\\u7684\\u4F18\\u52BF\\u662F\\u4EC0\\u4E48\\uFF1F\"};function d(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26 (\",(0,n.jsx)(e.code,{children:\"...\"}),\") \\u5141\\u8BB8\\u60A8\\u8F7B\\u677E\\u590D\\u5236\\u6570\\u7EC4\\u548C\\u5BF9\\u8C61\\u3001\\u5408\\u5E76\\u5B83\\u4EEC\\u4EE5\\u53CA\\u6DFB\\u52A0\\u65B0\\u5143\\u7D20\\u6216\\u5C5E\\u6027\\u3002\\u5B83\\u7B80\\u5316\\u4E86\\u8BED\\u6CD5\\u5E76\\u63D0\\u9AD8\\u4E86\\u53EF\\u8BFB\\u6027\\u3002\\u5BF9\\u4E8E\\u6570\\u7EC4\\uFF0C\\u5B83\\u53EF\\u7528\\u4E8E\\u8FDE\\u63A5\\u6216\\u514B\\u9686\\u6570\\u7EC4\\u3002\\u5BF9\\u4E8E\\u5BF9\\u8C61\\uFF0C\\u5B83\\u53EF\\u7528\\u4E8E\\u5408\\u5E76\\u5BF9\\u8C61\\u6216\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Arrays\nconst arr1 = [1, 2, 3];\nconst arr2 = [...arr1, 4, 5];\nconsole.log(arr2); // [1, 2, 3, 4, 5]\n\n// Objects\nconst obj1 = { a: 1, b: 2 };\nconst obj2 = { ...obj1, c: 3 };\nconsole.log(obj2); // { a: 1, b: 2, c: 3 }\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4F7F\\u7528\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\\u5904\\u7406\\u6570\\u7EC4\\u548C\\u5BF9\\u8C61\\u7684\\u4F18\\u52BF\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6570\\u7EC4\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u514B\\u9686\\u6570\\u7EC4\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\\u5141\\u8BB8\\u60A8\\u8F7B\\u677E\\u521B\\u5EFA\\u6570\\u7EC4\\u7684\\u6D45\\u62F7\\u8D1D\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const originalArray = [1, 2, 3];\nconst clonedArray = [...originalArray];\nconsole.log(clonedArray); // [1, 2, 3]\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u5408\\u5E76\\u6570\\u7EC4\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u5C06\\u591A\\u4E2A\\u6570\\u7EC4\\u8FDE\\u63A5\\u6210\\u4E00\\u4E2A\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array1 = [1, 2];\nconst array2 = [3, 4];\nconst mergedArray = [...array1, ...array2];\nconsole.log(mergedArray); // [1, 2, 3, 4]\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u6DFB\\u52A0\\u5143\\u7D20\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u5728\\u4E0D\\u6539\\u53D8\\u539F\\u59CB\\u6570\\u7EC4\\u7684\\u60C5\\u51B5\\u4E0B\\u5411\\u6570\\u7EC4\\u6DFB\\u52A0\\u65B0\\u5143\\u7D20\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3];\nconst newArray = [...array, 4, 5];\nconsole.log(newArray); // [1, 2, 3, 4, 5]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5BF9\\u8C61\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u514B\\u9686\\u5BF9\\u8C61\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\\u5141\\u8BB8\\u60A8\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u6D45\\u62F7\\u8D1D\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const originalObject = { a: 1, b: 2 };\nconst clonedObject = { ...originalObject };\nconsole.log(clonedObject); // { a: 1, b: 2 }\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u5408\\u5E76\\u5BF9\\u8C61\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u5C06\\u591A\\u4E2A\\u5BF9\\u8C61\\u5408\\u5E76\\u6210\\u4E00\\u4E2A\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const object1 = { a: 1 };\nconst object2 = { b: 2 };\nconst mergedObject = { ...object1, ...object2 };\nconsole.log(mergedObject); // { a: 1, b: 2 }\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u6DFB\\u52A0\\u5C5E\\u6027\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u5728\\u4E0D\\u6539\\u53D8\\u539F\\u59CB\\u5BF9\\u8C61\\u7684\\u60C5\\u51B5\\u4E0B\\u5411\\u5BF9\\u8C61\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const object = { a: 1, b: 2 };\nconst newObject = { ...object, c: 3 };\nconsole.log(newObject); // { a: 1, b: 2, c: 3 }\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Operators/Spread_syntax\",children:\"MDN Web Docs: Spread syntax\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/rest-parameters-spread#spread-operator\",children:\"JavaScript.info: Spread operator\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/how-to-use-the-spread-operator-in-javascript/\",children:\"FreeCodeCamp: How to use the spread operator in JavaScript\"})}),`\n`]})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(d,{...r})}):d(r)}return f(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-a-module-bundler/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-a-module-bundler/en-US.json
index 04e236793..2960b6ed8 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-a-module-bundler/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-a-module-bundler/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-benefits-of-using-a-module-bundler/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),y=(i,e)=>{for(var t in e)l(i,t,{get:e[t],enumerable:!0})},r=(i,e,t,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!g.call(i,o)&&o!==t&&l(i,o,{get:()=>e[o],enumerable:!(a=m(e,o))||a.enumerable});return i};var b=(i,e,t)=>(t=i!=null?h(p(i)):{},r(e||!i||!i.__esModule?l(t,\"default\",{value:i,enumerable:!0}):t,i)),j=i=>r(l({},\"__esModule\",{value:!0}),i);var s=f((x,d)=>{d.exports=_jsx_runtime});var w={};y(w,{default:()=>v,frontmatter:()=>M});var n=b(s()),M={title:\"What are the benefits of using a module bundler?\"};function c(i){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Using a module bundler like Webpack, Rollup, or Parcel helps manage dependencies, optimize performance, and improve the development workflow. It combines multiple JavaScript files into a single file or a few files, which reduces the number of HTTP requests and can include features like code splitting, tree shaking, and hot module replacement.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Benefits of using a module bundler\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Dependency management\"}),`\n`,(0,n.jsx)(e.p,{children:\"A module bundler helps manage dependencies by allowing you to import and export modules in a clean and organized manner. This makes it easier to maintain and understand the codebase.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Importing a module\nimport { myFunction } from './myModule.js';\n\n// Using the imported function\nmyFunction();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Performance optimization\"}),`\n`,(0,n.jsx)(e.p,{children:\"Module bundlers can optimize performance by reducing the number of HTTP requests. They combine multiple JavaScript files into a single file or a few files, which can significantly improve load times.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Code splitting\"}),`\n`,(0,n.jsx)(e.p,{children:\"Code splitting allows you to split your code into smaller chunks that can be loaded on demand. This can improve the initial load time of your application by only loading the necessary code.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of dynamic import for code splitting\nimport('./myModule.js').then((module) => {\n  module.myFunction();\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Tree shaking\"}),`\n`,(0,n.jsx)(e.p,{children:\"Tree shaking is a feature that removes unused code from the final bundle. This helps reduce the bundle size and improve performance.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Only the used function will be included in the final bundle\nimport { usedFunction } from './myModule.js';\nusedFunction();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Hot module replacement\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hot module replacement (HMR) allows you to update modules in real-time without refreshing the entire page. This can significantly speed up the development process by providing instant feedback.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`if (module.hot) {\n  module.hot.accept('./myModule.js', function () {\n    // Handle the updated module\n    const updatedModule = require('./myModule.js');\n    updatedModule.myFunction();\n  });\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Asset management\"}),`\n`,(0,n.jsx)(e.p,{children:\"Module bundlers can also handle other assets like CSS, images, and fonts. This allows you to import these assets directly into your JavaScript files, making it easier to manage and optimize them.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Importing a CSS file\nimport './styles.css';\n\n// Importing an image\nimport myImage from './image.png';\n`})}),`\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://webpack.js.org/concepts/\",children:\"Webpack documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://rollupjs.org/guide/en/\",children:\"Rollup documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://parceljs.org/getting_started.html\",children:\"Parcel documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules\",children:\"MDN Web Docs: JavaScript modules\"})}),`\n`]})]})}function k(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(c,i)})):c(i)}var v=k;return j(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),b=(i,e)=>{for(var t in e)l(i,t,{get:e[t],enumerable:!0})},r=(i,e,t,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!f.call(i,o)&&o!==t&&l(i,o,{get:()=>e[o],enumerable:!(a=u(e,o))||a.enumerable});return i};var j=(i,e,t)=>(t=i!=null?m(g(i)):{},r(e||!i||!i.__esModule?l(t,\"default\",{value:i,enumerable:!0}):t,i)),M=i=>r(l({},\"__esModule\",{value:!0}),i);var s=y((T,d)=>{d.exports=_jsx_runtime});var v={};b(v,{default:()=>h,frontmatter:()=>k});var n=j(s()),k={title:\"What are the benefits of using a module bundler?\"};function c(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Using a module bundler like Webpack, Rollup, or Parcel helps manage dependencies, optimize performance, and improve the development workflow. It combines multiple JavaScript files into a single file or a few files, which reduces the number of HTTP requests and can include features like code splitting, tree shaking, and hot module replacement.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Benefits of using a module bundler\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Dependency management\"}),`\n`,(0,n.jsx)(e.p,{children:\"A module bundler helps manage dependencies by allowing you to import and export modules in a clean and organized manner. This makes it easier to maintain and understand the codebase.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Importing a module\nimport { myFunction } from './myModule.js';\n\n// Using the imported function\nmyFunction();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Performance optimization\"}),`\n`,(0,n.jsx)(e.p,{children:\"Module bundlers can optimize performance by reducing the number of HTTP requests. They combine multiple JavaScript files into a single file or a few files, which can significantly improve load times.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Code splitting\"}),`\n`,(0,n.jsx)(e.p,{children:\"Code splitting allows you to split your code into smaller chunks that can be loaded on demand. This can improve the initial load time of your application by only loading the necessary code.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of dynamic import for code splitting\nimport('./myModule.js').then((module) => {\n  module.myFunction();\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Tree shaking\"}),`\n`,(0,n.jsx)(e.p,{children:\"Tree shaking is a feature that removes unused code from the final bundle. This helps reduce the bundle size and improve performance.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Only the used function will be included in the final bundle\nimport { usedFunction } from './myModule.js';\nusedFunction();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Hot module replacement\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hot module replacement (HMR) allows you to update modules in real-time without refreshing the entire page. This can significantly speed up the development process by providing instant feedback.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`if (module.hot) {\n  module.hot.accept('./myModule.js', function () {\n    // Handle the updated module\n    const updatedModule = require('./myModule.js');\n    updatedModule.myFunction();\n  });\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Asset management\"}),`\n`,(0,n.jsx)(e.p,{children:\"Module bundlers can also handle other assets like CSS, images, and fonts. This allows you to import these assets directly into your JavaScript files, making it easier to manage and optimize them.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Importing a CSS file\nimport './styles.css';\n\n// Importing an image\nimport myImage from './image.png';\n`})}),`\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://webpack.js.org/concepts/\",children:\"Webpack documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://rollupjs.org/guide/en/\",children:\"Rollup documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://parceljs.org/getting_started.html\",children:\"Parcel documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules\",children:\"MDN Web Docs: JavaScript modules\"})}),`\n`]})]})}function h(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(c,{...i})}):c(i)}return M(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-a-module-bundler/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-a-module-bundler/zh-CN.json
index 7b4c06fa9..82dac76ac 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-a-module-bundler/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-a-module-bundler/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-benefits-of-using-a-module-bundler/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),j=(l,n)=>{for(var r in n)c(l,r,{get:n[r],enumerable:!0})},d=(l,n,r,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of m(n))!g.call(l,i)&&i!==r&&c(l,i,{get:()=>n[i],enumerable:!(t=u(n,i))||t.enumerable});return l};var y=(l,n,r)=>(r=l!=null?s(p(l)):{},d(n||!l||!l.__esModule?c(r,\"default\",{value:l,enumerable:!0}):r,l)),M=l=>d(c({},\"__esModule\",{value:!0}),l);var a=f((T,o)=>{o.exports=_jsx_runtime});var F={};j(F,{default:()=>S,frontmatter:()=>b});var e=y(a()),b={title:\"\\u4F7F\\u7528\\u6A21\\u5757\\u6253\\u5305\\u5668\\u7684\\u597D\\u5904\\u662F\\u4EC0\\u4E48\\uFF1F\"};function h(l){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",a:\"a\"},l.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528 Webpack\\u3001Rollup \\u6216 Parcel \\u7B49\\u6A21\\u5757\\u6253\\u5305\\u5668\\u6709\\u52A9\\u4E8E\\u7BA1\\u7406\\u4F9D\\u8D56\\u5173\\u7CFB\\u3001\\u4F18\\u5316\\u6027\\u80FD\\u5E76\\u6539\\u8FDB\\u5F00\\u53D1\\u5DE5\\u4F5C\\u6D41\\u7A0B\\u3002\\u5B83\\u5C06\\u591A\\u4E2A JavaScript \\u6587\\u4EF6\\u5408\\u5E76\\u6210\\u4E00\\u4E2A\\u6216\\u51E0\\u4E2A\\u6587\\u4EF6\\uFF0C\\u4ECE\\u800C\\u51CF\\u5C11 HTTP \\u8BF7\\u6C42\\u7684\\u6570\\u91CF\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u5305\\u542B\\u4EE3\\u7801\\u62C6\\u5206\\u3001tree shaking \\u548C\\u70ED\\u6A21\\u5757\\u66FF\\u6362\\u7B49\\u529F\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F7F\\u7528\\u6A21\\u5757\\u6253\\u5305\\u5668\\u7684\\u4F18\\u70B9\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F9D\\u8D56\\u7BA1\\u7406\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u6253\\u5305\\u5668\\u901A\\u8FC7\\u5141\\u8BB8\\u60A8\\u4EE5\\u6E05\\u6670\\u548C\\u6709\\u7EC4\\u7EC7\\u7684\\u65B9\\u5F0F\\u5BFC\\u5165\\u548C\\u5BFC\\u51FA\\u6A21\\u5757\\u6765\\u5E2E\\u52A9\\u7BA1\\u7406\\u4F9D\\u8D56\\u5173\\u7CFB\\u3002\\u8FD9\\u4F7F\\u5F97\\u7EF4\\u62A4\\u548C\\u7406\\u89E3\\u4EE3\\u7801\\u5E93\\u66F4\\u5BB9\\u6613\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Importing a module\nimport { myFunction } from './myModule.js';\n\n// Using the imported function\nmyFunction();\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6027\\u80FD\\u4F18\\u5316\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u6253\\u5305\\u5668\\u53EF\\u4EE5\\u901A\\u8FC7\\u51CF\\u5C11 HTTP \\u8BF7\\u6C42\\u7684\\u6570\\u91CF\\u6765\\u4F18\\u5316\\u6027\\u80FD\\u3002\\u5B83\\u4EEC\\u5C06\\u591A\\u4E2A JavaScript \\u6587\\u4EF6\\u5408\\u5E76\\u6210\\u4E00\\u4E2A\\u6216\\u51E0\\u4E2A\\u6587\\u4EF6\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u663E\\u8457\\u63D0\\u9AD8\\u52A0\\u8F7D\\u65F6\\u95F4\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EE3\\u7801\\u62C6\\u5206\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE3\\u7801\\u62C6\\u5206\\u5141\\u8BB8\\u60A8\\u5C06\\u4EE3\\u7801\\u62C6\\u5206\\u6210\\u66F4\\u5C0F\\u7684\\u5757\\uFF0C\\u8FD9\\u4E9B\\u5757\\u53EF\\u4EE5\\u6309\\u9700\\u52A0\\u8F7D\\u3002\\u8FD9\\u53EF\\u4EE5\\u901A\\u8FC7\\u4EC5\\u52A0\\u8F7D\\u5FC5\\u8981\\u7684\\u4EE3\\u7801\\u6765\\u6539\\u5584\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u521D\\u59CB\\u52A0\\u8F7D\\u65F6\\u95F4\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Example of dynamic import for code splitting\nimport('./myModule.js').then((module) => {\n  module.myFunction();\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Tree shaking\"}),`\n`,(0,e.jsx)(n.p,{children:\"Tree shaking \\u662F\\u4E00\\u9879\\u4ECE\\u6700\\u7EC8 bundle \\u4E2D\\u5220\\u9664\\u672A\\u4F7F\\u7528\\u7684\\u4EE3\\u7801\\u7684\\u529F\\u80FD\\u3002\\u8FD9\\u6709\\u52A9\\u4E8E\\u51CF\\u5C0F bundle \\u5927\\u5C0F\\u5E76\\u63D0\\u9AD8\\u6027\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Only the used function will be included in the final bundle\nimport { usedFunction } from './myModule.js';\nusedFunction();\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u70ED\\u6A21\\u5757\\u66FF\\u6362\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u70ED\\u6A21\\u5757\\u66FF\\u6362 (HMR) \\u5141\\u8BB8\\u60A8\\u5B9E\\u65F6\\u66F4\\u65B0\\u6A21\\u5757\\uFF0C\\u800C\\u65E0\\u9700\\u5237\\u65B0\\u6574\\u4E2A\\u9875\\u9762\\u3002\\u8FD9\\u53EF\\u4EE5\\u901A\\u8FC7\\u63D0\\u4F9B\\u5373\\u65F6\\u53CD\\u9988\\u6765\\u663E\\u7740\\u52A0\\u5FEB\\u5F00\\u53D1\\u8FC7\\u7A0B\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`if (module.hot) {\n  module.hot.accept('./myModule.js', function () {\n    // Handle the updated module\n    const updatedModule = require('./myModule.js');\n    updatedModule.myFunction();\n  });\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8D44\\u6E90\\u7BA1\\u7406\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u6253\\u5305\\u5668\\u8FD8\\u53EF\\u4EE5\\u5904\\u7406 CSS\\u3001\\u56FE\\u50CF\\u548C\\u5B57\\u4F53\\u7B49\\u5176\\u4ED6\\u8D44\\u6E90\\u3002\\u8FD9\\u5141\\u8BB8\\u60A8\\u5C06\\u8FD9\\u4E9B\\u8D44\\u6E90\\u76F4\\u63A5\\u5BFC\\u5165\\u5230 JavaScript \\u6587\\u4EF6\\u4E2D\\uFF0C\\u4ECE\\u800C\\u66F4\\u6613\\u4E8E\\u7BA1\\u7406\\u548C\\u4F18\\u5316\\u5B83\\u4EEC\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Importing a CSS file\nimport './styles.css';\n\n// Importing an image\nimport myImage from './image.png';\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://webpack.js.org/concepts/\",children:\"Webpack documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://rollupjs.org/guide/en/\",children:\"Rollup documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://parceljs.org/getting_started.html\",children:\"Parcel documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules\",children:\"MDN Web Docs: JavaScript modules\"})}),`\n`]})]})}function x(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,Object.assign({},l,{children:(0,e.jsx)(h,l)})):h(l)}var S=x;return M(F);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var j=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),y=(l,n)=>{for(var r in n)c(l,r,{get:n[r],enumerable:!0})},d=(l,n,r,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of p(n))!f.call(l,i)&&i!==r&&c(l,i,{get:()=>n[i],enumerable:!(t=m(n,i))||t.enumerable});return l};var M=(l,n,r)=>(r=l!=null?u(g(l)):{},d(n||!l||!l.__esModule?c(r,\"default\",{value:l,enumerable:!0}):r,l)),x=l=>d(c({},\"__esModule\",{value:!0}),l);var a=j((_,o)=>{o.exports=_jsx_runtime});var b={};y(b,{default:()=>s,frontmatter:()=>S});var e=M(a()),S={title:\"\\u4F7F\\u7528\\u6A21\\u5757\\u6253\\u5305\\u5668\\u7684\\u597D\\u5904\\u662F\\u4EC0\\u4E48\\uFF1F\"};function h(l){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...l.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528 Webpack\\u3001Rollup \\u6216 Parcel \\u7B49\\u6A21\\u5757\\u6253\\u5305\\u5668\\u6709\\u52A9\\u4E8E\\u7BA1\\u7406\\u4F9D\\u8D56\\u5173\\u7CFB\\u3001\\u4F18\\u5316\\u6027\\u80FD\\u5E76\\u6539\\u8FDB\\u5F00\\u53D1\\u5DE5\\u4F5C\\u6D41\\u7A0B\\u3002\\u5B83\\u5C06\\u591A\\u4E2A JavaScript \\u6587\\u4EF6\\u5408\\u5E76\\u6210\\u4E00\\u4E2A\\u6216\\u51E0\\u4E2A\\u6587\\u4EF6\\uFF0C\\u4ECE\\u800C\\u51CF\\u5C11 HTTP \\u8BF7\\u6C42\\u7684\\u6570\\u91CF\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u5305\\u542B\\u4EE3\\u7801\\u62C6\\u5206\\u3001tree shaking \\u548C\\u70ED\\u6A21\\u5757\\u66FF\\u6362\\u7B49\\u529F\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F7F\\u7528\\u6A21\\u5757\\u6253\\u5305\\u5668\\u7684\\u4F18\\u70B9\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F9D\\u8D56\\u7BA1\\u7406\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u6253\\u5305\\u5668\\u901A\\u8FC7\\u5141\\u8BB8\\u60A8\\u4EE5\\u6E05\\u6670\\u548C\\u6709\\u7EC4\\u7EC7\\u7684\\u65B9\\u5F0F\\u5BFC\\u5165\\u548C\\u5BFC\\u51FA\\u6A21\\u5757\\u6765\\u5E2E\\u52A9\\u7BA1\\u7406\\u4F9D\\u8D56\\u5173\\u7CFB\\u3002\\u8FD9\\u4F7F\\u5F97\\u7EF4\\u62A4\\u548C\\u7406\\u89E3\\u4EE3\\u7801\\u5E93\\u66F4\\u5BB9\\u6613\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Importing a module\nimport { myFunction } from './myModule.js';\n\n// Using the imported function\nmyFunction();\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6027\\u80FD\\u4F18\\u5316\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u6253\\u5305\\u5668\\u53EF\\u4EE5\\u901A\\u8FC7\\u51CF\\u5C11 HTTP \\u8BF7\\u6C42\\u7684\\u6570\\u91CF\\u6765\\u4F18\\u5316\\u6027\\u80FD\\u3002\\u5B83\\u4EEC\\u5C06\\u591A\\u4E2A JavaScript \\u6587\\u4EF6\\u5408\\u5E76\\u6210\\u4E00\\u4E2A\\u6216\\u51E0\\u4E2A\\u6587\\u4EF6\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u663E\\u8457\\u63D0\\u9AD8\\u52A0\\u8F7D\\u65F6\\u95F4\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EE3\\u7801\\u62C6\\u5206\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE3\\u7801\\u62C6\\u5206\\u5141\\u8BB8\\u60A8\\u5C06\\u4EE3\\u7801\\u62C6\\u5206\\u6210\\u66F4\\u5C0F\\u7684\\u5757\\uFF0C\\u8FD9\\u4E9B\\u5757\\u53EF\\u4EE5\\u6309\\u9700\\u52A0\\u8F7D\\u3002\\u8FD9\\u53EF\\u4EE5\\u901A\\u8FC7\\u4EC5\\u52A0\\u8F7D\\u5FC5\\u8981\\u7684\\u4EE3\\u7801\\u6765\\u6539\\u5584\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u521D\\u59CB\\u52A0\\u8F7D\\u65F6\\u95F4\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Example of dynamic import for code splitting\nimport('./myModule.js').then((module) => {\n  module.myFunction();\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Tree shaking\"}),`\n`,(0,e.jsx)(n.p,{children:\"Tree shaking \\u662F\\u4E00\\u9879\\u4ECE\\u6700\\u7EC8 bundle \\u4E2D\\u5220\\u9664\\u672A\\u4F7F\\u7528\\u7684\\u4EE3\\u7801\\u7684\\u529F\\u80FD\\u3002\\u8FD9\\u6709\\u52A9\\u4E8E\\u51CF\\u5C0F bundle \\u5927\\u5C0F\\u5E76\\u63D0\\u9AD8\\u6027\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Only the used function will be included in the final bundle\nimport { usedFunction } from './myModule.js';\nusedFunction();\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u70ED\\u6A21\\u5757\\u66FF\\u6362\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u70ED\\u6A21\\u5757\\u66FF\\u6362 (HMR) \\u5141\\u8BB8\\u60A8\\u5B9E\\u65F6\\u66F4\\u65B0\\u6A21\\u5757\\uFF0C\\u800C\\u65E0\\u9700\\u5237\\u65B0\\u6574\\u4E2A\\u9875\\u9762\\u3002\\u8FD9\\u53EF\\u4EE5\\u901A\\u8FC7\\u63D0\\u4F9B\\u5373\\u65F6\\u53CD\\u9988\\u6765\\u663E\\u7740\\u52A0\\u5FEB\\u5F00\\u53D1\\u8FC7\\u7A0B\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`if (module.hot) {\n  module.hot.accept('./myModule.js', function () {\n    // Handle the updated module\n    const updatedModule = require('./myModule.js');\n    updatedModule.myFunction();\n  });\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8D44\\u6E90\\u7BA1\\u7406\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u6253\\u5305\\u5668\\u8FD8\\u53EF\\u4EE5\\u5904\\u7406 CSS\\u3001\\u56FE\\u50CF\\u548C\\u5B57\\u4F53\\u7B49\\u5176\\u4ED6\\u8D44\\u6E90\\u3002\\u8FD9\\u5141\\u8BB8\\u60A8\\u5C06\\u8FD9\\u4E9B\\u8D44\\u6E90\\u76F4\\u63A5\\u5BFC\\u5165\\u5230 JavaScript \\u6587\\u4EF6\\u4E2D\\uFF0C\\u4ECE\\u800C\\u66F4\\u6613\\u4E8E\\u7BA1\\u7406\\u548C\\u4F18\\u5316\\u5B83\\u4EEC\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Importing a CSS file\nimport './styles.css';\n\n// Importing an image\nimport myImage from './image.png';\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://webpack.js.org/concepts/\",children:\"Webpack documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://rollupjs.org/guide/en/\",children:\"Rollup documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://parceljs.org/getting_started.html\",children:\"Parcel documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules\",children:\"MDN Web Docs: JavaScript modules\"})}),`\n`]})]})}function s(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,{...l,children:(0,e.jsx)(h,{...l})}):h(l)}return x(b);})();\n;return Component;"
 }
\ No newline at end of file
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 7e5356e94..50f696ff1 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),b=(i,n)=>{for(var r in n)t(i,r,{get:n[r],enumerable:!0})},l=(i,n,r,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let a of p(n))!m.call(i,a)&&a!==r&&t(i,a,{get:()=>n[a],enumerable:!(c=h(n,a))||c.enumerable});return i};var y=(i,n,r)=>(r=i!=null?u(g(i)):{},l(n||!i||!i.__esModule?t(r,\"default\",{value:i,enumerable:!0}):r,i)),w=i=>l(t({},\"__esModule\",{value:!0}),i);var s=f((_,o)=>{o.exports=_jsx_runtime});var C={};b(C,{default:()=>v,frontmatter:()=>x});var e=y(s()),x={title:\"What are the benefits of using currying and partial application?\"};function d(i){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",a:\"a\"},i.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"Currying transforms a function with multiple arguments into a sequence of functions, each taking a single argument. This allows for more flexible and reusable code. Partial application, on the other hand, allows you to fix a few arguments of a function and generate a new function. Both techniques help in creating more modular and maintainable code.\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Benefits of using currying and partial application\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Currying\"}),`\n`,(0,e.jsx)(n.p,{children:\"Currying is a technique where a function with multiple arguments is transformed into a sequence of functions, each taking a single argument. This can lead to more flexible and reusable code.\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Benefits\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Function reusability\"}),\": Currying allows you to create specialized functions from general ones by fixing some arguments.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Code readability\"}),\": It can make the code more readable and expressive by breaking down complex functions into simpler ones.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Functional programming\"}),\": Currying is a core concept in functional programming, which can lead to more predictable and testable code.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a) {\n  return function (b) {\n    return a + b;\n  };\n}\n\nconst addFive = add(5);\nconsole.log(addFive(3)); // Output: 8\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Partial application\"}),`\n`,(0,e.jsx)(n.p,{children:\"Partial application is a technique where you fix a few arguments of a function and generate a new function. This can be useful for creating more specific functions from general ones.\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Benefits\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Code reuse\"}),\": Like currying, partial application allows you to create specialized functions from general ones.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Improved readability\"}),\": It can make the code more readable by reducing the number of arguments needed when calling a function.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Simplified function calls\"}),\": By pre-filling some arguments, you can simplify the function calls in your code.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function multiply(a, b) {\n  return a * b;\n}\n\nconst double = multiply.bind(null, 2);\nconsole.log(double(5)); // Output: 10\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/currying-partials\",children:\"Currying in JavaScript\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://medium.com/javascript-scene/curry-and-function-composition-2c208d774983\",children:\"Partial application in JavaScript\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/functional-programming-in-js-with-practical-examples-part-1-87c2b0dbc276/\",children:\"Functional programming concepts\"})}),`\n`]})]})}function j(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,Object.assign({},i,{children:(0,e.jsx)(d,i)})):d(i)}var v=j;return w(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),y=(i,n)=>{for(var r in n)t(i,r,{get:n[r],enumerable:!0})},l=(i,n,r,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let a of m(n))!f.call(i,a)&&a!==r&&t(i,a,{get:()=>n[a],enumerable:!(c=p(n,a))||c.enumerable});return i};var w=(i,n,r)=>(r=i!=null?h(g(i)):{},l(n||!i||!i.__esModule?t(r,\"default\",{value:i,enumerable:!0}):r,i)),x=i=>l(t({},\"__esModule\",{value:!0}),i);var s=b((F,o)=>{o.exports=_jsx_runtime});var v={};y(v,{default:()=>u,frontmatter:()=>j});var e=w(s()),j={title:\"What are the benefits of using currying and partial application?\"};function d(i){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"Currying transforms a function with multiple arguments into a sequence of functions, each taking a single argument. This allows for more flexible and reusable code. Partial application, on the other hand, allows you to fix a few arguments of a function and generate a new function. Both techniques help in creating more modular and maintainable code.\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Benefits of using currying and partial application\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Currying\"}),`\n`,(0,e.jsx)(n.p,{children:\"Currying is a technique where a function with multiple arguments is transformed into a sequence of functions, each taking a single argument. This can lead to more flexible and reusable code.\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Benefits\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Function reusability\"}),\": Currying allows you to create specialized functions from general ones by fixing some arguments.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Code readability\"}),\": It can make the code more readable and expressive by breaking down complex functions into simpler ones.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Functional programming\"}),\": Currying is a core concept in functional programming, which can lead to more predictable and testable code.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a) {\n  return function (b) {\n    return a + b;\n  };\n}\n\nconst addFive = add(5);\nconsole.log(addFive(3)); // Output: 8\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Partial application\"}),`\n`,(0,e.jsx)(n.p,{children:\"Partial application is a technique where you fix a few arguments of a function and generate a new function. This can be useful for creating more specific functions from general ones.\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Benefits\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Code reuse\"}),\": Like currying, partial application allows you to create specialized functions from general ones.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Improved readability\"}),\": It can make the code more readable by reducing the number of arguments needed when calling a function.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Simplified function calls\"}),\": By pre-filling some arguments, you can simplify the function calls in your code.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function multiply(a, b) {\n  return a * b;\n}\n\nconst double = multiply.bind(null, 2);\nconsole.log(double(5)); // Output: 10\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/currying-partials\",children:\"Currying in JavaScript\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://medium.com/javascript-scene/curry-and-function-composition-2c208d774983\",children:\"Partial application in JavaScript\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/functional-programming-in-js-with-practical-examples-part-1-87c2b0dbc276/\",children:\"Functional programming concepts\"})}),`\n`]})]})}function u(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,{...i,children:(0,e.jsx)(d,{...i})}):d(i)}return x(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-currying-and-partial-application/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-currying-and-partial-application/zh-CN.json
index 6843988fb..25c419b54 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-currying-and-partial-application/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-currying-and-partial-application/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-benefits-of-using-currying-and-partial-application/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),j=(r,n)=>{for(var i in n)l(r,i,{get:n[i],enumerable:!0})},h=(r,n,i,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of p(n))!m.call(r,c)&&c!==i&&l(r,c,{get:()=>n[c],enumerable:!(t=u(n,c))||t.enumerable});return r};var b=(r,n,i)=>(i=r!=null?s(g(r)):{},h(n||!r||!r.__esModule?l(i,\"default\",{value:r,enumerable:!0}):i,r)),x=r=>h(l({},\"__esModule\",{value:!0}),r);var o=f((O,d)=>{d.exports=_jsx_runtime});var y={};j(y,{default:()=>w,frontmatter:()=>v});var e=b(o()),v={title:\"\\u4F7F\\u7528\\u67EF\\u91CC\\u5316\\u548C\\u90E8\\u5206\\u5E94\\u7528\\u7684\\u76CA\\u5904\\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(r){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u67EF\\u91CC\\u5316\\u5C06\\u5177\\u6709\\u591A\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u8F6C\\u6362\\u4E3A\\u4E00\\u7CFB\\u5217\\u51FD\\u6570\\uFF0C\\u6BCF\\u4E2A\\u51FD\\u6570\\u53EA\\u63A5\\u53D7\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\\u8FD9\\u4F7F\\u5F97\\u4EE3\\u7801\\u66F4\\u7075\\u6D3B\\u3001\\u66F4\\u53EF\\u91CD\\u7528\\u3002\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\\u90E8\\u5206\\u5E94\\u7528\\u5141\\u8BB8\\u4F60\\u56FA\\u5B9A\\u51FD\\u6570\\u7684\\u51E0\\u4E2A\\u53C2\\u6570\\u5E76\\u751F\\u6210\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\u3002\\u8FD9\\u4E24\\u79CD\\u6280\\u672F\\u90FD\\u6709\\u52A9\\u4E8E\\u521B\\u5EFA\\u66F4\\u6A21\\u5757\\u5316\\u548C\\u53EF\\u7EF4\\u62A4\\u7684\\u4EE3\\u7801\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F7F\\u7528\\u67EF\\u91CC\\u5316\\u548C\\u90E8\\u5206\\u5E94\\u7528\\u7684\\u76CA\\u5904\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u67EF\\u91CC\\u5316\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u67EF\\u91CC\\u5316\\u662F\\u4E00\\u79CD\\u5C06\\u5177\\u6709\\u591A\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u8F6C\\u6362\\u4E3A\\u4E00\\u7CFB\\u5217\\u51FD\\u6570\\u7684\\u6280\\u672F\\uFF0C\\u6BCF\\u4E2A\\u51FD\\u6570\\u53EA\\u63A5\\u53D7\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\\u8FD9\\u53EF\\u4EE5\\u4F7F\\u4EE3\\u7801\\u66F4\\u7075\\u6D3B\\u3001\\u66F4\\u53EF\\u91CD\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u51FD\\u6570\\u53EF\\u91CD\\u7528\\u6027\"}),\"\\uFF1A\\u67EF\\u91CC\\u5316\\u5141\\u8BB8\\u4F60\\u901A\\u8FC7\\u56FA\\u5B9A\\u4E00\\u4E9B\\u53C2\\u6570\\u6765\\u4ECE\\u901A\\u7528\\u51FD\\u6570\\u521B\\u5EFA\\u4E13\\u7528\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4EE3\\u7801\\u53EF\\u8BFB\\u6027\"}),\"\\uFF1A\\u5B83\\u53EF\\u4EE5\\u901A\\u8FC7\\u5C06\\u590D\\u6742\\u51FD\\u6570\\u5206\\u89E3\\u4E3A\\u66F4\\u7B80\\u5355\\u7684\\u51FD\\u6570\\u6765\\u4F7F\\u4EE3\\u7801\\u66F4\\u5177\\u53EF\\u8BFB\\u6027\\u548C\\u8868\\u73B0\\u529B\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\"}),\"\\uFF1A\\u67EF\\u91CC\\u5316\\u662F\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\\u7684\\u6838\\u5FC3\\u6982\\u5FF5\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u4F7F\\u4EE3\\u7801\\u66F4\\u53EF\\u9884\\u6D4B\\u548C\\u53EF\\u6D4B\\u8BD5\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a) {\n  return function (b) {\n    return a + b;\n  };\n}\n\nconst addFive = add(5);\nconsole.log(addFive(3)); // Output: 8\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u90E8\\u5206\\u5E94\\u7528\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u90E8\\u5206\\u5E94\\u7528\\u662F\\u4E00\\u79CD\\u56FA\\u5B9A\\u51FD\\u6570\\u7684\\u51E0\\u4E2A\\u53C2\\u6570\\u5E76\\u751F\\u6210\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\u7684\\u6280\\u672F\\u3002\\u8FD9\\u5BF9\\u4E8E\\u4ECE\\u901A\\u7528\\u51FD\\u6570\\u521B\\u5EFA\\u66F4\\u5177\\u4F53\\u7684\\u51FD\\u6570\\u5F88\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4EE3\\u7801\\u91CD\\u7528\"}),\"\\uFF1A\\u4E0E\\u67EF\\u91CC\\u5316\\u4E00\\u6837\\uFF0C\\u90E8\\u5206\\u5E94\\u7528\\u5141\\u8BB8\\u4F60\\u4ECE\\u901A\\u7528\\u51FD\\u6570\\u521B\\u5EFA\\u4E13\\u7528\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u63D0\\u9AD8\\u53EF\\u8BFB\\u6027\"}),\"\\uFF1A\\u901A\\u8FC7\\u51CF\\u5C11\\u8C03\\u7528\\u51FD\\u6570\\u65F6\\u6240\\u9700\\u7684\\u53C2\\u6570\\u6570\\u91CF\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u4EE3\\u7801\\u66F4\\u5177\\u53EF\\u8BFB\\u6027\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7B80\\u5316\\u51FD\\u6570\\u8C03\\u7528\"}),\"\\uFF1A\\u901A\\u8FC7\\u9884\\u5148\\u586B\\u5145\\u4E00\\u4E9B\\u53C2\\u6570\\uFF0C\\u4F60\\u53EF\\u4EE5\\u7B80\\u5316\\u4EE3\\u7801\\u4E2D\\u7684\\u51FD\\u6570\\u8C03\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function multiply(a, b) {\n  return a * b;\n}\n\nconst double = multiply.bind(null, 2);\nconsole.log(double(5)); // Output: 10\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/currying-partials\",children:\"JavaScript \\u4E2D\\u7684\\u67EF\\u91CC\\u5316\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://medium.com/javascript-scene/curry-and-function-composition-2c208d774983\",children:\"JavaScript \\u4E2D\\u7684\\u90E8\\u5206\\u5E94\\u7528\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/functional-programming-in-js-with-practical-examples-part-1-87c2b0dbc276/\",children:\"\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\\u6982\\u5FF5\"})}),`\n`]})]})}function _(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(a,r)})):a(r)}var w=_;return x(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var j=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),x=(r,n)=>{for(var i in n)l(r,i,{get:n[i],enumerable:!0})},h=(r,n,i,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of m(n))!f.call(r,c)&&c!==i&&l(r,c,{get:()=>n[c],enumerable:!(t=p(n,c))||t.enumerable});return r};var b=(r,n,i)=>(i=r!=null?u(g(r)):{},h(n||!r||!r.__esModule?l(i,\"default\",{value:r,enumerable:!0}):i,r)),v=r=>h(l({},\"__esModule\",{value:!0}),r);var o=j((F,d)=>{d.exports=_jsx_runtime});var w={};x(w,{default:()=>s,frontmatter:()=>_});var e=b(o()),_={title:\"\\u4F7F\\u7528\\u67EF\\u91CC\\u5316\\u548C\\u90E8\\u5206\\u5E94\\u7528\\u7684\\u76CA\\u5904\\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u67EF\\u91CC\\u5316\\u5C06\\u5177\\u6709\\u591A\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u8F6C\\u6362\\u4E3A\\u4E00\\u7CFB\\u5217\\u51FD\\u6570\\uFF0C\\u6BCF\\u4E2A\\u51FD\\u6570\\u53EA\\u63A5\\u53D7\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\\u8FD9\\u4F7F\\u5F97\\u4EE3\\u7801\\u66F4\\u7075\\u6D3B\\u3001\\u66F4\\u53EF\\u91CD\\u7528\\u3002\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\\u90E8\\u5206\\u5E94\\u7528\\u5141\\u8BB8\\u4F60\\u56FA\\u5B9A\\u51FD\\u6570\\u7684\\u51E0\\u4E2A\\u53C2\\u6570\\u5E76\\u751F\\u6210\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\u3002\\u8FD9\\u4E24\\u79CD\\u6280\\u672F\\u90FD\\u6709\\u52A9\\u4E8E\\u521B\\u5EFA\\u66F4\\u6A21\\u5757\\u5316\\u548C\\u53EF\\u7EF4\\u62A4\\u7684\\u4EE3\\u7801\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F7F\\u7528\\u67EF\\u91CC\\u5316\\u548C\\u90E8\\u5206\\u5E94\\u7528\\u7684\\u76CA\\u5904\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u67EF\\u91CC\\u5316\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u67EF\\u91CC\\u5316\\u662F\\u4E00\\u79CD\\u5C06\\u5177\\u6709\\u591A\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u8F6C\\u6362\\u4E3A\\u4E00\\u7CFB\\u5217\\u51FD\\u6570\\u7684\\u6280\\u672F\\uFF0C\\u6BCF\\u4E2A\\u51FD\\u6570\\u53EA\\u63A5\\u53D7\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\\u8FD9\\u53EF\\u4EE5\\u4F7F\\u4EE3\\u7801\\u66F4\\u7075\\u6D3B\\u3001\\u66F4\\u53EF\\u91CD\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u51FD\\u6570\\u53EF\\u91CD\\u7528\\u6027\"}),\"\\uFF1A\\u67EF\\u91CC\\u5316\\u5141\\u8BB8\\u4F60\\u901A\\u8FC7\\u56FA\\u5B9A\\u4E00\\u4E9B\\u53C2\\u6570\\u6765\\u4ECE\\u901A\\u7528\\u51FD\\u6570\\u521B\\u5EFA\\u4E13\\u7528\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4EE3\\u7801\\u53EF\\u8BFB\\u6027\"}),\"\\uFF1A\\u5B83\\u53EF\\u4EE5\\u901A\\u8FC7\\u5C06\\u590D\\u6742\\u51FD\\u6570\\u5206\\u89E3\\u4E3A\\u66F4\\u7B80\\u5355\\u7684\\u51FD\\u6570\\u6765\\u4F7F\\u4EE3\\u7801\\u66F4\\u5177\\u53EF\\u8BFB\\u6027\\u548C\\u8868\\u73B0\\u529B\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\"}),\"\\uFF1A\\u67EF\\u91CC\\u5316\\u662F\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\\u7684\\u6838\\u5FC3\\u6982\\u5FF5\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u4F7F\\u4EE3\\u7801\\u66F4\\u53EF\\u9884\\u6D4B\\u548C\\u53EF\\u6D4B\\u8BD5\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a) {\n  return function (b) {\n    return a + b;\n  };\n}\n\nconst addFive = add(5);\nconsole.log(addFive(3)); // Output: 8\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u90E8\\u5206\\u5E94\\u7528\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u90E8\\u5206\\u5E94\\u7528\\u662F\\u4E00\\u79CD\\u56FA\\u5B9A\\u51FD\\u6570\\u7684\\u51E0\\u4E2A\\u53C2\\u6570\\u5E76\\u751F\\u6210\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\u7684\\u6280\\u672F\\u3002\\u8FD9\\u5BF9\\u4E8E\\u4ECE\\u901A\\u7528\\u51FD\\u6570\\u521B\\u5EFA\\u66F4\\u5177\\u4F53\\u7684\\u51FD\\u6570\\u5F88\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4EE3\\u7801\\u91CD\\u7528\"}),\"\\uFF1A\\u4E0E\\u67EF\\u91CC\\u5316\\u4E00\\u6837\\uFF0C\\u90E8\\u5206\\u5E94\\u7528\\u5141\\u8BB8\\u4F60\\u4ECE\\u901A\\u7528\\u51FD\\u6570\\u521B\\u5EFA\\u4E13\\u7528\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u63D0\\u9AD8\\u53EF\\u8BFB\\u6027\"}),\"\\uFF1A\\u901A\\u8FC7\\u51CF\\u5C11\\u8C03\\u7528\\u51FD\\u6570\\u65F6\\u6240\\u9700\\u7684\\u53C2\\u6570\\u6570\\u91CF\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u4EE3\\u7801\\u66F4\\u5177\\u53EF\\u8BFB\\u6027\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7B80\\u5316\\u51FD\\u6570\\u8C03\\u7528\"}),\"\\uFF1A\\u901A\\u8FC7\\u9884\\u5148\\u586B\\u5145\\u4E00\\u4E9B\\u53C2\\u6570\\uFF0C\\u4F60\\u53EF\\u4EE5\\u7B80\\u5316\\u4EE3\\u7801\\u4E2D\\u7684\\u51FD\\u6570\\u8C03\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function multiply(a, b) {\n  return a * b;\n}\n\nconst double = multiply.bind(null, 2);\nconsole.log(double(5)); // Output: 10\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/currying-partials\",children:\"JavaScript \\u4E2D\\u7684\\u67EF\\u91CC\\u5316\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://medium.com/javascript-scene/curry-and-function-composition-2c208d774983\",children:\"JavaScript \\u4E2D\\u7684\\u90E8\\u5206\\u5E94\\u7528\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/functional-programming-in-js-with-practical-examples-part-1-87c2b0dbc276/\",children:\"\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\\u6982\\u5FF5\"})}),`\n`]})]})}function s(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(a,{...r})}):a(r)}return v(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-hooks-in-react/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-hooks-in-react/en-US.json
index 5ede24ef2..8e33a7408 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-hooks-in-react/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-hooks-in-react/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-are-the-benefits-of-using-hooks-in-react/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),k=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},s=(t,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!f.call(t,c)&&c!==o&&i(t,c,{get:()=>e[c],enumerable:!(a=u(e,c))||a.enumerable});return t};var y=(t,e,o)=>(o=t!=null?h(p(t)):{},s(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),b=t=>s(i({},\"__esModule\",{value:!0}),t);var l=g((v,r)=>{r.exports=_jsx_runtime});var S={};k(S,{default:()=>x,frontmatter:()=>w});var n=y(l()),w={title:\"What are the benefits of using hooks in React?\"};function d(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:[\"Hooks in React allow you to use state and other React features without writing a class. They make it easier to reuse stateful logic between components, improve code readability, and simplify the codebase by reducing the need for lifecycle methods. Hooks like \",(0,n.jsx)(e.code,{children:\"useState\"}),\" and \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" are commonly used to manage state and side effects in functional components.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Benefits of using hooks in React\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Simplified state management\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Hooks like \",(0,n.jsx)(e.code,{children:\"useState\"}),\" allow you to add state to functional components without converting them to class components. This makes the code more concise and easier to read.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [count, setCount] = useState(0);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Improved code readability\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hooks help in breaking down complex components into smaller, reusable pieces of logic. This makes the code more modular and easier to understand.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Reusable logic\"}),`\n`,(0,n.jsx)(e.p,{children:\"Custom hooks allow you to extract and reuse stateful logic across multiple components. This promotes code reuse and reduces duplication.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`function useCustomHook() {\n  const [state, setState] = useState(initialState);\n  // Custom logic here\n  return [state, setState];\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Reduced need for lifecycle methods\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Hooks like \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" can replace lifecycle methods such as \",(0,n.jsx)(e.code,{children:\"componentDidMount\"}),\", \",(0,n.jsx)(e.code,{children:\"componentDidUpdate\"}),\", and \",(0,n.jsx)(e.code,{children:\"componentWillUnmount\"}),\". This simplifies the component lifecycle management.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  // Side effect logic here\n  return () => {\n    // Cleanup logic here\n  };\n}, [dependencies]);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Better separation of concerns\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hooks allow you to separate concerns by grouping related logic together. This makes the codebase more maintainable and easier to debug.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Enhanced testing\"}),`\n`,(0,n.jsx)(e.p,{children:\"Functional components with hooks are generally easier to test compared to class components. Hooks can be tested in isolation, making unit tests more straightforward.\"}),`\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://react.dev/reference/react/hooks\",children:\"React Hooks documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/useState\",children:\"Using the State Hook\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/useEffect\",children:\"Using the Effect Hook\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/reusing-logic-with-custom-hooks\",children:\"Building Your Own Hooks\"})}),`\n`]})]})}function H(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var x=H;return b(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var k=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},r=(t,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!g.call(t,c)&&c!==o&&i(t,c,{get:()=>e[c],enumerable:!(a=m(e,c))||a.enumerable});return t};var b=(t,e,o)=>(o=t!=null?u(f(t)):{},r(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),w=t=>r(i({},\"__esModule\",{value:!0}),t);var l=k((v,s)=>{s.exports=_jsx_runtime});var x={};y(x,{default:()=>h,frontmatter:()=>H});var n=b(l()),H={title:\"What are the benefits of using hooks in React?\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Hooks in React allow you to use state and other React features without writing a class. They make it easier to reuse stateful logic between components, improve code readability, and simplify the codebase by reducing the need for lifecycle methods. Hooks like \",(0,n.jsx)(e.code,{children:\"useState\"}),\" and \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" are commonly used to manage state and side effects in functional components.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Benefits of using hooks in React\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Simplified state management\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Hooks like \",(0,n.jsx)(e.code,{children:\"useState\"}),\" allow you to add state to functional components without converting them to class components. This makes the code more concise and easier to read.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [count, setCount] = useState(0);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Improved code readability\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hooks help in breaking down complex components into smaller, reusable pieces of logic. This makes the code more modular and easier to understand.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Reusable logic\"}),`\n`,(0,n.jsx)(e.p,{children:\"Custom hooks allow you to extract and reuse stateful logic across multiple components. This promotes code reuse and reduces duplication.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`function useCustomHook() {\n  const [state, setState] = useState(initialState);\n  // Custom logic here\n  return [state, setState];\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Reduced need for lifecycle methods\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Hooks like \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" can replace lifecycle methods such as \",(0,n.jsx)(e.code,{children:\"componentDidMount\"}),\", \",(0,n.jsx)(e.code,{children:\"componentDidUpdate\"}),\", and \",(0,n.jsx)(e.code,{children:\"componentWillUnmount\"}),\". This simplifies the component lifecycle management.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  // Side effect logic here\n  return () => {\n    // Cleanup logic here\n  };\n}, [dependencies]);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Better separation of concerns\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hooks allow you to separate concerns by grouping related logic together. This makes the codebase more maintainable and easier to debug.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Enhanced testing\"}),`\n`,(0,n.jsx)(e.p,{children:\"Functional components with hooks are generally easier to test compared to class components. Hooks can be tested in isolation, making unit tests more straightforward.\"}),`\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://react.dev/reference/react/hooks\",children:\"React Hooks documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/useState\",children:\"Using the State Hook\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/useEffect\",children:\"Using the Effect Hook\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/reusing-logic-with-custom-hooks\",children:\"Building Your Own Hooks\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return w(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-hooks-in-react/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-hooks-in-react/zh-CN.json
index b16f8302f..5632b2ba8 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-hooks-in-react/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-hooks-in-react/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-are-the-benefits-of-using-hooks-in-react/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),k=(t,e)=>{for(var c in e)o(t,c,{get:e[c],enumerable:!0})},h=(t,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!m.call(t,r)&&r!==c&&o(t,r,{get:()=>e[r],enumerable:!(i=u(e,r))||i.enumerable});return t};var H=(t,e,c)=>(c=t!=null?a(f(t)):{},h(e||!t||!t.__esModule?o(c,\"default\",{value:t,enumerable:!0}):c,t)),j=t=>h(o({},\"__esModule\",{value:!0}),t);var l=g((R,s)=>{s.exports=_jsx_runtime});var _={};k(_,{default:()=>v,frontmatter:()=>S});var n=H(l()),S={title:\"\\u4F7F\\u7528 React Hooks \\u6709\\u4EC0\\u4E48\\u597D\\u5904\\uFF1F\"};function d(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:[\"React \\u4E2D\\u7684 Hooks \\u5141\\u8BB8\\u60A8\\u4F7F\\u7528\\u72B6\\u6001\\u548C\\u5176\\u4ED6 React \\u529F\\u80FD\\uFF0C\\u800C\\u65E0\\u9700\\u7F16\\u5199\\u7C7B\\u3002\\u5B83\\u4EEC\\u4F7F\\u5728\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u91CD\\u7528\\u6709\\u72B6\\u6001\\u903B\\u8F91\\u3001\\u63D0\\u9AD8\\u4EE3\\u7801\\u53EF\\u8BFB\\u6027\\u4EE5\\u53CA\\u901A\\u8FC7\\u51CF\\u5C11\\u5BF9\\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\\u7684\\u9700\\u6C42\\u6765\\u7B80\\u5316\\u4EE3\\u7801\\u5E93\\u53D8\\u5F97\\u66F4\\u5BB9\\u6613\\u3002\\u50CF \",(0,n.jsx)(e.code,{children:\"useState\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u8FD9\\u6837\\u7684 Hooks \\u901A\\u5E38\\u7528\\u4E8E\\u7BA1\\u7406\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E2D\\u7684\\u72B6\\u6001\\u548C\\u526F\\u4F5C\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4F7F\\u7528 React Hooks \\u7684\\u597D\\u5904\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7B80\\u5316\\u7684\\u72B6\\u6001\\u7BA1\\u7406\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u50CF \",(0,n.jsx)(e.code,{children:\"useState\"}),\" \\u8FD9\\u6837\\u7684 Hooks \\u5141\\u8BB8\\u60A8\\u5C06\\u72B6\\u6001\\u6DFB\\u52A0\\u5230\\u51FD\\u6570\\u7EC4\\u4EF6\\uFF0C\\u800C\\u65E0\\u9700\\u5C06\\u5B83\\u4EEC\\u8F6C\\u6362\\u4E3A\\u7C7B\\u7EC4\\u4EF6\\u3002\\u8FD9\\u4F7F\\u5F97\\u4EE3\\u7801\\u66F4\\u7B80\\u6D01\\uFF0C\\u66F4\\u6613\\u4E8E\\u9605\\u8BFB\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [count, setCount] = useState(0);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u63D0\\u9AD8\\u4EE3\\u7801\\u53EF\\u8BFB\\u6027\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hooks \\u6709\\u52A9\\u4E8E\\u5C06\\u590D\\u6742\\u7684\\u7EC4\\u4EF6\\u5206\\u89E3\\u6210\\u66F4\\u5C0F\\u3001\\u53EF\\u91CD\\u7528\\u7684\\u903B\\u8F91\\u7247\\u6BB5\\u3002\\u8FD9\\u4F7F\\u5F97\\u4EE3\\u7801\\u66F4\\u6A21\\u5757\\u5316\\uFF0C\\u66F4\\u5BB9\\u6613\\u7406\\u89E3\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u53EF\\u91CD\\u7528\\u903B\\u8F91\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u81EA\\u5B9A\\u4E49 Hook \\u5141\\u8BB8\\u60A8\\u8DE8\\u591A\\u4E2A\\u7EC4\\u4EF6\\u63D0\\u53D6\\u548C\\u91CD\\u7528\\u6709\\u72B6\\u6001\\u903B\\u8F91\\u3002\\u8FD9\\u4FC3\\u8FDB\\u4E86\\u4EE3\\u7801\\u91CD\\u7528\\u5E76\\u51CF\\u5C11\\u4E86\\u91CD\\u590D\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`function useCustomHook() {\n  const [state, setState] = useState(initialState);\n  // Custom logic here\n  return [state, setState];\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u51CF\\u5C11\\u5BF9\\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\\u7684\\u9700\\u6C42\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u50CF \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u8FD9\\u6837\\u7684 Hooks \\u53EF\\u4EE5\\u66FF\\u6362\\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"componentDidMount\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"componentDidUpdate\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"componentWillUnmount\"}),\"\\u3002\\u8FD9\\u7B80\\u5316\\u4E86\\u7EC4\\u4EF6\\u751F\\u547D\\u5468\\u671F\\u7BA1\\u7406\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  // Side effect logic here\n  return () => {\n    // Cleanup logic here\n  };\n}, [dependencies]);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u66F4\\u597D\\u5730\\u5173\\u6CE8\\u5206\\u79BB\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hooks \\u5141\\u8BB8\\u60A8\\u901A\\u8FC7\\u5C06\\u76F8\\u5173\\u903B\\u8F91\\u5206\\u7EC4\\u5728\\u4E00\\u8D77\\u6765\\u5206\\u79BB\\u5173\\u6CE8\\u70B9\\u3002\\u8FD9\\u4F7F\\u5F97\\u4EE3\\u7801\\u5E93\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u548C\\u8C03\\u8BD5\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u589E\\u5F3A\\u6D4B\\u8BD5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E0E\\u7C7B\\u7EC4\\u4EF6\\u76F8\\u6BD4\\uFF0C\\u5177\\u6709 Hooks \\u7684\\u51FD\\u6570\\u7EC4\\u4EF6\\u901A\\u5E38\\u66F4\\u5BB9\\u6613\\u6D4B\\u8BD5\\u3002Hooks \\u53EF\\u4EE5\\u5728\\u9694\\u79BB\\u72B6\\u6001\\u4E0B\\u8FDB\\u884C\\u6D4B\\u8BD5\\uFF0C\\u4F7F\\u5355\\u5143\\u6D4B\\u8BD5\\u66F4\\u7B80\\u5355\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/hooks\",children:\"React Hooks documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/useState\",children:\"Using the State Hook\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/useEffect\",children:\"Using the Effect Hook\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/reusing-logic-with-custom-hooks\",children:\"Building Your Own Hooks\"})}),`\n`]})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var v=x;return j(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),H=(t,e)=>{for(var c in e)o(t,c,{get:e[c],enumerable:!0})},h=(t,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!k.call(t,r)&&r!==c&&o(t,r,{get:()=>e[r],enumerable:!(i=p(e,r))||i.enumerable});return t};var S=(t,e,c)=>(c=t!=null?u(m(t)):{},h(e||!t||!t.__esModule?o(c,\"default\",{value:t,enumerable:!0}):c,t)),x=t=>h(o({},\"__esModule\",{value:!0}),t);var d=g((C,l)=>{l.exports=_jsx_runtime});var v={};H(v,{default:()=>a,frontmatter:()=>j});var n=S(d()),j={title:\"\\u4F7F\\u7528 React Hooks \\u6709\\u4EC0\\u4E48\\u597D\\u5904\\uFF1F\"};function s(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React \\u4E2D\\u7684 Hooks \\u5141\\u8BB8\\u60A8\\u4F7F\\u7528\\u72B6\\u6001\\u548C\\u5176\\u4ED6 React \\u529F\\u80FD\\uFF0C\\u800C\\u65E0\\u9700\\u7F16\\u5199\\u7C7B\\u3002\\u5B83\\u4EEC\\u4F7F\\u5728\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u91CD\\u7528\\u6709\\u72B6\\u6001\\u903B\\u8F91\\u3001\\u63D0\\u9AD8\\u4EE3\\u7801\\u53EF\\u8BFB\\u6027\\u4EE5\\u53CA\\u901A\\u8FC7\\u51CF\\u5C11\\u5BF9\\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\\u7684\\u9700\\u6C42\\u6765\\u7B80\\u5316\\u4EE3\\u7801\\u5E93\\u53D8\\u5F97\\u66F4\\u5BB9\\u6613\\u3002\\u50CF \",(0,n.jsx)(e.code,{children:\"useState\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u8FD9\\u6837\\u7684 Hooks \\u901A\\u5E38\\u7528\\u4E8E\\u7BA1\\u7406\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E2D\\u7684\\u72B6\\u6001\\u548C\\u526F\\u4F5C\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4F7F\\u7528 React Hooks \\u7684\\u597D\\u5904\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7B80\\u5316\\u7684\\u72B6\\u6001\\u7BA1\\u7406\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u50CF \",(0,n.jsx)(e.code,{children:\"useState\"}),\" \\u8FD9\\u6837\\u7684 Hooks \\u5141\\u8BB8\\u60A8\\u5C06\\u72B6\\u6001\\u6DFB\\u52A0\\u5230\\u51FD\\u6570\\u7EC4\\u4EF6\\uFF0C\\u800C\\u65E0\\u9700\\u5C06\\u5B83\\u4EEC\\u8F6C\\u6362\\u4E3A\\u7C7B\\u7EC4\\u4EF6\\u3002\\u8FD9\\u4F7F\\u5F97\\u4EE3\\u7801\\u66F4\\u7B80\\u6D01\\uFF0C\\u66F4\\u6613\\u4E8E\\u9605\\u8BFB\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [count, setCount] = useState(0);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u63D0\\u9AD8\\u4EE3\\u7801\\u53EF\\u8BFB\\u6027\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hooks \\u6709\\u52A9\\u4E8E\\u5C06\\u590D\\u6742\\u7684\\u7EC4\\u4EF6\\u5206\\u89E3\\u6210\\u66F4\\u5C0F\\u3001\\u53EF\\u91CD\\u7528\\u7684\\u903B\\u8F91\\u7247\\u6BB5\\u3002\\u8FD9\\u4F7F\\u5F97\\u4EE3\\u7801\\u66F4\\u6A21\\u5757\\u5316\\uFF0C\\u66F4\\u5BB9\\u6613\\u7406\\u89E3\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u53EF\\u91CD\\u7528\\u903B\\u8F91\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u81EA\\u5B9A\\u4E49 Hook \\u5141\\u8BB8\\u60A8\\u8DE8\\u591A\\u4E2A\\u7EC4\\u4EF6\\u63D0\\u53D6\\u548C\\u91CD\\u7528\\u6709\\u72B6\\u6001\\u903B\\u8F91\\u3002\\u8FD9\\u4FC3\\u8FDB\\u4E86\\u4EE3\\u7801\\u91CD\\u7528\\u5E76\\u51CF\\u5C11\\u4E86\\u91CD\\u590D\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`function useCustomHook() {\n  const [state, setState] = useState(initialState);\n  // Custom logic here\n  return [state, setState];\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u51CF\\u5C11\\u5BF9\\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\\u7684\\u9700\\u6C42\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u50CF \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u8FD9\\u6837\\u7684 Hooks \\u53EF\\u4EE5\\u66FF\\u6362\\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"componentDidMount\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"componentDidUpdate\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"componentWillUnmount\"}),\"\\u3002\\u8FD9\\u7B80\\u5316\\u4E86\\u7EC4\\u4EF6\\u751F\\u547D\\u5468\\u671F\\u7BA1\\u7406\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  // Side effect logic here\n  return () => {\n    // Cleanup logic here\n  };\n}, [dependencies]);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u66F4\\u597D\\u5730\\u5173\\u6CE8\\u5206\\u79BB\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hooks \\u5141\\u8BB8\\u60A8\\u901A\\u8FC7\\u5C06\\u76F8\\u5173\\u903B\\u8F91\\u5206\\u7EC4\\u5728\\u4E00\\u8D77\\u6765\\u5206\\u79BB\\u5173\\u6CE8\\u70B9\\u3002\\u8FD9\\u4F7F\\u5F97\\u4EE3\\u7801\\u5E93\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u548C\\u8C03\\u8BD5\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u589E\\u5F3A\\u6D4B\\u8BD5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E0E\\u7C7B\\u7EC4\\u4EF6\\u76F8\\u6BD4\\uFF0C\\u5177\\u6709 Hooks \\u7684\\u51FD\\u6570\\u7EC4\\u4EF6\\u901A\\u5E38\\u66F4\\u5BB9\\u6613\\u6D4B\\u8BD5\\u3002Hooks \\u53EF\\u4EE5\\u5728\\u9694\\u79BB\\u72B6\\u6001\\u4E0B\\u8FDB\\u884C\\u6D4B\\u8BD5\\uFF0C\\u4F7F\\u5355\\u5143\\u6D4B\\u8BD5\\u66F4\\u7B80\\u5355\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/hooks\",children:\"React Hooks documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/useState\",children:\"Using the State Hook\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/useEffect\",children:\"Using the Effect Hook\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/reusing-logic-with-custom-hooks\",children:\"Building Your Own Hooks\"})}),`\n`]})]})}function a(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(s,{...t})}):s(t)}return x(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.json
index 52f207f0b..97059a677 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var b=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),y=(r,e)=>{for(var t in e)s(r,t,{get:e[t],enumerable:!0})},i=(r,e,t,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of g(e))!m.call(r,a)&&a!==t&&s(r,a,{get:()=>e[a],enumerable:!(o=u(e,a))||o.enumerable});return r};var f=(r,e,t)=>(t=r!=null?h(p(r)):{},i(e||!r||!r.__esModule?s(t,\"default\",{value:r,enumerable:!0}):t,r)),j=r=>i(s({},\"__esModule\",{value:!0}),r);var l=b((N,c)=>{c.exports=_jsx_runtime});var O={};y(O,{default:()=>v,frontmatter:()=>x});var n=f(l()),x={title:\"What are the benefits of using spread syntax in JavaScript and how is it different from rest syntax?\"};function d(r){let e=Object.assign({h2:\"h2\",p:\"p\",strong:\"strong\",code:\"code\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Spread syntax\"}),\" (\",(0,n.jsx)(e.code,{children:\"...\"}),\") allows an iterable (like an array or string) to be expanded into individual elements. This is often used as a convenient and modern way to create new arrays or objects by combining existing ones.\"]}),`\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:\"Operation\"}),(0,n.jsx)(e.th,{children:\"Traditional\"}),(0,n.jsx)(e.th,{children:\"Spread\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Array cloning\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"arr.slice()\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"[...arr]\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Array merging\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"arr1.concat(arr2)\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"[...arr1, ...arr2]\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Object cloning\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"Object.assign({}, obj)\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"{ ...obj }\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Object merging\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"Object.assign({}, obj1, obj2)\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"{ ...obj1, ...obj2 }\"})})]})]})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Rest syntax\"}),\" is the opposite of what spread syntax does. It collects a variable number of arguments into an array. This is often used in function parameters to handle a dynamic number of arguments.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Using rest syntax in a function\nfunction sum(...numbers) {\n  return numbers.reduce((total, num) => total + num, 0);\n}\n\nconsole.log(sum(1, 2, 3)); // Output: 6\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Spread syntax\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"ES2015's spread syntax is very useful when coding in a functional paradigm as we can easily create copies of / merge arrays or objects without resorting to \",(0,n.jsx)(e.code,{children:\"Object.create\"}),\", \",(0,n.jsx)(e.code,{children:\"Object.assign\"}),\", \",(0,n.jsx)(e.code,{children:\"Array.prototype.slice\"}),\", or a library function. This language feature is used often in Redux and RxJS projects.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Copying arrays/objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"The spread syntax provides a concise way to create copies of arrays or objects without modifying the originals. This is useful for creating immutable data structures. However do note that arrays copied via the spread operator are shallowly-copied.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Copying arrays\nconst array = [1, 2, 3];\nconst newArray = [...array];\nconsole.log(newArray); // Output: [1, 2, 3]\n\n// Copying objects\nconst person = { name: 'John', age: 30 };\nconst newObj = { ...person, city: 'New York' };\nconsole.log(newObj); // Output: { name: 'John', age: 30, city: 'New York' }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Merging arrays/objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"The spread syntax allows you to merge arrays or objects by spreading their elements/properties into a new array or object.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Merging arrays\nconst arr1 = [1, 2, 3];\nconst arr2 = [4, 5, 6];\nconst mergedArray = [...arr1, ...arr2];\nconsole.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]\n\n// Merging objects\nconst obj1 = {\n  foo: 'bar',\n};\n\nconst obj2 = {\n  qux: 'baz',\n};\n\nconst mergedObj = { ...obj1, ...obj2 };\nconsole.log(mergedObj); // Output: { foo: \"bar\", qux: \"baz\" }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Passing arguments to functions\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Use the spread syntax to pass an array of values as individual arguments to a function, avoiding the need for \",(0,n.jsx)(e.code,{children:\"apply()\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const numbers = [1, 2, 3];\nconst max = Math.max(...numbers); // Same as Math.max(1, 2, 3)\nconsole.log(max); // Output: 3\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Array vs object spreads\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Only iterable values like \",(0,n.jsx)(e.code,{children:\"Array\"}),\"s and \",(0,n.jsx)(e.code,{children:\"String\"}),\"s can be spread in an array. Trying to spread non-iterables will result in a \",(0,n.jsx)(e.code,{children:\"TypeError\"}),\".\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Spreading object into array:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  name: 'Todd',\n  age: 29,\n};\nconst array = [...person]; // Error: Uncaught TypeError: person is not iterable\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"On the other hand, arrays can be spread into objects.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3];\nconst obj = { ...array };\nconsole.log(obj); // { 0: 1, 1: 2, 2: 3 }\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Rest syntax\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The rest syntax (\",(0,n.jsx)(e.code,{children:\"...\"}),\") in JavaScript allows you to represent an indefinite number of elements as an array or object. It is like an inverse of the spread syntax, taking data and stuffing it into an array rather than unpacking an array of data, and it works in function arguments, as well as in array and object destructuring assignments.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Rest parameters in functions\"}),`\n`,(0,n.jsx)(e.p,{children:\"The rest syntax can be used in function parameters to collect all remaining arguments into an array. This is particularly useful when you don't know how many arguments will be passed to the function.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function addFiveToABunchOfNumbers(...numbers) {\n  return numbers.map((x) => x + 5);\n}\n\nconst result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10);\nconsole.log(result); // Output: [9, 10, 11, 12, 13, 14, 15]\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Provides a cleaner syntax than using the \",(0,n.jsx)(e.code,{children:\"arguments\"}),\" object, which is unsupported for arrow functions and represents \",(0,n.jsx)(e.strong,{children:\"all\"}),\" arguments whereas the usage of the rest syntax below allows \",(0,n.jsx)(e.code,{children:\"remaining\"}),\" to represent the 3rd argument and beyond.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const [first, second, ...remaining] = [1, 2, 3, 4, 5];\nconsole.log(first); // Output: 1\nconsole.log(second); // Output: 2\nconsole.log(remaining); // Output: [3, 4, 5]\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Note that the rest parameters must be at the end. The rest parameters gather all remaining arguments, so the following does not make sense and causes an error:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function addFiveToABunchOfNumbers(arg1, ...numbers, arg2) {\n  // Error: Rest parameter must be last formal parameter.\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Array destructuring\"}),`\n`,(0,n.jsx)(e.p,{children:\"The rest syntax can be used in array destructuring to collect the remaining elements into a new array.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const [a, b, ...rest] = [1, 2, 3, 4];\nconsole.log(a); // Output: 1\nconsole.log(b); // Output: 2\nconsole.log(rest); // Output: [3, 4]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Object destructuring\"}),`\n`,(0,n.jsx)(e.p,{children:\"The rest syntax can be used in object destructuring to collect the remaining properties into a new object.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const { e, f, ...others } = {\n  e: 1,\n  f: 2,\n  g: 3,\n  h: 4,\n};\nconsole.log(e); // Output: 1\nconsole.log(f); // Output: 2\nconsole.log(others); // Output: { g: 3, h: 4 }\n`})}),`\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/Web/JavaScript/Reference/Operators/Spread_syntax\",children:\"Spread syntax | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters\",children:\"Rest parameters | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/rest-parameters-spread\",children:\"Rest parameters and spread syntax | JavaScript.info\"})}),`\n`]})]})}function w(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(d,r)})):d(r)}var v=w;return j(O);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var b=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var t in e)s(r,t,{get:e[t],enumerable:!0})},i=(r,e,t,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of g(e))!y.call(r,a)&&a!==t&&s(r,a,{get:()=>e[a],enumerable:!(o=p(e,a))||o.enumerable});return r};var j=(r,e,t)=>(t=r!=null?u(m(r)):{},i(e||!r||!r.__esModule?s(t,\"default\",{value:r,enumerable:!0}):t,r)),x=r=>i(s({},\"__esModule\",{value:!0}),r);var l=b((T,c)=>{c.exports=_jsx_runtime});var v={};f(v,{default:()=>h,frontmatter:()=>w});var n=j(l()),w={title:\"What are the benefits of using spread syntax in JavaScript and how is it different from rest syntax?\"};function d(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Spread syntax\"}),\" (\",(0,n.jsx)(e.code,{children:\"...\"}),\") allows an iterable (like an array or string) to be expanded into individual elements. This is often used as a convenient and modern way to create new arrays or objects by combining existing ones.\"]}),`\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:\"Operation\"}),(0,n.jsx)(e.th,{children:\"Traditional\"}),(0,n.jsx)(e.th,{children:\"Spread\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Array cloning\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"arr.slice()\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"[...arr]\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Array merging\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"arr1.concat(arr2)\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"[...arr1, ...arr2]\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Object cloning\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"Object.assign({}, obj)\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"{ ...obj }\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Object merging\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"Object.assign({}, obj1, obj2)\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"{ ...obj1, ...obj2 }\"})})]})]})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Rest syntax\"}),\" is the opposite of what spread syntax does. It collects a variable number of arguments into an array. This is often used in function parameters to handle a dynamic number of arguments.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Using rest syntax in a function\nfunction sum(...numbers) {\n  return numbers.reduce((total, num) => total + num, 0);\n}\n\nconsole.log(sum(1, 2, 3)); // Output: 6\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Spread syntax\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"ES2015's spread syntax is very useful when coding in a functional paradigm as we can easily create copies of / merge arrays or objects without resorting to \",(0,n.jsx)(e.code,{children:\"Object.create\"}),\", \",(0,n.jsx)(e.code,{children:\"Object.assign\"}),\", \",(0,n.jsx)(e.code,{children:\"Array.prototype.slice\"}),\", or a library function. This language feature is used often in Redux and RxJS projects.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Copying arrays/objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"The spread syntax provides a concise way to create copies of arrays or objects without modifying the originals. This is useful for creating immutable data structures. However do note that arrays copied via the spread operator are shallowly-copied.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Copying arrays\nconst array = [1, 2, 3];\nconst newArray = [...array];\nconsole.log(newArray); // Output: [1, 2, 3]\n\n// Copying objects\nconst person = { name: 'John', age: 30 };\nconst newObj = { ...person, city: 'New York' };\nconsole.log(newObj); // Output: { name: 'John', age: 30, city: 'New York' }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Merging arrays/objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"The spread syntax allows you to merge arrays or objects by spreading their elements/properties into a new array or object.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Merging arrays\nconst arr1 = [1, 2, 3];\nconst arr2 = [4, 5, 6];\nconst mergedArray = [...arr1, ...arr2];\nconsole.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]\n\n// Merging objects\nconst obj1 = {\n  foo: 'bar',\n};\n\nconst obj2 = {\n  qux: 'baz',\n};\n\nconst mergedObj = { ...obj1, ...obj2 };\nconsole.log(mergedObj); // Output: { foo: \"bar\", qux: \"baz\" }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Passing arguments to functions\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Use the spread syntax to pass an array of values as individual arguments to a function, avoiding the need for \",(0,n.jsx)(e.code,{children:\"apply()\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const numbers = [1, 2, 3];\nconst max = Math.max(...numbers); // Same as Math.max(1, 2, 3)\nconsole.log(max); // Output: 3\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Array vs object spreads\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Only iterable values like \",(0,n.jsx)(e.code,{children:\"Array\"}),\"s and \",(0,n.jsx)(e.code,{children:\"String\"}),\"s can be spread in an array. Trying to spread non-iterables will result in a \",(0,n.jsx)(e.code,{children:\"TypeError\"}),\".\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Spreading object into array:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  name: 'Todd',\n  age: 29,\n};\nconst array = [...person]; // Error: Uncaught TypeError: person is not iterable\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"On the other hand, arrays can be spread into objects.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3];\nconst obj = { ...array };\nconsole.log(obj); // { 0: 1, 1: 2, 2: 3 }\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Rest syntax\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The rest syntax (\",(0,n.jsx)(e.code,{children:\"...\"}),\") in JavaScript allows you to represent an indefinite number of elements as an array or object. It is like an inverse of the spread syntax, taking data and stuffing it into an array rather than unpacking an array of data, and it works in function arguments, as well as in array and object destructuring assignments.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Rest parameters in functions\"}),`\n`,(0,n.jsx)(e.p,{children:\"The rest syntax can be used in function parameters to collect all remaining arguments into an array. This is particularly useful when you don't know how many arguments will be passed to the function.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function addFiveToABunchOfNumbers(...numbers) {\n  return numbers.map((x) => x + 5);\n}\n\nconst result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10);\nconsole.log(result); // Output: [9, 10, 11, 12, 13, 14, 15]\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Provides a cleaner syntax than using the \",(0,n.jsx)(e.code,{children:\"arguments\"}),\" object, which is unsupported for arrow functions and represents \",(0,n.jsx)(e.strong,{children:\"all\"}),\" arguments whereas the usage of the rest syntax below allows \",(0,n.jsx)(e.code,{children:\"remaining\"}),\" to represent the 3rd argument and beyond.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const [first, second, ...remaining] = [1, 2, 3, 4, 5];\nconsole.log(first); // Output: 1\nconsole.log(second); // Output: 2\nconsole.log(remaining); // Output: [3, 4, 5]\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Note that the rest parameters must be at the end. The rest parameters gather all remaining arguments, so the following does not make sense and causes an error:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function addFiveToABunchOfNumbers(arg1, ...numbers, arg2) {\n  // Error: Rest parameter must be last formal parameter.\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Array destructuring\"}),`\n`,(0,n.jsx)(e.p,{children:\"The rest syntax can be used in array destructuring to collect the remaining elements into a new array.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const [a, b, ...rest] = [1, 2, 3, 4];\nconsole.log(a); // Output: 1\nconsole.log(b); // Output: 2\nconsole.log(rest); // Output: [3, 4]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Object destructuring\"}),`\n`,(0,n.jsx)(e.p,{children:\"The rest syntax can be used in object destructuring to collect the remaining properties into a new object.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const { e, f, ...others } = {\n  e: 1,\n  f: 2,\n  g: 3,\n  h: 4,\n};\nconsole.log(e); // Output: 1\nconsole.log(f); // Output: 2\nconsole.log(others); // Output: { g: 3, h: 4 }\n`})}),`\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/Web/JavaScript/Reference/Operators/Spread_syntax\",children:\"Spread syntax | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters\",children:\"Rest parameters | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/rest-parameters-spread\",children:\"Rest parameters and spread syntax | JavaScript.info\"})}),`\n`]})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(d,{...r})}):d(r)}return x(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/pt-BR.json
index 259dedf5c..5e9e0acbc 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var r in e)s(n,r,{get:e[r],enumerable:!0})},d=(n,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!g.call(n,a)&&a!==r&&s(n,a,{get:()=>e[a],enumerable:!(t=l(e,a))||t.enumerable});return n};var h=(n,e,r)=>(r=n!=null?m(f(n)):{},d(e||!n||!n.__esModule?s(r,\"default\",{value:n,enumerable:!0}):r,n)),j=n=>d(s({},\"__esModule\",{value:!0}),n);var i=x((v,c)=>{c.exports=_jsx_runtime});var k={};b(k,{default:()=>_,frontmatter:()=>y});var o=h(i()),y={title:\"Quais s\\xE3o os benef\\xEDcios de usar a sintaxe de spread e como ela \\xE9 diferente da sintaxe de rest?\"};function u(n){let e=Object.assign({p:\"p\",code:\"code\",pre:\"pre\"},n.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"A sintaxe spread do ES2015 \\xE9 muito \\xFAtil quando programando em um paradigma funcional, pois podemos facilmente criar c\\xF3pias de arrays ou objetos sem recorrer a \",(0,o.jsx)(e.code,{children:\"Object.create\"}),\", \",(0,o.jsx)(e.code,{children:\"slice\"}),\", ou uma fun\\xE7\\xE3o de biblioteca. Esse recurso de linguagem \\xE9 frequentemente utilizado em projetos Redux e RxJS.\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`function putDookieInAnyArray(arr) {\n  return [...arr, 'dookie'];\n}\n\nconst result = putDookieInAnyArray(['I', 'really', \"don't\", 'like']); // [\"I\", \"really\", \"don't\", \"like\", \"dookie\"]\n\nconst person = {\n  name: 'Todd',\n  age: 29,\n};\n\nconst copyOfTodd = { ...person };\n`})}),`\n`,(0,o.jsx)(e.p,{children:\"A sintaxe rest do ES2015 oferece uma maneira mais f\\xE1cil de incluir um n\\xFAmero arbitr\\xE1rio de argumentos para serem passados para uma fun\\xE7\\xE3o. \\xC9 como uma invers\\xE3o da sintaxe spread, pegando dados e colocando-os em um array em vez de desempacotar um array de dados, e funciona em argumentos de fun\\xE7\\xE3o, bem como em atribui\\xE7\\xF5es de desconstru\\xE7\\xE3o de arrays e objetos.\"}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`function addFiveToABunchOfNumbers(...numbers) {\n  return numbers.map((x) => x + 5);\n}\n\nconst result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15]\n\nconst [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]\n\nconst { e, f, ...others } = {\n  e: 1,\n  f: 2,\n  g: 3,\n  h: 4,\n}; // e: 1, f: 2, others: { g: 3, h: 4 }\n`})})]})}function A(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(u,n)})):u(n)}var _=A;return j(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var l=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var h=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var r in e)s(n,r,{get:e[r],enumerable:!0})},d=(n,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of f(e))!g.call(n,a)&&a!==r&&s(n,a,{get:()=>e[a],enumerable:!(t=p(e,a))||t.enumerable});return n};var y=(n,e,r)=>(r=n!=null?l(x(n)):{},d(e||!n||!n.__esModule?s(r,\"default\",{value:n,enumerable:!0}):r,n)),j=n=>d(s({},\"__esModule\",{value:!0}),n);var i=h((v,c)=>{c.exports=_jsx_runtime});var _={};b(_,{default:()=>m,frontmatter:()=>A});var o=y(i()),A={title:\"Quais s\\xE3o os benef\\xEDcios de usar a sintaxe de spread e como ela \\xE9 diferente da sintaxe de rest?\"};function u(n){let e={code:\"code\",p:\"p\",pre:\"pre\",...n.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"A sintaxe spread do ES2015 \\xE9 muito \\xFAtil quando programando em um paradigma funcional, pois podemos facilmente criar c\\xF3pias de arrays ou objetos sem recorrer a \",(0,o.jsx)(e.code,{children:\"Object.create\"}),\", \",(0,o.jsx)(e.code,{children:\"slice\"}),\", ou uma fun\\xE7\\xE3o de biblioteca. Esse recurso de linguagem \\xE9 frequentemente utilizado em projetos Redux e RxJS.\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`function putDookieInAnyArray(arr) {\n  return [...arr, 'dookie'];\n}\n\nconst result = putDookieInAnyArray(['I', 'really', \"don't\", 'like']); // [\"I\", \"really\", \"don't\", \"like\", \"dookie\"]\n\nconst person = {\n  name: 'Todd',\n  age: 29,\n};\n\nconst copyOfTodd = { ...person };\n`})}),`\n`,(0,o.jsx)(e.p,{children:\"A sintaxe rest do ES2015 oferece uma maneira mais f\\xE1cil de incluir um n\\xFAmero arbitr\\xE1rio de argumentos para serem passados para uma fun\\xE7\\xE3o. \\xC9 como uma invers\\xE3o da sintaxe spread, pegando dados e colocando-os em um array em vez de desempacotar um array de dados, e funciona em argumentos de fun\\xE7\\xE3o, bem como em atribui\\xE7\\xF5es de desconstru\\xE7\\xE3o de arrays e objetos.\"}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`function addFiveToABunchOfNumbers(...numbers) {\n  return numbers.map((x) => x + 5);\n}\n\nconst result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15]\n\nconst [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]\n\nconst { e, f, ...others } = {\n  e: 1,\n  f: 2,\n  g: 3,\n  h: 4,\n}; // e: 1, f: 2, others: { g: 3, h: 4 }\n`})})]})}function m(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(u,{...n})}):u(n)}return j(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/zh-CN.json
index 38d2c2fb1..e73e967a1 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var b=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),j=(r,e)=>{for(var c in e)l(r,c,{get:e[c],enumerable:!0})},d=(r,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of p(e))!m.call(r,t)&&t!==c&&l(r,t,{get:()=>e[t],enumerable:!(o=u(e,t))||o.enumerable});return r};var O=(r,e,c)=>(c=r!=null?h(g(r)):{},d(e||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),f=r=>d(l({},\"__esModule\",{value:!0}),r);var a=b((S,s)=>{s.exports=_jsx_runtime});var N={};j(N,{default:()=>x,frontmatter:()=>y});var n=O(a()),y={title:\"JavaScript \\u4E2D\\u4F7F\\u7528\\u5C55\\u5F00\\u8BED\\u6CD5\\u6709\\u4EC0\\u4E48\\u597D\\u5904\\uFF1F\\u5B83\\u4E0E rest \\u8BED\\u6CD5\\u6709\\u4F55\\u4E0D\\u540C\\uFF1F\"};function i(r){let e=Object.assign({h2:\"h2\",p:\"p\",strong:\"strong\",code:\"code\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u5C55\\u5F00\\u8BED\\u6CD5\"}),\" (\",(0,n.jsx)(e.code,{children:\"...\"}),\") \\u5141\\u8BB8\\u5C06\\u53EF\\u8FED\\u4EE3\\u5BF9\\u8C61\\uFF08\\u5982\\u6570\\u7EC4\\u6216\\u5B57\\u7B26\\u4E32\\uFF09\\u6269\\u5C55\\u4E3A\\u5355\\u4E2A\\u5143\\u7D20\\u3002\\u8FD9\\u901A\\u5E38\\u88AB\\u7528\\u4F5C\\u4E00\\u79CD\\u65B9\\u4FBF\\u4E14\\u73B0\\u4EE3\\u7684\\u65B9\\u5F0F\\uFF0C\\u901A\\u8FC7\\u7EC4\\u5408\\u73B0\\u6709\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\u6765\\u521B\\u5EFA\\u65B0\\u7684\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\u3002\"]}),`\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:\"\\u64CD\\u4F5C\"}),(0,n.jsx)(e.th,{children:\"\\u4F20\\u7EDF\\u65B9\\u5F0F\"}),(0,n.jsx)(e.th,{children:\"\\u5C55\\u5F00\\u8BED\\u6CD5\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u6570\\u7EC4\\u514B\\u9686\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"arr.slice()\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"[...arr]\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u6570\\u7EC4\\u5408\\u5E76\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"arr1.concat(arr2)\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"[...arr1, ...arr2]\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u5BF9\\u8C61\\u514B\\u9686\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"Object.assign({}, obj)\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"{ ...obj }\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u5BF9\\u8C61\\u5408\\u5E76\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"Object.assign({}, obj1, obj2)\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"{ ...obj1, ...obj2 }\"})})]})]})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Rest \\u8BED\\u6CD5\"}),\"\\u4E0E\\u5C55\\u5F00\\u8BED\\u6CD5\\u7684\\u4F5C\\u7528\\u76F8\\u53CD\\u3002\\u5B83\\u5C06\\u53EF\\u53D8\\u6570\\u91CF\\u7684\\u53C2\\u6570\\u6536\\u96C6\\u5230\\u4E00\\u4E2A\\u6570\\u7EC4\\u4E2D\\u3002\\u8FD9\\u901A\\u5E38\\u7528\\u4E8E\\u51FD\\u6570\\u53C2\\u6570\\u4E2D\\uFF0C\\u4EE5\\u5904\\u7406\\u52A8\\u6001\\u6570\\u91CF\\u7684\\u53C2\\u6570\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Using rest syntax in a function\nfunction sum(...numbers) {\n  return numbers.reduce((total, num) => total + num, 0);\n}\n\nconsole.log(sum(1, 2, 3)); // Output: 6\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5C55\\u5F00\\u8BED\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"ES2015 \\u7684\\u5C55\\u5F00\\u8BED\\u6CD5\\u5728\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\\u8303\\u5F0F\\u4E2D\\u975E\\u5E38\\u6709\\u7528\\uFF0C\\u56E0\\u4E3A\\u6211\\u4EEC\\u53EF\\u4EE5\\u8F7B\\u677E\\u5730\\u521B\\u5EFA\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\u7684\\u526F\\u672C/\\u5408\\u5E76\\uFF0C\\u800C\\u65E0\\u9700\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.create\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"Object.assign\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"Array.prototype.slice\"}),\" \\u6216\\u5E93\\u51FD\\u6570\\u3002\\u6B64\\u8BED\\u8A00\\u7279\\u6027\\u7ECF\\u5E38\\u7528\\u4E8E Redux \\u548C RxJS \\u9879\\u76EE\\u4E2D\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u590D\\u5236\\u6570\\u7EC4/\\u5BF9\\u8C61\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5C55\\u5F00\\u8BED\\u6CD5\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u7B80\\u6D01\\u7684\\u65B9\\u5F0F\\u6765\\u521B\\u5EFA\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\u7684\\u526F\\u672C\\uFF0C\\u800C\\u65E0\\u9700\\u4FEE\\u6539\\u539F\\u59CB\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\u3002\\u8FD9\\u5BF9\\u4E8E\\u521B\\u5EFA\\u4E0D\\u53EF\\u53D8\\u6570\\u636E\\u7ED3\\u6784\\u5F88\\u6709\\u7528\\u3002\\u4F46\\u662F\\u8BF7\\u6CE8\\u610F\\uFF0C\\u901A\\u8FC7\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u590D\\u5236\\u7684\\u6570\\u7EC4\\u662F\\u6D45\\u62F7\\u8D1D\\u7684\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Copying arrays\nconst array = [1, 2, 3];\nconst newArray = [...array];\nconsole.log(newArray); // Output: [1, 2, 3]\n\n// Copying objects\nconst person = { name: 'John', age: 30 };\nconst newObj = { ...person, city: 'New York' };\nconsole.log(newObj); // Output: { name: 'John', age: 30, city: 'New York' }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5408\\u5E76\\u6570\\u7EC4/\\u5BF9\\u8C61\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5C55\\u5F00\\u8BED\\u6CD5\\u5141\\u8BB8\\u60A8\\u901A\\u8FC7\\u5C06\\u5176\\u5143\\u7D20/\\u5C5E\\u6027\\u5C55\\u5F00\\u5230\\u65B0\\u7684\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\u4E2D\\u6765\\u5408\\u5E76\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Merging arrays\nconst arr1 = [1, 2, 3];\nconst arr2 = [4, 5, 6];\nconst mergedArray = [...arr1, ...arr2];\nconsole.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]\n\n// Merging objects\nconst obj1 = {\n  foo: 'bar',\n};\n\nconst obj2 = {\n  qux: 'baz',\n};\n\nconst mergedObj = { ...obj1, ...obj2 };\nconsole.log(mergedObj); // Output: { foo: \"bar\", qux: \"baz\" }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5C06\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u51FD\\u6570\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528\\u5C55\\u5F00\\u8BED\\u6CD5\\u5C06\\u503C\\u6570\\u7EC4\\u4F5C\\u4E3A\\u5355\\u4E2A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u51FD\\u6570\\uFF0C\\u907F\\u514D\\u4E86\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"apply()\"}),\" \\u7684\\u9700\\u8981\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const numbers = [1, 2, 3];\nconst max = Math.max(...numbers); // Same as Math.max(1, 2, 3)\nconsole.log(max); // Output: 3\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6570\\u7EC4\\u4E0E\\u5BF9\\u8C61\\u5C55\\u5F00\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u53EA\\u6709\\u53EF\\u8FED\\u4EE3\\u7684\\u503C\\uFF08\\u5982 \",(0,n.jsx)(e.code,{children:\"Array\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"String\"}),\"\\uFF09\\u624D\\u53EF\\u4EE5\\u5728\\u6570\\u7EC4\\u4E2D\\u5C55\\u5F00\\u3002\\u5C1D\\u8BD5\\u5C55\\u5F00\\u4E0D\\u53EF\\u8FED\\u4EE3\\u7684\\u503C\\u5C06\\u5BFC\\u81F4 \",(0,n.jsx)(e.code,{children:\"TypeError\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5C06\\u5BF9\\u8C61\\u5C55\\u5F00\\u5230\\u6570\\u7EC4\\u4E2D\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  name: 'Todd',\n  age: 29,\n};\nconst array = [...person]; // Error: Uncaught TypeError: person is not iterable\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\\u6570\\u7EC4\\u53EF\\u4EE5\\u5C55\\u5F00\\u5230\\u5BF9\\u8C61\\u4E2D\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3];\nconst obj = { ...array };\nconsole.log(obj); // { 0: 1, 1: 2, 2: 3 }\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Rest \\u8BED\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684 rest \\u8BED\\u6CD5 (\",(0,n.jsx)(e.code,{children:\"...\"}),\") \\u5141\\u8BB8\\u4F60\\u5C06\\u4E0D\\u5B9A\\u6570\\u91CF\\u7684\\u5143\\u7D20\\u8868\\u793A\\u4E3A\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\u3002\\u5B83\\u5C31\\u50CF\\u5C55\\u5F00\\u8BED\\u6CD5\\u7684\\u9006\\u5411\\u64CD\\u4F5C\\uFF0C\\u83B7\\u53D6\\u6570\\u636E\\u5E76\\u5C06\\u5176\\u653E\\u5165\\u6570\\u7EC4\\u4E2D\\uFF0C\\u800C\\u4E0D\\u662F\\u89E3\\u5305\\u6570\\u7EC4\\u4E2D\\u7684\\u6570\\u636E\\uFF0C\\u5B83\\u9002\\u7528\\u4E8E\\u51FD\\u6570\\u53C2\\u6570\\u4EE5\\u53CA\\u6570\\u7EC4\\u548C\\u5BF9\\u8C61\\u89E3\\u6784\\u8D4B\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u51FD\\u6570\\u4E2D\\u7684 Rest \\u53C2\\u6570\"}),`\n`,(0,n.jsx)(e.p,{children:\"Rest \\u8BED\\u6CD5\\u53EF\\u7528\\u4E8E\\u51FD\\u6570\\u53C2\\u6570\\u4E2D\\uFF0C\\u5C06\\u6240\\u6709\\u5269\\u4F59\\u7684\\u53C2\\u6570\\u6536\\u96C6\\u5230\\u4E00\\u4E2A\\u6570\\u7EC4\\u4E2D\\u3002\\u5F53\\u4F60\\u4E0D\\u77E5\\u9053\\u5C06\\u5411\\u51FD\\u6570\\u4F20\\u9012\\u591A\\u5C11\\u4E2A\\u53C2\\u6570\\u65F6\\uFF0C\\u8FD9\\u7279\\u522B\\u6709\\u7528\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function addFiveToABunchOfNumbers(...numbers) {\n  return numbers.map((x) => x + 5);\n}\n\nconst result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10);\nconsole.log(result); // Output: [9, 10, 11, 12, 13, 14, 15]\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E0E\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"arguments\"}),\" \\u5BF9\\u8C61\\u76F8\\u6BD4\\uFF0C\\u5B83\\u63D0\\u4F9B\\u4E86\\u66F4\\u7B80\\u6D01\\u7684\\u8BED\\u6CD5\\uFF0C\",(0,n.jsx)(e.code,{children:\"arguments\"}),\" \\u5BF9\\u8C61\\u5728\\u7BAD\\u5934\\u51FD\\u6570\\u4E2D\\u4E0D\\u53D7\\u652F\\u6301\\uFF0C\\u5E76\\u4E14\\u8868\\u793A \",(0,n.jsx)(e.strong,{children:\"\\u6240\\u6709\"}),\" \\u53C2\\u6570\\uFF0C\\u800C\\u4E0B\\u9762 rest \\u8BED\\u6CD5\\u7684\\u7528\\u6CD5\\u5141\\u8BB8 \",(0,n.jsx)(e.code,{children:\"remaining\"}),\" \\u8868\\u793A\\u7B2C\\u4E09\\u4E2A\\u53C2\\u6570\\u53CA\\u4E4B\\u540E\\u7684\\u53C2\\u6570\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const [first, second, ...remaining] = [1, 2, 3, 4, 5];\nconsole.log(first); // Output: 1\nconsole.log(second); // Output: 2\nconsole.log(remaining); // Output: [3, 4, 5]\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8BF7\\u6CE8\\u610F\\uFF0Crest \\u53C2\\u6570\\u5FC5\\u987B\\u4F4D\\u4E8E\\u672B\\u5C3E\\u3002rest \\u53C2\\u6570\\u4F1A\\u6536\\u96C6\\u6240\\u6709\\u5269\\u4F59\\u7684\\u53C2\\u6570\\uFF0C\\u56E0\\u6B64\\u4EE5\\u4E0B\\u64CD\\u4F5C\\u6CA1\\u6709\\u610F\\u4E49\\uFF0C\\u5E76\\u4E14\\u4F1A\\u5BFC\\u81F4\\u9519\\u8BEF\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function addFiveToABunchOfNumbers(arg1, ...numbers, arg2) {\n  // Error: Rest parameter must be last formal parameter.\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6570\\u7EC4\\u89E3\\u6784\"}),`\n`,(0,n.jsx)(e.p,{children:\"Rest \\u8BED\\u6CD5\\u53EF\\u7528\\u4E8E\\u6570\\u7EC4\\u89E3\\u6784\\uFF0C\\u5C06\\u5269\\u4F59\\u7684\\u5143\\u7D20\\u6536\\u96C6\\u5230\\u4E00\\u4E2A\\u65B0\\u6570\\u7EC4\\u4E2D\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const [a, b, ...rest] = [1, 2, 3, 4];\nconsole.log(a); // Output: 1\nconsole.log(b); // Output: 2\nconsole.log(rest); // Output: [3, 4]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5BF9\\u8C61\\u89E3\\u6784\"}),`\n`,(0,n.jsx)(e.p,{children:\"Rest \\u8BED\\u6CD5\\u53EF\\u7528\\u4E8E\\u5BF9\\u8C61\\u89E3\\u6784\\uFF0C\\u5C06\\u5269\\u4F59\\u7684\\u5C5E\\u6027\\u6536\\u96C6\\u5230\\u4E00\\u4E2A\\u65B0\\u5BF9\\u8C61\\u4E2D\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const { e, f, ...others } = {\n  e: 1,\n  f: 2,\n  g: 3,\n  h: 4,\n};\nconsole.log(e); // Output: 1\nconsole.log(f); // Output: 2\nconsole.log(others); // Output: { g: 3, h: 4 }\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax\",children:\"\\u5C55\\u5F00\\u8BED\\u6CD5 | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/rest_parameters\",children:\"Rest \\u53C2\\u6570 | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://zh.javascript.info/rest-parameters-spread\",children:\"Rest \\u53C2\\u6570\\u548C\\u5C55\\u5F00\\u8BED\\u6CD5 | JavaScript.info\"})}),`\n`]})]})}function v(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(i,r)})):i(r)}var x=v;return f(N);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var j=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),O=(r,e)=>{for(var c in e)l(r,c,{get:e[c],enumerable:!0})},d=(r,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of g(e))!b.call(r,t)&&t!==c&&l(r,t,{get:()=>e[t],enumerable:!(o=p(e,t))||o.enumerable});return r};var f=(r,e,c)=>(c=r!=null?u(m(r)):{},d(e||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),y=r=>d(l({},\"__esModule\",{value:!0}),r);var i=j((R,a)=>{a.exports=_jsx_runtime});var x={};O(x,{default:()=>h,frontmatter:()=>v});var n=f(i()),v={title:\"JavaScript \\u4E2D\\u4F7F\\u7528\\u5C55\\u5F00\\u8BED\\u6CD5\\u6709\\u4EC0\\u4E48\\u597D\\u5904\\uFF1F\\u5B83\\u4E0E rest \\u8BED\\u6CD5\\u6709\\u4F55\\u4E0D\\u540C\\uFF1F\"};function s(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u5C55\\u5F00\\u8BED\\u6CD5\"}),\" (\",(0,n.jsx)(e.code,{children:\"...\"}),\") \\u5141\\u8BB8\\u5C06\\u53EF\\u8FED\\u4EE3\\u5BF9\\u8C61\\uFF08\\u5982\\u6570\\u7EC4\\u6216\\u5B57\\u7B26\\u4E32\\uFF09\\u6269\\u5C55\\u4E3A\\u5355\\u4E2A\\u5143\\u7D20\\u3002\\u8FD9\\u901A\\u5E38\\u88AB\\u7528\\u4F5C\\u4E00\\u79CD\\u65B9\\u4FBF\\u4E14\\u73B0\\u4EE3\\u7684\\u65B9\\u5F0F\\uFF0C\\u901A\\u8FC7\\u7EC4\\u5408\\u73B0\\u6709\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\u6765\\u521B\\u5EFA\\u65B0\\u7684\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\u3002\"]}),`\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:\"\\u64CD\\u4F5C\"}),(0,n.jsx)(e.th,{children:\"\\u4F20\\u7EDF\\u65B9\\u5F0F\"}),(0,n.jsx)(e.th,{children:\"\\u5C55\\u5F00\\u8BED\\u6CD5\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u6570\\u7EC4\\u514B\\u9686\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"arr.slice()\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"[...arr]\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u6570\\u7EC4\\u5408\\u5E76\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"arr1.concat(arr2)\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"[...arr1, ...arr2]\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u5BF9\\u8C61\\u514B\\u9686\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"Object.assign({}, obj)\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"{ ...obj }\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u5BF9\\u8C61\\u5408\\u5E76\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"Object.assign({}, obj1, obj2)\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"{ ...obj1, ...obj2 }\"})})]})]})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Rest \\u8BED\\u6CD5\"}),\"\\u4E0E\\u5C55\\u5F00\\u8BED\\u6CD5\\u7684\\u4F5C\\u7528\\u76F8\\u53CD\\u3002\\u5B83\\u5C06\\u53EF\\u53D8\\u6570\\u91CF\\u7684\\u53C2\\u6570\\u6536\\u96C6\\u5230\\u4E00\\u4E2A\\u6570\\u7EC4\\u4E2D\\u3002\\u8FD9\\u901A\\u5E38\\u7528\\u4E8E\\u51FD\\u6570\\u53C2\\u6570\\u4E2D\\uFF0C\\u4EE5\\u5904\\u7406\\u52A8\\u6001\\u6570\\u91CF\\u7684\\u53C2\\u6570\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Using rest syntax in a function\nfunction sum(...numbers) {\n  return numbers.reduce((total, num) => total + num, 0);\n}\n\nconsole.log(sum(1, 2, 3)); // Output: 6\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5C55\\u5F00\\u8BED\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"ES2015 \\u7684\\u5C55\\u5F00\\u8BED\\u6CD5\\u5728\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\\u8303\\u5F0F\\u4E2D\\u975E\\u5E38\\u6709\\u7528\\uFF0C\\u56E0\\u4E3A\\u6211\\u4EEC\\u53EF\\u4EE5\\u8F7B\\u677E\\u5730\\u521B\\u5EFA\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\u7684\\u526F\\u672C/\\u5408\\u5E76\\uFF0C\\u800C\\u65E0\\u9700\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.create\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"Object.assign\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"Array.prototype.slice\"}),\" \\u6216\\u5E93\\u51FD\\u6570\\u3002\\u6B64\\u8BED\\u8A00\\u7279\\u6027\\u7ECF\\u5E38\\u7528\\u4E8E Redux \\u548C RxJS \\u9879\\u76EE\\u4E2D\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u590D\\u5236\\u6570\\u7EC4/\\u5BF9\\u8C61\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5C55\\u5F00\\u8BED\\u6CD5\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u7B80\\u6D01\\u7684\\u65B9\\u5F0F\\u6765\\u521B\\u5EFA\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\u7684\\u526F\\u672C\\uFF0C\\u800C\\u65E0\\u9700\\u4FEE\\u6539\\u539F\\u59CB\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\u3002\\u8FD9\\u5BF9\\u4E8E\\u521B\\u5EFA\\u4E0D\\u53EF\\u53D8\\u6570\\u636E\\u7ED3\\u6784\\u5F88\\u6709\\u7528\\u3002\\u4F46\\u662F\\u8BF7\\u6CE8\\u610F\\uFF0C\\u901A\\u8FC7\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u590D\\u5236\\u7684\\u6570\\u7EC4\\u662F\\u6D45\\u62F7\\u8D1D\\u7684\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Copying arrays\nconst array = [1, 2, 3];\nconst newArray = [...array];\nconsole.log(newArray); // Output: [1, 2, 3]\n\n// Copying objects\nconst person = { name: 'John', age: 30 };\nconst newObj = { ...person, city: 'New York' };\nconsole.log(newObj); // Output: { name: 'John', age: 30, city: 'New York' }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5408\\u5E76\\u6570\\u7EC4/\\u5BF9\\u8C61\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5C55\\u5F00\\u8BED\\u6CD5\\u5141\\u8BB8\\u60A8\\u901A\\u8FC7\\u5C06\\u5176\\u5143\\u7D20/\\u5C5E\\u6027\\u5C55\\u5F00\\u5230\\u65B0\\u7684\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\u4E2D\\u6765\\u5408\\u5E76\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Merging arrays\nconst arr1 = [1, 2, 3];\nconst arr2 = [4, 5, 6];\nconst mergedArray = [...arr1, ...arr2];\nconsole.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]\n\n// Merging objects\nconst obj1 = {\n  foo: 'bar',\n};\n\nconst obj2 = {\n  qux: 'baz',\n};\n\nconst mergedObj = { ...obj1, ...obj2 };\nconsole.log(mergedObj); // Output: { foo: \"bar\", qux: \"baz\" }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5C06\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u51FD\\u6570\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528\\u5C55\\u5F00\\u8BED\\u6CD5\\u5C06\\u503C\\u6570\\u7EC4\\u4F5C\\u4E3A\\u5355\\u4E2A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u51FD\\u6570\\uFF0C\\u907F\\u514D\\u4E86\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"apply()\"}),\" \\u7684\\u9700\\u8981\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const numbers = [1, 2, 3];\nconst max = Math.max(...numbers); // Same as Math.max(1, 2, 3)\nconsole.log(max); // Output: 3\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6570\\u7EC4\\u4E0E\\u5BF9\\u8C61\\u5C55\\u5F00\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u53EA\\u6709\\u53EF\\u8FED\\u4EE3\\u7684\\u503C\\uFF08\\u5982 \",(0,n.jsx)(e.code,{children:\"Array\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"String\"}),\"\\uFF09\\u624D\\u53EF\\u4EE5\\u5728\\u6570\\u7EC4\\u4E2D\\u5C55\\u5F00\\u3002\\u5C1D\\u8BD5\\u5C55\\u5F00\\u4E0D\\u53EF\\u8FED\\u4EE3\\u7684\\u503C\\u5C06\\u5BFC\\u81F4 \",(0,n.jsx)(e.code,{children:\"TypeError\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5C06\\u5BF9\\u8C61\\u5C55\\u5F00\\u5230\\u6570\\u7EC4\\u4E2D\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  name: 'Todd',\n  age: 29,\n};\nconst array = [...person]; // Error: Uncaught TypeError: person is not iterable\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\\u6570\\u7EC4\\u53EF\\u4EE5\\u5C55\\u5F00\\u5230\\u5BF9\\u8C61\\u4E2D\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3];\nconst obj = { ...array };\nconsole.log(obj); // { 0: 1, 1: 2, 2: 3 }\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Rest \\u8BED\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684 rest \\u8BED\\u6CD5 (\",(0,n.jsx)(e.code,{children:\"...\"}),\") \\u5141\\u8BB8\\u4F60\\u5C06\\u4E0D\\u5B9A\\u6570\\u91CF\\u7684\\u5143\\u7D20\\u8868\\u793A\\u4E3A\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\u3002\\u5B83\\u5C31\\u50CF\\u5C55\\u5F00\\u8BED\\u6CD5\\u7684\\u9006\\u5411\\u64CD\\u4F5C\\uFF0C\\u83B7\\u53D6\\u6570\\u636E\\u5E76\\u5C06\\u5176\\u653E\\u5165\\u6570\\u7EC4\\u4E2D\\uFF0C\\u800C\\u4E0D\\u662F\\u89E3\\u5305\\u6570\\u7EC4\\u4E2D\\u7684\\u6570\\u636E\\uFF0C\\u5B83\\u9002\\u7528\\u4E8E\\u51FD\\u6570\\u53C2\\u6570\\u4EE5\\u53CA\\u6570\\u7EC4\\u548C\\u5BF9\\u8C61\\u89E3\\u6784\\u8D4B\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u51FD\\u6570\\u4E2D\\u7684 Rest \\u53C2\\u6570\"}),`\n`,(0,n.jsx)(e.p,{children:\"Rest \\u8BED\\u6CD5\\u53EF\\u7528\\u4E8E\\u51FD\\u6570\\u53C2\\u6570\\u4E2D\\uFF0C\\u5C06\\u6240\\u6709\\u5269\\u4F59\\u7684\\u53C2\\u6570\\u6536\\u96C6\\u5230\\u4E00\\u4E2A\\u6570\\u7EC4\\u4E2D\\u3002\\u5F53\\u4F60\\u4E0D\\u77E5\\u9053\\u5C06\\u5411\\u51FD\\u6570\\u4F20\\u9012\\u591A\\u5C11\\u4E2A\\u53C2\\u6570\\u65F6\\uFF0C\\u8FD9\\u7279\\u522B\\u6709\\u7528\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function addFiveToABunchOfNumbers(...numbers) {\n  return numbers.map((x) => x + 5);\n}\n\nconst result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10);\nconsole.log(result); // Output: [9, 10, 11, 12, 13, 14, 15]\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E0E\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"arguments\"}),\" \\u5BF9\\u8C61\\u76F8\\u6BD4\\uFF0C\\u5B83\\u63D0\\u4F9B\\u4E86\\u66F4\\u7B80\\u6D01\\u7684\\u8BED\\u6CD5\\uFF0C\",(0,n.jsx)(e.code,{children:\"arguments\"}),\" \\u5BF9\\u8C61\\u5728\\u7BAD\\u5934\\u51FD\\u6570\\u4E2D\\u4E0D\\u53D7\\u652F\\u6301\\uFF0C\\u5E76\\u4E14\\u8868\\u793A \",(0,n.jsx)(e.strong,{children:\"\\u6240\\u6709\"}),\" \\u53C2\\u6570\\uFF0C\\u800C\\u4E0B\\u9762 rest \\u8BED\\u6CD5\\u7684\\u7528\\u6CD5\\u5141\\u8BB8 \",(0,n.jsx)(e.code,{children:\"remaining\"}),\" \\u8868\\u793A\\u7B2C\\u4E09\\u4E2A\\u53C2\\u6570\\u53CA\\u4E4B\\u540E\\u7684\\u53C2\\u6570\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const [first, second, ...remaining] = [1, 2, 3, 4, 5];\nconsole.log(first); // Output: 1\nconsole.log(second); // Output: 2\nconsole.log(remaining); // Output: [3, 4, 5]\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8BF7\\u6CE8\\u610F\\uFF0Crest \\u53C2\\u6570\\u5FC5\\u987B\\u4F4D\\u4E8E\\u672B\\u5C3E\\u3002rest \\u53C2\\u6570\\u4F1A\\u6536\\u96C6\\u6240\\u6709\\u5269\\u4F59\\u7684\\u53C2\\u6570\\uFF0C\\u56E0\\u6B64\\u4EE5\\u4E0B\\u64CD\\u4F5C\\u6CA1\\u6709\\u610F\\u4E49\\uFF0C\\u5E76\\u4E14\\u4F1A\\u5BFC\\u81F4\\u9519\\u8BEF\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function addFiveToABunchOfNumbers(arg1, ...numbers, arg2) {\n  // Error: Rest parameter must be last formal parameter.\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6570\\u7EC4\\u89E3\\u6784\"}),`\n`,(0,n.jsx)(e.p,{children:\"Rest \\u8BED\\u6CD5\\u53EF\\u7528\\u4E8E\\u6570\\u7EC4\\u89E3\\u6784\\uFF0C\\u5C06\\u5269\\u4F59\\u7684\\u5143\\u7D20\\u6536\\u96C6\\u5230\\u4E00\\u4E2A\\u65B0\\u6570\\u7EC4\\u4E2D\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const [a, b, ...rest] = [1, 2, 3, 4];\nconsole.log(a); // Output: 1\nconsole.log(b); // Output: 2\nconsole.log(rest); // Output: [3, 4]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5BF9\\u8C61\\u89E3\\u6784\"}),`\n`,(0,n.jsx)(e.p,{children:\"Rest \\u8BED\\u6CD5\\u53EF\\u7528\\u4E8E\\u5BF9\\u8C61\\u89E3\\u6784\\uFF0C\\u5C06\\u5269\\u4F59\\u7684\\u5C5E\\u6027\\u6536\\u96C6\\u5230\\u4E00\\u4E2A\\u65B0\\u5BF9\\u8C61\\u4E2D\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const { e, f, ...others } = {\n  e: 1,\n  f: 2,\n  g: 3,\n  h: 4,\n};\nconsole.log(e); // Output: 1\nconsole.log(f); // Output: 2\nconsole.log(others); // Output: { g: 3, h: 4 }\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax\",children:\"\\u5C55\\u5F00\\u8BED\\u6CD5 | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/rest_parameters\",children:\"Rest \\u53C2\\u6570 | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://zh.javascript.info/rest-parameters-spread\",children:\"Rest \\u53C2\\u6570\\u548C\\u5C55\\u5F00\\u8BED\\u6CD5 | JavaScript.info\"})}),`\n`]})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(s,{...r})}):s(r)}return y(x);})();\n;return Component;"
 }
\ No newline at end of file
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 ea80514cd..3f95fa715 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var b=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),j=(i,n)=>{for(var t in n)c(i,t,{get:n[t],enumerable:!0})},l=(i,n,t,r)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of g(n))!p.call(i,o)&&o!==t&&c(i,o,{get:()=>n[o],enumerable:!(r=u(n,o))||r.enumerable});return i};var m=(i,n,t)=>(t=i!=null?a(f(i)):{},l(n||!i||!i.__esModule?c(t,\"default\",{value:i,enumerable:!0}):t,i)),v=i=>l(c({},\"__esModule\",{value:!0}),i);var h=b((_,s)=>{s.exports=_jsx_runtime});var F={};j(F,{default:()=>w,frontmatter:()=>x});var e=m(h()),x={title:\"What are the common pitfalls of using the `this` keyword?\"};function d(i){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},i.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"The \",(0,e.jsx)(n.code,{children:\"this\"}),\" keyword in JavaScript can be tricky because its value depends on how a function is called. Common pitfalls include losing the context of \",(0,e.jsx)(n.code,{children:\"this\"}),\" when passing methods as callbacks, using \",(0,e.jsx)(n.code,{children:\"this\"}),\" in nested functions, and misunderstanding \",(0,e.jsx)(n.code,{children:\"this\"}),\" in arrow functions. To avoid these issues, you can use \",(0,e.jsx)(n.code,{children:\".bind()\"}),\", arrow functions, or store the context in a variable.\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsxs)(n.h2,{children:[\"Common pitfalls of using the \",(0,e.jsx)(n.code,{children:\"this\"}),\" keyword\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Losing context in callbacks\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"When you pass a method as a callback, the context of \",(0,e.jsx)(n.code,{children:\"this\"}),\" can be lost. For example:\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: function () {\n    return this.value;\n  },\n};\n\nconst getValue = obj.getValue;\nconsole.log(getValue()); // undefined\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In this case, \",(0,e.jsx)(n.code,{children:\"this\"}),\" inside \",(0,e.jsx)(n.code,{children:\"getValue\"}),\" is not bound to \",(0,e.jsx)(n.code,{children:\"obj\"}),\".\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[\"Using \",(0,e.jsx)(n.code,{children:\"this\"}),\" in nested functions\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"In nested functions, \",(0,e.jsx)(n.code,{children:\"this\"}),\" does not refer to the outer function's context:\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: function () {\n    function innerFunction() {\n      return this.value;\n    }\n    return innerFunction();\n  },\n};\n\nconsole.log(obj.getValue()); // undefined\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"Here, \",(0,e.jsx)(n.code,{children:\"this\"}),\" inside \",(0,e.jsx)(n.code,{children:\"innerFunction\"}),\" refers to the global object, not \",(0,e.jsx)(n.code,{children:\"obj\"}),\".\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[\"Misunderstanding \",(0,e.jsx)(n.code,{children:\"this\"}),\" in arrow functions\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"Arrow functions do not have their own \",(0,e.jsx)(n.code,{children:\"this\"}),\" context; they inherit it from the enclosing scope:\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: () => {\n    return this.value;\n  },\n};\n\nconsole.log(obj.getValue()); // undefined\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In this example, \",(0,e.jsx)(n.code,{children:\"this\"}),\" inside the arrow function refers to the global object, not \",(0,e.jsx)(n.code,{children:\"obj\"}),\".\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Solutions\"}),`\n`,(0,e.jsxs)(n.h4,{children:[\"Using \",(0,e.jsx)(n.code,{children:\".bind()\"})]}),`\n`,(0,e.jsxs)(n.p,{children:[\"You can use \",(0,e.jsx)(n.code,{children:\".bind()\"}),\" to explicitly set the context of \",(0,e.jsx)(n.code,{children:\"this\"}),\":\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: function () {\n    return this.value;\n  },\n};\n\nconst getValue = obj.getValue.bind(obj);\nconsole.log(getValue()); // 42\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"Using arrow functions\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Arrow functions inherit \",(0,e.jsx)(n.code,{children:\"this\"}),\" from the enclosing scope, which can be useful:\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: function () {\n    const innerFunction = () => {\n      return this.value;\n    };\n    return innerFunction();\n  },\n};\n\nconsole.log(obj.getValue()); // 42\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"Storing context in a variable\"}),`\n`,(0,e.jsx)(n.p,{children:\"You can store the context in a variable to maintain it in nested functions:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: function () {\n    const self = this;\n    function innerFunction() {\n      return self.value;\n    }\n    return innerFunction();\n  },\n};\n\nconsole.log(obj.getValue()); // 42\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this\",children:[\"MDN Web Docs: \",(0,e.jsx)(n.code,{children:\"this\"})]})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://javascript.info/this\",children:[\"JavaScript.info: \",(0,e.jsx)(n.code,{children:\"this\"})]})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://eloquentjavascript.net/03_functions.html#h_jxlm9L8T4l\",children:[\"Eloquent JavaScript: \",(0,e.jsx)(n.code,{children:\"this\"})]})}),`\n`]})]})}function V(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,Object.assign({},i,{children:(0,e.jsx)(d,i)})):d(i)}var w=V;return v(F);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var j=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),m=(i,n)=>{for(var t in n)c(i,t,{get:n[t],enumerable:!0})},l=(i,n,t,r)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of f(n))!b.call(i,o)&&o!==t&&c(i,o,{get:()=>n[o],enumerable:!(r=g(n,o))||r.enumerable});return i};var v=(i,n,t)=>(t=i!=null?u(p(i)):{},l(n||!i||!i.__esModule?c(t,\"default\",{value:i,enumerable:!0}):t,i)),x=i=>l(c({},\"__esModule\",{value:!0}),i);var h=j((y,s)=>{s.exports=_jsx_runtime});var w={};m(w,{default:()=>a,frontmatter:()=>V});var e=v(h()),V={title:\"What are the common pitfalls of using the `this` keyword?\"};function d(i){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...i.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"The \",(0,e.jsx)(n.code,{children:\"this\"}),\" keyword in JavaScript can be tricky because its value depends on how a function is called. Common pitfalls include losing the context of \",(0,e.jsx)(n.code,{children:\"this\"}),\" when passing methods as callbacks, using \",(0,e.jsx)(n.code,{children:\"this\"}),\" in nested functions, and misunderstanding \",(0,e.jsx)(n.code,{children:\"this\"}),\" in arrow functions. To avoid these issues, you can use \",(0,e.jsx)(n.code,{children:\".bind()\"}),\", arrow functions, or store the context in a variable.\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsxs)(n.h2,{children:[\"Common pitfalls of using the \",(0,e.jsx)(n.code,{children:\"this\"}),\" keyword\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Losing context in callbacks\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"When you pass a method as a callback, the context of \",(0,e.jsx)(n.code,{children:\"this\"}),\" can be lost. For example:\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: function () {\n    return this.value;\n  },\n};\n\nconst getValue = obj.getValue;\nconsole.log(getValue()); // undefined\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In this case, \",(0,e.jsx)(n.code,{children:\"this\"}),\" inside \",(0,e.jsx)(n.code,{children:\"getValue\"}),\" is not bound to \",(0,e.jsx)(n.code,{children:\"obj\"}),\".\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[\"Using \",(0,e.jsx)(n.code,{children:\"this\"}),\" in nested functions\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"In nested functions, \",(0,e.jsx)(n.code,{children:\"this\"}),\" does not refer to the outer function's context:\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: function () {\n    function innerFunction() {\n      return this.value;\n    }\n    return innerFunction();\n  },\n};\n\nconsole.log(obj.getValue()); // undefined\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"Here, \",(0,e.jsx)(n.code,{children:\"this\"}),\" inside \",(0,e.jsx)(n.code,{children:\"innerFunction\"}),\" refers to the global object, not \",(0,e.jsx)(n.code,{children:\"obj\"}),\".\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[\"Misunderstanding \",(0,e.jsx)(n.code,{children:\"this\"}),\" in arrow functions\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"Arrow functions do not have their own \",(0,e.jsx)(n.code,{children:\"this\"}),\" context; they inherit it from the enclosing scope:\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: () => {\n    return this.value;\n  },\n};\n\nconsole.log(obj.getValue()); // undefined\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In this example, \",(0,e.jsx)(n.code,{children:\"this\"}),\" inside the arrow function refers to the global object, not \",(0,e.jsx)(n.code,{children:\"obj\"}),\".\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Solutions\"}),`\n`,(0,e.jsxs)(n.h4,{children:[\"Using \",(0,e.jsx)(n.code,{children:\".bind()\"})]}),`\n`,(0,e.jsxs)(n.p,{children:[\"You can use \",(0,e.jsx)(n.code,{children:\".bind()\"}),\" to explicitly set the context of \",(0,e.jsx)(n.code,{children:\"this\"}),\":\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: function () {\n    return this.value;\n  },\n};\n\nconst getValue = obj.getValue.bind(obj);\nconsole.log(getValue()); // 42\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"Using arrow functions\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Arrow functions inherit \",(0,e.jsx)(n.code,{children:\"this\"}),\" from the enclosing scope, which can be useful:\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: function () {\n    const innerFunction = () => {\n      return this.value;\n    };\n    return innerFunction();\n  },\n};\n\nconsole.log(obj.getValue()); // 42\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"Storing context in a variable\"}),`\n`,(0,e.jsx)(n.p,{children:\"You can store the context in a variable to maintain it in nested functions:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: function () {\n    const self = this;\n    function innerFunction() {\n      return self.value;\n    }\n    return innerFunction();\n  },\n};\n\nconsole.log(obj.getValue()); // 42\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this\",children:[\"MDN Web Docs: \",(0,e.jsx)(n.code,{children:\"this\"})]})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://javascript.info/this\",children:[\"JavaScript.info: \",(0,e.jsx)(n.code,{children:\"this\"})]})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://eloquentjavascript.net/03_functions.html#h_jxlm9L8T4l\",children:[\"Eloquent JavaScript: \",(0,e.jsx)(n.code,{children:\"this\"})]})}),`\n`]})]})}function a(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,{...i,children:(0,e.jsx)(d,{...i})}):d(i)}return x(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-common-pitfalls-of-using-the-this-keyword/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-common-pitfalls-of-using-the-this-keyword/zh-CN.json
index d2c4070f7..a550e7260 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-common-pitfalls-of-using-the-this-keyword/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-common-pitfalls-of-using-the-this-keyword/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-common-pitfalls-of-using-the-this-keyword/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var v=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),b=(c,n)=>{for(var i in n)r(c,i,{get:n[i],enumerable:!0})},h=(c,n,i,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of g(n))!j.call(c,l)&&l!==i&&r(c,l,{get:()=>n[l],enumerable:!(t=u(n,l))||t.enumerable});return c};var f=(c,n,i)=>(i=c!=null?a(p(c)):{},h(n||!c||!c.__esModule?r(i,\"default\",{value:c,enumerable:!0}):i,c)),m=c=>h(r({},\"__esModule\",{value:!0}),c);var d=v((D,o)=>{o.exports=_jsx_runtime});var _={};b(_,{default:()=>F,frontmatter:()=>V});var e=f(d()),V={title:\"\\u4F7F\\u7528 `this` \\u5173\\u952E\\u5B57\\u7684\\u5E38\\u89C1\\u9677\\u9631\\u662F\\u4EC0\\u4E48\\uFF1F\"};function s(c){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},c.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\\u53EF\\u80FD\\u5F88\\u68D8\\u624B\\uFF0C\\u56E0\\u4E3A\\u5B83\\u7684\\u503C\\u53D6\\u51B3\\u4E8E\\u51FD\\u6570\\u7684\\u8C03\\u7528\\u65B9\\u5F0F\\u3002\\u5E38\\u89C1\\u7684\\u9677\\u9631\\u5305\\u62EC\\u5C06\\u65B9\\u6CD5\\u4F5C\\u4E3A\\u56DE\\u8C03\\u4F20\\u9012\\u65F6\\u4E22\\u5931 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u4E0A\\u4E0B\\u6587\\uFF0C\\u5728\\u5D4C\\u5957\\u51FD\\u6570\\u4E2D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\uFF0C\\u4EE5\\u53CA\\u8BEF\\u89E3\\u7BAD\\u5934\\u51FD\\u6570\\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\u3002\\u4E3A\\u4E86\\u907F\\u514D\\u8FD9\\u4E9B\\u95EE\\u9898\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\".bind()\"}),\"\\u3001\\u7BAD\\u5934\\u51FD\\u6570\\u6216\\u5C06\\u4E0A\\u4E0B\\u6587\\u5B58\\u50A8\\u5728\\u53D8\\u91CF\\u4E2D\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsxs)(n.h2,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\\u7684\\u5E38\\u89C1\\u9677\\u9631\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u56DE\\u8C03\\u4E2D\\u4E22\\u5931\\u4E0A\\u4E0B\\u6587\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5F53\\u60A8\\u5C06\\u65B9\\u6CD5\\u4F5C\\u4E3A\\u56DE\\u8C03\\u4F20\\u9012\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u4E0A\\u4E0B\\u6587\\u53EF\\u80FD\\u4F1A\\u4E22\\u5931\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: function () {\n    return this.value;\n  },\n};\n\nconst getValue = obj.getValue;\nconsole.log(getValue()); // undefined\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u79CD\\u60C5\\u51B5\\u4E0B\\uFF0C\",(0,e.jsx)(n.code,{children:\"getValue\"}),\" \\u5185\\u90E8\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6CA1\\u6709\\u7ED1\\u5B9A\\u5230 \",(0,e.jsx)(n.code,{children:\"obj\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u5728\\u5D4C\\u5957\\u51FD\\u6570\\u4E2D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"this\"})]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u5D4C\\u5957\\u51FD\\u6570\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0D\\u6307\\u5411\\u5916\\u90E8\\u51FD\\u6570\\u7684\\u4E0A\\u4E0B\\u6587\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: function () {\n    function innerFunction() {\n      return this.value;\n    }\n    return innerFunction();\n  },\n};\n\nconsole.log(obj.getValue()); // undefined\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u91CC\\uFF0C\",(0,e.jsx)(n.code,{children:\"innerFunction\"}),\" \\u5185\\u90E8\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u5411\\u5168\\u5C40\\u5BF9\\u8C61\\uFF0C\\u800C\\u4E0D\\u662F \",(0,e.jsx)(n.code,{children:\"obj\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u8BEF\\u89E3\\u7BAD\\u5934\\u51FD\\u6570\\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"})]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u6CA1\\u6709\\u81EA\\u5DF1\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\uFF1B\\u5B83\\u4EEC\\u4ECE\\u5C01\\u95ED\\u7684\\u8303\\u56F4\\u7EE7\\u627F\\u5B83\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: () => {\n    return this.value;\n  },\n};\n\nconsole.log(obj.getValue()); // undefined\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u7BAD\\u5934\\u51FD\\u6570\\u5185\\u90E8\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u5411\\u5168\\u5C40\\u5BF9\\u8C61\\uFF0C\\u800C\\u4E0D\\u662F \",(0,e.jsx)(n.code,{children:\"obj\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u89E3\\u51B3\\u65B9\\u6848\"}),`\n`,(0,e.jsxs)(n.h4,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\".bind()\"})]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\".bind()\"}),\" \\u663E\\u5F0F\\u8BBE\\u7F6E \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u4E0A\\u4E0B\\u6587\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: function () {\n    return this.value;\n  },\n};\n\nconst getValue = obj.getValue.bind(obj);\nconsole.log(getValue()); // 42\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528\\u7BAD\\u5934\\u51FD\\u6570\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u4ECE\\u5C01\\u95ED\\u7684\\u8303\\u56F4\\u7EE7\\u627F \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\uFF0C\\u8FD9\\u5F88\\u6709\\u7528\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: function () {\n    const innerFunction = () => {\n      return this.value;\n    };\n    return innerFunction();\n  },\n};\n\nconsole.log(obj.getValue()); // 42\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5C06\\u4E0A\\u4E0B\\u6587\\u5B58\\u50A8\\u5728\\u53D8\\u91CF\\u4E2D\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u5C06\\u4E0A\\u4E0B\\u6587\\u5B58\\u50A8\\u5728\\u53D8\\u91CF\\u4E2D\\uFF0C\\u4EE5\\u5728\\u5D4C\\u5957\\u51FD\\u6570\\u4E2D\\u7EF4\\u62A4\\u5B83\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: function () {\n    const self = this;\n    function innerFunction() {\n      return self.value;\n    }\n    return innerFunction();\n  },\n};\n\nconsole.log(obj.getValue()); // 42\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this\",children:[\"MDN Web Docs: \",(0,e.jsx)(n.code,{children:\"this\"})]})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://javascript.info/this\",children:[\"JavaScript.info: \",(0,e.jsx)(n.code,{children:\"this\"})]})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://eloquentjavascript.net/03_functions.html#h_jxlm9L8T4l\",children:[\"Eloquent JavaScript: \",(0,e.jsx)(n.code,{children:\"this\"})]})}),`\n`]})]})}function x(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,Object.assign({},c,{children:(0,e.jsx)(s,c)})):s(c)}var F=x;return m(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var f=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),b=(c,n)=>{for(var i in n)r(c,i,{get:n[i],enumerable:!0})},h=(c,n,i,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of p(n))!v.call(c,l)&&l!==i&&r(c,l,{get:()=>n[l],enumerable:!(t=g(n,l))||t.enumerable});return c};var m=(c,n,i)=>(i=c!=null?u(j(c)):{},h(n||!c||!c.__esModule?r(i,\"default\",{value:c,enumerable:!0}):i,c)),V=c=>h(r({},\"__esModule\",{value:!0}),c);var d=f((N,o)=>{o.exports=_jsx_runtime});var F={};b(F,{default:()=>a,frontmatter:()=>x});var e=m(d()),x={title:\"\\u4F7F\\u7528 `this` \\u5173\\u952E\\u5B57\\u7684\\u5E38\\u89C1\\u9677\\u9631\\u662F\\u4EC0\\u4E48\\uFF1F\"};function s(c){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\\u53EF\\u80FD\\u5F88\\u68D8\\u624B\\uFF0C\\u56E0\\u4E3A\\u5B83\\u7684\\u503C\\u53D6\\u51B3\\u4E8E\\u51FD\\u6570\\u7684\\u8C03\\u7528\\u65B9\\u5F0F\\u3002\\u5E38\\u89C1\\u7684\\u9677\\u9631\\u5305\\u62EC\\u5C06\\u65B9\\u6CD5\\u4F5C\\u4E3A\\u56DE\\u8C03\\u4F20\\u9012\\u65F6\\u4E22\\u5931 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u4E0A\\u4E0B\\u6587\\uFF0C\\u5728\\u5D4C\\u5957\\u51FD\\u6570\\u4E2D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\uFF0C\\u4EE5\\u53CA\\u8BEF\\u89E3\\u7BAD\\u5934\\u51FD\\u6570\\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\u3002\\u4E3A\\u4E86\\u907F\\u514D\\u8FD9\\u4E9B\\u95EE\\u9898\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\".bind()\"}),\"\\u3001\\u7BAD\\u5934\\u51FD\\u6570\\u6216\\u5C06\\u4E0A\\u4E0B\\u6587\\u5B58\\u50A8\\u5728\\u53D8\\u91CF\\u4E2D\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsxs)(n.h2,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5173\\u952E\\u5B57\\u7684\\u5E38\\u89C1\\u9677\\u9631\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728\\u56DE\\u8C03\\u4E2D\\u4E22\\u5931\\u4E0A\\u4E0B\\u6587\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5F53\\u60A8\\u5C06\\u65B9\\u6CD5\\u4F5C\\u4E3A\\u56DE\\u8C03\\u4F20\\u9012\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u4E0A\\u4E0B\\u6587\\u53EF\\u80FD\\u4F1A\\u4E22\\u5931\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: function () {\n    return this.value;\n  },\n};\n\nconst getValue = obj.getValue;\nconsole.log(getValue()); // undefined\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u79CD\\u60C5\\u51B5\\u4E0B\\uFF0C\",(0,e.jsx)(n.code,{children:\"getValue\"}),\" \\u5185\\u90E8\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6CA1\\u6709\\u7ED1\\u5B9A\\u5230 \",(0,e.jsx)(n.code,{children:\"obj\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u5728\\u5D4C\\u5957\\u51FD\\u6570\\u4E2D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"this\"})]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u5D4C\\u5957\\u51FD\\u6570\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0D\\u6307\\u5411\\u5916\\u90E8\\u51FD\\u6570\\u7684\\u4E0A\\u4E0B\\u6587\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: function () {\n    function innerFunction() {\n      return this.value;\n    }\n    return innerFunction();\n  },\n};\n\nconsole.log(obj.getValue()); // undefined\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u91CC\\uFF0C\",(0,e.jsx)(n.code,{children:\"innerFunction\"}),\" \\u5185\\u90E8\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u5411\\u5168\\u5C40\\u5BF9\\u8C61\\uFF0C\\u800C\\u4E0D\\u662F \",(0,e.jsx)(n.code,{children:\"obj\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u8BEF\\u89E3\\u7BAD\\u5934\\u51FD\\u6570\\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"})]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u6CA1\\u6709\\u81EA\\u5DF1\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\uFF1B\\u5B83\\u4EEC\\u4ECE\\u5C01\\u95ED\\u7684\\u8303\\u56F4\\u7EE7\\u627F\\u5B83\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: () => {\n    return this.value;\n  },\n};\n\nconsole.log(obj.getValue()); // undefined\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u7BAD\\u5934\\u51FD\\u6570\\u5185\\u90E8\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u5411\\u5168\\u5C40\\u5BF9\\u8C61\\uFF0C\\u800C\\u4E0D\\u662F \",(0,e.jsx)(n.code,{children:\"obj\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u89E3\\u51B3\\u65B9\\u6848\"}),`\n`,(0,e.jsxs)(n.h4,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\".bind()\"})]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\".bind()\"}),\" \\u663E\\u5F0F\\u8BBE\\u7F6E \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u4E0A\\u4E0B\\u6587\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: function () {\n    return this.value;\n  },\n};\n\nconst getValue = obj.getValue.bind(obj);\nconsole.log(getValue()); // 42\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528\\u7BAD\\u5934\\u51FD\\u6570\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u7BAD\\u5934\\u51FD\\u6570\\u4ECE\\u5C01\\u95ED\\u7684\\u8303\\u56F4\\u7EE7\\u627F \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\uFF0C\\u8FD9\\u5F88\\u6709\\u7528\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: function () {\n    const innerFunction = () => {\n      return this.value;\n    };\n    return innerFunction();\n  },\n};\n\nconsole.log(obj.getValue()); // 42\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5C06\\u4E0A\\u4E0B\\u6587\\u5B58\\u50A8\\u5728\\u53D8\\u91CF\\u4E2D\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u5C06\\u4E0A\\u4E0B\\u6587\\u5B58\\u50A8\\u5728\\u53D8\\u91CF\\u4E2D\\uFF0C\\u4EE5\\u5728\\u5D4C\\u5957\\u51FD\\u6570\\u4E2D\\u7EF4\\u62A4\\u5B83\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj = {\n  value: 42,\n  getValue: function () {\n    const self = this;\n    function innerFunction() {\n      return self.value;\n    }\n    return innerFunction();\n  },\n};\n\nconsole.log(obj.getValue()); // 42\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this\",children:[\"MDN Web Docs: \",(0,e.jsx)(n.code,{children:\"this\"})]})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://javascript.info/this\",children:[\"JavaScript.info: \",(0,e.jsx)(n.code,{children:\"this\"})]})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://eloquentjavascript.net/03_functions.html#h_jxlm9L8T4l\",children:[\"Eloquent JavaScript: \",(0,e.jsx)(n.code,{children:\"this\"})]})}),`\n`]})]})}function a(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,{...c,children:(0,e.jsx)(s,{...c})}):s(c)}return V(F);})();\n;return Component;"
 }
\ No newline at end of file
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 c2ce6fb25..65f3bdaaf 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var S=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),y=(t,n)=>{for(var s in n)i(t,s,{get:n[s],enumerable:!0})},o=(t,n,s,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of m(n))!g.call(t,r)&&r!==s&&i(t,r,{get:()=>n[r],enumerable:!(c=u(n,r))||c.enumerable});return t};var f=(t,n,s)=>(s=t!=null?h(p(t)):{},o(n||!t||!t.__esModule?i(s,\"default\",{value:t,enumerable:!0}):s,t)),E=t=>o(i({},\"__esModule\",{value:!0}),t);var d=S((P,a)=>{a.exports=_jsx_runtime});var I={};y(I,{default:()=>b,frontmatter:()=>w});var e=f(d()),w={title:\"What are the differences between JavaScript ES2015 classes and ES5 function constructors?\"};function l(t){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",strong:\"strong\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",ul:\"ul\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"ES2015 introduces a new way of creating classes, which provides a more intuitive and concise way to define and work with objects and inheritance compared to the ES5 function constructor syntax. Here's an example of each:\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES5 function constructor\nfunction Person(name) {\n  this.name = name;\n}\n\n// ES2015 Class\nclass Person {\n  constructor(name) {\n    this.name = name;\n  }\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"For simple constructors, they look pretty similar. The main difference in the constructor comes when using inheritance. If we want to create a \",(0,e.jsx)(n.code,{children:\"Student\"}),\" class that subclasses \",(0,e.jsx)(n.code,{children:\"Person\"}),\" and add a \",(0,e.jsx)(n.code,{children:\"studentId\"}),\" field, this is what we have to do.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES5 inheritance\n// Superclass\nfunction Person1(name) {\n  this.name = name;\n}\n\n// Subclass\nfunction Student1(name, studentId) {\n  // Call constructor of superclass to initialize superclass-derived members.\n  Person1.call(this, name);\n\n  // Initialize subclass's own members.\n  this.studentId = studentId;\n}\nStudent1.prototype = Object.create(Person1.prototype);\nStudent1.prototype.constructor = Student1;\n\nconst student1 = new Student1('John', 1234);\nconsole.log(student1.name, student1.studentId); // \"John\" 1234\n\n// ES2015 inheritance\n// Superclass\nclass Person2 {\n  constructor(name) {\n    this.name = name;\n  }\n}\n\n// Subclass\nclass Student2 extends Person2 {\n  constructor(name, studentId) {\n    super(name);\n    this.studentId = studentId;\n  }\n}\n\nconst student2 = new Student2('Alice', 5678);\nconsole.log(student2.name, student2.studentId); // \"Alice\" 5678\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"It's much more verbose to use inheritance in ES5 and the ES2015 version is easier to understand and remember.\"}),`\n`,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:\"Comparison of ES5 function constructors vs ES2015 classes\"})}),`\n`,(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:\"Feature\"}),(0,e.jsx)(n.th,{children:\"ES5 Function Constructor\"}),(0,e.jsx)(n.th,{children:\"ES2015 Class\"})]})}),(0,e.jsxs)(n.tbody,{children:[(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"Syntax\"}),(0,e.jsx)(n.td,{children:\"Uses function constructors and prototypes\"}),(0,e.jsxs)(n.td,{children:[\"Uses \",(0,e.jsx)(n.code,{children:\"class\"}),\" keyword\"]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"Constructor\"}),(0,e.jsxs)(n.td,{children:[\"Function with properties assigned using \",(0,e.jsx)(n.code,{children:\"this\"})]}),(0,e.jsxs)(n.td,{children:[(0,e.jsx)(n.code,{children:\"constructor\"}),\" method inside the class\"]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"Method Definition\"}),(0,e.jsx)(n.td,{children:\"Defined on the prototype\"}),(0,e.jsx)(n.td,{children:\"Defined inside the class body\"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"Static Methods\"}),(0,e.jsx)(n.td,{children:\"Added directly to the constructor function\"}),(0,e.jsxs)(n.td,{children:[\"Defined using the \",(0,e.jsx)(n.code,{children:\"static\"}),\" keyword\"]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"Inheritance\"}),(0,e.jsxs)(n.td,{children:[\"Uses \",(0,e.jsx)(n.code,{children:\"Object.create()\"}),\" and manually sets prototype chain\"]}),(0,e.jsxs)(n.td,{children:[\"Uses \",(0,e.jsx)(n.code,{children:\"extends\"}),\" keyword and \",(0,e.jsx)(n.code,{children:\"super\"}),\" function\"]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"Readability\"}),(0,e.jsx)(n.td,{children:\"Less intuitive and more verbose\"}),(0,e.jsx)(n.td,{children:\"More concise and intuitive\"})]})]})]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"ES5 function constructor vs ES2015 classes\"}),`\n`,(0,e.jsx)(n.p,{children:\"ES5 function constructors and ES2015 classes are two different ways of defining classes in JavaScript. They both serve the same purpose, but they have different syntax and behavior.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"ES5 function constructors\"}),`\n`,(0,e.jsx)(n.p,{children:\"In ES5, you define a class-like structure using a function constructor and prototypes. Here's an example:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES5 function constructor\nfunction Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\nPerson.prototype.greet = function () {\n  console.log(\n    'Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.',\n  );\n};\n\n// Creating an instance\nvar person1 = new Person('John', 30);\nperson1.greet(); // Hello, my name is John and I am 30 years old.\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"ES2015 classes\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"ES2015 introduced the \",(0,e.jsx)(n.code,{children:\"class\"}),\" syntax, which simplifies the definition of classes and supports more features such as static methods and subclassing. Here's the same example using ES2015:\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES2015 Class\nclass Person {\n  constructor(name, age) {\n    this.name = name;\n    this.age = age;\n  }\n\n  greet() {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`,\n    );\n  }\n}\n\n// Creating an instance\nconst person1 = new Person('John', 30);\nperson1.greet(); // Hello, my name is John and I am 30 years old.\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Key Differences\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"Syntax and Readability\"}),\":\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES5\"}),\": Uses function constructors and prototypes, which can be less intuitive and harder to read.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES2015\"}),\": Uses the \",(0,e.jsx)(n.code,{children:\"class\"}),\" keyword, making the code more concise and easier to understand.\"]}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"Static Methods\"}),\":\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES5\"}),\": Static methods are added directly to the constructor function.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES2015\"}),\": Static methods are defined within the class using the \",(0,e.jsx)(n.code,{children:\"static\"}),\" keyword.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES5\nfunction Person1(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\nPerson1.sayHi = function () {\n  console.log('Hi from ES5!');\n};\n\nPerson1.sayHi(); // Hi from ES5!\n\n// ES2015\nclass Person2 {\n  static sayHi() {\n    console.log('Hi from ES2015!');\n  }\n}\nPerson2.sayHi(); // Hi from ES2015!\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:\"Inheritance\"})}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES5\"}),\": Inheritance is achieved using \",(0,e.jsx)(n.code,{children:\"Object.create()\"}),\" and manually setting the prototype chain.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES2015\"}),\": Inheritance is much simpler and more intuitive with the extends keyword.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES5 Inheritance\n\n// ES5 function constructor\nfunction Person1(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\nPerson1.prototype.greet = function () {\n  console.log(\n    \\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`,\n  );\n};\n\nfunction Student1(name, age, grade) {\n  Person1.call(this, name, age);\n  this.grade = grade;\n}\n\nStudent1.prototype = Object.create(Person1.prototype);\nStudent1.prototype.constructor = Student1;\n\nStudent1.prototype.study = function () {\n  console.log(this.name + ' is studying.');\n};\n\nvar student1 = new Student1('John', 22, 'B+');\nstudent1.greet(); // Hello, my name is John and I am 22 years old.\nstudent1.study(); // John is studying.\n\n// ES2015 Inheritance\n\n// ES2015 Class\nclass Person2 {\n  constructor(name, age) {\n    this.name = name;\n    this.age = age;\n  }\n\n  greet() {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`,\n    );\n  }\n}\n\nclass Student2 extends Person2 {\n  constructor(name, age, grade) {\n    super(name, age);\n    this.grade = grade;\n  }\n\n  study() {\n    console.log(\\`\\${this.name} is studying.\\`);\n  }\n}\n\nconst student2 = new Student2('Alice', 20, 'A');\nstudent2.greet(); // Hello, my name is Alice and I am 20 years old.\nstudent2.study(); // Alice is studying.\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"super\"}),\" calls:\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES5\"}),\": Manually call the parent constructor function.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES2015\"}),\": Use the \",(0,e.jsx)(n.code,{children:\"super\"}),\" keyword to call the parent class's constructor and methods.\"]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Conclusion\"}),`\n`,(0,e.jsx)(n.p,{children:\"While both ES5 and ES2015 approaches can achieve the same functionality, ES2015 classes provide a clearer and more concise way to define and work with object-oriented constructs in JavaScript, which makes the code easier to write, read, and maintain. If you are working with modern JavaScript, it is generally recommended to use ES2015 classes over ES5 function constructors.\"}),`\n`,(0,e.jsx)(n.h2,{children:\"Resources\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\",children:\"Classes - MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#inheritance\",children:\"Inheritance- MDN \"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/06_object.html\",children:\"The Secret Life Of Objects\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.educative.io/courses/learn-object-oriented-programming-in-javascript/es2015-vs-es5\",children:\"ES2015 vs ES5\"})}),`\n`]})]})}function v(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(l,t)})):l(t)}var b=v;return E(I);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var y=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),f=(t,n)=>{for(var s in n)i(t,s,{get:n[s],enumerable:!0})},o=(t,n,s,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of p(n))!S.call(t,r)&&r!==s&&i(t,r,{get:()=>n[r],enumerable:!(c=m(n,r))||c.enumerable});return t};var E=(t,n,s)=>(s=t!=null?u(g(t)):{},o(n||!t||!t.__esModule?i(s,\"default\",{value:t,enumerable:!0}):s,t)),w=t=>o(i({},\"__esModule\",{value:!0}),t);var d=y((P,a)=>{a.exports=_jsx_runtime});var b={};f(b,{default:()=>h,frontmatter:()=>v});var e=E(d()),v={title:\"What are the differences between JavaScript ES2015 classes and ES5 function constructors?\"};function l(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"ES2015 introduces a new way of creating classes, which provides a more intuitive and concise way to define and work with objects and inheritance compared to the ES5 function constructor syntax. Here's an example of each:\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES5 function constructor\nfunction Person(name) {\n  this.name = name;\n}\n\n// ES2015 Class\nclass Person {\n  constructor(name) {\n    this.name = name;\n  }\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"For simple constructors, they look pretty similar. The main difference in the constructor comes when using inheritance. If we want to create a \",(0,e.jsx)(n.code,{children:\"Student\"}),\" class that subclasses \",(0,e.jsx)(n.code,{children:\"Person\"}),\" and add a \",(0,e.jsx)(n.code,{children:\"studentId\"}),\" field, this is what we have to do.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES5 inheritance\n// Superclass\nfunction Person1(name) {\n  this.name = name;\n}\n\n// Subclass\nfunction Student1(name, studentId) {\n  // Call constructor of superclass to initialize superclass-derived members.\n  Person1.call(this, name);\n\n  // Initialize subclass's own members.\n  this.studentId = studentId;\n}\nStudent1.prototype = Object.create(Person1.prototype);\nStudent1.prototype.constructor = Student1;\n\nconst student1 = new Student1('John', 1234);\nconsole.log(student1.name, student1.studentId); // \"John\" 1234\n\n// ES2015 inheritance\n// Superclass\nclass Person2 {\n  constructor(name) {\n    this.name = name;\n  }\n}\n\n// Subclass\nclass Student2 extends Person2 {\n  constructor(name, studentId) {\n    super(name);\n    this.studentId = studentId;\n  }\n}\n\nconst student2 = new Student2('Alice', 5678);\nconsole.log(student2.name, student2.studentId); // \"Alice\" 5678\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"It's much more verbose to use inheritance in ES5 and the ES2015 version is easier to understand and remember.\"}),`\n`,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:\"Comparison of ES5 function constructors vs ES2015 classes\"})}),`\n`,(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:\"Feature\"}),(0,e.jsx)(n.th,{children:\"ES5 Function Constructor\"}),(0,e.jsx)(n.th,{children:\"ES2015 Class\"})]})}),(0,e.jsxs)(n.tbody,{children:[(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"Syntax\"}),(0,e.jsx)(n.td,{children:\"Uses function constructors and prototypes\"}),(0,e.jsxs)(n.td,{children:[\"Uses \",(0,e.jsx)(n.code,{children:\"class\"}),\" keyword\"]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"Constructor\"}),(0,e.jsxs)(n.td,{children:[\"Function with properties assigned using \",(0,e.jsx)(n.code,{children:\"this\"})]}),(0,e.jsxs)(n.td,{children:[(0,e.jsx)(n.code,{children:\"constructor\"}),\" method inside the class\"]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"Method Definition\"}),(0,e.jsx)(n.td,{children:\"Defined on the prototype\"}),(0,e.jsx)(n.td,{children:\"Defined inside the class body\"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"Static Methods\"}),(0,e.jsx)(n.td,{children:\"Added directly to the constructor function\"}),(0,e.jsxs)(n.td,{children:[\"Defined using the \",(0,e.jsx)(n.code,{children:\"static\"}),\" keyword\"]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"Inheritance\"}),(0,e.jsxs)(n.td,{children:[\"Uses \",(0,e.jsx)(n.code,{children:\"Object.create()\"}),\" and manually sets prototype chain\"]}),(0,e.jsxs)(n.td,{children:[\"Uses \",(0,e.jsx)(n.code,{children:\"extends\"}),\" keyword and \",(0,e.jsx)(n.code,{children:\"super\"}),\" function\"]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"Readability\"}),(0,e.jsx)(n.td,{children:\"Less intuitive and more verbose\"}),(0,e.jsx)(n.td,{children:\"More concise and intuitive\"})]})]})]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"ES5 function constructor vs ES2015 classes\"}),`\n`,(0,e.jsx)(n.p,{children:\"ES5 function constructors and ES2015 classes are two different ways of defining classes in JavaScript. They both serve the same purpose, but they have different syntax and behavior.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"ES5 function constructors\"}),`\n`,(0,e.jsx)(n.p,{children:\"In ES5, you define a class-like structure using a function constructor and prototypes. Here's an example:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES5 function constructor\nfunction Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\nPerson.prototype.greet = function () {\n  console.log(\n    'Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.',\n  );\n};\n\n// Creating an instance\nvar person1 = new Person('John', 30);\nperson1.greet(); // Hello, my name is John and I am 30 years old.\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"ES2015 classes\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"ES2015 introduced the \",(0,e.jsx)(n.code,{children:\"class\"}),\" syntax, which simplifies the definition of classes and supports more features such as static methods and subclassing. Here's the same example using ES2015:\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES2015 Class\nclass Person {\n  constructor(name, age) {\n    this.name = name;\n    this.age = age;\n  }\n\n  greet() {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`,\n    );\n  }\n}\n\n// Creating an instance\nconst person1 = new Person('John', 30);\nperson1.greet(); // Hello, my name is John and I am 30 years old.\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Key Differences\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"Syntax and Readability\"}),\":\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES5\"}),\": Uses function constructors and prototypes, which can be less intuitive and harder to read.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES2015\"}),\": Uses the \",(0,e.jsx)(n.code,{children:\"class\"}),\" keyword, making the code more concise and easier to understand.\"]}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"Static Methods\"}),\":\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES5\"}),\": Static methods are added directly to the constructor function.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES2015\"}),\": Static methods are defined within the class using the \",(0,e.jsx)(n.code,{children:\"static\"}),\" keyword.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES5\nfunction Person1(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\nPerson1.sayHi = function () {\n  console.log('Hi from ES5!');\n};\n\nPerson1.sayHi(); // Hi from ES5!\n\n// ES2015\nclass Person2 {\n  static sayHi() {\n    console.log('Hi from ES2015!');\n  }\n}\nPerson2.sayHi(); // Hi from ES2015!\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:\"Inheritance\"})}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES5\"}),\": Inheritance is achieved using \",(0,e.jsx)(n.code,{children:\"Object.create()\"}),\" and manually setting the prototype chain.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES2015\"}),\": Inheritance is much simpler and more intuitive with the extends keyword.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES5 Inheritance\n\n// ES5 function constructor\nfunction Person1(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\nPerson1.prototype.greet = function () {\n  console.log(\n    \\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`,\n  );\n};\n\nfunction Student1(name, age, grade) {\n  Person1.call(this, name, age);\n  this.grade = grade;\n}\n\nStudent1.prototype = Object.create(Person1.prototype);\nStudent1.prototype.constructor = Student1;\n\nStudent1.prototype.study = function () {\n  console.log(this.name + ' is studying.');\n};\n\nvar student1 = new Student1('John', 22, 'B+');\nstudent1.greet(); // Hello, my name is John and I am 22 years old.\nstudent1.study(); // John is studying.\n\n// ES2015 Inheritance\n\n// ES2015 Class\nclass Person2 {\n  constructor(name, age) {\n    this.name = name;\n    this.age = age;\n  }\n\n  greet() {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`,\n    );\n  }\n}\n\nclass Student2 extends Person2 {\n  constructor(name, age, grade) {\n    super(name, age);\n    this.grade = grade;\n  }\n\n  study() {\n    console.log(\\`\\${this.name} is studying.\\`);\n  }\n}\n\nconst student2 = new Student2('Alice', 20, 'A');\nstudent2.greet(); // Hello, my name is Alice and I am 20 years old.\nstudent2.study(); // Alice is studying.\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"super\"}),\" calls:\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES5\"}),\": Manually call the parent constructor function.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES2015\"}),\": Use the \",(0,e.jsx)(n.code,{children:\"super\"}),\" keyword to call the parent class's constructor and methods.\"]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Conclusion\"}),`\n`,(0,e.jsx)(n.p,{children:\"While both ES5 and ES2015 approaches can achieve the same functionality, ES2015 classes provide a clearer and more concise way to define and work with object-oriented constructs in JavaScript, which makes the code easier to write, read, and maintain. If you are working with modern JavaScript, it is generally recommended to use ES2015 classes over ES5 function constructors.\"}),`\n`,(0,e.jsx)(n.h2,{children:\"Resources\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\",children:\"Classes - MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#inheritance\",children:\"Inheritance- MDN \"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/06_object.html\",children:\"The Secret Life Of Objects\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.educative.io/courses/learn-object-oriented-programming-in-javascript/es2015-vs-es5\",children:\"ES2015 vs ES5\"})}),`\n`]})]})}function h(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(l,{...t})}):l(t)}return w(b);})();\n;return Component;"
 }
\ No newline at end of file
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 97a9ad207..19a0da489 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var S=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var t in e)a(n,t,{get:e[t],enumerable:!0})},c=(n,e,t,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!f.call(n,r)&&r!==t&&a(n,r,{get:()=>e[r],enumerable:!(o=l(e,r))||o.enumerable});return n};var x=(n,e,t)=>(t=n!=null?m(h(n)):{},c(e||!n||!n.__esModule?a(t,\"default\",{value:n,enumerable:!0}):t,n)),b=n=>c(a({},\"__esModule\",{value:!0}),n);var i=S((_,d)=>{d.exports=_jsx_runtime});var C={};j(C,{default:()=>I,frontmatter:()=>g});var s=x(i()),g={title:\"Quais s\\xE3o as diferen\\xE7as entre a classe ES2015 e os construtores de fun\\xE7\\xE3o ES5?\"};function u(n){let e=Object.assign({p:\"p\",pre:\"pre\",code:\"code\"},n.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.p,{children:\"Vamos primeiro olhar o exemplo de cada um deles:\"}),`\n`,(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:\"language-js\",children:`// Constructor de fun\\xE7\\xE3o ES5\nfunction Person(name) {\n  this.name = name;\n}\n\n// ES2015 Class\nclass Person {\n  constructor(name) {\n    this.name = name;\n  }\n}\n`})}),`\n`,(0,s.jsx)(e.p,{children:\"Para construtores simples, eles parecem bem semelhantes.\"}),`\n`,(0,s.jsxs)(e.p,{children:[\"A principal diferen\\xE7a no construtor vem quando se usa heran\\xE7a. Se quisermos criar uma classe \",(0,s.jsx)(e.code,{children:\"Student\"}),\" que seja uma subclasse de \",(0,s.jsx)(e.code,{children:\"Person\"}),\" e adicionar um campo \",(0,s.jsx)(e.code,{children:\"studentId\"}),\", \\xE9 isso que devemos fazer al\\xE9m do que foi mostrado acima.\"]}),`\n`,(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:\"language-js\",children:`// Construtor de fun\\xE7\\xE3o ES5\nfunction Student(name, studentId) {\n  // Chamar o construtor da superclasse para inicializar membros derivados da superclasse.\n  Person.call(this, name);\n\n  // Inicializar os pr\\xF3prios membros da subclasse.\n  this.studentId = studentId;\n}\n\nStudent.prototype = Object.create(Person.prototype);\nStudent.prototype.constructor = Student;\n\n// Classe ES2015\nclass Student extends Person {\n  constructor(name, studentId) {\n    super(name);\n    this.studentId = studentId;\n  }\n}\n`})}),`\n`,(0,s.jsx)(e.p,{children:\"\\xC9 muito mais verboso usar a heran\\xE7a na ES5 e a vers\\xE3o ES2015 \\xE9 mais f\\xE1cil de entender e lembrar.\"})]})}function E(n={}){let{wrapper:e}=n.components||{};return e?(0,s.jsx)(e,Object.assign({},n,{children:(0,s.jsx)(u,n)})):u(n)}var I=E;return b(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var l=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var r in e)a(n,r,{get:e[r],enumerable:!0})},c=(n,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of h(e))!S.call(n,t)&&t!==r&&a(n,t,{get:()=>e[t],enumerable:!(o=p(e,t))||o.enumerable});return n};var b=(n,e,r)=>(r=n!=null?l(f(n)):{},c(e||!n||!n.__esModule?a(r,\"default\",{value:n,enumerable:!0}):r,n)),E=n=>c(a({},\"__esModule\",{value:!0}),n);var u=x((_,d)=>{d.exports=_jsx_runtime});var C={};j(C,{default:()=>m,frontmatter:()=>I});var s=b(u()),I={title:\"Quais s\\xE3o as diferen\\xE7as entre a classe ES2015 e os construtores de fun\\xE7\\xE3o ES5?\"};function i(n){let e={code:\"code\",p:\"p\",pre:\"pre\",...n.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.p,{children:\"Vamos primeiro olhar o exemplo de cada um deles:\"}),`\n`,(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:\"language-js\",children:`// Constructor de fun\\xE7\\xE3o ES5\nfunction Person(name) {\n  this.name = name;\n}\n\n// ES2015 Class\nclass Person {\n  constructor(name) {\n    this.name = name;\n  }\n}\n`})}),`\n`,(0,s.jsx)(e.p,{children:\"Para construtores simples, eles parecem bem semelhantes.\"}),`\n`,(0,s.jsxs)(e.p,{children:[\"A principal diferen\\xE7a no construtor vem quando se usa heran\\xE7a. Se quisermos criar uma classe \",(0,s.jsx)(e.code,{children:\"Student\"}),\" que seja uma subclasse de \",(0,s.jsx)(e.code,{children:\"Person\"}),\" e adicionar um campo \",(0,s.jsx)(e.code,{children:\"studentId\"}),\", \\xE9 isso que devemos fazer al\\xE9m do que foi mostrado acima.\"]}),`\n`,(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:\"language-js\",children:`// Construtor de fun\\xE7\\xE3o ES5\nfunction Student(name, studentId) {\n  // Chamar o construtor da superclasse para inicializar membros derivados da superclasse.\n  Person.call(this, name);\n\n  // Inicializar os pr\\xF3prios membros da subclasse.\n  this.studentId = studentId;\n}\n\nStudent.prototype = Object.create(Person.prototype);\nStudent.prototype.constructor = Student;\n\n// Classe ES2015\nclass Student extends Person {\n  constructor(name, studentId) {\n    super(name);\n    this.studentId = studentId;\n  }\n}\n`})}),`\n`,(0,s.jsx)(e.p,{children:\"\\xC9 muito mais verboso usar a heran\\xE7a na ES5 e a vers\\xE3o ES2015 \\xE9 mais f\\xE1cil de entender e lembrar.\"})]})}function m(n={}){let{wrapper:e}=n.components||{};return e?(0,s.jsx)(e,{...n,children:(0,s.jsx)(i,{...n})}):i(n)}return E(C);})();\n;return Component;"
 }
\ No newline at end of file
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 a6062dee8..8d873588a 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var p=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),E=(t,n)=>{for(var r in n)s(t,r,{get:n[r],enumerable:!0})},d=(t,n,r,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of m(n))!S.call(t,c)&&c!==r&&s(t,c,{get:()=>n[c],enumerable:!(i=u(n,c))||i.enumerable});return t};var y=(t,n,r)=>(r=t!=null?h(g(t)):{},d(n||!t||!t.__esModule?s(r,\"default\",{value:t,enumerable:!0}):r,t)),f=t=>d(s({},\"__esModule\",{value:!0}),t);var o=p((H,l)=>{l.exports=_jsx_runtime});var j={};E(j,{default:()=>b,frontmatter:()=>P});var e=y(o()),P={title:\"JavaScript ES2015 \\u7C7B\\u548C ES5 \\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\\u4E4B\\u95F4\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function a(t){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",strong:\"strong\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",ul:\"ul\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"ES2015 \\u5F15\\u5165\\u4E86\\u4E00\\u79CD\\u521B\\u5EFA\\u7C7B\\u7684\\u65B0\\u65B9\\u6CD5\\uFF0C\\u4E0E ES5 \\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\\u8BED\\u6CD5\\u76F8\\u6BD4\\uFF0C\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u76F4\\u89C2\\u3001\\u66F4\\u7B80\\u6D01\\u7684\\u65B9\\u5F0F\\u6765\\u5B9A\\u4E49\\u548C\\u4F7F\\u7528\\u5BF9\\u8C61\\u548C\\u7EE7\\u627F\\u3002\\u4EE5\\u4E0B\\u662F\\u6BCF\\u4E2A\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES5 function constructor\nfunction Person(name) {\n  this.name = name;\n}\n\n// ES2015 Class\nclass Person {\n  constructor(name) {\n    this.name = name;\n  }\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5BF9\\u4E8E\\u7B80\\u5355\\u7684\\u6784\\u9020\\u51FD\\u6570\\uFF0C\\u5B83\\u4EEC\\u770B\\u8D77\\u6765\\u975E\\u5E38\\u76F8\\u4F3C\\u3002\\u6784\\u9020\\u51FD\\u6570\\u7684\\u4E3B\\u8981\\u533A\\u522B\\u5728\\u4E8E\\u4F7F\\u7528\\u7EE7\\u627F\\u65F6\\u3002\\u5982\\u679C\\u6211\\u4EEC\\u60F3\\u521B\\u5EFA\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"Student\"}),\" \\u7C7B\\uFF0C\\u8BE5\\u7C7B\\u662F \",(0,e.jsx)(n.code,{children:\"Person\"}),\" \\u7684\\u5B50\\u7C7B\\uFF0C\\u5E76\\u6DFB\\u52A0\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"studentId\"}),\" \\u5B57\\u6BB5\\uFF0C\\u8FD9\\u5C31\\u662F\\u6211\\u4EEC\\u5FC5\\u987B\\u505A\\u7684\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES5 inheritance\n// Superclass\nfunction Person1(name) {\n  this.name = name;\n}\n\n// Subclass\nfunction Student1(name, studentId) {\n  // Call constructor of superclass to initialize superclass-derived members.\n  Person1.call(this, name);\n\n  // Initialize subclass's own members.\n  this.studentId = studentId;\n}\nStudent1.prototype = Object.create(Person1.prototype);\nStudent1.prototype.constructor = Student1;\n\nconst student1 = new Student1('John', 1234);\nconsole.log(student1.name, student1.studentId); // \"John\" 1234\n\n// ES2015 inheritance\n// Superclass\nclass Person2 {\n  constructor(name) {\n    this.name = name;\n  }\n}\n\n// Subclass\nclass Student2 extends Person2 {\n  constructor(name, studentId) {\n    super(name);\n    this.studentId = studentId;\n  }\n}\n\nconst student2 = new Student2('Alice', 5678);\nconsole.log(student2.name, student2.studentId); // \"Alice\" 5678\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 ES5 \\u4E2D\\u4F7F\\u7528\\u7EE7\\u627F\\u8981\\u5197\\u957F\\u5F97\\u591A\\uFF0C\\u800C ES2015 \\u7248\\u672C\\u66F4\\u5BB9\\u6613\\u7406\\u89E3\\u548C\\u8BB0\\u5FC6\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:\"ES5 \\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\\u4E0E ES2015 \\u7C7B\\u7684\\u6BD4\\u8F83\"})}),`\n`,(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:\"\\u7279\\u6027\"}),(0,e.jsx)(n.th,{children:\"ES5 \\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\"}),(0,e.jsx)(n.th,{children:\"ES2015 \\u7C7B\"})]})}),(0,e.jsxs)(n.tbody,{children:[(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"\\u8BED\\u6CD5\"}),(0,e.jsx)(n.td,{children:\"\\u4F7F\\u7528\\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\\u548C\\u539F\\u578B\"}),(0,e.jsxs)(n.td,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"class\"}),\" \\u5173\\u952E\\u5B57\"]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"\\u6784\\u9020\\u51FD\\u6570\"}),(0,e.jsxs)(n.td,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5206\\u914D\\u5C5E\\u6027\\u7684\\u51FD\\u6570\"]}),(0,e.jsxs)(n.td,{children:[\"\\u7C7B\\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"constructor\"}),\" \\u65B9\\u6CD5\"]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"\\u65B9\\u6CD5\\u5B9A\\u4E49\"}),(0,e.jsx)(n.td,{children:\"\\u5728\\u539F\\u578B\\u4E0A\\u5B9A\\u4E49\"}),(0,e.jsx)(n.td,{children:\"\\u5728\\u7C7B\\u4E3B\\u4F53\\u5185\\u5B9A\\u4E49\"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"\\u9759\\u6001\\u65B9\\u6CD5\"}),(0,e.jsx)(n.td,{children:\"\\u76F4\\u63A5\\u6DFB\\u52A0\\u5230\\u6784\\u9020\\u51FD\\u6570\"}),(0,e.jsxs)(n.td,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"static\"}),\" \\u5173\\u952E\\u5B57\\u5B9A\\u4E49\"]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"\\u7EE7\\u627F\"}),(0,e.jsxs)(n.td,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"Object.create()\"}),\" \\u5E76\\u624B\\u52A8\\u8BBE\\u7F6E\\u539F\\u578B\\u94FE\"]}),(0,e.jsxs)(n.td,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"extends\"}),\" \\u5173\\u952E\\u5B57\\u548C \",(0,e.jsx)(n.code,{children:\"super\"}),\" \\u51FD\\u6570\"]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"\\u53EF\\u8BFB\\u6027\"}),(0,e.jsx)(n.td,{children:\"\\u4E0D\\u592A\\u76F4\\u89C2\\uFF0C\\u66F4\\u5197\\u957F\"}),(0,e.jsx)(n.td,{children:\"\\u66F4\\u7B80\\u6D01\\u76F4\\u89C2\"})]})]})]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"ES5 \\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570 vs ES2015 \\u7C7B\"}),`\n`,(0,e.jsx)(n.p,{children:\"ES5 \\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\\u548C ES2015 \\u7C7B\\u662F JavaScript \\u4E2D\\u5B9A\\u4E49\\u7C7B\\u7684\\u4E24\\u79CD\\u4E0D\\u540C\\u65B9\\u5F0F\\u3002\\u5B83\\u4EEC\\u90FD\\u670D\\u52A1\\u4E8E\\u76F8\\u540C\\u7684\\u76EE\\u7684\\uFF0C\\u4F46\\u5B83\\u4EEC\\u5177\\u6709\\u4E0D\\u540C\\u7684\\u8BED\\u6CD5\\u548C\\u884C\\u4E3A\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"ES5 \\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 ES5 \\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\\u548C\\u539F\\u578B\\u5B9A\\u4E49\\u7C7B\\u4F3C\\u7C7B\\u7684\\u7ED3\\u6784\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u4F8B\\u5B50\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES5 function constructor\nfunction Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\nPerson.prototype.greet = function () {\n  console.log(\n    'Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.',\n  );\n};\n\n// Creating an instance\nvar person1 = new Person('John', 30);\nperson1.greet(); // Hello, my name is John and I am 30 years old.\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"ES2015 \\u7C7B\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"ES2015 \\u5F15\\u5165\\u4E86 \",(0,e.jsx)(n.code,{children:\"class\"}),\" \\u8BED\\u6CD5\\uFF0C\\u5B83\\u7B80\\u5316\\u4E86\\u7C7B\\u7684\\u5B9A\\u4E49\\uFF0C\\u5E76\\u652F\\u6301\\u66F4\\u591A\\u529F\\u80FD\\uFF0C\\u4F8B\\u5982\\u9759\\u6001\\u65B9\\u6CD5\\u548C\\u5B50\\u7C7B\\u5316\\u3002\\u4EE5\\u4E0B\\u662F\\u4F7F\\u7528 ES2015 \\u7684\\u76F8\\u540C\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES2015 Class\nclass Person {\n  constructor(name, age) {\n    this.name = name;\n    this.age = age;\n  }\n\n  greet() {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`,\n    );\n  }\n}\n\n// Creating an instance\nconst person1 = new Person('John', 30);\nperson1.greet(); // Hello, my name is John and I am 30 years old.\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E3B\\u8981\\u533A\\u522B\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u8BED\\u6CD5\\u548C\\u53EF\\u8BFB\\u6027\"}),\"\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES5\"}),\"\\uFF1A\\u4F7F\\u7528\\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\\u548C\\u539F\\u578B\\uFF0C\\u8FD9\\u4E0D\\u592A\\u76F4\\u89C2\\uFF0C\\u4E5F\\u66F4\\u96BE\\u9605\\u8BFB\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES2015\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"class\"}),\" \\u5173\\u952E\\u5B57\\uFF0C\\u4F7F\\u4EE3\\u7801\\u66F4\\u7B80\\u6D01\\uFF0C\\u66F4\\u5BB9\\u6613\\u7406\\u89E3\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u9759\\u6001\\u65B9\\u6CD5\"}),\"\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES5\"}),\"\\uFF1A\\u9759\\u6001\\u65B9\\u6CD5\\u76F4\\u63A5\\u6DFB\\u52A0\\u5230\\u6784\\u9020\\u51FD\\u6570\\u4E2D\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES2015\"}),\"\\uFF1A\\u9759\\u6001\\u65B9\\u6CD5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"static\"}),\" \\u5173\\u952E\\u5B57\\u5728\\u7C7B\\u4E2D\\u5B9A\\u4E49\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES5\nfunction Person1(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\nPerson1.sayHi = function () {\n  console.log('Hi from ES5!');\n};\n\nPerson1.sayHi(); // Hi from ES5!\n\n// ES2015\nclass Person2 {\n  static sayHi() {\n    console.log('Hi from ES2015!');\n  }\n}\nPerson2.sayHi(); // Hi from ES2015!\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:\"\\u7EE7\\u627F\"})}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES5\"}),\"\\uFF1A\\u7EE7\\u627F\\u662F\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"Object.create()\"}),\" \\u5E76\\u624B\\u52A8\\u8BBE\\u7F6E\\u539F\\u578B\\u94FE\\u6765\\u5B9E\\u73B0\\u7684\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES2015\"}),\"\\uFF1A\\u4F7F\\u7528 extends \\u5173\\u952E\\u5B57\\uFF0C\\u7EE7\\u627F\\u66F4\\u52A0\\u7B80\\u5355\\u76F4\\u89C2\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES5 Inheritance\n\n// ES5 function constructor\nfunction Person1(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\nPerson1.prototype.greet = function () {\n  console.log(\n    \\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`,\n  );\n};\n\nfunction Student1(name, age, grade) {\n  Person1.call(this, name, age);\n  this.grade = grade;\n}\n\nStudent1.prototype = Object.create(Person1.prototype);\nStudent1.prototype.constructor = Student1;\n\nStudent1.prototype.study = function () {\n  console.log(this.name + ' is studying.');\n};\n\nvar student1 = new Student1('John', 22, 'B+');\nstudent1.greet(); // Hello, my name is John and I am 22 years old.\nstudent1.study(); // John is studying.\n\n// ES2015 Inheritance\n\n// ES2015 Class\nclass Person2 {\n  constructor(name, age) {\n    this.name = name;\n    this.age = age;\n  }\n\n  greet() {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`,\n    );\n  }\n}\n\nclass Student2 extends Person2 {\n  constructor(name, age, grade) {\n    super(name, age);\n    this.grade = grade;\n  }\n\n  study() {\n    console.log(\\`\\${this.name} is studying.\\`);\n  }\n}\n\nconst student2 = new Student2('Alice', 20, 'A');\nstudent2.greet(); // Hello, my name is Alice and I am 20 years old.\nstudent2.study(); // Alice is studying.\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"super\"}),\" \\u8C03\\u7528\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES5\"}),\"\\uFF1A\\u624B\\u52A8\\u8C03\\u7528\\u7236\\u6784\\u9020\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES2015\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"super\"}),\" \\u5173\\u952E\\u5B57\\u8C03\\u7528\\u7236\\u7C7B\\u7684\\u6784\\u9020\\u51FD\\u6570\\u548C\\u65B9\\u6CD5\\u3002\"]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7ED3\\u8BBA\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u867D\\u7136 ES5 \\u548C ES2015 \\u65B9\\u6CD5\\u90FD\\u53EF\\u4EE5\\u5B9E\\u73B0\\u76F8\\u540C\\u7684\\u529F\\u80FD\\uFF0C\\u4F46 ES2015 \\u7C7B\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u6E05\\u6670\\u3001\\u66F4\\u7B80\\u6D01\\u7684\\u65B9\\u5F0F\\u6765\\u5B9A\\u4E49\\u548C\\u4F7F\\u7528 JavaScript \\u4E2D\\u7684\\u9762\\u5411\\u5BF9\\u8C61\\u7ED3\\u6784\\uFF0C\\u8FD9\\u4F7F\\u5F97\\u4EE3\\u7801\\u66F4\\u5BB9\\u6613\\u7F16\\u5199\\u3001\\u9605\\u8BFB\\u548C\\u7EF4\\u62A4\\u3002 \\u5982\\u679C\\u60A8\\u6B63\\u5728\\u4F7F\\u7528\\u73B0\\u4EE3 JavaScript\\uFF0C\\u901A\\u5E38\\u5EFA\\u8BAE\\u4F7F\\u7528 ES2015 \\u7C7B\\u800C\\u4E0D\\u662F ES5 \\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u8D44\\u6E90\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\",children:\"\\u7C7B - MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#inheritance\",children:\"\\u7EE7\\u627F - MDN \"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/06_object.html\",children:\"\\u5BF9\\u8C61\\u7684\\u79D8\\u5BC6\\u751F\\u6D3B\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.educative.io/courses/learn-object-oriented-programming-in-javascript/es2015-vs-es5\",children:\"ES2015 vs ES5\"})}),`\n`]})]})}function v(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(a,t)})):a(t)}var b=v;return f(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var E=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),y=(t,n)=>{for(var r in n)s(t,r,{get:n[r],enumerable:!0})},i=(t,n,r,d)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of g(n))!p.call(t,c)&&c!==r&&s(t,c,{get:()=>n[c],enumerable:!(d=m(n,c))||d.enumerable});return t};var f=(t,n,r)=>(r=t!=null?u(S(t)):{},i(n||!t||!t.__esModule?s(r,\"default\",{value:t,enumerable:!0}):r,t)),P=t=>i(s({},\"__esModule\",{value:!0}),t);var o=E((j,l)=>{l.exports=_jsx_runtime});var I={};y(I,{default:()=>h,frontmatter:()=>v});var e=f(o()),v={title:\"JavaScript ES2015 \\u7C7B\\u548C ES5 \\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\\u4E4B\\u95F4\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function a(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"ES2015 \\u5F15\\u5165\\u4E86\\u4E00\\u79CD\\u521B\\u5EFA\\u7C7B\\u7684\\u65B0\\u65B9\\u6CD5\\uFF0C\\u4E0E ES5 \\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\\u8BED\\u6CD5\\u76F8\\u6BD4\\uFF0C\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u76F4\\u89C2\\u3001\\u66F4\\u7B80\\u6D01\\u7684\\u65B9\\u5F0F\\u6765\\u5B9A\\u4E49\\u548C\\u4F7F\\u7528\\u5BF9\\u8C61\\u548C\\u7EE7\\u627F\\u3002\\u4EE5\\u4E0B\\u662F\\u6BCF\\u4E2A\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES5 function constructor\nfunction Person(name) {\n  this.name = name;\n}\n\n// ES2015 Class\nclass Person {\n  constructor(name) {\n    this.name = name;\n  }\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5BF9\\u4E8E\\u7B80\\u5355\\u7684\\u6784\\u9020\\u51FD\\u6570\\uFF0C\\u5B83\\u4EEC\\u770B\\u8D77\\u6765\\u975E\\u5E38\\u76F8\\u4F3C\\u3002\\u6784\\u9020\\u51FD\\u6570\\u7684\\u4E3B\\u8981\\u533A\\u522B\\u5728\\u4E8E\\u4F7F\\u7528\\u7EE7\\u627F\\u65F6\\u3002\\u5982\\u679C\\u6211\\u4EEC\\u60F3\\u521B\\u5EFA\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"Student\"}),\" \\u7C7B\\uFF0C\\u8BE5\\u7C7B\\u662F \",(0,e.jsx)(n.code,{children:\"Person\"}),\" \\u7684\\u5B50\\u7C7B\\uFF0C\\u5E76\\u6DFB\\u52A0\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"studentId\"}),\" \\u5B57\\u6BB5\\uFF0C\\u8FD9\\u5C31\\u662F\\u6211\\u4EEC\\u5FC5\\u987B\\u505A\\u7684\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES5 inheritance\n// Superclass\nfunction Person1(name) {\n  this.name = name;\n}\n\n// Subclass\nfunction Student1(name, studentId) {\n  // Call constructor of superclass to initialize superclass-derived members.\n  Person1.call(this, name);\n\n  // Initialize subclass's own members.\n  this.studentId = studentId;\n}\nStudent1.prototype = Object.create(Person1.prototype);\nStudent1.prototype.constructor = Student1;\n\nconst student1 = new Student1('John', 1234);\nconsole.log(student1.name, student1.studentId); // \"John\" 1234\n\n// ES2015 inheritance\n// Superclass\nclass Person2 {\n  constructor(name) {\n    this.name = name;\n  }\n}\n\n// Subclass\nclass Student2 extends Person2 {\n  constructor(name, studentId) {\n    super(name);\n    this.studentId = studentId;\n  }\n}\n\nconst student2 = new Student2('Alice', 5678);\nconsole.log(student2.name, student2.studentId); // \"Alice\" 5678\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 ES5 \\u4E2D\\u4F7F\\u7528\\u7EE7\\u627F\\u8981\\u5197\\u957F\\u5F97\\u591A\\uFF0C\\u800C ES2015 \\u7248\\u672C\\u66F4\\u5BB9\\u6613\\u7406\\u89E3\\u548C\\u8BB0\\u5FC6\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:\"ES5 \\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\\u4E0E ES2015 \\u7C7B\\u7684\\u6BD4\\u8F83\"})}),`\n`,(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:\"\\u7279\\u6027\"}),(0,e.jsx)(n.th,{children:\"ES5 \\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\"}),(0,e.jsx)(n.th,{children:\"ES2015 \\u7C7B\"})]})}),(0,e.jsxs)(n.tbody,{children:[(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"\\u8BED\\u6CD5\"}),(0,e.jsx)(n.td,{children:\"\\u4F7F\\u7528\\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\\u548C\\u539F\\u578B\"}),(0,e.jsxs)(n.td,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"class\"}),\" \\u5173\\u952E\\u5B57\"]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"\\u6784\\u9020\\u51FD\\u6570\"}),(0,e.jsxs)(n.td,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5206\\u914D\\u5C5E\\u6027\\u7684\\u51FD\\u6570\"]}),(0,e.jsxs)(n.td,{children:[\"\\u7C7B\\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"constructor\"}),\" \\u65B9\\u6CD5\"]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"\\u65B9\\u6CD5\\u5B9A\\u4E49\"}),(0,e.jsx)(n.td,{children:\"\\u5728\\u539F\\u578B\\u4E0A\\u5B9A\\u4E49\"}),(0,e.jsx)(n.td,{children:\"\\u5728\\u7C7B\\u4E3B\\u4F53\\u5185\\u5B9A\\u4E49\"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"\\u9759\\u6001\\u65B9\\u6CD5\"}),(0,e.jsx)(n.td,{children:\"\\u76F4\\u63A5\\u6DFB\\u52A0\\u5230\\u6784\\u9020\\u51FD\\u6570\"}),(0,e.jsxs)(n.td,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"static\"}),\" \\u5173\\u952E\\u5B57\\u5B9A\\u4E49\"]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"\\u7EE7\\u627F\"}),(0,e.jsxs)(n.td,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"Object.create()\"}),\" \\u5E76\\u624B\\u52A8\\u8BBE\\u7F6E\\u539F\\u578B\\u94FE\"]}),(0,e.jsxs)(n.td,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"extends\"}),\" \\u5173\\u952E\\u5B57\\u548C \",(0,e.jsx)(n.code,{children:\"super\"}),\" \\u51FD\\u6570\"]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\"\\u53EF\\u8BFB\\u6027\"}),(0,e.jsx)(n.td,{children:\"\\u4E0D\\u592A\\u76F4\\u89C2\\uFF0C\\u66F4\\u5197\\u957F\"}),(0,e.jsx)(n.td,{children:\"\\u66F4\\u7B80\\u6D01\\u76F4\\u89C2\"})]})]})]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"ES5 \\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570 vs ES2015 \\u7C7B\"}),`\n`,(0,e.jsx)(n.p,{children:\"ES5 \\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\\u548C ES2015 \\u7C7B\\u662F JavaScript \\u4E2D\\u5B9A\\u4E49\\u7C7B\\u7684\\u4E24\\u79CD\\u4E0D\\u540C\\u65B9\\u5F0F\\u3002\\u5B83\\u4EEC\\u90FD\\u670D\\u52A1\\u4E8E\\u76F8\\u540C\\u7684\\u76EE\\u7684\\uFF0C\\u4F46\\u5B83\\u4EEC\\u5177\\u6709\\u4E0D\\u540C\\u7684\\u8BED\\u6CD5\\u548C\\u884C\\u4E3A\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"ES5 \\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 ES5 \\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\\u548C\\u539F\\u578B\\u5B9A\\u4E49\\u7C7B\\u4F3C\\u7C7B\\u7684\\u7ED3\\u6784\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u4F8B\\u5B50\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES5 function constructor\nfunction Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\nPerson.prototype.greet = function () {\n  console.log(\n    'Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.',\n  );\n};\n\n// Creating an instance\nvar person1 = new Person('John', 30);\nperson1.greet(); // Hello, my name is John and I am 30 years old.\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"ES2015 \\u7C7B\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"ES2015 \\u5F15\\u5165\\u4E86 \",(0,e.jsx)(n.code,{children:\"class\"}),\" \\u8BED\\u6CD5\\uFF0C\\u5B83\\u7B80\\u5316\\u4E86\\u7C7B\\u7684\\u5B9A\\u4E49\\uFF0C\\u5E76\\u652F\\u6301\\u66F4\\u591A\\u529F\\u80FD\\uFF0C\\u4F8B\\u5982\\u9759\\u6001\\u65B9\\u6CD5\\u548C\\u5B50\\u7C7B\\u5316\\u3002\\u4EE5\\u4E0B\\u662F\\u4F7F\\u7528 ES2015 \\u7684\\u76F8\\u540C\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES2015 Class\nclass Person {\n  constructor(name, age) {\n    this.name = name;\n    this.age = age;\n  }\n\n  greet() {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`,\n    );\n  }\n}\n\n// Creating an instance\nconst person1 = new Person('John', 30);\nperson1.greet(); // Hello, my name is John and I am 30 years old.\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E3B\\u8981\\u533A\\u522B\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u8BED\\u6CD5\\u548C\\u53EF\\u8BFB\\u6027\"}),\"\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES5\"}),\"\\uFF1A\\u4F7F\\u7528\\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\\u548C\\u539F\\u578B\\uFF0C\\u8FD9\\u4E0D\\u592A\\u76F4\\u89C2\\uFF0C\\u4E5F\\u66F4\\u96BE\\u9605\\u8BFB\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES2015\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"class\"}),\" \\u5173\\u952E\\u5B57\\uFF0C\\u4F7F\\u4EE3\\u7801\\u66F4\\u7B80\\u6D01\\uFF0C\\u66F4\\u5BB9\\u6613\\u7406\\u89E3\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u9759\\u6001\\u65B9\\u6CD5\"}),\"\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES5\"}),\"\\uFF1A\\u9759\\u6001\\u65B9\\u6CD5\\u76F4\\u63A5\\u6DFB\\u52A0\\u5230\\u6784\\u9020\\u51FD\\u6570\\u4E2D\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES2015\"}),\"\\uFF1A\\u9759\\u6001\\u65B9\\u6CD5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"static\"}),\" \\u5173\\u952E\\u5B57\\u5728\\u7C7B\\u4E2D\\u5B9A\\u4E49\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES5\nfunction Person1(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\nPerson1.sayHi = function () {\n  console.log('Hi from ES5!');\n};\n\nPerson1.sayHi(); // Hi from ES5!\n\n// ES2015\nclass Person2 {\n  static sayHi() {\n    console.log('Hi from ES2015!');\n  }\n}\nPerson2.sayHi(); // Hi from ES2015!\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:\"\\u7EE7\\u627F\"})}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES5\"}),\"\\uFF1A\\u7EE7\\u627F\\u662F\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"Object.create()\"}),\" \\u5E76\\u624B\\u52A8\\u8BBE\\u7F6E\\u539F\\u578B\\u94FE\\u6765\\u5B9E\\u73B0\\u7684\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES2015\"}),\"\\uFF1A\\u4F7F\\u7528 extends \\u5173\\u952E\\u5B57\\uFF0C\\u7EE7\\u627F\\u66F4\\u52A0\\u7B80\\u5355\\u76F4\\u89C2\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// ES5 Inheritance\n\n// ES5 function constructor\nfunction Person1(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\nPerson1.prototype.greet = function () {\n  console.log(\n    \\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`,\n  );\n};\n\nfunction Student1(name, age, grade) {\n  Person1.call(this, name, age);\n  this.grade = grade;\n}\n\nStudent1.prototype = Object.create(Person1.prototype);\nStudent1.prototype.constructor = Student1;\n\nStudent1.prototype.study = function () {\n  console.log(this.name + ' is studying.');\n};\n\nvar student1 = new Student1('John', 22, 'B+');\nstudent1.greet(); // Hello, my name is John and I am 22 years old.\nstudent1.study(); // John is studying.\n\n// ES2015 Inheritance\n\n// ES2015 Class\nclass Person2 {\n  constructor(name, age) {\n    this.name = name;\n    this.age = age;\n  }\n\n  greet() {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I am \\${this.age} years old.\\`,\n    );\n  }\n}\n\nclass Student2 extends Person2 {\n  constructor(name, age, grade) {\n    super(name, age);\n    this.grade = grade;\n  }\n\n  study() {\n    console.log(\\`\\${this.name} is studying.\\`);\n  }\n}\n\nconst student2 = new Student2('Alice', 20, 'A');\nstudent2.greet(); // Hello, my name is Alice and I am 20 years old.\nstudent2.study(); // Alice is studying.\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"super\"}),\" \\u8C03\\u7528\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES5\"}),\"\\uFF1A\\u624B\\u52A8\\u8C03\\u7528\\u7236\\u6784\\u9020\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ES2015\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"super\"}),\" \\u5173\\u952E\\u5B57\\u8C03\\u7528\\u7236\\u7C7B\\u7684\\u6784\\u9020\\u51FD\\u6570\\u548C\\u65B9\\u6CD5\\u3002\"]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7ED3\\u8BBA\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u867D\\u7136 ES5 \\u548C ES2015 \\u65B9\\u6CD5\\u90FD\\u53EF\\u4EE5\\u5B9E\\u73B0\\u76F8\\u540C\\u7684\\u529F\\u80FD\\uFF0C\\u4F46 ES2015 \\u7C7B\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u6E05\\u6670\\u3001\\u66F4\\u7B80\\u6D01\\u7684\\u65B9\\u5F0F\\u6765\\u5B9A\\u4E49\\u548C\\u4F7F\\u7528 JavaScript \\u4E2D\\u7684\\u9762\\u5411\\u5BF9\\u8C61\\u7ED3\\u6784\\uFF0C\\u8FD9\\u4F7F\\u5F97\\u4EE3\\u7801\\u66F4\\u5BB9\\u6613\\u7F16\\u5199\\u3001\\u9605\\u8BFB\\u548C\\u7EF4\\u62A4\\u3002 \\u5982\\u679C\\u60A8\\u6B63\\u5728\\u4F7F\\u7528\\u73B0\\u4EE3 JavaScript\\uFF0C\\u901A\\u5E38\\u5EFA\\u8BAE\\u4F7F\\u7528 ES2015 \\u7C7B\\u800C\\u4E0D\\u662F ES5 \\u51FD\\u6570\\u6784\\u9020\\u51FD\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u8D44\\u6E90\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\",children:\"\\u7C7B - MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#inheritance\",children:\"\\u7EE7\\u627F - MDN \"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/06_object.html\",children:\"\\u5BF9\\u8C61\\u7684\\u79D8\\u5BC6\\u751F\\u6D3B\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.educative.io/courses/learn-object-oriented-programming-in-javascript/es2015-vs-es5\",children:\"ES2015 vs ES5\"})}),`\n`]})]})}function h(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(a,{...t})}):a(t)}return P(I);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-map-set-and-weakmap-weakset/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-map-set-and-weakmap-weakset/en-US.json
index 2ba20127a..033bc3d1d 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-map-set-and-weakmap-weakset/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-map-set-and-weakmap-weakset/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-differences-between-map-set-and-weakmap-weakset/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),m=(r,e)=>{for(var t in e)c(r,t,{get:e[t],enumerable:!0})},o=(r,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!b.call(r,a)&&a!==t&&c(r,a,{get:()=>e[a],enumerable:!(i=u(e,a))||i.enumerable});return r};var k=(r,e,t)=>(t=r!=null?h(g(r)):{},o(e||!r||!r.__esModule?c(t,\"default\",{value:r,enumerable:!0}):t,r)),v=r=>o(c({},\"__esModule\",{value:!0}),r);var d=f((M,l)=>{l.exports=_jsx_runtime});var S={};m(S,{default:()=>j,frontmatter:()=>y});var n=k(d()),y={title:\"What are the differences between `Map`/`Set` and `WeakMap`/`WeakSet` in JavaScript?\"};function s(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",strong:\"strong\",ul:\"ul\",li:\"li\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",hr:\"hr\",ol:\"ol\",h3:\"h3\",pre:\"pre\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The primary difference between \",(0,n.jsx)(e.code,{children:\"Map\"}),\"/\",(0,n.jsx)(e.code,{children:\"Set\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\"/\",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" in JavaScript lies in how they handle keys. Here's a breakdown:\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" vs. \",(0,n.jsx)(e.code,{children:\"WeakMap\"})]})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\"s allows any data type (strings, numbers, objects) as keys. The key-value pairs remain in memory as long as the \",(0,n.jsx)(e.code,{children:\"Map\"}),\" object itself is referenced. Thus they are suitable for general-purpose key-value storage where you want to maintain references to both keys and values. Common use cases include storing user data, configuration settings, or relationships between objects.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"WeakMap\"}),\"s only allows objects as keys. However, these object keys are held weakly. This means the garbage collector can remove them from memory even if the \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" itself still exists, as long as there are no other references to those objects. \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\"s are ideal for scenarios where you want to associate data with objects without preventing those objects from being garbage collected. This can be useful for things like:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Caching data based on objects without preventing garbage collection of the objects themselves.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Storing private data associated with DOM nodes without affecting their lifecycle.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:\"Set\"}),\" vs. \",(0,n.jsx)(e.code,{children:\"WeakSet\"})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Similar to \",(0,n.jsx)(e.code,{children:\"Map\"}),\", \",(0,n.jsx)(e.code,{children:\"Set\"}),\"s allow any data type as keys. The elements within a \",(0,n.jsx)(e.code,{children:\"Set\"}),\" must be unique. \",(0,n.jsx)(e.code,{children:\"Set\"}),\"s are useful for storing unique values and checking for membership efficiently. Common use cases include removing duplicates from arrays or keeping track of completed tasks.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"On the other hand, \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" only allows objects as elements, and these object elements are held weakly, similar to \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" keys. \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\"s are less commonly used, but applicable when you want a collection of unique objects without affecting their garbage collection. This might be necessary for:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Tracking DOM nodes that have been interacted with without affecting their memory management.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Implementing custom object weak references for specific use cases.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Here's a table summarizing the key differences:\"})}),`\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:\"Feature\"}),(0,n.jsx)(e.th,{children:\"Map\"}),(0,n.jsx)(e.th,{children:\"WeakMap\"}),(0,n.jsx)(e.th,{children:\"Set\"}),(0,n.jsx)(e.th,{children:\"WeakSet\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Key Types\"}),(0,n.jsx)(e.td,{children:\"Any data type\"}),(0,n.jsx)(e.td,{children:\"Objects (weak references)\"}),(0,n.jsx)(e.td,{children:\"Any data type (unique)\"}),(0,n.jsx)(e.td,{children:\"Objects (weak references, unique)\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Garbage Collection\"}),(0,n.jsx)(e.td,{children:\"Keys and values are not garbage collected\"}),(0,n.jsx)(e.td,{children:\"Keys can be garbage collected if not referenced elsewhere\"}),(0,n.jsx)(e.td,{children:\"Elements are not garbage collected\"}),(0,n.jsx)(e.td,{children:\"Elements can be garbage collected if not referenced elsewhere\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Use Cases\"}),(0,n.jsx)(e.td,{children:\"General-purpose key-value storage\"}),(0,n.jsx)(e.td,{children:\"Caching, private DOM node data\"}),(0,n.jsx)(e.td,{children:\"Removing duplicates, membership checks\"}),(0,n.jsx)(e.td,{children:\"Object weak references, custom use cases\"})]})]})]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Choosing between them\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"Map\"}),\" and \",(0,n.jsx)(e.code,{children:\"Set\"}),\" for most scenarios where you need to store key-value pairs or unique elements and want to maintain references to both the keys/elements and the values.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" cautiously in specific situations where you want to associate data with objects without affecting their garbage collection. Be aware of the implications of weak references and potential memory leaks if not used correctly.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\"/\",(0,n.jsx)(e.code,{children:\"Set\"}),\" vs \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\"/\",(0,n.jsx)(e.code,{children:\"WeakSet\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The key differences between \",(0,n.jsx)(e.code,{children:\"Map\"}),\"/\",(0,n.jsx)(e.code,{children:\"Set\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\"/\",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" in JavaScript are:\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Key types\"}),\": \",(0,n.jsx)(e.code,{children:\"Map\"}),\" and \",(0,n.jsx)(e.code,{children:\"Set\"}),\" can have keys of any type (objects, primitive values, etc.), while \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" can only have objects as keys. Primitive values like strings or numbers are not allowed as keys in \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Memory management\"}),\": The main difference lies in how they handle memory. \",(0,n.jsx)(e.code,{children:\"Map\"}),\" and \",(0,n.jsx)(e.code,{children:\"Set\"}),\" have strong references to their keys and values, which means they will prevent garbage collection of those values. On the other hand, \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" have weak references to their keys (objects), allowing those objects to be garbage collected if there are no other strong references to them.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Key enumeration\"}),\": Keys in \",(0,n.jsx)(e.code,{children:\"Map\"}),\" and \",(0,n.jsx)(e.code,{children:\"Set\"}),\" are enumerable (can be iterated over), while keys in \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" are not enumerable. This means you cannot get a list of keys or values from a \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" or \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:\"size\"}),\" property\"]}),\": \",(0,n.jsx)(e.code,{children:\"Map\"}),\" and \",(0,n.jsx)(e.code,{children:\"Set\"}),\" have a \",(0,n.jsx)(e.code,{children:\"size\"}),\" property that returns the number of elements, while \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" do not have a \",(0,n.jsx)(e.code,{children:\"size\"}),\" property because their size can change due to garbage collection.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Use cases\"}),\": \",(0,n.jsx)(e.code,{children:\"Map\"}),\" and \",(0,n.jsx)(e.code,{children:\"Set\"}),\" are useful for general-purpose data structures and caching, while \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" are primarily used for storing metadata or additional data related to objects, without preventing those objects from being garbage collected.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" and \",(0,n.jsx)(e.code,{children:\"Set\"}),\" are regular data structures that maintain strong references to their keys and values, while \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" are designed for scenarios where you want to associate data with objects without preventing those objects from being garbage collected when they are no longer needed.\"]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Use cases of \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakSet\"})]}),`\n`,(0,n.jsx)(e.h3,{children:\"Tracking active users\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In a chat application, you might want to track which user objects are currently active without preventing garbage collection when the user logs out or the session expires. We use a \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" to track active user objects. When a user logs out or their session expires, the user object can be garbage-collected if there are no other references to it.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const activeUsers = new WeakSet();\n\n// Function to mark a user as active\nfunction markUserActive(user) {\n  activeUsers.add(user);\n}\n\n// Function to check if a user is active\nfunction isUserActive(user) {\n  return activeUsers.has(user);\n}\n\n// Example usage\nlet user1 = { id: 1, name: 'Alice' };\nlet user2 = { id: 2, name: 'Bob' };\n\nmarkUserActive(user1);\nmarkUserActive(user2);\n\nconsole.log(isUserActive(user1)); // true\nconsole.log(isUserActive(user2)); // true\n\n// Simulate user logging out\nuser1 = null;\n\n// user1 is now eligible for garbage collection\nconsole.log(isUserActive(user1)); // false\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Detecting circular references\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" is provides a way of guarding against circular data structures by tracking which objects have already been processed.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a WeakSet to track visited objects\nconst visited = new WeakSet();\n\n// Function to traverse an object recursively\nfunction traverse(obj) {\n  // Check if the object has already been visited\n  if (visited.has(obj)) {\n    return;\n  }\n\n  // Add the object to the visited set\n  visited.add(obj);\n\n  // Traverse the object's properties\n  for (let prop in obj) {\n    if (obj.hasOwnProperty(prop)) {\n      let value = obj[prop];\n      if (typeof value === 'object' && value !== null) {\n        traverse(value);\n      }\n    }\n  }\n\n  // Process the object\n  console.log(obj);\n}\n\n// Create an object with a circular reference\nconst obj = {\n  name: 'John',\n  age: 30,\n  friends: [\n    { name: 'Alice', age: 25 },\n    { name: 'Bob', age: 28 },\n  ],\n};\n\n// Create a circular reference\nobj.self = obj;\n\n// Traverse the object\ntraverse(obj);\n`})}),`\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.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map\",children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap\",children:[(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set\",children:[(0,n.jsx)(e.code,{children:\"Set\"}),\" | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet\",children:[(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://javascript.info/map-set\",children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" and \",(0,n.jsx)(e.code,{children:\"Set\"}),\" | Javascript.info\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://javascript.info/weakmap-weakset\",children:[(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" | Javascript.info\"]})}),`\n`]})]})}function w(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(s,r)})):s(r)}var j=w;return v(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),k=(r,e)=>{for(var t in e)c(r,t,{get:e[t],enumerable:!0})},o=(r,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of g(e))!f.call(r,a)&&a!==t&&c(r,a,{get:()=>e[a],enumerable:!(i=p(e,a))||i.enumerable});return r};var v=(r,e,t)=>(t=r!=null?u(b(r)):{},o(e||!r||!r.__esModule?c(t,\"default\",{value:r,enumerable:!0}):t,r)),y=r=>o(c({},\"__esModule\",{value:!0}),r);var d=m((W,l)=>{l.exports=_jsx_runtime});var j={};k(j,{default:()=>h,frontmatter:()=>w});var n=v(d()),w={title:\"What are the differences between `Map`/`Set` and `WeakMap`/`WeakSet` in JavaScript?\"};function s(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The primary difference between \",(0,n.jsx)(e.code,{children:\"Map\"}),\"/\",(0,n.jsx)(e.code,{children:\"Set\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\"/\",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" in JavaScript lies in how they handle keys. Here's a breakdown:\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" vs. \",(0,n.jsx)(e.code,{children:\"WeakMap\"})]})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\"s allows any data type (strings, numbers, objects) as keys. The key-value pairs remain in memory as long as the \",(0,n.jsx)(e.code,{children:\"Map\"}),\" object itself is referenced. Thus they are suitable for general-purpose key-value storage where you want to maintain references to both keys and values. Common use cases include storing user data, configuration settings, or relationships between objects.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"WeakMap\"}),\"s only allows objects as keys. However, these object keys are held weakly. This means the garbage collector can remove them from memory even if the \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" itself still exists, as long as there are no other references to those objects. \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\"s are ideal for scenarios where you want to associate data with objects without preventing those objects from being garbage collected. This can be useful for things like:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Caching data based on objects without preventing garbage collection of the objects themselves.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Storing private data associated with DOM nodes without affecting their lifecycle.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:\"Set\"}),\" vs. \",(0,n.jsx)(e.code,{children:\"WeakSet\"})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Similar to \",(0,n.jsx)(e.code,{children:\"Map\"}),\", \",(0,n.jsx)(e.code,{children:\"Set\"}),\"s allow any data type as keys. The elements within a \",(0,n.jsx)(e.code,{children:\"Set\"}),\" must be unique. \",(0,n.jsx)(e.code,{children:\"Set\"}),\"s are useful for storing unique values and checking for membership efficiently. Common use cases include removing duplicates from arrays or keeping track of completed tasks.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"On the other hand, \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" only allows objects as elements, and these object elements are held weakly, similar to \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" keys. \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\"s are less commonly used, but applicable when you want a collection of unique objects without affecting their garbage collection. This might be necessary for:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Tracking DOM nodes that have been interacted with without affecting their memory management.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Implementing custom object weak references for specific use cases.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Here's a table summarizing the key differences:\"})}),`\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:\"Feature\"}),(0,n.jsx)(e.th,{children:\"Map\"}),(0,n.jsx)(e.th,{children:\"WeakMap\"}),(0,n.jsx)(e.th,{children:\"Set\"}),(0,n.jsx)(e.th,{children:\"WeakSet\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Key Types\"}),(0,n.jsx)(e.td,{children:\"Any data type\"}),(0,n.jsx)(e.td,{children:\"Objects (weak references)\"}),(0,n.jsx)(e.td,{children:\"Any data type (unique)\"}),(0,n.jsx)(e.td,{children:\"Objects (weak references, unique)\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Garbage Collection\"}),(0,n.jsx)(e.td,{children:\"Keys and values are not garbage collected\"}),(0,n.jsx)(e.td,{children:\"Keys can be garbage collected if not referenced elsewhere\"}),(0,n.jsx)(e.td,{children:\"Elements are not garbage collected\"}),(0,n.jsx)(e.td,{children:\"Elements can be garbage collected if not referenced elsewhere\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Use Cases\"}),(0,n.jsx)(e.td,{children:\"General-purpose key-value storage\"}),(0,n.jsx)(e.td,{children:\"Caching, private DOM node data\"}),(0,n.jsx)(e.td,{children:\"Removing duplicates, membership checks\"}),(0,n.jsx)(e.td,{children:\"Object weak references, custom use cases\"})]})]})]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Choosing between them\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"Map\"}),\" and \",(0,n.jsx)(e.code,{children:\"Set\"}),\" for most scenarios where you need to store key-value pairs or unique elements and want to maintain references to both the keys/elements and the values.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" cautiously in specific situations where you want to associate data with objects without affecting their garbage collection. Be aware of the implications of weak references and potential memory leaks if not used correctly.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\"/\",(0,n.jsx)(e.code,{children:\"Set\"}),\" vs \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\"/\",(0,n.jsx)(e.code,{children:\"WeakSet\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The key differences between \",(0,n.jsx)(e.code,{children:\"Map\"}),\"/\",(0,n.jsx)(e.code,{children:\"Set\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\"/\",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" in JavaScript are:\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Key types\"}),\": \",(0,n.jsx)(e.code,{children:\"Map\"}),\" and \",(0,n.jsx)(e.code,{children:\"Set\"}),\" can have keys of any type (objects, primitive values, etc.), while \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" can only have objects as keys. Primitive values like strings or numbers are not allowed as keys in \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Memory management\"}),\": The main difference lies in how they handle memory. \",(0,n.jsx)(e.code,{children:\"Map\"}),\" and \",(0,n.jsx)(e.code,{children:\"Set\"}),\" have strong references to their keys and values, which means they will prevent garbage collection of those values. On the other hand, \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" have weak references to their keys (objects), allowing those objects to be garbage collected if there are no other strong references to them.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Key enumeration\"}),\": Keys in \",(0,n.jsx)(e.code,{children:\"Map\"}),\" and \",(0,n.jsx)(e.code,{children:\"Set\"}),\" are enumerable (can be iterated over), while keys in \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" are not enumerable. This means you cannot get a list of keys or values from a \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" or \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:\"size\"}),\" property\"]}),\": \",(0,n.jsx)(e.code,{children:\"Map\"}),\" and \",(0,n.jsx)(e.code,{children:\"Set\"}),\" have a \",(0,n.jsx)(e.code,{children:\"size\"}),\" property that returns the number of elements, while \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" do not have a \",(0,n.jsx)(e.code,{children:\"size\"}),\" property because their size can change due to garbage collection.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Use cases\"}),\": \",(0,n.jsx)(e.code,{children:\"Map\"}),\" and \",(0,n.jsx)(e.code,{children:\"Set\"}),\" are useful for general-purpose data structures and caching, while \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" are primarily used for storing metadata or additional data related to objects, without preventing those objects from being garbage collected.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" and \",(0,n.jsx)(e.code,{children:\"Set\"}),\" are regular data structures that maintain strong references to their keys and values, while \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" are designed for scenarios where you want to associate data with objects without preventing those objects from being garbage collected when they are no longer needed.\"]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Use cases of \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakSet\"})]}),`\n`,(0,n.jsx)(e.h3,{children:\"Tracking active users\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In a chat application, you might want to track which user objects are currently active without preventing garbage collection when the user logs out or the session expires. We use a \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" to track active user objects. When a user logs out or their session expires, the user object can be garbage-collected if there are no other references to it.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const activeUsers = new WeakSet();\n\n// Function to mark a user as active\nfunction markUserActive(user) {\n  activeUsers.add(user);\n}\n\n// Function to check if a user is active\nfunction isUserActive(user) {\n  return activeUsers.has(user);\n}\n\n// Example usage\nlet user1 = { id: 1, name: 'Alice' };\nlet user2 = { id: 2, name: 'Bob' };\n\nmarkUserActive(user1);\nmarkUserActive(user2);\n\nconsole.log(isUserActive(user1)); // true\nconsole.log(isUserActive(user2)); // true\n\n// Simulate user logging out\nuser1 = null;\n\n// user1 is now eligible for garbage collection\nconsole.log(isUserActive(user1)); // false\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Detecting circular references\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" is provides a way of guarding against circular data structures by tracking which objects have already been processed.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a WeakSet to track visited objects\nconst visited = new WeakSet();\n\n// Function to traverse an object recursively\nfunction traverse(obj) {\n  // Check if the object has already been visited\n  if (visited.has(obj)) {\n    return;\n  }\n\n  // Add the object to the visited set\n  visited.add(obj);\n\n  // Traverse the object's properties\n  for (let prop in obj) {\n    if (obj.hasOwnProperty(prop)) {\n      let value = obj[prop];\n      if (typeof value === 'object' && value !== null) {\n        traverse(value);\n      }\n    }\n  }\n\n  // Process the object\n  console.log(obj);\n}\n\n// Create an object with a circular reference\nconst obj = {\n  name: 'John',\n  age: 30,\n  friends: [\n    { name: 'Alice', age: 25 },\n    { name: 'Bob', age: 28 },\n  ],\n};\n\n// Create a circular reference\nobj.self = obj;\n\n// Traverse the object\ntraverse(obj);\n`})}),`\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.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map\",children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap\",children:[(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set\",children:[(0,n.jsx)(e.code,{children:\"Set\"}),\" | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet\",children:[(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://javascript.info/map-set\",children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" and \",(0,n.jsx)(e.code,{children:\"Set\"}),\" | Javascript.info\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://javascript.info/weakmap-weakset\",children:[(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" | Javascript.info\"]})}),`\n`]})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(s,{...r})}):s(r)}return y(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-map-set-and-weakmap-weakset/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-map-set-and-weakmap-weakset/zh-CN.json
index dfb65f5fe..1105d61d6 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-map-set-and-weakmap-weakset/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-map-set-and-weakmap-weakset/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-differences-between-map-set-and-weakmap-weakset/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var W=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),M=(c,e)=>{for(var r in e)i(c,r,{get:e[r],enumerable:!0})},t=(c,e,r,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of k(e))!u.call(c,d)&&d!==r&&i(c,d,{get:()=>e[d],enumerable:!(l=p(e,d))||l.enumerable});return c};var v=(c,e,r)=>(r=c!=null?s(S(c)):{},t(e||!c||!c.__esModule?i(r,\"default\",{value:c,enumerable:!0}):r,c)),b=c=>t(i({},\"__esModule\",{value:!0}),c);var h=W((_,a)=>{a.exports=_jsx_runtime});var m={};M(m,{default:()=>j,frontmatter:()=>g});var n=v(h()),g={title:\"JavaScript \\u4E2D `Map`/`Set` \\u548C `WeakMap`/`WeakSet` \\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function o(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",strong:\"strong\",ul:\"ul\",li:\"li\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",hr:\"hr\",ol:\"ol\",h3:\"h3\",pre:\"pre\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D \",(0,n.jsx)(e.code,{children:\"Map\"}),\"/\",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\"/\",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u7684\\u4E3B\\u8981\\u533A\\u522B\\u5728\\u4E8E\\u5B83\\u4EEC\\u5982\\u4F55\\u5904\\u7406\\u952E\\u3002\\u4EE5\\u4E0B\\u662F\\u7EC6\\u5206\\uFF1A\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" vs. \",(0,n.jsx)(e.code,{children:\"WeakMap\"})]})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5141\\u8BB8\\u4EFB\\u4F55\\u6570\\u636E\\u7C7B\\u578B\\uFF08\\u5B57\\u7B26\\u4E32\\u3001\\u6570\\u5B57\\u3001\\u5BF9\\u8C61\\uFF09\\u4F5C\\u4E3A\\u952E\\u3002\\u53EA\\u8981\\u5F15\\u7528 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\u672C\\u8EAB\\uFF0C\\u952E\\u503C\\u5BF9\\u5C31\\u4F1A\\u4FDD\\u7559\\u5728\\u5185\\u5B58\\u4E2D\\u3002\\u56E0\\u6B64\\uFF0C\\u5B83\\u4EEC\\u9002\\u7528\\u4E8E\\u901A\\u7528\\u952E\\u503C\\u5B58\\u50A8\\uFF0C\\u60A8\\u5E0C\\u671B\\u7EF4\\u62A4\\u5BF9\\u952E\\u548C\\u503C\\u7684\\u5F15\\u7528\\u3002\\u5E38\\u89C1\\u7528\\u4F8B\\u5305\\u62EC\\u5B58\\u50A8\\u7528\\u6237\\u6570\\u636E\\u3001\\u914D\\u7F6E\\u8BBE\\u7F6E\\u6216\\u5BF9\\u8C61\\u4E4B\\u95F4\\u7684\\u5173\\u7CFB\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u4EC5\\u5141\\u8BB8\\u5BF9\\u8C61\\u4F5C\\u4E3A\\u952E\\u3002\\u4F46\\u662F\\uFF0C\\u8FD9\\u4E9B\\u5BF9\\u8C61\\u952E\\u88AB\\u5F31\\u4FDD\\u5B58\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u5783\\u573E\\u6536\\u96C6\\u5668\\u53EF\\u4EE5\\u4ECE\\u5185\\u5B58\\u4E2D\\u5220\\u9664\\u5B83\\u4EEC\\uFF0C\\u5373\\u4F7F \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u672C\\u8EAB\\u4ECD\\u7136\\u5B58\\u5728\\uFF0C\\u53EA\\u8981\\u6CA1\\u6709\\u5BF9\\u8FD9\\u4E9B\\u5BF9\\u8C61\\u7684\\u5176\\u4ED6\\u5F15\\u7528\\u3002\",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u975E\\u5E38\\u9002\\u5408\\u60A8\\u5E0C\\u671B\\u5C06\\u6570\\u636E\\u4E0E\\u5BF9\\u8C61\\u5173\\u8054\\u800C\\u4E0D\\u4F1A\\u963B\\u6B62\\u8FD9\\u4E9B\\u5BF9\\u8C61\\u88AB\\u5783\\u573E\\u56DE\\u6536\\u7684\\u573A\\u666F\\u3002\\u8FD9\\u5BF9\\u4E8E\\u4EE5\\u4E0B\\u60C5\\u51B5\\u53EF\\u80FD\\u5F88\\u6709\\u7528\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u57FA\\u4E8E\\u5BF9\\u8C61\\u7F13\\u5B58\\u6570\\u636E\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u6B62\\u5BF9\\u8C61\\u672C\\u8EAB\\u7684\\u5783\\u573E\\u56DE\\u6536\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5B58\\u50A8\\u4E0E DOM \\u8282\\u70B9\\u5173\\u8054\\u7684\\u79C1\\u6709\\u6570\\u636E\\uFF0C\\u800C\\u4E0D\\u4F1A\\u5F71\\u54CD\\u5176\\u751F\\u547D\\u5468\\u671F\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:\"Set\"}),\" vs. \",(0,n.jsx)(e.code,{children:\"WeakSet\"})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E0E \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u7C7B\\u4F3C\\uFF0C\",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u5141\\u8BB8\\u4EFB\\u4F55\\u6570\\u636E\\u7C7B\\u578B\\u4F5C\\u4E3A\\u952E\\u3002\",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u4E2D\\u7684\\u5143\\u7D20\\u5FC5\\u987B\\u662F\\u552F\\u4E00\\u7684\\u3002\",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u9002\\u7528\\u4E8E\\u5B58\\u50A8\\u552F\\u4E00\\u503C\\u5E76\\u6709\\u6548\\u68C0\\u67E5\\u6210\\u5458\\u8D44\\u683C\\u3002\\u5E38\\u89C1\\u7528\\u4F8B\\u5305\\u62EC\\u4ECE\\u6570\\u7EC4\\u4E2D\\u5220\\u9664\\u91CD\\u590D\\u9879\\u6216\\u8DDF\\u8E2A\\u5DF2\\u5B8C\\u6210\\u7684\\u4EFB\\u52A1\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u4EC5\\u5141\\u8BB8\\u5BF9\\u8C61\\u4F5C\\u4E3A\\u5143\\u7D20\\uFF0C\\u5E76\\u4E14\\u8FD9\\u4E9B\\u5BF9\\u8C61\\u5143\\u7D20\\u88AB\\u5F31\\u4FDD\\u5B58\\uFF0C\\u7C7B\\u4F3C\\u4E8E \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u952E\\u3002\",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u5F88\\u5C11\\u4F7F\\u7528\\uFF0C\\u4F46\\u5F53\\u60A8\\u9700\\u8981\\u4E00\\u7EC4\\u552F\\u4E00\\u5BF9\\u8C61\\u800C\\u4E0D\\u5F71\\u54CD\\u5176\\u5783\\u573E\\u56DE\\u6536\\u65F6\\u9002\\u7528\\u3002\\u8FD9\\u53EF\\u80FD\\u5BF9\\u4E8E\\u4EE5\\u4E0B\\u60C5\\u51B5\\u662F\\u5FC5\\u8981\\u7684\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u8DDF\\u8E2A\\u5DF2\\u4EA4\\u4E92\\u7684 DOM \\u8282\\u70B9\\uFF0C\\u800C\\u4E0D\\u4F1A\\u5F71\\u54CD\\u5176\\u5185\\u5B58\\u7BA1\\u7406\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u4E3A\\u7279\\u5B9A\\u7528\\u4F8B\\u5B9E\\u73B0\\u81EA\\u5B9A\\u4E49\\u5BF9\\u8C61\\u5F31\\u5F15\\u7528\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"\\u4EE5\\u4E0B\\u662F\\u4E00\\u4E2A\\u603B\\u7ED3\\u5173\\u952E\\u5DEE\\u5F02\\u7684\\u8868\\u683C\\uFF1A\"})}),`\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:\"\\u7279\\u6027\"}),(0,n.jsx)(e.th,{children:\"Map\"}),(0,n.jsx)(e.th,{children:\"WeakMap\"}),(0,n.jsx)(e.th,{children:\"Set\"}),(0,n.jsx)(e.th,{children:\"WeakSet\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u952E\\u7C7B\\u578B\"}),(0,n.jsx)(e.td,{children:\"\\u4EFB\\u4F55\\u6570\\u636E\\u7C7B\\u578B\"}),(0,n.jsx)(e.td,{children:\"\\u5BF9\\u8C61\\uFF08\\u5F31\\u5F15\\u7528\\uFF09\"}),(0,n.jsx)(e.td,{children:\"\\u4EFB\\u4F55\\u6570\\u636E\\u7C7B\\u578B\\uFF08\\u552F\\u4E00\\uFF09\"}),(0,n.jsx)(e.td,{children:\"\\u5BF9\\u8C61\\uFF08\\u5F31\\u5F15\\u7528\\uFF0C\\u552F\\u4E00\\uFF09\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u5783\\u573E\\u56DE\\u6536\"}),(0,n.jsx)(e.td,{children:\"\\u952E\\u548C\\u503C\\u4E0D\\u4F1A\\u88AB\\u5783\\u573E\\u56DE\\u6536\"}),(0,n.jsx)(e.td,{children:\"\\u5982\\u679C\\u6CA1\\u6709\\u5176\\u4ED6\\u5730\\u65B9\\u5F15\\u7528\\uFF0C\\u952E\\u53EF\\u4EE5\\u88AB\\u5783\\u573E\\u56DE\\u6536\"}),(0,n.jsx)(e.td,{children:\"\\u5143\\u7D20\\u4E0D\\u4F1A\\u88AB\\u5783\\u573E\\u56DE\\u6536\"}),(0,n.jsx)(e.td,{children:\"\\u5982\\u679C\\u6CA1\\u6709\\u5176\\u4ED6\\u5730\\u65B9\\u5F15\\u7528\\uFF0C\\u5143\\u7D20\\u53EF\\u4EE5\\u88AB\\u5783\\u573E\\u56DE\\u6536\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u7528\\u4F8B\"}),(0,n.jsx)(e.td,{children:\"\\u901A\\u7528\\u952E\\u503C\\u5B58\\u50A8\"}),(0,n.jsx)(e.td,{children:\"\\u7F13\\u5B58\\u3001\\u79C1\\u6709 DOM \\u8282\\u70B9\\u6570\\u636E\"}),(0,n.jsx)(e.td,{children:\"\\u5220\\u9664\\u91CD\\u590D\\u9879\\u3001\\u6210\\u5458\\u8D44\\u683C\\u68C0\\u67E5\"}),(0,n.jsx)(e.td,{children:\"\\u5BF9\\u8C61\\u5F31\\u5F15\\u7528\\u3001\\u81EA\\u5B9A\\u4E49\\u7528\\u4F8B\"})]})]})]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"\\u5728\\u5B83\\u4EEC\\u4E4B\\u95F4\\u8FDB\\u884C\\u9009\\u62E9\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5728\\u5927\\u591A\\u6570\\u9700\\u8981\\u5B58\\u50A8\\u952E\\u503C\\u5BF9\\u6216\\u552F\\u4E00\\u5143\\u7D20\\u5E76\\u5E0C\\u671B\\u7EF4\\u62A4\\u5BF9\\u952E/\\u5143\\u7D20\\u548C\\u503C\\u7684\\u5F15\\u7528\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Set\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5728\\u7279\\u5B9A\\u60C5\\u51B5\\u4E0B\\u8C28\\u614E\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\"\\uFF0C\\u60A8\\u5E0C\\u671B\\u5C06\\u6570\\u636E\\u4E0E\\u5BF9\\u8C61\\u5173\\u8054\\u800C\\u4E0D\\u4F1A\\u5F71\\u54CD\\u5176\\u5783\\u573E\\u56DE\\u6536\\u3002\\u5982\\u679C\\u4F7F\\u7528\\u4E0D\\u5F53\\uFF0C\\u8BF7\\u6CE8\\u610F\\u5F31\\u5F15\\u7528\\u7684\\u542B\\u4E49\\u548C\\u6F5C\\u5728\\u7684\\u5185\\u5B58\\u6CC4\\u6F0F\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\"/\",(0,n.jsx)(e.code,{children:\"Set\"}),\" vs \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\"/\",(0,n.jsx)(e.code,{children:\"WeakSet\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D \",(0,n.jsx)(e.code,{children:\"Map\"}),\"/\",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\"/\",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u4E4B\\u95F4\\u7684\\u4E3B\\u8981\\u533A\\u522B\\u5728\\u4E8E\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u952E\\u7C7B\\u578B\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u53EF\\u4EE5\\u5177\\u6709\\u4EFB\\u4F55\\u7C7B\\u578B\\u7684\\u952E\\uFF08\\u5BF9\\u8C61\\u3001\\u539F\\u59CB\\u503C\\u7B49\\uFF09\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u53EA\\u80FD\\u5C06\\u5BF9\\u8C61\\u4F5C\\u4E3A\\u952E\\u3002\\u539F\\u59CB\\u503C\\uFF08\\u5982\\u5B57\\u7B26\\u4E32\\u6216\\u6570\\u5B57\\uFF09\\u4E0D\\u5141\\u8BB8\\u4F5C\\u4E3A \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u4E2D\\u7684\\u952E\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5185\\u5B58\\u7BA1\\u7406\"}),\"\\uFF1A\\u4E3B\\u8981\\u533A\\u522B\\u5728\\u4E8E\\u5B83\\u4EEC\\u5982\\u4F55\\u5904\\u7406\\u5185\\u5B58\\u3002\",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u5177\\u6709\\u5BF9\\u5176\\u952E\\u548C\\u503C\\u7684\\u5F3A\\u5F15\\u7528\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4EEC\\u5C06\\u963B\\u6B62\\u5BF9\\u8FD9\\u4E9B\\u503C\\u8FDB\\u884C\\u5783\\u573E\\u56DE\\u6536\\u3002\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u5177\\u6709\\u5BF9\\u5176\\u952E\\uFF08\\u5BF9\\u8C61\\uFF09\\u7684\\u5F31\\u5F15\\u7528\\uFF0C\\u5982\\u679C\\u5BF9\\u5B83\\u4EEC\\u6CA1\\u6709\\u5176\\u4ED6\\u5F3A\\u5F15\\u7528\\uFF0C\\u5219\\u5141\\u8BB8\\u5BF9\\u8FD9\\u4E9B\\u5BF9\\u8C61\\u8FDB\\u884C\\u5783\\u573E\\u56DE\\u6536\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u952E\\u679A\\u4E3E\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u4E2D\\u7684\\u952E\\u662F\\u53EF\\u679A\\u4E3E\\u7684\\uFF08\\u53EF\\u4EE5\\u8FED\\u4EE3\\uFF09\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u4E2D\\u7684\\u952E\\u4E0D\\u53EF\\u679A\\u4E3E\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u60A8\\u65E0\\u6CD5\\u4ECE \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u83B7\\u53D6\\u952E\\u6216\\u503C\\u7684\\u5217\\u8868\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:\"size\"}),\" \\u5C5E\\u6027\"]}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u5177\\u6709\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"size\"}),\" \\u5C5E\\u6027\\uFF0C\\u8BE5\\u5C5E\\u6027\\u8FD4\\u56DE\\u5143\\u7D20\\u7684\\u6570\\u91CF\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u6CA1\\u6709 \",(0,n.jsx)(e.code,{children:\"size\"}),\" \\u5C5E\\u6027\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u7684\\u5927\\u5C0F\\u53EF\\u80FD\\u4F1A\\u56E0\\u5783\\u573E\\u56DE\\u6536\\u800C\\u6539\\u53D8\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u7528\\u4F8B\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u9002\\u7528\\u4E8E\\u901A\\u7528\\u6570\\u636E\\u7ED3\\u6784\\u548C\\u7F13\\u5B58\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u4E3B\\u8981\\u7528\\u4E8E\\u5B58\\u50A8\\u4E0E\\u5BF9\\u8C61\\u76F8\\u5173\\u7684\\u5143\\u6570\\u636E\\u6216\\u5176\\u4ED6\\u6570\\u636E\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u6B62\\u5BF9\\u8FD9\\u4E9B\\u5BF9\\u8C61\\u8FDB\\u884C\\u5783\\u573E\\u56DE\\u6536\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u662F\\u7EF4\\u62A4\\u5BF9\\u5176\\u952E\\u548C\\u503C\\u7684\\u5F3A\\u5F15\\u7528\\u7684\\u5E38\\u89C4\\u6570\\u636E\\u7ED3\\u6784\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u4E13\\u4E3A\\u5E0C\\u671B\\u5C06\\u6570\\u636E\\u4E0E\\u5BF9\\u8C61\\u5173\\u8054\\u800C\\u8BBE\\u8BA1\\u7684\\u573A\\u666F\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u6B62\\u5728\\u4E0D\\u518D\\u9700\\u8981\\u8FD9\\u4E9B\\u5BF9\\u8C61\\u65F6\\u5BF9\\u5B83\\u4EEC\\u8FDB\\u884C\\u5783\\u573E\\u56DE\\u6536\\u3002\"]}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u7684\\u7528\\u4F8B\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8DDF\\u8E2A\\u6D3B\\u8DC3\\u7528\\u6237\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u804A\\u5929\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\uFF0C\\u60A8\\u53EF\\u80FD\\u5E0C\\u671B\\u8DDF\\u8E2A\\u5F53\\u524D\\u5904\\u4E8E\\u6D3B\\u52A8\\u72B6\\u6001\\u7684\\u7528\\u6237\\u5BF9\\u8C61\\uFF0C\\u800C\\u4E0D\\u4F1A\\u5728\\u7528\\u6237\\u6CE8\\u9500\\u6216\\u4F1A\\u8BDD\\u8FC7\\u671F\\u65F6\\u963B\\u6B62\\u5783\\u573E\\u56DE\\u6536\\u3002\\u6211\\u4EEC\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u6765\\u8DDF\\u8E2A\\u6D3B\\u8DC3\\u7684\\u7528\\u6237\\u5BF9\\u8C61\\u3002\\u5F53\\u7528\\u6237\\u6CE8\\u9500\\u6216\\u4ED6\\u4EEC\\u7684\\u4F1A\\u8BDD\\u8FC7\\u671F\\u65F6\\uFF0C\\u5982\\u679C\\u6CA1\\u6709\\u5BF9\\u8BE5\\u7528\\u6237\\u7684\\u5176\\u4ED6\\u5F15\\u7528\\uFF0C\\u5219\\u8BE5\\u7528\\u6237\\u5BF9\\u8C61\\u53EF\\u4EE5\\u88AB\\u5783\\u573E\\u56DE\\u6536\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const activeUsers = new WeakSet();\n\n// Function to mark a user as active\nfunction markUserActive(user) {\n  activeUsers.add(user);\n}\n\n// Function to check if a user is active\nfunction isUserActive(user) {\n  return activeUsers.has(user);\n}\n\n// Example usage\nlet user1 = { id: 1, name: 'Alice' };\nlet user2 = { id: 2, name: 'Bob' };\n\nmarkUserActive(user1);\nmarkUserActive(user2);\n\nconsole.log(isUserActive(user1)); // true\nconsole.log(isUserActive(user2)); // true\n\n// Simulate user logging out\nuser1 = null;\n\n// user1 is now eligible for garbage collection\nconsole.log(isUserActive(user1)); // false\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u68C0\\u6D4B\\u5FAA\\u73AF\\u5F15\\u7528\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u901A\\u8FC7\\u8DDF\\u8E2A\\u54EA\\u4E9B\\u5BF9\\u8C61\\u5DF2\\u7ECF\\u88AB\\u5904\\u7406\\u6765\\u9632\\u6B62\\u5FAA\\u73AF\\u6570\\u636E\\u7ED3\\u6784\\u7684\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a WeakSet to track visited objects\nconst visited = new WeakSet();\n\n// Function to traverse an object recursively\nfunction traverse(obj) {\n  // Check if the object has already been visited\n  if (visited.has(obj)) {\n    return;\n  }\n\n  // Add the object to the visited set\n  visited.add(obj);\n\n  // Traverse the object's properties\n  for (let prop in obj) {\n    if (obj.hasOwnProperty(prop)) {\n      let value = obj[prop];\n      if (typeof value === 'object' && value !== null) {\n        traverse(value);\n      }\n    }\n  }\n\n  // Process the object\n  console.log(obj);\n}\n\n// Create an object with a circular reference\nconst obj = {\n  name: 'John',\n  age: 30,\n  friends: [\n    { name: 'Alice', age: 25 },\n    { name: 'Bob', age: 28 },\n  ],\n};\n\n// Create a circular reference\nobj.self = obj;\n\n// Traverse the object\ntraverse(obj);\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map\",children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap\",children:[(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set\",children:[(0,n.jsx)(e.code,{children:\"Set\"}),\" | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet\",children:[(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://javascript.info/map-set\",children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" and \",(0,n.jsx)(e.code,{children:\"Set\"}),\" | Javascript.info\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://javascript.info/weakmap-weakset\",children:[(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" | Javascript.info\"]})}),`\n`]})]})}function f(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(o,c)})):o(c)}var j=f;return b(m);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var M=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),v=(c,e)=>{for(var r in e)i(c,r,{get:e[r],enumerable:!0})},t=(c,e,r,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of S(e))!W.call(c,d)&&d!==r&&i(c,d,{get:()=>e[d],enumerable:!(l=k(e,d))||l.enumerable});return c};var b=(c,e,r)=>(r=c!=null?p(u(c)):{},t(e||!c||!c.__esModule?i(r,\"default\",{value:c,enumerable:!0}):r,c)),f=c=>t(i({},\"__esModule\",{value:!0}),c);var h=M((U,a)=>{a.exports=_jsx_runtime});var j={};v(j,{default:()=>s,frontmatter:()=>g});var n=b(h()),g={title:\"JavaScript \\u4E2D `Map`/`Set` \\u548C `WeakMap`/`WeakSet` \\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function o(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D \",(0,n.jsx)(e.code,{children:\"Map\"}),\"/\",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\"/\",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u7684\\u4E3B\\u8981\\u533A\\u522B\\u5728\\u4E8E\\u5B83\\u4EEC\\u5982\\u4F55\\u5904\\u7406\\u952E\\u3002\\u4EE5\\u4E0B\\u662F\\u7EC6\\u5206\\uFF1A\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" vs. \",(0,n.jsx)(e.code,{children:\"WeakMap\"})]})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5141\\u8BB8\\u4EFB\\u4F55\\u6570\\u636E\\u7C7B\\u578B\\uFF08\\u5B57\\u7B26\\u4E32\\u3001\\u6570\\u5B57\\u3001\\u5BF9\\u8C61\\uFF09\\u4F5C\\u4E3A\\u952E\\u3002\\u53EA\\u8981\\u5F15\\u7528 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\u672C\\u8EAB\\uFF0C\\u952E\\u503C\\u5BF9\\u5C31\\u4F1A\\u4FDD\\u7559\\u5728\\u5185\\u5B58\\u4E2D\\u3002\\u56E0\\u6B64\\uFF0C\\u5B83\\u4EEC\\u9002\\u7528\\u4E8E\\u901A\\u7528\\u952E\\u503C\\u5B58\\u50A8\\uFF0C\\u60A8\\u5E0C\\u671B\\u7EF4\\u62A4\\u5BF9\\u952E\\u548C\\u503C\\u7684\\u5F15\\u7528\\u3002\\u5E38\\u89C1\\u7528\\u4F8B\\u5305\\u62EC\\u5B58\\u50A8\\u7528\\u6237\\u6570\\u636E\\u3001\\u914D\\u7F6E\\u8BBE\\u7F6E\\u6216\\u5BF9\\u8C61\\u4E4B\\u95F4\\u7684\\u5173\\u7CFB\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u4EC5\\u5141\\u8BB8\\u5BF9\\u8C61\\u4F5C\\u4E3A\\u952E\\u3002\\u4F46\\u662F\\uFF0C\\u8FD9\\u4E9B\\u5BF9\\u8C61\\u952E\\u88AB\\u5F31\\u4FDD\\u5B58\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u5783\\u573E\\u6536\\u96C6\\u5668\\u53EF\\u4EE5\\u4ECE\\u5185\\u5B58\\u4E2D\\u5220\\u9664\\u5B83\\u4EEC\\uFF0C\\u5373\\u4F7F \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u672C\\u8EAB\\u4ECD\\u7136\\u5B58\\u5728\\uFF0C\\u53EA\\u8981\\u6CA1\\u6709\\u5BF9\\u8FD9\\u4E9B\\u5BF9\\u8C61\\u7684\\u5176\\u4ED6\\u5F15\\u7528\\u3002\",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u975E\\u5E38\\u9002\\u5408\\u60A8\\u5E0C\\u671B\\u5C06\\u6570\\u636E\\u4E0E\\u5BF9\\u8C61\\u5173\\u8054\\u800C\\u4E0D\\u4F1A\\u963B\\u6B62\\u8FD9\\u4E9B\\u5BF9\\u8C61\\u88AB\\u5783\\u573E\\u56DE\\u6536\\u7684\\u573A\\u666F\\u3002\\u8FD9\\u5BF9\\u4E8E\\u4EE5\\u4E0B\\u60C5\\u51B5\\u53EF\\u80FD\\u5F88\\u6709\\u7528\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u57FA\\u4E8E\\u5BF9\\u8C61\\u7F13\\u5B58\\u6570\\u636E\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u6B62\\u5BF9\\u8C61\\u672C\\u8EAB\\u7684\\u5783\\u573E\\u56DE\\u6536\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5B58\\u50A8\\u4E0E DOM \\u8282\\u70B9\\u5173\\u8054\\u7684\\u79C1\\u6709\\u6570\\u636E\\uFF0C\\u800C\\u4E0D\\u4F1A\\u5F71\\u54CD\\u5176\\u751F\\u547D\\u5468\\u671F\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:\"Set\"}),\" vs. \",(0,n.jsx)(e.code,{children:\"WeakSet\"})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E0E \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u7C7B\\u4F3C\\uFF0C\",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u5141\\u8BB8\\u4EFB\\u4F55\\u6570\\u636E\\u7C7B\\u578B\\u4F5C\\u4E3A\\u952E\\u3002\",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u4E2D\\u7684\\u5143\\u7D20\\u5FC5\\u987B\\u662F\\u552F\\u4E00\\u7684\\u3002\",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u9002\\u7528\\u4E8E\\u5B58\\u50A8\\u552F\\u4E00\\u503C\\u5E76\\u6709\\u6548\\u68C0\\u67E5\\u6210\\u5458\\u8D44\\u683C\\u3002\\u5E38\\u89C1\\u7528\\u4F8B\\u5305\\u62EC\\u4ECE\\u6570\\u7EC4\\u4E2D\\u5220\\u9664\\u91CD\\u590D\\u9879\\u6216\\u8DDF\\u8E2A\\u5DF2\\u5B8C\\u6210\\u7684\\u4EFB\\u52A1\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u4EC5\\u5141\\u8BB8\\u5BF9\\u8C61\\u4F5C\\u4E3A\\u5143\\u7D20\\uFF0C\\u5E76\\u4E14\\u8FD9\\u4E9B\\u5BF9\\u8C61\\u5143\\u7D20\\u88AB\\u5F31\\u4FDD\\u5B58\\uFF0C\\u7C7B\\u4F3C\\u4E8E \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u952E\\u3002\",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u5F88\\u5C11\\u4F7F\\u7528\\uFF0C\\u4F46\\u5F53\\u60A8\\u9700\\u8981\\u4E00\\u7EC4\\u552F\\u4E00\\u5BF9\\u8C61\\u800C\\u4E0D\\u5F71\\u54CD\\u5176\\u5783\\u573E\\u56DE\\u6536\\u65F6\\u9002\\u7528\\u3002\\u8FD9\\u53EF\\u80FD\\u5BF9\\u4E8E\\u4EE5\\u4E0B\\u60C5\\u51B5\\u662F\\u5FC5\\u8981\\u7684\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u8DDF\\u8E2A\\u5DF2\\u4EA4\\u4E92\\u7684 DOM \\u8282\\u70B9\\uFF0C\\u800C\\u4E0D\\u4F1A\\u5F71\\u54CD\\u5176\\u5185\\u5B58\\u7BA1\\u7406\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u4E3A\\u7279\\u5B9A\\u7528\\u4F8B\\u5B9E\\u73B0\\u81EA\\u5B9A\\u4E49\\u5BF9\\u8C61\\u5F31\\u5F15\\u7528\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"\\u4EE5\\u4E0B\\u662F\\u4E00\\u4E2A\\u603B\\u7ED3\\u5173\\u952E\\u5DEE\\u5F02\\u7684\\u8868\\u683C\\uFF1A\"})}),`\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:\"\\u7279\\u6027\"}),(0,n.jsx)(e.th,{children:\"Map\"}),(0,n.jsx)(e.th,{children:\"WeakMap\"}),(0,n.jsx)(e.th,{children:\"Set\"}),(0,n.jsx)(e.th,{children:\"WeakSet\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u952E\\u7C7B\\u578B\"}),(0,n.jsx)(e.td,{children:\"\\u4EFB\\u4F55\\u6570\\u636E\\u7C7B\\u578B\"}),(0,n.jsx)(e.td,{children:\"\\u5BF9\\u8C61\\uFF08\\u5F31\\u5F15\\u7528\\uFF09\"}),(0,n.jsx)(e.td,{children:\"\\u4EFB\\u4F55\\u6570\\u636E\\u7C7B\\u578B\\uFF08\\u552F\\u4E00\\uFF09\"}),(0,n.jsx)(e.td,{children:\"\\u5BF9\\u8C61\\uFF08\\u5F31\\u5F15\\u7528\\uFF0C\\u552F\\u4E00\\uFF09\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u5783\\u573E\\u56DE\\u6536\"}),(0,n.jsx)(e.td,{children:\"\\u952E\\u548C\\u503C\\u4E0D\\u4F1A\\u88AB\\u5783\\u573E\\u56DE\\u6536\"}),(0,n.jsx)(e.td,{children:\"\\u5982\\u679C\\u6CA1\\u6709\\u5176\\u4ED6\\u5730\\u65B9\\u5F15\\u7528\\uFF0C\\u952E\\u53EF\\u4EE5\\u88AB\\u5783\\u573E\\u56DE\\u6536\"}),(0,n.jsx)(e.td,{children:\"\\u5143\\u7D20\\u4E0D\\u4F1A\\u88AB\\u5783\\u573E\\u56DE\\u6536\"}),(0,n.jsx)(e.td,{children:\"\\u5982\\u679C\\u6CA1\\u6709\\u5176\\u4ED6\\u5730\\u65B9\\u5F15\\u7528\\uFF0C\\u5143\\u7D20\\u53EF\\u4EE5\\u88AB\\u5783\\u573E\\u56DE\\u6536\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u7528\\u4F8B\"}),(0,n.jsx)(e.td,{children:\"\\u901A\\u7528\\u952E\\u503C\\u5B58\\u50A8\"}),(0,n.jsx)(e.td,{children:\"\\u7F13\\u5B58\\u3001\\u79C1\\u6709 DOM \\u8282\\u70B9\\u6570\\u636E\"}),(0,n.jsx)(e.td,{children:\"\\u5220\\u9664\\u91CD\\u590D\\u9879\\u3001\\u6210\\u5458\\u8D44\\u683C\\u68C0\\u67E5\"}),(0,n.jsx)(e.td,{children:\"\\u5BF9\\u8C61\\u5F31\\u5F15\\u7528\\u3001\\u81EA\\u5B9A\\u4E49\\u7528\\u4F8B\"})]})]})]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"\\u5728\\u5B83\\u4EEC\\u4E4B\\u95F4\\u8FDB\\u884C\\u9009\\u62E9\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5728\\u5927\\u591A\\u6570\\u9700\\u8981\\u5B58\\u50A8\\u952E\\u503C\\u5BF9\\u6216\\u552F\\u4E00\\u5143\\u7D20\\u5E76\\u5E0C\\u671B\\u7EF4\\u62A4\\u5BF9\\u952E/\\u5143\\u7D20\\u548C\\u503C\\u7684\\u5F15\\u7528\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Set\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5728\\u7279\\u5B9A\\u60C5\\u51B5\\u4E0B\\u8C28\\u614E\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\"\\uFF0C\\u60A8\\u5E0C\\u671B\\u5C06\\u6570\\u636E\\u4E0E\\u5BF9\\u8C61\\u5173\\u8054\\u800C\\u4E0D\\u4F1A\\u5F71\\u54CD\\u5176\\u5783\\u573E\\u56DE\\u6536\\u3002\\u5982\\u679C\\u4F7F\\u7528\\u4E0D\\u5F53\\uFF0C\\u8BF7\\u6CE8\\u610F\\u5F31\\u5F15\\u7528\\u7684\\u542B\\u4E49\\u548C\\u6F5C\\u5728\\u7684\\u5185\\u5B58\\u6CC4\\u6F0F\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\"/\",(0,n.jsx)(e.code,{children:\"Set\"}),\" vs \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\"/\",(0,n.jsx)(e.code,{children:\"WeakSet\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D \",(0,n.jsx)(e.code,{children:\"Map\"}),\"/\",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\"/\",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u4E4B\\u95F4\\u7684\\u4E3B\\u8981\\u533A\\u522B\\u5728\\u4E8E\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u952E\\u7C7B\\u578B\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u53EF\\u4EE5\\u5177\\u6709\\u4EFB\\u4F55\\u7C7B\\u578B\\u7684\\u952E\\uFF08\\u5BF9\\u8C61\\u3001\\u539F\\u59CB\\u503C\\u7B49\\uFF09\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u53EA\\u80FD\\u5C06\\u5BF9\\u8C61\\u4F5C\\u4E3A\\u952E\\u3002\\u539F\\u59CB\\u503C\\uFF08\\u5982\\u5B57\\u7B26\\u4E32\\u6216\\u6570\\u5B57\\uFF09\\u4E0D\\u5141\\u8BB8\\u4F5C\\u4E3A \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u4E2D\\u7684\\u952E\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5185\\u5B58\\u7BA1\\u7406\"}),\"\\uFF1A\\u4E3B\\u8981\\u533A\\u522B\\u5728\\u4E8E\\u5B83\\u4EEC\\u5982\\u4F55\\u5904\\u7406\\u5185\\u5B58\\u3002\",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u5177\\u6709\\u5BF9\\u5176\\u952E\\u548C\\u503C\\u7684\\u5F3A\\u5F15\\u7528\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4EEC\\u5C06\\u963B\\u6B62\\u5BF9\\u8FD9\\u4E9B\\u503C\\u8FDB\\u884C\\u5783\\u573E\\u56DE\\u6536\\u3002\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u5177\\u6709\\u5BF9\\u5176\\u952E\\uFF08\\u5BF9\\u8C61\\uFF09\\u7684\\u5F31\\u5F15\\u7528\\uFF0C\\u5982\\u679C\\u5BF9\\u5B83\\u4EEC\\u6CA1\\u6709\\u5176\\u4ED6\\u5F3A\\u5F15\\u7528\\uFF0C\\u5219\\u5141\\u8BB8\\u5BF9\\u8FD9\\u4E9B\\u5BF9\\u8C61\\u8FDB\\u884C\\u5783\\u573E\\u56DE\\u6536\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u952E\\u679A\\u4E3E\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u4E2D\\u7684\\u952E\\u662F\\u53EF\\u679A\\u4E3E\\u7684\\uFF08\\u53EF\\u4EE5\\u8FED\\u4EE3\\uFF09\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u4E2D\\u7684\\u952E\\u4E0D\\u53EF\\u679A\\u4E3E\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u60A8\\u65E0\\u6CD5\\u4ECE \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u83B7\\u53D6\\u952E\\u6216\\u503C\\u7684\\u5217\\u8868\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:\"size\"}),\" \\u5C5E\\u6027\"]}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u5177\\u6709\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"size\"}),\" \\u5C5E\\u6027\\uFF0C\\u8BE5\\u5C5E\\u6027\\u8FD4\\u56DE\\u5143\\u7D20\\u7684\\u6570\\u91CF\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u6CA1\\u6709 \",(0,n.jsx)(e.code,{children:\"size\"}),\" \\u5C5E\\u6027\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u7684\\u5927\\u5C0F\\u53EF\\u80FD\\u4F1A\\u56E0\\u5783\\u573E\\u56DE\\u6536\\u800C\\u6539\\u53D8\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u7528\\u4F8B\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u9002\\u7528\\u4E8E\\u901A\\u7528\\u6570\\u636E\\u7ED3\\u6784\\u548C\\u7F13\\u5B58\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u4E3B\\u8981\\u7528\\u4E8E\\u5B58\\u50A8\\u4E0E\\u5BF9\\u8C61\\u76F8\\u5173\\u7684\\u5143\\u6570\\u636E\\u6216\\u5176\\u4ED6\\u6570\\u636E\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u6B62\\u5BF9\\u8FD9\\u4E9B\\u5BF9\\u8C61\\u8FDB\\u884C\\u5783\\u573E\\u56DE\\u6536\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u662F\\u7EF4\\u62A4\\u5BF9\\u5176\\u952E\\u548C\\u503C\\u7684\\u5F3A\\u5F15\\u7528\\u7684\\u5E38\\u89C4\\u6570\\u636E\\u7ED3\\u6784\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u4E13\\u4E3A\\u5E0C\\u671B\\u5C06\\u6570\\u636E\\u4E0E\\u5BF9\\u8C61\\u5173\\u8054\\u800C\\u8BBE\\u8BA1\\u7684\\u573A\\u666F\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u6B62\\u5728\\u4E0D\\u518D\\u9700\\u8981\\u8FD9\\u4E9B\\u5BF9\\u8C61\\u65F6\\u5BF9\\u5B83\\u4EEC\\u8FDB\\u884C\\u5783\\u573E\\u56DE\\u6536\\u3002\"]}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u7684\\u7528\\u4F8B\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8DDF\\u8E2A\\u6D3B\\u8DC3\\u7528\\u6237\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u804A\\u5929\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\uFF0C\\u60A8\\u53EF\\u80FD\\u5E0C\\u671B\\u8DDF\\u8E2A\\u5F53\\u524D\\u5904\\u4E8E\\u6D3B\\u52A8\\u72B6\\u6001\\u7684\\u7528\\u6237\\u5BF9\\u8C61\\uFF0C\\u800C\\u4E0D\\u4F1A\\u5728\\u7528\\u6237\\u6CE8\\u9500\\u6216\\u4F1A\\u8BDD\\u8FC7\\u671F\\u65F6\\u963B\\u6B62\\u5783\\u573E\\u56DE\\u6536\\u3002\\u6211\\u4EEC\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u6765\\u8DDF\\u8E2A\\u6D3B\\u8DC3\\u7684\\u7528\\u6237\\u5BF9\\u8C61\\u3002\\u5F53\\u7528\\u6237\\u6CE8\\u9500\\u6216\\u4ED6\\u4EEC\\u7684\\u4F1A\\u8BDD\\u8FC7\\u671F\\u65F6\\uFF0C\\u5982\\u679C\\u6CA1\\u6709\\u5BF9\\u8BE5\\u7528\\u6237\\u7684\\u5176\\u4ED6\\u5F15\\u7528\\uFF0C\\u5219\\u8BE5\\u7528\\u6237\\u5BF9\\u8C61\\u53EF\\u4EE5\\u88AB\\u5783\\u573E\\u56DE\\u6536\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const activeUsers = new WeakSet();\n\n// Function to mark a user as active\nfunction markUserActive(user) {\n  activeUsers.add(user);\n}\n\n// Function to check if a user is active\nfunction isUserActive(user) {\n  return activeUsers.has(user);\n}\n\n// Example usage\nlet user1 = { id: 1, name: 'Alice' };\nlet user2 = { id: 2, name: 'Bob' };\n\nmarkUserActive(user1);\nmarkUserActive(user2);\n\nconsole.log(isUserActive(user1)); // true\nconsole.log(isUserActive(user2)); // true\n\n// Simulate user logging out\nuser1 = null;\n\n// user1 is now eligible for garbage collection\nconsole.log(isUserActive(user1)); // false\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u68C0\\u6D4B\\u5FAA\\u73AF\\u5F15\\u7528\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u901A\\u8FC7\\u8DDF\\u8E2A\\u54EA\\u4E9B\\u5BF9\\u8C61\\u5DF2\\u7ECF\\u88AB\\u5904\\u7406\\u6765\\u9632\\u6B62\\u5FAA\\u73AF\\u6570\\u636E\\u7ED3\\u6784\\u7684\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a WeakSet to track visited objects\nconst visited = new WeakSet();\n\n// Function to traverse an object recursively\nfunction traverse(obj) {\n  // Check if the object has already been visited\n  if (visited.has(obj)) {\n    return;\n  }\n\n  // Add the object to the visited set\n  visited.add(obj);\n\n  // Traverse the object's properties\n  for (let prop in obj) {\n    if (obj.hasOwnProperty(prop)) {\n      let value = obj[prop];\n      if (typeof value === 'object' && value !== null) {\n        traverse(value);\n      }\n    }\n  }\n\n  // Process the object\n  console.log(obj);\n}\n\n// Create an object with a circular reference\nconst obj = {\n  name: 'John',\n  age: 30,\n  friends: [\n    { name: 'Alice', age: 25 },\n    { name: 'Bob', age: 28 },\n  ],\n};\n\n// Create a circular reference\nobj.self = obj;\n\n// Traverse the object\ntraverse(obj);\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map\",children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap\",children:[(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set\",children:[(0,n.jsx)(e.code,{children:\"Set\"}),\" | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet\",children:[(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://javascript.info/map-set\",children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" and \",(0,n.jsx)(e.code,{children:\"Set\"}),\" | Javascript.info\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://javascript.info/weakmap-weakset\",children:[(0,n.jsx)(e.code,{children:\"WeakMap\"}),\" and \",(0,n.jsx)(e.code,{children:\"WeakSet\"}),\" | Javascript.info\"]})}),`\n`]})]})}function s(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(o,{...c})}):o(c)}return f(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.json
index 7b019edd3..3ea314ef3 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var o=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),p=(r,e)=>{for(var i in e)o(r,i,{get:e[i],enumerable:!0})},d=(r,e,i,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of f(e))!v.call(r,c)&&c!==i&&o(r,c,{get:()=>e[c],enumerable:!(l=b(e,c))||l.enumerable});return r};var m=(r,e,i)=>(i=r!=null?s(u(r)):{},d(e||!r||!r.__esModule?o(i,\"default\",{value:r,enumerable:!0}):i,r)),y=r=>d(o({},\"__esModule\",{value:!0}),r);var t=g((k,a)=>{a.exports=_jsx_runtime});var R={};p(R,{default:()=>x,frontmatter:()=>z});var n=m(t()),z={title:\"What are the differences between JavaScript variables created using `let`, `var` or `const`?\"};function h(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",hr:\"hr\",h3:\"h3\",em:\"em\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, \",(0,n.jsx)(e.code,{children:\"let\"}),\", \",(0,n.jsx)(e.code,{children:\"var\"}),\", and \",(0,n.jsx)(e.code,{children:\"const\"}),\" are all keywords used to declare variables, but they differ significantly in terms of scope, initialization rules, whether they can be redeclared or reassigned and the behavior when they are accessed before declaration:\"]}),`\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:\"Behavior\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"var\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"let\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"const\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Scope\"}),(0,n.jsx)(e.td,{children:\"Function or Global\"}),(0,n.jsx)(e.td,{children:\"Block\"}),(0,n.jsx)(e.td,{children:\"Block\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Initialization\"}),(0,n.jsx)(e.td,{children:\"Optional\"}),(0,n.jsx)(e.td,{children:\"Optional\"}),(0,n.jsx)(e.td,{children:\"Required\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Redeclaration\"}),(0,n.jsx)(e.td,{children:\"Yes\"}),(0,n.jsx)(e.td,{children:\"No\"}),(0,n.jsx)(e.td,{children:\"No\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Reassignment\"}),(0,n.jsx)(e.td,{children:\"Yes\"}),(0,n.jsx)(e.td,{children:\"Yes\"}),(0,n.jsx)(e.td,{children:\"No\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Accessing before declaration\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"undefined\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"ReferenceError\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"ReferenceError\"})})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Differences in behavior\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Let's look at the difference in behavior between \",(0,n.jsx)(e.code,{children:\"var\"}),\", \",(0,n.jsx)(e.code,{children:\"let\"}),\", and \",(0,n.jsx)(e.code,{children:\"const\"}),\".\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Scope\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Variables declared using the \",(0,n.jsx)(e.code,{children:\"var\"}),\" keyword are scoped to the function in which they are created, or if created outside of any function, to the global object. \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" are \",(0,n.jsx)(e.em,{children:\"block scoped\"}),\", meaning they are only accessible within the nearest set of curly braces (function, if-else block, or for-loop).\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function foo() {\n  // All variables are accessible within functions.\n  var bar = 1;\n  let baz = 2;\n  const qux = 3;\n\n  console.log(bar); // 1\n  console.log(baz); // 2\n  console.log(qux); // 3\n}\n\nfoo(); // Prints each variable successfully\nconsole.log(bar); // ReferenceError: bar is not defined\nconsole.log(baz); // ReferenceError: baz is not defined\nconsole.log(qux); // ReferenceError: qux is not defined\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In the following example, \",(0,n.jsx)(e.code,{children:\"bar\"}),\" is accessible outside of the \",(0,n.jsx)(e.code,{children:\"if\"}),\" block but \",(0,n.jsx)(e.code,{children:\"baz\"}),\" and \",(0,n.jsx)(e.code,{children:\"quz\"}),\" are not.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`if (true) {\n  var bar = 1;\n  let baz = 2;\n  const qux = 3;\n}\n\n// var variables are accessible anywhere in the function scope.\nconsole.log(bar); // 1\n// let and const variables are not accessible outside of the block they were defined in.\nconsole.log(baz); // ReferenceError: baz is not defined\nconsole.log(qux); // ReferenceError: qux is not defined\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Initialization\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\" and \",(0,n.jsx)(e.code,{children:\"let\"}),\" variables can be initialized without a value but \",(0,n.jsx)(e.code,{children:\"const\"}),\" declarations must be initialized.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var foo; // Ok\nlet bar; // Ok\nconst baz; // SyntaxError: Missing initializer in const declaration\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Redeclaration\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Redeclaring a variable with \",(0,n.jsx)(e.code,{children:\"var\"}),\" will not throw an error, but \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" will.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var foo = 1;\nvar foo = 2; // Ok\nconsole.log(foo); // Should print 2, but SyntaxError from baz prevents the code executing.\n\nlet baz = 3;\nlet baz = 4; // Uncaught SyntaxError: Identifier 'baz' has already been declared\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Reassignment\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" differ in that \",(0,n.jsx)(e.code,{children:\"var\"}),\" and \",(0,n.jsx)(e.code,{children:\"let\"}),\" allow reassigning the variable's value while \",(0,n.jsx)(e.code,{children:\"const\"}),\" does not.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var foo = 1;\nfoo = 2; // This is fine.\n\nlet bar = 3;\nbar = 4; // This is fine.\n\nconst baz = 5;\nbaz = 6; // Uncaught TypeError: Assignment to constant variable.\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Accessing before declaration\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\" ,\",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" declared variables are all hoisted. \",(0,n.jsx)(e.code,{children:\"var\"}),\" declared variables are auto-initialized with an \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" value. However, \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" variables are not initialized and accessing them before the declaration will result in a \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),' exception because they are in a \"temporal dead zone\" from the start of the block until the declaration is processed.']}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(foo); // undefined\nvar foo = 'foo';\n\nconsole.log(baz); // ReferenceError: Cannot access 'baz' before initialization\nlet baz = 'baz';\n\nconsole.log(bar); // ReferenceError: Cannot access 'baz' before initialization\nconst bar = 'bar';\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"In modern JavaScript, it's generally recommended to use \",(0,n.jsx)(e.code,{children:\"const\"}),\" by default for variables that don't need to be reassigned. This promotes immutability and prevents accidental changes.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"let\"}),\" when you need to reassign a variable within its scope.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Avoid using \",(0,n.jsx)(e.code,{children:\"var\"}),\" due to its potential for scoping issues and hoisting behavior.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"If you need to target older browsers, write your code using \",(0,n.jsx)(e.code,{children:\"let\"}),\"/\",(0,n.jsx)(e.code,{children:\"const\"}),\", and use a transpiler like Babel compile your code to older syntax.\"]}),`\n`]}),`\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://medium.com/swlh/the-difference-of-var-vs-let-vs-const-in-javascript-abe37e214d66\",children:'The Difference of \"var\" vs \"let\" vs \"const\" in Javascript'})}),`\n`]})]})}function w(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(h,r)})):h(r)}var x=w;return y(R);})();\n;return Component;"
+  "solution": "var Component=(()=>{var b=Object.create;var o=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var p=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),m=(r,e)=>{for(var i in e)o(r,i,{get:e[i],enumerable:!0})},d=(r,e,i,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of u(e))!g.call(r,c)&&c!==i&&o(r,c,{get:()=>e[c],enumerable:!(l=f(e,c))||l.enumerable});return r};var y=(r,e,i)=>(i=r!=null?b(v(r)):{},d(e||!r||!r.__esModule?o(i,\"default\",{value:r,enumerable:!0}):i,r)),z=r=>d(o({},\"__esModule\",{value:!0}),r);var t=p((k,a)=>{a.exports=_jsx_runtime});var x={};m(x,{default:()=>s,frontmatter:()=>w});var n=y(t()),w={title:\"What are the differences between JavaScript variables created using `let`, `var` or `const`?\"};function h(r){let e={a:\"a\",code:\"code\",em:\"em\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, \",(0,n.jsx)(e.code,{children:\"let\"}),\", \",(0,n.jsx)(e.code,{children:\"var\"}),\", and \",(0,n.jsx)(e.code,{children:\"const\"}),\" are all keywords used to declare variables, but they differ significantly in terms of scope, initialization rules, whether they can be redeclared or reassigned and the behavior when they are accessed before declaration:\"]}),`\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:\"Behavior\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"var\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"let\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"const\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Scope\"}),(0,n.jsx)(e.td,{children:\"Function or Global\"}),(0,n.jsx)(e.td,{children:\"Block\"}),(0,n.jsx)(e.td,{children:\"Block\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Initialization\"}),(0,n.jsx)(e.td,{children:\"Optional\"}),(0,n.jsx)(e.td,{children:\"Optional\"}),(0,n.jsx)(e.td,{children:\"Required\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Redeclaration\"}),(0,n.jsx)(e.td,{children:\"Yes\"}),(0,n.jsx)(e.td,{children:\"No\"}),(0,n.jsx)(e.td,{children:\"No\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Reassignment\"}),(0,n.jsx)(e.td,{children:\"Yes\"}),(0,n.jsx)(e.td,{children:\"Yes\"}),(0,n.jsx)(e.td,{children:\"No\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Accessing before declaration\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"undefined\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"ReferenceError\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"ReferenceError\"})})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Differences in behavior\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Let's look at the difference in behavior between \",(0,n.jsx)(e.code,{children:\"var\"}),\", \",(0,n.jsx)(e.code,{children:\"let\"}),\", and \",(0,n.jsx)(e.code,{children:\"const\"}),\".\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Scope\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Variables declared using the \",(0,n.jsx)(e.code,{children:\"var\"}),\" keyword are scoped to the function in which they are created, or if created outside of any function, to the global object. \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" are \",(0,n.jsx)(e.em,{children:\"block scoped\"}),\", meaning they are only accessible within the nearest set of curly braces (function, if-else block, or for-loop).\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function foo() {\n  // All variables are accessible within functions.\n  var bar = 1;\n  let baz = 2;\n  const qux = 3;\n\n  console.log(bar); // 1\n  console.log(baz); // 2\n  console.log(qux); // 3\n}\n\nfoo(); // Prints each variable successfully\nconsole.log(bar); // ReferenceError: bar is not defined\nconsole.log(baz); // ReferenceError: baz is not defined\nconsole.log(qux); // ReferenceError: qux is not defined\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In the following example, \",(0,n.jsx)(e.code,{children:\"bar\"}),\" is accessible outside of the \",(0,n.jsx)(e.code,{children:\"if\"}),\" block but \",(0,n.jsx)(e.code,{children:\"baz\"}),\" and \",(0,n.jsx)(e.code,{children:\"quz\"}),\" are not.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`if (true) {\n  var bar = 1;\n  let baz = 2;\n  const qux = 3;\n}\n\n// var variables are accessible anywhere in the function scope.\nconsole.log(bar); // 1\n// let and const variables are not accessible outside of the block they were defined in.\nconsole.log(baz); // ReferenceError: baz is not defined\nconsole.log(qux); // ReferenceError: qux is not defined\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Initialization\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\" and \",(0,n.jsx)(e.code,{children:\"let\"}),\" variables can be initialized without a value but \",(0,n.jsx)(e.code,{children:\"const\"}),\" declarations must be initialized.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var foo; // Ok\nlet bar; // Ok\nconst baz; // SyntaxError: Missing initializer in const declaration\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Redeclaration\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Redeclaring a variable with \",(0,n.jsx)(e.code,{children:\"var\"}),\" will not throw an error, but \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" will.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var foo = 1;\nvar foo = 2; // Ok\nconsole.log(foo); // Should print 2, but SyntaxError from baz prevents the code executing.\n\nlet baz = 3;\nlet baz = 4; // Uncaught SyntaxError: Identifier 'baz' has already been declared\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Reassignment\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" differ in that \",(0,n.jsx)(e.code,{children:\"var\"}),\" and \",(0,n.jsx)(e.code,{children:\"let\"}),\" allow reassigning the variable's value while \",(0,n.jsx)(e.code,{children:\"const\"}),\" does not.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var foo = 1;\nfoo = 2; // This is fine.\n\nlet bar = 3;\nbar = 4; // This is fine.\n\nconst baz = 5;\nbaz = 6; // Uncaught TypeError: Assignment to constant variable.\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Accessing before declaration\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\" ,\",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" declared variables are all hoisted. \",(0,n.jsx)(e.code,{children:\"var\"}),\" declared variables are auto-initialized with an \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" value. However, \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" variables are not initialized and accessing them before the declaration will result in a \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),' exception because they are in a \"temporal dead zone\" from the start of the block until the declaration is processed.']}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(foo); // undefined\nvar foo = 'foo';\n\nconsole.log(baz); // ReferenceError: Cannot access 'baz' before initialization\nlet baz = 'baz';\n\nconsole.log(bar); // ReferenceError: Cannot access 'baz' before initialization\nconst bar = 'bar';\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"In modern JavaScript, it's generally recommended to use \",(0,n.jsx)(e.code,{children:\"const\"}),\" by default for variables that don't need to be reassigned. This promotes immutability and prevents accidental changes.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"let\"}),\" when you need to reassign a variable within its scope.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Avoid using \",(0,n.jsx)(e.code,{children:\"var\"}),\" due to its potential for scoping issues and hoisting behavior.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"If you need to target older browsers, write your code using \",(0,n.jsx)(e.code,{children:\"let\"}),\"/\",(0,n.jsx)(e.code,{children:\"const\"}),\", and use a transpiler like Babel compile your code to older syntax.\"]}),`\n`]}),`\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://medium.com/swlh/the-difference-of-var-vs-let-vs-const-in-javascript-abe37e214d66\",children:'The Difference of \"var\" vs \"let\" vs \"const\" in Javascript'})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return z(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const/pt-BR.json
index 897cf42f6..625897c7e 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const/pt-BR.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var a in e)s(n,a,{get:e[a],enumerable:!0})},i=(n,e,a,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!h.call(n,r)&&r!==a&&s(n,r,{get:()=>e[r],enumerable:!(c=f(e,r))||c.enumerable});return n};var p=(n,e,a)=>(a=n!=null?u(b(n)):{},i(e||!n||!n.__esModule?s(a,\"default\",{value:n,enumerable:!0}):a,n)),x=n=>i(s({},\"__esModule\",{value:!0}),n);var d=v((E,l)=>{l.exports=_jsx_runtime});var R={};g(R,{default:()=>j,frontmatter:()=>q});var o=p(d()),q={title:\"Quais s\\xE3o as diferen\\xE7as entre as vari\\xE1veis criadas usando `let`, `var` ou `const`?\"};function t(n){let e=Object.assign({p:\"p\",code:\"code\",em:\"em\",pre:\"pre\",h2:\"h2\",ul:\"ul\",li:\"li\"},n.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Vari\\xE1veis declaradas usando a palavra-chave \",(0,o.jsx)(e.code,{children:\"var\"}),\" t\\xEAm escopo \\xE0 fun\\xE7\\xE3o na qual foram criadas, ou se criadas fora de qualquer fun\\xE7\\xE3o, ao objeto global. \",(0,o.jsx)(e.code,{children:\"let\"}),\" and \",(0,o.jsx)(e.code,{children:\"const\"}),\" s\\xE3o \",(0,o.jsx)(e.em,{children:\"block scoped\"}),\", o que significa que eles s\\xF3 s\\xE3o acess\\xEDveis dentro do conjunto mais pr\\xF3ximo de chaves (fun\\xE7\\xE3o, bloco if-else ou for-loop).\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`function foo() {\n  // Todas as vari\\xE1veis s\\xE3o acess\\xEDveis dentro de fun\\xE7\\xF5es.\n  var bar = 'bar';\n  let baz = 'baz';\n  const qux = 'qux';\n\n  console.log(bar); // bar\n  console.log(baz); // baz\n  console.log(qux); // qux\n}\n\nconsole.log(bar); // ReferenceError: bar n\\xE3o \\xE9 o console\nconsole.log(baz); // ReferenceError: baz n\\xE3o \\xE9 definido\nconsole.log(qux); // ReferenceError: qux n\\xE3o \\xE9 definido\n`})}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`if (true) {\n  var bar = 'bar';\n  let baz = 'baz';\n  const qux = 'qux';\n}\n\n// var vari\\xE1veis declaradas s\\xE3o acess\\xEDveis em qualquer lugar do escopo da fun\\xE7\\xE3o.\nconsole.log(bar); // bar\n// let e const defined vari\\xE1veis n\\xE3o s\\xE3o acess\\xEDveis fora do bloco no qual eles foram definidos.\nconsole.log(baz); // Refer\\xEAncia: baz n\\xE3o est\\xE1 definido\nconsole.log(qux); // Refer\\xEAncia: qux n\\xE3o est\\xE1 definido\n`})}),`\n`,(0,o.jsx)(e.p,{children:\"'var' permite que as vari\\xE1veis sejam hoisted, o que significa que elas podem ser referenciadas no c\\xF3digo antes de serem declaradas. 'let' e 'const' n\\xE3o permitir\\xE3o isso, em vez disso, ser\\xE1 lan\\xE7ado um erro.\"}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`console.log(foo); // undefined\n\nvar foo = 'foo';\n\nconsole.log(baz); // ReferenceError: n\\xE3o p\\xF4de acessar o console da declara\\xE7\\xE3o l\\xE9xico 'baz' antes da inicializa\\xE7\\xE3o\n\nlet baz = 'baz';\n\nconsole.log(bar); // ReferenceError: n\\xE3o \\xE9 poss\\xEDvel acessar a declara\\xE7\\xE3o l\\xE9xico 'bar' antes da inicializa\\xE7\\xE3o\n\nconst bar = 'bar';\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"Redeclarar uma vari\\xE1vel com \",(0,o.jsx)(e.code,{children:\"var\"}),\" n\\xE3o causar\\xE1 um erro, mas \",(0,o.jsx)(e.code,{children:\"let\"}),\" e \",(0,o.jsx)(e.code,{children:\"const\"}),\" ir\\xE1.\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`var foo = 'foo';\nvar foo = 'bar';\nconsole.log(foo); // \"bar\"\n\nlet baz = 'baz';\nlet baz = 'qux'; // Uncaught SyntaxError: Identifier 'baz' j\\xE1 foi declarado\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"let\"}),\" e \",(0,o.jsx)(e.code,{children:\"const\"}),\" diferem que \",(0,o.jsx)(e.code,{children:\"let\"}),\" permite reatribuir o valor da vari\\xE1vel enquanto \",(0,o.jsx)(e.code,{children:\"const\"}),\" n\\xE3o.\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`// Tudo bem.\nlet foo = 'foo';\nfoo = 'bar';\n\n// Isso causa uma exce\\xE7\\xE3o.\nconst baz = 'baz';\nbaz = 'qux';\n`})}),`\n`,(0,o.jsx)(e.h2,{children:\"Notas\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"Como a maioria dos navegadores suportam \",(0,o.jsx)(e.code,{children:\"let\"}),\" e \",(0,o.jsx)(e.code,{children:\"const\"}),\" atualmente, usar \",(0,o.jsx)(e.code,{children:\"var\"}),\" n\\xE3o \\xE9 mais recomendado. Se voc\\xEA precisa dar suporte a navegadores mais antigos, escreva seu c\\xF3digo usando \",(0,o.jsx)(e.code,{children:\"let\"}),\" e use um transpiler como o Babel para compilar seu c\\xF3digo para uma sintaxe mais antiga.\"]}),`\n`]})]})}function z(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(t,n)})):t(n)}var j=z;return x(R);})();\n;return Component;"
+  "solution": "var Component=(()=>{var f=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),p=(n,e)=>{for(var a in e)s(n,a,{get:e[a],enumerable:!0})},l=(n,e,a,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of b(e))!v.call(n,r)&&r!==a&&s(n,r,{get:()=>e[r],enumerable:!(c=m(e,r))||c.enumerable});return n};var x=(n,e,a)=>(a=n!=null?f(h(n)):{},l(e||!n||!n.__esModule?s(a,\"default\",{value:n,enumerable:!0}):a,n)),q=n=>l(s({},\"__esModule\",{value:!0}),n);var d=g((_,i)=>{i.exports=_jsx_runtime});var j={};p(j,{default:()=>u,frontmatter:()=>z});var o=x(d()),z={title:\"Quais s\\xE3o as diferen\\xE7as entre as vari\\xE1veis criadas usando `let`, `var` ou `const`?\"};function t(n){let e={code:\"code\",em:\"em\",h2:\"h2\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Vari\\xE1veis declaradas usando a palavra-chave \",(0,o.jsx)(e.code,{children:\"var\"}),\" t\\xEAm escopo \\xE0 fun\\xE7\\xE3o na qual foram criadas, ou se criadas fora de qualquer fun\\xE7\\xE3o, ao objeto global. \",(0,o.jsx)(e.code,{children:\"let\"}),\" and \",(0,o.jsx)(e.code,{children:\"const\"}),\" s\\xE3o \",(0,o.jsx)(e.em,{children:\"block scoped\"}),\", o que significa que eles s\\xF3 s\\xE3o acess\\xEDveis dentro do conjunto mais pr\\xF3ximo de chaves (fun\\xE7\\xE3o, bloco if-else ou for-loop).\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`function foo() {\n  // Todas as vari\\xE1veis s\\xE3o acess\\xEDveis dentro de fun\\xE7\\xF5es.\n  var bar = 'bar';\n  let baz = 'baz';\n  const qux = 'qux';\n\n  console.log(bar); // bar\n  console.log(baz); // baz\n  console.log(qux); // qux\n}\n\nconsole.log(bar); // ReferenceError: bar n\\xE3o \\xE9 o console\nconsole.log(baz); // ReferenceError: baz n\\xE3o \\xE9 definido\nconsole.log(qux); // ReferenceError: qux n\\xE3o \\xE9 definido\n`})}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`if (true) {\n  var bar = 'bar';\n  let baz = 'baz';\n  const qux = 'qux';\n}\n\n// var vari\\xE1veis declaradas s\\xE3o acess\\xEDveis em qualquer lugar do escopo da fun\\xE7\\xE3o.\nconsole.log(bar); // bar\n// let e const defined vari\\xE1veis n\\xE3o s\\xE3o acess\\xEDveis fora do bloco no qual eles foram definidos.\nconsole.log(baz); // Refer\\xEAncia: baz n\\xE3o est\\xE1 definido\nconsole.log(qux); // Refer\\xEAncia: qux n\\xE3o est\\xE1 definido\n`})}),`\n`,(0,o.jsx)(e.p,{children:\"'var' permite que as vari\\xE1veis sejam hoisted, o que significa que elas podem ser referenciadas no c\\xF3digo antes de serem declaradas. 'let' e 'const' n\\xE3o permitir\\xE3o isso, em vez disso, ser\\xE1 lan\\xE7ado um erro.\"}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`console.log(foo); // undefined\n\nvar foo = 'foo';\n\nconsole.log(baz); // ReferenceError: n\\xE3o p\\xF4de acessar o console da declara\\xE7\\xE3o l\\xE9xico 'baz' antes da inicializa\\xE7\\xE3o\n\nlet baz = 'baz';\n\nconsole.log(bar); // ReferenceError: n\\xE3o \\xE9 poss\\xEDvel acessar a declara\\xE7\\xE3o l\\xE9xico 'bar' antes da inicializa\\xE7\\xE3o\n\nconst bar = 'bar';\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"Redeclarar uma vari\\xE1vel com \",(0,o.jsx)(e.code,{children:\"var\"}),\" n\\xE3o causar\\xE1 um erro, mas \",(0,o.jsx)(e.code,{children:\"let\"}),\" e \",(0,o.jsx)(e.code,{children:\"const\"}),\" ir\\xE1.\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`var foo = 'foo';\nvar foo = 'bar';\nconsole.log(foo); // \"bar\"\n\nlet baz = 'baz';\nlet baz = 'qux'; // Uncaught SyntaxError: Identifier 'baz' j\\xE1 foi declarado\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"let\"}),\" e \",(0,o.jsx)(e.code,{children:\"const\"}),\" diferem que \",(0,o.jsx)(e.code,{children:\"let\"}),\" permite reatribuir o valor da vari\\xE1vel enquanto \",(0,o.jsx)(e.code,{children:\"const\"}),\" n\\xE3o.\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`// Tudo bem.\nlet foo = 'foo';\nfoo = 'bar';\n\n// Isso causa uma exce\\xE7\\xE3o.\nconst baz = 'baz';\nbaz = 'qux';\n`})}),`\n`,(0,o.jsx)(e.h2,{children:\"Notas\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"Como a maioria dos navegadores suportam \",(0,o.jsx)(e.code,{children:\"let\"}),\" e \",(0,o.jsx)(e.code,{children:\"const\"}),\" atualmente, usar \",(0,o.jsx)(e.code,{children:\"var\"}),\" n\\xE3o \\xE9 mais recomendado. Se voc\\xEA precisa dar suporte a navegadores mais antigos, escreva seu c\\xF3digo usando \",(0,o.jsx)(e.code,{children:\"let\"}),\" e use um transpiler como o Babel para compilar seu c\\xF3digo para uma sintaxe mais antiga.\"]}),`\n`]})]})}function u(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(t,{...n})}):t(n)}return q(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const/zh-CN.json
index 1738b4837..0704c6560 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),p=(r,e)=>{for(var c in e)l(r,c,{get:e[c],enumerable:!0})},o=(r,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of f(e))!v.call(r,d)&&d!==c&&l(r,d,{get:()=>e[d],enumerable:!(i=b(e,d))||i.enumerable});return r};var z=(r,e,c)=>(c=r!=null?s(u(r)):{},o(e||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),m=r=>o(l({},\"__esModule\",{value:!0}),r);var h=g((q,t)=>{t.exports=_jsx_runtime});var y={};p(y,{default:()=>E,frontmatter:()=>x});var n=z(h()),x={title:\"JavaScript \\u4E2D\\u4F7F\\u7528 `let`\\u3001`var` \\u6216 `const` \\u521B\\u5EFA\\u7684\\u53D8\\u91CF\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function a(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",hr:\"hr\",h3:\"h3\",em:\"em\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"let\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u90FD\\u662F\\u7528\\u4E8E\\u58F0\\u660E\\u53D8\\u91CF\\u7684\\u5173\\u952E\\u5B57\\uFF0C\\u4F46\\u5B83\\u4EEC\\u5728\\u4F5C\\u7528\\u57DF\\u3001\\u521D\\u59CB\\u5316\\u89C4\\u5219\\u3001\\u662F\\u5426\\u53EF\\u4EE5\\u91CD\\u65B0\\u58F0\\u660E\\u6216\\u91CD\\u65B0\\u8D4B\\u503C\\u4EE5\\u53CA\\u5728\\u58F0\\u660E\\u524D\\u8BBF\\u95EE\\u65F6\\u7684\\u884C\\u4E3A\\u65B9\\u9762\\u5B58\\u5728\\u663E\\u7740\\u5DEE\\u5F02\\uFF1A\"]}),`\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:\"\\u884C\\u4E3A\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"var\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"let\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"const\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u4F5C\\u7528\\u57DF\"}),(0,n.jsx)(e.td,{children:\"\\u51FD\\u6570\\u6216\\u5168\\u5C40\"}),(0,n.jsx)(e.td,{children:\"\\u5757\"}),(0,n.jsx)(e.td,{children:\"\\u5757\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u521D\\u59CB\\u5316\"}),(0,n.jsx)(e.td,{children:\"\\u53EF\\u9009\"}),(0,n.jsx)(e.td,{children:\"\\u53EF\\u9009\"}),(0,n.jsx)(e.td,{children:\"\\u5FC5\\u9700\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u91CD\\u65B0\\u58F0\\u660E\"}),(0,n.jsx)(e.td,{children:\"\\u662F\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u91CD\\u65B0\\u8D4B\\u503C\"}),(0,n.jsx)(e.td,{children:\"\\u662F\"}),(0,n.jsx)(e.td,{children:\"\\u662F\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u58F0\\u660E\\u524D\\u8BBF\\u95EE\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"undefined\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"ReferenceError\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"ReferenceError\"})})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u884C\\u4E3A\\u5DEE\\u5F02\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8BA9\\u6211\\u4EEC\\u770B\\u770B \",(0,n.jsx)(e.code,{children:\"var\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u4E4B\\u95F4\\u7684\\u884C\\u4E3A\\u5DEE\\u5F02\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F5C\\u7528\\u57DF\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u5173\\u952E\\u5B57\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u7684\\u4F5C\\u7528\\u57DF\\u9650\\u5B9A\\u4E8E\\u521B\\u5EFA\\u5B83\\u4EEC\\u7684\\u51FD\\u6570\\uFF0C\\u6216\\u8005\\u5982\\u679C\\u521B\\u5EFA\\u5728\\u4EFB\\u4F55\\u51FD\\u6570\\u4E4B\\u5916\\uFF0C\\u5219\\u9650\\u5B9A\\u4E8E\\u5168\\u5C40\\u5BF9\\u8C61\\u3002\",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u662F\",(0,n.jsx)(e.em,{children:\"\\u5757\\u4F5C\\u7528\\u57DF\"}),\"\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4EEC\\u53EA\\u80FD\\u5728\\u6700\\u8FD1\\u7684\\u4E00\\u7EC4\\u82B1\\u62EC\\u53F7\\uFF08\\u51FD\\u6570\\u3001if-else \\u5757\\u6216 for \\u5FAA\\u73AF\\uFF09\\u5185\\u8BBF\\u95EE\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function foo() {\n  // All variables are accessible within functions.\n  var bar = 1;\n  let baz = 2;\n  const qux = 3;\n\n  console.log(bar); // 1\n  console.log(baz); // 2\n  console.log(qux); // 3\n}\n\nfoo(); // Prints each variable successfully\nconsole.log(bar); // ReferenceError: bar is not defined\nconsole.log(baz); // ReferenceError: baz is not defined\nconsole.log(qux); // ReferenceError: qux is not defined\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u4E0B\\u9762\\u7684\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"bar\"}),\" \\u53EF\\u4EE5\\u5728 \",(0,n.jsx)(e.code,{children:\"if\"}),\" \\u5757\\u4E4B\\u5916\\u8BBF\\u95EE\\uFF0C\\u4F46 \",(0,n.jsx)(e.code,{children:\"baz\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"quz\"}),\" \\u5219\\u4E0D\\u80FD\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`if (true) {\n  var bar = 1;\n  let baz = 2;\n  const qux = 3;\n}\n\n// var variables are accessible anywhere in the function scope.\nconsole.log(bar); // 1\n// let and const variables are not accessible outside of the block they were defined in.\nconsole.log(baz); // ReferenceError: baz is not defined\nconsole.log(qux); // ReferenceError: qux is not defined\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u521D\\u59CB\\u5316\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u53D8\\u91CF\\u53EF\\u4EE5\\u5728\\u6CA1\\u6709\\u503C\\u7684\\u60C5\\u51B5\\u4E0B\\u521D\\u59CB\\u5316\\uFF0C\\u4F46 \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u58F0\\u660E\\u5FC5\\u987B\\u521D\\u59CB\\u5316\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var foo; // Ok\nlet bar; // Ok\nconst baz; // SyntaxError: Missing initializer in const declaration\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u91CD\\u65B0\\u58F0\\u660E\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u91CD\\u65B0\\u58F0\\u660E\\u53D8\\u91CF\\u4E0D\\u4F1A\\u629B\\u51FA\\u9519\\u8BEF\\uFF0C\\u4F46 \",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u4F1A\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var foo = 1;\nvar foo = 2; // Ok\nconsole.log(foo); // Should print 2, but SyntaxError from baz prevents the code executing.\n\nlet baz = 3;\nlet baz = 4; // Uncaught SyntaxError: Identifier 'baz' has already been declared\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u91CD\\u65B0\\u8D4B\\u503C\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u7684\\u533A\\u522B\\u5728\\u4E8E\\uFF0C\",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u5141\\u8BB8\\u91CD\\u65B0\\u5206\\u914D\\u53D8\\u91CF\\u7684\\u503C\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u4E0D\\u5141\\u8BB8\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var foo = 1;\nfoo = 2; // This is fine.\n\nlet bar = 3;\nbar = 4; // This is fine.\n\nconst baz = 5;\nbaz = 6; // Uncaught TypeError: Assignment to constant variable.\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u58F0\\u660E\\u524D\\u8BBF\\u95EE\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u90FD\\u4F1A\\u88AB\\u63D0\\u5347\\u3002\",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u4F1A\\u81EA\\u52A8\\u521D\\u59CB\\u5316\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" \\u503C\\u3002\\u4F46\\u662F\\uFF0C\",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u53D8\\u91CF\\u4E0D\\u4F1A\\u88AB\\u521D\\u59CB\\u5316\\uFF0C\\u5728\\u58F0\\u660E\\u4E4B\\u524D\\u8BBF\\u95EE\\u5B83\\u4EEC\\u5C06\\u5BFC\\u81F4 \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\" \\u5F02\\u5E38\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u5904\\u4E8E\\u4ECE\\u5757\\u7684\\u5F00\\u59CB\\u5230\\u58F0\\u660E\\u88AB\\u5904\\u7406\\u7684\\u201C\\u6682\\u65F6\\u6027\\u6B7B\\u533A\\u201D\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(foo); // undefined\nvar foo = 'foo';\n\nconsole.log(baz); // ReferenceError: Cannot access 'baz' before initialization\nlet baz = 'baz';\n\nconsole.log(bar); // ReferenceError: Cannot access 'baz' before initialization\nconst bar = 'bar';\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7B14\\u8BB0\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5728\\u73B0\\u4EE3 JavaScript \\u4E2D\\uFF0C\\u901A\\u5E38\\u5EFA\\u8BAE\\u9ED8\\u8BA4\\u5BF9\\u4E0D\\u9700\\u8981\\u91CD\\u65B0\\u8D4B\\u503C\\u7684\\u53D8\\u91CF\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"const\"}),\"\\u3002\\u8FD9\\u53EF\\u4EE5\\u63D0\\u9AD8\\u4E0D\\u53D8\\u6027\\u5E76\\u9632\\u6B62\\u610F\\u5916\\u66F4\\u6539\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5F53\\u60A8\\u9700\\u8981\\u5728\\u5176\\u8303\\u56F4\\u5185\\u91CD\\u65B0\\u5206\\u914D\\u53D8\\u91CF\\u65F6\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"let\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u907F\\u514D\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"var\"}),\"\\uFF0C\\u56E0\\u4E3A\\u5B83\\u53EF\\u80FD\\u5B58\\u5728\\u4F5C\\u7528\\u57DF\\u95EE\\u9898\\u548C\\u63D0\\u5347\\u884C\\u4E3A\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5982\\u679C\\u60A8\\u9700\\u8981\\u9488\\u5BF9\\u65E7\\u7248\\u6D4F\\u89C8\\u5668\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"let\"}),\"/\",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u7F16\\u5199\\u4EE3\\u7801\\uFF0C\\u5E76\\u4F7F\\u7528 Babel \\u7B49\\u8F6C\\u8BD1\\u5668\\u5C06\\u60A8\\u7684\\u4EE3\\u7801\\u7F16\\u8BD1\\u4E3A\\u65E7\\u8BED\\u6CD5\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://medium.com/swlh/the-difference-of-var-vs-let-vs-const-in-javascript-abe37e214d66\",children:'Javascript \\u4E2D \"var\" vs \"let\" vs \"const\" \\u7684\\u533A\\u522B'})}),`\n`]})]})}function j(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(a,r)})):a(r)}var E=j;return m(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var b=Object.create;var l=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var p=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),z=(r,e)=>{for(var c in e)l(r,c,{get:e[c],enumerable:!0})},o=(r,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of u(e))!g.call(r,d)&&d!==c&&l(r,d,{get:()=>e[d],enumerable:!(i=f(e,d))||i.enumerable});return r};var m=(r,e,c)=>(c=r!=null?b(v(r)):{},o(e||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),x=r=>o(l({},\"__esModule\",{value:!0}),r);var h=p((R,t)=>{t.exports=_jsx_runtime});var j={};z(j,{default:()=>s,frontmatter:()=>E});var n=m(h()),E={title:\"JavaScript \\u4E2D\\u4F7F\\u7528 `let`\\u3001`var` \\u6216 `const` \\u521B\\u5EFA\\u7684\\u53D8\\u91CF\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function a(r){let e={a:\"a\",code:\"code\",em:\"em\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"let\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u90FD\\u662F\\u7528\\u4E8E\\u58F0\\u660E\\u53D8\\u91CF\\u7684\\u5173\\u952E\\u5B57\\uFF0C\\u4F46\\u5B83\\u4EEC\\u5728\\u4F5C\\u7528\\u57DF\\u3001\\u521D\\u59CB\\u5316\\u89C4\\u5219\\u3001\\u662F\\u5426\\u53EF\\u4EE5\\u91CD\\u65B0\\u58F0\\u660E\\u6216\\u91CD\\u65B0\\u8D4B\\u503C\\u4EE5\\u53CA\\u5728\\u58F0\\u660E\\u524D\\u8BBF\\u95EE\\u65F6\\u7684\\u884C\\u4E3A\\u65B9\\u9762\\u5B58\\u5728\\u663E\\u7740\\u5DEE\\u5F02\\uFF1A\"]}),`\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:\"\\u884C\\u4E3A\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"var\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"let\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"const\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u4F5C\\u7528\\u57DF\"}),(0,n.jsx)(e.td,{children:\"\\u51FD\\u6570\\u6216\\u5168\\u5C40\"}),(0,n.jsx)(e.td,{children:\"\\u5757\"}),(0,n.jsx)(e.td,{children:\"\\u5757\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u521D\\u59CB\\u5316\"}),(0,n.jsx)(e.td,{children:\"\\u53EF\\u9009\"}),(0,n.jsx)(e.td,{children:\"\\u53EF\\u9009\"}),(0,n.jsx)(e.td,{children:\"\\u5FC5\\u9700\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u91CD\\u65B0\\u58F0\\u660E\"}),(0,n.jsx)(e.td,{children:\"\\u662F\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u91CD\\u65B0\\u8D4B\\u503C\"}),(0,n.jsx)(e.td,{children:\"\\u662F\"}),(0,n.jsx)(e.td,{children:\"\\u662F\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u58F0\\u660E\\u524D\\u8BBF\\u95EE\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"undefined\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"ReferenceError\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"ReferenceError\"})})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u884C\\u4E3A\\u5DEE\\u5F02\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8BA9\\u6211\\u4EEC\\u770B\\u770B \",(0,n.jsx)(e.code,{children:\"var\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u4E4B\\u95F4\\u7684\\u884C\\u4E3A\\u5DEE\\u5F02\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F5C\\u7528\\u57DF\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u5173\\u952E\\u5B57\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u7684\\u4F5C\\u7528\\u57DF\\u9650\\u5B9A\\u4E8E\\u521B\\u5EFA\\u5B83\\u4EEC\\u7684\\u51FD\\u6570\\uFF0C\\u6216\\u8005\\u5982\\u679C\\u521B\\u5EFA\\u5728\\u4EFB\\u4F55\\u51FD\\u6570\\u4E4B\\u5916\\uFF0C\\u5219\\u9650\\u5B9A\\u4E8E\\u5168\\u5C40\\u5BF9\\u8C61\\u3002\",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u662F\",(0,n.jsx)(e.em,{children:\"\\u5757\\u4F5C\\u7528\\u57DF\"}),\"\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4EEC\\u53EA\\u80FD\\u5728\\u6700\\u8FD1\\u7684\\u4E00\\u7EC4\\u82B1\\u62EC\\u53F7\\uFF08\\u51FD\\u6570\\u3001if-else \\u5757\\u6216 for \\u5FAA\\u73AF\\uFF09\\u5185\\u8BBF\\u95EE\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function foo() {\n  // All variables are accessible within functions.\n  var bar = 1;\n  let baz = 2;\n  const qux = 3;\n\n  console.log(bar); // 1\n  console.log(baz); // 2\n  console.log(qux); // 3\n}\n\nfoo(); // Prints each variable successfully\nconsole.log(bar); // ReferenceError: bar is not defined\nconsole.log(baz); // ReferenceError: baz is not defined\nconsole.log(qux); // ReferenceError: qux is not defined\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u4E0B\\u9762\\u7684\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"bar\"}),\" \\u53EF\\u4EE5\\u5728 \",(0,n.jsx)(e.code,{children:\"if\"}),\" \\u5757\\u4E4B\\u5916\\u8BBF\\u95EE\\uFF0C\\u4F46 \",(0,n.jsx)(e.code,{children:\"baz\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"quz\"}),\" \\u5219\\u4E0D\\u80FD\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`if (true) {\n  var bar = 1;\n  let baz = 2;\n  const qux = 3;\n}\n\n// var variables are accessible anywhere in the function scope.\nconsole.log(bar); // 1\n// let and const variables are not accessible outside of the block they were defined in.\nconsole.log(baz); // ReferenceError: baz is not defined\nconsole.log(qux); // ReferenceError: qux is not defined\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u521D\\u59CB\\u5316\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u53D8\\u91CF\\u53EF\\u4EE5\\u5728\\u6CA1\\u6709\\u503C\\u7684\\u60C5\\u51B5\\u4E0B\\u521D\\u59CB\\u5316\\uFF0C\\u4F46 \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u58F0\\u660E\\u5FC5\\u987B\\u521D\\u59CB\\u5316\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var foo; // Ok\nlet bar; // Ok\nconst baz; // SyntaxError: Missing initializer in const declaration\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u91CD\\u65B0\\u58F0\\u660E\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u91CD\\u65B0\\u58F0\\u660E\\u53D8\\u91CF\\u4E0D\\u4F1A\\u629B\\u51FA\\u9519\\u8BEF\\uFF0C\\u4F46 \",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u4F1A\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var foo = 1;\nvar foo = 2; // Ok\nconsole.log(foo); // Should print 2, but SyntaxError from baz prevents the code executing.\n\nlet baz = 3;\nlet baz = 4; // Uncaught SyntaxError: Identifier 'baz' has already been declared\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u91CD\\u65B0\\u8D4B\\u503C\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u7684\\u533A\\u522B\\u5728\\u4E8E\\uFF0C\",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u5141\\u8BB8\\u91CD\\u65B0\\u5206\\u914D\\u53D8\\u91CF\\u7684\\u503C\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u4E0D\\u5141\\u8BB8\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var foo = 1;\nfoo = 2; // This is fine.\n\nlet bar = 3;\nbar = 4; // This is fine.\n\nconst baz = 5;\nbaz = 6; // Uncaught TypeError: Assignment to constant variable.\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u58F0\\u660E\\u524D\\u8BBF\\u95EE\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u90FD\\u4F1A\\u88AB\\u63D0\\u5347\\u3002\",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u4F1A\\u81EA\\u52A8\\u521D\\u59CB\\u5316\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" \\u503C\\u3002\\u4F46\\u662F\\uFF0C\",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u53D8\\u91CF\\u4E0D\\u4F1A\\u88AB\\u521D\\u59CB\\u5316\\uFF0C\\u5728\\u58F0\\u660E\\u4E4B\\u524D\\u8BBF\\u95EE\\u5B83\\u4EEC\\u5C06\\u5BFC\\u81F4 \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\" \\u5F02\\u5E38\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u5904\\u4E8E\\u4ECE\\u5757\\u7684\\u5F00\\u59CB\\u5230\\u58F0\\u660E\\u88AB\\u5904\\u7406\\u7684\\u201C\\u6682\\u65F6\\u6027\\u6B7B\\u533A\\u201D\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(foo); // undefined\nvar foo = 'foo';\n\nconsole.log(baz); // ReferenceError: Cannot access 'baz' before initialization\nlet baz = 'baz';\n\nconsole.log(bar); // ReferenceError: Cannot access 'baz' before initialization\nconst bar = 'bar';\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7B14\\u8BB0\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5728\\u73B0\\u4EE3 JavaScript \\u4E2D\\uFF0C\\u901A\\u5E38\\u5EFA\\u8BAE\\u9ED8\\u8BA4\\u5BF9\\u4E0D\\u9700\\u8981\\u91CD\\u65B0\\u8D4B\\u503C\\u7684\\u53D8\\u91CF\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"const\"}),\"\\u3002\\u8FD9\\u53EF\\u4EE5\\u63D0\\u9AD8\\u4E0D\\u53D8\\u6027\\u5E76\\u9632\\u6B62\\u610F\\u5916\\u66F4\\u6539\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5F53\\u60A8\\u9700\\u8981\\u5728\\u5176\\u8303\\u56F4\\u5185\\u91CD\\u65B0\\u5206\\u914D\\u53D8\\u91CF\\u65F6\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"let\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u907F\\u514D\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"var\"}),\"\\uFF0C\\u56E0\\u4E3A\\u5B83\\u53EF\\u80FD\\u5B58\\u5728\\u4F5C\\u7528\\u57DF\\u95EE\\u9898\\u548C\\u63D0\\u5347\\u884C\\u4E3A\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5982\\u679C\\u60A8\\u9700\\u8981\\u9488\\u5BF9\\u65E7\\u7248\\u6D4F\\u89C8\\u5668\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"let\"}),\"/\",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u7F16\\u5199\\u4EE3\\u7801\\uFF0C\\u5E76\\u4F7F\\u7528 Babel \\u7B49\\u8F6C\\u8BD1\\u5668\\u5C06\\u60A8\\u7684\\u4EE3\\u7801\\u7F16\\u8BD1\\u4E3A\\u65E7\\u8BED\\u6CD5\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://medium.com/swlh/the-difference-of-var-vs-let-vs-const-in-javascript-abe37e214d66\",children:'Javascript \\u4E2D \"var\" vs \"let\" vs \"const\" \\u7684\\u533A\\u522B'})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(a,{...r})}):a(r)}return x(j);})();\n;return Component;"
 }
\ No newline at end of file
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 d28725dd5..e077722cb 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),b=(r,e)=>{for(var o in e)c(r,o,{get:e[o],enumerable:!0})},s=(r,e,o,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of u(e))!f.call(r,t)&&t!==o&&c(r,t,{get:()=>e[t],enumerable:!(d=p(e,t))||d.enumerable});return r};var y=(r,e,o)=>(o=r!=null?a(g(r)):{},s(e||!r||!r.__esModule?c(o,\"default\",{value:r,enumerable:!0}):o,r)),q=r=>s(c({},\"__esModule\",{value:!0}),r);var i=m((w,h)=>{h.exports=_jsx_runtime});var R={};b(R,{default:()=>j,frontmatter:()=>x});var n=y(i()),x={title:\"What are the differences between `XMLHttpRequest` and `fetch()` in JavaScript and browsers?\"};function l(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",ul:\"ul\",li:\"li\",hr:\"hr\",pre:\"pre\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" (XHR) and \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API are both used for asynchronous HTTP requests in JavaScript (AJAX). \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" offers a cleaner syntax, promise-based approach, and more modern feature set compared to XHR. However, there are some differences:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" event callbacks, while \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" utilizes promise chaining.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" provides more flexibility in headers and request bodies.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" support cleaner error handling with \",(0,n.jsx)(e.code,{children:\"catch()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Handling caching with \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" is difficult but caching is supported by \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" by default in the \",(0,n.jsx)(e.code,{children:\"options.cache\"}),\" object (\",(0,n.jsx)(e.code,{children:\"cache\"}),\" value of second parameter) to \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" or \",(0,n.jsx)(e.code,{children:\"Request()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" requires an \",(0,n.jsx)(e.code,{children:\"AbortController\"}),\" for cancelation, while for \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\", it provides \",(0,n.jsx)(e.code,{children:\"abort()\"}),\" property.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" has good support for progress tracking, which \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" lacks.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" is only available in the browser and not natively supported in Node.js environments. On the other hand \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" is part of the JavaScript language and is supported on all modern JavaScript runtimes.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"These days \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" is preferred for its cleaner syntax and modern features.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" vs \",(0,n.jsx)(e.code,{children:\"fetch()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Both \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" (XHR) and \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" are ways to make asynchronous HTTP requests in JavaScript. However, they differ significantly in syntax, promise handling, and feature set.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Syntax and usage\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" is event-driven and requires attaching event listeners to handle response/error states. The basic syntax for creating an \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" object and sending a request is as follows:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.responseType = 'json';\nxhr.onload = function () {\n  if (xhr.status === 200) {\n    console.log(xhr.response);\n  }\n};\nxhr.send();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"xhr\"}),\" is an instance of the \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" class. The \",(0,n.jsx)(e.code,{children:\"open\"}),\" method is used to specify the request method, URL, and whether the request should be asynchronous. The \",(0,n.jsx)(e.code,{children:\"onload\"}),\" event is used to handle the response, and the \",(0,n.jsx)(e.code,{children:\"send\"}),\" method is used to send the request.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" provides a more straightforward and intuitive way of making HTTP requests. It is \",(0,n.jsx)(e.code,{children:\"Promise\"}),\"-based and returns a promise that resolves with the response or rejects with an error. The basic syntax for making a GET request using \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" is as follows:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.text())\n  .then((data) => console.log(data));\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Request headers\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Both \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" and \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" support setting request headers. However, \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" provides more flexibility in terms of setting headers, as it supports custom headers and allows for more complex header configurations.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" supports setting request headers using the \",(0,n.jsx)(e.code,{children:\"setRequestHeader\"}),\" method:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`xhr.setRequestHeader('Content-Type', 'application/json');\nxhr.setRequestHeader('Authorization', 'Bearer YOUR_TOKEN');\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"For \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\", headers are passed as an object in the second argument to \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1', {\n  method: 'POST',\n  headers: {\n    'Content-Type': 'application/json',\n    Authorization: 'Bearer YOUR_TOKEN',\n  },\n  body: JSON.stringify({\n    name: 'John Doe',\n    age: 30,\n  }),\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Request body\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Both \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" and \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" support sending request bodies. However, \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" provides more flexibility in terms of sending request bodies, as it supports sending JSON data, form data, and more.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" supports sending request bodies using the \",(0,n.jsx)(e.code,{children:\"send\"}),\" method:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('POST', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.send(\n  JSON.stringify({\n    name: 'John Doe',\n    age: 30,\n  }),\n);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" supports sending request bodies using the \",(0,n.jsx)(e.code,{children:\"body\"}),\" property in the second argument to \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1', {\n  method: 'POST',\n  headers: {\n    'Content-Type': 'application/json',\n  },\n  body: JSON.stringify({\n    name: 'John Doe',\n    age: 30,\n  }),\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Response handling\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" provides a \",(0,n.jsx)(e.code,{children:\"responseType\"}),\" property to set the response format that we are expecting. \",(0,n.jsx)(e.code,{children:\"responseType\"}),\" is \",(0,n.jsx)(e.code,{children:\"'text'\"}),\" by default but it support types likes \",(0,n.jsx)(e.code,{children:\"'text'\"}),\", \",(0,n.jsx)(e.code,{children:\"'arraybuffer'\"}),\", \",(0,n.jsx)(e.code,{children:\"'blob'\"}),\", \",(0,n.jsx)(e.code,{children:\"'document'\"}),\" and \",(0,n.jsx)(e.code,{children:\"'json'\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.responseType = 'json'; // or 'text', 'blob', 'arraybuffer'\nxhr.onload = function () {\n  if (xhr.status === 200) {\n    console.log(xhr.response);\n  }\n};\nxhr.send();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"On the other hand, \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" provides a unified \",(0,n.jsx)(e.code,{children:\"Response\"}),\" object with \",(0,n.jsx)(e.code,{children:\"then\"}),\" method for accessing data.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// JSON data\nfetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.json())\n  .then((data) => console.log(data));\n\n// Text data\nfetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.text())\n  .then((data) => console.log(data));\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Error handling\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Both support error handling but \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" provides more flexibility in terms of error handling, as it supports handling errors using the \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" method.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" supports error handling using the \",(0,n.jsx)(e.code,{children:\"onerror\"}),\" event:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('GET', 'https://jsonplaceholder.typicod.com/todos/1', true); // Typo in URL\nxhr.responseType = 'json';\nxhr.onload = function () {\n  if (xhr.status === 200) {\n    console.log(xhr.response);\n  }\n};\nxhr.onerror = function () {\n  console.error('Error occurred');\n};\nxhr.send();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" supports error handling using the \",(0,n.jsx)(e.code,{children:\"catch()\"}),\" method on the returned \",(0,n.jsx)(e.code,{children:\"Promise\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicod.com/todos/1') // Typo in URL\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error occurred: ' + error));\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Caching control\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Handling caching with \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" is difficult, and you might need to add a random value to the query string in order to get around the browser cache. Caching is supported by \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" by default in the second parameter of the \",(0,n.jsx)(e.code,{children:\"options\"}),\" object:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const res = await fetch('https://jsonplaceholder.typicode.com/todos/1', {\n  method: 'GET',\n  cache: 'default',\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Other values for the \",(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Request/cache\",children:[(0,n.jsx)(e.code,{children:\"cache\"}),\" option\"]}),\" include \",(0,n.jsx)(e.code,{children:\"default\"}),\", \",(0,n.jsx)(e.code,{children:\"no-store\"}),\", \",(0,n.jsx)(e.code,{children:\"reload\"}),\", \",(0,n.jsx)(e.code,{children:\"no-cache\"}),\", \",(0,n.jsx)(e.code,{children:\"force-cache\"}),\", and \",(0,n.jsx)(e.code,{children:\"only-if-cached\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Cancelation\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In-flight \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\"s can be canceled by running the \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\"'s \",(0,n.jsx)(e.code,{children:\"abort()\"}),\" method. An \",(0,n.jsx)(e.code,{children:\"abort\"}),\" handler can be attached by assigning to the \",(0,n.jsx)(e.code,{children:\".onabort\"}),\" property if necessary:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');\nxhr.send();\n// ...\nxhr.onabort = () => console.log('aborted');\nxhr.abort();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Aborting a \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" requires creating an \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/AbortController\",children:(0,n.jsx)(e.code,{children:\"AbortController\"})}),\" object and passing it to as the \",(0,n.jsx)(e.code,{children:\"signal\"}),\" property of the \",(0,n.jsx)(e.code,{children:\"options\"}),\" object when calling \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const controller = new AbortController();\nconst signal = controller.signal;\n\nfetch('https://jsonplaceholder.typicode.com/todos/1', { signal })\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error occurred: ' + error));\n\n// Abort request.\ncontroller.abort();\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Progress support\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" supports tracking the progress of requests by attaching a handler to the \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" object's progress event. This is especially useful when uploading large files such as videos to track the progress of the upload.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\n\n// The callback is passed a \\`ProgressEvent\\`.\nxhr.upload.onprogress = (event) => {\n  console.log(Math.round((event.loaded / event.total) * 100) + '%');\n};\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The callback assigned to \",(0,n.jsx)(e.code,{children:\"onprogress\"}),\" is passed a \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/progress_event\",children:(0,n.jsx)(e.code,{children:\"ProgressEvent\"})}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"loaded\"}),\" field on the \",(0,n.jsx)(e.code,{children:\"ProgressEvent\"}),\" is a 64-bit integer indicating the amount of work already performed (bytes uploaded/downloaded) by the underlying process.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"total\"}),\" field on the \",(0,n.jsx)(e.code,{children:\"ProgressEvent\"}),\" is a 64-bit integer representing the total amount of work that the underlying process is in the progress of performing. When downloading resources, this is the \",(0,n.jsx)(e.code,{children:\"Content-Length\"}),\" value of the HTTP response.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"On the other hand, the \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API does not offer any convenient way to track upload progress. It can be implemented by monitoring the \",(0,n.jsx)(e.code,{children:\"body\"}),\" of the \",(0,n.jsx)(e.code,{children:\"Response\"}),\" object as a fraction of the \",(0,n.jsx)(e.code,{children:\"Content-Length\"}),\" header, but it's quite complicated.\"]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Choosing between \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" and \",(0,n.jsx)(e.code,{children:\"fetch()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In modern development scenarios, \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" is the preferred choice due to its cleaner syntax, promise-based approach, and improved handling of features like error handling, headers, and CORS.\"]}),`\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/Web/API/Fetch_API/Using_Fetch\",children:\"Fetch API | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest\",children:\"XMLHttpRequest | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Request/cache\",children:\"Request: cache property | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/xmlhttprequest\",children:\"XMLHttpRequest | Javascript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://hacks.mozilla.org/2015/03/this-api-is-so-fetching/\",children:\"This API is so Fetching! - Mozilla Hacks\"})}),`\n`]})]})}function v(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(l,r)})):l(r)}var j=v;return q(R);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var b=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),y=(r,e)=>{for(var o in e)c(r,o,{get:e[o],enumerable:!0})},s=(r,e,o,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of g(e))!m.call(r,t)&&t!==o&&c(r,t,{get:()=>e[t],enumerable:!(d=u(e,t))||d.enumerable});return r};var q=(r,e,o)=>(o=r!=null?p(f(r)):{},s(e||!r||!r.__esModule?c(o,\"default\",{value:r,enumerable:!0}):o,r)),x=r=>s(c({},\"__esModule\",{value:!0}),r);var i=b((H,h)=>{h.exports=_jsx_runtime});var R={};y(R,{default:()=>a,frontmatter:()=>v});var n=q(i()),v={title:\"What are the differences between `XMLHttpRequest` and `fetch()` in JavaScript and browsers?\"};function l(r){let e={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" (XHR) and \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API are both used for asynchronous HTTP requests in JavaScript (AJAX). \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" offers a cleaner syntax, promise-based approach, and more modern feature set compared to XHR. However, there are some differences:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" event callbacks, while \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" utilizes promise chaining.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" provides more flexibility in headers and request bodies.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" support cleaner error handling with \",(0,n.jsx)(e.code,{children:\"catch()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Handling caching with \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" is difficult but caching is supported by \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" by default in the \",(0,n.jsx)(e.code,{children:\"options.cache\"}),\" object (\",(0,n.jsx)(e.code,{children:\"cache\"}),\" value of second parameter) to \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" or \",(0,n.jsx)(e.code,{children:\"Request()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" requires an \",(0,n.jsx)(e.code,{children:\"AbortController\"}),\" for cancelation, while for \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\", it provides \",(0,n.jsx)(e.code,{children:\"abort()\"}),\" property.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" has good support for progress tracking, which \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" lacks.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" is only available in the browser and not natively supported in Node.js environments. On the other hand \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" is part of the JavaScript language and is supported on all modern JavaScript runtimes.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"These days \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" is preferred for its cleaner syntax and modern features.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" vs \",(0,n.jsx)(e.code,{children:\"fetch()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Both \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" (XHR) and \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" are ways to make asynchronous HTTP requests in JavaScript. However, they differ significantly in syntax, promise handling, and feature set.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Syntax and usage\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" is event-driven and requires attaching event listeners to handle response/error states. The basic syntax for creating an \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" object and sending a request is as follows:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.responseType = 'json';\nxhr.onload = function () {\n  if (xhr.status === 200) {\n    console.log(xhr.response);\n  }\n};\nxhr.send();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"xhr\"}),\" is an instance of the \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" class. The \",(0,n.jsx)(e.code,{children:\"open\"}),\" method is used to specify the request method, URL, and whether the request should be asynchronous. The \",(0,n.jsx)(e.code,{children:\"onload\"}),\" event is used to handle the response, and the \",(0,n.jsx)(e.code,{children:\"send\"}),\" method is used to send the request.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" provides a more straightforward and intuitive way of making HTTP requests. It is \",(0,n.jsx)(e.code,{children:\"Promise\"}),\"-based and returns a promise that resolves with the response or rejects with an error. The basic syntax for making a GET request using \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" is as follows:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.text())\n  .then((data) => console.log(data));\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Request headers\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Both \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" and \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" support setting request headers. However, \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" provides more flexibility in terms of setting headers, as it supports custom headers and allows for more complex header configurations.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" supports setting request headers using the \",(0,n.jsx)(e.code,{children:\"setRequestHeader\"}),\" method:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`xhr.setRequestHeader('Content-Type', 'application/json');\nxhr.setRequestHeader('Authorization', 'Bearer YOUR_TOKEN');\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"For \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\", headers are passed as an object in the second argument to \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1', {\n  method: 'POST',\n  headers: {\n    'Content-Type': 'application/json',\n    Authorization: 'Bearer YOUR_TOKEN',\n  },\n  body: JSON.stringify({\n    name: 'John Doe',\n    age: 30,\n  }),\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Request body\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Both \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" and \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" support sending request bodies. However, \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" provides more flexibility in terms of sending request bodies, as it supports sending JSON data, form data, and more.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" supports sending request bodies using the \",(0,n.jsx)(e.code,{children:\"send\"}),\" method:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('POST', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.send(\n  JSON.stringify({\n    name: 'John Doe',\n    age: 30,\n  }),\n);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" supports sending request bodies using the \",(0,n.jsx)(e.code,{children:\"body\"}),\" property in the second argument to \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1', {\n  method: 'POST',\n  headers: {\n    'Content-Type': 'application/json',\n  },\n  body: JSON.stringify({\n    name: 'John Doe',\n    age: 30,\n  }),\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Response handling\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" provides a \",(0,n.jsx)(e.code,{children:\"responseType\"}),\" property to set the response format that we are expecting. \",(0,n.jsx)(e.code,{children:\"responseType\"}),\" is \",(0,n.jsx)(e.code,{children:\"'text'\"}),\" by default but it support types likes \",(0,n.jsx)(e.code,{children:\"'text'\"}),\", \",(0,n.jsx)(e.code,{children:\"'arraybuffer'\"}),\", \",(0,n.jsx)(e.code,{children:\"'blob'\"}),\", \",(0,n.jsx)(e.code,{children:\"'document'\"}),\" and \",(0,n.jsx)(e.code,{children:\"'json'\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.responseType = 'json'; // or 'text', 'blob', 'arraybuffer'\nxhr.onload = function () {\n  if (xhr.status === 200) {\n    console.log(xhr.response);\n  }\n};\nxhr.send();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"On the other hand, \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" provides a unified \",(0,n.jsx)(e.code,{children:\"Response\"}),\" object with \",(0,n.jsx)(e.code,{children:\"then\"}),\" method for accessing data.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// JSON data\nfetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.json())\n  .then((data) => console.log(data));\n\n// Text data\nfetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.text())\n  .then((data) => console.log(data));\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Error handling\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Both support error handling but \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" provides more flexibility in terms of error handling, as it supports handling errors using the \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" method.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" supports error handling using the \",(0,n.jsx)(e.code,{children:\"onerror\"}),\" event:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('GET', 'https://jsonplaceholder.typicod.com/todos/1', true); // Typo in URL\nxhr.responseType = 'json';\nxhr.onload = function () {\n  if (xhr.status === 200) {\n    console.log(xhr.response);\n  }\n};\nxhr.onerror = function () {\n  console.error('Error occurred');\n};\nxhr.send();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" supports error handling using the \",(0,n.jsx)(e.code,{children:\"catch()\"}),\" method on the returned \",(0,n.jsx)(e.code,{children:\"Promise\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicod.com/todos/1') // Typo in URL\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error occurred: ' + error));\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Caching control\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Handling caching with \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" is difficult, and you might need to add a random value to the query string in order to get around the browser cache. Caching is supported by \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" by default in the second parameter of the \",(0,n.jsx)(e.code,{children:\"options\"}),\" object:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const res = await fetch('https://jsonplaceholder.typicode.com/todos/1', {\n  method: 'GET',\n  cache: 'default',\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Other values for the \",(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Request/cache\",children:[(0,n.jsx)(e.code,{children:\"cache\"}),\" option\"]}),\" include \",(0,n.jsx)(e.code,{children:\"default\"}),\", \",(0,n.jsx)(e.code,{children:\"no-store\"}),\", \",(0,n.jsx)(e.code,{children:\"reload\"}),\", \",(0,n.jsx)(e.code,{children:\"no-cache\"}),\", \",(0,n.jsx)(e.code,{children:\"force-cache\"}),\", and \",(0,n.jsx)(e.code,{children:\"only-if-cached\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Cancelation\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In-flight \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\"s can be canceled by running the \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\"'s \",(0,n.jsx)(e.code,{children:\"abort()\"}),\" method. An \",(0,n.jsx)(e.code,{children:\"abort\"}),\" handler can be attached by assigning to the \",(0,n.jsx)(e.code,{children:\".onabort\"}),\" property if necessary:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');\nxhr.send();\n// ...\nxhr.onabort = () => console.log('aborted');\nxhr.abort();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Aborting a \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" requires creating an \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/AbortController\",children:(0,n.jsx)(e.code,{children:\"AbortController\"})}),\" object and passing it to as the \",(0,n.jsx)(e.code,{children:\"signal\"}),\" property of the \",(0,n.jsx)(e.code,{children:\"options\"}),\" object when calling \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const controller = new AbortController();\nconst signal = controller.signal;\n\nfetch('https://jsonplaceholder.typicode.com/todos/1', { signal })\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error occurred: ' + error));\n\n// Abort request.\ncontroller.abort();\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Progress support\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" supports tracking the progress of requests by attaching a handler to the \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" object's progress event. This is especially useful when uploading large files such as videos to track the progress of the upload.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\n\n// The callback is passed a \\`ProgressEvent\\`.\nxhr.upload.onprogress = (event) => {\n  console.log(Math.round((event.loaded / event.total) * 100) + '%');\n};\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The callback assigned to \",(0,n.jsx)(e.code,{children:\"onprogress\"}),\" is passed a \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/progress_event\",children:(0,n.jsx)(e.code,{children:\"ProgressEvent\"})}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"loaded\"}),\" field on the \",(0,n.jsx)(e.code,{children:\"ProgressEvent\"}),\" is a 64-bit integer indicating the amount of work already performed (bytes uploaded/downloaded) by the underlying process.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"total\"}),\" field on the \",(0,n.jsx)(e.code,{children:\"ProgressEvent\"}),\" is a 64-bit integer representing the total amount of work that the underlying process is in the progress of performing. When downloading resources, this is the \",(0,n.jsx)(e.code,{children:\"Content-Length\"}),\" value of the HTTP response.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"On the other hand, the \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API does not offer any convenient way to track upload progress. It can be implemented by monitoring the \",(0,n.jsx)(e.code,{children:\"body\"}),\" of the \",(0,n.jsx)(e.code,{children:\"Response\"}),\" object as a fraction of the \",(0,n.jsx)(e.code,{children:\"Content-Length\"}),\" header, but it's quite complicated.\"]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Choosing between \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" and \",(0,n.jsx)(e.code,{children:\"fetch()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In modern development scenarios, \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" is the preferred choice due to its cleaner syntax, promise-based approach, and improved handling of features like error handling, headers, and CORS.\"]}),`\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/Web/API/Fetch_API/Using_Fetch\",children:\"Fetch API | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest\",children:\"XMLHttpRequest | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Request/cache\",children:\"Request: cache property | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/xmlhttprequest\",children:\"XMLHttpRequest | Javascript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://hacks.mozilla.org/2015/03/this-api-is-so-fetching/\",children:\"This API is so Fetching! - Mozilla Hacks\"})}),`\n`]})]})}function a(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(l,{...r})}):l(r)}return x(R);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-xmlhttprequest-and-fetch/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-xmlhttprequest-and-fetch/zh-CN.json
index 6c7734f97..c5e1b072a 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-xmlhttprequest-and-fetch/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-xmlhttprequest-and-fetch/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),R=(c,e)=>{for(var r in e)d(c,r,{get:e[r],enumerable:!0})},h=(c,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!g.call(c,o)&&o!==r&&d(c,o,{get:()=>e[o],enumerable:!(t=p(e,o))||t.enumerable});return c};var x=(c,e,r)=>(r=c!=null?a(f(c)):{},h(e||!c||!c.__esModule?d(r,\"default\",{value:c,enumerable:!0}):r,c)),j=c=>h(d({},\"__esModule\",{value:!0}),c);var i=m((y,l)=>{l.exports=_jsx_runtime});var L={};R(L,{default:()=>M,frontmatter:()=>H});var n=x(i()),H={title:\"JavaScript \\u548C\\u6D4F\\u89C8\\u5668\\u4E2D `XMLHttpRequest` \\u548C `fetch()` \\u4E4B\\u95F4\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function s(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",ul:\"ul\",li:\"li\",hr:\"hr\",pre:\"pre\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" (XHR) \\u548C \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API \\u90FD\\u7528\\u4E8E JavaScript (AJAX) \\u4E2D\\u7684\\u5F02\\u6B65 HTTP \\u8BF7\\u6C42\\u3002\\u4E0E XHR \\u76F8\\u6BD4\\uFF0C\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u63D0\\u4F9B\\u4E86\\u66F4\\u7B80\\u6D01\\u7684\\u8BED\\u6CD5\\u3001\\u57FA\\u4E8E Promise \\u7684\\u65B9\\u6CD5\\u548C\\u66F4\\u73B0\\u4EE3\\u7684\\u529F\\u80FD\\u96C6\\u3002\\u4F46\\u662F\\uFF0C\\u5B58\\u5728\\u4E00\\u4E9B\\u5DEE\\u5F02\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u4E8B\\u4EF6\\u56DE\\u8C03\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u4F7F\\u7528 promise \\u94FE\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u5728\\u6807\\u5934\\u548C\\u8BF7\\u6C42\\u4F53\\u65B9\\u9762\\u63D0\\u4F9B\\u4E86\\u66F4\\u5927\\u7684\\u7075\\u6D3B\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u901A\\u8FC7 \",(0,n.jsx)(e.code,{children:\"catch()\"}),\" \\u652F\\u6301\\u66F4\\u7B80\\u6D01\\u7684\\u9519\\u8BEF\\u5904\\u7406\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u5904\\u7406\\u7F13\\u5B58\\u5F88\\u56F0\\u96BE\\uFF0C\\u4F46 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u9ED8\\u8BA4\\u5728 \",(0,n.jsx)(e.code,{children:\"options.cache\"}),\" \\u5BF9\\u8C61\\uFF08\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u7684 \",(0,n.jsx)(e.code,{children:\"cache\"}),\" \\u503C\\uFF09\\u4E2D\\u652F\\u6301\\u7F13\\u5B58\\u5230 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"Request()\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u9700\\u8981 \",(0,n.jsx)(e.code,{children:\"AbortController\"}),\" \\u6765\\u53D6\\u6D88\\uFF0C\\u800C\\u5BF9\\u4E8E \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\"\\uFF0C\\u5B83\\u63D0\\u4F9B\\u4E86 \",(0,n.jsx)(e.code,{children:\"abort()\"}),\" \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u5BF9\\u8FDB\\u5EA6\\u8DDF\\u8E2A\\u6709\\u5F88\\u597D\\u7684\\u652F\\u6301\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u7F3A\\u4E4F\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u4EC5\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u53EF\\u7528\\uFF0C\\u5E76\\u4E14\\u5728 Node.js \\u73AF\\u5883\\u4E2D\\u4E0D\\u53D7\\u539F\\u751F\\u652F\\u6301\\u3002\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u662F JavaScript \\u8BED\\u8A00\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u5E76\\u4E14\\u5728\\u6240\\u6709\\u73B0\\u4EE3 JavaScript \\u8FD0\\u884C\\u65F6\\u4E2D\\u90FD\\u53D7\\u652F\\u6301\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u4ECA\\uFF0C\\u7531\\u4E8E\\u5176\\u66F4\\u7B80\\u6D01\\u7684\\u8BED\\u6CD5\\u548C\\u73B0\\u4EE3\\u529F\\u80FD\\uFF0C\\u66F4\\u503E\\u5411\\u4E8E\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" vs \",(0,n.jsx)(e.code,{children:\"fetch()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" (XHR) \\u548C \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u90FD\\u662F\\u5728 JavaScript \\u4E2D\\u8FDB\\u884C\\u5F02\\u6B65 HTTP \\u8BF7\\u6C42\\u7684\\u65B9\\u5F0F\\u3002\\u4F46\\u662F\\uFF0C\\u5B83\\u4EEC\\u5728\\u8BED\\u6CD5\\u3001promise \\u5904\\u7406\\u548C\\u529F\\u80FD\\u96C6\\u65B9\\u9762\\u5B58\\u5728\\u663E\\u7740\\u5DEE\\u5F02\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u8BED\\u6CD5\\u548C\\u7528\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u662F\\u4E8B\\u4EF6\\u9A71\\u52A8\\u7684\\uFF0C\\u9700\\u8981\\u9644\\u52A0\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u6765\\u5904\\u7406\\u54CD\\u5E94/\\u9519\\u8BEF\\u72B6\\u6001\\u3002\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u5BF9\\u8C61\\u548C\\u53D1\\u9001\\u8BF7\\u6C42\\u7684\\u57FA\\u672C\\u8BED\\u6CD5\\u5982\\u4E0B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.responseType = 'json';\nxhr.onload = function () {\n  if (xhr.status === 200) {\n    console.log(xhr.response);\n  }\n};\nxhr.send();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"xhr\"}),\" \\u662F \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u7C7B\\u7684\\u5B9E\\u4F8B\\u3002\",(0,n.jsx)(e.code,{children:\"open\"}),\" \\u65B9\\u6CD5\\u7528\\u4E8E\\u6307\\u5B9A\\u8BF7\\u6C42\\u65B9\\u6CD5\\u3001URL \\u4EE5\\u53CA\\u8BF7\\u6C42\\u662F\\u5426\\u5E94\\u4E3A\\u5F02\\u6B65\\u3002\",(0,n.jsx)(e.code,{children:\"onload\"}),\" \\u4E8B\\u4EF6\\u7528\\u4E8E\\u5904\\u7406\\u54CD\\u5E94\\uFF0C\",(0,n.jsx)(e.code,{children:\"send\"}),\" \\u65B9\\u6CD5\\u7528\\u4E8E\\u53D1\\u9001\\u8BF7\\u6C42\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u76F4\\u63A5\\u3001\\u66F4\\u76F4\\u89C2\\u7684\\u65B9\\u5F0F\\u6765\\u53D1\\u51FA HTTP \\u8BF7\\u6C42\\u3002\\u5B83\\u662F\\u57FA\\u4E8E \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" \\u7684\\uFF0C\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A promise\\uFF0C\\u8BE5 promise \\u4F7F\\u7528\\u54CD\\u5E94\\u8FDB\\u884C\\u89E3\\u6790\\u6216\\u4F7F\\u7528\\u9519\\u8BEF\\u8FDB\\u884C\\u62D2\\u7EDD\\u3002\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u53D1\\u51FA GET \\u8BF7\\u6C42\\u7684\\u57FA\\u672C\\u8BED\\u6CD5\\u5982\\u4E0B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.text())\n  .then((data) => console.log(data));\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u8BF7\\u6C42\\u6807\\u5934\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u90FD\\u652F\\u6301\\u8BBE\\u7F6E\\u8BF7\\u6C42\\u6807\\u5934\\u3002\\u4F46\\u662F\\uFF0C\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u5728\\u8BBE\\u7F6E\\u6807\\u5934\\u65B9\\u9762\\u63D0\\u4F9B\\u4E86\\u66F4\\u5927\\u7684\\u7075\\u6D3B\\u6027\\uFF0C\\u56E0\\u4E3A\\u5B83\\u652F\\u6301\\u81EA\\u5B9A\\u4E49\\u6807\\u5934\\u5E76\\u5141\\u8BB8\\u66F4\\u590D\\u6742\\u7684\\u6807\\u5934\\u914D\\u7F6E\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u652F\\u6301\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"setRequestHeader\"}),\" \\u65B9\\u6CD5\\u8BBE\\u7F6E\\u8BF7\\u6C42\\u6807\\u5934\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`xhr.setRequestHeader('Content-Type', 'application/json');\nxhr.setRequestHeader('Authorization', 'Bearer YOUR_TOKEN');\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5BF9\\u4E8E \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\"\\uFF0C\\u6807\\u5934\\u4F5C\\u4E3A\\u5BF9\\u8C61\\u4F20\\u9012\\u7ED9 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u7684\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1', {\n  method: 'POST',\n  headers: {\n    'Content-Type': 'application/json',\n    Authorization: 'Bearer YOUR_TOKEN',\n  },\n  body: JSON.stringify({\n    name: 'John Doe',\n    age: 30,\n  }),\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u8BF7\\u6C42\\u4F53\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u90FD\\u652F\\u6301\\u53D1\\u9001\\u8BF7\\u6C42\\u4F53\\u3002\\u4F46\\u662F\\uFF0C\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u5728\\u53D1\\u9001\\u8BF7\\u6C42\\u4F53\\u65B9\\u9762\\u63D0\\u4F9B\\u4E86\\u66F4\\u5927\\u7684\\u7075\\u6D3B\\u6027\\uFF0C\\u56E0\\u4E3A\\u5B83\\u652F\\u6301\\u53D1\\u9001 JSON \\u6570\\u636E\\u3001\\u8868\\u5355\\u6570\\u636E\\u7B49\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u652F\\u6301\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"send\"}),\" \\u65B9\\u6CD5\\u53D1\\u9001\\u8BF7\\u6C42\\u4F53\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('POST', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.send(\n  JSON.stringify({\n    name: 'John Doe',\n    age: 30,\n  }),\n);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u652F\\u6301\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u7684\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"body\"}),\" \\u5C5E\\u6027\\u53D1\\u9001\\u8BF7\\u6C42\\u4F53\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1', {\n  method: 'POST',\n  headers: {\n    'Content-Type': 'application/json',\n  },\n  body: JSON.stringify({\n    name: 'John Doe',\n    age: 30,\n  }),\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u54CD\\u5E94\\u5904\\u7406\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"responseType\"}),\" \\u5C5E\\u6027\\u6765\\u8BBE\\u7F6E\\u6211\\u4EEC\\u671F\\u671B\\u7684\\u54CD\\u5E94\\u683C\\u5F0F\\u3002\",(0,n.jsx)(e.code,{children:\"responseType\"}),\" \\u9ED8\\u8BA4\\u4E3A \",(0,n.jsx)(e.code,{children:\"'text'\"}),\"\\uFF0C\\u4F46\\u5B83\\u652F\\u6301 \",(0,n.jsx)(e.code,{children:\"'text'\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"'arraybuffer'\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"'blob'\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"'document'\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"'json'\"}),\" \\u7B49\\u7C7B\\u578B\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.responseType = 'json'; // or 'text', 'blob', 'arraybuffer'\nxhr.onload = function () {\n  if (xhr.status === 200) {\n    console.log(xhr.response);\n  }\n};\nxhr.send();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u7EDF\\u4E00\\u7684 \",(0,n.jsx)(e.code,{children:\"Response\"}),\" \\u5BF9\\u8C61\\uFF0C\\u5B83\\u5177\\u6709\\u7528\\u4E8E\\u8BBF\\u95EE\\u6570\\u636E\\u7684 \",(0,n.jsx)(e.code,{children:\"then\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// JSON data\nfetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.json())\n  .then((data) => console.log(data));\n\n// Text data\nfetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.text())\n  .then((data) => console.log(data));\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u9519\\u8BEF\\u5904\\u7406\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E24\\u8005\\u90FD\\u652F\\u6301\\u9519\\u8BEF\\u5904\\u7406\\uFF0C\\u4F46 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u5728\\u9519\\u8BEF\\u5904\\u7406\\u65B9\\u9762\\u63D0\\u4F9B\\u4E86\\u66F4\\u5927\\u7684\\u7075\\u6D3B\\u6027\\uFF0C\\u56E0\\u4E3A\\u5B83\\u652F\\u6301\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" \\u65B9\\u6CD5\\u5904\\u7406\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u652F\\u6301\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"onerror\"}),\" \\u4E8B\\u4EF6\\u8FDB\\u884C\\u9519\\u8BEF\\u5904\\u7406\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('GET', 'https://jsonplaceholder.typicod.com/todos/1', true); // Typo in URL\nxhr.responseType = 'json';\nxhr.onload = function () {\n  if (xhr.status === 200) {\n    console.log(xhr.response);\n  }\n};\nxhr.onerror = function () {\n  console.error('Error occurred');\n};\nxhr.send();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u652F\\u6301\\u4F7F\\u7528\\u8FD4\\u56DE\\u7684 \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" \\u4E0A\\u7684 \",(0,n.jsx)(e.code,{children:\"catch()\"}),\" \\u65B9\\u6CD5\\u8FDB\\u884C\\u9519\\u8BEF\\u5904\\u7406\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicod.com/todos/1') // Typo in URL\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error occurred: ' + error));\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7F13\\u5B58\\u63A7\\u5236\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u5904\\u7406\\u7F13\\u5B58\\u5F88\\u56F0\\u96BE\\uFF0C\\u60A8\\u53EF\\u80FD\\u9700\\u8981\\u5411\\u67E5\\u8BE2\\u5B57\\u7B26\\u4E32\\u6DFB\\u52A0\\u4E00\\u4E2A\\u968F\\u673A\\u503C\\u624D\\u80FD\\u7ED5\\u8FC7\\u6D4F\\u89C8\\u5668\\u7F13\\u5B58\\u3002 \\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\uFF0C\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u5728 \",(0,n.jsx)(e.code,{children:\"options\"}),\" \\u5BF9\\u8C61\\u7684\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u4E2D\\u652F\\u6301\\u7F13\\u5B58\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const res = await fetch('https://jsonplaceholder.typicode.com/todos/1', {\n  method: 'GET',\n  cache: 'default',\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Request/cache\",children:[(0,n.jsx)(e.code,{children:\"cache\"}),\" option\"]}),\" \\u7684\\u5176\\u4ED6\\u503C\\u5305\\u62EC \",(0,n.jsx)(e.code,{children:\"default\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"no-store\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"reload\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"no-cache\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"force-cache\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"only-if-cached\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u53D6\\u6D88\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6B63\\u5728\\u8FDB\\u884C\\u7684 \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u53EF\\u4EE5\\u901A\\u8FC7\\u8FD0\\u884C \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u7684 \",(0,n.jsx)(e.code,{children:\"abort()\"}),\" \\u65B9\\u6CD5\\u6765\\u53D6\\u6D88\\u3002\\u5982\\u679C\\u9700\\u8981\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7\\u5C06 \",(0,n.jsx)(e.code,{children:\".onabort\"}),\" \\u5C5E\\u6027\\u8D4B\\u503C\\u6765\\u9644\\u52A0\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"abort\"}),\" \\u5904\\u7406\\u7A0B\\u5E8F\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');\nxhr.send();\n// ...\nxhr.onabort = () => console.log('aborted');\nxhr.abort();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E2D\\u6B62 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u9700\\u8981\\u521B\\u5EFA\\u4E00\\u4E2A \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/AbortController\",children:(0,n.jsx)(e.code,{children:\"AbortController\"})}),\" \\u5BF9\\u8C61\\uFF0C\\u5E76\\u5728\\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u65F6\\u5C06\\u5176\\u4F5C\\u4E3A \",(0,n.jsx)(e.code,{children:\"options\"}),\" \\u5BF9\\u8C61\\u7684 \",(0,n.jsx)(e.code,{children:\"signal\"}),\" \\u5C5E\\u6027\\u4F20\\u9012\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const controller = new AbortController();\nconst signal = controller.signal;\n\nfetch('https://jsonplaceholder.typicode.com/todos/1', { signal })\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error occurred: ' + error));\n\n// Abort request.\ncontroller.abort();\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u8FDB\\u5EA6\\u652F\\u6301\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u901A\\u8FC7\\u5C06\\u5904\\u7406\\u7A0B\\u5E8F\\u9644\\u52A0\\u5230 \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u5BF9\\u8C61\\u7684\\u8FDB\\u5EA6\\u4E8B\\u4EF6\\u6765\\u652F\\u6301\\u8DDF\\u8E2A\\u8BF7\\u6C42\\u7684\\u8FDB\\u5EA6\\u3002 \\u8FD9\\u5728\\u4E0A\\u4F20\\u5927\\u6587\\u4EF6\\uFF08\\u4F8B\\u5982\\u89C6\\u9891\\uFF09\\u4EE5\\u8DDF\\u8E2A\\u4E0A\\u4F20\\u8FDB\\u5EA6\\u65F6\\u7279\\u522B\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\n\n// The callback is passed a \\`ProgressEvent\\`.\nxhr.upload.onprogress = (event) => {\n  console.log(Math.round((event.loaded / event.total) * 100) + '%');\n};\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5206\\u914D\\u7ED9 \",(0,n.jsx)(e.code,{children:\"onprogress\"}),\" \\u7684\\u56DE\\u8C03\\u51FD\\u6570\\u4F1A\\u4F20\\u9012\\u4E00\\u4E2A \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/progress_event\",children:(0,n.jsx)(e.code,{children:\"ProgressEvent\"})}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"ProgressEvent\"}),\"\\u4E0A\\u7684\",(0,n.jsx)(e.code,{children:\"loaded\"}),\"\\u5B57\\u6BB5\\u662F\\u4E00\\u4E2A64\\u4F4D\\u6574\\u6570\\uFF0C\\u8868\\u793A\\u5E95\\u5C42\\u8FDB\\u7A0B\\u5DF2\\u7ECF\\u5B8C\\u6210\\u7684\\u5DE5\\u4F5C\\u91CF\\uFF08\\u5DF2\\u4E0A\\u4F20/\\u4E0B\\u8F7D\\u7684\\u5B57\\u8282\\u6570\\uFF09\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"ProgressEvent\"}),\"\\u4E0A\\u7684\",(0,n.jsx)(e.code,{children:\"total\"}),\"\\u5B57\\u6BB5\\u662F\\u4E00\\u4E2A64\\u4F4D\\u6574\\u6570\\uFF0C\\u8868\\u793A\\u5E95\\u5C42\\u8FDB\\u7A0B\\u6B63\\u5728\\u6267\\u884C\\u7684\\u603B\\u5DE5\\u4F5C\\u91CF\\u3002\\u4E0B\\u8F7D\\u8D44\\u6E90\\u65F6\\uFF0C\\u8FD9\\u662FHTTP\\u54CD\\u5E94\\u7684\",(0,n.jsx)(e.code,{children:\"Content-Length\"}),\"\\u503C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API \\u5E76\\u6CA1\\u6709\\u63D0\\u4F9B\\u4EFB\\u4F55\\u65B9\\u4FBF\\u7684\\u65B9\\u6CD5\\u6765\\u8DDF\\u8E2A\\u4E0A\\u4F20\\u8FDB\\u5EA6\\u3002 \\u5B83\\u53EF\\u4EE5\\u5B9E\\u73B0\\u4E3A\\u76D1\\u89C6 \",(0,n.jsx)(e.code,{children:\"Response\"}),\" \\u5BF9\\u8C61\\u7684 \",(0,n.jsx)(e.code,{children:\"body\"}),\" \\u4F5C\\u4E3A \",(0,n.jsx)(e.code,{children:\"Content-Length\"}),\" \\u6807\\u5934\\u7684\\u5206\\u6570\\uFF0C\\u4F46\\u8FD9\\u975E\\u5E38\\u590D\\u6742\\u3002\"]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u5728 \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u4E4B\\u95F4\\u8FDB\\u884C\\u9009\\u62E9\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u73B0\\u4EE3\\u5F00\\u53D1\\u573A\\u666F\\u4E2D\\uFF0C\\u7531\\u4E8E\\u5176\\u66F4\\u7B80\\u6D01\\u7684\\u8BED\\u6CD5\\u3001\\u57FA\\u4E8E promise \\u7684\\u65B9\\u6CD5\\u4EE5\\u53CA\\u6539\\u8FDB\\u7684\\u9519\\u8BEF\\u5904\\u7406\\u3001\\u6807\\u5934\\u548C CORS \\u7B49\\u529F\\u80FD\\u5904\\u7406\\uFF0C\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u662F\\u9996\\u9009\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Fetch_API/Using_Fetch\",children:\"Fetch API | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest\",children:\"XMLHttpRequest | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Request/cache\",children:\"Request: cache property | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/xmlhttprequest\",children:\"XMLHttpRequest | Javascript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://hacks.mozilla.org/2015/03/this-api-is-so-fetching/\",children:\"This API is so Fetching! - Mozilla Hacks\"})}),`\n`]})]})}function q(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(s,c)})):s(c)}var M=q;return j(L);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var R=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),x=(c,e)=>{for(var r in e)d(c,r,{get:e[r],enumerable:!0})},h=(c,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of f(e))!m.call(c,o)&&o!==r&&d(c,o,{get:()=>e[o],enumerable:!(t=u(e,o))||t.enumerable});return c};var H=(c,e,r)=>(r=c!=null?p(g(c)):{},h(e||!c||!c.__esModule?d(r,\"default\",{value:c,enumerable:!0}):r,c)),j=c=>h(d({},\"__esModule\",{value:!0}),c);var i=R((X,l)=>{l.exports=_jsx_runtime});var M={};x(M,{default:()=>a,frontmatter:()=>q});var n=H(i()),q={title:\"JavaScript \\u548C\\u6D4F\\u89C8\\u5668\\u4E2D `XMLHttpRequest` \\u548C `fetch()` \\u4E4B\\u95F4\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function s(c){let e={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" (XHR) \\u548C \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API \\u90FD\\u7528\\u4E8E JavaScript (AJAX) \\u4E2D\\u7684\\u5F02\\u6B65 HTTP \\u8BF7\\u6C42\\u3002\\u4E0E XHR \\u76F8\\u6BD4\\uFF0C\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u63D0\\u4F9B\\u4E86\\u66F4\\u7B80\\u6D01\\u7684\\u8BED\\u6CD5\\u3001\\u57FA\\u4E8E Promise \\u7684\\u65B9\\u6CD5\\u548C\\u66F4\\u73B0\\u4EE3\\u7684\\u529F\\u80FD\\u96C6\\u3002\\u4F46\\u662F\\uFF0C\\u5B58\\u5728\\u4E00\\u4E9B\\u5DEE\\u5F02\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u4E8B\\u4EF6\\u56DE\\u8C03\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u4F7F\\u7528 promise \\u94FE\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u5728\\u6807\\u5934\\u548C\\u8BF7\\u6C42\\u4F53\\u65B9\\u9762\\u63D0\\u4F9B\\u4E86\\u66F4\\u5927\\u7684\\u7075\\u6D3B\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u901A\\u8FC7 \",(0,n.jsx)(e.code,{children:\"catch()\"}),\" \\u652F\\u6301\\u66F4\\u7B80\\u6D01\\u7684\\u9519\\u8BEF\\u5904\\u7406\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u5904\\u7406\\u7F13\\u5B58\\u5F88\\u56F0\\u96BE\\uFF0C\\u4F46 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u9ED8\\u8BA4\\u5728 \",(0,n.jsx)(e.code,{children:\"options.cache\"}),\" \\u5BF9\\u8C61\\uFF08\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u7684 \",(0,n.jsx)(e.code,{children:\"cache\"}),\" \\u503C\\uFF09\\u4E2D\\u652F\\u6301\\u7F13\\u5B58\\u5230 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"Request()\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u9700\\u8981 \",(0,n.jsx)(e.code,{children:\"AbortController\"}),\" \\u6765\\u53D6\\u6D88\\uFF0C\\u800C\\u5BF9\\u4E8E \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\"\\uFF0C\\u5B83\\u63D0\\u4F9B\\u4E86 \",(0,n.jsx)(e.code,{children:\"abort()\"}),\" \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u5BF9\\u8FDB\\u5EA6\\u8DDF\\u8E2A\\u6709\\u5F88\\u597D\\u7684\\u652F\\u6301\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u7F3A\\u4E4F\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u4EC5\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u53EF\\u7528\\uFF0C\\u5E76\\u4E14\\u5728 Node.js \\u73AF\\u5883\\u4E2D\\u4E0D\\u53D7\\u539F\\u751F\\u652F\\u6301\\u3002\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u662F JavaScript \\u8BED\\u8A00\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u5E76\\u4E14\\u5728\\u6240\\u6709\\u73B0\\u4EE3 JavaScript \\u8FD0\\u884C\\u65F6\\u4E2D\\u90FD\\u53D7\\u652F\\u6301\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u4ECA\\uFF0C\\u7531\\u4E8E\\u5176\\u66F4\\u7B80\\u6D01\\u7684\\u8BED\\u6CD5\\u548C\\u73B0\\u4EE3\\u529F\\u80FD\\uFF0C\\u66F4\\u503E\\u5411\\u4E8E\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" vs \",(0,n.jsx)(e.code,{children:\"fetch()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" (XHR) \\u548C \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u90FD\\u662F\\u5728 JavaScript \\u4E2D\\u8FDB\\u884C\\u5F02\\u6B65 HTTP \\u8BF7\\u6C42\\u7684\\u65B9\\u5F0F\\u3002\\u4F46\\u662F\\uFF0C\\u5B83\\u4EEC\\u5728\\u8BED\\u6CD5\\u3001promise \\u5904\\u7406\\u548C\\u529F\\u80FD\\u96C6\\u65B9\\u9762\\u5B58\\u5728\\u663E\\u7740\\u5DEE\\u5F02\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u8BED\\u6CD5\\u548C\\u7528\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u662F\\u4E8B\\u4EF6\\u9A71\\u52A8\\u7684\\uFF0C\\u9700\\u8981\\u9644\\u52A0\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u6765\\u5904\\u7406\\u54CD\\u5E94/\\u9519\\u8BEF\\u72B6\\u6001\\u3002\\u521B\\u5EFA \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u5BF9\\u8C61\\u548C\\u53D1\\u9001\\u8BF7\\u6C42\\u7684\\u57FA\\u672C\\u8BED\\u6CD5\\u5982\\u4E0B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.responseType = 'json';\nxhr.onload = function () {\n  if (xhr.status === 200) {\n    console.log(xhr.response);\n  }\n};\nxhr.send();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"xhr\"}),\" \\u662F \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u7C7B\\u7684\\u5B9E\\u4F8B\\u3002\",(0,n.jsx)(e.code,{children:\"open\"}),\" \\u65B9\\u6CD5\\u7528\\u4E8E\\u6307\\u5B9A\\u8BF7\\u6C42\\u65B9\\u6CD5\\u3001URL \\u4EE5\\u53CA\\u8BF7\\u6C42\\u662F\\u5426\\u5E94\\u4E3A\\u5F02\\u6B65\\u3002\",(0,n.jsx)(e.code,{children:\"onload\"}),\" \\u4E8B\\u4EF6\\u7528\\u4E8E\\u5904\\u7406\\u54CD\\u5E94\\uFF0C\",(0,n.jsx)(e.code,{children:\"send\"}),\" \\u65B9\\u6CD5\\u7528\\u4E8E\\u53D1\\u9001\\u8BF7\\u6C42\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u76F4\\u63A5\\u3001\\u66F4\\u76F4\\u89C2\\u7684\\u65B9\\u5F0F\\u6765\\u53D1\\u51FA HTTP \\u8BF7\\u6C42\\u3002\\u5B83\\u662F\\u57FA\\u4E8E \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" \\u7684\\uFF0C\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A promise\\uFF0C\\u8BE5 promise \\u4F7F\\u7528\\u54CD\\u5E94\\u8FDB\\u884C\\u89E3\\u6790\\u6216\\u4F7F\\u7528\\u9519\\u8BEF\\u8FDB\\u884C\\u62D2\\u7EDD\\u3002\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u53D1\\u51FA GET \\u8BF7\\u6C42\\u7684\\u57FA\\u672C\\u8BED\\u6CD5\\u5982\\u4E0B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.text())\n  .then((data) => console.log(data));\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u8BF7\\u6C42\\u6807\\u5934\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u90FD\\u652F\\u6301\\u8BBE\\u7F6E\\u8BF7\\u6C42\\u6807\\u5934\\u3002\\u4F46\\u662F\\uFF0C\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u5728\\u8BBE\\u7F6E\\u6807\\u5934\\u65B9\\u9762\\u63D0\\u4F9B\\u4E86\\u66F4\\u5927\\u7684\\u7075\\u6D3B\\u6027\\uFF0C\\u56E0\\u4E3A\\u5B83\\u652F\\u6301\\u81EA\\u5B9A\\u4E49\\u6807\\u5934\\u5E76\\u5141\\u8BB8\\u66F4\\u590D\\u6742\\u7684\\u6807\\u5934\\u914D\\u7F6E\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u652F\\u6301\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"setRequestHeader\"}),\" \\u65B9\\u6CD5\\u8BBE\\u7F6E\\u8BF7\\u6C42\\u6807\\u5934\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`xhr.setRequestHeader('Content-Type', 'application/json');\nxhr.setRequestHeader('Authorization', 'Bearer YOUR_TOKEN');\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5BF9\\u4E8E \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\"\\uFF0C\\u6807\\u5934\\u4F5C\\u4E3A\\u5BF9\\u8C61\\u4F20\\u9012\\u7ED9 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u7684\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1', {\n  method: 'POST',\n  headers: {\n    'Content-Type': 'application/json',\n    Authorization: 'Bearer YOUR_TOKEN',\n  },\n  body: JSON.stringify({\n    name: 'John Doe',\n    age: 30,\n  }),\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u8BF7\\u6C42\\u4F53\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u90FD\\u652F\\u6301\\u53D1\\u9001\\u8BF7\\u6C42\\u4F53\\u3002\\u4F46\\u662F\\uFF0C\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u5728\\u53D1\\u9001\\u8BF7\\u6C42\\u4F53\\u65B9\\u9762\\u63D0\\u4F9B\\u4E86\\u66F4\\u5927\\u7684\\u7075\\u6D3B\\u6027\\uFF0C\\u56E0\\u4E3A\\u5B83\\u652F\\u6301\\u53D1\\u9001 JSON \\u6570\\u636E\\u3001\\u8868\\u5355\\u6570\\u636E\\u7B49\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u652F\\u6301\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"send\"}),\" \\u65B9\\u6CD5\\u53D1\\u9001\\u8BF7\\u6C42\\u4F53\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('POST', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.send(\n  JSON.stringify({\n    name: 'John Doe',\n    age: 30,\n  }),\n);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u652F\\u6301\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u7684\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"body\"}),\" \\u5C5E\\u6027\\u53D1\\u9001\\u8BF7\\u6C42\\u4F53\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1', {\n  method: 'POST',\n  headers: {\n    'Content-Type': 'application/json',\n  },\n  body: JSON.stringify({\n    name: 'John Doe',\n    age: 30,\n  }),\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u54CD\\u5E94\\u5904\\u7406\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"responseType\"}),\" \\u5C5E\\u6027\\u6765\\u8BBE\\u7F6E\\u6211\\u4EEC\\u671F\\u671B\\u7684\\u54CD\\u5E94\\u683C\\u5F0F\\u3002\",(0,n.jsx)(e.code,{children:\"responseType\"}),\" \\u9ED8\\u8BA4\\u4E3A \",(0,n.jsx)(e.code,{children:\"'text'\"}),\"\\uFF0C\\u4F46\\u5B83\\u652F\\u6301 \",(0,n.jsx)(e.code,{children:\"'text'\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"'arraybuffer'\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"'blob'\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"'document'\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"'json'\"}),\" \\u7B49\\u7C7B\\u578B\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.responseType = 'json'; // or 'text', 'blob', 'arraybuffer'\nxhr.onload = function () {\n  if (xhr.status === 200) {\n    console.log(xhr.response);\n  }\n};\nxhr.send();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u7EDF\\u4E00\\u7684 \",(0,n.jsx)(e.code,{children:\"Response\"}),\" \\u5BF9\\u8C61\\uFF0C\\u5B83\\u5177\\u6709\\u7528\\u4E8E\\u8BBF\\u95EE\\u6570\\u636E\\u7684 \",(0,n.jsx)(e.code,{children:\"then\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// JSON data\nfetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.json())\n  .then((data) => console.log(data));\n\n// Text data\nfetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.text())\n  .then((data) => console.log(data));\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u9519\\u8BEF\\u5904\\u7406\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E24\\u8005\\u90FD\\u652F\\u6301\\u9519\\u8BEF\\u5904\\u7406\\uFF0C\\u4F46 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u5728\\u9519\\u8BEF\\u5904\\u7406\\u65B9\\u9762\\u63D0\\u4F9B\\u4E86\\u66F4\\u5927\\u7684\\u7075\\u6D3B\\u6027\\uFF0C\\u56E0\\u4E3A\\u5B83\\u652F\\u6301\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" \\u65B9\\u6CD5\\u5904\\u7406\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u652F\\u6301\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"onerror\"}),\" \\u4E8B\\u4EF6\\u8FDB\\u884C\\u9519\\u8BEF\\u5904\\u7406\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('GET', 'https://jsonplaceholder.typicod.com/todos/1', true); // Typo in URL\nxhr.responseType = 'json';\nxhr.onload = function () {\n  if (xhr.status === 200) {\n    console.log(xhr.response);\n  }\n};\nxhr.onerror = function () {\n  console.error('Error occurred');\n};\nxhr.send();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u652F\\u6301\\u4F7F\\u7528\\u8FD4\\u56DE\\u7684 \",(0,n.jsx)(e.code,{children:\"Promise\"}),\" \\u4E0A\\u7684 \",(0,n.jsx)(e.code,{children:\"catch()\"}),\" \\u65B9\\u6CD5\\u8FDB\\u884C\\u9519\\u8BEF\\u5904\\u7406\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicod.com/todos/1') // Typo in URL\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error occurred: ' + error));\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7F13\\u5B58\\u63A7\\u5236\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u5904\\u7406\\u7F13\\u5B58\\u5F88\\u56F0\\u96BE\\uFF0C\\u60A8\\u53EF\\u80FD\\u9700\\u8981\\u5411\\u67E5\\u8BE2\\u5B57\\u7B26\\u4E32\\u6DFB\\u52A0\\u4E00\\u4E2A\\u968F\\u673A\\u503C\\u624D\\u80FD\\u7ED5\\u8FC7\\u6D4F\\u89C8\\u5668\\u7F13\\u5B58\\u3002 \\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\uFF0C\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u5728 \",(0,n.jsx)(e.code,{children:\"options\"}),\" \\u5BF9\\u8C61\\u7684\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u4E2D\\u652F\\u6301\\u7F13\\u5B58\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const res = await fetch('https://jsonplaceholder.typicode.com/todos/1', {\n  method: 'GET',\n  cache: 'default',\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Request/cache\",children:[(0,n.jsx)(e.code,{children:\"cache\"}),\" option\"]}),\" \\u7684\\u5176\\u4ED6\\u503C\\u5305\\u62EC \",(0,n.jsx)(e.code,{children:\"default\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"no-store\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"reload\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"no-cache\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"force-cache\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"only-if-cached\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u53D6\\u6D88\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6B63\\u5728\\u8FDB\\u884C\\u7684 \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u53EF\\u4EE5\\u901A\\u8FC7\\u8FD0\\u884C \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u7684 \",(0,n.jsx)(e.code,{children:\"abort()\"}),\" \\u65B9\\u6CD5\\u6765\\u53D6\\u6D88\\u3002\\u5982\\u679C\\u9700\\u8981\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7\\u5C06 \",(0,n.jsx)(e.code,{children:\".onabort\"}),\" \\u5C5E\\u6027\\u8D4B\\u503C\\u6765\\u9644\\u52A0\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"abort\"}),\" \\u5904\\u7406\\u7A0B\\u5E8F\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');\nxhr.send();\n// ...\nxhr.onabort = () => console.log('aborted');\nxhr.abort();\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E2D\\u6B62 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u9700\\u8981\\u521B\\u5EFA\\u4E00\\u4E2A \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/AbortController\",children:(0,n.jsx)(e.code,{children:\"AbortController\"})}),\" \\u5BF9\\u8C61\\uFF0C\\u5E76\\u5728\\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u65F6\\u5C06\\u5176\\u4F5C\\u4E3A \",(0,n.jsx)(e.code,{children:\"options\"}),\" \\u5BF9\\u8C61\\u7684 \",(0,n.jsx)(e.code,{children:\"signal\"}),\" \\u5C5E\\u6027\\u4F20\\u9012\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const controller = new AbortController();\nconst signal = controller.signal;\n\nfetch('https://jsonplaceholder.typicode.com/todos/1', { signal })\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error('Error occurred: ' + error));\n\n// Abort request.\ncontroller.abort();\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u8FDB\\u5EA6\\u652F\\u6301\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u901A\\u8FC7\\u5C06\\u5904\\u7406\\u7A0B\\u5E8F\\u9644\\u52A0\\u5230 \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u5BF9\\u8C61\\u7684\\u8FDB\\u5EA6\\u4E8B\\u4EF6\\u6765\\u652F\\u6301\\u8DDF\\u8E2A\\u8BF7\\u6C42\\u7684\\u8FDB\\u5EA6\\u3002 \\u8FD9\\u5728\\u4E0A\\u4F20\\u5927\\u6587\\u4EF6\\uFF08\\u4F8B\\u5982\\u89C6\\u9891\\uFF09\\u4EE5\\u8DDF\\u8E2A\\u4E0A\\u4F20\\u8FDB\\u5EA6\\u65F6\\u7279\\u522B\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\n\n// The callback is passed a \\`ProgressEvent\\`.\nxhr.upload.onprogress = (event) => {\n  console.log(Math.round((event.loaded / event.total) * 100) + '%');\n};\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5206\\u914D\\u7ED9 \",(0,n.jsx)(e.code,{children:\"onprogress\"}),\" \\u7684\\u56DE\\u8C03\\u51FD\\u6570\\u4F1A\\u4F20\\u9012\\u4E00\\u4E2A \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/progress_event\",children:(0,n.jsx)(e.code,{children:\"ProgressEvent\"})}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"ProgressEvent\"}),\"\\u4E0A\\u7684\",(0,n.jsx)(e.code,{children:\"loaded\"}),\"\\u5B57\\u6BB5\\u662F\\u4E00\\u4E2A64\\u4F4D\\u6574\\u6570\\uFF0C\\u8868\\u793A\\u5E95\\u5C42\\u8FDB\\u7A0B\\u5DF2\\u7ECF\\u5B8C\\u6210\\u7684\\u5DE5\\u4F5C\\u91CF\\uFF08\\u5DF2\\u4E0A\\u4F20/\\u4E0B\\u8F7D\\u7684\\u5B57\\u8282\\u6570\\uFF09\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"ProgressEvent\"}),\"\\u4E0A\\u7684\",(0,n.jsx)(e.code,{children:\"total\"}),\"\\u5B57\\u6BB5\\u662F\\u4E00\\u4E2A64\\u4F4D\\u6574\\u6570\\uFF0C\\u8868\\u793A\\u5E95\\u5C42\\u8FDB\\u7A0B\\u6B63\\u5728\\u6267\\u884C\\u7684\\u603B\\u5DE5\\u4F5C\\u91CF\\u3002\\u4E0B\\u8F7D\\u8D44\\u6E90\\u65F6\\uFF0C\\u8FD9\\u662FHTTP\\u54CD\\u5E94\\u7684\",(0,n.jsx)(e.code,{children:\"Content-Length\"}),\"\\u503C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" API \\u5E76\\u6CA1\\u6709\\u63D0\\u4F9B\\u4EFB\\u4F55\\u65B9\\u4FBF\\u7684\\u65B9\\u6CD5\\u6765\\u8DDF\\u8E2A\\u4E0A\\u4F20\\u8FDB\\u5EA6\\u3002 \\u5B83\\u53EF\\u4EE5\\u5B9E\\u73B0\\u4E3A\\u76D1\\u89C6 \",(0,n.jsx)(e.code,{children:\"Response\"}),\" \\u5BF9\\u8C61\\u7684 \",(0,n.jsx)(e.code,{children:\"body\"}),\" \\u4F5C\\u4E3A \",(0,n.jsx)(e.code,{children:\"Content-Length\"}),\" \\u6807\\u5934\\u7684\\u5206\\u6570\\uFF0C\\u4F46\\u8FD9\\u975E\\u5E38\\u590D\\u6742\\u3002\"]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u5728 \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u4E4B\\u95F4\\u8FDB\\u884C\\u9009\\u62E9\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u73B0\\u4EE3\\u5F00\\u53D1\\u573A\\u666F\\u4E2D\\uFF0C\\u7531\\u4E8E\\u5176\\u66F4\\u7B80\\u6D01\\u7684\\u8BED\\u6CD5\\u3001\\u57FA\\u4E8E promise \\u7684\\u65B9\\u6CD5\\u4EE5\\u53CA\\u6539\\u8FDB\\u7684\\u9519\\u8BEF\\u5904\\u7406\\u3001\\u6807\\u5934\\u548C CORS \\u7B49\\u529F\\u80FD\\u5904\\u7406\\uFF0C\",(0,n.jsx)(e.code,{children:\"fetch()\"}),\" \\u662F\\u9996\\u9009\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Fetch_API/Using_Fetch\",children:\"Fetch API | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest\",children:\"XMLHttpRequest | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Request/cache\",children:\"Request: cache property | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/xmlhttprequest\",children:\"XMLHttpRequest | Javascript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://hacks.mozilla.org/2015/03/this-api-is-so-fetching/\",children:\"This API is so Fetching! - Mozilla Hacks\"})}),`\n`]})]})}function a(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(s,{...c})}):s(c)}return j(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-different-methods-for-iterating-over-an-array/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-different-methods-for-iterating-over-an-array/en-US.json
index 9ab2c7ddf..cc6b4f76b 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-different-methods-for-iterating-over-an-array/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-different-methods-for-iterating-over-an-array/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-different-methods-for-iterating-over-an-array/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var y=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var o in e)c(n,o,{get:e[o],enumerable:!0})},t=(n,e,o,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!u.call(n,a)&&a!==o&&c(n,a,{get:()=>e[a],enumerable:!(l=f(e,a))||l.enumerable});return n};var v=(n,e,o)=>(o=n!=null?s(p(n)):{},t(e||!n||!n.__esModule?c(o,\"default\",{value:n,enumerable:!0}):o,n)),b=n=>t(c({},\"__esModule\",{value:!0}),n);var d=y((w,i)=>{i.exports=_jsx_runtime});var x={};g(x,{default:()=>S,frontmatter:()=>j});var r=v(d()),j={title:\"What are the different methods for iterating over an array?\"};function h(n){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"There are several methods to iterate over an array in JavaScript. The most common ones include \",(0,r.jsx)(e.code,{children:\"for\"}),\" loops, \",(0,r.jsx)(e.code,{children:\"forEach\"}),\", \",(0,r.jsx)(e.code,{children:\"map\"}),\", \",(0,r.jsx)(e.code,{children:\"filter\"}),\", \",(0,r.jsx)(e.code,{children:\"reduce\"}),\", and \",(0,r.jsx)(e.code,{children:\"for...of\"}),\". Each method has its own use case. For example, \",(0,r.jsx)(e.code,{children:\"for\"}),\" loops are versatile and can be used for any kind of iteration, while \",(0,r.jsx)(e.code,{children:\"forEach\"}),\" is specifically for executing a function on each array element. \",(0,r.jsx)(e.code,{children:\"map\"}),\" is used for transforming arrays, \",(0,r.jsx)(e.code,{children:\"filter\"}),\" for filtering elements, \",(0,r.jsx)(e.code,{children:\"reduce\"}),\" for accumulating values, and \",(0,r.jsx)(e.code,{children:\"for...of\"}),\" for iterating over iterable objects.\"]}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsx)(e.h2,{children:\"Different methods for iterating over an array\"}),`\n`,(0,r.jsx)(e.h3,{children:\"For loop\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"for\"}),\" loop is one of the most basic and versatile ways to iterate over an array. It allows you to control the iteration process completely.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\nfor (let i = 0; i < array.length; i++) {\n  console.log(array[i]);\n}\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"For...of loop\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"for...of\"}),\" loop is a more modern and readable way to iterate over arrays and other iterable objects.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\nfor (const element of array) {\n  console.log(element);\n}\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"forEach method\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"forEach\"}),\" method executes a provided function once for each array element.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\narray.forEach((element) => {\n  console.log(element);\n});\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"Map method\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"map\"}),\" method creates a new array populated with the results of calling a provided function on every element in the calling array.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\nconst newArray = array.map((element) => element * 2);\nconsole.log(newArray); // [2, 4, 6, 8, 10]\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"Filter method\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"filter\"}),\" method creates a new array with all elements that pass the test implemented by the provided function.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\nconst filteredArray = array.filter((element) => element > 2);\nconsole.log(filteredArray); // [3, 4, 5]\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"Reduce method\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"reduce\"}),\" method executes a reducer function on each element of the array, resulting in a single output value.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\nconst sum = array.reduce(\n  (accumulator, currentValue) => accumulator + currentValue,\n  0,\n);\nconsole.log(sum); // 15\n`})}),`\n`,(0,r.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array\",children:\"MDN Web Docs: Array\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach\",children:\"MDN Web Docs: forEach\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map\",children:\"MDN Web Docs: map\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter\",children:\"MDN Web Docs: filter\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce\",children:\"MDN Web Docs: reduce\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of\",children:\"MDN Web Docs: for...of\"})}),`\n`]})]})}function D(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,Object.assign({},n,{children:(0,r.jsx)(h,n)})):h(n)}var S=D;return b(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var f=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var o in e)c(n,o,{get:e[o],enumerable:!0})},t=(n,e,o,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!y.call(n,a)&&a!==o&&c(n,a,{get:()=>e[a],enumerable:!(l=m(e,a))||l.enumerable});return n};var b=(n,e,o)=>(o=n!=null?f(u(n)):{},t(e||!n||!n.__esModule?c(o,\"default\",{value:n,enumerable:!0}):o,n)),j=n=>t(c({},\"__esModule\",{value:!0}),n);var d=g((W,i)=>{i.exports=_jsx_runtime});var S={};v(S,{default:()=>s,frontmatter:()=>D});var r=b(d()),D={title:\"What are the different methods for iterating over an array?\"};function h(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"There are several methods to iterate over an array in JavaScript. The most common ones include \",(0,r.jsx)(e.code,{children:\"for\"}),\" loops, \",(0,r.jsx)(e.code,{children:\"forEach\"}),\", \",(0,r.jsx)(e.code,{children:\"map\"}),\", \",(0,r.jsx)(e.code,{children:\"filter\"}),\", \",(0,r.jsx)(e.code,{children:\"reduce\"}),\", and \",(0,r.jsx)(e.code,{children:\"for...of\"}),\". Each method has its own use case. For example, \",(0,r.jsx)(e.code,{children:\"for\"}),\" loops are versatile and can be used for any kind of iteration, while \",(0,r.jsx)(e.code,{children:\"forEach\"}),\" is specifically for executing a function on each array element. \",(0,r.jsx)(e.code,{children:\"map\"}),\" is used for transforming arrays, \",(0,r.jsx)(e.code,{children:\"filter\"}),\" for filtering elements, \",(0,r.jsx)(e.code,{children:\"reduce\"}),\" for accumulating values, and \",(0,r.jsx)(e.code,{children:\"for...of\"}),\" for iterating over iterable objects.\"]}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsx)(e.h2,{children:\"Different methods for iterating over an array\"}),`\n`,(0,r.jsx)(e.h3,{children:\"For loop\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"for\"}),\" loop is one of the most basic and versatile ways to iterate over an array. It allows you to control the iteration process completely.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\nfor (let i = 0; i < array.length; i++) {\n  console.log(array[i]);\n}\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"For...of loop\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"for...of\"}),\" loop is a more modern and readable way to iterate over arrays and other iterable objects.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\nfor (const element of array) {\n  console.log(element);\n}\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"forEach method\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"forEach\"}),\" method executes a provided function once for each array element.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\narray.forEach((element) => {\n  console.log(element);\n});\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"Map method\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"map\"}),\" method creates a new array populated with the results of calling a provided function on every element in the calling array.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\nconst newArray = array.map((element) => element * 2);\nconsole.log(newArray); // [2, 4, 6, 8, 10]\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"Filter method\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"filter\"}),\" method creates a new array with all elements that pass the test implemented by the provided function.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\nconst filteredArray = array.filter((element) => element > 2);\nconsole.log(filteredArray); // [3, 4, 5]\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"Reduce method\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"reduce\"}),\" method executes a reducer function on each element of the array, resulting in a single output value.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\nconst sum = array.reduce(\n  (accumulator, currentValue) => accumulator + currentValue,\n  0,\n);\nconsole.log(sum); // 15\n`})}),`\n`,(0,r.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array\",children:\"MDN Web Docs: Array\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach\",children:\"MDN Web Docs: forEach\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map\",children:\"MDN Web Docs: map\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter\",children:\"MDN Web Docs: filter\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce\",children:\"MDN Web Docs: reduce\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of\",children:\"MDN Web Docs: for...of\"})}),`\n`]})]})}function s(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(h,{...n})}):h(n)}return j(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-different-methods-for-iterating-over-an-array/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-different-methods-for-iterating-over-an-array/zh-CN.json
index e47a7bffa..3853f9dc0 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-different-methods-for-iterating-over-an-array/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-different-methods-for-iterating-over-an-array/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-different-methods-for-iterating-over-an-array/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),y=(r,e)=>{for(var c in e)o(r,c,{get:e[c],enumerable:!0})},d=(r,e,c,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of f(e))!p.call(r,l)&&l!==c&&o(r,l,{get:()=>e[l],enumerable:!(a=u(e,l))||a.enumerable});return r};var j=(r,e,c)=>(c=r!=null?s(m(r)):{},d(e||!r||!r.__esModule?o(c,\"default\",{value:r,enumerable:!0}):c,r)),v=r=>d(o({},\"__esModule\",{value:!0}),r);var h=g((F,i)=>{i.exports=_jsx_runtime});var D={};y(D,{default:()=>_,frontmatter:()=>x});var n=j(h()),x={title:\"\\u6709\\u54EA\\u4E9B\\u4E0D\\u540C\\u7684\\u904D\\u5386\\u6570\\u7EC4\\u7684\\u65B9\\u6CD5\\uFF1F\"};function t(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u6709\\u51E0\\u79CD\\u904D\\u5386\\u6570\\u7EC4\\u7684\\u65B9\\u6CD5\\u3002\\u6700\\u5E38\\u89C1\\u7684\\u65B9\\u6CD5\\u5305\\u62EC \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u3001\",(0,n.jsx)(e.code,{children:\"forEach\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"map\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"filter\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"reduce\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"for...of\"}),\"\\u3002\\u6BCF\\u79CD\\u65B9\\u6CD5\\u90FD\\u6709\\u5176\\u81EA\\u8EAB\\u7684\\u7528\\u4F8B\\u3002\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u7528\\u9014\\u5E7F\\u6CDB\\uFF0C\\u53EF\\u7528\\u4E8E\\u4EFB\\u4F55\\u7C7B\\u578B\\u7684\\u8FED\\u4EE3\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"forEach\"}),\" \\u4E13\\u95E8\\u7528\\u4E8E\\u5BF9\\u6BCF\\u4E2A\\u6570\\u7EC4\\u5143\\u7D20\\u6267\\u884C\\u4E00\\u4E2A\\u51FD\\u6570\\u3002\",(0,n.jsx)(e.code,{children:\"map\"}),\" \\u7528\\u4E8E\\u8F6C\\u6362\\u6570\\u7EC4\\uFF0C\",(0,n.jsx)(e.code,{children:\"filter\"}),\" \\u7528\\u4E8E\\u8FC7\\u6EE4\\u5143\\u7D20\\uFF0C\",(0,n.jsx)(e.code,{children:\"reduce\"}),\" \\u7528\\u4E8E\\u7D2F\\u52A0\\u503C\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u7528\\u4E8E\\u904D\\u5386\\u53EF\\u8FED\\u4EE3\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u904D\\u5386\\u6570\\u7EC4\\u7684\\u4E0D\\u540C\\u65B9\\u6CD5\"}),`\n`,(0,n.jsx)(e.h3,{children:\"For \\u5FAA\\u73AF\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u662F\\u904D\\u5386\\u6570\\u7EC4\\u7684\\u6700\\u57FA\\u672C\\u548C\\u6700\\u901A\\u7528\\u7684\\u65B9\\u6CD5\\u4E4B\\u4E00\\u3002\\u5B83\\u5141\\u8BB8\\u4F60\\u5B8C\\u5168\\u63A7\\u5236\\u8FED\\u4EE3\\u8FC7\\u7A0B\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\nfor (let i = 0; i < array.length; i++) {\n  console.log(array[i]);\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"For...of \\u5FAA\\u73AF\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u5FAA\\u73AF\\u662F\\u4E00\\u79CD\\u66F4\\u73B0\\u4EE3\\u3001\\u66F4\\u6613\\u8BFB\\u7684\\u904D\\u5386\\u6570\\u7EC4\\u548C\\u5176\\u4ED6\\u53EF\\u8FED\\u4EE3\\u5BF9\\u8C61\\u7684\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\nfor (const element of array) {\n  console.log(element);\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"forEach \\u65B9\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"forEach\"}),\" \\u65B9\\u6CD5\\u4E3A\\u6BCF\\u4E2A\\u6570\\u7EC4\\u5143\\u7D20\\u6267\\u884C\\u63D0\\u4F9B\\u7684\\u51FD\\u6570\\u4E00\\u6B21\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\narray.forEach((element) => {\n  console.log(element);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Map \\u65B9\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"map\"}),\" \\u65B9\\u6CD5\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u6570\\u7EC4\\uFF0C\\u5176\\u4E2D\\u586B\\u5145\\u4E86\\u5728\\u8C03\\u7528\\u6570\\u7EC4\\u4E2D\\u7684\\u6BCF\\u4E2A\\u5143\\u7D20\\u4E0A\\u8C03\\u7528\\u63D0\\u4F9B\\u7684\\u51FD\\u6570\\u7684\\u7ED3\\u679C\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\nconst newArray = array.map((element) => element * 2);\nconsole.log(newArray); // [2, 4, 6, 8, 10]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Filter \\u65B9\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"filter\"}),\" \\u65B9\\u6CD5\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u6570\\u7EC4\\uFF0C\\u5176\\u4E2D\\u5305\\u542B\\u901A\\u8FC7\\u63D0\\u4F9B\\u7684\\u51FD\\u6570\\u5B9E\\u73B0\\u7684\\u6D4B\\u8BD5\\u7684\\u6240\\u6709\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\nconst filteredArray = array.filter((element) => element > 2);\nconsole.log(filteredArray); // [3, 4, 5]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Reduce \\u65B9\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"reduce\"}),\" \\u65B9\\u6CD5\\u5BF9\\u6570\\u7EC4\\u7684\\u6BCF\\u4E2A\\u5143\\u7D20\\u6267\\u884C\\u4E00\\u4E2A reducer \\u51FD\\u6570\\uFF0C\\u6700\\u7EC8\\u5F97\\u5230\\u4E00\\u4E2A\\u5355\\u4E00\\u7684\\u8F93\\u51FA\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\nconst sum = array.reduce(\n  (accumulator, currentValue) => accumulator + currentValue,\n  0,\n);\nconsole.log(sum); // 15\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Statements/for...of\",children:\"MDN Web Docs: for...of\"})}),`\n`]})]})}function N(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(t,r)})):t(r)}var _=N;return v(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),j=(r,e)=>{for(var c in e)o(r,c,{get:e[c],enumerable:!0})},d=(r,e,c,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of m(e))!g.call(r,l)&&l!==c&&o(r,l,{get:()=>e[l],enumerable:!(a=f(e,l))||a.enumerable});return r};var v=(r,e,c)=>(c=r!=null?u(p(r)):{},d(e||!r||!r.__esModule?o(c,\"default\",{value:r,enumerable:!0}):c,r)),x=r=>d(o({},\"__esModule\",{value:!0}),r);var h=y((E,i)=>{i.exports=_jsx_runtime});var _={};j(_,{default:()=>s,frontmatter:()=>N});var n=v(h()),N={title:\"\\u6709\\u54EA\\u4E9B\\u4E0D\\u540C\\u7684\\u904D\\u5386\\u6570\\u7EC4\\u7684\\u65B9\\u6CD5\\uFF1F\"};function t(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u6709\\u51E0\\u79CD\\u904D\\u5386\\u6570\\u7EC4\\u7684\\u65B9\\u6CD5\\u3002\\u6700\\u5E38\\u89C1\\u7684\\u65B9\\u6CD5\\u5305\\u62EC \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u3001\",(0,n.jsx)(e.code,{children:\"forEach\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"map\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"filter\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"reduce\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"for...of\"}),\"\\u3002\\u6BCF\\u79CD\\u65B9\\u6CD5\\u90FD\\u6709\\u5176\\u81EA\\u8EAB\\u7684\\u7528\\u4F8B\\u3002\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u7528\\u9014\\u5E7F\\u6CDB\\uFF0C\\u53EF\\u7528\\u4E8E\\u4EFB\\u4F55\\u7C7B\\u578B\\u7684\\u8FED\\u4EE3\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"forEach\"}),\" \\u4E13\\u95E8\\u7528\\u4E8E\\u5BF9\\u6BCF\\u4E2A\\u6570\\u7EC4\\u5143\\u7D20\\u6267\\u884C\\u4E00\\u4E2A\\u51FD\\u6570\\u3002\",(0,n.jsx)(e.code,{children:\"map\"}),\" \\u7528\\u4E8E\\u8F6C\\u6362\\u6570\\u7EC4\\uFF0C\",(0,n.jsx)(e.code,{children:\"filter\"}),\" \\u7528\\u4E8E\\u8FC7\\u6EE4\\u5143\\u7D20\\uFF0C\",(0,n.jsx)(e.code,{children:\"reduce\"}),\" \\u7528\\u4E8E\\u7D2F\\u52A0\\u503C\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u7528\\u4E8E\\u904D\\u5386\\u53EF\\u8FED\\u4EE3\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u904D\\u5386\\u6570\\u7EC4\\u7684\\u4E0D\\u540C\\u65B9\\u6CD5\"}),`\n`,(0,n.jsx)(e.h3,{children:\"For \\u5FAA\\u73AF\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u662F\\u904D\\u5386\\u6570\\u7EC4\\u7684\\u6700\\u57FA\\u672C\\u548C\\u6700\\u901A\\u7528\\u7684\\u65B9\\u6CD5\\u4E4B\\u4E00\\u3002\\u5B83\\u5141\\u8BB8\\u4F60\\u5B8C\\u5168\\u63A7\\u5236\\u8FED\\u4EE3\\u8FC7\\u7A0B\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\nfor (let i = 0; i < array.length; i++) {\n  console.log(array[i]);\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"For...of \\u5FAA\\u73AF\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u5FAA\\u73AF\\u662F\\u4E00\\u79CD\\u66F4\\u73B0\\u4EE3\\u3001\\u66F4\\u6613\\u8BFB\\u7684\\u904D\\u5386\\u6570\\u7EC4\\u548C\\u5176\\u4ED6\\u53EF\\u8FED\\u4EE3\\u5BF9\\u8C61\\u7684\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\nfor (const element of array) {\n  console.log(element);\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"forEach \\u65B9\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"forEach\"}),\" \\u65B9\\u6CD5\\u4E3A\\u6BCF\\u4E2A\\u6570\\u7EC4\\u5143\\u7D20\\u6267\\u884C\\u63D0\\u4F9B\\u7684\\u51FD\\u6570\\u4E00\\u6B21\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\narray.forEach((element) => {\n  console.log(element);\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Map \\u65B9\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"map\"}),\" \\u65B9\\u6CD5\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u6570\\u7EC4\\uFF0C\\u5176\\u4E2D\\u586B\\u5145\\u4E86\\u5728\\u8C03\\u7528\\u6570\\u7EC4\\u4E2D\\u7684\\u6BCF\\u4E2A\\u5143\\u7D20\\u4E0A\\u8C03\\u7528\\u63D0\\u4F9B\\u7684\\u51FD\\u6570\\u7684\\u7ED3\\u679C\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\nconst newArray = array.map((element) => element * 2);\nconsole.log(newArray); // [2, 4, 6, 8, 10]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Filter \\u65B9\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"filter\"}),\" \\u65B9\\u6CD5\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u6570\\u7EC4\\uFF0C\\u5176\\u4E2D\\u5305\\u542B\\u901A\\u8FC7\\u63D0\\u4F9B\\u7684\\u51FD\\u6570\\u5B9E\\u73B0\\u7684\\u6D4B\\u8BD5\\u7684\\u6240\\u6709\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\nconst filteredArray = array.filter((element) => element > 2);\nconsole.log(filteredArray); // [3, 4, 5]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Reduce \\u65B9\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"reduce\"}),\" \\u65B9\\u6CD5\\u5BF9\\u6570\\u7EC4\\u7684\\u6BCF\\u4E2A\\u5143\\u7D20\\u6267\\u884C\\u4E00\\u4E2A reducer \\u51FD\\u6570\\uFF0C\\u6700\\u7EC8\\u5F97\\u5230\\u4E00\\u4E2A\\u5355\\u4E00\\u7684\\u8F93\\u51FA\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const array = [1, 2, 3, 4, 5];\nconst sum = array.reduce(\n  (accumulator, currentValue) => accumulator + currentValue,\n  0,\n);\nconsole.log(sum); // 15\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Statements/for...of\",children:\"MDN Web Docs: for...of\"})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(t,{...r})}):t(r)}return x(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-different-types-of-errors-in-javascript/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-different-types-of-errors-in-javascript/en-US.json
index 55375e930..4d15368f0 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-different-types-of-errors-in-javascript/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-different-types-of-errors-in-javascript/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-different-types-of-errors-in-javascript/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var t in e)s(n,t,{get:e[t],enumerable:!0})},a=(n,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!m.call(n,o)&&o!==t&&s(n,o,{get:()=>e[o],enumerable:!(i=p(e,o))||i.enumerable});return n};var y=(n,e,t)=>(t=n!=null?d(g(n)):{},a(e||!n||!n.__esModule?s(t,\"default\",{value:n,enumerable:!0}):t,n)),j=n=>a(s({},\"__esModule\",{value:!0}),n);var l=f((E,c)=>{c.exports=_jsx_runtime});var S={};x(S,{default:()=>b,frontmatter:()=>v});var r=y(l()),v={title:\"What are the different types of errors in JavaScript?\"};function h(n){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"In JavaScript, there are three main types of errors: syntax errors, runtime errors, and logical errors. Syntax errors occur when the code violates the language's grammar rules, such as missing a parenthesis. Runtime errors happen during code execution, like trying to access a property of \",(0,r.jsx)(e.code,{children:\"undefined\"}),\". Logical errors are mistakes in the code's logic that lead to incorrect results but don't throw an error.\"]}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsx)(e.h2,{children:\"Different types of errors in JavaScript\"}),`\n`,(0,r.jsx)(e.h3,{children:\"Syntax errors\"}),`\n`,(0,r.jsx)(e.p,{children:\"Syntax errors occur when the code does not follow the rules of the JavaScript language. These errors are detected by the JavaScript engine during the parsing stage before the code is executed.\"}),`\n`,(0,r.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`console.log(\"Hello, world!; // Missing closing quote and parenthesis\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"Runtime errors\"}),`\n`,(0,r.jsx)(e.p,{children:\"Runtime errors, also known as exceptions, occur during the execution of the code. These errors happen when the code is syntactically correct but encounters an issue that prevents it from completing its task.\"}),`\n`,(0,r.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let obj = null;\nconsole.log(obj.property); // TypeError: Cannot read properties of null (reading 'property')\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"Logical errors\"}),`\n`,(0,r.jsx)(e.p,{children:\"Logical errors are mistakes in the code's logic that lead to incorrect results. These errors do not throw exceptions and are often the hardest to debug because the code runs without any issues but produces the wrong output.\"}),`\n`,(0,r.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let isAdmin = false;\n\nif ((isAdmin = true)) {\n  // Wrong: Assignment instead of comparison\n  console.log('Access granted'); // Access granted even though isAdmin was falsy\n} else {\n  console.log('Access denied');\n}\n`})}),`\n`,(0,r.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error\",children:\"MDN Web Docs: Errors\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://javascript.info/error-handling\",children:\"JavaScript.info: Error handling\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://www.w3schools.com/js/js_errors.asp\",children:\"W3Schools: JavaScript Errors\"})}),`\n`]})]})}function w(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,Object.assign({},n,{children:(0,r.jsx)(h,n)})):h(n)}var b=w;return j(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),y=(n,e)=>{for(var o in e)s(n,o,{get:e[o],enumerable:!0})},a=(n,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of g(e))!f.call(n,t)&&t!==o&&s(n,t,{get:()=>e[t],enumerable:!(i=u(e,t))||i.enumerable});return n};var v=(n,e,o)=>(o=n!=null?p(m(n)):{},a(e||!n||!n.__esModule?s(o,\"default\",{value:n,enumerable:!0}):o,n)),w=n=>a(s({},\"__esModule\",{value:!0}),n);var l=x((_,c)=>{c.exports=_jsx_runtime});var b={};y(b,{default:()=>d,frontmatter:()=>j});var r=v(l()),j={title:\"What are the different types of errors in JavaScript?\"};function h(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"In JavaScript, there are three main types of errors: syntax errors, runtime errors, and logical errors. Syntax errors occur when the code violates the language's grammar rules, such as missing a parenthesis. Runtime errors happen during code execution, like trying to access a property of \",(0,r.jsx)(e.code,{children:\"undefined\"}),\". Logical errors are mistakes in the code's logic that lead to incorrect results but don't throw an error.\"]}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsx)(e.h2,{children:\"Different types of errors in JavaScript\"}),`\n`,(0,r.jsx)(e.h3,{children:\"Syntax errors\"}),`\n`,(0,r.jsx)(e.p,{children:\"Syntax errors occur when the code does not follow the rules of the JavaScript language. These errors are detected by the JavaScript engine during the parsing stage before the code is executed.\"}),`\n`,(0,r.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`console.log(\"Hello, world!; // Missing closing quote and parenthesis\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"Runtime errors\"}),`\n`,(0,r.jsx)(e.p,{children:\"Runtime errors, also known as exceptions, occur during the execution of the code. These errors happen when the code is syntactically correct but encounters an issue that prevents it from completing its task.\"}),`\n`,(0,r.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let obj = null;\nconsole.log(obj.property); // TypeError: Cannot read properties of null (reading 'property')\n`})}),`\n`,(0,r.jsx)(e.h3,{children:\"Logical errors\"}),`\n`,(0,r.jsx)(e.p,{children:\"Logical errors are mistakes in the code's logic that lead to incorrect results. These errors do not throw exceptions and are often the hardest to debug because the code runs without any issues but produces the wrong output.\"}),`\n`,(0,r.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`let isAdmin = false;\n\nif ((isAdmin = true)) {\n  // Wrong: Assignment instead of comparison\n  console.log('Access granted'); // Access granted even though isAdmin was falsy\n} else {\n  console.log('Access denied');\n}\n`})}),`\n`,(0,r.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error\",children:\"MDN Web Docs: Errors\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://javascript.info/error-handling\",children:\"JavaScript.info: Error handling\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://www.w3schools.com/js/js_errors.asp\",children:\"W3Schools: JavaScript Errors\"})}),`\n`]})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(h,{...n})}):h(n)}return w(b);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-different-types-of-errors-in-javascript/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-different-types-of-errors-in-javascript/zh-CN.json
index 1004a3101..a7d77df22 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-different-types-of-errors-in-javascript/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-different-types-of-errors-in-javascript/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-different-types-of-errors-in-javascript/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),j=(r,n)=>{for(var l in n)i(r,l,{get:n[l],enumerable:!0})},s=(r,n,l,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of g(n))!m.call(r,c)&&c!==l&&i(r,c,{get:()=>n[c],enumerable:!(o=p(n,c))||o.enumerable});return r};var v=(r,n,l)=>(l=r!=null?d(u(r)):{},s(n||!r||!r.__esModule?i(l,\"default\",{value:r,enumerable:!0}):l,r)),S=r=>s(i({},\"__esModule\",{value:!0}),r);var t=f((A,a)=>{a.exports=_jsx_runtime});var J={};j(J,{default:()=>b,frontmatter:()=>x});var e=v(t()),x={title:\"JavaScript \\u4E2D\\u6709\\u54EA\\u4E9B\\u4E0D\\u540C\\u7C7B\\u578B\\u7684\\u9519\\u8BEF\\uFF1F\"};function h(r){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u4E3B\\u8981\\u6709\\u4E09\\u79CD\\u7C7B\\u578B\\u7684\\u9519\\u8BEF\\uFF1A\\u8BED\\u6CD5\\u9519\\u8BEF\\u3001\\u8FD0\\u884C\\u65F6\\u9519\\u8BEF\\u548C\\u903B\\u8F91\\u9519\\u8BEF\\u3002\\u5F53\\u4EE3\\u7801\\u8FDD\\u53CD\\u8BED\\u8A00\\u7684\\u8BED\\u6CD5\\u89C4\\u5219\\u65F6\\uFF0C\\u4F8B\\u5982\\u7F3A\\u5C11\\u62EC\\u53F7\\uFF0C\\u5C31\\u4F1A\\u53D1\\u751F\\u8BED\\u6CD5\\u9519\\u8BEF\\u3002\\u8FD0\\u884C\\u65F6\\u9519\\u8BEF\\u53D1\\u751F\\u5728\\u4EE3\\u7801\\u6267\\u884C\\u671F\\u95F4\\uFF0C\\u4F8B\\u5982\\u5C1D\\u8BD5\\u8BBF\\u95EE \",(0,e.jsx)(n.code,{children:\"undefined\"}),\" \\u7684\\u5C5E\\u6027\\u3002\\u903B\\u8F91\\u9519\\u8BEF\\u662F\\u4EE3\\u7801\\u903B\\u8F91\\u4E2D\\u7684\\u9519\\u8BEF\\uFF0C\\u5BFC\\u81F4\\u7ED3\\u679C\\u4E0D\\u6B63\\u786E\\uFF0C\\u4F46\\u4E0D\\u4F1A\\u629B\\u51FA\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"JavaScript \\u4E2D\\u4E0D\\u540C\\u7C7B\\u578B\\u7684\\u9519\\u8BEF\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BED\\u6CD5\\u9519\\u8BEF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F53\\u4EE3\\u7801\\u4E0D\\u9075\\u5FAA JavaScript \\u8BED\\u8A00\\u7684\\u89C4\\u5219\\u65F6\\uFF0C\\u5C31\\u4F1A\\u53D1\\u751F\\u8BED\\u6CD5\\u9519\\u8BEF\\u3002\\u8FD9\\u4E9B\\u9519\\u8BEF\\u7531 JavaScript \\u5F15\\u64CE\\u5728\\u4EE3\\u7801\\u6267\\u884C\\u4E4B\\u524D\\u7684\\u89E3\\u6790\\u9636\\u6BB5\\u68C0\\u6D4B\\u5230\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`console.log(\"Hello, world!; // Missing closing quote and parenthesis\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8FD0\\u884C\\u65F6\\u9519\\u8BEF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD0\\u884C\\u65F6\\u9519\\u8BEF\\uFF0C\\u4E5F\\u79F0\\u4E3A\\u5F02\\u5E38\\uFF0C\\u53D1\\u751F\\u5728\\u4EE3\\u7801\\u6267\\u884C\\u671F\\u95F4\\u3002\\u5F53\\u4EE3\\u7801\\u5728\\u8BED\\u6CD5\\u4E0A\\u6B63\\u786E\\u4F46\\u9047\\u5230\\u963B\\u6B62\\u5176\\u5B8C\\u6210\\u4EFB\\u52A1\\u7684\\u95EE\\u9898\\u65F6\\uFF0C\\u5C31\\u4F1A\\u53D1\\u751F\\u8FD9\\u4E9B\\u9519\\u8BEF\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`let obj = null;\nconsole.log(obj.property); // TypeError: Cannot read properties of null (reading 'property')\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u903B\\u8F91\\u9519\\u8BEF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u903B\\u8F91\\u9519\\u8BEF\\u662F\\u4EE3\\u7801\\u903B\\u8F91\\u4E2D\\u7684\\u9519\\u8BEF\\uFF0C\\u5BFC\\u81F4\\u7ED3\\u679C\\u4E0D\\u6B63\\u786E\\u3002\\u8FD9\\u4E9B\\u9519\\u8BEF\\u4E0D\\u4F1A\\u629B\\u51FA\\u5F02\\u5E38\\uFF0C\\u800C\\u4E14\\u901A\\u5E38\\u662F\\u6700\\u96BE\\u8C03\\u8BD5\\u7684\\uFF0C\\u56E0\\u4E3A\\u4EE3\\u7801\\u5728\\u6CA1\\u6709\\u4EFB\\u4F55\\u95EE\\u9898\\u7684\\u60C5\\u51B5\\u4E0B\\u8FD0\\u884C\\uFF0C\\u4F46\\u4F1A\\u4EA7\\u751F\\u9519\\u8BEF\\u7684\\u8F93\\u51FA\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`let isAdmin = false;\n\nif ((isAdmin = true)) {\n  // Wrong: Assignment instead of comparison\n  console.log('Access granted'); // Access granted even though isAdmin was falsy\n} else {\n  console.log('Access denied');\n}\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error\",children:\"MDN Web Docs: Errors\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/error-handling\",children:\"JavaScript.info: Error handling\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.w3schools.com/js/js_errors.asp\",children:\"W3Schools: JavaScript Errors\"})}),`\n`]})]})}function _(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(h,r)})):h(r)}var b=_;return S(J);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var j=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),v=(r,n)=>{for(var l in n)i(r,l,{get:n[l],enumerable:!0})},s=(r,n,l,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of u(n))!f.call(r,c)&&c!==l&&i(r,c,{get:()=>n[c],enumerable:!(o=g(n,c))||o.enumerable});return r};var S=(r,n,l)=>(l=r!=null?p(m(r)):{},s(n||!r||!r.__esModule?i(l,\"default\",{value:r,enumerable:!0}):l,r)),x=r=>s(i({},\"__esModule\",{value:!0}),r);var t=j((A,a)=>{a.exports=_jsx_runtime});var J={};v(J,{default:()=>d,frontmatter:()=>_});var e=S(t()),_={title:\"JavaScript \\u4E2D\\u6709\\u54EA\\u4E9B\\u4E0D\\u540C\\u7C7B\\u578B\\u7684\\u9519\\u8BEF\\uFF1F\"};function h(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u4E3B\\u8981\\u6709\\u4E09\\u79CD\\u7C7B\\u578B\\u7684\\u9519\\u8BEF\\uFF1A\\u8BED\\u6CD5\\u9519\\u8BEF\\u3001\\u8FD0\\u884C\\u65F6\\u9519\\u8BEF\\u548C\\u903B\\u8F91\\u9519\\u8BEF\\u3002\\u5F53\\u4EE3\\u7801\\u8FDD\\u53CD\\u8BED\\u8A00\\u7684\\u8BED\\u6CD5\\u89C4\\u5219\\u65F6\\uFF0C\\u4F8B\\u5982\\u7F3A\\u5C11\\u62EC\\u53F7\\uFF0C\\u5C31\\u4F1A\\u53D1\\u751F\\u8BED\\u6CD5\\u9519\\u8BEF\\u3002\\u8FD0\\u884C\\u65F6\\u9519\\u8BEF\\u53D1\\u751F\\u5728\\u4EE3\\u7801\\u6267\\u884C\\u671F\\u95F4\\uFF0C\\u4F8B\\u5982\\u5C1D\\u8BD5\\u8BBF\\u95EE \",(0,e.jsx)(n.code,{children:\"undefined\"}),\" \\u7684\\u5C5E\\u6027\\u3002\\u903B\\u8F91\\u9519\\u8BEF\\u662F\\u4EE3\\u7801\\u903B\\u8F91\\u4E2D\\u7684\\u9519\\u8BEF\\uFF0C\\u5BFC\\u81F4\\u7ED3\\u679C\\u4E0D\\u6B63\\u786E\\uFF0C\\u4F46\\u4E0D\\u4F1A\\u629B\\u51FA\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"JavaScript \\u4E2D\\u4E0D\\u540C\\u7C7B\\u578B\\u7684\\u9519\\u8BEF\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BED\\u6CD5\\u9519\\u8BEF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F53\\u4EE3\\u7801\\u4E0D\\u9075\\u5FAA JavaScript \\u8BED\\u8A00\\u7684\\u89C4\\u5219\\u65F6\\uFF0C\\u5C31\\u4F1A\\u53D1\\u751F\\u8BED\\u6CD5\\u9519\\u8BEF\\u3002\\u8FD9\\u4E9B\\u9519\\u8BEF\\u7531 JavaScript \\u5F15\\u64CE\\u5728\\u4EE3\\u7801\\u6267\\u884C\\u4E4B\\u524D\\u7684\\u89E3\\u6790\\u9636\\u6BB5\\u68C0\\u6D4B\\u5230\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`console.log(\"Hello, world!; // Missing closing quote and parenthesis\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8FD0\\u884C\\u65F6\\u9519\\u8BEF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD0\\u884C\\u65F6\\u9519\\u8BEF\\uFF0C\\u4E5F\\u79F0\\u4E3A\\u5F02\\u5E38\\uFF0C\\u53D1\\u751F\\u5728\\u4EE3\\u7801\\u6267\\u884C\\u671F\\u95F4\\u3002\\u5F53\\u4EE3\\u7801\\u5728\\u8BED\\u6CD5\\u4E0A\\u6B63\\u786E\\u4F46\\u9047\\u5230\\u963B\\u6B62\\u5176\\u5B8C\\u6210\\u4EFB\\u52A1\\u7684\\u95EE\\u9898\\u65F6\\uFF0C\\u5C31\\u4F1A\\u53D1\\u751F\\u8FD9\\u4E9B\\u9519\\u8BEF\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`let obj = null;\nconsole.log(obj.property); // TypeError: Cannot read properties of null (reading 'property')\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u903B\\u8F91\\u9519\\u8BEF\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u903B\\u8F91\\u9519\\u8BEF\\u662F\\u4EE3\\u7801\\u903B\\u8F91\\u4E2D\\u7684\\u9519\\u8BEF\\uFF0C\\u5BFC\\u81F4\\u7ED3\\u679C\\u4E0D\\u6B63\\u786E\\u3002\\u8FD9\\u4E9B\\u9519\\u8BEF\\u4E0D\\u4F1A\\u629B\\u51FA\\u5F02\\u5E38\\uFF0C\\u800C\\u4E14\\u901A\\u5E38\\u662F\\u6700\\u96BE\\u8C03\\u8BD5\\u7684\\uFF0C\\u56E0\\u4E3A\\u4EE3\\u7801\\u5728\\u6CA1\\u6709\\u4EFB\\u4F55\\u95EE\\u9898\\u7684\\u60C5\\u51B5\\u4E0B\\u8FD0\\u884C\\uFF0C\\u4F46\\u4F1A\\u4EA7\\u751F\\u9519\\u8BEF\\u7684\\u8F93\\u51FA\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`let isAdmin = false;\n\nif ((isAdmin = true)) {\n  // Wrong: Assignment instead of comparison\n  console.log('Access granted'); // Access granted even though isAdmin was falsy\n} else {\n  console.log('Access denied');\n}\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error\",children:\"MDN Web Docs: Errors\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/error-handling\",children:\"JavaScript.info: Error handling\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.w3schools.com/js/js_errors.asp\",children:\"W3Schools: JavaScript Errors\"})}),`\n`]})]})}function d(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(h,{...r})}):h(r)}return x(J);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-different-types-of-testing-in-software-development/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-different-types-of-testing-in-software-development/en-US.json
index 86c46a2fe..1fd18990e 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-different-types-of-testing-in-software-development/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-different-types-of-testing-in-software-development/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-different-types-of-testing-in-software-development/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),y=(n,e)=>{for(var i in e)r(n,i,{get:e[i],enumerable:!0})},o=(n,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of u(e))!f.call(n,s)&&s!==i&&r(n,s,{get:()=>e[s],enumerable:!(a=l(e,s))||a.enumerable});return n};var w=(n,e,i)=>(i=n!=null?p(g(n)):{},o(e||!n||!n.__esModule?r(i,\"default\",{value:n,enumerable:!0}):i,n)),x=n=>o(r({},\"__esModule\",{value:!0}),n);var d=m((q,c)=>{c.exports=_jsx_runtime});var _={};y(_,{default:()=>v,frontmatter:()=>k});var t=w(d()),k={title:\"What are the different types of testing in software development?\"};function h(n){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:\"In software development, there are several types of testing to ensure the quality and functionality of the application. These include unit testing, integration testing, system testing, and acceptance testing. Unit testing focuses on individual components, integration testing checks the interaction between components, system testing evaluates the entire system, and acceptance testing ensures the software meets user requirements.\"}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"Different types of testing in software development\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Unit testing\"}),`\n`,(0,t.jsx)(e.p,{children:\"Unit testing involves testing individual components or functions of the software to ensure they work as expected. This type of testing is usually automated and written by developers.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`// Example of a unit test using Jest\nfunction add(a, b) {\n  return a + b;\n}\n\ntest('adds 1 + 2 to equal 3', () => {\n  expect(add(1, 2)).toBe(3);\n});\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Integration testing\"}),`\n`,(0,t.jsx)(e.p,{children:\"Integration testing focuses on the interaction between different components or modules of the software. It ensures that combined parts of the application work together as intended.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`// Example of an integration test using Jest and Supertest\nconst request = require('supertest');\nconst app = require('./app'); // Your Express app\n\ntest('GET /users returns a list of users', async () => {\n  const response = await request(app).get('/users');\n  expect(response.status).toBe(200);\n  expect(response.body).toEqual(\n    expect.arrayContaining([\n      expect.objectContaining({ id: expect.any(Number) }),\n    ]),\n  );\n});\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"System testing\"}),`\n`,(0,t.jsx)(e.p,{children:\"System testing evaluates the complete and integrated software system to verify that it meets the specified requirements. This type of testing is usually performed by QA teams.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Acceptance testing\"}),`\n`,(0,t.jsx)(e.p,{children:\"Acceptance testing, also known as user acceptance testing (UAT), is conducted to determine whether the software is ready for release. It ensures that the software meets the business requirements and is acceptable to the end-users.\"}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://en.wikipedia.org/wiki/Unit_testing\",children:\"Unit Testing - Wikipedia\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://en.wikipedia.org/wiki/Integration_testing\",children:\"Integration Testing - Wikipedia\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://en.wikipedia.org/wiki/System_testing\",children:\"System Testing - Wikipedia\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://en.wikipedia.org/wiki/Acceptance_testing\",children:\"Acceptance Testing - Wikipedia\"})}),`\n`]})]})}function b(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var v=b;return x(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var y=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),w=(n,e)=>{for(var i in e)r(n,i,{get:e[i],enumerable:!0})},o=(n,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of g(e))!m.call(n,s)&&s!==i&&r(n,s,{get:()=>e[s],enumerable:!(a=u(e,s))||a.enumerable});return n};var x=(n,e,i)=>(i=n!=null?l(f(n)):{},o(e||!n||!n.__esModule?r(i,\"default\",{value:n,enumerable:!0}):i,n)),k=n=>o(r({},\"__esModule\",{value:!0}),n);var d=y((q,c)=>{c.exports=_jsx_runtime});var v={};w(v,{default:()=>p,frontmatter:()=>b});var t=x(d()),b={title:\"What are the different types of testing in software development?\"};function h(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:\"In software development, there are several types of testing to ensure the quality and functionality of the application. These include unit testing, integration testing, system testing, and acceptance testing. Unit testing focuses on individual components, integration testing checks the interaction between components, system testing evaluates the entire system, and acceptance testing ensures the software meets user requirements.\"}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"Different types of testing in software development\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Unit testing\"}),`\n`,(0,t.jsx)(e.p,{children:\"Unit testing involves testing individual components or functions of the software to ensure they work as expected. This type of testing is usually automated and written by developers.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`// Example of a unit test using Jest\nfunction add(a, b) {\n  return a + b;\n}\n\ntest('adds 1 + 2 to equal 3', () => {\n  expect(add(1, 2)).toBe(3);\n});\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Integration testing\"}),`\n`,(0,t.jsx)(e.p,{children:\"Integration testing focuses on the interaction between different components or modules of the software. It ensures that combined parts of the application work together as intended.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`// Example of an integration test using Jest and Supertest\nconst request = require('supertest');\nconst app = require('./app'); // Your Express app\n\ntest('GET /users returns a list of users', async () => {\n  const response = await request(app).get('/users');\n  expect(response.status).toBe(200);\n  expect(response.body).toEqual(\n    expect.arrayContaining([\n      expect.objectContaining({ id: expect.any(Number) }),\n    ]),\n  );\n});\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"System testing\"}),`\n`,(0,t.jsx)(e.p,{children:\"System testing evaluates the complete and integrated software system to verify that it meets the specified requirements. This type of testing is usually performed by QA teams.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Acceptance testing\"}),`\n`,(0,t.jsx)(e.p,{children:\"Acceptance testing, also known as user acceptance testing (UAT), is conducted to determine whether the software is ready for release. It ensures that the software meets the business requirements and is acceptable to the end-users.\"}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://en.wikipedia.org/wiki/Unit_testing\",children:\"Unit Testing - Wikipedia\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://en.wikipedia.org/wiki/Integration_testing\",children:\"Integration Testing - Wikipedia\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://en.wikipedia.org/wiki/System_testing\",children:\"System Testing - Wikipedia\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://en.wikipedia.org/wiki/Acceptance_testing\",children:\"Acceptance Testing - Wikipedia\"})}),`\n`]})]})}function p(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(h,{...n})}):h(n)}return k(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-different-types-of-testing-in-software-development/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-different-types-of-testing-in-software-development/zh-CN.json
index 8911be6fa..59065737d 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-different-types-of-testing-in-software-development/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-different-types-of-testing-in-software-development/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-different-types-of-testing-in-software-development/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var o=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var m=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),f=(t,n)=>{for(var i in n)s(t,i,{get:n[i],enumerable:!0})},c=(t,n,i,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of u(n))!x.call(t,r)&&r!==i&&s(t,r,{get:()=>n[r],enumerable:!(a=p(n,r))||a.enumerable});return t};var _=(t,n,i)=>(i=t!=null?o(g(t)):{},c(n||!t||!t.__esModule?s(i,\"default\",{value:t,enumerable:!0}):i,t)),j=t=>c(s({},\"__esModule\",{value:!0}),t);var l=m((E,h)=>{h.exports=_jsx_runtime});var q={};f(q,{default:()=>b,frontmatter:()=>w});var e=_(l()),w={title:\"\\u8F6F\\u4EF6\\u5F00\\u53D1\\u4E2D\\u4E0D\\u540C\\u7C7B\\u578B\\u7684\\u6D4B\\u8BD5\\u662F\\u4EC0\\u4E48\\uFF1F\"};function d(t){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u8F6F\\u4EF6\\u5F00\\u53D1\\u4E2D\\uFF0C\\u6709\\u51E0\\u79CD\\u7C7B\\u578B\\u7684\\u6D4B\\u8BD5\\u53EF\\u4EE5\\u786E\\u4FDD\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u8D28\\u91CF\\u548C\\u529F\\u80FD\\u3002\\u8FD9\\u4E9B\\u5305\\u62EC\\u5355\\u5143\\u6D4B\\u8BD5\\u3001\\u96C6\\u6210\\u6D4B\\u8BD5\\u3001\\u7CFB\\u7EDF\\u6D4B\\u8BD5\\u548C\\u9A8C\\u6536\\u6D4B\\u8BD5\\u3002\\u5355\\u5143\\u6D4B\\u8BD5\\u4FA7\\u91CD\\u4E8E\\u5355\\u4E2A\\u7EC4\\u4EF6\\uFF0C\\u96C6\\u6210\\u6D4B\\u8BD5\\u68C0\\u67E5\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u7684\\u4EA4\\u4E92\\uFF0C\\u7CFB\\u7EDF\\u6D4B\\u8BD5\\u8BC4\\u4F30\\u6574\\u4E2A\\u7CFB\\u7EDF\\uFF0C\\u9A8C\\u6536\\u6D4B\\u8BD5\\u786E\\u4FDD\\u8F6F\\u4EF6\\u6EE1\\u8DB3\\u7528\\u6237\\u9700\\u6C42\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u8F6F\\u4EF6\\u5F00\\u53D1\\u4E2D\\u4E0D\\u540C\\u7C7B\\u578B\\u7684\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5355\\u5143\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5355\\u5143\\u6D4B\\u8BD5\\u6D89\\u53CA\\u6D4B\\u8BD5\\u8F6F\\u4EF6\\u7684\\u5355\\u4E2A\\u7EC4\\u4EF6\\u6216\\u529F\\u80FD\\uFF0C\\u4EE5\\u786E\\u4FDD\\u5B83\\u4EEC\\u6309\\u9884\\u671F\\u5DE5\\u4F5C\\u3002\\u8FD9\\u79CD\\u7C7B\\u578B\\u7684\\u6D4B\\u8BD5\\u901A\\u5E38\\u662F\\u81EA\\u52A8\\u5316\\u7684\\uFF0C\\u7531\\u5F00\\u53D1\\u4EBA\\u5458\\u7F16\\u5199\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Example of a unit test using Jest\nfunction add(a, b) {\n  return a + b;\n}\n\ntest('adds 1 + 2 to equal 3', () => {\n  expect(add(1, 2)).toBe(3);\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u96C6\\u6210\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u96C6\\u6210\\u6D4B\\u8BD5\\u4FA7\\u91CD\\u4E8E\\u8F6F\\u4EF6\\u7684\\u4E0D\\u540C\\u7EC4\\u4EF6\\u6216\\u6A21\\u5757\\u4E4B\\u95F4\\u7684\\u4EA4\\u4E92\\u3002\\u5B83\\u786E\\u4FDD\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u7EC4\\u5408\\u90E8\\u5206\\u6309\\u9884\\u671F\\u4E00\\u8D77\\u5DE5\\u4F5C\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Example of an integration test using Jest and Supertest\nconst request = require('supertest');\nconst app = require('./app'); // Your Express app\n\ntest('GET /users returns a list of users', async () => {\n  const response = await request(app).get('/users');\n  expect(response.status).toBe(200);\n  expect(response.body).toEqual(\n    expect.arrayContaining([\n      expect.objectContaining({ id: expect.any(Number) }),\n    ]),\n  );\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7CFB\\u7EDF\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7CFB\\u7EDF\\u6D4B\\u8BD5\\u8BC4\\u4F30\\u5B8C\\u6574\\u4E14\\u96C6\\u6210\\u7684\\u8F6F\\u4EF6\\u7CFB\\u7EDF\\uFF0C\\u4EE5\\u9A8C\\u8BC1\\u5B83\\u662F\\u5426\\u6EE1\\u8DB3\\u6307\\u5B9A\\u7684\\u9700\\u6C42\\u3002\\u8FD9\\u79CD\\u7C7B\\u578B\\u7684\\u6D4B\\u8BD5\\u901A\\u5E38\\u7531\\u8D28\\u91CF\\u4FDD\\u8BC1\\u56E2\\u961F\\u6267\\u884C\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9A8C\\u6536\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9A8C\\u6536\\u6D4B\\u8BD5\\uFF0C\\u4E5F\\u79F0\\u4E3A\\u7528\\u6237\\u9A8C\\u6536\\u6D4B\\u8BD5 (UAT)\\uFF0C\\u7528\\u4E8E\\u786E\\u5B9A\\u8F6F\\u4EF6\\u662F\\u5426\\u5DF2\\u51C6\\u5907\\u597D\\u53D1\\u5E03\\u3002\\u5B83\\u786E\\u4FDD\\u8F6F\\u4EF6\\u6EE1\\u8DB3\\u4E1A\\u52A1\\u9700\\u6C42\\u5E76\\u88AB\\u6700\\u7EC8\\u7528\\u6237\\u63A5\\u53D7\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Unit_testing\",children:\"\\u5355\\u5143\\u6D4B\\u8BD5 - \\u7EF4\\u57FA\\u767E\\u79D1\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Integration_testing\",children:\"\\u96C6\\u6210\\u6D4B\\u8BD5 - \\u7EF4\\u57FA\\u767E\\u79D1\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/System_testing\",children:\"\\u7CFB\\u7EDF\\u6D4B\\u8BD5 - \\u7EF4\\u57FA\\u767E\\u79D1\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Acceptance_testing\",children:\"\\u9A8C\\u6536\\u6D4B\\u8BD5 - \\u7EF4\\u57FA\\u767E\\u79D1\"})}),`\n`]})]})}function k(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(d,t)})):d(t)}var b=k;return j(q);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),_=(t,n)=>{for(var r in n)s(t,r,{get:n[r],enumerable:!0})},c=(t,n,r,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of g(n))!m.call(t,i)&&i!==r&&s(t,i,{get:()=>n[i],enumerable:!(a=u(n,i))||a.enumerable});return t};var w=(t,n,r)=>(r=t!=null?p(x(t)):{},c(n||!t||!t.__esModule?s(r,\"default\",{value:t,enumerable:!0}):r,t)),j=t=>c(s({},\"__esModule\",{value:!0}),t);var l=f((b,h)=>{h.exports=_jsx_runtime});var q={};_(q,{default:()=>o,frontmatter:()=>k});var e=w(l()),k={title:\"\\u8F6F\\u4EF6\\u5F00\\u53D1\\u4E2D\\u4E0D\\u540C\\u7C7B\\u578B\\u7684\\u6D4B\\u8BD5\\u662F\\u4EC0\\u4E48\\uFF1F\"};function d(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u8F6F\\u4EF6\\u5F00\\u53D1\\u4E2D\\uFF0C\\u6709\\u51E0\\u79CD\\u7C7B\\u578B\\u7684\\u6D4B\\u8BD5\\u53EF\\u4EE5\\u786E\\u4FDD\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u8D28\\u91CF\\u548C\\u529F\\u80FD\\u3002\\u8FD9\\u4E9B\\u5305\\u62EC\\u5355\\u5143\\u6D4B\\u8BD5\\u3001\\u96C6\\u6210\\u6D4B\\u8BD5\\u3001\\u7CFB\\u7EDF\\u6D4B\\u8BD5\\u548C\\u9A8C\\u6536\\u6D4B\\u8BD5\\u3002\\u5355\\u5143\\u6D4B\\u8BD5\\u4FA7\\u91CD\\u4E8E\\u5355\\u4E2A\\u7EC4\\u4EF6\\uFF0C\\u96C6\\u6210\\u6D4B\\u8BD5\\u68C0\\u67E5\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u7684\\u4EA4\\u4E92\\uFF0C\\u7CFB\\u7EDF\\u6D4B\\u8BD5\\u8BC4\\u4F30\\u6574\\u4E2A\\u7CFB\\u7EDF\\uFF0C\\u9A8C\\u6536\\u6D4B\\u8BD5\\u786E\\u4FDD\\u8F6F\\u4EF6\\u6EE1\\u8DB3\\u7528\\u6237\\u9700\\u6C42\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u8F6F\\u4EF6\\u5F00\\u53D1\\u4E2D\\u4E0D\\u540C\\u7C7B\\u578B\\u7684\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5355\\u5143\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5355\\u5143\\u6D4B\\u8BD5\\u6D89\\u53CA\\u6D4B\\u8BD5\\u8F6F\\u4EF6\\u7684\\u5355\\u4E2A\\u7EC4\\u4EF6\\u6216\\u529F\\u80FD\\uFF0C\\u4EE5\\u786E\\u4FDD\\u5B83\\u4EEC\\u6309\\u9884\\u671F\\u5DE5\\u4F5C\\u3002\\u8FD9\\u79CD\\u7C7B\\u578B\\u7684\\u6D4B\\u8BD5\\u901A\\u5E38\\u662F\\u81EA\\u52A8\\u5316\\u7684\\uFF0C\\u7531\\u5F00\\u53D1\\u4EBA\\u5458\\u7F16\\u5199\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Example of a unit test using Jest\nfunction add(a, b) {\n  return a + b;\n}\n\ntest('adds 1 + 2 to equal 3', () => {\n  expect(add(1, 2)).toBe(3);\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u96C6\\u6210\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u96C6\\u6210\\u6D4B\\u8BD5\\u4FA7\\u91CD\\u4E8E\\u8F6F\\u4EF6\\u7684\\u4E0D\\u540C\\u7EC4\\u4EF6\\u6216\\u6A21\\u5757\\u4E4B\\u95F4\\u7684\\u4EA4\\u4E92\\u3002\\u5B83\\u786E\\u4FDD\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u7EC4\\u5408\\u90E8\\u5206\\u6309\\u9884\\u671F\\u4E00\\u8D77\\u5DE5\\u4F5C\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Example of an integration test using Jest and Supertest\nconst request = require('supertest');\nconst app = require('./app'); // Your Express app\n\ntest('GET /users returns a list of users', async () => {\n  const response = await request(app).get('/users');\n  expect(response.status).toBe(200);\n  expect(response.body).toEqual(\n    expect.arrayContaining([\n      expect.objectContaining({ id: expect.any(Number) }),\n    ]),\n  );\n});\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7CFB\\u7EDF\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7CFB\\u7EDF\\u6D4B\\u8BD5\\u8BC4\\u4F30\\u5B8C\\u6574\\u4E14\\u96C6\\u6210\\u7684\\u8F6F\\u4EF6\\u7CFB\\u7EDF\\uFF0C\\u4EE5\\u9A8C\\u8BC1\\u5B83\\u662F\\u5426\\u6EE1\\u8DB3\\u6307\\u5B9A\\u7684\\u9700\\u6C42\\u3002\\u8FD9\\u79CD\\u7C7B\\u578B\\u7684\\u6D4B\\u8BD5\\u901A\\u5E38\\u7531\\u8D28\\u91CF\\u4FDD\\u8BC1\\u56E2\\u961F\\u6267\\u884C\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9A8C\\u6536\\u6D4B\\u8BD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9A8C\\u6536\\u6D4B\\u8BD5\\uFF0C\\u4E5F\\u79F0\\u4E3A\\u7528\\u6237\\u9A8C\\u6536\\u6D4B\\u8BD5 (UAT)\\uFF0C\\u7528\\u4E8E\\u786E\\u5B9A\\u8F6F\\u4EF6\\u662F\\u5426\\u5DF2\\u51C6\\u5907\\u597D\\u53D1\\u5E03\\u3002\\u5B83\\u786E\\u4FDD\\u8F6F\\u4EF6\\u6EE1\\u8DB3\\u4E1A\\u52A1\\u9700\\u6C42\\u5E76\\u88AB\\u6700\\u7EC8\\u7528\\u6237\\u63A5\\u53D7\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Unit_testing\",children:\"\\u5355\\u5143\\u6D4B\\u8BD5 - \\u7EF4\\u57FA\\u767E\\u79D1\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Integration_testing\",children:\"\\u96C6\\u6210\\u6D4B\\u8BD5 - \\u7EF4\\u57FA\\u767E\\u79D1\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/System_testing\",children:\"\\u7CFB\\u7EDF\\u6D4B\\u8BD5 - \\u7EF4\\u57FA\\u767E\\u79D1\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Acceptance_testing\",children:\"\\u9A8C\\u6536\\u6D4B\\u8BD5 - \\u7EF4\\u57FA\\u767E\\u79D1\"})}),`\n`]})]})}function o(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(d,{...t})}):d(t)}return j(q);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-copy-an-object-or-an-array/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-copy-an-object-or-an-array/en-US.json
index cb84fb4ea..34ad948f1 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-copy-an-object-or-an-array/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-copy-an-object-or-an-array/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-different-ways-to-copy-an-object-or-an-array/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var j=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),O=(o,e)=>{for(var c in e)a(o,c,{get:e[c],enumerable:!0})},i=(o,e,c,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of b(e))!g.call(o,r)&&r!==c&&a(o,r,{get:()=>e[r],enumerable:!(l=p(e,r))||l.enumerable});return o};var u=(o,e,c)=>(c=o!=null?d(y(o)):{},i(e||!o||!o.__esModule?a(c,\"default\",{value:o,enumerable:!0}):c,o)),f=o=>i(a({},\"__esModule\",{value:!0}),o);var t=j((D,s)=>{s.exports=_jsx_runtime});var C={};O(C,{default:()=>w,frontmatter:()=>m});var n=u(t()),m={title:\"What are the different ways to copy an object or an array?\"};function h(o){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To copy an object or an array in JavaScript, you can use several methods. For shallow copies, you can use the spread operator (\",(0,n.jsx)(e.code,{children:\"...\"}),\") or \",(0,n.jsx)(e.code,{children:\"Object.assign()\"}),\". For deep copies, you can use \",(0,n.jsx)(e.code,{children:\"JSON.parse(JSON.stringify())\"}),\" or libraries like Lodash's \",(0,n.jsx)(e.code,{children:\"_.cloneDeep()\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Shallow copy of an array\nconst originalArray = [1, 2, 3];\nconst shallowCopyArray = [...originalArray];\nconsole.log(shallowCopyArray); // [1, 2, 3]\n\n// Shallow copy of an object\nconst originalObject = { a: 1, b: 2 };\nconst shallowCopyObject = { ...originalObject };\nconsole.log(shallowCopyObject); // { a: 1, b: 2 };\n\n// Deep copy using JSON methods\nconst deepCopyObject = JSON.parse(JSON.stringify(originalObject));\nconsole.log(deepCopyObject); // { a: 1, b: 2 };\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Different ways to copy an object or an array\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Shallow copy\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Using the spread operator\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The spread operator (\",(0,n.jsx)(e.code,{children:\"...\"}),\") is a concise way to create a shallow copy of an array or an object.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Shallow copy of an array\nconst originalArray = [1, 2, 3];\nconst shallowCopyArray = [...originalArray];\nconsole.log(shallowCopyArray); // [1, 2, 3]\n\n// Shallow copy of an object\nconst originalObject = { a: 1, b: 2 };\nconst shallowCopyObject = { ...originalObject };\nconsole.log(shallowCopyObject); // { a: 1, b: 2 };\n`})}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"Object.assign()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.assign()\"}),\" can also be used to create a shallow copy of an object.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const originalObject = { a: 1, b: 2 };\nconst shallowCopyObject = Object.assign({}, originalObject);\nconsole.log(shallowCopyObject); // { a: 1, b: 2 };\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Deep copy\"}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"JSON.parse(JSON.stringify())\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"This method is a simple way to create a deep copy of an object or an array. However, it has limitations, such as not handling functions, \",(0,n.jsx)(e.code,{children:\"undefined\"}),\", or circular references.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const originalObject = { a: 1, b: { c: 2 } };\nconst deepCopyObject = JSON.parse(JSON.stringify(originalObject));\nconsole.log(deepCopyObject); // { a: 1, b: { c: 2 } }\n`})}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Using Lodash's \",(0,n.jsx)(e.code,{children:\"_.cloneDeep()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Lodash is a popular utility library that provides a \",(0,n.jsx)(e.code,{children:\"_.cloneDeep()\"}),\" method for deep copying objects and arrays.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const _ = require('lodash');\nconst originalObject = { a: 1, b: { c: 2 } };\nconst deepCopyObject = _.cloneDeep(originalObject); // { a: 1, b: { c: 2 } }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Other methods\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Using recursion\"}),`\n`,(0,n.jsx)(e.p,{children:\"For custom deep copy logic, you can implement a recursive function.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function deepCopy(obj) {\n  if (obj === null || typeof obj !== 'object') {\n    return obj;\n  }\n\n  if (Array.isArray(obj)) {\n    return obj.map((item) => deepCopy(item));\n  }\n\n  const copy = {};\n  for (const key in obj) {\n    if (obj.hasOwnProperty(key)) {\n      copy[key] = deepCopy(obj[key]);\n    }\n  }\n  return copy;\n}\n\nconst originalObject = { a: 1, b: { c: 2 } };\nconst deepCopyObject = deepCopy(originalObject);\nconsole.log(deepCopyObject); // { a: 1, b: { c: 2 } }\n`})}),`\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/Web/JavaScript/Reference/Operators/Spread_syntax\",children:\"MDN Web Docs: Spread syntax\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign\",children:\"MDN Web Docs: Object.assign()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://lodash.com/docs/4.17.15#cloneDeep\",children:\"Lodash documentation: _.cloneDeep\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse\",children:\"MDN Web Docs: JSON.parse()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify\",children:\"MDN Web Docs: JSON.stringify()\"})}),`\n`]})]})}function S(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(h,o)})):h(o)}var w=S;return f(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var O=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),u=(o,e)=>{for(var c in e)a(o,c,{get:e[c],enumerable:!0})},i=(o,e,c,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of b(e))!j.call(o,r)&&r!==c&&a(o,r,{get:()=>e[r],enumerable:!(l=y(e,r))||l.enumerable});return o};var f=(o,e,c)=>(c=o!=null?p(g(o)):{},i(e||!o||!o.__esModule?a(c,\"default\",{value:o,enumerable:!0}):c,o)),m=o=>i(a({},\"__esModule\",{value:!0}),o);var s=O((N,t)=>{t.exports=_jsx_runtime});var w={};u(w,{default:()=>d,frontmatter:()=>S});var n=f(s()),S={title:\"What are the different ways to copy an object or an array?\"};function h(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To copy an object or an array in JavaScript, you can use several methods. For shallow copies, you can use the spread operator (\",(0,n.jsx)(e.code,{children:\"...\"}),\") or \",(0,n.jsx)(e.code,{children:\"Object.assign()\"}),\". For deep copies, you can use \",(0,n.jsx)(e.code,{children:\"JSON.parse(JSON.stringify())\"}),\" or libraries like Lodash's \",(0,n.jsx)(e.code,{children:\"_.cloneDeep()\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Shallow copy of an array\nconst originalArray = [1, 2, 3];\nconst shallowCopyArray = [...originalArray];\nconsole.log(shallowCopyArray); // [1, 2, 3]\n\n// Shallow copy of an object\nconst originalObject = { a: 1, b: 2 };\nconst shallowCopyObject = { ...originalObject };\nconsole.log(shallowCopyObject); // { a: 1, b: 2 };\n\n// Deep copy using JSON methods\nconst deepCopyObject = JSON.parse(JSON.stringify(originalObject));\nconsole.log(deepCopyObject); // { a: 1, b: 2 };\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Different ways to copy an object or an array\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Shallow copy\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Using the spread operator\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The spread operator (\",(0,n.jsx)(e.code,{children:\"...\"}),\") is a concise way to create a shallow copy of an array or an object.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Shallow copy of an array\nconst originalArray = [1, 2, 3];\nconst shallowCopyArray = [...originalArray];\nconsole.log(shallowCopyArray); // [1, 2, 3]\n\n// Shallow copy of an object\nconst originalObject = { a: 1, b: 2 };\nconst shallowCopyObject = { ...originalObject };\nconsole.log(shallowCopyObject); // { a: 1, b: 2 };\n`})}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"Object.assign()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.assign()\"}),\" can also be used to create a shallow copy of an object.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const originalObject = { a: 1, b: 2 };\nconst shallowCopyObject = Object.assign({}, originalObject);\nconsole.log(shallowCopyObject); // { a: 1, b: 2 };\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Deep copy\"}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"JSON.parse(JSON.stringify())\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"This method is a simple way to create a deep copy of an object or an array. However, it has limitations, such as not handling functions, \",(0,n.jsx)(e.code,{children:\"undefined\"}),\", or circular references.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const originalObject = { a: 1, b: { c: 2 } };\nconst deepCopyObject = JSON.parse(JSON.stringify(originalObject));\nconsole.log(deepCopyObject); // { a: 1, b: { c: 2 } }\n`})}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Using Lodash's \",(0,n.jsx)(e.code,{children:\"_.cloneDeep()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Lodash is a popular utility library that provides a \",(0,n.jsx)(e.code,{children:\"_.cloneDeep()\"}),\" method for deep copying objects and arrays.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const _ = require('lodash');\nconst originalObject = { a: 1, b: { c: 2 } };\nconst deepCopyObject = _.cloneDeep(originalObject); // { a: 1, b: { c: 2 } }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Other methods\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Using recursion\"}),`\n`,(0,n.jsx)(e.p,{children:\"For custom deep copy logic, you can implement a recursive function.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function deepCopy(obj) {\n  if (obj === null || typeof obj !== 'object') {\n    return obj;\n  }\n\n  if (Array.isArray(obj)) {\n    return obj.map((item) => deepCopy(item));\n  }\n\n  const copy = {};\n  for (const key in obj) {\n    if (obj.hasOwnProperty(key)) {\n      copy[key] = deepCopy(obj[key]);\n    }\n  }\n  return copy;\n}\n\nconst originalObject = { a: 1, b: { c: 2 } };\nconst deepCopyObject = deepCopy(originalObject);\nconsole.log(deepCopyObject); // { a: 1, b: { c: 2 } }\n`})}),`\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/Web/JavaScript/Reference/Operators/Spread_syntax\",children:\"MDN Web Docs: Spread syntax\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign\",children:\"MDN Web Docs: Object.assign()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://lodash.com/docs/4.17.15#cloneDeep\",children:\"Lodash documentation: _.cloneDeep\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse\",children:\"MDN Web Docs: JSON.parse()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify\",children:\"MDN Web Docs: JSON.stringify()\"})}),`\n`]})]})}function d(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(h,{...o})}):h(o)}return m(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-copy-an-object-or-an-array/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-copy-an-object-or-an-array/zh-CN.json
index b35f28ccb..ad7267fe4 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-copy-an-object-or-an-array/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-copy-an-object-or-an-array/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-different-ways-to-copy-an-object-or-an-array/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),O=(o,e)=>{for(var c in e)l(o,c,{get:e[c],enumerable:!0})},i=(o,e,c,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of b(e))!g.call(o,r)&&r!==c&&l(o,r,{get:()=>e[r],enumerable:!(a=p(e,r))||a.enumerable});return o};var f=(o,e,c)=>(c=o!=null?h(j(o)):{},i(e||!o||!o.__esModule?l(c,\"default\",{value:o,enumerable:!0}):c,o)),u=o=>i(l({},\"__esModule\",{value:!0}),o);var s=y((J,t)=>{t.exports=_jsx_runtime});var N={};O(N,{default:()=>C,frontmatter:()=>S});var n=f(s()),S={title:\"\\u590D\\u5236\\u5BF9\\u8C61\\u6216\\u6570\\u7EC4\\u7684\\u4E0D\\u540C\\u65B9\\u6CD5\\u662F\\u4EC0\\u4E48\\uFF1F\"};function d(o){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 JavaScript \\u4E2D\\u590D\\u5236\\u5BF9\\u8C61\\u6216\\u6570\\u7EC4\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u591A\\u79CD\\u65B9\\u6CD5\\u3002\\u5BF9\\u4E8E\\u6D45\\u62F7\\u8D1D\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\\uFF08\",(0,n.jsx)(e.code,{children:\"...\"}),\"\\uFF09\\u6216 \",(0,n.jsx)(e.code,{children:\"Object.assign()\"}),\"\\u3002\\u5BF9\\u4E8E\\u6DF1\\u62F7\\u8D1D\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"JSON.parse(JSON.stringify())\"}),\" \\u6216\\u50CF Lodash \\u7684 \",(0,n.jsx)(e.code,{children:\"_.cloneDeep()\"}),\" \\u8FD9\\u6837\\u7684\\u5E93\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Shallow copy of an array\nconst originalArray = [1, 2, 3];\nconst shallowCopyArray = [...originalArray];\nconsole.log(shallowCopyArray); // [1, 2, 3]\n\n// Shallow copy of an object\nconst originalObject = { a: 1, b: 2 };\nconst shallowCopyObject = { ...originalObject };\nconsole.log(shallowCopyObject); // { a: 1, b: 2 };\n\n// Deep copy using JSON methods\nconst deepCopyObject = JSON.parse(JSON.stringify(originalObject));\nconsole.log(deepCopyObject); // { a: 1, b: 2 };\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u590D\\u5236\\u5BF9\\u8C61\\u6216\\u6570\\u7EC4\\u7684\\u4E0D\\u540C\\u65B9\\u6CD5\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6D45\\u62F7\\u8D1D\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4F7F\\u7528\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\\uFF08\",(0,n.jsx)(e.code,{children:\"...\"}),\"\\uFF09\\u662F\\u4E00\\u79CD\\u521B\\u5EFA\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\u6D45\\u62F7\\u8D1D\\u7684\\u7B80\\u6D01\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Shallow copy of an array\nconst originalArray = [1, 2, 3];\nconst shallowCopyArray = [...originalArray];\nconsole.log(shallowCopyArray); // [1, 2, 3]\n\n// Shallow copy of an object\nconst originalObject = { a: 1, b: 2 };\nconst shallowCopyObject = { ...originalObject };\nconsole.log(shallowCopyObject); // { a: 1, b: 2 };\n`})}),`\n`,(0,n.jsxs)(e.h4,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.assign()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.assign()\"}),\" \\u4E5F\\u53EF\\u4EE5\\u7528\\u6765\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u6D45\\u62F7\\u8D1D\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const originalObject = { a: 1, b: 2 };\nconst shallowCopyObject = Object.assign({}, originalObject);\nconsole.log(shallowCopyObject); // { a: 1, b: 2 };\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6DF1\\u62F7\\u8D1D\"}),`\n`,(0,n.jsxs)(e.h4,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"JSON.parse(JSON.stringify())\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u79CD\\u65B9\\u6CD5\\u662F\\u4E00\\u79CD\\u521B\\u5EFA\\u5BF9\\u8C61\\u6216\\u6570\\u7EC4\\u6DF1\\u62F7\\u8D1D\\u7684\\u7B80\\u5355\\u65B9\\u6CD5\\u3002\\u4F46\\u662F\\uFF0C\\u5B83\\u4E5F\\u6709\\u5C40\\u9650\\u6027\\uFF0C\\u4F8B\\u5982\\u65E0\\u6CD5\\u5904\\u7406\\u51FD\\u6570\\u3001\",(0,n.jsx)(e.code,{children:\"undefined\"}),\" \\u6216\\u5FAA\\u73AF\\u5F15\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const originalObject = { a: 1, b: { c: 2 } };\nconst deepCopyObject = JSON.parse(JSON.stringify(originalObject));\nconsole.log(deepCopyObject); // { a: 1, b: { c: 2 } }\n`})}),`\n`,(0,n.jsxs)(e.h4,{children:[\"\\u4F7F\\u7528 Lodash \\u7684 \",(0,n.jsx)(e.code,{children:\"_.cloneDeep()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Lodash \\u662F\\u4E00\\u4E2A\\u6D41\\u884C\\u7684\\u5B9E\\u7528\\u7A0B\\u5E8F\\u5E93\\uFF0C\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"_.cloneDeep()\"}),\" \\u65B9\\u6CD5\\uFF0C\\u7528\\u4E8E\\u6DF1\\u62F7\\u8D1D\\u5BF9\\u8C61\\u548C\\u6570\\u7EC4\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const _ = require('lodash');\nconst originalObject = { a: 1, b: { c: 2 } };\nconst deepCopyObject = _.cloneDeep(originalObject); // { a: 1, b: { c: 2 } }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5176\\u4ED6\\u65B9\\u6CD5\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4F7F\\u7528\\u9012\\u5F52\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5BF9\\u4E8E\\u81EA\\u5B9A\\u4E49\\u6DF1\\u62F7\\u8D1D\\u903B\\u8F91\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5B9E\\u73B0\\u4E00\\u4E2A\\u9012\\u5F52\\u51FD\\u6570\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function deepCopy(obj) {\n  if (obj === null || typeof obj !== 'object') {\n    return obj;\n  }\n\n  if (Array.isArray(obj)) {\n    return obj.map((item) => deepCopy(item));\n  }\n\n  const copy = {};\n  for (const key in obj) {\n    if (obj.hasOwnProperty(key)) {\n      copy[key] = deepCopy(obj[key]);\n    }\n  }\n  return copy;\n}\n\nconst originalObject = { a: 1, b: { c: 2 } };\nconst deepCopyObject = deepCopy(originalObject);\nconsole.log(deepCopyObject); // { a: 1, b: { c: 2 } }\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Operators/Spread_syntax\",children:\"MDN Web Docs: Spread syntax\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign\",children:\"MDN Web Docs: Object.assign()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://lodash.com/docs/4.17.15#cloneDeep\",children:\"Lodash documentation: _.cloneDeep\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse\",children:\"MDN Web Docs: JSON.parse()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify\",children:\"MDN Web Docs: JSON.stringify()\"})}),`\n`]})]})}function m(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(d,o)})):d(o)}var C=m;return u(N);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var O=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),f=(o,e)=>{for(var c in e)l(o,c,{get:e[c],enumerable:!0})},i=(o,e,c,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of j(e))!y.call(o,r)&&r!==c&&l(o,r,{get:()=>e[r],enumerable:!(a=b(e,r))||a.enumerable});return o};var u=(o,e,c)=>(c=o!=null?p(g(o)):{},i(e||!o||!o.__esModule?l(c,\"default\",{value:o,enumerable:!0}):c,o)),S=o=>i(l({},\"__esModule\",{value:!0}),o);var s=O((D,t)=>{t.exports=_jsx_runtime});var C={};f(C,{default:()=>h,frontmatter:()=>m});var n=u(s()),m={title:\"\\u590D\\u5236\\u5BF9\\u8C61\\u6216\\u6570\\u7EC4\\u7684\\u4E0D\\u540C\\u65B9\\u6CD5\\u662F\\u4EC0\\u4E48\\uFF1F\"};function d(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 JavaScript \\u4E2D\\u590D\\u5236\\u5BF9\\u8C61\\u6216\\u6570\\u7EC4\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u591A\\u79CD\\u65B9\\u6CD5\\u3002\\u5BF9\\u4E8E\\u6D45\\u62F7\\u8D1D\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\\uFF08\",(0,n.jsx)(e.code,{children:\"...\"}),\"\\uFF09\\u6216 \",(0,n.jsx)(e.code,{children:\"Object.assign()\"}),\"\\u3002\\u5BF9\\u4E8E\\u6DF1\\u62F7\\u8D1D\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"JSON.parse(JSON.stringify())\"}),\" \\u6216\\u50CF Lodash \\u7684 \",(0,n.jsx)(e.code,{children:\"_.cloneDeep()\"}),\" \\u8FD9\\u6837\\u7684\\u5E93\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Shallow copy of an array\nconst originalArray = [1, 2, 3];\nconst shallowCopyArray = [...originalArray];\nconsole.log(shallowCopyArray); // [1, 2, 3]\n\n// Shallow copy of an object\nconst originalObject = { a: 1, b: 2 };\nconst shallowCopyObject = { ...originalObject };\nconsole.log(shallowCopyObject); // { a: 1, b: 2 };\n\n// Deep copy using JSON methods\nconst deepCopyObject = JSON.parse(JSON.stringify(originalObject));\nconsole.log(deepCopyObject); // { a: 1, b: 2 };\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u590D\\u5236\\u5BF9\\u8C61\\u6216\\u6570\\u7EC4\\u7684\\u4E0D\\u540C\\u65B9\\u6CD5\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6D45\\u62F7\\u8D1D\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4F7F\\u7528\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\\uFF08\",(0,n.jsx)(e.code,{children:\"...\"}),\"\\uFF09\\u662F\\u4E00\\u79CD\\u521B\\u5EFA\\u6570\\u7EC4\\u6216\\u5BF9\\u8C61\\u6D45\\u62F7\\u8D1D\\u7684\\u7B80\\u6D01\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Shallow copy of an array\nconst originalArray = [1, 2, 3];\nconst shallowCopyArray = [...originalArray];\nconsole.log(shallowCopyArray); // [1, 2, 3]\n\n// Shallow copy of an object\nconst originalObject = { a: 1, b: 2 };\nconst shallowCopyObject = { ...originalObject };\nconsole.log(shallowCopyObject); // { a: 1, b: 2 };\n`})}),`\n`,(0,n.jsxs)(e.h4,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.assign()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.assign()\"}),\" \\u4E5F\\u53EF\\u4EE5\\u7528\\u6765\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u6D45\\u62F7\\u8D1D\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const originalObject = { a: 1, b: 2 };\nconst shallowCopyObject = Object.assign({}, originalObject);\nconsole.log(shallowCopyObject); // { a: 1, b: 2 };\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6DF1\\u62F7\\u8D1D\"}),`\n`,(0,n.jsxs)(e.h4,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"JSON.parse(JSON.stringify())\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u79CD\\u65B9\\u6CD5\\u662F\\u4E00\\u79CD\\u521B\\u5EFA\\u5BF9\\u8C61\\u6216\\u6570\\u7EC4\\u6DF1\\u62F7\\u8D1D\\u7684\\u7B80\\u5355\\u65B9\\u6CD5\\u3002\\u4F46\\u662F\\uFF0C\\u5B83\\u4E5F\\u6709\\u5C40\\u9650\\u6027\\uFF0C\\u4F8B\\u5982\\u65E0\\u6CD5\\u5904\\u7406\\u51FD\\u6570\\u3001\",(0,n.jsx)(e.code,{children:\"undefined\"}),\" \\u6216\\u5FAA\\u73AF\\u5F15\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const originalObject = { a: 1, b: { c: 2 } };\nconst deepCopyObject = JSON.parse(JSON.stringify(originalObject));\nconsole.log(deepCopyObject); // { a: 1, b: { c: 2 } }\n`})}),`\n`,(0,n.jsxs)(e.h4,{children:[\"\\u4F7F\\u7528 Lodash \\u7684 \",(0,n.jsx)(e.code,{children:\"_.cloneDeep()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Lodash \\u662F\\u4E00\\u4E2A\\u6D41\\u884C\\u7684\\u5B9E\\u7528\\u7A0B\\u5E8F\\u5E93\\uFF0C\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"_.cloneDeep()\"}),\" \\u65B9\\u6CD5\\uFF0C\\u7528\\u4E8E\\u6DF1\\u62F7\\u8D1D\\u5BF9\\u8C61\\u548C\\u6570\\u7EC4\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const _ = require('lodash');\nconst originalObject = { a: 1, b: { c: 2 } };\nconst deepCopyObject = _.cloneDeep(originalObject); // { a: 1, b: { c: 2 } }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5176\\u4ED6\\u65B9\\u6CD5\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4F7F\\u7528\\u9012\\u5F52\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5BF9\\u4E8E\\u81EA\\u5B9A\\u4E49\\u6DF1\\u62F7\\u8D1D\\u903B\\u8F91\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5B9E\\u73B0\\u4E00\\u4E2A\\u9012\\u5F52\\u51FD\\u6570\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function deepCopy(obj) {\n  if (obj === null || typeof obj !== 'object') {\n    return obj;\n  }\n\n  if (Array.isArray(obj)) {\n    return obj.map((item) => deepCopy(item));\n  }\n\n  const copy = {};\n  for (const key in obj) {\n    if (obj.hasOwnProperty(key)) {\n      copy[key] = deepCopy(obj[key]);\n    }\n  }\n  return copy;\n}\n\nconst originalObject = { a: 1, b: { c: 2 } };\nconst deepCopyObject = deepCopy(originalObject);\nconsole.log(deepCopyObject); // { a: 1, b: { c: 2 } }\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Operators/Spread_syntax\",children:\"MDN Web Docs: Spread syntax\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign\",children:\"MDN Web Docs: Object.assign()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://lodash.com/docs/4.17.15#cloneDeep\",children:\"Lodash documentation: _.cloneDeep\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse\",children:\"MDN Web Docs: JSON.parse()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify\",children:\"MDN Web Docs: JSON.stringify()\"})}),`\n`]})]})}function h(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(d,{...o})}):d(o)}return S(C);})();\n;return Component;"
 }
\ No newline at end of file
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 19b03e8d6..a2397d13f 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),g=(r,e)=>{for(var t in e)a(r,t,{get:e[t],enumerable:!0})},i=(r,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!x.call(r,o)&&o!==t&&a(r,o,{get:()=>e[o],enumerable:!(s=p(e,o))||s.enumerable});return r};var y=(r,e,t)=>(t=r!=null?d(u(r)):{},i(e||!r||!r.__esModule?a(t,\"default\",{value:r,enumerable:!0}):t,r)),A=r=>i(a({},\"__esModule\",{value:!0}),r);var l=f((k,c)=>{c.exports=_jsx_runtime});var I={};g(I,{default:()=>b,frontmatter:()=>j});var n=y(l()),j={title:\"What are the different ways to make an API call in JavaScript?\"};function h(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, you can make API calls using several methods. The most common ones are \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\", \",(0,n.jsx)(e.code,{children:\"fetch\"}),\", and third-party libraries like \",(0,n.jsx)(e.code,{children:\"Axios\"}),\". \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" is the traditional way but is more verbose. \",(0,n.jsx)(e.code,{children:\"fetch\"}),\" is modern and returns promises, making it easier to work with. \",(0,n.jsx)(e.code,{children:\"Axios\"}),\" is a popular third-party library that simplifies API calls and provides additional features.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Different ways to make an API call in JavaScript\"}),`\n`,(0,n.jsx)(e.h3,{children:\"XMLHttpRequest\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" is the traditional way to make API calls in JavaScript. It is more verbose and requires more code compared to modern methods.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.onreadystatechange = function () {\n  if (xhr.readyState === 4 && xhr.status === 200) {\n    console.log(JSON.parse(xhr.responseText));\n  }\n};\nxhr.send();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Fetch API\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"fetch\"}),\" is a modern and more convenient way to make API calls. It returns a promise, making it easier to handle asynchronous operations.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) =>\n    console.error('There was a problem with the fetch operation:', error),\n  );\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Axios\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Axios\"}),\" is a popular third-party library that simplifies making API calls. It provides additional features like interceptors, automatic JSON transformation, and more.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`axios\n  .get('https://api.example.com/data')\n  .then((response) => console.log(response.data))\n  .catch((error) =>\n    console.error('There was a problem with the Axios request:', error),\n  );\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"jQuery AJAX\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"jQuery\"}),\" also provides an \",(0,n.jsx)(e.code,{children:\"ajax\"}),\" method to make API calls. This method is less common in modern development but still used in some legacy projects.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`$.ajax({\n  url: 'https://api.example.com/data',\n  method: 'GET',\n  success: function (data) {\n    console.log(data);\n  },\n  error: function (error) {\n    console.error('There was a problem with the jQuery AJAX request:', error);\n  },\n});\n`})}),`\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/Web/API/XMLHttpRequest\",children:\"MDN Web Docs: XMLHttpRequest\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\",children:\"MDN Web Docs: Fetch API\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/axios/axios\",children:\"Axios GitHub Repository\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://api.jquery.com/jquery.ajax/\",children:\"jQuery AJAX Documentation\"})}),`\n`]})]})}function w(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(h,r)})):h(r)}var b=w;return A(I);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),y=(r,e)=>{for(var t in e)a(r,t,{get:e[t],enumerable:!0})},i=(r,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!f.call(r,o)&&o!==t&&a(r,o,{get:()=>e[o],enumerable:!(s=m(e,o))||s.enumerable});return r};var A=(r,e,t)=>(t=r!=null?p(x(r)):{},i(e||!r||!r.__esModule?a(t,\"default\",{value:r,enumerable:!0}):t,r)),j=r=>i(a({},\"__esModule\",{value:!0}),r);var l=g((v,c)=>{c.exports=_jsx_runtime});var I={};y(I,{default:()=>d,frontmatter:()=>w});var n=A(l()),w={title:\"What are the different ways to make an API call in JavaScript?\"};function h(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, you can make API calls using several methods. The most common ones are \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\", \",(0,n.jsx)(e.code,{children:\"fetch\"}),\", and third-party libraries like \",(0,n.jsx)(e.code,{children:\"Axios\"}),\". \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" is the traditional way but is more verbose. \",(0,n.jsx)(e.code,{children:\"fetch\"}),\" is modern and returns promises, making it easier to work with. \",(0,n.jsx)(e.code,{children:\"Axios\"}),\" is a popular third-party library that simplifies API calls and provides additional features.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Different ways to make an API call in JavaScript\"}),`\n`,(0,n.jsx)(e.h3,{children:\"XMLHttpRequest\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" is the traditional way to make API calls in JavaScript. It is more verbose and requires more code compared to modern methods.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.onreadystatechange = function () {\n  if (xhr.readyState === 4 && xhr.status === 200) {\n    console.log(JSON.parse(xhr.responseText));\n  }\n};\nxhr.send();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Fetch API\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"fetch\"}),\" is a modern and more convenient way to make API calls. It returns a promise, making it easier to handle asynchronous operations.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) =>\n    console.error('There was a problem with the fetch operation:', error),\n  );\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Axios\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Axios\"}),\" is a popular third-party library that simplifies making API calls. It provides additional features like interceptors, automatic JSON transformation, and more.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`axios\n  .get('https://api.example.com/data')\n  .then((response) => console.log(response.data))\n  .catch((error) =>\n    console.error('There was a problem with the Axios request:', error),\n  );\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"jQuery AJAX\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"jQuery\"}),\" also provides an \",(0,n.jsx)(e.code,{children:\"ajax\"}),\" method to make API calls. This method is less common in modern development but still used in some legacy projects.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`$.ajax({\n  url: 'https://api.example.com/data',\n  method: 'GET',\n  success: function (data) {\n    console.log(data);\n  },\n  error: function (error) {\n    console.error('There was a problem with the jQuery AJAX request:', error);\n  },\n});\n`})}),`\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/Web/API/XMLHttpRequest\",children:\"MDN Web Docs: XMLHttpRequest\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\",children:\"MDN Web Docs: Fetch API\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/axios/axios\",children:\"Axios GitHub Repository\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://api.jquery.com/jquery.ajax/\",children:\"jQuery AJAX Documentation\"})}),`\n`]})]})}function d(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return j(I);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-make-an-api-call-in-javascript/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-make-an-api-call-in-javascript/zh-CN.json
index 0407e590d..9a0eaaa26 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-make-an-api-call-in-javascript/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-make-an-api-call-in-javascript/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-different-ways-to-make-an-api-call-in-javascript/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var A=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),j=(r,e)=>{for(var t in e)c(r,t,{get:e[t],enumerable:!0})},s=(r,e,t,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!m.call(r,o)&&o!==t&&c(r,o,{get:()=>e[o],enumerable:!(h=p(e,o))||h.enumerable});return r};var g=(r,e,t)=>(t=r!=null?d(x(r)):{},s(e||!r||!r.__esModule?c(t,\"default\",{value:r,enumerable:!0}):t,r)),f=r=>s(c({},\"__esModule\",{value:!0}),r);var i=A((X,a)=>{a.exports=_jsx_runtime});var y={};j(y,{default:()=>w,frontmatter:()=>I});var n=g(i()),I={title:\"JavaScript \\u4E2D\\u8C03\\u7528 API \\u7684\\u4E0D\\u540C\\u65B9\\u6CD5\\u662F\\u4EC0\\u4E48\\uFF1F\"};function l(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u591A\\u79CD\\u65B9\\u6CD5\\u8C03\\u7528 API\\u3002\\u6700\\u5E38\\u89C1\\u7684\\u65B9\\u6CD5\\u662F \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"fetch\"}),\" \\u548C\\u7B2C\\u4E09\\u65B9\\u5E93\\uFF0C\\u5982 \",(0,n.jsx)(e.code,{children:\"Axios\"}),\"\\u3002\",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u662F\\u4F20\\u7EDF\\u65B9\\u6CD5\\uFF0C\\u4F46\\u66F4\\u5197\\u957F\\u3002\",(0,n.jsx)(e.code,{children:\"fetch\"}),\" \\u662F\\u73B0\\u4EE3\\u65B9\\u6CD5\\uFF0C\\u8FD4\\u56DE promise\\uFF0C\\u4F7F\\u5176\\u66F4\\u6613\\u4E8E\\u4F7F\\u7528\\u3002\",(0,n.jsx)(e.code,{children:\"Axios\"}),\" \\u662F\\u4E00\\u4E2A\\u6D41\\u884C\\u7684\\u7B2C\\u4E09\\u65B9\\u5E93\\uFF0C\\u5B83\\u7B80\\u5316\\u4E86 API \\u8C03\\u7528\\u5E76\\u63D0\\u4F9B\\u4E86\\u9644\\u52A0\\u529F\\u80FD\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"JavaScript \\u4E2D\\u8C03\\u7528 API \\u7684\\u4E0D\\u540C\\u65B9\\u6CD5\"}),`\n`,(0,n.jsx)(e.h3,{children:\"XMLHttpRequest\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u662F\\u5728 JavaScript \\u4E2D\\u8C03\\u7528 API \\u7684\\u4F20\\u7EDF\\u65B9\\u6CD5\\u3002\\u4E0E\\u73B0\\u4EE3\\u65B9\\u6CD5\\u76F8\\u6BD4\\uFF0C\\u5B83\\u66F4\\u5197\\u957F\\uFF0C\\u9700\\u8981\\u66F4\\u591A\\u4EE3\\u7801\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.onreadystatechange = function () {\n  if (xhr.readyState === 4 && xhr.status === 200) {\n    console.log(JSON.parse(xhr.responseText));\n  }\n};\nxhr.send();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Fetch API\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"fetch\"}),\" \\u662F\\u4E00\\u79CD\\u73B0\\u4EE3\\u4E14\\u66F4\\u65B9\\u4FBF\\u7684\\u8C03\\u7528 API \\u7684\\u65B9\\u6CD5\\u3002\\u5B83\\u8FD4\\u56DE\\u4E00\\u4E2A promise\\uFF0C\\u4F7F\\u5904\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u66F4\\u5BB9\\u6613\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) =>\n    console.error('There was a problem with the fetch operation:', error),\n  );\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Axios\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Axios\"}),\" \\u662F\\u4E00\\u4E2A\\u6D41\\u884C\\u7684\\u7B2C\\u4E09\\u65B9\\u5E93\\uFF0C\\u5B83\\u7B80\\u5316\\u4E86 API \\u8C03\\u7528\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u989D\\u5916\\u7684\\u529F\\u80FD\\uFF0C\\u5982\\u62E6\\u622A\\u5668\\u3001\\u81EA\\u52A8 JSON \\u8F6C\\u6362\\u7B49\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`axios\n  .get('https://api.example.com/data')\n  .then((response) => console.log(response.data))\n  .catch((error) =>\n    console.error('There was a problem with the Axios request:', error),\n  );\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"jQuery AJAX\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"jQuery\"}),\" \\u8FD8\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"ajax\"}),\" \\u65B9\\u6CD5\\u6765\\u8C03\\u7528 API\\u3002\\u8FD9\\u79CD\\u65B9\\u6CD5\\u5728\\u73B0\\u4EE3\\u5F00\\u53D1\\u4E2D\\u4E0D\\u592A\\u5E38\\u89C1\\uFF0C\\u4F46\\u5728\\u4E00\\u4E9B\\u9057\\u7559\\u9879\\u76EE\\u4E2D\\u4ECD\\u7136\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`$.ajax({\n  url: 'https://api.example.com/data',\n  method: 'GET',\n  success: function (data) {\n    console.log(data);\n  },\n  error: function (error) {\n    console.error('There was a problem with the jQuery AJAX request:', error);\n  },\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/XMLHttpRequest\",children:\"MDN Web Docs: XMLHttpRequest\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\",children:\"MDN Web Docs: Fetch API\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/axios/axios\",children:\"Axios GitHub Repository\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://api.jquery.com/jquery.ajax/\",children:\"jQuery AJAX Documentation\"})}),`\n`]})]})}function P(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(l,r)})):l(r)}var w=P;return f(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var j=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var o in e)c(r,o,{get:e[o],enumerable:!0})},s=(r,e,o,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of x(e))!A.call(r,t)&&t!==o&&c(r,t,{get:()=>e[t],enumerable:!(h=u(e,t))||h.enumerable});return r};var g=(r,e,o)=>(o=r!=null?p(m(r)):{},s(e||!r||!r.__esModule?c(o,\"default\",{value:r,enumerable:!0}):o,r)),I=r=>s(c({},\"__esModule\",{value:!0}),r);var i=j((M,a)=>{a.exports=_jsx_runtime});var w={};f(w,{default:()=>d,frontmatter:()=>P});var n=g(i()),P={title:\"JavaScript \\u4E2D\\u8C03\\u7528 API \\u7684\\u4E0D\\u540C\\u65B9\\u6CD5\\u662F\\u4EC0\\u4E48\\uFF1F\"};function l(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u591A\\u79CD\\u65B9\\u6CD5\\u8C03\\u7528 API\\u3002\\u6700\\u5E38\\u89C1\\u7684\\u65B9\\u6CD5\\u662F \",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"fetch\"}),\" \\u548C\\u7B2C\\u4E09\\u65B9\\u5E93\\uFF0C\\u5982 \",(0,n.jsx)(e.code,{children:\"Axios\"}),\"\\u3002\",(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u662F\\u4F20\\u7EDF\\u65B9\\u6CD5\\uFF0C\\u4F46\\u66F4\\u5197\\u957F\\u3002\",(0,n.jsx)(e.code,{children:\"fetch\"}),\" \\u662F\\u73B0\\u4EE3\\u65B9\\u6CD5\\uFF0C\\u8FD4\\u56DE promise\\uFF0C\\u4F7F\\u5176\\u66F4\\u6613\\u4E8E\\u4F7F\\u7528\\u3002\",(0,n.jsx)(e.code,{children:\"Axios\"}),\" \\u662F\\u4E00\\u4E2A\\u6D41\\u884C\\u7684\\u7B2C\\u4E09\\u65B9\\u5E93\\uFF0C\\u5B83\\u7B80\\u5316\\u4E86 API \\u8C03\\u7528\\u5E76\\u63D0\\u4F9B\\u4E86\\u9644\\u52A0\\u529F\\u80FD\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"JavaScript \\u4E2D\\u8C03\\u7528 API \\u7684\\u4E0D\\u540C\\u65B9\\u6CD5\"}),`\n`,(0,n.jsx)(e.h3,{children:\"XMLHttpRequest\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"XMLHttpRequest\"}),\" \\u662F\\u5728 JavaScript \\u4E2D\\u8C03\\u7528 API \\u7684\\u4F20\\u7EDF\\u65B9\\u6CD5\\u3002\\u4E0E\\u73B0\\u4EE3\\u65B9\\u6CD5\\u76F8\\u6BD4\\uFF0C\\u5B83\\u66F4\\u5197\\u957F\\uFF0C\\u9700\\u8981\\u66F4\\u591A\\u4EE3\\u7801\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const xhr = new XMLHttpRequest();\nxhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);\nxhr.onreadystatechange = function () {\n  if (xhr.readyState === 4 && xhr.status === 200) {\n    console.log(JSON.parse(xhr.responseText));\n  }\n};\nxhr.send();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Fetch API\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"fetch\"}),\" \\u662F\\u4E00\\u79CD\\u73B0\\u4EE3\\u4E14\\u66F4\\u65B9\\u4FBF\\u7684\\u8C03\\u7528 API \\u7684\\u65B9\\u6CD5\\u3002\\u5B83\\u8FD4\\u56DE\\u4E00\\u4E2A promise\\uFF0C\\u4F7F\\u5904\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u66F4\\u5BB9\\u6613\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => {\n    if (!response.ok) {\n      throw new Error('Network response was not ok');\n    }\n    return response.json();\n  })\n  .then((data) => console.log(data))\n  .catch((error) =>\n    console.error('There was a problem with the fetch operation:', error),\n  );\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Axios\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Axios\"}),\" \\u662F\\u4E00\\u4E2A\\u6D41\\u884C\\u7684\\u7B2C\\u4E09\\u65B9\\u5E93\\uFF0C\\u5B83\\u7B80\\u5316\\u4E86 API \\u8C03\\u7528\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u989D\\u5916\\u7684\\u529F\\u80FD\\uFF0C\\u5982\\u62E6\\u622A\\u5668\\u3001\\u81EA\\u52A8 JSON \\u8F6C\\u6362\\u7B49\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`axios\n  .get('https://api.example.com/data')\n  .then((response) => console.log(response.data))\n  .catch((error) =>\n    console.error('There was a problem with the Axios request:', error),\n  );\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"jQuery AJAX\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"jQuery\"}),\" \\u8FD8\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"ajax\"}),\" \\u65B9\\u6CD5\\u6765\\u8C03\\u7528 API\\u3002\\u8FD9\\u79CD\\u65B9\\u6CD5\\u5728\\u73B0\\u4EE3\\u5F00\\u53D1\\u4E2D\\u4E0D\\u592A\\u5E38\\u89C1\\uFF0C\\u4F46\\u5728\\u4E00\\u4E9B\\u9057\\u7559\\u9879\\u76EE\\u4E2D\\u4ECD\\u7136\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`$.ajax({\n  url: 'https://api.example.com/data',\n  method: 'GET',\n  success: function (data) {\n    console.log(data);\n  },\n  error: function (error) {\n    console.error('There was a problem with the jQuery AJAX request:', error);\n  },\n});\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/XMLHttpRequest\",children:\"MDN Web Docs: XMLHttpRequest\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\",children:\"MDN Web Docs: Fetch API\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/axios/axios\",children:\"Axios GitHub Repository\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://api.jquery.com/jquery.ajax/\",children:\"jQuery AJAX Documentation\"})}),`\n`]})]})}function d(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(l,{...r})}):l(r)}return I(w);})();\n;return Component;"
 }
\ No newline at end of file
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 21261653c..16f611311 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
@@ -30,5 +30,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var w=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),g=(i,e)=>{for(var t in e)r(i,t,{get:e[t],enumerable:!0})},l=(i,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!b.call(i,o)&&o!==t&&r(i,o,{get:()=>e[o],enumerable:!(s=p(e,o))||s.enumerable});return i};var f=(i,e,t)=>(t=i!=null?d(m(i)):{},l(e||!i||!i.__esModule?r(t,\"default\",{value:i,enumerable:!0}):t,i)),y=i=>l(r({},\"__esModule\",{value:!0}),i);var a=w((C,c)=>{c.exports=_jsx_runtime});var S={};g(S,{default:()=>k,frontmatter:()=>x});var n=f(a()),x={title:\"What are the different ways to visually hide content (and make it available only for screen readers)?\"};function h(i){let e=Object.assign({p:\"p\",h2:\"h2\",code:\"code\",a:\"a\",blockquote:\"blockquote\",strong:\"strong\",ul:\"ul\",li:\"li\",h3:\"h3\",pre:\"pre\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"These techniques are related to accessibility (a11y).\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Small/zero size\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"width: 1px; height: 1px\"}),\" and a combination of using CSS clip to make the element take up (barely any) space on the screen at all.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"width: 0; height; 0\"}),\" is not recommended because search engines might penalize this thinking it has a malicious intention, like keyword stuffing.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Absolute positioning\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"position: absolute; left: -99999px\"}),\" will position an element way outside of the screen. However, as per \",(0,n.jsx)(e.a,{href:\"https://webaim.org/techniques/css/invisiblecontent/\",children:\"WebAIM's article\"}),\":\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"Navigable elements, such as links and form controls, should not be hidden off-screen. They would still be navigable by sighted keyboard users, but would not be visible to them, unless they are styled to become visible when they receive keyboard focus.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Use this only when your contents contain only text.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Text indentation\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"text-indent: -9999px\"}),\". This only works on text within the \",(0,n.jsx)(e.code,{children:\"block\"}),\" elements. Similar to the absolute positioning technique above, focusable elements given this style will still be focusable, causing confusion for sighted users who use keyboard navigation.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Incorrect ways\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The following ways are incorrect because they hide content from the user \",(0,n.jsx)(e.strong,{children:\"AND\"}),\" screen readers, which is incorrect if the purpose is to expose to screen readers only.\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"display: none\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"visibility: hidden\"})}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"hidden\"}),\" attribute\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Techniques in the wild\"}),`\n`,(0,n.jsx)(e.p,{children:\"Ideally, it is recommended to combine the above approaches to make sure it works properly in all browsers.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Instead of implementing your own way to remove an element from the rendering tree and the a11y tree, you are recommended to use one of the following approaches from mature CSS frameworks, which have been battle-tested on many websites.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Tailwind CSS\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Bootstrap CSS\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.visually-hidden,\n.visually-hidden-focusable:not(:focus):not(:focus-within) {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"References\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://webaim.org/techniques/css/invisiblecontent/\",children:\"CSS in Action - Invisible Content Just for Screen Reader Users\"})}),`\n`]})]})}function v(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(h,i)})):h(i)}var k=v;return y(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var f=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),y=(i,e)=>{for(var t in e)r(i,t,{get:e[t],enumerable:!0})},l=(i,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!w.call(i,o)&&o!==t&&r(i,o,{get:()=>e[o],enumerable:!(s=u(e,o))||s.enumerable});return i};var g=(i,e,t)=>(t=i!=null?p(b(i)):{},l(e||!i||!i.__esModule?r(t,\"default\",{value:i,enumerable:!0}):t,i)),x=i=>l(r({},\"__esModule\",{value:!0}),i);var a=f((q,c)=>{c.exports=_jsx_runtime});var k={};y(k,{default:()=>d,frontmatter:()=>v});var n=g(a()),v={title:\"What are the different ways to visually hide content (and make it available only for screen readers)?\"};function h(i){let e={a:\"a\",blockquote:\"blockquote\",code:\"code\",h2:\"h2\",h3:\"h3\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"These techniques are related to accessibility (a11y).\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Small/zero size\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"width: 1px; height: 1px\"}),\" and a combination of using CSS clip to make the element take up (barely any) space on the screen at all.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"width: 0; height; 0\"}),\" is not recommended because search engines might penalize this thinking it has a malicious intention, like keyword stuffing.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Absolute positioning\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"position: absolute; left: -99999px\"}),\" will position an element way outside of the screen. However, as per \",(0,n.jsx)(e.a,{href:\"https://webaim.org/techniques/css/invisiblecontent/\",children:\"WebAIM's article\"}),\":\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"Navigable elements, such as links and form controls, should not be hidden off-screen. They would still be navigable by sighted keyboard users, but would not be visible to them, unless they are styled to become visible when they receive keyboard focus.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Use this only when your contents contain only text.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Text indentation\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"text-indent: -9999px\"}),\". This only works on text within the \",(0,n.jsx)(e.code,{children:\"block\"}),\" elements. Similar to the absolute positioning technique above, focusable elements given this style will still be focusable, causing confusion for sighted users who use keyboard navigation.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Incorrect ways\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The following ways are incorrect because they hide content from the user \",(0,n.jsx)(e.strong,{children:\"AND\"}),\" screen readers, which is incorrect if the purpose is to expose to screen readers only.\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"display: none\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"visibility: hidden\"})}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"hidden\"}),\" attribute\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Techniques in the wild\"}),`\n`,(0,n.jsx)(e.p,{children:\"Ideally, it is recommended to combine the above approaches to make sure it works properly in all browsers.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Instead of implementing your own way to remove an element from the rendering tree and the a11y tree, you are recommended to use one of the following approaches from mature CSS frameworks, which have been battle-tested on many websites.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Tailwind CSS\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Bootstrap CSS\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.visually-hidden,\n.visually-hidden-focusable:not(:focus):not(:focus-within) {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"References\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://webaim.org/techniques/css/invisiblecontent/\",children:\"CSS in Action - Invisible Content Just for Screen Reader Users\"})}),`\n`]})]})}function d(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(h,{...i})}):h(i)}return x(k);})();\n;return Component;"
 }
\ No newline at end of file
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 ae51fbd16..83205c199 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
@@ -30,5 +30,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var b=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),f=(o,e)=>{for(var a in e)s(o,a,{get:e[a],enumerable:!0})},t=(o,e,a,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of h(e))!v.call(o,i)&&i!==a&&s(o,i,{get:()=>e[i],enumerable:!(r=p(e,i))||r.enumerable});return o};var g=(o,e,a)=>(a=o!=null?m(u(o)):{},t(e||!o||!o.__esModule?s(a,\"default\",{value:o,enumerable:!0}):a,o)),x=o=>t(s({},\"__esModule\",{value:!0}),o);var c=b((z,d)=>{d.exports=_jsx_runtime});var j={};f(j,{default:()=>S,frontmatter:()=>q});var n=g(c()),q={title:\"Quais s\\xE3o as diferentes maneiras de esconder conte\\xFAdo visualmente (e torn\\xE1-lo dispon\\xEDvel apenas para leitores de tela)?\"};function l(o){let e=Object.assign({p:\"p\",h2:\"h2\",code:\"code\",a:\"a\",blockquote:\"blockquote\",ul:\"ul\",li:\"li\",h3:\"h3\",pre:\"pre\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Essas t\\xE9cnicas est\\xE3o relacionadas \\xE0 acessibilidade (a11y).\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Tamanho pequeno/zero\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"width: 1px; height: 1px\"}),\" e uma combina\\xE7\\xE3o do uso do clip do CSS para fazer com que o elemento ocupe (quase nenhum) espa\\xE7o na tela.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Usar a \",(0,n.jsx)(e.code,{children:\"largura: 0; altura; 0\"}),\" n\\xE3o \\xE9 recomendado porque os motores de busca podem penalizar isso, pensando que tem uma inten\\xE7\\xE3o maliciosa, como encher de palavras-chave (keyword stuffing).\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Posicionamento absoluto\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"position: absolute; left: -99999px\"}),\" posicionar\\xE1 um elemento fora da tela. No entanto, de acordo com \",(0,n.jsx)(e.a,{href:\"https://webaim.org/techniques/css/invisiblecontent/\",children:\"o artigo da WebAIM\"}),\":\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"Elementos naveg\\xE1veis, como links e controles de formul\\xE1rio, n\\xE3o devem ser escondidos fora da tela. Eles ainda seriam naveg\\xE1veis por usu\\xE1rios de teclado com vis\\xE3o, mas n\\xE3o seriam vis\\xEDveis para eles, a menos que sejam estilizados para se tornarem vis\\xEDveis quando receberem foco do teclado.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Use isso apenas quando seus conte\\xFAdos contiverem apenas texto.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Indenta\\xE7\\xE3o de texto\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"text-indent: -9999px\"}),\". Isso s\\xF3 funciona em texto dentro dos elementos \",(0,n.jsx)(e.code,{children:\"block\"}),\". Semelhante \\xE0 t\\xE9cnica de posicionamento absoluto mencionada acima, os elementos focaliz\\xE1veis com esse estilo ainda poder\\xE3o ser focalizados, causando confus\\xE3o para os usu\\xE1rios com vis\\xE3o que usam a navega\\xE7\\xE3o por teclado.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Formas incorretas\"}),`\n`,(0,n.jsx)(e.p,{children:\"As seguintes maneiras est\\xE3o incorretas porque escondem o conte\\xFAdo do usu\\xE1rio E dos leitores de tela, o que \\xE9 incorreto se o objetivo \\xE9 expor apenas aos leitores de tela.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"display: none\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"visibility: hidden\"})}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"hidden\"}),\" attribute\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"T\\xE9cnicas no mundo real\"}),`\n`,(0,n.jsx)(e.p,{children:\"Idealmente, \\xE9 recomendado combinar as abordagens acima para garantir que funcione corretamente em todos os navegadores.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Em vez de implementar sua pr\\xF3pria maneira de remover um elemento da \\xE1rvore de renderiza\\xE7\\xE3o e da \\xE1rvore de acessibilidade (a11y), recomenda-se usar uma das seguintes abordagens de frameworks CSS maduros, que foram testadas em muitos sites.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Tailwind CSS\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.sr-only {\n  posi\\xE7\\xE3o: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: oculto;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Bootstrap CSS\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.visually-hidden,\n.visually-hidden-focusable:not(:focus):not(:focus-within) {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://webaim.org/techniques/css/invisiblecontent/\",children:\"CSS em A\\xE7\\xE3o - Conte\\xFAdo invis\\xEDvel apenas para usu\\xE1rios do Leitor de tela\"})}),`\n`]})]})}function w(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(l,o)})):l(o)}var S=w;return x(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),g=(o,e)=>{for(var a in e)s(o,a,{get:e[a],enumerable:!0})},t=(o,e,a,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!f.call(o,i)&&i!==a&&s(o,i,{get:()=>e[i],enumerable:!(r=h(e,i))||r.enumerable});return o};var x=(o,e,a)=>(a=o!=null?p(v(o)):{},t(e||!o||!o.__esModule?s(a,\"default\",{value:o,enumerable:!0}):a,o)),q=o=>t(s({},\"__esModule\",{value:!0}),o);var c=b((z,d)=>{d.exports=_jsx_runtime});var S={};g(S,{default:()=>m,frontmatter:()=>w});var n=x(c()),w={title:\"Quais s\\xE3o as diferentes maneiras de esconder conte\\xFAdo visualmente (e torn\\xE1-lo dispon\\xEDvel apenas para leitores de tela)?\"};function l(o){let e={a:\"a\",blockquote:\"blockquote\",code:\"code\",h2:\"h2\",h3:\"h3\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Essas t\\xE9cnicas est\\xE3o relacionadas \\xE0 acessibilidade (a11y).\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Tamanho pequeno/zero\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"width: 1px; height: 1px\"}),\" e uma combina\\xE7\\xE3o do uso do clip do CSS para fazer com que o elemento ocupe (quase nenhum) espa\\xE7o na tela.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Usar a \",(0,n.jsx)(e.code,{children:\"largura: 0; altura; 0\"}),\" n\\xE3o \\xE9 recomendado porque os motores de busca podem penalizar isso, pensando que tem uma inten\\xE7\\xE3o maliciosa, como encher de palavras-chave (keyword stuffing).\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Posicionamento absoluto\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"position: absolute; left: -99999px\"}),\" posicionar\\xE1 um elemento fora da tela. No entanto, de acordo com \",(0,n.jsx)(e.a,{href:\"https://webaim.org/techniques/css/invisiblecontent/\",children:\"o artigo da WebAIM\"}),\":\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"Elementos naveg\\xE1veis, como links e controles de formul\\xE1rio, n\\xE3o devem ser escondidos fora da tela. Eles ainda seriam naveg\\xE1veis por usu\\xE1rios de teclado com vis\\xE3o, mas n\\xE3o seriam vis\\xEDveis para eles, a menos que sejam estilizados para se tornarem vis\\xEDveis quando receberem foco do teclado.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Use isso apenas quando seus conte\\xFAdos contiverem apenas texto.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Indenta\\xE7\\xE3o de texto\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"text-indent: -9999px\"}),\". Isso s\\xF3 funciona em texto dentro dos elementos \",(0,n.jsx)(e.code,{children:\"block\"}),\". Semelhante \\xE0 t\\xE9cnica de posicionamento absoluto mencionada acima, os elementos focaliz\\xE1veis com esse estilo ainda poder\\xE3o ser focalizados, causando confus\\xE3o para os usu\\xE1rios com vis\\xE3o que usam a navega\\xE7\\xE3o por teclado.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Formas incorretas\"}),`\n`,(0,n.jsx)(e.p,{children:\"As seguintes maneiras est\\xE3o incorretas porque escondem o conte\\xFAdo do usu\\xE1rio E dos leitores de tela, o que \\xE9 incorreto se o objetivo \\xE9 expor apenas aos leitores de tela.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"display: none\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"visibility: hidden\"})}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"hidden\"}),\" attribute\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"T\\xE9cnicas no mundo real\"}),`\n`,(0,n.jsx)(e.p,{children:\"Idealmente, \\xE9 recomendado combinar as abordagens acima para garantir que funcione corretamente em todos os navegadores.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Em vez de implementar sua pr\\xF3pria maneira de remover um elemento da \\xE1rvore de renderiza\\xE7\\xE3o e da \\xE1rvore de acessibilidade (a11y), recomenda-se usar uma das seguintes abordagens de frameworks CSS maduros, que foram testadas em muitos sites.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Tailwind CSS\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.sr-only {\n  posi\\xE7\\xE3o: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: oculto;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Bootstrap CSS\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.visually-hidden,\n.visually-hidden-focusable:not(:focus):not(:focus-within) {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://webaim.org/techniques/css/invisiblecontent/\",children:\"CSS em A\\xE7\\xE3o - Conte\\xFAdo invis\\xEDvel apenas para usu\\xE1rios do Leitor de tela\"})}),`\n`]})]})}function m(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(l,{...o})}):l(o)}return q(S);})();\n;return Component;"
 }
\ No newline at end of file
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 69d61ee0f..f603ea7c8 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
@@ -30,5 +30,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),b=(i,n)=>{for(var t in n)c(i,t,{get:n[t],enumerable:!0})},l=(i,n,t,d)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of u(n))!g.call(i,r)&&r!==t&&c(i,r,{get:()=>n[r],enumerable:!(d=p(n,r))||d.enumerable});return i};var w=(i,n,t)=>(t=i!=null?a(m(i)):{},l(n||!i||!i.__esModule?c(t,\"default\",{value:i,enumerable:!0}):t,i)),f=i=>l(c({},\"__esModule\",{value:!0}),i);var o=x((_,h)=>{h.exports=_jsx_runtime});var C={};b(C,{default:()=>y,frontmatter:()=>S});var e=w(o()),S={title:\"\\u6709\\u54EA\\u4E9B\\u4E0D\\u540C\\u7684\\u65B9\\u6CD5\\u53EF\\u4EE5\\u9690\\u85CF\\u5185\\u5BB9\\uFF08\\u4F7F\\u5176\\u4EC5\\u5BF9\\u5C4F\\u5E55\\u9605\\u8BFB\\u5668\\u53EF\\u7528\\uFF09\\uFF1F\"};function s(i){let n=Object.assign({p:\"p\",h2:\"h2\",code:\"code\",a:\"a\",blockquote:\"blockquote\",strong:\"strong\",ul:\"ul\",li:\"li\",h3:\"h3\",pre:\"pre\"},i.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.p,{children:\"\\u8FD9\\u4E9B\\u6280\\u672F\\u4E0E\\u53EF\\u8BBF\\u95EE\\u6027 (a11y) \\u76F8\\u5173\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5C0F/\\u96F6\\u5C3A\\u5BF8\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"width: 1px; height: 1px\"}),\" \\u5E76\\u7ED3\\u5408\\u4F7F\\u7528 CSS clip \\u4F7F\\u5143\\u7D20\\u5728\\u5C4F\\u5E55\\u4E0A\\u51E0\\u4E4E\\u4E0D\\u5360\\u7528\\u4EFB\\u4F55\\u7A7A\\u95F4\\u3002\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E0D\\u5EFA\\u8BAE\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"width: 0; height; 0\"}),\"\\uFF0C\\u56E0\\u4E3A\\u641C\\u7D22\\u5F15\\u64CE\\u53EF\\u80FD\\u4F1A\\u56E0\\u6B64\\u53D7\\u5230\\u60E9\\u7F5A\\uFF0C\\u8BA4\\u4E3A\\u5B83\\u6709\\u6076\\u610F\\u610F\\u56FE\\uFF0C\\u4F8B\\u5982\\u5173\\u952E\\u8BCD\\u5806\\u780C\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7EDD\\u5BF9\\u5B9A\\u4F4D\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"position: absolute; left: -99999px\"}),\" \\u5C06\\u628A\\u5143\\u7D20\\u5B9A\\u4F4D\\u5230\\u5C4F\\u5E55\\u4E4B\\u5916\\u3002\\u4F46\\u662F\\uFF0C\\u6839\\u636E \",(0,e.jsx)(n.a,{href:\"https://webaim.org/techniques/css/invisiblecontent/\",children:\"WebAIM \\u7684\\u6587\\u7AE0\"}),\"\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.blockquote,{children:[`\n`,(0,e.jsx)(n.p,{children:\"\\u53EF\\u5BFC\\u822A\\u5143\\u7D20\\uFF08\\u4F8B\\u5982\\u94FE\\u63A5\\u548C\\u8868\\u5355\\u63A7\\u4EF6\\uFF09\\u4E0D\\u5E94\\u9690\\u85CF\\u5728\\u5C4F\\u5E55\\u5916\\u3002\\u6709\\u89C6\\u89C9\\u7684\\u7528\\u6237\\u4ECD\\u7136\\u53EF\\u4EE5\\u4F7F\\u7528\\u952E\\u76D8\\u5BFC\\u822A\\u5B83\\u4EEC\\uFF0C\\u4F46\\u9664\\u975E\\u5BF9\\u5B83\\u4EEC\\u8FDB\\u884C\\u6837\\u5F0F\\u8BBE\\u7F6E\\u4EE5\\u4F7F\\u5176\\u5728\\u63A5\\u6536\\u5230\\u952E\\u76D8\\u7126\\u70B9\\u65F6\\u53EF\\u89C1\\uFF0C\\u5426\\u5219\\u4ED6\\u4EEC\\u5C06\\u770B\\u4E0D\\u5230\\u5B83\\u4EEC\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EC5\\u5F53\\u60A8\\u7684\\u5185\\u5BB9\\u4EC5\\u5305\\u542B\\u6587\\u672C\\u65F6\\u624D\\u4F7F\\u7528\\u6B64\\u65B9\\u6CD5\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u6587\\u672C\\u7F29\\u8FDB\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"text-indent: -9999px\"}),\"\\u3002\\u8FD9\\u4EC5\\u9002\\u7528\\u4E8E \",(0,e.jsx)(n.code,{children:\"block\"}),\" \\u5143\\u7D20\\u4E2D\\u7684\\u6587\\u672C\\u3002\\u4E0E\\u4E0A\\u9762\\u7684\\u7EDD\\u5BF9\\u5B9A\\u4F4D\\u6280\\u672F\\u7C7B\\u4F3C\\uFF0C\\u7ED9\\u5B9A\\u6B64\\u6837\\u5F0F\\u7684\\u53EF\\u805A\\u7126\\u5143\\u7D20\\u4ECD\\u7136\\u53EF\\u4EE5\\u805A\\u7126\\uFF0C\\u8FD9\\u4F1A\\u7ED9\\u4F7F\\u7528\\u952E\\u76D8\\u5BFC\\u822A\\u7684\\u89C6\\u89C9\\u7528\\u6237\\u9020\\u6210\\u6DF7\\u6DC6\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u9519\\u8BEF\\u7684\\u65B9\\u6CD5\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4EE5\\u4E0B\\u65B9\\u6CD5\\u662F\\u9519\\u8BEF\\u7684\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u4F1A\\u5411\\u7528\\u6237 \",(0,e.jsx)(n.strong,{children:\"\\u548C\"}),\" \\u5C4F\\u5E55\\u9605\\u8BFB\\u5668\\u9690\\u85CF\\u5185\\u5BB9\\uFF0C\\u5982\\u679C\\u76EE\\u7684\\u662F\\u4EC5\\u5411\\u5C4F\\u5E55\\u9605\\u8BFB\\u5668\\u516C\\u5F00\\u5185\\u5BB9\\uFF0C\\u5219\\u8FD9\\u662F\\u4E0D\\u6B63\\u786E\\u7684\\u3002\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.code,{children:\"display: none\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.code,{children:\"visibility: hidden\"})}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"hidden\"}),\" \\u5C5E\\u6027\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5B9E\\u9645\\u5E94\\u7528\\u4E2D\\u7684\\u6280\\u672F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7406\\u60F3\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5EFA\\u8BAE\\u7ED3\\u5408\\u4E0A\\u8FF0\\u65B9\\u6CD5\\uFF0C\\u4EE5\\u786E\\u4FDD\\u5B83\\u5728\\u6240\\u6709\\u6D4F\\u89C8\\u5668\\u4E2D\\u90FD\\u80FD\\u6B63\\u5E38\\u5DE5\\u4F5C\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5EFA\\u8BAE\\u60A8\\u4F7F\\u7528\\u6210\\u719F CSS \\u6846\\u67B6\\u4E2D\\u7684\\u4EE5\\u4E0B\\u65B9\\u6CD5\\u4E4B\\u4E00\\uFF0C\\u800C\\u4E0D\\u662F\\u5B9E\\u73B0\\u60A8\\u81EA\\u5DF1\\u7684\\u4ECE\\u6E32\\u67D3\\u6811\\u548C a11y \\u6811\\u4E2D\\u5220\\u9664\\u5143\\u7D20\\u7684\\u65B9\\u6CD5\\uFF0C\\u8FD9\\u4E9B\\u65B9\\u6CD5\\u5DF2\\u7ECF\\u5728\\u8BB8\\u591A\\u7F51\\u7AD9\\u4E0A\\u7ECF\\u8FC7\\u4E86\\u5B9E\\u6218\\u6D4B\\u8BD5\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Tailwind CSS\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-css\",children:`.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Bootstrap CSS\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-css\",children:`.visually-hidden,\n.visually-hidden-focusable:not(:focus):not(:focus-within) {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u53C2\\u8003\\u8D44\\u6599\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://webaim.org/techniques/css/invisiblecontent/\",children:\"CSS in Action - Invisible Content Just for Screen Reader Users\"})}),`\n`]})]})}function v(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,Object.assign({},i,{children:(0,e.jsx)(s,i)})):s(i)}var y=v;return f(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var a=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),w=(i,n)=>{for(var t in n)c(i,t,{get:n[t],enumerable:!0})},l=(i,n,t,d)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of m(n))!g.call(i,r)&&r!==t&&c(i,r,{get:()=>n[r],enumerable:!(d=u(n,r))||d.enumerable});return i};var f=(i,n,t)=>(t=i!=null?a(x(i)):{},l(n||!i||!i.__esModule?c(t,\"default\",{value:i,enumerable:!0}):t,i)),S=i=>l(c({},\"__esModule\",{value:!0}),i);var o=b((_,h)=>{h.exports=_jsx_runtime});var y={};w(y,{default:()=>p,frontmatter:()=>v});var e=f(o()),v={title:\"\\u6709\\u54EA\\u4E9B\\u4E0D\\u540C\\u7684\\u65B9\\u6CD5\\u53EF\\u4EE5\\u9690\\u85CF\\u5185\\u5BB9\\uFF08\\u4F7F\\u5176\\u4EC5\\u5BF9\\u5C4F\\u5E55\\u9605\\u8BFB\\u5668\\u53EF\\u7528\\uFF09\\uFF1F\"};function s(i){let n={a:\"a\",blockquote:\"blockquote\",code:\"code\",h2:\"h2\",h3:\"h3\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.p,{children:\"\\u8FD9\\u4E9B\\u6280\\u672F\\u4E0E\\u53EF\\u8BBF\\u95EE\\u6027 (a11y) \\u76F8\\u5173\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5C0F/\\u96F6\\u5C3A\\u5BF8\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"width: 1px; height: 1px\"}),\" \\u5E76\\u7ED3\\u5408\\u4F7F\\u7528 CSS clip \\u4F7F\\u5143\\u7D20\\u5728\\u5C4F\\u5E55\\u4E0A\\u51E0\\u4E4E\\u4E0D\\u5360\\u7528\\u4EFB\\u4F55\\u7A7A\\u95F4\\u3002\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E0D\\u5EFA\\u8BAE\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"width: 0; height; 0\"}),\"\\uFF0C\\u56E0\\u4E3A\\u641C\\u7D22\\u5F15\\u64CE\\u53EF\\u80FD\\u4F1A\\u56E0\\u6B64\\u53D7\\u5230\\u60E9\\u7F5A\\uFF0C\\u8BA4\\u4E3A\\u5B83\\u6709\\u6076\\u610F\\u610F\\u56FE\\uFF0C\\u4F8B\\u5982\\u5173\\u952E\\u8BCD\\u5806\\u780C\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7EDD\\u5BF9\\u5B9A\\u4F4D\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"position: absolute; left: -99999px\"}),\" \\u5C06\\u628A\\u5143\\u7D20\\u5B9A\\u4F4D\\u5230\\u5C4F\\u5E55\\u4E4B\\u5916\\u3002\\u4F46\\u662F\\uFF0C\\u6839\\u636E \",(0,e.jsx)(n.a,{href:\"https://webaim.org/techniques/css/invisiblecontent/\",children:\"WebAIM \\u7684\\u6587\\u7AE0\"}),\"\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.blockquote,{children:[`\n`,(0,e.jsx)(n.p,{children:\"\\u53EF\\u5BFC\\u822A\\u5143\\u7D20\\uFF08\\u4F8B\\u5982\\u94FE\\u63A5\\u548C\\u8868\\u5355\\u63A7\\u4EF6\\uFF09\\u4E0D\\u5E94\\u9690\\u85CF\\u5728\\u5C4F\\u5E55\\u5916\\u3002\\u6709\\u89C6\\u89C9\\u7684\\u7528\\u6237\\u4ECD\\u7136\\u53EF\\u4EE5\\u4F7F\\u7528\\u952E\\u76D8\\u5BFC\\u822A\\u5B83\\u4EEC\\uFF0C\\u4F46\\u9664\\u975E\\u5BF9\\u5B83\\u4EEC\\u8FDB\\u884C\\u6837\\u5F0F\\u8BBE\\u7F6E\\u4EE5\\u4F7F\\u5176\\u5728\\u63A5\\u6536\\u5230\\u952E\\u76D8\\u7126\\u70B9\\u65F6\\u53EF\\u89C1\\uFF0C\\u5426\\u5219\\u4ED6\\u4EEC\\u5C06\\u770B\\u4E0D\\u5230\\u5B83\\u4EEC\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EC5\\u5F53\\u60A8\\u7684\\u5185\\u5BB9\\u4EC5\\u5305\\u542B\\u6587\\u672C\\u65F6\\u624D\\u4F7F\\u7528\\u6B64\\u65B9\\u6CD5\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u6587\\u672C\\u7F29\\u8FDB\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"text-indent: -9999px\"}),\"\\u3002\\u8FD9\\u4EC5\\u9002\\u7528\\u4E8E \",(0,e.jsx)(n.code,{children:\"block\"}),\" \\u5143\\u7D20\\u4E2D\\u7684\\u6587\\u672C\\u3002\\u4E0E\\u4E0A\\u9762\\u7684\\u7EDD\\u5BF9\\u5B9A\\u4F4D\\u6280\\u672F\\u7C7B\\u4F3C\\uFF0C\\u7ED9\\u5B9A\\u6B64\\u6837\\u5F0F\\u7684\\u53EF\\u805A\\u7126\\u5143\\u7D20\\u4ECD\\u7136\\u53EF\\u4EE5\\u805A\\u7126\\uFF0C\\u8FD9\\u4F1A\\u7ED9\\u4F7F\\u7528\\u952E\\u76D8\\u5BFC\\u822A\\u7684\\u89C6\\u89C9\\u7528\\u6237\\u9020\\u6210\\u6DF7\\u6DC6\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u9519\\u8BEF\\u7684\\u65B9\\u6CD5\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4EE5\\u4E0B\\u65B9\\u6CD5\\u662F\\u9519\\u8BEF\\u7684\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u4F1A\\u5411\\u7528\\u6237 \",(0,e.jsx)(n.strong,{children:\"\\u548C\"}),\" \\u5C4F\\u5E55\\u9605\\u8BFB\\u5668\\u9690\\u85CF\\u5185\\u5BB9\\uFF0C\\u5982\\u679C\\u76EE\\u7684\\u662F\\u4EC5\\u5411\\u5C4F\\u5E55\\u9605\\u8BFB\\u5668\\u516C\\u5F00\\u5185\\u5BB9\\uFF0C\\u5219\\u8FD9\\u662F\\u4E0D\\u6B63\\u786E\\u7684\\u3002\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.code,{children:\"display: none\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.code,{children:\"visibility: hidden\"})}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"hidden\"}),\" \\u5C5E\\u6027\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5B9E\\u9645\\u5E94\\u7528\\u4E2D\\u7684\\u6280\\u672F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7406\\u60F3\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5EFA\\u8BAE\\u7ED3\\u5408\\u4E0A\\u8FF0\\u65B9\\u6CD5\\uFF0C\\u4EE5\\u786E\\u4FDD\\u5B83\\u5728\\u6240\\u6709\\u6D4F\\u89C8\\u5668\\u4E2D\\u90FD\\u80FD\\u6B63\\u5E38\\u5DE5\\u4F5C\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5EFA\\u8BAE\\u60A8\\u4F7F\\u7528\\u6210\\u719F CSS \\u6846\\u67B6\\u4E2D\\u7684\\u4EE5\\u4E0B\\u65B9\\u6CD5\\u4E4B\\u4E00\\uFF0C\\u800C\\u4E0D\\u662F\\u5B9E\\u73B0\\u60A8\\u81EA\\u5DF1\\u7684\\u4ECE\\u6E32\\u67D3\\u6811\\u548C a11y \\u6811\\u4E2D\\u5220\\u9664\\u5143\\u7D20\\u7684\\u65B9\\u6CD5\\uFF0C\\u8FD9\\u4E9B\\u65B9\\u6CD5\\u5DF2\\u7ECF\\u5728\\u8BB8\\u591A\\u7F51\\u7AD9\\u4E0A\\u7ECF\\u8FC7\\u4E86\\u5B9E\\u6218\\u6D4B\\u8BD5\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Tailwind CSS\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-css\",children:`.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Bootstrap CSS\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-css\",children:`.visually-hidden,\n.visually-hidden-focusable:not(:focus):not(:focus-within) {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u53C2\\u8003\\u8D44\\u6599\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://webaim.org/techniques/css/invisiblecontent/\",children:\"CSS in Action - Invisible Content Just for Screen Reader Users\"})}),`\n`]})]})}function p(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,{...i,children:(0,e.jsx)(s,{...i})}):s(i)}return S(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-metadata-fields-of-a-module/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-metadata-fields-of-a-module/en-US.json
index 646ebd959..244fa3310 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-metadata-fields-of-a-module/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-metadata-fields-of-a-module/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-metadata-fields-of-a-module/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var t=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),j=(i,e)=>{for(var d in e)s(i,d,{get:e[d],enumerable:!0})},o=(i,e,d,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!g.call(i,r)&&r!==d&&s(i,r,{get:()=>e[r],enumerable:!(c=m(e,r))||c.enumerable});return i};var y=(i,e,d)=>(d=i!=null?t(u(i)):{},o(e||!i||!i.__esModule?s(d,\"default\",{value:i,enumerable:!0}):d,i)),v=i=>o(s({},\"__esModule\",{value:!0}),i);var h=f((D,l)=>{l.exports=_jsx_runtime});var N={};j(N,{default:()=>x,frontmatter:()=>T});var n=y(h()),T={title:\"What are the metadata fields of a module?\"};function a(i){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Metadata fields of a module typically include information such as the module's name, version, description, author, license, and dependencies. These fields are often found in a \",(0,n.jsx)(e.code,{children:\"package.json\"}),\" file in JavaScript projects. For example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"name\": \"my-module\",\n  \"version\": \"1.0.0\",\n  \"description\": \"A sample module\",\n  \"author\": \"John Doe\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"express\": \"^4.17.1\"\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Metadata fields of a module\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Name\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"name\"}),\" field specifies the name of the module. It is used to identify the module in the package registry and when it is installed as a dependency.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"name\": \"my-module\"\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Version\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"version\"}),\" field indicates the current version of the module. It follows semantic versioning (semver) guidelines.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"version\": \"1.0.0\"\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Description\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"description\"}),\" field provides a brief summary of what the module does. This is useful for users browsing the package registry.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"description\": \"A sample module\"\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Author\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"author\"}),\" field specifies the name and contact information of the module's author.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"author\": \"John Doe\"\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"License\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"license\"}),\" field indicates the licensing terms under which the module can be used. Common licenses include MIT, Apache-2.0, and GPL-3.0.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"license\": \"MIT\"\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Dependencies\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"dependencies\"}),\" field lists other modules that the current module depends on to work correctly. Each dependency is specified with its name and version range.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"dependencies\": {\n    \"express\": \"^4.17.1\"\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"DevDependencies\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"devDependencies\"}),\" field lists modules that are only needed for development and testing, not for production.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"devDependencies\": {\n    \"jest\": \"^26.6.3\"\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Scripts\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"scripts\"}),\" field allows you to define script commands that can be run using \",(0,n.jsx)(e.code,{children:\"npm run <script-name>\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"scripts\": {\n    \"start\": \"node index.js\",\n    \"test\": \"jest\"\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Keywords\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"keywords\"}),\" field is an array of strings that help users find the module when searching in the package registry.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"keywords\": [\"sample\", \"module\", \"example\"]\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Repository\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"repository\"}),\" field provides information about the source code repository for the module.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/username/my-module.git\"\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Bugs\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"bugs\"}),\" field provides information on where to report issues with the module.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"bugs\": {\n    \"url\": \"https://github.com/username/my-module/issues\"\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Homepage\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"homepage\"}),\" field specifies the URL of the module's homepage.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"homepage\": \"https://github.com/username/my-module#readme\"\n}\n`})}),`\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://docs.npmjs.com/cli/v7/configuring-npm/package-json\",children:\"npm package.json documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://semver.org/\",children:\"Semantic Versioning\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nodejs.org/docs/latest/api/modules.html\",children:\"CommonJS Modules\"})}),`\n`]})]})}function w(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(a,i)})):a(i)}var x=w;return v(N);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var j=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),y=(i,e)=>{for(var d in e)s(i,d,{get:e[d],enumerable:!0})},o=(i,e,d,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!f.call(i,r)&&r!==d&&s(i,r,{get:()=>e[r],enumerable:!(c=p(e,r))||c.enumerable});return i};var v=(i,e,d)=>(d=i!=null?m(g(i)):{},o(e||!i||!i.__esModule?s(d,\"default\",{value:i,enumerable:!0}):d,i)),T=i=>o(s({},\"__esModule\",{value:!0}),i);var h=j((D,l)=>{l.exports=_jsx_runtime});var x={};y(x,{default:()=>t,frontmatter:()=>w});var n=v(h()),w={title:\"What are the metadata fields of a module?\"};function a(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Metadata fields of a module typically include information such as the module's name, version, description, author, license, and dependencies. These fields are often found in a \",(0,n.jsx)(e.code,{children:\"package.json\"}),\" file in JavaScript projects. For example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"name\": \"my-module\",\n  \"version\": \"1.0.0\",\n  \"description\": \"A sample module\",\n  \"author\": \"John Doe\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"express\": \"^4.17.1\"\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Metadata fields of a module\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Name\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"name\"}),\" field specifies the name of the module. It is used to identify the module in the package registry and when it is installed as a dependency.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"name\": \"my-module\"\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Version\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"version\"}),\" field indicates the current version of the module. It follows semantic versioning (semver) guidelines.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"version\": \"1.0.0\"\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Description\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"description\"}),\" field provides a brief summary of what the module does. This is useful for users browsing the package registry.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"description\": \"A sample module\"\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Author\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"author\"}),\" field specifies the name and contact information of the module's author.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"author\": \"John Doe\"\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"License\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"license\"}),\" field indicates the licensing terms under which the module can be used. Common licenses include MIT, Apache-2.0, and GPL-3.0.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"license\": \"MIT\"\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Dependencies\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"dependencies\"}),\" field lists other modules that the current module depends on to work correctly. Each dependency is specified with its name and version range.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"dependencies\": {\n    \"express\": \"^4.17.1\"\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"DevDependencies\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"devDependencies\"}),\" field lists modules that are only needed for development and testing, not for production.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"devDependencies\": {\n    \"jest\": \"^26.6.3\"\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Scripts\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"scripts\"}),\" field allows you to define script commands that can be run using \",(0,n.jsx)(e.code,{children:\"npm run <script-name>\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"scripts\": {\n    \"start\": \"node index.js\",\n    \"test\": \"jest\"\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Keywords\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"keywords\"}),\" field is an array of strings that help users find the module when searching in the package registry.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"keywords\": [\"sample\", \"module\", \"example\"]\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Repository\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"repository\"}),\" field provides information about the source code repository for the module.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/username/my-module.git\"\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Bugs\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"bugs\"}),\" field provides information on where to report issues with the module.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"bugs\": {\n    \"url\": \"https://github.com/username/my-module/issues\"\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Homepage\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"homepage\"}),\" field specifies the URL of the module's homepage.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"homepage\": \"https://github.com/username/my-module#readme\"\n}\n`})}),`\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://docs.npmjs.com/cli/v7/configuring-npm/package-json\",children:\"npm package.json documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://semver.org/\",children:\"Semantic Versioning\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nodejs.org/docs/latest/api/modules.html\",children:\"CommonJS Modules\"})}),`\n`]})]})}function t(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(a,{...i})}):a(i)}return T(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-metadata-fields-of-a-module/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-metadata-fields-of-a-module/zh-CN.json
index f335fc2fa..583275150 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-metadata-fields-of-a-module/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-metadata-fields-of-a-module/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-metadata-fields-of-a-module/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var t=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var j=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),x=(c,n)=>{for(var r in n)l(c,r,{get:n[r],enumerable:!0})},s=(c,n,r,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let d of m(n))!g.call(c,d)&&d!==r&&l(c,d,{get:()=>n[d],enumerable:!(i=p(n,d))||i.enumerable});return c};var N=(c,n,r)=>(r=c!=null?t(u(c)):{},s(n||!c||!c.__esModule?l(r,\"default\",{value:c,enumerable:!0}):r,c)),y=c=>s(l({},\"__esModule\",{value:!0}),c);var o=j((_,h)=>{h.exports=_jsx_runtime});var b={};x(b,{default:()=>D,frontmatter:()=>v});var e=N(o()),v={title:\"\\u6A21\\u5757\\u7684\\u5143\\u6570\\u636E\\u5B57\\u6BB5\\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(c){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},c.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u6A21\\u5757\\u7684\\u5143\\u6570\\u636E\\u5B57\\u6BB5\\u901A\\u5E38\\u5305\\u62EC\\u6A21\\u5757\\u7684\\u540D\\u79F0\\u3001\\u7248\\u672C\\u3001\\u63CF\\u8FF0\\u3001\\u4F5C\\u8005\\u3001\\u8BB8\\u53EF\\u8BC1\\u548C\\u4F9D\\u8D56\\u9879\\u7B49\\u4FE1\\u606F\\u3002\\u8FD9\\u4E9B\\u5B57\\u6BB5\\u901A\\u5E38\\u5728 JavaScript \\u9879\\u76EE\\u7684 \",(0,e.jsx)(n.code,{children:\"package.json\"}),\" \\u6587\\u4EF6\\u4E2D\\u627E\\u5230\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"name\": \"my-module\",\n  \"version\": \"1.0.0\",\n  \"description\": \"A sample module\",\n  \"author\": \"John Doe\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"express\": \"^4.17.1\"\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u6A21\\u5757\\u7684\\u5143\\u6570\\u636E\\u5B57\\u6BB5\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u540D\\u79F0\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"name\"}),\" \\u5B57\\u6BB5\\u6307\\u5B9A\\u6A21\\u5757\\u7684\\u540D\\u79F0\\u3002\\u5B83\\u7528\\u4E8E\\u5728\\u5305\\u6CE8\\u518C\\u8868\\u4E2D\\u6807\\u8BC6\\u6A21\\u5757\\uFF0C\\u4EE5\\u53CA\\u5C06\\u5176\\u4F5C\\u4E3A\\u4F9D\\u8D56\\u9879\\u5B89\\u88C5\\u65F6\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"name\": \"my-module\"\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7248\\u672C\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"version\"}),\" \\u5B57\\u6BB5\\u6307\\u793A\\u6A21\\u5757\\u7684\\u5F53\\u524D\\u7248\\u672C\\u3002\\u5B83\\u9075\\u5FAA\\u8BED\\u4E49\\u7248\\u672C\\u63A7\\u5236 (semver) \\u6307\\u5BFC\\u65B9\\u9488\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"version\": \"1.0.0\"\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u63CF\\u8FF0\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"description\"}),\" \\u5B57\\u6BB5\\u7B80\\u8981\\u6982\\u8FF0\\u4E86\\u6A21\\u5757\\u7684\\u529F\\u80FD\\u3002\\u8FD9\\u5BF9\\u4E8E\\u6D4F\\u89C8\\u5305\\u6CE8\\u518C\\u8868\\u7684\\u7528\\u6237\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"description\": \"A sample module\"\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F5C\\u8005\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"author\"}),\" \\u5B57\\u6BB5\\u6307\\u5B9A\\u6A21\\u5757\\u4F5C\\u8005\\u7684\\u59D3\\u540D\\u548C\\u8054\\u7CFB\\u4FE1\\u606F\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"author\": \"John Doe\"\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BB8\\u53EF\\u8BC1\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"license\"}),\" \\u5B57\\u6BB5\\u6307\\u793A\\u53EF\\u4EE5\\u4F7F\\u7528\\u8BE5\\u6A21\\u5757\\u7684\\u8BB8\\u53EF\\u6761\\u6B3E\\u3002 \\u5E38\\u89C1\\u7684\\u8BB8\\u53EF\\u8BC1\\u5305\\u62EC MIT\\u3001Apache-2.0 \\u548C GPL-3.0\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"license\": \"MIT\"\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F9D\\u8D56\\u9879\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"dependencies\"}),\" \\u5B57\\u6BB5\\u5217\\u51FA\\u4E86\\u5F53\\u524D\\u6A21\\u5757\\u6B63\\u5E38\\u5DE5\\u4F5C\\u6240\\u4F9D\\u8D56\\u7684\\u5176\\u4ED6\\u6A21\\u5757\\u3002 \\u6BCF\\u4E2A\\u4F9D\\u8D56\\u9879\\u90FD\\u4F7F\\u7528\\u5176\\u540D\\u79F0\\u548C\\u7248\\u672C\\u8303\\u56F4\\u6307\\u5B9A\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"dependencies\": {\n    \"express\": \"^4.17.1\"\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"DevDependencies\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"devDependencies\"}),\" \\u5B57\\u6BB5\\u5217\\u51FA\\u4E86\\u4EC5\\u7528\\u4E8E\\u5F00\\u53D1\\u548C\\u6D4B\\u8BD5\\u7684\\u6A21\\u5757\\uFF0C\\u800C\\u4E0D\\u662F\\u7528\\u4E8E\\u751F\\u4EA7\\u73AF\\u5883\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"devDependencies\": {\n    \"jest\": \"^26.6.3\"\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u811A\\u672C\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"scripts\"}),\" \\u5B57\\u6BB5\\u5141\\u8BB8\\u60A8\\u5B9A\\u4E49\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"npm run <script-name>\"}),\" \\u8FD0\\u884C\\u7684\\u811A\\u672C\\u547D\\u4EE4\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"scripts\": {\n    \"start\": \"node index.js\",\n    \"test\": \"jest\"\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5173\\u952E\\u8BCD\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"keywords\"}),\" \\u5B57\\u6BB5\\u662F\\u4E00\\u4E2A\\u5B57\\u7B26\\u4E32\\u6570\\u7EC4\\uFF0C\\u53EF\\u5E2E\\u52A9\\u7528\\u6237\\u5728\\u5305\\u6CE8\\u518C\\u8868\\u4E2D\\u641C\\u7D22\\u65F6\\u627E\\u5230\\u8BE5\\u6A21\\u5757\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"keywords\": [\"sample\", \"module\", \"example\"]\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B58\\u50A8\\u5E93\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"repository\"}),\" \\u5B57\\u6BB5\\u63D0\\u4F9B\\u6709\\u5173\\u6A21\\u5757\\u6E90\\u4EE3\\u7801\\u5B58\\u50A8\\u5E93\\u7684\\u4FE1\\u606F\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/username/my-module.git\"\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Bugs\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"bugs\"}),\" \\u5B57\\u6BB5\\u63D0\\u4F9B\\u6709\\u5173\\u5728\\u54EA\\u91CC\\u62A5\\u544A\\u6A21\\u5757\\u95EE\\u9898\\u7684\\u76F8\\u5173\\u4FE1\\u606F\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"bugs\": {\n    \"url\": \"https://github.com/username/my-module/issues\"\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E3B\\u9875\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"homepage\"}),\" \\u5B57\\u6BB5\\u6307\\u5B9A\\u6A21\\u5757\\u4E3B\\u9875\\u7684 URL\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"homepage\": \"https://github.com/username/my-module#readme\"\n}\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://docs.npmjs.com/cli/v7/configuring-npm/package-json\",children:\"npm package.json documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://semver.org/\",children:\"Semantic Versioning\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://nodejs.org/docs/latest/api/modules.html\",children:\"CommonJS Modules\"})}),`\n`]})]})}function f(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,Object.assign({},c,{children:(0,e.jsx)(a,c)})):a(c)}var D=f;return y(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var t=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var x=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),N=(c,n)=>{for(var r in n)l(c,r,{get:n[r],enumerable:!0})},h=(c,n,r,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let d of u(n))!j.call(c,d)&&d!==r&&l(c,d,{get:()=>n[d],enumerable:!(i=m(n,d))||i.enumerable});return c};var y=(c,n,r)=>(r=c!=null?t(g(c)):{},h(n||!c||!c.__esModule?l(r,\"default\",{value:c,enumerable:!0}):r,c)),v=c=>h(l({},\"__esModule\",{value:!0}),c);var o=x((_,s)=>{s.exports=_jsx_runtime});var D={};N(D,{default:()=>p,frontmatter:()=>f});var e=y(o()),f={title:\"\\u6A21\\u5757\\u7684\\u5143\\u6570\\u636E\\u5B57\\u6BB5\\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(c){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u6A21\\u5757\\u7684\\u5143\\u6570\\u636E\\u5B57\\u6BB5\\u901A\\u5E38\\u5305\\u62EC\\u6A21\\u5757\\u7684\\u540D\\u79F0\\u3001\\u7248\\u672C\\u3001\\u63CF\\u8FF0\\u3001\\u4F5C\\u8005\\u3001\\u8BB8\\u53EF\\u8BC1\\u548C\\u4F9D\\u8D56\\u9879\\u7B49\\u4FE1\\u606F\\u3002\\u8FD9\\u4E9B\\u5B57\\u6BB5\\u901A\\u5E38\\u5728 JavaScript \\u9879\\u76EE\\u7684 \",(0,e.jsx)(n.code,{children:\"package.json\"}),\" \\u6587\\u4EF6\\u4E2D\\u627E\\u5230\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"name\": \"my-module\",\n  \"version\": \"1.0.0\",\n  \"description\": \"A sample module\",\n  \"author\": \"John Doe\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"express\": \"^4.17.1\"\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u6A21\\u5757\\u7684\\u5143\\u6570\\u636E\\u5B57\\u6BB5\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u540D\\u79F0\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"name\"}),\" \\u5B57\\u6BB5\\u6307\\u5B9A\\u6A21\\u5757\\u7684\\u540D\\u79F0\\u3002\\u5B83\\u7528\\u4E8E\\u5728\\u5305\\u6CE8\\u518C\\u8868\\u4E2D\\u6807\\u8BC6\\u6A21\\u5757\\uFF0C\\u4EE5\\u53CA\\u5C06\\u5176\\u4F5C\\u4E3A\\u4F9D\\u8D56\\u9879\\u5B89\\u88C5\\u65F6\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"name\": \"my-module\"\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7248\\u672C\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"version\"}),\" \\u5B57\\u6BB5\\u6307\\u793A\\u6A21\\u5757\\u7684\\u5F53\\u524D\\u7248\\u672C\\u3002\\u5B83\\u9075\\u5FAA\\u8BED\\u4E49\\u7248\\u672C\\u63A7\\u5236 (semver) \\u6307\\u5BFC\\u65B9\\u9488\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"version\": \"1.0.0\"\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u63CF\\u8FF0\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"description\"}),\" \\u5B57\\u6BB5\\u7B80\\u8981\\u6982\\u8FF0\\u4E86\\u6A21\\u5757\\u7684\\u529F\\u80FD\\u3002\\u8FD9\\u5BF9\\u4E8E\\u6D4F\\u89C8\\u5305\\u6CE8\\u518C\\u8868\\u7684\\u7528\\u6237\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"description\": \"A sample module\"\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F5C\\u8005\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"author\"}),\" \\u5B57\\u6BB5\\u6307\\u5B9A\\u6A21\\u5757\\u4F5C\\u8005\\u7684\\u59D3\\u540D\\u548C\\u8054\\u7CFB\\u4FE1\\u606F\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"author\": \"John Doe\"\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BB8\\u53EF\\u8BC1\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"license\"}),\" \\u5B57\\u6BB5\\u6307\\u793A\\u53EF\\u4EE5\\u4F7F\\u7528\\u8BE5\\u6A21\\u5757\\u7684\\u8BB8\\u53EF\\u6761\\u6B3E\\u3002 \\u5E38\\u89C1\\u7684\\u8BB8\\u53EF\\u8BC1\\u5305\\u62EC MIT\\u3001Apache-2.0 \\u548C GPL-3.0\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"license\": \"MIT\"\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F9D\\u8D56\\u9879\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"dependencies\"}),\" \\u5B57\\u6BB5\\u5217\\u51FA\\u4E86\\u5F53\\u524D\\u6A21\\u5757\\u6B63\\u5E38\\u5DE5\\u4F5C\\u6240\\u4F9D\\u8D56\\u7684\\u5176\\u4ED6\\u6A21\\u5757\\u3002 \\u6BCF\\u4E2A\\u4F9D\\u8D56\\u9879\\u90FD\\u4F7F\\u7528\\u5176\\u540D\\u79F0\\u548C\\u7248\\u672C\\u8303\\u56F4\\u6307\\u5B9A\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"dependencies\": {\n    \"express\": \"^4.17.1\"\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"DevDependencies\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"devDependencies\"}),\" \\u5B57\\u6BB5\\u5217\\u51FA\\u4E86\\u4EC5\\u7528\\u4E8E\\u5F00\\u53D1\\u548C\\u6D4B\\u8BD5\\u7684\\u6A21\\u5757\\uFF0C\\u800C\\u4E0D\\u662F\\u7528\\u4E8E\\u751F\\u4EA7\\u73AF\\u5883\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"devDependencies\": {\n    \"jest\": \"^26.6.3\"\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u811A\\u672C\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"scripts\"}),\" \\u5B57\\u6BB5\\u5141\\u8BB8\\u60A8\\u5B9A\\u4E49\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"npm run <script-name>\"}),\" \\u8FD0\\u884C\\u7684\\u811A\\u672C\\u547D\\u4EE4\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"scripts\": {\n    \"start\": \"node index.js\",\n    \"test\": \"jest\"\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5173\\u952E\\u8BCD\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"keywords\"}),\" \\u5B57\\u6BB5\\u662F\\u4E00\\u4E2A\\u5B57\\u7B26\\u4E32\\u6570\\u7EC4\\uFF0C\\u53EF\\u5E2E\\u52A9\\u7528\\u6237\\u5728\\u5305\\u6CE8\\u518C\\u8868\\u4E2D\\u641C\\u7D22\\u65F6\\u627E\\u5230\\u8BE5\\u6A21\\u5757\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"keywords\": [\"sample\", \"module\", \"example\"]\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B58\\u50A8\\u5E93\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"repository\"}),\" \\u5B57\\u6BB5\\u63D0\\u4F9B\\u6709\\u5173\\u6A21\\u5757\\u6E90\\u4EE3\\u7801\\u5B58\\u50A8\\u5E93\\u7684\\u4FE1\\u606F\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/username/my-module.git\"\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Bugs\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"bugs\"}),\" \\u5B57\\u6BB5\\u63D0\\u4F9B\\u6709\\u5173\\u5728\\u54EA\\u91CC\\u62A5\\u544A\\u6A21\\u5757\\u95EE\\u9898\\u7684\\u76F8\\u5173\\u4FE1\\u606F\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"bugs\": {\n    \"url\": \"https://github.com/username/my-module/issues\"\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E3B\\u9875\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"homepage\"}),\" \\u5B57\\u6BB5\\u6307\\u5B9A\\u6A21\\u5757\\u4E3B\\u9875\\u7684 URL\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"homepage\": \"https://github.com/username/my-module#readme\"\n}\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://docs.npmjs.com/cli/v7/configuring-npm/package-json\",children:\"npm package.json documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://semver.org/\",children:\"Semantic Versioning\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://nodejs.org/docs/latest/api/modules.html\",children:\"CommonJS Modules\"})}),`\n`]})]})}function p(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,{...c,children:(0,e.jsx)(a,{...c})}):a(c)}return v(D);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-potential-issues-caused-by-hoisting/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-potential-issues-caused-by-hoisting/en-US.json
index 69cb3c333..5a5838cd5 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-potential-issues-caused-by-hoisting/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-potential-issues-caused-by-hoisting/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-potential-issues-caused-by-hoisting/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),m=(i,e)=>{for(var a in e)o(i,a,{get:e[a],enumerable:!0})},c=(i,e,a,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!g.call(i,r)&&r!==a&&o(i,r,{get:()=>e[r],enumerable:!(t=u(e,r))||t.enumerable});return i};var v=(i,e,a)=>(a=i!=null?h(p(i)):{},c(e||!i||!i.__esModule?o(a,\"default\",{value:i,enumerable:!0}):a,i)),x=i=>c(o({},\"__esModule\",{value:!0}),i);var d=b((T,l)=>{l.exports=_jsx_runtime});var z={};m(z,{default:()=>w,frontmatter:()=>j});var n=v(d()),j={title:\"What are the potential issues caused by hoisting?\"};function s(i){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Hoisting can lead to unexpected behavior in JavaScript because variable and function declarations are moved to the top of their containing scope during the compilation phase. This can result in \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" values for variables if they are used before their declaration and can cause confusion with function declarations and expressions. For example:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(a); // undefined\nvar a = 5;\n\nconsole.log(b); // ReferenceError: Cannot access 'b' before initialization\nlet b = 10;\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Potential issues caused by hoisting\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Variables being \",(0,n.jsx)(e.code,{children:\"undefined\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"When using \",(0,n.jsx)(e.code,{children:\"var\"}),\", the variable is hoisted to the top of its scope but not initialized. This means you can reference the variable before its declaration, but it will be \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" until the assignment is executed.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(a); // undefined\nvar a = 5;\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Temporal dead zone with \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Variables declared with \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" are also hoisted, but they are not initialized. Accessing them before their declaration results in a \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\" due to the temporal dead zone.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(b); // ReferenceError: Cannot access 'b' before initialization\nlet b = 10;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Function declarations vs. function expressions\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Function declarations are hoisted entirely, meaning you can call the function before its declaration. However, function expressions are not hoisted in the same way, leading to potential \",(0,n.jsx)(e.code,{children:\"TypeError\"}),\" if called before they are defined.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`foo(); // Works fine\nfunction foo() {\n  console.log('Hello');\n}\n\nbar(); // TypeError: bar is not a function\nvar bar = function () {\n  console.log('Hello');\n};\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Redeclaration issues with \",(0,n.jsx)(e.code,{children:\"var\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"var\"}),\" can lead to unintentional redeclarations, which can cause bugs that are hard to track down.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var x = 1;\nif (true) {\n  var x = 2; // Same variable as above\n}\nconsole.log(x); // 2\n`})}),`\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/Hoisting\",children:\"MDN Web Docs on Hoisting\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/var\",children:\"JavaScript.info on Hoisting\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://medium.com/@rajeshnaroth/understanding-temporal-dead-zone-in-javascript-let-and-const-5c3d2f8e0e68\",children:\"Understanding the Temporal Dead Zone\"})}),`\n`]})]})}function y(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(s,i)})):s(i)}var w=y;return x(z);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var m=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),v=(i,e)=>{for(var r in e)o(i,r,{get:e[r],enumerable:!0})},c=(i,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!b.call(i,a)&&a!==r&&o(i,a,{get:()=>e[a],enumerable:!(t=f(e,a))||t.enumerable});return i};var x=(i,e,r)=>(r=i!=null?u(g(i)):{},c(e||!i||!i.__esModule?o(r,\"default\",{value:i,enumerable:!0}):r,i)),j=i=>c(o({},\"__esModule\",{value:!0}),i);var d=m((H,l)=>{l.exports=_jsx_runtime});var w={};v(w,{default:()=>h,frontmatter:()=>y});var n=x(d()),y={title:\"What are the potential issues caused by hoisting?\"};function s(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Hoisting can lead to unexpected behavior in JavaScript because variable and function declarations are moved to the top of their containing scope during the compilation phase. This can result in \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" values for variables if they are used before their declaration and can cause confusion with function declarations and expressions. For example:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(a); // undefined\nvar a = 5;\n\nconsole.log(b); // ReferenceError: Cannot access 'b' before initialization\nlet b = 10;\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Potential issues caused by hoisting\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Variables being \",(0,n.jsx)(e.code,{children:\"undefined\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"When using \",(0,n.jsx)(e.code,{children:\"var\"}),\", the variable is hoisted to the top of its scope but not initialized. This means you can reference the variable before its declaration, but it will be \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" until the assignment is executed.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(a); // undefined\nvar a = 5;\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Temporal dead zone with \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Variables declared with \",(0,n.jsx)(e.code,{children:\"let\"}),\" and \",(0,n.jsx)(e.code,{children:\"const\"}),\" are also hoisted, but they are not initialized. Accessing them before their declaration results in a \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\" due to the temporal dead zone.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(b); // ReferenceError: Cannot access 'b' before initialization\nlet b = 10;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Function declarations vs. function expressions\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Function declarations are hoisted entirely, meaning you can call the function before its declaration. However, function expressions are not hoisted in the same way, leading to potential \",(0,n.jsx)(e.code,{children:\"TypeError\"}),\" if called before they are defined.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`foo(); // Works fine\nfunction foo() {\n  console.log('Hello');\n}\n\nbar(); // TypeError: bar is not a function\nvar bar = function () {\n  console.log('Hello');\n};\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Redeclaration issues with \",(0,n.jsx)(e.code,{children:\"var\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"var\"}),\" can lead to unintentional redeclarations, which can cause bugs that are hard to track down.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var x = 1;\nif (true) {\n  var x = 2; // Same variable as above\n}\nconsole.log(x); // 2\n`})}),`\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/Hoisting\",children:\"MDN Web Docs on Hoisting\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/var\",children:\"JavaScript.info on Hoisting\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://medium.com/@rajeshnaroth/understanding-temporal-dead-zone-in-javascript-let-and-const-5c3d2f8e0e68\",children:\"Understanding the Temporal Dead Zone\"})}),`\n`]})]})}function h(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(s,{...i})}):s(i)}return j(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-potential-issues-caused-by-hoisting/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-potential-issues-caused-by-hoisting/zh-CN.json
index 9b49ec131..b068498b2 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-potential-issues-caused-by-hoisting/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-potential-issues-caused-by-hoisting/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-potential-issues-caused-by-hoisting/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),m=(r,e)=>{for(var c in e)o(r,c,{get:e[c],enumerable:!0})},a=(r,e,c,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of g(e))!f.call(r,i)&&i!==c&&o(r,i,{get:()=>e[i],enumerable:!(l=u(e,i))||l.enumerable});return r};var b=(r,e,c)=>(c=r!=null?h(p(r)):{},a(e||!r||!r.__esModule?o(c,\"default\",{value:r,enumerable:!0}):c,r)),j=r=>a(o({},\"__esModule\",{value:!0}),r);var t=v((E,d)=>{d.exports=_jsx_runtime});var D={};m(D,{default:()=>_,frontmatter:()=>x});var n=b(t()),x={title:\"Hoisting \\u5E26\\u6765\\u7684\\u6F5C\\u5728\\u95EE\\u9898\\u662F\\u4EC0\\u4E48\\uFF1F\"};function s(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Hoisting \\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4 JavaScript \\u4E2D\\u51FA\\u73B0\\u610F\\u5916\\u884C\\u4E3A\\uFF0C\\u56E0\\u4E3A\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u58F0\\u660E\\u5728\\u7F16\\u8BD1\\u9636\\u6BB5\\u88AB\\u79FB\\u81F3\\u5176\\u5305\\u542B\\u8303\\u56F4\\u7684\\u9876\\u90E8\\u3002\\u5982\\u679C\\u53D8\\u91CF\\u5728\\u5176\\u58F0\\u660E\\u4E4B\\u524D\\u88AB\\u4F7F\\u7528\\uFF0C\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u53D8\\u91CF\\u503C\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\uFF0C\\u5E76\\u4E14\\u53EF\\u80FD\\u5BFC\\u81F4\\u51FD\\u6570\\u58F0\\u660E\\u548C\\u8868\\u8FBE\\u5F0F\\u7684\\u6DF7\\u6DC6\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(a); // undefined\nvar a = 5;\n\nconsole.log(b); // ReferenceError: Cannot access 'b' before initialization\nlet b = 10;\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Hoisting \\u5E26\\u6765\\u7684\\u6F5C\\u5728\\u95EE\\u9898\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u53D8\\u91CF\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u65F6\\uFF0C\\u53D8\\u91CF\\u4F1A\\u88AB\\u63D0\\u5347\\u5230\\u5176\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\uFF0C\\u4F46\\u672A\\u88AB\\u521D\\u59CB\\u5316\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u60A8\\u53EF\\u4EE5\\u5728\\u53D8\\u91CF\\u58F0\\u660E\\u4E4B\\u524D\\u5F15\\u7528\\u8BE5\\u53D8\\u91CF\\uFF0C\\u4F46\\u5728\\u8D4B\\u503C\\u6267\\u884C\\u4E4B\\u524D\\uFF0C\\u5B83\\u5C06\\u662F \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(a); // undefined\nvar a = 5;\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u7684\\u6682\\u65F6\\u6027\\u6B7B\\u533A\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u4E5F\\u4F1A\\u88AB\\u63D0\\u5347\\uFF0C\\u4F46\\u5B83\\u4EEC\\u6CA1\\u6709\\u88AB\\u521D\\u59CB\\u5316\\u3002\\u5728\\u58F0\\u660E\\u4E4B\\u524D\\u8BBF\\u95EE\\u5B83\\u4EEC\\u4F1A\\u5BFC\\u81F4 \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\"\\uFF0C\\u8FD9\\u662F\\u7531\\u4E8E\\u6682\\u65F6\\u6027\\u6B7B\\u533A\\u9020\\u6210\\u7684\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(b); // ReferenceError: Cannot access 'b' before initialization\nlet b = 10;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u51FD\\u6570\\u58F0\\u660E vs. \\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u51FD\\u6570\\u58F0\\u660E\\u88AB\\u5B8C\\u5168\\u63D0\\u5347\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u60A8\\u53EF\\u4EE5\\u5728\\u51FD\\u6570\\u58F0\\u660E\\u4E4B\\u524D\\u8C03\\u7528\\u8BE5\\u51FD\\u6570\\u3002\\u4F46\\u662F\\uFF0C\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u4E0D\\u4F1A\\u4EE5\\u76F8\\u540C\\u7684\\u65B9\\u5F0F\\u88AB\\u63D0\\u5347\\uFF0C\\u5982\\u679C\\u5728\\u5B9A\\u4E49\\u4E4B\\u524D\\u8C03\\u7528\\u5B83\\u4EEC\\uFF0C\\u5219\\u4F1A\\u5BFC\\u81F4\\u6F5C\\u5728\\u7684 \",(0,n.jsx)(e.code,{children:\"TypeError\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`foo(); // Works fine\nfunction foo() {\n  console.log('Hello');\n}\n\nbar(); // TypeError: bar is not a function\nvar bar = function () {\n  console.log('Hello');\n};\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\" \\u7684\\u91CD\\u65B0\\u58F0\\u660E\\u95EE\\u9898\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u610F\\u5916\\u7684\\u91CD\\u65B0\\u58F0\\u660E\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u96BE\\u4EE5\\u8FFD\\u8E2A\\u7684\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var x = 1;\nif (true) {\n  var x = 2; // Same variable as above\n}\nconsole.log(x); // 2\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Hoisting\",children:\"MDN Web Docs on Hoisting\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/var\",children:\"JavaScript.info on Hoisting\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://medium.com/@rajeshnaroth/understanding-temporal-dead-zone-in-javascript-let-and-const-5c3d2f8e0e68\",children:\"Understanding the Temporal Dead Zone\"})}),`\n`]})]})}function H(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(s,r)})):s(r)}var _=H;return j(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),b=(r,e)=>{for(var o in e)i(r,o,{get:e[o],enumerable:!0})},d=(r,e,o,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of f(e))!v.call(r,c)&&c!==o&&i(r,c,{get:()=>e[c],enumerable:!(l=p(e,c))||l.enumerable});return r};var j=(r,e,o)=>(o=r!=null?u(g(r)):{},d(e||!r||!r.__esModule?i(o,\"default\",{value:r,enumerable:!0}):o,r)),x=r=>d(i({},\"__esModule\",{value:!0}),r);var t=m((N,a)=>{a.exports=_jsx_runtime});var _={};b(_,{default:()=>s,frontmatter:()=>H});var n=j(t()),H={title:\"Hoisting \\u5E26\\u6765\\u7684\\u6F5C\\u5728\\u95EE\\u9898\\u662F\\u4EC0\\u4E48\\uFF1F\"};function h(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Hoisting \\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4 JavaScript \\u4E2D\\u51FA\\u73B0\\u610F\\u5916\\u884C\\u4E3A\\uFF0C\\u56E0\\u4E3A\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u58F0\\u660E\\u5728\\u7F16\\u8BD1\\u9636\\u6BB5\\u88AB\\u79FB\\u81F3\\u5176\\u5305\\u542B\\u8303\\u56F4\\u7684\\u9876\\u90E8\\u3002\\u5982\\u679C\\u53D8\\u91CF\\u5728\\u5176\\u58F0\\u660E\\u4E4B\\u524D\\u88AB\\u4F7F\\u7528\\uFF0C\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u53D8\\u91CF\\u503C\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\uFF0C\\u5E76\\u4E14\\u53EF\\u80FD\\u5BFC\\u81F4\\u51FD\\u6570\\u58F0\\u660E\\u548C\\u8868\\u8FBE\\u5F0F\\u7684\\u6DF7\\u6DC6\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(a); // undefined\nvar a = 5;\n\nconsole.log(b); // ReferenceError: Cannot access 'b' before initialization\nlet b = 10;\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Hoisting \\u5E26\\u6765\\u7684\\u6F5C\\u5728\\u95EE\\u9898\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u53D8\\u91CF\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u65F6\\uFF0C\\u53D8\\u91CF\\u4F1A\\u88AB\\u63D0\\u5347\\u5230\\u5176\\u4F5C\\u7528\\u57DF\\u7684\\u9876\\u90E8\\uFF0C\\u4F46\\u672A\\u88AB\\u521D\\u59CB\\u5316\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u60A8\\u53EF\\u4EE5\\u5728\\u53D8\\u91CF\\u58F0\\u660E\\u4E4B\\u524D\\u5F15\\u7528\\u8BE5\\u53D8\\u91CF\\uFF0C\\u4F46\\u5728\\u8D4B\\u503C\\u6267\\u884C\\u4E4B\\u524D\\uFF0C\\u5B83\\u5C06\\u662F \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(a); // undefined\nvar a = 5;\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u7684\\u6682\\u65F6\\u6027\\u6B7B\\u533A\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u4E5F\\u4F1A\\u88AB\\u63D0\\u5347\\uFF0C\\u4F46\\u5B83\\u4EEC\\u6CA1\\u6709\\u88AB\\u521D\\u59CB\\u5316\\u3002\\u5728\\u58F0\\u660E\\u4E4B\\u524D\\u8BBF\\u95EE\\u5B83\\u4EEC\\u4F1A\\u5BFC\\u81F4 \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\"\\uFF0C\\u8FD9\\u662F\\u7531\\u4E8E\\u6682\\u65F6\\u6027\\u6B7B\\u533A\\u9020\\u6210\\u7684\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(b); // ReferenceError: Cannot access 'b' before initialization\nlet b = 10;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u51FD\\u6570\\u58F0\\u660E vs. \\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u51FD\\u6570\\u58F0\\u660E\\u88AB\\u5B8C\\u5168\\u63D0\\u5347\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u60A8\\u53EF\\u4EE5\\u5728\\u51FD\\u6570\\u58F0\\u660E\\u4E4B\\u524D\\u8C03\\u7528\\u8BE5\\u51FD\\u6570\\u3002\\u4F46\\u662F\\uFF0C\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\u4E0D\\u4F1A\\u4EE5\\u76F8\\u540C\\u7684\\u65B9\\u5F0F\\u88AB\\u63D0\\u5347\\uFF0C\\u5982\\u679C\\u5728\\u5B9A\\u4E49\\u4E4B\\u524D\\u8C03\\u7528\\u5B83\\u4EEC\\uFF0C\\u5219\\u4F1A\\u5BFC\\u81F4\\u6F5C\\u5728\\u7684 \",(0,n.jsx)(e.code,{children:\"TypeError\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`foo(); // Works fine\nfunction foo() {\n  console.log('Hello');\n}\n\nbar(); // TypeError: bar is not a function\nvar bar = function () {\n  console.log('Hello');\n};\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"var\"}),\" \\u7684\\u91CD\\u65B0\\u58F0\\u660E\\u95EE\\u9898\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u610F\\u5916\\u7684\\u91CD\\u65B0\\u58F0\\u660E\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u96BE\\u4EE5\\u8FFD\\u8E2A\\u7684\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var x = 1;\nif (true) {\n  var x = 2; // Same variable as above\n}\nconsole.log(x); // 2\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Hoisting\",children:\"MDN Web Docs on Hoisting\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/var\",children:\"JavaScript.info on Hoisting\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://medium.com/@rajeshnaroth/understanding-temporal-dead-zone-in-javascript-let-and-const-5c3d2f8e0e68\",children:\"Understanding the Temporal Dead Zone\"})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return x(_);})();\n;return Component;"
 }
\ No newline at end of file
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 7a6221999..c455340ac 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-potential-pitfalls-of-using-closures/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),y=(r,e)=>{for(var t in e)i(r,t,{get:e[t],enumerable:!0})},s=(r,e,t,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!g.call(r,o)&&o!==t&&i(r,o,{get:()=>e[o],enumerable:!(c=d(e,o))||c.enumerable});return r};var v=(r,e,t)=>(t=r!=null?h(f(r)):{},s(e||!r||!r.__esModule?i(t,\"default\",{value:r,enumerable:!0}):t,r)),b=r=>s(i({},\"__esModule\",{value:!0}),r);var l=m((k,a)=>{a.exports=_jsx_runtime});var w={};y(w,{default:()=>C,frontmatter:()=>j});var n=v(l()),j={title:\"What are the potential pitfalls of using closures?\"};function u(r){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Closures can lead to memory leaks if not managed properly, especially when they capture variables that are no longer needed. They can also make debugging more difficult due to the complexity of the scope chain. Additionally, closures can cause performance issues if they are overused or used inappropriately, as they keep references to variables in their scope, which can prevent garbage collection.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Potential pitfalls of using closures\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Memory leaks\"}),`\n`,(0,n.jsx)(e.p,{children:\"Closures can cause memory leaks if they capture variables that are no longer needed. This happens because closures keep references to the variables in their scope, preventing the garbage collector from freeing up memory.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function createClosure() {\n  let largeArray = new Array(1000000).fill('some data');\n  return function () {\n    console.log(largeArray[0]);\n  };\n}\n\nlet closure = createClosure();\n// The largeArray is still in memory because the closure keeps a reference to it\nclosure(); // Output: 'some data'\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Debugging complexity\"}),`\n`,(0,n.jsx)(e.p,{children:\"Closures can make debugging more difficult due to the complexity of the scope chain. When a bug occurs, it can be challenging to trace the source of the problem through multiple layers of nested functions and scopes.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function outerFunction() {\n  let outerVar = 'I am outside!';\n\n  function innerFunction() {\n    console.log(outerVar); // What if outerVar is not what you expect?\n  }\n\n  return innerFunction;\n}\n\nlet myFunction = outerFunction();\nmyFunction(); // Output: 'I am outside!'\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Performance issues\"}),`\n`,(0,n.jsx)(e.p,{children:\"Overusing closures or using them inappropriately can lead to performance issues. Since closures keep references to variables in their scope, they can prevent garbage collection, leading to increased memory usage and potential slowdowns.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function createManyClosures() {\n  let counter = 0;\n\n  for (let i = 0; i < 1000000; i++) {\n    (function () {\n      counter++;\n    })();\n    // The closure is executed immediately, but it still holds onto the reference to the \\`counter\\` variable\n    // This prevents the counter from being garbage collected\n  }\n\n  console.log(counter); // This can be inefficient\n}\n\ncreateManyClosures();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Unintended variable sharing\"}),`\n`,(0,n.jsx)(e.p,{children:\"Closures can lead to unintended variable sharing, especially in loops. This happens when all closures share the same reference to a variable, leading to unexpected behavior.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function createFunctions() {\n  let functions = [];\n\n  for (var i = 0; i < 3; i++) {\n    functions.push(function () {\n      console.log(i); // All functions will log the same value of i\n    });\n  }\n\n  return functions;\n}\n\nlet funcs = createFunctions();\nfuncs[0](); // 3\nfuncs[1](); // 3\nfuncs[2](); // 3\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"To avoid this, use \",(0,n.jsx)(e.code,{children:\"let\"}),\" instead of \",(0,n.jsx)(e.code,{children:\"var\"}),\" to create a new binding for each iteration:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function createFunctions() {\n  let functions = [];\n\n  for (let i = 0; i < 3; i++) {\n    functions.push(function () {\n      console.log(i); // Each function will log its own value of i\n    });\n  }\n\n  return functions;\n}\n\nlet funcs = createFunctions();\nfuncs[0](); // 0\nfuncs[1](); // 1\nfuncs[2](); // 2\n`})}),`\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/Web/JavaScript/Closures\",children:\"MDN Web Docs: Closures\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/closure\",children:\"JavaScript.info: Closures\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://medium.com/dailyjs/i-never-understood-javascript-closures-9663703368e8\",children:\"Understanding JavaScript Closures with Ease\"})}),`\n`]})]})}function x(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(u,r)})):u(r)}var C=x;return b(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var y=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),v=(r,e)=>{for(var t in e)i(r,t,{get:e[t],enumerable:!0})},a=(r,e,t,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of f(e))!m.call(r,o)&&o!==t&&i(r,o,{get:()=>e[o],enumerable:!(c=p(e,o))||c.enumerable});return r};var b=(r,e,t)=>(t=r!=null?d(g(r)):{},a(e||!r||!r.__esModule?i(t,\"default\",{value:r,enumerable:!0}):t,r)),x=r=>a(i({},\"__esModule\",{value:!0}),r);var s=y((F,l)=>{l.exports=_jsx_runtime});var j={};v(j,{default:()=>h,frontmatter:()=>C});var n=b(s()),C={title:\"What are the potential pitfalls of using closures?\"};function u(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Closures can lead to memory leaks if not managed properly, especially when they capture variables that are no longer needed. They can also make debugging more difficult due to the complexity of the scope chain. Additionally, closures can cause performance issues if they are overused or used inappropriately, as they keep references to variables in their scope, which can prevent garbage collection.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Potential pitfalls of using closures\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Memory leaks\"}),`\n`,(0,n.jsx)(e.p,{children:\"Closures can cause memory leaks if they capture variables that are no longer needed. This happens because closures keep references to the variables in their scope, preventing the garbage collector from freeing up memory.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function createClosure() {\n  let largeArray = new Array(1000000).fill('some data');\n  return function () {\n    console.log(largeArray[0]);\n  };\n}\n\nlet closure = createClosure();\n// The largeArray is still in memory because the closure keeps a reference to it\nclosure(); // Output: 'some data'\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Debugging complexity\"}),`\n`,(0,n.jsx)(e.p,{children:\"Closures can make debugging more difficult due to the complexity of the scope chain. When a bug occurs, it can be challenging to trace the source of the problem through multiple layers of nested functions and scopes.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function outerFunction() {\n  let outerVar = 'I am outside!';\n\n  function innerFunction() {\n    console.log(outerVar); // What if outerVar is not what you expect?\n  }\n\n  return innerFunction;\n}\n\nlet myFunction = outerFunction();\nmyFunction(); // Output: 'I am outside!'\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Performance issues\"}),`\n`,(0,n.jsx)(e.p,{children:\"Overusing closures or using them inappropriately can lead to performance issues. Since closures keep references to variables in their scope, they can prevent garbage collection, leading to increased memory usage and potential slowdowns.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function createManyClosures() {\n  let counter = 0;\n\n  for (let i = 0; i < 1000000; i++) {\n    (function () {\n      counter++;\n    })();\n    // The closure is executed immediately, but it still holds onto the reference to the \\`counter\\` variable\n    // This prevents the counter from being garbage collected\n  }\n\n  console.log(counter); // This can be inefficient\n}\n\ncreateManyClosures();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Unintended variable sharing\"}),`\n`,(0,n.jsx)(e.p,{children:\"Closures can lead to unintended variable sharing, especially in loops. This happens when all closures share the same reference to a variable, leading to unexpected behavior.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function createFunctions() {\n  let functions = [];\n\n  for (var i = 0; i < 3; i++) {\n    functions.push(function () {\n      console.log(i); // All functions will log the same value of i\n    });\n  }\n\n  return functions;\n}\n\nlet funcs = createFunctions();\nfuncs[0](); // 3\nfuncs[1](); // 3\nfuncs[2](); // 3\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"To avoid this, use \",(0,n.jsx)(e.code,{children:\"let\"}),\" instead of \",(0,n.jsx)(e.code,{children:\"var\"}),\" to create a new binding for each iteration:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function createFunctions() {\n  let functions = [];\n\n  for (let i = 0; i < 3; i++) {\n    functions.push(function () {\n      console.log(i); // Each function will log its own value of i\n    });\n  }\n\n  return functions;\n}\n\nlet funcs = createFunctions();\nfuncs[0](); // 0\nfuncs[1](); // 1\nfuncs[2](); // 2\n`})}),`\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/Web/JavaScript/Closures\",children:\"MDN Web Docs: Closures\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/closure\",children:\"JavaScript.info: Closures\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://medium.com/dailyjs/i-never-understood-javascript-closures-9663703368e8\",children:\"Understanding JavaScript Closures with Ease\"})}),`\n`]})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(u,{...r})}):u(r)}return x(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-potential-pitfalls-of-using-closures/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-potential-pitfalls-of-using-closures/zh-CN.json
index a2980039f..ce0816ffb 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-potential-pitfalls-of-using-closures/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-potential-pitfalls-of-using-closures/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-potential-pitfalls-of-using-closures/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),v=(r,n)=>{for(var t in n)i(r,t,{get:n[t],enumerable:!0})},l=(r,n,t,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of f(n))!m.call(r,c)&&c!==t&&i(r,c,{get:()=>n[c],enumerable:!(o=d(n,c))||o.enumerable});return r};var j=(r,n,t)=>(t=r!=null?h(p(r)):{},l(n||!r||!r.__esModule?i(t,\"default\",{value:r,enumerable:!0}):t,r)),y=r=>l(i({},\"__esModule\",{value:!0}),r);var u=g((_,s)=>{s.exports=_jsx_runtime});var C={};v(C,{default:()=>b,frontmatter:()=>F});var e=j(u()),F={title:\"\\u4F7F\\u7528\\u95ED\\u5305\\u7684\\u6F5C\\u5728\\u9677\\u9631\\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(r){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5982\\u679C\\u7BA1\\u7406\\u4E0D\\u5F53\\uFF0C\\u95ED\\u5305\\u53EF\\u80FD\\u5BFC\\u81F4\\u5185\\u5B58\\u6CC4\\u6F0F\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u6355\\u83B7\\u4E0D\\u518D\\u9700\\u8981\\u7684\\u53D8\\u91CF\\u65F6\\u3002\\u7531\\u4E8E\\u4F5C\\u7528\\u57DF\\u94FE\\u7684\\u590D\\u6742\\u6027\\uFF0C\\u5B83\\u4EEC\\u4E5F\\u53EF\\u80FD\\u4F7F\\u8C03\\u8BD5\\u66F4\\u52A0\\u56F0\\u96BE\\u3002\\u6B64\\u5916\\uFF0C\\u5982\\u679C\\u8FC7\\u5EA6\\u4F7F\\u7528\\u6216\\u4E0D\\u5F53\\u4F7F\\u7528\\u95ED\\u5305\\uFF0C\\u5B83\\u4EEC\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u6027\\u80FD\\u95EE\\u9898\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u4FDD\\u7559\\u5BF9\\u5176\\u4F5C\\u7528\\u57DF\\u4E2D\\u53D8\\u91CF\\u7684\\u5F15\\u7528\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u963B\\u6B62\\u5783\\u573E\\u56DE\\u6536\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F7F\\u7528\\u95ED\\u5305\\u7684\\u6F5C\\u5728\\u9677\\u9631\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5185\\u5B58\\u6CC4\\u6F0F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5982\\u679C\\u95ED\\u5305\\u6355\\u83B7\\u4E0D\\u518D\\u9700\\u8981\\u7684\\u53D8\\u91CF\\uFF0C\\u5219\\u53EF\\u80FD\\u5BFC\\u81F4\\u5185\\u5B58\\u6CC4\\u6F0F\\u3002\\u53D1\\u751F\\u8FD9\\u79CD\\u60C5\\u51B5\\u662F\\u56E0\\u4E3A\\u95ED\\u5305\\u4FDD\\u7559\\u5BF9\\u5176\\u4F5C\\u7528\\u57DF\\u4E2D\\u53D8\\u91CF\\u7684\\u5F15\\u7528\\uFF0C\\u4ECE\\u800C\\u963B\\u6B62\\u5783\\u573E\\u56DE\\u6536\\u5668\\u91CA\\u653E\\u5185\\u5B58\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function createClosure() {\n  let largeArray = new Array(1000000).fill('some data');\n  return function () {\n    console.log(largeArray[0]);\n  };\n}\n\nlet closure = createClosure();\n// The largeArray is still in memory because the closure keeps a reference to it\nclosure(); // Output: 'some data'\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8C03\\u8BD5\\u590D\\u6742\\u6027\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7531\\u4E8E\\u4F5C\\u7528\\u57DF\\u94FE\\u7684\\u590D\\u6742\\u6027\\uFF0C\\u95ED\\u5305\\u4F1A\\u4F7F\\u8C03\\u8BD5\\u66F4\\u52A0\\u56F0\\u96BE\\u3002\\u5F53\\u53D1\\u751F\\u9519\\u8BEF\\u65F6\\uFF0C\\u901A\\u8FC7\\u591A\\u5C42\\u5D4C\\u5957\\u51FD\\u6570\\u548C\\u4F5C\\u7528\\u57DF\\u6765\\u8FFD\\u8E2A\\u95EE\\u9898\\u7684\\u6839\\u6E90\\u53EF\\u80FD\\u5177\\u6709\\u6311\\u6218\\u6027\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function outerFunction() {\n  let outerVar = 'I am outside!';\n\n  function innerFunction() {\n    console.log(outerVar); // What if outerVar is not what you expect?\n  }\n\n  return innerFunction;\n}\n\nlet myFunction = outerFunction();\nmyFunction(); // Output: 'I am outside!'\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6027\\u80FD\\u95EE\\u9898\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FC7\\u5EA6\\u4F7F\\u7528\\u6216\\u4E0D\\u5F53\\u4F7F\\u7528\\u95ED\\u5305\\u53EF\\u80FD\\u5BFC\\u81F4\\u6027\\u80FD\\u95EE\\u9898\\u3002\\u7531\\u4E8E\\u95ED\\u5305\\u4FDD\\u7559\\u5BF9\\u5176\\u4F5C\\u7528\\u57DF\\u4E2D\\u53D8\\u91CF\\u7684\\u5F15\\u7528\\uFF0C\\u5B83\\u4EEC\\u53EF\\u80FD\\u4F1A\\u963B\\u6B62\\u5783\\u573E\\u56DE\\u6536\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u5185\\u5B58\\u4F7F\\u7528\\u91CF\\u589E\\u52A0\\u548C\\u6F5C\\u5728\\u7684\\u51CF\\u901F\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function createManyClosures() {\n  let counter = 0;\n\n  for (let i = 0; i < 1000000; i++) {\n    (function () {\n      counter++;\n    })();\n    // The closure is executed immediately, but it still holds onto the reference to the \\`counter\\` variable\n    // This prevents the counter from being garbage collected\n  }\n\n  console.log(counter); // This can be inefficient\n}\n\ncreateManyClosures();\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u610F\\u5916\\u7684\\u53D8\\u91CF\\u5171\\u4EAB\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u95ED\\u5305\\u53EF\\u80FD\\u5BFC\\u81F4\\u610F\\u5916\\u7684\\u53D8\\u91CF\\u5171\\u4EAB\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u5FAA\\u73AF\\u4E2D\\u3002\\u5F53\\u6240\\u6709\\u95ED\\u5305\\u5171\\u4EAB\\u5BF9\\u53D8\\u91CF\\u7684\\u76F8\\u540C\\u5F15\\u7528\\u65F6\\uFF0C\\u5C31\\u4F1A\\u53D1\\u751F\\u8FD9\\u79CD\\u60C5\\u51B5\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u610F\\u5916\\u884C\\u4E3A\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function createFunctions() {\n  let functions = [];\n\n  for (var i = 0; i < 3; i++) {\n    functions.push(function () {\n      console.log(i); // All functions will log the same value of i\n    });\n  }\n\n  return functions;\n}\n\nlet funcs = createFunctions();\nfuncs[0](); // 3\nfuncs[1](); // 3\nfuncs[2](); // 3\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E3A\\u4E86\\u907F\\u514D\\u8FD9\\u79CD\\u60C5\\u51B5\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"let\"}),\" \\u800C\\u4E0D\\u662F \",(0,e.jsx)(n.code,{children:\"var\"}),\" \\u6765\\u4E3A\\u6BCF\\u6B21\\u8FED\\u4EE3\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u7ED1\\u5B9A\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function createFunctions() {\n  let functions = [];\n\n  for (let i = 0; i < 3; i++) {\n    functions.push(function () {\n      console.log(i); // Each function will log its own value of i\n    });\n  }\n\n  return functions;\n}\n\nlet funcs = createFunctions();\nfuncs[0](); // 0\nfuncs[1](); // 1\nfuncs[2](); // 2\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures\",children:\"MDN Web Docs: Closures\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/closure\",children:\"JavaScript.info: Closures\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://medium.com/dailyjs/i-never-understood-javascript-closures-9663703368e8\",children:\"Understanding JavaScript Closures with Ease\"})}),`\n`]})]})}function x(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(a,r)})):a(r)}var b=x;return y(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),j=(r,n)=>{for(var t in n)i(r,t,{get:n[t],enumerable:!0})},l=(r,n,t,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of p(n))!g.call(r,c)&&c!==t&&i(r,c,{get:()=>n[c],enumerable:!(o=f(n,c))||o.enumerable});return r};var y=(r,n,t)=>(t=r!=null?d(m(r)):{},l(n||!r||!r.__esModule?i(t,\"default\",{value:r,enumerable:!0}):t,r)),F=r=>l(i({},\"__esModule\",{value:!0}),r);var u=v((w,s)=>{s.exports=_jsx_runtime});var C={};j(C,{default:()=>h,frontmatter:()=>x});var e=y(u()),x={title:\"\\u4F7F\\u7528\\u95ED\\u5305\\u7684\\u6F5C\\u5728\\u9677\\u9631\\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5982\\u679C\\u7BA1\\u7406\\u4E0D\\u5F53\\uFF0C\\u95ED\\u5305\\u53EF\\u80FD\\u5BFC\\u81F4\\u5185\\u5B58\\u6CC4\\u6F0F\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u6355\\u83B7\\u4E0D\\u518D\\u9700\\u8981\\u7684\\u53D8\\u91CF\\u65F6\\u3002\\u7531\\u4E8E\\u4F5C\\u7528\\u57DF\\u94FE\\u7684\\u590D\\u6742\\u6027\\uFF0C\\u5B83\\u4EEC\\u4E5F\\u53EF\\u80FD\\u4F7F\\u8C03\\u8BD5\\u66F4\\u52A0\\u56F0\\u96BE\\u3002\\u6B64\\u5916\\uFF0C\\u5982\\u679C\\u8FC7\\u5EA6\\u4F7F\\u7528\\u6216\\u4E0D\\u5F53\\u4F7F\\u7528\\u95ED\\u5305\\uFF0C\\u5B83\\u4EEC\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u6027\\u80FD\\u95EE\\u9898\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u4FDD\\u7559\\u5BF9\\u5176\\u4F5C\\u7528\\u57DF\\u4E2D\\u53D8\\u91CF\\u7684\\u5F15\\u7528\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u963B\\u6B62\\u5783\\u573E\\u56DE\\u6536\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F7F\\u7528\\u95ED\\u5305\\u7684\\u6F5C\\u5728\\u9677\\u9631\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5185\\u5B58\\u6CC4\\u6F0F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5982\\u679C\\u95ED\\u5305\\u6355\\u83B7\\u4E0D\\u518D\\u9700\\u8981\\u7684\\u53D8\\u91CF\\uFF0C\\u5219\\u53EF\\u80FD\\u5BFC\\u81F4\\u5185\\u5B58\\u6CC4\\u6F0F\\u3002\\u53D1\\u751F\\u8FD9\\u79CD\\u60C5\\u51B5\\u662F\\u56E0\\u4E3A\\u95ED\\u5305\\u4FDD\\u7559\\u5BF9\\u5176\\u4F5C\\u7528\\u57DF\\u4E2D\\u53D8\\u91CF\\u7684\\u5F15\\u7528\\uFF0C\\u4ECE\\u800C\\u963B\\u6B62\\u5783\\u573E\\u56DE\\u6536\\u5668\\u91CA\\u653E\\u5185\\u5B58\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function createClosure() {\n  let largeArray = new Array(1000000).fill('some data');\n  return function () {\n    console.log(largeArray[0]);\n  };\n}\n\nlet closure = createClosure();\n// The largeArray is still in memory because the closure keeps a reference to it\nclosure(); // Output: 'some data'\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8C03\\u8BD5\\u590D\\u6742\\u6027\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7531\\u4E8E\\u4F5C\\u7528\\u57DF\\u94FE\\u7684\\u590D\\u6742\\u6027\\uFF0C\\u95ED\\u5305\\u4F1A\\u4F7F\\u8C03\\u8BD5\\u66F4\\u52A0\\u56F0\\u96BE\\u3002\\u5F53\\u53D1\\u751F\\u9519\\u8BEF\\u65F6\\uFF0C\\u901A\\u8FC7\\u591A\\u5C42\\u5D4C\\u5957\\u51FD\\u6570\\u548C\\u4F5C\\u7528\\u57DF\\u6765\\u8FFD\\u8E2A\\u95EE\\u9898\\u7684\\u6839\\u6E90\\u53EF\\u80FD\\u5177\\u6709\\u6311\\u6218\\u6027\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function outerFunction() {\n  let outerVar = 'I am outside!';\n\n  function innerFunction() {\n    console.log(outerVar); // What if outerVar is not what you expect?\n  }\n\n  return innerFunction;\n}\n\nlet myFunction = outerFunction();\nmyFunction(); // Output: 'I am outside!'\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6027\\u80FD\\u95EE\\u9898\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FC7\\u5EA6\\u4F7F\\u7528\\u6216\\u4E0D\\u5F53\\u4F7F\\u7528\\u95ED\\u5305\\u53EF\\u80FD\\u5BFC\\u81F4\\u6027\\u80FD\\u95EE\\u9898\\u3002\\u7531\\u4E8E\\u95ED\\u5305\\u4FDD\\u7559\\u5BF9\\u5176\\u4F5C\\u7528\\u57DF\\u4E2D\\u53D8\\u91CF\\u7684\\u5F15\\u7528\\uFF0C\\u5B83\\u4EEC\\u53EF\\u80FD\\u4F1A\\u963B\\u6B62\\u5783\\u573E\\u56DE\\u6536\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u5185\\u5B58\\u4F7F\\u7528\\u91CF\\u589E\\u52A0\\u548C\\u6F5C\\u5728\\u7684\\u51CF\\u901F\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function createManyClosures() {\n  let counter = 0;\n\n  for (let i = 0; i < 1000000; i++) {\n    (function () {\n      counter++;\n    })();\n    // The closure is executed immediately, but it still holds onto the reference to the \\`counter\\` variable\n    // This prevents the counter from being garbage collected\n  }\n\n  console.log(counter); // This can be inefficient\n}\n\ncreateManyClosures();\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u610F\\u5916\\u7684\\u53D8\\u91CF\\u5171\\u4EAB\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u95ED\\u5305\\u53EF\\u80FD\\u5BFC\\u81F4\\u610F\\u5916\\u7684\\u53D8\\u91CF\\u5171\\u4EAB\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u5FAA\\u73AF\\u4E2D\\u3002\\u5F53\\u6240\\u6709\\u95ED\\u5305\\u5171\\u4EAB\\u5BF9\\u53D8\\u91CF\\u7684\\u76F8\\u540C\\u5F15\\u7528\\u65F6\\uFF0C\\u5C31\\u4F1A\\u53D1\\u751F\\u8FD9\\u79CD\\u60C5\\u51B5\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u610F\\u5916\\u884C\\u4E3A\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function createFunctions() {\n  let functions = [];\n\n  for (var i = 0; i < 3; i++) {\n    functions.push(function () {\n      console.log(i); // All functions will log the same value of i\n    });\n  }\n\n  return functions;\n}\n\nlet funcs = createFunctions();\nfuncs[0](); // 3\nfuncs[1](); // 3\nfuncs[2](); // 3\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E3A\\u4E86\\u907F\\u514D\\u8FD9\\u79CD\\u60C5\\u51B5\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"let\"}),\" \\u800C\\u4E0D\\u662F \",(0,e.jsx)(n.code,{children:\"var\"}),\" \\u6765\\u4E3A\\u6BCF\\u6B21\\u8FED\\u4EE3\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u7ED1\\u5B9A\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function createFunctions() {\n  let functions = [];\n\n  for (let i = 0; i < 3; i++) {\n    functions.push(function () {\n      console.log(i); // Each function will log its own value of i\n    });\n  }\n\n  return functions;\n}\n\nlet funcs = createFunctions();\nfuncs[0](); // 0\nfuncs[1](); // 1\nfuncs[2](); // 2\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures\",children:\"MDN Web Docs: Closures\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/closure\",children:\"JavaScript.info: Closures\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://medium.com/dailyjs/i-never-understood-javascript-closures-9663703368e8\",children:\"Understanding JavaScript Closures with Ease\"})}),`\n`]})]})}function h(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(a,{...r})}):a(r)}return F(C);})();\n;return Component;"
 }
\ No newline at end of file
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 ce5cee52e..dbdaab1f3 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
@@ -34,5 +34,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),D=(a,e)=>{for(var t in e)l(a,t,{get:e[t],enumerable:!0})},o=(a,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!g.call(a,r)&&r!==t&&l(a,r,{get:()=>e[r],enumerable:!(i=u(e,r))||i.enumerable});return a};var b=(a,e,t)=>(t=a!=null?h(p(a)):{},o(e||!a||!a.__esModule?l(t,\"default\",{value:a,enumerable:!0}):t,a)),v=a=>o(l({},\"__esModule\",{value:!0}),a);var s=f((j,c)=>{c.exports=_jsx_runtime});var P={};D(P,{default:()=>k,frontmatter:()=>w});var n=b(s()),w={title:\"What are the pros and cons of using Promises instead of callbacks in JavaScript?\"};function d(a){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",a:\"a\"},a.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Promises offer a cleaner alternative to callbacks, helping to avoid callback hell and making asynchronous code more readable. They facilitate writing sequential and parallel asynchronous operations with ease. However, using promises may introduce slightly more complex code.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Pros\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Avoid callback hell which can be unreadable.\"}),`\n`,(0,n.jsx)(e.p,{children:`Callback hell, also known as the \"pyramid of doom,\" is a phenomenon that occurs when you have multiple nested callbacks in your code. This can lead to code that is difficult to read, maintain, and debug. Here's an example of callback hell:`}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function getFirstData(callback) {\n  setTimeout(() => {\n    callback({ id: 1, title: 'First Data' });\n  }, 1000);\n}\n\nfunction getSecondData(data, callback) {\n  setTimeout(() => {\n    callback({ id: data.id, title: data.title + ' Second Data' });\n  }, 1000);\n}\n\nfunction getThirdData(data, callback) {\n  setTimeout(() => {\n    callback({ id: data.id, title: data.title + ' Third Data' });\n  }, 1000);\n}\n\n// Callback hell\ngetFirstData((data) => {\n  getSecondData(data, (data) => {\n    getThirdData(data, (result) => {\n      console.log(result); // Output: {id: 1, title: \"First Data Second Data Third Data\"}\n    });\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Promises address the problem of callback hell by providing a more linear and readable structure for your code.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of sequential asynchronous code using setTimeout and Promises\nfunction getFirstData() {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: 1, title: 'First Data' });\n    }, 1000);\n  });\n}\n\nfunction getSecondData(data) {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: data.id, title: data.title + ' Second Data' });\n    }, 1000);\n  });\n}\n\nfunction getThirdData(data) {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: data.id, title: data.title + ' Third Data' });\n    }, 1000);\n  });\n}\n\ngetFirstData()\n  .then(getSecondData)\n  .then(getThirdData)\n  .then((data) => {\n    console.log(data); // Output: {id: 1, title: \"First Data Second Data Third Data\"}\n  })\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Makes it easy to write sequential asynchronous code that is readable with \",(0,n.jsx)(e.code,{children:\".then()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In the above code example, we use \",(0,n.jsx)(e.code,{children:\".then()\"}),\" method to chain these Promises together, allowing the code to execute sequentially. It provides a cleaner and more manageable way to handle asynchronous operations in JavaScript.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Makes it easy to write parallel asynchronous code with \",(0,n.jsx)(e.code,{children:\"Promise.all()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Both \",(0,n.jsx)(e.code,{children:\"Promise.all()\"}),\" and callbacks can be used to write parallel asynchronous code. However, \",(0,n.jsx)(e.code,{children:\"Promise.all()\"}),\" provides a more concise and readable way to handle multiple Promises, especially when dealing with complex asynchronous workflows.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function getData1() {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: 1, title: 'Data 1' });\n    }, 1000);\n  });\n}\n\nfunction getData2() {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: 2, title: 'Data 2' });\n    }, 1000);\n  });\n}\n\nfunction getData3() {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: 3, title: 'Data 3' });\n    }, 1000);\n  });\n}\n\nPromise.all([getData1(), getData2(), getData3()])\n  .then((results) => {\n    console.log(results); // Output: [{ id: 1, title: 'Data 1' }, { id: 2, title: 'Data 2' }, { id: 3, title: 'Data 3' }]\n  })\n  .catch((error) => {\n    console.error('Error:', error);\n  });\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Easier error handling with \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" and guaranteed cleanup with \",(0,n.jsx)(e.code,{children:\".finally()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Promises make error handling more straightforward by allowing you to catch errors at the end of a chain using \",(0,n.jsx)(e.code,{children:\".catch()\"}),\", instead of manually checking for errors in every callback. This leads to cleaner and more maintainable code.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Additionally, \",(0,n.jsx)(e.code,{children:\".finally()\"}),\" lets you run code after the Promise settles, whether it was successful or failed, which is great for cleanup tasks like hiding spinners or resetting UI states.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function getFirstData() {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve({ id: 1, title: 'First Data' });\n    }, 1000);\n  });\n}\n\nfunction getSecondData(data) {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve({ id: data.id, title: data.title + ' -> Second Data' });\n    }, 1000);\n  });\n}\n\ngetFirstData()\n  .then(getSecondData)\n  .then((data) => {\n    console.log('Success:', data);\n  })\n  .catch((error) => {\n    console.error('Error:', error);\n  })\n  .finally(() => {\n    console.log('This runs no matter what');\n  });\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"With promises, these scenarios which are present in callbacks-only coding, will not happen:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Call the callback too early\"}),`\n`,(0,n.jsx)(e.li,{children:\"Call the callback too late (or never)\"}),`\n`,(0,n.jsx)(e.li,{children:\"Call the callback too few or too many times\"}),`\n`,(0,n.jsx)(e.li,{children:\"Fail to pass along any necessary environment/parameters\"}),`\n`,(0,n.jsx)(e.li,{children:\"Swallow any errors/exceptions that may happen\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Cons\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Slightly more complex code (debatable).\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Practice\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Try implementing your own \",(0,n.jsxs)(e.a,{href:\"/questions/javascript/promise-resolve\",children:[(0,n.jsx)(e.code,{children:\"Promise.resolve()\"}),\" method\"]}),\", \",(0,n.jsxs)(e.a,{href:\"/questions/javascript/promise-reject\",children:[(0,n.jsx)(e.code,{children:\"Promise.reject()\"}),\" method\"]}),\" and \",(0,n.jsxs)(e.a,{href:\"/questions/javascript/promise-all\",children:[(0,n.jsx)(e.code,{children:\"Promise.all()\"}),\" method\"]}),\" on GreatFrontEnd.\"]}),`\n`]}),`\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/Web/JavaScript/Reference/Global_Objects/Promise\",children:\"Promise | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Callback_function\",children:\"Callback function | MDN\"})}),`\n`]})]})}function y(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(d,a)})):d(a)}var k=y;return v(P);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var D=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),v=(a,e)=>{for(var t in e)l(a,t,{get:e[t],enumerable:!0})},i=(a,e,t,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!f.call(a,r)&&r!==t&&l(a,r,{get:()=>e[r],enumerable:!(o=m(e,r))||o.enumerable});return a};var w=(a,e,t)=>(t=a!=null?u(g(a)):{},i(e||!a||!a.__esModule?l(t,\"default\",{value:a,enumerable:!0}):t,a)),y=a=>i(l({},\"__esModule\",{value:!0}),a);var s=D((T,c)=>{c.exports=_jsx_runtime});var k={};v(k,{default:()=>h,frontmatter:()=>b});var n=w(s()),b={title:\"What are the pros and cons of using Promises instead of callbacks in JavaScript?\"};function d(a){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...a.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Promises offer a cleaner alternative to callbacks, helping to avoid callback hell and making asynchronous code more readable. They facilitate writing sequential and parallel asynchronous operations with ease. However, using promises may introduce slightly more complex code.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Pros\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Avoid callback hell which can be unreadable.\"}),`\n`,(0,n.jsx)(e.p,{children:`Callback hell, also known as the \"pyramid of doom,\" is a phenomenon that occurs when you have multiple nested callbacks in your code. This can lead to code that is difficult to read, maintain, and debug. Here's an example of callback hell:`}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function getFirstData(callback) {\n  setTimeout(() => {\n    callback({ id: 1, title: 'First Data' });\n  }, 1000);\n}\n\nfunction getSecondData(data, callback) {\n  setTimeout(() => {\n    callback({ id: data.id, title: data.title + ' Second Data' });\n  }, 1000);\n}\n\nfunction getThirdData(data, callback) {\n  setTimeout(() => {\n    callback({ id: data.id, title: data.title + ' Third Data' });\n  }, 1000);\n}\n\n// Callback hell\ngetFirstData((data) => {\n  getSecondData(data, (data) => {\n    getThirdData(data, (result) => {\n      console.log(result); // Output: {id: 1, title: \"First Data Second Data Third Data\"}\n    });\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Promises address the problem of callback hell by providing a more linear and readable structure for your code.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of sequential asynchronous code using setTimeout and Promises\nfunction getFirstData() {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: 1, title: 'First Data' });\n    }, 1000);\n  });\n}\n\nfunction getSecondData(data) {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: data.id, title: data.title + ' Second Data' });\n    }, 1000);\n  });\n}\n\nfunction getThirdData(data) {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: data.id, title: data.title + ' Third Data' });\n    }, 1000);\n  });\n}\n\ngetFirstData()\n  .then(getSecondData)\n  .then(getThirdData)\n  .then((data) => {\n    console.log(data); // Output: {id: 1, title: \"First Data Second Data Third Data\"}\n  })\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Makes it easy to write sequential asynchronous code that is readable with \",(0,n.jsx)(e.code,{children:\".then()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In the above code example, we use \",(0,n.jsx)(e.code,{children:\".then()\"}),\" method to chain these Promises together, allowing the code to execute sequentially. It provides a cleaner and more manageable way to handle asynchronous operations in JavaScript.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Makes it easy to write parallel asynchronous code with \",(0,n.jsx)(e.code,{children:\"Promise.all()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Both \",(0,n.jsx)(e.code,{children:\"Promise.all()\"}),\" and callbacks can be used to write parallel asynchronous code. However, \",(0,n.jsx)(e.code,{children:\"Promise.all()\"}),\" provides a more concise and readable way to handle multiple Promises, especially when dealing with complex asynchronous workflows.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function getData1() {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: 1, title: 'Data 1' });\n    }, 1000);\n  });\n}\n\nfunction getData2() {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: 2, title: 'Data 2' });\n    }, 1000);\n  });\n}\n\nfunction getData3() {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: 3, title: 'Data 3' });\n    }, 1000);\n  });\n}\n\nPromise.all([getData1(), getData2(), getData3()])\n  .then((results) => {\n    console.log(results); // Output: [{ id: 1, title: 'Data 1' }, { id: 2, title: 'Data 2' }, { id: 3, title: 'Data 3' }]\n  })\n  .catch((error) => {\n    console.error('Error:', error);\n  });\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Easier error handling with \",(0,n.jsx)(e.code,{children:\".catch()\"}),\" and guaranteed cleanup with \",(0,n.jsx)(e.code,{children:\".finally()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Promises make error handling more straightforward by allowing you to catch errors at the end of a chain using \",(0,n.jsx)(e.code,{children:\".catch()\"}),\", instead of manually checking for errors in every callback. This leads to cleaner and more maintainable code.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Additionally, \",(0,n.jsx)(e.code,{children:\".finally()\"}),\" lets you run code after the Promise settles, whether it was successful or failed, which is great for cleanup tasks like hiding spinners or resetting UI states.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function getFirstData() {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve({ id: 1, title: 'First Data' });\n    }, 1000);\n  });\n}\n\nfunction getSecondData(data) {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve({ id: data.id, title: data.title + ' -> Second Data' });\n    }, 1000);\n  });\n}\n\ngetFirstData()\n  .then(getSecondData)\n  .then((data) => {\n    console.log('Success:', data);\n  })\n  .catch((error) => {\n    console.error('Error:', error);\n  })\n  .finally(() => {\n    console.log('This runs no matter what');\n  });\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"With promises, these scenarios which are present in callbacks-only coding, will not happen:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Call the callback too early\"}),`\n`,(0,n.jsx)(e.li,{children:\"Call the callback too late (or never)\"}),`\n`,(0,n.jsx)(e.li,{children:\"Call the callback too few or too many times\"}),`\n`,(0,n.jsx)(e.li,{children:\"Fail to pass along any necessary environment/parameters\"}),`\n`,(0,n.jsx)(e.li,{children:\"Swallow any errors/exceptions that may happen\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Cons\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Slightly more complex code (debatable).\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Practice\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Try implementing your own \",(0,n.jsxs)(e.a,{href:\"/questions/javascript/promise-resolve\",children:[(0,n.jsx)(e.code,{children:\"Promise.resolve()\"}),\" method\"]}),\", \",(0,n.jsxs)(e.a,{href:\"/questions/javascript/promise-reject\",children:[(0,n.jsx)(e.code,{children:\"Promise.reject()\"}),\" method\"]}),\" and \",(0,n.jsxs)(e.a,{href:\"/questions/javascript/promise-all\",children:[(0,n.jsx)(e.code,{children:\"Promise.all()\"}),\" method\"]}),\" on GreatFrontEnd.\"]}),`\n`]}),`\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/Web/JavaScript/Reference/Global_Objects/Promise\",children:\"Promise | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Callback_function\",children:\"Callback function | MDN\"})}),`\n`]})]})}function h(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}return y(k);})();\n;return Component;"
 }
\ No newline at end of file
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 2df76c8cf..a723cd5ef 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
@@ -34,5 +34,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var o in e)s(r,o,{get:e[o],enumerable:!0})},c=(r,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of h(e))!g.call(r,a)&&a!==o&&s(r,a,{get:()=>e[a],enumerable:!(i=u(e,a))||i.enumerable});return r};var q=(r,e,o)=>(o=r!=null?m(p(r)):{},c(e||!r||!r.__esModule?s(o,\"default\",{value:r,enumerable:!0}):o,r)),j=r=>c(s({},\"__esModule\",{value:!0}),r);var d=x((E,l)=>{l.exports=_jsx_runtime});var b={};f(b,{default:()=>_,frontmatter:()=>v});var n=q(d()),v={title:\"Quais s\\xE3o os pr\\xF3s e contras de usar Promises em vez de callbacks?\"};function t(r){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"Pr\\xF3s\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'Evite o \"callback hell\", que pode ser ileg\\xEDvel.'}),`\n`,(0,n.jsxs)(e.li,{children:[\"Facilita a escrita de c\\xF3digo ass\\xEDncrono sequencial que \\xE9 leg\\xEDvell com \",(0,n.jsx)(e.code,{children:\".then()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Facilita a escrita paralela de c\\xF3digo ass\\xEDncrono com \",(0,n.jsx)(e.code,{children:\"Promise.all()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Com promessas, esses cen\\xE1rios que est\\xE3o presentes em c\\xF3digo somente com retorno de chamada n\\xE3o ocorrer\\xE3o:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Chamar a fun\\xE7\\xE3o de retorno de chamada muito cedo\"}),`\n`,(0,n.jsx)(e.li,{children:\"Chamar a fun\\xE7\\xE3o de retorno de chamada tarde demais (ou nunca)\"}),`\n`,(0,n.jsx)(e.li,{children:\"Chamar a fun\\xE7\\xE3o de retorno de chamada poucas ou muitas vezes\"}),`\n`,(0,n.jsx)(e.li,{children:\"Falhar em passar qualquer ambiente/par\\xE2metros necess\\xE1rios para a fun\\xE7\\xE3o de retorno de chamada\"}),`\n`,(0,n.jsx)(e.li,{children:\"Ignorar quaisquer erros/exce\\xE7\\xF5es que possam ocorrer\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Contras\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"O c\\xF3digo pode se tornar ligeiramente mais complexo (isso pode ser discut\\xEDvel).\"}),`\n`,(0,n.jsx)(e.li,{children:\"Em navegadores mais antigos onde ES2015 n\\xE3o \\xE9 suportado, \\xE9 necess\\xE1rio carregar um polyfill para poder us\\xE1-lo.\"}),`\n`]})]})}function C(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(t,r)})):t(r)}var _=C;return j(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),q=(r,e)=>{for(var o in e)s(r,o,{get:e[o],enumerable:!0})},c=(r,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!x.call(r,a)&&a!==o&&s(r,a,{get:()=>e[a],enumerable:!(i=h(e,a))||i.enumerable});return r};var v=(r,e,o)=>(o=r!=null?u(g(r)):{},c(e||!r||!r.__esModule?s(o,\"default\",{value:r,enumerable:!0}):o,r)),C=r=>c(s({},\"__esModule\",{value:!0}),r);var d=f((b,l)=>{l.exports=_jsx_runtime});var j={};q(j,{default:()=>m,frontmatter:()=>_});var n=v(d()),_={title:\"Quais s\\xE3o os pr\\xF3s e contras de usar Promises em vez de callbacks?\"};function t(r){let e={code:\"code\",h2:\"h2\",li:\"li\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"Pr\\xF3s\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'Evite o \"callback hell\", que pode ser ileg\\xEDvel.'}),`\n`,(0,n.jsxs)(e.li,{children:[\"Facilita a escrita de c\\xF3digo ass\\xEDncrono sequencial que \\xE9 leg\\xEDvell com \",(0,n.jsx)(e.code,{children:\".then()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Facilita a escrita paralela de c\\xF3digo ass\\xEDncrono com \",(0,n.jsx)(e.code,{children:\"Promise.all()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Com promessas, esses cen\\xE1rios que est\\xE3o presentes em c\\xF3digo somente com retorno de chamada n\\xE3o ocorrer\\xE3o:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Chamar a fun\\xE7\\xE3o de retorno de chamada muito cedo\"}),`\n`,(0,n.jsx)(e.li,{children:\"Chamar a fun\\xE7\\xE3o de retorno de chamada tarde demais (ou nunca)\"}),`\n`,(0,n.jsx)(e.li,{children:\"Chamar a fun\\xE7\\xE3o de retorno de chamada poucas ou muitas vezes\"}),`\n`,(0,n.jsx)(e.li,{children:\"Falhar em passar qualquer ambiente/par\\xE2metros necess\\xE1rios para a fun\\xE7\\xE3o de retorno de chamada\"}),`\n`,(0,n.jsx)(e.li,{children:\"Ignorar quaisquer erros/exce\\xE7\\xF5es que possam ocorrer\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Contras\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"O c\\xF3digo pode se tornar ligeiramente mais complexo (isso pode ser discut\\xEDvel).\"}),`\n`,(0,n.jsx)(e.li,{children:\"Em navegadores mais antigos onde ES2015 n\\xE3o \\xE9 suportado, \\xE9 necess\\xE1rio carregar um polyfill para poder us\\xE1-lo.\"}),`\n`]})]})}function m(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(t,{...r})}):t(r)}return C(j);})();\n;return Component;"
 }
\ No newline at end of file
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 520d07c69..469f2945a 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
@@ -34,5 +34,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var p=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},o=(t,e,r,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!g.call(t,a)&&a!==r&&i(t,a,{get:()=>e[a],enumerable:!(l=u(e,a))||l.enumerable});return t};var f=(t,e,r)=>(r=t!=null?h(D(t)):{},o(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),P=t=>o(i({},\"__esModule\",{value:!0}),t);var d=p((w,c)=>{c.exports=_jsx_runtime});var F={};v(F,{default:()=>S,frontmatter:()=>j});var n=f(d()),j={title:\"\\u5728 JavaScript \\u4E2D\\u4F7F\\u7528 Promise \\u800C\\u4E0D\\u662F\\u56DE\\u8C03\\u6709\\u4EC0\\u4E48\\u4F18\\u7F3A\\u70B9\\uFF1F\"};function s(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",pre:\"pre\",code:\"code\",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.jsx)(e.p,{children:\"Promise \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u6BD4\\u56DE\\u8C03\\u66F4\\u7B80\\u6D01\\u7684\\u66FF\\u4EE3\\u65B9\\u6848\\uFF0C\\u6709\\u52A9\\u4E8E\\u907F\\u514D\\u56DE\\u8C03\\u5730\\u72F1\\uFF0C\\u5E76\\u4F7F\\u5F02\\u6B65\\u4EE3\\u7801\\u66F4\\u5177\\u53EF\\u8BFB\\u6027\\u3002\\u5B83\\u4EEC\\u6709\\u52A9\\u4E8E\\u8F7B\\u677E\\u7F16\\u5199\\u987A\\u5E8F\\u548C\\u5E76\\u884C\\u7684\\u5F02\\u6B65\\u64CD\\u4F5C\\u3002\\u4F46\\u662F\\uFF0C\\u4F7F\\u7528 Promise \\u53EF\\u80FD\\u4F1A\\u5F15\\u5165\\u7A0D\\u5FAE\\u590D\\u6742\\u7684\\u4EE3\\u7801\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u907F\\u514D\\u96BE\\u4EE5\\u9605\\u8BFB\\u7684\\u56DE\\u8C03\\u5730\\u72F1\\u3002\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u56DE\\u8C03\\u5730\\u72F1\\uFF0C\\u4E5F\\u79F0\\u4E3A\\u201C\\u5384\\u8FD0\\u91D1\\u5B57\\u5854\\u201D\\uFF0C\\u662F\\u6307\\u5728\\u4EE3\\u7801\\u4E2D\\u5177\\u6709\\u591A\\u4E2A\\u5D4C\\u5957\\u56DE\\u8C03\\u65F6\\u53D1\\u751F\\u7684\\u73B0\\u8C61\\u3002\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u4EE3\\u7801\\u96BE\\u4EE5\\u9605\\u8BFB\\u3001\\u7EF4\\u62A4\\u548C\\u8C03\\u8BD5\\u3002\\u4EE5\\u4E0B\\u662F\\u56DE\\u8C03\\u5730\\u72F1\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function getFirstData(callback) {\n  setTimeout(() => {\n    callback({ id: 1, title: 'First Data' });\n  }, 1000);\n}\n\nfunction getSecondData(data, callback) {\n  setTimeout(() => {\n    callback({ id: data.id, title: data.title + ' Second Data' });\n  }, 1000);\n}\n\nfunction getThirdData(data, callback) {\n  setTimeout(() => {\n    callback({ id: data.id, title: data.title + ' Third Data' });\n  }, 1000);\n}\n\n// Callback hell\ngetFirstData((data) => {\n  getSecondData(data, (data) => {\n    getThirdData(data, (result) => {\n      console.log(result); // Output: {id: 1, title: \"First Data Second Data Third Data\"}\n    });\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Promise \\u901A\\u8FC7\\u4E3A\\u4EE3\\u7801\\u63D0\\u4F9B\\u66F4\\u7EBF\\u6027\\u548C\\u53EF\\u8BFB\\u7684\\u7ED3\\u6784\\u6765\\u89E3\\u51B3\\u56DE\\u8C03\\u5730\\u72F1\\u7684\\u95EE\\u9898\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of sequential asynchronous code using setTimeout and Promises\nfunction getFirstData() {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: 1, title: 'First Data' });\n    }, 1000);\n  });\n}\n\nfunction getSecondData(data) {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: data.id, title: data.title + ' Second Data' });\n    }, 1000);\n  });\n}\n\nfunction getThirdData(data) {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: data.id, title: data.title + ' Third Data' });\n    }, 1000);\n  });\n}\n\ngetFirstData()\n  .then(getSecondData)\n  .then(getThirdData)\n  .then((data) => {\n    console.log(data); // Output: {id: 1, title: \"First Data Second Data Third Data\"}\n  })\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".then()\"}),\" \\u8F7B\\u677E\\u7F16\\u5199\\u53EF\\u8BFB\\u7684\\u987A\\u5E8F\\u5F02\\u6B65\\u4EE3\\u7801\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u4E0A\\u9762\\u7684\\u4EE3\\u7801\\u793A\\u4F8B\\u4E2D\\uFF0C\\u6211\\u4EEC\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".then()\"}),\" \\u65B9\\u6CD5\\u5C06\\u8FD9\\u4E9B Promise \\u94FE\\u63A5\\u5728\\u4E00\\u8D77\\uFF0C\\u4ECE\\u800C\\u5141\\u8BB8\\u4EE3\\u7801\\u6309\\u987A\\u5E8F\\u6267\\u884C\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u7B80\\u6D01\\u3001\\u66F4\\u6613\\u4E8E\\u7BA1\\u7406\\u7684\\u65B9\\u5F0F\\u6765\\u5904\\u7406 JavaScript \\u4E2D\\u7684\\u5F02\\u6B65\\u64CD\\u4F5C\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Promise.all()\"}),\" \\u8F7B\\u677E\\u7F16\\u5199\\u5E76\\u884C\\u5F02\\u6B65\\u4EE3\\u7801\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Promise.all()\"}),\" \\u548C\\u56DE\\u8C03\\u90FD\\u53EF\\u4EE5\\u7528\\u4E8E\\u7F16\\u5199\\u5E76\\u884C\\u5F02\\u6B65\\u4EE3\\u7801\\u3002\\u4F46\\u662F\\uFF0C\",(0,n.jsx)(e.code,{children:\"Promise.all()\"}),\" \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u7B80\\u6D01\\u3001\\u66F4\\u6613\\u8BFB\\u7684\\u65B9\\u5F0F\\u6765\\u5904\\u7406\\u591A\\u4E2A Promise\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u5904\\u7406\\u590D\\u6742\\u7684\\u5F02\\u6B65\\u5DE5\\u4F5C\\u6D41\\u7A0B\\u65F6\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function getData1() {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: 1, title: 'Data 1' });\n    }, 1000);\n  });\n}\n\nfunction getData2() {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: 2, title: 'Data 2' });\n    }, 1000);\n  });\n}\n\nfunction getData3() {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: 3, title: 'Data 3' });\n    }, 1000);\n  });\n}\n\nPromise.all([getData1(), getData2(), getData3()])\n  .then((results) => {\n    console.log(results); // Output: [{ id: 1, title: 'Data 1' }, { id: 2, title: 'Data 2' }, { id: 3, title: 'Data 3' }]\n  })\n  .catch((error) => {\n    console.error('Error:', error);\n  });\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528\",(0,n.jsx)(e.code,{children:\".catch()\"}),\"\\u66F4\\u5BB9\\u6613\\u5904\\u7406\\u9519\\u8BEF\\uFF0C\\u4F7F\\u7528\",(0,n.jsx)(e.code,{children:\".finally()\"}),\"\\u4FDD\\u8BC1\\u6E05\\u7406\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Promise \\u901A\\u8FC7\\u5141\\u8BB8\\u60A8\\u5728\\u94FE\\u7684\\u672B\\u5C3E\\u4F7F\\u7528\",(0,n.jsx)(e.code,{children:\".catch()\"}),\"\\u6355\\u83B7\\u9519\\u8BEF\\uFF0C\\u800C\\u4E0D\\u662F\\u5728\\u6BCF\\u4E2A\\u56DE\\u8C03\\u4E2D\\u624B\\u52A8\\u68C0\\u67E5\\u9519\\u8BEF\\uFF0C\\u4ECE\\u800C\\u4F7F\\u9519\\u8BEF\\u5904\\u7406\\u66F4\\u52A0\\u7B80\\u5355\\u3002\\u8FD9\\u4F7F\\u5F97\\u4EE3\\u7801\\u66F4\\u7B80\\u6D01\\u3001\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6B64\\u5916\\uFF0C\",(0,n.jsx)(e.code,{children:\".finally()\"}),\" \\u5141\\u8BB8\\u60A8\\u5728 Promise \\u786E\\u5B9A\\u540E\\u8FD0\\u884C\\u4EE3\\u7801\\uFF0C\\u65E0\\u8BBA\\u5B83\\u662F\\u5426\\u6210\\u529F\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u6E05\\u7406\\u4EFB\\u52A1\\uFF08\\u5982\\u9690\\u85CF\\u5FAE\\u8C03\\u5668\\u6216\\u91CD\\u7F6E UI \\u72B6\\u6001\\uFF09\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function getFirstData() {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve({ id: 1, title: 'First Data' });\n    }, 1000);\n  });\n}\n\nfunction getSecondData(data) {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve({ id: data.id, title: data.title + ' -> Second Data' });\n    }, 1000);\n  });\n}\n\ngetFirstData()\n  .then(getSecondData)\n  .then((data) => {\n    console.log('Success:', data);\n  })\n  .catch((error) => {\n    console.error('Error:', error);\n  })\n  .finally(() => {\n    console.log('This runs no matter what');\n  });\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 Promise\\uFF0C\\u4EE5\\u4E0B\\u60C5\\u51B5\\u4E0D\\u4F1A\\u53D1\\u751F\\uFF0C\\u8FD9\\u4E9B\\u60C5\\u51B5\\u5B58\\u5728\\u4E8E\\u4EC5\\u4F7F\\u7528\\u56DE\\u8C03\\u7684\\u7F16\\u7801\\u4E2D\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u8FC7\\u65E9\\u8C03\\u7528\\u56DE\\u8C03\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u8FC7\\u665A\\u8C03\\u7528\\u56DE\\u8C03\\uFF08\\u6216\\u4ECE\\u4E0D\\u8C03\\u7528\\uFF09\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u8C03\\u7528\\u56DE\\u8C03\\u7684\\u6B21\\u6570\\u592A\\u5C11\\u6216\\u592A\\u591A\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u672A\\u80FD\\u4F20\\u9012\\u4EFB\\u4F55\\u5FC5\\u8981\\u7684\\u73AF\\u5883/\\u53C2\\u6570\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u541E\\u566C\\u53EF\\u80FD\\u53D1\\u751F\\u7684\\u4EFB\\u4F55\\u9519\\u8BEF/\\u5F02\\u5E38\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u7A0D\\u5FAE\\u590D\\u6742\\u7684\\u4EE3\\u7801\\uFF08\\u6709\\u4E89\\u8BAE\\uFF09\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5B9E\\u8DF5\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Try implementing your own \",(0,n.jsxs)(e.a,{href:\"/questions/javascript/promise-resolve\",children:[(0,n.jsx)(e.code,{children:\"Promise.resolve()\"}),\" method\"]}),\", \",(0,n.jsxs)(e.a,{href:\"/questions/javascript/promise-reject\",children:[(0,n.jsx)(e.code,{children:\"Promise.reject()\"}),\" method\"]}),\" and \",(0,n.jsxs)(e.a,{href:\"/questions/javascript/promise-all\",children:[(0,n.jsx)(e.code,{children:\"Promise.all()\"}),\" method\"]}),\" on GreatFrontEnd.\"]}),`\n`]}),`\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/Web/JavaScript/Reference/Global_Objects/Promise\",children:\"Promise | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Callback_function\",children:\"Callback function | MDN\"})}),`\n`]})]})}function T(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(s,t)})):s(t)}var S=T;return P(F);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var v=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},o=(t,e,r,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of D(e))!p.call(t,a)&&a!==r&&i(t,a,{get:()=>e[a],enumerable:!(l=m(e,a))||l.enumerable});return t};var P=(t,e,r)=>(r=t!=null?u(g(t)):{},o(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),T=t=>o(i({},\"__esModule\",{value:!0}),t);var d=v((b,c)=>{c.exports=_jsx_runtime});var S={};f(S,{default:()=>h,frontmatter:()=>j});var n=P(d()),j={title:\"\\u5728 JavaScript \\u4E2D\\u4F7F\\u7528 Promise \\u800C\\u4E0D\\u662F\\u56DE\\u8C03\\u6709\\u4EC0\\u4E48\\u4F18\\u7F3A\\u70B9\\uFF1F\"};function s(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Promise \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u6BD4\\u56DE\\u8C03\\u66F4\\u7B80\\u6D01\\u7684\\u66FF\\u4EE3\\u65B9\\u6848\\uFF0C\\u6709\\u52A9\\u4E8E\\u907F\\u514D\\u56DE\\u8C03\\u5730\\u72F1\\uFF0C\\u5E76\\u4F7F\\u5F02\\u6B65\\u4EE3\\u7801\\u66F4\\u5177\\u53EF\\u8BFB\\u6027\\u3002\\u5B83\\u4EEC\\u6709\\u52A9\\u4E8E\\u8F7B\\u677E\\u7F16\\u5199\\u987A\\u5E8F\\u548C\\u5E76\\u884C\\u7684\\u5F02\\u6B65\\u64CD\\u4F5C\\u3002\\u4F46\\u662F\\uFF0C\\u4F7F\\u7528 Promise \\u53EF\\u80FD\\u4F1A\\u5F15\\u5165\\u7A0D\\u5FAE\\u590D\\u6742\\u7684\\u4EE3\\u7801\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u907F\\u514D\\u96BE\\u4EE5\\u9605\\u8BFB\\u7684\\u56DE\\u8C03\\u5730\\u72F1\\u3002\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u56DE\\u8C03\\u5730\\u72F1\\uFF0C\\u4E5F\\u79F0\\u4E3A\\u201C\\u5384\\u8FD0\\u91D1\\u5B57\\u5854\\u201D\\uFF0C\\u662F\\u6307\\u5728\\u4EE3\\u7801\\u4E2D\\u5177\\u6709\\u591A\\u4E2A\\u5D4C\\u5957\\u56DE\\u8C03\\u65F6\\u53D1\\u751F\\u7684\\u73B0\\u8C61\\u3002\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u4EE3\\u7801\\u96BE\\u4EE5\\u9605\\u8BFB\\u3001\\u7EF4\\u62A4\\u548C\\u8C03\\u8BD5\\u3002\\u4EE5\\u4E0B\\u662F\\u56DE\\u8C03\\u5730\\u72F1\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function getFirstData(callback) {\n  setTimeout(() => {\n    callback({ id: 1, title: 'First Data' });\n  }, 1000);\n}\n\nfunction getSecondData(data, callback) {\n  setTimeout(() => {\n    callback({ id: data.id, title: data.title + ' Second Data' });\n  }, 1000);\n}\n\nfunction getThirdData(data, callback) {\n  setTimeout(() => {\n    callback({ id: data.id, title: data.title + ' Third Data' });\n  }, 1000);\n}\n\n// Callback hell\ngetFirstData((data) => {\n  getSecondData(data, (data) => {\n    getThirdData(data, (result) => {\n      console.log(result); // Output: {id: 1, title: \"First Data Second Data Third Data\"}\n    });\n  });\n});\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Promise \\u901A\\u8FC7\\u4E3A\\u4EE3\\u7801\\u63D0\\u4F9B\\u66F4\\u7EBF\\u6027\\u548C\\u53EF\\u8BFB\\u7684\\u7ED3\\u6784\\u6765\\u89E3\\u51B3\\u56DE\\u8C03\\u5730\\u72F1\\u7684\\u95EE\\u9898\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of sequential asynchronous code using setTimeout and Promises\nfunction getFirstData() {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: 1, title: 'First Data' });\n    }, 1000);\n  });\n}\n\nfunction getSecondData(data) {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: data.id, title: data.title + ' Second Data' });\n    }, 1000);\n  });\n}\n\nfunction getThirdData(data) {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: data.id, title: data.title + ' Third Data' });\n    }, 1000);\n  });\n}\n\ngetFirstData()\n  .then(getSecondData)\n  .then(getThirdData)\n  .then((data) => {\n    console.log(data); // Output: {id: 1, title: \"First Data Second Data Third Data\"}\n  })\n  .catch((error) => console.error('Error:', error));\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".then()\"}),\" \\u8F7B\\u677E\\u7F16\\u5199\\u53EF\\u8BFB\\u7684\\u987A\\u5E8F\\u5F02\\u6B65\\u4EE3\\u7801\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u4E0A\\u9762\\u7684\\u4EE3\\u7801\\u793A\\u4F8B\\u4E2D\\uFF0C\\u6211\\u4EEC\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\".then()\"}),\" \\u65B9\\u6CD5\\u5C06\\u8FD9\\u4E9B Promise \\u94FE\\u63A5\\u5728\\u4E00\\u8D77\\uFF0C\\u4ECE\\u800C\\u5141\\u8BB8\\u4EE3\\u7801\\u6309\\u987A\\u5E8F\\u6267\\u884C\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u7B80\\u6D01\\u3001\\u66F4\\u6613\\u4E8E\\u7BA1\\u7406\\u7684\\u65B9\\u5F0F\\u6765\\u5904\\u7406 JavaScript \\u4E2D\\u7684\\u5F02\\u6B65\\u64CD\\u4F5C\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Promise.all()\"}),\" \\u8F7B\\u677E\\u7F16\\u5199\\u5E76\\u884C\\u5F02\\u6B65\\u4EE3\\u7801\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Promise.all()\"}),\" \\u548C\\u56DE\\u8C03\\u90FD\\u53EF\\u4EE5\\u7528\\u4E8E\\u7F16\\u5199\\u5E76\\u884C\\u5F02\\u6B65\\u4EE3\\u7801\\u3002\\u4F46\\u662F\\uFF0C\",(0,n.jsx)(e.code,{children:\"Promise.all()\"}),\" \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u7B80\\u6D01\\u3001\\u66F4\\u6613\\u8BFB\\u7684\\u65B9\\u5F0F\\u6765\\u5904\\u7406\\u591A\\u4E2A Promise\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u5904\\u7406\\u590D\\u6742\\u7684\\u5F02\\u6B65\\u5DE5\\u4F5C\\u6D41\\u7A0B\\u65F6\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function getData1() {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: 1, title: 'Data 1' });\n    }, 1000);\n  });\n}\n\nfunction getData2() {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: 2, title: 'Data 2' });\n    }, 1000);\n  });\n}\n\nfunction getData3() {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      resolve({ id: 3, title: 'Data 3' });\n    }, 1000);\n  });\n}\n\nPromise.all([getData1(), getData2(), getData3()])\n  .then((results) => {\n    console.log(results); // Output: [{ id: 1, title: 'Data 1' }, { id: 2, title: 'Data 2' }, { id: 3, title: 'Data 3' }]\n  })\n  .catch((error) => {\n    console.error('Error:', error);\n  });\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F7F\\u7528\",(0,n.jsx)(e.code,{children:\".catch()\"}),\"\\u66F4\\u5BB9\\u6613\\u5904\\u7406\\u9519\\u8BEF\\uFF0C\\u4F7F\\u7528\",(0,n.jsx)(e.code,{children:\".finally()\"}),\"\\u4FDD\\u8BC1\\u6E05\\u7406\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Promise \\u901A\\u8FC7\\u5141\\u8BB8\\u60A8\\u5728\\u94FE\\u7684\\u672B\\u5C3E\\u4F7F\\u7528\",(0,n.jsx)(e.code,{children:\".catch()\"}),\"\\u6355\\u83B7\\u9519\\u8BEF\\uFF0C\\u800C\\u4E0D\\u662F\\u5728\\u6BCF\\u4E2A\\u56DE\\u8C03\\u4E2D\\u624B\\u52A8\\u68C0\\u67E5\\u9519\\u8BEF\\uFF0C\\u4ECE\\u800C\\u4F7F\\u9519\\u8BEF\\u5904\\u7406\\u66F4\\u52A0\\u7B80\\u5355\\u3002\\u8FD9\\u4F7F\\u5F97\\u4EE3\\u7801\\u66F4\\u7B80\\u6D01\\u3001\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6B64\\u5916\\uFF0C\",(0,n.jsx)(e.code,{children:\".finally()\"}),\" \\u5141\\u8BB8\\u60A8\\u5728 Promise \\u786E\\u5B9A\\u540E\\u8FD0\\u884C\\u4EE3\\u7801\\uFF0C\\u65E0\\u8BBA\\u5B83\\u662F\\u5426\\u6210\\u529F\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u6E05\\u7406\\u4EFB\\u52A1\\uFF08\\u5982\\u9690\\u85CF\\u5FAE\\u8C03\\u5668\\u6216\\u91CD\\u7F6E UI \\u72B6\\u6001\\uFF09\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function getFirstData() {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve({ id: 1, title: 'First Data' });\n    }, 1000);\n  });\n}\n\nfunction getSecondData(data) {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve({ id: data.id, title: data.title + ' -> Second Data' });\n    }, 1000);\n  });\n}\n\ngetFirstData()\n  .then(getSecondData)\n  .then((data) => {\n    console.log('Success:', data);\n  })\n  .catch((error) => {\n    console.error('Error:', error);\n  })\n  .finally(() => {\n    console.log('This runs no matter what');\n  });\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 Promise\\uFF0C\\u4EE5\\u4E0B\\u60C5\\u51B5\\u4E0D\\u4F1A\\u53D1\\u751F\\uFF0C\\u8FD9\\u4E9B\\u60C5\\u51B5\\u5B58\\u5728\\u4E8E\\u4EC5\\u4F7F\\u7528\\u56DE\\u8C03\\u7684\\u7F16\\u7801\\u4E2D\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u8FC7\\u65E9\\u8C03\\u7528\\u56DE\\u8C03\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u8FC7\\u665A\\u8C03\\u7528\\u56DE\\u8C03\\uFF08\\u6216\\u4ECE\\u4E0D\\u8C03\\u7528\\uFF09\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u8C03\\u7528\\u56DE\\u8C03\\u7684\\u6B21\\u6570\\u592A\\u5C11\\u6216\\u592A\\u591A\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u672A\\u80FD\\u4F20\\u9012\\u4EFB\\u4F55\\u5FC5\\u8981\\u7684\\u73AF\\u5883/\\u53C2\\u6570\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u541E\\u566C\\u53EF\\u80FD\\u53D1\\u751F\\u7684\\u4EFB\\u4F55\\u9519\\u8BEF/\\u5F02\\u5E38\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u7A0D\\u5FAE\\u590D\\u6742\\u7684\\u4EE3\\u7801\\uFF08\\u6709\\u4E89\\u8BAE\\uFF09\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5B9E\\u8DF5\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Try implementing your own \",(0,n.jsxs)(e.a,{href:\"/questions/javascript/promise-resolve\",children:[(0,n.jsx)(e.code,{children:\"Promise.resolve()\"}),\" method\"]}),\", \",(0,n.jsxs)(e.a,{href:\"/questions/javascript/promise-reject\",children:[(0,n.jsx)(e.code,{children:\"Promise.reject()\"}),\" method\"]}),\" and \",(0,n.jsxs)(e.a,{href:\"/questions/javascript/promise-all\",children:[(0,n.jsx)(e.code,{children:\"Promise.all()\"}),\" method\"]}),\" on GreatFrontEnd.\"]}),`\n`]}),`\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/Web/JavaScript/Reference/Global_Objects/Promise\",children:\"Promise | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Callback_function\",children:\"Callback function | MDN\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(s,{...t})}):s(t)}return T(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-rules-of-react-hooks/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-rules-of-react-hooks/en-US.json
index c9c86affb..212b674c7 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-rules-of-react-hooks/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-rules-of-react-hooks/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-are-the-rules-of-react-hooks/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var m=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),g=(o,e)=>{for(var t in e)r(o,t,{get:e[t],enumerable:!0})},l=(o,e,t,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of f(e))!k.call(o,s)&&s!==t&&r(o,s,{get:()=>e[s],enumerable:!(c=d(e,s))||c.enumerable});return o};var y=(o,e,t)=>(t=o!=null?u(p(o)):{},l(e||!o||!o.__esModule?r(t,\"default\",{value:o,enumerable:!0}):t,o)),v=o=>l(r({},\"__esModule\",{value:!0}),o);var i=m((b,a)=>{a.exports=_jsx_runtime});var R={};g(R,{default:()=>x,frontmatter:()=>C});var n=y(i()),C={title:\"What are the rules of React hooks?\"};function h(o){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"React hooks have a few essential rules to ensure they work correctly. Always call hooks at the top level of your React function, never inside loops, conditions, or nested functions. Only call hooks from React function components or custom hooks. These rules ensure that hooks maintain the correct state and lifecycle behavior.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are the rules of React hooks?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Always call hooks at the top level\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hooks should always be called at the top level of your React function. This means you should not call hooks inside loops, conditions, or nested functions. This rule ensures that hooks are called in the same order each time a component renders, which is crucial for maintaining the correct state and lifecycle behavior.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Correct\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n\n  if (count > 0) {\n    // Do something\n  }\n}\n\n// Incorrect\nfunction MyComponent() {\n  if (someCondition) {\n    const [count, setCount] = useState(0); // This will break the rules of hooks\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Only call hooks from React function components or custom hooks\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hooks should only be called from React function components or custom hooks. This rule ensures that hooks are used in the appropriate context where React can manage their state and lifecycle.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Correct\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n  return <div>{count}</div>;\n}\n\n// Correct (custom hook)\nfunction useCustomHook() {\n  const [state, setState] = useState(null);\n  return [state, setState];\n}\n\n// Incorrect\nfunction regularFunction() {\n  const [count, setCount] = useState(0); // This will break the rules of hooks\n}\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Use the \",(0,n.jsx)(e.code,{children:\"eslint-plugin-react-hooks\"}),\" linter\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"To enforce these rules, you can use the \",(0,n.jsx)(e.code,{children:\"eslint-plugin-react-hooks\"}),\" linter. This plugin will help you identify and fix violations of the rules of hooks in your code.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`npm install eslint-plugin-react-hooks --save-dev\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Add the plugin to your ESLint configuration:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"plugins\": [\"react-hooks\"],\n  \"rules\": {\n    \"react-hooks/rules-of-hooks\": \"error\", // Checks rules of hooks\n    \"react-hooks/exhaustive-deps\": \"warn\" // Checks effect dependencies\n  }\n}\n`})}),`\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://react.dev/reference/react/hooks\",children:\"React hooks documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/rules/rules-of-hooks\",children:\"Rules of hooks\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://www.npmjs.com/package/eslint-plugin-react-hooks\",children:[\"Using the \",(0,n.jsx)(e.code,{children:\"eslint-plugin-react-hooks\"}),\" linter\"]})}),`\n`]})]})}function w(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(h,o)})):h(o)}var x=w;return v(R);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),y=(o,e)=>{for(var t in e)r(o,t,{get:e[t],enumerable:!0})},l=(o,e,t,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!m.call(o,s)&&s!==t&&r(o,s,{get:()=>e[s],enumerable:!(c=f(e,s))||c.enumerable});return o};var v=(o,e,t)=>(t=o!=null?d(k(o)):{},l(e||!o||!o.__esModule?r(t,\"default\",{value:o,enumerable:!0}):t,o)),C=o=>l(r({},\"__esModule\",{value:!0}),o);var h=g((j,a)=>{a.exports=_jsx_runtime});var x={};y(x,{default:()=>u,frontmatter:()=>w});var n=v(h()),w={title:\"What are the rules of React hooks?\"};function i(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"React hooks have a few essential rules to ensure they work correctly. Always call hooks at the top level of your React function, never inside loops, conditions, or nested functions. Only call hooks from React function components or custom hooks. These rules ensure that hooks maintain the correct state and lifecycle behavior.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are the rules of React hooks?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Always call hooks at the top level\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hooks should always be called at the top level of your React function. This means you should not call hooks inside loops, conditions, or nested functions. This rule ensures that hooks are called in the same order each time a component renders, which is crucial for maintaining the correct state and lifecycle behavior.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Correct\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n\n  if (count > 0) {\n    // Do something\n  }\n}\n\n// Incorrect\nfunction MyComponent() {\n  if (someCondition) {\n    const [count, setCount] = useState(0); // This will break the rules of hooks\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Only call hooks from React function components or custom hooks\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hooks should only be called from React function components or custom hooks. This rule ensures that hooks are used in the appropriate context where React can manage their state and lifecycle.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Correct\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n  return <div>{count}</div>;\n}\n\n// Correct (custom hook)\nfunction useCustomHook() {\n  const [state, setState] = useState(null);\n  return [state, setState];\n}\n\n// Incorrect\nfunction regularFunction() {\n  const [count, setCount] = useState(0); // This will break the rules of hooks\n}\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Use the \",(0,n.jsx)(e.code,{children:\"eslint-plugin-react-hooks\"}),\" linter\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"To enforce these rules, you can use the \",(0,n.jsx)(e.code,{children:\"eslint-plugin-react-hooks\"}),\" linter. This plugin will help you identify and fix violations of the rules of hooks in your code.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`npm install eslint-plugin-react-hooks --save-dev\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Add the plugin to your ESLint configuration:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"plugins\": [\"react-hooks\"],\n  \"rules\": {\n    \"react-hooks/rules-of-hooks\": \"error\", // Checks rules of hooks\n    \"react-hooks/exhaustive-deps\": \"warn\" // Checks effect dependencies\n  }\n}\n`})}),`\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://react.dev/reference/react/hooks\",children:\"React hooks documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/rules/rules-of-hooks\",children:\"Rules of hooks\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://www.npmjs.com/package/eslint-plugin-react-hooks\",children:[\"Using the \",(0,n.jsx)(e.code,{children:\"eslint-plugin-react-hooks\"}),\" linter\"]})}),`\n`]})]})}function u(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(i,{...o})}):i(o)}return C(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-rules-of-react-hooks/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-rules-of-react-hooks/zh-CN.json
index 4d61eda77..8b963c094 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-rules-of-react-hooks/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-rules-of-react-hooks/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-are-the-rules-of-react-hooks/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),H=(o,n)=>{for(var t in n)c(o,t,{get:n[t],enumerable:!0})},a=(o,n,t,r)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let s of k(n))!f.call(o,s)&&s!==t&&c(o,s,{get:()=>n[s],enumerable:!(r=d(n,s))||r.enumerable});return o};var g=(o,n,t)=>(t=o!=null?u(p(o)):{},a(n||!o||!o.__esModule?c(t,\"default\",{value:o,enumerable:!0}):t,o)),j=o=>a(c({},\"__esModule\",{value:!0}),o);var l=m((_,i)=>{i.exports=_jsx_runtime});var v={};H(v,{default:()=>x,frontmatter:()=>C});var e=g(l()),C={title:\"React Hooks \\u7684\\u89C4\\u5219\\u662F\\u4EC0\\u4E48\\uFF1F\"};function h(o){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsx)(n.p,{children:\"React Hooks \\u6709\\u4E00\\u4E9B\\u57FA\\u672C\\u89C4\\u5219\\u6765\\u786E\\u4FDD\\u5B83\\u4EEC\\u6B63\\u5E38\\u5DE5\\u4F5C\\u3002 \\u59CB\\u7EC8\\u5728 React \\u51FD\\u6570\\u7684\\u9876\\u5C42\\u8C03\\u7528 Hooks\\uFF0C\\u5207\\u52FF\\u5728\\u5FAA\\u73AF\\u3001\\u6761\\u4EF6\\u6216\\u5D4C\\u5957\\u51FD\\u6570\\u5185\\u8C03\\u7528\\u3002 \\u4EC5\\u4ECE React \\u51FD\\u6570\\u7EC4\\u4EF6\\u6216\\u81EA\\u5B9A\\u4E49 Hooks \\u8C03\\u7528 Hooks\\u3002 \\u8FD9\\u4E9B\\u89C4\\u5219\\u786E\\u4FDD Hooks \\u4FDD\\u6301\\u6B63\\u786E\\u7684\\u72B6\\u6001\\u548C\\u751F\\u547D\\u5468\\u671F\\u884C\\u4E3A\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React Hooks \\u7684\\u89C4\\u5219\\u662F\\u4EC0\\u4E48\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u59CB\\u7EC8\\u5728\\u9876\\u5C42\\u8C03\\u7528 Hooks\"}),`\n`,(0,e.jsx)(n.p,{children:\"Hooks \\u5E94\\u8BE5\\u59CB\\u7EC8\\u5728 React \\u51FD\\u6570\\u7684\\u9876\\u5C42\\u8C03\\u7528\\u3002 \\u8FD9\\u610F\\u5473\\u7740\\u4F60\\u4E0D\\u5E94\\u8BE5\\u5728\\u5FAA\\u73AF\\u3001\\u6761\\u4EF6\\u6216\\u5D4C\\u5957\\u51FD\\u6570\\u5185\\u8C03\\u7528 Hooks\\u3002 \\u6B64\\u89C4\\u5219\\u786E\\u4FDD\\u6BCF\\u6B21\\u7EC4\\u4EF6\\u6E32\\u67D3\\u65F6 Hooks \\u4EE5\\u76F8\\u540C\\u7684\\u987A\\u5E8F\\u8C03\\u7528\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u7EF4\\u62A4\\u6B63\\u786E\\u7684\\u72B6\\u6001\\u548C\\u751F\\u547D\\u5468\\u671F\\u884C\\u4E3A\\u81F3\\u5173\\u91CD\\u8981\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// \\u6B63\\u786E\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n\n  if (count > 0) {\n    // \\u505A\\u4E00\\u4E9B\\u4E8B\\u60C5\n  }\n}\n\n// \\u4E0D\\u6B63\\u786E\nfunction MyComponent() {\n  if (someCondition) {\n    const [count, setCount] = useState(0); // \\u8FD9\\u5C06\\u7834\\u574F Hooks \\u7684\\u89C4\\u5219\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EC5\\u4ECE React \\u51FD\\u6570\\u7EC4\\u4EF6\\u6216\\u81EA\\u5B9A\\u4E49 Hooks \\u8C03\\u7528 Hooks\"}),`\n`,(0,e.jsx)(n.p,{children:\"Hooks \\u5E94\\u8BE5\\u4EC5\\u4ECE React \\u51FD\\u6570\\u7EC4\\u4EF6\\u6216\\u81EA\\u5B9A\\u4E49 Hooks \\u8C03\\u7528\\u3002 \\u6B64\\u89C4\\u5219\\u786E\\u4FDD Hooks \\u5728 React \\u53EF\\u4EE5\\u7BA1\\u7406\\u5176\\u72B6\\u6001\\u548C\\u751F\\u547D\\u5468\\u671F\\u7684\\u9002\\u5F53\\u4E0A\\u4E0B\\u6587\\u4E2D\\u88AB\\u4F7F\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// \\u6B63\\u786E\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n  return <div>{count}</div>;\n}\n\n// \\u6B63\\u786E\\uFF08\\u81EA\\u5B9A\\u4E49 Hook\\uFF09\nfunction useCustomHook() {\n  const [state, setState] = useState(null);\n  return [state, setState];\n}\n\n// \\u4E0D\\u6B63\\u786E\nfunction regularFunction() {\n  const [count, setCount] = useState(0); // \\u8FD9\\u5C06\\u7834\\u574F Hooks \\u7684\\u89C4\\u5219\n}\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"eslint-plugin-react-hooks\"}),\" linter\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E3A\\u4E86\\u6267\\u884C\\u8FD9\\u4E9B\\u89C4\\u5219\\uFF0C\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"eslint-plugin-react-hooks\"}),\" linter\\u3002 \\u8FD9\\u4E2A\\u63D2\\u4EF6\\u5C06\\u5E2E\\u52A9\\u4F60\\u8BC6\\u522B\\u548C\\u4FEE\\u590D\\u4EE3\\u7801\\u4E2D Hooks \\u89C4\\u5219\\u7684\\u8FDD\\u89C4\\u884C\\u4E3A\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-bash\",children:`npm install eslint-plugin-react-hooks --save-dev\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5C06\\u63D2\\u4EF6\\u6DFB\\u52A0\\u5230\\u4F60\\u7684 ESLint \\u914D\\u7F6E\\u4E2D\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"plugins\": [\"react-hooks\"],\n  \"rules\": {\n    \"react-hooks/rules-of-hooks\": \"error\", // \\u68C0\\u67E5 Hooks \\u7684\\u89C4\\u5219\n    \"react-hooks/exhaustive-deps\": \"warn\" // \\u68C0\\u67E5 effect \\u4F9D\\u8D56\\u9879\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react/hooks\",children:\"React hooks documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/rules/rules-of-hooks\",children:\"Rules of hooks\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://www.npmjs.com/package/eslint-plugin-react-hooks\",children:[\"Using the \",(0,e.jsx)(n.code,{children:\"eslint-plugin-react-hooks\"}),\" linter\"]})}),`\n`]})]})}function R(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,Object.assign({},o,{children:(0,e.jsx)(h,o)})):h(o)}var x=R;return j(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var H=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),g=(o,n)=>{for(var t in n)c(o,t,{get:n[t],enumerable:!0})},a=(o,n,t,r)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let s of p(n))!m.call(o,s)&&s!==t&&c(o,s,{get:()=>n[s],enumerable:!(r=k(n,s))||r.enumerable});return o};var C=(o,n,t)=>(t=o!=null?d(f(o)):{},a(n||!o||!o.__esModule?c(t,\"default\",{value:o,enumerable:!0}):t,o)),R=o=>a(c({},\"__esModule\",{value:!0}),o);var l=H((S,i)=>{i.exports=_jsx_runtime});var j={};g(j,{default:()=>u,frontmatter:()=>x});var e=C(l()),x={title:\"React Hooks \\u7684\\u89C4\\u5219\\u662F\\u4EC0\\u4E48\\uFF1F\"};function h(o){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsx)(n.p,{children:\"React Hooks \\u6709\\u4E00\\u4E9B\\u57FA\\u672C\\u89C4\\u5219\\u6765\\u786E\\u4FDD\\u5B83\\u4EEC\\u6B63\\u5E38\\u5DE5\\u4F5C\\u3002 \\u59CB\\u7EC8\\u5728 React \\u51FD\\u6570\\u7684\\u9876\\u5C42\\u8C03\\u7528 Hooks\\uFF0C\\u5207\\u52FF\\u5728\\u5FAA\\u73AF\\u3001\\u6761\\u4EF6\\u6216\\u5D4C\\u5957\\u51FD\\u6570\\u5185\\u8C03\\u7528\\u3002 \\u4EC5\\u4ECE React \\u51FD\\u6570\\u7EC4\\u4EF6\\u6216\\u81EA\\u5B9A\\u4E49 Hooks \\u8C03\\u7528 Hooks\\u3002 \\u8FD9\\u4E9B\\u89C4\\u5219\\u786E\\u4FDD Hooks \\u4FDD\\u6301\\u6B63\\u786E\\u7684\\u72B6\\u6001\\u548C\\u751F\\u547D\\u5468\\u671F\\u884C\\u4E3A\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React Hooks \\u7684\\u89C4\\u5219\\u662F\\u4EC0\\u4E48\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u59CB\\u7EC8\\u5728\\u9876\\u5C42\\u8C03\\u7528 Hooks\"}),`\n`,(0,e.jsx)(n.p,{children:\"Hooks \\u5E94\\u8BE5\\u59CB\\u7EC8\\u5728 React \\u51FD\\u6570\\u7684\\u9876\\u5C42\\u8C03\\u7528\\u3002 \\u8FD9\\u610F\\u5473\\u7740\\u4F60\\u4E0D\\u5E94\\u8BE5\\u5728\\u5FAA\\u73AF\\u3001\\u6761\\u4EF6\\u6216\\u5D4C\\u5957\\u51FD\\u6570\\u5185\\u8C03\\u7528 Hooks\\u3002 \\u6B64\\u89C4\\u5219\\u786E\\u4FDD\\u6BCF\\u6B21\\u7EC4\\u4EF6\\u6E32\\u67D3\\u65F6 Hooks \\u4EE5\\u76F8\\u540C\\u7684\\u987A\\u5E8F\\u8C03\\u7528\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u7EF4\\u62A4\\u6B63\\u786E\\u7684\\u72B6\\u6001\\u548C\\u751F\\u547D\\u5468\\u671F\\u884C\\u4E3A\\u81F3\\u5173\\u91CD\\u8981\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// \\u6B63\\u786E\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n\n  if (count > 0) {\n    // \\u505A\\u4E00\\u4E9B\\u4E8B\\u60C5\n  }\n}\n\n// \\u4E0D\\u6B63\\u786E\nfunction MyComponent() {\n  if (someCondition) {\n    const [count, setCount] = useState(0); // \\u8FD9\\u5C06\\u7834\\u574F Hooks \\u7684\\u89C4\\u5219\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EC5\\u4ECE React \\u51FD\\u6570\\u7EC4\\u4EF6\\u6216\\u81EA\\u5B9A\\u4E49 Hooks \\u8C03\\u7528 Hooks\"}),`\n`,(0,e.jsx)(n.p,{children:\"Hooks \\u5E94\\u8BE5\\u4EC5\\u4ECE React \\u51FD\\u6570\\u7EC4\\u4EF6\\u6216\\u81EA\\u5B9A\\u4E49 Hooks \\u8C03\\u7528\\u3002 \\u6B64\\u89C4\\u5219\\u786E\\u4FDD Hooks \\u5728 React \\u53EF\\u4EE5\\u7BA1\\u7406\\u5176\\u72B6\\u6001\\u548C\\u751F\\u547D\\u5468\\u671F\\u7684\\u9002\\u5F53\\u4E0A\\u4E0B\\u6587\\u4E2D\\u88AB\\u4F7F\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// \\u6B63\\u786E\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n  return <div>{count}</div>;\n}\n\n// \\u6B63\\u786E\\uFF08\\u81EA\\u5B9A\\u4E49 Hook\\uFF09\nfunction useCustomHook() {\n  const [state, setState] = useState(null);\n  return [state, setState];\n}\n\n// \\u4E0D\\u6B63\\u786E\nfunction regularFunction() {\n  const [count, setCount] = useState(0); // \\u8FD9\\u5C06\\u7834\\u574F Hooks \\u7684\\u89C4\\u5219\n}\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"eslint-plugin-react-hooks\"}),\" linter\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E3A\\u4E86\\u6267\\u884C\\u8FD9\\u4E9B\\u89C4\\u5219\\uFF0C\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"eslint-plugin-react-hooks\"}),\" linter\\u3002 \\u8FD9\\u4E2A\\u63D2\\u4EF6\\u5C06\\u5E2E\\u52A9\\u4F60\\u8BC6\\u522B\\u548C\\u4FEE\\u590D\\u4EE3\\u7801\\u4E2D Hooks \\u89C4\\u5219\\u7684\\u8FDD\\u89C4\\u884C\\u4E3A\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-bash\",children:`npm install eslint-plugin-react-hooks --save-dev\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5C06\\u63D2\\u4EF6\\u6DFB\\u52A0\\u5230\\u4F60\\u7684 ESLint \\u914D\\u7F6E\\u4E2D\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-json\",children:`{\n  \"plugins\": [\"react-hooks\"],\n  \"rules\": {\n    \"react-hooks/rules-of-hooks\": \"error\", // \\u68C0\\u67E5 Hooks \\u7684\\u89C4\\u5219\n    \"react-hooks/exhaustive-deps\": \"warn\" // \\u68C0\\u67E5 effect \\u4F9D\\u8D56\\u9879\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react/hooks\",children:\"React hooks documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/rules/rules-of-hooks\",children:\"Rules of hooks\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://www.npmjs.com/package/eslint-plugin-react-hooks\",children:[\"Using the \",(0,e.jsx)(n.code,{children:\"eslint-plugin-react-hooks\"}),\" linter\"]})}),`\n`]})]})}function u(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,{...o,children:(0,e.jsx)(h,{...o})}):h(o)}return R(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/en-US.json
index 64356202e..4c902e59e 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var i in e)l(n,i,{get:e[i],enumerable:!0})},c=(n,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!u.call(n,r)&&r!==i&&l(n,r,{get:()=>e[r],enumerable:!(o=f(e,r))||o.enumerable});return n};var g=(n,e,i)=>(i=n!=null?s(p(n)):{},c(e||!n||!n.__esModule?l(i,\"default\",{value:n,enumerable:!0}):i,n)),w=n=>c(l({},\"__esModule\",{value:!0}),n);var d=x((M,a)=>{a.exports=_jsx_runtime});var y={};v(y,{default:()=>_,frontmatter:()=>j});var t=g(d()),j={title:\"What are the various clearing techniques and which is appropriate for what context?\"};function h(n){let e=Object.assign({ul:\"ul\",li:\"li\",code:\"code\",p:\"p\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[\"Empty \",(0,t.jsx)(e.code,{children:\"div\"}),\" method: \",(0,t.jsx)(e.code,{children:'<div style=\"clear:both;\"></div>'}),\".\"]}),`\n`,(0,t.jsxs)(e.li,{children:[\"Clearfix method: Refer to the \",(0,t.jsx)(e.code,{children:\".clearfix\"}),\" class above.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"overflow: auto\"}),\" or \",(0,t.jsx)(e.code,{children:\"overflow: hidden\"}),\" method: Parent will establish a new block formatting context and expand to contains its floated children.\"]}),`\n`]}),`\n`,(0,t.jsxs)(e.p,{children:[\"In large projects, having a utility \",(0,t.jsx)(e.code,{children:\".clearfix\"}),\" class will be very helpful. \",(0,t.jsx)(e.code,{children:\"overflow: hidden\"}),\" might clip children if the children is taller than the parent and is not very ideal.\"]})]})}function b(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var _=b;return w(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var f=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),w=(n,e)=>{for(var i in e)l(n,i,{get:e[i],enumerable:!0})},c=(n,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!x.call(n,r)&&r!==i&&l(n,r,{get:()=>e[r],enumerable:!(o=m(e,r))||o.enumerable});return n};var g=(n,e,i)=>(i=n!=null?f(u(n)):{},c(e||!n||!n.__esModule?l(i,\"default\",{value:n,enumerable:!0}):i,n)),_=n=>c(l({},\"__esModule\",{value:!0}),n);var a=v((C,d)=>{d.exports=_jsx_runtime});var y={};w(y,{default:()=>s,frontmatter:()=>j});var t=g(a()),j={title:\"What are the various clearing techniques and which is appropriate for what context?\"};function h(n){let e={code:\"code\",li:\"li\",p:\"p\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[\"Empty \",(0,t.jsx)(e.code,{children:\"div\"}),\" method: \",(0,t.jsx)(e.code,{children:'<div style=\"clear:both;\"></div>'}),\".\"]}),`\n`,(0,t.jsxs)(e.li,{children:[\"Clearfix method: Refer to the \",(0,t.jsx)(e.code,{children:\".clearfix\"}),\" class above.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"overflow: auto\"}),\" or \",(0,t.jsx)(e.code,{children:\"overflow: hidden\"}),\" method: Parent will establish a new block formatting context and expand to contains its floated children.\"]}),`\n`]}),`\n`,(0,t.jsxs)(e.p,{children:[\"In large projects, having a utility \",(0,t.jsx)(e.code,{children:\".clearfix\"}),\" class will be very helpful. \",(0,t.jsx)(e.code,{children:\"overflow: hidden\"}),\" might clip children if the children is taller than the parent and is not very ideal.\"]})]})}function s(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(h,{...n})}):h(n)}return _(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/pt-BR.json
index 9344bd1b3..52c61b1c3 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var x=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),v=(o,e)=>{for(var t in e)r(o,t,{get:e[t],enumerable:!0})},c=(o,e,t,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of h(e))!p.call(o,i)&&i!==t&&r(o,i,{get:()=>e[i],enumerable:!(a=m(e,i))||a.enumerable});return o};var j=(o,e,t)=>(t=o!=null?u(f(o)):{},c(e||!o||!o.__esModule?r(t,\"default\",{value:o,enumerable:!0}):t,o)),_=o=>c(r({},\"__esModule\",{value:!0}),o);var s=x((q,l)=>{l.exports=_jsx_runtime});var w={};v(w,{default:()=>g,frontmatter:()=>M});var n=j(s()),M={title:\"Quais s\\xE3o as v\\xE1rias t\\xE9cnicas de limpeza e qual \\xE9 apropriada para qual contexto?\"};function d(o){let e=Object.assign({ul:\"ul\",li:\"li\",code:\"code\",p:\"p\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"M\\xE9todo do \",(0,n.jsx)(e.code,{children:\"div\"}),\" vazio: \",(0,n.jsx)(e.code,{children:'<div style=\"clear:both;\"></div>'}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"M\\xE9todo de Clearfix: Consulte a classe \",(0,n.jsx)(e.code,{children:\".clearfix\"}),\" mencionada anteriormente.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"M\\xE9todo \",(0,n.jsx)(e.code,{children:\"overflow: auto\"}),\" ou \",(0,n.jsx)(e.code,{children:\"overflow: hidden\"}),\": O pai estabelecer\\xE1 um novo contexto de formata\\xE7\\xE3o em bloco e se expandir\\xE1 para conter seus filhos flutuantes.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Em projetos grandes, ter uma classe utilit\\xE1ria \",(0,n.jsx)(e.code,{children:\".clearfix\"}),\" ser\\xE1 muito \\xFAtil. \",(0,n.jsx)(e.code,{children:\"overflow: hidden\"}),\" pode cortar os filhos se eles forem mais altos que o pai, e isso n\\xE3o \\xE9 muito ideal.\"]})]})}function b(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(d,o)})):d(o)}var g=b;return _(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var v=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),_=(o,e)=>{for(var t in e)r(o,t,{get:e[t],enumerable:!0})},l=(o,e,t,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of f(e))!x.call(o,i)&&i!==t&&r(o,i,{get:()=>e[i],enumerable:!(a=h(e,i))||a.enumerable});return o};var j=(o,e,t)=>(t=o!=null?m(p(o)):{},l(e||!o||!o.__esModule?r(t,\"default\",{value:o,enumerable:!0}):t,o)),M=o=>l(r({},\"__esModule\",{value:!0}),o);var d=v((g,c)=>{c.exports=_jsx_runtime});var C={};_(C,{default:()=>u,frontmatter:()=>w});var n=j(d()),w={title:\"Quais s\\xE3o as v\\xE1rias t\\xE9cnicas de limpeza e qual \\xE9 apropriada para qual contexto?\"};function s(o){let e={code:\"code\",li:\"li\",p:\"p\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"M\\xE9todo do \",(0,n.jsx)(e.code,{children:\"div\"}),\" vazio: \",(0,n.jsx)(e.code,{children:'<div style=\"clear:both;\"></div>'}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"M\\xE9todo de Clearfix: Consulte a classe \",(0,n.jsx)(e.code,{children:\".clearfix\"}),\" mencionada anteriormente.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"M\\xE9todo \",(0,n.jsx)(e.code,{children:\"overflow: auto\"}),\" ou \",(0,n.jsx)(e.code,{children:\"overflow: hidden\"}),\": O pai estabelecer\\xE1 um novo contexto de formata\\xE7\\xE3o em bloco e se expandir\\xE1 para conter seus filhos flutuantes.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Em projetos grandes, ter uma classe utilit\\xE1ria \",(0,n.jsx)(e.code,{children:\".clearfix\"}),\" ser\\xE1 muito \\xFAtil. \",(0,n.jsx)(e.code,{children:\"overflow: hidden\"}),\" pode cortar os filhos se eles forem mais altos que o pai, e isso n\\xE3o \\xE9 muito ideal.\"]})]})}function u(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(s,{...o})}):s(o)}return M(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/zh-CN.json
index 4daa22ef8..b473d1158 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var j=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),_=(n,e)=>{for(var r in e)o(n,r,{get:e[r],enumerable:!0})},d=(n,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of f(e))!m.call(n,i)&&i!==r&&o(n,i,{get:()=>e[i],enumerable:!(t=x(e,i))||t.enumerable});return n};var p=(n,e,r)=>(r=n!=null?h(u(n)):{},d(e||!n||!n.__esModule?o(r,\"default\",{value:n,enumerable:!0}):r,n)),v=n=>d(o({},\"__esModule\",{value:!0}),n);var s=j((y,l)=>{l.exports=_jsx_runtime});var C={};_(C,{default:()=>b,frontmatter:()=>g});var c=p(s()),g={title:\"\\u6709\\u54EA\\u4E9B\\u6E05\\u9664\\u6D6E\\u52A8\\u7684\\u65B9\\u6CD5\\uFF1F\\u5728\\u4EC0\\u4E48\\u60C5\\u51B5\\u4E0B\\u4F7F\\u7528\\u54EA\\u79CD\\u65B9\\u6CD5\\uFF1F\"};function a(n){let e=Object.assign({ul:\"ul\",li:\"li\",code:\"code\",p:\"p\"},n.components);return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(e.ul,{children:[`\n`,(0,c.jsxs)(e.li,{children:[\"\\u7A7A \",(0,c.jsx)(e.code,{children:\"div\"}),\" \\u65B9\\u6CD5\\uFF1A\",(0,c.jsx)(e.code,{children:'<div style=\"clear:both;\"></div>'}),\"\\u3002\"]}),`\n`,(0,c.jsxs)(e.li,{children:[\"Clearfix \\u65B9\\u6CD5\\uFF1A\\u53C2\\u8003\\u4E0A\\u9762\\u7684 \",(0,c.jsx)(e.code,{children:\".clearfix\"}),\" \\u7C7B\\u3002\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"overflow: auto\"}),\" \\u6216 \",(0,c.jsx)(e.code,{children:\"overflow: hidden\"}),\" \\u65B9\\u6CD5\\uFF1A\\u7236\\u5143\\u7D20\\u5C06\\u5EFA\\u7ACB\\u4E00\\u4E2A\\u65B0\\u7684\\u5757\\u7EA7\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587\\uFF0C\\u5E76\\u6269\\u5C55\\u4EE5\\u5305\\u542B\\u5176\\u6D6E\\u52A8\\u7684\\u5B50\\u5143\\u7D20\\u3002\"]}),`\n`]}),`\n`,(0,c.jsxs)(e.p,{children:[\"\\u5728\\u5927\\u578B\\u9879\\u76EE\\u4E2D\\uFF0C\\u62E5\\u6709\\u4E00\\u4E2A\\u5B9E\\u7528\\u7A0B\\u5E8F \",(0,c.jsx)(e.code,{children:\".clearfix\"}),\" \\u7C7B\\u5C06\\u975E\\u5E38\\u6709\\u5E2E\\u52A9\\u3002\\u5982\\u679C\\u5B50\\u5143\\u7D20\\u6BD4\\u7236\\u5143\\u7D20\\u9AD8\\u5E76\\u4E14\\u4E0D\\u592A\\u7406\\u60F3\\uFF0C\",(0,c.jsx)(e.code,{children:\"overflow: hidden\"}),\" \\u53EF\\u80FD\\u4F1A\\u526A\\u5207\\u5B50\\u5143\\u7D20\\u3002\"]})]})}function w(n={}){let{wrapper:e}=n.components||{};return e?(0,c.jsx)(e,Object.assign({},n,{children:(0,c.jsx)(a,n)})):a(n)}var b=w;return v(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var x=Object.create;var d=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var p=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var r in e)d(n,r,{get:e[r],enumerable:!0})},l=(n,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!_.call(n,o)&&o!==r&&d(n,o,{get:()=>e[o],enumerable:!(i=f(e,o))||i.enumerable});return n};var j=(n,e,r)=>(r=n!=null?x(m(n)):{},l(e||!n||!n.__esModule?d(r,\"default\",{value:n,enumerable:!0}):r,n)),w=n=>l(d({},\"__esModule\",{value:!0}),n);var h=p((y,t)=>{t.exports=_jsx_runtime});var M={};v(M,{default:()=>s,frontmatter:()=>C});var c=j(h()),C={title:\"\\u6709\\u54EA\\u4E9B\\u6E05\\u9664\\u6D6E\\u52A8\\u7684\\u65B9\\u6CD5\\uFF1F\\u5728\\u4EC0\\u4E48\\u60C5\\u51B5\\u4E0B\\u4F7F\\u7528\\u54EA\\u79CD\\u65B9\\u6CD5\\uFF1F\"};function a(n){let e={code:\"code\",li:\"li\",p:\"p\",ul:\"ul\",...n.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(e.ul,{children:[`\n`,(0,c.jsxs)(e.li,{children:[\"\\u7A7A \",(0,c.jsx)(e.code,{children:\"div\"}),\" \\u65B9\\u6CD5\\uFF1A\",(0,c.jsx)(e.code,{children:'<div style=\"clear:both;\"></div>'}),\"\\u3002\"]}),`\n`,(0,c.jsxs)(e.li,{children:[\"Clearfix \\u65B9\\u6CD5\\uFF1A\\u53C2\\u8003\\u4E0A\\u9762\\u7684 \",(0,c.jsx)(e.code,{children:\".clearfix\"}),\" \\u7C7B\\u3002\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"overflow: auto\"}),\" \\u6216 \",(0,c.jsx)(e.code,{children:\"overflow: hidden\"}),\" \\u65B9\\u6CD5\\uFF1A\\u7236\\u5143\\u7D20\\u5C06\\u5EFA\\u7ACB\\u4E00\\u4E2A\\u65B0\\u7684\\u5757\\u7EA7\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587\\uFF0C\\u5E76\\u6269\\u5C55\\u4EE5\\u5305\\u542B\\u5176\\u6D6E\\u52A8\\u7684\\u5B50\\u5143\\u7D20\\u3002\"]}),`\n`]}),`\n`,(0,c.jsxs)(e.p,{children:[\"\\u5728\\u5927\\u578B\\u9879\\u76EE\\u4E2D\\uFF0C\\u62E5\\u6709\\u4E00\\u4E2A\\u5B9E\\u7528\\u7A0B\\u5E8F \",(0,c.jsx)(e.code,{children:\".clearfix\"}),\" \\u7C7B\\u5C06\\u975E\\u5E38\\u6709\\u5E2E\\u52A9\\u3002\\u5982\\u679C\\u5B50\\u5143\\u7D20\\u6BD4\\u7236\\u5143\\u7D20\\u9AD8\\u5E76\\u4E14\\u4E0D\\u592A\\u7406\\u60F3\\uFF0C\",(0,c.jsx)(e.code,{children:\"overflow: hidden\"}),\" \\u53EF\\u80FD\\u4F1A\\u526A\\u5207\\u5B50\\u5143\\u7D20\\u3002\"]})]})}function s(n={}){let{wrapper:e}=n.components||{};return e?(0,c.jsx)(e,{...n,children:(0,c.jsx)(a,{...n})}):a(n)}return w(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-various-data-types-in-javascript/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-various-data-types-in-javascript/en-US.json
index 1e55f9e2e..d3f35d119 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-various-data-types-in-javascript/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-various-data-types-in-javascript/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-various-data-types-in-javascript/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),y=(r,e)=>{for(var t in e)i(r,t,{get:e[t],enumerable:!0})},a=(r,e,t,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of p(e))!m.call(r,l)&&l!==t&&i(r,l,{get:()=>e[l],enumerable:!(o=g(e,l))||o.enumerable});return r};var b=(r,e,t)=>(t=r!=null?h(u(r)):{},a(e||!r||!r.__esModule?i(t,\"default\",{value:r,enumerable:!0}):t,r)),v=r=>a(i({},\"__esModule\",{value:!0}),r);var s=f((R,c)=>{c.exports=_jsx_runtime});var N={};y(N,{default:()=>S,frontmatter:()=>j});var n=b(s()),j={title:\"What are the various data types in JavaScript?\"};function d(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",strong:\"strong\",ul:\"ul\",li:\"li\",a:\"a\",hr:\"hr\",h3:\"h3\",ol:\"ol\",pre:\"pre\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, data types can be categorized into \",(0,n.jsx)(e.code,{children:\"primitive\"}),\" and \",(0,n.jsx)(e.code,{children:\"non-primitive\"}),\" types:\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Primitive data types\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Number\"}),\": Represents both integers and floating-point numbers.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"String\"}),\": Represents sequences of characters.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Boolean\"}),\": Represents \",(0,n.jsx)(e.code,{children:\"true\"}),\" or \",(0,n.jsx)(e.code,{children:\"false\"}),\" values.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Undefined\"}),\": A variable that has been declared but not assigned a value.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Null\"}),\": Represents the intentional absence of any object value.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Symbol\"}),\": A unique and immutable value used as object property keys. Read more in our \",(0,n.jsxs)(e.a,{href:\"/questions/quiz/what-are-symbols-used-for\",children:[\"deep dive on \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s\"]})]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"BigInt\"}),\": Represents integers with arbitrary precision.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Non-primitive (Reference) data types\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Object\"}),\": Used to store collections of data.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Array\"}),\": An ordered collection of data.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Function\"}),\": A callable object.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Date\"}),\": Represents dates and times.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"RegExp\"}),\": Represents regular expressions.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Map\"}),\": A collection of keyed data items.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Set\"}),\": A collection of unique values.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"The primitive types store a single value, while non-primitive types can store collections of data or complex entities.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Data types in JavaScript\"}),`\n`,(0,n.jsx)(e.p,{children:\"JavaScript, like many programming languages, has a variety of data types to represent different kinds of data. The main data types in JavaScript can be divided into two categories: primitive and non-primitive (reference) types.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Primitive data types\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Number\"}),\": Represents both integer and floating-point numbers. JavaScript only has one type of number.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let age = 25;\nlet price = 99.99;\nconsole.log(price); // 99.99\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"2\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"String\"}),\": Represents sequences of characters. \",(0,n.jsx)(e.code,{children:\"Strings\"}),\" can be enclosed in single quotes, double quotes, or backticks (for template literals).\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let myName = 'John Doe';\nlet greeting = 'Hello, world!';\nlet message = \\`Welcome, \\${myName}!\\`;\nconsole.log(message); // \"Welcome, John Doe!\"\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"3\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Boolean\"}),\": Represents logical entities and can have two values: \",(0,n.jsx)(e.code,{children:\"true\"}),\" or \",(0,n.jsx)(e.code,{children:\"false\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let isActive = true;\nlet isOver18 = false;\nconsole.log(isOver18); // false\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"4\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Undefined\"}),\": A variable that has been declared but not assigned a value is of type \",(0,n.jsx)(e.code,{children:\"undefined\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let user;\nconsole.log(user); // undefined\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"5\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Null\"}),\": Represents the intentional absence of any object value. It is a primitive value and is treated as a falsy value.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let user = null;\nconsole.log(user); // null\nif (!user) {\n  console.log('user is a falsy value');\n}\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"6\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Symbol\"}),\": A unique and immutable \",(0,n.jsx)(e.code,{children:\"primitive\"}),\" value, typically used as the key of an object property.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let sym1 = Symbol();\nlet sym2 = Symbol('description');\nconsole.log(sym1); // Symbol()\nconsole.log(sym2); // Symbol(description)\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"7\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"BigInt\"}),\": Used for representing integers with arbitrary precision, useful for working with very large numbers.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let bigNumber = BigInt(9007199254740991);\nlet anotherBigNumber = 1234567890123456789012345678901234567890n;\nconsole.log(bigNumber); // 9007199254740991n\nconsole.log(anotherBigNumber); // 1234567890123456789012345678901234567890n\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Non-primitive (reference) data types\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Object\"}),\": It is used to store collections of data and more complex entities. \",(0,n.jsx)(e.code,{children:\"Objects\"}),\" are created using curly braces \",(0,n.jsx)(e.code,{children:\"{}\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let person = {\n  name: 'Alice',\n  age: 30,\n};\nconsole.log(person); // {name: \"Alice\", age: 30}\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"2\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Array\"}),\": A special type of object used for storing ordered collections of data. \",(0,n.jsx)(e.code,{children:\"Arrays\"}),\" are created using square brackets \",(0,n.jsx)(e.code,{children:\"[]\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let numbers = [1, 2, 3, 4, 5];\nconsole.log(numbers);\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"3\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Function\"}),\": \",(0,n.jsx)(e.code,{children:\"Functions\"}),\" in JavaScript are \",(0,n.jsx)(e.code,{children:\"objects\"}),\". They can be defined using function declarations or expressions.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet() {\n  console.log('Hello!');\n}\n\nlet add = function (a, b) {\n  return a + b;\n};\n\ngreet(); // \"Hello!\"\nconsole.log(add(2, 3)); // 5\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"4\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Date\"}),\": Represents dates and times. The \",(0,n.jsx)(e.code,{children:\"Date\"}),\" object is used to work with dates.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let today = new Date().toLocaleTimeString();\nconsole.log(today);\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"5\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"RegExp\"}),\": Represents regular expressions, which are patterns used to match character combinations in strings.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let pattern = /abc/;\nlet str = '123abc456';\n\nconsole.log(pattern.test(str)); // true\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"6\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Map\"}),\": A collection of keyed data items, similar to an \",(0,n.jsx)(e.code,{children:\"object\"}),\" but allows keys of any type.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let map = new Map();\nmap.set('key1', 'value1');\nconsole.log(map);\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"7\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Set\"}),\": A collection of unique values.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let set = new Set();\nset.add(1);\nset.add(2);\nconsole.log(set); // { 1, 2 }\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Determining data types\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript is a dynamically-typed language, which means variables can hold values of different data types over time. The \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" operator can be used to determine the data type of a value or variable.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(typeof 42); // \"number\"\nconsole.log(typeof 'hello'); // \"string\"\nconsole.log(typeof true); // \"boolean\"\nconsole.log(typeof undefined); // \"undefined\"\nconsole.log(typeof null); // \"object\" (this is a historical bug in JavaScript)\nconsole.log(typeof Symbol()); // \"symbol\"\nconsole.log(typeof BigInt(123)); // \"bigint\"\nconsole.log(typeof {}); // \"object\"\nconsole.log(typeof []); // \"object\"\nconsole.log(typeof function () {}); // \"function\"\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Pitfalls\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Type coercion\"}),`\n`,(0,n.jsx)(e.p,{children:\"JavaScript often performs type coercion, converting values from one type to another, which can lead to unexpected results.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let result = '5' + 2;\nconsole.log(result, typeof result); // \"52 string\" (string concatenation)\n\nlet difference = '5' - 2;\nconsole.log(difference, typeof difference); // 3 \"number\" (numeric subtraction)\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In the first example, since strings can be concatenated with the \",(0,n.jsx)(e.code,{children:\"+\"}),\" operator, the number is converted into a string and the two strings are concatenated together. In the second example, strings cannot work with the minus operator (\",(0,n.jsx)(e.code,{children:\"-\"}),\"), but two numbers can be minused, so the string is first converted into a number and the result is the difference.\"]}),`\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/Web/JavaScript/Data_structures\",children:\"JavaScript data types and data structures - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.linkedin.com/pulse/javascript-guide-data-types-mila-mirovi%C4%87-jykmf\",children:\"JavaScript guide: Data types\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/types\",children:\"Data types - javascript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.programiz.com/javascript/data-types\",children:\"JavaScript data types\"})}),`\n`]})]})}function w(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(d,r)})):d(r)}var S=w;return v(N);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),b=(r,e)=>{for(var t in e)i(r,t,{get:e[t],enumerable:!0})},a=(r,e,t,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of u(e))!f.call(r,l)&&l!==t&&i(r,l,{get:()=>e[l],enumerable:!(o=g(e,l))||o.enumerable});return r};var v=(r,e,t)=>(t=r!=null?p(m(r)):{},a(e||!r||!r.__esModule?i(t,\"default\",{value:r,enumerable:!0}):t,r)),j=r=>a(i({},\"__esModule\",{value:!0}),r);var s=y((x,c)=>{c.exports=_jsx_runtime});var S={};b(S,{default:()=>h,frontmatter:()=>w});var n=v(s()),w={title:\"What are the various data types in JavaScript?\"};function d(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, data types can be categorized into \",(0,n.jsx)(e.code,{children:\"primitive\"}),\" and \",(0,n.jsx)(e.code,{children:\"non-primitive\"}),\" types:\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Primitive data types\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Number\"}),\": Represents both integers and floating-point numbers.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"String\"}),\": Represents sequences of characters.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Boolean\"}),\": Represents \",(0,n.jsx)(e.code,{children:\"true\"}),\" or \",(0,n.jsx)(e.code,{children:\"false\"}),\" values.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Undefined\"}),\": A variable that has been declared but not assigned a value.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Null\"}),\": Represents the intentional absence of any object value.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Symbol\"}),\": A unique and immutable value used as object property keys. Read more in our \",(0,n.jsxs)(e.a,{href:\"/questions/quiz/what-are-symbols-used-for\",children:[\"deep dive on \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\"s\"]})]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"BigInt\"}),\": Represents integers with arbitrary precision.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Non-primitive (Reference) data types\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Object\"}),\": Used to store collections of data.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Array\"}),\": An ordered collection of data.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Function\"}),\": A callable object.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Date\"}),\": Represents dates and times.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"RegExp\"}),\": Represents regular expressions.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Map\"}),\": A collection of keyed data items.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Set\"}),\": A collection of unique values.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"The primitive types store a single value, while non-primitive types can store collections of data or complex entities.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Data types in JavaScript\"}),`\n`,(0,n.jsx)(e.p,{children:\"JavaScript, like many programming languages, has a variety of data types to represent different kinds of data. The main data types in JavaScript can be divided into two categories: primitive and non-primitive (reference) types.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Primitive data types\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Number\"}),\": Represents both integer and floating-point numbers. JavaScript only has one type of number.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let age = 25;\nlet price = 99.99;\nconsole.log(price); // 99.99\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"2\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"String\"}),\": Represents sequences of characters. \",(0,n.jsx)(e.code,{children:\"Strings\"}),\" can be enclosed in single quotes, double quotes, or backticks (for template literals).\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let myName = 'John Doe';\nlet greeting = 'Hello, world!';\nlet message = \\`Welcome, \\${myName}!\\`;\nconsole.log(message); // \"Welcome, John Doe!\"\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"3\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Boolean\"}),\": Represents logical entities and can have two values: \",(0,n.jsx)(e.code,{children:\"true\"}),\" or \",(0,n.jsx)(e.code,{children:\"false\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let isActive = true;\nlet isOver18 = false;\nconsole.log(isOver18); // false\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"4\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Undefined\"}),\": A variable that has been declared but not assigned a value is of type \",(0,n.jsx)(e.code,{children:\"undefined\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let user;\nconsole.log(user); // undefined\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"5\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Null\"}),\": Represents the intentional absence of any object value. It is a primitive value and is treated as a falsy value.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let user = null;\nconsole.log(user); // null\nif (!user) {\n  console.log('user is a falsy value');\n}\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"6\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Symbol\"}),\": A unique and immutable \",(0,n.jsx)(e.code,{children:\"primitive\"}),\" value, typically used as the key of an object property.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let sym1 = Symbol();\nlet sym2 = Symbol('description');\nconsole.log(sym1); // Symbol()\nconsole.log(sym2); // Symbol(description)\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"7\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"BigInt\"}),\": Used for representing integers with arbitrary precision, useful for working with very large numbers.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let bigNumber = BigInt(9007199254740991);\nlet anotherBigNumber = 1234567890123456789012345678901234567890n;\nconsole.log(bigNumber); // 9007199254740991n\nconsole.log(anotherBigNumber); // 1234567890123456789012345678901234567890n\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Non-primitive (reference) data types\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Object\"}),\": It is used to store collections of data and more complex entities. \",(0,n.jsx)(e.code,{children:\"Objects\"}),\" are created using curly braces \",(0,n.jsx)(e.code,{children:\"{}\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let person = {\n  name: 'Alice',\n  age: 30,\n};\nconsole.log(person); // {name: \"Alice\", age: 30}\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"2\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Array\"}),\": A special type of object used for storing ordered collections of data. \",(0,n.jsx)(e.code,{children:\"Arrays\"}),\" are created using square brackets \",(0,n.jsx)(e.code,{children:\"[]\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let numbers = [1, 2, 3, 4, 5];\nconsole.log(numbers);\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"3\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Function\"}),\": \",(0,n.jsx)(e.code,{children:\"Functions\"}),\" in JavaScript are \",(0,n.jsx)(e.code,{children:\"objects\"}),\". They can be defined using function declarations or expressions.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet() {\n  console.log('Hello!');\n}\n\nlet add = function (a, b) {\n  return a + b;\n};\n\ngreet(); // \"Hello!\"\nconsole.log(add(2, 3)); // 5\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"4\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Date\"}),\": Represents dates and times. The \",(0,n.jsx)(e.code,{children:\"Date\"}),\" object is used to work with dates.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let today = new Date().toLocaleTimeString();\nconsole.log(today);\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"5\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"RegExp\"}),\": Represents regular expressions, which are patterns used to match character combinations in strings.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let pattern = /abc/;\nlet str = '123abc456';\n\nconsole.log(pattern.test(str)); // true\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"6\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Map\"}),\": A collection of keyed data items, similar to an \",(0,n.jsx)(e.code,{children:\"object\"}),\" but allows keys of any type.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let map = new Map();\nmap.set('key1', 'value1');\nconsole.log(map);\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"7\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Set\"}),\": A collection of unique values.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let set = new Set();\nset.add(1);\nset.add(2);\nconsole.log(set); // { 1, 2 }\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Determining data types\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript is a dynamically-typed language, which means variables can hold values of different data types over time. The \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" operator can be used to determine the data type of a value or variable.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(typeof 42); // \"number\"\nconsole.log(typeof 'hello'); // \"string\"\nconsole.log(typeof true); // \"boolean\"\nconsole.log(typeof undefined); // \"undefined\"\nconsole.log(typeof null); // \"object\" (this is a historical bug in JavaScript)\nconsole.log(typeof Symbol()); // \"symbol\"\nconsole.log(typeof BigInt(123)); // \"bigint\"\nconsole.log(typeof {}); // \"object\"\nconsole.log(typeof []); // \"object\"\nconsole.log(typeof function () {}); // \"function\"\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Pitfalls\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Type coercion\"}),`\n`,(0,n.jsx)(e.p,{children:\"JavaScript often performs type coercion, converting values from one type to another, which can lead to unexpected results.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let result = '5' + 2;\nconsole.log(result, typeof result); // \"52 string\" (string concatenation)\n\nlet difference = '5' - 2;\nconsole.log(difference, typeof difference); // 3 \"number\" (numeric subtraction)\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In the first example, since strings can be concatenated with the \",(0,n.jsx)(e.code,{children:\"+\"}),\" operator, the number is converted into a string and the two strings are concatenated together. In the second example, strings cannot work with the minus operator (\",(0,n.jsx)(e.code,{children:\"-\"}),\"), but two numbers can be minused, so the string is first converted into a number and the result is the difference.\"]}),`\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/Web/JavaScript/Data_structures\",children:\"JavaScript data types and data structures - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.linkedin.com/pulse/javascript-guide-data-types-mila-mirovi%C4%87-jykmf\",children:\"JavaScript guide: Data types\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/types\",children:\"Data types - javascript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.programiz.com/javascript/data-types\",children:\"JavaScript data types\"})}),`\n`]})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(d,{...r})}):d(r)}return j(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-various-data-types-in-javascript/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-various-data-types-in-javascript/zh-CN.json
index 96227aa0e..3108034b7 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-various-data-types-in-javascript/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-various-data-types-in-javascript/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-various-data-types-in-javascript/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),y=(l,e)=>{for(var r in e)i(l,r,{get:e[r],enumerable:!0})},t=(l,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of u(e))!m.call(l,c)&&c!==r&&i(l,c,{get:()=>e[c],enumerable:!(o=g(e,c))||o.enumerable});return l};var b=(l,e,r)=>(r=l!=null?h(p(l)):{},t(e||!l||!l.__esModule?i(r,\"default\",{value:l,enumerable:!0}):r,l)),v=l=>t(i({},\"__esModule\",{value:!0}),l);var s=f((w,d)=>{d.exports=_jsx_runtime});var J={};y(J,{default:()=>N,frontmatter:()=>j});var n=b(s()),j={title:\"JavaScript \\u4E2D\\u7684\\u5404\\u79CD\\u6570\\u636E\\u7C7B\\u578B\\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(l){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",strong:\"strong\",ul:\"ul\",li:\"li\",a:\"a\",hr:\"hr\",h3:\"h3\",ol:\"ol\",pre:\"pre\"},l.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u6570\\u636E\\u7C7B\\u578B\\u53EF\\u4EE5\\u5206\\u4E3A \",(0,n.jsx)(e.code,{children:\"\\u539F\\u59CB\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"\\u975E\\u539F\\u59CB\"}),\" \\u7C7B\\u578B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"\\u539F\\u59CB\\u6570\\u636E\\u7C7B\\u578B\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Number\"}),\"\\uFF1A\\u8868\\u793A\\u6574\\u6570\\u548C\\u6D6E\\u70B9\\u6570\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"String\"}),\"\\uFF1A\\u8868\\u793A\\u5B57\\u7B26\\u5E8F\\u5217\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Boolean\"}),\"\\uFF1A\\u8868\\u793A \",(0,n.jsx)(e.code,{children:\"true\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"false\"}),\" \\u503C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Undefined\"}),\"\\uFF1A\\u5DF2\\u58F0\\u660E\\u4F46\\u672A\\u8D4B\\u503C\\u7684\\u53D8\\u91CF\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Null\"}),\"\\uFF1A\\u8868\\u793A\\u6709\\u610F\\u7F3A\\u5931\\u4EFB\\u4F55\\u5BF9\\u8C61\\u503C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Symbol\"}),\"\\uFF1A\\u7528\\u4F5C\\u5BF9\\u8C61\\u5C5E\\u6027\\u952E\\u7684\\u552F\\u4E00\\u4E14\\u4E0D\\u53EF\\u53D8\\u7684\\u503C\\u3002\\u5728\\u6211\\u4EEC\\u7684 \",(0,n.jsxs)(e.a,{href:\"/questions/quiz/what-are-symbols-used-for\",children:[\"\\u5173\\u4E8E \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\" \\u7684\\u6DF1\\u5165\\u63A2\\u8BA8\"]}),\" \\u4E2D\\u9605\\u8BFB\\u66F4\\u591A\\u5185\\u5BB9\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"BigInt\"}),\"\\uFF1A\\u8868\\u793A\\u4EFB\\u610F\\u7CBE\\u5EA6\\u7684\\u6574\\u6570\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"\\u975E\\u539F\\u59CB\\uFF08\\u5F15\\u7528\\uFF09\\u6570\\u636E\\u7C7B\\u578B\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Object\"}),\"\\uFF1A\\u7528\\u4E8E\\u5B58\\u50A8\\u6570\\u636E\\u96C6\\u5408\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Array\"}),\"\\uFF1A\\u6570\\u636E\\u7684\\u6709\\u5E8F\\u96C6\\u5408\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Function\"}),\"\\uFF1A\\u53EF\\u8C03\\u7528\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Date\"}),\"\\uFF1A\\u8868\\u793A\\u65E5\\u671F\\u548C\\u65F6\\u95F4\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"RegExp\"}),\"\\uFF1A\\u8868\\u793A\\u6B63\\u5219\\u8868\\u8FBE\\u5F0F\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Map\"}),\"\\uFF1A\\u952E\\u63A7\\u6570\\u636E\\u9879\\u7684\\u96C6\\u5408\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Set\"}),\"\\uFF1A\\u552F\\u4E00\\u503C\\u7684\\u96C6\\u5408\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u539F\\u59CB\\u7C7B\\u578B\\u5B58\\u50A8\\u5355\\u4E2A\\u503C\\uFF0C\\u800C\\u975E\\u539F\\u59CB\\u7C7B\\u578B\\u53EF\\u4EE5\\u5B58\\u50A8\\u6570\\u636E\\u96C6\\u5408\\u6216\\u590D\\u6742\\u5B9E\\u4F53\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"JavaScript \\u4E2D\\u7684\\u6570\\u636E\\u7C7B\\u578B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E0E\\u8BB8\\u591A\\u7F16\\u7A0B\\u8BED\\u8A00\\u4E00\\u6837\\uFF0CJavaScript \\u5177\\u6709\\u591A\\u79CD\\u6570\\u636E\\u7C7B\\u578B\\u6765\\u8868\\u793A\\u4E0D\\u540C\\u79CD\\u7C7B\\u7684\\u6570\\u636E\\u3002 JavaScript \\u4E2D\\u7684\\u4E3B\\u8981\\u6570\\u636E\\u7C7B\\u578B\\u53EF\\u4EE5\\u5206\\u4E3A\\u4E24\\u7C7B\\uFF1A\\u539F\\u59CB\\u7C7B\\u578B\\u548C\\u975E\\u539F\\u59CB\\uFF08\\u5F15\\u7528\\uFF09\\u7C7B\\u578B\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u539F\\u59CB\\u6570\\u636E\\u7C7B\\u578B\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Number\"}),\"\\uFF1A\\u8868\\u793A\\u6574\\u6570\\u548C\\u6D6E\\u70B9\\u6570\\u3002 JavaScript \\u53EA\\u6709\\u4E00\\u79CD\\u6570\\u5B57\\u7C7B\\u578B\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let age = 25;\nlet price = 99.99;\nconsole.log(price); // 99.99\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"2\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"String\"}),\"\\uFF1A\\u8868\\u793A\\u5B57\\u7B26\\u5E8F\\u5217\\u3002 \",(0,n.jsx)(e.code,{children:\"Strings\"}),\" \\u53EF\\u4EE5\\u7528\\u5355\\u5F15\\u53F7\\u3001\\u53CC\\u5F15\\u53F7\\u6216\\u53CD\\u5F15\\u53F7\\uFF08\\u7528\\u4E8E\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\uFF09\\u62EC\\u8D77\\u6765\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let myName = 'John Doe';\nlet greeting = 'Hello, world!';\nlet message = \\`Welcome, \\${myName}!\\`;\nconsole.log(message); // \"Welcome, John Doe!\"\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"3\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Boolean\"}),\"\\uFF1A\\u8868\\u793A\\u903B\\u8F91\\u5B9E\\u4F53\\uFF0C\\u53EF\\u4EE5\\u6709\\u4E24\\u4E2A\\u503C\\uFF1A\",(0,n.jsx)(e.code,{children:\"true\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"false\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let isActive = true;\nlet isOver18 = false;\nconsole.log(isOver18); // false\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"4\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Undefined\"}),\"\\uFF1A\\u5DF2\\u58F0\\u660E\\u4F46\\u672A\\u8D4B\\u503C\\u7684\\u53D8\\u91CF\\u7684\\u7C7B\\u578B\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let user;\nconsole.log(user); // undefined\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"5\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Null\"}),\": \\u8868\\u793A\\u4EFB\\u4F55\\u5BF9\\u8C61\\u503C\\u6709\\u610F\\u7F3A\\u5931\\u3002\\u5B83\\u662F\\u4E00\\u4E2A\\u539F\\u59CB\\u503C\\uFF0C\\u88AB\\u89C6\\u4E3A\\u5047\\u503C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let user = null;\nconsole.log(user); // null\nif (!user) {\n  console.log('user is a falsy value');\n}\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"6\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Symbol\"}),\": \\u4E00\\u79CD\\u72EC\\u7279\\u4E14\\u4E0D\\u53EF\\u53D8\\u7684\",(0,n.jsx)(e.code,{children:\"\\u539F\\u59CB\"}),\"\\u503C\\uFF0C\\u901A\\u5E38\\u7528\\u4F5C\\u5BF9\\u8C61\\u5C5E\\u6027\\u7684\\u952E\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let sym1 = Symbol();\nlet sym2 = Symbol('description');\nconsole.log(sym1); // Symbol()\nconsole.log(sym2); // Symbol(description)\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"7\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"BigInt\"}),\"\\uFF1A\\u7528\\u4E8E\\u8868\\u793A\\u4EFB\\u610F\\u7CBE\\u5EA6\\u7684\\u6574\\u6570\\uFF0C\\u5BF9\\u4E8E\\u5904\\u7406\\u975E\\u5E38\\u5927\\u7684\\u6570\\u5B57\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let bigNumber = BigInt(9007199254740991);\nlet anotherBigNumber = 1234567890123456789012345678901234567890n;\nconsole.log(bigNumber); // 9007199254740991n\nconsole.log(anotherBigNumber); // 1234567890123456789012345678901234567890n\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u975E\\u539F\\u59CB\\uFF08\\u5F15\\u7528\\uFF09\\u6570\\u636E\\u7C7B\\u578B\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Object\"}),\": \\u7528\\u4E8E\\u5B58\\u50A8\\u6570\\u636E\\u96C6\\u5408\\u548C\\u66F4\\u590D\\u6742\\u7684\\u5B9E\\u4F53\\u3002\",(0,n.jsx)(e.code,{children:\"Objects\"}),\" \\u4F7F\\u7528\\u5927\\u62EC\\u53F7 \",(0,n.jsx)(e.code,{children:\"{}\"}),\" \\u521B\\u5EFA\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let person = {\n  name: 'Alice',\n  age: 30,\n};\nconsole.log(person); // {name: \"Alice\", age: 30}\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"2\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Array\"}),\": \\u4E00\\u79CD\\u7279\\u6B8A\\u7C7B\\u578B\\u7684\\u5BF9\\u8C61\\uFF0C\\u7528\\u4E8E\\u5B58\\u50A8\\u6709\\u5E8F\\u7684\\u6570\\u636E\\u96C6\\u5408\\u3002\",(0,n.jsx)(e.code,{children:\"Arrays\"}),\" \\u4F7F\\u7528\\u65B9\\u62EC\\u53F7 \",(0,n.jsx)(e.code,{children:\"[]\"}),\" \\u521B\\u5EFA\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let numbers = [1, 2, 3, 4, 5];\nconsole.log(numbers);\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"3\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Function\"}),\": JavaScript \\u4E2D\\u7684\",(0,n.jsx)(e.code,{children:\"\\u51FD\\u6570\"}),\"\\u662F\",(0,n.jsx)(e.code,{children:\"\\u5BF9\\u8C61\"}),\"\\u3002\\u5B83\\u4EEC\\u53EF\\u4EE5\\u4F7F\\u7528\\u51FD\\u6570\\u58F0\\u660E\\u6216\\u8868\\u8FBE\\u5F0F\\u6765\\u5B9A\\u4E49\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet() {\n  console.log('Hello!');\n}\n\nlet add = function (a, b) {\n  return a + b;\n};\n\ngreet(); // \"Hello!\"\nconsole.log(add(2, 3)); // 5\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"4\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Date\"}),\": \\u8868\\u793A\\u65E5\\u671F\\u548C\\u65F6\\u95F4\\u3002\",(0,n.jsx)(e.code,{children:\"Date\"}),\" \\u5BF9\\u8C61\\u7528\\u4E8E\\u5904\\u7406\\u65E5\\u671F\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let today = new Date().toLocaleTimeString();\nconsole.log(today);\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"5\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"RegExp\"}),\": \\u8868\\u793A\\u6B63\\u5219\\u8868\\u8FBE\\u5F0F\\uFF0C\\u6B63\\u5219\\u8868\\u8FBE\\u5F0F\\u662F\\u7528\\u4E8E\\u5339\\u914D\\u5B57\\u7B26\\u4E32\\u4E2D\\u5B57\\u7B26\\u7EC4\\u5408\\u7684\\u6A21\\u5F0F\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let pattern = /abc/;\nlet str = '123abc456';\n\nconsole.log(pattern.test(str)); // true\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"6\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Map\"}),\": \\u952E\\u63A7\\u6570\\u636E\\u9879\\u7684\\u96C6\\u5408\\uFF0C\\u7C7B\\u4F3C\\u4E8E\",(0,n.jsx)(e.code,{children:\"\\u5BF9\\u8C61\"}),\"\\uFF0C\\u4F46\\u5141\\u8BB8\\u4EFB\\u4F55\\u7C7B\\u578B\\u7684\\u952E\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let map = new Map();\nmap.set('key1', 'value1');\nconsole.log(map);\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"7\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Set\"}),\": \\u552F\\u4E00\\u503C\\u7684\\u96C6\\u5408\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let set = new Set();\nset.add(1);\nset.add(2);\nconsole.log(set); // { 1, 2 }\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u786E\\u5B9A\\u6570\\u636E\\u7C7B\\u578B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u662F\\u4E00\\u79CD\\u52A8\\u6001\\u7C7B\\u578B\\u8BED\\u8A00\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u53D8\\u91CF\\u53EF\\u4EE5\\u968F\\u65F6\\u95F4\\u63A8\\u79FB\\u4FDD\\u5B58\\u4E0D\\u540C\\u6570\\u636E\\u7C7B\\u578B\\u7684\\u503C\\u3002\",(0,n.jsx)(e.code,{children:\"typeof\"}),\" \\u8FD0\\u7B97\\u7B26\\u53EF\\u7528\\u4E8E\\u786E\\u5B9A\\u503C\\u6216\\u53D8\\u91CF\\u7684\\u6570\\u636E\\u7C7B\\u578B\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(typeof 42); // \"number\"\nconsole.log(typeof 'hello'); // \"string\"\nconsole.log(typeof true); // \"boolean\"\nconsole.log(typeof undefined); // \"undefined\"\nconsole.log(typeof null); // \"object\" (this is a historical bug in JavaScript)\nconsole.log(typeof Symbol()); // \"symbol\"\nconsole.log(typeof BigInt(123)); // \"bigint\"\nconsole.log(typeof {}); // \"object\"\nconsole.log(typeof []); // \"object\"\nconsole.log(typeof function () {}); // \"function\"\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u9677\\u9631\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7C7B\\u578B\\u5F3A\\u5236\\u8F6C\\u6362\"}),`\n`,(0,n.jsx)(e.p,{children:\"JavaScript \\u7ECF\\u5E38\\u6267\\u884C\\u7C7B\\u578B\\u5F3A\\u5236\\u8F6C\\u6362\\uFF0C\\u5C06\\u503C\\u4ECE\\u4E00\\u79CD\\u7C7B\\u578B\\u8F6C\\u6362\\u4E3A\\u53E6\\u4E00\\u79CD\\u7C7B\\u578B\\uFF0C\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u610F\\u5916\\u7ED3\\u679C\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let result = '5' + 2;\nconsole.log(result, typeof result); // \"52 string\" (string concatenation)\n\nlet difference = '5' - 2;\nconsole.log(difference, typeof difference); // 3 \"number\" (numeric subtraction)\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u7B2C\\u4E00\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u7531\\u4E8E\\u5B57\\u7B26\\u4E32\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"+\"}),\" \\u8FD0\\u7B97\\u7B26\\u8FDB\\u884C\\u8FDE\\u63A5\\uFF0C\\u56E0\\u6B64\\u8BE5\\u6570\\u5B57\\u88AB\\u8F6C\\u6362\\u4E3A\\u5B57\\u7B26\\u4E32\\uFF0C\\u5E76\\u4E14\\u4E24\\u4E2A\\u5B57\\u7B26\\u4E32\\u8FDE\\u63A5\\u5728\\u4E00\\u8D77\\u3002\\u5728\\u7B2C\\u4E8C\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u5B57\\u7B26\\u4E32\\u4E0D\\u80FD\\u4E0E\\u51CF\\u53F7\\u8FD0\\u7B97\\u7B26 (\",(0,n.jsx)(e.code,{children:\"-\"}),\") \\u4E00\\u8D77\\u4F7F\\u7528\\uFF0C\\u4F46\\u4E24\\u4E2A\\u6570\\u5B57\\u53EF\\u4EE5\\u76F8\\u51CF\\uFF0C\\u56E0\\u6B64\\u5B57\\u7B26\\u4E32\\u9996\\u5148\\u88AB\\u8F6C\\u6362\\u4E3A\\u6570\\u5B57\\uFF0C\\u7ED3\\u679C\\u662F\\u5DEE\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Data_structures\",children:\"JavaScript data types and data structures - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.linkedin.com/pulse/javascript-guide-data-types-mila-mirovi%C4%87-jykmf\",children:\"JavaScript guide: Data types\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/types\",children:\"Data types - javascript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.programiz.com/javascript/data-types\",children:\"JavaScript data types\"})}),`\n`]})]})}function S(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(a,l)})):a(l)}var N=S;return v(J);})();\n;return Component;"
+  "solution": "var Component=(()=>{var g=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),v=(l,e)=>{for(var r in e)i(l,r,{get:e[r],enumerable:!0})},t=(l,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!f.call(l,c)&&c!==r&&i(l,c,{get:()=>e[c],enumerable:!(o=u(e,c))||o.enumerable});return l};var b=(l,e,r)=>(r=l!=null?g(m(l)):{},t(e||!l||!l.__esModule?i(r,\"default\",{value:l,enumerable:!0}):r,l)),j=l=>t(i({},\"__esModule\",{value:!0}),l);var s=y((D,d)=>{d.exports=_jsx_runtime});var N={};v(N,{default:()=>h,frontmatter:()=>S});var n=b(s()),S={title:\"JavaScript \\u4E2D\\u7684\\u5404\\u79CD\\u6570\\u636E\\u7C7B\\u578B\\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(l){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u6570\\u636E\\u7C7B\\u578B\\u53EF\\u4EE5\\u5206\\u4E3A \",(0,n.jsx)(e.code,{children:\"\\u539F\\u59CB\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"\\u975E\\u539F\\u59CB\"}),\" \\u7C7B\\u578B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"\\u539F\\u59CB\\u6570\\u636E\\u7C7B\\u578B\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Number\"}),\"\\uFF1A\\u8868\\u793A\\u6574\\u6570\\u548C\\u6D6E\\u70B9\\u6570\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"String\"}),\"\\uFF1A\\u8868\\u793A\\u5B57\\u7B26\\u5E8F\\u5217\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Boolean\"}),\"\\uFF1A\\u8868\\u793A \",(0,n.jsx)(e.code,{children:\"true\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"false\"}),\" \\u503C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Undefined\"}),\"\\uFF1A\\u5DF2\\u58F0\\u660E\\u4F46\\u672A\\u8D4B\\u503C\\u7684\\u53D8\\u91CF\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Null\"}),\"\\uFF1A\\u8868\\u793A\\u6709\\u610F\\u7F3A\\u5931\\u4EFB\\u4F55\\u5BF9\\u8C61\\u503C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Symbol\"}),\"\\uFF1A\\u7528\\u4F5C\\u5BF9\\u8C61\\u5C5E\\u6027\\u952E\\u7684\\u552F\\u4E00\\u4E14\\u4E0D\\u53EF\\u53D8\\u7684\\u503C\\u3002\\u5728\\u6211\\u4EEC\\u7684 \",(0,n.jsxs)(e.a,{href:\"/questions/quiz/what-are-symbols-used-for\",children:[\"\\u5173\\u4E8E \",(0,n.jsx)(e.code,{children:\"Symbol\"}),\" \\u7684\\u6DF1\\u5165\\u63A2\\u8BA8\"]}),\" \\u4E2D\\u9605\\u8BFB\\u66F4\\u591A\\u5185\\u5BB9\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"BigInt\"}),\"\\uFF1A\\u8868\\u793A\\u4EFB\\u610F\\u7CBE\\u5EA6\\u7684\\u6574\\u6570\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"\\u975E\\u539F\\u59CB\\uFF08\\u5F15\\u7528\\uFF09\\u6570\\u636E\\u7C7B\\u578B\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Object\"}),\"\\uFF1A\\u7528\\u4E8E\\u5B58\\u50A8\\u6570\\u636E\\u96C6\\u5408\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Array\"}),\"\\uFF1A\\u6570\\u636E\\u7684\\u6709\\u5E8F\\u96C6\\u5408\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Function\"}),\"\\uFF1A\\u53EF\\u8C03\\u7528\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Date\"}),\"\\uFF1A\\u8868\\u793A\\u65E5\\u671F\\u548C\\u65F6\\u95F4\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"RegExp\"}),\"\\uFF1A\\u8868\\u793A\\u6B63\\u5219\\u8868\\u8FBE\\u5F0F\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Map\"}),\"\\uFF1A\\u952E\\u63A7\\u6570\\u636E\\u9879\\u7684\\u96C6\\u5408\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Set\"}),\"\\uFF1A\\u552F\\u4E00\\u503C\\u7684\\u96C6\\u5408\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u539F\\u59CB\\u7C7B\\u578B\\u5B58\\u50A8\\u5355\\u4E2A\\u503C\\uFF0C\\u800C\\u975E\\u539F\\u59CB\\u7C7B\\u578B\\u53EF\\u4EE5\\u5B58\\u50A8\\u6570\\u636E\\u96C6\\u5408\\u6216\\u590D\\u6742\\u5B9E\\u4F53\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"JavaScript \\u4E2D\\u7684\\u6570\\u636E\\u7C7B\\u578B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E0E\\u8BB8\\u591A\\u7F16\\u7A0B\\u8BED\\u8A00\\u4E00\\u6837\\uFF0CJavaScript \\u5177\\u6709\\u591A\\u79CD\\u6570\\u636E\\u7C7B\\u578B\\u6765\\u8868\\u793A\\u4E0D\\u540C\\u79CD\\u7C7B\\u7684\\u6570\\u636E\\u3002 JavaScript \\u4E2D\\u7684\\u4E3B\\u8981\\u6570\\u636E\\u7C7B\\u578B\\u53EF\\u4EE5\\u5206\\u4E3A\\u4E24\\u7C7B\\uFF1A\\u539F\\u59CB\\u7C7B\\u578B\\u548C\\u975E\\u539F\\u59CB\\uFF08\\u5F15\\u7528\\uFF09\\u7C7B\\u578B\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u539F\\u59CB\\u6570\\u636E\\u7C7B\\u578B\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Number\"}),\"\\uFF1A\\u8868\\u793A\\u6574\\u6570\\u548C\\u6D6E\\u70B9\\u6570\\u3002 JavaScript \\u53EA\\u6709\\u4E00\\u79CD\\u6570\\u5B57\\u7C7B\\u578B\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let age = 25;\nlet price = 99.99;\nconsole.log(price); // 99.99\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"2\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"String\"}),\"\\uFF1A\\u8868\\u793A\\u5B57\\u7B26\\u5E8F\\u5217\\u3002 \",(0,n.jsx)(e.code,{children:\"Strings\"}),\" \\u53EF\\u4EE5\\u7528\\u5355\\u5F15\\u53F7\\u3001\\u53CC\\u5F15\\u53F7\\u6216\\u53CD\\u5F15\\u53F7\\uFF08\\u7528\\u4E8E\\u6A21\\u677F\\u5B57\\u9762\\u91CF\\uFF09\\u62EC\\u8D77\\u6765\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let myName = 'John Doe';\nlet greeting = 'Hello, world!';\nlet message = \\`Welcome, \\${myName}!\\`;\nconsole.log(message); // \"Welcome, John Doe!\"\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"3\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Boolean\"}),\"\\uFF1A\\u8868\\u793A\\u903B\\u8F91\\u5B9E\\u4F53\\uFF0C\\u53EF\\u4EE5\\u6709\\u4E24\\u4E2A\\u503C\\uFF1A\",(0,n.jsx)(e.code,{children:\"true\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"false\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let isActive = true;\nlet isOver18 = false;\nconsole.log(isOver18); // false\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"4\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Undefined\"}),\"\\uFF1A\\u5DF2\\u58F0\\u660E\\u4F46\\u672A\\u8D4B\\u503C\\u7684\\u53D8\\u91CF\\u7684\\u7C7B\\u578B\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let user;\nconsole.log(user); // undefined\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"5\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Null\"}),\": \\u8868\\u793A\\u4EFB\\u4F55\\u5BF9\\u8C61\\u503C\\u6709\\u610F\\u7F3A\\u5931\\u3002\\u5B83\\u662F\\u4E00\\u4E2A\\u539F\\u59CB\\u503C\\uFF0C\\u88AB\\u89C6\\u4E3A\\u5047\\u503C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let user = null;\nconsole.log(user); // null\nif (!user) {\n  console.log('user is a falsy value');\n}\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"6\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Symbol\"}),\": \\u4E00\\u79CD\\u72EC\\u7279\\u4E14\\u4E0D\\u53EF\\u53D8\\u7684\",(0,n.jsx)(e.code,{children:\"\\u539F\\u59CB\"}),\"\\u503C\\uFF0C\\u901A\\u5E38\\u7528\\u4F5C\\u5BF9\\u8C61\\u5C5E\\u6027\\u7684\\u952E\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let sym1 = Symbol();\nlet sym2 = Symbol('description');\nconsole.log(sym1); // Symbol()\nconsole.log(sym2); // Symbol(description)\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"7\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"BigInt\"}),\"\\uFF1A\\u7528\\u4E8E\\u8868\\u793A\\u4EFB\\u610F\\u7CBE\\u5EA6\\u7684\\u6574\\u6570\\uFF0C\\u5BF9\\u4E8E\\u5904\\u7406\\u975E\\u5E38\\u5927\\u7684\\u6570\\u5B57\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let bigNumber = BigInt(9007199254740991);\nlet anotherBigNumber = 1234567890123456789012345678901234567890n;\nconsole.log(bigNumber); // 9007199254740991n\nconsole.log(anotherBigNumber); // 1234567890123456789012345678901234567890n\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u975E\\u539F\\u59CB\\uFF08\\u5F15\\u7528\\uFF09\\u6570\\u636E\\u7C7B\\u578B\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Object\"}),\": \\u7528\\u4E8E\\u5B58\\u50A8\\u6570\\u636E\\u96C6\\u5408\\u548C\\u66F4\\u590D\\u6742\\u7684\\u5B9E\\u4F53\\u3002\",(0,n.jsx)(e.code,{children:\"Objects\"}),\" \\u4F7F\\u7528\\u5927\\u62EC\\u53F7 \",(0,n.jsx)(e.code,{children:\"{}\"}),\" \\u521B\\u5EFA\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let person = {\n  name: 'Alice',\n  age: 30,\n};\nconsole.log(person); // {name: \"Alice\", age: 30}\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"2\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Array\"}),\": \\u4E00\\u79CD\\u7279\\u6B8A\\u7C7B\\u578B\\u7684\\u5BF9\\u8C61\\uFF0C\\u7528\\u4E8E\\u5B58\\u50A8\\u6709\\u5E8F\\u7684\\u6570\\u636E\\u96C6\\u5408\\u3002\",(0,n.jsx)(e.code,{children:\"Arrays\"}),\" \\u4F7F\\u7528\\u65B9\\u62EC\\u53F7 \",(0,n.jsx)(e.code,{children:\"[]\"}),\" \\u521B\\u5EFA\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let numbers = [1, 2, 3, 4, 5];\nconsole.log(numbers);\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"3\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Function\"}),\": JavaScript \\u4E2D\\u7684\",(0,n.jsx)(e.code,{children:\"\\u51FD\\u6570\"}),\"\\u662F\",(0,n.jsx)(e.code,{children:\"\\u5BF9\\u8C61\"}),\"\\u3002\\u5B83\\u4EEC\\u53EF\\u4EE5\\u4F7F\\u7528\\u51FD\\u6570\\u58F0\\u660E\\u6216\\u8868\\u8FBE\\u5F0F\\u6765\\u5B9A\\u4E49\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet() {\n  console.log('Hello!');\n}\n\nlet add = function (a, b) {\n  return a + b;\n};\n\ngreet(); // \"Hello!\"\nconsole.log(add(2, 3)); // 5\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"4\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Date\"}),\": \\u8868\\u793A\\u65E5\\u671F\\u548C\\u65F6\\u95F4\\u3002\",(0,n.jsx)(e.code,{children:\"Date\"}),\" \\u5BF9\\u8C61\\u7528\\u4E8E\\u5904\\u7406\\u65E5\\u671F\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let today = new Date().toLocaleTimeString();\nconsole.log(today);\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"5\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"RegExp\"}),\": \\u8868\\u793A\\u6B63\\u5219\\u8868\\u8FBE\\u5F0F\\uFF0C\\u6B63\\u5219\\u8868\\u8FBE\\u5F0F\\u662F\\u7528\\u4E8E\\u5339\\u914D\\u5B57\\u7B26\\u4E32\\u4E2D\\u5B57\\u7B26\\u7EC4\\u5408\\u7684\\u6A21\\u5F0F\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let pattern = /abc/;\nlet str = '123abc456';\n\nconsole.log(pattern.test(str)); // true\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"6\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Map\"}),\": \\u952E\\u63A7\\u6570\\u636E\\u9879\\u7684\\u96C6\\u5408\\uFF0C\\u7C7B\\u4F3C\\u4E8E\",(0,n.jsx)(e.code,{children:\"\\u5BF9\\u8C61\"}),\"\\uFF0C\\u4F46\\u5141\\u8BB8\\u4EFB\\u4F55\\u7C7B\\u578B\\u7684\\u952E\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let map = new Map();\nmap.set('key1', 'value1');\nconsole.log(map);\n`})}),`\n`,(0,n.jsxs)(e.ol,{start:\"7\",children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Set\"}),\": \\u552F\\u4E00\\u503C\\u7684\\u96C6\\u5408\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let set = new Set();\nset.add(1);\nset.add(2);\nconsole.log(set); // { 1, 2 }\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u786E\\u5B9A\\u6570\\u636E\\u7C7B\\u578B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u662F\\u4E00\\u79CD\\u52A8\\u6001\\u7C7B\\u578B\\u8BED\\u8A00\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u53D8\\u91CF\\u53EF\\u4EE5\\u968F\\u65F6\\u95F4\\u63A8\\u79FB\\u4FDD\\u5B58\\u4E0D\\u540C\\u6570\\u636E\\u7C7B\\u578B\\u7684\\u503C\\u3002\",(0,n.jsx)(e.code,{children:\"typeof\"}),\" \\u8FD0\\u7B97\\u7B26\\u53EF\\u7528\\u4E8E\\u786E\\u5B9A\\u503C\\u6216\\u53D8\\u91CF\\u7684\\u6570\\u636E\\u7C7B\\u578B\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(typeof 42); // \"number\"\nconsole.log(typeof 'hello'); // \"string\"\nconsole.log(typeof true); // \"boolean\"\nconsole.log(typeof undefined); // \"undefined\"\nconsole.log(typeof null); // \"object\" (this is a historical bug in JavaScript)\nconsole.log(typeof Symbol()); // \"symbol\"\nconsole.log(typeof BigInt(123)); // \"bigint\"\nconsole.log(typeof {}); // \"object\"\nconsole.log(typeof []); // \"object\"\nconsole.log(typeof function () {}); // \"function\"\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u9677\\u9631\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7C7B\\u578B\\u5F3A\\u5236\\u8F6C\\u6362\"}),`\n`,(0,n.jsx)(e.p,{children:\"JavaScript \\u7ECF\\u5E38\\u6267\\u884C\\u7C7B\\u578B\\u5F3A\\u5236\\u8F6C\\u6362\\uFF0C\\u5C06\\u503C\\u4ECE\\u4E00\\u79CD\\u7C7B\\u578B\\u8F6C\\u6362\\u4E3A\\u53E6\\u4E00\\u79CD\\u7C7B\\u578B\\uFF0C\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u610F\\u5916\\u7ED3\\u679C\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let result = '5' + 2;\nconsole.log(result, typeof result); // \"52 string\" (string concatenation)\n\nlet difference = '5' - 2;\nconsole.log(difference, typeof difference); // 3 \"number\" (numeric subtraction)\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u7B2C\\u4E00\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u7531\\u4E8E\\u5B57\\u7B26\\u4E32\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"+\"}),\" \\u8FD0\\u7B97\\u7B26\\u8FDB\\u884C\\u8FDE\\u63A5\\uFF0C\\u56E0\\u6B64\\u8BE5\\u6570\\u5B57\\u88AB\\u8F6C\\u6362\\u4E3A\\u5B57\\u7B26\\u4E32\\uFF0C\\u5E76\\u4E14\\u4E24\\u4E2A\\u5B57\\u7B26\\u4E32\\u8FDE\\u63A5\\u5728\\u4E00\\u8D77\\u3002\\u5728\\u7B2C\\u4E8C\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u5B57\\u7B26\\u4E32\\u4E0D\\u80FD\\u4E0E\\u51CF\\u53F7\\u8FD0\\u7B97\\u7B26 (\",(0,n.jsx)(e.code,{children:\"-\"}),\") \\u4E00\\u8D77\\u4F7F\\u7528\\uFF0C\\u4F46\\u4E24\\u4E2A\\u6570\\u5B57\\u53EF\\u4EE5\\u76F8\\u51CF\\uFF0C\\u56E0\\u6B64\\u5B57\\u7B26\\u4E32\\u9996\\u5148\\u88AB\\u8F6C\\u6362\\u4E3A\\u6570\\u5B57\\uFF0C\\u7ED3\\u679C\\u662F\\u5DEE\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Data_structures\",children:\"JavaScript data types and data structures - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.linkedin.com/pulse/javascript-guide-data-types-mila-mirovi%C4%87-jykmf\",children:\"JavaScript guide: Data types\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/types\",children:\"Data types - javascript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.programiz.com/javascript/data-types\",children:\"JavaScript data types\"})}),`\n`]})]})}function h(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(a,{...l})}):a(l)}return j(N);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-various-ways-to-create-objects-in-javascript/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-various-ways-to-create-objects-in-javascript/en-US.json
index 7cbf980e3..03ad3fff1 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-various-ways-to-create-objects-in-javascript/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-various-ways-to-create-objects-in-javascript/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-various-ways-to-create-objects-in-javascript/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),j=(t,e)=>{for(var o in e)c(t,o,{get:e[o],enumerable:!0})},a=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!b.call(t,r)&&r!==o&&c(t,r,{get:()=>e[r],enumerable:!(s=p(e,r))||s.enumerable});return t};var y=(t,e,o)=>(o=t!=null?h(m(t)):{},a(e||!t||!t.__esModule?c(o,\"default\",{value:t,enumerable:!0}):o,t)),f=t=>a(c({},\"__esModule\",{value:!0}),t);var l=g((N,i)=>{i.exports=_jsx_runtime});var J={};j(J,{default:()=>O,frontmatter:()=>w});var n=y(l()),w={title:\"What are the various ways to create objects in JavaScript?\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\",strong:\"strong\",code:\"code\",hr:\"hr\",pre:\"pre\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Creating objects in JavaScript offers several methods:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"Object literals (\",(0,n.jsx)(e.code,{children:\"{}\"}),\")\"]}),\": Simplest and most popular approach. Define key-value pairs within curly braces.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:\"Object()\"}),\" constructor\"]}),\": Use \",(0,n.jsx)(e.code,{children:\"new Object()\"}),\" with dot notation to add properties.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Object.create()\"})}),\": Create new objects using existing objects as prototypes, inheriting properties and methods.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Constructor functions\"}),\": Define blueprints for objects using functions, creating instances with \",(0,n.jsx)(e.code,{children:\"new\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"ES2015 classes\"}),\": Structured syntax similar to other languages, using \",(0,n.jsx)(e.code,{children:\"class\"}),\" and \",(0,n.jsx)(e.code,{children:\"constructor\"}),\" keywords.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Objects in JavaScript\"}),`\n`,(0,n.jsx)(e.p,{children:\"Creating objects in JavaScript involves several methods. Here are the various ways to create objects in JavaScript:\"}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Object literals (\",(0,n.jsx)(e.code,{children:\"{}\"}),\")\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"This is the simplest and most popular way to create objects in JavaScript. It involves defining a collection of key-value pairs within curly braces (\",(0,n.jsx)(e.code,{children:\"{}\"}),\"). It can be used when you need to create a single object with a fixed set of properties.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  firstName: 'John',\n  lastName: 'Doe',\n  age: 50,\n  eyeColor: 'blue',\n};\n\nconsole.log(person); // {firstName: \"John\", lastName: \"Doe\", age: 50, eyeColor: \"blue\"}\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Object()\"}),\" constructor\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"This method involves using the \",(0,n.jsx)(e.code,{children:\"new\"}),\" keyword with the built-in \",(0,n.jsx)(e.code,{children:\"Object\"}),\" constructor to create an object. You can then add properties to the object using dot notation. It can be used when you need to create an object from a primitive value or to create an empty object.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = new Object();\nperson.firstName = 'John';\nperson.lastName = 'Doe';\n\nconsole.log(person); // {firstName: \"John\", lastName: \"Doe\"}\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Object.create()\"}),\" Method\"]}),`\n`,(0,n.jsx)(e.p,{children:\"This method allows you to create a new object using an existing object as a prototype. The new object inherits properties and methods from the prototype object. It can be used when you need to create a new object with a specific prototype.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Object.create() Method\nconst personPrototype = {\n  greet() {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I'm \\${this.age} years old.\\`,\n    );\n  },\n};\n\nconst person = Object.create(personPrototype);\nperson.name = 'John';\nperson.age = 30;\n\nperson.greet(); // Output: Hello, my name is John and I'm 30 years old.\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"An object without a prototype can be created by doing \",(0,n.jsx)(e.code,{children:\"Object.create(null)\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"ES2015 classes\"}),`\n`,(0,n.jsx)(e.p,{children:\"Classes provide a more structured and familiar syntax (similar to other programming languages) for creating objects. They define a blueprint and use methods to interact with the object's properties. It can be used when you need to create complex objects with inheritance and encapsulation.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Person {\n  constructor(name, age) {\n    this.name = name;\n    this.age = age;\n  }\n  greet = function () {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I'm \\${this.age} years old.\\`,\n    );\n  };\n}\n\nconst person1 = new Person('John', 30);\nconst person2 = new Person('Alice', 25);\n\nperson1.greet(); // Output: Hello, my name is John and I'm 30 years old.\nperson2.greet(); // Output: Hello, my name is Alice and I'm 25 years old.\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Constructor functions\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Constructor functions are used to create reusable blueprints for objects. They define the properties and behaviors shared by all objects of that type. You use the \",(0,n.jsx)(e.code,{children:\"new\"}),\" keyword to create instances of the object. It can be used when you need to create multiple objects with similar properties and methods.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"However, now that ES2015 classes are readily supported in modern browsers, there's little reason to use constructor functions to create objects.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Constructor function\nfunction Person(name, age) {\n  this.name = name;\n  this.age = age;\n  this.greet = function () {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I'm \\${this.age} years old.\\`,\n    );\n  };\n}\n\nconst person1 = new Person('John', 30);\nconst person2 = new Person('Alice', 25);\n\nperson1.greet(); // Output: Hello, my name is John and I'm 30 years old.\nperson2.greet(); // Output: Hello, my name is Alice and I'm 25 years old.\n`})}),`\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.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/Object\",children:[(0,n.jsx)(e.code,{children:\"Object()\"}),\" constructor | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new\",children:[(0,n.jsx)(e.code,{children:\"new\"}),\" keyword | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create\",children:[(0,n.jsx)(e.code,{children:\"Object.create()\"}),\" | MDN\"]})}),`\n`]})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var O=v;return f(J);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var j=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var o in e)c(t,o,{get:e[o],enumerable:!0})},a=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!g.call(t,r)&&r!==o&&c(t,r,{get:()=>e[r],enumerable:!(s=u(e,r))||s.enumerable});return t};var f=(t,e,o)=>(o=t!=null?p(b(t)):{},a(e||!t||!t.__esModule?c(o,\"default\",{value:t,enumerable:!0}):o,t)),w=t=>a(c({},\"__esModule\",{value:!0}),t);var l=j((S,i)=>{i.exports=_jsx_runtime});var O={};y(O,{default:()=>h,frontmatter:()=>v});var n=f(l()),v={title:\"What are the various ways to create objects in JavaScript?\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Creating objects in JavaScript offers several methods:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"Object literals (\",(0,n.jsx)(e.code,{children:\"{}\"}),\")\"]}),\": Simplest and most popular approach. Define key-value pairs within curly braces.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:\"Object()\"}),\" constructor\"]}),\": Use \",(0,n.jsx)(e.code,{children:\"new Object()\"}),\" with dot notation to add properties.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Object.create()\"})}),\": Create new objects using existing objects as prototypes, inheriting properties and methods.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Constructor functions\"}),\": Define blueprints for objects using functions, creating instances with \",(0,n.jsx)(e.code,{children:\"new\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"ES2015 classes\"}),\": Structured syntax similar to other languages, using \",(0,n.jsx)(e.code,{children:\"class\"}),\" and \",(0,n.jsx)(e.code,{children:\"constructor\"}),\" keywords.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Objects in JavaScript\"}),`\n`,(0,n.jsx)(e.p,{children:\"Creating objects in JavaScript involves several methods. Here are the various ways to create objects in JavaScript:\"}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Object literals (\",(0,n.jsx)(e.code,{children:\"{}\"}),\")\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"This is the simplest and most popular way to create objects in JavaScript. It involves defining a collection of key-value pairs within curly braces (\",(0,n.jsx)(e.code,{children:\"{}\"}),\"). It can be used when you need to create a single object with a fixed set of properties.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  firstName: 'John',\n  lastName: 'Doe',\n  age: 50,\n  eyeColor: 'blue',\n};\n\nconsole.log(person); // {firstName: \"John\", lastName: \"Doe\", age: 50, eyeColor: \"blue\"}\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Object()\"}),\" constructor\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"This method involves using the \",(0,n.jsx)(e.code,{children:\"new\"}),\" keyword with the built-in \",(0,n.jsx)(e.code,{children:\"Object\"}),\" constructor to create an object. You can then add properties to the object using dot notation. It can be used when you need to create an object from a primitive value or to create an empty object.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = new Object();\nperson.firstName = 'John';\nperson.lastName = 'Doe';\n\nconsole.log(person); // {firstName: \"John\", lastName: \"Doe\"}\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Object.create()\"}),\" Method\"]}),`\n`,(0,n.jsx)(e.p,{children:\"This method allows you to create a new object using an existing object as a prototype. The new object inherits properties and methods from the prototype object. It can be used when you need to create a new object with a specific prototype.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Object.create() Method\nconst personPrototype = {\n  greet() {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I'm \\${this.age} years old.\\`,\n    );\n  },\n};\n\nconst person = Object.create(personPrototype);\nperson.name = 'John';\nperson.age = 30;\n\nperson.greet(); // Output: Hello, my name is John and I'm 30 years old.\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"An object without a prototype can be created by doing \",(0,n.jsx)(e.code,{children:\"Object.create(null)\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"ES2015 classes\"}),`\n`,(0,n.jsx)(e.p,{children:\"Classes provide a more structured and familiar syntax (similar to other programming languages) for creating objects. They define a blueprint and use methods to interact with the object's properties. It can be used when you need to create complex objects with inheritance and encapsulation.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Person {\n  constructor(name, age) {\n    this.name = name;\n    this.age = age;\n  }\n  greet = function () {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I'm \\${this.age} years old.\\`,\n    );\n  };\n}\n\nconst person1 = new Person('John', 30);\nconst person2 = new Person('Alice', 25);\n\nperson1.greet(); // Output: Hello, my name is John and I'm 30 years old.\nperson2.greet(); // Output: Hello, my name is Alice and I'm 25 years old.\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Constructor functions\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Constructor functions are used to create reusable blueprints for objects. They define the properties and behaviors shared by all objects of that type. You use the \",(0,n.jsx)(e.code,{children:\"new\"}),\" keyword to create instances of the object. It can be used when you need to create multiple objects with similar properties and methods.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"However, now that ES2015 classes are readily supported in modern browsers, there's little reason to use constructor functions to create objects.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Constructor function\nfunction Person(name, age) {\n  this.name = name;\n  this.age = age;\n  this.greet = function () {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I'm \\${this.age} years old.\\`,\n    );\n  };\n}\n\nconst person1 = new Person('John', 30);\nconst person2 = new Person('Alice', 25);\n\nperson1.greet(); // Output: Hello, my name is John and I'm 30 years old.\nperson2.greet(); // Output: Hello, my name is Alice and I'm 25 years old.\n`})}),`\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.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/Object\",children:[(0,n.jsx)(e.code,{children:\"Object()\"}),\" constructor | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new\",children:[(0,n.jsx)(e.code,{children:\"new\"}),\" keyword | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create\",children:[(0,n.jsx)(e.code,{children:\"Object.create()\"}),\" | MDN\"]})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return w(O);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-various-ways-to-create-objects-in-javascript/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-various-ways-to-create-objects-in-javascript/zh-CN.json
index 950984313..5f281bc34 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-various-ways-to-create-objects-in-javascript/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-various-ways-to-create-objects-in-javascript/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-various-ways-to-create-objects-in-javascript/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var j=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),b=(r,e)=>{for(var c in e)l(r,c,{get:e[c],enumerable:!0})},s=(r,e,c,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!u.call(r,o)&&o!==c&&l(r,o,{get:()=>e[o],enumerable:!(t=p(e,o))||t.enumerable});return r};var O=(r,e,c)=>(c=r!=null?h(g(r)):{},s(e||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),y=r=>s(l({},\"__esModule\",{value:!0}),r);var a=j((w,i)=>{i.exports=_jsx_runtime});var N={};b(N,{default:()=>v,frontmatter:()=>f});var n=O(a()),f={title:\"JavaScript \\u4E2D\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u5404\\u79CD\\u65B9\\u6CD5\\u662F\\u4EC0\\u4E48\\uFF1F\"};function d(r){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\",strong:\"strong\",code:\"code\",hr:\"hr\",pre:\"pre\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 JavaScript \\u4E2D\\u521B\\u5EFA\\u5BF9\\u8C61\\u63D0\\u4F9B\\u4E86\\u51E0\\u79CD\\u65B9\\u6CD5\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"\\u5BF9\\u8C61\\u5B57\\u9762\\u91CF (\",(0,n.jsx)(e.code,{children:\"{}\"}),\")\"]}),\"\\uFF1A\\u6700\\u7B80\\u5355\\u3001\\u6700\\u6D41\\u884C\\u7684\\u65B9\\u6CD5\\u3002\\u5728\\u82B1\\u62EC\\u53F7\\u5185\\u5B9A\\u4E49\\u952E\\u503C\\u5BF9\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:\"Object()\"}),\" \\u6784\\u9020\\u51FD\\u6570\"]}),\"\\uFF1A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"new Object()\"}),\" \\u548C\\u70B9\\u8868\\u793A\\u6CD5\\u6DFB\\u52A0\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Object.create()\"})}),\"\\uFF1A\\u4F7F\\u7528\\u73B0\\u6709\\u5BF9\\u8C61\\u4F5C\\u4E3A\\u539F\\u578B\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\uFF0C\\u7EE7\\u627F\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6784\\u9020\\u51FD\\u6570\"}),\"\\uFF1A\\u4F7F\\u7528\\u51FD\\u6570\\u5B9A\\u4E49\\u5BF9\\u8C61\\u7684\\u84DD\\u56FE\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"new\"}),\" \\u521B\\u5EFA\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"ES2015 \\u7C7B\"}),\"\\uFF1A\\u7C7B\\u4F3C\\u4E8E\\u5176\\u4ED6\\u8BED\\u8A00\\u7684\\u7ED3\\u6784\\u5316\\u8BED\\u6CD5\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"class\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"constructor\"}),\" \\u5173\\u952E\\u5B57\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"JavaScript \\u4E2D\\u7684\\u5BF9\\u8C61\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 JavaScript \\u4E2D\\u521B\\u5EFA\\u5BF9\\u8C61\\u6D89\\u53CA\\u51E0\\u79CD\\u65B9\\u6CD5\\u3002\\u4EE5\\u4E0B\\u662F\\u5728 JavaScript \\u4E2D\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u5404\\u79CD\\u65B9\\u6CD5\\uFF1A\"}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u5BF9\\u8C61\\u5B57\\u9762\\u91CF (\",(0,n.jsx)(e.code,{children:\"{}\"}),\")\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u662F\\u5728 JavaScript \\u4E2D\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u6700\\u7B80\\u5355\\u3001\\u6700\\u6D41\\u884C\\u7684\\u65B9\\u6CD5\\u3002\\u5B83\\u6D89\\u53CA\\u5728\\u82B1\\u62EC\\u53F7 (\",(0,n.jsx)(e.code,{children:\"{}\"}),\") \\u4E2D\\u5B9A\\u4E49\\u952E\\u503C\\u5BF9\\u7684\\u96C6\\u5408\\u3002\\u5F53\\u60A8\\u9700\\u8981\\u521B\\u5EFA\\u4E00\\u4E2A\\u5177\\u6709\\u56FA\\u5B9A\\u5C5E\\u6027\\u96C6\\u7684\\u5355\\u4E2A\\u5BF9\\u8C61\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u5B83\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  firstName: 'John',\n  lastName: 'Doe',\n  age: 50,\n  eyeColor: 'blue',\n};\n\nconsole.log(person); // {firstName: \"John\", lastName: \"Doe\", age: 50, eyeColor: \"blue\"}\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Object()\"}),\" \\u6784\\u9020\\u51FD\\u6570\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6B64\\u65B9\\u6CD5\\u6D89\\u53CA\\u5C06 \",(0,n.jsx)(e.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u4E0E\\u5185\\u7F6E\\u7684 \",(0,n.jsx)(e.code,{children:\"Object\"}),\" \\u6784\\u9020\\u51FD\\u6570\\u4E00\\u8D77\\u4F7F\\u7528\\u4EE5\\u521B\\u5EFA\\u5BF9\\u8C61\\u3002\\u7136\\u540E\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u70B9\\u8868\\u793A\\u6CD5\\u5C06\\u5C5E\\u6027\\u6DFB\\u52A0\\u5230\\u5BF9\\u8C61\\u3002\\u5F53\\u60A8\\u9700\\u8981\\u4ECE\\u539F\\u59CB\\u503C\\u521B\\u5EFA\\u5BF9\\u8C61\\u6216\\u521B\\u5EFA\\u7A7A\\u5BF9\\u8C61\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u5B83\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = new Object();\nperson.firstName = 'John';\nperson.lastName = 'Doe';\n\nconsole.log(person); // {firstName: \"John\", lastName: \"Doe\"}\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Object.create()\"}),\" \\u65B9\\u6CD5\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u65B9\\u6CD5\\u5141\\u8BB8\\u60A8\\u4F7F\\u7528\\u73B0\\u6709\\u5BF9\\u8C61\\u4F5C\\u4E3A\\u539F\\u578B\\u6765\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\u3002\\u65B0\\u5BF9\\u8C61\\u4ECE\\u539F\\u578B\\u5BF9\\u8C61\\u7EE7\\u627F\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\\u5F53\\u60A8\\u9700\\u8981\\u521B\\u5EFA\\u4E00\\u4E2A\\u5177\\u6709\\u7279\\u5B9A\\u539F\\u578B\\u7684\\u65B0\\u5BF9\\u8C61\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u5B83\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Object.create() \\u65B9\\u6CD5\nconst personPrototype = {\n  greet() {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I'm \\${this.age} years old.\\`,\n    );\n  },\n};\n\nconst person = Object.create(personPrototype);\nperson.name = 'John';\nperson.age = 30;\n\nperson.greet(); // Output: Hello, my name is John and I'm 30 years old.\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u53EF\\u4EE5\\u901A\\u8FC7\\u6267\\u884C \",(0,n.jsx)(e.code,{children:\"Object.create(null)\"}),\" \\u6765\\u521B\\u5EFA\\u6CA1\\u6709\\u539F\\u578B\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"ES2015 \\u7C7B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u7C7B\\u4E3A\\u521B\\u5EFA\\u5BF9\\u8C61\\u63D0\\u4F9B\\u4E86\\u66F4\\u7ED3\\u6784\\u5316\\u548C\\u719F\\u6089\\u7684\\u8BED\\u6CD5\\uFF08\\u7C7B\\u4F3C\\u4E8E\\u5176\\u4ED6\\u7F16\\u7A0B\\u8BED\\u8A00\\uFF09\\u3002\\u5B83\\u4EEC\\u5B9A\\u4E49\\u4E86\\u4E00\\u4E2A\\u84DD\\u56FE\\uFF0C\\u5E76\\u4F7F\\u7528\\u65B9\\u6CD5\\u4E0E\\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u8FDB\\u884C\\u4EA4\\u4E92\\u3002\\u5F53\\u60A8\\u9700\\u8981\\u521B\\u5EFA\\u5177\\u6709\\u7EE7\\u627F\\u548C\\u5C01\\u88C5\\u7684\\u590D\\u6742\\u5BF9\\u8C61\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u5B83\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Person {\n  constructor(name, age) {\n    this.name = name;\n    this.age = age;\n  }\n  greet = function () {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I'm \\${this.age} years old.\\`,\n    );\n  };\n}\n\nconst person1 = new Person('John', 30);\nconst person2 = new Person('Alice', 25);\n\nperson1.greet(); // Output: Hello, my name is John and I'm 30 years old.\nperson2.greet(); // Output: Hello, my name is Alice and I'm 25 years old.\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6784\\u9020\\u51FD\\u6570\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6784\\u9020\\u51FD\\u6570\\u7528\\u4E8E\\u521B\\u5EFA\\u53EF\\u91CD\\u7528\\u7684\\u5BF9\\u8C61\\u84DD\\u56FE\\u3002\\u5B83\\u4EEC\\u5B9A\\u4E49\\u4E86\\u8BE5\\u7C7B\\u578B\\u7684\\u6240\\u6709\\u5BF9\\u8C61\\u5171\\u4EAB\\u7684\\u5C5E\\u6027\\u548C\\u884C\\u4E3A\\u3002\\u60A8\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u5B9E\\u4F8B\\u3002\\u5F53\\u60A8\\u9700\\u8981\\u521B\\u5EFA\\u5177\\u6709\\u76F8\\u4F3C\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u7684\\u591A\\u4E2A\\u5BF9\\u8C61\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u5B83\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u7136\\u800C\\uFF0C\\u73B0\\u5728 ES2015 \\u7C7B\\u5728\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u4E2D\\u5F97\\u5230\\u4E86\\u5E7F\\u6CDB\\u652F\\u6301\\uFF0C\\u56E0\\u6B64\\u4F7F\\u7528\\u6784\\u9020\\u51FD\\u6570\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u539F\\u56E0\\u5DF2\\u7ECF\\u4E0D\\u591A\\u4E86\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Constructor function\nfunction Person(name, age) {\n  this.name = name;\n  this.age = age;\n  this.greet = function () {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I'm \\${this.age} years old.\\`,\n    );\n  };\n}\n\nconst person1 = new Person('John', 30);\nconst person2 = new Person('Alice', 25);\n\nperson1.greet(); // Output: Hello, my name is John and I'm 30 years old.\nperson2.greet(); // Output: Hello, my name is Alice and I'm 25 years old.\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/Object\",children:[(0,n.jsx)(e.code,{children:\"Object()\"}),\" constructor | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new\",children:[(0,n.jsx)(e.code,{children:\"new\"}),\" keyword | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create\",children:[(0,n.jsx)(e.code,{children:\"Object.create()\"}),\" | MDN\"]})}),`\n`]})]})}function J(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(d,r)})):d(r)}var v=J;return y(N);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var b=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),O=(r,e)=>{for(var c in e)l(r,c,{get:e[c],enumerable:!0})},i=(r,e,c,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of g(e))!j.call(r,o)&&o!==c&&l(r,o,{get:()=>e[o],enumerable:!(t=m(e,o))||t.enumerable});return r};var y=(r,e,c)=>(c=r!=null?p(u(r)):{},i(e||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),f=r=>i(l({},\"__esModule\",{value:!0}),r);var a=b((S,s)=>{s.exports=_jsx_runtime});var v={};O(v,{default:()=>h,frontmatter:()=>J});var n=y(a()),J={title:\"JavaScript \\u4E2D\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u5404\\u79CD\\u65B9\\u6CD5\\u662F\\u4EC0\\u4E48\\uFF1F\"};function d(r){let e={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 JavaScript \\u4E2D\\u521B\\u5EFA\\u5BF9\\u8C61\\u63D0\\u4F9B\\u4E86\\u51E0\\u79CD\\u65B9\\u6CD5\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[\"\\u5BF9\\u8C61\\u5B57\\u9762\\u91CF (\",(0,n.jsx)(e.code,{children:\"{}\"}),\")\"]}),\"\\uFF1A\\u6700\\u7B80\\u5355\\u3001\\u6700\\u6D41\\u884C\\u7684\\u65B9\\u6CD5\\u3002\\u5728\\u82B1\\u62EC\\u53F7\\u5185\\u5B9A\\u4E49\\u952E\\u503C\\u5BF9\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:\"Object()\"}),\" \\u6784\\u9020\\u51FD\\u6570\"]}),\"\\uFF1A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"new Object()\"}),\" \\u548C\\u70B9\\u8868\\u793A\\u6CD5\\u6DFB\\u52A0\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Object.create()\"})}),\"\\uFF1A\\u4F7F\\u7528\\u73B0\\u6709\\u5BF9\\u8C61\\u4F5C\\u4E3A\\u539F\\u578B\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\uFF0C\\u7EE7\\u627F\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6784\\u9020\\u51FD\\u6570\"}),\"\\uFF1A\\u4F7F\\u7528\\u51FD\\u6570\\u5B9A\\u4E49\\u5BF9\\u8C61\\u7684\\u84DD\\u56FE\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"new\"}),\" \\u521B\\u5EFA\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"ES2015 \\u7C7B\"}),\"\\uFF1A\\u7C7B\\u4F3C\\u4E8E\\u5176\\u4ED6\\u8BED\\u8A00\\u7684\\u7ED3\\u6784\\u5316\\u8BED\\u6CD5\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"class\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"constructor\"}),\" \\u5173\\u952E\\u5B57\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"JavaScript \\u4E2D\\u7684\\u5BF9\\u8C61\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 JavaScript \\u4E2D\\u521B\\u5EFA\\u5BF9\\u8C61\\u6D89\\u53CA\\u51E0\\u79CD\\u65B9\\u6CD5\\u3002\\u4EE5\\u4E0B\\u662F\\u5728 JavaScript \\u4E2D\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u5404\\u79CD\\u65B9\\u6CD5\\uFF1A\"}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u5BF9\\u8C61\\u5B57\\u9762\\u91CF (\",(0,n.jsx)(e.code,{children:\"{}\"}),\")\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u662F\\u5728 JavaScript \\u4E2D\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u6700\\u7B80\\u5355\\u3001\\u6700\\u6D41\\u884C\\u7684\\u65B9\\u6CD5\\u3002\\u5B83\\u6D89\\u53CA\\u5728\\u82B1\\u62EC\\u53F7 (\",(0,n.jsx)(e.code,{children:\"{}\"}),\") \\u4E2D\\u5B9A\\u4E49\\u952E\\u503C\\u5BF9\\u7684\\u96C6\\u5408\\u3002\\u5F53\\u60A8\\u9700\\u8981\\u521B\\u5EFA\\u4E00\\u4E2A\\u5177\\u6709\\u56FA\\u5B9A\\u5C5E\\u6027\\u96C6\\u7684\\u5355\\u4E2A\\u5BF9\\u8C61\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u5B83\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  firstName: 'John',\n  lastName: 'Doe',\n  age: 50,\n  eyeColor: 'blue',\n};\n\nconsole.log(person); // {firstName: \"John\", lastName: \"Doe\", age: 50, eyeColor: \"blue\"}\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Object()\"}),\" \\u6784\\u9020\\u51FD\\u6570\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6B64\\u65B9\\u6CD5\\u6D89\\u53CA\\u5C06 \",(0,n.jsx)(e.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u4E0E\\u5185\\u7F6E\\u7684 \",(0,n.jsx)(e.code,{children:\"Object\"}),\" \\u6784\\u9020\\u51FD\\u6570\\u4E00\\u8D77\\u4F7F\\u7528\\u4EE5\\u521B\\u5EFA\\u5BF9\\u8C61\\u3002\\u7136\\u540E\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u70B9\\u8868\\u793A\\u6CD5\\u5C06\\u5C5E\\u6027\\u6DFB\\u52A0\\u5230\\u5BF9\\u8C61\\u3002\\u5F53\\u60A8\\u9700\\u8981\\u4ECE\\u539F\\u59CB\\u503C\\u521B\\u5EFA\\u5BF9\\u8C61\\u6216\\u521B\\u5EFA\\u7A7A\\u5BF9\\u8C61\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u5B83\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = new Object();\nperson.firstName = 'John';\nperson.lastName = 'Doe';\n\nconsole.log(person); // {firstName: \"John\", lastName: \"Doe\"}\n`})}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Object.create()\"}),\" \\u65B9\\u6CD5\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u65B9\\u6CD5\\u5141\\u8BB8\\u60A8\\u4F7F\\u7528\\u73B0\\u6709\\u5BF9\\u8C61\\u4F5C\\u4E3A\\u539F\\u578B\\u6765\\u521B\\u5EFA\\u65B0\\u5BF9\\u8C61\\u3002\\u65B0\\u5BF9\\u8C61\\u4ECE\\u539F\\u578B\\u5BF9\\u8C61\\u7EE7\\u627F\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\\u5F53\\u60A8\\u9700\\u8981\\u521B\\u5EFA\\u4E00\\u4E2A\\u5177\\u6709\\u7279\\u5B9A\\u539F\\u578B\\u7684\\u65B0\\u5BF9\\u8C61\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u5B83\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Object.create() \\u65B9\\u6CD5\nconst personPrototype = {\n  greet() {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I'm \\${this.age} years old.\\`,\n    );\n  },\n};\n\nconst person = Object.create(personPrototype);\nperson.name = 'John';\nperson.age = 30;\n\nperson.greet(); // Output: Hello, my name is John and I'm 30 years old.\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u53EF\\u4EE5\\u901A\\u8FC7\\u6267\\u884C \",(0,n.jsx)(e.code,{children:\"Object.create(null)\"}),\" \\u6765\\u521B\\u5EFA\\u6CA1\\u6709\\u539F\\u578B\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"ES2015 \\u7C7B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u7C7B\\u4E3A\\u521B\\u5EFA\\u5BF9\\u8C61\\u63D0\\u4F9B\\u4E86\\u66F4\\u7ED3\\u6784\\u5316\\u548C\\u719F\\u6089\\u7684\\u8BED\\u6CD5\\uFF08\\u7C7B\\u4F3C\\u4E8E\\u5176\\u4ED6\\u7F16\\u7A0B\\u8BED\\u8A00\\uFF09\\u3002\\u5B83\\u4EEC\\u5B9A\\u4E49\\u4E86\\u4E00\\u4E2A\\u84DD\\u56FE\\uFF0C\\u5E76\\u4F7F\\u7528\\u65B9\\u6CD5\\u4E0E\\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u8FDB\\u884C\\u4EA4\\u4E92\\u3002\\u5F53\\u60A8\\u9700\\u8981\\u521B\\u5EFA\\u5177\\u6709\\u7EE7\\u627F\\u548C\\u5C01\\u88C5\\u7684\\u590D\\u6742\\u5BF9\\u8C61\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u5B83\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Person {\n  constructor(name, age) {\n    this.name = name;\n    this.age = age;\n  }\n  greet = function () {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I'm \\${this.age} years old.\\`,\n    );\n  };\n}\n\nconst person1 = new Person('John', 30);\nconst person2 = new Person('Alice', 25);\n\nperson1.greet(); // Output: Hello, my name is John and I'm 30 years old.\nperson2.greet(); // Output: Hello, my name is Alice and I'm 25 years old.\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6784\\u9020\\u51FD\\u6570\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6784\\u9020\\u51FD\\u6570\\u7528\\u4E8E\\u521B\\u5EFA\\u53EF\\u91CD\\u7528\\u7684\\u5BF9\\u8C61\\u84DD\\u56FE\\u3002\\u5B83\\u4EEC\\u5B9A\\u4E49\\u4E86\\u8BE5\\u7C7B\\u578B\\u7684\\u6240\\u6709\\u5BF9\\u8C61\\u5171\\u4EAB\\u7684\\u5C5E\\u6027\\u548C\\u884C\\u4E3A\\u3002\\u60A8\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u5B9E\\u4F8B\\u3002\\u5F53\\u60A8\\u9700\\u8981\\u521B\\u5EFA\\u5177\\u6709\\u76F8\\u4F3C\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u7684\\u591A\\u4E2A\\u5BF9\\u8C61\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u5B83\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u7136\\u800C\\uFF0C\\u73B0\\u5728 ES2015 \\u7C7B\\u5728\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u4E2D\\u5F97\\u5230\\u4E86\\u5E7F\\u6CDB\\u652F\\u6301\\uFF0C\\u56E0\\u6B64\\u4F7F\\u7528\\u6784\\u9020\\u51FD\\u6570\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u539F\\u56E0\\u5DF2\\u7ECF\\u4E0D\\u591A\\u4E86\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Constructor function\nfunction Person(name, age) {\n  this.name = name;\n  this.age = age;\n  this.greet = function () {\n    console.log(\n      \\`Hello, my name is \\${this.name} and I'm \\${this.age} years old.\\`,\n    );\n  };\n}\n\nconst person1 = new Person('John', 30);\nconst person2 = new Person('Alice', 25);\n\nperson1.greet(); // Output: Hello, my name is John and I'm 30 years old.\nperson2.greet(); // Output: Hello, my name is Alice and I'm 25 years old.\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/Object\",children:[(0,n.jsx)(e.code,{children:\"Object()\"}),\" constructor | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new\",children:[(0,n.jsx)(e.code,{children:\"new\"}),\" keyword | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create\",children:[(0,n.jsx)(e.code,{children:\"Object.create()\"}),\" | MDN\"]})}),`\n`]})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(d,{...r})}):d(r)}return f(v);})();\n;return Component;"
 }
\ No newline at end of file
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 67648e5dc..d14c254d7 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-web-workers-and-how-can-they-be-used-to-improve-performance/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var k=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),W=(r,e)=>{for(var o in e)s(r,o,{get:e[o],enumerable:!0})},c=(r,e,o,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!u.call(r,a)&&a!==o&&s(r,a,{get:()=>e[a],enumerable:!(t=m(e,a))||t.enumerable});return r};var f=(r,e,o)=>(o=r!=null?d(g(r)):{},c(e||!r||!r.__esModule?s(o,\"default\",{value:r,enumerable:!0}):o,r)),w=r=>c(s({},\"__esModule\",{value:!0}),r);var h=k((x,i)=>{i.exports=_jsx_runtime});var M={};W(M,{default:()=>j,frontmatter:()=>b});var n=f(h()),b={title:\"What are Web Workers and how can they be used to improve performance?\"};function l(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Web Workers are a way to run JavaScript in the background, separate from the main execution thread of a web application. This helps in performing heavy computations without blocking the user interface. You can create a Web Worker using the \",(0,n.jsx)(e.code,{children:\"Worker\"}),\" constructor and communicate with it using the \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" and \",(0,n.jsx)(e.code,{children:\"onmessage\"}),\" methods.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// main.js\nconst worker = new Worker('worker.js');\nworker.postMessage('Hello, worker!');\n\nworker.onmessage = function (event) {\n  console.log('Message from worker:', event.data);\n};\n\n// worker.js\nonmessage = function (event) {\n  console.log('Message from main script:', event.data);\n  postMessage('Hello, main script!');\n};\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are Web Workers and how can they be used to improve performance?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Introduction to Web Workers\"}),`\n`,(0,n.jsx)(e.p,{children:\"Web Workers provide a way to run JavaScript in the background, separate from the main execution thread. This allows for performing tasks like heavy computations or I/O operations without blocking the user interface, leading to a smoother user experience.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Creating a Web Worker\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To create a Web Worker, you use the \",(0,n.jsx)(e.code,{children:\"Worker\"}),\" constructor and pass the URL of the JavaScript file that contains the worker code.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const worker = new Worker('worker.js');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Communication between main script and Web Worker\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Communication between the main script and the Web Worker is done using the \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" method and the \",(0,n.jsx)(e.code,{children:\"onmessage\"}),\" event handler.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Main script\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// main.js\nconst worker = new Worker('worker.js');\n\n// Send a message to the worker\nworker.postMessage('Hello, worker!');\n\n// Receive messages from the worker\nworker.onmessage = function (event) {\n  console.log('Message from worker:', event.data);\n};\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Worker script\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// worker.js\nonmessage = function (event) {\n  console.log('Message from main script:', event.data);\n  // Send a message back to the main script\n  postMessage('Hello, main script!');\n};\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Use cases for Web Workers\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Heavy computations\"}),`\n`,(0,n.jsx)(e.p,{children:\"Web Workers can be used to perform heavy computations without blocking the main thread. For example, calculating large datasets or performing complex mathematical operations.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// worker.js\nonmessage = function (event) {\n  const result = heavyComputation(event.data);\n  postMessage(result);\n};\n\nfunction heavyComputation(data) {\n  // Perform heavy computation here\n  return data * 2; // Example computation\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Data processing\"}),`\n`,(0,n.jsx)(e.p,{children:\"Web Workers can be used to process large amounts of data, such as parsing large JSON files or processing images.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// worker.js\nonmessage = function (event) {\n  const processedData = processData(event.data);\n  postMessage(processedData);\n};\n\nfunction processData(data) {\n  // Process data here\n  return data.map((item) => item * 2); // Example processing\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Limitations of Web Workers\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Web Workers do not have access to the DOM, so they cannot directly manipulate the user interface.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"They have a separate scope from the main script, so you need to pass data back and forth using \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\".\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Creating and managing Web Workers can add complexity to your codebase.\"}),`\n`]}),`\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/Web/API/Web_Workers_API/Using_web_workers\",children:\"MDN Web Docs: Using Web Workers\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.html5rocks.com/en/tutorials/workers/basics/\",children:\"HTML5 Rocks: Web Workers\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Worker\",children:\"MDN Web Docs: Worker\"})}),`\n`]})]})}function v(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(l,r)})):l(r)}var j=v;return w(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var W=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var o in e)t(r,o,{get:e[o],enumerable:!0})},c=(r,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!k.call(r,a)&&a!==o&&t(r,a,{get:()=>e[a],enumerable:!(s=p(e,a))||s.enumerable});return r};var w=(r,e,o)=>(o=r!=null?m(g(r)):{},c(e||!r||!r.__esModule?t(o,\"default\",{value:r,enumerable:!0}):o,r)),b=r=>c(t({},\"__esModule\",{value:!0}),r);var h=W((y,i)=>{i.exports=_jsx_runtime});var M={};f(M,{default:()=>d,frontmatter:()=>v});var n=w(h()),v={title:\"What are Web Workers and how can they be used to improve performance?\"};function l(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Web Workers are a way to run JavaScript in the background, separate from the main execution thread of a web application. This helps in performing heavy computations without blocking the user interface. You can create a Web Worker using the \",(0,n.jsx)(e.code,{children:\"Worker\"}),\" constructor and communicate with it using the \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" and \",(0,n.jsx)(e.code,{children:\"onmessage\"}),\" methods.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// main.js\nconst worker = new Worker('worker.js');\nworker.postMessage('Hello, worker!');\n\nworker.onmessage = function (event) {\n  console.log('Message from worker:', event.data);\n};\n\n// worker.js\nonmessage = function (event) {\n  console.log('Message from main script:', event.data);\n  postMessage('Hello, main script!');\n};\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are Web Workers and how can they be used to improve performance?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Introduction to Web Workers\"}),`\n`,(0,n.jsx)(e.p,{children:\"Web Workers provide a way to run JavaScript in the background, separate from the main execution thread. This allows for performing tasks like heavy computations or I/O operations without blocking the user interface, leading to a smoother user experience.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Creating a Web Worker\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"To create a Web Worker, you use the \",(0,n.jsx)(e.code,{children:\"Worker\"}),\" constructor and pass the URL of the JavaScript file that contains the worker code.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const worker = new Worker('worker.js');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Communication between main script and Web Worker\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Communication between the main script and the Web Worker is done using the \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" method and the \",(0,n.jsx)(e.code,{children:\"onmessage\"}),\" event handler.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Main script\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// main.js\nconst worker = new Worker('worker.js');\n\n// Send a message to the worker\nworker.postMessage('Hello, worker!');\n\n// Receive messages from the worker\nworker.onmessage = function (event) {\n  console.log('Message from worker:', event.data);\n};\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Worker script\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// worker.js\nonmessage = function (event) {\n  console.log('Message from main script:', event.data);\n  // Send a message back to the main script\n  postMessage('Hello, main script!');\n};\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Use cases for Web Workers\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Heavy computations\"}),`\n`,(0,n.jsx)(e.p,{children:\"Web Workers can be used to perform heavy computations without blocking the main thread. For example, calculating large datasets or performing complex mathematical operations.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// worker.js\nonmessage = function (event) {\n  const result = heavyComputation(event.data);\n  postMessage(result);\n};\n\nfunction heavyComputation(data) {\n  // Perform heavy computation here\n  return data * 2; // Example computation\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Data processing\"}),`\n`,(0,n.jsx)(e.p,{children:\"Web Workers can be used to process large amounts of data, such as parsing large JSON files or processing images.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// worker.js\nonmessage = function (event) {\n  const processedData = processData(event.data);\n  postMessage(processedData);\n};\n\nfunction processData(data) {\n  // Process data here\n  return data.map((item) => item * 2); // Example processing\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Limitations of Web Workers\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Web Workers do not have access to the DOM, so they cannot directly manipulate the user interface.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"They have a separate scope from the main script, so you need to pass data back and forth using \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\".\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Creating and managing Web Workers can add complexity to your codebase.\"}),`\n`]}),`\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/Web/API/Web_Workers_API/Using_web_workers\",children:\"MDN Web Docs: Using Web Workers\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.html5rocks.com/en/tutorials/workers/basics/\",children:\"HTML5 Rocks: Web Workers\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Worker\",children:\"MDN Web Docs: Worker\"})}),`\n`]})]})}function d(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(l,{...r})}):l(r)}return b(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-web-workers-and-how-can-they-be-used-to-improve-performance/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-web-workers-and-how-can-they-be-used-to-improve-performance/zh-CN.json
index 6f744d399..ed24d50f4 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-web-workers-and-how-can-they-be-used-to-improve-performance/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-web-workers-and-how-can-they-be-used-to-improve-performance/zh-CN.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-web-workers-and-how-can-they-be-used-to-improve-performance/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),u=(r,e)=>{for(var o in e)a(r,o,{get:e[o],enumerable:!0})},t=(r,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!W.call(r,s)&&s!==o&&a(r,s,{get:()=>e[s],enumerable:!(c=k(e,s))||c.enumerable});return r};var w=(r,e,o)=>(o=r!=null?h(m(r)):{},t(e||!r||!r.__esModule?a(o,\"default\",{value:r,enumerable:!0}):o,r)),b=r=>t(a({},\"__esModule\",{value:!0}),r);var i=g((_,l)=>{l.exports=_jsx_runtime});var M={};u(M,{default:()=>v,frontmatter:()=>f});var n=w(i()),f={title:\"\\u4EC0\\u4E48\\u662F Web Worker \\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u4EEC\\u6765\\u63D0\\u9AD8\\u6027\\u80FD\\uFF1F\"};function d(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Web Worker \\u662F\\u4E00\\u79CD\\u5728\\u540E\\u53F0\\u8FD0\\u884C JavaScript \\u7684\\u65B9\\u6CD5\\uFF0C\\u4E0E Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4E3B\\u6267\\u884C\\u7EBF\\u7A0B\\u5206\\u5F00\\u3002\\u8FD9\\u6709\\u52A9\\u4E8E\\u6267\\u884C\\u7E41\\u91CD\\u7684\\u8BA1\\u7B97\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u585E\\u7528\\u6237\\u754C\\u9762\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Worker\"}),\" \\u6784\\u9020\\u51FD\\u6570\\u521B\\u5EFA Web Worker\\uFF0C\\u5E76\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"onmessage\"}),\" \\u65B9\\u6CD5\\u4E0E\\u5176\\u901A\\u4FE1\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// main.js\nconst worker = new Worker('worker.js');\nworker.postMessage('Hello, worker!');\n\nworker.onmessage = function (event) {\n  console.log('Message from worker:', event.data);\n};\n\n// worker.js\nonmessage = function (event) {\n  console.log('Message from main script:', event.data);\n  postMessage('Hello, main script!');\n};\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F Web Worker \\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u4EEC\\u6765\\u63D0\\u9AD8\\u6027\\u80FD\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Web Worker \\u7B80\\u4ECB\"}),`\n`,(0,n.jsx)(e.p,{children:\"Web Worker \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u5728\\u540E\\u53F0\\u8FD0\\u884C JavaScript \\u7684\\u65B9\\u6CD5\\uFF0C\\u4E0E\\u4E3B\\u6267\\u884C\\u7EBF\\u7A0B\\u5206\\u5F00\\u3002\\u8FD9\\u5141\\u8BB8\\u6267\\u884C\\u7E41\\u91CD\\u7684\\u4EFB\\u52A1\\uFF0C\\u5982\\u7E41\\u91CD\\u7684\\u8BA1\\u7B97\\u6216 I/O \\u64CD\\u4F5C\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u585E\\u7528\\u6237\\u754C\\u9762\\uFF0C\\u4ECE\\u800C\\u5E26\\u6765\\u66F4\\u6D41\\u7545\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u521B\\u5EFA Web Worker\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u521B\\u5EFA Web Worker\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Worker\"}),\" \\u6784\\u9020\\u51FD\\u6570\\u5E76\\u4F20\\u9012\\u5305\\u542B worker \\u4EE3\\u7801\\u7684 JavaScript \\u6587\\u4EF6\\u7684 URL\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const worker = new Worker('worker.js');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E3B\\u811A\\u672C\\u548C Web Worker \\u4E4B\\u95F4\\u7684\\u901A\\u4FE1\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E3B\\u811A\\u672C\\u548C Web Worker \\u4E4B\\u95F4\\u7684\\u901A\\u4FE1\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" \\u65B9\\u6CD5\\u548C \",(0,n.jsx)(e.code,{children:\"onmessage\"}),\" \\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u5B8C\\u6210\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4E3B\\u811A\\u672C\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// main.js\nconst worker = new Worker('worker.js');\n\n// Send a message to the worker\nworker.postMessage('Hello, worker!');\n\n// Receive messages from the worker\nworker.onmessage = function (event) {\n  console.log('Message from worker:', event.data);\n};\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Worker \\u811A\\u672C\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// worker.js\nonmessage = function (event) {\n  console.log('Message from main script:', event.data);\n  // Send a message back to the main script\n  postMessage('Hello, main script!');\n};\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Web Worker \\u7684\\u7528\\u4F8B\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u7E41\\u91CD\\u7684\\u8BA1\\u7B97\"}),`\n`,(0,n.jsx)(e.p,{children:\"Web Worker \\u53EF\\u7528\\u4E8E\\u6267\\u884C\\u7E41\\u91CD\\u7684\\u8BA1\\u7B97\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u585E\\u4E3B\\u7EBF\\u7A0B\\u3002\\u4F8B\\u5982\\uFF0C\\u8BA1\\u7B97\\u5927\\u578B\\u6570\\u636E\\u96C6\\u6216\\u6267\\u884C\\u590D\\u6742\\u7684\\u6570\\u5B66\\u8FD0\\u7B97\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// worker.js\nonmessage = function (event) {\n  const result = heavyComputation(event.data);\n  postMessage(result);\n};\n\nfunction heavyComputation(data) {\n  // Perform heavy computation here\n  return data * 2; // Example computation\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u6570\\u636E\\u5904\\u7406\"}),`\n`,(0,n.jsx)(e.p,{children:\"Web Workers \\u53EF\\u7528\\u4E8E\\u5904\\u7406\\u5927\\u91CF\\u6570\\u636E\\uFF0C\\u4F8B\\u5982\\u89E3\\u6790\\u5927\\u578B JSON \\u6587\\u4EF6\\u6216\\u5904\\u7406\\u56FE\\u50CF\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// worker.js\nonmessage = function (event) {\n  const processedData = processData(event.data);\n  postMessage(processedData);\n};\n\nfunction processData(data) {\n  // Process data here\n  return data.map((item) => item * 2); // Example processing\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Web Workers \\u7684\\u5C40\\u9650\\u6027\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Web Workers \\u65E0\\u6CD5\\u8BBF\\u95EE DOM\\uFF0C\\u56E0\\u6B64\\u5B83\\u4EEC\\u65E0\\u6CD5\\u76F4\\u63A5\\u64CD\\u4F5C\\u7528\\u6237\\u754C\\u9762\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5B83\\u4EEC\\u4E0E\\u4E3B\\u811A\\u672C\\u5177\\u6709\\u5355\\u72EC\\u7684\\u4F5C\\u7528\\u57DF\\uFF0C\\u56E0\\u6B64\\u60A8\\u9700\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" \\u6765\\u56DE\\u4F20\\u9012\\u6570\\u636E\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u521B\\u5EFA\\u548C\\u7BA1\\u7406 Web Workers \\u53EF\\u80FD\\u4F1A\\u589E\\u52A0\\u4EE3\\u7801\\u5E93\\u7684\\u590D\\u6742\\u6027\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Web_Workers_API/Using_web_workers\",children:\"MDN Web \\u6587\\u6863\\uFF1A\\u4F7F\\u7528 Web Workers\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.html5rocks.com/en/tutorials/workers/basics/\",children:\"HTML5 Rocks\\uFF1AWeb Workers\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Worker\",children:\"MDN Web \\u6587\\u6863\\uFF1AWorker\"})}),`\n`]})]})}function j(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(d,r)})):d(r)}var v=j;return b(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var k=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var u=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),w=(r,e)=>{for(var o in e)a(r,o,{get:e[o],enumerable:!0})},t=(r,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!g.call(r,s)&&s!==o&&a(r,s,{get:()=>e[s],enumerable:!(c=p(e,s))||c.enumerable});return r};var b=(r,e,o)=>(o=r!=null?k(W(r)):{},t(e||!r||!r.__esModule?a(o,\"default\",{value:r,enumerable:!0}):o,r)),f=r=>t(a({},\"__esModule\",{value:!0}),r);var i=u((x,l)=>{l.exports=_jsx_runtime});var j={};w(j,{default:()=>h,frontmatter:()=>v});var n=b(i()),v={title:\"\\u4EC0\\u4E48\\u662F Web Worker \\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u4EEC\\u6765\\u63D0\\u9AD8\\u6027\\u80FD\\uFF1F\"};function d(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Web Worker \\u662F\\u4E00\\u79CD\\u5728\\u540E\\u53F0\\u8FD0\\u884C JavaScript \\u7684\\u65B9\\u6CD5\\uFF0C\\u4E0E Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4E3B\\u6267\\u884C\\u7EBF\\u7A0B\\u5206\\u5F00\\u3002\\u8FD9\\u6709\\u52A9\\u4E8E\\u6267\\u884C\\u7E41\\u91CD\\u7684\\u8BA1\\u7B97\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u585E\\u7528\\u6237\\u754C\\u9762\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Worker\"}),\" \\u6784\\u9020\\u51FD\\u6570\\u521B\\u5EFA Web Worker\\uFF0C\\u5E76\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"onmessage\"}),\" \\u65B9\\u6CD5\\u4E0E\\u5176\\u901A\\u4FE1\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// main.js\nconst worker = new Worker('worker.js');\nworker.postMessage('Hello, worker!');\n\nworker.onmessage = function (event) {\n  console.log('Message from worker:', event.data);\n};\n\n// worker.js\nonmessage = function (event) {\n  console.log('Message from main script:', event.data);\n  postMessage('Hello, main script!');\n};\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F Web Worker \\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u4EEC\\u6765\\u63D0\\u9AD8\\u6027\\u80FD\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Web Worker \\u7B80\\u4ECB\"}),`\n`,(0,n.jsx)(e.p,{children:\"Web Worker \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u5728\\u540E\\u53F0\\u8FD0\\u884C JavaScript \\u7684\\u65B9\\u6CD5\\uFF0C\\u4E0E\\u4E3B\\u6267\\u884C\\u7EBF\\u7A0B\\u5206\\u5F00\\u3002\\u8FD9\\u5141\\u8BB8\\u6267\\u884C\\u7E41\\u91CD\\u7684\\u4EFB\\u52A1\\uFF0C\\u5982\\u7E41\\u91CD\\u7684\\u8BA1\\u7B97\\u6216 I/O \\u64CD\\u4F5C\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u585E\\u7528\\u6237\\u754C\\u9762\\uFF0C\\u4ECE\\u800C\\u5E26\\u6765\\u66F4\\u6D41\\u7545\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u521B\\u5EFA Web Worker\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u521B\\u5EFA Web Worker\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Worker\"}),\" \\u6784\\u9020\\u51FD\\u6570\\u5E76\\u4F20\\u9012\\u5305\\u542B worker \\u4EE3\\u7801\\u7684 JavaScript \\u6587\\u4EF6\\u7684 URL\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const worker = new Worker('worker.js');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E3B\\u811A\\u672C\\u548C Web Worker \\u4E4B\\u95F4\\u7684\\u901A\\u4FE1\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E3B\\u811A\\u672C\\u548C Web Worker \\u4E4B\\u95F4\\u7684\\u901A\\u4FE1\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" \\u65B9\\u6CD5\\u548C \",(0,n.jsx)(e.code,{children:\"onmessage\"}),\" \\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u5B8C\\u6210\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4E3B\\u811A\\u672C\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// main.js\nconst worker = new Worker('worker.js');\n\n// Send a message to the worker\nworker.postMessage('Hello, worker!');\n\n// Receive messages from the worker\nworker.onmessage = function (event) {\n  console.log('Message from worker:', event.data);\n};\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Worker \\u811A\\u672C\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// worker.js\nonmessage = function (event) {\n  console.log('Message from main script:', event.data);\n  // Send a message back to the main script\n  postMessage('Hello, main script!');\n};\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Web Worker \\u7684\\u7528\\u4F8B\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u7E41\\u91CD\\u7684\\u8BA1\\u7B97\"}),`\n`,(0,n.jsx)(e.p,{children:\"Web Worker \\u53EF\\u7528\\u4E8E\\u6267\\u884C\\u7E41\\u91CD\\u7684\\u8BA1\\u7B97\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u585E\\u4E3B\\u7EBF\\u7A0B\\u3002\\u4F8B\\u5982\\uFF0C\\u8BA1\\u7B97\\u5927\\u578B\\u6570\\u636E\\u96C6\\u6216\\u6267\\u884C\\u590D\\u6742\\u7684\\u6570\\u5B66\\u8FD0\\u7B97\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// worker.js\nonmessage = function (event) {\n  const result = heavyComputation(event.data);\n  postMessage(result);\n};\n\nfunction heavyComputation(data) {\n  // Perform heavy computation here\n  return data * 2; // Example computation\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u6570\\u636E\\u5904\\u7406\"}),`\n`,(0,n.jsx)(e.p,{children:\"Web Workers \\u53EF\\u7528\\u4E8E\\u5904\\u7406\\u5927\\u91CF\\u6570\\u636E\\uFF0C\\u4F8B\\u5982\\u89E3\\u6790\\u5927\\u578B JSON \\u6587\\u4EF6\\u6216\\u5904\\u7406\\u56FE\\u50CF\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// worker.js\nonmessage = function (event) {\n  const processedData = processData(event.data);\n  postMessage(processedData);\n};\n\nfunction processData(data) {\n  // Process data here\n  return data.map((item) => item * 2); // Example processing\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Web Workers \\u7684\\u5C40\\u9650\\u6027\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Web Workers \\u65E0\\u6CD5\\u8BBF\\u95EE DOM\\uFF0C\\u56E0\\u6B64\\u5B83\\u4EEC\\u65E0\\u6CD5\\u76F4\\u63A5\\u64CD\\u4F5C\\u7528\\u6237\\u754C\\u9762\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5B83\\u4EEC\\u4E0E\\u4E3B\\u811A\\u672C\\u5177\\u6709\\u5355\\u72EC\\u7684\\u4F5C\\u7528\\u57DF\\uFF0C\\u56E0\\u6B64\\u60A8\\u9700\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"postMessage\"}),\" \\u6765\\u56DE\\u4F20\\u9012\\u6570\\u636E\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u521B\\u5EFA\\u548C\\u7BA1\\u7406 Web Workers \\u53EF\\u80FD\\u4F1A\\u589E\\u52A0\\u4EE3\\u7801\\u5E93\\u7684\\u590D\\u6742\\u6027\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Web_Workers_API/Using_web_workers\",children:\"MDN Web \\u6587\\u6863\\uFF1A\\u4F7F\\u7528 Web Workers\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.html5rocks.com/en/tutorials/workers/basics/\",children:\"HTML5 Rocks\\uFF1AWeb Workers\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Worker\",children:\"MDN Web \\u6587\\u6863\\uFF1AWorker\"})}),`\n`]})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(d,{...r})}):d(r)}return f(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-workers-in-javascript-used-for/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-workers-in-javascript-used-for/en-US.json
index ba73c3f60..13b3f83ba 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-workers-in-javascript-used-for/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-workers-in-javascript-used-for/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-workers-in-javascript-used-for/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),w=(n,e)=>{for(var i in e)t(n,i,{get:e[i],enumerable:!0})},c=(n,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of g(e))!m.call(n,s)&&s!==i&&t(n,s,{get:()=>e[s],enumerable:!(o=p(e,s))||o.enumerable});return n};var k=(n,e,i)=>(i=n!=null?d(u(n)):{},c(e||!n||!n.__esModule?t(i,\"default\",{value:n,enumerable:!0}):i,n)),v=n=>c(t({},\"__esModule\",{value:!0}),n);var l=f((x,a)=>{a.exports=_jsx_runtime});var S={};w(S,{default:()=>y,frontmatter:()=>b});var r=k(l()),b={title:\"What are workers in JavaScript used for?\"};function h(n){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\",strong:\"strong\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",h4:\"h4\",a:\"a\"},n.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsx)(e.p,{children:\"Workers in JavaScript are background threads that allow you to run scripts in parallel with the main execution thread, without blocking or interfering with the user interface. Their key features include:\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Parallel processing\"}),\": Workers run in a separate thread from the main thread, allowing your web page to remain responsive to user interactions while the worker performs its tasks. It's useful for moving CPU-intensive work off the main thread and be free from JavaScript's single-threaded nature.\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Communication\"}),\": Uses \",(0,r.jsx)(e.code,{children:\"postMessage()\"}),\" and \",(0,r.jsx)(e.code,{children:\"onmessage\"}),\"/ \",(0,r.jsx)(e.code,{children:\"'message'\"}),\" event for messaging.\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Access to web APIs\"}),\": Workers have access to various Web APIs, including \",(0,r.jsx)(e.code,{children:\"fetch()\"}),\", IndexedDB, and Web Storage, allowing them to perform tasks like data fetching and persisting data independently.\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"No DOM access\"}),\": Workers cannot directly manipulate the DOM, thus cannot interact with the UI, ensuring they don't accidentally interfere with the main thread's operation.\"]}),`\n`]}),`\n`,(0,r.jsx)(e.p,{children:\"There are three main types of workers in JavaScript:\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Web workers / Dedicated workers\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"Run scripts in background threads, separate from the main UI thread.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Useful for CPU-intensive tasks like data processing, calculations, etc.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Cannot directly access or manipulate the DOM.\"}),`\n`]}),`\n`]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Service workers\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"Act as network proxies, handling requests between the app and network.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Enable offline functionality, caching, and push notifications.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Runs independently of the web page, even when it's closed.\"}),`\n`]}),`\n`]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Shared workers\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"Can be shared by multiple scripts running in different windows or frames, as long as they're in the same domain.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Scripts communicate with the shared worker by sending and receiving messages.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Useful for coordinating tasks across different parts of a web page.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsx)(e.h2,{children:\"Workers in JavaScript\"}),`\n`,(0,r.jsx)(e.p,{children:\"Workers in JavaScript are a way to run scripts in background threads, separate from the main execution thread of a web page. This allows for long-running or computationally intensive tasks to be offloaded from the main thread, preventing the user interface from becoming unresponsive or janky.\"}),`\n`,(0,r.jsx)(e.h2,{children:\"Web workers / Dedicated workers\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"Run scripts in background threads separate from the main UI thread.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Designed for CPU-intensive tasks like data processing, mathematical computations, etc. Generally the non-async work.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Cannot directly access the DOM or other main thread resources for security.\"}),`\n`,(0,r.jsxs)(e.li,{children:[\"Communicates with main thread via asynchronous message passing \\u2013 \",(0,r.jsx)(e.code,{children:\"postMessage()\"}),\" and \",(0,r.jsx)(e.code,{children:\"onmessage\"}),\"/ \",(0,r.jsx)(e.code,{children:\"'message'\"}),\".\"]}),`\n`,(0,r.jsx)(e.li,{children:\"Terminated when main script is unloaded or explicitly terminated.\"}),`\n`]}),`\n`,(0,r.jsx)(e.p,{children:\"Web workers can be used for:\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"Image/video processing\"}),`\n`,(0,r.jsx)(e.li,{children:\"Data compression\"}),`\n`,(0,r.jsx)(e.li,{children:\"Complex math\"}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"Creating a web worker\"}),`\n`,(0,r.jsx)(e.p,{children:\"To create a web worker, you need a separate JavaScript file that contains the code for the worker. Here's an example:\"}),`\n`,(0,r.jsx)(e.p,{children:(0,r.jsxs)(e.strong,{children:[(0,r.jsx)(e.code,{children:\"main.js\"}),\" (main script)\"]})}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`// Check if the browser supports workers\nif (window.Worker) {\n  // Create a new Worker\n  const myWorker = new Worker('worker.js');\n\n  // Post a message to the worker\n  myWorker.postMessage('Hello, Worker!');\n\n  // Listen for messages from the worker\n  myWorker.onmessage = function (event) {\n    console.log('Message from Worker:', event.data);\n  };\n\n  // Error handling\n  myWorker.onerror = function (error) {\n    console.error('Error from Worker:', error);\n  };\n}\n`})}),`\n`,(0,r.jsx)(e.p,{children:(0,r.jsxs)(e.strong,{children:[(0,r.jsx)(e.code,{children:\"worker.js\"}),\" (worker script)\"]})}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`// Listen for messages from the main script\nonmessage = function (event) {\n  console.log('Message from Main Script:', event.data);\n\n  // Perform a task (e.g., some computation)\n  const result = event.data + ' - Processed by Worker';\n\n  // Post the result back to the main script\n  postMessage(result);\n};\n`})}),`\n`,(0,r.jsx)(e.p,{children:\"In this example:\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"main.js\"}),\" creates a worker using the \",(0,r.jsx)(e.code,{children:\"Worker\"}),\" constructor and specifies \",(0,r.jsx)(e.code,{children:\"worker.js\"}),\" as the script to run in the worker thread.\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"It posts a message to the worker using \",(0,r.jsx)(e.code,{children:\"postMessage()\"}),\".\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"The worker script (\",(0,r.jsx)(e.code,{children:\"worker.js\"}),\") listens for messages from the main script using \",(0,r.jsx)(e.code,{children:\"onmessage\"}),\".\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"After processing the message, the worker posts a message back to the main script using \",(0,r.jsx)(e.code,{children:\"postMessage()\"}),\".\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"The main script listens for messages from the worker using \",(0,r.jsx)(e.code,{children:\"onmessage\"}),\" on the \",(0,r.jsx)(e.code,{children:\"Worker\"}),\" instance.\"]}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"Service workers\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"Act as a network proxy between web app, browser, and network.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Can intercept and handle network requests, cache resources.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Enable offline functionality and push notifications.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Have a lifecycle managed by the browser (install, activate, update).\"}),`\n`,(0,r.jsx)(e.li,{children:\"No access to DOM and main thread resources for security.\"}),`\n`]}),`\n`,(0,r.jsx)(e.p,{children:\"Service workers can be used for:\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"Caching\"}),`\n`,(0,r.jsx)(e.li,{children:\"Offline support\"}),`\n`,(0,r.jsx)(e.li,{children:\"Request handling\"}),`\n`,(0,r.jsx)(e.li,{children:\"Background sync\"}),`\n`]}),`\n`,(0,r.jsx)(e.h4,{children:\"Creating a service worker\"}),`\n`,(0,r.jsx)(e.p,{children:(0,r.jsxs)(e.strong,{children:[(0,r.jsx)(e.code,{children:\"main.js\"}),\" (main script)\"]})}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`if ('serviceWorker' in navigator) {\n  navigator.serviceWorker\n    .register('/service-worker.js')\n    .then(function (registration) {\n      console.log('Service Worker registered:', registration);\n    })\n    .catch(function (err) {\n      console.log('Service Worker registration failed:', err);\n    });\n}\n`})}),`\n`,(0,r.jsx)(e.p,{children:(0,r.jsxs)(e.strong,{children:[(0,r.jsx)(e.code,{children:\"service-worker.js\"}),\" (service worker script)\"]})}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`self.addEventListener('fetch', function (event) {\n  event.respondWith(\n    caches.match(event.request).then(function (response) {\n      // return cached response if available\n      if (response) {\n        return response;\n      }\n\n      // Otherwise, fetch from network\n      return fetch(event.request);\n    }),\n  );\n});\n`})}),`\n`,(0,r.jsx)(e.p,{children:\"In this example:\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[\"The main script registers a service worker at \",(0,r.jsx)(e.code,{children:\"/service-worker.js\"})]}),`\n`,(0,r.jsxs)(e.li,{children:[\"The service worker listens for the \",(0,r.jsx)(e.code,{children:\"fetch()\"}),\" event, which is fired whenever the browser makes a network request\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"The service worker first checks if the requested resource is cached using \",(0,r.jsx)(e.code,{children:\"caches.match(event.request)\"})]}),`\n`,(0,r.jsxs)(e.li,{children:[\"If it is, it returns the cached response. Otherwise, it fetches the resource from the network using \",(0,r.jsx)(e.code,{children:\"fetch(event.request)\"})]}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"Bonus: Shared workers\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Scope\"}),\": Can be accessed from multiple scripts in different windows/tabs/iframes\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Sharing of data\"}),\": Allow data sharing between browser contexts via a messaging interface\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Browser support\"}),\": Limited support, especially \",(0,r.jsx)(e.a,{href:\"https://issues.chromium.org/issues/40290702\",children:\"not available on Android browsers\"})]}),`\n`]}),`\n`,(0,r.jsx)(e.h4,{children:\"Use cases for shared workers:\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"State sharing across multiple windows.\"}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"Bonus: Worklets\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"Worklet\"}),\" interface is a lightweight version of Web Workers and gives developers access to low-level parts of the rendering pipeline. With Worklets, you can run JavaScript and WebAssembly code to do graphics rendering or audio processing where high performance is required.\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"You are not expected to know about worklets, so it won't be covered in great detail. Read more about \",(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Worklet\",children:\"worklets on MDN\"}),\".\"]}),`\n`,(0,r.jsx)(e.h2,{children:\"Considerations and limitations\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Same-Origin policy\"}),\": Workers must comply with the same-origin policy, meaning the script that creates the worker and the worker script itself must be from the same origin\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"No DOM access\"}),\": Workers do not have direct access to the DOM. They can communicate with the main thread through messages\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Performance\"}),\": Creating and managing workers incurs overhead. They should be used judiciously for tasks that truly benefit from parallel execution\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Error handling\"}),\": Proper error handling mechanisms should be in place to handle any issues within the worker scripts\"]}),`\n`]}),`\n`,(0,r.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Worker\",children:\"Worker - MDN\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers\",children:\"Using Web Workers - MDN\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API\",children:\"Service Worker API - MDN\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://javascript.plainenglish.io/understanding-web-workers-in-js-with-real-world-example-1629a283aeec?gi=89cf0dd4c3f4\",children:\"Understanding web workers in JavaScript with real world example\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://dev.to/bharat5604/web-worker-service-worker-and-worklets-a-comprehensive-guide-1f64\",children:\"Web worker, Service worker, and Worklets: A comprehensive guide\"})}),`\n`]})]})}function W(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,Object.assign({},n,{children:(0,r.jsx)(h,n)})):h(n)}var y=W;return v(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),k=(n,e)=>{for(var i in e)t(n,i,{get:e[i],enumerable:!0})},c=(n,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of u(e))!f.call(n,s)&&s!==i&&t(n,s,{get:()=>e[s],enumerable:!(o=g(e,s))||o.enumerable});return n};var v=(n,e,i)=>(i=n!=null?p(m(n)):{},c(e||!n||!n.__esModule?t(i,\"default\",{value:n,enumerable:!0}):i,n)),b=n=>c(t({},\"__esModule\",{value:!0}),n);var l=w((x,a)=>{a.exports=_jsx_runtime});var y={};k(y,{default:()=>d,frontmatter:()=>W});var r=v(l()),W={title:\"What are workers in JavaScript used for?\"};function h(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsx)(e.p,{children:\"Workers in JavaScript are background threads that allow you to run scripts in parallel with the main execution thread, without blocking or interfering with the user interface. Their key features include:\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Parallel processing\"}),\": Workers run in a separate thread from the main thread, allowing your web page to remain responsive to user interactions while the worker performs its tasks. It's useful for moving CPU-intensive work off the main thread and be free from JavaScript's single-threaded nature.\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Communication\"}),\": Uses \",(0,r.jsx)(e.code,{children:\"postMessage()\"}),\" and \",(0,r.jsx)(e.code,{children:\"onmessage\"}),\"/ \",(0,r.jsx)(e.code,{children:\"'message'\"}),\" event for messaging.\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Access to web APIs\"}),\": Workers have access to various Web APIs, including \",(0,r.jsx)(e.code,{children:\"fetch()\"}),\", IndexedDB, and Web Storage, allowing them to perform tasks like data fetching and persisting data independently.\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"No DOM access\"}),\": Workers cannot directly manipulate the DOM, thus cannot interact with the UI, ensuring they don't accidentally interfere with the main thread's operation.\"]}),`\n`]}),`\n`,(0,r.jsx)(e.p,{children:\"There are three main types of workers in JavaScript:\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Web workers / Dedicated workers\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"Run scripts in background threads, separate from the main UI thread.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Useful for CPU-intensive tasks like data processing, calculations, etc.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Cannot directly access or manipulate the DOM.\"}),`\n`]}),`\n`]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Service workers\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"Act as network proxies, handling requests between the app and network.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Enable offline functionality, caching, and push notifications.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Runs independently of the web page, even when it's closed.\"}),`\n`]}),`\n`]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Shared workers\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"Can be shared by multiple scripts running in different windows or frames, as long as they're in the same domain.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Scripts communicate with the shared worker by sending and receiving messages.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Useful for coordinating tasks across different parts of a web page.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsx)(e.h2,{children:\"Workers in JavaScript\"}),`\n`,(0,r.jsx)(e.p,{children:\"Workers in JavaScript are a way to run scripts in background threads, separate from the main execution thread of a web page. This allows for long-running or computationally intensive tasks to be offloaded from the main thread, preventing the user interface from becoming unresponsive or janky.\"}),`\n`,(0,r.jsx)(e.h2,{children:\"Web workers / Dedicated workers\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"Run scripts in background threads separate from the main UI thread.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Designed for CPU-intensive tasks like data processing, mathematical computations, etc. Generally the non-async work.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Cannot directly access the DOM or other main thread resources for security.\"}),`\n`,(0,r.jsxs)(e.li,{children:[\"Communicates with main thread via asynchronous message passing \\u2013 \",(0,r.jsx)(e.code,{children:\"postMessage()\"}),\" and \",(0,r.jsx)(e.code,{children:\"onmessage\"}),\"/ \",(0,r.jsx)(e.code,{children:\"'message'\"}),\".\"]}),`\n`,(0,r.jsx)(e.li,{children:\"Terminated when main script is unloaded or explicitly terminated.\"}),`\n`]}),`\n`,(0,r.jsx)(e.p,{children:\"Web workers can be used for:\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"Image/video processing\"}),`\n`,(0,r.jsx)(e.li,{children:\"Data compression\"}),`\n`,(0,r.jsx)(e.li,{children:\"Complex math\"}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"Creating a web worker\"}),`\n`,(0,r.jsx)(e.p,{children:\"To create a web worker, you need a separate JavaScript file that contains the code for the worker. Here's an example:\"}),`\n`,(0,r.jsx)(e.p,{children:(0,r.jsxs)(e.strong,{children:[(0,r.jsx)(e.code,{children:\"main.js\"}),\" (main script)\"]})}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`// Check if the browser supports workers\nif (window.Worker) {\n  // Create a new Worker\n  const myWorker = new Worker('worker.js');\n\n  // Post a message to the worker\n  myWorker.postMessage('Hello, Worker!');\n\n  // Listen for messages from the worker\n  myWorker.onmessage = function (event) {\n    console.log('Message from Worker:', event.data);\n  };\n\n  // Error handling\n  myWorker.onerror = function (error) {\n    console.error('Error from Worker:', error);\n  };\n}\n`})}),`\n`,(0,r.jsx)(e.p,{children:(0,r.jsxs)(e.strong,{children:[(0,r.jsx)(e.code,{children:\"worker.js\"}),\" (worker script)\"]})}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`// Listen for messages from the main script\nonmessage = function (event) {\n  console.log('Message from Main Script:', event.data);\n\n  // Perform a task (e.g., some computation)\n  const result = event.data + ' - Processed by Worker';\n\n  // Post the result back to the main script\n  postMessage(result);\n};\n`})}),`\n`,(0,r.jsx)(e.p,{children:\"In this example:\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"main.js\"}),\" creates a worker using the \",(0,r.jsx)(e.code,{children:\"Worker\"}),\" constructor and specifies \",(0,r.jsx)(e.code,{children:\"worker.js\"}),\" as the script to run in the worker thread.\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"It posts a message to the worker using \",(0,r.jsx)(e.code,{children:\"postMessage()\"}),\".\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"The worker script (\",(0,r.jsx)(e.code,{children:\"worker.js\"}),\") listens for messages from the main script using \",(0,r.jsx)(e.code,{children:\"onmessage\"}),\".\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"After processing the message, the worker posts a message back to the main script using \",(0,r.jsx)(e.code,{children:\"postMessage()\"}),\".\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"The main script listens for messages from the worker using \",(0,r.jsx)(e.code,{children:\"onmessage\"}),\" on the \",(0,r.jsx)(e.code,{children:\"Worker\"}),\" instance.\"]}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"Service workers\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"Act as a network proxy between web app, browser, and network.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Can intercept and handle network requests, cache resources.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Enable offline functionality and push notifications.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Have a lifecycle managed by the browser (install, activate, update).\"}),`\n`,(0,r.jsx)(e.li,{children:\"No access to DOM and main thread resources for security.\"}),`\n`]}),`\n`,(0,r.jsx)(e.p,{children:\"Service workers can be used for:\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"Caching\"}),`\n`,(0,r.jsx)(e.li,{children:\"Offline support\"}),`\n`,(0,r.jsx)(e.li,{children:\"Request handling\"}),`\n`,(0,r.jsx)(e.li,{children:\"Background sync\"}),`\n`]}),`\n`,(0,r.jsx)(e.h4,{children:\"Creating a service worker\"}),`\n`,(0,r.jsx)(e.p,{children:(0,r.jsxs)(e.strong,{children:[(0,r.jsx)(e.code,{children:\"main.js\"}),\" (main script)\"]})}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`if ('serviceWorker' in navigator) {\n  navigator.serviceWorker\n    .register('/service-worker.js')\n    .then(function (registration) {\n      console.log('Service Worker registered:', registration);\n    })\n    .catch(function (err) {\n      console.log('Service Worker registration failed:', err);\n    });\n}\n`})}),`\n`,(0,r.jsx)(e.p,{children:(0,r.jsxs)(e.strong,{children:[(0,r.jsx)(e.code,{children:\"service-worker.js\"}),\" (service worker script)\"]})}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`self.addEventListener('fetch', function (event) {\n  event.respondWith(\n    caches.match(event.request).then(function (response) {\n      // return cached response if available\n      if (response) {\n        return response;\n      }\n\n      // Otherwise, fetch from network\n      return fetch(event.request);\n    }),\n  );\n});\n`})}),`\n`,(0,r.jsx)(e.p,{children:\"In this example:\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[\"The main script registers a service worker at \",(0,r.jsx)(e.code,{children:\"/service-worker.js\"})]}),`\n`,(0,r.jsxs)(e.li,{children:[\"The service worker listens for the \",(0,r.jsx)(e.code,{children:\"fetch()\"}),\" event, which is fired whenever the browser makes a network request\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"The service worker first checks if the requested resource is cached using \",(0,r.jsx)(e.code,{children:\"caches.match(event.request)\"})]}),`\n`,(0,r.jsxs)(e.li,{children:[\"If it is, it returns the cached response. Otherwise, it fetches the resource from the network using \",(0,r.jsx)(e.code,{children:\"fetch(event.request)\"})]}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"Bonus: Shared workers\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Scope\"}),\": Can be accessed from multiple scripts in different windows/tabs/iframes\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Sharing of data\"}),\": Allow data sharing between browser contexts via a messaging interface\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Browser support\"}),\": Limited support, especially \",(0,r.jsx)(e.a,{href:\"https://issues.chromium.org/issues/40290702\",children:\"not available on Android browsers\"})]}),`\n`]}),`\n`,(0,r.jsx)(e.h4,{children:\"Use cases for shared workers:\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"State sharing across multiple windows.\"}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"Bonus: Worklets\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"The \",(0,r.jsx)(e.code,{children:\"Worklet\"}),\" interface is a lightweight version of Web Workers and gives developers access to low-level parts of the rendering pipeline. With Worklets, you can run JavaScript and WebAssembly code to do graphics rendering or audio processing where high performance is required.\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"You are not expected to know about worklets, so it won't be covered in great detail. Read more about \",(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Worklet\",children:\"worklets on MDN\"}),\".\"]}),`\n`,(0,r.jsx)(e.h2,{children:\"Considerations and limitations\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Same-Origin policy\"}),\": Workers must comply with the same-origin policy, meaning the script that creates the worker and the worker script itself must be from the same origin\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"No DOM access\"}),\": Workers do not have direct access to the DOM. They can communicate with the main thread through messages\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Performance\"}),\": Creating and managing workers incurs overhead. They should be used judiciously for tasks that truly benefit from parallel execution\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Error handling\"}),\": Proper error handling mechanisms should be in place to handle any issues within the worker scripts\"]}),`\n`]}),`\n`,(0,r.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Worker\",children:\"Worker - MDN\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers\",children:\"Using Web Workers - MDN\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API\",children:\"Service Worker API - MDN\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://javascript.plainenglish.io/understanding-web-workers-in-js-with-real-world-example-1629a283aeec?gi=89cf0dd4c3f4\",children:\"Understanding web workers in JavaScript with real world example\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://dev.to/bharat5604/web-worker-service-worker-and-worklets-a-comprehensive-guide-1f64\",children:\"Web worker, Service worker, and Worklets: A comprehensive guide\"})}),`\n`]})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(h,{...n})}):h(n)}return b(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-workers-in-javascript-used-for/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-workers-in-javascript-used-for/zh-CN.json
index 898a251df..54a322cfc 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-workers-in-javascript-used-for/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-workers-in-javascript-used-for/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-workers-in-javascript-used-for/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var c=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var W=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var i in e)c(n,i,{get:e[i],enumerable:!0})},d=(n,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of g(e))!p.call(n,l)&&l!==i&&c(n,l,{get:()=>e[l],enumerable:!(o=k(e,l))||o.enumerable});return n};var u=(n,e,i)=>(i=n!=null?a(w(n)):{},d(e||!n||!n.__esModule?c(i,\"default\",{value:n,enumerable:!0}):i,n)),m=n=>d(c({},\"__esModule\",{value:!0}),n);var s=W((D,h)=>{h.exports=_jsx_runtime});var S={};v(S,{default:()=>j,frontmatter:()=>f});var r=u(s()),f={title:\"JavaScript \\u4E2D\\u7684 Worker \\u6709\\u4EC0\\u4E48\\u4F5C\\u7528\\uFF1F\"};function t(n){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\",strong:\"strong\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",h4:\"h4\",a:\"a\"},n.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsx)(e.p,{children:\"JavaScript \\u4E2D\\u7684 Worker \\u662F\\u540E\\u53F0\\u7EBF\\u7A0B\\uFF0C\\u5141\\u8BB8\\u60A8\\u4E0E\\u4E3B\\u6267\\u884C\\u7EBF\\u7A0B\\u5E76\\u884C\\u8FD0\\u884C\\u811A\\u672C\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u585E\\u6216\\u5E72\\u6270\\u7528\\u6237\\u754C\\u9762\\u3002 \\u5B83\\u4EEC\\u7684\\u4E3B\\u8981\\u7279\\u70B9\\u5305\\u62EC\\uFF1A\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u5E76\\u884C\\u5904\\u7406\"}),\"\\uFF1AWorker \\u5728\\u4E0E\\u4E3B\\u7EBF\\u7A0B\\u4E0D\\u540C\\u7684\\u7EBF\\u7A0B\\u4E2D\\u8FD0\\u884C\\uFF0C\\u5141\\u8BB8\\u60A8\\u7684\\u7F51\\u9875\\u5728 worker \\u6267\\u884C\\u5176\\u4EFB\\u52A1\\u65F6\\u4FDD\\u6301\\u5BF9\\u7528\\u6237\\u4EA4\\u4E92\\u7684\\u54CD\\u5E94\\u3002 \\u8FD9\\u5BF9\\u4E8E\\u5C06 CPU \\u5BC6\\u96C6\\u578B\\u5DE5\\u4F5C\\u4ECE\\u4E3B\\u7EBF\\u7A0B\\u4E2D\\u79FB\\u51FA\\u5E76\\u6446\\u8131 JavaScript \\u5355\\u7EBF\\u7A0B\\u7684\\u7279\\u6027\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u901A\\u4FE1\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"postMessage()\"}),\" \\u548C \",(0,r.jsx)(e.code,{children:\"onmessage\"}),\"/ \",(0,r.jsx)(e.code,{children:\"'message'\"}),\" \\u4E8B\\u4EF6\\u8FDB\\u884C\\u6D88\\u606F\\u4F20\\u9012\\u3002\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u8BBF\\u95EE Web API\"}),\"\\uFF1AWorker \\u53EF\\u4EE5\\u8BBF\\u95EE\\u5404\\u79CD Web API\\uFF0C\\u5305\\u62EC \",(0,r.jsx)(e.code,{children:\"fetch()\"}),\"\\u3001IndexedDB \\u548C Web Storage\\uFF0C\\u5141\\u8BB8\\u5B83\\u4EEC\\u72EC\\u7ACB\\u6267\\u884C\\u6570\\u636E\\u83B7\\u53D6\\u548C\\u6301\\u4E45\\u5316\\u6570\\u636E\\u7B49\\u4EFB\\u52A1\\u3002\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u65E0\\u6CD5\\u8BBF\\u95EE DOM\"}),\"\\uFF1AWorker \\u65E0\\u6CD5\\u76F4\\u63A5\\u64CD\\u4F5C DOM\\uFF0C\\u56E0\\u6B64\\u65E0\\u6CD5\\u4E0E UI \\u4EA4\\u4E92\\uFF0C\\u786E\\u4FDD\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u610F\\u5916\\u5E72\\u6270\\u4E3B\\u7EBF\\u7A0B\\u7684\\u64CD\\u4F5C\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(e.p,{children:\"JavaScript \\u4E2D\\u6709\\u4E09\\u79CD\\u4E3B\\u8981\\u7684 worker \\u7C7B\\u578B\\uFF1A\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Web worker / \\u4E13\\u7528 worker\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"\\u5728\\u540E\\u53F0\\u7EBF\\u7A0B\\u4E2D\\u8FD0\\u884C\\u811A\\u672C\\uFF0C\\u4E0E\\u4E3B UI \\u7EBF\\u7A0B\\u5206\\u5F00\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u9002\\u7528\\u4E8E CPU \\u5BC6\\u96C6\\u578B\\u4EFB\\u52A1\\uFF0C\\u5982\\u6570\\u636E\\u5904\\u7406\\u3001\\u8BA1\\u7B97\\u7B49\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u65E0\\u6CD5\\u76F4\\u63A5\\u8BBF\\u95EE\\u6216\\u64CD\\u4F5C DOM\\u3002\"}),`\n`]}),`\n`]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Service worker\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"\\u5145\\u5F53\\u7F51\\u7EDC\\u4EE3\\u7406\\uFF0C\\u5904\\u7406\\u5E94\\u7528\\u7A0B\\u5E8F\\u548C\\u7F51\\u7EDC\\u4E4B\\u95F4\\u7684\\u8BF7\\u6C42\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u542F\\u7528\\u79BB\\u7EBF\\u529F\\u80FD\\u3001\\u7F13\\u5B58\\u548C\\u63A8\\u9001\\u901A\\u77E5\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u72EC\\u7ACB\\u4E8E\\u7F51\\u9875\\u8FD0\\u884C\\uFF0C\\u5373\\u4F7F\\u7F51\\u9875\\u5DF2\\u5173\\u95ED\\u3002\"}),`\n`]}),`\n`]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u5171\\u4EAB worker\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"\\u53EA\\u8981\\u5B83\\u4EEC\\u5728\\u540C\\u4E00\\u57DF\\u4E2D\\uFF0C\\u5C31\\u53EF\\u4EE5\\u7531\\u5728\\u4E0D\\u540C\\u7A97\\u53E3\\u6216\\u6846\\u67B6\\u4E2D\\u8FD0\\u884C\\u7684\\u591A\\u4E2A\\u811A\\u672C\\u5171\\u4EAB\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u811A\\u672C\\u901A\\u8FC7\\u53D1\\u9001\\u548C\\u63A5\\u6536\\u6D88\\u606F\\u4E0E\\u5171\\u4EAB worker \\u901A\\u4FE1\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u9002\\u7528\\u4E8E\\u534F\\u8C03\\u7F51\\u9875\\u4E0D\\u540C\\u90E8\\u5206\\u7684\\u4EFB\\u52A1\\u3002\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsx)(e.h2,{children:\"JavaScript \\u4E2D\\u7684 Worker\"}),`\n`,(0,r.jsx)(e.p,{children:\"JavaScript \\u4E2D\\u7684 Worker \\u662F\\u4E00\\u79CD\\u5728\\u540E\\u53F0\\u7EBF\\u7A0B\\u4E2D\\u8FD0\\u884C\\u811A\\u672C\\u7684\\u65B9\\u5F0F\\uFF0C\\u4E0E\\u7F51\\u9875\\u7684\\u4E3B\\u6267\\u884C\\u7EBF\\u7A0B\\u5206\\u5F00\\u3002 \\u8FD9\\u5141\\u8BB8\\u5C06\\u957F\\u65F6\\u95F4\\u8FD0\\u884C\\u6216\\u8BA1\\u7B97\\u5BC6\\u96C6\\u578B\\u4EFB\\u52A1\\u4ECE\\u4E3B\\u7EBF\\u7A0B\\u4E2D\\u5378\\u8F7D\\uFF0C\\u9632\\u6B62\\u7528\\u6237\\u754C\\u9762\\u53D8\\u5F97\\u65E0\\u54CD\\u5E94\\u6216\\u5361\\u987F\\u3002\"}),`\n`,(0,r.jsx)(e.h2,{children:\"Web worker / \\u4E13\\u7528 worker\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"\\u5728\\u4E0E\\u4E3B UI \\u7EBF\\u7A0B\\u5206\\u5F00\\u7684\\u540E\\u53F0\\u7EBF\\u7A0B\\u4E2D\\u8FD0\\u884C\\u811A\\u672C\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u4E13\\u4E3A CPU \\u5BC6\\u96C6\\u578B\\u4EFB\\u52A1\\u800C\\u8BBE\\u8BA1\\uFF0C\\u5982\\u6570\\u636E\\u5904\\u7406\\u3001\\u6570\\u5B66\\u8BA1\\u7B97\\u7B49\\u3002 \\u901A\\u5E38\\u662F\\u975E\\u5F02\\u6B65\\u5DE5\\u4F5C\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u51FA\\u4E8E\\u5B89\\u5168\\u539F\\u56E0\\uFF0C\\u65E0\\u6CD5\\u76F4\\u63A5\\u8BBF\\u95EE DOM \\u6216\\u5176\\u4ED6\\u4E3B\\u7EBF\\u7A0B\\u8D44\\u6E90\\u3002\"}),`\n`,(0,r.jsxs)(e.li,{children:[\"\\u901A\\u8FC7\\u5F02\\u6B65\\u6D88\\u606F\\u4F20\\u9012\\u8FDB\\u884C\\u4E0E\\u4E3B\\u7EBF\\u7A0B\\u7684\\u901A\\u4FE1 \\u2013 \",(0,r.jsx)(e.code,{children:\"postMessage()\"}),\" \\u548C \",(0,r.jsx)(e.code,{children:\"onmessage\"}),\"/ \",(0,r.jsx)(e.code,{children:\"'message'\"}),\"\\u3002\"]}),`\n`,(0,r.jsx)(e.li,{children:\"\\u5F53\\u4E3B\\u811A\\u672C\\u88AB\\u5378\\u8F7D\\u6216\\u663E\\u5F0F\\u7EC8\\u6B62\\u65F6\\u7EC8\\u6B62\\u3002\"}),`\n`]}),`\n`,(0,r.jsx)(e.p,{children:\"Web worker \\u53EF\\u7528\\u4E8E\\uFF1A\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"\\u56FE\\u50CF/\\u89C6\\u9891\\u5904\\u7406\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u6570\\u636E\\u538B\\u7F29\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u590D\\u6742\\u6570\\u5B66\"}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u521B\\u5EFA\\u4E00\\u4E2A web worker\"}),`\n`,(0,r.jsx)(e.p,{children:\"\\u8981\\u521B\\u5EFA\\u4E00\\u4E2A web worker\\uFF0C\\u60A8\\u9700\\u8981\\u4E00\\u4E2A\\u5355\\u72EC\\u7684 JavaScript \\u6587\\u4EF6\\uFF0C\\u5176\\u4E2D\\u5305\\u542B worker \\u7684\\u4EE3\\u7801\\u3002 \\u8FD9\\u662F\\u4E00\\u4E2A\\u4F8B\\u5B50\\uFF1A\"}),`\n`,(0,r.jsx)(e.p,{children:(0,r.jsxs)(e.strong,{children:[(0,r.jsx)(e.code,{children:\"main.js\"}),\" (\\u4E3B\\u811A\\u672C)\"]})}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`// \\u68C0\\u67E5\\u6D4F\\u89C8\\u5668\\u662F\\u5426\\u652F\\u6301 worker\nif (window.Worker) {\n  // \\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684 Worker\n  const myWorker = new Worker('worker.js');\n\n  // \\u5411 worker \\u53D1\\u9001\\u6D88\\u606F\n  myWorker.postMessage('Hello, Worker!');\n\n  // \\u76D1\\u542C\\u6765\\u81EA worker \\u7684\\u6D88\\u606F\n  myWorker.onmessage = function (event) {\n    console.log('\\u6765\\u81EA Worker \\u7684\\u6D88\\u606F\\uFF1A', event.data);\n  };\n\n  // \\u9519\\u8BEF\\u5904\\u7406\n  myWorker.onerror = function (error) {\n    console.error('\\u6765\\u81EA Worker \\u7684\\u9519\\u8BEF\\uFF1A', error);\n  };\n}\n`})}),`\n`,(0,r.jsx)(e.p,{children:(0,r.jsxs)(e.strong,{children:[(0,r.jsx)(e.code,{children:\"worker.js\"}),\" (worker \\u811A\\u672C)\"]})}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`// \\u76D1\\u542C\\u6765\\u81EA\\u4E3B\\u811A\\u672C\\u7684\\u6D88\\u606F\nonmessage = function (event) {\n  console.log('\\u6765\\u81EA\\u4E3B\\u811A\\u672C\\u7684\\u6D88\\u606F\\uFF1A', event.data);\n\n  // \\u6267\\u884C\\u4E00\\u4E2A\\u4EFB\\u52A1\\uFF08\\u4F8B\\u5982\\uFF0C\\u4E00\\u4E9B\\u8BA1\\u7B97\\uFF09\n  const result = event.data + ' - \\u7531 Worker \\u5904\\u7406';\n\n  // \\u5C06\\u7ED3\\u679C\\u53D1\\u56DE\\u7ED9\\u4E3B\\u811A\\u672C\n  postMessage(result);\n};\n`})}),`\n`,(0,r.jsx)(e.p,{children:\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF1A\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"main.js\"}),\" \\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"Worker\"}),\" \\u6784\\u9020\\u51FD\\u6570\\u521B\\u5EFA\\u4E00\\u4E2A worker\\uFF0C\\u5E76\\u6307\\u5B9A \",(0,r.jsx)(e.code,{children:\"worker.js\"}),\" \\u4F5C\\u4E3A\\u5728 worker \\u7EBF\\u7A0B\\u4E2D\\u8FD0\\u884C\\u7684\\u811A\\u672C\\u3002\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"\\u5B83\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"postMessage()\"}),\" \\u5411 worker \\u53D1\\u9001\\u6D88\\u606F\\u3002\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"worker \\u811A\\u672C (\",(0,r.jsx)(e.code,{children:\"worker.js\"}),\") \\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"onmessage\"}),\" \\u76D1\\u542C\\u6765\\u81EA\\u4E3B\\u811A\\u672C\\u7684\\u6D88\\u606F\\u3002\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"\\u5904\\u7406\\u5B8C\\u6D88\\u606F\\u540E\\uFF0Cworker \\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"postMessage()\"}),\" \\u5C06\\u6D88\\u606F\\u53D1\\u56DE\\u7ED9\\u4E3B\\u811A\\u672C\\u3002\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"\\u4E3B\\u811A\\u672C\\u5728 \",(0,r.jsx)(e.code,{children:\"Worker\"}),\" \\u5B9E\\u4F8B\\u4E0A\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"onmessage\"}),\" \\u76D1\\u542C\\u6765\\u81EA worker \\u7684\\u6D88\\u606F\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"Service workers\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"\\u5145\\u5F53 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u3001\\u6D4F\\u89C8\\u5668\\u548C\\u7F51\\u7EDC\\u4E4B\\u95F4\\u7684\\u7F51\\u7EDC\\u4EE3\\u7406\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u53EF\\u4EE5\\u62E6\\u622A\\u548C\\u5904\\u7406\\u7F51\\u7EDC\\u8BF7\\u6C42\\uFF0C\\u7F13\\u5B58\\u8D44\\u6E90\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u542F\\u7528\\u79BB\\u7EBF\\u529F\\u80FD\\u548C\\u63A8\\u9001\\u901A\\u77E5\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u5177\\u6709\\u7531\\u6D4F\\u89C8\\u5668\\u7BA1\\u7406\\u7684\\u751F\\u547D\\u5468\\u671F\\uFF08\\u5B89\\u88C5\\u3001\\u6FC0\\u6D3B\\u3001\\u66F4\\u65B0\\uFF09\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u51FA\\u4E8E\\u5B89\\u5168\\u8003\\u8651\\uFF0C\\u65E0\\u6CD5\\u8BBF\\u95EE DOM \\u548C\\u4E3B\\u7EBF\\u7A0B\\u8D44\\u6E90\\u3002\"}),`\n`]}),`\n`,(0,r.jsx)(e.p,{children:\"Service workers \\u53EF\\u4EE5\\u7528\\u4E8E\\uFF1A\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"\\u7F13\\u5B58\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u79BB\\u7EBF\\u652F\\u6301\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u8BF7\\u6C42\\u5904\\u7406\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u540E\\u53F0\\u540C\\u6B65\"}),`\n`]}),`\n`,(0,r.jsx)(e.h4,{children:\"\\u521B\\u5EFA service worker\"}),`\n`,(0,r.jsx)(e.p,{children:(0,r.jsxs)(e.strong,{children:[(0,r.jsx)(e.code,{children:\"main.js\"}),\" (\\u4E3B\\u811A\\u672C)\"]})}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`if ('serviceWorker' in navigator) {\n  navigator.serviceWorker\n    .register('/service-worker.js')\n    .then(function (registration) {\n      console.log('Service Worker registered:', registration);\n    })\n    .catch(function (err) {\n      console.log('Service Worker registration failed:', err);\n    });\n}\n`})}),`\n`,(0,r.jsx)(e.p,{children:(0,r.jsxs)(e.strong,{children:[(0,r.jsx)(e.code,{children:\"service-worker.js\"}),\" (service worker \\u811A\\u672C)\"]})}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`self.addEventListener('fetch', function (event) {\n  event.respondWith(\n    caches.match(event.request).then(function (response) {\n      // return cached response if available\n      if (response) {\n        return response;\n      }\n\n      // Otherwise, fetch from network\n      return fetch(event.request);\n    }),\n  );\n});\n`})}),`\n`,(0,r.jsx)(e.p,{children:\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF1A\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[\"\\u4E3B\\u811A\\u672C\\u5728 \",(0,r.jsx)(e.code,{children:\"/service-worker.js\"}),\" \\u6CE8\\u518C\\u4E00\\u4E2A service worker\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"service worker \\u76D1\\u542C \",(0,r.jsx)(e.code,{children:\"fetch()\"}),\" \\u4E8B\\u4EF6\\uFF0C\\u8BE5\\u4E8B\\u4EF6\\u5728\\u6D4F\\u89C8\\u5668\\u53D1\\u51FA\\u7F51\\u7EDC\\u8BF7\\u6C42\\u65F6\\u89E6\\u53D1\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"service worker \\u9996\\u5148\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"caches.match(event.request)\"}),\" \\u68C0\\u67E5\\u8BF7\\u6C42\\u7684\\u8D44\\u6E90\\u662F\\u5426\\u5DF2\\u7F13\\u5B58\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"\\u5982\\u679C\\u5DF2\\u7F13\\u5B58\\uFF0C\\u5219\\u8FD4\\u56DE\\u7F13\\u5B58\\u7684\\u54CD\\u5E94\\u3002 \\u5426\\u5219\\uFF0C\\u5B83\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"fetch(event.request)\"}),\" \\u4ECE\\u7F51\\u7EDC\\u83B7\\u53D6\\u8D44\\u6E90\"]}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u5956\\u52B1\\uFF1A\\u5171\\u4EAB worker\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u8303\\u56F4\"}),\"\\uFF1A\\u53EF\\u4EE5\\u4ECE\\u4E0D\\u540C\\u7A97\\u53E3/\\u6807\\u7B7E\\u9875/iframe \\u4E2D\\u7684\\u591A\\u4E2A\\u811A\\u672C\\u8BBF\\u95EE\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u6570\\u636E\\u5171\\u4EAB\"}),\"\\uFF1A\\u5141\\u8BB8\\u901A\\u8FC7\\u6D88\\u606F\\u4F20\\u9012\\u63A5\\u53E3\\u5728\\u6D4F\\u89C8\\u5668\\u4E0A\\u4E0B\\u6587\\u4E4B\\u95F4\\u5171\\u4EAB\\u6570\\u636E\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u6D4F\\u89C8\\u5668\\u652F\\u6301\"}),\"\\uFF1A\\u652F\\u6301\\u6709\\u9650\\uFF0C\\u5C24\\u5176\",(0,r.jsx)(e.a,{href:\"https://issues.chromium.org/issues/40290702\",children:\"\\u5728 Android \\u6D4F\\u89C8\\u5668\\u4E0A\\u4E0D\\u53EF\\u7528\"})]}),`\n`]}),`\n`,(0,r.jsx)(e.h4,{children:\"\\u5171\\u4EAB worker \\u7684\\u7528\\u4F8B\\uFF1A\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"\\u8DE8\\u591A\\u4E2A\\u7A97\\u53E3\\u5171\\u4EAB\\u72B6\\u6001\\u3002\"}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u5956\\u52B1\\uFF1AWorklets\"}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"Worklet\"}),\" \\u63A5\\u53E3\\u662F Web Workers \\u7684\\u8F7B\\u91CF\\u7EA7\\u7248\\u672C\\uFF0C\\u5B83\\u4F7F\\u5F00\\u53D1\\u4EBA\\u5458\\u53EF\\u4EE5\\u8BBF\\u95EE\\u6E32\\u67D3\\u7BA1\\u9053\\u7684\\u4F4E\\u7EA7\\u90E8\\u5206\\u3002 \\u4F7F\\u7528 Worklets\\uFF0C\\u60A8\\u53EF\\u4EE5\\u8FD0\\u884C JavaScript \\u548C WebAssembly \\u4EE3\\u7801\\u6765\\u6267\\u884C\\u56FE\\u5F62\\u6E32\\u67D3\\u6216\\u97F3\\u9891\\u5904\\u7406\\uFF0C\\u5176\\u4E2D\\u9700\\u8981\\u9AD8\\u6027\\u80FD\\u3002\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u60A8\\u4E0D\\u9700\\u8981\\u4E86\\u89E3 worklets\\uFF0C\\u56E0\\u6B64\\u4E0D\\u4F1A\\u8BE6\\u7EC6\\u4ECB\\u7ECD\\u3002 \\u5728 \",(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Worklet\",children:\"MDN \\u4E0A\\u9605\\u8BFB\\u6709\\u5173 worklets \\u7684\\u66F4\\u591A\\u4FE1\\u606F\"}),\"\\u3002\"]}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u8003\\u8651\\u4E8B\\u9879\\u548C\\u9650\\u5236\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u540C\\u6E90\\u7B56\\u7565\"}),\"\\uFF1AWorkers \\u5FC5\\u987B\\u9075\\u5B88\\u540C\\u6E90\\u7B56\\u7565\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u521B\\u5EFA worker \\u7684\\u811A\\u672C\\u548C worker \\u811A\\u672C\\u672C\\u8EAB\\u5FC5\\u987B\\u6765\\u81EA\\u540C\\u4E00\\u6E90\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u65E0 DOM \\u8BBF\\u95EE\"}),\"\\uFF1AWorkers \\u65E0\\u6CD5\\u76F4\\u63A5\\u8BBF\\u95EE DOM\\u3002 \\u5B83\\u4EEC\\u53EF\\u4EE5\\u901A\\u8FC7\\u6D88\\u606F\\u4E0E\\u4E3B\\u7EBF\\u7A0B\\u901A\\u4FE1\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u6027\\u80FD\"}),\"\\uFF1A\\u521B\\u5EFA\\u548C\\u7BA1\\u7406 workers \\u4F1A\\u4EA7\\u751F\\u5F00\\u9500\\u3002 \\u5B83\\u4EEC\\u5E94\\u8BE5\\u8C28\\u614E\\u7528\\u4E8E\\u771F\\u6B63\\u53D7\\u76CA\\u4E8E\\u5E76\\u884C\\u6267\\u884C\\u7684\\u4EFB\\u52A1\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u9519\\u8BEF\\u5904\\u7406\"}),\"\\uFF1A\\u5E94\\u5EFA\\u7ACB\\u9002\\u5F53\\u7684\\u9519\\u8BEF\\u5904\\u7406\\u673A\\u5236\\u6765\\u5904\\u7406 worker \\u811A\\u672C\\u4E2D\\u7684\\u4EFB\\u4F55\\u95EE\\u9898\"]}),`\n`]}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Worker\",children:\"Worker - MDN\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers\",children:\"Using Web Workers - MDN\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API\",children:\"Service Worker API - MDN\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://javascript.plainenglish.io/understanding-web-workers-in-js-with-real-world-example-1629a283aeec?gi=89cf0dd4c3f4\",children:\"Understanding web workers in JavaScript with real world example\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://dev.to/bharat5604/web-worker-service-worker-and-worklets-a-comprehensive-guide-1f64\",children:\"Web worker, Service worker, and Worklets: A comprehensive guide\"})}),`\n`]})]})}function b(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,Object.assign({},n,{children:(0,r.jsx)(t,n)})):t(n)}var j=b;return m(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var k=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),u=(n,e)=>{for(var i in e)c(n,i,{get:e[i],enumerable:!0})},d=(n,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of w(e))!W.call(n,l)&&l!==i&&c(n,l,{get:()=>e[l],enumerable:!(o=g(e,l))||o.enumerable});return n};var m=(n,e,i)=>(i=n!=null?k(p(n)):{},d(e||!n||!n.__esModule?c(i,\"default\",{value:n,enumerable:!0}):i,n)),f=n=>d(c({},\"__esModule\",{value:!0}),n);var s=v((M,h)=>{h.exports=_jsx_runtime});var S={};u(S,{default:()=>a,frontmatter:()=>b});var r=m(s()),b={title:\"JavaScript \\u4E2D\\u7684 Worker \\u6709\\u4EC0\\u4E48\\u4F5C\\u7528\\uFF1F\"};function t(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsx)(e.p,{children:\"JavaScript \\u4E2D\\u7684 Worker \\u662F\\u540E\\u53F0\\u7EBF\\u7A0B\\uFF0C\\u5141\\u8BB8\\u60A8\\u4E0E\\u4E3B\\u6267\\u884C\\u7EBF\\u7A0B\\u5E76\\u884C\\u8FD0\\u884C\\u811A\\u672C\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u585E\\u6216\\u5E72\\u6270\\u7528\\u6237\\u754C\\u9762\\u3002 \\u5B83\\u4EEC\\u7684\\u4E3B\\u8981\\u7279\\u70B9\\u5305\\u62EC\\uFF1A\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u5E76\\u884C\\u5904\\u7406\"}),\"\\uFF1AWorker \\u5728\\u4E0E\\u4E3B\\u7EBF\\u7A0B\\u4E0D\\u540C\\u7684\\u7EBF\\u7A0B\\u4E2D\\u8FD0\\u884C\\uFF0C\\u5141\\u8BB8\\u60A8\\u7684\\u7F51\\u9875\\u5728 worker \\u6267\\u884C\\u5176\\u4EFB\\u52A1\\u65F6\\u4FDD\\u6301\\u5BF9\\u7528\\u6237\\u4EA4\\u4E92\\u7684\\u54CD\\u5E94\\u3002 \\u8FD9\\u5BF9\\u4E8E\\u5C06 CPU \\u5BC6\\u96C6\\u578B\\u5DE5\\u4F5C\\u4ECE\\u4E3B\\u7EBF\\u7A0B\\u4E2D\\u79FB\\u51FA\\u5E76\\u6446\\u8131 JavaScript \\u5355\\u7EBF\\u7A0B\\u7684\\u7279\\u6027\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u901A\\u4FE1\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"postMessage()\"}),\" \\u548C \",(0,r.jsx)(e.code,{children:\"onmessage\"}),\"/ \",(0,r.jsx)(e.code,{children:\"'message'\"}),\" \\u4E8B\\u4EF6\\u8FDB\\u884C\\u6D88\\u606F\\u4F20\\u9012\\u3002\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u8BBF\\u95EE Web API\"}),\"\\uFF1AWorker \\u53EF\\u4EE5\\u8BBF\\u95EE\\u5404\\u79CD Web API\\uFF0C\\u5305\\u62EC \",(0,r.jsx)(e.code,{children:\"fetch()\"}),\"\\u3001IndexedDB \\u548C Web Storage\\uFF0C\\u5141\\u8BB8\\u5B83\\u4EEC\\u72EC\\u7ACB\\u6267\\u884C\\u6570\\u636E\\u83B7\\u53D6\\u548C\\u6301\\u4E45\\u5316\\u6570\\u636E\\u7B49\\u4EFB\\u52A1\\u3002\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u65E0\\u6CD5\\u8BBF\\u95EE DOM\"}),\"\\uFF1AWorker \\u65E0\\u6CD5\\u76F4\\u63A5\\u64CD\\u4F5C DOM\\uFF0C\\u56E0\\u6B64\\u65E0\\u6CD5\\u4E0E UI \\u4EA4\\u4E92\\uFF0C\\u786E\\u4FDD\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u610F\\u5916\\u5E72\\u6270\\u4E3B\\u7EBF\\u7A0B\\u7684\\u64CD\\u4F5C\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(e.p,{children:\"JavaScript \\u4E2D\\u6709\\u4E09\\u79CD\\u4E3B\\u8981\\u7684 worker \\u7C7B\\u578B\\uFF1A\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Web worker / \\u4E13\\u7528 worker\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"\\u5728\\u540E\\u53F0\\u7EBF\\u7A0B\\u4E2D\\u8FD0\\u884C\\u811A\\u672C\\uFF0C\\u4E0E\\u4E3B UI \\u7EBF\\u7A0B\\u5206\\u5F00\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u9002\\u7528\\u4E8E CPU \\u5BC6\\u96C6\\u578B\\u4EFB\\u52A1\\uFF0C\\u5982\\u6570\\u636E\\u5904\\u7406\\u3001\\u8BA1\\u7B97\\u7B49\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u65E0\\u6CD5\\u76F4\\u63A5\\u8BBF\\u95EE\\u6216\\u64CD\\u4F5C DOM\\u3002\"}),`\n`]}),`\n`]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Service worker\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"\\u5145\\u5F53\\u7F51\\u7EDC\\u4EE3\\u7406\\uFF0C\\u5904\\u7406\\u5E94\\u7528\\u7A0B\\u5E8F\\u548C\\u7F51\\u7EDC\\u4E4B\\u95F4\\u7684\\u8BF7\\u6C42\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u542F\\u7528\\u79BB\\u7EBF\\u529F\\u80FD\\u3001\\u7F13\\u5B58\\u548C\\u63A8\\u9001\\u901A\\u77E5\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u72EC\\u7ACB\\u4E8E\\u7F51\\u9875\\u8FD0\\u884C\\uFF0C\\u5373\\u4F7F\\u7F51\\u9875\\u5DF2\\u5173\\u95ED\\u3002\"}),`\n`]}),`\n`]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u5171\\u4EAB worker\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"\\u53EA\\u8981\\u5B83\\u4EEC\\u5728\\u540C\\u4E00\\u57DF\\u4E2D\\uFF0C\\u5C31\\u53EF\\u4EE5\\u7531\\u5728\\u4E0D\\u540C\\u7A97\\u53E3\\u6216\\u6846\\u67B6\\u4E2D\\u8FD0\\u884C\\u7684\\u591A\\u4E2A\\u811A\\u672C\\u5171\\u4EAB\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u811A\\u672C\\u901A\\u8FC7\\u53D1\\u9001\\u548C\\u63A5\\u6536\\u6D88\\u606F\\u4E0E\\u5171\\u4EAB worker \\u901A\\u4FE1\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u9002\\u7528\\u4E8E\\u534F\\u8C03\\u7F51\\u9875\\u4E0D\\u540C\\u90E8\\u5206\\u7684\\u4EFB\\u52A1\\u3002\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsx)(e.h2,{children:\"JavaScript \\u4E2D\\u7684 Worker\"}),`\n`,(0,r.jsx)(e.p,{children:\"JavaScript \\u4E2D\\u7684 Worker \\u662F\\u4E00\\u79CD\\u5728\\u540E\\u53F0\\u7EBF\\u7A0B\\u4E2D\\u8FD0\\u884C\\u811A\\u672C\\u7684\\u65B9\\u5F0F\\uFF0C\\u4E0E\\u7F51\\u9875\\u7684\\u4E3B\\u6267\\u884C\\u7EBF\\u7A0B\\u5206\\u5F00\\u3002 \\u8FD9\\u5141\\u8BB8\\u5C06\\u957F\\u65F6\\u95F4\\u8FD0\\u884C\\u6216\\u8BA1\\u7B97\\u5BC6\\u96C6\\u578B\\u4EFB\\u52A1\\u4ECE\\u4E3B\\u7EBF\\u7A0B\\u4E2D\\u5378\\u8F7D\\uFF0C\\u9632\\u6B62\\u7528\\u6237\\u754C\\u9762\\u53D8\\u5F97\\u65E0\\u54CD\\u5E94\\u6216\\u5361\\u987F\\u3002\"}),`\n`,(0,r.jsx)(e.h2,{children:\"Web worker / \\u4E13\\u7528 worker\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"\\u5728\\u4E0E\\u4E3B UI \\u7EBF\\u7A0B\\u5206\\u5F00\\u7684\\u540E\\u53F0\\u7EBF\\u7A0B\\u4E2D\\u8FD0\\u884C\\u811A\\u672C\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u4E13\\u4E3A CPU \\u5BC6\\u96C6\\u578B\\u4EFB\\u52A1\\u800C\\u8BBE\\u8BA1\\uFF0C\\u5982\\u6570\\u636E\\u5904\\u7406\\u3001\\u6570\\u5B66\\u8BA1\\u7B97\\u7B49\\u3002 \\u901A\\u5E38\\u662F\\u975E\\u5F02\\u6B65\\u5DE5\\u4F5C\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u51FA\\u4E8E\\u5B89\\u5168\\u539F\\u56E0\\uFF0C\\u65E0\\u6CD5\\u76F4\\u63A5\\u8BBF\\u95EE DOM \\u6216\\u5176\\u4ED6\\u4E3B\\u7EBF\\u7A0B\\u8D44\\u6E90\\u3002\"}),`\n`,(0,r.jsxs)(e.li,{children:[\"\\u901A\\u8FC7\\u5F02\\u6B65\\u6D88\\u606F\\u4F20\\u9012\\u8FDB\\u884C\\u4E0E\\u4E3B\\u7EBF\\u7A0B\\u7684\\u901A\\u4FE1 \\u2013 \",(0,r.jsx)(e.code,{children:\"postMessage()\"}),\" \\u548C \",(0,r.jsx)(e.code,{children:\"onmessage\"}),\"/ \",(0,r.jsx)(e.code,{children:\"'message'\"}),\"\\u3002\"]}),`\n`,(0,r.jsx)(e.li,{children:\"\\u5F53\\u4E3B\\u811A\\u672C\\u88AB\\u5378\\u8F7D\\u6216\\u663E\\u5F0F\\u7EC8\\u6B62\\u65F6\\u7EC8\\u6B62\\u3002\"}),`\n`]}),`\n`,(0,r.jsx)(e.p,{children:\"Web worker \\u53EF\\u7528\\u4E8E\\uFF1A\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"\\u56FE\\u50CF/\\u89C6\\u9891\\u5904\\u7406\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u6570\\u636E\\u538B\\u7F29\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u590D\\u6742\\u6570\\u5B66\"}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u521B\\u5EFA\\u4E00\\u4E2A web worker\"}),`\n`,(0,r.jsx)(e.p,{children:\"\\u8981\\u521B\\u5EFA\\u4E00\\u4E2A web worker\\uFF0C\\u60A8\\u9700\\u8981\\u4E00\\u4E2A\\u5355\\u72EC\\u7684 JavaScript \\u6587\\u4EF6\\uFF0C\\u5176\\u4E2D\\u5305\\u542B worker \\u7684\\u4EE3\\u7801\\u3002 \\u8FD9\\u662F\\u4E00\\u4E2A\\u4F8B\\u5B50\\uFF1A\"}),`\n`,(0,r.jsx)(e.p,{children:(0,r.jsxs)(e.strong,{children:[(0,r.jsx)(e.code,{children:\"main.js\"}),\" (\\u4E3B\\u811A\\u672C)\"]})}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`// \\u68C0\\u67E5\\u6D4F\\u89C8\\u5668\\u662F\\u5426\\u652F\\u6301 worker\nif (window.Worker) {\n  // \\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684 Worker\n  const myWorker = new Worker('worker.js');\n\n  // \\u5411 worker \\u53D1\\u9001\\u6D88\\u606F\n  myWorker.postMessage('Hello, Worker!');\n\n  // \\u76D1\\u542C\\u6765\\u81EA worker \\u7684\\u6D88\\u606F\n  myWorker.onmessage = function (event) {\n    console.log('\\u6765\\u81EA Worker \\u7684\\u6D88\\u606F\\uFF1A', event.data);\n  };\n\n  // \\u9519\\u8BEF\\u5904\\u7406\n  myWorker.onerror = function (error) {\n    console.error('\\u6765\\u81EA Worker \\u7684\\u9519\\u8BEF\\uFF1A', error);\n  };\n}\n`})}),`\n`,(0,r.jsx)(e.p,{children:(0,r.jsxs)(e.strong,{children:[(0,r.jsx)(e.code,{children:\"worker.js\"}),\" (worker \\u811A\\u672C)\"]})}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`// \\u76D1\\u542C\\u6765\\u81EA\\u4E3B\\u811A\\u672C\\u7684\\u6D88\\u606F\nonmessage = function (event) {\n  console.log('\\u6765\\u81EA\\u4E3B\\u811A\\u672C\\u7684\\u6D88\\u606F\\uFF1A', event.data);\n\n  // \\u6267\\u884C\\u4E00\\u4E2A\\u4EFB\\u52A1\\uFF08\\u4F8B\\u5982\\uFF0C\\u4E00\\u4E9B\\u8BA1\\u7B97\\uFF09\n  const result = event.data + ' - \\u7531 Worker \\u5904\\u7406';\n\n  // \\u5C06\\u7ED3\\u679C\\u53D1\\u56DE\\u7ED9\\u4E3B\\u811A\\u672C\n  postMessage(result);\n};\n`})}),`\n`,(0,r.jsx)(e.p,{children:\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF1A\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"main.js\"}),\" \\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"Worker\"}),\" \\u6784\\u9020\\u51FD\\u6570\\u521B\\u5EFA\\u4E00\\u4E2A worker\\uFF0C\\u5E76\\u6307\\u5B9A \",(0,r.jsx)(e.code,{children:\"worker.js\"}),\" \\u4F5C\\u4E3A\\u5728 worker \\u7EBF\\u7A0B\\u4E2D\\u8FD0\\u884C\\u7684\\u811A\\u672C\\u3002\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"\\u5B83\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"postMessage()\"}),\" \\u5411 worker \\u53D1\\u9001\\u6D88\\u606F\\u3002\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"worker \\u811A\\u672C (\",(0,r.jsx)(e.code,{children:\"worker.js\"}),\") \\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"onmessage\"}),\" \\u76D1\\u542C\\u6765\\u81EA\\u4E3B\\u811A\\u672C\\u7684\\u6D88\\u606F\\u3002\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"\\u5904\\u7406\\u5B8C\\u6D88\\u606F\\u540E\\uFF0Cworker \\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"postMessage()\"}),\" \\u5C06\\u6D88\\u606F\\u53D1\\u56DE\\u7ED9\\u4E3B\\u811A\\u672C\\u3002\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"\\u4E3B\\u811A\\u672C\\u5728 \",(0,r.jsx)(e.code,{children:\"Worker\"}),\" \\u5B9E\\u4F8B\\u4E0A\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"onmessage\"}),\" \\u76D1\\u542C\\u6765\\u81EA worker \\u7684\\u6D88\\u606F\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"Service workers\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"\\u5145\\u5F53 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u3001\\u6D4F\\u89C8\\u5668\\u548C\\u7F51\\u7EDC\\u4E4B\\u95F4\\u7684\\u7F51\\u7EDC\\u4EE3\\u7406\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u53EF\\u4EE5\\u62E6\\u622A\\u548C\\u5904\\u7406\\u7F51\\u7EDC\\u8BF7\\u6C42\\uFF0C\\u7F13\\u5B58\\u8D44\\u6E90\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u542F\\u7528\\u79BB\\u7EBF\\u529F\\u80FD\\u548C\\u63A8\\u9001\\u901A\\u77E5\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u5177\\u6709\\u7531\\u6D4F\\u89C8\\u5668\\u7BA1\\u7406\\u7684\\u751F\\u547D\\u5468\\u671F\\uFF08\\u5B89\\u88C5\\u3001\\u6FC0\\u6D3B\\u3001\\u66F4\\u65B0\\uFF09\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u51FA\\u4E8E\\u5B89\\u5168\\u8003\\u8651\\uFF0C\\u65E0\\u6CD5\\u8BBF\\u95EE DOM \\u548C\\u4E3B\\u7EBF\\u7A0B\\u8D44\\u6E90\\u3002\"}),`\n`]}),`\n`,(0,r.jsx)(e.p,{children:\"Service workers \\u53EF\\u4EE5\\u7528\\u4E8E\\uFF1A\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"\\u7F13\\u5B58\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u79BB\\u7EBF\\u652F\\u6301\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u8BF7\\u6C42\\u5904\\u7406\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u540E\\u53F0\\u540C\\u6B65\"}),`\n`]}),`\n`,(0,r.jsx)(e.h4,{children:\"\\u521B\\u5EFA service worker\"}),`\n`,(0,r.jsx)(e.p,{children:(0,r.jsxs)(e.strong,{children:[(0,r.jsx)(e.code,{children:\"main.js\"}),\" (\\u4E3B\\u811A\\u672C)\"]})}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`if ('serviceWorker' in navigator) {\n  navigator.serviceWorker\n    .register('/service-worker.js')\n    .then(function (registration) {\n      console.log('Service Worker registered:', registration);\n    })\n    .catch(function (err) {\n      console.log('Service Worker registration failed:', err);\n    });\n}\n`})}),`\n`,(0,r.jsx)(e.p,{children:(0,r.jsxs)(e.strong,{children:[(0,r.jsx)(e.code,{children:\"service-worker.js\"}),\" (service worker \\u811A\\u672C)\"]})}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`self.addEventListener('fetch', function (event) {\n  event.respondWith(\n    caches.match(event.request).then(function (response) {\n      // return cached response if available\n      if (response) {\n        return response;\n      }\n\n      // Otherwise, fetch from network\n      return fetch(event.request);\n    }),\n  );\n});\n`})}),`\n`,(0,r.jsx)(e.p,{children:\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF1A\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[\"\\u4E3B\\u811A\\u672C\\u5728 \",(0,r.jsx)(e.code,{children:\"/service-worker.js\"}),\" \\u6CE8\\u518C\\u4E00\\u4E2A service worker\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"service worker \\u76D1\\u542C \",(0,r.jsx)(e.code,{children:\"fetch()\"}),\" \\u4E8B\\u4EF6\\uFF0C\\u8BE5\\u4E8B\\u4EF6\\u5728\\u6D4F\\u89C8\\u5668\\u53D1\\u51FA\\u7F51\\u7EDC\\u8BF7\\u6C42\\u65F6\\u89E6\\u53D1\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"service worker \\u9996\\u5148\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"caches.match(event.request)\"}),\" \\u68C0\\u67E5\\u8BF7\\u6C42\\u7684\\u8D44\\u6E90\\u662F\\u5426\\u5DF2\\u7F13\\u5B58\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"\\u5982\\u679C\\u5DF2\\u7F13\\u5B58\\uFF0C\\u5219\\u8FD4\\u56DE\\u7F13\\u5B58\\u7684\\u54CD\\u5E94\\u3002 \\u5426\\u5219\\uFF0C\\u5B83\\u4F7F\\u7528 \",(0,r.jsx)(e.code,{children:\"fetch(event.request)\"}),\" \\u4ECE\\u7F51\\u7EDC\\u83B7\\u53D6\\u8D44\\u6E90\"]}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u5956\\u52B1\\uFF1A\\u5171\\u4EAB worker\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u8303\\u56F4\"}),\"\\uFF1A\\u53EF\\u4EE5\\u4ECE\\u4E0D\\u540C\\u7A97\\u53E3/\\u6807\\u7B7E\\u9875/iframe \\u4E2D\\u7684\\u591A\\u4E2A\\u811A\\u672C\\u8BBF\\u95EE\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u6570\\u636E\\u5171\\u4EAB\"}),\"\\uFF1A\\u5141\\u8BB8\\u901A\\u8FC7\\u6D88\\u606F\\u4F20\\u9012\\u63A5\\u53E3\\u5728\\u6D4F\\u89C8\\u5668\\u4E0A\\u4E0B\\u6587\\u4E4B\\u95F4\\u5171\\u4EAB\\u6570\\u636E\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u6D4F\\u89C8\\u5668\\u652F\\u6301\"}),\"\\uFF1A\\u652F\\u6301\\u6709\\u9650\\uFF0C\\u5C24\\u5176\",(0,r.jsx)(e.a,{href:\"https://issues.chromium.org/issues/40290702\",children:\"\\u5728 Android \\u6D4F\\u89C8\\u5668\\u4E0A\\u4E0D\\u53EF\\u7528\"})]}),`\n`]}),`\n`,(0,r.jsx)(e.h4,{children:\"\\u5171\\u4EAB worker \\u7684\\u7528\\u4F8B\\uFF1A\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"\\u8DE8\\u591A\\u4E2A\\u7A97\\u53E3\\u5171\\u4EAB\\u72B6\\u6001\\u3002\"}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u5956\\u52B1\\uFF1AWorklets\"}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"Worklet\"}),\" \\u63A5\\u53E3\\u662F Web Workers \\u7684\\u8F7B\\u91CF\\u7EA7\\u7248\\u672C\\uFF0C\\u5B83\\u4F7F\\u5F00\\u53D1\\u4EBA\\u5458\\u53EF\\u4EE5\\u8BBF\\u95EE\\u6E32\\u67D3\\u7BA1\\u9053\\u7684\\u4F4E\\u7EA7\\u90E8\\u5206\\u3002 \\u4F7F\\u7528 Worklets\\uFF0C\\u60A8\\u53EF\\u4EE5\\u8FD0\\u884C JavaScript \\u548C WebAssembly \\u4EE3\\u7801\\u6765\\u6267\\u884C\\u56FE\\u5F62\\u6E32\\u67D3\\u6216\\u97F3\\u9891\\u5904\\u7406\\uFF0C\\u5176\\u4E2D\\u9700\\u8981\\u9AD8\\u6027\\u80FD\\u3002\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u60A8\\u4E0D\\u9700\\u8981\\u4E86\\u89E3 worklets\\uFF0C\\u56E0\\u6B64\\u4E0D\\u4F1A\\u8BE6\\u7EC6\\u4ECB\\u7ECD\\u3002 \\u5728 \",(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Worklet\",children:\"MDN \\u4E0A\\u9605\\u8BFB\\u6709\\u5173 worklets \\u7684\\u66F4\\u591A\\u4FE1\\u606F\"}),\"\\u3002\"]}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u8003\\u8651\\u4E8B\\u9879\\u548C\\u9650\\u5236\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u540C\\u6E90\\u7B56\\u7565\"}),\"\\uFF1AWorkers \\u5FC5\\u987B\\u9075\\u5B88\\u540C\\u6E90\\u7B56\\u7565\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u521B\\u5EFA worker \\u7684\\u811A\\u672C\\u548C worker \\u811A\\u672C\\u672C\\u8EAB\\u5FC5\\u987B\\u6765\\u81EA\\u540C\\u4E00\\u6E90\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u65E0 DOM \\u8BBF\\u95EE\"}),\"\\uFF1AWorkers \\u65E0\\u6CD5\\u76F4\\u63A5\\u8BBF\\u95EE DOM\\u3002 \\u5B83\\u4EEC\\u53EF\\u4EE5\\u901A\\u8FC7\\u6D88\\u606F\\u4E0E\\u4E3B\\u7EBF\\u7A0B\\u901A\\u4FE1\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u6027\\u80FD\"}),\"\\uFF1A\\u521B\\u5EFA\\u548C\\u7BA1\\u7406 workers \\u4F1A\\u4EA7\\u751F\\u5F00\\u9500\\u3002 \\u5B83\\u4EEC\\u5E94\\u8BE5\\u8C28\\u614E\\u7528\\u4E8E\\u771F\\u6B63\\u53D7\\u76CA\\u4E8E\\u5E76\\u884C\\u6267\\u884C\\u7684\\u4EFB\\u52A1\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u9519\\u8BEF\\u5904\\u7406\"}),\"\\uFF1A\\u5E94\\u5EFA\\u7ACB\\u9002\\u5F53\\u7684\\u9519\\u8BEF\\u5904\\u7406\\u673A\\u5236\\u6765\\u5904\\u7406 worker \\u811A\\u672C\\u4E2D\\u7684\\u4EFB\\u4F55\\u95EE\\u9898\"]}),`\n`]}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Worker\",children:\"Worker - MDN\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers\",children:\"Using Web Workers - MDN\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API\",children:\"Service Worker API - MDN\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://javascript.plainenglish.io/understanding-web-workers-in-js-with-real-world-example-1629a283aeec?gi=89cf0dd4c3f4\",children:\"Understanding web workers in JavaScript with real world example\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://dev.to/bharat5604/web-worker-service-worker-and-worklets-a-comprehensive-guide-1f64\",children:\"Web worker, Service worker, and Worklets: A comprehensive guide\"})}),`\n`]})]})}function a(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(t,{...n})}):t(n)}return f(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-do-you-think-of-amd-vs-commonjs/en-US.json b/apps/web/src/__generated__/questions/quiz/what-do-you-think-of-amd-vs-commonjs/en-US.json
index 8a4568d6e..63961f575 100644
--- a/apps/web/src/__generated__/questions/quiz/what-do-you-think-of-amd-vs-commonjs/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-do-you-think-of-amd-vs-commonjs/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-do-you-think-of-amd-vs-commonjs/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),y=(r,e)=>{for(var i in e)d(r,i,{get:e[i],enumerable:!0})},s=(r,e,i,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!g.call(r,o)&&o!==i&&d(r,o,{get:()=>e[o],enumerable:!(l=m(e,o))||l.enumerable});return r};var S=(r,e,i)=>(i=r!=null?a(p(r)):{},s(e||!r||!r.__esModule?d(i,\"default\",{value:r,enumerable:!0}):i,r)),M=r=>s(d({},\"__esModule\",{value:!0}),r);var t=f((w,c)=>{c.exports=_jsx_runtime});var v={};y(v,{default:()=>j,frontmatter:()=>x});var n=S(t()),x={title:\"What do you think of CommonJS vs ESM?\"};function h(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",pre:\"pre\",strong:\"strong\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript has evolved its module systems. ESM (ECMAScript Modules) using \",(0,n.jsx)(e.code,{children:\"import\"}),\" / \",(0,n.jsx)(e.code,{children:\"export\"}),\" is the official standard, natively supported in modern browsers and Node.js, designed for both synchronous and asynchronous use cases. CommonJS (CJS) using \",(0,n.jsx)(e.code,{children:\"require\"}),\" / \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\" was the original standard for Node.js, primarily synchronous, and remains prevalent in the Node ecosystem. AMD (Asynchronous Module Definition) using \",(0,n.jsx)(e.code,{children:\"define\"}),\" / \",(0,n.jsx)(e.code,{children:\"require\"}),\" was an early system designed for asynchronous loading in browsers but is now largely obsolete, replaced by ESM.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h3,{children:\"Overview\"}),`\n`,(0,n.jsx)(e.p,{children:\"Module systems help manage this complexity by allowing code to be split into reusable pieces (modules) with clear dependencies. Over time, different module systems emerged before an official standard was adopted.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"CommonJS\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Characteristics\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Designed for synchronous loading of modules\"}),`\n`,(0,n.jsx)(e.li,{children:\"Primarily used in server-side environments like Node.js\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Uses \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\" and \",(0,n.jsx)(e.code,{children:\"require\"}),\" for defining and loading modules\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Defining a module in CommonJS\nconst dep1 = require('dependency1');\nconst dep2 = require('dependency2');\n\nmodule.exports = {\n  // Module code here\n};\n\n// Loading a module in CommonJS\nconst mod1 = require('module1');\nconst mod2 = require('module2');\n\n// Code that uses mod1 and mod2\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"ESM (ECMAScript Modules)\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Characteristics\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Official JavaScript standard module system\"}),`\n`,(0,n.jsx)(e.li,{children:\"Supported natively in modern browsers and Node.js\"}),`\n`,(0,n.jsx)(e.li,{children:\"Designed for both asynchronous and synchronous scenarios\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Uses \",(0,n.jsx)(e.code,{children:\"export\"}),\" and \",(0,n.jsx)(e.code,{children:\"import\"}),\" for defining and loading modules\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import dep1 from 'dependency1'; // if dependency1 had a default export\nimport { dep2 } from 'dependency2'; // named import to import something specific from dependency2\n\n// Module code using dep1, dep2...\n\nexport function someFunction() {\n  // ... function logic ...\n}\nexport const someValue = 'hello';\n\n// Or export multiple things at once\n// export { someFunction, someValue };\n\n// Or export a default value\n// export default class MyClass {\n// ...\n// }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Key differences\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Loading mechanism\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"CommonJS\"}),\": Synchronous (blocks until loaded).\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"ESM\"}),\": Asynchronous-friendly (non-blocking in browsers).\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Environment suitability\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"CommonJS\"}),\": Node.js legacy standard.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"ESM\"}),\": Official standard (Browser & Node.js).\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Syntax\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"CommonJS\"}),\": \",(0,n.jsx)(e.code,{children:\"require()\"}),\" / \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"ESM\"}),\": \",(0,n.jsx)(e.code,{children:\"import\"}),\" / \",(0,n.jsx)(e.code,{children:\"export\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Analysis\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"CommonJS\"}),\": Dynamic (runtime analysis).\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"ESM\"}),\": Static (compile-time analysis, enables tree-shaking).\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,n.jsx)(e.h4,{children:\"CommonJS\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Older Node.js projects or where sync loading is needed.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Default in Node.js unless configured for ESM.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"ESM\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Modern web development (native browser support).\"}),`\n`,(0,n.jsx)(e.li,{children:\"New Node.js projects, especially those needing async features or optimizations.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Code intended for both browser and server.\"}),`\n`]}),`\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/Web/JavaScript/Guide/Modules\",children:\"MDN Web Docs on JavaScript modules\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nodejs.org/api/modules.html\",children:\"Node.js: CommonJS modules\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nodejs.org/api/esm.html\",children:\"Node.js: ESM\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://requirejs.org/docs/api.html\",children:\"RequireJS (AMD Loader - Historical)\"})}),`\n`]})]})}function b(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(h,r)})):h(r)}var j=b;return M(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),S=(r,e)=>{for(var i in e)d(r,i,{get:e[i],enumerable:!0})},s=(r,e,i,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!g.call(r,o)&&o!==i&&d(r,o,{get:()=>e[o],enumerable:!(l=u(e,o))||l.enumerable});return r};var M=(r,e,i)=>(i=r!=null?m(f(r)):{},s(e||!r||!r.__esModule?d(i,\"default\",{value:r,enumerable:!0}):i,r)),x=r=>s(d({},\"__esModule\",{value:!0}),r);var t=y((C,c)=>{c.exports=_jsx_runtime});var j={};S(j,{default:()=>a,frontmatter:()=>b});var n=M(t()),b={title:\"What do you think of CommonJS vs ESM?\"};function h(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript has evolved its module systems. ESM (ECMAScript Modules) using \",(0,n.jsx)(e.code,{children:\"import\"}),\" / \",(0,n.jsx)(e.code,{children:\"export\"}),\" is the official standard, natively supported in modern browsers and Node.js, designed for both synchronous and asynchronous use cases. CommonJS (CJS) using \",(0,n.jsx)(e.code,{children:\"require\"}),\" / \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\" was the original standard for Node.js, primarily synchronous, and remains prevalent in the Node ecosystem. AMD (Asynchronous Module Definition) using \",(0,n.jsx)(e.code,{children:\"define\"}),\" / \",(0,n.jsx)(e.code,{children:\"require\"}),\" was an early system designed for asynchronous loading in browsers but is now largely obsolete, replaced by ESM.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h3,{children:\"Overview\"}),`\n`,(0,n.jsx)(e.p,{children:\"Module systems help manage this complexity by allowing code to be split into reusable pieces (modules) with clear dependencies. Over time, different module systems emerged before an official standard was adopted.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"CommonJS\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Characteristics\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Designed for synchronous loading of modules\"}),`\n`,(0,n.jsx)(e.li,{children:\"Primarily used in server-side environments like Node.js\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Uses \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\" and \",(0,n.jsx)(e.code,{children:\"require\"}),\" for defining and loading modules\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Defining a module in CommonJS\nconst dep1 = require('dependency1');\nconst dep2 = require('dependency2');\n\nmodule.exports = {\n  // Module code here\n};\n\n// Loading a module in CommonJS\nconst mod1 = require('module1');\nconst mod2 = require('module2');\n\n// Code that uses mod1 and mod2\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"ESM (ECMAScript Modules)\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Characteristics\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Official JavaScript standard module system\"}),`\n`,(0,n.jsx)(e.li,{children:\"Supported natively in modern browsers and Node.js\"}),`\n`,(0,n.jsx)(e.li,{children:\"Designed for both asynchronous and synchronous scenarios\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Uses \",(0,n.jsx)(e.code,{children:\"export\"}),\" and \",(0,n.jsx)(e.code,{children:\"import\"}),\" for defining and loading modules\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import dep1 from 'dependency1'; // if dependency1 had a default export\nimport { dep2 } from 'dependency2'; // named import to import something specific from dependency2\n\n// Module code using dep1, dep2...\n\nexport function someFunction() {\n  // ... function logic ...\n}\nexport const someValue = 'hello';\n\n// Or export multiple things at once\n// export { someFunction, someValue };\n\n// Or export a default value\n// export default class MyClass {\n// ...\n// }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Key differences\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Loading mechanism\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"CommonJS\"}),\": Synchronous (blocks until loaded).\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"ESM\"}),\": Asynchronous-friendly (non-blocking in browsers).\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Environment suitability\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"CommonJS\"}),\": Node.js legacy standard.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"ESM\"}),\": Official standard (Browser & Node.js).\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Syntax\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"CommonJS\"}),\": \",(0,n.jsx)(e.code,{children:\"require()\"}),\" / \",(0,n.jsx)(e.code,{children:\"module.exports\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"ESM\"}),\": \",(0,n.jsx)(e.code,{children:\"import\"}),\" / \",(0,n.jsx)(e.code,{children:\"export\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Analysis\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"CommonJS\"}),\": Dynamic (runtime analysis).\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"ESM\"}),\": Static (compile-time analysis, enables tree-shaking).\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,n.jsx)(e.h4,{children:\"CommonJS\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Older Node.js projects or where sync loading is needed.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Default in Node.js unless configured for ESM.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"ESM\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Modern web development (native browser support).\"}),`\n`,(0,n.jsx)(e.li,{children:\"New Node.js projects, especially those needing async features or optimizations.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Code intended for both browser and server.\"}),`\n`]}),`\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/Web/JavaScript/Guide/Modules\",children:\"MDN Web Docs on JavaScript modules\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nodejs.org/api/modules.html\",children:\"Node.js: CommonJS modules\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nodejs.org/api/esm.html\",children:\"Node.js: ESM\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://requirejs.org/docs/api.html\",children:\"RequireJS (AMD Loader - Historical)\"})}),`\n`]})]})}function a(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return x(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-do-you-think-of-amd-vs-commonjs/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-do-you-think-of-amd-vs-commonjs/pt-BR.json
index 6c83a4dfb..17ccece60 100644
--- a/apps/web/src/__generated__/questions/quiz/what-do-you-think-of-amd-vs-commonjs/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-do-you-think-of-amd-vs-commonjs/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-do-you-think-of-amd-vs-commonjs/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),S=(e,o)=>{for(var n in o)t(e,n,{get:o[n],enumerable:!0})},d=(e,o,n,r)=>{if(o&&typeof o==\"object\"||typeof o==\"function\")for(let s of l(o))!g.call(e,s)&&s!==n&&t(e,s,{get:()=>o[s],enumerable:!(r=p(o,s))||r.enumerable});return e};var f=(e,o,n)=>(n=e!=null?u(v(e)):{},d(o||!e||!e.__esModule?t(n,\"default\",{value:e,enumerable:!0}):n,e)),q=e=>d(t({},\"__esModule\",{value:!0}),e);var i=x((J,m)=>{m.exports=_jsx_runtime});var A={};S(A,{default:()=>j,frontmatter:()=>M});var a=f(i()),M={title:\"O que voc\\xEA acha de AMD versus CommonJS?\"};function c(e){let o=Object.assign({p:\"p\"},e.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(o.p,{children:\"Ambas s\\xE3o formas de implementar um sistema de m\\xF3dulos, que n\\xE3o estava nativamente presente em JavaScript at\\xE9 o surgimento da ES2015. CommonJS \\xE9 s\\xEDncrono enquanto AMD (Defini\\xE7\\xE3o de M\\xF3dulo Ass\\xEDncrona) \\xE9 obviamente ass\\xEDncrona. O CommonJS foi projetado com o desenvolvimento do lado do servidor em mente, enquanto o AMD, com seu suporte para carregamento ass\\xEDncrono de m\\xF3dulos, \\xE9 mais destinado a navegadores.\"}),`\n`,(0,a.jsx)(o.p,{children:\"A sintaxe do AMD pode ser bastante verbosa, enquanto o CommonJS \\xE9 mais pr\\xF3ximo do estilo que voc\\xEA usaria em outras linguagens para escrever declara\\xE7\\xF5es de importa\\xE7\\xE3o (import statements). Na maioria das vezes, o AMD \\xE9 desnecess\\xE1rio, porque se voc\\xEA servir todo o seu JavaScript em um \\xFAnico arquivo de pacote concatenado, n\\xE3o se beneficiar\\xE1 das propriedades de carregamento ass\\xEDncrono. Al\\xE9m disso, a sintaxe do CommonJS \\xE9 mais pr\\xF3xima do estilo de escrita/importa\\xE7\\xE3o de m\\xF3dulos do Node.js e h\\xE1 menos sobrecarga de troca de contexto ao alternar entre o desenvolvimento JavaScript do lado do cliente e do servidor.\"}),`\n`,(0,a.jsx)(o.p,{children:\"O padr\\xE3o futuro, ES modules (ESM), tem suporte tanto para carregamento s\\xEDncrono quanto ass\\xEDncrono e \\xE9 suportado tanto por navegadores quanto por runtimes do lado do servidor. Finalmente, podemos apenas aderir a uma abordagem (exceto em aplicativos legados).\"})]})}function b(e={}){let{wrapper:o}=e.components||{};return o?(0,a.jsx)(o,Object.assign({},e,{children:(0,a.jsx)(c,e)})):c(e)}var j=b;return q(A);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var S=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),f=(o,e)=>{for(var n in e)s(o,n,{get:e[n],enumerable:!0})},d=(o,e,n,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of v(e))!g.call(o,r)&&r!==n&&s(o,r,{get:()=>e[r],enumerable:!(t=l(e,r))||t.enumerable});return o};var q=(o,e,n)=>(n=o!=null?p(x(o)):{},d(e||!o||!o.__esModule?s(n,\"default\",{value:o,enumerable:!0}):n,o)),M=o=>d(s({},\"__esModule\",{value:!0}),o);var i=S((b,m)=>{m.exports=_jsx_runtime});var D={};f(D,{default:()=>u,frontmatter:()=>A});var a=q(i()),A={title:\"O que voc\\xEA acha de AMD versus CommonJS?\"};function c(o){let e={p:\"p\",...o.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.p,{children:\"Ambas s\\xE3o formas de implementar um sistema de m\\xF3dulos, que n\\xE3o estava nativamente presente em JavaScript at\\xE9 o surgimento da ES2015. CommonJS \\xE9 s\\xEDncrono enquanto AMD (Defini\\xE7\\xE3o de M\\xF3dulo Ass\\xEDncrona) \\xE9 obviamente ass\\xEDncrona. O CommonJS foi projetado com o desenvolvimento do lado do servidor em mente, enquanto o AMD, com seu suporte para carregamento ass\\xEDncrono de m\\xF3dulos, \\xE9 mais destinado a navegadores.\"}),`\n`,(0,a.jsx)(e.p,{children:\"A sintaxe do AMD pode ser bastante verbosa, enquanto o CommonJS \\xE9 mais pr\\xF3ximo do estilo que voc\\xEA usaria em outras linguagens para escrever declara\\xE7\\xF5es de importa\\xE7\\xE3o (import statements). Na maioria das vezes, o AMD \\xE9 desnecess\\xE1rio, porque se voc\\xEA servir todo o seu JavaScript em um \\xFAnico arquivo de pacote concatenado, n\\xE3o se beneficiar\\xE1 das propriedades de carregamento ass\\xEDncrono. Al\\xE9m disso, a sintaxe do CommonJS \\xE9 mais pr\\xF3xima do estilo de escrita/importa\\xE7\\xE3o de m\\xF3dulos do Node.js e h\\xE1 menos sobrecarga de troca de contexto ao alternar entre o desenvolvimento JavaScript do lado do cliente e do servidor.\"}),`\n`,(0,a.jsx)(e.p,{children:\"O padr\\xE3o futuro, ES modules (ESM), tem suporte tanto para carregamento s\\xEDncrono quanto ass\\xEDncrono e \\xE9 suportado tanto por navegadores quanto por runtimes do lado do servidor. Finalmente, podemos apenas aderir a uma abordagem (exceto em aplicativos legados).\"})]})}function u(o={}){let{wrapper:e}=o.components||{};return e?(0,a.jsx)(e,{...o,children:(0,a.jsx)(c,{...o})}):c(o)}return M(D);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-do-you-think-of-amd-vs-commonjs/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-do-you-think-of-amd-vs-commonjs/zh-CN.json
index 9657f01eb..6cb66d08f 100644
--- a/apps/web/src/__generated__/questions/quiz/what-do-you-think-of-amd-vs-commonjs/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-do-you-think-of-amd-vs-commonjs/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-do-you-think-of-amd-vs-commonjs/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var g=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),M=(r,n)=>{for(var d in n)l(r,d,{get:n[d],enumerable:!0})},c=(r,n,d,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of a(n))!S.call(r,i)&&i!==d&&l(r,i,{get:()=>n[i],enumerable:!(o=p(n,i))||o.enumerable});return r};var j=(r,n,d)=>(d=r!=null?m(u(r)):{},c(n||!r||!r.__esModule?l(d,\"default\",{value:r,enumerable:!0}):d,r)),x=r=>c(l({},\"__esModule\",{value:!0}),r);var t=g((q,h)=>{h.exports=_jsx_runtime});var N={};M(N,{default:()=>J,frontmatter:()=>f});var e=j(t()),f={title:\"\\u4F60\\u5982\\u4F55\\u770B\\u5F85 CommonJS \\u4E0E ESM\\uFF1F\"};function s(r){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",pre:\"pre\",strong:\"strong\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"JavaScript \\u5DF2\\u7ECF\\u6F14\\u8FDB\\u5176\\u6A21\\u5757\\u7CFB\\u7EDF\\u3002ESM (ECMAScript Modules) \\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"import\"}),\" / \",(0,e.jsx)(n.code,{children:\"export\"}),\" \\u662F\\u5B98\\u65B9\\u6807\\u51C6\\uFF0C\\u5728\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u548C Node.js \\u4E2D\\u539F\\u751F\\u652F\\u6301\\uFF0C\\u4E13\\u4E3A\\u540C\\u6B65\\u548C\\u5F02\\u6B65\\u7528\\u4F8B\\u8BBE\\u8BA1\\u3002CommonJS (CJS) \\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"require\"}),\" / \",(0,e.jsx)(n.code,{children:\"module.exports\"}),\" \\u662F Node.js \\u7684\\u539F\\u59CB\\u6807\\u51C6\\uFF0C\\u4E3B\\u8981\\u7528\\u4E8E\\u540C\\u6B65\\uFF0C\\u5E76\\u4E14\\u4ECD\\u7136\\u5728 Node \\u751F\\u6001\\u7CFB\\u7EDF\\u4E2D\\u5360\\u4E3B\\u5BFC\\u5730\\u4F4D\\u3002AMD (Asynchronous Module Definition) \\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"define\"}),\" / \",(0,e.jsx)(n.code,{children:\"require\"}),\" \\u662F\\u65E9\\u671F\\u4E3A\\u6D4F\\u89C8\\u5668\\u4E2D\\u7684\\u5F02\\u6B65\\u52A0\\u8F7D\\u800C\\u8BBE\\u8BA1\\u7684\\u7CFB\\u7EDF\\uFF0C\\u4F46\\u73B0\\u5728\\u5DF2\\u7ECF\\u57FA\\u672C\\u8FC7\\u65F6\\uFF0C\\u88AB ESM \\u53D6\\u4EE3\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6982\\u8FF0\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u7CFB\\u7EDF\\u901A\\u8FC7\\u5141\\u8BB8\\u4EE3\\u7801\\u88AB\\u62C6\\u5206\\u6210\\u5177\\u6709\\u6E05\\u6670\\u4F9D\\u8D56\\u5173\\u7CFB\\u7684\\u53EF\\u91CD\\u7528\\u90E8\\u5206\\uFF08\\u6A21\\u5757\\uFF09\\u6765\\u5E2E\\u52A9\\u7BA1\\u7406\\u8FD9\\u79CD\\u590D\\u6742\\u6027\\u3002\\u968F\\u7740\\u65F6\\u95F4\\u7684\\u63A8\\u79FB\\uFF0C\\u5728\\u5B98\\u65B9\\u6807\\u51C6\\u88AB\\u91C7\\u7528\\u4E4B\\u524D\\uFF0C\\u51FA\\u73B0\\u4E86\\u4E0D\\u540C\\u7684\\u6A21\\u5757\\u7CFB\\u7EDF\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"CommonJS\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u7279\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u4E13\\u4E3A\\u540C\\u6B65\\u52A0\\u8F7D\\u6A21\\u5757\\u800C\\u8BBE\\u8BA1\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4E3B\\u8981\\u7528\\u4E8E\\u670D\\u52A1\\u5668\\u7AEF\\u73AF\\u5883\\uFF0C\\u5982 Node.js\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"module.exports\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"require\"}),\" \\u6765\\u5B9A\\u4E49\\u548C\\u52A0\\u8F7D\\u6A21\\u5757\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// \\u5728 CommonJS \\u4E2D\\u5B9A\\u4E49\\u4E00\\u4E2A\\u6A21\\u5757\nconst dep1 = require('dependency1');\nconst dep2 = require('dependency2');\n\nmodule.exports = {\n  // \\u6A21\\u5757\\u4EE3\\u7801\\u5728\\u8FD9\\u91CC\n};\n\n// \\u5728 CommonJS \\u4E2D\\u52A0\\u8F7D\\u4E00\\u4E2A\\u6A21\\u5757\nconst mod1 = require('module1');\nconst mod2 = require('module2');\n\n// \\u4F7F\\u7528 mod1 \\u548C mod2 \\u7684\\u4EE3\\u7801\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"ESM (ECMAScript Modules)\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u7279\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5B98\\u65B9 JavaScript \\u6807\\u51C6\\u6A21\\u5757\\u7CFB\\u7EDF\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5728\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u548C Node.js \\u4E2D\\u539F\\u751F\\u652F\\u6301\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4E13\\u4E3A\\u5F02\\u6B65\\u548C\\u540C\\u6B65\\u573A\\u666F\\u8BBE\\u8BA1\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"export\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"import\"}),\" \\u5B9A\\u4E49\\u548C\\u52A0\\u8F7D\\u6A21\\u5757\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import dep1 from 'dependency1'; // if dependency1 had a default export\nimport { dep2 } from 'dependency2'; // named import to import something specific from dependency2\n\n// Module code using dep1, dep2...\n\nexport function someFunction() {\n  // ... function logic ...\n}\nexport const someValue = 'hello';\n\n// Or export multiple things at once\n// export { someFunction, someValue };\n\n// Or export a default value\n// export default class MyClass {\n// ...\n// }\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E3B\\u8981\\u533A\\u522B\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u52A0\\u8F7D\\u673A\\u5236\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"CommonJS\"}),\": \\u540C\\u6B65\\uFF08\\u52A0\\u8F7D\\u5B8C\\u6210\\u524D\\u963B\\u585E\\uFF09\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ESM\"}),\": \\u5F02\\u6B65\\u53CB\\u597D\\uFF08\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u975E\\u963B\\u585E\\uFF09\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u73AF\\u5883\\u9002\\u7528\\u6027\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"CommonJS\"}),\": Node.js \\u9057\\u7559\\u6807\\u51C6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ESM\"}),\": \\u5B98\\u65B9\\u6807\\u51C6\\uFF08\\u6D4F\\u89C8\\u5668\\u548C Node.js\\uFF09\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"CommonJS\"}),\": \",(0,e.jsx)(n.code,{children:\"require()\"}),\" / \",(0,e.jsx)(n.code,{children:\"module.exports\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ESM\"}),\": \",(0,e.jsx)(n.code,{children:\"import\"}),\" / \",(0,e.jsx)(n.code,{children:\"export\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5206\\u6790\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"CommonJS\"}),\": \\u52A8\\u6001\\uFF08\\u8FD0\\u884C\\u65F6\\u5206\\u6790\\uFF09\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ESM\"}),\": \\u9759\\u6001\\uFF08\\u7F16\\u8BD1\\u65F6\\u5206\\u6790\\uFF0C\\u542F\\u7528 tree-shaking\\uFF09\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsx)(n.h4,{children:\"CommonJS\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u65E7\\u7684 Node.js \\u9879\\u76EE\\u6216\\u9700\\u8981\\u540C\\u6B65\\u52A0\\u8F7D\\u7684\\u5730\\u65B9\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"Node.js \\u4E2D\\u7684\\u9ED8\\u8BA4\\u8BBE\\u7F6E\\uFF0C\\u9664\\u975E\\u914D\\u7F6E\\u4E3A ESM\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"ESM\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u73B0\\u4EE3 Web \\u5F00\\u53D1\\uFF08\\u539F\\u751F\\u6D4F\\u89C8\\u5668\\u652F\\u6301\\uFF09\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u65B0\\u7684 Node.js \\u9879\\u76EE\\uFF0C\\u7279\\u522B\\u662F\\u90A3\\u4E9B\\u9700\\u8981\\u5F02\\u6B65\\u7279\\u6027\\u6216\\u4F18\\u5316\\u7684\\u9879\\u76EE\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u65E2\\u7528\\u4E8E\\u6D4F\\u89C8\\u5668\\u53C8\\u7528\\u4E8E\\u670D\\u52A1\\u5668\\u7684\\u4EE3\\u7801\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules\",children:\"MDN Web Docs on JavaScript modules\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://nodejs.org/api/modules.html\",children:\"Node.js: CommonJS modules\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://nodejs.org/api/esm.html\",children:\"Node.js: ESM\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://requirejs.org/docs/api.html\",children:\"RequireJS (AMD Loader - Historical)\"})}),`\n`]})]})}function C(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(s,r)})):s(r)}var J=C;return x(N);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var M=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),x=(r,n)=>{for(var d in n)l(r,d,{get:n[d],enumerable:!0})},c=(r,n,d,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of a(n))!g.call(r,i)&&i!==d&&l(r,i,{get:()=>n[i],enumerable:!(o=u(n,i))||o.enumerable});return r};var f=(r,n,d)=>(d=r!=null?p(S(r)):{},c(n||!r||!r.__esModule?l(d,\"default\",{value:r,enumerable:!0}):d,r)),j=r=>c(l({},\"__esModule\",{value:!0}),r);var t=M((E,h)=>{h.exports=_jsx_runtime});var J={};x(J,{default:()=>m,frontmatter:()=>C});var e=f(t()),C={title:\"\\u4F60\\u5982\\u4F55\\u770B\\u5F85 CommonJS \\u4E0E ESM\\uFF1F\"};function s(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"JavaScript \\u5DF2\\u7ECF\\u6F14\\u8FDB\\u5176\\u6A21\\u5757\\u7CFB\\u7EDF\\u3002ESM (ECMAScript Modules) \\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"import\"}),\" / \",(0,e.jsx)(n.code,{children:\"export\"}),\" \\u662F\\u5B98\\u65B9\\u6807\\u51C6\\uFF0C\\u5728\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u548C Node.js \\u4E2D\\u539F\\u751F\\u652F\\u6301\\uFF0C\\u4E13\\u4E3A\\u540C\\u6B65\\u548C\\u5F02\\u6B65\\u7528\\u4F8B\\u8BBE\\u8BA1\\u3002CommonJS (CJS) \\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"require\"}),\" / \",(0,e.jsx)(n.code,{children:\"module.exports\"}),\" \\u662F Node.js \\u7684\\u539F\\u59CB\\u6807\\u51C6\\uFF0C\\u4E3B\\u8981\\u7528\\u4E8E\\u540C\\u6B65\\uFF0C\\u5E76\\u4E14\\u4ECD\\u7136\\u5728 Node \\u751F\\u6001\\u7CFB\\u7EDF\\u4E2D\\u5360\\u4E3B\\u5BFC\\u5730\\u4F4D\\u3002AMD (Asynchronous Module Definition) \\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"define\"}),\" / \",(0,e.jsx)(n.code,{children:\"require\"}),\" \\u662F\\u65E9\\u671F\\u4E3A\\u6D4F\\u89C8\\u5668\\u4E2D\\u7684\\u5F02\\u6B65\\u52A0\\u8F7D\\u800C\\u8BBE\\u8BA1\\u7684\\u7CFB\\u7EDF\\uFF0C\\u4F46\\u73B0\\u5728\\u5DF2\\u7ECF\\u57FA\\u672C\\u8FC7\\u65F6\\uFF0C\\u88AB ESM \\u53D6\\u4EE3\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6982\\u8FF0\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u7CFB\\u7EDF\\u901A\\u8FC7\\u5141\\u8BB8\\u4EE3\\u7801\\u88AB\\u62C6\\u5206\\u6210\\u5177\\u6709\\u6E05\\u6670\\u4F9D\\u8D56\\u5173\\u7CFB\\u7684\\u53EF\\u91CD\\u7528\\u90E8\\u5206\\uFF08\\u6A21\\u5757\\uFF09\\u6765\\u5E2E\\u52A9\\u7BA1\\u7406\\u8FD9\\u79CD\\u590D\\u6742\\u6027\\u3002\\u968F\\u7740\\u65F6\\u95F4\\u7684\\u63A8\\u79FB\\uFF0C\\u5728\\u5B98\\u65B9\\u6807\\u51C6\\u88AB\\u91C7\\u7528\\u4E4B\\u524D\\uFF0C\\u51FA\\u73B0\\u4E86\\u4E0D\\u540C\\u7684\\u6A21\\u5757\\u7CFB\\u7EDF\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"CommonJS\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u7279\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u4E13\\u4E3A\\u540C\\u6B65\\u52A0\\u8F7D\\u6A21\\u5757\\u800C\\u8BBE\\u8BA1\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4E3B\\u8981\\u7528\\u4E8E\\u670D\\u52A1\\u5668\\u7AEF\\u73AF\\u5883\\uFF0C\\u5982 Node.js\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"module.exports\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"require\"}),\" \\u6765\\u5B9A\\u4E49\\u548C\\u52A0\\u8F7D\\u6A21\\u5757\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// \\u5728 CommonJS \\u4E2D\\u5B9A\\u4E49\\u4E00\\u4E2A\\u6A21\\u5757\nconst dep1 = require('dependency1');\nconst dep2 = require('dependency2');\n\nmodule.exports = {\n  // \\u6A21\\u5757\\u4EE3\\u7801\\u5728\\u8FD9\\u91CC\n};\n\n// \\u5728 CommonJS \\u4E2D\\u52A0\\u8F7D\\u4E00\\u4E2A\\u6A21\\u5757\nconst mod1 = require('module1');\nconst mod2 = require('module2');\n\n// \\u4F7F\\u7528 mod1 \\u548C mod2 \\u7684\\u4EE3\\u7801\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"ESM (ECMAScript Modules)\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u7279\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5B98\\u65B9 JavaScript \\u6807\\u51C6\\u6A21\\u5757\\u7CFB\\u7EDF\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5728\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u548C Node.js \\u4E2D\\u539F\\u751F\\u652F\\u6301\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4E13\\u4E3A\\u5F02\\u6B65\\u548C\\u540C\\u6B65\\u573A\\u666F\\u8BBE\\u8BA1\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"export\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"import\"}),\" \\u5B9A\\u4E49\\u548C\\u52A0\\u8F7D\\u6A21\\u5757\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import dep1 from 'dependency1'; // if dependency1 had a default export\nimport { dep2 } from 'dependency2'; // named import to import something specific from dependency2\n\n// Module code using dep1, dep2...\n\nexport function someFunction() {\n  // ... function logic ...\n}\nexport const someValue = 'hello';\n\n// Or export multiple things at once\n// export { someFunction, someValue };\n\n// Or export a default value\n// export default class MyClass {\n// ...\n// }\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E3B\\u8981\\u533A\\u522B\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u52A0\\u8F7D\\u673A\\u5236\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"CommonJS\"}),\": \\u540C\\u6B65\\uFF08\\u52A0\\u8F7D\\u5B8C\\u6210\\u524D\\u963B\\u585E\\uFF09\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ESM\"}),\": \\u5F02\\u6B65\\u53CB\\u597D\\uFF08\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u975E\\u963B\\u585E\\uFF09\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u73AF\\u5883\\u9002\\u7528\\u6027\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"CommonJS\"}),\": Node.js \\u9057\\u7559\\u6807\\u51C6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ESM\"}),\": \\u5B98\\u65B9\\u6807\\u51C6\\uFF08\\u6D4F\\u89C8\\u5668\\u548C Node.js\\uFF09\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"CommonJS\"}),\": \",(0,e.jsx)(n.code,{children:\"require()\"}),\" / \",(0,e.jsx)(n.code,{children:\"module.exports\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ESM\"}),\": \",(0,e.jsx)(n.code,{children:\"import\"}),\" / \",(0,e.jsx)(n.code,{children:\"export\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5206\\u6790\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"CommonJS\"}),\": \\u52A8\\u6001\\uFF08\\u8FD0\\u884C\\u65F6\\u5206\\u6790\\uFF09\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ESM\"}),\": \\u9759\\u6001\\uFF08\\u7F16\\u8BD1\\u65F6\\u5206\\u6790\\uFF0C\\u542F\\u7528 tree-shaking\\uFF09\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsx)(n.h4,{children:\"CommonJS\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u65E7\\u7684 Node.js \\u9879\\u76EE\\u6216\\u9700\\u8981\\u540C\\u6B65\\u52A0\\u8F7D\\u7684\\u5730\\u65B9\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"Node.js \\u4E2D\\u7684\\u9ED8\\u8BA4\\u8BBE\\u7F6E\\uFF0C\\u9664\\u975E\\u914D\\u7F6E\\u4E3A ESM\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"ESM\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u73B0\\u4EE3 Web \\u5F00\\u53D1\\uFF08\\u539F\\u751F\\u6D4F\\u89C8\\u5668\\u652F\\u6301\\uFF09\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u65B0\\u7684 Node.js \\u9879\\u76EE\\uFF0C\\u7279\\u522B\\u662F\\u90A3\\u4E9B\\u9700\\u8981\\u5F02\\u6B65\\u7279\\u6027\\u6216\\u4F18\\u5316\\u7684\\u9879\\u76EE\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u65E2\\u7528\\u4E8E\\u6D4F\\u89C8\\u5668\\u53C8\\u7528\\u4E8E\\u670D\\u52A1\\u5668\\u7684\\u4EE3\\u7801\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules\",children:\"MDN Web Docs on JavaScript modules\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://nodejs.org/api/modules.html\",children:\"Node.js: CommonJS modules\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://nodejs.org/api/esm.html\",children:\"Node.js: ESM\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://requirejs.org/docs/api.html\",children:\"RequireJS (AMD Loader - Historical)\"})}),`\n`]})]})}function m(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(s,{...r})}):s(r)}return j(J);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-does-a-doctype-do/en-US.json b/apps/web/src/__generated__/questions/quiz/what-does-a-doctype-do/en-US.json
index 7e1a67013..29659c546 100644
--- a/apps/web/src/__generated__/questions/quiz/what-does-a-doctype-do/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-does-a-doctype-do/en-US.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-does-a-doctype-do/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var p=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),T=(t,e)=>{for(var r in e)s(t,r,{get:e[r],enumerable:!0})},i=(t,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of g(e))!D.call(t,o)&&o!==r&&s(t,o,{get:()=>e[o],enumerable:!(c=u(e,o))||c.enumerable});return t};var f=(t,e,r)=>(r=t!=null?l(m(t)):{},i(e||!t||!t.__esModule?s(r,\"default\",{value:t,enumerable:!0}):r,t)),O=t=>i(s({},\"__esModule\",{value:!0}),t);var d=p((x,a)=>{a.exports=_jsx_runtime});var Y={};T(Y,{default:()=>P,frontmatter:()=>C});var n=f(d()),C={title:\"What does a `DOCTYPE` do?\"};function h(t){let e=Object.assign({p:\"p\",strong:\"strong\",code:\"code\",em:\"em\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"DOCTYPE\"}),\" is an abbreviation for \",(0,n.jsx)(e.strong,{children:\"Document Type\"}),\". A DOCTYPE is always associated to a \",(0,n.jsx)(e.strong,{children:\"DTD\"}),\" - for \",(0,n.jsx)(e.strong,{children:\"Document Type Definition\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"A DTD defines how documents of a certain type should be structured (i.e. a \",(0,n.jsx)(e.code,{children:\"button\"}),\" can contain a \",(0,n.jsx)(e.code,{children:\"span\"}),\" but not a \",(0,n.jsx)(e.code,{children:\"div\"}),\"), whereas a DOCTYPE declares what DTD a document \",(0,n.jsx)(e.em,{children:\"supposedly\"}),\" respects (i.e. this document respects the HTML DTD).\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"For webpages, the DOCTYPE declaration is required. It is used to tell user agents what version of the HTML specifications your document respects. Once a user agent has recognized a correct DOCTYPE, it will trigger the \",(0,n.jsx)(e.strong,{children:\"no-quirks mode\"}),\" matching this DOCTYPE for reading the document. If a user agent doesn't recognize a correct DOCTYPE, it will trigger the \",(0,n.jsx)(e.strong,{children:\"quirks mode\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The DOCTYPE declaration for the HTML5 standards is \",(0,n.jsx)(e.code,{children:\"<!DOCTYPE html>\"}),\".\"]})]})}function E(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=E;return O(Y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var T=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var r in e)s(t,r,{get:e[r],enumerable:!0})},i=(t,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of D(e))!p.call(t,o)&&o!==r&&s(t,o,{get:()=>e[o],enumerable:!(c=m(e,o))||c.enumerable});return t};var C=(t,e,r)=>(r=t!=null?u(g(t)):{},i(e||!t||!t.__esModule?s(r,\"default\",{value:t,enumerable:!0}):r,t)),O=t=>i(s({},\"__esModule\",{value:!0}),t);var d=T((w,a)=>{a.exports=_jsx_runtime});var P={};f(P,{default:()=>l,frontmatter:()=>E});var n=C(d()),E={title:\"What does a `DOCTYPE` do?\"};function h(t){let e={code:\"code\",em:\"em\",p:\"p\",strong:\"strong\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"DOCTYPE\"}),\" is an abbreviation for \",(0,n.jsx)(e.strong,{children:\"Document Type\"}),\". A DOCTYPE is always associated to a \",(0,n.jsx)(e.strong,{children:\"DTD\"}),\" - for \",(0,n.jsx)(e.strong,{children:\"Document Type Definition\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"A DTD defines how documents of a certain type should be structured (i.e. a \",(0,n.jsx)(e.code,{children:\"button\"}),\" can contain a \",(0,n.jsx)(e.code,{children:\"span\"}),\" but not a \",(0,n.jsx)(e.code,{children:\"div\"}),\"), whereas a DOCTYPE declares what DTD a document \",(0,n.jsx)(e.em,{children:\"supposedly\"}),\" respects (i.e. this document respects the HTML DTD).\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"For webpages, the DOCTYPE declaration is required. It is used to tell user agents what version of the HTML specifications your document respects. Once a user agent has recognized a correct DOCTYPE, it will trigger the \",(0,n.jsx)(e.strong,{children:\"no-quirks mode\"}),\" matching this DOCTYPE for reading the document. If a user agent doesn't recognize a correct DOCTYPE, it will trigger the \",(0,n.jsx)(e.strong,{children:\"quirks mode\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The DOCTYPE declaration for the HTML5 standards is \",(0,n.jsx)(e.code,{children:\"<!DOCTYPE html>\"}),\".\"]})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return O(P);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-does-a-doctype-do/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-does-a-doctype-do/pt-BR.json
index cf2d7119b..b55b24714 100644
--- a/apps/web/src/__generated__/questions/quiz/what-does-a-doctype-do/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-does-a-doctype-do/pt-BR.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-does-a-doctype-do/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var T=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),g=(o,e)=>{for(var r in e)a(o,r,{get:e[r],enumerable:!0})},d=(o,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of l(e))!h.call(o,t)&&t!==r&&a(o,t,{get:()=>e[t],enumerable:!(s=p(e,t))||s.enumerable});return o};var O=(o,e,r)=>(r=o!=null?m(D(o)):{},d(e||!o||!o.__esModule?a(r,\"default\",{value:o,enumerable:!0}):r,o)),C=o=>d(a({},\"__esModule\",{value:!0}),o);var i=T((j,c)=>{c.exports=_jsx_runtime});var Y={};g(Y,{default:()=>E,frontmatter:()=>x});var n=O(i()),x={title:\"O que um `DOCTYPE` faz?\"};function u(o){let e=Object.assign({p:\"p\",strong:\"strong\",code:\"code\",em:\"em\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"DOCTYPE\"}),\" \\xE9 uma abrevia\\xE7\\xE3o para \",(0,n.jsx)(e.strong,{children:\"Tipo de Documento\"}),\". Um DOCTYPE sempre est\\xE1 associado a um \",(0,n.jsx)(e.strong,{children:\"DTD\"}),\" - para \",(0,n.jsx)(e.strong,{children:\"Defini\\xE7\\xE3o de Tipo de Documento\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Um DTD define como documentos de um determinado tipo devem ser estruturados (por exemplo, um \",(0,n.jsx)(e.code,{children:\"button\"}),\" pode conter um \",(0,n.jsx)(e.code,{children:\"span\"}),\" mas n\\xE3o uma \",(0,n.jsx)(e.code,{children:\"div\"}),\"), ao passo que um DOCTYPE declara o que DTD um documento \",(0,n.jsx)(e.em,{children:\"supostamente\"}),\" respeita (ex.: este documento respeita o HTML DTD).\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Para p\\xE1ginas web, a declara\\xE7\\xE3o DOCTYPE \\xE9 necess\\xE1ria. \\xC9 usado para dizer aos agentes do usu\\xE1rio qual vers\\xE3o das especifica\\xE7\\xF5es HTML o seu documento respeita. Uma vez que um agente de usu\\xE1rio tenha reconhecido um DOCTYPE correto, ele acionar\\xE1 o \",(0,n.jsx)(e.strong,{children:\"modo no-quirk\"}),\" correspondente a este DOCTYPE para ler o documento. Se um agente de usu\\xE1rio n\\xE3o reconhecer um DOCTYPE correto, ele ativar\\xE1 o \",(0,n.jsx)(e.strong,{children:\"quirks mode\"}),\" (modo de peculiaridade).\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"A declara\\xE7\\xE3o DOCTYPE para os padr\\xF5es HTML5 \\xE9 \",(0,n.jsx)(e.code,{children:\"<!DOCTYPE html>\"}),\".\"]})]})}function P(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(u,o)})):u(o)}var E=P;return C(Y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),C=(o,e)=>{for(var n in e)a(o,n,{get:e[n],enumerable:!0})},s=(o,e,n,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of D(e))!T.call(o,t)&&t!==n&&a(o,t,{get:()=>e[t],enumerable:!(d=l(e,t))||d.enumerable});return o};var x=(o,e,n)=>(n=o!=null?p(h(o)):{},s(e||!o||!o.__esModule?a(n,\"default\",{value:o,enumerable:!0}):n,o)),O=o=>s(a({},\"__esModule\",{value:!0}),o);var i=g((f,c)=>{c.exports=_jsx_runtime});var E={};C(E,{default:()=>m,frontmatter:()=>P});var r=x(i()),P={title:\"O que um `DOCTYPE` faz?\"};function u(o){let e={code:\"code\",em:\"em\",p:\"p\",strong:\"strong\",...o.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.strong,{children:\"DOCTYPE\"}),\" \\xE9 uma abrevia\\xE7\\xE3o para \",(0,r.jsx)(e.strong,{children:\"Tipo de Documento\"}),\". Um DOCTYPE sempre est\\xE1 associado a um \",(0,r.jsx)(e.strong,{children:\"DTD\"}),\" - para \",(0,r.jsx)(e.strong,{children:\"Defini\\xE7\\xE3o de Tipo de Documento\"}),\".\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"Um DTD define como documentos de um determinado tipo devem ser estruturados (por exemplo, um \",(0,r.jsx)(e.code,{children:\"button\"}),\" pode conter um \",(0,r.jsx)(e.code,{children:\"span\"}),\" mas n\\xE3o uma \",(0,r.jsx)(e.code,{children:\"div\"}),\"), ao passo que um DOCTYPE declara o que DTD um documento \",(0,r.jsx)(e.em,{children:\"supostamente\"}),\" respeita (ex.: este documento respeita o HTML DTD).\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"Para p\\xE1ginas web, a declara\\xE7\\xE3o DOCTYPE \\xE9 necess\\xE1ria. \\xC9 usado para dizer aos agentes do usu\\xE1rio qual vers\\xE3o das especifica\\xE7\\xF5es HTML o seu documento respeita. Uma vez que um agente de usu\\xE1rio tenha reconhecido um DOCTYPE correto, ele acionar\\xE1 o \",(0,r.jsx)(e.strong,{children:\"modo no-quirk\"}),\" correspondente a este DOCTYPE para ler o documento. Se um agente de usu\\xE1rio n\\xE3o reconhecer um DOCTYPE correto, ele ativar\\xE1 o \",(0,r.jsx)(e.strong,{children:\"quirks mode\"}),\" (modo de peculiaridade).\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"A declara\\xE7\\xE3o DOCTYPE para os padr\\xF5es HTML5 \\xE9 \",(0,r.jsx)(e.code,{children:\"<!DOCTYPE html>\"}),\".\"]})]})}function m(o={}){let{wrapper:e}=o.components||{};return e?(0,r.jsx)(e,{...o,children:(0,r.jsx)(u,{...o})}):u(o)}return O(E);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-does-a-doctype-do/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-does-a-doctype-do/zh-CN.json
index 4120629d3..f23b48b29 100644
--- a/apps/web/src/__generated__/questions/quiz/what-does-a-doctype-do/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-does-a-doctype-do/zh-CN.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-does-a-doctype-do/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var a=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var p=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),u=(e,n)=>{for(var r in n)c(e,r,{get:n[r],enumerable:!0})},s=(e,n,r,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of m(n))!g.call(e,o)&&o!==r&&c(e,o,{get:()=>n[o],enumerable:!(i=T(n,o))||i.enumerable});return e};var C=(e,n,r)=>(r=e!=null?h(a(e)):{},s(n||!e||!e.__esModule?c(r,\"default\",{value:e,enumerable:!0}):r,e)),O=e=>s(c({},\"__esModule\",{value:!0}),e);var D=p((_,d)=>{d.exports=_jsx_runtime});var Y={};u(Y,{default:()=>P,frontmatter:()=>x});var t=C(D()),x={title:\"``DOCTYPE`` \\u662F\\u505A\\u4EC0\\u4E48\\u7684\\uFF1F\"};function l(e){let n=Object.assign({p:\"p\",strong:\"strong\",code:\"code\",em:\"em\"},e.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:\"DOCTYPE\"}),\" \\u662F \",(0,t.jsx)(n.strong,{children:\"Document Type\\uFF08\\u6587\\u6863\\u7C7B\\u578B\\uFF09\"}),\" \\u7684\\u7F29\\u5199\\u3002DOCTYPE \\u603B\\u662F\\u4E0E \",(0,t.jsx)(n.strong,{children:\"DTD\"}),\" - \",(0,t.jsx)(n.strong,{children:\"Document Type Definition\\uFF08\\u6587\\u6863\\u7C7B\\u578B\\u5B9A\\u4E49\\uFF09\"}),\" \\u76F8\\u5173\\u8054\\u3002\"]}),`\n`,(0,t.jsxs)(n.p,{children:[\"DTD \\u5B9A\\u4E49\\u4E86\\u7279\\u5B9A\\u7C7B\\u578B\\u7684\\u6587\\u6863\\u5E94\\u8BE5\\u5982\\u4F55\\u6784\\u5EFA\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,t.jsx)(n.code,{children:\"button\"}),\" \\u53EF\\u4EE5\\u5305\\u542B \",(0,t.jsx)(n.code,{children:\"span\"}),\"\\uFF0C\\u4F46\\u4E0D\\u80FD\\u5305\\u542B \",(0,t.jsx)(n.code,{children:\"div\"}),\"\\uFF09\\uFF0C\\u800C DOCTYPE \\u58F0\\u660E\\u4E86\\u6587\\u6863\",(0,t.jsx)(n.em,{children:\"\\u5E94\\u8BE5\"}),\"\\u9075\\u5B88\\u7684 DTD\\uFF08\\u4F8B\\u5982\\uFF0C\\u6B64\\u6587\\u6863\\u9075\\u5B88 HTML DTD\\uFF09\\u3002\"]}),`\n`,(0,t.jsxs)(n.p,{children:[\"\\u5BF9\\u4E8E\\u7F51\\u9875\\uFF0CDOCTYPE \\u58F0\\u660E\\u662F\\u5FC5\\u9700\\u7684\\u3002\\u5B83\\u7528\\u4E8E\\u544A\\u8BC9\\u7528\\u6237\\u4EE3\\u7406\\u60A8\\u7684\\u6587\\u6863\\u9075\\u5B88 HTML \\u89C4\\u8303\\u7684\\u54EA\\u4E2A\\u7248\\u672C\\u3002\\u4E00\\u65E6\\u7528\\u6237\\u4EE3\\u7406\\u8BC6\\u522B\\u51FA\\u6B63\\u786E\\u7684 DOCTYPE\\uFF0C\\u5B83\\u5C06\\u89E6\\u53D1 \",(0,t.jsx)(n.strong,{children:\"no-quirks mode\\uFF08\\u975E\\u602A\\u5F02\\u6A21\\u5F0F\\uFF09\"}),\" \\u6765\\u8BFB\\u53D6\\u6587\\u6863\\u3002\\u5982\\u679C\\u7528\\u6237\\u4EE3\\u7406\\u65E0\\u6CD5\\u8BC6\\u522B\\u6B63\\u786E\\u7684 DOCTYPE\\uFF0C\\u5B83\\u5C06\\u89E6\\u53D1 \",(0,t.jsx)(n.strong,{children:\"quirks mode\\uFF08\\u602A\\u5F02\\u6A21\\u5F0F\\uFF09\"}),\"\\u3002\"]}),`\n`,(0,t.jsxs)(n.p,{children:[\"HTML5 \\u6807\\u51C6\\u7684 DOCTYPE \\u58F0\\u660E\\u662F \",(0,t.jsx)(n.code,{children:\"<!DOCTYPE html>\"}),\"\\u3002\"]})]})}function E(e={}){let{wrapper:n}=e.components||{};return n?(0,t.jsx)(n,Object.assign({},e,{children:(0,t.jsx)(l,e)})):l(e)}var P=E;return O(Y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var T=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty;var C=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),g=(e,n)=>{for(var r in n)c(e,r,{get:n[r],enumerable:!0})},i=(e,n,r,d)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of p(n))!a.call(e,o)&&o!==r&&c(e,o,{get:()=>n[o],enumerable:!(d=m(n,o))||d.enumerable});return e};var x=(e,n,r)=>(r=e!=null?T(u(e)):{},i(n||!e||!e.__esModule?c(r,\"default\",{value:e,enumerable:!0}):r,e)),E=e=>i(c({},\"__esModule\",{value:!0}),e);var D=C((_,s)=>{s.exports=_jsx_runtime});var P={};g(P,{default:()=>h,frontmatter:()=>O});var t=x(D()),O={title:\"``DOCTYPE`` \\u662F\\u505A\\u4EC0\\u4E48\\u7684\\uFF1F\"};function l(e){let n={code:\"code\",em:\"em\",p:\"p\",strong:\"strong\",...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:\"DOCTYPE\"}),\" \\u662F \",(0,t.jsx)(n.strong,{children:\"Document Type\\uFF08\\u6587\\u6863\\u7C7B\\u578B\\uFF09\"}),\" \\u7684\\u7F29\\u5199\\u3002DOCTYPE \\u603B\\u662F\\u4E0E \",(0,t.jsx)(n.strong,{children:\"DTD\"}),\" - \",(0,t.jsx)(n.strong,{children:\"Document Type Definition\\uFF08\\u6587\\u6863\\u7C7B\\u578B\\u5B9A\\u4E49\\uFF09\"}),\" \\u76F8\\u5173\\u8054\\u3002\"]}),`\n`,(0,t.jsxs)(n.p,{children:[\"DTD \\u5B9A\\u4E49\\u4E86\\u7279\\u5B9A\\u7C7B\\u578B\\u7684\\u6587\\u6863\\u5E94\\u8BE5\\u5982\\u4F55\\u6784\\u5EFA\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,t.jsx)(n.code,{children:\"button\"}),\" \\u53EF\\u4EE5\\u5305\\u542B \",(0,t.jsx)(n.code,{children:\"span\"}),\"\\uFF0C\\u4F46\\u4E0D\\u80FD\\u5305\\u542B \",(0,t.jsx)(n.code,{children:\"div\"}),\"\\uFF09\\uFF0C\\u800C DOCTYPE \\u58F0\\u660E\\u4E86\\u6587\\u6863\",(0,t.jsx)(n.em,{children:\"\\u5E94\\u8BE5\"}),\"\\u9075\\u5B88\\u7684 DTD\\uFF08\\u4F8B\\u5982\\uFF0C\\u6B64\\u6587\\u6863\\u9075\\u5B88 HTML DTD\\uFF09\\u3002\"]}),`\n`,(0,t.jsxs)(n.p,{children:[\"\\u5BF9\\u4E8E\\u7F51\\u9875\\uFF0CDOCTYPE \\u58F0\\u660E\\u662F\\u5FC5\\u9700\\u7684\\u3002\\u5B83\\u7528\\u4E8E\\u544A\\u8BC9\\u7528\\u6237\\u4EE3\\u7406\\u60A8\\u7684\\u6587\\u6863\\u9075\\u5B88 HTML \\u89C4\\u8303\\u7684\\u54EA\\u4E2A\\u7248\\u672C\\u3002\\u4E00\\u65E6\\u7528\\u6237\\u4EE3\\u7406\\u8BC6\\u522B\\u51FA\\u6B63\\u786E\\u7684 DOCTYPE\\uFF0C\\u5B83\\u5C06\\u89E6\\u53D1 \",(0,t.jsx)(n.strong,{children:\"no-quirks mode\\uFF08\\u975E\\u602A\\u5F02\\u6A21\\u5F0F\\uFF09\"}),\" \\u6765\\u8BFB\\u53D6\\u6587\\u6863\\u3002\\u5982\\u679C\\u7528\\u6237\\u4EE3\\u7406\\u65E0\\u6CD5\\u8BC6\\u522B\\u6B63\\u786E\\u7684 DOCTYPE\\uFF0C\\u5B83\\u5C06\\u89E6\\u53D1 \",(0,t.jsx)(n.strong,{children:\"quirks mode\\uFF08\\u602A\\u5F02\\u6A21\\u5F0F\\uFF09\"}),\"\\u3002\"]}),`\n`,(0,t.jsxs)(n.p,{children:[\"HTML5 \\u6807\\u51C6\\u7684 DOCTYPE \\u58F0\\u660E\\u662F \",(0,t.jsx)(n.code,{children:\"<!DOCTYPE html>\"}),\"\\u3002\"]})]})}function h(e={}){let{wrapper:n}=e.components||{};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(l,{...e})}):l(e)}return E(P);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages/en-US.json b/apps/web/src/__generated__/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages/en-US.json
index fb9f58811..58f948e0a 100644
--- a/apps/web/src/__generated__/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var m=(d,e)=>()=>(e||d((e={exports:{}}).exports,e),e.exports),p=(d,e)=>{for(var t in e)c(d,t,{get:e[t],enumerable:!0})},h=(d,e,t,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of g(e))!x.call(d,i)&&i!==t&&c(d,i,{get:()=>e[i],enumerable:!(r=b(e,i))||r.enumerable});return d};var f=(d,e,t)=>(t=d!=null?s(u(d)):{},h(e||!d||!d.__esModule?c(t,\"default\",{value:d,enumerable:!0}):t,d)),w=d=>h(c({},\"__esModule\",{value:!0}),d);var l=m((k,o)=>{o.exports=_jsx_runtime});var j={};p(j,{default:()=>v,frontmatter:()=>y});var n=f(l()),y={title:\"What does `* { box-sizing: border-box; }` do?\",subtitle:\"What are its advantages?\"};function a(d){let e=Object.assign({p:\"p\",code:\"code\",h2:\"h2\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",ul:\"ul\",li:\"li\",a:\"a\"},d.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"* { box-sizing: border-box; }\"}),\" makes every element on the page use the \",(0,n.jsx)(e.code,{children:\"box-sizing: border-box\"}),\" approach for calculating the elements \",(0,n.jsx)(e.code,{children:\"height\"}),\" and \",(0,n.jsx)(e.code,{children:\"width\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"What's the difference?\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"By default, elements have \",(0,n.jsx)(e.code,{children:\"box-sizing: content-box\"}),\" applied, and only the content size is being accounted for if an element has \",(0,n.jsx)(e.code,{children:\"height\"}),\" and \",(0,n.jsx)(e.code,{children:\"width\"}),\" specified. \",(0,n.jsx)(e.code,{children:\"box-sizing: border-box\"}),\" changes how the \",(0,n.jsx)(e.code,{children:\"width\"}),\" and \",(0,n.jsx)(e.code,{children:\"height\"}),\" of elements are being calculated, \",(0,n.jsx)(e.code,{children:\"border\"}),\" and \",(0,n.jsx)(e.code,{children:\"padding\"}),\" are also being included in the calculation. The \",(0,n.jsx)(e.code,{children:\"height\"}),\" of an element is now calculated by the content's \",(0,n.jsx)(e.code,{children:\"height\"}),\" + vertical \",(0,n.jsx)(e.code,{children:\"padding\"}),\" + vertical \",(0,n.jsx)(e.code,{children:\"border\"}),\" width. The \",(0,n.jsx)(e.code,{children:\"width\"}),\" of an element is now calculated by the content's \",(0,n.jsx)(e.code,{children:\"width\"}),\" + horizontal \",(0,n.jsx)(e.code,{children:\"padding\"}),\" + horizontal \",(0,n.jsx)(e.code,{children:\"border\"}),\" width.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The following table indicates whether the property is included in the element's calculation of height and width when it has the respective \",(0,n.jsx)(e.code,{children:\"box-sizing\"}),\":\"]}),`\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:\"Property\"}),(0,n.jsxs)(e.th,{children:[(0,n.jsx)(e.code,{children:\"box-sizing: content-box\"}),\" (default)\"]}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"box-sizing: border-box\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"content\"}),(0,n.jsx)(e.td,{children:\"Yes\"}),(0,n.jsx)(e.td,{children:\"Yes\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"padding\"})}),(0,n.jsx)(e.td,{children:\"No\"}),(0,n.jsx)(e.td,{children:\"Yes\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"border\"})}),(0,n.jsx)(e.td,{children:\"No\"}),(0,n.jsx)(e.td,{children:\"Yes\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"margin\"})}),(0,n.jsx)(e.td,{children:\"No\"}),(0,n.jsx)(e.td,{children:\"No\"})]})]})]}),`\n`,(0,n.jsx)(e.h2,{children:\"Advantages\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Taking into account \",(0,n.jsx)(e.code,{children:\"padding\"}),\"s and \",(0,n.jsx)(e.code,{children:\"border\"}),\"s as part of the box model resonates better with how designers actually imagine content in grids. This is a much more intuitive way to think about boxes and hence many CSS frameworks set \",(0,n.jsx)(e.code,{children:\"* { box-sizing: border-box; }\"}),\" globally, so that all elements use such a box model by default.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"References\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://css-tricks.com/box-sizing/\",children:\"Box Sizing | CSS-Tricks\"})}),`\n`]})]})}function z(d={}){let{wrapper:e}=d.components||{};return e?(0,n.jsx)(e,Object.assign({},d,{children:(0,n.jsx)(a,d)})):a(d)}var v=z;return w(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var b=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var p=(d,e)=>()=>(e||d((e={exports:{}}).exports,e),e.exports),f=(d,e)=>{for(var t in e)c(d,t,{get:e[t],enumerable:!0})},h=(d,e,t,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!m.call(d,i)&&i!==t&&c(d,i,{get:()=>e[i],enumerable:!(r=g(e,i))||r.enumerable});return d};var w=(d,e,t)=>(t=d!=null?b(x(d)):{},h(e||!d||!d.__esModule?c(t,\"default\",{value:d,enumerable:!0}):t,d)),y=d=>h(c({},\"__esModule\",{value:!0}),d);var l=p((k,o)=>{o.exports=_jsx_runtime});var v={};f(v,{default:()=>s,frontmatter:()=>z});var n=w(l()),z={title:\"What does `* { box-sizing: border-box; }` do?\",subtitle:\"What are its advantages?\"};function a(d){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...d.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"* { box-sizing: border-box; }\"}),\" makes every element on the page use the \",(0,n.jsx)(e.code,{children:\"box-sizing: border-box\"}),\" approach for calculating the elements \",(0,n.jsx)(e.code,{children:\"height\"}),\" and \",(0,n.jsx)(e.code,{children:\"width\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"What's the difference?\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"By default, elements have \",(0,n.jsx)(e.code,{children:\"box-sizing: content-box\"}),\" applied, and only the content size is being accounted for if an element has \",(0,n.jsx)(e.code,{children:\"height\"}),\" and \",(0,n.jsx)(e.code,{children:\"width\"}),\" specified. \",(0,n.jsx)(e.code,{children:\"box-sizing: border-box\"}),\" changes how the \",(0,n.jsx)(e.code,{children:\"width\"}),\" and \",(0,n.jsx)(e.code,{children:\"height\"}),\" of elements are being calculated, \",(0,n.jsx)(e.code,{children:\"border\"}),\" and \",(0,n.jsx)(e.code,{children:\"padding\"}),\" are also being included in the calculation. The \",(0,n.jsx)(e.code,{children:\"height\"}),\" of an element is now calculated by the content's \",(0,n.jsx)(e.code,{children:\"height\"}),\" + vertical \",(0,n.jsx)(e.code,{children:\"padding\"}),\" + vertical \",(0,n.jsx)(e.code,{children:\"border\"}),\" width. The \",(0,n.jsx)(e.code,{children:\"width\"}),\" of an element is now calculated by the content's \",(0,n.jsx)(e.code,{children:\"width\"}),\" + horizontal \",(0,n.jsx)(e.code,{children:\"padding\"}),\" + horizontal \",(0,n.jsx)(e.code,{children:\"border\"}),\" width.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The following table indicates whether the property is included in the element's calculation of height and width when it has the respective \",(0,n.jsx)(e.code,{children:\"box-sizing\"}),\":\"]}),`\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:\"Property\"}),(0,n.jsxs)(e.th,{children:[(0,n.jsx)(e.code,{children:\"box-sizing: content-box\"}),\" (default)\"]}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"box-sizing: border-box\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"content\"}),(0,n.jsx)(e.td,{children:\"Yes\"}),(0,n.jsx)(e.td,{children:\"Yes\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"padding\"})}),(0,n.jsx)(e.td,{children:\"No\"}),(0,n.jsx)(e.td,{children:\"Yes\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"border\"})}),(0,n.jsx)(e.td,{children:\"No\"}),(0,n.jsx)(e.td,{children:\"Yes\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"margin\"})}),(0,n.jsx)(e.td,{children:\"No\"}),(0,n.jsx)(e.td,{children:\"No\"})]})]})]}),`\n`,(0,n.jsx)(e.h2,{children:\"Advantages\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Taking into account \",(0,n.jsx)(e.code,{children:\"padding\"}),\"s and \",(0,n.jsx)(e.code,{children:\"border\"}),\"s as part of the box model resonates better with how designers actually imagine content in grids. This is a much more intuitive way to think about boxes and hence many CSS frameworks set \",(0,n.jsx)(e.code,{children:\"* { box-sizing: border-box; }\"}),\" globally, so that all elements use such a box model by default.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"References\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://css-tricks.com/box-sizing/\",children:\"Box Sizing | CSS-Tricks\"})}),`\n`]})]})}function s(d={}){let{wrapper:e}=d.components||{};return e?(0,n.jsx)(e,{...d,children:(0,n.jsx)(a,{...d})}):a(d)}return y(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages/pt-BR.json
index 32c3e58dc..65b03b0a5 100644
--- a/apps/web/src/__generated__/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var p=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var n in e)r(o,n,{get:e[n],enumerable:!0})},a=(o,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of b(e))!u.call(o,i)&&i!==n&&r(o,i,{get:()=>e[i],enumerable:!(c=m(e,i))||c.enumerable});return o};var z=(o,e,n)=>(n=o!=null?s(g(o)):{},a(e||!o||!o.__esModule?r(n,\"default\",{value:o,enumerable:!0}):n,o)),f=o=>a(r({},\"__esModule\",{value:!0}),o);var l=p((q,t)=>{t.exports=_jsx_runtime});var _={};x(_,{default:()=>w,frontmatter:()=>S});var d=z(l()),S={title:\"O que faz `* { box-sizing: border-box; }`?\",subtitle:\"Quais as vantagens?\"};function h(o){let e=Object.assign({p:\"p\",code:\"code\",h2:\"h2\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)(e.p,{children:[(0,d.jsx)(e.code,{children:\"* { box-sizing: border-box; }\"}),\" faz com que cada elemento na p\\xE1gina use a abordagem \",(0,d.jsx)(e.code,{children:\"box: border-box\"}),\" para calcular os elementos \",(0,d.jsx)(e.code,{children:\"height\"}),\" e \",(0,d.jsx)(e.code,{children:\"width\"}),\".\"]}),`\n`,(0,d.jsx)(e.h2,{children:\"Qual \\xE9 a diferen\\xE7a?\"}),`\n`,(0,d.jsxs)(e.p,{children:[\"Por padr\\xE3o, os elementos t\\xEAm \",(0,d.jsx)(e.code,{children:\"box-sizing: content-box\"}),\" aplicado, e apenas o tamanho do conte\\xFAdo est\\xE1 sendo contabilizado se um elemento tem \",(0,d.jsx)(e.code,{children:\"height\"}),\" e \",(0,d.jsx)(e.code,{children:\"width\"}),\" especificados. \",(0,d.jsx)(e.code,{children:\"box-sizing: border-box\"}),\" altera como a \",(0,d.jsx)(e.code,{children:\"width\"}),\" e \",(0,d.jsx)(e.code,{children:\"height\"}),\" dos elementos est\\xE3o sendo calculadas, a \",(0,d.jsx)(e.code,{children:\"border\"}),\" e o \",(0,d.jsx)(e.code,{children:\"padding\"}),\" tamb\\xE9m s\\xE3o inclu\\xEDdos no c\\xE1lculo. O \",(0,d.jsx)(e.code,{children:\"height\"}),\" de um elemento \\xE9 agora calculado pelo conte\\xFAdo \",(0,d.jsx)(e.code,{children:\"height\"}),\" + \",(0,d.jsx)(e.code,{children:\"padding\"}),\" vertical + \",(0,d.jsx)(e.code,{children:\"border\"}),\" horizontal. A \",(0,d.jsx)(e.code,{children:\"width\"}),\" de um elemento \\xE9 agora calculada pela \",(0,d.jsx)(e.code,{children:\"width\"}),\" do conte\\xFAdo + \",(0,d.jsx)(e.code,{children:\"padding\"}),\" horizontal + largura da horizontal \",(0,d.jsx)(e.code,{children:\"border\"}),\".\"]}),`\n`,(0,d.jsxs)(e.p,{children:[\"A tabela a seguir indica se a propriedade \\xE9 inclu\\xEDda ou n\\xE3o no c\\xE1lculo da altura e largura do elemento quando ele tem o respectivo \",(0,d.jsx)(e.code,{children:\"box-sizing\"}),\":\"]}),`\n`,(0,d.jsxs)(e.table,{children:[(0,d.jsx)(e.thead,{children:(0,d.jsxs)(e.tr,{children:[(0,d.jsx)(e.th,{children:\"Propriedade\"}),(0,d.jsxs)(e.th,{children:[(0,d.jsx)(e.code,{children:\"box-sizing: content-box\"}),\" (padr\\xE3o)\"]}),(0,d.jsx)(e.th,{children:(0,d.jsx)(e.code,{children:\"box-sizing: border-box\"})})]})}),(0,d.jsxs)(e.tbody,{children:[(0,d.jsxs)(e.tr,{children:[(0,d.jsx)(e.td,{children:\"conte\\xFAdo\"}),(0,d.jsx)(e.td,{children:\"Sim\"}),(0,d.jsx)(e.td,{children:\"Sim\"})]}),(0,d.jsxs)(e.tr,{children:[(0,d.jsx)(e.td,{children:(0,d.jsx)(e.code,{children:\"padding\"})}),(0,d.jsx)(e.td,{children:\"N\\xE3o\"}),(0,d.jsx)(e.td,{children:\"Sim\"})]}),(0,d.jsxs)(e.tr,{children:[(0,d.jsx)(e.td,{children:(0,d.jsx)(e.code,{children:\"border\"})}),(0,d.jsx)(e.td,{children:\"N\\xE3o\"}),(0,d.jsx)(e.td,{children:\"Sim\"})]}),(0,d.jsxs)(e.tr,{children:[(0,d.jsx)(e.td,{children:(0,d.jsx)(e.code,{children:\"margin\"})}),(0,d.jsx)(e.td,{children:\"N\\xE3o\"}),(0,d.jsx)(e.td,{children:\"N\\xE3o\"})]})]})]}),`\n`,(0,d.jsx)(e.h2,{children:\"Vantagens\"}),`\n`,(0,d.jsxs)(e.p,{children:[\"Levar em considera\\xE7\\xE3o \",(0,d.jsx)(e.code,{children:\"paddings\"}),\" e \",(0,d.jsx)(e.code,{children:\"border\"}),\"s como parte do modelo de caixa \\xE9 mais coerente com a forma como os designers imaginam o conte\\xFAdo em grades. Essa \\xE9 uma maneira mais intuitiva de pensar em caixas e, portanto, muitos frameworks CSS definem globalmente \",(0,d.jsx)(e.code,{children:\"* { box-sizing: border-box; }\"}),\" para que todos os elementos usem esse modelo de caixa por padr\\xE3o.\"]}),`\n`,(0,d.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,d.jsxs)(e.ul,{children:[`\n`,(0,d.jsx)(e.li,{children:(0,d.jsx)(e.a,{href:\"https://css-tricks.com/box-sizing/\",children:\"Box Sizing CSS-Tricks\"})}),`\n`]})]})}function j(o={}){let{wrapper:e}=o.components||{};return e?(0,d.jsx)(e,Object.assign({},o,{children:(0,d.jsx)(h,o)})):h(o)}var w=j;return f(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var x=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),z=(o,e)=>{for(var n in e)i(o,n,{get:e[n],enumerable:!0})},a=(o,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!p.call(o,r)&&r!==n&&i(o,r,{get:()=>e[r],enumerable:!(c=b(e,r))||c.enumerable});return o};var f=(o,e,n)=>(n=o!=null?m(g(o)):{},a(e||!o||!o.__esModule?i(n,\"default\",{value:o,enumerable:!0}):n,o)),S=o=>a(i({},\"__esModule\",{value:!0}),o);var l=x((v,t)=>{t.exports=_jsx_runtime});var _={};z(_,{default:()=>s,frontmatter:()=>w});var d=f(l()),w={title:\"O que faz `* { box-sizing: border-box; }`?\",subtitle:\"Quais as vantagens?\"};function h(o){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...o.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)(e.p,{children:[(0,d.jsx)(e.code,{children:\"* { box-sizing: border-box; }\"}),\" faz com que cada elemento na p\\xE1gina use a abordagem \",(0,d.jsx)(e.code,{children:\"box: border-box\"}),\" para calcular os elementos \",(0,d.jsx)(e.code,{children:\"height\"}),\" e \",(0,d.jsx)(e.code,{children:\"width\"}),\".\"]}),`\n`,(0,d.jsx)(e.h2,{children:\"Qual \\xE9 a diferen\\xE7a?\"}),`\n`,(0,d.jsxs)(e.p,{children:[\"Por padr\\xE3o, os elementos t\\xEAm \",(0,d.jsx)(e.code,{children:\"box-sizing: content-box\"}),\" aplicado, e apenas o tamanho do conte\\xFAdo est\\xE1 sendo contabilizado se um elemento tem \",(0,d.jsx)(e.code,{children:\"height\"}),\" e \",(0,d.jsx)(e.code,{children:\"width\"}),\" especificados. \",(0,d.jsx)(e.code,{children:\"box-sizing: border-box\"}),\" altera como a \",(0,d.jsx)(e.code,{children:\"width\"}),\" e \",(0,d.jsx)(e.code,{children:\"height\"}),\" dos elementos est\\xE3o sendo calculadas, a \",(0,d.jsx)(e.code,{children:\"border\"}),\" e o \",(0,d.jsx)(e.code,{children:\"padding\"}),\" tamb\\xE9m s\\xE3o inclu\\xEDdos no c\\xE1lculo. O \",(0,d.jsx)(e.code,{children:\"height\"}),\" de um elemento \\xE9 agora calculado pelo conte\\xFAdo \",(0,d.jsx)(e.code,{children:\"height\"}),\" + \",(0,d.jsx)(e.code,{children:\"padding\"}),\" vertical + \",(0,d.jsx)(e.code,{children:\"border\"}),\" horizontal. A \",(0,d.jsx)(e.code,{children:\"width\"}),\" de um elemento \\xE9 agora calculada pela \",(0,d.jsx)(e.code,{children:\"width\"}),\" do conte\\xFAdo + \",(0,d.jsx)(e.code,{children:\"padding\"}),\" horizontal + largura da horizontal \",(0,d.jsx)(e.code,{children:\"border\"}),\".\"]}),`\n`,(0,d.jsxs)(e.p,{children:[\"A tabela a seguir indica se a propriedade \\xE9 inclu\\xEDda ou n\\xE3o no c\\xE1lculo da altura e largura do elemento quando ele tem o respectivo \",(0,d.jsx)(e.code,{children:\"box-sizing\"}),\":\"]}),`\n`,(0,d.jsxs)(e.table,{children:[(0,d.jsx)(e.thead,{children:(0,d.jsxs)(e.tr,{children:[(0,d.jsx)(e.th,{children:\"Propriedade\"}),(0,d.jsxs)(e.th,{children:[(0,d.jsx)(e.code,{children:\"box-sizing: content-box\"}),\" (padr\\xE3o)\"]}),(0,d.jsx)(e.th,{children:(0,d.jsx)(e.code,{children:\"box-sizing: border-box\"})})]})}),(0,d.jsxs)(e.tbody,{children:[(0,d.jsxs)(e.tr,{children:[(0,d.jsx)(e.td,{children:\"conte\\xFAdo\"}),(0,d.jsx)(e.td,{children:\"Sim\"}),(0,d.jsx)(e.td,{children:\"Sim\"})]}),(0,d.jsxs)(e.tr,{children:[(0,d.jsx)(e.td,{children:(0,d.jsx)(e.code,{children:\"padding\"})}),(0,d.jsx)(e.td,{children:\"N\\xE3o\"}),(0,d.jsx)(e.td,{children:\"Sim\"})]}),(0,d.jsxs)(e.tr,{children:[(0,d.jsx)(e.td,{children:(0,d.jsx)(e.code,{children:\"border\"})}),(0,d.jsx)(e.td,{children:\"N\\xE3o\"}),(0,d.jsx)(e.td,{children:\"Sim\"})]}),(0,d.jsxs)(e.tr,{children:[(0,d.jsx)(e.td,{children:(0,d.jsx)(e.code,{children:\"margin\"})}),(0,d.jsx)(e.td,{children:\"N\\xE3o\"}),(0,d.jsx)(e.td,{children:\"N\\xE3o\"})]})]})]}),`\n`,(0,d.jsx)(e.h2,{children:\"Vantagens\"}),`\n`,(0,d.jsxs)(e.p,{children:[\"Levar em considera\\xE7\\xE3o \",(0,d.jsx)(e.code,{children:\"paddings\"}),\" e \",(0,d.jsx)(e.code,{children:\"border\"}),\"s como parte do modelo de caixa \\xE9 mais coerente com a forma como os designers imaginam o conte\\xFAdo em grades. Essa \\xE9 uma maneira mais intuitiva de pensar em caixas e, portanto, muitos frameworks CSS definem globalmente \",(0,d.jsx)(e.code,{children:\"* { box-sizing: border-box; }\"}),\" para que todos os elementos usem esse modelo de caixa por padr\\xE3o.\"]}),`\n`,(0,d.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,d.jsxs)(e.ul,{children:[`\n`,(0,d.jsx)(e.li,{children:(0,d.jsx)(e.a,{href:\"https://css-tricks.com/box-sizing/\",children:\"Box Sizing CSS-Tricks\"})}),`\n`]})]})}function s(o={}){let{wrapper:e}=o.components||{};return e?(0,d.jsx)(e,{...o,children:(0,d.jsx)(h,{...o})}):h(o)}return S(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages/zh-CN.json
index bba8efade..b0794a55a 100644
--- a/apps/web/src/__generated__/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var r=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var m=(n,d)=>()=>(d||n((d={exports:{}}).exports,d),d.exports),u=(n,d)=>{for(var i in d)r(n,i,{get:d[i],enumerable:!0})},t=(n,d,i,h)=>{if(d&&typeof d==\"object\"||typeof d==\"function\")for(let c of a(d))!p.call(n,c)&&c!==i&&r(n,c,{get:()=>d[c],enumerable:!(h=x(d,c))||h.enumerable});return n};var z=(n,d,i)=>(i=n!=null?s(g(n)):{},t(d||!n||!n.__esModule?r(i,\"default\",{value:n,enumerable:!0}):i,n)),j=n=>t(r({},\"__esModule\",{value:!0}),n);var l=m((C,o)=>{o.exports=_jsx_runtime});var S={};u(S,{default:()=>w,frontmatter:()=>_});var e=z(l()),_={title:\"`* { box-sizing: border-box; }` \\u662F\\u4EC0\\u4E48\\u4F5C\\u7528\\uFF1F\",subtitle:\"\\u5B83\\u6709\\u4EC0\\u4E48\\u4F18\\u70B9\\uFF1F\"};function b(n){let d=Object.assign({p:\"p\",code:\"code\",h2:\"h2\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(d.p,{children:[(0,e.jsx)(d.code,{children:\"* { box-sizing: border-box; }\"}),\" \\u4F7F\\u9875\\u9762\\u4E0A\\u7684\\u6BCF\\u4E2A\\u5143\\u7D20\\u90FD\\u4F7F\\u7528 \",(0,e.jsx)(d.code,{children:\"box-sizing: border-box\"}),\" \\u65B9\\u6CD5\\u6765\\u8BA1\\u7B97\\u5143\\u7D20\\u7684 \",(0,e.jsx)(d.code,{children:\"height\"}),\" \\u548C \",(0,e.jsx)(d.code,{children:\"width\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(d.h2,{children:\"\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"}),`\n`,(0,e.jsxs)(d.p,{children:[\"\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5143\\u7D20\\u5E94\\u7528\\u4E86 \",(0,e.jsx)(d.code,{children:\"box-sizing: content-box\"}),\"\\uFF0C\\u5982\\u679C\\u4E00\\u4E2A\\u5143\\u7D20\\u6307\\u5B9A\\u4E86 \",(0,e.jsx)(d.code,{children:\"height\"}),\" \\u548C \",(0,e.jsx)(d.code,{children:\"width\"}),\"\\uFF0C\\u5219\\u53EA\\u8BA1\\u7B97\\u5185\\u5BB9\\u5927\\u5C0F\\u3002\",(0,e.jsx)(d.code,{children:\"box-sizing: border-box\"}),\" \\u6539\\u53D8\\u4E86\\u5143\\u7D20\\u7684 \",(0,e.jsx)(d.code,{children:\"width\"}),\" \\u548C \",(0,e.jsx)(d.code,{children:\"height\"}),\" \\u7684\\u8BA1\\u7B97\\u65B9\\u5F0F\\uFF0C\",(0,e.jsx)(d.code,{children:\"border\"}),\" \\u548C \",(0,e.jsx)(d.code,{children:\"padding\"}),\" \\u4E5F\\u88AB\\u5305\\u542B\\u5728\\u8BA1\\u7B97\\u4E2D\\u3002\\u73B0\\u5728\\uFF0C\\u4E00\\u4E2A\\u5143\\u7D20\\u7684\\u9AD8\\u5EA6\\u7531\\u5185\\u5BB9\\u7684 \",(0,e.jsx)(d.code,{children:\"height\"}),\" + \\u5782\\u76F4 \",(0,e.jsx)(d.code,{children:\"padding\"}),\" + \\u5782\\u76F4 \",(0,e.jsx)(d.code,{children:\"border\"}),\" \\u5BBD\\u5EA6\\u8BA1\\u7B97\\u3002\\u4E00\\u4E2A\\u5143\\u7D20\\u7684\\u5BBD\\u5EA6\\u73B0\\u5728\\u7531\\u5185\\u5BB9\\u7684 \",(0,e.jsx)(d.code,{children:\"width\"}),\" + \\u6C34\\u5E73 \",(0,e.jsx)(d.code,{children:\"padding\"}),\" + \\u6C34\\u5E73 \",(0,e.jsx)(d.code,{children:\"border\"}),\" \\u5BBD\\u5EA6\\u8BA1\\u7B97\\u3002\"]}),`\n`,(0,e.jsxs)(d.p,{children:[\"\\u4E0B\\u8868\\u6307\\u793A\\u4E86\\u5F53\\u5C5E\\u6027\\u5177\\u6709\\u5404\\u81EA\\u7684 \",(0,e.jsx)(d.code,{children:\"box-sizing\"}),\" \\u65F6\\uFF0C\\u8BE5\\u5C5E\\u6027\\u662F\\u5426\\u5305\\u542B\\u5728\\u5143\\u7D20\\u7684 height \\u548C width \\u7684\\u8BA1\\u7B97\\u4E2D\\uFF1A\"]}),`\n`,(0,e.jsxs)(d.table,{children:[(0,e.jsx)(d.thead,{children:(0,e.jsxs)(d.tr,{children:[(0,e.jsx)(d.th,{children:\"\\u5C5E\\u6027\"}),(0,e.jsxs)(d.th,{children:[(0,e.jsx)(d.code,{children:\"box-sizing: content-box\"}),\" (\\u9ED8\\u8BA4)\"]}),(0,e.jsx)(d.th,{children:(0,e.jsx)(d.code,{children:\"box-sizing: border-box\"})})]})}),(0,e.jsxs)(d.tbody,{children:[(0,e.jsxs)(d.tr,{children:[(0,e.jsx)(d.td,{children:\"content\"}),(0,e.jsx)(d.td,{children:\"\\u662F\"}),(0,e.jsx)(d.td,{children:\"\\u662F\"})]}),(0,e.jsxs)(d.tr,{children:[(0,e.jsx)(d.td,{children:(0,e.jsx)(d.code,{children:\"padding\"})}),(0,e.jsx)(d.td,{children:\"\\u5426\"}),(0,e.jsx)(d.td,{children:\"\\u662F\"})]}),(0,e.jsxs)(d.tr,{children:[(0,e.jsx)(d.td,{children:(0,e.jsx)(d.code,{children:\"border\"})}),(0,e.jsx)(d.td,{children:\"\\u5426\"}),(0,e.jsx)(d.td,{children:\"\\u662F\"})]}),(0,e.jsxs)(d.tr,{children:[(0,e.jsx)(d.td,{children:(0,e.jsx)(d.code,{children:\"margin\"})}),(0,e.jsx)(d.td,{children:\"\\u5426\"}),(0,e.jsx)(d.td,{children:\"\\u5426\"})]})]})]}),`\n`,(0,e.jsx)(d.h2,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(d.p,{children:[\"\\u5C06 \",(0,e.jsx)(d.code,{children:\"padding\"}),\" \\u548C \",(0,e.jsx)(d.code,{children:\"border\"}),\" \\u8003\\u8651\\u4E3A\\u76D2\\u5B50\\u6A21\\u578B\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u8FD9\\u4E0E\\u8BBE\\u8BA1\\u5E08\\u5728\\u7F51\\u683C\\u4E2D\\u5B9E\\u9645\\u60F3\\u8C61\\u5185\\u5BB9\\u7684\\u65B9\\u5F0F\\u66F4\\u543B\\u5408\\u3002\\u8FD9\\u662F\\u4E00\\u79CD\\u66F4\\u76F4\\u89C2\\u7684\\u601D\\u8003\\u76D2\\u5B50\\u7684\\u65B9\\u5F0F\\uFF0C\\u56E0\\u6B64\\u8BB8\\u591A CSS \\u6846\\u67B6\\u5168\\u5C40\\u8BBE\\u7F6E \",(0,e.jsx)(d.code,{children:\"* { box-sizing: border-box; }\"}),\"\\uFF0C\\u4EE5\\u4FBF\\u6240\\u6709\\u5143\\u7D20\\u9ED8\\u8BA4\\u4F7F\\u7528\\u8FD9\\u79CD\\u76D2\\u5B50\\u6A21\\u578B\\u3002\"]}),`\n`,(0,e.jsx)(d.h2,{children:\"\\u53C2\\u8003\"}),`\n`,(0,e.jsxs)(d.ul,{children:[`\n`,(0,e.jsx)(d.li,{children:(0,e.jsx)(d.a,{href:\"https://css-tricks.com/box-sizing/\",children:\"Box Sizing | CSS-Tricks\"})}),`\n`]})]})}function f(n={}){let{wrapper:d}=n.components||{};return d?(0,e.jsx)(d,Object.assign({},n,{children:(0,e.jsx)(b,n)})):b(n)}var w=f;return j(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var x=Object.create;var c=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var u=(n,d)=>()=>(d||n((d={exports:{}}).exports,d),d.exports),z=(n,d)=>{for(var i in d)c(n,i,{get:d[i],enumerable:!0})},t=(n,d,i,h)=>{if(d&&typeof d==\"object\"||typeof d==\"function\")for(let r of g(d))!m.call(n,r)&&r!==i&&c(n,r,{get:()=>d[r],enumerable:!(h=a(d,r))||h.enumerable});return n};var _=(n,d,i)=>(i=n!=null?x(p(n)):{},t(d||!n||!n.__esModule?c(i,\"default\",{value:n,enumerable:!0}):i,n)),f=n=>t(c({},\"__esModule\",{value:!0}),n);var l=u((y,o)=>{o.exports=_jsx_runtime});var j={};z(j,{default:()=>s,frontmatter:()=>w});var e=_(l()),w={title:\"`* { box-sizing: border-box; }` \\u662F\\u4EC0\\u4E48\\u4F5C\\u7528\\uFF1F\",subtitle:\"\\u5B83\\u6709\\u4EC0\\u4E48\\u4F18\\u70B9\\uFF1F\"};function b(n){let d={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...n.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(d.p,{children:[(0,e.jsx)(d.code,{children:\"* { box-sizing: border-box; }\"}),\" \\u4F7F\\u9875\\u9762\\u4E0A\\u7684\\u6BCF\\u4E2A\\u5143\\u7D20\\u90FD\\u4F7F\\u7528 \",(0,e.jsx)(d.code,{children:\"box-sizing: border-box\"}),\" \\u65B9\\u6CD5\\u6765\\u8BA1\\u7B97\\u5143\\u7D20\\u7684 \",(0,e.jsx)(d.code,{children:\"height\"}),\" \\u548C \",(0,e.jsx)(d.code,{children:\"width\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(d.h2,{children:\"\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"}),`\n`,(0,e.jsxs)(d.p,{children:[\"\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5143\\u7D20\\u5E94\\u7528\\u4E86 \",(0,e.jsx)(d.code,{children:\"box-sizing: content-box\"}),\"\\uFF0C\\u5982\\u679C\\u4E00\\u4E2A\\u5143\\u7D20\\u6307\\u5B9A\\u4E86 \",(0,e.jsx)(d.code,{children:\"height\"}),\" \\u548C \",(0,e.jsx)(d.code,{children:\"width\"}),\"\\uFF0C\\u5219\\u53EA\\u8BA1\\u7B97\\u5185\\u5BB9\\u5927\\u5C0F\\u3002\",(0,e.jsx)(d.code,{children:\"box-sizing: border-box\"}),\" \\u6539\\u53D8\\u4E86\\u5143\\u7D20\\u7684 \",(0,e.jsx)(d.code,{children:\"width\"}),\" \\u548C \",(0,e.jsx)(d.code,{children:\"height\"}),\" \\u7684\\u8BA1\\u7B97\\u65B9\\u5F0F\\uFF0C\",(0,e.jsx)(d.code,{children:\"border\"}),\" \\u548C \",(0,e.jsx)(d.code,{children:\"padding\"}),\" \\u4E5F\\u88AB\\u5305\\u542B\\u5728\\u8BA1\\u7B97\\u4E2D\\u3002\\u73B0\\u5728\\uFF0C\\u4E00\\u4E2A\\u5143\\u7D20\\u7684\\u9AD8\\u5EA6\\u7531\\u5185\\u5BB9\\u7684 \",(0,e.jsx)(d.code,{children:\"height\"}),\" + \\u5782\\u76F4 \",(0,e.jsx)(d.code,{children:\"padding\"}),\" + \\u5782\\u76F4 \",(0,e.jsx)(d.code,{children:\"border\"}),\" \\u5BBD\\u5EA6\\u8BA1\\u7B97\\u3002\\u4E00\\u4E2A\\u5143\\u7D20\\u7684\\u5BBD\\u5EA6\\u73B0\\u5728\\u7531\\u5185\\u5BB9\\u7684 \",(0,e.jsx)(d.code,{children:\"width\"}),\" + \\u6C34\\u5E73 \",(0,e.jsx)(d.code,{children:\"padding\"}),\" + \\u6C34\\u5E73 \",(0,e.jsx)(d.code,{children:\"border\"}),\" \\u5BBD\\u5EA6\\u8BA1\\u7B97\\u3002\"]}),`\n`,(0,e.jsxs)(d.p,{children:[\"\\u4E0B\\u8868\\u6307\\u793A\\u4E86\\u5F53\\u5C5E\\u6027\\u5177\\u6709\\u5404\\u81EA\\u7684 \",(0,e.jsx)(d.code,{children:\"box-sizing\"}),\" \\u65F6\\uFF0C\\u8BE5\\u5C5E\\u6027\\u662F\\u5426\\u5305\\u542B\\u5728\\u5143\\u7D20\\u7684 height \\u548C width \\u7684\\u8BA1\\u7B97\\u4E2D\\uFF1A\"]}),`\n`,(0,e.jsxs)(d.table,{children:[(0,e.jsx)(d.thead,{children:(0,e.jsxs)(d.tr,{children:[(0,e.jsx)(d.th,{children:\"\\u5C5E\\u6027\"}),(0,e.jsxs)(d.th,{children:[(0,e.jsx)(d.code,{children:\"box-sizing: content-box\"}),\" (\\u9ED8\\u8BA4)\"]}),(0,e.jsx)(d.th,{children:(0,e.jsx)(d.code,{children:\"box-sizing: border-box\"})})]})}),(0,e.jsxs)(d.tbody,{children:[(0,e.jsxs)(d.tr,{children:[(0,e.jsx)(d.td,{children:\"content\"}),(0,e.jsx)(d.td,{children:\"\\u662F\"}),(0,e.jsx)(d.td,{children:\"\\u662F\"})]}),(0,e.jsxs)(d.tr,{children:[(0,e.jsx)(d.td,{children:(0,e.jsx)(d.code,{children:\"padding\"})}),(0,e.jsx)(d.td,{children:\"\\u5426\"}),(0,e.jsx)(d.td,{children:\"\\u662F\"})]}),(0,e.jsxs)(d.tr,{children:[(0,e.jsx)(d.td,{children:(0,e.jsx)(d.code,{children:\"border\"})}),(0,e.jsx)(d.td,{children:\"\\u5426\"}),(0,e.jsx)(d.td,{children:\"\\u662F\"})]}),(0,e.jsxs)(d.tr,{children:[(0,e.jsx)(d.td,{children:(0,e.jsx)(d.code,{children:\"margin\"})}),(0,e.jsx)(d.td,{children:\"\\u5426\"}),(0,e.jsx)(d.td,{children:\"\\u5426\"})]})]})]}),`\n`,(0,e.jsx)(d.h2,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(d.p,{children:[\"\\u5C06 \",(0,e.jsx)(d.code,{children:\"padding\"}),\" \\u548C \",(0,e.jsx)(d.code,{children:\"border\"}),\" \\u8003\\u8651\\u4E3A\\u76D2\\u5B50\\u6A21\\u578B\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u8FD9\\u4E0E\\u8BBE\\u8BA1\\u5E08\\u5728\\u7F51\\u683C\\u4E2D\\u5B9E\\u9645\\u60F3\\u8C61\\u5185\\u5BB9\\u7684\\u65B9\\u5F0F\\u66F4\\u543B\\u5408\\u3002\\u8FD9\\u662F\\u4E00\\u79CD\\u66F4\\u76F4\\u89C2\\u7684\\u601D\\u8003\\u76D2\\u5B50\\u7684\\u65B9\\u5F0F\\uFF0C\\u56E0\\u6B64\\u8BB8\\u591A CSS \\u6846\\u67B6\\u5168\\u5C40\\u8BBE\\u7F6E \",(0,e.jsx)(d.code,{children:\"* { box-sizing: border-box; }\"}),\"\\uFF0C\\u4EE5\\u4FBF\\u6240\\u6709\\u5143\\u7D20\\u9ED8\\u8BA4\\u4F7F\\u7528\\u8FD9\\u79CD\\u76D2\\u5B50\\u6A21\\u578B\\u3002\"]}),`\n`,(0,e.jsx)(d.h2,{children:\"\\u53C2\\u8003\"}),`\n`,(0,e.jsxs)(d.ul,{children:[`\n`,(0,e.jsx)(d.li,{children:(0,e.jsx)(d.a,{href:\"https://css-tricks.com/box-sizing/\",children:\"Box Sizing | CSS-Tricks\"})}),`\n`]})]})}function s(n={}){let{wrapper:d}=n.components||{};return d?(0,e.jsx)(d,{...n,children:(0,e.jsx)(b,{...n})}):b(n)}return f(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-does-re-rendering-mean-in-react/en-US.json b/apps/web/src/__generated__/questions/quiz/what-does-re-rendering-mean-in-react/en-US.json
index aba8dc8f7..7c0c38f71 100644
--- a/apps/web/src/__generated__/questions/quiz/what-does-re-rendering-mean-in-react/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-does-re-rendering-mean-in-react/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-does-re-rendering-mean-in-react/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},a=(t,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!g.call(t,o)&&o!==r&&i(t,o,{get:()=>e[o],enumerable:!(c=p(e,o))||c.enumerable});return t};var R=(t,e,r)=>(r=t!=null?d(m(t)):{},a(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),w=t=>a(i({},\"__esModule\",{value:!0}),t);var h=f((b,s)=>{s.exports=_jsx_runtime});var O={};v(O,{default:()=>D,frontmatter:()=>M});var n=R(h()),M={title:\"What does re-rendering mean in React?\"};function l(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",code:\"code\",ol:\"ol\",strong:\"strong\",pre:\"pre\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Re-rendering in React refers to the process where a component updates its output to the DOM in response to changes in state or props. When a component's state or props change, React triggers a re-render to ensure the UI reflects the latest data. This process involves calling the component's render method again to produce a new virtual DOM, which is then compared to the previous virtual DOM to determine the minimal set of changes needed to update the actual DOM.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What does re-rendering mean in React?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Understanding re-rendering\"}),`\n`,(0,n.jsx)(e.p,{children:\"Re-rendering in React is the process by which a component updates its output to the DOM in response to changes in its state or props. This ensures that the UI is always in sync with the underlying data.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"When does re-rendering occur?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Re-rendering occurs in the following scenarios:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"When a component's state changes using \",(0,n.jsx)(e.code,{children:\"setState\"})]}),`\n`,(0,n.jsx)(e.li,{children:\"When a component receives new props from its parent component\"}),`\n`,(0,n.jsx)(e.li,{children:\"When the parent component re-renders, causing its child components to re-render as well\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"The re-rendering process\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"State or props change\"}),\": When a component's state or props change, React schedules a re-render for that component.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Render method\"}),\": React calls the component's \",(0,n.jsx)(e.code,{children:\"render\"}),\" method to generate a new virtual DOM tree.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Virtual DOM comparison\"}),\": React compares the new virtual DOM tree with the previous one using a diffing algorithm.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"DOM updates\"}),\": React calculates the minimal set of changes required and updates the actual DOM accordingly.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here's a simple example to illustrate re-rendering:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(count + 1)}>Increment</button>\n    </div>\n  );\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"In this example:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Counter\"}),\" component has a state variable \",(0,n.jsx)(e.code,{children:\"count\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"When the button is clicked, \",(0,n.jsx)(e.code,{children:\"setCount\"}),\" updates the state, triggering a re-render.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"render\"}),\" method is called again, and the new virtual DOM is compared to the previous one.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"React updates the actual DOM to reflect the new count.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Performance considerations\"}),`\n`,(0,n.jsx)(e.p,{children:\"Re-rendering can be expensive, especially for complex components or large applications. To optimize performance, React provides several techniques:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"PureComponent\"}),\": A base class that implements a shallow comparison of props and state to prevent unnecessary re-renders.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"React.memo\"}),\": A higher-order component that memoizes the result of a component's render to avoid re-rendering if the props haven't changed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"useMemo and useCallback\"}),\": Hooks that memoize values and functions to prevent unnecessary re-renders.\"]}),`\n`]}),`\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://react.dev/learn/render-and-commit\",children:\"React documentation on rendering\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React documentation on state\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/memo\",children:\"React.memo\"})}),`\n`]})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(l,t)})):l(t)}var D=x;return w(O);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),R=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},a=(t,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!f.call(t,o)&&o!==r&&i(t,o,{get:()=>e[o],enumerable:!(c=u(e,o))||c.enumerable});return t};var w=(t,e,r)=>(r=t!=null?p(g(t)):{},a(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),M=t=>a(i({},\"__esModule\",{value:!0}),t);var h=v((C,s)=>{s.exports=_jsx_runtime});var D={};R(D,{default:()=>d,frontmatter:()=>x});var n=w(h()),x={title:\"What does re-rendering mean in React?\"};function l(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Re-rendering in React refers to the process where a component updates its output to the DOM in response to changes in state or props. When a component's state or props change, React triggers a re-render to ensure the UI reflects the latest data. This process involves calling the component's render method again to produce a new virtual DOM, which is then compared to the previous virtual DOM to determine the minimal set of changes needed to update the actual DOM.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What does re-rendering mean in React?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Understanding re-rendering\"}),`\n`,(0,n.jsx)(e.p,{children:\"Re-rendering in React is the process by which a component updates its output to the DOM in response to changes in its state or props. This ensures that the UI is always in sync with the underlying data.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"When does re-rendering occur?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Re-rendering occurs in the following scenarios:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"When a component's state changes using \",(0,n.jsx)(e.code,{children:\"setState\"})]}),`\n`,(0,n.jsx)(e.li,{children:\"When a component receives new props from its parent component\"}),`\n`,(0,n.jsx)(e.li,{children:\"When the parent component re-renders, causing its child components to re-render as well\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"The re-rendering process\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"State or props change\"}),\": When a component's state or props change, React schedules a re-render for that component.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Render method\"}),\": React calls the component's \",(0,n.jsx)(e.code,{children:\"render\"}),\" method to generate a new virtual DOM tree.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Virtual DOM comparison\"}),\": React compares the new virtual DOM tree with the previous one using a diffing algorithm.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"DOM updates\"}),\": React calculates the minimal set of changes required and updates the actual DOM accordingly.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here's a simple example to illustrate re-rendering:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(count + 1)}>Increment</button>\n    </div>\n  );\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"In this example:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Counter\"}),\" component has a state variable \",(0,n.jsx)(e.code,{children:\"count\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"When the button is clicked, \",(0,n.jsx)(e.code,{children:\"setCount\"}),\" updates the state, triggering a re-render.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"render\"}),\" method is called again, and the new virtual DOM is compared to the previous one.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"React updates the actual DOM to reflect the new count.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Performance considerations\"}),`\n`,(0,n.jsx)(e.p,{children:\"Re-rendering can be expensive, especially for complex components or large applications. To optimize performance, React provides several techniques:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"PureComponent\"}),\": A base class that implements a shallow comparison of props and state to prevent unnecessary re-renders.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"React.memo\"}),\": A higher-order component that memoizes the result of a component's render to avoid re-rendering if the props haven't changed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"useMemo and useCallback\"}),\": Hooks that memoize values and functions to prevent unnecessary re-renders.\"]}),`\n`]}),`\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://react.dev/learn/render-and-commit\",children:\"React documentation on rendering\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React documentation on state\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/memo\",children:\"React.memo\"})}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}return M(D);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-does-re-rendering-mean-in-react/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-does-re-rendering-mean-in-react/zh-CN.json
index add55eb2e..ce3dec7fc 100644
--- a/apps/web/src/__generated__/questions/quiz/what-does-re-rendering-mean-in-react/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-does-re-rendering-mean-in-react/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-does-re-rendering-mean-in-react/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var g=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),D=(r,n)=>{for(var c in n)i(r,c,{get:n[c],enumerable:!0})},d=(r,n,c,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of u(n))!M.call(r,t)&&t!==c&&i(r,t,{get:()=>n[t],enumerable:!(l=p(n,t))||l.enumerable});return r};var O=(r,n,c)=>(c=r!=null?s(m(r)):{},d(n||!r||!r.__esModule?i(c,\"default\",{value:r,enumerable:!0}):c,r)),R=r=>d(i({},\"__esModule\",{value:!0}),r);var h=g((b,o)=>{o.exports=_jsx_runtime});var j={};D(j,{default:()=>x,frontmatter:()=>f});var e=O(h()),f={title:\"React \\u4E2D\\u91CD\\u65B0\\u6E32\\u67D3\\u662F\\u4EC0\\u4E48\\u610F\\u601D\\uFF1F\"};function a(r){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",code:\"code\",ol:\"ol\",strong:\"strong\",pre:\"pre\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 React \\u4E2D\\uFF0C\\u91CD\\u65B0\\u6E32\\u67D3\\u662F\\u6307\\u7EC4\\u4EF6\\u54CD\\u5E94\\u72B6\\u6001\\u6216 props \\u7684\\u53D8\\u5316\\u800C\\u66F4\\u65B0\\u5176\\u5728 DOM \\u4E2D\\u7684\\u8F93\\u51FA\\u7684\\u8FC7\\u7A0B\\u3002\\u5F53\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u6216 props \\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0CReact \\u4F1A\\u89E6\\u53D1\\u91CD\\u65B0\\u6E32\\u67D3\\uFF0C\\u4EE5\\u786E\\u4FDD UI \\u53CD\\u6620\\u6700\\u65B0\\u7684\\u6570\\u636E\\u3002\\u6B64\\u8FC7\\u7A0B\\u6D89\\u53CA\\u518D\\u6B21\\u8C03\\u7528\\u7EC4\\u4EF6\\u7684 render \\u65B9\\u6CD5\\u4EE5\\u751F\\u6210\\u65B0\\u7684\\u865A\\u62DF DOM\\uFF0C\\u7136\\u540E\\u5C06\\u5176\\u4E0E\\u4E4B\\u524D\\u7684\\u865A\\u62DF DOM \\u8FDB\\u884C\\u6BD4\\u8F83\\uFF0C\\u4EE5\\u786E\\u5B9A\\u66F4\\u65B0\\u5B9E\\u9645 DOM \\u6240\\u9700\\u7684\\u6700\\u5C0F\\u66F4\\u6539\\u96C6\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u4E2D\\u91CD\\u65B0\\u6E32\\u67D3\\u662F\\u4EC0\\u4E48\\u610F\\u601D\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7406\\u89E3\\u91CD\\u65B0\\u6E32\\u67D3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 React \\u4E2D\\uFF0C\\u91CD\\u65B0\\u6E32\\u67D3\\u662F\\u6307\\u7EC4\\u4EF6\\u54CD\\u5E94\\u5176\\u72B6\\u6001\\u6216 props \\u7684\\u53D8\\u5316\\u800C\\u66F4\\u65B0\\u5176\\u5728 DOM \\u4E2D\\u7684\\u8F93\\u51FA\\u7684\\u8FC7\\u7A0B\\u3002\\u8FD9\\u786E\\u4FDD\\u4E86 UI \\u59CB\\u7EC8\\u4E0E\\u5E95\\u5C42\\u6570\\u636E\\u540C\\u6B65\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EC0\\u4E48\\u65F6\\u5019\\u4F1A\\u53D1\\u751F\\u91CD\\u65B0\\u6E32\\u67D3\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u91CD\\u65B0\\u6E32\\u67D3\\u53D1\\u751F\\u5728\\u4EE5\\u4E0B\\u60C5\\u51B5\\u4E0B\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5F53\\u7EC4\\u4EF6\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"setState\"}),\" \\u66F4\\u6539\\u72B6\\u6001\\u65F6\"]}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u7EC4\\u4EF6\\u4ECE\\u5176\\u7236\\u7EC4\\u4EF6\\u63A5\\u6536\\u5230\\u65B0\\u7684 props \\u65F6\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u7236\\u7EC4\\u4EF6\\u91CD\\u65B0\\u6E32\\u67D3\\u65F6\\uFF0C\\u5BFC\\u81F4\\u5176\\u5B50\\u7EC4\\u4EF6\\u4E5F\\u91CD\\u65B0\\u6E32\\u67D3\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u91CD\\u65B0\\u6E32\\u67D3\\u8FC7\\u7A0B\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u72B6\\u6001\\u6216 props \\u66F4\\u6539\"}),\"\\uFF1A\\u5F53\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u6216 props \\u66F4\\u6539\\u65F6\\uFF0CReact \\u4F1A\\u4E3A\\u8BE5\\u7EC4\\u4EF6\\u5B89\\u6392\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"render \\u65B9\\u6CD5\"}),\"\\uFF1AReact \\u8C03\\u7528\\u7EC4\\u4EF6\\u7684 \",(0,e.jsx)(n.code,{children:\"render\"}),\" \\u65B9\\u6CD5\\u4EE5\\u751F\\u6210\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u865A\\u62DF DOM \\u6BD4\\u8F83\"}),\"\\uFF1AReact \\u4F7F\\u7528 diffing \\u7B97\\u6CD5\\u5C06\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\u4E0E\\u4E4B\\u524D\\u7684\\u865A\\u62DF DOM \\u6811\\u8FDB\\u884C\\u6BD4\\u8F83\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"DOM \\u66F4\\u65B0\"}),\"\\uFF1AReact \\u8BA1\\u7B97\\u6240\\u9700\\u7684\\u6700\\u5C0F\\u66F4\\u6539\\u96C6\\u5E76\\u76F8\\u5E94\\u5730\\u66F4\\u65B0\\u5B9E\\u9645 DOM\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u793A\\u4F8B\\uFF0C\\u7528\\u4E8E\\u8BF4\\u660E\\u91CD\\u65B0\\u6E32\\u67D3\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`import React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(count + 1)}>Increment</button>\n    </div>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"Counter\"}),\" \\u7EC4\\u4EF6\\u6709\\u4E00\\u4E2A\\u72B6\\u6001\\u53D8\\u91CF \",(0,e.jsx)(n.code,{children:\"count\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5F53\\u5355\\u51FB\\u6309\\u94AE\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"setCount\"}),\" \\u4F1A\\u66F4\\u65B0\\u72B6\\u6001\\uFF0C\\u4ECE\\u800C\\u89E6\\u53D1\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u518D\\u6B21\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"render\"}),\" \\u65B9\\u6CD5\\uFF0C\\u5E76\\u5C06\\u65B0\\u7684\\u865A\\u62DF DOM \\u4E0E\\u4E4B\\u524D\\u7684\\u865A\\u62DF DOM \\u8FDB\\u884C\\u6BD4\\u8F83\\u3002\"]}),`\n`,(0,e.jsx)(n.li,{children:\"React \\u66F4\\u65B0\\u5B9E\\u9645 DOM \\u4EE5\\u53CD\\u6620\\u65B0\\u7684\\u8BA1\\u6570\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6027\\u80FD\\u8003\\u8651\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u91CD\\u65B0\\u6E32\\u67D3\\u53EF\\u80FD\\u5F88\\u6602\\u8D35\\uFF0C\\u5C24\\u5176\\u5BF9\\u4E8E\\u590D\\u6742\\u7684\\u7EC4\\u4EF6\\u6216\\u5927\\u578B\\u5E94\\u7528\\u7A0B\\u5E8F\\u800C\\u8A00\\u3002\\u4E3A\\u4E86\\u4F18\\u5316\\u6027\\u80FD\\uFF0CReact \\u63D0\\u4F9B\\u4E86\\u51E0\\u79CD\\u6280\\u672F\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"PureComponent\"}),\"\\uFF1A\\u4E00\\u4E2A\\u57FA\\u7C7B\\uFF0C\\u5B83\\u5B9E\\u73B0\\u4E86 props \\u548C state \\u7684\\u6D45\\u5C42\\u6BD4\\u8F83\\uFF0C\\u4EE5\\u9632\\u6B62\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"React.memo\"}),\"\\uFF1A\\u4E00\\u4E2A\\u9AD8\\u9636\\u7EC4\\u4EF6\\uFF0C\\u5B83\\u4F1A\\u8BB0\\u5FC6\\u7EC4\\u4EF6 render \\u7684\\u7ED3\\u679C\\uFF0C\\u4EE5\\u907F\\u514D\\u5728 props \\u672A\\u66F4\\u6539\\u7684\\u60C5\\u51B5\\u4E0B\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"useMemo \\u548C useCallback\"}),\"\\uFF1A\\u7528\\u4E8E\\u8BB0\\u5FC6\\u503C\\u548C\\u51FD\\u6570\\u7684 Hook\\uFF0C\\u4EE5\\u9632\\u6B62\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/render-and-commit\",children:\"React documentation on rendering\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React documentation on state\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react/memo\",children:\"React.memo\"})}),`\n`]})]})}function C(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(a,r)})):a(r)}var x=C;return R(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var R=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),g=(r,n)=>{for(var c in n)l(r,c,{get:n[c],enumerable:!0})},d=(r,n,c,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of m(n))!D.call(r,t)&&t!==c&&l(r,t,{get:()=>n[t],enumerable:!(i=u(n,t))||i.enumerable});return r};var O=(r,n,c)=>(c=r!=null?p(M(r)):{},d(n||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),f=r=>d(l({},\"__esModule\",{value:!0}),r);var h=R((j,o)=>{o.exports=_jsx_runtime});var x={};g(x,{default:()=>s,frontmatter:()=>C});var e=O(h()),C={title:\"React \\u4E2D\\u91CD\\u65B0\\u6E32\\u67D3\\u662F\\u4EC0\\u4E48\\u610F\\u601D\\uFF1F\"};function a(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 React \\u4E2D\\uFF0C\\u91CD\\u65B0\\u6E32\\u67D3\\u662F\\u6307\\u7EC4\\u4EF6\\u54CD\\u5E94\\u72B6\\u6001\\u6216 props \\u7684\\u53D8\\u5316\\u800C\\u66F4\\u65B0\\u5176\\u5728 DOM \\u4E2D\\u7684\\u8F93\\u51FA\\u7684\\u8FC7\\u7A0B\\u3002\\u5F53\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u6216 props \\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0CReact \\u4F1A\\u89E6\\u53D1\\u91CD\\u65B0\\u6E32\\u67D3\\uFF0C\\u4EE5\\u786E\\u4FDD UI \\u53CD\\u6620\\u6700\\u65B0\\u7684\\u6570\\u636E\\u3002\\u6B64\\u8FC7\\u7A0B\\u6D89\\u53CA\\u518D\\u6B21\\u8C03\\u7528\\u7EC4\\u4EF6\\u7684 render \\u65B9\\u6CD5\\u4EE5\\u751F\\u6210\\u65B0\\u7684\\u865A\\u62DF DOM\\uFF0C\\u7136\\u540E\\u5C06\\u5176\\u4E0E\\u4E4B\\u524D\\u7684\\u865A\\u62DF DOM \\u8FDB\\u884C\\u6BD4\\u8F83\\uFF0C\\u4EE5\\u786E\\u5B9A\\u66F4\\u65B0\\u5B9E\\u9645 DOM \\u6240\\u9700\\u7684\\u6700\\u5C0F\\u66F4\\u6539\\u96C6\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u4E2D\\u91CD\\u65B0\\u6E32\\u67D3\\u662F\\u4EC0\\u4E48\\u610F\\u601D\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7406\\u89E3\\u91CD\\u65B0\\u6E32\\u67D3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 React \\u4E2D\\uFF0C\\u91CD\\u65B0\\u6E32\\u67D3\\u662F\\u6307\\u7EC4\\u4EF6\\u54CD\\u5E94\\u5176\\u72B6\\u6001\\u6216 props \\u7684\\u53D8\\u5316\\u800C\\u66F4\\u65B0\\u5176\\u5728 DOM \\u4E2D\\u7684\\u8F93\\u51FA\\u7684\\u8FC7\\u7A0B\\u3002\\u8FD9\\u786E\\u4FDD\\u4E86 UI \\u59CB\\u7EC8\\u4E0E\\u5E95\\u5C42\\u6570\\u636E\\u540C\\u6B65\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EC0\\u4E48\\u65F6\\u5019\\u4F1A\\u53D1\\u751F\\u91CD\\u65B0\\u6E32\\u67D3\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u91CD\\u65B0\\u6E32\\u67D3\\u53D1\\u751F\\u5728\\u4EE5\\u4E0B\\u60C5\\u51B5\\u4E0B\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5F53\\u7EC4\\u4EF6\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"setState\"}),\" \\u66F4\\u6539\\u72B6\\u6001\\u65F6\"]}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u7EC4\\u4EF6\\u4ECE\\u5176\\u7236\\u7EC4\\u4EF6\\u63A5\\u6536\\u5230\\u65B0\\u7684 props \\u65F6\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u7236\\u7EC4\\u4EF6\\u91CD\\u65B0\\u6E32\\u67D3\\u65F6\\uFF0C\\u5BFC\\u81F4\\u5176\\u5B50\\u7EC4\\u4EF6\\u4E5F\\u91CD\\u65B0\\u6E32\\u67D3\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u91CD\\u65B0\\u6E32\\u67D3\\u8FC7\\u7A0B\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u72B6\\u6001\\u6216 props \\u66F4\\u6539\"}),\"\\uFF1A\\u5F53\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u6216 props \\u66F4\\u6539\\u65F6\\uFF0CReact \\u4F1A\\u4E3A\\u8BE5\\u7EC4\\u4EF6\\u5B89\\u6392\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"render \\u65B9\\u6CD5\"}),\"\\uFF1AReact \\u8C03\\u7528\\u7EC4\\u4EF6\\u7684 \",(0,e.jsx)(n.code,{children:\"render\"}),\" \\u65B9\\u6CD5\\u4EE5\\u751F\\u6210\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u865A\\u62DF DOM \\u6BD4\\u8F83\"}),\"\\uFF1AReact \\u4F7F\\u7528 diffing \\u7B97\\u6CD5\\u5C06\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\u4E0E\\u4E4B\\u524D\\u7684\\u865A\\u62DF DOM \\u6811\\u8FDB\\u884C\\u6BD4\\u8F83\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"DOM \\u66F4\\u65B0\"}),\"\\uFF1AReact \\u8BA1\\u7B97\\u6240\\u9700\\u7684\\u6700\\u5C0F\\u66F4\\u6539\\u96C6\\u5E76\\u76F8\\u5E94\\u5730\\u66F4\\u65B0\\u5B9E\\u9645 DOM\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u793A\\u4F8B\\uFF0C\\u7528\\u4E8E\\u8BF4\\u660E\\u91CD\\u65B0\\u6E32\\u67D3\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`import React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(count + 1)}>Increment</button>\n    </div>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"Counter\"}),\" \\u7EC4\\u4EF6\\u6709\\u4E00\\u4E2A\\u72B6\\u6001\\u53D8\\u91CF \",(0,e.jsx)(n.code,{children:\"count\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5F53\\u5355\\u51FB\\u6309\\u94AE\\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"setCount\"}),\" \\u4F1A\\u66F4\\u65B0\\u72B6\\u6001\\uFF0C\\u4ECE\\u800C\\u89E6\\u53D1\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u518D\\u6B21\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"render\"}),\" \\u65B9\\u6CD5\\uFF0C\\u5E76\\u5C06\\u65B0\\u7684\\u865A\\u62DF DOM \\u4E0E\\u4E4B\\u524D\\u7684\\u865A\\u62DF DOM \\u8FDB\\u884C\\u6BD4\\u8F83\\u3002\"]}),`\n`,(0,e.jsx)(n.li,{children:\"React \\u66F4\\u65B0\\u5B9E\\u9645 DOM \\u4EE5\\u53CD\\u6620\\u65B0\\u7684\\u8BA1\\u6570\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6027\\u80FD\\u8003\\u8651\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u91CD\\u65B0\\u6E32\\u67D3\\u53EF\\u80FD\\u5F88\\u6602\\u8D35\\uFF0C\\u5C24\\u5176\\u5BF9\\u4E8E\\u590D\\u6742\\u7684\\u7EC4\\u4EF6\\u6216\\u5927\\u578B\\u5E94\\u7528\\u7A0B\\u5E8F\\u800C\\u8A00\\u3002\\u4E3A\\u4E86\\u4F18\\u5316\\u6027\\u80FD\\uFF0CReact \\u63D0\\u4F9B\\u4E86\\u51E0\\u79CD\\u6280\\u672F\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"PureComponent\"}),\"\\uFF1A\\u4E00\\u4E2A\\u57FA\\u7C7B\\uFF0C\\u5B83\\u5B9E\\u73B0\\u4E86 props \\u548C state \\u7684\\u6D45\\u5C42\\u6BD4\\u8F83\\uFF0C\\u4EE5\\u9632\\u6B62\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"React.memo\"}),\"\\uFF1A\\u4E00\\u4E2A\\u9AD8\\u9636\\u7EC4\\u4EF6\\uFF0C\\u5B83\\u4F1A\\u8BB0\\u5FC6\\u7EC4\\u4EF6 render \\u7684\\u7ED3\\u679C\\uFF0C\\u4EE5\\u907F\\u514D\\u5728 props \\u672A\\u66F4\\u6539\\u7684\\u60C5\\u51B5\\u4E0B\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"useMemo \\u548C useCallback\"}),\"\\uFF1A\\u7528\\u4E8E\\u8BB0\\u5FC6\\u503C\\u548C\\u51FD\\u6570\\u7684 Hook\\uFF0C\\u4EE5\\u9632\\u6B62\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/render-and-commit\",children:\"React documentation on rendering\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React documentation on state\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react/memo\",children:\"React.memo\"})}),`\n`]})]})}function s(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(a,{...r})}):a(r)}return f(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-does-the-dependency-array-of-useeffect-affect/en-US.json b/apps/web/src/__generated__/questions/quiz/what-does-the-dependency-array-of-useeffect-affect/en-US.json
index 7b5480618..05397b93b 100644
--- a/apps/web/src/__generated__/questions/quiz/what-does-the-dependency-array-of-useeffect-affect/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-does-the-dependency-array-of-useeffect-affect/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-does-the-dependency-array-of-useeffect-affect/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var o=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var m=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),g=(c,e)=>{for(var r in e)i(c,r,{get:e[r],enumerable:!0})},a=(c,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of u(e))!y.call(c,t)&&t!==r&&i(c,t,{get:()=>e[t],enumerable:!(d=f(e,t))||d.enumerable});return c};var v=(c,e,r)=>(r=c!=null?o(p(c)):{},a(e||!c||!c.__esModule?i(r,\"default\",{value:c,enumerable:!0}):r,c)),E=c=>a(i({},\"__esModule\",{value:!0}),c);var h=m((x,l)=>{l.exports=_jsx_runtime});var k={};g(k,{default:()=>j,frontmatter:()=>T});var n=v(h()),T={title:\"What does the dependency array of `useEffect` affect?\"};function s(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The dependency array of \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" determines when the effect should re-run. If the array is empty, the effect runs only once after the initial render. If it contains variables, the effect runs whenever any of those variables change. If omitted, the effect runs after every render.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What does the dependency array of \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" affect?\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Introduction to \",(0,n.jsx)(e.code,{children:\"useEffect\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" hook in React is used to perform side effects in functional components. These side effects can include data fetching, subscriptions, or manually changing the DOM. The \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" hook takes two arguments: a function that contains the side effect logic and an optional dependency array.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Dependency array\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The dependency array is the second argument to the \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" hook. It is an array of values that the effect depends on. React uses this array to determine when to re-run the effect.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  // Side effect logic here\n}, [dependency1, dependency2]);\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"How the dependency array affects \",(0,n.jsx)(e.code,{children:\"useEffect\"})]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsxs)(e.strong,{children:[\"Empty dependency array (\",(0,n.jsx)(e.code,{children:\"[]\"}),\")\"]}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The effect runs only once after the initial render.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"This is similar to the behavior of \",(0,n.jsx)(e.code,{children:\"componentDidMount\"}),\" in class components.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  // This code runs only once after the initial render\n}, []);\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Dependency array with variables\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The effect runs after the initial render and whenever any of the specified dependencies change.\"}),`\n`,(0,n.jsx)(e.li,{children:\"React performs a shallow comparison of the dependencies to determine if they have changed.\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  // This code runs after the initial render and whenever dependency1 or dependency2 changes\n}, [dependency1, dependency2]);\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"No dependency array\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The effect runs after every render.\"}),`\n`,(0,n.jsx)(e.li,{children:\"This can lead to performance issues if the effect is expensive.\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  // This code runs after every render\n});\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Common pitfalls\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Stale closures\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"If you use state or props inside the effect without including them in the dependency array, you might end up with stale values.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Always include all state and props that the effect depends on in the dependency array.\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [count, setCount] = useState(0);\n\nuseEffect(() => {\n  const handle = setInterval(() => {\n    console.log(count); // This might log stale values if \\`count\\` is not in the dependency array\n  }, 1000);\n\n  return () => clearInterval(handle);\n}, [count]); // Ensure \\`count\\` is included in the dependency array\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Functions as dependencies\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Functions are recreated on every render, so including them in the dependency array can cause the effect to run more often than necessary.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" to memoize functions if they need to be included in the dependency array.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const handleClick = useCallback(() => {\n  // Handle click\n}, []);\n\nuseEffect(() => {\n  // This effect will not re-run unnecessarily because \\`handleClick\\` is memoized\n}, [handleClick]);\n`})}),`\n`]}),`\n`]}),`\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://react.dev/reference/react/useEffect\",children:\"React Docs: Using the Effect Hook\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/rules/rules-of-hooks\",children:\"React Docs: Rules of Hooks\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://overreacted.io/a-complete-guide-to-useeffect/\",children:\"Overreacted: A Complete Guide to useEffect\"})}),`\n`]})]})}function w(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(s,c)})):s(c)}var j=w;return E(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var f=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),v=(r,e)=>{for(var c in e)i(r,c,{get:e[c],enumerable:!0})},a=(r,e,c,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of p(e))!m.call(r,t)&&t!==c&&i(r,t,{get:()=>e[t],enumerable:!(d=u(e,t))||d.enumerable});return r};var E=(r,e,c)=>(c=r!=null?f(y(r)):{},a(e||!r||!r.__esModule?i(c,\"default\",{value:r,enumerable:!0}):c,r)),T=r=>a(i({},\"__esModule\",{value:!0}),r);var h=g((x,l)=>{l.exports=_jsx_runtime});var k={};v(k,{default:()=>o,frontmatter:()=>w});var n=E(h()),w={title:\"What does the dependency array of `useEffect` affect?\"};function s(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The dependency array of \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" determines when the effect should re-run. If the array is empty, the effect runs only once after the initial render. If it contains variables, the effect runs whenever any of those variables change. If omitted, the effect runs after every render.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What does the dependency array of \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" affect?\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Introduction to \",(0,n.jsx)(e.code,{children:\"useEffect\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" hook in React is used to perform side effects in functional components. These side effects can include data fetching, subscriptions, or manually changing the DOM. The \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" hook takes two arguments: a function that contains the side effect logic and an optional dependency array.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Dependency array\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The dependency array is the second argument to the \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" hook. It is an array of values that the effect depends on. React uses this array to determine when to re-run the effect.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  // Side effect logic here\n}, [dependency1, dependency2]);\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"How the dependency array affects \",(0,n.jsx)(e.code,{children:\"useEffect\"})]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsxs)(e.strong,{children:[\"Empty dependency array (\",(0,n.jsx)(e.code,{children:\"[]\"}),\")\"]}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The effect runs only once after the initial render.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"This is similar to the behavior of \",(0,n.jsx)(e.code,{children:\"componentDidMount\"}),\" in class components.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  // This code runs only once after the initial render\n}, []);\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Dependency array with variables\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The effect runs after the initial render and whenever any of the specified dependencies change.\"}),`\n`,(0,n.jsx)(e.li,{children:\"React performs a shallow comparison of the dependencies to determine if they have changed.\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  // This code runs after the initial render and whenever dependency1 or dependency2 changes\n}, [dependency1, dependency2]);\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"No dependency array\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The effect runs after every render.\"}),`\n`,(0,n.jsx)(e.li,{children:\"This can lead to performance issues if the effect is expensive.\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  // This code runs after every render\n});\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Common pitfalls\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Stale closures\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"If you use state or props inside the effect without including them in the dependency array, you might end up with stale values.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Always include all state and props that the effect depends on in the dependency array.\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [count, setCount] = useState(0);\n\nuseEffect(() => {\n  const handle = setInterval(() => {\n    console.log(count); // This might log stale values if \\`count\\` is not in the dependency array\n  }, 1000);\n\n  return () => clearInterval(handle);\n}, [count]); // Ensure \\`count\\` is included in the dependency array\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Functions as dependencies\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Functions are recreated on every render, so including them in the dependency array can cause the effect to run more often than necessary.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" to memoize functions if they need to be included in the dependency array.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const handleClick = useCallback(() => {\n  // Handle click\n}, []);\n\nuseEffect(() => {\n  // This effect will not re-run unnecessarily because \\`handleClick\\` is memoized\n}, [handleClick]);\n`})}),`\n`]}),`\n`]}),`\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://react.dev/reference/react/useEffect\",children:\"React Docs: Using the Effect Hook\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/rules/rules-of-hooks\",children:\"React Docs: Rules of Hooks\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://overreacted.io/a-complete-guide-to-useeffect/\",children:\"Overreacted: A Complete Guide to useEffect\"})}),`\n`]})]})}function o(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(s,{...r})}):s(r)}return T(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-does-the-dependency-array-of-useeffect-affect/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-does-the-dependency-array-of-useeffect-affect/zh-CN.json
index 82251d714..4e37bb635 100644
--- a/apps/web/src/__generated__/questions/quiz/what-does-the-dependency-array-of-useeffect-affect/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-does-the-dependency-array-of-useeffect-affect/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-does-the-dependency-array-of-useeffect-affect/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var f=Object.create;var t=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),E=(c,e)=>{for(var l in e)t(c,l,{get:e[l],enumerable:!0})},i=(c,e,l,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!g.call(c,r)&&r!==l&&t(c,r,{get:()=>e[r],enumerable:!(d=o(e,r))||d.enumerable});return c};var j=(c,e,l)=>(l=c!=null?f(p(c)):{},i(e||!c||!c.__esModule?t(l,\"default\",{value:c,enumerable:!0}):l,c)),v=c=>i(t({},\"__esModule\",{value:!0}),c);var s=m((R,h)=>{h.exports=_jsx_runtime});var y={};E(y,{default:()=>k,frontmatter:()=>x});var n=j(s()),x={title:\"useEffect \\u7684\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u4F1A\\u5F71\\u54CD\\u4EC0\\u4E48\\uFF1F\"};function a(c){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",code:\"code\",pre:\"pre\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"useEffect \\u7684\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u51B3\\u5B9A\\u4E86 effect \\u5E94\\u8BE5\\u4F55\\u65F6\\u91CD\\u65B0\\u8FD0\\u884C\\u3002\\u5982\\u679C\\u6570\\u7EC4\\u4E3A\\u7A7A\\uFF0C\\u5219 effect \\u4EC5\\u5728\\u521D\\u59CB\\u6E32\\u67D3\\u540E\\u8FD0\\u884C\\u4E00\\u6B21\\u3002\\u5982\\u679C\\u5B83\\u5305\\u542B\\u53D8\\u91CF\\uFF0C\\u5219 effect \\u5728\\u4EFB\\u4F55\\u8FD9\\u4E9B\\u53D8\\u91CF\\u66F4\\u6539\\u65F6\\u8FD0\\u884C\\u3002\\u5982\\u679C\\u7701\\u7565\\uFF0C\\u5219 effect \\u5728\\u6BCF\\u6B21\\u6E32\\u67D3\\u540E\\u8FD0\\u884C\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"useEffect \\u7684\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u4F1A\\u5F71\\u54CD\\u4EC0\\u4E48\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"useEffect \\u7B80\\u4ECB\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u94A9\\u5B50\\u7528\\u4E8E\\u5728\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E2D\\u6267\\u884C\\u526F\\u4F5C\\u7528\\u3002\\u8FD9\\u4E9B\\u526F\\u4F5C\\u7528\\u53EF\\u4EE5\\u5305\\u62EC\\u6570\\u636E\\u83B7\\u53D6\\u3001\\u8BA2\\u9605\\u6216\\u624B\\u52A8\\u66F4\\u6539 DOM\\u3002\",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u94A9\\u5B50\\u63A5\\u53D7\\u4E24\\u4E2A\\u53C2\\u6570\\uFF1A\\u4E00\\u4E2A\\u5305\\u542B\\u526F\\u4F5C\\u7528\\u903B\\u8F91\\u7684\\u51FD\\u6570\\u548C\\u4E00\\u4E2A\\u53EF\\u9009\\u7684\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u662F \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u94A9\\u5B50\\u7684\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u3002\\u5B83\\u662F\\u4E00\\u4E2A effect \\u6240\\u4F9D\\u8D56\\u7684\\u503C\\u7684\\u6570\\u7EC4\\u3002React \\u4F7F\\u7528\\u6B64\\u6570\\u7EC4\\u6765\\u786E\\u5B9A\\u4F55\\u65F6\\u91CD\\u65B0\\u8FD0\\u884C effect\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  // \\u5728\\u8FD9\\u91CC\\u7F16\\u5199\\u526F\\u4F5C\\u7528\\u903B\\u8F91\n}, [dependency1, dependency2]);\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u5982\\u4F55\\u5F71\\u54CD \",(0,n.jsx)(e.code,{children:\"useEffect\"})]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsxs)(e.strong,{children:[\"\\u7A7A\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4 (\",(0,n.jsx)(e.code,{children:\"[]\"}),\")\"]}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"effect \\u4EC5\\u5728\\u521D\\u59CB\\u6E32\\u67D3\\u540E\\u8FD0\\u884C\\u4E00\\u6B21\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u8FD9\\u7C7B\\u4F3C\\u4E8E\\u7C7B\\u7EC4\\u4EF6\\u4E2D \",(0,n.jsx)(e.code,{children:\"componentDidMount\"}),\" \\u7684\\u884C\\u4E3A\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  // \\u6B64\\u4EE3\\u7801\\u4EC5\\u5728\\u521D\\u59CB\\u6E32\\u67D3\\u540E\\u8FD0\\u884C\\u4E00\\u6B21\n}, []);\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u5E26\\u6709\\u53D8\\u91CF\\u7684\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"effect \\u5728\\u521D\\u59CB\\u6E32\\u67D3\\u540E\\u8FD0\\u884C\\uFF0C\\u5E76\\u5728\\u4EFB\\u4F55\\u6307\\u5B9A\\u7684\\u4F9D\\u8D56\\u9879\\u66F4\\u6539\\u65F6\\u8FD0\\u884C\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"React \\u5BF9\\u4F9D\\u8D56\\u9879\\u8FDB\\u884C\\u6D45\\u5C42\\u6BD4\\u8F83\\uFF0C\\u4EE5\\u786E\\u5B9A\\u5B83\\u4EEC\\u662F\\u5426\\u5DF2\\u66F4\\u6539\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  // \\u6B64\\u4EE3\\u7801\\u5728\\u521D\\u59CB\\u6E32\\u67D3\\u540E\\u8FD0\\u884C\\uFF0C\\u5E76\\u5728 dependency1 \\u6216 dependency2 \\u66F4\\u6539\\u65F6\\u8FD0\\u884C\n}, [dependency1, dependency2]);\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u6CA1\\u6709\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"effect \\u5728\\u6BCF\\u6B21\\u6E32\\u67D3\\u540E\\u8FD0\\u884C\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5982\\u679C effect \\u4EE3\\u4EF7\\u9AD8\\u6602\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u6027\\u80FD\\u95EE\\u9898\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  // \\u6B64\\u4EE3\\u7801\\u5728\\u6BCF\\u6B21\\u6E32\\u67D3\\u540E\\u8FD0\\u884C\n});\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5E38\\u89C1\\u9677\\u9631\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u8FC7\\u65F6\\u7684\\u95ED\\u5305\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u5982\\u679C\\u4F60\\u5728 effect \\u5185\\u90E8\\u4F7F\\u7528\\u72B6\\u6001\\u6216 props\\uFF0C\\u800C\\u6CA1\\u6709\\u5C06\\u5B83\\u4EEC\\u5305\\u542B\\u5728\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u4E2D\\uFF0C\\u4F60\\u53EF\\u80FD\\u4F1A\\u5F97\\u5230\\u8FC7\\u65F6\\u7684\\u503C\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u59CB\\u7EC8\\u5C06 effect \\u6240\\u4F9D\\u8D56\\u7684\\u6240\\u6709\\u72B6\\u6001\\u548C props \\u5305\\u542B\\u5728\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u4E2D\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [count, setCount] = useState(0);\n\nuseEffect(() => {\n  const handle = setInterval(() => {\n    console.log(count); // \\u5982\\u679C \\`count\\` \\u4E0D\\u5728\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u4E2D\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u8BB0\\u5F55\\u8FC7\\u65F6\\u7684\\u503C\n  }, 1000);\n\n  return () => clearInterval(handle);\n}, [count]); // \\u786E\\u4FDD \\`count\\` \\u5305\\u542B\\u5728\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u4E2D\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u51FD\\u6570\\u4F5C\\u4E3A\\u4F9D\\u8D56\\u9879\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u51FD\\u6570\\u5728\\u6BCF\\u6B21\\u6E32\\u67D3\\u65F6\\u90FD\\u4F1A\\u91CD\\u65B0\\u521B\\u5EFA\\uFF0C\\u56E0\\u6B64\\u5C06\\u5B83\\u4EEC\\u5305\\u542B\\u5728\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u4E2D\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4 effect \\u8FD0\\u884C\\u7684\\u9891\\u7387\\u8D85\\u8FC7\\u5FC5\\u8981\\u6B21\\u6570\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5982\\u679C\\u9700\\u8981\\u5C06\\u51FD\\u6570\\u5305\\u542B\\u5728\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u4E2D\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" \\u6765\\u8BB0\\u5FC6\\u5316\\u51FD\\u6570\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const handleClick = useCallback(() => {\n  // \\u5904\\u7406\\u70B9\\u51FB\\u4E8B\\u4EF6\n}, []);\n\nuseEffect(() => {\n  // \\u6B64 effect \\u4E0D\\u4F1A\\u4E0D\\u5FC5\\u8981\\u5730\\u91CD\\u65B0\\u8FD0\\u884C\\uFF0C\\u56E0\\u4E3A \\`handleClick\\` \\u5DF2\\u88AB\\u8BB0\\u5FC6\\u5316\n}, [handleClick]);\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/useEffect\",children:\"React Docs: Using the Effect Hook\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/rules/rules-of-hooks\",children:\"React Docs: Rules of Hooks\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://overreacted.io/a-complete-guide-to-useeffect/\",children:\"Overreacted: A Complete Guide to useEffect\"})}),`\n`]})]})}function C(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(a,c)})):a(c)}var k=C;return v(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var a=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var E=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),v=(c,e)=>{for(var l in e)t(c,l,{get:e[l],enumerable:!0})},i=(c,e,l,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!m.call(c,r)&&r!==l&&t(c,r,{get:()=>e[r],enumerable:!(d=u(e,r))||d.enumerable});return c};var j=(c,e,l)=>(l=c!=null?a(g(c)):{},i(e||!c||!c.__esModule?t(l,\"default\",{value:c,enumerable:!0}):l,c)),x=c=>i(t({},\"__esModule\",{value:!0}),c);var s=E((D,h)=>{h.exports=_jsx_runtime});var k={};v(k,{default:()=>o,frontmatter:()=>C});var n=j(s()),C={title:\"useEffect \\u7684\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u4F1A\\u5F71\\u54CD\\u4EC0\\u4E48\\uFF1F\"};function f(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"useEffect \\u7684\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u51B3\\u5B9A\\u4E86 effect \\u5E94\\u8BE5\\u4F55\\u65F6\\u91CD\\u65B0\\u8FD0\\u884C\\u3002\\u5982\\u679C\\u6570\\u7EC4\\u4E3A\\u7A7A\\uFF0C\\u5219 effect \\u4EC5\\u5728\\u521D\\u59CB\\u6E32\\u67D3\\u540E\\u8FD0\\u884C\\u4E00\\u6B21\\u3002\\u5982\\u679C\\u5B83\\u5305\\u542B\\u53D8\\u91CF\\uFF0C\\u5219 effect \\u5728\\u4EFB\\u4F55\\u8FD9\\u4E9B\\u53D8\\u91CF\\u66F4\\u6539\\u65F6\\u8FD0\\u884C\\u3002\\u5982\\u679C\\u7701\\u7565\\uFF0C\\u5219 effect \\u5728\\u6BCF\\u6B21\\u6E32\\u67D3\\u540E\\u8FD0\\u884C\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"useEffect \\u7684\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u4F1A\\u5F71\\u54CD\\u4EC0\\u4E48\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"useEffect \\u7B80\\u4ECB\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u94A9\\u5B50\\u7528\\u4E8E\\u5728\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E2D\\u6267\\u884C\\u526F\\u4F5C\\u7528\\u3002\\u8FD9\\u4E9B\\u526F\\u4F5C\\u7528\\u53EF\\u4EE5\\u5305\\u62EC\\u6570\\u636E\\u83B7\\u53D6\\u3001\\u8BA2\\u9605\\u6216\\u624B\\u52A8\\u66F4\\u6539 DOM\\u3002\",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u94A9\\u5B50\\u63A5\\u53D7\\u4E24\\u4E2A\\u53C2\\u6570\\uFF1A\\u4E00\\u4E2A\\u5305\\u542B\\u526F\\u4F5C\\u7528\\u903B\\u8F91\\u7684\\u51FD\\u6570\\u548C\\u4E00\\u4E2A\\u53EF\\u9009\\u7684\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u662F \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u94A9\\u5B50\\u7684\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u3002\\u5B83\\u662F\\u4E00\\u4E2A effect \\u6240\\u4F9D\\u8D56\\u7684\\u503C\\u7684\\u6570\\u7EC4\\u3002React \\u4F7F\\u7528\\u6B64\\u6570\\u7EC4\\u6765\\u786E\\u5B9A\\u4F55\\u65F6\\u91CD\\u65B0\\u8FD0\\u884C effect\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  // \\u5728\\u8FD9\\u91CC\\u7F16\\u5199\\u526F\\u4F5C\\u7528\\u903B\\u8F91\n}, [dependency1, dependency2]);\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u5982\\u4F55\\u5F71\\u54CD \",(0,n.jsx)(e.code,{children:\"useEffect\"})]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsxs)(e.strong,{children:[\"\\u7A7A\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4 (\",(0,n.jsx)(e.code,{children:\"[]\"}),\")\"]}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"effect \\u4EC5\\u5728\\u521D\\u59CB\\u6E32\\u67D3\\u540E\\u8FD0\\u884C\\u4E00\\u6B21\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u8FD9\\u7C7B\\u4F3C\\u4E8E\\u7C7B\\u7EC4\\u4EF6\\u4E2D \",(0,n.jsx)(e.code,{children:\"componentDidMount\"}),\" \\u7684\\u884C\\u4E3A\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  // \\u6B64\\u4EE3\\u7801\\u4EC5\\u5728\\u521D\\u59CB\\u6E32\\u67D3\\u540E\\u8FD0\\u884C\\u4E00\\u6B21\n}, []);\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u5E26\\u6709\\u53D8\\u91CF\\u7684\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"effect \\u5728\\u521D\\u59CB\\u6E32\\u67D3\\u540E\\u8FD0\\u884C\\uFF0C\\u5E76\\u5728\\u4EFB\\u4F55\\u6307\\u5B9A\\u7684\\u4F9D\\u8D56\\u9879\\u66F4\\u6539\\u65F6\\u8FD0\\u884C\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"React \\u5BF9\\u4F9D\\u8D56\\u9879\\u8FDB\\u884C\\u6D45\\u5C42\\u6BD4\\u8F83\\uFF0C\\u4EE5\\u786E\\u5B9A\\u5B83\\u4EEC\\u662F\\u5426\\u5DF2\\u66F4\\u6539\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  // \\u6B64\\u4EE3\\u7801\\u5728\\u521D\\u59CB\\u6E32\\u67D3\\u540E\\u8FD0\\u884C\\uFF0C\\u5E76\\u5728 dependency1 \\u6216 dependency2 \\u66F4\\u6539\\u65F6\\u8FD0\\u884C\n}, [dependency1, dependency2]);\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u6CA1\\u6709\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"effect \\u5728\\u6BCF\\u6B21\\u6E32\\u67D3\\u540E\\u8FD0\\u884C\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5982\\u679C effect \\u4EE3\\u4EF7\\u9AD8\\u6602\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u6027\\u80FD\\u95EE\\u9898\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  // \\u6B64\\u4EE3\\u7801\\u5728\\u6BCF\\u6B21\\u6E32\\u67D3\\u540E\\u8FD0\\u884C\n});\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5E38\\u89C1\\u9677\\u9631\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u8FC7\\u65F6\\u7684\\u95ED\\u5305\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u5982\\u679C\\u4F60\\u5728 effect \\u5185\\u90E8\\u4F7F\\u7528\\u72B6\\u6001\\u6216 props\\uFF0C\\u800C\\u6CA1\\u6709\\u5C06\\u5B83\\u4EEC\\u5305\\u542B\\u5728\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u4E2D\\uFF0C\\u4F60\\u53EF\\u80FD\\u4F1A\\u5F97\\u5230\\u8FC7\\u65F6\\u7684\\u503C\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u59CB\\u7EC8\\u5C06 effect \\u6240\\u4F9D\\u8D56\\u7684\\u6240\\u6709\\u72B6\\u6001\\u548C props \\u5305\\u542B\\u5728\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u4E2D\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [count, setCount] = useState(0);\n\nuseEffect(() => {\n  const handle = setInterval(() => {\n    console.log(count); // \\u5982\\u679C \\`count\\` \\u4E0D\\u5728\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u4E2D\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u8BB0\\u5F55\\u8FC7\\u65F6\\u7684\\u503C\n  }, 1000);\n\n  return () => clearInterval(handle);\n}, [count]); // \\u786E\\u4FDD \\`count\\` \\u5305\\u542B\\u5728\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u4E2D\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u51FD\\u6570\\u4F5C\\u4E3A\\u4F9D\\u8D56\\u9879\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u51FD\\u6570\\u5728\\u6BCF\\u6B21\\u6E32\\u67D3\\u65F6\\u90FD\\u4F1A\\u91CD\\u65B0\\u521B\\u5EFA\\uFF0C\\u56E0\\u6B64\\u5C06\\u5B83\\u4EEC\\u5305\\u542B\\u5728\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u4E2D\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4 effect \\u8FD0\\u884C\\u7684\\u9891\\u7387\\u8D85\\u8FC7\\u5FC5\\u8981\\u6B21\\u6570\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5982\\u679C\\u9700\\u8981\\u5C06\\u51FD\\u6570\\u5305\\u542B\\u5728\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u4E2D\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" \\u6765\\u8BB0\\u5FC6\\u5316\\u51FD\\u6570\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const handleClick = useCallback(() => {\n  // \\u5904\\u7406\\u70B9\\u51FB\\u4E8B\\u4EF6\n}, []);\n\nuseEffect(() => {\n  // \\u6B64 effect \\u4E0D\\u4F1A\\u4E0D\\u5FC5\\u8981\\u5730\\u91CD\\u65B0\\u8FD0\\u884C\\uFF0C\\u56E0\\u4E3A \\`handleClick\\` \\u5DF2\\u88AB\\u8BB0\\u5FC6\\u5316\n}, [handleClick]);\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/useEffect\",children:\"React Docs: Using the Effect Hook\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/rules/rules-of-hooks\",children:\"React Docs: Rules of Hooks\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://overreacted.io/a-complete-guide-to-useeffect/\",children:\"Overreacted: A Complete Guide to useEffect\"})}),`\n`]})]})}function o(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(f,{...c})}):f(c)}return x(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/en-US.json b/apps/web/src/__generated__/questions/quiz/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/en-US.json
index 9d7ac1cc5..005a4ec20 100644
--- a/apps/web/src/__generated__/questions/quiz/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var o in e)s(n,o,{get:e[o],enumerable:!0})},a=(n,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of h(e))!g.call(n,r)&&r!==o&&s(n,r,{get:()=>e[r],enumerable:!(i=m(e,r))||i.enumerable});return n};var x=(n,e,o)=>(o=n!=null?d(p(n)):{},a(e||!n||!n.__esModule?s(o,\"default\",{value:n,enumerable:!0}):o,n)),y=n=>a(s({},\"__esModule\",{value:!0}),n);var c=f((B,l)=>{l.exports=_jsx_runtime});var k={};b(k,{default:()=>j,frontmatter:()=>w});var t=x(c()),w={title:\"What existing CSS frameworks have you used locally, or in production?\",subtitle:\"How would you change/improve them?\"};function u(n){let e=Object.assign({ul:\"ul\",li:\"li\",strong:\"strong\"},n.components);return(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Bootstrap\"}),\": Slow release cycle. Bootstrap 4 has been in alpha for almost 2 years. Future versions of Bootstrap should include a spinner button component, as it is widely used.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Semantic UI\"}),\": Source code structure makes theme customization extremely hard to understand. Its unconventional theming system is a pain to customize. Hardcoded config path within the vendor library. Not well-designed for overriding variables unlike in Bootstrap.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Bulma\"}),\": A lot of non-semantic and superfluous classes and markup required. Not backward-compatible. Upgrading versions breaks the app in subtle manners.\"]}),`\n`]})}function v(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(u,n)})):u(n)}var j=v;return y(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),y=(n,e)=>{for(var o in e)s(n,o,{get:e[o],enumerable:!0})},a=(n,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!f.call(n,r)&&r!==o&&s(n,r,{get:()=>e[r],enumerable:!(i=h(e,r))||i.enumerable});return n};var b=(n,e,o)=>(o=n!=null?m(g(n)):{},a(e||!n||!n.__esModule?s(o,\"default\",{value:n,enumerable:!0}):o,n)),w=n=>a(s({},\"__esModule\",{value:!0}),n);var c=x((j,l)=>{l.exports=_jsx_runtime});var k={};y(k,{default:()=>d,frontmatter:()=>v});var t=b(c()),v={title:\"What existing CSS frameworks have you used locally, or in production?\",subtitle:\"How would you change/improve them?\"};function u(n){let e={li:\"li\",strong:\"strong\",ul:\"ul\",...n.components};return(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Bootstrap\"}),\": Slow release cycle. Bootstrap 4 has been in alpha for almost 2 years. Future versions of Bootstrap should include a spinner button component, as it is widely used.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Semantic UI\"}),\": Source code structure makes theme customization extremely hard to understand. Its unconventional theming system is a pain to customize. Hardcoded config path within the vendor library. Not well-designed for overriding variables unlike in Bootstrap.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Bulma\"}),\": A lot of non-semantic and superfluous classes and markup required. Not backward-compatible. Upgrading versions breaks the app in subtle manners.\"]}),`\n`]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(u,{...n})}):u(n)}return w(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/pt-BR.json
index 3efc8208d..b577939bc 100644
--- a/apps/web/src/__generated__/questions/quiz/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var v=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var n in e)r(o,n,{get:e[n],enumerable:!0})},i=(o,e,n,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!h.call(o,a)&&a!==n&&r(o,a,{get:()=>e[a],enumerable:!(s=m(e,a))||s.enumerable});return o};var g=(o,e,n)=>(n=o!=null?u(f(o)):{},i(e||!o||!o.__esModule?r(n,\"default\",{value:o,enumerable:!0}):n,o)),b=o=>i(r({},\"__esModule\",{value:!0}),o);var c=v((M,l)=>{l.exports=_jsx_runtime});var _={};x(_,{default:()=>B,frontmatter:()=>j});var t=g(c()),j={title:\"Quais frameworks CSS existentes voc\\xEA usou localmente ou em produ\\xE7\\xE3o?\",subtitle:\"Como voc\\xEA mudaria/melhoraria eles?\"};function d(o){let e=Object.assign({ul:\"ul\",li:\"li\",strong:\"strong\"},o.components);return(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Bootstrap\"}),\": Ciclo de lan\\xE7amento lento. Bootstrap 4 est\\xE1 em alfa h\\xE1 quase 2 anos. As vers\\xF5es futuras do Bootstrap deveriam incluir um componente de bot\\xE3o spinner, j\\xE1 que ele \\xE9 amplamente utilizado.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Semantic UI\"}),\":: A estrutura do C\\xF3digo Fonte torna a personaliza\\xE7\\xE3o do tema extremamente dif\\xEDcil de entender. Seu sistema de theming n\\xE3o convencional \\xE9 dif\\xEDcil de personalizar. Caminho de configura\\xE7\\xE3o hardcoded dentro da biblioteca do fornecedor (vendor). N\\xE3o \\xE9 bem projetado para substituir vari\\xE1veis, ao contr\\xE1rio do Bootstrap.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Bulma\"}),\": Muitas classes e marca\\xE7\\xF5es n\\xE3o sem\\xE2nticas e sup\\xE9rfluas s\\xE3o necess\\xE1rias. N\\xE3o \\xE9 compat\\xEDvel com vers\\xF5es anteriores. Atualizar as vers\\xF5es do Bulma pode quebrar o aplicativo de maneiras sutis.\"]}),`\n`]})}function C(o={}){let{wrapper:e}=o.components||{};return e?(0,t.jsx)(e,Object.assign({},o,{children:(0,t.jsx)(d,o)})):d(o)}var B=C;return b(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var x=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),g=(o,e)=>{for(var n in e)a(o,n,{get:e[n],enumerable:!0})},i=(o,e,n,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!v.call(o,r)&&r!==n&&a(o,r,{get:()=>e[r],enumerable:!(s=p(e,r))||s.enumerable});return o};var b=(o,e,n)=>(n=o!=null?m(h(o)):{},i(e||!o||!o.__esModule?a(n,\"default\",{value:o,enumerable:!0}):n,o)),j=o=>i(a({},\"__esModule\",{value:!0}),o);var c=x((z,l)=>{l.exports=_jsx_runtime});var B={};g(B,{default:()=>u,frontmatter:()=>C});var t=b(c()),C={title:\"Quais frameworks CSS existentes voc\\xEA usou localmente ou em produ\\xE7\\xE3o?\",subtitle:\"Como voc\\xEA mudaria/melhoraria eles?\"};function d(o){let e={li:\"li\",strong:\"strong\",ul:\"ul\",...o.components};return(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Bootstrap\"}),\": Ciclo de lan\\xE7amento lento. Bootstrap 4 est\\xE1 em alfa h\\xE1 quase 2 anos. As vers\\xF5es futuras do Bootstrap deveriam incluir um componente de bot\\xE3o spinner, j\\xE1 que ele \\xE9 amplamente utilizado.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Semantic UI\"}),\":: A estrutura do C\\xF3digo Fonte torna a personaliza\\xE7\\xE3o do tema extremamente dif\\xEDcil de entender. Seu sistema de theming n\\xE3o convencional \\xE9 dif\\xEDcil de personalizar. Caminho de configura\\xE7\\xE3o hardcoded dentro da biblioteca do fornecedor (vendor). N\\xE3o \\xE9 bem projetado para substituir vari\\xE1veis, ao contr\\xE1rio do Bootstrap.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Bulma\"}),\": Muitas classes e marca\\xE7\\xF5es n\\xE3o sem\\xE2nticas e sup\\xE9rfluas s\\xE3o necess\\xE1rias. N\\xE3o \\xE9 compat\\xEDvel com vers\\xF5es anteriores. Atualizar as vers\\xF5es do Bulma pode quebrar o aplicativo de maneiras sutis.\"]}),`\n`]})}function u(o={}){let{wrapper:e}=o.components||{};return e?(0,t.jsx)(e,{...o,children:(0,t.jsx)(d,{...o})}):d(o)}return j(B);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/zh-CN.json
index b1f3a5fcc..7e91ca0f4 100644
--- a/apps/web/src/__generated__/questions/quiz/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var g=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),j=(n,t)=>{for(var e in t)s(n,e,{get:t[e],enumerable:!0})},l=(n,t,e,i)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of m(t))!p.call(n,r)&&r!==e&&s(n,r,{get:()=>t[r],enumerable:!(i=h(t,r))||i.enumerable});return n};var _=(n,t,e)=>(e=n!=null?d(x(n)):{},l(t||!n||!n.__esModule?s(e,\"default\",{value:n,enumerable:!0}):e,n)),f=n=>l(s({},\"__esModule\",{value:!0}),n);var a=g((D,c)=>{c.exports=_jsx_runtime});var M={};j(M,{default:()=>C,frontmatter:()=>B});var o=_(a()),B={title:\"\\u60A8\\u5728\\u672C\\u5730\\u6216\\u751F\\u4EA7\\u4E2D\\u4F7F\\u7528\\u4E86\\u54EA\\u4E9B\\u73B0\\u6709\\u7684 CSS \\u6846\\u67B6\\uFF1F\",subtitle:\"\\u60A8\\u5C06\\u5982\\u4F55\\u66F4\\u6539/\\u6539\\u8FDB\\u5B83\\u4EEC\\uFF1F\"};function u(n){let t=Object.assign({ul:\"ul\",li:\"li\",strong:\"strong\"},n.components);return(0,o.jsxs)(t.ul,{children:[`\n`,(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.strong,{children:\"Bootstrap\"}),\": \\u53D1\\u5E03\\u5468\\u671F\\u6162\\u3002Bootstrap 4 \\u5DF2\\u7ECF\\u5904\\u4E8E alpha \\u72B6\\u6001\\u5C06\\u8FD1 2 \\u5E74\\u3002Bootstrap \\u7684\\u672A\\u6765\\u7248\\u672C\\u5E94\\u8BE5\\u5305\\u542B\\u4E00\\u4E2A\\u5FAE\\u8C03\\u5668\\u6309\\u94AE\\u7EC4\\u4EF6\\uFF0C\\u56E0\\u4E3A\\u5B83\\u88AB\\u5E7F\\u6CDB\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.strong,{children:\"Semantic UI\"}),\": \\u6E90\\u4EE3\\u7801\\u7ED3\\u6784\\u4F7F\\u5F97\\u4E3B\\u9898\\u5B9A\\u5236\\u6781\\u96BE\\u7406\\u89E3\\u3002\\u5B83\\u975E\\u4F20\\u7EDF\\u7684\\u4E3B\\u9898\\u7CFB\\u7EDF\\u96BE\\u4EE5\\u5B9A\\u5236\\u3002\\u4F9B\\u5E94\\u5546\\u5E93\\u4E2D\\u786C\\u7F16\\u7801\\u7684\\u914D\\u7F6E\\u8DEF\\u5F84\\u3002\\u4E0D\\u50CF Bootstrap \\u90A3\\u6837\\uFF0C\\u4E0D\\u64C5\\u957F\\u8986\\u76D6\\u53D8\\u91CF\\u3002\"]}),`\n`,(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.strong,{children:\"Bulma\"}),\": \\u9700\\u8981\\u5927\\u91CF\\u975E\\u8BED\\u4E49\\u548C\\u591A\\u4F59\\u7684\\u7C7B\\u548C\\u6807\\u8BB0\\u3002\\u4E0D\\u5411\\u540E\\u517C\\u5BB9\\u3002\\u5347\\u7EA7\\u7248\\u672C\\u4F1A\\u4EE5\\u5FAE\\u5999\\u7684\\u65B9\\u5F0F\\u7834\\u574F\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\"]}),`\n`]})}function b(n={}){let{wrapper:t}=n.components||{};return t?(0,o.jsx)(t,Object.assign({},n,{children:(0,o.jsx)(u,n)})):u(n)}var C=b;return f(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var f=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),g=(n,t)=>{for(var r in t)s(n,r,{get:t[r],enumerable:!0})},i=(n,t,r,l)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let e of x(t))!_.call(n,e)&&e!==r&&s(n,e,{get:()=>t[e],enumerable:!(l=m(t,e))||l.enumerable});return n};var j=(n,t,r)=>(r=n!=null?h(p(n)):{},i(t||!n||!n.__esModule?s(r,\"default\",{value:n,enumerable:!0}):r,n)),B=n=>i(s({},\"__esModule\",{value:!0}),n);var a=f((D,c)=>{c.exports=_jsx_runtime});var M={};g(M,{default:()=>d,frontmatter:()=>C});var o=j(a()),C={title:\"\\u60A8\\u5728\\u672C\\u5730\\u6216\\u751F\\u4EA7\\u4E2D\\u4F7F\\u7528\\u4E86\\u54EA\\u4E9B\\u73B0\\u6709\\u7684 CSS \\u6846\\u67B6\\uFF1F\",subtitle:\"\\u60A8\\u5C06\\u5982\\u4F55\\u66F4\\u6539/\\u6539\\u8FDB\\u5B83\\u4EEC\\uFF1F\"};function u(n){let t={li:\"li\",strong:\"strong\",ul:\"ul\",...n.components};return(0,o.jsxs)(t.ul,{children:[`\n`,(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.strong,{children:\"Bootstrap\"}),\": \\u53D1\\u5E03\\u5468\\u671F\\u6162\\u3002Bootstrap 4 \\u5DF2\\u7ECF\\u5904\\u4E8E alpha \\u72B6\\u6001\\u5C06\\u8FD1 2 \\u5E74\\u3002Bootstrap \\u7684\\u672A\\u6765\\u7248\\u672C\\u5E94\\u8BE5\\u5305\\u542B\\u4E00\\u4E2A\\u5FAE\\u8C03\\u5668\\u6309\\u94AE\\u7EC4\\u4EF6\\uFF0C\\u56E0\\u4E3A\\u5B83\\u88AB\\u5E7F\\u6CDB\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.strong,{children:\"Semantic UI\"}),\": \\u6E90\\u4EE3\\u7801\\u7ED3\\u6784\\u4F7F\\u5F97\\u4E3B\\u9898\\u5B9A\\u5236\\u6781\\u96BE\\u7406\\u89E3\\u3002\\u5B83\\u975E\\u4F20\\u7EDF\\u7684\\u4E3B\\u9898\\u7CFB\\u7EDF\\u96BE\\u4EE5\\u5B9A\\u5236\\u3002\\u4F9B\\u5E94\\u5546\\u5E93\\u4E2D\\u786C\\u7F16\\u7801\\u7684\\u914D\\u7F6E\\u8DEF\\u5F84\\u3002\\u4E0D\\u50CF Bootstrap \\u90A3\\u6837\\uFF0C\\u4E0D\\u64C5\\u957F\\u8986\\u76D6\\u53D8\\u91CF\\u3002\"]}),`\n`,(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.strong,{children:\"Bulma\"}),\": \\u9700\\u8981\\u5927\\u91CF\\u975E\\u8BED\\u4E49\\u548C\\u591A\\u4F59\\u7684\\u7C7B\\u548C\\u6807\\u8BB0\\u3002\\u4E0D\\u5411\\u540E\\u517C\\u5BB9\\u3002\\u5347\\u7EA7\\u7248\\u672C\\u4F1A\\u4EE5\\u5FAE\\u5999\\u7684\\u65B9\\u5F0F\\u7834\\u574F\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\"]}),`\n`]})}function d(n={}){let{wrapper:t}=n.components||{};return t?(0,o.jsx)(t,{...n,children:(0,o.jsx)(u,{...n})}):u(n)}return B(M);})();\n;return Component;"
 }
\ No newline at end of file
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 e8cf263e9..71babdafd 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
@@ -34,5 +34,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},c=(t,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!m.call(t,o)&&o!==i&&r(t,o,{get:()=>e[o],enumerable:!(a=d(e,o))||a.enumerable});return t};var b=(t,e,i)=>(i=t!=null?h(f(t)):{},c(e||!t||!t.__esModule?r(i,\"default\",{value:t,enumerable:!0}):i,t)),w=t=>c(r({},\"__esModule\",{value:!0}),t);var l=g((F,s)=>{s.exports=_jsx_runtime});var S={};v(S,{default:()=>y,frontmatter:()=>C});var n=b(l()),C={title:\"What is a closure in JavaScript, and how/why would you use one?\"};function u(t){let e=Object.assign({h2:\"h2\",p:\"p\",a:\"a\",blockquote:\"blockquote\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",strong:\"strong\",hr:\"hr\",ol:\"ol\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In the book \",(0,n.jsx)(e.a,{href:\"https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/scope-closures\",children:`\"You Don't Know JS\"`}),\" (YDKJS) by Kyle Simpson, a closure is defined as follows:\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"Closure is when a function is able to remember and access its lexical scope even when that function is executing outside its lexical scope\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"In simple terms, functions have access to variables that were in their scope at the time of their creation. This is what we call the function's lexical scope. A closure is a function that retains access to these variables even after the outer function has finished executing. This is like the function has a memory of its original environment.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function outerFunction() {\n  const outerVar = 'I am outside of innerFunction';\n\n  function innerFunction() {\n    console.log(outerVar); // \\`innerFunction\\` can still access \\`outerVar\\`.\n  }\n\n  return innerFunction;\n}\n\nconst inner = outerFunction(); // \\`inner\\` now holds a reference to \\`innerFunction\\`.\n\ninner(); // \"I am outside of innerFunction\"\n// Even though \\`outerFunction\\` has completed execution, \\`inner\\` still has access to variables defined inside \\`outerFunction\\`.\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Key points to remember:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Closure occurs when an inner function has access to variables in its outer (lexical) scope, even when the outer function has finished executing.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Closure allows a function to \",(0,n.jsx)(e.strong,{children:\"remember\"}),\" the environment in which it was created, even if that environment is no longer present.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Closures are used extensively in JavaScript, such as in callbacks, event handlers, and asynchronous functions.\"}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Understanding JavaScript closures\"}),`\n`,(0,n.jsx)(e.p,{children:\"In JavaScript, a closure is a function that captures the lexical scope in which it was declared, allowing it to access and manipulate variables from an outer scope even after that scope has been closed.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here's how closures work:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Lexical scoping\"}),\": JavaScript uses lexical scoping, meaning a function's access to variables is determined by its actual location within the source code.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Function creation\"}),\": When a function is created, it keeps a reference to its lexical scope. This scope contains all the local variables that were in-scope at the time the closure was created.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Maintaining state\"}),\": Closures are often used to maintain state in a secure way because the variables captured by the closure are not accessible outside the function.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"ES6 syntax and closures\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"With ES6, closures can be created using arrow functions, which provide a more concise syntax and lexically bind the \",(0,n.jsx)(e.code,{children:\"this\"}),\" value. Here's an example:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const createCounter = () => {\n  let count = 0;\n  return () => {\n    count += 1;\n    return count;\n  };\n};\n\nconst counter = createCounter();\nconsole.log(counter()); // Outputs: 1\nconsole.log(counter()); // Outputs: 2\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Closures in React\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Closures are everywhere. Below code shows a simple example of increasing a counter on a button click. In this code, \",(0,n.jsx)(e.code,{children:\"handleClick\"}),\" forms a closure. It has access to it's outer scope variable \",(0,n.jsx)(e.code,{children:\"count\"}),\" and \",(0,n.jsx)(e.code,{children:\"setCount\"})]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { useState } from 'react';\n\nfunction Counter() {\n  // Define a state variable using the useState hook\n  const [count, setCount] = useState(0);\n\n  // This handleClick function is a closure\n  function handleClick() {\n    // It can access the 'count' state variable\n    setCount(count + 1);\n  }\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={handleClick}>Increment</button>\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <div>\n      <h1>Counter App</h1>\n      <Counter />\n    </div>\n  );\n}\n\nexport default App;\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Why use closures?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Using closures provide the following benefits:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Data encapsulation\"}),\": Closures provide a way to create private variables and functions that can't be accessed from outside the closure. This is useful for hiding implementation details and maintaining state in an encapsulated way.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Functional programming\"}),\": Closures are fundamental in functional programming paradigms, where they are used to create functions that can be passed around and invoked later, retaining access to the scope in which they were created, e.g. \",(0,n.jsx)(e.a,{href:\"https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x\",children:\"partial applications or currying\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Event handlers and callbacks\"}),\": In JavaScript, closures are often used in event handlers and callbacks to maintain state or access variables that were in scope when the handler or callback was defined.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Module patterns\"}),\": Closures enable the \",(0,n.jsx)(e.a,{href:\"https://www.patterns.dev/vanilla/module-pattern\",children:\"module pattern\"}),\" in JavaScript, allowing the creation of modules with private and public parts.\"]}),`\n`]}),`\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/Web/JavaScript/Closures\",children:\"Closures - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/closure\",children:\"Closures - Javascript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://eloquentjavascript.net/03_functions.html\",children:\"Closure - Eloquent Javascript\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/scope-closures\",children:\"You Don't Know JS Yet: Scope & Closures\"})}),`\n`]})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var y=x;return w(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},c=(t,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of f(e))!v.call(t,o)&&o!==i&&r(t,o,{get:()=>e[o],enumerable:!(a=p(e,o))||a.enumerable});return t};var b=(t,e,i)=>(i=t!=null?d(m(t)):{},c(e||!t||!t.__esModule?r(i,\"default\",{value:t,enumerable:!0}):i,t)),C=t=>c(r({},\"__esModule\",{value:!0}),t);var l=g((k,s)=>{s.exports=_jsx_runtime});var y={};w(y,{default:()=>h,frontmatter:()=>x});var n=b(l()),x={title:\"What is a closure in JavaScript, and how/why would you use one?\"};function u(t){let e={a:\"a\",blockquote:\"blockquote\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In the book \",(0,n.jsx)(e.a,{href:\"https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/scope-closures\",children:`\"You Don't Know JS\"`}),\" (YDKJS) by Kyle Simpson, a closure is defined as follows:\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"Closure is when a function is able to remember and access its lexical scope even when that function is executing outside its lexical scope\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"In simple terms, functions have access to variables that were in their scope at the time of their creation. This is what we call the function's lexical scope. A closure is a function that retains access to these variables even after the outer function has finished executing. This is like the function has a memory of its original environment.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function outerFunction() {\n  const outerVar = 'I am outside of innerFunction';\n\n  function innerFunction() {\n    console.log(outerVar); // \\`innerFunction\\` can still access \\`outerVar\\`.\n  }\n\n  return innerFunction;\n}\n\nconst inner = outerFunction(); // \\`inner\\` now holds a reference to \\`innerFunction\\`.\n\ninner(); // \"I am outside of innerFunction\"\n// Even though \\`outerFunction\\` has completed execution, \\`inner\\` still has access to variables defined inside \\`outerFunction\\`.\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Key points to remember:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Closure occurs when an inner function has access to variables in its outer (lexical) scope, even when the outer function has finished executing.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Closure allows a function to \",(0,n.jsx)(e.strong,{children:\"remember\"}),\" the environment in which it was created, even if that environment is no longer present.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Closures are used extensively in JavaScript, such as in callbacks, event handlers, and asynchronous functions.\"}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Understanding JavaScript closures\"}),`\n`,(0,n.jsx)(e.p,{children:\"In JavaScript, a closure is a function that captures the lexical scope in which it was declared, allowing it to access and manipulate variables from an outer scope even after that scope has been closed.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here's how closures work:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Lexical scoping\"}),\": JavaScript uses lexical scoping, meaning a function's access to variables is determined by its actual location within the source code.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Function creation\"}),\": When a function is created, it keeps a reference to its lexical scope. This scope contains all the local variables that were in-scope at the time the closure was created.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Maintaining state\"}),\": Closures are often used to maintain state in a secure way because the variables captured by the closure are not accessible outside the function.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"ES6 syntax and closures\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"With ES6, closures can be created using arrow functions, which provide a more concise syntax and lexically bind the \",(0,n.jsx)(e.code,{children:\"this\"}),\" value. Here's an example:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const createCounter = () => {\n  let count = 0;\n  return () => {\n    count += 1;\n    return count;\n  };\n};\n\nconst counter = createCounter();\nconsole.log(counter()); // Outputs: 1\nconsole.log(counter()); // Outputs: 2\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Closures in React\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Closures are everywhere. Below code shows a simple example of increasing a counter on a button click. In this code, \",(0,n.jsx)(e.code,{children:\"handleClick\"}),\" forms a closure. It has access to it's outer scope variable \",(0,n.jsx)(e.code,{children:\"count\"}),\" and \",(0,n.jsx)(e.code,{children:\"setCount\"})]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { useState } from 'react';\n\nfunction Counter() {\n  // Define a state variable using the useState hook\n  const [count, setCount] = useState(0);\n\n  // This handleClick function is a closure\n  function handleClick() {\n    // It can access the 'count' state variable\n    setCount(count + 1);\n  }\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={handleClick}>Increment</button>\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <div>\n      <h1>Counter App</h1>\n      <Counter />\n    </div>\n  );\n}\n\nexport default App;\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Why use closures?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Using closures provide the following benefits:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Data encapsulation\"}),\": Closures provide a way to create private variables and functions that can't be accessed from outside the closure. This is useful for hiding implementation details and maintaining state in an encapsulated way.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Functional programming\"}),\": Closures are fundamental in functional programming paradigms, where they are used to create functions that can be passed around and invoked later, retaining access to the scope in which they were created, e.g. \",(0,n.jsx)(e.a,{href:\"https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x\",children:\"partial applications or currying\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Event handlers and callbacks\"}),\": In JavaScript, closures are often used in event handlers and callbacks to maintain state or access variables that were in scope when the handler or callback was defined.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Module patterns\"}),\": Closures enable the \",(0,n.jsx)(e.a,{href:\"https://www.patterns.dev/vanilla/module-pattern\",children:\"module pattern\"}),\" in JavaScript, allowing the creation of modules with private and public parts.\"]}),`\n`]}),`\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/Web/JavaScript/Closures\",children:\"Closures - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/closure\",children:\"Closures - Javascript.info\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://eloquentjavascript.net/03_functions.html\",children:\"Closure - Eloquent Javascript\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/scope-closures\",children:\"You Don't Know JS Yet: Scope & Closures\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(u,{...t})}):u(t)}return C(y);})();\n;return Component;"
 }
\ No newline at end of file
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 6899816bb..516e6541b 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
@@ -34,5 +34,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),g=(a,e)=>{for(var n in e)s(a,n,{get:e[n],enumerable:!0})},i=(a,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!f.call(a,r)&&r!==n&&s(a,r,{get:()=>e[r],enumerable:!(c=m(e,r))||c.enumerable});return a};var q=(a,e,n)=>(n=a!=null?u(h(a)):{},i(e||!a||!a.__esModule?s(n,\"default\",{value:a,enumerable:!0}):n,a)),x=a=>i(s({},\"__esModule\",{value:!0}),a);var l=v((_,d)=>{d.exports=_jsx_runtime});var j={};g(j,{default:()=>b,frontmatter:()=>C});var o=q(l()),C={title:\"O que \\xE9 um closure e como/por que voc\\xEA usaria um?\"};function t(a){let e=Object.assign({h2:\"h2\",p:\"p\",ol:\"ol\",li:\"li\",strong:\"strong\",code:\"code\",pre:\"pre\",a:\"a\"},a.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h2,{children:\"Compreendendo Closures em JavaScript\"}),`\n`,(0,o.jsx)(e.p,{children:\"Em JavaScript, um closure \\xE9 uma fun\\xE7\\xE3o que captura o escopo l\\xE9xico no qual foi declarada, permitindo que ela acesse e manipule vari\\xE1veis de um escopo externo mesmo depois que esse escopo foi fechado.\"}),`\n`,(0,o.jsx)(e.p,{children:\"Aqui est\\xE1 como os closures funcionam:\"}),`\n`,(0,o.jsxs)(e.ol,{children:[`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Escopo l\\xE9xico\"}),\": JavaScript utiliza o escopo l\\xE9xico, o que significa que o acesso de uma fun\\xE7\\xE3o \\xE0s vari\\xE1veis \\xE9 determinado pela sua localiza\\xE7\\xE3o f\\xEDsica no c\\xF3digo-fonte.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Cria\\xE7\\xE3o de fun\\xE7\\xE3o\"}),\": Quando uma fun\\xE7\\xE3o \\xE9 criada, ela mant\\xE9m uma refer\\xEAncia ao seu escopo l\\xE9xico. Este escopo cont\\xE9m todas as vari\\xE1veis locais que estavam em escopo no momento em que o closure foi criado.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Manuten\\xE7\\xE3o de estado\"}),\": Closures s\\xE3o frequentemente usados para manter o estado de uma forma segura, porque as vari\\xE1veis capturadas pelo closure n\\xE3o s\\xE3o acess\\xEDveis fora da fun\\xE7\\xE3o.\"]}),`\n`]}),`\n`,(0,o.jsx)(e.p,{children:\"Sintaxe do ES6 e closures\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Com o ES6, closures podem ser criados usando fun\\xE7\\xF5es de seta (arrow functions), que proporcionam uma sintaxe mais concisa e vinculam lexicalmente o valor de \",(0,o.jsx)(e.code,{children:\"this\"}),\". Aqui est\\xE1 um exemplo:\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`const criarContador = () => {\n  let contador = 0;\n  return () => {\n    contador += 1;\n    return contador;\n  };\n};\n\nconst contador = criarContador();\nconsole.log(contador()); // Sa\\xEDda: 1\nconsole.log(contador()); // Sa\\xEDda: 2\n`})}),`\n`,(0,o.jsx)(e.h2,{children:\"Por que usar closures?\"}),`\n`,(0,o.jsxs)(e.ol,{children:[`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Encapsulamento de dados\"}),\": Closures fornecem uma maneira de criar vari\\xE1veis e fun\\xE7\\xF5es privadas que n\\xE3o podem ser acessadas fora do closure. Isso \\xE9 \\xFAtil para ocultar detalhes de implementa\\xE7\\xE3o e manter o estado de forma encapsulada.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Programa\\xE7\\xE3o funcional\"}),\": Closures s\\xE3o fundamentais em paradigmas de programa\\xE7\\xE3o funcional, onde s\\xE3o usados para criar fun\\xE7\\xF5es que podem ser passadas e invocadas posteriormente, mantendo o acesso ao escopo em que foram criadas, por exemplo, \",(0,o.jsx)(e.a,{href:\"https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x\",children:\"aplica\\xE7\\xF5es parciais ou currying\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Manipuladores de eventos e callbacks\"}),\": Em JavaScript, closures s\\xE3o frequentemente usados em manipuladores de eventos e callbacks para manter o estado ou acessar vari\\xE1veis que estavam em escopo quando o manipulador ou callback foi definido.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Padr\\xF5es de m\\xF3dulo\"}),\": Closures permitem o uso do \",(0,o.jsx)(e.a,{href:\"https://www.patterns.dev/vanilla/module-pattern\",children:\"padr\\xE3o de m\\xF3dulo\"}),\" em JavaScript, possibilitando a cria\\xE7\\xE3o de m\\xF3dulos com partes privadas e p\\xFAblicas.\"]}),`\n`]})]})}function S(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,Object.assign({},a,{children:(0,o.jsx)(t,a)})):t(a)}var b=S;return x(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),q=(a,e)=>{for(var n in e)s(a,n,{get:e[n],enumerable:!0})},i=(a,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of h(e))!v.call(a,r)&&r!==n&&s(a,r,{get:()=>e[r],enumerable:!(c=p(e,r))||c.enumerable});return a};var x=(a,e,n)=>(n=a!=null?m(f(a)):{},i(e||!a||!a.__esModule?s(n,\"default\",{value:a,enumerable:!0}):n,a)),C=a=>i(s({},\"__esModule\",{value:!0}),a);var l=g((E,d)=>{d.exports=_jsx_runtime});var b={};q(b,{default:()=>u,frontmatter:()=>S});var o=x(l()),S={title:\"O que \\xE9 um closure e como/por que voc\\xEA usaria um?\"};function t(a){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",...a.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h2,{children:\"Compreendendo Closures em JavaScript\"}),`\n`,(0,o.jsx)(e.p,{children:\"Em JavaScript, um closure \\xE9 uma fun\\xE7\\xE3o que captura o escopo l\\xE9xico no qual foi declarada, permitindo que ela acesse e manipule vari\\xE1veis de um escopo externo mesmo depois que esse escopo foi fechado.\"}),`\n`,(0,o.jsx)(e.p,{children:\"Aqui est\\xE1 como os closures funcionam:\"}),`\n`,(0,o.jsxs)(e.ol,{children:[`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Escopo l\\xE9xico\"}),\": JavaScript utiliza o escopo l\\xE9xico, o que significa que o acesso de uma fun\\xE7\\xE3o \\xE0s vari\\xE1veis \\xE9 determinado pela sua localiza\\xE7\\xE3o f\\xEDsica no c\\xF3digo-fonte.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Cria\\xE7\\xE3o de fun\\xE7\\xE3o\"}),\": Quando uma fun\\xE7\\xE3o \\xE9 criada, ela mant\\xE9m uma refer\\xEAncia ao seu escopo l\\xE9xico. Este escopo cont\\xE9m todas as vari\\xE1veis locais que estavam em escopo no momento em que o closure foi criado.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Manuten\\xE7\\xE3o de estado\"}),\": Closures s\\xE3o frequentemente usados para manter o estado de uma forma segura, porque as vari\\xE1veis capturadas pelo closure n\\xE3o s\\xE3o acess\\xEDveis fora da fun\\xE7\\xE3o.\"]}),`\n`]}),`\n`,(0,o.jsx)(e.p,{children:\"Sintaxe do ES6 e closures\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Com o ES6, closures podem ser criados usando fun\\xE7\\xF5es de seta (arrow functions), que proporcionam uma sintaxe mais concisa e vinculam lexicalmente o valor de \",(0,o.jsx)(e.code,{children:\"this\"}),\". Aqui est\\xE1 um exemplo:\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`const criarContador = () => {\n  let contador = 0;\n  return () => {\n    contador += 1;\n    return contador;\n  };\n};\n\nconst contador = criarContador();\nconsole.log(contador()); // Sa\\xEDda: 1\nconsole.log(contador()); // Sa\\xEDda: 2\n`})}),`\n`,(0,o.jsx)(e.h2,{children:\"Por que usar closures?\"}),`\n`,(0,o.jsxs)(e.ol,{children:[`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Encapsulamento de dados\"}),\": Closures fornecem uma maneira de criar vari\\xE1veis e fun\\xE7\\xF5es privadas que n\\xE3o podem ser acessadas fora do closure. Isso \\xE9 \\xFAtil para ocultar detalhes de implementa\\xE7\\xE3o e manter o estado de forma encapsulada.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Programa\\xE7\\xE3o funcional\"}),\": Closures s\\xE3o fundamentais em paradigmas de programa\\xE7\\xE3o funcional, onde s\\xE3o usados para criar fun\\xE7\\xF5es que podem ser passadas e invocadas posteriormente, mantendo o acesso ao escopo em que foram criadas, por exemplo, \",(0,o.jsx)(e.a,{href:\"https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x\",children:\"aplica\\xE7\\xF5es parciais ou currying\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Manipuladores de eventos e callbacks\"}),\": Em JavaScript, closures s\\xE3o frequentemente usados em manipuladores de eventos e callbacks para manter o estado ou acessar vari\\xE1veis que estavam em escopo quando o manipulador ou callback foi definido.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.strong,{children:\"Padr\\xF5es de m\\xF3dulo\"}),\": Closures permitem o uso do \",(0,o.jsx)(e.a,{href:\"https://www.patterns.dev/vanilla/module-pattern\",children:\"padr\\xE3o de m\\xF3dulo\"}),\" em JavaScript, possibilitando a cria\\xE7\\xE3o de m\\xF3dulos com partes privadas e p\\xFAblicas.\"]}),`\n`]})]})}function u(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,{...a,children:(0,o.jsx)(t,{...a})}):t(a)}return C(b);})();\n;return Component;"
 }
\ No newline at end of file
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 6f78ddc97..06d27c4e0 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
@@ -34,5 +34,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),v=(r,n)=>{for(var t in n)i(r,t,{get:n[t],enumerable:!0})},l=(r,n,t,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of p(n))!f.call(r,c)&&c!==t&&i(r,c,{get:()=>n[c],enumerable:!(o=s(n,c))||o.enumerable});return r};var S=(r,n,t)=>(t=r!=null?a(g(r)):{},l(n||!r||!r.__esModule?i(t,\"default\",{value:r,enumerable:!0}):t,r)),C=r=>l(i({},\"__esModule\",{value:!0}),r);var d=m((k,h)=>{h.exports=_jsx_runtime});var x={};v(x,{default:()=>b,frontmatter:()=>J});var e=S(d()),J={title:\"JavaScript \\u4E2D\\u7684\\u95ED\\u5305\\u662F\\u4EC0\\u4E48\\uFF1F\\u4F60\\u5C06\\u5982\\u4F55/\\u4E3A\\u4EC0\\u4E48\\u8981\\u4F7F\\u7528\\u5B83\\uFF1F\"};function u(r){let n=Object.assign({h2:\"h2\",p:\"p\",a:\"a\",blockquote:\"blockquote\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",strong:\"strong\",hr:\"hr\",ol:\"ol\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 Kyle Simpson \\u64B0\\u5199\\u7684 \",(0,e.jsx)(n.a,{href:\"https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/scope-closures\",children:`\"You Don't Know JS\"`}),\" (YDKJS) \\u4E00\\u4E66\\u4E2D\\uFF0C\\u95ED\\u5305\\u5B9A\\u4E49\\u5982\\u4E0B\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.blockquote,{children:[`\n`,(0,e.jsx)(n.p,{children:\"\\u95ED\\u5305\\u662F\\u6307\\u4E00\\u4E2A\\u51FD\\u6570\\u80FD\\u591F\\u8BB0\\u4F4F\\u5E76\\u8BBF\\u95EE\\u5176\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\uFF0C\\u5373\\u4F7F\\u8BE5\\u51FD\\u6570\\u5728\\u5176\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u4E4B\\u5916\\u6267\\u884C\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7B80\\u5355\\u6765\\u8BF4\\uFF0C\\u51FD\\u6570\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5B83\\u4EEC\\u5728\\u521B\\u5EFA\\u65F6\\u5728\\u5176\\u4F5C\\u7528\\u57DF\\u4E2D\\u7684\\u53D8\\u91CF\\u3002 \\u8FD9\\u5C31\\u662F\\u6211\\u4EEC\\u6240\\u8BF4\\u7684\\u51FD\\u6570\\u7684\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u3002 \\u95ED\\u5305\\u662F\\u4E00\\u4E2A\\u51FD\\u6570\\uFF0C\\u5373\\u4F7F\\u5916\\u90E8\\u51FD\\u6570\\u6267\\u884C\\u5B8C\\u6BD5\\u540E\\uFF0C\\u5B83\\u4ECD\\u7136\\u4FDD\\u7559\\u5BF9\\u8FD9\\u4E9B\\u53D8\\u91CF\\u7684\\u8BBF\\u95EE\\u6743\\u9650\\u3002 \\u8FD9\\u5C31\\u50CF\\u51FD\\u6570\\u8BB0\\u4F4F\\u4E86\\u5B83\\u6700\\u521D\\u7684\\u73AF\\u5883\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function outerFunction() {\n  const outerVar = '\\u6211\\u4F4D\\u4E8E innerFunction \\u4E4B\\u5916';\n\n  function innerFunction() {\n    console.log(outerVar); // \\`innerFunction\\` \\u4ECD\\u7136\\u53EF\\u4EE5\\u8BBF\\u95EE \\`outerVar\\`\\u3002\n  }\n\n  return innerFunction;\n}\n\nconst inner = outerFunction(); // \\`inner\\` \\u73B0\\u5728\\u6301\\u6709\\u5BF9 \\`innerFunction\\` \\u7684\\u5F15\\u7528\\u3002\n\ninner(); // \"\\u6211\\u4F4D\\u4E8E innerFunction \\u4E4B\\u5916\"\n// \\u5373\\u4F7F \\`outerFunction\\` \\u5DF2\\u7ECF\\u6267\\u884C\\u5B8C\\u6BD5\\uFF0C\\`inner\\` \\u4ECD\\u7136\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5728 \\`outerFunction\\` \\u5185\\u90E8\\u5B9A\\u4E49\\u7684\\u53D8\\u91CF\\u3002\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8981\\u8BB0\\u4F4F\\u7684\\u5173\\u952E\\u70B9\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u5185\\u90E8\\u51FD\\u6570\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5176\\u5916\\u90E8\\uFF08\\u8BCD\\u6CD5\\uFF09\\u4F5C\\u7528\\u57DF\\u4E2D\\u7684\\u53D8\\u91CF\\u65F6\\uFF0C\\u5C31\\u4F1A\\u53D1\\u751F\\u95ED\\u5305\\uFF0C\\u5373\\u4F7F\\u5916\\u90E8\\u51FD\\u6570\\u5DF2\\u7ECF\\u6267\\u884C\\u5B8C\\u6BD5\\u3002\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u95ED\\u5305\\u5141\\u8BB8\\u4E00\\u4E2A\\u51FD\\u6570\",(0,e.jsx)(n.strong,{children:\"\\u8BB0\\u4F4F\"}),\"\\u5B83\\u88AB\\u521B\\u5EFA\\u7684\\u73AF\\u5883\\uFF0C\\u5373\\u4F7F\\u8BE5\\u73AF\\u5883\\u4E0D\\u518D\\u5B58\\u5728\\u3002\"]}),`\n`,(0,e.jsx)(n.li,{children:\"\\u95ED\\u5305\\u5728 JavaScript \\u4E2D\\u88AB\\u5E7F\\u6CDB\\u4F7F\\u7528\\uFF0C\\u4F8B\\u5982\\u5728\\u56DE\\u8C03\\u3001\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u548C\\u5F02\\u6B65\\u51FD\\u6570\\u4E2D\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4E86\\u89E3 JavaScript \\u95ED\\u5305\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u95ED\\u5305\\u662F\\u4E00\\u4E2A\\u6355\\u83B7\\u5176\\u58F0\\u660E\\u7684\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u7684\\u51FD\\u6570\\uFF0C\\u5141\\u8BB8\\u5B83\\u8BBF\\u95EE\\u548C\\u64CD\\u4F5C\\u6765\\u81EA\\u5916\\u90E8\\u4F5C\\u7528\\u57DF\\u7684\\u53D8\\u91CF\\uFF0C\\u5373\\u4F7F\\u8BE5\\u4F5C\\u7528\\u57DF\\u5DF2\\u5173\\u95ED\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u95ED\\u5305\\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\"}),\"\\uFF1AJavaScript \\u4F7F\\u7528\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u51FD\\u6570\\u5BF9\\u53D8\\u91CF\\u7684\\u8BBF\\u95EE\\u7531\\u5176\\u5728\\u6E90\\u4EE3\\u7801\\u4E2D\\u7684\\u5B9E\\u9645\\u4F4D\\u7F6E\\u51B3\\u5B9A\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u51FD\\u6570\\u521B\\u5EFA\"}),\"\\uFF1A\\u5F53\\u521B\\u5EFA\\u4E00\\u4E2A\\u51FD\\u6570\\u65F6\\uFF0C\\u5B83\\u4F1A\\u4FDD\\u7559\\u5BF9\\u5176\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u7684\\u5F15\\u7528\\u3002 \\u6B64\\u4F5C\\u7528\\u57DF\\u5305\\u542B\\u5728\\u521B\\u5EFA\\u95ED\\u5305\\u65F6\\u5728\\u5176\\u4F5C\\u7528\\u57DF\\u4E2D\\u7684\\u6240\\u6709\\u5C40\\u90E8\\u53D8\\u91CF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7EF4\\u62A4\\u72B6\\u6001\"}),\"\\uFF1A\\u95ED\\u5305\\u901A\\u5E38\\u7528\\u4E8E\\u4EE5\\u5B89\\u5168\\u7684\\u65B9\\u5F0F\\u7EF4\\u62A4\\u72B6\\u6001\\uFF0C\\u56E0\\u4E3A\\u95ED\\u5305\\u6355\\u83B7\\u7684\\u53D8\\u91CF\\u5728\\u51FD\\u6570\\u5916\\u90E8\\u4E0D\\u53EF\\u8BBF\\u95EE\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"ES6 \\u8BED\\u6CD5\\u548C\\u95ED\\u5305\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 ES6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u7BAD\\u5934\\u51FD\\u6570\\u521B\\u5EFA\\u95ED\\u5305\\uFF0C\\u8FD9\\u63D0\\u4F9B\\u4E86\\u66F4\\u7B80\\u6D01\\u7684\\u8BED\\u6CD5\\u5E76\\u4EE5\\u8BCD\\u6CD5\\u65B9\\u5F0F\\u7ED1\\u5B9A \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u3002 \\u8FD9\\u662F\\u4E00\\u4E2A\\u4F8B\\u5B50\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const createCounter = () => {\n  let count = 0;\n  return () => {\n    count += 1;\n    return count;\n  };\n};\n\nconst counter = createCounter();\nconsole.log(counter()); // \\u8F93\\u51FA\\uFF1A1\nconsole.log(counter()); // \\u8F93\\u51FA\\uFF1A2\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u4E2D\\u7684\\u95ED\\u5305\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u95ED\\u5305\\u65E0\\u5904\\u4E0D\\u5728\\u3002 \\u4E0B\\u9762\\u7684\\u4EE3\\u7801\\u663E\\u793A\\u4E86\\u4E00\\u4E2A\\u5728\\u5355\\u51FB\\u6309\\u94AE\\u65F6\\u589E\\u52A0\\u8BA1\\u6570\\u5668\\u7684\\u7B80\\u5355\\u793A\\u4F8B\\u3002 \\u5728\\u6B64\\u4EE3\\u7801\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"handleClick\"}),\" \\u5F62\\u6210\\u4E00\\u4E2A\\u95ED\\u5305\\u3002 \\u5B83\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5176\\u5916\\u90E8\\u4F5C\\u7528\\u57DF\\u53D8\\u91CF \",(0,e.jsx)(n.code,{children:\"count\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"setCount\"})]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`import React, { useState } from 'react';\n\nfunction Counter() {\n  // \\u4F7F\\u7528 useState \\u94A9\\u5B50\\u5B9A\\u4E49\\u4E00\\u4E2A\\u72B6\\u6001\\u53D8\\u91CF\n  const [count, setCount] = useState(0);\n\n  // \\u6B64 handleClick \\u51FD\\u6570\\u662F\\u4E00\\u4E2A\\u95ED\\u5305\n  function handleClick() {\n    // \\u5B83\\u53EF\\u4EE5\\u8BBF\\u95EE 'count' \\u72B6\\u6001\\u53D8\\u91CF\n    setCount(count + 1);\n  }\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={handleClick}>Increment</button>\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <div>\n      <h1>Counter App</h1>\n      <Counter />\n    </div>\n  );\n}\n\nexport default App;\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4E3A\\u4EC0\\u4E48\\u4F7F\\u7528\\u95ED\\u5305\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528\\u95ED\\u5305\\u63D0\\u4F9B\\u4EE5\\u4E0B\\u597D\\u5904\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6570\\u636E\\u5C01\\u88C5\"}),\"\\uFF1A\\u95ED\\u5305\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u521B\\u5EFA\\u79C1\\u6709\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u7684\\u65B9\\u6CD5\\uFF0C\\u8FD9\\u4E9B\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u65E0\\u6CD5\\u4ECE\\u95ED\\u5305\\u5916\\u90E8\\u8BBF\\u95EE\\u3002\\u8FD9\\u5BF9\\u4E8E\\u9690\\u85CF\\u5B9E\\u73B0\\u7EC6\\u8282\\u5E76\\u4EE5\\u5C01\\u88C5\\u7684\\u65B9\\u5F0F\\u7EF4\\u62A4\\u72B6\\u6001\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\"}),\"\\uFF1A\\u95ED\\u5305\\u662F\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\\u8303\\u4F8B\\u7684\\u57FA\\u7840\\uFF0C\\u5B83\\u4EEC\\u7528\\u4E8E\\u521B\\u5EFA\\u53EF\\u4EE5\\u4F20\\u9012\\u548C\\u7A0D\\u540E\\u8C03\\u7528\\u7684\\u51FD\\u6570\\uFF0C\\u4FDD\\u7559\\u5BF9\\u521B\\u5EFA\\u5B83\\u4EEC\\u7684\\u8303\\u56F4\\u7684\\u8BBF\\u95EE\\u6743\\u9650\\uFF0C\\u4F8B\\u5982 \",(0,e.jsx)(n.a,{href:\"https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x\",children:\"\\u90E8\\u5206\\u5E94\\u7528\\u6216\\u67EF\\u91CC\\u5316\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u548C\\u56DE\\u8C03\"}),\"\\uFF1A\\u5728 JavaScript \\u4E2D\\uFF0C\\u95ED\\u5305\\u901A\\u5E38\\u7528\\u4E8E\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u548C\\u56DE\\u8C03\\uFF0C\\u4EE5\\u7EF4\\u62A4\\u72B6\\u6001\\u6216\\u8BBF\\u95EE\\u5728\\u5B9A\\u4E49\\u5904\\u7406\\u7A0B\\u5E8F\\u6216\\u56DE\\u8C03\\u65F6\\u4F5C\\u7528\\u57DF\\u4E2D\\u7684\\u53D8\\u91CF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6A21\\u5757\\u6A21\\u5F0F\"}),\"\\uFF1A\\u95ED\\u5305\\u5728 JavaScript \\u4E2D\\u542F\\u7528 \",(0,e.jsx)(n.a,{href:\"https://www.patterns.dev/vanilla/module-pattern\",children:\"\\u6A21\\u5757\\u6A21\\u5F0F\"}),\"\\uFF0C\\u5141\\u8BB8\\u521B\\u5EFA\\u5177\\u6709\\u79C1\\u6709\\u548C\\u516C\\u5171\\u90E8\\u5206\\u7684\\u6A21\\u5757\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures\",children:\"\\u95ED\\u5305 - MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/closure\",children:\"\\u95ED\\u5305 - Javascript.info\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/03_functions.html\",children:\"\\u95ED\\u5305 - Eloquent Javascript\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/scope-closures\",children:\"\\u4F60\\u8FD8\\u4E0D\\u4E86\\u89E3 JS\\uFF1A\\u4F5C\\u7528\\u57DF\\u548C\\u95ED\\u5305\"})}),`\n`]})]})}function j(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(u,r)})):u(r)}var b=j;return C(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var v=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),S=(r,n)=>{for(var t in n)i(r,t,{get:n[t],enumerable:!0})},l=(r,n,t,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of g(n))!m.call(r,c)&&c!==t&&i(r,c,{get:()=>n[c],enumerable:!(o=p(n,c))||o.enumerable});return r};var C=(r,n,t)=>(t=r!=null?s(f(r)):{},l(n||!r||!r.__esModule?i(t,\"default\",{value:r,enumerable:!0}):t,r)),J=r=>l(i({},\"__esModule\",{value:!0}),r);var d=v((b,h)=>{h.exports=_jsx_runtime});var F={};S(F,{default:()=>a,frontmatter:()=>x});var e=C(d()),x={title:\"JavaScript \\u4E2D\\u7684\\u95ED\\u5305\\u662F\\u4EC0\\u4E48\\uFF1F\\u4F60\\u5C06\\u5982\\u4F55/\\u4E3A\\u4EC0\\u4E48\\u8981\\u4F7F\\u7528\\u5B83\\uFF1F\"};function u(r){let n={a:\"a\",blockquote:\"blockquote\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 Kyle Simpson \\u64B0\\u5199\\u7684 \",(0,e.jsx)(n.a,{href:\"https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/scope-closures\",children:`\"You Don't Know JS\"`}),\" (YDKJS) \\u4E00\\u4E66\\u4E2D\\uFF0C\\u95ED\\u5305\\u5B9A\\u4E49\\u5982\\u4E0B\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.blockquote,{children:[`\n`,(0,e.jsx)(n.p,{children:\"\\u95ED\\u5305\\u662F\\u6307\\u4E00\\u4E2A\\u51FD\\u6570\\u80FD\\u591F\\u8BB0\\u4F4F\\u5E76\\u8BBF\\u95EE\\u5176\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\uFF0C\\u5373\\u4F7F\\u8BE5\\u51FD\\u6570\\u5728\\u5176\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u4E4B\\u5916\\u6267\\u884C\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7B80\\u5355\\u6765\\u8BF4\\uFF0C\\u51FD\\u6570\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5B83\\u4EEC\\u5728\\u521B\\u5EFA\\u65F6\\u5728\\u5176\\u4F5C\\u7528\\u57DF\\u4E2D\\u7684\\u53D8\\u91CF\\u3002 \\u8FD9\\u5C31\\u662F\\u6211\\u4EEC\\u6240\\u8BF4\\u7684\\u51FD\\u6570\\u7684\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u3002 \\u95ED\\u5305\\u662F\\u4E00\\u4E2A\\u51FD\\u6570\\uFF0C\\u5373\\u4F7F\\u5916\\u90E8\\u51FD\\u6570\\u6267\\u884C\\u5B8C\\u6BD5\\u540E\\uFF0C\\u5B83\\u4ECD\\u7136\\u4FDD\\u7559\\u5BF9\\u8FD9\\u4E9B\\u53D8\\u91CF\\u7684\\u8BBF\\u95EE\\u6743\\u9650\\u3002 \\u8FD9\\u5C31\\u50CF\\u51FD\\u6570\\u8BB0\\u4F4F\\u4E86\\u5B83\\u6700\\u521D\\u7684\\u73AF\\u5883\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function outerFunction() {\n  const outerVar = '\\u6211\\u4F4D\\u4E8E innerFunction \\u4E4B\\u5916';\n\n  function innerFunction() {\n    console.log(outerVar); // \\`innerFunction\\` \\u4ECD\\u7136\\u53EF\\u4EE5\\u8BBF\\u95EE \\`outerVar\\`\\u3002\n  }\n\n  return innerFunction;\n}\n\nconst inner = outerFunction(); // \\`inner\\` \\u73B0\\u5728\\u6301\\u6709\\u5BF9 \\`innerFunction\\` \\u7684\\u5F15\\u7528\\u3002\n\ninner(); // \"\\u6211\\u4F4D\\u4E8E innerFunction \\u4E4B\\u5916\"\n// \\u5373\\u4F7F \\`outerFunction\\` \\u5DF2\\u7ECF\\u6267\\u884C\\u5B8C\\u6BD5\\uFF0C\\`inner\\` \\u4ECD\\u7136\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5728 \\`outerFunction\\` \\u5185\\u90E8\\u5B9A\\u4E49\\u7684\\u53D8\\u91CF\\u3002\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8981\\u8BB0\\u4F4F\\u7684\\u5173\\u952E\\u70B9\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5F53\\u5185\\u90E8\\u51FD\\u6570\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5176\\u5916\\u90E8\\uFF08\\u8BCD\\u6CD5\\uFF09\\u4F5C\\u7528\\u57DF\\u4E2D\\u7684\\u53D8\\u91CF\\u65F6\\uFF0C\\u5C31\\u4F1A\\u53D1\\u751F\\u95ED\\u5305\\uFF0C\\u5373\\u4F7F\\u5916\\u90E8\\u51FD\\u6570\\u5DF2\\u7ECF\\u6267\\u884C\\u5B8C\\u6BD5\\u3002\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u95ED\\u5305\\u5141\\u8BB8\\u4E00\\u4E2A\\u51FD\\u6570\",(0,e.jsx)(n.strong,{children:\"\\u8BB0\\u4F4F\"}),\"\\u5B83\\u88AB\\u521B\\u5EFA\\u7684\\u73AF\\u5883\\uFF0C\\u5373\\u4F7F\\u8BE5\\u73AF\\u5883\\u4E0D\\u518D\\u5B58\\u5728\\u3002\"]}),`\n`,(0,e.jsx)(n.li,{children:\"\\u95ED\\u5305\\u5728 JavaScript \\u4E2D\\u88AB\\u5E7F\\u6CDB\\u4F7F\\u7528\\uFF0C\\u4F8B\\u5982\\u5728\\u56DE\\u8C03\\u3001\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u548C\\u5F02\\u6B65\\u51FD\\u6570\\u4E2D\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4E86\\u89E3 JavaScript \\u95ED\\u5305\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u95ED\\u5305\\u662F\\u4E00\\u4E2A\\u6355\\u83B7\\u5176\\u58F0\\u660E\\u7684\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u7684\\u51FD\\u6570\\uFF0C\\u5141\\u8BB8\\u5B83\\u8BBF\\u95EE\\u548C\\u64CD\\u4F5C\\u6765\\u81EA\\u5916\\u90E8\\u4F5C\\u7528\\u57DF\\u7684\\u53D8\\u91CF\\uFF0C\\u5373\\u4F7F\\u8BE5\\u4F5C\\u7528\\u57DF\\u5DF2\\u5173\\u95ED\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u95ED\\u5305\\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\"}),\"\\uFF1AJavaScript \\u4F7F\\u7528\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u51FD\\u6570\\u5BF9\\u53D8\\u91CF\\u7684\\u8BBF\\u95EE\\u7531\\u5176\\u5728\\u6E90\\u4EE3\\u7801\\u4E2D\\u7684\\u5B9E\\u9645\\u4F4D\\u7F6E\\u51B3\\u5B9A\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u51FD\\u6570\\u521B\\u5EFA\"}),\"\\uFF1A\\u5F53\\u521B\\u5EFA\\u4E00\\u4E2A\\u51FD\\u6570\\u65F6\\uFF0C\\u5B83\\u4F1A\\u4FDD\\u7559\\u5BF9\\u5176\\u8BCD\\u6CD5\\u4F5C\\u7528\\u57DF\\u7684\\u5F15\\u7528\\u3002 \\u6B64\\u4F5C\\u7528\\u57DF\\u5305\\u542B\\u5728\\u521B\\u5EFA\\u95ED\\u5305\\u65F6\\u5728\\u5176\\u4F5C\\u7528\\u57DF\\u4E2D\\u7684\\u6240\\u6709\\u5C40\\u90E8\\u53D8\\u91CF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7EF4\\u62A4\\u72B6\\u6001\"}),\"\\uFF1A\\u95ED\\u5305\\u901A\\u5E38\\u7528\\u4E8E\\u4EE5\\u5B89\\u5168\\u7684\\u65B9\\u5F0F\\u7EF4\\u62A4\\u72B6\\u6001\\uFF0C\\u56E0\\u4E3A\\u95ED\\u5305\\u6355\\u83B7\\u7684\\u53D8\\u91CF\\u5728\\u51FD\\u6570\\u5916\\u90E8\\u4E0D\\u53EF\\u8BBF\\u95EE\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"ES6 \\u8BED\\u6CD5\\u548C\\u95ED\\u5305\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 ES6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u7BAD\\u5934\\u51FD\\u6570\\u521B\\u5EFA\\u95ED\\u5305\\uFF0C\\u8FD9\\u63D0\\u4F9B\\u4E86\\u66F4\\u7B80\\u6D01\\u7684\\u8BED\\u6CD5\\u5E76\\u4EE5\\u8BCD\\u6CD5\\u65B9\\u5F0F\\u7ED1\\u5B9A \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u3002 \\u8FD9\\u662F\\u4E00\\u4E2A\\u4F8B\\u5B50\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const createCounter = () => {\n  let count = 0;\n  return () => {\n    count += 1;\n    return count;\n  };\n};\n\nconst counter = createCounter();\nconsole.log(counter()); // \\u8F93\\u51FA\\uFF1A1\nconsole.log(counter()); // \\u8F93\\u51FA\\uFF1A2\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u4E2D\\u7684\\u95ED\\u5305\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u95ED\\u5305\\u65E0\\u5904\\u4E0D\\u5728\\u3002 \\u4E0B\\u9762\\u7684\\u4EE3\\u7801\\u663E\\u793A\\u4E86\\u4E00\\u4E2A\\u5728\\u5355\\u51FB\\u6309\\u94AE\\u65F6\\u589E\\u52A0\\u8BA1\\u6570\\u5668\\u7684\\u7B80\\u5355\\u793A\\u4F8B\\u3002 \\u5728\\u6B64\\u4EE3\\u7801\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"handleClick\"}),\" \\u5F62\\u6210\\u4E00\\u4E2A\\u95ED\\u5305\\u3002 \\u5B83\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5176\\u5916\\u90E8\\u4F5C\\u7528\\u57DF\\u53D8\\u91CF \",(0,e.jsx)(n.code,{children:\"count\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"setCount\"})]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`import React, { useState } from 'react';\n\nfunction Counter() {\n  // \\u4F7F\\u7528 useState \\u94A9\\u5B50\\u5B9A\\u4E49\\u4E00\\u4E2A\\u72B6\\u6001\\u53D8\\u91CF\n  const [count, setCount] = useState(0);\n\n  // \\u6B64 handleClick \\u51FD\\u6570\\u662F\\u4E00\\u4E2A\\u95ED\\u5305\n  function handleClick() {\n    // \\u5B83\\u53EF\\u4EE5\\u8BBF\\u95EE 'count' \\u72B6\\u6001\\u53D8\\u91CF\n    setCount(count + 1);\n  }\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={handleClick}>Increment</button>\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <div>\n      <h1>Counter App</h1>\n      <Counter />\n    </div>\n  );\n}\n\nexport default App;\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4E3A\\u4EC0\\u4E48\\u4F7F\\u7528\\u95ED\\u5305\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u7528\\u95ED\\u5305\\u63D0\\u4F9B\\u4EE5\\u4E0B\\u597D\\u5904\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6570\\u636E\\u5C01\\u88C5\"}),\"\\uFF1A\\u95ED\\u5305\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u521B\\u5EFA\\u79C1\\u6709\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u7684\\u65B9\\u6CD5\\uFF0C\\u8FD9\\u4E9B\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u65E0\\u6CD5\\u4ECE\\u95ED\\u5305\\u5916\\u90E8\\u8BBF\\u95EE\\u3002\\u8FD9\\u5BF9\\u4E8E\\u9690\\u85CF\\u5B9E\\u73B0\\u7EC6\\u8282\\u5E76\\u4EE5\\u5C01\\u88C5\\u7684\\u65B9\\u5F0F\\u7EF4\\u62A4\\u72B6\\u6001\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\"}),\"\\uFF1A\\u95ED\\u5305\\u662F\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\\u8303\\u4F8B\\u7684\\u57FA\\u7840\\uFF0C\\u5B83\\u4EEC\\u7528\\u4E8E\\u521B\\u5EFA\\u53EF\\u4EE5\\u4F20\\u9012\\u548C\\u7A0D\\u540E\\u8C03\\u7528\\u7684\\u51FD\\u6570\\uFF0C\\u4FDD\\u7559\\u5BF9\\u521B\\u5EFA\\u5B83\\u4EEC\\u7684\\u8303\\u56F4\\u7684\\u8BBF\\u95EE\\u6743\\u9650\\uFF0C\\u4F8B\\u5982 \",(0,e.jsx)(n.a,{href:\"https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x\",children:\"\\u90E8\\u5206\\u5E94\\u7528\\u6216\\u67EF\\u91CC\\u5316\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u548C\\u56DE\\u8C03\"}),\"\\uFF1A\\u5728 JavaScript \\u4E2D\\uFF0C\\u95ED\\u5305\\u901A\\u5E38\\u7528\\u4E8E\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u548C\\u56DE\\u8C03\\uFF0C\\u4EE5\\u7EF4\\u62A4\\u72B6\\u6001\\u6216\\u8BBF\\u95EE\\u5728\\u5B9A\\u4E49\\u5904\\u7406\\u7A0B\\u5E8F\\u6216\\u56DE\\u8C03\\u65F6\\u4F5C\\u7528\\u57DF\\u4E2D\\u7684\\u53D8\\u91CF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6A21\\u5757\\u6A21\\u5F0F\"}),\"\\uFF1A\\u95ED\\u5305\\u5728 JavaScript \\u4E2D\\u542F\\u7528 \",(0,e.jsx)(n.a,{href:\"https://www.patterns.dev/vanilla/module-pattern\",children:\"\\u6A21\\u5757\\u6A21\\u5F0F\"}),\"\\uFF0C\\u5141\\u8BB8\\u521B\\u5EFA\\u5177\\u6709\\u79C1\\u6709\\u548C\\u516C\\u5171\\u90E8\\u5206\\u7684\\u6A21\\u5757\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures\",children:\"\\u95ED\\u5305 - MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/closure\",children:\"\\u95ED\\u5305 - Javascript.info\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/03_functions.html\",children:\"\\u95ED\\u5305 - Eloquent Javascript\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/scope-closures\",children:\"\\u4F60\\u8FD8\\u4E0D\\u4E86\\u89E3 JS\\uFF1A\\u4F5C\\u7528\\u57DF\\u548C\\u95ED\\u5305\"})}),`\n`]})]})}function a(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(u,{...r})}):u(r)}return J(F);})();\n;return Component;"
 }
\ No newline at end of file
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 cb6421754..f30e8a483 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),w=(o,e)=>{for(var a in e)t(o,a,{get:e[a],enumerable:!0})},i=(o,e,a,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!m.call(o,r)&&r!==a&&t(o,r,{get:()=>e[r],enumerable:!(c=p(e,r))||c.enumerable});return o};var g=(o,e,a)=>(a=o!=null?l(y(o)):{},i(e||!o||!o.__esModule?t(a,\"default\",{value:o,enumerable:!0}):a,o)),j=o=>i(t({},\"__esModule\",{value:!0}),o);var h=f((E,s)=>{s.exports=_jsx_runtime});var b={};w(b,{default:()=>x,frontmatter:()=>v});var n=g(h()),v={title:\"What is async/await and how does it simplify asynchronous code?\"};function d(o){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"async/await\"}),\" is a modern syntax in JavaScript that simplifies working with promises. By using the \",(0,n.jsx)(e.code,{children:\"async\"}),\" keyword before a function, you can use the \",(0,n.jsx)(e.code,{children:\"await\"}),\" keyword inside that function to pause execution until a promise is resolved. This makes asynchronous code look and behave more like synchronous code, making it easier to read and maintain.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch(\n      'https://jsonplaceholder.typicode.com/posts/1',\n    );\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\nfetchData();\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is async/await and how does it simplify asynchronous code?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Introduction to async/await\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"async/await\"}),\" is a feature introduced in ECMAScript 2017 (ES8) that allows you to write asynchronous code in a more synchronous-looking manner. It is built on top of promises and provides a cleaner and more readable way to handle asynchronous operations.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"async\"}),\" keyword\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"async\"}),\" keyword is used to declare an asynchronous function. When a function is declared as \",(0,n.jsx)(e.code,{children:\"async\"}),\", it automatically returns a promise. This means you can use the \",(0,n.jsx)(e.code,{children:\"await\"}),\" keyword inside it to pause the execution of the function until a promise is resolved.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function exampleFunction() {\n  return 'Hello, World!';\n}\n\nexampleFunction().then(console.log); // Output: Hello, World!\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"await\"}),\" keyword\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"await\"}),\" keyword can only be used inside an \",(0,n.jsx)(e.code,{children:\"async\"}),\" function. It pauses the execution of the function until the promise is resolved, and then returns the resolved value. If the promise is rejected, it throws an error, which can be caught using a \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" block.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch(\n      'https://jsonplaceholder.typicode.com/posts/1',\n    );\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\nfetchData();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Simplifying asynchronous code\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Before \",(0,n.jsx)(e.code,{children:\"async/await\"}),\", handling asynchronous operations often involved chaining multiple \",(0,n.jsx)(e.code,{children:\".then()\"}),' calls, which could lead to \"callback hell\" or \"pyramid of doom.\" ',(0,n.jsx)(e.code,{children:\"async/await\"}),\" flattens this structure, making the code more readable and easier to maintain.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example with promises\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/posts/1')\n  .then((response) => response.json())\n  .then((data) => {\n    console.log(data);\n  })\n  .catch((error) => {\n    console.error('Error fetching data:', error);\n  });\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Example with async/await\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch(\n      'https://jsonplaceholder.typicode.com/posts/1',\n    );\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\nfetchData();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Error handling\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Error handling with \",(0,n.jsx)(e.code,{children:\"async/await\"}),\" is more straightforward compared to promises. You can use \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" blocks to handle errors, making the code cleaner and more intuitive.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch('https://jsonplaceholder.typicod.com/posts/1'); // Typo in URL\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\nfetchData();\n`})}),`\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/Web/JavaScript/Reference/Statements/async_function\",children:\"MDN Web Docs: async function\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await\",children:\"MDN Web Docs: await\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/async-await\",children:\"JavaScript.info: Async/await\"})}),`\n`]})]})}function k(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(d,o)})):d(o)}var x=k;return j(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var w=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),g=(o,e)=>{for(var a in e)t(o,a,{get:e[a],enumerable:!0})},i=(o,e,a,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of y(e))!f.call(o,r)&&r!==a&&t(o,r,{get:()=>e[r],enumerable:!(c=u(e,r))||c.enumerable});return o};var j=(o,e,a)=>(a=o!=null?p(m(o)):{},i(e||!o||!o.__esModule?t(a,\"default\",{value:o,enumerable:!0}):a,o)),v=o=>i(t({},\"__esModule\",{value:!0}),o);var h=w((b,s)=>{s.exports=_jsx_runtime});var x={};g(x,{default:()=>l,frontmatter:()=>k});var n=j(h()),k={title:\"What is async/await and how does it simplify asynchronous code?\"};function d(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"async/await\"}),\" is a modern syntax in JavaScript that simplifies working with promises. By using the \",(0,n.jsx)(e.code,{children:\"async\"}),\" keyword before a function, you can use the \",(0,n.jsx)(e.code,{children:\"await\"}),\" keyword inside that function to pause execution until a promise is resolved. This makes asynchronous code look and behave more like synchronous code, making it easier to read and maintain.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch(\n      'https://jsonplaceholder.typicode.com/posts/1',\n    );\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\nfetchData();\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is async/await and how does it simplify asynchronous code?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Introduction to async/await\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"async/await\"}),\" is a feature introduced in ECMAScript 2017 (ES8) that allows you to write asynchronous code in a more synchronous-looking manner. It is built on top of promises and provides a cleaner and more readable way to handle asynchronous operations.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"async\"}),\" keyword\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"async\"}),\" keyword is used to declare an asynchronous function. When a function is declared as \",(0,n.jsx)(e.code,{children:\"async\"}),\", it automatically returns a promise. This means you can use the \",(0,n.jsx)(e.code,{children:\"await\"}),\" keyword inside it to pause the execution of the function until a promise is resolved.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function exampleFunction() {\n  return 'Hello, World!';\n}\n\nexampleFunction().then(console.log); // Output: Hello, World!\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"await\"}),\" keyword\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"await\"}),\" keyword can only be used inside an \",(0,n.jsx)(e.code,{children:\"async\"}),\" function. It pauses the execution of the function until the promise is resolved, and then returns the resolved value. If the promise is rejected, it throws an error, which can be caught using a \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" block.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch(\n      'https://jsonplaceholder.typicode.com/posts/1',\n    );\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\nfetchData();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Simplifying asynchronous code\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Before \",(0,n.jsx)(e.code,{children:\"async/await\"}),\", handling asynchronous operations often involved chaining multiple \",(0,n.jsx)(e.code,{children:\".then()\"}),' calls, which could lead to \"callback hell\" or \"pyramid of doom.\" ',(0,n.jsx)(e.code,{children:\"async/await\"}),\" flattens this structure, making the code more readable and easier to maintain.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example with promises\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/posts/1')\n  .then((response) => response.json())\n  .then((data) => {\n    console.log(data);\n  })\n  .catch((error) => {\n    console.error('Error fetching data:', error);\n  });\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Example with async/await\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch(\n      'https://jsonplaceholder.typicode.com/posts/1',\n    );\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\nfetchData();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Error handling\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Error handling with \",(0,n.jsx)(e.code,{children:\"async/await\"}),\" is more straightforward compared to promises. You can use \",(0,n.jsx)(e.code,{children:\"try...catch\"}),\" blocks to handle errors, making the code cleaner and more intuitive.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch('https://jsonplaceholder.typicod.com/posts/1'); // Typo in URL\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\nfetchData();\n`})}),`\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/Web/JavaScript/Reference/Statements/async_function\",children:\"MDN Web Docs: async function\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await\",children:\"MDN Web Docs: await\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/async-await\",children:\"JavaScript.info: Async/await\"})}),`\n`]})]})}function l(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(d,{...o})}):d(o)}return v(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/zh-CN.json
index d0865b1bd..e1e7aaaaa 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var u=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),g=(c,n)=>{for(var r in n)t(c,r,{get:n[r],enumerable:!0})},s=(c,n,r,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let a of f(n))!m.call(c,a)&&a!==r&&t(c,a,{get:()=>n[a],enumerable:!(o=p(n,a))||o.enumerable});return c};var w=(c,n,r)=>(r=c!=null?d(y(c)):{},s(n||!c||!c.__esModule?t(r,\"default\",{value:c,enumerable:!0}):r,c)),j=c=>s(t({},\"__esModule\",{value:!0}),c);var l=u((_,i)=>{i.exports=_jsx_runtime});var N={};g(N,{default:()=>x,frontmatter:()=>v});var e=w(l()),v={title:\"\\u4EC0\\u4E48\\u662F async/await \\u4EE5\\u53CA\\u5B83\\u5982\\u4F55\\u7B80\\u5316\\u5F02\\u6B65\\u4EE3\\u7801\\uFF1F\"};function h(c){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},c.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"async/await\"}),\" \\u662F JavaScript \\u4E2D\\u4E00\\u79CD\\u73B0\\u4EE3\\u8BED\\u6CD5\\uFF0C\\u5B83\\u7B80\\u5316\\u4E86\\u5904\\u7406 Promise \\u7684\\u8FC7\\u7A0B\\u3002\\u901A\\u8FC7\\u5728\\u51FD\\u6570\\u524D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"async\"}),\" \\u5173\\u952E\\u5B57\\uFF0C\\u4F60\\u53EF\\u4EE5\\u5728\\u8BE5\\u51FD\\u6570\\u4E2D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"await\"}),\" \\u5173\\u952E\\u5B57\\u6765\\u6682\\u505C\\u6267\\u884C\\uFF0C\\u76F4\\u5230 Promise \\u88AB\\u89E3\\u6790\\u3002\\u8FD9\\u4F7F\\u5F97\\u5F02\\u6B65\\u4EE3\\u7801\\u770B\\u8D77\\u6765\\u66F4\\u50CF\\u540C\\u6B65\\u4EE3\\u7801\\uFF0C\\u5E76\\u4E14\\u884C\\u4E3A\\u4E5F\\u66F4\\u50CF\\u540C\\u6B65\\u4EE3\\u7801\\uFF0C\\u4ECE\\u800C\\u66F4\\u5BB9\\u6613\\u9605\\u8BFB\\u548C\\u7EF4\\u62A4\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch(\n      'https://jsonplaceholder.typicode.com/posts/1',\n    );\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\nfetchData();\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F async/await \\u4EE5\\u53CA\\u5B83\\u5982\\u4F55\\u7B80\\u5316\\u5F02\\u6B65\\u4EE3\\u7801\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"async/await \\u7B80\\u4ECB\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"async/await\"}),\" \\u662F ECMAScript 2017 (ES8) \\u4E2D\\u5F15\\u5165\\u7684\\u4E00\\u4E2A\\u7279\\u6027\\uFF0C\\u5B83\\u5141\\u8BB8\\u4F60\\u4EE5\\u66F4\\u50CF\\u540C\\u6B65\\u7684\\u65B9\\u5F0F\\u7F16\\u5199\\u5F02\\u6B65\\u4EE3\\u7801\\u3002\\u5B83\\u5EFA\\u7ACB\\u5728 Promise \\u7684\\u57FA\\u7840\\u4E0A\\uFF0C\\u5E76\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u6E05\\u6670\\u3001\\u66F4\\u6613\\u8BFB\\u7684\\u65B9\\u5F0F\\u6765\\u5904\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u3002\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"async\"}),\" \\u5173\\u952E\\u5B57\"]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"async\"}),\" \\u5173\\u952E\\u5B57\\u7528\\u4E8E\\u58F0\\u660E\\u4E00\\u4E2A\\u5F02\\u6B65\\u51FD\\u6570\\u3002\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u88AB\\u58F0\\u660E\\u4E3A \",(0,e.jsx)(n.code,{children:\"async\"}),\" \\u65F6\\uFF0C\\u5B83\\u4F1A\\u81EA\\u52A8\\u8FD4\\u56DE\\u4E00\\u4E2A Promise\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u4F60\\u53EF\\u4EE5\\u5728\\u5176\\u4E2D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"await\"}),\" \\u5173\\u952E\\u5B57\\u6765\\u6682\\u505C\\u51FD\\u6570\\u7684\\u6267\\u884C\\uFF0C\\u76F4\\u5230 Promise \\u88AB\\u89E3\\u6790\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`async function exampleFunction() {\n  return 'Hello, World!';\n}\n\nexampleFunction().then(console.log); // Output: Hello, World!\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"await\"}),\" \\u5173\\u952E\\u5B57\"]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"await\"}),\" \\u5173\\u952E\\u5B57\\u53EA\\u80FD\\u5728 \",(0,e.jsx)(n.code,{children:\"async\"}),\" \\u51FD\\u6570\\u4E2D\\u4F7F\\u7528\\u3002\\u5B83\\u4F1A\\u6682\\u505C\\u51FD\\u6570\\u7684\\u6267\\u884C\\uFF0C\\u76F4\\u5230 Promise \\u88AB\\u89E3\\u6790\\uFF0C\\u7136\\u540E\\u8FD4\\u56DE\\u89E3\\u6790\\u540E\\u7684\\u503C\\u3002\\u5982\\u679C Promise \\u88AB\\u62D2\\u7EDD\\uFF0C\\u5B83\\u4F1A\\u629B\\u51FA\\u4E00\\u4E2A\\u9519\\u8BEF\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"try...catch\"}),\" \\u5757\\u6355\\u83B7\\u8BE5\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch(\n      'https://jsonplaceholder.typicode.com/posts/1',\n    );\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\nfetchData();\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7B80\\u5316\\u5F02\\u6B65\\u4EE3\\u7801\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 \",(0,e.jsx)(n.code,{children:\"async/await\"}),\" \\u4E4B\\u524D\\uFF0C\\u5904\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u901A\\u5E38\\u6D89\\u53CA\\u94FE\\u63A5\\u591A\\u4E2A \",(0,e.jsx)(n.code,{children:\".then()\"}),\" \\u8C03\\u7528\\uFF0C\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u201C\\u56DE\\u8C03\\u5730\\u72F1\\u201D\\u6216\\u201C\\u91D1\\u5B57\\u5854\\u5F0F\\u5384\\u8FD0\\u201D\\u3002\",(0,e.jsx)(n.code,{children:\"async/await\"}),\" \\u6241\\u5E73\\u5316\\u4E86\\u8FD9\\u79CD\\u7ED3\\u6784\\uFF0C\\u4F7F\\u4EE3\\u7801\\u66F4\\u6613\\u8BFB\\uFF0C\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u3002\"]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528 Promise \\u7684\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/posts/1')\n  .then((response) => response.json())\n  .then((data) => {\n    console.log(data);\n  })\n  .catch((error) => {\n    console.error('Error fetching data:', error);\n  });\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528 async/await \\u7684\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch(\n      'https://jsonplaceholder.typicode.com/posts/1',\n    );\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\nfetchData();\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9519\\u8BEF\\u5904\\u7406\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E0E Promise \\u76F8\\u6BD4\\uFF0C\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"async/await\"}),\" \\u8FDB\\u884C\\u9519\\u8BEF\\u5904\\u7406\\u66F4\\u76F4\\u63A5\\u3002\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"try...catch\"}),\" \\u5757\\u6765\\u5904\\u7406\\u9519\\u8BEF\\uFF0C\\u4F7F\\u4EE3\\u7801\\u66F4\\u6E05\\u6670\\u3001\\u66F4\\u76F4\\u89C2\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch('https://jsonplaceholder.typicod.com/posts/1'); // Typo in URL\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\nfetchData();\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function\",children:\"MDN Web \\u6587\\u6863\\uFF1Aasync function\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await\",children:\"MDN Web \\u6587\\u6863\\uFF1Aawait\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://zh.javascript.info/async-await\",children:\"JavaScript.info\\uFF1AAsync/await\"})}),`\n`]})]})}function D(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,Object.assign({},c,{children:(0,e.jsx)(h,c)})):h(c)}var x=D;return j(N);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),w=(c,n)=>{for(var r in n)t(c,r,{get:n[r],enumerable:!0})},s=(c,n,r,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let a of y(n))!u.call(c,a)&&a!==r&&t(c,a,{get:()=>n[a],enumerable:!(o=f(n,a))||o.enumerable});return c};var j=(c,n,r)=>(r=c!=null?p(m(c)):{},s(n||!c||!c.__esModule?t(r,\"default\",{value:c,enumerable:!0}):r,c)),v=c=>s(t({},\"__esModule\",{value:!0}),c);var l=g((P,i)=>{i.exports=_jsx_runtime});var x={};w(x,{default:()=>d,frontmatter:()=>D});var e=j(l()),D={title:\"\\u4EC0\\u4E48\\u662F async/await \\u4EE5\\u53CA\\u5B83\\u5982\\u4F55\\u7B80\\u5316\\u5F02\\u6B65\\u4EE3\\u7801\\uFF1F\"};function h(c){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"async/await\"}),\" \\u662F JavaScript \\u4E2D\\u4E00\\u79CD\\u73B0\\u4EE3\\u8BED\\u6CD5\\uFF0C\\u5B83\\u7B80\\u5316\\u4E86\\u5904\\u7406 Promise \\u7684\\u8FC7\\u7A0B\\u3002\\u901A\\u8FC7\\u5728\\u51FD\\u6570\\u524D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"async\"}),\" \\u5173\\u952E\\u5B57\\uFF0C\\u4F60\\u53EF\\u4EE5\\u5728\\u8BE5\\u51FD\\u6570\\u4E2D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"await\"}),\" \\u5173\\u952E\\u5B57\\u6765\\u6682\\u505C\\u6267\\u884C\\uFF0C\\u76F4\\u5230 Promise \\u88AB\\u89E3\\u6790\\u3002\\u8FD9\\u4F7F\\u5F97\\u5F02\\u6B65\\u4EE3\\u7801\\u770B\\u8D77\\u6765\\u66F4\\u50CF\\u540C\\u6B65\\u4EE3\\u7801\\uFF0C\\u5E76\\u4E14\\u884C\\u4E3A\\u4E5F\\u66F4\\u50CF\\u540C\\u6B65\\u4EE3\\u7801\\uFF0C\\u4ECE\\u800C\\u66F4\\u5BB9\\u6613\\u9605\\u8BFB\\u548C\\u7EF4\\u62A4\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch(\n      'https://jsonplaceholder.typicode.com/posts/1',\n    );\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\nfetchData();\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F async/await \\u4EE5\\u53CA\\u5B83\\u5982\\u4F55\\u7B80\\u5316\\u5F02\\u6B65\\u4EE3\\u7801\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"async/await \\u7B80\\u4ECB\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"async/await\"}),\" \\u662F ECMAScript 2017 (ES8) \\u4E2D\\u5F15\\u5165\\u7684\\u4E00\\u4E2A\\u7279\\u6027\\uFF0C\\u5B83\\u5141\\u8BB8\\u4F60\\u4EE5\\u66F4\\u50CF\\u540C\\u6B65\\u7684\\u65B9\\u5F0F\\u7F16\\u5199\\u5F02\\u6B65\\u4EE3\\u7801\\u3002\\u5B83\\u5EFA\\u7ACB\\u5728 Promise \\u7684\\u57FA\\u7840\\u4E0A\\uFF0C\\u5E76\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u6E05\\u6670\\u3001\\u66F4\\u6613\\u8BFB\\u7684\\u65B9\\u5F0F\\u6765\\u5904\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u3002\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"async\"}),\" \\u5173\\u952E\\u5B57\"]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"async\"}),\" \\u5173\\u952E\\u5B57\\u7528\\u4E8E\\u58F0\\u660E\\u4E00\\u4E2A\\u5F02\\u6B65\\u51FD\\u6570\\u3002\\u5F53\\u4E00\\u4E2A\\u51FD\\u6570\\u88AB\\u58F0\\u660E\\u4E3A \",(0,e.jsx)(n.code,{children:\"async\"}),\" \\u65F6\\uFF0C\\u5B83\\u4F1A\\u81EA\\u52A8\\u8FD4\\u56DE\\u4E00\\u4E2A Promise\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u4F60\\u53EF\\u4EE5\\u5728\\u5176\\u4E2D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"await\"}),\" \\u5173\\u952E\\u5B57\\u6765\\u6682\\u505C\\u51FD\\u6570\\u7684\\u6267\\u884C\\uFF0C\\u76F4\\u5230 Promise \\u88AB\\u89E3\\u6790\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`async function exampleFunction() {\n  return 'Hello, World!';\n}\n\nexampleFunction().then(console.log); // Output: Hello, World!\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"await\"}),\" \\u5173\\u952E\\u5B57\"]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"await\"}),\" \\u5173\\u952E\\u5B57\\u53EA\\u80FD\\u5728 \",(0,e.jsx)(n.code,{children:\"async\"}),\" \\u51FD\\u6570\\u4E2D\\u4F7F\\u7528\\u3002\\u5B83\\u4F1A\\u6682\\u505C\\u51FD\\u6570\\u7684\\u6267\\u884C\\uFF0C\\u76F4\\u5230 Promise \\u88AB\\u89E3\\u6790\\uFF0C\\u7136\\u540E\\u8FD4\\u56DE\\u89E3\\u6790\\u540E\\u7684\\u503C\\u3002\\u5982\\u679C Promise \\u88AB\\u62D2\\u7EDD\\uFF0C\\u5B83\\u4F1A\\u629B\\u51FA\\u4E00\\u4E2A\\u9519\\u8BEF\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"try...catch\"}),\" \\u5757\\u6355\\u83B7\\u8BE5\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch(\n      'https://jsonplaceholder.typicode.com/posts/1',\n    );\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\nfetchData();\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7B80\\u5316\\u5F02\\u6B65\\u4EE3\\u7801\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 \",(0,e.jsx)(n.code,{children:\"async/await\"}),\" \\u4E4B\\u524D\\uFF0C\\u5904\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u901A\\u5E38\\u6D89\\u53CA\\u94FE\\u63A5\\u591A\\u4E2A \",(0,e.jsx)(n.code,{children:\".then()\"}),\" \\u8C03\\u7528\\uFF0C\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u201C\\u56DE\\u8C03\\u5730\\u72F1\\u201D\\u6216\\u201C\\u91D1\\u5B57\\u5854\\u5F0F\\u5384\\u8FD0\\u201D\\u3002\",(0,e.jsx)(n.code,{children:\"async/await\"}),\" \\u6241\\u5E73\\u5316\\u4E86\\u8FD9\\u79CD\\u7ED3\\u6784\\uFF0C\\u4F7F\\u4EE3\\u7801\\u66F4\\u6613\\u8BFB\\uFF0C\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u3002\"]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528 Promise \\u7684\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/posts/1')\n  .then((response) => response.json())\n  .then((data) => {\n    console.log(data);\n  })\n  .catch((error) => {\n    console.error('Error fetching data:', error);\n  });\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528 async/await \\u7684\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch(\n      'https://jsonplaceholder.typicode.com/posts/1',\n    );\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\nfetchData();\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9519\\u8BEF\\u5904\\u7406\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E0E Promise \\u76F8\\u6BD4\\uFF0C\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"async/await\"}),\" \\u8FDB\\u884C\\u9519\\u8BEF\\u5904\\u7406\\u66F4\\u76F4\\u63A5\\u3002\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"try...catch\"}),\" \\u5757\\u6765\\u5904\\u7406\\u9519\\u8BEF\\uFF0C\\u4F7F\\u4EE3\\u7801\\u66F4\\u6E05\\u6670\\u3001\\u66F4\\u76F4\\u89C2\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch('https://jsonplaceholder.typicod.com/posts/1'); // Typo in URL\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\nfetchData();\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function\",children:\"MDN Web \\u6587\\u6863\\uFF1Aasync function\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await\",children:\"MDN Web \\u6587\\u6863\\uFF1Aawait\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://zh.javascript.info/async-await\",children:\"JavaScript.info\\uFF1AAsync/await\"})}),`\n`]})]})}function d(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,{...c,children:(0,e.jsx)(h,{...c})}):h(c)}return v(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-code-splitting-in-a-react-application/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-code-splitting-in-a-react-application/en-US.json
index 716103004..3047b7029 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-code-splitting-in-a-react-application/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-code-splitting-in-a-react-application/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-code-splitting-in-a-react-application/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),f=(i,e)=>{for(var t in e)o(i,t,{get:e[t],enumerable:!0})},l=(i,e,t,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!g.call(i,a)&&a!==t&&o(i,a,{get:()=>e[a],enumerable:!(c=p(e,a))||c.enumerable});return i};var b=(i,e,t)=>(t=i!=null?h(m(i)):{},l(e||!i||!i.__esModule?o(t,\"default\",{value:i,enumerable:!0}):t,i)),R=i=>l(o({},\"__esModule\",{value:!0}),i);var d=y((k,r)=>{r.exports=_jsx_runtime});var S={};f(S,{default:()=>x,frontmatter:()=>v});var n=b(d()),v={title:\"What is code splitting in a React application?\"};function s(i){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Code splitting in a React application is a technique used to improve performance by splitting the code into smaller chunks that can be loaded on demand. This helps in reducing the initial load time of the application. You can achieve code splitting using dynamic \",(0,n.jsx)(e.code,{children:\"import()\"}),\" statements or React's \",(0,n.jsx)(e.code,{children:\"React.lazy\"}),\" and \",(0,n.jsx)(e.code,{children:\"Suspense\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Using React.lazy and Suspense\nconst LazyComponent = React.lazy(() => import('./LazyComponent'));\n\nfunction App() {\n  return (\n    <React.Suspense fallback={<div>Loading...</div>}>\n      <LazyComponent />\n    </React.Suspense>\n  );\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is code splitting in a React application?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Introduction\"}),`\n`,(0,n.jsx)(e.p,{children:\"Code splitting is a performance optimization technique that involves breaking down your application's code into smaller, more manageable chunks. This allows the application to load only the necessary code initially and defer the loading of other parts until they are needed. This can significantly reduce the initial load time and improve the overall user experience.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How to implement code splitting\"}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Using dynamic \",(0,n.jsx)(e.code,{children:\"import()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Dynamic \",(0,n.jsx)(e.code,{children:\"import()\"}),\" is a JavaScript feature that allows you to load modules asynchronously. This can be used to split your code into separate chunks.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Dynamic import example\nimport('./module').then((module) => {\n  // Use the module\n});\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Using React.lazy and Suspense\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React provides built-in support for code splitting through \",(0,n.jsx)(e.code,{children:\"React.lazy\"}),\" and \",(0,n.jsx)(e.code,{children:\"Suspense\"}),\". \",(0,n.jsx)(e.code,{children:\"React.lazy\"}),\" allows you to render a dynamic import as a regular component, and \",(0,n.jsx)(e.code,{children:\"Suspense\"}),\" lets you specify a loading fallback while the component is being loaded.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Lazy loading a component\nconst LazyComponent = React.lazy(() => import('./LazyComponent'));\n\nfunction App() {\n  return (\n    <React.Suspense fallback={<div>Loading...</div>}>\n      <LazyComponent />\n    </React.Suspense>\n  );\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits of code splitting\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Improved performance\"}),\": By loading only the necessary code initially, you can reduce the initial load time of your application.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Better user experience\"}),\": Faster load times lead to a smoother and more responsive user experience.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Efficient resource usage\"}),\": Code splitting ensures that resources are used more efficiently by loading code only when it is needed.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Tools and libraries\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Webpack\"}),\": Webpack is a popular module bundler that supports code splitting out of the box. You can configure it to split your code into chunks automatically.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"React Loadable\"}),\": Although \",(0,n.jsx)(e.code,{children:\"React.lazy\"}),\" and \",(0,n.jsx)(e.code,{children:\"Suspense\"}),\" are the recommended ways to implement code splitting in React, \",(0,n.jsx)(e.code,{children:\"React Loadable\"}),\" is an older library that also provides similar functionality.\"]}),`\n`]}),`\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://react.dev/reference/react/lazy\",children:\"React documentation on React.lazy\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://webpack.js.org/guides/code-splitting/\",children:\"Webpack documentation on code splitting\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports\",children:\"MDN Web Docs on dynamic import\"})}),`\n`]})]})}function z(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(s,i)})):s(i)}var x=z;return R(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),R=(i,e)=>{for(var t in e)o(i,t,{get:e[t],enumerable:!0})},l=(i,e,t,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!y.call(i,a)&&a!==t&&o(i,a,{get:()=>e[a],enumerable:!(c=u(e,a))||c.enumerable});return i};var b=(i,e,t)=>(t=i!=null?p(g(i)):{},l(e||!i||!i.__esModule?o(t,\"default\",{value:i,enumerable:!0}):t,i)),v=i=>l(o({},\"__esModule\",{value:!0}),i);var d=f((L,r)=>{r.exports=_jsx_runtime});var x={};R(x,{default:()=>h,frontmatter:()=>z});var n=b(d()),z={title:\"What is code splitting in a React application?\"};function s(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Code splitting in a React application is a technique used to improve performance by splitting the code into smaller chunks that can be loaded on demand. This helps in reducing the initial load time of the application. You can achieve code splitting using dynamic \",(0,n.jsx)(e.code,{children:\"import()\"}),\" statements or React's \",(0,n.jsx)(e.code,{children:\"React.lazy\"}),\" and \",(0,n.jsx)(e.code,{children:\"Suspense\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Using React.lazy and Suspense\nconst LazyComponent = React.lazy(() => import('./LazyComponent'));\n\nfunction App() {\n  return (\n    <React.Suspense fallback={<div>Loading...</div>}>\n      <LazyComponent />\n    </React.Suspense>\n  );\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is code splitting in a React application?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Introduction\"}),`\n`,(0,n.jsx)(e.p,{children:\"Code splitting is a performance optimization technique that involves breaking down your application's code into smaller, more manageable chunks. This allows the application to load only the necessary code initially and defer the loading of other parts until they are needed. This can significantly reduce the initial load time and improve the overall user experience.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How to implement code splitting\"}),`\n`,(0,n.jsxs)(e.h4,{children:[\"Using dynamic \",(0,n.jsx)(e.code,{children:\"import()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Dynamic \",(0,n.jsx)(e.code,{children:\"import()\"}),\" is a JavaScript feature that allows you to load modules asynchronously. This can be used to split your code into separate chunks.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Dynamic import example\nimport('./module').then((module) => {\n  // Use the module\n});\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Using React.lazy and Suspense\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React provides built-in support for code splitting through \",(0,n.jsx)(e.code,{children:\"React.lazy\"}),\" and \",(0,n.jsx)(e.code,{children:\"Suspense\"}),\". \",(0,n.jsx)(e.code,{children:\"React.lazy\"}),\" allows you to render a dynamic import as a regular component, and \",(0,n.jsx)(e.code,{children:\"Suspense\"}),\" lets you specify a loading fallback while the component is being loaded.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Lazy loading a component\nconst LazyComponent = React.lazy(() => import('./LazyComponent'));\n\nfunction App() {\n  return (\n    <React.Suspense fallback={<div>Loading...</div>}>\n      <LazyComponent />\n    </React.Suspense>\n  );\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits of code splitting\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Improved performance\"}),\": By loading only the necessary code initially, you can reduce the initial load time of your application.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Better user experience\"}),\": Faster load times lead to a smoother and more responsive user experience.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Efficient resource usage\"}),\": Code splitting ensures that resources are used more efficiently by loading code only when it is needed.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Tools and libraries\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Webpack\"}),\": Webpack is a popular module bundler that supports code splitting out of the box. You can configure it to split your code into chunks automatically.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"React Loadable\"}),\": Although \",(0,n.jsx)(e.code,{children:\"React.lazy\"}),\" and \",(0,n.jsx)(e.code,{children:\"Suspense\"}),\" are the recommended ways to implement code splitting in React, \",(0,n.jsx)(e.code,{children:\"React Loadable\"}),\" is an older library that also provides similar functionality.\"]}),`\n`]}),`\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://react.dev/reference/react/lazy\",children:\"React documentation on React.lazy\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://webpack.js.org/guides/code-splitting/\",children:\"Webpack documentation on code splitting\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports\",children:\"MDN Web Docs on dynamic import\"})}),`\n`]})]})}function h(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(s,{...i})}):s(i)}return v(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-code-splitting-in-a-react-application/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-code-splitting-in-a-react-application/zh-CN.json
index ecc958d15..a3a336fd3 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-code-splitting-in-a-react-application/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-code-splitting-in-a-react-application/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-code-splitting-in-a-react-application/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var R=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),y=(c,n)=>{for(var r in n)i(c,r,{get:n[r],enumerable:!0})},l=(c,n,r,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of m(n))!g.call(c,t)&&t!==r&&i(c,t,{get:()=>n[t],enumerable:!(a=p(n,t))||a.enumerable});return c};var z=(c,n,r)=>(r=c!=null?s(u(c)):{},l(n||!c||!c.__esModule?i(r,\"default\",{value:c,enumerable:!0}):r,c)),f=c=>l(i({},\"__esModule\",{value:!0}),c);var o=R((x,d)=>{d.exports=_jsx_runtime});var v={};y(v,{default:()=>j,frontmatter:()=>S});var e=z(o()),S={title:\"React \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7684\\u4EE3\\u7801\\u62C6\\u5206\\u662F\\u4EC0\\u4E48\\uFF1F\"};function h(c){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},c.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"React \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7684\\u4EE3\\u7801\\u62C6\\u5206\\u662F\\u4E00\\u79CD\\u901A\\u8FC7\\u5C06\\u4EE3\\u7801\\u62C6\\u5206\\u6210\\u66F4\\u5C0F\\u7684\\u5757\\uFF08\\u53EF\\u4EE5\\u6309\\u9700\\u52A0\\u8F7D\\uFF09\\u6765\\u63D0\\u9AD8\\u6027\\u80FD\\u7684\\u6280\\u672F\\u3002\\u8FD9\\u6709\\u52A9\\u4E8E\\u51CF\\u5C11\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u521D\\u59CB\\u52A0\\u8F7D\\u65F6\\u95F4\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u52A8\\u6001 \",(0,e.jsx)(n.code,{children:\"import()\"}),\" \\u8BED\\u53E5\\u6216 React \\u7684 \",(0,e.jsx)(n.code,{children:\"React.lazy\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"Suspense\"}),\" \\u6765\\u5B9E\\u73B0\\u4EE3\\u7801\\u62C6\\u5206\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// \\u4F7F\\u7528 React.lazy \\u548C Suspense\nconst LazyComponent = React.lazy(() => import('./LazyComponent'));\n\nfunction App() {\n  return (\n    <React.Suspense fallback={<div>Loading...</div>}>\n      <LazyComponent />\n    </React.Suspense>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7684\\u4EE3\\u7801\\u62C6\\u5206\\u662F\\u4EC0\\u4E48\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7B80\\u4ECB\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE3\\u7801\\u62C6\\u5206\\u662F\\u4E00\\u79CD\\u6027\\u80FD\\u4F18\\u5316\\u6280\\u672F\\uFF0C\\u5B83\\u6D89\\u53CA\\u5C06\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4EE3\\u7801\\u5206\\u89E3\\u6210\\u66F4\\u5C0F\\u3001\\u66F4\\u6613\\u4E8E\\u7BA1\\u7406\\u7684\\u5757\\u3002\\u8FD9\\u5141\\u8BB8\\u5E94\\u7528\\u7A0B\\u5E8F\\u6700\\u521D\\u53EA\\u52A0\\u8F7D\\u5FC5\\u8981\\u7684\\u4EE3\\u7801\\uFF0C\\u5E76\\u5C06\\u5176\\u4ED6\\u90E8\\u5206\\u7684\\u52A0\\u8F7D\\u63A8\\u8FDF\\u5230\\u9700\\u8981\\u65F6\\u3002\\u8FD9\\u53EF\\u4EE5\\u663E\\u7740\\u51CF\\u5C11\\u521D\\u59CB\\u52A0\\u8F7D\\u65F6\\u95F4\\u5E76\\u6539\\u5584\\u6574\\u4F53\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5982\\u4F55\\u5B9E\\u73B0\\u4EE3\\u7801\\u62C6\\u5206\"}),`\n`,(0,e.jsxs)(n.h4,{children:[\"\\u4F7F\\u7528\\u52A8\\u6001 \",(0,e.jsx)(n.code,{children:\"import()\"})]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u52A8\\u6001 \",(0,e.jsx)(n.code,{children:\"import()\"}),\" \\u662F\\u4E00\\u4E2A JavaScript \\u7279\\u6027\\uFF0C\\u5141\\u8BB8\\u60A8\\u5F02\\u6B65\\u52A0\\u8F7D\\u6A21\\u5757\\u3002\\u8FD9\\u53EF\\u4EE5\\u7528\\u4E8E\\u5C06\\u4EE3\\u7801\\u62C6\\u5206\\u6210\\u5355\\u72EC\\u7684\\u5757\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// \\u52A8\\u6001\\u5BFC\\u5165\\u793A\\u4F8B\nimport('./module').then((module) => {\n  // \\u4F7F\\u7528\\u8BE5\\u6A21\\u5757\n});\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528 React.lazy \\u548C Suspense\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"React \\u901A\\u8FC7 \",(0,e.jsx)(n.code,{children:\"React.lazy\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"Suspense\"}),\" \\u63D0\\u4F9B\\u5BF9\\u4EE3\\u7801\\u62C6\\u5206\\u7684\\u5185\\u7F6E\\u652F\\u6301\\u3002\",(0,e.jsx)(n.code,{children:\"React.lazy\"}),\" \\u5141\\u8BB8\\u60A8\\u5C06\\u52A8\\u6001\\u5BFC\\u5165\\u5448\\u73B0\\u4E3A\\u5E38\\u89C4\\u7EC4\\u4EF6\\uFF0C\\u800C \",(0,e.jsx)(n.code,{children:\"Suspense\"}),\" \\u5141\\u8BB8\\u60A8\\u5728\\u52A0\\u8F7D\\u7EC4\\u4EF6\\u65F6\\u6307\\u5B9A\\u52A0\\u8F7D\\u56DE\\u9000\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// \\u5EF6\\u8FDF\\u52A0\\u8F7D\\u7EC4\\u4EF6\nconst LazyComponent = React.lazy(() => import('./LazyComponent'));\n\nfunction App() {\n  return (\n    <React.Suspense fallback={<div>Loading...</div>}>\n      <LazyComponent />\n    </React.Suspense>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EE3\\u7801\\u62C6\\u5206\\u7684\\u597D\\u5904\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u63D0\\u9AD8\\u6027\\u80FD\"}),\"\\uFF1A\\u901A\\u8FC7\\u6700\\u521D\\u53EA\\u52A0\\u8F7D\\u5FC5\\u8981\\u7684\\u4EE3\\u7801\\uFF0C\\u60A8\\u53EF\\u4EE5\\u51CF\\u5C11\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u521D\\u59CB\\u52A0\\u8F7D\\u65F6\\u95F4\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u66F4\\u597D\\u7684\\u7528\\u6237\\u4F53\\u9A8C\"}),\"\\uFF1A\\u66F4\\u5FEB\\u7684\\u52A0\\u8F7D\\u65F6\\u95F4\\u5E26\\u6765\\u66F4\\u6D41\\u7545\\u3001\\u54CD\\u5E94\\u66F4\\u5FEB\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6709\\u6548\\u7684\\u8D44\\u6E90\\u4F7F\\u7528\"}),\"\\uFF1A\\u4EE3\\u7801\\u62C6\\u5206\\u786E\\u4FDD\\u4EC5\\u5728\\u9700\\u8981\\u65F6\\u52A0\\u8F7D\\u4EE3\\u7801\\uFF0C\\u4ECE\\u800C\\u66F4\\u6709\\u6548\\u5730\\u4F7F\\u7528\\u8D44\\u6E90\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5DE5\\u5177\\u548C\\u5E93\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Webpack\"}),\"\\uFF1AWebpack \\u662F\\u4E00\\u4E2A\\u6D41\\u884C\\u7684\\u6A21\\u5757\\u6253\\u5305\\u5668\\uFF0C\\u5B83\\u5F00\\u7BB1\\u5373\\u7528\\u5730\\u652F\\u6301\\u4EE3\\u7801\\u62C6\\u5206\\u3002\\u60A8\\u53EF\\u4EE5\\u5C06\\u5176\\u914D\\u7F6E\\u4E3A\\u81EA\\u52A8\\u5C06\\u4EE3\\u7801\\u62C6\\u5206\\u6210\\u5757\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"React Loadable\"}),\"\\uFF1A\\u867D\\u7136 \",(0,e.jsx)(n.code,{children:\"React.lazy\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"Suspense\"}),\" \\u662F\\u5728 React \\u4E2D\\u5B9E\\u73B0\\u4EE3\\u7801\\u62C6\\u5206\\u7684\\u63A8\\u8350\\u65B9\\u6CD5\\uFF0C\\u4F46 \",(0,e.jsx)(n.code,{children:\"React Loadable\"}),\" \\u662F\\u4E00\\u4E2A\\u8F83\\u65E7\\u7684\\u5E93\\uFF0C\\u4E5F\\u63D0\\u4F9B\\u4E86\\u7C7B\\u4F3C\\u7684\\u529F\\u80FD\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react/lazy\",children:\"React documentation on React.lazy\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://webpack.js.org/guides/code-splitting/\",children:\"Webpack documentation on code splitting\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports\",children:\"MDN Web Docs on dynamic import\"})}),`\n`]})]})}function b(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,Object.assign({},c,{children:(0,e.jsx)(h,c)})):h(c)}var j=b;return f(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),z=(c,n)=>{for(var r in n)i(c,r,{get:n[r],enumerable:!0})},a=(c,n,r,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of u(n))!g.call(c,t)&&t!==r&&i(c,t,{get:()=>n[t],enumerable:!(l=m(n,t))||l.enumerable});return c};var f=(c,n,r)=>(r=c!=null?p(R(c)):{},a(n||!c||!c.__esModule?i(r,\"default\",{value:c,enumerable:!0}):r,c)),S=c=>a(i({},\"__esModule\",{value:!0}),c);var o=y((j,d)=>{d.exports=_jsx_runtime});var L={};z(L,{default:()=>s,frontmatter:()=>v});var e=f(o()),v={title:\"React \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7684\\u4EE3\\u7801\\u62C6\\u5206\\u662F\\u4EC0\\u4E48\\uFF1F\"};function h(c){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...c.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"React \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7684\\u4EE3\\u7801\\u62C6\\u5206\\u662F\\u4E00\\u79CD\\u901A\\u8FC7\\u5C06\\u4EE3\\u7801\\u62C6\\u5206\\u6210\\u66F4\\u5C0F\\u7684\\u5757\\uFF08\\u53EF\\u4EE5\\u6309\\u9700\\u52A0\\u8F7D\\uFF09\\u6765\\u63D0\\u9AD8\\u6027\\u80FD\\u7684\\u6280\\u672F\\u3002\\u8FD9\\u6709\\u52A9\\u4E8E\\u51CF\\u5C11\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u521D\\u59CB\\u52A0\\u8F7D\\u65F6\\u95F4\\u3002\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u52A8\\u6001 \",(0,e.jsx)(n.code,{children:\"import()\"}),\" \\u8BED\\u53E5\\u6216 React \\u7684 \",(0,e.jsx)(n.code,{children:\"React.lazy\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"Suspense\"}),\" \\u6765\\u5B9E\\u73B0\\u4EE3\\u7801\\u62C6\\u5206\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// \\u4F7F\\u7528 React.lazy \\u548C Suspense\nconst LazyComponent = React.lazy(() => import('./LazyComponent'));\n\nfunction App() {\n  return (\n    <React.Suspense fallback={<div>Loading...</div>}>\n      <LazyComponent />\n    </React.Suspense>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7684\\u4EE3\\u7801\\u62C6\\u5206\\u662F\\u4EC0\\u4E48\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7B80\\u4ECB\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE3\\u7801\\u62C6\\u5206\\u662F\\u4E00\\u79CD\\u6027\\u80FD\\u4F18\\u5316\\u6280\\u672F\\uFF0C\\u5B83\\u6D89\\u53CA\\u5C06\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4EE3\\u7801\\u5206\\u89E3\\u6210\\u66F4\\u5C0F\\u3001\\u66F4\\u6613\\u4E8E\\u7BA1\\u7406\\u7684\\u5757\\u3002\\u8FD9\\u5141\\u8BB8\\u5E94\\u7528\\u7A0B\\u5E8F\\u6700\\u521D\\u53EA\\u52A0\\u8F7D\\u5FC5\\u8981\\u7684\\u4EE3\\u7801\\uFF0C\\u5E76\\u5C06\\u5176\\u4ED6\\u90E8\\u5206\\u7684\\u52A0\\u8F7D\\u63A8\\u8FDF\\u5230\\u9700\\u8981\\u65F6\\u3002\\u8FD9\\u53EF\\u4EE5\\u663E\\u7740\\u51CF\\u5C11\\u521D\\u59CB\\u52A0\\u8F7D\\u65F6\\u95F4\\u5E76\\u6539\\u5584\\u6574\\u4F53\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5982\\u4F55\\u5B9E\\u73B0\\u4EE3\\u7801\\u62C6\\u5206\"}),`\n`,(0,e.jsxs)(n.h4,{children:[\"\\u4F7F\\u7528\\u52A8\\u6001 \",(0,e.jsx)(n.code,{children:\"import()\"})]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u52A8\\u6001 \",(0,e.jsx)(n.code,{children:\"import()\"}),\" \\u662F\\u4E00\\u4E2A JavaScript \\u7279\\u6027\\uFF0C\\u5141\\u8BB8\\u60A8\\u5F02\\u6B65\\u52A0\\u8F7D\\u6A21\\u5757\\u3002\\u8FD9\\u53EF\\u4EE5\\u7528\\u4E8E\\u5C06\\u4EE3\\u7801\\u62C6\\u5206\\u6210\\u5355\\u72EC\\u7684\\u5757\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// \\u52A8\\u6001\\u5BFC\\u5165\\u793A\\u4F8B\nimport('./module').then((module) => {\n  // \\u4F7F\\u7528\\u8BE5\\u6A21\\u5757\n});\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528 React.lazy \\u548C Suspense\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"React \\u901A\\u8FC7 \",(0,e.jsx)(n.code,{children:\"React.lazy\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"Suspense\"}),\" \\u63D0\\u4F9B\\u5BF9\\u4EE3\\u7801\\u62C6\\u5206\\u7684\\u5185\\u7F6E\\u652F\\u6301\\u3002\",(0,e.jsx)(n.code,{children:\"React.lazy\"}),\" \\u5141\\u8BB8\\u60A8\\u5C06\\u52A8\\u6001\\u5BFC\\u5165\\u5448\\u73B0\\u4E3A\\u5E38\\u89C4\\u7EC4\\u4EF6\\uFF0C\\u800C \",(0,e.jsx)(n.code,{children:\"Suspense\"}),\" \\u5141\\u8BB8\\u60A8\\u5728\\u52A0\\u8F7D\\u7EC4\\u4EF6\\u65F6\\u6307\\u5B9A\\u52A0\\u8F7D\\u56DE\\u9000\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`// \\u5EF6\\u8FDF\\u52A0\\u8F7D\\u7EC4\\u4EF6\nconst LazyComponent = React.lazy(() => import('./LazyComponent'));\n\nfunction App() {\n  return (\n    <React.Suspense fallback={<div>Loading...</div>}>\n      <LazyComponent />\n    </React.Suspense>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EE3\\u7801\\u62C6\\u5206\\u7684\\u597D\\u5904\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u63D0\\u9AD8\\u6027\\u80FD\"}),\"\\uFF1A\\u901A\\u8FC7\\u6700\\u521D\\u53EA\\u52A0\\u8F7D\\u5FC5\\u8981\\u7684\\u4EE3\\u7801\\uFF0C\\u60A8\\u53EF\\u4EE5\\u51CF\\u5C11\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u521D\\u59CB\\u52A0\\u8F7D\\u65F6\\u95F4\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u66F4\\u597D\\u7684\\u7528\\u6237\\u4F53\\u9A8C\"}),\"\\uFF1A\\u66F4\\u5FEB\\u7684\\u52A0\\u8F7D\\u65F6\\u95F4\\u5E26\\u6765\\u66F4\\u6D41\\u7545\\u3001\\u54CD\\u5E94\\u66F4\\u5FEB\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6709\\u6548\\u7684\\u8D44\\u6E90\\u4F7F\\u7528\"}),\"\\uFF1A\\u4EE3\\u7801\\u62C6\\u5206\\u786E\\u4FDD\\u4EC5\\u5728\\u9700\\u8981\\u65F6\\u52A0\\u8F7D\\u4EE3\\u7801\\uFF0C\\u4ECE\\u800C\\u66F4\\u6709\\u6548\\u5730\\u4F7F\\u7528\\u8D44\\u6E90\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5DE5\\u5177\\u548C\\u5E93\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Webpack\"}),\"\\uFF1AWebpack \\u662F\\u4E00\\u4E2A\\u6D41\\u884C\\u7684\\u6A21\\u5757\\u6253\\u5305\\u5668\\uFF0C\\u5B83\\u5F00\\u7BB1\\u5373\\u7528\\u5730\\u652F\\u6301\\u4EE3\\u7801\\u62C6\\u5206\\u3002\\u60A8\\u53EF\\u4EE5\\u5C06\\u5176\\u914D\\u7F6E\\u4E3A\\u81EA\\u52A8\\u5C06\\u4EE3\\u7801\\u62C6\\u5206\\u6210\\u5757\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"React Loadable\"}),\"\\uFF1A\\u867D\\u7136 \",(0,e.jsx)(n.code,{children:\"React.lazy\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"Suspense\"}),\" \\u662F\\u5728 React \\u4E2D\\u5B9E\\u73B0\\u4EE3\\u7801\\u62C6\\u5206\\u7684\\u63A8\\u8350\\u65B9\\u6CD5\\uFF0C\\u4F46 \",(0,e.jsx)(n.code,{children:\"React Loadable\"}),\" \\u662F\\u4E00\\u4E2A\\u8F83\\u65E7\\u7684\\u5E93\\uFF0C\\u4E5F\\u63D0\\u4F9B\\u4E86\\u7C7B\\u4F3C\\u7684\\u529F\\u80FD\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react/lazy\",children:\"React documentation on React.lazy\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://webpack.js.org/guides/code-splitting/\",children:\"Webpack documentation on code splitting\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports\",children:\"MDN Web Docs on dynamic import\"})}),`\n`]})]})}function s(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,{...c,children:(0,e.jsx)(h,{...c})}):h(c)}return S(L);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-cross-site-scripting-xss-and-how-can-you-prevent-it/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-cross-site-scripting-xss-and-how-can-you-prevent-it/en-US.json
index 7825daf34..ee9120c0e 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-cross-site-scripting-xss-and-how-can-you-prevent-it/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-cross-site-scripting-xss-and-how-can-you-prevent-it/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-cross-site-scripting-xss-and-how-can-you-prevent-it/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},c=(t,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!g.call(t,s)&&s!==i&&r(t,s,{get:()=>e[s],enumerable:!(a=u(e,s))||a.enumerable});return t};var f=(t,e,i)=>(i=t!=null?d(S(t)):{},c(e||!t||!t.__esModule?r(i,\"default\",{value:t,enumerable:!0}):i,t)),b=t=>c(r({},\"__esModule\",{value:!0}),t);var l=m((k,o)=>{o.exports=_jsx_runtime});var T={};y(T,{default:()=>C,frontmatter:()=>v});var n=f(l()),v={title:\"What is Cross-Site Scripting (XSS) and how can you prevent it?\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",ol:\"ol\",strong:\"strong\",h4:\"h4\",pre:\"pre\",code:\"code\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Cross-Site Scripting (XSS) is a security vulnerability that allows attackers to inject malicious scripts into web pages viewed by other users. This can lead to data theft, session hijacking, and other malicious activities. To prevent XSS, you should validate and sanitize user inputs, use Content Security Policy (CSP), and escape data before rendering it in the browser.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is Cross-Site Scripting (XSS) and how can you prevent it?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"What is Cross-Site Scripting (XSS)?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Cross-Site Scripting (XSS) is a type of security vulnerability typically found in web applications. It allows attackers to inject malicious scripts into content from otherwise trusted websites. These scripts can then be executed in the context of the user's browser, leading to various malicious activities such as:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Stealing cookies and session tokens\"}),`\n`,(0,n.jsx)(e.li,{children:\"Defacing websites\"}),`\n`,(0,n.jsx)(e.li,{children:\"Redirecting users to malicious sites\"}),`\n`,(0,n.jsx)(e.li,{children:\"Logging keystrokes\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"There are three main types of XSS attacks:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Stored XSS\"}),\": The malicious script is permanently stored on the target server, such as in a database, comment field, or forum post.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reflected XSS\"}),\": The malicious script is reflected off a web server, such as in an error message, search result, or any other response that includes some or all of the input sent to the server.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"DOM-based XSS\"}),\": The vulnerability exists in the client-side code rather than the server-side code. The malicious script is executed as a result of modifying the DOM environment in the victim's browser.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"How can you prevent XSS?\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Validate and sanitize user inputs\"}),`\n`,(0,n.jsx)(e.p,{children:\"Always validate and sanitize user inputs to ensure they do not contain malicious code. Use libraries and frameworks that provide built-in functions for input validation and sanitization.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const sanitizeHtml = require('sanitize-html');\n\nconst cleanInput = sanitizeHtml(userInput);\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Use Content Security Policy (CSP)\"}),`\n`,(0,n.jsx)(e.p,{children:\"A Content Security Policy (CSP) is a security feature that helps prevent XSS attacks by specifying which dynamic resources are allowed to load. This can be done by setting HTTP headers.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Escape data before rendering\"}),`\n`,(0,n.jsx)(e.p,{children:\"Always escape data before rendering it in the browser to prevent the execution of malicious scripts. Use functions provided by your framework or library to escape HTML, JavaScript, and other content.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const escapeHtml = (str) => {\n  return str\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n    .replace(/'/g, '&#039;');\n};\n\nconst safeOutput = escapeHtml(userInput);\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Use HTTP-only cookies\"}),`\n`,(0,n.jsx)(e.p,{children:\"Set cookies to be HTTP-only to prevent client-side scripts from accessing them. This can help mitigate the risk of session hijacking.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Set-Cookie: sessionId=abc123; HttpOnly;\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Regularly update dependencies\"}),`\n`,(0,n.jsx)(e.p,{children:\"Keep your libraries and frameworks up to date to ensure you have the latest security patches and features.\"}),`\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://cheatsheetseries.owasp.org/cheatsheets/XSS_Prevention_Cheat_Sheet.html\",children:\"OWASP XSS Prevention Cheat Sheet\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP\",children:\"MDN Web Docs: Content Security Policy (CSP)\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/security/csp\",children:\"Google Web Fundamentals: Preventing XSS\"})}),`\n`]})]})}function w(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var C=w;return b(T);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var i in e)s(t,i,{get:e[i],enumerable:!0})},c=(t,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of S(e))!m.call(t,r)&&r!==i&&s(t,r,{get:()=>e[r],enumerable:!(a=p(e,r))||a.enumerable});return t};var b=(t,e,i)=>(i=t!=null?u(g(t)):{},c(e||!t||!t.__esModule?s(i,\"default\",{value:t,enumerable:!0}):i,t)),v=t=>c(s({},\"__esModule\",{value:!0}),t);var l=y((P,o)=>{o.exports=_jsx_runtime});var C={};f(C,{default:()=>d,frontmatter:()=>w});var n=b(l()),w={title:\"What is Cross-Site Scripting (XSS) and how can you prevent it?\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Cross-Site Scripting (XSS) is a security vulnerability that allows attackers to inject malicious scripts into web pages viewed by other users. This can lead to data theft, session hijacking, and other malicious activities. To prevent XSS, you should validate and sanitize user inputs, use Content Security Policy (CSP), and escape data before rendering it in the browser.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is Cross-Site Scripting (XSS) and how can you prevent it?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"What is Cross-Site Scripting (XSS)?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Cross-Site Scripting (XSS) is a type of security vulnerability typically found in web applications. It allows attackers to inject malicious scripts into content from otherwise trusted websites. These scripts can then be executed in the context of the user's browser, leading to various malicious activities such as:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Stealing cookies and session tokens\"}),`\n`,(0,n.jsx)(e.li,{children:\"Defacing websites\"}),`\n`,(0,n.jsx)(e.li,{children:\"Redirecting users to malicious sites\"}),`\n`,(0,n.jsx)(e.li,{children:\"Logging keystrokes\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"There are three main types of XSS attacks:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Stored XSS\"}),\": The malicious script is permanently stored on the target server, such as in a database, comment field, or forum post.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reflected XSS\"}),\": The malicious script is reflected off a web server, such as in an error message, search result, or any other response that includes some or all of the input sent to the server.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"DOM-based XSS\"}),\": The vulnerability exists in the client-side code rather than the server-side code. The malicious script is executed as a result of modifying the DOM environment in the victim's browser.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"How can you prevent XSS?\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Validate and sanitize user inputs\"}),`\n`,(0,n.jsx)(e.p,{children:\"Always validate and sanitize user inputs to ensure they do not contain malicious code. Use libraries and frameworks that provide built-in functions for input validation and sanitization.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const sanitizeHtml = require('sanitize-html');\n\nconst cleanInput = sanitizeHtml(userInput);\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Use Content Security Policy (CSP)\"}),`\n`,(0,n.jsx)(e.p,{children:\"A Content Security Policy (CSP) is a security feature that helps prevent XSS attacks by specifying which dynamic resources are allowed to load. This can be done by setting HTTP headers.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Escape data before rendering\"}),`\n`,(0,n.jsx)(e.p,{children:\"Always escape data before rendering it in the browser to prevent the execution of malicious scripts. Use functions provided by your framework or library to escape HTML, JavaScript, and other content.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const escapeHtml = (str) => {\n  return str\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n    .replace(/'/g, '&#039;');\n};\n\nconst safeOutput = escapeHtml(userInput);\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Use HTTP-only cookies\"}),`\n`,(0,n.jsx)(e.p,{children:\"Set cookies to be HTTP-only to prevent client-side scripts from accessing them. This can help mitigate the risk of session hijacking.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-http\",children:`Set-Cookie: sessionId=abc123; HttpOnly;\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Regularly update dependencies\"}),`\n`,(0,n.jsx)(e.p,{children:\"Keep your libraries and frameworks up to date to ensure you have the latest security patches and features.\"}),`\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://cheatsheetseries.owasp.org/cheatsheets/XSS_Prevention_Cheat_Sheet.html\",children:\"OWASP XSS Prevention Cheat Sheet\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP\",children:\"MDN Web Docs: Content Security Policy (CSP)\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/security/csp\",children:\"Google Web Fundamentals: Preventing XSS\"})}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return v(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-cross-site-scripting-xss-and-how-can-you-prevent-it/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-cross-site-scripting-xss-and-how-can-you-prevent-it/zh-CN.json
index 46e30dad6..afdd8e4b5 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-cross-site-scripting-xss-and-how-can-you-prevent-it/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-cross-site-scripting-xss-and-how-can-you-prevent-it/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-cross-site-scripting-xss-and-how-can-you-prevent-it/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),X=(l,n)=>{for(var r in n)t(l,r,{get:n[r],enumerable:!0})},h=(l,n,r,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of S(n))!g.call(l,c)&&c!==r&&t(l,c,{get:()=>n[c],enumerable:!(i=p(n,c))||i.enumerable});return l};var f=(l,n,r)=>(r=l!=null?a(u(l)):{},h(n||!l||!l.__esModule?t(r,\"default\",{value:l,enumerable:!0}):r,l)),j=l=>h(t({},\"__esModule\",{value:!0}),l);var d=m((y,s)=>{s.exports=_jsx_runtime});var T={};X(T,{default:()=>H,frontmatter:()=>x});var e=f(d()),x={title:\"\\u4EC0\\u4E48\\u662F\\u8DE8\\u7AD9\\u811A\\u672C (XSS) \\u4EE5\\u53CA\\u5982\\u4F55\\u9632\\u6B62\\u5B83\\uFF1F\"};function o(l){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",ol:\"ol\",strong:\"strong\",h4:\"h4\",pre:\"pre\",code:\"code\",a:\"a\"},l.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8DE8\\u7AD9\\u811A\\u672C (XSS) \\u662F\\u4E00\\u79CD\\u5B89\\u5168\\u6F0F\\u6D1E\\uFF0C\\u5B83\\u5141\\u8BB8\\u653B\\u51FB\\u8005\\u5C06\\u6076\\u610F\\u811A\\u672C\\u6CE8\\u5165\\u5230\\u5176\\u4ED6\\u7528\\u6237\\u67E5\\u770B\\u7684\\u7F51\\u9875\\u4E2D\\u3002\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u6570\\u636E\\u76D7\\u7A83\\u3001\\u4F1A\\u8BDD\\u52AB\\u6301\\u548C\\u5176\\u4ED6\\u6076\\u610F\\u6D3B\\u52A8\\u3002\\u4E3A\\u4E86\\u9632\\u6B62 XSS\\uFF0C\\u60A8\\u5E94\\u8BE5\\u9A8C\\u8BC1\\u548C\\u6E05\\u7406\\u7528\\u6237\\u8F93\\u5165\\uFF0C\\u4F7F\\u7528\\u5185\\u5BB9\\u5B89\\u5168\\u7B56\\u7565 (CSP)\\uFF0C\\u5E76\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u6E32\\u67D3\\u6570\\u636E\\u4E4B\\u524D\\u8F6C\\u4E49\\u5B83\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u8DE8\\u7AD9\\u811A\\u672C (XSS) \\u4EE5\\u53CA\\u5982\\u4F55\\u9632\\u6B62\\u5B83\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EC0\\u4E48\\u662F\\u8DE8\\u7AD9\\u811A\\u672C (XSS)\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8DE8\\u7AD9\\u811A\\u672C (XSS) \\u662F\\u4E00\\u79CD\\u901A\\u5E38\\u5728 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u53D1\\u73B0\\u7684\\u5B89\\u5168\\u6F0F\\u6D1E\\u3002\\u5B83\\u5141\\u8BB8\\u653B\\u51FB\\u8005\\u5C06\\u6076\\u610F\\u811A\\u672C\\u6CE8\\u5165\\u5230\\u6765\\u81EA\\u5176\\u4ED6\\u53EF\\u4FE1\\u7F51\\u7AD9\\u7684\\u5185\\u5BB9\\u4E2D\\u3002\\u7136\\u540E\\uFF0C\\u8FD9\\u4E9B\\u811A\\u672C\\u53EF\\u4EE5\\u5728\\u7528\\u6237\\u6D4F\\u89C8\\u5668\\u7684\\u4E0A\\u4E0B\\u6587\\u4E2D\\u6267\\u884C\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u5404\\u79CD\\u6076\\u610F\\u6D3B\\u52A8\\uFF0C\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u7A83\\u53D6 cookie \\u548C\\u4F1A\\u8BDD\\u4EE4\\u724C\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u7BE1\\u6539\\u7F51\\u7AD9\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5C06\\u7528\\u6237\\u91CD\\u5B9A\\u5411\\u5230\\u6076\\u610F\\u7F51\\u7AD9\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u8BB0\\u5F55\\u51FB\\u952E\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"XSS \\u653B\\u51FB\\u4E3B\\u8981\\u6709\\u4E09\\u79CD\\u7C7B\\u578B\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B58\\u50A8\\u578B XSS\"}),\"\\uFF1A\\u6076\\u610F\\u811A\\u672C\\u6C38\\u4E45\\u5B58\\u50A8\\u5728\\u76EE\\u6807\\u670D\\u52A1\\u5668\\u4E0A\\uFF0C\\u4F8B\\u5982\\u6570\\u636E\\u5E93\\u3001\\u8BC4\\u8BBA\\u5B57\\u6BB5\\u6216\\u8BBA\\u575B\\u5E16\\u5B50\\u4E2D\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53CD\\u5C04\\u578B XSS\"}),\"\\uFF1A\\u6076\\u610F\\u811A\\u672C\\u4ECE Web \\u670D\\u52A1\\u5668\\u53CD\\u5C04\\u51FA\\u6765\\uFF0C\\u4F8B\\u5982\\u5728\\u9519\\u8BEF\\u6D88\\u606F\\u3001\\u641C\\u7D22\\u7ED3\\u679C\\u6216\\u4EFB\\u4F55\\u5176\\u4ED6\\u5305\\u542B\\u53D1\\u9001\\u5230\\u670D\\u52A1\\u5668\\u7684\\u90E8\\u5206\\u6216\\u5168\\u90E8\\u8F93\\u5165\\u7684\\u54CD\\u5E94\\u4E2D\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u57FA\\u4E8E DOM \\u7684 XSS\"}),\"\\uFF1A\\u6F0F\\u6D1E\\u5B58\\u5728\\u4E8E\\u5BA2\\u6237\\u7AEF\\u4EE3\\u7801\\u4E2D\\uFF0C\\u800C\\u4E0D\\u662F\\u670D\\u52A1\\u5668\\u7AEF\\u4EE3\\u7801\\u4E2D\\u3002\\u6076\\u610F\\u811A\\u672C\\u7531\\u4E8E\\u4FEE\\u6539\\u53D7\\u5BB3\\u8005\\u6D4F\\u89C8\\u5668\\u4E2D\\u7684 DOM \\u73AF\\u5883\\u800C\\u6267\\u884C\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5982\\u4F55\\u9632\\u6B62 XSS\\uFF1F\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u9A8C\\u8BC1\\u548C\\u6E05\\u7406\\u7528\\u6237\\u8F93\\u5165\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u59CB\\u7EC8\\u9A8C\\u8BC1\\u548C\\u6E05\\u7406\\u7528\\u6237\\u8F93\\u5165\\uFF0C\\u4EE5\\u786E\\u4FDD\\u5B83\\u4EEC\\u4E0D\\u5305\\u542B\\u6076\\u610F\\u4EE3\\u7801\\u3002\\u4F7F\\u7528\\u63D0\\u4F9B\\u7528\\u4E8E\\u8F93\\u5165\\u9A8C\\u8BC1\\u548C\\u6E05\\u7406\\u7684\\u5185\\u7F6E\\u529F\\u80FD\\u7684\\u5E93\\u548C\\u6846\\u67B6\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const sanitizeHtml = require('sanitize-html');\n\nconst cleanInput = sanitizeHtml(userInput);\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528\\u5185\\u5BB9\\u5B89\\u5168\\u7B56\\u7565 (CSP)\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5185\\u5BB9\\u5B89\\u5168\\u7B56\\u7565 (CSP) \\u662F\\u4E00\\u9879\\u5B89\\u5168\\u529F\\u80FD\\uFF0C\\u5B83\\u901A\\u8FC7\\u6307\\u5B9A\\u5141\\u8BB8\\u52A0\\u8F7D\\u54EA\\u4E9B\\u52A8\\u6001\\u8D44\\u6E90\\u6765\\u5E2E\\u52A9\\u9632\\u6B62 XSS \\u653B\\u51FB\\u3002\\u8FD9\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E HTTP \\u6807\\u5934\\u6765\\u5B8C\\u6210\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-http\",children:`Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u6E32\\u67D3\\u524D\\u8F6C\\u4E49\\u6570\\u636E\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u6E32\\u67D3\\u6570\\u636E\\u4E4B\\u524D\\uFF0C\\u8BF7\\u52A1\\u5FC5\\u8F6C\\u4E49\\u6570\\u636E\\uFF0C\\u4EE5\\u9632\\u6B62\\u6076\\u610F\\u811A\\u672C\\u7684\\u6267\\u884C\\u3002\\u4F7F\\u7528\\u6846\\u67B6\\u6216\\u5E93\\u63D0\\u4F9B\\u7684\\u51FD\\u6570\\u6765\\u8F6C\\u4E49 HTML\\u3001JavaScript \\u548C\\u5176\\u4ED6\\u5185\\u5BB9\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const escapeHtml = (str) => {\n  return str\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n    .replace(/'/g, '&#039;');\n};\n\nconst safeOutput = escapeHtml(userInput);\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528 HTTP-only Cookie\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5C06 Cookie \\u8BBE\\u7F6E\\u4E3A HTTP-only\\uFF0C\\u4EE5\\u9632\\u6B62\\u5BA2\\u6237\\u7AEF\\u811A\\u672C\\u8BBF\\u95EE\\u5B83\\u4EEC\\u3002\\u8FD9\\u6709\\u52A9\\u4E8E\\u964D\\u4F4E\\u4F1A\\u8BDD\\u52AB\\u6301\\u7684\\u98CE\\u9669\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-http\",children:`Set-Cookie: sessionId=abc123; HttpOnly;\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5B9A\\u671F\\u66F4\\u65B0\\u4F9D\\u8D56\\u9879\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4FDD\\u6301\\u60A8\\u7684\\u5E93\\u548C\\u6846\\u67B6\\u4E3A\\u6700\\u65B0\\u72B6\\u6001\\uFF0C\\u4EE5\\u786E\\u4FDD\\u60A8\\u62E5\\u6709\\u6700\\u65B0\\u7684\\u5B89\\u5168\\u8865\\u4E01\\u548C\\u529F\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developers.google.com/web/fundamentals/security/csp\",children:\"Google Web \\u57FA\\u7840\\u77E5\\u8BC6\\uFF1A\\u9632\\u6B62 XSS\"})}),`\n`]})]})}function C(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,Object.assign({},l,{children:(0,e.jsx)(o,l)})):o(l)}var H=C;return j(T);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var X=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),f=(l,n)=>{for(var r in n)t(l,r,{get:n[r],enumerable:!0})},h=(l,n,r,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of u(n))!m.call(l,c)&&c!==r&&t(l,c,{get:()=>n[c],enumerable:!(i=S(n,c))||i.enumerable});return l};var x=(l,n,r)=>(r=l!=null?p(g(l)):{},h(n||!l||!l.__esModule?t(r,\"default\",{value:l,enumerable:!0}):r,l)),C=l=>h(t({},\"__esModule\",{value:!0}),l);var d=X((y,s)=>{s.exports=_jsx_runtime});var T={};f(T,{default:()=>a,frontmatter:()=>H});var e=x(d()),H={title:\"\\u4EC0\\u4E48\\u662F\\u8DE8\\u7AD9\\u811A\\u672C (XSS) \\u4EE5\\u53CA\\u5982\\u4F55\\u9632\\u6B62\\u5B83\\uFF1F\"};function o(l){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...l.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8DE8\\u7AD9\\u811A\\u672C (XSS) \\u662F\\u4E00\\u79CD\\u5B89\\u5168\\u6F0F\\u6D1E\\uFF0C\\u5B83\\u5141\\u8BB8\\u653B\\u51FB\\u8005\\u5C06\\u6076\\u610F\\u811A\\u672C\\u6CE8\\u5165\\u5230\\u5176\\u4ED6\\u7528\\u6237\\u67E5\\u770B\\u7684\\u7F51\\u9875\\u4E2D\\u3002\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u6570\\u636E\\u76D7\\u7A83\\u3001\\u4F1A\\u8BDD\\u52AB\\u6301\\u548C\\u5176\\u4ED6\\u6076\\u610F\\u6D3B\\u52A8\\u3002\\u4E3A\\u4E86\\u9632\\u6B62 XSS\\uFF0C\\u60A8\\u5E94\\u8BE5\\u9A8C\\u8BC1\\u548C\\u6E05\\u7406\\u7528\\u6237\\u8F93\\u5165\\uFF0C\\u4F7F\\u7528\\u5185\\u5BB9\\u5B89\\u5168\\u7B56\\u7565 (CSP)\\uFF0C\\u5E76\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u6E32\\u67D3\\u6570\\u636E\\u4E4B\\u524D\\u8F6C\\u4E49\\u5B83\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u8DE8\\u7AD9\\u811A\\u672C (XSS) \\u4EE5\\u53CA\\u5982\\u4F55\\u9632\\u6B62\\u5B83\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4EC0\\u4E48\\u662F\\u8DE8\\u7AD9\\u811A\\u672C (XSS)\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8DE8\\u7AD9\\u811A\\u672C (XSS) \\u662F\\u4E00\\u79CD\\u901A\\u5E38\\u5728 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u53D1\\u73B0\\u7684\\u5B89\\u5168\\u6F0F\\u6D1E\\u3002\\u5B83\\u5141\\u8BB8\\u653B\\u51FB\\u8005\\u5C06\\u6076\\u610F\\u811A\\u672C\\u6CE8\\u5165\\u5230\\u6765\\u81EA\\u5176\\u4ED6\\u53EF\\u4FE1\\u7F51\\u7AD9\\u7684\\u5185\\u5BB9\\u4E2D\\u3002\\u7136\\u540E\\uFF0C\\u8FD9\\u4E9B\\u811A\\u672C\\u53EF\\u4EE5\\u5728\\u7528\\u6237\\u6D4F\\u89C8\\u5668\\u7684\\u4E0A\\u4E0B\\u6587\\u4E2D\\u6267\\u884C\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u5404\\u79CD\\u6076\\u610F\\u6D3B\\u52A8\\uFF0C\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u7A83\\u53D6 cookie \\u548C\\u4F1A\\u8BDD\\u4EE4\\u724C\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u7BE1\\u6539\\u7F51\\u7AD9\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5C06\\u7528\\u6237\\u91CD\\u5B9A\\u5411\\u5230\\u6076\\u610F\\u7F51\\u7AD9\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u8BB0\\u5F55\\u51FB\\u952E\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"XSS \\u653B\\u51FB\\u4E3B\\u8981\\u6709\\u4E09\\u79CD\\u7C7B\\u578B\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B58\\u50A8\\u578B XSS\"}),\"\\uFF1A\\u6076\\u610F\\u811A\\u672C\\u6C38\\u4E45\\u5B58\\u50A8\\u5728\\u76EE\\u6807\\u670D\\u52A1\\u5668\\u4E0A\\uFF0C\\u4F8B\\u5982\\u6570\\u636E\\u5E93\\u3001\\u8BC4\\u8BBA\\u5B57\\u6BB5\\u6216\\u8BBA\\u575B\\u5E16\\u5B50\\u4E2D\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53CD\\u5C04\\u578B XSS\"}),\"\\uFF1A\\u6076\\u610F\\u811A\\u672C\\u4ECE Web \\u670D\\u52A1\\u5668\\u53CD\\u5C04\\u51FA\\u6765\\uFF0C\\u4F8B\\u5982\\u5728\\u9519\\u8BEF\\u6D88\\u606F\\u3001\\u641C\\u7D22\\u7ED3\\u679C\\u6216\\u4EFB\\u4F55\\u5176\\u4ED6\\u5305\\u542B\\u53D1\\u9001\\u5230\\u670D\\u52A1\\u5668\\u7684\\u90E8\\u5206\\u6216\\u5168\\u90E8\\u8F93\\u5165\\u7684\\u54CD\\u5E94\\u4E2D\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u57FA\\u4E8E DOM \\u7684 XSS\"}),\"\\uFF1A\\u6F0F\\u6D1E\\u5B58\\u5728\\u4E8E\\u5BA2\\u6237\\u7AEF\\u4EE3\\u7801\\u4E2D\\uFF0C\\u800C\\u4E0D\\u662F\\u670D\\u52A1\\u5668\\u7AEF\\u4EE3\\u7801\\u4E2D\\u3002\\u6076\\u610F\\u811A\\u672C\\u7531\\u4E8E\\u4FEE\\u6539\\u53D7\\u5BB3\\u8005\\u6D4F\\u89C8\\u5668\\u4E2D\\u7684 DOM \\u73AF\\u5883\\u800C\\u6267\\u884C\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5982\\u4F55\\u9632\\u6B62 XSS\\uFF1F\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u9A8C\\u8BC1\\u548C\\u6E05\\u7406\\u7528\\u6237\\u8F93\\u5165\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u59CB\\u7EC8\\u9A8C\\u8BC1\\u548C\\u6E05\\u7406\\u7528\\u6237\\u8F93\\u5165\\uFF0C\\u4EE5\\u786E\\u4FDD\\u5B83\\u4EEC\\u4E0D\\u5305\\u542B\\u6076\\u610F\\u4EE3\\u7801\\u3002\\u4F7F\\u7528\\u63D0\\u4F9B\\u7528\\u4E8E\\u8F93\\u5165\\u9A8C\\u8BC1\\u548C\\u6E05\\u7406\\u7684\\u5185\\u7F6E\\u529F\\u80FD\\u7684\\u5E93\\u548C\\u6846\\u67B6\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const sanitizeHtml = require('sanitize-html');\n\nconst cleanInput = sanitizeHtml(userInput);\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528\\u5185\\u5BB9\\u5B89\\u5168\\u7B56\\u7565 (CSP)\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5185\\u5BB9\\u5B89\\u5168\\u7B56\\u7565 (CSP) \\u662F\\u4E00\\u9879\\u5B89\\u5168\\u529F\\u80FD\\uFF0C\\u5B83\\u901A\\u8FC7\\u6307\\u5B9A\\u5141\\u8BB8\\u52A0\\u8F7D\\u54EA\\u4E9B\\u52A8\\u6001\\u8D44\\u6E90\\u6765\\u5E2E\\u52A9\\u9632\\u6B62 XSS \\u653B\\u51FB\\u3002\\u8FD9\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E HTTP \\u6807\\u5934\\u6765\\u5B8C\\u6210\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-http\",children:`Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u6E32\\u67D3\\u524D\\u8F6C\\u4E49\\u6570\\u636E\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u6E32\\u67D3\\u6570\\u636E\\u4E4B\\u524D\\uFF0C\\u8BF7\\u52A1\\u5FC5\\u8F6C\\u4E49\\u6570\\u636E\\uFF0C\\u4EE5\\u9632\\u6B62\\u6076\\u610F\\u811A\\u672C\\u7684\\u6267\\u884C\\u3002\\u4F7F\\u7528\\u6846\\u67B6\\u6216\\u5E93\\u63D0\\u4F9B\\u7684\\u51FD\\u6570\\u6765\\u8F6C\\u4E49 HTML\\u3001JavaScript \\u548C\\u5176\\u4ED6\\u5185\\u5BB9\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const escapeHtml = (str) => {\n  return str\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n    .replace(/'/g, '&#039;');\n};\n\nconst safeOutput = escapeHtml(userInput);\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u4F7F\\u7528 HTTP-only Cookie\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5C06 Cookie \\u8BBE\\u7F6E\\u4E3A HTTP-only\\uFF0C\\u4EE5\\u9632\\u6B62\\u5BA2\\u6237\\u7AEF\\u811A\\u672C\\u8BBF\\u95EE\\u5B83\\u4EEC\\u3002\\u8FD9\\u6709\\u52A9\\u4E8E\\u964D\\u4F4E\\u4F1A\\u8BDD\\u52AB\\u6301\\u7684\\u98CE\\u9669\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-http\",children:`Set-Cookie: sessionId=abc123; HttpOnly;\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5B9A\\u671F\\u66F4\\u65B0\\u4F9D\\u8D56\\u9879\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4FDD\\u6301\\u60A8\\u7684\\u5E93\\u548C\\u6846\\u67B6\\u4E3A\\u6700\\u65B0\\u72B6\\u6001\\uFF0C\\u4EE5\\u786E\\u4FDD\\u60A8\\u62E5\\u6709\\u6700\\u65B0\\u7684\\u5B89\\u5168\\u8865\\u4E01\\u548C\\u529F\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developers.google.com/web/fundamentals/security/csp\",children:\"Google Web \\u57FA\\u7840\\u77E5\\u8BC6\\uFF1A\\u9632\\u6B62 XSS\"})}),`\n`]})]})}function a(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,{...l,children:(0,e.jsx)(o,{...l})}):o(l)}return C(T);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work/en-US.json
index 7fd4c8545..6d86ad127 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),y=(i,e)=>{for(var n in e)r(i,n,{get:e[n],enumerable:!0})},s=(i,e,n,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!f.call(i,c)&&c!==n&&r(i,c,{get:()=>e[c],enumerable:!(o=p(e,c))||o.enumerable});return i};var S=(i,e,n)=>(n=i!=null?d(u(i)):{},s(e||!i||!i.__esModule?r(n,\"default\",{value:i,enumerable:!0}):n,i)),w=i=>s(r({},\"__esModule\",{value:!0}),i);var h=g((D,l)=>{l.exports=_jsx_runtime});var T={};y(T,{default:()=>C,frontmatter:()=>b});var t=S(h()),b={title:\"What is CSS selector specificity and how does it work?\"};function a(i){let e=Object.assign({p:\"p\",strong:\"strong\",h2:\"h2\",code:\"code\",ol:\"ol\",li:\"li\",ul:\"ul\",a:\"a\"},i.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[\"When multiple CSS rules could apply to the same HTML element, the browser needs a way to decide which rule takes precedence. This is determined by the \",(0,t.jsx)(e.strong,{children:\"CSS cascade\"}),\", which considers importance, inline styles, selector specificity, and source order. \",(0,t.jsx)(e.strong,{children:\"Selector specificity\"}),\" is a key part of this process, calculating a weight for each selector.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"The browser determines what styles to show on an element depending on the \",(0,t.jsx)(e.strong,{children:\"specificity\"}),\" of the CSS rules that match it. Specificity is calculated for each rule to decide which one takes precedence.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"How is specificity computed?\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The specificity algorithm is basically a three-column value of three categories or weights - ID, CLASS, and TYPE - corresponding to the three types of selectors. The value represents the count of selector components in each weight category and is written as \",(0,t.jsx)(e.code,{children:\"ID - CLASS - TYPE\"}),\". The three columns are created by counting the number of selector components for each selector weight category in the selectors that match the element.\"]}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"ID\"}),\": This is the count of ID selectors (e.g., \",(0,t.jsx)(e.code,{children:\"#example\"}),\").\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"CLASS\"}),\": This is the count of class selectors (e.g., \",(0,t.jsx)(e.code,{children:\".my-class\"}),\"), attribute selectors (e.g., \",(0,t.jsx)(e.code,{children:'[type=\"radio\"]'}),\"), and pseudo-classes (e.g., \",(0,t.jsx)(e.code,{children:\":hover\"}),\").\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"TYPE\"}),\": This is the count of type selectors (element names, e.g., \",(0,t.jsx)(e.code,{children:\"h1\"}),\", \",(0,t.jsx)(e.code,{children:\"div\"}),\") and pseudo-elements (e.g., \",(0,t.jsx)(e.code,{children:\"::before\"}),\").\"]}),`\n`]}),`\n`,(0,t.jsxs)(e.p,{children:[\"When comparing selectors to determine which has the highest specificity, look from left to right (ID, then CLASS, then TYPE), and compare the highest value in each column. A value in the ID column will override values in the CLASS and TYPE columns, no matter how large they are. Similarly, a value in the CLASS column overrides any value in the TYPE column. For example, a specificity of \",(0,t.jsx)(e.code,{children:\"1,0,0\"}),\" (one ID) is greater than \",(0,t.jsx)(e.code,{children:\"0,10,10\"}),\" (ten classes and ten types).\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"It's important to remember that specificity is part of the broader \",(0,t.jsx)(e.strong,{children:\"CSS cascade\"}),\". Declarations marked \",(0,t.jsx)(e.code,{children:\"!important\"}),\" have the highest precedence, followed by inline styles (using the \",(0,t.jsx)(e.code,{children:\"style\"}),\" attribute). Selector specificity comes next.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"In cases of \",(0,t.jsx)(e.strong,{children:\"equal specificity\"}),\" among competing rules (that aren't inline or \",(0,t.jsx)(e.code,{children:\"!important\"}),\"), the rule that appears \",(0,t.jsx)(e.strong,{children:\"last\"}),\" in the CSS source order is the one that counts and will be applied.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"It's a better practice to write CSS rules with low specificity so that they can be easily overridden if necessary. When writing CSS for UI component libraries, it is important that styles have low specificities so that users of the library can customize them without needing overly complex selectors or resorting to \",(0,t.jsx)(e.code,{children:\"!important\"}),\".\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"References\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Specificity\",children:\"Specificity | MDN\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://web.dev/learn/css/specificity\",children:\"Specificity | web.dev\"})}),`\n`]})]})}function v(i={}){let{wrapper:e}=i.components||{};return e?(0,t.jsx)(e,Object.assign({},i,{children:(0,t.jsx)(a,i)})):a(i)}var C=v;return w(T);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),S=(i,e)=>{for(var n in e)r(i,n,{get:e[n],enumerable:!0})},s=(i,e,n,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of u(e))!g.call(i,c)&&c!==n&&r(i,c,{get:()=>e[c],enumerable:!(o=m(e,c))||o.enumerable});return i};var w=(i,e,n)=>(n=i!=null?p(f(i)):{},s(e||!i||!i.__esModule?r(n,\"default\",{value:i,enumerable:!0}):n,i)),b=i=>s(r({},\"__esModule\",{value:!0}),i);var h=y((x,l)=>{l.exports=_jsx_runtime});var C={};S(C,{default:()=>d,frontmatter:()=>v});var t=w(h()),v={title:\"What is CSS selector specificity and how does it work?\"};function a(i){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",ol:\"ol\",p:\"p\",strong:\"strong\",ul:\"ul\",...i.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[\"When multiple CSS rules could apply to the same HTML element, the browser needs a way to decide which rule takes precedence. This is determined by the \",(0,t.jsx)(e.strong,{children:\"CSS cascade\"}),\", which considers importance, inline styles, selector specificity, and source order. \",(0,t.jsx)(e.strong,{children:\"Selector specificity\"}),\" is a key part of this process, calculating a weight for each selector.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"The browser determines what styles to show on an element depending on the \",(0,t.jsx)(e.strong,{children:\"specificity\"}),\" of the CSS rules that match it. Specificity is calculated for each rule to decide which one takes precedence.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"How is specificity computed?\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The specificity algorithm is basically a three-column value of three categories or weights - ID, CLASS, and TYPE - corresponding to the three types of selectors. The value represents the count of selector components in each weight category and is written as \",(0,t.jsx)(e.code,{children:\"ID - CLASS - TYPE\"}),\". The three columns are created by counting the number of selector components for each selector weight category in the selectors that match the element.\"]}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"ID\"}),\": This is the count of ID selectors (e.g., \",(0,t.jsx)(e.code,{children:\"#example\"}),\").\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"CLASS\"}),\": This is the count of class selectors (e.g., \",(0,t.jsx)(e.code,{children:\".my-class\"}),\"), attribute selectors (e.g., \",(0,t.jsx)(e.code,{children:'[type=\"radio\"]'}),\"), and pseudo-classes (e.g., \",(0,t.jsx)(e.code,{children:\":hover\"}),\").\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"TYPE\"}),\": This is the count of type selectors (element names, e.g., \",(0,t.jsx)(e.code,{children:\"h1\"}),\", \",(0,t.jsx)(e.code,{children:\"div\"}),\") and pseudo-elements (e.g., \",(0,t.jsx)(e.code,{children:\"::before\"}),\").\"]}),`\n`]}),`\n`,(0,t.jsxs)(e.p,{children:[\"When comparing selectors to determine which has the highest specificity, look from left to right (ID, then CLASS, then TYPE), and compare the highest value in each column. A value in the ID column will override values in the CLASS and TYPE columns, no matter how large they are. Similarly, a value in the CLASS column overrides any value in the TYPE column. For example, a specificity of \",(0,t.jsx)(e.code,{children:\"1,0,0\"}),\" (one ID) is greater than \",(0,t.jsx)(e.code,{children:\"0,10,10\"}),\" (ten classes and ten types).\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"It's important to remember that specificity is part of the broader \",(0,t.jsx)(e.strong,{children:\"CSS cascade\"}),\". Declarations marked \",(0,t.jsx)(e.code,{children:\"!important\"}),\" have the highest precedence, followed by inline styles (using the \",(0,t.jsx)(e.code,{children:\"style\"}),\" attribute). Selector specificity comes next.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"In cases of \",(0,t.jsx)(e.strong,{children:\"equal specificity\"}),\" among competing rules (that aren't inline or \",(0,t.jsx)(e.code,{children:\"!important\"}),\"), the rule that appears \",(0,t.jsx)(e.strong,{children:\"last\"}),\" in the CSS source order is the one that counts and will be applied.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"It's a better practice to write CSS rules with low specificity so that they can be easily overridden if necessary. When writing CSS for UI component libraries, it is important that styles have low specificities so that users of the library can customize them without needing overly complex selectors or resorting to \",(0,t.jsx)(e.code,{children:\"!important\"}),\".\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"References\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Specificity\",children:\"Specificity | MDN\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://web.dev/learn/css/specificity\",children:\"Specificity | web.dev\"})}),`\n`]})]})}function d(i={}){let{wrapper:e}=i.components||{};return e?(0,t.jsx)(e,{...i,children:(0,t.jsx)(a,{...i})}):a(i)}return b(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work/pt-BR.json
index 019d58e25..597162a32 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),b=(o,e)=>{for(var s in e)i(o,s,{get:e[s],enumerable:!0})},n=(o,e,s,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!f.call(o,r)&&r!==s&&i(o,r,{get:()=>e[r],enumerable:!(d=u(e,r))||d.enumerable});return o};var q=(o,e,s)=>(s=o!=null?m(h(o)):{},n(e||!o||!o.__esModule?i(s,\"default\",{value:o,enumerable:!0}):s,o)),v=o=>n(i({},\"__esModule\",{value:!0}),o);var t=g((A,c)=>{c.exports=_jsx_runtime});var j={};b(j,{default:()=>C,frontmatter:()=>x});var a=q(t()),x={title:\"O que \\xE9 a especificidade do seletor CSS e como funciona?\"};function l(o){let e=Object.assign({p:\"p\",code:\"code\",ol:\"ol\",li:\"li\"},o.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(e.p,{children:[\"O navegador determina quais estilos mostrar em um elemento, dependendo da especificidade das regras de CSS. Assumimos que o navegador j\\xE1 determinou as regras que correspondem a um elemento espec\\xEDfico. Entre as regras correspondentes, a especificidade, quatro valores separados, \",(0,a.jsx)(e.code,{children:\"a, b, c, d\"}),\" s\\xE3o calculados para cada regra com base nos seguintes:\"]}),`\n`,(0,a.jsxs)(e.ol,{children:[`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.code,{children:\"a\"}),\" \\xE9 se estilos inline est\\xE3o sendo usados. Se a declara\\xE7\\xE3o de propriedade \\xE9 um estilo embutido no elemento, \",(0,a.jsx)(e.code,{children:\"a\"}),\" \\xE9 1, sen\\xE3o 0.\"]}),`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.code,{children:\"b\"}),\" \\xE9 o n\\xFAmero de seletores de ID.\"]}),`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.code,{children:\"c\"}),\" \\xE9 o n\\xFAmero de classes, atributos e seletores de pseudo-classes.\"]}),`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.code,{children:\"d\"}),\" \\xE9 o n\\xFAmero de tags e seletores de pseudo-elementos.\"]}),`\n`]}),`\n`,(0,a.jsxs)(e.p,{children:[\"A especificidade resultante n\\xE3o \\xE9 uma \\xFAnica pontua\\xE7\\xE3o num\\xE9rica, mas uma matriz de valores que podem ser comparados por coluna. Ao comparar seletores para determinar qual tem a especificidade mais alta, olhar da esquerda para a direita e comparar o maior valor em cada coluna. Portanto, um valor na coluna 'b' ir\\xE1 substituir valores em colunas 'c' e 'd', n\\xE3o importa o que eles possam ser. Como tal, especificidade de \",(0,a.jsx)(e.code,{children:\"0, 1, 0, 0\"}),\" seria maior que um de \",(0,a.jsx)(e.code,{children:\"0, 0, 10, 10\"}),\".\"]}),`\n`,(0,a.jsx)(e.p,{children:\"Nos casos de igual especificidade: a \\xFAltima regra \\xE9 a que conta. Se voc\\xEA escreveu a mesma regra em sua folha de estilo (independente da sua folha interna ou externa) duas vezes, ent\\xE3o a regra inferior na sua folha de estilo est\\xE1 mais pr\\xF3xima do elemento a ser estilizado, Considera-se mais espec\\xEDfico, pelo que ser\\xE1 aplicado.\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"\\xC9 uma melhor pr\\xE1tica escrever regras de CSS com baixa especificidade, para que elas possam ser facilmente substitu\\xEDdas se necess\\xE1rio. Ao escrever o c\\xF3digo da biblioteca de componentes CSS UI, \\xE9 importante que eles tenham poucas especificidades, para que os usu\\xE1rios da biblioteca possam substitu\\xED-las sem usar regras CSS muito complicadas s\\xF3 para aumentar a especificidade ou recorrer a \",(0,a.jsx)(e.code,{children:\"!important\"}),\".\"]})]})}function S(o={}){let{wrapper:e}=o.components||{};return e?(0,a.jsx)(e,Object.assign({},o,{children:(0,a.jsx)(l,o)})):l(o)}var C=S;return v(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var q=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),b=(o,e)=>{for(var s in e)i(o,s,{get:e[s],enumerable:!0})},n=(o,e,s,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of h(e))!g.call(o,r)&&r!==s&&i(o,r,{get:()=>e[r],enumerable:!(d=p(e,r))||d.enumerable});return o};var v=(o,e,s)=>(s=o!=null?u(f(o)):{},n(e||!o||!o.__esModule?i(s,\"default\",{value:o,enumerable:!0}):s,o)),x=o=>n(i({},\"__esModule\",{value:!0}),o);var t=q((j,c)=>{c.exports=_jsx_runtime});var C={};b(C,{default:()=>m,frontmatter:()=>S});var a=v(t()),S={title:\"O que \\xE9 a especificidade do seletor CSS e como funciona?\"};function l(o){let e={code:\"code\",li:\"li\",ol:\"ol\",p:\"p\",...o.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(e.p,{children:[\"O navegador determina quais estilos mostrar em um elemento, dependendo da especificidade das regras de CSS. Assumimos que o navegador j\\xE1 determinou as regras que correspondem a um elemento espec\\xEDfico. Entre as regras correspondentes, a especificidade, quatro valores separados, \",(0,a.jsx)(e.code,{children:\"a, b, c, d\"}),\" s\\xE3o calculados para cada regra com base nos seguintes:\"]}),`\n`,(0,a.jsxs)(e.ol,{children:[`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.code,{children:\"a\"}),\" \\xE9 se estilos inline est\\xE3o sendo usados. Se a declara\\xE7\\xE3o de propriedade \\xE9 um estilo embutido no elemento, \",(0,a.jsx)(e.code,{children:\"a\"}),\" \\xE9 1, sen\\xE3o 0.\"]}),`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.code,{children:\"b\"}),\" \\xE9 o n\\xFAmero de seletores de ID.\"]}),`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.code,{children:\"c\"}),\" \\xE9 o n\\xFAmero de classes, atributos e seletores de pseudo-classes.\"]}),`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.code,{children:\"d\"}),\" \\xE9 o n\\xFAmero de tags e seletores de pseudo-elementos.\"]}),`\n`]}),`\n`,(0,a.jsxs)(e.p,{children:[\"A especificidade resultante n\\xE3o \\xE9 uma \\xFAnica pontua\\xE7\\xE3o num\\xE9rica, mas uma matriz de valores que podem ser comparados por coluna. Ao comparar seletores para determinar qual tem a especificidade mais alta, olhar da esquerda para a direita e comparar o maior valor em cada coluna. Portanto, um valor na coluna 'b' ir\\xE1 substituir valores em colunas 'c' e 'd', n\\xE3o importa o que eles possam ser. Como tal, especificidade de \",(0,a.jsx)(e.code,{children:\"0, 1, 0, 0\"}),\" seria maior que um de \",(0,a.jsx)(e.code,{children:\"0, 0, 10, 10\"}),\".\"]}),`\n`,(0,a.jsx)(e.p,{children:\"Nos casos de igual especificidade: a \\xFAltima regra \\xE9 a que conta. Se voc\\xEA escreveu a mesma regra em sua folha de estilo (independente da sua folha interna ou externa) duas vezes, ent\\xE3o a regra inferior na sua folha de estilo est\\xE1 mais pr\\xF3xima do elemento a ser estilizado, Considera-se mais espec\\xEDfico, pelo que ser\\xE1 aplicado.\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"\\xC9 uma melhor pr\\xE1tica escrever regras de CSS com baixa especificidade, para que elas possam ser facilmente substitu\\xEDdas se necess\\xE1rio. Ao escrever o c\\xF3digo da biblioteca de componentes CSS UI, \\xE9 importante que eles tenham poucas especificidades, para que os usu\\xE1rios da biblioteca possam substitu\\xED-las sem usar regras CSS muito complicadas s\\xF3 para aumentar a especificidade ou recorrer a \",(0,a.jsx)(e.code,{children:\"!important\"}),\".\"]})]})}function m(o={}){let{wrapper:e}=o.components||{};return e?(0,a.jsx)(e,{...o,children:(0,a.jsx)(l,{...o})}):l(o)}return x(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work/zh-CN.json
index 78d15b6b0..349e3791b 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var S=Object.create;var d=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),f=(c,e)=>{for(var r in e)d(c,r,{get:e[r],enumerable:!0})},o=(c,e,r,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!g.call(c,i)&&i!==r&&d(c,i,{get:()=>e[i],enumerable:!(l=a(e,i))||l.enumerable});return c};var u=(c,e,r)=>(r=c!=null?S(C(c)):{},o(e||!c||!c.__esModule?d(r,\"default\",{value:c,enumerable:!0}):r,c)),x=c=>o(d({},\"__esModule\",{value:!0}),c);var h=m((T,t)=>{t.exports=_jsx_runtime});var _={};f(_,{default:()=>L,frontmatter:()=>D});var n=u(h()),D={title:\"\\u4EC0\\u4E48\\u662F CSS \\u9009\\u62E9\\u5668\\u7279\\u5F02\\u6027\\u4EE5\\u53CA\\u5B83\\u662F\\u5982\\u4F55\\u5DE5\\u4F5C\\u7684\\uFF1F\"};function s(c){let e=Object.assign({p:\"p\",strong:\"strong\",h2:\"h2\",code:\"code\",ol:\"ol\",li:\"li\",ul:\"ul\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u591A\\u4E2A CSS \\u89C4\\u5219\\u53EF\\u80FD\\u5E94\\u7528\\u4E8E\\u540C\\u4E00\\u4E2A HTML \\u5143\\u7D20\\u65F6\\uFF0C\\u6D4F\\u89C8\\u5668\\u9700\\u8981\\u4E00\\u79CD\\u65B9\\u6CD5\\u6765\\u51B3\\u5B9A\\u54EA\\u4E2A\\u89C4\\u5219\\u4F18\\u5148\\u3002\\u8FD9\\u7531 \",(0,n.jsx)(e.strong,{children:\"CSS \\u7EA7\\u8054\"}),\" \\u51B3\\u5B9A\\uFF0C\\u5B83\\u8003\\u8651\\u4E86\\u91CD\\u8981\\u6027\\u3001\\u5185\\u8054\\u6837\\u5F0F\\u3001\\u9009\\u62E9\\u5668\\u7279\\u5F02\\u6027\\u548C\\u6E90\\u987A\\u5E8F\\u3002\",(0,n.jsx)(e.strong,{children:\"\\u9009\\u62E9\\u5668\\u7279\\u5F02\\u6027\"}),\" \\u662F\\u6B64\\u8FC7\\u7A0B\\u7684\\u5173\\u952E\\u90E8\\u5206\\uFF0C\\u5B83\\u4E3A\\u6BCF\\u4E2A\\u9009\\u62E9\\u5668\\u8BA1\\u7B97\\u4E00\\u4E2A\\u6743\\u91CD\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6D4F\\u89C8\\u5668\\u6839\\u636E\\u4E0E\\u5143\\u7D20\\u5339\\u914D\\u7684 CSS \\u89C4\\u5219\\u7684 \",(0,n.jsx)(e.strong,{children:\"\\u7279\\u5F02\\u6027\"}),\" \\u6765\\u786E\\u5B9A\\u8981\\u5728\\u5143\\u7D20\\u4E0A\\u663E\\u793A\\u54EA\\u4E9B\\u6837\\u5F0F\\u3002\\u4E3A\\u6BCF\\u4E2A\\u89C4\\u5219\\u8BA1\\u7B97\\u7279\\u5F02\\u6027\\uFF0C\\u4EE5\\u51B3\\u5B9A\\u54EA\\u4E2A\\u89C4\\u5219\\u4F18\\u5148\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u8BA1\\u7B97\\u7279\\u5F02\\u6027\\uFF1F\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u7279\\u5F02\\u6027\\u7B97\\u6CD5\\u57FA\\u672C\\u4E0A\\u662F\\u4E00\\u4E2A\\u7531\\u4E09\\u4E2A\\u7C7B\\u522B\\u6216\\u6743\\u91CD\\u7EC4\\u6210\\u7684\\u4E09\\u4E2A\\u503C - ID\\u3001CLASS \\u548C TYPE - \\u5BF9\\u5E94\\u4E8E\\u4E09\\u79CD\\u7C7B\\u578B\\u7684\\u9009\\u62E9\\u5668\\u3002\\u8BE5\\u503C\\u8868\\u793A\\u6BCF\\u4E2A\\u6743\\u91CD\\u7C7B\\u522B\\u4E2D\\u9009\\u62E9\\u5668\\u7EC4\\u4EF6\\u7684\\u8BA1\\u6570\\uFF0C\\u5E76\\u5199\\u4E3A \",(0,n.jsx)(e.code,{children:\"ID - CLASS - TYPE\"}),\"\\u3002\\u8FD9\\u4E09\\u5217\\u662F\\u901A\\u8FC7\\u8BA1\\u7B97\\u4E0E\\u5143\\u7D20\\u5339\\u914D\\u7684\\u9009\\u62E9\\u5668\\u4E2D\\u6BCF\\u4E2A\\u9009\\u62E9\\u5668\\u6743\\u91CD\\u7C7B\\u522B\\u7684\\u9009\\u62E9\\u5668\\u7EC4\\u4EF6\\u7684\\u6570\\u91CF\\u6765\\u521B\\u5EFA\\u7684\\u3002\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"ID\"}),\"\\uFF1A\\u8FD9\\u662F ID \\u9009\\u62E9\\u5668\\u7684\\u8BA1\\u6570\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"#example\"}),\"\\uFF09\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"CLASS\"}),\"\\uFF1A\\u8FD9\\u662F\\u7C7B\\u9009\\u62E9\\u5668\\u7684\\u8BA1\\u6570\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\".my-class\"}),\"\\uFF09\\u3001\\u5C5E\\u6027\\u9009\\u62E9\\u5668\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:'[type=\"radio\"]'}),\"\\uFF09\\u548C\\u4F2A\\u7C7B\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\":hover\"}),\"\\uFF09\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"TYPE\"}),\"\\uFF1A\\u8FD9\\u662F\\u7C7B\\u578B\\u9009\\u62E9\\u5668\\uFF08\\u5143\\u7D20\\u540D\\u79F0\\uFF0C\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"h1\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"div\"}),\"\\uFF09\\u548C\\u4F2A\\u5143\\u7D20\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"::before\"}),\"\\uFF09\\u7684\\u8BA1\\u6570\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u6BD4\\u8F83\\u9009\\u62E9\\u5668\\u4EE5\\u786E\\u5B9A\\u54EA\\u4E2A\\u9009\\u62E9\\u5668\\u5177\\u6709\\u6700\\u9AD8\\u7684\\u7279\\u5F02\\u6027\\u65F6\\uFF0C\\u4ECE\\u5DE6\\u5230\\u53F3\\uFF08ID\\uFF0C\\u7136\\u540E\\u662F CLASS\\uFF0C\\u7136\\u540E\\u662F TYPE\\uFF09\\u67E5\\u770B\\uFF0C\\u5E76\\u6BD4\\u8F83\\u6BCF\\u5217\\u4E2D\\u7684\\u6700\\u9AD8\\u503C\\u3002ID \\u5217\\u4E2D\\u7684\\u503C\\u5C06\\u8986\\u76D6 CLASS \\u548C TYPE \\u5217\\u4E2D\\u7684\\u503C\\uFF0C\\u65E0\\u8BBA\\u5B83\\u4EEC\\u6709\\u591A\\u5927\\u3002\\u7C7B\\u4F3C\\u5730\\uFF0CCLASS \\u5217\\u4E2D\\u7684\\u503C\\u5C06\\u8986\\u76D6 TYPE \\u5217\\u4E2D\\u7684\\u4EFB\\u4F55\\u503C\\u3002\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"1,0,0\"}),\"\\uFF08\\u4E00\\u4E2A ID\\uFF09\\u7684\\u7279\\u5F02\\u6027\\u5927\\u4E8E \",(0,n.jsx)(e.code,{children:\"0,10,10\"}),\"\\uFF08\\u5341\\u4E2A\\u7C7B\\u548C\\u5341\\u4E2A\\u7C7B\\u578B\\uFF09\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u91CD\\u8981\\u7684\\u662F\\u8981\\u8BB0\\u4F4F\\uFF0C\\u7279\\u5F02\\u6027\\u662F\\u66F4\\u5E7F\\u6CDB\\u7684 \",(0,n.jsx)(e.strong,{children:\"CSS \\u7EA7\\u8054\"}),\" \\u7684\\u4E00\\u90E8\\u5206\\u3002\\u6807\\u8BB0\\u4E3A \",(0,n.jsx)(e.code,{children:\"!important\"}),\" \\u7684\\u58F0\\u660E\\u5177\\u6709\\u6700\\u9AD8\\u7684\\u4F18\\u5148\\u7EA7\\uFF0C\\u5176\\u6B21\\u662F\\u5185\\u8054\\u6837\\u5F0F\\uFF08\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"style\"}),\" \\u5C5E\\u6027\\uFF09\\u3002\\u9009\\u62E9\\u5668\\u7279\\u5F02\\u6027\\u7D27\\u968F\\u5176\\u540E\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u7ADE\\u4E89\\u89C4\\u5219\\u4E4B\\u95F4 \",(0,n.jsx)(e.strong,{children:\"\\u7279\\u5F02\\u6027\\u76F8\\u7B49\"}),\" \\u7684\\u60C5\\u51B5\\u4E0B\\uFF08\\u4E0D\\u662F\\u5185\\u8054\\u6216 \",(0,n.jsx)(e.code,{children:\"!important\"}),\"\\uFF09\\uFF0CCSS \\u6E90\\u987A\\u5E8F\\u4E2D \",(0,n.jsx)(e.strong,{children:\"\\u6700\\u540E\"}),\" \\u51FA\\u73B0\\u7684\\u89C4\\u5219\\u662F\\u6709\\u6548\\u7684\\u89C4\\u5219\\uFF0C\\u5E76\\u5C06\\u88AB\\u5E94\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6700\\u597D\\u7F16\\u5199\\u5177\\u6709\\u4F4E\\u7279\\u5F02\\u6027\\u7684 CSS \\u89C4\\u5219\\uFF0C\\u4EE5\\u4FBF\\u5728\\u5FC5\\u8981\\u65F6\\u53EF\\u4EE5\\u8F7B\\u677E\\u8986\\u76D6\\u5B83\\u4EEC\\u3002\\u5728\\u4E3A UI \\u7EC4\\u4EF6\\u5E93\\u7F16\\u5199 CSS \\u65F6\\uFF0C\\u91CD\\u8981\\u7684\\u662F\\u6837\\u5F0F\\u5177\\u6709\\u8F83\\u4F4E\\u7684\\u7279\\u5F02\\u6027\\uFF0C\\u4EE5\\u4FBF\\u5E93\\u7684\\u7528\\u6237\\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49\\u5B83\\u4EEC\\uFF0C\\u800C\\u65E0\\u9700\\u4F7F\\u7528\\u8FC7\\u4E8E\\u590D\\u6742\\u7684\\u9009\\u62E9\\u5668\\u6216\\u6C42\\u52A9\\u4E8E \",(0,n.jsx)(e.code,{children:\"!important\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u53C2\\u8003\"}),`\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/Web/CSS/CSS_cascade/Specificity\",children:\"\\u7279\\u5F02\\u6027 | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://web.dev/learn/css/specificity\",children:\"\\u7279\\u5F02\\u6027 | web.dev\"})}),`\n`]})]})}function I(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(s,c)})):s(c)}var L=I;return x(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var a=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),u=(r,e)=>{for(var c in e)i(r,c,{get:e[c],enumerable:!0})},o=(r,e,c,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of C(e))!g.call(r,d)&&d!==c&&i(r,d,{get:()=>e[d],enumerable:!(l=p(e,d))||l.enumerable});return r};var x=(r,e,c)=>(c=r!=null?a(m(r)):{},o(e||!r||!r.__esModule?i(c,\"default\",{value:r,enumerable:!0}):c,r)),D=r=>o(i({},\"__esModule\",{value:!0}),r);var h=f((T,t)=>{t.exports=_jsx_runtime});var L={};u(L,{default:()=>S,frontmatter:()=>I});var n=x(h()),I={title:\"\\u4EC0\\u4E48\\u662F CSS \\u9009\\u62E9\\u5668\\u7279\\u5F02\\u6027\\u4EE5\\u53CA\\u5B83\\u662F\\u5982\\u4F55\\u5DE5\\u4F5C\\u7684\\uFF1F\"};function s(r){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",ol:\"ol\",p:\"p\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u591A\\u4E2A CSS \\u89C4\\u5219\\u53EF\\u80FD\\u5E94\\u7528\\u4E8E\\u540C\\u4E00\\u4E2A HTML \\u5143\\u7D20\\u65F6\\uFF0C\\u6D4F\\u89C8\\u5668\\u9700\\u8981\\u4E00\\u79CD\\u65B9\\u6CD5\\u6765\\u51B3\\u5B9A\\u54EA\\u4E2A\\u89C4\\u5219\\u4F18\\u5148\\u3002\\u8FD9\\u7531 \",(0,n.jsx)(e.strong,{children:\"CSS \\u7EA7\\u8054\"}),\" \\u51B3\\u5B9A\\uFF0C\\u5B83\\u8003\\u8651\\u4E86\\u91CD\\u8981\\u6027\\u3001\\u5185\\u8054\\u6837\\u5F0F\\u3001\\u9009\\u62E9\\u5668\\u7279\\u5F02\\u6027\\u548C\\u6E90\\u987A\\u5E8F\\u3002\",(0,n.jsx)(e.strong,{children:\"\\u9009\\u62E9\\u5668\\u7279\\u5F02\\u6027\"}),\" \\u662F\\u6B64\\u8FC7\\u7A0B\\u7684\\u5173\\u952E\\u90E8\\u5206\\uFF0C\\u5B83\\u4E3A\\u6BCF\\u4E2A\\u9009\\u62E9\\u5668\\u8BA1\\u7B97\\u4E00\\u4E2A\\u6743\\u91CD\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6D4F\\u89C8\\u5668\\u6839\\u636E\\u4E0E\\u5143\\u7D20\\u5339\\u914D\\u7684 CSS \\u89C4\\u5219\\u7684 \",(0,n.jsx)(e.strong,{children:\"\\u7279\\u5F02\\u6027\"}),\" \\u6765\\u786E\\u5B9A\\u8981\\u5728\\u5143\\u7D20\\u4E0A\\u663E\\u793A\\u54EA\\u4E9B\\u6837\\u5F0F\\u3002\\u4E3A\\u6BCF\\u4E2A\\u89C4\\u5219\\u8BA1\\u7B97\\u7279\\u5F02\\u6027\\uFF0C\\u4EE5\\u51B3\\u5B9A\\u54EA\\u4E2A\\u89C4\\u5219\\u4F18\\u5148\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5982\\u4F55\\u8BA1\\u7B97\\u7279\\u5F02\\u6027\\uFF1F\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u7279\\u5F02\\u6027\\u7B97\\u6CD5\\u57FA\\u672C\\u4E0A\\u662F\\u4E00\\u4E2A\\u7531\\u4E09\\u4E2A\\u7C7B\\u522B\\u6216\\u6743\\u91CD\\u7EC4\\u6210\\u7684\\u4E09\\u4E2A\\u503C - ID\\u3001CLASS \\u548C TYPE - \\u5BF9\\u5E94\\u4E8E\\u4E09\\u79CD\\u7C7B\\u578B\\u7684\\u9009\\u62E9\\u5668\\u3002\\u8BE5\\u503C\\u8868\\u793A\\u6BCF\\u4E2A\\u6743\\u91CD\\u7C7B\\u522B\\u4E2D\\u9009\\u62E9\\u5668\\u7EC4\\u4EF6\\u7684\\u8BA1\\u6570\\uFF0C\\u5E76\\u5199\\u4E3A \",(0,n.jsx)(e.code,{children:\"ID - CLASS - TYPE\"}),\"\\u3002\\u8FD9\\u4E09\\u5217\\u662F\\u901A\\u8FC7\\u8BA1\\u7B97\\u4E0E\\u5143\\u7D20\\u5339\\u914D\\u7684\\u9009\\u62E9\\u5668\\u4E2D\\u6BCF\\u4E2A\\u9009\\u62E9\\u5668\\u6743\\u91CD\\u7C7B\\u522B\\u7684\\u9009\\u62E9\\u5668\\u7EC4\\u4EF6\\u7684\\u6570\\u91CF\\u6765\\u521B\\u5EFA\\u7684\\u3002\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"ID\"}),\"\\uFF1A\\u8FD9\\u662F ID \\u9009\\u62E9\\u5668\\u7684\\u8BA1\\u6570\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"#example\"}),\"\\uFF09\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"CLASS\"}),\"\\uFF1A\\u8FD9\\u662F\\u7C7B\\u9009\\u62E9\\u5668\\u7684\\u8BA1\\u6570\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\".my-class\"}),\"\\uFF09\\u3001\\u5C5E\\u6027\\u9009\\u62E9\\u5668\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:'[type=\"radio\"]'}),\"\\uFF09\\u548C\\u4F2A\\u7C7B\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\":hover\"}),\"\\uFF09\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"TYPE\"}),\"\\uFF1A\\u8FD9\\u662F\\u7C7B\\u578B\\u9009\\u62E9\\u5668\\uFF08\\u5143\\u7D20\\u540D\\u79F0\\uFF0C\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"h1\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"div\"}),\"\\uFF09\\u548C\\u4F2A\\u5143\\u7D20\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"::before\"}),\"\\uFF09\\u7684\\u8BA1\\u6570\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u6BD4\\u8F83\\u9009\\u62E9\\u5668\\u4EE5\\u786E\\u5B9A\\u54EA\\u4E2A\\u9009\\u62E9\\u5668\\u5177\\u6709\\u6700\\u9AD8\\u7684\\u7279\\u5F02\\u6027\\u65F6\\uFF0C\\u4ECE\\u5DE6\\u5230\\u53F3\\uFF08ID\\uFF0C\\u7136\\u540E\\u662F CLASS\\uFF0C\\u7136\\u540E\\u662F TYPE\\uFF09\\u67E5\\u770B\\uFF0C\\u5E76\\u6BD4\\u8F83\\u6BCF\\u5217\\u4E2D\\u7684\\u6700\\u9AD8\\u503C\\u3002ID \\u5217\\u4E2D\\u7684\\u503C\\u5C06\\u8986\\u76D6 CLASS \\u548C TYPE \\u5217\\u4E2D\\u7684\\u503C\\uFF0C\\u65E0\\u8BBA\\u5B83\\u4EEC\\u6709\\u591A\\u5927\\u3002\\u7C7B\\u4F3C\\u5730\\uFF0CCLASS \\u5217\\u4E2D\\u7684\\u503C\\u5C06\\u8986\\u76D6 TYPE \\u5217\\u4E2D\\u7684\\u4EFB\\u4F55\\u503C\\u3002\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"1,0,0\"}),\"\\uFF08\\u4E00\\u4E2A ID\\uFF09\\u7684\\u7279\\u5F02\\u6027\\u5927\\u4E8E \",(0,n.jsx)(e.code,{children:\"0,10,10\"}),\"\\uFF08\\u5341\\u4E2A\\u7C7B\\u548C\\u5341\\u4E2A\\u7C7B\\u578B\\uFF09\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u91CD\\u8981\\u7684\\u662F\\u8981\\u8BB0\\u4F4F\\uFF0C\\u7279\\u5F02\\u6027\\u662F\\u66F4\\u5E7F\\u6CDB\\u7684 \",(0,n.jsx)(e.strong,{children:\"CSS \\u7EA7\\u8054\"}),\" \\u7684\\u4E00\\u90E8\\u5206\\u3002\\u6807\\u8BB0\\u4E3A \",(0,n.jsx)(e.code,{children:\"!important\"}),\" \\u7684\\u58F0\\u660E\\u5177\\u6709\\u6700\\u9AD8\\u7684\\u4F18\\u5148\\u7EA7\\uFF0C\\u5176\\u6B21\\u662F\\u5185\\u8054\\u6837\\u5F0F\\uFF08\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"style\"}),\" \\u5C5E\\u6027\\uFF09\\u3002\\u9009\\u62E9\\u5668\\u7279\\u5F02\\u6027\\u7D27\\u968F\\u5176\\u540E\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u7ADE\\u4E89\\u89C4\\u5219\\u4E4B\\u95F4 \",(0,n.jsx)(e.strong,{children:\"\\u7279\\u5F02\\u6027\\u76F8\\u7B49\"}),\" \\u7684\\u60C5\\u51B5\\u4E0B\\uFF08\\u4E0D\\u662F\\u5185\\u8054\\u6216 \",(0,n.jsx)(e.code,{children:\"!important\"}),\"\\uFF09\\uFF0CCSS \\u6E90\\u987A\\u5E8F\\u4E2D \",(0,n.jsx)(e.strong,{children:\"\\u6700\\u540E\"}),\" \\u51FA\\u73B0\\u7684\\u89C4\\u5219\\u662F\\u6709\\u6548\\u7684\\u89C4\\u5219\\uFF0C\\u5E76\\u5C06\\u88AB\\u5E94\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6700\\u597D\\u7F16\\u5199\\u5177\\u6709\\u4F4E\\u7279\\u5F02\\u6027\\u7684 CSS \\u89C4\\u5219\\uFF0C\\u4EE5\\u4FBF\\u5728\\u5FC5\\u8981\\u65F6\\u53EF\\u4EE5\\u8F7B\\u677E\\u8986\\u76D6\\u5B83\\u4EEC\\u3002\\u5728\\u4E3A UI \\u7EC4\\u4EF6\\u5E93\\u7F16\\u5199 CSS \\u65F6\\uFF0C\\u91CD\\u8981\\u7684\\u662F\\u6837\\u5F0F\\u5177\\u6709\\u8F83\\u4F4E\\u7684\\u7279\\u5F02\\u6027\\uFF0C\\u4EE5\\u4FBF\\u5E93\\u7684\\u7528\\u6237\\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49\\u5B83\\u4EEC\\uFF0C\\u800C\\u65E0\\u9700\\u4F7F\\u7528\\u8FC7\\u4E8E\\u590D\\u6742\\u7684\\u9009\\u62E9\\u5668\\u6216\\u6C42\\u52A9\\u4E8E \",(0,n.jsx)(e.code,{children:\"!important\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u53C2\\u8003\"}),`\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/Web/CSS/CSS_cascade/Specificity\",children:\"\\u7279\\u5F02\\u6027 | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://web.dev/learn/css/specificity\",children:\"\\u7279\\u5F02\\u6027 | web.dev\"})}),`\n`]})]})}function S(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(s,{...r})}):s(r)}return D(L);})();\n;return Component;"
 }
\ No newline at end of file
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 fac2d3c4a..5d5be43e4 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-currying-and-how-does-it-work/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var o=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var p=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),w=(t,n)=>{for(var i in n)o(t,i,{get:n[i],enumerable:!0})},a=(t,n,i,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of g(n))!m.call(t,r)&&r!==i&&o(t,r,{get:()=>n[r],enumerable:!(c=h(n,r))||c.enumerable});return t};var b=(t,n,i)=>(i=t!=null?s(f(t)):{},a(n||!t||!t.__esModule?o(i,\"default\",{value:t,enumerable:!0}):i,t)),O=t=>a(o({},\"__esModule\",{value:!0}),t);var d=p((C,l)=>{l.exports=_jsx_runtime});var j={};w(j,{default:()=>x,frontmatter:()=>v});var e=b(d()),v={title:\"What is currying and how does it work?\"};function u(t){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Currying is a technique in functional programming where a function that takes multiple arguments is transformed into a series of functions that each take a single argument. This allows for partial application of functions. For example, a function \",(0,e.jsx)(n.code,{children:\"f(a, b, c)\"}),\" can be curried into \",(0,e.jsx)(n.code,{children:\"f(a)(b)(c)\"}),\". Here's a simple example in JavaScript:\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a) {\n  return function (b) {\n    return function (c) {\n      return a + b + c;\n    };\n  };\n}\n\nconst addOne = add(1);\nconsole.log(addOne); // function object\n\nconst addOneAndTwo = addOne(2);\nconsole.log(addOneAndTwo); // function object\n\nconst result = addOneAndTwo(3);\nconsole.log(result); // Output: 6\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"What is currying and how does it work?\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Definition\"}),`\n`,(0,e.jsx)(n.p,{children:\"Currying is a functional programming technique where a function with multiple arguments is decomposed into a sequence of functions, each taking a single argument. This allows for the partial application of functions, enabling more flexible and reusable code.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"How it works\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Transformation\"}),\": A function that takes multiple arguments is transformed into a series of nested functions, each taking one argument.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Partial application\"}),\": You can call the curried function with fewer arguments than it expects, and it will return a new function that takes the remaining arguments.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Example in JavaScript\"}),`\n`,(0,e.jsx)(n.p,{children:\"Here's a simple example to illustrate currying in JavaScript:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Non-curried function\nfunction add(a, b, c) {\n  return a + b + c;\n}\n\n// Curried version of the same function\nfunction curriedAdd(a) {\n  return function (b) {\n    return function (c) {\n      return a + b + c;\n    };\n  };\n}\n\n// Using the curried function\nconst addOne = curriedAdd(1);\nconsole.log(addOne); // function object\n\nconst addOneAndTwo = addOne(2);\nconsole.log(addOneAndTwo); // function object\n\nconst result = addOneAndTwo(3);\nconsole.log(result); // Output: 6\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Benefits of currying\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Reusability\"}),\": Curried functions can be reused with different sets of arguments.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Partial application\"}),\": You can create new functions by fixing some arguments of the original function.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Function composition\"}),\": Currying makes it easier to compose functions, leading to more readable and maintainable code.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Practical example\"}),`\n`,(0,e.jsx)(n.p,{children:\"Consider a function that calculates the volume of a rectangular prism:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function volume(length, width, height) {\n  return length * width * height;\n}\n\n// Curried version\nfunction curriedVolume(length) {\n  return function (width) {\n    return function (height) {\n      return length * width * height;\n    };\n  };\n}\n\n// Using the curried function\nconst volumeWithLength5 = curriedVolume(5);\nconst volumeWithLength5AndWidth4 = volumeWithLength5(4);\nconst result = volumeWithLength5AndWidth4(3);\nconsole.log(result); // Output: 60\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Currying with arrow functions\"}),`\n`,(0,e.jsx)(n.p,{children:\"You can also use arrow functions to make the syntax more concise:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const curriedAdd = (a) => (b) => (c) => a + b + c;\n\nconst addOne = curriedAdd(1);\nconst addOneAndTwo = addOne(2);\nconst result = addOneAndTwo(3);\nconsole.log(result); // Output: 6\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Currying\",children:\"MDN Web Docs: Function currying\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/currying\",children:\"JavaScript.info: Currying\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.sitepoint.com/currying-in-functional-javascript/\",children:\"Functional Programming in JavaScript: Currying\"})}),`\n`]})]})}function y(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(u,t)})):u(t)}var x=y;return O(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var w=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),b=(t,n)=>{for(var i in n)o(t,i,{get:n[i],enumerable:!0})},a=(t,n,i,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of f(n))!p.call(t,r)&&r!==i&&o(t,r,{get:()=>n[r],enumerable:!(c=g(n,r))||c.enumerable});return t};var v=(t,n,i)=>(i=t!=null?h(m(t)):{},a(n||!t||!t.__esModule?o(i,\"default\",{value:t,enumerable:!0}):i,t)),O=t=>a(o({},\"__esModule\",{value:!0}),t);var d=w((A,l)=>{l.exports=_jsx_runtime});var x={};b(x,{default:()=>s,frontmatter:()=>y});var e=v(d()),y={title:\"What is currying and how does it work?\"};function u(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Currying is a technique in functional programming where a function that takes multiple arguments is transformed into a series of functions that each take a single argument. This allows for partial application of functions. For example, a function \",(0,e.jsx)(n.code,{children:\"f(a, b, c)\"}),\" can be curried into \",(0,e.jsx)(n.code,{children:\"f(a)(b)(c)\"}),\". Here's a simple example in JavaScript:\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a) {\n  return function (b) {\n    return function (c) {\n      return a + b + c;\n    };\n  };\n}\n\nconst addOne = add(1);\nconsole.log(addOne); // function object\n\nconst addOneAndTwo = addOne(2);\nconsole.log(addOneAndTwo); // function object\n\nconst result = addOneAndTwo(3);\nconsole.log(result); // Output: 6\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"What is currying and how does it work?\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Definition\"}),`\n`,(0,e.jsx)(n.p,{children:\"Currying is a functional programming technique where a function with multiple arguments is decomposed into a sequence of functions, each taking a single argument. This allows for the partial application of functions, enabling more flexible and reusable code.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"How it works\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Transformation\"}),\": A function that takes multiple arguments is transformed into a series of nested functions, each taking one argument.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Partial application\"}),\": You can call the curried function with fewer arguments than it expects, and it will return a new function that takes the remaining arguments.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Example in JavaScript\"}),`\n`,(0,e.jsx)(n.p,{children:\"Here's a simple example to illustrate currying in JavaScript:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Non-curried function\nfunction add(a, b, c) {\n  return a + b + c;\n}\n\n// Curried version of the same function\nfunction curriedAdd(a) {\n  return function (b) {\n    return function (c) {\n      return a + b + c;\n    };\n  };\n}\n\n// Using the curried function\nconst addOne = curriedAdd(1);\nconsole.log(addOne); // function object\n\nconst addOneAndTwo = addOne(2);\nconsole.log(addOneAndTwo); // function object\n\nconst result = addOneAndTwo(3);\nconsole.log(result); // Output: 6\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Benefits of currying\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Reusability\"}),\": Curried functions can be reused with different sets of arguments.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Partial application\"}),\": You can create new functions by fixing some arguments of the original function.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Function composition\"}),\": Currying makes it easier to compose functions, leading to more readable and maintainable code.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Practical example\"}),`\n`,(0,e.jsx)(n.p,{children:\"Consider a function that calculates the volume of a rectangular prism:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function volume(length, width, height) {\n  return length * width * height;\n}\n\n// Curried version\nfunction curriedVolume(length) {\n  return function (width) {\n    return function (height) {\n      return length * width * height;\n    };\n  };\n}\n\n// Using the curried function\nconst volumeWithLength5 = curriedVolume(5);\nconst volumeWithLength5AndWidth4 = volumeWithLength5(4);\nconst result = volumeWithLength5AndWidth4(3);\nconsole.log(result); // Output: 60\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Currying with arrow functions\"}),`\n`,(0,e.jsx)(n.p,{children:\"You can also use arrow functions to make the syntax more concise:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const curriedAdd = (a) => (b) => (c) => a + b + c;\n\nconst addOne = curriedAdd(1);\nconst addOneAndTwo = addOne(2);\nconst result = addOneAndTwo(3);\nconsole.log(result); // Output: 6\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Currying\",children:\"MDN Web Docs: Function currying\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/currying\",children:\"JavaScript.info: Currying\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.sitepoint.com/currying-in-functional-javascript/\",children:\"Functional Programming in JavaScript: Currying\"})}),`\n`]})]})}function s(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(u,{...t})}):u(t)}return O(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-currying-and-how-does-it-work/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-currying-and-how-does-it-work/zh-CN.json
index d10b77aa5..4e1581020 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-currying-and-how-does-it-work/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-currying-and-how-does-it-work/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-currying-and-how-does-it-work/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var m=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),O=(r,n)=>{for(var t in n)i(r,t,{get:n[t],enumerable:!0})},o=(r,n,t,d)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of g(n))!p.call(r,c)&&c!==t&&i(r,c,{get:()=>n[c],enumerable:!(d=s(n,c))||d.enumerable});return r};var v=(r,n,t)=>(t=r!=null?a(f(r)):{},o(n||!r||!r.__esModule?i(t,\"default\",{value:r,enumerable:!0}):t,r)),b=r=>o(i({},\"__esModule\",{value:!0}),r);var h=m((y,l)=>{l.exports=_jsx_runtime});var x={};O(x,{default:()=>A,frontmatter:()=>j});var e=v(h()),j={title:\"\\u4EC0\\u4E48\\u662F\\u67EF\\u91CC\\u5316\\u4EE5\\u53CA\\u5B83\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"};function u(r){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u67EF\\u91CC\\u5316\\u662F\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\\u4E2D\\u7684\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u5B83\\u5C06\\u63A5\\u53D7\\u591A\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u8F6C\\u6362\\u4E3A\\u4E00\\u7CFB\\u5217\\u53EA\\u63A5\\u53D7\\u5355\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u3002\\u8FD9\\u5141\\u8BB8\\u51FD\\u6570\\u7684\\u5C40\\u90E8\\u5E94\\u7528\\u3002\\u4F8B\\u5982\\uFF0C\\u51FD\\u6570 \",(0,e.jsx)(n.code,{children:\"f(a, b, c)\"}),\" \\u53EF\\u4EE5\\u67EF\\u91CC\\u5316\\u4E3A \",(0,e.jsx)(n.code,{children:\"f(a)(b)(c)\"}),\"\\u3002\\u4EE5\\u4E0B\\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u4E2A\\u7B80\\u5355\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a) {\n  return function (b) {\n    return function (c) {\n      return a + b + c;\n    };\n  };\n}\n\nconst addOne = add(1);\nconsole.log(addOne); // function object\n\nconst addOneAndTwo = addOne(2);\nconsole.log(addOneAndTwo); // function object\n\nconst result = addOneAndTwo(3);\nconsole.log(result); // Output: 6\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u67EF\\u91CC\\u5316\\u4EE5\\u53CA\\u5B83\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u67EF\\u91CC\\u5316\\u662F\\u4E00\\u79CD\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\\u6280\\u672F\\uFF0C\\u5176\\u4E2D\\u5177\\u6709\\u591A\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u88AB\\u5206\\u89E3\\u4E3A\\u4E00\\u7CFB\\u5217\\u51FD\\u6570\\uFF0C\\u6BCF\\u4E2A\\u51FD\\u6570\\u63A5\\u53D7\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\\u8FD9\\u5141\\u8BB8\\u51FD\\u6570\\u7684\\u5C40\\u90E8\\u5E94\\u7528\\uFF0C\\u4ECE\\u800C\\u5B9E\\u73B0\\u66F4\\u7075\\u6D3B\\u548C\\u53EF\\u91CD\\u7528\\u7684\\u4EE3\\u7801\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8F6C\\u6362\"}),\"\\uFF1A\\u63A5\\u53D7\\u591A\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u88AB\\u8F6C\\u6362\\u4E3A\\u4E00\\u7CFB\\u5217\\u5D4C\\u5957\\u51FD\\u6570\\uFF0C\\u6BCF\\u4E2A\\u51FD\\u6570\\u63A5\\u53D7\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C40\\u90E8\\u5E94\\u7528\"}),\"\\uFF1A\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528\\u6BD4\\u9884\\u671F\\u66F4\\u5C11\\u7684\\u53C2\\u6570\\u6765\\u8C03\\u7528\\u67EF\\u91CC\\u5316\\u51FD\\u6570\\uFF0C\\u5B83\\u5C06\\u8FD4\\u56DE\\u4E00\\u4E2A\\u63A5\\u53D7\\u5269\\u4F59\\u53C2\\u6570\\u7684\\u65B0\\u51FD\\u6570\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"JavaScript \\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u4F8B\\u5B50\\uFF0C\\u8BF4\\u660E\\u4E86 JavaScript \\u4E2D\\u7684\\u67EF\\u91CC\\u5316\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Non-curried function\nfunction add(a, b, c) {\n  return a + b + c;\n}\n\n// Curried version of the same function\nfunction curriedAdd(a) {\n  return function (b) {\n    return function (c) {\n      return a + b + c;\n    };\n  };\n}\n\n// Using the curried function\nconst addOne = curriedAdd(1);\nconsole.log(addOne); // function object\n\nconst addOneAndTwo = addOne(2);\nconsole.log(addOneAndTwo); // function object\n\nconst result = addOneAndTwo(3);\nconsole.log(result); // Output: 6\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u67EF\\u91CC\\u5316\\u7684\\u597D\\u5904\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u91CD\\u7528\\u6027\"}),\"\\uFF1A\\u67EF\\u91CC\\u5316\\u51FD\\u6570\\u53EF\\u4EE5\\u4E0E\\u4E0D\\u540C\\u7684\\u53C2\\u6570\\u96C6\\u4E00\\u8D77\\u91CD\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C40\\u90E8\\u5E94\\u7528\"}),\"\\uFF1A\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7\\u4FEE\\u590D\\u539F\\u59CB\\u51FD\\u6570\\u7684\\u67D0\\u4E9B\\u53C2\\u6570\\u6765\\u521B\\u5EFA\\u65B0\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u51FD\\u6570\\u7EC4\\u5408\"}),\"\\uFF1A\\u67EF\\u91CC\\u5316\\u4F7F\\u7EC4\\u5408\\u51FD\\u6570\\u66F4\\u5BB9\\u6613\\uFF0C\\u4ECE\\u800C\\u4F7F\\u4EE3\\u7801\\u66F4\\u5177\\u53EF\\u8BFB\\u6027\\u548C\\u53EF\\u7EF4\\u62A4\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9E\\u9645\\u4F8B\\u5B50\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8003\\u8651\\u4E00\\u4E2A\\u8BA1\\u7B97\\u957F\\u65B9\\u4F53\\u4F53\\u79EF\\u7684\\u51FD\\u6570\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function volume(length, width, height) {\n  return length * width * height;\n}\n\n// Curried version\nfunction curriedVolume(length) {\n  return function (width) {\n    return function (height) {\n      return length * width * height;\n    };\n  };\n}\n\n// Using the curried function\nconst volumeWithLength5 = curriedVolume(5);\nconst volumeWithLength5AndWidth4 = volumeWithLength5(4);\nconst result = volumeWithLength5AndWidth4(3);\nconsole.log(result); // Output: 60\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528\\u7BAD\\u5934\\u51FD\\u6570\\u7684\\u67EF\\u91CC\\u5316\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F60\\u4E5F\\u53EF\\u4EE5\\u4F7F\\u7528\\u7BAD\\u5934\\u51FD\\u6570\\u4F7F\\u8BED\\u6CD5\\u66F4\\u7B80\\u6D01\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const curriedAdd = (a) => (b) => (c) => a + b + c;\n\nconst addOne = curriedAdd(1);\nconst addOneAndTwo = addOne(2);\nconst result = addOneAndTwo(3);\nconsole.log(result); // Output: 6\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Currying\",children:\"MDN Web Docs: Function currying\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/currying\",children:\"JavaScript.info: Currying\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.sitepoint.com/currying-in-functional-javascript/\",children:\"Functional Programming in JavaScript: Currying\"})}),`\n`]})]})}function w(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(u,r)})):u(r)}var A=w;return b(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var O=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),v=(r,n)=>{for(var t in n)i(r,t,{get:n[t],enumerable:!0})},o=(r,n,t,d)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of f(n))!m.call(r,c)&&c!==t&&i(r,c,{get:()=>n[c],enumerable:!(d=g(n,c))||d.enumerable});return r};var w=(r,n,t)=>(t=r!=null?s(p(r)):{},o(n||!r||!r.__esModule?i(t,\"default\",{value:r,enumerable:!0}):t,r)),b=r=>o(i({},\"__esModule\",{value:!0}),r);var h=O((T,l)=>{l.exports=_jsx_runtime});var A={};v(A,{default:()=>a,frontmatter:()=>j});var e=w(h()),j={title:\"\\u4EC0\\u4E48\\u662F\\u67EF\\u91CC\\u5316\\u4EE5\\u53CA\\u5B83\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"};function u(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u67EF\\u91CC\\u5316\\u662F\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\\u4E2D\\u7684\\u4E00\\u79CD\\u6280\\u672F\\uFF0C\\u5B83\\u5C06\\u63A5\\u53D7\\u591A\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u8F6C\\u6362\\u4E3A\\u4E00\\u7CFB\\u5217\\u53EA\\u63A5\\u53D7\\u5355\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u3002\\u8FD9\\u5141\\u8BB8\\u51FD\\u6570\\u7684\\u5C40\\u90E8\\u5E94\\u7528\\u3002\\u4F8B\\u5982\\uFF0C\\u51FD\\u6570 \",(0,e.jsx)(n.code,{children:\"f(a, b, c)\"}),\" \\u53EF\\u4EE5\\u67EF\\u91CC\\u5316\\u4E3A \",(0,e.jsx)(n.code,{children:\"f(a)(b)(c)\"}),\"\\u3002\\u4EE5\\u4E0B\\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u4E2A\\u7B80\\u5355\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a) {\n  return function (b) {\n    return function (c) {\n      return a + b + c;\n    };\n  };\n}\n\nconst addOne = add(1);\nconsole.log(addOne); // function object\n\nconst addOneAndTwo = addOne(2);\nconsole.log(addOneAndTwo); // function object\n\nconst result = addOneAndTwo(3);\nconsole.log(result); // Output: 6\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u67EF\\u91CC\\u5316\\u4EE5\\u53CA\\u5B83\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u67EF\\u91CC\\u5316\\u662F\\u4E00\\u79CD\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\\u6280\\u672F\\uFF0C\\u5176\\u4E2D\\u5177\\u6709\\u591A\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u88AB\\u5206\\u89E3\\u4E3A\\u4E00\\u7CFB\\u5217\\u51FD\\u6570\\uFF0C\\u6BCF\\u4E2A\\u51FD\\u6570\\u63A5\\u53D7\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\\u8FD9\\u5141\\u8BB8\\u51FD\\u6570\\u7684\\u5C40\\u90E8\\u5E94\\u7528\\uFF0C\\u4ECE\\u800C\\u5B9E\\u73B0\\u66F4\\u7075\\u6D3B\\u548C\\u53EF\\u91CD\\u7528\\u7684\\u4EE3\\u7801\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8F6C\\u6362\"}),\"\\uFF1A\\u63A5\\u53D7\\u591A\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\u88AB\\u8F6C\\u6362\\u4E3A\\u4E00\\u7CFB\\u5217\\u5D4C\\u5957\\u51FD\\u6570\\uFF0C\\u6BCF\\u4E2A\\u51FD\\u6570\\u63A5\\u53D7\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C40\\u90E8\\u5E94\\u7528\"}),\"\\uFF1A\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528\\u6BD4\\u9884\\u671F\\u66F4\\u5C11\\u7684\\u53C2\\u6570\\u6765\\u8C03\\u7528\\u67EF\\u91CC\\u5316\\u51FD\\u6570\\uFF0C\\u5B83\\u5C06\\u8FD4\\u56DE\\u4E00\\u4E2A\\u63A5\\u53D7\\u5269\\u4F59\\u53C2\\u6570\\u7684\\u65B0\\u51FD\\u6570\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"JavaScript \\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u4F8B\\u5B50\\uFF0C\\u8BF4\\u660E\\u4E86 JavaScript \\u4E2D\\u7684\\u67EF\\u91CC\\u5316\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Non-curried function\nfunction add(a, b, c) {\n  return a + b + c;\n}\n\n// Curried version of the same function\nfunction curriedAdd(a) {\n  return function (b) {\n    return function (c) {\n      return a + b + c;\n    };\n  };\n}\n\n// Using the curried function\nconst addOne = curriedAdd(1);\nconsole.log(addOne); // function object\n\nconst addOneAndTwo = addOne(2);\nconsole.log(addOneAndTwo); // function object\n\nconst result = addOneAndTwo(3);\nconsole.log(result); // Output: 6\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u67EF\\u91CC\\u5316\\u7684\\u597D\\u5904\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u91CD\\u7528\\u6027\"}),\"\\uFF1A\\u67EF\\u91CC\\u5316\\u51FD\\u6570\\u53EF\\u4EE5\\u4E0E\\u4E0D\\u540C\\u7684\\u53C2\\u6570\\u96C6\\u4E00\\u8D77\\u91CD\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C40\\u90E8\\u5E94\\u7528\"}),\"\\uFF1A\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7\\u4FEE\\u590D\\u539F\\u59CB\\u51FD\\u6570\\u7684\\u67D0\\u4E9B\\u53C2\\u6570\\u6765\\u521B\\u5EFA\\u65B0\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u51FD\\u6570\\u7EC4\\u5408\"}),\"\\uFF1A\\u67EF\\u91CC\\u5316\\u4F7F\\u7EC4\\u5408\\u51FD\\u6570\\u66F4\\u5BB9\\u6613\\uFF0C\\u4ECE\\u800C\\u4F7F\\u4EE3\\u7801\\u66F4\\u5177\\u53EF\\u8BFB\\u6027\\u548C\\u53EF\\u7EF4\\u62A4\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9E\\u9645\\u4F8B\\u5B50\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8003\\u8651\\u4E00\\u4E2A\\u8BA1\\u7B97\\u957F\\u65B9\\u4F53\\u4F53\\u79EF\\u7684\\u51FD\\u6570\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function volume(length, width, height) {\n  return length * width * height;\n}\n\n// Curried version\nfunction curriedVolume(length) {\n  return function (width) {\n    return function (height) {\n      return length * width * height;\n    };\n  };\n}\n\n// Using the curried function\nconst volumeWithLength5 = curriedVolume(5);\nconst volumeWithLength5AndWidth4 = volumeWithLength5(4);\nconst result = volumeWithLength5AndWidth4(3);\nconsole.log(result); // Output: 60\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528\\u7BAD\\u5934\\u51FD\\u6570\\u7684\\u67EF\\u91CC\\u5316\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F60\\u4E5F\\u53EF\\u4EE5\\u4F7F\\u7528\\u7BAD\\u5934\\u51FD\\u6570\\u4F7F\\u8BED\\u6CD5\\u66F4\\u7B80\\u6D01\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const curriedAdd = (a) => (b) => (c) => a + b + c;\n\nconst addOne = curriedAdd(1);\nconst addOneAndTwo = addOne(2);\nconst result = addOneAndTwo(3);\nconsole.log(result); // Output: 6\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Currying\",children:\"MDN Web Docs: Function currying\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/currying\",children:\"JavaScript.info: Currying\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.sitepoint.com/currying-in-functional-javascript/\",children:\"Functional Programming in JavaScript: Currying\"})}),`\n`]})]})}function a(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(u,{...r})}):u(r)}return b(A);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.json
index fe952cae0..313cf9f5f 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var o in e)s(n,o,{get:e[o],enumerable:!0})},c=(n,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!k.call(n,a)&&a!==o&&s(n,a,{get:()=>e[a],enumerable:!(i=d(e,a))||i.enumerable});return n};var b=(n,e,o)=>(o=n!=null?u(m(n)):{},c(e||!n||!n.__esModule?s(o,\"default\",{value:n,enumerable:!0}):o,n)),y=n=>c(s({},\"__esModule\",{value:!0}),n);var l=f((P,r)=>{r.exports=_jsx_runtime});var T={};v(T,{default:()=>q,frontmatter:()=>g});var t=b(l()),g={title:\"What is the event loop in JavaScript runtimes?\",subtitle:\"What is the difference between call stack and task queue?\"};function h(n){let e=Object.assign({h2:\"h2\",p:\"p\",ol:\"ol\",li:\"li\",code:\"code\",ul:\"ul\",a:\"a\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:\"The event loop is concept within the JavaScript runtime environment regarding how asynchronous operations are executed within JavaScript engines. It works as such:\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsx)(e.li,{children:\"The JavaScript engine starts executing scripts, placing synchronous operations on the call stack.\"}),`\n`,(0,t.jsxs)(e.li,{children:[\"When an asynchronous operation is encountered (e.g., \",(0,t.jsx)(e.code,{children:\"setTimeout()\"}),\", HTTP request), it is offloaded to the respective Web API or Node.js API to handle the operation in the background.\"]}),`\n`,(0,t.jsx)(e.li,{children:'Once the asynchronous operation completes, its callback function is placed in the respective queues \\u2013 task queues (also known as macrotask queues / callback queues) or microtask queues. We will refer to \"task queue\" as \"macrotask queue\" from here on to better differentiate from the microtask queue.'}),`\n`,(0,t.jsxs)(e.li,{children:[\"The event loop continuously monitors the call stack and executes items on the call stack. If/when the call stack is empty:\",`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[\"Microtask queue is processed. Microtasks include promise callbacks (\",(0,t.jsx)(e.code,{children:\"then\"}),\", \",(0,t.jsx)(e.code,{children:\"catch\"}),\", \",(0,t.jsx)(e.code,{children:\"finally\"}),\"), \",(0,t.jsx)(e.code,{children:\"MutationObserver\"}),\" callbacks, and calls to \",(0,t.jsx)(e.code,{children:\"queueMicrotask()\"}),\". The event loop takes the first callback from the microtask queue and pushes it to the call stack for execution. This repeats until the microtask queue is empty.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[\"Macrotask queue is processed. Macrotasks include web APIs like \",(0,t.jsx)(e.code,{children:\"setTimeout()\"}),\", HTTP requests, user interface event handlers like clicks, scrolls, etc. The event loop dequeues the first callback from the macrotask queue and pushes it onto the call stack for execution. However, after a macrotask queue callback is processed, the event loop does not proceed with the next macrotask yet! The event loop first checks the microtask queue. Checking the microtask queue is necessary as microtasks have higher priority than macrotask queue callbacks. The macrotask queue callback that was just executed could have added more microtasks!\",`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsx)(e.li,{children:\"If the microtask queue is non-empty, process them as per the previous step.\"}),`\n`,(0,t.jsx)(e.li,{children:\"If the microtask queue is empty, the next macrotask queue callback is processed. This repeats until the macrotask queue is empty.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,t.jsx)(e.li,{children:\"This process continues indefinitely, allowing the JavaScript engine to handle both synchronous and asynchronous operations efficiently without blocking the call stack.\"}),`\n`]}),`\n`,(0,t.jsx)(e.p,{children:\"The unfortunate truth is that it is extremely hard to explain the event loop well using only text. We recommend checking out one of the following excellent videos explaining the event loop:\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.a,{href:\"https://www.youtube.com/watch?v=eiC58R16hb8\",children:\"JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue\"}),\" (2024): Lydia Hallie is a popular educator on JavaScript and this is the best recent videos explaining the event loop. There's also an \",(0,t.jsx)(e.a,{href:\"https://www.lydiahallie.com/blog/event-loop\",children:\"accompanying blog post\"}),\" for those who prefer detailed text-based explanations.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.a,{href:\"https://www.youtube.com/watch?v=cCOL7MC4Pl0\",children:\"In the Loop\"}),\" (2018): Jake Archibald previously from the Chrome team provides a visual demonstration of the event loop during JSConf 2018, accounting for different types of tasks.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.a,{href:\"https://www.youtube.com/watch?v=8aGhZQkoFbQ\",children:\"What the heck is the event loop anyway?\"}),\" (2014): Philip Robert's gave this epic talk at JSConf 2014 and it is one of the most viewed JavaScript videos on YouTube.\"]}),`\n`]}),`\n`,(0,t.jsxs)(e.p,{children:[\"We recommend watching \",(0,t.jsx)(e.a,{href:\"https://www.youtube.com/watch?v=eiC58R16hb8\",children:\"Lydia's video\"}),\" as it is the most modern and concise explanation standing at only 13 minutes long whereas the other videos are at least 30 minutes long. Her video is sufficient for the purpose of interviews.\"]}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"Event loop in JavaScript\"}),`\n`,(0,t.jsx)(e.p,{children:\"The event loop is the heart of JavaScript's asynchronous operation. It is a mechanism that handles the execution of code, allowing for asynchronous operations and ensuring that the single-threaded nature of JavaScript engines does not block the execution of the program.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Parts of the event loop\"}),`\n`,(0,t.jsx)(e.p,{children:\"To understand it better we need to understand about all the parts of the system. These components are part of the event loop:\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Call stack\"}),`\n`,(0,t.jsx)(e.p,{children:\"Call stack keeps track of the functions being executed in a program. When a function is called, it is added to the top of the call stack. When the function completes, it is removed from the call stack. This allows the program to keep track of where it is in the execution of a function and return to the correct location when the function completes. As the name suggests it is a Stack data structure which follows last-in-first-out.\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Web APIs/Node.js APIs\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Asynchronous operations like \",(0,t.jsx)(e.code,{children:\"setTimeout()\"}),\", HTTP requests, file I/O, etc., are handled by Web APIs (in the browser) or C++ APIs (in Node.js). These APIs are not part of the JavaScript engine and run on separate threads, allowing them to execute concurrently without blocking the call stack.\"]}),`\n`,(0,t.jsx)(e.h4,{children:\"Task queue / Macrotask queue / Callback queue\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The task queue, also known as the macrotask queue / callback queue / event queue, is a queue that holds tasks that need to be executed. These tasks are typically asynchronous operations, such as callbacks passed to web APIs (\",(0,t.jsx)(e.code,{children:\"setTimeout()\"}),\", \",(0,t.jsx)(e.code,{children:\"setInterval()\"}),\", HTTP requests, etc.), and user interface event handlers like clicks, scrolls, etc.\"]}),`\n`,(0,t.jsx)(e.h4,{children:\"Microtasks queue\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Microtasks are tasks that have a higher priority than macrotasks and are executed immediately after the currently executing script is completed and before the next macrotask is executed. Microtasks are usually used for more immediate, lightweight operations that should be executed as soon as possible after the current operation completes. There is a dedicated microtask queue for microtasks. Microtasks include promises callbacks (\",(0,t.jsx)(e.code,{children:\"then()\"}),\", \",(0,t.jsx)(e.code,{children:\"catch()\"}),\", and \",(0,t.jsx)(e.code,{children:\"finally()\"}),\"), \",(0,t.jsx)(e.code,{children:\"await\"}),\" statements, \",(0,t.jsx)(e.code,{children:\"queueMicrotask()\"}),\", and \",(0,t.jsx)(e.code,{children:\"MutationObserver\"}),\" callbacks.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Event loop order\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsx)(e.li,{children:\"The JavaScript engine starts executing scripts, placing synchronous operations on the call stack.\"}),`\n`,(0,t.jsxs)(e.li,{children:[\"When an asynchronous operation is encountered (e.g., \",(0,t.jsx)(e.code,{children:\"setTimeout()\"}),\", HTTP request), it is offloaded to the respective Web API or Node.js API to handle the operation in the background.\"]}),`\n`,(0,t.jsx)(e.li,{children:'Once the asynchronous operation completes, its callback function is placed in the respective queues \\u2013 task queues (also known as macrotask queues / callback queues) or microtask queues. We will refer to \"task queue\" as \"macrotask queue\" from here on to better differentiate from the microtask queue.'}),`\n`,(0,t.jsxs)(e.li,{children:[\"The event loop continuously monitors the call stack and executes items on the call stack. If/when the call stack is empty:\",`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsx)(e.li,{children:\"Microtask queue is processed. The event loop takes the first callback from the microtask queue and pushes it to the call stack for execution. This repeats until the microtask queue is empty.\"}),`\n`,(0,t.jsxs)(e.li,{children:[\"Macrotask queue is processed. The event loop dequeues the first callback from the macrotask queue and pushes it onto the call stack for execution. However, after a macrotask queue callback is processed, the event loop does not proceed with the next macrotask yet! The event loop first checks the microtask queue. Checking the microtask queue is necessary as microtasks have higher priority than macrotask queue callbacks. The macrotask queue callback that was just executed could have added more microtasks!\",`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsx)(e.li,{children:\"If the microtask queue is non-empty, process them as per the previous step.\"}),`\n`,(0,t.jsx)(e.li,{children:\"If the microtask queue is empty, the next macrotask queue callback is processed. This repeats until the macrotask queue is empty.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,t.jsx)(e.li,{children:\"This process continues indefinitely, allowing the JavaScript engine to handle both synchronous and asynchronous operations efficiently without blocking the call stack.\"}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,t.jsx)(e.p,{children:\"The following code logs some statements using a combination of normal execution, macrotasks, and microtasks.\"}),`\n`,(0,t.jsx)(e.pre,{live:!0,children:(0,t.jsx)(e.code,{className:\"language-js\",children:`console.log('Start');\n\nsetTimeout(() => {\n  console.log('Timeout 1');\n}, 0);\n\nPromise.resolve().then(() => {\n  console.log('Promise 1');\n});\n\nsetTimeout(() => {\n  console.log('Timeout 2');\n}, 0);\n\nconsole.log('End');\n\n// Console output:\n// Start\n// End\n// Promise 1\n// Timeout 1\n// Timeout 2\n`})}),`\n`,(0,t.jsx)(e.p,{children:\"Explanation of the output:\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"Start\"}),\" and \",(0,t.jsx)(e.code,{children:\"End\"}),\" are logged first because they are part of the initial script.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"Promise 1\"}),\" is logged next because promises are microtasks and microtasks are executed immediately after the items on the call stack.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"Timeout 1\"}),\" and \",(0,t.jsx)(e.code,{children:\"Timeout 2\"}),\" are logged last because they are macrotasks and are processed after the microtasks.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading and resources\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Event_loop\",children:\"The event loop - MDN\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://nodejs.org/en/learn/asynchronous-work/event-loop-timers-and-nexttick\",children:\"The Node.js Event Loop\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://javascript.info/event-loop\",children:\"Event loop: microtasks and macrotasks\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif\",children:\"JavaScript Visualized: Event Loop by Lydia Hallie\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://www.lydiahallie.com/blog/event-loop\",children:'\"JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue\" by Lydia Hallie'})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html\",children:'\"What the heck is the event loop anyway?\" by Philip Robert'})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://www.youtube.com/watch?v=cCOL7MC4Pl0\",children:'\"In The Loop\" by Jake Archibald'})}),`\n`]})]})}function w(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var q=w;return y(T);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var o in e)s(n,o,{get:e[o],enumerable:!0})},c=(n,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!f.call(n,a)&&a!==o&&s(n,a,{get:()=>e[a],enumerable:!(i=p(e,a))||i.enumerable});return n};var y=(n,e,o)=>(o=n!=null?d(k(n)):{},c(e||!n||!n.__esModule?s(o,\"default\",{value:n,enumerable:!0}):o,n)),g=n=>c(s({},\"__esModule\",{value:!0}),n);var l=v((x,r)=>{r.exports=_jsx_runtime});var q={};b(q,{default:()=>u,frontmatter:()=>w});var t=y(l()),w={title:\"What is the event loop in JavaScript runtimes?\",subtitle:\"What is the difference between call stack and task queue?\"};function h(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:\"The event loop is a concept within the JavaScript runtime environment regarding how asynchronous operations are executed within JavaScript engines. It works as such:\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsx)(e.li,{children:\"The JavaScript engine starts executing scripts, placing synchronous operations on the call stack.\"}),`\n`,(0,t.jsxs)(e.li,{children:[\"When an asynchronous operation is encountered (e.g., \",(0,t.jsx)(e.code,{children:\"setTimeout()\"}),\", HTTP request), it is offloaded to the respective Web API or Node.js API to handle the operation in the background.\"]}),`\n`,(0,t.jsx)(e.li,{children:'Once the asynchronous operation completes, its callback function is placed in the respective queues \\u2013 task queues (also known as macrotask queues / callback queues) or microtask queues. We will refer to \"task queue\" as \"macrotask queue\" from here on to better differentiate from the microtask queue.'}),`\n`,(0,t.jsxs)(e.li,{children:[\"The event loop continuously monitors the call stack and executes items on the call stack. If/when the call stack is empty:\",`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[\"Microtask queue is processed. Microtasks include promise callbacks (\",(0,t.jsx)(e.code,{children:\"then\"}),\", \",(0,t.jsx)(e.code,{children:\"catch\"}),\", \",(0,t.jsx)(e.code,{children:\"finally\"}),\"), \",(0,t.jsx)(e.code,{children:\"MutationObserver\"}),\" callbacks, and calls to \",(0,t.jsx)(e.code,{children:\"queueMicrotask()\"}),\". The event loop takes the first callback from the microtask queue and pushes it to the call stack for execution. This repeats until the microtask queue is empty.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[\"Macrotask queue is processed. Macrotasks include web APIs like \",(0,t.jsx)(e.code,{children:\"setTimeout()\"}),\", HTTP requests, user interface event handlers like clicks, scrolls, etc. The event loop dequeues the first callback from the macrotask queue and pushes it onto the call stack for execution. However, after a macrotask queue callback is processed, the event loop does not proceed with the next macrotask yet! The event loop first checks the microtask queue. Checking the microtask queue is necessary as microtasks have higher priority than macrotask queue callbacks. The macrotask queue callback that was just executed could have added more microtasks!\",`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsx)(e.li,{children:\"If the microtask queue is non-empty, process them as per the previous step.\"}),`\n`,(0,t.jsx)(e.li,{children:\"If the microtask queue is empty, the next macrotask queue callback is processed. This repeats until the macrotask queue is empty.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,t.jsx)(e.li,{children:\"This process continues indefinitely, allowing the JavaScript engine to handle both synchronous and asynchronous operations efficiently without blocking the call stack.\"}),`\n`]}),`\n`,(0,t.jsx)(e.p,{children:\"The unfortunate truth is that it is extremely hard to explain the event loop well using only text. We recommend checking out one of the following excellent videos explaining the event loop:\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.a,{href:\"https://www.youtube.com/watch?v=eiC58R16hb8\",children:\"JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue\"}),\" (2024): Lydia Hallie is a popular educator on JavaScript and this is the best recent video explaining the event loop. There's also an \",(0,t.jsx)(e.a,{href:\"https://www.lydiahallie.com/blog/event-loop\",children:\"accompanying blog post\"}),\" for those who prefer detailed text-based explanations.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.a,{href:\"https://www.youtube.com/watch?v=cCOL7MC4Pl0\",children:\"In the Loop\"}),\" (2018): Jake Archibald previously from the Chrome team provides a visual demonstration of the event loop during JSConf 2018, accounting for different types of tasks.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.a,{href:\"https://www.youtube.com/watch?v=8aGhZQkoFbQ\",children:\"What the heck is the event loop anyway?\"}),\" (2014): Philip Robert's gave this epic talk at JSConf 2014 and it is one of the most viewed JavaScript videos on YouTube.\"]}),`\n`]}),`\n`,(0,t.jsxs)(e.p,{children:[\"We recommend watching \",(0,t.jsx)(e.a,{href:\"https://www.youtube.com/watch?v=eiC58R16hb8\",children:\"Lydia's video\"}),\" as it is the most modern and concise explanation standing at only 13 minutes long whereas the other videos are at least 30 minutes long. Her video is sufficient for the purpose of interviews.\"]}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"Event loop in JavaScript\"}),`\n`,(0,t.jsx)(e.p,{children:\"The event loop is the heart of JavaScript's asynchronous operation. It is a mechanism that handles the execution of code, allowing for asynchronous operations and ensuring that the single-threaded nature of JavaScript engines does not block the execution of the program.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Parts of the event loop\"}),`\n`,(0,t.jsx)(e.p,{children:\"To understand it better we need to understand about all the parts of the system. These components are part of the event loop:\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Call stack\"}),`\n`,(0,t.jsx)(e.p,{children:\"Call stack keeps track of the functions being executed in a program. When a function is called, it is added to the top of the call stack. When the function completes, it is removed from the call stack. This allows the program to keep track of where it is in the execution of a function and return to the correct location when the function completes. As the name suggests it is a Stack data structure which follows last-in-first-out.\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Web APIs/Node.js APIs\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Asynchronous operations like \",(0,t.jsx)(e.code,{children:\"setTimeout()\"}),\", HTTP requests, file I/O, etc., are handled by Web APIs (in the browser) or C++ APIs (in Node.js). These APIs are not part of the JavaScript engine and run on separate threads, allowing them to execute concurrently without blocking the call stack.\"]}),`\n`,(0,t.jsx)(e.h4,{children:\"Task queue / Macrotask queue / Callback queue\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The task queue, also known as the macrotask queue / callback queue / event queue, is a queue that holds tasks that need to be executed. These tasks are typically asynchronous operations, such as callbacks passed to web APIs (\",(0,t.jsx)(e.code,{children:\"setTimeout()\"}),\", \",(0,t.jsx)(e.code,{children:\"setInterval()\"}),\", HTTP requests, etc.), and user interface event handlers like clicks, scrolls, etc.\"]}),`\n`,(0,t.jsx)(e.h4,{children:\"Microtasks queue\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Microtasks are tasks that have a higher priority than macrotasks and are executed immediately after the currently executing script is completed and before the next macrotask is executed. Microtasks are usually used for more immediate, lightweight operations that should be executed as soon as possible after the current operation completes. There is a dedicated microtask queue for microtasks. Microtasks include promises callbacks (\",(0,t.jsx)(e.code,{children:\"then()\"}),\", \",(0,t.jsx)(e.code,{children:\"catch()\"}),\", and \",(0,t.jsx)(e.code,{children:\"finally()\"}),\"), \",(0,t.jsx)(e.code,{children:\"await\"}),\" statements, \",(0,t.jsx)(e.code,{children:\"queueMicrotask()\"}),\", and \",(0,t.jsx)(e.code,{children:\"MutationObserver\"}),\" callbacks.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Event loop order\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsx)(e.li,{children:\"The JavaScript engine starts executing scripts, placing synchronous operations on the call stack.\"}),`\n`,(0,t.jsxs)(e.li,{children:[\"When an asynchronous operation is encountered (e.g., \",(0,t.jsx)(e.code,{children:\"setTimeout()\"}),\", HTTP request), it is offloaded to the respective Web API or Node.js API to handle the operation in the background.\"]}),`\n`,(0,t.jsx)(e.li,{children:'Once the asynchronous operation completes, its callback function is placed in the respective queues \\u2013 task queues (also known as macrotask queues / callback queues) or microtask queues. We will refer to \"task queue\" as \"macrotask queue\" from here on to better differentiate from the microtask queue.'}),`\n`,(0,t.jsxs)(e.li,{children:[\"The event loop continuously monitors the call stack and executes items on the call stack. If/when the call stack is empty:\",`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsx)(e.li,{children:\"Microtask queue is processed. The event loop takes the first callback from the microtask queue and pushes it to the call stack for execution. This repeats until the microtask queue is empty.\"}),`\n`,(0,t.jsxs)(e.li,{children:[\"Macrotask queue is processed. The event loop dequeues the first callback from the macrotask queue and pushes it onto the call stack for execution. However, after a macrotask queue callback is processed, the event loop does not proceed with the next macrotask yet! The event loop first checks the microtask queue. Checking the microtask queue is necessary as microtasks have higher priority than macrotask queue callbacks. The macrotask queue callback that was just executed could have added more microtasks!\",`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsx)(e.li,{children:\"If the microtask queue is non-empty, process them as per the previous step.\"}),`\n`,(0,t.jsx)(e.li,{children:\"If the microtask queue is empty, the next macrotask queue callback is processed. This repeats until the macrotask queue is empty.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,t.jsx)(e.li,{children:\"This process continues indefinitely, allowing the JavaScript engine to handle both synchronous and asynchronous operations efficiently without blocking the call stack.\"}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,t.jsx)(e.p,{children:\"The following code logs some statements using a combination of normal execution, macrotasks, and microtasks.\"}),`\n`,(0,t.jsx)(e.pre,{live:!0,children:(0,t.jsx)(e.code,{className:\"language-js\",children:`console.log('Start');\n\nsetTimeout(() => {\n  console.log('Timeout 1');\n}, 0);\n\nPromise.resolve().then(() => {\n  console.log('Promise 1');\n});\n\nsetTimeout(() => {\n  console.log('Timeout 2');\n}, 0);\n\nconsole.log('End');\n\n// Console output:\n// Start\n// End\n// Promise 1\n// Timeout 1\n// Timeout 2\n`})}),`\n`,(0,t.jsx)(e.p,{children:\"Explanation of the output:\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"Start\"}),\" and \",(0,t.jsx)(e.code,{children:\"End\"}),\" are logged first because they are part of the initial script.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"Promise 1\"}),\" is logged next because promises are microtasks and microtasks are executed immediately after the items on the call stack.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"Timeout 1\"}),\" and \",(0,t.jsx)(e.code,{children:\"Timeout 2\"}),\" are logged last because they are macrotasks and are processed after the microtasks.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading and resources\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Event_loop\",children:\"The event loop - MDN\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://nodejs.org/en/learn/asynchronous-work/event-loop-timers-and-nexttick\",children:\"The Node.js Event Loop\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://javascript.info/event-loop\",children:\"Event loop: microtasks and macrotasks\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif\",children:\"JavaScript Visualized: Event Loop by Lydia Hallie\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://www.lydiahallie.com/blog/event-loop\",children:'\"JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue\" by Lydia Hallie'})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html\",children:'\"What the heck is the event loop anyway?\" by Philip Robert'})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://www.youtube.com/watch?v=cCOL7MC4Pl0\",children:'\"In The Loop\" by Jake Archibald'})}),`\n`]})]})}function u(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(h,{...n})}):h(n)}return g(q);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/pt-BR.json
index 5d70b1e75..bc627d9cf 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/pt-BR.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(e,a)=>()=>(a||e((a={exports:{}}).exports,a),a.exports),x=(e,a)=>{for(var n in a)s(e,n,{get:a[n],enumerable:!0})},i=(e,a,n,r)=>{if(a&&typeof a==\"object\"||typeof a==\"function\")for(let o of p(a))!f.call(e,o)&&o!==n&&s(e,o,{get:()=>a[o],enumerable:!(r=u(a,o))||r.enumerable});return e};var j=(e,a,n)=>(n=e!=null?h(m(e)):{},i(a||!e||!e.__esModule?s(n,\"default\",{value:e,enumerable:!0}):n,e)),b=e=>i(s({},\"__esModule\",{value:!0}),e);var d=v((w,c)=>{c.exports=_jsx_runtime});var O={};x(O,{default:()=>k,frontmatter:()=>_});var t=j(d()),_={title:\"O que \\xE9 o loop de eventos?\",subtitle:\"Qual \\xE9 a diferen\\xE7a entre call stack e task queue?\"};function l(e){let a=Object.assign({p:\"p\",a:\"a\"},e.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(a.p,{children:\"O loop de eventos \\xE9 um la\\xE7o de execu\\xE7\\xE3o \\xFAnica (single-threaded) que monitora a pilha de chamadas e verifica se h\\xE1 algum trabalho a ser feito na fila de tarefas. Se a pilha de chamadas estiver vazia e houver fun\\xE7\\xF5es de retorno de chamada (callback) na fila de tarefas, uma fun\\xE7\\xE3o \\xE9 desenfileirada e colocada na pilha de chamadas para ser executada.\"}),`\n`,(0,t.jsxs)(a.p,{children:[\"Se voc\\xEA ainda n\\xE3o conferiu as \",(0,t.jsx)(a.a,{href:\"https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-heck-is-the-event-loop-anyway.html\",children:\"palestras sobre o loop de eventos\"}),\", voc\\xEA deveria. \\xC9 um dos v\\xEDdeos mais vistos de JavaScript.\"]})]})}function g(e={}){let{wrapper:a}=e.components||{};return a?(0,t.jsx)(a,Object.assign({},e,{children:(0,t.jsx)(l,e)})):l(e)}var k=g;return b(O);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var x=(e,a)=>()=>(a||e((a={exports:{}}).exports,a),a.exports),_=(e,a)=>{for(var o in a)s(e,o,{get:a[o],enumerable:!0})},i=(e,a,o,r)=>{if(a&&typeof a==\"object\"||typeof a==\"function\")for(let n of m(a))!v.call(e,n)&&n!==o&&s(e,n,{get:()=>a[n],enumerable:!(r=p(a,n))||r.enumerable});return e};var j=(e,a,o)=>(o=e!=null?u(f(e)):{},i(a||!e||!e.__esModule?s(o,\"default\",{value:e,enumerable:!0}):o,e)),k=e=>i(s({},\"__esModule\",{value:!0}),e);var d=x((w,c)=>{c.exports=_jsx_runtime});var g={};_(g,{default:()=>h,frontmatter:()=>b});var t=j(d()),b={title:\"O que \\xE9 o loop de eventos?\",subtitle:\"Qual \\xE9 a diferen\\xE7a entre call stack e task queue?\"};function l(e){let a={a:\"a\",p:\"p\",...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(a.p,{children:\"O loop de eventos \\xE9 um la\\xE7o de execu\\xE7\\xE3o \\xFAnica (single-threaded) que monitora a pilha de chamadas e verifica se h\\xE1 algum trabalho a ser feito na fila de tarefas. Se a pilha de chamadas estiver vazia e houver fun\\xE7\\xF5es de retorno de chamada (callback) na fila de tarefas, uma fun\\xE7\\xE3o \\xE9 desenfileirada e colocada na pilha de chamadas para ser executada.\"}),`\n`,(0,t.jsxs)(a.p,{children:[\"Se voc\\xEA ainda n\\xE3o conferiu as \",(0,t.jsx)(a.a,{href:\"https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-heck-is-the-event-loop-anyway.html\",children:\"palestras sobre o loop de eventos\"}),\", voc\\xEA deveria. \\xC9 um dos v\\xEDdeos mais vistos de JavaScript.\"]})]})}function h(e={}){let{wrapper:a}=e.components||{};return a?(0,t.jsx)(a,{...e,children:(0,t.jsx)(l,{...e})}):l(e)}return k(g);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/zh-CN.json
index fe4b2fb97..4381a8a69 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var v=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),w=(i,e)=>{for(var c in e)l(i,c,{get:e[c],enumerable:!0})},t=(i,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!k.call(i,r)&&r!==c&&l(i,r,{get:()=>e[r],enumerable:!(o=m(e,r))||o.enumerable});return i};var b=(i,e,c)=>(c=i!=null?s(u(i)):{},t(e||!i||!i.__esModule?l(c,\"default\",{value:i,enumerable:!0}):c,i)),P=i=>t(l({},\"__esModule\",{value:!0}),i);var a=v((j,h)=>{h.exports=_jsx_runtime});var J={};w(J,{default:()=>S,frontmatter:()=>T});var n=b(a()),T={title:\"JavaScript \\u8FD0\\u884C\\u65F6\\u4E2D\\u7684\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u662F\\u4EC0\\u4E48\\uFF1F\",subtitle:\"call stack \\u548C task queue \\u4E4B\\u95F4\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function d(i){let e=Object.assign({h2:\"h2\",p:\"p\",ol:\"ol\",li:\"li\",code:\"code\",ul:\"ul\",a:\"a\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u662F JavaScript \\u8FD0\\u884C\\u65F6\\u73AF\\u5883\\u5185\\u5173\\u4E8E\\u5F02\\u6B65\\u64CD\\u4F5C\\u5982\\u4F55\\u5728 JavaScript \\u5F15\\u64CE\\u4E2D\\u6267\\u884C\\u7684\\u6982\\u5FF5\\u3002\\u5B83\\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\u5982\\u4E0B\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"JavaScript \\u5F15\\u64CE\\u5F00\\u59CB\\u6267\\u884C\\u811A\\u672C\\uFF0C\\u5C06\\u540C\\u6B65\\u64CD\\u4F5C\\u653E\\u5728\\u8C03\\u7528\\u5806\\u6808\\u4E0A\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5F53\\u9047\\u5230\\u5F02\\u6B65\\u64CD\\u4F5C\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\"\\u3001HTTP \\u8BF7\\u6C42\\uFF09\\u65F6\\uFF0C\\u5B83\\u4F1A\\u88AB\\u5378\\u8F7D\\u5230\\u76F8\\u5E94\\u7684 Web API \\u6216 Node.js API\\uFF0C\\u4EE5\\u5728\\u540E\\u53F0\\u5904\\u7406\\u8BE5\\u64CD\\u4F5C\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u4E00\\u65E6\\u5F02\\u6B65\\u64CD\\u4F5C\\u5B8C\\u6210\\uFF0C\\u5176\\u56DE\\u8C03\\u51FD\\u6570\\u5C06\\u88AB\\u653E\\u7F6E\\u5728\\u76F8\\u5E94\\u7684\\u961F\\u5217\\u4E2D\\u2014\\u2014\\u4EFB\\u52A1\\u961F\\u5217\\uFF08\\u4E5F\\u79F0\\u4E3A\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217/\\u56DE\\u8C03\\u961F\\u5217\\uFF09\\u6216\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u3002\\u4ECE\\u8FD9\\u91CC\\u5F00\\u59CB\\uFF0C\\u6211\\u4EEC\\u5C06\\u201C\\u4EFB\\u52A1\\u961F\\u5217\\u201D\\u79F0\\u4E3A\\u201C\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u201D\\uFF0C\\u4EE5\\u4FBF\\u66F4\\u597D\\u5730\\u4E0E\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u533A\\u5206\\u5F00\\u6765\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u6301\\u7EED\\u76D1\\u89C6\\u8C03\\u7528\\u5806\\u6808\\u5E76\\u6267\\u884C\\u8C03\\u7528\\u5806\\u6808\\u4E0A\\u7684\\u9879\\u76EE\\u3002\\u5982\\u679C/\\u5F53\\u8C03\\u7528\\u5806\\u6808\\u4E3A\\u7A7A\\u65F6\\uFF1A\",`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5904\\u7406\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u3002\\u5FAE\\u4EFB\\u52A1\\u5305\\u62EC promise \\u56DE\\u8C03\\uFF08\",(0,n.jsx)(e.code,{children:\"then\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"catch\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"finally\"}),\"\\uFF09\\u3001\",(0,n.jsx)(e.code,{children:\"MutationObserver\"}),\" \\u56DE\\u8C03\\u548C\\u5BF9 \",(0,n.jsx)(e.code,{children:\"queueMicrotask()\"}),\" \\u7684\\u8C03\\u7528\\u3002\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u4ECE\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u4E2D\\u83B7\\u53D6\\u7B2C\\u4E00\\u4E2A\\u56DE\\u8C03\\u5E76\\u5C06\\u5176\\u63A8\\u9001\\u5230\\u8C03\\u7528\\u5806\\u6808\\u4EE5\\u4F9B\\u6267\\u884C\\u3002\\u91CD\\u590D\\u6B64\\u64CD\\u4F5C\\uFF0C\\u76F4\\u5230\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u4E3A\\u7A7A\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5904\\u7406\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u3002\\u5B8F\\u4EFB\\u52A1\\u5305\\u62EC Web API\\uFF0C\\u5982 \",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\"\\u3001HTTP \\u8BF7\\u6C42\\u3001\\u7528\\u6237\\u754C\\u9762\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\uFF0C\\u5982\\u70B9\\u51FB\\u3001\\u6EDA\\u52A8\\u7B49\\u3002\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u4ECE\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u4E2D\\u51FA\\u5217\\u7B2C\\u4E00\\u4E2A\\u56DE\\u8C03\\u5E76\\u5C06\\u5176\\u63A8\\u9001\\u5230\\u8C03\\u7528\\u5806\\u6808\\u4EE5\\u4F9B\\u6267\\u884C\\u3002\\u4F46\\u662F\\uFF0C\\u5728\\u5904\\u7406\\u5B8C\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u56DE\\u8C03\\u540E\\uFF0C\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u4E0D\\u4F1A\\u7EE7\\u7EED\\u5904\\u7406\\u4E0B\\u4E00\\u4E2A\\u5B8F\\u4EFB\\u52A1\\uFF01\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u9996\\u5148\\u68C0\\u67E5\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u3002\\u68C0\\u67E5\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u662F\\u5FC5\\u8981\\u7684\\uFF0C\\u56E0\\u4E3A\\u5FAE\\u4EFB\\u52A1\\u7684\\u4F18\\u5148\\u7EA7\\u9AD8\\u4E8E\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u56DE\\u8C03\\u3002\\u521A\\u521A\\u6267\\u884C\\u7684\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u56DE\\u8C03\\u53EF\\u80FD\\u6DFB\\u52A0\\u4E86\\u66F4\\u591A\\u5FAE\\u4EFB\\u52A1\\uFF01\",`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u5982\\u679C\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u975E\\u7A7A\\uFF0C\\u5219\\u6309\\u4E0A\\u4E00\\u6B65\\u5904\\u7406\\u5B83\\u4EEC\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5982\\u679C\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u4E3A\\u7A7A\\uFF0C\\u5219\\u5904\\u7406\\u4E0B\\u4E00\\u4E2A\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u56DE\\u8C03\\u3002\\u91CD\\u590D\\u6B64\\u64CD\\u4F5C\\uFF0C\\u76F4\\u5230\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u4E3A\\u7A7A\\u3002\"}),`\n`]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u6B64\\u8FC7\\u7A0B\\u65E0\\u9650\\u671F\\u5730\\u6301\\u7EED\\u8FDB\\u884C\\uFF0C\\u5141\\u8BB8 JavaScript \\u5F15\\u64CE\\u9AD8\\u6548\\u5730\\u5904\\u7406\\u540C\\u6B65\\u548C\\u5F02\\u6B65\\u64CD\\u4F5C\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u585E\\u8C03\\u7528\\u5806\\u6808\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E0D\\u5E78\\u7684\\u662F\\uFF0C\\u4EC5\\u4F7F\\u7528\\u6587\\u672C\\u5F88\\u96BE\\u5F88\\u597D\\u5730\\u89E3\\u91CA\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u3002\\u6211\\u4EEC\\u5EFA\\u8BAE\\u67E5\\u770B\\u4EE5\\u4E0B\\u4F18\\u79C0\\u7684\\u89C6\\u9891\\u4E4B\\u4E00\\uFF0C\\u89E3\\u91CA\\u4E8B\\u4EF6\\u5FAA\\u73AF\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://www.youtube.com/watch?v=eiC58R16hb8\",children:\"JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue\"}),\" (2024): Lydia Hallie \\u662F JavaScript \\u65B9\\u9762\\u7684\\u70ED\\u95E8\\u6559\\u80B2\\u5BB6\\uFF0C\\u8FD9\\u662F\\u89E3\\u91CA\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u7684\\u6700\\u65B0\\u6700\\u4F73\\u89C6\\u9891\\u3002\\u5BF9\\u4E8E\\u90A3\\u4E9B\\u559C\\u6B22\\u8BE6\\u7EC6\\u7684\\u57FA\\u4E8E\\u6587\\u672C\\u7684\\u89E3\\u91CA\\u7684\\u4EBA\\uFF0C\\u8FD8\\u6709\\u4E00\\u4E2A\",(0,n.jsx)(e.a,{href:\"https://www.lydiahallie.com/blog/event-loop\",children:\"\\u914D\\u5957\\u535A\\u5BA2\\u6587\\u7AE0\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://www.youtube.com/watch?v=cCOL7MC4Pl0\",children:\"In the Loop\"}),\" (2018): \\u6765\\u81EA Chrome \\u56E2\\u961F\\u7684 Jake Archibald \\u5728 JSConf 2018 \\u671F\\u95F4\\u63D0\\u4F9B\\u4E86\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u7684\\u89C6\\u89C9\\u6F14\\u793A\\uFF0C\\u89E3\\u91CA\\u4E86\\u4E0D\\u540C\\u7C7B\\u578B\\u7684\\u4EFB\\u52A1\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://www.youtube.com/watch?v=8aGhZQkoFbQ\",children:\"What the heck is the event loop anyway?\"}),\" (2014): Philip Robert \\u5728 JSConf 2014 \\u4E0A\\u53D1\\u8868\\u4E86\\u8FD9\\u6B21\\u53F2\\u8BD7\\u822C\\u7684\\u6F14\\u8BB2\\uFF0C\\u8FD9\\u662F YouTube \\u4E0A\\u89C2\\u770B\\u6B21\\u6570\\u6700\\u591A\\u7684 JavaScript \\u89C6\\u9891\\u4E4B\\u4E00\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6211\\u4EEC\\u5EFA\\u8BAE\\u89C2\\u770B \",(0,n.jsx)(e.a,{href:\"https://www.youtube.com/watch?v=eiC58R16hb8\",children:\"Lydia \\u7684\\u89C6\\u9891\"}),\"\\uFF0C\\u56E0\\u4E3A\\u5B83\\u662F\\u6700\\u73B0\\u4EE3\\u548C\\u7B80\\u6D01\\u7684\\u89E3\\u91CA\\uFF0C\\u65F6\\u957F\\u4EC5\\u4E3A 13 \\u5206\\u949F\\uFF0C\\u800C\\u5176\\u4ED6\\u89C6\\u9891\\u81F3\\u5C11\\u9700\\u8981 30 \\u5206\\u949F\\u3002\\u5979\\u7684\\u89C6\\u9891\\u8DB3\\u4EE5\\u6EE1\\u8DB3\\u9762\\u8BD5\\u7684\\u76EE\\u7684\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"JavaScript \\u4E2D\\u7684\\u4E8B\\u4EF6\\u5FAA\\u73AF\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u662F JavaScript \\u5F02\\u6B65\\u64CD\\u4F5C\\u7684\\u6838\\u5FC3\\u3002\\u5B83\\u662F\\u4E00\\u79CD\\u5904\\u7406\\u4EE3\\u7801\\u6267\\u884C\\u7684\\u673A\\u5236\\uFF0C\\u5141\\u8BB8\\u5F02\\u6B65\\u64CD\\u4F5C\\u5E76\\u786E\\u4FDD JavaScript \\u5F15\\u64CE\\u7684\\u5355\\u7EBF\\u7A0B\\u6027\\u8D28\\u4E0D\\u4F1A\\u963B\\u585E\\u7A0B\\u5E8F\\u7684\\u6267\\u884C\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u7684\\u7EC4\\u6210\\u90E8\\u5206\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E3A\\u4E86\\u66F4\\u597D\\u5730\\u7406\\u89E3\\u5B83\\uFF0C\\u6211\\u4EEC\\u9700\\u8981\\u4E86\\u89E3\\u7CFB\\u7EDF\\u7684\\u6240\\u6709\\u7EC4\\u6210\\u90E8\\u5206\\u3002\\u8FD9\\u4E9B\\u7EC4\\u4EF6\\u662F\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u7684\\u4E00\\u90E8\\u5206\\uFF1A\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u8C03\\u7528\\u5806\\u6808\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8C03\\u7528\\u5806\\u6808\\u8DDF\\u8E2A\\u7A0B\\u5E8F\\u4E2D\\u6B63\\u5728\\u6267\\u884C\\u7684\\u51FD\\u6570\\u3002\\u5F53\\u8C03\\u7528\\u4E00\\u4E2A\\u51FD\\u6570\\u65F6\\uFF0C\\u5B83\\u88AB\\u6DFB\\u52A0\\u5230\\u8C03\\u7528\\u5806\\u6808\\u7684\\u9876\\u90E8\\u3002\\u5F53\\u51FD\\u6570\\u5B8C\\u6210\\u65F6\\uFF0C\\u5B83\\u5C06\\u4ECE\\u8C03\\u7528\\u5806\\u6808\\u4E2D\\u5220\\u9664\\u3002\\u8FD9\\u5141\\u8BB8\\u7A0B\\u5E8F\\u8DDF\\u8E2A\\u5B83\\u5728\\u51FD\\u6570\\u6267\\u884C\\u4E2D\\u7684\\u4F4D\\u7F6E\\uFF0C\\u5E76\\u5728\\u51FD\\u6570\\u5B8C\\u6210\\u65F6\\u8FD4\\u56DE\\u5230\\u6B63\\u786E\\u7684\\u4F4D\\u7F6E\\u3002\\u987E\\u540D\\u601D\\u4E49\\uFF0C\\u5B83\\u662F\\u4E00\\u4E2A\\u9075\\u5FAA\\u540E\\u8FDB\\u5148\\u51FA\\u7684\\u5806\\u6808\\u6570\\u636E\\u7ED3\\u6784\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Web API/Node.js API\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F02\\u6B65\\u64CD\\u4F5C\\uFF0C\\u5982 \",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\"\\u3001HTTP \\u8BF7\\u6C42\\u3001\\u6587\\u4EF6 I/O \\u7B49\\uFF0C\\u7531 Web API\\uFF08\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\uFF09\\u6216 C++ API\\uFF08\\u5728 Node.js \\u4E2D\\uFF09\\u5904\\u7406\\u3002\\u8FD9\\u4E9B API \\u4E0D\\u662F JavaScript \\u5F15\\u64CE\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u5E76\\u4E14\\u5728\\u5355\\u72EC\\u7684\\u7EBF\\u7A0B\\u4E0A\\u8FD0\\u884C\\uFF0C\\u5141\\u8BB8\\u5B83\\u4EEC\\u5E76\\u53D1\\u6267\\u884C\\u800C\\u4E0D\\u4F1A\\u963B\\u585E\\u8C03\\u7528\\u5806\\u6808\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4EFB\\u52A1\\u961F\\u5217 / \\u5B8F\\u4EFB\\u52A1\\u961F\\u5217 / \\u56DE\\u8C03\\u961F\\u5217\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4EFB\\u52A1\\u961F\\u5217\\uFF0C\\u4E5F\\u79F0\\u4E3A\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217/\\u56DE\\u8C03\\u961F\\u5217/\\u4E8B\\u4EF6\\u961F\\u5217\\uFF0C\\u662F\\u4E00\\u4E2A\\u4FDD\\u5B58\\u9700\\u8981\\u6267\\u884C\\u7684\\u4EFB\\u52A1\\u7684\\u961F\\u5217\\u3002\\u8FD9\\u4E9B\\u4EFB\\u52A1\\u901A\\u5E38\\u662F\\u5F02\\u6B65\\u64CD\\u4F5C\\uFF0C\\u4F8B\\u5982\\u4F20\\u9012\\u7ED9 Web API \\u7684\\u56DE\\u8C03\\uFF08\",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"setInterval()\"}),\"\\u3001HTTP \\u8BF7\\u6C42\\u7B49\\uFF09\\u4EE5\\u53CA\\u7528\\u6237\\u754C\\u9762\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\uFF0C\\u5982\\u70B9\\u51FB\\u3001\\u6EDA\\u52A8\\u7B49\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Microtasks \\u662F\\u6BD4 macrotasks \\u5177\\u6709\\u66F4\\u9AD8\\u4F18\\u5148\\u7EA7\\u7684\\u4EFB\\u52A1\\uFF0C\\u5B83\\u4EEC\\u5728\\u5F53\\u524D\\u6267\\u884C\\u7684\\u811A\\u672C\\u5B8C\\u6210\\u4E4B\\u540E\\u3001\\u4E0B\\u4E00\\u4E2A macrotask \\u6267\\u884C\\u4E4B\\u524D\\u7ACB\\u5373\\u6267\\u884C\\u3002Microtasks \\u901A\\u5E38\\u7528\\u4E8E\\u66F4\\u5373\\u65F6\\u3001\\u8F7B\\u91CF\\u7EA7\\u7684\\u64CD\\u4F5C\\uFF0C\\u8FD9\\u4E9B\\u64CD\\u4F5C\\u5E94\\u5728\\u5F53\\u524D\\u64CD\\u4F5C\\u5B8C\\u6210\\u540E\\u5C3D\\u5FEB\\u6267\\u884C\\u3002\\u6709\\u4E00\\u4E2A\\u4E13\\u95E8\\u7528\\u4E8E microtasks \\u7684 microtask \\u961F\\u5217\\u3002Microtasks \\u5305\\u62EC promise \\u56DE\\u8C03\\uFF08\",(0,n.jsx)(e.code,{children:\"then()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"catch()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"finally()\"}),\"\\uFF09\\u3001\",(0,n.jsx)(e.code,{children:\"await\"}),\" \\u8BED\\u53E5\\u3001\",(0,n.jsx)(e.code,{children:\"queueMicrotask()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"MutationObserver\"}),\" \\u56DE\\u8C03\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u987A\\u5E8F\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"JavaScript \\u5F15\\u64CE\\u5F00\\u59CB\\u6267\\u884C\\u811A\\u672C\\uFF0C\\u5C06\\u540C\\u6B65\\u64CD\\u4F5C\\u653E\\u5728\\u8C03\\u7528\\u5806\\u6808\\u4E0A\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5F53\\u9047\\u5230\\u5F02\\u6B65\\u64CD\\u4F5C\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\"\\u3001HTTP \\u8BF7\\u6C42\\uFF09\\u65F6\\uFF0C\\u5B83\\u4F1A\\u88AB\\u5378\\u8F7D\\u5230\\u76F8\\u5E94\\u7684 Web API \\u6216 Node.js API\\uFF0C\\u4EE5\\u5728\\u540E\\u53F0\\u5904\\u7406\\u8BE5\\u64CD\\u4F5C\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u4E00\\u65E6\\u5F02\\u6B65\\u64CD\\u4F5C\\u5B8C\\u6210\\uFF0C\\u5176\\u56DE\\u8C03\\u51FD\\u6570\\u5C06\\u88AB\\u653E\\u7F6E\\u5728\\u76F8\\u5E94\\u7684\\u961F\\u5217\\u4E2D\\u2014\\u2014\\u4EFB\\u52A1\\u961F\\u5217\\uFF08\\u4E5F\\u79F0\\u4E3A macrotask \\u961F\\u5217/\\u56DE\\u8C03\\u961F\\u5217\\uFF09\\u6216 microtask \\u961F\\u5217\\u3002\\u4ECE\\u8FD9\\u91CC\\u5F00\\u59CB\\uFF0C\\u6211\\u4EEC\\u5C06\\u201C\\u4EFB\\u52A1\\u961F\\u5217\\u201D\\u79F0\\u4E3A\\u201Cmacrotask \\u961F\\u5217\\u201D\\uFF0C\\u4EE5\\u4FBF\\u66F4\\u597D\\u5730\\u4E0E microtask \\u961F\\u5217\\u533A\\u5206\\u5F00\\u6765\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u6301\\u7EED\\u76D1\\u89C6\\u8C03\\u7528\\u5806\\u6808\\u5E76\\u6267\\u884C\\u8C03\\u7528\\u5806\\u6808\\u4E0A\\u7684\\u9879\\u76EE\\u3002\\u5982\\u679C/\\u5F53\\u8C03\\u7528\\u5806\\u6808\\u4E3A\\u7A7A\\u65F6\\uFF1A\",`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"microtask \\u961F\\u5217\\u88AB\\u5904\\u7406\\u3002\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u4ECE microtask \\u961F\\u5217\\u4E2D\\u83B7\\u53D6\\u7B2C\\u4E00\\u4E2A\\u56DE\\u8C03\\uFF0C\\u5E76\\u5C06\\u5176\\u63A8\\u9001\\u5230\\u8C03\\u7528\\u5806\\u6808\\u4EE5\\u4F9B\\u6267\\u884C\\u3002\\u8FD9\\u5C06\\u91CD\\u590D\\u8FDB\\u884C\\uFF0C\\u76F4\\u5230 microtask \\u961F\\u5217\\u4E3A\\u7A7A\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"macrotask \\u961F\\u5217\\u88AB\\u5904\\u7406\\u3002\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u4ECE macrotask \\u961F\\u5217\\u4E2D\\u53D6\\u51FA\\u7B2C\\u4E00\\u4E2A\\u56DE\\u8C03\\uFF0C\\u5E76\\u5C06\\u5176\\u63A8\\u9001\\u5230\\u8C03\\u7528\\u5806\\u6808\\u4E0A\\u4EE5\\u4F9B\\u6267\\u884C\\u3002\\u4F46\\u662F\\uFF0C\\u5728\\u5904\\u7406\\u5B8C macrotask \\u961F\\u5217\\u56DE\\u8C03\\u4E4B\\u540E\\uFF0C\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u4E0D\\u4F1A\\u7EE7\\u7EED\\u5904\\u7406\\u4E0B\\u4E00\\u4E2A macrotask\\uFF01\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u9996\\u5148\\u68C0\\u67E5 microtask \\u961F\\u5217\\u3002\\u68C0\\u67E5 microtask \\u961F\\u5217\\u662F\\u5FC5\\u8981\\u7684\\uFF0C\\u56E0\\u4E3A microtasks \\u7684\\u4F18\\u5148\\u7EA7\\u9AD8\\u4E8E macrotask \\u961F\\u5217\\u56DE\\u8C03\\u3002\\u521A\\u521A\\u6267\\u884C\\u7684 macrotask \\u961F\\u5217\\u56DE\\u8C03\\u53EF\\u80FD\\u6DFB\\u52A0\\u4E86\\u66F4\\u591A microtasks\\uFF01\",`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u5982\\u679C microtask \\u961F\\u5217\\u975E\\u7A7A\\uFF0C\\u5219\\u6309\\u4E0A\\u4E00\\u6B65\\u5904\\u7406\\u5B83\\u4EEC\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5982\\u679C microtask \\u961F\\u5217\\u4E3A\\u7A7A\\uFF0C\\u5219\\u5904\\u7406\\u4E0B\\u4E00\\u4E2A macrotask \\u961F\\u5217\\u56DE\\u8C03\\u3002\\u8FD9\\u5C06\\u91CD\\u590D\\u8FDB\\u884C\\uFF0C\\u76F4\\u5230 macrotask \\u961F\\u5217\\u4E3A\\u7A7A\\u3002\"}),`\n`]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u6B64\\u8FC7\\u7A0B\\u65E0\\u9650\\u671F\\u5730\\u6301\\u7EED\\u8FDB\\u884C\\uFF0C\\u5141\\u8BB8 JavaScript \\u5F15\\u64CE\\u9AD8\\u6548\\u5730\\u5904\\u7406\\u540C\\u6B65\\u548C\\u5F02\\u6B65\\u64CD\\u4F5C\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u585E\\u8C03\\u7528\\u5806\\u6808\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u4EE3\\u7801\\u4F7F\\u7528\\u6B63\\u5E38\\u6267\\u884C\\u3001macrotasks \\u548C microtasks \\u7684\\u7EC4\\u5408\\u6765\\u8BB0\\u5F55\\u4E00\\u4E9B\\u8BED\\u53E5\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log('Start');\n\nsetTimeout(() => {\n  console.log('Timeout 1');\n}, 0);\n\nPromise.resolve().then(() => {\n  console.log('Promise 1');\n});\n\nsetTimeout(() => {\n  console.log('Timeout 2');\n}, 0);\n\nconsole.log('End');\n\n// Console output:\n// Start\n// End\n// Promise 1\n// Timeout 1\n// Timeout 2\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8F93\\u51FA\\u8BF4\\u660E\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Start\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"End\"}),\" \\u9996\\u5148\\u88AB\\u8BB0\\u5F55\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u662F\\u521D\\u59CB\\u811A\\u672C\\u7684\\u4E00\\u90E8\\u5206\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Promise 1\"}),\" \\u63A5\\u4E0B\\u6765\\u88AB\\u8BB0\\u5F55\\uFF0C\\u56E0\\u4E3A promises \\u662F microtasks\\uFF0C\\u5E76\\u4E14 microtasks \\u5728\\u8C03\\u7528\\u5806\\u6808\\u4E0A\\u7684\\u9879\\u76EE\\u4E4B\\u540E\\u7ACB\\u5373\\u6267\\u884C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Timeout 1\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Timeout 2\"}),\" \\u6700\\u540E\\u88AB\\u8BB0\\u5F55\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u662F macrotasks\\uFF0C\\u5E76\\u4E14\\u5728 microtasks \\u4E4B\\u540E\\u88AB\\u5904\\u7406\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\\u548C\\u8D44\\u6E90\"}),`\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/Web/JavaScript/Event_loop\",children:\"\\u4E8B\\u4EF6\\u5FAA\\u73AF - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nodejs.org/en/learn/asynchronous-work/event-loop-timers-and-nexttick\",children:\"Node.js \\u4E8B\\u4EF6\\u5FAA\\u73AF\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/event-loop\",children:\"\\u4E8B\\u4EF6\\u5FAA\\u73AF\\uFF1Amicrotasks \\u548C macrotasks\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif\",children:\"JavaScript \\u53EF\\u89C6\\u5316\\uFF1ALydia Hallie \\u7684\\u4E8B\\u4EF6\\u5FAA\\u73AF\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.lydiahallie.com/blog/event-loop\",children:\"Lydia Hallie \\u7684\\u201CJavaScript \\u53EF\\u89C6\\u5316 - \\u4E8B\\u4EF6\\u5FAA\\u73AF\\u3001Web API\\u3001\\uFF08Micro\\uFF09\\u4EFB\\u52A1\\u961F\\u5217\\u201D\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html\",children:\"Philip Robert \\u7684\\u201C\\u5230\\u5E95\\u4EC0\\u4E48\\u662F\\u4E8B\\u4EF6\\u5FAA\\u73AF\\uFF1F\\u201D\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.youtube.com/watch?v=cCOL7MC4Pl0\",children:\"Jake Archibald \\u7684\\u201CIn The Loop\\u201D\"})}),`\n`]})]})}function f(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(d,i)})):d(i)}var S=f;return P(J);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var w=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),b=(i,e)=>{for(var c in e)l(i,c,{get:e[c],enumerable:!0})},t=(i,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!v.call(i,r)&&r!==c&&l(i,r,{get:()=>e[r],enumerable:!(o=p(e,r))||o.enumerable});return i};var P=(i,e,c)=>(c=i!=null?m(k(i)):{},t(e||!i||!i.__esModule?l(c,\"default\",{value:i,enumerable:!0}):c,i)),T=i=>t(l({},\"__esModule\",{value:!0}),i);var a=w((y,h)=>{h.exports=_jsx_runtime});var S={};b(S,{default:()=>s,frontmatter:()=>f});var n=P(a()),f={title:\"JavaScript \\u8FD0\\u884C\\u65F6\\u4E2D\\u7684\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u662F\\u4EC0\\u4E48\\uFF1F\",subtitle:\"call stack \\u548C task queue \\u4E4B\\u95F4\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function d(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u662FJavaScript\\u8FD0\\u884C\\u65F6\\u73AF\\u5883\\u4E2D\\u7684\\u4E00\\u4E2A\\u6982\\u5FF5\\uFF0C\\u6D89\\u53CA\\u5F02\\u6B65\\u64CD\\u4F5C\\u5982\\u4F55\\u5728JavaScript\\u5F15\\u64CE\\u4E2D\\u6267\\u884C\\u3002\\u5B83\\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\u5982\\u4E0B\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"JavaScript \\u5F15\\u64CE\\u5F00\\u59CB\\u6267\\u884C\\u811A\\u672C\\uFF0C\\u5C06\\u540C\\u6B65\\u64CD\\u4F5C\\u653E\\u5728\\u8C03\\u7528\\u5806\\u6808\\u4E0A\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5F53\\u9047\\u5230\\u5F02\\u6B65\\u64CD\\u4F5C\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\"\\u3001HTTP \\u8BF7\\u6C42\\uFF09\\u65F6\\uFF0C\\u5B83\\u4F1A\\u88AB\\u5378\\u8F7D\\u5230\\u76F8\\u5E94\\u7684 Web API \\u6216 Node.js API\\uFF0C\\u4EE5\\u5728\\u540E\\u53F0\\u5904\\u7406\\u8BE5\\u64CD\\u4F5C\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u4E00\\u65E6\\u5F02\\u6B65\\u64CD\\u4F5C\\u5B8C\\u6210\\uFF0C\\u5176\\u56DE\\u8C03\\u51FD\\u6570\\u5C06\\u88AB\\u653E\\u7F6E\\u5728\\u76F8\\u5E94\\u7684\\u961F\\u5217\\u4E2D\\u2014\\u2014\\u4EFB\\u52A1\\u961F\\u5217\\uFF08\\u4E5F\\u79F0\\u4E3A\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217/\\u56DE\\u8C03\\u961F\\u5217\\uFF09\\u6216\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u3002\\u4ECE\\u8FD9\\u91CC\\u5F00\\u59CB\\uFF0C\\u6211\\u4EEC\\u5C06\\u201C\\u4EFB\\u52A1\\u961F\\u5217\\u201D\\u79F0\\u4E3A\\u201C\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u201D\\uFF0C\\u4EE5\\u4FBF\\u66F4\\u597D\\u5730\\u4E0E\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u533A\\u5206\\u5F00\\u6765\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u6301\\u7EED\\u76D1\\u89C6\\u8C03\\u7528\\u5806\\u6808\\u5E76\\u6267\\u884C\\u8C03\\u7528\\u5806\\u6808\\u4E0A\\u7684\\u9879\\u76EE\\u3002\\u5982\\u679C/\\u5F53\\u8C03\\u7528\\u5806\\u6808\\u4E3A\\u7A7A\\u65F6\\uFF1A\",`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5904\\u7406\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u3002\\u5FAE\\u4EFB\\u52A1\\u5305\\u62EC promise \\u56DE\\u8C03\\uFF08\",(0,n.jsx)(e.code,{children:\"then\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"catch\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"finally\"}),\"\\uFF09\\u3001\",(0,n.jsx)(e.code,{children:\"MutationObserver\"}),\" \\u56DE\\u8C03\\u548C\\u5BF9 \",(0,n.jsx)(e.code,{children:\"queueMicrotask()\"}),\" \\u7684\\u8C03\\u7528\\u3002\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u4ECE\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u4E2D\\u83B7\\u53D6\\u7B2C\\u4E00\\u4E2A\\u56DE\\u8C03\\u5E76\\u5C06\\u5176\\u63A8\\u9001\\u5230\\u8C03\\u7528\\u5806\\u6808\\u4EE5\\u4F9B\\u6267\\u884C\\u3002\\u91CD\\u590D\\u6B64\\u64CD\\u4F5C\\uFF0C\\u76F4\\u5230\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u4E3A\\u7A7A\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5904\\u7406\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u3002\\u5B8F\\u4EFB\\u52A1\\u5305\\u62EC Web API\\uFF0C\\u5982 \",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\"\\u3001HTTP \\u8BF7\\u6C42\\u3001\\u7528\\u6237\\u754C\\u9762\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\uFF0C\\u5982\\u70B9\\u51FB\\u3001\\u6EDA\\u52A8\\u7B49\\u3002\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u4ECE\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u4E2D\\u51FA\\u5217\\u7B2C\\u4E00\\u4E2A\\u56DE\\u8C03\\u5E76\\u5C06\\u5176\\u63A8\\u9001\\u5230\\u8C03\\u7528\\u5806\\u6808\\u4EE5\\u4F9B\\u6267\\u884C\\u3002\\u4F46\\u662F\\uFF0C\\u5728\\u5904\\u7406\\u5B8C\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u56DE\\u8C03\\u540E\\uFF0C\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u4E0D\\u4F1A\\u7EE7\\u7EED\\u5904\\u7406\\u4E0B\\u4E00\\u4E2A\\u5B8F\\u4EFB\\u52A1\\uFF01\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u9996\\u5148\\u68C0\\u67E5\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u3002\\u68C0\\u67E5\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u662F\\u5FC5\\u8981\\u7684\\uFF0C\\u56E0\\u4E3A\\u5FAE\\u4EFB\\u52A1\\u7684\\u4F18\\u5148\\u7EA7\\u9AD8\\u4E8E\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u56DE\\u8C03\\u3002\\u521A\\u521A\\u6267\\u884C\\u7684\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u56DE\\u8C03\\u53EF\\u80FD\\u6DFB\\u52A0\\u4E86\\u66F4\\u591A\\u5FAE\\u4EFB\\u52A1\\uFF01\",`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u5982\\u679C\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u975E\\u7A7A\\uFF0C\\u5219\\u6309\\u4E0A\\u4E00\\u6B65\\u5904\\u7406\\u5B83\\u4EEC\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5982\\u679C\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\\u4E3A\\u7A7A\\uFF0C\\u5219\\u5904\\u7406\\u4E0B\\u4E00\\u4E2A\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u56DE\\u8C03\\u3002\\u91CD\\u590D\\u6B64\\u64CD\\u4F5C\\uFF0C\\u76F4\\u5230\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u4E3A\\u7A7A\\u3002\"}),`\n`]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u6B64\\u8FC7\\u7A0B\\u65E0\\u9650\\u671F\\u5730\\u6301\\u7EED\\u8FDB\\u884C\\uFF0C\\u5141\\u8BB8 JavaScript \\u5F15\\u64CE\\u9AD8\\u6548\\u5730\\u5904\\u7406\\u540C\\u6B65\\u548C\\u5F02\\u6B65\\u64CD\\u4F5C\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u585E\\u8C03\\u7528\\u5806\\u6808\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E0D\\u5E78\\u7684\\u662F\\uFF0C\\u4EC5\\u4F7F\\u7528\\u6587\\u672C\\u5F88\\u96BE\\u5F88\\u597D\\u5730\\u89E3\\u91CA\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u3002\\u6211\\u4EEC\\u5EFA\\u8BAE\\u67E5\\u770B\\u4EE5\\u4E0B\\u4F18\\u79C0\\u7684\\u89C6\\u9891\\u4E4B\\u4E00\\uFF0C\\u89E3\\u91CA\\u4E8B\\u4EF6\\u5FAA\\u73AF\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://www.youtube.com/watch?v=eiC58R16hb8\",children:\"JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue\"}),\" (2024): Lydia Hallie \\u662F\\u4E00\\u4E2A\\u53D7\\u6B22\\u8FCE\\u7684 JavaScript \\u6559\\u80B2\\u8005\\uFF0C\\u8FD9\\u662F\\u6700\\u8FD1\\u89E3\\u91CA\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u7684\\u6700\\u4F73\\u89C6\\u9891\\u3002\\u5BF9\\u4E8E\\u90A3\\u4E9B\\u559C\\u6B22\\u8BE6\\u7EC6\\u7684\\u57FA\\u4E8E\\u6587\\u672C\\u7684\\u89E3\\u91CA\\u7684\\u4EBA\\uFF0C\\u8FD8\\u6709\\u4E00\\u4E2A\",(0,n.jsx)(e.a,{href:\"https://www.lydiahallie.com/blog/event-loop\",children:\"\\u968F\\u9644\\u7684\\u535A\\u5BA2\\u6587\\u7AE0\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://www.youtube.com/watch?v=cCOL7MC4Pl0\",children:\"In the Loop\"}),\" (2018): \\u6765\\u81EA Chrome \\u56E2\\u961F\\u7684 Jake Archibald \\u5728 JSConf 2018 \\u671F\\u95F4\\u63D0\\u4F9B\\u4E86\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u7684\\u89C6\\u89C9\\u6F14\\u793A\\uFF0C\\u89E3\\u91CA\\u4E86\\u4E0D\\u540C\\u7C7B\\u578B\\u7684\\u4EFB\\u52A1\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://www.youtube.com/watch?v=8aGhZQkoFbQ\",children:\"What the heck is the event loop anyway?\"}),\" (2014): Philip Robert \\u5728 JSConf 2014 \\u4E0A\\u53D1\\u8868\\u4E86\\u8FD9\\u6B21\\u53F2\\u8BD7\\u822C\\u7684\\u6F14\\u8BB2\\uFF0C\\u8FD9\\u662F YouTube \\u4E0A\\u89C2\\u770B\\u6B21\\u6570\\u6700\\u591A\\u7684 JavaScript \\u89C6\\u9891\\u4E4B\\u4E00\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6211\\u4EEC\\u5EFA\\u8BAE\\u89C2\\u770B \",(0,n.jsx)(e.a,{href:\"https://www.youtube.com/watch?v=eiC58R16hb8\",children:\"Lydia \\u7684\\u89C6\\u9891\"}),\"\\uFF0C\\u56E0\\u4E3A\\u5B83\\u662F\\u6700\\u73B0\\u4EE3\\u548C\\u7B80\\u6D01\\u7684\\u89E3\\u91CA\\uFF0C\\u65F6\\u957F\\u4EC5\\u4E3A 13 \\u5206\\u949F\\uFF0C\\u800C\\u5176\\u4ED6\\u89C6\\u9891\\u81F3\\u5C11\\u9700\\u8981 30 \\u5206\\u949F\\u3002\\u5979\\u7684\\u89C6\\u9891\\u8DB3\\u4EE5\\u6EE1\\u8DB3\\u9762\\u8BD5\\u7684\\u76EE\\u7684\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"JavaScript \\u4E2D\\u7684\\u4E8B\\u4EF6\\u5FAA\\u73AF\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u662F JavaScript \\u5F02\\u6B65\\u64CD\\u4F5C\\u7684\\u6838\\u5FC3\\u3002\\u5B83\\u662F\\u4E00\\u79CD\\u5904\\u7406\\u4EE3\\u7801\\u6267\\u884C\\u7684\\u673A\\u5236\\uFF0C\\u5141\\u8BB8\\u5F02\\u6B65\\u64CD\\u4F5C\\u5E76\\u786E\\u4FDD JavaScript \\u5F15\\u64CE\\u7684\\u5355\\u7EBF\\u7A0B\\u6027\\u8D28\\u4E0D\\u4F1A\\u963B\\u585E\\u7A0B\\u5E8F\\u7684\\u6267\\u884C\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u7684\\u7EC4\\u6210\\u90E8\\u5206\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E3A\\u4E86\\u66F4\\u597D\\u5730\\u7406\\u89E3\\u5B83\\uFF0C\\u6211\\u4EEC\\u9700\\u8981\\u4E86\\u89E3\\u7CFB\\u7EDF\\u7684\\u6240\\u6709\\u7EC4\\u6210\\u90E8\\u5206\\u3002\\u8FD9\\u4E9B\\u7EC4\\u4EF6\\u662F\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u7684\\u4E00\\u90E8\\u5206\\uFF1A\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u8C03\\u7528\\u5806\\u6808\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8C03\\u7528\\u5806\\u6808\\u8DDF\\u8E2A\\u7A0B\\u5E8F\\u4E2D\\u6B63\\u5728\\u6267\\u884C\\u7684\\u51FD\\u6570\\u3002\\u5F53\\u8C03\\u7528\\u4E00\\u4E2A\\u51FD\\u6570\\u65F6\\uFF0C\\u5B83\\u88AB\\u6DFB\\u52A0\\u5230\\u8C03\\u7528\\u5806\\u6808\\u7684\\u9876\\u90E8\\u3002\\u5F53\\u51FD\\u6570\\u5B8C\\u6210\\u65F6\\uFF0C\\u5B83\\u5C06\\u4ECE\\u8C03\\u7528\\u5806\\u6808\\u4E2D\\u5220\\u9664\\u3002\\u8FD9\\u5141\\u8BB8\\u7A0B\\u5E8F\\u8DDF\\u8E2A\\u5B83\\u5728\\u51FD\\u6570\\u6267\\u884C\\u4E2D\\u7684\\u4F4D\\u7F6E\\uFF0C\\u5E76\\u5728\\u51FD\\u6570\\u5B8C\\u6210\\u65F6\\u8FD4\\u56DE\\u5230\\u6B63\\u786E\\u7684\\u4F4D\\u7F6E\\u3002\\u987E\\u540D\\u601D\\u4E49\\uFF0C\\u5B83\\u662F\\u4E00\\u4E2A\\u9075\\u5FAA\\u540E\\u8FDB\\u5148\\u51FA\\u7684\\u5806\\u6808\\u6570\\u636E\\u7ED3\\u6784\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Web API/Node.js API\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F02\\u6B65\\u64CD\\u4F5C\\uFF0C\\u5982 \",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\"\\u3001HTTP \\u8BF7\\u6C42\\u3001\\u6587\\u4EF6 I/O \\u7B49\\uFF0C\\u7531 Web API\\uFF08\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\uFF09\\u6216 C++ API\\uFF08\\u5728 Node.js \\u4E2D\\uFF09\\u5904\\u7406\\u3002\\u8FD9\\u4E9B API \\u4E0D\\u662F JavaScript \\u5F15\\u64CE\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u5E76\\u4E14\\u5728\\u5355\\u72EC\\u7684\\u7EBF\\u7A0B\\u4E0A\\u8FD0\\u884C\\uFF0C\\u5141\\u8BB8\\u5B83\\u4EEC\\u5E76\\u53D1\\u6267\\u884C\\u800C\\u4E0D\\u4F1A\\u963B\\u585E\\u8C03\\u7528\\u5806\\u6808\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4EFB\\u52A1\\u961F\\u5217 / \\u5B8F\\u4EFB\\u52A1\\u961F\\u5217 / \\u56DE\\u8C03\\u961F\\u5217\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4EFB\\u52A1\\u961F\\u5217\\uFF0C\\u4E5F\\u79F0\\u4E3A\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217/\\u56DE\\u8C03\\u961F\\u5217/\\u4E8B\\u4EF6\\u961F\\u5217\\uFF0C\\u662F\\u4E00\\u4E2A\\u4FDD\\u5B58\\u9700\\u8981\\u6267\\u884C\\u7684\\u4EFB\\u52A1\\u7684\\u961F\\u5217\\u3002\\u8FD9\\u4E9B\\u4EFB\\u52A1\\u901A\\u5E38\\u662F\\u5F02\\u6B65\\u64CD\\u4F5C\\uFF0C\\u4F8B\\u5982\\u4F20\\u9012\\u7ED9 Web API \\u7684\\u56DE\\u8C03\\uFF08\",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"setInterval()\"}),\"\\u3001HTTP \\u8BF7\\u6C42\\u7B49\\uFF09\\u4EE5\\u53CA\\u7528\\u6237\\u754C\\u9762\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\uFF0C\\u5982\\u70B9\\u51FB\\u3001\\u6EDA\\u52A8\\u7B49\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u5FAE\\u4EFB\\u52A1\\u961F\\u5217\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Microtasks \\u662F\\u6BD4 macrotasks \\u5177\\u6709\\u66F4\\u9AD8\\u4F18\\u5148\\u7EA7\\u7684\\u4EFB\\u52A1\\uFF0C\\u5B83\\u4EEC\\u5728\\u5F53\\u524D\\u6267\\u884C\\u7684\\u811A\\u672C\\u5B8C\\u6210\\u4E4B\\u540E\\u3001\\u4E0B\\u4E00\\u4E2A macrotask \\u6267\\u884C\\u4E4B\\u524D\\u7ACB\\u5373\\u6267\\u884C\\u3002Microtasks \\u901A\\u5E38\\u7528\\u4E8E\\u66F4\\u5373\\u65F6\\u3001\\u8F7B\\u91CF\\u7EA7\\u7684\\u64CD\\u4F5C\\uFF0C\\u8FD9\\u4E9B\\u64CD\\u4F5C\\u5E94\\u5728\\u5F53\\u524D\\u64CD\\u4F5C\\u5B8C\\u6210\\u540E\\u5C3D\\u5FEB\\u6267\\u884C\\u3002\\u6709\\u4E00\\u4E2A\\u4E13\\u95E8\\u7528\\u4E8E microtasks \\u7684 microtask \\u961F\\u5217\\u3002Microtasks \\u5305\\u62EC promise \\u56DE\\u8C03\\uFF08\",(0,n.jsx)(e.code,{children:\"then()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"catch()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"finally()\"}),\"\\uFF09\\u3001\",(0,n.jsx)(e.code,{children:\"await\"}),\" \\u8BED\\u53E5\\u3001\",(0,n.jsx)(e.code,{children:\"queueMicrotask()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"MutationObserver\"}),\" \\u56DE\\u8C03\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u987A\\u5E8F\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"JavaScript \\u5F15\\u64CE\\u5F00\\u59CB\\u6267\\u884C\\u811A\\u672C\\uFF0C\\u5C06\\u540C\\u6B65\\u64CD\\u4F5C\\u653E\\u5728\\u8C03\\u7528\\u5806\\u6808\\u4E0A\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5F53\\u9047\\u5230\\u5F02\\u6B65\\u64CD\\u4F5C\\uFF08\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\"\\u3001HTTP \\u8BF7\\u6C42\\uFF09\\u65F6\\uFF0C\\u5B83\\u4F1A\\u88AB\\u5378\\u8F7D\\u5230\\u76F8\\u5E94\\u7684 Web API \\u6216 Node.js API\\uFF0C\\u4EE5\\u5728\\u540E\\u53F0\\u5904\\u7406\\u8BE5\\u64CD\\u4F5C\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u4E00\\u65E6\\u5F02\\u6B65\\u64CD\\u4F5C\\u5B8C\\u6210\\uFF0C\\u5176\\u56DE\\u8C03\\u51FD\\u6570\\u5C06\\u88AB\\u653E\\u7F6E\\u5728\\u76F8\\u5E94\\u7684\\u961F\\u5217\\u4E2D\\u2014\\u2014\\u4EFB\\u52A1\\u961F\\u5217\\uFF08\\u4E5F\\u79F0\\u4E3A macrotask \\u961F\\u5217/\\u56DE\\u8C03\\u961F\\u5217\\uFF09\\u6216 microtask \\u961F\\u5217\\u3002\\u4ECE\\u8FD9\\u91CC\\u5F00\\u59CB\\uFF0C\\u6211\\u4EEC\\u5C06\\u201C\\u4EFB\\u52A1\\u961F\\u5217\\u201D\\u79F0\\u4E3A\\u201Cmacrotask \\u961F\\u5217\\u201D\\uFF0C\\u4EE5\\u4FBF\\u66F4\\u597D\\u5730\\u4E0E microtask \\u961F\\u5217\\u533A\\u5206\\u5F00\\u6765\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u6301\\u7EED\\u76D1\\u89C6\\u8C03\\u7528\\u5806\\u6808\\u5E76\\u6267\\u884C\\u8C03\\u7528\\u5806\\u6808\\u4E0A\\u7684\\u9879\\u76EE\\u3002\\u5982\\u679C/\\u5F53\\u8C03\\u7528\\u5806\\u6808\\u4E3A\\u7A7A\\u65F6\\uFF1A\",`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"microtask \\u961F\\u5217\\u88AB\\u5904\\u7406\\u3002\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u4ECE microtask \\u961F\\u5217\\u4E2D\\u83B7\\u53D6\\u7B2C\\u4E00\\u4E2A\\u56DE\\u8C03\\uFF0C\\u5E76\\u5C06\\u5176\\u63A8\\u9001\\u5230\\u8C03\\u7528\\u5806\\u6808\\u4EE5\\u4F9B\\u6267\\u884C\\u3002\\u8FD9\\u5C06\\u91CD\\u590D\\u8FDB\\u884C\\uFF0C\\u76F4\\u5230 microtask \\u961F\\u5217\\u4E3A\\u7A7A\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"macrotask \\u961F\\u5217\\u88AB\\u5904\\u7406\\u3002\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u4ECE macrotask \\u961F\\u5217\\u4E2D\\u53D6\\u51FA\\u7B2C\\u4E00\\u4E2A\\u56DE\\u8C03\\uFF0C\\u5E76\\u5C06\\u5176\\u63A8\\u9001\\u5230\\u8C03\\u7528\\u5806\\u6808\\u4E0A\\u4EE5\\u4F9B\\u6267\\u884C\\u3002\\u4F46\\u662F\\uFF0C\\u5728\\u5904\\u7406\\u5B8C macrotask \\u961F\\u5217\\u56DE\\u8C03\\u4E4B\\u540E\\uFF0C\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u4E0D\\u4F1A\\u7EE7\\u7EED\\u5904\\u7406\\u4E0B\\u4E00\\u4E2A macrotask\\uFF01\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u9996\\u5148\\u68C0\\u67E5 microtask \\u961F\\u5217\\u3002\\u68C0\\u67E5 microtask \\u961F\\u5217\\u662F\\u5FC5\\u8981\\u7684\\uFF0C\\u56E0\\u4E3A microtasks \\u7684\\u4F18\\u5148\\u7EA7\\u9AD8\\u4E8E macrotask \\u961F\\u5217\\u56DE\\u8C03\\u3002\\u521A\\u521A\\u6267\\u884C\\u7684 macrotask \\u961F\\u5217\\u56DE\\u8C03\\u53EF\\u80FD\\u6DFB\\u52A0\\u4E86\\u66F4\\u591A microtasks\\uFF01\",`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u5982\\u679C microtask \\u961F\\u5217\\u975E\\u7A7A\\uFF0C\\u5219\\u6309\\u4E0A\\u4E00\\u6B65\\u5904\\u7406\\u5B83\\u4EEC\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5982\\u679C microtask \\u961F\\u5217\\u4E3A\\u7A7A\\uFF0C\\u5219\\u5904\\u7406\\u4E0B\\u4E00\\u4E2A macrotask \\u961F\\u5217\\u56DE\\u8C03\\u3002\\u8FD9\\u5C06\\u91CD\\u590D\\u8FDB\\u884C\\uFF0C\\u76F4\\u5230 macrotask \\u961F\\u5217\\u4E3A\\u7A7A\\u3002\"}),`\n`]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u6B64\\u8FC7\\u7A0B\\u65E0\\u9650\\u671F\\u5730\\u6301\\u7EED\\u8FDB\\u884C\\uFF0C\\u5141\\u8BB8 JavaScript \\u5F15\\u64CE\\u9AD8\\u6548\\u5730\\u5904\\u7406\\u540C\\u6B65\\u548C\\u5F02\\u6B65\\u64CD\\u4F5C\\uFF0C\\u800C\\u4E0D\\u4F1A\\u963B\\u585E\\u8C03\\u7528\\u5806\\u6808\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u4EE3\\u7801\\u4F7F\\u7528\\u6B63\\u5E38\\u6267\\u884C\\u3001macrotasks \\u548C microtasks \\u7684\\u7EC4\\u5408\\u6765\\u8BB0\\u5F55\\u4E00\\u4E9B\\u8BED\\u53E5\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log('Start');\n\nsetTimeout(() => {\n  console.log('Timeout 1');\n}, 0);\n\nPromise.resolve().then(() => {\n  console.log('Promise 1');\n});\n\nsetTimeout(() => {\n  console.log('Timeout 2');\n}, 0);\n\nconsole.log('End');\n\n// Console output:\n// Start\n// End\n// Promise 1\n// Timeout 1\n// Timeout 2\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8F93\\u51FA\\u8BF4\\u660E\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Start\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"End\"}),\" \\u9996\\u5148\\u88AB\\u8BB0\\u5F55\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u662F\\u521D\\u59CB\\u811A\\u672C\\u7684\\u4E00\\u90E8\\u5206\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Promise 1\"}),\" \\u63A5\\u4E0B\\u6765\\u88AB\\u8BB0\\u5F55\\uFF0C\\u56E0\\u4E3A promises \\u662F microtasks\\uFF0C\\u5E76\\u4E14 microtasks \\u5728\\u8C03\\u7528\\u5806\\u6808\\u4E0A\\u7684\\u9879\\u76EE\\u4E4B\\u540E\\u7ACB\\u5373\\u6267\\u884C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Timeout 1\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"Timeout 2\"}),\" \\u6700\\u540E\\u88AB\\u8BB0\\u5F55\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u662F macrotasks\\uFF0C\\u5E76\\u4E14\\u5728 microtasks \\u4E4B\\u540E\\u88AB\\u5904\\u7406\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\\u548C\\u8D44\\u6E90\"}),`\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/Web/JavaScript/Event_loop\",children:\"\\u4E8B\\u4EF6\\u5FAA\\u73AF - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nodejs.org/en/learn/asynchronous-work/event-loop-timers-and-nexttick\",children:\"Node.js \\u4E8B\\u4EF6\\u5FAA\\u73AF\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/event-loop\",children:\"\\u4E8B\\u4EF6\\u5FAA\\u73AF\\uFF1Amicrotasks \\u548C macrotasks\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif\",children:\"JavaScript \\u53EF\\u89C6\\u5316\\uFF1ALydia Hallie \\u7684\\u4E8B\\u4EF6\\u5FAA\\u73AF\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.lydiahallie.com/blog/event-loop\",children:\"Lydia Hallie \\u7684\\u201CJavaScript \\u53EF\\u89C6\\u5316 - \\u4E8B\\u4EF6\\u5FAA\\u73AF\\u3001Web API\\u3001\\uFF08Micro\\uFF09\\u4EFB\\u52A1\\u961F\\u5217\\u201D\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html\",children:\"Philip Robert \\u7684\\u201C\\u5230\\u5E95\\u4EC0\\u4E48\\u662F\\u4E8B\\u4EF6\\u5FAA\\u73AF\\uFF1F\\u201D\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.youtube.com/watch?v=cCOL7MC4Pl0\",children:\"Jake Archibald \\u7684\\u201CIn The Loop\\u201D\"})}),`\n`]})]})}function s(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(d,{...i})}):d(i)}return T(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-forwardref-in-react-used-for/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-forwardref-in-react-used-for/en-US.json
index 53c15815d..6de8babf7 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-forwardref-in-react-used-for/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-forwardref-in-react-used-for/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-forwardref-in-react-used-for/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var w=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),R=(r,e)=>{for(var t in e)c(r,t,{get:e[t],enumerable:!0})},d=(r,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!m.call(r,o)&&o!==t&&c(r,o,{get:()=>e[o],enumerable:!(i=f(e,o))||i.enumerable});return r};var g=(r,e,t)=>(t=r!=null?s(p(r)):{},d(e||!r||!r.__esModule?c(t,\"default\",{value:r,enumerable:!0}):t,r)),y=r=>d(c({},\"__esModule\",{value:!0}),r);var l=w((T,a)=>{a.exports=_jsx_runtime});var D={};R(D,{default:()=>M,frontmatter:()=>x});var n=g(l()),x={title:\"What is `forwardRef()` in React used for?\"};function h(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",h4:\"h4\",ol:\"ol\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" in React is used to pass a ref through a component to one of its child components. This is useful when you need to access a DOM element or a child component's instance directly from a parent component. You wrap your functional component with \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" and use the \",(0,n.jsx)(e.code,{children:\"ref\"}),\" parameter to forward the ref to the desired child element.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { forwardRef } from 'react';\n\nconst MyComponent = forwardRef((props, ref) => <input ref={ref} {...props} />);\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" in React used for?\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Introduction\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In React, \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" is a higher-order function that allows you to forward a ref through a component to one of its child components. This is particularly useful when you need to access a DOM element or a child component's instance directly from a parent component.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Why use \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\"?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"There are several scenarios where \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" is beneficial:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Accessing DOM elements\"}),\": When you need to manipulate a DOM element directly, such as focusing an input field.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Interacting with child components\"}),\": When you need to call methods or access properties of a child component instance.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"How to use \",(0,n.jsx)(e.code,{children:\"forwardRef()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"To use \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\", you wrap your functional component with it and use the \",(0,n.jsx)(e.code,{children:\"ref\"}),\" parameter to forward the ref to the desired child element.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here is a simple example demonstrating how to use \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { forwardRef, useRef } from 'react';\n\n// Define a functional component and wrap it with forwardRef\nconst MyInput = forwardRef((props, ref) => <input ref={ref} {...props} />);\n\nconst ParentComponent = () => {\n  const inputRef = useRef(null);\n\n  const focusInput = () => {\n    // Access the input element and focus it\n    if (inputRef.current) {\n      inputRef.current.focus();\n    }\n  };\n\n  return (\n    <div>\n      <MyInput ref={inputRef} placeholder=\"Type here...\" />\n      <button onClick={focusInput}>Focus Input</button>\n    </div>\n  );\n};\n\nexport default ParentComponent;\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"In this example:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"MyInput\"}),\" is a functional component wrapped with \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"ref\"}),\" parameter is forwarded to the \",(0,n.jsx)(e.code,{children:\"input\"}),\" element inside \",(0,n.jsx)(e.code,{children:\"MyInput\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"In \",(0,n.jsx)(e.code,{children:\"ParentComponent\"}),\", a ref (\",(0,n.jsx)(e.code,{children:\"inputRef\"}),\") is created using \",(0,n.jsx)(e.code,{children:\"useRef()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"inputRef\"}),\" is passed to \",(0,n.jsx)(e.code,{children:\"MyInput\"}),\", allowing the parent component to access the input element directly.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"focusInput\"}),\" function uses the ref to focus the input element when the button is clicked.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Important considerations\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Functional components only\"}),\": \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" is used with functional components. Class components can directly use refs without \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Ref forwarding\"}),\": Ensure that the ref is forwarded to a DOM element or a class component instance, not another functional component.\"]}),`\n`]}),`\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.jsxs)(e.a,{href:\"https://react.dev/reference/react/forwardRef\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"forwardRef()\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useRef\",children:[\"Using the \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" Hook\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/manipulating-the-dom-with-refs\",children:\"Refs and the DOM\"})}),`\n`]})]})}function I(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(h,r)})):h(r)}var M=I;return y(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var f=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var R=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),g=(r,e)=>{for(var t in e)c(r,t,{get:e[t],enumerable:!0})},d=(r,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!w.call(r,o)&&o!==t&&c(r,o,{get:()=>e[o],enumerable:!(i=u(e,o))||i.enumerable});return r};var y=(r,e,t)=>(t=r!=null?f(m(r)):{},d(e||!r||!r.__esModule?c(t,\"default\",{value:r,enumerable:!0}):t,r)),x=r=>d(c({},\"__esModule\",{value:!0}),r);var a=R((T,l)=>{l.exports=_jsx_runtime});var M={};g(M,{default:()=>s,frontmatter:()=>I});var n=y(a()),I={title:\"What is `forwardRef()` in React used for?\"};function h(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" in React is used to pass a ref through a component to one of its child components. This is useful when you need to access a DOM element or a child component's instance directly from a parent component. You wrap your functional component with \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" and use the \",(0,n.jsx)(e.code,{children:\"ref\"}),\" parameter to forward the ref to the desired child element.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { forwardRef } from 'react';\n\nconst MyComponent = forwardRef((props, ref) => <input ref={ref} {...props} />);\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" in React used for?\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Introduction\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In React, \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" is a higher-order function that allows you to forward a ref through a component to one of its child components. This is particularly useful when you need to access a DOM element or a child component's instance directly from a parent component.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Why use \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\"?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"There are several scenarios where \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" is beneficial:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Accessing DOM elements\"}),\": When you need to manipulate a DOM element directly, such as focusing an input field.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Interacting with child components\"}),\": When you need to call methods or access properties of a child component instance.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"How to use \",(0,n.jsx)(e.code,{children:\"forwardRef()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"To use \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\", you wrap your functional component with it and use the \",(0,n.jsx)(e.code,{children:\"ref\"}),\" parameter to forward the ref to the desired child element.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here is a simple example demonstrating how to use \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { forwardRef, useRef } from 'react';\n\n// Define a functional component and wrap it with forwardRef\nconst MyInput = forwardRef((props, ref) => <input ref={ref} {...props} />);\n\nconst ParentComponent = () => {\n  const inputRef = useRef(null);\n\n  const focusInput = () => {\n    // Access the input element and focus it\n    if (inputRef.current) {\n      inputRef.current.focus();\n    }\n  };\n\n  return (\n    <div>\n      <MyInput ref={inputRef} placeholder=\"Type here...\" />\n      <button onClick={focusInput}>Focus Input</button>\n    </div>\n  );\n};\n\nexport default ParentComponent;\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"In this example:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"MyInput\"}),\" is a functional component wrapped with \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"ref\"}),\" parameter is forwarded to the \",(0,n.jsx)(e.code,{children:\"input\"}),\" element inside \",(0,n.jsx)(e.code,{children:\"MyInput\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"In \",(0,n.jsx)(e.code,{children:\"ParentComponent\"}),\", a ref (\",(0,n.jsx)(e.code,{children:\"inputRef\"}),\") is created using \",(0,n.jsx)(e.code,{children:\"useRef()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"inputRef\"}),\" is passed to \",(0,n.jsx)(e.code,{children:\"MyInput\"}),\", allowing the parent component to access the input element directly.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"focusInput\"}),\" function uses the ref to focus the input element when the button is clicked.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Important considerations\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Functional components only\"}),\": \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" is used with functional components. Class components can directly use refs without \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Ref forwarding\"}),\": Ensure that the ref is forwarded to a DOM element or a class component instance, not another functional component.\"]}),`\n`]}),`\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.jsxs)(e.a,{href:\"https://react.dev/reference/react/forwardRef\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"forwardRef()\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useRef\",children:[\"Using the \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" Hook\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/manipulating-the-dom-with-refs\",children:\"Refs and the DOM\"})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return x(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-forwardref-in-react-used-for/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-forwardref-in-react-used-for/zh-CN.json
index 515d880b4..9eb36a4cf 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-forwardref-in-react-used-for/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-forwardref-in-react-used-for/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-forwardref-in-react-used-for/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),w=(r,e)=>{for(var c in e)i(r,c,{get:e[c],enumerable:!0})},t=(r,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of s(e))!R.call(r,d)&&d!==c&&i(r,d,{get:()=>e[d],enumerable:!(o=p(e,d))||o.enumerable});return r};var g=(r,e,c)=>(c=r!=null?a(u(r)):{},t(e||!r||!r.__esModule?i(c,\"default\",{value:r,enumerable:!0}):c,r)),M=r=>t(i({},\"__esModule\",{value:!0}),r);var h=m((O,l)=>{l.exports=_jsx_runtime});var I={};w(I,{default:()=>D,frontmatter:()=>x});var n=g(h()),x={title:\"React \\u4E2D\\u7684 `forwardRef()` \\u6709\\u4EC0\\u4E48\\u4F5C\\u7528\\uFF1F\"};function f(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",h4:\"h4\",ol:\"ol\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" \\u7528\\u4E8E\\u901A\\u8FC7\\u7EC4\\u4EF6\\u5C06 ref \\u4F20\\u9012\\u7ED9\\u5176\\u5B50\\u7EC4\\u4EF6\\u4E4B\\u4E00\\u3002\\u5F53\\u60A8\\u9700\\u8981\\u76F4\\u63A5\\u4ECE\\u7236\\u7EC4\\u4EF6\\u8BBF\\u95EE DOM \\u5143\\u7D20\\u6216\\u5B50\\u7EC4\\u4EF6\\u7684\\u5B9E\\u4F8B\\u65F6\\uFF0C\\u8FD9\\u975E\\u5E38\\u6709\\u7528\\u3002\\u60A8\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" \\u5305\\u88C5\\u60A8\\u7684\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\uFF0C\\u5E76\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"ref\"}),\" \\u53C2\\u6570\\u5C06 ref \\u8F6C\\u53D1\\u5230\\u6240\\u9700\\u7684\\u5B50\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { forwardRef } from 'react';\n\nconst MyComponent = forwardRef((props, ref) => <input ref={ref} {...props} />);\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" \\u6709\\u4EC0\\u4E48\\u4F5C\\u7528\\uFF1F\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7B80\\u4ECB\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 React \\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" \\u662F\\u4E00\\u4E2A\\u9AD8\\u9636\\u51FD\\u6570\\uFF0C\\u5B83\\u5141\\u8BB8\\u60A8\\u901A\\u8FC7\\u7EC4\\u4EF6\\u5C06 ref \\u8F6C\\u53D1\\u7ED9\\u5176\\u5B50\\u7EC4\\u4EF6\\u4E4B\\u4E00\\u3002\\u5F53\\u60A8\\u9700\\u8981\\u76F4\\u63A5\\u4ECE\\u7236\\u7EC4\\u4EF6\\u8BBF\\u95EE DOM \\u5143\\u7D20\\u6216\\u5B50\\u7EC4\\u4EF6\\u7684\\u5B9E\\u4F8B\\u65F6\\uFF0C\\u8FD9\\u7279\\u522B\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4E3A\\u4EC0\\u4E48\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u4EE5\\u4E0B\\u51E0\\u79CD\\u60C5\\u51B5\\u4E0B\\uFF0C\",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" \\u5F88\\u6709\\u7528\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8BBF\\u95EE DOM \\u5143\\u7D20\"}),\"\\uFF1A\\u5F53\\u60A8\\u9700\\u8981\\u76F4\\u63A5\\u64CD\\u4F5C DOM \\u5143\\u7D20\\u65F6\\uFF0C\\u4F8B\\u5982\\u805A\\u7126\\u8F93\\u5165\\u5B57\\u6BB5\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0E\\u5B50\\u7EC4\\u4EF6\\u4EA4\\u4E92\"}),\"\\uFF1A\\u5F53\\u60A8\\u9700\\u8981\\u8C03\\u7528\\u5B50\\u7EC4\\u4EF6\\u5B9E\\u4F8B\\u7684\\u65B9\\u6CD5\\u6216\\u8BBF\\u95EE\\u5176\\u5C5E\\u6027\\u65F6\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u5982\\u4F55\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"forwardRef()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\"\\uFF0C\\u60A8\\u9700\\u8981\\u4F7F\\u7528\\u5B83\\u5305\\u88C5\\u60A8\\u7684\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\uFF0C\\u5E76\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"ref\"}),\" \\u53C2\\u6570\\u5C06 ref \\u8F6C\\u53D1\\u5230\\u6240\\u9700\\u7684\\u5B50\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u793A\\u4F8B\\uFF0C\\u6F14\\u793A\\u5982\\u4F55\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { forwardRef, useRef } from 'react';\n\n// \\u5B9A\\u4E49\\u4E00\\u4E2A\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\u5E76\\u7528 forwardRef \\u5305\\u88C5\\u5B83\nconst MyInput = forwardRef((props, ref) => <input ref={ref} {...props} />);\n\nconst ParentComponent = () => {\n  const inputRef = useRef(null);\n\n  const focusInput = () => {\n    // \\u8BBF\\u95EE input \\u5143\\u7D20\\u5E76\\u805A\\u7126\\u5B83\n    if (inputRef.current) {\n      inputRef.current.focus();\n    }\n  };\n\n  return (\n    <div>\n      <MyInput ref={inputRef} placeholder=\"Type here...\" />\n      <button onClick={focusInput}>Focus Input</button>\n    </div>\n  );\n};\n\nexport default ParentComponent;\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"MyInput\"}),\" \\u662F\\u4E00\\u4E2A\\u7528 \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" \\u5305\\u88C5\\u7684\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"ref\"}),\" \\u53C2\\u6570\\u88AB\\u8F6C\\u53D1\\u5230 \",(0,n.jsx)(e.code,{children:\"MyInput\"}),\" \\u5185\\u90E8\\u7684 \",(0,n.jsx)(e.code,{children:\"input\"}),\" \\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5728 \",(0,n.jsx)(e.code,{children:\"ParentComponent\"}),\" \\u4E2D\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useRef()\"}),\" \\u521B\\u5EFA\\u4E00\\u4E2A ref (\",(0,n.jsx)(e.code,{children:\"inputRef\"}),\")\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"inputRef\"}),\" \\u88AB\\u4F20\\u9012\\u7ED9 \",(0,n.jsx)(e.code,{children:\"MyInput\"}),\"\\uFF0C\\u5141\\u8BB8\\u7236\\u7EC4\\u4EF6\\u76F4\\u63A5\\u8BBF\\u95EE input \\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5F53\\u5355\\u51FB\\u6309\\u94AE\\u65F6\\uFF0C\",(0,n.jsx)(e.code,{children:\"focusInput\"}),\" \\u51FD\\u6570\\u4F7F\\u7528 ref \\u6765\\u805A\\u7126 input \\u5143\\u7D20\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u91CD\\u8981\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4EC5\\u9650\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" \\u4E0E\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\u4E00\\u8D77\\u4F7F\\u7528\\u3002\\u7C7B\\u7EC4\\u4EF6\\u53EF\\u4EE5\\u76F4\\u63A5\\u4F7F\\u7528 ref\\uFF0C\\u800C\\u65E0\\u9700 \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Ref \\u8F6C\\u53D1\"}),\"\\uFF1A\\u786E\\u4FDD ref \\u88AB\\u8F6C\\u53D1\\u5230 DOM \\u5143\\u7D20\\u6216\\u7C7B\\u7EC4\\u4EF6\\u5B9E\\u4F8B\\uFF0C\\u800C\\u4E0D\\u662F\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/forwardRef\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"forwardRef()\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useRef\",children:[\"Using the \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" Hook\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/manipulating-the-dom-with-refs\",children:\"Refs and the DOM\"})}),`\n`]})]})}function j(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(f,r)})):f(r)}var D=j;return M(I);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var w=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),M=(r,e)=>{for(var c in e)o(r,c,{get:e[c],enumerable:!0})},t=(r,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of s(e))!m.call(r,d)&&d!==c&&o(r,d,{get:()=>e[d],enumerable:!(i=u(e,d))||i.enumerable});return r};var g=(r,e,c)=>(c=r!=null?p(R(r)):{},t(e||!r||!r.__esModule?o(c,\"default\",{value:r,enumerable:!0}):c,r)),x=r=>t(o({},\"__esModule\",{value:!0}),r);var h=w((j,l)=>{l.exports=_jsx_runtime});var I={};M(I,{default:()=>a,frontmatter:()=>D});var n=g(h()),D={title:\"React \\u4E2D\\u7684 `forwardRef()` \\u6709\\u4EC0\\u4E48\\u4F5C\\u7528\\uFF1F\"};function f(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" \\u7528\\u4E8E\\u901A\\u8FC7\\u7EC4\\u4EF6\\u5C06 ref \\u4F20\\u9012\\u7ED9\\u5176\\u5B50\\u7EC4\\u4EF6\\u4E4B\\u4E00\\u3002\\u5F53\\u60A8\\u9700\\u8981\\u76F4\\u63A5\\u4ECE\\u7236\\u7EC4\\u4EF6\\u8BBF\\u95EE DOM \\u5143\\u7D20\\u6216\\u5B50\\u7EC4\\u4EF6\\u7684\\u5B9E\\u4F8B\\u65F6\\uFF0C\\u8FD9\\u975E\\u5E38\\u6709\\u7528\\u3002\\u60A8\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" \\u5305\\u88C5\\u60A8\\u7684\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\uFF0C\\u5E76\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"ref\"}),\" \\u53C2\\u6570\\u5C06 ref \\u8F6C\\u53D1\\u5230\\u6240\\u9700\\u7684\\u5B50\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { forwardRef } from 'react';\n\nconst MyComponent = forwardRef((props, ref) => <input ref={ref} {...props} />);\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" \\u6709\\u4EC0\\u4E48\\u4F5C\\u7528\\uFF1F\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7B80\\u4ECB\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 React \\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" \\u662F\\u4E00\\u4E2A\\u9AD8\\u9636\\u51FD\\u6570\\uFF0C\\u5B83\\u5141\\u8BB8\\u60A8\\u901A\\u8FC7\\u7EC4\\u4EF6\\u5C06 ref \\u8F6C\\u53D1\\u7ED9\\u5176\\u5B50\\u7EC4\\u4EF6\\u4E4B\\u4E00\\u3002\\u5F53\\u60A8\\u9700\\u8981\\u76F4\\u63A5\\u4ECE\\u7236\\u7EC4\\u4EF6\\u8BBF\\u95EE DOM \\u5143\\u7D20\\u6216\\u5B50\\u7EC4\\u4EF6\\u7684\\u5B9E\\u4F8B\\u65F6\\uFF0C\\u8FD9\\u7279\\u522B\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4E3A\\u4EC0\\u4E48\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u4EE5\\u4E0B\\u51E0\\u79CD\\u60C5\\u51B5\\u4E0B\\uFF0C\",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" \\u5F88\\u6709\\u7528\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8BBF\\u95EE DOM \\u5143\\u7D20\"}),\"\\uFF1A\\u5F53\\u60A8\\u9700\\u8981\\u76F4\\u63A5\\u64CD\\u4F5C DOM \\u5143\\u7D20\\u65F6\\uFF0C\\u4F8B\\u5982\\u805A\\u7126\\u8F93\\u5165\\u5B57\\u6BB5\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0E\\u5B50\\u7EC4\\u4EF6\\u4EA4\\u4E92\"}),\"\\uFF1A\\u5F53\\u60A8\\u9700\\u8981\\u8C03\\u7528\\u5B50\\u7EC4\\u4EF6\\u5B9E\\u4F8B\\u7684\\u65B9\\u6CD5\\u6216\\u8BBF\\u95EE\\u5176\\u5C5E\\u6027\\u65F6\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u5982\\u4F55\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"forwardRef()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\"\\uFF0C\\u60A8\\u9700\\u8981\\u4F7F\\u7528\\u5B83\\u5305\\u88C5\\u60A8\\u7684\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\uFF0C\\u5E76\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"ref\"}),\" \\u53C2\\u6570\\u5C06 ref \\u8F6C\\u53D1\\u5230\\u6240\\u9700\\u7684\\u5B50\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u793A\\u4F8B\\uFF0C\\u6F14\\u793A\\u5982\\u4F55\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\"\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { forwardRef, useRef } from 'react';\n\n// \\u5B9A\\u4E49\\u4E00\\u4E2A\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\u5E76\\u7528 forwardRef \\u5305\\u88C5\\u5B83\nconst MyInput = forwardRef((props, ref) => <input ref={ref} {...props} />);\n\nconst ParentComponent = () => {\n  const inputRef = useRef(null);\n\n  const focusInput = () => {\n    // \\u8BBF\\u95EE input \\u5143\\u7D20\\u5E76\\u805A\\u7126\\u5B83\n    if (inputRef.current) {\n      inputRef.current.focus();\n    }\n  };\n\n  return (\n    <div>\n      <MyInput ref={inputRef} placeholder=\"Type here...\" />\n      <button onClick={focusInput}>Focus Input</button>\n    </div>\n  );\n};\n\nexport default ParentComponent;\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"MyInput\"}),\" \\u662F\\u4E00\\u4E2A\\u7528 \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" \\u5305\\u88C5\\u7684\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"ref\"}),\" \\u53C2\\u6570\\u88AB\\u8F6C\\u53D1\\u5230 \",(0,n.jsx)(e.code,{children:\"MyInput\"}),\" \\u5185\\u90E8\\u7684 \",(0,n.jsx)(e.code,{children:\"input\"}),\" \\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5728 \",(0,n.jsx)(e.code,{children:\"ParentComponent\"}),\" \\u4E2D\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useRef()\"}),\" \\u521B\\u5EFA\\u4E00\\u4E2A ref (\",(0,n.jsx)(e.code,{children:\"inputRef\"}),\")\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"inputRef\"}),\" \\u88AB\\u4F20\\u9012\\u7ED9 \",(0,n.jsx)(e.code,{children:\"MyInput\"}),\"\\uFF0C\\u5141\\u8BB8\\u7236\\u7EC4\\u4EF6\\u76F4\\u63A5\\u8BBF\\u95EE input \\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5F53\\u5355\\u51FB\\u6309\\u94AE\\u65F6\\uFF0C\",(0,n.jsx)(e.code,{children:\"focusInput\"}),\" \\u51FD\\u6570\\u4F7F\\u7528 ref \\u6765\\u805A\\u7126 input \\u5143\\u7D20\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u91CD\\u8981\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4EC5\\u9650\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\" \\u4E0E\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\u4E00\\u8D77\\u4F7F\\u7528\\u3002\\u7C7B\\u7EC4\\u4EF6\\u53EF\\u4EE5\\u76F4\\u63A5\\u4F7F\\u7528 ref\\uFF0C\\u800C\\u65E0\\u9700 \",(0,n.jsx)(e.code,{children:\"forwardRef()\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Ref \\u8F6C\\u53D1\"}),\"\\uFF1A\\u786E\\u4FDD ref \\u88AB\\u8F6C\\u53D1\\u5230 DOM \\u5143\\u7D20\\u6216\\u7C7B\\u7EC4\\u4EF6\\u5B9E\\u4F8B\\uFF0C\\u800C\\u4E0D\\u662F\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/forwardRef\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"forwardRef()\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useRef\",children:[\"Using the \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" Hook\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/manipulating-the-dom-with-refs\",children:\"Refs and the DOM\"})}),`\n`]})]})}function a(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(f,{...r})}):f(r)}return x(I);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-jsx-and-how-does-it-work/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-jsx-and-how-does-it-work/en-US.json
index 97978fb08..057a9e5e8 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-jsx-and-how-does-it-work/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-jsx-and-how-does-it-work/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-jsx-and-how-does-it-work/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,J=Object.prototype.hasOwnProperty;var S=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var r in e)a(t,r,{get:e[r],enumerable:!0})},l=(t,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!J.call(t,i)&&i!==r&&a(t,i,{get:()=>e[i],enumerable:!(o=p(e,i))||o.enumerable});return t};var v=(t,e,r)=>(r=t!=null?h(m(t)):{},l(e||!t||!t.__esModule?a(r,\"default\",{value:t,enumerable:!0}):r,t)),x=t=>l(a({},\"__esModule\",{value:!0}),t);var c=S((j,s)=>{s.exports=_jsx_runtime});var g={};f(g,{default:()=>w,frontmatter:()=>y});var n=v(c()),y={title:\"What is JSX and how does it work?\"};function d(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:[\"JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. JSX makes it easier to create React components by allowing you to write what looks like HTML directly in your JavaScript code. Under the hood, JSX is transformed into JavaScript function calls, typically using a tool like Babel. For example, \",(0,n.jsx)(e.code,{children:\"<div>Hello, world!</div>\"}),\" in JSX is transformed into \",(0,n.jsx)(e.code,{children:\"React.createElement('div', null, 'Hello, world!')\"}),\".\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is JSX and how does it work?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"What is JSX?\"}),`\n`,(0,n.jsx)(e.p,{children:\"JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. JSX is primarily used with React to describe what the UI should look like.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How does JSX work?\"}),`\n`,(0,n.jsx)(e.p,{children:\"JSX is not valid JavaScript by itself. It needs to be transformed into regular JavaScript before it can be executed by the browser. This transformation is usually done by a tool like Babel.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"JSX syntax\"}),`\n`,(0,n.jsx)(e.p,{children:\"JSX allows you to write HTML-like tags directly in your JavaScript code. For example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const element = <h1>Hello, world!</h1>;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Transformation process\"}),`\n`,(0,n.jsx)(e.p,{children:\"When you write JSX, it is transformed into JavaScript function calls. For example, the JSX code:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const element = <h1>Hello, world!</h1>;\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"is transformed into:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const element = React.createElement('h1', null, 'Hello, world!');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Embedding expressions\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can embed JavaScript expressions inside JSX using curly braces \",(0,n.jsx)(e.code,{children:\"{}\"}),\". For example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const name = 'John';\nconst element = <h1>Hello, {name}!</h1>;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Attributes in JSX\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can use quotes to specify string literals as attributes and curly braces to embed JavaScript expressions. For example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const element = <img src={user.avatarUrl} alt=\"User Avatar\" />;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"JSX is an expression\"}),`\n`,(0,n.jsx)(e.p,{children:\"After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects. This means you can use JSX inside if statements, for loops, and assign it to variables.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"JSX prevents injection attacks\"}),`\n`,(0,n.jsx)(e.p,{children:\"By default, React DOM escapes any values embedded in JSX before rendering them. This ensures that you can never inject anything that's not explicitly written in your application.\"}),`\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://react.dev/learn/writing-markup-with-jsx\",children:\"React JSX documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://babeljs.io/\",children:\"Babel\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/JSX\",children:\"MDN Web Docs on JSX\"})}),`\n`]})]})}function b(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var w=b;return x(g);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var J=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var r in e)a(t,r,{get:e[r],enumerable:!0})},l=(t,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!S.call(t,i)&&i!==r&&a(t,i,{get:()=>e[i],enumerable:!(o=u(e,i))||o.enumerable});return t};var x=(t,e,r)=>(r=t!=null?p(J(t)):{},l(e||!t||!t.__esModule?a(r,\"default\",{value:t,enumerable:!0}):r,t)),y=t=>l(a({},\"__esModule\",{value:!0}),t);var c=f((g,s)=>{s.exports=_jsx_runtime});var X={};v(X,{default:()=>h,frontmatter:()=>w});var n=x(c()),w={title:\"What is JSX and how does it work?\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. JSX makes it easier to create React components by allowing you to write what looks like HTML directly in your JavaScript code. Under the hood, JSX is transformed into JavaScript function calls, typically using a tool like Babel. For example, \",(0,n.jsx)(e.code,{children:\"<div>Hello, world!</div>\"}),\" in JSX is transformed into \",(0,n.jsx)(e.code,{children:\"React.createElement('div', null, 'Hello, world!')\"}),\".\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is JSX and how does it work?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"What is JSX?\"}),`\n`,(0,n.jsx)(e.p,{children:\"JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. JSX is primarily used with React to describe what the UI should look like.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How does JSX work?\"}),`\n`,(0,n.jsx)(e.p,{children:\"JSX is not valid JavaScript by itself. It needs to be transformed into regular JavaScript before it can be executed by the browser. This transformation is usually done by a tool like Babel.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"JSX syntax\"}),`\n`,(0,n.jsx)(e.p,{children:\"JSX allows you to write HTML-like tags directly in your JavaScript code. For example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const element = <h1>Hello, world!</h1>;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Transformation process\"}),`\n`,(0,n.jsx)(e.p,{children:\"When you write JSX, it is transformed into JavaScript function calls. For example, the JSX code:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const element = <h1>Hello, world!</h1>;\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"is transformed into:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const element = React.createElement('h1', null, 'Hello, world!');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Embedding expressions\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can embed JavaScript expressions inside JSX using curly braces \",(0,n.jsx)(e.code,{children:\"{}\"}),\". For example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const name = 'John';\nconst element = <h1>Hello, {name}!</h1>;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Attributes in JSX\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can use quotes to specify string literals as attributes and curly braces to embed JavaScript expressions. For example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const element = <img src={user.avatarUrl} alt=\"User Avatar\" />;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"JSX is an expression\"}),`\n`,(0,n.jsx)(e.p,{children:\"After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects. This means you can use JSX inside if statements, for loops, and assign it to variables.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"JSX prevents injection attacks\"}),`\n`,(0,n.jsx)(e.p,{children:\"By default, React DOM escapes any values embedded in JSX before rendering them. This ensures that you can never inject anything that's not explicitly written in your application.\"}),`\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://react.dev/learn/writing-markup-with-jsx\",children:\"React JSX documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://babeljs.io/\",children:\"Babel\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/JSX\",children:\"MDN Web Docs on JSX\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return y(X);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-jsx-and-how-does-it-work/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-jsx-and-how-does-it-work/zh-CN.json
index 34892977b..5c7b452e6 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-jsx-and-how-does-it-work/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-jsx-and-how-does-it-work/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-jsx-and-how-does-it-work/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),v=(r,e)=>{for(var c in e)a(r,c,{get:e[c],enumerable:!0})},t=(r,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of J(e))!X.call(r,l)&&l!==c&&a(r,l,{get:()=>e[l],enumerable:!(i=p(e,l))||i.enumerable});return r};var u=(r,e,c)=>(c=r!=null?s(S(r)):{},t(e||!r||!r.__esModule?a(c,\"default\",{value:r,enumerable:!0}):c,r)),g=r=>t(a({},\"__esModule\",{value:!0}),r);var d=m((b,h)=>{h.exports=_jsx_runtime});var M={};v(M,{default:()=>f,frontmatter:()=>j});var n=u(d()),j={title:\"\\u4EC0\\u4E48\\u662FJSX\\u4EE5\\u53CA\\u5B83\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"};function o(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JSX \\u4EE3\\u8868 JavaScript XML\\u3002\\u5B83\\u662F JavaScript \\u7684\\u8BED\\u6CD5\\u6269\\u5C55\\uFF0C\\u5141\\u8BB8\\u60A8\\u5728 JavaScript \\u4E2D\\u7F16\\u5199\\u7C7B\\u4F3C HTML \\u7684\\u4EE3\\u7801\\u3002JSX \\u901A\\u8FC7\\u5141\\u8BB8\\u60A8\\u76F4\\u63A5\\u5728 JavaScript \\u4EE3\\u7801\\u4E2D\\u7F16\\u5199\\u7C7B\\u4F3C HTML \\u7684\\u5185\\u5BB9\\uFF0C\\u4ECE\\u800C\\u66F4\\u5BB9\\u6613\\u521B\\u5EFA React \\u7EC4\\u4EF6\\u3002\\u5728\\u5E95\\u5C42\\uFF0CJSX \\u88AB\\u8F6C\\u6362\\u4E3A JavaScript \\u51FD\\u6570\\u8C03\\u7528\\uFF0C\\u901A\\u5E38\\u4F7F\\u7528 Babel \\u7B49\\u5DE5\\u5177\\u3002\\u4F8B\\u5982\\uFF0CJSX \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"<div>Hello, world!</div>\"}),\" \\u88AB\\u8F6C\\u6362\\u4E3A \",(0,n.jsx)(e.code,{children:\"React.createElement('div', null, 'Hello, world!')\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662FJSX\\u4EE5\\u53CA\\u5B83\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EC0\\u4E48\\u662FJSX\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"JSX \\u4EE3\\u8868 JavaScript XML\\u3002\\u5B83\\u662F JavaScript \\u7684\\u8BED\\u6CD5\\u6269\\u5C55\\uFF0C\\u5141\\u8BB8\\u60A8\\u5728 JavaScript \\u4E2D\\u7F16\\u5199\\u7C7B\\u4F3C HTML \\u7684\\u4EE3\\u7801\\u3002JSX \\u4E3B\\u8981\\u4E0E React \\u4E00\\u8D77\\u4F7F\\u7528\\uFF0C\\u7528\\u4E8E\\u63CF\\u8FF0 UI \\u5E94\\u8BE5\\u662F\\u4EC0\\u4E48\\u6837\\u5B50\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"JSX \\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"JSX \\u672C\\u8EAB\\u4E0D\\u662F\\u6709\\u6548\\u7684 JavaScript\\u3002\\u5B83\\u9700\\u8981\\u5148\\u8F6C\\u6362\\u4E3A\\u5E38\\u89C4 JavaScript\\uFF0C\\u7136\\u540E\\u624D\\u80FD\\u7531\\u6D4F\\u89C8\\u5668\\u6267\\u884C\\u3002\\u8FD9\\u79CD\\u8F6C\\u6362\\u901A\\u5E38\\u7531 Babel \\u7B49\\u5DE5\\u5177\\u5B8C\\u6210\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"JSX \\u8BED\\u6CD5\"}),`\n`,(0,n.jsx)(e.p,{children:\"JSX \\u5141\\u8BB8\\u60A8\\u76F4\\u63A5\\u5728 JavaScript \\u4EE3\\u7801\\u4E2D\\u7F16\\u5199\\u7C7B\\u4F3C HTML \\u7684\\u6807\\u7B7E\\u3002\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const element = <h1>Hello, world!</h1>;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8F6C\\u6362\\u8FC7\\u7A0B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5F53\\u60A8\\u7F16\\u5199 JSX \\u65F6\\uFF0C\\u5B83\\u4F1A\\u88AB\\u8F6C\\u6362\\u4E3A JavaScript \\u51FD\\u6570\\u8C03\\u7528\\u3002\\u4F8B\\u5982\\uFF0CJSX \\u4EE3\\u7801\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const element = <h1>Hello, world!</h1>;\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u88AB\\u8F6C\\u6362\\u4E3A\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const element = React.createElement('h1', null, 'Hello, world!');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5D4C\\u5165\\u8868\\u8FBE\\u5F0F\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5927\\u62EC\\u53F7 \",(0,n.jsx)(e.code,{children:\"{}\"}),\" \\u5C06 JavaScript \\u8868\\u8FBE\\u5F0F\\u5D4C\\u5165\\u5230 JSX \\u4E2D\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const name = 'John';\nconst element = <h1>Hello, {name}!</h1>;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"JSX \\u4E2D\\u7684\\u5C5E\\u6027\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5F15\\u53F7\\u6307\\u5B9A\\u5B57\\u7B26\\u4E32\\u5B57\\u9762\\u91CF\\u4F5C\\u4E3A\\u5C5E\\u6027\\uFF0C\\u5E76\\u4F7F\\u7528\\u5927\\u62EC\\u53F7\\u5D4C\\u5165 JavaScript \\u8868\\u8FBE\\u5F0F\\u3002\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const element = <img src={user.avatarUrl} alt=\"User Avatar\" />;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"JSX \\u662F\\u4E00\\u4E2A\\u8868\\u8FBE\\u5F0F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u7F16\\u8BD1\\u540E\\uFF0CJSX \\u8868\\u8FBE\\u5F0F\\u4F1A\\u53D8\\u6210\\u5E38\\u89C4\\u7684 JavaScript \\u51FD\\u6570\\u8C03\\u7528\\uFF0C\\u5E76\\u8BA1\\u7B97\\u4E3A JavaScript \\u5BF9\\u8C61\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u60A8\\u53EF\\u4EE5\\u5728 if \\u8BED\\u53E5\\u3001for \\u5FAA\\u73AF\\u4E2D\\u4F7F\\u7528 JSX\\uFF0C\\u5E76\\u5C06\\u5176\\u5206\\u914D\\u7ED9\\u53D8\\u91CF\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"JSX \\u963B\\u6B62\\u6CE8\\u5165\\u653B\\u51FB\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\uFF0CReact DOM \\u4F1A\\u5728\\u6E32\\u67D3\\u4E4B\\u524D\\u8F6C\\u4E49 JSX \\u4E2D\\u5D4C\\u5165\\u7684\\u4EFB\\u4F55\\u503C\\u3002\\u8FD9\\u786E\\u4FDD\\u4E86\\u60A8\\u6C38\\u8FDC\\u65E0\\u6CD5\\u6CE8\\u5165\\u672A\\u5728\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u660E\\u786E\\u7F16\\u5199\\u7684\\u4EFB\\u4F55\\u5185\\u5BB9\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/writing-markup-with-jsx\",children:\"React JSX documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://babeljs.io/\",children:\"Babel\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/JSX\",children:\"MDN Web Docs on JSX\"})}),`\n`]})]})}function x(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(o,r)})):o(r)}var f=x;return g(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var a=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var v=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),u=(r,e)=>{for(var c in e)a(r,c,{get:e[c],enumerable:!0})},t=(r,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of S(e))!m.call(r,l)&&l!==c&&a(r,l,{get:()=>e[l],enumerable:!(i=J(e,l))||i.enumerable});return r};var g=(r,e,c)=>(c=r!=null?s(X(r)):{},t(e||!r||!r.__esModule?a(c,\"default\",{value:r,enumerable:!0}):c,r)),x=r=>t(a({},\"__esModule\",{value:!0}),r);var d=v((H,h)=>{h.exports=_jsx_runtime});var f={};u(f,{default:()=>p,frontmatter:()=>j});var n=g(d()),j={title:\"\\u4EC0\\u4E48\\u662FJSX\\u4EE5\\u53CA\\u5B83\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"};function o(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JSX \\u4EE3\\u8868 JavaScript XML\\u3002\\u5B83\\u662F JavaScript \\u7684\\u8BED\\u6CD5\\u6269\\u5C55\\uFF0C\\u5141\\u8BB8\\u60A8\\u5728 JavaScript \\u4E2D\\u7F16\\u5199\\u7C7B\\u4F3C HTML \\u7684\\u4EE3\\u7801\\u3002JSX \\u901A\\u8FC7\\u5141\\u8BB8\\u60A8\\u76F4\\u63A5\\u5728 JavaScript \\u4EE3\\u7801\\u4E2D\\u7F16\\u5199\\u7C7B\\u4F3C HTML \\u7684\\u5185\\u5BB9\\uFF0C\\u4ECE\\u800C\\u66F4\\u5BB9\\u6613\\u521B\\u5EFA React \\u7EC4\\u4EF6\\u3002\\u5728\\u5E95\\u5C42\\uFF0CJSX \\u88AB\\u8F6C\\u6362\\u4E3A JavaScript \\u51FD\\u6570\\u8C03\\u7528\\uFF0C\\u901A\\u5E38\\u4F7F\\u7528 Babel \\u7B49\\u5DE5\\u5177\\u3002\\u4F8B\\u5982\\uFF0CJSX \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"<div>Hello, world!</div>\"}),\" \\u88AB\\u8F6C\\u6362\\u4E3A \",(0,n.jsx)(e.code,{children:\"React.createElement('div', null, 'Hello, world!')\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662FJSX\\u4EE5\\u53CA\\u5B83\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EC0\\u4E48\\u662FJSX\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"JSX \\u4EE3\\u8868 JavaScript XML\\u3002\\u5B83\\u662F JavaScript \\u7684\\u8BED\\u6CD5\\u6269\\u5C55\\uFF0C\\u5141\\u8BB8\\u60A8\\u5728 JavaScript \\u4E2D\\u7F16\\u5199\\u7C7B\\u4F3C HTML \\u7684\\u4EE3\\u7801\\u3002JSX \\u4E3B\\u8981\\u4E0E React \\u4E00\\u8D77\\u4F7F\\u7528\\uFF0C\\u7528\\u4E8E\\u63CF\\u8FF0 UI \\u5E94\\u8BE5\\u662F\\u4EC0\\u4E48\\u6837\\u5B50\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"JSX \\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"JSX \\u672C\\u8EAB\\u4E0D\\u662F\\u6709\\u6548\\u7684 JavaScript\\u3002\\u5B83\\u9700\\u8981\\u5148\\u8F6C\\u6362\\u4E3A\\u5E38\\u89C4 JavaScript\\uFF0C\\u7136\\u540E\\u624D\\u80FD\\u7531\\u6D4F\\u89C8\\u5668\\u6267\\u884C\\u3002\\u8FD9\\u79CD\\u8F6C\\u6362\\u901A\\u5E38\\u7531 Babel \\u7B49\\u5DE5\\u5177\\u5B8C\\u6210\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"JSX \\u8BED\\u6CD5\"}),`\n`,(0,n.jsx)(e.p,{children:\"JSX \\u5141\\u8BB8\\u60A8\\u76F4\\u63A5\\u5728 JavaScript \\u4EE3\\u7801\\u4E2D\\u7F16\\u5199\\u7C7B\\u4F3C HTML \\u7684\\u6807\\u7B7E\\u3002\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const element = <h1>Hello, world!</h1>;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8F6C\\u6362\\u8FC7\\u7A0B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5F53\\u60A8\\u7F16\\u5199 JSX \\u65F6\\uFF0C\\u5B83\\u4F1A\\u88AB\\u8F6C\\u6362\\u4E3A JavaScript \\u51FD\\u6570\\u8C03\\u7528\\u3002\\u4F8B\\u5982\\uFF0CJSX \\u4EE3\\u7801\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const element = <h1>Hello, world!</h1>;\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u88AB\\u8F6C\\u6362\\u4E3A\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const element = React.createElement('h1', null, 'Hello, world!');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5D4C\\u5165\\u8868\\u8FBE\\u5F0F\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5927\\u62EC\\u53F7 \",(0,n.jsx)(e.code,{children:\"{}\"}),\" \\u5C06 JavaScript \\u8868\\u8FBE\\u5F0F\\u5D4C\\u5165\\u5230 JSX \\u4E2D\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const name = 'John';\nconst element = <h1>Hello, {name}!</h1>;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"JSX \\u4E2D\\u7684\\u5C5E\\u6027\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5F15\\u53F7\\u6307\\u5B9A\\u5B57\\u7B26\\u4E32\\u5B57\\u9762\\u91CF\\u4F5C\\u4E3A\\u5C5E\\u6027\\uFF0C\\u5E76\\u4F7F\\u7528\\u5927\\u62EC\\u53F7\\u5D4C\\u5165 JavaScript \\u8868\\u8FBE\\u5F0F\\u3002\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const element = <img src={user.avatarUrl} alt=\"User Avatar\" />;\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"JSX \\u662F\\u4E00\\u4E2A\\u8868\\u8FBE\\u5F0F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u7F16\\u8BD1\\u540E\\uFF0CJSX \\u8868\\u8FBE\\u5F0F\\u4F1A\\u53D8\\u6210\\u5E38\\u89C4\\u7684 JavaScript \\u51FD\\u6570\\u8C03\\u7528\\uFF0C\\u5E76\\u8BA1\\u7B97\\u4E3A JavaScript \\u5BF9\\u8C61\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u60A8\\u53EF\\u4EE5\\u5728 if \\u8BED\\u53E5\\u3001for \\u5FAA\\u73AF\\u4E2D\\u4F7F\\u7528 JSX\\uFF0C\\u5E76\\u5C06\\u5176\\u5206\\u914D\\u7ED9\\u53D8\\u91CF\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"JSX \\u963B\\u6B62\\u6CE8\\u5165\\u653B\\u51FB\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\uFF0CReact DOM \\u4F1A\\u5728\\u6E32\\u67D3\\u4E4B\\u524D\\u8F6C\\u4E49 JSX \\u4E2D\\u5D4C\\u5165\\u7684\\u4EFB\\u4F55\\u503C\\u3002\\u8FD9\\u786E\\u4FDD\\u4E86\\u60A8\\u6C38\\u8FDC\\u65E0\\u6CD5\\u6CE8\\u5165\\u672A\\u5728\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u660E\\u786E\\u7F16\\u5199\\u7684\\u4EFB\\u4F55\\u5185\\u5BB9\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/writing-markup-with-jsx\",children:\"React JSX documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://babeljs.io/\",children:\"Babel\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/JSX\",children:\"MDN Web Docs on JSX\"})}),`\n`]})]})}function p(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(o,{...r})}):o(r)}return x(f);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-objectfreeze-for/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-objectfreeze-for/en-US.json
index a0d02c826..74f7bca0e 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-objectfreeze-for/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-objectfreeze-for/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-objectfreeze-for/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),m=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},a=(t,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!f.call(t,r)&&r!==o&&i(t,r,{get:()=>e[r],enumerable:!(c=b(e,r))||c.enumerable});return t};var u=(t,e,o)=>(o=t!=null?h(j(t)):{},a(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),y=t=>a(i({},\"__esModule\",{value:!0}),t);var l=g((T,s)=>{s.exports=_jsx_runtime});var w={};m(w,{default:()=>v,frontmatter:()=>z});var n=u(l()),z={title:\"What is `Object.freeze()` for?\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",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:[(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" is used to make an object immutable. Once an object is frozen, you cannot add, remove, or modify its properties. This is useful for creating constants or ensuring that an object remains unchanged throughout the program.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { name: 'John' };\nObject.freeze(obj);\nobj.name = 'Doe'; // This will not change the name property\n\nconsole.log(obj); // { name: 'John' }\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" for?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" is a method in JavaScript that prevents modification of existing property values and the addition or removal of properties from an object. This method is useful for creating immutable objects, which can help in maintaining the integrity of data and avoiding unintended side effects.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"How to use \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"To use \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\", simply pass the object you want to freeze as an argument to the method. Here is a basic example:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  name: 'John',\n  age: 30,\n};\n\nObject.freeze(obj);\n\nobj.name = 'Doe'; // This will not change the name property\nobj.gender = 'male'; // This will not add a new property\ndelete obj.age; // This will not delete the age property\n\nconsole.log(obj); // Output: { name: \"John\", age: 30 }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Characteristics of a frozen object\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Immutability\"}),\": Once an object is frozen, its properties cannot be changed, added, or removed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Non-extensible\"}),\": A frozen object is also non-extensible, meaning you cannot add new properties to it.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Non-configurable\"}),\": The properties of a frozen object become non-configurable, meaning you cannot change property descriptors.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Use cases for \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"})]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Constants\"}),\": When you want to create a constant object that should not be modified.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Data integrity\"}),\": Ensuring that an object remains unchanged throughout the lifecycle of an application.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Security\"}),\": Preventing accidental or malicious changes to critical objects.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Limitations\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" only makes the object itself immutable. If the object contains nested objects, those nested objects are not frozen and can still be modified.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"To deeply freeze an object, you would need to recursively apply \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" to all nested objects.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const deepFreeze = (obj) => {\n  Object.keys(obj).forEach((key) => {\n    if (typeof obj[key] === 'object' && obj[key] !== null) {\n      deepFreeze(obj[key]);\n    }\n  });\n  return Object.freeze(obj);\n};\n\nconst nestedObj = {\n  name: 'John',\n  details: {\n    age: 30,\n    address: '123 Street',\n  },\n};\n\ndeepFreeze(nestedObj);\n\nnestedObj.details.age = 31; // This will not change the age property\nconsole.log(nestedObj); // Output: { name: \"John\", details: { age: 30, address: \"123 Street\" } }\n`})}),`\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/Web/JavaScript/Reference/Global_Objects/Object/freeze\",children:\"MDN Web Docs on Object.freeze()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/property-descriptors\",children:\"JavaScript.info on property flags and descriptors\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://medium.com/@saranshkataria/deep-freezing-objects-in-javascript-637f3d4d7d7\",children:\"Deep freezing objects in JavaScript\"})}),`\n`]})]})}function O(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var v=O;return y(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var b=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var u=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},a=(t,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of j(e))!m.call(t,r)&&r!==o&&i(t,r,{get:()=>e[r],enumerable:!(c=p(e,r))||c.enumerable});return t};var y=(t,e,o)=>(o=t!=null?b(f(t)):{},a(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),z=t=>a(i({},\"__esModule\",{value:!0}),t);var s=u((x,l)=>{l.exports=_jsx_runtime});var v={};g(v,{default:()=>h,frontmatter:()=>O});var n=y(s()),O={title:\"What is `Object.freeze()` for?\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" is used to make an object immutable. Once an object is frozen, you cannot add, remove, or modify its properties. This is useful for creating constants or ensuring that an object remains unchanged throughout the program.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { name: 'John' };\nObject.freeze(obj);\nobj.name = 'Doe'; // This will not change the name property\n\nconsole.log(obj); // { name: 'John' }\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" for?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" is a method in JavaScript that prevents modification of existing property values and the addition or removal of properties from an object. This method is useful for creating immutable objects, which can help in maintaining the integrity of data and avoiding unintended side effects.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"How to use \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"To use \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\", simply pass the object you want to freeze as an argument to the method. Here is a basic example:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  name: 'John',\n  age: 30,\n};\n\nObject.freeze(obj);\n\nobj.name = 'Doe'; // This will not change the name property\nobj.gender = 'male'; // This will not add a new property\ndelete obj.age; // This will not delete the age property\n\nconsole.log(obj); // Output: { name: \"John\", age: 30 }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Characteristics of a frozen object\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Immutability\"}),\": Once an object is frozen, its properties cannot be changed, added, or removed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Non-extensible\"}),\": A frozen object is also non-extensible, meaning you cannot add new properties to it.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Non-configurable\"}),\": The properties of a frozen object become non-configurable, meaning you cannot change property descriptors.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Use cases for \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"})]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Constants\"}),\": When you want to create a constant object that should not be modified.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Data integrity\"}),\": Ensuring that an object remains unchanged throughout the lifecycle of an application.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Security\"}),\": Preventing accidental or malicious changes to critical objects.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Limitations\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" only makes the object itself immutable. If the object contains nested objects, those nested objects are not frozen and can still be modified.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"To deeply freeze an object, you would need to recursively apply \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" to all nested objects.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const deepFreeze = (obj) => {\n  Object.keys(obj).forEach((key) => {\n    if (typeof obj[key] === 'object' && obj[key] !== null) {\n      deepFreeze(obj[key]);\n    }\n  });\n  return Object.freeze(obj);\n};\n\nconst nestedObj = {\n  name: 'John',\n  details: {\n    age: 30,\n    address: '123 Street',\n  },\n};\n\ndeepFreeze(nestedObj);\n\nnestedObj.details.age = 31; // This will not change the age property\nconsole.log(nestedObj); // Output: { name: \"John\", details: { age: 30, address: \"123 Street\" } }\n`})}),`\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/Web/JavaScript/Reference/Global_Objects/Object/freeze\",children:\"MDN Web Docs on Object.freeze()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/property-descriptors\",children:\"JavaScript.info on property flags and descriptors\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://medium.com/@saranshkataria/deep-freezing-objects-in-javascript-637f3d4d7d7\",children:\"Deep freezing objects in JavaScript\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return z(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-objectfreeze-for/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-objectfreeze-for/zh-CN.json
index 05901e66a..39192b360 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-objectfreeze-for/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-objectfreeze-for/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-objectfreeze-for/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),m=(r,e)=>{for(var c in e)l(r,c,{get:e[c],enumerable:!0})},i=(r,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of p(e))!g.call(r,t)&&t!==c&&l(r,t,{get:()=>e[t],enumerable:!(o=j(e,t))||o.enumerable});return r};var u=(r,e,c)=>(c=r!=null?s(b(r)):{},i(e||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),O=r=>i(l({},\"__esModule\",{value:!0}),r);var h=f((D,d)=>{d.exports=_jsx_runtime});var J={};m(J,{default:()=>v,frontmatter:()=>z});var n=u(h()),z={title:\"\\u4EC0\\u4E48\\u662F `Object.freeze()`\\uFF1F\"};function a(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u7528\\u4E8E\\u4F7F\\u5BF9\\u8C61\\u4E0D\\u53EF\\u53D8\\u3002\\u4E00\\u65E6\\u5BF9\\u8C61\\u88AB\\u51BB\\u7ED3\\uFF0C\\u60A8\\u5C31\\u4E0D\\u80FD\\u6DFB\\u52A0\\u3001\\u5220\\u9664\\u6216\\u4FEE\\u6539\\u5176\\u5C5E\\u6027\\u3002\\u8FD9\\u5BF9\\u4E8E\\u521B\\u5EFA\\u5E38\\u91CF\\u6216\\u786E\\u4FDD\\u5BF9\\u8C61\\u5728\\u6574\\u4E2A\\u7A0B\\u5E8F\\u4E2D\\u4FDD\\u6301\\u4E0D\\u53D8\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { name: 'John' };\nObject.freeze(obj);\nobj.name = 'Doe'; // This will not change the name property\n\nconsole.log(obj); // { name: 'John' }\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4EC0\\u4E48\\u662F \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u79CD\\u65B9\\u6CD5\\uFF0C\\u5B83\\u963B\\u6B62\\u4FEE\\u6539\\u73B0\\u6709\\u5C5E\\u6027\\u503C\\u4EE5\\u53CA\\u5411\\u5BF9\\u8C61\\u6DFB\\u52A0\\u6216\\u5220\\u9664\\u5C5E\\u6027\\u3002\\u6B64\\u65B9\\u6CD5\\u5BF9\\u4E8E\\u521B\\u5EFA\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u975E\\u5E38\\u6709\\u7528\\uFF0C\\u8FD9\\u6709\\u52A9\\u4E8E\\u7EF4\\u62A4\\u6570\\u636E\\u7684\\u5B8C\\u6574\\u6027\\u5E76\\u907F\\u514D\\u610F\\u5916\\u7684\\u526F\\u4F5C\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u5982\\u4F55\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\"\\uFF0C\\u53EA\\u9700\\u5C06\\u8981\\u51BB\\u7ED3\\u7684\\u5BF9\\u8C61\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u8BE5\\u65B9\\u6CD5\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u57FA\\u672C\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  name: 'John',\n  age: 30,\n};\n\nObject.freeze(obj);\n\nobj.name = 'Doe'; // This will not change the name property\nobj.gender = 'male'; // This will not add a new property\ndelete obj.age; // This will not delete the age property\n\nconsole.log(obj); // Output: { name: \"John\", age: 30 }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u51BB\\u7ED3\\u5BF9\\u8C61\\u7684\\u7279\\u5F81\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u53EF\\u53D8\\u6027\"}),\"\\uFF1A\\u4E00\\u65E6\\u5BF9\\u8C61\\u88AB\\u51BB\\u7ED3\\uFF0C\\u5176\\u5C5E\\u6027\\u5C31\\u4E0D\\u80FD\\u88AB\\u66F4\\u6539\\u3001\\u6DFB\\u52A0\\u6216\\u5220\\u9664\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u53EF\\u6269\\u5C55\\u6027\"}),\"\\uFF1A\\u51BB\\u7ED3\\u5BF9\\u8C61\\u4E5F\\u662F\\u4E0D\\u53EF\\u6269\\u5C55\\u7684\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u60A8\\u4E0D\\u80FD\\u5411\\u5176\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u53EF\\u914D\\u7F6E\\u6027\"}),\"\\uFF1A\\u51BB\\u7ED3\\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u53D8\\u4E3A\\u4E0D\\u53EF\\u914D\\u7F6E\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u60A8\\u4E0D\\u80FD\\u66F4\\u6539\\u5C5E\\u6027\\u63CF\\u8FF0\\u7B26\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u7684\\u7528\\u4F8B\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5E38\\u91CF\"}),\"\\uFF1A\\u5F53\\u60A8\\u60F3\\u8981\\u521B\\u5EFA\\u4E00\\u4E2A\\u4E0D\\u5E94\\u88AB\\u4FEE\\u6539\\u7684\\u5E38\\u91CF\\u5BF9\\u8C61\\u65F6\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6570\\u636E\\u5B8C\\u6574\\u6027\"}),\"\\uFF1A\\u786E\\u4FDD\\u5BF9\\u8C61\\u5728\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u6574\\u4E2A\\u751F\\u547D\\u5468\\u671F\\u4E2D\\u4FDD\\u6301\\u4E0D\\u53D8\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5B89\\u5168\\u6027\"}),\"\\uFF1A\\u9632\\u6B62\\u5BF9\\u5173\\u952E\\u5BF9\\u8C61\\u7684\\u610F\\u5916\\u6216\\u6076\\u610F\\u66F4\\u6539\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5C40\\u9650\\u6027\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u4EC5\\u4F7F\\u5BF9\\u8C61\\u672C\\u8EAB\\u4E0D\\u53EF\\u53D8\\u3002\\u5982\\u679C\\u5BF9\\u8C61\\u5305\\u542B\\u5D4C\\u5957\\u5BF9\\u8C61\\uFF0C\\u5219\\u8FD9\\u4E9B\\u5D4C\\u5957\\u5BF9\\u8C61\\u4E0D\\u4F1A\\u88AB\\u51BB\\u7ED3\\uFF0C\\u5E76\\u4E14\\u4ECD\\u7136\\u53EF\\u4EE5\\u88AB\\u4FEE\\u6539\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u8981\\u6DF1\\u5EA6\\u51BB\\u7ED3\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u60A8\\u9700\\u8981\\u9012\\u5F52\\u5730\\u5C06 \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u5E94\\u7528\\u4E8E\\u6240\\u6709\\u5D4C\\u5957\\u5BF9\\u8C61\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const deepFreeze = (obj) => {\n  Object.keys(obj).forEach((key) => {\n    if (typeof obj[key] === 'object' && obj[key] !== null) {\n      deepFreeze(obj[key]);\n    }\n  });\n  return Object.freeze(obj);\n};\n\nconst nestedObj = {\n  name: 'John',\n  details: {\n    age: 30,\n    address: '123 Street',\n  },\n};\n\ndeepFreeze(nestedObj);\n\nnestedObj.details.age = 31; // This will not change the age property\nconsole.log(nestedObj); // Output: { name: \"John\", details: { age: 30, address: \"123 Street\" } }\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Object/freeze\",children:\"MDN Web Docs on Object.freeze()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/property-descriptors\",children:\"JavaScript.info on property flags and descriptors\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://medium.com/@saranshkataria/deep-freezing-objects-in-javascript-637f3d4d7d7\",children:\"Deep freezing objects in JavaScript\"})}),`\n`]})]})}function y(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(a,r)})):a(r)}var v=y;return O(J);})();\n;return Component;"
+  "solution": "var Component=(()=>{var j=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),u=(r,e)=>{for(var c in e)l(r,c,{get:e[c],enumerable:!0})},i=(r,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of b(e))!f.call(r,t)&&t!==c&&l(r,t,{get:()=>e[t],enumerable:!(o=p(e,t))||o.enumerable});return r};var O=(r,e,c)=>(c=r!=null?j(g(r)):{},i(e||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),z=r=>i(l({},\"__esModule\",{value:!0}),r);var h=m((x,d)=>{d.exports=_jsx_runtime});var v={};u(v,{default:()=>s,frontmatter:()=>y});var n=O(h()),y={title:\"\\u4EC0\\u4E48\\u662F `Object.freeze()`\\uFF1F\"};function a(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u7528\\u4E8E\\u4F7F\\u5BF9\\u8C61\\u4E0D\\u53EF\\u53D8\\u3002\\u4E00\\u65E6\\u5BF9\\u8C61\\u88AB\\u51BB\\u7ED3\\uFF0C\\u60A8\\u5C31\\u4E0D\\u80FD\\u6DFB\\u52A0\\u3001\\u5220\\u9664\\u6216\\u4FEE\\u6539\\u5176\\u5C5E\\u6027\\u3002\\u8FD9\\u5BF9\\u4E8E\\u521B\\u5EFA\\u5E38\\u91CF\\u6216\\u786E\\u4FDD\\u5BF9\\u8C61\\u5728\\u6574\\u4E2A\\u7A0B\\u5E8F\\u4E2D\\u4FDD\\u6301\\u4E0D\\u53D8\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { name: 'John' };\nObject.freeze(obj);\nobj.name = 'Doe'; // This will not change the name property\n\nconsole.log(obj); // { name: 'John' }\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4EC0\\u4E48\\u662F \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u79CD\\u65B9\\u6CD5\\uFF0C\\u5B83\\u963B\\u6B62\\u4FEE\\u6539\\u73B0\\u6709\\u5C5E\\u6027\\u503C\\u4EE5\\u53CA\\u5411\\u5BF9\\u8C61\\u6DFB\\u52A0\\u6216\\u5220\\u9664\\u5C5E\\u6027\\u3002\\u6B64\\u65B9\\u6CD5\\u5BF9\\u4E8E\\u521B\\u5EFA\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u975E\\u5E38\\u6709\\u7528\\uFF0C\\u8FD9\\u6709\\u52A9\\u4E8E\\u7EF4\\u62A4\\u6570\\u636E\\u7684\\u5B8C\\u6574\\u6027\\u5E76\\u907F\\u514D\\u610F\\u5916\\u7684\\u526F\\u4F5C\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u5982\\u4F55\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\"\\uFF0C\\u53EA\\u9700\\u5C06\\u8981\\u51BB\\u7ED3\\u7684\\u5BF9\\u8C61\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u8BE5\\u65B9\\u6CD5\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u57FA\\u672C\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  name: 'John',\n  age: 30,\n};\n\nObject.freeze(obj);\n\nobj.name = 'Doe'; // This will not change the name property\nobj.gender = 'male'; // This will not add a new property\ndelete obj.age; // This will not delete the age property\n\nconsole.log(obj); // Output: { name: \"John\", age: 30 }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u51BB\\u7ED3\\u5BF9\\u8C61\\u7684\\u7279\\u5F81\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u53EF\\u53D8\\u6027\"}),\"\\uFF1A\\u4E00\\u65E6\\u5BF9\\u8C61\\u88AB\\u51BB\\u7ED3\\uFF0C\\u5176\\u5C5E\\u6027\\u5C31\\u4E0D\\u80FD\\u88AB\\u66F4\\u6539\\u3001\\u6DFB\\u52A0\\u6216\\u5220\\u9664\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u53EF\\u6269\\u5C55\\u6027\"}),\"\\uFF1A\\u51BB\\u7ED3\\u5BF9\\u8C61\\u4E5F\\u662F\\u4E0D\\u53EF\\u6269\\u5C55\\u7684\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u60A8\\u4E0D\\u80FD\\u5411\\u5176\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u53EF\\u914D\\u7F6E\\u6027\"}),\"\\uFF1A\\u51BB\\u7ED3\\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u53D8\\u4E3A\\u4E0D\\u53EF\\u914D\\u7F6E\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u60A8\\u4E0D\\u80FD\\u66F4\\u6539\\u5C5E\\u6027\\u63CF\\u8FF0\\u7B26\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u7684\\u7528\\u4F8B\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5E38\\u91CF\"}),\"\\uFF1A\\u5F53\\u60A8\\u60F3\\u8981\\u521B\\u5EFA\\u4E00\\u4E2A\\u4E0D\\u5E94\\u88AB\\u4FEE\\u6539\\u7684\\u5E38\\u91CF\\u5BF9\\u8C61\\u65F6\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6570\\u636E\\u5B8C\\u6574\\u6027\"}),\"\\uFF1A\\u786E\\u4FDD\\u5BF9\\u8C61\\u5728\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u6574\\u4E2A\\u751F\\u547D\\u5468\\u671F\\u4E2D\\u4FDD\\u6301\\u4E0D\\u53D8\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5B89\\u5168\\u6027\"}),\"\\uFF1A\\u9632\\u6B62\\u5BF9\\u5173\\u952E\\u5BF9\\u8C61\\u7684\\u610F\\u5916\\u6216\\u6076\\u610F\\u66F4\\u6539\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5C40\\u9650\\u6027\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u4EC5\\u4F7F\\u5BF9\\u8C61\\u672C\\u8EAB\\u4E0D\\u53EF\\u53D8\\u3002\\u5982\\u679C\\u5BF9\\u8C61\\u5305\\u542B\\u5D4C\\u5957\\u5BF9\\u8C61\\uFF0C\\u5219\\u8FD9\\u4E9B\\u5D4C\\u5957\\u5BF9\\u8C61\\u4E0D\\u4F1A\\u88AB\\u51BB\\u7ED3\\uFF0C\\u5E76\\u4E14\\u4ECD\\u7136\\u53EF\\u4EE5\\u88AB\\u4FEE\\u6539\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u8981\\u6DF1\\u5EA6\\u51BB\\u7ED3\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u60A8\\u9700\\u8981\\u9012\\u5F52\\u5730\\u5C06 \",(0,n.jsx)(e.code,{children:\"Object.freeze()\"}),\" \\u5E94\\u7528\\u4E8E\\u6240\\u6709\\u5D4C\\u5957\\u5BF9\\u8C61\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const deepFreeze = (obj) => {\n  Object.keys(obj).forEach((key) => {\n    if (typeof obj[key] === 'object' && obj[key] !== null) {\n      deepFreeze(obj[key]);\n    }\n  });\n  return Object.freeze(obj);\n};\n\nconst nestedObj = {\n  name: 'John',\n  details: {\n    age: 30,\n    address: '123 Street',\n  },\n};\n\ndeepFreeze(nestedObj);\n\nnestedObj.details.age = 31; // This will not change the age property\nconsole.log(nestedObj); // Output: { name: \"John\", details: { age: 30, address: \"123 Street\" } }\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Object/freeze\",children:\"MDN Web Docs on Object.freeze()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/property-descriptors\",children:\"JavaScript.info on property flags and descriptors\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://medium.com/@saranshkataria/deep-freezing-objects-in-javascript-637f3d4d7d7\",children:\"Deep freezing objects in JavaScript\"})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(a,{...r})}):a(r)}return z(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-objectpreventextensions-for/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-objectpreventextensions-for/en-US.json
index a288df543..ded59dc72 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-objectpreventextensions-for/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-objectpreventextensions-for/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-objectpreventextensions-for/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),m=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},c=(t,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!u.call(t,o)&&o!==i&&r(t,o,{get:()=>e[o],enumerable:!(s=b(e,o))||s.enumerable});return t};var x=(t,e,i)=>(i=t!=null?h(j(t)):{},c(e||!t||!t.__esModule?r(i,\"default\",{value:t,enumerable:!0}):i,t)),f=t=>c(r({},\"__esModule\",{value:!0}),t);var l=g((S,a)=>{a.exports=_jsx_runtime});var E={};m(E,{default:()=>O,frontmatter:()=>v});var n=x(l()),v={title:\"What is `Object.preventExtensions()` for?\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",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:[(0,n.jsx)(e.code,{children:\"Object.preventExtensions()\"}),\" is a method in JavaScript that prevents new properties from being added to an object. However, it does not affect the deletion or modification of existing properties. This method is useful when you want to ensure that an object remains in a certain shape and no additional properties can be added to it.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { name: 'John' };\nObject.preventExtensions(obj);\n\nobj.age = 30; // This will not work, as the object is not extensible\nconsole.log(obj.age); // undefined\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is \",(0,n.jsx)(e.code,{children:\"Object.preventExtensions()\"}),\" for?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.preventExtensions()\"}),\" is a method in JavaScript that is used to prevent new properties from being added to an object. This method is part of the ECMAScript 5 specification and is useful for maintaining the integrity of an object by ensuring that its structure cannot be altered by adding new properties.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`Object.preventExtensions(obj);\n`})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"obj\"}),\": The object which should be made non-extensible.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Behavior\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Once an object is made non-extensible, you cannot add new properties to it.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Existing properties can still be modified or deleted.\"}),`\n`,(0,n.jsx)(e.li,{children:\"The method returns the object that was passed to it.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { name: 'John' };\nObject.preventExtensions(obj);\n\nobj.age = 30; // This will not work, as the object is not extensible\nconsole.log(obj.age); // undefined\n\nobj.name = 'Jane'; // This will work, as existing properties can be modified\nconsole.log(obj.name); // 'Jane'\n\ndelete obj.name; // This will work, as existing properties can be deleted\nconsole.log(obj.name); // undefined\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Checking if an object is extensible\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can check if an object is extensible using the \",(0,n.jsx)(e.code,{children:\"Object.isExtensible()\"}),\" method.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { name: 'John' };\nconsole.log(Object.isExtensible(obj)); // true\n\nObject.preventExtensions(obj);\nconsole.log(Object.isExtensible(obj)); // false\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Immutable object structure\"}),\": When you want to ensure that the structure of an object remains unchanged, you can use \",(0,n.jsx)(e.code,{children:\"Object.preventExtensions()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Security\"}),\": Preventing extensions can be useful in scenarios where you want to avoid accidental or malicious addition of properties to an object.\"]}),`\n`]}),`\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/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions\",children:\"MDN Web Docs: Object.preventExtensions()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isExtensible\",children:\"MDN Web Docs: Object.isExtensible()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.ecma-international.org/ecma-262/5.1/#sec-15.2.3.10\",children:\"ECMAScript 5 Specification\"})}),`\n`]})]})}function w(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var O=w;return f(E);})();\n;return Component;"
+  "solution": "var Component=(()=>{var b=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},c=(t,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of j(e))!m.call(t,o)&&o!==i&&r(t,o,{get:()=>e[o],enumerable:!(s=p(e,o))||s.enumerable});return t};var f=(t,e,i)=>(i=t!=null?b(u(t)):{},c(e||!t||!t.__esModule?r(i,\"default\",{value:t,enumerable:!0}):i,t)),v=t=>c(r({},\"__esModule\",{value:!0}),t);var l=g((y,a)=>{a.exports=_jsx_runtime});var E={};x(E,{default:()=>h,frontmatter:()=>w});var n=f(l()),w={title:\"What is `Object.preventExtensions()` for?\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.preventExtensions()\"}),\" is a method in JavaScript that prevents new properties from being added to an object. However, it does not affect the deletion or modification of existing properties. This method is useful when you want to ensure that an object remains in a certain shape and no additional properties can be added to it.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { name: 'John' };\nObject.preventExtensions(obj);\n\nobj.age = 30; // This will not work, as the object is not extensible\nconsole.log(obj.age); // undefined\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is \",(0,n.jsx)(e.code,{children:\"Object.preventExtensions()\"}),\" for?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.preventExtensions()\"}),\" is a method in JavaScript that is used to prevent new properties from being added to an object. This method is part of the ECMAScript 5 specification and is useful for maintaining the integrity of an object by ensuring that its structure cannot be altered by adding new properties.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`Object.preventExtensions(obj);\n`})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"obj\"}),\": The object which should be made non-extensible.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Behavior\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Once an object is made non-extensible, you cannot add new properties to it.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Existing properties can still be modified or deleted.\"}),`\n`,(0,n.jsx)(e.li,{children:\"The method returns the object that was passed to it.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { name: 'John' };\nObject.preventExtensions(obj);\n\nobj.age = 30; // This will not work, as the object is not extensible\nconsole.log(obj.age); // undefined\n\nobj.name = 'Jane'; // This will work, as existing properties can be modified\nconsole.log(obj.name); // 'Jane'\n\ndelete obj.name; // This will work, as existing properties can be deleted\nconsole.log(obj.name); // undefined\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Checking if an object is extensible\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can check if an object is extensible using the \",(0,n.jsx)(e.code,{children:\"Object.isExtensible()\"}),\" method.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { name: 'John' };\nconsole.log(Object.isExtensible(obj)); // true\n\nObject.preventExtensions(obj);\nconsole.log(Object.isExtensible(obj)); // false\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Immutable object structure\"}),\": When you want to ensure that the structure of an object remains unchanged, you can use \",(0,n.jsx)(e.code,{children:\"Object.preventExtensions()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Security\"}),\": Preventing extensions can be useful in scenarios where you want to avoid accidental or malicious addition of properties to an object.\"]}),`\n`]}),`\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/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions\",children:\"MDN Web Docs: Object.preventExtensions()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isExtensible\",children:\"MDN Web Docs: Object.isExtensible()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.ecma-international.org/ecma-262/5.1/#sec-15.2.3.10\",children:\"ECMAScript 5 Specification\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return v(E);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-objectpreventextensions-for/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-objectpreventextensions-for/zh-CN.json
index caf5270a1..eefe661db 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-objectpreventextensions-for/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-objectpreventextensions-for/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-objectpreventextensions-for/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var t=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),m=(c,e)=>{for(var l in e)t(c,l,{get:e[l],enumerable:!0})},o=(c,e,l,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of j(e))!g.call(c,r)&&r!==l&&t(c,r,{get:()=>e[r],enumerable:!(i=b(e,r))||i.enumerable});return c};var u=(c,e,l)=>(l=c!=null?a(p(c)):{},o(e||!c||!c.__esModule?t(l,\"default\",{value:c,enumerable:!0}):l,c)),v=c=>o(t({},\"__esModule\",{value:!0}),c);var h=x((N,s)=>{s.exports=_jsx_runtime});var J={};m(J,{default:()=>f,frontmatter:()=>O});var n=u(h()),O={title:\"\\u4EC0\\u4E48\\u662F `Object.preventExtensions()`\\uFF1F\"};function d(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.preventExtensions()\"}),\" \\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u4E2A\\u65B9\\u6CD5\\uFF0C\\u7528\\u4E8E\\u963B\\u6B62\\u5411\\u5BF9\\u8C61\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\u3002\\u4F46\\u662F\\uFF0C\\u5B83\\u4E0D\\u4F1A\\u5F71\\u54CD\\u73B0\\u6709\\u5C5E\\u6027\\u7684\\u5220\\u9664\\u6216\\u4FEE\\u6539\\u3002\\u5F53\\u60A8\\u5E0C\\u671B\\u786E\\u4FDD\\u5BF9\\u8C61\\u4FDD\\u6301\\u7279\\u5B9A\\u5F62\\u72B6\\u5E76\\u4E14\\u4E0D\\u80FD\\u5411\\u5176\\u6DFB\\u52A0\\u5176\\u4ED6\\u5C5E\\u6027\\u65F6\\uFF0C\\u6B64\\u65B9\\u6CD5\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { name: 'John' };\nObject.preventExtensions(obj);\n\nobj.age = 30; // \\u8FD9\\u5C06\\u4E0D\\u8D77\\u4F5C\\u7528\\uFF0C\\u56E0\\u4E3A\\u8BE5\\u5BF9\\u8C61\\u4E0D\\u53EF\\u6269\\u5C55\nconsole.log(obj.age); // undefined\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4EC0\\u4E48\\u662F \",(0,n.jsx)(e.code,{children:\"Object.preventExtensions()\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.preventExtensions()\"}),\" \\u662F JavaScript \\u4E2D\\u7528\\u4E8E\\u963B\\u6B62\\u5411\\u5BF9\\u8C61\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\u7684\\u65B9\\u6CD5\\u3002\\u6B64\\u65B9\\u6CD5\\u662F ECMAScript 5 \\u89C4\\u8303\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u901A\\u8FC7\\u786E\\u4FDD\\u5176\\u7ED3\\u6784\\u4E0D\\u80FD\\u901A\\u8FC7\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\u6765\\u66F4\\u6539\\uFF0C\\u4ECE\\u800C\\u6709\\u52A9\\u4E8E\\u7EF4\\u62A4\\u5BF9\\u8C61\\u7684\\u5B8C\\u6574\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`Object.preventExtensions(obj);\n`})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"obj\"}),\"\\uFF1A\\u5E94\\u8BE5\\u8BBE\\u7F6E\\u4E3A\\u4E0D\\u53EF\\u6269\\u5C55\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u884C\\u4E3A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u4E00\\u65E6\\u5BF9\\u8C61\\u8BBE\\u7F6E\\u4E3A\\u4E0D\\u53EF\\u6269\\u5C55\\uFF0C\\u60A8\\u5C31\\u65E0\\u6CD5\\u5411\\u5176\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u73B0\\u6709\\u5C5E\\u6027\\u4ECD\\u7136\\u53EF\\u4EE5\\u88AB\\u4FEE\\u6539\\u6216\\u5220\\u9664\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u8BE5\\u65B9\\u6CD5\\u8FD4\\u56DE\\u4F20\\u9012\\u7ED9\\u5B83\\u7684\\u5BF9\\u8C61\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { name: 'John' };\nObject.preventExtensions(obj);\n\nobj.age = 30; // \\u8FD9\\u5C06\\u4E0D\\u8D77\\u4F5C\\u7528\\uFF0C\\u56E0\\u4E3A\\u8BE5\\u5BF9\\u8C61\\u4E0D\\u53EF\\u6269\\u5C55\nconsole.log(obj.age); // undefined\n\nobj.name = 'Jane'; // \\u8FD9\\u5C06\\u8D77\\u4F5C\\u7528\\uFF0C\\u56E0\\u4E3A\\u73B0\\u6709\\u5C5E\\u6027\\u53EF\\u4EE5\\u88AB\\u4FEE\\u6539\nconsole.log(obj.name); // 'Jane'\n\ndelete obj.name; // \\u8FD9\\u5C06\\u8D77\\u4F5C\\u7528\\uFF0C\\u56E0\\u4E3A\\u73B0\\u6709\\u5C5E\\u6027\\u53EF\\u4EE5\\u88AB\\u5220\\u9664\nconsole.log(obj.name); // undefined\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u68C0\\u67E5\\u5BF9\\u8C61\\u662F\\u5426\\u53EF\\u6269\\u5C55\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.isExtensible()\"}),\" \\u65B9\\u6CD5\\u68C0\\u67E5\\u5BF9\\u8C61\\u662F\\u5426\\u53EF\\u6269\\u5C55\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { name: 'John' };\nconsole.log(Object.isExtensible(obj)); // true\n\nObject.preventExtensions(obj);\nconsole.log(Object.isExtensible(obj)); // false\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u7ED3\\u6784\"}),\"\\uFF1A\\u5F53\\u60A8\\u5E0C\\u671B\\u786E\\u4FDD\\u5BF9\\u8C61\\u7684\\u7ED3\\u6784\\u4FDD\\u6301\\u4E0D\\u53D8\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.preventExtensions()\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5B89\\u5168\\u6027\"}),\"\\uFF1A\\u5728\\u60A8\\u5E0C\\u671B\\u907F\\u514D\\u610F\\u5916\\u6216\\u6076\\u610F\\u5411\\u5BF9\\u8C61\\u6DFB\\u52A0\\u5C5E\\u6027\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u963B\\u6B62\\u6269\\u5C55\\u53EF\\u80FD\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions\",children:\"MDN Web \\u6587\\u6863\\uFF1AObject.preventExtensions()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/isExtensible\",children:\"MDN Web \\u6587\\u6863\\uFF1AObject.isExtensible()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.ecma-international.org/ecma-262/5.1/#sec-15.2.3.10\",children:\"ECMAScript 5 \\u89C4\\u8303\"})}),`\n`]})]})}function E(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(d,c)})):d(c)}var f=E;return v(J);})();\n;return Component;"
+  "solution": "var Component=(()=>{var b=Object.create;var t=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var m=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),u=(c,e)=>{for(var l in e)t(c,l,{get:e[l],enumerable:!0})},o=(c,e,l,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!x.call(c,r)&&r!==l&&t(c,r,{get:()=>e[r],enumerable:!(i=j(e,r))||i.enumerable});return c};var v=(c,e,l)=>(l=c!=null?b(g(c)):{},o(e||!c||!c.__esModule?t(l,\"default\",{value:c,enumerable:!0}):l,c)),E=c=>o(t({},\"__esModule\",{value:!0}),c);var h=m((_,s)=>{s.exports=_jsx_runtime});var f={};u(f,{default:()=>a,frontmatter:()=>O});var n=v(h()),O={title:\"\\u4EC0\\u4E48\\u662F `Object.preventExtensions()`\\uFF1F\"};function d(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.preventExtensions()\"}),\" \\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u4E2A\\u65B9\\u6CD5\\uFF0C\\u7528\\u4E8E\\u963B\\u6B62\\u5411\\u5BF9\\u8C61\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\u3002\\u4F46\\u662F\\uFF0C\\u5B83\\u4E0D\\u4F1A\\u5F71\\u54CD\\u73B0\\u6709\\u5C5E\\u6027\\u7684\\u5220\\u9664\\u6216\\u4FEE\\u6539\\u3002\\u5F53\\u60A8\\u5E0C\\u671B\\u786E\\u4FDD\\u5BF9\\u8C61\\u4FDD\\u6301\\u7279\\u5B9A\\u5F62\\u72B6\\u5E76\\u4E14\\u4E0D\\u80FD\\u5411\\u5176\\u6DFB\\u52A0\\u5176\\u4ED6\\u5C5E\\u6027\\u65F6\\uFF0C\\u6B64\\u65B9\\u6CD5\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { name: 'John' };\nObject.preventExtensions(obj);\n\nobj.age = 30; // \\u8FD9\\u5C06\\u4E0D\\u8D77\\u4F5C\\u7528\\uFF0C\\u56E0\\u4E3A\\u8BE5\\u5BF9\\u8C61\\u4E0D\\u53EF\\u6269\\u5C55\nconsole.log(obj.age); // undefined\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4EC0\\u4E48\\u662F \",(0,n.jsx)(e.code,{children:\"Object.preventExtensions()\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.preventExtensions()\"}),\" \\u662F JavaScript \\u4E2D\\u7528\\u4E8E\\u963B\\u6B62\\u5411\\u5BF9\\u8C61\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\u7684\\u65B9\\u6CD5\\u3002\\u6B64\\u65B9\\u6CD5\\u662F ECMAScript 5 \\u89C4\\u8303\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u901A\\u8FC7\\u786E\\u4FDD\\u5176\\u7ED3\\u6784\\u4E0D\\u80FD\\u901A\\u8FC7\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\u6765\\u66F4\\u6539\\uFF0C\\u4ECE\\u800C\\u6709\\u52A9\\u4E8E\\u7EF4\\u62A4\\u5BF9\\u8C61\\u7684\\u5B8C\\u6574\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`Object.preventExtensions(obj);\n`})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"obj\"}),\"\\uFF1A\\u5E94\\u8BE5\\u8BBE\\u7F6E\\u4E3A\\u4E0D\\u53EF\\u6269\\u5C55\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u884C\\u4E3A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u4E00\\u65E6\\u5BF9\\u8C61\\u8BBE\\u7F6E\\u4E3A\\u4E0D\\u53EF\\u6269\\u5C55\\uFF0C\\u60A8\\u5C31\\u65E0\\u6CD5\\u5411\\u5176\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u73B0\\u6709\\u5C5E\\u6027\\u4ECD\\u7136\\u53EF\\u4EE5\\u88AB\\u4FEE\\u6539\\u6216\\u5220\\u9664\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u8BE5\\u65B9\\u6CD5\\u8FD4\\u56DE\\u4F20\\u9012\\u7ED9\\u5B83\\u7684\\u5BF9\\u8C61\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { name: 'John' };\nObject.preventExtensions(obj);\n\nobj.age = 30; // \\u8FD9\\u5C06\\u4E0D\\u8D77\\u4F5C\\u7528\\uFF0C\\u56E0\\u4E3A\\u8BE5\\u5BF9\\u8C61\\u4E0D\\u53EF\\u6269\\u5C55\nconsole.log(obj.age); // undefined\n\nobj.name = 'Jane'; // \\u8FD9\\u5C06\\u8D77\\u4F5C\\u7528\\uFF0C\\u56E0\\u4E3A\\u73B0\\u6709\\u5C5E\\u6027\\u53EF\\u4EE5\\u88AB\\u4FEE\\u6539\nconsole.log(obj.name); // 'Jane'\n\ndelete obj.name; // \\u8FD9\\u5C06\\u8D77\\u4F5C\\u7528\\uFF0C\\u56E0\\u4E3A\\u73B0\\u6709\\u5C5E\\u6027\\u53EF\\u4EE5\\u88AB\\u5220\\u9664\nconsole.log(obj.name); // undefined\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u68C0\\u67E5\\u5BF9\\u8C61\\u662F\\u5426\\u53EF\\u6269\\u5C55\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.isExtensible()\"}),\" \\u65B9\\u6CD5\\u68C0\\u67E5\\u5BF9\\u8C61\\u662F\\u5426\\u53EF\\u6269\\u5C55\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { name: 'John' };\nconsole.log(Object.isExtensible(obj)); // true\n\nObject.preventExtensions(obj);\nconsole.log(Object.isExtensible(obj)); // false\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\u7ED3\\u6784\"}),\"\\uFF1A\\u5F53\\u60A8\\u5E0C\\u671B\\u786E\\u4FDD\\u5BF9\\u8C61\\u7684\\u7ED3\\u6784\\u4FDD\\u6301\\u4E0D\\u53D8\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.preventExtensions()\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5B89\\u5168\\u6027\"}),\"\\uFF1A\\u5728\\u60A8\\u5E0C\\u671B\\u907F\\u514D\\u610F\\u5916\\u6216\\u6076\\u610F\\u5411\\u5BF9\\u8C61\\u6DFB\\u52A0\\u5C5E\\u6027\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u963B\\u6B62\\u6269\\u5C55\\u53EF\\u80FD\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions\",children:\"MDN Web \\u6587\\u6863\\uFF1AObject.preventExtensions()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/isExtensible\",children:\"MDN Web \\u6587\\u6863\\uFF1AObject.isExtensible()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.ecma-international.org/ecma-262/5.1/#sec-15.2.3.10\",children:\"ECMAScript 5 \\u89C4\\u8303\"})}),`\n`]})]})}function a(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(d,{...c})}):d(c)}return E(f);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-objectseal-for/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-objectseal-for/en-US.json
index 938fd6374..254663ef2 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-objectseal-for/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-objectseal-for/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-objectseal-for/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var u=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),j=(o,e)=>{for(var r in e)i(o,r,{get:e[r],enumerable:!0})},a=(o,e,r,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of g(e))!m.call(o,t)&&t!==r&&i(o,t,{get:()=>e[t],enumerable:!(l=p(e,t))||l.enumerable});return o};var f=(o,e,r)=>(r=o!=null?h(b(o)):{},a(e||!o||!o.__esModule?i(r,\"default\",{value:o,enumerable:!0}):r,o)),w=o=>a(i({},\"__esModule\",{value:!0}),o);var c=u((N,s)=>{s.exports=_jsx_runtime});var O={};j(O,{default:()=>y,frontmatter:()=>x});var n=f(c()),x={title:\"What is `Object.seal()` for?\"};function d(o){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",ol:\"ol\",strong:\"strong\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.seal()\"}),\" is used to prevent new properties from being added to an object and to mark all existing properties as non-configurable. This means you can still modify the values of existing properties, but you cannot delete them or add new ones. Doing so will throw errors in strict mode but fail silently in non-strict mode. In the following examples, you can uncomment the 'use strict' comment to see this.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// 'use strict'\n\nconst obj = { name: 'John' };\nObject.seal(obj);\n\nobj.name = 'Jane'; // Allowed\nobj.age = 30; // Not allowed, throws an error in strict mode\ndelete obj.name; // Not allowed, throws an error in strict mode\n\nconsole.log(obj); // { name: 'Jane } (unchanged)\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is \",(0,n.jsx)(e.code,{children:\"Object.seal()\"}),\" for?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.seal()\"}),\" is a method in JavaScript that seals an object, preventing new properties from being added to it and marking all existing properties as non-configurable. This means that while you can still modify the values of existing properties, you cannot delete them or add new properties.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`Object.seal(obj);\n`})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"obj\"}),\": The object to be sealed.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Behavior\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Preventing new properties\"}),\": Once an object is sealed, you cannot add new properties to it.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Non-configurable properties\"}),\": All existing properties become non-configurable, meaning you cannot delete them or change their property descriptors (e.g., making them non-writable).\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Modifiable values\"}),\": You can still change the values of existing properties as long as they are writable.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// 'use strict'\n\nconst person = {\n  name: 'Alice',\n  age: 25,\n};\n\nObject.seal(person);\n\nperson.name = 'Bob'; // Allowed\nperson.age = 30; // Allowed\n\nperson.gender = 'female'; // Not allowed, throws an error in strict mode\ndelete person.name; // Not allowed, throws an error in strict mode\n\nconsole.log(person); // { name: 'Bob', age: 30 } (unchanged)\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Data integrity\"}),\": Ensuring that an object structure remains unchanged, which can be useful in scenarios where the object represents a fixed schema.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Security\"}),\": Preventing accidental or malicious modifications to an object, especially in shared or global contexts.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Checking if an object is sealed\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can check if an object is sealed using the \",(0,n.jsx)(e.code,{children:\"Object.isSealed()\"}),\" method.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { name: 'John' };\nObject.seal(obj);\n\nconsole.log(Object.isSealed(obj)); // true\n`})}),`\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/Web/JavaScript/Reference/Global_Objects/Object/seal\",children:\"MDN Web Docs on Object.seal()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isSealed\",children:\"MDN Web Docs on Object.isSealed()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/property-descriptors\",children:\"JavaScript.info on property flags and descriptors\"})}),`\n`]})]})}function v(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(d,o)})):d(o)}var y=v;return w(O);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var j=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),f=(o,e)=>{for(var r in e)i(o,r,{get:e[r],enumerable:!0})},a=(o,e,r,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of b(e))!u.call(o,t)&&t!==r&&i(o,t,{get:()=>e[t],enumerable:!(l=g(e,t))||l.enumerable});return o};var w=(o,e,r)=>(r=o!=null?p(m(o)):{},a(e||!o||!o.__esModule?i(r,\"default\",{value:o,enumerable:!0}):r,o)),x=o=>a(i({},\"__esModule\",{value:!0}),o);var c=j((S,s)=>{s.exports=_jsx_runtime});var y={};f(y,{default:()=>h,frontmatter:()=>v});var n=w(c()),v={title:\"What is `Object.seal()` for?\"};function d(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.seal()\"}),\" is used to prevent new properties from being added to an object and to mark all existing properties as non-configurable. This means you can still modify the values of existing properties, but you cannot delete them or add new ones. Doing so will throw errors in strict mode but fail silently in non-strict mode. In the following examples, you can uncomment the 'use strict' comment to see this.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// 'use strict'\n\nconst obj = { name: 'John' };\nObject.seal(obj);\n\nobj.name = 'Jane'; // Allowed\nobj.age = 30; // Not allowed, throws an error in strict mode\ndelete obj.name; // Not allowed, throws an error in strict mode\n\nconsole.log(obj); // { name: 'Jane } (unchanged)\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is \",(0,n.jsx)(e.code,{children:\"Object.seal()\"}),\" for?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.seal()\"}),\" is a method in JavaScript that seals an object, preventing new properties from being added to it and marking all existing properties as non-configurable. This means that while you can still modify the values of existing properties, you cannot delete them or add new properties.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`Object.seal(obj);\n`})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"obj\"}),\": The object to be sealed.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Behavior\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Preventing new properties\"}),\": Once an object is sealed, you cannot add new properties to it.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Non-configurable properties\"}),\": All existing properties become non-configurable, meaning you cannot delete them or change their property descriptors (e.g., making them non-writable).\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Modifiable values\"}),\": You can still change the values of existing properties as long as they are writable.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// 'use strict'\n\nconst person = {\n  name: 'Alice',\n  age: 25,\n};\n\nObject.seal(person);\n\nperson.name = 'Bob'; // Allowed\nperson.age = 30; // Allowed\n\nperson.gender = 'female'; // Not allowed, throws an error in strict mode\ndelete person.name; // Not allowed, throws an error in strict mode\n\nconsole.log(person); // { name: 'Bob', age: 30 } (unchanged)\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Data integrity\"}),\": Ensuring that an object structure remains unchanged, which can be useful in scenarios where the object represents a fixed schema.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Security\"}),\": Preventing accidental or malicious modifications to an object, especially in shared or global contexts.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Checking if an object is sealed\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can check if an object is sealed using the \",(0,n.jsx)(e.code,{children:\"Object.isSealed()\"}),\" method.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { name: 'John' };\nObject.seal(obj);\n\nconsole.log(Object.isSealed(obj)); // true\n`})}),`\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/Web/JavaScript/Reference/Global_Objects/Object/seal\",children:\"MDN Web Docs on Object.seal()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isSealed\",children:\"MDN Web Docs on Object.isSealed()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/property-descriptors\",children:\"JavaScript.info on property flags and descriptors\"})}),`\n`]})]})}function h(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(d,{...o})}):d(o)}return x(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-objectseal-for/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-objectseal-for/zh-CN.json
index 70c1c1600..b0845c86c 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-objectseal-for/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-objectseal-for/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-objectseal-for/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),u=(l,e)=>{for(var r in e)o(l,r,{get:e[r],enumerable:!0})},s=(l,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of b(e))!g.call(l,c)&&c!==r&&o(l,c,{get:()=>e[c],enumerable:!(i=j(e,c))||i.enumerable});return l};var O=(l,e,r)=>(r=l!=null?h(p(l)):{},s(e||!l||!l.__esModule?o(r,\"default\",{value:l,enumerable:!0}):r,l)),f=l=>s(o({},\"__esModule\",{value:!0}),l);var a=m((S,t)=>{t.exports=_jsx_runtime});var J={};u(J,{default:()=>_,frontmatter:()=>v});var n=O(a()),v={title:\"\\u4EC0\\u4E48\\u662F `Object.seal()`\\uFF1F\"};function d(l){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",ol:\"ol\",strong:\"strong\",a:\"a\"},l.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.seal()\"}),\" \\u7528\\u4E8E\\u9632\\u6B62\\u5411\\u5BF9\\u8C61\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\uFF0C\\u5E76\\u5C06\\u6240\\u6709\\u73B0\\u6709\\u5C5E\\u6027\\u6807\\u8BB0\\u4E3A\\u4E0D\\u53EF\\u914D\\u7F6E\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u60A8\\u4ECD\\u7136\\u53EF\\u4EE5\\u4FEE\\u6539\\u73B0\\u6709\\u5C5E\\u6027\\u7684\\u503C\\uFF0C\\u4F46\\u4E0D\\u80FD\\u5220\\u9664\\u5B83\\u4EEC\\u6216\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\u3002\\u8FD9\\u6837\\u505A\\u4F1A\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u629B\\u51FA\\u9519\\u8BEF\\uFF0C\\u4F46\\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u4F1A\\u9759\\u9ED8\\u5931\\u8D25\\u3002\\u5728\\u4EE5\\u4E0B\\u793A\\u4F8B\\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u53D6\\u6D88\\u6CE8\\u91CA 'use strict' \\u6CE8\\u91CA\\u4EE5\\u67E5\\u770B\\u6B64\\u60C5\\u51B5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// 'use strict'\n\nconst obj = { name: 'John' };\nObject.seal(obj);\n\nobj.name = 'Jane'; // \\u5141\\u8BB8\nobj.age = 30; // \\u4E0D\\u5141\\u8BB8\\uFF0C\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u629B\\u51FA\\u9519\\u8BEF\ndelete obj.name; // \\u4E0D\\u5141\\u8BB8\\uFF0C\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u629B\\u51FA\\u9519\\u8BEF\n\nconsole.log(obj); // { name: 'Jane } (\\u672A\\u66F4\\u6539)\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4EC0\\u4E48\\u662F \",(0,n.jsx)(e.code,{children:\"Object.seal()\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.seal()\"}),\" \\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u4E2A\\u65B9\\u6CD5\\uFF0C\\u7528\\u4E8E\\u5BC6\\u5C01\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u9632\\u6B62\\u5411\\u5176\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\uFF0C\\u5E76\\u5C06\\u6240\\u6709\\u73B0\\u6709\\u5C5E\\u6027\\u6807\\u8BB0\\u4E3A\\u4E0D\\u53EF\\u914D\\u7F6E\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u867D\\u7136\\u60A8\\u4ECD\\u7136\\u53EF\\u4EE5\\u4FEE\\u6539\\u73B0\\u6709\\u5C5E\\u6027\\u7684\\u503C\\uFF0C\\u4F46\\u60A8\\u4E0D\\u80FD\\u5220\\u9664\\u5B83\\u4EEC\\u6216\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`Object.seal(obj);\n`})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"obj\"}),\"\\uFF1A\\u8981\\u5BC6\\u5C01\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u884C\\u4E3A\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u9632\\u6B62\\u65B0\\u5C5E\\u6027\"}),\"\\uFF1A\\u4E00\\u65E6\\u5BF9\\u8C61\\u88AB\\u5BC6\\u5C01\\uFF0C\\u60A8\\u5C31\\u4E0D\\u80FD\\u5411\\u5176\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u53EF\\u914D\\u7F6E\\u7684\\u5C5E\\u6027\"}),\"\\uFF1A\\u6240\\u6709\\u73B0\\u6709\\u5C5E\\u6027\\u90FD\\u53D8\\u4E3A\\u4E0D\\u53EF\\u914D\\u7F6E\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u60A8\\u4E0D\\u80FD\\u5220\\u9664\\u5B83\\u4EEC\\u6216\\u66F4\\u6539\\u5B83\\u4EEC\\u7684\\u5C5E\\u6027\\u63CF\\u8FF0\\u7B26\\uFF08\\u4F8B\\u5982\\uFF0C\\u4F7F\\u5B83\\u4EEC\\u4E0D\\u53EF\\u5199\\uFF09\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u53EF\\u4FEE\\u6539\\u7684\\u503C\"}),\"\\uFF1A\\u53EA\\u8981\\u73B0\\u6709\\u5C5E\\u6027\\u662F\\u53EF\\u5199\\u7684\\uFF0C\\u60A8\\u4ECD\\u7136\\u53EF\\u4EE5\\u66F4\\u6539\\u5B83\\u4EEC\\u7684\\u503C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// 'use strict'\n\nconst person = {\n  name: 'Alice',\n  age: 25,\n};\n\nObject.seal(person);\n\nperson.name = 'Bob'; // \\u5141\\u8BB8\nperson.age = 30; // \\u5141\\u8BB8\n\nperson.gender = 'female'; // \\u4E0D\\u5141\\u8BB8\\uFF0C\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u629B\\u51FA\\u9519\\u8BEF\ndelete person.name; // \\u4E0D\\u5141\\u8BB8\\uFF0C\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u629B\\u51FA\\u9519\\u8BEF\n\nconsole.log(person); // { name: 'Bob', age: 30 } (\\u672A\\u66F4\\u6539)\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6570\\u636E\\u5B8C\\u6574\\u6027\"}),\"\\uFF1A\\u786E\\u4FDD\\u5BF9\\u8C61\\u7ED3\\u6784\\u4FDD\\u6301\\u4E0D\\u53D8\\uFF0C\\u8FD9\\u5728\\u5BF9\\u8C61\\u8868\\u793A\\u56FA\\u5B9A\\u6A21\\u5F0F\\u7684\\u60C5\\u51B5\\u4E0B\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5B89\\u5168\\u6027\"}),\"\\uFF1A\\u9632\\u6B62\\u5BF9\\u5BF9\\u8C61\\u7684\\u610F\\u5916\\u6216\\u6076\\u610F\\u4FEE\\u6539\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u5171\\u4EAB\\u6216\\u5168\\u5C40\\u4E0A\\u4E0B\\u6587\\u4E2D\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u68C0\\u67E5\\u5BF9\\u8C61\\u662F\\u5426\\u88AB\\u5BC6\\u5C01\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.isSealed()\"}),\" \\u65B9\\u6CD5\\u68C0\\u67E5\\u5BF9\\u8C61\\u662F\\u5426\\u88AB\\u5BC6\\u5C01\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { name: 'John' };\nObject.seal(obj);\n\nconsole.log(Object.isSealed(obj)); // true\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/seal\",children:\"MDN Web Docs on Object.seal()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/isSealed\",children:\"MDN Web Docs on Object.isSealed()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://zh.javascript.info/property-descriptors\",children:\"JavaScript.info on property flags and descriptors\"})}),`\n`]})]})}function x(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(d,l)})):d(l)}var _=x;return f(J);})();\n;return Component;"
+  "solution": "var Component=(()=>{var j=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var u=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),O=(l,e)=>{for(var r in e)o(l,r,{get:e[r],enumerable:!0})},t=(l,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of b(e))!m.call(l,c)&&c!==r&&o(l,c,{get:()=>e[c],enumerable:!(i=p(e,c))||i.enumerable});return l};var f=(l,e,r)=>(r=l!=null?j(g(l)):{},t(e||!l||!l.__esModule?o(r,\"default\",{value:l,enumerable:!0}):r,l)),v=l=>t(o({},\"__esModule\",{value:!0}),l);var a=u((N,s)=>{s.exports=_jsx_runtime});var _={};O(_,{default:()=>h,frontmatter:()=>x});var n=f(a()),x={title:\"\\u4EC0\\u4E48\\u662F `Object.seal()`\\uFF1F\"};function d(l){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.seal()\"}),\" \\u7528\\u4E8E\\u9632\\u6B62\\u5411\\u5BF9\\u8C61\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\uFF0C\\u5E76\\u5C06\\u6240\\u6709\\u73B0\\u6709\\u5C5E\\u6027\\u6807\\u8BB0\\u4E3A\\u4E0D\\u53EF\\u914D\\u7F6E\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u60A8\\u4ECD\\u7136\\u53EF\\u4EE5\\u4FEE\\u6539\\u73B0\\u6709\\u5C5E\\u6027\\u7684\\u503C\\uFF0C\\u4F46\\u4E0D\\u80FD\\u5220\\u9664\\u5B83\\u4EEC\\u6216\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\u3002\\u8FD9\\u6837\\u505A\\u4F1A\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u629B\\u51FA\\u9519\\u8BEF\\uFF0C\\u4F46\\u5728\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u4F1A\\u9759\\u9ED8\\u5931\\u8D25\\u3002\\u5728\\u4EE5\\u4E0B\\u793A\\u4F8B\\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u53D6\\u6D88\\u6CE8\\u91CA 'use strict' \\u6CE8\\u91CA\\u4EE5\\u67E5\\u770B\\u6B64\\u60C5\\u51B5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// 'use strict'\n\nconst obj = { name: 'John' };\nObject.seal(obj);\n\nobj.name = 'Jane'; // \\u5141\\u8BB8\nobj.age = 30; // \\u4E0D\\u5141\\u8BB8\\uFF0C\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u629B\\u51FA\\u9519\\u8BEF\ndelete obj.name; // \\u4E0D\\u5141\\u8BB8\\uFF0C\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u629B\\u51FA\\u9519\\u8BEF\n\nconsole.log(obj); // { name: 'Jane } (\\u672A\\u66F4\\u6539)\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4EC0\\u4E48\\u662F \",(0,n.jsx)(e.code,{children:\"Object.seal()\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.seal()\"}),\" \\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u4E2A\\u65B9\\u6CD5\\uFF0C\\u7528\\u4E8E\\u5BC6\\u5C01\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u9632\\u6B62\\u5411\\u5176\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\uFF0C\\u5E76\\u5C06\\u6240\\u6709\\u73B0\\u6709\\u5C5E\\u6027\\u6807\\u8BB0\\u4E3A\\u4E0D\\u53EF\\u914D\\u7F6E\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u867D\\u7136\\u60A8\\u4ECD\\u7136\\u53EF\\u4EE5\\u4FEE\\u6539\\u73B0\\u6709\\u5C5E\\u6027\\u7684\\u503C\\uFF0C\\u4F46\\u60A8\\u4E0D\\u80FD\\u5220\\u9664\\u5B83\\u4EEC\\u6216\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`Object.seal(obj);\n`})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"obj\"}),\"\\uFF1A\\u8981\\u5BC6\\u5C01\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u884C\\u4E3A\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u9632\\u6B62\\u65B0\\u5C5E\\u6027\"}),\"\\uFF1A\\u4E00\\u65E6\\u5BF9\\u8C61\\u88AB\\u5BC6\\u5C01\\uFF0C\\u60A8\\u5C31\\u4E0D\\u80FD\\u5411\\u5176\\u6DFB\\u52A0\\u65B0\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u53EF\\u914D\\u7F6E\\u7684\\u5C5E\\u6027\"}),\"\\uFF1A\\u6240\\u6709\\u73B0\\u6709\\u5C5E\\u6027\\u90FD\\u53D8\\u4E3A\\u4E0D\\u53EF\\u914D\\u7F6E\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u60A8\\u4E0D\\u80FD\\u5220\\u9664\\u5B83\\u4EEC\\u6216\\u66F4\\u6539\\u5B83\\u4EEC\\u7684\\u5C5E\\u6027\\u63CF\\u8FF0\\u7B26\\uFF08\\u4F8B\\u5982\\uFF0C\\u4F7F\\u5B83\\u4EEC\\u4E0D\\u53EF\\u5199\\uFF09\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u53EF\\u4FEE\\u6539\\u7684\\u503C\"}),\"\\uFF1A\\u53EA\\u8981\\u73B0\\u6709\\u5C5E\\u6027\\u662F\\u53EF\\u5199\\u7684\\uFF0C\\u60A8\\u4ECD\\u7136\\u53EF\\u4EE5\\u66F4\\u6539\\u5B83\\u4EEC\\u7684\\u503C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// 'use strict'\n\nconst person = {\n  name: 'Alice',\n  age: 25,\n};\n\nObject.seal(person);\n\nperson.name = 'Bob'; // \\u5141\\u8BB8\nperson.age = 30; // \\u5141\\u8BB8\n\nperson.gender = 'female'; // \\u4E0D\\u5141\\u8BB8\\uFF0C\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u629B\\u51FA\\u9519\\u8BEF\ndelete person.name; // \\u4E0D\\u5141\\u8BB8\\uFF0C\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u629B\\u51FA\\u9519\\u8BEF\n\nconsole.log(person); // { name: 'Bob', age: 30 } (\\u672A\\u66F4\\u6539)\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6570\\u636E\\u5B8C\\u6574\\u6027\"}),\"\\uFF1A\\u786E\\u4FDD\\u5BF9\\u8C61\\u7ED3\\u6784\\u4FDD\\u6301\\u4E0D\\u53D8\\uFF0C\\u8FD9\\u5728\\u5BF9\\u8C61\\u8868\\u793A\\u56FA\\u5B9A\\u6A21\\u5F0F\\u7684\\u60C5\\u51B5\\u4E0B\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5B89\\u5168\\u6027\"}),\"\\uFF1A\\u9632\\u6B62\\u5BF9\\u5BF9\\u8C61\\u7684\\u610F\\u5916\\u6216\\u6076\\u610F\\u4FEE\\u6539\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u5171\\u4EAB\\u6216\\u5168\\u5C40\\u4E0A\\u4E0B\\u6587\\u4E2D\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u68C0\\u67E5\\u5BF9\\u8C61\\u662F\\u5426\\u88AB\\u5BC6\\u5C01\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.isSealed()\"}),\" \\u65B9\\u6CD5\\u68C0\\u67E5\\u5BF9\\u8C61\\u662F\\u5426\\u88AB\\u5BC6\\u5C01\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { name: 'John' };\nObject.seal(obj);\n\nconsole.log(Object.isSealed(obj)); // true\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/seal\",children:\"MDN Web Docs on Object.seal()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/isSealed\",children:\"MDN Web Docs on Object.isSealed()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://zh.javascript.info/property-descriptors\",children:\"JavaScript.info on property flags and descriptors\"})}),`\n`]})]})}function h(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(d,{...l})}):d(l)}return v(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-progressive-rendering/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-progressive-rendering/en-US.json
index 403470bf5..a3cfa747e 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-progressive-rendering/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-progressive-rendering/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-is-progressive-rendering/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},a=(t,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!u.call(t,i)&&i!==r&&o(t,i,{get:()=>e[i],enumerable:!(s=p(e,i))||s.enumerable});return t};var w=(t,e,r)=>(r=t!=null?l(g(t)):{},a(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),v=t=>a(o({},\"__esModule\",{value:!0}),t);var h=f((q,d)=>{d.exports=_jsx_runtime});var M={};b(M,{default:()=>j,frontmatter:()=>y});var n=w(h()),y={title:\"What is progressive rendering?\"};function c(t){let e=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Progressive rendering is the name given to techniques used to improve the performance of a webpage (in particular, improve perceived load time) to render content for display as quickly as possible.\"}),`\n`,(0,n.jsx)(e.p,{children:\"It used to be much more prevalent in the days before broadband internet but it is still used in modern development as mobile data connections are becoming increasingly popular (and unreliable)!\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Lazy loading of images\"}),`\n`,(0,n.jsx)(e.p,{children:\"Images on the page are not loaded all at once. The image is only loaded when the user scrolls into/near the part of the page that displays the image.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:'<img loading=\"lazy\">'}),\" is a modern way to instruct the browser to defer loading of images that are outside of the screen until the user scrolls near them.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Use JavaScript to watch the scroll position and load the image when the image is about to come on screen (by comparing the coordinates of the image with the scroll position).\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Prioritizing visible content (or above-the-fold rendering)\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Include only the minimum CSS/content/scripts necessary for the amount of page that would be rendered in the users browser first to display as quickly as possible, you can then use deferred scripts or listen for the \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\"/\",(0,n.jsx)(e.code,{children:\"load\"}),\" event to load in other resources and content.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Async HTML fragments\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Flushing parts of the HTML to the browser as the page is constructed on the back end. More details on the technique can be found \",(0,n.jsx)(e.a,{href:\"http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/\",children:\"here\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Other modern techniques\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.patterns.dev/posts/progressive-hydration/\",children:\"Progressive hydration\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.patterns.dev/posts/server-side-rendering/\",children:\"Streaming server-side rendering\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.patterns.dev/posts/react-selective-hydration/\",children:\"Selective hydration\"})}),`\n`]})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(c,t)})):c(t)}var j=x;return v(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},a=(t,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of g(e))!f.call(t,i)&&i!==r&&o(t,i,{get:()=>e[i],enumerable:!(s=m(e,i))||s.enumerable});return t};var v=(t,e,r)=>(r=t!=null?p(u(t)):{},a(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),y=t=>a(o({},\"__esModule\",{value:!0}),t);var h=w((j,d)=>{d.exports=_jsx_runtime});var M={};b(M,{default:()=>c,frontmatter:()=>x});var n=v(h()),x={title:\"What is progressive rendering?\"};function l(t){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Progressive rendering is the name given to techniques used to improve the performance of a webpage (in particular, improve perceived load time) to render content for display as quickly as possible.\"}),`\n`,(0,n.jsx)(e.p,{children:\"It used to be much more prevalent in the days before broadband internet but it is still used in modern development as mobile data connections are becoming increasingly popular (and unreliable)!\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Lazy loading of images\"}),`\n`,(0,n.jsx)(e.p,{children:\"Images on the page are not loaded all at once. The image is only loaded when the user scrolls into/near the part of the page that displays the image.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:'<img loading=\"lazy\">'}),\" is a modern way to instruct the browser to defer loading of images that are outside of the screen until the user scrolls near them.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Use JavaScript to watch the scroll position and load the image when the image is about to come on screen (by comparing the coordinates of the image with the scroll position).\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Prioritizing visible content (or above-the-fold rendering)\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Include only the minimum CSS/content/scripts necessary for the amount of page that would be rendered in the users browser first to display as quickly as possible, you can then use deferred scripts or listen for the \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\"/\",(0,n.jsx)(e.code,{children:\"load\"}),\" event to load in other resources and content.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Async HTML fragments\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Flushing parts of the HTML to the browser as the page is constructed on the back end. More details on the technique can be found \",(0,n.jsx)(e.a,{href:\"http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/\",children:\"here\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Other modern techniques\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.patterns.dev/posts/progressive-hydration/\",children:\"Progressive hydration\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.patterns.dev/posts/server-side-rendering/\",children:\"Streaming server-side rendering\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.patterns.dev/posts/react-selective-hydration/\",children:\"Selective hydration\"})}),`\n`]})]})}function c(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}return y(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-progressive-rendering/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-is-progressive-rendering/pt-BR.json
index 586a2a62b..af163e853 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-progressive-rendering/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-progressive-rendering/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-is-progressive-rendering/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var v=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),w=(r,e)=>{for(var n in e)i(r,n,{get:e[n],enumerable:!0})},d=(r,e,n,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of h(e))!u.call(r,o)&&o!==n&&i(r,o,{get:()=>e[o],enumerable:!(s=p(e,o))||s.enumerable});return r};var b=(r,e,n)=>(n=r!=null?l(g(r)):{},d(e||!r||!r.__esModule?i(n,\"default\",{value:r,enumerable:!0}):n,r)),x=r=>d(i({},\"__esModule\",{value:!0}),r);var c=v((M,t)=>{t.exports=_jsx_runtime});var y={};w(y,{default:()=>q,frontmatter:()=>f});var a=b(c()),f={title:\"O que \\xE9 a renderiza\\xE7\\xE3o progressiva?\"};function m(r){let e=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",a:\"a\"},r.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.p,{children:\"Renderiza\\xE7\\xE3o progressiva \\xE9 o nome dado \\xE0s t\\xE9cnicas utilizadas para melhorar o desempenho de uma p\\xE1gina da web (em particular, melhorar o tempo percebido de carregamento) para exibir o conte\\xFAdo o mais r\\xE1pido poss\\xEDvel.\"}),`\n`,(0,a.jsx)(e.p,{children:\"Essa pr\\xE1tica costumava ser muito mais comum nos dias anteriores \\xE0 internet banda larga, mas ainda \\xE9 utilizada no desenvolvimento moderno, pois as conex\\xF5es de dados m\\xF3veis est\\xE3o se tornando cada vez mais populares (e inconstantes)!\"}),`\n`,(0,a.jsx)(e.h2,{children:\"Carregamento pregui\\xE7oso (lazy loading) de imagens\"}),`\n`,(0,a.jsx)(e.p,{children:\"As imagens na p\\xE1gina n\\xE3o s\\xE3o carregadas todas de uma vez. A imagem s\\xF3 \\xE9 carregada quando o usu\\xE1rio rola para perto/na parte da p\\xE1gina que exibe a imagem.\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.code,{children:'<img loading=\"lazy\">'}),\" \\xE9 uma maneira moderna de ensinar o navegador a adiar o carregamento de imagens que est\\xE3o fora da tela at\\xE9 que o usu\\xE1rio rola perto delas.\"]}),`\n`,(0,a.jsx)(e.li,{children:\"Use JavaScript para ver a posi\\xE7\\xE3o da rolagem e carregar a imagem quando a imagem estiver prestes a vir na tela (comparando as coordenadas da imagem com a posi\\xE7\\xE3o da rolagem).\"}),`\n`]}),`\n`,(0,a.jsx)(e.h2,{children:\"Priorizar conte\\xFAdo vis\\xEDvel (ou renderiza\\xE7\\xE3o acima)\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"Inclua apenas o m\\xEDnimo de CSS/conte\\xFAdo/scripts necess\\xE1rio para a quantidade de p\\xE1ginas que seriam renderizadas no navegador do usu\\xE1rio primeiro para exibir o mais r\\xE1pido poss\\xEDvel, voc\\xEA pode ent\\xE3o usar scripts adiados ou ouvir o evento \",(0,a.jsx)(e.code,{children:\"DOMContentLoaded\"}),\"/\",(0,a.jsx)(e.code,{children:\"load\"}),\" para carregar em outros recursos e conte\\xFAdo.\"]}),`\n`,(0,a.jsx)(e.h2,{children:\"Fragmentos HTML ass\\xEDncronos\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"Liberando partes do HTML para o navegador, \\xE0 medida que a p\\xE1gina \\xE9 constru\\xEDda no back-end. Mais detalhes sobre a t\\xE9cnica podem ser encontrados \",(0,a.jsx)(e.a,{href:\"http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/\",children:\"here\"}),\".\"]}),`\n`,(0,a.jsx)(e.h2,{children:\"Outras t\\xE9cnicas modernas\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:(0,a.jsx)(e.a,{href:\"https://www.patterns.dev/posts/progressive-hydration/\",children:\"Progressive hydration\"})}),`\n`,(0,a.jsx)(e.li,{children:(0,a.jsx)(e.a,{href:\"https://www.patterns.dev/posts/server-side-rendering/\",children:\"Streaming server-side rendering\"})}),`\n`,(0,a.jsx)(e.li,{children:(0,a.jsx)(e.a,{href:\"https://www.patterns.dev/posts/react-selective-hydration/\",children:\"Hydrata\\xE7\\xE3o seletiva\"})}),`\n`]})]})}function z(r={}){let{wrapper:e}=r.components||{};return e?(0,a.jsx)(e,Object.assign({},r,{children:(0,a.jsx)(m,r)})):m(r)}var q=z;return x(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var w=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),x=(r,e)=>{for(var o in e)i(r,o,{get:e[o],enumerable:!0})},d=(r,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of u(e))!v.call(r,n)&&n!==o&&i(r,n,{get:()=>e[n],enumerable:!(s=h(e,n))||s.enumerable});return r};var b=(r,e,o)=>(o=r!=null?p(g(r)):{},d(e||!r||!r.__esModule?i(o,\"default\",{value:r,enumerable:!0}):o,r)),f=r=>d(i({},\"__esModule\",{value:!0}),r);var c=w((M,t)=>{t.exports=_jsx_runtime});var q={};x(q,{default:()=>l,frontmatter:()=>z});var a=b(c()),z={title:\"O que \\xE9 a renderiza\\xE7\\xE3o progressiva?\"};function m(r){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",ul:\"ul\",...r.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.p,{children:\"Renderiza\\xE7\\xE3o progressiva \\xE9 o nome dado \\xE0s t\\xE9cnicas utilizadas para melhorar o desempenho de uma p\\xE1gina da web (em particular, melhorar o tempo percebido de carregamento) para exibir o conte\\xFAdo o mais r\\xE1pido poss\\xEDvel.\"}),`\n`,(0,a.jsx)(e.p,{children:\"Essa pr\\xE1tica costumava ser muito mais comum nos dias anteriores \\xE0 internet banda larga, mas ainda \\xE9 utilizada no desenvolvimento moderno, pois as conex\\xF5es de dados m\\xF3veis est\\xE3o se tornando cada vez mais populares (e inconstantes)!\"}),`\n`,(0,a.jsx)(e.h2,{children:\"Carregamento pregui\\xE7oso (lazy loading) de imagens\"}),`\n`,(0,a.jsx)(e.p,{children:\"As imagens na p\\xE1gina n\\xE3o s\\xE3o carregadas todas de uma vez. A imagem s\\xF3 \\xE9 carregada quando o usu\\xE1rio rola para perto/na parte da p\\xE1gina que exibe a imagem.\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.code,{children:'<img loading=\"lazy\">'}),\" \\xE9 uma maneira moderna de ensinar o navegador a adiar o carregamento de imagens que est\\xE3o fora da tela at\\xE9 que o usu\\xE1rio rola perto delas.\"]}),`\n`,(0,a.jsx)(e.li,{children:\"Use JavaScript para ver a posi\\xE7\\xE3o da rolagem e carregar a imagem quando a imagem estiver prestes a vir na tela (comparando as coordenadas da imagem com a posi\\xE7\\xE3o da rolagem).\"}),`\n`]}),`\n`,(0,a.jsx)(e.h2,{children:\"Priorizar conte\\xFAdo vis\\xEDvel (ou renderiza\\xE7\\xE3o acima)\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"Inclua apenas o m\\xEDnimo de CSS/conte\\xFAdo/scripts necess\\xE1rio para a quantidade de p\\xE1ginas que seriam renderizadas no navegador do usu\\xE1rio primeiro para exibir o mais r\\xE1pido poss\\xEDvel, voc\\xEA pode ent\\xE3o usar scripts adiados ou ouvir o evento \",(0,a.jsx)(e.code,{children:\"DOMContentLoaded\"}),\"/\",(0,a.jsx)(e.code,{children:\"load\"}),\" para carregar em outros recursos e conte\\xFAdo.\"]}),`\n`,(0,a.jsx)(e.h2,{children:\"Fragmentos HTML ass\\xEDncronos\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"Liberando partes do HTML para o navegador, \\xE0 medida que a p\\xE1gina \\xE9 constru\\xEDda no back-end. Mais detalhes sobre a t\\xE9cnica podem ser encontrados \",(0,a.jsx)(e.a,{href:\"http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/\",children:\"here\"}),\".\"]}),`\n`,(0,a.jsx)(e.h2,{children:\"Outras t\\xE9cnicas modernas\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:(0,a.jsx)(e.a,{href:\"https://www.patterns.dev/posts/progressive-hydration/\",children:\"Progressive hydration\"})}),`\n`,(0,a.jsx)(e.li,{children:(0,a.jsx)(e.a,{href:\"https://www.patterns.dev/posts/server-side-rendering/\",children:\"Streaming server-side rendering\"})}),`\n`,(0,a.jsx)(e.li,{children:(0,a.jsx)(e.a,{href:\"https://www.patterns.dev/posts/react-selective-hydration/\",children:\"Hydrata\\xE7\\xE3o seletiva\"})}),`\n`]})]})}function l(r={}){let{wrapper:e}=r.components||{};return e?(0,a.jsx)(e,{...r,children:(0,a.jsx)(m,{...r})}):m(r)}return f(q);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-progressive-rendering/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-progressive-rendering/zh-CN.json
index 8395327cc..a9c17cda2 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-progressive-rendering/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-progressive-rendering/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-is-progressive-rendering/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var u=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var t in e)c(r,t,{get:e[t],enumerable:!0})},h=(r,e,t,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!g.call(r,i)&&i!==t&&c(r,i,{get:()=>e[i],enumerable:!(d=p(e,i))||d.enumerable});return r};var v=(r,e,t)=>(t=r!=null?a(w(r)):{},h(e||!r||!r.__esModule?c(t,\"default\",{value:r,enumerable:!0}):t,r)),x=r=>h(c({},\"__esModule\",{value:!0}),r);var s=u((C,l)=>{l.exports=_jsx_runtime});var M={};f(M,{default:()=>y,frontmatter:()=>j});var n=v(s()),j={title:\"\\u4EC0\\u4E48\\u662F\\u6E10\\u8FDB\\u5F0F\\u6E32\\u67D3\\uFF1F\"};function o(r){let e=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"\\u6E10\\u8FDB\\u5F0F\\u6E32\\u67D3\\u662F\\u6307\\u7528\\u4E8E\\u63D0\\u9AD8\\u7F51\\u9875\\u6027\\u80FD\\uFF08\\u7279\\u522B\\u662F\\u63D0\\u9AD8\\u611F\\u77E5\\u52A0\\u8F7D\\u65F6\\u95F4\\uFF09\\u7684\\u6280\\u672F\\uFF0C\\u4EE5\\u4FBF\\u5C3D\\u5FEB\\u6E32\\u67D3\\u5185\\u5BB9\\u4EE5\\u4F9B\\u663E\\u793A\\u3002\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u5BBD\\u5E26\\u4E92\\u8054\\u7F51\\u666E\\u53CA\\u4E4B\\u524D\\u7684\\u65F6\\u4EE3\\uFF0C\\u5B83\\u66FE\\u7ECF\\u975E\\u5E38\\u6D41\\u884C\\uFF0C\\u4F46\\u5B83\\u4ECD\\u7136\\u88AB\\u7528\\u4E8E\\u73B0\\u4EE3\\u5F00\\u53D1\\u4E2D\\uFF0C\\u56E0\\u4E3A\\u79FB\\u52A8\\u6570\\u636E\\u8FDE\\u63A5\\u53D8\\u5F97\\u8D8A\\u6765\\u8D8A\\u53D7\\u6B22\\u8FCE\\uFF08\\u800C\\u4E14\\u4E0D\\u53EF\\u9760\\uFF09\\uFF01\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u56FE\\u7247\\u7684\\u61D2\\u52A0\\u8F7D\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u9875\\u9762\\u4E0A\\u7684\\u56FE\\u7247\\u4E0D\\u4F1A\\u4E00\\u6B21\\u6027\\u5168\\u90E8\\u52A0\\u8F7D\\u3002\\u53EA\\u6709\\u5F53\\u7528\\u6237\\u6EDA\\u52A8\\u5230\\u663E\\u793A\\u56FE\\u7247\\u7684\\u9875\\u9762\\u90E8\\u5206\\u6216\\u9644\\u8FD1\\u65F6\\uFF0C\\u624D\\u4F1A\\u52A0\\u8F7D\\u56FE\\u7247\\u3002\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:'<img loading=\"lazy\">'}),\" \\u662F\\u4E00\\u79CD\\u73B0\\u4EE3\\u65B9\\u5F0F\\uFF0C\\u6307\\u793A\\u6D4F\\u89C8\\u5668\\u63A8\\u8FDF\\u52A0\\u8F7D\\u5C4F\\u5E55\\u5916\\u7684\\u56FE\\u50CF\\uFF0C\\u76F4\\u5230\\u7528\\u6237\\u6EDA\\u52A8\\u5230\\u5B83\\u4EEC\\u9644\\u8FD1\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u4F7F\\u7528 JavaScript \\u76D1\\u89C6\\u6EDA\\u52A8\\u4F4D\\u7F6E\\uFF0C\\u5E76\\u5728\\u56FE\\u50CF\\u5373\\u5C06\\u51FA\\u73B0\\u5728\\u5C4F\\u5E55\\u4E0A\\u65F6\\u52A0\\u8F7D\\u56FE\\u50CF\\uFF08\\u901A\\u8FC7\\u5C06\\u56FE\\u50CF\\u7684\\u5750\\u6807\\u4E0E\\u6EDA\\u52A8\\u4F4D\\u7F6E\\u8FDB\\u884C\\u6BD4\\u8F83\\uFF09\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4F18\\u5148\\u663E\\u793A\\u53EF\\u89C1\\u5185\\u5BB9\\uFF08\\u6216\\u9996\\u5C4F\\u6E32\\u67D3\\uFF09\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4EC5\\u5305\\u542B\\u7528\\u6237\\u6D4F\\u89C8\\u5668\\u4E2D\\u5C06\\u9996\\u5148\\u6E32\\u67D3\\u7684\\u9875\\u9762\\u6240\\u9700\\u7684\\u6700\\u5C11 CSS/\\u5185\\u5BB9/\\u811A\\u672C\\uFF0C\\u4EE5\\u4FBF\\u5C3D\\u5FEB\\u663E\\u793A\\uFF0C\\u7136\\u540E\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5EF6\\u8FDF\\u811A\\u672C\\u6216\\u76D1\\u542C \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\"/\",(0,n.jsx)(e.code,{children:\"load\"}),\" \\u4E8B\\u4EF6\\u6765\\u52A0\\u8F7D\\u5176\\u4ED6\\u8D44\\u6E90\\u548C\\u5185\\u5BB9\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5F02\\u6B65 HTML \\u7247\\u6BB5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u540E\\u7AEF\\u6784\\u5EFA\\u9875\\u9762\\u65F6\\uFF0C\\u5C06 HTML \\u7684\\u90E8\\u5206\\u5185\\u5BB9\\u5237\\u65B0\\u5230\\u6D4F\\u89C8\\u5668\\u3002\\u6709\\u5173\\u8BE5\\u6280\\u672F\\u7684\\u66F4\\u591A\\u8BE6\\u7EC6\\u4FE1\\u606F\\uFF0C\\u8BF7\\u53C2\\u89C1 \",(0,n.jsx)(e.a,{href:\"http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/\",children:\"\\u6B64\\u5904\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5176\\u4ED6\\u73B0\\u4EE3\\u6280\\u672F\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.patterns.dev/posts/progressive-hydration/\",children:\"\\u6E10\\u8FDB\\u5F0F\\u6C34\\u5408\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.patterns.dev/posts/server-side-rendering/\",children:\"\\u6D41\\u5F0F\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.patterns.dev/posts/react-selective-hydration/\",children:\"\\u9009\\u62E9\\u6027\\u6C34\\u5408\"})}),`\n`]})]})}function _(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(o,r)})):o(r)}var y=_;return x(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),v=(r,e)=>{for(var t in e)c(r,t,{get:e[t],enumerable:!0})},h=(r,e,t,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of w(e))!u.call(r,i)&&i!==t&&c(r,i,{get:()=>e[i],enumerable:!(d=m(e,i))||d.enumerable});return r};var x=(r,e,t)=>(t=r!=null?p(g(r)):{},h(e||!r||!r.__esModule?c(t,\"default\",{value:r,enumerable:!0}):t,r)),_=r=>h(c({},\"__esModule\",{value:!0}),r);var o=f((C,l)=>{l.exports=_jsx_runtime});var M={};v(M,{default:()=>a,frontmatter:()=>y});var n=x(o()),y={title:\"\\u4EC0\\u4E48\\u662F\\u6E10\\u8FDB\\u5F0F\\u6E32\\u67D3\\uFF1F\"};function s(r){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"\\u6E10\\u8FDB\\u5F0F\\u6E32\\u67D3\\u662F\\u6307\\u7528\\u4E8E\\u63D0\\u9AD8\\u7F51\\u9875\\u6027\\u80FD\\uFF08\\u7279\\u522B\\u662F\\u63D0\\u9AD8\\u611F\\u77E5\\u52A0\\u8F7D\\u65F6\\u95F4\\uFF09\\u7684\\u6280\\u672F\\uFF0C\\u4EE5\\u4FBF\\u5C3D\\u5FEB\\u6E32\\u67D3\\u5185\\u5BB9\\u4EE5\\u4F9B\\u663E\\u793A\\u3002\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u5BBD\\u5E26\\u4E92\\u8054\\u7F51\\u666E\\u53CA\\u4E4B\\u524D\\u7684\\u65F6\\u4EE3\\uFF0C\\u5B83\\u66FE\\u7ECF\\u975E\\u5E38\\u6D41\\u884C\\uFF0C\\u4F46\\u5B83\\u4ECD\\u7136\\u88AB\\u7528\\u4E8E\\u73B0\\u4EE3\\u5F00\\u53D1\\u4E2D\\uFF0C\\u56E0\\u4E3A\\u79FB\\u52A8\\u6570\\u636E\\u8FDE\\u63A5\\u53D8\\u5F97\\u8D8A\\u6765\\u8D8A\\u53D7\\u6B22\\u8FCE\\uFF08\\u800C\\u4E14\\u4E0D\\u53EF\\u9760\\uFF09\\uFF01\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u56FE\\u7247\\u7684\\u61D2\\u52A0\\u8F7D\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u9875\\u9762\\u4E0A\\u7684\\u56FE\\u7247\\u4E0D\\u4F1A\\u4E00\\u6B21\\u6027\\u5168\\u90E8\\u52A0\\u8F7D\\u3002\\u53EA\\u6709\\u5F53\\u7528\\u6237\\u6EDA\\u52A8\\u5230\\u663E\\u793A\\u56FE\\u7247\\u7684\\u9875\\u9762\\u90E8\\u5206\\u6216\\u9644\\u8FD1\\u65F6\\uFF0C\\u624D\\u4F1A\\u52A0\\u8F7D\\u56FE\\u7247\\u3002\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:'<img loading=\"lazy\">'}),\" \\u662F\\u4E00\\u79CD\\u73B0\\u4EE3\\u65B9\\u5F0F\\uFF0C\\u6307\\u793A\\u6D4F\\u89C8\\u5668\\u63A8\\u8FDF\\u52A0\\u8F7D\\u5C4F\\u5E55\\u5916\\u7684\\u56FE\\u50CF\\uFF0C\\u76F4\\u5230\\u7528\\u6237\\u6EDA\\u52A8\\u5230\\u5B83\\u4EEC\\u9644\\u8FD1\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u4F7F\\u7528 JavaScript \\u76D1\\u89C6\\u6EDA\\u52A8\\u4F4D\\u7F6E\\uFF0C\\u5E76\\u5728\\u56FE\\u50CF\\u5373\\u5C06\\u51FA\\u73B0\\u5728\\u5C4F\\u5E55\\u4E0A\\u65F6\\u52A0\\u8F7D\\u56FE\\u50CF\\uFF08\\u901A\\u8FC7\\u5C06\\u56FE\\u50CF\\u7684\\u5750\\u6807\\u4E0E\\u6EDA\\u52A8\\u4F4D\\u7F6E\\u8FDB\\u884C\\u6BD4\\u8F83\\uFF09\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4F18\\u5148\\u663E\\u793A\\u53EF\\u89C1\\u5185\\u5BB9\\uFF08\\u6216\\u9996\\u5C4F\\u6E32\\u67D3\\uFF09\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4EC5\\u5305\\u542B\\u7528\\u6237\\u6D4F\\u89C8\\u5668\\u4E2D\\u5C06\\u9996\\u5148\\u6E32\\u67D3\\u7684\\u9875\\u9762\\u6240\\u9700\\u7684\\u6700\\u5C11 CSS/\\u5185\\u5BB9/\\u811A\\u672C\\uFF0C\\u4EE5\\u4FBF\\u5C3D\\u5FEB\\u663E\\u793A\\uFF0C\\u7136\\u540E\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5EF6\\u8FDF\\u811A\\u672C\\u6216\\u76D1\\u542C \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\"/\",(0,n.jsx)(e.code,{children:\"load\"}),\" \\u4E8B\\u4EF6\\u6765\\u52A0\\u8F7D\\u5176\\u4ED6\\u8D44\\u6E90\\u548C\\u5185\\u5BB9\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5F02\\u6B65 HTML \\u7247\\u6BB5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u540E\\u7AEF\\u6784\\u5EFA\\u9875\\u9762\\u65F6\\uFF0C\\u5C06 HTML \\u7684\\u90E8\\u5206\\u5185\\u5BB9\\u5237\\u65B0\\u5230\\u6D4F\\u89C8\\u5668\\u3002\\u6709\\u5173\\u8BE5\\u6280\\u672F\\u7684\\u66F4\\u591A\\u8BE6\\u7EC6\\u4FE1\\u606F\\uFF0C\\u8BF7\\u53C2\\u89C1 \",(0,n.jsx)(e.a,{href:\"http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/\",children:\"\\u6B64\\u5904\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5176\\u4ED6\\u73B0\\u4EE3\\u6280\\u672F\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.patterns.dev/posts/progressive-hydration/\",children:\"\\u6E10\\u8FDB\\u5F0F\\u6C34\\u5408\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.patterns.dev/posts/server-side-rendering/\",children:\"\\u6D41\\u5F0F\\u670D\\u52A1\\u5668\\u7AEF\\u6E32\\u67D3\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.patterns.dev/posts/react-selective-hydration/\",children:\"\\u9009\\u62E9\\u6027\\u6C34\\u5408\"})}),`\n`]})]})}function a(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(s,{...r})}):s(r)}return _(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-react-describe-the-benefits-of-react/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-react-describe-the-benefits-of-react/en-US.json
index c582e7b4e..eac7ae36c 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-react-describe-the-benefits-of-react/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-react-describe-the-benefits-of-react/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-react-describe-the-benefits-of-react/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},l=(t,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!g.call(t,a)&&a!==i&&r(t,a,{get:()=>e[a],enumerable:!(o=u(e,a))||o.enumerable});return t};var b=(t,e,i)=>(i=t!=null?h(m(t)):{},l(e||!t||!t.__esModule?r(i,\"default\",{value:t,enumerable:!0}):i,t)),v=t=>l(r({},\"__esModule\",{value:!0}),t);var c=f((O,s)=>{s.exports=_jsx_runtime});var D={};y(D,{default:()=>x,frontmatter:()=>w});var n=b(c()),w={title:\"What is React? Describe the benefits of React\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",strong:\"strong\",ul:\"ul\",li:\"li\",hr:\"hr\",h3:\"h3\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"React is a JavaScript library created by Facebook for building user interfaces, primarily for single-page applications. It allows developers to create reusable components that manage their own state. Key benefits of React include a component-based architecture for modular code, the virtual DOM for efficient updates, a declarative UI for more readable code, one-way data binding for predictable data flow, and a strong community and ecosystem with abundant resources and tools.\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Key characteristics of React\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Declarative\"}),\": You describe the desired state of your UI based on data, and React handles updating the actual DOM efficiently.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Component-based\"}),\": Build reusable and modular UI elements (components) that manage their own state and logic.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Virtual DOM\"}),\": React uses a lightweight in-memory representation of the actual DOM, allowing it to perform updates selectively and efficiently.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"JSX\"}),\": While not mandatory, JSX provides a syntax extension that allows you to write HTML-like structures within your JavaScript code, making UI development more intuitive.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is React?\"}),`\n`,(0,n.jsx)(e.p,{children:\"React is an open-source JavaScript library developed by Facebook for building user interfaces. It focuses on the view layer of an application and is especially useful for creating single-page applications where a seamless user experience is crucial. React allows developers to build encapsulated components that manage their own state and compose them to create complex UIs.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Benefits of React\"}),`\n`,(0,n.jsx)(e.h3,{children:\"1. Component-based architecture\"}),`\n`,(0,n.jsx)(e.p,{children:\"React encourages breaking down your UI into independent, reusable components. Each component encapsulates its own state, logic, and rendering, making your code:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Modular and reusable:\"}),\" Components can be easily reused across different parts of your application or even in other projects.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Maintainable:\"}),\" Changes within a component are isolated, reducing the risk of unintended side effects.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Easier to test:\"}),\" Components can be tested independently, ensuring their functionality and reliability.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"2. Virtual DOM and efficient updates\"}),`\n`,(0,n.jsx)(e.p,{children:\"React utilizes a virtual DOM, a lightweight in-memory representation of the actual DOM. When data changes, React first updates the virtual DOM, then compares it to the previous version. This process, known as diffing, allows React to identify the minimal set of changes required in the actual DOM. By updating only the necessary elements, React minimizes expensive DOM manipulations, resulting in significant performance improvements.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"3. Large and active community\"}),`\n`,(0,n.jsx)(e.p,{children:\"React boasts a vast and active community of developers worldwide. This translates to:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Extensive documentation and resources:\"}),\" Find comprehensive documentation, tutorials, and community-driven resources to aid your learning and development process.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Abundant third-party libraries and tools:\"}),\" Leverage a rich ecosystem of pre-built components, libraries, and tools that extend React's functionality and streamline development.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Strong community support:\"}),\" Seek help, share knowledge, and engage with fellow developers through forums, online communities, and meetups.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"4. Learn once, write anywhere\"}),`\n`,(0,n.jsx)(e.p,{children:`React's versatility extends beyond web development. With React Native, you can use your React knowledge to build native mobile applications for iOS and Android. This \"learn once, write anywhere\" approach allows you to:`}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Share code between platforms:\"}),\" Reuse components and logic across web and mobile, reducing development time and effort.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Leverage existing skills:\"}),\" Apply your React expertise to mobile development without needing to learn entirely new technologies.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Target multiple platforms with a single codebase:\"}),\" Streamline development and maintenance by managing a single codebase for multiple platforms.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"React Official Website:\"}),\" \",(0,n.jsx)(e.a,{href:\"https://react.dev/\",children:\"https://react.dev/\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"React Documentation:\"}),\" \",(0,n.jsx)(e.a,{href:\"https://react.dev/learn\",children:\"https://react.dev/learn\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"React Blog:\"}),\" \",(0,n.jsx)(e.a,{href:\"https://react.dev/blog\",children:\"https://react.dev/blog\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"React Native:\"}),\" \",(0,n.jsx)(e.a,{href:\"https://reactnative.dev/\",children:\"https://reactnative.dev/\"})]}),`\n`]})]})}function R(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var x=R;return v(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},l=(t,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!f.call(t,a)&&a!==i&&r(t,a,{get:()=>e[a],enumerable:!(o=p(e,a))||o.enumerable});return t};var b=(t,e,i)=>(i=t!=null?u(g(t)):{},l(e||!t||!t.__esModule?r(i,\"default\",{value:t,enumerable:!0}):i,t)),w=t=>l(r({},\"__esModule\",{value:!0}),t);var c=y((M,s)=>{s.exports=_jsx_runtime});var x={};v(x,{default:()=>h,frontmatter:()=>R});var n=b(c()),R={title:\"What is React? Describe the benefits of React\"};function d(t){let e={a:\"a\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"React is a JavaScript library created by Facebook for building user interfaces, primarily for single-page applications. It allows developers to create reusable components that manage their own state. Key benefits of React include a component-based architecture for modular code, the virtual DOM for efficient updates, a declarative UI for more readable code, one-way data binding for predictable data flow, and a strong community and ecosystem with abundant resources and tools.\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Key characteristics of React\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Declarative\"}),\": You describe the desired state of your UI based on data, and React handles updating the actual DOM efficiently.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Component-based\"}),\": Build reusable and modular UI elements (components) that manage their own state and logic.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Virtual DOM\"}),\": React uses a lightweight in-memory representation of the actual DOM, allowing it to perform updates selectively and efficiently.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"JSX\"}),\": While not mandatory, JSX provides a syntax extension that allows you to write HTML-like structures within your JavaScript code, making UI development more intuitive.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is React?\"}),`\n`,(0,n.jsx)(e.p,{children:\"React is an open-source JavaScript library developed by Facebook for building user interfaces. It focuses on the view layer of an application and is especially useful for creating single-page applications where a seamless user experience is crucial. React allows developers to build encapsulated components that manage their own state and compose them to create complex UIs.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Benefits of React\"}),`\n`,(0,n.jsx)(e.h3,{children:\"1. Component-based architecture\"}),`\n`,(0,n.jsx)(e.p,{children:\"React encourages breaking down your UI into independent, reusable components. Each component encapsulates its own state, logic, and rendering, making your code:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Modular and reusable:\"}),\" Components can be easily reused across different parts of your application or even in other projects.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Maintainable:\"}),\" Changes within a component are isolated, reducing the risk of unintended side effects.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Easier to test:\"}),\" Components can be tested independently, ensuring their functionality and reliability.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"2. Virtual DOM and efficient updates\"}),`\n`,(0,n.jsx)(e.p,{children:\"React utilizes a virtual DOM, a lightweight in-memory representation of the actual DOM. When data changes, React first updates the virtual DOM, then compares it to the previous version. This process, known as diffing, allows React to identify the minimal set of changes required in the actual DOM. By updating only the necessary elements, React minimizes expensive DOM manipulations, resulting in significant performance improvements.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"3. Large and active community\"}),`\n`,(0,n.jsx)(e.p,{children:\"React boasts a vast and active community of developers worldwide. This translates to:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Extensive documentation and resources:\"}),\" Find comprehensive documentation, tutorials, and community-driven resources to aid your learning and development process.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Abundant third-party libraries and tools:\"}),\" Leverage a rich ecosystem of pre-built components, libraries, and tools that extend React's functionality and streamline development.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Strong community support:\"}),\" Seek help, share knowledge, and engage with fellow developers through forums, online communities, and meetups.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"4. Learn once, write anywhere\"}),`\n`,(0,n.jsx)(e.p,{children:`React's versatility extends beyond web development. With React Native, you can use your React knowledge to build native mobile applications for iOS and Android. This \"learn once, write anywhere\" approach allows you to:`}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Share code between platforms:\"}),\" Reuse components and logic across web and mobile, reducing development time and effort.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Leverage existing skills:\"}),\" Apply your React expertise to mobile development without needing to learn entirely new technologies.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Target multiple platforms with a single codebase:\"}),\" Streamline development and maintenance by managing a single codebase for multiple platforms.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"React Official Website:\"}),\" \",(0,n.jsx)(e.a,{href:\"https://react.dev/\",children:\"https://react.dev/\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"React Documentation:\"}),\" \",(0,n.jsx)(e.a,{href:\"https://react.dev/learn\",children:\"https://react.dev/learn\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"React Blog:\"}),\" \",(0,n.jsx)(e.a,{href:\"https://react.dev/blog\",children:\"https://react.dev/blog\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"React Native:\"}),\" \",(0,n.jsx)(e.a,{href:\"https://reactnative.dev/\",children:\"https://reactnative.dev/\"})]}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return w(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-react-describe-the-benefits-of-react/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-react-describe-the-benefits-of-react/zh-CN.json
index b3f0bbd64..8aa24d47e 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-react-describe-the-benefits-of-react/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-react-describe-the-benefits-of-react/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-react-describe-the-benefits-of-react/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var o=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var u=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),M=(r,n)=>{for(var c in n)i(r,c,{get:n[c],enumerable:!0})},h=(r,n,c,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of R(n))!v.call(r,t)&&t!==c&&i(r,t,{get:()=>n[t],enumerable:!(l=g(n,t))||l.enumerable});return r};var D=(r,n,c)=>(c=r!=null?o(p(r)):{},h(n||!r||!r.__esModule?i(c,\"default\",{value:r,enumerable:!0}):c,r)),O=r=>h(i({},\"__esModule\",{value:!0}),r);var a=u((_,d)=>{d.exports=_jsx_runtime});var b={};M(b,{default:()=>x,frontmatter:()=>f});var e=D(a()),f={title:\"\\u4EC0\\u4E48\\u662F React\\uFF1F \\u63CF\\u8FF0 React \\u7684\\u4F18\\u70B9\"};function s(r){let n=Object.assign({h2:\"h2\",p:\"p\",strong:\"strong\",ul:\"ul\",li:\"li\",hr:\"hr\",h3:\"h3\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u662F\\u4E00\\u4E2A\\u7531 Facebook \\u521B\\u5EFA\\u7684 JavaScript \\u5E93\\uFF0C\\u7528\\u4E8E\\u6784\\u5EFA\\u7528\\u6237\\u754C\\u9762\\uFF0C\\u4E3B\\u8981\\u7528\\u4E8E\\u5355\\u9875\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\\u5B83\\u5141\\u8BB8\\u5F00\\u53D1\\u4EBA\\u5458\\u521B\\u5EFA\\u7BA1\\u7406\\u81EA\\u5DF1\\u72B6\\u6001\\u7684\\u53EF\\u91CD\\u7528\\u7EC4\\u4EF6\\u3002React \\u7684\\u4E3B\\u8981\\u4F18\\u70B9\\u5305\\u62EC\\u57FA\\u4E8E\\u7EC4\\u4EF6\\u7684\\u67B6\\u6784\\uFF0C\\u7528\\u4E8E\\u6A21\\u5757\\u5316\\u4EE3\\u7801\\uFF0C\\u865A\\u62DF DOM \\u7528\\u4E8E\\u9AD8\\u6548\\u66F4\\u65B0\\uFF0C\\u58F0\\u660E\\u5F0F UI \\u7528\\u4E8E\\u66F4\\u6613\\u8BFB\\u7684\\u4EE3\\u7801\\uFF0C\\u5355\\u5411\\u6570\\u636E\\u7ED1\\u5B9A\\u7528\\u4E8E\\u53EF\\u9884\\u6D4B\\u7684\\u6570\\u636E\\u6D41\\uFF0C\\u4EE5\\u53CA\\u62E5\\u6709\\u4E30\\u5BCC\\u8D44\\u6E90\\u548C\\u5DE5\\u5177\\u7684\\u5F3A\\u5927\\u793E\\u533A\\u548C\\u751F\\u6001\\u7CFB\\u7EDF\\u3002\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"React \\u7684\\u4E3B\\u8981\\u7279\\u70B9\"}),\"\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u58F0\\u660E\\u5F0F\"}),\"\\uFF1A\\u60A8\\u6839\\u636E\\u6570\\u636E\\u63CF\\u8FF0 UI \\u7684\\u6240\\u9700\\u72B6\\u6001\\uFF0CReact \\u5904\\u7406\\u9AD8\\u6548\\u66F4\\u65B0\\u5B9E\\u9645 DOM\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u57FA\\u4E8E\\u7EC4\\u4EF6\"}),\"\\uFF1A\\u6784\\u5EFA\\u7BA1\\u7406\\u81EA\\u8EAB\\u72B6\\u6001\\u548C\\u903B\\u8F91\\u7684\\u53EF\\u91CD\\u7528\\u548C\\u6A21\\u5757\\u5316 UI \\u5143\\u7D20\\uFF08\\u7EC4\\u4EF6\\uFF09\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u865A\\u62DF DOM\"}),\"\\uFF1AReact \\u4F7F\\u7528\\u5B9E\\u9645 DOM \\u7684\\u8F7B\\u91CF\\u7EA7\\u5185\\u5B58\\u8868\\u793A\\uFF0C\\u5141\\u8BB8\\u5B83\\u9009\\u62E9\\u6027\\u5730\\u9AD8\\u6548\\u5730\\u6267\\u884C\\u66F4\\u65B0\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"JSX\"}),\"\\uFF1A\\u867D\\u7136\\u4E0D\\u662F\\u5F3A\\u5236\\u6027\\u7684\\uFF0C\\u4F46 JSX \\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u8BED\\u6CD5\\u6269\\u5C55\\uFF0C\\u5141\\u8BB8\\u60A8\\u5728 JavaScript \\u4EE3\\u7801\\u4E2D\\u7F16\\u5199\\u7C7B\\u4F3C HTML \\u7684\\u7ED3\\u6784\\uFF0C\\u4F7F UI \\u5F00\\u53D1\\u66F4\\u76F4\\u89C2\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F React\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u662F\\u4E00\\u4E2A\\u7531 Facebook \\u5F00\\u53D1\\u7684\\u5F00\\u6E90 JavaScript \\u5E93\\uFF0C\\u7528\\u4E8E\\u6784\\u5EFA\\u7528\\u6237\\u754C\\u9762\\u3002\\u5B83\\u4E13\\u6CE8\\u4E8E\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u89C6\\u56FE\\u5C42\\uFF0C\\u7279\\u522B\\u9002\\u7528\\u4E8E\\u521B\\u5EFA\\u5355\\u9875\\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u5728\\u8FD9\\u79CD\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\uFF0C\\u65E0\\u7F1D\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u81F3\\u5173\\u91CD\\u8981\\u3002React \\u5141\\u8BB8\\u5F00\\u53D1\\u4EBA\\u5458\\u6784\\u5EFA\\u5C01\\u88C5\\u5176\\u81EA\\u8EAB\\u72B6\\u6001\\u7684\\u7EC4\\u4EF6\\uFF0C\\u5E76\\u5C06\\u5B83\\u4EEC\\u7EC4\\u5408\\u8D77\\u6765\\u521B\\u5EFA\\u590D\\u6742\\u7684 UI\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u7684\\u4F18\\u70B9\"}),`\n`,(0,e.jsx)(n.h3,{children:\"1. \\u57FA\\u4E8E\\u7EC4\\u4EF6\\u7684\\u67B6\\u6784\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u9F13\\u52B1\\u5C06\\u60A8\\u7684 UI \\u5206\\u89E3\\u4E3A\\u72EC\\u7ACB\\u7684\\u3001\\u53EF\\u91CD\\u7528\\u7684\\u7EC4\\u4EF6\\u3002\\u6BCF\\u4E2A\\u7EC4\\u4EF6\\u5C01\\u88C5\\u5176\\u81EA\\u8EAB\\u7684\\u72B6\\u6001\\u3001\\u903B\\u8F91\\u548C\\u6E32\\u67D3\\uFF0C\\u4F7F\\u60A8\\u7684\\u4EE3\\u7801\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6A21\\u5757\\u5316\\u548C\\u53EF\\u91CD\\u7528\"}),\"\\uFF1A\\u7EC4\\u4EF6\\u53EF\\u4EE5\\u5728\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4E0D\\u540C\\u90E8\\u5206\\u751A\\u81F3\\u5176\\u4ED6\\u9879\\u76EE\\u4E2D\\u8F7B\\u677E\\u91CD\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u7EF4\\u62A4\"}),\"\\uFF1A\\u7EC4\\u4EF6\\u5185\\u7684\\u66F4\\u6539\\u662F\\u9694\\u79BB\\u7684\\uFF0C\\u4ECE\\u800C\\u964D\\u4F4E\\u4E86\\u610F\\u5916\\u526F\\u4F5C\\u7528\\u7684\\u98CE\\u9669\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u66F4\\u6613\\u4E8E\\u6D4B\\u8BD5\"}),\"\\uFF1A\\u7EC4\\u4EF6\\u53EF\\u4EE5\\u72EC\\u7ACB\\u6D4B\\u8BD5\\uFF0C\\u786E\\u4FDD\\u5176\\u529F\\u80FD\\u548C\\u53EF\\u9760\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"2. \\u865A\\u62DF DOM \\u548C\\u9AD8\\u6548\\u66F4\\u65B0\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u4F7F\\u7528\\u865A\\u62DF DOM\\uFF0C\\u5373\\u5B9E\\u9645 DOM \\u7684\\u8F7B\\u91CF\\u7EA7\\u5185\\u5B58\\u8868\\u793A\\u3002\\u5F53\\u6570\\u636E\\u66F4\\u6539\\u65F6\\uFF0CReact \\u9996\\u5148\\u66F4\\u65B0\\u865A\\u62DF DOM\\uFF0C\\u7136\\u540E\\u5C06\\u5176\\u4E0E\\u4E4B\\u524D\\u7684\\u7248\\u672C\\u8FDB\\u884C\\u6BD4\\u8F83\\u3002\\u8FD9\\u4E2A\\u8FC7\\u7A0B\\u79F0\\u4E3A diffing\\uFF0C\\u5B83\\u5141\\u8BB8 React \\u8BC6\\u522B\\u5B9E\\u9645 DOM \\u4E2D\\u6240\\u9700\\u7684\\u6700\\u5C11\\u66F4\\u6539\\u96C6\\u3002\\u901A\\u8FC7\\u4EC5\\u66F4\\u65B0\\u5FC5\\u8981\\u7684\\u5143\\u7D20\\uFF0CReact \\u6700\\u5C0F\\u5316\\u4E86\\u6602\\u8D35\\u7684 DOM \\u64CD\\u4F5C\\uFF0C\\u4ECE\\u800C\\u663E\\u7740\\u63D0\\u9AD8\\u4E86\\u6027\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"3. \\u5927\\u578B\\u4E14\\u6D3B\\u8DC3\\u7684\\u793E\\u533A\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u62E5\\u6709\\u5E9E\\u5927\\u800C\\u6D3B\\u8DC3\\u7684\\u5168\\u7403\\u5F00\\u53D1\\u4EBA\\u5458\\u793E\\u533A\\u3002 \\u8FD9\\u8F6C\\u5316\\u4E3A\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5E7F\\u6CDB\\u7684\\u6587\\u6863\\u548C\\u8D44\\u6E90\"}),\"\\uFF1A\\u67E5\\u627E\\u5168\\u9762\\u7684\\u6587\\u6863\\u3001\\u6559\\u7A0B\\u548C\\u793E\\u533A\\u9A71\\u52A8\\u7684\\u8D44\\u6E90\\uFF0C\\u4EE5\\u5E2E\\u52A9\\u60A8\\u7684\\u5B66\\u4E60\\u548C\\u5F00\\u53D1\\u8FC7\\u7A0B\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E30\\u5BCC\\u7684\\u7B2C\\u4E09\\u65B9\\u5E93\\u548C\\u5DE5\\u5177\"}),\"\\uFF1A\\u5229\\u7528\\u4E30\\u5BCC\\u7684\\u9884\\u6784\\u5EFA\\u7EC4\\u4EF6\\u3001\\u5E93\\u548C\\u5DE5\\u5177\\u751F\\u6001\\u7CFB\\u7EDF\\uFF0C\\u8FD9\\u4E9B\\u751F\\u6001\\u7CFB\\u7EDF\\u6269\\u5C55\\u4E86 React \\u7684\\u529F\\u80FD\\u5E76\\u7B80\\u5316\\u4E86\\u5F00\\u53D1\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5F3A\\u5927\\u7684\\u793E\\u533A\\u652F\\u6301\"}),\"\\uFF1A\\u901A\\u8FC7\\u8BBA\\u575B\\u3001\\u5728\\u7EBF\\u793E\\u533A\\u548C\\u805A\\u4F1A\\u5BFB\\u6C42\\u5E2E\\u52A9\\u3001\\u5206\\u4EAB\\u77E5\\u8BC6\\u5E76\\u4E0E\\u540C\\u884C\\u5F00\\u53D1\\u4EBA\\u5458\\u4E92\\u52A8\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"4. \\u4E00\\u6B21\\u5B66\\u4E60\\uFF0C\\u968F\\u5904\\u7F16\\u5199\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u7684\\u591A\\u529F\\u80FD\\u6027\\u8D85\\u51FA\\u4E86 Web \\u5F00\\u53D1\\u7684\\u8303\\u56F4\\u3002 \\u4F7F\\u7528 React Native\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u60A8\\u7684 React \\u77E5\\u8BC6\\u4E3A iOS \\u548C Android \\u6784\\u5EFA\\u539F\\u751F\\u79FB\\u52A8\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002 \\u8FD9\\u79CD\\u201C\\u4E00\\u6B21\\u5B66\\u4E60\\uFF0C\\u968F\\u5904\\u7F16\\u5199\\u201D\\u7684\\u65B9\\u6CD5\\u5141\\u8BB8\\u60A8\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5728\\u5E73\\u53F0\\u4E4B\\u95F4\\u5171\\u4EAB\\u4EE3\\u7801\"}),\"\\uFF1A\\u5728 Web \\u548C\\u79FB\\u52A8\\u8BBE\\u5907\\u4E4B\\u95F4\\u91CD\\u7528\\u7EC4\\u4EF6\\u548C\\u903B\\u8F91\\uFF0C\\u4ECE\\u800C\\u51CF\\u5C11\\u5F00\\u53D1\\u65F6\\u95F4\\u548C\\u7CBE\\u529B\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5229\\u7528\\u73B0\\u6709\\u6280\\u80FD\"}),\"\\uFF1A\\u5C06\\u60A8\\u7684 React \\u4E13\\u4E1A\\u77E5\\u8BC6\\u5E94\\u7528\\u4E8E\\u79FB\\u52A8\\u5F00\\u53D1\\uFF0C\\u800C\\u65E0\\u9700\\u5B66\\u4E60\\u5168\\u65B0\\u7684\\u6280\\u672F\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F7F\\u7528\\u5355\\u4E2A\\u4EE3\\u7801\\u5E93\\u5B9A\\u4F4D\\u591A\\u4E2A\\u5E73\\u53F0\"}),\"\\uFF1A\\u901A\\u8FC7\\u4E3A\\u591A\\u4E2A\\u5E73\\u53F0\\u7BA1\\u7406\\u5355\\u4E2A\\u4EE3\\u7801\\u5E93\\u6765\\u7B80\\u5316\\u5F00\\u53D1\\u548C\\u7EF4\\u62A4\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"React \\u5B98\\u65B9\\u7F51\\u7AD9\\uFF1A\"}),\" \",(0,e.jsx)(n.a,{href:\"https://react.dev/\",children:\"https://react.dev/\"})]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"React \\u6587\\u6863\\uFF1A\"}),\" \",(0,e.jsx)(n.a,{href:\"https://react.dev/learn\",children:\"https://react.dev/learn\"})]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"React \\u535A\\u5BA2\\uFF1A\"}),\" \",(0,e.jsx)(n.a,{href:\"https://react.dev/blog\",children:\"https://react.dev/blog\"})]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"React Native\\uFF1A\"}),\" \",(0,e.jsx)(n.a,{href:\"https://reactnative.dev/\",children:\"https://reactnative.dev/\"})]}),`\n`]})]})}function m(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(s,r)})):s(r)}var x=m;return O(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var R=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var M=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),D=(r,n)=>{for(var c in n)i(r,c,{get:n[c],enumerable:!0})},h=(r,n,c,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of p(n))!u.call(r,t)&&t!==c&&i(r,t,{get:()=>n[t],enumerable:!(l=g(n,t))||l.enumerable});return r};var f=(r,n,c)=>(c=r!=null?R(v(r)):{},h(n||!r||!r.__esModule?i(c,\"default\",{value:r,enumerable:!0}):c,r)),O=r=>h(i({},\"__esModule\",{value:!0}),r);var a=M((b,d)=>{d.exports=_jsx_runtime});var x={};D(x,{default:()=>s,frontmatter:()=>m});var e=f(a()),m={title:\"\\u4EC0\\u4E48\\u662F React\\uFF1F \\u63CF\\u8FF0 React \\u7684\\u4F18\\u70B9\"};function o(r){let n={a:\"a\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u662F\\u4E00\\u4E2A\\u7531 Facebook \\u521B\\u5EFA\\u7684 JavaScript \\u5E93\\uFF0C\\u7528\\u4E8E\\u6784\\u5EFA\\u7528\\u6237\\u754C\\u9762\\uFF0C\\u4E3B\\u8981\\u7528\\u4E8E\\u5355\\u9875\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\\u5B83\\u5141\\u8BB8\\u5F00\\u53D1\\u4EBA\\u5458\\u521B\\u5EFA\\u7BA1\\u7406\\u81EA\\u5DF1\\u72B6\\u6001\\u7684\\u53EF\\u91CD\\u7528\\u7EC4\\u4EF6\\u3002React \\u7684\\u4E3B\\u8981\\u4F18\\u70B9\\u5305\\u62EC\\u57FA\\u4E8E\\u7EC4\\u4EF6\\u7684\\u67B6\\u6784\\uFF0C\\u7528\\u4E8E\\u6A21\\u5757\\u5316\\u4EE3\\u7801\\uFF0C\\u865A\\u62DF DOM \\u7528\\u4E8E\\u9AD8\\u6548\\u66F4\\u65B0\\uFF0C\\u58F0\\u660E\\u5F0F UI \\u7528\\u4E8E\\u66F4\\u6613\\u8BFB\\u7684\\u4EE3\\u7801\\uFF0C\\u5355\\u5411\\u6570\\u636E\\u7ED1\\u5B9A\\u7528\\u4E8E\\u53EF\\u9884\\u6D4B\\u7684\\u6570\\u636E\\u6D41\\uFF0C\\u4EE5\\u53CA\\u62E5\\u6709\\u4E30\\u5BCC\\u8D44\\u6E90\\u548C\\u5DE5\\u5177\\u7684\\u5F3A\\u5927\\u793E\\u533A\\u548C\\u751F\\u6001\\u7CFB\\u7EDF\\u3002\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"React \\u7684\\u4E3B\\u8981\\u7279\\u70B9\"}),\"\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u58F0\\u660E\\u5F0F\"}),\"\\uFF1A\\u60A8\\u6839\\u636E\\u6570\\u636E\\u63CF\\u8FF0 UI \\u7684\\u6240\\u9700\\u72B6\\u6001\\uFF0CReact \\u5904\\u7406\\u9AD8\\u6548\\u66F4\\u65B0\\u5B9E\\u9645 DOM\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u57FA\\u4E8E\\u7EC4\\u4EF6\"}),\"\\uFF1A\\u6784\\u5EFA\\u7BA1\\u7406\\u81EA\\u8EAB\\u72B6\\u6001\\u548C\\u903B\\u8F91\\u7684\\u53EF\\u91CD\\u7528\\u548C\\u6A21\\u5757\\u5316 UI \\u5143\\u7D20\\uFF08\\u7EC4\\u4EF6\\uFF09\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u865A\\u62DF DOM\"}),\"\\uFF1AReact \\u4F7F\\u7528\\u5B9E\\u9645 DOM \\u7684\\u8F7B\\u91CF\\u7EA7\\u5185\\u5B58\\u8868\\u793A\\uFF0C\\u5141\\u8BB8\\u5B83\\u9009\\u62E9\\u6027\\u5730\\u9AD8\\u6548\\u5730\\u6267\\u884C\\u66F4\\u65B0\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"JSX\"}),\"\\uFF1A\\u867D\\u7136\\u4E0D\\u662F\\u5F3A\\u5236\\u6027\\u7684\\uFF0C\\u4F46 JSX \\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u8BED\\u6CD5\\u6269\\u5C55\\uFF0C\\u5141\\u8BB8\\u60A8\\u5728 JavaScript \\u4EE3\\u7801\\u4E2D\\u7F16\\u5199\\u7C7B\\u4F3C HTML \\u7684\\u7ED3\\u6784\\uFF0C\\u4F7F UI \\u5F00\\u53D1\\u66F4\\u76F4\\u89C2\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F React\\uFF1F\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u662F\\u4E00\\u4E2A\\u7531 Facebook \\u5F00\\u53D1\\u7684\\u5F00\\u6E90 JavaScript \\u5E93\\uFF0C\\u7528\\u4E8E\\u6784\\u5EFA\\u7528\\u6237\\u754C\\u9762\\u3002\\u5B83\\u4E13\\u6CE8\\u4E8E\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u89C6\\u56FE\\u5C42\\uFF0C\\u7279\\u522B\\u9002\\u7528\\u4E8E\\u521B\\u5EFA\\u5355\\u9875\\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u5728\\u8FD9\\u79CD\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\uFF0C\\u65E0\\u7F1D\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u81F3\\u5173\\u91CD\\u8981\\u3002React \\u5141\\u8BB8\\u5F00\\u53D1\\u4EBA\\u5458\\u6784\\u5EFA\\u5C01\\u88C5\\u5176\\u81EA\\u8EAB\\u72B6\\u6001\\u7684\\u7EC4\\u4EF6\\uFF0C\\u5E76\\u5C06\\u5B83\\u4EEC\\u7EC4\\u5408\\u8D77\\u6765\\u521B\\u5EFA\\u590D\\u6742\\u7684 UI\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u7684\\u4F18\\u70B9\"}),`\n`,(0,e.jsx)(n.h3,{children:\"1. \\u57FA\\u4E8E\\u7EC4\\u4EF6\\u7684\\u67B6\\u6784\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u9F13\\u52B1\\u5C06\\u60A8\\u7684 UI \\u5206\\u89E3\\u4E3A\\u72EC\\u7ACB\\u7684\\u3001\\u53EF\\u91CD\\u7528\\u7684\\u7EC4\\u4EF6\\u3002\\u6BCF\\u4E2A\\u7EC4\\u4EF6\\u5C01\\u88C5\\u5176\\u81EA\\u8EAB\\u7684\\u72B6\\u6001\\u3001\\u903B\\u8F91\\u548C\\u6E32\\u67D3\\uFF0C\\u4F7F\\u60A8\\u7684\\u4EE3\\u7801\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6A21\\u5757\\u5316\\u548C\\u53EF\\u91CD\\u7528\"}),\"\\uFF1A\\u7EC4\\u4EF6\\u53EF\\u4EE5\\u5728\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4E0D\\u540C\\u90E8\\u5206\\u751A\\u81F3\\u5176\\u4ED6\\u9879\\u76EE\\u4E2D\\u8F7B\\u677E\\u91CD\\u7528\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u7EF4\\u62A4\"}),\"\\uFF1A\\u7EC4\\u4EF6\\u5185\\u7684\\u66F4\\u6539\\u662F\\u9694\\u79BB\\u7684\\uFF0C\\u4ECE\\u800C\\u964D\\u4F4E\\u4E86\\u610F\\u5916\\u526F\\u4F5C\\u7528\\u7684\\u98CE\\u9669\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u66F4\\u6613\\u4E8E\\u6D4B\\u8BD5\"}),\"\\uFF1A\\u7EC4\\u4EF6\\u53EF\\u4EE5\\u72EC\\u7ACB\\u6D4B\\u8BD5\\uFF0C\\u786E\\u4FDD\\u5176\\u529F\\u80FD\\u548C\\u53EF\\u9760\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"2. \\u865A\\u62DF DOM \\u548C\\u9AD8\\u6548\\u66F4\\u65B0\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u4F7F\\u7528\\u865A\\u62DF DOM\\uFF0C\\u5373\\u5B9E\\u9645 DOM \\u7684\\u8F7B\\u91CF\\u7EA7\\u5185\\u5B58\\u8868\\u793A\\u3002\\u5F53\\u6570\\u636E\\u66F4\\u6539\\u65F6\\uFF0CReact \\u9996\\u5148\\u66F4\\u65B0\\u865A\\u62DF DOM\\uFF0C\\u7136\\u540E\\u5C06\\u5176\\u4E0E\\u4E4B\\u524D\\u7684\\u7248\\u672C\\u8FDB\\u884C\\u6BD4\\u8F83\\u3002\\u8FD9\\u4E2A\\u8FC7\\u7A0B\\u79F0\\u4E3A diffing\\uFF0C\\u5B83\\u5141\\u8BB8 React \\u8BC6\\u522B\\u5B9E\\u9645 DOM \\u4E2D\\u6240\\u9700\\u7684\\u6700\\u5C11\\u66F4\\u6539\\u96C6\\u3002\\u901A\\u8FC7\\u4EC5\\u66F4\\u65B0\\u5FC5\\u8981\\u7684\\u5143\\u7D20\\uFF0CReact \\u6700\\u5C0F\\u5316\\u4E86\\u6602\\u8D35\\u7684 DOM \\u64CD\\u4F5C\\uFF0C\\u4ECE\\u800C\\u663E\\u7740\\u63D0\\u9AD8\\u4E86\\u6027\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"3. \\u5927\\u578B\\u4E14\\u6D3B\\u8DC3\\u7684\\u793E\\u533A\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u62E5\\u6709\\u5E9E\\u5927\\u800C\\u6D3B\\u8DC3\\u7684\\u5168\\u7403\\u5F00\\u53D1\\u4EBA\\u5458\\u793E\\u533A\\u3002 \\u8FD9\\u8F6C\\u5316\\u4E3A\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5E7F\\u6CDB\\u7684\\u6587\\u6863\\u548C\\u8D44\\u6E90\"}),\"\\uFF1A\\u67E5\\u627E\\u5168\\u9762\\u7684\\u6587\\u6863\\u3001\\u6559\\u7A0B\\u548C\\u793E\\u533A\\u9A71\\u52A8\\u7684\\u8D44\\u6E90\\uFF0C\\u4EE5\\u5E2E\\u52A9\\u60A8\\u7684\\u5B66\\u4E60\\u548C\\u5F00\\u53D1\\u8FC7\\u7A0B\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E30\\u5BCC\\u7684\\u7B2C\\u4E09\\u65B9\\u5E93\\u548C\\u5DE5\\u5177\"}),\"\\uFF1A\\u5229\\u7528\\u4E30\\u5BCC\\u7684\\u9884\\u6784\\u5EFA\\u7EC4\\u4EF6\\u3001\\u5E93\\u548C\\u5DE5\\u5177\\u751F\\u6001\\u7CFB\\u7EDF\\uFF0C\\u8FD9\\u4E9B\\u751F\\u6001\\u7CFB\\u7EDF\\u6269\\u5C55\\u4E86 React \\u7684\\u529F\\u80FD\\u5E76\\u7B80\\u5316\\u4E86\\u5F00\\u53D1\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5F3A\\u5927\\u7684\\u793E\\u533A\\u652F\\u6301\"}),\"\\uFF1A\\u901A\\u8FC7\\u8BBA\\u575B\\u3001\\u5728\\u7EBF\\u793E\\u533A\\u548C\\u805A\\u4F1A\\u5BFB\\u6C42\\u5E2E\\u52A9\\u3001\\u5206\\u4EAB\\u77E5\\u8BC6\\u5E76\\u4E0E\\u540C\\u884C\\u5F00\\u53D1\\u4EBA\\u5458\\u4E92\\u52A8\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"4. \\u4E00\\u6B21\\u5B66\\u4E60\\uFF0C\\u968F\\u5904\\u7F16\\u5199\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u7684\\u591A\\u529F\\u80FD\\u6027\\u8D85\\u51FA\\u4E86 Web \\u5F00\\u53D1\\u7684\\u8303\\u56F4\\u3002 \\u4F7F\\u7528 React Native\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u60A8\\u7684 React \\u77E5\\u8BC6\\u4E3A iOS \\u548C Android \\u6784\\u5EFA\\u539F\\u751F\\u79FB\\u52A8\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002 \\u8FD9\\u79CD\\u201C\\u4E00\\u6B21\\u5B66\\u4E60\\uFF0C\\u968F\\u5904\\u7F16\\u5199\\u201D\\u7684\\u65B9\\u6CD5\\u5141\\u8BB8\\u60A8\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5728\\u5E73\\u53F0\\u4E4B\\u95F4\\u5171\\u4EAB\\u4EE3\\u7801\"}),\"\\uFF1A\\u5728 Web \\u548C\\u79FB\\u52A8\\u8BBE\\u5907\\u4E4B\\u95F4\\u91CD\\u7528\\u7EC4\\u4EF6\\u548C\\u903B\\u8F91\\uFF0C\\u4ECE\\u800C\\u51CF\\u5C11\\u5F00\\u53D1\\u65F6\\u95F4\\u548C\\u7CBE\\u529B\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5229\\u7528\\u73B0\\u6709\\u6280\\u80FD\"}),\"\\uFF1A\\u5C06\\u60A8\\u7684 React \\u4E13\\u4E1A\\u77E5\\u8BC6\\u5E94\\u7528\\u4E8E\\u79FB\\u52A8\\u5F00\\u53D1\\uFF0C\\u800C\\u65E0\\u9700\\u5B66\\u4E60\\u5168\\u65B0\\u7684\\u6280\\u672F\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F7F\\u7528\\u5355\\u4E2A\\u4EE3\\u7801\\u5E93\\u5B9A\\u4F4D\\u591A\\u4E2A\\u5E73\\u53F0\"}),\"\\uFF1A\\u901A\\u8FC7\\u4E3A\\u591A\\u4E2A\\u5E73\\u53F0\\u7BA1\\u7406\\u5355\\u4E2A\\u4EE3\\u7801\\u5E93\\u6765\\u7B80\\u5316\\u5F00\\u53D1\\u548C\\u7EF4\\u62A4\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"React \\u5B98\\u65B9\\u7F51\\u7AD9\\uFF1A\"}),\" \",(0,e.jsx)(n.a,{href:\"https://react.dev/\",children:\"https://react.dev/\"})]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"React \\u6587\\u6863\\uFF1A\"}),\" \",(0,e.jsx)(n.a,{href:\"https://react.dev/learn\",children:\"https://react.dev/learn\"})]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"React \\u535A\\u5BA2\\uFF1A\"}),\" \",(0,e.jsx)(n.a,{href:\"https://react.dev/blog\",children:\"https://react.dev/blog\"})]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"React Native\\uFF1A\"}),\" \",(0,e.jsx)(n.a,{href:\"https://reactnative.dev/\",children:\"https://reactnative.dev/\"})]}),`\n`]})]})}function s(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(o,{...r})}):o(r)}return O(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach/en-US.json
index bab400e26..f91cbbe07 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),w=(n,e)=>{for(var i in e)a(n,i,{get:e[i],enumerable:!0})},o=(n,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of m(e))!g.call(n,t)&&t!==i&&a(n,t,{get:()=>e[t],enumerable:!(s=p(e,t))||s.enumerable});return n};var v=(n,e,i)=>(i=n!=null?d(u(n)):{},o(e||!n||!n.__esModule?a(i,\"default\",{value:n,enumerable:!0}):i,n)),k=n=>o(a({},\"__esModule\",{value:!0}),n);var h=b((I,c)=>{c.exports=_jsx_runtime});var y={};w(y,{default:()=>F,frontmatter:()=>f});var r=v(h()),f={title:\"What is React Fiber and how is it an improvement over the previous approach?\"};function l(n){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsx)(e.p,{children:\"React Fiber is a complete rewrite of React's reconciliation algorithm, introduced in React 16. It improves the rendering process by breaking down rendering work into smaller units, allowing React to pause and resume work, which makes the UI more responsive. This approach enables features like time slicing and suspense, which were not possible with the previous stack-based algorithm.\"}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsx)(e.h2,{children:\"What is React Fiber and how is it an improvement over the previous approach?\"}),`\n`,(0,r.jsx)(e.h3,{children:\"Introduction to React Fiber\"}),`\n`,(0,r.jsx)(e.p,{children:\"React Fiber is a reimplementation of React's core algorithm for rendering and reconciliation. It was introduced in React 16 to address limitations in the previous stack-based algorithm. The primary goal of Fiber is to enable incremental rendering of the virtual DOM, which allows React to split rendering work into chunks and spread it out over multiple frames.\"}),`\n`,(0,r.jsx)(e.h3,{children:\"Key improvements over the previous approach\"}),`\n`,(0,r.jsx)(e.h4,{children:\"Incremental rendering\"}),`\n`,(0,r.jsx)(e.p,{children:'The previous stack-based algorithm processed updates in a single, synchronous pass, which could lead to performance issues, especially with complex UIs. React Fiber breaks down rendering work into smaller units called \"fibers,\" allowing React to pause and resume work. This makes the UI more responsive and prevents blocking the main thread for long periods.'}),`\n`,(0,r.jsx)(e.h4,{children:\"Time slicing\"}),`\n`,(0,r.jsx)(e.p,{children:\"React Fiber introduces the concept of time slicing, which allows React to prioritize updates based on their urgency. For example, user interactions like clicks and key presses can be prioritized over less critical updates. This ensures that the UI remains responsive even during heavy rendering tasks.\"}),`\n`,(0,r.jsx)(e.h4,{children:\"Concurrency\"}),`\n`,(0,r.jsx)(e.p,{children:\"With Fiber, React can work on multiple tasks concurrently. This means that React can start rendering updates while still processing other tasks, leading to a smoother and more responsive user experience.\"}),`\n`,(0,r.jsx)(e.h4,{children:\"Error boundaries\"}),`\n`,(0,r.jsx)(e.p,{children:\"React Fiber introduced error boundaries, which allow developers to catch and handle errors in the component tree gracefully. This was not possible with the previous stack-based algorithm, where errors could cause the entire application to crash.\"}),`\n`,(0,r.jsx)(e.h4,{children:\"Improved support for animations\"}),`\n`,(0,r.jsx)(e.p,{children:\"Fiber's incremental rendering and time slicing capabilities make it easier to implement smooth animations and transitions. React can now prioritize animation frames and ensure that they are rendered in a timely manner, leading to a better user experience.\"}),`\n`,(0,r.jsx)(e.h3,{children:\"Code example\"}),`\n`,(0,r.jsx)(e.p,{children:\"Here's a simple example to illustrate how React Fiber improves rendering performance:\"}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-jsx\",children:`class MyComponent extends React.Component {\n  state = {\n    items: Array.from({ length: 10000 }, (_, i) => i),\n  };\n\n  render() {\n    return (\n      <div>\n        {this.state.items.map((item) => (\n          <div key={item}>{item}</div>\n        ))}\n      </div>\n    );\n  }\n}\n`})}),`\n`,(0,r.jsx)(e.p,{children:\"With the previous stack-based algorithm, rendering this component could cause the UI to freeze. With React Fiber, the rendering work is broken down into smaller units, allowing React to pause and resume work, keeping the UI responsive.\"}),`\n`,(0,r.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://github.com/acdlite/react-fiber-architecture\",children:\"React Fiber Architecture\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://react.dev/blog/2022/03/29/react-v18#gradually-adopting-concurrent-features\",children:\"React Blog: Concurrent Features\"})}),`\n`]})]})}function R(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,Object.assign({},n,{children:(0,r.jsx)(l,n)})):l(n)}var F=R;return k(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var i in e)a(n,i,{get:e[i],enumerable:!0})},s=(n,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of u(e))!b.call(n,t)&&t!==i&&a(n,t,{get:()=>e[t],enumerable:!(o=m(e,t))||o.enumerable});return n};var k=(n,e,i)=>(i=n!=null?p(g(n)):{},s(e||!n||!n.__esModule?a(i,\"default\",{value:n,enumerable:!0}):i,n)),f=n=>s(a({},\"__esModule\",{value:!0}),n);var h=w((x,c)=>{c.exports=_jsx_runtime});var F={};v(F,{default:()=>d,frontmatter:()=>R});var r=k(h()),R={title:\"What is React Fiber and how is it an improvement over the previous approach?\"};function l(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsx)(e.p,{children:\"React Fiber is a complete rewrite of React's reconciliation algorithm, introduced in React 16. It improves the rendering process by breaking down rendering work into smaller units, allowing React to pause and resume work, which makes the UI more responsive. This approach enables features like time slicing and suspense, which were not possible with the previous stack-based algorithm.\"}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsx)(e.h2,{children:\"What is React Fiber and how is it an improvement over the previous approach?\"}),`\n`,(0,r.jsx)(e.h3,{children:\"Introduction to React Fiber\"}),`\n`,(0,r.jsx)(e.p,{children:\"React Fiber is a re-implementation of React's core algorithm for rendering and reconciliation. It was introduced in React 16 to address limitations in the previous stack-based algorithm. The primary goal of Fiber is to enable incremental rendering of the virtual DOM, which allows React to split rendering work into chunks and spread it out over multiple frames.\"}),`\n`,(0,r.jsx)(e.h3,{children:\"Key improvements over the previous approach\"}),`\n`,(0,r.jsx)(e.h4,{children:\"Incremental rendering\"}),`\n`,(0,r.jsx)(e.p,{children:'The previous stack-based algorithm processed updates in a single, synchronous pass, which could lead to performance issues, especially with complex UIs. React Fiber breaks down rendering work into smaller units called \"fibers\", allowing React to pause and resume work. This makes the UI more responsive and prevents blocking the main thread for long periods.'}),`\n`,(0,r.jsx)(e.h4,{children:\"Time slicing\"}),`\n`,(0,r.jsx)(e.p,{children:\"React Fiber introduces the concept of time slicing, which allows React to prioritize updates based on their urgency. For example, user interactions like clicks and key presses can be prioritized over less critical updates. This ensures that the UI remains responsive even during heavy rendering tasks.\"}),`\n`,(0,r.jsx)(e.h4,{children:\"Concurrency\"}),`\n`,(0,r.jsx)(e.p,{children:\"With Fiber, React can work on multiple tasks concurrently. This means that React can start rendering updates while still processing other tasks, leading to a smoother and more responsive user experience.\"}),`\n`,(0,r.jsx)(e.h4,{children:\"Error boundaries\"}),`\n`,(0,r.jsx)(e.p,{children:\"React Fiber introduced error boundaries, which allow developers to catch and handle errors in the component tree gracefully. This was not possible with the previous stack-based algorithm, where errors could cause the entire application to crash.\"}),`\n`,(0,r.jsx)(e.h4,{children:\"Improved support for animations\"}),`\n`,(0,r.jsx)(e.p,{children:\"Fiber's incremental rendering and time slicing capabilities make it easier to implement smooth animations and transitions. React can now prioritize animation frames and ensure that they are rendered in a timely manner, leading to a better user experience.\"}),`\n`,(0,r.jsx)(e.h3,{children:\"Code example\"}),`\n`,(0,r.jsx)(e.p,{children:\"Here's a simple example to illustrate how React Fiber improves rendering performance:\"}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-jsx\",children:`class MyComponent extends React.Component {\n  state = {\n    items: Array.from({ length: 10000 }, (_, i) => i),\n  };\n\n  render() {\n    return (\n      <div>\n        {this.state.items.map((item) => (\n          <div key={item}>{item}</div>\n        ))}\n      </div>\n    );\n  }\n}\n`})}),`\n`,(0,r.jsx)(e.p,{children:\"With the previous stack-based algorithm, rendering this component could cause the UI to freeze. With React Fiber, the rendering work is broken down into smaller units, allowing React to pause and resume work, keeping the UI responsive.\"}),`\n`,(0,r.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://github.com/acdlite/react-fiber-architecture\",children:\"React Fiber Architecture\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://react.dev/blog/2022/03/29/react-v18#gradually-adopting-concurrent-features\",children:\"React Blog: Concurrent Features\"})}),`\n`]})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(l,{...n})}):l(n)}return f(F);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach/zh-CN.json
index 424a4b058..9fa0dc0a3 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var o=Object.create;var i=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),F=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},h=(t,e,r,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!b.call(t,c)&&c!==r&&i(t,c,{get:()=>e[c],enumerable:!(a=R(e,c))||a.enumerable});return t};var g=(t,e,r)=>(r=t!=null?o(u(t)):{},h(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),f=t=>h(i({},\"__esModule\",{value:!0}),t);var d=m((U,l)=>{l.exports=_jsx_runtime});var v={};F(v,{default:()=>_,frontmatter:()=>x});var n=g(d()),x={title:\"\\u4EC0\\u4E48\\u662F React Fiber\\uFF1F\\u4E0E\\u4E4B\\u524D\\u7684\\u65B9\\u6848\\u76F8\\u6BD4\\uFF0C\\u5B83\\u6709\\u54EA\\u4E9B\\u6539\\u8FDB\\uFF1F\"};function s(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",code:\"code\",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.jsx)(e.p,{children:\"React Fiber \\u662F\\u5BF9 React \\u6E32\\u67D3\\u7B97\\u6CD5\\u7684\\u5B8C\\u5168\\u91CD\\u5199\\uFF0C\\u5728 React 16 \\u4E2D\\u5F15\\u5165\\u3002\\u5B83\\u901A\\u8FC7\\u5C06\\u6E32\\u67D3\\u5DE5\\u4F5C\\u5206\\u89E3\\u6210\\u66F4\\u5C0F\\u7684\\u5355\\u5143\\u6765\\u6539\\u8FDB\\u6E32\\u67D3\\u8FC7\\u7A0B\\uFF0C\\u5141\\u8BB8 React \\u6682\\u505C\\u548C\\u6062\\u590D\\u5DE5\\u4F5C\\uFF0C\\u4ECE\\u800C\\u4F7F UI \\u5177\\u6709\\u66F4\\u9AD8\\u7684\\u54CD\\u5E94\\u901F\\u5EA6\\u3002\\u8FD9\\u79CD\\u65B9\\u6CD5\\u652F\\u6301\\u65F6\\u95F4\\u5207\\u7247\\u548C Suspense \\u7B49\\u529F\\u80FD\\uFF0C\\u800C\\u8FD9\\u4E9B\\u529F\\u80FD\\u5728\\u4E4B\\u524D\\u7684\\u57FA\\u4E8E\\u5806\\u6808\\u7684\\u7B97\\u6CD5\\u4E2D\\u662F\\u4E0D\\u53EF\\u80FD\\u5B9E\\u73B0\\u7684\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F React Fiber\\uFF1F\\u4E0E\\u4E4B\\u524D\\u7684\\u65B9\\u6848\\u76F8\\u6BD4\\uFF0C\\u5B83\\u6709\\u54EA\\u4E9B\\u6539\\u8FDB\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"React Fiber \\u7B80\\u4ECB\"}),`\n`,(0,n.jsx)(e.p,{children:\"React Fiber \\u662F\\u5BF9 React \\u6E32\\u67D3\\u548C\\u534F\\u8C03\\u7684\\u6838\\u5FC3\\u7B97\\u6CD5\\u7684\\u91CD\\u65B0\\u5B9E\\u73B0\\u3002\\u5B83\\u5728 React 16 \\u4E2D\\u5F15\\u5165\\uFF0C\\u7528\\u4E8E\\u89E3\\u51B3\\u4E4B\\u524D\\u57FA\\u4E8E\\u5806\\u6808\\u7684\\u7B97\\u6CD5\\u7684\\u5C40\\u9650\\u6027\\u3002Fiber \\u7684\\u4E3B\\u8981\\u76EE\\u6807\\u662F\\u5B9E\\u73B0\\u865A\\u62DF DOM \\u7684\\u589E\\u91CF\\u6E32\\u67D3\\uFF0C\\u8FD9\\u4F7F\\u5F97 React \\u53EF\\u4EE5\\u5C06\\u6E32\\u67D3\\u5DE5\\u4F5C\\u5206\\u6210\\u5757\\u5E76\\u5728\\u591A\\u4E2A\\u5E27\\u4E2D\\u5C55\\u5F00\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E0E\\u4E4B\\u524D\\u7684\\u65B9\\u6848\\u76F8\\u6BD4\\u7684\\u4E3B\\u8981\\u6539\\u8FDB\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u589E\\u91CF\\u6E32\\u67D3\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E4B\\u524D\\u7684\\u57FA\\u4E8E\\u5806\\u6808\\u7684\\u7B97\\u6CD5\\u5728\\u4E00\\u4E2A\\u540C\\u6B65\\u8FC7\\u7A0B\\u4E2D\\u5904\\u7406\\u66F4\\u65B0\\uFF0C\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u6027\\u80FD\\u95EE\\u9898\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u590D\\u6742\\u7684 UI \\u4E2D\\u3002React Fiber \\u5C06\\u6E32\\u67D3\\u5DE5\\u4F5C\\u5206\\u89E3\\u6210\\u66F4\\u5C0F\\u7684\\u5355\\u5143\\uFF0C\\u79F0\\u4E3A\\u201Cfiber\\u201D\\uFF0C\\u5141\\u8BB8 React \\u6682\\u505C\\u548C\\u6062\\u590D\\u5DE5\\u4F5C\\u3002\\u8FD9\\u4F7F\\u5F97 UI \\u5177\\u6709\\u66F4\\u9AD8\\u7684\\u54CD\\u5E94\\u901F\\u5EA6\\uFF0C\\u5E76\\u9632\\u6B62\\u957F\\u65F6\\u95F4\\u963B\\u585E\\u4E3B\\u7EBF\\u7A0B\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u65F6\\u95F4\\u5207\\u7247\"}),`\n`,(0,n.jsx)(e.p,{children:\"React Fiber \\u5F15\\u5165\\u4E86\\u65F6\\u95F4\\u5207\\u7247\\u7684\\u6982\\u5FF5\\uFF0C\\u5B83\\u5141\\u8BB8 React \\u6839\\u636E\\u66F4\\u65B0\\u7684\\u7D27\\u6025\\u7A0B\\u5EA6\\u5BF9\\u5176\\u8FDB\\u884C\\u4F18\\u5148\\u7EA7\\u6392\\u5E8F\\u3002\\u4F8B\\u5982\\uFF0C\\u7528\\u6237\\u4EA4\\u4E92\\uFF08\\u5982\\u70B9\\u51FB\\u548C\\u6309\\u952E\\uFF09\\u53EF\\u4EE5\\u4F18\\u5148\\u4E8E\\u4E0D\\u592A\\u5173\\u952E\\u7684\\u66F4\\u65B0\\u3002\\u8FD9\\u786E\\u4FDD\\u4E86\\u5373\\u4F7F\\u5728\\u7E41\\u91CD\\u7684\\u6E32\\u67D3\\u4EFB\\u52A1\\u671F\\u95F4\\uFF0CUI \\u4E5F\\u80FD\\u4FDD\\u6301\\u54CD\\u5E94\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u5E76\\u53D1\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4F7F\\u7528 Fiber\\uFF0CReact \\u53EF\\u4EE5\\u540C\\u65F6\\u5904\\u7406\\u591A\\u4E2A\\u4EFB\\u52A1\\u3002\\u8FD9\\u610F\\u5473\\u7740 React \\u53EF\\u4EE5\\u5728\\u5904\\u7406\\u5176\\u4ED6\\u4EFB\\u52A1\\u7684\\u540C\\u65F6\\u5F00\\u59CB\\u6E32\\u67D3\\u66F4\\u65B0\\uFF0C\\u4ECE\\u800C\\u5E26\\u6765\\u66F4\\u6D41\\u7545\\u3001\\u66F4\\u5177\\u54CD\\u5E94\\u6027\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u9519\\u8BEF\\u8FB9\\u754C\"}),`\n`,(0,n.jsx)(e.p,{children:\"React Fiber \\u5F15\\u5165\\u4E86\\u9519\\u8BEF\\u8FB9\\u754C\\uFF0C\\u5141\\u8BB8\\u5F00\\u53D1\\u4EBA\\u5458\\u4F18\\u96C5\\u5730\\u6355\\u83B7\\u548C\\u5904\\u7406\\u7EC4\\u4EF6\\u6811\\u4E2D\\u7684\\u9519\\u8BEF\\u3002\\u8FD9\\u5728\\u4E4B\\u524D\\u7684\\u57FA\\u4E8E\\u5806\\u6808\\u7684\\u7B97\\u6CD5\\u4E2D\\u662F\\u4E0D\\u53EF\\u80FD\\u7684\\uFF0C\\u5728\\u4E4B\\u524D\\u7684\\u7B97\\u6CD5\\u4E2D\\uFF0C\\u9519\\u8BEF\\u53EF\\u80FD\\u5BFC\\u81F4\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u5D29\\u6E83\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u6539\\u8FDB\\u7684\\u52A8\\u753B\\u652F\\u6301\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fiber \\u7684\\u589E\\u91CF\\u6E32\\u67D3\\u548C\\u65F6\\u95F4\\u5207\\u7247\\u529F\\u80FD\\u4F7F\\u5F97\\u5B9E\\u73B0\\u6D41\\u7545\\u7684\\u52A8\\u753B\\u548C\\u8FC7\\u6E21\\u53D8\\u5F97\\u66F4\\u5BB9\\u6613\\u3002React \\u73B0\\u5728\\u53EF\\u4EE5\\u4F18\\u5148\\u8003\\u8651\\u52A8\\u753B\\u5E27\\u5E76\\u786E\\u4FDD\\u53CA\\u65F6\\u6E32\\u67D3\\u5B83\\u4EEC\\uFF0C\\u4ECE\\u800C\\u5E26\\u6765\\u66F4\\u597D\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EE3\\u7801\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD9\\u91CC\\u6709\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u4F8B\\u5B50\\u6765\\u8BF4\\u660E React Fiber \\u5982\\u4F55\\u63D0\\u9AD8\\u6E32\\u67D3\\u6027\\u80FD\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`class MyComponent extends React.Component {\n  state = {\n    items: Array.from({ length: 10000 }, (_, i) => i),\n  };\n\n  render() {\n    return (\n      <div>\n        {this.state.items.map((item) => (\n          <div key={item}>{item}</div>\n        ))}\n      </div>\n    );\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4F7F\\u7528\\u4E4B\\u524D\\u7684\\u57FA\\u4E8E\\u5806\\u6808\\u7684\\u7B97\\u6CD5\\uFF0C\\u6E32\\u67D3\\u6B64\\u7EC4\\u4EF6\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4 UI \\u51BB\\u7ED3\\u3002\\u4F7F\\u7528 React Fiber\\uFF0C\\u6E32\\u67D3\\u5DE5\\u4F5C\\u88AB\\u5206\\u89E3\\u6210\\u66F4\\u5C0F\\u7684\\u5355\\u5143\\uFF0C\\u5141\\u8BB8 React \\u6682\\u505C\\u548C\\u6062\\u590D\\u5DE5\\u4F5C\\uFF0C\\u4FDD\\u6301 UI \\u7684\\u54CD\\u5E94\\u6027\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/acdlite/react-fiber-architecture\",children:\"React Fiber Architecture\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/blog/2022/03/29/react-v18#gradually-adopting-concurrent-features\",children:\"React Blog: Concurrent Features\"})}),`\n`]})]})}function j(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(s,t)})):s(t)}var _=j;return f(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var R=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var F=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var t in e)i(r,t,{get:e[t],enumerable:!0})},h=(r,e,t,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of u(e))!b.call(r,c)&&c!==t&&i(r,c,{get:()=>e[c],enumerable:!(a=p(e,c))||a.enumerable});return r};var x=(r,e,t)=>(t=r!=null?R(m(r)):{},h(e||!r||!r.__esModule?i(t,\"default\",{value:r,enumerable:!0}):t,r)),g=r=>h(i({},\"__esModule\",{value:!0}),r);var d=F((I,l)=>{l.exports=_jsx_runtime});var j={};f(j,{default:()=>s,frontmatter:()=>_});var n=x(d()),_={title:\"\\u4EC0\\u4E48\\u662F React Fiber\\uFF1F\\u4E0E\\u4E4B\\u524D\\u7684\\u65B9\\u6848\\u76F8\\u6BD4\\uFF0C\\u5B83\\u6709\\u54EA\\u4E9B\\u6539\\u8FDB\\uFF1F\"};function o(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"React Fiber \\u662F\\u5BF9 React \\u6E32\\u67D3\\u7B97\\u6CD5\\u7684\\u5B8C\\u5168\\u91CD\\u5199\\uFF0C\\u5728 React 16 \\u4E2D\\u5F15\\u5165\\u3002\\u5B83\\u901A\\u8FC7\\u5C06\\u6E32\\u67D3\\u5DE5\\u4F5C\\u5206\\u89E3\\u6210\\u66F4\\u5C0F\\u7684\\u5355\\u5143\\u6765\\u6539\\u8FDB\\u6E32\\u67D3\\u8FC7\\u7A0B\\uFF0C\\u5141\\u8BB8 React \\u6682\\u505C\\u548C\\u6062\\u590D\\u5DE5\\u4F5C\\uFF0C\\u4ECE\\u800C\\u4F7F UI \\u5177\\u6709\\u66F4\\u9AD8\\u7684\\u54CD\\u5E94\\u901F\\u5EA6\\u3002\\u8FD9\\u79CD\\u65B9\\u6CD5\\u652F\\u6301\\u65F6\\u95F4\\u5207\\u7247\\u548C Suspense \\u7B49\\u529F\\u80FD\\uFF0C\\u800C\\u8FD9\\u4E9B\\u529F\\u80FD\\u5728\\u4E4B\\u524D\\u7684\\u57FA\\u4E8E\\u5806\\u6808\\u7684\\u7B97\\u6CD5\\u4E2D\\u662F\\u4E0D\\u53EF\\u80FD\\u5B9E\\u73B0\\u7684\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F React Fiber\\uFF1F\\u4E0E\\u4E4B\\u524D\\u7684\\u65B9\\u6848\\u76F8\\u6BD4\\uFF0C\\u5B83\\u6709\\u54EA\\u4E9B\\u6539\\u8FDB\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"React Fiber \\u7B80\\u4ECB\"}),`\n`,(0,n.jsx)(e.p,{children:\"React Fiber \\u662F\\u5BF9 React \\u6E32\\u67D3\\u548C\\u534F\\u8C03\\u7684\\u6838\\u5FC3\\u7B97\\u6CD5\\u7684\\u91CD\\u65B0\\u5B9E\\u73B0\\u3002\\u5B83\\u5728 React 16 \\u4E2D\\u5F15\\u5165\\uFF0C\\u7528\\u4E8E\\u89E3\\u51B3\\u4E4B\\u524D\\u57FA\\u4E8E\\u5806\\u6808\\u7684\\u7B97\\u6CD5\\u7684\\u5C40\\u9650\\u6027\\u3002Fiber \\u7684\\u4E3B\\u8981\\u76EE\\u6807\\u662F\\u5B9E\\u73B0\\u865A\\u62DF DOM \\u7684\\u589E\\u91CF\\u6E32\\u67D3\\uFF0C\\u8FD9\\u4F7F\\u5F97 React \\u53EF\\u4EE5\\u5C06\\u6E32\\u67D3\\u5DE5\\u4F5C\\u5206\\u6210\\u5757\\u5E76\\u5728\\u591A\\u4E2A\\u5E27\\u4E2D\\u5C55\\u5F00\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E0E\\u4E4B\\u524D\\u7684\\u65B9\\u6848\\u76F8\\u6BD4\\u7684\\u4E3B\\u8981\\u6539\\u8FDB\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u589E\\u91CF\\u6E32\\u67D3\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E4B\\u524D\\u7684\\u57FA\\u4E8E\\u5806\\u6808\\u7684\\u7B97\\u6CD5\\u5728\\u4E00\\u4E2A\\u540C\\u6B65\\u8FC7\\u7A0B\\u4E2D\\u5904\\u7406\\u66F4\\u65B0\\uFF0C\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u6027\\u80FD\\u95EE\\u9898\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u590D\\u6742\\u7684 UI \\u4E2D\\u3002React Fiber \\u5C06\\u6E32\\u67D3\\u5DE5\\u4F5C\\u5206\\u89E3\\u6210\\u66F4\\u5C0F\\u7684\\u5355\\u5143\\uFF0C\\u79F0\\u4E3A\\u201Cfiber\\u201D\\uFF0C\\u5141\\u8BB8 React \\u6682\\u505C\\u548C\\u6062\\u590D\\u5DE5\\u4F5C\\u3002\\u8FD9\\u4F7F\\u5F97 UI \\u5177\\u6709\\u66F4\\u9AD8\\u7684\\u54CD\\u5E94\\u901F\\u5EA6\\uFF0C\\u5E76\\u9632\\u6B62\\u957F\\u65F6\\u95F4\\u963B\\u585E\\u4E3B\\u7EBF\\u7A0B\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u65F6\\u95F4\\u5207\\u7247\"}),`\n`,(0,n.jsx)(e.p,{children:\"React Fiber \\u5F15\\u5165\\u4E86\\u65F6\\u95F4\\u5207\\u7247\\u7684\\u6982\\u5FF5\\uFF0C\\u5B83\\u5141\\u8BB8 React \\u6839\\u636E\\u66F4\\u65B0\\u7684\\u7D27\\u6025\\u7A0B\\u5EA6\\u5BF9\\u5176\\u8FDB\\u884C\\u4F18\\u5148\\u7EA7\\u6392\\u5E8F\\u3002\\u4F8B\\u5982\\uFF0C\\u7528\\u6237\\u4EA4\\u4E92\\uFF08\\u5982\\u70B9\\u51FB\\u548C\\u6309\\u952E\\uFF09\\u53EF\\u4EE5\\u4F18\\u5148\\u4E8E\\u4E0D\\u592A\\u5173\\u952E\\u7684\\u66F4\\u65B0\\u3002\\u8FD9\\u786E\\u4FDD\\u4E86\\u5373\\u4F7F\\u5728\\u7E41\\u91CD\\u7684\\u6E32\\u67D3\\u4EFB\\u52A1\\u671F\\u95F4\\uFF0CUI \\u4E5F\\u80FD\\u4FDD\\u6301\\u54CD\\u5E94\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u5E76\\u53D1\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4F7F\\u7528 Fiber\\uFF0CReact \\u53EF\\u4EE5\\u540C\\u65F6\\u5904\\u7406\\u591A\\u4E2A\\u4EFB\\u52A1\\u3002\\u8FD9\\u610F\\u5473\\u7740 React \\u53EF\\u4EE5\\u5728\\u5904\\u7406\\u5176\\u4ED6\\u4EFB\\u52A1\\u7684\\u540C\\u65F6\\u5F00\\u59CB\\u6E32\\u67D3\\u66F4\\u65B0\\uFF0C\\u4ECE\\u800C\\u5E26\\u6765\\u66F4\\u6D41\\u7545\\u3001\\u66F4\\u5177\\u54CD\\u5E94\\u6027\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u9519\\u8BEF\\u8FB9\\u754C\"}),`\n`,(0,n.jsx)(e.p,{children:\"React Fiber \\u5F15\\u5165\\u4E86\\u9519\\u8BEF\\u8FB9\\u754C\\uFF0C\\u5141\\u8BB8\\u5F00\\u53D1\\u4EBA\\u5458\\u4F18\\u96C5\\u5730\\u6355\\u83B7\\u548C\\u5904\\u7406\\u7EC4\\u4EF6\\u6811\\u4E2D\\u7684\\u9519\\u8BEF\\u3002\\u8FD9\\u5728\\u4E4B\\u524D\\u7684\\u57FA\\u4E8E\\u5806\\u6808\\u7684\\u7B97\\u6CD5\\u4E2D\\u662F\\u4E0D\\u53EF\\u80FD\\u7684\\uFF0C\\u5728\\u4E4B\\u524D\\u7684\\u7B97\\u6CD5\\u4E2D\\uFF0C\\u9519\\u8BEF\\u53EF\\u80FD\\u5BFC\\u81F4\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u5D29\\u6E83\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u6539\\u8FDB\\u7684\\u52A8\\u753B\\u652F\\u6301\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fiber \\u7684\\u589E\\u91CF\\u6E32\\u67D3\\u548C\\u65F6\\u95F4\\u5207\\u7247\\u529F\\u80FD\\u4F7F\\u5F97\\u5B9E\\u73B0\\u6D41\\u7545\\u7684\\u52A8\\u753B\\u548C\\u8FC7\\u6E21\\u53D8\\u5F97\\u66F4\\u5BB9\\u6613\\u3002React \\u73B0\\u5728\\u53EF\\u4EE5\\u4F18\\u5148\\u8003\\u8651\\u52A8\\u753B\\u5E27\\u5E76\\u786E\\u4FDD\\u53CA\\u65F6\\u6E32\\u67D3\\u5B83\\u4EEC\\uFF0C\\u4ECE\\u800C\\u5E26\\u6765\\u66F4\\u597D\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EE3\\u7801\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD9\\u91CC\\u6709\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u4F8B\\u5B50\\u6765\\u8BF4\\u660E React Fiber \\u5982\\u4F55\\u63D0\\u9AD8\\u6E32\\u67D3\\u6027\\u80FD\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`class MyComponent extends React.Component {\n  state = {\n    items: Array.from({ length: 10000 }, (_, i) => i),\n  };\n\n  render() {\n    return (\n      <div>\n        {this.state.items.map((item) => (\n          <div key={item}>{item}</div>\n        ))}\n      </div>\n    );\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4F7F\\u7528\\u4E4B\\u524D\\u7684\\u57FA\\u4E8E\\u5806\\u6808\\u7684\\u7B97\\u6CD5\\uFF0C\\u6E32\\u67D3\\u6B64\\u7EC4\\u4EF6\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4 UI \\u51BB\\u7ED3\\u3002\\u4F7F\\u7528 React Fiber\\uFF0C\\u6E32\\u67D3\\u5DE5\\u4F5C\\u88AB\\u5206\\u89E3\\u6210\\u66F4\\u5C0F\\u7684\\u5355\\u5143\\uFF0C\\u5141\\u8BB8 React \\u6682\\u505C\\u548C\\u6062\\u590D\\u5DE5\\u4F5C\\uFF0C\\u4FDD\\u6301 UI \\u7684\\u54CD\\u5E94\\u6027\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/acdlite/react-fiber-architecture\",children:\"React Fiber Architecture\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/blog/2022/03/29/react-v18#gradually-adopting-concurrent-features\",children:\"React Blog: Concurrent Features\"})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(o,{...r})}):o(r)}return g(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-react-strict-mode-and-what-are-its-benefits/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-react-strict-mode-and-what-are-its-benefits/en-US.json
index c759597c7..a5dbad142 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-react-strict-mode-and-what-are-its-benefits/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-react-strict-mode-and-what-are-its-benefits/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-react-strict-mode-and-what-are-its-benefits/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var y=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var i in e)a(n,i,{get:e[i],enumerable:!0})},o=(n,e,i,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!m.call(n,c)&&c!==i&&a(n,c,{get:()=>e[c],enumerable:!(r=u(e,c))||r.enumerable});return n};var R=(n,e,i)=>(i=n!=null?l(f(n)):{},o(e||!n||!n.__esModule?a(i,\"default\",{value:n,enumerable:!0}):i,n)),b=n=>o(a({},\"__esModule\",{value:!0}),n);var d=y((j,s)=>{s.exports=_jsx_runtime});var M={};g(M,{default:()=>I,frontmatter:()=>w});var t=R(d()),w={title:\"What is React strict mode and what are its benefits?\"};function h(n){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",code:\"code\",pre:\"pre\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:\"React strict mode is a development tool that helps identify potential problems in an application. It activates additional checks and warnings for its descendants. It doesn't render any visible UI and doesn't affect the production build. The benefits include identifying unsafe lifecycle methods, warning about legacy string ref API usage, detecting unexpected side effects, and ensuring that components are resilient to future changes.\"}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"What is React strict mode and what are its benefits?\"}),`\n`,(0,t.jsx)(e.h3,{children:\"What is React strict mode?\"}),`\n`,(0,t.jsx)(e.p,{children:\"React strict mode is a feature in React that helps developers identify potential problems in their applications. It is a wrapper component that you can use to wrap parts of your application to enable additional checks and warnings. It does not render any visible UI and does not affect the production build.\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"To use React strict mode, you can wrap your component tree with the \",(0,t.jsx)(e.code,{children:\"StrictMode\"}),\" component:\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-jsx\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root'),\n);\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Benefits of React strict mode\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Identifying unsafe lifecycle methods\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"React strict mode helps identify components that use unsafe lifecycle methods, such as \",(0,t.jsx)(e.code,{children:\"componentWillMount\"}),\", \",(0,t.jsx)(e.code,{children:\"componentWillReceiveProps\"}),\", and \",(0,t.jsx)(e.code,{children:\"componentWillUpdate\"}),\". These methods are considered unsafe because they can lead to bugs and unexpected behavior. React strict mode will warn you if any of your components use these methods.\"]}),`\n`,(0,t.jsx)(e.h4,{children:\"Warning about legacy string ref API usage\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"React strict mode warns you if you are using the legacy string ref API. The string ref API is considered legacy and is not recommended for use in new code. Instead, you should use the callback ref API or the \",(0,t.jsx)(e.code,{children:\"React.createRef\"}),\" API.\"]}),`\n`,(0,t.jsx)(e.h4,{children:\"Detecting unexpected side effects\"}),`\n`,(0,t.jsx)(e.p,{children:\"React strict mode helps detect unexpected side effects by intentionally double-invoking certain lifecycle methods and functions. This helps ensure that your components are resilient to future changes and that they do not rely on side effects that may not always be executed.\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Ensuring components are resilient to future changes\"}),`\n`,(0,t.jsx)(e.p,{children:\"By enabling React strict mode, you can ensure that your components are more resilient to future changes in React. The additional checks and warnings help you identify potential issues early, making it easier to maintain and update your codebase.\"}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/reference/react/StrictMode\",children:\"React Strict Mode Documentation\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/reference/react/Component#adding-lifecycle-methods-to-a-class-component\",children:\"React Lifecycle Methods\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/learn/manipulating-the-dom-with-refs\",children:\"Refs and the DOM\"})}),`\n`]})]})}function x(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var I=x;return b(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),R=(n,e)=>{for(var i in e)a(n,i,{get:e[i],enumerable:!0})},o=(n,e,i,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of f(e))!y.call(n,c)&&c!==i&&a(n,c,{get:()=>e[c],enumerable:!(r=p(e,c))||r.enumerable});return n};var b=(n,e,i)=>(i=n!=null?u(m(n)):{},o(e||!n||!n.__esModule?a(i,\"default\",{value:n,enumerable:!0}):i,n)),w=n=>o(a({},\"__esModule\",{value:!0}),n);var d=g((v,s)=>{s.exports=_jsx_runtime});var I={};R(I,{default:()=>l,frontmatter:()=>x});var t=b(d()),x={title:\"What is React strict mode and what are its benefits?\"};function h(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:\"React strict mode is a development tool that helps identify potential problems in an application. It activates additional checks and warnings for its descendants. It doesn't render any visible UI and doesn't affect the production build. The benefits include identifying unsafe lifecycle methods, warning about legacy string ref API usage, detecting unexpected side effects, and ensuring that components are resilient to future changes.\"}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"What is React strict mode and what are its benefits?\"}),`\n`,(0,t.jsx)(e.h3,{children:\"What is React strict mode?\"}),`\n`,(0,t.jsx)(e.p,{children:\"React strict mode is a feature in React that helps developers identify potential problems in their applications. It is a wrapper component that you can use to wrap parts of your application to enable additional checks and warnings. It does not render any visible UI and does not affect the production build.\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"To use React strict mode, you can wrap your component tree with the \",(0,t.jsx)(e.code,{children:\"StrictMode\"}),\" component:\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-jsx\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root'),\n);\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Benefits of React strict mode\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Identifying unsafe lifecycle methods\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"React strict mode helps identify components that use unsafe lifecycle methods, such as \",(0,t.jsx)(e.code,{children:\"componentWillMount\"}),\", \",(0,t.jsx)(e.code,{children:\"componentWillReceiveProps\"}),\", and \",(0,t.jsx)(e.code,{children:\"componentWillUpdate\"}),\". These methods are considered unsafe because they can lead to bugs and unexpected behavior. React strict mode will warn you if any of your components use these methods.\"]}),`\n`,(0,t.jsx)(e.h4,{children:\"Warning about legacy string ref API usage\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"React strict mode warns you if you are using the legacy string ref API. The string ref API is considered legacy and is not recommended for use in new code. Instead, you should use the callback ref API or the \",(0,t.jsx)(e.code,{children:\"React.createRef\"}),\" API.\"]}),`\n`,(0,t.jsx)(e.h4,{children:\"Detecting unexpected side effects\"}),`\n`,(0,t.jsx)(e.p,{children:\"React strict mode helps detect unexpected side effects by intentionally double-invoking certain lifecycle methods and functions. This helps ensure that your components are resilient to future changes and that they do not rely on side effects that may not always be executed.\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Ensuring components are resilient to future changes\"}),`\n`,(0,t.jsx)(e.p,{children:\"By enabling React strict mode, you can ensure that your components are more resilient to future changes in React. The additional checks and warnings help you identify potential issues early, making it easier to maintain and update your codebase.\"}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/reference/react/StrictMode\",children:\"React Strict Mode Documentation\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/reference/react/Component#adding-lifecycle-methods-to-a-class-component\",children:\"React Lifecycle Methods\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/learn/manipulating-the-dom-with-refs\",children:\"Refs and the DOM\"})}),`\n`]})]})}function l(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(h,{...n})}):h(n)}return w(I);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-react-strict-mode-and-what-are-its-benefits/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-react-strict-mode-and-what-are-its-benefits/zh-CN.json
index 2eaa51601..2b34e8b45 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-react-strict-mode-and-what-are-its-benefits/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-react-strict-mode-and-what-are-its-benefits/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-react-strict-mode-and-what-are-its-benefits/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var u=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),M=(c,e)=>{for(var t in e)i(c,t,{get:e[t],enumerable:!0})},h=(c,e,t,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!f.call(c,r)&&r!==t&&i(c,r,{get:()=>e[r],enumerable:!(d=p(e,r))||d.enumerable});return c};var x=(c,e,t)=>(t=c!=null?s(R(c)):{},h(e||!c||!c.__esModule?i(t,\"default\",{value:c,enumerable:!0}):t,c)),g=c=>h(i({},\"__esModule\",{value:!0}),c);var l=u((_,a)=>{a.exports=_jsx_runtime});var D={};M(D,{default:()=>A,frontmatter:()=>I});var n=x(l()),I={title:\"\\u4EC0\\u4E48\\u662F React \\u4E25\\u683C\\u6A21\\u5F0F\\u4EE5\\u53CA\\u5B83\\u6709\\u4EC0\\u4E48\\u597D\\u5904\\uFF1F\"};function o(c){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",code:\"code\",pre:\"pre\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"React \\u4E25\\u683C\\u6A21\\u5F0F\\u662F\\u4E00\\u4E2A\\u5F00\\u53D1\\u5DE5\\u5177\\uFF0C\\u53EF\\u5E2E\\u52A9\\u8BC6\\u522B\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7684\\u6F5C\\u5728\\u95EE\\u9898\\u3002\\u5B83\\u4E3A\\u5176\\u540E\\u4EE3\\u6FC0\\u6D3B\\u989D\\u5916\\u7684\\u68C0\\u67E5\\u548C\\u8B66\\u544A\\u3002\\u5B83\\u4E0D\\u5448\\u73B0\\u4EFB\\u4F55\\u53EF\\u89C1\\u7684 UI\\uFF0C\\u4E5F\\u4E0D\\u4F1A\\u5F71\\u54CD\\u751F\\u4EA7\\u6784\\u5EFA\\u3002\\u5176\\u597D\\u5904\\u5305\\u62EC\\u8BC6\\u522B\\u4E0D\\u5B89\\u5168\\u7684\\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\\u3001\\u8B66\\u544A\\u65E7\\u7684\\u5B57\\u7B26\\u4E32 ref API \\u7684\\u4F7F\\u7528\\u3001\\u68C0\\u6D4B\\u610F\\u5916\\u7684\\u526F\\u4F5C\\u7528\\u4EE5\\u53CA\\u786E\\u4FDD\\u7EC4\\u4EF6\\u80FD\\u591F\\u9002\\u5E94\\u672A\\u6765\\u7684\\u53D8\\u5316\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F React \\u4E25\\u683C\\u6A21\\u5F0F\\u4EE5\\u53CA\\u5B83\\u6709\\u4EC0\\u4E48\\u597D\\u5904\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EC0\\u4E48\\u662F React \\u4E25\\u683C\\u6A21\\u5F0F\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"React \\u4E25\\u683C\\u6A21\\u5F0F\\u662F React \\u4E2D\\u7684\\u4E00\\u4E2A\\u529F\\u80FD\\uFF0C\\u53EF\\u5E2E\\u52A9\\u5F00\\u53D1\\u4EBA\\u5458\\u8BC6\\u522B\\u5176\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7684\\u6F5C\\u5728\\u95EE\\u9898\\u3002\\u5B83\\u662F\\u4E00\\u4E2A\\u5305\\u88C5\\u7EC4\\u4EF6\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5B83\\u6765\\u5305\\u88C5\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u67D0\\u4E9B\\u90E8\\u5206\\u4EE5\\u542F\\u7528\\u989D\\u5916\\u7684\\u68C0\\u67E5\\u548C\\u8B66\\u544A\\u3002\\u5B83\\u4E0D\\u5448\\u73B0\\u4EFB\\u4F55\\u53EF\\u89C1\\u7684 UI\\uFF0C\\u4E5F\\u4E0D\\u4F1A\\u5F71\\u54CD\\u751F\\u4EA7\\u6784\\u5EFA\\u3002\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u4F7F\\u7528 React \\u4E25\\u683C\\u6A21\\u5F0F\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"StrictMode\"}),\" \\u7EC4\\u4EF6\\u5305\\u88C5\\u60A8\\u7684\\u7EC4\\u4EF6\\u6811\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root'),\n);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"React \\u4E25\\u683C\\u6A21\\u5F0F\\u7684\\u597D\\u5904\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u8BC6\\u522B\\u4E0D\\u5B89\\u5168\\u7684\\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React \\u4E25\\u683C\\u6A21\\u5F0F\\u6709\\u52A9\\u4E8E\\u8BC6\\u522B\\u4F7F\\u7528\\u4E0D\\u5B89\\u5168\\u7684\\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\\u7684\\u7EC4\\u4EF6\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"componentWillMount\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"componentWillReceiveProps\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"componentWillUpdate\"}),\"\\u3002\\u8FD9\\u4E9B\\u65B9\\u6CD5\\u88AB\\u8BA4\\u4E3A\\u662F\\u4E0D\\u5B89\\u5168\\u7684\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u53EF\\u80FD\\u5BFC\\u81F4\\u9519\\u8BEF\\u548C\\u610F\\u5916\\u884C\\u4E3A\\u3002\\u5982\\u679C\\u60A8\\u7684\\u4EFB\\u4F55\\u7EC4\\u4EF6\\u4F7F\\u7528\\u8FD9\\u4E9B\\u65B9\\u6CD5\\uFF0CReact \\u4E25\\u683C\\u6A21\\u5F0F\\u5C06\\u5411\\u60A8\\u53D1\\u51FA\\u8B66\\u544A\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u8B66\\u544A\\u65E7\\u7684\\u5B57\\u7B26\\u4E32 ref API \\u7684\\u4F7F\\u7528\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u60A8\\u6B63\\u5728\\u4F7F\\u7528\\u65E7\\u7684\\u5B57\\u7B26\\u4E32 ref API\\uFF0CReact \\u4E25\\u683C\\u6A21\\u5F0F\\u4F1A\\u5411\\u60A8\\u53D1\\u51FA\\u8B66\\u544A\\u3002\\u5B57\\u7B26\\u4E32 ref API \\u88AB\\u8BA4\\u4E3A\\u662F\\u65E7\\u7684\\uFF0C\\u4E0D\\u5EFA\\u8BAE\\u5728\\u65B0\\u4EE3\\u7801\\u4E2D\\u4F7F\\u7528\\u3002\\u76F8\\u53CD\\uFF0C\\u60A8\\u5E94\\u8BE5\\u4F7F\\u7528\\u56DE\\u8C03 ref API \\u6216 \",(0,n.jsx)(e.code,{children:\"React.createRef\"}),\" API\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u68C0\\u6D4B\\u610F\\u5916\\u7684\\u526F\\u4F5C\\u7528\"}),`\n`,(0,n.jsx)(e.p,{children:\"React \\u4E25\\u683C\\u6A21\\u5F0F\\u901A\\u8FC7\\u6709\\u610F\\u5730\\u53CC\\u91CD\\u8C03\\u7528\\u67D0\\u4E9B\\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\\u548C\\u51FD\\u6570\\u6765\\u5E2E\\u52A9\\u68C0\\u6D4B\\u610F\\u5916\\u7684\\u526F\\u4F5C\\u7528\\u3002\\u8FD9\\u6709\\u52A9\\u4E8E\\u786E\\u4FDD\\u60A8\\u7684\\u7EC4\\u4EF6\\u80FD\\u591F\\u9002\\u5E94\\u672A\\u6765\\u7684\\u53D8\\u5316\\uFF0C\\u5E76\\u4E14\\u5B83\\u4EEC\\u4E0D\\u4F9D\\u8D56\\u4E8E\\u53EF\\u80FD\\u4E0D\\u603B\\u662F\\u6267\\u884C\\u7684\\u526F\\u4F5C\\u7528\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u786E\\u4FDD\\u7EC4\\u4EF6\\u80FD\\u591F\\u9002\\u5E94\\u672A\\u6765\\u7684\\u53D8\\u5316\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u901A\\u8FC7\\u542F\\u7528 React \\u4E25\\u683C\\u6A21\\u5F0F\\uFF0C\\u60A8\\u53EF\\u4EE5\\u786E\\u4FDD\\u60A8\\u7684\\u7EC4\\u4EF6\\u66F4\\u80FD\\u9002\\u5E94 React \\u7684\\u672A\\u6765\\u53D8\\u5316\\u3002\\u989D\\u5916\\u7684\\u68C0\\u67E5\\u548C\\u8B66\\u544A\\u53EF\\u5E2E\\u52A9\\u60A8\\u5C3D\\u65E9\\u8BC6\\u522B\\u6F5C\\u5728\\u95EE\\u9898\\uFF0C\\u4ECE\\u800C\\u66F4\\u5BB9\\u6613\\u7EF4\\u62A4\\u548C\\u66F4\\u65B0\\u60A8\\u7684\\u4EE3\\u7801\\u5E93\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/StrictMode\",children:\"React Strict Mode Documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/Component#adding-lifecycle-methods-to-a-class-component\",children:\"React Lifecycle Methods\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/manipulating-the-dom-with-refs\",children:\"Refs and the DOM\"})}),`\n`]})]})}function j(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(o,c)})):o(c)}var A=j;return g(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var M=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),x=(c,e)=>{for(var t in e)d(c,t,{get:e[t],enumerable:!0})},i=(c,e,t,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of R(e))!u.call(c,r)&&r!==t&&d(c,r,{get:()=>e[r],enumerable:!(h=m(e,r))||h.enumerable});return c};var I=(c,e,t)=>(t=c!=null?s(f(c)):{},i(e||!c||!c.__esModule?d(t,\"default\",{value:c,enumerable:!0}):t,c)),g=c=>i(d({},\"__esModule\",{value:!0}),c);var l=M((_,a)=>{a.exports=_jsx_runtime});var D={};x(D,{default:()=>p,frontmatter:()=>A});var n=I(l()),A={title:\"\\u4EC0\\u4E48\\u662F React \\u4E25\\u683C\\u6A21\\u5F0F\\u4EE5\\u53CA\\u5B83\\u6709\\u4EC0\\u4E48\\u597D\\u5904\\uFF1F\"};function o(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"React \\u4E25\\u683C\\u6A21\\u5F0F\\u662F\\u4E00\\u4E2A\\u5F00\\u53D1\\u5DE5\\u5177\\uFF0C\\u53EF\\u5E2E\\u52A9\\u8BC6\\u522B\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7684\\u6F5C\\u5728\\u95EE\\u9898\\u3002\\u5B83\\u4E3A\\u5176\\u540E\\u4EE3\\u6FC0\\u6D3B\\u989D\\u5916\\u7684\\u68C0\\u67E5\\u548C\\u8B66\\u544A\\u3002\\u5B83\\u4E0D\\u5448\\u73B0\\u4EFB\\u4F55\\u53EF\\u89C1\\u7684 UI\\uFF0C\\u4E5F\\u4E0D\\u4F1A\\u5F71\\u54CD\\u751F\\u4EA7\\u6784\\u5EFA\\u3002\\u5176\\u597D\\u5904\\u5305\\u62EC\\u8BC6\\u522B\\u4E0D\\u5B89\\u5168\\u7684\\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\\u3001\\u8B66\\u544A\\u65E7\\u7684\\u5B57\\u7B26\\u4E32 ref API \\u7684\\u4F7F\\u7528\\u3001\\u68C0\\u6D4B\\u610F\\u5916\\u7684\\u526F\\u4F5C\\u7528\\u4EE5\\u53CA\\u786E\\u4FDD\\u7EC4\\u4EF6\\u80FD\\u591F\\u9002\\u5E94\\u672A\\u6765\\u7684\\u53D8\\u5316\\u3002\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F React \\u4E25\\u683C\\u6A21\\u5F0F\\u4EE5\\u53CA\\u5B83\\u6709\\u4EC0\\u4E48\\u597D\\u5904\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EC0\\u4E48\\u662F React \\u4E25\\u683C\\u6A21\\u5F0F\\uFF1F\"}),`\n`,(0,n.jsx)(e.p,{children:\"React \\u4E25\\u683C\\u6A21\\u5F0F\\u662F React \\u4E2D\\u7684\\u4E00\\u4E2A\\u529F\\u80FD\\uFF0C\\u53EF\\u5E2E\\u52A9\\u5F00\\u53D1\\u4EBA\\u5458\\u8BC6\\u522B\\u5176\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7684\\u6F5C\\u5728\\u95EE\\u9898\\u3002\\u5B83\\u662F\\u4E00\\u4E2A\\u5305\\u88C5\\u7EC4\\u4EF6\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5B83\\u6765\\u5305\\u88C5\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u67D0\\u4E9B\\u90E8\\u5206\\u4EE5\\u542F\\u7528\\u989D\\u5916\\u7684\\u68C0\\u67E5\\u548C\\u8B66\\u544A\\u3002\\u5B83\\u4E0D\\u5448\\u73B0\\u4EFB\\u4F55\\u53EF\\u89C1\\u7684 UI\\uFF0C\\u4E5F\\u4E0D\\u4F1A\\u5F71\\u54CD\\u751F\\u4EA7\\u6784\\u5EFA\\u3002\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8981\\u4F7F\\u7528 React \\u4E25\\u683C\\u6A21\\u5F0F\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"StrictMode\"}),\" \\u7EC4\\u4EF6\\u5305\\u88C5\\u60A8\\u7684\\u7EC4\\u4EF6\\u6811\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root'),\n);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"React \\u4E25\\u683C\\u6A21\\u5F0F\\u7684\\u597D\\u5904\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u8BC6\\u522B\\u4E0D\\u5B89\\u5168\\u7684\\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React \\u4E25\\u683C\\u6A21\\u5F0F\\u6709\\u52A9\\u4E8E\\u8BC6\\u522B\\u4F7F\\u7528\\u4E0D\\u5B89\\u5168\\u7684\\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\\u7684\\u7EC4\\u4EF6\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"componentWillMount\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"componentWillReceiveProps\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"componentWillUpdate\"}),\"\\u3002\\u8FD9\\u4E9B\\u65B9\\u6CD5\\u88AB\\u8BA4\\u4E3A\\u662F\\u4E0D\\u5B89\\u5168\\u7684\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u53EF\\u80FD\\u5BFC\\u81F4\\u9519\\u8BEF\\u548C\\u610F\\u5916\\u884C\\u4E3A\\u3002\\u5982\\u679C\\u60A8\\u7684\\u4EFB\\u4F55\\u7EC4\\u4EF6\\u4F7F\\u7528\\u8FD9\\u4E9B\\u65B9\\u6CD5\\uFF0CReact \\u4E25\\u683C\\u6A21\\u5F0F\\u5C06\\u5411\\u60A8\\u53D1\\u51FA\\u8B66\\u544A\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u8B66\\u544A\\u65E7\\u7684\\u5B57\\u7B26\\u4E32 ref API \\u7684\\u4F7F\\u7528\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u60A8\\u6B63\\u5728\\u4F7F\\u7528\\u65E7\\u7684\\u5B57\\u7B26\\u4E32 ref API\\uFF0CReact \\u4E25\\u683C\\u6A21\\u5F0F\\u4F1A\\u5411\\u60A8\\u53D1\\u51FA\\u8B66\\u544A\\u3002\\u5B57\\u7B26\\u4E32 ref API \\u88AB\\u8BA4\\u4E3A\\u662F\\u65E7\\u7684\\uFF0C\\u4E0D\\u5EFA\\u8BAE\\u5728\\u65B0\\u4EE3\\u7801\\u4E2D\\u4F7F\\u7528\\u3002\\u76F8\\u53CD\\uFF0C\\u60A8\\u5E94\\u8BE5\\u4F7F\\u7528\\u56DE\\u8C03 ref API \\u6216 \",(0,n.jsx)(e.code,{children:\"React.createRef\"}),\" API\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u68C0\\u6D4B\\u610F\\u5916\\u7684\\u526F\\u4F5C\\u7528\"}),`\n`,(0,n.jsx)(e.p,{children:\"React \\u4E25\\u683C\\u6A21\\u5F0F\\u901A\\u8FC7\\u6709\\u610F\\u5730\\u53CC\\u91CD\\u8C03\\u7528\\u67D0\\u4E9B\\u751F\\u547D\\u5468\\u671F\\u65B9\\u6CD5\\u548C\\u51FD\\u6570\\u6765\\u5E2E\\u52A9\\u68C0\\u6D4B\\u610F\\u5916\\u7684\\u526F\\u4F5C\\u7528\\u3002\\u8FD9\\u6709\\u52A9\\u4E8E\\u786E\\u4FDD\\u60A8\\u7684\\u7EC4\\u4EF6\\u80FD\\u591F\\u9002\\u5E94\\u672A\\u6765\\u7684\\u53D8\\u5316\\uFF0C\\u5E76\\u4E14\\u5B83\\u4EEC\\u4E0D\\u4F9D\\u8D56\\u4E8E\\u53EF\\u80FD\\u4E0D\\u603B\\u662F\\u6267\\u884C\\u7684\\u526F\\u4F5C\\u7528\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u786E\\u4FDD\\u7EC4\\u4EF6\\u80FD\\u591F\\u9002\\u5E94\\u672A\\u6765\\u7684\\u53D8\\u5316\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u901A\\u8FC7\\u542F\\u7528 React \\u4E25\\u683C\\u6A21\\u5F0F\\uFF0C\\u60A8\\u53EF\\u4EE5\\u786E\\u4FDD\\u60A8\\u7684\\u7EC4\\u4EF6\\u66F4\\u80FD\\u9002\\u5E94 React \\u7684\\u672A\\u6765\\u53D8\\u5316\\u3002\\u989D\\u5916\\u7684\\u68C0\\u67E5\\u548C\\u8B66\\u544A\\u53EF\\u5E2E\\u52A9\\u60A8\\u5C3D\\u65E9\\u8BC6\\u522B\\u6F5C\\u5728\\u95EE\\u9898\\uFF0C\\u4ECE\\u800C\\u66F4\\u5BB9\\u6613\\u7EF4\\u62A4\\u548C\\u66F4\\u65B0\\u60A8\\u7684\\u4EE3\\u7801\\u5E93\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/StrictMode\",children:\"React Strict Mode Documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/Component#adding-lifecycle-methods-to-a-class-component\",children:\"React Lifecycle Methods\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/manipulating-the-dom-with-refs\",children:\"Refs and the DOM\"})}),`\n`]})]})}function p(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(o,{...c})}):o(c)}return g(D);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-react-suspense-and-what-does-it-enable/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-react-suspense-and-what-does-it-enable/en-US.json
index e04e218da..9419705cf 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-react-suspense-and-what-does-it-enable/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-react-suspense-and-what-does-it-enable/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-react-suspense-and-what-does-it-enable/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var a in e)i(t,a,{get:e[a],enumerable:!0})},r=(t,e,a,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!f.call(t,o)&&o!==a&&i(t,o,{get:()=>e[o],enumerable:!(c=p(e,o))||c.enumerable});return t};var R=(t,e,a)=>(a=t!=null?h(m(t)):{},r(e||!t||!t.__esModule?i(a,\"default\",{value:t,enumerable:!0}):a,t)),w=t=>r(i({},\"__esModule\",{value:!0}),t);var l=y((z,s)=>{s.exports=_jsx_runtime});var x={};g(x,{default:()=>v,frontmatter:()=>S});var n=R(l()),S={title:\"What is React Suspense and what does it enable?\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",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:[\"React Suspense is a feature that allows you to handle asynchronous operations in your React components more gracefully. It enables you to show fallback content while waiting for something to load, such as data fetching or code splitting. You can use it with \",(0,n.jsx)(e.code,{children:\"React.lazy\"}),\" for code splitting and with libraries like \",(0,n.jsx)(e.code,{children:\"react-query\"}),\" for data fetching.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const LazyComponent = React.lazy(() => import('./LazyComponent'));\n\nfunction MyComponent() {\n  return (\n    <React.Suspense fallback={<div>Loading...</div>}>\n      <LazyComponent />\n    </React.Suspense>\n  );\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is React Suspense and what does it enable?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Introduction to React Suspense\"}),`\n`,(0,n.jsx)(e.p,{children:\"React Suspense is a feature introduced by the React team to help manage asynchronous operations in a more declarative way. It allows you to specify a loading state (fallback) while waiting for some asynchronous operation to complete, such as data fetching or code splitting.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Code splitting with React.lazy\"}),`\n`,(0,n.jsx)(e.p,{children:\"One of the primary use cases for React Suspense is code splitting. Code splitting allows you to load parts of your application on demand, which can significantly improve the initial load time of your application.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { Suspense } from 'react';\n\nconst LazyComponent = React.lazy(() => import('./LazyComponent'));\n\nfunction MyComponent() {\n  return (\n    <Suspense fallback={<div>Loading...</div>}>\n      <LazyComponent />\n    </Suspense>\n  );\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"React.lazy\"}),\" is used to dynamically import the \",(0,n.jsx)(e.code,{children:\"LazyComponent\"}),\". The \",(0,n.jsx)(e.code,{children:\"Suspense\"}),\" component wraps the lazy-loaded component and provides a fallback UI (\",(0,n.jsx)(e.code,{children:\"<div>Loading...</div>\"}),\") to display while the component is being loaded.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Data fetching with Suspense\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React Suspense can also be used for data fetching, although this feature is still experimental and requires additional libraries like \",(0,n.jsx)(e.code,{children:\"react-query\"}),\" or \",(0,n.jsx)(e.code,{children:\"Relay\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { Suspense } from 'react';\nimport { useQuery } from 'react-query';\n\nfunction fetchData() {\n  return fetch('https://api.example.com/data').then((response) =>\n    response.json(),\n  );\n}\n\nfunction DataComponent() {\n  const { data } = useQuery('data', fetchData);\n  return <div>{data}</div>;\n}\n\nfunction MyComponent() {\n  return (\n    <Suspense fallback={<div>Loading data...</div>}>\n      <DataComponent />\n    </Suspense>\n  );\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"react-query\"}),\" is used to fetch data, and \",(0,n.jsx)(e.code,{children:\"Suspense\"}),\" provides a fallback UI while the data is being loaded.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits of React Suspense\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Improved user experience\"}),\": By showing fallback content, you can keep the user engaged while waiting for asynchronous operations to complete.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Simplified code\"}),\": Suspense allows you to handle loading states declaratively, reducing the need for complex state management.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Better performance\"}),\": Code splitting with \",(0,n.jsx)(e.code,{children:\"React.lazy\"}),\" can significantly reduce the initial load time of your application.\"]}),`\n`]}),`\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://react.dev/reference/react/Suspense\",children:\"React Suspense documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/lazy\",children:\"React.lazy documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react-query.tanstack.com/\",children:\"React Query documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://relay.dev/docs/en/experimental/api-reference#suspense\",children:\"Relay documentation\"})}),`\n`]})]})}function b(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var v=b;return w(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),R=(t,e)=>{for(var a in e)i(t,a,{get:e[a],enumerable:!0})},r=(t,e,a,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!y.call(t,o)&&o!==a&&i(t,o,{get:()=>e[o],enumerable:!(c=u(e,o))||c.enumerable});return t};var w=(t,e,a)=>(a=t!=null?p(f(t)):{},r(e||!t||!t.__esModule?i(a,\"default\",{value:t,enumerable:!0}):a,t)),S=t=>r(i({},\"__esModule\",{value:!0}),t);var l=g((C,s)=>{s.exports=_jsx_runtime});var x={};R(x,{default:()=>h,frontmatter:()=>v});var n=w(l()),v={title:\"What is React Suspense and what does it enable?\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React Suspense is a feature that allows you to handle asynchronous operations in your React components more gracefully. It enables you to show fallback content while waiting for something to load, such as data fetching or code splitting. You can use it with \",(0,n.jsx)(e.code,{children:\"React.lazy\"}),\" for code splitting and with libraries like \",(0,n.jsx)(e.code,{children:\"react-query\"}),\" for data fetching.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const LazyComponent = React.lazy(() => import('./LazyComponent'));\n\nfunction MyComponent() {\n  return (\n    <React.Suspense fallback={<div>Loading...</div>}>\n      <LazyComponent />\n    </React.Suspense>\n  );\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is React Suspense and what does it enable?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Introduction to React Suspense\"}),`\n`,(0,n.jsx)(e.p,{children:\"React Suspense is a feature introduced by the React team to help manage asynchronous operations in a more declarative way. It allows you to specify a loading state (fallback) while waiting for some asynchronous operation to complete, such as data fetching or code splitting.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Code splitting with React.lazy\"}),`\n`,(0,n.jsx)(e.p,{children:\"One of the primary use cases for React Suspense is code splitting. Code splitting allows you to load parts of your application on demand, which can significantly improve the initial load time of your application.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { Suspense } from 'react';\n\nconst LazyComponent = React.lazy(() => import('./LazyComponent'));\n\nfunction MyComponent() {\n  return (\n    <Suspense fallback={<div>Loading...</div>}>\n      <LazyComponent />\n    </Suspense>\n  );\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"React.lazy\"}),\" is used to dynamically import the \",(0,n.jsx)(e.code,{children:\"LazyComponent\"}),\". The \",(0,n.jsx)(e.code,{children:\"Suspense\"}),\" component wraps the lazy-loaded component and provides a fallback UI (\",(0,n.jsx)(e.code,{children:\"<div>Loading...</div>\"}),\") to display while the component is being loaded.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Data fetching with Suspense\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React Suspense can also be used for data fetching, although this feature is still experimental and requires additional libraries like \",(0,n.jsx)(e.code,{children:\"react-query\"}),\" or \",(0,n.jsx)(e.code,{children:\"Relay\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { Suspense } from 'react';\nimport { useQuery } from 'react-query';\n\nfunction fetchData() {\n  return fetch('https://api.example.com/data').then((response) =>\n    response.json(),\n  );\n}\n\nfunction DataComponent() {\n  const { data } = useQuery('data', fetchData);\n  return <div>{data}</div>;\n}\n\nfunction MyComponent() {\n  return (\n    <Suspense fallback={<div>Loading data...</div>}>\n      <DataComponent />\n    </Suspense>\n  );\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"react-query\"}),\" is used to fetch data, and \",(0,n.jsx)(e.code,{children:\"Suspense\"}),\" provides a fallback UI while the data is being loaded.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits of React Suspense\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Improved user experience\"}),\": By showing fallback content, you can keep the user engaged while waiting for asynchronous operations to complete.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Simplified code\"}),\": Suspense allows you to handle loading states declaratively, reducing the need for complex state management.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Better performance\"}),\": Code splitting with \",(0,n.jsx)(e.code,{children:\"React.lazy\"}),\" can significantly reduce the initial load time of your application.\"]}),`\n`]}),`\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://react.dev/reference/react/Suspense\",children:\"React Suspense documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/lazy\",children:\"React.lazy documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react-query.tanstack.com/\",children:\"React Query documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://relay.dev/docs/en/experimental/api-reference#suspense\",children:\"Relay documentation\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return S(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-react-suspense-and-what-does-it-enable/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-react-suspense-and-what-does-it-enable/zh-CN.json
index b2d2d02b5..c3afe6ae9 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-react-suspense-and-what-does-it-enable/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-react-suspense-and-what-does-it-enable/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-react-suspense-and-what-does-it-enable/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),R=(c,e)=>{for(var t in e)a(c,t,{get:e[t],enumerable:!0})},s=(c,e,t,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!y.call(c,r)&&r!==t&&a(c,r,{get:()=>e[r],enumerable:!(o=p(e,r))||o.enumerable});return c};var S=(c,e,t)=>(t=c!=null?h(m(c)):{},s(e||!c||!c.__esModule?a(t,\"default\",{value:c,enumerable:!0}):t,c)),g=c=>s(a({},\"__esModule\",{value:!0}),c);var d=f((j,i)=>{i.exports=_jsx_runtime});var v={};R(v,{default:()=>C,frontmatter:()=>z});var n=S(d()),z={title:\"\\u4EC0\\u4E48\\u662F React Suspense \\u4EE5\\u53CA\\u5B83\\u80FD\\u505A\\u4EC0\\u4E48\\uFF1F\"};function l(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React Suspense \\u662F\\u4E00\\u9879\\u529F\\u80FD\\uFF0C\\u5141\\u8BB8\\u60A8\\u66F4\\u4F18\\u96C5\\u5730\\u5904\\u7406 React \\u7EC4\\u4EF6\\u4E2D\\u7684\\u5F02\\u6B65\\u64CD\\u4F5C\\u3002\\u5B83\\u4F7F\\u60A8\\u80FD\\u591F\\u5728\\u7B49\\u5F85\\u52A0\\u8F7D\\u67D0\\u4E9B\\u5185\\u5BB9\\uFF08\\u4F8B\\u5982\\u6570\\u636E\\u83B7\\u53D6\\u6216\\u4EE3\\u7801\\u62C6\\u5206\\uFF09\\u65F6\\u663E\\u793A\\u56DE\\u9000\\u5185\\u5BB9\\u3002\\u60A8\\u53EF\\u4EE5\\u5C06\\u5176\\u4E0E \",(0,n.jsx)(e.code,{children:\"React.lazy\"}),\" \\u4E00\\u8D77\\u7528\\u4E8E\\u4EE3\\u7801\\u62C6\\u5206\\uFF0C\\u5E76\\u4E0E \",(0,n.jsx)(e.code,{children:\"react-query\"}),\" \\u7B49\\u5E93\\u4E00\\u8D77\\u7528\\u4E8E\\u6570\\u636E\\u83B7\\u53D6\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const LazyComponent = React.lazy(() => import('./LazyComponent'));\n\nfunction MyComponent() {\n  return (\n    <React.Suspense fallback={<div>Loading...</div>}>\n      <LazyComponent />\n    </React.Suspense>\n  );\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F React Suspense \\u4EE5\\u53CA\\u5B83\\u80FD\\u505A\\u4EC0\\u4E48\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"React Suspense \\u7B80\\u4ECB\"}),`\n`,(0,n.jsx)(e.p,{children:\"React Suspense \\u662F React \\u56E2\\u961F\\u5F15\\u5165\\u7684\\u4E00\\u9879\\u529F\\u80FD\\uFF0C\\u65E8\\u5728\\u5E2E\\u52A9\\u4EE5\\u66F4\\u5177\\u58F0\\u660E\\u6027\\u7684\\u65B9\\u5F0F\\u7BA1\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u3002\\u5B83\\u5141\\u8BB8\\u60A8\\u5728\\u7B49\\u5F85\\u67D0\\u4E9B\\u5F02\\u6B65\\u64CD\\u4F5C\\u5B8C\\u6210\\uFF08\\u4F8B\\u5982\\u6570\\u636E\\u83B7\\u53D6\\u6216\\u4EE3\\u7801\\u62C6\\u5206\\uFF09\\u65F6\\u6307\\u5B9A\\u52A0\\u8F7D\\u72B6\\u6001\\uFF08\\u56DE\\u9000\\uFF09\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 React.lazy \\u8FDB\\u884C\\u4EE3\\u7801\\u62C6\\u5206\"}),`\n`,(0,n.jsx)(e.p,{children:\"React Suspense \\u7684\\u4E3B\\u8981\\u7528\\u4F8B\\u4E4B\\u4E00\\u662F\\u4EE3\\u7801\\u62C6\\u5206\\u3002\\u4EE3\\u7801\\u62C6\\u5206\\u5141\\u8BB8\\u60A8\\u6309\\u9700\\u52A0\\u8F7D\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u5404\\u4E2A\\u90E8\\u5206\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u663E\\u7740\\u63D0\\u9AD8\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u521D\\u59CB\\u52A0\\u8F7D\\u65F6\\u95F4\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { Suspense } from 'react';\n\nconst LazyComponent = React.lazy(() => import('./LazyComponent'));\n\nfunction MyComponent() {\n  return (\n    <Suspense fallback={<div>Loading...</div>}>\n      <LazyComponent />\n    </Suspense>\n  );\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"React.lazy\"}),\" \\u7528\\u4E8E\\u52A8\\u6001\\u5BFC\\u5165 \",(0,n.jsx)(e.code,{children:\"LazyComponent\"}),\"\\u3002\",(0,n.jsx)(e.code,{children:\"Suspense\"}),\" \\u7EC4\\u4EF6\\u5305\\u88C5\\u4E86\\u5EF6\\u8FDF\\u52A0\\u8F7D\\u7684\\u7EC4\\u4EF6\\uFF0C\\u5E76\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u56DE\\u9000 UI (\",(0,n.jsx)(e.code,{children:\"<div>Loading...</div>\"}),\")\\uFF0C\\u7528\\u4E8E\\u5728\\u52A0\\u8F7D\\u7EC4\\u4EF6\\u65F6\\u663E\\u793A\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 Suspense \\u83B7\\u53D6\\u6570\\u636E\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React Suspense \\u4E5F\\u53EF\\u4EE5\\u7528\\u4E8E\\u6570\\u636E\\u83B7\\u53D6\\uFF0C\\u5C3D\\u7BA1\\u6B64\\u529F\\u80FD\\u4ECD\\u5904\\u4E8E\\u5B9E\\u9A8C\\u9636\\u6BB5\\uFF0C\\u9700\\u8981\\u989D\\u5916\\u7684\\u5E93\\uFF0C\\u5982 \",(0,n.jsx)(e.code,{children:\"react-query\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"Relay\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { Suspense } from 'react';\nimport { useQuery } from 'react-query';\n\nfunction fetchData() {\n  return fetch('https://api.example.com/data').then((response) =>\n    response.json(),\n  );\n}\n\nfunction DataComponent() {\n  const { data } = useQuery('data', fetchData);\n  return <div>{data}</div>;\n}\n\nfunction MyComponent() {\n  return (\n    <Suspense fallback={<div>Loading data...</div>}>\n      <DataComponent />\n    </Suspense>\n  );\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"react-query\"}),\" \\u7528\\u4E8E\\u83B7\\u53D6\\u6570\\u636E\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"Suspense\"}),\" \\u5728\\u52A0\\u8F7D\\u6570\\u636E\\u65F6\\u63D0\\u4F9B\\u56DE\\u9000 UI\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"React Suspense \\u7684\\u597D\\u5904\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6539\\u5584\\u7528\\u6237\\u4F53\\u9A8C\"}),\"\\uFF1A\\u901A\\u8FC7\\u663E\\u793A\\u56DE\\u9000\\u5185\\u5BB9\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728\\u7B49\\u5F85\\u5F02\\u6B65\\u64CD\\u4F5C\\u5B8C\\u6210\\u65F6\\u8BA9\\u7528\\u6237\\u4FDD\\u6301\\u53C2\\u4E0E\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u7B80\\u5316\\u4EE3\\u7801\"}),\"\\uFF1ASuspense \\u5141\\u8BB8\\u60A8\\u4EE5\\u58F0\\u660E\\u65B9\\u5F0F\\u5904\\u7406\\u52A0\\u8F7D\\u72B6\\u6001\\uFF0C\\u4ECE\\u800C\\u51CF\\u5C11\\u4E86\\u5BF9\\u590D\\u6742\\u72B6\\u6001\\u7BA1\\u7406\\u7684\\u9700\\u6C42\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u66F4\\u597D\\u7684\\u6027\\u80FD\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"React.lazy\"}),\" \\u8FDB\\u884C\\u4EE3\\u7801\\u62C6\\u5206\\u53EF\\u4EE5\\u663E\\u7740\\u51CF\\u5C11\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u521D\\u59CB\\u52A0\\u8F7D\\u65F6\\u95F4\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/Suspense\",children:\"React Suspense documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/lazy\",children:\"React.lazy documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react-query.tanstack.com/\",children:\"React Query documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://relay.dev/docs/en/experimental/api-reference#suspense\",children:\"Relay documentation\"})}),`\n`]})]})}function x(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(l,c)})):l(c)}var C=x;return g(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var R=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),S=(c,e)=>{for(var t in e)a(c,t,{get:e[t],enumerable:!0})},d=(c,e,t,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!f.call(c,r)&&r!==t&&a(c,r,{get:()=>e[r],enumerable:!(o=u(e,r))||o.enumerable});return c};var g=(c,e,t)=>(t=c!=null?p(y(c)):{},d(e||!c||!c.__esModule?a(t,\"default\",{value:c,enumerable:!0}):t,c)),z=c=>d(a({},\"__esModule\",{value:!0}),c);var s=R((L,i)=>{i.exports=_jsx_runtime});var C={};S(C,{default:()=>h,frontmatter:()=>x});var n=g(s()),x={title:\"\\u4EC0\\u4E48\\u662F React Suspense \\u4EE5\\u53CA\\u5B83\\u80FD\\u505A\\u4EC0\\u4E48\\uFF1F\"};function l(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React Suspense \\u662F\\u4E00\\u9879\\u529F\\u80FD\\uFF0C\\u5141\\u8BB8\\u60A8\\u66F4\\u4F18\\u96C5\\u5730\\u5904\\u7406 React \\u7EC4\\u4EF6\\u4E2D\\u7684\\u5F02\\u6B65\\u64CD\\u4F5C\\u3002\\u5B83\\u4F7F\\u60A8\\u80FD\\u591F\\u5728\\u7B49\\u5F85\\u52A0\\u8F7D\\u67D0\\u4E9B\\u5185\\u5BB9\\uFF08\\u4F8B\\u5982\\u6570\\u636E\\u83B7\\u53D6\\u6216\\u4EE3\\u7801\\u62C6\\u5206\\uFF09\\u65F6\\u663E\\u793A\\u56DE\\u9000\\u5185\\u5BB9\\u3002\\u60A8\\u53EF\\u4EE5\\u5C06\\u5176\\u4E0E \",(0,n.jsx)(e.code,{children:\"React.lazy\"}),\" \\u4E00\\u8D77\\u7528\\u4E8E\\u4EE3\\u7801\\u62C6\\u5206\\uFF0C\\u5E76\\u4E0E \",(0,n.jsx)(e.code,{children:\"react-query\"}),\" \\u7B49\\u5E93\\u4E00\\u8D77\\u7528\\u4E8E\\u6570\\u636E\\u83B7\\u53D6\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const LazyComponent = React.lazy(() => import('./LazyComponent'));\n\nfunction MyComponent() {\n  return (\n    <React.Suspense fallback={<div>Loading...</div>}>\n      <LazyComponent />\n    </React.Suspense>\n  );\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F React Suspense \\u4EE5\\u53CA\\u5B83\\u80FD\\u505A\\u4EC0\\u4E48\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"React Suspense \\u7B80\\u4ECB\"}),`\n`,(0,n.jsx)(e.p,{children:\"React Suspense \\u662F React \\u56E2\\u961F\\u5F15\\u5165\\u7684\\u4E00\\u9879\\u529F\\u80FD\\uFF0C\\u65E8\\u5728\\u5E2E\\u52A9\\u4EE5\\u66F4\\u5177\\u58F0\\u660E\\u6027\\u7684\\u65B9\\u5F0F\\u7BA1\\u7406\\u5F02\\u6B65\\u64CD\\u4F5C\\u3002\\u5B83\\u5141\\u8BB8\\u60A8\\u5728\\u7B49\\u5F85\\u67D0\\u4E9B\\u5F02\\u6B65\\u64CD\\u4F5C\\u5B8C\\u6210\\uFF08\\u4F8B\\u5982\\u6570\\u636E\\u83B7\\u53D6\\u6216\\u4EE3\\u7801\\u62C6\\u5206\\uFF09\\u65F6\\u6307\\u5B9A\\u52A0\\u8F7D\\u72B6\\u6001\\uFF08\\u56DE\\u9000\\uFF09\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 React.lazy \\u8FDB\\u884C\\u4EE3\\u7801\\u62C6\\u5206\"}),`\n`,(0,n.jsx)(e.p,{children:\"React Suspense \\u7684\\u4E3B\\u8981\\u7528\\u4F8B\\u4E4B\\u4E00\\u662F\\u4EE3\\u7801\\u62C6\\u5206\\u3002\\u4EE3\\u7801\\u62C6\\u5206\\u5141\\u8BB8\\u60A8\\u6309\\u9700\\u52A0\\u8F7D\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u5404\\u4E2A\\u90E8\\u5206\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u663E\\u7740\\u63D0\\u9AD8\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u521D\\u59CB\\u52A0\\u8F7D\\u65F6\\u95F4\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { Suspense } from 'react';\n\nconst LazyComponent = React.lazy(() => import('./LazyComponent'));\n\nfunction MyComponent() {\n  return (\n    <Suspense fallback={<div>Loading...</div>}>\n      <LazyComponent />\n    </Suspense>\n  );\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"React.lazy\"}),\" \\u7528\\u4E8E\\u52A8\\u6001\\u5BFC\\u5165 \",(0,n.jsx)(e.code,{children:\"LazyComponent\"}),\"\\u3002\",(0,n.jsx)(e.code,{children:\"Suspense\"}),\" \\u7EC4\\u4EF6\\u5305\\u88C5\\u4E86\\u5EF6\\u8FDF\\u52A0\\u8F7D\\u7684\\u7EC4\\u4EF6\\uFF0C\\u5E76\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u56DE\\u9000 UI (\",(0,n.jsx)(e.code,{children:\"<div>Loading...</div>\"}),\")\\uFF0C\\u7528\\u4E8E\\u5728\\u52A0\\u8F7D\\u7EC4\\u4EF6\\u65F6\\u663E\\u793A\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528 Suspense \\u83B7\\u53D6\\u6570\\u636E\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React Suspense \\u4E5F\\u53EF\\u4EE5\\u7528\\u4E8E\\u6570\\u636E\\u83B7\\u53D6\\uFF0C\\u5C3D\\u7BA1\\u6B64\\u529F\\u80FD\\u4ECD\\u5904\\u4E8E\\u5B9E\\u9A8C\\u9636\\u6BB5\\uFF0C\\u9700\\u8981\\u989D\\u5916\\u7684\\u5E93\\uFF0C\\u5982 \",(0,n.jsx)(e.code,{children:\"react-query\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"Relay\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { Suspense } from 'react';\nimport { useQuery } from 'react-query';\n\nfunction fetchData() {\n  return fetch('https://api.example.com/data').then((response) =>\n    response.json(),\n  );\n}\n\nfunction DataComponent() {\n  const { data } = useQuery('data', fetchData);\n  return <div>{data}</div>;\n}\n\nfunction MyComponent() {\n  return (\n    <Suspense fallback={<div>Loading data...</div>}>\n      <DataComponent />\n    </Suspense>\n  );\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"react-query\"}),\" \\u7528\\u4E8E\\u83B7\\u53D6\\u6570\\u636E\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"Suspense\"}),\" \\u5728\\u52A0\\u8F7D\\u6570\\u636E\\u65F6\\u63D0\\u4F9B\\u56DE\\u9000 UI\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"React Suspense \\u7684\\u597D\\u5904\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6539\\u5584\\u7528\\u6237\\u4F53\\u9A8C\"}),\"\\uFF1A\\u901A\\u8FC7\\u663E\\u793A\\u56DE\\u9000\\u5185\\u5BB9\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5728\\u7B49\\u5F85\\u5F02\\u6B65\\u64CD\\u4F5C\\u5B8C\\u6210\\u65F6\\u8BA9\\u7528\\u6237\\u4FDD\\u6301\\u53C2\\u4E0E\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u7B80\\u5316\\u4EE3\\u7801\"}),\"\\uFF1ASuspense \\u5141\\u8BB8\\u60A8\\u4EE5\\u58F0\\u660E\\u65B9\\u5F0F\\u5904\\u7406\\u52A0\\u8F7D\\u72B6\\u6001\\uFF0C\\u4ECE\\u800C\\u51CF\\u5C11\\u4E86\\u5BF9\\u590D\\u6742\\u72B6\\u6001\\u7BA1\\u7406\\u7684\\u9700\\u6C42\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u66F4\\u597D\\u7684\\u6027\\u80FD\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"React.lazy\"}),\" \\u8FDB\\u884C\\u4EE3\\u7801\\u62C6\\u5206\\u53EF\\u4EE5\\u663E\\u7740\\u51CF\\u5C11\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u521D\\u59CB\\u52A0\\u8F7D\\u65F6\\u95F4\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/Suspense\",children:\"React Suspense documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/lazy\",children:\"React.lazy documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react-query.tanstack.com/\",children:\"React Query documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://relay.dev/docs/en/experimental/api-reference#suspense\",children:\"Relay documentation\"})}),`\n`]})]})}function h(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(l,{...c})}):l(c)}return z(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-reconciliation-in-react/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-reconciliation-in-react/en-US.json
index 2ae7f0ec6..243313263 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-reconciliation-in-react/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-reconciliation-in-react/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-reconciliation-in-react/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),w=(n,e)=>{for(var i in e)r(n,i,{get:e[i],enumerable:!0})},c=(n,e,i,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!f.call(n,a)&&a!==i&&r(n,a,{get:()=>e[a],enumerable:!(h=p(e,a))||h.enumerable});return n};var v=(n,e,i)=>(i=n!=null?d(u(n)):{},c(e||!n||!n.__esModule?r(i,\"default\",{value:n,enumerable:!0}):i,n)),R=n=>c(r({},\"__esModule\",{value:!0}),n);var s=g((T,o)=>{o.exports=_jsx_runtime});var y={};w(y,{default:()=>O,frontmatter:()=>M});var t=v(s()),M={title:\"What is reconciliation in React?\"};function l(n){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",ul:\"ul\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:`Reconciliation in React is the process through which React updates the DOM to match the virtual DOM. When a component's state or props change, React creates a new virtual DOM tree and compares it with the previous one. This comparison process is called \"diffing.\" React then updates only the parts of the actual DOM that have changed, making the updates efficient and fast.`}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"What is reconciliation in React?\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Introduction\"}),`\n`,(0,t.jsx)(e.p,{children:\"Reconciliation is a key concept in React that deals with how React updates the DOM to match the virtual DOM. The virtual DOM is a lightweight copy of the actual DOM, and React uses it to determine the most efficient way to update the user interface.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"The virtual DOM\"}),`\n`,(0,t.jsx)(e.p,{children:\"React maintains a virtual DOM to optimize updates. When a component's state or props change, React creates a new virtual DOM tree. This new tree is then compared to the previous virtual DOM tree to identify what has changed.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"The diffing algorithm\"}),`\n`,(0,t.jsx)(e.p,{children:'The process of comparing the new virtual DOM tree with the previous one is called \"diffing.\" React uses a highly optimized diffing algorithm to perform this comparison. The algorithm works in the following way:'}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Element type comparison\"}),\": If the elements are of different types, React will replace the old element with the new one.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Key comparison\"}),\": If elements are of the same type but have different keys, React will treat them as different elements and replace the old one with the new one.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Props and state comparison\"}),\": If elements are of the same type and have the same keys, React will compare their props and state to determine what has changed.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Updating the DOM\"}),`\n`,(0,t.jsx)(e.p,{children:\"Once the diffing algorithm has identified the changes, React updates only the parts of the actual DOM that have changed. This makes the updates efficient and fast, as React avoids re-rendering the entire DOM.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,t.jsx)(e.p,{children:\"Here is a simple example to illustrate reconciliation:\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-jsx\",children:`class MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n  }\n\n  increment = () => {\n    this.setState({ count: this.state.count + 1 });\n  };\n\n  render() {\n    return (\n      <div>\n        <p>{this.state.count}</p>\n        <button onClick={this.increment}>Increment</button>\n      </div>\n    );\n  }\n}\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"In this example, when the \",(0,t.jsx)(e.code,{children:\"increment\"}),\" method is called, the state changes, and React creates a new virtual DOM tree. The diffing algorithm compares the new tree with the previous one and updates only the \",(0,t.jsx)(e.code,{children:\"<p>\"}),\" element with the new count value.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/learn/preserving-and-resetting-state\",children:\"React documentation on reconciliation\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/what-is-the-virtual-dom-in-react/\",children:\"Understanding the virtual DOM\"})}),`\n`]})]})}function D(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(l,n)})):l(n)}var O=D;return R(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var i in e)r(n,i,{get:e[i],enumerable:!0})},c=(n,e,i,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!g.call(n,a)&&a!==i&&r(n,a,{get:()=>e[a],enumerable:!(h=m(e,a))||h.enumerable});return n};var R=(n,e,i)=>(i=n!=null?p(f(n)):{},c(e||!n||!n.__esModule?r(i,\"default\",{value:n,enumerable:!0}):i,n)),M=n=>c(r({},\"__esModule\",{value:!0}),n);var s=w((x,o)=>{o.exports=_jsx_runtime});var O={};v(O,{default:()=>d,frontmatter:()=>D});var t=R(s()),D={title:\"What is reconciliation in React?\"};function l(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:`Reconciliation in React is the process through which React updates the DOM to match the virtual DOM. When a component's state or props change, React creates a new virtual DOM tree and compares it with the previous one. This comparison process is called \"diffing.\" React then updates only the parts of the actual DOM that have changed, making the updates efficient and fast.`}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"What is reconciliation in React?\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Introduction\"}),`\n`,(0,t.jsx)(e.p,{children:\"Reconciliation is a key concept in React that deals with how React updates the DOM to match the virtual DOM. The virtual DOM is a lightweight copy of the actual DOM, and React uses it to determine the most efficient way to update the user interface.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"The virtual DOM\"}),`\n`,(0,t.jsx)(e.p,{children:\"React maintains a virtual DOM to optimize updates. When a component's state or props change, React creates a new virtual DOM tree. This new tree is then compared to the previous virtual DOM tree to identify what has changed.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"The diffing algorithm\"}),`\n`,(0,t.jsx)(e.p,{children:'The process of comparing the new virtual DOM tree with the previous one is called \"diffing.\" React uses a highly optimized diffing algorithm to perform this comparison. The algorithm works in the following way:'}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Element type comparison\"}),\": If the elements are of different types, React will replace the old element with the new one.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Key comparison\"}),\": If elements are of the same type but have different keys, React will treat them as different elements and replace the old one with the new one.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Props and state comparison\"}),\": If elements are of the same type and have the same keys, React will compare their props and state to determine what has changed.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Updating the DOM\"}),`\n`,(0,t.jsx)(e.p,{children:\"Once the diffing algorithm has identified the changes, React updates only the parts of the actual DOM that have changed. This makes the updates efficient and fast, as React avoids re-rendering the entire DOM.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,t.jsx)(e.p,{children:\"Here is a simple example to illustrate reconciliation:\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-jsx\",children:`class MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n  }\n\n  increment = () => {\n    this.setState({ count: this.state.count + 1 });\n  };\n\n  render() {\n    return (\n      <div>\n        <p>{this.state.count}</p>\n        <button onClick={this.increment}>Increment</button>\n      </div>\n    );\n  }\n}\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"In this example, when the \",(0,t.jsx)(e.code,{children:\"increment\"}),\" method is called, the state changes, and React creates a new virtual DOM tree. The diffing algorithm compares the new tree with the previous one and updates only the \",(0,t.jsx)(e.code,{children:\"<p>\"}),\" element with the new count value.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/learn/preserving-and-resetting-state\",children:\"React documentation on reconciliation\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/what-is-the-virtual-dom-in-react/\",children:\"Understanding the virtual DOM\"})}),`\n`]})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(l,{...n})}):l(n)}return M(O);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-reconciliation-in-react/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-reconciliation-in-react/zh-CN.json
index 2efdcf08b..861ae047b 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-reconciliation-in-react/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-reconciliation-in-react/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-reconciliation-in-react/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var R=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),O=(t,n)=>{for(var c in n)i(t,c,{get:n[c],enumerable:!0})},a=(t,n,c,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of u(n))!D.call(t,r)&&r!==c&&i(t,r,{get:()=>n[r],enumerable:!(h=p(n,r))||h.enumerable});return t};var m=(t,n,c)=>(c=t!=null?s(M(t)):{},a(n||!t||!t.__esModule?i(c,\"default\",{value:t,enumerable:!0}):c,t)),g=t=>a(i({},\"__esModule\",{value:!0}),t);var o=R((w,l)=>{l.exports=_jsx_runtime});var v={};O(v,{default:()=>j,frontmatter:()=>x});var e=m(o()),x={title:\"React \\u4E2D\\u7684\\u534F\\u8C03\\u662F\\u4EC0\\u4E48\\uFF1F\"};function d(t){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",ul:\"ul\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u4E2D\\u7684\\u534F\\u8C03\\u662F React \\u66F4\\u65B0 DOM \\u4EE5\\u5339\\u914D\\u865A\\u62DF DOM \\u7684\\u8FC7\\u7A0B\\u3002\\u5F53\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u6216\\u5C5E\\u6027\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0CReact \\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\uFF0C\\u5E76\\u5C06\\u5176\\u4E0E\\u4E4B\\u524D\\u7684\\u6811\\u8FDB\\u884C\\u6BD4\\u8F83\\u3002\\u8FD9\\u4E2A\\u6BD4\\u8F83\\u8FC7\\u7A0B\\u79F0\\u4E3A\\u201C\\u5DEE\\u5F02\\u201D\\u3002\\u7136\\u540E\\uFF0CReact \\u53EA\\u66F4\\u65B0\\u5B9E\\u9645 DOM \\u4E2D\\u53D1\\u751F\\u53D8\\u5316\\u7684\\u90E8\\u5206\\uFF0C\\u4ECE\\u800C\\u4F7F\\u66F4\\u65B0\\u9AD8\\u6548\\u4E14\\u5FEB\\u901F\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u4E2D\\u7684\\u534F\\u8C03\\u662F\\u4EC0\\u4E48\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7B80\\u4ECB\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u534F\\u8C03\\u662F React \\u4E2D\\u7684\\u4E00\\u4E2A\\u5173\\u952E\\u6982\\u5FF5\\uFF0C\\u5B83\\u5904\\u7406 React \\u5982\\u4F55\\u66F4\\u65B0 DOM \\u4EE5\\u5339\\u914D\\u865A\\u62DF DOM\\u3002\\u865A\\u62DF DOM \\u662F\\u5B9E\\u9645 DOM \\u7684\\u8F7B\\u91CF\\u7EA7\\u526F\\u672C\\uFF0CReact \\u4F7F\\u7528\\u5B83\\u6765\\u786E\\u5B9A\\u66F4\\u65B0\\u7528\\u6237\\u754C\\u9762\\u7684\\u6700\\u6709\\u6548\\u65B9\\u6CD5\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u865A\\u62DF DOM\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u7EF4\\u62A4\\u4E00\\u4E2A\\u865A\\u62DF DOM \\u4EE5\\u4F18\\u5316\\u66F4\\u65B0\\u3002\\u5F53\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u6216\\u5C5E\\u6027\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0CReact \\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\u3002\\u7136\\u540E\\u5C06\\u8FD9\\u68F5\\u65B0\\u6811\\u4E0E\\u4E4B\\u524D\\u7684\\u865A\\u62DF DOM \\u6811\\u8FDB\\u884C\\u6BD4\\u8F83\\uFF0C\\u4EE5\\u786E\\u5B9A\\u53D1\\u751F\\u4E86\\u4EC0\\u4E48\\u53D8\\u5316\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5DEE\\u5F02\\u7B97\\u6CD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5C06\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\u4E0E\\u4E4B\\u524D\\u7684\\u6811\\u8FDB\\u884C\\u6BD4\\u8F83\\u7684\\u8FC7\\u7A0B\\u79F0\\u4E3A\\u201C\\u5DEE\\u5F02\\u201D\\u3002React \\u4F7F\\u7528\\u9AD8\\u5EA6\\u4F18\\u5316\\u7684\\u5DEE\\u5F02\\u7B97\\u6CD5\\u6765\\u6267\\u884C\\u6B64\\u6BD4\\u8F83\\u3002\\u8BE5\\u7B97\\u6CD5\\u7684\\u5DE5\\u4F5C\\u65B9\\u5F0F\\u5982\\u4E0B\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5143\\u7D20\\u7C7B\\u578B\\u6BD4\\u8F83\"}),\"\\uFF1A\\u5982\\u679C\\u5143\\u7D20\\u7C7B\\u578B\\u4E0D\\u540C\\uFF0CReact \\u5C06\\u7528\\u65B0\\u5143\\u7D20\\u66FF\\u6362\\u65E7\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u952E\\u6BD4\\u8F83\"}),\"\\uFF1A\\u5982\\u679C\\u5143\\u7D20\\u7C7B\\u578B\\u76F8\\u540C\\u4F46\\u5177\\u6709\\u4E0D\\u540C\\u7684\\u952E\\uFF0CReact \\u4F1A\\u5C06\\u5B83\\u4EEC\\u89C6\\u4E3A\\u4E0D\\u540C\\u7684\\u5143\\u7D20\\uFF0C\\u5E76\\u7528\\u65B0\\u5143\\u7D20\\u66FF\\u6362\\u65E7\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C5E\\u6027\\u548C\\u72B6\\u6001\\u6BD4\\u8F83\"}),\"\\uFF1A\\u5982\\u679C\\u5143\\u7D20\\u7C7B\\u578B\\u76F8\\u540C\\u4E14\\u5177\\u6709\\u76F8\\u540C\\u7684\\u952E\\uFF0CReact \\u5C06\\u6BD4\\u8F83\\u5B83\\u4EEC\\u7684\\u5C5E\\u6027\\u548C\\u72B6\\u6001\\u4EE5\\u786E\\u5B9A\\u53D1\\u751F\\u4E86\\u4EC0\\u4E48\\u53D8\\u5316\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u66F4\\u65B0 DOM\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E00\\u65E6\\u5DEE\\u5F02\\u7B97\\u6CD5\\u786E\\u5B9A\\u4E86\\u66F4\\u6539\\uFF0CReact \\u53EA\\u4F1A\\u66F4\\u65B0\\u5B9E\\u9645 DOM \\u4E2D\\u53D1\\u751F\\u66F4\\u6539\\u7684\\u90E8\\u5206\\u3002\\u8FD9\\u4F7F\\u5F97\\u66F4\\u65B0\\u9AD8\\u6548\\u4E14\\u5FEB\\u901F\\uFF0C\\u56E0\\u4E3A React \\u907F\\u514D\\u4E86\\u91CD\\u65B0\\u6E32\\u67D3\\u6574\\u4E2A DOM\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u793A\\u4F8B\\uFF0C\\u7528\\u4E8E\\u8BF4\\u660E\\u534F\\u8C03\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`class MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n  }\n\n  increment = () => {\n    this.setState({ count: this.state.count + 1 });\n  };\n\n  render() {\n    return (\n      <div>\n        <p>{this.state.count}</p>\n        <button onClick={this.increment}>Increment</button>\n      </div>\n    );\n  }\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u5F53\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"increment\"}),\" \\u65B9\\u6CD5\\u65F6\\uFF0C\\u72B6\\u6001\\u53D1\\u751F\\u53D8\\u5316\\uFF0CReact \\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\u3002\\u5DEE\\u5F02\\u7B97\\u6CD5\\u5C06\\u65B0\\u6811\\u4E0E\\u4E4B\\u524D\\u7684\\u6811\\u8FDB\\u884C\\u6BD4\\u8F83\\uFF0C\\u5E76\\u4EC5\\u4F7F\\u7528\\u65B0\\u7684\\u8BA1\\u6570 value \\u66F4\\u65B0 \",(0,e.jsx)(n.code,{children:\"<p>\"}),\" \\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/preserving-and-resetting-state\",children:\"React documentation on reconciliation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/what-is-the-virtual-dom-in-react/\",children:\"Understanding the virtual DOM\"})}),`\n`]})]})}function f(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(d,t)})):d(t)}var j=f;return g(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var m=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),O=(t,n)=>{for(var c in n)i(t,c,{get:n[c],enumerable:!0})},l=(t,n,c,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of M(n))!R.call(t,r)&&r!==c&&i(t,r,{get:()=>n[r],enumerable:!(h=u(n,r))||h.enumerable});return t};var g=(t,n,c)=>(c=t!=null?p(D(t)):{},l(n||!t||!t.__esModule?i(c,\"default\",{value:t,enumerable:!0}):c,t)),x=t=>l(i({},\"__esModule\",{value:!0}),t);var o=m((j,a)=>{a.exports=_jsx_runtime});var v={};O(v,{default:()=>s,frontmatter:()=>f});var e=g(o()),f={title:\"React \\u4E2D\\u7684\\u534F\\u8C03\\u662F\\u4EC0\\u4E48\\uFF1F\"};function d(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u4E2D\\u7684\\u534F\\u8C03\\u662F React \\u66F4\\u65B0 DOM \\u4EE5\\u5339\\u914D\\u865A\\u62DF DOM \\u7684\\u8FC7\\u7A0B\\u3002\\u5F53\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u6216\\u5C5E\\u6027\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0CReact \\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\uFF0C\\u5E76\\u5C06\\u5176\\u4E0E\\u4E4B\\u524D\\u7684\\u6811\\u8FDB\\u884C\\u6BD4\\u8F83\\u3002\\u8FD9\\u4E2A\\u6BD4\\u8F83\\u8FC7\\u7A0B\\u79F0\\u4E3A\\u201C\\u5DEE\\u5F02\\u201D\\u3002\\u7136\\u540E\\uFF0CReact \\u53EA\\u66F4\\u65B0\\u5B9E\\u9645 DOM \\u4E2D\\u53D1\\u751F\\u53D8\\u5316\\u7684\\u90E8\\u5206\\uFF0C\\u4ECE\\u800C\\u4F7F\\u66F4\\u65B0\\u9AD8\\u6548\\u4E14\\u5FEB\\u901F\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u4E2D\\u7684\\u534F\\u8C03\\u662F\\u4EC0\\u4E48\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7B80\\u4ECB\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u534F\\u8C03\\u662F React \\u4E2D\\u7684\\u4E00\\u4E2A\\u5173\\u952E\\u6982\\u5FF5\\uFF0C\\u5B83\\u5904\\u7406 React \\u5982\\u4F55\\u66F4\\u65B0 DOM \\u4EE5\\u5339\\u914D\\u865A\\u62DF DOM\\u3002\\u865A\\u62DF DOM \\u662F\\u5B9E\\u9645 DOM \\u7684\\u8F7B\\u91CF\\u7EA7\\u526F\\u672C\\uFF0CReact \\u4F7F\\u7528\\u5B83\\u6765\\u786E\\u5B9A\\u66F4\\u65B0\\u7528\\u6237\\u754C\\u9762\\u7684\\u6700\\u6709\\u6548\\u65B9\\u6CD5\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u865A\\u62DF DOM\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u7EF4\\u62A4\\u4E00\\u4E2A\\u865A\\u62DF DOM \\u4EE5\\u4F18\\u5316\\u66F4\\u65B0\\u3002\\u5F53\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u6216\\u5C5E\\u6027\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0CReact \\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\u3002\\u7136\\u540E\\u5C06\\u8FD9\\u68F5\\u65B0\\u6811\\u4E0E\\u4E4B\\u524D\\u7684\\u865A\\u62DF DOM \\u6811\\u8FDB\\u884C\\u6BD4\\u8F83\\uFF0C\\u4EE5\\u786E\\u5B9A\\u53D1\\u751F\\u4E86\\u4EC0\\u4E48\\u53D8\\u5316\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5DEE\\u5F02\\u7B97\\u6CD5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5C06\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\u4E0E\\u4E4B\\u524D\\u7684\\u6811\\u8FDB\\u884C\\u6BD4\\u8F83\\u7684\\u8FC7\\u7A0B\\u79F0\\u4E3A\\u201C\\u5DEE\\u5F02\\u201D\\u3002React \\u4F7F\\u7528\\u9AD8\\u5EA6\\u4F18\\u5316\\u7684\\u5DEE\\u5F02\\u7B97\\u6CD5\\u6765\\u6267\\u884C\\u6B64\\u6BD4\\u8F83\\u3002\\u8BE5\\u7B97\\u6CD5\\u7684\\u5DE5\\u4F5C\\u65B9\\u5F0F\\u5982\\u4E0B\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5143\\u7D20\\u7C7B\\u578B\\u6BD4\\u8F83\"}),\"\\uFF1A\\u5982\\u679C\\u5143\\u7D20\\u7C7B\\u578B\\u4E0D\\u540C\\uFF0CReact \\u5C06\\u7528\\u65B0\\u5143\\u7D20\\u66FF\\u6362\\u65E7\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u952E\\u6BD4\\u8F83\"}),\"\\uFF1A\\u5982\\u679C\\u5143\\u7D20\\u7C7B\\u578B\\u76F8\\u540C\\u4F46\\u5177\\u6709\\u4E0D\\u540C\\u7684\\u952E\\uFF0CReact \\u4F1A\\u5C06\\u5B83\\u4EEC\\u89C6\\u4E3A\\u4E0D\\u540C\\u7684\\u5143\\u7D20\\uFF0C\\u5E76\\u7528\\u65B0\\u5143\\u7D20\\u66FF\\u6362\\u65E7\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C5E\\u6027\\u548C\\u72B6\\u6001\\u6BD4\\u8F83\"}),\"\\uFF1A\\u5982\\u679C\\u5143\\u7D20\\u7C7B\\u578B\\u76F8\\u540C\\u4E14\\u5177\\u6709\\u76F8\\u540C\\u7684\\u952E\\uFF0CReact \\u5C06\\u6BD4\\u8F83\\u5B83\\u4EEC\\u7684\\u5C5E\\u6027\\u548C\\u72B6\\u6001\\u4EE5\\u786E\\u5B9A\\u53D1\\u751F\\u4E86\\u4EC0\\u4E48\\u53D8\\u5316\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u66F4\\u65B0 DOM\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E00\\u65E6\\u5DEE\\u5F02\\u7B97\\u6CD5\\u786E\\u5B9A\\u4E86\\u66F4\\u6539\\uFF0CReact \\u53EA\\u4F1A\\u66F4\\u65B0\\u5B9E\\u9645 DOM \\u4E2D\\u53D1\\u751F\\u66F4\\u6539\\u7684\\u90E8\\u5206\\u3002\\u8FD9\\u4F7F\\u5F97\\u66F4\\u65B0\\u9AD8\\u6548\\u4E14\\u5FEB\\u901F\\uFF0C\\u56E0\\u4E3A React \\u907F\\u514D\\u4E86\\u91CD\\u65B0\\u6E32\\u67D3\\u6574\\u4E2A DOM\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u793A\\u4F8B\\uFF0C\\u7528\\u4E8E\\u8BF4\\u660E\\u534F\\u8C03\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`class MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n  }\n\n  increment = () => {\n    this.setState({ count: this.state.count + 1 });\n  };\n\n  render() {\n    return (\n      <div>\n        <p>{this.state.count}</p>\n        <button onClick={this.increment}>Increment</button>\n      </div>\n    );\n  }\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u5F53\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"increment\"}),\" \\u65B9\\u6CD5\\u65F6\\uFF0C\\u72B6\\u6001\\u53D1\\u751F\\u53D8\\u5316\\uFF0CReact \\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\u3002\\u5DEE\\u5F02\\u7B97\\u6CD5\\u5C06\\u65B0\\u6811\\u4E0E\\u4E4B\\u524D\\u7684\\u6811\\u8FDB\\u884C\\u6BD4\\u8F83\\uFF0C\\u5E76\\u4EC5\\u4F7F\\u7528\\u65B0\\u7684\\u8BA1\\u6570 value \\u66F4\\u65B0 \",(0,e.jsx)(n.code,{children:\"<p>\"}),\" \\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/preserving-and-resetting-state\",children:\"React documentation on reconciliation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/what-is-the-virtual-dom-in-react/\",children:\"Understanding the virtual DOM\"})}),`\n`]})]})}function s(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(d,{...t})}):d(t)}return x(v);})();\n;return Component;"
 }
\ No newline at end of file
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 83cc667a3..faca39772 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var b=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),g=(i,e)=>{for(var r in e)a(i,r,{get:e[r],enumerable:!0})},o=(i,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of f(e))!m.call(i,c)&&c!==r&&a(i,c,{get:()=>e[c],enumerable:!(s=d(e,c))||s.enumerable});return i};var v=(i,e,r)=>(r=i!=null?u(p(i)):{},o(e||!i||!i.__esModule?a(r,\"default\",{value:i,enumerable:!0}):r,i)),w=i=>o(a({},\"__esModule\",{value:!0}),i);var t=b((k,l)=>{l.exports=_jsx_runtime});var T={};g(T,{default:()=>y,frontmatter:()=>x});var n=v(t()),x={title:\"What is recursion and how is it used in JavaScript?\"};function h(i){let e=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Recursion is a programming technique where a function calls itself to solve a problem. In JavaScript, recursion is used to solve problems that can be broken down into smaller, similar sub-problems. A base case is essential to stop the recursive calls and prevent infinite loops. For example, calculating the factorial of a number can be done using recursion:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function factorial(n) {\n  if (n === 0) {\n    return 1;\n  }\n  return n * factorial(n - 1);\n}\n\nconsole.log(factorial(4)); // Output: 24\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is recursion and how is it used in JavaScript?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition of recursion\"}),`\n`,(0,n.jsx)(e.p,{children:\"Recursion is a technique in programming where a function calls itself in order to solve a problem. This approach is particularly useful for problems that can be divided into smaller, similar sub-problems. The key components of a recursive function are:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Base case\"}),\": The condition under which the function stops calling itself, preventing an infinite loop.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Recursive case\"}),\": The part of the function where it calls itself with a modified argument, moving towards the base case.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example: Calculating factorial\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The factorial of a number \",(0,n.jsx)(e.code,{children:\"n\"}),\" (denoted as \",(0,n.jsx)(e.code,{children:\"n!\"}),\") is the product of all positive integers less than or equal to \",(0,n.jsx)(e.code,{children:\"n\"}),\". It can be defined recursively as:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"0! = 1\"}),\" (base case)\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"n! = n * (n - 1)!\"}),\" for \",(0,n.jsx)(e.code,{children:\"n > 0\"}),\" (recursive case)\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Here is how you can implement this in JavaScript:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function factorial(n) {\n  if (n === 0) {\n    // base case\n    return 1;\n  }\n  return n * factorial(n - 1); // recursive case\n}\n\nconsole.log(factorial(4)); // Output: 24\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Example: Fibonacci sequence\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Fibonacci sequence is another classic example of recursion. Each number in the sequence is the sum of the two preceding ones, usually starting with 0 and 1. The sequence can be defined recursively as:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"fib(0) = 0\"}),\" (base case)\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"fib(1) = 1\"}),\" (base case)\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"fib(n) = fib(n - 1) + fib(n - 2)\"}),\" for \",(0,n.jsx)(e.code,{children:\"n > 1\"}),\" (recursive case)\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Here is how you can implement this in JavaScript:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function fibonacci(n) {\n  if (n === 0) {\n    // base case\n    return 0;\n  }\n  if (n === 1) {\n    // base case\n    return 1;\n  }\n  return fibonacci(n - 1) + fibonacci(n - 2); // recursive case\n}\n\nconsole.log(fibonacci(6)); // Output: 8\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Tail recursion\"}),`\n`,(0,n.jsx)(e.p,{children:\"Tail recursion is a special form of recursion where the recursive call is the last operation in the function. This can be optimized by some JavaScript engines to improve performance and prevent stack overflow. Here is an example of a tail-recursive factorial function:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function factorial(n, acc = 1) {\n  if (n === 0) {\n    return acc;\n  }\n  return factorial(n - 1, n * acc);\n}\n\nconsole.log(factorial(4)); // Output: 24\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Use cases for recursion\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Tree traversal\"}),\": Recursion is often used to traverse tree structures, such as the DOM or binary trees.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Divide and conquer algorithms\"}),\": Algorithms like quicksort and mergesort use recursion to divide the problem into smaller sub-problems.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Dynamic programming\"}),\": Problems like the knapsack problem and certain graph algorithms can be solved using recursion.\"]}),`\n`]}),`\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/Recursion\",children:\"MDN Web Docs: Recursion\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/recursion\",children:\"JavaScript.info: Recursion and stack\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://eloquentjavascript.net/03_functions.html#h_recursion\",children:\"Eloquent JavaScript: Recursion\"})}),`\n`]})]})}function j(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(h,i)})):h(i)}var y=j;return w(T);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var g=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),v=(i,e)=>{for(var r in e)a(i,r,{get:e[r],enumerable:!0})},s=(i,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!b.call(i,c)&&c!==r&&a(i,c,{get:()=>e[c],enumerable:!(o=f(e,c))||o.enumerable});return i};var w=(i,e,r)=>(r=i!=null?d(m(i)):{},s(e||!i||!i.__esModule?a(r,\"default\",{value:i,enumerable:!0}):r,i)),x=i=>s(a({},\"__esModule\",{value:!0}),i);var t=g((q,l)=>{l.exports=_jsx_runtime});var T={};v(T,{default:()=>u,frontmatter:()=>y});var n=w(t()),y={title:\"What is recursion and how is it used in JavaScript?\"};function h(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Recursion is a programming technique where a function calls itself to solve a problem. In JavaScript, recursion is used to solve problems that can be broken down into smaller, similar sub-problems. A base case is essential to stop the recursive calls and prevent infinite loops. For example, calculating the factorial of a number can be done using recursion:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function factorial(n) {\n  if (n === 0) {\n    return 1;\n  }\n  return n * factorial(n - 1);\n}\n\nconsole.log(factorial(4)); // Output: 24\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is recursion and how is it used in JavaScript?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition of recursion\"}),`\n`,(0,n.jsx)(e.p,{children:\"Recursion is a technique in programming where a function calls itself in order to solve a problem. This approach is particularly useful for problems that can be divided into smaller, similar sub-problems. The key components of a recursive function are:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Base case\"}),\": The condition under which the function stops calling itself, preventing an infinite loop.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Recursive case\"}),\": The part of the function where it calls itself with a modified argument, moving towards the base case.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example: Calculating factorial\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The factorial of a number \",(0,n.jsx)(e.code,{children:\"n\"}),\" (denoted as \",(0,n.jsx)(e.code,{children:\"n!\"}),\") is the product of all positive integers less than or equal to \",(0,n.jsx)(e.code,{children:\"n\"}),\". It can be defined recursively as:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"0! = 1\"}),\" (base case)\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"n! = n * (n - 1)!\"}),\" for \",(0,n.jsx)(e.code,{children:\"n > 0\"}),\" (recursive case)\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Here is how you can implement this in JavaScript:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function factorial(n) {\n  if (n === 0) {\n    // base case\n    return 1;\n  }\n  return n * factorial(n - 1); // recursive case\n}\n\nconsole.log(factorial(4)); // Output: 24\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Example: Fibonacci sequence\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Fibonacci sequence is another classic example of recursion. Each number in the sequence is the sum of the two preceding ones, usually starting with 0 and 1. The sequence can be defined recursively as:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"fib(0) = 0\"}),\" (base case)\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"fib(1) = 1\"}),\" (base case)\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"fib(n) = fib(n - 1) + fib(n - 2)\"}),\" for \",(0,n.jsx)(e.code,{children:\"n > 1\"}),\" (recursive case)\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Here is how you can implement this in JavaScript:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function fibonacci(n) {\n  if (n === 0) {\n    // base case\n    return 0;\n  }\n  if (n === 1) {\n    // base case\n    return 1;\n  }\n  return fibonacci(n - 1) + fibonacci(n - 2); // recursive case\n}\n\nconsole.log(fibonacci(6)); // Output: 8\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Tail recursion\"}),`\n`,(0,n.jsx)(e.p,{children:\"Tail recursion is a special form of recursion where the recursive call is the last operation in the function. This can be optimized by some JavaScript engines to improve performance and prevent stack overflow. Here is an example of a tail-recursive factorial function:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function factorial(n, acc = 1) {\n  if (n === 0) {\n    return acc;\n  }\n  return factorial(n - 1, n * acc);\n}\n\nconsole.log(factorial(4)); // Output: 24\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Use cases for recursion\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Tree traversal\"}),\": Recursion is often used to traverse tree structures, such as the DOM or binary trees.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Divide and conquer algorithms\"}),\": Algorithms like quicksort and mergesort use recursion to divide the problem into smaller sub-problems.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Dynamic programming\"}),\": Problems like the knapsack problem and certain graph algorithms can be solved using recursion.\"]}),`\n`]}),`\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/Recursion\",children:\"MDN Web Docs: Recursion\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/recursion\",children:\"JavaScript.info: Recursion and stack\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://eloquentjavascript.net/03_functions.html#h_recursion\",children:\"Eloquent JavaScript: Recursion\"})}),`\n`]})]})}function u(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(h,{...i})}):h(i)}return x(T);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-recursion-and-how-is-it-used-in-javascript/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-recursion-and-how-is-it-used-in-javascript/zh-CN.json
index b56dd7e2b..942272708 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-recursion-and-how-is-it-used-in-javascript/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-recursion-and-how-is-it-used-in-javascript/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-recursion-and-how-is-it-used-in-javascript/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),b=(r,n)=>{for(var c in n)l(r,c,{get:n[c],enumerable:!0})},a=(r,n,c,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of f(n))!g.call(r,i)&&i!==c&&l(r,i,{get:()=>n[i],enumerable:!(t=u(n,i))||t.enumerable});return r};var m=(r,n,c)=>(c=r!=null?s(p(r)):{},a(n||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),j=r=>a(l({},\"__esModule\",{value:!0}),r);var o=v((D,h)=>{h.exports=_jsx_runtime});var S={};b(S,{default:()=>J,frontmatter:()=>x});var e=m(o()),x={title:\"\\u4EC0\\u4E48\\u662F\\u9012\\u5F52\\u4EE5\\u53CA\\u5B83\\u5728 JavaScript \\u4E2D\\u5982\\u4F55\\u4F7F\\u7528\\uFF1F\"};function d(r){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9012\\u5F52\\u662F\\u4E00\\u79CD\\u7F16\\u7A0B\\u6280\\u672F\\uFF0C\\u5176\\u4E2D\\u4E00\\u4E2A\\u51FD\\u6570\\u8C03\\u7528\\u81EA\\u8EAB\\u6765\\u89E3\\u51B3\\u95EE\\u9898\\u3002\\u5728 JavaScript \\u4E2D\\uFF0C\\u9012\\u5F52\\u7528\\u4E8E\\u89E3\\u51B3\\u53EF\\u4EE5\\u5206\\u89E3\\u4E3A\\u66F4\\u5C0F\\u3001\\u76F8\\u4F3C\\u7684\\u5B50\\u95EE\\u9898\\u7684\\u95EE\\u9898\\u3002\\u57FA\\u672C\\u60C5\\u51B5\\u5BF9\\u4E8E\\u505C\\u6B62\\u9012\\u5F52\\u8C03\\u7528\\u548C\\u9632\\u6B62\\u65E0\\u9650\\u5FAA\\u73AF\\u81F3\\u5173\\u91CD\\u8981\\u3002\\u4F8B\\u5982\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u9012\\u5F52\\u8BA1\\u7B97\\u4E00\\u4E2A\\u6570\\u7684\\u9636\\u4E58\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function factorial(n) {\n  if (n === 0) {\n    return 1;\n  }\n  return n * factorial(n - 1);\n}\n\nconsole.log(factorial(4)); // Output: 24\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u9012\\u5F52\\u4EE5\\u53CA\\u5B83\\u5728 JavaScript \\u4E2D\\u5982\\u4F55\\u4F7F\\u7528\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9012\\u5F52\\u7684\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9012\\u5F52\\u662F\\u4E00\\u79CD\\u7F16\\u7A0B\\u6280\\u672F\\uFF0C\\u5176\\u4E2D\\u4E00\\u4E2A\\u51FD\\u6570\\u8C03\\u7528\\u81EA\\u8EAB\\u6765\\u89E3\\u51B3\\u95EE\\u9898\\u3002\\u8FD9\\u79CD\\u65B9\\u6CD5\\u5BF9\\u4E8E\\u53EF\\u4EE5\\u5206\\u89E3\\u4E3A\\u66F4\\u5C0F\\u3001\\u76F8\\u4F3C\\u7684\\u5B50\\u95EE\\u9898\\u7684\\u95EE\\u9898\\u7279\\u522B\\u6709\\u7528\\u3002\\u9012\\u5F52\\u51FD\\u6570\\u7684\\u4E3B\\u8981\\u7EC4\\u6210\\u90E8\\u5206\\u662F\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u57FA\\u672C\\u60C5\\u51B5\"}),\"\\uFF1A\\u51FD\\u6570\\u505C\\u6B62\\u8C03\\u7528\\u81EA\\u8EAB\\u7684\\u6761\\u4EF6\\uFF0C\\u9632\\u6B62\\u65E0\\u9650\\u5FAA\\u73AF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9012\\u5F52\\u60C5\\u51B5\"}),\"\\uFF1A\\u51FD\\u6570\\u8C03\\u7528\\u81EA\\u8EAB\\u5E76\\u4F7F\\u7528\\u4FEE\\u6539\\u540E\\u7684\\u53C2\\u6570\\u7684\\u90E8\\u5206\\uFF0C\\u5411\\u57FA\\u672C\\u60C5\\u51B5\\u79FB\\u52A8\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\\uFF1A\\u8BA1\\u7B97\\u9636\\u4E58\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E00\\u4E2A\\u6570 \",(0,e.jsx)(n.code,{children:\"n\"}),\" \\u7684\\u9636\\u4E58\\uFF08\\u8868\\u793A\\u4E3A \",(0,e.jsx)(n.code,{children:\"n!\"}),\"\\uFF09\\u662F\\u6240\\u6709\\u5C0F\\u4E8E\\u6216\\u7B49\\u4E8E \",(0,e.jsx)(n.code,{children:\"n\"}),\" \\u7684\\u6B63\\u6574\\u6570\\u7684\\u4E58\\u79EF\\u3002\\u5B83\\u53EF\\u4EE5\\u9012\\u5F52\\u5B9A\\u4E49\\u4E3A\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"0! = 1\"}),\"\\uFF08\\u57FA\\u672C\\u60C5\\u51B5\\uFF09\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"n! = n * (n - 1)!\"}),\" \\u5BF9\\u4E8E \",(0,e.jsx)(n.code,{children:\"n > 0\"}),\"\\uFF08\\u9012\\u5F52\\u60C5\\u51B5\\uFF09\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u5B9E\\u73B0\\u6B64\\u529F\\u80FD\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function factorial(n) {\n  if (n === 0) {\n    // base case\n    return 1;\n  }\n  return n * factorial(n - 1); // recursive case\n}\n\nconsole.log(factorial(4)); // Output: 24\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\\uFF1A\\u6590\\u6CE2\\u90A3\\u5951\\u6570\\u5217\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6590\\u6CE2\\u90A3\\u5951\\u6570\\u5217\\u662F\\u9012\\u5F52\\u7684\\u53E6\\u4E00\\u4E2A\\u7ECF\\u5178\\u4F8B\\u5B50\\u3002\\u8BE5\\u6570\\u5217\\u4E2D\\u7684\\u6BCF\\u4E2A\\u6570\\u5B57\\u90FD\\u662F\\u524D\\u4E24\\u4E2A\\u6570\\u5B57\\u7684\\u548C\\uFF0C\\u901A\\u5E38\\u4ECE 0 \\u548C 1 \\u5F00\\u59CB\\u3002\\u8BE5\\u6570\\u5217\\u53EF\\u4EE5\\u9012\\u5F52\\u5B9A\\u4E49\\u4E3A\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"fib(0) = 0\"}),\"\\uFF08\\u57FA\\u672C\\u60C5\\u51B5\\uFF09\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"fib(1) = 1\"}),\"\\uFF08\\u57FA\\u672C\\u60C5\\u51B5\\uFF09\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"fib(n) = fib(n - 1) + fib(n - 2)\"}),\" \\u5BF9\\u4E8E \",(0,e.jsx)(n.code,{children:\"n > 1\"}),\"\\uFF08\\u9012\\u5F52\\u60C5\\u51B5\\uFF09\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u5B9E\\u73B0\\u6B64\\u529F\\u80FD\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fibonacci(n) {\n  if (n === 0) {\n    // base case\n    return 0;\n  }\n  if (n === 1) {\n    // base case\n    return 1;\n  }\n  return fibonacci(n - 1) + fibonacci(n - 2); // recursive case\n}\n\nconsole.log(fibonacci(6)); // Output: 8\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5C3E\\u9012\\u5F52\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5C3E\\u9012\\u5F52\\u662F\\u4E00\\u79CD\\u7279\\u6B8A\\u5F62\\u5F0F\\u7684\\u9012\\u5F52\\uFF0C\\u5176\\u4E2D\\u9012\\u5F52\\u8C03\\u7528\\u662F\\u51FD\\u6570\\u4E2D\\u7684\\u6700\\u540E\\u4E00\\u4E2A\\u64CD\\u4F5C\\u3002\\u8FD9\\u53EF\\u4EE5\\u88AB\\u4E00\\u4E9B JavaScript \\u5F15\\u64CE\\u4F18\\u5316\\uFF0C\\u4EE5\\u63D0\\u9AD8\\u6027\\u80FD\\u5E76\\u9632\\u6B62\\u5806\\u6808\\u6EA2\\u51FA\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u5C3E\\u9012\\u5F52\\u9636\\u4E58\\u51FD\\u6570\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function factorial(n, acc = 1) {\n  if (n === 0) {\n    return acc;\n  }\n  return factorial(n - 1, n * acc);\n}\n\nconsole.log(factorial(4)); // Output: 24\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9012\\u5F52\\u7684\\u7528\\u4F8B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6811\\u904D\\u5386\"}),\"\\uFF1A\\u9012\\u5F52\\u5E38\\u7528\\u4E8E\\u904D\\u5386\\u6811\\u7ED3\\u6784\\uFF0C\\u4F8B\\u5982 DOM \\u6216\\u4E8C\\u53C9\\u6811\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5206\\u6CBB\\u7B97\\u6CD5\"}),\"\\uFF1A\\u8BF8\\u5982\\u5FEB\\u901F\\u6392\\u5E8F\\u548C\\u5F52\\u5E76\\u6392\\u5E8F\\u4E4B\\u7C7B\\u7684\\u7B97\\u6CD5\\u4F7F\\u7528\\u9012\\u5F52\\u5C06\\u95EE\\u9898\\u5206\\u89E3\\u4E3A\\u66F4\\u5C0F\\u7684\\u5B50\\u95EE\\u9898\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u52A8\\u6001\\u89C4\\u5212\"}),\"\\uFF1A\\u8BF8\\u5982\\u80CC\\u5305\\u95EE\\u9898\\u548C\\u67D0\\u4E9B\\u56FE\\u7B97\\u6CD5\\u4E4B\\u7C7B\\u7684\\u95EE\\u9898\\u53EF\\u4EE5\\u4F7F\\u7528\\u9012\\u5F52\\u6765\\u89E3\\u51B3\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Glossary/Recursion\",children:\"MDN Web Docs: \\u9012\\u5F52\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://zh.javascript.info/recursion\",children:\"JavaScript.info: \\u9012\\u5F52\\u548C\\u6808\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/03_functions.html#h_recursion\",children:\"Eloquent JavaScript: \\u9012\\u5F52\"})}),`\n`]})]})}function _(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(d,r)})):d(r)}var J=_;return j(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var m=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),b=(r,n)=>{for(var c in n)l(r,c,{get:n[c],enumerable:!0})},a=(r,n,c,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of p(n))!v.call(r,i)&&i!==c&&l(r,i,{get:()=>n[i],enumerable:!(t=f(n,i))||t.enumerable});return r};var j=(r,n,c)=>(c=r!=null?u(g(r)):{},a(n||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),x=r=>a(l({},\"__esModule\",{value:!0}),r);var o=m((D,h)=>{h.exports=_jsx_runtime});var J={};b(J,{default:()=>s,frontmatter:()=>_});var e=j(o()),_={title:\"\\u4EC0\\u4E48\\u662F\\u9012\\u5F52\\u4EE5\\u53CA\\u5B83\\u5728 JavaScript \\u4E2D\\u5982\\u4F55\\u4F7F\\u7528\\uFF1F\"};function d(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9012\\u5F52\\u662F\\u4E00\\u79CD\\u7F16\\u7A0B\\u6280\\u672F\\uFF0C\\u5176\\u4E2D\\u4E00\\u4E2A\\u51FD\\u6570\\u8C03\\u7528\\u81EA\\u8EAB\\u6765\\u89E3\\u51B3\\u95EE\\u9898\\u3002\\u5728 JavaScript \\u4E2D\\uFF0C\\u9012\\u5F52\\u7528\\u4E8E\\u89E3\\u51B3\\u53EF\\u4EE5\\u5206\\u89E3\\u4E3A\\u66F4\\u5C0F\\u3001\\u76F8\\u4F3C\\u7684\\u5B50\\u95EE\\u9898\\u7684\\u95EE\\u9898\\u3002\\u57FA\\u672C\\u60C5\\u51B5\\u5BF9\\u4E8E\\u505C\\u6B62\\u9012\\u5F52\\u8C03\\u7528\\u548C\\u9632\\u6B62\\u65E0\\u9650\\u5FAA\\u73AF\\u81F3\\u5173\\u91CD\\u8981\\u3002\\u4F8B\\u5982\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u9012\\u5F52\\u8BA1\\u7B97\\u4E00\\u4E2A\\u6570\\u7684\\u9636\\u4E58\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function factorial(n) {\n  if (n === 0) {\n    return 1;\n  }\n  return n * factorial(n - 1);\n}\n\nconsole.log(factorial(4)); // Output: 24\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u9012\\u5F52\\u4EE5\\u53CA\\u5B83\\u5728 JavaScript \\u4E2D\\u5982\\u4F55\\u4F7F\\u7528\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9012\\u5F52\\u7684\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9012\\u5F52\\u662F\\u4E00\\u79CD\\u7F16\\u7A0B\\u6280\\u672F\\uFF0C\\u5176\\u4E2D\\u4E00\\u4E2A\\u51FD\\u6570\\u8C03\\u7528\\u81EA\\u8EAB\\u6765\\u89E3\\u51B3\\u95EE\\u9898\\u3002\\u8FD9\\u79CD\\u65B9\\u6CD5\\u5BF9\\u4E8E\\u53EF\\u4EE5\\u5206\\u89E3\\u4E3A\\u66F4\\u5C0F\\u3001\\u76F8\\u4F3C\\u7684\\u5B50\\u95EE\\u9898\\u7684\\u95EE\\u9898\\u7279\\u522B\\u6709\\u7528\\u3002\\u9012\\u5F52\\u51FD\\u6570\\u7684\\u4E3B\\u8981\\u7EC4\\u6210\\u90E8\\u5206\\u662F\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u57FA\\u672C\\u60C5\\u51B5\"}),\"\\uFF1A\\u51FD\\u6570\\u505C\\u6B62\\u8C03\\u7528\\u81EA\\u8EAB\\u7684\\u6761\\u4EF6\\uFF0C\\u9632\\u6B62\\u65E0\\u9650\\u5FAA\\u73AF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9012\\u5F52\\u60C5\\u51B5\"}),\"\\uFF1A\\u51FD\\u6570\\u8C03\\u7528\\u81EA\\u8EAB\\u5E76\\u4F7F\\u7528\\u4FEE\\u6539\\u540E\\u7684\\u53C2\\u6570\\u7684\\u90E8\\u5206\\uFF0C\\u5411\\u57FA\\u672C\\u60C5\\u51B5\\u79FB\\u52A8\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\\uFF1A\\u8BA1\\u7B97\\u9636\\u4E58\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4E00\\u4E2A\\u6570 \",(0,e.jsx)(n.code,{children:\"n\"}),\" \\u7684\\u9636\\u4E58\\uFF08\\u8868\\u793A\\u4E3A \",(0,e.jsx)(n.code,{children:\"n!\"}),\"\\uFF09\\u662F\\u6240\\u6709\\u5C0F\\u4E8E\\u6216\\u7B49\\u4E8E \",(0,e.jsx)(n.code,{children:\"n\"}),\" \\u7684\\u6B63\\u6574\\u6570\\u7684\\u4E58\\u79EF\\u3002\\u5B83\\u53EF\\u4EE5\\u9012\\u5F52\\u5B9A\\u4E49\\u4E3A\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"0! = 1\"}),\"\\uFF08\\u57FA\\u672C\\u60C5\\u51B5\\uFF09\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"n! = n * (n - 1)!\"}),\" \\u5BF9\\u4E8E \",(0,e.jsx)(n.code,{children:\"n > 0\"}),\"\\uFF08\\u9012\\u5F52\\u60C5\\u51B5\\uFF09\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u5B9E\\u73B0\\u6B64\\u529F\\u80FD\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function factorial(n) {\n  if (n === 0) {\n    // base case\n    return 1;\n  }\n  return n * factorial(n - 1); // recursive case\n}\n\nconsole.log(factorial(4)); // Output: 24\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\\uFF1A\\u6590\\u6CE2\\u90A3\\u5951\\u6570\\u5217\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6590\\u6CE2\\u90A3\\u5951\\u6570\\u5217\\u662F\\u9012\\u5F52\\u7684\\u53E6\\u4E00\\u4E2A\\u7ECF\\u5178\\u4F8B\\u5B50\\u3002\\u8BE5\\u6570\\u5217\\u4E2D\\u7684\\u6BCF\\u4E2A\\u6570\\u5B57\\u90FD\\u662F\\u524D\\u4E24\\u4E2A\\u6570\\u5B57\\u7684\\u548C\\uFF0C\\u901A\\u5E38\\u4ECE 0 \\u548C 1 \\u5F00\\u59CB\\u3002\\u8BE5\\u6570\\u5217\\u53EF\\u4EE5\\u9012\\u5F52\\u5B9A\\u4E49\\u4E3A\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"fib(0) = 0\"}),\"\\uFF08\\u57FA\\u672C\\u60C5\\u51B5\\uFF09\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"fib(1) = 1\"}),\"\\uFF08\\u57FA\\u672C\\u60C5\\u51B5\\uFF09\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"fib(n) = fib(n - 1) + fib(n - 2)\"}),\" \\u5BF9\\u4E8E \",(0,e.jsx)(n.code,{children:\"n > 1\"}),\"\\uFF08\\u9012\\u5F52\\u60C5\\u51B5\\uFF09\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u5982\\u4F55\\u5728 JavaScript \\u4E2D\\u5B9E\\u73B0\\u6B64\\u529F\\u80FD\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function fibonacci(n) {\n  if (n === 0) {\n    // base case\n    return 0;\n  }\n  if (n === 1) {\n    // base case\n    return 1;\n  }\n  return fibonacci(n - 1) + fibonacci(n - 2); // recursive case\n}\n\nconsole.log(fibonacci(6)); // Output: 8\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5C3E\\u9012\\u5F52\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5C3E\\u9012\\u5F52\\u662F\\u4E00\\u79CD\\u7279\\u6B8A\\u5F62\\u5F0F\\u7684\\u9012\\u5F52\\uFF0C\\u5176\\u4E2D\\u9012\\u5F52\\u8C03\\u7528\\u662F\\u51FD\\u6570\\u4E2D\\u7684\\u6700\\u540E\\u4E00\\u4E2A\\u64CD\\u4F5C\\u3002\\u8FD9\\u53EF\\u4EE5\\u88AB\\u4E00\\u4E9B JavaScript \\u5F15\\u64CE\\u4F18\\u5316\\uFF0C\\u4EE5\\u63D0\\u9AD8\\u6027\\u80FD\\u5E76\\u9632\\u6B62\\u5806\\u6808\\u6EA2\\u51FA\\u3002\\u8FD9\\u662F\\u4E00\\u4E2A\\u5C3E\\u9012\\u5F52\\u9636\\u4E58\\u51FD\\u6570\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function factorial(n, acc = 1) {\n  if (n === 0) {\n    return acc;\n  }\n  return factorial(n - 1, n * acc);\n}\n\nconsole.log(factorial(4)); // Output: 24\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9012\\u5F52\\u7684\\u7528\\u4F8B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6811\\u904D\\u5386\"}),\"\\uFF1A\\u9012\\u5F52\\u5E38\\u7528\\u4E8E\\u904D\\u5386\\u6811\\u7ED3\\u6784\\uFF0C\\u4F8B\\u5982 DOM \\u6216\\u4E8C\\u53C9\\u6811\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5206\\u6CBB\\u7B97\\u6CD5\"}),\"\\uFF1A\\u8BF8\\u5982\\u5FEB\\u901F\\u6392\\u5E8F\\u548C\\u5F52\\u5E76\\u6392\\u5E8F\\u4E4B\\u7C7B\\u7684\\u7B97\\u6CD5\\u4F7F\\u7528\\u9012\\u5F52\\u5C06\\u95EE\\u9898\\u5206\\u89E3\\u4E3A\\u66F4\\u5C0F\\u7684\\u5B50\\u95EE\\u9898\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u52A8\\u6001\\u89C4\\u5212\"}),\"\\uFF1A\\u8BF8\\u5982\\u80CC\\u5305\\u95EE\\u9898\\u548C\\u67D0\\u4E9B\\u56FE\\u7B97\\u6CD5\\u4E4B\\u7C7B\\u7684\\u95EE\\u9898\\u53EF\\u4EE5\\u4F7F\\u7528\\u9012\\u5F52\\u6765\\u89E3\\u51B3\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Glossary/Recursion\",children:\"MDN Web Docs: \\u9012\\u5F52\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://zh.javascript.info/recursion\",children:\"JavaScript.info: \\u9012\\u5F52\\u548C\\u6808\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/03_functions.html#h_recursion\",children:\"Eloquent JavaScript: \\u9012\\u5F52\"})}),`\n`]})]})}function s(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(d,{...r})}):d(r)}return x(J);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-command-pattern-and-how-is-it-used/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-command-pattern-and-how-is-it-used/en-US.json
index c83ede08f..c7cbfe9b4 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-command-pattern-and-how-is-it-used/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-command-pattern-and-how-is-it-used/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-command-pattern-and-how-is-it-used/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var f=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),C=(t,n)=>{for(var o in n)r(t,o,{get:n[o],enumerable:!0})},a=(t,n,o,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of g(n))!p.call(t,i)&&i!==o&&r(t,i,{get:()=>n[i],enumerable:!(s=m(n,i))||s.enumerable});return t};var L=(t,n,o)=>(o=t!=null?d(u(t)):{},a(n||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),x=t=>a(r({},\"__esModule\",{value:!0}),t);var l=f((q,h)=>{h.exports=_jsx_runtime});var O={};C(O,{default:()=>v,frontmatter:()=>w});var e=L(l()),w={title:\"What is the Command pattern and how is it used?\"};function c(t){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"The Command pattern is a behavioral design pattern that turns a request into a stand-alone object containing all information about the request. This transformation allows for parameterization of methods with different requests, queuing of requests, and logging of the requests. It also supports undoable operations. In JavaScript, it can be implemented by creating command objects with \",(0,e.jsx)(n.code,{children:\"execute\"}),\" and \",(0,e.jsx)(n.code,{children:\"undo\"}),\" methods.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Command {\n  execute() {}\n  undo() {}\n}\n\nclass LightOnCommand extends Command {\n  constructor(light) {\n    super();\n    this.light = light;\n  }\n  execute() {\n    this.light.on();\n  }\n  undo() {\n    this.light.off();\n  }\n}\n\nclass Light {\n  on() {\n    console.log('Light is on');\n  }\n  off() {\n    console.log('Light is off');\n  }\n}\n\nconst light = new Light();\nconst lightOnCommand = new LightOnCommand(light);\nlightOnCommand.execute(); // Light is on\nlightOnCommand.undo(); // Light is off\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"What is the Command pattern and how is it used?\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Definition\"}),`\n`,(0,e.jsx)(n.p,{children:\"The Command pattern is a behavioral design pattern that encapsulates a request as an object, thereby allowing for the parameterization of clients with queues, requests, and operations. It also provides support for undoable operations.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Components\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Command\"}),\": Declares an interface for executing an operation.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ConcreteCommand\"}),\": Implements the \",(0,e.jsx)(n.code,{children:\"execute\"}),\" method by invoking the corresponding operation(s) on \",(0,e.jsx)(n.code,{children:\"Receiver\"}),\".\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Receiver\"}),\": Knows how to perform the operations associated with carrying out a request.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Invoker\"}),\": Asks the command to carry out the request.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Client\"}),\": Creates a \",(0,e.jsx)(n.code,{children:\"ConcreteCommand\"}),\" object and sets its receiver.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Implementation in JavaScript\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Step 1: Define the Command interface\n\nclass Command {\n  execute() {}\n  undo() {}\n}\n\n// Step 2: Create ConcreteCommand classes\n\nclass LightOnCommand extends Command {\n  constructor(light) {\n    super();\n    this.light = light;\n  }\n  execute() {\n    this.light.on();\n  }\n  undo() {\n    this.light.off();\n  }\n}\n\nclass LightOffCommand extends Command {\n  constructor(light) {\n    super();\n    this.light = light;\n  }\n  execute() {\n    this.light.off();\n  }\n  undo() {\n    this.light.on();\n  }\n}\n\n// Step 3: Define the Receiver\n\nclass Light {\n  on() {\n    console.log('Light is on');\n  }\n  off() {\n    console.log('Light is off');\n  }\n}\n\n// Step 4: Create the Invoker\n\nclass RemoteControl {\n  setCommand(command) {\n    this.command = command;\n  }\n  pressButton() {\n    this.command.execute();\n  }\n  pressUndo() {\n    this.command.undo();\n  }\n}\n\n// Step 5: Client code\n\nconst light = new Light();\nconst lightOnCommand = new LightOnCommand(light);\nconst lightOffCommand = new LightOffCommand(light);\n\nconst remote = new RemoteControl();\nremote.setCommand(lightOnCommand);\nremote.pressButton(); // Light is on\nremote.pressUndo(); // Light is off\n\nremote.setCommand(lightOffCommand);\nremote.pressButton(); // Light is off\nremote.pressUndo(); // Light is on\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Use cases\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Undo/Redo functionality\"}),\": The Command pattern is ideal for implementing undo and redo operations.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Macro commands\"}),\": It can be used to implement a sequence of commands.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Logging changes\"}),\": It helps in logging changes and auditing them later.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"GUI buttons and menu items\"}),\": It is useful for implementing actions triggered by GUI elements.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://refactoring.guru/design-patterns/command\",children:\"Refactoring Guru: Command Pattern\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.dofactory.com/javascript/design-patterns/command\",children:\"JavaScript Design Patterns: Command\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Command_pattern\",children:\"MDN Web Docs: Command Pattern\"})}),`\n`]})]})}function b(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(c,t)})):c(t)}var v=b;return x(O);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var C=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),L=(t,n)=>{for(var o in n)r(t,o,{get:n[o],enumerable:!0})},a=(t,n,o,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of u(n))!f.call(t,i)&&i!==o&&r(t,i,{get:()=>n[i],enumerable:!(s=g(n,i))||s.enumerable});return t};var x=(t,n,o)=>(o=t!=null?m(p(t)):{},a(n||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),w=t=>a(r({},\"__esModule\",{value:!0}),t);var l=C((j,h)=>{h.exports=_jsx_runtime});var v={};L(v,{default:()=>c,frontmatter:()=>b});var e=x(l()),b={title:\"What is the Command pattern and how is it used?\"};function d(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"The Command pattern is a behavioral design pattern that turns a request into a stand-alone object containing all information about the request. This transformation allows for parameterization of methods with different requests, queuing of requests, and logging of the requests. It also supports undoable operations. In JavaScript, it can be implemented by creating command objects with \",(0,e.jsx)(n.code,{children:\"execute\"}),\" and \",(0,e.jsx)(n.code,{children:\"undo\"}),\" methods.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Command {\n  execute() {}\n  undo() {}\n}\n\nclass LightOnCommand extends Command {\n  constructor(light) {\n    super();\n    this.light = light;\n  }\n  execute() {\n    this.light.on();\n  }\n  undo() {\n    this.light.off();\n  }\n}\n\nclass Light {\n  on() {\n    console.log('Light is on');\n  }\n  off() {\n    console.log('Light is off');\n  }\n}\n\nconst light = new Light();\nconst lightOnCommand = new LightOnCommand(light);\nlightOnCommand.execute(); // Light is on\nlightOnCommand.undo(); // Light is off\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"What is the Command pattern and how is it used?\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Definition\"}),`\n`,(0,e.jsx)(n.p,{children:\"The Command pattern is a behavioral design pattern that encapsulates a request as an object, thereby allowing for the parameterization of clients with queues, requests, and operations. It also provides support for undoable operations.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Components\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Command\"}),\": Declares an interface for executing an operation.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ConcreteCommand\"}),\": Implements the \",(0,e.jsx)(n.code,{children:\"execute\"}),\" method by invoking the corresponding operation(s) on \",(0,e.jsx)(n.code,{children:\"Receiver\"}),\".\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Receiver\"}),\": Knows how to perform the operations associated with carrying out a request.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Invoker\"}),\": Asks the command to carry out the request.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Client\"}),\": Creates a \",(0,e.jsx)(n.code,{children:\"ConcreteCommand\"}),\" object and sets its receiver.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Implementation in JavaScript\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Step 1: Define the Command interface\n\nclass Command {\n  execute() {}\n  undo() {}\n}\n\n// Step 2: Create ConcreteCommand classes\n\nclass LightOnCommand extends Command {\n  constructor(light) {\n    super();\n    this.light = light;\n  }\n  execute() {\n    this.light.on();\n  }\n  undo() {\n    this.light.off();\n  }\n}\n\nclass LightOffCommand extends Command {\n  constructor(light) {\n    super();\n    this.light = light;\n  }\n  execute() {\n    this.light.off();\n  }\n  undo() {\n    this.light.on();\n  }\n}\n\n// Step 3: Define the Receiver\n\nclass Light {\n  on() {\n    console.log('Light is on');\n  }\n  off() {\n    console.log('Light is off');\n  }\n}\n\n// Step 4: Create the Invoker\n\nclass RemoteControl {\n  setCommand(command) {\n    this.command = command;\n  }\n  pressButton() {\n    this.command.execute();\n  }\n  pressUndo() {\n    this.command.undo();\n  }\n}\n\n// Step 5: Client code\n\nconst light = new Light();\nconst lightOnCommand = new LightOnCommand(light);\nconst lightOffCommand = new LightOffCommand(light);\n\nconst remote = new RemoteControl();\nremote.setCommand(lightOnCommand);\nremote.pressButton(); // Light is on\nremote.pressUndo(); // Light is off\n\nremote.setCommand(lightOffCommand);\nremote.pressButton(); // Light is off\nremote.pressUndo(); // Light is on\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Use cases\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Undo/Redo functionality\"}),\": The Command pattern is ideal for implementing undo and redo operations.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Macro commands\"}),\": It can be used to implement a sequence of commands.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Logging changes\"}),\": It helps in logging changes and auditing them later.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"GUI buttons and menu items\"}),\": It is useful for implementing actions triggered by GUI elements.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://refactoring.guru/design-patterns/command\",children:\"Refactoring Guru: Command Pattern\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.dofactory.com/javascript/design-patterns/command\",children:\"JavaScript Design Patterns: Command\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Command_pattern\",children:\"MDN Web Docs: Command Pattern\"})}),`\n`]})]})}function c(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(d,{...t})}):d(t)}return w(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-command-pattern-and-how-is-it-used/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-command-pattern-and-how-is-it-used/zh-CN.json
index fa4bbdd5d..4d072dae7 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-command-pattern-and-how-is-it-used/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-command-pattern-and-how-is-it-used/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-command-pattern-and-how-is-it-used/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var C=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),p=(t,n)=>{for(var o in n)r(t,o,{get:n[o],enumerable:!0})},c=(t,n,o,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of g(n))!f.call(t,i)&&i!==o&&r(t,i,{get:()=>n[i],enumerable:!(h=a(n,i))||h.enumerable});return t};var L=(t,n,o)=>(o=t!=null?m(u(t)):{},c(n||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),x=t=>c(r({},\"__esModule\",{value:!0}),t);var s=C((D,l)=>{l.exports=_jsx_runtime});var w={};p(w,{default:()=>j,frontmatter:()=>O});var e=L(s()),O={title:\"\\u4EC0\\u4E48\\u662F\\u547D\\u4EE4\\u6A21\\u5F0F\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\uFF1F\"};function d(t){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u547D\\u4EE4\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u884C\\u4E3A\\u578B\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5B83\\u5C06\\u8BF7\\u6C42\\u8F6C\\u5316\\u4E3A\\u4E00\\u4E2A\\u72EC\\u7ACB\\u7684\\u5305\\u542B\\u5173\\u4E8E\\u8BF7\\u6C42\\u6240\\u6709\\u4FE1\\u606F\\u7684\\u5BF9\\u8C61\\u3002\\u8FD9\\u79CD\\u8F6C\\u6362\\u5141\\u8BB8\\u4F7F\\u7528\\u4E0D\\u540C\\u7684\\u8BF7\\u6C42\\u5BF9\\u65B9\\u6CD5\\u8FDB\\u884C\\u53C2\\u6570\\u5316\\u3001\\u8BF7\\u6C42\\u6392\\u961F\\u548C\\u8BF7\\u6C42\\u65E5\\u5FD7\\u8BB0\\u5F55\\u3002\\u5B83\\u8FD8\\u652F\\u6301\\u53EF\\u64A4\\u9500\\u64CD\\u4F5C\\u3002\\u5728 JavaScript \\u4E2D\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7\\u521B\\u5EFA\\u5177\\u6709 \",(0,e.jsx)(n.code,{children:\"execute\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"undo\"}),\" \\u65B9\\u6CD5\\u7684\\u547D\\u4EE4\\u5BF9\\u8C61\\u6765\\u5B9E\\u73B0\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Command {\n  execute() {}\n  undo() {}\n}\n\nclass LightOnCommand extends Command {\n  constructor(light) {\n    super();\n    this.light = light;\n  }\n  execute() {\n    this.light.on();\n  }\n  undo() {\n    this.light.off();\n  }\n}\n\nclass Light {\n  on() {\n    console.log('Light is on');\n  }\n  off() {\n    console.log('Light is off');\n  }\n}\n\nconst light = new Light();\nconst lightOnCommand = new LightOnCommand(light);\nlightOnCommand.execute(); // Light is on\nlightOnCommand.undo(); // Light is off\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u547D\\u4EE4\\u6A21\\u5F0F\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u547D\\u4EE4\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u884C\\u4E3A\\u578B\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5B83\\u5C06\\u8BF7\\u6C42\\u5C01\\u88C5\\u6210\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u4ECE\\u800C\\u5141\\u8BB8\\u4F7F\\u7528\\u961F\\u5217\\u3001\\u8BF7\\u6C42\\u548C\\u64CD\\u4F5C\\u5BF9\\u5BA2\\u6237\\u7AEF\\u8FDB\\u884C\\u53C2\\u6570\\u5316\\u3002\\u5B83\\u8FD8\\u652F\\u6301\\u53EF\\u64A4\\u9500\\u64CD\\u4F5C\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7EC4\\u4EF6\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Command\"}),\"\\uFF1A\\u58F0\\u660E\\u7528\\u4E8E\\u6267\\u884C\\u64CD\\u4F5C\\u7684\\u63A5\\u53E3\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ConcreteCommand\"}),\"\\uFF1A\\u901A\\u8FC7\\u5728 \",(0,e.jsx)(n.code,{children:\"Receiver\"}),\" \\u4E0A\\u8C03\\u7528\\u76F8\\u5E94\\u7684\\u64CD\\u4F5C\\u6765\\u5B9E\\u73B0 \",(0,e.jsx)(n.code,{children:\"execute\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Receiver\"}),\"\\uFF1A\\u77E5\\u9053\\u5982\\u4F55\\u6267\\u884C\\u4E0E\\u6267\\u884C\\u8BF7\\u6C42\\u76F8\\u5173\\u7684\\u64CD\\u4F5C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Invoker\"}),\"\\uFF1A\\u8981\\u6C42\\u547D\\u4EE4\\u6267\\u884C\\u8BF7\\u6C42\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Client\"}),\"\\uFF1A\\u521B\\u5EFA\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"ConcreteCommand\"}),\" \\u5BF9\\u8C61\\u5E76\\u8BBE\\u7F6E\\u5176\\u63A5\\u6536\\u8005\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728 JavaScript \\u4E2D\\u7684\\u5B9E\\u73B0\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Step 1: Define the Command interface\n\nclass Command {\n  execute() {}\n  undo() {}\n}\n\n// Step 2: Create ConcreteCommand classes\n\nclass LightOnCommand extends Command {\n  constructor(light) {\n    super();\n    this.light = light;\n  }\n  execute() {\n    this.light.on();\n  }\n  undo() {\n    this.light.off();\n  }\n}\n\nclass LightOffCommand extends Command {\n  constructor(light) {\n    super();\n    this.light = light;\n  }\n  execute() {\n    this.light.off();\n  }\n  undo() {\n    this.light.on();\n  }\n}\n\n// Step 3: Define the Receiver\n\nclass Light {\n  on() {\n    console.log('Light is on');\n  }\n  off() {\n    console.log('Light is off');\n  }\n}\n\n// Step 4: Create the Invoker\n\nclass RemoteControl {\n  setCommand(command) {\n    this.command = command;\n  }\n  pressButton() {\n    this.command.execute();\n  }\n  pressUndo() {\n    this.command.undo();\n  }\n}\n\n// Step 5: Client code\n\nconst light = new Light();\nconst lightOnCommand = new LightOnCommand(light);\nconst lightOffCommand = new LightOffCommand(light);\n\nconst remote = new RemoteControl();\nremote.setCommand(lightOnCommand);\nremote.pressButton(); // Light is on\nremote.pressUndo(); // Light is off\n\nremote.setCommand(lightOffCommand);\nremote.pressButton(); // Light is off\nremote.pressUndo(); // Light is on\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u64A4\\u9500/\\u91CD\\u505A\\u529F\\u80FD\"}),\"\\uFF1A\\u547D\\u4EE4\\u6A21\\u5F0F\\u662F\\u5B9E\\u73B0\\u64A4\\u9500\\u548C\\u91CD\\u505A\\u64CD\\u4F5C\\u7684\\u7406\\u60F3\\u9009\\u62E9\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B8F\\u547D\\u4EE4\"}),\"\\uFF1A\\u5B83\\u53EF\\u7528\\u4E8E\\u5B9E\\u73B0\\u4E00\\u7CFB\\u5217\\u547D\\u4EE4\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8BB0\\u5F55\\u66F4\\u6539\"}),\"\\uFF1A\\u5B83\\u6709\\u52A9\\u4E8E\\u8BB0\\u5F55\\u66F4\\u6539\\u5E76\\u7A0D\\u540E\\u8FDB\\u884C\\u5BA1\\u8BA1\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"GUI \\u6309\\u94AE\\u548C\\u83DC\\u5355\\u9879\"}),\"\\uFF1A\\u5B83\\u5BF9\\u4E8E\\u5B9E\\u73B0\\u7531 GUI \\u5143\\u7D20\\u89E6\\u53D1\\u7684\\u64CD\\u4F5C\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://refactoring.guru/design-patterns/command\",children:\"Refactoring Guru: Command Pattern\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.dofactory.com/javascript/design-patterns/command\",children:\"JavaScript Design Patterns: Command\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Command_pattern\",children:\"MDN Web Docs: Command Pattern\"})}),`\n`]})]})}function v(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(d,t)})):d(t)}var j=v;return x(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var a=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var p=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),L=(t,n)=>{for(var o in n)r(t,o,{get:n[o],enumerable:!0})},l=(t,n,o,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of u(n))!C.call(t,i)&&i!==o&&r(t,i,{get:()=>n[i],enumerable:!(h=g(n,i))||h.enumerable});return t};var x=(t,n,o)=>(o=t!=null?a(f(t)):{},l(n||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),O=t=>l(r({},\"__esModule\",{value:!0}),t);var s=p((j,c)=>{c.exports=_jsx_runtime});var w={};L(w,{default:()=>m,frontmatter:()=>v});var e=x(s()),v={title:\"\\u4EC0\\u4E48\\u662F\\u547D\\u4EE4\\u6A21\\u5F0F\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\uFF1F\"};function d(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u547D\\u4EE4\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u884C\\u4E3A\\u578B\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5B83\\u5C06\\u8BF7\\u6C42\\u8F6C\\u5316\\u4E3A\\u4E00\\u4E2A\\u72EC\\u7ACB\\u7684\\u5305\\u542B\\u5173\\u4E8E\\u8BF7\\u6C42\\u6240\\u6709\\u4FE1\\u606F\\u7684\\u5BF9\\u8C61\\u3002\\u8FD9\\u79CD\\u8F6C\\u6362\\u5141\\u8BB8\\u4F7F\\u7528\\u4E0D\\u540C\\u7684\\u8BF7\\u6C42\\u5BF9\\u65B9\\u6CD5\\u8FDB\\u884C\\u53C2\\u6570\\u5316\\u3001\\u8BF7\\u6C42\\u6392\\u961F\\u548C\\u8BF7\\u6C42\\u65E5\\u5FD7\\u8BB0\\u5F55\\u3002\\u5B83\\u8FD8\\u652F\\u6301\\u53EF\\u64A4\\u9500\\u64CD\\u4F5C\\u3002\\u5728 JavaScript \\u4E2D\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7\\u521B\\u5EFA\\u5177\\u6709 \",(0,e.jsx)(n.code,{children:\"execute\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"undo\"}),\" \\u65B9\\u6CD5\\u7684\\u547D\\u4EE4\\u5BF9\\u8C61\\u6765\\u5B9E\\u73B0\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Command {\n  execute() {}\n  undo() {}\n}\n\nclass LightOnCommand extends Command {\n  constructor(light) {\n    super();\n    this.light = light;\n  }\n  execute() {\n    this.light.on();\n  }\n  undo() {\n    this.light.off();\n  }\n}\n\nclass Light {\n  on() {\n    console.log('Light is on');\n  }\n  off() {\n    console.log('Light is off');\n  }\n}\n\nconst light = new Light();\nconst lightOnCommand = new LightOnCommand(light);\nlightOnCommand.execute(); // Light is on\nlightOnCommand.undo(); // Light is off\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u547D\\u4EE4\\u6A21\\u5F0F\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u547D\\u4EE4\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u884C\\u4E3A\\u578B\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5B83\\u5C06\\u8BF7\\u6C42\\u5C01\\u88C5\\u6210\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u4ECE\\u800C\\u5141\\u8BB8\\u4F7F\\u7528\\u961F\\u5217\\u3001\\u8BF7\\u6C42\\u548C\\u64CD\\u4F5C\\u5BF9\\u5BA2\\u6237\\u7AEF\\u8FDB\\u884C\\u53C2\\u6570\\u5316\\u3002\\u5B83\\u8FD8\\u652F\\u6301\\u53EF\\u64A4\\u9500\\u64CD\\u4F5C\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7EC4\\u4EF6\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Command\"}),\"\\uFF1A\\u58F0\\u660E\\u7528\\u4E8E\\u6267\\u884C\\u64CD\\u4F5C\\u7684\\u63A5\\u53E3\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"ConcreteCommand\"}),\"\\uFF1A\\u901A\\u8FC7\\u5728 \",(0,e.jsx)(n.code,{children:\"Receiver\"}),\" \\u4E0A\\u8C03\\u7528\\u76F8\\u5E94\\u7684\\u64CD\\u4F5C\\u6765\\u5B9E\\u73B0 \",(0,e.jsx)(n.code,{children:\"execute\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Receiver\"}),\"\\uFF1A\\u77E5\\u9053\\u5982\\u4F55\\u6267\\u884C\\u4E0E\\u6267\\u884C\\u8BF7\\u6C42\\u76F8\\u5173\\u7684\\u64CD\\u4F5C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Invoker\"}),\"\\uFF1A\\u8981\\u6C42\\u547D\\u4EE4\\u6267\\u884C\\u8BF7\\u6C42\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Client\"}),\"\\uFF1A\\u521B\\u5EFA\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"ConcreteCommand\"}),\" \\u5BF9\\u8C61\\u5E76\\u8BBE\\u7F6E\\u5176\\u63A5\\u6536\\u8005\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5728 JavaScript \\u4E2D\\u7684\\u5B9E\\u73B0\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Step 1: Define the Command interface\n\nclass Command {\n  execute() {}\n  undo() {}\n}\n\n// Step 2: Create ConcreteCommand classes\n\nclass LightOnCommand extends Command {\n  constructor(light) {\n    super();\n    this.light = light;\n  }\n  execute() {\n    this.light.on();\n  }\n  undo() {\n    this.light.off();\n  }\n}\n\nclass LightOffCommand extends Command {\n  constructor(light) {\n    super();\n    this.light = light;\n  }\n  execute() {\n    this.light.off();\n  }\n  undo() {\n    this.light.on();\n  }\n}\n\n// Step 3: Define the Receiver\n\nclass Light {\n  on() {\n    console.log('Light is on');\n  }\n  off() {\n    console.log('Light is off');\n  }\n}\n\n// Step 4: Create the Invoker\n\nclass RemoteControl {\n  setCommand(command) {\n    this.command = command;\n  }\n  pressButton() {\n    this.command.execute();\n  }\n  pressUndo() {\n    this.command.undo();\n  }\n}\n\n// Step 5: Client code\n\nconst light = new Light();\nconst lightOnCommand = new LightOnCommand(light);\nconst lightOffCommand = new LightOffCommand(light);\n\nconst remote = new RemoteControl();\nremote.setCommand(lightOnCommand);\nremote.pressButton(); // Light is on\nremote.pressUndo(); // Light is off\n\nremote.setCommand(lightOffCommand);\nremote.pressButton(); // Light is off\nremote.pressUndo(); // Light is on\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u64A4\\u9500/\\u91CD\\u505A\\u529F\\u80FD\"}),\"\\uFF1A\\u547D\\u4EE4\\u6A21\\u5F0F\\u662F\\u5B9E\\u73B0\\u64A4\\u9500\\u548C\\u91CD\\u505A\\u64CD\\u4F5C\\u7684\\u7406\\u60F3\\u9009\\u62E9\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B8F\\u547D\\u4EE4\"}),\"\\uFF1A\\u5B83\\u53EF\\u7528\\u4E8E\\u5B9E\\u73B0\\u4E00\\u7CFB\\u5217\\u547D\\u4EE4\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8BB0\\u5F55\\u66F4\\u6539\"}),\"\\uFF1A\\u5B83\\u6709\\u52A9\\u4E8E\\u8BB0\\u5F55\\u66F4\\u6539\\u5E76\\u7A0D\\u540E\\u8FDB\\u884C\\u5BA1\\u8BA1\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"GUI \\u6309\\u94AE\\u548C\\u83DC\\u5355\\u9879\"}),\"\\uFF1A\\u5B83\\u5BF9\\u4E8E\\u5B9E\\u73B0\\u7531 GUI \\u5143\\u7D20\\u89E6\\u53D1\\u7684\\u64CD\\u4F5C\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://refactoring.guru/design-patterns/command\",children:\"Refactoring Guru: Command Pattern\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.dofactory.com/javascript/design-patterns/command\",children:\"JavaScript Design Patterns: Command\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Command_pattern\",children:\"MDN Web Docs: Command Pattern\"})}),`\n`]})]})}function m(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(d,{...t})}):d(t)}return O(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/en-US.json
index c138e1d97..28676da49 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},s=(t,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!y.call(t,a)&&a!==i&&r(t,a,{get:()=>e[a],enumerable:!(c=m(e,a))||c.enumerable});return t};var x=(t,e,i)=>(i=t!=null?l(p(t)):{},s(e||!t||!t.__esModule?r(i,\"default\",{value:t,enumerable:!0}):i,t)),k=t=>s(r({},\"__esModule\",{value:!0}),t);var o=f((w,d)=>{d.exports=_jsx_runtime});var j={};g(j,{default:()=>I,frontmatter:()=>b});var n=x(o()),b={title:\"What is the consequence of using array indices as the value for `key`s in React?\"};function h(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:[\"Using array indices as the value for \",(0,n.jsx)(e.code,{children:\"key\"}),\"s in React can lead to performance issues and bugs. When the order of items changes, React may not correctly identify which items have changed, leading to unnecessary re-renders or incorrect component updates. It's better to use unique identifiers for \",(0,n.jsx)(e.code,{children:\"key\"}),\"s to ensure React can efficiently manage and update the DOM.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Consequence of using array indices as the value for \",(0,n.jsx)(e.code,{children:\"key\"}),\"s in React\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Performance issues\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When array indices are used as \",(0,n.jsx)(e.code,{children:\"key\"}),\"s, React may not efficiently update the DOM. If the order of items in the array changes, React will not be able to correctly identify which items have been added, removed, or moved. This can lead to unnecessary re-renders and decreased performance.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Incorrect component updates\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Using array indices as \",(0,n.jsx)(e.code,{children:\"key\"}),\"s can cause bugs in your application. For example, if the order of items changes, React may reuse the same component instances for different items, leading to incorrect state and props being passed to components. This can result in unexpected behavior and hard-to-debug issues.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Consider the following example where array indices are used as \",(0,n.jsx)(e.code,{children:\"key\"}),\"s:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const items = ['Item 1', 'Item 2', 'Item 3'];\n\nconst List = () => (\n  <ul>\n    {items.map((item, index) => (\n      <li key={index}>{item}</li>\n    ))}\n  </ul>\n);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"If the order of \",(0,n.jsx)(e.code,{children:\"items\"}),\" changes, React may not correctly update the DOM, leading to performance issues and potential bugs.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Better approach\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Instead of using array indices, use unique identifiers for \",(0,n.jsx)(e.code,{children:\"key\"}),\"s. This ensures that React can efficiently manage and update the DOM.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const items = [\n  { id: 1, name: 'Item 1' },\n  { id: 2, name: 'Item 2' },\n  { id: 3, name: 'Item 3' },\n];\n\nconst List = () => (\n  <ul>\n    {items.map((item) => (\n      <li key={item.id}>{item.name}</li>\n    ))}\n  </ul>\n);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, using \",(0,n.jsx)(e.code,{children:\"item.id\"}),\" as the \",(0,n.jsx)(e.code,{children:\"key\"}),\" ensures that React can correctly identify and update items when the order changes.\"]}),`\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://react.dev/learn/rendering-lists#why-does-react-need-keys\",children:\"React documentation on keys\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318\",children:\"Why using array index as a key is an anti-pattern\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://kentcdodds.com/blog/understanding-reacts-key-prop\",children:\"React performance optimization with keys\"})}),`\n`]})]})}function R(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var I=R;return k(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},s=(t,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!f.call(t,r)&&r!==i&&a(t,r,{get:()=>e[r],enumerable:!(c=u(e,r))||c.enumerable});return t};var k=(t,e,i)=>(i=t!=null?m(y(t)):{},s(e||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),R=t=>s(a({},\"__esModule\",{value:!0}),t);var o=g((w,d)=>{d.exports=_jsx_runtime});var I={};x(I,{default:()=>l,frontmatter:()=>b});var n=k(o()),b={title:\"What is the consequence of using array indices as the value for `key`s in React?\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Using array indices as the value for \",(0,n.jsx)(e.code,{children:\"key\"}),\"s in React can lead to performance issues and bugs. When the order of items changes, React may not correctly identify which items have changed, leading to unnecessary re-renders or incorrect component updates. It's better to use unique identifiers for \",(0,n.jsx)(e.code,{children:\"key\"}),\"s to ensure React can efficiently manage and update the DOM.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Consequence of using array indices as the value for \",(0,n.jsx)(e.code,{children:\"key\"}),\"s in React\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Performance issues\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When array indices are used as \",(0,n.jsx)(e.code,{children:\"key\"}),\"s, React may not efficiently update the DOM. If the order of items in the array changes, React will not be able to correctly identify which items have been added, removed, or moved. This can lead to unnecessary re-renders and decreased performance.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Incorrect component updates\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Using array indices as \",(0,n.jsx)(e.code,{children:\"key\"}),\"s can cause bugs in your application. For example, if the order of items changes, React may reuse the same component instances for different items, leading to incorrect state and props being passed to components. This can result in unexpected behavior and hard-to-debug issues.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Consider the following example where array indices are used as \",(0,n.jsx)(e.code,{children:\"key\"}),\"s:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const items = ['Item 1', 'Item 2', 'Item 3'];\n\nconst List = () => (\n  <ul>\n    {items.map((item, index) => (\n      <li key={index}>{item}</li>\n    ))}\n  </ul>\n);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"If the order of \",(0,n.jsx)(e.code,{children:\"items\"}),\" changes, React may not correctly update the DOM, leading to performance issues and potential bugs.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Better approach\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Instead of using array indices, use unique identifiers for \",(0,n.jsx)(e.code,{children:\"key\"}),\"s. This ensures that React can efficiently manage and update the DOM.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const items = [\n  { id: 1, name: 'Item 1' },\n  { id: 2, name: 'Item 2' },\n  { id: 3, name: 'Item 3' },\n];\n\nconst List = () => (\n  <ul>\n    {items.map((item) => (\n      <li key={item.id}>{item.name}</li>\n    ))}\n  </ul>\n);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, using \",(0,n.jsx)(e.code,{children:\"item.id\"}),\" as the \",(0,n.jsx)(e.code,{children:\"key\"}),\" ensures that React can correctly identify and update items when the order changes.\"]}),`\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://react.dev/learn/rendering-lists#why-does-react-need-keys\",children:\"React documentation on keys\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318\",children:\"Why using array index as a key is an anti-pattern\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://kentcdodds.com/blog/understanding-reacts-key-prop\",children:\"React performance optimization with keys\"})}),`\n`]})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return R(I);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/zh-CN.json
index efab0a2e0..d5ff847a3 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var o=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var k=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),x=(c,e)=>{for(var i in e)r(c,i,{get:e[i],enumerable:!0})},a=(c,e,i,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of p(e))!u.call(c,t)&&t!==i&&r(c,t,{get:()=>e[t],enumerable:!(d=m(e,t))||d.enumerable});return c};var R=(c,e,i)=>(i=c!=null?o(y(c)):{},a(e||!c||!c.__esModule?r(i,\"default\",{value:c,enumerable:!0}):i,c)),g=c=>a(r({},\"__esModule\",{value:!0}),c);var h=k((I,l)=>{l.exports=_jsx_runtime});var M={};x(M,{default:()=>D,frontmatter:()=>f});var n=R(h()),f={title:\"\\u5728 React \\u4E2D\\u4F7F\\u7528\\u6570\\u7EC4\\u7D22\\u5F15\\u4F5C\\u4E3A `key` \\u7684\\u503C\\u6709\\u4EC0\\u4E48\\u540E\\u679C\\uFF1F\"};function s(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 React \\u4E2D\\u4F7F\\u7528\\u6570\\u7EC4\\u7D22\\u5F15\\u4F5C\\u4E3A \",(0,n.jsx)(e.code,{children:\"key\"}),\" \\u7684\\u503C\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u6027\\u80FD\\u95EE\\u9898\\u548C\\u9519\\u8BEF\\u3002\\u5F53\\u9879\\u76EE\\u987A\\u5E8F\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0CReact \\u53EF\\u80FD\\u65E0\\u6CD5\\u6B63\\u786E\\u8BC6\\u522B\\u54EA\\u4E9B\\u9879\\u76EE\\u5DF2\\u66F4\\u6539\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\\u6216\\u4E0D\\u6B63\\u786E\\u7684\\u7EC4\\u4EF6\\u66F4\\u65B0\\u3002\\u6700\\u597D\\u4F7F\\u7528\\u552F\\u4E00\\u7684\\u6807\\u8BC6\\u7B26\\u4F5C\\u4E3A \",(0,n.jsx)(e.code,{children:\"key\"}),\"\\uFF0C\\u4EE5\\u786E\\u4FDD React \\u53EF\\u4EE5\\u6709\\u6548\\u5730\\u7BA1\\u7406\\u548C\\u66F4\\u65B0 DOM\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4F7F\\u7528\\u6570\\u7EC4\\u7D22\\u5F15\\u4F5C\\u4E3A React \\u4E2D \",(0,n.jsx)(e.code,{children:\"key\"}),\" \\u503C\\u7684\\u540E\\u679C\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6027\\u80FD\\u95EE\\u9898\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u6570\\u7EC4\\u7D22\\u5F15\\u7528\\u4F5C \",(0,n.jsx)(e.code,{children:\"key\"}),\" \\u65F6\\uFF0CReact \\u53EF\\u80FD\\u65E0\\u6CD5\\u6709\\u6548\\u5730\\u66F4\\u65B0 DOM\\u3002\\u5982\\u679C\\u6570\\u7EC4\\u4E2D\\u9879\\u76EE\\u7684\\u987A\\u5E8F\\u53D1\\u751F\\u53D8\\u5316\\uFF0CReact \\u5C06\\u65E0\\u6CD5\\u6B63\\u786E\\u8BC6\\u522B\\u5DF2\\u6DFB\\u52A0\\u3001\\u5220\\u9664\\u6216\\u79FB\\u52A8\\u7684\\u9879\\u76EE\\u3002\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\\u548C\\u6027\\u80FD\\u4E0B\\u964D\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E0D\\u6B63\\u786E\\u7684\\u7EC4\\u4EF6\\u66F4\\u65B0\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528\\u6570\\u7EC4\\u7D22\\u5F15\\u4F5C\\u4E3A \",(0,n.jsx)(e.code,{children:\"key\"}),\" \\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7684\\u9519\\u8BEF\\u3002\\u4F8B\\u5982\\uFF0C\\u5982\\u679C\\u9879\\u76EE\\u7684\\u987A\\u5E8F\\u53D1\\u751F\\u53D8\\u5316\\uFF0CReact \\u53EF\\u80FD\\u4F1A\\u4E3A\\u4E0D\\u540C\\u7684\\u9879\\u76EE\\u91CD\\u7528\\u76F8\\u540C\\u7684\\u7EC4\\u4EF6\\u5B9E\\u4F8B\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u4E0D\\u6B63\\u786E\\u7684\\u72B6\\u6001\\u548C props \\u4F20\\u9012\\u7ED9\\u7EC4\\u4EF6\\u3002\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u610F\\u5916\\u884C\\u4E3A\\u548C\\u96BE\\u4EE5\\u8C03\\u8BD5\\u7684\\u95EE\\u9898\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F8B\\u5B50\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8003\\u8651\\u4EE5\\u4E0B\\u4F7F\\u7528\\u6570\\u7EC4\\u7D22\\u5F15\\u4F5C\\u4E3A \",(0,n.jsx)(e.code,{children:\"key\"}),\" \\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const items = ['Item 1', 'Item 2', 'Item 3'];\n\nconst List = () => (\n  <ul>\n    {items.map((item, index) => (\n      <li key={index}>{item}</li>\n    ))}\n  </ul>\n);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C \",(0,n.jsx)(e.code,{children:\"items\"}),\" \\u7684\\u987A\\u5E8F\\u53D1\\u751F\\u53D8\\u5316\\uFF0CReact \\u53EF\\u80FD\\u65E0\\u6CD5\\u6B63\\u786E\\u66F4\\u65B0 DOM\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u6027\\u80FD\\u95EE\\u9898\\u548C\\u6F5C\\u5728\\u7684\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u66F4\\u597D\\u7684\\u65B9\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E0E\\u5176\\u4F7F\\u7528\\u6570\\u7EC4\\u7D22\\u5F15\\uFF0C\\u4E0D\\u5982\\u4F7F\\u7528\\u552F\\u4E00\\u7684\\u6807\\u8BC6\\u7B26\\u4F5C\\u4E3A \",(0,n.jsx)(e.code,{children:\"key\"}),\"\\u3002\\u8FD9\\u786E\\u4FDD\\u4E86 React \\u53EF\\u4EE5\\u6709\\u6548\\u5730\\u7BA1\\u7406\\u548C\\u66F4\\u65B0 DOM\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const items = [\n  { id: 1, name: 'Item 1' },\n  { id: 2, name: 'Item 2' },\n  { id: 3, name: 'Item 3' },\n];\n\nconst List = () => (\n  <ul>\n    {items.map((item) => (\n      <li key={item.id}>{item.name}</li>\n    ))}\n  </ul>\n);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"item.id\"}),\" \\u4F5C\\u4E3A \",(0,n.jsx)(e.code,{children:\"key\"}),\" \\u53EF\\u786E\\u4FDD React \\u5728\\u987A\\u5E8F\\u66F4\\u6539\\u65F6\\u6B63\\u786E\\u8BC6\\u522B\\u548C\\u66F4\\u65B0\\u9879\\u76EE\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/rendering-lists#why-does-react-need-keys\",children:\"React documentation on keys\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318\",children:\"Why using array index as a key is an anti-pattern\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://kentcdodds.com/blog/understanding-reacts-key-prop\",children:\"React performance optimization with keys\"})}),`\n`]})]})}function j(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(s,c)})):s(c)}var D=j;return g(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var x=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),R=(c,e)=>{for(var i in e)r(c,i,{get:e[i],enumerable:!0})},a=(c,e,i,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of y(e))!k.call(c,t)&&t!==i&&r(c,t,{get:()=>e[t],enumerable:!(d=p(e,t))||d.enumerable});return c};var g=(c,e,i)=>(i=c!=null?m(u(c)):{},a(e||!c||!c.__esModule?r(i,\"default\",{value:c,enumerable:!0}):i,c)),f=c=>a(r({},\"__esModule\",{value:!0}),c);var h=x((_,l)=>{l.exports=_jsx_runtime});var D={};R(D,{default:()=>s,frontmatter:()=>j});var n=g(h()),j={title:\"\\u5728 React \\u4E2D\\u4F7F\\u7528\\u6570\\u7EC4\\u7D22\\u5F15\\u4F5C\\u4E3A `key` \\u7684\\u503C\\u6709\\u4EC0\\u4E48\\u540E\\u679C\\uFF1F\"};function o(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 React \\u4E2D\\u4F7F\\u7528\\u6570\\u7EC4\\u7D22\\u5F15\\u4F5C\\u4E3A \",(0,n.jsx)(e.code,{children:\"key\"}),\" \\u7684\\u503C\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u6027\\u80FD\\u95EE\\u9898\\u548C\\u9519\\u8BEF\\u3002\\u5F53\\u9879\\u76EE\\u987A\\u5E8F\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0CReact \\u53EF\\u80FD\\u65E0\\u6CD5\\u6B63\\u786E\\u8BC6\\u522B\\u54EA\\u4E9B\\u9879\\u76EE\\u5DF2\\u66F4\\u6539\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\\u6216\\u4E0D\\u6B63\\u786E\\u7684\\u7EC4\\u4EF6\\u66F4\\u65B0\\u3002\\u6700\\u597D\\u4F7F\\u7528\\u552F\\u4E00\\u7684\\u6807\\u8BC6\\u7B26\\u4F5C\\u4E3A \",(0,n.jsx)(e.code,{children:\"key\"}),\"\\uFF0C\\u4EE5\\u786E\\u4FDD React \\u53EF\\u4EE5\\u6709\\u6548\\u5730\\u7BA1\\u7406\\u548C\\u66F4\\u65B0 DOM\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4F7F\\u7528\\u6570\\u7EC4\\u7D22\\u5F15\\u4F5C\\u4E3A React \\u4E2D \",(0,n.jsx)(e.code,{children:\"key\"}),\" \\u503C\\u7684\\u540E\\u679C\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6027\\u80FD\\u95EE\\u9898\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u6570\\u7EC4\\u7D22\\u5F15\\u7528\\u4F5C \",(0,n.jsx)(e.code,{children:\"key\"}),\" \\u65F6\\uFF0CReact \\u53EF\\u80FD\\u65E0\\u6CD5\\u6709\\u6548\\u5730\\u66F4\\u65B0 DOM\\u3002\\u5982\\u679C\\u6570\\u7EC4\\u4E2D\\u9879\\u76EE\\u7684\\u987A\\u5E8F\\u53D1\\u751F\\u53D8\\u5316\\uFF0CReact \\u5C06\\u65E0\\u6CD5\\u6B63\\u786E\\u8BC6\\u522B\\u5DF2\\u6DFB\\u52A0\\u3001\\u5220\\u9664\\u6216\\u79FB\\u52A8\\u7684\\u9879\\u76EE\\u3002\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\\u548C\\u6027\\u80FD\\u4E0B\\u964D\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E0D\\u6B63\\u786E\\u7684\\u7EC4\\u4EF6\\u66F4\\u65B0\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F7F\\u7528\\u6570\\u7EC4\\u7D22\\u5F15\\u4F5C\\u4E3A \",(0,n.jsx)(e.code,{children:\"key\"}),\" \\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7684\\u9519\\u8BEF\\u3002\\u4F8B\\u5982\\uFF0C\\u5982\\u679C\\u9879\\u76EE\\u7684\\u987A\\u5E8F\\u53D1\\u751F\\u53D8\\u5316\\uFF0CReact \\u53EF\\u80FD\\u4F1A\\u4E3A\\u4E0D\\u540C\\u7684\\u9879\\u76EE\\u91CD\\u7528\\u76F8\\u540C\\u7684\\u7EC4\\u4EF6\\u5B9E\\u4F8B\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u4E0D\\u6B63\\u786E\\u7684\\u72B6\\u6001\\u548C props \\u4F20\\u9012\\u7ED9\\u7EC4\\u4EF6\\u3002\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u610F\\u5916\\u884C\\u4E3A\\u548C\\u96BE\\u4EE5\\u8C03\\u8BD5\\u7684\\u95EE\\u9898\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F8B\\u5B50\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8003\\u8651\\u4EE5\\u4E0B\\u4F7F\\u7528\\u6570\\u7EC4\\u7D22\\u5F15\\u4F5C\\u4E3A \",(0,n.jsx)(e.code,{children:\"key\"}),\" \\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const items = ['Item 1', 'Item 2', 'Item 3'];\n\nconst List = () => (\n  <ul>\n    {items.map((item, index) => (\n      <li key={index}>{item}</li>\n    ))}\n  </ul>\n);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C \",(0,n.jsx)(e.code,{children:\"items\"}),\" \\u7684\\u987A\\u5E8F\\u53D1\\u751F\\u53D8\\u5316\\uFF0CReact \\u53EF\\u80FD\\u65E0\\u6CD5\\u6B63\\u786E\\u66F4\\u65B0 DOM\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u6027\\u80FD\\u95EE\\u9898\\u548C\\u6F5C\\u5728\\u7684\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u66F4\\u597D\\u7684\\u65B9\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E0E\\u5176\\u4F7F\\u7528\\u6570\\u7EC4\\u7D22\\u5F15\\uFF0C\\u4E0D\\u5982\\u4F7F\\u7528\\u552F\\u4E00\\u7684\\u6807\\u8BC6\\u7B26\\u4F5C\\u4E3A \",(0,n.jsx)(e.code,{children:\"key\"}),\"\\u3002\\u8FD9\\u786E\\u4FDD\\u4E86 React \\u53EF\\u4EE5\\u6709\\u6548\\u5730\\u7BA1\\u7406\\u548C\\u66F4\\u65B0 DOM\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const items = [\n  { id: 1, name: 'Item 1' },\n  { id: 2, name: 'Item 2' },\n  { id: 3, name: 'Item 3' },\n];\n\nconst List = () => (\n  <ul>\n    {items.map((item) => (\n      <li key={item.id}>{item.name}</li>\n    ))}\n  </ul>\n);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"item.id\"}),\" \\u4F5C\\u4E3A \",(0,n.jsx)(e.code,{children:\"key\"}),\" \\u53EF\\u786E\\u4FDD React \\u5728\\u987A\\u5E8F\\u66F4\\u6539\\u65F6\\u6B63\\u786E\\u8BC6\\u522B\\u548C\\u66F4\\u65B0\\u9879\\u76EE\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/rendering-lists#why-does-react-need-keys\",children:\"React documentation on keys\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318\",children:\"Why using array index as a key is an anti-pattern\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://kentcdodds.com/blog/understanding-reacts-key-prop\",children:\"React performance optimization with keys\"})}),`\n`]})]})}function s(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(o,{...c})}):o(c)}return f(D);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.json
index b7650dc0d..66b7cc441 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var t=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var b=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),u=(n,e)=>{for(var i in e)t(n,i,{get:e[i],enumerable:!0})},r=(n,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of g(e))!p.call(n,d)&&d!==i&&t(n,d,{get:()=>e[d],enumerable:!(c=f(e,d))||c.enumerable});return n};var y=(n,e,i)=>(i=n!=null?s(m(n)):{},r(e||!n||!n.__esModule?t(i,\"default\",{value:n,enumerable:!0}):i,n)),x=n=>r(t({},\"__esModule\",{value:!0}),n);var o=b((j,h)=>{h.exports=_jsx_runtime});var w={};u(w,{default:()=>S,frontmatter:()=>k});var l=y(o()),k={title:\"What is the CSS `display` property and can you give a few examples of its use?\"};function a(n){let e=Object.assign({p:\"p\",code:\"code\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",a:\"a\",h2:\"h2\",ul:\"ul\",li:\"li\"},n.components);return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(e.p,{children:[\"The common values for the \",(0,l.jsx)(e.code,{children:\"display\"}),\" property: \",(0,l.jsx)(e.code,{children:\"none\"}),\", \",(0,l.jsx)(e.code,{children:\"block\"}),\", \",(0,l.jsx)(e.code,{children:\"inline\"}),\", \",(0,l.jsx)(e.code,{children:\"inline-block\"}),\", \",(0,l.jsx)(e.code,{children:\"flex\"}),\", \",(0,l.jsx)(e.code,{children:\"grid\"}),\", \",(0,l.jsx)(e.code,{children:\"table\"}),\", \",(0,l.jsx)(e.code,{children:\"table-row\"}),\", \",(0,l.jsx)(e.code,{children:\"table-cell\"}),\", \",(0,l.jsx)(e.code,{children:\"list-item\"}),\".\"]}),`\n`,(0,l.jsxs)(e.table,{children:[(0,l.jsx)(e.thead,{children:(0,l.jsxs)(e.tr,{children:[(0,l.jsxs)(e.th,{align:\"left\",children:[(0,l.jsx)(e.code,{children:\"display\"}),\" Value\"]}),(0,l.jsx)(e.th,{align:\"left\",children:\"Description\"})]})}),(0,l.jsxs)(e.tbody,{children:[(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"none\"})}),(0,l.jsx)(e.td,{align:\"left\",children:\"Does not display an element (the element no longer affects the layout of the document). All child element are also no longer displayed. The document is rendered as if the element did not exist in the document tree.\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"block\"})}),(0,l.jsx)(e.td,{align:\"left\",children:\"The element consumes the whole line in the block direction (which is usually horizontal).\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"inline\"})}),(0,l.jsx)(e.td,{align:\"left\",children:\"Elements can be laid out beside each other.\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"inline-block\"})}),(0,l.jsxs)(e.td,{align:\"left\",children:[\"Similar to \",(0,l.jsx)(e.code,{children:\"inline\"}),\", but allows some \",(0,l.jsx)(e.code,{children:\"block\"}),\" properties like setting \",(0,l.jsx)(e.code,{children:\"width\"}),\" and \",(0,l.jsx)(e.code,{children:\"height\"}),\".\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"flex\"})}),(0,l.jsxs)(e.td,{align:\"left\",children:[\"Behaves as a block-level \",(0,l.jsx)(e.code,{children:\"flex\"}),\" container, which can be manipulated using flexbox model.\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"grid\"})}),(0,l.jsxs)(e.td,{align:\"left\",children:[\"Behaves as a block-level \",(0,l.jsx)(e.code,{children:\"grid\"}),\" container using grid layout.\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"table\"})}),(0,l.jsxs)(e.td,{align:\"left\",children:[\"Behaves like the \",(0,l.jsx)(e.code,{children:\"<table>\"}),\" element.\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"table-row\"})}),(0,l.jsxs)(e.td,{align:\"left\",children:[\"Behaves like the \",(0,l.jsx)(e.code,{children:\"<tr>\"}),\" element.\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"table-cell\"})}),(0,l.jsxs)(e.td,{align:\"left\",children:[\"Behaves like the \",(0,l.jsx)(e.code,{children:\"<td>\"}),\" element.\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"list-item\"})}),(0,l.jsxs)(e.td,{align:\"left\",children:[\"Behaves like a \",(0,l.jsx)(e.code,{children:\"<li>\"}),\" element which allows it to define \",(0,l.jsx)(e.code,{children:\"list-style-type\"}),\" and \",(0,l.jsx)(e.code,{children:\"list-style-position\"}),\".\"]})]})]})]}),`\n`,(0,l.jsxs)(e.p,{children:[\"For a complete list of values for the \",(0,l.jsx)(e.code,{children:\"display\"}),\" property, refer to \",(0,l.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/display\",children:\"CSS Display | MDN\"}),\".\"]}),`\n`,(0,l.jsx)(e.h2,{children:\"References\"}),`\n`,(0,l.jsxs)(e.ul,{children:[`\n`,(0,l.jsx)(e.li,{children:(0,l.jsx)(e.a,{href:\"https://developer.mozilla.org/docs/Web/CSS/display\",children:\"CSS Display | MDN\"})}),`\n`]})]})}function v(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,Object.assign({},n,{children:(0,l.jsx)(a,n)})):a(n)}var S=v;return x(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var y=Object.create;var d=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var p=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var n in e)d(t,n,{get:e[n],enumerable:!0})},r=(t,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of x(e))!m.call(t,i)&&i!==n&&d(t,i,{get:()=>e[i],enumerable:!(c=f(e,i))||c.enumerable});return t};var u=(t,e,n)=>(n=t!=null?y(g(t)):{},r(e||!t||!t.__esModule?d(n,\"default\",{value:t,enumerable:!0}):n,t)),A=t=>r(d({},\"__esModule\",{value:!0}),t);var o=p((w,h)=>{h.exports=_jsx_runtime});var v={};b(v,{default:()=>a,frontmatter:()=>k});var l=u(o()),k={title:\"What is the CSS `display` property and can you give a few examples of its use?\"};function s(t){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...t.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(e.p,{children:[\"The common values for the \",(0,l.jsx)(e.code,{children:\"display\"}),\" property: \",(0,l.jsx)(e.code,{children:\"none\"}),\", \",(0,l.jsx)(e.code,{children:\"block\"}),\", \",(0,l.jsx)(e.code,{children:\"inline\"}),\", \",(0,l.jsx)(e.code,{children:\"inline-block\"}),\", \",(0,l.jsx)(e.code,{children:\"flex\"}),\", \",(0,l.jsx)(e.code,{children:\"grid\"}),\", \",(0,l.jsx)(e.code,{children:\"table\"}),\", \",(0,l.jsx)(e.code,{children:\"table-row\"}),\", \",(0,l.jsx)(e.code,{children:\"table-cell\"}),\", \",(0,l.jsx)(e.code,{children:\"list-item\"}),\".\"]}),`\n`,(0,l.jsxs)(e.table,{children:[(0,l.jsx)(e.thead,{children:(0,l.jsxs)(e.tr,{children:[(0,l.jsxs)(e.th,{style:{textAlign:\"left\"},children:[(0,l.jsx)(e.code,{children:\"display\"}),\" Value\"]}),(0,l.jsx)(e.th,{style:{textAlign:\"left\"},children:\"Description\"})]})}),(0,l.jsxs)(e.tbody,{children:[(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"none\"})}),(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:\"Does not display an element (the element no longer affects the layout of the document). All child element are also no longer displayed. The document is rendered as if the element did not exist in the document tree.\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"block\"})}),(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:\"The element consumes the whole line in the block direction (which is usually horizontal).\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"inline\"})}),(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:\"Elements can be laid out beside each other.\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"inline-block\"})}),(0,l.jsxs)(e.td,{style:{textAlign:\"left\"},children:[\"Similar to \",(0,l.jsx)(e.code,{children:\"inline\"}),\", but allows some \",(0,l.jsx)(e.code,{children:\"block\"}),\" properties like setting \",(0,l.jsx)(e.code,{children:\"width\"}),\" and \",(0,l.jsx)(e.code,{children:\"height\"}),\".\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"flex\"})}),(0,l.jsxs)(e.td,{style:{textAlign:\"left\"},children:[\"Behaves as a block-level \",(0,l.jsx)(e.code,{children:\"flex\"}),\" container, which can be manipulated using flexbox model.\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"grid\"})}),(0,l.jsxs)(e.td,{style:{textAlign:\"left\"},children:[\"Behaves as a block-level \",(0,l.jsx)(e.code,{children:\"grid\"}),\" container using grid layout.\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"table\"})}),(0,l.jsxs)(e.td,{style:{textAlign:\"left\"},children:[\"Behaves like the \",(0,l.jsx)(e.code,{children:\"<table>\"}),\" element.\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"table-row\"})}),(0,l.jsxs)(e.td,{style:{textAlign:\"left\"},children:[\"Behaves like the \",(0,l.jsx)(e.code,{children:\"<tr>\"}),\" element.\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"table-cell\"})}),(0,l.jsxs)(e.td,{style:{textAlign:\"left\"},children:[\"Behaves like the \",(0,l.jsx)(e.code,{children:\"<td>\"}),\" element.\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"list-item\"})}),(0,l.jsxs)(e.td,{style:{textAlign:\"left\"},children:[\"Behaves like a \",(0,l.jsx)(e.code,{children:\"<li>\"}),\" element which allows it to define \",(0,l.jsx)(e.code,{children:\"list-style-type\"}),\" and \",(0,l.jsx)(e.code,{children:\"list-style-position\"}),\".\"]})]})]})]}),`\n`,(0,l.jsxs)(e.p,{children:[\"For a complete list of values for the \",(0,l.jsx)(e.code,{children:\"display\"}),\" property, refer to \",(0,l.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/display\",children:\"CSS Display | MDN\"}),\".\"]}),`\n`,(0,l.jsx)(e.h2,{children:\"References\"}),`\n`,(0,l.jsxs)(e.ul,{children:[`\n`,(0,l.jsx)(e.li,{children:(0,l.jsx)(e.a,{href:\"https://developer.mozilla.org/docs/Web/CSS/display\",children:\"CSS Display | MDN\"})}),`\n`]})]})}function a(t={}){let{wrapper:e}=t.components||{};return e?(0,l.jsx)(e,{...t,children:(0,l.jsx)(s,{...t})}):s(t)}return A(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/pt-BR.json
index 0e2263bb1..559d6a0e7 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var u=(d,e)=>()=>(e||d((e={exports:{}}).exports,e),e.exports),b=(d,e)=>{for(var n in e)i(d,n,{get:e[n],enumerable:!0})},t=(d,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!g.call(d,o)&&o!==n&&i(d,o,{get:()=>e[o],enumerable:!(c=m(e,o))||c.enumerable});return d};var x=(d,e,n)=>(n=d!=null?s(f(d)):{},t(e||!d||!d.__esModule?i(n,\"default\",{value:d,enumerable:!0}):n,d)),y=d=>t(i({},\"__esModule\",{value:!0}),d);var a=u((_,r)=>{r.exports=_jsx_runtime});var j={};b(j,{default:()=>v,frontmatter:()=>C});var l=x(a()),C={title:\"Qual \\xE9 a propriedade CSS `display` e voc\\xEA pode dar alguns exemplos de seu uso?\"};function h(d){let e=Object.assign({p:\"p\",code:\"code\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",a:\"a\",h2:\"h2\",ul:\"ul\",li:\"li\"},d.components);return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(e.p,{children:[\"Os valores comuns para a propriedade \",(0,l.jsx)(e.code,{children:\"display\"}),\": \",(0,l.jsx)(e.code,{children:\"none\"}),\", \",(0,l.jsx)(e.code,{children:\"block\"}),\", \",(0,l.jsx)(e.code,{children:\"inline\"}),\", \",(0,l.jsx)(e.code,{children:\"inline-block\"}),\", \",(0,l.jsx)(e.code,{children:\"flex\"}),\", \",(0,l.jsx)(e.code,{children:\"grid\"}),\", \",(0,l.jsx)(e.code,{children:\"tabela\"}),\", \",(0,l.jsx)(e.code,{children:\"table-row\"}),\", \",(0,l.jsx)(e.code,{children:\"table-cell\"}),\", \",(0,l.jsx)(e.code,{children:\"table-cell\"}),\", \",(0,l.jsx)(e.code,{children:\"list-item\"}),\".\"]}),`\n`,(0,l.jsxs)(e.table,{children:[(0,l.jsx)(e.thead,{children:(0,l.jsxs)(e.tr,{children:[(0,l.jsxs)(e.th,{align:\"left\",children:[\"Valor \",(0,l.jsx)(e.code,{children:\"display\"})]}),(0,l.jsx)(e.th,{align:\"left\",children:\"Descri\\xE7\\xE3o\"})]})}),(0,l.jsxs)(e.tbody,{children:[(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"none\"})}),(0,l.jsx)(e.td,{align:\"left\",children:\"N\\xE3o exibe um elemento (o elemento n\\xE3o afeta mais o layout do documento). Todos os elementos filhos tamb\\xE9m n\\xE3o s\\xE3o mais exibidos. O documento \\xE9 renderizado como se o elemento n\\xE3o existisse na \\xE1rvore do documento.\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"block\"})}),(0,l.jsx)(e.td,{align:\"left\",children:\"O elemento consome toda a linha na dire\\xE7\\xE3o do bloco (que geralmente \\xE9 horizontal).\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"inline\"})}),(0,l.jsx)(e.td,{align:\"left\",children:\"Elementos podem ser dispostos lado a lado.\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"inline-block\"})}),(0,l.jsxs)(e.td,{align:\"left\",children:[\"Semelhante ao \",(0,l.jsx)(e.code,{children:\"inline\"}),\", mas permite algumas propriedades \",(0,l.jsx)(e.code,{children:\"block\"}),\" como configura\\xE7\\xE3o de \",(0,l.jsx)(e.code,{children:\"width\"}),\" e \",(0,l.jsx)(e.code,{children:\"height\"}),\".\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"flex\"})}),(0,l.jsxs)(e.td,{align:\"left\",children:[\"Comporta-se como um cont\\xEAiner \",(0,l.jsx)(e.code,{children:\"flex\"}),\" de n\\xEDvel de bloco, que pode ser manipulado usando o modelo de flexbox.\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"grid\"})}),(0,l.jsxs)(e.td,{align:\"left\",children:[\"Comporta-se como um cont\\xEAiner \",(0,l.jsx)(e.code,{children:\"grid\"}),\" de n\\xEDvel de bloco usando o layout de grade.\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"table\"})}),(0,l.jsxs)(e.td,{align:\"left\",children:[\"Comporta-se como o elemento \",(0,l.jsx)(e.code,{children:\"<table>\"}),\".\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"table-row\"})}),(0,l.jsxs)(e.td,{align:\"left\",children:[\"Comporta-se como o elemento \",(0,l.jsx)(e.code,{children:\"<tr>\"}),\".\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"table-cell\"})}),(0,l.jsxs)(e.td,{align:\"left\",children:[\"Comporta-se como o elemento \",(0,l.jsx)(e.code,{children:\"<td>\"}),\".\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"list-item\"})}),(0,l.jsxs)(e.td,{align:\"left\",children:[\"Comporta-se como um elemento \",(0,l.jsx)(e.code,{children:\"<li>\"}),\" que lhe permite definir \",(0,l.jsx)(e.code,{children:\"list-style-type\"}),\" e \",(0,l.jsx)(e.code,{children:\"list-style-position\"}),\".\"]})]})]})]}),`\n`,(0,l.jsxs)(e.p,{children:[\"Para uma lista completa de valores para a propriedade \",(0,l.jsx)(e.code,{children:\"display\"}),\", consulte \",(0,l.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/display\",children:\"CSS Display | MDN\"}),\".\"]}),`\n`,(0,l.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,l.jsxs)(e.ul,{children:[`\n`,(0,l.jsx)(e.li,{children:(0,l.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/display\",children:\"CSS Display | MDN\"})}),`\n`]})]})}function S(d={}){let{wrapper:e}=d.components||{};return e?(0,l.jsx)(e,Object.assign({},d,{children:(0,l.jsx)(h,d)})):h(d)}var v=S;return y(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),u=(t,e)=>{for(var d in e)n(t,d,{get:e[d],enumerable:!0})},c=(t,e,d,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of x(e))!f.call(t,o)&&o!==d&&n(t,o,{get:()=>e[o],enumerable:!(i=p(e,o))||i.enumerable});return t};var b=(t,e,d)=>(d=t!=null?m(y(t)):{},c(e||!t||!t.__esModule?n(d,\"default\",{value:t,enumerable:!0}):d,t)),A=t=>c(n({},\"__esModule\",{value:!0}),t);var h=g((D,r)=>{r.exports=_jsx_runtime});var S={};u(S,{default:()=>s,frontmatter:()=>C});var l=b(h()),C={title:\"Qual \\xE9 a propriedade CSS `display` e voc\\xEA pode dar alguns exemplos de seu uso?\"};function a(t){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...t.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(e.p,{children:[\"Os valores comuns para a propriedade \",(0,l.jsx)(e.code,{children:\"display\"}),\": \",(0,l.jsx)(e.code,{children:\"none\"}),\", \",(0,l.jsx)(e.code,{children:\"block\"}),\", \",(0,l.jsx)(e.code,{children:\"inline\"}),\", \",(0,l.jsx)(e.code,{children:\"inline-block\"}),\", \",(0,l.jsx)(e.code,{children:\"flex\"}),\", \",(0,l.jsx)(e.code,{children:\"grid\"}),\", \",(0,l.jsx)(e.code,{children:\"tabela\"}),\", \",(0,l.jsx)(e.code,{children:\"table-row\"}),\", \",(0,l.jsx)(e.code,{children:\"table-cell\"}),\", \",(0,l.jsx)(e.code,{children:\"table-cell\"}),\", \",(0,l.jsx)(e.code,{children:\"list-item\"}),\".\"]}),`\n`,(0,l.jsxs)(e.table,{children:[(0,l.jsx)(e.thead,{children:(0,l.jsxs)(e.tr,{children:[(0,l.jsxs)(e.th,{style:{textAlign:\"left\"},children:[\"Valor \",(0,l.jsx)(e.code,{children:\"display\"})]}),(0,l.jsx)(e.th,{style:{textAlign:\"left\"},children:\"Descri\\xE7\\xE3o\"})]})}),(0,l.jsxs)(e.tbody,{children:[(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"none\"})}),(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:\"N\\xE3o exibe um elemento (o elemento n\\xE3o afeta mais o layout do documento). Todos os elementos filhos tamb\\xE9m n\\xE3o s\\xE3o mais exibidos. O documento \\xE9 renderizado como se o elemento n\\xE3o existisse na \\xE1rvore do documento.\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"block\"})}),(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:\"O elemento consome toda a linha na dire\\xE7\\xE3o do bloco (que geralmente \\xE9 horizontal).\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"inline\"})}),(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:\"Elementos podem ser dispostos lado a lado.\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"inline-block\"})}),(0,l.jsxs)(e.td,{style:{textAlign:\"left\"},children:[\"Semelhante ao \",(0,l.jsx)(e.code,{children:\"inline\"}),\", mas permite algumas propriedades \",(0,l.jsx)(e.code,{children:\"block\"}),\" como configura\\xE7\\xE3o de \",(0,l.jsx)(e.code,{children:\"width\"}),\" e \",(0,l.jsx)(e.code,{children:\"height\"}),\".\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"flex\"})}),(0,l.jsxs)(e.td,{style:{textAlign:\"left\"},children:[\"Comporta-se como um cont\\xEAiner \",(0,l.jsx)(e.code,{children:\"flex\"}),\" de n\\xEDvel de bloco, que pode ser manipulado usando o modelo de flexbox.\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"grid\"})}),(0,l.jsxs)(e.td,{style:{textAlign:\"left\"},children:[\"Comporta-se como um cont\\xEAiner \",(0,l.jsx)(e.code,{children:\"grid\"}),\" de n\\xEDvel de bloco usando o layout de grade.\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"table\"})}),(0,l.jsxs)(e.td,{style:{textAlign:\"left\"},children:[\"Comporta-se como o elemento \",(0,l.jsx)(e.code,{children:\"<table>\"}),\".\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"table-row\"})}),(0,l.jsxs)(e.td,{style:{textAlign:\"left\"},children:[\"Comporta-se como o elemento \",(0,l.jsx)(e.code,{children:\"<tr>\"}),\".\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"table-cell\"})}),(0,l.jsxs)(e.td,{style:{textAlign:\"left\"},children:[\"Comporta-se como o elemento \",(0,l.jsx)(e.code,{children:\"<td>\"}),\".\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"list-item\"})}),(0,l.jsxs)(e.td,{style:{textAlign:\"left\"},children:[\"Comporta-se como um elemento \",(0,l.jsx)(e.code,{children:\"<li>\"}),\" que lhe permite definir \",(0,l.jsx)(e.code,{children:\"list-style-type\"}),\" e \",(0,l.jsx)(e.code,{children:\"list-style-position\"}),\".\"]})]})]})]}),`\n`,(0,l.jsxs)(e.p,{children:[\"Para uma lista completa de valores para a propriedade \",(0,l.jsx)(e.code,{children:\"display\"}),\", consulte \",(0,l.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/display\",children:\"CSS Display | MDN\"}),\".\"]}),`\n`,(0,l.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,l.jsxs)(e.ul,{children:[`\n`,(0,l.jsx)(e.li,{children:(0,l.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/display\",children:\"CSS Display | MDN\"})}),`\n`]})]})}function s(t={}){let{wrapper:e}=t.components||{};return e?(0,l.jsx)(e,{...t,children:(0,l.jsx)(a,{...t})}):a(t)}return A(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/zh-CN.json
index 34f5e6ab2..5dc132116 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var y=(d,e)=>()=>(e||d((e={exports:{}}).exports,e),e.exports),x=(d,e)=>{for(var n in e)c(d,n,{get:e[n],enumerable:!0})},r=(d,e,n,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of g(e))!p.call(d,i)&&i!==n&&c(d,i,{get:()=>e[i],enumerable:!(t=f(e,i))||t.enumerable});return d};var m=(d,e,n)=>(n=d!=null?s(b(d)):{},r(e||!d||!d.__esModule?c(n,\"default\",{value:d,enumerable:!0}):n,d)),u=d=>r(c({},\"__esModule\",{value:!0}),d);var o=y((k,h)=>{h.exports=_jsx_runtime});var _={};x(_,{default:()=>j,frontmatter:()=>S});var l=m(o()),S={title:\"\\u4EC0\\u4E48\\u662F CSS `display` \\u5C5E\\u6027\\uFF1F\\u4F60\\u80FD\\u4E3E\\u51E0\\u4E2A\\u4F8B\\u5B50\\u8BF4\\u660E\\u5B83\\u7684\\u7528\\u6CD5\\u5417\\uFF1F\"};function a(d){let e=Object.assign({p:\"p\",code:\"code\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",a:\"a\",h2:\"h2\",ul:\"ul\",li:\"li\"},d.components);return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(e.p,{children:[(0,l.jsx)(e.code,{children:\"display\"}),\" \\u5C5E\\u6027\\u7684\\u5E38\\u89C1\\u503C\\uFF1A\",(0,l.jsx)(e.code,{children:\"none\"}),\"\\u3001\",(0,l.jsx)(e.code,{children:\"block\"}),\"\\u3001\",(0,l.jsx)(e.code,{children:\"inline\"}),\"\\u3001\",(0,l.jsx)(e.code,{children:\"inline-block\"}),\"\\u3001\",(0,l.jsx)(e.code,{children:\"flex\"}),\"\\u3001\",(0,l.jsx)(e.code,{children:\"grid\"}),\"\\u3001\",(0,l.jsx)(e.code,{children:\"table\"}),\"\\u3001\",(0,l.jsx)(e.code,{children:\"table-row\"}),\"\\u3001\",(0,l.jsx)(e.code,{children:\"table-cell\"}),\"\\u3001\",(0,l.jsx)(e.code,{children:\"list-item\"}),\"\\u3002\"]}),`\n`,(0,l.jsxs)(e.table,{children:[(0,l.jsx)(e.thead,{children:(0,l.jsxs)(e.tr,{children:[(0,l.jsxs)(e.th,{align:\"left\",children:[(0,l.jsx)(e.code,{children:\"display\"}),\" \\u503C\"]}),(0,l.jsx)(e.th,{align:\"left\",children:\"\\u63CF\\u8FF0\"})]})}),(0,l.jsxs)(e.tbody,{children:[(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"none\"})}),(0,l.jsx)(e.td,{align:\"left\",children:\"\\u4E0D\\u663E\\u793A\\u5143\\u7D20\\uFF08\\u8BE5\\u5143\\u7D20\\u4E0D\\u518D\\u5F71\\u54CD\\u6587\\u6863\\u7684\\u5E03\\u5C40\\uFF09\\u3002\\u6240\\u6709\\u5B50\\u5143\\u7D20\\u4E5F\\u90FD\\u4E0D\\u518D\\u663E\\u793A\\u3002\\u6587\\u6863\\u7684\\u5448\\u73B0\\u5C31\\u50CF\\u8BE5\\u5143\\u7D20\\u4E0D\\u5B58\\u5728\\u4E8E\\u6587\\u6863\\u6811\\u4E2D\\u4E00\\u6837\\u3002\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"block\"})}),(0,l.jsx)(e.td,{align:\"left\",children:\"\\u5143\\u7D20\\u5728\\u5757\\u65B9\\u5411\\u4E0A\\u5360\\u7528\\u6574\\u884C\\uFF08\\u901A\\u5E38\\u662F\\u6C34\\u5E73\\u65B9\\u5411\\uFF09\\u3002\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"inline\"})}),(0,l.jsx)(e.td,{align:\"left\",children:\"\\u5143\\u7D20\\u53EF\\u4EE5\\u5E76\\u6392\\u6392\\u5217\\u3002\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"inline-block\"})}),(0,l.jsxs)(e.td,{align:\"left\",children:[\"\\u7C7B\\u4F3C\\u4E8E \",(0,l.jsx)(e.code,{children:\"inline\"}),\"\\uFF0C\\u4F46\\u5141\\u8BB8\\u4E00\\u4E9B \",(0,l.jsx)(e.code,{children:\"block\"}),\" \\u5C5E\\u6027\\uFF0C\\u5982\\u8BBE\\u7F6E \",(0,l.jsx)(e.code,{children:\"width\"}),\" \\u548C \",(0,l.jsx)(e.code,{children:\"height\"}),\"\\u3002\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"flex\"})}),(0,l.jsxs)(e.td,{align:\"left\",children:[\"\\u8868\\u73B0\\u4E3A\\u5757\\u7EA7 \",(0,l.jsx)(e.code,{children:\"flex\"}),\" \\u5BB9\\u5668\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 flexbox \\u6A21\\u578B\\u8FDB\\u884C\\u64CD\\u4F5C\\u3002\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"grid\"})}),(0,l.jsxs)(e.td,{align:\"left\",children:[\"\\u4F7F\\u7528\\u7F51\\u683C\\u5E03\\u5C40\\u8868\\u73B0\\u4E3A\\u5757\\u7EA7 \",(0,l.jsx)(e.code,{children:\"grid\"}),\" \\u5BB9\\u5668\\u3002\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"table\"})}),(0,l.jsxs)(e.td,{align:\"left\",children:[\"\\u8868\\u73B0\\u5F97\\u50CF \",(0,l.jsx)(e.code,{children:\"<table>\"}),\" \\u5143\\u7D20\\u3002\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"table-row\"})}),(0,l.jsxs)(e.td,{align:\"left\",children:[\"\\u8868\\u73B0\\u5F97\\u50CF \",(0,l.jsx)(e.code,{children:\"<tr>\"}),\" \\u5143\\u7D20\\u3002\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"table-cell\"})}),(0,l.jsxs)(e.td,{align:\"left\",children:[\"\\u8868\\u73B0\\u5F97\\u50CF \",(0,l.jsx)(e.code,{children:\"<td>\"}),\" \\u5143\\u7D20\\u3002\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{align:\"left\",children:(0,l.jsx)(e.code,{children:\"list-item\"})}),(0,l.jsxs)(e.td,{align:\"left\",children:[\"\\u8868\\u73B0\\u5F97\\u50CF \",(0,l.jsx)(e.code,{children:\"<li>\"}),\" \\u5143\\u7D20\\uFF0C\\u5141\\u8BB8\\u5B83\\u5B9A\\u4E49 \",(0,l.jsx)(e.code,{children:\"list-style-type\"}),\" \\u548C \",(0,l.jsx)(e.code,{children:\"list-style-position\"}),\"\\u3002\"]})]})]})]}),`\n`,(0,l.jsxs)(e.p,{children:[\"\\u6709\\u5173 \",(0,l.jsx)(e.code,{children:\"display\"}),\" \\u5C5E\\u6027\\u7684\\u5B8C\\u6574\\u503C\\u5217\\u8868\\uFF0C\\u8BF7\\u53C2\\u9605 \",(0,l.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/CSS/display\",children:\"CSS Display | MDN\"}),\"\\u3002\"]}),`\n`,(0,l.jsx)(e.h2,{children:\"\\u53C2\\u8003\\u8D44\\u6599\"}),`\n`,(0,l.jsxs)(e.ul,{children:[`\n`,(0,l.jsx)(e.li,{children:(0,l.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/CSS/display\",children:\"CSS Display | MDN\"})}),`\n`]})]})}function C(d={}){let{wrapper:e}=d.components||{};return e?(0,l.jsx)(e,Object.assign({},d,{children:(0,l.jsx)(a,d)})):a(d)}var j=C;return u(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var y=Object.create;var i=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),p=(t,e)=>{for(var d in e)i(t,d,{get:e[d],enumerable:!0})},r=(t,e,d,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of f(e))!A.call(t,n)&&n!==d&&i(t,n,{get:()=>e[n],enumerable:!(c=x(e,n))||c.enumerable});return t};var m=(t,e,d)=>(d=t!=null?y(g(t)):{},r(e||!t||!t.__esModule?i(d,\"default\",{value:t,enumerable:!0}):d,t)),u=t=>r(i({},\"__esModule\",{value:!0}),t);var o=b((D,h)=>{h.exports=_jsx_runtime});var C={};p(C,{default:()=>a,frontmatter:()=>S});var l=m(o()),S={title:\"\\u4EC0\\u4E48\\u662F CSS `display` \\u5C5E\\u6027\\uFF1F\\u4F60\\u80FD\\u4E3E\\u51E0\\u4E2A\\u4F8B\\u5B50\\u8BF4\\u660E\\u5B83\\u7684\\u7528\\u6CD5\\u5417\\uFF1F\"};function s(t){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...t.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(e.p,{children:[(0,l.jsx)(e.code,{children:\"display\"}),\" \\u5C5E\\u6027\\u7684\\u5E38\\u89C1\\u503C\\uFF1A\",(0,l.jsx)(e.code,{children:\"none\"}),\"\\u3001\",(0,l.jsx)(e.code,{children:\"block\"}),\"\\u3001\",(0,l.jsx)(e.code,{children:\"inline\"}),\"\\u3001\",(0,l.jsx)(e.code,{children:\"inline-block\"}),\"\\u3001\",(0,l.jsx)(e.code,{children:\"flex\"}),\"\\u3001\",(0,l.jsx)(e.code,{children:\"grid\"}),\"\\u3001\",(0,l.jsx)(e.code,{children:\"table\"}),\"\\u3001\",(0,l.jsx)(e.code,{children:\"table-row\"}),\"\\u3001\",(0,l.jsx)(e.code,{children:\"table-cell\"}),\"\\u3001\",(0,l.jsx)(e.code,{children:\"list-item\"}),\"\\u3002\"]}),`\n`,(0,l.jsxs)(e.table,{children:[(0,l.jsx)(e.thead,{children:(0,l.jsxs)(e.tr,{children:[(0,l.jsxs)(e.th,{style:{textAlign:\"left\"},children:[(0,l.jsx)(e.code,{children:\"display\"}),\" \\u503C\"]}),(0,l.jsx)(e.th,{style:{textAlign:\"left\"},children:\"\\u63CF\\u8FF0\"})]})}),(0,l.jsxs)(e.tbody,{children:[(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"none\"})}),(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:\"\\u4E0D\\u663E\\u793A\\u5143\\u7D20\\uFF08\\u8BE5\\u5143\\u7D20\\u4E0D\\u518D\\u5F71\\u54CD\\u6587\\u6863\\u7684\\u5E03\\u5C40\\uFF09\\u3002\\u6240\\u6709\\u5B50\\u5143\\u7D20\\u4E5F\\u90FD\\u4E0D\\u518D\\u663E\\u793A\\u3002\\u6587\\u6863\\u7684\\u5448\\u73B0\\u5C31\\u50CF\\u8BE5\\u5143\\u7D20\\u4E0D\\u5B58\\u5728\\u4E8E\\u6587\\u6863\\u6811\\u4E2D\\u4E00\\u6837\\u3002\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"block\"})}),(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:\"\\u5143\\u7D20\\u5728\\u5757\\u65B9\\u5411\\u4E0A\\u5360\\u7528\\u6574\\u884C\\uFF08\\u901A\\u5E38\\u662F\\u6C34\\u5E73\\u65B9\\u5411\\uFF09\\u3002\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"inline\"})}),(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:\"\\u5143\\u7D20\\u53EF\\u4EE5\\u5E76\\u6392\\u6392\\u5217\\u3002\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"inline-block\"})}),(0,l.jsxs)(e.td,{style:{textAlign:\"left\"},children:[\"\\u7C7B\\u4F3C\\u4E8E \",(0,l.jsx)(e.code,{children:\"inline\"}),\"\\uFF0C\\u4F46\\u5141\\u8BB8\\u4E00\\u4E9B \",(0,l.jsx)(e.code,{children:\"block\"}),\" \\u5C5E\\u6027\\uFF0C\\u5982\\u8BBE\\u7F6E \",(0,l.jsx)(e.code,{children:\"width\"}),\" \\u548C \",(0,l.jsx)(e.code,{children:\"height\"}),\"\\u3002\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"flex\"})}),(0,l.jsxs)(e.td,{style:{textAlign:\"left\"},children:[\"\\u8868\\u73B0\\u4E3A\\u5757\\u7EA7 \",(0,l.jsx)(e.code,{children:\"flex\"}),\" \\u5BB9\\u5668\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 flexbox \\u6A21\\u578B\\u8FDB\\u884C\\u64CD\\u4F5C\\u3002\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"grid\"})}),(0,l.jsxs)(e.td,{style:{textAlign:\"left\"},children:[\"\\u4F7F\\u7528\\u7F51\\u683C\\u5E03\\u5C40\\u8868\\u73B0\\u4E3A\\u5757\\u7EA7 \",(0,l.jsx)(e.code,{children:\"grid\"}),\" \\u5BB9\\u5668\\u3002\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"table\"})}),(0,l.jsxs)(e.td,{style:{textAlign:\"left\"},children:[\"\\u8868\\u73B0\\u5F97\\u50CF \",(0,l.jsx)(e.code,{children:\"<table>\"}),\" \\u5143\\u7D20\\u3002\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"table-row\"})}),(0,l.jsxs)(e.td,{style:{textAlign:\"left\"},children:[\"\\u8868\\u73B0\\u5F97\\u50CF \",(0,l.jsx)(e.code,{children:\"<tr>\"}),\" \\u5143\\u7D20\\u3002\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"table-cell\"})}),(0,l.jsxs)(e.td,{style:{textAlign:\"left\"},children:[\"\\u8868\\u73B0\\u5F97\\u50CF \",(0,l.jsx)(e.code,{children:\"<td>\"}),\" \\u5143\\u7D20\\u3002\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{style:{textAlign:\"left\"},children:(0,l.jsx)(e.code,{children:\"list-item\"})}),(0,l.jsxs)(e.td,{style:{textAlign:\"left\"},children:[\"\\u8868\\u73B0\\u5F97\\u50CF \",(0,l.jsx)(e.code,{children:\"<li>\"}),\" \\u5143\\u7D20\\uFF0C\\u5141\\u8BB8\\u5B83\\u5B9A\\u4E49 \",(0,l.jsx)(e.code,{children:\"list-style-type\"}),\" \\u548C \",(0,l.jsx)(e.code,{children:\"list-style-position\"}),\"\\u3002\"]})]})]})]}),`\n`,(0,l.jsxs)(e.p,{children:[\"\\u6709\\u5173 \",(0,l.jsx)(e.code,{children:\"display\"}),\" \\u5C5E\\u6027\\u7684\\u5B8C\\u6574\\u503C\\u5217\\u8868\\uFF0C\\u8BF7\\u53C2\\u9605 \",(0,l.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/CSS/display\",children:\"CSS Display | MDN\"}),\"\\u3002\"]}),`\n`,(0,l.jsx)(e.h2,{children:\"\\u53C2\\u8003\\u8D44\\u6599\"}),`\n`,(0,l.jsxs)(e.ul,{children:[`\n`,(0,l.jsx)(e.li,{children:(0,l.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/CSS/display\",children:\"CSS Display | MDN\"})}),`\n`]})]})}function a(t={}){let{wrapper:e}=t.components||{};return e?(0,l.jsx)(e,{...t,children:(0,l.jsx)(s,{...t})}):s(t)}return u(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-decorator-pattern-and-how-is-it-used/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-decorator-pattern-and-how-is-it-used/en-US.json
index a3c389926..172e6d23f 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-decorator-pattern-and-how-is-it-used/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-decorator-pattern-and-how-is-it-used/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-decorator-pattern-and-how-is-it-used/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),v=(r,n)=>{for(var t in n)o(r,t,{get:n[t],enumerable:!0})},c=(r,n,t,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of g(n))!f.call(r,i)&&i!==t&&o(r,i,{get:()=>n[i],enumerable:!(a=u(n,i))||a.enumerable});return r};var y=(r,n,t)=>(t=r!=null?h(p(r)):{},c(n||!r||!r.__esModule?o(t,\"default\",{value:r,enumerable:!0}):t,r)),D=r=>c(o({},\"__esModule\",{value:!0}),r);var l=m((x,s)=>{s.exports=_jsx_runtime});var S={};v(S,{default:()=>w,frontmatter:()=>b});var e=y(l()),b={title:\"What is the Decorator pattern and how is it used?\"};function d(r){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",h4:\"h4\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"The Decorator pattern is a structural design pattern that allows behavior to be added to individual objects, dynamically, without affecting the behavior of other objects from the same class. It is used to extend the functionalities of objects by wrapping them with additional behavior. In JavaScript, this can be achieved using higher-order functions or classes.\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"For example, if you have a \",(0,e.jsx)(n.code,{children:\"Car\"}),\" class and you want to add features like \",(0,e.jsx)(n.code,{children:\"GPS\"}),\" or \",(0,e.jsx)(n.code,{children:\"Sunroof\"}),\" without modifying the \",(0,e.jsx)(n.code,{children:\"Car\"}),\" class itself, you can create decorators for these features.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Car {\n  drive() {\n    return 'Driving';\n  }\n}\n\nclass CarDecorator {\n  constructor(car) {\n    this.car = car;\n  }\n\n  drive() {\n    return this.car.drive();\n  }\n}\n\nclass GPSDecorator extends CarDecorator {\n  drive() {\n    return \\`\\${super.drive()} with GPS\\`;\n  }\n}\n\nconst myCar = new Car();\nconst myCarWithGPS = new GPSDecorator(myCar);\nconsole.log(myCarWithGPS.drive()); // \"Driving with GPS\"\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"What is the Decorator pattern and how is it used?\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Definition\"}),`\n`,(0,e.jsx)(n.p,{children:\"The Decorator pattern is a structural design pattern that allows you to dynamically add behavior and responsibilities to objects without modifying their code. This pattern creates a set of decorator classes that are used to wrap concrete components.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Use cases\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Adding functionalities\"}),\": When you need to add functionalities to objects without altering their structure.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Flexible and reusable code\"}),\": When you want to create flexible and reusable code by composing behaviors.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Single Responsibility Principle\"}),\": When you want to adhere to the Single Responsibility Principle by dividing functionalities into different classes.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Implementation in JavaScript\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Using classes\"}),`\n`,(0,e.jsx)(n.p,{children:\"In JavaScript, the Decorator pattern can be implemented using classes. Here is an example:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Car {\n  drive() {\n    return 'Driving';\n  }\n}\n\nclass CarDecorator {\n  constructor(car) {\n    this.car = car;\n  }\n\n  drive() {\n    return this.car.drive();\n  }\n}\n\nclass GPSDecorator extends CarDecorator {\n  drive() {\n    return \\`\\${super.drive()} with GPS\\`;\n  }\n}\n\nclass SunroofDecorator extends CarDecorator {\n  drive() {\n    return \\`\\${super.drive()} with Sunroof\\`;\n  }\n}\n\nconst myCar = new Car();\nconst myCarWithGPS = new GPSDecorator(myCar);\nconst myCarWithGPSAndSunroof = new SunroofDecorator(myCarWithGPS);\n\nconsole.log(myCarWithGPSAndSunroof.drive()); // \"Driving with GPS with Sunroof\"\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"Using higher-order functions\"}),`\n`,(0,e.jsx)(n.p,{children:\"Another way to implement the Decorator pattern in JavaScript is by using higher-order functions:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function car() {\n  return {\n    drive: () => 'Driving',\n  };\n}\n\nfunction gpsDecorator(car) {\n  return {\n    drive: () => \\`\\${car.drive()} with GPS\\`,\n  };\n}\n\nfunction sunroofDecorator(car) {\n  return {\n    drive: () => \\`\\${car.drive()} with Sunroof\\`,\n  };\n}\n\nlet myCar = car();\nmyCar = gpsDecorator(myCar);\nmyCar = sunroofDecorator(myCar);\n\nconsole.log(myCar.drive()); // \"Driving with GPS with Sunroof\"\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Advantages\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Open/Closed Principle\"}),\": Classes are open for extension but closed for modification.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Flexible\"}),\": Allows for the dynamic composition of behaviors.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Reusable\"}),\": Decorators can be reused across different objects.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Disadvantages\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Complexity\"}),\": Can lead to a large number of small classes or functions.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Debugging\"}),\": Can be harder to debug due to the added layers of abstraction.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Decorator_pattern\",children:\"Decorator Pattern on Wikipedia\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#class_decorators\",children:\"MDN Web Docs: Decorators\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://refactoring.guru/design-patterns/decorator\",children:\"Refactoring Guru: Decorator Pattern\"})}),`\n`]})]})}function C(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(d,r)})):d(r)}var w=C;return D(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var v=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),y=(r,n)=>{for(var t in n)o(r,t,{get:n[t],enumerable:!0})},c=(r,n,t,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of p(n))!m.call(r,i)&&i!==t&&o(r,i,{get:()=>n[i],enumerable:!(a=g(n,i))||a.enumerable});return r};var D=(r,n,t)=>(t=r!=null?u(f(r)):{},c(n||!r||!r.__esModule?o(t,\"default\",{value:r,enumerable:!0}):t,r)),b=r=>c(o({},\"__esModule\",{value:!0}),r);var l=v((P,s)=>{s.exports=_jsx_runtime});var w={};y(w,{default:()=>h,frontmatter:()=>C});var e=D(l()),C={title:\"What is the Decorator pattern and how is it used?\"};function d(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"The Decorator pattern is a structural design pattern that allows behavior to be added to individual objects, dynamically, without affecting the behavior of other objects from the same class. It is used to extend the functionalities of objects by wrapping them with additional behavior. In JavaScript, this can be achieved using higher-order functions or classes.\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"For example, if you have a \",(0,e.jsx)(n.code,{children:\"Car\"}),\" class and you want to add features like \",(0,e.jsx)(n.code,{children:\"GPS\"}),\" or \",(0,e.jsx)(n.code,{children:\"Sunroof\"}),\" without modifying the \",(0,e.jsx)(n.code,{children:\"Car\"}),\" class itself, you can create decorators for these features.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Car {\n  drive() {\n    return 'Driving';\n  }\n}\n\nclass CarDecorator {\n  constructor(car) {\n    this.car = car;\n  }\n\n  drive() {\n    return this.car.drive();\n  }\n}\n\nclass GPSDecorator extends CarDecorator {\n  drive() {\n    return \\`\\${super.drive()} with GPS\\`;\n  }\n}\n\nconst myCar = new Car();\nconst myCarWithGPS = new GPSDecorator(myCar);\nconsole.log(myCarWithGPS.drive()); // \"Driving with GPS\"\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"What is the Decorator pattern and how is it used?\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Definition\"}),`\n`,(0,e.jsx)(n.p,{children:\"The Decorator pattern is a structural design pattern that allows you to dynamically add behavior and responsibilities to objects without modifying their code. This pattern creates a set of decorator classes that are used to wrap concrete components.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Use cases\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Adding functionalities\"}),\": When you need to add functionalities to objects without altering their structure.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Flexible and reusable code\"}),\": When you want to create flexible and reusable code by composing behaviors.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Single Responsibility Principle\"}),\": When you want to adhere to the Single Responsibility Principle by dividing functionalities into different classes.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Implementation in JavaScript\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Using classes\"}),`\n`,(0,e.jsx)(n.p,{children:\"In JavaScript, the Decorator pattern can be implemented using classes. Here is an example:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Car {\n  drive() {\n    return 'Driving';\n  }\n}\n\nclass CarDecorator {\n  constructor(car) {\n    this.car = car;\n  }\n\n  drive() {\n    return this.car.drive();\n  }\n}\n\nclass GPSDecorator extends CarDecorator {\n  drive() {\n    return \\`\\${super.drive()} with GPS\\`;\n  }\n}\n\nclass SunroofDecorator extends CarDecorator {\n  drive() {\n    return \\`\\${super.drive()} with Sunroof\\`;\n  }\n}\n\nconst myCar = new Car();\nconst myCarWithGPS = new GPSDecorator(myCar);\nconst myCarWithGPSAndSunroof = new SunroofDecorator(myCarWithGPS);\n\nconsole.log(myCarWithGPSAndSunroof.drive()); // \"Driving with GPS with Sunroof\"\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"Using higher-order functions\"}),`\n`,(0,e.jsx)(n.p,{children:\"Another way to implement the Decorator pattern in JavaScript is by using higher-order functions:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function car() {\n  return {\n    drive: () => 'Driving',\n  };\n}\n\nfunction gpsDecorator(car) {\n  return {\n    drive: () => \\`\\${car.drive()} with GPS\\`,\n  };\n}\n\nfunction sunroofDecorator(car) {\n  return {\n    drive: () => \\`\\${car.drive()} with Sunroof\\`,\n  };\n}\n\nlet myCar = car();\nmyCar = gpsDecorator(myCar);\nmyCar = sunroofDecorator(myCar);\n\nconsole.log(myCar.drive()); // \"Driving with GPS with Sunroof\"\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Advantages\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Open/Closed Principle\"}),\": Classes are open for extension but closed for modification.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Flexible\"}),\": Allows for the dynamic composition of behaviors.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Reusable\"}),\": Decorators can be reused across different objects.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Disadvantages\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Complexity\"}),\": Can lead to a large number of small classes or functions.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Debugging\"}),\": Can be harder to debug due to the added layers of abstraction.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Decorator_pattern\",children:\"Decorator Pattern on Wikipedia\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#class_decorators\",children:\"MDN Web Docs: Decorators\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://refactoring.guru/design-patterns/decorator\",children:\"Refactoring Guru: Decorator Pattern\"})}),`\n`]})]})}function h(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(d,{...r})}):d(r)}return b(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-decorator-pattern-and-how-is-it-used/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-decorator-pattern-and-how-is-it-used/zh-CN.json
index e90cec7df..6b420fa19 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-decorator-pattern-and-how-is-it-used/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-decorator-pattern-and-how-is-it-used/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-decorator-pattern-and-how-is-it-used/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var S=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),C=(e,n)=>{for(var i in n)t(e,i,{get:n[i],enumerable:!0})},a=(e,n,i,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of g(n))!p.call(e,c)&&c!==i&&t(e,c,{get:()=>n[c],enumerable:!(o=u(n,c))||o.enumerable});return e};var m=(e,n,i)=>(i=e!=null?s(v(e)):{},a(n||!e||!e.__esModule?t(i,\"default\",{value:e,enumerable:!0}):i,e)),D=e=>a(t({},\"__esModule\",{value:!0}),e);var h=S((x,l)=>{l.exports=_jsx_runtime});var y={};C(y,{default:()=>G,frontmatter:()=>f});var r=m(h()),f={title:\"\\u4EC0\\u4E48\\u662F\\u88C5\\u9970\\u5668\\u6A21\\u5F0F\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\uFF1F\"};function d(e){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",h4:\"h4\",a:\"a\"},e.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsx)(n.p,{children:\"\\u88C5\\u9970\\u5668\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u7ED3\\u6784\\u578B\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5B83\\u5141\\u8BB8\\u5C06\\u884C\\u4E3A\\u52A8\\u6001\\u5730\\u6DFB\\u52A0\\u5230\\u5355\\u4E2A\\u5BF9\\u8C61\\u4E2D\\uFF0C\\u800C\\u4E0D\\u4F1A\\u5F71\\u54CD\\u6765\\u81EA\\u540C\\u4E00\\u7C7B\\u7684\\u5176\\u4ED6\\u5BF9\\u8C61\\u7684\\u884C\\u4E3A\\u3002\\u5B83\\u7528\\u4E8E\\u901A\\u8FC7\\u7528\\u9644\\u52A0\\u884C\\u4E3A\\u5305\\u88C5\\u5BF9\\u8C61\\u6765\\u6269\\u5C55\\u5BF9\\u8C61\\u7684\\u529F\\u80FD\\u3002\\u5728 JavaScript \\u4E2D\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u4F7F\\u7528\\u9AD8\\u9636\\u51FD\\u6570\\u6216\\u7C7B\\u6765\\u5B9E\\u73B0\\u3002\"}),`\n`,(0,r.jsxs)(n.p,{children:[\"\\u4F8B\\u5982\\uFF0C\\u5982\\u679C\\u60A8\\u6709\\u4E00\\u4E2A \",(0,r.jsx)(n.code,{children:\"Car\"}),\" \\u7C7B\\uFF0C\\u5E76\\u4E14\\u60A8\\u60F3\\u6DFB\\u52A0 \",(0,r.jsx)(n.code,{children:\"GPS\"}),\" \\u6216 \",(0,r.jsx)(n.code,{children:\"Sunroof\"}),\" \\u7B49\\u529F\\u80FD\\uFF0C\\u800C\\u65E0\\u9700\\u4FEE\\u6539 \",(0,r.jsx)(n.code,{children:\"Car\"}),\" \\u7C7B\\u672C\\u8EAB\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4E3A\\u8FD9\\u4E9B\\u529F\\u80FD\\u521B\\u5EFA\\u88C5\\u9970\\u5668\\u3002\"]}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`class Car {\n  drive() {\n    return 'Driving';\n  }\n}\n\nclass CarDecorator {\n  constructor(car) {\n    this.car = car;\n  }\n\n  drive() {\n    return this.car.drive();\n  }\n}\n\nclass GPSDecorator extends CarDecorator {\n  drive() {\n    return \\`\\${super.drive()} with GPS\\`;\n  }\n}\n\nconst myCar = new Car();\nconst myCarWithGPS = new GPSDecorator(myCar);\nconsole.log(myCarWithGPS.drive()); // \"Driving with GPS\"\n`})}),`\n`,(0,r.jsx)(n.hr,{}),`\n`,(0,r.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u88C5\\u9970\\u5668\\u6A21\\u5F0F\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\uFF1F\"}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,r.jsx)(n.p,{children:\"\\u88C5\\u9970\\u5668\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u7ED3\\u6784\\u578B\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5B83\\u5141\\u8BB8\\u60A8\\u52A8\\u6001\\u5730\\u5411\\u5BF9\\u8C61\\u6DFB\\u52A0\\u884C\\u4E3A\\u548C\\u8D23\\u4EFB\\uFF0C\\u800C\\u65E0\\u9700\\u4FEE\\u6539\\u5176\\u4EE3\\u7801\\u3002\\u6B64\\u6A21\\u5F0F\\u521B\\u5EFA\\u4E00\\u7EC4\\u7528\\u4E8E\\u5305\\u88C5\\u5177\\u4F53\\u7EC4\\u4EF6\\u7684\\u88C5\\u9970\\u5668\\u7C7B\\u3002\"}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u6DFB\\u52A0\\u529F\\u80FD\"}),\": \\u5F53\\u60A8\\u9700\\u8981\\u5411\\u5BF9\\u8C61\\u6DFB\\u52A0\\u529F\\u80FD\\u800C\\u4E0D\\u66F4\\u6539\\u5176\\u7ED3\\u6784\\u65F6\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u7075\\u6D3B\\u4E14\\u53EF\\u91CD\\u7528\\u7684\\u4EE3\\u7801\"}),\": \\u5F53\\u60A8\\u5E0C\\u671B\\u901A\\u8FC7\\u7EC4\\u5408\\u884C\\u4E3A\\u6765\\u521B\\u5EFA\\u7075\\u6D3B\\u4E14\\u53EF\\u91CD\\u7528\\u7684\\u4EE3\\u7801\\u65F6\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5355\\u4E00\\u8D23\\u4EFB\\u539F\\u5219\"}),\": \\u5F53\\u60A8\\u5E0C\\u671B\\u901A\\u8FC7\\u5C06\\u529F\\u80FD\\u5212\\u5206\\u4E3A\\u4E0D\\u540C\\u7684\\u7C7B\\u6765\\u9075\\u5B88\\u5355\\u4E00\\u8D23\\u4EFB\\u539F\\u5219\\u65F6\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u5728 JavaScript \\u4E2D\\u7684\\u5B9E\\u73B0\"}),`\n`,(0,r.jsx)(n.h4,{children:\"\\u4F7F\\u7528\\u7C7B\"}),`\n`,(0,r.jsx)(n.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u7C7B\\u6765\\u5B9E\\u73B0\\u88C5\\u9970\\u5668\\u6A21\\u5F0F\\u3002 \\u8FD9\\u662F\\u4E00\\u4E2A\\u4F8B\\u5B50\\uFF1A\"}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`class Car {\n  drive() {\n    return 'Driving';\n  }\n}\n\nclass CarDecorator {\n  constructor(car) {\n    this.car = car;\n  }\n\n  drive() {\n    return this.car.drive();\n  }\n}\n\nclass GPSDecorator extends CarDecorator {\n  drive() {\n    return \\`\\${super.drive()} with GPS\\`;\n  }\n}\n\nclass SunroofDecorator extends CarDecorator {\n  drive() {\n    return \\`\\${super.drive()} with Sunroof\\`;\n  }\n}\n\nconst myCar = new Car();\nconst myCarWithGPS = new GPSDecorator(myCar);\nconst myCarWithGPSAndSunroof = new SunroofDecorator(myCarWithGPS);\n\nconsole.log(myCarWithGPSAndSunroof.drive()); // \"Driving with GPS with Sunroof\"\n`})}),`\n`,(0,r.jsx)(n.h4,{children:\"\\u4F7F\\u7528\\u9AD8\\u9636\\u51FD\\u6570\"}),`\n`,(0,r.jsx)(n.p,{children:\"\\u5728 JavaScript \\u4E2D\\u5B9E\\u73B0\\u88C5\\u9970\\u5668\\u6A21\\u5F0F\\u7684\\u53E6\\u4E00\\u79CD\\u65B9\\u6CD5\\u662F\\u4F7F\\u7528\\u9AD8\\u9636\\u51FD\\u6570\\uFF1A\"}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`function car() {\n  return {\n    drive: () => 'Driving',\n  };\n}\n\nfunction gpsDecorator(car) {\n  return {\n    drive: () => \\`\\${car.drive()} with GPS\\`,\n  };\n}\n\nfunction sunroofDecorator(car) {\n  return {\n    drive: () => \\`\\${car.drive()} with Sunroof\\`,\n  };\n}\n\nlet myCar = car();\nmyCar = gpsDecorator(myCar);\nmyCar = sunroofDecorator(myCar);\n\nconsole.log(myCar.drive()); // \"Driving with GPS with Sunroof\"\n`})}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5F00\\u95ED\\u539F\\u5219\"}),\"\\uFF1A\\u7C7B\\u5BF9\\u6269\\u5C55\\u5F00\\u653E\\uFF0C\\u5BF9\\u4FEE\\u6539\\u5173\\u95ED\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u7075\\u6D3B\"}),\"\\uFF1A\\u5141\\u8BB8\\u52A8\\u6001\\u7EC4\\u5408\\u884C\\u4E3A\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u53EF\\u91CD\\u7528\"}),\"\\uFF1A\\u88C5\\u9970\\u5668\\u53EF\\u4EE5\\u5728\\u4E0D\\u540C\\u7684\\u5BF9\\u8C61\\u4E4B\\u95F4\\u91CD\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u590D\\u6742\\u6027\"}),\"\\uFF1A\\u53EF\\u80FD\\u5BFC\\u81F4\\u5927\\u91CF\\u7684\\u5C0F\\u7C7B\\u6216\\u51FD\\u6570\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u8C03\\u8BD5\"}),\"\\uFF1A\\u7531\\u4E8E\\u589E\\u52A0\\u4E86\\u62BD\\u8C61\\u5C42\\uFF0C\\u53EF\\u80FD\\u66F4\\u96BE\\u8C03\\u8BD5\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Decorator_pattern\",children:\"\\u7EF4\\u57FA\\u767E\\u79D1\\u4E0A\\u7684\\u88C5\\u9970\\u5668\\u6A21\\u5F0F\"})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#class_decorators\",children:\"MDN Web Docs\\uFF1A\\u88C5\\u9970\\u5668\"})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://refactoring.guru/design-patterns/decorator\",children:\"Refactoring Guru\\uFF1A\\u88C5\\u9970\\u5668\\u6A21\\u5F0F\"})}),`\n`]})]})}function w(e={}){let{wrapper:n}=e.components||{};return n?(0,r.jsx)(n,Object.assign({},e,{children:(0,r.jsx)(d,e)})):d(e)}var G=w;return D(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var C=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),m=(e,n)=>{for(var i in n)o(e,i,{get:n[i],enumerable:!0})},a=(e,n,i,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of v(n))!S.call(e,c)&&c!==i&&o(e,c,{get:()=>n[c],enumerable:!(t=g(n,c))||t.enumerable});return e};var D=(e,n,i)=>(i=e!=null?u(p(e)):{},a(n||!e||!e.__esModule?o(i,\"default\",{value:e,enumerable:!0}):i,e)),f=e=>a(o({},\"__esModule\",{value:!0}),e);var h=C((P,l)=>{l.exports=_jsx_runtime});var G={};m(G,{default:()=>s,frontmatter:()=>w});var r=D(h()),w={title:\"\\u4EC0\\u4E48\\u662F\\u88C5\\u9970\\u5668\\u6A21\\u5F0F\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\uFF1F\"};function d(e){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsx)(n.p,{children:\"\\u88C5\\u9970\\u5668\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u7ED3\\u6784\\u578B\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5B83\\u5141\\u8BB8\\u5C06\\u884C\\u4E3A\\u52A8\\u6001\\u5730\\u6DFB\\u52A0\\u5230\\u5355\\u4E2A\\u5BF9\\u8C61\\u4E2D\\uFF0C\\u800C\\u4E0D\\u4F1A\\u5F71\\u54CD\\u6765\\u81EA\\u540C\\u4E00\\u7C7B\\u7684\\u5176\\u4ED6\\u5BF9\\u8C61\\u7684\\u884C\\u4E3A\\u3002\\u5B83\\u7528\\u4E8E\\u901A\\u8FC7\\u7528\\u9644\\u52A0\\u884C\\u4E3A\\u5305\\u88C5\\u5BF9\\u8C61\\u6765\\u6269\\u5C55\\u5BF9\\u8C61\\u7684\\u529F\\u80FD\\u3002\\u5728 JavaScript \\u4E2D\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u4F7F\\u7528\\u9AD8\\u9636\\u51FD\\u6570\\u6216\\u7C7B\\u6765\\u5B9E\\u73B0\\u3002\"}),`\n`,(0,r.jsxs)(n.p,{children:[\"\\u4F8B\\u5982\\uFF0C\\u5982\\u679C\\u60A8\\u6709\\u4E00\\u4E2A \",(0,r.jsx)(n.code,{children:\"Car\"}),\" \\u7C7B\\uFF0C\\u5E76\\u4E14\\u60A8\\u60F3\\u6DFB\\u52A0 \",(0,r.jsx)(n.code,{children:\"GPS\"}),\" \\u6216 \",(0,r.jsx)(n.code,{children:\"Sunroof\"}),\" \\u7B49\\u529F\\u80FD\\uFF0C\\u800C\\u65E0\\u9700\\u4FEE\\u6539 \",(0,r.jsx)(n.code,{children:\"Car\"}),\" \\u7C7B\\u672C\\u8EAB\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4E3A\\u8FD9\\u4E9B\\u529F\\u80FD\\u521B\\u5EFA\\u88C5\\u9970\\u5668\\u3002\"]}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`class Car {\n  drive() {\n    return 'Driving';\n  }\n}\n\nclass CarDecorator {\n  constructor(car) {\n    this.car = car;\n  }\n\n  drive() {\n    return this.car.drive();\n  }\n}\n\nclass GPSDecorator extends CarDecorator {\n  drive() {\n    return \\`\\${super.drive()} with GPS\\`;\n  }\n}\n\nconst myCar = new Car();\nconst myCarWithGPS = new GPSDecorator(myCar);\nconsole.log(myCarWithGPS.drive()); // \"Driving with GPS\"\n`})}),`\n`,(0,r.jsx)(n.hr,{}),`\n`,(0,r.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u88C5\\u9970\\u5668\\u6A21\\u5F0F\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\uFF1F\"}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,r.jsx)(n.p,{children:\"\\u88C5\\u9970\\u5668\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u7ED3\\u6784\\u578B\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5B83\\u5141\\u8BB8\\u60A8\\u52A8\\u6001\\u5730\\u5411\\u5BF9\\u8C61\\u6DFB\\u52A0\\u884C\\u4E3A\\u548C\\u8D23\\u4EFB\\uFF0C\\u800C\\u65E0\\u9700\\u4FEE\\u6539\\u5176\\u4EE3\\u7801\\u3002\\u6B64\\u6A21\\u5F0F\\u521B\\u5EFA\\u4E00\\u7EC4\\u7528\\u4E8E\\u5305\\u88C5\\u5177\\u4F53\\u7EC4\\u4EF6\\u7684\\u88C5\\u9970\\u5668\\u7C7B\\u3002\"}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u6DFB\\u52A0\\u529F\\u80FD\"}),\": \\u5F53\\u60A8\\u9700\\u8981\\u5411\\u5BF9\\u8C61\\u6DFB\\u52A0\\u529F\\u80FD\\u800C\\u4E0D\\u66F4\\u6539\\u5176\\u7ED3\\u6784\\u65F6\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u7075\\u6D3B\\u4E14\\u53EF\\u91CD\\u7528\\u7684\\u4EE3\\u7801\"}),\": \\u5F53\\u60A8\\u5E0C\\u671B\\u901A\\u8FC7\\u7EC4\\u5408\\u884C\\u4E3A\\u6765\\u521B\\u5EFA\\u7075\\u6D3B\\u4E14\\u53EF\\u91CD\\u7528\\u7684\\u4EE3\\u7801\\u65F6\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5355\\u4E00\\u8D23\\u4EFB\\u539F\\u5219\"}),\": \\u5F53\\u60A8\\u5E0C\\u671B\\u901A\\u8FC7\\u5C06\\u529F\\u80FD\\u5212\\u5206\\u4E3A\\u4E0D\\u540C\\u7684\\u7C7B\\u6765\\u9075\\u5B88\\u5355\\u4E00\\u8D23\\u4EFB\\u539F\\u5219\\u65F6\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u5728 JavaScript \\u4E2D\\u7684\\u5B9E\\u73B0\"}),`\n`,(0,r.jsx)(n.h4,{children:\"\\u4F7F\\u7528\\u7C7B\"}),`\n`,(0,r.jsx)(n.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u7C7B\\u6765\\u5B9E\\u73B0\\u88C5\\u9970\\u5668\\u6A21\\u5F0F\\u3002 \\u8FD9\\u662F\\u4E00\\u4E2A\\u4F8B\\u5B50\\uFF1A\"}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`class Car {\n  drive() {\n    return 'Driving';\n  }\n}\n\nclass CarDecorator {\n  constructor(car) {\n    this.car = car;\n  }\n\n  drive() {\n    return this.car.drive();\n  }\n}\n\nclass GPSDecorator extends CarDecorator {\n  drive() {\n    return \\`\\${super.drive()} with GPS\\`;\n  }\n}\n\nclass SunroofDecorator extends CarDecorator {\n  drive() {\n    return \\`\\${super.drive()} with Sunroof\\`;\n  }\n}\n\nconst myCar = new Car();\nconst myCarWithGPS = new GPSDecorator(myCar);\nconst myCarWithGPSAndSunroof = new SunroofDecorator(myCarWithGPS);\n\nconsole.log(myCarWithGPSAndSunroof.drive()); // \"Driving with GPS with Sunroof\"\n`})}),`\n`,(0,r.jsx)(n.h4,{children:\"\\u4F7F\\u7528\\u9AD8\\u9636\\u51FD\\u6570\"}),`\n`,(0,r.jsx)(n.p,{children:\"\\u5728 JavaScript \\u4E2D\\u5B9E\\u73B0\\u88C5\\u9970\\u5668\\u6A21\\u5F0F\\u7684\\u53E6\\u4E00\\u79CD\\u65B9\\u6CD5\\u662F\\u4F7F\\u7528\\u9AD8\\u9636\\u51FD\\u6570\\uFF1A\"}),`\n`,(0,r.jsx)(n.pre,{live:!0,children:(0,r.jsx)(n.code,{className:\"language-js\",children:`function car() {\n  return {\n    drive: () => 'Driving',\n  };\n}\n\nfunction gpsDecorator(car) {\n  return {\n    drive: () => \\`\\${car.drive()} with GPS\\`,\n  };\n}\n\nfunction sunroofDecorator(car) {\n  return {\n    drive: () => \\`\\${car.drive()} with Sunroof\\`,\n  };\n}\n\nlet myCar = car();\nmyCar = gpsDecorator(myCar);\nmyCar = sunroofDecorator(myCar);\n\nconsole.log(myCar.drive()); // \"Driving with GPS with Sunroof\"\n`})}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5F00\\u95ED\\u539F\\u5219\"}),\"\\uFF1A\\u7C7B\\u5BF9\\u6269\\u5C55\\u5F00\\u653E\\uFF0C\\u5BF9\\u4FEE\\u6539\\u5173\\u95ED\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u7075\\u6D3B\"}),\"\\uFF1A\\u5141\\u8BB8\\u52A8\\u6001\\u7EC4\\u5408\\u884C\\u4E3A\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u53EF\\u91CD\\u7528\"}),\"\\uFF1A\\u88C5\\u9970\\u5668\\u53EF\\u4EE5\\u5728\\u4E0D\\u540C\\u7684\\u5BF9\\u8C61\\u4E4B\\u95F4\\u91CD\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u590D\\u6742\\u6027\"}),\"\\uFF1A\\u53EF\\u80FD\\u5BFC\\u81F4\\u5927\\u91CF\\u7684\\u5C0F\\u7C7B\\u6216\\u51FD\\u6570\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u8C03\\u8BD5\"}),\"\\uFF1A\\u7531\\u4E8E\\u589E\\u52A0\\u4E86\\u62BD\\u8C61\\u5C42\\uFF0C\\u53EF\\u80FD\\u66F4\\u96BE\\u8C03\\u8BD5\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Decorator_pattern\",children:\"\\u7EF4\\u57FA\\u767E\\u79D1\\u4E0A\\u7684\\u88C5\\u9970\\u5668\\u6A21\\u5F0F\"})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#class_decorators\",children:\"MDN Web Docs\\uFF1A\\u88C5\\u9970\\u5668\"})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://refactoring.guru/design-patterns/decorator\",children:\"Refactoring Guru\\uFF1A\\u88C5\\u9970\\u5668\\u6A21\\u5F0F\"})}),`\n`]})]})}function s(e={}){let{wrapper:n}=e.components||{};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}return f(G);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-definition-of-a-higher-order-function/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-definition-of-a-higher-order-function/en-US.json
index 62fc2e2b3..31cdaf016 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-definition-of-a-higher-order-function/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-definition-of-a-higher-order-function/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var p=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),y=(r,n)=>{for(var t in n)i(r,t,{get:n[t],enumerable:!0})},c=(r,n,t,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let a of m(n))!g.call(r,a)&&a!==t&&i(r,a,{get:()=>n[a],enumerable:!(o=d(n,a))||o.enumerable});return r};var b=(r,n,t)=>(t=r!=null?u(f(r)):{},c(n||!r||!r.__esModule?i(t,\"default\",{value:r,enumerable:!0}):t,r)),w=r=>c(i({},\"__esModule\",{value:!0}),r);var h=p((F,s)=>{s.exports=_jsx_runtime});var x={};y(x,{default:()=>N,frontmatter:()=>v});var e=b(h()),v={title:\"What is the definition of a higher-order function in JavaScript?\"};function l(r){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"A higher-order function is any function that takes one or more functions as arguments, which it uses to operate on some data, and/or returns a function as a result.\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Higher-order functions are meant to abstract some operation that is performed repeatedly. The classic example of this is \",(0,e.jsx)(n.code,{children:\"Array.prototype.map()\"}),\", which takes an array and a function as arguments. \",(0,e.jsx)(n.code,{children:\"Array.prototype.map()\"}),\" then uses this function to transform each item in the array, returning a new array with the transformed data. Other popular examples in JavaScript are \",(0,e.jsx)(n.code,{children:\"Array.prototype.forEach()\"}),\", \",(0,e.jsx)(n.code,{children:\"Array.prototype.filter()\"}),\", and \",(0,e.jsx)(n.code,{children:\"Array.prototype.reduce()\"}),\". A higher-order function doesn't just need to be manipulating arrays as there are many use cases for returning a function from another function. \",(0,e.jsx)(n.code,{children:\"Function.prototype.bind()\"}),\" is an example that returns another function.\"]}),`\n`,(0,e.jsx)(n.p,{children:\"Imagine a scenario where we have an array of names that we need to transform to uppercase. The imperative way will be as such:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const names = ['irish', 'daisy', 'anna'];\n\nfunction transformNamesToUppercase(names) {\n  const results = [];\n  for (let i = 0; i < names.length; i++) {\n    results.push(names[i].toUpperCase());\n  }\n  return results;\n}\n\nconsole.log(transformNamesToUppercase(names)); // ['IRISH', 'DAISY', 'ANNA']\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"Using \",(0,e.jsx)(n.code,{children:\"Array.prototype.map(transformerFn)\"}),\" makes the code shorter and more declarative.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const names = ['irish', 'daisy', 'anna'];\n\nfunction transformNamesToUppercase(names) {\n  return names.map((name) => name.toUpperCase());\n}\n\nconsole.log(transformNamesToUppercase(names)); // ['IRISH', 'DAISY', 'ANNA']\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Higher order functions\"}),`\n`,(0,e.jsx)(n.p,{children:\"A higher-order function is a function that takes another function as an argument or returns a function as its result.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Functions as arguments\"}),`\n`,(0,e.jsx)(n.p,{children:\"A higher-order function can take another function as an argument and execute it.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet(name) {\n  return \\`Hello, \\${name}!\\`;\n}\n\nfunction greetName(greeter, name) {\n  console.log(greeter(name));\n}\n\ngreetName(greet, 'Alice'); // Output: Hello, Alice!\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In this example, the \",(0,e.jsx)(n.code,{children:\"greetName\"}),\" function is higher-order function because it takes another function (\",(0,e.jsx)(n.code,{children:\"greet\"}),\") as an argument and uses it to generate a greeting for the given name.\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Functions as return values\"}),`\n`,(0,e.jsx)(n.p,{children:\"A higher-order function can return another function.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function multiplier(factor) {\n  return function (num) {\n    return num * factor;\n  };\n}\n\nconst double = multiplier(2);\nconst triple = multiplier(3);\n\nconsole.log(double(5)); // Output: 10\nconsole.log(triple(5)); // Output: 15\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In this example, the \",(0,e.jsx)(n.code,{children:\"multiplier\"}),\" function returns a new function that multiplies any number by the specified factor. The returned function is a closure that remembers the \",(0,e.jsx)(n.code,{children:\"factor\"}),\" value from the outer function. The \",(0,e.jsx)(n.code,{children:\"multiplier\"}),\" function is a higher-order function because it returns another function.\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Practical examples\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Logging decorator\"}),\": A higher-order function that adds logging functionality to another function:\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function withLogging(fn) {\n  return function (...args) {\n    console.log(\\`Calling \\${fn.name} with arguments\\`, args);\n    return fn.apply(this, args);\n  };\n}\n\nfunction add(a, b) {\n  return a + b;\n}\n\nconst loggedAdd = withLogging(add);\nconsole.log(loggedAdd(2, 3));\n// Output:\n// Calling add with arguments [2, 3]\n// 5\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"The \",(0,e.jsx)(n.code,{children:\"withLogging\"}),\" function is a higher-order function that takes a function fn as an argument and returns a new function that logs the function call before executing the original function\"]}),`\n`,(0,e.jsxs)(n.ol,{start:\"2\",children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Memoization\"}),\": A higher-order function that caches the results of a function to avoid redundant computations:\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function memoize(fn) {\n  const cache = new Map();\n  return function (...args) {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      return cache.get(key);\n    }\n    const result = fn.apply(this, args);\n    cache.set(key, result);\n    return result;\n  };\n}\n\nfunction fibonacci(n) {\n  if (n <= 1) return n;\n  return fibonacci(n - 1) + fibonacci(n - 2);\n}\n\nconst memoizedFibonacci = memoize(fibonacci);\nconsole.log(memoizedFibonacci(10)); // Output: 55\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"The \",(0,e.jsx)(n.code,{children:\"memoize\"}),\" function is a higher-order function that takes a function \",(0,e.jsx)(n.code,{children:\"fn\"}),\" as an argument and returns a new function that caches the results of the original function based on its arguments.\"]}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Lodash\"}),\": Lodash is a utility library that provides a wide range of functions for working with arrays, objects, strings, and more, most of which are higher-order functions.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`import _ from 'lodash';\n\nconst numbers = [1, 2, 3, 4, 5];\n\n// Filter array\nconst evenNumbers = _.filter(numbers, (n) => n % 2 === 0); // [2, 4]\n\n// Map array\nconst doubledNumbers = _.map(numbers, (n) => n * 2); // [2, 4, 6, 8, 10]\n\n// Find the maximum value\nconst maxValue = _.max(numbers); // 5\n\n// Sum all values\nconst sum = _.sum(numbers); // 15\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/05_higher_order.html\",children:\"Higher-Order Functions\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://blog.bitsrc.io/understanding-higher-order-functions-in-javascript-75461803bad\",children:\"Understanding Higher-Order Functions in JavaScript\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/higher-order-functions-in-javascript-d9101f9cf528/\",children:\"Higher Order Functions: How to Use Filter, Map and Reduce for More Maintainable Code\"})}),`\n`]})]})}function A(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(l,r)})):l(r)}var N=A;return w(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var y=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),b=(r,n)=>{for(var t in n)i(r,t,{get:n[t],enumerable:!0})},c=(r,n,t,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let a of f(n))!p.call(r,a)&&a!==t&&i(r,a,{get:()=>n[a],enumerable:!(o=m(n,a))||o.enumerable});return r};var w=(r,n,t)=>(t=r!=null?d(g(r)):{},c(n||!r||!r.__esModule?i(t,\"default\",{value:r,enumerable:!0}):t,r)),v=r=>c(i({},\"__esModule\",{value:!0}),r);var h=y((j,s)=>{s.exports=_jsx_runtime});var N={};b(N,{default:()=>u,frontmatter:()=>A});var e=w(h()),A={title:\"What is the definition of a higher-order function in JavaScript?\"};function l(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"A higher-order function is any function that takes one or more functions as arguments, which it uses to operate on some data, and/or returns a function as a result.\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Higher-order functions are meant to abstract some operation that is performed repeatedly. The classic example of this is \",(0,e.jsx)(n.code,{children:\"Array.prototype.map()\"}),\", which takes an array and a function as arguments. \",(0,e.jsx)(n.code,{children:\"Array.prototype.map()\"}),\" then uses this function to transform each item in the array, returning a new array with the transformed data. Other popular examples in JavaScript are \",(0,e.jsx)(n.code,{children:\"Array.prototype.forEach()\"}),\", \",(0,e.jsx)(n.code,{children:\"Array.prototype.filter()\"}),\", and \",(0,e.jsx)(n.code,{children:\"Array.prototype.reduce()\"}),\". A higher-order function doesn't just need to be manipulating arrays as there are many use cases for returning a function from another function. \",(0,e.jsx)(n.code,{children:\"Function.prototype.bind()\"}),\" is an example that returns another function.\"]}),`\n`,(0,e.jsx)(n.p,{children:\"Imagine a scenario where we have an array of names that we need to transform to uppercase. The imperative way will be as such:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const names = ['irish', 'daisy', 'anna'];\n\nfunction transformNamesToUppercase(names) {\n  const results = [];\n  for (let i = 0; i < names.length; i++) {\n    results.push(names[i].toUpperCase());\n  }\n  return results;\n}\n\nconsole.log(transformNamesToUppercase(names)); // ['IRISH', 'DAISY', 'ANNA']\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"Using \",(0,e.jsx)(n.code,{children:\"Array.prototype.map(transformerFn)\"}),\" makes the code shorter and more declarative.\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const names = ['irish', 'daisy', 'anna'];\n\nfunction transformNamesToUppercase(names) {\n  return names.map((name) => name.toUpperCase());\n}\n\nconsole.log(transformNamesToUppercase(names)); // ['IRISH', 'DAISY', 'ANNA']\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Higher order functions\"}),`\n`,(0,e.jsx)(n.p,{children:\"A higher-order function is a function that takes another function as an argument or returns a function as its result.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Functions as arguments\"}),`\n`,(0,e.jsx)(n.p,{children:\"A higher-order function can take another function as an argument and execute it.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet(name) {\n  return \\`Hello, \\${name}!\\`;\n}\n\nfunction greetName(greeter, name) {\n  console.log(greeter(name));\n}\n\ngreetName(greet, 'Alice'); // Output: Hello, Alice!\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In this example, the \",(0,e.jsx)(n.code,{children:\"greetName\"}),\" function is higher-order function because it takes another function (\",(0,e.jsx)(n.code,{children:\"greet\"}),\") as an argument and uses it to generate a greeting for the given name.\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Functions as return values\"}),`\n`,(0,e.jsx)(n.p,{children:\"A higher-order function can return another function.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function multiplier(factor) {\n  return function (num) {\n    return num * factor;\n  };\n}\n\nconst double = multiplier(2);\nconst triple = multiplier(3);\n\nconsole.log(double(5)); // Output: 10\nconsole.log(triple(5)); // Output: 15\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In this example, the \",(0,e.jsx)(n.code,{children:\"multiplier\"}),\" function returns a new function that multiplies any number by the specified factor. The returned function is a closure that remembers the \",(0,e.jsx)(n.code,{children:\"factor\"}),\" value from the outer function. The \",(0,e.jsx)(n.code,{children:\"multiplier\"}),\" function is a higher-order function because it returns another function.\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Practical examples\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Logging decorator\"}),\": A higher-order function that adds logging functionality to another function:\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function withLogging(fn) {\n  return function (...args) {\n    console.log(\\`Calling \\${fn.name} with arguments\\`, args);\n    return fn.apply(this, args);\n  };\n}\n\nfunction add(a, b) {\n  return a + b;\n}\n\nconst loggedAdd = withLogging(add);\nconsole.log(loggedAdd(2, 3));\n// Output:\n// Calling add with arguments [2, 3]\n// 5\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"The \",(0,e.jsx)(n.code,{children:\"withLogging\"}),\" function is a higher-order function that takes a function fn as an argument and returns a new function that logs the function call before executing the original function\"]}),`\n`,(0,e.jsxs)(n.ol,{start:\"2\",children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Memoization\"}),\": A higher-order function that caches the results of a function to avoid redundant computations:\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function memoize(fn) {\n  const cache = new Map();\n  return function (...args) {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      return cache.get(key);\n    }\n    const result = fn.apply(this, args);\n    cache.set(key, result);\n    return result;\n  };\n}\n\nfunction fibonacci(n) {\n  if (n <= 1) return n;\n  return fibonacci(n - 1) + fibonacci(n - 2);\n}\n\nconst memoizedFibonacci = memoize(fibonacci);\nconsole.log(memoizedFibonacci(10)); // Output: 55\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"The \",(0,e.jsx)(n.code,{children:\"memoize\"}),\" function is a higher-order function that takes a function \",(0,e.jsx)(n.code,{children:\"fn\"}),\" as an argument and returns a new function that caches the results of the original function based on its arguments.\"]}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Lodash\"}),\": Lodash is a utility library that provides a wide range of functions for working with arrays, objects, strings, and more, most of which are higher-order functions.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`import _ from 'lodash';\n\nconst numbers = [1, 2, 3, 4, 5];\n\n// Filter array\nconst evenNumbers = _.filter(numbers, (n) => n % 2 === 0); // [2, 4]\n\n// Map array\nconst doubledNumbers = _.map(numbers, (n) => n * 2); // [2, 4, 6, 8, 10]\n\n// Find the maximum value\nconst maxValue = _.max(numbers); // 5\n\n// Sum all values\nconst sum = _.sum(numbers); // 15\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/05_higher_order.html\",children:\"Higher-Order Functions\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://blog.bitsrc.io/understanding-higher-order-functions-in-javascript-75461803bad\",children:\"Understanding Higher-Order Functions in JavaScript\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/higher-order-functions-in-javascript-d9101f9cf528/\",children:\"Higher Order Functions: How to Use Filter, Map and Reduce for More Maintainable Code\"})}),`\n`]})]})}function u(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(l,{...r})}):l(r)}return v(N);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-definition-of-a-higher-order-function/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-is-the-definition-of-a-higher-order-function/pt-BR.json
index 46c92c21d..3b0358731 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-definition-of-a-higher-order-function/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-definition-of-a-higher-order-function/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-definition-of-a-higher-order-function/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var g=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),x=(a,e)=>{for(var n in e)s(a,n,{get:e[n],enumerable:!0})},t=(a,e,n,m)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of l(e))!h.call(a,o)&&o!==n&&s(a,o,{get:()=>e[o],enumerable:!(m=p(e,o))||m.enumerable});return a};var j=(a,e,n)=>(n=a!=null?d(f(a)):{},t(e||!a||!a.__esModule?s(n,\"default\",{value:a,enumerable:!0}):n,a)),N=a=>t(s({},\"__esModule\",{value:!0}),a);var u=g((_,c)=>{c.exports=_jsx_runtime});var A={};x(A,{default:()=>y,frontmatter:()=>U});var r=j(u()),U={title:\"Qual \\xE9 a defini\\xE7\\xE3o de uma fun\\xE7\\xE3o de ordem superior?\"};function i(a){let e=Object.assign({p:\"p\",code:\"code\",h2:\"h2\",pre:\"pre\"},a.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.p,{children:[\"Uma fun\\xE7\\xE3o de ordem superior \\xE9 qualquer fun\\xE7\\xE3o que recebe uma ou mais fun\\xE7\\xF5es como argumentos, que ela usa para operar em algum dado e/ou retorna uma fun\\xE7\\xE3o como resultado. As fun\\xE7\\xF5es de ordem superior t\\xEAm como objetivo abstrair alguma opera\\xE7\\xE3o que \\xE9 realizada repetidamente. O exemplo cl\\xE1ssico disso \\xE9 o map, que recebe como argumentos um array e uma fun\\xE7\\xE3o. O map ent\\xE3o usa essa fun\\xE7\\xE3o para transformar cada item no array, retornando um novo array com os dados transformados. Outros exemplos populares em JavaScript s\\xE3o \",(0,r.jsx)(e.code,{children:\"forEach\"}),\", \",(0,r.jsx)(e.code,{children:\"filter\"}),\" e \",(0,r.jsx)(e.code,{children:\"reduce\"}),\". Uma fun\\xE7\\xE3o de ordem superior n\\xE3o precisa apenas manipular arrays, pois h\\xE1 muitos casos de uso para retornar uma fun\\xE7\\xE3o de outra fun\\xE7\\xE3o. \",(0,r.jsx)(e.code,{children:\"Function.prototype.bind\"}),\" \\xE9 um exemplo desse tipo em JavaScript.\"]}),`\n`,(0,r.jsx)(e.h2,{children:\"Map\"}),`\n`,(0,r.jsx)(e.p,{children:\"Vamos supor que temos um array de nomes no qual precisamos transformar cada string em mai\\xFAsculas.\"}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const names = ['irish', 'daisy', 'anna'];\n`})}),`\n`,(0,r.jsx)(e.p,{children:\"A maneira imperativa seria assim:\"}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const transformNamesToUppercase = function (names) {\n  const results = [];\n  for (let i = 0; i < names.length; i++) {\n    results.push(names[i].toUpperCase());\n  }\n  return results;\n};\ntransformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"Use \",(0,r.jsx)(e.code,{children:\".map(transformerFn)\"}),\" torna o c\\xF3digo mais curto e mais declarativo.\"]}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const transformNamesToUppercase = function (names) {\n  return names.map((name) => name.toUpperCase());\n};\ntransformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']\n`})})]})}function q(a={}){let{wrapper:e}=a.components||{};return e?(0,r.jsx)(e,Object.assign({},a,{children:(0,r.jsx)(i,a)})):i(a)}var y=q;return N(A);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),N=(a,e)=>{for(var n in e)s(a,n,{get:e[n],enumerable:!0})},t=(a,e,n,m)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of f(e))!g.call(a,o)&&o!==n&&s(a,o,{get:()=>e[o],enumerable:!(m=l(e,o))||m.enumerable});return a};var j=(a,e,n)=>(n=a!=null?p(h(a)):{},t(e||!a||!a.__esModule?s(n,\"default\",{value:a,enumerable:!0}):n,a)),U=a=>t(s({},\"__esModule\",{value:!0}),a);var u=x((_,c)=>{c.exports=_jsx_runtime});var y={};N(y,{default:()=>d,frontmatter:()=>q});var r=j(u()),q={title:\"Qual \\xE9 a defini\\xE7\\xE3o de uma fun\\xE7\\xE3o de ordem superior?\"};function i(a){let e={code:\"code\",h2:\"h2\",p:\"p\",pre:\"pre\",...a.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.p,{children:[\"Uma fun\\xE7\\xE3o de ordem superior \\xE9 qualquer fun\\xE7\\xE3o que recebe uma ou mais fun\\xE7\\xF5es como argumentos, que ela usa para operar em algum dado e/ou retorna uma fun\\xE7\\xE3o como resultado. As fun\\xE7\\xF5es de ordem superior t\\xEAm como objetivo abstrair alguma opera\\xE7\\xE3o que \\xE9 realizada repetidamente. O exemplo cl\\xE1ssico disso \\xE9 o map, que recebe como argumentos um array e uma fun\\xE7\\xE3o. O map ent\\xE3o usa essa fun\\xE7\\xE3o para transformar cada item no array, retornando um novo array com os dados transformados. Outros exemplos populares em JavaScript s\\xE3o \",(0,r.jsx)(e.code,{children:\"forEach\"}),\", \",(0,r.jsx)(e.code,{children:\"filter\"}),\" e \",(0,r.jsx)(e.code,{children:\"reduce\"}),\". Uma fun\\xE7\\xE3o de ordem superior n\\xE3o precisa apenas manipular arrays, pois h\\xE1 muitos casos de uso para retornar uma fun\\xE7\\xE3o de outra fun\\xE7\\xE3o. \",(0,r.jsx)(e.code,{children:\"Function.prototype.bind\"}),\" \\xE9 um exemplo desse tipo em JavaScript.\"]}),`\n`,(0,r.jsx)(e.h2,{children:\"Map\"}),`\n`,(0,r.jsx)(e.p,{children:\"Vamos supor que temos um array de nomes no qual precisamos transformar cada string em mai\\xFAsculas.\"}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const names = ['irish', 'daisy', 'anna'];\n`})}),`\n`,(0,r.jsx)(e.p,{children:\"A maneira imperativa seria assim:\"}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const transformNamesToUppercase = function (names) {\n  const results = [];\n  for (let i = 0; i < names.length; i++) {\n    results.push(names[i].toUpperCase());\n  }\n  return results;\n};\ntransformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"Use \",(0,r.jsx)(e.code,{children:\".map(transformerFn)\"}),\" torna o c\\xF3digo mais curto e mais declarativo.\"]}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const transformNamesToUppercase = function (names) {\n  return names.map((name) => name.toUpperCase());\n};\ntransformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']\n`})})]})}function d(a={}){let{wrapper:e}=a.components||{};return e?(0,r.jsx)(e,{...a,children:(0,r.jsx)(i,{...a})}):i(a)}return U(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-definition-of-a-higher-order-function/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-definition-of-a-higher-order-function/zh-CN.json
index ea3bb1a1a..a2a51b7d5 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-definition-of-a-higher-order-function/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-definition-of-a-higher-order-function/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-definition-of-a-higher-order-function/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),y=(r,n)=>{for(var c in n)t(r,c,{get:n[c],enumerable:!0})},l=(r,n,c,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of m(n))!g.call(r,i)&&i!==c&&t(r,i,{get:()=>n[i],enumerable:!(o=u(n,i))||o.enumerable});return r};var b=(r,n,c)=>(c=r!=null?h(p(r)):{},l(n||!r||!r.__esModule?t(c,\"default\",{value:r,enumerable:!0}):c,r)),N=r=>l(t({},\"__esModule\",{value:!0}),r);var s=f((w,a)=>{a.exports=_jsx_runtime});var _={};y(_,{default:()=>v,frontmatter:()=>j});var e=b(s()),j={title:\"JavaScript \\u4E2D\\u9AD8\\u9636\\u51FD\\u6570\\u7684\\u5B9A\\u4E49\\u662F\\u4EC0\\u4E48\\uFF1F\"};function d(r){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9AD8\\u9636\\u51FD\\u6570\\u662F\\u6307\\u5C06\\u4E00\\u4E2A\\u6216\\u591A\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\uFF0C\\u5B83\\u4F7F\\u7528\\u8FD9\\u4E9B\\u51FD\\u6570\\u5BF9\\u67D0\\u4E9B\\u6570\\u636E\\u8FDB\\u884C\\u64CD\\u4F5C\\uFF0C\\u548C/\\u6216\\u8FD4\\u56DE\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A\\u7ED3\\u679C\\u3002\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u9AD8\\u9636\\u51FD\\u6570\\u65E8\\u5728\\u62BD\\u8C61\\u4E00\\u4E9B\\u91CD\\u590D\\u6267\\u884C\\u7684\\u64CD\\u4F5C\\u3002 \\u5178\\u578B\\u7684\\u4F8B\\u5B50\\u662F \",(0,e.jsx)(n.code,{children:\"Array.prototype.map()\"}),\"\\uFF0C\\u5B83\\u63A5\\u53D7\\u4E00\\u4E2A\\u6570\\u7EC4\\u548C\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A\\u53C2\\u6570\\u3002 \\u7136\\u540E\\uFF0C\",(0,e.jsx)(n.code,{children:\"Array.prototype.map()\"}),\" \\u4F7F\\u7528\\u6B64\\u51FD\\u6570\\u8F6C\\u6362\\u6570\\u7EC4\\u4E2D\\u7684\\u6BCF\\u4E2A\\u9879\\u76EE\\uFF0C\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5305\\u542B\\u8F6C\\u6362\\u540E\\u7684\\u6570\\u636E\\u7684\\u65B0\\u6570\\u7EC4\\u3002 JavaScript \\u4E2D\\u5176\\u4ED6\\u5E38\\u89C1\\u7684\\u4F8B\\u5B50\\u662F \",(0,e.jsx)(n.code,{children:\"Array.prototype.forEach()\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"Array.prototype.filter()\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"Array.prototype.reduce()\"}),\"\\u3002 \\u9AD8\\u9636\\u51FD\\u6570\\u4E0D\\u4EC5\\u4EC5\\u9700\\u8981\\u64CD\\u4F5C\\u6570\\u7EC4\\uFF0C\\u56E0\\u4E3A\\u4ECE\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u8FD4\\u56DE\\u4E00\\u4E2A\\u51FD\\u6570\\u6709\\u5F88\\u591A\\u7528\\u4F8B\\u3002 \",(0,e.jsx)(n.code,{children:\"Function.prototype.bind()\"}),\" \\u5C31\\u662F\\u4E00\\u4E2A\\u8FD4\\u56DE\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u7684\\u4F8B\\u5B50\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60F3\\u8C61\\u4E00\\u4E0B\\uFF0C\\u6211\\u4EEC\\u6709\\u4E00\\u4E2A\\u9700\\u8981\\u8F6C\\u6362\\u4E3A\\u5927\\u5199\\u7684\\u540D\\u79F0\\u6570\\u7EC4\\u3002 \\u547D\\u4EE4\\u5F0F\\u65B9\\u6CD5\\u5982\\u4E0B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const names = ['irish', 'daisy', 'anna'];\n\nfunction transformNamesToUppercase(names) {\n  const results = [];\n  for (let i = 0; i < names.length; i++) {\n    results.push(names[i].toUpperCase());\n  }\n  return results;\n}\n\nconsole.log(transformNamesToUppercase(names)); // ['IRISH', 'DAISY', 'ANNA']\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"Array.prototype.map(transformerFn)\"}),\" \\u4F7F\\u4EE3\\u7801\\u66F4\\u77ED\\u3001\\u66F4\\u5177\\u58F0\\u660E\\u6027\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const names = ['irish', 'daisy', 'anna'];\n\nfunction transformNamesToUppercase(names) {\n  return names.map((name) => name.toUpperCase());\n}\n\nconsole.log(transformNamesToUppercase(names)); // ['IRISH', 'DAISY', 'ANNA']\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u9AD8\\u9636\\u51FD\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9AD8\\u9636\\u51FD\\u6570\\u662F\\u4E00\\u4E2A\\u5C06\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A\\u53C2\\u6570\\u6216\\u8FD4\\u56DE\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A\\u5176\\u7ED3\\u679C\\u7684\\u51FD\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u4F5C\\u4E3A\\u53C2\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9AD8\\u9636\\u51FD\\u6570\\u53EF\\u4EE5\\u5C06\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A\\u53C2\\u6570\\u5E76\\u6267\\u884C\\u5B83\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet(name) {\n  return \\`Hello, \\${name}!\\`;\n}\n\nfunction greetName(greeter, name) {\n  console.log(greeter(name));\n}\n\ngreetName(greet, 'Alice'); // Output: Hello, Alice!\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"greetName\"}),\"\\u51FD\\u6570\\u662F\\u9AD8\\u9636\\u51FD\\u6570\\uFF0C\\u56E0\\u4E3A\\u5B83\\u5C06\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570(\",(0,e.jsx)(n.code,{children:\"greet\"}),\")\\u4F5C\\u4E3A\\u53C2\\u6570\\uFF0C\\u5E76\\u4F7F\\u7528\\u5B83\\u4E3A\\u7ED9\\u5B9A\\u7684\\u540D\\u79F0\\u751F\\u6210\\u95EE\\u5019\\u8BED\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u4F5C\\u4E3A\\u8FD4\\u56DE\\u503C\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9AD8\\u9636\\u51FD\\u6570\\u53EF\\u4EE5\\u8FD4\\u56DE\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function multiplier(factor) {\n  return function (num) {\n    return num * factor;\n  };\n}\n\nconst double = multiplier(2);\nconst triple = multiplier(3);\n\nconsole.log(double(5)); // Output: 10\nconsole.log(triple(5)); // Output: 15\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"multiplier\"}),\" \\u51FD\\u6570\\u8FD4\\u56DE\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\uFF0C\\u8BE5\\u51FD\\u6570\\u5C06\\u4EFB\\u4F55\\u6570\\u5B57\\u4E58\\u4EE5\\u6307\\u5B9A\\u7684\\u56E0\\u5B50\\u3002 \\u8FD4\\u56DE\\u7684\\u51FD\\u6570\\u662F\\u4E00\\u4E2A\\u95ED\\u5305\\uFF0C\\u5B83\\u8BB0\\u4F4F\\u5916\\u90E8\\u51FD\\u6570\\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"factor\"}),\" \\u503C\\u3002 \",(0,e.jsx)(n.code,{children:\"multiplier\"}),\" \\u51FD\\u6570\\u662F\\u4E00\\u4E2A\\u9AD8\\u9636\\u51FD\\u6570\\uFF0C\\u56E0\\u4E3A\\u5B83\\u8FD4\\u56DE\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9E\\u9645\\u4F8B\\u5B50\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u65E5\\u5FD7\\u88C5\\u9970\\u5668\"}),\"\\uFF1A\\u4E00\\u4E2A\\u9AD8\\u9636\\u51FD\\u6570\\uFF0C\\u5B83\\u5411\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u6DFB\\u52A0\\u65E5\\u5FD7\\u8BB0\\u5F55\\u529F\\u80FD\\uFF1A\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function withLogging(fn) {\n  return function (...args) {\n    console.log(\\`Calling \\${fn.name} with arguments\\`, args);\n    return fn.apply(this, args);\n  };\n}\n\nfunction add(a, b) {\n  return a + b;\n}\n\nconst loggedAdd = withLogging(add);\nconsole.log(loggedAdd(2, 3));\n// Output:\n// Calling add with arguments [2, 3]\n// 5\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"withLogging\"}),\" \\u51FD\\u6570\\u662F\\u4E00\\u4E2A\\u9AD8\\u9636\\u51FD\\u6570\\uFF0C\\u5B83\\u63A5\\u53D7\\u4E00\\u4E2A\\u51FD\\u6570 fn \\u4F5C\\u4E3A\\u53C2\\u6570\\uFF0C\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\uFF0C\\u8BE5\\u51FD\\u6570\\u5728\\u6267\\u884C\\u539F\\u59CB\\u51FD\\u6570\\u4E4B\\u524D\\u8BB0\\u5F55\\u51FD\\u6570\\u8C03\\u7528\"]}),`\n`,(0,e.jsxs)(n.ol,{start:\"2\",children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8BB0\\u5FC6\\u5316\"}),\"\\uFF1A\\u4E00\\u4E2A\\u9AD8\\u9636\\u51FD\\u6570\\uFF0C\\u5B83\\u7F13\\u5B58\\u51FD\\u6570\\u7684\\u8BA1\\u7B97\\u7ED3\\u679C\\u4EE5\\u907F\\u514D\\u5197\\u4F59\\u8BA1\\u7B97\\uFF1A\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function memoize(fn) {\n  const cache = new Map();\n  return function (...args) {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      return cache.get(key);\n    }\n    const result = fn.apply(this, args);\n    cache.set(key, result);\n    return result;\n  };\n}\n\nfunction fibonacci(n) {\n  if (n <= 1) return n;\n  return fibonacci(n - 1) + fibonacci(n - 2);\n}\n\nconst memoizedFibonacci = memoize(fibonacci);\nconsole.log(memoizedFibonacci(10)); // Output: 55\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"memoize\"}),\" \\u51FD\\u6570\\u662F\\u4E00\\u4E2A\\u9AD8\\u9636\\u51FD\\u6570\\uFF0C\\u5B83\\u63A5\\u53D7\\u4E00\\u4E2A\\u51FD\\u6570 \",(0,e.jsx)(n.code,{children:\"fn\"}),\" \\u4F5C\\u4E3A\\u53C2\\u6570\\uFF0C\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\uFF0C\\u8BE5\\u51FD\\u6570\\u6839\\u636E\\u539F\\u59CB\\u51FD\\u6570\\u7684\\u53C2\\u6570\\u7F13\\u5B58\\u5176\\u7ED3\\u679C\\u3002\"]}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Lodash\"}),\"\\uFF1ALodash \\u662F\\u4E00\\u4E2A\\u5B9E\\u7528\\u7A0B\\u5E8F\\u5E93\\uFF0C\\u5B83\\u63D0\\u4F9B\\u4E86\\u5E7F\\u6CDB\\u7684\\u51FD\\u6570\\uFF0C\\u7528\\u4E8E\\u5904\\u7406\\u6570\\u7EC4\\u3001\\u5BF9\\u8C61\\u3001\\u5B57\\u7B26\\u4E32\\u7B49\\uFF0C\\u5176\\u4E2D\\u5927\\u591A\\u6570\\u662F\\u9AD8\\u9636\\u51FD\\u6570\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`import _ from 'lodash';\n\nconst numbers = [1, 2, 3, 4, 5];\n\n// Filter array\nconst evenNumbers = _.filter(numbers, (n) => n % 2 === 0); // [2, 4]\n\n// Map array\nconst doubledNumbers = _.map(numbers, (n) => n * 2); // [2, 4, 6, 8, 10]\n\n// Find the maximum value\nconst maxValue = _.max(numbers); // 5\n\n// Sum all values\nconst sum = _.sum(numbers); // 15\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/05_higher_order.html\",children:\"\\u9AD8\\u9636\\u51FD\\u6570\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://blog.bitsrc.io/understanding-higher-order-functions-in-javascript-75461803bad\",children:\"\\u7406\\u89E3 JavaScript \\u4E2D\\u7684\\u9AD8\\u9636\\u51FD\\u6570\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/higher-order-functions-in-javascript-d9101f9cf528/\",children:\"\\u9AD8\\u9636\\u51FD\\u6570\\uFF1A\\u5982\\u4F55\\u4F7F\\u7528 Filter\\u3001Map \\u548C Reduce \\u6765\\u83B7\\u5F97\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u7684\\u4EE3\\u7801\"})}),`\n`]})]})}function A(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(d,r)})):d(r)}var v=A;return N(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),b=(r,n)=>{for(var c in n)t(r,c,{get:n[c],enumerable:!0})},l=(r,n,c,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of p(n))!f.call(r,i)&&i!==c&&t(r,i,{get:()=>n[i],enumerable:!(o=m(n,i))||o.enumerable});return r};var N=(r,n,c)=>(c=r!=null?u(g(r)):{},l(n||!r||!r.__esModule?t(c,\"default\",{value:r,enumerable:!0}):c,r)),A=r=>l(t({},\"__esModule\",{value:!0}),r);var s=y((x,a)=>{a.exports=_jsx_runtime});var v={};b(v,{default:()=>h,frontmatter:()=>j});var e=N(s()),j={title:\"JavaScript \\u4E2D\\u9AD8\\u9636\\u51FD\\u6570\\u7684\\u5B9A\\u4E49\\u662F\\u4EC0\\u4E48\\uFF1F\"};function d(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9AD8\\u9636\\u51FD\\u6570\\u662F\\u6307\\u5C06\\u4E00\\u4E2A\\u6216\\u591A\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\uFF0C\\u5B83\\u4F7F\\u7528\\u8FD9\\u4E9B\\u51FD\\u6570\\u5BF9\\u67D0\\u4E9B\\u6570\\u636E\\u8FDB\\u884C\\u64CD\\u4F5C\\uFF0C\\u548C/\\u6216\\u8FD4\\u56DE\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A\\u7ED3\\u679C\\u3002\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u9AD8\\u9636\\u51FD\\u6570\\u65E8\\u5728\\u62BD\\u8C61\\u4E00\\u4E9B\\u91CD\\u590D\\u6267\\u884C\\u7684\\u64CD\\u4F5C\\u3002 \\u5178\\u578B\\u7684\\u4F8B\\u5B50\\u662F \",(0,e.jsx)(n.code,{children:\"Array.prototype.map()\"}),\"\\uFF0C\\u5B83\\u63A5\\u53D7\\u4E00\\u4E2A\\u6570\\u7EC4\\u548C\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A\\u53C2\\u6570\\u3002 \\u7136\\u540E\\uFF0C\",(0,e.jsx)(n.code,{children:\"Array.prototype.map()\"}),\" \\u4F7F\\u7528\\u6B64\\u51FD\\u6570\\u8F6C\\u6362\\u6570\\u7EC4\\u4E2D\\u7684\\u6BCF\\u4E2A\\u9879\\u76EE\\uFF0C\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5305\\u542B\\u8F6C\\u6362\\u540E\\u7684\\u6570\\u636E\\u7684\\u65B0\\u6570\\u7EC4\\u3002 JavaScript \\u4E2D\\u5176\\u4ED6\\u5E38\\u89C1\\u7684\\u4F8B\\u5B50\\u662F \",(0,e.jsx)(n.code,{children:\"Array.prototype.forEach()\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"Array.prototype.filter()\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"Array.prototype.reduce()\"}),\"\\u3002 \\u9AD8\\u9636\\u51FD\\u6570\\u4E0D\\u4EC5\\u4EC5\\u9700\\u8981\\u64CD\\u4F5C\\u6570\\u7EC4\\uFF0C\\u56E0\\u4E3A\\u4ECE\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u8FD4\\u56DE\\u4E00\\u4E2A\\u51FD\\u6570\\u6709\\u5F88\\u591A\\u7528\\u4F8B\\u3002 \",(0,e.jsx)(n.code,{children:\"Function.prototype.bind()\"}),\" \\u5C31\\u662F\\u4E00\\u4E2A\\u8FD4\\u56DE\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u7684\\u4F8B\\u5B50\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60F3\\u8C61\\u4E00\\u4E0B\\uFF0C\\u6211\\u4EEC\\u6709\\u4E00\\u4E2A\\u9700\\u8981\\u8F6C\\u6362\\u4E3A\\u5927\\u5199\\u7684\\u540D\\u79F0\\u6570\\u7EC4\\u3002 \\u547D\\u4EE4\\u5F0F\\u65B9\\u6CD5\\u5982\\u4E0B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const names = ['irish', 'daisy', 'anna'];\n\nfunction transformNamesToUppercase(names) {\n  const results = [];\n  for (let i = 0; i < names.length; i++) {\n    results.push(names[i].toUpperCase());\n  }\n  return results;\n}\n\nconsole.log(transformNamesToUppercase(names)); // ['IRISH', 'DAISY', 'ANNA']\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"Array.prototype.map(transformerFn)\"}),\" \\u4F7F\\u4EE3\\u7801\\u66F4\\u77ED\\u3001\\u66F4\\u5177\\u58F0\\u660E\\u6027\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const names = ['irish', 'daisy', 'anna'];\n\nfunction transformNamesToUppercase(names) {\n  return names.map((name) => name.toUpperCase());\n}\n\nconsole.log(transformNamesToUppercase(names)); // ['IRISH', 'DAISY', 'ANNA']\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u9AD8\\u9636\\u51FD\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9AD8\\u9636\\u51FD\\u6570\\u662F\\u4E00\\u4E2A\\u5C06\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A\\u53C2\\u6570\\u6216\\u8FD4\\u56DE\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A\\u5176\\u7ED3\\u679C\\u7684\\u51FD\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u4F5C\\u4E3A\\u53C2\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9AD8\\u9636\\u51FD\\u6570\\u53EF\\u4EE5\\u5C06\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A\\u53C2\\u6570\\u5E76\\u6267\\u884C\\u5B83\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet(name) {\n  return \\`Hello, \\${name}!\\`;\n}\n\nfunction greetName(greeter, name) {\n  console.log(greeter(name));\n}\n\ngreetName(greet, 'Alice'); // Output: Hello, Alice!\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"greetName\"}),\"\\u51FD\\u6570\\u662F\\u9AD8\\u9636\\u51FD\\u6570\\uFF0C\\u56E0\\u4E3A\\u5B83\\u5C06\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570(\",(0,e.jsx)(n.code,{children:\"greet\"}),\")\\u4F5C\\u4E3A\\u53C2\\u6570\\uFF0C\\u5E76\\u4F7F\\u7528\\u5B83\\u4E3A\\u7ED9\\u5B9A\\u7684\\u540D\\u79F0\\u751F\\u6210\\u95EE\\u5019\\u8BED\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u4F5C\\u4E3A\\u8FD4\\u56DE\\u503C\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9AD8\\u9636\\u51FD\\u6570\\u53EF\\u4EE5\\u8FD4\\u56DE\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function multiplier(factor) {\n  return function (num) {\n    return num * factor;\n  };\n}\n\nconst double = multiplier(2);\nconst triple = multiplier(3);\n\nconsole.log(double(5)); // Output: 10\nconsole.log(triple(5)); // Output: 15\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"multiplier\"}),\" \\u51FD\\u6570\\u8FD4\\u56DE\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\uFF0C\\u8BE5\\u51FD\\u6570\\u5C06\\u4EFB\\u4F55\\u6570\\u5B57\\u4E58\\u4EE5\\u6307\\u5B9A\\u7684\\u56E0\\u5B50\\u3002 \\u8FD4\\u56DE\\u7684\\u51FD\\u6570\\u662F\\u4E00\\u4E2A\\u95ED\\u5305\\uFF0C\\u5B83\\u8BB0\\u4F4F\\u5916\\u90E8\\u51FD\\u6570\\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"factor\"}),\" \\u503C\\u3002 \",(0,e.jsx)(n.code,{children:\"multiplier\"}),\" \\u51FD\\u6570\\u662F\\u4E00\\u4E2A\\u9AD8\\u9636\\u51FD\\u6570\\uFF0C\\u56E0\\u4E3A\\u5B83\\u8FD4\\u56DE\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9E\\u9645\\u4F8B\\u5B50\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u65E5\\u5FD7\\u88C5\\u9970\\u5668\"}),\"\\uFF1A\\u4E00\\u4E2A\\u9AD8\\u9636\\u51FD\\u6570\\uFF0C\\u5B83\\u5411\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\u6DFB\\u52A0\\u65E5\\u5FD7\\u8BB0\\u5F55\\u529F\\u80FD\\uFF1A\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function withLogging(fn) {\n  return function (...args) {\n    console.log(\\`Calling \\${fn.name} with arguments\\`, args);\n    return fn.apply(this, args);\n  };\n}\n\nfunction add(a, b) {\n  return a + b;\n}\n\nconst loggedAdd = withLogging(add);\nconsole.log(loggedAdd(2, 3));\n// Output:\n// Calling add with arguments [2, 3]\n// 5\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"withLogging\"}),\" \\u51FD\\u6570\\u662F\\u4E00\\u4E2A\\u9AD8\\u9636\\u51FD\\u6570\\uFF0C\\u5B83\\u63A5\\u53D7\\u4E00\\u4E2A\\u51FD\\u6570 fn \\u4F5C\\u4E3A\\u53C2\\u6570\\uFF0C\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\uFF0C\\u8BE5\\u51FD\\u6570\\u5728\\u6267\\u884C\\u539F\\u59CB\\u51FD\\u6570\\u4E4B\\u524D\\u8BB0\\u5F55\\u51FD\\u6570\\u8C03\\u7528\"]}),`\n`,(0,e.jsxs)(n.ol,{start:\"2\",children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8BB0\\u5FC6\\u5316\"}),\"\\uFF1A\\u4E00\\u4E2A\\u9AD8\\u9636\\u51FD\\u6570\\uFF0C\\u5B83\\u7F13\\u5B58\\u51FD\\u6570\\u7684\\u8BA1\\u7B97\\u7ED3\\u679C\\u4EE5\\u907F\\u514D\\u5197\\u4F59\\u8BA1\\u7B97\\uFF1A\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function memoize(fn) {\n  const cache = new Map();\n  return function (...args) {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      return cache.get(key);\n    }\n    const result = fn.apply(this, args);\n    cache.set(key, result);\n    return result;\n  };\n}\n\nfunction fibonacci(n) {\n  if (n <= 1) return n;\n  return fibonacci(n - 1) + fibonacci(n - 2);\n}\n\nconst memoizedFibonacci = memoize(fibonacci);\nconsole.log(memoizedFibonacci(10)); // Output: 55\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"memoize\"}),\" \\u51FD\\u6570\\u662F\\u4E00\\u4E2A\\u9AD8\\u9636\\u51FD\\u6570\\uFF0C\\u5B83\\u63A5\\u53D7\\u4E00\\u4E2A\\u51FD\\u6570 \",(0,e.jsx)(n.code,{children:\"fn\"}),\" \\u4F5C\\u4E3A\\u53C2\\u6570\\uFF0C\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A\\u65B0\\u51FD\\u6570\\uFF0C\\u8BE5\\u51FD\\u6570\\u6839\\u636E\\u539F\\u59CB\\u51FD\\u6570\\u7684\\u53C2\\u6570\\u7F13\\u5B58\\u5176\\u7ED3\\u679C\\u3002\"]}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Lodash\"}),\"\\uFF1ALodash \\u662F\\u4E00\\u4E2A\\u5B9E\\u7528\\u7A0B\\u5E8F\\u5E93\\uFF0C\\u5B83\\u63D0\\u4F9B\\u4E86\\u5E7F\\u6CDB\\u7684\\u51FD\\u6570\\uFF0C\\u7528\\u4E8E\\u5904\\u7406\\u6570\\u7EC4\\u3001\\u5BF9\\u8C61\\u3001\\u5B57\\u7B26\\u4E32\\u7B49\\uFF0C\\u5176\\u4E2D\\u5927\\u591A\\u6570\\u662F\\u9AD8\\u9636\\u51FD\\u6570\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`import _ from 'lodash';\n\nconst numbers = [1, 2, 3, 4, 5];\n\n// Filter array\nconst evenNumbers = _.filter(numbers, (n) => n % 2 === 0); // [2, 4]\n\n// Map array\nconst doubledNumbers = _.map(numbers, (n) => n * 2); // [2, 4, 6, 8, 10]\n\n// Find the maximum value\nconst maxValue = _.max(numbers); // 5\n\n// Sum all values\nconst sum = _.sum(numbers); // 15\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/05_higher_order.html\",children:\"\\u9AD8\\u9636\\u51FD\\u6570\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://blog.bitsrc.io/understanding-higher-order-functions-in-javascript-75461803bad\",children:\"\\u7406\\u89E3 JavaScript \\u4E2D\\u7684\\u9AD8\\u9636\\u51FD\\u6570\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/higher-order-functions-in-javascript-d9101f9cf528/\",children:\"\\u9AD8\\u9636\\u51FD\\u6570\\uFF1A\\u5982\\u4F55\\u4F7F\\u7528 Filter\\u3001Map \\u548C Reduce \\u6765\\u83B7\\u5F97\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u7684\\u4EE3\\u7801\"})}),`\n`]})]})}function h(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(d,{...r})}):d(r)}return A(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/en-US.json
index b29294dbb..2e493b963 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var j=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),g=(r,e)=>{for(var t in e)c(r,t,{get:e[t],enumerable:!0})},d=(r,e,t,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of b(e))!y.call(r,i)&&i!==t&&c(r,i,{get:()=>e[i],enumerable:!(a=p(e,i))||a.enumerable});return r};var m=(r,e,t)=>(t=r!=null?s(u(r)):{},d(e||!r||!r.__esModule?c(t,\"default\",{value:r,enumerable:!0}):t,r)),v=r=>d(c({},\"__esModule\",{value:!0}),r);var l=j((J,o)=>{o.exports=_jsx_runtime});var k={};g(k,{default:()=>M,frontmatter:()=>f});var n=m(l()),f={title:\"What is the difference between a `Map` object and a plain object in JavaScript?\"};function h(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Both \",(0,n.jsx)(e.code,{children:\"Map\"}),\" objects and plain objects in JavaScript can store key-value pairs, but they have several key differences:\"]}),`\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:\"Feature\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"Map\"})}),(0,n.jsx)(e.th,{children:\"Plain object\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Key type\"}),(0,n.jsx)(e.td,{children:\"Any data type\"}),(0,n.jsx)(e.td,{children:\"String (or Symbol)\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Key order\"}),(0,n.jsx)(e.td,{children:\"Maintained\"}),(0,n.jsx)(e.td,{children:\"Not guaranteed\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Size property\"}),(0,n.jsxs)(e.td,{children:[\"Yes (\",(0,n.jsx)(e.code,{children:\"size\"}),\")\"]}),(0,n.jsx)(e.td,{children:\"None\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Iteration\"}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"forEach\"}),\", \",(0,n.jsx)(e.code,{children:\"keys()\"}),\", \",(0,n.jsx)(e.code,{children:\"values()\"}),\", \",(0,n.jsx)(e.code,{children:\"entries()\"})]}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"for...in\"}),\", \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\", etc.\"]})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Inheritance\"}),(0,n.jsx)(e.td,{children:\"No\"}),(0,n.jsx)(e.td,{children:\"Yes\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Performance\"}),(0,n.jsx)(e.td,{children:\"Generally better for larger datasets and frequent additions/deletions\"}),(0,n.jsx)(e.td,{children:\"Faster for small datasets and simple operations\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Serializable\"}),(0,n.jsx)(e.td,{children:\"No\"}),(0,n.jsx)(e.td,{children:\"Yes\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" vs plain JavaScript objects\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, \",(0,n.jsx)(e.code,{children:\"Map\"}),' objects and a plain object (also known as a \"POJO\" or \"plain old JavaScript object\") are both used to store key-value pairs, but they have different characteristics, use cases, and behaviors.']}),`\n`,(0,n.jsx)(e.h3,{children:\"Plain JavaScript objects (POJO)\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A plain object is a basic JavaScript object created using the \",(0,n.jsx)(e.code,{children:\"{}\"}),\" syntax. It is a collection of key-value pairs, where each key is a string (or a symbol, in modern JavaScript) and each value can be any type of value, including strings, numbers, booleans, arrays, objects, and more.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = { name: 'John', age: 30, occupation: 'Developer' };\nconsole.log(person);\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" objects\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"A \",(0,n.jsx)(e.code,{children:\"Map\"}),\" object, introduced in ECMAScript 2015 (ES6), is a more advanced data structure that allows you to store key-value pairs with additional features. A \",(0,n.jsx)(e.code,{children:\"Map\"}),\" is an iterable, which means you can use it with \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" loops, and it provides methods for common operations like \",(0,n.jsx)(e.code,{children:\"get\"}),\", \",(0,n.jsx)(e.code,{children:\"set\"}),\", \",(0,n.jsx)(e.code,{children:\"has\"}),\", and \",(0,n.jsx)(e.code,{children:\"delete\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = new Map([\n  ['name', 'John'],\n  ['age', 30],\n  ['occupation', 'Developer'],\n]);\nconsole.log(person);\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Key differences\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here are the main differences between a \",(0,n.jsx)(e.code,{children:\"Map\"}),\" object and a plain object:\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Key types\"}),\": In a plain object, keys are always strings (or symbols). In a \",(0,n.jsx)(e.code,{children:\"Map\"}),\", keys can be any type of value, including objects, arrays, and even other \",(0,n.jsx)(e.code,{children:\"Map\"}),\"s.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Key ordering\"}),\": In a plain object, the order of keys is not guaranteed. In a \",(0,n.jsx)(e.code,{children:\"Map\"}),\", the order of keys is preserved, and you can iterate over them in the order they were inserted.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Iteration\"}),\": A \",(0,n.jsx)(e.code,{children:\"Map\"}),\" is iterable, which means you can use \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" loops to iterate over its key-value pairs. A plain object is not iterable by default, but you can use \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" or \",(0,n.jsx)(e.code,{children:\"Object.entries()\"}),\" to iterate over its properties.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Performance\"}),\": \",(0,n.jsx)(e.code,{children:\"Map\"}),\" objects are generally faster and more efficient than plain objects, especially when dealing with large datasets.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Methods\"}),\": A \",(0,n.jsx)(e.code,{children:\"Map\"}),\" object provides additional methods, such as \",(0,n.jsx)(e.code,{children:\"get\"}),\", \",(0,n.jsx)(e.code,{children:\"set\"}),\", \",(0,n.jsx)(e.code,{children:\"has\"}),\", and \",(0,n.jsx)(e.code,{children:\"delete\"}),\", which make it easier to work with key-value pairs.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Serialization\"}),\": When serializing a \",(0,n.jsx)(e.code,{children:\"Map\"}),\" object to JSON, it will be converted to an object but the existing \",(0,n.jsx)(e.code,{children:\"Map\"}),\" properties might be lost in the conversion. A plain object, on the other hand, is serialized to a JSON object with the same structure.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"When to use which\"}),`\n`,(0,n.jsx)(e.p,{children:\"Use a plain object (POJO) when:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"You need a simple, lightweight object with string keys.\"}),`\n`,(0,n.jsx)(e.li,{children:\"You're working with a small dataset.\"}),`\n`,(0,n.jsx)(e.li,{children:\"You need to serialize the object to JSON (e.g. to send over the network).\"}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Use a \",(0,n.jsx)(e.code,{children:\"Map\"}),\" object when:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"You need to store key-value pairs with non-string keys (e.g., objects, arrays).\"}),`\n`,(0,n.jsx)(e.li,{children:\"You need to preserve the order of key-value pairs.\"}),`\n`,(0,n.jsx)(e.li,{children:\"You need to iterate over the key-value pairs in a specific order.\"}),`\n`,(0,n.jsx)(e.li,{children:\"You're working with a large dataset and need better performance.\"}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In summary, while both plain objects and \",(0,n.jsx)(e.code,{children:\"Map\"}),\" objects can be used to store key-value pairs, \",(0,n.jsx)(e.code,{children:\"Map\"}),\" objects offer more advanced features, better performance, and additional methods, making them a better choice for more complex use cases.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" objects cannot be serialized to be sent in HTTP requests, but libraries like \",(0,n.jsx)(e.a,{href:\"https://github.com/blitz-js/superjson\",children:\"superjson\"}),\" allowing them to be serialized and deserialized.\"]}),`\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/Web/JavaScript/Reference/Global_Objects/Map\",children:\"Map - JavaScript | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object\",children:\"Object - JavaScript | MDN\"})}),`\n`]})]})}function w(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(h,r)})):h(r)}var M=w;return v(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),m=(r,e)=>{for(var t in e)c(r,t,{get:e[t],enumerable:!0})},d=(r,e,t,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!j.call(r,i)&&i!==t&&c(r,i,{get:()=>e[i],enumerable:!(a=b(e,i))||a.enumerable});return r};var v=(r,e,t)=>(t=r!=null?p(y(r)):{},d(e||!r||!r.__esModule?c(t,\"default\",{value:r,enumerable:!0}):t,r)),f=r=>d(c({},\"__esModule\",{value:!0}),r);var l=g((S,o)=>{o.exports=_jsx_runtime});var M={};m(M,{default:()=>s,frontmatter:()=>w});var n=v(l()),w={title:\"What is the difference between a `Map` object and a plain object in JavaScript?\"};function h(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Both \",(0,n.jsx)(e.code,{children:\"Map\"}),\" objects and plain objects in JavaScript can store key-value pairs, but they have several key differences:\"]}),`\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:\"Feature\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"Map\"})}),(0,n.jsx)(e.th,{children:\"Plain object\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Key type\"}),(0,n.jsx)(e.td,{children:\"Any data type\"}),(0,n.jsx)(e.td,{children:\"String (or Symbol)\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Key order\"}),(0,n.jsx)(e.td,{children:\"Maintained\"}),(0,n.jsx)(e.td,{children:\"Not guaranteed\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Size property\"}),(0,n.jsxs)(e.td,{children:[\"Yes (\",(0,n.jsx)(e.code,{children:\"size\"}),\")\"]}),(0,n.jsx)(e.td,{children:\"None\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Iteration\"}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"forEach\"}),\", \",(0,n.jsx)(e.code,{children:\"keys()\"}),\", \",(0,n.jsx)(e.code,{children:\"values()\"}),\", \",(0,n.jsx)(e.code,{children:\"entries()\"})]}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"for...in\"}),\", \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\", etc.\"]})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Inheritance\"}),(0,n.jsx)(e.td,{children:\"No\"}),(0,n.jsx)(e.td,{children:\"Yes\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Performance\"}),(0,n.jsx)(e.td,{children:\"Generally better for larger datasets and frequent additions/deletions\"}),(0,n.jsx)(e.td,{children:\"Faster for small datasets and simple operations\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Serializable\"}),(0,n.jsx)(e.td,{children:\"No\"}),(0,n.jsx)(e.td,{children:\"Yes\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" vs plain JavaScript objects\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, \",(0,n.jsx)(e.code,{children:\"Map\"}),' objects and a plain object (also known as a \"POJO\" or \"plain old JavaScript object\") are both used to store key-value pairs, but they have different characteristics, use cases, and behaviors.']}),`\n`,(0,n.jsx)(e.h3,{children:\"Plain JavaScript objects (POJO)\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A plain object is a basic JavaScript object created using the \",(0,n.jsx)(e.code,{children:\"{}\"}),\" syntax. It is a collection of key-value pairs, where each key is a string (or a symbol, in modern JavaScript) and each value can be any type of value, including strings, numbers, booleans, arrays, objects, and more.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = { name: 'John', age: 30, occupation: 'Developer' };\nconsole.log(person);\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" objects\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"A \",(0,n.jsx)(e.code,{children:\"Map\"}),\" object, introduced in ECMAScript 2015 (ES6), is a more advanced data structure that allows you to store key-value pairs with additional features. A \",(0,n.jsx)(e.code,{children:\"Map\"}),\" is an iterable, which means you can use it with \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" loops, and it provides methods for common operations like \",(0,n.jsx)(e.code,{children:\"get\"}),\", \",(0,n.jsx)(e.code,{children:\"set\"}),\", \",(0,n.jsx)(e.code,{children:\"has\"}),\", and \",(0,n.jsx)(e.code,{children:\"delete\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = new Map([\n  ['name', 'John'],\n  ['age', 30],\n  ['occupation', 'Developer'],\n]);\nconsole.log(person);\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Key differences\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here are the main differences between a \",(0,n.jsx)(e.code,{children:\"Map\"}),\" object and a plain object:\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Key types\"}),\": In a plain object, keys are always strings (or symbols). In a \",(0,n.jsx)(e.code,{children:\"Map\"}),\", keys can be any type of value, including objects, arrays, and even other \",(0,n.jsx)(e.code,{children:\"Map\"}),\"s.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Key ordering\"}),\": In a plain object, the order of keys is not guaranteed. In a \",(0,n.jsx)(e.code,{children:\"Map\"}),\", the order of keys is preserved, and you can iterate over them in the order they were inserted.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Iteration\"}),\": A \",(0,n.jsx)(e.code,{children:\"Map\"}),\" is iterable, which means you can use \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" loops to iterate over its key-value pairs. A plain object is not iterable by default, but you can use \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" or \",(0,n.jsx)(e.code,{children:\"Object.entries()\"}),\" to iterate over its properties.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Performance\"}),\": \",(0,n.jsx)(e.code,{children:\"Map\"}),\" objects are generally faster and more efficient than plain objects, especially when dealing with large datasets.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Methods\"}),\": A \",(0,n.jsx)(e.code,{children:\"Map\"}),\" object provides additional methods, such as \",(0,n.jsx)(e.code,{children:\"get\"}),\", \",(0,n.jsx)(e.code,{children:\"set\"}),\", \",(0,n.jsx)(e.code,{children:\"has\"}),\", and \",(0,n.jsx)(e.code,{children:\"delete\"}),\", which make it easier to work with key-value pairs.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Serialization\"}),\": When serializing a \",(0,n.jsx)(e.code,{children:\"Map\"}),\" object to JSON, it will be converted to an object but the existing \",(0,n.jsx)(e.code,{children:\"Map\"}),\" properties might be lost in the conversion. A plain object, on the other hand, is serialized to a JSON object with the same structure.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"When to use which\"}),`\n`,(0,n.jsx)(e.p,{children:\"Use a plain object (POJO) when:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"You need a simple, lightweight object with string keys.\"}),`\n`,(0,n.jsx)(e.li,{children:\"You're working with a small dataset.\"}),`\n`,(0,n.jsx)(e.li,{children:\"You need to serialize the object to JSON (e.g. to send over the network).\"}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Use a \",(0,n.jsx)(e.code,{children:\"Map\"}),\" object when:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"You need to store key-value pairs with non-string keys (e.g., objects, arrays).\"}),`\n`,(0,n.jsx)(e.li,{children:\"You need to preserve the order of key-value pairs.\"}),`\n`,(0,n.jsx)(e.li,{children:\"You need to iterate over the key-value pairs in a specific order.\"}),`\n`,(0,n.jsx)(e.li,{children:\"You're working with a large dataset and need better performance.\"}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In summary, while both plain objects and \",(0,n.jsx)(e.code,{children:\"Map\"}),\" objects can be used to store key-value pairs, \",(0,n.jsx)(e.code,{children:\"Map\"}),\" objects offer more advanced features, better performance, and additional methods, making them a better choice for more complex use cases.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" objects cannot be serialized to be sent in HTTP requests, but libraries like \",(0,n.jsx)(e.a,{href:\"https://github.com/blitz-js/superjson\",children:\"superjson\"}),\" allowing them to be serialized and deserialized.\"]}),`\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/Web/JavaScript/Reference/Global_Objects/Map\",children:\"Map - JavaScript | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object\",children:\"Object - JavaScript | MDN\"})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return f(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/zh-CN.json
index 3d808496d..f598efa67 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var u=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),v=(c,e)=>{for(var d in e)l(c,d,{get:e[d],enumerable:!0})},h=(c,e,d,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of M(e))!b.call(c,r)&&r!==d&&l(c,r,{get:()=>e[r],enumerable:!(i=s(e,r))||i.enumerable});return c};var J=(c,e,d)=>(d=c!=null?p(g(c)):{},h(e||!c||!c.__esModule?l(d,\"default\",{value:c,enumerable:!0}):d,c)),S=c=>h(l({},\"__esModule\",{value:!0}),c);var o=u((_,t)=>{t.exports=_jsx_runtime});var f={};v(f,{default:()=>m,frontmatter:()=>j});var n=J(o()),j={title:\"JavaScript \\u4E2D `Map` \\u5BF9\\u8C61\\u548C\\u666E\\u901A\\u5BF9\\u8C61\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function a(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\u548C\\u666E\\u901A\\u5BF9\\u8C61\\u90FD\\u53EF\\u4EE5\\u5B58\\u50A8\\u952E\\u503C\\u5BF9\\uFF0C\\u4F46\\u5B83\\u4EEC\\u6709\\u51E0\\u4E2A\\u5173\\u952E\\u7684\\u533A\\u522B\\uFF1A\"]}),`\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:\"\\u7279\\u6027\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"Map\"})}),(0,n.jsx)(e.th,{children:\"\\u666E\\u901A\\u5BF9\\u8C61\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u952E\\u7C7B\\u578B\"}),(0,n.jsx)(e.td,{children:\"\\u4EFB\\u4F55\\u6570\\u636E\\u7C7B\\u578B\"}),(0,n.jsx)(e.td,{children:\"\\u5B57\\u7B26\\u4E32\\uFF08\\u6216 Symbol\\uFF09\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u952E\\u987A\\u5E8F\"}),(0,n.jsx)(e.td,{children:\"\\u4FDD\\u6301\"}),(0,n.jsx)(e.td,{children:\"\\u4E0D\\u4FDD\\u8BC1\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u5927\\u5C0F\\u5C5E\\u6027\"}),(0,n.jsxs)(e.td,{children:[\"\\u662F (\",(0,n.jsx)(e.code,{children:\"size\"}),\")\"]}),(0,n.jsx)(e.td,{children:\"\\u65E0\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u8FED\\u4EE3\"}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"forEach\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"keys()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"values()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"entries()\"})]}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"for...in\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" \\u7B49\"]})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u7EE7\\u627F\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"}),(0,n.jsx)(e.td,{children:\"\\u662F\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u6027\\u80FD\"}),(0,n.jsx)(e.td,{children:\"\\u901A\\u5E38\\u66F4\\u9002\\u5408\\u5927\\u578B\\u6570\\u636E\\u96C6\\u548C\\u9891\\u7E41\\u7684\\u6DFB\\u52A0/\\u5220\\u9664\"}),(0,n.jsx)(e.td,{children:\"\\u9002\\u7528\\u4E8E\\u5C0F\\u578B\\u6570\\u636E\\u96C6\\u548C\\u7B80\\u5355\\u64CD\\u4F5C\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u53EF\\u5E8F\\u5217\\u5316\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"}),(0,n.jsx)(e.td,{children:\"\\u662F\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" vs \\u666E\\u901A JavaScript \\u5BF9\\u8C61\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\u548C\\u666E\\u901A\\u5BF9\\u8C61\\uFF08\\u4E5F\\u79F0\\u4E3A\\u201CPOJO\\u201D\\u6216\\u201C\\u666E\\u901A\\u65E7 JavaScript \\u5BF9\\u8C61\\u201D\\uFF09\\u90FD\\u7528\\u4E8E\\u5B58\\u50A8\\u952E\\u503C\\u5BF9\\uFF0C\\u4F46\\u5B83\\u4EEC\\u5177\\u6709\\u4E0D\\u540C\\u7684\\u7279\\u6027\\u3001\\u7528\\u4F8B\\u548C\\u884C\\u4E3A\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u666E\\u901A JavaScript \\u5BF9\\u8C61 (POJO)\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u666E\\u901A\\u5BF9\\u8C61\\u662F\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"{}\"}),\" \\u8BED\\u6CD5\\u521B\\u5EFA\\u7684\\u57FA\\u672C JavaScript \\u5BF9\\u8C61\\u3002\\u5B83\\u662F\\u4E00\\u4E2A\\u952E\\u503C\\u5BF9\\u7684\\u96C6\\u5408\\uFF0C\\u5176\\u4E2D\\u6BCF\\u4E2A\\u952E\\u90FD\\u662F\\u4E00\\u4E2A\\u5B57\\u7B26\\u4E32\\uFF08\\u6216\\u73B0\\u4EE3 JavaScript \\u4E2D\\u7684\\u7B26\\u53F7\\uFF09\\uFF0C\\u6BCF\\u4E2A\\u503C\\u53EF\\u4EE5\\u662F\\u4EFB\\u4F55\\u7C7B\\u578B\\u7684\\u503C\\uFF0C\\u5305\\u62EC\\u5B57\\u7B26\\u4E32\\u3001\\u6570\\u5B57\\u3001\\u5E03\\u5C14\\u503C\\u3001\\u6570\\u7EC4\\u3001\\u5BF9\\u8C61\\u7B49\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = { name: 'John', age: 30, occupation: 'Developer' };\nconsole.log(person);\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 ECMAScript 2015 (ES6) \\u4E2D\\u5F15\\u5165\\u7684 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\u662F\\u4E00\\u79CD\\u66F4\\u9AD8\\u7EA7\\u7684\\u6570\\u636E\\u7ED3\\u6784\\uFF0C\\u5B83\\u5141\\u8BB8\\u60A8\\u5B58\\u50A8\\u5177\\u6709\\u9644\\u52A0\\u529F\\u80FD\\u7684\\u952E\\u503C\\u5BF9\\u3002\",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u662F\\u53EF\\u8FED\\u4EE3\\u7684\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u60A8\\u53EF\\u4EE5\\u5728 \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u5FAA\\u73AF\\u4E2D\\u4F7F\\u7528\\u5B83\\uFF0C\\u5E76\\u4E14\\u5B83\\u63D0\\u4F9B\\u4E86\\u7528\\u4E8E\\u5E38\\u89C1\\u64CD\\u4F5C\\uFF08\\u5982 \",(0,n.jsx)(e.code,{children:\"get\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"set\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"has\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"delete\"}),\"\\uFF09\\u7684\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = new Map([\n  ['name', 'John'],\n  ['age', 30],\n  ['occupation', 'Developer'],\n]);\nconsole.log(person);\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5173\\u952E\\u533A\\u522B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4EE5\\u4E0B\\u662F \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\u548C\\u666E\\u901A\\u5BF9\\u8C61\\u4E4B\\u95F4\\u7684\\u4E3B\\u8981\\u533A\\u522B\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u952E\\u7C7B\\u578B\"}),\"\\uFF1A\\u5728\\u666E\\u901A\\u5BF9\\u8C61\\u4E2D\\uFF0C\\u952E\\u59CB\\u7EC8\\u662F\\u5B57\\u7B26\\u4E32\\uFF08\\u6216\\u7B26\\u53F7\\uFF09\\u3002\\u5728 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u4E2D\\uFF0C\\u952E\\u53EF\\u4EE5\\u662F\\u4EFB\\u4F55\\u7C7B\\u578B\\u7684\\u503C\\uFF0C\\u5305\\u62EC\\u5BF9\\u8C61\\u3001\\u6570\\u7EC4\\uFF0C\\u751A\\u81F3\\u5176\\u4ED6 \",(0,n.jsx)(e.code,{children:\"Map\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u952E\\u987A\\u5E8F\"}),\"\\uFF1A\\u5728\\u666E\\u901A\\u5BF9\\u8C61\\u4E2D\\uFF0C\\u952E\\u7684\\u987A\\u5E8F\\u4E0D\\u4FDD\\u8BC1\\u3002\\u5728 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u4E2D\\uFF0C\\u952E\\u7684\\u987A\\u5E8F\\u88AB\\u4FDD\\u7559\\uFF0C\\u60A8\\u53EF\\u4EE5\\u6309\\u7167\\u5B83\\u4EEC\\u63D2\\u5165\\u7684\\u987A\\u5E8F\\u8FDB\\u884C\\u8FED\\u4EE3\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8FED\\u4EE3\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u662F\\u53EF\\u8FED\\u4EE3\\u7684\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u5FAA\\u73AF\\u6765\\u8FED\\u4EE3\\u5176\\u952E\\u503C\\u5BF9\\u3002\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\uFF0C\\u666E\\u901A\\u5BF9\\u8C61\\u4E0D\\u53EF\\u8FED\\u4EE3\\uFF0C\\u4F46\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"Object.entries()\"}),\" \\u6765\\u8FED\\u4EE3\\u5176\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6027\\u80FD\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\u901A\\u5E38\\u6BD4\\u666E\\u901A\\u5BF9\\u8C61\\u66F4\\u5FEB\\u3001\\u66F4\\u9AD8\\u6548\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u5904\\u7406\\u5927\\u578B\\u6570\\u636E\\u96C6\\u65F6\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u65B9\\u6CD5\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\u63D0\\u4F9B\\u4E86\\u5176\\u4ED6\\u65B9\\u6CD5\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"get\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"set\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"has\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"delete\"}),\"\\uFF0C\\u8FD9\\u4F7F\\u5F97\\u5904\\u7406\\u952E\\u503C\\u5BF9\\u66F4\\u5BB9\\u6613\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5E8F\\u5217\\u5316\"}),\"\\uFF1A\\u5C06 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\u5E8F\\u5217\\u5316\\u4E3A JSON \\u65F6\\uFF0C\\u5B83\\u5C06\\u88AB\\u8F6C\\u6362\\u4E3A\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u4F46\\u73B0\\u6709\\u7684 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5C5E\\u6027\\u53EF\\u80FD\\u4F1A\\u5728\\u8F6C\\u6362\\u8FC7\\u7A0B\\u4E2D\\u4E22\\u5931\\u3002\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\\u666E\\u901A\\u5BF9\\u8C61\\u88AB\\u5E8F\\u5217\\u5316\\u4E3A\\u5177\\u6709\\u76F8\\u540C\\u7ED3\\u6784\\u7684 JSON \\u5BF9\\u8C61\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4F55\\u65F6\\u4F7F\\u7528\\u54EA\\u4E2A\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5F53\\u60A8\\u9700\\u8981\\u65F6\\u4F7F\\u7528\\u666E\\u901A\\u5BF9\\u8C61 (POJO)\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u60A8\\u9700\\u8981\\u4E00\\u4E2A\\u5177\\u6709\\u5B57\\u7B26\\u4E32\\u952E\\u7684\\u7B80\\u5355\\u3001\\u8F7B\\u91CF\\u7EA7\\u5BF9\\u8C61\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u60A8\\u6B63\\u5728\\u5904\\u7406\\u5C0F\\u578B\\u6570\\u636E\\u96C6\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u60A8\\u9700\\u8981\\u5C06\\u5BF9\\u8C61\\u5E8F\\u5217\\u5316\\u4E3A JSON\\uFF08\\u4F8B\\u5982\\uFF0C\\u901A\\u8FC7\\u7F51\\u7EDC\\u53D1\\u9001\\uFF09\\u3002\"}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u60A8\\u9700\\u8981\\u65F6\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u60A8\\u9700\\u8981\\u4F7F\\u7528\\u975E\\u5B57\\u7B26\\u4E32\\u952E\\uFF08\\u4F8B\\u5982\\u5BF9\\u8C61\\u3001\\u6570\\u7EC4\\uFF09\\u5B58\\u50A8\\u952E\\u503C\\u5BF9\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u60A8\\u9700\\u8981\\u4FDD\\u7559\\u952E\\u503C\\u5BF9\\u7684\\u987A\\u5E8F\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u60A8\\u9700\\u8981\\u6309\\u7279\\u5B9A\\u987A\\u5E8F\\u8FED\\u4EE3\\u952E\\u503C\\u5BF9\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u60A8\\u6B63\\u5728\\u5904\\u7406\\u5927\\u578B\\u6570\\u636E\\u96C6\\uFF0C\\u9700\\u8981\\u66F4\\u597D\\u7684\\u6027\\u80FD\\u3002\"}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u603B\\u800C\\u8A00\\u4E4B\\uFF0C\\u867D\\u7136\\u666E\\u901A\\u5BF9\\u8C61\\u548C \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\u90FD\\u53EF\\u4EE5\\u7528\\u6765\\u5B58\\u50A8\\u952E\\u503C\\u5BF9\\uFF0C\\u4F46 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\u63D0\\u4F9B\\u4E86\\u66F4\\u9AD8\\u7EA7\\u7684\\u529F\\u80FD\\u3001\\u66F4\\u597D\\u7684\\u6027\\u80FD\\u548C\\u989D\\u5916\\u7684\\u65B9\\u6CD5\\uFF0C\\u4F7F\\u5176\\u6210\\u4E3A\\u66F4\\u590D\\u6742\\u7528\\u4F8B\\u7684\\u66F4\\u597D\\u9009\\u62E9\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\u65E0\\u6CD5\\u88AB\\u5E8F\\u5217\\u5316\\u4EE5\\u5728 HTTP \\u8BF7\\u6C42\\u4E2D\\u53D1\\u9001\\uFF0C\\u4F46\\u50CF \",(0,n.jsx)(e.a,{href:\"https://github.com/blitz-js/superjson\",children:\"superjson\"}),\" \\u8FD9\\u6837\\u7684\\u5E93\\u5141\\u8BB8\\u5B83\\u4EEC\\u88AB\\u5E8F\\u5217\\u5316\\u548C\\u53CD\\u5E8F\\u5217\\u5316\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Map\",children:\"Map - JavaScript | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object\",children:\"Object - JavaScript | MDN\"})}),`\n`]})]})}function O(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(a,c)})):a(c)}var m=O;return S(f);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var v=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),J=(c,e)=>{for(var d in e)l(c,d,{get:e[d],enumerable:!0})},h=(c,e,d,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of g(e))!b.call(c,r)&&r!==d&&l(c,r,{get:()=>e[r],enumerable:!(i=M(e,r))||i.enumerable});return c};var S=(c,e,d)=>(d=c!=null?s(u(c)):{},h(e||!c||!c.__esModule?l(d,\"default\",{value:c,enumerable:!0}):d,c)),j=c=>h(l({},\"__esModule\",{value:!0}),c);var o=v((x,t)=>{t.exports=_jsx_runtime});var f={};J(f,{default:()=>p,frontmatter:()=>m});var n=S(o()),m={title:\"JavaScript \\u4E2D `Map` \\u5BF9\\u8C61\\u548C\\u666E\\u901A\\u5BF9\\u8C61\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function a(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\u548C\\u666E\\u901A\\u5BF9\\u8C61\\u90FD\\u53EF\\u4EE5\\u5B58\\u50A8\\u952E\\u503C\\u5BF9\\uFF0C\\u4F46\\u5B83\\u4EEC\\u6709\\u51E0\\u4E2A\\u5173\\u952E\\u7684\\u533A\\u522B\\uFF1A\"]}),`\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:\"\\u7279\\u6027\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"Map\"})}),(0,n.jsx)(e.th,{children:\"\\u666E\\u901A\\u5BF9\\u8C61\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u952E\\u7C7B\\u578B\"}),(0,n.jsx)(e.td,{children:\"\\u4EFB\\u4F55\\u6570\\u636E\\u7C7B\\u578B\"}),(0,n.jsx)(e.td,{children:\"\\u5B57\\u7B26\\u4E32\\uFF08\\u6216 Symbol\\uFF09\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u952E\\u987A\\u5E8F\"}),(0,n.jsx)(e.td,{children:\"\\u4FDD\\u6301\"}),(0,n.jsx)(e.td,{children:\"\\u4E0D\\u4FDD\\u8BC1\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u5927\\u5C0F\\u5C5E\\u6027\"}),(0,n.jsxs)(e.td,{children:[\"\\u662F (\",(0,n.jsx)(e.code,{children:\"size\"}),\")\"]}),(0,n.jsx)(e.td,{children:\"\\u65E0\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u8FED\\u4EE3\"}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"forEach\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"keys()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"values()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"entries()\"})]}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"for...in\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" \\u7B49\"]})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u7EE7\\u627F\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"}),(0,n.jsx)(e.td,{children:\"\\u662F\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u6027\\u80FD\"}),(0,n.jsx)(e.td,{children:\"\\u901A\\u5E38\\u66F4\\u9002\\u5408\\u5927\\u578B\\u6570\\u636E\\u96C6\\u548C\\u9891\\u7E41\\u7684\\u6DFB\\u52A0/\\u5220\\u9664\"}),(0,n.jsx)(e.td,{children:\"\\u9002\\u7528\\u4E8E\\u5C0F\\u578B\\u6570\\u636E\\u96C6\\u548C\\u7B80\\u5355\\u64CD\\u4F5C\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u53EF\\u5E8F\\u5217\\u5316\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"}),(0,n.jsx)(e.td,{children:\"\\u662F\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" vs \\u666E\\u901A JavaScript \\u5BF9\\u8C61\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\u548C\\u666E\\u901A\\u5BF9\\u8C61\\uFF08\\u4E5F\\u79F0\\u4E3A\\u201CPOJO\\u201D\\u6216\\u201C\\u666E\\u901A\\u65E7 JavaScript \\u5BF9\\u8C61\\u201D\\uFF09\\u90FD\\u7528\\u4E8E\\u5B58\\u50A8\\u952E\\u503C\\u5BF9\\uFF0C\\u4F46\\u5B83\\u4EEC\\u5177\\u6709\\u4E0D\\u540C\\u7684\\u7279\\u6027\\u3001\\u7528\\u4F8B\\u548C\\u884C\\u4E3A\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u666E\\u901A JavaScript \\u5BF9\\u8C61 (POJO)\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u666E\\u901A\\u5BF9\\u8C61\\u662F\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"{}\"}),\" \\u8BED\\u6CD5\\u521B\\u5EFA\\u7684\\u57FA\\u672C JavaScript \\u5BF9\\u8C61\\u3002\\u5B83\\u662F\\u4E00\\u4E2A\\u952E\\u503C\\u5BF9\\u7684\\u96C6\\u5408\\uFF0C\\u5176\\u4E2D\\u6BCF\\u4E2A\\u952E\\u90FD\\u662F\\u4E00\\u4E2A\\u5B57\\u7B26\\u4E32\\uFF08\\u6216\\u73B0\\u4EE3 JavaScript \\u4E2D\\u7684\\u7B26\\u53F7\\uFF09\\uFF0C\\u6BCF\\u4E2A\\u503C\\u53EF\\u4EE5\\u662F\\u4EFB\\u4F55\\u7C7B\\u578B\\u7684\\u503C\\uFF0C\\u5305\\u62EC\\u5B57\\u7B26\\u4E32\\u3001\\u6570\\u5B57\\u3001\\u5E03\\u5C14\\u503C\\u3001\\u6570\\u7EC4\\u3001\\u5BF9\\u8C61\\u7B49\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = { name: 'John', age: 30, occupation: 'Developer' };\nconsole.log(person);\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 ECMAScript 2015 (ES6) \\u4E2D\\u5F15\\u5165\\u7684 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\u662F\\u4E00\\u79CD\\u66F4\\u9AD8\\u7EA7\\u7684\\u6570\\u636E\\u7ED3\\u6784\\uFF0C\\u5B83\\u5141\\u8BB8\\u60A8\\u5B58\\u50A8\\u5177\\u6709\\u9644\\u52A0\\u529F\\u80FD\\u7684\\u952E\\u503C\\u5BF9\\u3002\",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u662F\\u53EF\\u8FED\\u4EE3\\u7684\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u60A8\\u53EF\\u4EE5\\u5728 \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u5FAA\\u73AF\\u4E2D\\u4F7F\\u7528\\u5B83\\uFF0C\\u5E76\\u4E14\\u5B83\\u63D0\\u4F9B\\u4E86\\u7528\\u4E8E\\u5E38\\u89C1\\u64CD\\u4F5C\\uFF08\\u5982 \",(0,n.jsx)(e.code,{children:\"get\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"set\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"has\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"delete\"}),\"\\uFF09\\u7684\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = new Map([\n  ['name', 'John'],\n  ['age', 30],\n  ['occupation', 'Developer'],\n]);\nconsole.log(person);\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5173\\u952E\\u533A\\u522B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4EE5\\u4E0B\\u662F \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\u548C\\u666E\\u901A\\u5BF9\\u8C61\\u4E4B\\u95F4\\u7684\\u4E3B\\u8981\\u533A\\u522B\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u952E\\u7C7B\\u578B\"}),\"\\uFF1A\\u5728\\u666E\\u901A\\u5BF9\\u8C61\\u4E2D\\uFF0C\\u952E\\u59CB\\u7EC8\\u662F\\u5B57\\u7B26\\u4E32\\uFF08\\u6216\\u7B26\\u53F7\\uFF09\\u3002\\u5728 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u4E2D\\uFF0C\\u952E\\u53EF\\u4EE5\\u662F\\u4EFB\\u4F55\\u7C7B\\u578B\\u7684\\u503C\\uFF0C\\u5305\\u62EC\\u5BF9\\u8C61\\u3001\\u6570\\u7EC4\\uFF0C\\u751A\\u81F3\\u5176\\u4ED6 \",(0,n.jsx)(e.code,{children:\"Map\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u952E\\u987A\\u5E8F\"}),\"\\uFF1A\\u5728\\u666E\\u901A\\u5BF9\\u8C61\\u4E2D\\uFF0C\\u952E\\u7684\\u987A\\u5E8F\\u4E0D\\u4FDD\\u8BC1\\u3002\\u5728 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u4E2D\\uFF0C\\u952E\\u7684\\u987A\\u5E8F\\u88AB\\u4FDD\\u7559\\uFF0C\\u60A8\\u53EF\\u4EE5\\u6309\\u7167\\u5B83\\u4EEC\\u63D2\\u5165\\u7684\\u987A\\u5E8F\\u8FDB\\u884C\\u8FED\\u4EE3\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8FED\\u4EE3\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u662F\\u53EF\\u8FED\\u4EE3\\u7684\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u5FAA\\u73AF\\u6765\\u8FED\\u4EE3\\u5176\\u952E\\u503C\\u5BF9\\u3002\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\uFF0C\\u666E\\u901A\\u5BF9\\u8C61\\u4E0D\\u53EF\\u8FED\\u4EE3\\uFF0C\\u4F46\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"Object.entries()\"}),\" \\u6765\\u8FED\\u4EE3\\u5176\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6027\\u80FD\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\u901A\\u5E38\\u6BD4\\u666E\\u901A\\u5BF9\\u8C61\\u66F4\\u5FEB\\u3001\\u66F4\\u9AD8\\u6548\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u5904\\u7406\\u5927\\u578B\\u6570\\u636E\\u96C6\\u65F6\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u65B9\\u6CD5\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\u63D0\\u4F9B\\u4E86\\u5176\\u4ED6\\u65B9\\u6CD5\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"get\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"set\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"has\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"delete\"}),\"\\uFF0C\\u8FD9\\u4F7F\\u5F97\\u5904\\u7406\\u952E\\u503C\\u5BF9\\u66F4\\u5BB9\\u6613\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5E8F\\u5217\\u5316\"}),\"\\uFF1A\\u5C06 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\u5E8F\\u5217\\u5316\\u4E3A JSON \\u65F6\\uFF0C\\u5B83\\u5C06\\u88AB\\u8F6C\\u6362\\u4E3A\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u4F46\\u73B0\\u6709\\u7684 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5C5E\\u6027\\u53EF\\u80FD\\u4F1A\\u5728\\u8F6C\\u6362\\u8FC7\\u7A0B\\u4E2D\\u4E22\\u5931\\u3002\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\\u666E\\u901A\\u5BF9\\u8C61\\u88AB\\u5E8F\\u5217\\u5316\\u4E3A\\u5177\\u6709\\u76F8\\u540C\\u7ED3\\u6784\\u7684 JSON \\u5BF9\\u8C61\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4F55\\u65F6\\u4F7F\\u7528\\u54EA\\u4E2A\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5F53\\u60A8\\u9700\\u8981\\u65F6\\u4F7F\\u7528\\u666E\\u901A\\u5BF9\\u8C61 (POJO)\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u60A8\\u9700\\u8981\\u4E00\\u4E2A\\u5177\\u6709\\u5B57\\u7B26\\u4E32\\u952E\\u7684\\u7B80\\u5355\\u3001\\u8F7B\\u91CF\\u7EA7\\u5BF9\\u8C61\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u60A8\\u6B63\\u5728\\u5904\\u7406\\u5C0F\\u578B\\u6570\\u636E\\u96C6\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u60A8\\u9700\\u8981\\u5C06\\u5BF9\\u8C61\\u5E8F\\u5217\\u5316\\u4E3A JSON\\uFF08\\u4F8B\\u5982\\uFF0C\\u901A\\u8FC7\\u7F51\\u7EDC\\u53D1\\u9001\\uFF09\\u3002\"}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u60A8\\u9700\\u8981\\u65F6\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u60A8\\u9700\\u8981\\u4F7F\\u7528\\u975E\\u5B57\\u7B26\\u4E32\\u952E\\uFF08\\u4F8B\\u5982\\u5BF9\\u8C61\\u3001\\u6570\\u7EC4\\uFF09\\u5B58\\u50A8\\u952E\\u503C\\u5BF9\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u60A8\\u9700\\u8981\\u4FDD\\u7559\\u952E\\u503C\\u5BF9\\u7684\\u987A\\u5E8F\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u60A8\\u9700\\u8981\\u6309\\u7279\\u5B9A\\u987A\\u5E8F\\u8FED\\u4EE3\\u952E\\u503C\\u5BF9\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u60A8\\u6B63\\u5728\\u5904\\u7406\\u5927\\u578B\\u6570\\u636E\\u96C6\\uFF0C\\u9700\\u8981\\u66F4\\u597D\\u7684\\u6027\\u80FD\\u3002\"}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u603B\\u800C\\u8A00\\u4E4B\\uFF0C\\u867D\\u7136\\u666E\\u901A\\u5BF9\\u8C61\\u548C \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\u90FD\\u53EF\\u4EE5\\u7528\\u6765\\u5B58\\u50A8\\u952E\\u503C\\u5BF9\\uFF0C\\u4F46 \",(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\u63D0\\u4F9B\\u4E86\\u66F4\\u9AD8\\u7EA7\\u7684\\u529F\\u80FD\\u3001\\u66F4\\u597D\\u7684\\u6027\\u80FD\\u548C\\u989D\\u5916\\u7684\\u65B9\\u6CD5\\uFF0C\\u4F7F\\u5176\\u6210\\u4E3A\\u66F4\\u590D\\u6742\\u7528\\u4F8B\\u7684\\u66F4\\u597D\\u9009\\u62E9\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Map\"}),\" \\u5BF9\\u8C61\\u65E0\\u6CD5\\u88AB\\u5E8F\\u5217\\u5316\\u4EE5\\u5728 HTTP \\u8BF7\\u6C42\\u4E2D\\u53D1\\u9001\\uFF0C\\u4F46\\u50CF \",(0,n.jsx)(e.a,{href:\"https://github.com/blitz-js/superjson\",children:\"superjson\"}),\" \\u8FD9\\u6837\\u7684\\u5E93\\u5141\\u8BB8\\u5B83\\u4EEC\\u88AB\\u5E8F\\u5217\\u5316\\u548C\\u53CD\\u5E8F\\u5217\\u5316\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Map\",children:\"Map - JavaScript | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object\",children:\"Object - JavaScript | MDN\"})}),`\n`]})]})}function p(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(a,{...c})}):a(c)}return j(f);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-a-parameter-and-an-argument/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-a-parameter-and-an-argument/en-US.json
index 3f7d887f5..8fcbae194 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-a-parameter-and-an-argument/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-a-parameter-and-an-argument/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-a-parameter-and-an-argument/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),b=(a,e)=>{for(var r in e)i(a,r,{get:e[r],enumerable:!0})},l=(a,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of p(e))!f.call(a,t)&&t!==r&&i(a,t,{get:()=>e[t],enumerable:!(c=u(e,t))||c.enumerable});return a};var v=(a,e,r)=>(r=a!=null?d(m(a)):{},l(e||!a||!a.__esModule?i(r,\"default\",{value:a,enumerable:!0}):r,a)),x=a=>l(i({},\"__esModule\",{value:!0}),a);var o=g((D,s)=>{s.exports=_jsx_runtime});var F={};b(F,{default:()=>_,frontmatter:()=>w});var n=v(o()),w={title:\"What is the difference between a parameter and an argument?\"};function h(a){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},a.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A parameter is a variable in the declaration of a function, while an argument is the actual value passed to the function when it is called. For example, in the function \",(0,n.jsx)(e.code,{children:\"function add(a, b) { return a + b; }\"}),\", \",(0,n.jsx)(e.code,{children:\"a\"}),\" and \",(0,n.jsx)(e.code,{children:\"b\"}),\" are parameters. When you call \",(0,n.jsx)(e.code,{children:\"add(2, 3)\"}),\", \",(0,n.jsx)(e.code,{children:\"2\"}),\" and \",(0,n.jsx)(e.code,{children:\"3\"}),\" are arguments.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Difference between a parameter and an argument\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Parameters\"}),`\n`,(0,n.jsx)(e.p,{children:\"Parameters are variables listed as part of a function's definition. They act as placeholders for the values that will be passed to the function when it is called.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet(name) {\n  console.log('Hello, ' + name);\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"name\"}),\" is a parameter.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Arguments\"}),`\n`,(0,n.jsx)(e.p,{children:\"Arguments are the actual values that are passed to the function when it is invoked. These values are assigned to the corresponding parameters in the function definition.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet(name) {\n  console.log('Hello, ' + name);\n}\ngreet('Alice'); // Output: \"Hello, Alice\"\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:'\"Alice\"'}),\" is an argument.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Key differences\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Parameters are part of the function's signature, while arguments are the actual values supplied to the function.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Parameters are used to define the function, whereas arguments are used to call the function.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example combining both\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function add(a, b) {\n  // a and b are parameters\n  return a + b;\n}\n\nconst result = add(2, 3); // 2 and 3 are arguments\nconsole.log(result); // Output: 5\n`})}),`\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/Web/JavaScript/Guide/Functions\",children:\"MDN Web Docs: Functions\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/function-basics\",children:\"JavaScript.info: Function basics\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3schools.com/js/js_function_parameters.asp\",children:\"W3Schools: JavaScript Function Parameters\"})}),`\n`]})]})}function j(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(h,a)})):h(a)}var _=j;return x(F);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),v=(a,e)=>{for(var r in e)i(a,r,{get:e[r],enumerable:!0})},l=(a,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of m(e))!g.call(a,t)&&t!==r&&i(a,t,{get:()=>e[t],enumerable:!(c=p(e,t))||c.enumerable});return a};var x=(a,e,r)=>(r=a!=null?u(f(a)):{},l(e||!a||!a.__esModule?i(r,\"default\",{value:a,enumerable:!0}):r,a)),w=a=>l(i({},\"__esModule\",{value:!0}),a);var o=b((A,s)=>{s.exports=_jsx_runtime});var _={};v(_,{default:()=>d,frontmatter:()=>j});var n=x(o()),j={title:\"What is the difference between a parameter and an argument?\"};function h(a){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...a.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A parameter is a variable in the declaration of a function, while an argument is the actual value passed to the function when it is called. For example, in the function \",(0,n.jsx)(e.code,{children:\"function add(a, b) { return a + b; }\"}),\", \",(0,n.jsx)(e.code,{children:\"a\"}),\" and \",(0,n.jsx)(e.code,{children:\"b\"}),\" are parameters. When you call \",(0,n.jsx)(e.code,{children:\"add(2, 3)\"}),\", \",(0,n.jsx)(e.code,{children:\"2\"}),\" and \",(0,n.jsx)(e.code,{children:\"3\"}),\" are arguments.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Difference between a parameter and an argument\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Parameters\"}),`\n`,(0,n.jsx)(e.p,{children:\"Parameters are variables listed as part of a function's definition. They act as placeholders for the values that will be passed to the function when it is called.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet(name) {\n  console.log('Hello, ' + name);\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"name\"}),\" is a parameter.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Arguments\"}),`\n`,(0,n.jsx)(e.p,{children:\"Arguments are the actual values that are passed to the function when it is invoked. These values are assigned to the corresponding parameters in the function definition.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet(name) {\n  console.log('Hello, ' + name);\n}\ngreet('Alice'); // Output: \"Hello, Alice\"\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:'\"Alice\"'}),\" is an argument.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Key differences\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Parameters are part of the function's signature, while arguments are the actual values supplied to the function.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Parameters are used to define the function, whereas arguments are used to call the function.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example combining both\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function add(a, b) {\n  // a and b are parameters\n  return a + b;\n}\n\nconst result = add(2, 3); // 2 and 3 are arguments\nconsole.log(result); // Output: 5\n`})}),`\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/Web/JavaScript/Guide/Functions\",children:\"MDN Web Docs: Functions\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/function-basics\",children:\"JavaScript.info: Function basics\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3schools.com/js/js_function_parameters.asp\",children:\"W3Schools: JavaScript Function Parameters\"})}),`\n`]})]})}function d(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(h,{...a})}):h(a)}return w(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-a-parameter-and-an-argument/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-a-parameter-and-an-argument/zh-CN.json
index 49de1a4d2..e59ec3efa 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-a-parameter-and-an-argument/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-a-parameter-and-an-argument/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-a-parameter-and-an-argument/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),j=(c,n)=>{for(var r in n)i(c,r,{get:n[r],enumerable:!0})},d=(c,n,r,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of p(n))!g.call(c,l)&&l!==r&&i(c,l,{get:()=>n[l],enumerable:!(t=u(n,l))||t.enumerable});return c};var b=(c,n,r)=>(r=c!=null?s(m(c)):{},d(n||!c||!c.__esModule?i(r,\"default\",{value:c,enumerable:!0}):r,c)),x=c=>d(i({},\"__esModule\",{value:!0}),c);var o=f((S,a)=>{a.exports=_jsx_runtime});var w={};j(w,{default:()=>F,frontmatter:()=>_});var e=b(o()),_={title:\"\\u53C2\\u6570\\u548C\\u53C2\\u6570\\u7684\\u533A\\u522B\\u662F\\u4EC0\\u4E48\\uFF1F\"};function h(c){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},c.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u53C2\\u6570\\u662F\\u51FD\\u6570\\u58F0\\u660E\\u4E2D\\u7684\\u53D8\\u91CF\\uFF0C\\u800C\\u53C2\\u6570\\u662F\\u8C03\\u7528\\u51FD\\u6570\\u65F6\\u4F20\\u9012\\u7ED9\\u51FD\\u6570\\u7684\\u5B9E\\u9645\\u503C\\u3002\\u4F8B\\u5982\\uFF0C\\u5728\\u51FD\\u6570 \",(0,e.jsx)(n.code,{children:\"function add(a, b) { return a + b; }\"}),\" \\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"a\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"b\"}),\" \\u662F\\u53C2\\u6570\\u3002\\u5F53\\u60A8\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"add(2, 3)\"}),\" \\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"2\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"3\"}),\" \\u662F\\u53C2\\u6570\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u53C2\\u6570\\u548C\\u53C2\\u6570\\u7684\\u533A\\u522B\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u53C2\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u53C2\\u6570\\u662F\\u4F5C\\u4E3A\\u51FD\\u6570\\u5B9A\\u4E49\\u7684\\u4E00\\u90E8\\u5206\\u5217\\u51FA\\u7684\\u53D8\\u91CF\\u3002\\u5B83\\u4EEC\\u5145\\u5F53\\u5728\\u8C03\\u7528\\u51FD\\u6570\\u65F6\\u5C06\\u4F20\\u9012\\u7ED9\\u51FD\\u6570\\u7684\\u503C\\u7684\\u5360\\u4F4D\\u7B26\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet(name) {\n  console.log('Hello, ' + name);\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"name\"}),\" \\u662F\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u53C2\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u53C2\\u6570\\u662F\\u8C03\\u7528\\u51FD\\u6570\\u65F6\\u4F20\\u9012\\u7ED9\\u51FD\\u6570\\u7684\\u5B9E\\u9645\\u503C\\u3002\\u8FD9\\u4E9B\\u503C\\u88AB\\u5206\\u914D\\u7ED9\\u51FD\\u6570\\u5B9A\\u4E49\\u4E2D\\u76F8\\u5E94\\u7684\\u53C2\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet(name) {\n  console.log('Hello, ' + name);\n}\ngreet('Alice'); // Output: \"Hello, Alice\"\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:'\"Alice\"'}),\" \\u662F\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E3B\\u8981\\u533A\\u522B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u53C2\\u6570\\u662F\\u51FD\\u6570\\u7B7E\\u540D\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u800C\\u53C2\\u6570\\u662F\\u63D0\\u4F9B\\u7ED9\\u51FD\\u6570\\u7684\\u5B9E\\u9645\\u503C\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u53C2\\u6570\\u7528\\u4E8E\\u5B9A\\u4E49\\u51FD\\u6570\\uFF0C\\u800C\\u53C2\\u6570\\u7528\\u4E8E\\u8C03\\u7528\\u51FD\\u6570\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7ED3\\u5408\\u4E24\\u8005\\u7684\\u4F8B\\u5B50\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b) {\n  // a and b are parameters\n  return a + b;\n}\n\nconst result = add(2, 3); // 2 and 3 are arguments\nconsole.log(result); // Output: 5\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions\",children:\"MDN Web Docs: Functions\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/function-basics\",children:\"JavaScript.info: Function basics\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.w3schools.com/js/js_function_parameters.asp\",children:\"W3Schools: JavaScript Function Parameters\"})}),`\n`]})]})}function v(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,Object.assign({},c,{children:(0,e.jsx)(h,c)})):h(c)}var F=v;return x(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var j=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),b=(c,n)=>{for(var r in n)i(c,r,{get:n[r],enumerable:!0})},t=(c,n,r,d)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of m(n))!g.call(c,l)&&l!==r&&i(c,l,{get:()=>n[l],enumerable:!(d=p(n,l))||d.enumerable});return c};var x=(c,n,r)=>(r=c!=null?u(f(c)):{},t(n||!c||!c.__esModule?i(r,\"default\",{value:c,enumerable:!0}):r,c)),_=c=>t(i({},\"__esModule\",{value:!0}),c);var o=j((D,a)=>{a.exports=_jsx_runtime});var F={};b(F,{default:()=>s,frontmatter:()=>v});var e=x(o()),v={title:\"\\u53C2\\u6570\\u548C\\u53C2\\u6570\\u7684\\u533A\\u522B\\u662F\\u4EC0\\u4E48\\uFF1F\"};function h(c){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u53C2\\u6570\\u662F\\u51FD\\u6570\\u58F0\\u660E\\u4E2D\\u7684\\u53D8\\u91CF\\uFF0C\\u800C\\u53C2\\u6570\\u662F\\u8C03\\u7528\\u51FD\\u6570\\u65F6\\u4F20\\u9012\\u7ED9\\u51FD\\u6570\\u7684\\u5B9E\\u9645\\u503C\\u3002\\u4F8B\\u5982\\uFF0C\\u5728\\u51FD\\u6570 \",(0,e.jsx)(n.code,{children:\"function add(a, b) { return a + b; }\"}),\" \\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"a\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"b\"}),\" \\u662F\\u53C2\\u6570\\u3002\\u5F53\\u60A8\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"add(2, 3)\"}),\" \\u65F6\\uFF0C\",(0,e.jsx)(n.code,{children:\"2\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"3\"}),\" \\u662F\\u53C2\\u6570\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u53C2\\u6570\\u548C\\u53C2\\u6570\\u7684\\u533A\\u522B\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u53C2\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u53C2\\u6570\\u662F\\u4F5C\\u4E3A\\u51FD\\u6570\\u5B9A\\u4E49\\u7684\\u4E00\\u90E8\\u5206\\u5217\\u51FA\\u7684\\u53D8\\u91CF\\u3002\\u5B83\\u4EEC\\u5145\\u5F53\\u5728\\u8C03\\u7528\\u51FD\\u6570\\u65F6\\u5C06\\u4F20\\u9012\\u7ED9\\u51FD\\u6570\\u7684\\u503C\\u7684\\u5360\\u4F4D\\u7B26\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet(name) {\n  console.log('Hello, ' + name);\n}\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"name\"}),\" \\u662F\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u53C2\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u53C2\\u6570\\u662F\\u8C03\\u7528\\u51FD\\u6570\\u65F6\\u4F20\\u9012\\u7ED9\\u51FD\\u6570\\u7684\\u5B9E\\u9645\\u503C\\u3002\\u8FD9\\u4E9B\\u503C\\u88AB\\u5206\\u914D\\u7ED9\\u51FD\\u6570\\u5B9A\\u4E49\\u4E2D\\u76F8\\u5E94\\u7684\\u53C2\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet(name) {\n  console.log('Hello, ' + name);\n}\ngreet('Alice'); // Output: \"Hello, Alice\"\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:'\"Alice\"'}),\" \\u662F\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E3B\\u8981\\u533A\\u522B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u53C2\\u6570\\u662F\\u51FD\\u6570\\u7B7E\\u540D\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u800C\\u53C2\\u6570\\u662F\\u63D0\\u4F9B\\u7ED9\\u51FD\\u6570\\u7684\\u5B9E\\u9645\\u503C\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u53C2\\u6570\\u7528\\u4E8E\\u5B9A\\u4E49\\u51FD\\u6570\\uFF0C\\u800C\\u53C2\\u6570\\u7528\\u4E8E\\u8C03\\u7528\\u51FD\\u6570\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7ED3\\u5408\\u4E24\\u8005\\u7684\\u4F8B\\u5B50\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b) {\n  // a and b are parameters\n  return a + b;\n}\n\nconst result = add(2, 3); // 2 and 3 are arguments\nconsole.log(result); // Output: 5\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions\",children:\"MDN Web Docs: Functions\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/function-basics\",children:\"JavaScript.info: Function basics\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.w3schools.com/js/js_function_parameters.asp\",children:\"W3Schools: JavaScript Function Parameters\"})}),`\n`]})]})}function s(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,{...c,children:(0,e.jsx)(h,{...c})}):h(c)}return _(F);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-controlled-and-uncontrolled-react-components/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-controlled-and-uncontrolled-react-components/en-US.json
index ae99c392b..938827564 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-controlled-and-uncontrolled-react-components/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-controlled-and-uncontrolled-react-components/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-difference-between-controlled-and-uncontrolled-react-components/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var o in e)l(t,o,{get:e[o],enumerable:!0})},s=(t,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!f.call(t,r)&&r!==o&&l(t,r,{get:()=>e[r],enumerable:!(a=m(e,r))||a.enumerable});return t};var v=(t,e,o)=>(o=t!=null?d(u(t)):{},s(e||!t||!t.__esModule?l(o,\"default\",{value:t,enumerable:!0}):o,t)),y=t=>s(l({},\"__esModule\",{value:!0}),t);var c=b((S,h)=>{h.exports=_jsx_runtime});var R={};g(R,{default:()=>C,frontmatter:()=>w});var n=v(c()),w={title:\"What is the difference between controlled and uncontrolled React Components?\"};function i(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",code:\"code\",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.jsx)(e.p,{children:\"Controlled components in React are those where the form data is handled by the component's state. The state is the single source of truth, and any changes to the form input are managed through event handlers. Uncontrolled components, on the other hand, store their own state internally and rely on refs to access the form values. Controlled components offer more control and are easier to test, while uncontrolled components can be simpler to implement for basic use cases.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is the difference between controlled and uncontrolled React components?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Controlled components\"}),`\n`,(0,n.jsx)(e.p,{children:\"Controlled components are those where the form data is handled by the component's state. The state is the single source of truth, and any changes to the form input are managed through event handlers.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`class ControlledComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { value: '' };\n  }\n\n  handleChange = (event) => {\n    this.setState({ value: event.target.value });\n  };\n\n  handleSubmit = (event) => {\n    alert('A name was submitted: ' + this.state.value);\n    event.preventDefault();\n  };\n\n  render() {\n    return (\n      <form onSubmit={this.handleSubmit}>\n        <label>\n          Name:\n          <input\n            type=\"text\"\n            value={this.state.value}\n            onChange={this.handleChange}\n          />\n        </label>\n        <input type=\"submit\" value=\"Submit\" />\n      </form>\n    );\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Uncontrolled components\"}),`\n`,(0,n.jsx)(e.p,{children:\"Uncontrolled components store their own state internally and rely on refs to access the form values. This approach is more similar to traditional HTML form elements.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`class UncontrolledComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.inputRef = React.createRef();\n  }\n\n  handleSubmit = (event) => {\n    alert('A name was submitted: ' + this.inputRef.current.value);\n    event.preventDefault();\n  };\n\n  render() {\n    return (\n      <form onSubmit={this.handleSubmit}>\n        <label>\n          Name:\n          <input type=\"text\" ref={this.inputRef} />\n        </label>\n        <input type=\"submit\" value=\"Submit\" />\n      </form>\n    );\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Key differences\"}),`\n`,(0,n.jsx)(e.h4,{children:\"State management\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Controlled components: The state is managed by the React component.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Uncontrolled components: The state is managed by the DOM.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Data flow\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Controlled components: Data flows from the component's state to the input element.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Uncontrolled components: Data flows from the input element to the component via refs.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Controlled components: Preferred when you need to enforce validation, conditionally disable/enable inputs, or perform other complex interactions.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Uncontrolled components: Useful for simple forms or when you need to integrate with non-React code.\"}),`\n`]}),`\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://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components\",children:\"React documentation on controlled and uncontrolled components\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/manipulating-the-dom-with-refs\",children:\"React refs and the DOM\"})}),`\n`]})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(i,t)})):i(t)}var C=x;return y(R);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var o in e)l(t,o,{get:e[o],enumerable:!0})},s=(t,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!b.call(t,r)&&r!==o&&l(t,r,{get:()=>e[r],enumerable:!(a=p(e,r))||a.enumerable});return t};var y=(t,e,o)=>(o=t!=null?m(f(t)):{},s(e||!t||!t.__esModule?l(o,\"default\",{value:t,enumerable:!0}):o,t)),w=t=>s(l({},\"__esModule\",{value:!0}),t);var c=g((D,h)=>{h.exports=_jsx_runtime});var C={};v(C,{default:()=>d,frontmatter:()=>x});var n=y(c()),x={title:\"What is the difference between controlled and uncontrolled React Components?\"};function i(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Controlled components in React are those where the form data is handled by the component's state. The state is the single source of truth, and any changes to the form input are managed through event handlers. Uncontrolled components, on the other hand, store their own state internally and rely on refs to access the form values. Controlled components offer more control and are easier to test, while uncontrolled components can be simpler to implement for basic use cases.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is the difference between controlled and uncontrolled React components?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Controlled components\"}),`\n`,(0,n.jsx)(e.p,{children:\"Controlled components are those where the form data is handled by the component's state. The state is the single source of truth, and any changes to the form input are managed through event handlers.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`class ControlledComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { value: '' };\n  }\n\n  handleChange = (event) => {\n    this.setState({ value: event.target.value });\n  };\n\n  handleSubmit = (event) => {\n    alert('A name was submitted: ' + this.state.value);\n    event.preventDefault();\n  };\n\n  render() {\n    return (\n      <form onSubmit={this.handleSubmit}>\n        <label>\n          Name:\n          <input\n            type=\"text\"\n            value={this.state.value}\n            onChange={this.handleChange}\n          />\n        </label>\n        <input type=\"submit\" value=\"Submit\" />\n      </form>\n    );\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Uncontrolled components\"}),`\n`,(0,n.jsx)(e.p,{children:\"Uncontrolled components store their own state internally and rely on refs to access the form values. This approach is more similar to traditional HTML form elements.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`class UncontrolledComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.inputRef = React.createRef();\n  }\n\n  handleSubmit = (event) => {\n    alert('A name was submitted: ' + this.inputRef.current.value);\n    event.preventDefault();\n  };\n\n  render() {\n    return (\n      <form onSubmit={this.handleSubmit}>\n        <label>\n          Name:\n          <input type=\"text\" ref={this.inputRef} />\n        </label>\n        <input type=\"submit\" value=\"Submit\" />\n      </form>\n    );\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Key differences\"}),`\n`,(0,n.jsx)(e.h4,{children:\"State management\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Controlled components: The state is managed by the React component.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Uncontrolled components: The state is managed by the DOM.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Data flow\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Controlled components: Data flows from the component's state to the input element.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Uncontrolled components: Data flows from the input element to the component via refs.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Controlled components: Preferred when you need to enforce validation, conditionally disable/enable inputs, or perform other complex interactions.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Uncontrolled components: Useful for simple forms or when you need to integrate with non-React code.\"}),`\n`]}),`\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://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components\",children:\"React documentation on controlled and uncontrolled components\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/manipulating-the-dom-with-refs\",children:\"React refs and the DOM\"})}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(i,{...t})}):i(t)}return w(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-controlled-and-uncontrolled-react-components/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-controlled-and-uncontrolled-react-components/zh-CN.json
index bb5ed74ab..2f7167ae7 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-controlled-and-uncontrolled-react-components/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-controlled-and-uncontrolled-react-components/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-difference-between-controlled-and-uncontrolled-react-components/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),v=(t,n)=>{for(var r in n)a(t,r,{get:n[r],enumerable:!0})},h=(t,n,r,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of p(n))!f.call(t,l)&&l!==r&&a(t,l,{get:()=>n[l],enumerable:!(i=u(n,l))||i.enumerable});return t};var x=(t,n,r)=>(r=t!=null?d(m(t)):{},h(n||!t||!t.__esModule?a(r,\"default\",{value:t,enumerable:!0}):r,t)),R=t=>h(a({},\"__esModule\",{value:!0}),t);var s=b((_,c)=>{c.exports=_jsx_runtime});var S={};v(S,{default:()=>j,frontmatter:()=>g});var e=x(s()),g={title:\"\\u53D7\\u63A7\\u7EC4\\u4EF6\\u548C\\u975E\\u53D7\\u63A7 React \\u7EC4\\u4EF6\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function o(t){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u4E2D\\u7684\\u53D7\\u63A7\\u7EC4\\u4EF6\\u662F\\u6307\\u8868\\u5355\\u6570\\u636E\\u7531\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u5904\\u7406\\u7684\\u7EC4\\u4EF6\\u3002\\u72B6\\u6001\\u662F\\u552F\\u4E00\\u7684\\u771F\\u7406\\u6765\\u6E90\\uFF0C\\u5BF9\\u8868\\u5355\\u8F93\\u5165\\u7684\\u4EFB\\u4F55\\u66F4\\u6539\\u90FD\\u901A\\u8FC7\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u8FDB\\u884C\\u7BA1\\u7406\\u3002\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\\u975E\\u53D7\\u63A7\\u7EC4\\u4EF6\\u5728\\u5176\\u5185\\u90E8\\u5B58\\u50A8\\u81EA\\u5DF1\\u7684\\u72B6\\u6001\\uFF0C\\u5E76\\u4F9D\\u8D56\\u4E8E refs \\u6765\\u8BBF\\u95EE\\u8868\\u5355\\u503C\\u3002\\u53D7\\u63A7\\u7EC4\\u4EF6\\u63D0\\u4F9B\\u66F4\\u591A\\u63A7\\u5236\\uFF0C\\u66F4\\u5BB9\\u6613\\u6D4B\\u8BD5\\uFF0C\\u800C\\u975E\\u53D7\\u63A7\\u7EC4\\u4EF6\\u5BF9\\u4E8E\\u57FA\\u672C\\u7528\\u4F8B\\u6765\\u8BF4\\u53EF\\u80FD\\u66F4\\u6613\\u4E8E\\u5B9E\\u73B0\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u53D7\\u63A7\\u7EC4\\u4EF6\\u548C\\u975E\\u53D7\\u63A7 React \\u7EC4\\u4EF6\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u53D7\\u63A7\\u7EC4\\u4EF6\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u53D7\\u63A7\\u7EC4\\u4EF6\\u662F\\u6307\\u8868\\u5355\\u6570\\u636E\\u7531\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u5904\\u7406\\u7684\\u7EC4\\u4EF6\\u3002\\u72B6\\u6001\\u662F\\u552F\\u4E00\\u7684\\u771F\\u7406\\u6765\\u6E90\\uFF0C\\u5BF9\\u8868\\u5355\\u8F93\\u5165\\u7684\\u4EFB\\u4F55\\u66F4\\u6539\\u90FD\\u901A\\u8FC7\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u8FDB\\u884C\\u7BA1\\u7406\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`class ControlledComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { value: '' };\n  }\n\n  handleChange = (event) => {\n    this.setState({ value: event.target.value });\n  };\n\n  handleSubmit = (event) => {\n    alert('A name was submitted: ' + this.state.value);\n    event.preventDefault();\n  };\n\n  render() {\n    return (\n      <form onSubmit={this.handleSubmit}>\n        <label>\n          Name:\n          <input\n            type=\"text\"\n            value={this.state.value}\n            onChange={this.handleChange}\n          />\n        </label>\n        <input type=\"submit\" value=\"Submit\" />\n      </form>\n    );\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u975E\\u53D7\\u63A7\\u7EC4\\u4EF6\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u975E\\u53D7\\u63A7\\u7EC4\\u4EF6\\u5728\\u5176\\u5185\\u90E8\\u5B58\\u50A8\\u81EA\\u5DF1\\u7684\\u72B6\\u6001\\uFF0C\\u5E76\\u4F9D\\u8D56\\u4E8E refs \\u6765\\u8BBF\\u95EE\\u8868\\u5355\\u503C\\u3002\\u8FD9\\u79CD\\u65B9\\u6CD5\\u66F4\\u7C7B\\u4F3C\\u4E8E\\u4F20\\u7EDF\\u7684 HTML \\u8868\\u5355\\u5143\\u7D20\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`class UncontrolledComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.inputRef = React.createRef();\n  }\n\n  handleSubmit = (event) => {\n    alert('A name was submitted: ' + this.inputRef.current.value);\n    event.preventDefault();\n  };\n\n  render() {\n    return (\n      <form onSubmit={this.handleSubmit}>\n        <label>\n          Name:\n          <input type=\"text\" ref={this.inputRef} />\n        </label>\n        <input type=\"submit\" value=\"Submit\" />\n      </form>\n    );\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E3B\\u8981\\u533A\\u522B\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u72B6\\u6001\\u7BA1\\u7406\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u53D7\\u63A7\\u7EC4\\u4EF6\\uFF1A\\u72B6\\u6001\\u7531 React \\u7EC4\\u4EF6\\u7BA1\\u7406\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u975E\\u53D7\\u63A7\\u7EC4\\u4EF6\\uFF1A\\u72B6\\u6001\\u7531 DOM \\u7BA1\\u7406\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u6570\\u636E\\u6D41\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u53D7\\u63A7\\u7EC4\\u4EF6\\uFF1A\\u6570\\u636E\\u4ECE\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u6D41\\u5411\\u8F93\\u5165\\u5143\\u7D20\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u975E\\u53D7\\u63A7\\u7EC4\\u4EF6\\uFF1A\\u6570\\u636E\\u901A\\u8FC7 refs \\u4ECE\\u8F93\\u5165\\u5143\\u7D20\\u6D41\\u5411\\u7EC4\\u4EF6\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u53D7\\u63A7\\u7EC4\\u4EF6\\uFF1A\\u5F53\\u60A8\\u9700\\u8981\\u5F3A\\u5236\\u9A8C\\u8BC1\\u3001\\u6709\\u6761\\u4EF6\\u5730\\u7981\\u7528/\\u542F\\u7528\\u8F93\\u5165\\u6216\\u6267\\u884C\\u5176\\u4ED6\\u590D\\u6742\\u4EA4\\u4E92\\u65F6\\uFF0C\\u9996\\u9009\\u53D7\\u63A7\\u7EC4\\u4EF6\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u975E\\u53D7\\u63A7\\u7EC4\\u4EF6\\uFF1A\\u9002\\u7528\\u4E8E\\u7B80\\u5355\\u8868\\u5355\\u6216\\u9700\\u8981\\u4E0E\\u975E React \\u4EE3\\u7801\\u96C6\\u6210\\u65F6\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components\",children:\"React documentation on controlled and uncontrolled components\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/manipulating-the-dom-with-refs\",children:\"React refs and the DOM\"})}),`\n`]})]})}function C(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(o,t)})):o(t)}var j=C;return R(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var b=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),x=(t,n)=>{for(var r in n)a(t,r,{get:n[r],enumerable:!0})},h=(t,n,r,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of m(n))!v.call(t,l)&&l!==r&&a(t,l,{get:()=>n[l],enumerable:!(i=p(n,l))||i.enumerable});return t};var R=(t,n,r)=>(r=t!=null?u(f(t)):{},h(n||!t||!t.__esModule?a(r,\"default\",{value:t,enumerable:!0}):r,t)),g=t=>h(a({},\"__esModule\",{value:!0}),t);var o=b((D,c)=>{c.exports=_jsx_runtime});var S={};x(S,{default:()=>d,frontmatter:()=>C});var e=R(o()),C={title:\"\\u53D7\\u63A7\\u7EC4\\u4EF6\\u548C\\u975E\\u53D7\\u63A7 React \\u7EC4\\u4EF6\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function s(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u4E2D\\u7684\\u53D7\\u63A7\\u7EC4\\u4EF6\\u662F\\u6307\\u8868\\u5355\\u6570\\u636E\\u7531\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u5904\\u7406\\u7684\\u7EC4\\u4EF6\\u3002\\u72B6\\u6001\\u662F\\u552F\\u4E00\\u7684\\u771F\\u7406\\u6765\\u6E90\\uFF0C\\u5BF9\\u8868\\u5355\\u8F93\\u5165\\u7684\\u4EFB\\u4F55\\u66F4\\u6539\\u90FD\\u901A\\u8FC7\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u8FDB\\u884C\\u7BA1\\u7406\\u3002\\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\\u975E\\u53D7\\u63A7\\u7EC4\\u4EF6\\u5728\\u5176\\u5185\\u90E8\\u5B58\\u50A8\\u81EA\\u5DF1\\u7684\\u72B6\\u6001\\uFF0C\\u5E76\\u4F9D\\u8D56\\u4E8E refs \\u6765\\u8BBF\\u95EE\\u8868\\u5355\\u503C\\u3002\\u53D7\\u63A7\\u7EC4\\u4EF6\\u63D0\\u4F9B\\u66F4\\u591A\\u63A7\\u5236\\uFF0C\\u66F4\\u5BB9\\u6613\\u6D4B\\u8BD5\\uFF0C\\u800C\\u975E\\u53D7\\u63A7\\u7EC4\\u4EF6\\u5BF9\\u4E8E\\u57FA\\u672C\\u7528\\u4F8B\\u6765\\u8BF4\\u53EF\\u80FD\\u66F4\\u6613\\u4E8E\\u5B9E\\u73B0\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u53D7\\u63A7\\u7EC4\\u4EF6\\u548C\\u975E\\u53D7\\u63A7 React \\u7EC4\\u4EF6\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u53D7\\u63A7\\u7EC4\\u4EF6\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u53D7\\u63A7\\u7EC4\\u4EF6\\u662F\\u6307\\u8868\\u5355\\u6570\\u636E\\u7531\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u5904\\u7406\\u7684\\u7EC4\\u4EF6\\u3002\\u72B6\\u6001\\u662F\\u552F\\u4E00\\u7684\\u771F\\u7406\\u6765\\u6E90\\uFF0C\\u5BF9\\u8868\\u5355\\u8F93\\u5165\\u7684\\u4EFB\\u4F55\\u66F4\\u6539\\u90FD\\u901A\\u8FC7\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u8FDB\\u884C\\u7BA1\\u7406\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`class ControlledComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { value: '' };\n  }\n\n  handleChange = (event) => {\n    this.setState({ value: event.target.value });\n  };\n\n  handleSubmit = (event) => {\n    alert('A name was submitted: ' + this.state.value);\n    event.preventDefault();\n  };\n\n  render() {\n    return (\n      <form onSubmit={this.handleSubmit}>\n        <label>\n          Name:\n          <input\n            type=\"text\"\n            value={this.state.value}\n            onChange={this.handleChange}\n          />\n        </label>\n        <input type=\"submit\" value=\"Submit\" />\n      </form>\n    );\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u975E\\u53D7\\u63A7\\u7EC4\\u4EF6\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u975E\\u53D7\\u63A7\\u7EC4\\u4EF6\\u5728\\u5176\\u5185\\u90E8\\u5B58\\u50A8\\u81EA\\u5DF1\\u7684\\u72B6\\u6001\\uFF0C\\u5E76\\u4F9D\\u8D56\\u4E8E refs \\u6765\\u8BBF\\u95EE\\u8868\\u5355\\u503C\\u3002\\u8FD9\\u79CD\\u65B9\\u6CD5\\u66F4\\u7C7B\\u4F3C\\u4E8E\\u4F20\\u7EDF\\u7684 HTML \\u8868\\u5355\\u5143\\u7D20\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`class UncontrolledComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.inputRef = React.createRef();\n  }\n\n  handleSubmit = (event) => {\n    alert('A name was submitted: ' + this.inputRef.current.value);\n    event.preventDefault();\n  };\n\n  render() {\n    return (\n      <form onSubmit={this.handleSubmit}>\n        <label>\n          Name:\n          <input type=\"text\" ref={this.inputRef} />\n        </label>\n        <input type=\"submit\" value=\"Submit\" />\n      </form>\n    );\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E3B\\u8981\\u533A\\u522B\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u72B6\\u6001\\u7BA1\\u7406\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u53D7\\u63A7\\u7EC4\\u4EF6\\uFF1A\\u72B6\\u6001\\u7531 React \\u7EC4\\u4EF6\\u7BA1\\u7406\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u975E\\u53D7\\u63A7\\u7EC4\\u4EF6\\uFF1A\\u72B6\\u6001\\u7531 DOM \\u7BA1\\u7406\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u6570\\u636E\\u6D41\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u53D7\\u63A7\\u7EC4\\u4EF6\\uFF1A\\u6570\\u636E\\u4ECE\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u6D41\\u5411\\u8F93\\u5165\\u5143\\u7D20\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u975E\\u53D7\\u63A7\\u7EC4\\u4EF6\\uFF1A\\u6570\\u636E\\u901A\\u8FC7 refs \\u4ECE\\u8F93\\u5165\\u5143\\u7D20\\u6D41\\u5411\\u7EC4\\u4EF6\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u53D7\\u63A7\\u7EC4\\u4EF6\\uFF1A\\u5F53\\u60A8\\u9700\\u8981\\u5F3A\\u5236\\u9A8C\\u8BC1\\u3001\\u6709\\u6761\\u4EF6\\u5730\\u7981\\u7528/\\u542F\\u7528\\u8F93\\u5165\\u6216\\u6267\\u884C\\u5176\\u4ED6\\u590D\\u6742\\u4EA4\\u4E92\\u65F6\\uFF0C\\u9996\\u9009\\u53D7\\u63A7\\u7EC4\\u4EF6\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u975E\\u53D7\\u63A7\\u7EC4\\u4EF6\\uFF1A\\u9002\\u7528\\u4E8E\\u7B80\\u5355\\u8868\\u5355\\u6216\\u9700\\u8981\\u4E0E\\u975E React \\u4EE3\\u7801\\u96C6\\u6210\\u65F6\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components\",children:\"React documentation on controlled and uncontrolled components\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/manipulating-the-dom-with-refs\",children:\"React refs and the DOM\"})}),`\n`]})]})}function d(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(s,{...t})}):s(t)}return g(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-double-equal-and-triple-equal/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-double-equal-and-triple-equal/en-US.json
index 116b2f942..22e5b3fe5 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-double-equal-and-triple-equal/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-double-equal-and-triple-equal/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),y=(r,e)=>{for(var o in e)l(r,o,{get:e[o],enumerable:!0})},i=(r,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of p(e))!m.call(r,t)&&t!==o&&l(r,t,{get:()=>e[t],enumerable:!(c=u(e,t))||c.enumerable});return r};var v=(r,e,o)=>(o=r!=null?s(f(r)):{},i(e||!r||!r.__esModule?l(o,\"default\",{value:r,enumerable:!0}):o,r)),b=r=>i(l({},\"__esModule\",{value:!0}),r);var d=g((x,a)=>{a.exports=_jsx_runtime});var S={};y(S,{default:()=>j,frontmatter:()=>w});var n=v(d()),w={title:\"What is the difference between `==` and `===` in JavaScript?\"};function h(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",hr:\"hr\",h3:\"h3\",pre:\"pre\",a:\"a\",ul:\"ul\",li:\"li\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"==\"}),\" is the abstract equality operator while \",(0,n.jsx)(e.code,{children:\"===\"}),\" is the strict equality operator. The \",(0,n.jsx)(e.code,{children:\"==\"}),\" operator will compare for equality after doing any necessary type conversions. The \",(0,n.jsx)(e.code,{children:\"===\"}),\" operator will not do type conversion, so if two values are not the same type \",(0,n.jsx)(e.code,{children:\"===\"}),\" will simply return \",(0,n.jsx)(e.code,{children:\"false\"}),\".\"]}),`\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:\"Operator\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"==\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"===\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Name\"}),(0,n.jsx)(e.td,{children:\"(Loose) Equality operator\"}),(0,n.jsx)(e.td,{children:\"Strict equality operator\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Type coercion\"}),(0,n.jsx)(e.td,{children:\"Yes\"}),(0,n.jsx)(e.td,{children:\"No\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Compares value and type\"}),(0,n.jsx)(e.td,{children:\"No\"}),(0,n.jsx)(e.td,{children:\"Yes\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Equality operator (\",(0,n.jsx)(e.code,{children:\"==\"}),\")\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"==\"}),\" operator checks for equality between two values but performs type coercion if the values are of different types. This means that JavaScript will attempt to convert the values to a common type before making the comparison.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(42 == '42'); // true\nconsole.log(0 == false); // true\nconsole.log(null == undefined); // true\nconsole.log([] == false); // true\nconsole.log('' == false); // true\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In these examples, JavaScript converts the operands to the same type before making the comparison. For example, \",(0,n.jsx)(e.code,{children:\"42 == '42'\"}),\" is true because the string \",(0,n.jsx)(e.code,{children:\"'42'\"}),\" is converted to the number \",(0,n.jsx)(e.code,{children:\"42\"}),\" before comparison.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"However, when using \",(0,n.jsx)(e.code,{children:\"==\"}),\", unintuitive results can happen:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(1 == [1]); // true\nconsole.log(0 == ''); // true\nconsole.log(0 == '0'); // true\nconsole.log('' == '0'); // false\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"As a general rule of thumb, never use the \",(0,n.jsx)(e.code,{children:\"==\"}),\" operator, except for convenience when comparing against \",(0,n.jsx)(e.code,{children:\"null\"}),\" or \",(0,n.jsx)(e.code,{children:\"undefined\"}),\", where \",(0,n.jsx)(e.code,{children:\"a == null\"}),\" will return \",(0,n.jsx)(e.code,{children:\"true\"}),\" if \",(0,n.jsx)(e.code,{children:\"a\"}),\" is \",(0,n.jsx)(e.code,{children:\"null\"}),\" or \",(0,n.jsx)(e.code,{children:\"undefined\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var a = null;\nconsole.log(a == null); // true\nconsole.log(a == undefined); // true\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Strict equality operator (\",(0,n.jsx)(e.code,{children:\"===\"}),\")\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"===\"}),\" operator, also known as the strict equality operator, checks for equality between two values without performing type coercion. This means that both the value and the type must be the same for the comparison to return true.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(42 === '42'); // false\nconsole.log(0 === false); // false\nconsole.log(null === undefined); // false\nconsole.log([] === false); // false\nconsole.log('' === false); // false\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"For these comparisons, no type conversion is performed, so the statement returns \",(0,n.jsx)(e.code,{children:\"false\"}),\" if the types are different. For instance, \",(0,n.jsx)(e.code,{children:\"42 === '42'\"}),\" is \",(0,n.jsx)(e.code,{children:\"false\"}),\" because the types (number and string) are different.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Comparison with type coercion (==)\nconsole.log(42 == '42'); // true\nconsole.log(0 == false); // true\nconsole.log(null == undefined); // true\n\n// Strict comparison without type coercion (===)\nconsole.log(42 === '42'); // false\nconsole.log(0 === false); // false\nconsole.log(null === undefined); // false\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Bonus: \",(0,n.jsx)(e.code,{children:\"Object.is()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"There's one final value-comparison operation within JavaScript, that is the \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is\",children:(0,n.jsx)(e.code,{children:\"Object.is()\"})}),\" static method. The only difference between \",(0,n.jsx)(e.code,{children:\"Object.is()\"}),\" and \",(0,n.jsx)(e.code,{children:\"===\"}),\" is how they treat of signed zeros and \",(0,n.jsx)(e.code,{children:\"NaN\"}),\" values. The \",(0,n.jsx)(e.code,{children:\"===\"}),\" operator (and the \",(0,n.jsx)(e.code,{children:\"==\"}),\" operator) treats the number values \",(0,n.jsx)(e.code,{children:\"-0\"}),\" and \",(0,n.jsx)(e.code,{children:\"+0\"}),\" as equal, but treats \",(0,n.jsx)(e.code,{children:\"NaN\"}),\" as not equal to each other.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Conclusion\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"==\"}),\" when you want to compare values with type coercion (and understand the implications of it). In practice, the only reasonable use case for the equality operator is to check for both \",(0,n.jsx)(e.code,{children:\"null\"}),\" and \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" in a single comparison for convenience.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"===\"}),\" when you want to ensure both the value and the type are the same, which is the safer and more predictable choice in most cases.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"===\"}),\" (strict equality) is generally recommended to avoid the pitfalls of type coercion, which can lead to unexpected behavior and bugs in your code. It makes the intent of your comparisons clearer and ensures that you are comparing both the value and the type.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"ESLint's \",(0,n.jsx)(e.a,{href:\"https://eslint.org/docs/latest/rules/eqeqeq\",children:(0,n.jsx)(e.code,{children:\"eqeqeq\"})}),\" rule enforces the use of strict equality operators \",(0,n.jsx)(e.code,{children:\"===\"}),\" and \",(0,n.jsx)(e.code,{children:\"!==\"}),\" and even provides an option to always enforce strict equality except when comparing with the \",(0,n.jsx)(e.code,{children:\"null\"}),\" literal.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{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/Web/JavaScript/Reference/Operators/Equality\",children:\"Equality (==) | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality\",children:\"Strict equality (===) | MDN\"})}),`\n`]})]})}function q(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(h,r)})):h(r)}var j=q;return b(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),v=(r,e)=>{for(var o in e)l(r,o,{get:e[o],enumerable:!0})},i=(r,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of f(e))!g.call(r,t)&&t!==o&&l(r,t,{get:()=>e[t],enumerable:!(c=p(e,t))||c.enumerable});return r};var b=(r,e,o)=>(o=r!=null?u(m(r)):{},i(e||!r||!r.__esModule?l(o,\"default\",{value:r,enumerable:!0}):o,r)),w=r=>i(l({},\"__esModule\",{value:!0}),r);var d=y((N,a)=>{a.exports=_jsx_runtime});var S={};v(S,{default:()=>s,frontmatter:()=>q});var n=b(d()),q={title:\"What is the difference between `==` and `===` in JavaScript?\"};function h(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"==\"}),\" is the abstract equality operator while \",(0,n.jsx)(e.code,{children:\"===\"}),\" is the strict equality operator. The \",(0,n.jsx)(e.code,{children:\"==\"}),\" operator will compare for equality after doing any necessary type conversions. The \",(0,n.jsx)(e.code,{children:\"===\"}),\" operator will not do type conversion, so if two values are not the same type \",(0,n.jsx)(e.code,{children:\"===\"}),\" will simply return \",(0,n.jsx)(e.code,{children:\"false\"}),\".\"]}),`\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:\"Operator\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"==\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"===\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Name\"}),(0,n.jsx)(e.td,{children:\"(Loose) Equality operator\"}),(0,n.jsx)(e.td,{children:\"Strict equality operator\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Type coercion\"}),(0,n.jsx)(e.td,{children:\"Yes\"}),(0,n.jsx)(e.td,{children:\"No\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Compares value and type\"}),(0,n.jsx)(e.td,{children:\"No\"}),(0,n.jsx)(e.td,{children:\"Yes\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Equality operator (\",(0,n.jsx)(e.code,{children:\"==\"}),\")\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"==\"}),\" operator checks for equality between two values but performs type coercion if the values are of different types. This means that JavaScript will attempt to convert the values to a common type before making the comparison.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(42 == '42'); // true\nconsole.log(0 == false); // true\nconsole.log(null == undefined); // true\nconsole.log([] == false); // true\nconsole.log('' == false); // true\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In these examples, JavaScript converts the operands to the same type before making the comparison. For example, \",(0,n.jsx)(e.code,{children:\"42 == '42'\"}),\" is true because the string \",(0,n.jsx)(e.code,{children:\"'42'\"}),\" is converted to the number \",(0,n.jsx)(e.code,{children:\"42\"}),\" before comparison.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"However, when using \",(0,n.jsx)(e.code,{children:\"==\"}),\", unintuitive results can happen:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(1 == [1]); // true\nconsole.log(0 == ''); // true\nconsole.log(0 == '0'); // true\nconsole.log('' == '0'); // false\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"As a general rule of thumb, never use the \",(0,n.jsx)(e.code,{children:\"==\"}),\" operator, except for convenience when comparing against \",(0,n.jsx)(e.code,{children:\"null\"}),\" or \",(0,n.jsx)(e.code,{children:\"undefined\"}),\", where \",(0,n.jsx)(e.code,{children:\"a == null\"}),\" will return \",(0,n.jsx)(e.code,{children:\"true\"}),\" if \",(0,n.jsx)(e.code,{children:\"a\"}),\" is \",(0,n.jsx)(e.code,{children:\"null\"}),\" or \",(0,n.jsx)(e.code,{children:\"undefined\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var a = null;\nconsole.log(a == null); // true\nconsole.log(a == undefined); // true\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Strict equality operator (\",(0,n.jsx)(e.code,{children:\"===\"}),\")\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"===\"}),\" operator, also known as the strict equality operator, checks for equality between two values without performing type coercion. This means that both the value and the type must be the same for the comparison to return true.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(42 === '42'); // false\nconsole.log(0 === false); // false\nconsole.log(null === undefined); // false\nconsole.log([] === false); // false\nconsole.log('' === false); // false\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"For these comparisons, no type conversion is performed, so the statement returns \",(0,n.jsx)(e.code,{children:\"false\"}),\" if the types are different. For instance, \",(0,n.jsx)(e.code,{children:\"42 === '42'\"}),\" is \",(0,n.jsx)(e.code,{children:\"false\"}),\" because the types (number and string) are different.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Comparison with type coercion (==)\nconsole.log(42 == '42'); // true\nconsole.log(0 == false); // true\nconsole.log(null == undefined); // true\n\n// Strict comparison without type coercion (===)\nconsole.log(42 === '42'); // false\nconsole.log(0 === false); // false\nconsole.log(null === undefined); // false\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Bonus: \",(0,n.jsx)(e.code,{children:\"Object.is()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"There's one final value-comparison operation within JavaScript, that is the \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is\",children:(0,n.jsx)(e.code,{children:\"Object.is()\"})}),\" static method. The only difference between \",(0,n.jsx)(e.code,{children:\"Object.is()\"}),\" and \",(0,n.jsx)(e.code,{children:\"===\"}),\" is how they treat of signed zeros and \",(0,n.jsx)(e.code,{children:\"NaN\"}),\" values. The \",(0,n.jsx)(e.code,{children:\"===\"}),\" operator (and the \",(0,n.jsx)(e.code,{children:\"==\"}),\" operator) treats the number values \",(0,n.jsx)(e.code,{children:\"-0\"}),\" and \",(0,n.jsx)(e.code,{children:\"+0\"}),\" as equal, but treats \",(0,n.jsx)(e.code,{children:\"NaN\"}),\" as not equal to each other.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Conclusion\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"==\"}),\" when you want to compare values with type coercion (and understand the implications of it). In practice, the only reasonable use case for the equality operator is to check for both \",(0,n.jsx)(e.code,{children:\"null\"}),\" and \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" in a single comparison for convenience.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"===\"}),\" when you want to ensure both the value and the type are the same, which is the safer and more predictable choice in most cases.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"===\"}),\" (strict equality) is generally recommended to avoid the pitfalls of type coercion, which can lead to unexpected behavior and bugs in your code. It makes the intent of your comparisons clearer and ensures that you are comparing both the value and the type.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"ESLint's \",(0,n.jsx)(e.a,{href:\"https://eslint.org/docs/latest/rules/eqeqeq\",children:(0,n.jsx)(e.code,{children:\"eqeqeq\"})}),\" rule enforces the use of strict equality operators \",(0,n.jsx)(e.code,{children:\"===\"}),\" and \",(0,n.jsx)(e.code,{children:\"!==\"}),\" and even provides an option to always enforce strict equality except when comparing with the \",(0,n.jsx)(e.code,{children:\"null\"}),\" literal.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{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/Web/JavaScript/Reference/Operators/Equality\",children:\"Equality (==) | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality\",children:\"Strict equality (===) | MDN\"})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return w(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-double-equal-and-triple-equal/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-double-equal-and-triple-equal/pt-BR.json
index 15052703d..c6f2a2838 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-double-equal-and-triple-equal/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-double-equal-and-triple-equal/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-double-equal-and-triple-equal/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var r in e)d(o,r,{get:e[r],enumerable:!0})},t=(o,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!g.call(o,a)&&a!==r&&d(o,a,{get:()=>e[a],enumerable:!(c=p(e,a))||c.enumerable});return o};var j=(o,e,r)=>(r=o!=null?u(h(o)):{},t(e||!o||!o.__esModule?d(r,\"default\",{value:o,enumerable:!0}):r,o)),_=o=>t(d({},\"__esModule\",{value:!0}),o);var l=f((M,s)=>{s.exports=_jsx_runtime});var q={};x(q,{default:()=>b,frontmatter:()=>v});var n=j(l()),v={title:\"Qual \\xE9 a diferen\\xE7a entre `==` e `===`?\"};function i(o){let e=Object.assign({p:\"p\",code:\"code\",pre:\"pre\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"==\"}),\" \\xE9 o operador de igualdade abstrato enquanto \",(0,n.jsx)(e.code,{children:\"===\"}),\" \\xE9 o operador de igualdade rigoroso. O operador \",(0,n.jsx)(e.code,{children:\"==\"}),\" ser\\xE1 comparado para a igualdade ap\\xF3s fazer quaisquer convers\\xF5es de tipo necess\\xE1rias. O operador \",(0,n.jsx)(e.code,{children:\"===\"}),\" n\\xE3o far\\xE1 convers\\xE3o de tipo, ent\\xE3o se dois valores n\\xE3o forem do mesmo tipo \",(0,n.jsx)(e.code,{children:\"===\"}),\" simplesmente retornar\\xE1 \",(0,n.jsx)(e.code,{children:\"false\"}),\". Ao usar \",(0,n.jsx)(e.code,{children:\"==\"}),\", coisas engra\\xE7adas podem acontecer, tais como:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`1 == '1'; // true\n1 == [1]; // true\n1 == true; // true\n0 == ''; // true\n0 == '0'; // true\n0 == false; // true\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Como regra geral, nunca use o operador \",(0,n.jsx)(e.code,{children:\"==\"}),\", exceto por conveni\\xEAncia ao comparar com \",(0,n.jsx)(e.code,{children:\"null\"}),\" ou \",(0,n.jsx)(e.code,{children:\"undefined\"}),\", onde \",(0,n.jsx)(e.code,{children:\"a == null\"}),\" retornar\\xE1 \",(0,n.jsx)(e.code,{children:\"true\"}),\" se a for \",(0,n.jsx)(e.code,{children:\"null\"}),\" ou undefined.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var a = null;\nconsole.log(a == null); // true\nconsole.log(a == undefined); // true\n`})})]})}function O(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(i,o)})):i(o)}var b=O;return _(q);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var r in e)d(n,r,{get:e[r],enumerable:!0})},t=(n,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of h(e))!g.call(n,a)&&a!==r&&d(n,a,{get:()=>e[a],enumerable:!(c=m(e,a))||c.enumerable});return n};var _=(n,e,r)=>(r=n!=null?p(f(n)):{},t(e||!n||!n.__esModule?d(r,\"default\",{value:n,enumerable:!0}):r,n)),v=n=>t(d({},\"__esModule\",{value:!0}),n);var s=x((D,l)=>{l.exports=_jsx_runtime});var C={};j(C,{default:()=>u,frontmatter:()=>q});var o=_(s()),q={title:\"Qual \\xE9 a diferen\\xE7a entre `==` e `===`?\"};function i(n){let e={code:\"code\",p:\"p\",pre:\"pre\",...n.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"==\"}),\" \\xE9 o operador de igualdade abstrato enquanto \",(0,o.jsx)(e.code,{children:\"===\"}),\" \\xE9 o operador de igualdade rigoroso. O operador \",(0,o.jsx)(e.code,{children:\"==\"}),\" ser\\xE1 comparado para a igualdade ap\\xF3s fazer quaisquer convers\\xF5es de tipo necess\\xE1rias. O operador \",(0,o.jsx)(e.code,{children:\"===\"}),\" n\\xE3o far\\xE1 convers\\xE3o de tipo, ent\\xE3o se dois valores n\\xE3o forem do mesmo tipo \",(0,o.jsx)(e.code,{children:\"===\"}),\" simplesmente retornar\\xE1 \",(0,o.jsx)(e.code,{children:\"false\"}),\". Ao usar \",(0,o.jsx)(e.code,{children:\"==\"}),\", coisas engra\\xE7adas podem acontecer, tais como:\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`1 == '1'; // true\n1 == [1]; // true\n1 == true; // true\n0 == ''; // true\n0 == '0'; // true\n0 == false; // true\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"Como regra geral, nunca use o operador \",(0,o.jsx)(e.code,{children:\"==\"}),\", exceto por conveni\\xEAncia ao comparar com \",(0,o.jsx)(e.code,{children:\"null\"}),\" ou \",(0,o.jsx)(e.code,{children:\"undefined\"}),\", onde \",(0,o.jsx)(e.code,{children:\"a == null\"}),\" retornar\\xE1 \",(0,o.jsx)(e.code,{children:\"true\"}),\" se a for \",(0,o.jsx)(e.code,{children:\"null\"}),\" ou undefined.\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`var a = null;\nconsole.log(a == null); // true\nconsole.log(a == undefined); // true\n`})})]})}function u(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(i,{...n})}):i(n)}return v(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-double-equal-and-triple-equal/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-double-equal-and-triple-equal/zh-CN.json
index 375b787c4..db35fa639 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-double-equal-and-triple-equal/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-double-equal-and-triple-equal/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-double-equal-and-triple-equal/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var b=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),j=(l,e)=>{for(var c in e)r(l,c,{get:e[c],enumerable:!0})},i=(l,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of f(e))!p.call(l,d)&&d!==c&&r(l,d,{get:()=>e[d],enumerable:!(o=u(e,d))||o.enumerable});return l};var m=(l,e,c)=>(c=l!=null?s(g(l)):{},i(e||!l||!l.__esModule?r(c,\"default\",{value:l,enumerable:!0}):c,l)),v=l=>i(r({},\"__esModule\",{value:!0}),l);var t=b((_,h)=>{h.exports=_jsx_runtime});var x={};j(x,{default:()=>q,frontmatter:()=>S});var n=m(t()),S={title:\"JavaScript \\u4E2D `==` \\u548C `===` \\u7684\\u533A\\u522B\\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(l){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",hr:\"hr\",h3:\"h3\",pre:\"pre\",a:\"a\",ul:\"ul\",li:\"li\"},l.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"==\"}),\" \\u662F\\u62BD\\u8C61\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"===\"}),\" \\u662F\\u4E25\\u683C\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26\\u3002\",(0,n.jsx)(e.code,{children:\"==\"}),\" \\u8FD0\\u7B97\\u7B26\\u4F1A\\u5728\\u8FDB\\u884C\\u4EFB\\u4F55\\u5FC5\\u8981\\u7684\\u7C7B\\u578B\\u8F6C\\u6362\\u540E\\u6BD4\\u8F83\\u662F\\u5426\\u76F8\\u7B49\\u3002\",(0,n.jsx)(e.code,{children:\"===\"}),\" \\u8FD0\\u7B97\\u7B26\\u4E0D\\u4F1A\\u8FDB\\u884C\\u7C7B\\u578B\\u8F6C\\u6362\\uFF0C\\u56E0\\u6B64\\u5982\\u679C\\u4E24\\u4E2A\\u503C\\u4E0D\\u662F\\u540C\\u4E00\\u7C7B\\u578B\\uFF0C\",(0,n.jsx)(e.code,{children:\"===\"}),\" \\u5C06\\u76F4\\u63A5\\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:\"false\"}),\"\\u3002\"]}),`\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:\"\\u8FD0\\u7B97\\u7B26\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"==\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"===\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u540D\\u79F0\"}),(0,n.jsx)(e.td,{children:\"\\uFF08\\u5BBD\\u677E\\uFF09\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26\"}),(0,n.jsx)(e.td,{children:\"\\u4E25\\u683C\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u7C7B\\u578B\\u8F6C\\u6362\"}),(0,n.jsx)(e.td,{children:\"\\u662F\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u6BD4\\u8F83\\u503C\\u548C\\u7C7B\\u578B\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"}),(0,n.jsx)(e.td,{children:\"\\u662F\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26 (\",(0,n.jsx)(e.code,{children:\"==\"}),\")\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"==\"}),\" \\u8FD0\\u7B97\\u7B26\\u68C0\\u67E5\\u4E24\\u4E2A\\u503C\\u662F\\u5426\\u76F8\\u7B49\\uFF0C\\u4F46\\u5982\\u679C\\u8FD9\\u4E9B\\u503C\\u7684\\u7C7B\\u578B\\u4E0D\\u540C\\uFF0C\\u5219\\u4F1A\\u6267\\u884C\\u7C7B\\u578B\\u8F6C\\u6362\\u3002\\u8FD9\\u610F\\u5473\\u7740 JavaScript \\u5C06\\u5C1D\\u8BD5\\u5728\\u8FDB\\u884C\\u6BD4\\u8F83\\u4E4B\\u524D\\u5C06\\u8FD9\\u4E9B\\u503C\\u8F6C\\u6362\\u4E3A\\u901A\\u7528\\u7C7B\\u578B\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(42 == '42'); // true\nconsole.log(0 == false); // true\nconsole.log(null == undefined); // true\nconsole.log([] == false); // true\nconsole.log('' == false); // true\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u8FD9\\u4E9B\\u793A\\u4F8B\\u4E2D\\uFF0CJavaScript \\u5728\\u8FDB\\u884C\\u6BD4\\u8F83\\u4E4B\\u524D\\u5C06\\u64CD\\u4F5C\\u6570\\u8F6C\\u6362\\u4E3A\\u76F8\\u540C\\u7684\\u7C7B\\u578B\\u3002\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"42 == '42'\"}),\" \\u4E3A true\\uFF0C\\u56E0\\u4E3A\\u5B57\\u7B26\\u4E32 \",(0,n.jsx)(e.code,{children:\"'42'\"}),\" \\u5728\\u6BD4\\u8F83\\u4E4B\\u524D\\u88AB\\u8F6C\\u6362\\u4E3A\\u6570\\u5B57 \",(0,n.jsx)(e.code,{children:\"42\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F46\\u662F\\uFF0C\\u5F53\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"==\"}),\" \\u65F6\\uFF0C\\u53EF\\u80FD\\u4F1A\\u53D1\\u751F\\u4E0D\\u76F4\\u89C2\\u7684\\u7ED3\\u679C\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(1 == [1]); // true\nconsole.log(0 == ''); // true\nconsole.log(0 == '0'); // true\nconsole.log('' == '0'); // false\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F5C\\u4E3A\\u4E00\\u822C\\u7ECF\\u9A8C\\u6CD5\\u5219\\uFF0C\\u6C38\\u8FDC\\u4E0D\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"==\"}),\" \\u8FD0\\u7B97\\u7B26\\uFF0C\\u9664\\u975E\\u4E3A\\u4E86\\u65B9\\u4FBF\\u4E0E \",(0,n.jsx)(e.code,{children:\"null\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" \\u8FDB\\u884C\\u6BD4\\u8F83\\uFF0C\\u5176\\u4E2D \",(0,n.jsx)(e.code,{children:\"a == null\"}),\" \\u5C06\\u5728 \",(0,n.jsx)(e.code,{children:\"a\"}),\" \\u4E3A \",(0,n.jsx)(e.code,{children:\"null\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" \\u65F6\\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var a = null;\nconsole.log(a == null); // true\nconsole.log(a == undefined); // true\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4E25\\u683C\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26 (\",(0,n.jsx)(e.code,{children:\"===\"}),\")\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"===\"}),\" \\u8FD0\\u7B97\\u7B26\\uFF0C\\u4E5F\\u79F0\\u4E3A\\u4E25\\u683C\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26\\uFF0C\\u68C0\\u67E5\\u4E24\\u4E2A\\u503C\\u662F\\u5426\\u76F8\\u7B49\\uFF0C\\u800C\\u4E0D\\u6267\\u884C\\u7C7B\\u578B\\u8F6C\\u6362\\u3002\\u8FD9\\u610F\\u5473\\u7740\\uFF0C\\u53EA\\u6709\\u5F53\\u503C\\u548C\\u7C7B\\u578B\\u90FD\\u76F8\\u540C\\u65F6\\uFF0C\\u6BD4\\u8F83\\u624D\\u4F1A\\u8FD4\\u56DE true\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(42 === '42'); // false\nconsole.log(0 === false); // false\nconsole.log(null === undefined); // false\nconsole.log([] === false); // false\nconsole.log('' === false); // false\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5BF9\\u4E8E\\u8FD9\\u4E9B\\u6BD4\\u8F83\\uFF0C\\u4E0D\\u6267\\u884C\\u7C7B\\u578B\\u8F6C\\u6362\\uFF0C\\u56E0\\u6B64\\u5982\\u679C\\u7C7B\\u578B\\u4E0D\\u540C\\uFF0C\\u8BE5\\u8BED\\u53E5\\u5C06\\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:\"false\"}),\"\\u3002\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"42 === '42'\"}),\" \\u4E3A \",(0,n.jsx)(e.code,{children:\"false\"}),\"\\uFF0C\\u56E0\\u4E3A\\u7C7B\\u578B\\uFF08\\u6570\\u5B57\\u548C\\u5B57\\u7B26\\u4E32\\uFF09\\u4E0D\\u540C\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u5E26\\u6709\\u7C7B\\u578B\\u8F6C\\u6362\\u7684\\u6BD4\\u8F83 (==)\nconsole.log(42 == '42'); // true\nconsole.log(0 == false); // true\nconsole.log(null == undefined); // true\n\n// \\u4E0D\\u5E26\\u7C7B\\u578B\\u8F6C\\u6362\\u7684\\u4E25\\u683C\\u6BD4\\u8F83 (===)\nconsole.log(42 === '42'); // false\nconsole.log(0 === false); // false\nconsole.log(null === undefined); // false\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u989D\\u5916\\u5185\\u5BB9\\uFF1A\",(0,n.jsx)(e.code,{children:\"Object.is()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u6700\\u540E\\u4E00\\u4E2A\\u503C\\u6BD4\\u8F83\\u64CD\\u4F5C\\u662F \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is\",children:(0,n.jsx)(e.code,{children:\"Object.is()\"})}),\" \\u9759\\u6001\\u65B9\\u6CD5\\u3002\",(0,n.jsx)(e.code,{children:\"Object.is()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"===\"}),\" \\u4E4B\\u95F4\\u552F\\u4E00\\u7684\\u533A\\u522B\\u5728\\u4E8E\\u5B83\\u4EEC\\u5982\\u4F55\\u5904\\u7406\\u5E26\\u7B26\\u53F7\\u7684\\u96F6\\u548C \",(0,n.jsx)(e.code,{children:\"NaN\"}),\" \\u503C\\u3002\",(0,n.jsx)(e.code,{children:\"===\"}),\" \\u8FD0\\u7B97\\u7B26\\uFF08\\u548C \",(0,n.jsx)(e.code,{children:\"==\"}),\" \\u8FD0\\u7B97\\u7B26\\uFF09\\u5C06\\u6570\\u5B57\\u503C \",(0,n.jsx)(e.code,{children:\"-0\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"+0\"}),\" \\u89C6\\u4E3A\\u76F8\\u7B49\\uFF0C\\u4F46\\u5C06 \",(0,n.jsx)(e.code,{children:\"NaN\"}),\" \\u89C6\\u4E3A\\u5F7C\\u6B64\\u4E0D\\u76F8\\u7B49\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7ED3\\u8BBA\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5F53\\u60A8\\u5E0C\\u671B\\u901A\\u8FC7\\u7C7B\\u578B\\u8F6C\\u6362\\u6BD4\\u8F83\\u503C\\uFF08\\u5E76\\u4E86\\u89E3\\u5176\\u542B\\u4E49\\uFF09\\u65F6\\uFF0C\\u8BF7\\u4F7F\\u7528\",(0,n.jsx)(e.code,{children:\"==\"}),\"\\u3002 \\u5B9E\\u9645\\u4E0A\\uFF0C\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26\\u7684\\u552F\\u4E00\\u5408\\u7406\\u7528\\u4F8B\\u662F\\u5728\\u5355\\u4E2A\\u6BD4\\u8F83\\u4E2D\\u540C\\u65F6\\u68C0\\u67E5\",(0,n.jsx)(e.code,{children:\"null\"}),\"\\u548C\",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u4EE5\\u65B9\\u4FBF\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5F53\\u60A8\\u5E0C\\u671B\\u786E\\u4FDD\\u503C\\u548C\\u7C7B\\u578B\\u90FD\\u76F8\\u540C\\u65F6\\uFF0C\\u8BF7\\u4F7F\\u7528\",(0,n.jsx)(e.code,{children:\"===\"}),\"\\uFF0C\\u8FD9\\u5728\\u5927\\u591A\\u6570\\u60C5\\u51B5\\u4E0B\\u662F\\u66F4\\u5B89\\u5168\\u3001\\u66F4\\u53EF\\u9884\\u6D4B\\u7684\\u9009\\u62E9\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7B14\\u8BB0\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5EFA\\u8BAE\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"===\"}),\"\\uFF08\\u4E25\\u683C\\u76F8\\u7B49\\uFF09\\u4EE5\\u907F\\u514D\\u7C7B\\u578B\\u5F3A\\u5236\\u8F6C\\u6362\\u7684\\u7F3A\\u9677\\uFF0C\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u4EE3\\u7801\\u4E2D\\u51FA\\u73B0\\u610F\\u5916\\u884C\\u4E3A\\u548C\\u9519\\u8BEF\\u3002\\u5B83\\u4F7F\\u60A8\\u7684\\u6BD4\\u8F83\\u610F\\u56FE\\u66F4\\u6E05\\u6670\\uFF0C\\u5E76\\u786E\\u4FDD\\u60A8\\u540C\\u65F6\\u6BD4\\u8F83\\u503C\\u548C\\u7C7B\\u578B\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"ESLint \\u7684 \",(0,n.jsx)(e.a,{href:\"https://eslint.org/docs/latest/rules/eqeqeq\",children:(0,n.jsx)(e.code,{children:\"eqeqeq\"})}),\" \\u89C4\\u5219\\u5F3A\\u5236\\u4F7F\\u7528\\u4E25\\u683C\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26 \",(0,n.jsx)(e.code,{children:\"===\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"!==\"}),\"\\uFF0C\\u751A\\u81F3\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u9009\\u9879\\uFF0C\\u59CB\\u7EC8\\u5F3A\\u5236\\u4F7F\\u7528\\u4E25\\u683C\\u76F8\\u7B49\\uFF0C\\u9664\\u975E\\u4E0E \",(0,n.jsx)(e.code,{children:\"null\"}),\" \\u5B57\\u9762\\u91CF\\u8FDB\\u884C\\u6BD4\\u8F83\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Operators/Equality\",children:\"Equality (==) | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality\",children:\"Strict equality (===) | MDN\"})}),`\n`]})]})}function N(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(a,l)})):a(l)}var q=N;return v(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var v=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),b=(l,e)=>{for(var c in e)r(l,c,{get:e[c],enumerable:!0})},i=(l,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of g(e))!m.call(l,d)&&d!==c&&r(l,d,{get:()=>e[d],enumerable:!(o=f(e,d))||o.enumerable});return l};var j=(l,e,c)=>(c=l!=null?u(p(l)):{},i(e||!l||!l.__esModule?r(c,\"default\",{value:l,enumerable:!0}):c,l)),S=l=>i(r({},\"__esModule\",{value:!0}),l);var t=v((_,h)=>{h.exports=_jsx_runtime});var q={};b(q,{default:()=>s,frontmatter:()=>N});var n=j(t()),N={title:\"JavaScript \\u4E2D `==` \\u548C `===` \\u7684\\u533A\\u522B\\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(l){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"==\"}),\" \\u662F\\u62BD\\u8C61\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"===\"}),\" \\u662F\\u4E25\\u683C\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26\\u3002\",(0,n.jsx)(e.code,{children:\"==\"}),\" \\u8FD0\\u7B97\\u7B26\\u4F1A\\u5728\\u8FDB\\u884C\\u4EFB\\u4F55\\u5FC5\\u8981\\u7684\\u7C7B\\u578B\\u8F6C\\u6362\\u540E\\u6BD4\\u8F83\\u662F\\u5426\\u76F8\\u7B49\\u3002\",(0,n.jsx)(e.code,{children:\"===\"}),\" \\u8FD0\\u7B97\\u7B26\\u4E0D\\u4F1A\\u8FDB\\u884C\\u7C7B\\u578B\\u8F6C\\u6362\\uFF0C\\u56E0\\u6B64\\u5982\\u679C\\u4E24\\u4E2A\\u503C\\u4E0D\\u662F\\u540C\\u4E00\\u7C7B\\u578B\\uFF0C\",(0,n.jsx)(e.code,{children:\"===\"}),\" \\u5C06\\u76F4\\u63A5\\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:\"false\"}),\"\\u3002\"]}),`\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:\"\\u8FD0\\u7B97\\u7B26\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"==\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"===\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u540D\\u79F0\"}),(0,n.jsx)(e.td,{children:\"\\uFF08\\u5BBD\\u677E\\uFF09\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26\"}),(0,n.jsx)(e.td,{children:\"\\u4E25\\u683C\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u7C7B\\u578B\\u8F6C\\u6362\"}),(0,n.jsx)(e.td,{children:\"\\u662F\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u6BD4\\u8F83\\u503C\\u548C\\u7C7B\\u578B\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"}),(0,n.jsx)(e.td,{children:\"\\u662F\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26 (\",(0,n.jsx)(e.code,{children:\"==\"}),\")\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"==\"}),\" \\u8FD0\\u7B97\\u7B26\\u68C0\\u67E5\\u4E24\\u4E2A\\u503C\\u662F\\u5426\\u76F8\\u7B49\\uFF0C\\u4F46\\u5982\\u679C\\u8FD9\\u4E9B\\u503C\\u7684\\u7C7B\\u578B\\u4E0D\\u540C\\uFF0C\\u5219\\u4F1A\\u6267\\u884C\\u7C7B\\u578B\\u8F6C\\u6362\\u3002\\u8FD9\\u610F\\u5473\\u7740 JavaScript \\u5C06\\u5C1D\\u8BD5\\u5728\\u8FDB\\u884C\\u6BD4\\u8F83\\u4E4B\\u524D\\u5C06\\u8FD9\\u4E9B\\u503C\\u8F6C\\u6362\\u4E3A\\u901A\\u7528\\u7C7B\\u578B\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(42 == '42'); // true\nconsole.log(0 == false); // true\nconsole.log(null == undefined); // true\nconsole.log([] == false); // true\nconsole.log('' == false); // true\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u8FD9\\u4E9B\\u793A\\u4F8B\\u4E2D\\uFF0CJavaScript \\u5728\\u8FDB\\u884C\\u6BD4\\u8F83\\u4E4B\\u524D\\u5C06\\u64CD\\u4F5C\\u6570\\u8F6C\\u6362\\u4E3A\\u76F8\\u540C\\u7684\\u7C7B\\u578B\\u3002\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"42 == '42'\"}),\" \\u4E3A true\\uFF0C\\u56E0\\u4E3A\\u5B57\\u7B26\\u4E32 \",(0,n.jsx)(e.code,{children:\"'42'\"}),\" \\u5728\\u6BD4\\u8F83\\u4E4B\\u524D\\u88AB\\u8F6C\\u6362\\u4E3A\\u6570\\u5B57 \",(0,n.jsx)(e.code,{children:\"42\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F46\\u662F\\uFF0C\\u5F53\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"==\"}),\" \\u65F6\\uFF0C\\u53EF\\u80FD\\u4F1A\\u53D1\\u751F\\u4E0D\\u76F4\\u89C2\\u7684\\u7ED3\\u679C\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(1 == [1]); // true\nconsole.log(0 == ''); // true\nconsole.log(0 == '0'); // true\nconsole.log('' == '0'); // false\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4F5C\\u4E3A\\u4E00\\u822C\\u7ECF\\u9A8C\\u6CD5\\u5219\\uFF0C\\u6C38\\u8FDC\\u4E0D\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"==\"}),\" \\u8FD0\\u7B97\\u7B26\\uFF0C\\u9664\\u975E\\u4E3A\\u4E86\\u65B9\\u4FBF\\u4E0E \",(0,n.jsx)(e.code,{children:\"null\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" \\u8FDB\\u884C\\u6BD4\\u8F83\\uFF0C\\u5176\\u4E2D \",(0,n.jsx)(e.code,{children:\"a == null\"}),\" \\u5C06\\u5728 \",(0,n.jsx)(e.code,{children:\"a\"}),\" \\u4E3A \",(0,n.jsx)(e.code,{children:\"null\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" \\u65F6\\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var a = null;\nconsole.log(a == null); // true\nconsole.log(a == undefined); // true\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4E25\\u683C\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26 (\",(0,n.jsx)(e.code,{children:\"===\"}),\")\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"===\"}),\" \\u8FD0\\u7B97\\u7B26\\uFF0C\\u4E5F\\u79F0\\u4E3A\\u4E25\\u683C\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26\\uFF0C\\u68C0\\u67E5\\u4E24\\u4E2A\\u503C\\u662F\\u5426\\u76F8\\u7B49\\uFF0C\\u800C\\u4E0D\\u6267\\u884C\\u7C7B\\u578B\\u8F6C\\u6362\\u3002\\u8FD9\\u610F\\u5473\\u7740\\uFF0C\\u53EA\\u6709\\u5F53\\u503C\\u548C\\u7C7B\\u578B\\u90FD\\u76F8\\u540C\\u65F6\\uFF0C\\u6BD4\\u8F83\\u624D\\u4F1A\\u8FD4\\u56DE true\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(42 === '42'); // false\nconsole.log(0 === false); // false\nconsole.log(null === undefined); // false\nconsole.log([] === false); // false\nconsole.log('' === false); // false\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5BF9\\u4E8E\\u8FD9\\u4E9B\\u6BD4\\u8F83\\uFF0C\\u4E0D\\u6267\\u884C\\u7C7B\\u578B\\u8F6C\\u6362\\uFF0C\\u56E0\\u6B64\\u5982\\u679C\\u7C7B\\u578B\\u4E0D\\u540C\\uFF0C\\u8BE5\\u8BED\\u53E5\\u5C06\\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:\"false\"}),\"\\u3002\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"42 === '42'\"}),\" \\u4E3A \",(0,n.jsx)(e.code,{children:\"false\"}),\"\\uFF0C\\u56E0\\u4E3A\\u7C7B\\u578B\\uFF08\\u6570\\u5B57\\u548C\\u5B57\\u7B26\\u4E32\\uFF09\\u4E0D\\u540C\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u5E26\\u6709\\u7C7B\\u578B\\u8F6C\\u6362\\u7684\\u6BD4\\u8F83 (==)\nconsole.log(42 == '42'); // true\nconsole.log(0 == false); // true\nconsole.log(null == undefined); // true\n\n// \\u4E0D\\u5E26\\u7C7B\\u578B\\u8F6C\\u6362\\u7684\\u4E25\\u683C\\u6BD4\\u8F83 (===)\nconsole.log(42 === '42'); // false\nconsole.log(0 === false); // false\nconsole.log(null === undefined); // false\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u989D\\u5916\\u5185\\u5BB9\\uFF1A\",(0,n.jsx)(e.code,{children:\"Object.is()\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u6700\\u540E\\u4E00\\u4E2A\\u503C\\u6BD4\\u8F83\\u64CD\\u4F5C\\u662F \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is\",children:(0,n.jsx)(e.code,{children:\"Object.is()\"})}),\" \\u9759\\u6001\\u65B9\\u6CD5\\u3002\",(0,n.jsx)(e.code,{children:\"Object.is()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"===\"}),\" \\u4E4B\\u95F4\\u552F\\u4E00\\u7684\\u533A\\u522B\\u5728\\u4E8E\\u5B83\\u4EEC\\u5982\\u4F55\\u5904\\u7406\\u5E26\\u7B26\\u53F7\\u7684\\u96F6\\u548C \",(0,n.jsx)(e.code,{children:\"NaN\"}),\" \\u503C\\u3002\",(0,n.jsx)(e.code,{children:\"===\"}),\" \\u8FD0\\u7B97\\u7B26\\uFF08\\u548C \",(0,n.jsx)(e.code,{children:\"==\"}),\" \\u8FD0\\u7B97\\u7B26\\uFF09\\u5C06\\u6570\\u5B57\\u503C \",(0,n.jsx)(e.code,{children:\"-0\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"+0\"}),\" \\u89C6\\u4E3A\\u76F8\\u7B49\\uFF0C\\u4F46\\u5C06 \",(0,n.jsx)(e.code,{children:\"NaN\"}),\" \\u89C6\\u4E3A\\u5F7C\\u6B64\\u4E0D\\u76F8\\u7B49\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7ED3\\u8BBA\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5F53\\u60A8\\u5E0C\\u671B\\u901A\\u8FC7\\u7C7B\\u578B\\u8F6C\\u6362\\u6BD4\\u8F83\\u503C\\uFF08\\u5E76\\u4E86\\u89E3\\u5176\\u542B\\u4E49\\uFF09\\u65F6\\uFF0C\\u8BF7\\u4F7F\\u7528\",(0,n.jsx)(e.code,{children:\"==\"}),\"\\u3002 \\u5B9E\\u9645\\u4E0A\\uFF0C\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26\\u7684\\u552F\\u4E00\\u5408\\u7406\\u7528\\u4F8B\\u662F\\u5728\\u5355\\u4E2A\\u6BD4\\u8F83\\u4E2D\\u540C\\u65F6\\u68C0\\u67E5\",(0,n.jsx)(e.code,{children:\"null\"}),\"\\u548C\",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u4EE5\\u65B9\\u4FBF\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5F53\\u60A8\\u5E0C\\u671B\\u786E\\u4FDD\\u503C\\u548C\\u7C7B\\u578B\\u90FD\\u76F8\\u540C\\u65F6\\uFF0C\\u8BF7\\u4F7F\\u7528\",(0,n.jsx)(e.code,{children:\"===\"}),\"\\uFF0C\\u8FD9\\u5728\\u5927\\u591A\\u6570\\u60C5\\u51B5\\u4E0B\\u662F\\u66F4\\u5B89\\u5168\\u3001\\u66F4\\u53EF\\u9884\\u6D4B\\u7684\\u9009\\u62E9\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7B14\\u8BB0\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5EFA\\u8BAE\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"===\"}),\"\\uFF08\\u4E25\\u683C\\u76F8\\u7B49\\uFF09\\u4EE5\\u907F\\u514D\\u7C7B\\u578B\\u5F3A\\u5236\\u8F6C\\u6362\\u7684\\u7F3A\\u9677\\uFF0C\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u4EE3\\u7801\\u4E2D\\u51FA\\u73B0\\u610F\\u5916\\u884C\\u4E3A\\u548C\\u9519\\u8BEF\\u3002\\u5B83\\u4F7F\\u60A8\\u7684\\u6BD4\\u8F83\\u610F\\u56FE\\u66F4\\u6E05\\u6670\\uFF0C\\u5E76\\u786E\\u4FDD\\u60A8\\u540C\\u65F6\\u6BD4\\u8F83\\u503C\\u548C\\u7C7B\\u578B\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"ESLint \\u7684 \",(0,n.jsx)(e.a,{href:\"https://eslint.org/docs/latest/rules/eqeqeq\",children:(0,n.jsx)(e.code,{children:\"eqeqeq\"})}),\" \\u89C4\\u5219\\u5F3A\\u5236\\u4F7F\\u7528\\u4E25\\u683C\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26 \",(0,n.jsx)(e.code,{children:\"===\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"!==\"}),\"\\uFF0C\\u751A\\u81F3\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u9009\\u9879\\uFF0C\\u59CB\\u7EC8\\u5F3A\\u5236\\u4F7F\\u7528\\u4E25\\u683C\\u76F8\\u7B49\\uFF0C\\u9664\\u975E\\u4E0E \",(0,n.jsx)(e.code,{children:\"null\"}),\" \\u5B57\\u9762\\u91CF\\u8FDB\\u884C\\u6BD4\\u8F83\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Operators/Equality\",children:\"Equality (==) | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality\",children:\"Strict equality (===) | MDN\"})}),`\n`]})]})}function s(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(a,{...l})}):a(l)}return S(q);})();\n;return Component;"
 }
\ No newline at end of file
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 3ae684aaa..4834da024 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},l=(t,e,r,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of v(e))!f.call(t,i)&&i!==r&&o(t,i,{get:()=>e[i],enumerable:!(a=p(e,i))||a.enumerable});return t};var b=(t,e,r)=>(r=t!=null?d(u(t)):{},l(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),D=t=>l(o({},\"__esModule\",{value:!0}),t);var h=m((_,c)=>{c.exports=_jsx_runtime});var j={};g(j,{default:()=>x,frontmatter:()=>w});var n=b(h()),w={title:\"What is the difference between `event.preventDefault()` and `event.stopPropagation()`?\"};function s(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:[(0,n.jsx)(e.code,{children:\"event.preventDefault()\"}),\" is used to prevent the default action that belongs to the event, such as preventing a form from submitting. \",(0,n.jsx)(e.code,{children:\"event.stopPropagation()\"}),\" is used to stop the event from bubbling up to parent elements, preventing any parent event handlers from being executed.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is the difference between \",(0,n.jsx)(e.code,{children:\"event.preventDefault()\"}),\" and \",(0,n.jsx)(e.code,{children:\"event.stopPropagation()\"}),\"?\"]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"event.preventDefault()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"event.preventDefault()\"}),\" is a method that cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur. For example, this can be used to prevent a form from being submitted:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.querySelector('form').addEventListener('submit', function (event) {\n  event.preventDefault();\n  // Form submission is prevented\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"event.stopPropagation()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"event.stopPropagation()\"}),\" is a method that prevents the event from bubbling up the DOM tree, stopping any parent handlers from being notified of the event. This is useful when you want to handle an event at a specific level and do not want it to trigger handlers on parent elements:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.querySelector('.child').addEventListener('click', function (event) {\n  event.stopPropagation();\n  // Click event will not propagate to parent elements\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Key differences\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"event.preventDefault()\"}),\" stops the default action associated with the event.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"event.stopPropagation()\"}),\" stops the event from propagating (bubbling) up to parent elements.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"event.preventDefault()\"}),\" when you want to prevent the default behavior of an element, such as preventing a link from navigating or a form from submitting.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"event.stopPropagation()\"}),\" when you want to prevent an event from reaching parent elements, which can be useful in complex UIs where multiple elements have event listeners.\"]}),`\n`]}),`\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/Web/API/Event/preventDefault\",children:\"MDN Web Docs: event.preventDefault()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation\",children:\"MDN Web Docs: event.stopPropagation()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/bubbling-and-capturing\",children:\"JavaScript Event Propagation\"})}),`\n`]})]})}function P(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(s,t)})):s(t)}var x=P;return D(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},l=(t,e,r,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!m.call(t,o)&&o!==r&&i(t,o,{get:()=>e[o],enumerable:!(a=v(e,o))||a.enumerable});return t};var D=(t,e,r)=>(r=t!=null?p(f(t)):{},l(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),w=t=>l(i({},\"__esModule\",{value:!0}),t);var h=g((j,c)=>{c.exports=_jsx_runtime});var x={};b(x,{default:()=>d,frontmatter:()=>P});var n=D(h()),P={title:\"What is the difference between `event.preventDefault()` and `event.stopPropagation()`?\"};function s(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"event.preventDefault()\"}),\" is used to prevent the default action that belongs to the event, such as preventing a form from submitting. \",(0,n.jsx)(e.code,{children:\"event.stopPropagation()\"}),\" is used to stop the event from bubbling up to parent elements, preventing any parent event handlers from being executed.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is the difference between \",(0,n.jsx)(e.code,{children:\"event.preventDefault()\"}),\" and \",(0,n.jsx)(e.code,{children:\"event.stopPropagation()\"}),\"?\"]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"event.preventDefault()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"event.preventDefault()\"}),\" is a method that cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur. For example, this can be used to prevent a form from being submitted:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.querySelector('form').addEventListener('submit', function (event) {\n  event.preventDefault();\n  // Form submission is prevented\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"event.stopPropagation()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"event.stopPropagation()\"}),\" is a method that prevents the event from bubbling up the DOM tree, stopping any parent handlers from being notified of the event. This is useful when you want to handle an event at a specific level and do not want it to trigger handlers on parent elements:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.querySelector('.child').addEventListener('click', function (event) {\n  event.stopPropagation();\n  // Click event will not propagate to parent elements\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Key differences\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"event.preventDefault()\"}),\" stops the default action associated with the event.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"event.stopPropagation()\"}),\" stops the event from propagating (bubbling) up to parent elements.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"event.preventDefault()\"}),\" when you want to prevent the default behavior of an element, such as preventing a link from navigating or a form from submitting.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"event.stopPropagation()\"}),\" when you want to prevent an event from reaching parent elements, which can be useful in complex UIs where multiple elements have event listeners.\"]}),`\n`]}),`\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/Web/API/Event/preventDefault\",children:\"MDN Web Docs: event.preventDefault()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation\",children:\"MDN Web Docs: event.stopPropagation()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/bubbling-and-capturing\",children:\"JavaScript Event Propagation\"})}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(s,{...t})}):s(t)}return w(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/zh-CN.json
index 84ceff800..021aa5791 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/zh-CN.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),m=(t,e)=>{for(var r in e)l(t,r,{get:e[r],enumerable:!0})},c=(t,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of v(e))!g.call(t,i)&&i!==r&&l(t,i,{get:()=>e[i],enumerable:!(o=s(e,i))||o.enumerable});return t};var D=(t,e,r)=>(r=t!=null?p(u(t)):{},c(e||!t||!t.__esModule?l(r,\"default\",{value:t,enumerable:!0}):r,t)),P=t=>c(l({},\"__esModule\",{value:!0}),t);var d=f((S,a)=>{a.exports=_jsx_runtime});var _={};m(_,{default:()=>x,frontmatter:()=>b});var n=D(d()),b={title:\"event.preventDefault() \\u548C event.stopPropagation() \\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",pre:\"pre\",code:\"code\",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:[(0,n.jsx)(\"code\",{children:\"event.preventDefault()\"}),\" \\u7528\\u4E8E\\u963B\\u6B62\\u5C5E\\u4E8E\\u8BE5\\u4E8B\\u4EF6\\u7684\\u9ED8\\u8BA4\\u64CD\\u4F5C\\uFF0C\\u4F8B\\u5982\\u963B\\u6B62\\u8868\\u5355\\u63D0\\u4EA4\\u3002\",(0,n.jsx)(\"code\",{children:\"event.stopPropagation()\"}),\" \\u7528\\u4E8E\\u963B\\u6B62\\u4E8B\\u4EF6\\u5192\\u6CE1\\u5230\\u7236\\u5143\\u7D20\\uFF0C\\u4ECE\\u800C\\u963B\\u6B62\\u4EFB\\u4F55\\u7236\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u88AB\\u6267\\u884C\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"event.preventDefault() \\u548C event.stopPropagation() \\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"event.preventDefault()\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(\"code\",{children:\"event.preventDefault()\"}),\" \\u662F\\u4E00\\u79CD\\u65B9\\u6CD5\\uFF0C\\u5982\\u679C\\u4E8B\\u4EF6\\u662F\\u53EF\\u53D6\\u6D88\\u7684\\uFF0C\\u5219\\u53D6\\u6D88\\u8BE5\\u4E8B\\u4EF6\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5C5E\\u4E8E\\u8BE5\\u4E8B\\u4EF6\\u7684\\u9ED8\\u8BA4\\u64CD\\u4F5C\\u5C06\\u4E0D\\u4F1A\\u53D1\\u751F\\u3002\\u4F8B\\u5982\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u7528\\u4E8E\\u963B\\u6B62\\u8868\\u5355\\u63D0\\u4EA4\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.querySelector('form').addEventListener('submit', function (event) {\n  event.preventDefault();\n  // Form submission is prevented\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"event.stopPropagation()\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(\"code\",{children:\"event.stopPropagation()\"}),\" \\u662F\\u4E00\\u79CD\\u65B9\\u6CD5\\uFF0C\\u53EF\\u9632\\u6B62\\u4E8B\\u4EF6\\u5728 DOM \\u6811\\u4E2D\\u5192\\u6CE1\\uFF0C\\u4ECE\\u800C\\u963B\\u6B62\\u4EFB\\u4F55\\u7236\\u5904\\u7406\\u7A0B\\u5E8F\\u6536\\u5230\\u8BE5\\u4E8B\\u4EF6\\u7684\\u901A\\u77E5\\u3002\\u5F53\\u60A8\\u5E0C\\u671B\\u5728\\u7279\\u5B9A\\u7EA7\\u522B\\u5904\\u7406\\u4E8B\\u4EF6\\u5E76\\u4E14\\u4E0D\\u5E0C\\u671B\\u5B83\\u89E6\\u53D1\\u7236\\u5143\\u7D20\\u4E0A\\u7684\\u5904\\u7406\\u7A0B\\u5E8F\\u65F6\\uFF0C\\u8FD9\\u5F88\\u6709\\u7528\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.querySelector('.child').addEventListener('click', function (event) {\n  event.stopPropagation();\n  // Click event will not propagate to parent elements\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5173\\u952E\\u533A\\u522B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"code\",{children:\"event.preventDefault()\"}),\" \\u505C\\u6B62\\u4E0E\\u4E8B\\u4EF6\\u5173\\u8054\\u7684\\u9ED8\\u8BA4\\u64CD\\u4F5C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"code\",{children:\"event.stopPropagation()\"}),\" \\u963B\\u6B62\\u4E8B\\u4EF6\\u4F20\\u64AD\\uFF08\\u5192\\u6CE1\\uFF09\\u5230\\u7236\\u5143\\u7D20\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5F53\\u60A8\\u60F3\\u963B\\u6B62\\u5143\\u7D20\\u7684\\u9ED8\\u8BA4\\u884C\\u4E3A\\u65F6\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,n.jsx)(\"code\",{children:\"event.preventDefault()\"}),\"\\uFF0C\\u4F8B\\u5982\\u963B\\u6B62\\u94FE\\u63A5\\u5BFC\\u822A\\u6216\\u8868\\u5355\\u63D0\\u4EA4\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5F53\\u60A8\\u60F3\\u963B\\u6B62\\u4E8B\\u4EF6\\u5230\\u8FBE\\u7236\\u5143\\u7D20\\u65F6\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,n.jsx)(\"code\",{children:\"event.stopPropagation()\"}),\"\\uFF0C\\u8FD9\\u5728\\u591A\\u4E2A\\u5143\\u7D20\\u5177\\u6709\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u7684\\u590D\\u6742 UI \\u4E2D\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Event/preventDefault\",children:\"MDN Web \\u6587\\u6863\\uFF1Aevent.preventDefault()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation\",children:\"MDN Web \\u6587\\u6863\\uFF1Aevent.stopPropagation()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/bubbling-and-capturing\",children:\"JavaScript \\u4E8B\\u4EF6\\u4F20\\u64AD\"})}),`\n`]})]})}function j(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var x=j;return P(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),D=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},c=(t,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of u(e))!g.call(t,l)&&l!==r&&i(t,l,{get:()=>e[l],enumerable:!(o=v(e,l))||o.enumerable});return t};var P=(t,e,r)=>(r=t!=null?s(f(t)):{},c(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),b=t=>c(i({},\"__esModule\",{value:!0}),t);var d=m((M,a)=>{a.exports=_jsx_runtime});var j={};D(j,{default:()=>p,frontmatter:()=>x});var n=P(d()),x={title:\"event.preventDefault() \\u548C event.stopPropagation() \\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(\"code\",{children:\"event.preventDefault()\"}),\" \\u7528\\u4E8E\\u963B\\u6B62\\u5C5E\\u4E8E\\u8BE5\\u4E8B\\u4EF6\\u7684\\u9ED8\\u8BA4\\u64CD\\u4F5C\\uFF0C\\u4F8B\\u5982\\u963B\\u6B62\\u8868\\u5355\\u63D0\\u4EA4\\u3002\",(0,n.jsx)(\"code\",{children:\"event.stopPropagation()\"}),\" \\u7528\\u4E8E\\u963B\\u6B62\\u4E8B\\u4EF6\\u5192\\u6CE1\\u5230\\u7236\\u5143\\u7D20\\uFF0C\\u4ECE\\u800C\\u963B\\u6B62\\u4EFB\\u4F55\\u7236\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u88AB\\u6267\\u884C\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"event.preventDefault() \\u548C event.stopPropagation() \\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"event.preventDefault()\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(\"code\",{children:\"event.preventDefault()\"}),\" \\u662F\\u4E00\\u79CD\\u65B9\\u6CD5\\uFF0C\\u5982\\u679C\\u4E8B\\u4EF6\\u662F\\u53EF\\u53D6\\u6D88\\u7684\\uFF0C\\u5219\\u53D6\\u6D88\\u8BE5\\u4E8B\\u4EF6\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5C5E\\u4E8E\\u8BE5\\u4E8B\\u4EF6\\u7684\\u9ED8\\u8BA4\\u64CD\\u4F5C\\u5C06\\u4E0D\\u4F1A\\u53D1\\u751F\\u3002\\u4F8B\\u5982\\uFF0C\\u8FD9\\u53EF\\u4EE5\\u7528\\u4E8E\\u963B\\u6B62\\u8868\\u5355\\u63D0\\u4EA4\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.querySelector('form').addEventListener('submit', function (event) {\n  event.preventDefault();\n  // Form submission is prevented\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"event.stopPropagation()\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(\"code\",{children:\"event.stopPropagation()\"}),\" \\u662F\\u4E00\\u79CD\\u65B9\\u6CD5\\uFF0C\\u53EF\\u9632\\u6B62\\u4E8B\\u4EF6\\u5728 DOM \\u6811\\u4E2D\\u5192\\u6CE1\\uFF0C\\u4ECE\\u800C\\u963B\\u6B62\\u4EFB\\u4F55\\u7236\\u5904\\u7406\\u7A0B\\u5E8F\\u6536\\u5230\\u8BE5\\u4E8B\\u4EF6\\u7684\\u901A\\u77E5\\u3002\\u5F53\\u60A8\\u5E0C\\u671B\\u5728\\u7279\\u5B9A\\u7EA7\\u522B\\u5904\\u7406\\u4E8B\\u4EF6\\u5E76\\u4E14\\u4E0D\\u5E0C\\u671B\\u5B83\\u89E6\\u53D1\\u7236\\u5143\\u7D20\\u4E0A\\u7684\\u5904\\u7406\\u7A0B\\u5E8F\\u65F6\\uFF0C\\u8FD9\\u5F88\\u6709\\u7528\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`document.querySelector('.child').addEventListener('click', function (event) {\n  event.stopPropagation();\n  // Click event will not propagate to parent elements\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5173\\u952E\\u533A\\u522B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"code\",{children:\"event.preventDefault()\"}),\" \\u505C\\u6B62\\u4E0E\\u4E8B\\u4EF6\\u5173\\u8054\\u7684\\u9ED8\\u8BA4\\u64CD\\u4F5C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"code\",{children:\"event.stopPropagation()\"}),\" \\u963B\\u6B62\\u4E8B\\u4EF6\\u4F20\\u64AD\\uFF08\\u5192\\u6CE1\\uFF09\\u5230\\u7236\\u5143\\u7D20\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5F53\\u60A8\\u60F3\\u963B\\u6B62\\u5143\\u7D20\\u7684\\u9ED8\\u8BA4\\u884C\\u4E3A\\u65F6\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,n.jsx)(\"code\",{children:\"event.preventDefault()\"}),\"\\uFF0C\\u4F8B\\u5982\\u963B\\u6B62\\u94FE\\u63A5\\u5BFC\\u822A\\u6216\\u8868\\u5355\\u63D0\\u4EA4\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5F53\\u60A8\\u60F3\\u963B\\u6B62\\u4E8B\\u4EF6\\u5230\\u8FBE\\u7236\\u5143\\u7D20\\u65F6\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,n.jsx)(\"code\",{children:\"event.stopPropagation()\"}),\"\\uFF0C\\u8FD9\\u5728\\u591A\\u4E2A\\u5143\\u7D20\\u5177\\u6709\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u7684\\u590D\\u6742 UI \\u4E2D\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Event/preventDefault\",children:\"MDN Web \\u6587\\u6863\\uFF1Aevent.preventDefault()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation\",children:\"MDN Web \\u6587\\u6863\\uFF1Aevent.stopPropagation()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/bubbling-and-capturing\",children:\"JavaScript \\u4E8B\\u4EF6\\u4F20\\u64AD\"})}),`\n`]})]})}function p(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return b(j);})();\n;return Component;"
 }
\ No newline at end of file
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 0b07dd018..90a0e452f 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-innerhtml-and-textcontent/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),T=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},l=(t,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!u.call(t,i)&&i!==r&&o(t,i,{get:()=>e[i],enumerable:!(s=g(e,i))||s.enumerable});return t};var f=(t,e,r)=>(r=t!=null?h(m(t)):{},l(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),M=t=>l(o({},\"__esModule\",{value:!0}),t);var a=x((b,d)=>{d.exports=_jsx_runtime});var w={};T(w,{default:()=>y,frontmatter:()=>L});var n=f(a()),L={title:\"What is the difference between `innerHTML` and `textContent`?\"};function c(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",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:[(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" and \",(0,n.jsx)(e.code,{children:\"textContent\"}),\" are both properties used to get or set the content of an HTML element, but they serve different purposes. \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" returns or sets the HTML markup contained within the element, which means it can parse and render HTML tags. On the other hand, \",(0,n.jsx)(e.code,{children:\"textContent\"}),\" returns or sets the text content of the element, ignoring any HTML tags and rendering them as plain text.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of innerHTML\nelement.innerHTML = '<strong>Bold Text</strong>'; // Renders as bold text\n\n// Example of textContent\nelement.textContent = '<strong>Bold Text</strong>'; // Renders as plain text: <strong>Bold Text</strong>\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Difference between \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" and \",(0,n.jsx)(e.code,{children:\"textContent\"})]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"innerHTML\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" is a property that allows you to get or set the HTML markup contained within an element. It can parse and render HTML tags, making it useful for dynamically updating the structure of a webpage.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const element = document.getElementById('example');\nelement.innerHTML = '<strong>Bold Text</strong>'; // This will render as bold text\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Dynamically adding or updating HTML content\"}),`\n`,(0,n.jsx)(e.li,{children:\"Rendering HTML tags and elements\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Security considerations\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" can expose your application to Cross-Site Scripting (XSS) attacks if you insert untrusted content. Always sanitize any user input before setting it as \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\".\"]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"textContent\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"textContent\"}),\" is a property that allows you to get or set the text content of an element. It ignores any HTML tags and renders them as plain text, making it safer for inserting user-generated content.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const element = document.getElementById('example');\nelement.textContent = '<strong>Bold Text</strong>'; // This will render as plain text: <strong>Bold Text</strong>\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Safely inserting user-generated content\"}),`\n`,(0,n.jsx)(e.li,{children:\"Stripping HTML tags from a string\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Performance considerations\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"textContent\"}),\" is generally faster than \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" because it does not parse and render HTML tags. It simply updates the text content of the element.\"]}),`\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/Web/API/Element/innerHTML\",children:\"MDN Web Docs: innerHTML\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent\",children:\"MDN Web Docs: textContent\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://owasp.org/www-community/attacks/xss/\",children:\"Cross-Site Scripting (XSS)\"})}),`\n`]})]})}function H(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(c,t)})):c(t)}var y=H;return M(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var g=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var T=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},s=(t,e,r,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!x.call(t,i)&&i!==r&&o(t,i,{get:()=>e[i],enumerable:!(l=p(e,i))||l.enumerable});return t};var M=(t,e,r)=>(r=t!=null?g(u(t)):{},s(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),L=t=>s(o({},\"__esModule\",{value:!0}),t);var a=T((C,d)=>{d.exports=_jsx_runtime});var y={};f(y,{default:()=>h,frontmatter:()=>H});var n=M(a()),H={title:\"What is the difference between `innerHTML` and `textContent`?\"};function c(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" and \",(0,n.jsx)(e.code,{children:\"textContent\"}),\" are both properties used to get or set the content of an HTML element, but they serve different purposes. \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" returns or sets the HTML markup contained within the element, which means it can parse and render HTML tags. On the other hand, \",(0,n.jsx)(e.code,{children:\"textContent\"}),\" returns or sets the text content of the element, ignoring any HTML tags and rendering them as plain text.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of innerHTML\nelement.innerHTML = '<strong>Bold Text</strong>'; // Renders as bold text\n\n// Example of textContent\nelement.textContent = '<strong>Bold Text</strong>'; // Renders as plain text: <strong>Bold Text</strong>\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Difference between \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" and \",(0,n.jsx)(e.code,{children:\"textContent\"})]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"innerHTML\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" is a property that allows you to get or set the HTML markup contained within an element. It can parse and render HTML tags, making it useful for dynamically updating the structure of a webpage.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const element = document.getElementById('example');\nelement.innerHTML = '<strong>Bold Text</strong>'; // This will render as bold text\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Dynamically adding or updating HTML content\"}),`\n`,(0,n.jsx)(e.li,{children:\"Rendering HTML tags and elements\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Security considerations\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" can expose your application to Cross-Site Scripting (XSS) attacks if you insert untrusted content. Always sanitize any user input before setting it as \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\".\"]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"textContent\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"textContent\"}),\" is a property that allows you to get or set the text content of an element. It ignores any HTML tags and renders them as plain text, making it safer for inserting user-generated content.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const element = document.getElementById('example');\nelement.textContent = '<strong>Bold Text</strong>'; // This will render as plain text: <strong>Bold Text</strong>\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Safely inserting user-generated content\"}),`\n`,(0,n.jsx)(e.li,{children:\"Stripping HTML tags from a string\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"Performance considerations\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"textContent\"}),\" is generally faster than \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" because it does not parse and render HTML tags. It simply updates the text content of the element.\"]}),`\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/Web/API/Element/innerHTML\",children:\"MDN Web Docs: innerHTML\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent\",children:\"MDN Web Docs: textContent\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://owasp.org/www-community/attacks/xss/\",children:\"Cross-Site Scripting (XSS)\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(c,{...t})}):c(t)}return L(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-innerhtml-and-textcontent/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-innerhtml-and-textcontent/zh-CN.json
index 6c15f028b..dcfff646b 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-innerhtml-and-textcontent/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-innerhtml-and-textcontent/zh-CN.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-innerhtml-and-textcontent/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var d=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),p=(t,e)=>{for(var r in e)d(t,r,{get:e[r],enumerable:!0})},i=(t,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of T(e))!M.call(t,l)&&l!==r&&d(t,l,{get:()=>e[l],enumerable:!(c=x(e,l))||c.enumerable});return t};var L=(t,e,r)=>(r=t!=null?a(m(t)):{},i(e||!t||!t.__esModule?d(r,\"default\",{value:t,enumerable:!0}):r,t)),H=t=>i(d({},\"__esModule\",{value:!0}),t);var h=g((B,o)=>{o.exports=_jsx_runtime});var j={};p(j,{default:()=>f,frontmatter:()=>u});var n=L(h()),u={title:\"innerHTML \\u548C textContent \\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function s(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",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:[(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"textContent\"}),\" \\u90FD\\u662F\\u7528\\u4E8E\\u83B7\\u53D6\\u6216\\u8BBE\\u7F6E HTML \\u5143\\u7D20\\u5185\\u5BB9\\u7684\\u5C5E\\u6027\\uFF0C\\u4F46\\u5B83\\u4EEC\\u7684\\u4F5C\\u7528\\u4E0D\\u540C\\u3002 \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" \\u8FD4\\u56DE\\u6216\\u8BBE\\u7F6E\\u5143\\u7D20\\u4E2D\\u5305\\u542B\\u7684 HTML \\u6807\\u8BB0\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u53EF\\u4EE5\\u89E3\\u6790\\u548C\\u5448\\u73B0 HTML \\u6807\\u7B7E\\u3002 \\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\",(0,n.jsx)(e.code,{children:\"textContent\"}),\" \\u8FD4\\u56DE\\u6216\\u8BBE\\u7F6E\\u5143\\u7D20\\u7684\\u6587\\u672C\\u5185\\u5BB9\\uFF0C\\u5FFD\\u7565\\u4EFB\\u4F55 HTML \\u6807\\u7B7E\\u5E76\\u5C06\\u5B83\\u4EEC\\u5448\\u73B0\\u4E3A\\u7EAF\\u6587\\u672C\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of innerHTML\nelement.innerHTML = '<strong>Bold Text</strong>'; // Renders as bold text\n\n// Example of textContent\nelement.textContent = '<strong>Bold Text</strong>'; // Renders as plain text: <strong>Bold Text</strong>\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"textContent\"}),\" \\u7684\\u533A\\u522B\"]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"innerHTML\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" \\u662F\\u4E00\\u79CD\\u5C5E\\u6027\\uFF0C\\u5141\\u8BB8\\u60A8\\u83B7\\u53D6\\u6216\\u8BBE\\u7F6E\\u5143\\u7D20\\u4E2D\\u5305\\u542B\\u7684 HTML \\u6807\\u8BB0\\u3002 \\u5B83\\u53EF\\u4EE5\\u89E3\\u6790\\u548C\\u5448\\u73B0 HTML \\u6807\\u7B7E\\uFF0C\\u4F7F\\u5176\\u53EF\\u7528\\u4E8E\\u52A8\\u6001\\u66F4\\u65B0\\u7F51\\u9875\\u7684\\u7ED3\\u6784\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const element = document.getElementById('example');\nelement.innerHTML = '<strong>Bold Text</strong>'; // This will render as bold text\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u52A8\\u6001\\u6DFB\\u52A0\\u6216\\u66F4\\u65B0 HTML \\u5185\\u5BB9\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u6E32\\u67D3 HTML \\u6807\\u7B7E\\u548C\\u5143\\u7D20\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u5B89\\u5168\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u63D2\\u5165\\u4E0D\\u53D7\\u4FE1\\u4EFB\\u7684\\u5185\\u5BB9\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" \\u53EF\\u80FD\\u4F1A\\u4F7F\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u66B4\\u9732\\u4E8E\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS) \\u653B\\u51FB\\u3002 \\u5728\\u5C06\\u4EFB\\u4F55\\u7528\\u6237\\u8F93\\u5165\\u8BBE\\u7F6E\\u4E3A \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" \\u4E4B\\u524D\\uFF0C\\u8BF7\\u52A1\\u5FC5\\u5BF9\\u5176\\u8FDB\\u884C\\u6E05\\u7406\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"textContent\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"textContent\"}),\" \\u662F\\u4E00\\u79CD\\u5C5E\\u6027\\uFF0C\\u5141\\u8BB8\\u60A8\\u83B7\\u53D6\\u6216\\u8BBE\\u7F6E\\u5143\\u7D20\\u7684\\u6587\\u672C\\u5185\\u5BB9\\u3002 \\u5B83\\u4F1A\\u5FFD\\u7565\\u4EFB\\u4F55 HTML \\u6807\\u7B7E\\u5E76\\u5C06\\u5B83\\u4EEC\\u5448\\u73B0\\u4E3A\\u7EAF\\u6587\\u672C\\uFF0C\\u8FD9\\u4F7F\\u5F97\\u5B83\\u66F4\\u5B89\\u5168\\u5730\\u63D2\\u5165\\u7528\\u6237\\u751F\\u6210\\u7684\\u5185\\u5BB9\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const element = document.getElementById('example');\nelement.textContent = '<strong>Bold Text</strong>'; // This will render as plain text: <strong>Bold Text</strong>\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u5B89\\u5168\\u5730\\u63D2\\u5165\\u7528\\u6237\\u751F\\u6210\\u7684\\u5185\\u5BB9\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u4ECE\\u5B57\\u7B26\\u4E32\\u4E2D\\u5220\\u9664 HTML \\u6807\\u7B7E\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u6027\\u80FD\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"textContent\"}),\" \\u901A\\u5E38\\u6BD4 \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" \\u5FEB\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4E0D\\u4F1A\\u89E3\\u6790\\u548C\\u5448\\u73B0 HTML \\u6807\\u7B7E\\u3002 \\u5B83\\u53EA\\u662F\\u66F4\\u65B0\\u5143\\u7D20\\u7684\\u6587\\u672C\\u5185\\u5BB9\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML\",children:\"MDN Web \\u6587\\u6863\\uFF1AinnerHTML\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent\",children:\"MDN Web \\u6587\\u6863\\uFF1AtextContent\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://owasp.org/www-community/attacks/xss/\",children:\"\\u8DE8\\u7AD9\\u811A\\u672C (XSS)\"})}),`\n`]})]})}function C(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(s,t)})):s(t)}var f=C;return H(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var x=Object.create;var d=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var L=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var r in e)d(t,r,{get:e[r],enumerable:!0})},i=(t,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of m(e))!p.call(t,l)&&l!==r&&d(t,l,{get:()=>e[l],enumerable:!(c=T(e,l))||c.enumerable});return t};var H=(t,e,r)=>(r=t!=null?x(M(t)):{},i(e||!t||!t.__esModule?d(r,\"default\",{value:t,enumerable:!0}):r,t)),u=t=>i(d({},\"__esModule\",{value:!0}),t);var h=L((B,o)=>{o.exports=_jsx_runtime});var f={};g(f,{default:()=>a,frontmatter:()=>C});var n=H(h()),C={title:\"innerHTML \\u548C textContent \\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function s(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"textContent\"}),\" \\u90FD\\u662F\\u7528\\u4E8E\\u83B7\\u53D6\\u6216\\u8BBE\\u7F6E HTML \\u5143\\u7D20\\u5185\\u5BB9\\u7684\\u5C5E\\u6027\\uFF0C\\u4F46\\u5B83\\u4EEC\\u7684\\u4F5C\\u7528\\u4E0D\\u540C\\u3002 \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" \\u8FD4\\u56DE\\u6216\\u8BBE\\u7F6E\\u5143\\u7D20\\u4E2D\\u5305\\u542B\\u7684 HTML \\u6807\\u8BB0\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u53EF\\u4EE5\\u89E3\\u6790\\u548C\\u5448\\u73B0 HTML \\u6807\\u7B7E\\u3002 \\u53E6\\u4E00\\u65B9\\u9762\\uFF0C\",(0,n.jsx)(e.code,{children:\"textContent\"}),\" \\u8FD4\\u56DE\\u6216\\u8BBE\\u7F6E\\u5143\\u7D20\\u7684\\u6587\\u672C\\u5185\\u5BB9\\uFF0C\\u5FFD\\u7565\\u4EFB\\u4F55 HTML \\u6807\\u7B7E\\u5E76\\u5C06\\u5B83\\u4EEC\\u5448\\u73B0\\u4E3A\\u7EAF\\u6587\\u672C\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Example of innerHTML\nelement.innerHTML = '<strong>Bold Text</strong>'; // Renders as bold text\n\n// Example of textContent\nelement.textContent = '<strong>Bold Text</strong>'; // Renders as plain text: <strong>Bold Text</strong>\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"textContent\"}),\" \\u7684\\u533A\\u522B\"]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"innerHTML\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" \\u662F\\u4E00\\u79CD\\u5C5E\\u6027\\uFF0C\\u5141\\u8BB8\\u60A8\\u83B7\\u53D6\\u6216\\u8BBE\\u7F6E\\u5143\\u7D20\\u4E2D\\u5305\\u542B\\u7684 HTML \\u6807\\u8BB0\\u3002 \\u5B83\\u53EF\\u4EE5\\u89E3\\u6790\\u548C\\u5448\\u73B0 HTML \\u6807\\u7B7E\\uFF0C\\u4F7F\\u5176\\u53EF\\u7528\\u4E8E\\u52A8\\u6001\\u66F4\\u65B0\\u7F51\\u9875\\u7684\\u7ED3\\u6784\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const element = document.getElementById('example');\nelement.innerHTML = '<strong>Bold Text</strong>'; // This will render as bold text\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u52A8\\u6001\\u6DFB\\u52A0\\u6216\\u66F4\\u65B0 HTML \\u5185\\u5BB9\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u6E32\\u67D3 HTML \\u6807\\u7B7E\\u548C\\u5143\\u7D20\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u5B89\\u5168\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u63D2\\u5165\\u4E0D\\u53D7\\u4FE1\\u4EFB\\u7684\\u5185\\u5BB9\\uFF0C\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" \\u53EF\\u80FD\\u4F1A\\u4F7F\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u66B4\\u9732\\u4E8E\\u8DE8\\u7AD9\\u70B9\\u811A\\u672C (XSS) \\u653B\\u51FB\\u3002 \\u5728\\u5C06\\u4EFB\\u4F55\\u7528\\u6237\\u8F93\\u5165\\u8BBE\\u7F6E\\u4E3A \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" \\u4E4B\\u524D\\uFF0C\\u8BF7\\u52A1\\u5FC5\\u5BF9\\u5176\\u8FDB\\u884C\\u6E05\\u7406\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"textContent\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"textContent\"}),\" \\u662F\\u4E00\\u79CD\\u5C5E\\u6027\\uFF0C\\u5141\\u8BB8\\u60A8\\u83B7\\u53D6\\u6216\\u8BBE\\u7F6E\\u5143\\u7D20\\u7684\\u6587\\u672C\\u5185\\u5BB9\\u3002 \\u5B83\\u4F1A\\u5FFD\\u7565\\u4EFB\\u4F55 HTML \\u6807\\u7B7E\\u5E76\\u5C06\\u5B83\\u4EEC\\u5448\\u73B0\\u4E3A\\u7EAF\\u6587\\u672C\\uFF0C\\u8FD9\\u4F7F\\u5F97\\u5B83\\u66F4\\u5B89\\u5168\\u5730\\u63D2\\u5165\\u7528\\u6237\\u751F\\u6210\\u7684\\u5185\\u5BB9\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const element = document.getElementById('example');\nelement.textContent = '<strong>Bold Text</strong>'; // This will render as plain text: <strong>Bold Text</strong>\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u5B89\\u5168\\u5730\\u63D2\\u5165\\u7528\\u6237\\u751F\\u6210\\u7684\\u5185\\u5BB9\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u4ECE\\u5B57\\u7B26\\u4E32\\u4E2D\\u5220\\u9664 HTML \\u6807\\u7B7E\"}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u6027\\u80FD\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"textContent\"}),\" \\u901A\\u5E38\\u6BD4 \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\" \\u5FEB\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4E0D\\u4F1A\\u89E3\\u6790\\u548C\\u5448\\u73B0 HTML \\u6807\\u7B7E\\u3002 \\u5B83\\u53EA\\u662F\\u66F4\\u65B0\\u5143\\u7D20\\u7684\\u6587\\u672C\\u5185\\u5BB9\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML\",children:\"MDN Web \\u6587\\u6863\\uFF1AinnerHTML\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent\",children:\"MDN Web \\u6587\\u6863\\uFF1AtextContent\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://owasp.org/www-community/attacks/xss/\",children:\"\\u8DE8\\u7AD9\\u811A\\u672C (XSS)\"})}),`\n`]})]})}function a(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(s,{...t})}):s(t)}return u(f);})();\n;return Component;"
 }
\ No newline at end of file
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 259a422a6..14f384a71 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var p=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},h=(t,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of u(e))!v.call(t,l)&&l!==r&&i(t,l,{get:()=>e[l],enumerable:!(o=m(e,l))||o.enumerable});return t};var w=(t,e,r)=>(r=t!=null?a(g(t)):{},h(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),f=t=>h(i({},\"__esModule\",{value:!0}),t);var c=p((I,d)=>{d.exports=_jsx_runtime});var M={};b(M,{default:()=>x,frontmatter:()=>y});var n=w(c()),y={title:\"What is the difference between `mouseenter` and `mouseover` event in JavaScript and browsers?\"};function s(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",pre:\"pre\",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 main difference lies in the bubbling behavior of \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" and \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" events. \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" does not bubble while \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" bubbles.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" events do not bubble. The \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" event is triggered only when the mouse pointer enters the element itself, not its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" event will not be triggered on the parent element again, it's only triggered once upon entry of parent element without regard for its contents. If both parent and child have \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" listeners attached and the mouse pointer moves from the parent element to the child element, \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" will only fire for the child.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"mouseover\"}),\" events bubble up the DOM tree. The \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" event is triggered when the mouse pointer enters the element or one of its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" event will be triggered on the parent element again as well. If the parent element has multiple child elements, this can result in multiple event callbacks fired. If there are child elements, and the mouse pointer moves from the parent element to the child element, \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" will fire for both the parent and the child.\"]}),`\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:\"Property\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"mouseenter\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"mouseover\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Bubbling\"}),(0,n.jsx)(e.td,{children:\"No\"}),(0,n.jsx)(e.td,{children:\"Yes\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Trigger\"}),(0,n.jsx)(e.td,{children:\"Only when entering itself\"}),(0,n.jsx)(e.td,{children:\"When entering itself and when entering descendants\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" event:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Does not bubble\"}),\": The \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" event does not bubble. It is only triggered when the mouse pointer enters the element to which the event listener is attached, not when it enters any child elements.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Triggered once\"}),\": The \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" event is triggered only once when the mouse pointer enters the element, making it more predictable and easier to manage in certain scenarios.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"A use case for \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" is when you want to detect the mouse entering an element without worrying about child elements triggering the event multiple times.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"mouseover\"}),\" Event:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Bubbles up the DOM\"}),\": The \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" event bubbles up through the DOM. This means that if you have an event listener on a parent element, it will also trigger when the mouse pointer moves over any child elements.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Triggered multiple times\"}),\": The \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" event is triggered every time the mouse pointer moves over an element or any of its child elements. This can lead to multiple triggers if you have nested elements.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"A use case for \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" is when you want to detect when the mouse enters an element or any of its children and are okay with the events triggering multiple times.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here's an example demonstrating the difference between \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" and \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" events:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!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    <title>Mouse Events Example</title>\n    <style>\n      .parent {\n        width: 200px;\n        height: 200px;\n        background-color: lightblue;\n        padding: 20px;\n      }\n      .child {\n        width: 100px;\n        height: 100px;\n        background-color: lightcoral;\n      }\n    </style>\n  </head>\n  <body>\n    <div class=\"parent\">\n      Parent Element\n      <div class=\"child\">Child Element</div>\n    </div>\n\n    <script>\n      const parent = document.querySelector('.parent');\n      const child = document.querySelector('.child');\n\n      // Mouseover event on parent.\n      parent.addEventListener('mouseover', () => {\n        console.log('Mouseover on parent');\n      });\n\n      // Mouseenter event on parent.\n      parent.addEventListener('mouseenter', () => {\n        console.log('Mouseenter on parent');\n      });\n\n      // Mouseover event on child.\n      child.addEventListener('mouseover', () => {\n        console.log('Mouseover on child');\n      });\n\n      // Mouseenter event on child.\n      child.addEventListener('mouseenter', () => {\n        console.log('Mouseenter on child');\n      });\n    <\\/script>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Expected behavior\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"When the mouse enters the parent element:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" event on the parent will trigger.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" event on the parent will trigger.\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"When the mouse enters the child element:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" event on the parent will trigger again because \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" bubbles up from the child.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" event on the child will trigger.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" event on the child will trigger.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" event on the parent will \",(0,n.jsx)(e.strong,{children:\"not\"}),\" trigger again because \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" does not bubble.\"]}),`\n`]}),`\n`]}),`\n`]}),`\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/Web/API/Element/mouseenter_event\",children:\"Element: mouseenter event - Web APIs | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event\",children:\"Element: mouseover event - Web APIs | MDN\"})}),`\n`]})]})}function T(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(s,t)})):s(t)}var x=T;return f(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},h=(t,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of g(e))!p.call(t,l)&&l!==r&&o(t,l,{get:()=>e[l],enumerable:!(i=u(e,l))||i.enumerable});return t};var f=(t,e,r)=>(r=t!=null?m(v(t)):{},h(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),y=t=>h(o({},\"__esModule\",{value:!0}),t);var c=b((E,d)=>{d.exports=_jsx_runtime});var x={};w(x,{default:()=>a,frontmatter:()=>T});var n=f(c()),T={title:\"What is the difference between `mouseenter` and `mouseover` event in JavaScript and browsers?\"};function s(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...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 main difference lies in the bubbling behavior of \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" and \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" events. \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" does not bubble while \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" bubbles.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" events do not bubble. The \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" event is triggered only when the mouse pointer enters the element itself, not its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" event will not be triggered on the parent element again, it's only triggered once upon entry of parent element without regard for its contents. If both parent and child have \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" listeners attached and the mouse pointer moves from the parent element to the child element, \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" will only fire for the child.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"mouseover\"}),\" events bubble up the DOM tree. The \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" event is triggered when the mouse pointer enters the element or one of its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" event will be triggered on the parent element again as well. If the parent element has multiple child elements, this can result in multiple event callbacks fired. If there are child elements, and the mouse pointer moves from the parent element to the child element, \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" will fire for both the parent and the child.\"]}),`\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:\"Property\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"mouseenter\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"mouseover\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Bubbling\"}),(0,n.jsx)(e.td,{children:\"No\"}),(0,n.jsx)(e.td,{children:\"Yes\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Trigger\"}),(0,n.jsx)(e.td,{children:\"Only when entering itself\"}),(0,n.jsx)(e.td,{children:\"When entering itself and when entering descendants\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" event:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Does not bubble\"}),\": The \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" event does not bubble. It is only triggered when the mouse pointer enters the element to which the event listener is attached, not when it enters any child elements.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Triggered once\"}),\": The \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" event is triggered only once when the mouse pointer enters the element, making it more predictable and easier to manage in certain scenarios.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"A use case for \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" is when you want to detect the mouse entering an element without worrying about child elements triggering the event multiple times.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"mouseover\"}),\" Event:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Bubbles up the DOM\"}),\": The \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" event bubbles up through the DOM. This means that if you have an event listener on a parent element, it will also trigger when the mouse pointer moves over any child elements.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Triggered multiple times\"}),\": The \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" event is triggered every time the mouse pointer moves over an element or any of its child elements. This can lead to multiple triggers if you have nested elements.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"A use case for \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" is when you want to detect when the mouse enters an element or any of its children and are okay with the events triggering multiple times.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here's an example demonstrating the difference between \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" and \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" events:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!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    <title>Mouse Events Example</title>\n    <style>\n      .parent {\n        width: 200px;\n        height: 200px;\n        background-color: lightblue;\n        padding: 20px;\n      }\n      .child {\n        width: 100px;\n        height: 100px;\n        background-color: lightcoral;\n      }\n    </style>\n  </head>\n  <body>\n    <div class=\"parent\">\n      Parent Element\n      <div class=\"child\">Child Element</div>\n    </div>\n\n    <script>\n      const parent = document.querySelector('.parent');\n      const child = document.querySelector('.child');\n\n      // Mouseover event on parent.\n      parent.addEventListener('mouseover', () => {\n        console.log('Mouseover on parent');\n      });\n\n      // Mouseenter event on parent.\n      parent.addEventListener('mouseenter', () => {\n        console.log('Mouseenter on parent');\n      });\n\n      // Mouseover event on child.\n      child.addEventListener('mouseover', () => {\n        console.log('Mouseover on child');\n      });\n\n      // Mouseenter event on child.\n      child.addEventListener('mouseenter', () => {\n        console.log('Mouseenter on child');\n      });\n    <\\/script>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Expected behavior\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"When the mouse enters the parent element:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" event on the parent will trigger.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" event on the parent will trigger.\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"When the mouse enters the child element:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" event on the parent will trigger again because \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" bubbles up from the child.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" event on the child will trigger.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" event on the child will trigger.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" event on the parent will \",(0,n.jsx)(e.strong,{children:\"not\"}),\" trigger again because \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" does not bubble.\"]}),`\n`]}),`\n`]}),`\n`]}),`\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/Web/API/Element/mouseenter_event\",children:\"Element: mouseenter event - Web APIs | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event\",children:\"Element: mouseover event - Web APIs | MDN\"})}),`\n`]})]})}function a(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(s,{...t})}):s(t)}return y(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-mouseenter-and-mouseover-event/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-mouseenter-and-mouseover-event/zh-CN.json
index b3e3cf4b6..d8d2b5527 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-mouseenter-and-mouseover-event/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-mouseenter-and-mouseover-event/zh-CN.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),b=(r,e)=>{for(var d in e)c(r,d,{get:e[d],enumerable:!0})},t=(r,e,d,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of a(e))!p.call(r,o)&&o!==d&&c(r,o,{get:()=>e[o],enumerable:!(l=m(e,o))||l.enumerable});return r};var M=(r,e,d)=>(d=r!=null?u(v(r)):{},t(e||!r||!r.__esModule?c(d,\"default\",{value:r,enumerable:!0}):d,r)),x=r=>t(c({},\"__esModule\",{value:!0}),r);var h=g((j,i)=>{i.exports=_jsx_runtime});var D={};b(D,{default:()=>_,frontmatter:()=>E});var n=M(h()),E={title:\"JavaScript \\u548C\\u6D4F\\u89C8\\u5668\\u4E2D `mouseenter` \\u548C `mouseover` \\u4E8B\\u4EF6\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function s(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",pre:\"pre\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E3B\\u8981\\u533A\\u522B\\u5728\\u4E8E \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u4E8B\\u4EF6\\u7684\\u5192\\u6CE1\\u884C\\u4E3A\\u3002\",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E0D\\u5192\\u6CE1\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u5192\\u6CE1\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E8B\\u4EF6\\u4E0D\\u5192\\u6CE1\\u3002\",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E8B\\u4EF6\\u4EC5\\u5728\\u9F20\\u6807\\u6307\\u9488\\u8FDB\\u5165\\u5143\\u7D20\\u672C\\u8EAB\\u65F6\\u89E6\\u53D1\\uFF0C\\u800C\\u4E0D\\u662F\\u5176\\u540E\\u4EE3\\u5143\\u7D20\\u3002\\u5982\\u679C\\u7236\\u5143\\u7D20\\u6709\\u5B50\\u5143\\u7D20\\uFF0C\\u5E76\\u4E14\\u9F20\\u6807\\u6307\\u9488\\u8FDB\\u5165\\u5B50\\u5143\\u7D20\\uFF0C\\u5219\\u4E0D\\u4F1A\\u518D\\u6B21\\u5728\\u7236\\u5143\\u7D20\\u4E0A\\u89E6\\u53D1 \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E8B\\u4EF6\\uFF0C\\u5B83\\u4EC5\\u5728\\u8FDB\\u5165\\u7236\\u5143\\u7D20\\u65F6\\u89E6\\u53D1\\u4E00\\u6B21\\uFF0C\\u800C\\u4E0D\\u8003\\u8651\\u5176\\u5185\\u5BB9\\u3002\\u5982\\u679C\\u7236\\u5143\\u7D20\\u548C\\u5B50\\u5143\\u7D20\\u90FD\\u9644\\u52A0\\u4E86 \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4FA6\\u542C\\u5668\\uFF0C\\u5E76\\u4E14\\u9F20\\u6807\\u6307\\u9488\\u4ECE\\u7236\\u5143\\u7D20\\u79FB\\u52A8\\u5230\\u5B50\\u5143\\u7D20\\uFF0C\\u5219 \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u5C06\\u4EC5\\u4E3A\\u5B50\\u5143\\u7D20\\u89E6\\u53D1\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u4E8B\\u4EF6\\u4F1A\\u5728 DOM \\u6811\\u4E2D\\u5192\\u6CE1\\u3002\\u5F53\\u9F20\\u6807\\u6307\\u9488\\u8FDB\\u5165\\u5143\\u7D20\\u6216\\u5176\\u540E\\u4EE3\\u65F6\\uFF0C\\u4F1A\\u89E6\\u53D1 \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u4E8B\\u4EF6\\u3002\\u5982\\u679C\\u7236\\u5143\\u7D20\\u6709\\u5B50\\u5143\\u7D20\\uFF0C\\u5E76\\u4E14\\u9F20\\u6807\\u6307\\u9488\\u8FDB\\u5165\\u5B50\\u5143\\u7D20\\uFF0C\\u5219\\u7236\\u5143\\u7D20\\u4E5F\\u4F1A\\u518D\\u6B21\\u89E6\\u53D1 \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u4E8B\\u4EF6\\u3002\\u5982\\u679C\\u7236\\u5143\\u7D20\\u6709\\u591A\\u4E2A\\u5B50\\u5143\\u7D20\\uFF0C\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u591A\\u6B21\\u89E6\\u53D1\\u4E8B\\u4EF6\\u56DE\\u8C03\\u3002\\u5982\\u679C\\u6709\\u5B50\\u5143\\u7D20\\uFF0C\\u5E76\\u4E14\\u9F20\\u6807\\u6307\\u9488\\u4ECE\\u7236\\u5143\\u7D20\\u79FB\\u52A8\\u5230\\u5B50\\u5143\\u7D20\\uFF0C\\u5219 \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u5C06\\u540C\\u65F6\\u4E3A\\u7236\\u5143\\u7D20\\u548C\\u5B50\\u5143\\u7D20\\u89E6\\u53D1\\u3002\"]}),`\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:\"\\u5C5E\\u6027\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"mouseenter\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"mouseover\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u5192\\u6CE1\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"}),(0,n.jsx)(e.td,{children:\"\\u662F\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u89E6\\u53D1\"}),(0,n.jsx)(e.td,{children:\"\\u4EC5\\u5728\\u8FDB\\u5165\\u81EA\\u8EAB\\u65F6\"}),(0,n.jsx)(e.td,{children:\"\\u8FDB\\u5165\\u81EA\\u8EAB\\u548C\\u8FDB\\u5165\\u540E\\u4EE3\\u65F6\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E8B\\u4EF6\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u5192\\u6CE1\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E8B\\u4EF6\\u4E0D\\u5192\\u6CE1\\u3002\\u5B83\\u4EC5\\u5728\\u9F20\\u6807\\u6307\\u9488\\u8FDB\\u5165\\u9644\\u52A0\\u4E86\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u7684\\u5143\\u7D20\\u65F6\\u89E6\\u53D1\\uFF0C\\u800C\\u4E0D\\u662F\\u8FDB\\u5165\\u4EFB\\u4F55\\u5B50\\u5143\\u7D20\\u65F6\\u89E6\\u53D1\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u89E6\\u53D1\\u4E00\\u6B21\"}),\"\\uFF1A\\u5F53\\u9F20\\u6807\\u6307\\u9488\\u8FDB\\u5165\\u5143\\u7D20\\u65F6\\uFF0C\",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E8B\\u4EF6\\u4EC5\\u89E6\\u53D1\\u4E00\\u6B21\\uFF0C\\u8FD9\\u4F7F\\u5F97\\u5B83\\u5728\\u67D0\\u4E9B\\u60C5\\u51B5\\u4E0B\\u66F4\\u53EF\\u9884\\u6D4B\\u4E14\\u66F4\\u6613\\u4E8E\\u7BA1\\u7406\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u7684\\u4E00\\u4E2A\\u7528\\u4F8B\\u662F\\uFF0C\\u5F53\\u60A8\\u5E0C\\u671B\\u68C0\\u6D4B\\u9F20\\u6807\\u8FDB\\u5165\\u5143\\u7D20\\u800C\\u65E0\\u9700\\u62C5\\u5FC3\\u5B50\\u5143\\u7D20\\u591A\\u6B21\\u89E6\\u53D1\\u4E8B\\u4EF6\\u65F6\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u4E8B\\u4EF6\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5728 DOM \\u4E2D\\u5192\\u6CE1\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u4E8B\\u4EF6\\u901A\\u8FC7 DOM \\u5192\\u6CE1\\u3002\\u8FD9\\u610F\\u5473\\u7740\\uFF0C\\u5982\\u679C\\u60A8\\u5728\\u7236\\u5143\\u7D20\\u4E0A\\u6709\\u4E00\\u4E2A\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\uFF0C\\u5F53\\u9F20\\u6807\\u6307\\u9488\\u79FB\\u52A8\\u5230\\u4EFB\\u4F55\\u5B50\\u5143\\u7D20\\u4E0A\\u65F6\\uFF0C\\u5B83\\u4E5F\\u4F1A\\u89E6\\u53D1\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u591A\\u6B21\\u89E6\\u53D1\"}),\"\\uFF1A\\u6BCF\\u6B21\\u9F20\\u6807\\u6307\\u9488\\u79FB\\u52A8\\u5230\\u5143\\u7D20\\u6216\\u5176\\u4EFB\\u4F55\\u5B50\\u5143\\u7D20\\u4E0A\\u65F6\\uFF0C\\u90FD\\u4F1A\\u89E6\\u53D1 \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u4E8B\\u4EF6\\u3002\\u5982\\u679C\\u60A8\\u6709\\u5D4C\\u5957\\u5143\\u7D20\\uFF0C\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u591A\\u6B21\\u89E6\\u53D1\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u7684\\u4E00\\u4E2A\\u7528\\u4F8B\\u662F\\uFF0C\\u5F53\\u60A8\\u5E0C\\u671B\\u68C0\\u6D4B\\u9F20\\u6807\\u8FDB\\u5165\\u5143\\u7D20\\u6216\\u5176\\u4EFB\\u4F55\\u5B50\\u5143\\u7D20\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u63A5\\u53D7\\u4E8B\\u4EF6\\u591A\\u6B21\\u89E6\\u53D1\\u65F6\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u6F14\\u793A \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E8B\\u4EF6\\u4E4B\\u95F4\\u533A\\u522B\\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!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    <title>Mouse Events Example</title>\n    <style>\n      .parent {\n        width: 200px;\n        height: 200px;\n        background-color: lightblue;\n        padding: 20px;\n      }\n      .child {\n        width: 100px;\n        height: 100px;\n        background-color: lightcoral;\n      }\n    </style>\n  </head>\n  <body>\n    <div class=\"parent\">\n      Parent Element\n      <div class=\"child\">Child Element</div>\n    </div>\n\n    <script>\n      const parent = document.querySelector('.parent');\n      const child = document.querySelector('.child');\n\n      // Mouseover event on parent.\n      parent.addEventListener('mouseover', () => {\n        console.log('Mouseover on parent');\n      });\n\n      // Mouseenter event on parent.\n      parent.addEventListener('mouseenter', () => {\n        console.log('Mouseenter on parent');\n      });\n\n      // Mouseover event on child.\n      child.addEventListener('mouseover', () => {\n        console.log('Mouseover on child');\n      });\n\n      // Mouseenter event on child.\n      child.addEventListener('mouseenter', () => {\n        console.log('Mouseenter on child');\n      });\n    <\\/script>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"\\u9884\\u671F\\u884C\\u4E3A\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5F53\\u9F20\\u6807\\u8FDB\\u5165\\u7236\\u5143\\u7D20\\u65F6\\uFF1A\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u7236\\u5143\\u7D20\\u4E0A\\u7684 \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u4E8B\\u4EF6\\u5C06\\u89E6\\u53D1\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u7236\\u5143\\u7D20\\u4E0A\\u7684 \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E8B\\u4EF6\\u5C06\\u89E6\\u53D1\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5F53\\u9F20\\u6807\\u8FDB\\u5165\\u5B50\\u5143\\u7D20\\u65F6\\uFF1A\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u7236\\u5143\\u7D20\\u4E0A\\u7684 \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u4E8B\\u4EF6\\u5C06\\u518D\\u6B21\\u89E6\\u53D1\\uFF0C\\u56E0\\u4E3A \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u4ECE\\u5B50\\u5143\\u7D20\\u5192\\u6CE1\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5B50\\u5143\\u7D20\\u4E0A\\u7684 \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u4E8B\\u4EF6\\u5C06\\u89E6\\u53D1\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5B50\\u5143\\u7D20\\u4E0A\\u7684 \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E8B\\u4EF6\\u5C06\\u89E6\\u53D1\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u7236\\u5143\\u7D20\\u4E0A\\u7684 \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E8B\\u4EF6\\u5C06\",(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u4F1A\"}),\"\\u518D\\u6B21\\u89E6\\u53D1\\uFF0C\\u56E0\\u4E3A \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E0D\\u5192\\u6CE1\\u3002\"]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Element/mouseenter_event\",children:\"Element: mouseenter event - Web APIs | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event\",children:\"Element: mouseover event - Web APIs | MDN\"})}),`\n`]})]})}function y(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(s,r)})):s(r)}var _=y;return x(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var l=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var M=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),b=(r,e)=>{for(var d in e)l(r,d,{get:e[d],enumerable:!0})},t=(r,e,d,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of v(e))!g.call(r,o)&&o!==d&&l(r,o,{get:()=>e[o],enumerable:!(c=a(e,o))||c.enumerable});return r};var x=(r,e,d)=>(d=r!=null?m(p(r)):{},t(e||!r||!r.__esModule?l(d,\"default\",{value:r,enumerable:!0}):d,r)),E=r=>t(l({},\"__esModule\",{value:!0}),r);var h=M((f,i)=>{i.exports=_jsx_runtime});var _={};b(_,{default:()=>u,frontmatter:()=>y});var n=x(h()),y={title:\"JavaScript \\u548C\\u6D4F\\u89C8\\u5668\\u4E2D `mouseenter` \\u548C `mouseover` \\u4E8B\\u4EF6\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function s(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E3B\\u8981\\u533A\\u522B\\u5728\\u4E8E \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u4E8B\\u4EF6\\u7684\\u5192\\u6CE1\\u884C\\u4E3A\\u3002\",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E0D\\u5192\\u6CE1\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u5192\\u6CE1\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E8B\\u4EF6\\u4E0D\\u5192\\u6CE1\\u3002\",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E8B\\u4EF6\\u4EC5\\u5728\\u9F20\\u6807\\u6307\\u9488\\u8FDB\\u5165\\u5143\\u7D20\\u672C\\u8EAB\\u65F6\\u89E6\\u53D1\\uFF0C\\u800C\\u4E0D\\u662F\\u5176\\u540E\\u4EE3\\u5143\\u7D20\\u3002\\u5982\\u679C\\u7236\\u5143\\u7D20\\u6709\\u5B50\\u5143\\u7D20\\uFF0C\\u5E76\\u4E14\\u9F20\\u6807\\u6307\\u9488\\u8FDB\\u5165\\u5B50\\u5143\\u7D20\\uFF0C\\u5219\\u4E0D\\u4F1A\\u518D\\u6B21\\u5728\\u7236\\u5143\\u7D20\\u4E0A\\u89E6\\u53D1 \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E8B\\u4EF6\\uFF0C\\u5B83\\u4EC5\\u5728\\u8FDB\\u5165\\u7236\\u5143\\u7D20\\u65F6\\u89E6\\u53D1\\u4E00\\u6B21\\uFF0C\\u800C\\u4E0D\\u8003\\u8651\\u5176\\u5185\\u5BB9\\u3002\\u5982\\u679C\\u7236\\u5143\\u7D20\\u548C\\u5B50\\u5143\\u7D20\\u90FD\\u9644\\u52A0\\u4E86 \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4FA6\\u542C\\u5668\\uFF0C\\u5E76\\u4E14\\u9F20\\u6807\\u6307\\u9488\\u4ECE\\u7236\\u5143\\u7D20\\u79FB\\u52A8\\u5230\\u5B50\\u5143\\u7D20\\uFF0C\\u5219 \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u5C06\\u4EC5\\u4E3A\\u5B50\\u5143\\u7D20\\u89E6\\u53D1\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u4E8B\\u4EF6\\u4F1A\\u5728 DOM \\u6811\\u4E2D\\u5192\\u6CE1\\u3002\\u5F53\\u9F20\\u6807\\u6307\\u9488\\u8FDB\\u5165\\u5143\\u7D20\\u6216\\u5176\\u540E\\u4EE3\\u65F6\\uFF0C\\u4F1A\\u89E6\\u53D1 \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u4E8B\\u4EF6\\u3002\\u5982\\u679C\\u7236\\u5143\\u7D20\\u6709\\u5B50\\u5143\\u7D20\\uFF0C\\u5E76\\u4E14\\u9F20\\u6807\\u6307\\u9488\\u8FDB\\u5165\\u5B50\\u5143\\u7D20\\uFF0C\\u5219\\u7236\\u5143\\u7D20\\u4E5F\\u4F1A\\u518D\\u6B21\\u89E6\\u53D1 \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u4E8B\\u4EF6\\u3002\\u5982\\u679C\\u7236\\u5143\\u7D20\\u6709\\u591A\\u4E2A\\u5B50\\u5143\\u7D20\\uFF0C\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u591A\\u6B21\\u89E6\\u53D1\\u4E8B\\u4EF6\\u56DE\\u8C03\\u3002\\u5982\\u679C\\u6709\\u5B50\\u5143\\u7D20\\uFF0C\\u5E76\\u4E14\\u9F20\\u6807\\u6307\\u9488\\u4ECE\\u7236\\u5143\\u7D20\\u79FB\\u52A8\\u5230\\u5B50\\u5143\\u7D20\\uFF0C\\u5219 \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u5C06\\u540C\\u65F6\\u4E3A\\u7236\\u5143\\u7D20\\u548C\\u5B50\\u5143\\u7D20\\u89E6\\u53D1\\u3002\"]}),`\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:\"\\u5C5E\\u6027\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"mouseenter\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"mouseover\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u5192\\u6CE1\"}),(0,n.jsx)(e.td,{children:\"\\u5426\"}),(0,n.jsx)(e.td,{children:\"\\u662F\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u89E6\\u53D1\"}),(0,n.jsx)(e.td,{children:\"\\u4EC5\\u5728\\u8FDB\\u5165\\u81EA\\u8EAB\\u65F6\"}),(0,n.jsx)(e.td,{children:\"\\u8FDB\\u5165\\u81EA\\u8EAB\\u548C\\u8FDB\\u5165\\u540E\\u4EE3\\u65F6\"})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E8B\\u4EF6\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u5192\\u6CE1\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E8B\\u4EF6\\u4E0D\\u5192\\u6CE1\\u3002\\u5B83\\u4EC5\\u5728\\u9F20\\u6807\\u6307\\u9488\\u8FDB\\u5165\\u9644\\u52A0\\u4E86\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\u7684\\u5143\\u7D20\\u65F6\\u89E6\\u53D1\\uFF0C\\u800C\\u4E0D\\u662F\\u8FDB\\u5165\\u4EFB\\u4F55\\u5B50\\u5143\\u7D20\\u65F6\\u89E6\\u53D1\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u89E6\\u53D1\\u4E00\\u6B21\"}),\"\\uFF1A\\u5F53\\u9F20\\u6807\\u6307\\u9488\\u8FDB\\u5165\\u5143\\u7D20\\u65F6\\uFF0C\",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E8B\\u4EF6\\u4EC5\\u89E6\\u53D1\\u4E00\\u6B21\\uFF0C\\u8FD9\\u4F7F\\u5F97\\u5B83\\u5728\\u67D0\\u4E9B\\u60C5\\u51B5\\u4E0B\\u66F4\\u53EF\\u9884\\u6D4B\\u4E14\\u66F4\\u6613\\u4E8E\\u7BA1\\u7406\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u7684\\u4E00\\u4E2A\\u7528\\u4F8B\\u662F\\uFF0C\\u5F53\\u60A8\\u5E0C\\u671B\\u68C0\\u6D4B\\u9F20\\u6807\\u8FDB\\u5165\\u5143\\u7D20\\u800C\\u65E0\\u9700\\u62C5\\u5FC3\\u5B50\\u5143\\u7D20\\u591A\\u6B21\\u89E6\\u53D1\\u4E8B\\u4EF6\\u65F6\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u4E8B\\u4EF6\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5728 DOM \\u4E2D\\u5192\\u6CE1\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u4E8B\\u4EF6\\u901A\\u8FC7 DOM \\u5192\\u6CE1\\u3002\\u8FD9\\u610F\\u5473\\u7740\\uFF0C\\u5982\\u679C\\u60A8\\u5728\\u7236\\u5143\\u7D20\\u4E0A\\u6709\\u4E00\\u4E2A\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\\uFF0C\\u5F53\\u9F20\\u6807\\u6307\\u9488\\u79FB\\u52A8\\u5230\\u4EFB\\u4F55\\u5B50\\u5143\\u7D20\\u4E0A\\u65F6\\uFF0C\\u5B83\\u4E5F\\u4F1A\\u89E6\\u53D1\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u591A\\u6B21\\u89E6\\u53D1\"}),\"\\uFF1A\\u6BCF\\u6B21\\u9F20\\u6807\\u6307\\u9488\\u79FB\\u52A8\\u5230\\u5143\\u7D20\\u6216\\u5176\\u4EFB\\u4F55\\u5B50\\u5143\\u7D20\\u4E0A\\u65F6\\uFF0C\\u90FD\\u4F1A\\u89E6\\u53D1 \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u4E8B\\u4EF6\\u3002\\u5982\\u679C\\u60A8\\u6709\\u5D4C\\u5957\\u5143\\u7D20\\uFF0C\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u591A\\u6B21\\u89E6\\u53D1\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u7684\\u4E00\\u4E2A\\u7528\\u4F8B\\u662F\\uFF0C\\u5F53\\u60A8\\u5E0C\\u671B\\u68C0\\u6D4B\\u9F20\\u6807\\u8FDB\\u5165\\u5143\\u7D20\\u6216\\u5176\\u4EFB\\u4F55\\u5B50\\u5143\\u7D20\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u63A5\\u53D7\\u4E8B\\u4EF6\\u591A\\u6B21\\u89E6\\u53D1\\u65F6\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u6F14\\u793A \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E8B\\u4EF6\\u4E4B\\u95F4\\u533A\\u522B\\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!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    <title>Mouse Events Example</title>\n    <style>\n      .parent {\n        width: 200px;\n        height: 200px;\n        background-color: lightblue;\n        padding: 20px;\n      }\n      .child {\n        width: 100px;\n        height: 100px;\n        background-color: lightcoral;\n      }\n    </style>\n  </head>\n  <body>\n    <div class=\"parent\">\n      Parent Element\n      <div class=\"child\">Child Element</div>\n    </div>\n\n    <script>\n      const parent = document.querySelector('.parent');\n      const child = document.querySelector('.child');\n\n      // Mouseover event on parent.\n      parent.addEventListener('mouseover', () => {\n        console.log('Mouseover on parent');\n      });\n\n      // Mouseenter event on parent.\n      parent.addEventListener('mouseenter', () => {\n        console.log('Mouseenter on parent');\n      });\n\n      // Mouseover event on child.\n      child.addEventListener('mouseover', () => {\n        console.log('Mouseover on child');\n      });\n\n      // Mouseenter event on child.\n      child.addEventListener('mouseenter', () => {\n        console.log('Mouseenter on child');\n      });\n    <\\/script>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"\\u9884\\u671F\\u884C\\u4E3A\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5F53\\u9F20\\u6807\\u8FDB\\u5165\\u7236\\u5143\\u7D20\\u65F6\\uFF1A\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u7236\\u5143\\u7D20\\u4E0A\\u7684 \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u4E8B\\u4EF6\\u5C06\\u89E6\\u53D1\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u7236\\u5143\\u7D20\\u4E0A\\u7684 \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E8B\\u4EF6\\u5C06\\u89E6\\u53D1\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5F53\\u9F20\\u6807\\u8FDB\\u5165\\u5B50\\u5143\\u7D20\\u65F6\\uFF1A\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u7236\\u5143\\u7D20\\u4E0A\\u7684 \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u4E8B\\u4EF6\\u5C06\\u518D\\u6B21\\u89E6\\u53D1\\uFF0C\\u56E0\\u4E3A \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u4ECE\\u5B50\\u5143\\u7D20\\u5192\\u6CE1\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5B50\\u5143\\u7D20\\u4E0A\\u7684 \",(0,n.jsx)(e.code,{children:\"mouseover\"}),\" \\u4E8B\\u4EF6\\u5C06\\u89E6\\u53D1\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5B50\\u5143\\u7D20\\u4E0A\\u7684 \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E8B\\u4EF6\\u5C06\\u89E6\\u53D1\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u7236\\u5143\\u7D20\\u4E0A\\u7684 \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E8B\\u4EF6\\u5C06\",(0,n.jsx)(e.strong,{children:\"\\u4E0D\\u4F1A\"}),\"\\u518D\\u6B21\\u89E6\\u53D1\\uFF0C\\u56E0\\u4E3A \",(0,n.jsx)(e.code,{children:\"mouseenter\"}),\" \\u4E0D\\u5192\\u6CE1\\u3002\"]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Element/mouseenter_event\",children:\"Element: mouseenter event - Web APIs | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event\",children:\"Element: mouseover event - Web APIs | MDN\"})}),`\n`]})]})}function u(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(s,{...r})}):s(r)}return E(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-react-node-react-element-and-a-react-component/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-react-node-react-element-and-a-react-component/en-US.json
index 2a5ce6f42..b02e643a3 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-react-node-react-element-and-a-react-component/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-react-node-react-element-and-a-react-component/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-difference-between-react-node-react-element-and-a-react-component/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var R=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var r in e)c(t,r,{get:e[r],enumerable:!0})},s=(t,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!g.call(t,a)&&a!==r&&c(t,a,{get:()=>e[a],enumerable:!(o=m(e,a))||o.enumerable});return t};var f=(t,e,r)=>(r=t!=null?h(u(t)):{},s(e||!t||!t.__esModule?c(r,\"default\",{value:t,enumerable:!0}):r,t)),x=t=>s(c({},\"__esModule\",{value:!0}),t);var i=R((C,l)=>{l.exports=_jsx_runtime});var y={};b(y,{default:()=>w,frontmatter:()=>j});var n=f(i()),j={title:\"What is the difference between React Node, React Element, and a React Component?\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",strong:\"strong\",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:[\"A React Node is any renderable unit in React, such as an element, string, number, or \",(0,n.jsx)(e.code,{children:\"null\"}),\". A React Element is an immutable object describing what to render, created using JSX or \",(0,n.jsx)(e.code,{children:\"React.createElement\"}),\". A React Component is a function or class that returns React Elements, enabling the creation of reusable UI pieces.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"React node\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A \",(0,n.jsx)(e.strong,{children:\"React Node\"}),\" is the most basic unit in the React rendering system. It can be a React element, a string, a number, a boolean, or \",(0,n.jsx)(e.code,{children:\"null\"}),\". Essentially, anything that can be rendered in React is a React Node.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const stringNode = 'Hello, world!';\nconst numberNode = 123;\nconst booleanNode = true;\nconst nullNode = null;\nconst elementNode = <div>Hello, world!</div>;\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"React element\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A \",(0,n.jsx)(e.strong,{children:\"React Element\"}),\" is an immutable, plain object representing what you want to see on the screen. It includes the type (such as a string for HTML tags or a React component), props, and children. React elements are created using JSX syntax or \",(0,n.jsx)(e.code,{children:\"React.createElement\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const element = <div className=\"greeting\">Hello, world!</div>;\n\n// Using React.createElement\nconst element = React.createElement(\n  'div',\n  { className: 'greeting' },\n  'Hello, world!',\n);\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"React component\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A \",(0,n.jsx)(e.strong,{children:\"React Component\"}),\" is a reusable piece of the UI that can accept inputs (props) and returns React elements describing the UI. There are two types of components: function components and class components.\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Function components\"}),\": These are simpler and are just functions that take props as an argument and return a React element.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`function Welcome(props) {\n  return <h1>Hello, {props.name}</h1>;\n}\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Class components\"}),\": These are ES6 classes that extend \",(0,n.jsx)(e.code,{children:\"React.Component\"}),\" and must have a \",(0,n.jsx)(e.code,{children:\"render\"}),\" method returning a React element.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`class Welcome extends React.Component {\n  render() {\n    return <h1>Hello, {this.props.name}</h1>;\n  }\n}\n`})}),`\n`]}),`\n`]}),`\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://react.dev/learn/render-and-commit\",children:\"React documentation: Render and commit\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/passing-props-to-a-component\",children:\"React documentation: Passing Props to a Component\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/writing-markup-with-jsx\",children:\"React documentation: Writing Markup with JSX\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React documentation: State: A Component's Memory\"})}),`\n`]})]})}function N(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var w=N;return x(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var r in e)c(t,r,{get:e[r],enumerable:!0})},l=(t,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!R.call(t,a)&&a!==r&&c(t,a,{get:()=>e[a],enumerable:!(o=p(e,a))||o.enumerable});return t};var x=(t,e,r)=>(r=t!=null?m(g(t)):{},l(e||!t||!t.__esModule?c(r,\"default\",{value:t,enumerable:!0}):r,t)),N=t=>l(c({},\"__esModule\",{value:!0}),t);var i=b((v,s)=>{s.exports=_jsx_runtime});var w={};f(w,{default:()=>h,frontmatter:()=>j});var n=x(i()),j={title:\"What is the difference between React Node, React Element, and a React Component?\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A React Node is any renderable unit in React, such as an element, string, number, or \",(0,n.jsx)(e.code,{children:\"null\"}),\". A React Element is an immutable object describing what to render, created using JSX or \",(0,n.jsx)(e.code,{children:\"React.createElement\"}),\". A React Component is a function or class that returns React Elements, enabling the creation of reusable UI pieces.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"React node\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A \",(0,n.jsx)(e.strong,{children:\"React Node\"}),\" is the most basic unit in the React rendering system. It can be a React element, a string, a number, a boolean, or \",(0,n.jsx)(e.code,{children:\"null\"}),\". Essentially, anything that can be rendered in React is a React Node.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const stringNode = 'Hello, world!';\nconst numberNode = 123;\nconst booleanNode = true;\nconst nullNode = null;\nconst elementNode = <div>Hello, world!</div>;\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"React element\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A \",(0,n.jsx)(e.strong,{children:\"React Element\"}),\" is an immutable, plain object representing what you want to see on the screen. It includes the type (such as a string for HTML tags or a React component), props, and children. React elements are created using JSX syntax or \",(0,n.jsx)(e.code,{children:\"React.createElement\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const element = <div className=\"greeting\">Hello, world!</div>;\n\n// Using React.createElement\nconst element = React.createElement(\n  'div',\n  { className: 'greeting' },\n  'Hello, world!',\n);\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"React component\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A \",(0,n.jsx)(e.strong,{children:\"React Component\"}),\" is a reusable piece of the UI that can accept inputs (props) and returns React elements describing the UI. There are two types of components: function components and class components.\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Function components\"}),\": These are simpler and are just functions that take props as an argument and return a React element.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`function Welcome(props) {\n  return <h1>Hello, {props.name}</h1>;\n}\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Class components\"}),\": These are ES6 classes that extend \",(0,n.jsx)(e.code,{children:\"React.Component\"}),\" and must have a \",(0,n.jsx)(e.code,{children:\"render\"}),\" method returning a React element.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`class Welcome extends React.Component {\n  render() {\n    return <h1>Hello, {this.props.name}</h1>;\n  }\n}\n`})}),`\n`]}),`\n`]}),`\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://react.dev/learn/render-and-commit\",children:\"React documentation: Render and commit\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/passing-props-to-a-component\",children:\"React documentation: Passing Props to a Component\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/writing-markup-with-jsx\",children:\"React documentation: Writing Markup with JSX\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React documentation: State: A Component's Memory\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return N(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-react-node-react-element-and-a-react-component/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-react-node-react-element-and-a-react-component/zh-CN.json
index 34e90edfb..be7184dc8 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-react-node-react-element-and-a-react-component/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-react-node-react-element-and-a-react-component/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-difference-between-react-node-react-element-and-a-react-component/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var c in e)l(t,c,{get:e[c],enumerable:!0})},a=(t,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!u.call(t,r)&&r!==c&&l(t,r,{get:()=>e[r],enumerable:!(o=m(e,r))||o.enumerable});return t};var N=(t,e,c)=>(c=t!=null?h(R(t)):{},a(e||!t||!t.__esModule?l(c,\"default\",{value:t,enumerable:!0}):c,t)),j=t=>a(l({},\"__esModule\",{value:!0}),t);var i=g((H,d)=>{d.exports=_jsx_runtime});var E={};x(E,{default:()=>C,frontmatter:()=>f});var n=N(i()),f={title:\"React Node\\u3001React Element \\u548C React Component \\u4E4B\\u95F4\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function s(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",strong:\"strong\",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:[\"React Node \\u662F React \\u4E2D\\u7684\\u4EFB\\u4F55\\u53EF\\u6E32\\u67D3\\u5355\\u5143\\uFF0C\\u4F8B\\u5982\\u5143\\u7D20\\u3001\\u5B57\\u7B26\\u4E32\\u3001\\u6570\\u5B57\\u6216 \",(0,n.jsx)(e.code,{children:\"null\"}),\"\\u3002React Element \\u662F\\u4E00\\u4E2A\\u63CF\\u8FF0\\u8981\\u6E32\\u67D3\\u5185\\u5BB9\\u7684\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\uFF0C\\u4F7F\\u7528 JSX \\u6216 \",(0,n.jsx)(e.code,{children:\"React.createElement\"}),\" \\u521B\\u5EFA\\u3002React Component \\u662F\\u4E00\\u4E2A\\u8FD4\\u56DE React Element \\u7684\\u51FD\\u6570\\u6216\\u7C7B\\uFF0C\\u652F\\u6301\\u521B\\u5EFA\\u53EF\\u91CD\\u7528\\u7684 UI \\u7247\\u6BB5\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"React node\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E00\\u4E2A \",(0,n.jsx)(e.strong,{children:\"React Node\"}),\" \\u662F React \\u6E32\\u67D3\\u7CFB\\u7EDF\\u4E2D\\u6700\\u57FA\\u672C\\u7684\\u5355\\u5143\\u3002\\u5B83\\u53EF\\u4EE5\\u662F\\u4E00\\u4E2A React \\u5143\\u7D20\\u3001\\u4E00\\u4E2A\\u5B57\\u7B26\\u4E32\\u3001\\u4E00\\u4E2A\\u6570\\u5B57\\u3001\\u4E00\\u4E2A\\u5E03\\u5C14\\u503C\\u6216 \",(0,n.jsx)(e.code,{children:\"null\"}),\"\\u3002 \\u57FA\\u672C\\u4E0A\\uFF0C\\u4EFB\\u4F55\\u53EF\\u4EE5\\u5728 React \\u4E2D\\u6E32\\u67D3\\u7684\\u4E1C\\u897F\\u90FD\\u662F\\u4E00\\u4E2A React Node\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const stringNode = 'Hello, world!';\nconst numberNode = 123;\nconst booleanNode = true;\nconst nullNode = null;\nconst elementNode = <div>Hello, world!</div>;\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"React element\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E00\\u4E2A \",(0,n.jsx)(e.strong,{children:\"React Element\"}),\" \\u662F\\u4E00\\u4E2A\\u4E0D\\u53EF\\u53D8\\u7684\\u7EAF\\u5BF9\\u8C61\\uFF0C\\u8868\\u793A\\u60A8\\u5E0C\\u671B\\u5728\\u5C4F\\u5E55\\u4E0A\\u770B\\u5230\\u7684\\u5185\\u5BB9\\u3002\\u5B83\\u5305\\u62EC\\u7C7B\\u578B\\uFF08\\u4F8B\\u5982 HTML \\u6807\\u7B7E\\u7684\\u5B57\\u7B26\\u4E32\\u6216 React \\u7EC4\\u4EF6\\uFF09\\u3001props \\u548C children\\u3002React \\u5143\\u7D20\\u662F\\u4F7F\\u7528 JSX \\u8BED\\u6CD5\\u6216 \",(0,n.jsx)(e.code,{children:\"React.createElement\"}),\" \\u521B\\u5EFA\\u7684\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const element = <div className=\"greeting\">Hello, world!</div>;\n\n// \\u4F7F\\u7528 React.createElement\nconst element = React.createElement(\n  'div',\n  { className: 'greeting' },\n  'Hello, world!',\n);\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"React component\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E00\\u4E2A \",(0,n.jsx)(e.strong,{children:\"React Component\"}),\" \\u662F\\u4E00\\u4E2A\\u53EF\\u91CD\\u7528\\u7684 UI \\u7247\\u6BB5\\uFF0C\\u5B83\\u53EF\\u4EE5\\u63A5\\u53D7\\u8F93\\u5165\\uFF08props\\uFF09\\u5E76\\u8FD4\\u56DE\\u63CF\\u8FF0 UI \\u7684 React \\u5143\\u7D20\\u3002 \\u6709\\u4E24\\u79CD\\u7C7B\\u578B\\u7684\\u7EC4\\u4EF6\\uFF1A\\u51FD\\u6570\\u7EC4\\u4EF6\\u548C\\u7C7B\\u7EC4\\u4EF6\\u3002\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u51FD\\u6570\\u7EC4\\u4EF6\"}),\"\\uFF1A\\u8FD9\\u4E9B\\u66F4\\u7B80\\u5355\\uFF0C\\u53EA\\u662F\\u5C06 props \\u4F5C\\u4E3A\\u53C2\\u6570\\u5E76\\u8FD4\\u56DE React \\u5143\\u7D20\\u7684\\u51FD\\u6570\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`function Welcome(props) {\n  return <h1>Hello, {props.name}</h1>;\n}\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u7C7B\\u7EC4\\u4EF6\"}),\"\\uFF1A\\u8FD9\\u4E9B\\u662F\\u6269\\u5C55 \",(0,n.jsx)(e.code,{children:\"React.Component\"}),\" \\u7684 ES6 \\u7C7B\\uFF0C\\u5E76\\u4E14\\u5FC5\\u987B\\u5177\\u6709\\u8FD4\\u56DE React \\u5143\\u7D20\\u7684 \",(0,n.jsx)(e.code,{children:\"render\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`class Welcome extends React.Component {\n  render() {\n    return <h1>Hello, {this.props.name}</h1>;\n  }\n}\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/render-and-commit\",children:\"React documentation: Render and commit\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/passing-props-to-a-component\",children:\"React documentation: Passing Props to a Component\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/writing-markup-with-jsx\",children:\"React documentation: Writing Markup with JSX\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React documentation: State: A Component's Memory\"})}),`\n`]})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(s,t)})):s(t)}var C=v;return j(E);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),N=(t,e)=>{for(var c in e)l(t,c,{get:e[c],enumerable:!0})},a=(t,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of R(e))!g.call(t,r)&&r!==c&&l(t,r,{get:()=>e[r],enumerable:!(o=p(e,r))||o.enumerable});return t};var f=(t,e,c)=>(c=t!=null?m(u(t)):{},a(e||!t||!t.__esModule?l(c,\"default\",{value:t,enumerable:!0}):c,t)),j=t=>a(l({},\"__esModule\",{value:!0}),t);var i=x((w,d)=>{d.exports=_jsx_runtime});var C={};N(C,{default:()=>s,frontmatter:()=>v});var n=f(i()),v={title:\"React Node\\u3001React Element \\u548C React Component \\u4E4B\\u95F4\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React Node \\u662F React \\u4E2D\\u7684\\u4EFB\\u4F55\\u53EF\\u6E32\\u67D3\\u5355\\u5143\\uFF0C\\u4F8B\\u5982\\u5143\\u7D20\\u3001\\u5B57\\u7B26\\u4E32\\u3001\\u6570\\u5B57\\u6216 \",(0,n.jsx)(e.code,{children:\"null\"}),\"\\u3002React Element \\u662F\\u4E00\\u4E2A\\u63CF\\u8FF0\\u8981\\u6E32\\u67D3\\u5185\\u5BB9\\u7684\\u4E0D\\u53EF\\u53D8\\u5BF9\\u8C61\\uFF0C\\u4F7F\\u7528 JSX \\u6216 \",(0,n.jsx)(e.code,{children:\"React.createElement\"}),\" \\u521B\\u5EFA\\u3002React Component \\u662F\\u4E00\\u4E2A\\u8FD4\\u56DE React Element \\u7684\\u51FD\\u6570\\u6216\\u7C7B\\uFF0C\\u652F\\u6301\\u521B\\u5EFA\\u53EF\\u91CD\\u7528\\u7684 UI \\u7247\\u6BB5\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"React node\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E00\\u4E2A \",(0,n.jsx)(e.strong,{children:\"React Node\"}),\" \\u662F React \\u6E32\\u67D3\\u7CFB\\u7EDF\\u4E2D\\u6700\\u57FA\\u672C\\u7684\\u5355\\u5143\\u3002\\u5B83\\u53EF\\u4EE5\\u662F\\u4E00\\u4E2A React \\u5143\\u7D20\\u3001\\u4E00\\u4E2A\\u5B57\\u7B26\\u4E32\\u3001\\u4E00\\u4E2A\\u6570\\u5B57\\u3001\\u4E00\\u4E2A\\u5E03\\u5C14\\u503C\\u6216 \",(0,n.jsx)(e.code,{children:\"null\"}),\"\\u3002 \\u57FA\\u672C\\u4E0A\\uFF0C\\u4EFB\\u4F55\\u53EF\\u4EE5\\u5728 React \\u4E2D\\u6E32\\u67D3\\u7684\\u4E1C\\u897F\\u90FD\\u662F\\u4E00\\u4E2A React Node\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const stringNode = 'Hello, world!';\nconst numberNode = 123;\nconst booleanNode = true;\nconst nullNode = null;\nconst elementNode = <div>Hello, world!</div>;\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"React element\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E00\\u4E2A \",(0,n.jsx)(e.strong,{children:\"React Element\"}),\" \\u662F\\u4E00\\u4E2A\\u4E0D\\u53EF\\u53D8\\u7684\\u7EAF\\u5BF9\\u8C61\\uFF0C\\u8868\\u793A\\u60A8\\u5E0C\\u671B\\u5728\\u5C4F\\u5E55\\u4E0A\\u770B\\u5230\\u7684\\u5185\\u5BB9\\u3002\\u5B83\\u5305\\u62EC\\u7C7B\\u578B\\uFF08\\u4F8B\\u5982 HTML \\u6807\\u7B7E\\u7684\\u5B57\\u7B26\\u4E32\\u6216 React \\u7EC4\\u4EF6\\uFF09\\u3001props \\u548C children\\u3002React \\u5143\\u7D20\\u662F\\u4F7F\\u7528 JSX \\u8BED\\u6CD5\\u6216 \",(0,n.jsx)(e.code,{children:\"React.createElement\"}),\" \\u521B\\u5EFA\\u7684\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const element = <div className=\"greeting\">Hello, world!</div>;\n\n// \\u4F7F\\u7528 React.createElement\nconst element = React.createElement(\n  'div',\n  { className: 'greeting' },\n  'Hello, world!',\n);\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"React component\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E00\\u4E2A \",(0,n.jsx)(e.strong,{children:\"React Component\"}),\" \\u662F\\u4E00\\u4E2A\\u53EF\\u91CD\\u7528\\u7684 UI \\u7247\\u6BB5\\uFF0C\\u5B83\\u53EF\\u4EE5\\u63A5\\u53D7\\u8F93\\u5165\\uFF08props\\uFF09\\u5E76\\u8FD4\\u56DE\\u63CF\\u8FF0 UI \\u7684 React \\u5143\\u7D20\\u3002 \\u6709\\u4E24\\u79CD\\u7C7B\\u578B\\u7684\\u7EC4\\u4EF6\\uFF1A\\u51FD\\u6570\\u7EC4\\u4EF6\\u548C\\u7C7B\\u7EC4\\u4EF6\\u3002\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u51FD\\u6570\\u7EC4\\u4EF6\"}),\"\\uFF1A\\u8FD9\\u4E9B\\u66F4\\u7B80\\u5355\\uFF0C\\u53EA\\u662F\\u5C06 props \\u4F5C\\u4E3A\\u53C2\\u6570\\u5E76\\u8FD4\\u56DE React \\u5143\\u7D20\\u7684\\u51FD\\u6570\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`function Welcome(props) {\n  return <h1>Hello, {props.name}</h1>;\n}\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u7C7B\\u7EC4\\u4EF6\"}),\"\\uFF1A\\u8FD9\\u4E9B\\u662F\\u6269\\u5C55 \",(0,n.jsx)(e.code,{children:\"React.Component\"}),\" \\u7684 ES6 \\u7C7B\\uFF0C\\u5E76\\u4E14\\u5FC5\\u987B\\u5177\\u6709\\u8FD4\\u56DE React \\u5143\\u7D20\\u7684 \",(0,n.jsx)(e.code,{children:\"render\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`class Welcome extends React.Component {\n  render() {\n    return <h1>Hello, {this.props.name}</h1>;\n  }\n}\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/render-and-commit\",children:\"React documentation: Render and commit\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/passing-props-to-a-component\",children:\"React documentation: Passing Props to a Component\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/writing-markup-with-jsx\",children:\"React documentation: Writing Markup with JSX\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React documentation: State: A Component's Memory\"})}),`\n`]})]})}function s(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return j(C);})();\n;return Component;"
 }
\ No newline at end of file
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 ef361747f..4b08546fd 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var i in e)c(t,i,{get:e[i],enumerable:!0})},s=(t,e,i,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!x.call(t,o)&&o!==i&&c(t,o,{get:()=>e[o],enumerable:!(r=m(e,o))||r.enumerable});return t};var T=(t,e,i)=>(i=t!=null?h(p(t)):{},s(e||!t||!t.__esModule?c(i,\"default\",{value:t,enumerable:!0}):i,t)),b=t=>s(c({},\"__esModule\",{value:!0}),t);var d=f((_,l)=>{l.exports=_jsx_runtime});var v={};g(v,{default:()=>I,frontmatter:()=>k});var n=T(d()),k={title:\"What is the difference between `setTimeout()`, `setImmediate()`, and `process.nextTick()`?\"};function a(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",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:[(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\" schedules a callback to run after a minimum delay. \",(0,n.jsx)(e.code,{children:\"setImmediate()\"}),\" schedules a callback to run after the current event loop completes. \",(0,n.jsx)(e.code,{children:\"process.nextTick()\"}),\" schedules a callback to run before the next event loop iteration begins.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`setTimeout(() => console.log('setTimeout'), 0);\nsetImmediate(() => console.log('setImmediate'));\nprocess.nextTick(() => console.log('nextTick'));\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"process.nextTick()\"}),\" will execute first, followed by either \",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\" or \",(0,n.jsx)(e.code,{children:\"setImmediate()\"}),\" depending on the environment.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Difference between \",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\", \",(0,n.jsx)(e.code,{children:\"setImmediate()\"}),\", and \",(0,n.jsx)(e.code,{children:\"process.nextTick()\"})]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"setTimeout()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\" is a function that schedules a callback to be executed after a specified delay in milliseconds. The minimum delay is approximately 4ms in modern browsers and Node.js.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`setTimeout(() => {\n  console.log('Executed after at least 1000 milliseconds');\n}, 1000);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"setImmediate()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"setImmediate()\"}),\" is a function available in Node.js that schedules a callback to be executed immediately after the current event loop phase completes. It is similar to \",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\" with a delay of 0, but it is more efficient for immediate execution.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`setImmediate(() => {\n  console.log('Executed after the current event loop phase');\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"process.nextTick()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"process.nextTick()\"}),\" is a function available in Node.js that schedules a callback to be executed before the next event loop iteration begins. It is used for deferring the execution of a function until the current operation completes.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`process.nextTick(() => {\n  console.log('Executed before the next event loop iteration');\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Execution order\"}),`\n`,(0,n.jsx)(e.p,{children:\"The execution order of these functions can be demonstrated with the following example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`setTimeout(() => console.log('setTimeout'), 0);\nsetImmediate(() => console.log('setImmediate'));\nprocess.nextTick(() => console.log('nextTick'));\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"In this example, the output will be:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{children:`nextTick\nsetTimeout or setImmediate (order may vary)\nsetImmediate or setTimeout (order may vary)\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"process.nextTick()\"}),\" will always execute first, followed by either \",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\" or \",(0,n.jsx)(e.code,{children:\"setImmediate()\"}),\", depending on the environment.\"]}),`\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://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/\",children:\"Node.js Event Loop\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/setTimeout\",children:\"MDN Web Docs: setTimeout()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nodejs.org/api/timers.html#timers_setimmediate_callback_args\",children:\"Node.js Documentation: setImmediate()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nodejs.org/api/process.html#process_process_nexttick_callback_args\",children:\"Node.js Documentation: process.nextTick()\"})}),`\n`]})]})}function j(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(a,t)})):a(t)}var I=j;return b(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),T=(t,e)=>{for(var i in e)c(t,i,{get:e[i],enumerable:!0})},l=(t,e,i,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!f.call(t,o)&&o!==i&&c(t,o,{get:()=>e[o],enumerable:!(r=u(e,o))||r.enumerable});return t};var b=(t,e,i)=>(i=t!=null?m(x(t)):{},l(e||!t||!t.__esModule?c(i,\"default\",{value:t,enumerable:!0}):i,t)),k=t=>l(c({},\"__esModule\",{value:!0}),t);var d=g((y,s)=>{s.exports=_jsx_runtime});var j={};T(j,{default:()=>h,frontmatter:()=>I});var n=b(d()),I={title:\"What is the difference between `setTimeout()`, `setImmediate()`, and `process.nextTick()`?\"};function a(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\" schedules a callback to run after a minimum delay. \",(0,n.jsx)(e.code,{children:\"setImmediate()\"}),\" schedules a callback to run after the current event loop completes. \",(0,n.jsx)(e.code,{children:\"process.nextTick()\"}),\" schedules a callback to run before the next event loop iteration begins.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`setTimeout(() => console.log('setTimeout'), 0);\nsetImmediate(() => console.log('setImmediate'));\nprocess.nextTick(() => console.log('nextTick'));\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"process.nextTick()\"}),\" will execute first, followed by either \",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\" or \",(0,n.jsx)(e.code,{children:\"setImmediate()\"}),\" depending on the environment.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Difference between \",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\", \",(0,n.jsx)(e.code,{children:\"setImmediate()\"}),\", and \",(0,n.jsx)(e.code,{children:\"process.nextTick()\"})]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"setTimeout()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\" is a function that schedules a callback to be executed after a specified delay in milliseconds. The minimum delay is approximately 4ms in modern browsers and Node.js.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`setTimeout(() => {\n  console.log('Executed after at least 1000 milliseconds');\n}, 1000);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"setImmediate()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"setImmediate()\"}),\" is a function available in Node.js that schedules a callback to be executed immediately after the current event loop phase completes. It is similar to \",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\" with a delay of 0, but it is more efficient for immediate execution.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`setImmediate(() => {\n  console.log('Executed after the current event loop phase');\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"process.nextTick()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"process.nextTick()\"}),\" is a function available in Node.js that schedules a callback to be executed before the next event loop iteration begins. It is used for deferring the execution of a function until the current operation completes.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`process.nextTick(() => {\n  console.log('Executed before the next event loop iteration');\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Execution order\"}),`\n`,(0,n.jsx)(e.p,{children:\"The execution order of these functions can be demonstrated with the following example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`setTimeout(() => console.log('setTimeout'), 0);\nsetImmediate(() => console.log('setImmediate'));\nprocess.nextTick(() => console.log('nextTick'));\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"In this example, the output will be:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{children:`nextTick\nsetTimeout or setImmediate (order may vary)\nsetImmediate or setTimeout (order may vary)\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"process.nextTick()\"}),\" will always execute first, followed by either \",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\" or \",(0,n.jsx)(e.code,{children:\"setImmediate()\"}),\", depending on the environment.\"]}),`\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://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/\",children:\"Node.js Event Loop\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/setTimeout\",children:\"MDN Web Docs: setTimeout()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nodejs.org/api/timers.html#timers_setimmediate_callback_args\",children:\"Node.js Documentation: setImmediate()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nodejs.org/api/process.html#process_process_nexttick_callback_args\",children:\"Node.js Documentation: process.nextTick()\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(a,{...t})}):a(t)}return k(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/zh-CN.json
index b60f7662e..e0c278a51 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var g=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),x=(c,e)=>{for(var t in e)o(c,t,{get:e[t],enumerable:!0})},r=(c,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!T.call(c,i)&&i!==t&&o(c,i,{get:()=>e[i],enumerable:!(s=m(e,i))||s.enumerable});return c};var j=(c,e,t)=>(t=c!=null?a(u(c)):{},r(e||!c||!c.__esModule?o(t,\"default\",{value:c,enumerable:!0}):t,c)),k=c=>r(o({},\"__esModule\",{value:!0}),c);var l=g((v,d)=>{d.exports=_jsx_runtime});var N={};x(N,{default:()=>f,frontmatter:()=>I});var n=j(l()),I={title:\"setTimeout()\\u3001setImmediate() \\u548C process.nextTick() \\u4E4B\\u95F4\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function h(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\" \\u5B89\\u6392\\u5728\\u6700\\u77ED\\u5EF6\\u8FDF\\u540E\\u8FD0\\u884C\\u56DE\\u8C03\\u3002\",(0,n.jsx)(e.code,{children:\"setImmediate()\"}),\" \\u5B89\\u6392\\u5728\\u5F53\\u524D\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u5B8C\\u6210\\u540E\\u8FD0\\u884C\\u56DE\\u8C03\\u3002\",(0,n.jsx)(e.code,{children:\"process.nextTick()\"}),\" \\u5B89\\u6392\\u5728\\u4E0B\\u4E00\\u4E2A\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u8FED\\u4EE3\\u5F00\\u59CB\\u4E4B\\u524D\\u8FD0\\u884C\\u56DE\\u8C03\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`setTimeout(() => console.log('setTimeout'), 0);\nsetImmediate(() => console.log('setImmediate'));\nprocess.nextTick(() => console.log('nextTick'));\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"process.nextTick()\"}),\" \\u5C06\\u9996\\u5148\\u6267\\u884C\\uFF0C\\u7136\\u540E\\u662F \",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"setImmediate()\"}),\"\\uFF0C\\u5177\\u4F53\\u53D6\\u51B3\\u4E8E\\u73AF\\u5883\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"setImmediate()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"process.nextTick()\"}),\" \\u4E4B\\u95F4\\u7684\\u533A\\u522B\"]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"setTimeout()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\" \\u662F\\u4E00\\u4E2A\\u51FD\\u6570\\uFF0C\\u5B83\\u5B89\\u6392\\u5728\\u6307\\u5B9A\\u7684\\u5EF6\\u8FDF\\uFF08\\u4EE5\\u6BEB\\u79D2\\u4E3A\\u5355\\u4F4D\\uFF09\\u540E\\u6267\\u884C\\u56DE\\u8C03\\u3002\\u5728\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u548C Node.js \\u4E2D\\uFF0C\\u6700\\u77ED\\u5EF6\\u8FDF\\u5927\\u7EA6\\u4E3A 4 \\u6BEB\\u79D2\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`setTimeout(() => {\n  console.log('Executed after at least 1000 milliseconds');\n}, 1000);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"setImmediate()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"setImmediate()\"}),\" \\u662F Node.js \\u4E2D\\u53EF\\u7528\\u7684\\u4E00\\u4E2A\\u51FD\\u6570\\uFF0C\\u5B83\\u5B89\\u6392\\u5728\\u5F53\\u524D\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u9636\\u6BB5\\u5B8C\\u6210\\u540E\\u7ACB\\u5373\\u6267\\u884C\\u56DE\\u8C03\\u3002\\u5B83\\u7C7B\\u4F3C\\u4E8E\\u5EF6\\u8FDF\\u4E3A 0 \\u7684 \",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\"\\uFF0C\\u4F46\\u5BF9\\u4E8E\\u7ACB\\u5373\\u6267\\u884C\\uFF0C\\u5B83\\u66F4\\u6709\\u6548\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`setImmediate(() => {\n  console.log('Executed after the current event loop phase');\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"process.nextTick()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"process.nextTick()\"}),\" \\u662F Node.js \\u4E2D\\u53EF\\u7528\\u7684\\u4E00\\u4E2A\\u51FD\\u6570\\uFF0C\\u5B83\\u5B89\\u6392\\u5728\\u4E0B\\u4E00\\u4E2A\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u8FED\\u4EE3\\u5F00\\u59CB\\u4E4B\\u524D\\u6267\\u884C\\u56DE\\u8C03\\u3002\\u5B83\\u7528\\u4E8E\\u5C06\\u51FD\\u6570\\u7684\\u6267\\u884C\\u63A8\\u8FDF\\u5230\\u5F53\\u524D\\u64CD\\u4F5C\\u5B8C\\u6210\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`process.nextTick(() => {\n  console.log('Executed before the next event loop iteration');\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6267\\u884C\\u987A\\u5E8F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u793A\\u4F8B\\u6F14\\u793A\\u4E86\\u8FD9\\u4E9B\\u51FD\\u6570\\u7684\\u6267\\u884C\\u987A\\u5E8F\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`setTimeout(() => console.log('setTimeout'), 0);\nsetImmediate(() => console.log('setImmediate'));\nprocess.nextTick(() => console.log('nextTick'));\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u8F93\\u51FA\\u5C06\\u662F\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{children:`nextTick\nsetTimeout or setImmediate (order may vary)\nsetImmediate or setTimeout (order may vary)\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"process.nextTick()\"}),\" \\u5C06\\u59CB\\u7EC8\\u9996\\u5148\\u6267\\u884C\\uFF0C\\u7136\\u540E\\u662F \",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"setImmediate()\"}),\"\\uFF0C\\u5177\\u4F53\\u53D6\\u51B3\\u4E8E\\u73AF\\u5883\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/\",children:\"Node.js \\u4E8B\\u4EF6\\u5FAA\\u73AF\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/setTimeout\",children:\"MDN Web \\u6587\\u6863\\uFF1AsetTimeout()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nodejs.org/api/timers.html#timers_setimmediate_callback_args\",children:\"Node.js \\u6587\\u6863\\uFF1AsetImmediate()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nodejs.org/api/process.html#process_process_nexttick_callback_args\",children:\"Node.js \\u6587\\u6863\\uFF1Aprocess.nextTick()\"})}),`\n`]})]})}function _(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(h,c)})):h(c)}var f=_;return k(N);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),j=(c,e)=>{for(var t in e)i(c,t,{get:e[t],enumerable:!0})},s=(c,e,t,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!x.call(c,o)&&o!==t&&i(c,o,{get:()=>e[o],enumerable:!(r=p(e,o))||r.enumerable});return c};var k=(c,e,t)=>(t=c!=null?m(T(c)):{},s(e||!c||!c.__esModule?i(t,\"default\",{value:c,enumerable:!0}):t,c)),I=c=>s(i({},\"__esModule\",{value:!0}),c);var l=g((v,d)=>{d.exports=_jsx_runtime});var f={};j(f,{default:()=>a,frontmatter:()=>_});var n=k(l()),_={title:\"setTimeout()\\u3001setImmediate() \\u548C process.nextTick() \\u4E4B\\u95F4\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function h(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\" \\u5B89\\u6392\\u5728\\u6700\\u77ED\\u5EF6\\u8FDF\\u540E\\u8FD0\\u884C\\u56DE\\u8C03\\u3002\",(0,n.jsx)(e.code,{children:\"setImmediate()\"}),\" \\u5B89\\u6392\\u5728\\u5F53\\u524D\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u5B8C\\u6210\\u540E\\u8FD0\\u884C\\u56DE\\u8C03\\u3002\",(0,n.jsx)(e.code,{children:\"process.nextTick()\"}),\" \\u5B89\\u6392\\u5728\\u4E0B\\u4E00\\u4E2A\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u8FED\\u4EE3\\u5F00\\u59CB\\u4E4B\\u524D\\u8FD0\\u884C\\u56DE\\u8C03\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`setTimeout(() => console.log('setTimeout'), 0);\nsetImmediate(() => console.log('setImmediate'));\nprocess.nextTick(() => console.log('nextTick'));\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"process.nextTick()\"}),\" \\u5C06\\u9996\\u5148\\u6267\\u884C\\uFF0C\\u7136\\u540E\\u662F \",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"setImmediate()\"}),\"\\uFF0C\\u5177\\u4F53\\u53D6\\u51B3\\u4E8E\\u73AF\\u5883\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"setImmediate()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"process.nextTick()\"}),\" \\u4E4B\\u95F4\\u7684\\u533A\\u522B\"]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"setTimeout()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\" \\u662F\\u4E00\\u4E2A\\u51FD\\u6570\\uFF0C\\u5B83\\u5B89\\u6392\\u5728\\u6307\\u5B9A\\u7684\\u5EF6\\u8FDF\\uFF08\\u4EE5\\u6BEB\\u79D2\\u4E3A\\u5355\\u4F4D\\uFF09\\u540E\\u6267\\u884C\\u56DE\\u8C03\\u3002\\u5728\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u548C Node.js \\u4E2D\\uFF0C\\u6700\\u77ED\\u5EF6\\u8FDF\\u5927\\u7EA6\\u4E3A 4 \\u6BEB\\u79D2\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`setTimeout(() => {\n  console.log('Executed after at least 1000 milliseconds');\n}, 1000);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"setImmediate()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"setImmediate()\"}),\" \\u662F Node.js \\u4E2D\\u53EF\\u7528\\u7684\\u4E00\\u4E2A\\u51FD\\u6570\\uFF0C\\u5B83\\u5B89\\u6392\\u5728\\u5F53\\u524D\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u9636\\u6BB5\\u5B8C\\u6210\\u540E\\u7ACB\\u5373\\u6267\\u884C\\u56DE\\u8C03\\u3002\\u5B83\\u7C7B\\u4F3C\\u4E8E\\u5EF6\\u8FDF\\u4E3A 0 \\u7684 \",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\"\\uFF0C\\u4F46\\u5BF9\\u4E8E\\u7ACB\\u5373\\u6267\\u884C\\uFF0C\\u5B83\\u66F4\\u6709\\u6548\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`setImmediate(() => {\n  console.log('Executed after the current event loop phase');\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"process.nextTick()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"process.nextTick()\"}),\" \\u662F Node.js \\u4E2D\\u53EF\\u7528\\u7684\\u4E00\\u4E2A\\u51FD\\u6570\\uFF0C\\u5B83\\u5B89\\u6392\\u5728\\u4E0B\\u4E00\\u4E2A\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u8FED\\u4EE3\\u5F00\\u59CB\\u4E4B\\u524D\\u6267\\u884C\\u56DE\\u8C03\\u3002\\u5B83\\u7528\\u4E8E\\u5C06\\u51FD\\u6570\\u7684\\u6267\\u884C\\u63A8\\u8FDF\\u5230\\u5F53\\u524D\\u64CD\\u4F5C\\u5B8C\\u6210\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`process.nextTick(() => {\n  console.log('Executed before the next event loop iteration');\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6267\\u884C\\u987A\\u5E8F\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE5\\u4E0B\\u793A\\u4F8B\\u6F14\\u793A\\u4E86\\u8FD9\\u4E9B\\u51FD\\u6570\\u7684\\u6267\\u884C\\u987A\\u5E8F\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`setTimeout(() => console.log('setTimeout'), 0);\nsetImmediate(() => console.log('setImmediate'));\nprocess.nextTick(() => console.log('nextTick'));\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u8F93\\u51FA\\u5C06\\u662F\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{children:`nextTick\nsetTimeout or setImmediate (order may vary)\nsetImmediate or setTimeout (order may vary)\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"process.nextTick()\"}),\" \\u5C06\\u59CB\\u7EC8\\u9996\\u5148\\u6267\\u884C\\uFF0C\\u7136\\u540E\\u662F \",(0,n.jsx)(e.code,{children:\"setTimeout()\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"setImmediate()\"}),\"\\uFF0C\\u5177\\u4F53\\u53D6\\u51B3\\u4E8E\\u73AF\\u5883\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/\",children:\"Node.js \\u4E8B\\u4EF6\\u5FAA\\u73AF\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/setTimeout\",children:\"MDN Web \\u6587\\u6863\\uFF1AsetTimeout()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nodejs.org/api/timers.html#timers_setimmediate_callback_args\",children:\"Node.js \\u6587\\u6863\\uFF1AsetImmediate()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://nodejs.org/api/process.html#process_process_nexttick_callback_args\",children:\"Node.js \\u6587\\u6863\\uFF1Aprocess.nextTick()\"})}),`\n`]})]})}function a(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(h,{...c})}):h(c)}return I(f);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-state-and-props-in-react/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-state-and-props-in-react/en-US.json
index bb114e83c..d03e0d5c9 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-state-and-props-in-react/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-state-and-props-in-react/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-difference-between-state-and-props-in-react/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),b=(t,n)=>{for(var o in n)r(t,o,{get:n[o],enumerable:!0})},s=(t,n,o,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let a of m(n))!f.call(t,a)&&a!==o&&r(t,a,{get:()=>n[a],enumerable:!(c=p(n,a))||c.enumerable});return t};var C=(t,n,o)=>(o=t!=null?l(u(t)):{},s(n||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),x=t=>s(r({},\"__esModule\",{value:!0}),t);var d=g((R,i)=>{i.exports=_jsx_runtime});var j={};b(j,{default:()=>S,frontmatter:()=>w});var e=C(d()),w={title:\"What is the difference between state and props in React?\"};function h(t){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",pre:\"pre\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"In React, \",(0,e.jsx)(n.code,{children:\"state\"}),\" is a local data storage that is managed within a component and can change over time, while \",(0,e.jsx)(n.code,{children:\"props\"}),\" are read-only attributes passed from a parent component to a child component. State is used for data that changes within a component, whereas props are used to pass data and event handlers to child components.\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"What is the difference between state and props in React?\"}),`\n`,(0,e.jsx)(n.h3,{children:\"State\"}),`\n`,(0,e.jsx)(n.p,{children:\"State is a built-in object in React components that holds data or information about the component. It is managed within the component and can change over time, usually in response to user actions or network responses. When the state changes, the component re-renders to reflect the new state.\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"State is local to the component and cannot be accessed or modified outside of it\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"State can be initialized in the constructor of a class component or using the \",(0,e.jsx)(n.code,{children:\"useState\"}),\" hook in a functional component\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"State changes are asynchronous and should be done using the \",(0,e.jsx)(n.code,{children:\"setState\"}),\" method in class components or the updater function returned by \",(0,e.jsx)(n.code,{children:\"useState\"}),\" in functional components\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"Example of state in a class component:\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`class MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      count: 0,\n    };\n  }\n\n  increment = () => {\n    this.setState({ count: this.state.count + 1 });\n  };\n\n  render() {\n    return (\n      <div>\n        <p>Count: {this.state.count}</p>\n        <button onClick={this.increment}>Increment</button>\n      </div>\n    );\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"Example of state in a functional component:\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`import React, { useState } from 'react';\n\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(count + 1)}>Increment</button>\n    </div>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Props\"}),`\n`,(0,e.jsx)(n.p,{children:\"Props (short for properties) are read-only attributes passed from a parent component to a child component. They are used to pass data and event handlers down the component tree. Props are immutable, meaning they cannot be changed by the child component.\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"Props are passed to the child component as an argument to the component function or as a property on the \",(0,e.jsx)(n.code,{children:\"this\"}),\" object in class components\"]}),`\n`,(0,e.jsx)(n.li,{children:\"Props allow components to be reusable by passing different data to them\"}),`\n`,(0,e.jsx)(n.li,{children:\"Props can be used to pass functions as well, enabling child components to communicate with parent components\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"Example of props in a class component:\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`class ParentComponent extends React.Component {\n  render() {\n    return <ChildComponent message=\"Hello, World!\" />;\n  }\n}\n\nclass ChildComponent extends React.Component {\n  render() {\n    return <p>{this.props.message}</p>;\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"Example of props in a functional component:\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function ParentComponent() {\n  return <ChildComponent message=\"Hello, World!\" />;\n}\n\nfunction ChildComponent(props) {\n  return <p>{props.message}</p>;\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Key differences\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"State is managed within the component, while props are passed from a parent component\"}),`\n`,(0,e.jsx)(n.li,{children:\"State can change over time, while props are immutable\"}),`\n`,(0,e.jsx)(n.li,{children:\"State is used for data that changes within a component, while props are used to pass data and event handlers to child components\"}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React documentation on state\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/passing-props-to-a-component\",children:\"React documentation on components and props\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react/hooks\",children:\"React Hooks documentation\"})}),`\n`]})]})}function y(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(h,t)})):h(t)}var S=y;return x(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),C=(t,n)=>{for(var o in n)r(t,o,{get:n[o],enumerable:!0})},s=(t,n,o,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let a of u(n))!g.call(t,a)&&a!==o&&r(t,a,{get:()=>n[a],enumerable:!(c=m(n,a))||c.enumerable});return t};var x=(t,n,o)=>(o=t!=null?p(f(t)):{},s(n||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),w=t=>s(r({},\"__esModule\",{value:!0}),t);var d=b((R,i)=>{i.exports=_jsx_runtime});var S={};C(S,{default:()=>l,frontmatter:()=>y});var e=x(d()),y={title:\"What is the difference between state and props in React?\"};function h(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"In React, \",(0,e.jsx)(n.code,{children:\"state\"}),\" is a local data storage that is managed within a component and can change over time, while \",(0,e.jsx)(n.code,{children:\"props\"}),\" are read-only attributes passed from a parent component to a child component. State is used for data that changes within a component, whereas props are used to pass data and event handlers to child components.\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"What is the difference between state and props in React?\"}),`\n`,(0,e.jsx)(n.h3,{children:\"State\"}),`\n`,(0,e.jsx)(n.p,{children:\"State is a built-in object in React components that holds data or information about the component. It is managed within the component and can change over time, usually in response to user actions or network responses. When the state changes, the component re-renders to reflect the new state.\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"State is local to the component and cannot be accessed or modified outside of it\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"State can be initialized in the constructor of a class component or using the \",(0,e.jsx)(n.code,{children:\"useState\"}),\" hook in a functional component\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"State changes are asynchronous and should be done using the \",(0,e.jsx)(n.code,{children:\"setState\"}),\" method in class components or the updater function returned by \",(0,e.jsx)(n.code,{children:\"useState\"}),\" in functional components\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"Example of state in a class component:\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`class MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      count: 0,\n    };\n  }\n\n  increment = () => {\n    this.setState({ count: this.state.count + 1 });\n  };\n\n  render() {\n    return (\n      <div>\n        <p>Count: {this.state.count}</p>\n        <button onClick={this.increment}>Increment</button>\n      </div>\n    );\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"Example of state in a functional component:\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`import React, { useState } from 'react';\n\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(count + 1)}>Increment</button>\n    </div>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Props\"}),`\n`,(0,e.jsx)(n.p,{children:\"Props (short for properties) are read-only attributes passed from a parent component to a child component. They are used to pass data and event handlers down the component tree. Props are immutable, meaning they cannot be changed by the child component.\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"Props are passed to the child component as an argument to the component function or as a property on the \",(0,e.jsx)(n.code,{children:\"this\"}),\" object in class components\"]}),`\n`,(0,e.jsx)(n.li,{children:\"Props allow components to be reusable by passing different data to them\"}),`\n`,(0,e.jsx)(n.li,{children:\"Props can be used to pass functions as well, enabling child components to communicate with parent components\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"Example of props in a class component:\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`class ParentComponent extends React.Component {\n  render() {\n    return <ChildComponent message=\"Hello, World!\" />;\n  }\n}\n\nclass ChildComponent extends React.Component {\n  render() {\n    return <p>{this.props.message}</p>;\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"Example of props in a functional component:\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function ParentComponent() {\n  return <ChildComponent message=\"Hello, World!\" />;\n}\n\nfunction ChildComponent(props) {\n  return <p>{props.message}</p>;\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Key differences\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"State is managed within the component, while props are passed from a parent component\"}),`\n`,(0,e.jsx)(n.li,{children:\"State can change over time, while props are immutable\"}),`\n`,(0,e.jsx)(n.li,{children:\"State is used for data that changes within a component, while props are used to pass data and event handlers to child components\"}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React documentation on state\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/passing-props-to-a-component\",children:\"React documentation on components and props\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react/hooks\",children:\"React Hooks documentation\"})}),`\n`]})]})}function l(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(h,{...t})}):h(t)}return w(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-state-and-props-in-react/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-state-and-props-in-react/zh-CN.json
index 6214e047b..43d3126b3 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-state-and-props-in-react/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-state-and-props-in-react/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-difference-between-state-and-props-in-react/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var g=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),x=(t,n)=>{for(var r in n)c(t,r,{get:n[r],enumerable:!0})},i=(t,n,r,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of u(n))!C.call(t,o)&&o!==r&&c(t,o,{get:()=>n[o],enumerable:!(s=h(n,o))||s.enumerable});return t};var S=(t,n,r)=>(r=t!=null?p(m(t)):{},i(n||!t||!t.__esModule?c(r,\"default\",{value:t,enumerable:!0}):r,t)),f=t=>i(c({},\"__esModule\",{value:!0}),t);var a=g((b,l)=>{l.exports=_jsx_runtime});var v={};x(v,{default:()=>P,frontmatter:()=>R});var e=S(a()),R={title:\"React \\u4E2D state \\u548C props \\u7684\\u533A\\u522B\\u662F\\u4EC0\\u4E48\\uFF1F\"};function d(t){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",pre:\"pre\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 React \\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"state\"}),\" \\u662F\\u5728\\u7EC4\\u4EF6\\u5185\\u90E8\\u7BA1\\u7406\\u5E76\\u53EF\\u4EE5\\u968F\\u65F6\\u95F4\\u53D8\\u5316\\u7684\\u6570\\u636E\\u5B58\\u50A8\\uFF0C\\u800C \",(0,e.jsx)(n.code,{children:\"props\"}),\" \\u662F\\u4ECE\\u7236\\u7EC4\\u4EF6\\u4F20\\u9012\\u7ED9\\u5B50\\u7EC4\\u4EF6\\u7684\\u53EA\\u8BFB\\u5C5E\\u6027\\u3002State \\u7528\\u4E8E\\u7EC4\\u4EF6\\u5185\\u53D8\\u5316\\u7684\\u6570\\u636E\\uFF0C\\u800C props \\u7528\\u4E8E\\u5C06\\u6570\\u636E\\u548C\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4F20\\u9012\\u7ED9\\u5B50\\u7EC4\\u4EF6\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u4E2D state \\u548C props \\u7684\\u533A\\u522B\\u662F\\u4EC0\\u4E48\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"State\"}),`\n`,(0,e.jsx)(n.p,{children:\"State \\u662F React \\u7EC4\\u4EF6\\u4E2D\\u7684\\u4E00\\u4E2A\\u5185\\u7F6E\\u5BF9\\u8C61\\uFF0C\\u7528\\u4E8E\\u4FDD\\u5B58\\u5173\\u4E8E\\u7EC4\\u4EF6\\u7684\\u6570\\u636E\\u6216\\u4FE1\\u606F\\u3002\\u5B83\\u5728\\u7EC4\\u4EF6\\u5185\\u90E8\\u8FDB\\u884C\\u7BA1\\u7406\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u968F\\u65F6\\u95F4\\u53D8\\u5316\\uFF0C\\u901A\\u5E38\\u662F\\u54CD\\u5E94\\u7528\\u6237\\u64CD\\u4F5C\\u6216\\u7F51\\u7EDC\\u54CD\\u5E94\\u3002\\u5F53 state \\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0C\\u7EC4\\u4EF6\\u4F1A\\u91CD\\u65B0\\u6E32\\u67D3\\u4EE5\\u53CD\\u6620\\u65B0\\u7684 state\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"State \\u662F\\u7EC4\\u4EF6\\u5C40\\u90E8\\u7684\\uFF0C\\u65E0\\u6CD5\\u5728\\u7EC4\\u4EF6\\u5916\\u90E8\\u8BBF\\u95EE\\u6216\\u4FEE\\u6539\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"State \\u53EF\\u4EE5\\u5728\\u7C7B\\u7EC4\\u4EF6\\u7684\\u6784\\u9020\\u51FD\\u6570\\u4E2D\\u521D\\u59CB\\u5316\\uFF0C\\u6216\\u8005\\u5728\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E2D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useState\"}),\" hook\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"State \\u7684\\u53D8\\u5316\\u662F\\u5F02\\u6B65\\u7684\\uFF0C\\u5E94\\u8BE5\\u4F7F\\u7528\\u7C7B\\u7EC4\\u4EF6\\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"setState\"}),\" \\u65B9\\u6CD5\\u6216\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E2D \",(0,e.jsx)(n.code,{children:\"useState\"}),\" \\u8FD4\\u56DE\\u7684\\u66F4\\u65B0\\u51FD\\u6570\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7C7B\\u7EC4\\u4EF6\\u4E2D state \\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`class MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      count: 0,\n    };\n  }\n\n  increment = () => {\n    this.setState({ count: this.state.count + 1 });\n  };\n\n  render() {\n    return (\n      <div>\n        <p>Count: {this.state.count}</p>\n        <button onClick={this.increment}>Increment</button>\n      </div>\n    );\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E2D state \\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`import React, { useState } from 'react';\n\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(count + 1)}>Increment</button>\n    </div>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Props\"}),`\n`,(0,e.jsx)(n.p,{children:\"Props\\uFF08\\u5C5E\\u6027\\u7684\\u7B80\\u79F0\\uFF09\\u662F\\u4ECE\\u7236\\u7EC4\\u4EF6\\u4F20\\u9012\\u7ED9\\u5B50\\u7EC4\\u4EF6\\u7684\\u53EA\\u8BFB\\u5C5E\\u6027\\u3002\\u5B83\\u4EEC\\u7528\\u4E8E\\u5C06\\u6570\\u636E\\u548C\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4F20\\u9012\\u5230\\u7EC4\\u4EF6\\u6811\\u7684\\u4E0B\\u65B9\\u3002Props \\u662F\\u4E0D\\u53EF\\u53D8\\u7684\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4EEC\\u4E0D\\u80FD\\u88AB\\u5B50\\u7EC4\\u4EF6\\u66F4\\u6539\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"Props \\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u5B50\\u7EC4\\u4EF6\\u51FD\\u6570\\uFF0C\\u6216\\u8005\\u4F5C\\u4E3A\\u7C7B\\u7EC4\\u4EF6\\u4E2D \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\"]}),`\n`,(0,e.jsx)(n.li,{children:\"Props \\u5141\\u8BB8\\u901A\\u8FC7\\u5411\\u7EC4\\u4EF6\\u4F20\\u9012\\u4E0D\\u540C\\u7684\\u6570\\u636E\\u6765\\u590D\\u7528\\u7EC4\\u4EF6\"}),`\n`,(0,e.jsx)(n.li,{children:\"Props \\u4E5F\\u53EF\\u4EE5\\u7528\\u6765\\u4F20\\u9012\\u51FD\\u6570\\uFF0C\\u4F7F\\u5B50\\u7EC4\\u4EF6\\u80FD\\u591F\\u4E0E\\u7236\\u7EC4\\u4EF6\\u901A\\u4FE1\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7C7B\\u7EC4\\u4EF6\\u4E2D props \\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`class ParentComponent extends React.Component {\n  render() {\n    return <ChildComponent message=\"Hello, World!\" />;\n  }\n}\n\nclass ChildComponent extends React.Component {\n  render() {\n    return <p>{this.props.message}</p>;\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E2D props \\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function ParentComponent() {\n  return <ChildComponent message=\"Hello, World!\" />;\n}\n\nfunction ChildComponent(props) {\n  return <p>{props.message}</p>;\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5173\\u952E\\u533A\\u522B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"State \\u5728\\u7EC4\\u4EF6\\u5185\\u90E8\\u7BA1\\u7406\\uFF0C\\u800C props \\u4ECE\\u7236\\u7EC4\\u4EF6\\u4F20\\u9012\"}),`\n`,(0,e.jsx)(n.li,{children:\"State \\u53EF\\u4EE5\\u968F\\u65F6\\u95F4\\u53D8\\u5316\\uFF0C\\u800C props \\u662F\\u4E0D\\u53EF\\u53D8\\u7684\"}),`\n`,(0,e.jsx)(n.li,{children:\"State \\u7528\\u4E8E\\u7EC4\\u4EF6\\u5185\\u90E8\\u53D8\\u5316\\u7684\\u6570\\u636E\\uFF0C\\u800C props \\u7528\\u4E8E\\u5411\\u5B50\\u7EC4\\u4EF6\\u4F20\\u9012\\u6570\\u636E\\u548C\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\"}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React documentation on state\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/passing-props-to-a-component\",children:\"React documentation on components and props\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react/hooks\",children:\"React Hooks documentation\"})}),`\n`]})]})}function j(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(d,t)})):d(t)}var P=j;return f(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),S=(t,n)=>{for(var r in n)c(t,r,{get:n[r],enumerable:!0})},l=(t,n,r,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of m(n))!x.call(t,o)&&o!==r&&c(t,o,{get:()=>n[o],enumerable:!(s=u(n,o))||s.enumerable});return t};var f=(t,n,r)=>(r=t!=null?h(C(t)):{},l(n||!t||!t.__esModule?c(r,\"default\",{value:t,enumerable:!0}):r,t)),R=t=>l(c({},\"__esModule\",{value:!0}),t);var a=g((_,i)=>{i.exports=_jsx_runtime});var P={};S(P,{default:()=>p,frontmatter:()=>j});var e=f(a()),j={title:\"React \\u4E2D state \\u548C props \\u7684\\u533A\\u522B\\u662F\\u4EC0\\u4E48\\uFF1F\"};function d(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 React \\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"state\"}),\" \\u662F\\u5728\\u7EC4\\u4EF6\\u5185\\u90E8\\u7BA1\\u7406\\u5E76\\u53EF\\u4EE5\\u968F\\u65F6\\u95F4\\u53D8\\u5316\\u7684\\u6570\\u636E\\u5B58\\u50A8\\uFF0C\\u800C \",(0,e.jsx)(n.code,{children:\"props\"}),\" \\u662F\\u4ECE\\u7236\\u7EC4\\u4EF6\\u4F20\\u9012\\u7ED9\\u5B50\\u7EC4\\u4EF6\\u7684\\u53EA\\u8BFB\\u5C5E\\u6027\\u3002State \\u7528\\u4E8E\\u7EC4\\u4EF6\\u5185\\u53D8\\u5316\\u7684\\u6570\\u636E\\uFF0C\\u800C props \\u7528\\u4E8E\\u5C06\\u6570\\u636E\\u548C\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4F20\\u9012\\u7ED9\\u5B50\\u7EC4\\u4EF6\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u4E2D state \\u548C props \\u7684\\u533A\\u522B\\u662F\\u4EC0\\u4E48\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"State\"}),`\n`,(0,e.jsx)(n.p,{children:\"State \\u662F React \\u7EC4\\u4EF6\\u4E2D\\u7684\\u4E00\\u4E2A\\u5185\\u7F6E\\u5BF9\\u8C61\\uFF0C\\u7528\\u4E8E\\u4FDD\\u5B58\\u5173\\u4E8E\\u7EC4\\u4EF6\\u7684\\u6570\\u636E\\u6216\\u4FE1\\u606F\\u3002\\u5B83\\u5728\\u7EC4\\u4EF6\\u5185\\u90E8\\u8FDB\\u884C\\u7BA1\\u7406\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u968F\\u65F6\\u95F4\\u53D8\\u5316\\uFF0C\\u901A\\u5E38\\u662F\\u54CD\\u5E94\\u7528\\u6237\\u64CD\\u4F5C\\u6216\\u7F51\\u7EDC\\u54CD\\u5E94\\u3002\\u5F53 state \\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0C\\u7EC4\\u4EF6\\u4F1A\\u91CD\\u65B0\\u6E32\\u67D3\\u4EE5\\u53CD\\u6620\\u65B0\\u7684 state\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"State \\u662F\\u7EC4\\u4EF6\\u5C40\\u90E8\\u7684\\uFF0C\\u65E0\\u6CD5\\u5728\\u7EC4\\u4EF6\\u5916\\u90E8\\u8BBF\\u95EE\\u6216\\u4FEE\\u6539\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"State \\u53EF\\u4EE5\\u5728\\u7C7B\\u7EC4\\u4EF6\\u7684\\u6784\\u9020\\u51FD\\u6570\\u4E2D\\u521D\\u59CB\\u5316\\uFF0C\\u6216\\u8005\\u5728\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E2D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useState\"}),\" hook\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"State \\u7684\\u53D8\\u5316\\u662F\\u5F02\\u6B65\\u7684\\uFF0C\\u5E94\\u8BE5\\u4F7F\\u7528\\u7C7B\\u7EC4\\u4EF6\\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"setState\"}),\" \\u65B9\\u6CD5\\u6216\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E2D \",(0,e.jsx)(n.code,{children:\"useState\"}),\" \\u8FD4\\u56DE\\u7684\\u66F4\\u65B0\\u51FD\\u6570\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7C7B\\u7EC4\\u4EF6\\u4E2D state \\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`class MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      count: 0,\n    };\n  }\n\n  increment = () => {\n    this.setState({ count: this.state.count + 1 });\n  };\n\n  render() {\n    return (\n      <div>\n        <p>Count: {this.state.count}</p>\n        <button onClick={this.increment}>Increment</button>\n      </div>\n    );\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E2D state \\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`import React, { useState } from 'react';\n\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(count + 1)}>Increment</button>\n    </div>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Props\"}),`\n`,(0,e.jsx)(n.p,{children:\"Props\\uFF08\\u5C5E\\u6027\\u7684\\u7B80\\u79F0\\uFF09\\u662F\\u4ECE\\u7236\\u7EC4\\u4EF6\\u4F20\\u9012\\u7ED9\\u5B50\\u7EC4\\u4EF6\\u7684\\u53EA\\u8BFB\\u5C5E\\u6027\\u3002\\u5B83\\u4EEC\\u7528\\u4E8E\\u5C06\\u6570\\u636E\\u548C\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4F20\\u9012\\u5230\\u7EC4\\u4EF6\\u6811\\u7684\\u4E0B\\u65B9\\u3002Props \\u662F\\u4E0D\\u53EF\\u53D8\\u7684\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4EEC\\u4E0D\\u80FD\\u88AB\\u5B50\\u7EC4\\u4EF6\\u66F4\\u6539\\u3002\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"Props \\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u5B50\\u7EC4\\u4EF6\\u51FD\\u6570\\uFF0C\\u6216\\u8005\\u4F5C\\u4E3A\\u7C7B\\u7EC4\\u4EF6\\u4E2D \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\"]}),`\n`,(0,e.jsx)(n.li,{children:\"Props \\u5141\\u8BB8\\u901A\\u8FC7\\u5411\\u7EC4\\u4EF6\\u4F20\\u9012\\u4E0D\\u540C\\u7684\\u6570\\u636E\\u6765\\u590D\\u7528\\u7EC4\\u4EF6\"}),`\n`,(0,e.jsx)(n.li,{children:\"Props \\u4E5F\\u53EF\\u4EE5\\u7528\\u6765\\u4F20\\u9012\\u51FD\\u6570\\uFF0C\\u4F7F\\u5B50\\u7EC4\\u4EF6\\u80FD\\u591F\\u4E0E\\u7236\\u7EC4\\u4EF6\\u901A\\u4FE1\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7C7B\\u7EC4\\u4EF6\\u4E2D props \\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`class ParentComponent extends React.Component {\n  render() {\n    return <ChildComponent message=\"Hello, World!\" />;\n  }\n}\n\nclass ChildComponent extends React.Component {\n  render() {\n    return <p>{this.props.message}</p>;\n  }\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E2D props \\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function ParentComponent() {\n  return <ChildComponent message=\"Hello, World!\" />;\n}\n\nfunction ChildComponent(props) {\n  return <p>{props.message}</p>;\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5173\\u952E\\u533A\\u522B\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"State \\u5728\\u7EC4\\u4EF6\\u5185\\u90E8\\u7BA1\\u7406\\uFF0C\\u800C props \\u4ECE\\u7236\\u7EC4\\u4EF6\\u4F20\\u9012\"}),`\n`,(0,e.jsx)(n.li,{children:\"State \\u53EF\\u4EE5\\u968F\\u65F6\\u95F4\\u53D8\\u5316\\uFF0C\\u800C props \\u662F\\u4E0D\\u53EF\\u53D8\\u7684\"}),`\n`,(0,e.jsx)(n.li,{children:\"State \\u7528\\u4E8E\\u7EC4\\u4EF6\\u5185\\u90E8\\u53D8\\u5316\\u7684\\u6570\\u636E\\uFF0C\\u800C props \\u7528\\u4E8E\\u5411\\u5B50\\u7EC4\\u4EF6\\u4F20\\u9012\\u6570\\u636E\\u548C\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\"}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React documentation on state\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/passing-props-to-a-component\",children:\"React documentation on components and props\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/reference/react/hooks\",children:\"React Hooks documentation\"})}),`\n`]})]})}function p(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(d,{...t})}):d(t)}return R(P);})();\n;return Component;"
 }
\ No newline at end of file
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 9eda42cf6..bb55778a9 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var i=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},r=(t,e,o,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!u.call(t,c)&&c!==o&&i(t,c,{get:()=>e[c],enumerable:!(d=w(e,c))||d.enumerable});return t};var j=(t,e,o)=>(o=t!=null?a(p(t)):{},r(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),f=t=>r(i({},\"__esModule\",{value:!0}),t);var h=b((I,l)=>{l.exports=_jsx_runtime});var W={};g(W,{default:()=>y,frontmatter:()=>D});var n=j(h()),D={title:\"What is the difference between the Window object and the Document object?\"};function s(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",pre:\"pre\",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 \",(0,n.jsx)(e.code,{children:\"Window\"}),\" object represents the browser window and provides methods to control it, such as opening new windows or accessing the browser history. The \",(0,n.jsx)(e.code,{children:\"Document\"}),\" object represents the content of the web page loaded in the window and provides methods to manipulate the DOM, such as selecting elements or modifying their content.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Difference between the Window object and the Document object\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Window object\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Window\"}),\" object is the global object in a web browser environment. It represents the browser window or frame that contains a DOM document. Here are some key points about the \",(0,n.jsx)(e.code,{children:\"Window\"}),\" object:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"It provides methods to control the browser window, such as \",(0,n.jsx)(e.code,{children:\"window.open()\"}),\", \",(0,n.jsx)(e.code,{children:\"window.close()\"}),\", and \",(0,n.jsx)(e.code,{children:\"window.alert()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"It gives access to the browser's history through \",(0,n.jsx)(e.code,{children:\"window.history\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"It allows interaction with the browser's location (URL) via \",(0,n.jsx)(e.code,{children:\"window.location\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"It can be used to set and clear timers with \",(0,n.jsx)(e.code,{children:\"window.setTimeout()\"}),\" and \",(0,n.jsx)(e.code,{children:\"window.setInterval()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"It is the global execution context, meaning all global variables and functions are properties of the \",(0,n.jsx)(e.code,{children:\"Window\"}),\" object.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Open a new window\nwindow.open('https://www.example.com');\n\n// Display an alert\nwindow.alert('Hello, world!');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Document object\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Document\"}),\" object represents the HTML or XML document loaded in the browser window. It is a property of the \",(0,n.jsx)(e.code,{children:\"Window\"}),\" object (\",(0,n.jsx)(e.code,{children:\"window.document\"}),\"). Here are some key points about the \",(0,n.jsx)(e.code,{children:\"Document\"}),\" object:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"It provides methods to select elements, such as \",(0,n.jsx)(e.code,{children:\"document.getElementById()\"}),\", \",(0,n.jsx)(e.code,{children:\"document.querySelector()\"}),\", and \",(0,n.jsx)(e.code,{children:\"document.getElementsByClassName()\"}),\".\"]}),`\n`,(0,n.jsx)(e.li,{children:\"It allows manipulation of the DOM, including creating, removing, and modifying elements.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"It provides properties to access the document's metadata, such as \",(0,n.jsx)(e.code,{children:\"document.title\"}),\" and \",(0,n.jsx)(e.code,{children:\"document.URL\"}),\".\"]}),`\n`,(0,n.jsx)(e.li,{children:\"It can be used to listen for and handle events within the document.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a new element and append it to the document body\nconst newElement = document.createElement('div');\nnewElement.id = 'myDiv';\nnewElement.textContent = 'Hello world';\ndocument.body.appendChild(newElement);\n\n// Select that element by its ID\nconst element = document.getElementById('myDiv');\n\nconsole.log(element);\nconsole.log(document.body);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Key differences\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Window\"}),\" object represents the browser window, while the \",(0,n.jsx)(e.code,{children:\"Document\"}),\" object represents the content of the web page.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Window\"}),\" object provides methods to control the browser window and interact with the browser environment, whereas the \",(0,n.jsx)(e.code,{children:\"Document\"}),\" object provides methods to manipulate the DOM and interact with the content of the web page.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Window\"}),\" object is the global execution context, meaning all global variables and functions are properties of the \",(0,n.jsx)(e.code,{children:\"Window\"}),\" object. The \",(0,n.jsx)(e.code,{children:\"Document\"}),\" object is a property of the \",(0,n.jsx)(e.code,{children:\"Window\"}),\" object.\"]}),`\n`]}),`\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/Web/API/Window\",children:\"MDN Web Docs: Window\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Document\",children:\"MDN Web Docs: Document\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/browser-environment\",children:\"JavaScript.info: Browser environment, specs\"})}),`\n`]})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(s,t)})):s(t)}var y=v;return f(W);})();\n;return Component;"
+  "solution": "var Component=(()=>{var w=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),j=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},r=(t,e,o,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!b.call(t,c)&&c!==o&&i(t,c,{get:()=>e[c],enumerable:!(d=m(e,c))||d.enumerable});return t};var f=(t,e,o)=>(o=t!=null?w(u(t)):{},r(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),D=t=>r(i({},\"__esModule\",{value:!0}),t);var h=g((x,l)=>{l.exports=_jsx_runtime});var y={};j(y,{default:()=>a,frontmatter:()=>v});var n=f(h()),v={title:\"What is the difference between the Window object and the Document object?\"};function s(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...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 \",(0,n.jsx)(e.code,{children:\"Window\"}),\" object represents the browser window and provides methods to control it, such as opening new windows or accessing the browser history. The \",(0,n.jsx)(e.code,{children:\"Document\"}),\" object represents the content of the web page loaded in the window and provides methods to manipulate the DOM, such as selecting elements or modifying their content.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Difference between the Window object and the Document object\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Window object\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Window\"}),\" object is the global object in a web browser environment. It represents the browser window or frame that contains a DOM document. Here are some key points about the \",(0,n.jsx)(e.code,{children:\"Window\"}),\" object:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"It provides methods to control the browser window, such as \",(0,n.jsx)(e.code,{children:\"window.open()\"}),\", \",(0,n.jsx)(e.code,{children:\"window.close()\"}),\", and \",(0,n.jsx)(e.code,{children:\"window.alert()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"It gives access to the browser's history through \",(0,n.jsx)(e.code,{children:\"window.history\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"It allows interaction with the browser's location (URL) via \",(0,n.jsx)(e.code,{children:\"window.location\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"It can be used to set and clear timers with \",(0,n.jsx)(e.code,{children:\"window.setTimeout()\"}),\" and \",(0,n.jsx)(e.code,{children:\"window.setInterval()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"It is the global execution context, meaning all global variables and functions are properties of the \",(0,n.jsx)(e.code,{children:\"Window\"}),\" object.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Open a new window\nwindow.open('https://www.example.com');\n\n// Display an alert\nwindow.alert('Hello, world!');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Document object\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Document\"}),\" object represents the HTML or XML document loaded in the browser window. It is a property of the \",(0,n.jsx)(e.code,{children:\"Window\"}),\" object (\",(0,n.jsx)(e.code,{children:\"window.document\"}),\"). Here are some key points about the \",(0,n.jsx)(e.code,{children:\"Document\"}),\" object:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"It provides methods to select elements, such as \",(0,n.jsx)(e.code,{children:\"document.getElementById()\"}),\", \",(0,n.jsx)(e.code,{children:\"document.querySelector()\"}),\", and \",(0,n.jsx)(e.code,{children:\"document.getElementsByClassName()\"}),\".\"]}),`\n`,(0,n.jsx)(e.li,{children:\"It allows manipulation of the DOM, including creating, removing, and modifying elements.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"It provides properties to access the document's metadata, such as \",(0,n.jsx)(e.code,{children:\"document.title\"}),\" and \",(0,n.jsx)(e.code,{children:\"document.URL\"}),\".\"]}),`\n`,(0,n.jsx)(e.li,{children:\"It can be used to listen for and handle events within the document.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create a new element and append it to the document body\nconst newElement = document.createElement('div');\nnewElement.id = 'myDiv';\nnewElement.textContent = 'Hello world';\ndocument.body.appendChild(newElement);\n\n// Select that element by its ID\nconst element = document.getElementById('myDiv');\n\nconsole.log(element);\nconsole.log(document.body);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Key differences\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Window\"}),\" object represents the browser window, while the \",(0,n.jsx)(e.code,{children:\"Document\"}),\" object represents the content of the web page.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Window\"}),\" object provides methods to control the browser window and interact with the browser environment, whereas the \",(0,n.jsx)(e.code,{children:\"Document\"}),\" object provides methods to manipulate the DOM and interact with the content of the web page.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Window\"}),\" object is the global execution context, meaning all global variables and functions are properties of the \",(0,n.jsx)(e.code,{children:\"Window\"}),\" object. The \",(0,n.jsx)(e.code,{children:\"Document\"}),\" object is a property of the \",(0,n.jsx)(e.code,{children:\"Window\"}),\" object.\"]}),`\n`]}),`\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/Web/API/Window\",children:\"MDN Web Docs: Window\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Document\",children:\"MDN Web Docs: Document\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/browser-environment\",children:\"JavaScript.info: Browser environment, specs\"})}),`\n`]})]})}function a(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(s,{...t})}):s(t)}return D(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-the-window-object-and-the-document-object/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-the-window-object-and-the-document-object/zh-CN.json
index 95de06e4f..b26f0f58b 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-the-window-object-and-the-document-object/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-the-window-object-and-the-document-object/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-the-window-object-and-the-document-object/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var w=Object.create;var l=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var D=(d,e)=>()=>(e||d((e={exports:{}}).exports,e),e.exports),W=(d,e)=>{for(var c in e)l(d,c,{get:e[c],enumerable:!0})},r=(d,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of a(e))!p.call(d,i)&&i!==c&&l(d,i,{get:()=>e[i],enumerable:!(o=s(e,i))||o.enumerable});return d};var g=(d,e,c)=>(c=d!=null?w(u(d)):{},r(e||!d||!d.__esModule?l(c,\"default\",{value:d,enumerable:!0}):c,d)),x=d=>r(l({},\"__esModule\",{value:!0}),d);var h=D((y,t)=>{t.exports=_jsx_runtime});var j={};W(j,{default:()=>f,frontmatter:()=>M});var n=g(h()),M={title:\"Window \\u5BF9\\u8C61\\u548C Document \\u5BF9\\u8C61\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function m(d){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",pre:\"pre\",a:\"a\"},d.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Window\"}),\" \\u5BF9\\u8C61\\u8868\\u793A\\u6D4F\\u89C8\\u5668\\u7A97\\u53E3\\uFF0C\\u5E76\\u63D0\\u4F9B\\u63A7\\u5236\\u5B83\\u7684\\u65B9\\u6CD5\\uFF0C\\u4F8B\\u5982\\u6253\\u5F00\\u65B0\\u7A97\\u53E3\\u6216\\u8BBF\\u95EE\\u6D4F\\u89C8\\u5668\\u5386\\u53F2\\u8BB0\\u5F55\\u3002 \",(0,n.jsx)(e.code,{children:\"Document\"}),\" \\u5BF9\\u8C61\\u8868\\u793A\\u52A0\\u8F7D\\u5728\\u7A97\\u53E3\\u4E2D\\u7684\\u7F51\\u9875\\u5185\\u5BB9\\uFF0C\\u5E76\\u63D0\\u4F9B\\u64CD\\u4F5C DOM \\u7684\\u65B9\\u6CD5\\uFF0C\\u4F8B\\u5982\\u9009\\u62E9\\u5143\\u7D20\\u6216\\u4FEE\\u6539\\u5176\\u5185\\u5BB9\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Window \\u5BF9\\u8C61\\u548C Document \\u5BF9\\u8C61\\u7684\\u533A\\u522B\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Window \\u5BF9\\u8C61\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Window\"}),\" \\u5BF9\\u8C61\\u662F Web \\u6D4F\\u89C8\\u5668\\u73AF\\u5883\\u4E2D\\u7684\\u5168\\u5C40\\u5BF9\\u8C61\\u3002\\u5B83\\u8868\\u793A\\u5305\\u542B DOM \\u6587\\u6863\\u7684\\u6D4F\\u89C8\\u5668\\u7A97\\u53E3\\u6216\\u6846\\u67B6\\u3002\\u4EE5\\u4E0B\\u662F\\u5173\\u4E8E \",(0,n.jsx)(e.code,{children:\"Window\"}),\" \\u5BF9\\u8C61\\u7684\\u4E00\\u4E9B\\u8981\\u70B9\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5B83\\u63D0\\u4F9B\\u4E86\\u63A7\\u5236\\u6D4F\\u89C8\\u5668\\u7A97\\u53E3\\u7684\\u65B9\\u6CD5\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"window.open()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"window.close()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"window.alert()\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5B83\\u901A\\u8FC7 \",(0,n.jsx)(e.code,{children:\"window.history\"}),\" \\u8BBF\\u95EE\\u6D4F\\u89C8\\u5668\\u7684\\u5386\\u53F2\\u8BB0\\u5F55\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5B83\\u5141\\u8BB8\\u901A\\u8FC7 \",(0,n.jsx)(e.code,{children:\"window.location\"}),\" \\u4E0E\\u6D4F\\u89C8\\u5668\\u7684\\u4F4D\\u7F6E\\uFF08URL\\uFF09\\u8FDB\\u884C\\u4EA4\\u4E92\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5B83\\u53EF\\u7528\\u4E8E\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.setTimeout()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"window.setInterval()\"}),\" \\u8BBE\\u7F6E\\u548C\\u6E05\\u9664\\u8BA1\\u65F6\\u5668\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5B83\\u662F\\u5168\\u5C40\\u6267\\u884C\\u4E0A\\u4E0B\\u6587\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u6240\\u6709\\u5168\\u5C40\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u90FD\\u662F \",(0,n.jsx)(e.code,{children:\"Window\"}),\" \\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u6253\\u5F00\\u4E00\\u4E2A\\u65B0\\u7A97\\u53E3\nwindow.open('https://www.example.com');\n\n// \\u663E\\u793A\\u4E00\\u4E2A\\u8B66\\u544A\nwindow.alert('Hello, world!');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Document \\u5BF9\\u8C61\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Document\"}),\" \\u5BF9\\u8C61\\u8868\\u793A\\u52A0\\u8F7D\\u5728\\u6D4F\\u89C8\\u5668\\u7A97\\u53E3\\u4E2D\\u7684 HTML \\u6216 XML \\u6587\\u6863\\u3002\\u5B83\\u662F \",(0,n.jsx)(e.code,{children:\"Window\"}),\" \\u5BF9\\u8C61\\u7684\\u5C5E\\u6027 (\",(0,n.jsx)(e.code,{children:\"window.document\"}),\")\\u3002\\u4EE5\\u4E0B\\u662F\\u5173\\u4E8E \",(0,n.jsx)(e.code,{children:\"Document\"}),\" \\u5BF9\\u8C61\\u7684\\u4E00\\u4E9B\\u8981\\u70B9\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5B83\\u63D0\\u4F9B\\u4E86\\u9009\\u62E9\\u5143\\u7D20\\u7684\\u65B9\\u6CD5\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"document.getElementById()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"document.querySelector()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"document.getElementsByClassName()\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5B83\\u5141\\u8BB8\\u64CD\\u4F5C DOM\\uFF0C\\u5305\\u62EC\\u521B\\u5EFA\\u3001\\u5220\\u9664\\u548C\\u4FEE\\u6539\\u5143\\u7D20\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5B83\\u63D0\\u4F9B\\u4E86\\u8BBF\\u95EE\\u6587\\u6863\\u5143\\u6570\\u636E\\u7684\\u5C5E\\u6027\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"document.title\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"document.URL\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5B83\\u53EF\\u7528\\u4E8E\\u4FA6\\u542C\\u548C\\u5904\\u7406\\u6587\\u6863\\u4E2D\\u7684\\u4E8B\\u4EF6\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5143\\u7D20\\u5E76\\u5C06\\u5176\\u9644\\u52A0\\u5230\\u6587\\u6863\\u4E3B\\u4F53\nconst newElement = document.createElement('div');\nnewElement.id = 'myDiv';\nnewElement.textContent = 'Hello world';\ndocument.body.appendChild(newElement);\n\n// \\u901A\\u8FC7\\u5176 ID \\u9009\\u62E9\\u8BE5\\u5143\\u7D20\nconst element = document.getElementById('myDiv');\n\nconsole.log(element);\nconsole.log(document.body);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E3B\\u8981\\u533A\\u522B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Window\"}),\" \\u5BF9\\u8C61\\u8868\\u793A\\u6D4F\\u89C8\\u5668\\u7A97\\u53E3\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"Document\"}),\" \\u5BF9\\u8C61\\u8868\\u793A\\u7F51\\u9875\\u7684\\u5185\\u5BB9\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Window\"}),\" \\u5BF9\\u8C61\\u63D0\\u4F9B\\u4E86\\u63A7\\u5236\\u6D4F\\u89C8\\u5668\\u7A97\\u53E3\\u548C\\u4E0E\\u6D4F\\u89C8\\u5668\\u73AF\\u5883\\u4EA4\\u4E92\\u7684\\u65B9\\u6CD5\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"Document\"}),\" \\u5BF9\\u8C61\\u63D0\\u4F9B\\u4E86\\u64CD\\u4F5C DOM \\u548C\\u4E0E\\u7F51\\u9875\\u5185\\u5BB9\\u4EA4\\u4E92\\u7684\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Window\"}),\" \\u5BF9\\u8C61\\u662F\\u5168\\u5C40\\u6267\\u884C\\u4E0A\\u4E0B\\u6587\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u6240\\u6709\\u5168\\u5C40\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u90FD\\u662F \",(0,n.jsx)(e.code,{children:\"Window\"}),\" \\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u3002 \",(0,n.jsx)(e.code,{children:\"Document\"}),\" \\u5BF9\\u8C61\\u662F \",(0,n.jsx)(e.code,{children:\"Window\"}),\" \\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Window\",children:\"MDN Web \\u6587\\u6863\\uFF1AWindow\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Document\",children:\"MDN Web \\u6587\\u6863\\uFF1ADocument\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/browser-environment\",children:\"JavaScript.info\\uFF1A\\u6D4F\\u89C8\\u5668\\u73AF\\u5883\\uFF0C\\u89C4\\u8303\"})}),`\n`]})]})}function b(d={}){let{wrapper:e}=d.components||{};return e?(0,n.jsx)(e,Object.assign({},d,{children:(0,n.jsx)(m,d)})):m(d)}var f=b;return x(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var W=(d,e)=>()=>(e||d((e={exports:{}}).exports,e),e.exports),g=(d,e)=>{for(var c in e)i(d,c,{get:e[c],enumerable:!0})},r=(d,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of a(e))!D.call(d,l)&&l!==c&&i(d,l,{get:()=>e[l],enumerable:!(o=u(e,l))||o.enumerable});return d};var x=(d,e,c)=>(c=d!=null?s(p(d)):{},r(e||!d||!d.__esModule?i(c,\"default\",{value:d,enumerable:!0}):c,d)),M=d=>r(i({},\"__esModule\",{value:!0}),d);var h=W((b,t)=>{t.exports=_jsx_runtime});var v={};g(v,{default:()=>w,frontmatter:()=>f});var n=x(h()),f={title:\"Window \\u5BF9\\u8C61\\u548C Document \\u5BF9\\u8C61\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function m(d){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...d.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Window\"}),\" \\u5BF9\\u8C61\\u8868\\u793A\\u6D4F\\u89C8\\u5668\\u7A97\\u53E3\\uFF0C\\u5E76\\u63D0\\u4F9B\\u63A7\\u5236\\u5B83\\u7684\\u65B9\\u6CD5\\uFF0C\\u4F8B\\u5982\\u6253\\u5F00\\u65B0\\u7A97\\u53E3\\u6216\\u8BBF\\u95EE\\u6D4F\\u89C8\\u5668\\u5386\\u53F2\\u8BB0\\u5F55\\u3002 \",(0,n.jsx)(e.code,{children:\"Document\"}),\" \\u5BF9\\u8C61\\u8868\\u793A\\u52A0\\u8F7D\\u5728\\u7A97\\u53E3\\u4E2D\\u7684\\u7F51\\u9875\\u5185\\u5BB9\\uFF0C\\u5E76\\u63D0\\u4F9B\\u64CD\\u4F5C DOM \\u7684\\u65B9\\u6CD5\\uFF0C\\u4F8B\\u5982\\u9009\\u62E9\\u5143\\u7D20\\u6216\\u4FEE\\u6539\\u5176\\u5185\\u5BB9\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Window \\u5BF9\\u8C61\\u548C Document \\u5BF9\\u8C61\\u7684\\u533A\\u522B\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Window \\u5BF9\\u8C61\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Window\"}),\" \\u5BF9\\u8C61\\u662F Web \\u6D4F\\u89C8\\u5668\\u73AF\\u5883\\u4E2D\\u7684\\u5168\\u5C40\\u5BF9\\u8C61\\u3002\\u5B83\\u8868\\u793A\\u5305\\u542B DOM \\u6587\\u6863\\u7684\\u6D4F\\u89C8\\u5668\\u7A97\\u53E3\\u6216\\u6846\\u67B6\\u3002\\u4EE5\\u4E0B\\u662F\\u5173\\u4E8E \",(0,n.jsx)(e.code,{children:\"Window\"}),\" \\u5BF9\\u8C61\\u7684\\u4E00\\u4E9B\\u8981\\u70B9\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5B83\\u63D0\\u4F9B\\u4E86\\u63A7\\u5236\\u6D4F\\u89C8\\u5668\\u7A97\\u53E3\\u7684\\u65B9\\u6CD5\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"window.open()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"window.close()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"window.alert()\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5B83\\u901A\\u8FC7 \",(0,n.jsx)(e.code,{children:\"window.history\"}),\" \\u8BBF\\u95EE\\u6D4F\\u89C8\\u5668\\u7684\\u5386\\u53F2\\u8BB0\\u5F55\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5B83\\u5141\\u8BB8\\u901A\\u8FC7 \",(0,n.jsx)(e.code,{children:\"window.location\"}),\" \\u4E0E\\u6D4F\\u89C8\\u5668\\u7684\\u4F4D\\u7F6E\\uFF08URL\\uFF09\\u8FDB\\u884C\\u4EA4\\u4E92\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5B83\\u53EF\\u7528\\u4E8E\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"window.setTimeout()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"window.setInterval()\"}),\" \\u8BBE\\u7F6E\\u548C\\u6E05\\u9664\\u8BA1\\u65F6\\u5668\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5B83\\u662F\\u5168\\u5C40\\u6267\\u884C\\u4E0A\\u4E0B\\u6587\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u6240\\u6709\\u5168\\u5C40\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u90FD\\u662F \",(0,n.jsx)(e.code,{children:\"Window\"}),\" \\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u6253\\u5F00\\u4E00\\u4E2A\\u65B0\\u7A97\\u53E3\nwindow.open('https://www.example.com');\n\n// \\u663E\\u793A\\u4E00\\u4E2A\\u8B66\\u544A\nwindow.alert('Hello, world!');\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Document \\u5BF9\\u8C61\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Document\"}),\" \\u5BF9\\u8C61\\u8868\\u793A\\u52A0\\u8F7D\\u5728\\u6D4F\\u89C8\\u5668\\u7A97\\u53E3\\u4E2D\\u7684 HTML \\u6216 XML \\u6587\\u6863\\u3002\\u5B83\\u662F \",(0,n.jsx)(e.code,{children:\"Window\"}),\" \\u5BF9\\u8C61\\u7684\\u5C5E\\u6027 (\",(0,n.jsx)(e.code,{children:\"window.document\"}),\")\\u3002\\u4EE5\\u4E0B\\u662F\\u5173\\u4E8E \",(0,n.jsx)(e.code,{children:\"Document\"}),\" \\u5BF9\\u8C61\\u7684\\u4E00\\u4E9B\\u8981\\u70B9\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5B83\\u63D0\\u4F9B\\u4E86\\u9009\\u62E9\\u5143\\u7D20\\u7684\\u65B9\\u6CD5\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"document.getElementById()\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"document.querySelector()\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"document.getElementsByClassName()\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5B83\\u5141\\u8BB8\\u64CD\\u4F5C DOM\\uFF0C\\u5305\\u62EC\\u521B\\u5EFA\\u3001\\u5220\\u9664\\u548C\\u4FEE\\u6539\\u5143\\u7D20\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5B83\\u63D0\\u4F9B\\u4E86\\u8BBF\\u95EE\\u6587\\u6863\\u5143\\u6570\\u636E\\u7684\\u5C5E\\u6027\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"document.title\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"document.URL\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5B83\\u53EF\\u7528\\u4E8E\\u4FA6\\u542C\\u548C\\u5904\\u7406\\u6587\\u6863\\u4E2D\\u7684\\u4E8B\\u4EF6\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// \\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5143\\u7D20\\u5E76\\u5C06\\u5176\\u9644\\u52A0\\u5230\\u6587\\u6863\\u4E3B\\u4F53\nconst newElement = document.createElement('div');\nnewElement.id = 'myDiv';\nnewElement.textContent = 'Hello world';\ndocument.body.appendChild(newElement);\n\n// \\u901A\\u8FC7\\u5176 ID \\u9009\\u62E9\\u8BE5\\u5143\\u7D20\nconst element = document.getElementById('myDiv');\n\nconsole.log(element);\nconsole.log(document.body);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E3B\\u8981\\u533A\\u522B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Window\"}),\" \\u5BF9\\u8C61\\u8868\\u793A\\u6D4F\\u89C8\\u5668\\u7A97\\u53E3\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"Document\"}),\" \\u5BF9\\u8C61\\u8868\\u793A\\u7F51\\u9875\\u7684\\u5185\\u5BB9\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Window\"}),\" \\u5BF9\\u8C61\\u63D0\\u4F9B\\u4E86\\u63A7\\u5236\\u6D4F\\u89C8\\u5668\\u7A97\\u53E3\\u548C\\u4E0E\\u6D4F\\u89C8\\u5668\\u73AF\\u5883\\u4EA4\\u4E92\\u7684\\u65B9\\u6CD5\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"Document\"}),\" \\u5BF9\\u8C61\\u63D0\\u4F9B\\u4E86\\u64CD\\u4F5C DOM \\u548C\\u4E0E\\u7F51\\u9875\\u5185\\u5BB9\\u4EA4\\u4E92\\u7684\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Window\"}),\" \\u5BF9\\u8C61\\u662F\\u5168\\u5C40\\u6267\\u884C\\u4E0A\\u4E0B\\u6587\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u6240\\u6709\\u5168\\u5C40\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u90FD\\u662F \",(0,n.jsx)(e.code,{children:\"Window\"}),\" \\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u3002 \",(0,n.jsx)(e.code,{children:\"Document\"}),\" \\u5BF9\\u8C61\\u662F \",(0,n.jsx)(e.code,{children:\"Window\"}),\" \\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Window\",children:\"MDN Web \\u6587\\u6863\\uFF1AWindow\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Document\",children:\"MDN Web \\u6587\\u6863\\uFF1ADocument\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/browser-environment\",children:\"JavaScript.info\\uFF1A\\u6D4F\\u89C8\\u5668\\u73AF\\u5883\\uFF0C\\u89C4\\u8303\"})}),`\n`]})]})}function w(d={}){let{wrapper:e}=d.components||{};return e?(0,n.jsx)(e,{...d,children:(0,n.jsx)(m,{...d})}):m(d)}return M(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-useeffect-and-uselayouteffect-in-react/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-useeffect-and-uselayouteffect-in-react/en-US.json
index 2536ca333..8b927b9ce 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-useeffect-and-uselayouteffect-in-react/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-useeffect-and-uselayouteffect-in-react/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-difference-between-useeffect-and-uselayouteffect-in-react/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var p=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var c in e)r(t,c,{get:e[c],enumerable:!0})},o=(t,e,c,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of f(e))!m.call(t,i)&&i!==c&&r(t,i,{get:()=>e[i],enumerable:!(s=u(e,i))||s.enumerable});return t};var E=(t,e,c)=>(c=t!=null?h(g(t)):{},o(e||!t||!t.__esModule?r(c,\"default\",{value:t,enumerable:!0}):c,t)),b=t=>o(r({},\"__esModule\",{value:!0}),t);var d=p((D,l)=>{l.exports=_jsx_runtime});var L={};y(L,{default:()=>k,frontmatter:()=>x});var n=E(d()),x={title:\"What is the difference between `useEffect` and `useLayoutEffect` in React?\"};function a(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",ul:\"ul\",li:\"li\",pre:\"pre\",hr:\"hr\",h3:\"h3\",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:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\" and \",(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\" are React hooks used to handle side effects in functional components, but they differ in timing and use cases:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\": Runs asynchronously after the DOM has been painted. It is suitable for tasks like data fetching, subscriptions, or logging.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\": Runs synchronously after DOM mutations but before the browser paints. Use it for tasks like measuring DOM elements or synchronizing the UI with the DOM.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Code example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { useEffect, useLayoutEffect, useRef } from 'react';\n\nfunction Example() {\n  const ref = useRef();\n\n  useEffect(() => {\n    console.log('useEffect: Runs after DOM paint');\n  });\n\n  useLayoutEffect(() => {\n    console.log('useLayoutEffect: Runs before DOM paint');\n    console.log('Element width:', ref.current.offsetWidth);\n  });\n\n  return <div ref={ref}>Hello</div>;\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\"?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\" is a React hook used for managing side effects in functional components. Side effects include operations like fetching data, updating a subscription, or interacting with the browser's DOM API.\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"It runs asynchronously after the DOM has been updated and painted.\"}),`\n`,(0,n.jsx)(e.li,{children:\"It does not block the browser from updating the UI.\"}),`\n`,(0,n.jsx)(e.li,{children:\"By default, it runs after every render, but dependencies can control its execution.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Code example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { useEffect } from 'react';\n\nfunction Example() {\n  useEffect(() => {\n    console.log('Component mounted or updated');\n    return () => console.log('Cleanup on unmount or dependency change');\n  }, []); // Runs only on mount and unmount\n\n  return <div>Hello, World!</div>;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Common use cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Fetching data from an API\"}),`\n`,(0,n.jsx)(e.li,{children:\"Setting up subscriptions (e.g., WebSocket connections)\"}),`\n`,(0,n.jsx)(e.li,{children:\"Logging or analytics tracking\"}),`\n`,(0,n.jsx)(e.li,{children:\"Adding and removing event listeners\"}),`\n`]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is \",(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\"?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\" is a React hook similar to \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\", but it differs in timing. It runs synchronously after DOM mutations and before the browser paints the screen.\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"It is suitable for tasks where the DOM needs to be accessed before the paint.\"}),`\n`,(0,n.jsx)(e.li,{children:\"It can block rendering, so it should be used sparingly.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Code example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { useLayoutEffect, useRef } from 'react';\n\nfunction Example() {\n  const ref = useRef();\n\n  useLayoutEffect(() => {\n    console.log('Element dimensions:', ref.current.getBoundingClientRect());\n  });\n\n  return <div ref={ref}>Hello</div>;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Common use cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Measuring DOM elements (e.g., for animations or layouts)\"}),`\n`,(0,n.jsx)(e.li,{children:\"Adjusting DOM properties or styles based on calculations\"}),`\n`,(0,n.jsx)(e.li,{children:\"Fixing UI synchronization issues\"}),`\n`]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"key differences between \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" and \",(0,n.jsx)(e.code,{children:\"useLayoutEffect\"})]}),`\n`,(0,n.jsx)(e.h3,{children:\"Timing\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\": Executes after the browser has painted the UI.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\": Executes before the browser paints, right after DOM changes.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Blocking behavior\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\": Non-blocking, runs asynchronously.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\": Blocking, runs synchronously.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Use case examples\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\": Fetching data, updating state, or adding event listeners.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\": Measuring DOM elements, managing animations, or solving layout issues.\"]}),`\n`]}),`\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://react.dev/reference/react/hooks\",children:\"React Hooks documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useEffect\",children:[\"React \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" API documentation\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useLayoutEffect\",children:[\"React \",(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\" API documentation\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://kentcdodds.com/blog/useeffect-vs-uselayouteffect\",children:[\"Differences between \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" and \",(0,n.jsx)(e.code,{children:\"useLayoutEffect\"})]})}),`\n`]})]})}function R(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(a,t)})):a(t)}var k=R;return b(L);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),E=(t,e)=>{for(var c in e)r(t,c,{get:e[c],enumerable:!0})},s=(t,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of g(e))!p.call(t,i)&&i!==c&&r(t,i,{get:()=>e[i],enumerable:!(o=f(e,i))||o.enumerable});return t};var b=(t,e,c)=>(c=t!=null?u(m(t)):{},s(e||!t||!t.__esModule?r(c,\"default\",{value:t,enumerable:!0}):c,t)),x=t=>s(r({},\"__esModule\",{value:!0}),t);var d=y((M,l)=>{l.exports=_jsx_runtime});var k={};E(k,{default:()=>h,frontmatter:()=>R});var n=b(d()),R={title:\"What is the difference between `useEffect` and `useLayoutEffect` in React?\"};function a(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\" and \",(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\" are React hooks used to handle side effects in functional components, but they differ in timing and use cases:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\": Runs asynchronously after the DOM has been painted. It is suitable for tasks like data fetching, subscriptions, or logging.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\": Runs synchronously after DOM mutations but before the browser paints. Use it for tasks like measuring DOM elements or synchronizing the UI with the DOM.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Code example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { useEffect, useLayoutEffect, useRef } from 'react';\n\nfunction Example() {\n  const ref = useRef();\n\n  useEffect(() => {\n    console.log('useEffect: Runs after DOM paint');\n  });\n\n  useLayoutEffect(() => {\n    console.log('useLayoutEffect: Runs before DOM paint');\n    console.log('Element width:', ref.current.offsetWidth);\n  });\n\n  return <div ref={ref}>Hello</div>;\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\"?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\" is a React hook used for managing side effects in functional components. Side effects include operations like fetching data, updating a subscription, or interacting with the browser's DOM API.\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"It runs asynchronously after the DOM has been updated and painted.\"}),`\n`,(0,n.jsx)(e.li,{children:\"It does not block the browser from updating the UI.\"}),`\n`,(0,n.jsx)(e.li,{children:\"By default, it runs after every render, but dependencies can control its execution.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Code example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { useEffect } from 'react';\n\nfunction Example() {\n  useEffect(() => {\n    console.log('Component mounted or updated');\n    return () => console.log('Cleanup on unmount or dependency change');\n  }, []); // Runs only on mount and unmount\n\n  return <div>Hello, World!</div>;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Common use cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Fetching data from an API\"}),`\n`,(0,n.jsx)(e.li,{children:\"Setting up subscriptions (e.g., WebSocket connections)\"}),`\n`,(0,n.jsx)(e.li,{children:\"Logging or analytics tracking\"}),`\n`,(0,n.jsx)(e.li,{children:\"Adding and removing event listeners\"}),`\n`]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is \",(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\"?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\" is a React hook similar to \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\", but it differs in timing. It runs synchronously after DOM mutations and before the browser paints the screen.\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"It is suitable for tasks where the DOM needs to be accessed before the paint.\"}),`\n`,(0,n.jsx)(e.li,{children:\"It can block rendering, so it should be used sparingly.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Code example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { useLayoutEffect, useRef } from 'react';\n\nfunction Example() {\n  const ref = useRef();\n\n  useLayoutEffect(() => {\n    console.log('Element dimensions:', ref.current.getBoundingClientRect());\n  });\n\n  return <div ref={ref}>Hello</div>;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Common use cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Measuring DOM elements (e.g., for animations or layouts)\"}),`\n`,(0,n.jsx)(e.li,{children:\"Adjusting DOM properties or styles based on calculations\"}),`\n`,(0,n.jsx)(e.li,{children:\"Fixing UI synchronization issues\"}),`\n`]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"key differences between \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" and \",(0,n.jsx)(e.code,{children:\"useLayoutEffect\"})]}),`\n`,(0,n.jsx)(e.h3,{children:\"Timing\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\": Executes after the browser has painted the UI.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\": Executes before the browser paints, right after DOM changes.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Blocking behavior\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\": Non-blocking, runs asynchronously.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\": Blocking, runs synchronously.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Use case examples\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\": Fetching data, updating state, or adding event listeners.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\": Measuring DOM elements, managing animations, or solving layout issues.\"]}),`\n`]}),`\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://react.dev/reference/react/hooks\",children:\"React Hooks documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useEffect\",children:[\"React \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" API documentation\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useLayoutEffect\",children:[\"React \",(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\" API documentation\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://kentcdodds.com/blog/useeffect-vs-uselayouteffect\",children:[\"Differences between \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" and \",(0,n.jsx)(e.code,{children:\"useLayoutEffect\"})]})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(a,{...t})}):a(t)}return x(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-useeffect-and-uselayouteffect-in-react/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-useeffect-and-uselayouteffect-in-react/zh-CN.json
index fa1ca986f..0af0f744f 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-useeffect-and-uselayouteffect-in-react/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-useeffect-and-uselayouteffect-in-react/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-difference-between-useeffect-and-uselayouteffect-in-react/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var p=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),y=(c,e)=>{for(var l in e)t(c,l,{get:e[l],enumerable:!0})},d=(c,e,l,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of a(e))!m.call(c,r)&&r!==l&&t(c,r,{get:()=>e[r],enumerable:!(i=s(e,r))||i.enumerable});return c};var g=(c,e,l)=>(l=c!=null?u(E(c)):{},d(e||!c||!c.__esModule?t(l,\"default\",{value:c,enumerable:!0}):l,c)),L=c=>d(t({},\"__esModule\",{value:!0}),c);var h=p((j,o)=>{o.exports=_jsx_runtime});var O={};y(O,{default:()=>M,frontmatter:()=>R});var n=g(h()),R={title:\"React \\u4E2D `useEffect` \\u548C `useLayoutEffect` \\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function f(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",ul:\"ul\",li:\"li\",pre:\"pre\",hr:\"hr\",h3:\"h3\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\" \\u662F React \\u94A9\\u5B50\\uFF0C\\u7528\\u4E8E\\u5904\\u7406\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E2D\\u7684\\u526F\\u4F5C\\u7528\\uFF0C\\u4F46\\u5B83\\u4EEC\\u5728\\u65F6\\u673A\\u548C\\u7528\\u4F8B\\u4E0A\\u6709\\u6240\\u4E0D\\u540C\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\"\\uFF1A\\u5728 DOM \\u7ED8\\u5236\\u540E\\u5F02\\u6B65\\u8FD0\\u884C\\u3002\\u5B83\\u9002\\u7528\\u4E8E\\u6570\\u636E\\u83B7\\u53D6\\u3001\\u8BA2\\u9605\\u6216\\u65E5\\u5FD7\\u8BB0\\u5F55\\u7B49\\u4EFB\\u52A1\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\"\\uFF1A\\u5728 DOM \\u66F4\\u6539\\u540E\\u4F46\\u5728\\u6D4F\\u89C8\\u5668\\u7ED8\\u5236\\u4E4B\\u524D\\u540C\\u6B65\\u8FD0\\u884C\\u3002\\u5C06\\u5176\\u7528\\u4E8E\\u6D4B\\u91CF DOM \\u5143\\u7D20\\u6216\\u5C06 UI \\u4E0E DOM \\u540C\\u6B65\\u7B49\\u4EFB\\u52A1\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE3\\u7801\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { useEffect, useLayoutEffect, useRef } from 'react';\n\nfunction Example() {\n  const ref = useRef();\n\n  useEffect(() => {\n    console.log('useEffect: Runs after DOM paint');\n  });\n\n  useLayoutEffect(() => {\n    console.log('useLayoutEffect: Runs before DOM paint');\n    console.log('Element width:', ref.current.offsetWidth);\n  });\n\n  return <div ref={ref}>Hello</div>;\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4EC0\\u4E48\\u662F \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u662F\\u4E00\\u4E2A React \\u94A9\\u5B50\\uFF0C\\u7528\\u4E8E\\u7BA1\\u7406\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E2D\\u7684\\u526F\\u4F5C\\u7528\\u3002\\u526F\\u4F5C\\u7528\\u5305\\u62EC\\u83B7\\u53D6\\u6570\\u636E\\u3001\\u66F4\\u65B0\\u8BA2\\u9605\\u6216\\u4E0E\\u6D4F\\u89C8\\u5668\\u7684 DOM API \\u4EA4\\u4E92\\u7B49\\u64CD\\u4F5C\\u3002\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u5B83\\u5728 DOM \\u66F4\\u65B0\\u548C\\u7ED8\\u5236\\u540E\\u5F02\\u6B65\\u8FD0\\u884C\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5B83\\u4E0D\\u4F1A\\u963B\\u6B62\\u6D4F\\u89C8\\u5668\\u66F4\\u65B0 UI\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5B83\\u5728\\u6BCF\\u6B21\\u6E32\\u67D3\\u540E\\u8FD0\\u884C\\uFF0C\\u4F46\\u4F9D\\u8D56\\u9879\\u53EF\\u4EE5\\u63A7\\u5236\\u5176\\u6267\\u884C\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EE3\\u7801\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { useEffect } from 'react';\n\nfunction Example() {\n  useEffect(() => {\n    console.log('Component mounted or updated');\n    return () => console.log('Cleanup on unmount or dependency change');\n  }, []); // Runs only on mount and unmount\n\n  return <div>Hello, World!</div>;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5E38\\u89C1\\u7528\\u4F8B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u4ECE API \\u83B7\\u53D6\\u6570\\u636E\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u8BBE\\u7F6E\\u8BA2\\u9605\\uFF08\\u4F8B\\u5982\\uFF0CWebSocket \\u8FDE\\u63A5\\uFF09\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u65E5\\u5FD7\\u8BB0\\u5F55\\u6216\\u5206\\u6790\\u8DDF\\u8E2A\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u6DFB\\u52A0\\u548C\\u5220\\u9664\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\"}),`\n`]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4EC0\\u4E48\\u662F \",(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\" \\u662F\\u4E00\\u4E2A\\u7C7B\\u4F3C\\u4E8E \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u7684 React \\u94A9\\u5B50\\uFF0C\\u4F46\\u5B83\\u5728\\u65F6\\u673A\\u4E0A\\u6709\\u6240\\u4E0D\\u540C\\u3002\\u5B83\\u5728 DOM \\u66F4\\u6539\\u540E\\u5E76\\u5728\\u6D4F\\u89C8\\u5668\\u7ED8\\u5236\\u5C4F\\u5E55\\u4E4B\\u524D\\u540C\\u6B65\\u8FD0\\u884C\\u3002\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u5B83\\u9002\\u7528\\u4E8E\\u9700\\u8981\\u5728\\u7ED8\\u5236\\u524D\\u8BBF\\u95EE DOM \\u7684\\u4EFB\\u52A1\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5B83\\u53EF\\u4EE5\\u963B\\u6B62\\u6E32\\u67D3\\uFF0C\\u56E0\\u6B64\\u5E94\\u8C28\\u614E\\u4F7F\\u7528\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EE3\\u7801\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { useLayoutEffect, useRef } from 'react';\n\nfunction Example() {\n  const ref = useRef();\n\n  useLayoutEffect(() => {\n    console.log('Element dimensions:', ref.current.getBoundingClientRect());\n  });\n\n  return <div ref={ref}>Hello</div>;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5E38\\u89C1\\u7528\\u4F8B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u6D4B\\u91CF DOM \\u5143\\u7D20\\uFF08\\u4F8B\\u5982\\uFF0C\\u7528\\u4E8E\\u52A8\\u753B\\u6216\\u5E03\\u5C40\\uFF09\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u6839\\u636E\\u8BA1\\u7B97\\u8C03\\u6574 DOM \\u5C5E\\u6027\\u6216\\u6837\\u5F0F\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u4FEE\\u590D UI \\u540C\\u6B65\\u95EE\\u9898\"}),`\n`]}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\" \\u4E4B\\u95F4\\u7684\\u4E3B\\u8981\\u533A\\u522B\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u65F6\\u673A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\"\\uFF1A\\u5728\\u6D4F\\u89C8\\u5668\\u7ED8\\u5236 UI \\u540E\\u6267\\u884C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\"\\uFF1A\\u5728\\u6D4F\\u89C8\\u5668\\u7ED8\\u5236\\u4E4B\\u524D\\uFF0CDOM \\u66F4\\u6539\\u540E\\u7ACB\\u5373\\u6267\\u884C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u963B\\u585E\\u884C\\u4E3A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\"\\uFF1A\\u975E\\u963B\\u585E\\uFF0C\\u5F02\\u6B65\\u8FD0\\u884C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\"\\uFF1A\\u963B\\u585E\\uFF0C\\u540C\\u6B65\\u8FD0\\u884C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7528\\u4F8B\\u793A\\u4F8B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\"\\uFF1A\\u83B7\\u53D6\\u6570\\u636E\\u3001\\u66F4\\u65B0\\u72B6\\u6001\\u6216\\u6DFB\\u52A0\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\"\\uFF1A\\u6D4B\\u91CF DOM \\u5143\\u7D20\\u3001\\u7BA1\\u7406\\u52A8\\u753B\\u6216\\u89E3\\u51B3\\u5E03\\u5C40\\u95EE\\u9898\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/hooks\",children:\"React Hooks \\u6587\\u6863\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useEffect\",children:[\"React \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" API \\u6587\\u6863\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useLayoutEffect\",children:[\"React \",(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\" API \\u6587\\u6863\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://kentcdodds.com/blog/useeffect-vs-uselayouteffect\",children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\" \\u4E4B\\u95F4\\u7684\\u533A\\u522B\"]})}),`\n`]})]})}function D(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(f,c)})):f(c)}var M=D;return L(O);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var t=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var y=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),L=(c,e)=>{for(var l in e)t(c,l,{get:e[l],enumerable:!0})},i=(c,e,l,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of E(e))!p.call(c,r)&&r!==l&&t(c,r,{get:()=>e[r],enumerable:!(d=a(e,r))||d.enumerable});return c};var R=(c,e,l)=>(l=c!=null?s(m(c)):{},i(e||!c||!c.__esModule?t(l,\"default\",{value:c,enumerable:!0}):l,c)),g=c=>i(t({},\"__esModule\",{value:!0}),c);var h=y((O,o)=>{o.exports=_jsx_runtime});var M={};L(M,{default:()=>u,frontmatter:()=>D});var n=R(h()),D={title:\"React \\u4E2D `useEffect` \\u548C `useLayoutEffect` \\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function f(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\" \\u662F React \\u94A9\\u5B50\\uFF0C\\u7528\\u4E8E\\u5904\\u7406\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E2D\\u7684\\u526F\\u4F5C\\u7528\\uFF0C\\u4F46\\u5B83\\u4EEC\\u5728\\u65F6\\u673A\\u548C\\u7528\\u4F8B\\u4E0A\\u6709\\u6240\\u4E0D\\u540C\\uFF1A\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\"\\uFF1A\\u5728 DOM \\u7ED8\\u5236\\u540E\\u5F02\\u6B65\\u8FD0\\u884C\\u3002\\u5B83\\u9002\\u7528\\u4E8E\\u6570\\u636E\\u83B7\\u53D6\\u3001\\u8BA2\\u9605\\u6216\\u65E5\\u5FD7\\u8BB0\\u5F55\\u7B49\\u4EFB\\u52A1\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\"\\uFF1A\\u5728 DOM \\u66F4\\u6539\\u540E\\u4F46\\u5728\\u6D4F\\u89C8\\u5668\\u7ED8\\u5236\\u4E4B\\u524D\\u540C\\u6B65\\u8FD0\\u884C\\u3002\\u5C06\\u5176\\u7528\\u4E8E\\u6D4B\\u91CF DOM \\u5143\\u7D20\\u6216\\u5C06 UI \\u4E0E DOM \\u540C\\u6B65\\u7B49\\u4EFB\\u52A1\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4EE3\\u7801\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { useEffect, useLayoutEffect, useRef } from 'react';\n\nfunction Example() {\n  const ref = useRef();\n\n  useEffect(() => {\n    console.log('useEffect: Runs after DOM paint');\n  });\n\n  useLayoutEffect(() => {\n    console.log('useLayoutEffect: Runs before DOM paint');\n    console.log('Element width:', ref.current.offsetWidth);\n  });\n\n  return <div ref={ref}>Hello</div>;\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4EC0\\u4E48\\u662F \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u662F\\u4E00\\u4E2A React \\u94A9\\u5B50\\uFF0C\\u7528\\u4E8E\\u7BA1\\u7406\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E2D\\u7684\\u526F\\u4F5C\\u7528\\u3002\\u526F\\u4F5C\\u7528\\u5305\\u62EC\\u83B7\\u53D6\\u6570\\u636E\\u3001\\u66F4\\u65B0\\u8BA2\\u9605\\u6216\\u4E0E\\u6D4F\\u89C8\\u5668\\u7684 DOM API \\u4EA4\\u4E92\\u7B49\\u64CD\\u4F5C\\u3002\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u5B83\\u5728 DOM \\u66F4\\u65B0\\u548C\\u7ED8\\u5236\\u540E\\u5F02\\u6B65\\u8FD0\\u884C\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5B83\\u4E0D\\u4F1A\\u963B\\u6B62\\u6D4F\\u89C8\\u5668\\u66F4\\u65B0 UI\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5B83\\u5728\\u6BCF\\u6B21\\u6E32\\u67D3\\u540E\\u8FD0\\u884C\\uFF0C\\u4F46\\u4F9D\\u8D56\\u9879\\u53EF\\u4EE5\\u63A7\\u5236\\u5176\\u6267\\u884C\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EE3\\u7801\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { useEffect } from 'react';\n\nfunction Example() {\n  useEffect(() => {\n    console.log('Component mounted or updated');\n    return () => console.log('Cleanup on unmount or dependency change');\n  }, []); // Runs only on mount and unmount\n\n  return <div>Hello, World!</div>;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5E38\\u89C1\\u7528\\u4F8B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u4ECE API \\u83B7\\u53D6\\u6570\\u636E\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u8BBE\\u7F6E\\u8BA2\\u9605\\uFF08\\u4F8B\\u5982\\uFF0CWebSocket \\u8FDE\\u63A5\\uFF09\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u65E5\\u5FD7\\u8BB0\\u5F55\\u6216\\u5206\\u6790\\u8DDF\\u8E2A\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u6DFB\\u52A0\\u548C\\u5220\\u9664\\u4E8B\\u4EF6\\u4FA6\\u542C\\u5668\"}),`\n`]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4EC0\\u4E48\\u662F \",(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\" \\u662F\\u4E00\\u4E2A\\u7C7B\\u4F3C\\u4E8E \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u7684 React \\u94A9\\u5B50\\uFF0C\\u4F46\\u5B83\\u5728\\u65F6\\u673A\\u4E0A\\u6709\\u6240\\u4E0D\\u540C\\u3002\\u5B83\\u5728 DOM \\u66F4\\u6539\\u540E\\u5E76\\u5728\\u6D4F\\u89C8\\u5668\\u7ED8\\u5236\\u5C4F\\u5E55\\u4E4B\\u524D\\u540C\\u6B65\\u8FD0\\u884C\\u3002\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u5B83\\u9002\\u7528\\u4E8E\\u9700\\u8981\\u5728\\u7ED8\\u5236\\u524D\\u8BBF\\u95EE DOM \\u7684\\u4EFB\\u52A1\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5B83\\u53EF\\u4EE5\\u963B\\u6B62\\u6E32\\u67D3\\uFF0C\\u56E0\\u6B64\\u5E94\\u8C28\\u614E\\u4F7F\\u7528\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EE3\\u7801\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`import React, { useLayoutEffect, useRef } from 'react';\n\nfunction Example() {\n  const ref = useRef();\n\n  useLayoutEffect(() => {\n    console.log('Element dimensions:', ref.current.getBoundingClientRect());\n  });\n\n  return <div ref={ref}>Hello</div>;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5E38\\u89C1\\u7528\\u4F8B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u6D4B\\u91CF DOM \\u5143\\u7D20\\uFF08\\u4F8B\\u5982\\uFF0C\\u7528\\u4E8E\\u52A8\\u753B\\u6216\\u5E03\\u5C40\\uFF09\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u6839\\u636E\\u8BA1\\u7B97\\u8C03\\u6574 DOM \\u5C5E\\u6027\\u6216\\u6837\\u5F0F\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u4FEE\\u590D UI \\u540C\\u6B65\\u95EE\\u9898\"}),`\n`]}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\" \\u4E4B\\u95F4\\u7684\\u4E3B\\u8981\\u533A\\u522B\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u65F6\\u673A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\"\\uFF1A\\u5728\\u6D4F\\u89C8\\u5668\\u7ED8\\u5236 UI \\u540E\\u6267\\u884C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\"\\uFF1A\\u5728\\u6D4F\\u89C8\\u5668\\u7ED8\\u5236\\u4E4B\\u524D\\uFF0CDOM \\u66F4\\u6539\\u540E\\u7ACB\\u5373\\u6267\\u884C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u963B\\u585E\\u884C\\u4E3A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\"\\uFF1A\\u975E\\u963B\\u585E\\uFF0C\\u5F02\\u6B65\\u8FD0\\u884C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\"\\uFF1A\\u963B\\u585E\\uFF0C\\u540C\\u6B65\\u8FD0\\u884C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7528\\u4F8B\\u793A\\u4F8B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\"\\uFF1A\\u83B7\\u53D6\\u6570\\u636E\\u3001\\u66F4\\u65B0\\u72B6\\u6001\\u6216\\u6DFB\\u52A0\\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\"\\uFF1A\\u6D4B\\u91CF DOM \\u5143\\u7D20\\u3001\\u7BA1\\u7406\\u52A8\\u753B\\u6216\\u89E3\\u51B3\\u5E03\\u5C40\\u95EE\\u9898\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/hooks\",children:\"React Hooks \\u6587\\u6863\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useEffect\",children:[\"React \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" API \\u6587\\u6863\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useLayoutEffect\",children:[\"React \",(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\" API \\u6587\\u6863\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://kentcdodds.com/blog/useeffect-vs-uselayouteffect\",children:[(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"useLayoutEffect\"}),\" \\u4E4B\\u95F4\\u7684\\u533A\\u522B\"]})}),`\n`]})]})}function u(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(f,{...c})}):f(c)}return g(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-dom-and-how-is-it-structured/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-dom-and-how-is-it-structured/en-US.json
index a0b7e1f7f..12675d787 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-dom-and-how-is-it-structured/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-dom-and-how-is-it-structured/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-dom-and-how-is-it-structured/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var h=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var D=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var r in e)h(t,r,{get:e[r],enumerable:!0})},c=(t,e,r,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!g.call(t,o)&&o!==r&&h(t,o,{get:()=>e[o],enumerable:!(l=m(e,o))||l.enumerable});return t};var M=(t,e,r)=>(r=t!=null?a(p(t)):{},c(e||!t||!t.__esModule?h(r,\"default\",{value:t,enumerable:!0}):r,t)),O=t=>c(h({},\"__esModule\",{value:!0}),t);var i=D((y,d)=>{d.exports=_jsx_runtime});var x={};f(x,{default:()=>w,frontmatter:()=>T});var n=M(i()),T={title:\"What is the DOM and how is it structured?\"};function s(t){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",ul:\"ul\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"The DOM, or Document Object Model, is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM is structured as a tree of objects, where each node represents part of the document, such as elements, attributes, and text.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is the DOM and how is it structured?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an HTML, XHTML, or XML document as a tree structure. Each node in this tree represents a part of the document.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Structure\"}),`\n`,(0,n.jsx)(e.p,{children:\"The DOM is structured as a hierarchical tree of nodes. Here are the main types of nodes:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Document node\"}),\": The root of the document tree. It represents the entire document.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Element nodes\"}),\": These represent HTML elements and form the bulk of the document tree.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Attribute nodes\"}),\": These are associated with element nodes and represent the attributes of those elements.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Text nodes\"}),\": These represent the text content within elements.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Comment nodes\"}),\": These represent comments in the HTML.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Consider the following HTML:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>Document</title>\n  </head>\n  <body>\n    <h1>Hello, World!</h1>\n    <p>This is a paragraph.</p>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"The DOM tree for this document would look like this:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{children:`Document\n  \\u2514\\u2500\\u2500 html\n      \\u251C\\u2500\\u2500 head\n      \\u2502   \\u2514\\u2500\\u2500 title\n      \\u2502       \\u2514\\u2500\\u2500 \"Document\"\n      \\u2514\\u2500\\u2500 body\n          \\u251C\\u2500\\u2500 h1\n          \\u2502   \\u2514\\u2500\\u2500 \"Hello, World!\"\n          \\u2514\\u2500\\u2500 p\n              \\u2514\\u2500\\u2500 \"This is a paragraph.\"\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Accessing and manipulating the DOM\"}),`\n`,(0,n.jsx)(e.p,{children:\"JavaScript can be used to access and manipulate the DOM. Here are some common methods:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"document.getElementById(id)\"}),\": Selects an element by its ID.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"document.querySelector(selector)\"}),\": Selects the first element that matches a CSS selector.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"element.appendChild(node)\"}),\": Adds a new child node to an element.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"element.removeChild(node)\"}),\": Removes a child node from an element.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create an <h1> element and add it to the DOM\nconst newElement = document.createElement('h1');\ndocument.body.appendChild(newElement);\n\n// Get the h1 element using querySelector\nconst heading = document.querySelector('h1');\nheading.textContent = 'Hello, DOM!';\nconsole.log(heading); // <h1>Hello, DOM!</h1>\n`})}),`\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/Web/API/Document_Object_Model/Introduction\",children:\"MDN Web Docs: Introduction to the DOM\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3.org/TR/DOM-Level-2-Core/introduction.html\",children:\"W3C DOM Specification\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/dom-nodes\",children:\"JavaScript.info: The DOM\"})}),`\n`]})]})}function b(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(s,t)})):s(t)}var w=b;return O(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var h=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),M=(t,e)=>{for(var r in e)h(t,r,{get:e[r],enumerable:!0})},c=(t,e,r,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!D.call(t,o)&&o!==r&&h(t,o,{get:()=>e[o],enumerable:!(l=u(e,o))||l.enumerable});return t};var T=(t,e,r)=>(r=t!=null?m(g(t)):{},c(e||!t||!t.__esModule?h(r,\"default\",{value:t,enumerable:!0}):r,t)),O=t=>c(h({},\"__esModule\",{value:!0}),t);var i=f((y,d)=>{d.exports=_jsx_runtime});var w={};M(w,{default:()=>a,frontmatter:()=>b});var n=T(i()),b={title:\"What is the DOM and how is it structured?\"};function s(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"The DOM, or Document Object Model, is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM is structured as a tree of objects, where each node represents part of the document, such as elements, attributes, and text.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is the DOM and how is it structured?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an HTML, XHTML, or XML document as a tree structure. Each node in this tree represents a part of the document.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Structure\"}),`\n`,(0,n.jsx)(e.p,{children:\"The DOM is structured as a hierarchical tree of nodes. Here are the main types of nodes:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Document node\"}),\": The root of the document tree. It represents the entire document.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Element nodes\"}),\": These represent HTML elements and form the bulk of the document tree.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Attribute nodes\"}),\": These are associated with element nodes and represent the attributes of those elements.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Text nodes\"}),\": These represent the text content within elements.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Comment nodes\"}),\": These represent comments in the HTML.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.p,{children:\"Consider the following HTML:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>Document</title>\n  </head>\n  <body>\n    <h1>Hello, World!</h1>\n    <p>This is a paragraph.</p>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"The DOM tree for this document would look like this:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{children:`Document\n  \\u2514\\u2500\\u2500 html\n      \\u251C\\u2500\\u2500 head\n      \\u2502   \\u2514\\u2500\\u2500 title\n      \\u2502       \\u2514\\u2500\\u2500 \"Document\"\n      \\u2514\\u2500\\u2500 body\n          \\u251C\\u2500\\u2500 h1\n          \\u2502   \\u2514\\u2500\\u2500 \"Hello, World!\"\n          \\u2514\\u2500\\u2500 p\n              \\u2514\\u2500\\u2500 \"This is a paragraph.\"\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Accessing and manipulating the DOM\"}),`\n`,(0,n.jsx)(e.p,{children:\"JavaScript can be used to access and manipulate the DOM. Here are some common methods:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"document.getElementById(id)\"}),\": Selects an element by its ID.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"document.querySelector(selector)\"}),\": Selects the first element that matches a CSS selector.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"element.appendChild(node)\"}),\": Adds a new child node to an element.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"element.removeChild(node)\"}),\": Removes a child node from an element.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Create an <h1> element and add it to the DOM\nconst newElement = document.createElement('h1');\ndocument.body.appendChild(newElement);\n\n// Get the h1 element using querySelector\nconst heading = document.querySelector('h1');\nheading.textContent = 'Hello, DOM!';\nconsole.log(heading); // <h1>Hello, DOM!</h1>\n`})}),`\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/Web/API/Document_Object_Model/Introduction\",children:\"MDN Web Docs: Introduction to the DOM\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3.org/TR/DOM-Level-2-Core/introduction.html\",children:\"W3C DOM Specification\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/dom-nodes\",children:\"JavaScript.info: The DOM\"})}),`\n`]})]})}function a(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(s,{...t})}):s(t)}return O(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-dom-and-how-is-it-structured/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-dom-and-how-is-it-structured/zh-CN.json
index b573099c4..d4ef98507 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-dom-and-how-is-it-structured/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-dom-and-how-is-it-structured/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-dom-and-how-is-it-structured/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var h=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var g=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),D=(l,n)=>{for(var r in n)h(l,r,{get:n[r],enumerable:!0})},c=(l,n,r,d)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of p(n))!M.call(l,t)&&t!==r&&h(l,t,{get:()=>n[t],enumerable:!(d=m(n,t))||d.enumerable});return l};var O=(l,n,r)=>(r=l!=null?s(u(l)):{},c(n||!l||!l.__esModule?h(r,\"default\",{value:l,enumerable:!0}):r,l)),b=l=>c(h({},\"__esModule\",{value:!0}),l);var o=g((H,i)=>{i.exports=_jsx_runtime});var y={};D(y,{default:()=>x,frontmatter:()=>f});var e=O(o()),f={title:\"\\u4EC0\\u4E48\\u662F DOM \\u4EE5\\u53CA\\u5B83\\u7684\\u7ED3\\u6784\\uFF1F\"};function a(l){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",ul:\"ul\",a:\"a\"},l.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"DOM\\uFF08\\u6587\\u6863\\u5BF9\\u8C61\\u6A21\\u578B\\uFF09\\u662F\\u7528\\u4E8E Web \\u6587\\u6863\\u7684\\u7F16\\u7A0B\\u63A5\\u53E3\\u3002\\u5B83\\u8868\\u793A\\u9875\\u9762\\uFF0C\\u4EE5\\u4FBF\\u7A0B\\u5E8F\\u53EF\\u4EE5\\u66F4\\u6539\\u6587\\u6863\\u7ED3\\u6784\\u3001\\u6837\\u5F0F\\u548C\\u5185\\u5BB9\\u3002DOM \\u7ED3\\u6784\\u4E3A\\u5BF9\\u8C61\\u6811\\uFF0C\\u5176\\u4E2D\\u6BCF\\u4E2A\\u8282\\u70B9\\u4EE3\\u8868\\u6587\\u6863\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u4F8B\\u5982\\u5143\\u7D20\\u3001\\u5C5E\\u6027\\u548C\\u6587\\u672C\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F DOM \\u4EE5\\u53CA\\u5B83\\u7684\\u7ED3\\u6784\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6587\\u6863\\u5BF9\\u8C61\\u6A21\\u578B (DOM) \\u662F\\u4E00\\u4E2A\\u8DE8\\u5E73\\u53F0\\u4E14\\u4E0E\\u8BED\\u8A00\\u65E0\\u5173\\u7684\\u63A5\\u53E3\\uFF0C\\u5B83\\u5C06 HTML\\u3001XHTML \\u6216 XML \\u6587\\u6863\\u89C6\\u4E3A\\u6811\\u7ED3\\u6784\\u3002\\u6B64\\u6811\\u4E2D\\u7684\\u6BCF\\u4E2A\\u8282\\u70B9\\u4EE3\\u8868\\u6587\\u6863\\u7684\\u4E00\\u90E8\\u5206\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7ED3\\u6784\"}),`\n`,(0,e.jsx)(n.p,{children:\"DOM \\u7ED3\\u6784\\u4E3A\\u8282\\u70B9\\u7684\\u5206\\u5C42\\u6811\\u3002\\u4EE5\\u4E0B\\u662F\\u4E3B\\u8981\\u7C7B\\u578B\\u7684\\u8282\\u70B9\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6587\\u6863\\u8282\\u70B9\"}),\"\\uFF1A\\u6587\\u6863\\u6811\\u7684\\u6839\\u3002\\u5B83\\u4EE3\\u8868\\u6574\\u4E2A\\u6587\\u6863\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5143\\u7D20\\u8282\\u70B9\"}),\"\\uFF1A\\u8FD9\\u4E9B\\u4EE3\\u8868 HTML \\u5143\\u7D20\\uFF0C\\u5E76\\u6784\\u6210\\u6587\\u6863\\u6811\\u7684\\u5927\\u90E8\\u5206\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C5E\\u6027\\u8282\\u70B9\"}),\"\\uFF1A\\u8FD9\\u4E9B\\u4E0E\\u5143\\u7D20\\u8282\\u70B9\\u76F8\\u5173\\u8054\\uFF0C\\u4EE3\\u8868\\u8FD9\\u4E9B\\u5143\\u7D20\\u7684\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6587\\u672C\\u8282\\u70B9\"}),\"\\uFF1A\\u8FD9\\u4E9B\\u8868\\u793A\\u5143\\u7D20\\u4E2D\\u7684\\u6587\\u672C\\u5185\\u5BB9\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6CE8\\u91CA\\u8282\\u70B9\"}),\"\\uFF1A\\u8FD9\\u4E9B\\u8868\\u793A HTML \\u4E2D\\u7684\\u6CE8\\u91CA\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8003\\u8651\\u4EE5\\u4E0B HTML\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>Document</title>\n  </head>\n  <body>\n    <h1>Hello, World!</h1>\n    <p>This is a paragraph.</p>\n  </body>\n</html>\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6B64\\u6587\\u6863\\u7684 DOM \\u6811\\u5C06\\u5982\\u4E0B\\u6240\\u793A\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{children:`Document\n  \\u2514\\u2500\\u2500 html\n      \\u251C\\u2500\\u2500 head\n      \\u2502   \\u2514\\u2500\\u2500 title\n      \\u2502       \\u2514\\u2500\\u2500 \"Document\"\n      \\u2514\\u2500\\u2500 body\n          \\u251C\\u2500\\u2500 h1\n          \\u2502   \\u2514\\u2500\\u2500 \"Hello, World!\"\n          \\u2514\\u2500\\u2500 p\n              \\u2514\\u2500\\u2500 \"This is a paragraph.\"\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BBF\\u95EE\\u548C\\u64CD\\u4F5C DOM\"}),`\n`,(0,e.jsx)(n.p,{children:\"JavaScript \\u53EF\\u7528\\u4E8E\\u8BBF\\u95EE\\u548C\\u64CD\\u4F5C DOM\\u3002\\u4EE5\\u4E0B\\u662F\\u4E00\\u4E9B\\u5E38\\u7528\\u65B9\\u6CD5\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"document.getElementById(id)\"}),\"\\uFF1A\\u901A\\u8FC7\\u5176 ID \\u9009\\u62E9\\u4E00\\u4E2A\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"document.querySelector(selector)\"}),\"\\uFF1A\\u9009\\u62E9\\u4E0E CSS \\u9009\\u62E9\\u5668\\u5339\\u914D\\u7684\\u7B2C\\u4E00\\u4E2A\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"element.appendChild(node)\"}),\"\\uFF1A\\u5C06\\u65B0\\u7684\\u5B50\\u8282\\u70B9\\u6DFB\\u52A0\\u5230\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"element.removeChild(node)\"}),\"\\uFF1A\\u4ECE\\u5143\\u7D20\\u4E2D\\u5220\\u9664\\u5B50\\u8282\\u70B9\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Create an <h1> element and add it to the DOM\nconst newElement = document.createElement('h1');\ndocument.body.appendChild(newElement);\n\n// Get the h1 element using querySelector\nconst heading = document.querySelector('h1');\nheading.textContent = 'Hello, DOM!';\nconsole.log(heading); // <h1>Hello, DOM!</h1>\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction\",children:\"MDN Web \\u6587\\u6863\\uFF1ADOM \\u7B80\\u4ECB\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.w3.org/TR/DOM-Level-2-Core/introduction.html\",children:\"W3C DOM \\u89C4\\u8303\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/dom-nodes\",children:\"JavaScript.info\\uFF1ADOM\"})}),`\n`]})]})}function j(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,Object.assign({},l,{children:(0,e.jsx)(a,l)})):a(l)}var x=j;return b(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var g=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),O=(l,n)=>{for(var r in n)t(l,r,{get:n[r],enumerable:!0})},c=(l,n,r,d)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let h of u(n))!D.call(l,h)&&h!==r&&t(l,h,{get:()=>n[h],enumerable:!(d=p(n,h))||d.enumerable});return l};var f=(l,n,r)=>(r=l!=null?m(M(l)):{},c(n||!l||!l.__esModule?t(r,\"default\",{value:l,enumerable:!0}):r,l)),x=l=>c(t({},\"__esModule\",{value:!0}),l);var o=g((L,i)=>{i.exports=_jsx_runtime});var C={};O(C,{default:()=>s,frontmatter:()=>y});var e=f(o()),y={title:\"\\u4EC0\\u4E48\\u662F DOM \\u4EE5\\u53CA\\u5B83\\u7684\\u7ED3\\u6784\\uFF1F\"};function a(l){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...l.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"DOM\\uFF08\\u6587\\u6863\\u5BF9\\u8C61\\u6A21\\u578B\\uFF09\\u662F\\u7528\\u4E8E Web \\u6587\\u6863\\u7684\\u7F16\\u7A0B\\u63A5\\u53E3\\u3002\\u5B83\\u8868\\u793A\\u9875\\u9762\\uFF0C\\u4EE5\\u4FBF\\u7A0B\\u5E8F\\u53EF\\u4EE5\\u66F4\\u6539\\u6587\\u6863\\u7ED3\\u6784\\u3001\\u6837\\u5F0F\\u548C\\u5185\\u5BB9\\u3002DOM \\u7ED3\\u6784\\u4E3A\\u5BF9\\u8C61\\u6811\\uFF0C\\u5176\\u4E2D\\u6BCF\\u4E2A\\u8282\\u70B9\\u4EE3\\u8868\\u6587\\u6863\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u4F8B\\u5982\\u5143\\u7D20\\u3001\\u5C5E\\u6027\\u548C\\u6587\\u672C\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F DOM \\u4EE5\\u53CA\\u5B83\\u7684\\u7ED3\\u6784\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6587\\u6863\\u5BF9\\u8C61\\u6A21\\u578B (DOM) \\u662F\\u4E00\\u4E2A\\u8DE8\\u5E73\\u53F0\\u4E14\\u4E0E\\u8BED\\u8A00\\u65E0\\u5173\\u7684\\u63A5\\u53E3\\uFF0C\\u5B83\\u5C06 HTML\\u3001XHTML \\u6216 XML \\u6587\\u6863\\u89C6\\u4E3A\\u6811\\u7ED3\\u6784\\u3002\\u6B64\\u6811\\u4E2D\\u7684\\u6BCF\\u4E2A\\u8282\\u70B9\\u4EE3\\u8868\\u6587\\u6863\\u7684\\u4E00\\u90E8\\u5206\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7ED3\\u6784\"}),`\n`,(0,e.jsx)(n.p,{children:\"DOM \\u7ED3\\u6784\\u4E3A\\u8282\\u70B9\\u7684\\u5206\\u5C42\\u6811\\u3002\\u4EE5\\u4E0B\\u662F\\u4E3B\\u8981\\u7C7B\\u578B\\u7684\\u8282\\u70B9\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6587\\u6863\\u8282\\u70B9\"}),\"\\uFF1A\\u6587\\u6863\\u6811\\u7684\\u6839\\u3002\\u5B83\\u4EE3\\u8868\\u6574\\u4E2A\\u6587\\u6863\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5143\\u7D20\\u8282\\u70B9\"}),\"\\uFF1A\\u8FD9\\u4E9B\\u4EE3\\u8868 HTML \\u5143\\u7D20\\uFF0C\\u5E76\\u6784\\u6210\\u6587\\u6863\\u6811\\u7684\\u5927\\u90E8\\u5206\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C5E\\u6027\\u8282\\u70B9\"}),\"\\uFF1A\\u8FD9\\u4E9B\\u4E0E\\u5143\\u7D20\\u8282\\u70B9\\u76F8\\u5173\\u8054\\uFF0C\\u4EE3\\u8868\\u8FD9\\u4E9B\\u5143\\u7D20\\u7684\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6587\\u672C\\u8282\\u70B9\"}),\"\\uFF1A\\u8FD9\\u4E9B\\u8868\\u793A\\u5143\\u7D20\\u4E2D\\u7684\\u6587\\u672C\\u5185\\u5BB9\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6CE8\\u91CA\\u8282\\u70B9\"}),\"\\uFF1A\\u8FD9\\u4E9B\\u8868\\u793A HTML \\u4E2D\\u7684\\u6CE8\\u91CA\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8003\\u8651\\u4EE5\\u4E0B HTML\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>Document</title>\n  </head>\n  <body>\n    <h1>Hello, World!</h1>\n    <p>This is a paragraph.</p>\n  </body>\n</html>\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6B64\\u6587\\u6863\\u7684 DOM \\u6811\\u5C06\\u5982\\u4E0B\\u6240\\u793A\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{children:`Document\n  \\u2514\\u2500\\u2500 html\n      \\u251C\\u2500\\u2500 head\n      \\u2502   \\u2514\\u2500\\u2500 title\n      \\u2502       \\u2514\\u2500\\u2500 \"Document\"\n      \\u2514\\u2500\\u2500 body\n          \\u251C\\u2500\\u2500 h1\n          \\u2502   \\u2514\\u2500\\u2500 \"Hello, World!\"\n          \\u2514\\u2500\\u2500 p\n              \\u2514\\u2500\\u2500 \"This is a paragraph.\"\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BBF\\u95EE\\u548C\\u64CD\\u4F5C DOM\"}),`\n`,(0,e.jsx)(n.p,{children:\"JavaScript \\u53EF\\u7528\\u4E8E\\u8BBF\\u95EE\\u548C\\u64CD\\u4F5C DOM\\u3002\\u4EE5\\u4E0B\\u662F\\u4E00\\u4E9B\\u5E38\\u7528\\u65B9\\u6CD5\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"document.getElementById(id)\"}),\"\\uFF1A\\u901A\\u8FC7\\u5176 ID \\u9009\\u62E9\\u4E00\\u4E2A\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"document.querySelector(selector)\"}),\"\\uFF1A\\u9009\\u62E9\\u4E0E CSS \\u9009\\u62E9\\u5668\\u5339\\u914D\\u7684\\u7B2C\\u4E00\\u4E2A\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"element.appendChild(node)\"}),\"\\uFF1A\\u5C06\\u65B0\\u7684\\u5B50\\u8282\\u70B9\\u6DFB\\u52A0\\u5230\\u5143\\u7D20\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"element.removeChild(node)\"}),\"\\uFF1A\\u4ECE\\u5143\\u7D20\\u4E2D\\u5220\\u9664\\u5B50\\u8282\\u70B9\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Create an <h1> element and add it to the DOM\nconst newElement = document.createElement('h1');\ndocument.body.appendChild(newElement);\n\n// Get the h1 element using querySelector\nconst heading = document.querySelector('h1');\nheading.textContent = 'Hello, DOM!';\nconsole.log(heading); // <h1>Hello, DOM!</h1>\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction\",children:\"MDN Web \\u6587\\u6863\\uFF1ADOM \\u7B80\\u4ECB\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.w3.org/TR/DOM-Level-2-Core/introduction.html\",children:\"W3C DOM \\u89C4\\u8303\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/dom-nodes\",children:\"JavaScript.info\\uFF1ADOM\"})}),`\n`]})]})}function s(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,{...l,children:(0,e.jsx)(a,{...l})}):a(l)}return x(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-factory-pattern-and-how-is-it-used/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-factory-pattern-and-how-is-it-used/en-US.json
index 90e993156..9e749dcf4 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-factory-pattern-and-how-is-it-used/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-factory-pattern-and-how-is-it-used/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-factory-pattern-and-how-is-it-used/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var c in e)i(t,c,{get:e[c],enumerable:!0})},r=(t,e,c,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!g.call(t,o)&&o!==c&&i(t,o,{get:()=>e[o],enumerable:!(a=u(e,o))||a.enumerable});return t};var w=(t,e,c)=>(c=t!=null?h(f(t)):{},r(e||!t||!t.__esModule?i(c,\"default\",{value:t,enumerable:!0}):c,t)),b=t=>r(i({},\"__esModule\",{value:!0}),t);var l=m((D,s)=>{s.exports=_jsx_runtime});var F={};y(F,{default:()=>v,frontmatter:()=>j});var n=w(l()),j={title:\"What is the Factory pattern and how is it used?\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",h4:\"h4\",ul:\"ul\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Factory pattern is a design pattern used to create objects without specifying the exact class of the object that will be created. It provides a way to encapsulate the instantiation logic and can be particularly useful when the creation process is complex or when the type of object to be created is determined at runtime.\"}),`\n`,(0,n.jsx)(e.p,{children:\"For example, in JavaScript, you can use a factory function to create different types of objects:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function createAnimal(type) {\n  if (type === 'dog') {\n    return { sound: 'woof' };\n  } else if (type === 'cat') {\n    return { sound: 'meow' };\n  }\n}\n\nconst dog = createAnimal('dog');\nconst cat = createAnimal('cat');\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is the Factory pattern and how is it used?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Factory pattern is a creational design pattern that provides an interface for creating objects in a superclass but allows subclasses to alter the type of objects that will be created. It encapsulates the object creation process, making the code more modular and easier to manage.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Complex object creation\"}),\": When the process of creating an object is complex or involves multiple steps.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Runtime object determination\"}),\": When the type of object to be created is determined at runtime.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Decoupling\"}),\": To decouple the client code from the specific classes it needs to instantiate.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Implementation in JavaScript\"}),`\n`,(0,n.jsx)(e.p,{children:\"In JavaScript, the Factory pattern can be implemented using factory functions or classes. Below are examples of both approaches.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Factory function\"}),`\n`,(0,n.jsx)(e.p,{children:\"A factory function is a simple function that returns an object. It can contain logic to decide which type of object to create.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function createAnimal(type) {\n  if (type === 'dog') {\n    return { sound: 'woof' };\n  } else if (type === 'cat') {\n    return { sound: 'meow' };\n  } else {\n    return { sound: 'unknown' };\n  }\n}\n\nconst dog = createAnimal('dog');\nconst cat = createAnimal('cat');\nconsole.log(dog.sound); // Output: woof\nconsole.log(cat.sound); // Output: meow\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Factory class\"}),`\n`,(0,n.jsx)(e.p,{children:\"A factory class can be used to encapsulate the creation logic within a class structure.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class AnimalFactory {\n  createAnimal(type) {\n    if (type === 'dog') {\n      return new Dog();\n    } else if (type === 'cat') {\n      return new Cat();\n    } else {\n      return new Animal();\n    }\n  }\n}\n\nclass Dog {\n  constructor() {\n    this.sound = 'woof';\n  }\n}\n\nclass Cat {\n  constructor() {\n    this.sound = 'meow';\n  }\n}\n\nclass Animal {\n  constructor() {\n    this.sound = 'unknown';\n  }\n}\n\nconst factory = new AnimalFactory();\nconst dog = factory.createAnimal('dog');\nconst cat = factory.createAnimal('cat');\nconsole.log(dog.sound); // Output: woof\nconsole.log(cat.sound); // Output: meow\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Encapsulation\"}),\": The creation logic is encapsulated in one place.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Flexibility\"}),\": Easy to add new types of objects without changing the client code.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Decoupling\"}),\": Reduces the dependency of the client code on specific classes.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Drawbacks\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Complexity\"}),\": Can add unnecessary complexity if the object creation logic is simple.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Overhead\"}),\": May introduce additional overhead if not used judiciously.\"]}),`\n`]}),`\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://en.wikipedia.org/wiki/Factory_method_pattern\",children:\"Factory Method Pattern on Wikipedia\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.dofactory.com/javascript/design-patterns/factory\",children:\"Factory Pattern in JavaScript\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS\",children:\"MDN Web Docs: Object-oriented JavaScript for beginners\"})}),`\n`]})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var v=x;return b(F);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},a=(t,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of f(e))!g.call(t,c)&&c!==o&&i(t,c,{get:()=>e[c],enumerable:!(r=p(e,c))||r.enumerable});return t};var b=(t,e,o)=>(o=t!=null?u(m(t)):{},a(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),j=t=>a(i({},\"__esModule\",{value:!0}),t);var l=y((A,s)=>{s.exports=_jsx_runtime});var v={};w(v,{default:()=>h,frontmatter:()=>x});var n=b(l()),x={title:\"What is the Factory pattern and how is it used?\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Factory pattern is a design pattern used to create objects without specifying the exact class of the object that will be created. It provides a way to encapsulate the instantiation logic and can be particularly useful when the creation process is complex or when the type of object to be created is determined at runtime.\"}),`\n`,(0,n.jsx)(e.p,{children:\"For example, in JavaScript, you can use a factory function to create different types of objects:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function createAnimal(type) {\n  if (type === 'dog') {\n    return { sound: 'woof' };\n  } else if (type === 'cat') {\n    return { sound: 'meow' };\n  }\n}\n\nconst dog = createAnimal('dog');\nconst cat = createAnimal('cat');\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is the Factory pattern and how is it used?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Definition\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Factory pattern is a creational design pattern that provides an interface for creating objects in a superclass but allows subclasses to alter the type of objects that will be created. It encapsulates the object creation process, making the code more modular and easier to manage.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Complex object creation\"}),\": When the process of creating an object is complex or involves multiple steps.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Runtime object determination\"}),\": When the type of object to be created is determined at runtime.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Decoupling\"}),\": To decouple the client code from the specific classes it needs to instantiate.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Implementation in JavaScript\"}),`\n`,(0,n.jsx)(e.p,{children:\"In JavaScript, the Factory pattern can be implemented using factory functions or classes. Below are examples of both approaches.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Factory function\"}),`\n`,(0,n.jsx)(e.p,{children:\"A factory function is a simple function that returns an object. It can contain logic to decide which type of object to create.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function createAnimal(type) {\n  if (type === 'dog') {\n    return { sound: 'woof' };\n  } else if (type === 'cat') {\n    return { sound: 'meow' };\n  } else {\n    return { sound: 'unknown' };\n  }\n}\n\nconst dog = createAnimal('dog');\nconst cat = createAnimal('cat');\nconsole.log(dog.sound); // Output: woof\nconsole.log(cat.sound); // Output: meow\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Factory class\"}),`\n`,(0,n.jsx)(e.p,{children:\"A factory class can be used to encapsulate the creation logic within a class structure.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class AnimalFactory {\n  createAnimal(type) {\n    if (type === 'dog') {\n      return new Dog();\n    } else if (type === 'cat') {\n      return new Cat();\n    } else {\n      return new Animal();\n    }\n  }\n}\n\nclass Dog {\n  constructor() {\n    this.sound = 'woof';\n  }\n}\n\nclass Cat {\n  constructor() {\n    this.sound = 'meow';\n  }\n}\n\nclass Animal {\n  constructor() {\n    this.sound = 'unknown';\n  }\n}\n\nconst factory = new AnimalFactory();\nconst dog = factory.createAnimal('dog');\nconst cat = factory.createAnimal('cat');\nconsole.log(dog.sound); // Output: woof\nconsole.log(cat.sound); // Output: meow\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Encapsulation\"}),\": The creation logic is encapsulated in one place.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Flexibility\"}),\": Easy to add new types of objects without changing the client code.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Decoupling\"}),\": Reduces the dependency of the client code on specific classes.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Drawbacks\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Complexity\"}),\": Can add unnecessary complexity if the object creation logic is simple.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Overhead\"}),\": May introduce additional overhead if not used judiciously.\"]}),`\n`]}),`\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://en.wikipedia.org/wiki/Factory_method_pattern\",children:\"Factory Method Pattern on Wikipedia\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.dofactory.com/javascript/design-patterns/factory\",children:\"Factory Pattern in JavaScript\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS\",children:\"MDN Web Docs: Object-oriented JavaScript for beginners\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return j(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-factory-pattern-and-how-is-it-used/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-factory-pattern-and-how-is-it-used/zh-CN.json
index 46551b7bc..001a5b512 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-factory-pattern-and-how-is-it-used/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-factory-pattern-and-how-is-it-used/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-factory-pattern-and-how-is-it-used/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),w=(r,n)=>{for(var t in n)o(r,t,{get:n[t],enumerable:!0})},i=(r,n,t,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of p(n))!m.call(r,c)&&c!==t&&o(r,c,{get:()=>n[c],enumerable:!(l=u(n,c))||l.enumerable});return r};var y=(r,n,t)=>(t=r!=null?h(g(r)):{},i(n||!r||!r.__esModule?o(t,\"default\",{value:r,enumerable:!0}):t,r)),j=r=>i(o({},\"__esModule\",{value:!0}),r);var d=f((S,a)=>{a.exports=_jsx_runtime});var x={};w(x,{default:()=>_,frontmatter:()=>A});var e=y(d()),A={title:\"\\u4EC0\\u4E48\\u662F\\u5DE5\\u5382\\u6A21\\u5F0F\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\uFF1F\"};function s(r){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",h4:\"h4\",ul:\"ul\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5DE5\\u5382\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u7528\\u4E8E\\u521B\\u5EFA\\u5BF9\\u8C61\\uFF0C\\u800C\\u65E0\\u9700\\u6307\\u5B9A\\u5C06\\u8981\\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u7684\\u786E\\u5207\\u7C7B\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u5C01\\u88C5\\u5B9E\\u4F8B\\u5316\\u903B\\u8F91\\u7684\\u65B9\\u6CD5\\uFF0C\\u5F53\\u521B\\u5EFA\\u8FC7\\u7A0B\\u5F88\\u590D\\u6742\\u6216\\u5F53\\u8981\\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u7684\\u7C7B\\u578B\\u5728\\u8FD0\\u884C\\u65F6\\u786E\\u5B9A\\u65F6\\uFF0C\\u5B83\\u7279\\u522B\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F8B\\u5982\\uFF0C\\u5728 JavaScript \\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5DE5\\u5382\\u51FD\\u6570\\u6765\\u521B\\u5EFA\\u4E0D\\u540C\\u7C7B\\u578B\\u7684\\u5BF9\\u8C61\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function createAnimal(type) {\n  if (type === 'dog') {\n    return { sound: 'woof' };\n  } else if (type === 'cat') {\n    return { sound: 'meow' };\n  }\n}\n\nconst dog = createAnimal('dog');\nconst cat = createAnimal('cat');\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u5DE5\\u5382\\u6A21\\u5F0F\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5DE5\\u5382\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u521B\\u5EFA\\u578B\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u7528\\u4E8E\\u5728\\u8D85\\u7C7B\\u4E2D\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u63A5\\u53E3\\uFF0C\\u4F46\\u5141\\u8BB8\\u5B50\\u7C7B\\u66F4\\u6539\\u5C06\\u8981\\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u7684\\u7C7B\\u578B\\u3002\\u5B83\\u5C01\\u88C5\\u4E86\\u5BF9\\u8C61\\u521B\\u5EFA\\u8FC7\\u7A0B\\uFF0C\\u4F7F\\u4EE3\\u7801\\u66F4\\u6A21\\u5757\\u5316\\uFF0C\\u66F4\\u6613\\u4E8E\\u7BA1\\u7406\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u590D\\u6742\\u5BF9\\u8C61\\u521B\\u5EFA\"}),\"\\uFF1A\\u5F53\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u8FC7\\u7A0B\\u5F88\\u590D\\u6742\\u6216\\u6D89\\u53CA\\u591A\\u4E2A\\u6B65\\u9AA4\\u65F6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8FD0\\u884C\\u65F6\\u5BF9\\u8C61\\u786E\\u5B9A\"}),\"\\uFF1A\\u5F53\\u8981\\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u7684\\u7C7B\\u578B\\u5728\\u8FD0\\u884C\\u65F6\\u786E\\u5B9A\\u65F6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u89E3\\u8026\"}),\"\\uFF1A\\u5C06\\u5BA2\\u6237\\u7AEF\\u4EE3\\u7801\\u4E0E\\u9700\\u8981\\u5B9E\\u4F8B\\u5316\\u7684\\u7279\\u5B9A\\u7C7B\\u89E3\\u8026\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"JavaScript \\u4E2D\\u7684\\u5B9E\\u73B0\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u5DE5\\u5382\\u51FD\\u6570\\u6216\\u7C7B\\u6765\\u5B9E\\u73B0\\u5DE5\\u5382\\u6A21\\u5F0F\\u3002\\u4EE5\\u4E0B\\u662F\\u8FD9\\u4E24\\u79CD\\u65B9\\u6CD5\\u7684\\u793A\\u4F8B\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5DE5\\u5382\\u51FD\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5DE5\\u5382\\u51FD\\u6570\\u662F\\u4E00\\u4E2A\\u8FD4\\u56DE\\u5BF9\\u8C61\\u7684\\u7B80\\u5355\\u51FD\\u6570\\u3002\\u5B83\\u53EF\\u4EE5\\u5305\\u542B\\u51B3\\u5B9A\\u8981\\u521B\\u5EFA\\u54EA\\u79CD\\u7C7B\\u578B\\u5BF9\\u8C61\\u7684\\u903B\\u8F91\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function createAnimal(type) {\n  if (type === 'dog') {\n    return { sound: 'woof' };\n  } else if (type === 'cat') {\n    return { sound: 'meow' };\n  } else {\n    return { sound: 'unknown' };\n  }\n}\n\nconst dog = createAnimal('dog');\nconst cat = createAnimal('cat');\nconsole.log(dog.sound); // Output: woof\nconsole.log(cat.sound); // Output: meow\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5DE5\\u5382\\u7C7B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5DE5\\u5382\\u7C7B\\u53EF\\u7528\\u4E8E\\u5C06\\u521B\\u5EFA\\u903B\\u8F91\\u5C01\\u88C5\\u5728\\u7C7B\\u7ED3\\u6784\\u4E2D\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class AnimalFactory {\n  createAnimal(type) {\n    if (type === 'dog') {\n      return new Dog();\n    } else if (type === 'cat') {\n      return new Cat();\n    } else {\n      return new Animal();\n    }\n  }\n}\n\nclass Dog {\n  constructor() {\n    this.sound = 'woof';\n  }\n}\n\nclass Cat {\n  constructor() {\n    this.sound = 'meow';\n  }\n}\n\nclass Animal {\n  constructor() {\n    this.sound = 'unknown';\n  }\n}\n\nconst factory = new AnimalFactory();\nconst dog = factory.createAnimal('dog');\nconst cat = factory.createAnimal('cat');\nconsole.log(dog.sound); // Output: woof\nconsole.log(cat.sound); // Output: meow\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C01\\u88C5\"}),\"\\uFF1A\\u521B\\u5EFA\\u903B\\u8F91\\u5C01\\u88C5\\u5728\\u4E00\\u4E2A\\u5730\\u65B9\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7075\\u6D3B\\u6027\"}),\"\\uFF1A\\u65E0\\u9700\\u66F4\\u6539\\u5BA2\\u6237\\u7AEF\\u4EE3\\u7801\\u5373\\u53EF\\u8F7B\\u677E\\u6DFB\\u52A0\\u65B0\\u7C7B\\u578B\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u89E3\\u8026\"}),\"\\uFF1A\\u51CF\\u5C11\\u5BA2\\u6237\\u7AEF\\u4EE3\\u7801\\u5BF9\\u7279\\u5B9A\\u7C7B\\u7684\\u4F9D\\u8D56\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u590D\\u6742\\u6027\"}),\"\\uFF1A\\u5982\\u679C\\u5BF9\\u8C61\\u521B\\u5EFA\\u903B\\u8F91\\u5F88\\u7B80\\u5355\\uFF0C\\u5219\\u4F1A\\u589E\\u52A0\\u4E0D\\u5FC5\\u8981\\u7684\\u590D\\u6742\\u6027\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5F00\\u9500\"}),\"\\uFF1A\\u5982\\u679C\\u4F7F\\u7528\\u4E0D\\u5F53\\uFF0C\\u53EF\\u80FD\\u4F1A\\u5F15\\u5165\\u989D\\u5916\\u7684\\u5F00\\u9500\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Factory_method_pattern\",children:\"\\u7EF4\\u57FA\\u767E\\u79D1\\u4E0A\\u7684\\u5DE5\\u5382\\u65B9\\u6CD5\\u6A21\\u5F0F\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.dofactory.com/javascript/design-patterns/factory\",children:\"JavaScript \\u4E2D\\u7684\\u5DE5\\u5382\\u6A21\\u5F0F\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS\",children:\"MDN Web \\u6587\\u6863\\uFF1A\\u9762\\u5411\\u5BF9\\u8C61\\u7684 JavaScript \\u521D\\u5B66\\u8005\"})}),`\n`]})]})}function v(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(s,r)})):s(r)}var _=v;return j(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var w=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),y=(r,n)=>{for(var t in n)o(r,t,{get:n[t],enumerable:!0})},i=(r,n,t,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of g(n))!f.call(r,c)&&c!==t&&o(r,c,{get:()=>n[c],enumerable:!(l=p(n,c))||l.enumerable});return r};var A=(r,n,t)=>(t=r!=null?u(m(r)):{},i(n||!r||!r.__esModule?o(t,\"default\",{value:r,enumerable:!0}):t,r)),j=r=>i(o({},\"__esModule\",{value:!0}),r);var d=w((S,a)=>{a.exports=_jsx_runtime});var _={};y(_,{default:()=>h,frontmatter:()=>v});var e=A(d()),v={title:\"\\u4EC0\\u4E48\\u662F\\u5DE5\\u5382\\u6A21\\u5F0F\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\uFF1F\"};function s(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5DE5\\u5382\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u7528\\u4E8E\\u521B\\u5EFA\\u5BF9\\u8C61\\uFF0C\\u800C\\u65E0\\u9700\\u6307\\u5B9A\\u5C06\\u8981\\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u7684\\u786E\\u5207\\u7C7B\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u5C01\\u88C5\\u5B9E\\u4F8B\\u5316\\u903B\\u8F91\\u7684\\u65B9\\u6CD5\\uFF0C\\u5F53\\u521B\\u5EFA\\u8FC7\\u7A0B\\u5F88\\u590D\\u6742\\u6216\\u5F53\\u8981\\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u7684\\u7C7B\\u578B\\u5728\\u8FD0\\u884C\\u65F6\\u786E\\u5B9A\\u65F6\\uFF0C\\u5B83\\u7279\\u522B\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F8B\\u5982\\uFF0C\\u5728 JavaScript \\u4E2D\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5DE5\\u5382\\u51FD\\u6570\\u6765\\u521B\\u5EFA\\u4E0D\\u540C\\u7C7B\\u578B\\u7684\\u5BF9\\u8C61\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function createAnimal(type) {\n  if (type === 'dog') {\n    return { sound: 'woof' };\n  } else if (type === 'cat') {\n    return { sound: 'meow' };\n  }\n}\n\nconst dog = createAnimal('dog');\nconst cat = createAnimal('cat');\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u5DE5\\u5382\\u6A21\\u5F0F\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9A\\u4E49\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5DE5\\u5382\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u521B\\u5EFA\\u578B\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u7528\\u4E8E\\u5728\\u8D85\\u7C7B\\u4E2D\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u63A5\\u53E3\\uFF0C\\u4F46\\u5141\\u8BB8\\u5B50\\u7C7B\\u66F4\\u6539\\u5C06\\u8981\\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u7684\\u7C7B\\u578B\\u3002\\u5B83\\u5C01\\u88C5\\u4E86\\u5BF9\\u8C61\\u521B\\u5EFA\\u8FC7\\u7A0B\\uFF0C\\u4F7F\\u4EE3\\u7801\\u66F4\\u6A21\\u5757\\u5316\\uFF0C\\u66F4\\u6613\\u4E8E\\u7BA1\\u7406\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u590D\\u6742\\u5BF9\\u8C61\\u521B\\u5EFA\"}),\"\\uFF1A\\u5F53\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u8FC7\\u7A0B\\u5F88\\u590D\\u6742\\u6216\\u6D89\\u53CA\\u591A\\u4E2A\\u6B65\\u9AA4\\u65F6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8FD0\\u884C\\u65F6\\u5BF9\\u8C61\\u786E\\u5B9A\"}),\"\\uFF1A\\u5F53\\u8981\\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u7684\\u7C7B\\u578B\\u5728\\u8FD0\\u884C\\u65F6\\u786E\\u5B9A\\u65F6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u89E3\\u8026\"}),\"\\uFF1A\\u5C06\\u5BA2\\u6237\\u7AEF\\u4EE3\\u7801\\u4E0E\\u9700\\u8981\\u5B9E\\u4F8B\\u5316\\u7684\\u7279\\u5B9A\\u7C7B\\u89E3\\u8026\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"JavaScript \\u4E2D\\u7684\\u5B9E\\u73B0\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u5DE5\\u5382\\u51FD\\u6570\\u6216\\u7C7B\\u6765\\u5B9E\\u73B0\\u5DE5\\u5382\\u6A21\\u5F0F\\u3002\\u4EE5\\u4E0B\\u662F\\u8FD9\\u4E24\\u79CD\\u65B9\\u6CD5\\u7684\\u793A\\u4F8B\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5DE5\\u5382\\u51FD\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5DE5\\u5382\\u51FD\\u6570\\u662F\\u4E00\\u4E2A\\u8FD4\\u56DE\\u5BF9\\u8C61\\u7684\\u7B80\\u5355\\u51FD\\u6570\\u3002\\u5B83\\u53EF\\u4EE5\\u5305\\u542B\\u51B3\\u5B9A\\u8981\\u521B\\u5EFA\\u54EA\\u79CD\\u7C7B\\u578B\\u5BF9\\u8C61\\u7684\\u903B\\u8F91\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function createAnimal(type) {\n  if (type === 'dog') {\n    return { sound: 'woof' };\n  } else if (type === 'cat') {\n    return { sound: 'meow' };\n  } else {\n    return { sound: 'unknown' };\n  }\n}\n\nconst dog = createAnimal('dog');\nconst cat = createAnimal('cat');\nconsole.log(dog.sound); // Output: woof\nconsole.log(cat.sound); // Output: meow\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5DE5\\u5382\\u7C7B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5DE5\\u5382\\u7C7B\\u53EF\\u7528\\u4E8E\\u5C06\\u521B\\u5EFA\\u903B\\u8F91\\u5C01\\u88C5\\u5728\\u7C7B\\u7ED3\\u6784\\u4E2D\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class AnimalFactory {\n  createAnimal(type) {\n    if (type === 'dog') {\n      return new Dog();\n    } else if (type === 'cat') {\n      return new Cat();\n    } else {\n      return new Animal();\n    }\n  }\n}\n\nclass Dog {\n  constructor() {\n    this.sound = 'woof';\n  }\n}\n\nclass Cat {\n  constructor() {\n    this.sound = 'meow';\n  }\n}\n\nclass Animal {\n  constructor() {\n    this.sound = 'unknown';\n  }\n}\n\nconst factory = new AnimalFactory();\nconst dog = factory.createAnimal('dog');\nconst cat = factory.createAnimal('cat');\nconsole.log(dog.sound); // Output: woof\nconsole.log(cat.sound); // Output: meow\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C01\\u88C5\"}),\"\\uFF1A\\u521B\\u5EFA\\u903B\\u8F91\\u5C01\\u88C5\\u5728\\u4E00\\u4E2A\\u5730\\u65B9\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7075\\u6D3B\\u6027\"}),\"\\uFF1A\\u65E0\\u9700\\u66F4\\u6539\\u5BA2\\u6237\\u7AEF\\u4EE3\\u7801\\u5373\\u53EF\\u8F7B\\u677E\\u6DFB\\u52A0\\u65B0\\u7C7B\\u578B\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u89E3\\u8026\"}),\"\\uFF1A\\u51CF\\u5C11\\u5BA2\\u6237\\u7AEF\\u4EE3\\u7801\\u5BF9\\u7279\\u5B9A\\u7C7B\\u7684\\u4F9D\\u8D56\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u590D\\u6742\\u6027\"}),\"\\uFF1A\\u5982\\u679C\\u5BF9\\u8C61\\u521B\\u5EFA\\u903B\\u8F91\\u5F88\\u7B80\\u5355\\uFF0C\\u5219\\u4F1A\\u589E\\u52A0\\u4E0D\\u5FC5\\u8981\\u7684\\u590D\\u6742\\u6027\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5F00\\u9500\"}),\"\\uFF1A\\u5982\\u679C\\u4F7F\\u7528\\u4E0D\\u5F53\\uFF0C\\u53EF\\u80FD\\u4F1A\\u5F15\\u5165\\u989D\\u5916\\u7684\\u5F00\\u9500\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://en.wikipedia.org/wiki/Factory_method_pattern\",children:\"\\u7EF4\\u57FA\\u767E\\u79D1\\u4E0A\\u7684\\u5DE5\\u5382\\u65B9\\u6CD5\\u6A21\\u5F0F\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.dofactory.com/javascript/design-patterns/factory\",children:\"JavaScript \\u4E2D\\u7684\\u5DE5\\u5382\\u6A21\\u5F0F\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS\",children:\"MDN Web \\u6587\\u6863\\uFF1A\\u9762\\u5411\\u5BF9\\u8C61\\u7684 JavaScript \\u521D\\u5B66\\u8005\"})}),`\n`]})]})}function h(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(s,{...r})}):s(r)}return j(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-flux-pattern-and-what-are-its-benefits/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-flux-pattern-and-what-are-its-benefits/en-US.json
index f549e1203..ee7ebfbd1 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-flux-pattern-and-what-are-its-benefits/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-flux-pattern-and-what-are-its-benefits/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-flux-pattern-and-what-are-its-benefits/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),w=(t,n)=>{for(var i in n)a(t,i,{get:n[i],enumerable:!0})},l=(t,n,i,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of u(n))!f.call(t,r)&&r!==i&&a(t,r,{get:()=>n[r],enumerable:!(c=p(n,r))||c.enumerable});return t};var x=(t,n,i)=>(i=t!=null?h(g(t)):{},l(n||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),b=t=>l(a({},\"__esModule\",{value:!0}),t);var s=m((D,o)=>{o.exports=_jsx_runtime});var v={};w(v,{default:()=>F,frontmatter:()=>y});var e=x(s()),y={title:\"What is the Flux pattern and what are its benefits?\"};function d(t){let n=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\",strong:\"strong\",ol:\"ol\",hr:\"hr\",h3:\"h3\",pre:\"pre\",code:\"code\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"The Flux pattern is an architectural design used for managing state in applications, particularly in React ecosystems. It enforces a unidirectional data flow, making it easier to manage and debug application state.\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Core components\"}),\":\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Dispatcher\"}),\": Manages actions and dispatches them to stores.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Stores\"}),\": Hold the state and logic of the application.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Actions\"}),\": Payloads of information sent from the application to the dispatcher.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"View\"}),\": React components that re-render when stores update.\"]}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Benefits\"}),\":\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"Predictable state management due to unidirectional data flow.\"}),`\n`,(0,e.jsx)(n.li,{children:\"Improved debugging and testing.\"}),`\n`,(0,e.jsx)(n.li,{children:\"Clear separation of concerns.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"Example flow:\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"User interacts with the \",(0,e.jsx)(n.strong,{children:\"View\"}),\".\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Actions\"}),\" are triggered and dispatched by the \",(0,e.jsx)(n.strong,{children:\"Dispatcher\"}),\".\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Stores\"}),\" process the actions and update their state.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"View\"}),\" re-renders based on the updated state.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"What is the Flux pattern?\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Overview\"}),`\n`,(0,e.jsx)(n.p,{children:\"Flux is a design pattern introduced by Facebook to manage the flow of data in React applications. It enforces a unidirectional data flow, where data flows in one direction through specific components:\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Dispatcher\"}),\": Acts as a central hub, dispatching actions to stores.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Stores\"}),\": Manage the application's state and contain the business logic.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Actions\"}),\": Represent the payloads of information sent to the dispatcher.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"View\"}),\": Consists of React components that listen to stores for changes and re-render accordingly.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"This structure simplifies state management, especially for complex applications, by ensuring data flows in a predictable and traceable manner.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Unidirectional data flow\"}),`\n`,(0,e.jsx)(n.p,{children:\"Unlike traditional MVC patterns, where data can flow in multiple directions, Flux's unidirectional flow ensures consistency:\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"User interactions trigger \",(0,e.jsx)(n.strong,{children:\"actions\"}),\".\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Actions\"}),\" are sent to the \",(0,e.jsx)(n.strong,{children:\"dispatcher\"}),\", which forwards them to \",(0,e.jsx)(n.strong,{children:\"stores\"}),\".\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Stores\"}),\" update their state and notify the \",(0,e.jsx)(n.strong,{children:\"view\"}),\" to re-render.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Code example\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`const Dispatcher = require('flux').Dispatcher;\nconst dispatcher = new Dispatcher();\n\n// Action\nconst action = {\n  type: 'INCREMENT',\n  payload: { amount: 1 },\n};\n\ndispatcher.dispatch(action);\n\n// Store\nclass CounterStore {\n  constructor() {\n    this.count = 0;\n    dispatcher.register((action) => {\n      if (action.type === 'INCREMENT') {\n        this.count += action.payload.amount;\n        console.log(\\`Count: \\${this.count}\\`);\n      }\n    });\n  }\n}\nconst store = new CounterStore();\n\n// Dispatching an action\ndispatcher.dispatch({ type: 'INCREMENT', payload: { amount: 1 } });\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Benefits of the Flux pattern\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Predictable state management\"}),`\n`,(0,e.jsx)(n.p,{children:\"The unidirectional data flow ensures that the application's state transitions are clear and predictable, making it easier to understand and debug.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Improved debugging and testing\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"Each action represents a discrete event, making it easier to trace changes in the application.\"}),`\n`,(0,e.jsx)(n.li,{children:\"Stores contain pure logic, which can be unit tested independently of the view.\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Scalability\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"As the application grows, the Flux pattern helps maintain a clear structure.\"}),`\n`,(0,e.jsx)(n.li,{children:\"Decoupled components allow for modular development.\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Clear separation of concerns\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"Actions encapsulate events and payloads.\"}),`\n`,(0,e.jsx)(n.li,{children:\"Stores handle state and business logic.\"}),`\n`,(0,e.jsx)(n.li,{children:\"Views focus on rendering the UI.\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Compatibility with React\"}),`\n`,(0,e.jsx)(n.p,{children:\"Flux's unidirectional data flow aligns well with React's declarative component model, enabling seamless integration.\"}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://facebookarchive.github.io/flux/\",children:\"Flux official documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://redux.js.org/understanding/history-and-design/prior-art#flux\",children:\"Redux Prior Art \\u2013 Flux\"})}),`\n`]})]})}function C(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(d,t)})):d(t)}var F=C;return b(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var w=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),x=(t,n)=>{for(var i in n)a(t,i,{get:n[i],enumerable:!0})},l=(t,n,i,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of g(n))!m.call(t,r)&&r!==i&&a(t,r,{get:()=>n[r],enumerable:!(c=u(n,r))||c.enumerable});return t};var b=(t,n,i)=>(i=t!=null?p(f(t)):{},l(n||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),y=t=>l(a({},\"__esModule\",{value:!0}),t);var s=w((R,o)=>{o.exports=_jsx_runtime});var F={};x(F,{default:()=>h,frontmatter:()=>C});var e=b(s()),C={title:\"What is the Flux pattern and what are its benefits?\"};function d(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"The Flux pattern is an architectural design used for managing state in applications, particularly in React ecosystems. It enforces a unidirectional data flow, making it easier to manage and debug application state.\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Core components\"}),\":\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Dispatcher\"}),\": Manages actions and dispatches them to stores.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Stores\"}),\": Hold the state and logic of the application.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Actions\"}),\": Payloads of information sent from the application to the dispatcher.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"View\"}),\": React components that re-render when stores update.\"]}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Benefits\"}),\":\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"Predictable state management due to unidirectional data flow.\"}),`\n`,(0,e.jsx)(n.li,{children:\"Improved debugging and testing.\"}),`\n`,(0,e.jsx)(n.li,{children:\"Clear separation of concerns.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"Example flow:\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"User interacts with the \",(0,e.jsx)(n.strong,{children:\"View\"}),\".\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Actions\"}),\" are triggered and dispatched by the \",(0,e.jsx)(n.strong,{children:\"Dispatcher\"}),\".\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Stores\"}),\" process the actions and update their state.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"View\"}),\" re-renders based on the updated state.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"What is the Flux pattern?\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Overview\"}),`\n`,(0,e.jsx)(n.p,{children:\"Flux is a design pattern introduced by Facebook to manage the flow of data in React applications. It enforces a unidirectional data flow, where data flows in one direction through specific components:\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Dispatcher\"}),\": Acts as a central hub, dispatching actions to stores.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Stores\"}),\": Manage the application's state and contain the business logic.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Actions\"}),\": Represent the payloads of information sent to the dispatcher.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"View\"}),\": Consists of React components that listen to stores for changes and re-render accordingly.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"This structure simplifies state management, especially for complex applications, by ensuring data flows in a predictable and traceable manner.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Unidirectional data flow\"}),`\n`,(0,e.jsx)(n.p,{children:\"Unlike traditional MVC patterns, where data can flow in multiple directions, Flux's unidirectional flow ensures consistency:\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"User interactions trigger \",(0,e.jsx)(n.strong,{children:\"actions\"}),\".\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Actions\"}),\" are sent to the \",(0,e.jsx)(n.strong,{children:\"dispatcher\"}),\", which forwards them to \",(0,e.jsx)(n.strong,{children:\"stores\"}),\".\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Stores\"}),\" update their state and notify the \",(0,e.jsx)(n.strong,{children:\"view\"}),\" to re-render.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Code example\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`const Dispatcher = require('flux').Dispatcher;\nconst dispatcher = new Dispatcher();\n\n// Action\nconst action = {\n  type: 'INCREMENT',\n  payload: { amount: 1 },\n};\n\ndispatcher.dispatch(action);\n\n// Store\nclass CounterStore {\n  constructor() {\n    this.count = 0;\n    dispatcher.register((action) => {\n      if (action.type === 'INCREMENT') {\n        this.count += action.payload.amount;\n        console.log(\\`Count: \\${this.count}\\`);\n      }\n    });\n  }\n}\nconst store = new CounterStore();\n\n// Dispatching an action\ndispatcher.dispatch({ type: 'INCREMENT', payload: { amount: 1 } });\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Benefits of the Flux pattern\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Predictable state management\"}),`\n`,(0,e.jsx)(n.p,{children:\"The unidirectional data flow ensures that the application's state transitions are clear and predictable, making it easier to understand and debug.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Improved debugging and testing\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"Each action represents a discrete event, making it easier to trace changes in the application.\"}),`\n`,(0,e.jsx)(n.li,{children:\"Stores contain pure logic, which can be unit tested independently of the view.\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Scalability\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"As the application grows, the Flux pattern helps maintain a clear structure.\"}),`\n`,(0,e.jsx)(n.li,{children:\"Decoupled components allow for modular development.\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Clear separation of concerns\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"Actions encapsulate events and payloads.\"}),`\n`,(0,e.jsx)(n.li,{children:\"Stores handle state and business logic.\"}),`\n`,(0,e.jsx)(n.li,{children:\"Views focus on rendering the UI.\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"Compatibility with React\"}),`\n`,(0,e.jsx)(n.p,{children:\"Flux's unidirectional data flow aligns well with React's declarative component model, enabling seamless integration.\"}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://facebookarchive.github.io/flux/\",children:\"Flux official documentation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://redux.js.org/understanding/history-and-design/prior-art#flux\",children:\"Redux Prior Art \\u2013 Flux\"})}),`\n`]})]})}function h(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(d,{...t})}):d(t)}return y(F);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-flux-pattern-and-what-are-its-benefits/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-flux-pattern-and-what-are-its-benefits/zh-CN.json
index 1f774aeed..e47c9b651 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-flux-pattern-and-what-are-its-benefits/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-flux-pattern-and-what-are-its-benefits/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-flux-pattern-and-what-are-its-benefits/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var m=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),F=(i,n)=>{for(var l in n)c(i,l,{get:n[l],enumerable:!0})},t=(i,n,l,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let e of g(n))!x.call(i,e)&&e!==l&&c(i,e,{get:()=>n[e],enumerable:!(h=u(n,e))||h.enumerable});return i};var f=(i,n,l)=>(l=i!=null?a(p(i)):{},t(n||!i||!i.__esModule?c(l,\"default\",{value:i,enumerable:!0}):l,i)),R=i=>t(c({},\"__esModule\",{value:!0}),i);var o=m((_,d)=>{d.exports=_jsx_runtime});var M={};F(M,{default:()=>y,frontmatter:()=>j});var r=f(o()),j={title:\"\\u4EC0\\u4E48\\u662F Flux \\u6A21\\u5F0F\\u4EE5\\u53CA\\u5B83\\u7684\\u597D\\u5904\\uFF1F\"};function s(i){let n=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\",strong:\"strong\",ol:\"ol\",hr:\"hr\",h3:\"h3\",pre:\"pre\",code:\"code\",a:\"a\"},i.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,r.jsx)(n.p,{children:\"Flux \\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u7528\\u4E8E\\u7BA1\\u7406\\u5E94\\u7528\\u7A0B\\u5E8F\\u72B6\\u6001\\uFF08\\u5C24\\u5176\\u662F\\u5728 React \\u751F\\u6001\\u7CFB\\u7EDF\\u4E2D\\uFF09\\u7684\\u67B6\\u6784\\u8BBE\\u8BA1\\u3002\\u5B83\\u5F3A\\u5236\\u6267\\u884C\\u5355\\u5411\\u6570\\u636E\\u6D41\\uFF0C\\u4ECE\\u800C\\u66F4\\u5BB9\\u6613\\u7BA1\\u7406\\u548C\\u8C03\\u8BD5\\u5E94\\u7528\\u7A0B\\u5E8F\\u72B6\\u6001\\u3002\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u6838\\u5FC3\\u7EC4\\u4EF6\"}),\"\\uFF1A\",`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u8C03\\u5EA6\\u5668\"}),\"\\uFF1A\\u7BA1\\u7406\\u64CD\\u4F5C\\u5E76\\u5C06\\u5B83\\u4EEC\\u5206\\u6D3E\\u5230\\u5B58\\u50A8\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5B58\\u50A8\"}),\"\\uFF1A\\u4FDD\\u5B58\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u72B6\\u6001\\u548C\\u903B\\u8F91\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u64CD\\u4F5C\"}),\"\\uFF1A\\u4ECE\\u5E94\\u7528\\u7A0B\\u5E8F\\u53D1\\u9001\\u5230\\u8C03\\u5EA6\\u5668\\u7684\\u4FE1\\u606F\\u8D1F\\u8F7D\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u89C6\\u56FE\"}),\"\\uFF1A\\u5F53\\u5B58\\u50A8\\u66F4\\u65B0\\u65F6\\u91CD\\u65B0\\u6E32\\u67D3\\u7684 React \\u7EC4\\u4EF6\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u597D\\u5904\"}),\"\\uFF1A\",`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:\"\\u7531\\u4E8E\\u5355\\u5411\\u6570\\u636E\\u6D41\\uFF0C\\u72B6\\u6001\\u7BA1\\u7406\\u53EF\\u9884\\u6D4B\\u3002\"}),`\n`,(0,r.jsx)(n.li,{children:\"\\u6539\\u8FDB\\u7684\\u8C03\\u8BD5\\u548C\\u6D4B\\u8BD5\\u3002\"}),`\n`,(0,r.jsx)(n.li,{children:\"\\u5173\\u6CE8\\u70B9\\u6E05\\u6670\\u5206\\u79BB\\u3002\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,r.jsx)(n.p,{children:\"\\u793A\\u4F8B\\u6D41\\u7A0B\\uFF1A\"}),`\n`,(0,r.jsxs)(n.ol,{children:[`\n`,(0,r.jsxs)(n.li,{children:[\"\\u7528\\u6237\\u4E0E \",(0,r.jsx)(n.strong,{children:\"\\u89C6\\u56FE\"}),\" \\u4EA4\\u4E92\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u64CD\\u4F5C\"}),\" \\u88AB\\u89E6\\u53D1\\u5E76\\u7531 \",(0,r.jsx)(n.strong,{children:\"\\u8C03\\u5EA6\\u5668\"}),\" \\u5206\\u6D3E\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5B58\\u50A8\"}),\" \\u5904\\u7406\\u64CD\\u4F5C\\u5E76\\u66F4\\u65B0\\u5176\\u72B6\\u6001\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u89C6\\u56FE\"}),\" \\u6839\\u636E\\u66F4\\u65B0\\u540E\\u7684\\u72B6\\u6001\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.hr,{}),`\n`,(0,r.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F Flux \\u6A21\\u5F0F\\uFF1F\"}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u6982\\u8FF0\"}),`\n`,(0,r.jsx)(n.p,{children:\"Flux \\u662F Facebook \\u5F15\\u5165\\u7684\\u4E00\\u79CD\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u7528\\u4E8E\\u7BA1\\u7406 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7684\\u6570\\u636E\\u6D41\\u3002\\u5B83\\u5F3A\\u5236\\u6267\\u884C\\u5355\\u5411\\u6570\\u636E\\u6D41\\uFF0C\\u5176\\u4E2D\\u6570\\u636E\\u901A\\u8FC7\\u7279\\u5B9A\\u7EC4\\u4EF6\\u5728\\u4E00\\u4E2A\\u65B9\\u5411\\u4E0A\\u6D41\\u52A8\\uFF1A\"}),`\n`,(0,r.jsxs)(n.ol,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u8C03\\u5EA6\\u5668\"}),\"\\uFF1A\\u5145\\u5F53\\u4E2D\\u592E\\u67A2\\u7EBD\\uFF0C\\u5C06\\u64CD\\u4F5C\\u5206\\u6D3E\\u5230\\u5B58\\u50A8\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5B58\\u50A8\"}),\"\\uFF1A\\u7BA1\\u7406\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u72B6\\u6001\\u5E76\\u5305\\u542B\\u4E1A\\u52A1\\u903B\\u8F91\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u64CD\\u4F5C\"}),\"\\uFF1A\\u8868\\u793A\\u53D1\\u9001\\u5230\\u8C03\\u5EA6\\u5668\\u7684\\u4FE1\\u606F\\u8D1F\\u8F7D\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u89C6\\u56FE\"}),\"\\uFF1A\\u7531 React \\u7EC4\\u4EF6\\u7EC4\\u6210\\uFF0C\\u8FD9\\u4E9B\\u7EC4\\u4EF6\\u76D1\\u542C\\u5B58\\u50A8\\u7684\\u53D8\\u5316\\u5E76\\u76F8\\u5E94\\u5730\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.p,{children:\"\\u8FD9\\u79CD\\u7ED3\\u6784\\u7B80\\u5316\\u4E86\\u72B6\\u6001\\u7BA1\\u7406\\uFF0C\\u7279\\u522B\\u662F\\u5BF9\\u4E8E\\u590D\\u6742\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u901A\\u8FC7\\u786E\\u4FDD\\u6570\\u636E\\u4EE5\\u53EF\\u9884\\u6D4B\\u548C\\u53EF\\u8FFD\\u8E2A\\u7684\\u65B9\\u5F0F\\u6D41\\u52A8\\u3002\"}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u5355\\u5411\\u6570\\u636E\\u6D41\"}),`\n`,(0,r.jsx)(n.p,{children:\"\\u4E0E\\u6570\\u636E\\u53EF\\u4EE5\\u53CC\\u5411\\u6D41\\u52A8\\u7684\\u4F20\\u7EDF MVC \\u6A21\\u5F0F\\u4E0D\\u540C\\uFF0CFlux \\u7684\\u5355\\u5411\\u6D41\\u786E\\u4FDD\\u4E86\\u4E00\\u81F4\\u6027\\uFF1A\"}),`\n`,(0,r.jsxs)(n.ol,{children:[`\n`,(0,r.jsxs)(n.li,{children:[\"\\u7528\\u6237\\u4EA4\\u4E92\\u89E6\\u53D1 \",(0,r.jsx)(n.strong,{children:\"\\u64CD\\u4F5C\"}),\"\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u64CD\\u4F5C\"}),\" \\u88AB\\u53D1\\u9001\\u5230 \",(0,r.jsx)(n.strong,{children:\"\\u8C03\\u5EA6\\u5668\"}),\"\\uFF0C\\u540E\\u8005\\u5C06\\u5B83\\u4EEC\\u8F6C\\u53D1\\u5230 \",(0,r.jsx)(n.strong,{children:\"\\u5B58\\u50A8\"}),\"\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5B58\\u50A8\"}),\" \\u66F4\\u65B0\\u5176\\u72B6\\u6001\\u5E76\\u901A\\u77E5 \",(0,r.jsx)(n.strong,{children:\"\\u89C6\\u56FE\"}),\" \\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u4EE3\\u7801\\u793A\\u4F8B\"}),`\n`,(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:\"language-javascript\",children:`const Dispatcher = require('flux').Dispatcher;\nconst dispatcher = new Dispatcher();\n\n// Action\nconst action = {\n  type: 'INCREMENT',\n  payload: { amount: 1 },\n};\n\ndispatcher.dispatch(action);\n\n// Store\nclass CounterStore {\n  constructor() {\n    this.count = 0;\n    dispatcher.register((action) => {\n      if (action.type === 'INCREMENT') {\n        this.count += action.payload.amount;\n        console.log(\\`Count: \\${this.count}\\`);\n      }\n    });\n  }\n}\nconst store = new CounterStore();\n\n// Dispatching an action\ndispatcher.dispatch({ type: 'INCREMENT', payload: { amount: 1 } });\n`})}),`\n`,(0,r.jsx)(n.h2,{children:\"Flux \\u6A21\\u5F0F\\u7684\\u4F18\\u70B9\"}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u53EF\\u9884\\u6D4B\\u7684\\u72B6\\u6001\\u7BA1\\u7406\"}),`\n`,(0,r.jsx)(n.p,{children:\"\\u5355\\u5411\\u6570\\u636E\\u6D41\\u786E\\u4FDD\\u4E86\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u72B6\\u6001\\u8F6C\\u6362\\u6E05\\u6670\\u4E14\\u53EF\\u9884\\u6D4B\\uFF0C\\u4ECE\\u800C\\u66F4\\u5BB9\\u6613\\u7406\\u89E3\\u548C\\u8C03\\u8BD5\\u3002\"}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u6539\\u8FDB\\u8C03\\u8BD5\\u548C\\u6D4B\\u8BD5\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:\"\\u6BCF\\u4E2A\\u52A8\\u4F5C\\u4EE3\\u8868\\u4E00\\u4E2A\\u79BB\\u6563\\u4E8B\\u4EF6\\uFF0C\\u66F4\\u5BB9\\u6613\\u8FFD\\u8E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7684\\u53D8\\u5316\\u3002\"}),`\n`,(0,r.jsx)(n.li,{children:\"\\u5B58\\u50A8\\u5305\\u542B\\u7EAF\\u903B\\u8F91\\uFF0C\\u53EF\\u4EE5\\u72EC\\u7ACB\\u4E8E\\u89C6\\u56FE\\u8FDB\\u884C\\u5355\\u5143\\u6D4B\\u8BD5\\u3002\"}),`\n`]}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u53EF\\u6269\\u5C55\\u6027\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:\"\\u968F\\u7740\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u589E\\u957F\\uFF0CFlux \\u6A21\\u5F0F\\u6709\\u52A9\\u4E8E\\u4FDD\\u6301\\u6E05\\u6670\\u7684\\u7ED3\\u6784\\u3002\"}),`\n`,(0,r.jsx)(n.li,{children:\"\\u89E3\\u8026\\u7EC4\\u4EF6\\u5141\\u8BB8\\u6A21\\u5757\\u5316\\u5F00\\u53D1\\u3002\"}),`\n`]}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u5173\\u6CE8\\u70B9\\u6E05\\u6670\\u5206\\u79BB\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:\"\\u52A8\\u4F5C\\u5C01\\u88C5\\u4E8B\\u4EF6\\u548C\\u6709\\u6548\\u8F7D\\u8377\\u3002\"}),`\n`,(0,r.jsx)(n.li,{children:\"\\u5B58\\u50A8\\u5904\\u7406\\u72B6\\u6001\\u548C\\u4E1A\\u52A1\\u903B\\u8F91\\u3002\"}),`\n`,(0,r.jsx)(n.li,{children:\"\\u89C6\\u56FE\\u4FA7\\u91CD\\u4E8E\\u6E32\\u67D3 UI\\u3002\"}),`\n`]}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u4E0E React \\u7684\\u517C\\u5BB9\\u6027\"}),`\n`,(0,r.jsx)(n.p,{children:\"Flux \\u7684\\u5355\\u5411\\u6570\\u636E\\u6D41\\u4E0E React \\u7684\\u58F0\\u660E\\u5F0F\\u7EC4\\u4EF6\\u6A21\\u578B\\u5B8C\\u7F8E\\u5951\\u5408\\uFF0C\\u5B9E\\u73B0\\u65E0\\u7F1D\\u96C6\\u6210\\u3002\"}),`\n`,(0,r.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://facebookarchive.github.io/flux/\",children:\"Flux \\u5B98\\u65B9\\u6587\\u6863\"})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://redux.js.org/understanding/history-and-design/prior-art#flux\",children:\"Redux Prior Art \\u2013 Flux\"})}),`\n`]})]})}function C(i={}){let{wrapper:n}=i.components||{};return n?(0,r.jsx)(n,Object.assign({},i,{children:(0,r.jsx)(s,i)})):s(i)}var y=C;return R(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var F=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),f=(i,n)=>{for(var l in n)c(i,l,{get:n[l],enumerable:!0})},t=(i,n,l,h)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let e of g(n))!m.call(i,e)&&e!==l&&c(i,e,{get:()=>n[e],enumerable:!(h=p(n,e))||h.enumerable});return i};var R=(i,n,l)=>(l=i!=null?u(x(i)):{},t(n||!i||!i.__esModule?c(l,\"default\",{value:i,enumerable:!0}):l,i)),C=i=>t(c({},\"__esModule\",{value:!0}),i);var o=F((N,d)=>{d.exports=_jsx_runtime});var j={};f(j,{default:()=>a,frontmatter:()=>y});var r=R(o()),y={title:\"\\u4EC0\\u4E48\\u662F Flux \\u6A21\\u5F0F\\u4EE5\\u53CA\\u5B83\\u7684\\u597D\\u5904\\uFF1F\"};function s(i){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,r.jsx)(n.p,{children:\"Flux \\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u7528\\u4E8E\\u7BA1\\u7406\\u5E94\\u7528\\u7A0B\\u5E8F\\u72B6\\u6001\\uFF08\\u5C24\\u5176\\u662F\\u5728 React \\u751F\\u6001\\u7CFB\\u7EDF\\u4E2D\\uFF09\\u7684\\u67B6\\u6784\\u8BBE\\u8BA1\\u3002\\u5B83\\u5F3A\\u5236\\u6267\\u884C\\u5355\\u5411\\u6570\\u636E\\u6D41\\uFF0C\\u4ECE\\u800C\\u66F4\\u5BB9\\u6613\\u7BA1\\u7406\\u548C\\u8C03\\u8BD5\\u5E94\\u7528\\u7A0B\\u5E8F\\u72B6\\u6001\\u3002\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u6838\\u5FC3\\u7EC4\\u4EF6\"}),\"\\uFF1A\",`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u8C03\\u5EA6\\u5668\"}),\"\\uFF1A\\u7BA1\\u7406\\u64CD\\u4F5C\\u5E76\\u5C06\\u5B83\\u4EEC\\u5206\\u6D3E\\u5230\\u5B58\\u50A8\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5B58\\u50A8\"}),\"\\uFF1A\\u4FDD\\u5B58\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u72B6\\u6001\\u548C\\u903B\\u8F91\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u64CD\\u4F5C\"}),\"\\uFF1A\\u4ECE\\u5E94\\u7528\\u7A0B\\u5E8F\\u53D1\\u9001\\u5230\\u8C03\\u5EA6\\u5668\\u7684\\u4FE1\\u606F\\u8D1F\\u8F7D\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u89C6\\u56FE\"}),\"\\uFF1A\\u5F53\\u5B58\\u50A8\\u66F4\\u65B0\\u65F6\\u91CD\\u65B0\\u6E32\\u67D3\\u7684 React \\u7EC4\\u4EF6\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u597D\\u5904\"}),\"\\uFF1A\",`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:\"\\u7531\\u4E8E\\u5355\\u5411\\u6570\\u636E\\u6D41\\uFF0C\\u72B6\\u6001\\u7BA1\\u7406\\u53EF\\u9884\\u6D4B\\u3002\"}),`\n`,(0,r.jsx)(n.li,{children:\"\\u6539\\u8FDB\\u7684\\u8C03\\u8BD5\\u548C\\u6D4B\\u8BD5\\u3002\"}),`\n`,(0,r.jsx)(n.li,{children:\"\\u5173\\u6CE8\\u70B9\\u6E05\\u6670\\u5206\\u79BB\\u3002\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,r.jsx)(n.p,{children:\"\\u793A\\u4F8B\\u6D41\\u7A0B\\uFF1A\"}),`\n`,(0,r.jsxs)(n.ol,{children:[`\n`,(0,r.jsxs)(n.li,{children:[\"\\u7528\\u6237\\u4E0E \",(0,r.jsx)(n.strong,{children:\"\\u89C6\\u56FE\"}),\" \\u4EA4\\u4E92\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u64CD\\u4F5C\"}),\" \\u88AB\\u89E6\\u53D1\\u5E76\\u7531 \",(0,r.jsx)(n.strong,{children:\"\\u8C03\\u5EA6\\u5668\"}),\" \\u5206\\u6D3E\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5B58\\u50A8\"}),\" \\u5904\\u7406\\u64CD\\u4F5C\\u5E76\\u66F4\\u65B0\\u5176\\u72B6\\u6001\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u89C6\\u56FE\"}),\" \\u6839\\u636E\\u66F4\\u65B0\\u540E\\u7684\\u72B6\\u6001\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.hr,{}),`\n`,(0,r.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F Flux \\u6A21\\u5F0F\\uFF1F\"}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u6982\\u8FF0\"}),`\n`,(0,r.jsx)(n.p,{children:\"Flux \\u662F Facebook \\u5F15\\u5165\\u7684\\u4E00\\u79CD\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u7528\\u4E8E\\u7BA1\\u7406 React \\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7684\\u6570\\u636E\\u6D41\\u3002\\u5B83\\u5F3A\\u5236\\u6267\\u884C\\u5355\\u5411\\u6570\\u636E\\u6D41\\uFF0C\\u5176\\u4E2D\\u6570\\u636E\\u901A\\u8FC7\\u7279\\u5B9A\\u7EC4\\u4EF6\\u5728\\u4E00\\u4E2A\\u65B9\\u5411\\u4E0A\\u6D41\\u52A8\\uFF1A\"}),`\n`,(0,r.jsxs)(n.ol,{children:[`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u8C03\\u5EA6\\u5668\"}),\"\\uFF1A\\u5145\\u5F53\\u4E2D\\u592E\\u67A2\\u7EBD\\uFF0C\\u5C06\\u64CD\\u4F5C\\u5206\\u6D3E\\u5230\\u5B58\\u50A8\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5B58\\u50A8\"}),\"\\uFF1A\\u7BA1\\u7406\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u72B6\\u6001\\u5E76\\u5305\\u542B\\u4E1A\\u52A1\\u903B\\u8F91\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u64CD\\u4F5C\"}),\"\\uFF1A\\u8868\\u793A\\u53D1\\u9001\\u5230\\u8C03\\u5EA6\\u5668\\u7684\\u4FE1\\u606F\\u8D1F\\u8F7D\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u89C6\\u56FE\"}),\"\\uFF1A\\u7531 React \\u7EC4\\u4EF6\\u7EC4\\u6210\\uFF0C\\u8FD9\\u4E9B\\u7EC4\\u4EF6\\u76D1\\u542C\\u5B58\\u50A8\\u7684\\u53D8\\u5316\\u5E76\\u76F8\\u5E94\\u5730\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.p,{children:\"\\u8FD9\\u79CD\\u7ED3\\u6784\\u7B80\\u5316\\u4E86\\u72B6\\u6001\\u7BA1\\u7406\\uFF0C\\u7279\\u522B\\u662F\\u5BF9\\u4E8E\\u590D\\u6742\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\uFF0C\\u901A\\u8FC7\\u786E\\u4FDD\\u6570\\u636E\\u4EE5\\u53EF\\u9884\\u6D4B\\u548C\\u53EF\\u8FFD\\u8E2A\\u7684\\u65B9\\u5F0F\\u6D41\\u52A8\\u3002\"}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u5355\\u5411\\u6570\\u636E\\u6D41\"}),`\n`,(0,r.jsx)(n.p,{children:\"\\u4E0E\\u6570\\u636E\\u53EF\\u4EE5\\u53CC\\u5411\\u6D41\\u52A8\\u7684\\u4F20\\u7EDF MVC \\u6A21\\u5F0F\\u4E0D\\u540C\\uFF0CFlux \\u7684\\u5355\\u5411\\u6D41\\u786E\\u4FDD\\u4E86\\u4E00\\u81F4\\u6027\\uFF1A\"}),`\n`,(0,r.jsxs)(n.ol,{children:[`\n`,(0,r.jsxs)(n.li,{children:[\"\\u7528\\u6237\\u4EA4\\u4E92\\u89E6\\u53D1 \",(0,r.jsx)(n.strong,{children:\"\\u64CD\\u4F5C\"}),\"\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u64CD\\u4F5C\"}),\" \\u88AB\\u53D1\\u9001\\u5230 \",(0,r.jsx)(n.strong,{children:\"\\u8C03\\u5EA6\\u5668\"}),\"\\uFF0C\\u540E\\u8005\\u5C06\\u5B83\\u4EEC\\u8F6C\\u53D1\\u5230 \",(0,r.jsx)(n.strong,{children:\"\\u5B58\\u50A8\"}),\"\\u3002\"]}),`\n`,(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:\"\\u5B58\\u50A8\"}),\" \\u66F4\\u65B0\\u5176\\u72B6\\u6001\\u5E76\\u901A\\u77E5 \",(0,r.jsx)(n.strong,{children:\"\\u89C6\\u56FE\"}),\" \\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u4EE3\\u7801\\u793A\\u4F8B\"}),`\n`,(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:\"language-javascript\",children:`const Dispatcher = require('flux').Dispatcher;\nconst dispatcher = new Dispatcher();\n\n// Action\nconst action = {\n  type: 'INCREMENT',\n  payload: { amount: 1 },\n};\n\ndispatcher.dispatch(action);\n\n// Store\nclass CounterStore {\n  constructor() {\n    this.count = 0;\n    dispatcher.register((action) => {\n      if (action.type === 'INCREMENT') {\n        this.count += action.payload.amount;\n        console.log(\\`Count: \\${this.count}\\`);\n      }\n    });\n  }\n}\nconst store = new CounterStore();\n\n// Dispatching an action\ndispatcher.dispatch({ type: 'INCREMENT', payload: { amount: 1 } });\n`})}),`\n`,(0,r.jsx)(n.h2,{children:\"Flux \\u6A21\\u5F0F\\u7684\\u4F18\\u70B9\"}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u53EF\\u9884\\u6D4B\\u7684\\u72B6\\u6001\\u7BA1\\u7406\"}),`\n`,(0,r.jsx)(n.p,{children:\"\\u5355\\u5411\\u6570\\u636E\\u6D41\\u786E\\u4FDD\\u4E86\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u72B6\\u6001\\u8F6C\\u6362\\u6E05\\u6670\\u4E14\\u53EF\\u9884\\u6D4B\\uFF0C\\u4ECE\\u800C\\u66F4\\u5BB9\\u6613\\u7406\\u89E3\\u548C\\u8C03\\u8BD5\\u3002\"}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u6539\\u8FDB\\u8C03\\u8BD5\\u548C\\u6D4B\\u8BD5\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:\"\\u6BCF\\u4E2A\\u52A8\\u4F5C\\u4EE3\\u8868\\u4E00\\u4E2A\\u79BB\\u6563\\u4E8B\\u4EF6\\uFF0C\\u66F4\\u5BB9\\u6613\\u8FFD\\u8E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u7684\\u53D8\\u5316\\u3002\"}),`\n`,(0,r.jsx)(n.li,{children:\"\\u5B58\\u50A8\\u5305\\u542B\\u7EAF\\u903B\\u8F91\\uFF0C\\u53EF\\u4EE5\\u72EC\\u7ACB\\u4E8E\\u89C6\\u56FE\\u8FDB\\u884C\\u5355\\u5143\\u6D4B\\u8BD5\\u3002\"}),`\n`]}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u53EF\\u6269\\u5C55\\u6027\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:\"\\u968F\\u7740\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u589E\\u957F\\uFF0CFlux \\u6A21\\u5F0F\\u6709\\u52A9\\u4E8E\\u4FDD\\u6301\\u6E05\\u6670\\u7684\\u7ED3\\u6784\\u3002\"}),`\n`,(0,r.jsx)(n.li,{children:\"\\u89E3\\u8026\\u7EC4\\u4EF6\\u5141\\u8BB8\\u6A21\\u5757\\u5316\\u5F00\\u53D1\\u3002\"}),`\n`]}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u5173\\u6CE8\\u70B9\\u6E05\\u6670\\u5206\\u79BB\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:\"\\u52A8\\u4F5C\\u5C01\\u88C5\\u4E8B\\u4EF6\\u548C\\u6709\\u6548\\u8F7D\\u8377\\u3002\"}),`\n`,(0,r.jsx)(n.li,{children:\"\\u5B58\\u50A8\\u5904\\u7406\\u72B6\\u6001\\u548C\\u4E1A\\u52A1\\u903B\\u8F91\\u3002\"}),`\n`,(0,r.jsx)(n.li,{children:\"\\u89C6\\u56FE\\u4FA7\\u91CD\\u4E8E\\u6E32\\u67D3 UI\\u3002\"}),`\n`]}),`\n`,(0,r.jsx)(n.h3,{children:\"\\u4E0E React \\u7684\\u517C\\u5BB9\\u6027\"}),`\n`,(0,r.jsx)(n.p,{children:\"Flux \\u7684\\u5355\\u5411\\u6570\\u636E\\u6D41\\u4E0E React \\u7684\\u58F0\\u660E\\u5F0F\\u7EC4\\u4EF6\\u6A21\\u578B\\u5B8C\\u7F8E\\u5951\\u5408\\uFF0C\\u5B9E\\u73B0\\u65E0\\u7F1D\\u96C6\\u6210\\u3002\"}),`\n`,(0,r.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,r.jsxs)(n.ul,{children:[`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://facebookarchive.github.io/flux/\",children:\"Flux \\u5B98\\u65B9\\u6587\\u6863\"})}),`\n`,(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:\"https://redux.js.org/understanding/history-and-design/prior-art#flux\",children:\"Redux Prior Art \\u2013 Flux\"})}),`\n`]})]})}function a(i={}){let{wrapper:n}=i.components||{};return n?(0,r.jsx)(n,{...i,children:(0,r.jsx)(s,{...i})}):s(i)}return C(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-intl-namespace-object-for/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-intl-namespace-object-for/en-US.json
index d3a3d1caa..50adc1143 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-intl-namespace-object-for/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-intl-namespace-object-for/en-US.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-intl-namespace-object-for/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},l=(t,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!g.call(t,a)&&a!==r&&o(t,a,{get:()=>e[a],enumerable:!(i=h(e,a))||i.enumerable});return t};var j=(t,e,r)=>(r=t!=null?u(p(t)):{},l(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),I=t=>l(o({},\"__esModule\",{value:!0}),t);var s=f((x,c)=>{c.exports=_jsx_runtime});var w={};b(w,{default:()=>T,frontmatter:()=>v});var n=j(s()),v={title:\"What is the `Intl` namespace object for?\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",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 \",(0,n.jsx)(e.code,{children:\"Intl\"}),\" namespace object in JavaScript is used for internationalization purposes. It provides language-sensitive string comparison, number formatting, and date and time formatting. For example, you can use \",(0,n.jsx)(e.code,{children:\"Intl.DateTimeFormat\"}),\" to format dates according to a specific locale:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const date = new Date();\nconst formatter = new Intl.DateTimeFormat('en-US');\nconsole.log(formatter.format(date)); // Outputs date in 'MM/DD/YYYY' format\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is the \",(0,n.jsx)(e.code,{children:\"Intl\"}),\" namespace object for?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Intl\"}),\" namespace object in JavaScript is a part of the ECMAScript Internationalization API, which provides language-sensitive string comparison, number formatting, and date and time formatting. This is particularly useful for applications that need to support multiple languages and regions.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Language-sensitive string comparison\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Intl.Collator\"}),\" object is used for comparing strings in a locale-aware manner. This is useful for sorting strings in a way that is consistent with the conventions of a particular language.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const collator = new Intl.Collator('de-DE');\nconsole.log(collator.compare('\\xE4', 'z')); // Outputs a negative number because '\\xE4' comes before 'z' in German\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Number formatting\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Intl.NumberFormat\"}),\" object is used for formatting numbers according to the conventions of a specific locale. This includes formatting for currency, percentages, and plain numbers.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const number = 1234567.89;\nconst formatter = new Intl.NumberFormat('de-DE', {\n  style: 'currency',\n  currency: 'EUR',\n});\nconsole.log(formatter.format(number)); // Outputs '1.234.567,89 \\u20AC'\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Date and time formatting\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Intl.DateTimeFormat\"}),\" object is used for formatting dates and times according to the conventions of a specific locale.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const date = new Date();\nconst formatter = new Intl.DateTimeFormat('en-GB', {\n  year: 'numeric',\n  month: 'long',\n  day: 'numeric',\n});\nconsole.log(formatter.format(date)); // Outputs date in 'DD Month YYYY' format\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Plural rules\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Intl.PluralRules\"}),\" object is used to get the plural form of a number in a specific locale. This is useful for correctly pluralizing words in different languages.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const pluralRules = new Intl.PluralRules('en-US');\nconsole.log(pluralRules.select(1)); // Outputs 'one'\nconsole.log(pluralRules.select(2)); // Outputs 'other'\n`})}),`\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/Web/JavaScript/Reference/Global_Objects/Intl\",children:\"MDN Web Docs: Intl\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://tc39.es/ecma402/\",children:\"ECMAScript Internationalization API Specification\"})}),`\n`]})]})}function D(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var T=D;return I(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),I=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},l=(t,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!f.call(t,a)&&a!==r&&o(t,a,{get:()=>e[a],enumerable:!(i=m(e,a))||i.enumerable});return t};var j=(t,e,r)=>(r=t!=null?h(g(t)):{},l(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),v=t=>l(o({},\"__esModule\",{value:!0}),t);var s=b((y,c)=>{c.exports=_jsx_runtime});var T={};I(T,{default:()=>u,frontmatter:()=>D});var n=j(s()),D={title:\"What is the `Intl` namespace object for?\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...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 \",(0,n.jsx)(e.code,{children:\"Intl\"}),\" namespace object in JavaScript is used for internationalization purposes. It provides language-sensitive string comparison, number formatting, and date and time formatting. For example, you can use \",(0,n.jsx)(e.code,{children:\"Intl.DateTimeFormat\"}),\" to format dates according to a specific locale:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const date = new Date();\nconst formatter = new Intl.DateTimeFormat('en-US');\nconsole.log(formatter.format(date)); // Outputs date in 'MM/DD/YYYY' format\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is the \",(0,n.jsx)(e.code,{children:\"Intl\"}),\" namespace object for?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Intl\"}),\" namespace object in JavaScript is a part of the ECMAScript Internationalization API, which provides language-sensitive string comparison, number formatting, and date and time formatting. This is particularly useful for applications that need to support multiple languages and regions.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Language-sensitive string comparison\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Intl.Collator\"}),\" object is used for comparing strings in a locale-aware manner. This is useful for sorting strings in a way that is consistent with the conventions of a particular language.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const collator = new Intl.Collator('de-DE');\nconsole.log(collator.compare('\\xE4', 'z')); // Outputs a negative number because '\\xE4' comes before 'z' in German\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Number formatting\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Intl.NumberFormat\"}),\" object is used for formatting numbers according to the conventions of a specific locale. This includes formatting for currency, percentages, and plain numbers.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const number = 1234567.89;\nconst formatter = new Intl.NumberFormat('de-DE', {\n  style: 'currency',\n  currency: 'EUR',\n});\nconsole.log(formatter.format(number)); // Outputs '1.234.567,89 \\u20AC'\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Date and time formatting\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Intl.DateTimeFormat\"}),\" object is used for formatting dates and times according to the conventions of a specific locale.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const date = new Date();\nconst formatter = new Intl.DateTimeFormat('en-GB', {\n  year: 'numeric',\n  month: 'long',\n  day: 'numeric',\n});\nconsole.log(formatter.format(date)); // Outputs date in 'DD Month YYYY' format\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Plural rules\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Intl.PluralRules\"}),\" object is used to get the plural form of a number in a specific locale. This is useful for correctly pluralizing words in different languages.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const pluralRules = new Intl.PluralRules('en-US');\nconsole.log(pluralRules.select(1)); // Outputs 'one'\nconsole.log(pluralRules.select(2)); // Outputs 'other'\n`})}),`\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/Web/JavaScript/Reference/Global_Objects/Intl\",children:\"MDN Web Docs: Intl\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://tc39.es/ecma402/\",children:\"ECMAScript Internationalization API Specification\"})}),`\n`]})]})}function u(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return v(T);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-intl-namespace-object-for/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-intl-namespace-object-for/zh-CN.json
index aa70ef76b..c9234e27c 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-intl-namespace-object-for/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-intl-namespace-object-for/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-intl-namespace-object-for/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),I=(t,e)=>{for(var r in e)c(t,r,{get:e[r],enumerable:!0})},a=(t,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of m(e))!g.call(t,l)&&l!==r&&c(t,l,{get:()=>e[l],enumerable:!(o=u(e,l))||o.enumerable});return t};var D=(t,e,r)=>(r=t!=null?h(p(t)):{},a(e||!t||!t.__esModule?c(r,\"default\",{value:t,enumerable:!0}):r,t)),b=t=>a(c({},\"__esModule\",{value:!0}),t);var s=f((S,i)=>{i.exports=_jsx_runtime});var M={};I(M,{default:()=>x,frontmatter:()=>j});var n=D(s()),j={title:\"`Intl` \\u547D\\u540D\\u7A7A\\u95F4\\u5BF9\\u8C61\\u662F\\u505A\\u4EC0\\u4E48\\u7684\\uFF1F\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",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:[\"JavaScript \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"Intl\"}),\" \\u547D\\u540D\\u7A7A\\u95F4\\u5BF9\\u8C61\\u7528\\u4E8E\\u56FD\\u9645\\u5316\\u76EE\\u7684\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u8BED\\u8A00\\u654F\\u611F\\u7684\\u5B57\\u7B26\\u4E32\\u6BD4\\u8F83\\u3001\\u6570\\u5B57\\u683C\\u5F0F\\u5316\\u4EE5\\u53CA\\u65E5\\u671F\\u548C\\u65F6\\u95F4\\u683C\\u5F0F\\u5316\\u3002\\u4F8B\\u5982\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Intl.DateTimeFormat\"}),\" \\u6839\\u636E\\u7279\\u5B9A\\u533A\\u57DF\\u8BBE\\u7F6E\\u683C\\u5F0F\\u5316\\u65E5\\u671F\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const date = new Date();\nconst formatter = new Intl.DateTimeFormat('en-US');\nconsole.log(formatter.format(date)); // Outputs date in 'MM/DD/YYYY' format\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Intl\"}),\" \\u547D\\u540D\\u7A7A\\u95F4\\u5BF9\\u8C61\\u662F\\u505A\\u4EC0\\u4E48\\u7684\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"Intl\"}),\" \\u547D\\u540D\\u7A7A\\u95F4\\u5BF9\\u8C61\\u662F ECMAScript \\u56FD\\u9645\\u5316 API \\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u5B83\\u63D0\\u4F9B\\u8BED\\u8A00\\u654F\\u611F\\u7684\\u5B57\\u7B26\\u4E32\\u6BD4\\u8F83\\u3001\\u6570\\u5B57\\u683C\\u5F0F\\u5316\\u4EE5\\u53CA\\u65E5\\u671F\\u548C\\u65F6\\u95F4\\u683C\\u5F0F\\u5316\\u3002\\u8FD9\\u5BF9\\u4E8E\\u9700\\u8981\\u652F\\u6301\\u591A\\u79CD\\u8BED\\u8A00\\u548C\\u5730\\u533A\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u7279\\u522B\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BED\\u8A00\\u654F\\u611F\\u7684\\u5B57\\u7B26\\u4E32\\u6BD4\\u8F83\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Intl.Collator\"}),\" \\u5BF9\\u8C61\\u7528\\u4E8E\\u4EE5\\u533A\\u57DF\\u8BBE\\u7F6E\\u611F\\u77E5\\u7684\\u65B9\\u5F0F\\u6BD4\\u8F83\\u5B57\\u7B26\\u4E32\\u3002\\u8FD9\\u5BF9\\u4E8E\\u4EE5\\u7B26\\u5408\\u7279\\u5B9A\\u8BED\\u8A00\\u7684\\u7EA6\\u5B9A\\u7684\\u65B9\\u5F0F\\u5BF9\\u5B57\\u7B26\\u4E32\\u8FDB\\u884C\\u6392\\u5E8F\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const collator = new Intl.Collator('de-DE');\nconsole.log(collator.compare('\\xE4', 'z')); // Outputs a negative number because '\\xE4' comes before 'z' in German\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6570\\u5B57\\u683C\\u5F0F\\u5316\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Intl.NumberFormat\"}),\" \\u5BF9\\u8C61\\u7528\\u4E8E\\u6839\\u636E\\u7279\\u5B9A\\u533A\\u57DF\\u8BBE\\u7F6E\\u7684\\u7EA6\\u5B9A\\u683C\\u5F0F\\u5316\\u6570\\u5B57\\u3002\\u8FD9\\u5305\\u62EC\\u8D27\\u5E01\\u3001\\u767E\\u5206\\u6BD4\\u548C\\u7EAF\\u6570\\u5B57\\u7684\\u683C\\u5F0F\\u5316\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const number = 1234567.89;\nconst formatter = new Intl.NumberFormat('de-DE', {\n  style: 'currency',\n  currency: 'EUR',\n});\nconsole.log(formatter.format(number)); // Outputs '1.234.567,89 \\u20AC'\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u65E5\\u671F\\u548C\\u65F6\\u95F4\\u683C\\u5F0F\\u5316\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Intl.DateTimeFormat\"}),\" \\u5BF9\\u8C61\\u7528\\u4E8E\\u6839\\u636E\\u7279\\u5B9A\\u533A\\u57DF\\u8BBE\\u7F6E\\u7684\\u7EA6\\u5B9A\\u683C\\u5F0F\\u5316\\u65E5\\u671F\\u548C\\u65F6\\u95F4\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const date = new Date();\nconst formatter = new Intl.DateTimeFormat('en-GB', {\n  year: 'numeric',\n  month: 'long',\n  day: 'numeric',\n});\nconsole.log(formatter.format(date)); // Outputs date in 'DD Month YYYY' format\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u590D\\u6570\\u89C4\\u5219\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Intl.PluralRules\"}),\" \\u5BF9\\u8C61\\u7528\\u4E8E\\u83B7\\u53D6\\u7279\\u5B9A\\u533A\\u57DF\\u8BBE\\u7F6E\\u4E2D\\u6570\\u5B57\\u7684\\u590D\\u6570\\u5F62\\u5F0F\\u3002\\u8FD9\\u5BF9\\u4E8E\\u6B63\\u786E\\u5730\\u5C06\\u4E0D\\u540C\\u8BED\\u8A00\\u4E2D\\u7684\\u5355\\u8BCD\\u590D\\u6570\\u5316\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const pluralRules = new Intl.PluralRules('en-US');\nconsole.log(pluralRules.select(1)); // Outputs 'one'\nconsole.log(pluralRules.select(2)); // Outputs 'other'\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Intl\",children:\"MDN Web Docs: Intl\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://tc39.es/ecma402/\",children:\"ECMAScript Internationalization API Specification\"})}),`\n`]})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var x=v;return b(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var I=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),D=(t,e)=>{for(var r in e)c(t,r,{get:e[r],enumerable:!0})},a=(t,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of p(e))!g.call(t,l)&&l!==r&&c(t,l,{get:()=>e[l],enumerable:!(o=m(e,l))||o.enumerable});return t};var b=(t,e,r)=>(r=t!=null?u(f(t)):{},a(e||!t||!t.__esModule?c(r,\"default\",{value:t,enumerable:!0}):r,t)),j=t=>a(c({},\"__esModule\",{value:!0}),t);var d=I((S,i)=>{i.exports=_jsx_runtime});var x={};D(x,{default:()=>h,frontmatter:()=>v});var n=b(d()),v={title:\"`Intl` \\u547D\\u540D\\u7A7A\\u95F4\\u5BF9\\u8C61\\u662F\\u505A\\u4EC0\\u4E48\\u7684\\uFF1F\"};function s(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"Intl\"}),\" \\u547D\\u540D\\u7A7A\\u95F4\\u5BF9\\u8C61\\u7528\\u4E8E\\u56FD\\u9645\\u5316\\u76EE\\u7684\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u8BED\\u8A00\\u654F\\u611F\\u7684\\u5B57\\u7B26\\u4E32\\u6BD4\\u8F83\\u3001\\u6570\\u5B57\\u683C\\u5F0F\\u5316\\u4EE5\\u53CA\\u65E5\\u671F\\u548C\\u65F6\\u95F4\\u683C\\u5F0F\\u5316\\u3002\\u4F8B\\u5982\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Intl.DateTimeFormat\"}),\" \\u6839\\u636E\\u7279\\u5B9A\\u533A\\u57DF\\u8BBE\\u7F6E\\u683C\\u5F0F\\u5316\\u65E5\\u671F\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const date = new Date();\nconst formatter = new Intl.DateTimeFormat('en-US');\nconsole.log(formatter.format(date)); // Outputs date in 'MM/DD/YYYY' format\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"Intl\"}),\" \\u547D\\u540D\\u7A7A\\u95F4\\u5BF9\\u8C61\\u662F\\u505A\\u4EC0\\u4E48\\u7684\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"Intl\"}),\" \\u547D\\u540D\\u7A7A\\u95F4\\u5BF9\\u8C61\\u662F ECMAScript \\u56FD\\u9645\\u5316 API \\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u5B83\\u63D0\\u4F9B\\u8BED\\u8A00\\u654F\\u611F\\u7684\\u5B57\\u7B26\\u4E32\\u6BD4\\u8F83\\u3001\\u6570\\u5B57\\u683C\\u5F0F\\u5316\\u4EE5\\u53CA\\u65E5\\u671F\\u548C\\u65F6\\u95F4\\u683C\\u5F0F\\u5316\\u3002\\u8FD9\\u5BF9\\u4E8E\\u9700\\u8981\\u652F\\u6301\\u591A\\u79CD\\u8BED\\u8A00\\u548C\\u5730\\u533A\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u7279\\u522B\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BED\\u8A00\\u654F\\u611F\\u7684\\u5B57\\u7B26\\u4E32\\u6BD4\\u8F83\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Intl.Collator\"}),\" \\u5BF9\\u8C61\\u7528\\u4E8E\\u4EE5\\u533A\\u57DF\\u8BBE\\u7F6E\\u611F\\u77E5\\u7684\\u65B9\\u5F0F\\u6BD4\\u8F83\\u5B57\\u7B26\\u4E32\\u3002\\u8FD9\\u5BF9\\u4E8E\\u4EE5\\u7B26\\u5408\\u7279\\u5B9A\\u8BED\\u8A00\\u7684\\u7EA6\\u5B9A\\u7684\\u65B9\\u5F0F\\u5BF9\\u5B57\\u7B26\\u4E32\\u8FDB\\u884C\\u6392\\u5E8F\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const collator = new Intl.Collator('de-DE');\nconsole.log(collator.compare('\\xE4', 'z')); // Outputs a negative number because '\\xE4' comes before 'z' in German\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6570\\u5B57\\u683C\\u5F0F\\u5316\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Intl.NumberFormat\"}),\" \\u5BF9\\u8C61\\u7528\\u4E8E\\u6839\\u636E\\u7279\\u5B9A\\u533A\\u57DF\\u8BBE\\u7F6E\\u7684\\u7EA6\\u5B9A\\u683C\\u5F0F\\u5316\\u6570\\u5B57\\u3002\\u8FD9\\u5305\\u62EC\\u8D27\\u5E01\\u3001\\u767E\\u5206\\u6BD4\\u548C\\u7EAF\\u6570\\u5B57\\u7684\\u683C\\u5F0F\\u5316\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const number = 1234567.89;\nconst formatter = new Intl.NumberFormat('de-DE', {\n  style: 'currency',\n  currency: 'EUR',\n});\nconsole.log(formatter.format(number)); // Outputs '1.234.567,89 \\u20AC'\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u65E5\\u671F\\u548C\\u65F6\\u95F4\\u683C\\u5F0F\\u5316\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Intl.DateTimeFormat\"}),\" \\u5BF9\\u8C61\\u7528\\u4E8E\\u6839\\u636E\\u7279\\u5B9A\\u533A\\u57DF\\u8BBE\\u7F6E\\u7684\\u7EA6\\u5B9A\\u683C\\u5F0F\\u5316\\u65E5\\u671F\\u548C\\u65F6\\u95F4\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const date = new Date();\nconst formatter = new Intl.DateTimeFormat('en-GB', {\n  year: 'numeric',\n  month: 'long',\n  day: 'numeric',\n});\nconsole.log(formatter.format(date)); // Outputs date in 'DD Month YYYY' format\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u590D\\u6570\\u89C4\\u5219\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Intl.PluralRules\"}),\" \\u5BF9\\u8C61\\u7528\\u4E8E\\u83B7\\u53D6\\u7279\\u5B9A\\u533A\\u57DF\\u8BBE\\u7F6E\\u4E2D\\u6570\\u5B57\\u7684\\u590D\\u6570\\u5F62\\u5F0F\\u3002\\u8FD9\\u5BF9\\u4E8E\\u6B63\\u786E\\u5730\\u5C06\\u4E0D\\u540C\\u8BED\\u8A00\\u4E2D\\u7684\\u5355\\u8BCD\\u590D\\u6570\\u5316\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const pluralRules = new Intl.PluralRules('en-US');\nconsole.log(pluralRules.select(1)); // Outputs 'one'\nconsole.log(pluralRules.select(2)); // Outputs 'other'\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Intl\",children:\"MDN Web Docs: Intl\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://tc39.es/ecma402/\",children:\"ECMAScript Internationalization API Specification\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(s,{...t})}):s(t)}return j(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/en-US.json
index 6e18fe948..77db4d855 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var a in e)o(t,a,{get:e[a],enumerable:!0})},l=(t,e,a,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!g.call(t,i)&&i!==a&&o(t,i,{get:()=>e[i],enumerable:!(r=p(e,i))||r.enumerable});return t};var f=(t,e,a)=>(a=t!=null?h(m(t)):{},l(e||!t||!t.__esModule?o(a,\"default\",{value:t,enumerable:!0}):a,t)),M=t=>l(o({},\"__esModule\",{value:!0}),t);var s=b((T,d)=>{d.exports=_jsx_runtime});var x={};v(x,{default:()=>I,frontmatter:()=>y});var n=f(s()),y={title:\"What is the Module pattern and how does it help with encapsulation?\"};function c(t){let e=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",h4:\"h4\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Module pattern in JavaScript is a design pattern used to create self-contained modules of code. It helps with encapsulation by allowing you to define private and public members within a module. Private members are not accessible from outside the module, while public members are exposed through a returned object. This pattern helps in organizing code, avoiding global namespace pollution, and maintaining a clean separation of concerns.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var myModule = (function () {\n  var privateVar = 'I am private';\n\n  function privateMethod() {\n    console.log(privateVar);\n  }\n\n  return {\n    publicMethod: function () {\n      privateMethod();\n    },\n  };\n})();\n\nmyModule.publicMethod(); // Logs: I am private\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is the Module pattern and how does it help with encapsulation?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Introduction to the Module pattern\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Module pattern is a design pattern used in JavaScript to create modules of code that are self-contained. It leverages closures to create private and public members, allowing for better organization and encapsulation of code.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How the Module pattern works\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Module pattern typically involves an immediately-invoked function expression (IIFE) that returns an object. This object contains methods and properties that are exposed as the public API of the module. Inside the IIFE, you can define private variables and functions that are not accessible from outside the module.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Example of the Module pattern\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here is a simple example of the Module pattern:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var myModule = (function () {\n  // Private members\n  var privateVar = 'I am private';\n\n  function privateMethod() {\n    console.log(privateVar);\n  }\n\n  // Public members\n  return {\n    publicMethod: function () {\n      privateMethod();\n    },\n  };\n})();\n\nmyModule.publicMethod(); // Logs: I am private\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"In this example:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"privateVar\"}),\" and \",(0,n.jsx)(e.code,{children:\"privateMethod\"}),\" are private members and cannot be accessed directly from outside the module.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"publicMethod\"}),\" is a public member and can be accessed from outside the module. It can interact with the private members.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits of using the Module pattern\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Encapsulation\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Module pattern helps in encapsulating code by hiding the internal implementation details and exposing only the necessary parts. This makes the code more modular and easier to maintain.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Avoiding global namespace pollution\"}),`\n`,(0,n.jsx)(e.p,{children:\"By using the Module pattern, you can avoid polluting the global namespace with variables and functions. This reduces the risk of naming collisions and makes the code more robust.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Separation of concerns\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Module pattern promotes a clean separation of concerns by allowing you to group related functionality together. This makes the code more organized and easier to understand.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Conclusion\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Module pattern is a powerful tool in JavaScript for creating self-contained modules of code. It helps with encapsulation by allowing you to define private and public members, making the code more modular, maintainable, and organized.\"}),`\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://toddmotto.com/mastering-the-module-pattern/\",children:\"JavaScript Module Pattern: In-Depth\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures\",children:\"MDN Web Docs: Closures\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript\",children:\"Addy Osmani's Learning JavaScript Design Patterns\"})}),`\n`]})]})}function w(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(c,t)})):c(t)}var I=w;return M(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var a in e)o(t,a,{get:e[a],enumerable:!0})},l=(t,e,a,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!v.call(t,i)&&i!==a&&o(t,i,{get:()=>e[i],enumerable:!(r=u(e,i))||r.enumerable});return t};var M=(t,e,a)=>(a=t!=null?p(g(t)):{},l(e||!t||!t.__esModule?o(a,\"default\",{value:t,enumerable:!0}):a,t)),y=t=>l(o({},\"__esModule\",{value:!0}),t);var c=b((j,d)=>{d.exports=_jsx_runtime});var I={};f(I,{default:()=>h,frontmatter:()=>w});var n=M(c()),w={title:\"What is the Module pattern and how does it help with encapsulation?\"};function s(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Module pattern in JavaScript is a design pattern used to create self-contained modules of code. It helps with encapsulation by allowing you to define private and public members within a module. Private members are not accessible from outside the module, while public members are exposed through a returned object. This pattern helps in organizing code, avoiding global namespace pollution, and maintaining a clean separation of concerns.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var myModule = (function () {\n  var privateVar = 'I am private';\n\n  function privateMethod() {\n    console.log(privateVar);\n  }\n\n  return {\n    publicMethod: function () {\n      privateMethod();\n    },\n  };\n})();\n\nmyModule.publicMethod(); // Logs: I am private\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is the Module pattern and how does it help with encapsulation?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Introduction to the Module pattern\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Module pattern is a design pattern used in JavaScript to create modules of code that are self-contained. It leverages closures to create private and public members, allowing for better organization and encapsulation of code.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How the Module pattern works\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Module pattern typically involves an immediately-invoked function expression (IIFE) that returns an object. This object contains methods and properties that are exposed as the public API of the module. Inside the IIFE, you can define private variables and functions that are not accessible from outside the module.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Example of the Module pattern\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here is a simple example of the Module pattern:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`var myModule = (function () {\n  // Private members\n  var privateVar = 'I am private';\n\n  function privateMethod() {\n    console.log(privateVar);\n  }\n\n  // Public members\n  return {\n    publicMethod: function () {\n      privateMethod();\n    },\n  };\n})();\n\nmyModule.publicMethod(); // Logs: I am private\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"In this example:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"privateVar\"}),\" and \",(0,n.jsx)(e.code,{children:\"privateMethod\"}),\" are private members and cannot be accessed directly from outside the module.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"publicMethod\"}),\" is a public member and can be accessed from outside the module. It can interact with the private members.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Benefits of using the Module pattern\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Encapsulation\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Module pattern helps in encapsulating code by hiding the internal implementation details and exposing only the necessary parts. This makes the code more modular and easier to maintain.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Avoiding global namespace pollution\"}),`\n`,(0,n.jsx)(e.p,{children:\"By using the Module pattern, you can avoid polluting the global namespace with variables and functions. This reduces the risk of naming collisions and makes the code more robust.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Separation of concerns\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Module pattern promotes a clean separation of concerns by allowing you to group related functionality together. This makes the code more organized and easier to understand.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Conclusion\"}),`\n`,(0,n.jsx)(e.p,{children:\"The Module pattern is a powerful tool in JavaScript for creating self-contained modules of code. It helps with encapsulation by allowing you to define private and public members, making the code more modular, maintainable, and organized.\"}),`\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://toddmotto.com/mastering-the-module-pattern/\",children:\"JavaScript Module Pattern: In-Depth\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures\",children:\"MDN Web Docs: Closures\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript\",children:\"Addy Osmani's Learning JavaScript Design Patterns\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(s,{...t})}):s(t)}return y(I);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/zh-CN.json
index b9a9470b3..51abf72ff 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var M=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),g=(r,n)=>{for(var i in n)c(r,i,{get:n[i],enumerable:!0})},a=(r,n,i,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of u(n))!v.call(r,t)&&t!==i&&c(r,t,{get:()=>n[t],enumerable:!(l=s(n,t))||l.enumerable});return r};var f=(r,n,i)=>(i=r!=null?p(m(r)):{},a(n||!r||!r.__esModule?c(i,\"default\",{value:r,enumerable:!0}):i,r)),b=r=>a(c({},\"__esModule\",{value:!0}),r);var d=M((V,h)=>{h.exports=_jsx_runtime});var y={};g(y,{default:()=>I,frontmatter:()=>j});var e=f(d()),j={title:\"\\u4EC0\\u4E48\\u662F\\u6A21\\u5757\\u6A21\\u5F0F\\uFF1F\\u5B83\\u5982\\u4F55\\u5E2E\\u52A9\\u5C01\\u88C5\\uFF1F\"};function o(r){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",h4:\"h4\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684\\u6A21\\u5757\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u7528\\u4E8E\\u521B\\u5EFA\\u81EA\\u5305\\u542B\\u7684\\u4EE3\\u7801\\u6A21\\u5757\\u3002\\u5B83\\u901A\\u8FC7\\u5141\\u8BB8\\u60A8\\u5728\\u6A21\\u5757\\u5185\\u5B9A\\u4E49\\u79C1\\u6709\\u548C\\u516C\\u5171\\u6210\\u5458\\u6765\\u5E2E\\u52A9\\u5C01\\u88C5\\u3002\\u79C1\\u6709\\u6210\\u5458\\u65E0\\u6CD5\\u4ECE\\u6A21\\u5757\\u5916\\u90E8\\u8BBF\\u95EE\\uFF0C\\u800C\\u516C\\u5171\\u6210\\u5458\\u901A\\u8FC7\\u8FD4\\u56DE\\u7684\\u5BF9\\u8C61\\u516C\\u5F00\\u3002\\u8FD9\\u79CD\\u6A21\\u5F0F\\u6709\\u52A9\\u4E8E\\u7EC4\\u7EC7\\u4EE3\\u7801\\u3001\\u907F\\u514D\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u6C61\\u67D3\\u4EE5\\u53CA\\u4FDD\\u6301\\u5173\\u6CE8\\u70B9\\u7684\\u6E05\\u6670\\u5206\\u79BB\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`var myModule = (function () {\n  var privateVar = 'I am private';\n\n  function privateMethod() {\n    console.log(privateVar);\n  }\n\n  return {\n    publicMethod: function () {\n      privateMethod();\n    },\n  };\n})();\n\nmyModule.publicMethod(); // Logs: I am private\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u6A21\\u5757\\u6A21\\u5F0F\\uFF1F\\u5B83\\u5982\\u4F55\\u5E2E\\u52A9\\u5C01\\u88C5\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6A21\\u5757\\u6A21\\u5F0F\\u7B80\\u4ECB\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u5728 JavaScript \\u4E2D\\u7528\\u4E8E\\u521B\\u5EFA\\u81EA\\u5305\\u542B\\u4EE3\\u7801\\u6A21\\u5757\\u7684\\u8BBE\\u8BA1\\u6A21\\u5F0F\\u3002\\u5B83\\u5229\\u7528\\u95ED\\u5305\\u6765\\u521B\\u5EFA\\u79C1\\u6709\\u548C\\u516C\\u5171\\u6210\\u5458\\uFF0C\\u4ECE\\u800C\\u66F4\\u597D\\u5730\\u7EC4\\u7EC7\\u548C\\u5C01\\u88C5\\u4EE3\\u7801\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6A21\\u5757\\u6A21\\u5F0F\\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u6A21\\u5F0F\\u901A\\u5E38\\u6D89\\u53CA\\u4E00\\u4E2A\\u7ACB\\u5373\\u8C03\\u7528\\u7684\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F (IIFE)\\uFF0C\\u8BE5\\u8868\\u8FBE\\u5F0F\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5BF9\\u8C61\\u3002\\u6B64\\u5BF9\\u8C61\\u5305\\u542B\\u4F5C\\u4E3A\\u6A21\\u5757\\u516C\\u5171 API \\u516C\\u5F00\\u7684\\u65B9\\u6CD5\\u548C\\u5C5E\\u6027\\u3002\\u5728 IIFE \\u5185\\u90E8\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5B9A\\u4E49\\u65E0\\u6CD5\\u4ECE\\u6A21\\u5757\\u5916\\u90E8\\u8BBF\\u95EE\\u7684\\u79C1\\u6709\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6A21\\u5757\\u6A21\\u5F0F\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u6A21\\u5757\\u6A21\\u5F0F\\u7684\\u7B80\\u5355\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`var myModule = (function () {\n  // Private members\n  var privateVar = 'I am private';\n\n  function privateMethod() {\n    console.log(privateVar);\n  }\n\n  // Public members\n  return {\n    publicMethod: function () {\n      privateMethod();\n    },\n  };\n})();\n\nmyModule.publicMethod(); // Logs: I am private\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"privateVar\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"privateMethod\"}),\" \\u662F\\u79C1\\u6709\\u6210\\u5458\\uFF0C\\u4E0D\\u80FD\\u76F4\\u63A5\\u4ECE\\u6A21\\u5757\\u5916\\u90E8\\u8BBF\\u95EE\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"publicMethod\"}),\" \\u662F\\u4E00\\u4E2A\\u516C\\u5171\\u6210\\u5458\\uFF0C\\u53EF\\u4EE5\\u4ECE\\u6A21\\u5757\\u5916\\u90E8\\u8BBF\\u95EE\\u3002\\u5B83\\u53EF\\u4EE5\\u4E0E\\u79C1\\u6709\\u6210\\u5458\\u4EA4\\u4E92\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528\\u6A21\\u5757\\u6A21\\u5F0F\\u7684\\u597D\\u5904\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5C01\\u88C5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u6A21\\u5F0F\\u901A\\u8FC7\\u9690\\u85CF\\u5185\\u90E8\\u5B9E\\u73B0\\u7EC6\\u8282\\u5E76\\u4EC5\\u516C\\u5F00\\u5FC5\\u8981\\u7684\\u90E8\\u5206\\u6765\\u5E2E\\u52A9\\u5C01\\u88C5\\u4EE3\\u7801\\u3002\\u8FD9\\u4F7F\\u5F97\\u4EE3\\u7801\\u66F4\\u6A21\\u5757\\u5316\\uFF0C\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u907F\\u514D\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u6C61\\u67D3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u901A\\u8FC7\\u4F7F\\u7528\\u6A21\\u5757\\u6A21\\u5F0F\\uFF0C\\u60A8\\u53EF\\u4EE5\\u907F\\u514D\\u4F7F\\u7528\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u6C61\\u67D3\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u3002\\u8FD9\\u964D\\u4F4E\\u4E86\\u547D\\u540D\\u51B2\\u7A81\\u7684\\u98CE\\u9669\\uFF0C\\u5E76\\u4F7F\\u4EE3\\u7801\\u66F4\\u5065\\u58EE\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5173\\u6CE8\\u70B9\\u5206\\u79BB\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u6A21\\u5F0F\\u901A\\u8FC7\\u5141\\u8BB8\\u60A8\\u5C06\\u76F8\\u5173\\u529F\\u80FD\\u7EC4\\u5408\\u5728\\u4E00\\u8D77\\uFF0C\\u4ECE\\u800C\\u4FC3\\u8FDB\\u4E86\\u5173\\u6CE8\\u70B9\\u7684\\u6E05\\u6670\\u5206\\u79BB\\u3002\\u8FD9\\u4F7F\\u5F97\\u4EE3\\u7801\\u66F4\\u6709\\u6761\\u7406\\uFF0C\\u66F4\\u5BB9\\u6613\\u7406\\u89E3\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7ED3\\u8BBA\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u6A21\\u5F0F\\u662F JavaScript \\u4E2D\\u7528\\u4E8E\\u521B\\u5EFA\\u81EA\\u5305\\u542B\\u4EE3\\u7801\\u6A21\\u5757\\u7684\\u5F3A\\u5927\\u5DE5\\u5177\\u3002\\u5B83\\u901A\\u8FC7\\u5141\\u8BB8\\u60A8\\u5B9A\\u4E49\\u79C1\\u6709\\u548C\\u516C\\u5171\\u6210\\u5458\\u6765\\u5E2E\\u52A9\\u5C01\\u88C5\\uFF0C\\u4F7F\\u4EE3\\u7801\\u66F4\\u5177\\u6A21\\u5757\\u5316\\u3001\\u53EF\\u7EF4\\u62A4\\u6027\\u548C\\u7EC4\\u7EC7\\u6027\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript\",children:\"Addy Osmani \\u7684 JavaScript \\u8BBE\\u8BA1\\u6A21\\u5F0F\\u5B66\\u4E60\"})}),`\n`]})]})}function x(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(o,r)})):o(r)}var I=x;return b(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var f=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),g=(r,n)=>{for(var i in n)c(r,i,{get:n[i],enumerable:!0})},h=(r,n,i,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of m(n))!M.call(r,t)&&t!==i&&c(r,t,{get:()=>n[t],enumerable:!(l=u(n,t))||l.enumerable});return r};var b=(r,n,i)=>(i=r!=null?s(v(r)):{},h(n||!r||!r.__esModule?c(i,\"default\",{value:r,enumerable:!0}):i,r)),j=r=>h(c({},\"__esModule\",{value:!0}),r);var d=f((_,a)=>{a.exports=_jsx_runtime});var I={};g(I,{default:()=>p,frontmatter:()=>x});var e=b(d()),x={title:\"\\u4EC0\\u4E48\\u662F\\u6A21\\u5757\\u6A21\\u5F0F\\uFF1F\\u5B83\\u5982\\u4F55\\u5E2E\\u52A9\\u5C01\\u88C5\\uFF1F\"};function o(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"JavaScript \\u4E2D\\u7684\\u6A21\\u5757\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u8BBE\\u8BA1\\u6A21\\u5F0F\\uFF0C\\u7528\\u4E8E\\u521B\\u5EFA\\u81EA\\u5305\\u542B\\u7684\\u4EE3\\u7801\\u6A21\\u5757\\u3002\\u5B83\\u901A\\u8FC7\\u5141\\u8BB8\\u60A8\\u5728\\u6A21\\u5757\\u5185\\u5B9A\\u4E49\\u79C1\\u6709\\u548C\\u516C\\u5171\\u6210\\u5458\\u6765\\u5E2E\\u52A9\\u5C01\\u88C5\\u3002\\u79C1\\u6709\\u6210\\u5458\\u65E0\\u6CD5\\u4ECE\\u6A21\\u5757\\u5916\\u90E8\\u8BBF\\u95EE\\uFF0C\\u800C\\u516C\\u5171\\u6210\\u5458\\u901A\\u8FC7\\u8FD4\\u56DE\\u7684\\u5BF9\\u8C61\\u516C\\u5F00\\u3002\\u8FD9\\u79CD\\u6A21\\u5F0F\\u6709\\u52A9\\u4E8E\\u7EC4\\u7EC7\\u4EE3\\u7801\\u3001\\u907F\\u514D\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u6C61\\u67D3\\u4EE5\\u53CA\\u4FDD\\u6301\\u5173\\u6CE8\\u70B9\\u7684\\u6E05\\u6670\\u5206\\u79BB\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`var myModule = (function () {\n  var privateVar = 'I am private';\n\n  function privateMethod() {\n    console.log(privateVar);\n  }\n\n  return {\n    publicMethod: function () {\n      privateMethod();\n    },\n  };\n})();\n\nmyModule.publicMethod(); // Logs: I am private\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u6A21\\u5757\\u6A21\\u5F0F\\uFF1F\\u5B83\\u5982\\u4F55\\u5E2E\\u52A9\\u5C01\\u88C5\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6A21\\u5757\\u6A21\\u5F0F\\u7B80\\u4ECB\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u5728 JavaScript \\u4E2D\\u7528\\u4E8E\\u521B\\u5EFA\\u81EA\\u5305\\u542B\\u4EE3\\u7801\\u6A21\\u5757\\u7684\\u8BBE\\u8BA1\\u6A21\\u5F0F\\u3002\\u5B83\\u5229\\u7528\\u95ED\\u5305\\u6765\\u521B\\u5EFA\\u79C1\\u6709\\u548C\\u516C\\u5171\\u6210\\u5458\\uFF0C\\u4ECE\\u800C\\u66F4\\u597D\\u5730\\u7EC4\\u7EC7\\u548C\\u5C01\\u88C5\\u4EE3\\u7801\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6A21\\u5757\\u6A21\\u5F0F\\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u6A21\\u5F0F\\u901A\\u5E38\\u6D89\\u53CA\\u4E00\\u4E2A\\u7ACB\\u5373\\u8C03\\u7528\\u7684\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F (IIFE)\\uFF0C\\u8BE5\\u8868\\u8FBE\\u5F0F\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5BF9\\u8C61\\u3002\\u6B64\\u5BF9\\u8C61\\u5305\\u542B\\u4F5C\\u4E3A\\u6A21\\u5757\\u516C\\u5171 API \\u516C\\u5F00\\u7684\\u65B9\\u6CD5\\u548C\\u5C5E\\u6027\\u3002\\u5728 IIFE \\u5185\\u90E8\\uFF0C\\u60A8\\u53EF\\u4EE5\\u5B9A\\u4E49\\u65E0\\u6CD5\\u4ECE\\u6A21\\u5757\\u5916\\u90E8\\u8BBF\\u95EE\\u7684\\u79C1\\u6709\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6A21\\u5757\\u6A21\\u5F0F\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u6A21\\u5757\\u6A21\\u5F0F\\u7684\\u7B80\\u5355\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`var myModule = (function () {\n  // Private members\n  var privateVar = 'I am private';\n\n  function privateMethod() {\n    console.log(privateVar);\n  }\n\n  // Public members\n  return {\n    publicMethod: function () {\n      privateMethod();\n    },\n  };\n})();\n\nmyModule.publicMethod(); // Logs: I am private\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"privateVar\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"privateMethod\"}),\" \\u662F\\u79C1\\u6709\\u6210\\u5458\\uFF0C\\u4E0D\\u80FD\\u76F4\\u63A5\\u4ECE\\u6A21\\u5757\\u5916\\u90E8\\u8BBF\\u95EE\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"publicMethod\"}),\" \\u662F\\u4E00\\u4E2A\\u516C\\u5171\\u6210\\u5458\\uFF0C\\u53EF\\u4EE5\\u4ECE\\u6A21\\u5757\\u5916\\u90E8\\u8BBF\\u95EE\\u3002\\u5B83\\u53EF\\u4EE5\\u4E0E\\u79C1\\u6709\\u6210\\u5458\\u4EA4\\u4E92\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528\\u6A21\\u5757\\u6A21\\u5F0F\\u7684\\u597D\\u5904\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5C01\\u88C5\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u6A21\\u5F0F\\u901A\\u8FC7\\u9690\\u85CF\\u5185\\u90E8\\u5B9E\\u73B0\\u7EC6\\u8282\\u5E76\\u4EC5\\u516C\\u5F00\\u5FC5\\u8981\\u7684\\u90E8\\u5206\\u6765\\u5E2E\\u52A9\\u5C01\\u88C5\\u4EE3\\u7801\\u3002\\u8FD9\\u4F7F\\u5F97\\u4EE3\\u7801\\u66F4\\u6A21\\u5757\\u5316\\uFF0C\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u907F\\u514D\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u6C61\\u67D3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u901A\\u8FC7\\u4F7F\\u7528\\u6A21\\u5757\\u6A21\\u5F0F\\uFF0C\\u60A8\\u53EF\\u4EE5\\u907F\\u514D\\u4F7F\\u7528\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u6C61\\u67D3\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u3002\\u8FD9\\u964D\\u4F4E\\u4E86\\u547D\\u540D\\u51B2\\u7A81\\u7684\\u98CE\\u9669\\uFF0C\\u5E76\\u4F7F\\u4EE3\\u7801\\u66F4\\u5065\\u58EE\\u3002\"}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u5173\\u6CE8\\u70B9\\u5206\\u79BB\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u6A21\\u5F0F\\u901A\\u8FC7\\u5141\\u8BB8\\u60A8\\u5C06\\u76F8\\u5173\\u529F\\u80FD\\u7EC4\\u5408\\u5728\\u4E00\\u8D77\\uFF0C\\u4ECE\\u800C\\u4FC3\\u8FDB\\u4E86\\u5173\\u6CE8\\u70B9\\u7684\\u6E05\\u6670\\u5206\\u79BB\\u3002\\u8FD9\\u4F7F\\u5F97\\u4EE3\\u7801\\u66F4\\u6709\\u6761\\u7406\\uFF0C\\u66F4\\u5BB9\\u6613\\u7406\\u89E3\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7ED3\\u8BBA\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6A21\\u5757\\u6A21\\u5F0F\\u662F JavaScript \\u4E2D\\u7528\\u4E8E\\u521B\\u5EFA\\u81EA\\u5305\\u542B\\u4EE3\\u7801\\u6A21\\u5757\\u7684\\u5F3A\\u5927\\u5DE5\\u5177\\u3002\\u5B83\\u901A\\u8FC7\\u5141\\u8BB8\\u60A8\\u5B9A\\u4E49\\u79C1\\u6709\\u548C\\u516C\\u5171\\u6210\\u5458\\u6765\\u5E2E\\u52A9\\u5C01\\u88C5\\uFF0C\\u4F7F\\u4EE3\\u7801\\u66F4\\u5177\\u6A21\\u5757\\u5316\\u3001\\u53EF\\u7EF4\\u62A4\\u6027\\u548C\\u7EC4\\u7EC7\\u6027\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript\",children:\"Addy Osmani \\u7684 JavaScript \\u8BBE\\u8BA1\\u6A21\\u5F0F\\u5B66\\u4E60\"})}),`\n`]})]})}function p(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(o,{...r})}):o(r)}return j(I);})();\n;return Component;"
 }
\ No newline at end of file
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 315c14f8b..0f16692c0 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var u=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),g=(o,e)=>{for(var t in e)r(o,t,{get:e[t],enumerable:!0})},l=(o,e,t,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of y(e))!f.call(o,i)&&i!==t&&r(o,i,{get:()=>e[i],enumerable:!(c=p(e,i))||c.enumerable});return o};var j=(o,e,t)=>(t=o!=null?s(m(o)):{},l(e||!o||!o.__esModule?r(t,\"default\",{value:o,enumerable:!0}):t,o)),b=o=>l(r({},\"__esModule\",{value:!0}),o);var a=u((_,h)=>{h.exports=_jsx_runtime});var S={};g(S,{default:()=>P,frontmatter:()=>w});var n=j(a()),w={title:\"What is the prototype chain and how does it work?\"};function d(o){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",ul:\"ul\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The prototype chain is a mechanism in JavaScript that allows objects to inherit properties and methods from other objects. When you try to access a property on an object, JavaScript will first look for the property on the object itself. If it doesn't find it, it will look at the object's prototype, and then the prototype's prototype, and so on, until it either finds the property or reaches the end of the chain, which is \",(0,n.jsx)(e.code,{children:\"null\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nPerson.prototype.greet = function () {\n  console.log(\\`Hello, my name is \\${this.name}\\`);\n};\n\nconst alice = new Person('Alice');\nalice.greet(); // \"Hello, my name is Alice\"\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"alice\"}),\" inherits the \",(0,n.jsx)(e.code,{children:\"greet\"}),\" method from \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\".\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is the prototype chain and how does it work?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Understanding prototypes\"}),`\n`,(0,n.jsx)(e.p,{children:\"In JavaScript, every object has a prototype. A prototype is also an object, and it can have its own prototype, forming a chain. This chain is known as the prototype chain.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How the prototype chain works\"}),`\n`,(0,n.jsx)(e.p,{children:\"When you try to access a property or method on an object, JavaScript will:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Look for the property or method on the object itself.\"}),`\n`,(0,n.jsx)(e.li,{children:\"If it doesn't find it, it will look at the object's prototype.\"}),`\n`,(0,n.jsx)(e.li,{children:\"If it still doesn't find it, it will look at the prototype's prototype.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"This process continues until it either finds the property or method or reaches the end of the chain, which is \",(0,n.jsx)(e.code,{children:\"null\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nPerson.prototype.greet = function () {\n  console.log(\\`Hello, my name is \\${this.name}\\`);\n};\n\nconst alice = new Person('Alice');\nalice.greet(); // \"Hello, my name is Alice\"\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"In this example:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"alice\"}),\" is an instance of \",(0,n.jsx)(e.code,{children:\"Person\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"alice\"}),\" does not have a \",(0,n.jsx)(e.code,{children:\"greet\"}),\" method directly on it.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"JavaScript looks at \",(0,n.jsx)(e.code,{children:\"alice\"}),\"'s prototype, which is \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\" has a \",(0,n.jsx)(e.code,{children:\"greet\"}),\" method, so JavaScript calls it.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Prototype chain in built-in objects\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript's built-in objects also use the prototype chain. For example, arrays inherit from \",(0,n.jsx)(e.code,{children:\"Array.prototype\"}),\", which in turn inherits from \",(0,n.jsx)(e.code,{children:\"Object.prototype\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr = [1, 2, 3];\nconsole.log(arr.toString()); // \"1,2,3\"\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"In this example:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"arr\"}),\" is an instance of \",(0,n.jsx)(e.code,{children:\"Array\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"arr\"}),\" does not have a \",(0,n.jsx)(e.code,{children:\"toString\"}),\" method directly on it.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"JavaScript looks at \",(0,n.jsx)(e.code,{children:\"arr\"}),\"'s prototype, which is \",(0,n.jsx)(e.code,{children:\"Array.prototype\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Array.prototype\"}),\" has a \",(0,n.jsx)(e.code,{children:\"toString\"}),\" method, so JavaScript calls it.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Modifying prototypes\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can add properties and methods to an object's prototype, and all instances of that object will have access to those properties and methods.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst alice = new Person('Alice');\n\nPerson.prototype.sayGoodbye = function () {\n  console.log(\\`Goodbye from \\${this.name}\\`);\n};\n\nalice.sayGoodbye(); // \"Goodbye from Alice\"\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, we added a \",(0,n.jsx)(e.code,{children:\"sayGoodbye\"}),\" method to \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\", and now \",(0,n.jsx)(e.code,{children:\"alice\"}),\" can use it.\"]}),`\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/Web/JavaScript/Inheritance_and_the_prototype_chain\",children:\"MDN Web Docs: Inheritance and the prototype chain\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/prototype-inheritance\",children:\"JavaScript.info: Prototypes\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://eloquentjavascript.net/06_object.html#h_jl8p9u9e2d\",children:\"Eloquent JavaScript: Prototypes\"})}),`\n`]})]})}function v(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(d,o)})):d(o)}var P=v;return b(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),j=(o,e)=>{for(var t in e)r(o,t,{get:e[t],enumerable:!0})},l=(o,e,t,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!u.call(o,i)&&i!==t&&r(o,i,{get:()=>e[i],enumerable:!(c=y(e,i))||c.enumerable});return o};var w=(o,e,t)=>(t=o!=null?p(f(o)):{},l(e||!o||!o.__esModule?r(t,\"default\",{value:o,enumerable:!0}):t,o)),b=o=>l(r({},\"__esModule\",{value:!0}),o);var a=g((x,h)=>{h.exports=_jsx_runtime});var P={};j(P,{default:()=>s,frontmatter:()=>v});var n=w(a()),v={title:\"What is the prototype chain and how does it work?\"};function d(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The prototype chain is a mechanism in JavaScript that allows objects to inherit properties and methods from other objects. When you try to access a property on an object, JavaScript will first look for the property on the object itself. If it doesn't find it, it will look at the object's prototype, and then the prototype's prototype, and so on, until it either finds the property or reaches the end of the chain, which is \",(0,n.jsx)(e.code,{children:\"null\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nPerson.prototype.greet = function () {\n  console.log(\\`Hello, my name is \\${this.name}\\`);\n};\n\nconst alice = new Person('Alice');\nalice.greet(); // \"Hello, my name is Alice\"\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"alice\"}),\" inherits the \",(0,n.jsx)(e.code,{children:\"greet\"}),\" method from \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\".\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is the prototype chain and how does it work?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Understanding prototypes\"}),`\n`,(0,n.jsx)(e.p,{children:\"In JavaScript, every object has a prototype. A prototype is also an object, and it can have its own prototype, forming a chain. This chain is known as the prototype chain.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How the prototype chain works\"}),`\n`,(0,n.jsx)(e.p,{children:\"When you try to access a property or method on an object, JavaScript will:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Look for the property or method on the object itself.\"}),`\n`,(0,n.jsx)(e.li,{children:\"If it doesn't find it, it will look at the object's prototype.\"}),`\n`,(0,n.jsx)(e.li,{children:\"If it still doesn't find it, it will look at the prototype's prototype.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"This process continues until it either finds the property or method or reaches the end of the chain, which is \",(0,n.jsx)(e.code,{children:\"null\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nPerson.prototype.greet = function () {\n  console.log(\\`Hello, my name is \\${this.name}\\`);\n};\n\nconst alice = new Person('Alice');\nalice.greet(); // \"Hello, my name is Alice\"\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"In this example:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"alice\"}),\" is an instance of \",(0,n.jsx)(e.code,{children:\"Person\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"alice\"}),\" does not have a \",(0,n.jsx)(e.code,{children:\"greet\"}),\" method directly on it.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"JavaScript looks at \",(0,n.jsx)(e.code,{children:\"alice\"}),\"'s prototype, which is \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\" has a \",(0,n.jsx)(e.code,{children:\"greet\"}),\" method, so JavaScript calls it.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Prototype chain in built-in objects\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript's built-in objects also use the prototype chain. For example, arrays inherit from \",(0,n.jsx)(e.code,{children:\"Array.prototype\"}),\", which in turn inherits from \",(0,n.jsx)(e.code,{children:\"Object.prototype\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr = [1, 2, 3];\nconsole.log(arr.toString()); // \"1,2,3\"\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"In this example:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"arr\"}),\" is an instance of \",(0,n.jsx)(e.code,{children:\"Array\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"arr\"}),\" does not have a \",(0,n.jsx)(e.code,{children:\"toString\"}),\" method directly on it.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"JavaScript looks at \",(0,n.jsx)(e.code,{children:\"arr\"}),\"'s prototype, which is \",(0,n.jsx)(e.code,{children:\"Array.prototype\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Array.prototype\"}),\" has a \",(0,n.jsx)(e.code,{children:\"toString\"}),\" method, so JavaScript calls it.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Modifying prototypes\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can add properties and methods to an object's prototype, and all instances of that object will have access to those properties and methods.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst alice = new Person('Alice');\n\nPerson.prototype.sayGoodbye = function () {\n  console.log(\\`Goodbye from \\${this.name}\\`);\n};\n\nalice.sayGoodbye(); // \"Goodbye from Alice\"\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, we added a \",(0,n.jsx)(e.code,{children:\"sayGoodbye\"}),\" method to \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\", and now \",(0,n.jsx)(e.code,{children:\"alice\"}),\" can use it.\"]}),`\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/Web/JavaScript/Inheritance_and_the_prototype_chain\",children:\"MDN Web Docs: Inheritance and the prototype chain\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/prototype-inheritance\",children:\"JavaScript.info: Prototypes\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://eloquentjavascript.net/06_object.html#h_jl8p9u9e2d\",children:\"Eloquent JavaScript: Prototypes\"})}),`\n`]})]})}function s(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(d,{...o})}):d(o)}return b(P);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-prototype-chain-and-how-does-it-work/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-prototype-chain-and-how-does-it-work/zh-CN.json
index 855469763..7f228b6e3 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-prototype-chain-and-how-does-it-work/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-prototype-chain-and-how-does-it-work/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-prototype-chain-and-how-does-it-work/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),v=(r,e)=>{for(var c in e)l(r,c,{get:e[c],enumerable:!0})},t=(r,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!u.call(r,i)&&i!==c&&l(r,i,{get:()=>e[i],enumerable:!(o=p(e,i))||o.enumerable});return r};var f=(r,e,c)=>(c=r!=null?s(y(r)):{},t(e||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),j=r=>t(l({},\"__esModule\",{value:!0}),r);var h=g((A,d)=>{d.exports=_jsx_runtime});var J={};v(J,{default:()=>_,frontmatter:()=>P});var n=f(h()),P={title:\"\\u4EC0\\u4E48\\u662F\\u539F\\u578B\\u94FE\\u4EE5\\u53CA\\u5B83\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"};function a(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",ul:\"ul\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u539F\\u578B\\u94FE\\u662F JavaScript \\u4E2D\\u5141\\u8BB8\\u5BF9\\u8C61\\u4ECE\\u5176\\u4ED6\\u5BF9\\u8C61\\u7EE7\\u627F\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u7684\\u4E00\\u79CD\\u673A\\u5236\\u3002\\u5F53\\u60A8\\u5C1D\\u8BD5\\u8BBF\\u95EE\\u5BF9\\u8C61\\u4E0A\\u7684\\u5C5E\\u6027\\u65F6\\uFF0CJavaScript \\u5C06\\u9996\\u5148\\u5728\\u5BF9\\u8C61\\u672C\\u8EAB\\u4E0A\\u67E5\\u627E\\u8BE5\\u5C5E\\u6027\\u3002\\u5982\\u679C\\u627E\\u4E0D\\u5230\\uFF0C\\u5B83\\u5C06\\u67E5\\u770B\\u5BF9\\u8C61\\u7684\\u539F\\u578B\\uFF0C\\u7136\\u540E\\u662F\\u539F\\u578B\\u7684\\u539F\\u578B\\uFF0C\\u4F9D\\u6B64\\u7C7B\\u63A8\\uFF0C\\u76F4\\u5230\\u627E\\u5230\\u8BE5\\u5C5E\\u6027\\u6216\\u5230\\u8FBE\\u94FE\\u7684\\u672B\\u5C3E\\uFF0C\\u5373 \",(0,n.jsx)(e.code,{children:\"null\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nPerson.prototype.greet = function () {\n  console.log(\\`Hello, my name is \\${this.name}\\`);\n};\n\nconst alice = new Person('Alice');\nalice.greet(); // \"Hello, my name is Alice\"\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"alice\"}),\" \\u4ECE \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\" \\u7EE7\\u627F\\u4E86 \",(0,n.jsx)(e.code,{children:\"greet\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u539F\\u578B\\u94FE\\u4EE5\\u53CA\\u5B83\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7406\\u89E3\\u539F\\u578B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u6BCF\\u4E2A\\u5BF9\\u8C61\\u90FD\\u6709\\u4E00\\u4E2A\\u539F\\u578B\\u3002\\u539F\\u578B\\u4E5F\\u662F\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u5B83\\u53EF\\u4EE5\\u6709\\u81EA\\u5DF1\\u7684\\u539F\\u578B\\uFF0C\\u4ECE\\u800C\\u5F62\\u6210\\u4E00\\u4E2A\\u94FE\\u3002\\u8FD9\\u4E2A\\u94FE\\u88AB\\u79F0\\u4E3A\\u539F\\u578B\\u94FE\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u539F\\u578B\\u94FE\\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5F53\\u60A8\\u5C1D\\u8BD5\\u8BBF\\u95EE\\u5BF9\\u8C61\\u4E0A\\u7684\\u5C5E\\u6027\\u6216\\u65B9\\u6CD5\\u65F6\\uFF0CJavaScript \\u5C06\\u4F1A\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u5728\\u5BF9\\u8C61\\u672C\\u8EAB\\u4E0A\\u67E5\\u627E\\u5C5E\\u6027\\u6216\\u65B9\\u6CD5\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5982\\u679C\\u627E\\u4E0D\\u5230\\uFF0C\\u5B83\\u5C06\\u67E5\\u770B\\u5BF9\\u8C61\\u7684\\u539F\\u578B\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5982\\u679C\\u4ECD\\u7136\\u627E\\u4E0D\\u5230\\uFF0C\\u5B83\\u5C06\\u67E5\\u770B\\u539F\\u578B\\u7684\\u539F\\u578B\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u6B64\\u8FC7\\u7A0B\\u5C06\\u4E00\\u76F4\\u6301\\u7EED\\u5230\\u627E\\u5230\\u5C5E\\u6027\\u6216\\u65B9\\u6CD5\\uFF0C\\u6216\\u8005\\u5230\\u8FBE\\u94FE\\u7684\\u672B\\u5C3E\\uFF0C\\u5373 \",(0,n.jsx)(e.code,{children:\"null\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F8B\\u5B50\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nPerson.prototype.greet = function () {\n  console.log(\\`Hello, my name is \\${this.name}\\`);\n};\n\nconst alice = new Person('Alice');\nalice.greet(); // \"Hello, my name is Alice\"\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"alice\"}),\" \\u662F \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u7684\\u4E00\\u4E2A\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"alice\"}),\" \\u5E76\\u6CA1\\u6709\\u76F4\\u63A5\\u5728\\u5176\\u4E0A\\u62E5\\u6709 \",(0,n.jsx)(e.code,{children:\"greet\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"JavaScript \\u67E5\\u770B \",(0,n.jsx)(e.code,{children:\"alice\"}),\" \\u7684\\u539F\\u578B\\uFF0C\\u5373 \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\" \\u6709\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"greet\"}),\" \\u65B9\\u6CD5\\uFF0C\\u6240\\u4EE5 JavaScript \\u8C03\\u7528\\u5B83\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5185\\u7F6E\\u5BF9\\u8C61\\u4E2D\\u7684\\u539F\\u578B\\u94FE\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u7684\\u5185\\u7F6E\\u5BF9\\u8C61\\u4E5F\\u4F7F\\u7528\\u539F\\u578B\\u94FE\\u3002\\u4F8B\\u5982\\uFF0C\\u6570\\u7EC4\\u7EE7\\u627F\\u81EA \",(0,n.jsx)(e.code,{children:\"Array.prototype\"}),\"\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"Array.prototype\"}),\" \\u53C8\\u7EE7\\u627F\\u81EA \",(0,n.jsx)(e.code,{children:\"Object.prototype\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr = [1, 2, 3];\nconsole.log(arr.toString()); // \"1,2,3\"\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"arr\"}),\" \\u662F \",(0,n.jsx)(e.code,{children:\"Array\"}),\" \\u7684\\u4E00\\u4E2A\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"arr\"}),\" \\u5E76\\u6CA1\\u6709\\u76F4\\u63A5\\u5728\\u5176\\u4E0A\\u62E5\\u6709 \",(0,n.jsx)(e.code,{children:\"toString\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"JavaScript \\u67E5\\u770B \",(0,n.jsx)(e.code,{children:\"arr\"}),\" \\u7684\\u539F\\u578B\\uFF0C\\u5373 \",(0,n.jsx)(e.code,{children:\"Array.prototype\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Array.prototype\"}),\" \\u6709\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"toString\"}),\" \\u65B9\\u6CD5\\uFF0C\\u6240\\u4EE5 JavaScript \\u8C03\\u7528\\u5B83\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4FEE\\u6539\\u539F\\u578B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u5411\\u5BF9\\u8C61\\u7684\\u539F\\u578B\\u6DFB\\u52A0\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\uFF0C\\u8BE5\\u5BF9\\u8C61\\u7684\\u6240\\u6709\\u5B9E\\u4F8B\\u90FD\\u53EF\\u4EE5\\u8BBF\\u95EE\\u8FD9\\u4E9B\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst alice = new Person('Alice');\n\nPerson.prototype.sayGoodbye = function () {\n  console.log(\\`Goodbye from \\${this.name}\\`);\n};\n\nalice.sayGoodbye(); // \"Goodbye from Alice\"\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u6211\\u4EEC\\u5411 \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\" \\u6DFB\\u52A0\\u4E86\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"sayGoodbye\"}),\" \\u65B9\\u6CD5\\uFF0C\\u73B0\\u5728 \",(0,n.jsx)(e.code,{children:\"alice\"}),\" \\u53EF\\u4EE5\\u4F7F\\u7528\\u5B83\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Inheritance_and_the_prototype_chain\",children:\"MDN Web Docs: Inheritance and the prototype chain\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/prototype-inheritance\",children:\"JavaScript.info: Prototypes\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://eloquentjavascript.net/06_object.html#h_jl8p9u9e2d\",children:\"Eloquent JavaScript: Prototypes\"})}),`\n`]})]})}function S(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(a,r)})):a(r)}var _=S;return j(J);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var c in e)l(r,c,{get:e[c],enumerable:!0})},t=(r,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of y(e))!g.call(r,i)&&i!==c&&l(r,i,{get:()=>e[i],enumerable:!(o=m(e,i))||o.enumerable});return r};var P=(r,e,c)=>(c=r!=null?s(u(r)):{},t(e||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),S=r=>t(l({},\"__esModule\",{value:!0}),r);var h=v((A,d)=>{d.exports=_jsx_runtime});var _={};f(_,{default:()=>p,frontmatter:()=>j});var n=P(h()),j={title:\"\\u4EC0\\u4E48\\u662F\\u539F\\u578B\\u94FE\\u4EE5\\u53CA\\u5B83\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"};function a(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u539F\\u578B\\u94FE\\u662F JavaScript \\u4E2D\\u5141\\u8BB8\\u5BF9\\u8C61\\u4ECE\\u5176\\u4ED6\\u5BF9\\u8C61\\u7EE7\\u627F\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u7684\\u4E00\\u79CD\\u673A\\u5236\\u3002\\u5F53\\u60A8\\u5C1D\\u8BD5\\u8BBF\\u95EE\\u5BF9\\u8C61\\u4E0A\\u7684\\u5C5E\\u6027\\u65F6\\uFF0CJavaScript \\u5C06\\u9996\\u5148\\u5728\\u5BF9\\u8C61\\u672C\\u8EAB\\u4E0A\\u67E5\\u627E\\u8BE5\\u5C5E\\u6027\\u3002\\u5982\\u679C\\u627E\\u4E0D\\u5230\\uFF0C\\u5B83\\u5C06\\u67E5\\u770B\\u5BF9\\u8C61\\u7684\\u539F\\u578B\\uFF0C\\u7136\\u540E\\u662F\\u539F\\u578B\\u7684\\u539F\\u578B\\uFF0C\\u4F9D\\u6B64\\u7C7B\\u63A8\\uFF0C\\u76F4\\u5230\\u627E\\u5230\\u8BE5\\u5C5E\\u6027\\u6216\\u5230\\u8FBE\\u94FE\\u7684\\u672B\\u5C3E\\uFF0C\\u5373 \",(0,n.jsx)(e.code,{children:\"null\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nPerson.prototype.greet = function () {\n  console.log(\\`Hello, my name is \\${this.name}\\`);\n};\n\nconst alice = new Person('Alice');\nalice.greet(); // \"Hello, my name is Alice\"\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"alice\"}),\" \\u4ECE \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\" \\u7EE7\\u627F\\u4E86 \",(0,n.jsx)(e.code,{children:\"greet\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u539F\\u578B\\u94FE\\u4EE5\\u53CA\\u5B83\\u5982\\u4F55\\u5DE5\\u4F5C\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7406\\u89E3\\u539F\\u578B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u6BCF\\u4E2A\\u5BF9\\u8C61\\u90FD\\u6709\\u4E00\\u4E2A\\u539F\\u578B\\u3002\\u539F\\u578B\\u4E5F\\u662F\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u5B83\\u53EF\\u4EE5\\u6709\\u81EA\\u5DF1\\u7684\\u539F\\u578B\\uFF0C\\u4ECE\\u800C\\u5F62\\u6210\\u4E00\\u4E2A\\u94FE\\u3002\\u8FD9\\u4E2A\\u94FE\\u88AB\\u79F0\\u4E3A\\u539F\\u578B\\u94FE\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u539F\\u578B\\u94FE\\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5F53\\u60A8\\u5C1D\\u8BD5\\u8BBF\\u95EE\\u5BF9\\u8C61\\u4E0A\\u7684\\u5C5E\\u6027\\u6216\\u65B9\\u6CD5\\u65F6\\uFF0CJavaScript \\u5C06\\u4F1A\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u5728\\u5BF9\\u8C61\\u672C\\u8EAB\\u4E0A\\u67E5\\u627E\\u5C5E\\u6027\\u6216\\u65B9\\u6CD5\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5982\\u679C\\u627E\\u4E0D\\u5230\\uFF0C\\u5B83\\u5C06\\u67E5\\u770B\\u5BF9\\u8C61\\u7684\\u539F\\u578B\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5982\\u679C\\u4ECD\\u7136\\u627E\\u4E0D\\u5230\\uFF0C\\u5B83\\u5C06\\u67E5\\u770B\\u539F\\u578B\\u7684\\u539F\\u578B\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u6B64\\u8FC7\\u7A0B\\u5C06\\u4E00\\u76F4\\u6301\\u7EED\\u5230\\u627E\\u5230\\u5C5E\\u6027\\u6216\\u65B9\\u6CD5\\uFF0C\\u6216\\u8005\\u5230\\u8FBE\\u94FE\\u7684\\u672B\\u5C3E\\uFF0C\\u5373 \",(0,n.jsx)(e.code,{children:\"null\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F8B\\u5B50\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nPerson.prototype.greet = function () {\n  console.log(\\`Hello, my name is \\${this.name}\\`);\n};\n\nconst alice = new Person('Alice');\nalice.greet(); // \"Hello, my name is Alice\"\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"alice\"}),\" \\u662F \",(0,n.jsx)(e.code,{children:\"Person\"}),\" \\u7684\\u4E00\\u4E2A\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"alice\"}),\" \\u5E76\\u6CA1\\u6709\\u76F4\\u63A5\\u5728\\u5176\\u4E0A\\u62E5\\u6709 \",(0,n.jsx)(e.code,{children:\"greet\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"JavaScript \\u67E5\\u770B \",(0,n.jsx)(e.code,{children:\"alice\"}),\" \\u7684\\u539F\\u578B\\uFF0C\\u5373 \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\" \\u6709\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"greet\"}),\" \\u65B9\\u6CD5\\uFF0C\\u6240\\u4EE5 JavaScript \\u8C03\\u7528\\u5B83\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5185\\u7F6E\\u5BF9\\u8C61\\u4E2D\\u7684\\u539F\\u578B\\u94FE\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u7684\\u5185\\u7F6E\\u5BF9\\u8C61\\u4E5F\\u4F7F\\u7528\\u539F\\u578B\\u94FE\\u3002\\u4F8B\\u5982\\uFF0C\\u6570\\u7EC4\\u7EE7\\u627F\\u81EA \",(0,n.jsx)(e.code,{children:\"Array.prototype\"}),\"\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"Array.prototype\"}),\" \\u53C8\\u7EE7\\u627F\\u81EA \",(0,n.jsx)(e.code,{children:\"Object.prototype\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr = [1, 2, 3];\nconsole.log(arr.toString()); // \"1,2,3\"\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"arr\"}),\" \\u662F \",(0,n.jsx)(e.code,{children:\"Array\"}),\" \\u7684\\u4E00\\u4E2A\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"arr\"}),\" \\u5E76\\u6CA1\\u6709\\u76F4\\u63A5\\u5728\\u5176\\u4E0A\\u62E5\\u6709 \",(0,n.jsx)(e.code,{children:\"toString\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"JavaScript \\u67E5\\u770B \",(0,n.jsx)(e.code,{children:\"arr\"}),\" \\u7684\\u539F\\u578B\\uFF0C\\u5373 \",(0,n.jsx)(e.code,{children:\"Array.prototype\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Array.prototype\"}),\" \\u6709\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"toString\"}),\" \\u65B9\\u6CD5\\uFF0C\\u6240\\u4EE5 JavaScript \\u8C03\\u7528\\u5B83\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4FEE\\u6539\\u539F\\u578B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u5411\\u5BF9\\u8C61\\u7684\\u539F\\u578B\\u6DFB\\u52A0\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\uFF0C\\u8BE5\\u5BF9\\u8C61\\u7684\\u6240\\u6709\\u5B9E\\u4F8B\\u90FD\\u53EF\\u4EE5\\u8BBF\\u95EE\\u8FD9\\u4E9B\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst alice = new Person('Alice');\n\nPerson.prototype.sayGoodbye = function () {\n  console.log(\\`Goodbye from \\${this.name}\\`);\n};\n\nalice.sayGoodbye(); // \"Goodbye from Alice\"\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u6211\\u4EEC\\u5411 \",(0,n.jsx)(e.code,{children:\"Person.prototype\"}),\" \\u6DFB\\u52A0\\u4E86\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"sayGoodbye\"}),\" \\u65B9\\u6CD5\\uFF0C\\u73B0\\u5728 \",(0,n.jsx)(e.code,{children:\"alice\"}),\" \\u53EF\\u4EE5\\u4F7F\\u7528\\u5B83\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Inheritance_and_the_prototype_chain\",children:\"MDN Web Docs: Inheritance and the prototype chain\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/prototype-inheritance\",children:\"JavaScript.info: Prototypes\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://eloquentjavascript.net/06_object.html#h_jl8p9u9e2d\",children:\"Eloquent JavaScript: Prototypes\"})}),`\n`]})]})}function p(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(a,{...r})}):a(r)}return S(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used/en-US.json
index 124292089..8d48792dc 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var r in e)s(n,r,{get:e[r],enumerable:!0})},o=(n,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!f.call(n,a)&&a!==r&&s(n,a,{get:()=>e[a],enumerable:!(c=u(e,a))||c.enumerable});return n};var v=(n,e,r)=>(r=n!=null?l(m(n)):{},o(e||!n||!n.__esModule?s(r,\"default\",{value:n,enumerable:!0}):r,n)),S=n=>o(s({},\"__esModule\",{value:!0}),n);var h=g((C,i)=>{i.exports=_jsx_runtime});var w={};b(w,{default:()=>k,frontmatter:()=>x});var t=v(h()),x={title:\"What is the purpose of callback function argument format of `setState()` in React and when should it be used?\"};function d(n){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The callback function argument format of \",(0,t.jsx)(e.code,{children:\"setState()\"}),\" in React is used to ensure that state updates are based on the most recent state and props. This is particularly important when the new state depends on the previous state. Instead of passing an object directly to \",(0,t.jsx)(e.code,{children:\"setState()\"}),\", you pass a function that takes the previous state and props as arguments and returns the new state.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`this.setState((prevState, props) => ({\n  counter: prevState.counter + props.increment,\n}));\n`})}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsxs)(e.h2,{children:[\"Purpose of callback function argument format of \",(0,t.jsx)(e.code,{children:\"setState()\"}),\" in React\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Ensuring state updates are based on the most recent state\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"React's \",(0,t.jsx)(e.code,{children:\"setState()\"}),\" is asynchronous, meaning multiple calls to \",(0,t.jsx)(e.code,{children:\"setState()\"}),\" can be batched together for performance reasons. If you rely on the current state to compute the next state, using the callback function format ensures that you are working with the most up-to-date state.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The callback function format of \",(0,t.jsx)(e.code,{children:\"setState()\"}),\" takes a function as an argument. This function receives two parameters: \",(0,t.jsx)(e.code,{children:\"prevState\"}),\" and \",(0,t.jsx)(e.code,{children:\"props\"}),\". It returns an object representing the new state.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`this.setState((prevState, props) => {\n  return {\n    counter: prevState.counter + props.increment,\n  };\n});\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"When to use it\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"When the new state depends on the previous state\"}),\": If you need to update the state based on the current state, use the callback function format to avoid potential issues with asynchronous state updates.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"When multiple state updates are batched\"}),\": In scenarios where multiple \",(0,t.jsx)(e.code,{children:\"setState()\"}),\" calls might be batched together, using the callback function ensures that each update is based on the most recent state.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,t.jsx)(e.p,{children:\"Consider a counter component where the state update depends on the previous state:\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`class Counter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { counter: 0 };\n  }\n\n  incrementCounter = () => {\n    this.setState((prevState, props) => ({\n      counter: prevState.counter + 1,\n    }));\n  };\n\n  render() {\n    return (\n      <div>\n        <p>Counter: {this.state.counter}</p>\n        <button onClick={this.incrementCounter}>Increment</button>\n      </div>\n    );\n  }\n}\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"In this example, using the callback function format ensures that the \",(0,t.jsx)(e.code,{children:\"counter\"}),\" state is correctly incremented, even if multiple \",(0,t.jsx)(e.code,{children:\"incrementCounter\"}),\" calls are made in quick succession.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React Docs: State: A Component's Memory\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/reference/react/useState#setstate\",children:\"React Docs: setState()\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/learn/responding-to-events\",children:\"React Docs: Responding to Events\"})}),`\n`]})]})}function y(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(d,n)})):d(n)}var k=y;return S(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var r in e)s(n,r,{get:e[r],enumerable:!0})},o=(n,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!g.call(n,a)&&a!==r&&s(n,a,{get:()=>e[a],enumerable:!(c=p(e,a))||c.enumerable});return n};var S=(n,e,r)=>(r=n!=null?u(f(n)):{},o(e||!n||!n.__esModule?s(r,\"default\",{value:n,enumerable:!0}):r,n)),x=n=>o(s({},\"__esModule\",{value:!0}),n);var h=v((C,i)=>{i.exports=_jsx_runtime});var k={};b(k,{default:()=>l,frontmatter:()=>y});var t=S(h()),y={title:\"What is the purpose of callback function argument format of `setState()` in React and when should it be used?\"};function d(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The callback function argument format of \",(0,t.jsx)(e.code,{children:\"setState()\"}),\" in React is used to ensure that state updates are based on the most recent state and props. This is particularly important when the new state depends on the previous state. Instead of passing an object directly to \",(0,t.jsx)(e.code,{children:\"setState()\"}),\", you pass a function that takes the previous state and props as arguments and returns the new state.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`this.setState((prevState, props) => ({\n  counter: prevState.counter + props.increment,\n}));\n`})}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsxs)(e.h2,{children:[\"Purpose of callback function argument format of \",(0,t.jsx)(e.code,{children:\"setState()\"}),\" in React\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Ensuring state updates are based on the most recent state\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"React's \",(0,t.jsx)(e.code,{children:\"setState()\"}),\" is asynchronous, meaning multiple calls to \",(0,t.jsx)(e.code,{children:\"setState()\"}),\" can be batched together for performance reasons. If you rely on the current state to compute the next state, using the callback function format ensures that you are working with the most up-to-date state.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The callback function format of \",(0,t.jsx)(e.code,{children:\"setState()\"}),\" takes a function as an argument. This function receives two parameters: \",(0,t.jsx)(e.code,{children:\"prevState\"}),\" and \",(0,t.jsx)(e.code,{children:\"props\"}),\". It returns an object representing the new state.\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`this.setState((prevState, props) => {\n  return {\n    counter: prevState.counter + props.increment,\n  };\n});\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"When to use it\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"When the new state depends on the previous state\"}),\": If you need to update the state based on the current state, use the callback function format to avoid potential issues with asynchronous state updates.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"When multiple state updates are batched\"}),\": In scenarios where multiple \",(0,t.jsx)(e.code,{children:\"setState()\"}),\" calls might be batched together, using the callback function ensures that each update is based on the most recent state.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,t.jsx)(e.p,{children:\"Consider a counter component where the state update depends on the previous state:\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`class Counter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { counter: 0 };\n  }\n\n  incrementCounter = () => {\n    this.setState((prevState, props) => ({\n      counter: prevState.counter + 1,\n    }));\n  };\n\n  render() {\n    return (\n      <div>\n        <p>Counter: {this.state.counter}</p>\n        <button onClick={this.incrementCounter}>Increment</button>\n      </div>\n    );\n  }\n}\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"In this example, using the callback function format ensures that the \",(0,t.jsx)(e.code,{children:\"counter\"}),\" state is correctly incremented, even if multiple \",(0,t.jsx)(e.code,{children:\"incrementCounter\"}),\" calls are made in quick succession.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React Docs: State: A Component's Memory\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/reference/react/useState#setstate\",children:\"React Docs: setState()\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/learn/responding-to-events\",children:\"React Docs: Responding to Events\"})}),`\n`]})]})}function l(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(d,{...n})}):d(n)}return x(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used/zh-CN.json
index 6f29ffced..ebeb04181 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var v=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var r in e)s(t,r,{get:e[r],enumerable:!0})},a=(t,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of u(e))!S.call(t,c)&&c!==r&&s(t,c,{get:()=>e[c],enumerable:!(o=p(e,c))||o.enumerable});return t};var j=(t,e,r)=>(r=t!=null?l(m(t)):{},a(e||!t||!t.__esModule?s(r,\"default\",{value:t,enumerable:!0}):r,t)),x=t=>a(s({},\"__esModule\",{value:!0}),t);var d=v((b,i)=>{i.exports=_jsx_runtime});var _={};g(_,{default:()=>f,frontmatter:()=>C});var n=j(d()),C={title:\"React \\u4E2D `setState()` \\u7684\\u56DE\\u8C03\\u51FD\\u6570\\u53C2\\u6570\\u683C\\u5F0F\\u7684\\u76EE\\u7684\\u662F\\u4EC0\\u4E48\\uFF1F\\u5E94\\u8BE5\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\u5B83\\uFF1F\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",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:[\"React \\u4E2D \",(0,n.jsx)(e.code,{children:\"setState()\"}),\" \\u7684\\u56DE\\u8C03\\u51FD\\u6570\\u53C2\\u6570\\u683C\\u5F0F\\u7528\\u4E8E\\u786E\\u4FDD\\u72B6\\u6001\\u66F4\\u65B0\\u57FA\\u4E8E\\u6700\\u65B0\\u7684\\u72B6\\u6001\\u548C props\\u3002\\u5F53\\u65B0\\u72B6\\u6001\\u4F9D\\u8D56\\u4E8E\\u4E4B\\u524D\\u7684\\u72B6\\u6001\\u65F6\\uFF0C\\u8FD9\\u4E00\\u70B9\\u5C24\\u5176\\u91CD\\u8981\\u3002\\u60A8\\u65E0\\u9700\\u76F4\\u63A5\\u5C06\\u5BF9\\u8C61\\u4F20\\u9012\\u7ED9 \",(0,n.jsx)(e.code,{children:\"setState()\"}),\"\\uFF0C\\u800C\\u662F\\u4F20\\u9012\\u4E00\\u4E2A\\u51FD\\u6570\\uFF0C\\u8BE5\\u51FD\\u6570\\u5C06\\u4E4B\\u524D\\u7684\\u72B6\\u6001\\u548C props \\u4F5C\\u4E3A\\u53C2\\u6570\\uFF0C\\u5E76\\u8FD4\\u56DE\\u65B0\\u72B6\\u6001\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`this.setState((prevState, props) => ({\n  counter: prevState.counter + props.increment,\n}));\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"React \\u4E2D \",(0,n.jsx)(e.code,{children:\"setState()\"}),\" \\u7684\\u56DE\\u8C03\\u51FD\\u6570\\u53C2\\u6570\\u683C\\u5F0F\\u7684\\u76EE\\u7684\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u786E\\u4FDD\\u72B6\\u6001\\u66F4\\u65B0\\u57FA\\u4E8E\\u6700\\u65B0\\u7684\\u72B6\\u6001\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React \\u7684 \",(0,n.jsx)(e.code,{children:\"setState()\"}),\" \\u662F\\u5F02\\u6B65\\u7684\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u53EF\\u4EE5\\u51FA\\u4E8E\\u6027\\u80FD\\u539F\\u56E0\\u5C06\\u5BF9 \",(0,n.jsx)(e.code,{children:\"setState()\"}),\" \\u7684\\u591A\\u4E2A\\u8C03\\u7528\\u6279\\u5904\\u7406\\u5728\\u4E00\\u8D77\\u3002\\u5982\\u679C\\u4F9D\\u8D56\\u5F53\\u524D\\u72B6\\u6001\\u6765\\u8BA1\\u7B97\\u4E0B\\u4E00\\u4E2A\\u72B6\\u6001\\uFF0C\\u4F7F\\u7528\\u56DE\\u8C03\\u51FD\\u6570\\u683C\\u5F0F\\u53EF\\u786E\\u4FDD\\u60A8\\u4F7F\\u7528\\u6700\\u65B0\\u7684\\u72B6\\u6001\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"setState()\"}),\" \\u7684\\u56DE\\u8C03\\u51FD\\u6570\\u683C\\u5F0F\\u5C06\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A\\u53C2\\u6570\\u3002\\u6B64\\u51FD\\u6570\\u63A5\\u6536\\u4E24\\u4E2A\\u53C2\\u6570\\uFF1A\",(0,n.jsx)(e.code,{children:\"prevState\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"props\"}),\"\\u3002\\u5B83\\u8FD4\\u56DE\\u4E00\\u4E2A\\u8868\\u793A\\u65B0\\u72B6\\u6001\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`this.setState((prevState, props) => {\n  return {\n    counter: prevState.counter + props.increment,\n  };\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\u5B83\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5F53\\u65B0\\u72B6\\u6001\\u4F9D\\u8D56\\u4E8E\\u4E4B\\u524D\\u7684\\u72B6\\u6001\\u65F6\"}),\"\\uFF1A\\u5982\\u679C\\u9700\\u8981\\u6839\\u636E\\u5F53\\u524D\\u72B6\\u6001\\u66F4\\u65B0\\u72B6\\u6001\\uFF0C\\u8BF7\\u4F7F\\u7528\\u56DE\\u8C03\\u51FD\\u6570\\u683C\\u5F0F\\u4EE5\\u907F\\u514D\\u4E0E\\u5F02\\u6B65\\u72B6\\u6001\\u66F4\\u65B0\\u76F8\\u5173\\u7684\\u6F5C\\u5728\\u95EE\\u9898\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5F53\\u591A\\u4E2A\\u72B6\\u6001\\u66F4\\u65B0\\u88AB\\u6279\\u5904\\u7406\\u65F6\"}),\"\\uFF1A\\u5728\\u591A\\u4E2A \",(0,n.jsx)(e.code,{children:\"setState()\"}),\" \\u8C03\\u7528\\u53EF\\u80FD\\u88AB\\u6279\\u5904\\u7406\\u5728\\u4E00\\u8D77\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u4F7F\\u7528\\u56DE\\u8C03\\u51FD\\u6570\\u53EF\\u786E\\u4FDD\\u6BCF\\u6B21\\u66F4\\u65B0\\u90FD\\u57FA\\u4E8E\\u6700\\u65B0\\u7684\\u72B6\\u6001\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8003\\u8651\\u4E00\\u4E2A\\u8BA1\\u6570\\u5668\\u7EC4\\u4EF6\\uFF0C\\u5176\\u4E2D\\u72B6\\u6001\\u66F4\\u65B0\\u53D6\\u51B3\\u4E8E\\u4E4B\\u524D\\u7684\\u72B6\\u6001\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`class Counter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { counter: 0 };\n  }\n\n  incrementCounter = () => {\n    this.setState((prevState, props) => ({\n      counter: prevState.counter + 1,\n    }));\n  };\n\n  render() {\n    return (\n      <div>\n        <p>Counter: {this.state.counter}</p>\n        <button onClick={this.incrementCounter}>Increment</button>\n      </div>\n    );\n  }\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u4F7F\\u7528\\u56DE\\u8C03\\u51FD\\u6570\\u683C\\u5F0F\\u53EF\\u786E\\u4FDD\\u6B63\\u786E\\u9012\\u589E \",(0,n.jsx)(e.code,{children:\"counter\"}),\" \\u72B6\\u6001\\uFF0C\\u5373\\u4F7F\\u5728\\u77ED\\u65F6\\u95F4\\u5185\\u591A\\u6B21\\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"incrementCounter\"}),\" \\u4E5F\\u662F\\u5982\\u6B64\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React Docs: State: A Component's Memory\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/useState#setstate\",children:\"React Docs: setState()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/responding-to-events\",children:\"React Docs: Responding to Events\"})}),`\n`]})]})}function R(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var f=R;return x(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},a=(t,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!v.call(t,c)&&c!==r&&o(t,c,{get:()=>e[c],enumerable:!(s=u(e,c))||s.enumerable});return t};var C=(t,e,r)=>(r=t!=null?p(S(t)):{},a(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),R=t=>a(o({},\"__esModule\",{value:!0}),t);var d=g((D,i)=>{i.exports=_jsx_runtime});var j={};x(j,{default:()=>l,frontmatter:()=>f});var n=C(d()),f={title:\"React \\u4E2D `setState()` \\u7684\\u56DE\\u8C03\\u51FD\\u6570\\u53C2\\u6570\\u683C\\u5F0F\\u7684\\u76EE\\u7684\\u662F\\u4EC0\\u4E48\\uFF1F\\u5E94\\u8BE5\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\u5B83\\uFF1F\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React \\u4E2D \",(0,n.jsx)(e.code,{children:\"setState()\"}),\" \\u7684\\u56DE\\u8C03\\u51FD\\u6570\\u53C2\\u6570\\u683C\\u5F0F\\u7528\\u4E8E\\u786E\\u4FDD\\u72B6\\u6001\\u66F4\\u65B0\\u57FA\\u4E8E\\u6700\\u65B0\\u7684\\u72B6\\u6001\\u548C props\\u3002\\u5F53\\u65B0\\u72B6\\u6001\\u4F9D\\u8D56\\u4E8E\\u4E4B\\u524D\\u7684\\u72B6\\u6001\\u65F6\\uFF0C\\u8FD9\\u4E00\\u70B9\\u5C24\\u5176\\u91CD\\u8981\\u3002\\u60A8\\u65E0\\u9700\\u76F4\\u63A5\\u5C06\\u5BF9\\u8C61\\u4F20\\u9012\\u7ED9 \",(0,n.jsx)(e.code,{children:\"setState()\"}),\"\\uFF0C\\u800C\\u662F\\u4F20\\u9012\\u4E00\\u4E2A\\u51FD\\u6570\\uFF0C\\u8BE5\\u51FD\\u6570\\u5C06\\u4E4B\\u524D\\u7684\\u72B6\\u6001\\u548C props \\u4F5C\\u4E3A\\u53C2\\u6570\\uFF0C\\u5E76\\u8FD4\\u56DE\\u65B0\\u72B6\\u6001\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`this.setState((prevState, props) => ({\n  counter: prevState.counter + props.increment,\n}));\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"React \\u4E2D \",(0,n.jsx)(e.code,{children:\"setState()\"}),\" \\u7684\\u56DE\\u8C03\\u51FD\\u6570\\u53C2\\u6570\\u683C\\u5F0F\\u7684\\u76EE\\u7684\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u786E\\u4FDD\\u72B6\\u6001\\u66F4\\u65B0\\u57FA\\u4E8E\\u6700\\u65B0\\u7684\\u72B6\\u6001\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React \\u7684 \",(0,n.jsx)(e.code,{children:\"setState()\"}),\" \\u662F\\u5F02\\u6B65\\u7684\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u53EF\\u4EE5\\u51FA\\u4E8E\\u6027\\u80FD\\u539F\\u56E0\\u5C06\\u5BF9 \",(0,n.jsx)(e.code,{children:\"setState()\"}),\" \\u7684\\u591A\\u4E2A\\u8C03\\u7528\\u6279\\u5904\\u7406\\u5728\\u4E00\\u8D77\\u3002\\u5982\\u679C\\u4F9D\\u8D56\\u5F53\\u524D\\u72B6\\u6001\\u6765\\u8BA1\\u7B97\\u4E0B\\u4E00\\u4E2A\\u72B6\\u6001\\uFF0C\\u4F7F\\u7528\\u56DE\\u8C03\\u51FD\\u6570\\u683C\\u5F0F\\u53EF\\u786E\\u4FDD\\u60A8\\u4F7F\\u7528\\u6700\\u65B0\\u7684\\u72B6\\u6001\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"setState()\"}),\" \\u7684\\u56DE\\u8C03\\u51FD\\u6570\\u683C\\u5F0F\\u5C06\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A\\u53C2\\u6570\\u3002\\u6B64\\u51FD\\u6570\\u63A5\\u6536\\u4E24\\u4E2A\\u53C2\\u6570\\uFF1A\",(0,n.jsx)(e.code,{children:\"prevState\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"props\"}),\"\\u3002\\u5B83\\u8FD4\\u56DE\\u4E00\\u4E2A\\u8868\\u793A\\u65B0\\u72B6\\u6001\\u7684\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`this.setState((prevState, props) => {\n  return {\n    counter: prevState.counter + props.increment,\n  };\n});\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\u5B83\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5F53\\u65B0\\u72B6\\u6001\\u4F9D\\u8D56\\u4E8E\\u4E4B\\u524D\\u7684\\u72B6\\u6001\\u65F6\"}),\"\\uFF1A\\u5982\\u679C\\u9700\\u8981\\u6839\\u636E\\u5F53\\u524D\\u72B6\\u6001\\u66F4\\u65B0\\u72B6\\u6001\\uFF0C\\u8BF7\\u4F7F\\u7528\\u56DE\\u8C03\\u51FD\\u6570\\u683C\\u5F0F\\u4EE5\\u907F\\u514D\\u4E0E\\u5F02\\u6B65\\u72B6\\u6001\\u66F4\\u65B0\\u76F8\\u5173\\u7684\\u6F5C\\u5728\\u95EE\\u9898\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5F53\\u591A\\u4E2A\\u72B6\\u6001\\u66F4\\u65B0\\u88AB\\u6279\\u5904\\u7406\\u65F6\"}),\"\\uFF1A\\u5728\\u591A\\u4E2A \",(0,n.jsx)(e.code,{children:\"setState()\"}),\" \\u8C03\\u7528\\u53EF\\u80FD\\u88AB\\u6279\\u5904\\u7406\\u5728\\u4E00\\u8D77\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u4F7F\\u7528\\u56DE\\u8C03\\u51FD\\u6570\\u53EF\\u786E\\u4FDD\\u6BCF\\u6B21\\u66F4\\u65B0\\u90FD\\u57FA\\u4E8E\\u6700\\u65B0\\u7684\\u72B6\\u6001\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8003\\u8651\\u4E00\\u4E2A\\u8BA1\\u6570\\u5668\\u7EC4\\u4EF6\\uFF0C\\u5176\\u4E2D\\u72B6\\u6001\\u66F4\\u65B0\\u53D6\\u51B3\\u4E8E\\u4E4B\\u524D\\u7684\\u72B6\\u6001\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`class Counter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { counter: 0 };\n  }\n\n  incrementCounter = () => {\n    this.setState((prevState, props) => ({\n      counter: prevState.counter + 1,\n    }));\n  };\n\n  render() {\n    return (\n      <div>\n        <p>Counter: {this.state.counter}</p>\n        <button onClick={this.incrementCounter}>Increment</button>\n      </div>\n    );\n  }\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u4F7F\\u7528\\u56DE\\u8C03\\u51FD\\u6570\\u683C\\u5F0F\\u53EF\\u786E\\u4FDD\\u6B63\\u786E\\u9012\\u589E \",(0,n.jsx)(e.code,{children:\"counter\"}),\" \\u72B6\\u6001\\uFF0C\\u5373\\u4F7F\\u5728\\u77ED\\u65F6\\u95F4\\u5185\\u591A\\u6B21\\u8C03\\u7528 \",(0,n.jsx)(e.code,{children:\"incrementCounter\"}),\" \\u4E5F\\u662F\\u5982\\u6B64\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React Docs: State: A Component's Memory\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/useState#setstate\",children:\"React Docs: setState()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/responding-to-events\",children:\"React Docs: Responding to Events\"})}),`\n`]})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return R(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-break-and-continue-statements/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-break-and-continue-statements/en-US.json
index 2e3b3ff54..51f4286ef 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-break-and-continue-statements/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-break-and-continue-statements/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-purpose-of-the-break-and-continue-statements/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},c=(t,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!f.call(t,o)&&o!==i&&r(t,o,{get:()=>e[o],enumerable:!(a=p(e,o))||a.enumerable});return t};var k=(t,e,i)=>(i=t!=null?d(m(t)):{},c(e||!t||!t.__esModule?r(i,\"default\",{value:t,enumerable:!0}):i,t)),x=t=>c(r({},\"__esModule\",{value:!0}),t);var s=b((T,l)=>{l.exports=_jsx_runtime});var D={};g(D,{default:()=>v,frontmatter:()=>w});var n=k(s()),w={title:\"What is the purpose of the `break` and `continue` statements?\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",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 \",(0,n.jsx)(e.code,{children:\"break\"}),\" statement is used to exit a loop or switch statement prematurely, while the \",(0,n.jsx)(e.code,{children:\"continue\"}),\" statement skips the current iteration of a loop and proceeds to the next iteration. For example, in a \",(0,n.jsx)(e.code,{children:\"for\"}),\" loop, \",(0,n.jsx)(e.code,{children:\"break\"}),\" will stop the loop entirely, and \",(0,n.jsx)(e.code,{children:\"continue\"}),\" will skip to the next iteration.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`for (let i = 0; i < 10; i++) {\n  if (i === 5) break; // exits the loop when i is 5\n  console.log(i);\n}\n\nfor (let i = 0; i < 10; i++) {\n  if (i === 5) continue; // skips the iteration when i is 5\n  console.log(i);\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Purpose of the \",(0,n.jsx)(e.code,{children:\"break\"}),\" and \",(0,n.jsx)(e.code,{children:\"continue\"}),\" statements\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"break\"}),\" statement\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"break\"}),\" statement is used to exit a loop or a switch statement before it has completed all its iterations or cases. This is useful when you want to stop the execution of the loop or switch based on a certain condition.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example in a loop\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`for (let i = 0; i < 10; i++) {\n  if (i === 5) break; // exits the loop when i is 5\n  console.log(i);\n}\n// Output: 0 1 2 3 4\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Example in a switch statement\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function printDayOfWeek(day) {\n  switch (day) {\n    case 1:\n      console.log('Monday');\n      break;\n    case 2:\n      console.log('Tuesday');\n      break;\n    // other cases\n    default:\n      console.log('Invalid day');\n  }\n}\nprintDayOfWeek(2); // Tuesday\nprintDayOfWeek('myDay'); // Invalid day\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"continue\"}),\" statement\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"continue\"}),\" statement is used to skip the current iteration of a loop and proceed to the next iteration. This is useful when you want to skip certain iterations based on a condition without exiting the loop entirely.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example in a loop\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`for (let i = 0; i < 10; i++) {\n  if (i === 5) continue; // skips the iteration when i is 5\n  console.log(i);\n}\n// Output: 0 1 2 3 4 6 7 8 9\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Differences between \",(0,n.jsx)(e.code,{children:\"break\"}),\" and \",(0,n.jsx)(e.code,{children:\"continue\"})]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"break\"}),\" statement exits the loop or switch statement entirely.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"continue\"}),\" statement skips the current iteration and moves to the next iteration of the loop.\"]}),`\n`]}),`\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/Web/JavaScript/Reference/Statements/break\",children:\"MDN Web Docs: break\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/continue\",children:\"MDN Web Docs: continue\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration\",children:\"JavaScript Loops\"})}),`\n`]})]})}function y(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var v=y;return x(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},c=(t,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!k.call(t,o)&&o!==i&&r(t,o,{get:()=>e[o],enumerable:!(a=u(e,o))||a.enumerable});return t};var g=(t,e,i)=>(i=t!=null?p(f(t)):{},c(e||!t||!t.__esModule?r(i,\"default\",{value:t,enumerable:!0}):i,t)),w=t=>c(r({},\"__esModule\",{value:!0}),t);var s=x((T,l)=>{l.exports=_jsx_runtime});var v={};b(v,{default:()=>d,frontmatter:()=>y});var n=g(s()),y={title:\"What is the purpose of the `break` and `continue` statements?\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...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 \",(0,n.jsx)(e.code,{children:\"break\"}),\" statement is used to exit a loop or switch statement prematurely, while the \",(0,n.jsx)(e.code,{children:\"continue\"}),\" statement skips the current iteration of a loop and proceeds to the next iteration. For example, in a \",(0,n.jsx)(e.code,{children:\"for\"}),\" loop, \",(0,n.jsx)(e.code,{children:\"break\"}),\" will stop the loop entirely, and \",(0,n.jsx)(e.code,{children:\"continue\"}),\" will skip to the next iteration.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`for (let i = 0; i < 10; i++) {\n  if (i === 5) break; // exits the loop when i is 5\n  console.log(i);\n}\n\nfor (let i = 0; i < 10; i++) {\n  if (i === 5) continue; // skips the iteration when i is 5\n  console.log(i);\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Purpose of the \",(0,n.jsx)(e.code,{children:\"break\"}),\" and \",(0,n.jsx)(e.code,{children:\"continue\"}),\" statements\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"break\"}),\" statement\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"break\"}),\" statement is used to exit a loop or a switch statement before it has completed all its iterations or cases. This is useful when you want to stop the execution of the loop or switch based on a certain condition.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example in a loop\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`for (let i = 0; i < 10; i++) {\n  if (i === 5) break; // exits the loop when i is 5\n  console.log(i);\n}\n// Output: 0 1 2 3 4\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Example in a switch statement\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function printDayOfWeek(day) {\n  switch (day) {\n    case 1:\n      console.log('Monday');\n      break;\n    case 2:\n      console.log('Tuesday');\n      break;\n    // other cases\n    default:\n      console.log('Invalid day');\n  }\n}\nprintDayOfWeek(2); // Tuesday\nprintDayOfWeek('myDay'); // Invalid day\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"continue\"}),\" statement\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"continue\"}),\" statement is used to skip the current iteration of a loop and proceed to the next iteration. This is useful when you want to skip certain iterations based on a condition without exiting the loop entirely.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Example in a loop\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`for (let i = 0; i < 10; i++) {\n  if (i === 5) continue; // skips the iteration when i is 5\n  console.log(i);\n}\n// Output: 0 1 2 3 4 6 7 8 9\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Differences between \",(0,n.jsx)(e.code,{children:\"break\"}),\" and \",(0,n.jsx)(e.code,{children:\"continue\"})]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"break\"}),\" statement exits the loop or switch statement entirely.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"continue\"}),\" statement skips the current iteration and moves to the next iteration of the loop.\"]}),`\n`]}),`\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/Web/JavaScript/Reference/Statements/break\",children:\"MDN Web Docs: break\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/continue\",children:\"MDN Web Docs: continue\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration\",children:\"JavaScript Loops\"})}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return w(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-break-and-continue-statements/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-break-and-continue-statements/zh-CN.json
index 7537a4dce..6bb69668c 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-break-and-continue-statements/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-break-and-continue-statements/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-purpose-of-the-break-and-continue-statements/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),m=(i,e)=>{for(var c in e)l(i,c,{get:e[c],enumerable:!0})},d=(i,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!g.call(i,r)&&r!==c&&l(i,r,{get:()=>e[r],enumerable:!(o=u(e,r))||o.enumerable});return i};var k=(i,e,c)=>(c=i!=null?s(f(i)):{},d(e||!i||!i.__esModule?l(c,\"default\",{value:i,enumerable:!0}):c,i)),v=i=>d(l({},\"__esModule\",{value:!0}),i);var h=b((_,t)=>{t.exports=_jsx_runtime});var D={};m(D,{default:()=>x,frontmatter:()=>j});var n=k(h()),j={title:\"break \\u548C continue \\u8BED\\u53E5\\u7684\\u7528\\u9014\\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(i){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"break\"}),\" \\u8BED\\u53E5\\u7528\\u4E8E\\u8FC7\\u65E9\\u5730\\u9000\\u51FA\\u5FAA\\u73AF\\u6216 switch \\u8BED\\u53E5\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"continue\"}),\" \\u8BED\\u53E5\\u8DF3\\u8FC7\\u5FAA\\u73AF\\u7684\\u5F53\\u524D\\u8FED\\u4EE3\\u5E76\\u7EE7\\u7EED\\u5230\\u4E0B\\u4E00\\u4E2A\\u8FED\\u4EE3\\u3002\\u4F8B\\u5982\\uFF0C\\u5728 \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"break\"}),\" \\u5C06\\u5B8C\\u5168\\u505C\\u6B62\\u5FAA\\u73AF\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"continue\"}),\" \\u5C06\\u8DF3\\u5230\\u4E0B\\u4E00\\u4E2A\\u8FED\\u4EE3\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`for (let i = 0; i < 10; i++) {\n  if (i === 5) break; // \\u5F53 i \\u4E3A 5 \\u65F6\\u9000\\u51FA\\u5FAA\\u73AF\n  console.log(i);\n}\n\nfor (let i = 0; i < 10; i++) {\n  if (i === 5) continue; // \\u5F53 i \\u4E3A 5 \\u65F6\\u8DF3\\u8FC7\\u8FED\\u4EE3\n  console.log(i);\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"break\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"continue\"}),\" \\u8BED\\u53E5\\u7684\\u7528\\u9014\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"break\"}),\" \\u8BED\\u53E5\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"break\"}),\" \\u8BED\\u53E5\\u7528\\u4E8E\\u5728\\u5FAA\\u73AF\\u6216 switch \\u8BED\\u53E5\\u5B8C\\u6210\\u6240\\u6709\\u8FED\\u4EE3\\u6216 case \\u4E4B\\u524D\\u9000\\u51FA\\u3002\\u5F53\\u60A8\\u5E0C\\u671B\\u6839\\u636E\\u7279\\u5B9A\\u6761\\u4EF6\\u505C\\u6B62\\u5FAA\\u73AF\\u6216 switch \\u7684\\u6267\\u884C\\u65F6\\uFF0C\\u8FD9\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u5FAA\\u73AF\\u4E2D\\u7684\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`for (let i = 0; i < 10; i++) {\n  if (i === 5) break; // \\u5F53 i \\u4E3A 5 \\u65F6\\u9000\\u51FA\\u5FAA\\u73AF\n  console.log(i);\n}\n// \\u8F93\\u51FA\\uFF1A0 1 2 3 4\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"switch \\u8BED\\u53E5\\u4E2D\\u7684\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function printDayOfWeek(day) {\n  switch (day) {\n    case 1:\n      console.log('Monday');\n      break;\n    case 2:\n      console.log('Tuesday');\n      break;\n    // \\u5176\\u4ED6\\u60C5\\u51B5\n    default:\n      console.log('Invalid day');\n  }\n}\nprintDayOfWeek(2); // \\u661F\\u671F\\u4E8C\nprintDayOfWeek('myDay'); // \\u65E0\\u6548\\u7684\\u65E5\\u671F\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"continue\"}),\" \\u8BED\\u53E5\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"continue\"}),\" \\u8BED\\u53E5\\u7528\\u4E8E\\u8DF3\\u8FC7\\u5FAA\\u73AF\\u7684\\u5F53\\u524D\\u8FED\\u4EE3\\u5E76\\u7EE7\\u7EED\\u5230\\u4E0B\\u4E00\\u4E2A\\u8FED\\u4EE3\\u3002\\u5F53\\u60A8\\u5E0C\\u671B\\u6839\\u636E\\u67D0\\u4E2A\\u6761\\u4EF6\\u8DF3\\u8FC7\\u67D0\\u4E9B\\u8FED\\u4EE3\\u800C\\u4E0D\\u5B8C\\u5168\\u9000\\u51FA\\u5FAA\\u73AF\\u65F6\\uFF0C\\u8FD9\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u5FAA\\u73AF\\u4E2D\\u7684\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`for (let i = 0; i < 10; i++) {\n  if (i === 5) continue; // \\u5F53 i \\u4E3A 5 \\u65F6\\u8DF3\\u8FC7\\u8FED\\u4EE3\n  console.log(i);\n}\n// \\u8F93\\u51FA\\uFF1A0 1 2 3 4 6 7 8 9\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"break\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"continue\"}),\" \\u7684\\u533A\\u522B\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"break\"}),\" \\u8BED\\u53E5\\u5B8C\\u5168\\u9000\\u51FA\\u5FAA\\u73AF\\u6216 switch \\u8BED\\u53E5\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"continue\"}),\" \\u8BED\\u53E5\\u8DF3\\u8FC7\\u5F53\\u524D\\u8FED\\u4EE3\\u5E76\\u79FB\\u81F3\\u5FAA\\u73AF\\u7684\\u4E0B\\u4E00\\u4E2A\\u8FED\\u4EE3\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Statements/break\",children:\"MDN Web \\u6587\\u6863\\uFF1Abreak\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/continue\",children:\"MDN Web \\u6587\\u6863\\uFF1Acontinue\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration\",children:\"JavaScript \\u5FAA\\u73AF\"})}),`\n`]})]})}function y(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(a,i)})):a(i)}var x=y;return v(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var m=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),k=(i,e)=>{for(var c in e)l(i,c,{get:e[c],enumerable:!0})},d=(i,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!b.call(i,r)&&r!==c&&l(i,r,{get:()=>e[r],enumerable:!(o=p(e,r))||o.enumerable});return i};var v=(i,e,c)=>(c=i!=null?u(g(i)):{},d(e||!i||!i.__esModule?l(c,\"default\",{value:i,enumerable:!0}):c,i)),y=i=>d(l({},\"__esModule\",{value:!0}),i);var h=m((S,t)=>{t.exports=_jsx_runtime});var x={};k(x,{default:()=>s,frontmatter:()=>j});var n=v(h()),j={title:\"break \\u548C continue \\u8BED\\u53E5\\u7684\\u7528\\u9014\\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"break\"}),\" \\u8BED\\u53E5\\u7528\\u4E8E\\u8FC7\\u65E9\\u5730\\u9000\\u51FA\\u5FAA\\u73AF\\u6216 switch \\u8BED\\u53E5\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"continue\"}),\" \\u8BED\\u53E5\\u8DF3\\u8FC7\\u5FAA\\u73AF\\u7684\\u5F53\\u524D\\u8FED\\u4EE3\\u5E76\\u7EE7\\u7EED\\u5230\\u4E0B\\u4E00\\u4E2A\\u8FED\\u4EE3\\u3002\\u4F8B\\u5982\\uFF0C\\u5728 \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"break\"}),\" \\u5C06\\u5B8C\\u5168\\u505C\\u6B62\\u5FAA\\u73AF\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"continue\"}),\" \\u5C06\\u8DF3\\u5230\\u4E0B\\u4E00\\u4E2A\\u8FED\\u4EE3\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`for (let i = 0; i < 10; i++) {\n  if (i === 5) break; // \\u5F53 i \\u4E3A 5 \\u65F6\\u9000\\u51FA\\u5FAA\\u73AF\n  console.log(i);\n}\n\nfor (let i = 0; i < 10; i++) {\n  if (i === 5) continue; // \\u5F53 i \\u4E3A 5 \\u65F6\\u8DF3\\u8FC7\\u8FED\\u4EE3\n  console.log(i);\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"break\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"continue\"}),\" \\u8BED\\u53E5\\u7684\\u7528\\u9014\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"break\"}),\" \\u8BED\\u53E5\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"break\"}),\" \\u8BED\\u53E5\\u7528\\u4E8E\\u5728\\u5FAA\\u73AF\\u6216 switch \\u8BED\\u53E5\\u5B8C\\u6210\\u6240\\u6709\\u8FED\\u4EE3\\u6216 case \\u4E4B\\u524D\\u9000\\u51FA\\u3002\\u5F53\\u60A8\\u5E0C\\u671B\\u6839\\u636E\\u7279\\u5B9A\\u6761\\u4EF6\\u505C\\u6B62\\u5FAA\\u73AF\\u6216 switch \\u7684\\u6267\\u884C\\u65F6\\uFF0C\\u8FD9\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u5FAA\\u73AF\\u4E2D\\u7684\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`for (let i = 0; i < 10; i++) {\n  if (i === 5) break; // \\u5F53 i \\u4E3A 5 \\u65F6\\u9000\\u51FA\\u5FAA\\u73AF\n  console.log(i);\n}\n// \\u8F93\\u51FA\\uFF1A0 1 2 3 4\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"switch \\u8BED\\u53E5\\u4E2D\\u7684\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function printDayOfWeek(day) {\n  switch (day) {\n    case 1:\n      console.log('Monday');\n      break;\n    case 2:\n      console.log('Tuesday');\n      break;\n    // \\u5176\\u4ED6\\u60C5\\u51B5\n    default:\n      console.log('Invalid day');\n  }\n}\nprintDayOfWeek(2); // \\u661F\\u671F\\u4E8C\nprintDayOfWeek('myDay'); // \\u65E0\\u6548\\u7684\\u65E5\\u671F\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"continue\"}),\" \\u8BED\\u53E5\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"continue\"}),\" \\u8BED\\u53E5\\u7528\\u4E8E\\u8DF3\\u8FC7\\u5FAA\\u73AF\\u7684\\u5F53\\u524D\\u8FED\\u4EE3\\u5E76\\u7EE7\\u7EED\\u5230\\u4E0B\\u4E00\\u4E2A\\u8FED\\u4EE3\\u3002\\u5F53\\u60A8\\u5E0C\\u671B\\u6839\\u636E\\u67D0\\u4E2A\\u6761\\u4EF6\\u8DF3\\u8FC7\\u67D0\\u4E9B\\u8FED\\u4EE3\\u800C\\u4E0D\\u5B8C\\u5168\\u9000\\u51FA\\u5FAA\\u73AF\\u65F6\\uFF0C\\u8FD9\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u5FAA\\u73AF\\u4E2D\\u7684\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`for (let i = 0; i < 10; i++) {\n  if (i === 5) continue; // \\u5F53 i \\u4E3A 5 \\u65F6\\u8DF3\\u8FC7\\u8FED\\u4EE3\n  console.log(i);\n}\n// \\u8F93\\u51FA\\uFF1A0 1 2 3 4 6 7 8 9\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"break\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"continue\"}),\" \\u7684\\u533A\\u522B\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"break\"}),\" \\u8BED\\u53E5\\u5B8C\\u5168\\u9000\\u51FA\\u5FAA\\u73AF\\u6216 switch \\u8BED\\u53E5\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"continue\"}),\" \\u8BED\\u53E5\\u8DF3\\u8FC7\\u5F53\\u524D\\u8FED\\u4EE3\\u5E76\\u79FB\\u81F3\\u5FAA\\u73AF\\u7684\\u4E0B\\u4E00\\u4E2A\\u8FED\\u4EE3\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Statements/break\",children:\"MDN Web \\u6587\\u6863\\uFF1Abreak\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/continue\",children:\"MDN Web \\u6587\\u6863\\uFF1Acontinue\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration\",children:\"JavaScript \\u5FAA\\u73AF\"})}),`\n`]})]})}function s(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(a,{...i})}):a(i)}return y(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-finally-block/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-finally-block/en-US.json
index bab3765cb..0d24c0b93 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-finally-block/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-finally-block/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-purpose-of-the-finally-block/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),m=(r,e)=>{for(var t in e)c(r,t,{get:e[t],enumerable:!0})},a=(r,e,t,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!y.call(r,o)&&o!==t&&c(r,o,{get:()=>e[o],enumerable:!(l=u(e,o))||l.enumerable});return r};var b=(r,e,t)=>(t=r!=null?d(f(r)):{},a(e||!r||!r.__esModule?c(t,\"default\",{value:r,enumerable:!0}):t,r)),k=r=>a(c({},\"__esModule\",{value:!0}),r);var i=g((T,s)=>{s.exports=_jsx_runtime});var v={};m(v,{default:()=>x,frontmatter:()=>j});var n=b(i()),j={title:\"What is the purpose of the `finally` block?\"};function h(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"finally\"}),\" block in JavaScript is used to execute code after a \",(0,n.jsx)(e.code,{children:\"try\"}),\" and \",(0,n.jsx)(e.code,{children:\"catch\"}),\" block, regardless of whether an error was thrown or caught. It ensures that certain cleanup or finalization code runs no matter what. For example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`try {\n  // Code that may throw an error\n} catch (error) {\n  // Code to handle the error\n} finally {\n  // Code that will always run\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Purpose of the \",(0,n.jsx)(e.code,{children:\"finally\"}),\" block\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Ensuring cleanup\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"finally\"}),\" block is often used to ensure that certain cleanup code runs regardless of whether an error occurred or not. This is useful for tasks like closing files, releasing resources, or resetting states.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch(\n      'https://jsonplaceholder.typicode.com/posts/1',\n    );\n    if (!response.ok) {\n      throw new Error(\\`HTTP error! Status: \\${response.status}\\`);\n    }\n    const data = await response.json();\n    console.log('Fetched data:', data);\n  } catch (error) {\n    console.error('An error occurred:', error);\n  } finally {\n    console.log('Cleanup code runs here');\n  }\n}\n\nfetchData();\n// Try creating a typo in the URL to see error handling.\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Guaranteeing execution\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"finally\"}),\" block guarantees that the code within it will execute after the \",(0,n.jsx)(e.code,{children:\"try\"}),\" and \",(0,n.jsx)(e.code,{children:\"catch\"}),\" blocks have finished. This is true even if a \",(0,n.jsx)(e.code,{children:\"return\"}),\" statement is encountered in the \",(0,n.jsx)(e.code,{children:\"try\"}),\" or \",(0,n.jsx)(e.code,{children:\"catch\"}),\" blocks.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function exampleFunction() {\n  try {\n    return 'Try block';\n  } catch (error) {\n    return 'Catch block';\n  } finally {\n    console.log('Finally block');\n  }\n}\n\nconsole.log(exampleFunction()); // Output: 'Finally block' followed by 'Try block'\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Handling asynchronous code\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When dealing with asynchronous code, the \",(0,n.jsx)(e.code,{children:\"finally\"}),\" block can be used to ensure that certain actions are taken after a promise is settled, regardless of its outcome.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.json())\n  .then((res) => console.log(res))\n  .catch((error) => console.error('Fetch error:', error))\n  .finally(() => console.log('Fetch attempt finished'));\n`})}),`\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/Web/JavaScript/Reference/Statements/try...catch\",children:\"MDN Web Docs: try...catch\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/try-catch\",children:\"JavaScript.info: try...catch\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally\",children:\"MDN Web Docs: Promise.prototype.finally()\"})}),`\n`]})]})}function w(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(h,r)})):h(r)}var x=w;return k(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),b=(r,e)=>{for(var t in e)c(r,t,{get:e[t],enumerable:!0})},a=(r,e,t,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of f(e))!g.call(r,o)&&o!==t&&c(r,o,{get:()=>e[o],enumerable:!(l=p(e,o))||l.enumerable});return r};var k=(r,e,t)=>(t=r!=null?u(y(r)):{},a(e||!r||!r.__esModule?c(t,\"default\",{value:r,enumerable:!0}):t,r)),w=r=>a(c({},\"__esModule\",{value:!0}),r);var s=m((F,i)=>{i.exports=_jsx_runtime});var x={};b(x,{default:()=>d,frontmatter:()=>j});var n=k(s()),j={title:\"What is the purpose of the `finally` block?\"};function h(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"finally\"}),\" block in JavaScript is used to execute code after a \",(0,n.jsx)(e.code,{children:\"try\"}),\" and \",(0,n.jsx)(e.code,{children:\"catch\"}),\" block, regardless of whether an error was thrown or caught. It ensures that certain cleanup or finalization code runs no matter what. For example:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`try {\n  // Code that may throw an error\n} catch (error) {\n  // Code to handle the error\n} finally {\n  // Code that will always run\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Purpose of the \",(0,n.jsx)(e.code,{children:\"finally\"}),\" block\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Ensuring cleanup\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"finally\"}),\" block is often used to ensure that certain cleanup code runs regardless of whether an error occurred or not. This is useful for tasks like closing files, releasing resources, or resetting states.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch(\n      'https://jsonplaceholder.typicode.com/posts/1',\n    );\n    if (!response.ok) {\n      throw new Error(\\`HTTP error! Status: \\${response.status}\\`);\n    }\n    const data = await response.json();\n    console.log('Fetched data:', data);\n  } catch (error) {\n    console.error('An error occurred:', error);\n  } finally {\n    console.log('Cleanup code runs here');\n  }\n}\n\nfetchData();\n// Try creating a typo in the URL to see error handling.\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Guaranteeing execution\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"finally\"}),\" block guarantees that the code within it will execute after the \",(0,n.jsx)(e.code,{children:\"try\"}),\" and \",(0,n.jsx)(e.code,{children:\"catch\"}),\" blocks have finished. This is true even if a \",(0,n.jsx)(e.code,{children:\"return\"}),\" statement is encountered in the \",(0,n.jsx)(e.code,{children:\"try\"}),\" or \",(0,n.jsx)(e.code,{children:\"catch\"}),\" blocks.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function exampleFunction() {\n  try {\n    return 'Try block';\n  } catch (error) {\n    return 'Catch block';\n  } finally {\n    console.log('Finally block');\n  }\n}\n\nconsole.log(exampleFunction()); // Output: 'Finally block' followed by 'Try block'\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Handling asynchronous code\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When dealing with asynchronous code, the \",(0,n.jsx)(e.code,{children:\"finally\"}),\" block can be used to ensure that certain actions are taken after a promise is settled, regardless of its outcome.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.json())\n  .then((res) => console.log(res))\n  .catch((error) => console.error('Fetch error:', error))\n  .finally(() => console.log('Fetch attempt finished'));\n`})}),`\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/Web/JavaScript/Reference/Statements/try...catch\",children:\"MDN Web Docs: try...catch\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/try-catch\",children:\"JavaScript.info: try...catch\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally\",children:\"MDN Web Docs: Promise.prototype.finally()\"})}),`\n`]})]})}function d(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return w(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-finally-block/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-finally-block/zh-CN.json
index e847445d7..1a221e84b 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-finally-block/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-finally-block/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-purpose-of-the-finally-block/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),g=(r,e)=>{for(var c in e)l(r,c,{get:e[c],enumerable:!0})},a=(r,e,c,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of y(e))!u.call(r,o)&&o!==c&&l(r,o,{get:()=>e[o],enumerable:!(t=p(e,o))||t.enumerable});return r};var j=(r,e,c)=>(c=r!=null?d(f(r)):{},a(e||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),b=r=>a(l({},\"__esModule\",{value:!0}),r);var h=m((S,i)=>{i.exports=_jsx_runtime});var D={};g(D,{default:()=>w,frontmatter:()=>x});var n=j(h()),x={title:\"finally \\u5757\\u7684\\u76EE\\u7684\\u662F\\u4EC0\\u4E48\\uFF1F\"};function s(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"finally\"}),\" \\u5757\\u7528\\u4E8E\\u5728 \",(0,n.jsx)(e.code,{children:\"try\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"catch\"}),\" \\u5757\\u4E4B\\u540E\\u6267\\u884C\\u4EE3\\u7801\\uFF0C\\u65E0\\u8BBA\\u662F\\u5426\\u629B\\u51FA\\u6216\\u6355\\u83B7\\u4E86\\u9519\\u8BEF\\u3002\\u5B83\\u786E\\u4FDD\\u67D0\\u4E9B\\u6E05\\u7406\\u6216\\u6700\\u7EC8\\u786E\\u5B9A\\u4EE3\\u7801\\u65E0\\u8BBA\\u5982\\u4F55\\u90FD\\u4F1A\\u8FD0\\u884C\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`try {\n  // Code that may throw an error\n} catch (error) {\n  // Code to handle the error\n} finally {\n  // Code that will always run\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"finally\"}),\" \\u5757\\u7684\\u76EE\\u7684\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u786E\\u4FDD\\u6E05\\u7406\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"finally\"}),\" \\u5757\\u901A\\u5E38\\u7528\\u4E8E\\u786E\\u4FDD\\u67D0\\u4E9B\\u6E05\\u7406\\u4EE3\\u7801\\u8FD0\\u884C\\uFF0C\\u65E0\\u8BBA\\u662F\\u5426\\u53D1\\u751F\\u9519\\u8BEF\\u3002\\u8FD9\\u5BF9\\u4E8E\\u5173\\u95ED\\u6587\\u4EF6\\u3001\\u91CA\\u653E\\u8D44\\u6E90\\u6216\\u91CD\\u7F6E\\u72B6\\u6001\\u7B49\\u4EFB\\u52A1\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch(\n      'https://jsonplaceholder.typicode.com/posts/1',\n    );\n    if (!response.ok) {\n      throw new Error(\\`HTTP error! Status: \\${response.status}\\`);\n    }\n    const data = await response.json();\n    console.log('Fetched data:', data);\n  } catch (error) {\n    console.error('An error occurred:', error);\n  } finally {\n    console.log('Cleanup code runs here');\n  }\n}\n\nfetchData();\n// Try creating a typo in the URL to see error handling.\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4FDD\\u8BC1\\u6267\\u884C\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"finally\"}),\" \\u5757\\u4FDD\\u8BC1\\u5176\\u4E2D\\u7684\\u4EE3\\u7801\\u5C06\\u5728 \",(0,n.jsx)(e.code,{children:\"try\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"catch\"}),\" \\u5757\\u5B8C\\u6210\\u540E\\u6267\\u884C\\u3002\\u5373\\u4F7F\\u5728 \",(0,n.jsx)(e.code,{children:\"try\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"catch\"}),\" \\u5757\\u4E2D\\u9047\\u5230 \",(0,n.jsx)(e.code,{children:\"return\"}),\" \\u8BED\\u53E5\\uFF0C\\u4E5F\\u662F\\u5982\\u6B64\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function exampleFunction() {\n  try {\n    return 'Try block';\n  } catch (error) {\n    return 'Catch block';\n  } finally {\n    console.log('Finally block');\n  }\n}\n\nconsole.log(exampleFunction()); // Output: 'Finally block' followed by 'Try block'\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5904\\u7406\\u5F02\\u6B65\\u4EE3\\u7801\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5904\\u7406\\u5F02\\u6B65\\u4EE3\\u7801\\u65F6\\uFF0C\",(0,n.jsx)(e.code,{children:\"finally\"}),\" \\u5757\\u53EF\\u7528\\u4E8E\\u786E\\u4FDD\\u5728 Promise \\u89E3\\u51B3\\u540E\\u91C7\\u53D6\\u67D0\\u4E9B\\u64CD\\u4F5C\\uFF0C\\u65E0\\u8BBA\\u5176\\u7ED3\\u679C\\u5982\\u4F55\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.json())\n  .then((res) => console.log(res))\n  .catch((error) => console.error('Fetch error:', error))\n  .finally(() => console.log('Fetch attempt finished'));\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Statements/try...catch\",children:\"MDN Web Docs: try...catch\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/try-catch\",children:\"JavaScript.info: try...catch\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally\",children:\"MDN Web Docs: Promise.prototype.finally()\"})}),`\n`]})]})}function v(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(s,r)})):s(r)}var w=v;return b(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),j=(r,e)=>{for(var c in e)l(r,c,{get:e[c],enumerable:!0})},a=(r,e,c,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of f(e))!m.call(r,o)&&o!==c&&l(r,o,{get:()=>e[o],enumerable:!(t=y(e,o))||t.enumerable});return r};var b=(r,e,c)=>(c=r!=null?p(u(r)):{},a(e||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),x=r=>a(l({},\"__esModule\",{value:!0}),r);var i=g((F,h)=>{h.exports=_jsx_runtime});var w={};j(w,{default:()=>s,frontmatter:()=>v});var n=b(i()),v={title:\"finally \\u5757\\u7684\\u76EE\\u7684\\u662F\\u4EC0\\u4E48\\uFF1F\"};function d(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"finally\"}),\" \\u5757\\u7528\\u4E8E\\u5728 \",(0,n.jsx)(e.code,{children:\"try\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"catch\"}),\" \\u5757\\u4E4B\\u540E\\u6267\\u884C\\u4EE3\\u7801\\uFF0C\\u65E0\\u8BBA\\u662F\\u5426\\u629B\\u51FA\\u6216\\u6355\\u83B7\\u4E86\\u9519\\u8BEF\\u3002\\u5B83\\u786E\\u4FDD\\u67D0\\u4E9B\\u6E05\\u7406\\u6216\\u6700\\u7EC8\\u786E\\u5B9A\\u4EE3\\u7801\\u65E0\\u8BBA\\u5982\\u4F55\\u90FD\\u4F1A\\u8FD0\\u884C\\u3002\\u4F8B\\u5982\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`try {\n  // Code that may throw an error\n} catch (error) {\n  // Code to handle the error\n} finally {\n  // Code that will always run\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"finally\"}),\" \\u5757\\u7684\\u76EE\\u7684\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u786E\\u4FDD\\u6E05\\u7406\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"finally\"}),\" \\u5757\\u901A\\u5E38\\u7528\\u4E8E\\u786E\\u4FDD\\u67D0\\u4E9B\\u6E05\\u7406\\u4EE3\\u7801\\u8FD0\\u884C\\uFF0C\\u65E0\\u8BBA\\u662F\\u5426\\u53D1\\u751F\\u9519\\u8BEF\\u3002\\u8FD9\\u5BF9\\u4E8E\\u5173\\u95ED\\u6587\\u4EF6\\u3001\\u91CA\\u653E\\u8D44\\u6E90\\u6216\\u91CD\\u7F6E\\u72B6\\u6001\\u7B49\\u4EFB\\u52A1\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`async function fetchData() {\n  try {\n    const response = await fetch(\n      'https://jsonplaceholder.typicode.com/posts/1',\n    );\n    if (!response.ok) {\n      throw new Error(\\`HTTP error! Status: \\${response.status}\\`);\n    }\n    const data = await response.json();\n    console.log('Fetched data:', data);\n  } catch (error) {\n    console.error('An error occurred:', error);\n  } finally {\n    console.log('Cleanup code runs here');\n  }\n}\n\nfetchData();\n// Try creating a typo in the URL to see error handling.\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4FDD\\u8BC1\\u6267\\u884C\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"finally\"}),\" \\u5757\\u4FDD\\u8BC1\\u5176\\u4E2D\\u7684\\u4EE3\\u7801\\u5C06\\u5728 \",(0,n.jsx)(e.code,{children:\"try\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"catch\"}),\" \\u5757\\u5B8C\\u6210\\u540E\\u6267\\u884C\\u3002\\u5373\\u4F7F\\u5728 \",(0,n.jsx)(e.code,{children:\"try\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"catch\"}),\" \\u5757\\u4E2D\\u9047\\u5230 \",(0,n.jsx)(e.code,{children:\"return\"}),\" \\u8BED\\u53E5\\uFF0C\\u4E5F\\u662F\\u5982\\u6B64\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function exampleFunction() {\n  try {\n    return 'Try block';\n  } catch (error) {\n    return 'Catch block';\n  } finally {\n    console.log('Finally block');\n  }\n}\n\nconsole.log(exampleFunction()); // Output: 'Finally block' followed by 'Try block'\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5904\\u7406\\u5F02\\u6B65\\u4EE3\\u7801\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5904\\u7406\\u5F02\\u6B65\\u4EE3\\u7801\\u65F6\\uFF0C\",(0,n.jsx)(e.code,{children:\"finally\"}),\" \\u5757\\u53EF\\u7528\\u4E8E\\u786E\\u4FDD\\u5728 Promise \\u89E3\\u51B3\\u540E\\u91C7\\u53D6\\u67D0\\u4E9B\\u64CD\\u4F5C\\uFF0C\\u65E0\\u8BBA\\u5176\\u7ED3\\u679C\\u5982\\u4F55\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`fetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then((response) => response.json())\n  .then((res) => console.log(res))\n  .catch((error) => console.error('Fetch error:', error))\n  .finally(() => console.log('Fetch attempt finished'));\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Statements/try...catch\",children:\"MDN Web Docs: try...catch\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/try-catch\",children:\"JavaScript.info: try...catch\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally\",children:\"MDN Web Docs: Promise.prototype.finally()\"})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(d,{...r})}):d(r)}return x(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-key-prop-in-react/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-key-prop-in-react/en-US.json
index f310b30e1..a6a8a5f19 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-key-prop-in-react/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-key-prop-in-react/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-purpose-of-the-key-prop-in-react/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var g=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),f=(i,e)=>{for(var t in e)a(i,t,{get:e[t],enumerable:!0})},d=(i,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!y.call(i,r)&&r!==t&&a(i,r,{get:()=>e[r],enumerable:!(s=u(e,r))||s.enumerable});return i};var k=(i,e,t)=>(t=i!=null?h(p(i)):{},d(e||!i||!i.__esModule?a(t,\"default\",{value:i,enumerable:!0}):t,i)),v=i=>d(a({},\"__esModule\",{value:!0}),i);var o=g((q,c)=>{c.exports=_jsx_runtime});var I={};f(I,{default:()=>R,frontmatter:()=>x});var n=k(o()),x={title:\"What is the purpose of the `key` prop in React?\"};function l(i){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"key\"}),\" prop in React is used to uniquely identify elements in a list. It helps React optimize rendering by efficiently updating and reordering elements. Without a unique \",(0,n.jsx)(e.code,{children:\"key\"}),\", React may re-render elements unnecessarily, leading to performance issues and bugs.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`{\n  items.map((item) => <ListItem key={item.id} value={item.value} />);\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is the purpose of the \",(0,n.jsx)(e.code,{children:\"key\"}),\" prop in React?\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Introduction\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"key\"}),\" prop is a special attribute you need to include when creating lists of elements in React. It is crucial for helping React identify which items have changed, been added, or removed, thereby optimizing the rendering process.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Why \",(0,n.jsx)(e.code,{children:\"key\"}),\" is important\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Efficient updates\"}),\": React uses the \",(0,n.jsx)(e.code,{children:\"key\"}),\" prop to keep track of elements. When the state of a list changes, React can quickly determine which items need to be re-rendered, added, or removed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Avoiding bugs\"}),\": Without unique keys, React may re-render elements unnecessarily or incorrectly, leading to potential bugs in your application.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Performance optimization\"}),\": By using unique keys, React minimizes the number of DOM operations, making your application faster and more efficient.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"How to use the \",(0,n.jsx)(e.code,{children:\"key\"}),\" prop\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"When rendering a list of elements, you should provide a unique \",(0,n.jsx)(e.code,{children:\"key\"}),\" for each element. This key should be stable, meaning it should not change between renders. Typically, you can use a unique identifier from your data, such as an \",(0,n.jsx)(e.code,{children:\"id\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const items = [\n  { id: 1, value: 'Item 1' },\n  { id: 2, value: 'Item 2' },\n  { id: 3, value: 'Item 3' },\n];\n\nfunction ItemList() {\n  return (\n    <ul>\n      {items.map((item) => (\n        <ListItem key={item.id} value={item.value} />\n      ))}\n    </ul>\n  );\n}\n\nfunction ListItem({ value }) {\n  return <li>{value}</li>;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Common mistakes\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Using array index as key\"}),\": While it might be tempting to use the array index as the key, this is not recommended because the index can change if the list is reordered or items are added/removed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Non-unique keys\"}),\": Ensure that the keys are unique across the list. Duplicate keys can lead to unexpected behavior and bugs.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`// Bad practice: using array index as key\n{\n  items.map((item, index) => <ListItem key={index} value={item.value} />);\n}\n\n// Good practice: using a unique identifier as key\n{\n  items.map((item) => <ListItem key={item.id} value={item.value} />);\n}\n`})}),`\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://react.dev/learn/rendering-lists#why-does-react-need-keys\",children:\"React documentation on keys\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318\",children:\"Why keys are important in React\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/preserving-and-resetting-state\",children:\"Preserving and Resetting State in React\"})}),`\n`]})]})}function b(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(l,i)})):l(i)}var R=b;return v(I);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),k=(i,e)=>{for(var t in e)a(i,t,{get:e[t],enumerable:!0})},s=(i,e,t,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!g.call(i,r)&&r!==t&&a(i,r,{get:()=>e[r],enumerable:!(d=m(e,r))||d.enumerable});return i};var v=(i,e,t)=>(t=i!=null?u(y(i)):{},s(e||!i||!i.__esModule?a(t,\"default\",{value:i,enumerable:!0}):t,i)),x=i=>s(a({},\"__esModule\",{value:!0}),i);var o=f((q,c)=>{c.exports=_jsx_runtime});var R={};k(R,{default:()=>h,frontmatter:()=>b});var n=v(o()),b={title:\"What is the purpose of the `key` prop in React?\"};function l(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"key\"}),\" prop in React is used to uniquely identify elements in a list. It helps React optimize rendering by efficiently updating and reordering elements. Without a unique \",(0,n.jsx)(e.code,{children:\"key\"}),\", React may re-render elements unnecessarily, leading to performance issues and bugs.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`{\n  items.map((item) => <ListItem key={item.id} value={item.value} />);\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is the purpose of the \",(0,n.jsx)(e.code,{children:\"key\"}),\" prop in React?\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Introduction\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"key\"}),\" prop is a special attribute you need to include when creating lists of elements in React. It is crucial for helping React identify which items have changed, been added, or removed, thereby optimizing the rendering process.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Why \",(0,n.jsx)(e.code,{children:\"key\"}),\" is important\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Efficient updates\"}),\": React uses the \",(0,n.jsx)(e.code,{children:\"key\"}),\" prop to keep track of elements. When the state of a list changes, React can quickly determine which items need to be re-rendered, added, or removed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Avoiding bugs\"}),\": Without unique keys, React may re-render elements unnecessarily or incorrectly, leading to potential bugs in your application.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Performance optimization\"}),\": By using unique keys, React minimizes the number of DOM operations, making your application faster and more efficient.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"How to use the \",(0,n.jsx)(e.code,{children:\"key\"}),\" prop\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"When rendering a list of elements, you should provide a unique \",(0,n.jsx)(e.code,{children:\"key\"}),\" for each element. This key should be stable, meaning it should not change between renders. Typically, you can use a unique identifier from your data, such as an \",(0,n.jsx)(e.code,{children:\"id\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const items = [\n  { id: 1, value: 'Item 1' },\n  { id: 2, value: 'Item 2' },\n  { id: 3, value: 'Item 3' },\n];\n\nfunction ItemList() {\n  return (\n    <ul>\n      {items.map((item) => (\n        <ListItem key={item.id} value={item.value} />\n      ))}\n    </ul>\n  );\n}\n\nfunction ListItem({ value }) {\n  return <li>{value}</li>;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Common mistakes\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Using array index as key\"}),\": While it might be tempting to use the array index as the key, this is not recommended because the index can change if the list is reordered or items are added/removed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Non-unique keys\"}),\": Ensure that the keys are unique across the list. Duplicate keys can lead to unexpected behavior and bugs.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`// Bad practice: using array index as key\n{\n  items.map((item, index) => <ListItem key={index} value={item.value} />);\n}\n\n// Good practice: using a unique identifier as key\n{\n  items.map((item) => <ListItem key={item.id} value={item.value} />);\n}\n`})}),`\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://react.dev/learn/rendering-lists#why-does-react-need-keys\",children:\"React documentation on keys\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318\",children:\"Why keys are important in React\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/preserving-and-resetting-state\",children:\"Preserving and Resetting State in React\"})}),`\n`]})]})}function h(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(l,{...i})}):l(i)}return x(R);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-key-prop-in-react/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-key-prop-in-react/zh-CN.json
index d09f52d1e..a16d1c65f 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-key-prop-in-react/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-key-prop-in-react/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-purpose-of-the-key-prop-in-react/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var o=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),k=(i,e)=>{for(var t in e)c(i,t,{get:e[t],enumerable:!0})},d=(i,e,t,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!g.call(i,r)&&r!==t&&c(i,r,{get:()=>e[r],enumerable:!(l=m(e,r))||l.enumerable});return i};var v=(i,e,t)=>(t=i!=null?o(u(i)):{},d(e||!i||!i.__esModule?c(t,\"default\",{value:i,enumerable:!0}):t,i)),x=i=>d(c({},\"__esModule\",{value:!0}),i);var h=y((_,a)=>{a.exports=_jsx_runtime});var I={};k(I,{default:()=>j,frontmatter:()=>R});var n=v(h()),R={title:\"React \\u4E2D `key` prop \\u7684\\u4F5C\\u7528\\u662F\\u4EC0\\u4E48\\uFF1F\"};function s(i){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"key\"}),\" prop \\u7528\\u4E8E\\u552F\\u4E00\\u6807\\u8BC6\\u5217\\u8868\\u4E2D\\u7684\\u5143\\u7D20\\u3002\\u5B83\\u901A\\u8FC7\\u6709\\u6548\\u5730\\u66F4\\u65B0\\u548C\\u91CD\\u65B0\\u6392\\u5E8F\\u5143\\u7D20\\u6765\\u5E2E\\u52A9 React \\u4F18\\u5316\\u6E32\\u67D3\\u3002\\u5982\\u679C\\u6CA1\\u6709\\u552F\\u4E00\\u7684 \",(0,n.jsx)(e.code,{children:\"key\"}),\"\\uFF0CReact \\u53EF\\u80FD\\u4F1A\\u4E0D\\u5FC5\\u8981\\u5730\\u91CD\\u65B0\\u6E32\\u67D3\\u5143\\u7D20\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u6027\\u80FD\\u95EE\\u9898\\u548C\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`{\n  items.map((item) => <ListItem key={item.id} value={item.value} />);\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"React \\u4E2D \",(0,n.jsx)(e.code,{children:\"key\"}),\" prop \\u7684\\u4F5C\\u7528\\u662F\\u4EC0\\u4E48\\uFF1F\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7B80\\u4ECB\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"key\"}),\" prop \\u662F\\u4E00\\u4E2A\\u7279\\u6B8A\\u7684\\u5C5E\\u6027\\uFF0C\\u5F53\\u4F60\\u5728 React \\u4E2D\\u521B\\u5EFA\\u5143\\u7D20\\u5217\\u8868\\u65F6\\uFF0C\\u4F60\\u9700\\u8981\\u5305\\u542B\\u5B83\\u3002\\u5B83\\u5BF9\\u4E8E\\u5E2E\\u52A9 React \\u8BC6\\u522B\\u54EA\\u4E9B\\u9879\\u76EE\\u5DF2\\u66F4\\u6539\\u3001\\u5DF2\\u6DFB\\u52A0\\u6216\\u5DF2\\u5220\\u9664\\u81F3\\u5173\\u91CD\\u8981\\uFF0C\\u4ECE\\u800C\\u4F18\\u5316\\u6E32\\u67D3\\u8FC7\\u7A0B\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4E3A\\u4EC0\\u4E48 \",(0,n.jsx)(e.code,{children:\"key\"}),\" \\u5F88\\u91CD\\u8981\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u9AD8\\u6548\\u66F4\\u65B0\"}),\"\\uFF1AReact \\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"key\"}),\" prop \\u6765\\u8DDF\\u8E2A\\u5143\\u7D20\\u3002\\u5F53\\u5217\\u8868\\u7684\\u72B6\\u6001\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0CReact \\u53EF\\u4EE5\\u5FEB\\u901F\\u786E\\u5B9A\\u54EA\\u4E9B\\u9879\\u76EE\\u9700\\u8981\\u91CD\\u65B0\\u6E32\\u67D3\\u3001\\u6DFB\\u52A0\\u6216\\u5220\\u9664\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u907F\\u514D\\u9519\\u8BEF\"}),\"\\uFF1A\\u5982\\u679C\\u6CA1\\u6709\\u552F\\u4E00\\u7684\\u952E\\uFF0CReact \\u53EF\\u80FD\\u4F1A\\u4E0D\\u5FC5\\u8981\\u5730\\u6216\\u9519\\u8BEF\\u5730\\u91CD\\u65B0\\u6E32\\u67D3\\u5143\\u7D20\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u51FA\\u73B0\\u6F5C\\u5728\\u7684\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6027\\u80FD\\u4F18\\u5316\"}),\"\\uFF1A\\u901A\\u8FC7\\u4F7F\\u7528\\u552F\\u4E00\\u7684\\u952E\\uFF0CReact \\u6700\\u5C0F\\u5316\\u4E86 DOM \\u64CD\\u4F5C\\u7684\\u6570\\u91CF\\uFF0C\\u4F7F\\u4F60\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u66F4\\u5FEB\\u3001\\u66F4\\u9AD8\\u6548\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u5982\\u4F55\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"key\"}),\" prop\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u6E32\\u67D3\\u5143\\u7D20\\u5217\\u8868\\u65F6\\uFF0C\\u4F60\\u5E94\\u8BE5\\u4E3A\\u6BCF\\u4E2A\\u5143\\u7D20\\u63D0\\u4F9B\\u4E00\\u4E2A\\u552F\\u4E00\\u7684 \",(0,n.jsx)(e.code,{children:\"key\"}),\"\\u3002\\u6B64\\u952E\\u5E94\\u8BE5\\u662F\\u7A33\\u5B9A\\u7684\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4E0D\\u5E94\\u5728\\u6E32\\u67D3\\u4E4B\\u95F4\\u66F4\\u6539\\u3002\\u901A\\u5E38\\uFF0C\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528\\u6570\\u636E\\u4E2D\\u7684\\u552F\\u4E00\\u6807\\u8BC6\\u7B26\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"id\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const items = [\n  { id: 1, value: 'Item 1' },\n  { id: 2, value: 'Item 2' },\n  { id: 3, value: 'Item 3' },\n];\n\nfunction ItemList() {\n  return (\n    <ul>\n      {items.map((item) => (\n        <ListItem key={item.id} value={item.value} />\n      ))}\n    </ul>\n  );\n}\n\nfunction ListItem({ value }) {\n  return <li>{value}</li>;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5E38\\u89C1\\u9519\\u8BEF\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4F7F\\u7528\\u6570\\u7EC4\\u7D22\\u5F15\\u4F5C\\u4E3A\\u952E\"}),\"\\uFF1A\\u867D\\u7136\\u4F7F\\u7528\\u6570\\u7EC4\\u7D22\\u5F15\\u4F5C\\u4E3A\\u952E\\u53EF\\u80FD\\u5F88\\u8BF1\\u4EBA\\uFF0C\\u4F46\\u6211\\u4EEC\\u4E0D\\u5EFA\\u8BAE\\u8FD9\\u6837\\u505A\\uFF0C\\u56E0\\u4E3A\\u5982\\u679C\\u5217\\u8868\\u88AB\\u91CD\\u65B0\\u6392\\u5E8F\\u6216\\u6DFB\\u52A0/\\u5220\\u9664\\u9879\\u76EE\\uFF0C\\u7D22\\u5F15\\u53EF\\u80FD\\u4F1A\\u53D1\\u751F\\u53D8\\u5316\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u975E\\u552F\\u4E00\\u952E\"}),\"\\uFF1A\\u786E\\u4FDD\\u952E\\u5728\\u6574\\u4E2A\\u5217\\u8868\\u4E2D\\u662F\\u552F\\u4E00\\u7684\\u3002\\u91CD\\u590D\\u7684\\u952E\\u53EF\\u80FD\\u5BFC\\u81F4\\u610F\\u5916\\u884C\\u4E3A\\u548C\\u9519\\u8BEF\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`// \\u9519\\u8BEF\\u505A\\u6CD5\\uFF1A\\u4F7F\\u7528\\u6570\\u7EC4\\u7D22\\u5F15\\u4F5C\\u4E3A\\u952E\n{\n  items.map((item, index) => <ListItem key={index} value={item.value} />);\n}\n\n// \\u597D\\u7684\\u505A\\u6CD5\\uFF1A\\u4F7F\\u7528\\u552F\\u4E00\\u6807\\u8BC6\\u7B26\\u4F5C\\u4E3A\\u952E\n{\n  items.map((item) => <ListItem key={item.id} value={item.value} />);\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/rendering-lists#why-does-react-need-keys\",children:\"React \\u6587\\u6863\\u5173\\u4E8E keys\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318\",children:\"\\u4E3A\\u4EC0\\u4E48 keys \\u5728 React \\u4E2D\\u5F88\\u91CD\\u8981\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/preserving-and-resetting-state\",children:\"\\u5728 React \\u4E2D\\u4FDD\\u7559\\u548C\\u91CD\\u7F6E\\u72B6\\u6001\"})}),`\n`]})]})}function f(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(s,i)})):s(i)}var j=f;return x(I);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var k=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),v=(i,e)=>{for(var t in e)c(i,t,{get:e[t],enumerable:!0})},d=(i,e,t,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!g.call(i,r)&&r!==t&&c(i,r,{get:()=>e[r],enumerable:!(l=p(e,r))||l.enumerable});return i};var x=(i,e,t)=>(t=i!=null?m(y(i)):{},d(e||!i||!i.__esModule?c(t,\"default\",{value:i,enumerable:!0}):t,i)),R=i=>d(c({},\"__esModule\",{value:!0}),i);var h=k((L,a)=>{a.exports=_jsx_runtime});var I={};v(I,{default:()=>s,frontmatter:()=>f});var n=x(h()),f={title:\"React \\u4E2D `key` prop \\u7684\\u4F5C\\u7528\\u662F\\u4EC0\\u4E48\\uFF1F\"};function o(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"key\"}),\" prop \\u7528\\u4E8E\\u552F\\u4E00\\u6807\\u8BC6\\u5217\\u8868\\u4E2D\\u7684\\u5143\\u7D20\\u3002\\u5B83\\u901A\\u8FC7\\u6709\\u6548\\u5730\\u66F4\\u65B0\\u548C\\u91CD\\u65B0\\u6392\\u5E8F\\u5143\\u7D20\\u6765\\u5E2E\\u52A9 React \\u4F18\\u5316\\u6E32\\u67D3\\u3002\\u5982\\u679C\\u6CA1\\u6709\\u552F\\u4E00\\u7684 \",(0,n.jsx)(e.code,{children:\"key\"}),\"\\uFF0CReact \\u53EF\\u80FD\\u4F1A\\u4E0D\\u5FC5\\u8981\\u5730\\u91CD\\u65B0\\u6E32\\u67D3\\u5143\\u7D20\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u6027\\u80FD\\u95EE\\u9898\\u548C\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`{\n  items.map((item) => <ListItem key={item.id} value={item.value} />);\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"React \\u4E2D \",(0,n.jsx)(e.code,{children:\"key\"}),\" prop \\u7684\\u4F5C\\u7528\\u662F\\u4EC0\\u4E48\\uFF1F\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7B80\\u4ECB\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"key\"}),\" prop \\u662F\\u4E00\\u4E2A\\u7279\\u6B8A\\u7684\\u5C5E\\u6027\\uFF0C\\u5F53\\u4F60\\u5728 React \\u4E2D\\u521B\\u5EFA\\u5143\\u7D20\\u5217\\u8868\\u65F6\\uFF0C\\u4F60\\u9700\\u8981\\u5305\\u542B\\u5B83\\u3002\\u5B83\\u5BF9\\u4E8E\\u5E2E\\u52A9 React \\u8BC6\\u522B\\u54EA\\u4E9B\\u9879\\u76EE\\u5DF2\\u66F4\\u6539\\u3001\\u5DF2\\u6DFB\\u52A0\\u6216\\u5DF2\\u5220\\u9664\\u81F3\\u5173\\u91CD\\u8981\\uFF0C\\u4ECE\\u800C\\u4F18\\u5316\\u6E32\\u67D3\\u8FC7\\u7A0B\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4E3A\\u4EC0\\u4E48 \",(0,n.jsx)(e.code,{children:\"key\"}),\" \\u5F88\\u91CD\\u8981\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u9AD8\\u6548\\u66F4\\u65B0\"}),\"\\uFF1AReact \\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"key\"}),\" prop \\u6765\\u8DDF\\u8E2A\\u5143\\u7D20\\u3002\\u5F53\\u5217\\u8868\\u7684\\u72B6\\u6001\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0CReact \\u53EF\\u4EE5\\u5FEB\\u901F\\u786E\\u5B9A\\u54EA\\u4E9B\\u9879\\u76EE\\u9700\\u8981\\u91CD\\u65B0\\u6E32\\u67D3\\u3001\\u6DFB\\u52A0\\u6216\\u5220\\u9664\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u907F\\u514D\\u9519\\u8BEF\"}),\"\\uFF1A\\u5982\\u679C\\u6CA1\\u6709\\u552F\\u4E00\\u7684\\u952E\\uFF0CReact \\u53EF\\u80FD\\u4F1A\\u4E0D\\u5FC5\\u8981\\u5730\\u6216\\u9519\\u8BEF\\u5730\\u91CD\\u65B0\\u6E32\\u67D3\\u5143\\u7D20\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u51FA\\u73B0\\u6F5C\\u5728\\u7684\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6027\\u80FD\\u4F18\\u5316\"}),\"\\uFF1A\\u901A\\u8FC7\\u4F7F\\u7528\\u552F\\u4E00\\u7684\\u952E\\uFF0CReact \\u6700\\u5C0F\\u5316\\u4E86 DOM \\u64CD\\u4F5C\\u7684\\u6570\\u91CF\\uFF0C\\u4F7F\\u4F60\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u66F4\\u5FEB\\u3001\\u66F4\\u9AD8\\u6548\\u3002\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u5982\\u4F55\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"key\"}),\" prop\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u6E32\\u67D3\\u5143\\u7D20\\u5217\\u8868\\u65F6\\uFF0C\\u4F60\\u5E94\\u8BE5\\u4E3A\\u6BCF\\u4E2A\\u5143\\u7D20\\u63D0\\u4F9B\\u4E00\\u4E2A\\u552F\\u4E00\\u7684 \",(0,n.jsx)(e.code,{children:\"key\"}),\"\\u3002\\u6B64\\u952E\\u5E94\\u8BE5\\u662F\\u7A33\\u5B9A\\u7684\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4E0D\\u5E94\\u5728\\u6E32\\u67D3\\u4E4B\\u95F4\\u66F4\\u6539\\u3002\\u901A\\u5E38\\uFF0C\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528\\u6570\\u636E\\u4E2D\\u7684\\u552F\\u4E00\\u6807\\u8BC6\\u7B26\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"id\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const items = [\n  { id: 1, value: 'Item 1' },\n  { id: 2, value: 'Item 2' },\n  { id: 3, value: 'Item 3' },\n];\n\nfunction ItemList() {\n  return (\n    <ul>\n      {items.map((item) => (\n        <ListItem key={item.id} value={item.value} />\n      ))}\n    </ul>\n  );\n}\n\nfunction ListItem({ value }) {\n  return <li>{value}</li>;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5E38\\u89C1\\u9519\\u8BEF\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4F7F\\u7528\\u6570\\u7EC4\\u7D22\\u5F15\\u4F5C\\u4E3A\\u952E\"}),\"\\uFF1A\\u867D\\u7136\\u4F7F\\u7528\\u6570\\u7EC4\\u7D22\\u5F15\\u4F5C\\u4E3A\\u952E\\u53EF\\u80FD\\u5F88\\u8BF1\\u4EBA\\uFF0C\\u4F46\\u6211\\u4EEC\\u4E0D\\u5EFA\\u8BAE\\u8FD9\\u6837\\u505A\\uFF0C\\u56E0\\u4E3A\\u5982\\u679C\\u5217\\u8868\\u88AB\\u91CD\\u65B0\\u6392\\u5E8F\\u6216\\u6DFB\\u52A0/\\u5220\\u9664\\u9879\\u76EE\\uFF0C\\u7D22\\u5F15\\u53EF\\u80FD\\u4F1A\\u53D1\\u751F\\u53D8\\u5316\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u975E\\u552F\\u4E00\\u952E\"}),\"\\uFF1A\\u786E\\u4FDD\\u952E\\u5728\\u6574\\u4E2A\\u5217\\u8868\\u4E2D\\u662F\\u552F\\u4E00\\u7684\\u3002\\u91CD\\u590D\\u7684\\u952E\\u53EF\\u80FD\\u5BFC\\u81F4\\u610F\\u5916\\u884C\\u4E3A\\u548C\\u9519\\u8BEF\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`// \\u9519\\u8BEF\\u505A\\u6CD5\\uFF1A\\u4F7F\\u7528\\u6570\\u7EC4\\u7D22\\u5F15\\u4F5C\\u4E3A\\u952E\n{\n  items.map((item, index) => <ListItem key={index} value={item.value} />);\n}\n\n// \\u597D\\u7684\\u505A\\u6CD5\\uFF1A\\u4F7F\\u7528\\u552F\\u4E00\\u6807\\u8BC6\\u7B26\\u4F5C\\u4E3A\\u952E\n{\n  items.map((item) => <ListItem key={item.id} value={item.value} />);\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/rendering-lists#why-does-react-need-keys\",children:\"React \\u6587\\u6863\\u5173\\u4E8E keys\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318\",children:\"\\u4E3A\\u4EC0\\u4E48 keys \\u5728 React \\u4E2D\\u5F88\\u91CD\\u8981\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/preserving-and-resetting-state\",children:\"\\u5728 React \\u4E2D\\u4FDD\\u7559\\u548C\\u91CD\\u7F6E\\u72B6\\u6001\"})}),`\n`]})]})}function s(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(o,{...i})}):o(i)}return R(I);})();\n;return Component;"
 }
\ No newline at end of file
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 4dd1f2bcb..2ae705408 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-purpose-of-the-new-keyword/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var o in e)c(t,o,{get:e[o],enumerable:!0})},s=(t,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!w.call(t,r)&&r!==o&&c(t,r,{get:()=>e[r],enumerable:!(i=p(e,r))||i.enumerable});return t};var f=(t,e,o)=>(o=t!=null?d(m(t)):{},s(e||!t||!t.__esModule?c(o,\"default\",{value:t,enumerable:!0}):o,t)),j=t=>s(c({},\"__esModule\",{value:!0}),t);var l=g((C,a)=>{a.exports=_jsx_runtime});var T={};y(T,{default:()=>k,frontmatter:()=>b});var n=f(l()),b={title:\"What is the purpose of the `new` keyword?\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",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 \",(0,n.jsx)(e.code,{children:\"new\"}),\" keyword in JavaScript is used to create an instance of a user-defined object type or one of the built-in object types that has a constructor function. When you use \",(0,n.jsx)(e.code,{children:\"new\"}),\", it does four things: it creates a new object, sets the prototype, binds \",(0,n.jsx)(e.code,{children:\"this\"}),\" to the new object, and returns the new object.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst person1 = new Person('Alice');\nconsole.log(person1.name); // Alice\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"The purpose of the \",(0,n.jsx)(e.code,{children:\"new\"}),\" keyword\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Creating a new object\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"new\"}),\" keyword is used to create a new instance of an object. When you call a constructor function with \",(0,n.jsx)(e.code,{children:\"new\"}),\", it creates a new object.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Car(model) {\n  this.model = model;\n}\n\nconst myCar = new Car('Toyota');\nconsole.log(myCar.model); // Toyota\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Setting the prototype\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The new object\\u2019s internal \",(0,n.jsx)(e.code,{children:\"[[Prototype]]\"}),\" property is set to the constructor function\\u2019s \",(0,n.jsx)(e.code,{children:\"prototype\"}),\" property. This allows the new object to inherit properties and methods from the constructor\\u2019s prototype.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Animal(type) {\n  this.type = type;\n}\n\nAnimal.prototype.speak = function () {\n  console.log(\\`\\${this.type} makes a sound\\`);\n};\n\nconst dog = new Animal('Dog');\ndog.speak(); // Dog makes a sound\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Binding \",(0,n.jsx)(e.code,{children:\"this\"}),\" to the new object\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Inside the constructor function, \",(0,n.jsx)(e.code,{children:\"this\"}),\" refers to the new object that is being created. This allows you to add properties and methods to the new object.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Book(title) {\n  this.title = title;\n}\n\nconst myBook = new Book('JavaScript Essentials');\nconsole.log(myBook.title); // JavaScript Essentials\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Returning the new object\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"new\"}),\" keyword implicitly returns the new object created by the constructor function. If the constructor function explicitly returns an object, that object will be returned instead.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Gadget(name) {\n  this.name = name;\n  return { type: 'Electronic' };\n}\n\nconst myGadget = new Gadget('Smartphone');\nconsole.log(myGadget.type); // Electronic\nconsole.log(myGadget.name); // undefined\n`})}),`\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/Web/JavaScript/Reference/Operators/new\",children:\"MDN Web Docs: new operator\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/constructor-new\",children:'JavaScript.info: Constructor, operator \"new\"'})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://eloquentjavascript.net/06_object.html#h_XTmO7z7MPq\",children:\"Eloquent JavaScript: Constructors\"})}),`\n`]})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var k=v;return j(T);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var o in e)c(t,o,{get:e[o],enumerable:!0})},s=(t,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!y.call(t,r)&&r!==o&&c(t,r,{get:()=>e[r],enumerable:!(i=u(e,r))||i.enumerable});return t};var j=(t,e,o)=>(o=t!=null?p(w(t)):{},s(e||!t||!t.__esModule?c(o,\"default\",{value:t,enumerable:!0}):o,t)),b=t=>s(c({},\"__esModule\",{value:!0}),t);var l=g((x,a)=>{a.exports=_jsx_runtime});var k={};f(k,{default:()=>d,frontmatter:()=>v});var n=j(l()),v={title:\"What is the purpose of the `new` keyword?\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...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 \",(0,n.jsx)(e.code,{children:\"new\"}),\" keyword in JavaScript is used to create an instance of a user-defined object type or one of the built-in object types that has a constructor function. When you use \",(0,n.jsx)(e.code,{children:\"new\"}),\", it does four things: it creates a new object, sets the prototype, binds \",(0,n.jsx)(e.code,{children:\"this\"}),\" to the new object, and returns the new object.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst person1 = new Person('Alice');\nconsole.log(person1.name); // Alice\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"The purpose of the \",(0,n.jsx)(e.code,{children:\"new\"}),\" keyword\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Creating a new object\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"new\"}),\" keyword is used to create a new instance of an object. When you call a constructor function with \",(0,n.jsx)(e.code,{children:\"new\"}),\", it creates a new object.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Car(model) {\n  this.model = model;\n}\n\nconst myCar = new Car('Toyota');\nconsole.log(myCar.model); // Toyota\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Setting the prototype\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The new object\\u2019s internal \",(0,n.jsx)(e.code,{children:\"[[Prototype]]\"}),\" property is set to the constructor function\\u2019s \",(0,n.jsx)(e.code,{children:\"prototype\"}),\" property. This allows the new object to inherit properties and methods from the constructor\\u2019s prototype.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Animal(type) {\n  this.type = type;\n}\n\nAnimal.prototype.speak = function () {\n  console.log(\\`\\${this.type} makes a sound\\`);\n};\n\nconst dog = new Animal('Dog');\ndog.speak(); // Dog makes a sound\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Binding \",(0,n.jsx)(e.code,{children:\"this\"}),\" to the new object\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Inside the constructor function, \",(0,n.jsx)(e.code,{children:\"this\"}),\" refers to the new object that is being created. This allows you to add properties and methods to the new object.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Book(title) {\n  this.title = title;\n}\n\nconst myBook = new Book('JavaScript Essentials');\nconsole.log(myBook.title); // JavaScript Essentials\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Returning the new object\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"new\"}),\" keyword implicitly returns the new object created by the constructor function. If the constructor function explicitly returns an object, that object will be returned instead.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function Gadget(name) {\n  this.name = name;\n  return { type: 'Electronic' };\n}\n\nconst myGadget = new Gadget('Smartphone');\nconsole.log(myGadget.type); // Electronic\nconsole.log(myGadget.name); // undefined\n`})}),`\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/Web/JavaScript/Reference/Operators/new\",children:\"MDN Web Docs: new operator\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/constructor-new\",children:'JavaScript.info: Constructor, operator \"new\"'})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://eloquentjavascript.net/06_object.html#h_XTmO7z7MPq\",children:\"Eloquent JavaScript: Constructors\"})}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return b(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-new-keyword/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-new-keyword/zh-CN.json
index ac2a48105..20312c8a9 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-new-keyword/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-new-keyword/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-purpose-of-the-new-keyword/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),f=(o,n)=>{for(var t in n)r(o,t,{get:n[t],enumerable:!0})},i=(o,n,t,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of m(n))!g.call(o,c)&&c!==t&&r(o,c,{get:()=>n[c],enumerable:!(l=p(n,c))||l.enumerable});return o};var w=(o,n,t)=>(t=o!=null?h(u(o)):{},i(n||!o||!o.__esModule?r(t,\"default\",{value:o,enumerable:!0}):t,o)),j=o=>i(r({},\"__esModule\",{value:!0}),o);var s=y((S,a)=>{a.exports=_jsx_runtime});var k={};f(k,{default:()=>_,frontmatter:()=>v});var e=w(s()),v={title:\"new \\u5173\\u952E\\u5B57\\u7684\\u7528\\u9014\\u662F\\u4EC0\\u4E48\\uFF1F\"};function d(o){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u7528\\u4E8E\\u521B\\u5EFA\\u7528\\u6237\\u5B9A\\u4E49\\u7684\\u5BF9\\u8C61\\u7C7B\\u578B\\u6216\\u5177\\u6709\\u6784\\u9020\\u51FD\\u6570\\u7684\\u5185\\u7F6E\\u5BF9\\u8C61\\u7C7B\\u578B\\u7684\\u5B9E\\u4F8B\\u3002 \\u5F53\\u4F60\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"new\"}),\" \\u65F6\\uFF0C\\u5B83\\u4F1A\\u505A\\u56DB\\u4EF6\\u4E8B\\uFF1A\\u5B83\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5BF9\\u8C61\\uFF0C\\u8BBE\\u7F6E\\u539F\\u578B\\uFF0C\\u5C06 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7ED1\\u5B9A\\u5230\\u65B0\\u5BF9\\u8C61\\uFF0C\\u5E76\\u8FD4\\u56DE\\u65B0\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst person1 = new Person('Alice');\nconsole.log(person1.name); // Alice\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsxs)(n.h2,{children:[(0,e.jsx)(n.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u7684\\u7528\\u9014\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5BF9\\u8C61\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u7528\\u4E8E\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u65B0\\u5B9E\\u4F8B\\u3002 \\u5F53\\u4F60\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"new\"}),\" \\u8C03\\u7528\\u6784\\u9020\\u51FD\\u6570\\u65F6\\uFF0C\\u5B83\\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Car(model) {\n  this.model = model;\n}\n\nconst myCar = new Car('Toyota');\nconsole.log(myCar.model); // Toyota\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BBE\\u7F6E\\u539F\\u578B\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u65B0\\u5BF9\\u8C61\\u7684\\u5185\\u90E8 \",(0,e.jsx)(n.code,{children:\"[[Prototype]]\"}),\" \\u5C5E\\u6027\\u88AB\\u8BBE\\u7F6E\\u4E3A\\u6784\\u9020\\u51FD\\u6570\\u7684 \",(0,e.jsx)(n.code,{children:\"prototype\"}),\" \\u5C5E\\u6027\\u3002 \\u8FD9\\u5141\\u8BB8\\u65B0\\u5BF9\\u8C61\\u4ECE\\u6784\\u9020\\u51FD\\u6570\\u7684\\u539F\\u578B\\u7EE7\\u627F\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Animal(type) {\n  this.type = type;\n}\n\nAnimal.prototype.speak = function () {\n  console.log(\\`\\${this.type} makes a sound\\`);\n};\n\nconst dog = new Animal('Dog');\ndog.speak(); // Dog makes a sound\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u5C06 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7ED1\\u5B9A\\u5230\\u65B0\\u5BF9\\u8C61\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6784\\u9020\\u51FD\\u6570\\u5185\\u90E8\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F\\u6B63\\u5728\\u521B\\u5EFA\\u7684\\u65B0\\u5BF9\\u8C61\\u3002 \\u8FD9\\u5141\\u8BB8\\u4F60\\u5C06\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u6DFB\\u52A0\\u5230\\u65B0\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Book(title) {\n  this.title = title;\n}\n\nconst myBook = new Book('JavaScript Essentials');\nconsole.log(myBook.title); // JavaScript Essentials\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8FD4\\u56DE\\u65B0\\u5BF9\\u8C61\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u9690\\u5F0F\\u5730\\u8FD4\\u56DE\\u7531\\u6784\\u9020\\u51FD\\u6570\\u521B\\u5EFA\\u7684\\u65B0\\u5BF9\\u8C61\\u3002 \\u5982\\u679C\\u6784\\u9020\\u51FD\\u6570\\u663E\\u5F0F\\u5730\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u5219\\u5C06\\u8FD4\\u56DE\\u8BE5\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Gadget(name) {\n  this.name = name;\n  return { type: 'Electronic' };\n}\n\nconst myGadget = new Gadget('Smartphone');\nconsole.log(myGadget.type); // Electronic\nconsole.log(myGadget.name); // undefined\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new\",children:\"MDN Web Docs: new operator\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/constructor-new\",children:'JavaScript.info: Constructor, operator \"new\"'})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/06_object.html#h_XTmO7z7MPq\",children:\"Eloquent JavaScript: Constructors\"})}),`\n`]})]})}function x(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,Object.assign({},o,{children:(0,e.jsx)(d,o)})):d(o)}var _=x;return j(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),w=(o,n)=>{for(var t in n)r(o,t,{get:n[t],enumerable:!0})},i=(o,n,t,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of u(n))!y.call(o,c)&&c!==t&&r(o,c,{get:()=>n[c],enumerable:!(l=m(n,c))||l.enumerable});return o};var v=(o,n,t)=>(t=o!=null?p(g(o)):{},i(n||!o||!o.__esModule?r(t,\"default\",{value:o,enumerable:!0}):t,o)),j=o=>i(r({},\"__esModule\",{value:!0}),o);var d=f((C,a)=>{a.exports=_jsx_runtime});var _={};w(_,{default:()=>h,frontmatter:()=>x});var e=v(d()),x={title:\"new \\u5173\\u952E\\u5B57\\u7684\\u7528\\u9014\\u662F\\u4EC0\\u4E48\\uFF1F\"};function s(o){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u7528\\u4E8E\\u521B\\u5EFA\\u7528\\u6237\\u5B9A\\u4E49\\u7684\\u5BF9\\u8C61\\u7C7B\\u578B\\u6216\\u5177\\u6709\\u6784\\u9020\\u51FD\\u6570\\u7684\\u5185\\u7F6E\\u5BF9\\u8C61\\u7C7B\\u578B\\u7684\\u5B9E\\u4F8B\\u3002 \\u5F53\\u4F60\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"new\"}),\" \\u65F6\\uFF0C\\u5B83\\u4F1A\\u505A\\u56DB\\u4EF6\\u4E8B\\uFF1A\\u5B83\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5BF9\\u8C61\\uFF0C\\u8BBE\\u7F6E\\u539F\\u578B\\uFF0C\\u5C06 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7ED1\\u5B9A\\u5230\\u65B0\\u5BF9\\u8C61\\uFF0C\\u5E76\\u8FD4\\u56DE\\u65B0\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Person(name) {\n  this.name = name;\n}\n\nconst person1 = new Person('Alice');\nconsole.log(person1.name); // Alice\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsxs)(n.h2,{children:[(0,e.jsx)(n.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u7684\\u7528\\u9014\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5BF9\\u8C61\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u7528\\u4E8E\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u65B0\\u5B9E\\u4F8B\\u3002 \\u5F53\\u4F60\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"new\"}),\" \\u8C03\\u7528\\u6784\\u9020\\u51FD\\u6570\\u65F6\\uFF0C\\u5B83\\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Car(model) {\n  this.model = model;\n}\n\nconst myCar = new Car('Toyota');\nconsole.log(myCar.model); // Toyota\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8BBE\\u7F6E\\u539F\\u578B\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u65B0\\u5BF9\\u8C61\\u7684\\u5185\\u90E8 \",(0,e.jsx)(n.code,{children:\"[[Prototype]]\"}),\" \\u5C5E\\u6027\\u88AB\\u8BBE\\u7F6E\\u4E3A\\u6784\\u9020\\u51FD\\u6570\\u7684 \",(0,e.jsx)(n.code,{children:\"prototype\"}),\" \\u5C5E\\u6027\\u3002 \\u8FD9\\u5141\\u8BB8\\u65B0\\u5BF9\\u8C61\\u4ECE\\u6784\\u9020\\u51FD\\u6570\\u7684\\u539F\\u578B\\u7EE7\\u627F\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Animal(type) {\n  this.type = type;\n}\n\nAnimal.prototype.speak = function () {\n  console.log(\\`\\${this.type} makes a sound\\`);\n};\n\nconst dog = new Animal('Dog');\ndog.speak(); // Dog makes a sound\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u5C06 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7ED1\\u5B9A\\u5230\\u65B0\\u5BF9\\u8C61\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6784\\u9020\\u51FD\\u6570\\u5185\\u90E8\\uFF0C\",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u6307\\u7684\\u662F\\u6B63\\u5728\\u521B\\u5EFA\\u7684\\u65B0\\u5BF9\\u8C61\\u3002 \\u8FD9\\u5141\\u8BB8\\u4F60\\u5C06\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u6DFB\\u52A0\\u5230\\u65B0\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Book(title) {\n  this.title = title;\n}\n\nconst myBook = new Book('JavaScript Essentials');\nconsole.log(myBook.title); // JavaScript Essentials\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8FD4\\u56DE\\u65B0\\u5BF9\\u8C61\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"new\"}),\" \\u5173\\u952E\\u5B57\\u9690\\u5F0F\\u5730\\u8FD4\\u56DE\\u7531\\u6784\\u9020\\u51FD\\u6570\\u521B\\u5EFA\\u7684\\u65B0\\u5BF9\\u8C61\\u3002 \\u5982\\u679C\\u6784\\u9020\\u51FD\\u6570\\u663E\\u5F0F\\u5730\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u5219\\u5C06\\u8FD4\\u56DE\\u8BE5\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function Gadget(name) {\n  this.name = name;\n  return { type: 'Electronic' };\n}\n\nconst myGadget = new Gadget('Smartphone');\nconsole.log(myGadget.type); // Electronic\nconsole.log(myGadget.name); // undefined\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new\",children:\"MDN Web Docs: new operator\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/constructor-new\",children:'JavaScript.info: Constructor, operator \"new\"'})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/06_object.html#h_XTmO7z7MPq\",children:\"Eloquent JavaScript: Constructors\"})}),`\n`]})]})}function h(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,{...o,children:(0,e.jsx)(s,{...o})}):s(o)}return j(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-switch-statement/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-switch-statement/en-US.json
index c841febb7..66f185823 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-switch-statement/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-switch-statement/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-purpose-of-the-switch-statement/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var c in e)a(t,c,{get:e[c],enumerable:!0})},o=(t,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!f.call(t,s)&&s!==c&&a(t,s,{get:()=>e[s],enumerable:!(i=u(e,s))||i.enumerable});return t};var g=(t,e,c)=>(c=t!=null?d(m(t)):{},o(e||!t||!t.__esModule?a(c,\"default\",{value:t,enumerable:!0}):c,t)),w=t=>o(a({},\"__esModule\",{value:!0}),t);var r=x((I,l)=>{l.exports=_jsx_runtime});var j={};b(j,{default:()=>y,frontmatter:()=>v});var n=g(r()),v={title:\"What is the purpose of the `switch` statement?\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",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 \",(0,n.jsx)(e.code,{children:\"switch\"}),\" statement is used to execute one block of code among many based on the value of an expression. It is an alternative to using multiple \",(0,n.jsx)(e.code,{children:\"if...else if\"}),\" statements. The \",(0,n.jsx)(e.code,{children:\"switch\"}),\" statement evaluates an expression, matches the expression's value to a \",(0,n.jsx)(e.code,{children:\"case\"}),\" label, and executes the associated block of code. If no \",(0,n.jsx)(e.code,{children:\"case\"}),\" matches, the \",(0,n.jsx)(e.code,{children:\"default\"}),\" block is executed.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`switch (expression) {\n  case value1:\n    // code to be executed if expression === value1\n    break;\n  case value2:\n    // code to be executed if expression === value2\n    break;\n  default:\n  // code to be executed if no case matches\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Purpose of the \",(0,n.jsx)(e.code,{children:\"switch\"}),\" statement\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Simplifies multiple conditional checks\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"switch\"}),\" statement provides a cleaner and more readable way to handle multiple conditional checks compared to using multiple \",(0,n.jsx)(e.code,{children:\"if...else if\"}),\" statements. It is particularly useful when you need to compare the same expression against different values.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax and structure\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The basic syntax of a \",(0,n.jsx)(e.code,{children:\"switch\"}),\" statement is as follows:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`switch (expression) {\n  case value1:\n    // code to be executed if expression === value1\n    break;\n  case value2:\n    // code to be executed if expression === value2\n    break;\n  // more cases...\n  default:\n  // code to be executed if no case matches\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"How it works\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Expression evaluation\"}),\": The \",(0,n.jsx)(e.code,{children:\"switch\"}),\" statement evaluates the expression once.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Case matching\"}),\": It compares the result of the expression to the values of each \",(0,n.jsx)(e.code,{children:\"case\"}),\" label.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Code execution\"}),\": If a match is found, the code associated with that \",(0,n.jsx)(e.code,{children:\"case\"}),\" is executed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Break statement\"}),\": The \",(0,n.jsx)(e.code,{children:\"break\"}),\" statement is used to exit the \",(0,n.jsx)(e.code,{children:\"switch\"}),\" block. If omitted, the next \",(0,n.jsx)(e.code,{children:\"case\"}),\" will be executed (fall-through behavior).\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Default case\"}),\": The \",(0,n.jsx)(e.code,{children:\"default\"}),\" case is optional and executes if no matching \",(0,n.jsx)(e.code,{children:\"case\"}),\" is found.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here is an example of a \",(0,n.jsx)(e.code,{children:\"switch\"}),\" statement in action:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let fruit = 'apple';\n\nswitch (fruit) {\n  case 'banana':\n    console.log('Banana is yellow.');\n    break;\n  case 'apple':\n    console.log('Apple is red.');\n    break;\n  case 'grape':\n    console.log('Grape is purple.');\n    break;\n  default:\n    console.log('Unknown fruit.');\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the output will be \",(0,n.jsx)(e.code,{children:\"Apple is red.\"}),\" because the value of \",(0,n.jsx)(e.code,{children:\"fruit\"}),\" matches the \",(0,n.jsx)(e.code,{children:\"case 'apple'\"}),\".\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Fall-through behavior\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"If the \",(0,n.jsx)(e.code,{children:\"break\"}),\" statement is omitted, the \",(0,n.jsx)(e.code,{children:\"switch\"}),\" statement will continue to execute the subsequent \",(0,n.jsx)(e.code,{children:\"case\"}),\" blocks until it encounters a \",(0,n.jsx)(e.code,{children:\"break\"}),\" or the end of the \",(0,n.jsx)(e.code,{children:\"switch\"}),\" block. This is known as fall-through behavior.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let day = 2;\n\nswitch (day) {\n  case 1:\n    console.log('Monday');\n  case 2:\n    console.log('Tuesday');\n  case 3:\n    console.log('Wednesday');\n  default:\n    console.log('Unknown day');\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"In this example, the output will be:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{children:`Tuesday\nWednesday\nUnknown day\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"This happens because there are no \",(0,n.jsx)(e.code,{children:\"break\"}),\" statements to stop the execution after the \",(0,n.jsx)(e.code,{children:\"case 2\"}),\" block.\"]}),`\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/Web/JavaScript/Reference/Statements/switch\",children:\"MDN Web Docs: switch statement\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/switch\",children:\"JavaScript.info: switch statement\"})}),`\n`]})]})}function k(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var y=k;return w(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var c in e)a(t,c,{get:e[c],enumerable:!0})},o=(t,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!x.call(t,s)&&s!==c&&a(t,s,{get:()=>e[s],enumerable:!(i=p(e,s))||i.enumerable});return t};var w=(t,e,c)=>(c=t!=null?u(f(t)):{},o(e||!t||!t.__esModule?a(c,\"default\",{value:t,enumerable:!0}):c,t)),v=t=>o(a({},\"__esModule\",{value:!0}),t);var r=b((j,l)=>{l.exports=_jsx_runtime});var y={};g(y,{default:()=>d,frontmatter:()=>k});var n=w(r()),k={title:\"What is the purpose of the `switch` statement?\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...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 \",(0,n.jsx)(e.code,{children:\"switch\"}),\" statement is used to execute one block of code among many based on the value of an expression. It is an alternative to using multiple \",(0,n.jsx)(e.code,{children:\"if...else if\"}),\" statements. The \",(0,n.jsx)(e.code,{children:\"switch\"}),\" statement evaluates an expression, matches the expression's value to a \",(0,n.jsx)(e.code,{children:\"case\"}),\" label, and executes the associated block of code. If no \",(0,n.jsx)(e.code,{children:\"case\"}),\" matches, the \",(0,n.jsx)(e.code,{children:\"default\"}),\" block is executed.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`switch (expression) {\n  case value1:\n    // code to be executed if expression === value1\n    break;\n  case value2:\n    // code to be executed if expression === value2\n    break;\n  default:\n  // code to be executed if no case matches\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Purpose of the \",(0,n.jsx)(e.code,{children:\"switch\"}),\" statement\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Simplifies multiple conditional checks\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"switch\"}),\" statement provides a cleaner and more readable way to handle multiple conditional checks compared to using multiple \",(0,n.jsx)(e.code,{children:\"if...else if\"}),\" statements. It is particularly useful when you need to compare the same expression against different values.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax and structure\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The basic syntax of a \",(0,n.jsx)(e.code,{children:\"switch\"}),\" statement is as follows:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`switch (expression) {\n  case value1:\n    // code to be executed if expression === value1\n    break;\n  case value2:\n    // code to be executed if expression === value2\n    break;\n  // more cases...\n  default:\n  // code to be executed if no case matches\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"How it works\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Expression evaluation\"}),\": The \",(0,n.jsx)(e.code,{children:\"switch\"}),\" statement evaluates the expression once.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Case matching\"}),\": It compares the result of the expression to the values of each \",(0,n.jsx)(e.code,{children:\"case\"}),\" label.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Code execution\"}),\": If a match is found, the code associated with that \",(0,n.jsx)(e.code,{children:\"case\"}),\" is executed.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Break statement\"}),\": The \",(0,n.jsx)(e.code,{children:\"break\"}),\" statement is used to exit the \",(0,n.jsx)(e.code,{children:\"switch\"}),\" block. If omitted, the next \",(0,n.jsx)(e.code,{children:\"case\"}),\" will be executed (fall-through behavior).\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Default case\"}),\": The \",(0,n.jsx)(e.code,{children:\"default\"}),\" case is optional and executes if no matching \",(0,n.jsx)(e.code,{children:\"case\"}),\" is found.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here is an example of a \",(0,n.jsx)(e.code,{children:\"switch\"}),\" statement in action:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let fruit = 'apple';\n\nswitch (fruit) {\n  case 'banana':\n    console.log('Banana is yellow.');\n    break;\n  case 'apple':\n    console.log('Apple is red.');\n    break;\n  case 'grape':\n    console.log('Grape is purple.');\n    break;\n  default:\n    console.log('Unknown fruit.');\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the output will be \",(0,n.jsx)(e.code,{children:\"Apple is red.\"}),\" because the value of \",(0,n.jsx)(e.code,{children:\"fruit\"}),\" matches the \",(0,n.jsx)(e.code,{children:\"case 'apple'\"}),\".\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Fall-through behavior\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"If the \",(0,n.jsx)(e.code,{children:\"break\"}),\" statement is omitted, the \",(0,n.jsx)(e.code,{children:\"switch\"}),\" statement will continue to execute the subsequent \",(0,n.jsx)(e.code,{children:\"case\"}),\" blocks until it encounters a \",(0,n.jsx)(e.code,{children:\"break\"}),\" or the end of the \",(0,n.jsx)(e.code,{children:\"switch\"}),\" block. This is known as fall-through behavior.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let day = 2;\n\nswitch (day) {\n  case 1:\n    console.log('Monday');\n  case 2:\n    console.log('Tuesday');\n  case 3:\n    console.log('Wednesday');\n  default:\n    console.log('Unknown day');\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"In this example, the output will be:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{children:`Tuesday\nWednesday\nUnknown day\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"This happens because there are no \",(0,n.jsx)(e.code,{children:\"break\"}),\" statements to stop the execution after the \",(0,n.jsx)(e.code,{children:\"case 2\"}),\" block.\"]}),`\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/Web/JavaScript/Reference/Statements/switch\",children:\"MDN Web Docs: switch statement\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/switch\",children:\"JavaScript.info: switch statement\"})}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return v(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-switch-statement/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-switch-statement/zh-CN.json
index ef0eb38b7..be7bad828 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-switch-statement/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-switch-statement/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-purpose-of-the-switch-statement/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var t=Object.create;var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),w=(c,e)=>{for(var l in e)d(c,l,{get:e[l],enumerable:!0})},h=(c,e,l,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!g.call(c,r)&&r!==l&&d(c,r,{get:()=>e[r],enumerable:!(i=u(e,r))||i.enumerable});return c};var x=(c,e,l)=>(l=c!=null?t(f(c)):{},h(e||!c||!c.__esModule?d(l,\"default\",{value:c,enumerable:!0}):l,c)),m=c=>h(d({},\"__esModule\",{value:!0}),c);var s=b((D,o)=>{o.exports=_jsx_runtime});var _={};w(_,{default:()=>j,frontmatter:()=>v});var n=x(s()),v={title:\"switch \\u8BED\\u53E5\\u7684\\u7528\\u9014\\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"switch \\u8BED\\u53E5\\u7528\\u4E8E\\u6839\\u636E\\u8868\\u8FBE\\u5F0F\\u7684\\u503C\\u6267\\u884C\\u591A\\u4E2A\\u4EE3\\u7801\\u5757\\u4E2D\\u7684\\u4E00\\u4E2A\\u3002\\u5B83\\u662F\\u4F7F\\u7528\\u591A\\u4E2A \",(0,n.jsx)(e.code,{children:\"if...else if\"}),\" \\u8BED\\u53E5\\u7684\\u66FF\\u4EE3\\u65B9\\u6848\\u3002switch \\u8BED\\u53E5\\u8BA1\\u7B97\\u4E00\\u4E2A\\u8868\\u8FBE\\u5F0F\\uFF0C\\u5C06\\u8868\\u8FBE\\u5F0F\\u7684\\u503C\\u4E0E \",(0,n.jsx)(e.code,{children:\"case\"}),\" \\u6807\\u7B7E\\u5339\\u914D\\uFF0C\\u5E76\\u6267\\u884C\\u76F8\\u5173\\u7684\\u4EE3\\u7801\\u5757\\u3002\\u5982\\u679C\\u6CA1\\u6709 \",(0,n.jsx)(e.code,{children:\"case\"}),\" \\u5339\\u914D\\uFF0C\\u5219\\u6267\\u884C \",(0,n.jsx)(e.code,{children:\"default\"}),\" \\u5757\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`switch (expression) {\n  case value1:\n    // code to be executed if expression === value1\n    break;\n  case value2:\n    // code to be executed if expression === value2\n    break;\n  default:\n  // code to be executed if no case matches\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"switch\"}),\" \\u8BED\\u53E5\\u7684\\u7528\\u9014\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7B80\\u5316\\u591A\\u4E2A\\u6761\\u4EF6\\u68C0\\u67E5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E0E\\u4F7F\\u7528\\u591A\\u4E2A \",(0,n.jsx)(e.code,{children:\"if...else if\"}),\" \\u8BED\\u53E5\\u76F8\\u6BD4\\uFF0C\",(0,n.jsx)(e.code,{children:\"switch\"}),\" \\u8BED\\u53E5\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u6E05\\u6670\\u3001\\u66F4\\u6613\\u8BFB\\u7684\\u65B9\\u5F0F\\u6765\\u5904\\u7406\\u591A\\u4E2A\\u6761\\u4EF6\\u68C0\\u67E5\\u3002\\u5F53\\u60A8\\u9700\\u8981\\u5C06\\u540C\\u4E00\\u8868\\u8FBE\\u5F0F\\u4E0E\\u4E0D\\u540C\\u7684\\u503C\\u8FDB\\u884C\\u6BD4\\u8F83\\u65F6\\uFF0C\\u5B83\\u7279\\u522B\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BED\\u6CD5\\u548C\\u7ED3\\u6784\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4EE5\\u4E0B\\u662F \",(0,n.jsx)(e.code,{children:\"switch\"}),\" \\u8BED\\u53E5\\u7684\\u57FA\\u672C\\u8BED\\u6CD5\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`switch (expression) {\n  case value1:\n    // code to be executed if expression === value1\n    break;\n  case value2:\n    // code to be executed if expression === value2\n    break;\n  // more cases...\n  default:\n  // code to be executed if no case matches\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8868\\u8FBE\\u5F0F\\u6C42\\u503C\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"switch\"}),\" \\u8BED\\u53E5\\u8BA1\\u7B97\\u4E00\\u6B21\\u8868\\u8FBE\\u5F0F\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6848\\u4F8B\\u5339\\u914D\"}),\"\\uFF1A\\u5B83\\u5C06\\u8868\\u8FBE\\u5F0F\\u7684\\u7ED3\\u679C\\u4E0E\\u6BCF\\u4E2A \",(0,n.jsx)(e.code,{children:\"case\"}),\" \\u6807\\u7B7E\\u7684\\u503C\\u8FDB\\u884C\\u6BD4\\u8F83\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4EE3\\u7801\\u6267\\u884C\"}),\"\\uFF1A\\u5982\\u679C\\u627E\\u5230\\u5339\\u914D\\u9879\\uFF0C\\u5219\\u6267\\u884C\\u4E0E\\u8BE5 \",(0,n.jsx)(e.code,{children:\"case\"}),\" \\u5173\\u8054\\u7684\\u4EE3\\u7801\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Break \\u8BED\\u53E5\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"break\"}),\" \\u8BED\\u53E5\\u7528\\u4E8E\\u9000\\u51FA \",(0,n.jsx)(e.code,{children:\"switch\"}),\" \\u5757\\u3002\\u5982\\u679C\\u7701\\u7565\\uFF0C\\u5C06\\u6267\\u884C\\u4E0B\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"case\"}),\"\\uFF08fall-through \\u884C\\u4E3A\\uFF09\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Default \\u6848\\u4F8B\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"default\"}),\" \\u6848\\u4F8B\\u662F\\u53EF\\u9009\\u7684\\uFF0C\\u5982\\u679C\\u672A\\u627E\\u5230\\u5339\\u914D\\u7684 \",(0,n.jsx)(e.code,{children:\"case\"}),\"\\uFF0C\\u5219\\u6267\\u884C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u662F\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"switch\"}),\" \\u8BED\\u53E5\\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let fruit = 'apple';\n\nswitch (fruit) {\n  case 'banana':\n    console.log('\\u9999\\u8549\\u662F\\u9EC4\\u8272\\u7684\\u3002');\n    break;\n  case 'apple':\n    console.log('\\u82F9\\u679C\\u662F\\u7EA2\\u8272\\u7684\\u3002');\n    break;\n  case 'grape':\n    console.log('\\u8461\\u8404\\u662F\\u7D2B\\u8272\\u7684\\u3002');\n    break;\n  default:\n    console.log('\\u672A\\u77E5\\u6C34\\u679C\\u3002');\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u8F93\\u51FA\\u5C06\\u662F \",(0,n.jsx)(e.code,{children:\"Apple is red.\"}),\"\\uFF0C\\u56E0\\u4E3A \",(0,n.jsx)(e.code,{children:\"fruit\"}),\" \\u7684\\u503C\\u4E0E \",(0,n.jsx)(e.code,{children:\"case 'apple'\"}),\" \\u5339\\u914D\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Fall-through \\u884C\\u4E3A\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u7701\\u7565 \",(0,n.jsx)(e.code,{children:\"break\"}),\" \\u8BED\\u53E5\\uFF0C\",(0,n.jsx)(e.code,{children:\"switch\"}),\" \\u8BED\\u53E5\\u5C06\\u7EE7\\u7EED\\u6267\\u884C\\u540E\\u7EED\\u7684 \",(0,n.jsx)(e.code,{children:\"case\"}),\" \\u5757\\uFF0C\\u76F4\\u5230\\u9047\\u5230 \",(0,n.jsx)(e.code,{children:\"break\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"switch\"}),\" \\u5757\\u7684\\u672B\\u5C3E\\u3002\\u8FD9\\u88AB\\u79F0\\u4E3A fall-through \\u884C\\u4E3A\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let day = 2;\n\nswitch (day) {\n  case 1:\n    console.log('\\u661F\\u671F\\u4E00');\n  case 2:\n    console.log('\\u661F\\u671F\\u4E8C');\n  case 3:\n    console.log('\\u661F\\u671F\\u4E09');\n  default:\n    console.log('\\u672A\\u77E5\\u65E5\\u671F');\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u8F93\\u51FA\\u5C06\\u662F\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{children:`Tuesday\nWednesday\nUnknown day\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u53D1\\u751F\\u8FD9\\u79CD\\u60C5\\u51B5\\u662F\\u56E0\\u4E3A\\u5728 \",(0,n.jsx)(e.code,{children:\"case 2\"}),\" \\u5757\\u4E4B\\u540E\\u6CA1\\u6709 \",(0,n.jsx)(e.code,{children:\"break\"}),\" \\u8BED\\u53E5\\u6765\\u505C\\u6B62\\u6267\\u884C\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Statements/switch\",children:\"MDN Web Docs: switch statement\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/switch\",children:\"JavaScript.info: switch statement\"})}),`\n`]})]})}function k(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(a,c)})):a(c)}var j=k;return m(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var x=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),b=(c,e)=>{for(var l in e)d(c,l,{get:e[l],enumerable:!0})},h=(c,e,l,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!w.call(c,r)&&r!==l&&d(c,r,{get:()=>e[r],enumerable:!(i=p(e,r))||i.enumerable});return c};var m=(c,e,l)=>(l=c!=null?u(g(c)):{},h(e||!c||!c.__esModule?d(l,\"default\",{value:c,enumerable:!0}):l,c)),v=c=>h(d({},\"__esModule\",{value:!0}),c);var s=x((y,o)=>{o.exports=_jsx_runtime});var j={};b(j,{default:()=>t,frontmatter:()=>k});var n=m(s()),k={title:\"switch \\u8BED\\u53E5\\u7684\\u7528\\u9014\\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"switch \\u8BED\\u53E5\\u7528\\u4E8E\\u6839\\u636E\\u8868\\u8FBE\\u5F0F\\u7684\\u503C\\u6267\\u884C\\u591A\\u4E2A\\u4EE3\\u7801\\u5757\\u4E2D\\u7684\\u4E00\\u4E2A\\u3002\\u5B83\\u662F\\u4F7F\\u7528\\u591A\\u4E2A \",(0,n.jsx)(e.code,{children:\"if...else if\"}),\" \\u8BED\\u53E5\\u7684\\u66FF\\u4EE3\\u65B9\\u6848\\u3002switch \\u8BED\\u53E5\\u8BA1\\u7B97\\u4E00\\u4E2A\\u8868\\u8FBE\\u5F0F\\uFF0C\\u5C06\\u8868\\u8FBE\\u5F0F\\u7684\\u503C\\u4E0E \",(0,n.jsx)(e.code,{children:\"case\"}),\" \\u6807\\u7B7E\\u5339\\u914D\\uFF0C\\u5E76\\u6267\\u884C\\u76F8\\u5173\\u7684\\u4EE3\\u7801\\u5757\\u3002\\u5982\\u679C\\u6CA1\\u6709 \",(0,n.jsx)(e.code,{children:\"case\"}),\" \\u5339\\u914D\\uFF0C\\u5219\\u6267\\u884C \",(0,n.jsx)(e.code,{children:\"default\"}),\" \\u5757\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`switch (expression) {\n  case value1:\n    // code to be executed if expression === value1\n    break;\n  case value2:\n    // code to be executed if expression === value2\n    break;\n  default:\n  // code to be executed if no case matches\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[(0,n.jsx)(e.code,{children:\"switch\"}),\" \\u8BED\\u53E5\\u7684\\u7528\\u9014\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7B80\\u5316\\u591A\\u4E2A\\u6761\\u4EF6\\u68C0\\u67E5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E0E\\u4F7F\\u7528\\u591A\\u4E2A \",(0,n.jsx)(e.code,{children:\"if...else if\"}),\" \\u8BED\\u53E5\\u76F8\\u6BD4\\uFF0C\",(0,n.jsx)(e.code,{children:\"switch\"}),\" \\u8BED\\u53E5\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u6E05\\u6670\\u3001\\u66F4\\u6613\\u8BFB\\u7684\\u65B9\\u5F0F\\u6765\\u5904\\u7406\\u591A\\u4E2A\\u6761\\u4EF6\\u68C0\\u67E5\\u3002\\u5F53\\u60A8\\u9700\\u8981\\u5C06\\u540C\\u4E00\\u8868\\u8FBE\\u5F0F\\u4E0E\\u4E0D\\u540C\\u7684\\u503C\\u8FDB\\u884C\\u6BD4\\u8F83\\u65F6\\uFF0C\\u5B83\\u7279\\u522B\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BED\\u6CD5\\u548C\\u7ED3\\u6784\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4EE5\\u4E0B\\u662F \",(0,n.jsx)(e.code,{children:\"switch\"}),\" \\u8BED\\u53E5\\u7684\\u57FA\\u672C\\u8BED\\u6CD5\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`switch (expression) {\n  case value1:\n    // code to be executed if expression === value1\n    break;\n  case value2:\n    // code to be executed if expression === value2\n    break;\n  // more cases...\n  default:\n  // code to be executed if no case matches\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8868\\u8FBE\\u5F0F\\u6C42\\u503C\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"switch\"}),\" \\u8BED\\u53E5\\u8BA1\\u7B97\\u4E00\\u6B21\\u8868\\u8FBE\\u5F0F\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6848\\u4F8B\\u5339\\u914D\"}),\"\\uFF1A\\u5B83\\u5C06\\u8868\\u8FBE\\u5F0F\\u7684\\u7ED3\\u679C\\u4E0E\\u6BCF\\u4E2A \",(0,n.jsx)(e.code,{children:\"case\"}),\" \\u6807\\u7B7E\\u7684\\u503C\\u8FDB\\u884C\\u6BD4\\u8F83\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4EE3\\u7801\\u6267\\u884C\"}),\"\\uFF1A\\u5982\\u679C\\u627E\\u5230\\u5339\\u914D\\u9879\\uFF0C\\u5219\\u6267\\u884C\\u4E0E\\u8BE5 \",(0,n.jsx)(e.code,{children:\"case\"}),\" \\u5173\\u8054\\u7684\\u4EE3\\u7801\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Break \\u8BED\\u53E5\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"break\"}),\" \\u8BED\\u53E5\\u7528\\u4E8E\\u9000\\u51FA \",(0,n.jsx)(e.code,{children:\"switch\"}),\" \\u5757\\u3002\\u5982\\u679C\\u7701\\u7565\\uFF0C\\u5C06\\u6267\\u884C\\u4E0B\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"case\"}),\"\\uFF08fall-through \\u884C\\u4E3A\\uFF09\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Default \\u6848\\u4F8B\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"default\"}),\" \\u6848\\u4F8B\\u662F\\u53EF\\u9009\\u7684\\uFF0C\\u5982\\u679C\\u672A\\u627E\\u5230\\u5339\\u914D\\u7684 \",(0,n.jsx)(e.code,{children:\"case\"}),\"\\uFF0C\\u5219\\u6267\\u884C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u662F\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"switch\"}),\" \\u8BED\\u53E5\\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let fruit = 'apple';\n\nswitch (fruit) {\n  case 'banana':\n    console.log('\\u9999\\u8549\\u662F\\u9EC4\\u8272\\u7684\\u3002');\n    break;\n  case 'apple':\n    console.log('\\u82F9\\u679C\\u662F\\u7EA2\\u8272\\u7684\\u3002');\n    break;\n  case 'grape':\n    console.log('\\u8461\\u8404\\u662F\\u7D2B\\u8272\\u7684\\u3002');\n    break;\n  default:\n    console.log('\\u672A\\u77E5\\u6C34\\u679C\\u3002');\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u8F93\\u51FA\\u5C06\\u662F \",(0,n.jsx)(e.code,{children:\"Apple is red.\"}),\"\\uFF0C\\u56E0\\u4E3A \",(0,n.jsx)(e.code,{children:\"fruit\"}),\" \\u7684\\u503C\\u4E0E \",(0,n.jsx)(e.code,{children:\"case 'apple'\"}),\" \\u5339\\u914D\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Fall-through \\u884C\\u4E3A\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u7701\\u7565 \",(0,n.jsx)(e.code,{children:\"break\"}),\" \\u8BED\\u53E5\\uFF0C\",(0,n.jsx)(e.code,{children:\"switch\"}),\" \\u8BED\\u53E5\\u5C06\\u7EE7\\u7EED\\u6267\\u884C\\u540E\\u7EED\\u7684 \",(0,n.jsx)(e.code,{children:\"case\"}),\" \\u5757\\uFF0C\\u76F4\\u5230\\u9047\\u5230 \",(0,n.jsx)(e.code,{children:\"break\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"switch\"}),\" \\u5757\\u7684\\u672B\\u5C3E\\u3002\\u8FD9\\u88AB\\u79F0\\u4E3A fall-through \\u884C\\u4E3A\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let day = 2;\n\nswitch (day) {\n  case 1:\n    console.log('\\u661F\\u671F\\u4E00');\n  case 2:\n    console.log('\\u661F\\u671F\\u4E8C');\n  case 3:\n    console.log('\\u661F\\u671F\\u4E09');\n  default:\n    console.log('\\u672A\\u77E5\\u65E5\\u671F');\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\\u8F93\\u51FA\\u5C06\\u662F\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{children:`Tuesday\nWednesday\nUnknown day\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u53D1\\u751F\\u8FD9\\u79CD\\u60C5\\u51B5\\u662F\\u56E0\\u4E3A\\u5728 \",(0,n.jsx)(e.code,{children:\"case 2\"}),\" \\u5757\\u4E4B\\u540E\\u6CA1\\u6709 \",(0,n.jsx)(e.code,{children:\"break\"}),\" \\u8BED\\u53E5\\u6765\\u505C\\u6B62\\u6267\\u884C\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Statements/switch\",children:\"MDN Web Docs: switch statement\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/switch\",children:\"JavaScript.info: switch statement\"})}),`\n`]})]})}function t(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(a,{...c})}):a(c)}return v(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-spread-operator-and-how-is-it-used/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-spread-operator-and-how-is-it-used/en-US.json
index 21742360e..e04e9bdc3 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-spread-operator-and-how-is-it-used/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-spread-operator-and-how-is-it-used/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-spread-operator-and-how-is-it-used/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),j=(r,e)=>{for(var a in e)s(r,a,{get:e[a],enumerable:!0})},t=(r,e,a,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!g.call(r,o)&&o!==a&&s(r,o,{get:()=>e[o],enumerable:!(c=h(e,o))||c.enumerable});return r};var y=(r,e,a)=>(a=r!=null?p(b(r)):{},t(e||!r||!r.__esModule?s(a,\"default\",{value:r,enumerable:!0}):a,r)),f=r=>t(s({},\"__esModule\",{value:!0}),r);var l=m((N,i)=>{i.exports=_jsx_runtime});var w={};j(w,{default:()=>O,frontmatter:()=>x});var n=y(l()),x={title:\"What is the spread operator and how is it used?\"};function d(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The spread operator, represented by three dots (\",(0,n.jsx)(e.code,{children:\"...\"}),\"), is used in JavaScript to expand iterable objects like arrays or strings into individual elements. It can also be used to spread object properties. For example, you can use it to combine arrays, copy arrays, or pass array elements as arguments to a function.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr1 = [1, 2, 3];\nconst arr2 = [4, 5, 6];\nconst combined = [...arr1, ...arr2];\nconsole.log(combined); // [1, 2, 3, 4, 5, 6]\n\nconst obj1 = { a: 1, b: 2 };\nconst obj2 = { c: 3, d: 4 };\nconst combinedObj = { ...obj1, ...obj2 };\nconsole.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is the spread operator and how is it used?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Expanding arrays\"}),`\n`,(0,n.jsx)(e.p,{children:\"The spread operator can be used to expand elements of an array into individual elements. This is useful for combining arrays or copying arrays.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr1 = [1, 2, 3];\nconst arr2 = [4, 5, 6];\nconst combined = [...arr1, ...arr2];\nconsole.log(combined); // [1, 2, 3, 4, 5, 6]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Copying arrays\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can create a shallow copy of an array using the spread operator.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const original = [1, 2, 3];\nconst copy = [...original];\nconsole.log(copy); // [1, 2, 3]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Passing array elements as function arguments\"}),`\n`,(0,n.jsx)(e.p,{children:\"The spread operator can be used to pass elements of an array as arguments to a function.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function sum(a, b, c) {\n  return a + b + c;\n}\n\nconst numbers = [1, 2, 3];\nconsole.log(sum(...numbers)); // 6\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Expanding objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"The spread operator can also be used to expand properties of an object. This is useful for combining objects or copying objects.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj1 = { a: 1, b: 2 };\nconst obj2 = { c: 3, d: 4 };\nconst combinedObj = { ...obj1, ...obj2 };\nconsole.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Copying objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can create a shallow copy of an object using the spread operator.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const originalObj = { a: 1, b: 2 };\nconst copyObj = { ...originalObj };\nconsole.log(copyObj); // { a: 1, b: 2 }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Using with strings\"}),`\n`,(0,n.jsx)(e.p,{children:\"The spread operator can also be used to expand a string into individual characters.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const str = 'hello';\nconst chars = [...str];\nconsole.log(chars); // ['h', 'e', 'l', 'l', 'o']\n`})}),`\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/Web/JavaScript/Reference/Operators/Spread_syntax\",children:\"MDN Web Docs: Spread syntax\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/rest-parameters-spread-operator#spread-operator\",children:\"JavaScript.info: Spread operator\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/the-spread-operator-in-javascript/\",children:\"FreeCodeCamp: The spread operator in JavaScript\"})}),`\n`]})]})}function v(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(d,r)})):d(r)}var O=v;return f(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var j=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),y=(r,e)=>{for(var o in e)s(r,o,{get:e[o],enumerable:!0})},t=(r,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of b(e))!m.call(r,a)&&a!==o&&s(r,a,{get:()=>e[a],enumerable:!(c=u(e,a))||c.enumerable});return r};var f=(r,e,o)=>(o=r!=null?h(g(r)):{},t(e||!r||!r.__esModule?s(o,\"default\",{value:r,enumerable:!0}):o,r)),x=r=>t(s({},\"__esModule\",{value:!0}),r);var l=j((T,i)=>{i.exports=_jsx_runtime});var w={};y(w,{default:()=>p,frontmatter:()=>v});var n=f(l()),v={title:\"What is the spread operator and how is it used?\"};function d(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The spread operator, represented by three dots (\",(0,n.jsx)(e.code,{children:\"...\"}),\"), is used in JavaScript to expand iterable objects like arrays or strings into individual elements. It can also be used to spread object properties. For example, you can use it to combine arrays, copy arrays, or pass array elements as arguments to a function.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr1 = [1, 2, 3];\nconst arr2 = [4, 5, 6];\nconst combined = [...arr1, ...arr2];\nconsole.log(combined); // [1, 2, 3, 4, 5, 6]\n\nconst obj1 = { a: 1, b: 2 };\nconst obj2 = { c: 3, d: 4 };\nconst combinedObj = { ...obj1, ...obj2 };\nconsole.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is the spread operator and how is it used?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Expanding arrays\"}),`\n`,(0,n.jsx)(e.p,{children:\"The spread operator can be used to expand elements of an array into individual elements. This is useful for combining arrays or copying arrays.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr1 = [1, 2, 3];\nconst arr2 = [4, 5, 6];\nconst combined = [...arr1, ...arr2];\nconsole.log(combined); // [1, 2, 3, 4, 5, 6]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Copying arrays\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can create a shallow copy of an array using the spread operator.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const original = [1, 2, 3];\nconst copy = [...original];\nconsole.log(copy); // [1, 2, 3]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Passing array elements as function arguments\"}),`\n`,(0,n.jsx)(e.p,{children:\"The spread operator can be used to pass elements of an array as arguments to a function.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function sum(a, b, c) {\n  return a + b + c;\n}\n\nconst numbers = [1, 2, 3];\nconsole.log(sum(...numbers)); // 6\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Expanding objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"The spread operator can also be used to expand properties of an object. This is useful for combining objects or copying objects.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj1 = { a: 1, b: 2 };\nconst obj2 = { c: 3, d: 4 };\nconst combinedObj = { ...obj1, ...obj2 };\nconsole.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Copying objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can create a shallow copy of an object using the spread operator.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const originalObj = { a: 1, b: 2 };\nconst copyObj = { ...originalObj };\nconsole.log(copyObj); // { a: 1, b: 2 }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Using with strings\"}),`\n`,(0,n.jsx)(e.p,{children:\"The spread operator can also be used to expand a string into individual characters.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const str = 'hello';\nconst chars = [...str];\nconsole.log(chars); // ['h', 'e', 'l', 'l', 'o']\n`})}),`\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/Web/JavaScript/Reference/Operators/Spread_syntax\",children:\"MDN Web Docs: Spread syntax\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/rest-parameters-spread-operator#spread-operator\",children:\"JavaScript.info: Spread operator\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.freecodecamp.org/news/the-spread-operator-in-javascript/\",children:\"FreeCodeCamp: The spread operator in JavaScript\"})}),`\n`]})]})}function p(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(d,{...r})}):d(r)}return x(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-spread-operator-and-how-is-it-used/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-spread-operator-and-how-is-it-used/zh-CN.json
index 309fd748f..9b9deb839 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-spread-operator-and-how-is-it-used/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-spread-operator-and-how-is-it-used/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-spread-operator-and-how-is-it-used/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var m=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),u=(c,n)=>{for(var r in n)l(c,r,{get:n[r],enumerable:!0})},a=(c,n,r,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of p(n))!j.call(c,o)&&o!==r&&l(c,o,{get:()=>n[o],enumerable:!(s=b(n,o))||s.enumerable});return c};var v=(c,n,r)=>(r=c!=null?h(g(c)):{},a(n||!c||!c.__esModule?l(r,\"default\",{value:c,enumerable:!0}):r,c)),O=c=>a(l({},\"__esModule\",{value:!0}),c);var t=m((y,i)=>{i.exports=_jsx_runtime});var _={};u(_,{default:()=>N,frontmatter:()=>x});var e=v(t()),x={title:\"\\u4EC0\\u4E48\\u662F\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\uFF1F\"};function d(c){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\"},c.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\uFF0C\\u7528\\u4E09\\u4E2A\\u70B9 (\",(0,e.jsx)(n.code,{children:\"...\"}),\") \\u8868\\u793A\\uFF0C\\u5728 JavaScript \\u4E2D\\u7528\\u4E8E\\u5C06\\u53EF\\u8FED\\u4EE3\\u5BF9\\u8C61\\uFF08\\u5982\\u6570\\u7EC4\\u6216\\u5B57\\u7B26\\u4E32\\uFF09\\u5C55\\u5F00\\u4E3A\\u5355\\u4E2A\\u5143\\u7D20\\u3002\\u5B83\\u4E5F\\u53EF\\u4EE5\\u7528\\u4E8E\\u5C55\\u5F00\\u5BF9\\u8C61\\u5C5E\\u6027\\u3002\\u4F8B\\u5982\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5B83\\u6765\\u7EC4\\u5408\\u6570\\u7EC4\\u3001\\u590D\\u5236\\u6570\\u7EC4\\u6216\\u5C06\\u6570\\u7EC4\\u5143\\u7D20\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const arr1 = [1, 2, 3];\nconst arr2 = [4, 5, 6];\nconst combined = [...arr1, ...arr2];\nconsole.log(combined); // [1, 2, 3, 4, 5, 6]\n\nconst obj1 = { a: 1, b: 2 };\nconst obj2 = { c: 3, d: 4 };\nconst combinedObj = { ...obj1, ...obj2 };\nconsole.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5C55\\u5F00\\u6570\\u7EC4\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u53EF\\u7528\\u4E8E\\u5C06\\u6570\\u7EC4\\u7684\\u5143\\u7D20\\u5C55\\u5F00\\u4E3A\\u5355\\u4E2A\\u5143\\u7D20\\u3002\\u8FD9\\u5BF9\\u4E8E\\u7EC4\\u5408\\u6570\\u7EC4\\u6216\\u590D\\u5236\\u6570\\u7EC4\\u5F88\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const arr1 = [1, 2, 3];\nconst arr2 = [4, 5, 6];\nconst combined = [...arr1, ...arr2];\nconsole.log(combined); // [1, 2, 3, 4, 5, 6]\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u590D\\u5236\\u6570\\u7EC4\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u521B\\u5EFA\\u6570\\u7EC4\\u7684\\u6D45\\u62F7\\u8D1D\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const original = [1, 2, 3];\nconst copy = [...original];\nconsole.log(copy); // [1, 2, 3]\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5C06\\u6570\\u7EC4\\u5143\\u7D20\\u4F5C\\u4E3A\\u51FD\\u6570\\u53C2\\u6570\\u4F20\\u9012\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u53EF\\u7528\\u4E8E\\u5C06\\u6570\\u7EC4\\u7684\\u5143\\u7D20\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u51FD\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function sum(a, b, c) {\n  return a + b + c;\n}\n\nconst numbers = [1, 2, 3];\nconsole.log(sum(...numbers)); // 6\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5C55\\u5F00\\u5BF9\\u8C61\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u4E5F\\u53EF\\u7528\\u4E8E\\u5C55\\u5F00\\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u3002\\u8FD9\\u5BF9\\u4E8E\\u7EC4\\u5408\\u5BF9\\u8C61\\u6216\\u590D\\u5236\\u5BF9\\u8C61\\u5F88\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj1 = { a: 1, b: 2 };\nconst obj2 = { c: 3, d: 4 };\nconst combinedObj = { ...obj1, ...obj2 };\nconsole.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u590D\\u5236\\u5BF9\\u8C61\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u6D45\\u62F7\\u8D1D\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const originalObj = { a: 1, b: 2 };\nconst copyObj = { ...originalObj };\nconsole.log(copyObj); // { a: 1, b: 2 }\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528\\u5B57\\u7B26\\u4E32\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\\u4E5F\\u53EF\\u4EE5\\u7528\\u6765\\u5C06\\u5B57\\u7B26\\u4E32\\u6269\\u5C55\\u6210\\u5355\\u4E2A\\u5B57\\u7B26\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const str = 'hello';\nconst chars = [...str];\nconsole.log(chars); // ['h', 'e', 'l', 'l', 'o']\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/the-spread-operator-in-javascript/\",children:\"FreeCodeCamp: The spread operator in JavaScript\"})}),`\n`]})]})}function f(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,Object.assign({},c,{children:(0,e.jsx)(d,c)})):d(c)}var N=f;return O(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var j=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),v=(c,n)=>{for(var r in n)l(c,r,{get:n[r],enumerable:!0})},s=(c,n,r,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of m(n))!g.call(c,o)&&o!==r&&l(c,o,{get:()=>n[o],enumerable:!(a=b(n,o))||a.enumerable});return c};var x=(c,n,r)=>(r=c!=null?p(u(c)):{},s(n||!c||!c.__esModule?l(r,\"default\",{value:c,enumerable:!0}):r,c)),f=c=>s(l({},\"__esModule\",{value:!0}),c);var t=j((w,i)=>{i.exports=_jsx_runtime});var N={};v(N,{default:()=>h,frontmatter:()=>O});var e=x(t()),O={title:\"\\u4EC0\\u4E48\\u662F\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\uFF1F\"};function d(c){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\uFF0C\\u7528\\u4E09\\u4E2A\\u70B9 (\",(0,e.jsx)(n.code,{children:\"...\"}),\") \\u8868\\u793A\\uFF0C\\u5728 JavaScript \\u4E2D\\u7528\\u4E8E\\u5C06\\u53EF\\u8FED\\u4EE3\\u5BF9\\u8C61\\uFF08\\u5982\\u6570\\u7EC4\\u6216\\u5B57\\u7B26\\u4E32\\uFF09\\u5C55\\u5F00\\u4E3A\\u5355\\u4E2A\\u5143\\u7D20\\u3002\\u5B83\\u4E5F\\u53EF\\u4EE5\\u7528\\u4E8E\\u5C55\\u5F00\\u5BF9\\u8C61\\u5C5E\\u6027\\u3002\\u4F8B\\u5982\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5B83\\u6765\\u7EC4\\u5408\\u6570\\u7EC4\\u3001\\u590D\\u5236\\u6570\\u7EC4\\u6216\\u5C06\\u6570\\u7EC4\\u5143\\u7D20\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const arr1 = [1, 2, 3];\nconst arr2 = [4, 5, 6];\nconst combined = [...arr1, ...arr2];\nconsole.log(combined); // [1, 2, 3, 4, 5, 6]\n\nconst obj1 = { a: 1, b: 2 };\nconst obj2 = { c: 3, d: 4 };\nconst combinedObj = { ...obj1, ...obj2 };\nconsole.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5C55\\u5F00\\u6570\\u7EC4\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u53EF\\u7528\\u4E8E\\u5C06\\u6570\\u7EC4\\u7684\\u5143\\u7D20\\u5C55\\u5F00\\u4E3A\\u5355\\u4E2A\\u5143\\u7D20\\u3002\\u8FD9\\u5BF9\\u4E8E\\u7EC4\\u5408\\u6570\\u7EC4\\u6216\\u590D\\u5236\\u6570\\u7EC4\\u5F88\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const arr1 = [1, 2, 3];\nconst arr2 = [4, 5, 6];\nconst combined = [...arr1, ...arr2];\nconsole.log(combined); // [1, 2, 3, 4, 5, 6]\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u590D\\u5236\\u6570\\u7EC4\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u521B\\u5EFA\\u6570\\u7EC4\\u7684\\u6D45\\u62F7\\u8D1D\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const original = [1, 2, 3];\nconst copy = [...original];\nconsole.log(copy); // [1, 2, 3]\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5C06\\u6570\\u7EC4\\u5143\\u7D20\\u4F5C\\u4E3A\\u51FD\\u6570\\u53C2\\u6570\\u4F20\\u9012\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u53EF\\u7528\\u4E8E\\u5C06\\u6570\\u7EC4\\u7684\\u5143\\u7D20\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u51FD\\u6570\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function sum(a, b, c) {\n  return a + b + c;\n}\n\nconst numbers = [1, 2, 3];\nconsole.log(sum(...numbers)); // 6\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5C55\\u5F00\\u5BF9\\u8C61\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u4E5F\\u53EF\\u7528\\u4E8E\\u5C55\\u5F00\\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u3002\\u8FD9\\u5BF9\\u4E8E\\u7EC4\\u5408\\u5BF9\\u8C61\\u6216\\u590D\\u5236\\u5BF9\\u8C61\\u5F88\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const obj1 = { a: 1, b: 2 };\nconst obj2 = { c: 3, d: 4 };\nconst combinedObj = { ...obj1, ...obj2 };\nconsole.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u590D\\u5236\\u5BF9\\u8C61\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5C55\\u5F00\\u8FD0\\u7B97\\u7B26\\u521B\\u5EFA\\u5BF9\\u8C61\\u7684\\u6D45\\u62F7\\u8D1D\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const originalObj = { a: 1, b: 2 };\nconst copyObj = { ...originalObj };\nconsole.log(copyObj); // { a: 1, b: 2 }\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F7F\\u7528\\u5B57\\u7B26\\u4E32\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\\u4E5F\\u53EF\\u4EE5\\u7528\\u6765\\u5C06\\u5B57\\u7B26\\u4E32\\u6269\\u5C55\\u6210\\u5355\\u4E2A\\u5B57\\u7B26\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const str = 'hello';\nconst chars = [...str];\nconsole.log(chars); // ['h', 'e', 'l', 'l', 'o']\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://www.freecodecamp.org/news/the-spread-operator-in-javascript/\",children:\"FreeCodeCamp: The spread operator in JavaScript\"})}),`\n`]})]})}function h(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,{...c,children:(0,e.jsx)(d,{...c})}):d(c)}return f(N);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-ternary-operator-and-how-is-it-used/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-ternary-operator-and-how-is-it-used/en-US.json
index 08b85bde8..de145ed07 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-ternary-operator-and-how-is-it-used/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-ternary-operator-and-how-is-it-used/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-ternary-operator-and-how-is-it-used/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),x=(r,e)=>{for(var i in e)o(r,i,{get:e[i],enumerable:!0})},c=(r,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of u(e))!f.call(r,t)&&t!==i&&o(r,t,{get:()=>e[t],enumerable:!(a=p(e,t))||a.enumerable});return r};var y=(r,e,i)=>(i=r!=null?h(g(r)):{},c(e||!r||!r.__esModule?o(i,\"default\",{value:r,enumerable:!0}):i,r)),v=r=>c(o({},\"__esModule\",{value:!0}),r);var d=m((I,s)=>{s.exports=_jsx_runtime});var w={};x(w,{default:()=>S,frontmatter:()=>b});var n=y(d()),b={title:\"What is the ternary operator and how is it used?\"};function l(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The ternary operator is a shorthand for an \",(0,n.jsx)(e.code,{children:\"if-else\"}),\" statement in JavaScript. It takes three operands: a condition, a result for true, and a result for false. The syntax is \",(0,n.jsx)(e.code,{children:\"condition ? expr1 : expr2\"}),\". For example, \",(0,n.jsx)(e.code,{children:\"let result = (a > b) ? 'a is greater' : 'b is greater';\"}),\" assigns \",(0,n.jsx)(e.code,{children:\"'a is greater'\"}),\" to \",(0,n.jsx)(e.code,{children:\"result\"}),\" if \",(0,n.jsx)(e.code,{children:\"a\"}),\" is greater than \",(0,n.jsx)(e.code,{children:\"b\"}),\", otherwise it assigns \",(0,n.jsx)(e.code,{children:\"'b is greater'\"}),\".\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is the ternary operator and how is it used?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Introduction\"}),`\n`,(0,n.jsx)(e.p,{children:\"The ternary operator, also known as the conditional operator, is a concise way to perform conditional evaluations in JavaScript. It is the only operator in JavaScript that takes three operands.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,n.jsx)(e.p,{children:\"The syntax for the ternary operator is:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`condition ? expr1 : expr2;\n`})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"condition\"}),\": An expression that evaluates to \",(0,n.jsx)(e.code,{children:\"true\"}),\" or \",(0,n.jsx)(e.code,{children:\"false\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"expr1\"}),\": An expression that is executed if the condition is \",(0,n.jsx)(e.code,{children:\"true\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"expr2\"}),\": An expression that is executed if the condition is \",(0,n.jsx)(e.code,{children:\"false\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example usage\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here is a basic example of the ternary operator:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let age = 18;\nlet canVote = age >= 18 ? 'Yes' : 'No';\nconsole.log(canVote); // Output: Yes\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the condition \",(0,n.jsx)(e.code,{children:\"age >= 18\"}),\" is evaluated. If it is \",(0,n.jsx)(e.code,{children:\"true\"}),\", the string \",(0,n.jsx)(e.code,{children:\"'Yes'\"}),\" is assigned to \",(0,n.jsx)(e.code,{children:\"canVote\"}),\". If it is \",(0,n.jsx)(e.code,{children:\"false\"}),\", the string \",(0,n.jsx)(e.code,{children:\"'No'\"}),\" is assigned to \",(0,n.jsx)(e.code,{children:\"canVote\"}),\".\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Nested ternary operators\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can also nest ternary operators, although it can make the code harder to read:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let score = 85;\nlet grade =\n  score >= 90\n    ? 'A'\n    : score >= 80\n      ? 'B'\n      : score >= 70\n        ? 'C'\n        : score >= 60\n          ? 'D'\n          : 'F';\nconsole.log(grade); // Output: B\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the ternary operator is used to assign a grade based on the value of \",(0,n.jsx)(e.code,{children:\"score\"}),\".\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Simple conditional assignments\"}),\": When you need to assign a value based on a condition.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Inline conditional rendering\"}),\": Useful in JSX for conditional rendering in React.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Best practices\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Readability\"}),\": While the ternary operator can make code more concise, overusing it or nesting it too deeply can make the code hard to read. Use it judiciously.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Complex conditions\"}),\": For complex conditions, consider using \",(0,n.jsx)(e.code,{children:\"if-else\"}),\" statements for better readability.\"]}),`\n`]}),`\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/Web/JavaScript/Reference/Operators/Conditional_Operator\",children:\"MDN Web Docs: Conditional (ternary) operator\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/ifelse#conditional-operator\",children:\"JavaScript.info: Conditional operators\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3schools.com/jsref/jsref_operators.asp\",children:\"W3Schools: JavaScript ternary operator\"})}),`\n`]})]})}function j(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(l,r)})):l(r)}var S=j;return v(w);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var x=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),y=(r,e)=>{for(var i in e)o(r,i,{get:e[i],enumerable:!0})},c=(r,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of g(e))!m.call(r,t)&&t!==i&&o(r,t,{get:()=>e[t],enumerable:!(a=u(e,t))||a.enumerable});return r};var v=(r,e,i)=>(i=r!=null?p(f(r)):{},c(e||!r||!r.__esModule?o(i,\"default\",{value:r,enumerable:!0}):i,r)),b=r=>c(o({},\"__esModule\",{value:!0}),r);var d=x((_,s)=>{s.exports=_jsx_runtime});var S={};y(S,{default:()=>h,frontmatter:()=>j});var n=v(d()),j={title:\"What is the ternary operator and how is it used?\"};function l(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The ternary operator is a shorthand for an \",(0,n.jsx)(e.code,{children:\"if-else\"}),\" statement in JavaScript. It takes three operands: a condition, a result for true, and a result for false. The syntax is \",(0,n.jsx)(e.code,{children:\"condition ? expr1 : expr2\"}),\". For example, \",(0,n.jsx)(e.code,{children:\"let result = (a > b) ? 'a is greater' : 'b is greater';\"}),\" assigns \",(0,n.jsx)(e.code,{children:\"'a is greater'\"}),\" to \",(0,n.jsx)(e.code,{children:\"result\"}),\" if \",(0,n.jsx)(e.code,{children:\"a\"}),\" is greater than \",(0,n.jsx)(e.code,{children:\"b\"}),\", otherwise it assigns \",(0,n.jsx)(e.code,{children:\"'b is greater'\"}),\".\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is the ternary operator and how is it used?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Introduction\"}),`\n`,(0,n.jsx)(e.p,{children:\"The ternary operator, also known as the conditional operator, is a concise way to perform conditional evaluations in JavaScript. It is the only operator in JavaScript that takes three operands.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,n.jsx)(e.p,{children:\"The syntax for the ternary operator is:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`condition ? expr1 : expr2;\n`})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"condition\"}),\": An expression that evaluates to \",(0,n.jsx)(e.code,{children:\"true\"}),\" or \",(0,n.jsx)(e.code,{children:\"false\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"expr1\"}),\": An expression that is executed if the condition is \",(0,n.jsx)(e.code,{children:\"true\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"expr2\"}),\": An expression that is executed if the condition is \",(0,n.jsx)(e.code,{children:\"false\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example usage\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here is a basic example of the ternary operator:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let age = 18;\nlet canVote = age >= 18 ? 'Yes' : 'No';\nconsole.log(canVote); // Output: Yes\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the condition \",(0,n.jsx)(e.code,{children:\"age >= 18\"}),\" is evaluated. If it is \",(0,n.jsx)(e.code,{children:\"true\"}),\", the string \",(0,n.jsx)(e.code,{children:\"'Yes'\"}),\" is assigned to \",(0,n.jsx)(e.code,{children:\"canVote\"}),\". If it is \",(0,n.jsx)(e.code,{children:\"false\"}),\", the string \",(0,n.jsx)(e.code,{children:\"'No'\"}),\" is assigned to \",(0,n.jsx)(e.code,{children:\"canVote\"}),\".\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Nested ternary operators\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can also nest ternary operators, although it can make the code harder to read:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let score = 85;\nlet grade =\n  score >= 90\n    ? 'A'\n    : score >= 80\n      ? 'B'\n      : score >= 70\n        ? 'C'\n        : score >= 60\n          ? 'D'\n          : 'F';\nconsole.log(grade); // Output: B\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the ternary operator is used to assign a grade based on the value of \",(0,n.jsx)(e.code,{children:\"score\"}),\".\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Simple conditional assignments\"}),\": When you need to assign a value based on a condition.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Inline conditional rendering\"}),\": Useful in JSX for conditional rendering in React.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Best practices\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Readability\"}),\": While the ternary operator can make code more concise, overusing it or nesting it too deeply can make the code hard to read. Use it judiciously.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Complex conditions\"}),\": For complex conditions, consider using \",(0,n.jsx)(e.code,{children:\"if-else\"}),\" statements for better readability.\"]}),`\n`]}),`\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/Web/JavaScript/Reference/Operators/Conditional_Operator\",children:\"MDN Web Docs: Conditional (ternary) operator\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/ifelse#conditional-operator\",children:\"JavaScript.info: Conditional operators\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3schools.com/jsref/jsref_operators.asp\",children:\"W3Schools: JavaScript ternary operator\"})}),`\n`]})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(l,{...r})}):l(r)}return b(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-ternary-operator-and-how-is-it-used/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-ternary-operator-and-how-is-it-used/zh-CN.json
index f06ea9d69..83bc0dd31 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-ternary-operator-and-how-is-it-used/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-ternary-operator-and-how-is-it-used/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-ternary-operator-and-how-is-it-used/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),m=(r,e)=>{for(var c in e)i(r,c,{get:e[c],enumerable:!0})},o=(r,e,c,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of g(e))!f.call(r,l)&&l!==c&&i(r,l,{get:()=>e[l],enumerable:!(d=p(e,l))||d.enumerable});return r};var j=(r,e,c)=>(c=r!=null?s(u(r)):{},o(e||!r||!r.__esModule?i(c,\"default\",{value:r,enumerable:!0}):c,r)),v=r=>o(i({},\"__esModule\",{value:!0}),r);var t=x((N,h)=>{h.exports=_jsx_runtime});var J={};m(J,{default:()=>b,frontmatter:()=>S});var n=j(t()),S={title:\"\\u4EC0\\u4E48\\u662F\\u4E09\\u5143\\u8FD0\\u7B97\\u7B26\\uFF1F\\u5B83\\u5982\\u4F55\\u4F7F\\u7528\\uFF1F\"};function a(r){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E09\\u5143\\u8FD0\\u7B97\\u7B26\\u662F JavaScript \\u4E2D \",(0,n.jsx)(e.code,{children:\"if-else\"}),\" \\u8BED\\u53E5\\u7684\\u7B80\\u5199\\u5F62\\u5F0F\\u3002\\u5B83\\u9700\\u8981\\u4E09\\u4E2A\\u64CD\\u4F5C\\u6570\\uFF1A\\u4E00\\u4E2A\\u6761\\u4EF6\\u3001\\u4E00\\u4E2A\\u771F\\u503C\\u7ED3\\u679C\\u548C\\u4E00\\u4E2A\\u5047\\u503C\\u7ED3\\u679C\\u3002\\u8BED\\u6CD5\\u662F \",(0,n.jsx)(e.code,{children:\"condition ? expr1 : expr2\"}),\"\\u3002\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"let result = (a > b) ? 'a is greater' : 'b is greater';\"}),\" \\u5982\\u679C \",(0,n.jsx)(e.code,{children:\"a\"}),\" \\u5927\\u4E8E \",(0,n.jsx)(e.code,{children:\"b\"}),\"\\uFF0C\\u5219\\u5C06 \",(0,n.jsx)(e.code,{children:\"'a is greater'\"}),\" \\u8D4B\\u503C\\u7ED9 \",(0,n.jsx)(e.code,{children:\"result\"}),\"\\uFF0C\\u5426\\u5219\\u5C06 \",(0,n.jsx)(e.code,{children:\"'b is greater'\"}),\" \\u8D4B\\u503C\\u7ED9 \",(0,n.jsx)(e.code,{children:\"result\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u4E09\\u5143\\u8FD0\\u7B97\\u7B26\\uFF1F\\u5B83\\u5982\\u4F55\\u4F7F\\u7528\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7B80\\u4ECB\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E09\\u5143\\u8FD0\\u7B97\\u7B26\\uFF0C\\u4E5F\\u79F0\\u4E3A\\u6761\\u4EF6\\u8FD0\\u7B97\\u7B26\\uFF0C\\u662F\\u5728 JavaScript \\u4E2D\\u6267\\u884C\\u6761\\u4EF6\\u8BC4\\u4F30\\u7684\\u7B80\\u4FBF\\u65B9\\u6CD5\\u3002\\u5B83\\u662F JavaScript \\u4E2D\\u552F\\u4E00\\u9700\\u8981\\u4E09\\u4E2A\\u64CD\\u4F5C\\u7B26\\u7684\\u8FD0\\u7B97\\u7B26\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E09\\u5143\\u8FD0\\u7B97\\u7B26\\u7684\\u8BED\\u6CD5\\u662F\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`condition ? expr1 : expr2;\n`})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"condition\"}),\"\\uFF1A\\u4E00\\u4E2A\\u8BA1\\u7B97\\u7ED3\\u679C\\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"false\"}),\" \\u7684\\u8868\\u8FBE\\u5F0F\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"expr1\"}),\"\\uFF1A\\u5982\\u679C\\u6761\\u4EF6\\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\uFF0C\\u5219\\u6267\\u884C\\u7684\\u8868\\u8FBE\\u5F0F\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"expr2\"}),\"\\uFF1A\\u5982\\u679C\\u6761\\u4EF6\\u4E3A \",(0,n.jsx)(e.code,{children:\"false\"}),\"\\uFF0C\\u5219\\u6267\\u884C\\u7684\\u8868\\u8FBE\\u5F0F\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u4E09\\u5143\\u8FD0\\u7B97\\u7B26\\u7684\\u57FA\\u672C\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let age = 18;\nlet canVote = age >= 18 ? 'Yes' : 'No';\nconsole.log(canVote); // Output: Yes\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u5C06\\u8BC4\\u4F30\\u6761\\u4EF6 \",(0,n.jsx)(e.code,{children:\"age >= 18\"}),\"\\u3002\\u5982\\u679C\\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\uFF0C\\u5219\\u5C06\\u5B57\\u7B26\\u4E32 \",(0,n.jsx)(e.code,{children:\"'Yes'\"}),\" \\u8D4B\\u503C\\u7ED9 \",(0,n.jsx)(e.code,{children:\"canVote\"}),\"\\u3002\\u5982\\u679C\\u4E3A \",(0,n.jsx)(e.code,{children:\"false\"}),\"\\uFF0C\\u5219\\u5C06\\u5B57\\u7B26\\u4E32 \",(0,n.jsx)(e.code,{children:\"'No'\"}),\" \\u8D4B\\u503C\\u7ED9 \",(0,n.jsx)(e.code,{children:\"canVote\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5D4C\\u5957\\u4E09\\u5143\\u8FD0\\u7B97\\u7B26\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u4E5F\\u53EF\\u4EE5\\u5D4C\\u5957\\u4E09\\u5143\\u8FD0\\u7B97\\u7B26\\uFF0C\\u5C3D\\u7BA1\\u8FD9\\u4F1A\\u4F7F\\u4EE3\\u7801\\u66F4\\u96BE\\u9605\\u8BFB\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let score = 85;\nlet grade =\n  score >= 90\n    ? 'A'\n    : score >= 80\n      ? 'B'\n      : score >= 70\n        ? 'C'\n        : score >= 60\n          ? 'D'\n          : 'F';\nconsole.log(grade); // Output: B\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u4E09\\u5143\\u8FD0\\u7B97\\u7B26\\u7528\\u4E8E\\u6839\\u636E \",(0,n.jsx)(e.code,{children:\"score\"}),\" \\u7684\\u503C\\u5206\\u914D\\u7B49\\u7EA7\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u7B80\\u5355\\u7684\\u6761\\u4EF6\\u8D4B\\u503C\"}),\"\\uFF1A\\u5F53\\u60A8\\u9700\\u8981\\u6839\\u636E\\u6761\\u4EF6\\u5206\\u914D\\u503C\\u65F6\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5185\\u8054\\u6761\\u4EF6\\u6E32\\u67D3\"}),\"\\uFF1A\\u5728 JSX \\u4E2D\\u7528\\u4E8E\\u5728 React \\u4E2D\\u8FDB\\u884C\\u6761\\u4EF6\\u6E32\\u67D3\\u65F6\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6700\\u4F73\\u5B9E\\u8DF5\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u53EF\\u8BFB\\u6027\"}),\"\\uFF1A\\u867D\\u7136\\u4E09\\u5143\\u8FD0\\u7B97\\u7B26\\u53EF\\u4EE5\\u4F7F\\u4EE3\\u7801\\u66F4\\u7B80\\u6D01\\uFF0C\\u4F46\\u8FC7\\u5EA6\\u4F7F\\u7528\\u6216\\u5D4C\\u5957\\u8FC7\\u6DF1\\u4F1A\\u4F7F\\u4EE3\\u7801\\u96BE\\u4EE5\\u9605\\u8BFB\\u3002\\u8BF7\\u8C28\\u614E\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u590D\\u6742\\u6761\\u4EF6\"}),\"\\uFF1A\\u5BF9\\u4E8E\\u590D\\u6742\\u6761\\u4EF6\\uFF0C\\u8BF7\\u8003\\u8651\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"if-else\"}),\" \\u8BED\\u53E5\\u4EE5\\u83B7\\u5F97\\u66F4\\u597D\\u7684\\u53EF\\u8BFB\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Operators/Conditional_Operator\",children:\"MDN Web Docs: Conditional (ternary) operator\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/ifelse#conditional-operator\",children:\"JavaScript.info: Conditional operators\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3schools.com/jsref/jsref_operators.asp\",children:\"W3Schools: JavaScript ternary operator\"})}),`\n`]})]})}function _(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(a,r)})):a(r)}var b=_;return v(J);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),j=(r,e)=>{for(var c in e)i(r,c,{get:e[c],enumerable:!0})},o=(r,e,c,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of g(e))!x.call(r,l)&&l!==c&&i(r,l,{get:()=>e[l],enumerable:!(d=u(e,l))||d.enumerable});return r};var v=(r,e,c)=>(c=r!=null?p(f(r)):{},o(e||!r||!r.__esModule?i(c,\"default\",{value:r,enumerable:!0}):c,r)),S=r=>o(i({},\"__esModule\",{value:!0}),r);var t=m((C,h)=>{h.exports=_jsx_runtime});var J={};j(J,{default:()=>s,frontmatter:()=>_});var n=v(t()),_={title:\"\\u4EC0\\u4E48\\u662F\\u4E09\\u5143\\u8FD0\\u7B97\\u7B26\\uFF1F\\u5B83\\u5982\\u4F55\\u4F7F\\u7528\\uFF1F\"};function a(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E09\\u5143\\u8FD0\\u7B97\\u7B26\\u662F JavaScript \\u4E2D \",(0,n.jsx)(e.code,{children:\"if-else\"}),\" \\u8BED\\u53E5\\u7684\\u7B80\\u5199\\u5F62\\u5F0F\\u3002\\u5B83\\u9700\\u8981\\u4E09\\u4E2A\\u64CD\\u4F5C\\u6570\\uFF1A\\u4E00\\u4E2A\\u6761\\u4EF6\\u3001\\u4E00\\u4E2A\\u771F\\u503C\\u7ED3\\u679C\\u548C\\u4E00\\u4E2A\\u5047\\u503C\\u7ED3\\u679C\\u3002\\u8BED\\u6CD5\\u662F \",(0,n.jsx)(e.code,{children:\"condition ? expr1 : expr2\"}),\"\\u3002\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"let result = (a > b) ? 'a is greater' : 'b is greater';\"}),\" \\u5982\\u679C \",(0,n.jsx)(e.code,{children:\"a\"}),\" \\u5927\\u4E8E \",(0,n.jsx)(e.code,{children:\"b\"}),\"\\uFF0C\\u5219\\u5C06 \",(0,n.jsx)(e.code,{children:\"'a is greater'\"}),\" \\u8D4B\\u503C\\u7ED9 \",(0,n.jsx)(e.code,{children:\"result\"}),\"\\uFF0C\\u5426\\u5219\\u5C06 \",(0,n.jsx)(e.code,{children:\"'b is greater'\"}),\" \\u8D4B\\u503C\\u7ED9 \",(0,n.jsx)(e.code,{children:\"result\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u4E09\\u5143\\u8FD0\\u7B97\\u7B26\\uFF1F\\u5B83\\u5982\\u4F55\\u4F7F\\u7528\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7B80\\u4ECB\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E09\\u5143\\u8FD0\\u7B97\\u7B26\\uFF0C\\u4E5F\\u79F0\\u4E3A\\u6761\\u4EF6\\u8FD0\\u7B97\\u7B26\\uFF0C\\u662F\\u5728 JavaScript \\u4E2D\\u6267\\u884C\\u6761\\u4EF6\\u8BC4\\u4F30\\u7684\\u7B80\\u4FBF\\u65B9\\u6CD5\\u3002\\u5B83\\u662F JavaScript \\u4E2D\\u552F\\u4E00\\u9700\\u8981\\u4E09\\u4E2A\\u64CD\\u4F5C\\u7B26\\u7684\\u8FD0\\u7B97\\u7B26\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4E09\\u5143\\u8FD0\\u7B97\\u7B26\\u7684\\u8BED\\u6CD5\\u662F\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`condition ? expr1 : expr2;\n`})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"condition\"}),\"\\uFF1A\\u4E00\\u4E2A\\u8BA1\\u7B97\\u7ED3\\u679C\\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"false\"}),\" \\u7684\\u8868\\u8FBE\\u5F0F\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"expr1\"}),\"\\uFF1A\\u5982\\u679C\\u6761\\u4EF6\\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\uFF0C\\u5219\\u6267\\u884C\\u7684\\u8868\\u8FBE\\u5F0F\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"expr2\"}),\"\\uFF1A\\u5982\\u679C\\u6761\\u4EF6\\u4E3A \",(0,n.jsx)(e.code,{children:\"false\"}),\"\\uFF0C\\u5219\\u6267\\u884C\\u7684\\u8868\\u8FBE\\u5F0F\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u4E09\\u5143\\u8FD0\\u7B97\\u7B26\\u7684\\u57FA\\u672C\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let age = 18;\nlet canVote = age >= 18 ? 'Yes' : 'No';\nconsole.log(canVote); // Output: Yes\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u5C06\\u8BC4\\u4F30\\u6761\\u4EF6 \",(0,n.jsx)(e.code,{children:\"age >= 18\"}),\"\\u3002\\u5982\\u679C\\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\uFF0C\\u5219\\u5C06\\u5B57\\u7B26\\u4E32 \",(0,n.jsx)(e.code,{children:\"'Yes'\"}),\" \\u8D4B\\u503C\\u7ED9 \",(0,n.jsx)(e.code,{children:\"canVote\"}),\"\\u3002\\u5982\\u679C\\u4E3A \",(0,n.jsx)(e.code,{children:\"false\"}),\"\\uFF0C\\u5219\\u5C06\\u5B57\\u7B26\\u4E32 \",(0,n.jsx)(e.code,{children:\"'No'\"}),\" \\u8D4B\\u503C\\u7ED9 \",(0,n.jsx)(e.code,{children:\"canVote\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5D4C\\u5957\\u4E09\\u5143\\u8FD0\\u7B97\\u7B26\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u60A8\\u4E5F\\u53EF\\u4EE5\\u5D4C\\u5957\\u4E09\\u5143\\u8FD0\\u7B97\\u7B26\\uFF0C\\u5C3D\\u7BA1\\u8FD9\\u4F1A\\u4F7F\\u4EE3\\u7801\\u66F4\\u96BE\\u9605\\u8BFB\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let score = 85;\nlet grade =\n  score >= 90\n    ? 'A'\n    : score >= 80\n      ? 'B'\n      : score >= 70\n        ? 'C'\n        : score >= 60\n          ? 'D'\n          : 'F';\nconsole.log(grade); // Output: B\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u4E09\\u5143\\u8FD0\\u7B97\\u7B26\\u7528\\u4E8E\\u6839\\u636E \",(0,n.jsx)(e.code,{children:\"score\"}),\" \\u7684\\u503C\\u5206\\u914D\\u7B49\\u7EA7\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u7B80\\u5355\\u7684\\u6761\\u4EF6\\u8D4B\\u503C\"}),\"\\uFF1A\\u5F53\\u60A8\\u9700\\u8981\\u6839\\u636E\\u6761\\u4EF6\\u5206\\u914D\\u503C\\u65F6\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u5185\\u8054\\u6761\\u4EF6\\u6E32\\u67D3\"}),\"\\uFF1A\\u5728 JSX \\u4E2D\\u7528\\u4E8E\\u5728 React \\u4E2D\\u8FDB\\u884C\\u6761\\u4EF6\\u6E32\\u67D3\\u65F6\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6700\\u4F73\\u5B9E\\u8DF5\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u53EF\\u8BFB\\u6027\"}),\"\\uFF1A\\u867D\\u7136\\u4E09\\u5143\\u8FD0\\u7B97\\u7B26\\u53EF\\u4EE5\\u4F7F\\u4EE3\\u7801\\u66F4\\u7B80\\u6D01\\uFF0C\\u4F46\\u8FC7\\u5EA6\\u4F7F\\u7528\\u6216\\u5D4C\\u5957\\u8FC7\\u6DF1\\u4F1A\\u4F7F\\u4EE3\\u7801\\u96BE\\u4EE5\\u9605\\u8BFB\\u3002\\u8BF7\\u8C28\\u614E\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u590D\\u6742\\u6761\\u4EF6\"}),\"\\uFF1A\\u5BF9\\u4E8E\\u590D\\u6742\\u6761\\u4EF6\\uFF0C\\u8BF7\\u8003\\u8651\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"if-else\"}),\" \\u8BED\\u53E5\\u4EE5\\u83B7\\u5F97\\u66F4\\u597D\\u7684\\u53EF\\u8BFB\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Operators/Conditional_Operator\",children:\"MDN Web Docs: Conditional (ternary) operator\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/ifelse#conditional-operator\",children:\"JavaScript.info: Conditional operators\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.w3schools.com/jsref/jsref_operators.asp\",children:\"W3Schools: JavaScript ternary operator\"})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(a,{...r})}):a(r)}return S(J);})();\n;return Component;"
 }
\ No newline at end of file
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 77a6bf0dd..27dafb302 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-use-of-promiseall/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var o in e)i(n,o,{get:e[o],enumerable:!0})},t=(n,e,o,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!v.call(n,s)&&s!==o&&i(n,s,{get:()=>e[s],enumerable:!(l=m(e,s))||l.enumerable});return n};var j=(n,e,o)=>(o=n!=null?d(u(n)):{},t(e||!n||!n.__esModule?i(o,\"default\",{value:n,enumerable:!0}):o,n)),w=n=>t(i({},\"__esModule\",{value:!0}),n);var c=f((I,a)=>{a.exports=_jsx_runtime});var x={};g(x,{default:()=>b,frontmatter:()=>P});var r=j(c()),P={title:\"What is the use of `Promise.all()`\"};function h(n){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},n.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" is a method in JavaScript that takes an array of promises and returns a single promise. This returned promise resolves when all the input promises have resolved, or it rejects if any of the input promises reject. It is useful for running multiple asynchronous operations in parallel and waiting for all of them to complete.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = Promise.resolve(3);\nconst promise2 = 42;\nconst promise3 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'foo');\n});\n\nPromise.all([promise1, promise2, promise3]).then((values) => {\n  console.log(values); // [3, 42, 'foo']\n});\n`})}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsxs)(e.h2,{children:[\"What is the use of \",(0,r.jsx)(e.code,{children:\"Promise.all()\"})]}),`\n`,(0,r.jsx)(e.h3,{children:\"Overview\"}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" is a static method of the \",(0,r.jsx)(e.code,{children:\"Promise\"}),\" object that is used to handle multiple promises concurrently. It takes an iterable (usually an array) of promises and returns a single promise that resolves when all the promises in the iterable have resolved or rejects if any of the promises reject.\"]}),`\n`,(0,r.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`Promise.all(iterable);\n`})}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"iterable\"}),\": An iterable object, such as an array, containing promises.\"]}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"How it works\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"When you pass an array of promises to \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\", it returns a new promise. This new promise:\"]}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"Resolves when all the promises in the array have resolved. The resolved value is an array of the resolved values of the input promises, in the same order as the input promises.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Rejects as soon as any of the input promises reject. The rejection reason is the reason of the first promise that rejects.\"}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"Here is an example to illustrate how \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" works:\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'one');\n});\n\nconst promise2 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 200, 'two');\n});\n\nPromise.all([promise1, promise2])\n  .then((values) => {\n    console.log(values); // ['one', 'two']\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"In this example, \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" waits for both \",(0,r.jsx)(e.code,{children:\"promise1\"}),\" and \",(0,r.jsx)(e.code,{children:\"promise2\"}),\" to resolve. Once both promises have resolved, it logs the array of resolved values.\"]}),`\n`,(0,r.jsx)(e.h3,{children:\"Error handling\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"If any of the promises passed to \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" reject, the returned promise will immediately reject with the reason of the first promise that rejects.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'one');\n});\n\nconst promise2 = new Promise((resolve, reject) => {\n  setTimeout(reject, 200, 'two');\n});\n\nPromise.all([promise1, promise2])\n  .then((values) => {\n    console.log(values);\n  })\n  .catch((error) => {\n    console.error(error); // 'two'\n  });\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"In this example, \",(0,r.jsx)(e.code,{children:\"promise2\"}),\" rejects after 200 milliseconds, causing the \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" promise to reject immediately with the reason \",(0,r.jsx)(e.code,{children:\"'two'\"}),\".\"]}),`\n`,(0,r.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Parallel API requests\"}),\": When you need to make multiple API requests and wait for all of them to complete before proceeding.\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Batch processing\"}),\": When you have multiple asynchronous tasks that can be executed in parallel and you need to wait for all of them to finish.\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Data aggregation\"}),\": When you need to gather data from multiple sources and combine the results.\"]}),`\n`]}),`\n`,(0,r.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all\",children:[\"MDN Web Docs on \",(0,r.jsx)(e.code,{children:\"Promise.all()\"})]})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/primers/promises\",children:\"JavaScript Promises: An Introduction\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://www.digitalocean.com/community/tutorials/understanding-javascript-promises\",children:\"Understanding JavaScript Promises\"})}),`\n`]})]})}function y(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,Object.assign({},n,{children:(0,r.jsx)(h,n)})):h(n)}var b=y;return w(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var o in e)i(n,o,{get:e[o],enumerable:!0})},t=(n,e,o,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of u(e))!f.call(n,s)&&s!==o&&i(n,s,{get:()=>e[s],enumerable:!(l=p(e,s))||l.enumerable});return n};var w=(n,e,o)=>(o=n!=null?m(v(n)):{},t(e||!n||!n.__esModule?i(o,\"default\",{value:n,enumerable:!0}):o,n)),P=n=>t(i({},\"__esModule\",{value:!0}),n);var c=g((T,a)=>{a.exports=_jsx_runtime});var b={};j(b,{default:()=>d,frontmatter:()=>y});var r=w(c()),y={title:\"What is the use of `Promise.all()`\"};function h(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" is a method in JavaScript that takes an array of promises and returns a single promise. This returned promise resolves when all the input promises have resolved, or it rejects if any of the input promises reject. It is useful for running multiple asynchronous operations in parallel and waiting for all of them to complete.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = Promise.resolve(3);\nconst promise2 = 42;\nconst promise3 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'foo');\n});\n\nPromise.all([promise1, promise2, promise3]).then((values) => {\n  console.log(values); // [3, 42, 'foo']\n});\n`})}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsxs)(e.h2,{children:[\"What is the use of \",(0,r.jsx)(e.code,{children:\"Promise.all()\"})]}),`\n`,(0,r.jsx)(e.h3,{children:\"Overview\"}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" is a static method of the \",(0,r.jsx)(e.code,{children:\"Promise\"}),\" object that is used to handle multiple promises concurrently. It takes an iterable (usually an array) of promises and returns a single promise that resolves when all the promises in the iterable have resolved or rejects if any of the promises reject.\"]}),`\n`,(0,r.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`Promise.all(iterable);\n`})}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"iterable\"}),\": An iterable object, such as an array, containing promises.\"]}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"How it works\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"When you pass an array of promises to \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\", it returns a new promise. This new promise:\"]}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"Resolves when all the promises in the array have resolved. The resolved value is an array of the resolved values of the input promises, in the same order as the input promises.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Rejects as soon as any of the input promises reject. The rejection reason is the reason of the first promise that rejects.\"}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"Here is an example to illustrate how \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" works:\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'one');\n});\n\nconst promise2 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 200, 'two');\n});\n\nPromise.all([promise1, promise2])\n  .then((values) => {\n    console.log(values); // ['one', 'two']\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"In this example, \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" waits for both \",(0,r.jsx)(e.code,{children:\"promise1\"}),\" and \",(0,r.jsx)(e.code,{children:\"promise2\"}),\" to resolve. Once both promises have resolved, it logs the array of resolved values.\"]}),`\n`,(0,r.jsx)(e.h3,{children:\"Error handling\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"If any of the promises passed to \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" reject, the returned promise will immediately reject with the reason of the first promise that rejects.\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'one');\n});\n\nconst promise2 = new Promise((resolve, reject) => {\n  setTimeout(reject, 200, 'two');\n});\n\nPromise.all([promise1, promise2])\n  .then((values) => {\n    console.log(values);\n  })\n  .catch((error) => {\n    console.error(error); // 'two'\n  });\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"In this example, \",(0,r.jsx)(e.code,{children:\"promise2\"}),\" rejects after 200 milliseconds, causing the \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" promise to reject immediately with the reason \",(0,r.jsx)(e.code,{children:\"'two'\"}),\".\"]}),`\n`,(0,r.jsx)(e.h3,{children:\"Use cases\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Parallel API requests\"}),\": When you need to make multiple API requests and wait for all of them to complete before proceeding.\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Batch processing\"}),\": When you have multiple asynchronous tasks that can be executed in parallel and you need to wait for all of them to finish.\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"Data aggregation\"}),\": When you need to gather data from multiple sources and combine the results.\"]}),`\n`]}),`\n`,(0,r.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all\",children:[\"MDN Web Docs on \",(0,r.jsx)(e.code,{children:\"Promise.all()\"})]})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/primers/promises\",children:\"JavaScript Promises: An Introduction\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://www.digitalocean.com/community/tutorials/understanding-javascript-promises\",children:\"Understanding JavaScript Promises\"})}),`\n`]})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(h,{...n})}):h(n)}return P(b);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-use-of-promiseall/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-use-of-promiseall/zh-CN.json
index 8173462e3..f60719f22 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-use-of-promiseall/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-use-of-promiseall/zh-CN.json
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-use-of-promiseall/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var P=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var o in e)l(n,o,{get:e[o],enumerable:!0})},c=(n,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!v.call(n,i)&&i!==o&&l(n,i,{get:()=>e[i],enumerable:!(s=a(e,i))||s.enumerable});return n};var j=(n,e,o)=>(o=n!=null?h(u(n)):{},c(e||!n||!n.__esModule?l(o,\"default\",{value:n,enumerable:!0}):o,n)),w=n=>c(l({},\"__esModule\",{value:!0}),n);var t=P((D,m)=>{m.exports=_jsx_runtime});var _={};g(_,{default:()=>x,frontmatter:()=>f});var r=j(t()),f={title:\"Promise.all() \\u7684\\u7528\\u9014\\u662F\\u4EC0\\u4E48\"};function d(n){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},n.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" \\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u79CD\\u65B9\\u6CD5\\uFF0C\\u5B83\\u63A5\\u53D7\\u4E00\\u4E2A promise \\u6570\\u7EC4\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5355\\u72EC\\u7684 promise\\u3002\\u5F53\\u6240\\u6709\\u8F93\\u5165 promise \\u90FD\\u5DF2\\u89E3\\u51B3\\u65F6\\uFF0C\\u6B64\\u8FD4\\u56DE\\u7684 promise \\u5C06\\u88AB\\u89E3\\u6790\\uFF0C\\u6216\\u8005\\u5982\\u679C\\u4EFB\\u4F55\\u8F93\\u5165 promise \\u88AB\\u62D2\\u7EDD\\uFF0C\\u5219\\u4F1A\\u88AB\\u62D2\\u7EDD\\u3002\\u5B83\\u7528\\u4E8E\\u5E76\\u884C\\u8FD0\\u884C\\u591A\\u4E2A\\u5F02\\u6B65\\u64CD\\u4F5C\\u5E76\\u7B49\\u5F85\\u5B83\\u4EEC\\u5168\\u90E8\\u5B8C\\u6210\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = Promise.resolve(3);\nconst promise2 = 42;\nconst promise3 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'foo');\n});\n\nPromise.all([promise1, promise2, promise3]).then((values) => {\n  console.log(values); // [3, 42, 'foo']\n});\n`})}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsx)(e.h2,{children:\"Promise.all() \\u7684\\u7528\\u9014\\u662F\\u4EC0\\u4E48\"}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u6982\\u8FF0\"}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" \\u662F \",(0,r.jsx)(e.code,{children:\"Promise\"}),\" \\u5BF9\\u8C61\\u7684\\u9759\\u6001\\u65B9\\u6CD5\\uFF0C\\u7528\\u4E8E\\u540C\\u65F6\\u5904\\u7406\\u591A\\u4E2A promise\\u3002\\u5B83\\u63A5\\u53D7\\u4E00\\u4E2A\\u53EF\\u8FED\\u4EE3\\u5BF9\\u8C61\\uFF08\\u901A\\u5E38\\u662F\\u6570\\u7EC4\\uFF09\\u7684 promise\\uFF0C\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5355\\u72EC\\u7684 promise\\uFF0C\\u5F53\\u53EF\\u8FED\\u4EE3\\u5BF9\\u8C61\\u4E2D\\u7684\\u6240\\u6709 promise \\u90FD\\u5DF2\\u89E3\\u51B3\\u65F6\\uFF0C\\u8BE5 promise \\u5C06\\u88AB\\u89E3\\u6790\\uFF0C\\u6216\\u8005\\u5982\\u679C\\u4EFB\\u4F55 promise \\u88AB\\u62D2\\u7EDD\\uFF0C\\u5219\\u8BE5 promise \\u5C06\\u88AB\\u62D2\\u7EDD\\u3002\"]}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`Promise.all(iterable);\n`})}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"iterable\"}),\"\\uFF1A\\u4E00\\u4E2A\\u53EF\\u8FED\\u4EE3\\u5BF9\\u8C61\\uFF0C\\u4F8B\\u5982\\u5305\\u542B promise \\u7684\\u6570\\u7EC4\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u5F53\\u60A8\\u5C06\\u4E00\\u4E2A promise \\u6570\\u7EC4\\u4F20\\u9012\\u7ED9 \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" \\u65F6\\uFF0C\\u5B83\\u5C06\\u8FD4\\u56DE\\u4E00\\u4E2A\\u65B0\\u7684 promise\\u3002\\u8FD9\\u4E2A\\u65B0\\u7684 promise\\uFF1A\"]}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"\\u5F53\\u6570\\u7EC4\\u4E2D\\u7684\\u6240\\u6709 promise \\u90FD\\u5DF2\\u89E3\\u51B3\\u65F6\\uFF0C\\u5C06\\u89E3\\u6790\\u3002\\u89E3\\u6790\\u540E\\u7684\\u503C\\u662F\\u8F93\\u5165 promise \\u7684\\u89E3\\u6790\\u503C\\u7684\\u6570\\u7EC4\\uFF0C\\u987A\\u5E8F\\u4E0E\\u8F93\\u5165 promise \\u76F8\\u540C\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u4E00\\u65E6\\u4EFB\\u4F55\\u8F93\\u5165 promise \\u88AB\\u62D2\\u7EDD\\uFF0C\\u5C31\\u4F1A\\u88AB\\u62D2\\u7EDD\\u3002\\u62D2\\u7EDD\\u539F\\u56E0\\u662F\\u88AB\\u62D2\\u7EDD\\u7684\\u7B2C\\u4E00\\u4E2A promise \\u7684\\u539F\\u56E0\\u3002\"}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u793A\\u4F8B\\uFF0C\\u7528\\u4E8E\\u8BF4\\u660E \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\uFF1A\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'one');\n});\n\nconst promise2 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 200, 'two');\n});\n\nPromise.all([promise1, promise2])\n  .then((values) => {\n    console.log(values); // ['one', 'two']\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" \\u7B49\\u5F85 \",(0,r.jsx)(e.code,{children:\"promise1\"}),\" \\u548C \",(0,r.jsx)(e.code,{children:\"promise2\"}),\" \\u90FD\\u88AB\\u89E3\\u6790\\u3002\\u4E00\\u65E6\\u4E24\\u4E2A promise \\u90FD\\u88AB\\u89E3\\u6790\\uFF0C\\u5B83\\u5C06\\u8BB0\\u5F55\\u89E3\\u6790\\u503C\\u7684\\u6570\\u7EC4\\u3002\"]}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u9519\\u8BEF\\u5904\\u7406\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u4F20\\u9012\\u7ED9 \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" \\u7684\\u4EFB\\u4F55 promise \\u88AB\\u62D2\\u7EDD\\uFF0C\\u5219\\u8FD4\\u56DE\\u7684 promise \\u5C06\\u7ACB\\u5373\\u88AB\\u62D2\\u7EDD\\uFF0C\\u5E76\\u5E26\\u6709\\u7B2C\\u4E00\\u4E2A\\u88AB\\u62D2\\u7EDD\\u7684 promise \\u7684\\u539F\\u56E0\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'one');\n});\n\nconst promise2 = new Promise((resolve, reject) => {\n  setTimeout(reject, 200, 'two');\n});\n\nPromise.all([promise1, promise2])\n  .then((values) => {\n    console.log(values);\n  })\n  .catch((error) => {\n    console.error(error); // 'two'\n  });\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,r.jsx)(e.code,{children:\"promise2\"}),\" \\u5728 200 \\u6BEB\\u79D2\\u540E\\u88AB\\u62D2\\u7EDD\\uFF0C\\u5BFC\\u81F4 \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" promise \\u7ACB\\u5373\\u4EE5\\u539F\\u56E0 \",(0,r.jsx)(e.code,{children:\"'two'\"}),\" \\u62D2\\u7EDD\\u3002\"]}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u5E76\\u884C API \\u8BF7\\u6C42\"}),\"\\uFF1A\\u5F53\\u60A8\\u9700\\u8981\\u53D1\\u51FA\\u591A\\u4E2A API \\u8BF7\\u6C42\\u5E76\\u7B49\\u5F85\\u6240\\u6709\\u8BF7\\u6C42\\u5B8C\\u6210\\u624D\\u80FD\\u7EE7\\u7EED\\u65F6\\u3002\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u6279\\u91CF\\u5904\\u7406\"}),\"\\uFF1A\\u5F53\\u60A8\\u6709\\u591A\\u4E2A\\u53EF\\u4EE5\\u5E76\\u884C\\u6267\\u884C\\u7684\\u5F02\\u6B65\\u4EFB\\u52A1\\uFF0C\\u5E76\\u4E14\\u9700\\u8981\\u7B49\\u5F85\\u6240\\u6709\\u4EFB\\u52A1\\u5B8C\\u6210\\u65F6\\u3002\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u6570\\u636E\\u805A\\u5408\"}),\"\\uFF1A\\u5F53\\u60A8\\u9700\\u8981\\u4ECE\\u591A\\u4E2A\\u6765\\u6E90\\u6536\\u96C6\\u6570\\u636E\\u5E76\\u5408\\u5E76\\u7ED3\\u679C\\u65F6\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all\",children:[\"MDN Web Docs \\u4E0A\\u7684 \",(0,r.jsx)(e.code,{children:\"Promise.all()\"})]})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/primers/promises\",children:\"JavaScript Promises\\uFF1A\\u7B80\\u4ECB\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://www.digitalocean.com/community/tutorials/understanding-javascript-promises\",children:\"\\u7406\\u89E3 JavaScript Promises\"})}),`\n`]})]})}function b(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,Object.assign({},n,{children:(0,r.jsx)(d,n)})):d(n)}var x=b;return w(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var a=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var o in e)l(n,o,{get:e[o],enumerable:!0})},c=(n,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!P.call(n,i)&&i!==o&&l(n,i,{get:()=>e[i],enumerable:!(s=p(e,i))||s.enumerable});return n};var w=(n,e,o)=>(o=n!=null?a(v(n)):{},c(e||!n||!n.__esModule?l(o,\"default\",{value:n,enumerable:!0}):o,n)),f=n=>c(l({},\"__esModule\",{value:!0}),n);var t=g((T,m)=>{m.exports=_jsx_runtime});var _={};j(_,{default:()=>h,frontmatter:()=>x});var r=w(t()),x={title:\"Promise.all() \\u7684\\u7528\\u9014\\u662F\\u4EC0\\u4E48\"};function d(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" \\u662F JavaScript \\u4E2D\\u7684\\u4E00\\u79CD\\u65B9\\u6CD5\\uFF0C\\u5B83\\u63A5\\u53D7\\u4E00\\u4E2A promise \\u6570\\u7EC4\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5355\\u72EC\\u7684 promise\\u3002\\u5F53\\u6240\\u6709\\u8F93\\u5165 promise \\u90FD\\u5DF2\\u89E3\\u51B3\\u65F6\\uFF0C\\u6B64\\u8FD4\\u56DE\\u7684 promise \\u5C06\\u88AB\\u89E3\\u6790\\uFF0C\\u6216\\u8005\\u5982\\u679C\\u4EFB\\u4F55\\u8F93\\u5165 promise \\u88AB\\u62D2\\u7EDD\\uFF0C\\u5219\\u4F1A\\u88AB\\u62D2\\u7EDD\\u3002\\u5B83\\u7528\\u4E8E\\u5E76\\u884C\\u8FD0\\u884C\\u591A\\u4E2A\\u5F02\\u6B65\\u64CD\\u4F5C\\u5E76\\u7B49\\u5F85\\u5B83\\u4EEC\\u5168\\u90E8\\u5B8C\\u6210\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = Promise.resolve(3);\nconst promise2 = 42;\nconst promise3 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'foo');\n});\n\nPromise.all([promise1, promise2, promise3]).then((values) => {\n  console.log(values); // [3, 42, 'foo']\n});\n`})}),`\n`,(0,r.jsx)(e.hr,{}),`\n`,(0,r.jsx)(e.h2,{children:\"Promise.all() \\u7684\\u7528\\u9014\\u662F\\u4EC0\\u4E48\"}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u6982\\u8FF0\"}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" \\u662F \",(0,r.jsx)(e.code,{children:\"Promise\"}),\" \\u5BF9\\u8C61\\u7684\\u9759\\u6001\\u65B9\\u6CD5\\uFF0C\\u7528\\u4E8E\\u540C\\u65F6\\u5904\\u7406\\u591A\\u4E2A promise\\u3002\\u5B83\\u63A5\\u53D7\\u4E00\\u4E2A\\u53EF\\u8FED\\u4EE3\\u5BF9\\u8C61\\uFF08\\u901A\\u5E38\\u662F\\u6570\\u7EC4\\uFF09\\u7684 promise\\uFF0C\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5355\\u72EC\\u7684 promise\\uFF0C\\u5F53\\u53EF\\u8FED\\u4EE3\\u5BF9\\u8C61\\u4E2D\\u7684\\u6240\\u6709 promise \\u90FD\\u5DF2\\u89E3\\u51B3\\u65F6\\uFF0C\\u8BE5 promise \\u5C06\\u88AB\\u89E3\\u6790\\uFF0C\\u6216\\u8005\\u5982\\u679C\\u4EFB\\u4F55 promise \\u88AB\\u62D2\\u7EDD\\uFF0C\\u5219\\u8BE5 promise \\u5C06\\u88AB\\u62D2\\u7EDD\\u3002\"]}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`Promise.all(iterable);\n`})}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"iterable\"}),\"\\uFF1A\\u4E00\\u4E2A\\u53EF\\u8FED\\u4EE3\\u5BF9\\u8C61\\uFF0C\\u4F8B\\u5982\\u5305\\u542B promise \\u7684\\u6570\\u7EC4\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u5F53\\u60A8\\u5C06\\u4E00\\u4E2A promise \\u6570\\u7EC4\\u4F20\\u9012\\u7ED9 \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" \\u65F6\\uFF0C\\u5B83\\u5C06\\u8FD4\\u56DE\\u4E00\\u4E2A\\u65B0\\u7684 promise\\u3002\\u8FD9\\u4E2A\\u65B0\\u7684 promise\\uFF1A\"]}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"\\u5F53\\u6570\\u7EC4\\u4E2D\\u7684\\u6240\\u6709 promise \\u90FD\\u5DF2\\u89E3\\u51B3\\u65F6\\uFF0C\\u5C06\\u89E3\\u6790\\u3002\\u89E3\\u6790\\u540E\\u7684\\u503C\\u662F\\u8F93\\u5165 promise \\u7684\\u89E3\\u6790\\u503C\\u7684\\u6570\\u7EC4\\uFF0C\\u987A\\u5E8F\\u4E0E\\u8F93\\u5165 promise \\u76F8\\u540C\\u3002\"}),`\n`,(0,r.jsx)(e.li,{children:\"\\u4E00\\u65E6\\u4EFB\\u4F55\\u8F93\\u5165 promise \\u88AB\\u62D2\\u7EDD\\uFF0C\\u5C31\\u4F1A\\u88AB\\u62D2\\u7EDD\\u3002\\u62D2\\u7EDD\\u539F\\u56E0\\u662F\\u88AB\\u62D2\\u7EDD\\u7684\\u7B2C\\u4E00\\u4E2A promise \\u7684\\u539F\\u56E0\\u3002\"}),`\n`]}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u793A\\u4F8B\\uFF0C\\u7528\\u4E8E\\u8BF4\\u660E \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\\uFF1A\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'one');\n});\n\nconst promise2 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 200, 'two');\n});\n\nPromise.all([promise1, promise2])\n  .then((values) => {\n    console.log(values); // ['one', 'two']\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" \\u7B49\\u5F85 \",(0,r.jsx)(e.code,{children:\"promise1\"}),\" \\u548C \",(0,r.jsx)(e.code,{children:\"promise2\"}),\" \\u90FD\\u88AB\\u89E3\\u6790\\u3002\\u4E00\\u65E6\\u4E24\\u4E2A promise \\u90FD\\u88AB\\u89E3\\u6790\\uFF0C\\u5B83\\u5C06\\u8BB0\\u5F55\\u89E3\\u6790\\u503C\\u7684\\u6570\\u7EC4\\u3002\"]}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u9519\\u8BEF\\u5904\\u7406\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u4F20\\u9012\\u7ED9 \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" \\u7684\\u4EFB\\u4F55 promise \\u88AB\\u62D2\\u7EDD\\uFF0C\\u5219\\u8FD4\\u56DE\\u7684 promise \\u5C06\\u7ACB\\u5373\\u88AB\\u62D2\\u7EDD\\uFF0C\\u5E76\\u5E26\\u6709\\u7B2C\\u4E00\\u4E2A\\u88AB\\u62D2\\u7EDD\\u7684 promise \\u7684\\u539F\\u56E0\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{live:!0,children:(0,r.jsx)(e.code,{className:\"language-js\",children:`const promise1 = new Promise((resolve, reject) => {\n  setTimeout(resolve, 100, 'one');\n});\n\nconst promise2 = new Promise((resolve, reject) => {\n  setTimeout(reject, 200, 'two');\n});\n\nPromise.all([promise1, promise2])\n  .then((values) => {\n    console.log(values);\n  })\n  .catch((error) => {\n    console.error(error); // 'two'\n  });\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,r.jsx)(e.code,{children:\"promise2\"}),\" \\u5728 200 \\u6BEB\\u79D2\\u540E\\u88AB\\u62D2\\u7EDD\\uFF0C\\u5BFC\\u81F4 \",(0,r.jsx)(e.code,{children:\"Promise.all()\"}),\" promise \\u7ACB\\u5373\\u4EE5\\u539F\\u56E0 \",(0,r.jsx)(e.code,{children:\"'two'\"}),\" \\u62D2\\u7EDD\\u3002\"]}),`\n`,(0,r.jsx)(e.h3,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u5E76\\u884C API \\u8BF7\\u6C42\"}),\"\\uFF1A\\u5F53\\u60A8\\u9700\\u8981\\u53D1\\u51FA\\u591A\\u4E2A API \\u8BF7\\u6C42\\u5E76\\u7B49\\u5F85\\u6240\\u6709\\u8BF7\\u6C42\\u5B8C\\u6210\\u624D\\u80FD\\u7EE7\\u7EED\\u65F6\\u3002\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u6279\\u91CF\\u5904\\u7406\"}),\"\\uFF1A\\u5F53\\u60A8\\u6709\\u591A\\u4E2A\\u53EF\\u4EE5\\u5E76\\u884C\\u6267\\u884C\\u7684\\u5F02\\u6B65\\u4EFB\\u52A1\\uFF0C\\u5E76\\u4E14\\u9700\\u8981\\u7B49\\u5F85\\u6240\\u6709\\u4EFB\\u52A1\\u5B8C\\u6210\\u65F6\\u3002\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"\\u6570\\u636E\\u805A\\u5408\"}),\"\\uFF1A\\u5F53\\u60A8\\u9700\\u8981\\u4ECE\\u591A\\u4E2A\\u6765\\u6E90\\u6536\\u96C6\\u6570\\u636E\\u5E76\\u5408\\u5E76\\u7ED3\\u679C\\u65F6\\u3002\"]}),`\n`]}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all\",children:[\"MDN Web Docs \\u4E0A\\u7684 \",(0,r.jsx)(e.code,{children:\"Promise.all()\"})]})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://developers.google.com/web/fundamentals/primers/promises\",children:\"JavaScript Promises\\uFF1A\\u7B80\\u4ECB\"})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://www.digitalocean.com/community/tutorials/understanding-javascript-promises\",children:\"\\u7406\\u89E3 JavaScript Promises\"})}),`\n`]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(d,{...n})}):d(n)}return f(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-usecallback-hook-in-react-and-when-should-it-be-used/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-usecallback-hook-in-react-and-when-should-it-be-used/en-US.json
index e4b9b8064..2b4644ac8 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-usecallback-hook-in-react-and-when-should-it-be-used/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-usecallback-hook-in-react-and-when-should-it-be-used/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-usecallback-hook-in-react-and-when-should-it-be-used/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),f=(c,e)=>{for(var a in e)t(c,a,{get:e[a],enumerable:!0})},i=(c,e,a,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!g.call(c,r)&&r!==a&&t(c,r,{get:()=>e[r],enumerable:!(o=u(e,r))||o.enumerable});return c};var C=(c,e,a)=>(a=c!=null?h(m(c)):{},i(e||!c||!c.__esModule?t(a,\"default\",{value:c,enumerable:!0}):a,c)),k=c=>i(t({},\"__esModule\",{value:!0}),c);var l=b((w,s)=>{s.exports=_jsx_runtime});var j={};f(j,{default:()=>x,frontmatter:()=>y});var n=C(l()),y={title:\"What is the `useCallback` hook in React and when should it be used?\"};function d(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" hook in React is used to memoize functions, preventing them from being recreated on every render. This is particularly useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders. You should use \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" when you have a function that is passed as a prop to a child component and you want to avoid the child component re-rendering unnecessarily.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const memoizedCallback = useCallback(() => {\n  doSomething(a, b);\n}, [a, b]);\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is the \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" hook in React and when should it be used?\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"What is \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\"?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" hook is a React hook that returns a memoized version of the callback function that only changes if one of the dependencies has changed. It is useful for optimizing performance by preventing unnecessary re-creations of functions.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const memoizedCallback = useCallback(() => {\n  doSomething(a, b);\n}, [a, b]);\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"When should \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" be used?\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Preventing unnecessary re-renders\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When you pass a function as a prop to a child component, the child component may re-render every time the parent component re-renders, even if the function itself hasn't changed. Using \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" ensures that the function reference remains the same as long as its dependencies haven't changed, thus preventing unnecessary re-renders.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const ParentComponent = () => {\n  const [count, setCount] = useState(0);\n\n  const handleClick = useCallback(() => {\n    setCount(count + 1);\n  }, [count]);\n\n  return <ChildComponent onClick={handleClick} />;\n};\n\nconst ChildComponent = React.memo(({ onClick }) => {\n  console.log('ChildComponent rendered');\n  return <button onClick={onClick}>Click me</button>;\n});\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Optimizing performance\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In complex applications, re-creating functions on every render can be costly in terms of performance. By using \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\", you can avoid this overhead and make your application more efficient.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Caveats\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Overuse\"}),\": Overusing \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" can lead to more complex code and may not always result in performance improvements. It should be used judiciously.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Dependencies\"}),\": Ensure that all dependencies are correctly specified in the dependency array. Missing dependencies can lead to stale closures and bugs.\"]}),`\n`]}),`\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.jsxs)(e.a,{href:\"https://react.dev/reference/react/useCallback\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"useCallback\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/memo#skipping-re-rendering-when-props-are-unchanged\",children:\"React memoization techniques\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://kentcdodds.com/blog/usememo-and-usecallback\",children:[\"Understanding React's \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" and \",(0,n.jsx)(e.code,{children:\"useMemo\"})]})}),`\n`]})]})}function v(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(d,c)})):d(c)}var x=v;return k(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var C=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),b=(c,e)=>{for(var a in e)t(c,a,{get:e[a],enumerable:!0})},i=(c,e,a,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!f.call(c,r)&&r!==a&&t(c,r,{get:()=>e[r],enumerable:!(o=p(e,r))||o.enumerable});return c};var k=(c,e,a)=>(a=c!=null?u(g(c)):{},i(e||!c||!c.__esModule?t(a,\"default\",{value:c,enumerable:!0}):a,c)),y=c=>i(t({},\"__esModule\",{value:!0}),c);var s=C((R,l)=>{l.exports=_jsx_runtime});var x={};b(x,{default:()=>h,frontmatter:()=>v});var n=k(s()),v={title:\"What is the `useCallback` hook in React and when should it be used?\"};function d(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" hook in React is used to memoize functions, preventing them from being recreated on every render. This is particularly useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders. You should use \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" when you have a function that is passed as a prop to a child component and you want to avoid the child component re-rendering unnecessarily.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const memoizedCallback = useCallback(() => {\n  doSomething(a, b);\n}, [a, b]);\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is the \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" hook in React and when should it be used?\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"What is \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\"?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" hook is a React hook that returns a memoized version of the callback function that only changes if one of the dependencies has changed. It is useful for optimizing performance by preventing unnecessary re-creations of functions.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const memoizedCallback = useCallback(() => {\n  doSomething(a, b);\n}, [a, b]);\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"When should \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" be used?\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Preventing unnecessary re-renders\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When you pass a function as a prop to a child component, the child component may re-render every time the parent component re-renders, even if the function itself hasn't changed. Using \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" ensures that the function reference remains the same as long as its dependencies haven't changed, thus preventing unnecessary re-renders.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const ParentComponent = () => {\n  const [count, setCount] = useState(0);\n\n  const handleClick = useCallback(() => {\n    setCount(count + 1);\n  }, [count]);\n\n  return <ChildComponent onClick={handleClick} />;\n};\n\nconst ChildComponent = React.memo(({ onClick }) => {\n  console.log('ChildComponent rendered');\n  return <button onClick={onClick}>Click me</button>;\n});\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Optimizing performance\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In complex applications, re-creating functions on every render can be costly in terms of performance. By using \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\", you can avoid this overhead and make your application more efficient.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Caveats\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Overuse\"}),\": Overusing \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" can lead to more complex code and may not always result in performance improvements. It should be used judiciously.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Dependencies\"}),\": Ensure that all dependencies are correctly specified in the dependency array. Missing dependencies can lead to stale closures and bugs.\"]}),`\n`]}),`\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.jsxs)(e.a,{href:\"https://react.dev/reference/react/useCallback\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"useCallback\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/memo#skipping-re-rendering-when-props-are-unchanged\",children:\"React memoization techniques\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://kentcdodds.com/blog/usememo-and-usecallback\",children:[\"Understanding React's \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" and \",(0,n.jsx)(e.code,{children:\"useMemo\"})]})}),`\n`]})]})}function h(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(d,{...c})}):d(c)}return y(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-usecallback-hook-in-react-and-when-should-it-be-used/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-usecallback-hook-in-react-and-when-should-it-be-used/zh-CN.json
index 392807215..7289860b4 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-usecallback-hook-in-react-and-when-should-it-be-used/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-usecallback-hook-in-react-and-when-should-it-be-used/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-usecallback-hook-in-react-and-when-should-it-be-used/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var p=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),b=(c,e)=>{for(var l in e)r(c,l,{get:e[l],enumerable:!0})},t=(c,e,l,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of C(e))!k.call(c,a)&&a!==l&&r(c,a,{get:()=>e[a],enumerable:!(o=u(e,a))||o.enumerable});return c};var g=(c,e,l)=>(l=c!=null?s(m(c)):{},t(e||!c||!c.__esModule?r(l,\"default\",{value:c,enumerable:!0}):l,c)),f=c=>t(r({},\"__esModule\",{value:!0}),c);var i=p((H,d)=>{d.exports=_jsx_runtime});var _={};b(_,{default:()=>R,frontmatter:()=>j});var n=g(i()),j={title:\"React \\u4E2D\\u7684 `useCallback` Hook \\u662F\\u4EC0\\u4E48\\uFF1F\\u5E94\\u8BE5\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\uFF1F\"};function h(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" Hook \\u7528\\u4E8E\\u8BB0\\u5FC6\\u51FD\\u6570\\uFF0C\\u9632\\u6B62\\u5B83\\u4EEC\\u5728\\u6BCF\\u6B21\\u6E32\\u67D3\\u65F6\\u88AB\\u91CD\\u65B0\\u521B\\u5EFA\\u3002\\u5F53\\u5C06\\u56DE\\u8C03\\u4F20\\u9012\\u7ED9\\u4F9D\\u8D56\\u4E8E\\u5F15\\u7528\\u76F8\\u7B49\\u6027\\u4EE5\\u9632\\u6B62\\u4E0D\\u5FC5\\u8981\\u6E32\\u67D3\\u7684\\u4F18\\u5316\\u5B50\\u7EC4\\u4EF6\\u65F6\\uFF0C\\u8FD9\\u7279\\u522B\\u6709\\u7528\\u3002\\u5F53\\u60A8\\u6709\\u4E00\\u4E2A\\u4F5C\\u4E3A prop \\u4F20\\u9012\\u7ED9\\u5B50\\u7EC4\\u4EF6\\u7684\\u51FD\\u6570\\uFF0C\\u5E76\\u4E14\\u60A8\\u5E0C\\u671B\\u907F\\u514D\\u5B50\\u7EC4\\u4EF6\\u4E0D\\u5FC5\\u8981\\u5730\\u91CD\\u65B0\\u6E32\\u67D3\\u65F6\\uFF0C\\u5E94\\u8BE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const memoizedCallback = useCallback(() => {\n  doSomething(a, b);\n}, [a, b]);\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" Hook \\u662F\\u4EC0\\u4E48\\uFF1F\\u5E94\\u8BE5\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4EC0\\u4E48\\u662F \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useCallback\"}),\" Hook \\u662F\\u4E00\\u4E2A React Hook\\uFF0C\\u5B83\\u8FD4\\u56DE\\u4E00\\u4E2A\\u8BB0\\u5FC6\\u5316\\u7684\\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u8BE5\\u51FD\\u6570\\u4EC5\\u5728\\u5176\\u4E2D\\u4E00\\u4E2A\\u4F9D\\u8D56\\u9879\\u53D1\\u751F\\u66F4\\u6539\\u65F6\\u624D\\u4F1A\\u66F4\\u6539\\u3002\\u5B83\\u5BF9\\u4E8E\\u901A\\u8FC7\\u9632\\u6B62\\u4E0D\\u5FC5\\u8981\\u7684\\u51FD\\u6570\\u91CD\\u65B0\\u521B\\u5EFA\\u6765\\u4F18\\u5316\\u6027\\u80FD\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const memoizedCallback = useCallback(() => {\n  doSomething(a, b);\n}, [a, b]);\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4EC0\\u4E48\\u65F6\\u5019\\u5E94\\u8BE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u9632\\u6B62\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u60A8\\u5C06\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A prop \\u4F20\\u9012\\u7ED9\\u5B50\\u7EC4\\u4EF6\\u65F6\\uFF0C\\u5373\\u4F7F\\u51FD\\u6570\\u672C\\u8EAB\\u6CA1\\u6709\\u6539\\u53D8\\uFF0C\\u5B50\\u7EC4\\u4EF6\\u4E5F\\u53EF\\u80FD\\u5728\\u6BCF\\u6B21\\u7236\\u7EC4\\u4EF6\\u91CD\\u65B0\\u6E32\\u67D3\\u65F6\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" \\u53EF\\u786E\\u4FDD\\u51FD\\u6570\\u5F15\\u7528\\u4FDD\\u6301\\u4E0D\\u53D8\\uFF0C\\u53EA\\u8981\\u5176\\u4F9D\\u8D56\\u9879\\u6CA1\\u6709\\u6539\\u53D8\\uFF0C\\u4ECE\\u800C\\u9632\\u6B62\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const ParentComponent = () => {\n  const [count, setCount] = useState(0);\n\n  const handleClick = useCallback(() => {\n    setCount(count + 1);\n  }, [count]);\n\n  return <ChildComponent onClick={handleClick} />;\n};\n\nconst ChildComponent = React.memo(({ onClick }) => {\n  console.log('ChildComponent rendered');\n  return <button onClick={onClick}>Click me</button>;\n});\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4F18\\u5316\\u6027\\u80FD\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u590D\\u6742\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\uFF0C\\u5728\\u6BCF\\u6B21\\u6E32\\u67D3\\u65F6\\u91CD\\u65B0\\u521B\\u5EFA\\u51FD\\u6570\\u5728\\u6027\\u80FD\\u65B9\\u9762\\u53EF\\u80FD\\u4EE3\\u4EF7\\u9AD8\\u6602\\u3002\\u901A\\u8FC7\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\"\\uFF0C\\u60A8\\u53EF\\u4EE5\\u907F\\u514D\\u8FD9\\u79CD\\u5F00\\u9500\\uFF0C\\u5E76\\u4F7F\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u66F4\\u6709\\u6548\\u7387\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8FC7\\u5EA6\\u4F7F\\u7528\"}),\"\\uFF1A\\u8FC7\\u5EA6\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" \\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u4EE3\\u7801\\u66F4\\u590D\\u6742\\uFF0C\\u5E76\\u4E14\\u4E0D\\u4E00\\u5B9A\\u603B\\u80FD\\u63D0\\u9AD8\\u6027\\u80FD\\u3002\\u5E94\\u8C28\\u614E\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4F9D\\u8D56\\u9879\"}),\"\\uFF1A\\u786E\\u4FDD\\u6240\\u6709\\u4F9D\\u8D56\\u9879\\u90FD\\u5728\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u4E2D\\u6B63\\u786E\\u6307\\u5B9A\\u3002\\u7F3A\\u5C11\\u4F9D\\u8D56\\u9879\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u9648\\u65E7\\u7684\\u95ED\\u5305\\u548C\\u9519\\u8BEF\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useCallback\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"useCallback\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/memo#skipping-re-rendering-when-props-are-unchanged\",children:\"React memoization techniques\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://kentcdodds.com/blog/usememo-and-usecallback\",children:[\"Understanding React's \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" and \",(0,n.jsx)(e.code,{children:\"useMemo\"})]})}),`\n`]})]})}function x(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(h,c)})):h(c)}var R=x;return f(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var b=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),g=(c,e)=>{for(var l in e)a(c,l,{get:e[l],enumerable:!0})},t=(c,e,l,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!p.call(c,r)&&r!==l&&a(c,r,{get:()=>e[r],enumerable:!(o=C(e,r))||o.enumerable});return c};var f=(c,e,l)=>(l=c!=null?u(k(c)):{},t(e||!c||!c.__esModule?a(l,\"default\",{value:c,enumerable:!0}):l,c)),x=c=>t(a({},\"__esModule\",{value:!0}),c);var i=b((v,d)=>{d.exports=_jsx_runtime});var j={};g(j,{default:()=>s,frontmatter:()=>R});var n=f(i()),R={title:\"React \\u4E2D\\u7684 `useCallback` Hook \\u662F\\u4EC0\\u4E48\\uFF1F\\u5E94\\u8BE5\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\uFF1F\"};function h(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" Hook \\u7528\\u4E8E\\u8BB0\\u5FC6\\u51FD\\u6570\\uFF0C\\u9632\\u6B62\\u5B83\\u4EEC\\u5728\\u6BCF\\u6B21\\u6E32\\u67D3\\u65F6\\u88AB\\u91CD\\u65B0\\u521B\\u5EFA\\u3002\\u5F53\\u5C06\\u56DE\\u8C03\\u4F20\\u9012\\u7ED9\\u4F9D\\u8D56\\u4E8E\\u5F15\\u7528\\u76F8\\u7B49\\u6027\\u4EE5\\u9632\\u6B62\\u4E0D\\u5FC5\\u8981\\u6E32\\u67D3\\u7684\\u4F18\\u5316\\u5B50\\u7EC4\\u4EF6\\u65F6\\uFF0C\\u8FD9\\u7279\\u522B\\u6709\\u7528\\u3002\\u5F53\\u60A8\\u6709\\u4E00\\u4E2A\\u4F5C\\u4E3A prop \\u4F20\\u9012\\u7ED9\\u5B50\\u7EC4\\u4EF6\\u7684\\u51FD\\u6570\\uFF0C\\u5E76\\u4E14\\u60A8\\u5E0C\\u671B\\u907F\\u514D\\u5B50\\u7EC4\\u4EF6\\u4E0D\\u5FC5\\u8981\\u5730\\u91CD\\u65B0\\u6E32\\u67D3\\u65F6\\uFF0C\\u5E94\\u8BE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const memoizedCallback = useCallback(() => {\n  doSomething(a, b);\n}, [a, b]);\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" Hook \\u662F\\u4EC0\\u4E48\\uFF1F\\u5E94\\u8BE5\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4EC0\\u4E48\\u662F \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useCallback\"}),\" Hook \\u662F\\u4E00\\u4E2A React Hook\\uFF0C\\u5B83\\u8FD4\\u56DE\\u4E00\\u4E2A\\u8BB0\\u5FC6\\u5316\\u7684\\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u8BE5\\u51FD\\u6570\\u4EC5\\u5728\\u5176\\u4E2D\\u4E00\\u4E2A\\u4F9D\\u8D56\\u9879\\u53D1\\u751F\\u66F4\\u6539\\u65F6\\u624D\\u4F1A\\u66F4\\u6539\\u3002\\u5B83\\u5BF9\\u4E8E\\u901A\\u8FC7\\u9632\\u6B62\\u4E0D\\u5FC5\\u8981\\u7684\\u51FD\\u6570\\u91CD\\u65B0\\u521B\\u5EFA\\u6765\\u4F18\\u5316\\u6027\\u80FD\\u975E\\u5E38\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const memoizedCallback = useCallback(() => {\n  doSomething(a, b);\n}, [a, b]);\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4EC0\\u4E48\\u65F6\\u5019\\u5E94\\u8BE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u9632\\u6B62\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u60A8\\u5C06\\u4E00\\u4E2A\\u51FD\\u6570\\u4F5C\\u4E3A prop \\u4F20\\u9012\\u7ED9\\u5B50\\u7EC4\\u4EF6\\u65F6\\uFF0C\\u5373\\u4F7F\\u51FD\\u6570\\u672C\\u8EAB\\u6CA1\\u6709\\u6539\\u53D8\\uFF0C\\u5B50\\u7EC4\\u4EF6\\u4E5F\\u53EF\\u80FD\\u5728\\u6BCF\\u6B21\\u7236\\u7EC4\\u4EF6\\u91CD\\u65B0\\u6E32\\u67D3\\u65F6\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" \\u53EF\\u786E\\u4FDD\\u51FD\\u6570\\u5F15\\u7528\\u4FDD\\u6301\\u4E0D\\u53D8\\uFF0C\\u53EA\\u8981\\u5176\\u4F9D\\u8D56\\u9879\\u6CA1\\u6709\\u6539\\u53D8\\uFF0C\\u4ECE\\u800C\\u9632\\u6B62\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const ParentComponent = () => {\n  const [count, setCount] = useState(0);\n\n  const handleClick = useCallback(() => {\n    setCount(count + 1);\n  }, [count]);\n\n  return <ChildComponent onClick={handleClick} />;\n};\n\nconst ChildComponent = React.memo(({ onClick }) => {\n  console.log('ChildComponent rendered');\n  return <button onClick={onClick}>Click me</button>;\n});\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4F18\\u5316\\u6027\\u80FD\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u590D\\u6742\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\uFF0C\\u5728\\u6BCF\\u6B21\\u6E32\\u67D3\\u65F6\\u91CD\\u65B0\\u521B\\u5EFA\\u51FD\\u6570\\u5728\\u6027\\u80FD\\u65B9\\u9762\\u53EF\\u80FD\\u4EE3\\u4EF7\\u9AD8\\u6602\\u3002\\u901A\\u8FC7\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\"\\uFF0C\\u60A8\\u53EF\\u4EE5\\u907F\\u514D\\u8FD9\\u79CD\\u5F00\\u9500\\uFF0C\\u5E76\\u4F7F\\u60A8\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u66F4\\u6709\\u6548\\u7387\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8FC7\\u5EA6\\u4F7F\\u7528\"}),\"\\uFF1A\\u8FC7\\u5EA6\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" \\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u4EE3\\u7801\\u66F4\\u590D\\u6742\\uFF0C\\u5E76\\u4E14\\u4E0D\\u4E00\\u5B9A\\u603B\\u80FD\\u63D0\\u9AD8\\u6027\\u80FD\\u3002\\u5E94\\u8C28\\u614E\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4F9D\\u8D56\\u9879\"}),\"\\uFF1A\\u786E\\u4FDD\\u6240\\u6709\\u4F9D\\u8D56\\u9879\\u90FD\\u5728\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u4E2D\\u6B63\\u786E\\u6307\\u5B9A\\u3002\\u7F3A\\u5C11\\u4F9D\\u8D56\\u9879\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u9648\\u65E7\\u7684\\u95ED\\u5305\\u548C\\u9519\\u8BEF\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useCallback\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"useCallback\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/memo#skipping-re-rendering-when-props-are-unchanged\",children:\"React memoization techniques\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://kentcdodds.com/blog/usememo-and-usecallback\",children:[\"Understanding React's \",(0,n.jsx)(e.code,{children:\"useCallback\"}),\" and \",(0,n.jsx)(e.code,{children:\"useMemo\"})]})}),`\n`]})]})}function s(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(h,{...c})}):h(c)}return x(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-useid-hook-in-react-and-when-should-it-be-used/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-useid-hook-in-react-and-when-should-it-be-used/en-US.json
index 201f68ee1..09a9ee027 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-useid-hook-in-react-and-when-should-it-be-used/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-useid-hook-in-react-and-when-should-it-be-used/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-useid-hook-in-react-and-when-should-it-be-used/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var I=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),f=(i,e)=>{for(var t in e)s(i,t,{get:e[t],enumerable:!0})},o=(i,e,t,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!g.call(i,r)&&r!==t&&s(i,r,{get:()=>e[r],enumerable:!(c=u(e,r))||c.enumerable});return i};var b=(i,e,t)=>(t=i!=null?h(m(i)):{},o(e||!i||!i.__esModule?s(t,\"default\",{value:i,enumerable:!0}):t,i)),y=i=>o(s({},\"__esModule\",{value:!0}),i);var a=I((j,d)=>{d.exports=_jsx_runtime});var x={};f(x,{default:()=>w,frontmatter:()=>v});var n=b(a()),v={title:\"What is the `useId` hook in React and when should it be used?\"};function l(i){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useId\"}),\" hook in React is used to generate unique IDs for elements within a component. This is particularly useful for accessibility purposes, such as linking form inputs with their labels. It ensures that IDs are unique across the entire application, even if the component is rendered multiple times.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import { useId } from 'react';\n\nfunction MyComponent() {\n  const id = useId();\n  return (\n    <div>\n      <label htmlFor={id}>Name:</label>\n      <input id={id} type=\"text\" />\n    </div>\n  );\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is the \",(0,n.jsx)(e.code,{children:\"useId\"}),\" hook in React and when should it be used?\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Introduction to \",(0,n.jsx)(e.code,{children:\"useId\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useId\"}),\" hook is a built-in React hook introduced in React 18. It is designed to generate unique IDs that can be used within a component. This is particularly useful for ensuring that IDs are unique across the entire application, even if the component is rendered multiple times.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"When to use \",(0,n.jsx)(e.code,{children:\"useId\"})]}),`\n`,(0,n.jsx)(e.h4,{children:\"Accessibility\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"One of the primary use cases for \",(0,n.jsx)(e.code,{children:\"useId\"}),\" is to improve accessibility. For example, when creating form elements, it is important to link labels to their corresponding inputs using the \",(0,n.jsx)(e.code,{children:\"htmlFor\"}),\" attribute on the label and the \",(0,n.jsx)(e.code,{children:\"id\"}),\" attribute on the input. The \",(0,n.jsx)(e.code,{children:\"useId\"}),\" hook ensures that these IDs are unique, preventing any potential conflicts.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import { useId } from 'react';\n\nfunction MyComponent() {\n  const id = useId();\n  return (\n    <div>\n      <label htmlFor={id}>Name:</label>\n      <input id={id} type=\"text\" />\n    </div>\n  );\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Dynamic components\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When you have components that are rendered dynamically or multiple times, using \",(0,n.jsx)(e.code,{children:\"useId\"}),\" ensures that each instance of the component has a unique ID. This can prevent issues where multiple elements end up with the same ID, which can cause problems with accessibility and JavaScript behavior.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import { useId } from 'react';\n\nfunction DynamicComponent() {\n  const id = useId();\n  return (\n    <div>\n      <label htmlFor={id}>Dynamic Input:</label>\n      <input id={id} type=\"text\" />\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <div>\n      <DynamicComponent />\n      <DynamicComponent />\n    </div>\n  );\n}\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"How \",(0,n.jsx)(e.code,{children:\"useId\"}),\" works\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useId\"}),\" hook generates a unique string that can be used as an ID. This string is unique across the entire application, ensuring that there are no conflicts even if the component is rendered multiple times. The hook does not take any arguments and returns a string.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import { useId } from 'react';\n\nfunction ExampleComponent() {\n  const id = useId();\n  console.log(id); // Outputs a unique ID string\n  return <div id={id}>Unique ID Component</div>;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Best practices\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Use for accessibility\"}),\": Always use \",(0,n.jsx)(e.code,{children:\"useId\"}),\" when linking labels to inputs to ensure accessibility.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Avoid hardcoding IDs\"}),\": Instead of hardcoding IDs, use \",(0,n.jsx)(e.code,{children:\"useId\"}),\" to generate them dynamically.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Consistent usage\"}),\": Use \",(0,n.jsx)(e.code,{children:\"useId\"}),\" consistently across your application to avoid ID conflicts.\"]}),`\n`]}),`\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.jsxs)(e.a,{href:\"https://react.dev/reference/react/useId\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"useId\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Accessibility\",children:\"MDN Web Docs on accessibility\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/blog/2022/03/29/react-v18\",children:\"React 18 release notes\"})}),`\n`]})]})}function D(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(l,i)})):l(i)}var w=D;return y(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),y=(i,e)=>{for(var t in e)s(i,t,{get:e[t],enumerable:!0})},o=(i,e,t,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!g.call(i,r)&&r!==t&&s(i,r,{get:()=>e[r],enumerable:!(c=p(e,r))||c.enumerable});return i};var b=(i,e,t)=>(t=i!=null?u(I(i)):{},o(e||!i||!i.__esModule?s(t,\"default\",{value:i,enumerable:!0}):t,i)),v=i=>o(s({},\"__esModule\",{value:!0}),i);var a=f((k,d)=>{d.exports=_jsx_runtime});var w={};y(w,{default:()=>h,frontmatter:()=>D});var n=b(a()),D={title:\"What is the `useId` hook in React and when should it be used?\"};function l(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useId\"}),\" hook in React is used to generate unique IDs for elements within a component. This is particularly useful for accessibility purposes, such as linking form inputs with their labels. It ensures that IDs are unique across the entire application, even if the component is rendered multiple times.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import { useId } from 'react';\n\nfunction MyComponent() {\n  const id = useId();\n  return (\n    <div>\n      <label htmlFor={id}>Name:</label>\n      <input id={id} type=\"text\" />\n    </div>\n  );\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is the \",(0,n.jsx)(e.code,{children:\"useId\"}),\" hook in React and when should it be used?\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Introduction to \",(0,n.jsx)(e.code,{children:\"useId\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useId\"}),\" hook is a built-in React hook introduced in React 18. It is designed to generate unique IDs that can be used within a component. This is particularly useful for ensuring that IDs are unique across the entire application, even if the component is rendered multiple times.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"When to use \",(0,n.jsx)(e.code,{children:\"useId\"})]}),`\n`,(0,n.jsx)(e.h4,{children:\"Accessibility\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"One of the primary use cases for \",(0,n.jsx)(e.code,{children:\"useId\"}),\" is to improve accessibility. For example, when creating form elements, it is important to link labels to their corresponding inputs using the \",(0,n.jsx)(e.code,{children:\"htmlFor\"}),\" attribute on the label and the \",(0,n.jsx)(e.code,{children:\"id\"}),\" attribute on the input. The \",(0,n.jsx)(e.code,{children:\"useId\"}),\" hook ensures that these IDs are unique, preventing any potential conflicts.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import { useId } from 'react';\n\nfunction MyComponent() {\n  const id = useId();\n  return (\n    <div>\n      <label htmlFor={id}>Name:</label>\n      <input id={id} type=\"text\" />\n    </div>\n  );\n}\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Dynamic components\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When you have components that are rendered dynamically or multiple times, using \",(0,n.jsx)(e.code,{children:\"useId\"}),\" ensures that each instance of the component has a unique ID. This can prevent issues where multiple elements end up with the same ID, which can cause problems with accessibility and JavaScript behavior.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import { useId } from 'react';\n\nfunction DynamicComponent() {\n  const id = useId();\n  return (\n    <div>\n      <label htmlFor={id}>Dynamic Input:</label>\n      <input id={id} type=\"text\" />\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <div>\n      <DynamicComponent />\n      <DynamicComponent />\n    </div>\n  );\n}\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"How \",(0,n.jsx)(e.code,{children:\"useId\"}),\" works\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useId\"}),\" hook generates a unique string that can be used as an ID. This string is unique across the entire application, ensuring that there are no conflicts even if the component is rendered multiple times. The hook does not take any arguments and returns a string.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import { useId } from 'react';\n\nfunction ExampleComponent() {\n  const id = useId();\n  console.log(id); // Outputs a unique ID string\n  return <div id={id}>Unique ID Component</div>;\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Best practices\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Use for accessibility\"}),\": Always use \",(0,n.jsx)(e.code,{children:\"useId\"}),\" when linking labels to inputs to ensure accessibility.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Avoid hardcoding IDs\"}),\": Instead of hardcoding IDs, use \",(0,n.jsx)(e.code,{children:\"useId\"}),\" to generate them dynamically.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Consistent usage\"}),\": Use \",(0,n.jsx)(e.code,{children:\"useId\"}),\" consistently across your application to avoid ID conflicts.\"]}),`\n`]}),`\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.jsxs)(e.a,{href:\"https://react.dev/reference/react/useId\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"useId\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Accessibility\",children:\"MDN Web Docs on accessibility\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/blog/2022/03/29/react-v18\",children:\"React 18 release notes\"})}),`\n`]})]})}function h(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(l,{...i})}):l(i)}return v(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-useid-hook-in-react-and-when-should-it-be-used/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-useid-hook-in-react-and-when-should-it-be-used/zh-CN.json
index 2c871f0c0..62e054cf1 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-useid-hook-in-react-and-when-should-it-be-used/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-useid-hook-in-react-and-when-should-it-be-used/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-useid-hook-in-react-and-when-should-it-be-used/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var D=(d,n)=>()=>(n||d((n={exports:{}}).exports,n),n.exports),g=(d,n)=>{for(var c in n)r(d,c,{get:n[c],enumerable:!0})},o=(d,n,c,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of p(n))!I.call(d,i)&&i!==c&&r(d,i,{get:()=>n[i],enumerable:!(t=u(n,i))||t.enumerable});return d};var v=(d,n,c)=>(c=d!=null?a(m(d)):{},o(n||!d||!d.__esModule?r(c,\"default\",{value:d,enumerable:!0}):c,d)),f=d=>o(r({},\"__esModule\",{value:!0}),d);var h=D((k,l)=>{l.exports=_jsx_runtime});var j={};g(j,{default:()=>y,frontmatter:()=>b});var e=v(h()),b={title:\"React \\u4E2D\\u7684 `useId` Hook \\u662F\\u4EC0\\u4E48\\uFF1F\\u5E94\\u8BE5\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\uFF1F\"};function s(d){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},d.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"React \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"useId\"}),\" Hook \\u7528\\u4E8E\\u4E3A\\u7EC4\\u4EF6\\u5185\\u7684\\u5143\\u7D20\\u751F\\u6210\\u552F\\u4E00\\u7684 ID\\u3002\\u8FD9\\u5BF9\\u4E8E\\u53EF\\u8BBF\\u95EE\\u6027\\u76EE\\u7684\\u7279\\u522B\\u6709\\u7528\\uFF0C\\u4F8B\\u5982\\u5C06\\u8868\\u5355\\u8F93\\u5165\\u4E0E\\u5176\\u6807\\u7B7E\\u94FE\\u63A5\\u8D77\\u6765\\u3002\\u5B83\\u786E\\u4FDD ID \\u5728\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u662F\\u552F\\u4E00\\u7684\\uFF0C\\u5373\\u4F7F\\u7EC4\\u4EF6\\u88AB\\u591A\\u6B21\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import { useId } from 'react';\n\nfunction MyComponent() {\n  const id = useId();\n  return (\n    <div>\n      <label htmlFor={id}>Name:</label>\n      <input id={id} type=\"text\" />\n    </div>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsxs)(n.h2,{children:[\"React \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"useId\"}),\" Hook \\u662F\\u4EC0\\u4E48\\uFF1F\\u5E94\\u8BE5\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\uFF1F\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[(0,e.jsx)(n.code,{children:\"useId\"}),\" \\u7B80\\u4ECB\"]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"useId\"}),\" Hook \\u662F React 18 \\u4E2D\\u5F15\\u5165\\u7684\\u5185\\u7F6E React Hook\\u3002\\u5B83\\u65E8\\u5728\\u751F\\u6210\\u53EF\\u5728\\u7EC4\\u4EF6\\u5185\\u4F7F\\u7528\\u7684\\u552F\\u4E00 ID\\u3002\\u8FD9\\u5BF9\\u4E8E\\u786E\\u4FDD ID \\u5728\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u662F\\u552F\\u4E00\\u7684\\u7279\\u522B\\u6709\\u7528\\uFF0C\\u5373\\u4F7F\\u7EC4\\u4EF6\\u88AB\\u591A\\u6B21\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useId\"})]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u53EF\\u8BBF\\u95EE\\u6027\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"useId\"}),\" \\u7684\\u4E3B\\u8981\\u7528\\u4F8B\\u4E4B\\u4E00\\u662F\\u6539\\u5584\\u53EF\\u8BBF\\u95EE\\u6027\\u3002\\u4F8B\\u5982\\uFF0C\\u5728\\u521B\\u5EFA\\u8868\\u5355\\u5143\\u7D20\\u65F6\\uFF0C\\u4F7F\\u7528\\u6807\\u7B7E\\u4E0A\\u7684 \",(0,e.jsx)(n.code,{children:\"htmlFor\"}),\" \\u5C5E\\u6027\\u548C\\u8F93\\u5165\\u4E0A\\u7684 \",(0,e.jsx)(n.code,{children:\"id\"}),\" \\u5C5E\\u6027\\u5C06\\u6807\\u7B7E\\u94FE\\u63A5\\u5230\\u5176\\u5BF9\\u5E94\\u7684\\u8F93\\u5165\\u975E\\u5E38\\u91CD\\u8981\\u3002\",(0,e.jsx)(n.code,{children:\"useId\"}),\" Hook \\u786E\\u4FDD\\u8FD9\\u4E9B ID \\u662F\\u552F\\u4E00\\u7684\\uFF0C\\u4ECE\\u800C\\u9632\\u6B62\\u4EFB\\u4F55\\u6F5C\\u5728\\u7684\\u51B2\\u7A81\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import { useId } from 'react';\n\nfunction MyComponent() {\n  const id = useId();\n  return (\n    <div>\n      <label htmlFor={id}>Name:</label>\n      <input id={id} type=\"text\" />\n    </div>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u52A8\\u6001\\u7EC4\\u4EF6\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5F53\\u60A8\\u6709\\u52A8\\u6001\\u6E32\\u67D3\\u6216\\u591A\\u6B21\\u6E32\\u67D3\\u7684\\u7EC4\\u4EF6\\u65F6\\uFF0C\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useId\"}),\" \\u53EF\\u786E\\u4FDD\\u7EC4\\u4EF6\\u7684\\u6BCF\\u4E2A\\u5B9E\\u4F8B\\u90FD\\u5177\\u6709\\u552F\\u4E00\\u7684 ID\\u3002\\u8FD9\\u53EF\\u4EE5\\u9632\\u6B62\\u591A\\u4E2A\\u5143\\u7D20\\u6700\\u7EC8\\u5177\\u6709\\u76F8\\u540C\\u7684 ID\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u53EF\\u8BBF\\u95EE\\u6027\\u548C JavaScript \\u884C\\u4E3A\\u51FA\\u73B0\\u95EE\\u9898\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import { useId } from 'react';\n\nfunction DynamicComponent() {\n  const id = useId();\n  return (\n    <div>\n      <label htmlFor={id}>Dynamic Input:</label>\n      <input id={id} type=\"text\" />\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <div>\n      <DynamicComponent />\n      <DynamicComponent />\n    </div>\n  );\n}\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[(0,e.jsx)(n.code,{children:\"useId\"}),\" \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"useId\"}),\" Hook \\u751F\\u6210\\u53EF\\u7528\\u4F5C ID \\u7684\\u552F\\u4E00\\u5B57\\u7B26\\u4E32\\u3002\\u6B64\\u5B57\\u7B26\\u4E32\\u5728\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u662F\\u552F\\u4E00\\u7684\\uFF0C\\u5373\\u4F7F\\u7EC4\\u4EF6\\u88AB\\u591A\\u6B21\\u6E32\\u67D3\\uFF0C\\u4E5F\\u80FD\\u786E\\u4FDD\\u4E0D\\u4F1A\\u53D1\\u751F\\u51B2\\u7A81\\u3002\\u8BE5 Hook \\u4E0D\\u63A5\\u53D7\\u4EFB\\u4F55\\u53C2\\u6570\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5B57\\u7B26\\u4E32\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import { useId } from 'react';\n\nfunction ExampleComponent() {\n  const id = useId();\n  console.log(id); // Outputs a unique ID string\n  return <div id={id}>Unique ID Component</div>;\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6700\\u4F73\\u5B9E\\u8DF5\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7528\\u4E8E\\u53EF\\u8BBF\\u95EE\\u6027\"}),\"\\uFF1A\\u5C06\\u6807\\u7B7E\\u94FE\\u63A5\\u5230\\u8F93\\u5165\\u65F6\\uFF0C\\u59CB\\u7EC8\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useId\"}),\" \\u4EE5\\u786E\\u4FDD\\u53EF\\u8BBF\\u95EE\\u6027\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u907F\\u514D\\u786C\\u7F16\\u7801 ID\"}),\"\\uFF1A\\u4E0D\\u8981\\u786C\\u7F16\\u7801 ID\\uFF0C\\u800C\\u662F\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useId\"}),\" \\u52A8\\u6001\\u751F\\u6210\\u5B83\\u4EEC\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E00\\u81F4\\u4F7F\\u7528\"}),\"\\uFF1A\\u5728\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u4E00\\u81F4\\u5730\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useId\"}),\" \\u4EE5\\u907F\\u514D ID \\u51B2\\u7A81\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://react.dev/reference/react/useId\",children:[\"React documentation on \",(0,e.jsx)(n.code,{children:\"useId\"})]})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Accessibility\",children:\"MDN Web Docs on accessibility\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/blog/2022/03/29/react-v18\",children:\"React 18 release notes\"})}),`\n`]})]})}function x(d={}){let{wrapper:n}=d.components||{};return n?(0,e.jsx)(n,Object.assign({},d,{children:(0,e.jsx)(s,d)})):s(d)}var y=x;return f(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var g=(d,n)=>()=>(n||d((n={exports:{}}).exports,n),n.exports),v=(d,n)=>{for(var c in n)r(d,c,{get:n[c],enumerable:!0})},o=(d,n,c,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of m(n))!D.call(d,i)&&i!==c&&r(d,i,{get:()=>n[i],enumerable:!(t=p(n,i))||t.enumerable});return d};var f=(d,n,c)=>(c=d!=null?u(I(d)):{},o(n||!d||!d.__esModule?r(c,\"default\",{value:d,enumerable:!0}):c,d)),x=d=>o(r({},\"__esModule\",{value:!0}),d);var h=g((C,l)=>{l.exports=_jsx_runtime});var b={};v(b,{default:()=>s,frontmatter:()=>y});var e=f(h()),y={title:\"React \\u4E2D\\u7684 `useId` Hook \\u662F\\u4EC0\\u4E48\\uFF1F\\u5E94\\u8BE5\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\uFF1F\"};function a(d){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...d.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"React \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"useId\"}),\" Hook \\u7528\\u4E8E\\u4E3A\\u7EC4\\u4EF6\\u5185\\u7684\\u5143\\u7D20\\u751F\\u6210\\u552F\\u4E00\\u7684 ID\\u3002\\u8FD9\\u5BF9\\u4E8E\\u53EF\\u8BBF\\u95EE\\u6027\\u76EE\\u7684\\u7279\\u522B\\u6709\\u7528\\uFF0C\\u4F8B\\u5982\\u5C06\\u8868\\u5355\\u8F93\\u5165\\u4E0E\\u5176\\u6807\\u7B7E\\u94FE\\u63A5\\u8D77\\u6765\\u3002\\u5B83\\u786E\\u4FDD ID \\u5728\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u662F\\u552F\\u4E00\\u7684\\uFF0C\\u5373\\u4F7F\\u7EC4\\u4EF6\\u88AB\\u591A\\u6B21\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import { useId } from 'react';\n\nfunction MyComponent() {\n  const id = useId();\n  return (\n    <div>\n      <label htmlFor={id}>Name:</label>\n      <input id={id} type=\"text\" />\n    </div>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsxs)(n.h2,{children:[\"React \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"useId\"}),\" Hook \\u662F\\u4EC0\\u4E48\\uFF1F\\u5E94\\u8BE5\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\uFF1F\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[(0,e.jsx)(n.code,{children:\"useId\"}),\" \\u7B80\\u4ECB\"]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"useId\"}),\" Hook \\u662F React 18 \\u4E2D\\u5F15\\u5165\\u7684\\u5185\\u7F6E React Hook\\u3002\\u5B83\\u65E8\\u5728\\u751F\\u6210\\u53EF\\u5728\\u7EC4\\u4EF6\\u5185\\u4F7F\\u7528\\u7684\\u552F\\u4E00 ID\\u3002\\u8FD9\\u5BF9\\u4E8E\\u786E\\u4FDD ID \\u5728\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u662F\\u552F\\u4E00\\u7684\\u7279\\u522B\\u6709\\u7528\\uFF0C\\u5373\\u4F7F\\u7EC4\\u4EF6\\u88AB\\u591A\\u6B21\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,e.jsxs)(n.h3,{children:[\"\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useId\"})]}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u53EF\\u8BBF\\u95EE\\u6027\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"useId\"}),\" \\u7684\\u4E3B\\u8981\\u7528\\u4F8B\\u4E4B\\u4E00\\u662F\\u6539\\u5584\\u53EF\\u8BBF\\u95EE\\u6027\\u3002\\u4F8B\\u5982\\uFF0C\\u5728\\u521B\\u5EFA\\u8868\\u5355\\u5143\\u7D20\\u65F6\\uFF0C\\u4F7F\\u7528\\u6807\\u7B7E\\u4E0A\\u7684 \",(0,e.jsx)(n.code,{children:\"htmlFor\"}),\" \\u5C5E\\u6027\\u548C\\u8F93\\u5165\\u4E0A\\u7684 \",(0,e.jsx)(n.code,{children:\"id\"}),\" \\u5C5E\\u6027\\u5C06\\u6807\\u7B7E\\u94FE\\u63A5\\u5230\\u5176\\u5BF9\\u5E94\\u7684\\u8F93\\u5165\\u975E\\u5E38\\u91CD\\u8981\\u3002\",(0,e.jsx)(n.code,{children:\"useId\"}),\" Hook \\u786E\\u4FDD\\u8FD9\\u4E9B ID \\u662F\\u552F\\u4E00\\u7684\\uFF0C\\u4ECE\\u800C\\u9632\\u6B62\\u4EFB\\u4F55\\u6F5C\\u5728\\u7684\\u51B2\\u7A81\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import { useId } from 'react';\n\nfunction MyComponent() {\n  const id = useId();\n  return (\n    <div>\n      <label htmlFor={id}>Name:</label>\n      <input id={id} type=\"text\" />\n    </div>\n  );\n}\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"\\u52A8\\u6001\\u7EC4\\u4EF6\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5F53\\u60A8\\u6709\\u52A8\\u6001\\u6E32\\u67D3\\u6216\\u591A\\u6B21\\u6E32\\u67D3\\u7684\\u7EC4\\u4EF6\\u65F6\\uFF0C\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useId\"}),\" \\u53EF\\u786E\\u4FDD\\u7EC4\\u4EF6\\u7684\\u6BCF\\u4E2A\\u5B9E\\u4F8B\\u90FD\\u5177\\u6709\\u552F\\u4E00\\u7684 ID\\u3002\\u8FD9\\u53EF\\u4EE5\\u9632\\u6B62\\u591A\\u4E2A\\u5143\\u7D20\\u6700\\u7EC8\\u5177\\u6709\\u76F8\\u540C\\u7684 ID\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u53EF\\u8BBF\\u95EE\\u6027\\u548C JavaScript \\u884C\\u4E3A\\u51FA\\u73B0\\u95EE\\u9898\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import { useId } from 'react';\n\nfunction DynamicComponent() {\n  const id = useId();\n  return (\n    <div>\n      <label htmlFor={id}>Dynamic Input:</label>\n      <input id={id} type=\"text\" />\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <div>\n      <DynamicComponent />\n      <DynamicComponent />\n    </div>\n  );\n}\n`})}),`\n`,(0,e.jsxs)(n.h3,{children:[(0,e.jsx)(n.code,{children:\"useId\"}),\" \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"]}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"useId\"}),\" Hook \\u751F\\u6210\\u53EF\\u7528\\u4F5C ID \\u7684\\u552F\\u4E00\\u5B57\\u7B26\\u4E32\\u3002\\u6B64\\u5B57\\u7B26\\u4E32\\u5728\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u662F\\u552F\\u4E00\\u7684\\uFF0C\\u5373\\u4F7F\\u7EC4\\u4EF6\\u88AB\\u591A\\u6B21\\u6E32\\u67D3\\uFF0C\\u4E5F\\u80FD\\u786E\\u4FDD\\u4E0D\\u4F1A\\u53D1\\u751F\\u51B2\\u7A81\\u3002\\u8BE5 Hook \\u4E0D\\u63A5\\u53D7\\u4EFB\\u4F55\\u53C2\\u6570\\u5E76\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5B57\\u7B26\\u4E32\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-javascript\",children:`import { useId } from 'react';\n\nfunction ExampleComponent() {\n  const id = useId();\n  console.log(id); // Outputs a unique ID string\n  return <div id={id}>Unique ID Component</div>;\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6700\\u4F73\\u5B9E\\u8DF5\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7528\\u4E8E\\u53EF\\u8BBF\\u95EE\\u6027\"}),\"\\uFF1A\\u5C06\\u6807\\u7B7E\\u94FE\\u63A5\\u5230\\u8F93\\u5165\\u65F6\\uFF0C\\u59CB\\u7EC8\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useId\"}),\" \\u4EE5\\u786E\\u4FDD\\u53EF\\u8BBF\\u95EE\\u6027\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u907F\\u514D\\u786C\\u7F16\\u7801 ID\"}),\"\\uFF1A\\u4E0D\\u8981\\u786C\\u7F16\\u7801 ID\\uFF0C\\u800C\\u662F\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useId\"}),\" \\u52A8\\u6001\\u751F\\u6210\\u5B83\\u4EEC\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E00\\u81F4\\u4F7F\\u7528\"}),\"\\uFF1A\\u5728\\u6574\\u4E2A\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u4E00\\u81F4\\u5730\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"useId\"}),\" \\u4EE5\\u907F\\u514D ID \\u51B2\\u7A81\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.a,{href:\"https://react.dev/reference/react/useId\",children:[\"React documentation on \",(0,e.jsx)(n.code,{children:\"useId\"})]})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Accessibility\",children:\"MDN Web Docs on accessibility\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/blog/2022/03/29/react-v18\",children:\"React 18 release notes\"})}),`\n`]})]})}function s(d={}){let{wrapper:n}=d.components||{};return n?(0,e.jsx)(n,{...d,children:(0,e.jsx)(a,{...d})}):a(d)}return x(b);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-usememo-hook-in-react-and-when-should-it-be-used/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-usememo-hook-in-react-and-when-should-it-be-used/en-US.json
index 4c4808f7a..6fc80693d 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-usememo-hook-in-react-and-when-should-it-be-used/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-usememo-hook-in-react-and-when-should-it-be-used/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-usememo-hook-in-react-and-when-should-it-be-used/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),v=(o,e)=>{for(var s in e)t(o,s,{get:e[s],enumerable:!0})},a=(o,e,s,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!f.call(o,c)&&c!==s&&t(o,c,{get:()=>e[c],enumerable:!(i=u(e,c))||i.enumerable});return o};var g=(o,e,s)=>(s=o!=null?h(p(o)):{},a(e||!o||!o.__esModule?t(s,\"default\",{value:o,enumerable:!0}):s,o)),b=o=>a(t({},\"__esModule\",{value:!0}),o);var l=y((T,r)=>{r.exports=_jsx_runtime});var j={};v(j,{default:()=>w,frontmatter:()=>M});var n=g(l()),M={title:\"What is the `useMemo` hook in React and when should it be used?\"};function d(o){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",h4:\"h4\",strong:\"strong\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" hook in React is used to memoize expensive calculations so that they are only recomputed when one of the dependencies has changed. This can improve performance by avoiding unnecessary recalculations. You should use \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" when you have a computationally expensive function that doesn't need to run on every render.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is the \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" hook in React and when should it be used?\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"What is \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\"?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" hook is a built-in React hook that allows you to memoize the result of a function. This means that the function will only be re-executed when one of its dependencies changes. The primary purpose of \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" is to optimize performance by preventing unnecessary recalculations.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The syntax for \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" is as follows:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);\n`})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The first argument is a function that returns the value you want to memoize.\"}),`\n`,(0,n.jsx)(e.li,{children:\"The second argument is an array of dependencies. The memoized value will only be recomputed when one of these dependencies changes.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"When should it be used?\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Expensive calculations\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"If you have a function that performs a computationally expensive calculation, you can use \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" to ensure that this calculation is only performed when necessary.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const expensiveCalculation = (num) => {\n  // Some expensive calculation\n  return num * 2;\n};\n\nconst MyComponent = ({ number }) => {\n  const memoizedValue = useMemo(() => expensiveCalculation(number), [number]);\n\n  return <div>{memoizedValue}</div>;\n};\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Avoiding unnecessary renders\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useMemo\"}),\" can also be useful for avoiding unnecessary renders of child components. If a child component depends on a value that is expensive to compute, you can use \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" to ensure that the value is only recomputed when necessary.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const MyComponent = ({ items }) => {\n  const sortedItems = useMemo(() => {\n    return items.sort((a, b) => a - b);\n  }, [items]);\n\n  return <ChildComponent sortedItems={sortedItems} />;\n};\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Caveats\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Overuse\"}),\": Overusing \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" can lead to more complex code without significant performance benefits. It should be used judiciously.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Dependencies\"}),\": Make sure to correctly specify all dependencies. Missing dependencies can lead to stale values, while extra dependencies can lead to unnecessary recalculations.\"]}),`\n`]}),`\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.jsxs)(e.a,{href:\"https://react.dev/reference/react/useMemo\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"useMemo\"})]})}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://kentcdodds.com/blog/usememo-and-usecallback\",children:\"When to useMemo and useCallback\"}),\" by Kent C. Dodds\"]}),`\n`]})]})}function x(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(d,o)})):d(o)}var w=x;return b(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),g=(o,e)=>{for(var c in e)t(o,c,{get:e[c],enumerable:!0})},a=(o,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!y.call(o,s)&&s!==c&&t(o,s,{get:()=>e[s],enumerable:!(i=m(e,s))||i.enumerable});return o};var M=(o,e,c)=>(c=o!=null?u(f(o)):{},a(e||!o||!o.__esModule?t(c,\"default\",{value:o,enumerable:!0}):c,o)),b=o=>a(t({},\"__esModule\",{value:!0}),o);var l=v((j,r)=>{r.exports=_jsx_runtime});var w={};g(w,{default:()=>h,frontmatter:()=>x});var n=M(l()),x={title:\"What is the `useMemo` hook in React and when should it be used?\"};function d(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" hook in React is used to memoize expensive calculations so that they are only recomputed when one of the dependencies has changed. This can improve performance by avoiding unnecessary recalculations. You should use \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" when you have a computationally expensive function that doesn't need to run on every render.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is the \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" hook in React and when should it be used?\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"What is \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\"?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" hook is a built-in React hook that allows you to memoize the result of a function. This means that the function will only be re-executed when one of its dependencies changes. The primary purpose of \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" is to optimize performance by preventing unnecessary recalculations.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The syntax for \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" is as follows:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);\n`})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The first argument is a function that returns the value you want to memoize.\"}),`\n`,(0,n.jsx)(e.li,{children:\"The second argument is an array of dependencies. The memoized value will only be recomputed when one of these dependencies changes.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"When should it be used?\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Expensive calculations\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"If you have a function that performs a computationally expensive calculation, you can use \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" to ensure that this calculation is only performed when necessary.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const expensiveCalculation = (num) => {\n  // Some expensive calculation\n  return num * 2;\n};\n\nconst MyComponent = ({ number }) => {\n  const memoizedValue = useMemo(() => expensiveCalculation(number), [number]);\n\n  return <div>{memoizedValue}</div>;\n};\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"Avoiding unnecessary renders\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useMemo\"}),\" can also be useful for avoiding unnecessary renders of child components. If a child component depends on a value that is expensive to compute, you can use \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" to ensure that the value is only recomputed when necessary.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const MyComponent = ({ items }) => {\n  const sortedItems = useMemo(() => {\n    return items.sort((a, b) => a - b);\n  }, [items]);\n\n  return <ChildComponent sortedItems={sortedItems} />;\n};\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Caveats\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Overuse\"}),\": Overusing \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" can lead to more complex code without significant performance benefits. It should be used judiciously.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Dependencies\"}),\": Make sure to correctly specify all dependencies. Missing dependencies can lead to stale values, while extra dependencies can lead to unnecessary recalculations.\"]}),`\n`]}),`\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.jsxs)(e.a,{href:\"https://react.dev/reference/react/useMemo\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"useMemo\"})]})}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://kentcdodds.com/blog/usememo-and-usecallback\",children:\"When to useMemo and useCallback\"}),\" by Kent C. Dodds\"]}),`\n`]})]})}function h(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(d,{...o})}):d(o)}return b(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-usememo-hook-in-react-and-when-should-it-be-used/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-usememo-hook-in-react-and-when-should-it-be-used/zh-CN.json
index 0c1fb0815..1e2e09196 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-usememo-hook-in-react-and-when-should-it-be-used/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-usememo-hook-in-react-and-when-should-it-be-used/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-usememo-hook-in-react-and-when-should-it-be-used/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var g=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),b=(c,e)=>{for(var o in e)l(c,o,{get:e[o],enumerable:!0})},i=(c,e,o,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!M.call(c,r)&&r!==o&&l(c,r,{get:()=>e[r],enumerable:!(d=m(e,r))||d.enumerable});return c};var x=(c,e,o)=>(o=c!=null?a(p(c)):{},i(e||!c||!c.__esModule?l(o,\"default\",{value:c,enumerable:!0}):o,c)),v=c=>i(l({},\"__esModule\",{value:!0}),c);var s=g((R,t)=>{t.exports=_jsx_runtime});var k={};b(k,{default:()=>f,frontmatter:()=>j});var n=x(s()),j={title:\"React \\u4E2D\\u7684 `useMemo` Hook \\u662F\\u4EC0\\u4E48\\uFF1F\\u5E94\\u8BE5\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\u5B83\\uFF1F\"};function h(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",h4:\"h4\",strong:\"strong\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" Hook \\u7528\\u4E8E\\u8BB0\\u5FC6\\u6602\\u8D35\\u7684\\u8BA1\\u7B97\\uFF0C\\u4EE5\\u4FBF\\u4EC5\\u5728\\u5176\\u4E2D\\u4E00\\u4E2A\\u4F9D\\u8D56\\u9879\\u53D1\\u751F\\u66F4\\u6539\\u65F6\\u624D\\u91CD\\u65B0\\u8BA1\\u7B97\\u5B83\\u4EEC\\u3002 \\u8FD9\\u53EF\\u4EE5\\u901A\\u8FC7\\u907F\\u514D\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u8BA1\\u7B97\\u6765\\u63D0\\u9AD8\\u6027\\u80FD\\u3002 \\u5F53\\u60A8\\u6709\\u4E00\\u4E2A\\u8BA1\\u7B97\\u91CF\\u5F88\\u5927\\u7684\\u51FD\\u6570\\uFF0C\\u5E76\\u4E14\\u4E0D\\u9700\\u8981\\u5728\\u6BCF\\u6B21\\u6E32\\u67D3\\u65F6\\u8FD0\\u884C\\u5B83\\u65F6\\uFF0C\\u60A8\\u5E94\\u8BE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" Hook \\u662F\\u4EC0\\u4E48\\uFF1F\\u5E94\\u8BE5\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\u5B83\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4EC0\\u4E48\\u662F \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useMemo\"}),\" Hook \\u662F\\u4E00\\u4E2A\\u5185\\u7F6E\\u7684 React Hook\\uFF0C\\u5B83\\u5141\\u8BB8\\u60A8\\u8BB0\\u5FC6\\u51FD\\u6570\\u7684\\u8BA1\\u7B97\\u7ED3\\u679C\\u3002 \\u8FD9\\u610F\\u5473\\u7740\\u8BE5\\u51FD\\u6570\\u4EC5\\u5728\\u5176\\u4F9D\\u8D56\\u9879\\u4E4B\\u4E00\\u53D1\\u751F\\u66F4\\u6539\\u65F6\\u624D\\u4F1A\\u91CD\\u65B0\\u6267\\u884C\\u3002 \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" \\u7684\\u4E3B\\u8981\\u76EE\\u7684\\u662F\\u901A\\u8FC7\\u9632\\u6B62\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u8BA1\\u7B97\\u6765\\u4F18\\u5316\\u6027\\u80FD\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useMemo\"}),\" \\u7684\\u8BED\\u6CD5\\u5982\\u4E0B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);\n`})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u662F\\u4E00\\u4E2A\\u8FD4\\u56DE\\u60A8\\u8981\\u8BB0\\u5FC6\\u7684\\u503C\\u7684\\u51FD\\u6570\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u662F\\u4E00\\u4E2A\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u3002 \\u4EC5\\u5F53\\u8FD9\\u4E9B\\u4F9D\\u8D56\\u9879\\u4E4B\\u4E00\\u53D1\\u751F\\u66F4\\u6539\\u65F6\\uFF0C\\u624D\\u4F1A\\u91CD\\u65B0\\u8BA1\\u7B97\\u8BB0\\u5FC6\\u503C\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EC0\\u4E48\\u65F6\\u5019\\u5E94\\u8BE5\\u4F7F\\u7528\\u5B83\\uFF1F\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u6602\\u8D35\\u7684\\u8BA1\\u7B97\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u60A8\\u6709\\u4E00\\u4E2A\\u6267\\u884C\\u8BA1\\u7B97\\u91CF\\u5F88\\u5927\\u7684\\u8BA1\\u7B97\\u7684\\u51FD\\u6570\\uFF0C\\u5219\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" \\u786E\\u4FDD\\u4EC5\\u5728\\u5FC5\\u8981\\u65F6\\u624D\\u6267\\u884C\\u6B64\\u8BA1\\u7B97\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const expensiveCalculation = (num) => {\n  // Some expensive calculation\n  return num * 2;\n};\n\nconst MyComponent = ({ number }) => {\n  const memoizedValue = useMemo(() => expensiveCalculation(number), [number]);\n\n  return <div>{memoizedValue}</div>;\n};\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u907F\\u514D\\u4E0D\\u5FC5\\u8981\\u7684\\u6E32\\u67D3\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useMemo\"}),\" \\u8FD8\\u53EF\\u4EE5\\u7528\\u4E8E\\u907F\\u514D\\u5B50\\u7EC4\\u4EF6\\u7684\\u4E0D\\u5FC5\\u8981\\u6E32\\u67D3\\u3002 \\u5982\\u679C\\u5B50\\u7EC4\\u4EF6\\u4F9D\\u8D56\\u4E8E\\u8BA1\\u7B97\\u91CF\\u5F88\\u5927\\u7684\\u503C\\uFF0C\\u5219\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" \\u786E\\u4FDD\\u4EC5\\u5728\\u5FC5\\u8981\\u65F6\\u624D\\u91CD\\u65B0\\u8BA1\\u7B97\\u8BE5\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const MyComponent = ({ items }) => {\n  const sortedItems = useMemo(() => {\n    return items.sort((a, b) => a - b);\n  }, [items]);\n\n  return <ChildComponent sortedItems={sortedItems} />;\n};\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8FC7\\u5EA6\\u4F7F\\u7528\"}),\"\\uFF1A\\u8FC7\\u5EA6\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" \\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u4EE3\\u7801\\u66F4\\u590D\\u6742\\uFF0C\\u800C\\u6CA1\\u6709\\u663E\\u7740\\u7684\\u6027\\u80FD\\u4F18\\u52BF\\u3002 \\u5E94\\u8C28\\u614E\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4F9D\\u8D56\\u9879\"}),\"\\uFF1A\\u786E\\u4FDD\\u6B63\\u786E\\u6307\\u5B9A\\u6240\\u6709\\u4F9D\\u8D56\\u9879\\u3002 \\u7F3A\\u5C11\\u4F9D\\u8D56\\u9879\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u503C\\u8FC7\\u65F6\\uFF0C\\u800C\\u989D\\u5916\\u7684\\u4F9D\\u8D56\\u9879\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u8BA1\\u7B97\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useMemo\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"useMemo\"})]})}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://kentcdodds.com/blog/usememo-and-usecallback\",children:\"When to useMemo and useCallback\"}),\" by Kent C. Dodds\"]}),`\n`]})]})}function C(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(h,c)})):h(c)}var f=C;return v(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),b=(c,e)=>{for(var o in e)l(c,o,{get:e[o],enumerable:!0})},i=(c,e,o,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!g.call(c,r)&&r!==o&&l(c,r,{get:()=>e[r],enumerable:!(d=u(e,r))||d.enumerable});return c};var v=(c,e,o)=>(o=c!=null?m(M(c)):{},i(e||!c||!c.__esModule?l(o,\"default\",{value:c,enumerable:!0}):o,c)),C=c=>i(l({},\"__esModule\",{value:!0}),c);var s=x((_,t)=>{t.exports=_jsx_runtime});var f={};b(f,{default:()=>a,frontmatter:()=>j});var n=v(s()),j={title:\"React \\u4E2D\\u7684 `useMemo` Hook \\u662F\\u4EC0\\u4E48\\uFF1F\\u5E94\\u8BE5\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\u5B83\\uFF1F\"};function h(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" Hook \\u7528\\u4E8E\\u8BB0\\u5FC6\\u6602\\u8D35\\u7684\\u8BA1\\u7B97\\uFF0C\\u4EE5\\u4FBF\\u4EC5\\u5728\\u5176\\u4E2D\\u4E00\\u4E2A\\u4F9D\\u8D56\\u9879\\u53D1\\u751F\\u66F4\\u6539\\u65F6\\u624D\\u91CD\\u65B0\\u8BA1\\u7B97\\u5B83\\u4EEC\\u3002 \\u8FD9\\u53EF\\u4EE5\\u901A\\u8FC7\\u907F\\u514D\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u8BA1\\u7B97\\u6765\\u63D0\\u9AD8\\u6027\\u80FD\\u3002 \\u5F53\\u60A8\\u6709\\u4E00\\u4E2A\\u8BA1\\u7B97\\u91CF\\u5F88\\u5927\\u7684\\u51FD\\u6570\\uFF0C\\u5E76\\u4E14\\u4E0D\\u9700\\u8981\\u5728\\u6BCF\\u6B21\\u6E32\\u67D3\\u65F6\\u8FD0\\u884C\\u5B83\\u65F6\\uFF0C\\u60A8\\u5E94\\u8BE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" Hook \\u662F\\u4EC0\\u4E48\\uFF1F\\u5E94\\u8BE5\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\u5B83\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4EC0\\u4E48\\u662F \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useMemo\"}),\" Hook \\u662F\\u4E00\\u4E2A\\u5185\\u7F6E\\u7684 React Hook\\uFF0C\\u5B83\\u5141\\u8BB8\\u60A8\\u8BB0\\u5FC6\\u51FD\\u6570\\u7684\\u8BA1\\u7B97\\u7ED3\\u679C\\u3002 \\u8FD9\\u610F\\u5473\\u7740\\u8BE5\\u51FD\\u6570\\u4EC5\\u5728\\u5176\\u4F9D\\u8D56\\u9879\\u4E4B\\u4E00\\u53D1\\u751F\\u66F4\\u6539\\u65F6\\u624D\\u4F1A\\u91CD\\u65B0\\u6267\\u884C\\u3002 \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" \\u7684\\u4E3B\\u8981\\u76EE\\u7684\\u662F\\u901A\\u8FC7\\u9632\\u6B62\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u8BA1\\u7B97\\u6765\\u4F18\\u5316\\u6027\\u80FD\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useMemo\"}),\" \\u7684\\u8BED\\u6CD5\\u5982\\u4E0B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);\n`})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u662F\\u4E00\\u4E2A\\u8FD4\\u56DE\\u60A8\\u8981\\u8BB0\\u5FC6\\u7684\\u503C\\u7684\\u51FD\\u6570\\u3002\"}),`\n`,(0,n.jsx)(e.li,{children:\"\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u662F\\u4E00\\u4E2A\\u4F9D\\u8D56\\u9879\\u6570\\u7EC4\\u3002 \\u4EC5\\u5F53\\u8FD9\\u4E9B\\u4F9D\\u8D56\\u9879\\u4E4B\\u4E00\\u53D1\\u751F\\u66F4\\u6539\\u65F6\\uFF0C\\u624D\\u4F1A\\u91CD\\u65B0\\u8BA1\\u7B97\\u8BB0\\u5FC6\\u503C\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4EC0\\u4E48\\u65F6\\u5019\\u5E94\\u8BE5\\u4F7F\\u7528\\u5B83\\uFF1F\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u6602\\u8D35\\u7684\\u8BA1\\u7B97\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u60A8\\u6709\\u4E00\\u4E2A\\u6267\\u884C\\u8BA1\\u7B97\\u91CF\\u5F88\\u5927\\u7684\\u8BA1\\u7B97\\u7684\\u51FD\\u6570\\uFF0C\\u5219\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" \\u786E\\u4FDD\\u4EC5\\u5728\\u5FC5\\u8981\\u65F6\\u624D\\u6267\\u884C\\u6B64\\u8BA1\\u7B97\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const expensiveCalculation = (num) => {\n  // Some expensive calculation\n  return num * 2;\n};\n\nconst MyComponent = ({ number }) => {\n  const memoizedValue = useMemo(() => expensiveCalculation(number), [number]);\n\n  return <div>{memoizedValue}</div>;\n};\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u907F\\u514D\\u4E0D\\u5FC5\\u8981\\u7684\\u6E32\\u67D3\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useMemo\"}),\" \\u8FD8\\u53EF\\u4EE5\\u7528\\u4E8E\\u907F\\u514D\\u5B50\\u7EC4\\u4EF6\\u7684\\u4E0D\\u5FC5\\u8981\\u6E32\\u67D3\\u3002 \\u5982\\u679C\\u5B50\\u7EC4\\u4EF6\\u4F9D\\u8D56\\u4E8E\\u8BA1\\u7B97\\u91CF\\u5F88\\u5927\\u7684\\u503C\\uFF0C\\u5219\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" \\u786E\\u4FDD\\u4EC5\\u5728\\u5FC5\\u8981\\u65F6\\u624D\\u91CD\\u65B0\\u8BA1\\u7B97\\u8BE5\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const MyComponent = ({ items }) => {\n  const sortedItems = useMemo(() => {\n    return items.sort((a, b) => a - b);\n  }, [items]);\n\n  return <ChildComponent sortedItems={sortedItems} />;\n};\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8FC7\\u5EA6\\u4F7F\\u7528\"}),\"\\uFF1A\\u8FC7\\u5EA6\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useMemo\"}),\" \\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u4EE3\\u7801\\u66F4\\u590D\\u6742\\uFF0C\\u800C\\u6CA1\\u6709\\u663E\\u7740\\u7684\\u6027\\u80FD\\u4F18\\u52BF\\u3002 \\u5E94\\u8C28\\u614E\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u4F9D\\u8D56\\u9879\"}),\"\\uFF1A\\u786E\\u4FDD\\u6B63\\u786E\\u6307\\u5B9A\\u6240\\u6709\\u4F9D\\u8D56\\u9879\\u3002 \\u7F3A\\u5C11\\u4F9D\\u8D56\\u9879\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u503C\\u8FC7\\u65F6\\uFF0C\\u800C\\u989D\\u5916\\u7684\\u4F9D\\u8D56\\u9879\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u8BA1\\u7B97\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useMemo\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"useMemo\"})]})}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://kentcdodds.com/blog/usememo-and-usecallback\",children:\"When to useMemo and useCallback\"}),\" by Kent C. Dodds\"]}),`\n`]})]})}function a(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(h,{...c})}):h(c)}return C(f);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-usereducer-hook-in-react-and-when-should-it-be-used/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-usereducer-hook-in-react-and-when-should-it-be-used/en-US.json
index c6961787a..660cc723d 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-usereducer-hook-in-react-and-when-should-it-be-used/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-usereducer-hook-in-react-and-when-should-it-be-used/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-usereducer-hook-in-react-and-when-should-it-be-used/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),R=(t,e)=>{for(var r in e)a(t,r,{get:e[r],enumerable:!0})},o=(t,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!g.call(t,c)&&c!==r&&a(t,c,{get:()=>e[c],enumerable:!(i=l(e,c))||i.enumerable});return t};var v=(t,e,r)=>(r=t!=null?h(m(t)):{},o(e||!t||!t.__esModule?a(r,\"default\",{value:t,enumerable:!0}):r,t)),w=t=>o(a({},\"__esModule\",{value:!0}),t);var d=f((S,s)=>{s.exports=_jsx_runtime});var k={};R(k,{default:()=>b,frontmatter:()=>x});var n=v(d()),x={title:\"What is the `useReducer` hook in React and when should it be used?\"};function u(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",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 \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" hook in React is used for managing complex state logic in functional components. It is an alternative to \",(0,n.jsx)(e.code,{children:\"useState\"}),\" and is particularly useful when the state has multiple sub-values or when the next state depends on the previous one. It takes a reducer function and an initial state as arguments and returns the current state and a dispatch function.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [state, dispatch] = useReducer(reducer, initialState);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" when you have complex state logic that involves multiple sub-values or when the next state depends on the previous state.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is the \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" hook in React and when should it be used?\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Introduction to \",(0,n.jsx)(e.code,{children:\"useReducer\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" hook is a React hook that is used for managing state in functional components. It is an alternative to the \",(0,n.jsx)(e.code,{children:\"useState\"}),\" hook and is particularly useful for managing more complex state logic. The \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" hook is similar to the \",(0,n.jsx)(e.code,{children:\"reduce\"}),\" function in JavaScript arrays, where you have a reducer function that determines how the state should change in response to actions.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" hook takes two arguments: a reducer function and an initial state. It returns an array with the current state and a dispatch function.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [state, dispatch] = useReducer(reducer, initialState);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Reducer function\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The reducer function is a pure function that takes the current state and an action as arguments and returns the new state. The action is an object that typically has a \",(0,n.jsx)(e.code,{children:\"type\"}),\" property and an optional \",(0,n.jsx)(e.code,{children:\"payload\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`function reducer(state, action) {\n  switch (action.type) {\n    case 'increment':\n      return { count: state.count + 1 };\n    case 'decrement':\n      return { count: state.count - 1 };\n    default:\n      throw new Error();\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Example usage\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here is a simple example of using \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" to manage a counter state:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useReducer } from 'react';\n\nconst initialState = { count: 0 };\n\nfunction reducer(state, action) {\n  switch (action.type) {\n    case 'increment':\n      return { count: state.count + 1 };\n    case 'decrement':\n      return { count: state.count - 1 };\n    default:\n      throw new Error();\n  }\n}\n\nfunction Counter() {\n  const [state, dispatch] = useReducer(reducer, initialState);\n\n  return (\n    <div>\n      <p>Count: {state.count}</p>\n      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>\n      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>\n    </div>\n  );\n}\n\nexport default Counter;\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"When to use \",(0,n.jsx)(e.code,{children:\"useReducer\"})]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Complex state logic\"}),\": Use \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" when you have complex state logic that involves multiple sub-values or when the next state depends on the previous state.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"State management\"}),\": It is useful when you need a more predictable state management pattern, similar to Redux.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Performance optimization\"}),\": \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" can help optimize performance in certain scenarios by avoiding unnecessary re-renders.\"]}),`\n`]}),`\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.jsxs)(e.a,{href:\"https://react.dev/reference/react/useReducer\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"useReducer\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/learn/scaling-up-with-reducer-and-context\",children:[\"Using the \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" hook\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://www.smashingmagazine.com/2020/06/redux-patterns-use-reducer-react/\",children:[\"A complete guide to \",(0,n.jsx)(e.code,{children:\"useReducer\"})]})}),`\n`]})]})}function y(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var b=y;return w(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var l=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var R=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var r in e)a(t,r,{get:e[r],enumerable:!0})},o=(t,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!f.call(t,c)&&c!==r&&a(t,c,{get:()=>e[c],enumerable:!(i=p(e,c))||i.enumerable});return t};var w=(t,e,r)=>(r=t!=null?l(g(t)):{},o(e||!t||!t.__esModule?a(r,\"default\",{value:t,enumerable:!0}):r,t)),x=t=>o(a({},\"__esModule\",{value:!0}),t);var d=R((j,s)=>{s.exports=_jsx_runtime});var k={};v(k,{default:()=>h,frontmatter:()=>y});var n=w(d()),y={title:\"What is the `useReducer` hook in React and when should it be used?\"};function u(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...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 \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" hook in React is used for managing complex state logic in functional components. It is an alternative to \",(0,n.jsx)(e.code,{children:\"useState\"}),\" and is particularly useful when the state has multiple sub-values or when the next state depends on the previous one. It takes a reducer function and an initial state as arguments and returns the current state and a dispatch function.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [state, dispatch] = useReducer(reducer, initialState);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Use \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" when you have complex state logic that involves multiple sub-values or when the next state depends on the previous state.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is the \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" hook in React and when should it be used?\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Introduction to \",(0,n.jsx)(e.code,{children:\"useReducer\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" hook is a React hook that is used for managing state in functional components. It is an alternative to the \",(0,n.jsx)(e.code,{children:\"useState\"}),\" hook and is particularly useful for managing more complex state logic. The \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" hook is similar to the \",(0,n.jsx)(e.code,{children:\"reduce\"}),\" function in JavaScript arrays, where you have a reducer function that determines how the state should change in response to actions.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" hook takes two arguments: a reducer function and an initial state. It returns an array with the current state and a dispatch function.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [state, dispatch] = useReducer(reducer, initialState);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Reducer function\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The reducer function is a pure function that takes the current state and an action as arguments and returns the new state. The action is an object that typically has a \",(0,n.jsx)(e.code,{children:\"type\"}),\" property and an optional \",(0,n.jsx)(e.code,{children:\"payload\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`function reducer(state, action) {\n  switch (action.type) {\n    case 'increment':\n      return { count: state.count + 1 };\n    case 'decrement':\n      return { count: state.count - 1 };\n    default:\n      throw new Error();\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Example usage\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here is a simple example of using \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" to manage a counter state:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useReducer } from 'react';\n\nconst initialState = { count: 0 };\n\nfunction reducer(state, action) {\n  switch (action.type) {\n    case 'increment':\n      return { count: state.count + 1 };\n    case 'decrement':\n      return { count: state.count - 1 };\n    default:\n      throw new Error();\n  }\n}\n\nfunction Counter() {\n  const [state, dispatch] = useReducer(reducer, initialState);\n\n  return (\n    <div>\n      <p>Count: {state.count}</p>\n      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>\n      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>\n    </div>\n  );\n}\n\nexport default Counter;\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"When to use \",(0,n.jsx)(e.code,{children:\"useReducer\"})]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Complex state logic\"}),\": Use \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" when you have complex state logic that involves multiple sub-values or when the next state depends on the previous state.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"State management\"}),\": It is useful when you need a more predictable state management pattern, similar to Redux.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Performance optimization\"}),\": \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" can help optimize performance in certain scenarios by avoiding unnecessary re-renders.\"]}),`\n`]}),`\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.jsxs)(e.a,{href:\"https://react.dev/reference/react/useReducer\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"useReducer\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/learn/scaling-up-with-reducer-and-context\",children:[\"Using the \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" hook\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://www.smashingmagazine.com/2020/06/redux-patterns-use-reducer-react/\",children:[\"A complete guide to \",(0,n.jsx)(e.code,{children:\"useReducer\"})]})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(u,{...t})}):u(t)}return x(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-usereducer-hook-in-react-and-when-should-it-be-used/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-usereducer-hook-in-react-and-when-should-it-be-used/zh-CN.json
index 0cc20b7ba..82c6809e2 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-usereducer-hook-in-react-and-when-should-it-be-used/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-usereducer-hook-in-react-and-when-should-it-be-used/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-usereducer-hook-in-react-and-when-should-it-be-used/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var d=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var c in e)d(t,c,{get:e[c],enumerable:!0})},i=(t,e,c,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!m.call(t,r)&&r!==c&&d(t,r,{get:()=>e[r],enumerable:!(a=l(e,r))||a.enumerable});return t};var x=(t,e,c)=>(c=t!=null?h(R(t)):{},i(e||!t||!t.__esModule?d(c,\"default\",{value:t,enumerable:!0}):c,t)),j=t=>i(d({},\"__esModule\",{value:!0}),t);var o=g((C,s)=>{s.exports=_jsx_runtime});var H={};f(H,{default:()=>v,frontmatter:()=>k});var n=x(o()),k={title:\"React \\u4E2D\\u7684 `useReducer` Hook \\u662F\\u4EC0\\u4E48\\uFF1F\\u5E94\\u8BE5\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\u5B83\\uFF1F\"};function u(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\",strong:\"strong\",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:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" Hook \\u7528\\u4E8E\\u5728\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E2D\\u7BA1\\u7406\\u590D\\u6742\\u7684 state \\u903B\\u8F91\\u3002\\u5B83\\u662F \",(0,n.jsx)(e.code,{children:\"useState\"}),\" \\u7684\\u66FF\\u4EE3\\u65B9\\u6848\\uFF0C\\u5F53 state \\u5177\\u6709\\u591A\\u4E2A\\u5B50\\u503C\\u6216\\u4E0B\\u4E00\\u4E2A state \\u4F9D\\u8D56\\u4E8E\\u524D\\u4E00\\u4E2A state \\u65F6\\uFF0C\\u5B83\\u7279\\u522B\\u6709\\u7528\\u3002\\u5B83\\u63A5\\u53D7\\u4E00\\u4E2A reducer \\u51FD\\u6570\\u548C\\u4E00\\u4E2A\\u521D\\u59CB state \\u4F5C\\u4E3A\\u53C2\\u6570\\uFF0C\\u5E76\\u8FD4\\u56DE\\u5F53\\u524D state \\u548C\\u4E00\\u4E2A dispatch \\u51FD\\u6570\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [state, dispatch] = useReducer(reducer, initialState);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u60A8\\u6709\\u6D89\\u53CA\\u591A\\u4E2A\\u5B50\\u503C\\u7684\\u590D\\u6742 state \\u903B\\u8F91\\uFF0C\\u6216\\u8005\\u4E0B\\u4E00\\u4E2A state \\u4F9D\\u8D56\\u4E8E\\u524D\\u4E00\\u4E2A state \\u65F6\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" Hook \\u662F\\u4EC0\\u4E48\\uFF1F\\u5E94\\u8BE5\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\u5B83\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"useReducer\"}),\" \\u7B80\\u4ECB\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useReducer\"}),\" Hook \\u662F\\u4E00\\u4E2A React Hook\\uFF0C\\u7528\\u4E8E\\u5728\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E2D\\u7BA1\\u7406 state\\u3002\\u5B83\\u662F \",(0,n.jsx)(e.code,{children:\"useState\"}),\" Hook \\u7684\\u66FF\\u4EE3\\u65B9\\u6848\\uFF0C\\u7279\\u522B\\u9002\\u7528\\u4E8E\\u7BA1\\u7406\\u66F4\\u590D\\u6742\\u7684 state \\u903B\\u8F91\\u3002\",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" Hook \\u7C7B\\u4F3C\\u4E8E JavaScript \\u6570\\u7EC4\\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"reduce\"}),\" \\u51FD\\u6570\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u4E00\\u4E2A reducer \\u51FD\\u6570\\u6765\\u786E\\u5B9A state \\u5E94\\u8BE5\\u5982\\u4F55\\u54CD\\u5E94\\u64CD\\u4F5C\\u800C\\u6539\\u53D8\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useReducer\"}),\" Hook \\u63A5\\u53D7\\u4E24\\u4E2A\\u53C2\\u6570\\uFF1A\\u4E00\\u4E2A reducer \\u51FD\\u6570\\u548C\\u4E00\\u4E2A\\u521D\\u59CB state\\u3002\\u5B83\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5305\\u542B\\u5F53\\u524D state \\u548C\\u4E00\\u4E2A dispatch \\u51FD\\u6570\\u7684\\u6570\\u7EC4\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [state, dispatch] = useReducer(reducer, initialState);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Reducer \\u51FD\\u6570\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"reducer \\u51FD\\u6570\\u662F\\u4E00\\u4E2A\\u7EAF\\u51FD\\u6570\\uFF0C\\u5B83\\u63A5\\u53D7\\u5F53\\u524D state \\u548C\\u4E00\\u4E2A action \\u4F5C\\u4E3A\\u53C2\\u6570\\uFF0C\\u5E76\\u8FD4\\u56DE\\u65B0\\u7684 state\\u3002action \\u662F\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u901A\\u5E38\\u5177\\u6709\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"type\"}),\" \\u5C5E\\u6027\\u548C\\u4E00\\u4E2A\\u53EF\\u9009\\u7684 \",(0,n.jsx)(e.code,{children:\"payload\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`function reducer(state, action) {\n  switch (action.type) {\n    case 'increment':\n      return { count: state.count + 1 };\n    case 'decrement':\n      return { count: state.count - 1 };\n    default:\n      throw new Error();\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u793A\\u4F8B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" \\u7BA1\\u7406\\u8BA1\\u6570\\u5668 state \\u7684\\u7B80\\u5355\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useReducer } from 'react';\n\nconst initialState = { count: 0 };\n\nfunction reducer(state, action) {\n  switch (action.type) {\n    case 'increment':\n      return { count: state.count + 1 };\n    case 'decrement':\n      return { count: state.count - 1 };\n    default:\n      throw new Error();\n  }\n}\n\nfunction Counter() {\n  const [state, dispatch] = useReducer(reducer, initialState);\n\n  return (\n    <div>\n      <p>Count: {state.count}</p>\n      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>\n      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>\n    </div>\n  );\n}\n\nexport default Counter;\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useReducer\"})]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u590D\\u6742\\u7684 state \\u903B\\u8F91\"}),\"\\uFF1A\\u5F53\\u60A8\\u6709\\u6D89\\u53CA\\u591A\\u4E2A\\u5B50\\u503C\\u7684\\u590D\\u6742 state \\u903B\\u8F91\\uFF0C\\u6216\\u8005\\u4E0B\\u4E00\\u4E2A state \\u4F9D\\u8D56\\u4E8E\\u524D\\u4E00\\u4E2A state \\u65F6\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u72B6\\u6001\\u7BA1\\u7406\"}),\"\\uFF1A\\u5F53\\u60A8\\u9700\\u8981\\u66F4\\u53EF\\u9884\\u6D4B\\u7684\\u72B6\\u6001\\u7BA1\\u7406\\u6A21\\u5F0F\\uFF08\\u7C7B\\u4F3C\\u4E8E Redux\\uFF09\\u65F6\\uFF0C\\u5B83\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6027\\u80FD\\u4F18\\u5316\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" \\u53EF\\u4EE5\\u901A\\u8FC7\\u907F\\u514D\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\\u6765\\u5E2E\\u52A9\\u4F18\\u5316\\u67D0\\u4E9B\\u60C5\\u51B5\\u4E0B\\u7684\\u6027\\u80FD\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useReducer\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"useReducer\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/learn/scaling-up-with-reducer-and-context\",children:[\"Using the \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" hook\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://www.smashingmagazine.com/2020/06/redux-patterns-use-reducer-react/\",children:[\"A complete guide to \",(0,n.jsx)(e.code,{children:\"useReducer\"})]})}),`\n`]})]})}function w(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var v=w;return j(H);})();\n;return Component;"
+  "solution": "var Component=(()=>{var l=Object.create;var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var c in e)d(t,c,{get:e[c],enumerable:!0})},i=(t,e,c,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of R(e))!g.call(t,r)&&r!==c&&d(t,r,{get:()=>e[r],enumerable:!(a=p(e,r))||a.enumerable});return t};var k=(t,e,c)=>(c=t!=null?l(m(t)):{},i(e||!t||!t.__esModule?d(c,\"default\",{value:t,enumerable:!0}):c,t)),w=t=>i(d({},\"__esModule\",{value:!0}),t);var s=f((y,o)=>{o.exports=_jsx_runtime});var v={};x(v,{default:()=>h,frontmatter:()=>j});var n=k(s()),j={title:\"React \\u4E2D\\u7684 `useReducer` Hook \\u662F\\u4EC0\\u4E48\\uFF1F\\u5E94\\u8BE5\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\u5B83\\uFF1F\"};function u(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" Hook \\u7528\\u4E8E\\u5728\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E2D\\u7BA1\\u7406\\u590D\\u6742\\u7684 state \\u903B\\u8F91\\u3002\\u5B83\\u662F \",(0,n.jsx)(e.code,{children:\"useState\"}),\" \\u7684\\u66FF\\u4EE3\\u65B9\\u6848\\uFF0C\\u5F53 state \\u5177\\u6709\\u591A\\u4E2A\\u5B50\\u503C\\u6216\\u4E0B\\u4E00\\u4E2A state \\u4F9D\\u8D56\\u4E8E\\u524D\\u4E00\\u4E2A state \\u65F6\\uFF0C\\u5B83\\u7279\\u522B\\u6709\\u7528\\u3002\\u5B83\\u63A5\\u53D7\\u4E00\\u4E2A reducer \\u51FD\\u6570\\u548C\\u4E00\\u4E2A\\u521D\\u59CB state \\u4F5C\\u4E3A\\u53C2\\u6570\\uFF0C\\u5E76\\u8FD4\\u56DE\\u5F53\\u524D state \\u548C\\u4E00\\u4E2A dispatch \\u51FD\\u6570\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [state, dispatch] = useReducer(reducer, initialState);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u60A8\\u6709\\u6D89\\u53CA\\u591A\\u4E2A\\u5B50\\u503C\\u7684\\u590D\\u6742 state \\u903B\\u8F91\\uFF0C\\u6216\\u8005\\u4E0B\\u4E00\\u4E2A state \\u4F9D\\u8D56\\u4E8E\\u524D\\u4E00\\u4E2A state \\u65F6\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" Hook \\u662F\\u4EC0\\u4E48\\uFF1F\\u5E94\\u8BE5\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\u5B83\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"useReducer\"}),\" \\u7B80\\u4ECB\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useReducer\"}),\" Hook \\u662F\\u4E00\\u4E2A React Hook\\uFF0C\\u7528\\u4E8E\\u5728\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E2D\\u7BA1\\u7406 state\\u3002\\u5B83\\u662F \",(0,n.jsx)(e.code,{children:\"useState\"}),\" Hook \\u7684\\u66FF\\u4EE3\\u65B9\\u6848\\uFF0C\\u7279\\u522B\\u9002\\u7528\\u4E8E\\u7BA1\\u7406\\u66F4\\u590D\\u6742\\u7684 state \\u903B\\u8F91\\u3002\",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" Hook \\u7C7B\\u4F3C\\u4E8E JavaScript \\u6570\\u7EC4\\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"reduce\"}),\" \\u51FD\\u6570\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u4E00\\u4E2A reducer \\u51FD\\u6570\\u6765\\u786E\\u5B9A state \\u5E94\\u8BE5\\u5982\\u4F55\\u54CD\\u5E94\\u64CD\\u4F5C\\u800C\\u6539\\u53D8\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u8BED\\u6CD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useReducer\"}),\" Hook \\u63A5\\u53D7\\u4E24\\u4E2A\\u53C2\\u6570\\uFF1A\\u4E00\\u4E2A reducer \\u51FD\\u6570\\u548C\\u4E00\\u4E2A\\u521D\\u59CB state\\u3002\\u5B83\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5305\\u542B\\u5F53\\u524D state \\u548C\\u4E00\\u4E2A dispatch \\u51FD\\u6570\\u7684\\u6570\\u7EC4\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [state, dispatch] = useReducer(reducer, initialState);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Reducer \\u51FD\\u6570\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"reducer \\u51FD\\u6570\\u662F\\u4E00\\u4E2A\\u7EAF\\u51FD\\u6570\\uFF0C\\u5B83\\u63A5\\u53D7\\u5F53\\u524D state \\u548C\\u4E00\\u4E2A action \\u4F5C\\u4E3A\\u53C2\\u6570\\uFF0C\\u5E76\\u8FD4\\u56DE\\u65B0\\u7684 state\\u3002action \\u662F\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u901A\\u5E38\\u5177\\u6709\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"type\"}),\" \\u5C5E\\u6027\\u548C\\u4E00\\u4E2A\\u53EF\\u9009\\u7684 \",(0,n.jsx)(e.code,{children:\"payload\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`function reducer(state, action) {\n  switch (action.type) {\n    case 'increment':\n      return { count: state.count + 1 };\n    case 'decrement':\n      return { count: state.count - 1 };\n    default:\n      throw new Error();\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4F7F\\u7528\\u793A\\u4F8B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" \\u7BA1\\u7406\\u8BA1\\u6570\\u5668 state \\u7684\\u7B80\\u5355\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useReducer } from 'react';\n\nconst initialState = { count: 0 };\n\nfunction reducer(state, action) {\n  switch (action.type) {\n    case 'increment':\n      return { count: state.count + 1 };\n    case 'decrement':\n      return { count: state.count - 1 };\n    default:\n      throw new Error();\n  }\n}\n\nfunction Counter() {\n  const [state, dispatch] = useReducer(reducer, initialState);\n\n  return (\n    <div>\n      <p>Count: {state.count}</p>\n      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>\n      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>\n    </div>\n  );\n}\n\nexport default Counter;\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useReducer\"})]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u590D\\u6742\\u7684 state \\u903B\\u8F91\"}),\"\\uFF1A\\u5F53\\u60A8\\u6709\\u6D89\\u53CA\\u591A\\u4E2A\\u5B50\\u503C\\u7684\\u590D\\u6742 state \\u903B\\u8F91\\uFF0C\\u6216\\u8005\\u4E0B\\u4E00\\u4E2A state \\u4F9D\\u8D56\\u4E8E\\u524D\\u4E00\\u4E2A state \\u65F6\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u72B6\\u6001\\u7BA1\\u7406\"}),\"\\uFF1A\\u5F53\\u60A8\\u9700\\u8981\\u66F4\\u53EF\\u9884\\u6D4B\\u7684\\u72B6\\u6001\\u7BA1\\u7406\\u6A21\\u5F0F\\uFF08\\u7C7B\\u4F3C\\u4E8E Redux\\uFF09\\u65F6\\uFF0C\\u5B83\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u6027\\u80FD\\u4F18\\u5316\"}),\"\\uFF1A\",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" \\u53EF\\u4EE5\\u901A\\u8FC7\\u907F\\u514D\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\\u6765\\u5E2E\\u52A9\\u4F18\\u5316\\u67D0\\u4E9B\\u60C5\\u51B5\\u4E0B\\u7684\\u6027\\u80FD\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useReducer\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"useReducer\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/learn/scaling-up-with-reducer-and-context\",children:[\"Using the \",(0,n.jsx)(e.code,{children:\"useReducer\"}),\" hook\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://www.smashingmagazine.com/2020/06/redux-patterns-use-reducer-react/\",children:[\"A complete guide to \",(0,n.jsx)(e.code,{children:\"useReducer\"})]})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(u,{...t})}):u(t)}return w(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-useref-hook-in-react-and-when-should-it-be-used/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-useref-hook-in-react-and-when-should-it-be-used/en-US.json
index 965ee889a..d1438a17c 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-useref-hook-in-react-and-when-should-it-be-used/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-useref-hook-in-react-and-when-should-it-be-used/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-useref-hook-in-react-and-when-should-it-be-used/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var o=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var R=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},s=(t,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of f(e))!m.call(t,c)&&c!==r&&o(t,c,{get:()=>e[c],enumerable:!(i=d(e,c))||i.enumerable});return t};var v=(t,e,r)=>(r=t!=null?l(p(t)):{},s(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),b=t=>s(o({},\"__esModule\",{value:!0}),t);var u=R((y,a)=>{a.exports=_jsx_runtime});var k={};g(k,{default:()=>E,frontmatter:()=>x});var n=v(u()),x={title:\"What is the `useRef` hook in React and when should it be used?\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",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 \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" hook in React is used to create a mutable object that persists across renders. It can be used to access and manipulate DOM elements directly, store mutable values that do not cause re-renders when updated, and keep a reference to a value without triggering a re-render. For example, you can use \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" to focus an input element:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useRef, useEffect } from 'react';\n\nfunction TextInputWithFocusButton() {\n  const inputEl = useRef(null);\n\n  useEffect(() => {\n    inputEl.current.focus();\n  }, []);\n\n  return <input ref={inputEl} type=\"text\" />;\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is the \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" hook in React and when should it be used?\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Introduction to \",(0,n.jsx)(e.code,{children:\"useRef\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" hook in React is a function that returns a mutable \",(0,n.jsx)(e.code,{children:\"ref\"}),\" object whose \",(0,n.jsx)(e.code,{children:\".current\"}),\" property is initialized to the passed argument (\",(0,n.jsx)(e.code,{children:\"initialValue\"}),\"). The returned object will persist for the full lifetime of the component.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Key use cases for \",(0,n.jsx)(e.code,{children:\"useRef\"})]}),`\n`,(0,n.jsx)(e.h4,{children:\"Accessing and manipulating DOM elements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"One of the primary use cases for \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" is to directly access and manipulate DOM elements. This is particularly useful when you need to interact with the DOM in ways that are not easily achievable through React's declarative approach.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useRef, useEffect } from 'react';\n\nfunction TextInputWithFocusButton() {\n  const inputEl = useRef(null);\n\n  useEffect(() => {\n    inputEl.current.focus();\n  }, []);\n\n  return <input ref={inputEl} type=\"text\" />;\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" hook is used to create a reference to the input element, and the \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" hook is used to focus the input element when the component mounts.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Storing mutable values\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useRef\"}),\" can also be used to store mutable values that do not cause a re-render when updated. This is useful for keeping track of values that change over time but do not need to trigger a re-render.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useRef } from 'react';\n\nfunction Timer() {\n  const count = useRef(0);\n\n  const increment = () => {\n    count.current += 1;\n    console.log(count.current);\n  };\n\n  return <button onClick={increment}>Increment</button>;\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the \",(0,n.jsx)(e.code,{children:\"count\"}),\" variable is stored in a \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" object, and its value is incremented without causing the component to re-render.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Keeping a reference to a value\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useRef\"}),\" can be used to keep a reference to a value without triggering a re-render. This is useful for storing values that need to persist across renders but do not need to cause a re-render when they change.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useRef, useState, useEffect } from 'react';\n\nfunction Example() {\n  const [count, setCount] = useState(0);\n  const prevCountRef = useRef();\n\n  useEffect(() => {\n    prevCountRef.current = count;\n  }, [count]);\n\n  return (\n    <div>\n      <h1>Now: {count}</h1>\n      <h2>Before: {prevCountRef.current}</h2>\n      <button onClick={() => setCount(count + 1)}>Increment</button>\n    </div>\n  );\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"prevCountRef\"}),\" is used to keep a reference to the previous value of \",(0,n.jsx)(e.code,{children:\"count\"}),\" without causing a re-render.\"]}),`\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.jsxs)(e.a,{href:\"https://react.dev/reference/react/useRef\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"useRef\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/learn/manipulating-the-dom-with-refs\",children:[\"Using the \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" hook\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://blog.logrocket.com/how-to-use-react-useref-hook/\",children:[\"Common use cases for \",(0,n.jsx)(e.code,{children:\"useRef\"})]})}),`\n`]})]})}function w(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var E=w;return b(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var o=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},u=(t,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!R.call(t,c)&&c!==r&&o(t,c,{get:()=>e[c],enumerable:!(i=f(e,c))||i.enumerable});return t};var b=(t,e,r)=>(r=t!=null?d(m(t)):{},u(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),x=t=>u(o({},\"__esModule\",{value:!0}),t);var s=g((y,a)=>{a.exports=_jsx_runtime});var E={};v(E,{default:()=>l,frontmatter:()=>w});var n=b(s()),w={title:\"What is the `useRef` hook in React and when should it be used?\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...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 \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" hook in React is used to create a mutable object that persists across renders. It can be used to access and manipulate DOM elements directly, store mutable values that do not cause re-renders when updated, and keep a reference to a value without triggering a re-render. For example, you can use \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" to focus an input element:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useRef, useEffect } from 'react';\n\nfunction TextInputWithFocusButton() {\n  const inputEl = useRef(null);\n\n  useEffect(() => {\n    inputEl.current.focus();\n  }, []);\n\n  return <input ref={inputEl} type=\"text\" />;\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is the \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" hook in React and when should it be used?\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Introduction to \",(0,n.jsx)(e.code,{children:\"useRef\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" hook in React is a function that returns a mutable \",(0,n.jsx)(e.code,{children:\"ref\"}),\" object whose \",(0,n.jsx)(e.code,{children:\".current\"}),\" property is initialized to the passed argument (\",(0,n.jsx)(e.code,{children:\"initialValue\"}),\"). The returned object will persist for the full lifetime of the component.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Key use cases for \",(0,n.jsx)(e.code,{children:\"useRef\"})]}),`\n`,(0,n.jsx)(e.h4,{children:\"Accessing and manipulating DOM elements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"One of the primary use cases for \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" is to directly access and manipulate DOM elements. This is particularly useful when you need to interact with the DOM in ways that are not easily achievable through React's declarative approach.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useRef, useEffect } from 'react';\n\nfunction TextInputWithFocusButton() {\n  const inputEl = useRef(null);\n\n  useEffect(() => {\n    inputEl.current.focus();\n  }, []);\n\n  return <input ref={inputEl} type=\"text\" />;\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" hook is used to create a reference to the input element, and the \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" hook is used to focus the input element when the component mounts.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Storing mutable values\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useRef\"}),\" can also be used to store mutable values that do not cause a re-render when updated. This is useful for keeping track of values that change over time but do not need to trigger a re-render.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useRef } from 'react';\n\nfunction Timer() {\n  const count = useRef(0);\n\n  const increment = () => {\n    count.current += 1;\n    console.log(count.current);\n  };\n\n  return <button onClick={increment}>Increment</button>;\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the \",(0,n.jsx)(e.code,{children:\"count\"}),\" variable is stored in a \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" object, and its value is incremented without causing the component to re-render.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Keeping a reference to a value\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useRef\"}),\" can be used to keep a reference to a value without triggering a re-render. This is useful for storing values that need to persist across renders but do not need to cause a re-render when they change.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useRef, useState, useEffect } from 'react';\n\nfunction Example() {\n  const [count, setCount] = useState(0);\n  const prevCountRef = useRef();\n\n  useEffect(() => {\n    prevCountRef.current = count;\n  }, [count]);\n\n  return (\n    <div>\n      <h1>Now: {count}</h1>\n      <h2>Before: {prevCountRef.current}</h2>\n      <button onClick={() => setCount(count + 1)}>Increment</button>\n    </div>\n  );\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"prevCountRef\"}),\" is used to keep a reference to the previous value of \",(0,n.jsx)(e.code,{children:\"count\"}),\" without causing a re-render.\"]}),`\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.jsxs)(e.a,{href:\"https://react.dev/reference/react/useRef\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"useRef\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/learn/manipulating-the-dom-with-refs\",children:[\"Using the \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" hook\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://blog.logrocket.com/how-to-use-react-useref-hook/\",children:[\"Common use cases for \",(0,n.jsx)(e.code,{children:\"useRef\"})]})}),`\n`]})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return x(E);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-useref-hook-in-react-and-when-should-it-be-used/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-the-useref-hook-in-react-and-when-should-it-be-used/zh-CN.json
index 9b7a7dba2..5f1eb5a8d 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-useref-hook-in-react-and-when-should-it-be-used/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-useref-hook-in-react-and-when-should-it-be-used/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-useref-hook-in-react-and-when-should-it-be-used/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var o=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var m=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),g=(c,e)=>{for(var t in e)o(c,t,{get:e[t],enumerable:!0})},u=(c,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!R.call(c,r)&&r!==t&&o(c,r,{get:()=>e[r],enumerable:!(i=a(e,r))||i.enumerable});return c};var x=(c,e,t)=>(t=c!=null?s(p(c)):{},u(e||!c||!c.__esModule?o(t,\"default\",{value:c,enumerable:!0}):t,c)),E=c=>u(o({},\"__esModule\",{value:!0}),c);var d=m((M,l)=>{l.exports=_jsx_runtime});var b={};g(b,{default:()=>C,frontmatter:()=>v});var n=x(d()),v={title:\"React \\u4E2D\\u7684 `useRef` \\u94A9\\u5B50\\u662F\\u4EC0\\u4E48\\uFF1F\\u5E94\\u8BE5\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\u5B83\\uFF1F\"};function h(c){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" \\u94A9\\u5B50\\u7528\\u4E8E\\u521B\\u5EFA\\u4E00\\u4E2A\\u5728\\u6E32\\u67D3\\u4E4B\\u95F4\\u4FDD\\u6301\\u4E0D\\u53D8\\u7684\\u53EF\\u53D8\\u5BF9\\u8C61\\u3002\\u5B83\\u53EF\\u7528\\u4E8E\\u76F4\\u63A5\\u8BBF\\u95EE\\u548C\\u64CD\\u4F5C DOM \\u5143\\u7D20\\uFF0C\\u5B58\\u50A8\\u5728\\u66F4\\u65B0\\u65F6\\u4E0D\\u5BFC\\u81F4\\u91CD\\u65B0\\u6E32\\u67D3\\u7684\\u53EF\\u53D8\\u503C\\uFF0C\\u4EE5\\u53CA\\u4FDD\\u7559\\u5BF9\\u503C\\u7684\\u5F15\\u7528\\u800C\\u4E0D\\u89E6\\u53D1\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\\u4F8B\\u5982\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" \\u6765\\u805A\\u7126\\u8F93\\u5165\\u5143\\u7D20\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useRef, useEffect } from 'react';\n\nfunction TextInputWithFocusButton() {\n  const inputEl = useRef(null);\n\n  useEffect(() => {\n    inputEl.current.focus();\n  }, []);\n\n  return <input ref={inputEl} type=\"text\" />;\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" \\u94A9\\u5B50\\u662F\\u4EC0\\u4E48\\uFF1F\\u5E94\\u8BE5\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\u5B83\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"useRef\"}),\" \\u7B80\\u4ECB\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" \\u94A9\\u5B50\\u662F\\u4E00\\u4E2A\\u51FD\\u6570\\uFF0C\\u5B83\\u8FD4\\u56DE\\u4E00\\u4E2A\\u53EF\\u53D8\\u7684 \",(0,n.jsx)(e.code,{children:\"ref\"}),\" \\u5BF9\\u8C61\\uFF0C\\u5176 \",(0,n.jsx)(e.code,{children:\".current\"}),\" \\u5C5E\\u6027\\u88AB\\u521D\\u59CB\\u5316\\u4E3A\\u4F20\\u9012\\u7684\\u53C2\\u6570 (\",(0,n.jsx)(e.code,{children:\"initialValue\"}),\")\\u3002\\u8FD4\\u56DE\\u7684\\u5BF9\\u8C61\\u5C06\\u5728\\u7EC4\\u4EF6\\u7684\\u6574\\u4E2A\\u751F\\u547D\\u5468\\u671F\\u5185\\u4FDD\\u6301\\u4E0D\\u53D8\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"useRef\"}),\" \\u7684\\u5173\\u952E\\u7528\\u4F8B\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u8BBF\\u95EE\\u548C\\u64CD\\u4F5C DOM \\u5143\\u7D20\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useRef\"}),\" \\u7684\\u4E3B\\u8981\\u7528\\u4F8B\\u4E4B\\u4E00\\u662F\\u76F4\\u63A5\\u8BBF\\u95EE\\u548C\\u64CD\\u4F5C DOM \\u5143\\u7D20\\u3002\\u5F53\\u60A8\\u9700\\u8981\\u4EE5 React \\u7684\\u58F0\\u660E\\u5F0F\\u65B9\\u6CD5\\u65E0\\u6CD5\\u8F7B\\u677E\\u5B9E\\u73B0\\u7684\\u65B9\\u5F0F\\u4E0E DOM \\u4EA4\\u4E92\\u65F6\\uFF0C\\u8FD9\\u7279\\u522B\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4F8B\\u5B50\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useRef, useEffect } from 'react';\n\nfunction TextInputWithFocusButton() {\n  const inputEl = useRef(null);\n\n  useEffect(() => {\n    inputEl.current.focus();\n  }, []);\n\n  return <input ref={inputEl} type=\"text\" />;\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"useRef\"}),\" \\u94A9\\u5B50\\u7528\\u4E8E\\u521B\\u5EFA\\u5BF9\\u8F93\\u5165\\u5143\\u7D20\\u7684\\u5F15\\u7528\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u94A9\\u5B50\\u7528\\u4E8E\\u5728\\u7EC4\\u4EF6\\u6302\\u8F7D\\u65F6\\u805A\\u7126\\u8F93\\u5165\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u5B58\\u50A8\\u53EF\\u53D8\\u503C\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useRef\"}),\" \\u4E5F\\u53EF\\u4EE5\\u7528\\u4E8E\\u5B58\\u50A8\\u5728\\u66F4\\u65B0\\u65F6\\u4E0D\\u4F1A\\u5BFC\\u81F4\\u91CD\\u65B0\\u6E32\\u67D3\\u7684\\u53EF\\u53D8\\u503C\\u3002\\u8FD9\\u5BF9\\u4E8E\\u8DDF\\u8E2A\\u968F\\u65F6\\u95F4\\u53D8\\u5316\\u4F46\\u4E0D\\u9700\\u8981\\u89E6\\u53D1\\u91CD\\u65B0\\u6E32\\u67D3\\u7684\\u503C\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4F8B\\u5B50\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useRef } from 'react';\n\nfunction Timer() {\n  const count = useRef(0);\n\n  const increment = () => {\n    count.current += 1;\n    console.log(count.current);\n  };\n\n  return <button onClick={increment}>Increment</button>;\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"count\"}),\" \\u53D8\\u91CF\\u5B58\\u50A8\\u5728 \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" \\u5BF9\\u8C61\\u4E2D\\uFF0C\\u5E76\\u4E14\\u5B83\\u7684\\u503C\\u9012\\u589E\\uFF0C\\u800C\\u4E0D\\u4F1A\\u5BFC\\u81F4\\u7EC4\\u4EF6\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4FDD\\u7559\\u5BF9\\u503C\\u7684\\u5F15\\u7528\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useRef\"}),\" \\u53EF\\u7528\\u4E8E\\u4FDD\\u7559\\u5BF9\\u503C\\u7684\\u5F15\\u7528\\uFF0C\\u800C\\u4E0D\\u4F1A\\u89E6\\u53D1\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\\u8FD9\\u5BF9\\u4E8E\\u5B58\\u50A8\\u9700\\u8981\\u5728\\u6E32\\u67D3\\u4E4B\\u95F4\\u4FDD\\u6301\\u4E0D\\u53D8\\u4F46\\u4E0D\\u9700\\u8981\\u5728\\u66F4\\u6539\\u65F6\\u5BFC\\u81F4\\u91CD\\u65B0\\u6E32\\u67D3\\u7684\\u503C\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4F8B\\u5B50\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useRef, useState, useEffect } from 'react';\n\nfunction Example() {\n  const [count, setCount] = useState(0);\n  const prevCountRef = useRef();\n\n  useEffect(() => {\n    prevCountRef.current = count;\n  }, [count]);\n\n  return (\n    <div>\n      <h1>Now: {count}</h1>\n      <h2>Before: {prevCountRef.current}</h2>\n      <button onClick={() => setCount(count + 1)}>Increment</button>\n    </div>\n  );\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"prevCountRef\"}),\" \\u7528\\u4E8E\\u4FDD\\u6301\\u5BF9 \",(0,n.jsx)(e.code,{children:\"count\"}),\" \\u524D\\u4E00\\u4E2A\\u503C\\u7684\\u5F15\\u7528\\uFF0C\\u800C\\u4E0D\\u4F1A\\u5BFC\\u81F4\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useRef\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"useRef\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/learn/manipulating-the-dom-with-refs\",children:[\"Using the \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" hook\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://blog.logrocket.com/how-to-use-react-useref-hook/\",children:[\"Common use cases for \",(0,n.jsx)(e.code,{children:\"useRef\"})]})}),`\n`]})]})}function j(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(h,c)})):h(c)}var C=j;return E(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var f=Object.create;var o=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),x=(c,e)=>{for(var t in e)o(c,t,{get:e[t],enumerable:!0})},i=(c,e,t,u)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!m.call(c,r)&&r!==t&&o(c,r,{get:()=>e[r],enumerable:!(u=a(e,r))||u.enumerable});return c};var E=(c,e,t)=>(t=c!=null?f(R(c)):{},i(e||!c||!c.__esModule?o(t,\"default\",{value:c,enumerable:!0}):t,c)),v=c=>i(o({},\"__esModule\",{value:!0}),c);var d=g((M,l)=>{l.exports=_jsx_runtime});var j={};x(j,{default:()=>s,frontmatter:()=>C});var n=E(d()),C={title:\"React \\u4E2D\\u7684 `useRef` \\u94A9\\u5B50\\u662F\\u4EC0\\u4E48\\uFF1F\\u5E94\\u8BE5\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\u5B83\\uFF1F\"};function h(c){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" \\u94A9\\u5B50\\u7528\\u4E8E\\u521B\\u5EFA\\u4E00\\u4E2A\\u5728\\u6E32\\u67D3\\u4E4B\\u95F4\\u4FDD\\u6301\\u4E0D\\u53D8\\u7684\\u53EF\\u53D8\\u5BF9\\u8C61\\u3002\\u5B83\\u53EF\\u7528\\u4E8E\\u76F4\\u63A5\\u8BBF\\u95EE\\u548C\\u64CD\\u4F5C DOM \\u5143\\u7D20\\uFF0C\\u5B58\\u50A8\\u5728\\u66F4\\u65B0\\u65F6\\u4E0D\\u5BFC\\u81F4\\u91CD\\u65B0\\u6E32\\u67D3\\u7684\\u53EF\\u53D8\\u503C\\uFF0C\\u4EE5\\u53CA\\u4FDD\\u7559\\u5BF9\\u503C\\u7684\\u5F15\\u7528\\u800C\\u4E0D\\u89E6\\u53D1\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\\u4F8B\\u5982\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" \\u6765\\u805A\\u7126\\u8F93\\u5165\\u5143\\u7D20\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useRef, useEffect } from 'react';\n\nfunction TextInputWithFocusButton() {\n  const inputEl = useRef(null);\n\n  useEffect(() => {\n    inputEl.current.focus();\n  }, []);\n\n  return <input ref={inputEl} type=\"text\" />;\n}\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" \\u94A9\\u5B50\\u662F\\u4EC0\\u4E48\\uFF1F\\u5E94\\u8BE5\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528\\u5B83\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"useRef\"}),\" \\u7B80\\u4ECB\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"React \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" \\u94A9\\u5B50\\u662F\\u4E00\\u4E2A\\u51FD\\u6570\\uFF0C\\u5B83\\u8FD4\\u56DE\\u4E00\\u4E2A\\u53EF\\u53D8\\u7684 \",(0,n.jsx)(e.code,{children:\"ref\"}),\" \\u5BF9\\u8C61\\uFF0C\\u5176 \",(0,n.jsx)(e.code,{children:\".current\"}),\" \\u5C5E\\u6027\\u88AB\\u521D\\u59CB\\u5316\\u4E3A\\u4F20\\u9012\\u7684\\u53C2\\u6570 (\",(0,n.jsx)(e.code,{children:\"initialValue\"}),\")\\u3002\\u8FD4\\u56DE\\u7684\\u5BF9\\u8C61\\u5C06\\u5728\\u7EC4\\u4EF6\\u7684\\u6574\\u4E2A\\u751F\\u547D\\u5468\\u671F\\u5185\\u4FDD\\u6301\\u4E0D\\u53D8\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"useRef\"}),\" \\u7684\\u5173\\u952E\\u7528\\u4F8B\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u8BBF\\u95EE\\u548C\\u64CD\\u4F5C DOM \\u5143\\u7D20\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useRef\"}),\" \\u7684\\u4E3B\\u8981\\u7528\\u4F8B\\u4E4B\\u4E00\\u662F\\u76F4\\u63A5\\u8BBF\\u95EE\\u548C\\u64CD\\u4F5C DOM \\u5143\\u7D20\\u3002\\u5F53\\u60A8\\u9700\\u8981\\u4EE5 React \\u7684\\u58F0\\u660E\\u5F0F\\u65B9\\u6CD5\\u65E0\\u6CD5\\u8F7B\\u677E\\u5B9E\\u73B0\\u7684\\u65B9\\u5F0F\\u4E0E DOM \\u4EA4\\u4E92\\u65F6\\uFF0C\\u8FD9\\u7279\\u522B\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4F8B\\u5B50\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useRef, useEffect } from 'react';\n\nfunction TextInputWithFocusButton() {\n  const inputEl = useRef(null);\n\n  useEffect(() => {\n    inputEl.current.focus();\n  }, []);\n\n  return <input ref={inputEl} type=\"text\" />;\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"useRef\"}),\" \\u94A9\\u5B50\\u7528\\u4E8E\\u521B\\u5EFA\\u5BF9\\u8F93\\u5165\\u5143\\u7D20\\u7684\\u5F15\\u7528\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" \\u94A9\\u5B50\\u7528\\u4E8E\\u5728\\u7EC4\\u4EF6\\u6302\\u8F7D\\u65F6\\u805A\\u7126\\u8F93\\u5165\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u5B58\\u50A8\\u53EF\\u53D8\\u503C\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useRef\"}),\" \\u4E5F\\u53EF\\u4EE5\\u7528\\u4E8E\\u5B58\\u50A8\\u5728\\u66F4\\u65B0\\u65F6\\u4E0D\\u4F1A\\u5BFC\\u81F4\\u91CD\\u65B0\\u6E32\\u67D3\\u7684\\u53EF\\u53D8\\u503C\\u3002\\u8FD9\\u5BF9\\u4E8E\\u8DDF\\u8E2A\\u968F\\u65F6\\u95F4\\u53D8\\u5316\\u4F46\\u4E0D\\u9700\\u8981\\u89E6\\u53D1\\u91CD\\u65B0\\u6E32\\u67D3\\u7684\\u503C\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4F8B\\u5B50\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useRef } from 'react';\n\nfunction Timer() {\n  const count = useRef(0);\n\n  const increment = () => {\n    count.current += 1;\n    console.log(count.current);\n  };\n\n  return <button onClick={increment}>Increment</button>;\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"count\"}),\" \\u53D8\\u91CF\\u5B58\\u50A8\\u5728 \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" \\u5BF9\\u8C61\\u4E2D\\uFF0C\\u5E76\\u4E14\\u5B83\\u7684\\u503C\\u9012\\u589E\\uFF0C\\u800C\\u4E0D\\u4F1A\\u5BFC\\u81F4\\u7EC4\\u4EF6\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u4FDD\\u7559\\u5BF9\\u503C\\u7684\\u5F15\\u7528\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useRef\"}),\" \\u53EF\\u7528\\u4E8E\\u4FDD\\u7559\\u5BF9\\u503C\\u7684\\u5F15\\u7528\\uFF0C\\u800C\\u4E0D\\u4F1A\\u89E6\\u53D1\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\\u8FD9\\u5BF9\\u4E8E\\u5B58\\u50A8\\u9700\\u8981\\u5728\\u6E32\\u67D3\\u4E4B\\u95F4\\u4FDD\\u6301\\u4E0D\\u53D8\\u4F46\\u4E0D\\u9700\\u8981\\u5728\\u66F4\\u6539\\u65F6\\u5BFC\\u81F4\\u91CD\\u65B0\\u6E32\\u67D3\\u7684\\u503C\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u4F8B\\u5B50\\uFF1A\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`import React, { useRef, useState, useEffect } from 'react';\n\nfunction Example() {\n  const [count, setCount] = useState(0);\n  const prevCountRef = useRef();\n\n  useEffect(() => {\n    prevCountRef.current = count;\n  }, [count]);\n\n  return (\n    <div>\n      <h1>Now: {count}</h1>\n      <h2>Before: {prevCountRef.current}</h2>\n      <button onClick={() => setCount(count + 1)}>Increment</button>\n    </div>\n  );\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"prevCountRef\"}),\" \\u7528\\u4E8E\\u4FDD\\u6301\\u5BF9 \",(0,n.jsx)(e.code,{children:\"count\"}),\" \\u524D\\u4E00\\u4E2A\\u503C\\u7684\\u5F15\\u7528\\uFF0C\\u800C\\u4E0D\\u4F1A\\u5BFC\\u81F4\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useRef\",children:[\"React documentation on \",(0,n.jsx)(e.code,{children:\"useRef\"})]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/learn/manipulating-the-dom-with-refs\",children:[\"Using the \",(0,n.jsx)(e.code,{children:\"useRef\"}),\" hook\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://blog.logrocket.com/how-to-use-react-useref-hook/\",children:[\"Common use cases for \",(0,n.jsx)(e.code,{children:\"useRef\"})]})}),`\n`]})]})}function s(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(h,{...c})}):h(c)}return v(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/en-US.json
index e5778ce30..7a3667c4c 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/en-US.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),b=(i,e)=>{for(var t in e)l(i,t,{get:e[t],enumerable:!0})},c=(i,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!g.call(i,r)&&r!==t&&l(i,r,{get:()=>e[r],enumerable:!(s=u(e,r))||s.enumerable});return i};var v=(i,e,t)=>(t=i!=null?h(m(i)):{},c(e||!i||!i.__esModule?l(t,\"default\",{value:i,enumerable:!0}):t,i)),y=i=>c(l({},\"__esModule\",{value:!0}),i);var a=f((W,o)=>{o.exports=_jsx_runtime});var j={};b(j,{default:()=>N,frontmatter:()=>w});var n=v(a()),w={title:\"What is `'use strict';` in JavaScript for?\",subtitle:\"What are the advantages and disadvantages to using it?\"};function d(i){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",strong:\"strong\",ul:\"ul\",li:\"li\",hr:\"hr\",ol:\"ol\",pre:\"pre\",h3:\"h3\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"'use strict'\"}),\" is a statement used to enable strict mode to entire scripts or individual functions. Strict mode is a way to opt into a restricted variant of JavaScript.\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Advantages\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Makes it impossible to accidentally create global variables.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Makes assignments which would otherwise silently fail to throw an exception.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Makes attempts to delete undeletable properties throw an exception (where before the attempt would simply have no effect).\"}),`\n`,(0,n.jsx)(e.li,{children:\"Requires that function parameter names be unique.\"}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"this\"}),\" is \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" in the global context.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"It catches some common coding bloopers, throwing exceptions.\"}),`\n`,(0,n.jsx)(e.li,{children:\"It disables features that are confusing or poorly thought out.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Disadvantages\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Many missing features that some developers might be used to.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"No more access to \",(0,n.jsx)(e.code,{children:\"function.caller\"}),\" and \",(0,n.jsx)(e.code,{children:\"function.arguments\"}),\".\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Concatenation of scripts written in different strict modes might cause issues.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Overall, the benefits outweigh the disadvantages and there is not really a need to rely on the features that strict mode prohibits. We should all be using strict mode by default.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is \",(0,n.jsx)(e.code,{children:'\"use strict\"'}),\" in JavaScript?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In essence, \",(0,n.jsx)(e.code,{children:'\"use strict\"'}),' is a directive introduced in ECMAScript 5 (ES5) that signals to the JavaScript engine that the code it surrounds should be executed in \"strict mode\". Strict mode imposes stricter parsing and error handling rules, essentially making your code more secure and less error-prone.']}),`\n`,(0,n.jsx)(e.p,{children:'When you use \"use strict\", it helps you to write cleaner code, like preventing you from using undeclared variables. It can also make your code more secure because it disallows some potentially insecure actions.'}),`\n`,(0,n.jsx)(e.h2,{children:\"How to use strict mode\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Global Scope\"}),\": To enable strict mode globally, add the directive at the beginning of the JavaScript file:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`'use strict';\n// any code in this file will be run in strict mode\nfunction add(a, b) {\n  return a + b;\n}\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Local Scope\"}),\": To enable strict mode within a function, add the directive at the beginning of the function:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function myFunction() {\n  'use strict';\n  // this will tell JavaScript engine to use strict mode only for the \\`myFunction\\`\n  // Anything that is outside of the scope of this function will be treated as non-strict mode unless specified to use strict mode\n}\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Key features of strict mode\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Error prevention\"}),\" : Strict mode prevents common errors such as:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Using undeclared variables.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Assigning values to non-writable properties.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Using non-existent properties or variables.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Deleting undeletable properties.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Using reserved keywords as identifiers.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Duplicating parameter names in functions.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Improved security\"}),\": Strict mode helps in writing more secure code by:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Preventing the use of deprecated features like arguments.caller and arguments.callee.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Restricting the use of eval() to prevent variable declarations in the calling scope.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Compatibility\"}),\" : Strict mode ensures compatibility with future versions of JavaScript by preventing the use of reserved keywords as identifiers.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Examples\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsx)(e.p,{children:\"Preventing accidental creation of global variables:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Without strict mode\n\nfunction defineNumber() {\n  count = 123;\n}\ndefineNumber();\nconsole.log(count); // logs: 123\n`})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`'use strict'; // With strict mode\n\nfunction strictFunc() {\n  'use strict';\n  strictVar = 123; // ReferenceError: strictVar is not defined\n}\nstrictFunc();\nconsole.log(strictVar); // ReferenceError: strictVar is not defined\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsx)(e.p,{children:\"Making assignments which would otherwise silently fail to throw an exception:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Without strict mode\nNaN = 'foo'; // This fails silently\nconsole.log(NaN); // logs: NaN\n`})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`'use strict'; // With strict mode\nNaN = 'foo'; // Uncaught TypeError: Cannot assign to read only property 'NaN' of object '#<Window>'\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsx)(e.p,{children:\"Making attempts to delete undeletable properties throw an error in strict mode:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Without strict mode\ndelete Object.prototype; // This fails silently\n`})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`'use strict'; // With strict mode\ndelete Object.prototype; // TypeError: Cannot delete property 'prototype' of function Object() { [native code] }\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:'Is it \"strictly\" necessary?'}),`\n`,(0,n.jsxs)(e.p,{children:[\"Adding \",(0,n.jsx)(e.code,{children:\"'use strict'\"}),\" in JavaScript is still beneficial and recommended, but it is no longer strictly necessary in all cases:\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Modules\"}),\": The entire contents of JavaScript modules are automatically in strict mode, without needing the \",(0,n.jsx)(e.code,{children:\"'use strict'\"}),\" statement. This applies to ES6 modules as well as Node.js CommonJS modules.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Classes\"}),\": Code within class definitions is also automatically in strict mode, even without \",(0,n.jsx)(e.code,{children:\"'use strict'\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"While \",(0,n.jsx)(e.code,{children:\"'use strict'\"}),\" is no longer mandatory in all contexts due to the automatic strict mode enforcement in modules and classes, it is still widely recommended as a best practice, especially for core JavaScript files, libraries, and when working with older browser environments or legacy code.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Placement\"}),\": The \",(0,n.jsx)(e.code,{children:\"'use strict'\"}),\" directive must be placed at the beginning of the file or function. Placing it anywhere else will not have any effect.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Compatibility\"}),\": Strict mode is supported by all modern browsers except Internet Explorer 9 and lower.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Irreversible\"}),\": There is no way to cancel \",(0,n.jsx)(e.code,{children:\"'use strict'\"}),\" after it's being set.\"]}),`\n`]}),`\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/Web/JavaScript/Reference/Strict_mode\",children:\"Strict mode - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/strict-mode\",children:'The modern mode, \"use strict\"'})}),`\n`]})]})}function S(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(d,i)})):d(i)}var N=S;return y(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),v=(i,e)=>{for(var t in e)l(i,t,{get:e[t],enumerable:!0})},o=(i,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!f.call(i,r)&&r!==t&&l(i,r,{get:()=>e[r],enumerable:!(s=p(e,r))||s.enumerable});return i};var y=(i,e,t)=>(t=i!=null?u(g(i)):{},o(e||!i||!i.__esModule?l(t,\"default\",{value:i,enumerable:!0}):t,i)),w=i=>o(l({},\"__esModule\",{value:!0}),i);var a=b((j,c)=>{c.exports=_jsx_runtime});var N={};v(N,{default:()=>h,frontmatter:()=>S});var n=y(a()),S={title:\"What is `'use strict';` in JavaScript for?\",subtitle:\"What are the advantages and disadvantages to using it?\"};function d(i){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"'use strict'\"}),\" is a statement used to enable strict mode to entire scripts or individual functions. Strict mode is a way to opt into a restricted variant of JavaScript.\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Advantages\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Makes it impossible to accidentally create global variables.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Makes assignments which would otherwise silently fail to throw an exception.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Makes attempts to delete undeletable properties throw an exception (where before the attempt would simply have no effect).\"}),`\n`,(0,n.jsx)(e.li,{children:\"Requires that function parameter names be unique.\"}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"this\"}),\" is \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" in the global context.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"It catches some common coding bloopers, throwing exceptions.\"}),`\n`,(0,n.jsx)(e.li,{children:\"It disables features that are confusing or poorly thought out.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Disadvantages\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Many missing features that some developers might be used to.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"No more access to \",(0,n.jsx)(e.code,{children:\"function.caller\"}),\" and \",(0,n.jsx)(e.code,{children:\"function.arguments\"}),\".\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Concatenation of scripts written in different strict modes might cause issues.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Overall, the benefits outweigh the disadvantages and there is not really a need to rely on the features that strict mode prohibits. We should all be using strict mode by default.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"What is \",(0,n.jsx)(e.code,{children:'\"use strict\"'}),\" in JavaScript?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In essence, \",(0,n.jsx)(e.code,{children:'\"use strict\"'}),' is a directive introduced in ECMAScript 5 (ES5) that signals to the JavaScript engine that the code it surrounds should be executed in \"strict mode\". Strict mode imposes stricter parsing and error handling rules, essentially making your code more secure and less error-prone.']}),`\n`,(0,n.jsx)(e.p,{children:'When you use \"use strict\", it helps you to write cleaner code, like preventing you from using undeclared variables. It can also make your code more secure because it disallows some potentially insecure actions.'}),`\n`,(0,n.jsx)(e.h2,{children:\"How to use strict mode\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Global Scope\"}),\": To enable strict mode globally, add the directive at the beginning of the JavaScript file:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`'use strict';\n// any code in this file will be run in strict mode\nfunction add(a, b) {\n  return a + b;\n}\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Local Scope\"}),\": To enable strict mode within a function, add the directive at the beginning of the function:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function myFunction() {\n  'use strict';\n  // this will tell JavaScript engine to use strict mode only for the \\`myFunction\\`\n  // Anything that is outside of the scope of this function will be treated as non-strict mode unless specified to use strict mode\n}\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Key features of strict mode\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Error prevention\"}),\" : Strict mode prevents common errors such as:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Using undeclared variables.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Assigning values to non-writable properties.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Using non-existent properties or variables.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Deleting undeletable properties.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Using reserved keywords as identifiers.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Duplicating parameter names in functions.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Improved security\"}),\": Strict mode helps in writing more secure code by:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Preventing the use of deprecated features like arguments.caller and arguments.callee.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Restricting the use of eval() to prevent variable declarations in the calling scope.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Compatibility\"}),\" : Strict mode ensures compatibility with future versions of JavaScript by preventing the use of reserved keywords as identifiers.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Examples\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsx)(e.p,{children:\"Preventing accidental creation of global variables:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Without strict mode\n\nfunction defineNumber() {\n  count = 123;\n}\ndefineNumber();\nconsole.log(count); // logs: 123\n`})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`'use strict'; // With strict mode\n\nfunction strictFunc() {\n  'use strict';\n  strictVar = 123; // ReferenceError: strictVar is not defined\n}\nstrictFunc();\nconsole.log(strictVar); // ReferenceError: strictVar is not defined\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsx)(e.p,{children:\"Making assignments which would otherwise silently fail to throw an exception:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Without strict mode\nNaN = 'foo'; // This fails silently\nconsole.log(NaN); // logs: NaN\n`})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`'use strict'; // With strict mode\nNaN = 'foo'; // Uncaught TypeError: Cannot assign to read only property 'NaN' of object '#<Window>'\n`})}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsx)(e.p,{children:\"Making attempts to delete undeletable properties throw an error in strict mode:\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Without strict mode\ndelete Object.prototype; // This fails silently\n`})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`'use strict'; // With strict mode\ndelete Object.prototype; // TypeError: Cannot delete property 'prototype' of function Object() { [native code] }\n`})}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:'Is it \"strictly\" necessary?'}),`\n`,(0,n.jsxs)(e.p,{children:[\"Adding \",(0,n.jsx)(e.code,{children:\"'use strict'\"}),\" in JavaScript is still beneficial and recommended, but it is no longer strictly necessary in all cases:\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Modules\"}),\": The entire contents of JavaScript modules are automatically in strict mode, without needing the \",(0,n.jsx)(e.code,{children:\"'use strict'\"}),\" statement. This applies to ES6 modules as well as Node.js CommonJS modules.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Classes\"}),\": Code within class definitions is also automatically in strict mode, even without \",(0,n.jsx)(e.code,{children:\"'use strict'\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"While \",(0,n.jsx)(e.code,{children:\"'use strict'\"}),\" is no longer mandatory in all contexts due to the automatic strict mode enforcement in modules and classes, it is still widely recommended as a best practice, especially for core JavaScript files, libraries, and when working with older browser environments or legacy code.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Placement\"}),\": The \",(0,n.jsx)(e.code,{children:\"'use strict'\"}),\" directive must be placed at the beginning of the file or function. Placing it anywhere else will not have any effect.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Compatibility\"}),\": Strict mode is supported by all modern browsers except Internet Explorer 9 and lower.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Irreversible\"}),\": There is no way to cancel \",(0,n.jsx)(e.code,{children:\"'use strict'\"}),\" after it's being set.\"]}),`\n`]}),`\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/Web/JavaScript/Reference/Strict_mode\",children:\"Strict mode - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/strict-mode\",children:'The modern mode, \"use strict\"'})}),`\n`]})]})}function h(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(d,{...i})}):d(i)}return w(N);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/pt-BR.json
index f169536d9..8ebbaf8a3 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/pt-BR.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(s,e)=>()=>(e||s((e={exports:{}}).exports,e),e.exports),f=(s,e)=>{for(var o in e)i(s,o,{get:e[o],enumerable:!0})},t=(s,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of h(e))!g.call(s,a)&&a!==o&&i(s,a,{get:()=>e[a],enumerable:!(r=m(e,a))||r.enumerable});return s};var x=(s,e,o)=>(o=s!=null?u(p(s)):{},t(e||!s||!s.__esModule?i(o,\"default\",{value:s,enumerable:!0}):o,s)),b=s=>t(i({},\"__esModule\",{value:!0}),s);var c=v((O,d)=>{d.exports=_jsx_runtime});var F={};f(F,{default:()=>_,frontmatter:()=>j});var n=x(c()),j={title:'O que \\xE9 `\"use strict\";`?',subtitle:\"Quais s\\xE3o as vantagens e desvantagens de usa-lo?\"};function l(s){let e=Object.assign({p:\"p\",code:\"code\",h2:\"h2\",ul:\"ul\",li:\"li\"},s.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"'use strict'\"}),\" \\xE9 uma declara\\xE7\\xE3o usada para habilitar o modo estrito em scripts inteiros ou fun\\xE7\\xF5es individuais. O modo estrito \\xE9 uma maneira de optar por uma variante restrita do JavaScript.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Vantagens\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Faz com que seja imposs\\xEDvel criar vari\\xE1veis globais acidentalmente.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Faz com que as atribui\\xE7\\xF5es que falhariam silenciosamente disparem uma exce\\xE7\\xE3o.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Faz tentativas de excluir propriedades n\\xE3o delet\\xE1veis lan\\xE7am uma exce\\xE7\\xE3o (onde antes da tentativa simplesmente n\\xE3o teria efeito).\"}),`\n`,(0,n.jsx)(e.li,{children:\"Exige que os nomes dos par\\xE2metros de fun\\xE7\\xE3o sejam exclusivos.\"}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"this\"}),\" \\xE9 \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" no contexto global.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Ele captura alguns erros comuns de programa\\xE7\\xE3o, lan\\xE7ando exce\\xE7\\xF5es.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Ele desabilita recursos que s\\xE3o confusos ou mal concebidos.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Desvantagens\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Muitos recursos faltantes que alguns desenvolvedores podem estar acostumados.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"N\\xE3o h\\xE1 mais acesso a \",(0,n.jsx)(e.code,{children:\"function.caller\"}),\" e \",(0,n.jsx)(e.code,{children:\"function.arguments\"}),\".\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Concatena\\xE7\\xE3o de scripts escritos em diferentes modos estritos pode causar problemas.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"No geral, os benef\\xEDcios superam as desvantagens e n\\xE3o h\\xE1 realmente a necessidade de depender dos recursos que o modo estrito pro\\xEDbe. Todos n\\xF3s dever\\xEDamos estar usando o modo estrito por padr\\xE3o.\"})]})}function q(s={}){let{wrapper:e}=s.components||{};return e?(0,n.jsx)(e,Object.assign({},s,{children:(0,n.jsx)(l,s)})):l(s)}var _=q;return b(F);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(s,e)=>()=>(e||s((e={exports:{}}).exports,e),e.exports),g=(s,e)=>{for(var o in e)i(s,o,{get:e[o],enumerable:!0})},t=(s,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!f.call(s,a)&&a!==o&&i(s,a,{get:()=>e[a],enumerable:!(r=h(e,a))||r.enumerable});return s};var b=(s,e,o)=>(o=s!=null?m(v(s)):{},t(e||!s||!s.__esModule?i(o,\"default\",{value:s,enumerable:!0}):o,s)),q=s=>t(i({},\"__esModule\",{value:!0}),s);var c=x((M,d)=>{d.exports=_jsx_runtime});var _={};g(_,{default:()=>u,frontmatter:()=>j});var n=b(c()),j={title:'O que \\xE9 `\"use strict\";`?',subtitle:\"Quais s\\xE3o as vantagens e desvantagens de usa-lo?\"};function l(s){let e={code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",ul:\"ul\",...s.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"'use strict'\"}),\" \\xE9 uma declara\\xE7\\xE3o usada para habilitar o modo estrito em scripts inteiros ou fun\\xE7\\xF5es individuais. O modo estrito \\xE9 uma maneira de optar por uma variante restrita do JavaScript.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Vantagens\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Faz com que seja imposs\\xEDvel criar vari\\xE1veis globais acidentalmente.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Faz com que as atribui\\xE7\\xF5es que falhariam silenciosamente disparem uma exce\\xE7\\xE3o.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Faz tentativas de excluir propriedades n\\xE3o delet\\xE1veis lan\\xE7am uma exce\\xE7\\xE3o (onde antes da tentativa simplesmente n\\xE3o teria efeito).\"}),`\n`,(0,n.jsx)(e.li,{children:\"Exige que os nomes dos par\\xE2metros de fun\\xE7\\xE3o sejam exclusivos.\"}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"this\"}),\" \\xE9 \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" no contexto global.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Ele captura alguns erros comuns de programa\\xE7\\xE3o, lan\\xE7ando exce\\xE7\\xF5es.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Ele desabilita recursos que s\\xE3o confusos ou mal concebidos.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Desvantagens\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Muitos recursos faltantes que alguns desenvolvedores podem estar acostumados.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"N\\xE3o h\\xE1 mais acesso a \",(0,n.jsx)(e.code,{children:\"function.caller\"}),\" e \",(0,n.jsx)(e.code,{children:\"function.arguments\"}),\".\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Concatena\\xE7\\xE3o de scripts escritos em diferentes modos estritos pode causar problemas.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"No geral, os benef\\xEDcios superam as desvantagens e n\\xE3o h\\xE1 realmente a necessidade de depender dos recursos que o modo estrito pro\\xEDbe. Todos n\\xF3s dever\\xEDamos estar usando o modo estrito por padr\\xE3o.\"})]})}function u(s={}){let{wrapper:e}=s.components||{};return e?(0,n.jsx)(e,{...s,children:(0,n.jsx)(l,{...s})}):l(s)}return q(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/zh-CN.json
index 68e55c5e9..c32e609e5 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/zh-CN.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),v=(r,n)=>{for(var i in n)l(r,i,{get:n[i],enumerable:!0})},d=(r,n,i,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of p(n))!m.call(r,c)&&c!==i&&l(r,c,{get:()=>n[c],enumerable:!(t=u(n,c))||t.enumerable});return r};var N=(r,n,i)=>(i=r!=null?a(g(r)):{},d(n||!r||!r.__esModule?l(i,\"default\",{value:r,enumerable:!0}):i,r)),j=r=>d(l({},\"__esModule\",{value:!0}),r);var o=f((E,h)=>{h.exports=_jsx_runtime});var y={};v(y,{default:()=>J,frontmatter:()=>S});var e=N(o()),S={title:\"JavaScript \\u4E2D\\u7684 `'use strict';` \\u662F\\u4EC0\\u4E48\\uFF1F\",subtitle:\"\\u4F7F\\u7528\\u5B83\\u6709\\u4EC0\\u4E48\\u4F18\\u70B9\\u548C\\u7F3A\\u70B9\\uFF1F\"};function s(r){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",strong:\"strong\",ul:\"ul\",li:\"li\",hr:\"hr\",ol:\"ol\",pre:\"pre\",h3:\"h3\",a:\"a\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"'use strict'\"}),\" \\u662F\\u4E00\\u6761\\u8BED\\u53E5\\uFF0C\\u7528\\u4E8E\\u5BF9\\u6574\\u4E2A\\u811A\\u672C\\u6216\\u5355\\u4E2A\\u51FD\\u6570\\u542F\\u7528\\u4E25\\u683C\\u6A21\\u5F0F\\u3002\\u4E25\\u683C\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u9009\\u62E9\\u52A0\\u5165 JavaScript \\u9650\\u5236\\u53D8\\u4F53\\u7684\\u65B9\\u5F0F\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:\"\\u4F18\\u70B9\"})}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u65E0\\u6CD5\\u610F\\u5916\\u521B\\u5EFA\\u5168\\u5C40\\u53D8\\u91CF\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u539F\\u672C\\u4F1A\\u9759\\u9ED8\\u5931\\u8D25\\u7684\\u8D4B\\u503C\\u629B\\u51FA\\u5F02\\u5E38\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u5C1D\\u8BD5\\u5220\\u9664\\u4E0D\\u53EF\\u5220\\u9664\\u7684\\u5C5E\\u6027\\u629B\\u51FA\\u5F02\\u5E38\\uFF08\\u800C\\u4E4B\\u524D\\u5C1D\\u8BD5\\u53EA\\u4F1A\\u65E0\\u6548\\uFF09\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u8981\\u6C42\\u51FD\\u6570\\u53C2\\u6570\\u540D\\u79F0\\u662F\\u552F\\u4E00\\u7684\\u3002\"}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5728\\u5168\\u5C40\\u4E0A\\u4E0B\\u6587\\u4E2D\\u4E3A \",(0,e.jsx)(n.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u53EF\\u4EE5\\u6355\\u83B7\\u4E00\\u4E9B\\u5E38\\u89C1\\u7684\\u7F16\\u7801\\u9519\\u8BEF\\uFF0C\\u629B\\u51FA\\u5F02\\u5E38\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u7981\\u7528\\u4E86\\u4EE4\\u4EBA\\u56F0\\u60D1\\u6216\\u8003\\u8651\\u4E0D\\u5468\\u7684\\u529F\\u80FD\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:\"\\u7F3A\\u70B9\"})}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u8BB8\\u591A\\u5F00\\u53D1\\u4EBA\\u5458\\u53EF\\u80FD\\u4E60\\u60EF\\u7684\\u7F3A\\u5931\\u529F\\u80FD\\u3002\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u65E0\\u6CD5\\u518D\\u8BBF\\u95EE \",(0,e.jsx)(n.code,{children:\"function.caller\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"function.arguments\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.li,{children:\"\\u7528\\u4E0D\\u540C\\u4E25\\u683C\\u6A21\\u5F0F\\u7F16\\u5199\\u7684\\u811A\\u672C\\u7684\\u4E32\\u8054\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u95EE\\u9898\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u603B\\u7684\\u6765\\u8BF4\\uFF0C\\u4F18\\u70B9\\u5927\\u4E8E\\u7F3A\\u70B9\\uFF0C\\u800C\\u4E14\\u5B9E\\u9645\\u4E0A\\u6CA1\\u6709\\u5FC5\\u8981\\u4F9D\\u8D56\\u4E25\\u683C\\u6A21\\u5F0F\\u7981\\u6B62\\u7684\\u529F\\u80FD\\u3002\\u6211\\u4EEC\\u90FD\\u5E94\\u8BE5\\u9ED8\\u8BA4\\u4F7F\\u7528\\u4E25\\u683C\\u6A21\\u5F0F\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsxs)(n.h2,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:'\"use strict\"'}),\" \\u662F\\u4EC0\\u4E48\\uFF1F\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u672C\\u8D28\\u4E0A\\uFF0C\",(0,e.jsx)(n.code,{children:'\"use strict\"'}),\" \\u662F ECMAScript 5 (ES5) \\u4E2D\\u5F15\\u5165\\u7684\\u4E00\\u4E2A\\u6307\\u4EE4\\uFF0C\\u5B83\\u5411 JavaScript \\u5F15\\u64CE\\u53D1\\u51FA\\u4FE1\\u53F7\\uFF0C\\u8868\\u660E\\u5B83\\u6240\\u5305\\u56F4\\u7684\\u4EE3\\u7801\\u5E94\\u8BE5\\u5728\\u201C\\u4E25\\u683C\\u6A21\\u5F0F\\u201D\\u4E0B\\u6267\\u884C\\u3002\\u4E25\\u683C\\u6A21\\u5F0F\\u65BD\\u52A0\\u4E86\\u66F4\\u4E25\\u683C\\u7684\\u89E3\\u6790\\u548C\\u9519\\u8BEF\\u5904\\u7406\\u89C4\\u5219\\uFF0C\\u4ECE\\u672C\\u8D28\\u4E0A\\u4F7F\\u60A8\\u7684\\u4EE3\\u7801\\u66F4\\u5B89\\u5168\\uFF0C\\u66F4\\u4E0D\\u5BB9\\u6613\\u51FA\\u9519\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F53\\u60A8\\u4F7F\\u7528\\u201Cuse strict\\u201D\\u65F6\\uFF0C\\u5B83\\u6709\\u52A9\\u4E8E\\u60A8\\u7F16\\u5199\\u66F4\\u7B80\\u6D01\\u7684\\u4EE3\\u7801\\uFF0C\\u4F8B\\u5982\\u963B\\u6B62\\u60A8\\u4F7F\\u7528\\u672A\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u3002\\u5B83\\u8FD8\\u53EF\\u4EE5\\u4F7F\\u60A8\\u7684\\u4EE3\\u7801\\u66F4\\u5B89\\u5168\\uFF0C\\u56E0\\u4E3A\\u5B83\\u7981\\u6B62\\u67D0\\u4E9B\\u6F5C\\u5728\\u7684\\u4E0D\\u5B89\\u5168\\u64CD\\u4F5C\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5982\\u4F55\\u4F7F\\u7528\\u4E25\\u683C\\u6A21\\u5F0F\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u5168\\u5C40\\u8303\\u56F4\"}),\"\\uFF1A\\u8981\\u5728\\u5168\\u5C40\\u542F\\u7528\\u4E25\\u683C\\u6A21\\u5F0F\\uFF0C\\u8BF7\\u5728 JavaScript \\u6587\\u4EF6\\u7684\\u5F00\\u5934\\u6DFB\\u52A0\\u6307\\u4EE4\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`'use strict';\n// \\u6B64\\u6587\\u4EF6\\u4E2D\\u7684\\u4EFB\\u4F55\\u4EE3\\u7801\\u90FD\\u5C06\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u8FD0\\u884C\nfunction add(a, b) {\n  return a + b;\n}\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C40\\u90E8\\u8303\\u56F4\"}),\"\\uFF1A\\u8981\\u5728\\u51FD\\u6570\\u5185\\u542F\\u7528\\u4E25\\u683C\\u6A21\\u5F0F\\uFF0C\\u8BF7\\u5728\\u51FD\\u6570\\u7684\\u5F00\\u5934\\u6DFB\\u52A0\\u6307\\u4EE4\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function myFunction() {\n  'use strict';\n  // \\u8FD9\\u5C06\\u544A\\u8BC9 JavaScript \\u5F15\\u64CE\\u4EC5\\u5BF9 \\`myFunction\\` \\u4F7F\\u7528\\u4E25\\u683C\\u6A21\\u5F0F\n  // \\u4EFB\\u4F55\\u8D85\\u51FA\\u6B64\\u51FD\\u6570\\u8303\\u56F4\\u7684\\u5185\\u5BB9\\u90FD\\u5C06\\u88AB\\u89C6\\u4E3A\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\uFF0C\\u9664\\u975E\\u6307\\u5B9A\\u4F7F\\u7528\\u4E25\\u683C\\u6A21\\u5F0F\n}\n`})}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4E25\\u683C\\u6A21\\u5F0F\\u7684\\u4E3B\\u8981\\u7279\\u70B9\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9519\\u8BEF\\u9884\\u9632\"}),\"\\uFF1A\\u4E25\\u683C\\u6A21\\u5F0F\\u53EF\\u9632\\u6B62\\u5E38\\u89C1\\u9519\\u8BEF\\uFF0C\\u4F8B\\u5982\\uFF1A\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u7528\\u672A\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5C06\\u503C\\u5206\\u914D\\u7ED9\\u4E0D\\u53EF\\u5199\\u5C5E\\u6027\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u7528\\u4E0D\\u5B58\\u5728\\u7684\\u5C5E\\u6027\\u6216\\u53D8\\u91CF\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5220\\u9664\\u4E0D\\u53EF\\u5220\\u9664\\u7684\\u5C5E\\u6027\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5C06\\u4FDD\\u7559\\u5173\\u952E\\u5B57\\u7528\\u4F5C\\u6807\\u8BC6\\u7B26\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5728\\u51FD\\u6570\\u4E2D\\u590D\\u5236\\u53C2\\u6570\\u540D\\u79F0\\u3002\"}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u63D0\\u9AD8\\u5B89\\u5168\\u6027\"}),\"\\uFF1A\\u4E25\\u683C\\u6A21\\u5F0F\\u901A\\u8FC7\\u4EE5\\u4E0B\\u65B9\\u5F0F\\u5E2E\\u52A9\\u7F16\\u5199\\u66F4\\u5B89\\u5168\\u7684\\u4EE3\\u7801\\uFF1A\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u963B\\u6B62\\u4F7F\\u7528\\u5DF2\\u5F03\\u7528\\u7684\\u529F\\u80FD\\uFF0C\\u5982 arguments.caller \\u548C arguments.callee\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u9650\\u5236\\u4F7F\\u7528 eval() \\u4EE5\\u9632\\u6B62\\u5728\\u8C03\\u7528\\u8303\\u56F4\\u5185\\u58F0\\u660E\\u53D8\\u91CF\\u3002\"}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u517C\\u5BB9\\u6027\"}),\"\\uFF1A\\u4E25\\u683C\\u6A21\\u5F0F\\u901A\\u8FC7\\u963B\\u6B62\\u5C06\\u4FDD\\u7559\\u5173\\u952E\\u5B57\\u7528\\u4F5C\\u6807\\u8BC6\\u7B26\\u6765\\u786E\\u4FDD\\u4E0E\\u672A\\u6765\\u7248\\u672C\\u7684 JavaScript \\u7684\\u517C\\u5BB9\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsx)(n.p,{children:\"\\u9632\\u6B62\\u610F\\u5916\\u521B\\u5EFA\\u5168\\u5C40\\u53D8\\u91CF\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u6CA1\\u6709\\u4E25\\u683C\\u6A21\\u5F0F\n\nfunction defineNumber() {\n  count = 123;\n}\ndefineNumber();\nconsole.log(count); // \\u65E5\\u5FD7\\uFF1A123\n`})}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`'use strict'; // \\u4F7F\\u7528\\u4E25\\u683C\\u6A21\\u5F0F\n\nfunction strictFunc() {\n  'use strict';\n  strictVar = 123; // ReferenceError: strictVar is not defined\n}\nstrictFunc();\nconsole.log(strictVar); // ReferenceError: strictVar is not defined\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u539F\\u672C\\u4F1A\\u9759\\u9ED8\\u5931\\u8D25\\u7684\\u8D4B\\u503C\\u629B\\u51FA\\u5F02\\u5E38\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u6CA1\\u6709\\u4E25\\u683C\\u6A21\\u5F0F\nNaN = 'foo'; // \\u8FD9\\u4F1A\\u9759\\u9ED8\\u5931\\u8D25\nconsole.log(NaN); // \\u65E5\\u5FD7\\uFF1ANaN\n`})}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`'use strict'; // \\u4F7F\\u7528\\u4E25\\u683C\\u6A21\\u5F0F\nNaN = 'foo'; // Uncaught TypeError: Cannot assign to read only property 'NaN' of object '#<Window>'\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u5C1D\\u8BD5\\u5220\\u9664\\u4E0D\\u53EF\\u5220\\u9664\\u7684\\u5C5E\\u6027\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u629B\\u51FA\\u9519\\u8BEF\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u6CA1\\u6709\\u4E25\\u683C\\u6A21\\u5F0F\ndelete Object.prototype; // \\u8FD9\\u4F1A\\u9759\\u9ED8\\u5931\\u8D25\n`})}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`'use strict'; // \\u4F7F\\u7528\\u4E25\\u683C\\u6A21\\u5F0F\ndelete Object.prototype; // TypeError: Cannot delete property 'prototype' of function Object() { [native code] }\n`})}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u771F\\u7684\\u6709\\u5FC5\\u8981\\u5417\\uFF1F\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 JavaScript \\u4E2D\\u6DFB\\u52A0 \",(0,e.jsx)(n.code,{children:\"'use strict'\"}),\" \\u4ECD\\u7136\\u662F\\u6709\\u76CA\\u7684\\uFF0C\\u5E76\\u4E14\\u662F\\u63A8\\u8350\\u7684\\uFF0C\\u4F46\\u5728\\u6240\\u6709\\u60C5\\u51B5\\u4E0B\\u4E0D\\u518D\\u4E25\\u683C\\u9700\\u8981\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6A21\\u5757\"}),\"\\uFF1AJavaScript \\u6A21\\u5757\\u7684\\u5168\\u90E8\\u5185\\u5BB9\\u4F1A\\u81EA\\u52A8\\u8FDB\\u5165\\u4E25\\u683C\\u6A21\\u5F0F\\uFF0C\\u65E0\\u9700 \",(0,e.jsx)(n.code,{children:\"'use strict'\"}),\" \\u8BED\\u53E5\\u3002\\u8FD9\\u9002\\u7528\\u4E8E ES6 \\u6A21\\u5757\\u4EE5\\u53CA Node.js CommonJS \\u6A21\\u5757\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7C7B\"}),\"\\uFF1A\\u7C7B\\u5B9A\\u4E49\\u4E2D\\u7684\\u4EE3\\u7801\\u4E5F\\u4F1A\\u81EA\\u52A8\\u8FDB\\u5165\\u4E25\\u683C\\u6A21\\u5F0F\\uFF0C\\u5373\\u4F7F\\u6CA1\\u6709 \",(0,e.jsx)(n.code,{children:\"'use strict'\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u867D\\u7136\\u7531\\u4E8E\\u6A21\\u5757\\u548C\\u7C7B\\u4E2D\\u7684\\u81EA\\u52A8\\u4E25\\u683C\\u6A21\\u5F0F\\u5F3A\\u5236\\u6267\\u884C\\uFF0C\",(0,e.jsx)(n.code,{children:\"'use strict'\"}),\" \\u4E0D\\u518D\\u5728\\u6240\\u6709\\u4E0A\\u4E0B\\u6587\\u4E2D\\u662F\\u5F3A\\u5236\\u6027\\u7684\\uFF0C\\u4F46\\u5B83\\u4ECD\\u7136\\u88AB\\u5E7F\\u6CDB\\u63A8\\u8350\\u4F5C\\u4E3A\\u6700\\u4F73\\u5B9E\\u8DF5\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u6838\\u5FC3 JavaScript \\u6587\\u4EF6\\u3001\\u5E93\\u4EE5\\u53CA\\u4F7F\\u7528\\u8F83\\u65E7\\u7684\\u6D4F\\u89C8\\u5668\\u73AF\\u5883\\u6216\\u65E7\\u4EE3\\u7801\\u65F6\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u653E\\u7F6E\"}),\"\\uFF1A\",(0,e.jsx)(n.code,{children:\"'use strict'\"}),\" \\u6307\\u4EE4\\u5FC5\\u987B\\u653E\\u7F6E\\u5728\\u6587\\u4EF6\\u6216\\u51FD\\u6570\\u7684\\u5F00\\u5934\\u3002\\u5C06\\u5176\\u653E\\u7F6E\\u5728\\u5176\\u4ED6\\u4EFB\\u4F55\\u5730\\u65B9\\u90FD\\u4E0D\\u4F1A\\u6709\\u4EFB\\u4F55\\u6548\\u679C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u517C\\u5BB9\\u6027\"}),\"\\uFF1A\\u9664\\u4E86 Internet Explorer 9 \\u53CA\\u66F4\\u4F4E\\u7248\\u672C\\u5916\\uFF0C\\u6240\\u6709\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u90FD\\u652F\\u6301\\u4E25\\u683C\\u6A21\\u5F0F\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E0D\\u53EF\\u9006\"}),\"\\uFF1A\\u8BBE\\u7F6E \",(0,e.jsx)(n.code,{children:\"'use strict'\"}),\" \\u540E\\uFF0C\\u65E0\\u6CD5\\u53D6\\u6D88\\u5B83\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode\",children:\"\\u4E25\\u683C\\u6A21\\u5F0F - MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/strict-mode\",children:'\\u73B0\\u4EE3\\u6A21\\u5F0F\\uFF0C\"use strict\"'})}),`\n`]})]})}function b(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(s,r)})):s(r)}var J=b;return j(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),N=(r,n)=>{for(var i in n)l(r,i,{get:n[i],enumerable:!0})},d=(r,n,i,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of g(n))!f.call(r,c)&&c!==i&&l(r,c,{get:()=>n[c],enumerable:!(t=p(n,c))||t.enumerable});return r};var j=(r,n,i)=>(i=r!=null?u(m(r)):{},d(n||!r||!r.__esModule?l(i,\"default\",{value:r,enumerable:!0}):i,r)),S=r=>d(l({},\"__esModule\",{value:!0}),r);var o=v((x,h)=>{h.exports=_jsx_runtime});var y={};N(y,{default:()=>a,frontmatter:()=>J});var e=j(o()),J={title:\"JavaScript \\u4E2D\\u7684 `'use strict';` \\u662F\\u4EC0\\u4E48\\uFF1F\",subtitle:\"\\u4F7F\\u7528\\u5B83\\u6709\\u4EC0\\u4E48\\u4F18\\u70B9\\u548C\\u7F3A\\u70B9\\uFF1F\"};function s(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\"'use strict'\"}),\" \\u662F\\u4E00\\u6761\\u8BED\\u53E5\\uFF0C\\u7528\\u4E8E\\u5BF9\\u6574\\u4E2A\\u811A\\u672C\\u6216\\u5355\\u4E2A\\u51FD\\u6570\\u542F\\u7528\\u4E25\\u683C\\u6A21\\u5F0F\\u3002\\u4E25\\u683C\\u6A21\\u5F0F\\u662F\\u4E00\\u79CD\\u9009\\u62E9\\u52A0\\u5165 JavaScript \\u9650\\u5236\\u53D8\\u4F53\\u7684\\u65B9\\u5F0F\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:\"\\u4F18\\u70B9\"})}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u65E0\\u6CD5\\u610F\\u5916\\u521B\\u5EFA\\u5168\\u5C40\\u53D8\\u91CF\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u539F\\u672C\\u4F1A\\u9759\\u9ED8\\u5931\\u8D25\\u7684\\u8D4B\\u503C\\u629B\\u51FA\\u5F02\\u5E38\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u5C1D\\u8BD5\\u5220\\u9664\\u4E0D\\u53EF\\u5220\\u9664\\u7684\\u5C5E\\u6027\\u629B\\u51FA\\u5F02\\u5E38\\uFF08\\u800C\\u4E4B\\u524D\\u5C1D\\u8BD5\\u53EA\\u4F1A\\u65E0\\u6548\\uFF09\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u8981\\u6C42\\u51FD\\u6570\\u53C2\\u6570\\u540D\\u79F0\\u662F\\u552F\\u4E00\\u7684\\u3002\"}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"this\"}),\" \\u5728\\u5168\\u5C40\\u4E0A\\u4E0B\\u6587\\u4E2D\\u4E3A \",(0,e.jsx)(n.code,{children:\"undefined\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u53EF\\u4EE5\\u6355\\u83B7\\u4E00\\u4E9B\\u5E38\\u89C1\\u7684\\u7F16\\u7801\\u9519\\u8BEF\\uFF0C\\u629B\\u51FA\\u5F02\\u5E38\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5B83\\u7981\\u7528\\u4E86\\u4EE4\\u4EBA\\u56F0\\u60D1\\u6216\\u8003\\u8651\\u4E0D\\u5468\\u7684\\u529F\\u80FD\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:\"\\u7F3A\\u70B9\"})}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u8BB8\\u591A\\u5F00\\u53D1\\u4EBA\\u5458\\u53EF\\u80FD\\u4E60\\u60EF\\u7684\\u7F3A\\u5931\\u529F\\u80FD\\u3002\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u65E0\\u6CD5\\u518D\\u8BBF\\u95EE \",(0,e.jsx)(n.code,{children:\"function.caller\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"function.arguments\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.li,{children:\"\\u7528\\u4E0D\\u540C\\u4E25\\u683C\\u6A21\\u5F0F\\u7F16\\u5199\\u7684\\u811A\\u672C\\u7684\\u4E32\\u8054\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u95EE\\u9898\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u603B\\u7684\\u6765\\u8BF4\\uFF0C\\u4F18\\u70B9\\u5927\\u4E8E\\u7F3A\\u70B9\\uFF0C\\u800C\\u4E14\\u5B9E\\u9645\\u4E0A\\u6CA1\\u6709\\u5FC5\\u8981\\u4F9D\\u8D56\\u4E25\\u683C\\u6A21\\u5F0F\\u7981\\u6B62\\u7684\\u529F\\u80FD\\u3002\\u6211\\u4EEC\\u90FD\\u5E94\\u8BE5\\u9ED8\\u8BA4\\u4F7F\\u7528\\u4E25\\u683C\\u6A21\\u5F0F\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsxs)(n.h2,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:'\"use strict\"'}),\" \\u662F\\u4EC0\\u4E48\\uFF1F\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u672C\\u8D28\\u4E0A\\uFF0C\",(0,e.jsx)(n.code,{children:'\"use strict\"'}),\" \\u662F ECMAScript 5 (ES5) \\u4E2D\\u5F15\\u5165\\u7684\\u4E00\\u4E2A\\u6307\\u4EE4\\uFF0C\\u5B83\\u5411 JavaScript \\u5F15\\u64CE\\u53D1\\u51FA\\u4FE1\\u53F7\\uFF0C\\u8868\\u660E\\u5B83\\u6240\\u5305\\u56F4\\u7684\\u4EE3\\u7801\\u5E94\\u8BE5\\u5728\\u201C\\u4E25\\u683C\\u6A21\\u5F0F\\u201D\\u4E0B\\u6267\\u884C\\u3002\\u4E25\\u683C\\u6A21\\u5F0F\\u65BD\\u52A0\\u4E86\\u66F4\\u4E25\\u683C\\u7684\\u89E3\\u6790\\u548C\\u9519\\u8BEF\\u5904\\u7406\\u89C4\\u5219\\uFF0C\\u4ECE\\u672C\\u8D28\\u4E0A\\u4F7F\\u60A8\\u7684\\u4EE3\\u7801\\u66F4\\u5B89\\u5168\\uFF0C\\u66F4\\u4E0D\\u5BB9\\u6613\\u51FA\\u9519\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5F53\\u60A8\\u4F7F\\u7528\\u201Cuse strict\\u201D\\u65F6\\uFF0C\\u5B83\\u6709\\u52A9\\u4E8E\\u60A8\\u7F16\\u5199\\u66F4\\u7B80\\u6D01\\u7684\\u4EE3\\u7801\\uFF0C\\u4F8B\\u5982\\u963B\\u6B62\\u60A8\\u4F7F\\u7528\\u672A\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u3002\\u5B83\\u8FD8\\u53EF\\u4EE5\\u4F7F\\u60A8\\u7684\\u4EE3\\u7801\\u66F4\\u5B89\\u5168\\uFF0C\\u56E0\\u4E3A\\u5B83\\u7981\\u6B62\\u67D0\\u4E9B\\u6F5C\\u5728\\u7684\\u4E0D\\u5B89\\u5168\\u64CD\\u4F5C\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5982\\u4F55\\u4F7F\\u7528\\u4E25\\u683C\\u6A21\\u5F0F\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u5168\\u5C40\\u8303\\u56F4\"}),\"\\uFF1A\\u8981\\u5728\\u5168\\u5C40\\u542F\\u7528\\u4E25\\u683C\\u6A21\\u5F0F\\uFF0C\\u8BF7\\u5728 JavaScript \\u6587\\u4EF6\\u7684\\u5F00\\u5934\\u6DFB\\u52A0\\u6307\\u4EE4\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`'use strict';\n// \\u6B64\\u6587\\u4EF6\\u4E2D\\u7684\\u4EFB\\u4F55\\u4EE3\\u7801\\u90FD\\u5C06\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u8FD0\\u884C\nfunction add(a, b) {\n  return a + b;\n}\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C40\\u90E8\\u8303\\u56F4\"}),\"\\uFF1A\\u8981\\u5728\\u51FD\\u6570\\u5185\\u542F\\u7528\\u4E25\\u683C\\u6A21\\u5F0F\\uFF0C\\u8BF7\\u5728\\u51FD\\u6570\\u7684\\u5F00\\u5934\\u6DFB\\u52A0\\u6307\\u4EE4\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function myFunction() {\n  'use strict';\n  // \\u8FD9\\u5C06\\u544A\\u8BC9 JavaScript \\u5F15\\u64CE\\u4EC5\\u5BF9 \\`myFunction\\` \\u4F7F\\u7528\\u4E25\\u683C\\u6A21\\u5F0F\n  // \\u4EFB\\u4F55\\u8D85\\u51FA\\u6B64\\u51FD\\u6570\\u8303\\u56F4\\u7684\\u5185\\u5BB9\\u90FD\\u5C06\\u88AB\\u89C6\\u4E3A\\u975E\\u4E25\\u683C\\u6A21\\u5F0F\\uFF0C\\u9664\\u975E\\u6307\\u5B9A\\u4F7F\\u7528\\u4E25\\u683C\\u6A21\\u5F0F\n}\n`})}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4E25\\u683C\\u6A21\\u5F0F\\u7684\\u4E3B\\u8981\\u7279\\u70B9\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9519\\u8BEF\\u9884\\u9632\"}),\"\\uFF1A\\u4E25\\u683C\\u6A21\\u5F0F\\u53EF\\u9632\\u6B62\\u5E38\\u89C1\\u9519\\u8BEF\\uFF0C\\u4F8B\\u5982\\uFF1A\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u7528\\u672A\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5C06\\u503C\\u5206\\u914D\\u7ED9\\u4E0D\\u53EF\\u5199\\u5C5E\\u6027\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u7528\\u4E0D\\u5B58\\u5728\\u7684\\u5C5E\\u6027\\u6216\\u53D8\\u91CF\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5220\\u9664\\u4E0D\\u53EF\\u5220\\u9664\\u7684\\u5C5E\\u6027\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5C06\\u4FDD\\u7559\\u5173\\u952E\\u5B57\\u7528\\u4F5C\\u6807\\u8BC6\\u7B26\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5728\\u51FD\\u6570\\u4E2D\\u590D\\u5236\\u53C2\\u6570\\u540D\\u79F0\\u3002\"}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u63D0\\u9AD8\\u5B89\\u5168\\u6027\"}),\"\\uFF1A\\u4E25\\u683C\\u6A21\\u5F0F\\u901A\\u8FC7\\u4EE5\\u4E0B\\u65B9\\u5F0F\\u5E2E\\u52A9\\u7F16\\u5199\\u66F4\\u5B89\\u5168\\u7684\\u4EE3\\u7801\\uFF1A\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u963B\\u6B62\\u4F7F\\u7528\\u5DF2\\u5F03\\u7528\\u7684\\u529F\\u80FD\\uFF0C\\u5982 arguments.caller \\u548C arguments.callee\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u9650\\u5236\\u4F7F\\u7528 eval() \\u4EE5\\u9632\\u6B62\\u5728\\u8C03\\u7528\\u8303\\u56F4\\u5185\\u58F0\\u660E\\u53D8\\u91CF\\u3002\"}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u517C\\u5BB9\\u6027\"}),\"\\uFF1A\\u4E25\\u683C\\u6A21\\u5F0F\\u901A\\u8FC7\\u963B\\u6B62\\u5C06\\u4FDD\\u7559\\u5173\\u952E\\u5B57\\u7528\\u4F5C\\u6807\\u8BC6\\u7B26\\u6765\\u786E\\u4FDD\\u4E0E\\u672A\\u6765\\u7248\\u672C\\u7684 JavaScript \\u7684\\u517C\\u5BB9\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsx)(n.p,{children:\"\\u9632\\u6B62\\u610F\\u5916\\u521B\\u5EFA\\u5168\\u5C40\\u53D8\\u91CF\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u6CA1\\u6709\\u4E25\\u683C\\u6A21\\u5F0F\n\nfunction defineNumber() {\n  count = 123;\n}\ndefineNumber();\nconsole.log(count); // \\u65E5\\u5FD7\\uFF1A123\n`})}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`'use strict'; // \\u4F7F\\u7528\\u4E25\\u683C\\u6A21\\u5F0F\n\nfunction strictFunc() {\n  'use strict';\n  strictVar = 123; // ReferenceError: strictVar is not defined\n}\nstrictFunc();\nconsole.log(strictVar); // ReferenceError: strictVar is not defined\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u539F\\u672C\\u4F1A\\u9759\\u9ED8\\u5931\\u8D25\\u7684\\u8D4B\\u503C\\u629B\\u51FA\\u5F02\\u5E38\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u6CA1\\u6709\\u4E25\\u683C\\u6A21\\u5F0F\nNaN = 'foo'; // \\u8FD9\\u4F1A\\u9759\\u9ED8\\u5931\\u8D25\nconsole.log(NaN); // \\u65E5\\u5FD7\\uFF1ANaN\n`})}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`'use strict'; // \\u4F7F\\u7528\\u4E25\\u683C\\u6A21\\u5F0F\nNaN = 'foo'; // Uncaught TypeError: Cannot assign to read only property 'NaN' of object '#<Window>'\n`})}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[`\n`,(0,e.jsx)(n.p,{children:\"\\u4F7F\\u5C1D\\u8BD5\\u5220\\u9664\\u4E0D\\u53EF\\u5220\\u9664\\u7684\\u5C5E\\u6027\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u629B\\u51FA\\u9519\\u8BEF\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u6CA1\\u6709\\u4E25\\u683C\\u6A21\\u5F0F\ndelete Object.prototype; // \\u8FD9\\u4F1A\\u9759\\u9ED8\\u5931\\u8D25\n`})}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`'use strict'; // \\u4F7F\\u7528\\u4E25\\u683C\\u6A21\\u5F0F\ndelete Object.prototype; // TypeError: Cannot delete property 'prototype' of function Object() { [native code] }\n`})}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u771F\\u7684\\u6709\\u5FC5\\u8981\\u5417\\uFF1F\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 JavaScript \\u4E2D\\u6DFB\\u52A0 \",(0,e.jsx)(n.code,{children:\"'use strict'\"}),\" \\u4ECD\\u7136\\u662F\\u6709\\u76CA\\u7684\\uFF0C\\u5E76\\u4E14\\u662F\\u63A8\\u8350\\u7684\\uFF0C\\u4F46\\u5728\\u6240\\u6709\\u60C5\\u51B5\\u4E0B\\u4E0D\\u518D\\u4E25\\u683C\\u9700\\u8981\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6A21\\u5757\"}),\"\\uFF1AJavaScript \\u6A21\\u5757\\u7684\\u5168\\u90E8\\u5185\\u5BB9\\u4F1A\\u81EA\\u52A8\\u8FDB\\u5165\\u4E25\\u683C\\u6A21\\u5F0F\\uFF0C\\u65E0\\u9700 \",(0,e.jsx)(n.code,{children:\"'use strict'\"}),\" \\u8BED\\u53E5\\u3002\\u8FD9\\u9002\\u7528\\u4E8E ES6 \\u6A21\\u5757\\u4EE5\\u53CA Node.js CommonJS \\u6A21\\u5757\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7C7B\"}),\"\\uFF1A\\u7C7B\\u5B9A\\u4E49\\u4E2D\\u7684\\u4EE3\\u7801\\u4E5F\\u4F1A\\u81EA\\u52A8\\u8FDB\\u5165\\u4E25\\u683C\\u6A21\\u5F0F\\uFF0C\\u5373\\u4F7F\\u6CA1\\u6709 \",(0,e.jsx)(n.code,{children:\"'use strict'\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u867D\\u7136\\u7531\\u4E8E\\u6A21\\u5757\\u548C\\u7C7B\\u4E2D\\u7684\\u81EA\\u52A8\\u4E25\\u683C\\u6A21\\u5F0F\\u5F3A\\u5236\\u6267\\u884C\\uFF0C\",(0,e.jsx)(n.code,{children:\"'use strict'\"}),\" \\u4E0D\\u518D\\u5728\\u6240\\u6709\\u4E0A\\u4E0B\\u6587\\u4E2D\\u662F\\u5F3A\\u5236\\u6027\\u7684\\uFF0C\\u4F46\\u5B83\\u4ECD\\u7136\\u88AB\\u5E7F\\u6CDB\\u63A8\\u8350\\u4F5C\\u4E3A\\u6700\\u4F73\\u5B9E\\u8DF5\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u6838\\u5FC3 JavaScript \\u6587\\u4EF6\\u3001\\u5E93\\u4EE5\\u53CA\\u4F7F\\u7528\\u8F83\\u65E7\\u7684\\u6D4F\\u89C8\\u5668\\u73AF\\u5883\\u6216\\u65E7\\u4EE3\\u7801\\u65F6\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u653E\\u7F6E\"}),\"\\uFF1A\",(0,e.jsx)(n.code,{children:\"'use strict'\"}),\" \\u6307\\u4EE4\\u5FC5\\u987B\\u653E\\u7F6E\\u5728\\u6587\\u4EF6\\u6216\\u51FD\\u6570\\u7684\\u5F00\\u5934\\u3002\\u5C06\\u5176\\u653E\\u7F6E\\u5728\\u5176\\u4ED6\\u4EFB\\u4F55\\u5730\\u65B9\\u90FD\\u4E0D\\u4F1A\\u6709\\u4EFB\\u4F55\\u6548\\u679C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u517C\\u5BB9\\u6027\"}),\"\\uFF1A\\u9664\\u4E86 Internet Explorer 9 \\u53CA\\u66F4\\u4F4E\\u7248\\u672C\\u5916\\uFF0C\\u6240\\u6709\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u90FD\\u652F\\u6301\\u4E25\\u683C\\u6A21\\u5F0F\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4E0D\\u53EF\\u9006\"}),\"\\uFF1A\\u8BBE\\u7F6E \",(0,e.jsx)(n.code,{children:\"'use strict'\"}),\" \\u540E\\uFF0C\\u65E0\\u6CD5\\u53D6\\u6D88\\u5B83\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode\",children:\"\\u4E25\\u683C\\u6A21\\u5F0F - MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/strict-mode\",children:'\\u73B0\\u4EE3\\u6A21\\u5F0F\\uFF0C\"use strict\"'})}),`\n`]})]})}function a(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(s,{...r})}):s(r)}return S(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-virtual-dom-in-react/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-virtual-dom-in-react/en-US.json
index edf321ccc..073e60a77 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-virtual-dom-in-react/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-virtual-dom-in-react/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-virtual-dom-in-react/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),w=(n,e)=>{for(var i in e)a(n,i,{get:e[i],enumerable:!0})},o=(n,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!g.call(n,r)&&r!==i&&a(n,r,{get:()=>e[r],enumerable:!(c=u(e,r))||c.enumerable});return n};var D=(n,e,i)=>(i=n!=null?d(m(n)):{},o(e||!n||!n.__esModule?a(i,\"default\",{value:n,enumerable:!0}):i,n)),M=n=>o(a({},\"__esModule\",{value:!0}),n);var l=f((x,h)=>{h.exports=_jsx_runtime});var b={};w(b,{default:()=>y,frontmatter:()=>v});var t=D(l()),v={title:\"What is virtual DOM in React?\"};function s(n){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",pre:\"pre\",code:\"code\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:\"The virtual DOM in React is a lightweight copy of the actual DOM. It allows React to efficiently update the UI by comparing the virtual DOM with the real DOM and only making necessary changes. This process is called reconciliation. By using the virtual DOM, React minimizes direct manipulation of the real DOM, which can be slow and inefficient.\"}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"What is virtual DOM in React?\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Introduction\"}),`\n`,(0,t.jsx)(e.p,{children:\"The virtual DOM is a concept implemented by libraries like React to improve the performance of web applications. It is a programming concept where a virtual representation of the UI is kept in memory and synced with the real DOM by a library such as ReactDOM.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"How it works\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Initial rendering\"}),\": When a React component is rendered for the first time, a virtual DOM tree is created. This tree is a lightweight copy of the actual DOM.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Updating state\"}),\": When the state of a component changes, a new virtual DOM tree is created. React then compares this new tree with the previous one.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Diffing algorithm\"}),\": React uses a diffing algorithm to find the differences between the new virtual DOM tree and the previous one. This process is called reconciliation.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Updating the real DOM\"}),\": After identifying the differences, React updates only the parts of the real DOM that have changed, rather than re-rendering the entire UI.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Benefits\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Performance\"}),\": By minimizing direct manipulation of the real DOM, React can update the UI more efficiently.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Abstraction\"}),\": Developers can write code without worrying about the performance implications of direct DOM manipulation.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Predictability\"}),\": The virtual DOM provides a predictable way to update the UI, making it easier to reason about the state of the application.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,t.jsx)(e.p,{children:\"Here is a simple example to illustrate how the virtual DOM works in React:\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-jsx\",children:`import React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n\nexport default Counter;\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"In this example, when the button is clicked, the state \",(0,t.jsx)(e.code,{children:\"count\"}),\" is updated. React creates a new virtual DOM tree, compares it with the previous one, and updates only the text inside the \",(0,t.jsx)(e.code,{children:\"<p>\"}),\" tag in the real DOM.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/learn/preserving-and-resetting-state\",children:\"React documentation on reconciliation\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060\",children:\"Understanding the virtual DOM\"})}),`\n`]})]})}function O(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(s,n)})):s(n)}var y=O;return M(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),D=(n,e)=>{for(var i in e)a(n,i,{get:e[i],enumerable:!0})},o=(n,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!g.call(n,r)&&r!==i&&a(n,r,{get:()=>e[r],enumerable:!(c=p(e,r))||c.enumerable});return n};var M=(n,e,i)=>(i=n!=null?u(f(n)):{},o(e||!n||!n.__esModule?a(i,\"default\",{value:n,enumerable:!0}):i,n)),v=n=>o(a({},\"__esModule\",{value:!0}),n);var l=w((b,h)=>{h.exports=_jsx_runtime});var y={};D(y,{default:()=>d,frontmatter:()=>O});var t=M(l()),O={title:\"What is virtual DOM in React?\"};function s(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:\"The virtual DOM in React is a lightweight copy of the actual DOM. It allows React to efficiently update the UI by comparing the virtual DOM with the real DOM and only making necessary changes. This process is called reconciliation. By using the virtual DOM, React minimizes direct manipulation of the real DOM, which can be slow and inefficient.\"}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"What is virtual DOM in React?\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Introduction\"}),`\n`,(0,t.jsx)(e.p,{children:\"The virtual DOM is a concept implemented by libraries like React to improve the performance of web applications. It is a programming concept where a virtual representation of the UI is kept in memory and synced with the real DOM by a library such as ReactDOM.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"How it works\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Initial rendering\"}),\": When a React component is rendered for the first time, a virtual DOM tree is created. This tree is a lightweight copy of the actual DOM.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Updating state\"}),\": When the state of a component changes, a new virtual DOM tree is created. React then compares this new tree with the previous one.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Diffing algorithm\"}),\": React uses a diffing algorithm to find the differences between the new virtual DOM tree and the previous one. This process is called reconciliation.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Updating the real DOM\"}),\": After identifying the differences, React updates only the parts of the real DOM that have changed, rather than re-rendering the entire UI.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Benefits\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Performance\"}),\": By minimizing direct manipulation of the real DOM, React can update the UI more efficiently.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Abstraction\"}),\": Developers can write code without worrying about the performance implications of direct DOM manipulation.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Predictability\"}),\": The virtual DOM provides a predictable way to update the UI, making it easier to reason about the state of the application.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,t.jsx)(e.p,{children:\"Here is a simple example to illustrate how the virtual DOM works in React:\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-jsx\",children:`import React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n\nexport default Counter;\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"In this example, when the button is clicked, the state \",(0,t.jsx)(e.code,{children:\"count\"}),\" is updated. React creates a new virtual DOM tree, compares it with the previous one, and updates only the text inside the \",(0,t.jsx)(e.code,{children:\"<p>\"}),\" tag in the real DOM.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/learn/preserving-and-resetting-state\",children:\"React documentation on reconciliation\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060\",children:\"Understanding the virtual DOM\"})}),`\n`]})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(s,{...n})}):s(n)}return v(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-virtual-dom-in-react/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-virtual-dom-in-react/zh-CN.json
index 54d01b26c..94bb3de87 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-virtual-dom-in-react/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-virtual-dom-in-react/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-virtual-dom-in-react/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var m=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),p=(t,n)=>{for(var c in n)i(t,c,{get:n[c],enumerable:!0})},o=(t,n,c,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of D(n))!O.call(t,r)&&r!==c&&i(t,r,{get:()=>n[r],enumerable:!(l=u(n,r))||l.enumerable});return t};var g=(t,n,c)=>(c=t!=null?s(M(t)):{},o(n||!t||!t.__esModule?i(c,\"default\",{value:t,enumerable:!0}):c,t)),R=t=>o(i({},\"__esModule\",{value:!0}),t);var d=m((v,h)=>{h.exports=_jsx_runtime});var C={};p(C,{default:()=>j,frontmatter:()=>x});var e=g(d()),x={title:\"React \\u4E2D\\u7684\\u865A\\u62DF DOM \\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(t){let n=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",ul:\"ul\",pre:\"pre\",code:\"code\",a:\"a\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u4E2D\\u7684\\u865A\\u62DF DOM \\u662F\\u5B9E\\u9645 DOM \\u7684\\u8F7B\\u91CF\\u7EA7\\u526F\\u672C\\u3002\\u5B83\\u5141\\u8BB8 React \\u901A\\u8FC7\\u6BD4\\u8F83\\u865A\\u62DF DOM \\u548C\\u771F\\u5B9E DOM \\u5E76\\u4EC5\\u8FDB\\u884C\\u5FC5\\u8981\\u7684\\u66F4\\u6539\\u6765\\u6709\\u6548\\u5730\\u66F4\\u65B0 UI\\u3002\\u6B64\\u8FC7\\u7A0B\\u79F0\\u4E3A\\u534F\\u8C03\\u3002\\u901A\\u8FC7\\u4F7F\\u7528\\u865A\\u62DF DOM\\uFF0CReact \\u6700\\u5C0F\\u5316\\u4E86\\u5BF9\\u771F\\u5B9E DOM \\u7684\\u76F4\\u63A5\\u64CD\\u4F5C\\uFF0C\\u8FD9\\u53EF\\u80FD\\u5F88\\u6162\\u4E14\\u6548\\u7387\\u4F4E\\u4E0B\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u4E2D\\u7684\\u865A\\u62DF DOM \\u662F\\u4EC0\\u4E48\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7B80\\u4ECB\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u865A\\u62DF DOM \\u662F React \\u7B49\\u5E93\\u5B9E\\u73B0\\u7684\\u4E00\\u4E2A\\u6982\\u5FF5\\uFF0C\\u7528\\u4E8E\\u63D0\\u9AD8 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u6027\\u80FD\\u3002\\u5B83\\u662F\\u4E00\\u4E2A\\u7F16\\u7A0B\\u6982\\u5FF5\\uFF0C\\u5176\\u4E2D UI \\u7684\\u865A\\u62DF\\u8868\\u793A\\u4FDD\\u5B58\\u5728\\u5185\\u5B58\\u4E2D\\uFF0C\\u5E76\\u901A\\u8FC7 ReactDOM \\u7B49\\u5E93\\u4E0E\\u771F\\u5B9E DOM \\u540C\\u6B65\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u521D\\u59CB\\u6E32\\u67D3\"}),\"\\uFF1A\\u9996\\u6B21\\u6E32\\u67D3 React \\u7EC4\\u4EF6\\u65F6\\uFF0C\\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u865A\\u62DF DOM \\u6811\\u3002\\u6B64\\u6811\\u662F\\u5B9E\\u9645 DOM \\u7684\\u8F7B\\u91CF\\u7EA7\\u526F\\u672C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u66F4\\u65B0\\u72B6\\u6001\"}),\"\\uFF1A\\u5F53\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0C\\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\u3002\\u7136\\u540E\\uFF0CReact \\u5C06\\u6B64\\u65B0\\u6811\\u4E0E\\u524D\\u4E00\\u4E2A\\u6811\\u8FDB\\u884C\\u6BD4\\u8F83\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5DEE\\u5F02\\u7B97\\u6CD5\"}),\"\\uFF1AReact \\u4F7F\\u7528\\u5DEE\\u5F02\\u7B97\\u6CD5\\u6765\\u67E5\\u627E\\u65B0\\u865A\\u62DF DOM \\u6811\\u4E0E\\u524D\\u4E00\\u4E2A\\u6811\\u4E4B\\u95F4\\u7684\\u5DEE\\u5F02\\u3002\\u6B64\\u8FC7\\u7A0B\\u79F0\\u4E3A\\u534F\\u8C03\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u66F4\\u65B0\\u771F\\u5B9E DOM\"}),\"\\uFF1A\\u5728\\u786E\\u5B9A\\u5DEE\\u5F02\\u540E\\uFF0CReact \\u4EC5\\u66F4\\u65B0\\u5DF2\\u66F4\\u6539\\u7684\\u771F\\u5B9E DOM \\u90E8\\u5206\\uFF0C\\u800C\\u4E0D\\u662F\\u91CD\\u65B0\\u6E32\\u67D3\\u6574\\u4E2A UI\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6027\\u80FD\"}),\"\\uFF1A\\u901A\\u8FC7\\u6700\\u5927\\u9650\\u5EA6\\u5730\\u51CF\\u5C11\\u5BF9\\u771F\\u5B9E DOM \\u7684\\u76F4\\u63A5\\u64CD\\u4F5C\\uFF0CReact \\u53EF\\u4EE5\\u66F4\\u6709\\u6548\\u5730\\u66F4\\u65B0 UI\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u62BD\\u8C61\"}),\"\\uFF1A\\u5F00\\u53D1\\u4EBA\\u5458\\u53EF\\u4EE5\\u7F16\\u5199\\u4EE3\\u7801\\uFF0C\\u800C\\u65E0\\u9700\\u62C5\\u5FC3\\u76F4\\u63A5 DOM \\u64CD\\u4F5C\\u7684\\u6027\\u80FD\\u5F71\\u54CD\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u9884\\u6D4B\\u6027\"}),\"\\uFF1A\\u865A\\u62DF DOM \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u53EF\\u9884\\u6D4B\\u7684\\u65B9\\u5F0F\\u6765\\u66F4\\u65B0 UI\\uFF0C\\u4ECE\\u800C\\u66F4\\u5BB9\\u6613\\u63A8\\u65AD\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u72B6\\u6001\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u4F8B\\u5B50\\uFF0C\\u8BF4\\u660E\\u865A\\u62DF DOM \\u5728 React \\u4E2D\\u7684\\u5DE5\\u4F5C\\u65B9\\u5F0F\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`import React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n\nexport default Counter;\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u5F53\\u5355\\u51FB\\u6309\\u94AE\\u65F6\\uFF0C\\u72B6\\u6001 \",(0,e.jsx)(n.code,{children:\"count\"}),\" \\u4F1A\\u66F4\\u65B0\\u3002React \\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\uFF0C\\u5C06\\u5176\\u4E0E\\u524D\\u4E00\\u4E2A\\u6811\\u8FDB\\u884C\\u6BD4\\u8F83\\uFF0C\\u5E76\\u4EC5\\u66F4\\u65B0\\u771F\\u5B9E DOM \\u4E2D \",(0,e.jsx)(n.code,{children:\"<p>\"}),\" \\u6807\\u7B7E\\u5185\\u7684\\u6587\\u672C\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/preserving-and-resetting-state\",children:\"React documentation on reconciliation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060\",children:\"Understanding the virtual DOM\"})}),`\n`]})]})}function f(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(a,t)})):a(t)}var j=f;return R(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var O=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var p=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),R=(t,n)=>{for(var r in n)i(t,r,{get:n[r],enumerable:!0})},o=(t,n,r,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of M(n))!m.call(t,c)&&c!==r&&i(t,c,{get:()=>n[c],enumerable:!(l=D(n,c))||l.enumerable});return t};var g=(t,n,r)=>(r=t!=null?u(O(t)):{},o(n||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),x=t=>o(i({},\"__esModule\",{value:!0}),t);var d=p((j,h)=>{h.exports=_jsx_runtime});var C={};R(C,{default:()=>s,frontmatter:()=>f});var e=g(d()),f={title:\"React \\u4E2D\\u7684\\u865A\\u62DF DOM \\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(t){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"React \\u4E2D\\u7684\\u865A\\u62DF DOM \\u662F\\u5B9E\\u9645 DOM \\u7684\\u8F7B\\u91CF\\u7EA7\\u526F\\u672C\\u3002\\u5B83\\u5141\\u8BB8 React \\u901A\\u8FC7\\u6BD4\\u8F83\\u865A\\u62DF DOM \\u548C\\u771F\\u5B9E DOM \\u5E76\\u4EC5\\u8FDB\\u884C\\u5FC5\\u8981\\u7684\\u66F4\\u6539\\u6765\\u6709\\u6548\\u5730\\u66F4\\u65B0 UI\\u3002\\u6B64\\u8FC7\\u7A0B\\u79F0\\u4E3A\\u534F\\u8C03\\u3002\\u901A\\u8FC7\\u4F7F\\u7528\\u865A\\u62DF DOM\\uFF0CReact \\u6700\\u5C0F\\u5316\\u4E86\\u5BF9\\u771F\\u5B9E DOM \\u7684\\u76F4\\u63A5\\u64CD\\u4F5C\\uFF0C\\u8FD9\\u53EF\\u80FD\\u5F88\\u6162\\u4E14\\u6548\\u7387\\u4F4E\\u4E0B\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"React \\u4E2D\\u7684\\u865A\\u62DF DOM \\u662F\\u4EC0\\u4E48\\uFF1F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7B80\\u4ECB\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u865A\\u62DF DOM \\u662F React \\u7B49\\u5E93\\u5B9E\\u73B0\\u7684\\u4E00\\u4E2A\\u6982\\u5FF5\\uFF0C\\u7528\\u4E8E\\u63D0\\u9AD8 Web \\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u6027\\u80FD\\u3002\\u5B83\\u662F\\u4E00\\u4E2A\\u7F16\\u7A0B\\u6982\\u5FF5\\uFF0C\\u5176\\u4E2D UI \\u7684\\u865A\\u62DF\\u8868\\u793A\\u4FDD\\u5B58\\u5728\\u5185\\u5B58\\u4E2D\\uFF0C\\u5E76\\u901A\\u8FC7 ReactDOM \\u7B49\\u5E93\\u4E0E\\u771F\\u5B9E DOM \\u540C\\u6B65\\u3002\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5DE5\\u4F5C\\u539F\\u7406\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u521D\\u59CB\\u6E32\\u67D3\"}),\"\\uFF1A\\u9996\\u6B21\\u6E32\\u67D3 React \\u7EC4\\u4EF6\\u65F6\\uFF0C\\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u865A\\u62DF DOM \\u6811\\u3002\\u6B64\\u6811\\u662F\\u5B9E\\u9645 DOM \\u7684\\u8F7B\\u91CF\\u7EA7\\u526F\\u672C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u66F4\\u65B0\\u72B6\\u6001\"}),\"\\uFF1A\\u5F53\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0C\\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\u3002\\u7136\\u540E\\uFF0CReact \\u5C06\\u6B64\\u65B0\\u6811\\u4E0E\\u524D\\u4E00\\u4E2A\\u6811\\u8FDB\\u884C\\u6BD4\\u8F83\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5DEE\\u5F02\\u7B97\\u6CD5\"}),\"\\uFF1AReact \\u4F7F\\u7528\\u5DEE\\u5F02\\u7B97\\u6CD5\\u6765\\u67E5\\u627E\\u65B0\\u865A\\u62DF DOM \\u6811\\u4E0E\\u524D\\u4E00\\u4E2A\\u6811\\u4E4B\\u95F4\\u7684\\u5DEE\\u5F02\\u3002\\u6B64\\u8FC7\\u7A0B\\u79F0\\u4E3A\\u534F\\u8C03\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u66F4\\u65B0\\u771F\\u5B9E DOM\"}),\"\\uFF1A\\u5728\\u786E\\u5B9A\\u5DEE\\u5F02\\u540E\\uFF0CReact \\u4EC5\\u66F4\\u65B0\\u5DF2\\u66F4\\u6539\\u7684\\u771F\\u5B9E DOM \\u90E8\\u5206\\uFF0C\\u800C\\u4E0D\\u662F\\u91CD\\u65B0\\u6E32\\u67D3\\u6574\\u4E2A UI\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6027\\u80FD\"}),\"\\uFF1A\\u901A\\u8FC7\\u6700\\u5927\\u9650\\u5EA6\\u5730\\u51CF\\u5C11\\u5BF9\\u771F\\u5B9E DOM \\u7684\\u76F4\\u63A5\\u64CD\\u4F5C\\uFF0CReact \\u53EF\\u4EE5\\u66F4\\u6709\\u6548\\u5730\\u66F4\\u65B0 UI\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u62BD\\u8C61\"}),\"\\uFF1A\\u5F00\\u53D1\\u4EBA\\u5458\\u53EF\\u4EE5\\u7F16\\u5199\\u4EE3\\u7801\\uFF0C\\u800C\\u65E0\\u9700\\u62C5\\u5FC3\\u76F4\\u63A5 DOM \\u64CD\\u4F5C\\u7684\\u6027\\u80FD\\u5F71\\u54CD\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u53EF\\u9884\\u6D4B\\u6027\"}),\"\\uFF1A\\u865A\\u62DF DOM \\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u53EF\\u9884\\u6D4B\\u7684\\u65B9\\u5F0F\\u6765\\u66F4\\u65B0 UI\\uFF0C\\u4ECE\\u800C\\u66F4\\u5BB9\\u6613\\u63A8\\u65AD\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u72B6\\u6001\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u4F8B\\u5B50\\uFF0C\\u8BF4\\u660E\\u865A\\u62DF DOM \\u5728 React \\u4E2D\\u7684\\u5DE5\\u4F5C\\u65B9\\u5F0F\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`import React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n\nexport default Counter;\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u5F53\\u5355\\u51FB\\u6309\\u94AE\\u65F6\\uFF0C\\u72B6\\u6001 \",(0,e.jsx)(n.code,{children:\"count\"}),\" \\u4F1A\\u66F4\\u65B0\\u3002React \\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\uFF0C\\u5C06\\u5176\\u4E0E\\u524D\\u4E00\\u4E2A\\u6811\\u8FDB\\u884C\\u6BD4\\u8F83\\uFF0C\\u5E76\\u4EC5\\u66F4\\u65B0\\u771F\\u5B9E DOM \\u4E2D \",(0,e.jsx)(n.code,{children:\"<p>\"}),\" \\u6807\\u7B7E\\u5185\\u7684\\u6587\\u672C\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://react.dev/learn/preserving-and-resetting-state\",children:\"React documentation on reconciliation\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060\",children:\"Understanding the virtual DOM\"})}),`\n`]})]})}function s(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(a,{...t})}):a(t)}return x(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.json b/apps/web/src/__generated__/questions/quiz/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.json
index a31e7165c..2aa2c537a 100644
--- a/apps/web/src/__generated__/questions/quiz/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var b=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var o in e)c(r,o,{get:e[o],enumerable:!0})},i=(r,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of u(e))!y.call(r,t)&&t!==o&&c(r,t,{get:()=>e[t],enumerable:!(a=p(e,t))||a.enumerable});return r};var g=(r,e,o)=>(o=r!=null?s(m(r)):{},i(e||!r||!r.__esModule?c(o,\"default\",{value:r,enumerable:!0}):o,r)),j=r=>i(c({},\"__esModule\",{value:!0}),r);var d=b((x,l)=>{l.exports=_jsx_runtime});var k={};f(k,{default:()=>O,frontmatter:()=>v});var n=g(d()),v={title:\"What language constructs do you use for iterating over object properties and array items in JavaScript?\"};function h(r){let e=Object.assign({h2:\"h2\",p:\"p\",strong:\"strong\",code:\"code\",pre:\"pre\",ul:\"ul\",li:\"li\",hr:\"hr\",h3:\"h3\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"There are multiple ways to iterate over object properties as well as arrays in JavaScript:\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:\"for...in\"}),\" loop\"]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" loop iterates over all enumerable properties of an object, including inherited enumerable properties. So it is important to have a check if you only want to iterate over object's own properties\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  a: 1,\n  b: 2,\n  c: 3,\n};\n\nfor (const key in obj) {\n  // To avoid iterating over inherited properties\n  if (Object.hasOwn(obj, key)) {\n    console.log(\\`\\${key}: \\${obj[key]}\\`);\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Object.keys()\"})})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" returns an array of the object's own enumerable property names. You can then use a for...of loop or forEach to iterate over this array.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  a: 1,\n  b: 2,\n  c: 3,\n};\n\nObject.keys(obj).forEach((key) => {\n  console.log(\\`\\${key}: \\${obj[key]}\\`);\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Most common ways to iterate over array are using \",(0,n.jsx)(e.code,{children:\"for\"}),\" loop and \",(0,n.jsx)(e.code,{children:\"Array.prototype.forEach\"}),\" method.\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"for\"}),\" loop\"]})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let array = [1, 2, 3, 4, 5, 6];\nfor (let index = 0; index < array.length; index++) {\n  console.log(array[index]);\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"Array.prototype.forEach\"}),\" method\"]})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"let array = [1, 2, 3, 4, 5, 6];\\narray.forEach((number, index) => {\\n  console.log(`${number} at index ${index}`);\\n});\\n\"})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"for...of\"})]})}),`\n`,(0,n.jsx)(e.p,{children:\"This method is the newest and most convenient way to iterate over arrays. It automatically iterates over each element without requiring you to manage the index.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const numbers = [1, 2, 3, 4, 5];\n\nfor (const number of numbers) {\n  console.log(number);\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"There are also other inbuilt methods available which are suitable for specific scenarios for example:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Array.prototype.filter\"}),\": You can use the \",(0,n.jsx)(e.code,{children:\"filter\"}),\" method to create a new array containing only the elements that satisfy a certain condition.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Array.prototype.map\"}),\": You can use the \",(0,n.jsx)(e.code,{children:\"map\"}),\" method to create a new array based on the existing one, transforming each element with a provided function.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Array.prototype.reduce\"}),\": You can use the \",(0,n.jsx)(e.code,{children:\"reduce\"}),\" method to combine all elements into a single value by repeatedly calling a function that takes two arguments: the accumulated value and the current element.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Iterating over objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"Iterating over object properties and array is very common in JavaScript and we have various ways to achieve this. Here are some of the ways to do it:\"}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"for...in\"}),\" statement\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"This loop iterates over all \",(0,n.jsx)(e.strong,{children:\"enumerable\"}),\" properties of an object, including those inherited from its prototype chain.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  status: 'working',\n  hoursWorked: 3,\n};\n\nfor (const property in obj) {\n  console.log(property);\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Since \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" statement iterates over all the object's \",(0,n.jsx)(e.strong,{children:\"enumerable\"}),\" properties (including inherited enumerable properties). Hence most of the time you should check whether the property exists on directly on the object via \",(0,n.jsx)(e.code,{children:\"Object.hasOwn(object, property)\"}),\" before using it.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  status: 'working',\n  hoursWorked: 3,\n};\n\nfor (const property in obj) {\n  if (Object.hasOwn(obj, property)) {\n    console.log(property);\n  }\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Note that \",(0,n.jsx)(e.code,{children:\"obj.hasOwnProperty()\"}),\" is not recommended because it doesn't work for objects created using \",(0,n.jsx)(e.code,{children:\"Object.create(null)\"}),\". It is recommended to use \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn\",children:(0,n.jsx)(e.code,{children:\"Object.hasOwn()\"})}),\" in newer browsers, or use the good old \",(0,n.jsx)(e.code,{children:\"Object.prototype.hasOwnProperty.call(object, key)\"}),\".\"]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"Object.keys()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" is a static method that will return an array of all the enumerable property names of the object that you pass it. Since \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" returns an array, you can also use the array iteration approaches listed below to iterate through it.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  status: 'working',\n  hoursWorked: 3,\n};\n\nObject.keys(obj).forEach((property) => {\n  console.log(property);\n});\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"Object.entries()\"}),\":\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"This method returns an array of an object's enumerable properties in \",(0,n.jsx)(e.code,{children:\"[key, value]\"}),\" pairs.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"const obj = { a: 1, b: 2, c: 3 };\\nObject.entries(obj).forEach(([key, value]) => {\\n  console.log(`${key}: ${value}`);\\n});\\n\"})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"Object.getOwnPropertyNames()\"})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { a: 1, b: 2, c: 3 };\nObject.getOwnPropertyNames(obj).forEach((property) => {\n  console.log(property);\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.getOwnPropertyNames()\"}),\" is a static method that will lists all enumerable and non-enumerable properties of the object that you pass it. Since \",(0,n.jsx)(e.code,{children:\"Object.getOwnPropertyNames()\"}),\" returns an array, you can also use the array iteration approaches listed below to iterate through it.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Arrays\"}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"for\"}),\" loop\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr = [1, 2, 3, 4, 5];\nfor (var i = 0; i < arr.length; i++) {\n  console.log(arr[i]);\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"A common pitfall here is that \",(0,n.jsx)(e.code,{children:\"var\"}),\" is in the function scope and not the block scope and most of the time you would want block scoped iterator variable. ES2015 introduces \",(0,n.jsx)(e.code,{children:\"let\"}),\" which has block scope and it is recommended to use \",(0,n.jsx)(e.code,{children:\"let\"}),\" over \",(0,n.jsx)(e.code,{children:\"var\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr = [1, 2, 3, 4, 5];\nfor (let i = 0; i < arr.length; i++) {\n  console.log(arr[i]);\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"Array.prototype.forEach()\"})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"const arr = [1, 2, 3, 4, 5];\\narr.forEach((element, index) => {\\n  console.log(`${element} at index ${index}`);\\n});\\n\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Array.prototype.forEach()\"}),\" method can be more convenient at times if you do not need to use the \",(0,n.jsx)(e.code,{children:\"index\"}),\" and all you need is the individual array elements. However, the downside is that you cannot stop the iteration halfway and the provided function will be executed on the elements once. A \",(0,n.jsx)(e.code,{children:\"for\"}),\" loop or \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" statement is more relevant if you need finer control over the iteration.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"for...of\"}),\" statement\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr = [1, 2, 3, 4, 5];\nfor (let element of arr) {\n  console.log(element);\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"ES2015 introduces a new way to iterate, the \",(0,n.jsx)(e.code,{children:\"for-of\"}),\" loop, that allows you to loop over objects that conform to the \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol\",children:\"iterable protocol\"}),\" such as \",(0,n.jsx)(e.code,{children:\"String\"}),\", \",(0,n.jsx)(e.code,{children:\"Array\"}),\", \",(0,n.jsx)(e.code,{children:\"Map\"}),\", \",(0,n.jsx)(e.code,{children:\"Set\"}),\", etc. It combines the advantages of the \",(0,n.jsx)(e.code,{children:\"for\"}),\" loop and the \",(0,n.jsx)(e.code,{children:\"forEach()\"}),\" method. The advantage of the \",(0,n.jsx)(e.code,{children:\"for\"}),\" loop is that you can break from it, and the advantage of \",(0,n.jsx)(e.code,{children:\"forEach()\"}),\" is that it is more concise than the \",(0,n.jsx)(e.code,{children:\"for\"}),\" loop because you don't need a counter variable. With the \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" statement, you get both the ability to break from a loop and a more concise syntax.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Most of the time, prefer the \",(0,n.jsx)(e.code,{children:\".forEach\"}),\" method, but it really depends on what you are trying to do. Before ES2015, we used \",(0,n.jsx)(e.code,{children:\"for\"}),\" loops when we needed to prematurely terminate the loop using \",(0,n.jsx)(e.code,{children:\"break\"}),\". But now with ES2015, we can do that with \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" statement. Use \",(0,n.jsx)(e.code,{children:\"for\"}),\" loops when you need more flexibility, such as incrementing the iterator more than once per loop.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Also, when using the \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" statement, if you need to access both the index and value of each array element, you can do so with ES2015 \",(0,n.jsx)(e.code,{children:\"Array.prototype.entries()\"}),\" method:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr = ['a', 'b', 'c'];\n\nfor (let [index, elem] of arr.entries()) {\n  console.log(index, elem);\n}\n`})}),`\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/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames\",children:\"Object.getOwnPropertyNames() - JavaScript | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys\",children:\"Object.keys() - JavaScript | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of\",children:\"for...of - JavaScript | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach\",children:\"Array.prototype.forEach() - JavaScript | MDN\"})}),`\n`]})]})}function w(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(h,r)})):h(r)}var O=w;return j(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),g=(r,e)=>{for(var o in e)c(r,o,{get:e[o],enumerable:!0})},i=(r,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of m(e))!b.call(r,t)&&t!==o&&c(r,t,{get:()=>e[t],enumerable:!(a=u(e,t))||a.enumerable});return r};var j=(r,e,o)=>(o=r!=null?p(y(r)):{},i(e||!r||!r.__esModule?c(o,\"default\",{value:r,enumerable:!0}):o,r)),v=r=>i(c({},\"__esModule\",{value:!0}),r);var d=f((S,l)=>{l.exports=_jsx_runtime});var O={};g(O,{default:()=>s,frontmatter:()=>w});var n=j(d()),w={title:\"What language constructs do you use for iterating over object properties and array items in JavaScript?\"};function h(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"There are multiple ways to iterate over object properties as well as arrays in JavaScript:\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:\"for...in\"}),\" loop\"]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" loop iterates over all enumerable properties of an object, including inherited enumerable properties. So it is important to have a check if you only want to iterate over object's own properties\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  a: 1,\n  b: 2,\n  c: 3,\n};\n\nfor (const key in obj) {\n  // To avoid iterating over inherited properties\n  if (Object.hasOwn(obj, key)) {\n    console.log(\\`\\${key}: \\${obj[key]}\\`);\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Object.keys()\"})})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" returns an array of the object's own enumerable property names. You can then use a for...of loop or forEach to iterate over this array.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  a: 1,\n  b: 2,\n  c: 3,\n};\n\nObject.keys(obj).forEach((key) => {\n  console.log(\\`\\${key}: \\${obj[key]}\\`);\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Most common ways to iterate over array are using \",(0,n.jsx)(e.code,{children:\"for\"}),\" loop and \",(0,n.jsx)(e.code,{children:\"Array.prototype.forEach\"}),\" method.\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"for\"}),\" loop\"]})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let array = [1, 2, 3, 4, 5, 6];\nfor (let index = 0; index < array.length; index++) {\n  console.log(array[index]);\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"Array.prototype.forEach\"}),\" method\"]})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"let array = [1, 2, 3, 4, 5, 6];\\narray.forEach((number, index) => {\\n  console.log(`${number} at index ${index}`);\\n});\\n\"})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"for...of\"})]})}),`\n`,(0,n.jsx)(e.p,{children:\"This method is the newest and most convenient way to iterate over arrays. It automatically iterates over each element without requiring you to manage the index.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const numbers = [1, 2, 3, 4, 5];\n\nfor (const number of numbers) {\n  console.log(number);\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"There are also other inbuilt methods available which are suitable for specific scenarios for example:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Array.prototype.filter\"}),\": You can use the \",(0,n.jsx)(e.code,{children:\"filter\"}),\" method to create a new array containing only the elements that satisfy a certain condition.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Array.prototype.map\"}),\": You can use the \",(0,n.jsx)(e.code,{children:\"map\"}),\" method to create a new array based on the existing one, transforming each element with a provided function.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Array.prototype.reduce\"}),\": You can use the \",(0,n.jsx)(e.code,{children:\"reduce\"}),\" method to combine all elements into a single value by repeatedly calling a function that takes two arguments: the accumulated value and the current element.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Iterating over objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"Iterating over object properties and array is very common in JavaScript and we have various ways to achieve this. Here are some of the ways to do it:\"}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"for...in\"}),\" statement\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"This loop iterates over all \",(0,n.jsx)(e.strong,{children:\"enumerable\"}),\" properties of an object, including those inherited from its prototype chain.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  status: 'working',\n  hoursWorked: 3,\n};\n\nfor (const property in obj) {\n  console.log(property);\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Since \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" statement iterates over all the object's \",(0,n.jsx)(e.strong,{children:\"enumerable\"}),\" properties (including inherited enumerable properties). Hence most of the time you should check whether the property exists on directly on the object via \",(0,n.jsx)(e.code,{children:\"Object.hasOwn(object, property)\"}),\" before using it.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  status: 'working',\n  hoursWorked: 3,\n};\n\nfor (const property in obj) {\n  if (Object.hasOwn(obj, property)) {\n    console.log(property);\n  }\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Note that \",(0,n.jsx)(e.code,{children:\"obj.hasOwnProperty()\"}),\" is not recommended because it doesn't work for objects created using \",(0,n.jsx)(e.code,{children:\"Object.create(null)\"}),\". It is recommended to use \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn\",children:(0,n.jsx)(e.code,{children:\"Object.hasOwn()\"})}),\" in newer browsers, or use the good old \",(0,n.jsx)(e.code,{children:\"Object.prototype.hasOwnProperty.call(object, key)\"}),\".\"]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"Object.keys()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" is a static method that will return an array of all the enumerable property names of the object that you pass it. Since \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" returns an array, you can also use the array iteration approaches listed below to iterate through it.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  status: 'working',\n  hoursWorked: 3,\n};\n\nObject.keys(obj).forEach((property) => {\n  console.log(property);\n});\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"Object.entries()\"}),\":\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"This method returns an array of an object's enumerable properties in \",(0,n.jsx)(e.code,{children:\"[key, value]\"}),\" pairs.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"const obj = { a: 1, b: 2, c: 3 };\\nObject.entries(obj).forEach(([key, value]) => {\\n  console.log(`${key}: ${value}`);\\n});\\n\"})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"Object.getOwnPropertyNames()\"})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { a: 1, b: 2, c: 3 };\nObject.getOwnPropertyNames(obj).forEach((property) => {\n  console.log(property);\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.getOwnPropertyNames()\"}),\" is a static method that will lists all enumerable and non-enumerable properties of the object that you pass it. Since \",(0,n.jsx)(e.code,{children:\"Object.getOwnPropertyNames()\"}),\" returns an array, you can also use the array iteration approaches listed below to iterate through it.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Arrays\"}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"for\"}),\" loop\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr = [1, 2, 3, 4, 5];\nfor (var i = 0; i < arr.length; i++) {\n  console.log(arr[i]);\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"A common pitfall here is that \",(0,n.jsx)(e.code,{children:\"var\"}),\" is in the function scope and not the block scope and most of the time you would want block scoped iterator variable. ES2015 introduces \",(0,n.jsx)(e.code,{children:\"let\"}),\" which has block scope and it is recommended to use \",(0,n.jsx)(e.code,{children:\"let\"}),\" over \",(0,n.jsx)(e.code,{children:\"var\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr = [1, 2, 3, 4, 5];\nfor (let i = 0; i < arr.length; i++) {\n  console.log(arr[i]);\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"Array.prototype.forEach()\"})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"const arr = [1, 2, 3, 4, 5];\\narr.forEach((element, index) => {\\n  console.log(`${element} at index ${index}`);\\n});\\n\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Array.prototype.forEach()\"}),\" method can be more convenient at times if you do not need to use the \",(0,n.jsx)(e.code,{children:\"index\"}),\" and all you need is the individual array elements. However, the downside is that you cannot stop the iteration halfway and the provided function will be executed on the elements once. A \",(0,n.jsx)(e.code,{children:\"for\"}),\" loop or \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" statement is more relevant if you need finer control over the iteration.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"for...of\"}),\" statement\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr = [1, 2, 3, 4, 5];\nfor (let element of arr) {\n  console.log(element);\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"ES2015 introduces a new way to iterate, the \",(0,n.jsx)(e.code,{children:\"for-of\"}),\" loop, that allows you to loop over objects that conform to the \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol\",children:\"iterable protocol\"}),\" such as \",(0,n.jsx)(e.code,{children:\"String\"}),\", \",(0,n.jsx)(e.code,{children:\"Array\"}),\", \",(0,n.jsx)(e.code,{children:\"Map\"}),\", \",(0,n.jsx)(e.code,{children:\"Set\"}),\", etc. It combines the advantages of the \",(0,n.jsx)(e.code,{children:\"for\"}),\" loop and the \",(0,n.jsx)(e.code,{children:\"forEach()\"}),\" method. The advantage of the \",(0,n.jsx)(e.code,{children:\"for\"}),\" loop is that you can break from it, and the advantage of \",(0,n.jsx)(e.code,{children:\"forEach()\"}),\" is that it is more concise than the \",(0,n.jsx)(e.code,{children:\"for\"}),\" loop because you don't need a counter variable. With the \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" statement, you get both the ability to break from a loop and a more concise syntax.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Most of the time, prefer the \",(0,n.jsx)(e.code,{children:\".forEach\"}),\" method, but it really depends on what you are trying to do. Before ES2015, we used \",(0,n.jsx)(e.code,{children:\"for\"}),\" loops when we needed to prematurely terminate the loop using \",(0,n.jsx)(e.code,{children:\"break\"}),\". But now with ES2015, we can do that with \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" statement. Use \",(0,n.jsx)(e.code,{children:\"for\"}),\" loops when you need more flexibility, such as incrementing the iterator more than once per loop.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Also, when using the \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" statement, if you need to access both the index and value of each array element, you can do so with ES2015 \",(0,n.jsx)(e.code,{children:\"Array.prototype.entries()\"}),\" method:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr = ['a', 'b', 'c'];\n\nfor (let [index, elem] of arr.entries()) {\n  console.log(index, elem);\n}\n`})}),`\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/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames\",children:\"Object.getOwnPropertyNames() - JavaScript | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys\",children:\"Object.keys() - JavaScript | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of\",children:\"for...of - JavaScript | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach\",children:\"Array.prototype.forEach() - JavaScript | MDN\"})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return v(O);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/pt-BR.json
index da6d4a91c..a94fa1ac8 100644
--- a/apps/web/src/__generated__/questions/quiz/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),v=(r,e)=>{for(var a in e)c(r,a,{get:e[a],enumerable:!0})},i=(r,e,a,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of h(e))!b.call(r,n)&&n!==a&&c(r,n,{get:()=>e[n],enumerable:!(d=m(e,n))||d.enumerable});return r};var j=(r,e,a)=>(a=r!=null?p(u(r)):{},i(e||!r||!r.__esModule?c(a,\"default\",{value:r,enumerable:!0}):a,r)),g=r=>i(c({},\"__esModule\",{value:!0}),r);var t=f((x,s)=>{s.exports=_jsx_runtime});var S={};v(S,{default:()=>z,frontmatter:()=>y});var o=j(t()),y={title:\"Que constru\\xE7\\xF5es de idioma voc\\xEA usa para iterar sobre propriedades de objeto e itens de matriz?\"};function l(r){let e=Object.assign({h2:\"h2\",h3:\"h3\",code:\"code\",pre:\"pre\",p:\"p\",strong:\"strong\",a:\"a\",em:\"em\"},r.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h2,{children:\"Objetos\"}),`\n`,(0,o.jsxs)(e.h3,{children:[\"declara\\xE7\\xE3o \",(0,o.jsx)(e.code,{children:\"for...in\"})]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`for (const property in obj) {\n  console.log(property);\n}\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"A declara\\xE7\\xE3o \",(0,o.jsx)(e.code,{children:\"for...in\"}),\" itera sobre todas as propriedades \",(0,o.jsx)(e.strong,{children:\"enumer\\xE1veis\"}),\" do objeto (incluindo as propriedades enumer\\xE1veis herdadas). Portanto, na maioria das vezes, voc\\xEA deve verificar se a propriedade existe diretamente no objeto por meio de \",(0,o.jsx)(e.code,{children:\"Object.hasOwn(object, property)\"}),\" antes de us\\xE1-la.\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`for (const property in obj) {\n  if (Object.hasOwn(obj, property)) {\n    console.log(property);\n  }\n}\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"Observe que \",(0,o.jsx)(e.code,{children:\"obj.hasOwnProperty()\"}),\" n\\xE3o \\xE9 recomendado porque n\\xE3o funciona para objetos criados usando \",(0,o.jsx)(e.code,{children:\"Object.create(null)\"}),\". \\xC9 recomendado usar \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn\",children:(0,o.jsx)(e.code,{children:\"Object.hasOwn()\"})}),\" nos navegadores mais recentes, ou use o bom \",(0,o.jsx)(e.code,{children:\"Object.prototype.hasOwnProperty.call(object, key)\"}),\".\"]}),`\n`,(0,o.jsx)(e.h3,{children:(0,o.jsx)(e.code,{children:\"Object.keys()\"})}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`Object.keys(obj).forEach((property) => {\n  console.log(property);\n});\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"Object.keys()\"}),\" \\xE9 um m\\xE9todo est\\xE1tico que retornar\\xE1 um array com todos os nomes de propriedade enumerados do objeto que voc\\xEA passa. Uma vez que \",(0,o.jsx)(e.code,{children:\"Object.keys()\"}),\" retorna um array, voc\\xEA tamb\\xE9m pode usar as abordagens de itera\\xE7\\xE3o de matriz listadas abaixo para iterar atrav\\xE9s dele.\"]}),`\n`,(0,o.jsx)(e.p,{children:(0,o.jsxs)(e.em,{children:[\"Refer\\xEAncia: \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys\",children:\"Object.keys() - JavaScript | MDN\"})]})}),`\n`,(0,o.jsx)(e.h3,{children:(0,o.jsx)(e.code,{children:\"Object.getOwnPropertyNames()\"})}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`Object.getOwnPropertyNames(obj).forEach((property) => {\n  console.log(property);\n});\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"Object.getOwnPropertyNames()\"}),\" \\xE9 um m\\xE9todo est\\xE1tico que listar\\xE1 todas as propriedades enumeradas e n\\xE3o-enumer\\xE1veis do objeto que voc\\xEA passou. Uma vez que \",(0,o.jsx)(e.code,{children:\"Object.getOwnPropertyNames()\"}),\" retorna uma matriz, voc\\xEA tamb\\xE9m pode usar as abordagens de itera\\xE7\\xE3o de matriz listadas abaixo para percorrer a matriz.\"]}),`\n`,(0,o.jsx)(e.p,{children:(0,o.jsxs)(e.em,{children:[\"Refer\\xEAncia: \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames\",children:\"Object.keys() - JavaScript | MDN\"})]})}),`\n`,(0,o.jsx)(e.h2,{children:\"Arrays\"}),`\n`,(0,o.jsxs)(e.h3,{children:[(0,o.jsx)(e.code,{children:\"for\"}),\" loop\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`for (let i = 0; i < arr.length; i++) {\n  console.log(arr[i]);\n}\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"Uma armadilha comum aqui \\xE9 que \",(0,o.jsx)(e.code,{children:\"var\"}),\" est\\xE1 no escopo da fun\\xE7\\xE3o e n\\xE3o no escopo de bloco, e na maioria das vezes voc\\xEA desejar\\xE1 uma vari\\xE1vel de iterador com escopo de bloco. ES2015 introduz o \",(0,o.jsx)(e.code,{children:\"let\"}),\" que tem escopo de bloco e \\xE9 recomendado usar \",(0,o.jsx)(e.code,{children:\"let\"}),\" em vez de \",(0,o.jsx)(e.code,{children:\"var\"}),\".\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`for (let i = 0; i < arr.length; i++) {\n  console.log(arr[i]);\n}\n`})}),`\n`,(0,o.jsx)(e.h3,{children:(0,o.jsx)(e.code,{children:\"Array.prototype.forEach()\"})}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`arr.forEach((element, index) => {\n  console.log(element, index);\n});\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"O m\\xE9todo \",(0,o.jsx)(e.code,{children:\"Array.prototype.forEach()\"}),\" pode ser mais conveniente em algumas situa\\xE7\\xF5es se voc\\xEA n\\xE3o precisar usar o \\xEDndice e s\\xF3 precisar dos elementos individuais do array. No entanto, o lado negativo \\xE9 que n\\xE3o se pode parar a itera\\xE7\\xE3o a meio do caminho e a fun\\xE7\\xE3o fornecida ser\\xE1 executada uma vez nos elementos. Um la\\xE7o \",(0,o.jsx)(e.code,{children:\"for\"}),\" ou uma declara\\xE7\\xE3o \",(0,o.jsx)(e.code,{children:\"for...of\"}),\" s\\xE3o mais relevantes quando \\xE9 necess\\xE1rio um controle mais preciso sobre a itera\\xE7\\xE3o.\"]}),`\n`,(0,o.jsx)(e.p,{children:(0,o.jsxs)(e.em,{children:[\"Refer\\xEAncia: \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys\",children:\"Object.keys() - JavaScript | MDN\"})]})}),`\n`,(0,o.jsxs)(e.h3,{children:[\"declara\\xE7\\xE3o \",(0,o.jsx)(e.code,{children:\"for...of\"})]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`for (let element of arr) {\n  console.log(element);\n}\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"ES2015 introduz uma nova forma de iterar, o la\\xE7o \",(0,o.jsx)(e.code,{children:\"para\"}),\", que permite repetir o loop sobre objetos que estejam em conformidade com o \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol\",children:\"protocolo iter\\xE1vel\"}),\" como \",(0,o.jsx)(e.code,{children:\"String\"}),\", \",(0,o.jsx)(e.code,{children:\"Array\"}),\", \",(0,o.jsx)(e.code,{children:\"Set\"}),\", etc. Ele combina as vantagens do loop \",(0,o.jsx)(e.code,{children:\"for\"}),\" e do m\\xE9todo \",(0,o.jsx)(e.code,{children:\"forEach()\"}),\". A vantagem do la\\xE7o \",(0,o.jsx)(e.code,{children:\"para\"}),\" \\xE9 que voc\\xEA pode parar dele, e a vantagem de \",(0,o.jsx)(e.code,{children:\"forEach()\"}),\" \\xE9 que ele \\xE9 mais conciso que o la\\xE7o \",(0,o.jsx)(e.code,{children:\"for\"}),\" porque voc\\xEA n\\xE3o precisa de uma vari\\xE1vel contadora. Com a declara\\xE7\\xE3o \",(0,o.jsx)(e.code,{children:\"for...of\"}),\", voc\\xEA obt\\xE9m a capacidade de quebrar de um la\\xE7o e uma sintaxe mais concisa.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"A maioria das vezes, prefira o m\\xE9todo \",(0,o.jsx)(e.code,{children:\".forEach\"}),\", mas realmente depende do que voc\\xEA est\\xE1 tentando fazer. Antes do ES2015, usamos la\\xE7os \",(0,o.jsx)(e.code,{children:\"for\"}),\" quando precis\\xE1vamos encerrar prematuramente o la\\xE7o usando \",(0,o.jsx)(e.code,{children:\"break\"}),\". Mas agora com ES2015, podemos fazer isso com a declara\\xE7\\xE3o \",(0,o.jsx)(e.code,{children:\"for...of\"}),\". Use la\\xE7os \",(0,o.jsx)(e.code,{children:\"for\"}),\" quando voc\\xEA precisar de mais flexibilidade, como incrementar o iterador mais de uma vez por la\\xE7o.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Al\\xE9m disso, ao usar o \",(0,o.jsx)(e.code,{children:\"for...of\"}),\" declara\\xE7\\xE3o, se voc\\xEA precisar acessar o \\xEDndice e o valor de cada elemento de matriz, voc\\xEA pode fazer isso com ES2015 \",(0,o.jsx)(e.code,{children:\"Array.prototype.entries()\"}),\":\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`const arr = ['a', 'b', 'c'];\n\nfor (let [index, elem] of arr.entries()) {\n  console.log(index, ': ', elem);\n}\n`})}),`\n`,(0,o.jsx)(e.p,{children:(0,o.jsxs)(e.em,{children:[\"Refer\\xEAncia: \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of\",children:\"for...of - JavaScript | MDN\"})]})})]})}function O(r={}){let{wrapper:e}=r.components||{};return e?(0,o.jsx)(e,Object.assign({},r,{children:(0,o.jsx)(l,r)})):l(r)}var z=O;return g(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),j=(r,e)=>{for(var a in e)c(r,a,{get:e[a],enumerable:!0})},i=(r,e,a,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of u(e))!f.call(r,n)&&n!==a&&c(r,n,{get:()=>e[n],enumerable:!(d=h(e,n))||d.enumerable});return r};var g=(r,e,a)=>(a=r!=null?m(b(r)):{},i(e||!r||!r.__esModule?c(a,\"default\",{value:r,enumerable:!0}):a,r)),y=r=>i(c({},\"__esModule\",{value:!0}),r);var t=v((q,s)=>{s.exports=_jsx_runtime});var z={};j(z,{default:()=>p,frontmatter:()=>O});var o=g(t()),O={title:\"Que constru\\xE7\\xF5es de idioma voc\\xEA usa para iterar sobre propriedades de objeto e itens de matriz?\"};function l(r){let e={a:\"a\",code:\"code\",em:\"em\",h2:\"h2\",h3:\"h3\",p:\"p\",pre:\"pre\",strong:\"strong\",...r.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h2,{children:\"Objetos\"}),`\n`,(0,o.jsxs)(e.h3,{children:[\"declara\\xE7\\xE3o \",(0,o.jsx)(e.code,{children:\"for...in\"})]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`for (const property in obj) {\n  console.log(property);\n}\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"A declara\\xE7\\xE3o \",(0,o.jsx)(e.code,{children:\"for...in\"}),\" itera sobre todas as propriedades \",(0,o.jsx)(e.strong,{children:\"enumer\\xE1veis\"}),\" do objeto (incluindo as propriedades enumer\\xE1veis herdadas). Portanto, na maioria das vezes, voc\\xEA deve verificar se a propriedade existe diretamente no objeto por meio de \",(0,o.jsx)(e.code,{children:\"Object.hasOwn(object, property)\"}),\" antes de us\\xE1-la.\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`for (const property in obj) {\n  if (Object.hasOwn(obj, property)) {\n    console.log(property);\n  }\n}\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"Observe que \",(0,o.jsx)(e.code,{children:\"obj.hasOwnProperty()\"}),\" n\\xE3o \\xE9 recomendado porque n\\xE3o funciona para objetos criados usando \",(0,o.jsx)(e.code,{children:\"Object.create(null)\"}),\". \\xC9 recomendado usar \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn\",children:(0,o.jsx)(e.code,{children:\"Object.hasOwn()\"})}),\" nos navegadores mais recentes, ou use o bom \",(0,o.jsx)(e.code,{children:\"Object.prototype.hasOwnProperty.call(object, key)\"}),\".\"]}),`\n`,(0,o.jsx)(e.h3,{children:(0,o.jsx)(e.code,{children:\"Object.keys()\"})}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`Object.keys(obj).forEach((property) => {\n  console.log(property);\n});\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"Object.keys()\"}),\" \\xE9 um m\\xE9todo est\\xE1tico que retornar\\xE1 um array com todos os nomes de propriedade enumerados do objeto que voc\\xEA passa. Uma vez que \",(0,o.jsx)(e.code,{children:\"Object.keys()\"}),\" retorna um array, voc\\xEA tamb\\xE9m pode usar as abordagens de itera\\xE7\\xE3o de matriz listadas abaixo para iterar atrav\\xE9s dele.\"]}),`\n`,(0,o.jsx)(e.p,{children:(0,o.jsxs)(e.em,{children:[\"Refer\\xEAncia: \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys\",children:\"Object.keys() - JavaScript | MDN\"})]})}),`\n`,(0,o.jsx)(e.h3,{children:(0,o.jsx)(e.code,{children:\"Object.getOwnPropertyNames()\"})}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`Object.getOwnPropertyNames(obj).forEach((property) => {\n  console.log(property);\n});\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"Object.getOwnPropertyNames()\"}),\" \\xE9 um m\\xE9todo est\\xE1tico que listar\\xE1 todas as propriedades enumeradas e n\\xE3o-enumer\\xE1veis do objeto que voc\\xEA passou. Uma vez que \",(0,o.jsx)(e.code,{children:\"Object.getOwnPropertyNames()\"}),\" retorna uma matriz, voc\\xEA tamb\\xE9m pode usar as abordagens de itera\\xE7\\xE3o de matriz listadas abaixo para percorrer a matriz.\"]}),`\n`,(0,o.jsx)(e.p,{children:(0,o.jsxs)(e.em,{children:[\"Refer\\xEAncia: \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames\",children:\"Object.keys() - JavaScript | MDN\"})]})}),`\n`,(0,o.jsx)(e.h2,{children:\"Arrays\"}),`\n`,(0,o.jsxs)(e.h3,{children:[(0,o.jsx)(e.code,{children:\"for\"}),\" loop\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`for (let i = 0; i < arr.length; i++) {\n  console.log(arr[i]);\n}\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"Uma armadilha comum aqui \\xE9 que \",(0,o.jsx)(e.code,{children:\"var\"}),\" est\\xE1 no escopo da fun\\xE7\\xE3o e n\\xE3o no escopo de bloco, e na maioria das vezes voc\\xEA desejar\\xE1 uma vari\\xE1vel de iterador com escopo de bloco. ES2015 introduz o \",(0,o.jsx)(e.code,{children:\"let\"}),\" que tem escopo de bloco e \\xE9 recomendado usar \",(0,o.jsx)(e.code,{children:\"let\"}),\" em vez de \",(0,o.jsx)(e.code,{children:\"var\"}),\".\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`for (let i = 0; i < arr.length; i++) {\n  console.log(arr[i]);\n}\n`})}),`\n`,(0,o.jsx)(e.h3,{children:(0,o.jsx)(e.code,{children:\"Array.prototype.forEach()\"})}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`arr.forEach((element, index) => {\n  console.log(element, index);\n});\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"O m\\xE9todo \",(0,o.jsx)(e.code,{children:\"Array.prototype.forEach()\"}),\" pode ser mais conveniente em algumas situa\\xE7\\xF5es se voc\\xEA n\\xE3o precisar usar o \\xEDndice e s\\xF3 precisar dos elementos individuais do array. No entanto, o lado negativo \\xE9 que n\\xE3o se pode parar a itera\\xE7\\xE3o a meio do caminho e a fun\\xE7\\xE3o fornecida ser\\xE1 executada uma vez nos elementos. Um la\\xE7o \",(0,o.jsx)(e.code,{children:\"for\"}),\" ou uma declara\\xE7\\xE3o \",(0,o.jsx)(e.code,{children:\"for...of\"}),\" s\\xE3o mais relevantes quando \\xE9 necess\\xE1rio um controle mais preciso sobre a itera\\xE7\\xE3o.\"]}),`\n`,(0,o.jsx)(e.p,{children:(0,o.jsxs)(e.em,{children:[\"Refer\\xEAncia: \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys\",children:\"Object.keys() - JavaScript | MDN\"})]})}),`\n`,(0,o.jsxs)(e.h3,{children:[\"declara\\xE7\\xE3o \",(0,o.jsx)(e.code,{children:\"for...of\"})]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`for (let element of arr) {\n  console.log(element);\n}\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"ES2015 introduz uma nova forma de iterar, o la\\xE7o \",(0,o.jsx)(e.code,{children:\"para\"}),\", que permite repetir o loop sobre objetos que estejam em conformidade com o \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol\",children:\"protocolo iter\\xE1vel\"}),\" como \",(0,o.jsx)(e.code,{children:\"String\"}),\", \",(0,o.jsx)(e.code,{children:\"Array\"}),\", \",(0,o.jsx)(e.code,{children:\"Set\"}),\", etc. Ele combina as vantagens do loop \",(0,o.jsx)(e.code,{children:\"for\"}),\" e do m\\xE9todo \",(0,o.jsx)(e.code,{children:\"forEach()\"}),\". A vantagem do la\\xE7o \",(0,o.jsx)(e.code,{children:\"para\"}),\" \\xE9 que voc\\xEA pode parar dele, e a vantagem de \",(0,o.jsx)(e.code,{children:\"forEach()\"}),\" \\xE9 que ele \\xE9 mais conciso que o la\\xE7o \",(0,o.jsx)(e.code,{children:\"for\"}),\" porque voc\\xEA n\\xE3o precisa de uma vari\\xE1vel contadora. Com a declara\\xE7\\xE3o \",(0,o.jsx)(e.code,{children:\"for...of\"}),\", voc\\xEA obt\\xE9m a capacidade de quebrar de um la\\xE7o e uma sintaxe mais concisa.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"A maioria das vezes, prefira o m\\xE9todo \",(0,o.jsx)(e.code,{children:\".forEach\"}),\", mas realmente depende do que voc\\xEA est\\xE1 tentando fazer. Antes do ES2015, usamos la\\xE7os \",(0,o.jsx)(e.code,{children:\"for\"}),\" quando precis\\xE1vamos encerrar prematuramente o la\\xE7o usando \",(0,o.jsx)(e.code,{children:\"break\"}),\". Mas agora com ES2015, podemos fazer isso com a declara\\xE7\\xE3o \",(0,o.jsx)(e.code,{children:\"for...of\"}),\". Use la\\xE7os \",(0,o.jsx)(e.code,{children:\"for\"}),\" quando voc\\xEA precisar de mais flexibilidade, como incrementar o iterador mais de uma vez por la\\xE7o.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Al\\xE9m disso, ao usar o \",(0,o.jsx)(e.code,{children:\"for...of\"}),\" declara\\xE7\\xE3o, se voc\\xEA precisar acessar o \\xEDndice e o valor de cada elemento de matriz, voc\\xEA pode fazer isso com ES2015 \",(0,o.jsx)(e.code,{children:\"Array.prototype.entries()\"}),\":\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`const arr = ['a', 'b', 'c'];\n\nfor (let [index, elem] of arr.entries()) {\n  console.log(index, ': ', elem);\n}\n`})}),`\n`,(0,o.jsx)(e.p,{children:(0,o.jsxs)(e.em,{children:[\"Refer\\xEAncia: \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of\",children:\"for...of - JavaScript | MDN\"})]})})]})}function p(r={}){let{wrapper:e}=r.components||{};return e?(0,o.jsx)(e,{...r,children:(0,o.jsx)(l,{...r})}):l(r)}return y(z);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/zh-CN.json
index 88051b444..fc77fc883 100644
--- a/apps/web/src/__generated__/questions/quiz/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var j=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),y=(r,e)=>{for(var c in e)l(r,c,{get:e[c],enumerable:!0})},i=(r,e,c,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of f(e))!b.call(r,o)&&o!==c&&l(r,o,{get:()=>e[o],enumerable:!(d=p(e,o))||d.enumerable});return r};var u=(r,e,c)=>(c=r!=null?s(g(r)):{},i(e||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),m=r=>i(l({},\"__esModule\",{value:!0}),r);var h=j((x,t)=>{t.exports=_jsx_runtime});var S={};y(S,{default:()=>k,frontmatter:()=>O});var n=u(h()),O={title:\"JavaScript \\u4E2D\\u4F7F\\u7528\\u4EC0\\u4E48\\u8BED\\u8A00\\u7ED3\\u6784\\u6765\\u8FED\\u4EE3\\u5BF9\\u8C61\\u5C5E\\u6027\\u548C\\u6570\\u7EC4\\u9879\\uFF1F\"};function a(r){let e=Object.assign({h2:\"h2\",p:\"p\",strong:\"strong\",code:\"code\",pre:\"pre\",ul:\"ul\",li:\"li\",hr:\"hr\",h3:\"h3\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u6709\\u591A\\u79CD\\u65B9\\u6CD5\\u53EF\\u4EE5\\u8FED\\u4EE3\\u5BF9\\u8C61\\u5C5E\\u6027\\u548C\\u6570\\u7EC4\\uFF1A\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:\"for...in\"}),\" \\u5FAA\\u73AF\"]})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"for...in\"}),\" \\u5FAA\\u73AF\\u904D\\u5386\\u5BF9\\u8C61\\u7684\\u6240\\u6709\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\\uFF0C\\u5305\\u62EC\\u7EE7\\u627F\\u7684\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\\u3002\\u56E0\\u6B64\\uFF0C\\u5982\\u679C\\u60A8\\u53EA\\u60F3\\u904D\\u5386\\u5BF9\\u8C61\\u7684\\u81EA\\u6709\\u5C5E\\u6027\\uFF0C\\u8FDB\\u884C\\u68C0\\u67E5\\u975E\\u5E38\\u91CD\\u8981\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  a: 1,\n  b: 2,\n  c: 3,\n};\n\nfor (const key in obj) {\n  // To avoid iterating over inherited properties\n  if (Object.hasOwn(obj, key)) {\n    console.log(\\`\\${key}: \\${obj[key]}\\`);\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Object.keys()\"})})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" \\u8FD4\\u56DE\\u4E00\\u4E2A\\u7531\\u5BF9\\u8C61\\u81EA\\u8EAB\\u7684\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\\u540D\\u79F0\\u7EC4\\u6210\\u7684\\u6570\\u7EC4\\u3002\\u7136\\u540E\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 for...of \\u5FAA\\u73AF\\u6216 forEach \\u904D\\u5386\\u6B64\\u6570\\u7EC4\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  a: 1,\n  b: 2,\n  c: 3,\n};\n\nObject.keys(obj).forEach((key) => {\n  console.log(\\`\\${key}: \\${obj[key]}\\`);\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FED\\u4EE3\\u6570\\u7EC4\\u6700\\u5E38\\u89C1\\u7684\\u65B9\\u6CD5\\u662F\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u548C \",(0,n.jsx)(e.code,{children:\"Array.prototype.forEach\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\"]})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let array = [1, 2, 3, 4, 5, 6];\nfor (let index = 0; index < array.length; index++) {\n  console.log(array[index]);\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Array.prototype.forEach\"}),\" \\u65B9\\u6CD5\"]})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"let array = [1, 2, 3, 4, 5, 6];\\narray.forEach((number, index) => {\\n  console.log(`${number} at index ${index}`);\\n});\\n\"})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for...of\"})]})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u65B9\\u6CD5\\u662F\\u8FED\\u4EE3\\u6570\\u7EC4\\u7684\\u6700\\u65B0\\u548C\\u6700\\u65B9\\u4FBF\\u7684\\u65B9\\u6CD5\\u3002\\u5B83\\u4F1A\\u81EA\\u52A8\\u8FED\\u4EE3\\u6BCF\\u4E2A\\u5143\\u7D20\\uFF0C\\u800C\\u65E0\\u9700\\u60A8\\u7BA1\\u7406\\u7D22\\u5F15\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const numbers = [1, 2, 3, 4, 5];\n\nfor (const number of numbers) {\n  console.log(number);\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD8\\u6709\\u5176\\u4ED6\\u53EF\\u7528\\u7684\\u5185\\u7F6E\\u65B9\\u6CD5\\uFF0C\\u9002\\u7528\\u4E8E\\u7279\\u5B9A\\u573A\\u666F\\uFF0C\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Array.prototype.filter\"}),\"\\uFF1A\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"filter\"}),\" \\u65B9\\u6CD5\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u6570\\u7EC4\\uFF0C\\u5176\\u4E2D\\u4EC5\\u5305\\u542B\\u6EE1\\u8DB3\\u7279\\u5B9A\\u6761\\u4EF6\\u7684\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Array.prototype.map\"}),\"\\uFF1A\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"map\"}),\" \\u65B9\\u6CD5\\u57FA\\u4E8E\\u73B0\\u6709\\u6570\\u7EC4\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u6570\\u7EC4\\uFF0C\\u5E76\\u4F7F\\u7528\\u63D0\\u4F9B\\u7684\\u51FD\\u6570\\u8F6C\\u6362\\u6BCF\\u4E2A\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Array.prototype.reduce\"}),\"\\uFF1A\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"reduce\"}),\" \\u65B9\\u6CD5\\u901A\\u8FC7\\u91CD\\u590D\\u8C03\\u7528\\u4E00\\u4E2A\\u63A5\\u53D7\\u4E24\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\uFF08\\u7D2F\\u79EF\\u503C\\u548C\\u5F53\\u524D\\u5143\\u7D20\\uFF09\\u5C06\\u6240\\u6709\\u5143\\u7D20\\u7EC4\\u5408\\u6210\\u4E00\\u4E2A\\u503C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u904D\\u5386\\u5BF9\\u8C61\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u904D\\u5386\\u5BF9\\u8C61\\u5C5E\\u6027\\u548C\\u6570\\u7EC4\\u975E\\u5E38\\u5E38\\u89C1\\uFF0C\\u6211\\u4EEC\\u6709\\u591A\\u79CD\\u65B9\\u6CD5\\u53EF\\u4EE5\\u5B9E\\u73B0\\u8FD9\\u4E00\\u70B9\\u3002\\u4EE5\\u4E0B\\u662F\\u5B9E\\u73B0\\u6B64\\u76EE\\u7684\\u7684\\u4E00\\u4E9B\\u65B9\\u6CD5\\uFF1A\"}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"for...in\"}),\" \\u8BED\\u53E5\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6B64\\u5FAA\\u73AF\\u904D\\u5386\\u5BF9\\u8C61\\u7684\\u6240\\u6709\",(0,n.jsx)(e.strong,{children:\"\\u53EF\\u679A\\u4E3E\"}),\"\\u5C5E\\u6027\\uFF0C\\u5305\\u62EC\\u4ECE\\u5176\\u539F\\u578B\\u94FE\\u7EE7\\u627F\\u7684\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  status: 'working',\n  hoursWorked: 3,\n};\n\nfor (const property in obj) {\n  console.log(property);\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u7531\\u4E8E \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" \\u8BED\\u53E5\\u904D\\u5386\\u5BF9\\u8C61\\u7684\\u6240\\u6709\",(0,n.jsx)(e.strong,{children:\"\\u53EF\\u679A\\u4E3E\"}),\"\\u5C5E\\u6027\\uFF08\\u5305\\u62EC\\u7EE7\\u627F\\u7684\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\\uFF09\\u3002\\u56E0\\u6B64\\uFF0C\\u5927\\u591A\\u6570\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5728\\u4F7F\\u7528\\u5C5E\\u6027\\u4E4B\\u524D\\uFF0C\\u60A8\\u5E94\\u8BE5\\u901A\\u8FC7 \",(0,n.jsx)(e.code,{children:\"Object.hasOwn(object, property)\"}),\" \\u68C0\\u67E5\\u8BE5\\u5C5E\\u6027\\u662F\\u5426\\u5B58\\u5728\\u4E8E\\u5BF9\\u8C61\\u4E0A\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  status: 'working',\n  hoursWorked: 3,\n};\n\nfor (const property in obj) {\n  if (Object.hasOwn(obj, property)) {\n    console.log(property);\n  }\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8BF7\\u6CE8\\u610F\\uFF0C\\u4E0D\\u63A8\\u8350\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"obj.hasOwnProperty()\"}),\"\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4E0D\\u9002\\u7528\\u4E8E\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.create(null)\"}),\" \\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u3002\\u5EFA\\u8BAE\\u5728\\u8F83\\u65B0\\u7684\\u6D4F\\u89C8\\u5668\\u4E2D\\u4F7F\\u7528 \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn\",children:(0,n.jsx)(e.code,{children:\"Object.hasOwn()\"})}),\"\\uFF0C\\u6216\\u8005\\u4F7F\\u7528\\u65E7\\u7684 \",(0,n.jsx)(e.code,{children:\"Object.prototype.hasOwnProperty.call(object, key)\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"Object.keys()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" \\u662F\\u4E00\\u79CD\\u9759\\u6001\\u65B9\\u6CD5\\uFF0C\\u5B83\\u5C06\\u8FD4\\u56DE\\u60A8\\u4F20\\u9012\\u7ED9\\u5B83\\u7684\\u5BF9\\u8C61\\u7684\\u6240\\u6709\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\\u540D\\u79F0\\u7684\\u6570\\u7EC4\\u3002\\u7531\\u4E8E \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" \\u8FD4\\u56DE\\u4E00\\u4E2A\\u6570\\u7EC4\\uFF0C\\u60A8\\u4E5F\\u53EF\\u4EE5\\u4F7F\\u7528\\u4E0B\\u9762\\u5217\\u51FA\\u7684\\u6570\\u7EC4\\u8FED\\u4EE3\\u65B9\\u6CD5\\u6765\\u904D\\u5386\\u5B83\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  status: 'working',\n  hoursWorked: 3,\n};\n\nObject.keys(obj).forEach((property) => {\n  console.log(property);\n});\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"Object.entries()\"}),\":\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6B64\\u65B9\\u6CD5\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5BF9\\u8C61\\u7684\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\\u7684\\u6570\\u7EC4\\uFF0C\\u4EE5 \",(0,n.jsx)(e.code,{children:\"[key, value]\"}),\" \\u5BF9\\u7684\\u5F62\\u5F0F\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"const obj = { a: 1, b: 2, c: 3 };\\nObject.entries(obj).forEach(([key, value]) => {\\n  console.log(`${key}: ${value}`);\\n});\\n\"})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"Object.getOwnPropertyNames()\"})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { a: 1, b: 2, c: 3 };\nObject.getOwnPropertyNames(obj).forEach((property) => {\n  console.log(property);\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.getOwnPropertyNames()\"}),\" \\u662F\\u4E00\\u79CD\\u9759\\u6001\\u65B9\\u6CD5\\uFF0C\\u5B83\\u5C06\\u5217\\u51FA\\u60A8\\u4F20\\u9012\\u7ED9\\u5B83\\u7684\\u5BF9\\u8C61\\u7684\\u6240\\u6709\\u53EF\\u679A\\u4E3E\\u548C\\u4E0D\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\\u3002\\u7531\\u4E8E \",(0,n.jsx)(e.code,{children:\"Object.getOwnPropertyNames()\"}),\" \\u8FD4\\u56DE\\u4E00\\u4E2A\\u6570\\u7EC4\\uFF0C\\u60A8\\u4E5F\\u53EF\\u4EE5\\u4F7F\\u7528\\u4E0B\\u9762\\u5217\\u51FA\\u7684\\u6570\\u7EC4\\u8FED\\u4EE3\\u65B9\\u6CD5\\u6765\\u904D\\u5386\\u5B83\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6570\\u7EC4\"}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr = [1, 2, 3, 4, 5];\nfor (var i = 0; i < arr.length; i++) {\n  console.log(arr[i]);\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u91CC\\u4E00\\u4E2A\\u5E38\\u89C1\\u7684\\u9677\\u9631\\u662F \",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u5728\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\\u4E2D\\uFF0C\\u800C\\u4E0D\\u662F\\u5757\\u4F5C\\u7528\\u57DF\\u4E2D\\uFF0C\\u5E76\\u4E14\\u5927\\u591A\\u6570\\u60C5\\u51B5\\u4E0B\\u60A8\\u5E0C\\u671B\\u4F7F\\u7528\\u5757\\u4F5C\\u7528\\u57DF\\u8FED\\u4EE3\\u5668\\u53D8\\u91CF\\u3002 ES2015 \\u5F15\\u5165\\u4E86\\u5177\\u6709\\u5757\\u4F5C\\u7528\\u57DF\\u7684 \",(0,n.jsx)(e.code,{children:\"let\"}),\"\\uFF0C\\u5EFA\\u8BAE\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u800C\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"var\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr = [1, 2, 3, 4, 5];\nfor (let i = 0; i < arr.length; i++) {\n  console.log(arr[i]);\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"Array.prototype.forEach()\"})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"const arr = [1, 2, 3, 4, 5];\\narr.forEach((element, index) => {\\n  console.log(`${element} at index ${index}`);\\n});\\n\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Array.prototype.forEach()\"}),\" \\u65B9\\u6CD5\\u6709\\u65F6\\u4F1A\\u66F4\\u65B9\\u4FBF\\uFF0C\\u5982\\u679C\\u60A8\\u4E0D\\u9700\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"index\"}),\"\\uFF0C\\u800C\\u60A8\\u53EA\\u9700\\u8981\\u5355\\u4E2A\\u6570\\u7EC4\\u5143\\u7D20\\u3002 \\u4F46\\u662F\\uFF0C\\u7F3A\\u70B9\\u662F\\u60A8\\u65E0\\u6CD5\\u4E2D\\u9014\\u505C\\u6B62\\u8FED\\u4EE3\\uFF0C\\u5E76\\u4E14\\u63D0\\u4F9B\\u7684\\u51FD\\u6570\\u5C06\\u5728\\u5143\\u7D20\\u4E0A\\u6267\\u884C\\u4E00\\u6B21\\u3002 \\u5982\\u679C\\u60A8\\u9700\\u8981\\u66F4\\u597D\\u5730\\u63A7\\u5236\\u8FED\\u4EE3\\uFF0C\",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u6216 \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u8BED\\u53E5\\u4F1A\\u66F4\\u76F8\\u5173\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u8BED\\u53E5\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr = [1, 2, 3, 4, 5];\nfor (let element of arr) {\n  console.log(element);\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"ES2015 \\u5F15\\u5165\\u4E86\\u4E00\\u79CD\\u65B0\\u7684\\u8FED\\u4EE3\\u65B9\\u5F0F\\uFF0C\\u5373 \",(0,n.jsx)(e.code,{children:\"for-of\"}),\" \\u5FAA\\u73AF\\uFF0C\\u5B83\\u5141\\u8BB8\\u60A8\\u5FAA\\u73AF\\u8BBF\\u95EE\\u7B26\\u5408 \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol\",children:\"iterable protocol\"}),\" \\u7684\\u5BF9\\u8C61\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"String\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"Array\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"Map\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u7B49\\u3002 \\u5B83\\u7ED3\\u5408\\u4E86 \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u548C \",(0,n.jsx)(e.code,{children:\"forEach()\"}),\" \\u65B9\\u6CD5\\u7684\\u4F18\\u70B9\\u3002 \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u7684\\u4F18\\u70B9\\u662F\\u60A8\\u53EF\\u4EE5\\u4ECE\\u4E2D\\u8DF3\\u51FA\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"forEach()\"}),\" \\u7684\\u4F18\\u70B9\\u662F\\u5B83\\u6BD4 \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u66F4\\u7B80\\u6D01\\uFF0C\\u56E0\\u4E3A\\u60A8\\u4E0D\\u9700\\u8981\\u8BA1\\u6570\\u5668\\u53D8\\u91CF\\u3002 \\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u8BED\\u53E5\\uFF0C\\u60A8\\u53EF\\u4EE5\\u540C\\u65F6\\u83B7\\u5F97\\u8DF3\\u51FA\\u5FAA\\u73AF\\u7684\\u80FD\\u529B\\u548C\\u66F4\\u7B80\\u6D01\\u7684\\u8BED\\u6CD5\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5927\\u591A\\u6570\\u60C5\\u51B5\\u4E0B\\uFF0C\\u66F4\\u559C\\u6B22 \",(0,n.jsx)(e.code,{children:\".forEach\"}),\" \\u65B9\\u6CD5\\uFF0C\\u4F46\\u8FD9\\u786E\\u5B9E\\u53D6\\u51B3\\u4E8E\\u60A8\\u8981\\u6267\\u884C\\u7684\\u64CD\\u4F5C\\u3002 \\u5728 ES2015 \\u4E4B\\u524D\\uFF0C\\u5F53\\u6211\\u4EEC\\u9700\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"break\"}),\" \\u63D0\\u524D\\u7EC8\\u6B62\\u5FAA\\u73AF\\u65F6\\uFF0C\\u6211\\u4EEC\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u3002 \\u4F46\\u73B0\\u5728\\u6709\\u4E86 ES2015\\uFF0C\\u6211\\u4EEC\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u8BED\\u53E5\\u6765\\u505A\\u5230\\u8FD9\\u4E00\\u70B9\\u3002 \\u5F53\\u60A8\\u9700\\u8981\\u66F4\\u5927\\u7684\\u7075\\u6D3B\\u6027\\u65F6\\uFF0C\\u4F8B\\u5982\\u6BCF\\u6B21\\u5FAA\\u73AF\\u9012\\u589E\\u8FED\\u4EE3\\u5668\\u4E00\\u6B21\\u4EE5\\u4E0A\\u65F6\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6B64\\u5916\\uFF0C\\u5728\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u8BED\\u53E5\\u65F6\\uFF0C\\u5982\\u679C\\u60A8\\u9700\\u8981\\u8BBF\\u95EE\\u6BCF\\u4E2A\\u6570\\u7EC4\\u5143\\u7D20\\u7684\\u7D22\\u5F15\\u548C\\u503C\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 ES2015 \",(0,n.jsx)(e.code,{children:\"Array.prototype.entries()\"}),\" \\u65B9\\u6CD5\\u6765\\u5B9E\\u73B0\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr = ['a', 'b', 'c'];\n\nfor (let [index, elem] of arr.entries()) {\n  console.log(index, elem);\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames\",children:\"Object.getOwnPropertyNames() - JavaScript | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys\",children:\"Object.keys() - JavaScript | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of\",children:\"for...of - JavaScript | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach\",children:\"Array.prototype.forEach() - JavaScript | MDN\"})}),`\n`]})]})}function v(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(a,r)})):a(r)}var k=v;return m(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var y=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),u=(r,e)=>{for(var c in e)l(r,c,{get:e[c],enumerable:!0})},i=(r,e,c,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of g(e))!j.call(r,o)&&o!==c&&l(r,o,{get:()=>e[o],enumerable:!(d=f(e,o))||d.enumerable});return r};var m=(r,e,c)=>(c=r!=null?p(b(r)):{},i(e||!r||!r.__esModule?l(c,\"default\",{value:r,enumerable:!0}):c,r)),v=r=>i(l({},\"__esModule\",{value:!0}),r);var h=y((N,t)=>{t.exports=_jsx_runtime});var k={};u(k,{default:()=>s,frontmatter:()=>O});var n=m(h()),O={title:\"JavaScript \\u4E2D\\u4F7F\\u7528\\u4EC0\\u4E48\\u8BED\\u8A00\\u7ED3\\u6784\\u6765\\u8FED\\u4EE3\\u5BF9\\u8C61\\u5C5E\\u6027\\u548C\\u6570\\u7EC4\\u9879\\uFF1F\"};function a(r){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u6709\\u591A\\u79CD\\u65B9\\u6CD5\\u53EF\\u4EE5\\u8FED\\u4EE3\\u5BF9\\u8C61\\u5C5E\\u6027\\u548C\\u6570\\u7EC4\\uFF1A\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.code,{children:\"for...in\"}),\" \\u5FAA\\u73AF\"]})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"for...in\"}),\" \\u5FAA\\u73AF\\u904D\\u5386\\u5BF9\\u8C61\\u7684\\u6240\\u6709\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\\uFF0C\\u5305\\u62EC\\u7EE7\\u627F\\u7684\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\\u3002\\u56E0\\u6B64\\uFF0C\\u5982\\u679C\\u60A8\\u53EA\\u60F3\\u904D\\u5386\\u5BF9\\u8C61\\u7684\\u81EA\\u6709\\u5C5E\\u6027\\uFF0C\\u8FDB\\u884C\\u68C0\\u67E5\\u975E\\u5E38\\u91CD\\u8981\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  a: 1,\n  b: 2,\n  c: 3,\n};\n\nfor (const key in obj) {\n  // To avoid iterating over inherited properties\n  if (Object.hasOwn(obj, key)) {\n    console.log(\\`\\${key}: \\${obj[key]}\\`);\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.code,{children:\"Object.keys()\"})})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" \\u8FD4\\u56DE\\u4E00\\u4E2A\\u7531\\u5BF9\\u8C61\\u81EA\\u8EAB\\u7684\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\\u540D\\u79F0\\u7EC4\\u6210\\u7684\\u6570\\u7EC4\\u3002\\u7136\\u540E\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 for...of \\u5FAA\\u73AF\\u6216 forEach \\u904D\\u5386\\u6B64\\u6570\\u7EC4\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  a: 1,\n  b: 2,\n  c: 3,\n};\n\nObject.keys(obj).forEach((key) => {\n  console.log(\\`\\${key}: \\${obj[key]}\\`);\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FED\\u4EE3\\u6570\\u7EC4\\u6700\\u5E38\\u89C1\\u7684\\u65B9\\u6CD5\\u662F\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u548C \",(0,n.jsx)(e.code,{children:\"Array.prototype.forEach\"}),\" \\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\"]})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let array = [1, 2, 3, 4, 5, 6];\nfor (let index = 0; index < array.length; index++) {\n  console.log(array[index]);\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Array.prototype.forEach\"}),\" \\u65B9\\u6CD5\"]})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"let array = [1, 2, 3, 4, 5, 6];\\narray.forEach((number, index) => {\\n  console.log(`${number} at index ${index}`);\\n});\\n\"})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[\"\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for...of\"})]})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u6B64\\u65B9\\u6CD5\\u662F\\u8FED\\u4EE3\\u6570\\u7EC4\\u7684\\u6700\\u65B0\\u548C\\u6700\\u65B9\\u4FBF\\u7684\\u65B9\\u6CD5\\u3002\\u5B83\\u4F1A\\u81EA\\u52A8\\u8FED\\u4EE3\\u6BCF\\u4E2A\\u5143\\u7D20\\uFF0C\\u800C\\u65E0\\u9700\\u60A8\\u7BA1\\u7406\\u7D22\\u5F15\\u3002\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const numbers = [1, 2, 3, 4, 5];\n\nfor (const number of numbers) {\n  console.log(number);\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u8FD8\\u6709\\u5176\\u4ED6\\u53EF\\u7528\\u7684\\u5185\\u7F6E\\u65B9\\u6CD5\\uFF0C\\u9002\\u7528\\u4E8E\\u7279\\u5B9A\\u573A\\u666F\\uFF0C\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Array.prototype.filter\"}),\"\\uFF1A\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"filter\"}),\" \\u65B9\\u6CD5\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u6570\\u7EC4\\uFF0C\\u5176\\u4E2D\\u4EC5\\u5305\\u542B\\u6EE1\\u8DB3\\u7279\\u5B9A\\u6761\\u4EF6\\u7684\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Array.prototype.map\"}),\"\\uFF1A\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"map\"}),\" \\u65B9\\u6CD5\\u57FA\\u4E8E\\u73B0\\u6709\\u6570\\u7EC4\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u6570\\u7EC4\\uFF0C\\u5E76\\u4F7F\\u7528\\u63D0\\u4F9B\\u7684\\u51FD\\u6570\\u8F6C\\u6362\\u6BCF\\u4E2A\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Array.prototype.reduce\"}),\"\\uFF1A\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"reduce\"}),\" \\u65B9\\u6CD5\\u901A\\u8FC7\\u91CD\\u590D\\u8C03\\u7528\\u4E00\\u4E2A\\u63A5\\u53D7\\u4E24\\u4E2A\\u53C2\\u6570\\u7684\\u51FD\\u6570\\uFF08\\u7D2F\\u79EF\\u503C\\u548C\\u5F53\\u524D\\u5143\\u7D20\\uFF09\\u5C06\\u6240\\u6709\\u5143\\u7D20\\u7EC4\\u5408\\u6210\\u4E00\\u4E2A\\u503C\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u904D\\u5386\\u5BF9\\u8C61\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u904D\\u5386\\u5BF9\\u8C61\\u5C5E\\u6027\\u548C\\u6570\\u7EC4\\u975E\\u5E38\\u5E38\\u89C1\\uFF0C\\u6211\\u4EEC\\u6709\\u591A\\u79CD\\u65B9\\u6CD5\\u53EF\\u4EE5\\u5B9E\\u73B0\\u8FD9\\u4E00\\u70B9\\u3002\\u4EE5\\u4E0B\\u662F\\u5B9E\\u73B0\\u6B64\\u76EE\\u7684\\u7684\\u4E00\\u4E9B\\u65B9\\u6CD5\\uFF1A\"}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"for...in\"}),\" \\u8BED\\u53E5\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6B64\\u5FAA\\u73AF\\u904D\\u5386\\u5BF9\\u8C61\\u7684\\u6240\\u6709\",(0,n.jsx)(e.strong,{children:\"\\u53EF\\u679A\\u4E3E\"}),\"\\u5C5E\\u6027\\uFF0C\\u5305\\u62EC\\u4ECE\\u5176\\u539F\\u578B\\u94FE\\u7EE7\\u627F\\u7684\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  status: 'working',\n  hoursWorked: 3,\n};\n\nfor (const property in obj) {\n  console.log(property);\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u7531\\u4E8E \",(0,n.jsx)(e.code,{children:\"for...in\"}),\" \\u8BED\\u53E5\\u904D\\u5386\\u5BF9\\u8C61\\u7684\\u6240\\u6709\",(0,n.jsx)(e.strong,{children:\"\\u53EF\\u679A\\u4E3E\"}),\"\\u5C5E\\u6027\\uFF08\\u5305\\u62EC\\u7EE7\\u627F\\u7684\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\\uFF09\\u3002\\u56E0\\u6B64\\uFF0C\\u5927\\u591A\\u6570\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5728\\u4F7F\\u7528\\u5C5E\\u6027\\u4E4B\\u524D\\uFF0C\\u60A8\\u5E94\\u8BE5\\u901A\\u8FC7 \",(0,n.jsx)(e.code,{children:\"Object.hasOwn(object, property)\"}),\" \\u68C0\\u67E5\\u8BE5\\u5C5E\\u6027\\u662F\\u5426\\u5B58\\u5728\\u4E8E\\u5BF9\\u8C61\\u4E0A\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  status: 'working',\n  hoursWorked: 3,\n};\n\nfor (const property in obj) {\n  if (Object.hasOwn(obj, property)) {\n    console.log(property);\n  }\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8BF7\\u6CE8\\u610F\\uFF0C\\u4E0D\\u63A8\\u8350\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"obj.hasOwnProperty()\"}),\"\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4E0D\\u9002\\u7528\\u4E8E\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"Object.create(null)\"}),\" \\u521B\\u5EFA\\u7684\\u5BF9\\u8C61\\u3002\\u5EFA\\u8BAE\\u5728\\u8F83\\u65B0\\u7684\\u6D4F\\u89C8\\u5668\\u4E2D\\u4F7F\\u7528 \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn\",children:(0,n.jsx)(e.code,{children:\"Object.hasOwn()\"})}),\"\\uFF0C\\u6216\\u8005\\u4F7F\\u7528\\u65E7\\u7684 \",(0,n.jsx)(e.code,{children:\"Object.prototype.hasOwnProperty.call(object, key)\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"Object.keys()\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" \\u662F\\u4E00\\u79CD\\u9759\\u6001\\u65B9\\u6CD5\\uFF0C\\u5B83\\u5C06\\u8FD4\\u56DE\\u60A8\\u4F20\\u9012\\u7ED9\\u5B83\\u7684\\u5BF9\\u8C61\\u7684\\u6240\\u6709\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\\u540D\\u79F0\\u7684\\u6570\\u7EC4\\u3002\\u7531\\u4E8E \",(0,n.jsx)(e.code,{children:\"Object.keys()\"}),\" \\u8FD4\\u56DE\\u4E00\\u4E2A\\u6570\\u7EC4\\uFF0C\\u60A8\\u4E5F\\u53EF\\u4EE5\\u4F7F\\u7528\\u4E0B\\u9762\\u5217\\u51FA\\u7684\\u6570\\u7EC4\\u8FED\\u4EE3\\u65B9\\u6CD5\\u6765\\u904D\\u5386\\u5B83\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = {\n  status: 'working',\n  hoursWorked: 3,\n};\n\nObject.keys(obj).forEach((property) => {\n  console.log(property);\n});\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"Object.entries()\"}),\":\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6B64\\u65B9\\u6CD5\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5BF9\\u8C61\\u7684\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\\u7684\\u6570\\u7EC4\\uFF0C\\u4EE5 \",(0,n.jsx)(e.code,{children:\"[key, value]\"}),\" \\u5BF9\\u7684\\u5F62\\u5F0F\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"const obj = { a: 1, b: 2, c: 3 };\\nObject.entries(obj).forEach(([key, value]) => {\\n  console.log(`${key}: ${value}`);\\n});\\n\"})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"Object.getOwnPropertyNames()\"})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const obj = { a: 1, b: 2, c: 3 };\nObject.getOwnPropertyNames(obj).forEach((property) => {\n  console.log(property);\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Object.getOwnPropertyNames()\"}),\" \\u662F\\u4E00\\u79CD\\u9759\\u6001\\u65B9\\u6CD5\\uFF0C\\u5B83\\u5C06\\u5217\\u51FA\\u60A8\\u4F20\\u9012\\u7ED9\\u5B83\\u7684\\u5BF9\\u8C61\\u7684\\u6240\\u6709\\u53EF\\u679A\\u4E3E\\u548C\\u4E0D\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\\u3002\\u7531\\u4E8E \",(0,n.jsx)(e.code,{children:\"Object.getOwnPropertyNames()\"}),\" \\u8FD4\\u56DE\\u4E00\\u4E2A\\u6570\\u7EC4\\uFF0C\\u60A8\\u4E5F\\u53EF\\u4EE5\\u4F7F\\u7528\\u4E0B\\u9762\\u5217\\u51FA\\u7684\\u6570\\u7EC4\\u8FED\\u4EE3\\u65B9\\u6CD5\\u6765\\u904D\\u5386\\u5B83\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6570\\u7EC4\"}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr = [1, 2, 3, 4, 5];\nfor (var i = 0; i < arr.length; i++) {\n  console.log(arr[i]);\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u8FD9\\u91CC\\u4E00\\u4E2A\\u5E38\\u89C1\\u7684\\u9677\\u9631\\u662F \",(0,n.jsx)(e.code,{children:\"var\"}),\" \\u5728\\u51FD\\u6570\\u4F5C\\u7528\\u57DF\\u4E2D\\uFF0C\\u800C\\u4E0D\\u662F\\u5757\\u4F5C\\u7528\\u57DF\\u4E2D\\uFF0C\\u5E76\\u4E14\\u5927\\u591A\\u6570\\u60C5\\u51B5\\u4E0B\\u60A8\\u5E0C\\u671B\\u4F7F\\u7528\\u5757\\u4F5C\\u7528\\u57DF\\u8FED\\u4EE3\\u5668\\u53D8\\u91CF\\u3002 ES2015 \\u5F15\\u5165\\u4E86\\u5177\\u6709\\u5757\\u4F5C\\u7528\\u57DF\\u7684 \",(0,n.jsx)(e.code,{children:\"let\"}),\"\\uFF0C\\u5EFA\\u8BAE\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u800C\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"var\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr = [1, 2, 3, 4, 5];\nfor (let i = 0; i < arr.length; i++) {\n  console.log(arr[i]);\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:(0,n.jsx)(e.code,{children:\"Array.prototype.forEach()\"})}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:\"const arr = [1, 2, 3, 4, 5];\\narr.forEach((element, index) => {\\n  console.log(`${element} at index ${index}`);\\n});\\n\"})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"Array.prototype.forEach()\"}),\" \\u65B9\\u6CD5\\u6709\\u65F6\\u4F1A\\u66F4\\u65B9\\u4FBF\\uFF0C\\u5982\\u679C\\u60A8\\u4E0D\\u9700\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"index\"}),\"\\uFF0C\\u800C\\u60A8\\u53EA\\u9700\\u8981\\u5355\\u4E2A\\u6570\\u7EC4\\u5143\\u7D20\\u3002 \\u4F46\\u662F\\uFF0C\\u7F3A\\u70B9\\u662F\\u60A8\\u65E0\\u6CD5\\u4E2D\\u9014\\u505C\\u6B62\\u8FED\\u4EE3\\uFF0C\\u5E76\\u4E14\\u63D0\\u4F9B\\u7684\\u51FD\\u6570\\u5C06\\u5728\\u5143\\u7D20\\u4E0A\\u6267\\u884C\\u4E00\\u6B21\\u3002 \\u5982\\u679C\\u60A8\\u9700\\u8981\\u66F4\\u597D\\u5730\\u63A7\\u5236\\u8FED\\u4EE3\\uFF0C\",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u6216 \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u8BED\\u53E5\\u4F1A\\u66F4\\u76F8\\u5173\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u8BED\\u53E5\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr = [1, 2, 3, 4, 5];\nfor (let element of arr) {\n  console.log(element);\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"ES2015 \\u5F15\\u5165\\u4E86\\u4E00\\u79CD\\u65B0\\u7684\\u8FED\\u4EE3\\u65B9\\u5F0F\\uFF0C\\u5373 \",(0,n.jsx)(e.code,{children:\"for-of\"}),\" \\u5FAA\\u73AF\\uFF0C\\u5B83\\u5141\\u8BB8\\u60A8\\u5FAA\\u73AF\\u8BBF\\u95EE\\u7B26\\u5408 \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol\",children:\"iterable protocol\"}),\" \\u7684\\u5BF9\\u8C61\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"String\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"Array\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"Map\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"Set\"}),\" \\u7B49\\u3002 \\u5B83\\u7ED3\\u5408\\u4E86 \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u548C \",(0,n.jsx)(e.code,{children:\"forEach()\"}),\" \\u65B9\\u6CD5\\u7684\\u4F18\\u70B9\\u3002 \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u7684\\u4F18\\u70B9\\u662F\\u60A8\\u53EF\\u4EE5\\u4ECE\\u4E2D\\u8DF3\\u51FA\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"forEach()\"}),\" \\u7684\\u4F18\\u70B9\\u662F\\u5B83\\u6BD4 \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u66F4\\u7B80\\u6D01\\uFF0C\\u56E0\\u4E3A\\u60A8\\u4E0D\\u9700\\u8981\\u8BA1\\u6570\\u5668\\u53D8\\u91CF\\u3002 \\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u8BED\\u53E5\\uFF0C\\u60A8\\u53EF\\u4EE5\\u540C\\u65F6\\u83B7\\u5F97\\u8DF3\\u51FA\\u5FAA\\u73AF\\u7684\\u80FD\\u529B\\u548C\\u66F4\\u7B80\\u6D01\\u7684\\u8BED\\u6CD5\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5927\\u591A\\u6570\\u60C5\\u51B5\\u4E0B\\uFF0C\\u66F4\\u559C\\u6B22 \",(0,n.jsx)(e.code,{children:\".forEach\"}),\" \\u65B9\\u6CD5\\uFF0C\\u4F46\\u8FD9\\u786E\\u5B9E\\u53D6\\u51B3\\u4E8E\\u60A8\\u8981\\u6267\\u884C\\u7684\\u64CD\\u4F5C\\u3002 \\u5728 ES2015 \\u4E4B\\u524D\\uFF0C\\u5F53\\u6211\\u4EEC\\u9700\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"break\"}),\" \\u63D0\\u524D\\u7EC8\\u6B62\\u5FAA\\u73AF\\u65F6\\uFF0C\\u6211\\u4EEC\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u3002 \\u4F46\\u73B0\\u5728\\u6709\\u4E86 ES2015\\uFF0C\\u6211\\u4EEC\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u8BED\\u53E5\\u6765\\u505A\\u5230\\u8FD9\\u4E00\\u70B9\\u3002 \\u5F53\\u60A8\\u9700\\u8981\\u66F4\\u5927\\u7684\\u7075\\u6D3B\\u6027\\u65F6\\uFF0C\\u4F8B\\u5982\\u6BCF\\u6B21\\u5FAA\\u73AF\\u9012\\u589E\\u8FED\\u4EE3\\u5668\\u4E00\\u6B21\\u4EE5\\u4E0A\\u65F6\\uFF0C\\u8BF7\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for\"}),\" \\u5FAA\\u73AF\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6B64\\u5916\\uFF0C\\u5728\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"for...of\"}),\" \\u8BED\\u53E5\\u65F6\\uFF0C\\u5982\\u679C\\u60A8\\u9700\\u8981\\u8BBF\\u95EE\\u6BCF\\u4E2A\\u6570\\u7EC4\\u5143\\u7D20\\u7684\\u7D22\\u5F15\\u548C\\u503C\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 ES2015 \",(0,n.jsx)(e.code,{children:\"Array.prototype.entries()\"}),\" \\u65B9\\u6CD5\\u6765\\u5B9E\\u73B0\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr = ['a', 'b', 'c'];\n\nfor (let [index, elem] of arr.entries()) {\n  console.log(index, elem);\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames\",children:\"Object.getOwnPropertyNames() - JavaScript | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys\",children:\"Object.keys() - JavaScript | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of\",children:\"for...of - JavaScript | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach\",children:\"Array.prototype.forEach() - JavaScript | MDN\"})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(a,{...r})}):a(r)}return v(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/en-US.json b/apps/web/src/__generated__/questions/quiz/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/en-US.json
index 8f69ce0bc..eddc10e5d 100644
--- a/apps/web/src/__generated__/questions/quiz/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),b=(o,e)=>{for(var r in e)l(o,r,{get:e[r],enumerable:!0})},c=(o,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of g(e))!m.call(o,i)&&i!==r&&l(o,i,{get:()=>e[i],enumerable:!(t=u(e,i))||t.enumerable});return o};var v=(o,e,r)=>(r=o!=null?h(p(o)):{},c(e||!o||!o.__esModule?l(r,\"default\",{value:o,enumerable:!0}):r,o)),y=o=>c(l({},\"__esModule\",{value:!0}),o);var s=f((T,d)=>{d.exports=_jsx_runtime});var D={};b(D,{default:()=>x,frontmatter:()=>w});var n=v(s()),w={title:\"What tools and techniques do you use for debugging JavaScript code?\"};function a(o){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\",code:\"code\",a:\"a\",strong:\"strong\",hr:\"hr\",h3:\"h3\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Some of the most commonly used tools and techniques for debugging JavaScript:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"JavaScript language\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"console\"}),\" methods (e.g. \",(0,n.jsx)(e.code,{children:\"console.log()\"}),\", \",(0,n.jsx)(e.code,{children:\"console.error()\"}),\", \",(0,n.jsx)(e.code,{children:\"console.warn()\"}),\", \",(0,n.jsx)(e.code,{children:\"console.table()\"}),\")\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"debugger\"}),\" statement\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.li,{children:\"Breakpoints (browser or IDE)\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"JavaScript frameworks\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/facebook/react-devtools\",children:\"React Devtools\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/gaearon/redux-devtools\",children:\"Redux Devtools\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/vuejs/vue-devtools\",children:\"Vue Devtools\"})}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Browser developer tools\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Chrome DevTools\"}),\": The most widely used tool for debugging JavaScript. It provides a rich set of features including the ability to set breakpoints, inspect variables, view the call stack, and more.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Firefox Developer Tools\"}),\": Similar to Chrome DevTools with its own set of features for debugging.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Safari Web Inspector\"}),\": Provides tools for debugging on Safari.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Edge Developer Tools\"}),\": Similar to Chrome DevTools, as Edge is now Chromium-based.\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Network requests\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Postman\"}),\": Useful for debugging API calls.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Fiddler\"}),\": Helps capture and inspect HTTP/HTTPS traffic.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Charles Proxy\"}),\": Another tool for intercepting and debugging network calls.\"]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Debugging JavaScript\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here are common tools and techniques developers frequently use for debugging JavaScript code.\"}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"console\"}),\" methods\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"console.log()\"}),\": The most basic way to inspect values, variables, and data structures at various points in your code.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"console.error()\"}),\": Outputs errors to the console, often with more detailed stack traces.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"console.warn()\"}),\": Displays warnings.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"console.table()\"}),\": Formats data (especially arrays of objects) in a readable table.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"console.time()\"}),\" and \",(0,n.jsx)(e.code,{children:\"console.timeEnd()\"}),\": Measure the execution time of code blocks.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"debugger\"}),\" statement\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Pauses code execution at the line where \",(0,n.jsx)(e.code,{children:\"debugger;\"}),\" is placed.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Allows you to step through code line by line, inspect variables, and understand the flow of execution.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Breakpoints\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Set breakpoints directly in the Sources panel of your browser's developer tools or IDE (e.g. VS Code) to pause execution at specific lines of code without modifying your source code.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Network tab\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Monitor network requests made by your JavaScript code (e.g., AJAX calls, fetching data).\"}),`\n`,(0,n.jsx)(e.li,{children:\"Inspect request headers, responses, timing, and identify potential issues.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Performance tab\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Profile your JavaScript code to identify performance bottlenecks.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Analyze CPU usage, memory allocation, and rendering times.\"}),`\n`]})]})}function S(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(a,o)})):a(o)}var x=S;return y(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),v=(o,e)=>{for(var r in e)l(o,r,{get:e[r],enumerable:!0})},c=(o,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!f.call(o,i)&&i!==r&&l(o,i,{get:()=>e[i],enumerable:!(t=g(e,i))||t.enumerable});return o};var y=(o,e,r)=>(r=o!=null?u(m(o)):{},c(e||!o||!o.__esModule?l(r,\"default\",{value:o,enumerable:!0}):r,o)),w=o=>c(l({},\"__esModule\",{value:!0}),o);var s=b((k,d)=>{d.exports=_jsx_runtime});var x={};v(x,{default:()=>h,frontmatter:()=>S});var n=y(s()),S={title:\"What tools and techniques do you use for debugging JavaScript code?\"};function a(o){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",strong:\"strong\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Some of the most commonly used tools and techniques for debugging JavaScript:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"JavaScript language\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"console\"}),\" methods (e.g. \",(0,n.jsx)(e.code,{children:\"console.log()\"}),\", \",(0,n.jsx)(e.code,{children:\"console.error()\"}),\", \",(0,n.jsx)(e.code,{children:\"console.warn()\"}),\", \",(0,n.jsx)(e.code,{children:\"console.table()\"}),\")\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"debugger\"}),\" statement\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.li,{children:\"Breakpoints (browser or IDE)\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"JavaScript frameworks\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/facebook/react-devtools\",children:\"React Devtools\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/gaearon/redux-devtools\",children:\"Redux Devtools\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://github.com/vuejs/vue-devtools\",children:\"Vue Devtools\"})}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Browser developer tools\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Chrome DevTools\"}),\": The most widely used tool for debugging JavaScript. It provides a rich set of features including the ability to set breakpoints, inspect variables, view the call stack, and more.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Firefox Developer Tools\"}),\": Similar to Chrome DevTools with its own set of features for debugging.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Safari Web Inspector\"}),\": Provides tools for debugging on Safari.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Edge Developer Tools\"}),\": Similar to Chrome DevTools, as Edge is now Chromium-based.\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Network requests\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Postman\"}),\": Useful for debugging API calls.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Fiddler\"}),\": Helps capture and inspect HTTP/HTTPS traffic.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Charles Proxy\"}),\": Another tool for intercepting and debugging network calls.\"]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Debugging JavaScript\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here are common tools and techniques developers frequently use for debugging JavaScript code.\"}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"console\"}),\" methods\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"console.log()\"}),\": The most basic way to inspect values, variables, and data structures at various points in your code.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"console.error()\"}),\": Outputs errors to the console, often with more detailed stack traces.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"console.warn()\"}),\": Displays warnings.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"console.table()\"}),\": Formats data (especially arrays of objects) in a readable table.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"console.time()\"}),\" and \",(0,n.jsx)(e.code,{children:\"console.timeEnd()\"}),\": Measure the execution time of code blocks.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.h3,{children:[(0,n.jsx)(e.code,{children:\"debugger\"}),\" statement\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Pauses code execution at the line where \",(0,n.jsx)(e.code,{children:\"debugger;\"}),\" is placed.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Allows you to step through code line by line, inspect variables, and understand the flow of execution.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Breakpoints\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Set breakpoints directly in the Sources panel of your browser's developer tools or IDE (e.g. VS Code) to pause execution at specific lines of code without modifying your source code.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Network tab\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Monitor network requests made by your JavaScript code (e.g., AJAX calls, fetching data).\"}),`\n`,(0,n.jsx)(e.li,{children:\"Inspect request headers, responses, timing, and identify potential issues.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Performance tab\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Profile your JavaScript code to identify performance bottlenecks.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Analyze CPU usage, memory allocation, and rendering times.\"}),`\n`]})]})}function h(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(a,{...o})}):a(o)}return w(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/pt-BR.json
index e9ab21a34..2e3667dad 100644
--- a/apps/web/src/__generated__/questions/quiz/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var t in e)r(n,t,{get:e[t],enumerable:!0})},i=(n,e,t,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!p.call(n,c)&&c!==t&&r(n,c,{get:()=>e[c],enumerable:!(l=u(e,c))||l.enumerable});return n};var g=(n,e,t)=>(t=n!=null?h(v(n)):{},i(e||!n||!n.__esModule?r(t,\"default\",{value:n,enumerable:!0}):t,n)),j=n=>i(r({},\"__esModule\",{value:!0}),n);var a=f((M,d)=>{d.exports=_jsx_runtime});var R={};x(R,{default:()=>_,frontmatter:()=>b});var o=g(a()),b={title:\"Quais ferramentas e t\\xE9cnicas voc\\xEA usa para depurar o c\\xF3digo JavaScript?\"};function s(n){let e=Object.assign({ul:\"ul\",li:\"li\",a:\"a\",code:\"code\"},n.components);return(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"JavaScript\",`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d\",children:\"Chrome Devtools\"})}),`\n`,(0,o.jsxs)(e.li,{children:[\"declara\\xE7\\xE3o \",(0,o.jsx)(e.code,{children:\"debugger\"})]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Depura\\xE7\\xE3o tradicional com \",(0,o.jsx)(e.code,{children:\"console.log()\"})]}),`\n`]}),`\n`]}),`\n`,(0,o.jsxs)(e.li,{children:[\"React e Redux\",`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://github.com/facebook/react-devtools\",children:\"React Devtools\"})}),`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://github.com/gaearon/redux-devtools\",children:\"Redux Devtools\"})}),`\n`]}),`\n`]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Vue\",`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://github.com/vuejs/vue-devtools\",children:\"Vue Devtools\"})}),`\n`]}),`\n`]}),`\n`]})}function D(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(s,n)})):s(n)}var _=D;return j(R);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var t in e)r(n,t,{get:e[t],enumerable:!0})},i=(n,e,t,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of v(e))!f.call(n,c)&&c!==t&&r(n,c,{get:()=>e[c],enumerable:!(l=m(e,c))||l.enumerable});return n};var D=(n,e,t)=>(t=n!=null?u(p(n)):{},i(e||!n||!n.__esModule?r(t,\"default\",{value:n,enumerable:!0}):t,n)),j=n=>i(r({},\"__esModule\",{value:!0}),n);var a=x((C,d)=>{d.exports=_jsx_runtime});var b={};g(b,{default:()=>s,frontmatter:()=>_});var o=D(a()),_={title:\"Quais ferramentas e t\\xE9cnicas voc\\xEA usa para depurar o c\\xF3digo JavaScript?\"};function h(n){let e={a:\"a\",code:\"code\",li:\"li\",ul:\"ul\",...n.components};return(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"JavaScript\",`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d\",children:\"Chrome Devtools\"})}),`\n`,(0,o.jsxs)(e.li,{children:[\"declara\\xE7\\xE3o \",(0,o.jsx)(e.code,{children:\"debugger\"})]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Depura\\xE7\\xE3o tradicional com \",(0,o.jsx)(e.code,{children:\"console.log()\"})]}),`\n`]}),`\n`]}),`\n`,(0,o.jsxs)(e.li,{children:[\"React e Redux\",`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://github.com/facebook/react-devtools\",children:\"React Devtools\"})}),`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://github.com/gaearon/redux-devtools\",children:\"Redux Devtools\"})}),`\n`]}),`\n`]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Vue\",`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://github.com/vuejs/vue-devtools\",children:\"Vue Devtools\"})}),`\n`]}),`\n`]}),`\n`]})}function s(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(h,{...n})}):h(n)}return j(b);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/zh-CN.json
index 028fa5760..947e65c3b 100644
--- a/apps/web/src/__generated__/questions/quiz/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var m=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),S=(l,n)=>{for(var r in n)i(l,r,{get:n[r],enumerable:!0})},d=(l,n,r,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of g(n))!v.call(l,c)&&c!==r&&i(l,c,{get:()=>n[c],enumerable:!(o=u(n,c))||o.enumerable});return l};var x=(l,n,r)=>(r=l!=null?a(p(l)):{},d(n||!l||!l.__esModule?i(r,\"default\",{value:l,enumerable:!0}):r,l)),D=l=>d(i({},\"__esModule\",{value:!0}),l);var t=m((j,h)=>{h.exports=_jsx_runtime});var T={};S(T,{default:()=>J,frontmatter:()=>b});var e=x(t()),b={title:\"\\u4F60\\u4F7F\\u7528\\u4EC0\\u4E48\\u5DE5\\u5177\\u548C\\u6280\\u672F\\u6765\\u8C03\\u8BD5 JavaScript \\u4EE3\\u7801\\uFF1F\"};function s(l){let n=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\",code:\"code\",a:\"a\",strong:\"strong\",hr:\"hr\",h3:\"h3\"},l.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E00\\u4E9B\\u6700\\u5E38\\u7528\\u7684\\u8C03\\u8BD5 JavaScript \\u7684\\u5DE5\\u5177\\u548C\\u6280\\u672F\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"JavaScript \\u8BED\\u8A00\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"console\"}),\" \\u65B9\\u6CD5\\uFF08\\u4F8B\\u5982 \",(0,e.jsx)(n.code,{children:\"console.log()\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"console.error()\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"console.warn()\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"console.table()\"}),\"\\uFF09\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"debugger\"}),\" \\u8BED\\u53E5\"]}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.li,{children:\"\\u65AD\\u70B9\\uFF08\\u6D4F\\u89C8\\u5668\\u6216 IDE\\uFF09\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"JavaScript \\u6846\\u67B6\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://github.com/facebook/react-devtools\",children:\"React Devtools\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://github.com/gaearon/redux-devtools\",children:\"Redux Devtools\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://github.com/vuejs/vue-devtools\",children:\"Vue Devtools\"})}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u6D4F\\u89C8\\u5668\\u5F00\\u53D1\\u8005\\u5DE5\\u5177\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Chrome DevTools\"}),\"\\uFF1A\\u7528\\u4E8E\\u8C03\\u8BD5 JavaScript \\u7684\\u6700\\u5E7F\\u6CDB\\u4F7F\\u7528\\u7684\\u5DE5\\u5177\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u5957\\u4E30\\u5BCC\\u7684\\u529F\\u80FD\\uFF0C\\u5305\\u62EC\\u8BBE\\u7F6E\\u65AD\\u70B9\\u3001\\u68C0\\u67E5\\u53D8\\u91CF\\u3001\\u67E5\\u770B\\u8C03\\u7528\\u5806\\u6808\\u7B49\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Firefox Developer Tools\"}),\"\\uFF1A\\u7C7B\\u4F3C\\u4E8E Chrome DevTools\\uFF0C\\u5177\\u6709\\u81EA\\u5DF1\\u7684\\u4E00\\u5957\\u8C03\\u8BD5\\u529F\\u80FD\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Safari Web Inspector\"}),\"\\uFF1A\\u63D0\\u4F9B\\u7528\\u4E8E\\u5728 Safari \\u4E0A\\u8C03\\u8BD5\\u7684\\u5DE5\\u5177\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Edge Developer Tools\"}),\"\\uFF1A\\u7C7B\\u4F3C\\u4E8E Chrome DevTools\\uFF0C\\u56E0\\u4E3A Edge \\u73B0\\u5728\\u57FA\\u4E8E Chromium\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u7F51\\u7EDC\\u8BF7\\u6C42\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Postman\"}),\"\\uFF1A\\u7528\\u4E8E\\u8C03\\u8BD5 API \\u8C03\\u7528\\u7684\\u5DE5\\u5177\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Fiddler\"}),\"\\uFF1A\\u5E2E\\u52A9\\u6355\\u83B7\\u548C\\u68C0\\u67E5 HTTP/HTTPS \\u6D41\\u91CF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Charles Proxy\"}),\"\\uFF1A\\u53E6\\u4E00\\u4E2A\\u7528\\u4E8E\\u62E6\\u622A\\u548C\\u8C03\\u8BD5\\u7F51\\u7EDC\\u8C03\\u7528\\u7684\\u5DE5\\u5177\\u3002\"]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u8C03\\u8BD5 JavaScript\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u5F00\\u53D1\\u4EBA\\u5458\\u7ECF\\u5E38\\u7528\\u4E8E\\u8C03\\u8BD5 JavaScript \\u4EE3\\u7801\\u7684\\u5E38\\u7528\\u5DE5\\u5177\\u548C\\u6280\\u672F\\u3002\"}),`\n`,(0,e.jsxs)(n.h3,{children:[(0,e.jsx)(n.code,{children:\"console\"}),\" \\u65B9\\u6CD5\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"console.log()\"}),\"\\uFF1A\\u5728\\u4EE3\\u7801\\u7684\\u5404\\u4E2A\\u70B9\\u68C0\\u67E5\\u503C\\u3001\\u53D8\\u91CF\\u548C\\u6570\\u636E\\u7ED3\\u6784\\u7684\\u6700\\u57FA\\u672C\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"console.error()\"}),\"\\uFF1A\\u5C06\\u9519\\u8BEF\\u8F93\\u51FA\\u5230\\u63A7\\u5236\\u53F0\\uFF0C\\u901A\\u5E38\\u5E26\\u6709\\u66F4\\u8BE6\\u7EC6\\u7684\\u5806\\u6808\\u8DDF\\u8E2A\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"console.warn()\"}),\"\\uFF1A\\u663E\\u793A\\u8B66\\u544A\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"console.table()\"}),\"\\uFF1A\\u4EE5\\u53EF\\u8BFB\\u7684\\u8868\\u683C\\u683C\\u5F0F\\u663E\\u793A\\u6570\\u636E\\uFF08\\u5C24\\u5176\\u662F\\u5BF9\\u8C61\\u6570\\u7EC4\\uFF09\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"console.time()\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"console.timeEnd()\"}),\"\\uFF1A\\u6D4B\\u91CF\\u4EE3\\u7801\\u5757\\u7684\\u6267\\u884C\\u65F6\\u95F4\\u3002\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.h3,{children:[(0,e.jsx)(n.code,{children:\"debugger\"}),\" \\u8BED\\u53E5\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5728\\u653E\\u7F6E \",(0,e.jsx)(n.code,{children:\"debugger;\"}),\" \\u7684\\u884C\\u5904\\u6682\\u505C\\u4EE3\\u7801\\u6267\\u884C\\u3002\"]}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5141\\u8BB8\\u60A8\\u9010\\u884C\\u5355\\u6B65\\u6267\\u884C\\u4EE3\\u7801\\u3001\\u68C0\\u67E5\\u53D8\\u91CF\\u5E76\\u4E86\\u89E3\\u6267\\u884C\\u6D41\\u7A0B\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u65AD\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u76F4\\u63A5\\u5728\\u6D4F\\u89C8\\u5668\\u5F00\\u53D1\\u8005\\u5DE5\\u5177\\u6216 IDE\\uFF08\\u4F8B\\u5982 VS Code\\uFF09\\u7684\\u201CSources\\u201D\\u9762\\u677F\\u4E2D\\u8BBE\\u7F6E\\u65AD\\u70B9\\uFF0C\\u4EE5\\u5728\\u7279\\u5B9A\\u4EE3\\u7801\\u884C\\u5904\\u6682\\u505C\\u6267\\u884C\\uFF0C\\u800C\\u65E0\\u9700\\u4FEE\\u6539\\u6E90\\u4EE3\\u7801\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7F51\\u7EDC\\u9009\\u9879\\u5361\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u76D1\\u89C6 JavaScript \\u4EE3\\u7801\\u53D1\\u51FA\\u7684\\u7F51\\u7EDC\\u8BF7\\u6C42\\uFF08\\u4F8B\\u5982\\uFF0CAJAX \\u8C03\\u7528\\u3001\\u83B7\\u53D6\\u6570\\u636E\\uFF09\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u68C0\\u67E5\\u8BF7\\u6C42\\u6807\\u5934\\u3001\\u54CD\\u5E94\\u3001\\u8BA1\\u65F6\\u5E76\\u8BC6\\u522B\\u6F5C\\u5728\\u95EE\\u9898\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6027\\u80FD\\u9009\\u9879\\u5361\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5206\\u6790 JavaScript \\u4EE3\\u7801\\u4EE5\\u8BC6\\u522B\\u6027\\u80FD\\u74F6\\u9888\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5206\\u6790 CPU \\u4F7F\\u7528\\u7387\\u3001\\u5185\\u5B58\\u5206\\u914D\\u548C\\u6E32\\u67D3\\u65F6\\u95F4\\u3002\"}),`\n`]})]})}function f(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,Object.assign({},l,{children:(0,e.jsx)(s,l)})):s(l)}var J=f;return D(T);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var S=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),x=(l,n)=>{for(var r in n)i(l,r,{get:n[r],enumerable:!0})},d=(l,n,r,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of p(n))!m.call(l,c)&&c!==r&&i(l,c,{get:()=>n[c],enumerable:!(o=g(n,c))||o.enumerable});return l};var D=(l,n,r)=>(r=l!=null?u(v(l)):{},d(n||!l||!l.__esModule?i(r,\"default\",{value:l,enumerable:!0}):r,l)),f=l=>d(i({},\"__esModule\",{value:!0}),l);var t=S((C,h)=>{h.exports=_jsx_runtime});var J={};x(J,{default:()=>a,frontmatter:()=>b});var e=D(t()),b={title:\"\\u4F60\\u4F7F\\u7528\\u4EC0\\u4E48\\u5DE5\\u5177\\u548C\\u6280\\u672F\\u6765\\u8C03\\u8BD5 JavaScript \\u4EE3\\u7801\\uFF1F\"};function s(l){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",strong:\"strong\",ul:\"ul\",...l.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E00\\u4E9B\\u6700\\u5E38\\u7528\\u7684\\u8C03\\u8BD5 JavaScript \\u7684\\u5DE5\\u5177\\u548C\\u6280\\u672F\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"JavaScript \\u8BED\\u8A00\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"console\"}),\" \\u65B9\\u6CD5\\uFF08\\u4F8B\\u5982 \",(0,e.jsx)(n.code,{children:\"console.log()\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"console.error()\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"console.warn()\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"console.table()\"}),\"\\uFF09\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"debugger\"}),\" \\u8BED\\u53E5\"]}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.li,{children:\"\\u65AD\\u70B9\\uFF08\\u6D4F\\u89C8\\u5668\\u6216 IDE\\uFF09\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"JavaScript \\u6846\\u67B6\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://github.com/facebook/react-devtools\",children:\"React Devtools\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://github.com/gaearon/redux-devtools\",children:\"Redux Devtools\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://github.com/vuejs/vue-devtools\",children:\"Vue Devtools\"})}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u6D4F\\u89C8\\u5668\\u5F00\\u53D1\\u8005\\u5DE5\\u5177\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Chrome DevTools\"}),\"\\uFF1A\\u7528\\u4E8E\\u8C03\\u8BD5 JavaScript \\u7684\\u6700\\u5E7F\\u6CDB\\u4F7F\\u7528\\u7684\\u5DE5\\u5177\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u5957\\u4E30\\u5BCC\\u7684\\u529F\\u80FD\\uFF0C\\u5305\\u62EC\\u8BBE\\u7F6E\\u65AD\\u70B9\\u3001\\u68C0\\u67E5\\u53D8\\u91CF\\u3001\\u67E5\\u770B\\u8C03\\u7528\\u5806\\u6808\\u7B49\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Firefox Developer Tools\"}),\"\\uFF1A\\u7C7B\\u4F3C\\u4E8E Chrome DevTools\\uFF0C\\u5177\\u6709\\u81EA\\u5DF1\\u7684\\u4E00\\u5957\\u8C03\\u8BD5\\u529F\\u80FD\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Safari Web Inspector\"}),\"\\uFF1A\\u63D0\\u4F9B\\u7528\\u4E8E\\u5728 Safari \\u4E0A\\u8C03\\u8BD5\\u7684\\u5DE5\\u5177\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Edge Developer Tools\"}),\"\\uFF1A\\u7C7B\\u4F3C\\u4E8E Chrome DevTools\\uFF0C\\u56E0\\u4E3A Edge \\u73B0\\u5728\\u57FA\\u4E8E Chromium\\u3002\"]}),`\n`]}),`\n`]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u7F51\\u7EDC\\u8BF7\\u6C42\",`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Postman\"}),\"\\uFF1A\\u7528\\u4E8E\\u8C03\\u8BD5 API \\u8C03\\u7528\\u7684\\u5DE5\\u5177\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Fiddler\"}),\"\\uFF1A\\u5E2E\\u52A9\\u6355\\u83B7\\u548C\\u68C0\\u67E5 HTTP/HTTPS \\u6D41\\u91CF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Charles Proxy\"}),\"\\uFF1A\\u53E6\\u4E00\\u4E2A\\u7528\\u4E8E\\u62E6\\u622A\\u548C\\u8C03\\u8BD5\\u7F51\\u7EDC\\u8C03\\u7528\\u7684\\u5DE5\\u5177\\u3002\"]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u8C03\\u8BD5 JavaScript\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4EE5\\u4E0B\\u662F\\u5F00\\u53D1\\u4EBA\\u5458\\u7ECF\\u5E38\\u7528\\u4E8E\\u8C03\\u8BD5 JavaScript \\u4EE3\\u7801\\u7684\\u5E38\\u7528\\u5DE5\\u5177\\u548C\\u6280\\u672F\\u3002\"}),`\n`,(0,e.jsxs)(n.h3,{children:[(0,e.jsx)(n.code,{children:\"console\"}),\" \\u65B9\\u6CD5\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"console.log()\"}),\"\\uFF1A\\u5728\\u4EE3\\u7801\\u7684\\u5404\\u4E2A\\u70B9\\u68C0\\u67E5\\u503C\\u3001\\u53D8\\u91CF\\u548C\\u6570\\u636E\\u7ED3\\u6784\\u7684\\u6700\\u57FA\\u672C\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"console.error()\"}),\"\\uFF1A\\u5C06\\u9519\\u8BEF\\u8F93\\u51FA\\u5230\\u63A7\\u5236\\u53F0\\uFF0C\\u901A\\u5E38\\u5E26\\u6709\\u66F4\\u8BE6\\u7EC6\\u7684\\u5806\\u6808\\u8DDF\\u8E2A\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"console.warn()\"}),\"\\uFF1A\\u663E\\u793A\\u8B66\\u544A\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"console.table()\"}),\"\\uFF1A\\u4EE5\\u53EF\\u8BFB\\u7684\\u8868\\u683C\\u683C\\u5F0F\\u663E\\u793A\\u6570\\u636E\\uFF08\\u5C24\\u5176\\u662F\\u5BF9\\u8C61\\u6570\\u7EC4\\uFF09\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"console.time()\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"console.timeEnd()\"}),\"\\uFF1A\\u6D4B\\u91CF\\u4EE3\\u7801\\u5757\\u7684\\u6267\\u884C\\u65F6\\u95F4\\u3002\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.h3,{children:[(0,e.jsx)(n.code,{children:\"debugger\"}),\" \\u8BED\\u53E5\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5728\\u653E\\u7F6E \",(0,e.jsx)(n.code,{children:\"debugger;\"}),\" \\u7684\\u884C\\u5904\\u6682\\u505C\\u4EE3\\u7801\\u6267\\u884C\\u3002\"]}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5141\\u8BB8\\u60A8\\u9010\\u884C\\u5355\\u6B65\\u6267\\u884C\\u4EE3\\u7801\\u3001\\u68C0\\u67E5\\u53D8\\u91CF\\u5E76\\u4E86\\u89E3\\u6267\\u884C\\u6D41\\u7A0B\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u65AD\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u76F4\\u63A5\\u5728\\u6D4F\\u89C8\\u5668\\u5F00\\u53D1\\u8005\\u5DE5\\u5177\\u6216 IDE\\uFF08\\u4F8B\\u5982 VS Code\\uFF09\\u7684\\u201CSources\\u201D\\u9762\\u677F\\u4E2D\\u8BBE\\u7F6E\\u65AD\\u70B9\\uFF0C\\u4EE5\\u5728\\u7279\\u5B9A\\u4EE3\\u7801\\u884C\\u5904\\u6682\\u505C\\u6267\\u884C\\uFF0C\\u800C\\u65E0\\u9700\\u4FEE\\u6539\\u6E90\\u4EE3\\u7801\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7F51\\u7EDC\\u9009\\u9879\\u5361\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u76D1\\u89C6 JavaScript \\u4EE3\\u7801\\u53D1\\u51FA\\u7684\\u7F51\\u7EDC\\u8BF7\\u6C42\\uFF08\\u4F8B\\u5982\\uFF0CAJAX \\u8C03\\u7528\\u3001\\u83B7\\u53D6\\u6570\\u636E\\uFF09\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u68C0\\u67E5\\u8BF7\\u6C42\\u6807\\u5934\\u3001\\u54CD\\u5E94\\u3001\\u8BA1\\u65F6\\u5E76\\u8BC6\\u522B\\u6F5C\\u5728\\u95EE\\u9898\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6027\\u80FD\\u9009\\u9879\\u5361\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u5206\\u6790 JavaScript \\u4EE3\\u7801\\u4EE5\\u8BC6\\u522B\\u6027\\u80FD\\u74F6\\u9888\\u3002\"}),`\n`,(0,e.jsx)(n.li,{children:\"\\u5206\\u6790 CPU \\u4F7F\\u7528\\u7387\\u3001\\u5185\\u5B58\\u5206\\u914D\\u548C\\u6E32\\u67D3\\u65F6\\u95F4\\u3002\"}),`\n`]})]})}function a(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,{...l,children:(0,e.jsx)(s,{...l})}):s(l)}return f(J);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/whats-a-typical-use-case-for-anonymous-functions/en-US.json b/apps/web/src/__generated__/questions/quiz/whats-a-typical-use-case-for-anonymous-functions/en-US.json
index 4895bfa43..1008c6a11 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-a-typical-use-case-for-anonymous-functions/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-a-typical-use-case-for-anonymous-functions/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/whats-a-typical-use-case-for-anonymous-functions/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var g=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),b=(o,n)=>{for(var t in n)a(o,t,{get:n[t],enumerable:!0})},c=(o,n,t,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let s of m(n))!p.call(o,s)&&s!==t&&a(o,s,{get:()=>n[s],enumerable:!(i=h(n,s))||i.enumerable});return o};var y=(o,n,t)=>(t=o!=null?u(f(o)):{},c(n||!o||!o.__esModule?a(t,\"default\",{value:o,enumerable:!0}):t,o)),w=o=>c(a({},\"__esModule\",{value:!0}),o);var l=g((A,r)=>{r.exports=_jsx_runtime});var I={};b(I,{default:()=>k,frontmatter:()=>v});var e=y(l()),v={title:\"What's a typical use case for anonymous functions in JavaScript?\"};function d(o){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\"},o.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"Anonymous function in Javascript is a function that does not have any name associated with it. They are typically used as arguments to other functions or assigned to variables.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const arr = [-1, 0, 5, 6];\n\n// The filter method is passed an anonymous function.\narr.filter((x) => x > 1); // [5, 6]\n`})}),`\n`,(0,e.jsx)(n.p,{children:'They are often used as arguments to other functions, known as higher-order functions, which can take functions as input and return a function as output. Anonymous functions can access variables from the outer scope, a concept known as closures, allowing them to \"close over\" and remember the environment in which they were created.'}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Encapsulating Code\n(function () {\n  // Some code here.\n})();\n\n// Callbacks\nsetTimeout(function () {\n  console.log('Hello world!');\n}, 1000);\n\n// Functional programming constructs\nconst arr = [1, 2, 3];\nconst double = arr.map(function (el) {\n  return el * 2;\n});\nconsole.log(double); // [2, 4, 6]\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Anonymous functions\"}),`\n`,(0,e.jsx)(n.p,{children:\"Anonymous functions provide a more concise way to define functions, especially for simple operations or callbacks. Besides that, they can also be used in the following scenarios\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Immediate execution\"}),`\n`,(0,e.jsx)(n.p,{children:\"Anonymous functions are commonly used in Immediately Invoked Function Expressions (IIFEs) to encapsulate code within a local scope. This prevents variables declared within the function from leaking to the global scope and polluting the global namespace.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// This is an IIFE\n(function () {\n  var x = 10;\n  console.log(x); // 10\n})();\n\n// x is not accessible here\nconsole.log(typeof x); // undefined\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In the above example, the IIFE creates a local scope for the variable \",(0,e.jsx)(n.code,{children:\"x\"}),\". As a result, \",(0,e.jsx)(n.code,{children:\"x\"}),\" is not accessible outside the IIFE, thus preventing it from leaking into the global scope.\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Callbacks\"}),`\n`,(0,e.jsx)(n.p,{children:\"Anonymous functions can be used as callbacks that are used once and do not need to be used anywhere else. The code will seem more self-contained and readable when handlers are defined right inside the code calling them, rather than having to search elsewhere to find the function body.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`setTimeout(() => {\n  console.log('Hello world!');\n}, 1000);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Higher-order functions\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"It is used as arguments to functional programming constructs like Higher-order functions or Lodash (similar to callbacks). Higher-order functions take other functions as arguments or return them as results. Anonymous functions are often used with higher-order functions like \",(0,e.jsx)(n.code,{children:\"map()\"}),\", \",(0,e.jsx)(n.code,{children:\"filter()\"}),\", and \",(0,e.jsx)(n.code,{children:\"reduce()\"}),\".\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const arr = [1, 2, 3];\nconst double = arr.map((el) => {\n  return el * 2;\n});\nconsole.log(double); // [2, 4, 6]\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Event Handling\"}),`\n`,(0,e.jsx)(n.p,{children:\"In React, anonymous functions are widely used for defining callback functions inline for handling events and passing callbacks as props.\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function App() {\n  return <button onClick={() => console.log('Clicked!')}>Click Me</button>;\n}\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Follow-Up Questions\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"How do anonymous functions differ from named functions?\"}),`\n`,(0,e.jsx)(n.li,{children:\"Can you explain the difference between arrow functions and anonymous functions?\"}),`\n`]})]})}function x(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,Object.assign({},o,{children:(0,e.jsx)(d,o)})):d(o)}var k=x;return w(I);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),y=(o,n)=>{for(var t in n)a(o,t,{get:n[t],enumerable:!0})},r=(o,n,t,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let s of f(n))!g.call(o,s)&&s!==t&&a(o,s,{get:()=>n[s],enumerable:!(i=m(n,s))||i.enumerable});return o};var w=(o,n,t)=>(t=o!=null?h(p(o)):{},r(n||!o||!o.__esModule?a(t,\"default\",{value:o,enumerable:!0}):t,o)),v=o=>r(a({},\"__esModule\",{value:!0}),o);var l=b((j,c)=>{c.exports=_jsx_runtime});var k={};y(k,{default:()=>u,frontmatter:()=>x});var e=w(l()),x={title:\"What's a typical use case for anonymous functions in JavaScript?\"};function d(o){let n={code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"Anonymous function in Javascript is a function that does not have any name associated with it. They are typically used as arguments to other functions or assigned to variables.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const arr = [-1, 0, 5, 6];\n\n// The filter method is passed an anonymous function.\narr.filter((x) => x > 1); // [5, 6]\n`})}),`\n`,(0,e.jsx)(n.p,{children:'They are often used as arguments to other functions, known as higher-order functions, which can take functions as input and return a function as output. Anonymous functions can access variables from the outer scope, a concept known as closures, allowing them to \"close over\" and remember the environment in which they were created.'}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Encapsulating Code\n(function () {\n  // Some code here.\n})();\n\n// Callbacks\nsetTimeout(function () {\n  console.log('Hello world!');\n}, 1000);\n\n// Functional programming constructs\nconst arr = [1, 2, 3];\nconst double = arr.map(function (el) {\n  return el * 2;\n});\nconsole.log(double); // [2, 4, 6]\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Anonymous functions\"}),`\n`,(0,e.jsx)(n.p,{children:\"Anonymous functions provide a more concise way to define functions, especially for simple operations or callbacks. Besides that, they can also be used in the following scenarios\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Immediate execution\"}),`\n`,(0,e.jsx)(n.p,{children:\"Anonymous functions are commonly used in Immediately Invoked Function Expressions (IIFEs) to encapsulate code within a local scope. This prevents variables declared within the function from leaking to the global scope and polluting the global namespace.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// This is an IIFE\n(function () {\n  var x = 10;\n  console.log(x); // 10\n})();\n\n// x is not accessible here\nconsole.log(typeof x); // undefined\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In the above example, the IIFE creates a local scope for the variable \",(0,e.jsx)(n.code,{children:\"x\"}),\". As a result, \",(0,e.jsx)(n.code,{children:\"x\"}),\" is not accessible outside the IIFE, thus preventing it from leaking into the global scope.\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Callbacks\"}),`\n`,(0,e.jsx)(n.p,{children:\"Anonymous functions can be used as callbacks that are used once and do not need to be used anywhere else. The code will seem more self-contained and readable when handlers are defined right inside the code calling them, rather than having to search elsewhere to find the function body.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`setTimeout(() => {\n  console.log('Hello world!');\n}, 1000);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Higher-order functions\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"It is used as arguments to functional programming constructs like Higher-order functions or Lodash (similar to callbacks). Higher-order functions take other functions as arguments or return them as results. Anonymous functions are often used with higher-order functions like \",(0,e.jsx)(n.code,{children:\"map()\"}),\", \",(0,e.jsx)(n.code,{children:\"filter()\"}),\", and \",(0,e.jsx)(n.code,{children:\"reduce()\"}),\".\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const arr = [1, 2, 3];\nconst double = arr.map((el) => {\n  return el * 2;\n});\nconsole.log(double); // [2, 4, 6]\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Event Handling\"}),`\n`,(0,e.jsx)(n.p,{children:\"In React, anonymous functions are widely used for defining callback functions inline for handling events and passing callbacks as props.\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function App() {\n  return <button onClick={() => console.log('Clicked!')}>Click Me</button>;\n}\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Follow-Up Questions\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"How do anonymous functions differ from named functions?\"}),`\n`,(0,e.jsx)(n.li,{children:\"Can you explain the difference between arrow functions and anonymous functions?\"}),`\n`]})]})}function u(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,{...o,children:(0,e.jsx)(d,{...o})}):d(o)}return v(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/whats-a-typical-use-case-for-anonymous-functions/pt-BR.json b/apps/web/src/__generated__/questions/quiz/whats-a-typical-use-case-for-anonymous-functions/pt-BR.json
index c8fe87270..65a60b832 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-a-typical-use-case-for-anonymous-functions/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-a-typical-use-case-for-anonymous-functions/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/whats-a-typical-use-case-for-anonymous-functions/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var i=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var h=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var a in e)s(n,a,{get:e[a],enumerable:!0})},u=(n,e,a,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!f.call(n,r)&&r!==a&&s(n,r,{get:()=>e[r],enumerable:!(c=m(e,r))||c.enumerable});return n};var x=(n,e,a)=>(a=n!=null?i(g(n)):{},u(e||!n||!n.__esModule?s(a,\"default\",{value:n,enumerable:!0}):a,n)),v=n=>u(s({},\"__esModule\",{value:!0}),n);var d=h((C,t)=>{t.exports=_jsx_runtime});var O={};j(O,{default:()=>q,frontmatter:()=>_});var o=x(d()),_={title:\"Qual \\xE9 um caso t\\xEDpico de uso para fun\\xE7\\xF5es an\\xF4nimas?\"};function l(n){let e=Object.assign({p:\"p\",pre:\"pre\",code:\"code\"},n.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.p,{children:\"Eles podem ser usados em IIFEs (fun\\xE7\\xF5es autoexecut\\xE1veis) para encapsular algum c\\xF3digo dentro de um escopo local, para que as vari\\xE1veis declaradas nele n\\xE3o vazem para o escopo global.\"}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`(function () {\n  // Algum c\\xF3digo aqui.\n})();\n`})}),`\n`,(0,o.jsx)(e.p,{children:\"Como uma fun\\xE7\\xE3o de callback que \\xE9 usada apenas uma vez e n\\xE3o precisa ser usada em nenhum outro lugar. O c\\xF3digo parecer\\xE1 mais aut\\xF4nomo e leg\\xEDvel quando os manipuladores forem definidos dentro do pr\\xF3prio c\\xF3digo que os chama, em vez de ter que procurar em outro lugar para encontrar o corpo da fun\\xE7\\xE3o.\"}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`setTimeout(function () {\n  console.log('Ol\\xE1 mundo!');\n}, 1000);\n`})}),`\n`,(0,o.jsx)(e.p,{children:\"Argumentos para construtos de programa\\xE7\\xE3o funcional ou Lodash (semelhantes a fun\\xE7\\xF5es de retorno de chamada).\"}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`const arr = [1, 2, 3];\nconst double = arr.ap(function (el) {\n  return el * 2;\n});\nconsole.log(double); // [2, 4, 6]\n`})})]})}function b(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(l,n)})):l(n)}var q=b;return v(O);})();\n;return Component;"
+  "solution": "var Component=(()=>{var i=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var a in e)s(n,a,{get:e[a],enumerable:!0})},u=(n,e,a,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of g(e))!h.call(n,r)&&r!==a&&s(n,r,{get:()=>e[r],enumerable:!(c=p(e,r))||c.enumerable});return n};var v=(n,e,a)=>(a=n!=null?i(f(n)):{},u(e||!n||!n.__esModule?s(a,\"default\",{value:n,enumerable:!0}):a,n)),_=n=>u(s({},\"__esModule\",{value:!0}),n);var d=x((C,t)=>{t.exports=_jsx_runtime});var b={};j(b,{default:()=>m,frontmatter:()=>q});var o=v(d()),q={title:\"Qual \\xE9 um caso t\\xEDpico de uso para fun\\xE7\\xF5es an\\xF4nimas?\"};function l(n){let e={code:\"code\",p:\"p\",pre:\"pre\",...n.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.p,{children:\"Eles podem ser usados em IIFEs (fun\\xE7\\xF5es autoexecut\\xE1veis) para encapsular algum c\\xF3digo dentro de um escopo local, para que as vari\\xE1veis declaradas nele n\\xE3o vazem para o escopo global.\"}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`(function () {\n  // Algum c\\xF3digo aqui.\n})();\n`})}),`\n`,(0,o.jsx)(e.p,{children:\"Como uma fun\\xE7\\xE3o de callback que \\xE9 usada apenas uma vez e n\\xE3o precisa ser usada em nenhum outro lugar. O c\\xF3digo parecer\\xE1 mais aut\\xF4nomo e leg\\xEDvel quando os manipuladores forem definidos dentro do pr\\xF3prio c\\xF3digo que os chama, em vez de ter que procurar em outro lugar para encontrar o corpo da fun\\xE7\\xE3o.\"}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`setTimeout(function () {\n  console.log('Ol\\xE1 mundo!');\n}, 1000);\n`})}),`\n`,(0,o.jsx)(e.p,{children:\"Argumentos para construtos de programa\\xE7\\xE3o funcional ou Lodash (semelhantes a fun\\xE7\\xF5es de retorno de chamada).\"}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`const arr = [1, 2, 3];\nconst double = arr.ap(function (el) {\n  return el * 2;\n});\nconsole.log(double); // [2, 4, 6]\n`})})]})}function m(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(l,{...n})}):l(n)}return _(b);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/whats-a-typical-use-case-for-anonymous-functions/zh-CN.json b/apps/web/src/__generated__/questions/quiz/whats-a-typical-use-case-for-anonymous-functions/zh-CN.json
index 60d8ff301..e92705310 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-a-typical-use-case-for-anonymous-functions/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-a-typical-use-case-for-anonymous-functions/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/whats-a-typical-use-case-for-anonymous-functions/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var x=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),f=(l,n)=>{for(var c in n)o(l,c,{get:n[c],enumerable:!0})},t=(l,n,c,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of p(n))!m.call(l,r)&&r!==c&&o(l,r,{get:()=>n[r],enumerable:!(i=u(n,r))||i.enumerable});return l};var j=(l,n,c)=>(c=l!=null?h(g(l)):{},t(n||!l||!l.__esModule?o(c,\"default\",{value:l,enumerable:!0}):c,l)),b=l=>t(o({},\"__esModule\",{value:!0}),l);var s=x((N,d)=>{d.exports=_jsx_runtime});var F={};f(F,{default:()=>C,frontmatter:()=>v});var e=j(s()),v={title:\"JavaScript \\u4E2D\\u533F\\u540D\\u51FD\\u6570\\u7684\\u5178\\u578B\\u7528\\u4F8B\\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(l){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",ul:\"ul\",li:\"li\"},l.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"Javascript \\u4E2D\\u7684\\u533F\\u540D\\u51FD\\u6570\\u662F\\u6307\\u6CA1\\u6709\\u5173\\u8054\\u540D\\u79F0\\u7684\\u51FD\\u6570\\u3002\\u5B83\\u4EEC\\u901A\\u5E38\\u7528\\u4F5C\\u5176\\u4ED6\\u51FD\\u6570\\u7684\\u53C2\\u6570\\u6216\\u5206\\u914D\\u7ED9\\u53D8\\u91CF\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const arr = [-1, 0, 5, 6];\n\n// The filter method is passed an anonymous function.\narr.filter((x) => x > 1); // [5, 6]\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5B83\\u4EEC\\u901A\\u5E38\\u7528\\u4F5C\\u5176\\u4ED6\\u51FD\\u6570\\u7684\\u53C2\\u6570\\uFF0C\\u8FD9\\u4E9B\\u51FD\\u6570\\u88AB\\u79F0\\u4E3A\\u9AD8\\u9636\\u51FD\\u6570\\uFF0C\\u53EF\\u4EE5\\u63A5\\u53D7\\u51FD\\u6570\\u4F5C\\u4E3A\\u8F93\\u5165\\u5E76\\u8FD4\\u56DE\\u51FD\\u6570\\u4F5C\\u4E3A\\u8F93\\u51FA\\u3002\\u533F\\u540D\\u51FD\\u6570\\u53EF\\u4EE5\\u8BBF\\u95EE\\u6765\\u81EA\\u5916\\u90E8\\u4F5C\\u7528\\u57DF\\u7684\\u53D8\\u91CF\\uFF0C\\u8FD9\\u4E2A\\u6982\\u5FF5\\u88AB\\u79F0\\u4E3A\\u95ED\\u5305\\uFF0C\\u5141\\u8BB8\\u5B83\\u4EEC\\u201C\\u5C01\\u95ED\\u201D\\u5E76\\u8BB0\\u4F4F\\u521B\\u5EFA\\u5B83\\u4EEC\\u7684\\u73AF\\u5883\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Encapsulating Code\n(function () {\n  // Some code here.\n})();\n\n// Callbacks\nsetTimeout(function () {\n  console.log('Hello world!');\n}, 1000);\n\n// Functional programming constructs\nconst arr = [1, 2, 3];\nconst double = arr.map(function (el) {\n  return el * 2;\n});\nconsole.log(double); // [2, 4, 6]\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u533F\\u540D\\u51FD\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u533F\\u540D\\u51FD\\u6570\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u7B80\\u6D01\\u7684\\u5B9A\\u4E49\\u51FD\\u6570\\u7684\\u65B9\\u5F0F\\uFF0C\\u5C24\\u5176\\u9002\\u7528\\u4E8E\\u7B80\\u5355\\u64CD\\u4F5C\\u6216\\u56DE\\u8C03\\u3002\\u9664\\u6B64\\u4E4B\\u5916\\uFF0C\\u5B83\\u4EEC\\u8FD8\\u53EF\\u4EE5\\u7528\\u4E8E\\u4EE5\\u4E0B\\u573A\\u666F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7ACB\\u5373\\u6267\\u884C\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u533F\\u540D\\u51FD\\u6570\\u901A\\u5E38\\u7528\\u4E8E\\u7ACB\\u5373\\u8C03\\u7528\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F (IIFE)\\uFF0C\\u4EE5\\u5C06\\u4EE3\\u7801\\u5C01\\u88C5\\u5728\\u5C40\\u90E8\\u4F5C\\u7528\\u57DF\\u5185\\u3002\\u8FD9\\u53EF\\u4EE5\\u9632\\u6B62\\u5728\\u51FD\\u6570\\u5185\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u6CC4\\u6F0F\\u5230\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u5E76\\u6C61\\u67D3\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// This is an IIFE\n(function () {\n  var x = 10;\n  console.log(x); // 10\n})();\n\n// x is not accessible here\nconsole.log(typeof x); // undefined\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u4E0A\\u9762\\u7684\\u4F8B\\u5B50\\u4E2D\\uFF0CIIFE \\u4E3A\\u53D8\\u91CF \",(0,e.jsx)(n.code,{children:\"x\"}),\" \\u521B\\u5EFA\\u4E86\\u4E00\\u4E2A\\u5C40\\u90E8\\u4F5C\\u7528\\u57DF\\u3002\\u56E0\\u6B64\\uFF0C\",(0,e.jsx)(n.code,{children:\"x\"}),\" \\u65E0\\u6CD5\\u5728 IIFE \\u4E4B\\u5916\\u8BBF\\u95EE\\uFF0C\\u4ECE\\u800C\\u9632\\u6B62\\u5176\\u6CC4\\u6F0F\\u5230\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u56DE\\u8C03\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u533F\\u540D\\u51FD\\u6570\\u53EF\\u4EE5\\u7528\\u4F5C\\u4EC5\\u4F7F\\u7528\\u4E00\\u6B21\\u4E14\\u4E0D\\u9700\\u8981\\u5728\\u5176\\u4ED6\\u4EFB\\u4F55\\u5730\\u65B9\\u4F7F\\u7528\\u7684\\u56DE\\u8C03\\u3002\\u5F53\\u5904\\u7406\\u7A0B\\u5E8F\\u5728\\u8C03\\u7528\\u5B83\\u4EEC\\u7684\\u4EE3\\u7801\\u5185\\u90E8\\u5B9A\\u4E49\\u65F6\\uFF0C\\u4EE3\\u7801\\u770B\\u8D77\\u6765\\u4F1A\\u66F4\\u81EA\\u5305\\u542B\\u4E14\\u66F4\\u5177\\u53EF\\u8BFB\\u6027\\uFF0C\\u800C\\u4E0D\\u662F\\u5FC5\\u987B\\u5728\\u5176\\u4ED6\\u5730\\u65B9\\u641C\\u7D22\\u4EE5\\u627E\\u5230\\u51FD\\u6570\\u4F53\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`setTimeout(() => {\n  console.log('Hello world!');\n}, 1000);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9AD8\\u9636\\u51FD\\u6570\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5B83\\u7528\\u4F5C\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\\u6784\\u9020\\uFF08\\u5982\\u9AD8\\u9636\\u51FD\\u6570\\u6216 Lodash\\uFF08\\u7C7B\\u4F3C\\u4E8E\\u56DE\\u8C03\\uFF09\\uFF09\\u7684\\u53C2\\u6570\\u3002\\u9AD8\\u9636\\u51FD\\u6570\\u5C06\\u5176\\u4ED6\\u51FD\\u6570\\u4F5C\\u4E3A\\u53C2\\u6570\\u6216\\u5C06\\u5B83\\u4EEC\\u4F5C\\u4E3A\\u7ED3\\u679C\\u8FD4\\u56DE\\u3002\\u533F\\u540D\\u51FD\\u6570\\u901A\\u5E38\\u4E0E\\u9AD8\\u9636\\u51FD\\u6570\\uFF08\\u5982 \",(0,e.jsx)(n.code,{children:\"map()\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"filter()\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"reduce()\"}),\"\\uFF09\\u4E00\\u8D77\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const arr = [1, 2, 3];\nconst double = arr.map((el) => {\n  return el * 2;\n});\nconsole.log(double); // [2, 4, 6]\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E8B\\u4EF6\\u5904\\u7406\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 React \\u4E2D\\uFF0C\\u533F\\u540D\\u51FD\\u6570\\u88AB\\u5E7F\\u6CDB\\u7528\\u4E8E\\u5B9A\\u4E49\\u5185\\u8054\\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u7528\\u4E8E\\u5904\\u7406\\u4E8B\\u4EF6\\u548C\\u5C06\\u56DE\\u8C03\\u4F5C\\u4E3A props \\u4F20\\u9012\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function App() {\n  return <button onClick={() => console.log('Clicked!')}>Click Me</button>;\n}\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u540E\\u7EED\\u95EE\\u9898\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u4F60\\u80FD\\u89E3\\u91CA\\u4E00\\u4E0B\\u7BAD\\u5934\\u51FD\\u6570\\u548C\\u533F\\u540D\\u51FD\\u6570\\u7684\\u533A\\u522B\\u5417\\uFF1F\"}),`\n`]})]})}function I(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,Object.assign({},l,{children:(0,e.jsx)(a,l)})):a(l)}var C=I;return b(F);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var f=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),j=(l,n)=>{for(var r in n)o(l,r,{get:n[r],enumerable:!0})},t=(l,n,r,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of m(n))!x.call(l,c)&&c!==r&&o(l,c,{get:()=>n[c],enumerable:!(i=p(n,c))||i.enumerable});return l};var b=(l,n,r)=>(r=l!=null?u(g(l)):{},t(n||!l||!l.__esModule?o(r,\"default\",{value:l,enumerable:!0}):r,l)),v=l=>t(o({},\"__esModule\",{value:!0}),l);var s=f((_,d)=>{d.exports=_jsx_runtime});var C={};j(C,{default:()=>h,frontmatter:()=>I});var e=b(s()),I={title:\"JavaScript \\u4E2D\\u533F\\u540D\\u51FD\\u6570\\u7684\\u5178\\u578B\\u7528\\u4F8B\\u662F\\u4EC0\\u4E48\\uFF1F\"};function a(l){let n={code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...l.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"Javascript \\u4E2D\\u7684\\u533F\\u540D\\u51FD\\u6570\\u662F\\u6307\\u6CA1\\u6709\\u5173\\u8054\\u540D\\u79F0\\u7684\\u51FD\\u6570\\u3002\\u5B83\\u4EEC\\u901A\\u5E38\\u7528\\u4F5C\\u5176\\u4ED6\\u51FD\\u6570\\u7684\\u53C2\\u6570\\u6216\\u5206\\u914D\\u7ED9\\u53D8\\u91CF\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const arr = [-1, 0, 5, 6];\n\n// The filter method is passed an anonymous function.\narr.filter((x) => x > 1); // [5, 6]\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5B83\\u4EEC\\u901A\\u5E38\\u7528\\u4F5C\\u5176\\u4ED6\\u51FD\\u6570\\u7684\\u53C2\\u6570\\uFF0C\\u8FD9\\u4E9B\\u51FD\\u6570\\u88AB\\u79F0\\u4E3A\\u9AD8\\u9636\\u51FD\\u6570\\uFF0C\\u53EF\\u4EE5\\u63A5\\u53D7\\u51FD\\u6570\\u4F5C\\u4E3A\\u8F93\\u5165\\u5E76\\u8FD4\\u56DE\\u51FD\\u6570\\u4F5C\\u4E3A\\u8F93\\u51FA\\u3002\\u533F\\u540D\\u51FD\\u6570\\u53EF\\u4EE5\\u8BBF\\u95EE\\u6765\\u81EA\\u5916\\u90E8\\u4F5C\\u7528\\u57DF\\u7684\\u53D8\\u91CF\\uFF0C\\u8FD9\\u4E2A\\u6982\\u5FF5\\u88AB\\u79F0\\u4E3A\\u95ED\\u5305\\uFF0C\\u5141\\u8BB8\\u5B83\\u4EEC\\u201C\\u5C01\\u95ED\\u201D\\u5E76\\u8BB0\\u4F4F\\u521B\\u5EFA\\u5B83\\u4EEC\\u7684\\u73AF\\u5883\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Encapsulating Code\n(function () {\n  // Some code here.\n})();\n\n// Callbacks\nsetTimeout(function () {\n  console.log('Hello world!');\n}, 1000);\n\n// Functional programming constructs\nconst arr = [1, 2, 3];\nconst double = arr.map(function (el) {\n  return el * 2;\n});\nconsole.log(double); // [2, 4, 6]\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u533F\\u540D\\u51FD\\u6570\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u533F\\u540D\\u51FD\\u6570\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u66F4\\u7B80\\u6D01\\u7684\\u5B9A\\u4E49\\u51FD\\u6570\\u7684\\u65B9\\u5F0F\\uFF0C\\u5C24\\u5176\\u9002\\u7528\\u4E8E\\u7B80\\u5355\\u64CD\\u4F5C\\u6216\\u56DE\\u8C03\\u3002\\u9664\\u6B64\\u4E4B\\u5916\\uFF0C\\u5B83\\u4EEC\\u8FD8\\u53EF\\u4EE5\\u7528\\u4E8E\\u4EE5\\u4E0B\\u573A\\u666F\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u7ACB\\u5373\\u6267\\u884C\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u533F\\u540D\\u51FD\\u6570\\u901A\\u5E38\\u7528\\u4E8E\\u7ACB\\u5373\\u8C03\\u7528\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F (IIFE)\\uFF0C\\u4EE5\\u5C06\\u4EE3\\u7801\\u5C01\\u88C5\\u5728\\u5C40\\u90E8\\u4F5C\\u7528\\u57DF\\u5185\\u3002\\u8FD9\\u53EF\\u4EE5\\u9632\\u6B62\\u5728\\u51FD\\u6570\\u5185\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u6CC4\\u6F0F\\u5230\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u5E76\\u6C61\\u67D3\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// This is an IIFE\n(function () {\n  var x = 10;\n  console.log(x); // 10\n})();\n\n// x is not accessible here\nconsole.log(typeof x); // undefined\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u4E0A\\u9762\\u7684\\u4F8B\\u5B50\\u4E2D\\uFF0CIIFE \\u4E3A\\u53D8\\u91CF \",(0,e.jsx)(n.code,{children:\"x\"}),\" \\u521B\\u5EFA\\u4E86\\u4E00\\u4E2A\\u5C40\\u90E8\\u4F5C\\u7528\\u57DF\\u3002\\u56E0\\u6B64\\uFF0C\",(0,e.jsx)(n.code,{children:\"x\"}),\" \\u65E0\\u6CD5\\u5728 IIFE \\u4E4B\\u5916\\u8BBF\\u95EE\\uFF0C\\u4ECE\\u800C\\u9632\\u6B62\\u5176\\u6CC4\\u6F0F\\u5230\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u3002\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u56DE\\u8C03\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u533F\\u540D\\u51FD\\u6570\\u53EF\\u4EE5\\u7528\\u4F5C\\u4EC5\\u4F7F\\u7528\\u4E00\\u6B21\\u4E14\\u4E0D\\u9700\\u8981\\u5728\\u5176\\u4ED6\\u4EFB\\u4F55\\u5730\\u65B9\\u4F7F\\u7528\\u7684\\u56DE\\u8C03\\u3002\\u5F53\\u5904\\u7406\\u7A0B\\u5E8F\\u5728\\u8C03\\u7528\\u5B83\\u4EEC\\u7684\\u4EE3\\u7801\\u5185\\u90E8\\u5B9A\\u4E49\\u65F6\\uFF0C\\u4EE3\\u7801\\u770B\\u8D77\\u6765\\u4F1A\\u66F4\\u81EA\\u5305\\u542B\\u4E14\\u66F4\\u5177\\u53EF\\u8BFB\\u6027\\uFF0C\\u800C\\u4E0D\\u662F\\u5FC5\\u987B\\u5728\\u5176\\u4ED6\\u5730\\u65B9\\u641C\\u7D22\\u4EE5\\u627E\\u5230\\u51FD\\u6570\\u4F53\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`setTimeout(() => {\n  console.log('Hello world!');\n}, 1000);\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u9AD8\\u9636\\u51FD\\u6570\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5B83\\u7528\\u4F5C\\u51FD\\u6570\\u5F0F\\u7F16\\u7A0B\\u6784\\u9020\\uFF08\\u5982\\u9AD8\\u9636\\u51FD\\u6570\\u6216 Lodash\\uFF08\\u7C7B\\u4F3C\\u4E8E\\u56DE\\u8C03\\uFF09\\uFF09\\u7684\\u53C2\\u6570\\u3002\\u9AD8\\u9636\\u51FD\\u6570\\u5C06\\u5176\\u4ED6\\u51FD\\u6570\\u4F5C\\u4E3A\\u53C2\\u6570\\u6216\\u5C06\\u5B83\\u4EEC\\u4F5C\\u4E3A\\u7ED3\\u679C\\u8FD4\\u56DE\\u3002\\u533F\\u540D\\u51FD\\u6570\\u901A\\u5E38\\u4E0E\\u9AD8\\u9636\\u51FD\\u6570\\uFF08\\u5982 \",(0,e.jsx)(n.code,{children:\"map()\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"filter()\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"reduce()\"}),\"\\uFF09\\u4E00\\u8D77\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const arr = [1, 2, 3];\nconst double = arr.map((el) => {\n  return el * 2;\n});\nconsole.log(double); // [2, 4, 6]\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E8B\\u4EF6\\u5904\\u7406\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728 React \\u4E2D\\uFF0C\\u533F\\u540D\\u51FD\\u6570\\u88AB\\u5E7F\\u6CDB\\u7528\\u4E8E\\u5B9A\\u4E49\\u5185\\u8054\\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u7528\\u4E8E\\u5904\\u7406\\u4E8B\\u4EF6\\u548C\\u5C06\\u56DE\\u8C03\\u4F5C\\u4E3A props \\u4F20\\u9012\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function App() {\n  return <button onClick={() => console.log('Clicked!')}>Click Me</button>;\n}\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u540E\\u7EED\\u95EE\\u9898\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u4F60\\u80FD\\u89E3\\u91CA\\u4E00\\u4E0B\\u7BAD\\u5934\\u51FD\\u6570\\u548C\\u533F\\u540D\\u51FD\\u6570\\u7684\\u533A\\u522B\\u5417\\uFF1F\"}),`\n`]})]})}function h(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,{...l,children:(0,e.jsx)(a,{...l})}):a(l)}return v(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/en-US.json b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/en-US.json
index cba79e5f9..8682f00b1 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/en-US.json
@@ -31,5 +31,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),v=(i,e)=>{for(var o in e)d(i,o,{get:e[o],enumerable:!0})},s=(i,e,o,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of f(e))!u.call(i,n)&&n!==o&&d(i,n,{get:()=>e[n],enumerable:!(l=p(e,n))||l.enumerable});return i};var w=(i,e,o)=>(o=i!=null?h(m(i)):{},s(e||!i||!i.__esModule?d(o,\"default\",{value:i,enumerable:!0}):o,i)),x=i=>s(d({},\"__esModule\",{value:!0}),i);var r=g((k,c)=>{c.exports=_jsx_runtime});var T={};v(T,{default:()=>j,frontmatter:()=>y});var t=w(r()),y={title:\"What's the difference between a `relative`, `fixed`, `absolute`, `sticky` and `static`-ally positioned element?\"};function a(i){let e=Object.assign({p:\"p\",code:\"code\",ul:\"ul\",li:\"li\"},i.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[\"A positioned element is an element whose computed \",(0,t.jsx)(e.code,{children:\"position\"}),\" property is either \",(0,t.jsx)(e.code,{children:\"relative\"}),\", \",(0,t.jsx)(e.code,{children:\"absolute\"}),\", \",(0,t.jsx)(e.code,{children:\"fixed\"}),\" or \",(0,t.jsx)(e.code,{children:\"sticky\"}),\".\"]}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"static\"}),\": The default position; the element will flow into the page as it normally would. The \",(0,t.jsx)(e.code,{children:\"top\"}),\", \",(0,t.jsx)(e.code,{children:\"right\"}),\", \",(0,t.jsx)(e.code,{children:\"bottom\"}),\", \",(0,t.jsx)(e.code,{children:\"left\"}),\" and \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" properties do not apply.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"relative\"}),\": The element's position is adjusted relative to itself, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned).\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"absolute\"}),\": The element is removed from the flow of the page and positioned at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block. Absolutely-positioned boxes can have margins, and they do not collapse with any other margins. These elements do not affect the position of other elements.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"fixed\"}),\": The element is removed from the flow of the page and positioned at a specified position relative to the viewport and doesn't move when scrolled.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"sticky\"}),\": Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as \",(0,t.jsx)(e.code,{children:\"relative\"}),\" positioned until it crosses a specified threshold, at which point it is treated as \",(0,t.jsx)(e.code,{children:\"fixed\"}),\"-positioned.\"]}),`\n`]})]})}function b(i={}){let{wrapper:e}=i.components||{};return e?(0,t.jsx)(e,Object.assign({},i,{children:(0,t.jsx)(a,i)})):a(i)}var j=b;return x(T);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var d=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var w=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),x=(i,e)=>{for(var o in e)d(i,o,{get:e[o],enumerable:!0})},s=(i,e,o,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of m(e))!v.call(i,n)&&n!==o&&d(i,n,{get:()=>e[n],enumerable:!(l=f(e,n))||l.enumerable});return i};var g=(i,e,o)=>(o=i!=null?p(u(i)):{},s(e||!i||!i.__esModule?d(o,\"default\",{value:i,enumerable:!0}):o,i)),y=i=>s(d({},\"__esModule\",{value:!0}),i);var c=w((j,r)=>{r.exports=_jsx_runtime});var T={};x(T,{default:()=>h,frontmatter:()=>b});var t=g(c()),b={title:\"What's the difference between a `relative`, `fixed`, `absolute`, `sticky` and `static`-ally positioned element?\"};function a(i){let e={code:\"code\",li:\"li\",p:\"p\",ul:\"ul\",...i.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[\"A positioned element is an element whose computed \",(0,t.jsx)(e.code,{children:\"position\"}),\" property is either \",(0,t.jsx)(e.code,{children:\"relative\"}),\", \",(0,t.jsx)(e.code,{children:\"absolute\"}),\", \",(0,t.jsx)(e.code,{children:\"fixed\"}),\" or \",(0,t.jsx)(e.code,{children:\"sticky\"}),\".\"]}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"static\"}),\": The default position; the element will flow into the page as it normally would. The \",(0,t.jsx)(e.code,{children:\"top\"}),\", \",(0,t.jsx)(e.code,{children:\"right\"}),\", \",(0,t.jsx)(e.code,{children:\"bottom\"}),\", \",(0,t.jsx)(e.code,{children:\"left\"}),\" and \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" properties do not apply.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"relative\"}),\": The element's position is adjusted relative to itself, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned).\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"absolute\"}),\": The element is removed from the flow of the page and positioned at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block. Absolutely-positioned boxes can have margins, and they do not collapse with any other margins. These elements do not affect the position of other elements.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"fixed\"}),\": The element is removed from the flow of the page and positioned at a specified position relative to the viewport and doesn't move when scrolled.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"sticky\"}),\": Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as \",(0,t.jsx)(e.code,{children:\"relative\"}),\" positioned until it crosses a specified threshold, at which point it is treated as \",(0,t.jsx)(e.code,{children:\"fixed\"}),\"-positioned.\"]}),`\n`]})]})}function h(i={}){let{wrapper:e}=i.components||{};return e?(0,t.jsx)(e,{...i,children:(0,t.jsx)(a,{...i})}):a(i)}return y(T);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/pt-BR.json b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/pt-BR.json
index 66894be49..46c8c0be6 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/pt-BR.json
@@ -31,5 +31,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),v=(i,e)=>{for(var a in e)c(i,a,{get:e[a],enumerable:!0})},t=(i,e,a,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of u(e))!f.call(i,n)&&n!==a&&c(i,n,{get:()=>e[n],enumerable:!(d=p(e,n))||d.enumerable});return i};var g=(i,e,a)=>(a=i!=null?m(h(i)):{},t(e||!i||!i.__esModule?c(a,\"default\",{value:i,enumerable:!0}):a,i)),b=i=>t(c({},\"__esModule\",{value:!0}),i);var r=x((A,l)=>{l.exports=_jsx_runtime});var y={};v(y,{default:()=>O,frontmatter:()=>j});var o=g(r()),j={title:\"Qual \\xE9 a diferen\\xE7a entre um elemento com posicionamento `relative`, `fixed`, `absolute` e `static`?\"};function s(i){let e=Object.assign({p:\"p\",code:\"code\",ul:\"ul\",li:\"li\"},i.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Um elemento posicionado \\xE9 um elemento cuja propriedade \",(0,o.jsx)(e.code,{children:\"position\"}),\" calculada \\xE9 \",(0,o.jsx)(e.code,{children:\"relative\"}),\", \",(0,o.jsx)(e.code,{children:\"absolute\"}),\", \",(0,o.jsx)(e.code,{children:\"fixed\"}),\" ou \",(0,o.jsx)(e.code,{children:\"sticky\"}),\" calculada.\"]}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:\"static\"}),\": A posi\\xE7\\xE3o padr\\xE3o; o elemento ir\\xE1 fluir na p\\xE1gina como normalmente faria. As propriedades \",(0,o.jsx)(e.code,{children:\"top\"}),\", \",(0,o.jsx)(e.code,{children:\"right\"}),\", \",(0,o.jsx)(e.code,{children:\"bottom\"}),\", \",(0,o.jsx)(e.code,{children:\"left\"}),\" e\",(0,o.jsx)(e.code,{children:\"z-index\"}),\" n\\xE3o se aplicam.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:\"relative\"}),\": A posi\\xE7\\xE3o do elemento \\xE9 ajustada em rela\\xE7\\xE3o a si mesma, sem mudar de layout (deixando assim uma lacuna para o elemento onde ele teria sido se n\\xE3o tivesse sido posicionado).\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:\"absolute\"}),\": O elemento \\xE9 removido do fluxo da p\\xE1gina e posicionado em uma posi\\xE7\\xE3o espec\\xEDfica em rela\\xE7\\xE3o ao ancestral posicionado mais pr\\xF3ximo se houver, ou em rela\\xE7\\xE3o ao bloco inicial de cont\\xEAiner. Caixas posicionadas absolutamente podem ter margens e n\\xE3o se sobrep\\xF5em com outras margens. Esses elementos n\\xE3o afetam a posi\\xE7\\xE3o de outros elementos.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:\"fixed\"}),\": O elemento \\xE9 removido do fluxo da p\\xE1gina e posicionado em uma posi\\xE7\\xE3o espec\\xEDfica em rela\\xE7\\xE3o \\xE0 janela de visualiza\\xE7\\xE3o e n\\xE3o se move quando a p\\xE1gina \\xE9 rolada.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:\"sticky\"}),': O posicionamento \"sticky\" \\xE9 um h\\xEDbrido de posicionamento relativo e fixo. O elemento \\xE9 tratado como posicionado ',(0,o.jsx)(e.code,{children:\"relative\"}),\" at\\xE9 atravessar um limite espec\\xEDfico, momento em que \\xE9 tratado como posicionado \",(0,o.jsx)(e.code,{children:\"fixed\"}),\".\"]}),`\n`]})]})}function _(i={}){let{wrapper:e}=i.components||{};return e?(0,o.jsx)(e,Object.assign({},i,{children:(0,o.jsx)(s,i)})):s(i)}var O=_;return b(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var v=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),g=(i,e)=>{for(var a in e)d(i,a,{get:e[a],enumerable:!0})},t=(i,e,a,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of h(e))!x.call(i,n)&&n!==a&&d(i,n,{get:()=>e[n],enumerable:!(c=u(e,n))||c.enumerable});return i};var b=(i,e,a)=>(a=i!=null?p(f(i)):{},t(e||!i||!i.__esModule?d(a,\"default\",{value:i,enumerable:!0}):a,i)),j=i=>t(d({},\"__esModule\",{value:!0}),i);var r=v((k,l)=>{l.exports=_jsx_runtime});var y={};g(y,{default:()=>m,frontmatter:()=>_});var o=b(r()),_={title:\"Qual \\xE9 a diferen\\xE7a entre um elemento com posicionamento `relative`, `fixed`, `absolute` e `static`?\"};function s(i){let e={code:\"code\",li:\"li\",p:\"p\",ul:\"ul\",...i.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Um elemento posicionado \\xE9 um elemento cuja propriedade \",(0,o.jsx)(e.code,{children:\"position\"}),\" calculada \\xE9 \",(0,o.jsx)(e.code,{children:\"relative\"}),\", \",(0,o.jsx)(e.code,{children:\"absolute\"}),\", \",(0,o.jsx)(e.code,{children:\"fixed\"}),\" ou \",(0,o.jsx)(e.code,{children:\"sticky\"}),\" calculada.\"]}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:\"static\"}),\": A posi\\xE7\\xE3o padr\\xE3o; o elemento ir\\xE1 fluir na p\\xE1gina como normalmente faria. As propriedades \",(0,o.jsx)(e.code,{children:\"top\"}),\", \",(0,o.jsx)(e.code,{children:\"right\"}),\", \",(0,o.jsx)(e.code,{children:\"bottom\"}),\", \",(0,o.jsx)(e.code,{children:\"left\"}),\" e\",(0,o.jsx)(e.code,{children:\"z-index\"}),\" n\\xE3o se aplicam.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:\"relative\"}),\": A posi\\xE7\\xE3o do elemento \\xE9 ajustada em rela\\xE7\\xE3o a si mesma, sem mudar de layout (deixando assim uma lacuna para o elemento onde ele teria sido se n\\xE3o tivesse sido posicionado).\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:\"absolute\"}),\": O elemento \\xE9 removido do fluxo da p\\xE1gina e posicionado em uma posi\\xE7\\xE3o espec\\xEDfica em rela\\xE7\\xE3o ao ancestral posicionado mais pr\\xF3ximo se houver, ou em rela\\xE7\\xE3o ao bloco inicial de cont\\xEAiner. Caixas posicionadas absolutamente podem ter margens e n\\xE3o se sobrep\\xF5em com outras margens. Esses elementos n\\xE3o afetam a posi\\xE7\\xE3o de outros elementos.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:\"fixed\"}),\": O elemento \\xE9 removido do fluxo da p\\xE1gina e posicionado em uma posi\\xE7\\xE3o espec\\xEDfica em rela\\xE7\\xE3o \\xE0 janela de visualiza\\xE7\\xE3o e n\\xE3o se move quando a p\\xE1gina \\xE9 rolada.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:\"sticky\"}),': O posicionamento \"sticky\" \\xE9 um h\\xEDbrido de posicionamento relativo e fixo. O elemento \\xE9 tratado como posicionado ',(0,o.jsx)(e.code,{children:\"relative\"}),\" at\\xE9 atravessar um limite espec\\xEDfico, momento em que \\xE9 tratado como posicionado \",(0,o.jsx)(e.code,{children:\"fixed\"}),\".\"]}),`\n`]})]})}function m(i={}){let{wrapper:e}=i.components||{};return e?(0,o.jsx)(e,{...i,children:(0,o.jsx)(s,{...i})}):s(i)}return j(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/zh-CN.json b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/zh-CN.json
index 7c9a1f5d2..e9923efdc 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/zh-CN.json
@@ -31,5 +31,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var t=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var p=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var i in e)t(n,i,{get:e[i],enumerable:!0})},r=(n,e,i,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of u(e))!m.call(n,d)&&d!==i&&t(n,d,{get:()=>e[d],enumerable:!(l=x(e,d))||l.enumerable});return n};var _=(n,e,i)=>(i=n!=null?a(f(n)):{},r(e||!n||!n.__esModule?t(i,\"default\",{value:n,enumerable:!0}):i,n)),b=n=>r(t({},\"__esModule\",{value:!0}),n);var h=p((C,o)=>{o.exports=_jsx_runtime});var k={};j(k,{default:()=>y,frontmatter:()=>g});var c=_(h()),g={title:\"relative\\u3001fixed\\u3001absolute\\u3001sticky \\u548C static \\u5B9A\\u4F4D\\u5143\\u7D20\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function s(n){let e=Object.assign({p:\"p\",code:\"code\",ul:\"ul\",li:\"li\"},n.components);return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(e.p,{children:[\"\\u5B9A\\u4F4D\\u5143\\u7D20\\u662F\\u6307\\u5176\\u8BA1\\u7B97\\u540E\\u7684 \",(0,c.jsx)(e.code,{children:\"position\"}),\" \\u5C5E\\u6027\\u4E3A \",(0,c.jsx)(e.code,{children:\"relative\"}),\"\\u3001\",(0,c.jsx)(e.code,{children:\"absolute\"}),\"\\u3001\",(0,c.jsx)(e.code,{children:\"fixed\"}),\" \\u6216 \",(0,c.jsx)(e.code,{children:\"sticky\"}),\" \\u7684\\u5143\\u7D20\\u3002\"]}),`\n`,(0,c.jsxs)(e.ul,{children:[`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"static\"}),\"\\uFF1A\\u9ED8\\u8BA4\\u4F4D\\u7F6E\\uFF1B\\u5143\\u7D20\\u5C06\\u50CF\\u901A\\u5E38\\u4E00\\u6837\\u6D41\\u5165\\u9875\\u9762\\u3002\",(0,c.jsx)(e.code,{children:\"top\"}),\"\\u3001\",(0,c.jsx)(e.code,{children:\"right\"}),\"\\u3001\",(0,c.jsx)(e.code,{children:\"bottom\"}),\"\\u3001\",(0,c.jsx)(e.code,{children:\"left\"}),\" \\u548C \",(0,c.jsx)(e.code,{children:\"z-index\"}),\" \\u5C5E\\u6027\\u4E0D\\u9002\\u7528\\u3002\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"relative\"}),\"\\uFF1A\\u5143\\u7D20\\u7684\\u4F4D\\u7F6E\\u76F8\\u5BF9\\u4E8E\\u81EA\\u8EAB\\u8FDB\\u884C\\u8C03\\u6574\\uFF0C\\u4E0D\\u6539\\u53D8\\u5E03\\u5C40\\uFF08\\u56E0\\u6B64\\u4E3A\\u5143\\u7D20\\u7559\\u51FA\\u4E00\\u4E2A\\u95F4\\u9699\\uFF0C\\u5C31\\u50CF\\u5B83\\u6CA1\\u6709\\u88AB\\u5B9A\\u4F4D\\u4E00\\u6837\\uFF09\\u3002\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"absolute\"}),\"\\uFF1A\\u5143\\u7D20\\u4ECE\\u9875\\u9762\\u6D41\\u4E2D\\u79FB\\u9664\\uFF0C\\u5E76\\u76F8\\u5BF9\\u4E8E\\u5176\\u6700\\u8FD1\\u7684\\u5DF2\\u5B9A\\u4F4D\\u7956\\u5148\\uFF08\\u5982\\u679C\\u6709\\uFF09\\u6216\\u76F8\\u5BF9\\u4E8E\\u521D\\u59CB\\u5305\\u542B\\u5757\\u5B9A\\u4F4D\\u3002\\u7EDD\\u5BF9\\u5B9A\\u4F4D\\u7684\\u6846\\u53EF\\u4EE5\\u6709\\u8FB9\\u8DDD\\uFF0C\\u5E76\\u4E14\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u4E0E\\u5176\\u4ED6\\u4EFB\\u4F55\\u8FB9\\u8DDD\\u5408\\u5E76\\u3002\\u8FD9\\u4E9B\\u5143\\u7D20\\u4E0D\\u4F1A\\u5F71\\u54CD\\u5176\\u4ED6\\u5143\\u7D20\\u7684\\u4F4D\\u7F6E\\u3002\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"fixed\"}),\"\\uFF1A\\u5143\\u7D20\\u4ECE\\u9875\\u9762\\u6D41\\u4E2D\\u79FB\\u9664\\uFF0C\\u5E76\\u76F8\\u5BF9\\u4E8E\\u89C6\\u53E3\\u4E2D\\u7684\\u6307\\u5B9A\\u4F4D\\u7F6E\\u5B9A\\u4F4D\\uFF0C\\u5E76\\u4E14\\u5728\\u6EDA\\u52A8\\u65F6\\u4E0D\\u4F1A\\u79FB\\u52A8\\u3002\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"sticky\"}),\"\\uFF1A\\u7C98\\u6027\\u5B9A\\u4F4D\\u662F\\u76F8\\u5BF9\\u5B9A\\u4F4D\\u548C\\u56FA\\u5B9A\\u5B9A\\u4F4D\\u7684\\u6DF7\\u5408\\u3002\\u8BE5\\u5143\\u7D20\\u88AB\\u89C6\\u4E3A \",(0,c.jsx)(e.code,{children:\"relative\"}),\" \\u5B9A\\u4F4D\\uFF0C\\u76F4\\u5230\\u5B83\\u7A7F\\u8FC7\\u6307\\u5B9A\\u7684\\u9608\\u503C\\uFF0C\\u6B64\\u65F6\\u5B83\\u88AB\\u89C6\\u4E3A \",(0,c.jsx)(e.code,{children:\"fixed\"}),\" \\u5B9A\\u4F4D\\u3002\"]}),`\n`]})]})}function v(n={}){let{wrapper:e}=n.components||{};return e?(0,c.jsx)(e,Object.assign({},n,{children:(0,c.jsx)(s,n)})):s(n)}var y=v;return b(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var x=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var _=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var i in e)t(n,i,{get:e[i],enumerable:!0})},r=(n,e,i,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of f(e))!p.call(n,d)&&d!==i&&t(n,d,{get:()=>e[d],enumerable:!(l=u(e,d))||l.enumerable});return n};var b=(n,e,i)=>(i=n!=null?x(m(n)):{},r(e||!n||!n.__esModule?t(i,\"default\",{value:n,enumerable:!0}):i,n)),v=n=>r(t({},\"__esModule\",{value:!0}),n);var h=_((M,o)=>{o.exports=_jsx_runtime});var g={};j(g,{default:()=>a,frontmatter:()=>y});var c=b(h()),y={title:\"relative\\u3001fixed\\u3001absolute\\u3001sticky \\u548C static \\u5B9A\\u4F4D\\u5143\\u7D20\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function s(n){let e={code:\"code\",li:\"li\",p:\"p\",ul:\"ul\",...n.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(e.p,{children:[\"\\u5B9A\\u4F4D\\u5143\\u7D20\\u662F\\u6307\\u5176\\u8BA1\\u7B97\\u540E\\u7684 \",(0,c.jsx)(e.code,{children:\"position\"}),\" \\u5C5E\\u6027\\u4E3A \",(0,c.jsx)(e.code,{children:\"relative\"}),\"\\u3001\",(0,c.jsx)(e.code,{children:\"absolute\"}),\"\\u3001\",(0,c.jsx)(e.code,{children:\"fixed\"}),\" \\u6216 \",(0,c.jsx)(e.code,{children:\"sticky\"}),\" \\u7684\\u5143\\u7D20\\u3002\"]}),`\n`,(0,c.jsxs)(e.ul,{children:[`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"static\"}),\"\\uFF1A\\u9ED8\\u8BA4\\u4F4D\\u7F6E\\uFF1B\\u5143\\u7D20\\u5C06\\u50CF\\u901A\\u5E38\\u4E00\\u6837\\u6D41\\u5165\\u9875\\u9762\\u3002\",(0,c.jsx)(e.code,{children:\"top\"}),\"\\u3001\",(0,c.jsx)(e.code,{children:\"right\"}),\"\\u3001\",(0,c.jsx)(e.code,{children:\"bottom\"}),\"\\u3001\",(0,c.jsx)(e.code,{children:\"left\"}),\" \\u548C \",(0,c.jsx)(e.code,{children:\"z-index\"}),\" \\u5C5E\\u6027\\u4E0D\\u9002\\u7528\\u3002\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"relative\"}),\"\\uFF1A\\u5143\\u7D20\\u7684\\u4F4D\\u7F6E\\u76F8\\u5BF9\\u4E8E\\u81EA\\u8EAB\\u8FDB\\u884C\\u8C03\\u6574\\uFF0C\\u4E0D\\u6539\\u53D8\\u5E03\\u5C40\\uFF08\\u56E0\\u6B64\\u4E3A\\u5143\\u7D20\\u7559\\u51FA\\u4E00\\u4E2A\\u95F4\\u9699\\uFF0C\\u5C31\\u50CF\\u5B83\\u6CA1\\u6709\\u88AB\\u5B9A\\u4F4D\\u4E00\\u6837\\uFF09\\u3002\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"absolute\"}),\"\\uFF1A\\u5143\\u7D20\\u4ECE\\u9875\\u9762\\u6D41\\u4E2D\\u79FB\\u9664\\uFF0C\\u5E76\\u76F8\\u5BF9\\u4E8E\\u5176\\u6700\\u8FD1\\u7684\\u5DF2\\u5B9A\\u4F4D\\u7956\\u5148\\uFF08\\u5982\\u679C\\u6709\\uFF09\\u6216\\u76F8\\u5BF9\\u4E8E\\u521D\\u59CB\\u5305\\u542B\\u5757\\u5B9A\\u4F4D\\u3002\\u7EDD\\u5BF9\\u5B9A\\u4F4D\\u7684\\u6846\\u53EF\\u4EE5\\u6709\\u8FB9\\u8DDD\\uFF0C\\u5E76\\u4E14\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u4E0E\\u5176\\u4ED6\\u4EFB\\u4F55\\u8FB9\\u8DDD\\u5408\\u5E76\\u3002\\u8FD9\\u4E9B\\u5143\\u7D20\\u4E0D\\u4F1A\\u5F71\\u54CD\\u5176\\u4ED6\\u5143\\u7D20\\u7684\\u4F4D\\u7F6E\\u3002\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"fixed\"}),\"\\uFF1A\\u5143\\u7D20\\u4ECE\\u9875\\u9762\\u6D41\\u4E2D\\u79FB\\u9664\\uFF0C\\u5E76\\u76F8\\u5BF9\\u4E8E\\u89C6\\u53E3\\u4E2D\\u7684\\u6307\\u5B9A\\u4F4D\\u7F6E\\u5B9A\\u4F4D\\uFF0C\\u5E76\\u4E14\\u5728\\u6EDA\\u52A8\\u65F6\\u4E0D\\u4F1A\\u79FB\\u52A8\\u3002\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"sticky\"}),\"\\uFF1A\\u7C98\\u6027\\u5B9A\\u4F4D\\u662F\\u76F8\\u5BF9\\u5B9A\\u4F4D\\u548C\\u56FA\\u5B9A\\u5B9A\\u4F4D\\u7684\\u6DF7\\u5408\\u3002\\u8BE5\\u5143\\u7D20\\u88AB\\u89C6\\u4E3A \",(0,c.jsx)(e.code,{children:\"relative\"}),\" \\u5B9A\\u4F4D\\uFF0C\\u76F4\\u5230\\u5B83\\u7A7F\\u8FC7\\u6307\\u5B9A\\u7684\\u9608\\u503C\\uFF0C\\u6B64\\u65F6\\u5B83\\u88AB\\u89C6\\u4E3A \",(0,c.jsx)(e.code,{children:\"fixed\"}),\" \\u5B9A\\u4F4D\\u3002\"]}),`\n`]})]})}function a(n={}){let{wrapper:e}=n.components||{};return e?(0,c.jsx)(e,{...n,children:(0,c.jsx)(s,{...n})}):s(n)}return v(g);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.json b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.json
index 91fa34fd9..6f30848d0 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var p=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),v=(r,e)=>{for(var l in e)t(r,l,{get:e[l],enumerable:!0})},o=(r,e,l,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of f(e))!b.call(r,i)&&i!==l&&t(r,i,{get:()=>e[i],enumerable:!(d=u(e,i))||d.enumerable});return r};var y=(r,e,l)=>(l=r!=null?s(g(r)):{},o(e||!r||!r.__esModule?t(l,\"default\",{value:r,enumerable:!0}):l,r)),m=r=>o(t({},\"__esModule\",{value:!0}),r);var a=p((E,c)=>{c.exports=_jsx_runtime});var k={};v(k,{default:()=>x,frontmatter:()=>w});var n=y(a()),w={title:\"What's the difference between a JavaScript variable that is: `null`, `undefined` or undeclared?\",subtitle:\"How would you go about checking for any of these states?\"};function h(r){let e=Object.assign({h2:\"h2\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",code:\"code\",tbody:\"tbody\",td:\"td\",hr:\"hr\",p:\"p\",strong:\"strong\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\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:\"Trait\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"null\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"undefined\"})}),(0,n.jsx)(e.th,{children:\"Undeclared\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Meaning\"}),(0,n.jsx)(e.td,{children:\"Explicitly set by the developer to indicate that a variable has no value\"}),(0,n.jsx)(e.td,{children:\"Variable has been declared but not assigned a value\"}),(0,n.jsx)(e.td,{children:\"Variable has not been declared at all\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsxs)(e.td,{children:[\"Type (via \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" operator)\"]}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"'object'\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"'undefined'\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"'undefined'\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Equality Comparison\"}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"null == undefined\"}),\" is \",(0,n.jsx)(e.code,{children:\"true\"})]}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"undefined == null\"}),\" is \",(0,n.jsx)(e.code,{children:\"true\"})]}),(0,n.jsxs)(e.td,{children:[\"Throws a \",(0,n.jsx)(e.code,{children:\"ReferenceError\"})]})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Undeclared\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Undeclared\"}),\" variables are created when you assign a value to an identifier that is not previously created using \",(0,n.jsx)(e.code,{children:\"var\"}),\", \",(0,n.jsx)(e.code,{children:\"let\"}),\" or \",(0,n.jsx)(e.code,{children:\"const\"}),\". Undeclared variables will be defined globally, outside of the current scope. In strict mode, a \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\" will be thrown when you try to assign to an undeclared variable. Undeclared variables are bad in the same way that global variables are bad. Avoid them at all cost! To check for them, wrap its usage in a \",(0,n.jsx)(e.code,{children:\"try\"}),\"/\",(0,n.jsx)(e.code,{children:\"catch\"}),\" block.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function foo() {\n  x = 1; // Throws a ReferenceError in strict mode\n}\n\nfoo();\nconsole.log(x); // 1 (if not in strict mode)\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" operator on undeclared variables will give \",(0,n.jsx)(e.code,{children:\"'undefined'\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(typeof y === 'undefined'); // true\n`})}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"undefined\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"A variable that is \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" is a variable that has been declared, but not assigned a value. It is of type \",(0,n.jsx)(e.code,{children:\"undefined\"}),\". If a function does not return a value, and its result is assigned to a variable, that variable will also have the value \",(0,n.jsx)(e.code,{children:\"undefined\"}),\". To check for it, compare using the strict equality (\",(0,n.jsx)(e.code,{children:\"===\"}),\") operator or \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" which will give the \",(0,n.jsx)(e.code,{children:\"'undefined'\"}),\" string. Note that you should not be using the loose equality operator (\",(0,n.jsx)(e.code,{children:\"==\"}),\") to check, as it will also return \",(0,n.jsx)(e.code,{children:\"true\"}),\" if the value is \",(0,n.jsx)(e.code,{children:\"null\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let foo;\nconsole.log(foo); // undefined\nconsole.log(foo === undefined); // true\nconsole.log(typeof foo === 'undefined'); // true\n\nconsole.log(foo == null); // true. Wrong, don't use this to check if a value is undefined!\n\nfunction bar() {} // Returns undefined if there is nothing returned.\nlet baz = bar();\nconsole.log(baz); // undefined\n`})}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"null\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"A variable that is \",(0,n.jsx)(e.code,{children:\"null\"}),\" will have been explicitly assigned to the \",(0,n.jsx)(e.code,{children:\"null\"}),\" value. It represents no value and is different from \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" in the sense that it has been explicitly assigned. To check for \",(0,n.jsx)(e.code,{children:\"null,\"}),\" simply compare using the strict equality operator. Note that like the above, you should not be using the loose equality operator (\",(0,n.jsx)(e.code,{children:\"==\"}),\") to check, as it will also return \",(0,n.jsx)(e.code,{children:\"true\"}),\" if the value is \",(0,n.jsx)(e.code,{children:\"undefined\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const foo = null;\nconsole.log(foo === null); // true\nconsole.log(typeof foo === 'object'); // true\n\nconsole.log(foo == undefined); // true. Wrong, don't use this to check if a value is null!\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"As a good habit, never leave your variables undeclared or unassigned. Explicitly assign \",(0,n.jsx)(e.code,{children:\"null\"}),\" to them after declaring if you don't intend to use them yet.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Always explicitly declare variables before using them to prevent errors.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Using some static analysis tooling in your workflow (e.g. \",(0,n.jsx)(e.a,{href:\"https://eslint.org/\",children:\"ESLint\"}),\", TypeScript Compiler), will enable checks that you are not referencing undeclared variables.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Practice\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Practice implementing \",(0,n.jsxs)(e.a,{href:\"https://www.greatfrontend.com/questions/javascript/type-utilities?fpr=yangshun\",children:[\"type utilities that check for \",(0,n.jsx)(e.code,{children:\"null\"}),\" and \",(0,n.jsx)(e.code,{children:\"undefined\"})]}),\" on GreatFrontEnd.\"]}),`\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/Web/JavaScript/Reference/Operators/null\",children:\"MDN Web Docs: null\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined\",children:\"MDN Web Docs: undefined\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError\",children:\"MDN Web Docs: ReferenceError\"})}),`\n`]})]})}function j(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(h,r)})):h(r)}var x=j;return m(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var v=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),y=(r,e)=>{for(var l in e)t(r,l,{get:e[l],enumerable:!0})},o=(r,e,l,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!b.call(r,i)&&i!==l&&t(r,i,{get:()=>e[i],enumerable:!(d=f(e,i))||d.enumerable});return r};var m=(r,e,l)=>(l=r!=null?u(g(r)):{},o(e||!r||!r.__esModule?t(l,\"default\",{value:r,enumerable:!0}):l,r)),w=r=>o(t({},\"__esModule\",{value:!0}),r);var a=v((R,c)=>{c.exports=_jsx_runtime});var j={};y(j,{default:()=>s,frontmatter:()=>x});var n=m(a()),x={title:\"What's the difference between a JavaScript variable that is: `null`, `undefined` or undeclared?\",subtitle:\"How would you go about checking for any of these states?\"};function h(r){let e={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\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:\"Trait\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"null\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"undefined\"})}),(0,n.jsx)(e.th,{children:\"Undeclared\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Meaning\"}),(0,n.jsx)(e.td,{children:\"Explicitly set by the developer to indicate that a variable has no value\"}),(0,n.jsx)(e.td,{children:\"Variable has been declared but not assigned a value\"}),(0,n.jsx)(e.td,{children:\"Variable has not been declared at all\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsxs)(e.td,{children:[\"Type (via \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" operator)\"]}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"'object'\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"'undefined'\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"'undefined'\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Equality Comparison\"}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"null == undefined\"}),\" is \",(0,n.jsx)(e.code,{children:\"true\"})]}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"undefined == null\"}),\" is \",(0,n.jsx)(e.code,{children:\"true\"})]}),(0,n.jsxs)(e.td,{children:[\"Throws a \",(0,n.jsx)(e.code,{children:\"ReferenceError\"})]})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Undeclared\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Undeclared\"}),\" variables are created when you assign a value to an identifier that is not previously created using \",(0,n.jsx)(e.code,{children:\"var\"}),\", \",(0,n.jsx)(e.code,{children:\"let\"}),\" or \",(0,n.jsx)(e.code,{children:\"const\"}),\". Undeclared variables will be defined globally, outside of the current scope. In strict mode, a \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\" will be thrown when you try to assign to an undeclared variable. Undeclared variables are bad in the same way that global variables are bad. Avoid them at all cost! To check for them, wrap its usage in a \",(0,n.jsx)(e.code,{children:\"try\"}),\"/\",(0,n.jsx)(e.code,{children:\"catch\"}),\" block.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function foo() {\n  x = 1; // Throws a ReferenceError in strict mode\n}\n\nfoo();\nconsole.log(x); // 1 (if not in strict mode)\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Using the \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" operator on undeclared variables will give \",(0,n.jsx)(e.code,{children:\"'undefined'\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(typeof y === 'undefined'); // true\n`})}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"undefined\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"A variable that is \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" is a variable that has been declared, but not assigned a value. It is of type \",(0,n.jsx)(e.code,{children:\"undefined\"}),\". If a function does not return a value, and its result is assigned to a variable, that variable will also have the value \",(0,n.jsx)(e.code,{children:\"undefined\"}),\". To check for it, compare using the strict equality (\",(0,n.jsx)(e.code,{children:\"===\"}),\") operator or \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" which will give the \",(0,n.jsx)(e.code,{children:\"'undefined'\"}),\" string. Note that you should not be using the loose equality operator (\",(0,n.jsx)(e.code,{children:\"==\"}),\") to check, as it will also return \",(0,n.jsx)(e.code,{children:\"true\"}),\" if the value is \",(0,n.jsx)(e.code,{children:\"null\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let foo;\nconsole.log(foo); // undefined\nconsole.log(foo === undefined); // true\nconsole.log(typeof foo === 'undefined'); // true\n\nconsole.log(foo == null); // true. Wrong, don't use this to check if a value is undefined!\n\nfunction bar() {} // Returns undefined if there is nothing returned.\nlet baz = bar();\nconsole.log(baz); // undefined\n`})}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"null\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"A variable that is \",(0,n.jsx)(e.code,{children:\"null\"}),\" will have been explicitly assigned to the \",(0,n.jsx)(e.code,{children:\"null\"}),\" value. It represents no value and is different from \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" in the sense that it has been explicitly assigned. To check for \",(0,n.jsx)(e.code,{children:\"null,\"}),\" simply compare using the strict equality operator. Note that like the above, you should not be using the loose equality operator (\",(0,n.jsx)(e.code,{children:\"==\"}),\") to check, as it will also return \",(0,n.jsx)(e.code,{children:\"true\"}),\" if the value is \",(0,n.jsx)(e.code,{children:\"undefined\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const foo = null;\nconsole.log(foo === null); // true\nconsole.log(typeof foo === 'object'); // true\n\nconsole.log(foo == undefined); // true. Wrong, don't use this to check if a value is null!\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"As a good habit, never leave your variables undeclared or unassigned. Explicitly assign \",(0,n.jsx)(e.code,{children:\"null\"}),\" to them after declaring if you don't intend to use them yet.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Always explicitly declare variables before using them to prevent errors.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Using some static analysis tooling in your workflow (e.g. \",(0,n.jsx)(e.a,{href:\"https://eslint.org/\",children:\"ESLint\"}),\", TypeScript Compiler), will enable checks that you are not referencing undeclared variables.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Practice\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Practice implementing \",(0,n.jsxs)(e.a,{href:\"https://www.greatfrontend.com/questions/javascript/type-utilities?fpr=yangshun\",children:[\"type utilities that check for \",(0,n.jsx)(e.code,{children:\"null\"}),\" and \",(0,n.jsx)(e.code,{children:\"undefined\"})]}),\" on GreatFrontEnd.\"]}),`\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/Web/JavaScript/Reference/Operators/null\",children:\"MDN Web Docs: null\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined\",children:\"MDN Web Docs: undefined\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError\",children:\"MDN Web Docs: ReferenceError\"})}),`\n`]})]})}function s(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(h,{...r})}):h(r)}return w(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/pt-BR.json b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/pt-BR.json
index 40a10a044..f82cab590 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var h=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),g=(a,e)=>{for(var r in e)d(a,r,{get:e[r],enumerable:!0})},c=(a,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of v(e))!p.call(a,n)&&n!==r&&d(a,n,{get:()=>e[n],enumerable:!(i=m(e,n))||i.enumerable});return a};var b=(a,e,r)=>(r=a!=null?u(f(a)):{},c(e||!a||!a.__esModule?d(r,\"default\",{value:a,enumerable:!0}):r,a)),x=a=>c(d({},\"__esModule\",{value:!0}),a);var s=h((C,l)=>{l.exports=_jsx_runtime});var y={};g(y,{default:()=>_,frontmatter:()=>j});var o=b(s()),j={title:\"Qual \\xE9 a diferen\\xE7a entre uma vari\\xE1vel que \\xE9: `null`, `undefined` ou n\\xE3o declarada?\",subtitle:'Como voc\\xEA checaria cada um destes estados?\"'};function t(a){let e=Object.assign({p:\"p\",strong:\"strong\",code:\"code\",pre:\"pre\"},a.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Vari\\xE1veis \",(0,o.jsx)(e.strong,{children:\"n\\xE3o declaradas\"}),\" s\\xE3o criadas quando voc\\xEA atribui um valor a um identificador que n\\xE3o foi criado anteriormente usando var, let ou const. Vari\\xE1veis n\\xE3o declaradas ser\\xE3o definidas globalmente, fora do escopo atual. No modo estrito, um \",(0,o.jsx)(e.code,{children:\"ReferenceError\"}),\" ser\\xE1 lan\\xE7ado quando voc\\xEA tentar atribuir a uma vari\\xE1vel n\\xE3o declarada. Vari\\xE1veis n\\xE3o declaradas s\\xE3o ruins assim como as vari\\xE1veis globais s\\xE3o ruins. Evite elas a todo custo! Para verific\\xE1-las, envolva o uso delas em um bloco \",(0,o.jsx)(e.code,{children:\"try/catch\"}),\".\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`function foo() {\n  x = 1; // Lan\\xE7a um erro de refer\\xEAncia em modo strict\n}\n\nfoo();\nconsole.log(x); // 1\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"Uma vari\\xE1vel que \\xE9 \",(0,o.jsx)(e.code,{children:\"undefined\"}),\" \\xE9 uma vari\\xE1vel que foi declarada, mas n\\xE3o atribu\\xEDda um valor. \\xC9 do tipo 'undefined'. Se uma fun\\xE7\\xE3o n\\xE3o retornar nenhum valor como resultado de sua execu\\xE7\\xE3o, e se for atribu\\xEDda a uma vari\\xE1vel, a vari\\xE1vel tamb\\xE9m ter\\xE1 o valor de \",(0,o.jsx)(e.code,{children:\"undefined\"}),\". Para verificar isso, compare usando o operador de igualdade estrita (\",(0,o.jsx)(e.code,{children:\"===\"}),\") ou \",(0,o.jsx)(e.code,{children:\"typeof\"}),\", que retornar\\xE1 a string \",(0,o.jsx)(e.code,{children:\"undefined\"}),\". Note que voc\\xEA n\\xE3o deve usar o operador de igualdade abstrata para verificar, pois tamb\\xE9m retornar\\xE1 \",(0,o.jsx)(e.code,{children:\"true\"}),\" se o valor for \",(0,o.jsx)(e.code,{children:\"null\"}),\".\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`var foo;\nconsole.log(foo); // undefined\nconsole.log(foo === undefined); // true\nconsole.log(typeof foo === 'undefined'); // true\n\nconsole.log(foo == null); // verdadeiro. Errado, n\\xE3o use isso para verificar!\n\nfunction bar() {}\nvar baz = bar();\nconsole.log(baz); // undefined\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"Uma vari\\xE1vel que \\xE9 \",(0,o.jsx)(e.code,{children:\"null\"}),\" ter\\xE1 sido explicitamente atribu\\xEDda ao valor \",(0,o.jsx)(e.code,{children:\"null\"}),\". Ele n\\xE3o representa nenhum valor e \\xE9 diferente de \",(0,o.jsx)(e.code,{children:\"undefined\"}),\" no sentido de que foi explicitamente atribu\\xEDdo. Para verificar se \\xE9 \",(0,o.jsx)(e.code,{children:\"null,\"}),\" simplesmente compare usando o operador de igualdade estrita. Observe que, assim como acima, voc\\xEA n\\xE3o deve usar o operador de igualdade abstrata (\",(0,o.jsx)(e.code,{children:\"==\"}),\") para verificar, pois tamb\\xE9m retornar\\xE1 \",(0,o.jsx)(e.code,{children:\"true\"}),\" se o valor for \",(0,o.jsx)(e.code,{children:\"undefined\"}),\".\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`var foo = null;\nconsole.log(foo === null); // verdadeiro\nconsole.log(typeof foo === 'object'); // verdadeiro\n\nconsole.log(foo == undefined); // true. Errado, n\\xE3o use isto para verificar!\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"Como bom h\\xE1bito, nunca deixe suas vari\\xE1veis n\\xE3o declaradas ou n\\xE3o atribu\\xEDdas. Atribua explicitamente \",(0,o.jsx)(e.code,{children:\"null\"}),\" a elas depois de declar\\xE1-las, se voc\\xEA n\\xE3o pretende us\\xE1-las ainda. Se voc\\xEA usa alguma ferramenta de an\\xE1lise est\\xE1tica em seu fluxo de trabalho (por exemplo, ESLint, TypeScript Compiler), geralmente ela tamb\\xE9m pode verificar se voc\\xEA est\\xE1 referenciando vari\\xE1veis n\\xE3o declaradas.\"]})]})}function q(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,Object.assign({},a,{children:(0,o.jsx)(t,a)})):t(a)}var _=q;return x(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var d=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var g=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),b=(a,e)=>{for(var r in e)d(a,r,{get:e[r],enumerable:!0})},l=(a,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of f(e))!h.call(a,n)&&n!==r&&d(a,n,{get:()=>e[n],enumerable:!(i=v(e,n))||i.enumerable});return a};var x=(a,e,r)=>(r=a!=null?m(p(a)):{},l(e||!a||!a.__esModule?d(r,\"default\",{value:a,enumerable:!0}):r,a)),q=a=>l(d({},\"__esModule\",{value:!0}),a);var s=g((E,c)=>{c.exports=_jsx_runtime});var _={};b(_,{default:()=>u,frontmatter:()=>j});var o=x(s()),j={title:\"Qual \\xE9 a diferen\\xE7a entre uma vari\\xE1vel que \\xE9: `null`, `undefined` ou n\\xE3o declarada?\",subtitle:'Como voc\\xEA checaria cada um destes estados?\"'};function t(a){let e={code:\"code\",p:\"p\",pre:\"pre\",strong:\"strong\",...a.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Vari\\xE1veis \",(0,o.jsx)(e.strong,{children:\"n\\xE3o declaradas\"}),\" s\\xE3o criadas quando voc\\xEA atribui um valor a um identificador que n\\xE3o foi criado anteriormente usando var, let ou const. Vari\\xE1veis n\\xE3o declaradas ser\\xE3o definidas globalmente, fora do escopo atual. No modo estrito, um \",(0,o.jsx)(e.code,{children:\"ReferenceError\"}),\" ser\\xE1 lan\\xE7ado quando voc\\xEA tentar atribuir a uma vari\\xE1vel n\\xE3o declarada. Vari\\xE1veis n\\xE3o declaradas s\\xE3o ruins assim como as vari\\xE1veis globais s\\xE3o ruins. Evite elas a todo custo! Para verific\\xE1-las, envolva o uso delas em um bloco \",(0,o.jsx)(e.code,{children:\"try/catch\"}),\".\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`function foo() {\n  x = 1; // Lan\\xE7a um erro de refer\\xEAncia em modo strict\n}\n\nfoo();\nconsole.log(x); // 1\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"Uma vari\\xE1vel que \\xE9 \",(0,o.jsx)(e.code,{children:\"undefined\"}),\" \\xE9 uma vari\\xE1vel que foi declarada, mas n\\xE3o atribu\\xEDda um valor. \\xC9 do tipo 'undefined'. Se uma fun\\xE7\\xE3o n\\xE3o retornar nenhum valor como resultado de sua execu\\xE7\\xE3o, e se for atribu\\xEDda a uma vari\\xE1vel, a vari\\xE1vel tamb\\xE9m ter\\xE1 o valor de \",(0,o.jsx)(e.code,{children:\"undefined\"}),\". Para verificar isso, compare usando o operador de igualdade estrita (\",(0,o.jsx)(e.code,{children:\"===\"}),\") ou \",(0,o.jsx)(e.code,{children:\"typeof\"}),\", que retornar\\xE1 a string \",(0,o.jsx)(e.code,{children:\"undefined\"}),\". Note que voc\\xEA n\\xE3o deve usar o operador de igualdade abstrata para verificar, pois tamb\\xE9m retornar\\xE1 \",(0,o.jsx)(e.code,{children:\"true\"}),\" se o valor for \",(0,o.jsx)(e.code,{children:\"null\"}),\".\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`var foo;\nconsole.log(foo); // undefined\nconsole.log(foo === undefined); // true\nconsole.log(typeof foo === 'undefined'); // true\n\nconsole.log(foo == null); // verdadeiro. Errado, n\\xE3o use isso para verificar!\n\nfunction bar() {}\nvar baz = bar();\nconsole.log(baz); // undefined\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"Uma vari\\xE1vel que \\xE9 \",(0,o.jsx)(e.code,{children:\"null\"}),\" ter\\xE1 sido explicitamente atribu\\xEDda ao valor \",(0,o.jsx)(e.code,{children:\"null\"}),\". Ele n\\xE3o representa nenhum valor e \\xE9 diferente de \",(0,o.jsx)(e.code,{children:\"undefined\"}),\" no sentido de que foi explicitamente atribu\\xEDdo. Para verificar se \\xE9 \",(0,o.jsx)(e.code,{children:\"null,\"}),\" simplesmente compare usando o operador de igualdade estrita. Observe que, assim como acima, voc\\xEA n\\xE3o deve usar o operador de igualdade abstrata (\",(0,o.jsx)(e.code,{children:\"==\"}),\") para verificar, pois tamb\\xE9m retornar\\xE1 \",(0,o.jsx)(e.code,{children:\"true\"}),\" se o valor for \",(0,o.jsx)(e.code,{children:\"undefined\"}),\".\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`var foo = null;\nconsole.log(foo === null); // verdadeiro\nconsole.log(typeof foo === 'object'); // verdadeiro\n\nconsole.log(foo == undefined); // true. Errado, n\\xE3o use isto para verificar!\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"Como bom h\\xE1bito, nunca deixe suas vari\\xE1veis n\\xE3o declaradas ou n\\xE3o atribu\\xEDdas. Atribua explicitamente \",(0,o.jsx)(e.code,{children:\"null\"}),\" a elas depois de declar\\xE1-las, se voc\\xEA n\\xE3o pretende us\\xE1-las ainda. Se voc\\xEA usa alguma ferramenta de an\\xE1lise est\\xE1tica em seu fluxo de trabalho (por exemplo, ESLint, TypeScript Compiler), geralmente ela tamb\\xE9m pode verificar se voc\\xEA est\\xE1 referenciando vari\\xE1veis n\\xE3o declaradas.\"]})]})}function u(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,{...a,children:(0,o.jsx)(t,{...a})}):t(a)}return q(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/zh-CN.json b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/zh-CN.json
index 192021248..a2a0bb8c1 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(d,e)=>()=>(e||d((e={exports:{}}).exports,e),e.exports),m=(d,e)=>{for(var l in e)r(d,l,{get:e[l],enumerable:!0})},o=(d,e,l,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of s(e))!g.call(d,c)&&c!==l&&r(d,c,{get:()=>e[c],enumerable:!(i=f(e,c))||i.enumerable});return d};var j=(d,e,l)=>(l=d!=null?a(p(d)):{},o(e||!d||!d.__esModule?r(l,\"default\",{value:d,enumerable:!0}):l,d)),y=d=>o(r({},\"__esModule\",{value:!0}),d);var t=b((z,h)=>{h.exports=_jsx_runtime});var R={};m(R,{default:()=>N,frontmatter:()=>v});var n=j(t()),v={title:\"JavaScript \\u53D8\\u91CF `null`\\u3001`undefined` \\u548C\\u672A\\u58F0\\u660E\\u7684\\u533A\\u522B\\u662F\\u4EC0\\u4E48\\uFF1F\",subtitle:\"\\u5982\\u4F55\\u68C0\\u67E5\\u8FD9\\u4E9B\\u72B6\\u6001\\uFF1F\"};function u(d){let e=Object.assign({h2:\"h2\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",code:\"code\",tbody:\"tbody\",td:\"td\",hr:\"hr\",p:\"p\",strong:\"strong\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},d.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\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:\"\\u7279\\u6027\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"null\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"undefined\"})}),(0,n.jsx)(e.th,{children:\"\\u672A\\u58F0\\u660E\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u542B\\u4E49\"}),(0,n.jsx)(e.td,{children:\"\\u7531\\u5F00\\u53D1\\u4EBA\\u5458\\u663E\\u5F0F\\u8BBE\\u7F6E\\uFF0C\\u8868\\u793A\\u53D8\\u91CF\\u6CA1\\u6709\\u503C\"}),(0,n.jsx)(e.td,{children:\"\\u53D8\\u91CF\\u5DF2\\u58F0\\u660E\\u4F46\\u672A\\u8D4B\\u503C\"}),(0,n.jsx)(e.td,{children:\"\\u53D8\\u91CF\\u6839\\u672C\\u672A\\u58F0\\u660E\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsxs)(e.td,{children:[\"\\u7C7B\\u578B\\uFF08\\u901A\\u8FC7 \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" \\u8FD0\\u7B97\\u7B26\\uFF09\"]}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"'object'\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"'undefined'\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"'undefined'\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u7B49\\u5F0F\\u6BD4\\u8F83\"}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"null == undefined\"}),\" \\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"})]}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"undefined == null\"}),\" \\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"})]}),(0,n.jsxs)(e.td,{children:[\"\\u629B\\u51FA \",(0,n.jsx)(e.code,{children:\"ReferenceError\"})]})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u672A\\u58F0\\u660E\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u672A\\u58F0\\u660E\"}),\" \\u53D8\\u91CF\\u662F\\u5728\\u60A8\\u5C06\\u503C\\u5206\\u914D\\u7ED9\\u5148\\u524D\\u672A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"var\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u521B\\u5EFA\\u7684\\u6807\\u8BC6\\u7B26\\u65F6\\u521B\\u5EFA\\u7684\\u3002\\u672A\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u5C06\\u5728\\u5168\\u5C40\\u8303\\u56F4\\u5185\\u5B9A\\u4E49\\uFF0C\\u5728\\u5F53\\u524D\\u8303\\u56F4\\u4E4B\\u5916\\u3002\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF0C\\u5F53\\u60A8\\u5C1D\\u8BD5\\u5206\\u914D\\u7ED9\\u672A\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u65F6\\uFF0C\\u5C06\\u629B\\u51FA \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\"\\u3002\\u672A\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u548C\\u5168\\u5C40\\u53D8\\u91CF\\u4E00\\u6837\\u7CDF\\u7CD5\\u3002\\u4E0D\\u60DC\\u4E00\\u5207\\u4EE3\\u4EF7\\u907F\\u514D\\u5B83\\u4EEC\\uFF01\\u8981\\u68C0\\u67E5\\u5B83\\u4EEC\\uFF0C\\u8BF7\\u5C06\\u5176\\u7528\\u6CD5\\u5305\\u88C5\\u5728 \",(0,n.jsx)(e.code,{children:\"try\"}),\"/\",(0,n.jsx)(e.code,{children:\"catch\"}),\" \\u5757\\u4E2D\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function foo() {\n  x = 1; // \\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u629B\\u51FA ReferenceError\n}\n\nfoo();\nconsole.log(x); // 1 (\\u5982\\u679C\\u4E0D\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B)\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5BF9\\u672A\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" \\u8FD0\\u7B97\\u7B26\\u5C06\\u7ED9\\u51FA \",(0,n.jsx)(e.code,{children:\"'undefined'\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(typeof y === 'undefined'); // true\n`})}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"undefined\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E00\\u4E2A\",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u7684\\u53D8\\u91CF\\u662F\\u5DF2\\u58F0\\u660E\\u4F46\\u672A\\u8D4B\\u503C\\u7684\\u53D8\\u91CF\\u3002\\u5B83\\u7684\\u7C7B\\u578B\\u662F\",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u3002\\u5982\\u679C\\u4E00\\u4E2A\\u51FD\\u6570\\u6CA1\\u6709\\u8FD4\\u56DE\\u503C\\uFF0C\\u5E76\\u4E14\\u5B83\\u7684\\u7ED3\\u679C\\u88AB\\u5206\\u914D\\u7ED9\\u4E00\\u4E2A\\u53D8\\u91CF\\uFF0C\\u90A3\\u4E48\\u8BE5\\u53D8\\u91CF\\u4E5F\\u5C06\\u5177\\u6709\",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u503C\\u3002\\u8981\\u68C0\\u67E5\\u5B83\\uFF0C\\u8BF7\\u4F7F\\u7528\\u4E25\\u683C\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26\\uFF08\",(0,n.jsx)(e.code,{children:\"===\"}),\"\\uFF09\\u6216\",(0,n.jsx)(e.code,{children:\"typeof\"}),\"\\u8FDB\\u884C\\u6BD4\\u8F83\\uFF0C\\u8FD9\\u5C06\\u7ED9\\u51FA\",(0,n.jsx)(e.code,{children:\"'undefined'\"}),\"\\u5B57\\u7B26\\u4E32\\u3002\\u8BF7\\u6CE8\\u610F\\uFF0C\\u60A8\\u4E0D\\u5E94\\u8BE5\\u4F7F\\u7528\\u5BBD\\u677E\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26\\uFF08\",(0,n.jsx)(e.code,{children:\"==\"}),\"\\uFF09\\u8FDB\\u884C\\u68C0\\u67E5\\uFF0C\\u56E0\\u4E3A\\u5B83\\u5728\\u503C\\u4E3A\",(0,n.jsx)(e.code,{children:\"null\"}),\"\\u65F6\\u4E5F\\u4F1A\\u8FD4\\u56DE\",(0,n.jsx)(e.code,{children:\"true\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let foo;\nconsole.log(foo); // undefined\nconsole.log(foo === undefined); // true\nconsole.log(typeof foo === 'undefined'); // true\n\nconsole.log(foo == null); // true. \\u9519\\u8BEF\\uFF0C\\u4E0D\\u8981\\u4F7F\\u7528\\u5B83\\u6765\\u68C0\\u67E5\\u4E00\\u4E2A\\u503C\\u662F\\u5426\\u4E3A undefined!\n\nfunction bar() {} // \\u5982\\u679C\\u6CA1\\u6709\\u4EFB\\u4F55\\u8FD4\\u56DE\\uFF0C\\u5219\\u8FD4\\u56DE undefined\\u3002\nlet baz = bar();\nconsole.log(baz); // undefined\n`})}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"null\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"null\"}),\" \\u7684\\u53D8\\u91CF\\u5C06\\u88AB\\u663E\\u5F0F\\u5730\\u8D4B\\u503C\\u4E3A \",(0,n.jsx)(e.code,{children:\"null\"}),\" \\u503C\\u3002\\u5B83\\u8868\\u793A\\u6CA1\\u6709\\u503C\\uFF0C\\u5E76\\u4E14\\u4E0E \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" \\u7684\\u4E0D\\u540C\\u4E4B\\u5904\\u5728\\u4E8E\\u5B83\\u5DF2\\u88AB\\u663E\\u5F0F\\u8D4B\\u503C\\u3002\\u8981\\u68C0\\u67E5 \",(0,n.jsx)(e.code,{children:\"null\"}),\"\\uFF0C\\u53EA\\u9700\\u4F7F\\u7528\\u4E25\\u683C\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26\\u8FDB\\u884C\\u6BD4\\u8F83\\u3002\\u8BF7\\u6CE8\\u610F\\uFF0C\\u4E0E\\u4E0A\\u8FF0\\u7C7B\\u4F3C\\uFF0C\\u60A8\\u4E0D\\u5E94\\u8BE5\\u4F7F\\u7528\\u677E\\u6563\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26 (\",(0,n.jsx)(e.code,{children:\"==\"}),\") \\u8FDB\\u884C\\u68C0\\u67E5\\uFF0C\\u56E0\\u4E3A\\u5B83\\u5728\\u503C\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" \\u65F6\\u4E5F\\u4F1A\\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const foo = null;\nconsole.log(foo === null); // true\nconsole.log(typeof foo === 'object'); // true\n\nconsole.log(foo == undefined); // true. \\u9519\\u8BEF\\uFF0C\\u4E0D\\u8981\\u4F7F\\u7528\\u5B83\\u6765\\u68C0\\u67E5\\u4E00\\u4E2A\\u503C\\u662F\\u5426\\u4E3A null!\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u517B\\u6210\\u4E00\\u4E2A\\u597D\\u4E60\\u60EF\\uFF0C\\u6C38\\u8FDC\\u4E0D\\u8981\\u8BA9\\u4F60\\u7684\\u53D8\\u91CF\\u672A\\u58F0\\u660E\\u6216\\u672A\\u8D4B\\u503C\\u3002\\u5982\\u679C\\u60A8\\u4E0D\\u6253\\u7B97\\u4F7F\\u7528\\u5B83\\u4EEC\\uFF0C\\u5728\\u58F0\\u660E\\u540E\\u663E\\u5F0F\\u5730\\u5C06 \",(0,n.jsx)(e.code,{children:\"null\"}),\" \\u8D4B\\u503C\\u7ED9\\u5B83\\u4EEC\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u59CB\\u7EC8\\u5728\\u53D8\\u91CF\\u4F7F\\u7528\\u524D\\u663E\\u5F0F\\u58F0\\u660E\\u5B83\\u4EEC\\u4EE5\\u9632\\u6B62\\u9519\\u8BEF\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5728\\u60A8\\u7684\\u5DE5\\u4F5C\\u6D41\\u7A0B\\u4E2D\\u4F7F\\u7528\\u4E00\\u4E9B\\u9759\\u6001\\u5206\\u6790\\u5DE5\\u5177\\uFF08\\u4F8B\\u5982 \",(0,n.jsx)(e.a,{href:\"https://eslint.org/\",children:\"ESLint\"}),\"\\u3001TypeScript \\u7F16\\u8BD1\\u5668\\uFF09\\uFF0C\\u5C06\\u542F\\u7528\\u60A8\\u672A\\u5F15\\u7528\\u672A\\u58F0\\u660E\\u53D8\\u91CF\\u7684\\u68C0\\u67E5\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5B9E\\u8DF5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 GreatFrontEnd \\u4E0A\\u7EC3\\u4E60\\u5B9E\\u73B0 \",(0,n.jsxs)(e.a,{href:\"https://www.greatfrontend.com/questions/javascript/type-utilities?fpr=yangshun\",children:[\"\\u68C0\\u67E5 \",(0,n.jsx)(e.code,{children:\"null\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" \\u7684\\u7C7B\\u578B\\u5B9E\\u7528\\u7A0B\\u5E8F\"]}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/null\",children:\"MDN Web \\u6587\\u6863\\uFF1Anull\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined\",children:\"MDN Web \\u6587\\u6863\\uFF1Aundefined\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError\",children:\"MDN Web \\u6587\\u6863\\uFF1AReferenceError\"})}),`\n`]})]})}function x(d={}){let{wrapper:e}=d.components||{};return e?(0,n.jsx)(e,Object.assign({},d,{children:(0,n.jsx)(u,d)})):u(d)}var N=x;return y(R);})();\n;return Component;"
+  "solution": "var Component=(()=>{var f=Object.create;var c=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var m=(d,e)=>()=>(e||d((e={exports:{}}).exports,e),e.exports),y=(d,e)=>{for(var l in e)c(d,l,{get:e[l],enumerable:!0})},o=(d,e,l,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!b.call(d,r)&&r!==l&&c(d,r,{get:()=>e[r],enumerable:!(i=s(e,r))||i.enumerable});return d};var j=(d,e,l)=>(l=d!=null?f(g(d)):{},o(e||!d||!d.__esModule?c(l,\"default\",{value:d,enumerable:!0}):l,d)),v=d=>o(c({},\"__esModule\",{value:!0}),d);var t=m((_,h)=>{h.exports=_jsx_runtime});var N={};y(N,{default:()=>a,frontmatter:()=>x});var n=j(t()),x={title:\"JavaScript \\u53D8\\u91CF `null`\\u3001`undefined` \\u548C\\u672A\\u58F0\\u660E\\u7684\\u533A\\u522B\\u662F\\u4EC0\\u4E48\\uFF1F\",subtitle:\"\\u5982\\u4F55\\u68C0\\u67E5\\u8FD9\\u4E9B\\u72B6\\u6001\\uFF1F\"};function u(d){let e={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...d.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\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:\"\\u7279\\u6027\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"null\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"undefined\"})}),(0,n.jsx)(e.th,{children:\"\\u672A\\u58F0\\u660E\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u542B\\u4E49\"}),(0,n.jsx)(e.td,{children:\"\\u7531\\u5F00\\u53D1\\u4EBA\\u5458\\u663E\\u5F0F\\u8BBE\\u7F6E\\uFF0C\\u8868\\u793A\\u53D8\\u91CF\\u6CA1\\u6709\\u503C\"}),(0,n.jsx)(e.td,{children:\"\\u53D8\\u91CF\\u5DF2\\u58F0\\u660E\\u4F46\\u672A\\u8D4B\\u503C\"}),(0,n.jsx)(e.td,{children:\"\\u53D8\\u91CF\\u6839\\u672C\\u672A\\u58F0\\u660E\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsxs)(e.td,{children:[\"\\u7C7B\\u578B\\uFF08\\u901A\\u8FC7 \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" \\u8FD0\\u7B97\\u7B26\\uFF09\"]}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"'object'\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"'undefined'\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"'undefined'\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"\\u7B49\\u5F0F\\u6BD4\\u8F83\"}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"null == undefined\"}),\" \\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"})]}),(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:\"undefined == null\"}),\" \\u4E3A \",(0,n.jsx)(e.code,{children:\"true\"})]}),(0,n.jsxs)(e.td,{children:[\"\\u629B\\u51FA \",(0,n.jsx)(e.code,{children:\"ReferenceError\"})]})]})]})]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u672A\\u58F0\\u660E\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"\\u672A\\u58F0\\u660E\"}),\" \\u53D8\\u91CF\\u662F\\u5728\\u60A8\\u5C06\\u503C\\u5206\\u914D\\u7ED9\\u5148\\u524D\\u672A\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"var\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"let\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"const\"}),\" \\u521B\\u5EFA\\u7684\\u6807\\u8BC6\\u7B26\\u65F6\\u521B\\u5EFA\\u7684\\u3002\\u672A\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u5C06\\u5728\\u5168\\u5C40\\u8303\\u56F4\\u5185\\u5B9A\\u4E49\\uFF0C\\u5728\\u5F53\\u524D\\u8303\\u56F4\\u4E4B\\u5916\\u3002\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\uFF0C\\u5F53\\u60A8\\u5C1D\\u8BD5\\u5206\\u914D\\u7ED9\\u672A\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u65F6\\uFF0C\\u5C06\\u629B\\u51FA \",(0,n.jsx)(e.code,{children:\"ReferenceError\"}),\"\\u3002\\u672A\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u548C\\u5168\\u5C40\\u53D8\\u91CF\\u4E00\\u6837\\u7CDF\\u7CD5\\u3002\\u4E0D\\u60DC\\u4E00\\u5207\\u4EE3\\u4EF7\\u907F\\u514D\\u5B83\\u4EEC\\uFF01\\u8981\\u68C0\\u67E5\\u5B83\\u4EEC\\uFF0C\\u8BF7\\u5C06\\u5176\\u7528\\u6CD5\\u5305\\u88C5\\u5728 \",(0,n.jsx)(e.code,{children:\"try\"}),\"/\",(0,n.jsx)(e.code,{children:\"catch\"}),\" \\u5757\\u4E2D\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function foo() {\n  x = 1; // \\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u629B\\u51FA ReferenceError\n}\n\nfoo();\nconsole.log(x); // 1 (\\u5982\\u679C\\u4E0D\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B)\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5BF9\\u672A\\u58F0\\u660E\\u7684\\u53D8\\u91CF\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"typeof\"}),\" \\u8FD0\\u7B97\\u7B26\\u5C06\\u7ED9\\u51FA \",(0,n.jsx)(e.code,{children:\"'undefined'\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(typeof y === 'undefined'); // true\n`})}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"undefined\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E00\\u4E2A\",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u7684\\u53D8\\u91CF\\u662F\\u5DF2\\u58F0\\u660E\\u4F46\\u672A\\u8D4B\\u503C\\u7684\\u53D8\\u91CF\\u3002\\u5B83\\u7684\\u7C7B\\u578B\\u662F\",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u3002\\u5982\\u679C\\u4E00\\u4E2A\\u51FD\\u6570\\u6CA1\\u6709\\u8FD4\\u56DE\\u503C\\uFF0C\\u5E76\\u4E14\\u5B83\\u7684\\u7ED3\\u679C\\u88AB\\u5206\\u914D\\u7ED9\\u4E00\\u4E2A\\u53D8\\u91CF\\uFF0C\\u90A3\\u4E48\\u8BE5\\u53D8\\u91CF\\u4E5F\\u5C06\\u5177\\u6709\",(0,n.jsx)(e.code,{children:\"undefined\"}),\"\\u503C\\u3002\\u8981\\u68C0\\u67E5\\u5B83\\uFF0C\\u8BF7\\u4F7F\\u7528\\u4E25\\u683C\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26\\uFF08\",(0,n.jsx)(e.code,{children:\"===\"}),\"\\uFF09\\u6216\",(0,n.jsx)(e.code,{children:\"typeof\"}),\"\\u8FDB\\u884C\\u6BD4\\u8F83\\uFF0C\\u8FD9\\u5C06\\u7ED9\\u51FA\",(0,n.jsx)(e.code,{children:\"'undefined'\"}),\"\\u5B57\\u7B26\\u4E32\\u3002\\u8BF7\\u6CE8\\u610F\\uFF0C\\u60A8\\u4E0D\\u5E94\\u8BE5\\u4F7F\\u7528\\u5BBD\\u677E\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26\\uFF08\",(0,n.jsx)(e.code,{children:\"==\"}),\"\\uFF09\\u8FDB\\u884C\\u68C0\\u67E5\\uFF0C\\u56E0\\u4E3A\\u5B83\\u5728\\u503C\\u4E3A\",(0,n.jsx)(e.code,{children:\"null\"}),\"\\u65F6\\u4E5F\\u4F1A\\u8FD4\\u56DE\",(0,n.jsx)(e.code,{children:\"true\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`let foo;\nconsole.log(foo); // undefined\nconsole.log(foo === undefined); // true\nconsole.log(typeof foo === 'undefined'); // true\n\nconsole.log(foo == null); // true. \\u9519\\u8BEF\\uFF0C\\u4E0D\\u8981\\u4F7F\\u7528\\u5B83\\u6765\\u68C0\\u67E5\\u4E00\\u4E2A\\u503C\\u662F\\u5426\\u4E3A undefined!\n\nfunction bar() {} // \\u5982\\u679C\\u6CA1\\u6709\\u4EFB\\u4F55\\u8FD4\\u56DE\\uFF0C\\u5219\\u8FD4\\u56DE undefined\\u3002\nlet baz = bar();\nconsole.log(baz); // undefined\n`})}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"null\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E00\\u4E2A \",(0,n.jsx)(e.code,{children:\"null\"}),\" \\u7684\\u53D8\\u91CF\\u5C06\\u88AB\\u663E\\u5F0F\\u5730\\u8D4B\\u503C\\u4E3A \",(0,n.jsx)(e.code,{children:\"null\"}),\" \\u503C\\u3002\\u5B83\\u8868\\u793A\\u6CA1\\u6709\\u503C\\uFF0C\\u5E76\\u4E14\\u4E0E \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" \\u7684\\u4E0D\\u540C\\u4E4B\\u5904\\u5728\\u4E8E\\u5B83\\u5DF2\\u88AB\\u663E\\u5F0F\\u8D4B\\u503C\\u3002\\u8981\\u68C0\\u67E5 \",(0,n.jsx)(e.code,{children:\"null\"}),\"\\uFF0C\\u53EA\\u9700\\u4F7F\\u7528\\u4E25\\u683C\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26\\u8FDB\\u884C\\u6BD4\\u8F83\\u3002\\u8BF7\\u6CE8\\u610F\\uFF0C\\u4E0E\\u4E0A\\u8FF0\\u7C7B\\u4F3C\\uFF0C\\u60A8\\u4E0D\\u5E94\\u8BE5\\u4F7F\\u7528\\u677E\\u6563\\u76F8\\u7B49\\u8FD0\\u7B97\\u7B26 (\",(0,n.jsx)(e.code,{children:\"==\"}),\") \\u8FDB\\u884C\\u68C0\\u67E5\\uFF0C\\u56E0\\u4E3A\\u5B83\\u5728\\u503C\\u4E3A \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" \\u65F6\\u4E5F\\u4F1A\\u8FD4\\u56DE \",(0,n.jsx)(e.code,{children:\"true\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const foo = null;\nconsole.log(foo === null); // true\nconsole.log(typeof foo === 'object'); // true\n\nconsole.log(foo == undefined); // true. \\u9519\\u8BEF\\uFF0C\\u4E0D\\u8981\\u4F7F\\u7528\\u5B83\\u6765\\u68C0\\u67E5\\u4E00\\u4E2A\\u503C\\u662F\\u5426\\u4E3A null!\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u6CE8\\u610F\\u4E8B\\u9879\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u517B\\u6210\\u4E00\\u4E2A\\u597D\\u4E60\\u60EF\\uFF0C\\u6C38\\u8FDC\\u4E0D\\u8981\\u8BA9\\u4F60\\u7684\\u53D8\\u91CF\\u672A\\u58F0\\u660E\\u6216\\u672A\\u8D4B\\u503C\\u3002\\u5982\\u679C\\u60A8\\u4E0D\\u6253\\u7B97\\u4F7F\\u7528\\u5B83\\u4EEC\\uFF0C\\u5728\\u58F0\\u660E\\u540E\\u663E\\u5F0F\\u5730\\u5C06 \",(0,n.jsx)(e.code,{children:\"null\"}),\" \\u8D4B\\u503C\\u7ED9\\u5B83\\u4EEC\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u59CB\\u7EC8\\u5728\\u53D8\\u91CF\\u4F7F\\u7528\\u524D\\u663E\\u5F0F\\u58F0\\u660E\\u5B83\\u4EEC\\u4EE5\\u9632\\u6B62\\u9519\\u8BEF\\u3002\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5728\\u60A8\\u7684\\u5DE5\\u4F5C\\u6D41\\u7A0B\\u4E2D\\u4F7F\\u7528\\u4E00\\u4E9B\\u9759\\u6001\\u5206\\u6790\\u5DE5\\u5177\\uFF08\\u4F8B\\u5982 \",(0,n.jsx)(e.a,{href:\"https://eslint.org/\",children:\"ESLint\"}),\"\\u3001TypeScript \\u7F16\\u8BD1\\u5668\\uFF09\\uFF0C\\u5C06\\u542F\\u7528\\u60A8\\u672A\\u5F15\\u7528\\u672A\\u58F0\\u660E\\u53D8\\u91CF\\u7684\\u68C0\\u67E5\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5B9E\\u8DF5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728 GreatFrontEnd \\u4E0A\\u7EC3\\u4E60\\u5B9E\\u73B0 \",(0,n.jsxs)(e.a,{href:\"https://www.greatfrontend.com/questions/javascript/type-utilities?fpr=yangshun\",children:[\"\\u68C0\\u67E5 \",(0,n.jsx)(e.code,{children:\"null\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"undefined\"}),\" \\u7684\\u7C7B\\u578B\\u5B9E\\u7528\\u7A0B\\u5E8F\"]}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/null\",children:\"MDN Web \\u6587\\u6863\\uFF1Anull\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined\",children:\"MDN Web \\u6587\\u6863\\uFF1Aundefined\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError\",children:\"MDN Web \\u6587\\u6863\\uFF1AReferenceError\"})}),`\n`]})]})}function a(d={}){let{wrapper:e}=d.components||{};return e?(0,n.jsx)(e,{...d,children:(0,n.jsx)(u,{...d})}):u(d)}return v(N);})();\n;return Component;"
 }
\ No newline at end of file
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 7efe2bf9c..9454395af 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/whats-the-difference-between-an-attribute-and-a-property/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var i in e)l(n,i,{get:e[i],enumerable:!0})},c=(n,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!g.call(n,r)&&r!==i&&l(n,r,{get:()=>e[r],enumerable:!(a=u(e,r))||a.enumerable});return n};var f=(n,e,i)=>(i=n!=null?d(m(n)):{},c(e||!n||!n.__esModule?l(i,\"default\",{value:n,enumerable:!0}):i,n)),y=n=>c(l({},\"__esModule\",{value:!0}),n);var o=v((j,h)=>{h.exports=_jsx_runtime});var D={};b(D,{default:()=>E,frontmatter:()=>A});var t=f(o()),A={title:`What's the difference between an \"attribute\" and a \"property\" in the DOM?`};function s(n){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Attributes are defined in the HTML and provide initial values for properties. Properties are part of the DOM and represent the current state of an element. For example, the \",(0,t.jsx)(e.code,{children:\"value\"}),\" attribute of an \",(0,t.jsx)(e.code,{children:\"<input>\"}),\" element sets its initial value, while the \",(0,t.jsx)(e.code,{children:\"value\"}),\" property reflects the current value as the user interacts with it.\"]}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:'Difference between an \"attribute\" and a \"property\" in the DOM'}),`\n`,(0,t.jsx)(e.h3,{children:\"Attributes\"}),`\n`,(0,t.jsx)(e.p,{children:\"Attributes are defined in the HTML markup and provide initial values for elements. They are static and do not change once the page is loaded unless explicitly modified using JavaScript.\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-html\",children:`<input type=\"text\" value=\"initial value\" />\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"In this example, \",(0,t.jsx)(e.code,{children:'value=\"initial value\"'}),\" is an attribute.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Properties\"}),`\n`,(0,t.jsx)(e.p,{children:\"Properties are part of the DOM and represent the current state of an element. They are dynamic and can change as the user interacts with the page or through JavaScript.\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`const inputElement = document.querySelector('input');\nconsole.log(inputElement.value); // Logs the current value of the input element\ninputElement.value = 'new value'; // Changes the current value of the input element\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"In this example, \",(0,t.jsx)(e.code,{children:\"value\"}),\" is a property of the \",(0,t.jsx)(e.code,{children:\"inputElement\"}),\" object.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Key differences\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Initialization\"}),\": Attributes initialize DOM properties.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"State\"}),\": Attributes are static, while properties are dynamic.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Access\"}),\": Attributes can be accessed using \",(0,t.jsx)(e.code,{children:\"getAttribute\"}),\" and \",(0,t.jsx)(e.code,{children:\"setAttribute\"}),\" methods, while properties can be accessed directly on the DOM object.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-html\",children:`<input id=\"myInput\" type=\"text\" value=\"initial value\" />\n`})}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`const inputElement = document.getElementById('myInput');\n\n// Accessing attribute\nconsole.log(inputElement.getAttribute('value')); // \"initial value\"\n\n// Accessing property\nconsole.log(inputElement.value); // \"initial value\"\n\n// Changing property\ninputElement.value = 'new value';\nconsole.log(inputElement.value); // \"new value\"\nconsole.log(inputElement.getAttribute('value')); // \"initial value\"\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"In this example, changing the \",(0,t.jsx)(e.code,{children:\"value\"}),\" property does not affect the \",(0,t.jsx)(e.code,{children:\"value\"}),\" attribute.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute\",children:\"MDN Web Docs: Element.getAttribute()\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute\",children:\"MDN Web Docs: Element.setAttribute()\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#html_attributes_vs_dom_properties\",children:\"MDN Web Docs: HTML attributes vs. DOM properties\"})}),`\n`]})]})}function x(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(s,n)})):s(n)}var E=x;return y(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var b=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var i in e)l(n,i,{get:e[i],enumerable:!0})},c=(n,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!v.call(n,r)&&r!==i&&l(n,r,{get:()=>e[r],enumerable:!(a=p(e,r))||a.enumerable});return n};var y=(n,e,i)=>(i=n!=null?u(g(n)):{},c(e||!n||!n.__esModule?l(i,\"default\",{value:n,enumerable:!0}):i,n)),A=n=>c(l({},\"__esModule\",{value:!0}),n);var o=b((M,h)=>{h.exports=_jsx_runtime});var E={};f(E,{default:()=>d,frontmatter:()=>x});var t=y(o()),x={title:`What's the difference between an \"attribute\" and a \"property\" in the DOM?`};function s(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Attributes are defined in the HTML and provide initial values for properties. Properties are part of the DOM and represent the current state of an element. For example, the \",(0,t.jsx)(e.code,{children:\"value\"}),\" attribute of an \",(0,t.jsx)(e.code,{children:\"<input>\"}),\" element sets its initial value, while the \",(0,t.jsx)(e.code,{children:\"value\"}),\" property reflects the current value as the user interacts with it.\"]}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:'Difference between an \"attribute\" and a \"property\" in the DOM'}),`\n`,(0,t.jsx)(e.h3,{children:\"Attributes\"}),`\n`,(0,t.jsx)(e.p,{children:\"Attributes are defined in the HTML markup and provide initial values for elements. They are static and do not change once the page is loaded unless explicitly modified using JavaScript.\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-html\",children:`<input type=\"text\" value=\"initial value\" />\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"In this example, \",(0,t.jsx)(e.code,{children:'value=\"initial value\"'}),\" is an attribute.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Properties\"}),`\n`,(0,t.jsx)(e.p,{children:\"Properties are part of the DOM and represent the current state of an element. They are dynamic and can change as the user interacts with the page or through JavaScript.\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`const inputElement = document.querySelector('input');\nconsole.log(inputElement.value); // Logs the current value of the input element\ninputElement.value = 'new value'; // Changes the current value of the input element\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"In this example, \",(0,t.jsx)(e.code,{children:\"value\"}),\" is a property of the \",(0,t.jsx)(e.code,{children:\"inputElement\"}),\" object.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Key differences\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Initialization\"}),\": Attributes initialize DOM properties.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"State\"}),\": Attributes are static, while properties are dynamic.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Access\"}),\": Attributes can be accessed using \",(0,t.jsx)(e.code,{children:\"getAttribute\"}),\" and \",(0,t.jsx)(e.code,{children:\"setAttribute\"}),\" methods, while properties can be accessed directly on the DOM object.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-html\",children:`<input id=\"myInput\" type=\"text\" value=\"initial value\" />\n`})}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`const inputElement = document.getElementById('myInput');\n\n// Accessing attribute\nconsole.log(inputElement.getAttribute('value')); // \"initial value\"\n\n// Accessing property\nconsole.log(inputElement.value); // \"initial value\"\n\n// Changing property\ninputElement.value = 'new value';\nconsole.log(inputElement.value); // \"new value\"\nconsole.log(inputElement.getAttribute('value')); // \"initial value\"\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"In this example, changing the \",(0,t.jsx)(e.code,{children:\"value\"}),\" property does not affect the \",(0,t.jsx)(e.code,{children:\"value\"}),\" attribute.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute\",children:\"MDN Web Docs: Element.getAttribute()\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute\",children:\"MDN Web Docs: Element.setAttribute()\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#html_attributes_vs_dom_properties\",children:\"MDN Web Docs: HTML attributes vs. DOM properties\"})}),`\n`]})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(s,{...n})}):s(n)}return A(E);})();\n;return Component;"
 }
\ No newline at end of file
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 d8c15874a..2f8e292a3 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/whats-the-difference-between-an-attribute-and-a-property/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),h=(n,e)=>{for(var o in e)r(n,o,{get:e[o],enumerable:!0})},i=(n,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!x.call(n,a)&&a!==o&&r(n,a,{get:()=>e[a],enumerable:!(s=p(e,a))||s.enumerable});return n};var j=(n,e,o)=>(o=n!=null?u(g(n)):{},i(e||!n||!n.__esModule?r(o,\"default\",{value:n,enumerable:!0}):o,n)),M=n=>i(r({},\"__esModule\",{value:!0}),n);var c=f((A,l)=>{l.exports=_jsx_runtime});var v={};h(v,{default:()=>b,frontmatter:()=>O});var t=j(c()),O={title:'Qual \\xE9 a diferen\\xE7a entre um \"atributo\" e uma \"propriedade\"?'};function d(n){let e=Object.assign({p:\"p\",code:\"code\",pre:\"pre\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[\"Atributos s\\xE3o definidos na marca\\xE7\\xE3o HTML, mas as propriedades s\\xE3o definidas no DOM. Para ilustrar a diferen\\xE7a, imagine que temos esse campo de texto em nosso HTML: \",(0,t.jsx)(e.code,{children:'<input type=\"text\" value=\"Hello\">'}),\".\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\nconsole.log(input.getAttribute('value')); // Ol\\xE1\nconsole.log(input.value); // Ol\\xE1\n`})}),`\n`,(0,t.jsx)(e.p,{children:'Mas depois de alterar o valor do campo de texto adicionando \"Mundo!\" a ele, isso se torna:'}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`console.log(input.getAttribute('value')); // Ol\\xE1\nconsole.log(input.value); // Ol\\xE1 Mundo!\n`})})]})}function _(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(d,n)})):d(n)}var b=_;return M(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var h=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),M=(n,e)=>{for(var t in e)r(n,t,{get:e[t],enumerable:!0})},i=(n,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of g(e))!f.call(n,a)&&a!==t&&r(n,a,{get:()=>e[a],enumerable:!(s=m(e,a))||s.enumerable});return n};var j=(n,e,t)=>(t=n!=null?p(x(n)):{},i(e||!n||!n.__esModule?r(t,\"default\",{value:n,enumerable:!0}):t,n)),_=n=>i(r({},\"__esModule\",{value:!0}),n);var c=h((y,l)=>{l.exports=_jsx_runtime});var O={};M(O,{default:()=>u,frontmatter:()=>v});var o=j(c()),v={title:'Qual \\xE9 a diferen\\xE7a entre um \"atributo\" e uma \"propriedade\"?'};function d(n){let e={code:\"code\",p:\"p\",pre:\"pre\",...n.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Atributos s\\xE3o definidos na marca\\xE7\\xE3o HTML, mas as propriedades s\\xE3o definidas no DOM. Para ilustrar a diferen\\xE7a, imagine que temos esse campo de texto em nosso HTML: \",(0,o.jsx)(e.code,{children:'<input type=\"text\" value=\"Hello\">'}),\".\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`const input = document.querySelector('input');\nconsole.log(input.getAttribute('value')); // Ol\\xE1\nconsole.log(input.value); // Ol\\xE1\n`})}),`\n`,(0,o.jsx)(e.p,{children:'Mas depois de alterar o valor do campo de texto adicionando \"Mundo!\" a ele, isso se torna:'}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`console.log(input.getAttribute('value')); // Ol\\xE1\nconsole.log(input.value); // Ol\\xE1 Mundo!\n`})})]})}function u(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(d,{...n})}):d(n)}return _(O);})();\n;return Component;"
 }
\ No newline at end of file
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 456a6499b..4d94a11c3 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/whats-the-difference-between-an-attribute-and-a-property/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var o=Object.create;var r=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var l in e)r(t,l,{get:e[l],enumerable:!0})},a=(t,e,l,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!v.call(t,i)&&i!==l&&r(t,i,{get:()=>e[i],enumerable:!(c=s(e,i))||c.enumerable});return t};var A=(t,e,l)=>(l=t!=null?o(m(t)):{},a(e||!t||!t.__esModule?r(l,\"default\",{value:t,enumerable:!0}):l,t)),M=t=>a(r({},\"__esModule\",{value:!0}),t);var u=g((N,h)=>{h.exports=_jsx_runtime});var y={};b(y,{default:()=>x,frontmatter:()=>E});var n=A(u()),E={title:\"DOM \\u4E2D\\u201Cattribute\\u201D\\u548C\\u201Cproperty\\u201D\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",pre:\"pre\",ul:\"ul\",li:\"li\",strong:\"strong\",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:[\"Attributes \\u5728 HTML \\u4E2D\\u5B9A\\u4E49\\uFF0C\\u4E3A\\u5C5E\\u6027\\u63D0\\u4F9B\\u521D\\u59CB\\u503C\\u3002\\u5C5E\\u6027\\u662F DOM \\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u8868\\u793A\\u5143\\u7D20\\u7684\\u5F53\\u524D\\u72B6\\u6001\\u3002\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"<input>\"}),\" \\u5143\\u7D20\\u7684 \",(0,n.jsx)(e.code,{children:\"value\"}),\" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u5176\\u521D\\u59CB\\u503C\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"value\"}),\" \\u5C5E\\u6027\\u53CD\\u6620\\u7528\\u6237\\u4E0E\\u4E4B\\u4EA4\\u4E92\\u65F6\\u7684\\u5F53\\u524D\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"DOM \\u4E2D\\u201Cattribute\\u201D\\u548C\\u201Cproperty\\u201D\\u6709\\u4EC0\\u4E48\\u533A\\u522B\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Attributes\"}),`\n`,(0,n.jsx)(e.p,{children:\"Attributes \\u5728 HTML \\u6807\\u8BB0\\u4E2D\\u5B9A\\u4E49\\uFF0C\\u4E3A\\u5143\\u7D20\\u63D0\\u4F9B\\u521D\\u59CB\\u503C\\u3002\\u5B83\\u4EEC\\u662F\\u9759\\u6001\\u7684\\uFF0C\\u4E00\\u65E6\\u9875\\u9762\\u52A0\\u8F7D\\u540E\\u5C31\\u4E0D\\u4F1A\\u6539\\u53D8\\uFF0C\\u9664\\u975E\\u4F7F\\u7528 JavaScript \\u663E\\u5F0F\\u4FEE\\u6539\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<input type=\"text\" value=\"initial value\" />\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:'value=\"initial value\"'}),\" \\u662F\\u4E00\\u4E2A attribute\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Properties\"}),`\n`,(0,n.jsx)(e.p,{children:\"Properties \\u662F DOM \\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u8868\\u793A\\u5143\\u7D20\\u7684\\u5F53\\u524D\\u72B6\\u6001\\u3002\\u5B83\\u4EEC\\u662F\\u52A8\\u6001\\u7684\\uFF0C\\u53EF\\u4EE5\\u968F\\u7740\\u7528\\u6237\\u4E0E\\u9875\\u9762\\u4EA4\\u4E92\\u6216\\u901A\\u8FC7 JavaScript \\u800C\\u6539\\u53D8\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const inputElement = document.querySelector('input');\nconsole.log(inputElement.value); // \\u8BB0\\u5F55\\u8F93\\u5165\\u5143\\u7D20\\u7684\\u5F53\\u524D\\u503C\ninputElement.value = 'new value'; // \\u66F4\\u6539\\u8F93\\u5165\\u5143\\u7D20\\u7684\\u5F53\\u524D\\u503C\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"value\"}),\" \\u662F \",(0,n.jsx)(e.code,{children:\"inputElement\"}),\" \\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5173\\u952E\\u533A\\u522B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u521D\\u59CB\\u5316\"}),\"\\uFF1AAttributes \\u521D\\u59CB\\u5316 DOM \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u72B6\\u6001\"}),\"\\uFF1AAttributes \\u662F\\u9759\\u6001\\u7684\\uFF0C\\u800C\\u5C5E\\u6027\\u662F\\u52A8\\u6001\\u7684\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8BBF\\u95EE\"}),\"\\uFF1A\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"getAttribute\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"setAttribute\"}),\" \\u65B9\\u6CD5\\u8BBF\\u95EE Attributes\\uFF0C\\u800C\\u53EF\\u4EE5\\u76F4\\u63A5\\u5728 DOM \\u5BF9\\u8C61\\u4E0A\\u8BBF\\u95EE\\u5C5E\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<input id=\"myInput\" type=\"text\" value=\"initial value\" />\n`})}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const inputElement = document.getElementById('myInput');\n\n// \\u8BBF\\u95EE attribute\nconsole.log(inputElement.getAttribute('value')); // \"initial value\"\n\n// \\u8BBF\\u95EE property\nconsole.log(inputElement.value); // \"initial value\"\n\n// \\u66F4\\u6539 property\ninputElement.value = 'new value';\nconsole.log(inputElement.value); // \"new value\"\nconsole.log(inputElement.getAttribute('value')); // \"initial value\"\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u66F4\\u6539 \",(0,n.jsx)(e.code,{children:\"value\"}),\" \\u5C5E\\u6027\\u4E0D\\u4F1A\\u5F71\\u54CD \",(0,n.jsx)(e.code,{children:\"value\"}),\" attribute\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getAttribute\",children:\"MDN Web \\u6587\\u6863\\uFF1AElement.getAttribute()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Element/setAttribute\",children:\"MDN Web \\u6587\\u6863\\uFF1AElement.setAttribute()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes#html_attributes_vs_dom_properties\",children:\"MDN Web \\u6587\\u6863\\uFF1AHTML \\u5C5E\\u6027\\u4E0E DOM \\u5C5E\\u6027\"})}),`\n`]})]})}function D(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var x=D;return M(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),A=(t,e)=>{for(var l in e)i(t,l,{get:e[l],enumerable:!0})},h=(t,e,l,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!g.call(t,r)&&r!==l&&i(t,r,{get:()=>e[r],enumerable:!(c=s(e,r))||c.enumerable});return t};var M=(t,e,l)=>(l=t!=null?p(v(t)):{},h(e||!t||!t.__esModule?i(l,\"default\",{value:t,enumerable:!0}):l,t)),E=t=>h(i({},\"__esModule\",{value:!0}),t);var a=b((_,u)=>{u.exports=_jsx_runtime});var x={};A(x,{default:()=>o,frontmatter:()=>D});var n=M(a()),D={title:\"DOM \\u4E2D\\u201Cattribute\\u201D\\u548C\\u201Cproperty\\u201D\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Attributes \\u5728 HTML \\u4E2D\\u5B9A\\u4E49\\uFF0C\\u4E3A\\u5C5E\\u6027\\u63D0\\u4F9B\\u521D\\u59CB\\u503C\\u3002\\u5C5E\\u6027\\u662F DOM \\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u8868\\u793A\\u5143\\u7D20\\u7684\\u5F53\\u524D\\u72B6\\u6001\\u3002\\u4F8B\\u5982\\uFF0C\",(0,n.jsx)(e.code,{children:\"<input>\"}),\" \\u5143\\u7D20\\u7684 \",(0,n.jsx)(e.code,{children:\"value\"}),\" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u5176\\u521D\\u59CB\\u503C\\uFF0C\\u800C \",(0,n.jsx)(e.code,{children:\"value\"}),\" \\u5C5E\\u6027\\u53CD\\u6620\\u7528\\u6237\\u4E0E\\u4E4B\\u4EA4\\u4E92\\u65F6\\u7684\\u5F53\\u524D\\u503C\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"DOM \\u4E2D\\u201Cattribute\\u201D\\u548C\\u201Cproperty\\u201D\\u6709\\u4EC0\\u4E48\\u533A\\u522B\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Attributes\"}),`\n`,(0,n.jsx)(e.p,{children:\"Attributes \\u5728 HTML \\u6807\\u8BB0\\u4E2D\\u5B9A\\u4E49\\uFF0C\\u4E3A\\u5143\\u7D20\\u63D0\\u4F9B\\u521D\\u59CB\\u503C\\u3002\\u5B83\\u4EEC\\u662F\\u9759\\u6001\\u7684\\uFF0C\\u4E00\\u65E6\\u9875\\u9762\\u52A0\\u8F7D\\u540E\\u5C31\\u4E0D\\u4F1A\\u6539\\u53D8\\uFF0C\\u9664\\u975E\\u4F7F\\u7528 JavaScript \\u663E\\u5F0F\\u4FEE\\u6539\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<input type=\"text\" value=\"initial value\" />\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:'value=\"initial value\"'}),\" \\u662F\\u4E00\\u4E2A attribute\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Properties\"}),`\n`,(0,n.jsx)(e.p,{children:\"Properties \\u662F DOM \\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u8868\\u793A\\u5143\\u7D20\\u7684\\u5F53\\u524D\\u72B6\\u6001\\u3002\\u5B83\\u4EEC\\u662F\\u52A8\\u6001\\u7684\\uFF0C\\u53EF\\u4EE5\\u968F\\u7740\\u7528\\u6237\\u4E0E\\u9875\\u9762\\u4EA4\\u4E92\\u6216\\u901A\\u8FC7 JavaScript \\u800C\\u6539\\u53D8\\u3002\"}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const inputElement = document.querySelector('input');\nconsole.log(inputElement.value); // \\u8BB0\\u5F55\\u8F93\\u5165\\u5143\\u7D20\\u7684\\u5F53\\u524D\\u503C\ninputElement.value = 'new value'; // \\u66F4\\u6539\\u8F93\\u5165\\u5143\\u7D20\\u7684\\u5F53\\u524D\\u503C\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,n.jsx)(e.code,{children:\"value\"}),\" \\u662F \",(0,n.jsx)(e.code,{children:\"inputElement\"}),\" \\u5BF9\\u8C61\\u7684\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5173\\u952E\\u533A\\u522B\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u521D\\u59CB\\u5316\"}),\"\\uFF1AAttributes \\u521D\\u59CB\\u5316 DOM \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u72B6\\u6001\"}),\"\\uFF1AAttributes \\u662F\\u9759\\u6001\\u7684\\uFF0C\\u800C\\u5C5E\\u6027\\u662F\\u52A8\\u6001\\u7684\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8BBF\\u95EE\"}),\"\\uFF1A\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"getAttribute\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"setAttribute\"}),\" \\u65B9\\u6CD5\\u8BBF\\u95EE Attributes\\uFF0C\\u800C\\u53EF\\u4EE5\\u76F4\\u63A5\\u5728 DOM \\u5BF9\\u8C61\\u4E0A\\u8BBF\\u95EE\\u5C5E\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h4,{children:\"\\u793A\\u4F8B\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<input id=\"myInput\" type=\"text\" value=\"initial value\" />\n`})}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const inputElement = document.getElementById('myInput');\n\n// \\u8BBF\\u95EE attribute\nconsole.log(inputElement.getAttribute('value')); // \"initial value\"\n\n// \\u8BBF\\u95EE property\nconsole.log(inputElement.value); // \"initial value\"\n\n// \\u66F4\\u6539 property\ninputElement.value = 'new value';\nconsole.log(inputElement.value); // \"new value\"\nconsole.log(inputElement.getAttribute('value')); // \"initial value\"\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\\u66F4\\u6539 \",(0,n.jsx)(e.code,{children:\"value\"}),\" \\u5C5E\\u6027\\u4E0D\\u4F1A\\u5F71\\u54CD \",(0,n.jsx)(e.code,{children:\"value\"}),\" attribute\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getAttribute\",children:\"MDN Web \\u6587\\u6863\\uFF1AElement.getAttribute()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/API/Element/setAttribute\",children:\"MDN Web \\u6587\\u6863\\uFF1AElement.setAttribute()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes#html_attributes_vs_dom_properties\",children:\"MDN Web \\u6587\\u6863\\uFF1AHTML \\u5C5E\\u6027\\u4E0E DOM \\u5C5E\\u6027\"})}),`\n`]})]})}function o(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return E(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-call-and-apply/en-US.json b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-call-and-apply/en-US.json
index 1cfec9806..9e6bf3fe8 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-call-and-apply/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-call-and-apply/en-US.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/whats-the-difference-between-call-and-apply/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),f=(l,e)=>{for(var r in e)c(l,r,{get:e[r],enumerable:!0})},i=(l,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!g.call(l,a)&&a!==r&&c(l,a,{get:()=>e[a],enumerable:!(o=p(e,a))||o.enumerable});return l};var b=(l,e,r)=>(r=l!=null?h(m(l)):{},i(e||!l||!l.__esModule?c(r,\"default\",{value:l,enumerable:!0}):r,l)),v=l=>i(c({},\"__esModule\",{value:!0}),l);var d=y((k,t)=>{t.exports=_jsx_runtime});var A={};f(A,{default:()=>x,frontmatter:()=>w});var n=b(d()),w={title:\"What's the difference between `.call` and `.apply` in JavaScript?\"};function s(l){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",ul:\"ul\",li:\"li\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",a:\"a\"},l.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\".call\"}),\" and \",(0,n.jsx)(e.code,{children:\".apply\"}),\" are both used to invoke functions with a specific \",(0,n.jsx)(e.code,{children:\"this\"}),\" context and arguments. The primary difference lies in how they accept arguments:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\".call(thisArg, arg1, arg2, ...)\"}),\": Takes arguments individually.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\".apply(thisArg, [argsArray])\"}),\": Takes arguments as an array.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Assuming we have a function \",(0,n.jsx)(e.code,{children:\"add\"}),\", the function can be invoked using \",(0,n.jsx)(e.code,{children:\".call\"}),\" and \",(0,n.jsx)(e.code,{children:\".apply\"}),\" in the following manner:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n\nconsole.log(add.call(null, 1, 2)); // 3\nconsole.log(add.apply(null, [1, 2])); // 3\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Call vs Apply\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Both \",(0,n.jsx)(e.code,{children:\".call\"}),\" and \",(0,n.jsx)(e.code,{children:\".apply\"}),\" are used to invoke functions and the first parameter will be used as the value of \",(0,n.jsx)(e.code,{children:\"this\"}),\" within the function. However, \",(0,n.jsx)(e.code,{children:\".call\"}),\" takes in comma-separated arguments as the next arguments while \",(0,n.jsx)(e.code,{children:\".apply\"}),\" takes in an array of arguments as the next argument.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"An easy way to remember this is C for \",(0,n.jsx)(e.code,{children:\"call\"}),\" and comma-separated and A for \",(0,n.jsx)(e.code,{children:\"apply\"}),\" and an array of arguments.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n\nconsole.log(add.call(null, 1, 2)); // 3\nconsole.log(add.apply(null, [1, 2])); // 3\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"With ES6 syntax, we can invoke \",(0,n.jsx)(e.code,{children:\"call\"}),\" using an array along with the spread operator for the arguments.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n\nconsole.log(add.call(null, ...[1, 2])); // 3\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Use cases\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Context management\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\".call\"}),\" and \",(0,n.jsx)(e.code,{children:\".apply\"}),\" can set the \",(0,n.jsx)(e.code,{children:\"this\"}),\" context explicitly when invoking methods on different objects.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  name: 'John',\n  greet() {\n    console.log(\\`Hello, my name is \\${this.name}\\`);\n  },\n};\n\nconst anotherPerson = { name: 'Alice' };\n\nperson.greet.call(anotherPerson); // Hello, my name is Alice\nperson.greet.apply(anotherPerson); // Hello, my name is Alice\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Function borrowing\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Both \",(0,n.jsx)(e.code,{children:\".call\"}),\" and \",(0,n.jsx)(e.code,{children:\".apply\"}),\" allow borrowing methods from one object and using them in the context of another. This is useful when passing functions as arguments (callbacks) and the original \",(0,n.jsx)(e.code,{children:\"this\"}),\" context is lost. \",(0,n.jsx)(e.code,{children:\".call\"}),\" and \",(0,n.jsx)(e.code,{children:\".apply\"}),\" allow the function to be invoked with the intended \",(0,n.jsx)(e.code,{children:\"this\"}),\" value.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet() {\n  console.log(\\`Hello, my name is \\${this.name}\\`);\n}\n\nconst person1 = { name: 'John' };\nconst person2 = { name: 'Alice' };\n\ngreet.call(person1); // Hello, my name is John\ngreet.apply(person2); // Hello, my name is Alice\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Alternative syntax to call methods on objects\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\".apply\"}),\" can be used with object methods by passing the object as the first argument followed by the usual parameters.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr1 = [1, 2, 3];\nconst arr2 = [4, 5, 6];\n\nArray.prototype.push.apply(arr1, arr2); // Same as arr1.push(4, 5, 6)\n\nconsole.log(arr1); // [1, 2, 3, 4, 5, 6]\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Deconstructing the above:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The first object, \",(0,n.jsx)(e.code,{children:\"arr1\"}),\" will be used as the \",(0,n.jsx)(e.code,{children:\"this\"}),\" value.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\".push()\"}),\" is called on \",(0,n.jsx)(e.code,{children:\"arr1\"}),\" using \",(0,n.jsx)(e.code,{children:\"arr2\"}),\" as arguments as an array because it's using \",(0,n.jsx)(e.code,{children:\".apply()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Array.prototype.push.apply(arr1, arr2)\"}),\" is equivalent to \",(0,n.jsx)(e.code,{children:\"arr1.push(...arr2)\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"It may not be obvious, but \",(0,n.jsx)(e.code,{children:\"Array.prototype.push.apply(arr1, arr2)\"}),\" causes modifications to \",(0,n.jsx)(e.code,{children:\"arr1\"}),\". It's clearer to call methods using the OOP-centric way instead where possible.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Follow-Up Questions\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"How do \",(0,n.jsx)(e.code,{children:\".call\"}),\" and \",(0,n.jsx)(e.code,{children:\".apply\"}),\" differ from \",(0,n.jsx)(e.code,{children:\"Function.prototype.bind\"}),\"?\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Practice\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Practice implementing your own \",(0,n.jsxs)(e.a,{href:\"/questions/javascript/function-call\",children:[(0,n.jsx)(e.code,{children:\"Function.prototype.call\"}),\" method\"]}),\" and \",(0,n.jsxs)(e.a,{href:\"/questions/javascript/function-apply\",children:[(0,n.jsx)(e.code,{children:\"Function.prototype.apply\"}),\" method\"]}),\" on GreatFrontEnd.\"]}),`\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/Web/JavaScript/Reference/Global_Objects/Function/call\",children:\"Function.prototype.call | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply\",children:\"Function.prototype.apply | MDN\"})}),`\n`]})]})}function j(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(s,l)})):s(l)}var x=j;return v(A);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),b=(l,e)=>{for(var r in e)c(l,r,{get:e[r],enumerable:!0})},i=(l,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!y.call(l,a)&&a!==r&&c(l,a,{get:()=>e[a],enumerable:!(o=u(e,a))||o.enumerable});return l};var v=(l,e,r)=>(r=l!=null?p(g(l)):{},i(e||!l||!l.__esModule?c(r,\"default\",{value:l,enumerable:!0}):r,l)),w=l=>i(c({},\"__esModule\",{value:!0}),l);var d=f((F,t)=>{t.exports=_jsx_runtime});var x={};b(x,{default:()=>s,frontmatter:()=>j});var n=v(d()),j={title:\"What's the difference between `.call` and `.apply` in JavaScript?\"};function h(l){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",ul:\"ul\",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\".call\"}),\" and \",(0,n.jsx)(e.code,{children:\".apply\"}),\" are both used to invoke functions with a specific \",(0,n.jsx)(e.code,{children:\"this\"}),\" context and arguments. The primary difference lies in how they accept arguments:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\".call(thisArg, arg1, arg2, ...)\"}),\": Takes arguments individually.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\".apply(thisArg, [argsArray])\"}),\": Takes arguments as an array.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Assuming we have a function \",(0,n.jsx)(e.code,{children:\"add\"}),\", the function can be invoked using \",(0,n.jsx)(e.code,{children:\".call\"}),\" and \",(0,n.jsx)(e.code,{children:\".apply\"}),\" in the following manner:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n\nconsole.log(add.call(null, 1, 2)); // 3\nconsole.log(add.apply(null, [1, 2])); // 3\n`})}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Call vs Apply\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Both \",(0,n.jsx)(e.code,{children:\".call\"}),\" and \",(0,n.jsx)(e.code,{children:\".apply\"}),\" are used to invoke functions and the first parameter will be used as the value of \",(0,n.jsx)(e.code,{children:\"this\"}),\" within the function. However, \",(0,n.jsx)(e.code,{children:\".call\"}),\" takes in comma-separated arguments as the next arguments while \",(0,n.jsx)(e.code,{children:\".apply\"}),\" takes in an array of arguments as the next argument.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"An easy way to remember this is C for \",(0,n.jsx)(e.code,{children:\"call\"}),\" and comma-separated and A for \",(0,n.jsx)(e.code,{children:\"apply\"}),\" and an array of arguments.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n\nconsole.log(add.call(null, 1, 2)); // 3\nconsole.log(add.apply(null, [1, 2])); // 3\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"With ES6 syntax, we can invoke \",(0,n.jsx)(e.code,{children:\"call\"}),\" using an array along with the spread operator for the arguments.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n\nconsole.log(add.call(null, ...[1, 2])); // 3\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Use cases\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Context management\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\".call\"}),\" and \",(0,n.jsx)(e.code,{children:\".apply\"}),\" can set the \",(0,n.jsx)(e.code,{children:\"this\"}),\" context explicitly when invoking methods on different objects.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const person = {\n  name: 'John',\n  greet() {\n    console.log(\\`Hello, my name is \\${this.name}\\`);\n  },\n};\n\nconst anotherPerson = { name: 'Alice' };\n\nperson.greet.call(anotherPerson); // Hello, my name is Alice\nperson.greet.apply(anotherPerson); // Hello, my name is Alice\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Function borrowing\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Both \",(0,n.jsx)(e.code,{children:\".call\"}),\" and \",(0,n.jsx)(e.code,{children:\".apply\"}),\" allow borrowing methods from one object and using them in the context of another. This is useful when passing functions as arguments (callbacks) and the original \",(0,n.jsx)(e.code,{children:\"this\"}),\" context is lost. \",(0,n.jsx)(e.code,{children:\".call\"}),\" and \",(0,n.jsx)(e.code,{children:\".apply\"}),\" allow the function to be invoked with the intended \",(0,n.jsx)(e.code,{children:\"this\"}),\" value.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function greet() {\n  console.log(\\`Hello, my name is \\${this.name}\\`);\n}\n\nconst person1 = { name: 'John' };\nconst person2 = { name: 'Alice' };\n\ngreet.call(person1); // Hello, my name is John\ngreet.apply(person2); // Hello, my name is Alice\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Alternative syntax to call methods on objects\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\".apply\"}),\" can be used with object methods by passing the object as the first argument followed by the usual parameters.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const arr1 = [1, 2, 3];\nconst arr2 = [4, 5, 6];\n\nArray.prototype.push.apply(arr1, arr2); // Same as arr1.push(4, 5, 6)\n\nconsole.log(arr1); // [1, 2, 3, 4, 5, 6]\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Deconstructing the above:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The first object, \",(0,n.jsx)(e.code,{children:\"arr1\"}),\" will be used as the \",(0,n.jsx)(e.code,{children:\"this\"}),\" value.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\".push()\"}),\" is called on \",(0,n.jsx)(e.code,{children:\"arr1\"}),\" using \",(0,n.jsx)(e.code,{children:\"arr2\"}),\" as arguments as an array because it's using \",(0,n.jsx)(e.code,{children:\".apply()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"Array.prototype.push.apply(arr1, arr2)\"}),\" is equivalent to \",(0,n.jsx)(e.code,{children:\"arr1.push(...arr2)\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"It may not be obvious, but \",(0,n.jsx)(e.code,{children:\"Array.prototype.push.apply(arr1, arr2)\"}),\" causes modifications to \",(0,n.jsx)(e.code,{children:\"arr1\"}),\". It's clearer to call methods using the OOP-centric way instead where possible.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Follow-Up Questions\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"How do \",(0,n.jsx)(e.code,{children:\".call\"}),\" and \",(0,n.jsx)(e.code,{children:\".apply\"}),\" differ from \",(0,n.jsx)(e.code,{children:\"Function.prototype.bind\"}),\"?\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Practice\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Practice implementing your own \",(0,n.jsxs)(e.a,{href:\"/questions/javascript/function-call\",children:[(0,n.jsx)(e.code,{children:\"Function.prototype.call\"}),\" method\"]}),\" and \",(0,n.jsxs)(e.a,{href:\"/questions/javascript/function-apply\",children:[(0,n.jsx)(e.code,{children:\"Function.prototype.apply\"}),\" method\"]}),\" on GreatFrontEnd.\"]}),`\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/Web/JavaScript/Reference/Global_Objects/Function/call\",children:\"Function.prototype.call | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply\",children:\"Function.prototype.apply | MDN\"})}),`\n`]})]})}function s(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(h,{...l})}):h(l)}return w(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-call-and-apply/pt-BR.json b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-call-and-apply/pt-BR.json
index f5ff79ebf..9a6b909a1 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-call-and-apply/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-call-and-apply/pt-BR.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/whats-the-difference-between-call-and-apply/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var x=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),f=(a,e)=>{for(var o in e)c(a,o,{get:e[o],enumerable:!0})},s=(a,e,o,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!h.call(a,r)&&r!==o&&c(a,r,{get:()=>e[r],enumerable:!(t=i(e,r))||t.enumerable});return a};var j=(a,e,o)=>(o=a!=null?m(g(a)):{},s(e||!a||!a.__esModule?c(o,\"default\",{value:a,enumerable:!0}):o,a)),y=a=>s(c({},\"__esModule\",{value:!0}),a);var d=x((D,l)=>{l.exports=_jsx_runtime});var C={};f(C,{default:()=>v,frontmatter:()=>b});var n=j(d()),b={title:\"Qual \\xE9 a diferen\\xE7a entre `.call` e `.apply`?\"};function p(a){let e=Object.assign({p:\"p\",code:\"code\",pre:\"pre\"},a.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\".call\"}),\" e \",(0,n.jsx)(e.code,{children:\".apply\"}),\" s\\xE3o usados para invocar fun\\xE7\\xF5es e o primeiro par\\xE2metro ser\\xE1 usado como o valor de \",(0,n.jsx)(e.code,{children:\"this\"}),\" dentro da fun\\xE7\\xE3o. No entanto, \",(0,n.jsx)(e.code,{children:\".call\"}),\" recebe argumentos separados por v\\xEDrgulas como os pr\\xF3ximos argumentos enquanto \",(0,n.jsx)(e.code,{children:\".apply\"}),\" recebe um array de argumentos como o pr\\xF3ximo argumento. Uma maneira f\\xE1cil de lembrar este \\xE9 C para \",(0,n.jsx)(e.code,{children:\"chamada\"}),\" e par\\xE2metros separados por v\\xEDrgulas e A para 'apply' e um array de argumentos.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n\nconsole.log(add.call(null, 1, 2)); // 3\nconsole.log(add.apply(null, [1, 2])); // 3\n`})})]})}function _(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(p,a)})):p(a)}var v=_;return y(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var f=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),y=(a,e)=>{for(var r in e)c(a,r,{get:e[r],enumerable:!0})},l=(a,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of g(e))!x.call(a,n)&&n!==r&&c(a,n,{get:()=>e[n],enumerable:!(t=i(e,n))||t.enumerable});return a};var _=(a,e,r)=>(r=a!=null?u(h(a)):{},l(e||!a||!a.__esModule?c(r,\"default\",{value:a,enumerable:!0}):r,a)),j=a=>l(c({},\"__esModule\",{value:!0}),a);var s=f((M,d)=>{d.exports=_jsx_runtime});var v={};y(v,{default:()=>m,frontmatter:()=>b});var o=_(s()),b={title:\"Qual \\xE9 a diferen\\xE7a entre `.call` e `.apply`?\"};function p(a){let e={code:\"code\",p:\"p\",pre:\"pre\",...a.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\".call\"}),\" e \",(0,o.jsx)(e.code,{children:\".apply\"}),\" s\\xE3o usados para invocar fun\\xE7\\xF5es e o primeiro par\\xE2metro ser\\xE1 usado como o valor de \",(0,o.jsx)(e.code,{children:\"this\"}),\" dentro da fun\\xE7\\xE3o. No entanto, \",(0,o.jsx)(e.code,{children:\".call\"}),\" recebe argumentos separados por v\\xEDrgulas como os pr\\xF3ximos argumentos enquanto \",(0,o.jsx)(e.code,{children:\".apply\"}),\" recebe um array de argumentos como o pr\\xF3ximo argumento. Uma maneira f\\xE1cil de lembrar este \\xE9 C para \",(0,o.jsx)(e.code,{children:\"chamada\"}),\" e par\\xE2metros separados por v\\xEDrgulas e A para 'apply' e um array de argumentos.\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n\nconsole.log(add.call(null, 1, 2)); // 3\nconsole.log(add.apply(null, [1, 2])); // 3\n`})})]})}function m(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,{...a,children:(0,o.jsx)(p,{...a})}):p(a)}return j(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-call-and-apply/zh-CN.json b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-call-and-apply/zh-CN.json
index e4c5ee747..8b5a45b4e 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-call-and-apply/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-call-and-apply/zh-CN.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/whats-the-difference-between-call-and-apply/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var t=Object.create;var d=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),f=(l,n)=>{for(var c in n)d(l,c,{get:n[c],enumerable:!0})},a=(l,n,c,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of u(n))!g.call(l,r)&&r!==c&&d(l,r,{get:()=>n[r],enumerable:!(o=s(n,r))||o.enumerable});return l};var j=(l,n,c)=>(c=l!=null?t(y(l)):{},a(n||!l||!l.__esModule?d(c,\"default\",{value:l,enumerable:!0}):c,l)),b=l=>a(d({},\"__esModule\",{value:!0}),l);var h=m((_,i)=>{i.exports=_jsx_runtime});var N={};f(N,{default:()=>F,frontmatter:()=>v});var e=j(h()),v={title:\"JavaScript \\u4E2D`.call` \\u548C `.apply` \\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function p(l){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",ul:\"ul\",li:\"li\",pre:\"pre\",hr:\"hr\",h3:\"h3\",ol:\"ol\",a:\"a\"},l.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\".call\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\".apply\"}),\" \\u90FD\\u7528\\u4E8E\\u4F7F\\u7528\\u7279\\u5B9A\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u548C\\u53C2\\u6570\\u6765\\u8C03\\u7528\\u51FD\\u6570\\u3002\\u4E3B\\u8981\\u533A\\u522B\\u5728\\u4E8E\\u5B83\\u4EEC\\u63A5\\u53D7\\u53C2\\u6570\\u7684\\u65B9\\u5F0F\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\".call(thisArg, arg1, arg2, ...)\"}),\"\\uFF1A\\u5355\\u72EC\\u83B7\\u53D6\\u53C2\\u6570\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\".apply(thisArg, [argsArray])\"}),\"\\uFF1A\\u5C06\\u53C2\\u6570\\u4F5C\\u4E3A\\u6570\\u7EC4\\u83B7\\u53D6\\u3002\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5047\\u8BBE\\u6211\\u4EEC\\u6709\\u4E00\\u4E2A\\u51FD\\u6570 \",(0,e.jsx)(n.code,{children:\"add\"}),\"\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u4EE5\\u4E0B\\u65B9\\u5F0F\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\".call\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\".apply\"}),\" \\u8C03\\u7528\\u8BE5\\u51FD\\u6570\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n\nconsole.log(add.call(null, 1, 2)); // 3\nconsole.log(add.apply(null, [1, 2])); // 3\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Call vs Apply\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\".call\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\".apply\"}),\" \\u90FD\\u7528\\u4E8E\\u8C03\\u7528\\u51FD\\u6570\\uFF0C\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u5C06\\u7528\\u4F5C\\u51FD\\u6570\\u4E2D \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u3002\\u4F46\\u662F\\uFF0C\",(0,e.jsx)(n.code,{children:\".call\"}),\" \\u5C06\\u9017\\u53F7\\u5206\\u9694\\u7684\\u53C2\\u6570\\u4F5C\\u4E3A\\u4E0B\\u4E00\\u4E2A\\u53C2\\u6570\\uFF0C\\u800C \",(0,e.jsx)(n.code,{children:\".apply\"}),\" \\u5C06\\u53C2\\u6570\\u6570\\u7EC4\\u4F5C\\u4E3A\\u4E0B\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8BB0\\u4F4F\\u8FD9\\u4E00\\u70B9\\u7684\\u4E00\\u4E2A\\u7B80\\u5355\\u65B9\\u6CD5\\u662F C \\u4EE3\\u8868 \",(0,e.jsx)(n.code,{children:\"call\"}),\" \\u548C\\u9017\\u53F7\\u5206\\u9694\\uFF0CA \\u4EE3\\u8868 \",(0,e.jsx)(n.code,{children:\"apply\"}),\" \\u548C\\u53C2\\u6570\\u6570\\u7EC4\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n\nconsole.log(add.call(null, 1, 2)); // 3\nconsole.log(add.apply(null, [1, 2])); // 3\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 ES6 \\u8BED\\u6CD5\\uFF0C\\u6211\\u4EEC\\u53EF\\u4EE5\\u4F7F\\u7528\\u6570\\u7EC4\\u4EE5\\u53CA\\u7528\\u4E8E\\u53C2\\u6570\\u7684\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\\u6765\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"call\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n\nconsole.log(add.call(null, ...[1, 2])); // 3\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E0A\\u4E0B\\u6587\\u7BA1\\u7406\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\".call\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\".apply\"}),\" \\u53EF\\u4EE5\\u5728\\u8C03\\u7528\\u4E0D\\u540C\\u5BF9\\u8C61\\u4E0A\\u7684\\u65B9\\u6CD5\\u65F6\\u663E\\u5F0F\\u8BBE\\u7F6E \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const person = {\n  name: 'John',\n  greet() {\n    console.log(\\`Hello, my name is \\${this.name}\\`);\n  },\n};\n\nconst anotherPerson = { name: 'Alice' };\n\nperson.greet.call(anotherPerson); // Hello, my name is Alice\nperson.greet.apply(anotherPerson); // Hello, my name is Alice\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u501F\\u7528\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\".call\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\".apply\"}),\" \\u90FD\\u5141\\u8BB8\\u4ECE\\u4E00\\u4E2A\\u5BF9\\u8C61\\u501F\\u7528\\u65B9\\u6CD5\\u5E76\\u5728\\u53E6\\u4E00\\u4E2A\\u5BF9\\u8C61\\u7684\\u4E0A\\u4E0B\\u6587\\u4E2D\\u4F7F\\u5B83\\u4EEC\\u3002\\u5F53\\u5C06\\u51FD\\u6570\\u4F5C\\u4E3A\\u53C2\\u6570\\uFF08\\u56DE\\u8C03\\uFF09\\u4F20\\u9012\\u5E76\\u4E14\\u539F\\u59CB \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u4E22\\u5931\\u65F6\\uFF0C\\u8FD9\\u5F88\\u6709\\u7528\\u3002\",(0,e.jsx)(n.code,{children:\".call\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\".apply\"}),\" \\u5141\\u8BB8\\u4F7F\\u7528\\u9884\\u671F\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u8C03\\u7528\\u8BE5\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet() {\n  console.log(\\`Hello, my name is \\${this.name}\\`);\n}\n\nconst person1 = { name: 'John' };\nconst person2 = { name: 'Alice' };\n\ngreet.call(person1); // Hello, my name is John\ngreet.apply(person2); // Hello, my name is Alice\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8C03\\u7528\\u5BF9\\u8C61\\u65B9\\u6CD5\\u7684\\u66FF\\u4EE3\\u8BED\\u6CD5\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\".apply\"}),\" \\u53EF\\u4EE5\\u901A\\u8FC7\\u5C06\\u5BF9\\u8C61\\u4F5C\\u4E3A\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u4F20\\u9012\\uFF0C\\u7136\\u540E\\u4F20\\u9012\\u901A\\u5E38\\u7684\\u53C2\\u6570\\u6765\\u4E0E\\u5BF9\\u8C61\\u65B9\\u6CD5\\u4E00\\u8D77\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const arr1 = [1, 2, 3];\nconst arr2 = [4, 5, 6];\n\nArray.prototype.push.apply(arr1, arr2); // Same as arr1.push(4, 5, 6)\n\nconsole.log(arr1); // [1, 2, 3, 4, 5, 6]\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5206\\u89E3\\u4E0A\\u8FF0\\u5185\\u5BB9\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"\\u7B2C\\u4E00\\u4E2A\\u5BF9\\u8C61 \",(0,e.jsx)(n.code,{children:\"arr1\"}),\" \\u5C06\\u7528\\u4F5C \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5728 \",(0,e.jsx)(n.code,{children:\"arr1\"}),\" \\u4E0A\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\".push()\"}),\"\\uFF0C\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"arr2\"}),\" \\u4F5C\\u4E3A\\u53C2\\u6570\\u6570\\u7EC4\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\".apply()\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"Array.prototype.push.apply(arr1, arr2)\"}),\" \\u7B49\\u540C\\u4E8E \",(0,e.jsx)(n.code,{children:\"arr1.push(...arr2)\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u53EF\\u80FD\\u5E76\\u4E0D\\u660E\\u663E\\uFF0C\\u4F46 \",(0,e.jsx)(n.code,{children:\"Array.prototype.push.apply(arr1, arr2)\"}),\" \\u4F1A\\u5BFC\\u81F4\\u4FEE\\u6539 \",(0,e.jsx)(n.code,{children:\"arr1\"}),\"\\u3002\\u5982\\u679C\\u53EF\\u80FD\\uFF0C\\u4F7F\\u7528\\u9762\\u5411 OOP \\u7684\\u65B9\\u5F0F\\u8C03\\u7528\\u65B9\\u6CD5\\u4F1A\\u66F4\\u6E05\\u6670\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u540E\\u7EED\\u95EE\\u9898\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\".call\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\".apply\"}),\" \\u4E0E \",(0,e.jsx)(n.code,{children:\"Function.prototype.bind\"}),\" \\u6709\\u4EC0\\u4E48\\u4E0D\\u540C\\uFF1F\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5B9E\\u8DF5\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 GreatFrontEnd \\u4E0A\\u5B9E\\u8DF5\\u5B9E\\u73B0\\u4F60\\u81EA\\u5DF1\\u7684 \",(0,e.jsxs)(n.a,{href:\"/questions/javascript/function-call\",children:[(0,e.jsx)(n.code,{children:\"Function.prototype.call\"}),\" \\u65B9\\u6CD5\"]}),\" \\u548C \",(0,e.jsxs)(n.a,{href:\"/questions/javascript/function-apply\",children:[(0,e.jsx)(n.code,{children:\"Function.prototype.apply\"}),\" \\u65B9\\u6CD5\"]}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call\",children:\"Function.prototype.call | MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply\",children:\"Function.prototype.apply | MDN\"})}),`\n`]})]})}function A(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,Object.assign({},l,{children:(0,e.jsx)(p,l)})):p(l)}var F=A;return b(N);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),j=(l,n)=>{for(var c in n)d(l,c,{get:n[c],enumerable:!0})},a=(l,n,c,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of y(n))!g.call(l,r)&&r!==c&&d(l,r,{get:()=>n[r],enumerable:!(o=u(n,r))||o.enumerable});return l};var v=(l,n,c)=>(c=l!=null?s(m(l)):{},a(n||!l||!l.__esModule?d(c,\"default\",{value:l,enumerable:!0}):c,l)),b=l=>a(d({},\"__esModule\",{value:!0}),l);var h=f((x,i)=>{i.exports=_jsx_runtime});var F={};j(F,{default:()=>t,frontmatter:()=>A});var e=v(h()),A={title:\"JavaScript \\u4E2D`.call` \\u548C `.apply` \\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function p(l){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",ul:\"ul\",...l.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\".call\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\".apply\"}),\" \\u90FD\\u7528\\u4E8E\\u4F7F\\u7528\\u7279\\u5B9A\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u548C\\u53C2\\u6570\\u6765\\u8C03\\u7528\\u51FD\\u6570\\u3002\\u4E3B\\u8981\\u533A\\u522B\\u5728\\u4E8E\\u5B83\\u4EEC\\u63A5\\u53D7\\u53C2\\u6570\\u7684\\u65B9\\u5F0F\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\".call(thisArg, arg1, arg2, ...)\"}),\"\\uFF1A\\u5355\\u72EC\\u83B7\\u53D6\\u53C2\\u6570\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\".apply(thisArg, [argsArray])\"}),\"\\uFF1A\\u5C06\\u53C2\\u6570\\u4F5C\\u4E3A\\u6570\\u7EC4\\u83B7\\u53D6\\u3002\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5047\\u8BBE\\u6211\\u4EEC\\u6709\\u4E00\\u4E2A\\u51FD\\u6570 \",(0,e.jsx)(n.code,{children:\"add\"}),\"\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u4EE5\\u4E0B\\u65B9\\u5F0F\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\".call\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\".apply\"}),\" \\u8C03\\u7528\\u8BE5\\u51FD\\u6570\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n\nconsole.log(add.call(null, 1, 2)); // 3\nconsole.log(add.apply(null, [1, 2])); // 3\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Call vs Apply\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\".call\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\".apply\"}),\" \\u90FD\\u7528\\u4E8E\\u8C03\\u7528\\u51FD\\u6570\\uFF0C\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u5C06\\u7528\\u4F5C\\u51FD\\u6570\\u4E2D \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u7684\\u503C\\u3002\\u4F46\\u662F\\uFF0C\",(0,e.jsx)(n.code,{children:\".call\"}),\" \\u5C06\\u9017\\u53F7\\u5206\\u9694\\u7684\\u53C2\\u6570\\u4F5C\\u4E3A\\u4E0B\\u4E00\\u4E2A\\u53C2\\u6570\\uFF0C\\u800C \",(0,e.jsx)(n.code,{children:\".apply\"}),\" \\u5C06\\u53C2\\u6570\\u6570\\u7EC4\\u4F5C\\u4E3A\\u4E0B\\u4E00\\u4E2A\\u53C2\\u6570\\u3002\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u8BB0\\u4F4F\\u8FD9\\u4E00\\u70B9\\u7684\\u4E00\\u4E2A\\u7B80\\u5355\\u65B9\\u6CD5\\u662F C \\u4EE3\\u8868 \",(0,e.jsx)(n.code,{children:\"call\"}),\" \\u548C\\u9017\\u53F7\\u5206\\u9694\\uFF0CA \\u4EE3\\u8868 \",(0,e.jsx)(n.code,{children:\"apply\"}),\" \\u548C\\u53C2\\u6570\\u6570\\u7EC4\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n\nconsole.log(add.call(null, 1, 2)); // 3\nconsole.log(add.apply(null, [1, 2])); // 3\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u4F7F\\u7528 ES6 \\u8BED\\u6CD5\\uFF0C\\u6211\\u4EEC\\u53EF\\u4EE5\\u4F7F\\u7528\\u6570\\u7EC4\\u4EE5\\u53CA\\u7528\\u4E8E\\u53C2\\u6570\\u7684\\u6269\\u5C55\\u8FD0\\u7B97\\u7B26\\u6765\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\"call\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b) {\n  return a + b;\n}\n\nconsole.log(add.call(null, ...[1, 2])); // 3\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7528\\u4F8B\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u4E0A\\u4E0B\\u6587\\u7BA1\\u7406\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\".call\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\".apply\"}),\" \\u53EF\\u4EE5\\u5728\\u8C03\\u7528\\u4E0D\\u540C\\u5BF9\\u8C61\\u4E0A\\u7684\\u65B9\\u6CD5\\u65F6\\u663E\\u5F0F\\u8BBE\\u7F6E \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const person = {\n  name: 'John',\n  greet() {\n    console.log(\\`Hello, my name is \\${this.name}\\`);\n  },\n};\n\nconst anotherPerson = { name: 'Alice' };\n\nperson.greet.call(anotherPerson); // Hello, my name is Alice\nperson.greet.apply(anotherPerson); // Hello, my name is Alice\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u51FD\\u6570\\u501F\\u7528\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\".call\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\".apply\"}),\" \\u90FD\\u5141\\u8BB8\\u4ECE\\u4E00\\u4E2A\\u5BF9\\u8C61\\u501F\\u7528\\u65B9\\u6CD5\\u5E76\\u5728\\u53E6\\u4E00\\u4E2A\\u5BF9\\u8C61\\u7684\\u4E0A\\u4E0B\\u6587\\u4E2D\\u4F7F\\u5B83\\u4EEC\\u3002\\u5F53\\u5C06\\u51FD\\u6570\\u4F5C\\u4E3A\\u53C2\\u6570\\uFF08\\u56DE\\u8C03\\uFF09\\u4F20\\u9012\\u5E76\\u4E14\\u539F\\u59CB \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u4E0A\\u4E0B\\u6587\\u4E22\\u5931\\u65F6\\uFF0C\\u8FD9\\u5F88\\u6709\\u7528\\u3002\",(0,e.jsx)(n.code,{children:\".call\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\".apply\"}),\" \\u5141\\u8BB8\\u4F7F\\u7528\\u9884\\u671F\\u7684 \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u8C03\\u7528\\u8BE5\\u51FD\\u6570\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function greet() {\n  console.log(\\`Hello, my name is \\${this.name}\\`);\n}\n\nconst person1 = { name: 'John' };\nconst person2 = { name: 'Alice' };\n\ngreet.call(person1); // Hello, my name is John\ngreet.apply(person2); // Hello, my name is Alice\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u8C03\\u7528\\u5BF9\\u8C61\\u65B9\\u6CD5\\u7684\\u66FF\\u4EE3\\u8BED\\u6CD5\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\".apply\"}),\" \\u53EF\\u4EE5\\u901A\\u8FC7\\u5C06\\u5BF9\\u8C61\\u4F5C\\u4E3A\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u4F20\\u9012\\uFF0C\\u7136\\u540E\\u4F20\\u9012\\u901A\\u5E38\\u7684\\u53C2\\u6570\\u6765\\u4E0E\\u5BF9\\u8C61\\u65B9\\u6CD5\\u4E00\\u8D77\\u4F7F\\u7528\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const arr1 = [1, 2, 3];\nconst arr2 = [4, 5, 6];\n\nArray.prototype.push.apply(arr1, arr2); // Same as arr1.push(4, 5, 6)\n\nconsole.log(arr1); // [1, 2, 3, 4, 5, 6]\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5206\\u89E3\\u4E0A\\u8FF0\\u5185\\u5BB9\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[\"\\u7B2C\\u4E00\\u4E2A\\u5BF9\\u8C61 \",(0,e.jsx)(n.code,{children:\"arr1\"}),\" \\u5C06\\u7528\\u4F5C \",(0,e.jsx)(n.code,{children:\"this\"}),\" \\u503C\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u5728 \",(0,e.jsx)(n.code,{children:\"arr1\"}),\" \\u4E0A\\u8C03\\u7528 \",(0,e.jsx)(n.code,{children:\".push()\"}),\"\\uFF0C\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"arr2\"}),\" \\u4F5C\\u4E3A\\u53C2\\u6570\\u6570\\u7EC4\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\".apply()\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"Array.prototype.push.apply(arr1, arr2)\"}),\" \\u7B49\\u540C\\u4E8E \",(0,e.jsx)(n.code,{children:\"arr1.push(...arr2)\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u53EF\\u80FD\\u5E76\\u4E0D\\u660E\\u663E\\uFF0C\\u4F46 \",(0,e.jsx)(n.code,{children:\"Array.prototype.push.apply(arr1, arr2)\"}),\" \\u4F1A\\u5BFC\\u81F4\\u4FEE\\u6539 \",(0,e.jsx)(n.code,{children:\"arr1\"}),\"\\u3002\\u5982\\u679C\\u53EF\\u80FD\\uFF0C\\u4F7F\\u7528\\u9762\\u5411 OOP \\u7684\\u65B9\\u5F0F\\u8C03\\u7528\\u65B9\\u6CD5\\u4F1A\\u66F4\\u6E05\\u6670\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u540E\\u7EED\\u95EE\\u9898\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\".call\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\".apply\"}),\" \\u4E0E \",(0,e.jsx)(n.code,{children:\"Function.prototype.bind\"}),\" \\u6709\\u4EC0\\u4E48\\u4E0D\\u540C\\uFF1F\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5B9E\\u8DF5\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 GreatFrontEnd \\u4E0A\\u5B9E\\u8DF5\\u5B9E\\u73B0\\u4F60\\u81EA\\u5DF1\\u7684 \",(0,e.jsxs)(n.a,{href:\"/questions/javascript/function-call\",children:[(0,e.jsx)(n.code,{children:\"Function.prototype.call\"}),\" \\u65B9\\u6CD5\"]}),\" \\u548C \",(0,e.jsxs)(n.a,{href:\"/questions/javascript/function-apply\",children:[(0,e.jsx)(n.code,{children:\"Function.prototype.apply\"}),\" \\u65B9\\u6CD5\"]}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call\",children:\"Function.prototype.call | MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply\",children:\"Function.prototype.apply | MDN\"})}),`\n`]})]})}function t(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,{...l,children:(0,e.jsx)(p,{...l})}):p(l)}return b(F);})();\n;return Component;"
 }
\ No newline at end of file
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 840940010..dbf2d9dff 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var m=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),w=(n,e)=>{for(var r in e)a(n,r,{get:e[r],enumerable:!0})},s=(n,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!p.call(n,o)&&o!==r&&a(n,o,{get:()=>e[o],enumerable:!(i=f(e,o))||i.enumerable});return n};var b=(n,e,r)=>(r=n!=null?l(g(n)):{},s(e||!n||!n.__esModule?a(r,\"default\",{value:n,enumerable:!0}):r,n)),x=n=>s(a({},\"__esModule\",{value:!0}),n);var d=m((_,c)=>{c.exports=_jsx_runtime});var k={};w(k,{default:()=>j,frontmatter:()=>v});var t=b(d()),v={title:\"What's the difference between feature detection, feature inference, and using the UA string?\"};function h(n){let e=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"Feature Detection\"}),`\n`,(0,t.jsx)(e.p,{children:\"Feature detection involves working out whether a browser supports a certain block of code, and running different code depending on whether it does (or doesn't), so that the browser can always provide a working experience rather crashing/erroring in some browsers. For example:\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`if ('geolocation' in navigator) {\n  // Can use navigator.geolocation\n} else {\n  // Handle lack of feature\n}\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.a,{href:\"https://modernizr.com/\",children:\"Modernizr\"}),\" is a great library to handle feature detection.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"Feature Inference\"}),`\n`,(0,t.jsx)(e.p,{children:\"Feature inference checks for a feature just like feature detection, but uses another function because it assumes it will also exist, e.g.:\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`if (document.getElementsByTagName) {\n  element = document.getElementById(id);\n}\n`})}),`\n`,(0,t.jsx)(e.p,{children:\"This is not really recommended. Feature detection is more foolproof.\"}),`\n`,(0,t.jsx)(e.h2,{children:\"UA String\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"This is a browser-reported string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent. It can be accessed via \",(0,t.jsx)(e.code,{children:\"navigator.userAgent\"}),\". However, the string is tricky to parse and can be spoofed. For example, Chrome reports both as Chrome and Safari. So to detect Safari you have to check for the Safari string and the absence of the Chrome string. Avoid this method.\"]})]})}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 j=y;return x(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var f=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var r in e)a(n,r,{get:e[r],enumerable:!0})},s=(n,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of g(e))!m.call(n,o)&&o!==r&&a(n,o,{get:()=>e[o],enumerable:!(i=u(e,o))||i.enumerable});return n};var x=(n,e,r)=>(r=n!=null?f(p(n)):{},s(e||!n||!n.__esModule?a(r,\"default\",{value:n,enumerable:!0}):r,n)),v=n=>s(a({},\"__esModule\",{value:!0}),n);var d=w((j,c)=>{c.exports=_jsx_runtime});var k={};b(k,{default:()=>l,frontmatter:()=>y});var t=x(d()),y={title:\"What's the difference between feature detection, feature inference, and using the UA string?\"};function h(n){let e={a:\"a\",code:\"code\",h2:\"h2\",p:\"p\",pre:\"pre\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"Feature Detection\"}),`\n`,(0,t.jsx)(e.p,{children:\"Feature detection involves working out whether a browser supports a certain block of code, and running different code depending on whether it does (or doesn't), so that the browser can always provide a working experience rather crashing/erroring in some browsers. For example:\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`if ('geolocation' in navigator) {\n  // Can use navigator.geolocation\n} else {\n  // Handle lack of feature\n}\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.a,{href:\"https://modernizr.com/\",children:\"Modernizr\"}),\" is a great library to handle feature detection.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"Feature Inference\"}),`\n`,(0,t.jsx)(e.p,{children:\"Feature inference checks for a feature just like feature detection, but uses another function because it assumes it will also exist, e.g.:\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-js\",children:`if (document.getElementsByTagName) {\n  element = document.getElementById(id);\n}\n`})}),`\n`,(0,t.jsx)(e.p,{children:\"This is not really recommended. Feature detection is more foolproof.\"}),`\n`,(0,t.jsx)(e.h2,{children:\"UA String\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"This is a browser-reported string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent. It can be accessed via \",(0,t.jsx)(e.code,{children:\"navigator.userAgent\"}),\". However, the string is tricky to parse and can be spoofed. For example, Chrome reports both as Chrome and Safari. So to detect Safari you have to check for the Safari string and the absence of the Chrome string. Avoid this method.\"]})]})}function l(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(h,{...n})}):h(n)}return v(k);})();\n;return Component;"
 }
\ No newline at end of file
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 4c0cbd2c0..77fd31015 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var h=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),v=(r,e)=>{for(var o in e)s(r,o,{get:e[o],enumerable:!0})},t=(r,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of p(e))!f.call(r,n)&&n!==o&&s(r,n,{get:()=>e[n],enumerable:!(i=m(e,n))||i.enumerable});return r};var x=(r,e,o)=>(o=r!=null?u(g(r)):{},t(e||!r||!r.__esModule?s(o,\"default\",{value:r,enumerable:!0}):o,r)),j=r=>t(s({},\"__esModule\",{value:!0}),r);var c=h((M,d)=>{d.exports=_jsx_runtime});var E={};v(E,{default:()=>A,frontmatter:()=>b});var a=x(c()),b={title:\"Qual \\xE9 a diferen\\xE7a entre detec\\xE7\\xE3o de recurso, infer\\xEAncia de recurso e uso da string UA?\"};function l(r){let e=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",a:\"a\"},r.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h2,{children:\"Detec\\xE7\\xE3o de Recursos\"}),`\n`,(0,a.jsx)(e.p,{children:\"A detec\\xE7\\xE3o de recursos envolve descobrir se um navegador suporta um determinado bloco de c\\xF3digo e executar c\\xF3digos diferentes dependendo se ele suporta (ou n\\xE3o), para que o navegador possa sempre fornecer uma experi\\xEAncia funcional em vez de travar/gerar erros em alguns navegadores. Por exemplo:\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`if ('geolocation' in navigator) {\n  // Pode usar navigator.geolocation\n} else {\n  // Manipula a falta de recurso\n}\n`})}),`\n`,(0,a.jsxs)(e.p,{children:[(0,a.jsx)(e.a,{href:\"https://modernizr.com/\",children:\"Modernizr\"}),\" \\xE9 uma \\xF3tima biblioteca para lidar com a detec\\xE7\\xE3o de recursos.\"]}),`\n`,(0,a.jsx)(e.h2,{children:\"Infer\\xEAncia de Recursos\"}),`\n`,(0,a.jsx)(e.p,{children:\"A infer\\xEAncia de recursos verifica a exist\\xEAncia de um recurso assim como a detec\\xE7\\xE3o de recursos, mas usa outra fun\\xE7\\xE3o porque presume que ela tamb\\xE9m existir\\xE1, por exemplo:\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`if (document.getElementsByTagName) {\n  element = document.getElementById(id);\n}\n`})}),`\n`,(0,a.jsx)(e.p,{children:\"Isso n\\xE3o \\xE9 muito recomendado. A detec\\xE7\\xE3o de recursos \\xE9 mais \\xE0 prova de falhas.\"}),`\n`,(0,a.jsx)(e.h2,{children:\"UA String\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"Esta \\xE9 uma string relatada pelo navegador que permite aos pares do protocolo de rede identificar o tipo de aplicativo, sistema operacional, fornecedor de software ou vers\\xE3o do software do agente de usu\\xE1rio solicitante. Ele pode ser acessado via \",(0,a.jsx)(e.code,{children:\"navigator.userAgent\"}),\". No entanto, a string \\xE9 dif\\xEDcil de analisar e pode ser falsificada. Por exemplo, o Chrome informa como Chrome e Safari. Ent\\xE3o, para detectar o Safari, voc\\xEA precisa verificar a presen\\xE7a da string do Safari e a aus\\xEAncia da string do Chrome. Evite este m\\xE9todo.\"]})]})}function _(r={}){let{wrapper:e}=r.components||{};return e?(0,a.jsx)(e,Object.assign({},r,{children:(0,a.jsx)(l,r)})):l(r)}var A=_;return j(E);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var v=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),x=(r,e)=>{for(var a in e)i(r,a,{get:e[a],enumerable:!0})},t=(r,e,a,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of f(e))!h.call(r,n)&&n!==a&&i(r,n,{get:()=>e[n],enumerable:!(s=p(e,n))||s.enumerable});return r};var j=(r,e,a)=>(a=r!=null?m(g(r)):{},t(e||!r||!r.__esModule?i(a,\"default\",{value:r,enumerable:!0}):a,r)),_=r=>t(i({},\"__esModule\",{value:!0}),r);var c=v((C,d)=>{d.exports=_jsx_runtime});var E={};x(E,{default:()=>u,frontmatter:()=>A});var o=j(c()),A={title:\"Qual \\xE9 a diferen\\xE7a entre detec\\xE7\\xE3o de recurso, infer\\xEAncia de recurso e uso da string UA?\"};function l(r){let e={a:\"a\",code:\"code\",h2:\"h2\",p:\"p\",pre:\"pre\",...r.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h2,{children:\"Detec\\xE7\\xE3o de Recursos\"}),`\n`,(0,o.jsx)(e.p,{children:\"A detec\\xE7\\xE3o de recursos envolve descobrir se um navegador suporta um determinado bloco de c\\xF3digo e executar c\\xF3digos diferentes dependendo se ele suporta (ou n\\xE3o), para que o navegador possa sempre fornecer uma experi\\xEAncia funcional em vez de travar/gerar erros em alguns navegadores. Por exemplo:\"}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`if ('geolocation' in navigator) {\n  // Pode usar navigator.geolocation\n} else {\n  // Manipula a falta de recurso\n}\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.a,{href:\"https://modernizr.com/\",children:\"Modernizr\"}),\" \\xE9 uma \\xF3tima biblioteca para lidar com a detec\\xE7\\xE3o de recursos.\"]}),`\n`,(0,o.jsx)(e.h2,{children:\"Infer\\xEAncia de Recursos\"}),`\n`,(0,o.jsx)(e.p,{children:\"A infer\\xEAncia de recursos verifica a exist\\xEAncia de um recurso assim como a detec\\xE7\\xE3o de recursos, mas usa outra fun\\xE7\\xE3o porque presume que ela tamb\\xE9m existir\\xE1, por exemplo:\"}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`if (document.getElementsByTagName) {\n  element = document.getElementById(id);\n}\n`})}),`\n`,(0,o.jsx)(e.p,{children:\"Isso n\\xE3o \\xE9 muito recomendado. A detec\\xE7\\xE3o de recursos \\xE9 mais \\xE0 prova de falhas.\"}),`\n`,(0,o.jsx)(e.h2,{children:\"UA String\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Esta \\xE9 uma string relatada pelo navegador que permite aos pares do protocolo de rede identificar o tipo de aplicativo, sistema operacional, fornecedor de software ou vers\\xE3o do software do agente de usu\\xE1rio solicitante. Ele pode ser acessado via \",(0,o.jsx)(e.code,{children:\"navigator.userAgent\"}),\". No entanto, a string \\xE9 dif\\xEDcil de analisar e pode ser falsificada. Por exemplo, o Chrome informa como Chrome e Safari. Ent\\xE3o, para detectar o Safari, voc\\xEA precisa verificar a presen\\xE7a da string do Safari e a aus\\xEAncia da string do Chrome. Evite este m\\xE9todo.\"]})]})}function u(r={}){let{wrapper:e}=r.components||{};return e?(0,o.jsx)(e,{...r,children:(0,o.jsx)(l,{...r})}):l(r)}return _(E);})();\n;return Component;"
 }
\ No newline at end of file
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 fc56f74d8..0c72668e8 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var t in e)c(n,t,{get:e[t],enumerable:!0})},i=(n,e,t,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of g(e))!u.call(n,a)&&a!==t&&c(n,a,{get:()=>e[a],enumerable:!(o=m(e,a))||o.enumerable});return n};var x=(n,e,t)=>(t=n!=null?h(p(n)):{},i(e||!n||!n.__esModule?c(t,\"default\",{value:n,enumerable:!0}):t,n)),_=n=>i(c({},\"__esModule\",{value:!0}),n);var l=f((N,d)=>{d.exports=_jsx_runtime});var y={};j(y,{default:()=>v,frontmatter:()=>C});var r=x(l()),C={title:\"\\u7279\\u6027\\u68C0\\u6D4B\\u3001\\u7279\\u6027\\u63A8\\u65AD\\u548C\\u4F7F\\u7528 UA \\u5B57\\u7B26\\u4E32\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function s(n){let e=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",a:\"a\"},n.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"\\u7279\\u6027\\u68C0\\u6D4B\"}),`\n`,(0,r.jsx)(e.p,{children:\"\\u7279\\u6027\\u68C0\\u6D4B\\u6D89\\u53CA\\u786E\\u5B9A\\u6D4F\\u89C8\\u5668\\u662F\\u5426\\u652F\\u6301\\u67D0\\u6BB5\\u4EE3\\u7801\\uFF0C\\u5E76\\u6839\\u636E\\u662F\\u5426\\u652F\\u6301\\u8FD0\\u884C\\u4E0D\\u540C\\u7684\\u4EE3\\u7801\\uFF08\\u6216\\u4E0D\\u652F\\u6301\\uFF09\\uFF0C\\u4EE5\\u4FBF\\u6D4F\\u89C8\\u5668\\u59CB\\u7EC8\\u63D0\\u4F9B\\u5DE5\\u4F5C\\u4F53\\u9A8C\\uFF0C\\u800C\\u4E0D\\u662F\\u5728\\u67D0\\u4E9B\\u6D4F\\u89C8\\u5668\\u4E2D\\u5D29\\u6E83/\\u51FA\\u9519\\u3002\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`if ('geolocation' in navigator) {\n  // \\u53EF\\u4EE5\\u4F7F\\u7528 navigator.geolocation\n} else {\n  // \\u5904\\u7406\\u7F3A\\u5C11\\u7684\\u529F\\u80FD\n}\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.a,{href:\"https://modernizr.com/\",children:\"Modernizr\"}),\" \\u662F\\u4E00\\u4E2A\\u5904\\u7406\\u7279\\u6027\\u68C0\\u6D4B\\u7684\\u597D\\u5E93\\u3002\"]}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u7279\\u6027\\u63A8\\u65AD\"}),`\n`,(0,r.jsx)(e.p,{children:\"\\u7279\\u6027\\u63A8\\u65AD\\u50CF\\u7279\\u6027\\u68C0\\u6D4B\\u4E00\\u6837\\u68C0\\u67E5\\u7279\\u6027\\uFF0C\\u4F46\\u4F7F\\u7528\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\uFF0C\\u56E0\\u4E3A\\u5B83\\u5047\\u5B9A\\u5B83\\u4E5F\\u5C06\\u5B58\\u5728\\uFF0C\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`if (document.getElementsByTagName) {\n  element = document.getElementById(id);\n}\n`})}),`\n`,(0,r.jsx)(e.p,{children:\"\\u8FD9\\u771F\\u7684\\u4E0D\\u63A8\\u8350\\u3002\\u7279\\u6027\\u68C0\\u6D4B\\u66F4\\u4E07\\u65E0\\u4E00\\u5931\\u3002\"}),`\n`,(0,r.jsx)(e.h2,{children:\"UA \\u5B57\\u7B26\\u4E32\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u6D4F\\u89C8\\u5668\\u62A5\\u544A\\u7684\\u5B57\\u7B26\\u4E32\\uFF0C\\u5B83\\u5141\\u8BB8\\u7F51\\u7EDC\\u534F\\u8BAE\\u5BF9\\u7B49\\u65B9\\u8BC6\\u522B\\u8BF7\\u6C42\\u8F6F\\u4EF6\\u7528\\u6237\\u4EE3\\u7406\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u7C7B\\u578B\\u3001\\u64CD\\u4F5C\\u7CFB\\u7EDF\\u3001\\u8F6F\\u4EF6\\u4F9B\\u5E94\\u5546\\u6216\\u8F6F\\u4EF6\\u7248\\u672C\\u3002\\u53EF\\u4EE5\\u901A\\u8FC7 \",(0,r.jsx)(e.code,{children:\"navigator.userAgent\"}),\" \\u8BBF\\u95EE\\u5B83\\u3002\\u4F46\\u662F\\uFF0C\\u8BE5\\u5B57\\u7B26\\u4E32\\u5F88\\u96BE\\u89E3\\u6790\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u88AB\\u6B3A\\u9A97\\u3002\\u4F8B\\u5982\\uFF0CChrome \\u62A5\\u544A\\u4E3A Chrome \\u548C Safari\\u3002\\u56E0\\u6B64\\uFF0C\\u8981\\u68C0\\u6D4B Safari\\uFF0C\\u60A8\\u5FC5\\u987B\\u68C0\\u67E5 Safari \\u5B57\\u7B26\\u4E32\\u4EE5\\u53CA Chrome \\u5B57\\u7B26\\u4E32\\u7684\\u7F3A\\u5931\\u3002\\u907F\\u514D\\u4F7F\\u7528\\u6B64\\u65B9\\u6CD5\\u3002\"]})]})}function M(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,Object.assign({},n,{children:(0,r.jsx)(s,n)})):s(n)}var v=M;return _(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var t in e)a(n,t,{get:e[t],enumerable:!0})},i=(n,e,t,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!f.call(n,o)&&o!==t&&a(n,o,{get:()=>e[o],enumerable:!(c=g(e,o))||c.enumerable});return n};var _=(n,e,t)=>(t=n!=null?m(u(n)):{},i(e||!n||!n.__esModule?a(t,\"default\",{value:n,enumerable:!0}):t,n)),C=n=>i(a({},\"__esModule\",{value:!0}),n);var l=x((A,d)=>{d.exports=_jsx_runtime});var v={};j(v,{default:()=>s,frontmatter:()=>M});var r=_(l()),M={title:\"\\u7279\\u6027\\u68C0\\u6D4B\\u3001\\u7279\\u6027\\u63A8\\u65AD\\u548C\\u4F7F\\u7528 UA \\u5B57\\u7B26\\u4E32\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function h(n){let e={a:\"a\",code:\"code\",h2:\"h2\",p:\"p\",pre:\"pre\",...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"\\u7279\\u6027\\u68C0\\u6D4B\"}),`\n`,(0,r.jsx)(e.p,{children:\"\\u7279\\u6027\\u68C0\\u6D4B\\u6D89\\u53CA\\u786E\\u5B9A\\u6D4F\\u89C8\\u5668\\u662F\\u5426\\u652F\\u6301\\u67D0\\u6BB5\\u4EE3\\u7801\\uFF0C\\u5E76\\u6839\\u636E\\u662F\\u5426\\u652F\\u6301\\u8FD0\\u884C\\u4E0D\\u540C\\u7684\\u4EE3\\u7801\\uFF08\\u6216\\u4E0D\\u652F\\u6301\\uFF09\\uFF0C\\u4EE5\\u4FBF\\u6D4F\\u89C8\\u5668\\u59CB\\u7EC8\\u63D0\\u4F9B\\u5DE5\\u4F5C\\u4F53\\u9A8C\\uFF0C\\u800C\\u4E0D\\u662F\\u5728\\u67D0\\u4E9B\\u6D4F\\u89C8\\u5668\\u4E2D\\u5D29\\u6E83/\\u51FA\\u9519\\u3002\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`if ('geolocation' in navigator) {\n  // \\u53EF\\u4EE5\\u4F7F\\u7528 navigator.geolocation\n} else {\n  // \\u5904\\u7406\\u7F3A\\u5C11\\u7684\\u529F\\u80FD\n}\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.a,{href:\"https://modernizr.com/\",children:\"Modernizr\"}),\" \\u662F\\u4E00\\u4E2A\\u5904\\u7406\\u7279\\u6027\\u68C0\\u6D4B\\u7684\\u597D\\u5E93\\u3002\"]}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u7279\\u6027\\u63A8\\u65AD\"}),`\n`,(0,r.jsx)(e.p,{children:\"\\u7279\\u6027\\u63A8\\u65AD\\u50CF\\u7279\\u6027\\u68C0\\u6D4B\\u4E00\\u6837\\u68C0\\u67E5\\u7279\\u6027\\uFF0C\\u4F46\\u4F7F\\u7528\\u53E6\\u4E00\\u4E2A\\u51FD\\u6570\\uFF0C\\u56E0\\u4E3A\\u5B83\\u5047\\u5B9A\\u5B83\\u4E5F\\u5C06\\u5B58\\u5728\\uFF0C\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-js\",children:`if (document.getElementsByTagName) {\n  element = document.getElementById(id);\n}\n`})}),`\n`,(0,r.jsx)(e.p,{children:\"\\u8FD9\\u771F\\u7684\\u4E0D\\u63A8\\u8350\\u3002\\u7279\\u6027\\u68C0\\u6D4B\\u66F4\\u4E07\\u65E0\\u4E00\\u5931\\u3002\"}),`\n`,(0,r.jsx)(e.h2,{children:\"UA \\u5B57\\u7B26\\u4E32\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u6D4F\\u89C8\\u5668\\u62A5\\u544A\\u7684\\u5B57\\u7B26\\u4E32\\uFF0C\\u5B83\\u5141\\u8BB8\\u7F51\\u7EDC\\u534F\\u8BAE\\u5BF9\\u7B49\\u65B9\\u8BC6\\u522B\\u8BF7\\u6C42\\u8F6F\\u4EF6\\u7528\\u6237\\u4EE3\\u7406\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u7C7B\\u578B\\u3001\\u64CD\\u4F5C\\u7CFB\\u7EDF\\u3001\\u8F6F\\u4EF6\\u4F9B\\u5E94\\u5546\\u6216\\u8F6F\\u4EF6\\u7248\\u672C\\u3002\\u53EF\\u4EE5\\u901A\\u8FC7 \",(0,r.jsx)(e.code,{children:\"navigator.userAgent\"}),\" \\u8BBF\\u95EE\\u5B83\\u3002\\u4F46\\u662F\\uFF0C\\u8BE5\\u5B57\\u7B26\\u4E32\\u5F88\\u96BE\\u89E3\\u6790\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u88AB\\u6B3A\\u9A97\\u3002\\u4F8B\\u5982\\uFF0CChrome \\u62A5\\u544A\\u4E3A Chrome \\u548C Safari\\u3002\\u56E0\\u6B64\\uFF0C\\u8981\\u68C0\\u6D4B Safari\\uFF0C\\u60A8\\u5FC5\\u987B\\u68C0\\u67E5 Safari \\u5B57\\u7B26\\u4E32\\u4EE5\\u53CA Chrome \\u5B57\\u7B26\\u4E32\\u7684\\u7F3A\\u5931\\u3002\\u907F\\u514D\\u4F7F\\u7528\\u6B64\\u65B9\\u6CD5\\u3002\"]})]})}function s(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(h,{...n})}):h(n)}return C(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-inline-and-inline-block/en-US.json b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-inline-and-inline-block/en-US.json
index 0f84288d6..629c504a3 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-inline-and-inline-block/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-inline-and-inline-block/en-US.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var u=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),m=(n,e)=>{for(var d in e)c(n,d,{get:e[d],enumerable:!0})},r=(n,e,d,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of b(e))!f.call(n,i)&&i!==d&&c(n,i,{get:()=>e[i],enumerable:!(l=p(e,i))||l.enumerable});return n};var w=(n,e,d)=>(d=n!=null?a(g(n)):{},r(e||!n||!n.__esModule?c(d,\"default\",{value:n,enumerable:!0}):d,n)),x=n=>r(c({},\"__esModule\",{value:!0}),n);var o=u((C,h)=>{h.exports=_jsx_runtime});var _={};m(_,{default:()=>j,frontmatter:()=>y});var t=w(o()),y={title:\"What's the difference between `block`, `inline`, and `inline-block`?\"};function s(n){let e=Object.assign({table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",code:\"code\",tbody:\"tbody\",td:\"td\"},n.components);return(0,t.jsxs)(e.table,{children:[(0,t.jsx)(e.thead,{children:(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.th,{children:\"Property\"}),(0,t.jsx)(e.th,{children:(0,t.jsx)(e.code,{children:\"block\"})}),(0,t.jsx)(e.th,{children:(0,t.jsx)(e.code,{children:\"inline-block\"})}),(0,t.jsx)(e.th,{children:(0,t.jsx)(e.code,{children:\"inline\"})})]})}),(0,t.jsxs)(e.tbody,{children:[(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Size\"}),(0,t.jsx)(e.td,{children:\"Fills up the width of its parent container.\"}),(0,t.jsx)(e.td,{children:\"Depends on content.\"}),(0,t.jsx)(e.td,{children:\"Depends on content.\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Positioning\"}),(0,t.jsxs)(e.td,{children:[\"Start on a new line and tolerates no HTML elements next to it (except when you add \",(0,t.jsx)(e.code,{children:\"float\"}),\")\"]}),(0,t.jsx)(e.td,{children:\"Flows along with other content and allows other elements beside it.\"}),(0,t.jsx)(e.td,{children:\"Flows along with other content and allows other elements beside it.\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsxs)(e.td,{children:[\"Can specify \",(0,t.jsx)(e.code,{children:\"width\"}),\" and \",(0,t.jsx)(e.code,{children:\"height\"})]}),(0,t.jsx)(e.td,{children:\"Yes\"}),(0,t.jsx)(e.td,{children:\"Yes\"}),(0,t.jsx)(e.td,{children:\"No. Will ignore if being set.\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsxs)(e.td,{children:[\"Can be aligned with \",(0,t.jsx)(e.code,{children:\"vertical-align\"})]}),(0,t.jsx)(e.td,{children:\"No\"}),(0,t.jsx)(e.td,{children:\"Yes\"}),(0,t.jsx)(e.td,{children:\"Yes\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Margins and paddings\"}),(0,t.jsx)(e.td,{children:\"All sides respected.\"}),(0,t.jsx)(e.td,{children:\"All sides respected.\"}),(0,t.jsxs)(e.td,{children:[\"Only horizontal sides respected. Vertical sides, if specified, do not affect layout. Vertical space it takes up depends on \",(0,t.jsx)(e.code,{children:\"line-height\"}),\", even though the \",(0,t.jsx)(e.code,{children:\"border\"}),\" and \",(0,t.jsx)(e.code,{children:\"padding\"}),\" appear visually around the content.\"]})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Float\"}),(0,t.jsx)(e.td,{children:\"-\"}),(0,t.jsx)(e.td,{children:\"-\"}),(0,t.jsxs)(e.td,{children:[\"Becomes like a \",(0,t.jsx)(e.code,{children:\"block\"}),\" element where you can set vertical margins and paddings.\"]})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Use Cases\"}),(0,t.jsxs)(e.td,{children:[\"Layout elements like \",(0,t.jsx)(e.code,{children:\"<div>\"}),\", \",(0,t.jsx)(e.code,{children:\"<p>\"}),\", \",(0,t.jsx)(e.code,{children:\"<section>\"}),\".\"]}),(0,t.jsx)(e.td,{children:\"Used for buttons, images, and form fields that need custom sizes but stay in line with text.\"}),(0,t.jsxs)(e.td,{children:[\"Links \",(0,t.jsx)(e.code,{children:\"<a>\"}),\", text formatting \",(0,t.jsx)(e.code,{children:\"<span>\"}),\", text styling - bold \",(0,t.jsx)(e.code,{children:\"<b>\"}),\", italics \",(0,t.jsx)(e.code,{children:\"<i>\"}),\".\"]})]})]})]})}function k(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(s,n)})):s(n)}var j=k;return x(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(d,e)=>()=>(e||d((e={exports:{}}).exports,e),e.exports),w=(d,e)=>{for(var n in e)c(d,n,{get:e[n],enumerable:!0})},r=(d,e,n,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of f(e))!g.call(d,i)&&i!==n&&c(d,i,{get:()=>e[i],enumerable:!(l=b(e,i))||l.enumerable});return d};var x=(d,e,n)=>(n=d!=null?p(u(d)):{},r(e||!d||!d.__esModule?c(n,\"default\",{value:d,enumerable:!0}):n,d)),y=d=>r(c({},\"__esModule\",{value:!0}),d);var o=m((v,h)=>{h.exports=_jsx_runtime});var _={};w(_,{default:()=>a,frontmatter:()=>k});var t=x(o()),k={title:\"What's the difference between `block`, `inline`, and `inline-block`?\"};function s(d){let e={code:\"code\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",...d.components};return(0,t.jsxs)(e.table,{children:[(0,t.jsx)(e.thead,{children:(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.th,{children:\"Property\"}),(0,t.jsx)(e.th,{children:(0,t.jsx)(e.code,{children:\"block\"})}),(0,t.jsx)(e.th,{children:(0,t.jsx)(e.code,{children:\"inline-block\"})}),(0,t.jsx)(e.th,{children:(0,t.jsx)(e.code,{children:\"inline\"})})]})}),(0,t.jsxs)(e.tbody,{children:[(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Size\"}),(0,t.jsx)(e.td,{children:\"Fills up the width of its parent container.\"}),(0,t.jsx)(e.td,{children:\"Depends on content.\"}),(0,t.jsx)(e.td,{children:\"Depends on content.\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Positioning\"}),(0,t.jsxs)(e.td,{children:[\"Start on a new line and tolerates no HTML elements next to it (except when you add \",(0,t.jsx)(e.code,{children:\"float\"}),\")\"]}),(0,t.jsx)(e.td,{children:\"Flows along with other content and allows other elements beside it.\"}),(0,t.jsx)(e.td,{children:\"Flows along with other content and allows other elements beside it.\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsxs)(e.td,{children:[\"Can specify \",(0,t.jsx)(e.code,{children:\"width\"}),\" and \",(0,t.jsx)(e.code,{children:\"height\"})]}),(0,t.jsx)(e.td,{children:\"Yes\"}),(0,t.jsx)(e.td,{children:\"Yes\"}),(0,t.jsx)(e.td,{children:\"No. Will ignore if being set.\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsxs)(e.td,{children:[\"Can be aligned with \",(0,t.jsx)(e.code,{children:\"vertical-align\"})]}),(0,t.jsx)(e.td,{children:\"No\"}),(0,t.jsx)(e.td,{children:\"Yes\"}),(0,t.jsx)(e.td,{children:\"Yes\"})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Margins and paddings\"}),(0,t.jsx)(e.td,{children:\"All sides respected.\"}),(0,t.jsx)(e.td,{children:\"All sides respected.\"}),(0,t.jsxs)(e.td,{children:[\"Only horizontal sides respected. Vertical sides, if specified, do not affect layout. Vertical space it takes up depends on \",(0,t.jsx)(e.code,{children:\"line-height\"}),\", even though the \",(0,t.jsx)(e.code,{children:\"border\"}),\" and \",(0,t.jsx)(e.code,{children:\"padding\"}),\" appear visually around the content.\"]})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Float\"}),(0,t.jsx)(e.td,{children:\"-\"}),(0,t.jsx)(e.td,{children:\"-\"}),(0,t.jsxs)(e.td,{children:[\"Becomes like a \",(0,t.jsx)(e.code,{children:\"block\"}),\" element where you can set vertical margins and paddings.\"]})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:\"Use Cases\"}),(0,t.jsxs)(e.td,{children:[\"Layout elements like \",(0,t.jsx)(e.code,{children:\"<div>\"}),\", \",(0,t.jsx)(e.code,{children:\"<p>\"}),\", \",(0,t.jsx)(e.code,{children:\"<section>\"}),\".\"]}),(0,t.jsx)(e.td,{children:\"Used for buttons, images, and form fields that need custom sizes but stay in line with text.\"}),(0,t.jsxs)(e.td,{children:[\"Links \",(0,t.jsx)(e.code,{children:\"<a>\"}),\", text formatting \",(0,t.jsx)(e.code,{children:\"<span>\"}),\", text styling - bold \",(0,t.jsx)(e.code,{children:\"<b>\"}),\", italics \",(0,t.jsx)(e.code,{children:\"<i>\"}),\".\"]})]})]})]})}function a(d={}){let{wrapper:e}=d.components||{};return e?(0,t.jsx)(e,{...d,children:(0,t.jsx)(s,{...d})}):s(d)}return y(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-inline-and-inline-block/pt-BR.json b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-inline-and-inline-block/pt-BR.json
index 6c7e5b8b1..dee894f6a 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-inline-and-inline-block/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-inline-and-inline-block/pt-BR.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),g=(o,e)=>{for(var n in e)r(o,n,{get:e[n],enumerable:!0})},c=(o,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of u(e))!b.call(o,t)&&t!==n&&r(o,t,{get:()=>e[t],enumerable:!(i=m(e,t))||i.enumerable});return o};var j=(o,e,n)=>(n=o!=null?s(p(o)):{},c(e||!o||!o.__esModule?r(n,\"default\",{value:o,enumerable:!0}):n,o)),x=o=>c(r({},\"__esModule\",{value:!0}),o);var a=f((F,l)=>{l.exports=_jsx_runtime});var y={};g(y,{default:()=>_,frontmatter:()=>v});var d=j(a()),v={title:\"Qual \\xE9 a diferen\\xE7a entre `inline` e `inline-block`?\"};function h(o){let e=Object.assign({p:\"p\",code:\"code\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\"},o.components);return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)(e.p,{children:[\"Vamos tamb\\xE9m comparar com \",(0,d.jsx)(e.code,{children:\"display: block\"}),\" para completar.\"]}),`\n`,(0,d.jsxs)(e.table,{children:[(0,d.jsx)(e.thead,{children:(0,d.jsxs)(e.tr,{children:[(0,d.jsx)(e.th,{children:\"Propriedade\"}),(0,d.jsx)(e.th,{children:(0,d.jsx)(e.code,{children:\"block\"})}),(0,d.jsx)(e.th,{children:(0,d.jsx)(e.code,{children:\"inline-block\"})}),(0,d.jsx)(e.th,{children:(0,d.jsx)(e.code,{children:\"inline\"})})]})}),(0,d.jsxs)(e.tbody,{children:[(0,d.jsxs)(e.tr,{children:[(0,d.jsx)(e.td,{children:\"Tamanho\"}),(0,d.jsx)(e.td,{children:\"Preenche a largura do cont\\xEAiner pai.\"}),(0,d.jsx)(e.td,{children:\"Depende do conte\\xFAdo.\"}),(0,d.jsx)(e.td,{children:\"Depende do conte\\xFAdo.\"})]}),(0,d.jsxs)(e.tr,{children:[(0,d.jsx)(e.td,{children:\"Posicionamento\"}),(0,d.jsxs)(e.td,{children:[\"Comece em uma nova linha e n\\xE3o tolera nenhum elemento HTML ao lado (exceto quando voc\\xEA adiciona \",(0,d.jsx)(e.code,{children:\"float\"}),\")\"]}),(0,d.jsx)(e.td,{children:\"Flui juntamente com outros conte\\xFAdos e permite que outros elementos fiquem ao seu lado.\"}),(0,d.jsx)(e.td,{children:\"Flui juntamente com outros conte\\xFAdos e permite que outros elementos fiquem ao seu lado.\"})]}),(0,d.jsxs)(e.tr,{children:[(0,d.jsx)(e.td,{children:\"Pode especificar 'largura' e 'altura'\"}),(0,d.jsx)(e.td,{children:\"Sim\"}),(0,d.jsx)(e.td,{children:\"Sim\"}),(0,d.jsx)(e.td,{children:\"N\\xE3o. Ignorar\\xE1 se j\\xE1 estiver definido.\"})]}),(0,d.jsxs)(e.tr,{children:[(0,d.jsxs)(e.td,{children:[\"Pode ser alinhado com \",(0,d.jsx)(e.code,{children:\"vertical-align\"})]}),(0,d.jsx)(e.td,{children:\"N\\xE3o\"}),(0,d.jsx)(e.td,{children:\"Sim\"}),(0,d.jsx)(e.td,{children:\"Sim\"})]}),(0,d.jsxs)(e.tr,{children:[(0,d.jsx)(e.td,{children:\"Margem e Alinhamento\"}),(0,d.jsx)(e.td,{children:\"Todos os lados s\\xE3o respeitados.\"}),(0,d.jsx)(e.td,{children:\"Todos os lados s\\xE3o respeitados.\"}),(0,d.jsxs)(e.td,{children:[\"Apenas os lados horizontais respeitados. Os lados verticais, se especificados, n\\xE3o afetam o layout. O espa\\xE7o vertical que ocupa depende do \",(0,d.jsx)(e.code,{children:\"line-height\"}),\", mesmo que o \",(0,d.jsx)(e.code,{children:\"border\"}),\" e \",(0,d.jsx)(e.code,{children:\"padding\"}),\" apare\\xE7am visualmente em torno do conte\\xFAdo.\"]})]}),(0,d.jsxs)(e.tr,{children:[(0,d.jsx)(e.td,{children:\"Float\"}),(0,d.jsx)(e.td,{children:\"-\"}),(0,d.jsx)(e.td,{children:\"-\"}),(0,d.jsxs)(e.td,{children:[\"Torna-se como um elemento \",(0,d.jsx)(e.code,{children:\"block\"}),\" onde voc\\xEA pode definir margens e preenchimentos verticais.\"]})]})]})]})]})}function q(o={}){let{wrapper:e}=o.components||{};return e?(0,d.jsx)(e,Object.assign({},o,{children:(0,d.jsx)(h,o)})):h(o)}var _=q;return x(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var n in e)r(o,n,{get:e[n],enumerable:!0})},c=(o,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of p(e))!b.call(o,t)&&t!==n&&r(o,t,{get:()=>e[t],enumerable:!(i=u(e,t))||i.enumerable});return o};var v=(o,e,n)=>(n=o!=null?m(f(o)):{},c(e||!o||!o.__esModule?r(n,\"default\",{value:o,enumerable:!0}):n,o)),j=o=>c(r({},\"__esModule\",{value:!0}),o);var a=g((k,l)=>{l.exports=_jsx_runtime});var _={};x(_,{default:()=>s,frontmatter:()=>q});var d=v(a()),q={title:\"Qual \\xE9 a diferen\\xE7a entre `inline` e `inline-block`?\"};function h(o){let e={code:\"code\",p:\"p\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",...o.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)(e.p,{children:[\"Vamos tamb\\xE9m comparar com \",(0,d.jsx)(e.code,{children:\"display: block\"}),\" para completar.\"]}),`\n`,(0,d.jsxs)(e.table,{children:[(0,d.jsx)(e.thead,{children:(0,d.jsxs)(e.tr,{children:[(0,d.jsx)(e.th,{children:\"Propriedade\"}),(0,d.jsx)(e.th,{children:(0,d.jsx)(e.code,{children:\"block\"})}),(0,d.jsx)(e.th,{children:(0,d.jsx)(e.code,{children:\"inline-block\"})}),(0,d.jsx)(e.th,{children:(0,d.jsx)(e.code,{children:\"inline\"})})]})}),(0,d.jsxs)(e.tbody,{children:[(0,d.jsxs)(e.tr,{children:[(0,d.jsx)(e.td,{children:\"Tamanho\"}),(0,d.jsx)(e.td,{children:\"Preenche a largura do cont\\xEAiner pai.\"}),(0,d.jsx)(e.td,{children:\"Depende do conte\\xFAdo.\"}),(0,d.jsx)(e.td,{children:\"Depende do conte\\xFAdo.\"})]}),(0,d.jsxs)(e.tr,{children:[(0,d.jsx)(e.td,{children:\"Posicionamento\"}),(0,d.jsxs)(e.td,{children:[\"Comece em uma nova linha e n\\xE3o tolera nenhum elemento HTML ao lado (exceto quando voc\\xEA adiciona \",(0,d.jsx)(e.code,{children:\"float\"}),\")\"]}),(0,d.jsx)(e.td,{children:\"Flui juntamente com outros conte\\xFAdos e permite que outros elementos fiquem ao seu lado.\"}),(0,d.jsx)(e.td,{children:\"Flui juntamente com outros conte\\xFAdos e permite que outros elementos fiquem ao seu lado.\"})]}),(0,d.jsxs)(e.tr,{children:[(0,d.jsx)(e.td,{children:\"Pode especificar 'largura' e 'altura'\"}),(0,d.jsx)(e.td,{children:\"Sim\"}),(0,d.jsx)(e.td,{children:\"Sim\"}),(0,d.jsx)(e.td,{children:\"N\\xE3o. Ignorar\\xE1 se j\\xE1 estiver definido.\"})]}),(0,d.jsxs)(e.tr,{children:[(0,d.jsxs)(e.td,{children:[\"Pode ser alinhado com \",(0,d.jsx)(e.code,{children:\"vertical-align\"})]}),(0,d.jsx)(e.td,{children:\"N\\xE3o\"}),(0,d.jsx)(e.td,{children:\"Sim\"}),(0,d.jsx)(e.td,{children:\"Sim\"})]}),(0,d.jsxs)(e.tr,{children:[(0,d.jsx)(e.td,{children:\"Margem e Alinhamento\"}),(0,d.jsx)(e.td,{children:\"Todos os lados s\\xE3o respeitados.\"}),(0,d.jsx)(e.td,{children:\"Todos os lados s\\xE3o respeitados.\"}),(0,d.jsxs)(e.td,{children:[\"Apenas os lados horizontais respeitados. Os lados verticais, se especificados, n\\xE3o afetam o layout. O espa\\xE7o vertical que ocupa depende do \",(0,d.jsx)(e.code,{children:\"line-height\"}),\", mesmo que o \",(0,d.jsx)(e.code,{children:\"border\"}),\" e \",(0,d.jsx)(e.code,{children:\"padding\"}),\" apare\\xE7am visualmente em torno do conte\\xFAdo.\"]})]}),(0,d.jsxs)(e.tr,{children:[(0,d.jsx)(e.td,{children:\"Float\"}),(0,d.jsx)(e.td,{children:\"-\"}),(0,d.jsx)(e.td,{children:\"-\"}),(0,d.jsxs)(e.td,{children:[\"Torna-se como um elemento \",(0,d.jsx)(e.code,{children:\"block\"}),\" onde voc\\xEA pode definir margens e preenchimentos verticais.\"]})]})]})]})]})}function s(o={}){let{wrapper:e}=o.components||{};return e?(0,d.jsx)(e,{...o,children:(0,d.jsx)(h,{...o})}):h(o)}return j(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-inline-and-inline-block/zh-CN.json b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-inline-and-inline-block/zh-CN.json
index 144d4ae65..52847e6a6 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-inline-and-inline-block/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-inline-and-inline-block/zh-CN.json
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var u=(c,d)=>()=>(d||c((d={exports:{}}).exports,d),d.exports),f=(c,d)=>{for(var n in d)i(c,n,{get:d[n],enumerable:!0})},l=(c,d,n,r)=>{if(d&&typeof d==\"object\"||typeof d==\"function\")for(let t of x(d))!m.call(c,t)&&t!==n&&i(c,t,{get:()=>d[t],enumerable:!(r=b(d,t))||r.enumerable});return c};var g=(c,d,n)=>(n=c!=null?s(j(c)):{},l(d||!c||!c.__esModule?i(n,\"default\",{value:c,enumerable:!0}):n,c)),p=c=>l(i({},\"__esModule\",{value:!0}),c);var o=u((w,h)=>{h.exports=_jsx_runtime});var M={};f(M,{default:()=>y,frontmatter:()=>_});var e=g(o()),_={title:\"block\\u3001inline \\u548C inline-block \\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function a(c){let d=Object.assign({table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",code:\"code\",tbody:\"tbody\",td:\"td\"},c.components);return(0,e.jsxs)(d.table,{children:[(0,e.jsx)(d.thead,{children:(0,e.jsxs)(d.tr,{children:[(0,e.jsx)(d.th,{children:\"\\u5C5E\\u6027\"}),(0,e.jsx)(d.th,{children:(0,e.jsx)(d.code,{children:\"block\"})}),(0,e.jsx)(d.th,{children:(0,e.jsx)(d.code,{children:\"inline-block\"})}),(0,e.jsx)(d.th,{children:(0,e.jsx)(d.code,{children:\"inline\"})})]})}),(0,e.jsxs)(d.tbody,{children:[(0,e.jsxs)(d.tr,{children:[(0,e.jsx)(d.td,{children:\"\\u5C3A\\u5BF8\"}),(0,e.jsx)(d.td,{children:\"\\u586B\\u5145\\u7236\\u5BB9\\u5668\\u7684\\u5BBD\\u5EA6\\u3002\"}),(0,e.jsx)(d.td,{children:\"\\u53D6\\u51B3\\u4E8E\\u5185\\u5BB9\\u3002\"}),(0,e.jsx)(d.td,{children:\"\\u53D6\\u51B3\\u4E8E\\u5185\\u5BB9\\u3002\"})]}),(0,e.jsxs)(d.tr,{children:[(0,e.jsx)(d.td,{children:\"\\u5B9A\\u4F4D\"}),(0,e.jsxs)(d.td,{children:[\"\\u4ECE\\u65B0\\u884C\\u5F00\\u59CB\\uFF0C\\u5E76\\u4E14\\u4E0D\\u5141\\u8BB8\\u5728\\u5176\\u65C1\\u8FB9\\u6709\\u5176\\u4ED6 HTML \\u5143\\u7D20\\uFF08\\u9664\\u975E\\u4F60\\u6DFB\\u52A0 \",(0,e.jsx)(d.code,{children:\"float\"}),\"\\uFF09\"]}),(0,e.jsx)(d.td,{children:\"\\u4E0E\\u5176\\u4ED6\\u5185\\u5BB9\\u4E00\\u8D77\\u6D41\\u52A8\\uFF0C\\u5E76\\u5141\\u8BB8\\u5176\\u4ED6\\u5143\\u7D20\\u5728\\u5176\\u65C1\\u8FB9\\u3002\"}),(0,e.jsx)(d.td,{children:\"\\u4E0E\\u5176\\u4ED6\\u5185\\u5BB9\\u4E00\\u8D77\\u6D41\\u52A8\\uFF0C\\u5E76\\u5141\\u8BB8\\u5176\\u4ED6\\u5143\\u7D20\\u5728\\u5176\\u65C1\\u8FB9\\u3002\"})]}),(0,e.jsxs)(d.tr,{children:[(0,e.jsxs)(d.td,{children:[\"\\u53EF\\u4EE5\\u6307\\u5B9A \",(0,e.jsx)(d.code,{children:\"width\"}),\" \\u548C \",(0,e.jsx)(d.code,{children:\"height\"})]}),(0,e.jsx)(d.td,{children:\"\\u662F\"}),(0,e.jsx)(d.td,{children:\"\\u662F\"}),(0,e.jsx)(d.td,{children:\"\\u5426\\u3002\\u5982\\u679C\\u8BBE\\u7F6E\\u5C06\\u88AB\\u5FFD\\u7565\\u3002\"})]}),(0,e.jsxs)(d.tr,{children:[(0,e.jsxs)(d.td,{children:[\"\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(d.code,{children:\"vertical-align\"}),\" \\u5BF9\\u9F50\"]}),(0,e.jsx)(d.td,{children:\"\\u5426\"}),(0,e.jsx)(d.td,{children:\"\\u662F\"}),(0,e.jsx)(d.td,{children:\"\\u662F\"})]}),(0,e.jsxs)(d.tr,{children:[(0,e.jsx)(d.td,{children:\"\\u8FB9\\u8DDD\\u548C\\u5185\\u8FB9\\u8DDD\"}),(0,e.jsx)(d.td,{children:\"\\u6240\\u6709\\u8FB9\\u90FD\\u53D7\\u5C0A\\u91CD\\u3002\"}),(0,e.jsx)(d.td,{children:\"\\u6240\\u6709\\u8FB9\\u90FD\\u53D7\\u5C0A\\u91CD\\u3002\"}),(0,e.jsxs)(d.td,{children:[\"\\u4EC5\\u6C34\\u5E73\\u8FB9\\u53D7\\u5C0A\\u91CD\\u3002\\u5782\\u76F4\\u8FB9\\uFF08\\u5982\\u679C\\u6307\\u5B9A\\uFF09\\u4E0D\\u5F71\\u54CD\\u5E03\\u5C40\\u3002\\u5B83\\u5360\\u7528\\u7684\\u5782\\u76F4\\u7A7A\\u95F4\\u53D6\\u51B3\\u4E8E \",(0,e.jsx)(d.code,{children:\"line-height\"}),\"\\uFF0C\\u5373\\u4F7F \",(0,e.jsx)(d.code,{children:\"border\"}),\" \\u548C \",(0,e.jsx)(d.code,{children:\"padding\"}),\" \\u5728\\u5185\\u5BB9\\u5468\\u56F4\\u53EF\\u89C1\\u3002\"]})]}),(0,e.jsxs)(d.tr,{children:[(0,e.jsx)(d.td,{children:\"Float\"}),(0,e.jsx)(d.td,{children:\"-\"}),(0,e.jsx)(d.td,{children:\"-\"}),(0,e.jsxs)(d.td,{children:[\"\\u53D8\\u6210\\u7C7B\\u4F3C \",(0,e.jsx)(d.code,{children:\"block\"}),\" \\u5143\\u7D20\\uFF0C\\u4F60\\u53EF\\u4EE5\\u5728\\u5176\\u4E2D\\u8BBE\\u7F6E\\u5782\\u76F4\\u8FB9\\u8DDD\\u548C\\u5185\\u8FB9\\u8DDD\\u3002\"]})]}),(0,e.jsxs)(d.tr,{children:[(0,e.jsx)(d.td,{children:\"\\u7528\\u4F8B\"}),(0,e.jsxs)(d.td,{children:[\"\\u5E03\\u5C40\\u5143\\u7D20\\uFF0C\\u5982 \",(0,e.jsx)(d.code,{children:\"<div>\"}),\"\\u3001\",(0,e.jsx)(d.code,{children:\"<p>\"}),\"\\u3001\",(0,e.jsx)(d.code,{children:\"<section>\"}),\"\\u3002\"]}),(0,e.jsx)(d.td,{children:\"\\u7528\\u4E8E\\u9700\\u8981\\u81EA\\u5B9A\\u4E49\\u5927\\u5C0F\\u4F46\\u4E0E\\u6587\\u672C\\u4FDD\\u6301\\u4E00\\u81F4\\u7684\\u6309\\u94AE\\u3001\\u56FE\\u50CF\\u548C\\u8868\\u5355\\u5B57\\u6BB5\\u3002\"}),(0,e.jsxs)(d.td,{children:[\"\\u94FE\\u63A5 \",(0,e.jsx)(d.code,{children:\"<a>\"}),\"\\u3001\\u6587\\u672C\\u683C\\u5F0F \",(0,e.jsx)(d.code,{children:\"<span>\"}),\"\\u3001\\u6587\\u672C\\u6837\\u5F0F - \\u7C97\\u4F53 \",(0,e.jsx)(d.code,{children:\"<b>\"}),\"\\u3001\\u659C\\u4F53 \",(0,e.jsx)(d.code,{children:\"<i>\"}),\"\\u3002\"]})]})]})]})}function k(c={}){let{wrapper:d}=c.components||{};return d?(0,e.jsx)(d,Object.assign({},c,{children:(0,e.jsx)(a,c)})):a(c)}var y=k;return p(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var b=Object.create;var r=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var p=(c,d)=>()=>(d||c((d={exports:{}}).exports,d),d.exports),_=(c,d)=>{for(var n in d)r(c,n,{get:d[n],enumerable:!0})},l=(c,d,n,i)=>{if(d&&typeof d==\"object\"||typeof d==\"function\")for(let t of m(d))!f.call(c,t)&&t!==n&&r(c,t,{get:()=>d[t],enumerable:!(i=x(d,t))||i.enumerable});return c};var j=(c,d,n)=>(n=c!=null?b(u(c)):{},l(d||!c||!c.__esModule?r(n,\"default\",{value:c,enumerable:!0}):n,c)),k=c=>l(r({},\"__esModule\",{value:!0}),c);var o=p((v,h)=>{h.exports=_jsx_runtime});var y={};_(y,{default:()=>s,frontmatter:()=>g});var e=j(o()),g={title:\"block\\u3001inline \\u548C inline-block \\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\"};function a(c){let d={code:\"code\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",...c.components};return(0,e.jsxs)(d.table,{children:[(0,e.jsx)(d.thead,{children:(0,e.jsxs)(d.tr,{children:[(0,e.jsx)(d.th,{children:\"\\u5C5E\\u6027\"}),(0,e.jsx)(d.th,{children:(0,e.jsx)(d.code,{children:\"block\"})}),(0,e.jsx)(d.th,{children:(0,e.jsx)(d.code,{children:\"inline-block\"})}),(0,e.jsx)(d.th,{children:(0,e.jsx)(d.code,{children:\"inline\"})})]})}),(0,e.jsxs)(d.tbody,{children:[(0,e.jsxs)(d.tr,{children:[(0,e.jsx)(d.td,{children:\"\\u5C3A\\u5BF8\"}),(0,e.jsx)(d.td,{children:\"\\u586B\\u5145\\u7236\\u5BB9\\u5668\\u7684\\u5BBD\\u5EA6\\u3002\"}),(0,e.jsx)(d.td,{children:\"\\u53D6\\u51B3\\u4E8E\\u5185\\u5BB9\\u3002\"}),(0,e.jsx)(d.td,{children:\"\\u53D6\\u51B3\\u4E8E\\u5185\\u5BB9\\u3002\"})]}),(0,e.jsxs)(d.tr,{children:[(0,e.jsx)(d.td,{children:\"\\u5B9A\\u4F4D\"}),(0,e.jsxs)(d.td,{children:[\"\\u4ECE\\u65B0\\u884C\\u5F00\\u59CB\\uFF0C\\u5E76\\u4E14\\u4E0D\\u5141\\u8BB8\\u5728\\u5176\\u65C1\\u8FB9\\u6709\\u5176\\u4ED6 HTML \\u5143\\u7D20\\uFF08\\u9664\\u975E\\u4F60\\u6DFB\\u52A0 \",(0,e.jsx)(d.code,{children:\"float\"}),\"\\uFF09\"]}),(0,e.jsx)(d.td,{children:\"\\u4E0E\\u5176\\u4ED6\\u5185\\u5BB9\\u4E00\\u8D77\\u6D41\\u52A8\\uFF0C\\u5E76\\u5141\\u8BB8\\u5176\\u4ED6\\u5143\\u7D20\\u5728\\u5176\\u65C1\\u8FB9\\u3002\"}),(0,e.jsx)(d.td,{children:\"\\u4E0E\\u5176\\u4ED6\\u5185\\u5BB9\\u4E00\\u8D77\\u6D41\\u52A8\\uFF0C\\u5E76\\u5141\\u8BB8\\u5176\\u4ED6\\u5143\\u7D20\\u5728\\u5176\\u65C1\\u8FB9\\u3002\"})]}),(0,e.jsxs)(d.tr,{children:[(0,e.jsxs)(d.td,{children:[\"\\u53EF\\u4EE5\\u6307\\u5B9A \",(0,e.jsx)(d.code,{children:\"width\"}),\" \\u548C \",(0,e.jsx)(d.code,{children:\"height\"})]}),(0,e.jsx)(d.td,{children:\"\\u662F\"}),(0,e.jsx)(d.td,{children:\"\\u662F\"}),(0,e.jsx)(d.td,{children:\"\\u5426\\u3002\\u5982\\u679C\\u8BBE\\u7F6E\\u5C06\\u88AB\\u5FFD\\u7565\\u3002\"})]}),(0,e.jsxs)(d.tr,{children:[(0,e.jsxs)(d.td,{children:[\"\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,e.jsx)(d.code,{children:\"vertical-align\"}),\" \\u5BF9\\u9F50\"]}),(0,e.jsx)(d.td,{children:\"\\u5426\"}),(0,e.jsx)(d.td,{children:\"\\u662F\"}),(0,e.jsx)(d.td,{children:\"\\u662F\"})]}),(0,e.jsxs)(d.tr,{children:[(0,e.jsx)(d.td,{children:\"\\u8FB9\\u8DDD\\u548C\\u5185\\u8FB9\\u8DDD\"}),(0,e.jsx)(d.td,{children:\"\\u6240\\u6709\\u8FB9\\u90FD\\u53D7\\u5C0A\\u91CD\\u3002\"}),(0,e.jsx)(d.td,{children:\"\\u6240\\u6709\\u8FB9\\u90FD\\u53D7\\u5C0A\\u91CD\\u3002\"}),(0,e.jsxs)(d.td,{children:[\"\\u4EC5\\u6C34\\u5E73\\u8FB9\\u53D7\\u5C0A\\u91CD\\u3002\\u5782\\u76F4\\u8FB9\\uFF08\\u5982\\u679C\\u6307\\u5B9A\\uFF09\\u4E0D\\u5F71\\u54CD\\u5E03\\u5C40\\u3002\\u5B83\\u5360\\u7528\\u7684\\u5782\\u76F4\\u7A7A\\u95F4\\u53D6\\u51B3\\u4E8E \",(0,e.jsx)(d.code,{children:\"line-height\"}),\"\\uFF0C\\u5373\\u4F7F \",(0,e.jsx)(d.code,{children:\"border\"}),\" \\u548C \",(0,e.jsx)(d.code,{children:\"padding\"}),\" \\u5728\\u5185\\u5BB9\\u5468\\u56F4\\u53EF\\u89C1\\u3002\"]})]}),(0,e.jsxs)(d.tr,{children:[(0,e.jsx)(d.td,{children:\"Float\"}),(0,e.jsx)(d.td,{children:\"-\"}),(0,e.jsx)(d.td,{children:\"-\"}),(0,e.jsxs)(d.td,{children:[\"\\u53D8\\u6210\\u7C7B\\u4F3C \",(0,e.jsx)(d.code,{children:\"block\"}),\" \\u5143\\u7D20\\uFF0C\\u4F60\\u53EF\\u4EE5\\u5728\\u5176\\u4E2D\\u8BBE\\u7F6E\\u5782\\u76F4\\u8FB9\\u8DDD\\u548C\\u5185\\u8FB9\\u8DDD\\u3002\"]})]}),(0,e.jsxs)(d.tr,{children:[(0,e.jsx)(d.td,{children:\"\\u7528\\u4F8B\"}),(0,e.jsxs)(d.td,{children:[\"\\u5E03\\u5C40\\u5143\\u7D20\\uFF0C\\u5982 \",(0,e.jsx)(d.code,{children:\"<div>\"}),\"\\u3001\",(0,e.jsx)(d.code,{children:\"<p>\"}),\"\\u3001\",(0,e.jsx)(d.code,{children:\"<section>\"}),\"\\u3002\"]}),(0,e.jsx)(d.td,{children:\"\\u7528\\u4E8E\\u9700\\u8981\\u81EA\\u5B9A\\u4E49\\u5927\\u5C0F\\u4F46\\u4E0E\\u6587\\u672C\\u4FDD\\u6301\\u4E00\\u81F4\\u7684\\u6309\\u94AE\\u3001\\u56FE\\u50CF\\u548C\\u8868\\u5355\\u5B57\\u6BB5\\u3002\"}),(0,e.jsxs)(d.td,{children:[\"\\u94FE\\u63A5 \",(0,e.jsx)(d.code,{children:\"<a>\"}),\"\\u3001\\u6587\\u672C\\u683C\\u5F0F \",(0,e.jsx)(d.code,{children:\"<span>\"}),\"\\u3001\\u6587\\u672C\\u6837\\u5F0F - \\u7C97\\u4F53 \",(0,e.jsx)(d.code,{children:\"<b>\"}),\"\\u3001\\u659C\\u4F53 \",(0,e.jsx)(d.code,{children:\"<i>\"}),\"\\u3002\"]})]})]})]})}function s(c={}){let{wrapper:d}=c.components||{};return d?(0,e.jsx)(d,{...c,children:(0,e.jsx)(a,{...c})}):a(c)}return k(y);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/en-US.json b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/en-US.json
index 61cd939b7..2d8a1da3f 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var o in e)i(n,o,{get:e[o],enumerable:!0})},d=(n,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!y.call(n,r)&&r!==o&&i(n,r,{get:()=>e[r],enumerable:!(s=g(e,r))||s.enumerable});return n};var p=(n,e,o)=>(o=n!=null?a(u(n)):{},d(e||!n||!n.__esModule?i(o,\"default\",{value:n,enumerable:!0}):o,n)),w=n=>d(i({},\"__esModule\",{value:!0}),n);var c=f((C,l)=>{l.exports=_jsx_runtime});var _={};b(_,{default:()=>v,frontmatter:()=>x});var t=p(c()),x={title:`What's the difference between \"resetting\" and \"normalizing\" CSS?`,subtitle:\"Which would you choose, and why?\"};function h(n){let e=Object.assign({table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",strong:\"strong\",code:\"code\",h2:\"h2\",p:\"p\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.table,{children:[(0,t.jsx)(e.thead,{children:(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.th,{children:\"Term\"}),(0,t.jsx)(e.th,{children:\"Definition\"})]})}),(0,t.jsxs)(e.tbody,{children:[(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:(0,t.jsx)(e.strong,{children:\"Resetting\"})}),(0,t.jsxs)(e.td,{children:[\"Resetting is meant to strip all default browser styling on elements. For e.g. \",(0,t.jsx)(e.code,{children:\"margin\"}),\"s, \",(0,t.jsx)(e.code,{children:\"padding\"}),\"s, \",(0,t.jsx)(e.code,{children:\"font-size\"}),\"s of all elements are reset to be the same. You will have to redeclare styling for common typographic elements.\"]})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:(0,t.jsx)(e.strong,{children:\"Normalizing\"})}),(0,t.jsx)(e.td,{children:'Normalizing preserves useful default styles rather than \"unstyling\" everything. It also corrects bugs for common browser dependencies.'})]})]})]}),`\n`,(0,t.jsx)(e.h2,{children:\"Which to choose and why?\"}),`\n`,(0,t.jsx)(e.p,{children:\"Choose resetting when you need to have a very customized or unconventional site design such that you need to do a lot of your own styling and do not need any default styling to be preserved.\"})]})}function j(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var v=j;return w(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var g=Object.create;var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),p=(n,e)=>{for(var o in e)d(n,o,{get:e[o],enumerable:!0})},s=(n,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!f.call(n,r)&&r!==o&&d(n,r,{get:()=>e[r],enumerable:!(i=m(e,r))||i.enumerable});return n};var w=(n,e,o)=>(o=n!=null?g(y(n)):{},s(e||!n||!n.__esModule?d(o,\"default\",{value:n,enumerable:!0}):o,n)),x=n=>s(d({},\"__esModule\",{value:!0}),n);var h=b((z,l)=>{l.exports=_jsx_runtime});var _={};p(_,{default:()=>a,frontmatter:()=>v});var t=w(h()),v={title:`What's the difference between \"resetting\" and \"normalizing\" CSS?`,subtitle:\"Which would you choose, and why?\"};function c(n){let e={code:\"code\",h2:\"h2\",p:\"p\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.table,{children:[(0,t.jsx)(e.thead,{children:(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.th,{children:\"Term\"}),(0,t.jsx)(e.th,{children:\"Definition\"})]})}),(0,t.jsxs)(e.tbody,{children:[(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:(0,t.jsx)(e.strong,{children:\"Resetting\"})}),(0,t.jsxs)(e.td,{children:[\"Resetting is meant to strip all default browser styling on elements. For e.g. \",(0,t.jsx)(e.code,{children:\"margin\"}),\"s, \",(0,t.jsx)(e.code,{children:\"padding\"}),\"s, \",(0,t.jsx)(e.code,{children:\"font-size\"}),\"s of all elements are reset to be the same. You will have to redeclare styling for common typographic elements.\"]})]}),(0,t.jsxs)(e.tr,{children:[(0,t.jsx)(e.td,{children:(0,t.jsx)(e.strong,{children:\"Normalizing\"})}),(0,t.jsx)(e.td,{children:'Normalizing preserves useful default styles rather than \"unstyling\" everything. It also corrects bugs for common browser dependencies.'})]})]})]}),`\n`,(0,t.jsx)(e.h2,{children:\"Which to choose and why?\"}),`\n`,(0,t.jsx)(e.p,{children:\"Choose resetting when you need to have a very customized or unconventional site design such that you need to do a lot of your own styling and do not need any default styling to be preserved.\"})]})}function a(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(c,{...n})}):c(n)}return x(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/pt-BR.json b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/pt-BR.json
index 46aea8887..33ab491cf 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),b=(r,e)=>{for(var t in e)d(r,t,{get:e[t],enumerable:!0})},s=(r,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of u(e))!g.call(r,n)&&n!==t&&d(r,n,{get:()=>e[n],enumerable:!(i=m(e,n))||i.enumerable});return r};var v=(r,e,t)=>(t=r!=null?h(p(r)):{},s(e||!r||!r.__esModule?d(t,\"default\",{value:r,enumerable:!0}):t,r)),x=r=>s(d({},\"__esModule\",{value:!0}),r);var c=f((C,a)=>{a.exports=_jsx_runtime});var q={};b(q,{default:()=>z,frontmatter:()=>j});var o=v(c()),j={title:'Qual \\xE9 a diferen\\xE7a entre \"resetting\" e \"normalizing\" CSS?',subtitle:\"Qual voc\\xEA escolheria e por qu\\xEA?\"};function l(r){let e=Object.assign({table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",strong:\"strong\",code:\"code\",h2:\"h2\",p:\"p\"},r.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.table,{children:[(0,o.jsx)(e.thead,{children:(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.th,{children:\"Termo\"}),(0,o.jsx)(e.th,{children:\"Defini\\xE7\\xE3o\"})]})}),(0,o.jsxs)(e.tbody,{children:[(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:(0,o.jsx)(e.strong,{children:\"Resetando\"})}),(0,o.jsxs)(e.td,{children:[\"Redefinir tem o objetivo de remover toda a formata\\xE7\\xE3o padr\\xE3o do navegador nos elementos. Por exemplo, as \",(0,o.jsx)(e.code,{children:\"margin\"}),\"s, \",(0,o.jsx)(e.code,{children:\"padding\"}),\"s, \",(0,o.jsx)(e.code,{children:\"font-size\"}),\"s de todos os elementos s\\xE3o redefinidos para serem iguais. Voc\\xEA ter\\xE1 que redeclarar o estilo para elementos tipogr\\xE1ficos comuns.\"]})]}),(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:(0,o.jsx)(e.strong,{children:\"Normalizando\"})}),(0,o.jsx)(e.td,{children:\"Normalizar preserva estilos padr\\xE3o \\xFAteis ao inv\\xE9s de tirar o estilo de tudo. Ele tamb\\xE9m corrige bugs de depend\\xEAncias comuns do navegador.\"})]})]})]}),`\n`,(0,o.jsx)(e.h2,{children:\"Qual escolher e por qu\\xEA?\"}),`\n`,(0,o.jsx)(e.p,{children:\"Escolha redefinir quando precisar de um design de site muito personalizado ou n\\xE3o convencional, de tal forma que voc\\xEA precise fazer muitos estilos pr\\xF3prios e n\\xE3o precise preservar nenhum estilo padr\\xE3o.\"})]})}function _(r={}){let{wrapper:e}=r.components||{};return e?(0,o.jsx)(e,Object.assign({},r,{children:(0,o.jsx)(l,r)})):l(r)}var z=_;return x(q);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),v=(r,e)=>{for(var t in e)d(r,t,{get:e[t],enumerable:!0})},a=(r,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of p(e))!f.call(r,n)&&n!==t&&d(r,n,{get:()=>e[n],enumerable:!(i=u(e,n))||i.enumerable});return r};var x=(r,e,t)=>(t=r!=null?m(g(r)):{},a(e||!r||!r.__esModule?d(t,\"default\",{value:r,enumerable:!0}):t,r)),_=r=>a(d({},\"__esModule\",{value:!0}),r);var c=b((y,s)=>{s.exports=_jsx_runtime});var z={};v(z,{default:()=>h,frontmatter:()=>j});var o=x(c()),j={title:'Qual \\xE9 a diferen\\xE7a entre \"resetting\" e \"normalizing\" CSS?',subtitle:\"Qual voc\\xEA escolheria e por qu\\xEA?\"};function l(r){let e={code:\"code\",h2:\"h2\",p:\"p\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",...r.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.table,{children:[(0,o.jsx)(e.thead,{children:(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.th,{children:\"Termo\"}),(0,o.jsx)(e.th,{children:\"Defini\\xE7\\xE3o\"})]})}),(0,o.jsxs)(e.tbody,{children:[(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:(0,o.jsx)(e.strong,{children:\"Resetando\"})}),(0,o.jsxs)(e.td,{children:[\"Redefinir tem o objetivo de remover toda a formata\\xE7\\xE3o padr\\xE3o do navegador nos elementos. Por exemplo, as \",(0,o.jsx)(e.code,{children:\"margin\"}),\"s, \",(0,o.jsx)(e.code,{children:\"padding\"}),\"s, \",(0,o.jsx)(e.code,{children:\"font-size\"}),\"s de todos os elementos s\\xE3o redefinidos para serem iguais. Voc\\xEA ter\\xE1 que redeclarar o estilo para elementos tipogr\\xE1ficos comuns.\"]})]}),(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{children:(0,o.jsx)(e.strong,{children:\"Normalizando\"})}),(0,o.jsx)(e.td,{children:\"Normalizar preserva estilos padr\\xE3o \\xFAteis ao inv\\xE9s de tirar o estilo de tudo. Ele tamb\\xE9m corrige bugs de depend\\xEAncias comuns do navegador.\"})]})]})]}),`\n`,(0,o.jsx)(e.h2,{children:\"Qual escolher e por qu\\xEA?\"}),`\n`,(0,o.jsx)(e.p,{children:\"Escolha redefinir quando precisar de um design de site muito personalizado ou n\\xE3o convencional, de tal forma que voc\\xEA precise fazer muitos estilos pr\\xF3prios e n\\xE3o precise preservar nenhum estilo padr\\xE3o.\"})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,o.jsx)(e,{...r,children:(0,o.jsx)(l,{...r})}):l(r)}return _(z);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/zh-CN.json b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/zh-CN.json
index de005bd19..d98957570 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var u=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),j=(n,t)=>{for(var r in t)c(n,r,{get:t[r],enumerable:!0})},h=(n,t,r,i)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let d of m(t))!x.call(n,d)&&d!==r&&c(n,d,{get:()=>t[d],enumerable:!(i=g(t,d))||i.enumerable});return n};var p=(n,t,r)=>(r=n!=null?a(b(n)):{},h(t||!n||!n.__esModule?c(r,\"default\",{value:n,enumerable:!0}):r,n)),_=n=>h(c({},\"__esModule\",{value:!0}),n);var l=u((F,o)=>{o.exports=_jsx_runtime});var M={};j(M,{default:()=>C,frontmatter:()=>f});var e=p(l()),f={title:\"\\u201C\\u91CD\\u7F6E\\u201D\\u548C\\u201C\\u6807\\u51C6\\u5316\\u201DCSS\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\",subtitle:\"\\u4F60\\u4F1A\\u9009\\u62E9\\u54EA\\u4E00\\u4E2A\\uFF0C\\u4E3A\\u4EC0\\u4E48\\uFF1F\"};function s(n){let t=Object.assign({table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",strong:\"strong\",code:\"code\",h2:\"h2\",p:\"p\"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(t.table,{children:[(0,e.jsx)(t.thead,{children:(0,e.jsxs)(t.tr,{children:[(0,e.jsx)(t.th,{children:\"\\u672F\\u8BED\"}),(0,e.jsx)(t.th,{children:\"\\u5B9A\\u4E49\"})]})}),(0,e.jsxs)(t.tbody,{children:[(0,e.jsxs)(t.tr,{children:[(0,e.jsx)(t.td,{children:(0,e.jsx)(t.strong,{children:\"\\u91CD\\u7F6E\"})}),(0,e.jsxs)(t.td,{children:[\"\\u91CD\\u7F6E\\u65E8\\u5728\\u53BB\\u9664\\u5143\\u7D20\\u4E0A\\u7684\\u6240\\u6709\\u9ED8\\u8BA4\\u6D4F\\u89C8\\u5668\\u6837\\u5F0F\\u3002\\u4F8B\\u5982\\uFF0C\\u6240\\u6709\\u5143\\u7D20\\u7684 \",(0,e.jsx)(t.code,{children:\"margin\"}),\"\\u3001\",(0,e.jsx)(t.code,{children:\"padding\"}),\"\\u3001\",(0,e.jsx)(t.code,{children:\"font-size\"}),\" \\u90FD\\u88AB\\u91CD\\u7F6E\\u4E3A\\u76F8\\u540C\\u3002\\u60A8\\u5C06\\u4E0D\\u5F97\\u4E0D\\u4E3A\\u5E38\\u89C1\\u7684\\u6392\\u7248\\u5143\\u7D20\\u91CD\\u65B0\\u58F0\\u660E\\u6837\\u5F0F\\u3002\"]})]}),(0,e.jsxs)(t.tr,{children:[(0,e.jsx)(t.td,{children:(0,e.jsx)(t.strong,{children:\"\\u6807\\u51C6\\u5316\"})}),(0,e.jsx)(t.td,{children:\"\\u6807\\u51C6\\u5316\\u4FDD\\u7559\\u6709\\u7528\\u7684\\u9ED8\\u8BA4\\u6837\\u5F0F\\uFF0C\\u800C\\u4E0D\\u662F\\u201C\\u53D6\\u6D88\\u6837\\u5F0F\\u201D\\u6240\\u6709\\u5185\\u5BB9\\u3002\\u5B83\\u8FD8\\u7EA0\\u6B63\\u4E86\\u5E38\\u89C1\\u6D4F\\u89C8\\u5668\\u4F9D\\u8D56\\u9879\\u7684\\u9519\\u8BEF\\u3002\"})]})]})]}),`\n`,(0,e.jsx)(t.h2,{children:\"\\u9009\\u62E9\\u54EA\\u4E2A\\u4EE5\\u53CA\\u4E3A\\u4EC0\\u4E48\\uFF1F\"}),`\n`,(0,e.jsx)(t.p,{children:\"\\u5F53\\u60A8\\u9700\\u8981\\u4E00\\u4E2A\\u975E\\u5E38\\u5B9A\\u5236\\u6216\\u975E\\u4F20\\u7EDF\\u7684\\u7F51\\u7AD9\\u8BBE\\u8BA1\\u65F6\\uFF0C\\u8BF7\\u9009\\u62E9\\u91CD\\u7F6E\\uFF0C\\u8FD9\\u6837\\u60A8\\u5C31\\u9700\\u8981\\u505A\\u5F88\\u591A\\u81EA\\u5DF1\\u7684\\u6837\\u5F0F\\uFF0C\\u5E76\\u4E14\\u4E0D\\u9700\\u8981\\u4FDD\\u7559\\u4EFB\\u4F55\\u9ED8\\u8BA4\\u6837\\u5F0F\\u3002\"})]})}function y(n={}){let{wrapper:t}=n.components||{};return t?(0,e.jsx)(t,Object.assign({},n,{children:(0,e.jsx)(s,n)})):s(n)}var C=y;return _(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var p=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),_=(n,t)=>{for(var r in t)c(n,r,{get:t[r],enumerable:!0})},i=(n,t,r,h)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let d of g(t))!b.call(n,d)&&d!==r&&c(n,d,{get:()=>t[d],enumerable:!(h=x(t,d))||h.enumerable});return n};var f=(n,t,r)=>(r=n!=null?m(u(n)):{},i(t||!n||!n.__esModule?c(r,\"default\",{value:n,enumerable:!0}):r,n)),j=n=>i(c({},\"__esModule\",{value:!0}),n);var l=p((D,o)=>{o.exports=_jsx_runtime});var C={};_(C,{default:()=>a,frontmatter:()=>y});var e=f(l()),y={title:\"\\u201C\\u91CD\\u7F6E\\u201D\\u548C\\u201C\\u6807\\u51C6\\u5316\\u201DCSS\\u6709\\u4EC0\\u4E48\\u533A\\u522B\\uFF1F\",subtitle:\"\\u4F60\\u4F1A\\u9009\\u62E9\\u54EA\\u4E00\\u4E2A\\uFF0C\\u4E3A\\u4EC0\\u4E48\\uFF1F\"};function s(n){let t={code:\"code\",h2:\"h2\",p:\"p\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",...n.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(t.table,{children:[(0,e.jsx)(t.thead,{children:(0,e.jsxs)(t.tr,{children:[(0,e.jsx)(t.th,{children:\"\\u672F\\u8BED\"}),(0,e.jsx)(t.th,{children:\"\\u5B9A\\u4E49\"})]})}),(0,e.jsxs)(t.tbody,{children:[(0,e.jsxs)(t.tr,{children:[(0,e.jsx)(t.td,{children:(0,e.jsx)(t.strong,{children:\"\\u91CD\\u7F6E\"})}),(0,e.jsxs)(t.td,{children:[\"\\u91CD\\u7F6E\\u65E8\\u5728\\u53BB\\u9664\\u5143\\u7D20\\u4E0A\\u7684\\u6240\\u6709\\u9ED8\\u8BA4\\u6D4F\\u89C8\\u5668\\u6837\\u5F0F\\u3002\\u4F8B\\u5982\\uFF0C\\u6240\\u6709\\u5143\\u7D20\\u7684 \",(0,e.jsx)(t.code,{children:\"margin\"}),\"\\u3001\",(0,e.jsx)(t.code,{children:\"padding\"}),\"\\u3001\",(0,e.jsx)(t.code,{children:\"font-size\"}),\" \\u90FD\\u88AB\\u91CD\\u7F6E\\u4E3A\\u76F8\\u540C\\u3002\\u60A8\\u5C06\\u4E0D\\u5F97\\u4E0D\\u4E3A\\u5E38\\u89C1\\u7684\\u6392\\u7248\\u5143\\u7D20\\u91CD\\u65B0\\u58F0\\u660E\\u6837\\u5F0F\\u3002\"]})]}),(0,e.jsxs)(t.tr,{children:[(0,e.jsx)(t.td,{children:(0,e.jsx)(t.strong,{children:\"\\u6807\\u51C6\\u5316\"})}),(0,e.jsx)(t.td,{children:\"\\u6807\\u51C6\\u5316\\u4FDD\\u7559\\u6709\\u7528\\u7684\\u9ED8\\u8BA4\\u6837\\u5F0F\\uFF0C\\u800C\\u4E0D\\u662F\\u201C\\u53D6\\u6D88\\u6837\\u5F0F\\u201D\\u6240\\u6709\\u5185\\u5BB9\\u3002\\u5B83\\u8FD8\\u7EA0\\u6B63\\u4E86\\u5E38\\u89C1\\u6D4F\\u89C8\\u5668\\u4F9D\\u8D56\\u9879\\u7684\\u9519\\u8BEF\\u3002\"})]})]})]}),`\n`,(0,e.jsx)(t.h2,{children:\"\\u9009\\u62E9\\u54EA\\u4E2A\\u4EE5\\u53CA\\u4E3A\\u4EC0\\u4E48\\uFF1F\"}),`\n`,(0,e.jsx)(t.p,{children:\"\\u5F53\\u60A8\\u9700\\u8981\\u4E00\\u4E2A\\u975E\\u5E38\\u5B9A\\u5236\\u6216\\u975E\\u4F20\\u7EDF\\u7684\\u7F51\\u7AD9\\u8BBE\\u8BA1\\u65F6\\uFF0C\\u8BF7\\u9009\\u62E9\\u91CD\\u7F6E\\uFF0C\\u8FD9\\u6837\\u60A8\\u5C31\\u9700\\u8981\\u505A\\u5F88\\u591A\\u81EA\\u5DF1\\u7684\\u6837\\u5F0F\\uFF0C\\u5E76\\u4E14\\u4E0D\\u9700\\u8981\\u4FDD\\u7559\\u4EFB\\u4F55\\u9ED8\\u8BA4\\u6837\\u5F0F\\u3002\"})]})}function a(n={}){let{wrapper:t}=n.components||{};return t?(0,e.jsx)(t,{...n,children:(0,e.jsx)(s,{...n})}):s(n)}return j(C);})();\n;return Component;"
 }
\ No newline at end of file
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 782a4cdb8..4b4eaab74 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/when-would-you-use-document-write/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},c=(t,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!g.call(t,o)&&o!==r&&i(t,o,{get:()=>e[o],enumerable:!(d=u(e,o))||d.enumerable});return t};var b=(t,e,r)=>(r=t!=null?h(p(t)):{},c(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),y=t=>c(i({},\"__esModule\",{value:!0}),t);var a=w((W,l)=>{l.exports=_jsx_runtime});var k={};f(k,{default:()=>x,frontmatter:()=>v});var n=b(a()),v={title:\"When would you use `document.write()`?\"};function s(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",strong:\"strong\",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:[(0,n.jsx)(e.code,{children:\"document.write()\"}),\" is rarely used in modern web development because it can overwrite the entire document if called after the page has loaded. It is mainly used for simple tasks like writing content during the initial page load, such as for educational purposes or quick debugging. However, it is generally recommended to use other methods like \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\", \",(0,n.jsx)(e.code,{children:\"appendChild()\"}),\", or modern frameworks for manipulating the DOM.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"When would you use \",(0,n.jsx)(e.code,{children:\"document.write()\"}),\"?\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Initial page load\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"document.write()\"}),\" can be used to write content directly to the document during the initial page load. This is one of the few scenarios where it might be appropriate, as it can be simpler and faster for very basic tasks.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>Document Write Example</title>\n  </head>\n  <body>\n    <script>\n      document.write('<h1>Hello, World!</h1>');\n    <\\/script>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Educational purposes\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"document.write()\"}),\" is sometimes used in educational contexts to demonstrate basic JavaScript concepts. It provides a straightforward way to show how JavaScript can manipulate the DOM.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Quick debugging\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"For quick and dirty debugging, \",(0,n.jsx)(e.code,{children:\"document.write()\"}),\" can be used to output variables or messages directly to the document. However, this is not recommended for production code.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`var debugMessage = 'Debugging message';\ndocument.write(debugMessage);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Legacy code\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In some older codebases, you might encounter \",(0,n.jsx)(e.code,{children:\"document.write()\"}),\". While it's not recommended to use it in new projects, understanding it can be useful for maintaining or refactoring legacy code.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Why not use \",(0,n.jsx)(e.code,{children:\"document.write()\"}),\"?\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Overwrites the document\"}),\": If called after the page has loaded, \",(0,n.jsx)(e.code,{children:\"document.write()\"}),\" will overwrite the entire document, which can lead to loss of content and a poor user experience.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Better alternatives\"}),\": Modern methods like \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\", \",(0,n.jsx)(e.code,{children:\"appendChild()\"}),\", and frameworks like React or Vue provide more control and are safer to use.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Using innerHTML\ndocument.getElementById('content').innerHTML = '<h1>Hello, World!</h1>';\n\n// Using appendChild\nvar newElement = document.createElement('h1');\nnewElement.textContent = 'Hello, World!';\ndocument.getElementById('content').appendChild(newElement);\n`})}),`\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/Web/API/Document/write\",children:\"MDN Web Docs on document.write()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice\",children:\"Why is document.write() considered harmful?\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction#modifying_the_document\",children:\"Modern DOM manipulation methods\"})}),`\n`]})]})}function M(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(s,t)})):s(t)}var x=M;return y(k);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},c=(t,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!w.call(t,o)&&o!==r&&i(t,o,{get:()=>e[o],enumerable:!(d=m(e,o))||d.enumerable});return t};var y=(t,e,r)=>(r=t!=null?u(g(t)):{},c(e||!t||!t.__esModule?i(r,\"default\",{value:t,enumerable:!0}):r,t)),v=t=>c(i({},\"__esModule\",{value:!0}),t);var a=f((D,l)=>{l.exports=_jsx_runtime});var x={};b(x,{default:()=>s,frontmatter:()=>M});var n=y(a()),M={title:\"When would you use `document.write()`?\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"document.write()\"}),\" is rarely used in modern web development because it can overwrite the entire document if called after the page has loaded. It is mainly used for simple tasks like writing content during the initial page load, such as for educational purposes or quick debugging. However, it is generally recommended to use other methods like \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\", \",(0,n.jsx)(e.code,{children:\"appendChild()\"}),\", or modern frameworks for manipulating the DOM.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"When would you use \",(0,n.jsx)(e.code,{children:\"document.write()\"}),\"?\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Initial page load\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"document.write()\"}),\" can be used to write content directly to the document during the initial page load. This is one of the few scenarios where it might be appropriate, as it can be simpler and faster for very basic tasks.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>Document Write Example</title>\n  </head>\n  <body>\n    <script>\n      document.write('<h1>Hello, World!</h1>');\n    <\\/script>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Educational purposes\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"document.write()\"}),\" is sometimes used in educational contexts to demonstrate basic JavaScript concepts. It provides a straightforward way to show how JavaScript can manipulate the DOM.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Quick debugging\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"For quick and dirty debugging, \",(0,n.jsx)(e.code,{children:\"document.write()\"}),\" can be used to output variables or messages directly to the document. However, this is not recommended for production code.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`var debugMessage = 'Debugging message';\ndocument.write(debugMessage);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Legacy code\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In some older codebases, you might encounter \",(0,n.jsx)(e.code,{children:\"document.write()\"}),\". While it's not recommended to use it in new projects, understanding it can be useful for maintaining or refactoring legacy code.\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Why not use \",(0,n.jsx)(e.code,{children:\"document.write()\"}),\"?\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Overwrites the document\"}),\": If called after the page has loaded, \",(0,n.jsx)(e.code,{children:\"document.write()\"}),\" will overwrite the entire document, which can lead to loss of content and a poor user experience.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Better alternatives\"}),\": Modern methods like \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\", \",(0,n.jsx)(e.code,{children:\"appendChild()\"}),\", and frameworks like React or Vue provide more control and are safer to use.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Using innerHTML\ndocument.getElementById('content').innerHTML = '<h1>Hello, World!</h1>';\n\n// Using appendChild\nvar newElement = document.createElement('h1');\nnewElement.textContent = 'Hello, World!';\ndocument.getElementById('content').appendChild(newElement);\n`})}),`\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/Web/API/Document/write\",children:\"MDN Web Docs on document.write()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice\",children:\"Why is document.write() considered harmful?\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction#modifying_the_document\",children:\"Modern DOM manipulation methods\"})}),`\n`]})]})}function s(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return v(x);})();\n;return Component;"
 }
\ No newline at end of file
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 b4e8ff947..6ad78a530 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/when-would-you-use-document-write/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var n=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),v=(o,e)=>{for(var a in e)n(o,a,{get:e[a],enumerable:!0})},c=(o,e,a,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!g.call(o,r)&&r!==a&&n(o,r,{get:()=>e[r],enumerable:!(d=l(e,r))||d.enumerable});return o};var w=(o,e,a)=>(a=o!=null?m(h(o)):{},c(e||!o||!o.__esModule?n(a,\"default\",{value:o,enumerable:!0}):a,o)),b=o=>c(n({},\"__esModule\",{value:!0}),o);var i=x((L,s)=>{s.exports=_jsx_runtime});var q={};v(q,{default:()=>_,frontmatter:()=>f});var t=w(i()),f={title:\"Quando voc\\xEA usaria `document.write()`?\"};function u(o){let e=Object.assign({p:\"p\",code:\"code\",a:\"a\"},o.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"document.write()\"}),\" escreve uma string de texto em um fluxo de documento aberto por \",(0,t.jsx)(e.code,{children:\"document.open()\"}),\". Quando o \",(0,t.jsx)(e.code,{children:\"document.write()\"}),\" \\xE9 executado ap\\xF3s o carregamento da p\\xE1gina, ele chamar\\xE1 o \",(0,t.jsx)(e.code,{children:\"document.open\"}),\", o que limpar\\xE1 todo o documento (\",(0,t.jsx)(e.code,{children:\"<head>\"}),\" e \",(0,t.jsx)(e.code,{children:\"<body>\"}),\" removidos!) e substitui o conte\\xFAdo pelo valor do par\\xE2metro dado. Portanto, geralmente \\xE9 considerado perigoso e propenso a uso indevido.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Existem algumas respostas online que explicam \",(0,t.jsx)(e.code,{children:\"documento.write()\"}),\" est\\xE1 sendo usado no c\\xF3digo anal\\xEDtico ou \",(0,t.jsx)(e.a,{href:\"https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html\",children:\"quando deseja incluir estilos que s\\xF3 devem funcionar se o JavaScript estiver ativado\"}),\". Ele est\\xE1 at\\xE9 sendo usado em boilerplate HTML5 para \",(0,t.jsx)(e.a,{href:\"https://github.com/paulirish/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag\",children:\"carregar scripts em paralelo e preservar a ordem de execu\\xE7\\xE3o\"}),\"! No entanto, esses motivos podem estar desatualizados e, atualmente, podem ser alcan\\xE7ados sem o uso do \",(0,t.jsx)(e.code,{children:\"document.write()\"}),\".\"]})]})}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 _=j;return b(q);})();\n;return Component;"
+  "solution": "var Component=(()=>{var l=Object.create;var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var v=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),w=(o,e)=>{for(var r in e)n(o,r,{get:e[r],enumerable:!0})},c=(o,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of h(e))!x.call(o,a)&&a!==r&&n(o,a,{get:()=>e[a],enumerable:!(d=p(e,a))||d.enumerable});return o};var f=(o,e,r)=>(r=o!=null?l(g(o)):{},c(e||!o||!o.__esModule?n(r,\"default\",{value:o,enumerable:!0}):r,o)),_=o=>c(n({},\"__esModule\",{value:!0}),o);var s=v((M,i)=>{i.exports=_jsx_runtime});var j={};w(j,{default:()=>m,frontmatter:()=>b});var t=f(s()),b={title:\"Quando voc\\xEA usaria `document.write()`?\"};function u(o){let e={a:\"a\",code:\"code\",p:\"p\",...o.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"document.write()\"}),\" escreve uma string de texto em um fluxo de documento aberto por \",(0,t.jsx)(e.code,{children:\"document.open()\"}),\". Quando o \",(0,t.jsx)(e.code,{children:\"document.write()\"}),\" \\xE9 executado ap\\xF3s o carregamento da p\\xE1gina, ele chamar\\xE1 o \",(0,t.jsx)(e.code,{children:\"document.open\"}),\", o que limpar\\xE1 todo o documento (\",(0,t.jsx)(e.code,{children:\"<head>\"}),\" e \",(0,t.jsx)(e.code,{children:\"<body>\"}),\" removidos!) e substitui o conte\\xFAdo pelo valor do par\\xE2metro dado. Portanto, geralmente \\xE9 considerado perigoso e propenso a uso indevido.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Existem algumas respostas online que explicam \",(0,t.jsx)(e.code,{children:\"documento.write()\"}),\" est\\xE1 sendo usado no c\\xF3digo anal\\xEDtico ou \",(0,t.jsx)(e.a,{href:\"https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html\",children:\"quando deseja incluir estilos que s\\xF3 devem funcionar se o JavaScript estiver ativado\"}),\". Ele est\\xE1 at\\xE9 sendo usado em boilerplate HTML5 para \",(0,t.jsx)(e.a,{href:\"https://github.com/paulirish/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag\",children:\"carregar scripts em paralelo e preservar a ordem de execu\\xE7\\xE3o\"}),\"! No entanto, esses motivos podem estar desatualizados e, atualmente, podem ser alcan\\xE7ados sem o uso do \",(0,t.jsx)(e.code,{children:\"document.write()\"}),\".\"]})]})}function m(o={}){let{wrapper:e}=o.components||{};return e?(0,t.jsx)(e,{...o,children:(0,t.jsx)(u,{...o})}):u(o)}return _(j);})();\n;return Component;"
 }
\ No newline at end of file
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 93ce9e48a..55ef51d37 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
@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/when-would-you-use-document-write/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var d=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),M=(t,e)=>{for(var c in e)d(t,c,{get:e[c],enumerable:!0})},l=(t,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!g.call(t,r)&&r!==c&&d(t,r,{get:()=>e[r],enumerable:!(i=s(e,r))||i.enumerable});return t};var b=(t,e,c)=>(c=t!=null?m(p(t)):{},l(e||!t||!t.__esModule?d(c,\"default\",{value:t,enumerable:!0}):c,t)),D=t=>l(d({},\"__esModule\",{value:!0}),t);var h=w((y,o)=>{o.exports=_jsx_runtime});var j={};M(j,{default:()=>_,frontmatter:()=>f});var n=b(h()),f={title:\"\\u4F60\\u4F1A\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528 `document.write()`\\uFF1F\"};function a(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",strong:\"strong\",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:[(0,n.jsx)(e.code,{children:\"document.write()\"}),\" \\u5728\\u73B0\\u4EE3 Web \\u5F00\\u53D1\\u4E2D\\u5F88\\u5C11\\u4F7F\\u7528\\uFF0C\\u56E0\\u4E3A\\u5B83\\u5728\\u9875\\u9762\\u52A0\\u8F7D\\u540E\\u8C03\\u7528\\u65F6\\u4F1A\\u8986\\u76D6\\u6574\\u4E2A\\u6587\\u6863\\u3002\\u5B83\\u4E3B\\u8981\\u7528\\u4E8E\\u5728\\u521D\\u59CB\\u9875\\u9762\\u52A0\\u8F7D\\u671F\\u95F4\\u7F16\\u5199\\u5185\\u5BB9\\u7B49\\u7B80\\u5355\\u4EFB\\u52A1\\uFF0C\\u4F8B\\u5982\\u7528\\u4E8E\\u6559\\u80B2\\u76EE\\u7684\\u6216\\u5FEB\\u901F\\u8C03\\u8BD5\\u3002\\u4F46\\u662F\\uFF0C\\u901A\\u5E38\\u5EFA\\u8BAE\\u4F7F\\u7528\\u5176\\u4ED6\\u65B9\\u6CD5\\uFF0C\\u5982 \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"appendChild()\"}),\" \\u6216\\u73B0\\u4EE3\\u6846\\u67B6\\u6765\\u64CD\\u4F5C DOM\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4F60\\u4F1A\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"document.write()\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u521D\\u59CB\\u9875\\u9762\\u52A0\\u8F7D\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"document.write()\"}),\" \\u53EF\\u7528\\u4E8E\\u5728\\u521D\\u59CB\\u9875\\u9762\\u52A0\\u8F7D\\u671F\\u95F4\\u5C06\\u5185\\u5BB9\\u76F4\\u63A5\\u5199\\u5165\\u6587\\u6863\\u3002\\u8FD9\\u662F\\u5B83\\u53EF\\u80FD\\u9002\\u7528\\u7684\\u5C11\\u6570\\u60C5\\u51B5\\u4E4B\\u4E00\\uFF0C\\u56E0\\u4E3A\\u5B83\\u5BF9\\u4E8E\\u975E\\u5E38\\u57FA\\u672C\\u7684\\u4EFB\\u52A1\\u53EF\\u80FD\\u66F4\\u7B80\\u5355\\u3001\\u66F4\\u5FEB\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>Document Write Example</title>\n  </head>\n  <body>\n    <script>\n      document.write('<h1>Hello, World!</h1>');\n    <\\/script>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6559\\u80B2\\u76EE\\u7684\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"document.write()\"}),\" \\u6709\\u65F6\\u7528\\u4E8E\\u6559\\u80B2\\u73AF\\u5883\\u4E2D\\uFF0C\\u4EE5\\u6F14\\u793A\\u57FA\\u672C\\u7684 JavaScript \\u6982\\u5FF5\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u76F4\\u63A5\\u7684\\u65B9\\u5F0F\\u6765\\u5C55\\u793A JavaScript \\u5982\\u4F55\\u64CD\\u4F5C DOM\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5FEB\\u901F\\u8C03\\u8BD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5BF9\\u4E8E\\u5FEB\\u901F\\u800C\\u7C97\\u7565\\u7684\\u8C03\\u8BD5\\uFF0C\",(0,n.jsx)(e.code,{children:\"document.write()\"}),\" \\u53EF\\u7528\\u4E8E\\u5C06\\u53D8\\u91CF\\u6216\\u6D88\\u606F\\u76F4\\u63A5\\u8F93\\u51FA\\u5230\\u6587\\u6863\\u3002\\u4F46\\u662F\\uFF0C\\u4E0D\\u5EFA\\u8BAE\\u5728\\u751F\\u4EA7\\u4EE3\\u7801\\u4E2D\\u4F7F\\u7528\\u6B64\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`var debugMessage = 'Debugging message';\ndocument.write(debugMessage);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u9057\\u7559\\u4EE3\\u7801\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u4E00\\u4E9B\\u8F83\\u65E7\\u7684\\u4EE3\\u7801\\u5E93\\u4E2D\\uFF0C\\u4F60\\u53EF\\u80FD\\u4F1A\\u9047\\u5230 \",(0,n.jsx)(e.code,{children:\"document.write()\"}),\"\\u3002\\u867D\\u7136\\u4E0D\\u5EFA\\u8BAE\\u5728\\u65B0\\u9879\\u76EE\\u4E2D\\u4F7F\\u7528\\u5B83\\uFF0C\\u4F46\\u4E86\\u89E3\\u5B83\\u5BF9\\u4E8E\\u7EF4\\u62A4\\u6216\\u91CD\\u6784\\u65E7\\u4EE3\\u7801\\u53EF\\u80FD\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4E3A\\u4EC0\\u4E48\\u4E0D\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"document.write()\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8986\\u76D6\\u6587\\u6863\"}),\"\\uFF1A\\u5982\\u679C\\u5728\\u9875\\u9762\\u52A0\\u8F7D\\u540E\\u8C03\\u7528\\uFF0C\",(0,n.jsx)(e.code,{children:\"document.write()\"}),\" \\u5C06\\u8986\\u76D6\\u6574\\u4E2A\\u6587\\u6863\\uFF0C\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u5185\\u5BB9\\u4E22\\u5931\\u548C\\u7CDF\\u7CD5\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u66F4\\u597D\\u7684\\u66FF\\u4EE3\\u65B9\\u6848\"}),\"\\uFF1A\\u50CF \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"appendChild()\"}),\" \\u548C React \\u6216 Vue \\u7B49\\u6846\\u67B6\\u7684\\u73B0\\u4EE3\\u65B9\\u6CD5\\u63D0\\u4F9B\\u4E86\\u66F4\\u591A\\u63A7\\u5236\\uFF0C\\u5E76\\u4E14\\u4F7F\\u7528\\u8D77\\u6765\\u66F4\\u5B89\\u5168\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// \\u4F7F\\u7528 innerHTML\ndocument.getElementById('content').innerHTML = '<h1>Hello, World!</h1>';\n\n// \\u4F7F\\u7528 appendChild\nvar newElement = document.createElement('h1');\nnewElement.textContent = 'Hello, World!';\ndocument.getElementById('content').appendChild(newElement);\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Document/write\",children:\"MDN Web Docs on document.write()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice\",children:\"Why is document.write() considered harmful?\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction#modifying_the_document\",children:\"Modern DOM manipulation methods\"})}),`\n`]})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(a,t)})):a(t)}var _=x;return D(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var s=Object.create;var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var M=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),D=(t,e)=>{for(var c in e)d(t,c,{get:e[c],enumerable:!0})},l=(t,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!w.call(t,r)&&r!==c&&d(t,r,{get:()=>e[r],enumerable:!(i=u(e,r))||i.enumerable});return t};var b=(t,e,c)=>(c=t!=null?s(g(t)):{},l(e||!t||!t.__esModule?d(c,\"default\",{value:t,enumerable:!0}):c,t)),f=t=>l(d({},\"__esModule\",{value:!0}),t);var h=M((y,o)=>{o.exports=_jsx_runtime});var _={};D(_,{default:()=>m,frontmatter:()=>x});var n=b(h()),x={title:\"\\u4F60\\u4F1A\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528 `document.write()`\\uFF1F\"};function a(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"document.write()\"}),\" \\u5728\\u73B0\\u4EE3 Web \\u5F00\\u53D1\\u4E2D\\u5F88\\u5C11\\u4F7F\\u7528\\uFF0C\\u56E0\\u4E3A\\u5B83\\u5728\\u9875\\u9762\\u52A0\\u8F7D\\u540E\\u8C03\\u7528\\u65F6\\u4F1A\\u8986\\u76D6\\u6574\\u4E2A\\u6587\\u6863\\u3002\\u5B83\\u4E3B\\u8981\\u7528\\u4E8E\\u5728\\u521D\\u59CB\\u9875\\u9762\\u52A0\\u8F7D\\u671F\\u95F4\\u7F16\\u5199\\u5185\\u5BB9\\u7B49\\u7B80\\u5355\\u4EFB\\u52A1\\uFF0C\\u4F8B\\u5982\\u7528\\u4E8E\\u6559\\u80B2\\u76EE\\u7684\\u6216\\u5FEB\\u901F\\u8C03\\u8BD5\\u3002\\u4F46\\u662F\\uFF0C\\u901A\\u5E38\\u5EFA\\u8BAE\\u4F7F\\u7528\\u5176\\u4ED6\\u65B9\\u6CD5\\uFF0C\\u5982 \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"appendChild()\"}),\" \\u6216\\u73B0\\u4EE3\\u6846\\u67B6\\u6765\\u64CD\\u4F5C DOM\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"\\u4F60\\u4F1A\\u5728\\u4EC0\\u4E48\\u65F6\\u5019\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"document.write()\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u521D\\u59CB\\u9875\\u9762\\u52A0\\u8F7D\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"document.write()\"}),\" \\u53EF\\u7528\\u4E8E\\u5728\\u521D\\u59CB\\u9875\\u9762\\u52A0\\u8F7D\\u671F\\u95F4\\u5C06\\u5185\\u5BB9\\u76F4\\u63A5\\u5199\\u5165\\u6587\\u6863\\u3002\\u8FD9\\u662F\\u5B83\\u53EF\\u80FD\\u9002\\u7528\\u7684\\u5C11\\u6570\\u60C5\\u51B5\\u4E4B\\u4E00\\uFF0C\\u56E0\\u4E3A\\u5B83\\u5BF9\\u4E8E\\u975E\\u5E38\\u57FA\\u672C\\u7684\\u4EFB\\u52A1\\u53EF\\u80FD\\u66F4\\u7B80\\u5355\\u3001\\u66F4\\u5FEB\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!doctype html>\n<html>\n  <head>\n    <title>Document Write Example</title>\n  </head>\n  <body>\n    <script>\n      document.write('<h1>Hello, World!</h1>');\n    <\\/script>\n  </body>\n</html>\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u6559\\u80B2\\u76EE\\u7684\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"document.write()\"}),\" \\u6709\\u65F6\\u7528\\u4E8E\\u6559\\u80B2\\u73AF\\u5883\\u4E2D\\uFF0C\\u4EE5\\u6F14\\u793A\\u57FA\\u672C\\u7684 JavaScript \\u6982\\u5FF5\\u3002\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u76F4\\u63A5\\u7684\\u65B9\\u5F0F\\u6765\\u5C55\\u793A JavaScript \\u5982\\u4F55\\u64CD\\u4F5C DOM\\u3002\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5FEB\\u901F\\u8C03\\u8BD5\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5BF9\\u4E8E\\u5FEB\\u901F\\u800C\\u7C97\\u7565\\u7684\\u8C03\\u8BD5\\uFF0C\",(0,n.jsx)(e.code,{children:\"document.write()\"}),\" \\u53EF\\u7528\\u4E8E\\u5C06\\u53D8\\u91CF\\u6216\\u6D88\\u606F\\u76F4\\u63A5\\u8F93\\u51FA\\u5230\\u6587\\u6863\\u3002\\u4F46\\u662F\\uFF0C\\u4E0D\\u5EFA\\u8BAE\\u5728\\u751F\\u4EA7\\u4EE3\\u7801\\u4E2D\\u4F7F\\u7528\\u6B64\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`var debugMessage = 'Debugging message';\ndocument.write(debugMessage);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u9057\\u7559\\u4EE3\\u7801\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u4E00\\u4E9B\\u8F83\\u65E7\\u7684\\u4EE3\\u7801\\u5E93\\u4E2D\\uFF0C\\u4F60\\u53EF\\u80FD\\u4F1A\\u9047\\u5230 \",(0,n.jsx)(e.code,{children:\"document.write()\"}),\"\\u3002\\u867D\\u7136\\u4E0D\\u5EFA\\u8BAE\\u5728\\u65B0\\u9879\\u76EE\\u4E2D\\u4F7F\\u7528\\u5B83\\uFF0C\\u4F46\\u4E86\\u89E3\\u5B83\\u5BF9\\u4E8E\\u7EF4\\u62A4\\u6216\\u91CD\\u6784\\u65E7\\u4EE3\\u7801\\u53EF\\u80FD\\u5F88\\u6709\\u7528\\u3002\"]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"\\u4E3A\\u4EC0\\u4E48\\u4E0D\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"document.write()\"}),\"\\uFF1F\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8986\\u76D6\\u6587\\u6863\"}),\"\\uFF1A\\u5982\\u679C\\u5728\\u9875\\u9762\\u52A0\\u8F7D\\u540E\\u8C03\\u7528\\uFF0C\",(0,n.jsx)(e.code,{children:\"document.write()\"}),\" \\u5C06\\u8986\\u76D6\\u6574\\u4E2A\\u6587\\u6863\\uFF0C\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u5185\\u5BB9\\u4E22\\u5931\\u548C\\u7CDF\\u7CD5\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u66F4\\u597D\\u7684\\u66FF\\u4EE3\\u65B9\\u6848\"}),\"\\uFF1A\\u50CF \",(0,n.jsx)(e.code,{children:\"innerHTML\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"appendChild()\"}),\" \\u548C React \\u6216 Vue \\u7B49\\u6846\\u67B6\\u7684\\u73B0\\u4EE3\\u65B9\\u6CD5\\u63D0\\u4F9B\\u4E86\\u66F4\\u591A\\u63A7\\u5236\\uFF0C\\u5E76\\u4E14\\u4F7F\\u7528\\u8D77\\u6765\\u66F4\\u5B89\\u5168\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// \\u4F7F\\u7528 innerHTML\ndocument.getElementById('content').innerHTML = '<h1>Hello, World!</h1>';\n\n// \\u4F7F\\u7528 appendChild\nvar newElement = document.createElement('h1');\nnewElement.textContent = 'Hello, World!';\ndocument.getElementById('content').appendChild(newElement);\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\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/Web/API/Document/write\",children:\"MDN Web Docs on document.write()\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice\",children:\"Why is document.write() considered harmful?\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction#modifying_the_document\",children:\"Modern DOM manipulation methods\"})}),`\n`]})]})}function m(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(a,{...t})}):a(t)}return f(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/why-does-react-recommend-against-mutating-state/en-US.json b/apps/web/src/__generated__/questions/quiz/why-does-react-recommend-against-mutating-state/en-US.json
index cde42b20a..771bfae9f 100644
--- a/apps/web/src/__generated__/questions/quiz/why-does-react-recommend-against-mutating-state/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/why-does-react-recommend-against-mutating-state/en-US.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/why-does-react-recommend-against-mutating-state/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var y=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var a in e)c(n,a,{get:e[a],enumerable:!0})},s=(n,e,a,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!p.call(n,i)&&i!==a&&c(n,i,{get:()=>e[i],enumerable:!(r=m(e,i))||r.enumerable});return n};var b=(n,e,a)=>(a=n!=null?h(g(n)):{},s(e||!n||!n.__esModule?c(a,\"default\",{value:n,enumerable:!0}):a,n)),w=n=>s(c({},\"__esModule\",{value:!0}),n);var l=y((D,o)=>{o.exports=_jsx_runtime});var j={};f(j,{default:()=>x,frontmatter:()=>v});var t=b(l()),v={title:\"Why does React recommend against mutating state?\"};function d(n){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",pre:\"pre\",ul:\"ul\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"React recommends against mutating state because it can lead to unexpected behavior and bugs. React relies on state immutability to efficiently determine when to re-render components. When state is mutated directly, React may not detect the changes, leading to stale or incorrect UI updates. Instead, always create a new state object using methods like \",(0,t.jsx)(e.code,{children:\"setState\"}),\" or the \",(0,t.jsx)(e.code,{children:\"useState\"}),\" hook.\"]}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"Why does React recommend against mutating state?\"}),`\n`,(0,t.jsx)(e.h3,{children:\"React's rendering mechanism\"}),`\n`,(0,t.jsx)(e.p,{children:\"React uses a virtual DOM to optimize rendering. When state changes, React compares the new virtual DOM with the previous one to determine the minimal set of changes needed to update the actual DOM. This process is called reconciliation.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Immutability and state comparison\"}),`\n`,(0,t.jsx)(e.p,{children:\"React relies on immutability to efficiently detect changes. When state is immutable, React can quickly determine if a component needs to re-render by comparing references. If the references are different, React knows that the state has changed.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Problems with mutating state\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Stale UI updates\"}),\": Directly mutating state can lead to React not detecting changes, resulting in the UI not updating as expected.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Debugging difficulties\"}),\": Mutating state directly can make it harder to track state changes and debug issues.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Unexpected behavior\"}),\": Mutating state can lead to unpredictable behavior, especially when multiple components depend on the same state.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"How to update state correctly\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Instead of mutating state directly, always create a new state object. For example, when using the \",(0,t.jsx)(e.code,{children:\"useState\"}),\" hook:\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`const [state, setState] = useState(initialState);\n\n// Incorrect: Directly mutating state\nstate.value = newValue;\n\n// Correct: Creating a new state object\nsetState({ ...state, value: newValue });\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"When using class components and \",(0,t.jsx)(e.code,{children:\"setState\"}),\":\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`this.setState((prevState) => ({\n  ...prevState,\n  value: newValue,\n}));\n`})}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React documentation on state\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/learn/preserving-and-resetting-state\",children:\"React documentation on reconciliation\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://daveceddia.com/why-not-modify-react-state-directly/\",children:\"Why not to mutate state in React\"})}),`\n`]})]})}function R(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(d,n)})):d(n)}var x=R;return w(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),w=(n,e)=>{for(var a in e)c(n,a,{get:e[a],enumerable:!0})},s=(n,e,a,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of g(e))!y.call(n,i)&&i!==a&&c(n,i,{get:()=>e[i],enumerable:!(r=u(e,i))||r.enumerable});return n};var b=(n,e,a)=>(a=n!=null?m(p(n)):{},s(e||!n||!n.__esModule?c(a,\"default\",{value:n,enumerable:!0}):a,n)),v=n=>s(c({},\"__esModule\",{value:!0}),n);var l=f((j,o)=>{o.exports=_jsx_runtime});var x={};w(x,{default:()=>h,frontmatter:()=>R});var t=b(l()),R={title:\"Why does React recommend against mutating state?\"};function d(n){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"React recommends against mutating state because it can lead to unexpected behavior and bugs. React relies on state immutability to efficiently determine when to re-render components. When state is mutated directly, React may not detect the changes, leading to stale or incorrect UI updates. Instead, always create a new state object using methods like \",(0,t.jsx)(e.code,{children:\"setState\"}),\" or the \",(0,t.jsx)(e.code,{children:\"useState\"}),\" hook.\"]}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"Why does React recommend against mutating state?\"}),`\n`,(0,t.jsx)(e.h3,{children:\"React's rendering mechanism\"}),`\n`,(0,t.jsx)(e.p,{children:\"React uses a virtual DOM to optimize rendering. When state changes, React compares the new virtual DOM with the previous one to determine the minimal set of changes needed to update the actual DOM. This process is called reconciliation.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Immutability and state comparison\"}),`\n`,(0,t.jsx)(e.p,{children:\"React relies on immutability to efficiently detect changes. When state is immutable, React can quickly determine if a component needs to re-render by comparing references. If the references are different, React knows that the state has changed.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"Problems with mutating state\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Stale UI updates\"}),\": Directly mutating state can lead to React not detecting changes, resulting in the UI not updating as expected.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Debugging difficulties\"}),\": Mutating state directly can make it harder to track state changes and debug issues.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:\"Unexpected behavior\"}),\": Mutating state can lead to unpredictable behavior, especially when multiple components depend on the same state.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"How to update state correctly\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Instead of mutating state directly, always create a new state object. For example, when using the \",(0,t.jsx)(e.code,{children:\"useState\"}),\" hook:\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`const [state, setState] = useState(initialState);\n\n// Incorrect: Directly mutating state\nstate.value = newValue;\n\n// Correct: Creating a new state object\nsetState({ ...state, value: newValue });\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"When using class components and \",(0,t.jsx)(e.code,{children:\"setState\"}),\":\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-javascript\",children:`this.setState((prevState) => ({\n  ...prevState,\n  value: newValue,\n}));\n`})}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React documentation on state\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/learn/preserving-and-resetting-state\",children:\"React documentation on reconciliation\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://daveceddia.com/why-not-modify-react-state-directly/\",children:\"Why not to mutate state in React\"})}),`\n`]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(d,{...n})}):d(n)}return v(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/why-does-react-recommend-against-mutating-state/zh-CN.json b/apps/web/src/__generated__/questions/quiz/why-does-react-recommend-against-mutating-state/zh-CN.json
index 755612304..040508447 100644
--- a/apps/web/src/__generated__/questions/quiz/why-does-react-recommend-against-mutating-state/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/why-does-react-recommend-against-mutating-state/zh-CN.json
@@ -32,5 +32,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/why-does-react-recommend-against-mutating-state/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var o=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var c in e)r(t,c,{get:e[c],enumerable:!0})},l=(t,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!R.call(t,a)&&a!==c&&r(t,a,{get:()=>e[a],enumerable:!(i=u(e,a))||i.enumerable});return t};var S=(t,e,c)=>(c=t!=null?o(m(t)):{},l(e||!t||!t.__esModule?r(c,\"default\",{value:t,enumerable:!0}):c,t)),f=t=>l(r({},\"__esModule\",{value:!0}),t);var d=g((y,h)=>{h.exports=_jsx_runtime});var M={};v(M,{default:()=>D,frontmatter:()=>j});var n=S(d()),j={title:\"\\u4E3A\\u4EC0\\u4E48 React \\u5EFA\\u8BAE\\u4E0D\\u8981\\u4FEE\\u6539\\u72B6\\u6001\\uFF1F\"};function s(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",ol:\"ol\",li:\"li\",strong:\"strong\",pre:\"pre\",ul:\"ul\",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:[\"React \\u5EFA\\u8BAE\\u4E0D\\u8981\\u4FEE\\u6539\\u72B6\\u6001\\uFF0C\\u56E0\\u4E3A\\u5B83\\u53EF\\u80FD\\u5BFC\\u81F4\\u610F\\u5916\\u884C\\u4E3A\\u548C\\u9519\\u8BEF\\u3002React \\u4F9D\\u8D56\\u4E8E\\u72B6\\u6001\\u4E0D\\u53D8\\u6027\\u6765\\u6709\\u6548\\u5730\\u786E\\u5B9A\\u4F55\\u65F6\\u91CD\\u65B0\\u6E32\\u67D3\\u7EC4\\u4EF6\\u3002\\u5F53\\u72B6\\u6001\\u88AB\\u76F4\\u63A5\\u4FEE\\u6539\\u65F6\\uFF0CReact \\u53EF\\u80FD\\u65E0\\u6CD5\\u68C0\\u6D4B\\u5230\\u66F4\\u6539\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u8FC7\\u65F6\\u6216\\u4E0D\\u6B63\\u786E\\u7684 UI \\u66F4\\u65B0\\u3002\\u76F8\\u53CD\\uFF0C\\u8BF7\\u59CB\\u7EC8\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"setState\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"useState\"}),\" \\u94A9\\u5B50\\u7B49\\u65B9\\u6CD5\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u72B6\\u6001\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4E3A\\u4EC0\\u4E48 React \\u5EFA\\u8BAE\\u4E0D\\u8981\\u4FEE\\u6539\\u72B6\\u6001\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"React \\u7684\\u6E32\\u67D3\\u673A\\u5236\"}),`\n`,(0,n.jsx)(e.p,{children:\"React \\u4F7F\\u7528\\u865A\\u62DF DOM \\u6765\\u4F18\\u5316\\u6E32\\u67D3\\u3002\\u5F53\\u72B6\\u6001\\u6539\\u53D8\\u65F6\\uFF0CReact \\u5C06\\u65B0\\u7684\\u865A\\u62DF DOM \\u4E0E\\u4E4B\\u524D\\u7684\\u865A\\u62DF DOM \\u8FDB\\u884C\\u6BD4\\u8F83\\uFF0C\\u4EE5\\u786E\\u5B9A\\u66F4\\u65B0\\u5B9E\\u9645 DOM \\u6240\\u9700\\u7684\\u6700\\u5C0F\\u66F4\\u6539\\u96C6\\u3002\\u6B64\\u8FC7\\u7A0B\\u79F0\\u4E3A\\u534F\\u8C03\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E0D\\u53D8\\u6027\\u548C\\u72B6\\u6001\\u6BD4\\u8F83\"}),`\n`,(0,n.jsx)(e.p,{children:\"React \\u4F9D\\u8D56\\u4E8E\\u4E0D\\u53D8\\u6027\\u6765\\u6709\\u6548\\u5730\\u68C0\\u6D4B\\u66F4\\u6539\\u3002\\u5F53\\u72B6\\u6001\\u662F\\u4E0D\\u53EF\\u53D8\\u7684\\uFF0CReact \\u53EF\\u4EE5\\u901A\\u8FC7\\u6BD4\\u8F83\\u5F15\\u7528\\u6765\\u5FEB\\u901F\\u786E\\u5B9A\\u7EC4\\u4EF6\\u662F\\u5426\\u9700\\u8981\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\\u5982\\u679C\\u5F15\\u7528\\u4E0D\\u540C\\uFF0CReact \\u77E5\\u9053\\u72B6\\u6001\\u5DF2\\u66F4\\u6539\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4FEE\\u6539\\u72B6\\u6001\\u7684\\u95EE\\u9898\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8FC7\\u65F6\\u7684 UI \\u66F4\\u65B0\"}),\"\\uFF1A\\u76F4\\u63A5\\u4FEE\\u6539\\u72B6\\u6001\\u53EF\\u80FD\\u5BFC\\u81F4 React \\u65E0\\u6CD5\\u68C0\\u6D4B\\u5230\\u66F4\\u6539\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4 UI \\u672A\\u6309\\u9884\\u671F\\u66F4\\u65B0\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8C03\\u8BD5\\u56F0\\u96BE\"}),\"\\uFF1A\\u76F4\\u63A5\\u4FEE\\u6539\\u72B6\\u6001\\u4F1A\\u4F7F\\u8DDF\\u8E2A\\u72B6\\u6001\\u66F4\\u6539\\u548C\\u8C03\\u8BD5\\u95EE\\u9898\\u53D8\\u5F97\\u66F4\\u52A0\\u56F0\\u96BE\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u610F\\u5916\\u884C\\u4E3A\"}),\"\\uFF1A\\u4FEE\\u6539\\u72B6\\u6001\\u53EF\\u80FD\\u5BFC\\u81F4\\u4E0D\\u53EF\\u9884\\u6D4B\\u7684\\u884C\\u4E3A\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u591A\\u4E2A\\u7EC4\\u4EF6\\u4F9D\\u8D56\\u4E8E\\u540C\\u4E00\\u72B6\\u6001\\u65F6\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5982\\u4F55\\u6B63\\u786E\\u66F4\\u65B0\\u72B6\\u6001\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E0D\\u8981\\u76F4\\u63A5\\u4FEE\\u6539\\u72B6\\u6001\\uFF0C\\u800C\\u662F\\u59CB\\u7EC8\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u72B6\\u6001\\u5BF9\\u8C61\\u3002\\u4F8B\\u5982\\uFF0C\\u5F53\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useState\"}),\" \\u94A9\\u5B50\\u65F6\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [state, setState] = useState(initialState);\n\n// \\u9519\\u8BEF\\uFF1A\\u76F4\\u63A5\\u4FEE\\u6539\\u72B6\\u6001\nstate.value = newValue;\n\n// \\u6B63\\u786E\\uFF1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u72B6\\u6001\\u5BF9\\u8C61\nsetState({ ...state, value: newValue });\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u4F7F\\u7528\\u7C7B\\u7EC4\\u4EF6\\u548C \",(0,n.jsx)(e.code,{children:\"setState\"}),\" \\u65F6\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`this.setState((prevState) => ({\n  ...prevState,\n  value: newValue,\n}));\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React documentation on state\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/preserving-and-resetting-state\",children:\"React documentation on reconciliation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://daveceddia.com/why-not-modify-react-state-directly/\",children:\"Why not to mutate state in React\"})}),`\n`]})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(s,t)})):s(t)}var D=x;return f(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),S=(t,e)=>{for(var c in e)r(t,c,{get:e[c],enumerable:!0})},i=(t,e,c,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!g.call(t,a)&&a!==c&&r(t,a,{get:()=>e[a],enumerable:!(l=p(e,a))||l.enumerable});return t};var f=(t,e,c)=>(c=t!=null?u(R(t)):{},i(e||!t||!t.__esModule?r(c,\"default\",{value:t,enumerable:!0}):c,t)),x=t=>i(r({},\"__esModule\",{value:!0}),t);var d=v((_,h)=>{h.exports=_jsx_runtime});var D={};S(D,{default:()=>s,frontmatter:()=>j});var n=f(d()),j={title:\"\\u4E3A\\u4EC0\\u4E48 React \\u5EFA\\u8BAE\\u4E0D\\u8981\\u4FEE\\u6539\\u72B6\\u6001\\uFF1F\"};function o(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"React \\u5EFA\\u8BAE\\u4E0D\\u8981\\u4FEE\\u6539\\u72B6\\u6001\\uFF0C\\u56E0\\u4E3A\\u5B83\\u53EF\\u80FD\\u5BFC\\u81F4\\u610F\\u5916\\u884C\\u4E3A\\u548C\\u9519\\u8BEF\\u3002React \\u4F9D\\u8D56\\u4E8E\\u72B6\\u6001\\u4E0D\\u53D8\\u6027\\u6765\\u6709\\u6548\\u5730\\u786E\\u5B9A\\u4F55\\u65F6\\u91CD\\u65B0\\u6E32\\u67D3\\u7EC4\\u4EF6\\u3002\\u5F53\\u72B6\\u6001\\u88AB\\u76F4\\u63A5\\u4FEE\\u6539\\u65F6\\uFF0CReact \\u53EF\\u80FD\\u65E0\\u6CD5\\u68C0\\u6D4B\\u5230\\u66F4\\u6539\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u8FC7\\u65F6\\u6216\\u4E0D\\u6B63\\u786E\\u7684 UI \\u66F4\\u65B0\\u3002\\u76F8\\u53CD\\uFF0C\\u8BF7\\u59CB\\u7EC8\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"setState\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"useState\"}),\" \\u94A9\\u5B50\\u7B49\\u65B9\\u6CD5\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u72B6\\u6001\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u4E3A\\u4EC0\\u4E48 React \\u5EFA\\u8BAE\\u4E0D\\u8981\\u4FEE\\u6539\\u72B6\\u6001\\uFF1F\"}),`\n`,(0,n.jsx)(e.h3,{children:\"React \\u7684\\u6E32\\u67D3\\u673A\\u5236\"}),`\n`,(0,n.jsx)(e.p,{children:\"React \\u4F7F\\u7528\\u865A\\u62DF DOM \\u6765\\u4F18\\u5316\\u6E32\\u67D3\\u3002\\u5F53\\u72B6\\u6001\\u6539\\u53D8\\u65F6\\uFF0CReact \\u5C06\\u65B0\\u7684\\u865A\\u62DF DOM \\u4E0E\\u4E4B\\u524D\\u7684\\u865A\\u62DF DOM \\u8FDB\\u884C\\u6BD4\\u8F83\\uFF0C\\u4EE5\\u786E\\u5B9A\\u66F4\\u65B0\\u5B9E\\u9645 DOM \\u6240\\u9700\\u7684\\u6700\\u5C0F\\u66F4\\u6539\\u96C6\\u3002\\u6B64\\u8FC7\\u7A0B\\u79F0\\u4E3A\\u534F\\u8C03\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4E0D\\u53D8\\u6027\\u548C\\u72B6\\u6001\\u6BD4\\u8F83\"}),`\n`,(0,n.jsx)(e.p,{children:\"React \\u4F9D\\u8D56\\u4E8E\\u4E0D\\u53D8\\u6027\\u6765\\u6709\\u6548\\u5730\\u68C0\\u6D4B\\u66F4\\u6539\\u3002\\u5F53\\u72B6\\u6001\\u662F\\u4E0D\\u53EF\\u53D8\\u7684\\uFF0CReact \\u53EF\\u4EE5\\u901A\\u8FC7\\u6BD4\\u8F83\\u5F15\\u7528\\u6765\\u5FEB\\u901F\\u786E\\u5B9A\\u7EC4\\u4EF6\\u662F\\u5426\\u9700\\u8981\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\\u5982\\u679C\\u5F15\\u7528\\u4E0D\\u540C\\uFF0CReact \\u77E5\\u9053\\u72B6\\u6001\\u5DF2\\u66F4\\u6539\\u3002\"}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u4FEE\\u6539\\u72B6\\u6001\\u7684\\u95EE\\u9898\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8FC7\\u65F6\\u7684 UI \\u66F4\\u65B0\"}),\"\\uFF1A\\u76F4\\u63A5\\u4FEE\\u6539\\u72B6\\u6001\\u53EF\\u80FD\\u5BFC\\u81F4 React \\u65E0\\u6CD5\\u68C0\\u6D4B\\u5230\\u66F4\\u6539\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4 UI \\u672A\\u6309\\u9884\\u671F\\u66F4\\u65B0\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u8C03\\u8BD5\\u56F0\\u96BE\"}),\"\\uFF1A\\u76F4\\u63A5\\u4FEE\\u6539\\u72B6\\u6001\\u4F1A\\u4F7F\\u8DDF\\u8E2A\\u72B6\\u6001\\u66F4\\u6539\\u548C\\u8C03\\u8BD5\\u95EE\\u9898\\u53D8\\u5F97\\u66F4\\u52A0\\u56F0\\u96BE\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"\\u610F\\u5916\\u884C\\u4E3A\"}),\"\\uFF1A\\u4FEE\\u6539\\u72B6\\u6001\\u53EF\\u80FD\\u5BFC\\u81F4\\u4E0D\\u53EF\\u9884\\u6D4B\\u7684\\u884C\\u4E3A\\uFF0C\\u5C24\\u5176\\u662F\\u5728\\u591A\\u4E2A\\u7EC4\\u4EF6\\u4F9D\\u8D56\\u4E8E\\u540C\\u4E00\\u72B6\\u6001\\u65F6\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"\\u5982\\u4F55\\u6B63\\u786E\\u66F4\\u65B0\\u72B6\\u6001\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E0D\\u8981\\u76F4\\u63A5\\u4FEE\\u6539\\u72B6\\u6001\\uFF0C\\u800C\\u662F\\u59CB\\u7EC8\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u72B6\\u6001\\u5BF9\\u8C61\\u3002\\u4F8B\\u5982\\uFF0C\\u5F53\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"useState\"}),\" \\u94A9\\u5B50\\u65F6\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [state, setState] = useState(initialState);\n\n// \\u9519\\u8BEF\\uFF1A\\u76F4\\u63A5\\u4FEE\\u6539\\u72B6\\u6001\nstate.value = newValue;\n\n// \\u6B63\\u786E\\uFF1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u72B6\\u6001\\u5BF9\\u8C61\nsetState({ ...state, value: newValue });\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5F53\\u4F7F\\u7528\\u7C7B\\u7EC4\\u4EF6\\u548C \",(0,n.jsx)(e.code,{children:\"setState\"}),\" \\u65F6\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`this.setState((prevState) => ({\n  ...prevState,\n  value: newValue,\n}));\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/state-a-components-memory\",children:\"React documentation on state\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/preserving-and-resetting-state\",children:\"React documentation on reconciliation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://daveceddia.com/why-not-modify-react-state-directly/\",children:\"Why not to mutate state in React\"})}),`\n`]})]})}function s(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(o,{...t})}):o(t)}return x(D);})();\n;return Component;"
 }
\ No newline at end of file
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 0fe1054a4..6a88983bc 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),f=(i,e)=>{for(var t in e)r(i,t,{get:e[t],enumerable:!0})},a=(i,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!g.call(i,o)&&o!==t&&r(i,o,{get:()=>e[o],enumerable:!(s=u(e,o))||s.enumerable});return i};var y=(i,e,t)=>(t=i!=null?h(b(i)):{},a(e||!i||!i.__esModule?r(t,\"default\",{value:i,enumerable:!0}):t,i)),v=i=>a(r({},\"__esModule\",{value:!0}),i);var c=m((I,l)=>{l.exports=_jsx_runtime});var S={};f(S,{default:()=>w,frontmatter:()=>x});var n=y(c()),x={title:\"Why is extending built-in JavaScript objects not a good idea?\"};function d(i){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",pre:\"pre\",ol:\"ol\",li:\"li\",strong:\"strong\",a:\"a\",ul:\"ul\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Extending a built-in/native JavaScript object means adding properties/functions to its \",(0,n.jsx)(e.code,{children:\"prototype\"}),\". While this may seem like a good idea at first, it is dangerous in practice. Imagine your code uses a few libraries that both extend the \",(0,n.jsx)(e.code,{children:\"Array.prototype\"}),\" by adding the same \",(0,n.jsx)(e.code,{children:\"contains\"}),\" method, the implementations will overwrite each other and your code will have unpredictable behavior if these two methods do not work the same way.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"The only time you may want to extend a native object is when you want to create a polyfill, essentially providing your own implementation for a method that is part of the JavaScript specification but might not exist in the user's browser due to it being an older browser.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Extending JavaScript\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript it's very easy to extend a built-in/native object. You can simply extend a built-in object by adding properties and functions to its \",(0,n.jsx)(e.code,{children:\"prototype\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`String.prototype.reverseString = function () {\n  return this.split('').reverse().join('');\n};\n\nconsole.log('hello world'.reverseString()); // Outputs 'dlrow olleh'\n\n// Instead of extending the built-in object, write a pure utility function to do it.\n\nfunction reverseString(str) {\n  return str.split('').reverse().join('');\n}\n\nconsole.log(reverseString('hello world')); // Outputs 'dlrow olleh'\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Disadvantages\"}),`\n`,(0,n.jsx)(e.p,{children:\"Extending built-in JavaScript objects is essentially modifying the global scope and it's not a good idea because:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Future-proofing\"}),\": If a browser decides to implement its own version of a method, your custom extension might get overridden silently, leading to unexpected behavior or conflicts.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Collisions\"}),\": Adding custom methods to built-in objects can lead to collisions with future browser implementations or other libraries, causing unexpected behavior or errors.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Maintenance and debugging\"}),\": When extending built-in objects, it can be difficult for other developers to understand the changes made, making maintenance and debugging more challenging.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Performance\"}),\": Extending built-in objects can potentially impact performance, especially if the extensions are not optimized for the specific use case.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Security\"}),\": In some cases, extending built-in objects can introduce security vulnerabilities if not done correctly, such as adding enumerable properties that can be exploited by malicious code.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Compatibility\"}),\": Custom extensions to built-in objects may not be compatible with all browsers or environments, leading to issues with cross-browser compatibility.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Namespace clashes\"}),\": Extending built-in objects can lead to namespace clashes if multiple libraries or scripts extend the same object in different ways, causing conflicts and unexpected behavior.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"We dive deeper into \",(0,n.jsx)(e.a,{href:\"/questions/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it\",children:\"why it is a bad idea to modify the global scope\"}),\".\"]}),`\n`,(0,n.jsx)(e.p,{children:\"It is not recommended to extend built-in objects due to these potential issues and instead suggest using composition or creating custom classes and utility functions to achieve the desired functionality.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Alternatives to extending built-in objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"Instead of extending built-in objects, do the following instead:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Create custom utility functions\"}),\": For simple tasks, creating small utility functions specific to your needs can be a cleaner and more maintainable solution.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Use libraries and frameworks\"}),\": Many libraries and frameworks provide their own helper methods and extensions, eliminating the need to modify built-in objects directly.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Polyfilling as a valid reason\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"One valid reason to extend built-in objects is to implement polyfills for the latest ECMAScript standard and proposals. \",(0,n.jsx)(e.a,{href:\"https://github.com/zloirock/core-js\",children:(0,n.jsx)(e.code,{children:\"core-js\"})}),\" is a popular library that is present on most popular websites. It not only polyfills missing features but also fixes incorrect or non-compliant implementations of JavaScript features in various browsers and runtimes.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`import 'core-js/actual/array/flat-map'; // With this, Array.prototype.flatMap is available to be used.\n\n[1, 2].flatMap((it) => [it, it]); // => [1, 1, 2, 2]\n`})}),`\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://lucybain.com/blog/2014/js-extending-built-in-objects/\",children:\"JS: don't extend JS objects\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/extend-natives\",children:\"Extending built-in classes\"})}),`\n`]})]})}function j(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(d,i)})):d(i)}var w=j;return v(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),y=(i,e)=>{for(var t in e)r(i,t,{get:e[t],enumerable:!0})},a=(i,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of b(e))!m.call(i,o)&&o!==t&&r(i,o,{get:()=>e[o],enumerable:!(s=p(e,o))||s.enumerable});return i};var v=(i,e,t)=>(t=i!=null?u(g(i)):{},a(e||!i||!i.__esModule?r(t,\"default\",{value:i,enumerable:!0}):t,i)),x=i=>a(r({},\"__esModule\",{value:!0}),i);var c=f((J,l)=>{l.exports=_jsx_runtime});var j={};y(j,{default:()=>h,frontmatter:()=>w});var n=v(c()),w={title:\"Why is extending built-in JavaScript objects not a good idea?\"};function d(i){let e={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Extending a built-in/native JavaScript object means adding properties/functions to its \",(0,n.jsx)(e.code,{children:\"prototype\"}),\". While this may seem like a good idea at first, it is dangerous in practice. Imagine your code uses a few libraries that both extend the \",(0,n.jsx)(e.code,{children:\"Array.prototype\"}),\" by adding the same \",(0,n.jsx)(e.code,{children:\"contains\"}),\" method, the implementations will overwrite each other and your code will have unpredictable behavior if these two methods do not work the same way.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"The only time you may want to extend a native object is when you want to create a polyfill, essentially providing your own implementation for a method that is part of the JavaScript specification but might not exist in the user's browser due to it being an older browser.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Extending JavaScript\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript it's very easy to extend a built-in/native object. You can simply extend a built-in object by adding properties and functions to its \",(0,n.jsx)(e.code,{children:\"prototype\"}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`String.prototype.reverseString = function () {\n  return this.split('').reverse().join('');\n};\n\nconsole.log('hello world'.reverseString()); // Outputs 'dlrow olleh'\n\n// Instead of extending the built-in object, write a pure utility function to do it.\n\nfunction reverseString(str) {\n  return str.split('').reverse().join('');\n}\n\nconsole.log(reverseString('hello world')); // Outputs 'dlrow olleh'\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Disadvantages\"}),`\n`,(0,n.jsx)(e.p,{children:\"Extending built-in JavaScript objects is essentially modifying the global scope and it's not a good idea because:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Future-proofing\"}),\": If a browser decides to implement its own version of a method, your custom extension might get overridden silently, leading to unexpected behavior or conflicts.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Collisions\"}),\": Adding custom methods to built-in objects can lead to collisions with future browser implementations or other libraries, causing unexpected behavior or errors.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Maintenance and debugging\"}),\": When extending built-in objects, it can be difficult for other developers to understand the changes made, making maintenance and debugging more challenging.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Performance\"}),\": Extending built-in objects can potentially impact performance, especially if the extensions are not optimized for the specific use case.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Security\"}),\": In some cases, extending built-in objects can introduce security vulnerabilities if not done correctly, such as adding enumerable properties that can be exploited by malicious code.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Compatibility\"}),\": Custom extensions to built-in objects may not be compatible with all browsers or environments, leading to issues with cross-browser compatibility.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Namespace clashes\"}),\": Extending built-in objects can lead to namespace clashes if multiple libraries or scripts extend the same object in different ways, causing conflicts and unexpected behavior.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"We dive deeper into \",(0,n.jsx)(e.a,{href:\"/questions/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it\",children:\"why it is a bad idea to modify the global scope\"}),\".\"]}),`\n`,(0,n.jsx)(e.p,{children:\"It is not recommended to extend built-in objects due to these potential issues and instead suggest using composition or creating custom classes and utility functions to achieve the desired functionality.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Alternatives to extending built-in objects\"}),`\n`,(0,n.jsx)(e.p,{children:\"Instead of extending built-in objects, do the following instead:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Create custom utility functions\"}),\": For simple tasks, creating small utility functions specific to your needs can be a cleaner and more maintainable solution.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Use libraries and frameworks\"}),\": Many libraries and frameworks provide their own helper methods and extensions, eliminating the need to modify built-in objects directly.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Polyfilling as a valid reason\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"One valid reason to extend built-in objects is to implement polyfills for the latest ECMAScript standard and proposals. \",(0,n.jsx)(e.a,{href:\"https://github.com/zloirock/core-js\",children:(0,n.jsx)(e.code,{children:\"core-js\"})}),\" is a popular library that is present on most popular websites. It not only polyfills missing features but also fixes incorrect or non-compliant implementations of JavaScript features in various browsers and runtimes.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`import 'core-js/actual/array/flat-map'; // With this, Array.prototype.flatMap is available to be used.\n\n[1, 2].flatMap((it) => [it, it]); // => [1, 1, 2, 2]\n`})}),`\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://lucybain.com/blog/2014/js-extending-built-in-objects/\",children:\"JS: don't extend JS objects\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/extend-natives\",children:\"Extending built-in classes\"})}),`\n`]})]})}function h(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(d,{...i})}):d(i)}return x(j);})();\n;return Component;"
 }
\ No newline at end of file
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 43a7d95db..c51da1458 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),v=(o,e)=>{for(var n in e)s(o,n,{get:e[n],enumerable:!0})},i=(o,e,n,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of l(e))!g.call(o,t)&&t!==n&&s(o,t,{get:()=>e[t],enumerable:!(r=u(e,t))||r.enumerable});return o};var j=(o,e,n)=>(n=o!=null?p(b(o)):{},i(e||!o||!o.__esModule?s(n,\"default\",{value:o,enumerable:!0}):n,o)),x=o=>i(s({},\"__esModule\",{value:!0}),o);var c=f((J,d)=>{d.exports=_jsx_runtime});var y={};v(y,{default:()=>h,frontmatter:()=>q});var a=j(c()),q={title:\"Por que estender objetos JavaScript nativos n\\xE3o \\xE9 uma boa ideia?\"};function m(o){let e=Object.assign({p:\"p\",code:\"code\"},o.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(e.p,{children:[\"Estender um objeto nativo/embutido do JavaScript significa adicionar propriedades/fun\\xE7\\xF5es ao seu prototype. Embora isso possa parecer uma boa ideia a princ\\xEDpio, \\xE9 perigoso na pr\\xE1tica. Imagine que seu c\\xF3digo use algumas bibliotecas que estendem o \",(0,a.jsx)(e.code,{children:\"Array.prototype\"}),\" adicionando o mesmo m\\xE9todo \",(0,a.jsx)(e.code,{children:\"contains\"}),\". As implementa\\xE7\\xF5es se sobrescrever\\xE3o e seu c\\xF3digo quebrar\\xE1 se o comportamento desses dois m\\xE9todos n\\xE3o for o mesmo.\"]}),`\n`,(0,a.jsx)(e.p,{children:\"A \\xFAnica vez que voc\\xEA pode querer estender um objeto nativo \\xE9 quando deseja criar um polyfill, essencialmente fornecendo sua pr\\xF3pria implementa\\xE7\\xE3o para um m\\xE9todo que faz parte da especifica\\xE7\\xE3o do JavaScript, mas pode n\\xE3o existir no navegador do usu\\xE1rio devido a ser um navegador mais antigo.\"})]})}function _(o={}){let{wrapper:e}=o.components||{};return e?(0,a.jsx)(e,Object.assign({},o,{children:(0,a.jsx)(m,o)})):m(o)}var h=_;return x(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var n in e)t(o,n,{get:e[n],enumerable:!0})},i=(o,e,n,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!b.call(o,r)&&r!==n&&t(o,r,{get:()=>e[r],enumerable:!(s=l(e,r))||s.enumerable});return o};var j=(o,e,n)=>(n=o!=null?u(v(o)):{},i(e||!o||!o.__esModule?t(n,\"default\",{value:o,enumerable:!0}):n,o)),q=o=>i(t({},\"__esModule\",{value:!0}),o);var c=g((A,d)=>{d.exports=_jsx_runtime});var h={};x(h,{default:()=>p,frontmatter:()=>_});var a=j(c()),_={title:\"Por que estender objetos JavaScript nativos n\\xE3o \\xE9 uma boa ideia?\"};function m(o){let e={code:\"code\",p:\"p\",...o.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(e.p,{children:[\"Estender um objeto nativo/embutido do JavaScript significa adicionar propriedades/fun\\xE7\\xF5es ao seu prototype. Embora isso possa parecer uma boa ideia a princ\\xEDpio, \\xE9 perigoso na pr\\xE1tica. Imagine que seu c\\xF3digo use algumas bibliotecas que estendem o \",(0,a.jsx)(e.code,{children:\"Array.prototype\"}),\" adicionando o mesmo m\\xE9todo \",(0,a.jsx)(e.code,{children:\"contains\"}),\". As implementa\\xE7\\xF5es se sobrescrever\\xE3o e seu c\\xF3digo quebrar\\xE1 se o comportamento desses dois m\\xE9todos n\\xE3o for o mesmo.\"]}),`\n`,(0,a.jsx)(e.p,{children:\"A \\xFAnica vez que voc\\xEA pode querer estender um objeto nativo \\xE9 quando deseja criar um polyfill, essencialmente fornecendo sua pr\\xF3pria implementa\\xE7\\xE3o para um m\\xE9todo que faz parte da especifica\\xE7\\xE3o do JavaScript, mas pode n\\xE3o existir no navegador do usu\\xE1rio devido a ser um navegador mais antigo.\"})]})}function p(o={}){let{wrapper:e}=o.components||{};return e?(0,a.jsx)(e,{...o,children:(0,a.jsx)(m,{...o})}):m(o)}return q(h);})();\n;return Component;"
 }
\ No newline at end of file
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 ce029cbcb..f7a6d0ff6 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var a=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var j=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),v=(r,n)=>{for(var i in n)t(r,i,{get:n[i],enumerable:!0})},o=(r,n,i,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of g(n))!f.call(r,l)&&l!==i&&t(r,l,{get:()=>n[l],enumerable:!(c=p(n,l))||c.enumerable});return r};var y=(r,n,i)=>(i=r!=null?a(u(r)):{},o(n||!r||!r.__esModule?t(i,\"default\",{value:r,enumerable:!0}):i,r)),b=r=>o(t({},\"__esModule\",{value:!0}),r);var d=j((_,h)=>{h.exports=_jsx_runtime});var J={};v(J,{default:()=>x,frontmatter:()=>m});var e=y(d()),m={title:\"\\u4E3A\\u4EC0\\u4E48\\u6269\\u5C55\\u5185\\u7F6E JavaScript \\u5BF9\\u8C61\\u4E0D\\u662F\\u4E00\\u4E2A\\u597D\\u4E3B\\u610F\\uFF1F\"};function s(r){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",pre:\"pre\",ol:\"ol\",li:\"li\",strong:\"strong\",a:\"a\",ul:\"ul\"},r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u6269\\u5C55\\u5185\\u7F6E/\\u539F\\u751F JavaScript \\u5BF9\\u8C61\\u610F\\u5473\\u7740\\u5411\\u5176 \",(0,e.jsx)(n.code,{children:\"prototype\"}),\" \\u6DFB\\u52A0\\u5C5E\\u6027/\\u51FD\\u6570\\u3002\\u867D\\u7136\\u8FD9\\u4E4D\\u4E00\\u770B\\u53EF\\u80FD\\u662F\\u4E00\\u4E2A\\u597D\\u4E3B\\u610F\\uFF0C\\u4F46\\u5B9E\\u9645\\u4E0A\\u5F88\\u5371\\u9669\\u3002\\u60F3\\u8C61\\u4E00\\u4E0B\\uFF0C\\u60A8\\u7684\\u4EE3\\u7801\\u4F7F\\u7528\\u4E86\\u51E0\\u4E2A\\u5E93\\uFF0C\\u5B83\\u4EEC\\u90FD\\u901A\\u8FC7\\u6DFB\\u52A0\\u76F8\\u540C\\u7684 \",(0,e.jsx)(n.code,{children:\"contains\"}),\" \\u65B9\\u6CD5\\u6765\\u6269\\u5C55 \",(0,e.jsx)(n.code,{children:\"Array.prototype\"}),\"\\uFF0C\\u8FD9\\u4E9B\\u5B9E\\u73B0\\u5C06\\u76F8\\u4E92\\u8986\\u76D6\\uFF0C\\u5982\\u679C\\u8FD9\\u4E24\\u79CD\\u65B9\\u6CD5\\u7684\\u5DE5\\u4F5C\\u65B9\\u5F0F\\u4E0D\\u540C\\uFF0C\\u60A8\\u7684\\u4EE3\\u7801\\u5C06\\u5177\\u6709\\u4E0D\\u53EF\\u9884\\u6D4B\\u7684\\u884C\\u4E3A\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u53EA\\u6709\\u5F53\\u60A8\\u60F3\\u521B\\u5EFA\\u4E00\\u4E2A polyfill \\u65F6\\uFF0C\\u624D\\u53EF\\u80FD\\u9700\\u8981\\u6269\\u5C55\\u539F\\u751F\\u5BF9\\u8C61\\uFF0C\\u672C\\u8D28\\u4E0A\\u662F\\u4E3A\\u60A8\\u81EA\\u5DF1\\u7684\\u65B9\\u6CD5\\u63D0\\u4F9B\\u5B9E\\u73B0\\uFF0C\\u8BE5\\u65B9\\u6CD5\\u662F JavaScript \\u89C4\\u8303\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u4F46\\u7531\\u4E8E\\u5B83\\u662F\\u4E00\\u4E2A\\u8F83\\u65E7\\u7684\\u6D4F\\u89C8\\u5668\\uFF0C\\u53EF\\u80FD\\u4E0D\\u5B58\\u5728\\u4E8E\\u7528\\u6237\\u7684\\u6D4F\\u89C8\\u5668\\u4E2D\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u6269\\u5C55 JavaScript\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u6269\\u5C55\\u5185\\u7F6E/\\u539F\\u751F\\u5BF9\\u8C61\\u975E\\u5E38\\u5BB9\\u6613\\u3002\\u60A8\\u53EA\\u9700\\u901A\\u8FC7\\u5411\\u5176 \",(0,e.jsx)(n.code,{children:\"prototype\"}),\" \\u6DFB\\u52A0\\u5C5E\\u6027\\u548C\\u51FD\\u6570\\u6765\\u6269\\u5C55\\u5185\\u7F6E\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`String.prototype.reverseString = function () {\n  return this.split('').reverse().join('');\n};\n\nconsole.log('hello world'.reverseString()); // Outputs 'dlrow olleh'\n\n// Instead of extending the built-in object, write a pure utility function to do it.\n\nfunction reverseString(str) {\n  return str.split('').reverse().join('');\n}\n\nconsole.log(reverseString('hello world')); // Outputs 'dlrow olleh'\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6269\\u5C55\\u5185\\u7F6E JavaScript \\u5BF9\\u8C61\\u672C\\u8D28\\u4E0A\\u662F\\u5728\\u4FEE\\u6539\\u5168\\u5C40\\u8303\\u56F4\\uFF0C\\u8FD9\\u4E0D\\u662F\\u4E00\\u4E2A\\u597D\\u4E3B\\u610F\\uFF0C\\u56E0\\u4E3A\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9762\\u5411\\u672A\\u6765\"}),\"\\uFF1A\\u5982\\u679C\\u6D4F\\u89C8\\u5668\\u51B3\\u5B9A\\u5B9E\\u73B0\\u81EA\\u5DF1\\u7684\\u65B9\\u6CD5\\u7248\\u672C\\uFF0C\\u60A8\\u7684\\u81EA\\u5B9A\\u4E49\\u6269\\u5C55\\u53EF\\u80FD\\u4F1A\\u88AB\\u9759\\u9ED8\\u8986\\u76D6\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u610F\\u5916\\u884C\\u4E3A\\u6216\\u51B2\\u7A81\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u51B2\\u7A81\"}),\"\\uFF1A\\u5411\\u5185\\u7F6E\\u5BF9\\u8C61\\u6DFB\\u52A0\\u81EA\\u5B9A\\u4E49\\u65B9\\u6CD5\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u4E0E\\u672A\\u6765\\u7684\\u6D4F\\u89C8\\u5668\\u5B9E\\u73B0\\u6216\\u5176\\u4ED6\\u5E93\\u53D1\\u751F\\u51B2\\u7A81\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u610F\\u5916\\u884C\\u4E3A\\u6216\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7EF4\\u62A4\\u548C\\u8C03\\u8BD5\"}),\"\\uFF1A\\u6269\\u5C55\\u5185\\u7F6E\\u5BF9\\u8C61\\u65F6\\uFF0C\\u5176\\u4ED6\\u5F00\\u53D1\\u4EBA\\u5458\\u53EF\\u80FD\\u96BE\\u4EE5\\u7406\\u89E3\\u6240\\u505A\\u7684\\u66F4\\u6539\\uFF0C\\u4ECE\\u800C\\u4F7F\\u7EF4\\u62A4\\u548C\\u8C03\\u8BD5\\u66F4\\u5177\\u6311\\u6218\\u6027\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6027\\u80FD\"}),\"\\uFF1A\\u6269\\u5C55\\u5185\\u7F6E\\u5BF9\\u8C61\\u53EF\\u80FD\\u4F1A\\u5F71\\u54CD\\u6027\\u80FD\\uFF0C\\u7279\\u522B\\u662F\\u5982\\u679C\\u6269\\u5C55\\u672A\\u9488\\u5BF9\\u7279\\u5B9A\\u7528\\u4F8B\\u8FDB\\u884C\\u4F18\\u5316\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B89\\u5168\\u6027\"}),\"\\uFF1A\\u5728\\u67D0\\u4E9B\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5982\\u679C\\u672A\\u6B63\\u786E\\u6267\\u884C\\uFF0C\\u6269\\u5C55\\u5185\\u7F6E\\u5BF9\\u8C61\\u53EF\\u80FD\\u4F1A\\u5F15\\u5165\\u5B89\\u5168\\u6F0F\\u6D1E\\uFF0C\\u4F8B\\u5982\\u6DFB\\u52A0\\u53EF\\u88AB\\u6076\\u610F\\u4EE3\\u7801\\u5229\\u7528\\u7684\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u517C\\u5BB9\\u6027\"}),\"\\uFF1A\\u5BF9\\u5185\\u7F6E\\u5BF9\\u8C61\\u7684\\u81EA\\u5B9A\\u4E49\\u6269\\u5C55\\u53EF\\u80FD\\u4E0E\\u5E76\\u975E\\u6240\\u6709\\u6D4F\\u89C8\\u5668\\u6216\\u73AF\\u5883\\u517C\\u5BB9\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u8DE8\\u6D4F\\u89C8\\u5668\\u517C\\u5BB9\\u6027\\u95EE\\u9898\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u547D\\u540D\\u7A7A\\u95F4\\u51B2\\u7A81\"}),\"\\uFF1A\\u5982\\u679C\\u591A\\u4E2A\\u5E93\\u6216\\u811A\\u672C\\u4EE5\\u4E0D\\u540C\\u7684\\u65B9\\u5F0F\\u6269\\u5C55\\u540C\\u4E00\\u5BF9\\u8C61\\uFF0C\\u6269\\u5C55\\u5185\\u7F6E\\u5BF9\\u8C61\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u547D\\u540D\\u7A7A\\u95F4\\u51B2\\u7A81\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u51B2\\u7A81\\u548C\\u610F\\u5916\\u884C\\u4E3A\\u3002\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u6211\\u4EEC\\u6DF1\\u5165\\u63A2\\u8BA8\\u4E86\",(0,e.jsx)(n.a,{href:\"/questions/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it\",children:\"\\u4E3A\\u4EC0\\u4E48\\u4FEE\\u6539\\u5168\\u5C40\\u8303\\u56F4\\u4E0D\\u662F\\u4E00\\u4E2A\\u597D\\u4E3B\\u610F\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7531\\u4E8E\\u8FD9\\u4E9B\\u6F5C\\u5728\\u95EE\\u9898\\uFF0C\\u4E0D\\u5EFA\\u8BAE\\u6269\\u5C55\\u5185\\u7F6E\\u5BF9\\u8C61\\uFF0C\\u800C\\u662F\\u5EFA\\u8BAE\\u4F7F\\u7528\\u7EC4\\u5408\\u6216\\u521B\\u5EFA\\u81EA\\u5B9A\\u4E49\\u7C7B\\u548C\\u5B9E\\u7528\\u7A0B\\u5E8F\\u51FD\\u6570\\u6765\\u5B9E\\u73B0\\u6240\\u9700\\u7684\\u529F\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u6269\\u5C55\\u5185\\u7F6E\\u5BF9\\u8C61\\u7684\\u66FF\\u4EE3\\u65B9\\u6848\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E0D\\u8981\\u6269\\u5C55\\u5185\\u7F6E\\u5BF9\\u8C61\\uFF0C\\u800C\\u662F\\u6267\\u884C\\u4EE5\\u4E0B\\u64CD\\u4F5C\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u521B\\u5EFA\\u81EA\\u5B9A\\u4E49\\u5B9E\\u7528\\u7A0B\\u5E8F\\u51FD\\u6570\"}),\"\\uFF1A\\u5BF9\\u4E8E\\u7B80\\u5355\\u7684\\u4EFB\\u52A1\\uFF0C\\u521B\\u5EFA\\u7279\\u5B9A\\u4E8E\\u60A8\\u9700\\u6C42\\u7684\\u5C0F\\u578B\\u5B9E\\u7528\\u7A0B\\u5E8F\\u51FD\\u6570\\u53EF\\u4EE5\\u6210\\u4E3A\\u66F4\\u6E05\\u6670\\u3001\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u7684\\u89E3\\u51B3\\u65B9\\u6848\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F7F\\u7528\\u5E93\\u548C\\u6846\\u67B6\"}),\"\\uFF1A\\u8BB8\\u591A\\u5E93\\u548C\\u6846\\u67B6\\u90FD\\u63D0\\u4F9B\\u81EA\\u5DF1\\u7684\\u8F85\\u52A9\\u65B9\\u6CD5\\u548C\\u6269\\u5C55\\uFF0C\\u4ECE\\u800C\\u65E0\\u9700\\u76F4\\u63A5\\u4FEE\\u6539\\u5185\\u7F6E\\u5BF9\\u8C61\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F5C\\u4E3A\\u6709\\u6548\\u539F\\u56E0\\u7684 Polyfilling\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u6269\\u5C55\\u5185\\u7F6E\\u5BF9\\u8C61\\u7684\\u4E00\\u4E2A\\u6709\\u6548\\u539F\\u56E0\\u662F\\u4E3A\\u6700\\u65B0\\u7684 ECMAScript \\u6807\\u51C6\\u548C\\u63D0\\u6848\\u5B9E\\u73B0 polyfill\\u3002\",(0,e.jsx)(n.a,{href:\"https://github.com/zloirock/core-js\",children:(0,e.jsx)(n.code,{children:\"core-js\"})}),\" \\u662F\\u4E00\\u4E2A\\u6D41\\u884C\\u7684\\u5E93\\uFF0C\\u5B58\\u5728\\u4E8E\\u5927\\u591A\\u6570\\u6D41\\u884C\\u7684\\u7F51\\u7AD9\\u4E0A\\u3002\\u5B83\\u4E0D\\u4EC5\\u4F1A polyfill \\u7F3A\\u5931\\u7684\\u529F\\u80FD\\uFF0C\\u8FD8\\u4F1A\\u4FEE\\u590D\\u5404\\u79CD\\u6D4F\\u89C8\\u5668\\u548C\\u8FD0\\u884C\\u65F6\\u4E2D JavaScript \\u529F\\u80FD\\u7684\\u4E0D\\u6B63\\u786E\\u6216\\u4E0D\\u517C\\u5BB9\\u7684\\u5B9E\\u73B0\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`import 'core-js/actual/array/flat-map'; // With this, Array.prototype.flatMap is available to be used.\n\n[1, 2].flatMap((it) => [it, it]); // => [1, 1, 2, 2]\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://lucybain.com/blog/2014/js-extending-built-in-objects/\",children:\"JS: don't extend JS objects\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/extend-natives\",children:\"Extending built-in classes\"})}),`\n`]})]})}function S(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,Object.assign({},r,{children:(0,e.jsx)(s,r)})):s(r)}var x=S;return b(J);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var j=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),y=(r,n)=>{for(var i in n)t(r,i,{get:n[i],enumerable:!0})},o=(r,n,i,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of g(n))!v.call(r,l)&&l!==i&&t(r,l,{get:()=>n[l],enumerable:!(c=u(n,l))||c.enumerable});return r};var m=(r,n,i)=>(i=r!=null?p(f(r)):{},o(n||!r||!r.__esModule?t(i,\"default\",{value:r,enumerable:!0}):i,r)),S=r=>o(t({},\"__esModule\",{value:!0}),r);var d=j((w,h)=>{h.exports=_jsx_runtime});var b={};y(b,{default:()=>a,frontmatter:()=>x});var e=m(d()),x={title:\"\\u4E3A\\u4EC0\\u4E48\\u6269\\u5C55\\u5185\\u7F6E JavaScript \\u5BF9\\u8C61\\u4E0D\\u662F\\u4E00\\u4E2A\\u597D\\u4E3B\\u610F\\uFF1F\"};function s(r){let n={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u6269\\u5C55\\u5185\\u7F6E/\\u539F\\u751F JavaScript \\u5BF9\\u8C61\\u610F\\u5473\\u7740\\u5411\\u5176 \",(0,e.jsx)(n.code,{children:\"prototype\"}),\" \\u6DFB\\u52A0\\u5C5E\\u6027/\\u51FD\\u6570\\u3002\\u867D\\u7136\\u8FD9\\u4E4D\\u4E00\\u770B\\u53EF\\u80FD\\u662F\\u4E00\\u4E2A\\u597D\\u4E3B\\u610F\\uFF0C\\u4F46\\u5B9E\\u9645\\u4E0A\\u5F88\\u5371\\u9669\\u3002\\u60F3\\u8C61\\u4E00\\u4E0B\\uFF0C\\u60A8\\u7684\\u4EE3\\u7801\\u4F7F\\u7528\\u4E86\\u51E0\\u4E2A\\u5E93\\uFF0C\\u5B83\\u4EEC\\u90FD\\u901A\\u8FC7\\u6DFB\\u52A0\\u76F8\\u540C\\u7684 \",(0,e.jsx)(n.code,{children:\"contains\"}),\" \\u65B9\\u6CD5\\u6765\\u6269\\u5C55 \",(0,e.jsx)(n.code,{children:\"Array.prototype\"}),\"\\uFF0C\\u8FD9\\u4E9B\\u5B9E\\u73B0\\u5C06\\u76F8\\u4E92\\u8986\\u76D6\\uFF0C\\u5982\\u679C\\u8FD9\\u4E24\\u79CD\\u65B9\\u6CD5\\u7684\\u5DE5\\u4F5C\\u65B9\\u5F0F\\u4E0D\\u540C\\uFF0C\\u60A8\\u7684\\u4EE3\\u7801\\u5C06\\u5177\\u6709\\u4E0D\\u53EF\\u9884\\u6D4B\\u7684\\u884C\\u4E3A\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u53EA\\u6709\\u5F53\\u60A8\\u60F3\\u521B\\u5EFA\\u4E00\\u4E2A polyfill \\u65F6\\uFF0C\\u624D\\u53EF\\u80FD\\u9700\\u8981\\u6269\\u5C55\\u539F\\u751F\\u5BF9\\u8C61\\uFF0C\\u672C\\u8D28\\u4E0A\\u662F\\u4E3A\\u60A8\\u81EA\\u5DF1\\u7684\\u65B9\\u6CD5\\u63D0\\u4F9B\\u5B9E\\u73B0\\uFF0C\\u8BE5\\u65B9\\u6CD5\\u662F JavaScript \\u89C4\\u8303\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u4F46\\u7531\\u4E8E\\u5B83\\u662F\\u4E00\\u4E2A\\u8F83\\u65E7\\u7684\\u6D4F\\u89C8\\u5668\\uFF0C\\u53EF\\u80FD\\u4E0D\\u5B58\\u5728\\u4E8E\\u7528\\u6237\\u7684\\u6D4F\\u89C8\\u5668\\u4E2D\\u3002\"}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u6269\\u5C55 JavaScript\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728 JavaScript \\u4E2D\\uFF0C\\u6269\\u5C55\\u5185\\u7F6E/\\u539F\\u751F\\u5BF9\\u8C61\\u975E\\u5E38\\u5BB9\\u6613\\u3002\\u60A8\\u53EA\\u9700\\u901A\\u8FC7\\u5411\\u5176 \",(0,e.jsx)(n.code,{children:\"prototype\"}),\" \\u6DFB\\u52A0\\u5C5E\\u6027\\u548C\\u51FD\\u6570\\u6765\\u6269\\u5C55\\u5185\\u7F6E\\u5BF9\\u8C61\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`String.prototype.reverseString = function () {\n  return this.split('').reverse().join('');\n};\n\nconsole.log('hello world'.reverseString()); // Outputs 'dlrow olleh'\n\n// Instead of extending the built-in object, write a pure utility function to do it.\n\nfunction reverseString(str) {\n  return str.split('').reverse().join('');\n}\n\nconsole.log(reverseString('hello world')); // Outputs 'dlrow olleh'\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u6269\\u5C55\\u5185\\u7F6E JavaScript \\u5BF9\\u8C61\\u672C\\u8D28\\u4E0A\\u662F\\u5728\\u4FEE\\u6539\\u5168\\u5C40\\u8303\\u56F4\\uFF0C\\u8FD9\\u4E0D\\u662F\\u4E00\\u4E2A\\u597D\\u4E3B\\u610F\\uFF0C\\u56E0\\u4E3A\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u9762\\u5411\\u672A\\u6765\"}),\"\\uFF1A\\u5982\\u679C\\u6D4F\\u89C8\\u5668\\u51B3\\u5B9A\\u5B9E\\u73B0\\u81EA\\u5DF1\\u7684\\u65B9\\u6CD5\\u7248\\u672C\\uFF0C\\u60A8\\u7684\\u81EA\\u5B9A\\u4E49\\u6269\\u5C55\\u53EF\\u80FD\\u4F1A\\u88AB\\u9759\\u9ED8\\u8986\\u76D6\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u610F\\u5916\\u884C\\u4E3A\\u6216\\u51B2\\u7A81\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u51B2\\u7A81\"}),\"\\uFF1A\\u5411\\u5185\\u7F6E\\u5BF9\\u8C61\\u6DFB\\u52A0\\u81EA\\u5B9A\\u4E49\\u65B9\\u6CD5\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u4E0E\\u672A\\u6765\\u7684\\u6D4F\\u89C8\\u5668\\u5B9E\\u73B0\\u6216\\u5176\\u4ED6\\u5E93\\u53D1\\u751F\\u51B2\\u7A81\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u610F\\u5916\\u884C\\u4E3A\\u6216\\u9519\\u8BEF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u7EF4\\u62A4\\u548C\\u8C03\\u8BD5\"}),\"\\uFF1A\\u6269\\u5C55\\u5185\\u7F6E\\u5BF9\\u8C61\\u65F6\\uFF0C\\u5176\\u4ED6\\u5F00\\u53D1\\u4EBA\\u5458\\u53EF\\u80FD\\u96BE\\u4EE5\\u7406\\u89E3\\u6240\\u505A\\u7684\\u66F4\\u6539\\uFF0C\\u4ECE\\u800C\\u4F7F\\u7EF4\\u62A4\\u548C\\u8C03\\u8BD5\\u66F4\\u5177\\u6311\\u6218\\u6027\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6027\\u80FD\"}),\"\\uFF1A\\u6269\\u5C55\\u5185\\u7F6E\\u5BF9\\u8C61\\u53EF\\u80FD\\u4F1A\\u5F71\\u54CD\\u6027\\u80FD\\uFF0C\\u7279\\u522B\\u662F\\u5982\\u679C\\u6269\\u5C55\\u672A\\u9488\\u5BF9\\u7279\\u5B9A\\u7528\\u4F8B\\u8FDB\\u884C\\u4F18\\u5316\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B89\\u5168\\u6027\"}),\"\\uFF1A\\u5728\\u67D0\\u4E9B\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5982\\u679C\\u672A\\u6B63\\u786E\\u6267\\u884C\\uFF0C\\u6269\\u5C55\\u5185\\u7F6E\\u5BF9\\u8C61\\u53EF\\u80FD\\u4F1A\\u5F15\\u5165\\u5B89\\u5168\\u6F0F\\u6D1E\\uFF0C\\u4F8B\\u5982\\u6DFB\\u52A0\\u53EF\\u88AB\\u6076\\u610F\\u4EE3\\u7801\\u5229\\u7528\\u7684\\u53EF\\u679A\\u4E3E\\u5C5E\\u6027\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u517C\\u5BB9\\u6027\"}),\"\\uFF1A\\u5BF9\\u5185\\u7F6E\\u5BF9\\u8C61\\u7684\\u81EA\\u5B9A\\u4E49\\u6269\\u5C55\\u53EF\\u80FD\\u4E0E\\u5E76\\u975E\\u6240\\u6709\\u6D4F\\u89C8\\u5668\\u6216\\u73AF\\u5883\\u517C\\u5BB9\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u8DE8\\u6D4F\\u89C8\\u5668\\u517C\\u5BB9\\u6027\\u95EE\\u9898\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u547D\\u540D\\u7A7A\\u95F4\\u51B2\\u7A81\"}),\"\\uFF1A\\u5982\\u679C\\u591A\\u4E2A\\u5E93\\u6216\\u811A\\u672C\\u4EE5\\u4E0D\\u540C\\u7684\\u65B9\\u5F0F\\u6269\\u5C55\\u540C\\u4E00\\u5BF9\\u8C61\\uFF0C\\u6269\\u5C55\\u5185\\u7F6E\\u5BF9\\u8C61\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u547D\\u540D\\u7A7A\\u95F4\\u51B2\\u7A81\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u51B2\\u7A81\\u548C\\u610F\\u5916\\u884C\\u4E3A\\u3002\"]}),`\n`]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u6211\\u4EEC\\u6DF1\\u5165\\u63A2\\u8BA8\\u4E86\",(0,e.jsx)(n.a,{href:\"/questions/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it\",children:\"\\u4E3A\\u4EC0\\u4E48\\u4FEE\\u6539\\u5168\\u5C40\\u8303\\u56F4\\u4E0D\\u662F\\u4E00\\u4E2A\\u597D\\u4E3B\\u610F\"}),\"\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u7531\\u4E8E\\u8FD9\\u4E9B\\u6F5C\\u5728\\u95EE\\u9898\\uFF0C\\u4E0D\\u5EFA\\u8BAE\\u6269\\u5C55\\u5185\\u7F6E\\u5BF9\\u8C61\\uFF0C\\u800C\\u662F\\u5EFA\\u8BAE\\u4F7F\\u7528\\u7EC4\\u5408\\u6216\\u521B\\u5EFA\\u81EA\\u5B9A\\u4E49\\u7C7B\\u548C\\u5B9E\\u7528\\u7A0B\\u5E8F\\u51FD\\u6570\\u6765\\u5B9E\\u73B0\\u6240\\u9700\\u7684\\u529F\\u80FD\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u6269\\u5C55\\u5185\\u7F6E\\u5BF9\\u8C61\\u7684\\u66FF\\u4EE3\\u65B9\\u6848\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E0D\\u8981\\u6269\\u5C55\\u5185\\u7F6E\\u5BF9\\u8C61\\uFF0C\\u800C\\u662F\\u6267\\u884C\\u4EE5\\u4E0B\\u64CD\\u4F5C\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u521B\\u5EFA\\u81EA\\u5B9A\\u4E49\\u5B9E\\u7528\\u7A0B\\u5E8F\\u51FD\\u6570\"}),\"\\uFF1A\\u5BF9\\u4E8E\\u7B80\\u5355\\u7684\\u4EFB\\u52A1\\uFF0C\\u521B\\u5EFA\\u7279\\u5B9A\\u4E8E\\u60A8\\u9700\\u6C42\\u7684\\u5C0F\\u578B\\u5B9E\\u7528\\u7A0B\\u5E8F\\u51FD\\u6570\\u53EF\\u4EE5\\u6210\\u4E3A\\u66F4\\u6E05\\u6670\\u3001\\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u7684\\u89E3\\u51B3\\u65B9\\u6848\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F7F\\u7528\\u5E93\\u548C\\u6846\\u67B6\"}),\"\\uFF1A\\u8BB8\\u591A\\u5E93\\u548C\\u6846\\u67B6\\u90FD\\u63D0\\u4F9B\\u81EA\\u5DF1\\u7684\\u8F85\\u52A9\\u65B9\\u6CD5\\u548C\\u6269\\u5C55\\uFF0C\\u4ECE\\u800C\\u65E0\\u9700\\u76F4\\u63A5\\u4FEE\\u6539\\u5185\\u7F6E\\u5BF9\\u8C61\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F5C\\u4E3A\\u6709\\u6548\\u539F\\u56E0\\u7684 Polyfilling\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u6269\\u5C55\\u5185\\u7F6E\\u5BF9\\u8C61\\u7684\\u4E00\\u4E2A\\u6709\\u6548\\u539F\\u56E0\\u662F\\u4E3A\\u6700\\u65B0\\u7684 ECMAScript \\u6807\\u51C6\\u548C\\u63D0\\u6848\\u5B9E\\u73B0 polyfill\\u3002\",(0,e.jsx)(n.a,{href:\"https://github.com/zloirock/core-js\",children:(0,e.jsx)(n.code,{children:\"core-js\"})}),\" \\u662F\\u4E00\\u4E2A\\u6D41\\u884C\\u7684\\u5E93\\uFF0C\\u5B58\\u5728\\u4E8E\\u5927\\u591A\\u6570\\u6D41\\u884C\\u7684\\u7F51\\u7AD9\\u4E0A\\u3002\\u5B83\\u4E0D\\u4EC5\\u4F1A polyfill \\u7F3A\\u5931\\u7684\\u529F\\u80FD\\uFF0C\\u8FD8\\u4F1A\\u4FEE\\u590D\\u5404\\u79CD\\u6D4F\\u89C8\\u5668\\u548C\\u8FD0\\u884C\\u65F6\\u4E2D JavaScript \\u529F\\u80FD\\u7684\\u4E0D\\u6B63\\u786E\\u6216\\u4E0D\\u517C\\u5BB9\\u7684\\u5B9E\\u73B0\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`import 'core-js/actual/array/flat-map'; // With this, Array.prototype.flatMap is available to be used.\n\n[1, 2].flatMap((it) => [it, it]); // => [1, 1, 2, 2]\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://lucybain.com/blog/2014/js-extending-built-in-objects/\",children:\"JS: don't extend JS objects\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/extend-natives\",children:\"Extending built-in classes\"})}),`\n`]})]})}function a(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(s,{...r})}):s(r)}return S(b);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.json b/apps/web/src/__generated__/questions/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.json
index 9fd668b90..625ab293a 100644
--- a/apps/web/src/__generated__/questions/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var m=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),y=(o,e)=>{for(var i in e)t(o,i,{get:e[i],enumerable:!0})},s=(o,e,i,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!b.call(o,a)&&a!==i&&t(o,a,{get:()=>e[a],enumerable:!(l=u(e,a))||l.enumerable});return o};var f=(o,e,i)=>(i=o!=null?h(g(o)):{},s(e||!o||!o.__esModule?t(i,\"default\",{value:o,enumerable:!0}):i,o)),v=o=>s(t({},\"__esModule\",{value:!0}),o);var c=m((j,r)=>{r.exports=_jsx_runtime});var I={};y(I,{default:()=>x,frontmatter:()=>w});var n=f(c()),w={title:\"Why is it, in general, a good idea to leave the global JavaScript scope of a website as-is and never touch it?\"};function d(o){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",ul:\"ul\",li:\"li\",strong:\"strong\",hr:\"hr\",pre:\"pre\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript that is executed in the browser has access to the global scope (the \",(0,n.jsx)(e.code,{children:\"window\"}),\" object). In general it's a good software engineering practice to not pollute the global namespace unless you are working on a feature that truly needs to be global \\u2013 it is needed by the entire page. Several reasons to avoid touching the global scope:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Naming conflicts\"}),\": Sharing the global scope across scripts can cause conflicts and bugs when new global variables or changes are introduced.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Cluttered global namespace\"}),\": Keeping the global namespace minimal avoids making the codebase hard to manage and maintain.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Scope leaks\"}),\": Unintentional references to global variables in closures or event handlers can cause memory leaks and performance issues.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Modularity and encapsulation\"}),\": Good design promotes keeping variables and functions within their specific scopes, enhancing organization, reusability, and maintainability.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Security concerns\"}),\": Global variables are accessible by all scripts, including potentially malicious ones, posing security risks, especially if sensitive data is stored there.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Compatibility and portability\"}),\": Heavy reliance on global variables reduces code portability and integration ease with other libraries or frameworks.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Follow these best practices to avoid global scope pollution:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Use local variables\"}),\": Declare variables within functions or blocks using \",(0,n.jsx)(e.code,{children:\"var\"}),\", \",(0,n.jsx)(e.code,{children:\"let\"}),\", or \",(0,n.jsx)(e.code,{children:\"const\"}),\" to limit their scope.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Pass variables as function parameters\"}),\": Maintain encapsulation by passing variables as parameters instead of accessing them globally.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Use immediately invoked function expressions (IIFE)\"}),\": Create new scopes with IIFEs to prevent adding variables to the global scope.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Use modules\"}),\": Encapsulate code with module systems to maintain separate scopes and manageability.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is the global scope?\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In the browser, the global scope is the top-level context where variables, functions, and objects are accessible from anywhere in the code. The global scope is represented by the \",(0,n.jsx)(e.code,{children:\"window\"}),\" object. Any variables or functions declared outside of any function or block (that is not within any module) are added to the \",(0,n.jsx)(e.code,{children:\"window\"}),\" object and can be accessed globally.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"For example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Assuming this is run in the global scope and not within a module.\nvar globalVariable = 'I am global';\nfunction globalFunction() {\n  console.log('I am a global function');\n}\n\nconsole.log(window.globalVariable); // 'I am global'\nwindow.globalFunction(); // 'I am a global function'\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"globalVariable\"}),\" and \",(0,n.jsx)(e.code,{children:\"globalFunction\"}),\" are added to the \",(0,n.jsx)(e.code,{children:\"window\"}),\" object and can be accessed from anywhere in the global context.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Pitfalls of global scope\"}),`\n`,(0,n.jsx)(e.p,{children:\"In general, it's a good software engineering practice to not pollute the global namespace unless you are working on a feature that truly needs to be global \\u2013 it is needed by the entire page. There are many reasons to avoid touching the global scope:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Naming conflicts\"}),\": The global scope is shared across all scripts on a web page. If you introduce new global variables or modify existing ones, you risk causing naming conflicts with other scripts or libraries used on the same page. This can lead to unexpected behavior and difficult-to-debug issues.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Cluttered global namespace\"}),\": The global namespace should be kept as clean and minimal as possible. Adding unnecessary global variables or functions can clutter the namespace and make it harder to manage and maintain the codebase over time.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Scope leaks\"}),\": When working with closures or event handlers, it's easy to accidentally create unintended references to global variables, leading to memory leaks and performance issues. By avoiding global variables altogether, you can prevent these types of scope leaks.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Modularity and encapsulation\"}),\": One of the principles of good software design is modularity and encapsulation. By keeping variables and functions within their respective scopes (e.g., module, function, or block scope), you promote better code organization, reusability, and maintainability.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Security concerns\"}),\": Global variables can be accessed and modified by any script running on the page, including potentially malicious scripts. It is quite common for websites to load third-party scripts and in the event someone's network is compromised, it can pose security risks, especially if sensitive data is stored in global variables. However, in the first place you should not expose any sensitive data on the client.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Compatibility and portability\"}),\": By relying heavily on global variables, your code becomes less portable and more dependent on the specific environment it was written for. This can make it harder to integrate with other libraries or frameworks, or to run the code in different environments (e.g., server-side vs browser).\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's an example of global scope being used.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Assuming this is run in the global scope, not within a module.\nlet count = 0;\n\nfunction incrementCount() {\n  count++;\n  console.log(count);\n}\n\nfunction decrementCount() {\n  count--;\n  console.log(count);\n}\n\nincrementCount(); // Output: 1\ndecrementCount(); // Output: 0\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"count\"}),\", \",(0,n.jsx)(e.code,{children:\"incrementCount\"}),\", and \",(0,n.jsx)(e.code,{children:\"decrementCount\"}),\" are defined on the global scope. Any script on the page can access and modify the \",(0,n.jsx)(e.code,{children:\"count\"}),\", as well as all variables on \",(0,n.jsx)(e.code,{children:\"window\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Avoiding global scope pollution\"}),`\n`,(0,n.jsx)(e.p,{children:\"By now we hope that you're convinced that it's not a good idea to define variables on the global scope. To avoid polluting the global scope, it is recommended to follow best practices such as:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Use local variables\"}),\": Declare variables within functions or blocks to limit their scope and prevent them from being accessed globally. Use \",(0,n.jsx)(e.code,{children:\"var\"}),\", \",(0,n.jsx)(e.code,{children:\"let\"}),\", or \",(0,n.jsx)(e.code,{children:\"const\"}),\" to declare variables within a specific scope, ensuring they are not accidentally made global.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Pass variables as function parameters:\"}),\": Instead of accessing variables directly from the outer scope, pass them as parameters to functions to maintain encapsulation and avoid global scope pollution.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Use modules\"}),\": Utilize module systems to encapsulate your code and prevent global scope pollution. Each module has its own scope, making it easier to manage and maintain your code.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Use immediately invoked function expressions (IIFE)\"}),\": If modules are not available, wrap your code in an IIFE to create a new scope, preventing variables from being added to the global scope unless you explicitly expose them.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Assuming this is run in the global scope, not within a module.\n(function () {\n  let count = 0;\n\n  window.incrementCount = function () {\n    count++;\n    console.log(count);\n  };\n\n  window.decrementCount = function () {\n    count--;\n    console.log(count);\n  };\n})();\n\nincrementCount(); // Output: 1\ndecrementCount(); // Output: 0\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"count\"}),\" is not accessible in the global scope. It can only be accessed and modified by the \",(0,n.jsx)(e.code,{children:\"incrementCount\"}),\" and \",(0,n.jsx)(e.code,{children:\"decrementCount\"}),\" functions. These functions are exposed to the global scope by attaching them to the \",(0,n.jsx)(e.code,{children:\"window\"}),\" object, but they still have access to the \",(0,n.jsx)(e.code,{children:\"count\"}),\" variable in their parent scope. This provides a way to encapsulate the underlying data and only expose the necessary operations \\u2013 no direct manipulation of the value is allowed.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\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/Web/JavaScript/Guide/Modules\",children:\"JavaScript modules - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/modules-intro\",children:\"Modules, introduction\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://lucybain.com/blog/2014/js-dont-touch-global-scope/\",children:\"JS: don't touch the global scope\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://exploringjs.com/es5/ch16.html\",children:\"Variables: Scopes, Environments, and Closures\"})}),`\n`]})]})}function k(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(d,o)})):d(o)}var x=k;return v(I);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var y=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),f=(o,e)=>{for(var i in e)t(o,i,{get:e[i],enumerable:!0})},s=(o,e,i,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of g(e))!m.call(o,a)&&a!==i&&t(o,a,{get:()=>e[a],enumerable:!(l=p(e,a))||l.enumerable});return o};var v=(o,e,i)=>(i=o!=null?u(b(o)):{},s(e||!o||!o.__esModule?t(i,\"default\",{value:o,enumerable:!0}):i,o)),w=o=>s(t({},\"__esModule\",{value:!0}),o);var c=y((C,r)=>{r.exports=_jsx_runtime});var x={};f(x,{default:()=>h,frontmatter:()=>k});var n=v(c()),k={title:\"Why is it, in general, a good idea to leave the global JavaScript scope of a website as-is and never touch it?\"};function d(o){let e={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"JavaScript that is executed in the browser has access to the global scope (the \",(0,n.jsx)(e.code,{children:\"window\"}),\" object). In general it's a good software engineering practice to not pollute the global namespace unless you are working on a feature that truly needs to be global \\u2013 it is needed by the entire page. Several reasons to avoid touching the global scope:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Naming conflicts\"}),\": Sharing the global scope across scripts can cause conflicts and bugs when new global variables or changes are introduced.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Cluttered global namespace\"}),\": Keeping the global namespace minimal avoids making the codebase hard to manage and maintain.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Scope leaks\"}),\": Unintentional references to global variables in closures or event handlers can cause memory leaks and performance issues.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Modularity and encapsulation\"}),\": Good design promotes keeping variables and functions within their specific scopes, enhancing organization, reusability, and maintainability.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Security concerns\"}),\": Global variables are accessible by all scripts, including potentially malicious ones, posing security risks, especially if sensitive data is stored there.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Compatibility and portability\"}),\": Heavy reliance on global variables reduces code portability and integration ease with other libraries or frameworks.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Follow these best practices to avoid global scope pollution:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Use local variables\"}),\": Declare variables within functions or blocks using \",(0,n.jsx)(e.code,{children:\"var\"}),\", \",(0,n.jsx)(e.code,{children:\"let\"}),\", or \",(0,n.jsx)(e.code,{children:\"const\"}),\" to limit their scope.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Pass variables as function parameters\"}),\": Maintain encapsulation by passing variables as parameters instead of accessing them globally.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Use immediately invoked function expressions (IIFE)\"}),\": Create new scopes with IIFEs to prevent adding variables to the global scope.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Use modules\"}),\": Encapsulate code with module systems to maintain separate scopes and manageability.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What is the global scope?\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In the browser, the global scope is the top-level context where variables, functions, and objects are accessible from anywhere in the code. The global scope is represented by the \",(0,n.jsx)(e.code,{children:\"window\"}),\" object. Any variables or functions declared outside of any function or block (that is not within any module) are added to the \",(0,n.jsx)(e.code,{children:\"window\"}),\" object and can be accessed globally.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"For example:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Assuming this is run in the global scope and not within a module.\nvar globalVariable = 'I am global';\nfunction globalFunction() {\n  console.log('I am a global function');\n}\n\nconsole.log(window.globalVariable); // 'I am global'\nwindow.globalFunction(); // 'I am a global function'\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"globalVariable\"}),\" and \",(0,n.jsx)(e.code,{children:\"globalFunction\"}),\" are added to the \",(0,n.jsx)(e.code,{children:\"window\"}),\" object and can be accessed from anywhere in the global context.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Pitfalls of global scope\"}),`\n`,(0,n.jsx)(e.p,{children:\"In general, it's a good software engineering practice to not pollute the global namespace unless you are working on a feature that truly needs to be global \\u2013 it is needed by the entire page. There are many reasons to avoid touching the global scope:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Naming conflicts\"}),\": The global scope is shared across all scripts on a web page. If you introduce new global variables or modify existing ones, you risk causing naming conflicts with other scripts or libraries used on the same page. This can lead to unexpected behavior and difficult-to-debug issues.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Cluttered global namespace\"}),\": The global namespace should be kept as clean and minimal as possible. Adding unnecessary global variables or functions can clutter the namespace and make it harder to manage and maintain the codebase over time.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Scope leaks\"}),\": When working with closures or event handlers, it's easy to accidentally create unintended references to global variables, leading to memory leaks and performance issues. By avoiding global variables altogether, you can prevent these types of scope leaks.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Modularity and encapsulation\"}),\": One of the principles of good software design is modularity and encapsulation. By keeping variables and functions within their respective scopes (e.g., module, function, or block scope), you promote better code organization, reusability, and maintainability.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Security concerns\"}),\": Global variables can be accessed and modified by any script running on the page, including potentially malicious scripts. It is quite common for websites to load third-party scripts and in the event someone's network is compromised, it can pose security risks, especially if sensitive data is stored in global variables. However, in the first place you should not expose any sensitive data on the client.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Compatibility and portability\"}),\": By relying heavily on global variables, your code becomes less portable and more dependent on the specific environment it was written for. This can make it harder to integrate with other libraries or frameworks, or to run the code in different environments (e.g., server-side vs browser).\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's an example of global scope being used.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Assuming this is run in the global scope, not within a module.\nlet count = 0;\n\nfunction incrementCount() {\n  count++;\n  console.log(count);\n}\n\nfunction decrementCount() {\n  count--;\n  console.log(count);\n}\n\nincrementCount(); // Output: 1\ndecrementCount(); // Output: 0\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"count\"}),\", \",(0,n.jsx)(e.code,{children:\"incrementCount\"}),\", and \",(0,n.jsx)(e.code,{children:\"decrementCount\"}),\" are defined on the global scope. Any script on the page can access and modify the \",(0,n.jsx)(e.code,{children:\"count\"}),\", as well as all variables on \",(0,n.jsx)(e.code,{children:\"window\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Avoiding global scope pollution\"}),`\n`,(0,n.jsx)(e.p,{children:\"By now we hope that you're convinced that it's not a good idea to define variables on the global scope. To avoid polluting the global scope, it is recommended to follow best practices such as:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Use local variables\"}),\": Declare variables within functions or blocks to limit their scope and prevent them from being accessed globally. Use \",(0,n.jsx)(e.code,{children:\"var\"}),\", \",(0,n.jsx)(e.code,{children:\"let\"}),\", or \",(0,n.jsx)(e.code,{children:\"const\"}),\" to declare variables within a specific scope, ensuring they are not accidentally made global.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Pass variables as function parameters:\"}),\": Instead of accessing variables directly from the outer scope, pass them as parameters to functions to maintain encapsulation and avoid global scope pollution.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Use modules\"}),\": Utilize module systems to encapsulate your code and prevent global scope pollution. Each module has its own scope, making it easier to manage and maintain your code.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Use immediately invoked function expressions (IIFE)\"}),\": If modules are not available, wrap your code in an IIFE to create a new scope, preventing variables from being added to the global scope unless you explicitly expose them.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// Assuming this is run in the global scope, not within a module.\n(function () {\n  let count = 0;\n\n  window.incrementCount = function () {\n    count++;\n    console.log(count);\n  };\n\n  window.decrementCount = function () {\n    count--;\n    console.log(count);\n  };\n})();\n\nincrementCount(); // Output: 1\ndecrementCount(); // Output: 0\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"count\"}),\" is not accessible in the global scope. It can only be accessed and modified by the \",(0,n.jsx)(e.code,{children:\"incrementCount\"}),\" and \",(0,n.jsx)(e.code,{children:\"decrementCount\"}),\" functions. These functions are exposed to the global scope by attaching them to the \",(0,n.jsx)(e.code,{children:\"window\"}),\" object, but they still have access to the \",(0,n.jsx)(e.code,{children:\"count\"}),\" variable in their parent scope. This provides a way to encapsulate the underlying data and only expose the necessary operations \\u2013 no direct manipulation of the value is allowed.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\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/Web/JavaScript/Guide/Modules\",children:\"JavaScript modules - MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/modules-intro\",children:\"Modules, introduction\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://lucybain.com/blog/2014/js-dont-touch-global-scope/\",children:\"JS: don't touch the global scope\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://exploringjs.com/es5/ch16.html\",children:\"Variables: Scopes, Environments, and Closures\"})}),`\n`]})]})}function h(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(d,{...o})}):d(o)}return w(x);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/pt-BR.json b/apps/web/src/__generated__/questions/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/pt-BR.json
index f3bbd26a4..65c7ff470 100644
--- a/apps/web/src/__generated__/questions/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var n=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var f=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),g=(e,o)=>{for(var a in o)n(e,a,{get:o[a],enumerable:!0})},c=(e,o,a,r)=>{if(o&&typeof o==\"object\"||typeof o==\"function\")for(let t of p(o))!v.call(e,t)&&t!==a&&n(e,t,{get:()=>o[t],enumerable:!(r=d(o,t))||r.enumerable});return e};var b=(e,o,a)=>(a=e!=null?l(x(e)):{},c(o||!e||!e.__esModule?n(a,\"default\",{value:e,enumerable:!0}):a,e)),j=e=>c(n({},\"__esModule\",{value:!0}),e);var m=f((D,i)=>{i.exports=_jsx_runtime});var q={};g(q,{default:()=>h,frontmatter:()=>_});var s=b(m()),_={title:\"Por que, em geral, \\xE9 uma boa ideia deixar o escopo global de um site como est\\xE1 e nunca modific\\xE1-lo?\"};function u(e){let o=Object.assign({p:\"p\"},e.components);return(0,s.jsx)(o.p,{children:\"JavaScript que \\xE9 executado no navegador tem acesso ao escopo global, e se todos usarem o namespace global para definir suas vari\\xE1veis, as colis\\xF5es provavelmente ocorrer\\xE3o. Use o padr\\xE3o do m\\xF3dulo (IIFES) para encapsular suas vari\\xE1veis dentro de um namespace local.\"})}function M(e={}){let{wrapper:o}=e.components||{};return o?(0,s.jsx)(o,Object.assign({},e,{children:(0,s.jsx)(u,e)})):u(e)}var h=M;return j(q);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),_=(e,o)=>{for(var a in o)n(e,a,{get:o[a],enumerable:!0})},c=(e,o,a,s)=>{if(o&&typeof o==\"object\"||typeof o==\"function\")for(let t of x(o))!f.call(e,t)&&t!==a&&n(e,t,{get:()=>o[t],enumerable:!(s=p(o,t))||s.enumerable});return e};var b=(e,o,a)=>(a=e!=null?d(v(e)):{},c(o||!e||!e.__esModule?n(a,\"default\",{value:e,enumerable:!0}):a,e)),j=e=>c(n({},\"__esModule\",{value:!0}),e);var m=g((C,i)=>{i.exports=_jsx_runtime});var h={};_(h,{default:()=>l,frontmatter:()=>M});var r=b(m()),M={title:\"Por que, em geral, \\xE9 uma boa ideia deixar o escopo global de um site como est\\xE1 e nunca modific\\xE1-lo?\"};function u(e){let o={p:\"p\",...e.components};return(0,r.jsx)(o.p,{children:\"JavaScript que \\xE9 executado no navegador tem acesso ao escopo global, e se todos usarem o namespace global para definir suas vari\\xE1veis, as colis\\xF5es provavelmente ocorrer\\xE3o. Use o padr\\xE3o do m\\xF3dulo (IIFES) para encapsular suas vari\\xE1veis dentro de um namespace local.\"})}function l(e={}){let{wrapper:o}=e.components||{};return o?(0,r.jsx)(o,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}return j(h);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/zh-CN.json b/apps/web/src/__generated__/questions/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/zh-CN.json
index 35cb317c5..245bfb333 100644
--- a/apps/web/src/__generated__/questions/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var w=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),b=(c,n)=>{for(var l in n)r(c,l,{get:n[l],enumerable:!0})},d=(c,n,l,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of g(n))!m.call(c,i)&&i!==l&&r(c,i,{get:()=>n[i],enumerable:!(o=a(n,i))||o.enumerable});return c};var f=(c,n,l)=>(l=c!=null?u(p(c)):{},d(n||!c||!c.__esModule?r(l,\"default\",{value:c,enumerable:!0}):l,c)),C=c=>d(r({},\"__esModule\",{value:!0}),c);var h=w((S,t)=>{t.exports=_jsx_runtime});var F={};b(F,{default:()=>x,frontmatter:()=>j});var e=f(h()),j={title:\"\\u4E3A\\u4EC0\\u4E48\\u4E00\\u822C\\u6765\\u8BF4\\uFF0C\\u6700\\u597D\\u4FDD\\u6301\\u7F51\\u7AD9\\u7684\\u5168\\u5C40 JavaScript \\u4F5C\\u7528\\u57DF\\u4E0D\\u53D8\\uFF0C\\u5E76\\u4E14\\u6C38\\u8FDC\\u4E0D\\u8981\\u89E6\\u53CA\\u5B83\\uFF1F\"};function s(c){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",ul:\"ul\",li:\"li\",strong:\"strong\",hr:\"hr\",pre:\"pre\",a:\"a\"},c.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u6267\\u884C\\u7684 JavaScript \\u53EF\\u4EE5\\u8BBF\\u95EE\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\uFF08\",(0,e.jsx)(n.code,{children:\"window\"}),\" \\u5BF9\\u8C61\\uFF09\\u3002\\u4E00\\u822C\\u6765\\u8BF4\\uFF0C\\u4E0D\\u6C61\\u67D3\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u662F\\u4E00\\u4E2A\\u5F88\\u597D\\u7684\\u8F6F\\u4EF6\\u5DE5\\u7A0B\\u5B9E\\u8DF5\\uFF0C\\u9664\\u975E\\u4F60\\u6B63\\u5728\\u5904\\u7406\\u4E00\\u4E2A\\u771F\\u6B63\\u9700\\u8981\\u5168\\u5C40\\u7684\\u7279\\u6027\\u2014\\u2014\\u6574\\u4E2A\\u9875\\u9762\\u90FD\\u9700\\u8981\\u5B83\\u3002\\u907F\\u514D\\u89E6\\u53CA\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u7684\\u51E0\\u4E2A\\u539F\\u56E0\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u547D\\u540D\\u51B2\\u7A81\"}),\"\\uFF1A\\u5728\\u811A\\u672C\\u4E4B\\u95F4\\u5171\\u4EAB\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u53EF\\u80FD\\u5BFC\\u81F4\\u51B2\\u7A81\\u548C\\u9519\\u8BEF\\uFF0C\\u5F53\\u5F15\\u5165\\u65B0\\u7684\\u5168\\u5C40\\u53D8\\u91CF\\u6216\\u8FDB\\u884C\\u66F4\\u6539\\u65F6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u6DF7\\u4E71\"}),\"\\uFF1A\\u4FDD\\u6301\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u6700\\u5C0F\\u5316\\u53EF\\u4EE5\\u907F\\u514D\\u4F7F\\u4EE3\\u7801\\u5E93\\u96BE\\u4EE5\\u7BA1\\u7406\\u548C\\u7EF4\\u62A4\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F5C\\u7528\\u57DF\\u6CC4\\u6F0F\"}),\"\\uFF1A\\u5728\\u95ED\\u5305\\u6216\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D\\u65E0\\u610F\\u4E2D\\u5F15\\u7528\\u5168\\u5C40\\u53D8\\u91CF\\u53EF\\u80FD\\u5BFC\\u81F4\\u5185\\u5B58\\u6CC4\\u6F0F\\u548C\\u6027\\u80FD\\u95EE\\u9898\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6A21\\u5757\\u5316\\u548C\\u5C01\\u88C5\"}),\"\\uFF1A\\u826F\\u597D\\u7684\\u8BBE\\u8BA1\\u4FC3\\u8FDB\\u5C06\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u4FDD\\u6301\\u5728\\u5176\\u7279\\u5B9A\\u4F5C\\u7528\\u57DF\\u5185\\uFF0C\\u4ECE\\u800C\\u589E\\u5F3A\\u7EC4\\u7EC7\\u6027\\u3001\\u53EF\\u91CD\\u7528\\u6027\\u548C\\u53EF\\u7EF4\\u62A4\\u6027\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B89\\u5168\\u95EE\\u9898\"}),\"\\uFF1A\\u5168\\u5C40\\u53D8\\u91CF\\u53EF\\u88AB\\u6240\\u6709\\u811A\\u672C\\u8BBF\\u95EE\\uFF0C\\u5305\\u62EC\\u6F5C\\u5728\\u7684\\u6076\\u610F\\u811A\\u672C\\uFF0C\\u8FD9\\u4F1A\\u5E26\\u6765\\u5B89\\u5168\\u98CE\\u9669\\uFF0C\\u7279\\u522B\\u662F\\u5982\\u679C\\u654F\\u611F\\u6570\\u636E\\u5B58\\u50A8\\u5728\\u5176\\u4E2D\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u517C\\u5BB9\\u6027\\u548C\\u53EF\\u79FB\\u690D\\u6027\"}),\"\\uFF1A\\u8FC7\\u5EA6\\u4F9D\\u8D56\\u5168\\u5C40\\u53D8\\u91CF\\u4F1A\\u964D\\u4F4E\\u4EE3\\u7801\\u7684\\u53EF\\u79FB\\u690D\\u6027\\uFF0C\\u5E76\\u964D\\u4F4E\\u4E0E\\u5176\\u4ED6\\u5E93\\u6216\\u6846\\u67B6\\u7684\\u96C6\\u6210\\u96BE\\u5EA6\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9075\\u5FAA\\u8FD9\\u4E9B\\u6700\\u4F73\\u5B9E\\u8DF5\\u4EE5\\u907F\\u514D\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u6C61\\u67D3\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F7F\\u7528\\u5C40\\u90E8\\u53D8\\u91CF\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"var\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"let\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"const\"}),\" \\u5728\\u51FD\\u6570\\u6216\\u4EE3\\u7801\\u5757\\u5185\\u58F0\\u660E\\u53D8\\u91CF\\u4EE5\\u9650\\u5236\\u5176\\u4F5C\\u7528\\u57DF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C06\\u53D8\\u91CF\\u4F5C\\u4E3A\\u51FD\\u6570\\u53C2\\u6570\\u4F20\\u9012\"}),\"\\uFF1A\\u901A\\u8FC7\\u5C06\\u53D8\\u91CF\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u800C\\u4E0D\\u662F\\u5168\\u5C40\\u8BBF\\u95EE\\u5B83\\u4EEC\\u6765\\u4FDD\\u6301\\u5C01\\u88C5\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F7F\\u7528\\u7ACB\\u5373\\u8C03\\u7528\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\uFF08IIFE\\uFF09\"}),\"\\uFF1A\\u4F7F\\u7528 IIFE \\u521B\\u5EFA\\u65B0\\u4F5C\\u7528\\u57DF\\u4EE5\\u9632\\u6B62\\u5C06\\u53D8\\u91CF\\u6DFB\\u52A0\\u5230\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F7F\\u7528\\u6A21\\u5757\"}),\"\\uFF1A\\u4F7F\\u7528\\u6A21\\u5757\\u7CFB\\u7EDF\\u5C01\\u88C5\\u4EE3\\u7801\\u4EE5\\u4FDD\\u6301\\u72EC\\u7ACB\\u7684\\u4F5C\\u7528\\u57DF\\u548C\\u53EF\\u7BA1\\u7406\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\uFF1F\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\uFF0C\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u662F\\u9876\\u7EA7\\u4E0A\\u4E0B\\u6587\\uFF0C\\u53D8\\u91CF\\u3001\\u51FD\\u6570\\u548C\\u5BF9\\u8C61\\u53EF\\u4EE5\\u4ECE\\u4EE3\\u7801\\u4E2D\\u7684\\u4EFB\\u4F55\\u4F4D\\u7F6E\\u8BBF\\u95EE\\u3002\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u7531 \",(0,e.jsx)(n.code,{children:\"window\"}),\" \\u5BF9\\u8C61\\u8868\\u793A\\u3002\\u5728\\u4EFB\\u4F55\\u51FD\\u6570\\u6216\\u4EE3\\u7801\\u5757\\uFF08\\u5373\\u4E0D\\u5728\\u4EFB\\u4F55\\u6A21\\u5757\\u5185\\uFF09\\u4E4B\\u5916\\u58F0\\u660E\\u7684\\u4EFB\\u4F55\\u53D8\\u91CF\\u6216\\u51FD\\u6570\\u90FD\\u4F1A\\u6DFB\\u52A0\\u5230 \",(0,e.jsx)(n.code,{children:\"window\"}),\" \\u5BF9\\u8C61\\u4E2D\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u5728\\u5168\\u5C40\\u8303\\u56F4\\u5185\\u8BBF\\u95EE\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u5047\\u8BBE\\u8FD9\\u5728\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u4E2D\\u8FD0\\u884C\\uFF0C\\u800C\\u4E0D\\u662F\\u5728\\u6A21\\u5757\\u4E2D\\u3002\nvar globalVariable = '\\u6211\\u662F\\u5168\\u5C40\\u53D8\\u91CF';\nfunction globalFunction() {\n  console.log('\\u6211\\u662F\\u4E00\\u4E2A\\u5168\\u5C40\\u51FD\\u6570');\n}\n\nconsole.log(window.globalVariable); // '\\u6211\\u662F\\u5168\\u5C40\\u53D8\\u91CF'\nwindow.globalFunction(); // '\\u6211\\u662F\\u4E00\\u4E2A\\u5168\\u5C40\\u51FD\\u6570'\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"globalVariable\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"globalFunction\"}),\" \\u88AB\\u6DFB\\u52A0\\u5230 \",(0,e.jsx)(n.code,{children:\"window\"}),\" \\u5BF9\\u8C61\\u4E2D\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u4ECE\\u5168\\u5C40\\u4E0A\\u4E0B\\u6587\\u4E2D\\u7684\\u4EFB\\u4F55\\u4F4D\\u7F6E\\u8BBF\\u95EE\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u7684\\u9677\\u9631\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E00\\u822C\\u6765\\u8BF4\\uFF0C\\u4E0D\\u6C61\\u67D3\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u662F\\u4E00\\u4E2A\\u5F88\\u597D\\u7684\\u8F6F\\u4EF6\\u5DE5\\u7A0B\\u5B9E\\u8DF5\\uFF0C\\u9664\\u975E\\u4F60\\u6B63\\u5728\\u5904\\u7406\\u4E00\\u4E2A\\u771F\\u6B63\\u9700\\u8981\\u5168\\u5C40\\u7684\\u7279\\u6027\\u2014\\u2014\\u6574\\u4E2A\\u9875\\u9762\\u90FD\\u9700\\u8981\\u5B83\\u3002\\u6709\\u5F88\\u591A\\u539F\\u56E0\\u53EF\\u4EE5\\u907F\\u514D\\u89E6\\u53CA\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u547D\\u540D\\u51B2\\u7A81\"}),\"\\uFF1A\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u5728\\u7F51\\u9875\\u4E0A\\u7684\\u6240\\u6709\\u811A\\u672C\\u4E4B\\u95F4\\u5171\\u4EAB\\u3002\\u5982\\u679C\\u4F60\\u5F15\\u5165\\u65B0\\u7684\\u5168\\u5C40\\u53D8\\u91CF\\u6216\\u4FEE\\u6539\\u73B0\\u6709\\u7684\\u5168\\u5C40\\u53D8\\u91CF\\uFF0C\\u4F60\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u4E0E\\u5728\\u540C\\u4E00\\u9875\\u9762\\u4E0A\\u4F7F\\u7528\\u7684\\u5176\\u4ED6\\u811A\\u672C\\u6216\\u5E93\\u53D1\\u751F\\u547D\\u540D\\u51B2\\u7A81\\u3002\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u610F\\u5916\\u884C\\u4E3A\\u548C\\u96BE\\u4EE5\\u8C03\\u8BD5\\u7684\\u95EE\\u9898\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u6DF7\\u4E71\"}),\"\\uFF1A\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u5E94\\u4FDD\\u6301\\u5C3D\\u53EF\\u80FD\\u5E72\\u51C0\\u548C\\u6700\\u5C0F\\u3002\\u6DFB\\u52A0\\u4E0D\\u5FC5\\u8981\\u7684\\u5168\\u5C40\\u53D8\\u91CF\\u6216\\u51FD\\u6570\\u4F1A\\u4F7F\\u547D\\u540D\\u7A7A\\u95F4\\u6DF7\\u4E71\\uFF0C\\u5E76\\u4F7F\\u4EE3\\u7801\\u5E93\\u968F\\u7740\\u65F6\\u95F4\\u7684\\u63A8\\u79FB\\u66F4\\u96BE\\u4E8E\\u7BA1\\u7406\\u548C\\u7EF4\\u62A4\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F5C\\u7528\\u57DF\\u6CC4\\u6F0F\"}),\"\\uFF1A\\u5728\\u4F7F\\u7528\\u95ED\\u5305\\u6216\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u65F6\\uFF0C\\u5F88\\u5BB9\\u6613\\u610F\\u5916\\u5730\\u521B\\u5EFA\\u5BF9\\u5168\\u5C40\\u53D8\\u91CF\\u7684\\u65E0\\u610F\\u5F15\\u7528\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u5185\\u5B58\\u6CC4\\u6F0F\\u548C\\u6027\\u80FD\\u95EE\\u9898\\u3002\\u901A\\u8FC7\\u5B8C\\u5168\\u907F\\u514D\\u5168\\u5C40\\u53D8\\u91CF\\uFF0C\\u4F60\\u53EF\\u4EE5\\u9632\\u6B62\\u8FD9\\u4E9B\\u7C7B\\u578B\\u7684\\u4F5C\\u7528\\u57DF\\u6CC4\\u6F0F\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6A21\\u5757\\u5316\\u548C\\u5C01\\u88C5\"}),\"\\uFF1A\\u826F\\u597D\\u8F6F\\u4EF6\\u8BBE\\u8BA1\\u539F\\u5219\\u4E4B\\u4E00\\u662F\\u6A21\\u5757\\u5316\\u548C\\u5C01\\u88C5\\u3002\\u901A\\u8FC7\\u5C06\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u4FDD\\u7559\\u5728\\u5176\\u5404\\u81EA\\u7684\\u4F5C\\u7528\\u57DF\\u5185\\uFF08\\u4F8B\\u5982\\uFF0C\\u6A21\\u5757\\u3001\\u51FD\\u6570\\u6216\\u5757\\u4F5C\\u7528\\u57DF\\uFF09\\uFF0C\\u4F60\\u53EF\\u4EE5\\u4FC3\\u8FDB\\u66F4\\u597D\\u7684\\u4EE3\\u7801\\u7EC4\\u7EC7\\u3001\\u53EF\\u91CD\\u7528\\u6027\\u548C\\u53EF\\u7EF4\\u62A4\\u6027\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B89\\u5168\\u95EE\\u9898\"}),\"\\uFF1A\\u5168\\u5C40\\u53D8\\u91CF\\u53EF\\u4EE5\\u88AB\\u9875\\u9762\\u4E0A\\u8FD0\\u884C\\u7684\\u4EFB\\u4F55\\u811A\\u672C\\u8BBF\\u95EE\\u548C\\u4FEE\\u6539\\uFF0C\\u5305\\u62EC\\u6F5C\\u5728\\u7684\\u6076\\u610F\\u811A\\u672C\\u3002\\u7F51\\u7AD9\\u52A0\\u8F7D\\u7B2C\\u4E09\\u65B9\\u811A\\u672C\\u662F\\u5F88\\u5E38\\u89C1\\u7684\\uFF0C\\u5982\\u679C\\u6709\\u4EBA\\u7F51\\u7EDC\\u88AB\\u5165\\u4FB5\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u5E26\\u6765\\u5B89\\u5168\\u98CE\\u9669\\uFF0C\\u7279\\u522B\\u662F\\u5982\\u679C\\u654F\\u611F\\u6570\\u636E\\u5B58\\u50A8\\u5728\\u5168\\u5C40\\u53D8\\u91CF\\u4E2D\\u3002\\u4F46\\u662F\\uFF0C\\u9996\\u5148\\u4F60\\u4E0D\\u5E94\\u8BE5\\u5728\\u5BA2\\u6237\\u7AEF\\u4E0A\\u66B4\\u9732\\u4EFB\\u4F55\\u654F\\u611F\\u6570\\u636E\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u517C\\u5BB9\\u6027\\u548C\\u53EF\\u79FB\\u690D\\u6027\"}),\"\\uFF1A\\u901A\\u8FC7\\u4E25\\u91CD\\u4F9D\\u8D56\\u5168\\u5C40\\u53D8\\u91CF\\uFF0C\\u4F60\\u7684\\u4EE3\\u7801\\u53D8\\u5F97\\u4E0D\\u592A\\u53EF\\u79FB\\u690D\\uFF0C\\u5E76\\u4E14\\u66F4\\u4F9D\\u8D56\\u4E8E\\u7F16\\u5199\\u5B83\\u7684\\u7279\\u5B9A\\u73AF\\u5883\\u3002\\u8FD9\\u53EF\\u80FD\\u4F1A\\u4F7F\\u5B83\\u66F4\\u96BE\\u4EE5\\u4E0E\\u5176\\u4ED6\\u5E93\\u6216\\u6846\\u67B6\\u96C6\\u6210\\uFF0C\\u6216\\u8005\\u5728\\u4E0D\\u540C\\u7684\\u73AF\\u5883\\u4E2D\\u8FD0\\u884C\\u4EE3\\u7801\\uFF08\\u4F8B\\u5982\\uFF0C\\u670D\\u52A1\\u5668\\u7AEF\\u4E0E\\u6D4F\\u89C8\\u5668\\uFF09\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u4F7F\\u7528\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u7684\\u4F8B\\u5B50\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u5047\\u8BBE\\u8FD9\\u5728\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u4E2D\\u8FD0\\u884C\\uFF0C\\u800C\\u4E0D\\u662F\\u5728\\u6A21\\u5757\\u4E2D\\u3002\nlet count = 0;\n\nfunction incrementCount() {\n  count++;\n  console.log(count);\n}\n\nfunction decrementCount() {\n  count--;\n  console.log(count);\n}\n\nincrementCount(); // \\u8F93\\u51FA\\uFF1A1\ndecrementCount(); // \\u8F93\\u51FA\\uFF1A0\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"count\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"incrementCount\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"decrementCount\"}),\" \\u5728\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u4E2D\\u5B9A\\u4E49\\u3002\\u9875\\u9762\\u4E0A\\u7684\\u4EFB\\u4F55\\u811A\\u672C\\u90FD\\u53EF\\u4EE5\\u8BBF\\u95EE\\u548C\\u4FEE\\u6539 \",(0,e.jsx)(n.code,{children:\"count\"}),\"\\uFF0C\\u4EE5\\u53CA \",(0,e.jsx)(n.code,{children:\"window\"}),\" \\u4E0A\\u7684\\u6240\\u6709\\u53D8\\u91CF\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u907F\\u514D\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u6C61\\u67D3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5230\\u76EE\\u524D\\u4E3A\\u6B62\\uFF0C\\u6211\\u4EEC\\u5E0C\\u671B\\u60A8\\u76F8\\u4FE1\\u5728\\u5168\\u5C40\\u8303\\u56F4\\u5185\\u5B9A\\u4E49\\u53D8\\u91CF\\u4E0D\\u662F\\u4E00\\u4E2A\\u597D\\u4E3B\\u610F\\u3002\\u4E3A\\u4E86\\u907F\\u514D\\u6C61\\u67D3\\u5168\\u5C40\\u8303\\u56F4\\uFF0C\\u5EFA\\u8BAE\\u9075\\u5FAA\\u6700\\u4F73\\u5B9E\\u8DF5\\uFF0C\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F7F\\u7528\\u5C40\\u90E8\\u53D8\\u91CF\"}),\"\\uFF1A\\u5728\\u51FD\\u6570\\u6216\\u4EE3\\u7801\\u5757\\u5185\\u58F0\\u660E\\u53D8\\u91CF\\uFF0C\\u4EE5\\u9650\\u5236\\u5176\\u4F5C\\u7528\\u57DF\\uFF0C\\u9632\\u6B62\\u5B83\\u4EEC\\u88AB\\u5168\\u5C40\\u8BBF\\u95EE\\u3002\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"var\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"let\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"const\"}),\" \\u5728\\u7279\\u5B9A\\u4F5C\\u7528\\u57DF\\u5185\\u58F0\\u660E\\u53D8\\u91CF\\uFF0C\\u786E\\u4FDD\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u88AB\\u610F\\u5916\\u5730\\u8BBE\\u7F6E\\u4E3A\\u5168\\u5C40\\u53D8\\u91CF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C06\\u53D8\\u91CF\\u4F5C\\u4E3A\\u51FD\\u6570\\u53C2\\u6570\\u4F20\\u9012\"}),\"\\uFF1A\\u4E0D\\u8981\\u76F4\\u63A5\\u4ECE\\u5916\\u90E8\\u4F5C\\u7528\\u57DF\\u8BBF\\u95EE\\u53D8\\u91CF\\uFF0C\\u800C\\u662F\\u5C06\\u5B83\\u4EEC\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u51FD\\u6570\\uFF0C\\u4EE5\\u4FDD\\u6301\\u5C01\\u88C5\\u5E76\\u907F\\u514D\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u6C61\\u67D3\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F7F\\u7528\\u6A21\\u5757\"}),\"\\uFF1A\\u5229\\u7528\\u6A21\\u5757\\u7CFB\\u7EDF\\u6765\\u5C01\\u88C5\\u4F60\\u7684\\u4EE3\\u7801\\uFF0C\\u9632\\u6B62\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u6C61\\u67D3\\u3002\\u6BCF\\u4E2A\\u6A21\\u5757\\u90FD\\u6709\\u81EA\\u5DF1\\u7684\\u4F5C\\u7528\\u57DF\\uFF0C\\u8FD9\\u4F7F\\u5F97\\u7BA1\\u7406\\u548C\\u7EF4\\u62A4\\u4F60\\u7684\\u4EE3\\u7801\\u66F4\\u5BB9\\u6613\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F7F\\u7528\\u7ACB\\u5373\\u8C03\\u7528\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\uFF08IIFE\\uFF09\"}),\"\\uFF1A\\u5982\\u679C\\u6A21\\u5757\\u4E0D\\u53EF\\u7528\\uFF0C\\u5C06\\u4F60\\u7684\\u4EE3\\u7801\\u5305\\u88C5\\u5728 IIFE \\u4E2D\\u4EE5\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u4F5C\\u7528\\u57DF\\uFF0C\\u9632\\u6B62\\u53D8\\u91CF\\u88AB\\u6DFB\\u52A0\\u5230\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\uFF0C\\u9664\\u975E\\u4F60\\u660E\\u786E\\u5730\\u66B4\\u9732\\u5B83\\u4EEC\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Assuming this is run in the global scope, not within a module.\n(function () {\n  let count = 0;\n\n  window.incrementCount = function () {\n    count++;\n    console.log(count);\n  };\n\n  window.decrementCount = function () {\n    count--;\n    console.log(count);\n  };\n})();\n\nincrementCount(); // Output: 1\ndecrementCount(); // Output: 0\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"count\"}),\"\\u5728\\u5168\\u5C40\\u8303\\u56F4\\u5185\\u662F\\u4E0D\\u53EF\\u8BBF\\u95EE\\u7684\\u3002\\u5B83\\u53EA\\u80FD\\u901A\\u8FC7\",(0,e.jsx)(n.code,{children:\"incrementCount\"}),\"\\u548C\",(0,e.jsx)(n.code,{children:\"decrementCount\"}),\"\\u51FD\\u6570\\u8BBF\\u95EE\\u548C\\u4FEE\\u6539\\u3002\\u8FD9\\u4E9B\\u51FD\\u6570\\u901A\\u8FC7\\u5C06\\u5B83\\u4EEC\\u9644\\u52A0\\u5230\",(0,e.jsx)(n.code,{children:\"window\"}),\"\\u5BF9\\u8C61\\u6765\\u66B4\\u9732\\u7ED9\\u5168\\u5C40\\u8303\\u56F4\\uFF0C\\u4F46\\u5B83\\u4EEC\\u4ECD\\u7136\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5176\\u7236\\u8303\\u56F4\\u4E2D\\u7684\",(0,e.jsx)(n.code,{children:\"count\"}),\"\\u53D8\\u91CF\\u3002\\u8FD9\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u5C01\\u88C5\\u5E95\\u5C42\\u6570\\u636E\\u5E76\\u4EC5\\u516C\\u5F00\\u5FC5\\u8981\\u64CD\\u4F5C\\u7684\\u65B9\\u6CD5\\u2014\\u2014\\u4E0D\\u5141\\u8BB8\\u76F4\\u63A5\\u64CD\\u4F5C\\u8BE5\\u503C\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules\",children:\"JavaScript modules - MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/modules-intro\",children:\"Modules, introduction\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://lucybain.com/blog/2014/js-dont-touch-global-scope/\",children:\"JS: don't touch the global scope\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://exploringjs.com/es5/ch16.html\",children:\"Variables: Scopes, Environments, and Closures\"})}),`\n`]})]})}function v(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,Object.assign({},c,{children:(0,e.jsx)(s,c)})):s(c)}var x=v;return C(F);})();\n;return Component;"
+  "solution": "var Component=(()=>{var a=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var b=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),f=(c,n)=>{for(var l in n)i(c,l,{get:n[l],enumerable:!0})},d=(c,n,l,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of p(n))!w.call(c,r)&&r!==l&&i(c,r,{get:()=>n[r],enumerable:!(o=g(n,r))||o.enumerable});return c};var C=(c,n,l)=>(l=c!=null?a(m(c)):{},d(n||!c||!c.__esModule?i(l,\"default\",{value:c,enumerable:!0}):l,c)),v=c=>d(i({},\"__esModule\",{value:!0}),c);var h=b((I,t)=>{t.exports=_jsx_runtime});var x={};f(x,{default:()=>u,frontmatter:()=>j});var e=C(h()),j={title:\"\\u4E3A\\u4EC0\\u4E48\\u4E00\\u822C\\u6765\\u8BF4\\uFF0C\\u6700\\u597D\\u4FDD\\u6301\\u7F51\\u7AD9\\u7684\\u5168\\u5C40 JavaScript \\u4F5C\\u7528\\u57DF\\u4E0D\\u53D8\\uFF0C\\u5E76\\u4E14\\u6C38\\u8FDC\\u4E0D\\u8981\\u89E6\\u53CA\\u5B83\\uFF1F\"};function s(c){let n={a:\"a\",code:\"code\",h2:\"h2\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...c.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"\\u603B\\u7ED3\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u6267\\u884C\\u7684 JavaScript \\u53EF\\u4EE5\\u8BBF\\u95EE\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\uFF08\",(0,e.jsx)(n.code,{children:\"window\"}),\" \\u5BF9\\u8C61\\uFF09\\u3002\\u4E00\\u822C\\u6765\\u8BF4\\uFF0C\\u4E0D\\u6C61\\u67D3\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u662F\\u4E00\\u4E2A\\u5F88\\u597D\\u7684\\u8F6F\\u4EF6\\u5DE5\\u7A0B\\u5B9E\\u8DF5\\uFF0C\\u9664\\u975E\\u4F60\\u6B63\\u5728\\u5904\\u7406\\u4E00\\u4E2A\\u771F\\u6B63\\u9700\\u8981\\u5168\\u5C40\\u7684\\u7279\\u6027\\u2014\\u2014\\u6574\\u4E2A\\u9875\\u9762\\u90FD\\u9700\\u8981\\u5B83\\u3002\\u907F\\u514D\\u89E6\\u53CA\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u7684\\u51E0\\u4E2A\\u539F\\u56E0\\uFF1A\"]}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u547D\\u540D\\u51B2\\u7A81\"}),\"\\uFF1A\\u5728\\u811A\\u672C\\u4E4B\\u95F4\\u5171\\u4EAB\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u53EF\\u80FD\\u5BFC\\u81F4\\u51B2\\u7A81\\u548C\\u9519\\u8BEF\\uFF0C\\u5F53\\u5F15\\u5165\\u65B0\\u7684\\u5168\\u5C40\\u53D8\\u91CF\\u6216\\u8FDB\\u884C\\u66F4\\u6539\\u65F6\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u6DF7\\u4E71\"}),\"\\uFF1A\\u4FDD\\u6301\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u6700\\u5C0F\\u5316\\u53EF\\u4EE5\\u907F\\u514D\\u4F7F\\u4EE3\\u7801\\u5E93\\u96BE\\u4EE5\\u7BA1\\u7406\\u548C\\u7EF4\\u62A4\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F5C\\u7528\\u57DF\\u6CC4\\u6F0F\"}),\"\\uFF1A\\u5728\\u95ED\\u5305\\u6216\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u4E2D\\u65E0\\u610F\\u4E2D\\u5F15\\u7528\\u5168\\u5C40\\u53D8\\u91CF\\u53EF\\u80FD\\u5BFC\\u81F4\\u5185\\u5B58\\u6CC4\\u6F0F\\u548C\\u6027\\u80FD\\u95EE\\u9898\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6A21\\u5757\\u5316\\u548C\\u5C01\\u88C5\"}),\"\\uFF1A\\u826F\\u597D\\u7684\\u8BBE\\u8BA1\\u4FC3\\u8FDB\\u5C06\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u4FDD\\u6301\\u5728\\u5176\\u7279\\u5B9A\\u4F5C\\u7528\\u57DF\\u5185\\uFF0C\\u4ECE\\u800C\\u589E\\u5F3A\\u7EC4\\u7EC7\\u6027\\u3001\\u53EF\\u91CD\\u7528\\u6027\\u548C\\u53EF\\u7EF4\\u62A4\\u6027\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B89\\u5168\\u95EE\\u9898\"}),\"\\uFF1A\\u5168\\u5C40\\u53D8\\u91CF\\u53EF\\u88AB\\u6240\\u6709\\u811A\\u672C\\u8BBF\\u95EE\\uFF0C\\u5305\\u62EC\\u6F5C\\u5728\\u7684\\u6076\\u610F\\u811A\\u672C\\uFF0C\\u8FD9\\u4F1A\\u5E26\\u6765\\u5B89\\u5168\\u98CE\\u9669\\uFF0C\\u7279\\u522B\\u662F\\u5982\\u679C\\u654F\\u611F\\u6570\\u636E\\u5B58\\u50A8\\u5728\\u5176\\u4E2D\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u517C\\u5BB9\\u6027\\u548C\\u53EF\\u79FB\\u690D\\u6027\"}),\"\\uFF1A\\u8FC7\\u5EA6\\u4F9D\\u8D56\\u5168\\u5C40\\u53D8\\u91CF\\u4F1A\\u964D\\u4F4E\\u4EE3\\u7801\\u7684\\u53EF\\u79FB\\u690D\\u6027\\uFF0C\\u5E76\\u964D\\u4F4E\\u4E0E\\u5176\\u4ED6\\u5E93\\u6216\\u6846\\u67B6\\u7684\\u96C6\\u6210\\u96BE\\u5EA6\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9075\\u5FAA\\u8FD9\\u4E9B\\u6700\\u4F73\\u5B9E\\u8DF5\\u4EE5\\u907F\\u514D\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u6C61\\u67D3\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F7F\\u7528\\u5C40\\u90E8\\u53D8\\u91CF\"}),\"\\uFF1A\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"var\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"let\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"const\"}),\" \\u5728\\u51FD\\u6570\\u6216\\u4EE3\\u7801\\u5757\\u5185\\u58F0\\u660E\\u53D8\\u91CF\\u4EE5\\u9650\\u5236\\u5176\\u4F5C\\u7528\\u57DF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C06\\u53D8\\u91CF\\u4F5C\\u4E3A\\u51FD\\u6570\\u53C2\\u6570\\u4F20\\u9012\"}),\"\\uFF1A\\u901A\\u8FC7\\u5C06\\u53D8\\u91CF\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u800C\\u4E0D\\u662F\\u5168\\u5C40\\u8BBF\\u95EE\\u5B83\\u4EEC\\u6765\\u4FDD\\u6301\\u5C01\\u88C5\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F7F\\u7528\\u7ACB\\u5373\\u8C03\\u7528\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\uFF08IIFE\\uFF09\"}),\"\\uFF1A\\u4F7F\\u7528 IIFE \\u521B\\u5EFA\\u65B0\\u4F5C\\u7528\\u57DF\\u4EE5\\u9632\\u6B62\\u5C06\\u53D8\\u91CF\\u6DFB\\u52A0\\u5230\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F7F\\u7528\\u6A21\\u5757\"}),\"\\uFF1A\\u4F7F\\u7528\\u6A21\\u5757\\u7CFB\\u7EDF\\u5C01\\u88C5\\u4EE3\\u7801\\u4EE5\\u4FDD\\u6301\\u72EC\\u7ACB\\u7684\\u4F5C\\u7528\\u57DF\\u548C\\u53EF\\u7BA1\\u7406\\u6027\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4EC0\\u4E48\\u662F\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\uFF1F\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\uFF0C\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u662F\\u9876\\u7EA7\\u4E0A\\u4E0B\\u6587\\uFF0C\\u53D8\\u91CF\\u3001\\u51FD\\u6570\\u548C\\u5BF9\\u8C61\\u53EF\\u4EE5\\u4ECE\\u4EE3\\u7801\\u4E2D\\u7684\\u4EFB\\u4F55\\u4F4D\\u7F6E\\u8BBF\\u95EE\\u3002\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u7531 \",(0,e.jsx)(n.code,{children:\"window\"}),\" \\u5BF9\\u8C61\\u8868\\u793A\\u3002\\u5728\\u4EFB\\u4F55\\u51FD\\u6570\\u6216\\u4EE3\\u7801\\u5757\\uFF08\\u5373\\u4E0D\\u5728\\u4EFB\\u4F55\\u6A21\\u5757\\u5185\\uFF09\\u4E4B\\u5916\\u58F0\\u660E\\u7684\\u4EFB\\u4F55\\u53D8\\u91CF\\u6216\\u51FD\\u6570\\u90FD\\u4F1A\\u6DFB\\u52A0\\u5230 \",(0,e.jsx)(n.code,{children:\"window\"}),\" \\u5BF9\\u8C61\\u4E2D\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u5728\\u5168\\u5C40\\u8303\\u56F4\\u5185\\u8BBF\\u95EE\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u5047\\u8BBE\\u8FD9\\u5728\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u4E2D\\u8FD0\\u884C\\uFF0C\\u800C\\u4E0D\\u662F\\u5728\\u6A21\\u5757\\u4E2D\\u3002\nvar globalVariable = '\\u6211\\u662F\\u5168\\u5C40\\u53D8\\u91CF';\nfunction globalFunction() {\n  console.log('\\u6211\\u662F\\u4E00\\u4E2A\\u5168\\u5C40\\u51FD\\u6570');\n}\n\nconsole.log(window.globalVariable); // '\\u6211\\u662F\\u5168\\u5C40\\u53D8\\u91CF'\nwindow.globalFunction(); // '\\u6211\\u662F\\u4E00\\u4E2A\\u5168\\u5C40\\u51FD\\u6570'\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"globalVariable\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"globalFunction\"}),\" \\u88AB\\u6DFB\\u52A0\\u5230 \",(0,e.jsx)(n.code,{children:\"window\"}),\" \\u5BF9\\u8C61\\u4E2D\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u4ECE\\u5168\\u5C40\\u4E0A\\u4E0B\\u6587\\u4E2D\\u7684\\u4EFB\\u4F55\\u4F4D\\u7F6E\\u8BBF\\u95EE\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u7684\\u9677\\u9631\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u4E00\\u822C\\u6765\\u8BF4\\uFF0C\\u4E0D\\u6C61\\u67D3\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u662F\\u4E00\\u4E2A\\u5F88\\u597D\\u7684\\u8F6F\\u4EF6\\u5DE5\\u7A0B\\u5B9E\\u8DF5\\uFF0C\\u9664\\u975E\\u4F60\\u6B63\\u5728\\u5904\\u7406\\u4E00\\u4E2A\\u771F\\u6B63\\u9700\\u8981\\u5168\\u5C40\\u7684\\u7279\\u6027\\u2014\\u2014\\u6574\\u4E2A\\u9875\\u9762\\u90FD\\u9700\\u8981\\u5B83\\u3002\\u6709\\u5F88\\u591A\\u539F\\u56E0\\u53EF\\u4EE5\\u907F\\u514D\\u89E6\\u53CA\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u547D\\u540D\\u51B2\\u7A81\"}),\"\\uFF1A\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u5728\\u7F51\\u9875\\u4E0A\\u7684\\u6240\\u6709\\u811A\\u672C\\u4E4B\\u95F4\\u5171\\u4EAB\\u3002\\u5982\\u679C\\u4F60\\u5F15\\u5165\\u65B0\\u7684\\u5168\\u5C40\\u53D8\\u91CF\\u6216\\u4FEE\\u6539\\u73B0\\u6709\\u7684\\u5168\\u5C40\\u53D8\\u91CF\\uFF0C\\u4F60\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u4E0E\\u5728\\u540C\\u4E00\\u9875\\u9762\\u4E0A\\u4F7F\\u7528\\u7684\\u5176\\u4ED6\\u811A\\u672C\\u6216\\u5E93\\u53D1\\u751F\\u547D\\u540D\\u51B2\\u7A81\\u3002\\u8FD9\\u53EF\\u80FD\\u5BFC\\u81F4\\u610F\\u5916\\u884C\\u4E3A\\u548C\\u96BE\\u4EE5\\u8C03\\u8BD5\\u7684\\u95EE\\u9898\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u6DF7\\u4E71\"}),\"\\uFF1A\\u5168\\u5C40\\u547D\\u540D\\u7A7A\\u95F4\\u5E94\\u4FDD\\u6301\\u5C3D\\u53EF\\u80FD\\u5E72\\u51C0\\u548C\\u6700\\u5C0F\\u3002\\u6DFB\\u52A0\\u4E0D\\u5FC5\\u8981\\u7684\\u5168\\u5C40\\u53D8\\u91CF\\u6216\\u51FD\\u6570\\u4F1A\\u4F7F\\u547D\\u540D\\u7A7A\\u95F4\\u6DF7\\u4E71\\uFF0C\\u5E76\\u4F7F\\u4EE3\\u7801\\u5E93\\u968F\\u7740\\u65F6\\u95F4\\u7684\\u63A8\\u79FB\\u66F4\\u96BE\\u4E8E\\u7BA1\\u7406\\u548C\\u7EF4\\u62A4\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F5C\\u7528\\u57DF\\u6CC4\\u6F0F\"}),\"\\uFF1A\\u5728\\u4F7F\\u7528\\u95ED\\u5305\\u6216\\u4E8B\\u4EF6\\u5904\\u7406\\u7A0B\\u5E8F\\u65F6\\uFF0C\\u5F88\\u5BB9\\u6613\\u610F\\u5916\\u5730\\u521B\\u5EFA\\u5BF9\\u5168\\u5C40\\u53D8\\u91CF\\u7684\\u65E0\\u610F\\u5F15\\u7528\\uFF0C\\u4ECE\\u800C\\u5BFC\\u81F4\\u5185\\u5B58\\u6CC4\\u6F0F\\u548C\\u6027\\u80FD\\u95EE\\u9898\\u3002\\u901A\\u8FC7\\u5B8C\\u5168\\u907F\\u514D\\u5168\\u5C40\\u53D8\\u91CF\\uFF0C\\u4F60\\u53EF\\u4EE5\\u9632\\u6B62\\u8FD9\\u4E9B\\u7C7B\\u578B\\u7684\\u4F5C\\u7528\\u57DF\\u6CC4\\u6F0F\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u6A21\\u5757\\u5316\\u548C\\u5C01\\u88C5\"}),\"\\uFF1A\\u826F\\u597D\\u8F6F\\u4EF6\\u8BBE\\u8BA1\\u539F\\u5219\\u4E4B\\u4E00\\u662F\\u6A21\\u5757\\u5316\\u548C\\u5C01\\u88C5\\u3002\\u901A\\u8FC7\\u5C06\\u53D8\\u91CF\\u548C\\u51FD\\u6570\\u4FDD\\u7559\\u5728\\u5176\\u5404\\u81EA\\u7684\\u4F5C\\u7528\\u57DF\\u5185\\uFF08\\u4F8B\\u5982\\uFF0C\\u6A21\\u5757\\u3001\\u51FD\\u6570\\u6216\\u5757\\u4F5C\\u7528\\u57DF\\uFF09\\uFF0C\\u4F60\\u53EF\\u4EE5\\u4FC3\\u8FDB\\u66F4\\u597D\\u7684\\u4EE3\\u7801\\u7EC4\\u7EC7\\u3001\\u53EF\\u91CD\\u7528\\u6027\\u548C\\u53EF\\u7EF4\\u62A4\\u6027\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5B89\\u5168\\u95EE\\u9898\"}),\"\\uFF1A\\u5168\\u5C40\\u53D8\\u91CF\\u53EF\\u4EE5\\u88AB\\u9875\\u9762\\u4E0A\\u8FD0\\u884C\\u7684\\u4EFB\\u4F55\\u811A\\u672C\\u8BBF\\u95EE\\u548C\\u4FEE\\u6539\\uFF0C\\u5305\\u62EC\\u6F5C\\u5728\\u7684\\u6076\\u610F\\u811A\\u672C\\u3002\\u7F51\\u7AD9\\u52A0\\u8F7D\\u7B2C\\u4E09\\u65B9\\u811A\\u672C\\u662F\\u5F88\\u5E38\\u89C1\\u7684\\uFF0C\\u5982\\u679C\\u6709\\u4EBA\\u7F51\\u7EDC\\u88AB\\u5165\\u4FB5\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u5E26\\u6765\\u5B89\\u5168\\u98CE\\u9669\\uFF0C\\u7279\\u522B\\u662F\\u5982\\u679C\\u654F\\u611F\\u6570\\u636E\\u5B58\\u50A8\\u5728\\u5168\\u5C40\\u53D8\\u91CF\\u4E2D\\u3002\\u4F46\\u662F\\uFF0C\\u9996\\u5148\\u4F60\\u4E0D\\u5E94\\u8BE5\\u5728\\u5BA2\\u6237\\u7AEF\\u4E0A\\u66B4\\u9732\\u4EFB\\u4F55\\u654F\\u611F\\u6570\\u636E\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u517C\\u5BB9\\u6027\\u548C\\u53EF\\u79FB\\u690D\\u6027\"}),\"\\uFF1A\\u901A\\u8FC7\\u4E25\\u91CD\\u4F9D\\u8D56\\u5168\\u5C40\\u53D8\\u91CF\\uFF0C\\u4F60\\u7684\\u4EE3\\u7801\\u53D8\\u5F97\\u4E0D\\u592A\\u53EF\\u79FB\\u690D\\uFF0C\\u5E76\\u4E14\\u66F4\\u4F9D\\u8D56\\u4E8E\\u7F16\\u5199\\u5B83\\u7684\\u7279\\u5B9A\\u73AF\\u5883\\u3002\\u8FD9\\u53EF\\u80FD\\u4F1A\\u4F7F\\u5B83\\u66F4\\u96BE\\u4EE5\\u4E0E\\u5176\\u4ED6\\u5E93\\u6216\\u6846\\u67B6\\u96C6\\u6210\\uFF0C\\u6216\\u8005\\u5728\\u4E0D\\u540C\\u7684\\u73AF\\u5883\\u4E2D\\u8FD0\\u884C\\u4EE3\\u7801\\uFF08\\u4F8B\\u5982\\uFF0C\\u670D\\u52A1\\u5668\\u7AEF\\u4E0E\\u6D4F\\u89C8\\u5668\\uFF09\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u8FD9\\u662F\\u4E00\\u4E2A\\u4F7F\\u7528\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u7684\\u4F8B\\u5B50\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// \\u5047\\u8BBE\\u8FD9\\u5728\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u4E2D\\u8FD0\\u884C\\uFF0C\\u800C\\u4E0D\\u662F\\u5728\\u6A21\\u5757\\u4E2D\\u3002\nlet count = 0;\n\nfunction incrementCount() {\n  count++;\n  console.log(count);\n}\n\nfunction decrementCount() {\n  count--;\n  console.log(count);\n}\n\nincrementCount(); // \\u8F93\\u51FA\\uFF1A1\ndecrementCount(); // \\u8F93\\u51FA\\uFF1A0\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"count\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"incrementCount\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"decrementCount\"}),\" \\u5728\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u4E2D\\u5B9A\\u4E49\\u3002\\u9875\\u9762\\u4E0A\\u7684\\u4EFB\\u4F55\\u811A\\u672C\\u90FD\\u53EF\\u4EE5\\u8BBF\\u95EE\\u548C\\u4FEE\\u6539 \",(0,e.jsx)(n.code,{children:\"count\"}),\"\\uFF0C\\u4EE5\\u53CA \",(0,e.jsx)(n.code,{children:\"window\"}),\" \\u4E0A\\u7684\\u6240\\u6709\\u53D8\\u91CF\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u907F\\u514D\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u6C61\\u67D3\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5230\\u76EE\\u524D\\u4E3A\\u6B62\\uFF0C\\u6211\\u4EEC\\u5E0C\\u671B\\u60A8\\u76F8\\u4FE1\\u5728\\u5168\\u5C40\\u8303\\u56F4\\u5185\\u5B9A\\u4E49\\u53D8\\u91CF\\u4E0D\\u662F\\u4E00\\u4E2A\\u597D\\u4E3B\\u610F\\u3002\\u4E3A\\u4E86\\u907F\\u514D\\u6C61\\u67D3\\u5168\\u5C40\\u8303\\u56F4\\uFF0C\\u5EFA\\u8BAE\\u9075\\u5FAA\\u6700\\u4F73\\u5B9E\\u8DF5\\uFF0C\\u4F8B\\u5982\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F7F\\u7528\\u5C40\\u90E8\\u53D8\\u91CF\"}),\"\\uFF1A\\u5728\\u51FD\\u6570\\u6216\\u4EE3\\u7801\\u5757\\u5185\\u58F0\\u660E\\u53D8\\u91CF\\uFF0C\\u4EE5\\u9650\\u5236\\u5176\\u4F5C\\u7528\\u57DF\\uFF0C\\u9632\\u6B62\\u5B83\\u4EEC\\u88AB\\u5168\\u5C40\\u8BBF\\u95EE\\u3002\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"var\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"let\"}),\" \\u6216 \",(0,e.jsx)(n.code,{children:\"const\"}),\" \\u5728\\u7279\\u5B9A\\u4F5C\\u7528\\u57DF\\u5185\\u58F0\\u660E\\u53D8\\u91CF\\uFF0C\\u786E\\u4FDD\\u5B83\\u4EEC\\u4E0D\\u4F1A\\u88AB\\u610F\\u5916\\u5730\\u8BBE\\u7F6E\\u4E3A\\u5168\\u5C40\\u53D8\\u91CF\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5C06\\u53D8\\u91CF\\u4F5C\\u4E3A\\u51FD\\u6570\\u53C2\\u6570\\u4F20\\u9012\"}),\"\\uFF1A\\u4E0D\\u8981\\u76F4\\u63A5\\u4ECE\\u5916\\u90E8\\u4F5C\\u7528\\u57DF\\u8BBF\\u95EE\\u53D8\\u91CF\\uFF0C\\u800C\\u662F\\u5C06\\u5B83\\u4EEC\\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u9012\\u7ED9\\u51FD\\u6570\\uFF0C\\u4EE5\\u4FDD\\u6301\\u5C01\\u88C5\\u5E76\\u907F\\u514D\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u6C61\\u67D3\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F7F\\u7528\\u6A21\\u5757\"}),\"\\uFF1A\\u5229\\u7528\\u6A21\\u5757\\u7CFB\\u7EDF\\u6765\\u5C01\\u88C5\\u4F60\\u7684\\u4EE3\\u7801\\uFF0C\\u9632\\u6B62\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\u6C61\\u67D3\\u3002\\u6BCF\\u4E2A\\u6A21\\u5757\\u90FD\\u6709\\u81EA\\u5DF1\\u7684\\u4F5C\\u7528\\u57DF\\uFF0C\\u8FD9\\u4F7F\\u5F97\\u7BA1\\u7406\\u548C\\u7EF4\\u62A4\\u4F60\\u7684\\u4EE3\\u7801\\u66F4\\u5BB9\\u6613\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u4F7F\\u7528\\u7ACB\\u5373\\u8C03\\u7528\\u51FD\\u6570\\u8868\\u8FBE\\u5F0F\\uFF08IIFE\\uFF09\"}),\"\\uFF1A\\u5982\\u679C\\u6A21\\u5757\\u4E0D\\u53EF\\u7528\\uFF0C\\u5C06\\u4F60\\u7684\\u4EE3\\u7801\\u5305\\u88C5\\u5728 IIFE \\u4E2D\\u4EE5\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684\\u4F5C\\u7528\\u57DF\\uFF0C\\u9632\\u6B62\\u53D8\\u91CF\\u88AB\\u6DFB\\u52A0\\u5230\\u5168\\u5C40\\u4F5C\\u7528\\u57DF\\uFF0C\\u9664\\u975E\\u4F60\\u660E\\u786E\\u5730\\u66B4\\u9732\\u5B83\\u4EEC\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Assuming this is run in the global scope, not within a module.\n(function () {\n  let count = 0;\n\n  window.incrementCount = function () {\n    count++;\n    console.log(count);\n  };\n\n  window.decrementCount = function () {\n    count--;\n    console.log(count);\n  };\n})();\n\nincrementCount(); // Output: 1\ndecrementCount(); // Output: 0\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"count\"}),\"\\u5728\\u5168\\u5C40\\u8303\\u56F4\\u5185\\u662F\\u4E0D\\u53EF\\u8BBF\\u95EE\\u7684\\u3002\\u5B83\\u53EA\\u80FD\\u901A\\u8FC7\",(0,e.jsx)(n.code,{children:\"incrementCount\"}),\"\\u548C\",(0,e.jsx)(n.code,{children:\"decrementCount\"}),\"\\u51FD\\u6570\\u8BBF\\u95EE\\u548C\\u4FEE\\u6539\\u3002\\u8FD9\\u4E9B\\u51FD\\u6570\\u901A\\u8FC7\\u5C06\\u5B83\\u4EEC\\u9644\\u52A0\\u5230\",(0,e.jsx)(n.code,{children:\"window\"}),\"\\u5BF9\\u8C61\\u6765\\u66B4\\u9732\\u7ED9\\u5168\\u5C40\\u8303\\u56F4\\uFF0C\\u4F46\\u5B83\\u4EEC\\u4ECD\\u7136\\u53EF\\u4EE5\\u8BBF\\u95EE\\u5176\\u7236\\u8303\\u56F4\\u4E2D\\u7684\",(0,e.jsx)(n.code,{children:\"count\"}),\"\\u53D8\\u91CF\\u3002\\u8FD9\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u5C01\\u88C5\\u5E95\\u5C42\\u6570\\u636E\\u5E76\\u4EC5\\u516C\\u5F00\\u5FC5\\u8981\\u64CD\\u4F5C\\u7684\\u65B9\\u6CD5\\u2014\\u2014\\u4E0D\\u5141\\u8BB8\\u76F4\\u63A5\\u64CD\\u4F5C\\u8BE5\\u503C\\u3002\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules\",children:\"JavaScript modules - MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/modules-intro\",children:\"Modules, introduction\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://lucybain.com/blog/2014/js-dont-touch-global-scope/\",children:\"JS: don't touch the global scope\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://exploringjs.com/es5/ch16.html\",children:\"Variables: Scopes, Environments, and Closures\"})}),`\n`]})]})}function u(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,{...c,children:(0,e.jsx)(s,{...c})}):s(c)}return v(x);})();\n;return Component;"
 }
\ No newline at end of file
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 c4af22e0b..987a5c110 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var p=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},r=(t,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of f(e))!g.call(t,s)&&s!==o&&i(t,s,{get:()=>e[s],enumerable:!(a=u(e,s))||a.enumerable});return t};var x=(t,e,o)=>(o=t!=null?l(m(t)):{},r(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),j=t=>r(i({},\"__esModule\",{value:!0}),t);var h=p((_,d)=>{d.exports=_jsx_runtime});var D={};b(D,{default:()=>y,frontmatter:()=>v});var n=x(h()),v={title:\"Why would you use something like the `load` event?\",subtitle:\"Does this event have disadvantages? Do you know any alternatives, and why would you use those?\"};function c(t){let e=Object.assign({p:\"p\",code:\"code\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"load\"}),\" event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The DOM event \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" will fire after the DOM for the page has been constructed, but do not wait for other resources to finish loading. This is preferred in certain cases when you do not need the full page to be loaded before initializing.\"]})]})}function w(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(c,t)})):c(t)}var y=w;return j(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},r=(t,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!g.call(t,s)&&s!==o&&i(t,s,{get:()=>e[s],enumerable:!(a=f(e,s))||a.enumerable});return t};var w=(t,e,o)=>(o=t!=null?u(p(t)):{},r(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),y=t=>r(i({},\"__esModule\",{value:!0}),t);var h=x((_,d)=>{d.exports=_jsx_runtime});var b={};v(b,{default:()=>l,frontmatter:()=>D});var n=w(h()),D={title:\"Why would you use something like the `load` event?\",subtitle:\"Does this event have disadvantages? Do you know any alternatives, and why would you use those?\"};function c(t){let e={code:\"code\",p:\"p\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"load\"}),\" event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The DOM event \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" will fire after the DOM for the page has been constructed, but do not wait for other resources to finish loading. This is preferred in certain cases when you do not need the full page to be loaded before initializing.\"]})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(c,{...t})}):c(t)}return y(b);})();\n;return Component;"
 }
\ No newline at end of file
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 c474729b2..bcab4131c 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var v=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var n in e)s(o,n,{get:e[n],enumerable:!0})},c=(o,e,n,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of l(e))!j.call(o,t)&&t!==n&&s(o,t,{get:()=>e[t],enumerable:!(r=p(e,t))||r.enumerable});return o};var f=(o,e,n)=>(n=o!=null?u(g(o)):{},c(e||!o||!o.__esModule?s(n,\"default\",{value:o,enumerable:!0}):n,o)),O=o=>c(s({},\"__esModule\",{value:!0}),o);var d=v((q,i)=>{i.exports=_jsx_runtime});var D={};x(D,{default:()=>_,frontmatter:()=>h});var a=f(d()),h={title:\"Por que voc\\xEA usaria algo como o evento `load`?\",subtitle:\"Este evento tem desvantagens? Voc\\xEA conhece alguma alternativa, e por que as usaria?\"};function m(o){let e=Object.assign({p:\"p\",code:\"code\"},o.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(e.p,{children:[\"O evento \",(0,a.jsx)(e.code,{children:\"load\"}),\" dispara no final do processo de carregamento de documentos. Neste ponto, todos os objetos no documento est\\xE3o no DOM, e todas as imagens, scripts, links e sub-frames terminaram de carregar.\"]}),`\n`,(0,a.jsxs)(e.p,{children:[\"O evento DOM \",(0,a.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" ser\\xE1 acionado ap\\xF3s o DOM para a p\\xE1gina ser constru\\xEDdo, mas n\\xE3o espere outros recursos terminarem de carregar. Isso \\xE9 prefer\\xEDvel em certos casos quando voc\\xEA n\\xE3o precisa que a p\\xE1gina inteira seja carregada antes de inicializar.\"]})]})}function M(o={}){let{wrapper:e}=o.components||{};return e?(0,a.jsx)(e,Object.assign({},o,{children:(0,a.jsx)(m,o)})):m(o)}var _=M;return O(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),h=(o,e)=>{for(var n in e)r(o,n,{get:e[n],enumerable:!0})},c=(o,e,n,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of g(e))!x.call(o,t)&&t!==n&&r(o,t,{get:()=>e[t],enumerable:!(s=l(e,t))||s.enumerable});return o};var j=(o,e,n)=>(n=o!=null?p(v(o)):{},c(e||!o||!o.__esModule?r(n,\"default\",{value:o,enumerable:!0}):n,o)),M=o=>c(r({},\"__esModule\",{value:!0}),o);var i=f((q,d)=>{d.exports=_jsx_runtime});var D={};h(D,{default:()=>u,frontmatter:()=>_});var a=j(i()),_={title:\"Por que voc\\xEA usaria algo como o evento `load`?\",subtitle:\"Este evento tem desvantagens? Voc\\xEA conhece alguma alternativa, e por que as usaria?\"};function m(o){let e={code:\"code\",p:\"p\",...o.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(e.p,{children:[\"O evento \",(0,a.jsx)(e.code,{children:\"load\"}),\" dispara no final do processo de carregamento de documentos. Neste ponto, todos os objetos no documento est\\xE3o no DOM, e todas as imagens, scripts, links e sub-frames terminaram de carregar.\"]}),`\n`,(0,a.jsxs)(e.p,{children:[\"O evento DOM \",(0,a.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" ser\\xE1 acionado ap\\xF3s o DOM para a p\\xE1gina ser constru\\xEDdo, mas n\\xE3o espere outros recursos terminarem de carregar. Isso \\xE9 prefer\\xEDvel em certos casos quando voc\\xEA n\\xE3o precisa que a p\\xE1gina inteira seja carregada antes de inicializar.\"]})]})}function u(o={}){let{wrapper:e}=o.components||{};return e?(0,a.jsx)(e,{...o,children:(0,a.jsx)(m,{...o})}):m(o)}return M(D);})();\n;return Component;"
 }
\ No newline at end of file
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 984b25569..4e59b3ac9 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
@@ -28,5 +28,5 @@
     ],
     "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"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var M=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var o in t)r(e,o,{get:t[o],enumerable:!0})},d=(e,t,o,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let c of u(t))!p.call(e,c)&&c!==o&&r(e,c,{get:()=>t[c],enumerable:!(s=x(t,c))||s.enumerable});return e};var h=(e,t,o)=>(o=e!=null?m(j(e)):{},d(t||!e||!e.__esModule?r(o,\"default\",{value:e,enumerable:!0}):o,e)),D=e=>d(r({},\"__esModule\",{value:!0}),e);var i=M((F,a)=>{a.exports=_jsx_runtime});var b={};_(b,{default:()=>g,frontmatter:()=>O});var n=h(i()),O={title:\"\\u4F60\\u4E3A\\u4EC0\\u4E48\\u4F1A\\u4F7F\\u7528\\u7C7B\\u4F3C `load` \\u4E8B\\u4EF6\\u7684\\u4E1C\\u897F\\uFF1F\",subtitle:\"\\u6B64\\u4E8B\\u4EF6\\u6709\\u7F3A\\u70B9\\u5417\\uFF1F \\u4F60\\u77E5\\u9053\\u4EFB\\u4F55\\u66FF\\u4EE3\\u65B9\\u6848\\uFF0C\\u4EE5\\u53CA\\u4F60\\u4E3A\\u4EC0\\u4E48\\u4F1A\\u4F7F\\u7528\\u8FD9\\u4E9B\\u66FF\\u4EE3\\u65B9\\u6848\\uFF1F\"};function l(e){let t=Object.assign({p:\"p\",code:\"code\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:\"load\"}),\" \\u4E8B\\u4EF6\\u5728\\u6587\\u6863\\u52A0\\u8F7D\\u8FC7\\u7A0B\\u7ED3\\u675F\\u65F6\\u89E6\\u53D1\\u3002 \\u6B64\\u65F6\\uFF0C\\u6587\\u6863\\u4E2D\\u7684\\u6240\\u6709\\u5BF9\\u8C61\\u90FD\\u5728 DOM \\u4E2D\\uFF0C\\u5E76\\u4E14\\u6240\\u6709\\u56FE\\u50CF\\u3001\\u811A\\u672C\\u3001\\u94FE\\u63A5\\u548C\\u5B50\\u6846\\u67B6\\u90FD\\u5DF2\\u5B8C\\u6210\\u52A0\\u8F7D\\u3002\"]}),`\n`,(0,n.jsxs)(t.p,{children:[\"DOM \\u4E8B\\u4EF6 \",(0,n.jsx)(t.code,{children:\"DOMContentLoaded\"}),\" \\u5C06\\u5728\\u9875\\u9762 DOM \\u6784\\u5EFA\\u5B8C\\u6210\\u540E\\u89E6\\u53D1\\uFF0C\\u4F46\\u4E0D\\u4F1A\\u7B49\\u5F85\\u5176\\u4ED6\\u8D44\\u6E90\\u5B8C\\u6210\\u52A0\\u8F7D\\u3002 \\u5728\\u67D0\\u4E9B\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5F53\\u60A8\\u4E0D\\u9700\\u8981\\u5728\\u521D\\u59CB\\u5316\\u4E4B\\u524D\\u52A0\\u8F7D\\u6574\\u4E2A\\u9875\\u9762\\u65F6\\uFF0C\\u8FD9\\u662F\\u9996\\u9009\\u3002\"]})]})}function f(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(l,e)})):l(e)}var g=f;return D(b);})();\n;return Component;"
+  "solution": "var Component=(()=>{var x=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var h=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),D=(e,t)=>{for(var o in t)c(e,o,{get:t[o],enumerable:!0})},s=(e,t,o,d)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of p(t))!_.call(e,r)&&r!==o&&c(e,r,{get:()=>t[r],enumerable:!(d=u(t,r))||d.enumerable});return e};var f=(e,t,o)=>(o=e!=null?x(M(e)):{},s(t||!e||!e.__esModule?c(o,\"default\",{value:e,enumerable:!0}):o,e)),j=e=>s(c({},\"__esModule\",{value:!0}),e);var i=h((F,a)=>{a.exports=_jsx_runtime});var C={};D(C,{default:()=>m,frontmatter:()=>O});var n=f(i()),O={title:\"\\u4F60\\u4E3A\\u4EC0\\u4E48\\u4F1A\\u4F7F\\u7528\\u7C7B\\u4F3C `load` \\u4E8B\\u4EF6\\u7684\\u4E1C\\u897F\\uFF1F\",subtitle:\"\\u6B64\\u4E8B\\u4EF6\\u6709\\u7F3A\\u70B9\\u5417\\uFF1F \\u4F60\\u77E5\\u9053\\u4EFB\\u4F55\\u66FF\\u4EE3\\u65B9\\u6848\\uFF0C\\u4EE5\\u53CA\\u4F60\\u4E3A\\u4EC0\\u4E48\\u4F1A\\u4F7F\\u7528\\u8FD9\\u4E9B\\u66FF\\u4EE3\\u65B9\\u6848\\uFF1F\"};function l(e){let t={code:\"code\",p:\"p\",...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:\"load\"}),\" \\u4E8B\\u4EF6\\u5728\\u6587\\u6863\\u52A0\\u8F7D\\u8FC7\\u7A0B\\u7ED3\\u675F\\u65F6\\u89E6\\u53D1\\u3002 \\u6B64\\u65F6\\uFF0C\\u6587\\u6863\\u4E2D\\u7684\\u6240\\u6709\\u5BF9\\u8C61\\u90FD\\u5728 DOM \\u4E2D\\uFF0C\\u5E76\\u4E14\\u6240\\u6709\\u56FE\\u50CF\\u3001\\u811A\\u672C\\u3001\\u94FE\\u63A5\\u548C\\u5B50\\u6846\\u67B6\\u90FD\\u5DF2\\u5B8C\\u6210\\u52A0\\u8F7D\\u3002\"]}),`\n`,(0,n.jsxs)(t.p,{children:[\"DOM \\u4E8B\\u4EF6 \",(0,n.jsx)(t.code,{children:\"DOMContentLoaded\"}),\" \\u5C06\\u5728\\u9875\\u9762 DOM \\u6784\\u5EFA\\u5B8C\\u6210\\u540E\\u89E6\\u53D1\\uFF0C\\u4F46\\u4E0D\\u4F1A\\u7B49\\u5F85\\u5176\\u4ED6\\u8D44\\u6E90\\u5B8C\\u6210\\u52A0\\u8F7D\\u3002 \\u5728\\u67D0\\u4E9B\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5F53\\u60A8\\u4E0D\\u9700\\u8981\\u5728\\u521D\\u59CB\\u5316\\u4E4B\\u524D\\u52A0\\u8F7D\\u6574\\u4E2A\\u9875\\u9762\\u65F6\\uFF0C\\u8FD9\\u662F\\u9996\\u9009\\u3002\"]})]})}function m(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}return j(C);})();\n;return Component;"
 }
\ No newline at end of file
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 258d3140b..097e05dcd 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/why-you-might-want-to-create-static-class-members/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var a in e)c(t,a,{get:e[a],enumerable:!0})},r=(t,e,a,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!g.call(t,s)&&s!==a&&c(t,s,{get:()=>e[s],enumerable:!(i=u(e,s))||i.enumerable});return t};var y=(t,e,a)=>(a=t!=null?d(p(t)):{},r(e||!t||!t.__esModule?c(a,\"default\",{value:t,enumerable:!0}):a,t)),S=t=>r(c({},\"__esModule\",{value:!0}),t);var l=f((M,o)=>{o.exports=_jsx_runtime});var j={};b(j,{default:()=>O,frontmatter:()=>v});var n=y(l()),v={title:\"Why might you want to create static class members in JavaScript?\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",ul:\"ul\",li:\"li\",strong:\"strong\",hr:\"hr\",h3:\"h3\",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:[\"Static class members (properties/methods) has a \",(0,n.jsx)(e.code,{children:\"static\"}),\" keyword prepended. Such members cannot be directly accessed on instances of the class. Instead, they're accessed on the class itself.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Car {\n  static noOfWheels = 4;\n  static compare() {\n    return 'Static method has been called.';\n  }\n}\n\nconsole.log(Car.noOfWheels); // 4\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Static members are useful under the following scenarios:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Namespace organization\"}),\": Static properties can be used to define constants or configuration values that are specific to a class. This helps organize related data within the class namespace and prevents naming conflicts with other variables. Examples include \",(0,n.jsx)(e.code,{children:\"Math.PI\"}),\", \",(0,n.jsx)(e.code,{children:\"Math.SQRT2\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Helper functions\"}),\": Static methods can be used as helper functions that operate on the class itself or its instances. This can improve code readability and maintainability by separating utility logic from the core functionality of the class. Examples of frequently used static methods include \",(0,n.jsx)(e.code,{children:\"Object.assign()\"}),\", \",(0,n.jsx)(e.code,{children:\"Math.max()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Singleton pattern\"}),\": In some rare cases, static properties and methods can be used to implement a singleton pattern, where only one instance of a class ever exists. However, this pattern can be tricky to manage and is generally discouraged in favor of more modern dependency injection techniques.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Static class members\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Static class members (properties/methods) are not tied to a specific instance of a class and have the same value regardless of which instance is referring to it. Static properties are typically configuration variables and static methods are usually pure utility functions which do not depend on the state of the instance. Such properties has a \",(0,n.jsx)(e.code,{children:\"static\"}),\" keyword prepended.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Car {\n  static noOfWheels = 4;\n  static compare() {\n    return 'static method has been called.';\n  }\n}\n\nconsole.log(Car.noOfWheels); // Output: 4\nconsole.log(Car.compare()); // Output: static method has been called.\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Static members are not accessible by specific instance of class.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Car {\n  static noOfWheels = 4;\n  static compare() {\n    return 'static method has been called.';\n  }\n}\n\nconst car = new Car();\nconsole.log(car.noOfWheels); // Output: undefined\nconsole.log(car.compare()); // Error: TypeError: car.compare is not a function\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Math\"}),\" class in JavaScript is a good example of a common library that uses static members. The \",(0,n.jsx)(e.code,{children:\"Math\"}),\" class in JavaScript is a built-in object that provides a collection of mathematical constants and functions. It is a static class, meaning that all of its properties and methods are static. Here's an example of how the \",(0,n.jsx)(e.code,{children:\"Math\"}),\" class uses static members:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(Math.PI); // Output: 3.141592653589793\nconsole.log(Math.abs(-5)); // Output: 5\nconsole.log(Math.max(1, 2, 3)); // Output: 3\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"Math.PI\"}),\", \",(0,n.jsx)(e.code,{children:\"Math.abs()\"}),\", and \",(0,n.jsx)(e.code,{children:\"Math.max()\"}),\" are all static members of the \",(0,n.jsx)(e.code,{children:\"Math\"}),\" class. They can be accessed directly on the \",(0,n.jsx)(e.code,{children:\"Math\"}),\" object without the need to create an instance of the class.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Reasons to use static class members\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Utility functions\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Static class members can be useful for defining utility functions that don't require any instance-specific (don't use \",(0,n.jsx)(e.code,{children:\"this\"}),\") data or behavior. For example, you might have a \",(0,n.jsx)(e.code,{children:\"Arithmetic\"}),\" class with static methods for common mathematical operations.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Arithmetic {\n  static add(a, b) {\n    return a + b;\n  }\n  static subtract(a, b) {\n    return a - b;\n  }\n}\n\nconsole.log(Arithmetic.add(2, 3)); // Output: 5\nconsole.log(Arithmetic.subtract(5, 2)); // Output: 3\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Singletons\"}),`\n`,(0,n.jsx)(e.p,{children:\"Static class members can be used to implement the Singleton pattern, where you want to ensure that only one instance of a class exists throughout your application.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Singleton {\n  static instance;\n\n  static getInstance() {\n    if (!this.instance) {\n      this.instance = new Singleton();\n    }\n    return this.instance;\n  }\n}\n\nconst singleton1 = Singleton.getInstance();\nconst singleton2 = Singleton.getInstance();\n\nconsole.log(singleton1 === singleton2); // Output: true\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Configurations\"}),`\n`,(0,n.jsx)(e.p,{children:\"Static class members can be used to store configuration or settings that are shared across all instances of a class. This can be useful for things like API keys, feature flags, or other global settings.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Config {\n  static API_KEY = 'your-api-key';\n  static FEATURE_FLAG = true;\n}\n\nconsole.log(Config.API_KEY); // Output: 'your-api-key'\nconsole.log(Config.FEATURE_FLAG); // Output: true\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Performance\"}),`\n`,(0,n.jsx)(e.p,{children:\"In some cases, using static class members can improve performance by reducing the amount of memory used by your application. This is because static class members are shared across all instances of a class, rather than being duplicated for each instance.\"}),`\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/Web/JavaScript/Reference/Classes/static\",children:\"Static methods and properties | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/static-properties-methods\",children:\"Static properties and methods | Javascript.info\"})}),`\n`]})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var O=x;return S(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var a in e)c(t,a,{get:e[a],enumerable:!0})},r=(t,e,a,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!f.call(t,s)&&s!==a&&c(t,s,{get:()=>e[s],enumerable:!(i=m(e,s))||i.enumerable});return t};var S=(t,e,a)=>(a=t!=null?u(g(t)):{},r(e||!t||!t.__esModule?c(a,\"default\",{value:t,enumerable:!0}):a,t)),v=t=>r(c({},\"__esModule\",{value:!0}),t);var l=b((O,o)=>{o.exports=_jsx_runtime});var w={};y(w,{default:()=>d,frontmatter:()=>x});var n=S(l()),x={title:\"Why might you want to create static class members in JavaScript?\"};function h(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Static class members (properties/methods) has a \",(0,n.jsx)(e.code,{children:\"static\"}),\" keyword prepended. Such members cannot be directly accessed on instances of the class. Instead, they're accessed on the class itself.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Car {\n  static noOfWheels = 4;\n  static compare() {\n    return 'Static method has been called.';\n  }\n}\n\nconsole.log(Car.noOfWheels); // 4\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Static members are useful under the following scenarios:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Namespace organization\"}),\": Static properties can be used to define constants or configuration values that are specific to a class. This helps organize related data within the class namespace and prevents naming conflicts with other variables. Examples include \",(0,n.jsx)(e.code,{children:\"Math.PI\"}),\", \",(0,n.jsx)(e.code,{children:\"Math.SQRT2\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Helper functions\"}),\": Static methods can be used as helper functions that operate on the class itself or its instances. This can improve code readability and maintainability by separating utility logic from the core functionality of the class. Examples of frequently used static methods include \",(0,n.jsx)(e.code,{children:\"Object.assign()\"}),\", \",(0,n.jsx)(e.code,{children:\"Math.max()\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Singleton pattern\"}),\": In some rare cases, static properties and methods can be used to implement a singleton pattern, where only one instance of a class ever exists. However, this pattern can be tricky to manage and is generally discouraged in favor of more modern dependency injection techniques.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Static class members\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Static class members (properties/methods) are not tied to a specific instance of a class and have the same value regardless of which instance is referring to it. Static properties are typically configuration variables and static methods are usually pure utility functions which do not depend on the state of the instance. Such properties has a \",(0,n.jsx)(e.code,{children:\"static\"}),\" keyword prepended.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Car {\n  static noOfWheels = 4;\n  static compare() {\n    return 'static method has been called.';\n  }\n}\n\nconsole.log(Car.noOfWheels); // Output: 4\nconsole.log(Car.compare()); // Output: static method has been called.\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Static members are not accessible by specific instance of class.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Car {\n  static noOfWheels = 4;\n  static compare() {\n    return 'static method has been called.';\n  }\n}\n\nconst car = new Car();\nconsole.log(car.noOfWheels); // Output: undefined\nconsole.log(car.compare()); // Error: TypeError: car.compare is not a function\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"Math\"}),\" class in JavaScript is a good example of a common library that uses static members. The \",(0,n.jsx)(e.code,{children:\"Math\"}),\" class in JavaScript is a built-in object that provides a collection of mathematical constants and functions. It is a static class, meaning that all of its properties and methods are static. Here's an example of how the \",(0,n.jsx)(e.code,{children:\"Math\"}),\" class uses static members:\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`console.log(Math.PI); // Output: 3.141592653589793\nconsole.log(Math.abs(-5)); // Output: 5\nconsole.log(Math.max(1, 2, 3)); // Output: 3\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, \",(0,n.jsx)(e.code,{children:\"Math.PI\"}),\", \",(0,n.jsx)(e.code,{children:\"Math.abs()\"}),\", and \",(0,n.jsx)(e.code,{children:\"Math.max()\"}),\" are all static members of the \",(0,n.jsx)(e.code,{children:\"Math\"}),\" class. They can be accessed directly on the \",(0,n.jsx)(e.code,{children:\"Math\"}),\" object without the need to create an instance of the class.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Reasons to use static class members\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Utility functions\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Static class members can be useful for defining utility functions that don't require any instance-specific (don't use \",(0,n.jsx)(e.code,{children:\"this\"}),\") data or behavior. For example, you might have a \",(0,n.jsx)(e.code,{children:\"Arithmetic\"}),\" class with static methods for common mathematical operations.\"]}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Arithmetic {\n  static add(a, b) {\n    return a + b;\n  }\n  static subtract(a, b) {\n    return a - b;\n  }\n}\n\nconsole.log(Arithmetic.add(2, 3)); // Output: 5\nconsole.log(Arithmetic.subtract(5, 2)); // Output: 3\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Singletons\"}),`\n`,(0,n.jsx)(e.p,{children:\"Static class members can be used to implement the Singleton pattern, where you want to ensure that only one instance of a class exists throughout your application.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Singleton {\n  static instance;\n\n  static getInstance() {\n    if (!this.instance) {\n      this.instance = new Singleton();\n    }\n    return this.instance;\n  }\n}\n\nconst singleton1 = Singleton.getInstance();\nconst singleton2 = Singleton.getInstance();\n\nconsole.log(singleton1 === singleton2); // Output: true\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Configurations\"}),`\n`,(0,n.jsx)(e.p,{children:\"Static class members can be used to store configuration or settings that are shared across all instances of a class. This can be useful for things like API keys, feature flags, or other global settings.\"}),`\n`,(0,n.jsx)(e.pre,{live:!0,children:(0,n.jsx)(e.code,{className:\"language-js\",children:`class Config {\n  static API_KEY = 'your-api-key';\n  static FEATURE_FLAG = true;\n}\n\nconsole.log(Config.API_KEY); // Output: 'your-api-key'\nconsole.log(Config.FEATURE_FLAG); // Output: true\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Performance\"}),`\n`,(0,n.jsx)(e.p,{children:\"In some cases, using static class members can improve performance by reducing the amount of memory used by your application. This is because static class members are shared across all instances of a class, rather than being duplicated for each instance.\"}),`\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/Web/JavaScript/Reference/Classes/static\",children:\"Static methods and properties | MDN\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/static-properties-methods\",children:\"Static properties and methods | Javascript.info\"})}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}return v(w);})();\n;return Component;"
 }
\ No newline at end of file
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 43e09dae5..369e70784 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/why-you-might-want-to-create-static-class-members/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),j=(e,t)=>{for(var s in t)n(e,s,{get:t[s],enumerable:!0})},i=(e,t,s,r)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let o of l(t))!x.call(e,o)&&o!==s&&n(e,o,{get:()=>t[o],enumerable:!(r=p(t,o))||r.enumerable});return e};var _=(e,t,s)=>(s=e!=null?u(f(e)):{},i(t||!e||!e.__esModule?n(s,\"default\",{value:e,enumerable:!0}):s,e)),b=e=>i(n({},\"__esModule\",{value:!0}),e);var d=g((C,c)=>{c.exports=_jsx_runtime});var O={};j(O,{default:()=>M,frontmatter:()=>q});var a=_(d()),q={title:\"Por que voc\\xEA pode querer criar membros de classe est\\xE1ticos?\"};function m(e){let t=Object.assign({p:\"p\"},e.components);return(0,a.jsx)(t.p,{children:\"Os membros est\\xE1ticos de classe (propriedades/m\\xE9todos) n\\xE3o est\\xE3o ligados a uma inst\\xE2ncia espec\\xEDfica de uma classe e t\\xEAm o mesmo valor independentemente da inst\\xE2ncia que est\\xE1 se referindo a ele. Propriedades est\\xE1ticas geralmente s\\xE3o vari\\xE1veis de configura\\xE7\\xE3o e m\\xE9todos est\\xE1ticos s\\xE3o normalmente fun\\xE7\\xF5es utilit\\xE1rias puras que n\\xE3o dependem do estado da inst\\xE2ncia.\"})}function v(e={}){let{wrapper:t}=e.components||{};return t?(0,a.jsx)(t,Object.assign({},e,{children:(0,a.jsx)(m,e)})):m(e)}var M=v;return b(O);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var n=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var q=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),v=(e,t)=>{for(var o in t)n(e,o,{get:t[o],enumerable:!0})},i=(e,t,o,a)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let s of f(t))!_.call(e,s)&&s!==o&&n(e,s,{get:()=>t[s],enumerable:!(a=l(t,s))||a.enumerable});return e};var g=(e,t,o)=>(o=e!=null?p(x(e)):{},i(t||!e||!e.__esModule?n(o,\"default\",{value:e,enumerable:!0}):o,e)),j=e=>i(n({},\"__esModule\",{value:!0}),e);var d=q((C,c)=>{c.exports=_jsx_runtime});var b={};v(b,{default:()=>u,frontmatter:()=>M});var r=g(d()),M={title:\"Por que voc\\xEA pode querer criar membros de classe est\\xE1ticos?\"};function m(e){let t={p:\"p\",...e.components};return(0,r.jsx)(t.p,{children:\"Os membros est\\xE1ticos de classe (propriedades/m\\xE9todos) n\\xE3o est\\xE3o ligados a uma inst\\xE2ncia espec\\xEDfica de uma classe e t\\xEAm o mesmo valor independentemente da inst\\xE2ncia que est\\xE1 se referindo a ele. Propriedades est\\xE1ticas geralmente s\\xE3o vari\\xE1veis de configura\\xE7\\xE3o e m\\xE9todos est\\xE1ticos s\\xE3o normalmente fun\\xE7\\xF5es utilit\\xE1rias puras que n\\xE3o dependem do estado da inst\\xE2ncia.\"})}function u(e={}){let{wrapper:t}=e.components||{};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}return j(b);})();\n;return Component;"
 }
\ No newline at end of file
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 a23e15fd6..e1242604e 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
@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/why-you-might-want-to-create-static-class-members/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),O=(c,n)=>{for(var t in n)l(c,t,{get:n[t],enumerable:!0})},i=(c,n,t,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of p(n))!m.call(c,r)&&r!==t&&l(c,r,{get:()=>n[r],enumerable:!(a=u(n,r))||a.enumerable});return c};var M=(c,n,t)=>(t=c!=null?d(g(c)):{},i(n||!c||!c.__esModule?l(t,\"default\",{value:c,enumerable:!0}):t,c)),b=c=>i(l({},\"__esModule\",{value:!0}),c);var o=f((S,s)=>{s.exports=_jsx_runtime});var x={};O(x,{default:()=>C,frontmatter:()=>j});var e=M(o()),j={title:\"\\u4E3A\\u4EC0\\u4E48\\u4F60\\u53EF\\u80FD\\u60F3\\u8981\\u5728 JavaScript \\u4E2D\\u521B\\u5EFA\\u9759\\u6001\\u7C7B\\u6210\\u5458\\uFF1F\"};function h(c){let n=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",pre:\"pre\",ul:\"ul\",li:\"li\",strong:\"strong\",hr:\"hr\",h3:\"h3\",a:\"a\"},c.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u9759\\u6001\\u7C7B\\u6210\\u5458\\uFF08\\u5C5E\\u6027/\\u65B9\\u6CD5\\uFF09\\u6709\\u4E00\\u4E2A\\u524D\\u7F6E\\u7684 \",(0,e.jsx)(n.code,{children:\"static\"}),\" \\u5173\\u952E\\u5B57\\u3002\\u6B64\\u7C7B\\u6210\\u5458\\u4E0D\\u80FD\\u76F4\\u63A5\\u5728\\u7C7B\\u7684\\u5B9E\\u4F8B\\u4E0A\\u8BBF\\u95EE\\u3002\\u76F8\\u53CD\\uFF0C\\u5B83\\u4EEC\\u5728\\u7C7B\\u672C\\u8EAB\\u4E0A\\u88AB\\u8BBF\\u95EE\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Car {\n  static noOfWheels = 4;\n  static compare() {\n    return 'Static method has been called.';\n  }\n}\n\nconsole.log(Car.noOfWheels); // 4\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9759\\u6001\\u6210\\u5458\\u5728\\u4EE5\\u4E0B\\u60C5\\u51B5\\u4E0B\\u5F88\\u6709\\u7528\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u547D\\u540D\\u7A7A\\u95F4\\u7EC4\\u7EC7\"}),\"\\uFF1A\\u9759\\u6001\\u5C5E\\u6027\\u53EF\\u7528\\u4E8E\\u5B9A\\u4E49\\u7279\\u5B9A\\u4E8E\\u7C7B\\u7684\\u5E38\\u91CF\\u6216\\u914D\\u7F6E\\u503C\\u3002\\u8FD9\\u6709\\u52A9\\u4E8E\\u5728\\u7C7B\\u547D\\u540D\\u7A7A\\u95F4\\u5185\\u7EC4\\u7EC7\\u76F8\\u5173\\u6570\\u636E\\uFF0C\\u5E76\\u9632\\u6B62\\u4E0E\\u5176\\u4ED6\\u53D8\\u91CF\\u53D1\\u751F\\u547D\\u540D\\u51B2\\u7A81\\u3002\\u793A\\u4F8B\\u5305\\u62EC \",(0,e.jsx)(n.code,{children:\"Math.PI\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"Math.SQRT2\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8F85\\u52A9\\u51FD\\u6570\"}),\"\\uFF1A\\u9759\\u6001\\u65B9\\u6CD5\\u53EF\\u7528\\u4F5C\\u5BF9\\u7C7B\\u672C\\u8EAB\\u6216\\u5176\\u5B9E\\u4F8B\\u8FDB\\u884C\\u64CD\\u4F5C\\u7684\\u8F85\\u52A9\\u51FD\\u6570\\u3002\\u8FD9\\u53EF\\u4EE5\\u901A\\u8FC7\\u5C06\\u5B9E\\u7528\\u7A0B\\u5E8F\\u903B\\u8F91\\u4E0E\\u7C7B\\u7684\\u6838\\u5FC3\\u529F\\u80FD\\u5206\\u5F00\\u6765\\u63D0\\u9AD8\\u4EE3\\u7801\\u7684\\u53EF\\u8BFB\\u6027\\u548C\\u53EF\\u7EF4\\u62A4\\u6027\\u3002\\u5E38\\u7528\\u9759\\u6001\\u65B9\\u6CD5\\u7684\\u793A\\u4F8B\\u5305\\u62EC \",(0,e.jsx)(n.code,{children:\"Object.assign()\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"Math.max()\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5355\\u4F8B\\u6A21\\u5F0F\"}),\"\\uFF1A\\u5728\\u6781\\u5C11\\u6570\\u60C5\\u51B5\\u4E0B\\uFF0C\\u9759\\u6001\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u53EF\\u7528\\u4E8E\\u5B9E\\u73B0\\u5355\\u4F8B\\u6A21\\u5F0F\\uFF0C\\u5176\\u4E2D\\u53EA\\u5B58\\u5728\\u4E00\\u4E2A\\u7C7B\\u7684\\u5B9E\\u4F8B\\u3002\\u4F46\\u662F\\uFF0C\\u8FD9\\u79CD\\u6A21\\u5F0F\\u53EF\\u80FD\\u96BE\\u4EE5\\u7BA1\\u7406\\uFF0C\\u901A\\u5E38\\u4E0D\\u9F13\\u52B1\\u4F7F\\u7528\\uFF0C\\u800C\\u503E\\u5411\\u4E8E\\u4F7F\\u7528\\u66F4\\u73B0\\u4EE3\\u7684\\u4F9D\\u8D56\\u6CE8\\u5165\\u6280\\u672F\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u9759\\u6001\\u7C7B\\u6210\\u5458\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u9759\\u6001\\u7C7B\\u6210\\u5458\\uFF08\\u5C5E\\u6027/\\u65B9\\u6CD5\\uFF09\\u4E0D\\u4E0E\\u7C7B\\u7684\\u7279\\u5B9A\\u5B9E\\u4F8B\\u76F8\\u5173\\u8054\\uFF0C\\u5E76\\u4E14\\u65E0\\u8BBA\\u54EA\\u4E2A\\u5B9E\\u4F8B\\u5F15\\u7528\\u5B83\\uFF0C\\u90FD\\u5177\\u6709\\u76F8\\u540C\\u7684\\u503C\\u3002\\u9759\\u6001\\u5C5E\\u6027\\u901A\\u5E38\\u662F\\u914D\\u7F6E\\u53D8\\u91CF\\uFF0C\\u9759\\u6001\\u65B9\\u6CD5\\u901A\\u5E38\\u662F\\u7EAF\\u5B9E\\u7528\\u7A0B\\u5E8F\\u51FD\\u6570\\uFF0C\\u4E0D\\u4F9D\\u8D56\\u4E8E\\u5B9E\\u4F8B\\u7684\\u72B6\\u6001\\u3002\\u6B64\\u7C7B\\u5C5E\\u6027\\u6709\\u4E00\\u4E2A\\u524D\\u7F6E\\u7684 \",(0,e.jsx)(n.code,{children:\"static\"}),\" \\u5173\\u952E\\u5B57\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Car {\n  static noOfWheels = 4;\n  static compare() {\n    return 'static method has been called.';\n  }\n}\n\nconsole.log(Car.noOfWheels); // Output: 4\nconsole.log(Car.compare()); // Output: static method has been called.\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9759\\u6001\\u6210\\u5458\\u4E0D\\u80FD\\u88AB\\u7C7B\\u7684\\u7279\\u5B9A\\u5B9E\\u4F8B\\u8BBF\\u95EE\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Car {\n  static noOfWheels = 4;\n  static compare() {\n    return 'static method has been called.';\n  }\n}\n\nconst car = new Car();\nconsole.log(car.noOfWheels); // Output: undefined\nconsole.log(car.compare()); // Error: TypeError: car.compare is not a function\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"Math\"}),\" \\u7C7B\\u662F\\u4F7F\\u7528\\u9759\\u6001\\u6210\\u5458\\u7684\\u5E38\\u89C1\\u5E93\\u7684\\u4E00\\u4E2A\\u5F88\\u597D\\u7684\\u4F8B\\u5B50\\u3002JavaScript \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"Math\"}),\" \\u7C7B\\u662F\\u4E00\\u4E2A\\u5185\\u7F6E\\u5BF9\\u8C61\\uFF0C\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u7EC4\\u6570\\u5B66\\u5E38\\u91CF\\u548C\\u51FD\\u6570\\u3002\\u5B83\\u662F\\u4E00\\u4E2A\\u9759\\u6001\\u7C7B\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u7684\\u6240\\u6709\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u90FD\\u662F\\u9759\\u6001\\u7684\\u3002\\u4EE5\\u4E0B\\u662F \",(0,e.jsx)(n.code,{children:\"Math\"}),\" \\u7C7B\\u5982\\u4F55\\u4F7F\\u7528\\u9759\\u6001\\u6210\\u5458\\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`console.log(Math.PI); // Output: 3.141592653589793\nconsole.log(Math.abs(-5)); // Output: 5\nconsole.log(Math.max(1, 2, 3)); // Output: 3\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"Math.PI\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"Math.abs()\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"Math.max()\"}),\" \\u90FD\\u662F \",(0,e.jsx)(n.code,{children:\"Math\"}),\" \\u7C7B\\u7684\\u9759\\u6001\\u6210\\u5458\\u3002\\u5B83\\u4EEC\\u53EF\\u4EE5\\u76F4\\u63A5\\u5728 \",(0,e.jsx)(n.code,{children:\"Math\"}),\" \\u5BF9\\u8C61\\u4E0A\\u8BBF\\u95EE\\uFF0C\\u800C\\u65E0\\u9700\\u521B\\u5EFA\\u7C7B\\u7684\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F7F\\u7528\\u9759\\u6001\\u7C7B\\u6210\\u5458\\u7684\\u539F\\u56E0\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9E\\u7528\\u51FD\\u6570\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u9759\\u6001\\u7C7B\\u6210\\u5458\\u53EF\\u7528\\u4E8E\\u5B9A\\u4E49\\u4E0D\\u9700\\u8981\\u4EFB\\u4F55\\u7279\\u5B9A\\u4E8E\\u5B9E\\u4F8B\\uFF08\\u4E0D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\uFF09\\u6570\\u636E\\u6216\\u884C\\u4E3A\\u7684\\u5B9E\\u7528\\u51FD\\u6570\\u3002\\u4F8B\\u5982\\uFF0C\\u60A8\\u53EF\\u80FD\\u6709\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"Arithmetic\"}),\" \\u7C7B\\uFF0C\\u5176\\u4E2D\\u5305\\u542B\\u7528\\u4E8E\\u5E38\\u89C1\\u6570\\u5B66\\u8FD0\\u7B97\\u7684\\u9759\\u6001\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Arithmetic {\n  static add(a, b) {\n    return a + b;\n  }\n  static subtract(a, b) {\n    return a - b;\n  }\n}\n\nconsole.log(Arithmetic.add(2, 3)); // Output: 5\nconsole.log(Arithmetic.subtract(5, 2)); // Output: 3\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5355\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9759\\u6001\\u7C7B\\u6210\\u5458\\u53EF\\u7528\\u4E8E\\u5B9E\\u73B0\\u5355\\u4F8B\\u6A21\\u5F0F\\uFF0C\\u5728\\u5355\\u4F8B\\u6A21\\u5F0F\\u4E2D\\uFF0C\\u60A8\\u5E0C\\u671B\\u786E\\u4FDD\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u53EA\\u5B58\\u5728\\u4E00\\u4E2A\\u7C7B\\u7684\\u5B9E\\u4F8B\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Singleton {\n  static instance;\n\n  static getInstance() {\n    if (!this.instance) {\n      this.instance = new Singleton();\n    }\n    return this.instance;\n  }\n}\n\nconst singleton1 = Singleton.getInstance();\nconst singleton2 = Singleton.getInstance();\n\nconsole.log(singleton1 === singleton2); // Output: true\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u914D\\u7F6E\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9759\\u6001\\u7C7B\\u6210\\u5458\\u53EF\\u7528\\u4E8E\\u5B58\\u50A8\\u5728\\u7C7B\\u7684\\u6240\\u6709\\u5B9E\\u4F8B\\u4E4B\\u95F4\\u5171\\u4EAB\\u7684\\u914D\\u7F6E\\u6216\\u8BBE\\u7F6E\\u3002\\u8FD9\\u5BF9\\u4E8E API \\u5BC6\\u94A5\\u3001\\u529F\\u80FD\\u6807\\u5FD7\\u6216\\u5176\\u4ED6\\u5168\\u5C40\\u8BBE\\u7F6E\\u975E\\u5E38\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Config {\n  static API_KEY = 'your-api-key';\n  static FEATURE_FLAG = true;\n}\n\nconsole.log(Config.API_KEY); // Output: 'your-api-key'\nconsole.log(Config.FEATURE_FLAG); // Output: true\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6027\\u80FD\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u67D0\\u4E9B\\u60C5\\u51B5\\u4E0B\\uFF0C\\u4F7F\\u7528\\u9759\\u6001\\u7C7B\\u6210\\u5458\\u53EF\\u4EE5\\u901A\\u8FC7\\u51CF\\u5C11\\u5E94\\u7528\\u7A0B\\u5E8F\\u4F7F\\u7528\\u7684\\u5185\\u5B58\\u91CF\\u6765\\u63D0\\u9AD8\\u6027\\u80FD\\u3002\\u8FD9\\u662F\\u56E0\\u4E3A\\u9759\\u6001\\u7C7B\\u6210\\u5458\\u5728\\u7C7B\\u7684\\u6240\\u6709\\u5B9E\\u4F8B\\u4E4B\\u95F4\\u5171\\u4EAB\\uFF0C\\u800C\\u4E0D\\u662F\\u4E3A\\u6BCF\\u4E2A\\u5B9E\\u4F8B\\u590D\\u5236\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static\",children:\"\\u9759\\u6001\\u65B9\\u6CD5\\u548C\\u5C5E\\u6027 | MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/static-properties-methods\",children:\"\\u9759\\u6001\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5 | Javascript.info\"})}),`\n`]})]})}function v(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,Object.assign({},c,{children:(0,e.jsx)(h,c)})):h(c)}var C=v;return b(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var M=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),O=(c,n)=>{for(var t in n)l(c,t,{get:n[t],enumerable:!0})},i=(c,n,t,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of g(n))!f.call(c,r)&&r!==t&&l(c,r,{get:()=>n[r],enumerable:!(a=p(n,r))||a.enumerable});return c};var b=(c,n,t)=>(t=c!=null?u(m(c)):{},i(n||!c||!c.__esModule?l(t,\"default\",{value:c,enumerable:!0}):t,c)),j=c=>i(l({},\"__esModule\",{value:!0}),c);var s=M((A,o)=>{o.exports=_jsx_runtime});var C={};O(C,{default:()=>d,frontmatter:()=>v});var e=b(s()),v={title:\"\\u4E3A\\u4EC0\\u4E48\\u4F60\\u53EF\\u80FD\\u60F3\\u8981\\u5728 JavaScript \\u4E2D\\u521B\\u5EFA\\u9759\\u6001\\u7C7B\\u6210\\u5458\\uFF1F\"};function h(c){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...c.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u9759\\u6001\\u7C7B\\u6210\\u5458\\uFF08\\u5C5E\\u6027/\\u65B9\\u6CD5\\uFF09\\u6709\\u4E00\\u4E2A\\u524D\\u7F6E\\u7684 \",(0,e.jsx)(n.code,{children:\"static\"}),\" \\u5173\\u952E\\u5B57\\u3002\\u6B64\\u7C7B\\u6210\\u5458\\u4E0D\\u80FD\\u76F4\\u63A5\\u5728\\u7C7B\\u7684\\u5B9E\\u4F8B\\u4E0A\\u8BBF\\u95EE\\u3002\\u76F8\\u53CD\\uFF0C\\u5B83\\u4EEC\\u5728\\u7C7B\\u672C\\u8EAB\\u4E0A\\u88AB\\u8BBF\\u95EE\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Car {\n  static noOfWheels = 4;\n  static compare() {\n    return 'Static method has been called.';\n  }\n}\n\nconsole.log(Car.noOfWheels); // 4\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9759\\u6001\\u6210\\u5458\\u5728\\u4EE5\\u4E0B\\u60C5\\u51B5\\u4E0B\\u5F88\\u6709\\u7528\\uFF1A\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u547D\\u540D\\u7A7A\\u95F4\\u7EC4\\u7EC7\"}),\"\\uFF1A\\u9759\\u6001\\u5C5E\\u6027\\u53EF\\u7528\\u4E8E\\u5B9A\\u4E49\\u7279\\u5B9A\\u4E8E\\u7C7B\\u7684\\u5E38\\u91CF\\u6216\\u914D\\u7F6E\\u503C\\u3002\\u8FD9\\u6709\\u52A9\\u4E8E\\u5728\\u7C7B\\u547D\\u540D\\u7A7A\\u95F4\\u5185\\u7EC4\\u7EC7\\u76F8\\u5173\\u6570\\u636E\\uFF0C\\u5E76\\u9632\\u6B62\\u4E0E\\u5176\\u4ED6\\u53D8\\u91CF\\u53D1\\u751F\\u547D\\u540D\\u51B2\\u7A81\\u3002\\u793A\\u4F8B\\u5305\\u62EC \",(0,e.jsx)(n.code,{children:\"Math.PI\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"Math.SQRT2\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u8F85\\u52A9\\u51FD\\u6570\"}),\"\\uFF1A\\u9759\\u6001\\u65B9\\u6CD5\\u53EF\\u7528\\u4F5C\\u5BF9\\u7C7B\\u672C\\u8EAB\\u6216\\u5176\\u5B9E\\u4F8B\\u8FDB\\u884C\\u64CD\\u4F5C\\u7684\\u8F85\\u52A9\\u51FD\\u6570\\u3002\\u8FD9\\u53EF\\u4EE5\\u901A\\u8FC7\\u5C06\\u5B9E\\u7528\\u7A0B\\u5E8F\\u903B\\u8F91\\u4E0E\\u7C7B\\u7684\\u6838\\u5FC3\\u529F\\u80FD\\u5206\\u5F00\\u6765\\u63D0\\u9AD8\\u4EE3\\u7801\\u7684\\u53EF\\u8BFB\\u6027\\u548C\\u53EF\\u7EF4\\u62A4\\u6027\\u3002\\u5E38\\u7528\\u9759\\u6001\\u65B9\\u6CD5\\u7684\\u793A\\u4F8B\\u5305\\u62EC \",(0,e.jsx)(n.code,{children:\"Object.assign()\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"Math.max()\"}),\"\\u3002\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"\\u5355\\u4F8B\\u6A21\\u5F0F\"}),\"\\uFF1A\\u5728\\u6781\\u5C11\\u6570\\u60C5\\u51B5\\u4E0B\\uFF0C\\u9759\\u6001\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u53EF\\u7528\\u4E8E\\u5B9E\\u73B0\\u5355\\u4F8B\\u6A21\\u5F0F\\uFF0C\\u5176\\u4E2D\\u53EA\\u5B58\\u5728\\u4E00\\u4E2A\\u7C7B\\u7684\\u5B9E\\u4F8B\\u3002\\u4F46\\u662F\\uFF0C\\u8FD9\\u79CD\\u6A21\\u5F0F\\u53EF\\u80FD\\u96BE\\u4EE5\\u7BA1\\u7406\\uFF0C\\u901A\\u5E38\\u4E0D\\u9F13\\u52B1\\u4F7F\\u7528\\uFF0C\\u800C\\u503E\\u5411\\u4E8E\\u4F7F\\u7528\\u66F4\\u73B0\\u4EE3\\u7684\\u4F9D\\u8D56\\u6CE8\\u5165\\u6280\\u672F\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u9759\\u6001\\u7C7B\\u6210\\u5458\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u9759\\u6001\\u7C7B\\u6210\\u5458\\uFF08\\u5C5E\\u6027/\\u65B9\\u6CD5\\uFF09\\u4E0D\\u4E0E\\u7C7B\\u7684\\u7279\\u5B9A\\u5B9E\\u4F8B\\u76F8\\u5173\\u8054\\uFF0C\\u5E76\\u4E14\\u65E0\\u8BBA\\u54EA\\u4E2A\\u5B9E\\u4F8B\\u5F15\\u7528\\u5B83\\uFF0C\\u90FD\\u5177\\u6709\\u76F8\\u540C\\u7684\\u503C\\u3002\\u9759\\u6001\\u5C5E\\u6027\\u901A\\u5E38\\u662F\\u914D\\u7F6E\\u53D8\\u91CF\\uFF0C\\u9759\\u6001\\u65B9\\u6CD5\\u901A\\u5E38\\u662F\\u7EAF\\u5B9E\\u7528\\u7A0B\\u5E8F\\u51FD\\u6570\\uFF0C\\u4E0D\\u4F9D\\u8D56\\u4E8E\\u5B9E\\u4F8B\\u7684\\u72B6\\u6001\\u3002\\u6B64\\u7C7B\\u5C5E\\u6027\\u6709\\u4E00\\u4E2A\\u524D\\u7F6E\\u7684 \",(0,e.jsx)(n.code,{children:\"static\"}),\" \\u5173\\u952E\\u5B57\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Car {\n  static noOfWheels = 4;\n  static compare() {\n    return 'static method has been called.';\n  }\n}\n\nconsole.log(Car.noOfWheels); // Output: 4\nconsole.log(Car.compare()); // Output: static method has been called.\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9759\\u6001\\u6210\\u5458\\u4E0D\\u80FD\\u88AB\\u7C7B\\u7684\\u7279\\u5B9A\\u5B9E\\u4F8B\\u8BBF\\u95EE\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Car {\n  static noOfWheels = 4;\n  static compare() {\n    return 'static method has been called.';\n  }\n}\n\nconst car = new Car();\nconsole.log(car.noOfWheels); // Output: undefined\nconsole.log(car.compare()); // Error: TypeError: car.compare is not a function\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"JavaScript \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"Math\"}),\" \\u7C7B\\u662F\\u4F7F\\u7528\\u9759\\u6001\\u6210\\u5458\\u7684\\u5E38\\u89C1\\u5E93\\u7684\\u4E00\\u4E2A\\u5F88\\u597D\\u7684\\u4F8B\\u5B50\\u3002JavaScript \\u4E2D\\u7684 \",(0,e.jsx)(n.code,{children:\"Math\"}),\" \\u7C7B\\u662F\\u4E00\\u4E2A\\u5185\\u7F6E\\u5BF9\\u8C61\\uFF0C\\u5B83\\u63D0\\u4F9B\\u4E86\\u4E00\\u7EC4\\u6570\\u5B66\\u5E38\\u91CF\\u548C\\u51FD\\u6570\\u3002\\u5B83\\u662F\\u4E00\\u4E2A\\u9759\\u6001\\u7C7B\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u7684\\u6240\\u6709\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5\\u90FD\\u662F\\u9759\\u6001\\u7684\\u3002\\u4EE5\\u4E0B\\u662F \",(0,e.jsx)(n.code,{children:\"Math\"}),\" \\u7C7B\\u5982\\u4F55\\u4F7F\\u7528\\u9759\\u6001\\u6210\\u5458\\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`console.log(Math.PI); // Output: 3.141592653589793\nconsole.log(Math.abs(-5)); // Output: 5\nconsole.log(Math.max(1, 2, 3)); // Output: 3\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u5728\\u6B64\\u793A\\u4F8B\\u4E2D\\uFF0C\",(0,e.jsx)(n.code,{children:\"Math.PI\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"Math.abs()\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"Math.max()\"}),\" \\u90FD\\u662F \",(0,e.jsx)(n.code,{children:\"Math\"}),\" \\u7C7B\\u7684\\u9759\\u6001\\u6210\\u5458\\u3002\\u5B83\\u4EEC\\u53EF\\u4EE5\\u76F4\\u63A5\\u5728 \",(0,e.jsx)(n.code,{children:\"Math\"}),\" \\u5BF9\\u8C61\\u4E0A\\u8BBF\\u95EE\\uFF0C\\u800C\\u65E0\\u9700\\u521B\\u5EFA\\u7C7B\\u7684\\u5B9E\\u4F8B\\u3002\"]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F7F\\u7528\\u9759\\u6001\\u7C7B\\u6210\\u5458\\u7684\\u539F\\u56E0\"}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5B9E\\u7528\\u51FD\\u6570\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u9759\\u6001\\u7C7B\\u6210\\u5458\\u53EF\\u7528\\u4E8E\\u5B9A\\u4E49\\u4E0D\\u9700\\u8981\\u4EFB\\u4F55\\u7279\\u5B9A\\u4E8E\\u5B9E\\u4F8B\\uFF08\\u4E0D\\u4F7F\\u7528 \",(0,e.jsx)(n.code,{children:\"this\"}),\"\\uFF09\\u6570\\u636E\\u6216\\u884C\\u4E3A\\u7684\\u5B9E\\u7528\\u51FD\\u6570\\u3002\\u4F8B\\u5982\\uFF0C\\u60A8\\u53EF\\u80FD\\u6709\\u4E00\\u4E2A \",(0,e.jsx)(n.code,{children:\"Arithmetic\"}),\" \\u7C7B\\uFF0C\\u5176\\u4E2D\\u5305\\u542B\\u7528\\u4E8E\\u5E38\\u89C1\\u6570\\u5B66\\u8FD0\\u7B97\\u7684\\u9759\\u6001\\u65B9\\u6CD5\\u3002\"]}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Arithmetic {\n  static add(a, b) {\n    return a + b;\n  }\n  static subtract(a, b) {\n    return a - b;\n  }\n}\n\nconsole.log(Arithmetic.add(2, 3)); // Output: 5\nconsole.log(Arithmetic.subtract(5, 2)); // Output: 3\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u5355\\u4F8B\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9759\\u6001\\u7C7B\\u6210\\u5458\\u53EF\\u7528\\u4E8E\\u5B9E\\u73B0\\u5355\\u4F8B\\u6A21\\u5F0F\\uFF0C\\u5728\\u5355\\u4F8B\\u6A21\\u5F0F\\u4E2D\\uFF0C\\u60A8\\u5E0C\\u671B\\u786E\\u4FDD\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E2D\\u53EA\\u5B58\\u5728\\u4E00\\u4E2A\\u7C7B\\u7684\\u5B9E\\u4F8B\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Singleton {\n  static instance;\n\n  static getInstance() {\n    if (!this.instance) {\n      this.instance = new Singleton();\n    }\n    return this.instance;\n  }\n}\n\nconst singleton1 = Singleton.getInstance();\nconst singleton2 = Singleton.getInstance();\n\nconsole.log(singleton1 === singleton2); // Output: true\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u914D\\u7F6E\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u9759\\u6001\\u7C7B\\u6210\\u5458\\u53EF\\u7528\\u4E8E\\u5B58\\u50A8\\u5728\\u7C7B\\u7684\\u6240\\u6709\\u5B9E\\u4F8B\\u4E4B\\u95F4\\u5171\\u4EAB\\u7684\\u914D\\u7F6E\\u6216\\u8BBE\\u7F6E\\u3002\\u8FD9\\u5BF9\\u4E8E API \\u5BC6\\u94A5\\u3001\\u529F\\u80FD\\u6807\\u5FD7\\u6216\\u5176\\u4ED6\\u5168\\u5C40\\u8BBE\\u7F6E\\u975E\\u5E38\\u6709\\u7528\\u3002\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`class Config {\n  static API_KEY = 'your-api-key';\n  static FEATURE_FLAG = true;\n}\n\nconsole.log(Config.API_KEY); // Output: 'your-api-key'\nconsole.log(Config.FEATURE_FLAG); // Output: true\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"\\u6027\\u80FD\"}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5728\\u67D0\\u4E9B\\u60C5\\u51B5\\u4E0B\\uFF0C\\u4F7F\\u7528\\u9759\\u6001\\u7C7B\\u6210\\u5458\\u53EF\\u4EE5\\u901A\\u8FC7\\u51CF\\u5C11\\u5E94\\u7528\\u7A0B\\u5E8F\\u4F7F\\u7528\\u7684\\u5185\\u5B58\\u91CF\\u6765\\u63D0\\u9AD8\\u6027\\u80FD\\u3002\\u8FD9\\u662F\\u56E0\\u4E3A\\u9759\\u6001\\u7C7B\\u6210\\u5458\\u5728\\u7C7B\\u7684\\u6240\\u6709\\u5B9E\\u4F8B\\u4E4B\\u95F4\\u5171\\u4EAB\\uFF0C\\u800C\\u4E0D\\u662F\\u4E3A\\u6BCF\\u4E2A\\u5B9E\\u4F8B\\u590D\\u5236\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5EF6\\u4F38\\u9605\\u8BFB\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static\",children:\"\\u9759\\u6001\\u65B9\\u6CD5\\u548C\\u5C5E\\u6027 | MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/static-properties-methods\",children:\"\\u9759\\u6001\\u5C5E\\u6027\\u548C\\u65B9\\u6CD5 | Javascript.info\"})}),`\n`]})]})}function d(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,{...c,children:(0,e.jsx)(h,{...c})}):h(c)}return j(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/why-you-would-use-a-srcset-attribute-in-an-image-tag/en-US.json b/apps/web/src/__generated__/questions/quiz/why-you-would-use-a-srcset-attribute-in-an-image-tag/en-US.json
index aff060b76..a99fd1452 100644
--- a/apps/web/src/__generated__/questions/quiz/why-you-would-use-a-srcset-attribute-in-an-image-tag/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/why-you-would-use-a-srcset-attribute-in-an-image-tag/en-US.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var p=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var n in e)o(t,n,{get:e[n],enumerable:!0})},l=(t,e,n,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of g(e))!w.call(t,s)&&s!==n&&o(t,s,{get:()=>e[s],enumerable:!(r=u(e,s))||r.enumerable});return t};var f=(t,e,n)=>(n=t!=null?d(m(t)):{},l(e||!t||!t.__esModule?o(n,\"default\",{value:t,enumerable:!0}):n,t)),y=t=>l(o({},\"__esModule\",{value:!0}),t);var c=p((M,a)=>{a.exports=_jsx_runtime});var _={};b(_,{default:()=>j,frontmatter:()=>v});var i=f(c()),v={title:\"Why you would use a `srcset` attribute in an image tag?\",subtitle:\"Explain the process the browser uses when evaluating the content of this attribute.\"};function h(t){let e=Object.assign({p:\"p\",code:\"code\",ul:\"ul\",li:\"li\"},t.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(e.p,{children:[\"You would use the \",(0,i.jsx)(e.code,{children:\"srcset\"}),\" attribute when you want to serve different images to users depending on their device display width - serve higher quality images to devices with retina display enhances the user experience while serving lower resolution images to low-end devices increase performance and decrease data wastage (because serving a larger image will not have any visible difference). For example: \",(0,i.jsx)(e.code,{children:'<img srcset=\"small.jpg 500w, medium.jpg 1000w, large.jpg 2000w\" src=\"...\" alt=\"\">'}),\" tells the browser to display the small, medium or large \",(0,i.jsx)(e.code,{children:\".jpg\"}),\" graphic depending on the client's resolution. The first value is the image name and the second is the width of the image in pixels. For a device width of 320px, the following calculations are made:\"]}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"500 / 320 = 1.5625\"}),`\n`,(0,i.jsx)(e.li,{children:\"1000 / 320 = 3.125\"}),`\n`,(0,i.jsx)(e.li,{children:\"2000 / 320 = 6.25\"}),`\n`]}),`\n`,(0,i.jsxs)(e.p,{children:[\"If the client's resolution is 1x, 1.5625 is the closest, and \",(0,i.jsx)(e.code,{children:\"500w\"}),\" corresponding to \",(0,i.jsx)(e.code,{children:\"small.jpg\"}),\" will be selected by the browser.\"]}),`\n`,(0,i.jsx)(e.p,{children:\"If the resolution is retina (2x), the browser will use the closest resolution above the minimum. Meaning it will not choose the 500w (1.5625) because it is greater than 1 and the image might look bad. The browser would then choose the image with a resulting ratio closer to 2 which is 1000w (3.125).\"}),`\n`,(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.code,{children:\"srcset\"}),\"s solve the problem whereby you want to serve smaller image files to narrow screen devices, as they don't need huge images like desktop displays do \\u2014 and also optionally that you want to serve different resolution images to high density/low-density screens.\"]})]})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,Object.assign({},t,{children:(0,i.jsx)(h,t)})):h(t)}var j=x;return y(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var n in e)o(t,n,{get:e[n],enumerable:!0})},l=(t,e,n,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!p.call(t,s)&&s!==n&&o(t,s,{get:()=>e[s],enumerable:!(r=g(e,s))||r.enumerable});return t};var y=(t,e,n)=>(n=t!=null?u(w(t)):{},l(e||!t||!t.__esModule?o(n,\"default\",{value:t,enumerable:!0}):n,t)),v=t=>l(o({},\"__esModule\",{value:!0}),t);var h=f((F,a)=>{a.exports=_jsx_runtime});var j={};b(j,{default:()=>d,frontmatter:()=>x});var i=y(h()),x={title:\"Why you would use a `srcset` attribute in an image tag?\",subtitle:\"Explain the process the browser uses when evaluating the content of this attribute.\"};function c(t){let e={code:\"code\",li:\"li\",p:\"p\",ul:\"ul\",...t.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(e.p,{children:[\"You would use the \",(0,i.jsx)(e.code,{children:\"srcset\"}),\" attribute when you want to serve different images to users depending on their device display width - serve higher quality images to devices with retina display enhances the user experience while serving lower resolution images to low-end devices increase performance and decrease data wastage (because serving a larger image will not have any visible difference). For example: \",(0,i.jsx)(e.code,{children:'<img srcset=\"small.jpg 500w, medium.jpg 1000w, large.jpg 2000w\" src=\"...\" alt=\"\">'}),\" tells the browser to display the small, medium or large \",(0,i.jsx)(e.code,{children:\".jpg\"}),\" graphic depending on the client's resolution. The first value is the image name and the second is the width of the image in pixels. For a device width of 320px, the following calculations are made:\"]}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"500 / 320 = 1.5625\"}),`\n`,(0,i.jsx)(e.li,{children:\"1000 / 320 = 3.125\"}),`\n`,(0,i.jsx)(e.li,{children:\"2000 / 320 = 6.25\"}),`\n`]}),`\n`,(0,i.jsxs)(e.p,{children:[\"If the client's resolution is 1x, 1.5625 is the closest, and \",(0,i.jsx)(e.code,{children:\"500w\"}),\" corresponding to \",(0,i.jsx)(e.code,{children:\"small.jpg\"}),\" will be selected by the browser.\"]}),`\n`,(0,i.jsx)(e.p,{children:\"If the resolution is retina (2x), the browser will use the closest resolution above the minimum. Meaning it will not choose the 500w (1.5625) because it is greater than 1 and the image might look bad. The browser would then choose the image with a resulting ratio closer to 2 which is 1000w (3.125).\"}),`\n`,(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.code,{children:\"srcset\"}),\"s solve the problem whereby you want to serve smaller image files to narrow screen devices, as they don't need huge images like desktop displays do \\u2014 and also optionally that you want to serve different resolution images to high density/low-density screens.\"]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(c,{...t})}):c(t)}return v(j);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/why-you-would-use-a-srcset-attribute-in-an-image-tag/pt-BR.json b/apps/web/src/__generated__/questions/quiz/why-you-would-use-a-srcset-attribute-in-an-image-tag/pt-BR.json
index cd9c28c2f..78a732fe3 100644
--- a/apps/web/src/__generated__/questions/quiz/why-you-would-use-a-srcset-attribute-in-an-image-tag/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/why-you-would-use-a-srcset-attribute-in-an-image-tag/pt-BR.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/pt-BR.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var h=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),f=(a,e)=>{for(var r in e)s(a,r,{get:e[r],enumerable:!0})},d=(a,e,r,n)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!x.call(a,i)&&i!==r&&s(a,i,{get:()=>e[i],enumerable:!(n=u(e,i))||n.enumerable});return a};var v=(a,e,r)=>(r=a!=null?l(g(a)):{},d(e||!a||!a.__esModule?s(r,\"default\",{value:a,enumerable:!0}):r,a)),j=a=>d(s({},\"__esModule\",{value:!0}),a);var m=h((M,t)=>{t.exports=_jsx_runtime});var _={};f(_,{default:()=>w,frontmatter:()=>q});var o=v(m()),q={title:\"Por que voc\\xEA usaria um atributo 'srcset' em uma tag de imagem?\",subtitle:\"Explique o processo que o navegador usa ao avaliar o conte\\xFAdo deste atributo.\"};function c(a){let e=Object.assign({p:\"p\",code:\"code\",ul:\"ul\",li:\"li\"},a.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Voc\\xEA usaria o atributo \",(0,o.jsx)(e.code,{children:\"srcset\"}),\" quando desejar fornecer imagens diferentes aos usu\\xE1rios, dependendo da largura da tela de seus dispositivos - fornecer imagens de alta qualidade para dispositivos com tela Retina melhora a experi\\xEAncia do usu\\xE1rio, enquanto fornecer imagens de resolu\\xE7\\xE3o mais baixa para dispositivos de baixo desempenho aumenta o desempenho e diminui o desperd\\xEDcio de dados (pois fornecer uma imagem maior n\\xE3o ter\\xE1 nenhuma diferen\\xE7a vis\\xEDvel). Por exemplo: \",(0,o.jsx)(e.code,{children:'<img srcset=\"small.jpg 500w, medium.jpg 1000w, large.jpg 2000w\" src=\"...\" alt=\"\">'}),\" diz ao navegador para exibir o gr\\xE1fico pequeno, m\\xE9dio ou grande \",(0,o.jsx)(e.code,{children:\".jpg\"}),\" dependendo da resolu\\xE7\\xE3o do cliente. O primeiro valor \\xE9 o nome da imagem e o segundo \\xE9 a largura da imagem em pixels. Para uma largura de dispositivo de 320px, s\\xE3o feitos os seguintes c\\xE1lculos:\"]}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"500 / 320 = 1.5625\"}),`\n`,(0,o.jsx)(e.li,{children:\"1000 / 320 = 3.125\"}),`\n`,(0,o.jsx)(e.li,{children:\"2000 / 320 = 6.25\"}),`\n`]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Se a resolu\\xE7\\xE3o do cliente for 1x, a 1.5625 \\xE9 a mais pr\\xF3xima e a op\\xE7\\xE3o \",(0,o.jsx)(e.code,{children:\"500w\"}),\" correspondente a \",(0,o.jsx)(e.code,{children:\"small.jpg\"}),\" ser\\xE1 selecionada pelo navegador.\"]}),`\n`,(0,o.jsx)(e.p,{children:\"Se a resolu\\xE7\\xE3o for retina (2x), o navegador usar\\xE1 a resolu\\xE7\\xE3o mais pr\\xF3xima acima do m\\xEDnimo. Isso significa que ele n\\xE3o escolher\\xE1 o 500w (1.5625) porque \\xE9 maior que 1 e a imagem pode ficar ruim. O navegador escolheria a imagem com uma taxa resultante mais pr\\xF3xima de 2, que \\xE9 1000w (3.125).\"}),`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"srcset\"}),\"s resolvem o problema de voc\\xEA querer fornecer arquivos de imagem menores para dispositivos de tela estreita, j\\xE1 que eles n\\xE3o precisam de imagens grandes como as telas de desktop - e tamb\\xE9m opcionalmente que voc\\xEA deseja fornecer imagens de resolu\\xE7\\xE3o diferente para telas de alta densidade/baixa densidade.\"]})]})}function b(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,Object.assign({},a,{children:(0,o.jsx)(c,a)})):c(a)}var w=b;return j(_);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var f=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),v=(a,e)=>{for(var r in e)s(a,r,{get:e[r],enumerable:!0})},d=(a,e,r,n)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of g(e))!h.call(a,i)&&i!==r&&s(a,i,{get:()=>e[i],enumerable:!(n=p(e,i))||n.enumerable});return a};var q=(a,e,r)=>(r=a!=null?u(x(a)):{},d(e||!a||!a.__esModule?s(r,\"default\",{value:a,enumerable:!0}):r,a)),j=a=>d(s({},\"__esModule\",{value:!0}),a);var m=f((M,t)=>{t.exports=_jsx_runtime});var w={};v(w,{default:()=>c,frontmatter:()=>b});var o=q(m()),b={title:\"Por que voc\\xEA usaria um atributo 'srcset' em uma tag de imagem?\",subtitle:\"Explique o processo que o navegador usa ao avaliar o conte\\xFAdo deste atributo.\"};function l(a){let e={code:\"code\",li:\"li\",p:\"p\",ul:\"ul\",...a.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Voc\\xEA usaria o atributo \",(0,o.jsx)(e.code,{children:\"srcset\"}),\" quando desejar fornecer imagens diferentes aos usu\\xE1rios, dependendo da largura da tela de seus dispositivos - fornecer imagens de alta qualidade para dispositivos com tela Retina melhora a experi\\xEAncia do usu\\xE1rio, enquanto fornecer imagens de resolu\\xE7\\xE3o mais baixa para dispositivos de baixo desempenho aumenta o desempenho e diminui o desperd\\xEDcio de dados (pois fornecer uma imagem maior n\\xE3o ter\\xE1 nenhuma diferen\\xE7a vis\\xEDvel). Por exemplo: \",(0,o.jsx)(e.code,{children:'<img srcset=\"small.jpg 500w, medium.jpg 1000w, large.jpg 2000w\" src=\"...\" alt=\"\">'}),\" diz ao navegador para exibir o gr\\xE1fico pequeno, m\\xE9dio ou grande \",(0,o.jsx)(e.code,{children:\".jpg\"}),\" dependendo da resolu\\xE7\\xE3o do cliente. O primeiro valor \\xE9 o nome da imagem e o segundo \\xE9 a largura da imagem em pixels. Para uma largura de dispositivo de 320px, s\\xE3o feitos os seguintes c\\xE1lculos:\"]}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"500 / 320 = 1.5625\"}),`\n`,(0,o.jsx)(e.li,{children:\"1000 / 320 = 3.125\"}),`\n`,(0,o.jsx)(e.li,{children:\"2000 / 320 = 6.25\"}),`\n`]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Se a resolu\\xE7\\xE3o do cliente for 1x, a 1.5625 \\xE9 a mais pr\\xF3xima e a op\\xE7\\xE3o \",(0,o.jsx)(e.code,{children:\"500w\"}),\" correspondente a \",(0,o.jsx)(e.code,{children:\"small.jpg\"}),\" ser\\xE1 selecionada pelo navegador.\"]}),`\n`,(0,o.jsx)(e.p,{children:\"Se a resolu\\xE7\\xE3o for retina (2x), o navegador usar\\xE1 a resolu\\xE7\\xE3o mais pr\\xF3xima acima do m\\xEDnimo. Isso significa que ele n\\xE3o escolher\\xE1 o 500w (1.5625) porque \\xE9 maior que 1 e a imagem pode ficar ruim. O navegador escolheria a imagem com uma taxa resultante mais pr\\xF3xima de 2, que \\xE9 1000w (3.125).\"}),`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"srcset\"}),\"s resolvem o problema de voc\\xEA querer fornecer arquivos de imagem menores para dispositivos de tela estreita, j\\xE1 que eles n\\xE3o precisam de imagens grandes como as telas de desktop - e tamb\\xE9m opcionalmente que voc\\xEA deseja fornecer imagens de resolu\\xE7\\xE3o diferente para telas de alta densidade/baixa densidade.\"]})]})}function c(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,{...a,children:(0,o.jsx)(l,{...a})}):l(a)}return j(w);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/why-you-would-use-a-srcset-attribute-in-an-image-tag/zh-CN.json b/apps/web/src/__generated__/questions/quiz/why-you-would-use-a-srcset-attribute-in-an-image-tag/zh-CN.json
index 944d4547f..769bdc2e0 100644
--- a/apps/web/src/__generated__/questions/quiz/why-you-would-use-a-srcset-attribute-in-an-image-tag/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/why-you-would-use-a-srcset-attribute-in-an-image-tag/zh-CN.json
@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var j=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var t in e)l(n,t,{get:e[t],enumerable:!0})},s=(n,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!g.call(n,r)&&r!==t&&l(n,r,{get:()=>e[r],enumerable:!(i=h(e,r))||i.enumerable});return n};var w=(n,e,t)=>(t=n!=null?m(u(n)):{},s(e||!n||!n.__esModule?l(t,\"default\",{value:n,enumerable:!0}):t,n)),_=n=>s(l({},\"__esModule\",{value:!0}),n);var o=j((F,d)=>{d.exports=_jsx_runtime});var C={};x(C,{default:()=>M,frontmatter:()=>f});var c=w(o()),f={title:\"\\u4E3A\\u4EC0\\u4E48\\u8981\\u5728\\u56FE\\u50CF\\u6807\\u7B7E\\u4E2D\\u4F7F\\u7528 `srcset` \\u5C5E\\u6027\\uFF1F\",subtitle:\"\\u89E3\\u91CA\\u6D4F\\u89C8\\u5668\\u5728\\u8BC4\\u4F30\\u6B64\\u5C5E\\u6027\\u5185\\u5BB9\\u65F6\\u4F7F\\u7528\\u7684\\u8FC7\\u7A0B\\u3002\"};function a(n){let e=Object.assign({p:\"p\",code:\"code\",ul:\"ul\",li:\"li\"},n.components);return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(e.p,{children:[\"\\u5F53\\u60A8\\u5E0C\\u671B\\u6839\\u636E\\u7528\\u6237\\u7684\\u8BBE\\u5907\\u663E\\u793A\\u5BBD\\u5EA6\\u4E3A\\u7528\\u6237\\u63D0\\u4F9B\\u4E0D\\u540C\\u7684\\u56FE\\u50CF\\u65F6\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,c.jsx)(e.code,{children:\"srcset\"}),\" \\u5C5E\\u6027 - \\u4E3A\\u5177\\u6709\\u89C6\\u7F51\\u819C\\u663E\\u793A\\u5C4F\\u7684\\u8BBE\\u5907\\u63D0\\u4F9B\\u66F4\\u9AD8\\u8D28\\u91CF\\u7684\\u56FE\\u50CF\\u53EF\\u4EE5\\u589E\\u5F3A\\u7528\\u6237\\u4F53\\u9A8C\\uFF0C\\u800C\\u4E3A\\u4F4E\\u7AEF\\u8BBE\\u5907\\u63D0\\u4F9B\\u8F83\\u4F4E\\u5206\\u8FA8\\u7387\\u7684\\u56FE\\u50CF\\u53EF\\u4EE5\\u63D0\\u9AD8\\u6027\\u80FD\\u5E76\\u51CF\\u5C11\\u6570\\u636E\\u6D6A\\u8D39\\uFF08\\u56E0\\u4E3A\\u63D0\\u4F9B\\u66F4\\u5927\\u7684\\u56FE\\u50CF\\u4E0D\\u4F1A\\u6709\\u4EFB\\u4F55\\u53EF\\u89C1\\u7684\\u5DEE\\u5F02\\uFF09\\u3002\\u4F8B\\u5982\\uFF1A\",(0,c.jsx)(e.code,{children:'<img srcset=\"small.jpg 500w, medium.jpg 1000w, large.jpg 2000w\" src=\"...\" alt=\"\">'}),\" \\u544A\\u8BC9\\u6D4F\\u89C8\\u5668\\u6839\\u636E\\u5BA2\\u6237\\u7AEF\\u7684\\u5206\\u8FA8\\u7387\\u663E\\u793A small\\u3001medium \\u6216 large \",(0,c.jsx)(e.code,{children:\".jpg\"}),\" \\u56FE\\u50CF\\u3002\\u7B2C\\u4E00\\u4E2A\\u503C\\u662F\\u56FE\\u50CF\\u540D\\u79F0\\uFF0C\\u7B2C\\u4E8C\\u4E2A\\u503C\\u662F\\u56FE\\u50CF\\u7684\\u5BBD\\u5EA6\\uFF08\\u4EE5\\u50CF\\u7D20\\u4E3A\\u5355\\u4F4D\\uFF09\\u3002\\u5BF9\\u4E8E 320px \\u7684\\u8BBE\\u5907\\u5BBD\\u5EA6\\uFF0C\\u5C06\\u8FDB\\u884C\\u4EE5\\u4E0B\\u8BA1\\u7B97\\uFF1A\"]}),`\n`,(0,c.jsxs)(e.ul,{children:[`\n`,(0,c.jsx)(e.li,{children:\"500 / 320 = 1.5625\"}),`\n`,(0,c.jsx)(e.li,{children:\"1000 / 320 = 3.125\"}),`\n`,(0,c.jsx)(e.li,{children:\"2000 / 320 = 6.25\"}),`\n`]}),`\n`,(0,c.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u5BA2\\u6237\\u7AEF\\u7684\\u5206\\u8FA8\\u7387\\u4E3A 1x\\uFF0C\\u5219 1.5625 \\u6700\\u63A5\\u8FD1\\uFF0C\\u6D4F\\u89C8\\u5668\\u5C06\\u9009\\u62E9\\u4E0E \",(0,c.jsx)(e.code,{children:\"small.jpg\"}),\" \\u5BF9\\u5E94\\u7684 \",(0,c.jsx)(e.code,{children:\"500w\"}),\"\\u3002\"]}),`\n`,(0,c.jsx)(e.p,{children:\"\\u5982\\u679C\\u5206\\u8FA8\\u7387\\u662F\\u89C6\\u7F51\\u819C (2x)\\uFF0C\\u6D4F\\u89C8\\u5668\\u5C06\\u4F7F\\u7528\\u6700\\u63A5\\u8FD1\\u6700\\u5C0F\\u503C\\u7684\\u5206\\u8FA8\\u7387\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4E0D\\u4F1A\\u9009\\u62E9 500w (1.5625)\\uFF0C\\u56E0\\u4E3A\\u5B83\\u5927\\u4E8E 1\\uFF0C\\u5E76\\u4E14\\u56FE\\u50CF\\u53EF\\u80FD\\u770B\\u8D77\\u6765\\u5F88\\u7CDF\\u7CD5\\u3002\\u7136\\u540E\\uFF0C\\u6D4F\\u89C8\\u5668\\u5C06\\u9009\\u62E9\\u7ED3\\u679C\\u6BD4\\u7387\\u66F4\\u63A5\\u8FD1 2 \\u7684\\u56FE\\u50CF\\uFF0C\\u5373 1000w (3.125)\\u3002\"}),`\n`,(0,c.jsxs)(e.p,{children:[(0,c.jsx)(e.code,{children:\"srcset\"}),\" \\u89E3\\u51B3\\u4E86\\u60A8\\u5E0C\\u671B\\u4E3A\\u7A84\\u5C4F\\u8BBE\\u5907\\u63D0\\u4F9B\\u8F83\\u5C0F\\u56FE\\u50CF\\u6587\\u4EF6\\u7684\\u95EE\\u9898\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u4E0D\\u9700\\u8981\\u50CF\\u684C\\u9762\\u663E\\u793A\\u5668\\u90A3\\u6837\\u7684\\u5927\\u56FE\\u50CF\\uFF0C\\u5E76\\u4E14\\u8FD8\\u53EF\\u4EE5\\u9009\\u62E9\\u4E3A\\u9AD8\\u5BC6\\u5EA6/\\u4F4E\\u5BC6\\u5EA6\\u5C4F\\u5E55\\u63D0\\u4F9B\\u4E0D\\u540C\\u5206\\u8FA8\\u7387\\u7684\\u56FE\\u50CF\\u3002\"]})]})}function b(n={}){let{wrapper:e}=n.components||{};return e?(0,c.jsx)(e,Object.assign({},n,{children:(0,c.jsx)(a,n)})):a(n)}var M=b;return _(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var j=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),w=(n,e)=>{for(var r in e)t(n,r,{get:e[r],enumerable:!0})},d=(n,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of u(e))!g.call(n,l)&&l!==r&&t(n,l,{get:()=>e[l],enumerable:!(i=p(e,l))||i.enumerable});return n};var _=(n,e,r)=>(r=n!=null?h(x(n)):{},d(e||!n||!n.__esModule?t(r,\"default\",{value:n,enumerable:!0}):r,n)),f=n=>d(t({},\"__esModule\",{value:!0}),n);var o=j((F,s)=>{s.exports=_jsx_runtime});var C={};w(C,{default:()=>a,frontmatter:()=>M});var c=_(o()),M={title:\"\\u4E3A\\u4EC0\\u4E48\\u8981\\u5728\\u56FE\\u50CF\\u6807\\u7B7E\\u4E2D\\u4F7F\\u7528 `srcset` \\u5C5E\\u6027\\uFF1F\",subtitle:\"\\u89E3\\u91CA\\u6D4F\\u89C8\\u5668\\u5728\\u8BC4\\u4F30\\u6B64\\u5C5E\\u6027\\u5185\\u5BB9\\u65F6\\u4F7F\\u7528\\u7684\\u8FC7\\u7A0B\\u3002\"};function m(n){let e={code:\"code\",li:\"li\",p:\"p\",ul:\"ul\",...n.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(e.p,{children:[\"\\u5F53\\u60A8\\u5E0C\\u671B\\u6839\\u636E\\u7528\\u6237\\u7684\\u8BBE\\u5907\\u663E\\u793A\\u5BBD\\u5EA6\\u4E3A\\u7528\\u6237\\u63D0\\u4F9B\\u4E0D\\u540C\\u7684\\u56FE\\u50CF\\u65F6\\uFF0C\\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528 \",(0,c.jsx)(e.code,{children:\"srcset\"}),\" \\u5C5E\\u6027 - \\u4E3A\\u5177\\u6709\\u89C6\\u7F51\\u819C\\u663E\\u793A\\u5C4F\\u7684\\u8BBE\\u5907\\u63D0\\u4F9B\\u66F4\\u9AD8\\u8D28\\u91CF\\u7684\\u56FE\\u50CF\\u53EF\\u4EE5\\u589E\\u5F3A\\u7528\\u6237\\u4F53\\u9A8C\\uFF0C\\u800C\\u4E3A\\u4F4E\\u7AEF\\u8BBE\\u5907\\u63D0\\u4F9B\\u8F83\\u4F4E\\u5206\\u8FA8\\u7387\\u7684\\u56FE\\u50CF\\u53EF\\u4EE5\\u63D0\\u9AD8\\u6027\\u80FD\\u5E76\\u51CF\\u5C11\\u6570\\u636E\\u6D6A\\u8D39\\uFF08\\u56E0\\u4E3A\\u63D0\\u4F9B\\u66F4\\u5927\\u7684\\u56FE\\u50CF\\u4E0D\\u4F1A\\u6709\\u4EFB\\u4F55\\u53EF\\u89C1\\u7684\\u5DEE\\u5F02\\uFF09\\u3002\\u4F8B\\u5982\\uFF1A\",(0,c.jsx)(e.code,{children:'<img srcset=\"small.jpg 500w, medium.jpg 1000w, large.jpg 2000w\" src=\"...\" alt=\"\">'}),\" \\u544A\\u8BC9\\u6D4F\\u89C8\\u5668\\u6839\\u636E\\u5BA2\\u6237\\u7AEF\\u7684\\u5206\\u8FA8\\u7387\\u663E\\u793A small\\u3001medium \\u6216 large \",(0,c.jsx)(e.code,{children:\".jpg\"}),\" \\u56FE\\u50CF\\u3002\\u7B2C\\u4E00\\u4E2A\\u503C\\u662F\\u56FE\\u50CF\\u540D\\u79F0\\uFF0C\\u7B2C\\u4E8C\\u4E2A\\u503C\\u662F\\u56FE\\u50CF\\u7684\\u5BBD\\u5EA6\\uFF08\\u4EE5\\u50CF\\u7D20\\u4E3A\\u5355\\u4F4D\\uFF09\\u3002\\u5BF9\\u4E8E 320px \\u7684\\u8BBE\\u5907\\u5BBD\\u5EA6\\uFF0C\\u5C06\\u8FDB\\u884C\\u4EE5\\u4E0B\\u8BA1\\u7B97\\uFF1A\"]}),`\n`,(0,c.jsxs)(e.ul,{children:[`\n`,(0,c.jsx)(e.li,{children:\"500 / 320 = 1.5625\"}),`\n`,(0,c.jsx)(e.li,{children:\"1000 / 320 = 3.125\"}),`\n`,(0,c.jsx)(e.li,{children:\"2000 / 320 = 6.25\"}),`\n`]}),`\n`,(0,c.jsxs)(e.p,{children:[\"\\u5982\\u679C\\u5BA2\\u6237\\u7AEF\\u7684\\u5206\\u8FA8\\u7387\\u4E3A 1x\\uFF0C\\u5219 1.5625 \\u6700\\u63A5\\u8FD1\\uFF0C\\u6D4F\\u89C8\\u5668\\u5C06\\u9009\\u62E9\\u4E0E \",(0,c.jsx)(e.code,{children:\"small.jpg\"}),\" \\u5BF9\\u5E94\\u7684 \",(0,c.jsx)(e.code,{children:\"500w\"}),\"\\u3002\"]}),`\n`,(0,c.jsx)(e.p,{children:\"\\u5982\\u679C\\u5206\\u8FA8\\u7387\\u662F\\u89C6\\u7F51\\u819C (2x)\\uFF0C\\u6D4F\\u89C8\\u5668\\u5C06\\u4F7F\\u7528\\u6700\\u63A5\\u8FD1\\u6700\\u5C0F\\u503C\\u7684\\u5206\\u8FA8\\u7387\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u5B83\\u4E0D\\u4F1A\\u9009\\u62E9 500w (1.5625)\\uFF0C\\u56E0\\u4E3A\\u5B83\\u5927\\u4E8E 1\\uFF0C\\u5E76\\u4E14\\u56FE\\u50CF\\u53EF\\u80FD\\u770B\\u8D77\\u6765\\u5F88\\u7CDF\\u7CD5\\u3002\\u7136\\u540E\\uFF0C\\u6D4F\\u89C8\\u5668\\u5C06\\u9009\\u62E9\\u7ED3\\u679C\\u6BD4\\u7387\\u66F4\\u63A5\\u8FD1 2 \\u7684\\u56FE\\u50CF\\uFF0C\\u5373 1000w (3.125)\\u3002\"}),`\n`,(0,c.jsxs)(e.p,{children:[(0,c.jsx)(e.code,{children:\"srcset\"}),\" \\u89E3\\u51B3\\u4E86\\u60A8\\u5E0C\\u671B\\u4E3A\\u7A84\\u5C4F\\u8BBE\\u5907\\u63D0\\u4F9B\\u8F83\\u5C0F\\u56FE\\u50CF\\u6587\\u4EF6\\u7684\\u95EE\\u9898\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u4E0D\\u9700\\u8981\\u50CF\\u684C\\u9762\\u663E\\u793A\\u5668\\u90A3\\u6837\\u7684\\u5927\\u56FE\\u50CF\\uFF0C\\u5E76\\u4E14\\u8FD8\\u53EF\\u4EE5\\u9009\\u62E9\\u4E3A\\u9AD8\\u5BC6\\u5EA6/\\u4F4E\\u5BC6\\u5EA6\\u5C4F\\u5E55\\u63D0\\u4F9B\\u4E0D\\u540C\\u5206\\u8FA8\\u7387\\u7684\\u56FE\\u50CF\\u3002\"]})]})}function a(n={}){let{wrapper:e}=n.components||{};return e?(0,c.jsx)(e,{...n,children:(0,c.jsx)(m,{...n})}):m(n)}return f(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/submodules/top-javascript-interview-questions b/submodules/top-javascript-interview-questions
index 9531a2bd3..40e51eca2 160000
--- a/submodules/top-javascript-interview-questions
+++ b/submodules/top-javascript-interview-questions
@@ -1 +1 @@
-Subproject commit 9531a2bd35f811730db39e9781330cb237ae8545
+Subproject commit 40e51eca288c29cbff54bc62c27b0ef790d9eef7